Difference between revisions of "PHP115"
| Line 131: | Line 131: | ||
The above renders the page. It takes 2 parameters: | The above renders the page. It takes 2 parameters: | ||
* The template you wish to use (in this case "index.html" - as defined above) | * The template you wish to use (in this case "index.html" - as defined above) | ||
| − | * The data you wish to pass to the template, | + | * The data you wish to pass to the template, as an array. In this case 2 string values ("Alix" and "Bergeret") and an array called $people (defined just before the render command). |
== Database example == | == Database example == | ||
Revision as of 15:30, 17 August 2016
Main Page >> Web Application Development >> Workbook >> Template Engines
Please note that this is an advanced topic. Make sure that you have worked through all the previous sections of this workbook before proceeding.
Template engines
There are many PHP template engines out there, there are some of the most popular ones:
- Twig - probably the best current, framework-independent template engine.
- Mustache - also very popular, but very simple and so not suitable for more complex projects.
- Smarty - very old, and the website looks very dated, but the product itself is very good and still actively maintained!
- Blade - Blade comes with Laravel, a very popular PHP framework, and cannot easily be used without Laravel.
- Volt - Volt is packaged with the Phalcon PHP framework, but can be used as a standalone product.
Here is an interesting comparison of the template engines above.
In this tutorial we will look at Twig
Installing Twig
Please read the installation notes on the official website.
Simple example
First let's look at a simple example that passes variables to a template.
The template - index.html
<!DOCTYPE html>
<html>
<head>
<title>My first template</title>
</head>
<body>
<h1>My Webpage</h1>
{{ include('navigation.html') }}
<p>{{ a_variable }}</p>
<p>{{ another_variable|upper }}</p>
<ul>
{% for item in people %}
<li>{{ item.FirstName }} {{ item.Surname }}</li>
{% endfor %}
</ul>
</body>
</html>
Things to note:
- You can increase code reuse by including templates within template, in this case: include('navigation.html')
- a_variable displays a simple variable.
- another_variable|upper displays another variable, but converts it to uppercase. This is done using the "upper" extension.
- for item in people allows you to loop through an array of items.
The navigation.html template, included in the file above, is fairly simple:
<ul id="navigation"> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul>
The home file - index.php
<?php
require_once 'Twig/Autoloader.php';
Twig_Autoloader::register();
// Create loader object, pointing to templates folder
$loader = new Twig_Loader_Filesystem('templates');
// Set-up environment with cache (faster)
/*$twig = new Twig_Environment($loader, array(
'cache' => 'compilation_cache',
));*/
// set-up environment without cache (for development)
$twig = new Twig_Environment($loader);
// Array of data
$people[0]['FirstName'] = "Alix";
$people[0]['Surname'] = "Bergeret";
$people[1]['FirstName'] = "Chris";
$people[1]['Surname'] = "Dennett";
// Load and render template
echo $twig->render('index.html',
array('a_variable' => 'Alix',
'another_variable' => 'Bergeret',
'people' => $people));
?>
The result: http://mi-linux.wlv.ac.uk/~in9352/twig/
Let's look at the file above in more detail:
require_once 'Twig/Autoloader.php';
Twig_Autoloader::register();
// Create loader object, pointing to templates folder
$loader = new Twig_Loader_Filesystem('templates');
// set-up environment without cache (for development)
$twig = new Twig_Environment($loader);
The above essentially "sets up" Twig. You specify where your templates folder is, and create a new environment to work with.
Note: During development it is best NOT to use caching, as you would not see your changes when updating a templates. Only enable caching once the website is finished and deployed.
// Load and render template
echo $twig->render('index.html',
array('a_variable' => 'Alix',
'another_variable' => 'Bergeret',
'people' => $people));
The above renders the page. It takes 2 parameters:
- The template you wish to use (in this case "index.html" - as defined above)
- The data you wish to pass to the template, as an array. In this case 2 string values ("Alix" and "Bergeret") and an array called $people (defined just before the render command).
Database example
Let's revisit our pets database example, but this time we can separate logic from HTML.
The template - pets.html
The template itself is quite simple, and very similar to the "simple example" above. Note how we loop through an array of pets (the array is called "results").
<!DOCTYPE html>
<html>
<head>
<title>My pets</title>
</head>
<body>
<h1>My pets webpage</h1>
{{ include('navigation.html') }}
<p>{{ num_rows }} record(s) were returned...</p>
<table border=1>
{% for item in results %}
<tr>
<td>{{ item.name }}</td>
<td>{{ item.species }}</td>
</tr>
{% endfor %}
</table>
</body>
</html>
The main file - pets.php
<?php
// set-up environment without cache (for development)
// Connect to server/database
// Run SQL query
$res = mysqli_query($mysqli, "SELECT name, species, age FROM pet");
// How many rows were returned?
$num_rows = mysqli_num_rows($res);
// Loop through resultset and put in array
while($row = mysqli_fetch_assoc($res)) {
$results[] = $row;
}
// Load and render template
echo $twig->render('pets.html',
array('num_rows' => $num_rows, 'results' => $results));
?>
