PHP templating

Templating is the work of integrating a ready-made, static layout into a website.
While working on a site written in PHP, we develop the logic that drives the presentation.
Logic is PHP scripts where variables, functions are declared, arrays and loops are used, information is received and processed.
View is the look and feel of the site. This includes its pages, which contain common design elements (header, menu, footer) and content (pages, articles, and the like).

Having on hand a ready-made layout, you need to correctly implement it into a working site so that in certain places on the pages the information is displayed dynamically, under the control of PHP scripts.

What is a "template" and what does the fish have to do with it?

A template is a ready-made layout of a page or block, which consists only of the design and does not contain any content (useful information).
A template at its core is a regular PHP script that is 90% HTML and only 10% PHP constructs. The main task of a programmer in the process of working on a site is to turn static HTML pages into dynamic PHP templates that will be used to display the resulting pages.

But if the static page layout does not contain dynamic content, then what will be in its place before the implementation of these pages begins? When a designer or layout designer wants to show how a page will look on the site, then instead of real content, the so-called "fish" is used.
Fish is a placeholder. Nonsensical text that is used in the layout to show how a page filled with content will look like.

Problems of a typical layout process

When a layout designer works on several pages, he has to copy most of the HTML code between pages, since these pages contain a lot of repetitive elements: connecting styles, site header with logos, site footer, various menus, and the like.
As a result, when it comes to edits, if you need to change something in the same header, this change will need to be made in all HTML files so that they look the same. Of course, no one will like such monkey work.

Common fragments of site pages

Looking at the pages of almost any site, you can see their similarities with each other. After all, all pages are made up of common parts that do not change, as well as areas with unique content. And how convenient it would be to edit common blocks, like the site header, separately, and then attach them to all pages. Then, when changing the logo, you will need to make a change only in one place, and all the pages of the site will be updated automatically.
Templating is the division of the entire layout into independent templates and their further connection and nesting into each other.

Collecting a page from parts

If we divide the entire layout of the site into separate, small templates, we will get several advantages at once. It will become easier to keep the interface consistent. By separating the site presentation into templates, we will also significantly simplify the PHP scripts, because only the PHP code will remain in them. You can even entrust the layout designer to edit the templates directly, since there is almost no program code in them, and the one that is is very simple.

Templating terms

When talking about templating, it is very important to adhere to certain terms so that there is always an understanding of what is being discussed. We agree to use the following terminology:

Layout  is a template that contains HTML-code that is common for all pages of the site. It can contain the connection of styles, meta tags, header, footer. The layout also contains an area for inserting unique content for each page.

A page template  is a template with HTML code that is unique to one page. For example, for the home page, there might be a news list. Also, the page template can include blocks .

A block  is a template for a very small block of a page. For example, it can be one item in a news list. The convenience of blocks is that one block can include different pages.

Template content

What's inside the template? As you already know, the template consists almost entirely of HTML code. But besides the HTML tags, it also contains data and  simple logic .

Data in the template

The template shows dynamic information. The adjective "dynamic" means that this data can change and be displayed depending on different conditions. The information itself is usually stored in the database, and the PHP script retrieves it from there and passes it to the template.
Regardless of the source of information, there is a rule that must never be violated: any template (layout, page template, block) should only have access to the data that was explicitly passed to it.
This data isolation is provided by a special template function, which will be discussed below.

Template logic

The template should contain only simple logic. In other words, templates do not contain "heavy" PHP-code, but only simple constructs.
So, in the template, you can show variables, use conditions, loops, traverse arrays, call functions and include files. Anything else is prohibited. The rest of the business logic remains in PHP scripts that call templates and pass information to them.

Template function

A templating engine is a function that connects a template file, passes data to it, and returns the generated HTML.
The template engine is the glue that holds the individual templates together in the final page. It works as follows: the page's PHP script performs all the actions to prepare the necessary information, for example, requests records from the database. These records are sent in the form of an array to the template engine along with the name of the page template.
The template engine connects the specified template file and passes all the information there. But, instead of displaying the contents of this template, it grabs the resulting HTML and returns it.
Then the script calls the box again, but now with its help it connects the general layout, where the general information is sent, as well as the page content obtained from the previous step. The entire result of the work is displayed on the screen.

Usage example

Let's see how it all works with an example. Let's start by defining three templates: layout, page template and some kind of block.
Let me remind you that we put the general HTML code into the layout.
[layout.php]

html>
  <html lang="en">
  <head>
    <title></title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header class="main-header">
      <h1 class="visually-hidden">PHP Class Room</h1>
    </header>
    <div class="main-content">
      <main class="content"></main>
    </div>
    <footer class="main-footer">Welcome to phpclassroom</footer>
  </body>
</html>

Now it's the turn for the page template:
[main.php]

<div class="content__main-col">
  <h2 class="visually-hidden">Phpclassroom</h2>
  <a class="button" href="/gif/add">Welcome to education world</a>

  <ul class="items-list">
    
      
    
  </ul>
</div>

Pay attention here that the page template, in addition to interacting with the array, calls the template function for each of its elements. The templating engine takes content from the block template and displays it inside the list.

And here is the block template for displaying one
post : [inc / item.php]

<li class="list-item">
  <div class="picture">
    <img src="uploads/preview_"></span>
  </div>
</li>

This is what the three templates looked like. All of them will take part in the formation of the final page. Our script index.php will collect these templates and display the page:

<?php
// define null array
$items_list = [];

// sending data to main.php template
$page_content = renderTemplate('main.php', ['items' => $items_list]);

// Rendering ather page
$layout_content = renderTemplate('layout.php',
['content' => $page_content, 'title' => 'PHP class room']);

// Display page with multiple template
print($layout_content);