Jump to content
mahenda

How can i retrieve different rows of data from MYSQL database table and display them in multi-item bootstrap carousel?

Recommended Posts

i have 8 division (div), i want to display 4 rows in 4 division and the remain 4 rows in the next 4 division here is my code structure for carousel

<div class="nyie-outer">    
<div class="container">
    <div  id="nyieFull" class="carousel slide carousel-multi-item" data-interval="false" data-ride="carousel">
        <div class="outer-controls-top">
        <div class="nyie-title"><h5>THIS IS NYIE</h5></div>
        <div class="controls-top">    
            <a class="btn-floating" href="#nyieFull" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
            <a class="btn-floating" href="#nyieFull" data-slide="next"><i class="fa fa-chevron-right"></i></a>
        </div>
        </div>
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
                 first row

                 second row

                 third row

                 fourth row
            </div><!--/.First four rows here-->
            <div class="carousel-item">

                  fifth row

                 sixth row

                 seven throw

                 eighth row

            </div><!--/.second four rows here-->
        </div
    </div>    
</div> 
</div>

 

 

sql code   

CREATE TABLE  product(
prodId INT(11) NOT NULL UNIQUE AUTO_INCREMENT, 
image VARCHAR(255) NOT NULL,
prodName VARCHAR(255) NOT NULL,
prodPrice VARCHAR(255) NOT NULL,
description TEXT NOT NULL
PRIMARY KEY (prodId) 
);

php code

<?php 
include_once('db.php');
$sql = "SELECT image,prodName, prodPrice, description FROM product ORDER BY prodId ASC LIMIT 4";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
    // output data of each row
        while($row = mysqli_fetch_array($result)) {
            $activeprod =  '
            <div class="col-lg-3">
            <a href="more.php" class="newAdded">    
            <figure class="figure">   
               <img src="images/'. $row['image'] .'" alt="" class="img-responsive" >
                <figcaption class="figure-caption">
                    <span class="prodName"><b>Name: </b>'. $row['prodName'] .'</span>
                    <span class="prodPrice"><b>price: </b>'. $row['prodPrice'] .'</span>
                    <span class="desc"><b>description: </b>'. $row['description'] .'</span>    
                </figcaption>    
            </figure> 
            </a>
            </div>
            ';
    }

?>

how can i echo that result in those rows 

 

 

 

Share this post


Link to post
Share on other sites

at a minimum

            <div class="carousel-item active">
              <?=$row[0]?>
              <?=$row[1]?>
              <?=$row[2]?>
              <?=$row[3]?>
            </div>

 

Share this post


Link to post
Share on other sites

When looping through the query results, you could store your 8+ rows in an array. Then use array_chunk() to split your rows in groups of four. Then use loops to output the information for your carousel.

  • Like 1

Share this post


Link to post
Share on other sites
16 hours ago, cyberRobot said:

When looping through the query results, you could store your 8+ rows in an array. Then use array_chunk() to split your rows in groups of four. Then use loops to output the information for your carousel.

show an example please

Share this post


Link to post
Share on other sites

Example as requested

<?php
//
// create some test data  (uses PDO)
//
$db->exec("DROP TABLE IF EXISTS test_product");
$db->exec("CREATE TABLE test_product (
           prod_id int not null auto_increment primary key,
           description varchar(50),
           price decimal(10,2)
           )");
