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

mahenda · May 2, 2019

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>
<div class="carousel-item">

fifth row

sixth row

seven throw

eighth row

</div>
</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

chhorn · May 2, 2019

at a minimum

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

cyberRobot · May 2, 2019

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.

mahenda · May 2, 2019

oh thanks let me try i'll come back

mahenda · May 3, 2019

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

Barand · May 3, 2019

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

mahenda · May 3, 2019

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

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);

Barand · May 3, 2019

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

mahenda · May 3, 2019

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

Barand · May 3, 2019

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>

mahenda · May 4, 2019

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

Barand · May 4, 2019

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

mahenda · May 5, 2019

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 May 5, 2019 by mahenda

cyberRobot · May 6, 2019

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?

mahenda · May 8, 2019

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);

?>

<?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>

mahenda · May 8, 2019

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 May 8, 2019 by mahenda

cyberRobot · May 8, 2019

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 '">';

mahenda · May 9, 2019

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

mahenda · May 9, 2019

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="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

<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

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

what i want to be here is

<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

<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

Barand · May 9, 2019

@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>

Sign In

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

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information