Thursday, 08 October 2020

Setup Twig for the web project in WampServer on Windows

PHP  Twig 

Twig is a popular template engine for PHP programming. WampServer is a web development environment on Windows and it allows you to create web applications with Apache, PHP and MySQL. In this post, we will show you how to setup Twig in WampServer on Windows.

Install Composer

Go to the website of Composer, the dependency manager for PHP. Download and run the Composer's windows installer, Composer-Setup.exe. It will install the Composer 1.10.13 on your Windows. PHP 5.3.2 is the minimum requirement for Composer to run, while Twig 3.x needs at least PHP 7.2.5. Therefore, we can choose PHP 7.2.10. During the installation, it will ask you the PHP's installation path. If PHP is under the WampServer, you can select its path, for example:

C:\wamp64\bin\php\php7.2.10

By default, the Composer batch file, composer.bat, is installed in the directory as below under Windows 10:

C:\ProgramData\ComposerSetup\bin

Once the installation is complete, the above path is added to the system's path so that we can run Composer in any directory through Windows command line.

Create a new web project on WampServer

It is simple to create a new web project on WampServer. Go to the WampServer's root directory: C:\wamp64\www. Create a folder for your web project, for example: C:\wamp64\www\twig-test. Done!

Install Twig for your web project

To install Twig, we need open Command Prompt in Windows and change the current directory to the new web project folder: twig-test

cd C:\wamp64\www\twig-test

After that, install Twig via Composer:

composer require "twig/twig:^3.0"

Then, Twig 3.0.5 is installed under the folder twig-test\vendor.


Testing the Twig template

First, under the web project folder twig-test, create a subfolder themes for template files. In this folder, we create the template file index.twig as below.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Testing the Twig Template</title>
</head>
<body>
    <h1>Hello world</h1>
    <p>I love {{ fruit }} !</p>
</body>
</html>

In line 9, fruit is the variable passed to the template. The double-curly-brace {{}} is used to print out the value of the variable fruit.

Second, under the folder twig-test, create a PHP file test.php to render the template.

<?php
require_once './vendor/autoload.php';

$loader = new \Twig\Loader\FilesystemLoader('./themes');

$twig = new \Twig\Environment($loader);

echo $twig->render('index.twig', array("fruit" => "watermelon"));

?>

In line 2, Composer's PHP file autoload.php is included to map the Twig's namespaces to real folders. In line 4, \Twig\Loader\FilesystemLoader is then created to look up templates in the ./themes directory. A \Twig\Environment object is initialized with default configurations in line 6. Finally, the template file index.twig is loaded and rendered in line 8 with an array as the parameter. In the array array("fruit" => "watermelon"), the varialbe fruit and its value are defined.

To check the result, open an Internet browser and access the PHP file test.php, for example, in the address bar type http://localhost/twig-test/test.php. You will see that the template file is rendered and the variable value watermelon is passed to the template.

Twig Hello world


Search