unable to display a table in a grid format

[laxi]

Hello people,

 

I need to get the items displayed dynamically from Mysql database in a  5x3 grid on my webpage.

 

I have managed to put together a dynamic table from Mysql DB. However, I am not able to display the items in a grid format. The output is diplayed linearly on the webpage. Can someone tell me what I need to correct on my script to get them displayed as a grid instead of the linear display.

 

FYI,

 

$dynamicList is a table that puts together product details and $dyn_table is the grid table.

 

 

 

<?php
// Connect to the MySQL database
include "storescripts/connect_to_mysql.php";
// This block grabs the whole list for viewing
$i=0;

$sql = mysql_query("SELECT * FROM products ORDER BY date_added DESC");
$productCount = mysql_num_rows($sql); // count the output amount
if ($productCount > 0) {
$dyn_table = '<table border="0" cellpadding="4">';
while($row = mysql_fetch_array($sql)){
$id=$row["id"];
$product_name=$row["product_name"];
$price=$row["price"];
$category=$row["category"];
$first_subcategory=$row["first_subcategory"];
$second_subcategory=$row["second_subcategory"];
$date_added=$row["date_added"];

$dynamicList .= ' <table width="20%" border="1" cellspacing="0" cellpadding="4">
<tr>
<td><a href="product.php?id='.$id.'"><img src="inventory_images/'.$id.'.jpg" width="243" border="1" height="240" alt="$dynamicTitle" /></a></td>
</tr>
<tr>
<td> ' .$product_name . '</br>
<hr>
$ ' .$price . '</br>
<hr>
<a href="product.php?id='.$id.'">View Product Details</a></td>
</tr>
</table>';


if ($i % 3==0){
$dyn_table .='<tr><td>' . $dynamicList .'</td>';
}else
{
$dyn_table .='<td>' . $dynamicList .'</td>';}
$i++;
}
$dyn_table .='</tr></table>';
} else {
$dynamicList = "We have no products listed in our store yet";
}
mysql_close();
?>

Thank you in advance

[ginerjm]

You never close your row tag in your if where you check how many cols you have posted.

  if ($i % 3==0)
  {
   $dyn_table .="<tr><td>$dynamicList</td>";
  }
  else
  {
   $dyn_table .= "<td>$dynamicList</td>";
  }

 

You should be issuing a </tr> tag at some point, but you will need to figure out how to avoid the first row starting with one.

[laxi]

No luck yet...can somebody help me figure this out?

[ginerjm]

Works for me - I added the </tr> tag at the appropriate place.

[rbrown]

It is like ginerjm explained... you aren't closing your table rows.

 

Look at the html source after you run the script.

 

Plus I would use a count instead. Your:

if ($i % 3==0)

should be

if ($i % 3 === 0)

and only used if you are trying to get 3 columns then a new row, which I don't think you want, since you have a table within a table. Try this:

$Count = 0; //set outside while loop
if ($productCount != $Count) {
     $dyn_table .="
        <tr>
            <td>
                $dynamicList
            </td>
        </tr>"; 
} else {
    $dyn_table .= "
         <tr>
             <td>
                 $dynamicList
             </td>";
}

Plus you should get into the habit of indenting your code (makes it easier to read. And more likely for people to help... This is a mess. Go get Netbeans or an Ide.) and start using mysqli instead of mysql.

[ginerjm]

Make this change:

 

if ($i % 3 == 0)
{
     if ($i <> 0)
         $dyn_table .= "</tr>";
    $dyn_table .= "<tr><td>$dynamicList</td>";
}
else
{
    $dyn_table .= "<td>$dynamicList</td>";
}
$i++;

Edited January 13, 2014 by ginerjm

[jcbones]

I changed the things that stood out to me.  This code is un-tested though, so I'm sure I could have missed something.

<?php
// Connect to the MySQL database
include "storescripts/connect_to_mysql.php";
// This block grabs the whole list for viewing
$i=0;
$firstRun = true;  //holding.

