4.3 Interaction between models and templates

Models are classes defined and saved in the back-end of the database. In this example, posts and comments are two different models. Templates are the front-end web pages you are browsing, which defines the format of the page. For any web page you actually see on a website, it is the interaction between models and templates: Templates show the skeleton of the page, and models fill in the content retrieved from the database. Other components like urls.py and views.py are bridging between models and template. In this page, we will introduce the interaction between models and templates in details.

After you read through the tutorial and understand the basics of the syntax, let's take a look at the first half of post_detail.html:

{% extends 'blog/base.html' %}

{% block content %}


        <h1 class='posttitle loader'>{{ post.title }}</h1> <!-- Loader and posttitle is the class defined in css file-->

        {% if post.published_date %} <!-- If there is a publish date, which means this is being published -->
            <div class="date postdate">
                {{ post.published_date }}  <!-- inserting the published data using the postdate style defined in css! -->
            </div>

        {% else %} <!-- If not published -->
            <a class="btn btn-default" href="{% url 'post_publish' pk=post.pk %}">Publish</a> <!-- Take you to the publish page-->
        {% endif %}

      <p class='postcontent' >{{ post.text|safe|linebreaksbr }}</p>


      {% if user.is_authenticated %}
          <a class="btn btn-primary" href="{% url 'post_edit' pk=post.pk %}"><span class="glyphicon glyphicon-pencil"></span></a>
          <a class="btn btn-primary" href="{% url 'post_remove' pk=post.pk %}"><span class="glyphicon glyphicon-remove"></span></a>
      {% endif %}

<h1>, <p> and <a> is HTML syntax, please go to this tutorial for details. As a recap of Start With A Single Click, we already know that post_detail.html is called because the template tag 'post' is called in this HTML, which is generated by PostDetailView, and PostDetailView is called from the URL whose name is post_detail in urls.py, which is called in post_list.html, and this is the workflow when you click the specific post among all the posts displayed on the homepage. To understand how the details of the post are displayed the way it is, we need to understand the code section above.

If, else and endif with published_date

Basically, the title of the post is displayed as the heading of the page, and since the post is a model defined in models.py (which we will get into later). The post has a variable called published_date, and if the post has been published, the published_date will be assigned as a date value. The code above first examines whether the post has been published or not (by examining published_date). If published, the published date will be displayed, otherwise, it will give the access to the user to publish. Then, the content of the post will be inserted as a paragraph. You should understand the meaning of the pipeline in post.text|safe|linebreaksbr if you have followed the tutorial carefully.

User Authentication

If logged in, the user should have the permission to modify or remove the post. This is done by using the boolean value of user.is_authenticated: If the user is authenticated, the modify and remove button will be created with the glyph icon, with hyper references that direct the user to either edit view or delete view.

Let's see the second half of the code:

  <hr> <!-- horizontal roll -->
  <a class="btn btn-primary btn-comment" href="{% url 'add_comment_to_post' pk=post.pk %}">Add comment</a>
  <div class="container">


  {% for comment in post.comments.all %}
  <br>
      {% if user.is_authenticated or comment.approved_comment %}

              {{ comment.created_date }}
              {% if not comment.approved_comment %}
                  <a class="btn btn-default" href="{% url 'comment_remove' pk=comment.pk %}"><span class="glyphicon glyphicon-remove"></span></a>
                  <a class="btn btn-default" href="{% url 'comment_approve' pk=comment.pk %}"><span class="glyphicon glyphicon-ok"></span></a>
              {% endif %}

          <p>{{ comment.text|safe|linebreaks }}</p>
          <p>Posted by: <strong>{{ comment.author }}</strong></p>

      {% endif %}
  {% empty %}
      <p>No comments posted.</p>
  {% endfor %}
</div>

{% endblock %}

The latter section of the page specifies the scheme to show the comments. It reads the comments of each post, displays the date of comment, and provide the access to the user to remove or approave the comment if it is not approved yet, and the content of the comment will be shown in the end.

Hopefully by far, you will be able to read and interpret the main section of the source code. In the next a few pages, we will introduce the definition of each model (comment and post), as well as CSS (Cascading Style Sheets) to understand the style of each layout.