Home > OS >  How to efficiently have 1 html layout page for many products that'll call mysql database for pr
How to efficiently have 1 html layout page for many products that'll call mysql database for pr

Time:09-23

Ok so eventually I will have let's say 100 products in mysql database. The product page pulls all info from database (such as partnumber, material, color, etc...) and inputs it into the areas of the page that I designate it, all this using php. The previous page will show all 100 products and when user click's on one product it'll go to that product page. Just like all websites right...

I don't believe I need to make 100 individual html pages for each product right? Can I make just 1 main html page that is the templet for the 100 different products? Basically when user clicks the image tag of the product(1st example of code) it'll open the main html templet but somehow call to the database on open and load that specific info? Then other products will have the same process but for they're specific data from database. The 1st sample code is one product on the page that'll display all 100 products with the href containing the image that'll get clicked to show user actual product page retrieved dynamically without page reload, into a predestined section. I'm sure there is a name for what I'm looking to do but all the research I've done I haven't found what I'm looking for. Is there a better way then what I'm explaining? Also I hope this makes sense, Thank you for any input.

<td><a href="pageContent.php"><img class="td-Image" src="image.jpg"></a>
 </td>
 <td class="td-manufacturer">
   <h6>MANUFACTURER</h6>
   <p>Lowes</p>
 </td>
 <td class="td-addComponent">
   <p>$104.99</p>
   <a href="#"><button class="add-button">ADD</button></a>
 </td>
 <td class="td-material">
   <h6>MATERIAL</h6>
   <p>Aluminum 7075-t6 Forged</p>
 </td> 
 <td class="td-platform">
   <h6>PLATFORM</h6>
   <p>Large</p>
 </td>
 <td class="td-america">
   <h6>AMERICAN MADE</h6>
   <p>YES</p>
 </td>

Actual product page where php gets info from database example

<?php
$sql = "SELECT * FROM Parts;";
$result = mysqli_query($conn, $sql);
$resultCheck = mysqli_num_rows($result);

if($resultCheck > 0) {
while ($row = mysqli_fetch_assoc($result)) {

?>

<div class="description">
  <h3>Descrption</h3>
  <p>
    <?php 
     echo $row['Description'];
    ?>
  </p>
</div>

<?php
}
}
?>

Editor Note: I edited the question to reflect what he want based on thread on my answer below.

CodePudding user response:

In this scenario you would need to pass in a unique identifier i.e product-id and create a query to fetch from the database product info by product-id

$product-id= $_GET['id'];
$strSQL = "SELECT * FROM AR15Parts WHERE id='$product-id'";
$rs = mysql_query($strSQL);
if (!$rs) {
    echo 'Could not run query: ' . mysql_error(); 
    exit;
}

$row = mysql_fetch_assoc($rs);

//display your data

if($row){
  echo $row['field']; 
}

CodePudding user response:

Add an unique Id to your products in your mysql database, using the Auto Increment option (A_I checkbox in phpmyadmin). Then you can pass that id into a link to the product page ```href=“individualProduct.php?id=” while rendering all the products on the all products page.

Then in individualProduct.php you can get that id and retrieve the data

$sql = SELECT * FROM Parts WHERE id =?”;
$stmt = mysqli_prepare($sql);
$stmt->bind_param($_GET[“id”]);
$stmt->execute();
$result = $stmt->get_result();
// Do stuff with $result as it is the individual product corresponding to that id

CodePudding user response:

Optimally, you'll need 2 files:

  • index/list of products
  • detail information of the selected product

index files (maybe call it index.php)

Here, you need to select products and make it a list:

$stmt = $pdo->query("SELECT * FROM Parts");
while ($row = $stmt->fetch()) {
    echo '<a href="javascript:loadDetail(\'' . $row['id'] . '\')">' . $row['name']."</a><br />\n";
}

Since you want the detail to be shown to the index/list page, let's add a container area:

<div id="container-detail">

</div>

Add a little javascript code to handle AJAX request:

<script type="text/javascript">
    function loadDetail(itemId){
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "http://website.address/path/to/detail.php?id="   itemId, true);
        
        xhr.onreadystatechange = function ()
        {
            if (xhr.readyState==4 && xhr.status==200)  
            {
                document.getElementById("container-detail").innerHTML=xhr.responseText;
            }
        }

        xhr.send();

    }
</script>

detail page (let's call it detail.php)

In this screen, we fetch details for only one part, specified by HTTP GET id parameter. The one that's being supplied from index.php (the ?id= part).

$stmt = $pdo->query("SELECT * FROM Parts WHERE id = '" . $_GET['id'] . "'");

$part = $stmt->fetch();

echo "Name: " . $part['name'] . "<br />\n";
echo "Manufacturer: " . $part['manufacturer'] . "<br />\n";
echo "Price: " . $part['price'] . "<br />\n";

That's it, you should get it working with a few adjustments based on the table and template you have.

A little note is that I used PDO mechanism to do the query. This is because mysql_* function has been deprecated for so long that it is now removed from PHP 7.0. Also, the current PHP version has been PHP 8. So, be prepared, a lot of web hosting might gonna remove older PHP versions, moving forward.

  • Related