Keeping presentation (HTML) and logic (PHP) separate - php

Question

I am trying to keep presentation and logic separate without using a template engine like Smarty. What I have so far is working, but I am not sure how to do certain things without putting more PHP into my presentation than I would like to. For example, right now I have something like this:
product_list.php
try {
$query = $conn->prepare("SELECT p.id, p.name, p.description, IFNULL(url, title) AS url, GROUP_CONCAT(c.category SEPARATOR ', ') AS category,
FROM products p
LEFT JOIN product_categories pc ON p.id = pc.product_id
LEFT JOIN categories c ON pc.category_id = c.id
WHERE p.active = 1
GROUP BY p.id");
$query->execute();
$result = $query->fetchAll(PDO::FETCH_ASSOC);
}
catch (PDOException $e) {
echo $e->getMessage();
}
include('templates/product_list_tpl.php');
product_list_tpl.php
<div class="card">
<div class="product-list with-header">
<div class="product-list-header center-align">
<h2><?= $header_title; ?></h2>
</div>
<?php foreach ($result as $row): ?>
<!-- Some Product Info -->
Category: <?= $row['category']; ?>
<?php endforeach; ?>
</div>
</div>
In the above example some products will have one category, some will have multiple. They display nicely in a comma separated list, but I would like to make the category names into links. I know I can do something like below, but it seems messy to me.
<div class="card">
<div class="product-list with-header">
<div class="product-list-header center-align">
<h2><?= $div_title; ?></h2>
</div>
<?php foreach ($result as $row): ?>
<?php $categories = explode(', ', $row['category']); ?>
<div class="product-list-item avatar">
<img src="img/product/<?= $row['id']; ?>.jpg" alt="<?= $row['title']; ?>" class="square">
<?= $row['title']; ?>
<p class="caption"><?= $row['caption']; ?></p>
<div class="item-bottom">
<span class="responsive"><?= $row['description']; ?></span>
<p>
Category:
<?php foreach ($categories as $key => $category): ?>
<?= $category; ?>
<?= (sizeof($categories) > 1 && $key == end($categories)) ? ', ' : ''; ?>
<?php endforeach; ?>
</p>
<p>
<span>Rating: <?= $row['rating']; ?></span>
<span class="right">Rated <?= $row['rated']; echo ($row['rated'] == 1) ? ' time' : ' times'; ?></span>
</p>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
Thank you in advance for any suggestions. Also, if anyone has any input on the general separation format I used on the example code I would love to hear it. I am just getting back into coding after an 8 year break.
EDIT: Added missing endforeach and improved indentation on third code block as per #Devon suggested in comments.
EDIT: I updated the third code block to include HTML I previously left out and added all PHP functionality needed to achieve the output I am looking for. It works, but IMO doing it this way removes the little separation I had. I now basically just have one file with my database call and another file with this mess. I feel like I am not going in the right direction for proper business logic / presentation logic separation.
Where am I going wrong?

Answer 1

Lengthy, complicated logic such as:
(sizeof($categories) > 1 && $key == end($categories)) ? ', ' : '';
shouldn't be in the view to bother a front-end developer. "What is this hideous line of code?
What does it do? Why didn't the back-end developer give me something easier to work with?" Part of the power of MVC is not only in separation of concerns, but
also keeping back-end and front-end developers' work separate.
Code like <?php foreach ($result as $row): ?> contains no indication as to what it's working with. The DIVs, Ps, and SPANs are out of control as well.
This is why I'm a fan of view helpers.
I'd suggest:
product_list_tpl.php
<div class="card">
<div class="product-list with-header">
<div class="product-list-header center-align">
<h2><?= $div_title; ?></h2>
</div>
<?= displayItems($items); ?>
</div>
</div>
The view helper used above:
function displayItems($items)
{
foreach ($items as $item)
{
$categories = explode(', ', $item['category']);
$id = $item['id'];
$title = $item['title'];
$url = $item['url'];
$caption = $item['caption'];
$description = $item['description'];
$rating = $item['rating'];
$rated = $item['rated'];
include('product_list_item_tpl.php');
}
}
product_list_item_tpl.php
<div class="product-list-item avatar">
<img src="img/product/<?= $id; ?>.jpg" alt="<?= $title; ?>" class="square">
<?= $title; ?>
<p class="caption"><?= $caption; ?></p>
<div class="item-bottom">
<span class="responsive"><?= $description; ?></span>
<p>
Category:
<?php displayCategories($categories); ?>
</p>
<p>
<span>Rating: <?= $rating; ?></span>
<span class="right">Rated <?= $rated; ?> <?= isPluarl($rated)?'times':'time'; ?></span>
</p>
</div>
</div>
The view helpers used above:
function isPlural($number)
{
return $number != 1;
}
function displayCategories($categories)
{
$last = end($categories);
$count = sizeof($categories);
foreach ($categories as $key => $category)
{
$cat = strtolower($category);
$isLast = $category == $last;
include('product_list_category_tpl.php');
}
}
product_list_category_tpl.php
<?= $category; ?>
<?= ($count > 1 && !$isLast) ? ', ' : ''; ?>
Note I inverted the $key == end($categories) part from what you were using before with !$isLast and swapped $key to $category. This logic still feels dirty as two categories could have the same name. Probably better to just use count($categories) in conjunction with $i++ to decide if it's the last loop.
Edit:
This works nicely and avoids the prior mentioned issue as it relies on the key rather than the value:
function displayCategories($categories)
{
end($categories);
$last = key($categories);
$count = sizeof($categories);
foreach ($categories as $key => $category)
{
$cat = strtolower($category);
$isLast = $key == $last;
include('product_list_category_tpl.php');
}
}