A template is a simple text document which contains block tags or variables. Flask micro-framework makes use of the Jinja2 template engine for rendering the HTML pages.
In our application, we use five different templates which includes a base template—base.html. This base template is a layout consisting of the common elements of all the templates. The four other templates (index.html, show.html, vote.html and new.html) make use of a concept called template inheritance provided by the Jinja2 template engine. It is used to enable those common features to get showed up without a redundant code in every template.
This template is a skeleton for all the other templates. It contains a common navigation menu section and a placeholder to hold the primary content block of every page in this application. The survey/templates/base.html template will contain the following code:
<html>
<head>
<title>Welcome to Survey Application</title>
</head>
<body>
{% if message %}
<p style="text-align: center;">{{ message }}</p>
{% endif %}
<div>
<a href="/">Home</a> |
<a href="/questions">All Questions</a> |
<a href="/questions/new">Create a new Question</a>
</div>
<hr>
{% block content %}{% endblock %}
</body>
</html>As we need to show the list of questions in a web page, we iterate over the questions variable using a for loop tag and display all the vote counts of a specific survey. Add the following to the survey/templates/index.html file:
{% extends "base.html" %}
{% block content %}
<p>Number of Questions - <span id="number_of_questions">{{ number_of_questions }}</span></p>
{% for question in questions %}
<div>
<p>
<p><a href="/questions/{{ question.id }}">{{ question.question_text }}</a></p>
<ul>
<li>Yes - {{ question.number_of_yes_votes }} </li>
<li>No - {{ question.number_of_no_votes }} </li>
<li>Maybe - {{ question.number_of_maybe_votes }}
</li>
</ul>
</p>
</div>
{% endfor %}
<hr />
{% endblock %}To show an HTML form containing a new survey question, we defined a template called survey/templates/new.html:
new.html
{% extends "base.html" %}
{% block content %}
<h1>Create a new Survey</h1>
<form method="POST" action="/questions">
<p>Question: <input type="text" name="question_text"></p>
<p><input type="submit" value="Create a new Survey"></p>
</form>
{% endblock %}To display all the details of a survey, create a template in the following way. This template also includes a link to the cast your vote page. Add the following code to the survey/templates/show.html file:
{% extends "base.html" %}
{% block content %}
<div>
<p>
{% if question %}
<p>{{ question.question_text }}</p>
<ul>
<li>Yes - {{ question.number_of_yes_votes }}</li>
<li>No - {{ question.number_of_no_votes }}
</li>
<li>Maybe - {{ question.number_of_maybe_votes}}</li>
</ul>
<p><a href="/questions/{{ question.id }}/vote">Cast your vote now</a></p>
{% else %}
Not match found!
{% endif %}
</p>
</div>
<hr />
{% endblock %}To cast a vote, we need to display a web page containing a HTML form with a survey and its choices. Add the following code to the survey/templates/vote.html file:
{% extends "base.html" %}
{% block content %}
<div>
<p>
{% if question %}
<p>{{ question.question_text }}</p>
<form action="/questions/{{ question.id }}/vote" method="POST">
<input type="radio" name="vote" value="yes">Yes<br>
<input type="radio" name="vote" value="no">No<br>
<input type="radio" name="vote" value="maybe">Maybe<br>
<input type="submit" value="Submit" /><br>
</form>
<p><a href="/questions/{{ question.id }}">Back to Question</a></p>
{% else %}
Not match found!
{% endif %}
</p>
</div>
<hr />
{% endblock %}