Jump to content

unable to display a table in a grid format


laxi

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

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

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();
?>
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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();
?>
Link to comment
Share on other sites

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

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

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

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

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 by cyberRobot
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.