$db->exec("INSERT INTO test_product (description, price) VALUES
           ('Product A', 49.99),
           ('Product B', 29.99),
           ('Product C', 9.99),
           ('Product D', 22.99),
           ('Product E', 29.99),
           ('Product F', 19.99),
           ('Product G', 129.99),
           ('Product H', 99.99),
           ('Product I', 74.99),
           ('Product J', 69.99);
            ");
            
//
//  get the data and store in an array
//
$res = $db->query("SELECT prod_id
                        , description
                        , price
                   FROM test_product
                   ORDER BY price     
                  ");
$products = $res->fetchAll();

//
// put the data into chunks of 4 and output
//
$chunks = array_chunk($products, 4);

?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sample</title>
</head>
<body>

       <?php
           foreach ($chunks as $prods) {
                echo '<div>'."\n";
                foreach ($prods as $p) {
                    echo "<div style='display:inline-block; width:15%; margin:8px; padding:8px; background-color:#EEE'>
                          <h4>{$p['description']}</h4>
                          <p>{$p['price']}</p>
                          </div>\n";
                }
                echo '</div>'."\n";
           }  

       ?>

</body>
</html>

Result

image.png.d6600ea9a9530ab11f30041ad4d22826.png

Share this post


Link to post
Share on other sites

 

6 hours ago, Barand said:

Example as requested


<?php
//
// create some test data  (uses PDO)
//
$db->exec("DROP TABLE IF EXISTS test_product");
$db->exec("CREATE TABLE test_product (
           prod_id int not null auto_increment primary key,
           description varchar(50),
           price decimal(10,2)
           )");
$db->exec("INSERT INTO test_product (description, price) VALUES
           ('Product A', 49.99),
           ('Product B', 29.99),
           ('Product C', 9.99),
           ('Product D', 22.99),
           ('Product E', 29.99),
           ('Product F', 19.99),
           ('Product G', 129.99),
           ('Product H', 99.99),
           ('Product I', 74.99),
           ('Product J', 69.99);
            ");
            
//
//  get the data and store in an array
//
$res = $db->query("SELECT prod_id
                        , description
                        , price
                   FROM test_product
                   ORDER BY price     
                  ");
$products = $res->fetchAll();

//
// put the data into chunks of 4 and output
//
$chunks = array_chunk($products, 4);

?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sample</title>
</head>
<body>

       <?php
           foreach ($chunks as $prods) {
                echo '<div>'."\n";
                foreach ($prods as $p) {
                    echo "<div style='display:inline-block; width:15%; margin:8px; padding:8px; background-color:#EEE'>
                          <h4>{$p['description']}</h4>
                          <p>{$p['price']}</p>
                          </div>\n";
                }
                echo '</div>'."\n";
           }  

       ?>

</body>
</html>

Result

image.png.d6600ea9a9530ab11f30041ad4d22826.png

i'm using mysqli procedural and getting an error t  at fetchal() when i'm using mysqli_fetch_all($result,MYSQL_ASSOC); with chuck variable in say undefined  variable  $product 

$products = mysqli_fetch_All();

$chunks = array_chunk($products, 4);

Share this post


Link to post
Share on other sites
34 minutes ago, Barand said:

Your call to mysqli_fetch_all() is incorrect (See manual)

Can you tryagain to show me in myaql maybe i'll understand I'm not an experienced developer

Share this post


Link to post
Share on other sites

Just about every professional coder in these forums would advise you to switch to PDO instead of mysqli, but if you insist

<?php


mysqli_report(MYSQLI_REPORT_ERROR|MYSQLI_REPORT_STRICT);
$conn = mysqli_connect(HOST, USERNAME, PASSWORD, 'test');
//
//  get the data and store in an array
//

$res = mysqli_query($conn, "SELECT prod_id
                        , description
                        , price
                   FROM test_product
                   ORDER BY price     
                  ");
$products = mysqli_fetch_all($res, MYSQLI_ASSOC);

//
// put the data into chunks of 4 for output
//
$chunks = array_chunk($products, 4);

?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sample</title>
</head>
<body>

       <?php
           foreach ($chunks as $prods) {
                echo '<div>'."\n";
                foreach ($prods as $p) {
                    echo "<div style='display:inline-block; width:15%; margin:8px; padding:8px; background-color:#EEE'>
                          <h4>{$p['description']}</h4>
                          <p>{$p['price']}</p>
                          </div>\n";
                }
                echo '</div>'."\n";
           }  

       ?>

</body>
</html>

 

Share this post


Link to post
Share on other sites
7 hours ago, Barand said:

Just about every professional coder in these forums would advise you to switch to PDO instead of mysqli, but if you insist


<?php


mysqli_report(MYSQLI_REPORT_ERROR|MYSQLI_REPORT_STRICT);
$conn = mysqli_connect(HOST, USERNAME, PASSWORD, 'test');
//
//  get the data and store in an array
//

$res = mysqli_query($conn, "SELECT prod_id
                        , description
                        , price
                   FROM test_product
                   ORDER BY price     
                  ");
$products = mysqli_fetch_all($res, MYSQLI_ASSOC);

//
// put the data into chunks of 4 for output
//
$chunks = array_chunk($products, 4);

?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sample</title>
</head>
<body>

       <?php
           foreach ($chunks as $prods) {
                echo '<div>'."\n";
                foreach ($prods as $p) {
                    echo "<div style='display:inline-block; width:15%; margin:8px; padding:8px; background-color:#EEE'>
                          <h4>{$p['description']}</h4>
                          <p>{$p['price']}</p>
                          </div>\n";
                }
                echo '</div>'."\n";
           }  

       ?>

</body>
</html>

 

Resulted to an error undefined $chunk ithink   there is problem 

Share this post


Link to post
Share on other sites

There is no point in your just reposting my code (which works). Post the code you are using if you are having problems.

  • Like 1

Share this post


Link to post
Share on other sites
Posted (edited)

thanks a lot it was my fault on calling $chunk in foreach loop it helped me but how to put the next four item hidden as my carousel on non active item

Edited by mahenda

Share this post


Link to post
Share on other sites
On 5/5/2019 at 12:36 AM, mahenda said:

...but how to put the next four item hidden as my carousel on non active item

What does your code look like now?

Share this post


Link to post
Share on other sites
On 5/6/2019 at 3:30 PM, cyberRobot said:

What does your code look like now?

<?php 
include_once('db.php');
$sql = "SELECT image,prodName, prodPrice, description FROM product ORDER BY prodId DESC LIMIT 8";

$prodres = mysqli_query($conn, $sql);
$newprod = mysqli_fetch_all($prodres, MYSQLI_ASSOC);
$fourDiv = array_chunk($newprod, 4);

?>

<div class="nyie-outer">    
<div class="container">
    <div  id="nyieFull" class="carousel slide carousel-multi-item" data-interval="false" data-ride="carousel">
        <div class="outer-controls-top">
        <div class="nyie-title"><h5>THIS IS NYIE</h5></div>
        <div class="controls-top">    
            <a class="btn-floating" href="#nyieFull" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
            <a class="btn-floating" href="#nyieFull" data-slide="next"><i class="fa fa-chevron-right"></i></a>
        </div>
        </div>
        <div class="carousel-inner" role="listbox">

             <?php
           foreach ($fourDiv  as $products ) {
                echo '<div class="carousel-item items">';
                foreach ($products as $p) {
                    echo '
                        <div class="col-lg-3">
                        <a href="">
                   figure class="figure">   
               <img src="images/'. $p['image'] .'" alt="" class="img-responsive" >
                <figcaption class="figure-caption">
                    <span class="prodName"><b>Name: </b>'. $p['prodName'] .'</span>
                    <span class="prodPrice"><b>price: </b>'. $p['prodPrice'] .'</span>
                    <span class="desc"><b>description: </b>'. $p['description'] .'</span> 
                </figcaption>    
            </figure> 
                        </a>
                        </div>
                        ';
                   
                }
                echo '</div>';
           }  
       ?> 
        </div
    </div>    
</div> 
</div>



      

Share this post


Link to post
Share on other sites
Posted (edited)

I'm sorry guys I experienced another problem on the code above it display well at large device but when at small devices such as phone and tablets only two product shown and leave space on the right

It means the figure doesn't fitting the col-lg-3

Help me please

@Borand

@cyberRobot

 

Edited by mahenda

Share this post


Link to post
Share on other sites
On 5/5/2019 at 12:36 AM, mahenda said:

...how to put the next four item hidden as my carousel on non active item

Based on the code in your original post, I assume that adding "active" to the class attribute for your "carousel-item" div causes the four items to be displayed. Then the other "carousel-item" div that doesn't have the "active" class should be hidden. Assuming that's correct, you could modify the first foreach loop to get the index associated with your chunks.

foreach ($fourDiv as $index => $products) {

Then use that index to add the "active" class to the first "carousel-item" div tag.

foreach ($fourDiv as $index => $products) {
	echo '<div class="carousel-item items';
	if($index == 0) { echo ' active'; }
	echo '">';

 

Share this post


Link to post
Share on other sites
21 hours ago, cyberRobot said:

Based on the code in your original post, I assume that adding "active" to the class attribute for your "carousel-item" div causes the four items to be displayed. Then the other "carousel-item" div that doesn't have the "active" class should be hidden. Assuming that's correct, you could modify the first foreach loop to get the index associated with your chunks.


foreach ($fourDiv as $index => $products) {

Then use that index to add the "active" class to the first "carousel-item" div tag.


foreach ($fourDiv as $index => $products) {
	echo '<div class="carousel-item items';
	if($index == 0) { echo ' active'; }
	echo '">';

 

it helped me but when i resize screen it show only  one item and white space on the  right side but also when i click the button for next slide there is another one  item only wit white space shown what is the problem test the code above

Share this post


Link to post
Share on other sites
21 minutes ago, mahenda said:

it helped me but when i resize screen it show only  one item and white space on the  right side but also when i click the button for next slide there is another one  item only wit white space shown what is the problem test the code above

 

21 minutes ago, mahenda said:

 

it helped me but when i resize screen it show only  first item and white space on the  right side ,also when i click the next button there is onlly one  item shown  wit white space as i said

what is the problem look here

<div class="nyie-outer">    
<div class="container">
    <div  id="nyieFull" class="carousel slide carousel-multi-item" data-interval="false" data-ride="carousel">
        <div class="outer-controls-top">
        <div class="nyie-title"><h5>THIS IS NYIE</h5></div>
        <div class="controls-top">    
            <a class="btn-floating" href="#nyieFull" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
            <a class="btn-floating" href="#nyieFull" data-slide="next"><i class="fa fa-chevron-right"></i></a>
        </div>
        </div>
        <div class="carousel-inner newAdded" role= "listbox">

         <div class="carousel-item active">

                  <div class="col-lg-3">... </div> //only this is shown with white space at right side

                  <div class="col-lg-3">... </div>//not shown

                  <div class="col-lg-3">... </div>//not shown

                     <div class="col-lg-3">... </div>//not shown
        </div

     

       <div class="carousel-item ">

                  <div class="col-lg-3">... </div> //only this is shown with white space at right side

                  <div class="col-lg-3">... </div>//not shown

                  <div class="col-lg-3">... </div>//not shown

                     <div class="col-lg-3">... </div>//not shown
        </div

    </div>    
</div> 
</div>

 

what i want to be here is

 

       <div class="carousel-item active">

                  <div class="col-lg-3">... </div> //show this by default

                  <div class="col-lg-3">... </div>//show this after  next button clicked 

                  <div class="col-lg-3">... </div>//show this after next button clicked

                     <div class="col-lg-3">... </div>//show this after next button clicked 
        </div

     <div class="carousel-item ">

                  <div class="col-lg-3">... </div> //show this by default

                  <div class="col-lg-3">... </div>//show this after  next button clicked 

                  <div class="col-lg-3">... </div>//show this after next button clicked

                     <div class="col-lg-3">... </div>//show this after next button clicked 
        </div

 

 

Share this post


Link to post
Share on other sites

@Mohonda

Here's a working example which you can modify to use your classes

<?php
mysqli_report(MYSQLI_REPORT_ERROR|MYSQLI_REPORT_STRICT);
$conn = mysqli_connect(HOST, USERNAME, PASSWORD, 'test');
//
//  get the data and store in an array
//

$res = mysqli_query($conn, "SELECT prod_id
                                 , description
                                 , price
                            FROM test_product
                            ORDER BY price     
                            ");
$products = mysqli_fetch_all($res, MYSQLI_ASSOC);

//
// put the data into chunks of 4 for output
//
$chunks = array_chunk($products, 4);

?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Sample</title>
<style type="text/css">
   .mySlide {display:none;}
</style>
<script>
    var slideIndex
    var numSlides
    
    $().ready(function() 
    {
        var x = document.getElementsByClassName("mySlide");
        numSlides = x.length
        slideIndex = 1;
        showSlide();
    })

    function plusIndex(n) 
    {
        slideIndex += n
        if (slideIndex > numSlides) {slideIndex = 1}
        if (slideIndex < 1) {slideIndex = numSlides}
        showSlide();
    }

    function showSlide() 
    {
        $(".mySlide").css("display", "none")
        $(".mySlide[data-index=" + slideIndex + "]").css("display", "block");  
    }
</script>
</head>
<body>
       <h2 class="w3-center">Slideshow</h2>
       <div class="w3-content w3-display-container w3-center">
       <?php
           $n = 0; 
           foreach ($chunks as $prods) {
               // ADD NEW SLIDE
               echo '<div class="mySlide w3-content w3-display-container w3-center" data-index="'. ++$n .'">'."\n";
               foreach ($prods as $p) {
                   // ADD SLIDE CONTENT
                   echo "<div style='display:inline-block; width:40%; margin:8px; padding:8px; background-color:#EEE'>
                         <h4>{$p['description']}</h4>
                         <p>{$p['price']}</p>
                         </div>\n";
               }
               echo '</div>'."\n";
           }  
           echo '<button class="w3-button w3-black w3-display-left" onclick="plusIndex(-1)"><</button>
                 <button class="w3-button w3-black w3-display-right" onclick="plusIndex(1)">></button>' ;
           
       ?>
       </div>

</body>
</html>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.