Jump to content

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


mahenda

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 

 

 

 

Link to comment
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

Link to comment
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);
Link to comment
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>

 

Link to comment
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 

Link to comment
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>



      

Link to comment
Share on other sites

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
Link to comment
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 '">';

 

Link to comment
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

Link to comment
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

 

 

Link to comment
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>
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.