Skip to main content

Write HTML Templates

Why to write HTML Templates​

Till now the APIs are ready but app needs HTML templates to show data. In django, you can embed Python code within HTML tags, making it easy to generate dynamic content based on data retrieved from a database or other sources.

Introduction to Django Templates​

Django templates are a way of generating dynamic HTML web pages in a Django web application. Django templates use a syntax that allows you to embed Python code within HTML tags, making it easy to generate dynamic content based on data retrieved from a database or other sources.

To use Django templates in your Django application, you will need to create template files and specify how they are rendered within your views.

Steps to Write Templates​

Here's a simple example of how you can create a Django template:

  • Create a new directory called "templates" within your Django application directory.
  • Within the templates directory, create a new file called "fileName.html".
  • Add HTML code to the "fileName.html" file:

Lets Start​

In this app, I will create templates for user authentication and posts. Each file name below matches exactly what the views pass to render() — signup.html, signin.html, create_post.html, posts.html and post_detail.html.

SignUp Template​

blog/templates/signup.html
<html>
  <head>
    <title>SignUp</title>
  </head>
  <body>
    <h1>SignUp</h1>
    <form method="post">
      {% csrf_token %} {{signupForm}}
      <button type="submit">Submit</button>
    </form>
  </body>
</html>

I already explaind csrf_token in previous topics.

Login Template​

blog/templates/signin.html
<html>
  <head>
    <title>Login</title>
  </head>
  <body>
    <h1>Login</h1>
    <form method="post">
      {% csrf_token %} {{loginForm}}
      <button type="submit">Submit</button>
    </form>
  </body>
</html>

Create Post Template​

blog/templates/create_post.html
<html>
  <head>
    <title>Create Post</title>
  </head>
  <body>
    <h1>Create Post</h1>
    <form method="post" enctype="multipart/form-data">
      {% csrf_token %} {{postForm}}
      <button type="submit">Submit</button>
    </form>
  </body>
</html>
note

enctype="multipart/form-data" is required because the form uploads an image. Without it, the browser never sends the file and request.FILES stays empty.

Get All Posts Template​

This is the page the get_all_posts view renders at http://127.0.0.1:8000/blogs/posts/.

blog/templates/posts.html
<html>
  <head>
    <title>Posts</title>
  </head>
  <body>
    <h1>Posts</h1>
    <a href="/blogs/post/create/">Create a new Post</a>
    <ul>
      {% for post in posts %}
      <li><a href="/blogs/post/{{post.id}}">{{post.title}}</a></li>
      <li>{{post.author.username}}</li>
      {% endfor %}
    </ul>
  </body>
</html>

Get Post Detail Template​

This is the page the get_post_by_id view renders. It shows the post, its comments, and the comment form that submits to the comment view.

blog/templates/post_detail.html
<html>
  <head>
    <title>Post Detail</title>
  </head>
  <body>
    <h1>Post Detail</h1>
    <ul>
      <li>{{post.title}}</li>
      <li>{{post.author.username}}</li>
      <li>{{post.content}}</li>
      <li>{{post.date}}</li>
      <li>{{post.time}}</li>
      <li>{{post.image}}</li>
    </ul>

    {% if comments %}
    <h3>Comments</h3>
    <ul>
      {% for reply in comments %}
      <li>
        {{reply.comment}}
        {{reply.author.username}}
        {{reply.date}}
        {{reply.time}}
      </li>
      {% endfor %}
    </ul>
    {% endif %}

    <h3>Post a new Comment to this Post</h3>
    <form action="/blogs/post/{{post.id}}/comments/" method="post">
      {% csrf_token %} {{commentForm}}
      <button type="submit">Submit</button>
    </form>
  </body>
</html>

Try it out​

Everything is in place now. Start the server with python manage.py runserver and walk through the app:

  1. Open http://127.0.0.1:8000/blogs/signup/ and create an account.
  2. Sign in at http://127.0.0.1:8000/blogs/signin/ — you are redirected to the posts list.
  3. Create a post at http://127.0.0.1:8000/blogs/post/create/.
  4. Open a post from the list and leave a comment.
Last updated on