$sql = mysql_query("SELECT * FROM products ORDER BY date_added DESC");
$productCount = mysql_num_rows($sql); // count the output amount
if ($productCount > 0) {
    $dyn_table = '<table border="0" cellpadding="4"><tr>'; //added <tr> to start the first row.
    while($row = mysql_fetch_array($sql)){
        $id=$row["id"];
        $product_name=$row["product_name"];
        $price=$row["price"];
        $category=$row["category"];
        $first_subcategory=$row["first_subcategory"];
        $second_subcategory=$row["second_subcategory"];
        $date_added=$row["date_added"];        
        
        //remove the appending . from $dynamicList, because I'm sure you don't want 15 tables on the last table cell.
        $dynamicList = ' <table width="20%" border="1" cellspacing="0" cellpadding="4">
        <tr colspan="3">
        <td><a href="product.php?id='.$id.'"><img src="inventory_images/'.$id.'.jpg" width="243" border="1" height="240" alt="$dynamicTitle" /></a></td>
        </tr>
        <tr>
        <td> ' .$product_name . '</br>
        <hr>
        $ ' .$price . '</br>
        <hr>
        <a href="product.php?id='.$id.'">View Product Details</a></td>
        </tr>
        </table>';


        if ($i++ % 3==0 && $firstRun == false){ //increment $i before EDIT: AFTER using, so on the first run 1 / 3 != 0;
        $dyn_table .='</tr><tr>'; //added a closing </tr> so that the row will end on the 3rd run.
        }
        //took out else statement, as there is no need to type things twice.
        $dyn_table .='<td>' . $dynamicList .'</td>';
        
        $firstRun = false; //changed firstrun to false, so that the increment will work correctly.
    }
    $dyn_table .= '</tr></table>';  
} else {
    $dynamicList = "We have no products listed in our store yet";
}
mysql_close();
?>

Edited January 13, 2014 by jcbones

[laxi]

Hi,

 

I tried this code but now it displays only 1 product, ie 1 row and 1 coloumn.No other products are displayed.

 

 

 

 

I changed the things that stood out to me.  This code is un-tested though, so I'm sure I could have missed something.

<?php
// Connect to the MySQL database
include "storescripts/connect_to_mysql.php";
// This block grabs the whole list for viewing
$i=0;
$firstRun = true;  //holding.

$sql = mysql_query("SELECT * FROM products ORDER BY date_added DESC");
$productCount = mysql_num_rows($sql); // count the output amount
if ($productCount > 0) {
    $dyn_table = '<table border="0" cellpadding="4"><tr>'; //added <tr> to start the first row.
    while($row = mysql_fetch_array($sql)){
        $id=$row["id"];
        $product_name=$row["product_name"];
        $price=$row["price"];
        $category=$row["category"];
        $first_subcategory=$row["first_subcategory"];
        $second_subcategory=$row["second_subcategory"];
        $date_added=$row["date_added"];        
        
        //remove the appending . from $dynamicList, because I'm sure you don't want 15 tables on the last table cell.
        $dynamicList = ' <table width="20%" border="1" cellspacing="0" cellpadding="4">
        <tr colspan="3">
        <td><a href="product.php?id='.$id.'"><img src="inventory_images/'.$id.'.jpg" width="243" border="1" height="240" alt="$dynamicTitle" /></a></td>
        </tr>
        <tr>
        <td> ' .$product_name . '</br>
        <hr>
        $ ' .$price . '</br>
        <hr>
        <a href="product.php?id='.$id.'">View Product Details</a></td>
        </tr>
        </table>';


        if ($i++ % 3==0 && $firstRun == false){ //increment $i before EDIT: AFTER using, so on the first run 1 / 3 != 0;
        $dyn_table .='</tr><tr>'; //added a closing </tr> so that the row will end on the 3rd run.
        }
        //took out else statement, as there is no need to type things twice.
        $dyn_table .='<td>' . $dynamicList .'</td>';
        
        $firstRun = false; //changed firstrun to false, so that the increment will work correctly.
    }
    $dyn_table .= '</tr></table>';  
} else {
    $dynamicList = "We have no products listed in our store yet";
}
mysql_close();
?>

