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 %}
3.129.42.134