How to merge PHP and HTML theme code? [closed] - php

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
For a school project I need to make a webshop. Right now the products are in a table, but I really dislike the look of it, because it looks very unprofessional. This is the code:
while($product = mysql_fetch_assoc($query)) {
echo "<form action=\"add_product.php\" method=\"post\">\n";
echo "<input type=\"hidden\" name=\"productnumber\" value=\"".$product['product_id']."\" />\n";
echo "<p> <b>".$product['name'] . "</b> <br />\n";
echo "<table>";
echo "<tr>";
echo "<td>";
echo "<td>" . $product['image'] . "</td>";
echo "<td>" . $product['description'] . "</td>";
echo "</tr>";
echo "</table>";
?>
<?php
echo "Price: €".$product['price']."<br />\n";
echo "Quantity: <input type=\"text\" name=\"Quantity\" size=\"2\" maxlength=\"2\" value=\"1\" />\n";
echo "<input type=\"submit\" value=\"Add To Cart\" /></p>\n";
echo "</form>\n";
}
}
?>
Now, from the template I'm using (Modus by Luis Zono) I want to make the products show up like this page: http://luiszuno.com/themes/modus/portfolio.html with this HTML code:
<div class="featured portfolio-list">
// This is one figure, but it can be copy-pasted to infinity:
<figure>
<img src="img/dummies/gallery-1.jpg" alt="Alt text" />
<div>
Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
</div>
<a class="link" href="project.html"></a>
</figure>
<div class="clearfix"></div>
</div>
My coding skills aren't very good, so how can I write code that makes the products in the loop look like the portfolio-figures? (so that the dummy image will be the $product['image'] and such). I'm totally stuck right now.

Answer 1

I'm not going to give the answer (SO is not that kind of site), but the road how to get there.The example below is IMO the best solution here, but for your situation:
In php you can do this:
while($product = mysql_fetch_assoc($query)) {
?>
<!-- Your code here -->
<img src="example-html-image.jpg" />
<!-- Your code here -->
<?php
} // end of while
So, instead of the current echo of html you got now, you add the html you want.
You probaly want to use the fetched variables in your code, below I'll provide two examples:
while($product = mysql_fetch_assoc($query)) {
?>
<!-- You can do this -->
<img src="image<?php echo $product['id']; ?>.jpg" />
<!-- Or the short version of echo -->
<img src="image<?=$product['id'] ?>.jpg" />
<?php
}
If you want to kick it up a notch, you should not use html in your code at all. The same way you dont use JS in-page, you dont use html in php. You use a template (this is the most proper method IMO):
<!-- example.html: -->
<div> Hi, Im product <!-- NAME --> </div>
Very simple, and I use a comment to get replaced further along the line.
Then you take php, open the file, and replace the comment:
$template = file_get_contents($_SERVER['DOCUMENT_ROOT'].'loc/to/file/example.html');
$template = str_replace("<!-- NAME -->", $product['name'], $template);
echo $template;

Answer 2

Assumed $product['image'] = "my_picture.jpg"
Then use this:
<img src="/path/to/images/<?php echo $product['image']; ?>" />
The result in html source will be:
<img src="/path/to/images/my_picture.jpg" />