How I separate logic from presentation?

Question

Normally I am developing website and coding PHP and HTML something like this -

while (mysqli_stmt_fetch($stmt)) {      
    // Create Table Body
    $html .= "<tr>\n";
    $html .= "  <td>$title</td>\n";
    $html .= "  <td>$date</td>";                            
    $html .= "  <td align='center'>\n";
    $html .= "      <a href='#'>\n";
    $html .= "          <span class='view' title='View This Comment'></span>\n";
    $html .= "      </a>\n";
    $html .= "  </td>\n";                           
    $html .= "  <td class='td_catchall' align='center'>\n";
    $html .= "      <a href='#'>\n";
    $html .= "          <span class='edit' title='Edit This Comment'></span>\n";
    $html .= "      </a>\n";
    $html .= "  </td>\n";                       
    $html .= "  <td align='center'>\n";
    $html .= "      <a href='#'>\n";
    $html .= "          <span class='delete' title='Delete This Comment'></span>\n";
    $html .= "      </a>\n";
    $html .= "  </td>\n";
    $html .= "</tr>\n"; 
}

//Create View Blog Dialog Box 
$viewBlog  = "<div id='dialog-view'>\n";
$viewBlog .= "      <h2>$title</h2>\n";
$viewBlog .= "  <p>$date</p>\n";
$viewBlog .= "  <p>";
$viewBlog .= "          <img src='".UPLOAD_DIR.$userName."/".$image."' />";
$viewBlog .= "      $comment</p>";
$viewBlog .= "</div>\n";

But recently I came across to know one of my friend, that is a bad practice of saving the HTML in a PHP variable. And also said I need to separate logic from presentation.

If it is true, can anybody tell me how can I do it?

Any comments would be greatly appreciated. Thank you.

Answer 1

I strongly recommend a templating library like Twig or Mustache. However, the basics would be to use external PHP files as HTML, and use require. Here is a bit of a hacky example:

<?php
$comments = array();

while (mysqli_stmt_fetch($stmt)) {     
  $comments[] = $stmt;
}

require 'comments.php';

Then in comments.php:

<?php foreach ($comments as $comment) : ?>
<tr>
  <td><?php echo $comment['title'] ?></td>
  <td><?php echo $comment['date'] ?></td>                          
  <td align='center'>
      <a href='#'>
          <span class='view' title='View This Comment'></span>
      </a>
  </td>                           
  <td class='td_catchall' align='center'>
      <a href='#'>
          <span class='edit' title='Edit This Comment'></span>
      </a>
  </td>                       
  <td align='center'>
      <a href='#'>
          <span class='delete' title='Delete This Comment'></span>
      </a>
  </td>
</tr> 
<?php endforeach ?>

Here, I am adding each comment (or whatever it may be) to an array. Then, I include a file called comments.php. Your main file should be mostly PHP and should handle any logic, while comments.php should be mostly HTML and only use PHP for presentation (aka looping through an array and echoing out variables).

Your required file has access to all the variables it would have access to if it were inline.

Answer 2

How I separate logic from presentation?

Separate it.

Though it is called business logic from presentation logic separation. You have logic in both layers. The name says it all:

• perform your "logic" first
• then turn to "presentation."

Taking your example it have to be something like this

$res  = $stmt->get_result();
$data = array();
while ($row = mysqli_fetch_assoc($res)) {      
    $data[] = $row;
}

though I would use some more intelligent approach to get data from database, something like this:

$data = $db->getArr("SELECT ...");

then repeat all the steps for all the database or other other services interaction. Your goal is to have all the data ready that business logic have to supply. Then your business logic ended and you can turn to presentation.

You can tell a good separation from the bad one if you can easily interchange template engines (you can't do it with approach from other answer, mind you) - so, particular engine doesn't matter. Let's take a simplest one - PHP

Create a file called tpl.php and put this code there

<table>
<?php foreach ($data as $row): extract($row); ?>
  <tr>
    <td><?=$title</td>
    and so on
  </tr>
<?php endforeach ?>

then include this file in your business logic file. Or - better - in some higher level template.

You can see a good real life example of the approach in this topic

Using such a separation, you can:

1. Use power of good editor that can do syntax highlighting and hinting (though I doubt you are using one).
2. outsource your design to a professional designer.
3. easily change presentation technology from HTML to AJAX.
4. use the same engine for the different sites with different appearances.
5. Implement any number of "themes" or "skins".
6. Stay alive when adding some rich decorations from either HTML, CSS or JS.

While all this is just impossible with your current approach or approach from other answer. The idea is separation of matters.