Display 4 Items Each Row

hahaitwork · October 18, 2012

I want the items to stack 4 and 4 each row and not 1 by 1.

Anyone got some nice solutions ? I'm pretty new to php and such, followed a few tutorials and now i'm pretty stuck with this code I'm working on.

Can add more code if it's needed!

This is some of my code:

function products() {

$get = mysql_query ('SELECT id, name, description, price FROM products WHERE quantity > 0 ORDER BY id DESC');

if (mysql_num_rows($get) == 0) {

echo "There are no products to display!";

}

else {

while ($get_row = mysql_fetch_assoc($get)) {

echo

'<table border="1">'.

'<tr>'.

'<td width="200px">'.

'<center>'.

'<p>'.$get_row['name'].'<br />'. $get_row['description'].'<br />€'.number_format ($get_row['price'], 2).'<br />

<a href="cart.php?add='.$get_row['id'].'"><img src="add.png" border="0" style="height: 25px; width: 50px" ></a></a></p>'.

'</center>'.

' </td>'.

' </table>';

}

}

}

Edited October 18, 2012 by hahaitwork

codefossa · October 18, 2012

You just need to understand the table.

In these tags are the rows. A new <tr> will go to the next line down in the table.

These are your columns. You currently only have one. Put four of these inside the row to get four columns in the row.

Also, take the table opening and close out of the loop. This way you only add a new row to the table rather than a new table.

Barand · October 18, 2012

you don't need a table

<?php
function products() {


$get = mysql_query ('SELECT id, name, description, price FROM products WHERE quantity > 0 ORDER BY id DESC');
if (mysql_num_rows($get) == 0) {
echo "There are no products to display!";
}
else {
   $count=0;
   while ($get_row = mysql_fetch_assoc($get)) {
    echo "<p style='width:200px; text-align:center; float:left;'>".$get_row['name'].'<br />'
    . $get_row['description'] . '<br />€' . number_format ($get_row['price'], 2)
    . '<br /><a href="cart.php?add=' . $get_row['id']
    . '"><img src="add.png" border="0" style="height: 25px; width: 50px" ></a></p>';

    if (++$count % 4 == 0) echo "<div style='clear:both'></div>";
   }
   echo "<div style='clear:both'></div>";
}

}
?>

hahaitwork · October 18, 2012

you don't need a table

<?php
function products() {


$get = mysql_query ('SELECT id, name, description, price FROM products WHERE quantity > 0 ORDER BY id DESC');
if (mysql_num_rows($get) == 0) {
echo "There are no products to display!";
}
else {
$count=0;
while ($get_row = mysql_fetch_assoc($get)) {
 echo "<p style='width:200px; text-align:center; float:left;'>".$get_row['name'].'<br />'
 . $get_row['description'] . '<br />€' . number_format ($get_row['price'], 2)
 . '<br /><a href="cart.php?add=' . $get_row['id']
 . '"><img src="add.png" border="0" style="height: 25px; width: 50px" ></a></p>';

 if (++$count % 4 == 0) echo "<div style='clear:both'></div>";
}
echo "<div style='clear:both'></div>";
}

}
?>

Thanks but it did not seem to work, it only removed my tables and it still stacks 1 by 1 (vertical)

NB! this code I wrote is made in 1 document but it is my index bar that is showing it.

the index file (cartindex.php)

<?php require 'cart.php'; ?>

<html>

<head>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<?php cart(); ?>

<br /> <br />

<div id="sidebar">

<table border='1' cellspacing='3' cellpadding='5' >

<?php products(); ?>

</div>

</body>

</html>

hahaitwork · October 18, 2012

You just need to understand the table.

<tr></tr>

In these tags are the rows. A new <tr> will go to the next line down in the table.

<td></td>

These are your columns. You currently only have one. Put four of these inside the row to get four columns in the row.

Also, take the table opening and close out of the loop. This way you only add a new row to the table rather than a new table.

thx for the info, will take a look and try to figure it out!

- Keep the ideas coming

-----EDIT-------

Okey, I checked it and now I got them 4 in a row BUT as I will add another item to the database, this will also be added in that row, which means I will need something like Barand was making, a "max" count of 4 etc.

Edited October 18, 2012 by hahaitwork

Barand · October 18, 2012

Mine will only work if there is sufficient space (800+ pixels) to print 4 sets in a single row. If you are constraining it to a narrow sidebar you will have a problem with any method.

hahaitwork · October 18, 2012

Mine will only work if there is sufficient space (800+ pixels) to print 4 sets in a single row. If you are constraining it to a narrow sidebar you will have a problem with any method.

ahhhh, thanks it works now! I did not know that my side bar could make everything stop working Fixed now but will keep this thread open a few more hours because I might have another question about tables.. but thx again!