[ginerjm]

 

 

I gave you the fix to make - two lines, that's all and it works just fine.  And I showed you where to place them.  What else can I do?

[laxi]

I made changes you sugested but it still gives me a linear display.Not sure why..

 

 

I gave you the fix to make - two lines, that's all and it works just fine.  And I showed you where to place them.  What else can I do?

[laxi]

Hi ginerjm

 

Please find my script below. It still displays linear..

 

 

 

<?php
// Connect to the MySQL database
include "storescripts/connect_to_mysql.php";
// This block grabs the whole list for viewing
$i=0;

$sql = mysql_query("SELECT * FROM products ORDER BY date_added DESC");
$productCount = mysql_num_rows($sql); // count the output amount
if ($productCount > 0) {
$dyn_table = '<table border="0" cellpadding="4">';
while($row = mysql_fetch_array($sql)){
$id=$row["id"];
$product_name=$row["product_name"];
$price=$row["price"];
$category=$row["category"];
$first_subcategory=$row["first_subcategory"];
$second_subcategory=$row["second_subcategory"];
$date_added=$row["date_added"];

$dynamicList .= ' <table width="20%" border="1" cellspacing="0" cellpadding="4">
<tr>
<td><a href="product.php?id='.$id.'"><img src="inventory_images/'.$id.'.jpg" width="243" border="1" height="240" alt="$dynamicTitle" /></a></td>
</tr>
<tr>
<td> ' .$product_name . '</br>
<hr>
$ ' .$price . '</br>
<hr>
<a href="product.php?id='.$id.'">View Product Details</a></td>
</tr>
</table>';


if ($i % 3==0){
if ($i <> 0)
$dyn_table .= "</tr>";
$dyn_table .= "<tr><td>$dynamicList</td>";
}
else
{
$dyn_table .= "<td>$dynamicList</td>";}
$i++;
}
$dyn_table .='</tr></table>';
} else {
$dynamicList = "We have no products listed in our store yet";
}
mysql_close();
?>

[ginerjm]

Actually looking at this code I don't see what is wrong with it, but as someone else pointed out it Is extremely hard to read as you've written it.  Personally I detest code that uses more than one set of <? ?> tags, so reading yours is definitely not easy for me.  (look up 'heredocs' in the php manual)

Edited January 13, 2014 by ginerjm

[laxi]

Hi,

 

I tried the below, still no luck.below is the code used

 

 

 

<?php
// Connect to the MySQL database
include "storescripts/connect_to_mysql.php";
// This block grabs the whole list for viewing
$i=0;

$sql = mysql_query("SELECT * FROM products ORDER BY date_added DESC");
$productCount = mysql_num_rows($sql); // count the output amount
if ($productCount > 0) {
$dyn_table = '<table border="0" cellpadding="4">';
while($row = mysql_fetch_array($sql)){
$id=$row["id"];
$product_name=$row["product_name"];
$price=$row["price"];
$category=$row["category"];
$first_subcategory=$row["first_subcategory"];
$second_subcategory=$row["second_subcategory"];
$date_added=$row["date_added"];

$dynamicList .= ' <table width="20%" border="1" cellspacing="0" cellpadding="4">
<tr>
<td><a href="product.php?id='.$id.'"><img src="inventory_images/'.$id.'.jpg" width="243" border="1" height="240" alt="$dynamicTitle" /></a></td>
</tr>
<tr>
<td> ' .$product_name . '</br>
<hr>
$ ' .$price . '</br>
<hr>
<a href="product.php?id='.$id.'">View Product Details</a></td>
</tr>
</table>';


if ($i % 3==0){
if ($i <> 0){
$dyn_table .= "</tr>";
$dyn_table .= "<tr><td>$dynamicList</td>";
}
else
{
$dyn_table .= "<td>$dynamicList</td>";}

}
$i++;}
$dyn_table .='</tr></table>';
} else {
$dynamicList = "We have no products listed in our store yet";
}
mysql_close();
?>

 

