FrançaisGet started

Templates

A template: HTML and placeholders; displaying a variable, looping, testing, including a fragment, inheriting a layout, and the automatic escaping of values.

  • 25 cards
  • 5 topics
  • Free
Study this deck

The outline, topic by topic

Each topic is weighted the way the exam weighs it.

  1. Concepts
  2. Questions
  3. Sort and link
  4. Scenarios
  5. Understand

A few cards from the deck

  • Template: what is it?

    Show the answer

    An HTML file holding placeholders and simple instructions, which an engine fills with data to produce a page.

    The HTML is written once, the data changes on every request. <h1>{{ titre }}</h1> gives <h1>Hello</h1> when titre is Hello.

  • The articles are Pen (stock 3), Notebook (stock 0) and Ruler (stock 5). What HTML does this template produce?

    ```html
    <ul>
    {% for a in articles %}
    {% if a.stock > 0 %}
    <li>{{ a.nom }}</li>
    {% endif %}
    {% endfor %}
    </ul>
    `

    • Two li elements, Pen and Ruler
    • Three li elements, the if test only hiding the Notebook on screen
    • Three li elements, the Notebook's one left empty
    • A single li element, Pen, because if interrupts the whole loop
    Show the answer

    Two li elements, Pen and Ruler

    The loop goes over all three articles, and the if decides on every turn whether to write the line. The Notebook does not appear at all in the HTML sent, it is not merely hidden.

  • A template engine fills the … of an HTML document with the data passed to it by the ….

    Show the answer

    A template engine fills the placeholders of an HTML document with the data passed to it by the controller.

    The engine does not fetch the data itself: it receives a dictionary of variables, for example articles and titre, and renders it as HTML.

  • Template inheritance: what is it?

    Show the answer

    The mechanism by which a template takes over another's layout and only replaces some of its zones.

    The header, menu and footer live in a single base template, {% extends "base.html" %} is enough for the pages. Changing the menu is done in one place.

  • The footer, with the legal notice link, is copied into forty templates. Changing that link takes forty edits. What should be done?

    • Build it as HTML in the controller and pass it as a variable to each page
    • Keep the copies and edit them with a global text replacement at each change
    • Load it in the browser with JavaScript from a separate file
    • Put it in a base template that the pages inherit
    Show the answer

    Put it in a base template that the pages inherit

    A shared layout is handled by inheritance: the footer lives once in the base. HTML built in the controller mixes presentation and logic, and would require turning off escaping to display it.

Study this deck