Good and fast respons!

hahaitwork · October 18, 2012

Mine will only work if there is sufficient space (800+ pixels) to print 4 sets in a single row. If you are constraining it to a narrow sidebar you will have a problem with any method.

I just tried the same methode on another place, but it do not work.. any idea what I have forgot or if the space is too small or something?

function cart() {

foreach($_SESSION as $name => $value) {

if ($value>0) {

if (substr($name, 0, 5) =='cart_') {

$id = substr($name, 5, (strlen($name)-5));

$get = mysql_query('SELECT id, name, price FROM products WHERE id='.mysql_real_escape_string((int)$id));

$countxx=0;

while ($get_row = mysql_fetch_assoc($get)) {

$sub = $get_row['price']*$value;

echo

"<p style='width:200px; text-align:center; float:left;'>".

$get_row['name'].' x'.$value.' * €'.number_format ($get_row['price'],2).' = €'.number_format($sub, 2).'

<a href="cart.php?remove='.$id.'"><img src="subtract.png" border="0" style="height: 20px; width: 35px" ></a>

<a href="cart.php?add='.$id.'"><img src="pluss.png" border="0" style="height: 20px; width: 35px" ></a>

<a href="cart.php?delete='.$id.'"><img src="delete.png" border="0" style="height: 20px; width: 50px" ></a> <br />';

if (++$countxx % 4 == 0) echo "<div style='clear:both'></div>";

}

echo "<div style='clear:both'></div>";

}

@$total += $sub;

}

}

Barand · October 18, 2012

 "<p style='width:200px; text-align:center; float:left;'>".

Try reducing the width (currently 200px) or change to 24%

hahaitwork · October 18, 2012

 "<p style='width:200px; text-align:center; float:left;'>".
Try reducing the width (currently 200px) or change to 24%

not working what so ever, not even if I choose to have 3 or 2 each row.

24%, 10 % etc .. not working

20 px, 200px, 150px .. not working

hmm

hahaitwork · October 18, 2012

 "<p style='width:200px; text-align:center; float:left;'>".
Try reducing the width (currently 200px) or change to 24%

can it be because I'm missing

if (mysql_num_rows($get) == 0) {

I'm not sure where to put it thought, without getting errors..

hahaitwork · October 18, 2012

Update:

Problem 1.

I want my cart items to stack horizontal and not vertical (4 each row).

Problem 2.

I got 6 items that I got the button "add" but only the 4 last works and not the two first, the two that don't work is working after i press add on any of those that works.

Most of the needed script can be found above, if u got questions feel free to ask!

Edited October 18, 2012 by hahaitwork

White_Lily · October 18, 2012

In order to change the width and height of any text tag properly you need to set the style to:

p /*and any other tags you want here (seperate them with a comma)*/
{
display: block;
width: ; /* set */
height: auto; /* unless specified */
float: left; */ (or right whichever floats your boat) */
}

Barand · October 18, 2012

You have the opening <p style=...> but no closing </p> tag

Psycho · October 18, 2012

A lot of developers try to avoid tables because they were over used as a formatting control for so many years. But, a table is the right construct for displaying tabular data and I think that applies here. Also, here are a couple other suggestions:

1. Don't use mysql_real_escape_string() to esacpe values that are supposed to be numbers - use an appropriate function to force the value to a number or typecast as a number. In this case you want to convert $name to an inteeger - so you can use intval().

2. No need to use "(strlen($name)-5" as the third parameter in your substring call

$id = substr($name, 5, (strlen($name)-5));

If you leave the third parameter empty it will get the entire string starting from the start index.

Taking into consideration #1 and #2 you could just have

$id = intval(substr($name, 5);

and then not use mysql_real_escape_string()

3. Don't run queries in loops it is terribly inefficient. So, get all the values you want to use for your queries and run ONE query

4. Put all of your "cart" items into a sub array using just the ID as the index, e.g. $_SESSION[cart][3], $_SESSION[cart][8], etc. Rather than concatenating 'cart' and the id as the key - will make things MUCH simpler. (The code below assumes this has been done)

5. No need to iterate over the values to exclude the ones with a 0 value. Just use array_filter()

There were other things as well, but I have other things to do. Give this a try

function cart($recPerRow=4)
{
   //Force the values to be integers
   $valuesAry = array_map('intval', $_SESSION['cart'])
   //Remove zero (false) values
   $valuesAry = array_filter($valuesAry);

   if(count($valuesAry) > 0)
   {
       $valuesStr = implode(', ', array_map('intval', $values));
       $query = "SELECT id, name, price FROM products WHERE id IN ($valuesStr) ORDER BY id, name";
       $get = mysql_query($query);
       $count = 0;
       while ($row = mysql_fetch_assoc($get))
       {
           $count++;
           //Open new row if needed
           if($count % $recPerRow==1) { echo "<tr>\n"; }

           $quantity = $valuesAry[$row['id']];
           $price = number_format ($row['price'], 2);
           $sub = number_format($row['price'] * $quantity, 2);
           echo "<td>";
           echo "{$row['name']} x {$quantity} * &euro;{$price} = &euro;{$sub}";
           echo "<a href='cart.php?remove={$row['id']}'><img src='subtract.png' border='0' style='height: 20px; width: 35px' ></a>";
           echo "<a href='cart.php?add={$row['id']}'><img src='pluss.png' border='0' style='height: 20px; width: 35px' ></a>";
           echo "<a href='cart.php?delete='{$row['id']}'><img src='delete.png' border='0' style='height: 20px; width: 50px' ></a>";
           echo"</td>\n";

           //Close new row if needed
           if ($countxx % 4 == 0) echo "<div style='clear:both'></div>";
           }
           if($count%$recPerRow==0) { echo "</tr>\n"; }
       }
       @$total += $sub;
   }
}

Edited October 18, 2012 by Psycho

Barand · October 18, 2012

Psycho,

I cannot agree with your assertion here that placing several values separated by newlines in a single cell then placing 4 similar cells in each row is "tabular data".

hahaitwork · October 19, 2012

A lot of developers try to avoid tables because they were over used as a formatting control for so many years. But, a table is the right construct for displaying tabular data and I think that applies here. Also, here are a couple other suggestions:

1. Don't use mysql_real_escape_string() to esacpe values that are supposed to be numbers - use an appropriate function to force the value to a number or typecast as a number. In this case you want to convert $name to an inteeger - so you can use intval().

2. No need to use "(strlen($name)-5" as the third parameter in your substring call
$id = substr($name, 5, (strlen($name)-5));
If you leave the third parameter empty it will get the entire string starting from the start index.

Taking into consideration #1 and #2 you could just have
$id = intval(substr($name, 5);
and then not use mysql_real_escape_string()

3. Don't run queries in loops it is terribly inefficient. So, get all the values you want to use for your queries and run ONE query

4. Put all of your "cart" items into a sub array using just the ID as the index, e.g. $_SESSION[cart][3], $_SESSION[cart][8], etc. Rather than concatenating 'cart' and the id as the key - will make things MUCH simpler. (The code below assumes this has been done)

5. No need to iterate over the values to exclude the ones with a 0 value. Just use array_filter()

There were other things as well, but I have other things to do. Give this a try
function cart($recPerRow=4)
{
//Force the values to be integers
$valuesAry = array_map('intval', $_SESSION['cart'])
//Remove zero (false) values
$valuesAry = array_filter($valuesAry);

if(count($valuesAry) > 0)
{
$valuesStr = implode(', ', array_map('intval', $values));
$query = "SELECT id, name, price FROM products WHERE id IN ($valuesStr) ORDER BY id, name";
$get = mysql_query($query);
$count = 0;
while ($row = mysql_fetch_assoc($get))
{
$count++;
//Open new row if needed
if($count % $recPerRow==1) { echo "<tr>\n"; }

$quantity = $valuesAry[$row['id']];
$price = number_format ($row['price'], 2);
$sub = number_format($row['price'] * $quantity, 2);
echo "<td>";
echo "{$row['name']} x {$quantity} * &euro;{$price} = &euro;{$sub}";
echo "<a href='cart.php?remove={$row['id']}'><img src='subtract.png' border='0' style='height: 20px; width: 35px' ></a>";
echo "<a href='cart.php?add={$row['id']}'><img src='pluss.png' border='0' style='height: 20px; width: 35px' ></a>";
echo "<a href='cart.php?delete='{$row['id']}'><img src='delete.png' border='0' style='height: 20px; width: 50px' ></a>";
echo"</td>\n";

//Close new row if needed
if ($countxx % 4 == 0) echo "<div style='clear:both'></div>";
}
if($count%$recPerRow==0) { echo "</tr>\n"; }
}
@$total += $sub;
}
}

Parse error: syntax error, unexpected '$valuesAry' (T_VARIABLE) in C:\xampp\htdocs\xampp\cart.php on line 94

This is the error I get when I try that code.

You have the opening <p style=...> but no closing </p> tag

Fixed it but still the same problem

hahaitwork · October 19, 2012

not working what so ever, not even if I choose to have 3 or 2 each row.

24%, 10 % etc .. not working

20 px, 200px, 150px .. not working

hmm

Might have been a missunderstanding here, it works but it won't stack horizontical, it's still going vertical 1 by 1.

Barand · October 19, 2012

did you put in the closing </p> tag as I suggested?

hahaitwork · October 19, 2012

did you put in the closing </p> tag as I suggested?

yes, like this:

"<p style='width:200px; text-align:center; float:left;'.</p >"

But I also tried it at the very end of the code, just to check it out before I responded.

none of them made a impact that I noticed

NB! I solved the problem where two of the buttons did not work.. the space box that

'<div style="position:absolute; TOP:30px; LEFT:20px; WIDTH:200px; HEIGHT:100px" border="0">'.
'"Your cart is empty."'.

'</div>';

}

Had was covering two buttons which I didn't knew as the background was white, but it's fixed

Edited October 19, 2012 by hahaitwork

Barand · October 19, 2012

The </p> should go at the end of the paragraph ::)