[ginerjm]

my bad - you saw my original response before I re-read and saw the brace you had.

 

This is now bad:
 if ($i % 3==0){
if ($i <> 0){
$dyn_table .= "</tr>";
$dyn_table .= "<tr><td>$dynamicList</td>";
}
else
{
$dyn_table .= "<td>$dynamicList</td>";}

}
$i++;}

 

 

Try this:

 if ($i % 3==0)

{
    if ($i <> 0) 
         $dyn_table .= "</tr>";
    $dyn_table .= "<tr><td>$dynamicList</td>";
}
else
{
     $dyn_table .= "<td>$dynamicList</td>";
}
$i++;

[dungpt29]

Hello people,

 

I need to get the items displayed dynamically from Mysql database in a  5x3 grid on my webpage.

 

I have managed to put together a dynamic table from Mysql DB. However, I am not able to display the items in a grid format. The output is diplayed linearly on the webpage. Can someone tell me what I need to correct on my script to get them displayed as a grid instead of the linear display.

 

FYI,

 

$dynamicList is a table that puts together product details and $dyn_table is the grid table.

 

I have read carefully your PHP script. In my opinion, the solution used in the script is too bad and it cannot help you display product data as desired. Therefore, you are to develop a new one. Currently, I am not sure what exactly your structure of the grid is. Can you describe it more detailedly using a drawing? How many columns does it have? What is name of each column if existed? 

 

If so, I will be ready to help you work out another solution to display the product list on your webpage.

Edited January 13, 2014 by dungpt29

[mac_gyver]

your code is concatenating the  $dynamicList variable every pass through the loop, resulting in a mess in the html -

 

$dynamicList . =

 

i would also re-factor the code so as to not repeat (DRY) -

 if ($i % 3==0)
{
    if ($i <> 0)
    {
        // end the previous row, when not the first one
         $dyn_table .= "</tr>";
    }
    // start a new row
    $dyn_table .= "<tr>";
}
    // the data section in each row
     $dyn_table .= "<td>$dynamicList</td>";

$i++;

Edited January 13, 2014 by mac_gyver

[cyberRobot]

I personally would store all the tables in an array and then use array_chunk() to break them into groups of three. For example, you could try something like the following:

<?php
// Connect to the MySQL database
include "storescripts/connect_to_mysql.php";
// This block grabs the whole list for viewing
 
//INITIALIZE VARIABLES
$tableArray = array();
 
//LOOP THROUGH PRODUCT INFORMATION
$sql = mysql_query("SELECT * FROM products ORDER BY date_added DESC");
while($row = mysql_fetch_array($sql)) {
     $tableArray[] = '<table width="20%" border="1" cellspacing="0" cellpadding="4">
     <tr>
     <td><a href="product.php?id='.$row['id'].'"><img src="inventory_images/'.$row['id'].'.jpg" width="243" border="1" height="240" alt="$dynamicTitle" /></a></td>
     </tr>
     <tr>
     <td> ' .$row['product_name'] . '</br>
     <hr>
     $ ' .$row['price'] . '</br>
     <hr>
     <a href="product.php?id='.$row['id'].'">View Product Details</a></td>
     </tr>
     </table>';
}
mysql_close();
 
//IF PRODUCTS WERE FOUND, DISPLAY THEM
if(!empty($tableArray)) {
     $tableArray = array_chunk($tableArray, 3);
     foreach($tableArray as $tableGroup) {
          echo '<table border="0" cellpadding="4">';
          echo '<tr>';
          foreach($tableGroup as $currTable) {
               echo "<td>$currTable</td>";
          }
          echo '</tr>';
          echo '</table>';
     }
 
//ELSE...NO PRODUCTS
} else {
     echo 'We have no products listed in our store yet';
}
?>

Note that I got rid of some extra variables. Instead of using $id, for example, I just used the $row['id'] variable. It requires fewer lines of code and requires less overhead since PHP doesn't need to maintain duplicate variables.

Edited January 13, 2014 by cyberRobot