Yan's Blog

Yan's Blog

Set Up Twig for Web Projects in WampServer on Windows

Set Up Twig for Web Projects in WampServer on Windows

Subscribe to my newsletter and never miss my upcoming articles

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 set up Twig in WampServer on Windows.

1. 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 latest Composer version 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 folder, 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.

2. Create a new web project in WampServer

It is simple to create a new web project in 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!

3. Install Twig for your web project

To install Twig, we need to open the Command Prompt in Windows and change the current directory to the new web project's 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.

4. Test 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 the above code, 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 the above code, first, Composer's PHP file autoload.php is included to map the Twig's namespaces to real folders. The loader \Twig\Loader\FilesystemLoader is then created to look up templates in the ./themes directory. The \Twig\Environment object, $twig, is initialized with default configurations. The template file index.twig is finally loaded and rendered with an array as the parameter. In the array array("fruit" => "watermelon"), the variable 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's value watermelon is passed to the template. A36-twig-hello.png

#php#web-development
 
Share this