hahaitwork · October 19, 2012

The </p> should go at the end of the paragraph

Heffff, it's early in the morning

Well, now it should be fixed? but they still stack 1 by 1.

function cart() {

foreach($_SESSION as $name => $value) {

if ($value>0) {

if (substr($name, 0, 5) =='cart_') {

$id = substr($name, 5, (strlen($name)-5));

$get = mysql_query('SELECT id, name, price FROM products WHERE id='.mysql_real_escape_string((int)$id));

$countxx=0;

while ($get_row = mysql_fetch_assoc($get)) {

$sub = $get_row['price']*$value;

echo

"<p style='width:15%; text-align:center; float:left;'>".

$get_row['name'].' x'.$value.' * €'.number_format ($get_row['price'],2).' = €'.number_format($sub, 2).'

<br />'.'

<a href="cart.php?remove='.$id.'"><img src="subtract.png" border="0" style="height: 20px; width: 35px" ></a>

<a href="cart.php?add='.$id.'"><img src="pluss.png" border="0" style="height: 20px; width: 35px" ></a>

<a href="cart.php?delete='.$id.'"><img src="delete.png" border="0" style="height: 20px; width: 50px" ></a></p>';

if (++$countxx % 3 == 0) echo "<div style='clear:both'></div>";

}

echo "<div style='clear:both'></div>";

}

@$total += $sub;

}

}

Edited October 19, 2012 by hahaitwork

hahaitwork · October 19, 2012

The </p> should go at the end of the paragraph

Here is the full code that I use for Cart at this moment.

- The problem is still vertical stacking on the "cart" code which is below, but it worked fine in the "products" but this got a different setup so, I'm not sure how to make it work.

function cart() {
foreach($_SESSION as $name => $value) {

if ($value>0) {

if (substr($name, 0, 5) =='cart_') {

$id = substr($name, 5, (strlen($name)-5));

$get = mysql_query('SELECT id, name, price FROM products WHERE id='.mysql_real_escape_string((int)$id));

$countxx=0;

while ($get_row = mysql_fetch_assoc($get)) {

$sub = $get_row['price']*$value;

echo

"<p style='width:15%; text-align:center; float:left;'>".

$get_row['name'].' x'.$value.' * €'.number_format ($get_row['price'],2).' = €'.number_format($sub, 2).'

<br />'.'

<a href="cart.php?remove='.$id.'"><img src="subtract.png" border="0" style="height: 20px; width: 35px" ></a>

<a href="cart.php?add='.$id.'"><img src="pluss.png" border="0" style="height: 20px; width: 35px" ></a>

<a href="cart.php?delete='.$id.'"><img src="delete.png" border="0" style="height: 20px; width: 50px" ></a></p>';

if (++$countxx % 3 == 0) echo "<div style='clear:both'></div>";

}

echo "<div style='clear:both'></div>";

}

@$total += $sub;

}

}

if (@$total==0) {

echo

'<div style="position:absolute; TOP:30px; LEFT:20px; WIDTH:200px; HEIGHT:100px" border="0">'.

'"Your cart is empty."'.

'</div>';

}

else {

echo

'<div style="position:absolute; TOP:20px; LEFT:900px; WIDTH:200px; HEIGHT:100px" border="0">'.

'<p>Total: €'.number_format ($total, 2).'</p>'.

'</div>';

?>

Barand · October 19, 2012

Where do you call the cart() function?

hahaitwork · October 19, 2012

Where do you call the cart() function?

I assume this is what u ask for:

This is in my "index" file.

<?php require 'cart.php'; ?>

<html>

<head>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<?php cart(); ?>

<br /> <br />

<center>

<div style=" WIDTH:300px; HEIGHT:80px" border="0">

<h1>Server products</h1>

</div>

</center>

<?php products(); ?>

<br /> <br />

<center>

<div style=" WIDTH:300px; HEIGHT:80px" border="0">

<h1>Other products</h1>

</div>

</center>

<?php others(); ?>

</body>

</html>

Sign In

Display 4 Items Each Row

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

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

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