Template Engines 🎨

Separate logic from presentation with Twig, use template inheritance for DRY layouts, and build reusable components with filters and blocks.

What You'll Learn in This Lesson

• Why mixing PHP and HTML creates unmaintainable code
• Use Twig syntax: output, logic, loops, and filters
• Build DRY layouts with template inheritance and blocks
• Auto-escape output to prevent XSS attacks
• Create reusable partials with include and macros

Note: PHP runs on a server. Our examples simulate PHP logic using JavaScript. To run real PHP, install PHP.

🎯 Real-World Analogy: Template engines are like form letters. You write the letter once with blanks: "Dear [NAME], your order #[ORDER_ID] has shipped." The template engine fills in the blanks for each customer. Template inheritance is like having a company letterhead — every department's letters look the same, but the body content changes.

Twig Basics & Filters

Twig separates your HTML from PHP logic with a clean syntax: {{ variable }} for output, {% if %} for logic, and {{ name|upper }} for filters. Unlike raw PHP, Twig auto-escapes all output — preventing XSS attacks without manually calling htmlspecialchars() everywhere.

Try It: Twig Template Engine

Try it Yourself »

JavaScript

// Twig Template Engine: Separating Logic from Presentation
console.log("=== Why Template Engines? ===");
console.log();
console.log("  ❌ Mixing PHP + HTML (spaghetti code):");
console.log('     <?php foreach ($users as $user): ?>');
console.log('       <div class="<?= $user["active"] ? "green" : "red" ?>">');
console.log('         <?= htmlspecialchars($user["name"]) ?>');
console.log("       </div>");
console.log("     <?php endforeach; ?>");
console.log();
console.log("  ✅ Twig (clean separati
...

Template Inheritance & Layouts

Instead of including header and footer in every page, define a base layout with replaceable blocks. Child templates extend the base and override only the blocks they need. This ensures every page has consistent navigation, styling, and structure while keeping individual pages focused on their unique content.

Try It: Layout Inheritance

Define a base layout with blocks and render multiple pages

Try it Yourself »

JavaScript

// Template Inheritance & Layouts
console.log("=== Template Inheritance: DRY Layouts ===");
console.log();
console.log("  The Problem: Every page repeats <html>, <head>, <nav>, <footer>");
console.log("  The Solution: One base layout, child templates override blocks");
console.log();

class LayoutEngine {
  constructor() { this.layouts = {}; }

  defineLayout(name, blocks) {
    this.layouts[name] = blocks;
    console.log("  📐 Layout defined: " + name);
    console.log("     Blocks: " + Object
...

⚠️ Common Mistakes

⚠️

Putting business logic in templates — Templates should only display data. Calculate totals, filter lists, and query databases in your PHP controllers, not in Twig.

⚠️

Using {{ variable|raw }} carelessly — The raw filter disables auto-escaping. Only use it for trusted HTML content you generated yourself, never for user input.

💡

Pro Tip: Enable Twig caching in production: new Environment($loader, ['cache' => '/tmp/twig_cache']) — it compiles templates to PHP classes for near-zero overhead.

📋 Quick Reference — Template Engines

Syntax	Purpose
{{ var }}	Output variable (auto-escaped)
{% if %}	Control flow (if, for, block)
{# comment #}	Template comment (not rendered)
extends	Inherit from parent template
include	Insert another template (partial)

🎉 Lesson Complete!

You can now build clean, maintainable PHP views with Twig! Next, learn to monitor APIs, log usage, and build audit trails.