<h1>Templates<aclass="headerlink"href="#templates"title="Link to this heading">¶</a></h1>
<p>You’ve written the authentication views for your application, but if
you’re running the server and try to go to any of the URLs, you’ll see a
<codeclass="docutils literal notranslate"><spanclass="pre">TemplateNotFound</span></code> error. That’s because the views are calling
<aclass="reference internal"href="../api.html#flask.render_template"title="flask.render_template"><codeclass="xref py py-func docutils literal notranslate"><spanclass="pre">render_template()</span></code></a>, but you haven’t written the templates yet.
The template files will be stored in the <codeclass="docutils literal notranslate"><spanclass="pre">templates</span></code> directory inside
the <codeclass="docutils literal notranslate"><spanclass="pre">flaskr</span></code> package.</p>
<p>Templates are files that contain static data as well as placeholders
for dynamic data. A template is rendered with specific data to produce a
final document. Flask uses the <aclass="reference external"href="https://jinja.palletsprojects.com/templates/">Jinja</a> template library to render
templates.</p>
<p>In your application, you will use templates to render <aclass="reference external"href="https://developer.mozilla.org/docs/Web/HTML">HTML</a> which
will display in the user’s browser. In Flask, Jinja is configured to
<em>autoescape</em> any data that is rendered in HTML templates. This means
that it’s safe to render user input; any characters they’ve entered that
could mess with the HTML, such as <codeclass="docutils literal notranslate"><spanclass="pre"><</span></code> and <codeclass="docutils literal notranslate"><spanclass="pre">></span></code> will be <em>escaped</em> with
<em>safe</em> values that look the same in the browser but don’t cause unwanted
effects.</p>
<p>Jinja looks and behaves mostly like Python. Special delimiters are used
to distinguish Jinja syntax from the static data in the template.
Anything between <codeclass="docutils literal notranslate"><spanclass="pre">{{</span></code> and <codeclass="docutils literal notranslate"><spanclass="pre">}}</span></code> is an expression that will be output
to the final document. <codeclass="docutils literal notranslate"><spanclass="pre">{%</span></code> and <codeclass="docutils literal notranslate"><spanclass="pre">%}</span></code> denotes a control flow
statement like <codeclass="docutils literal notranslate"><spanclass="pre">if</span></code> and <codeclass="docutils literal notranslate"><spanclass="pre">for</span></code>. Unlike Python, blocks are denoted
by start and end tags rather than indentation since static text within
a block could change indentation.</p>
<sectionid="the-base-layout">
<h2>The Base Layout<aclass="headerlink"href="#the-base-layout"title="Link to this heading">¶</a></h2>
<p>Each page in the application will have the same basic layout around a
different body. Instead of writing the entire HTML structure in each
template, each template will <em>extend</em> a base template and override
<divclass="code-block-caption"><spanclass="caption-text"><codeclass="docutils literal notranslate"><spanclass="pre">flaskr/templates/base.html</span></code></span><aclass="headerlink"href="#id1"title="Link to this code">¶</a></div>
<p><aclass="reference internal"href="../api.html#flask.g"title="flask.g"><codeclass="xref py py-data docutils literal notranslate"><spanclass="pre">g</span></code></a> is automatically available in templates. Based on if
<codeclass="docutils literal notranslate"><spanclass="pre">g.user</span></code> is set (from <codeclass="docutils literal notranslate"><spanclass="pre">load_logged_in_user</span></code>), either the username
and a log out link are displayed, or links to register and log in
are displayed. <aclass="reference internal"href="../api.html#flask.url_for"title="flask.url_for"><codeclass="xref py py-func docutils literal notranslate"><spanclass="pre">url_for()</span></code></a> is also automatically available, and is
used to generate URLs to views instead of writing them out manually.</p>
<p>After the page title, and before the content, the template loops over
each message returned by <aclass="reference internal"href="../api.html#flask.get_flashed_messages"title="flask.get_flashed_messages"><codeclass="xref py py-func docutils literal notranslate"><spanclass="pre">get_flashed_messages()</span></code></a>. You used
<aclass="reference internal"href="../api.html#flask.flash"title="flask.flash"><codeclass="xref py py-func docutils literal notranslate"><spanclass="pre">flash()</span></code></a> in the views to show error messages, and this is the code
that will display them.</p>
<p>There are three blocks defined here that will be overridden in the other
templates:</p>
<olclass="arabic simple">
<li><p><codeclass="docutils literal notranslate"><spanclass="pre">{%</span><spanclass="pre">block</span><spanclass="pre">title</span><spanclass="pre">%}</span></code> will change the title displayed in the
browser’s tab and window title.</p></li>
<li><p><codeclass="docutils literal notranslate"><spanclass="pre">{%</span><spanclass="pre">block</span><spanclass="pre">header</span><spanclass="pre">%}</span></code> is similar to <codeclass="docutils literal notranslate"><spanclass="pre">title</span></code> but will change the
title displayed on the page.</p></li>
<li><p><codeclass="docutils literal notranslate"><spanclass="pre">{%</span><spanclass="pre">block</span><spanclass="pre">content</span><spanclass="pre">%}</span></code> is where the content of each page goes, such
as the login form or a blog post.</p></li>
</ol>
<p>The base template is directly in the <codeclass="docutils literal notranslate"><spanclass="pre">templates</span></code> directory. To keep
the others organized, the templates for a blueprint will be placed in a
directory with the same name as the blueprint.</p>
</section>
<sectionid="register">
<h2>Register<aclass="headerlink"href="#register"title="Link to this heading">¶</a></h2>
<divclass="code-block-caption"><spanclass="caption-text"><codeclass="docutils literal notranslate"><spanclass="pre">flaskr/templates/auth/register.html</span></code></span><aclass="headerlink"href="#id2"title="Link to this code">¶</a></div>
<p><codeclass="docutils literal notranslate"><spanclass="pre">{%</span><spanclass="pre">extends</span><spanclass="pre">'base.html'</span><spanclass="pre">%}</span></code> tells Jinja that this template should
replace the blocks from the base template. All the rendered content must
appear inside <codeclass="docutils literal notranslate"><spanclass="pre">{%</span><spanclass="pre">block</span><spanclass="pre">%}</span></code> tags that override blocks from the base
template.</p>
<p>A useful pattern used here is to place <codeclass="docutils literal notranslate"><spanclass="pre">{%</span><spanclass="pre">block</span><spanclass="pre">title</span><spanclass="pre">%}</span></code> inside
<codeclass="docutils literal notranslate"><spanclass="pre">{%</span><spanclass="pre">block</span><spanclass="pre">header</span><spanclass="pre">%}</span></code>. This will set the title block and then output
the value of it into the header block, so that both the window and page
share the same title without writing it twice.</p>
<p>The <codeclass="docutils literal notranslate"><spanclass="pre">input</span></code> tags are using the <codeclass="docutils literal notranslate"><spanclass="pre">required</span></code> attribute here. This tells
the browser not to submit the form until those fields are filled in. If
the user is using an older browser that doesn’t support that attribute,
or if they are using something besides a browser to make requests, you
still want to validate the data in the Flask view. It’s important to
always fully validate the data on the server, even if the client does
some validation as well.</p>
</section>
<sectionid="log-in">
<h2>Log In<aclass="headerlink"href="#log-in"title="Link to this heading">¶</a></h2>
<p>This is identical to the register template except for the title and
<divclass="code-block-caption"><spanclass="caption-text"><codeclass="docutils literal notranslate"><spanclass="pre">flaskr/templates/auth/login.html</span></code></span><aclass="headerlink"href="#id3"title="Link to this code">¶</a></div>
<h2>Register A User<aclass="headerlink"href="#register-a-user"title="Link to this heading">¶</a></h2>
<p>Now that the authentication templates are written, you can register a
user. Make sure the server is still running (<codeclass="docutils literal notranslate"><spanclass="pre">flask</span><spanclass="pre">run</span></code> if it’s not),
then go to <aclass="reference external"href="http://127.0.0.1:5000/auth/register">http://127.0.0.1:5000/auth/register</a>.</p>
<p>Try clicking the “Register” button without filling out the form and see
that the browser shows an error message. Try removing the <codeclass="docutils literal notranslate"><spanclass="pre">required</span></code>
attributes from the <codeclass="docutils literal notranslate"><spanclass="pre">register.html</span></code> template and click “Register”
again. Instead of the browser showing an error, the page will reload and
the error from <aclass="reference internal"href="../api.html#flask.flash"title="flask.flash"><codeclass="xref py py-func docutils literal notranslate"><spanclass="pre">flash()</span></code></a> in the view will be shown.</p>
<p>Fill out a username and password and you’ll be redirected to the login
page. Try entering an incorrect username, or the correct username and
incorrect password. If you log in you’ll get an error because there’s
no <codeclass="docutils literal notranslate"><spanclass="pre">index</span></code> view to redirect to yet.</p>
<p>Continue to <aclass="reference internal"href="static.html"><spanclass="doc">Static Files</span></a>.</p>
