so I have been trying to work with prepared statements into order to make my PHP more secure.
I need to display products from a db table and without using prepared statements, the cards align as they should.
However, with a prepared statement, somewhere, somehow, I have made the cards not align in the right grid.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Website Title</title>
<?php
include 'navbar.php';
include 'dbConnect.php';
$results=$db->query("SELECT * FROM Stock");
?>
</head>
<body>
<div >
<div >
<div >
<p > Home > viewStock.php </p>
<h1 >Shop
</h1>
</div>
</div>
</div>
<div >
<?php while($row=$results->fetch_array())
{
?>
<form name="orderForm" method="post" action="viewProduct.php">
<div >
<div style="width: 18rem;">
<div >
<h5 >Stock No: <?php echo $row['stockID'] ?></h5>
<input type="hidden" name="stockID" value="<?php echo $row['stockID'] ?>">
<span ><img src="<?php echo $row['image'] ?>" alt="No image yet"></span>
<ul >
<li >Description: <?php echo $row['category'] ?></li>
<li >Quantity In Stock: <?php echo $row['qtyInStock'] ?></li>
<li >Price: £<?php echo $row['price'] ?></li>
</ul>
<p align="center"><button type="submit" >VIEW</button></p>
</div>
</div>
</div>
</form>
<?php } ?>
</div>
<!-- end row -->
</body>
<!-- Footer-->
<footer >
<div >
<p >Copyright © The Music Store 2021</p>
</div>
</footer>
</html>
CodePudding user response：
I see a few problems, and I have a few suggestions.
- You don't really need separate containers for everything. I usually only have one on a page unless I need them to behave differently.
- The container with the form lacks a row. Every column should be inside a row.
- You have a form between the row and each column. Forms should be part of the column content, not mixed in with the layout grid.
- You probably don't want to be setting a fixed width on your cards, since each is in a column of its own. If you were just using a set of cards which flowed independently you could do that.
If we fix those issues things seem to work well. Here's your code with my changes.
<div >
<div >
<?php while($row=$results->fetch_array()) { ?>
<div >
<form name="orderForm" method="post" action="viewProduct.php">
<div >
<div >
<h5 >Stock No:
<?php echo $row['stockID'] ?>
</h5>
<input type="hidden" name="stockID" value="<?php echo $row['stockID'] ?>">
<span >
<img src="<?php echo $row['image'] ?>" alt="No image yet">
</span>
<ul >
<li >Description:
<?php echo $row['category'] ?>
</li>
<li >Quantity In Stock:
<?php echo $row['qtyInStock'] ?>
</li>
<li >Price: £
<?php echo $row['price'] ?>
</li>
</ul>
<p align="center"><button type="submit" >VIEW</button></p>
</div>
</div>
</form>
</div>
<?php } ?>
</div>
</div>
Here's a mockup of the output. I've repeated the columns in your HTML for demonstration.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div >
<div >
<div >
<form name="orderForm" method="post" action="viewProduct.php">
<div >
<div >
<h5 >Stock No:
<?php echo $row['stockID'] ?>
</h5>
<input type="hidden" name="stockID" value="<?php echo $row['stockID'] ?>">
<span ><img src="<?php echo $row['image'] ?>" alt="No image yet"></span>
<ul >
<li >Description:
<?php echo $row['category'] ?>
</li>
<li >Quantity In Stock:
<?php echo $row['qtyInStock'] ?>
</li>
<li >Price: £
<?php echo $row['price'] ?>
</li>
</ul>
<p align="center"><button type="submit" >VIEW</button></p>
</div>
</div>
</form>
</div>
<div >
<form name="orderForm" method="post" action="viewProduct.php">
<div >
<div >
<h5 >Stock No:
<?php echo $row['stockID'] ?>
</h5>
<input type="hidden" name="stockID" value="<?php echo $row['stockID'] ?>">
<span ><img src="<?php echo $row['image'] ?>" alt="No image yet"></span>
<ul >
<li >Description:
<?php echo $row['category'] ?>
</li>
<li >Quantity In Stock:
<?php echo $row['qtyInStock'] ?>
</li>
<li >Price: £
<?php echo $row['price'] ?>
</li>
</ul>
<p align="center"><button type="submit" >VIEW</button></p>
</div>
</div>
</form>
</div>
<div >
<form name="orderForm" method="post" action="viewProduct.php">
<div >
<div >
<h5 >Stock No:
<?php echo $row['stockID'] ?>
</h5>
<input type="hidden" name="stockID" value="<?php echo $row['stockID'] ?>">
<span ><img src="<?php echo $row['image'] ?>" alt="No image yet"></span>
<ul >
<li >Description:
<?php echo $row['category'] ?>
</li>
<li >Quantity In Stock:
<?php echo $row['qtyInStock'] ?>
</li>
<li >Price: £
<?php echo $row['price'] ?>
</li>
</ul>
<p align="center"><button type="submit" >VIEW</button></p>
</div>
</div>
</form>
</div>
</div>
</div>