Skip to content

Render HTML templates to response

Serhii Horodilov edited this page Feb 21, 2024 · 11 revisions

At the end of this guide, you will:

  • Configure project views to render HTML pages within responses.
  • Configure project to serve static files in the development environment.

Table of Contents

Getting started

git checkout bp-templates

Guide

Templates pack

  1. Download the latest template pack.
In deed, you require the dist archive only; however handlebars can be useful as well, since it contains the source templates used to build the distribution.

Unzip the archive.

Create the templates directory in the project root, and move all *.html files from the archive in it. Create the assets directory, and move the rest of the templates distribution in it. The files structure should look like:

/
|-- ...
|-- assets/
|   |-- css/
|   |-- fonts/
|   |-- icons/
|   |-- img/
|   `-- js/
|-- templates/
|   |-- profile.html
|   |-- signin.html
|   |-- signup.html
|   |-- task_detail.html
|   |-- task_form.html
|   `-- task_list.html
`-- ...

Render templates to response

Update views to render templates

There is no template to render with task_delete_view function, so it will just redirect back to list view (homepage).

# tasks/views.py
from django.http.request import HttpRequest
from django.http.response import HttpResponse
from django.shortcuts import redirect, render


def task_list_view(request: HttpRequest) -> HttpResponse:
    """
    Handle requests to tasks list
    """

    return render(request, "task_list.html")


def task_detail_view(request: HttpRequest, pk: int) -> HttpResponse:
    """
    Handle requests to task details
    """

    return render(request, "task_detail.html")


def task_create_view(request: HttpRequest) -> HttpResponse:
    """
    Handle requests to create a new task instance
    """

    return render(request, "task_form.html")


def task_update_view(request: HttpRequest, pk: int) -> HttpResponse:
    """
    Handle requests to update an existing task instance
    """

    return render(request, "task_form.html")


def task_delete_view(request: HttpRequest, pk: int) -> HttpResponse:
    """
    Handle requests to delete an existing task instance
    """

    return redirect("tasks:list")

There is no template to render with sign_out_view function, so it will just redirect back to list view (homepage).

# users/views.py
from django.http.request import HttpRequest
from django.http.response import HttpResponse
from django.shortcuts import redirect, render


def user_profile_view(request: HttpRequest) -> HttpResponse:
    """
    Handle requests to user's profile
    """

    return render(request, "profile.html")


def sign_up_view(request: HttpRequest) -> HttpResponse:
    """
    Register a new user in the system
    """

    return render(request, "signup.html")


def sign_in_view(request: HttpRequest) -> HttpResponse:
    """
    Authenticate a user
    """

    return render(request, "signin.html")


def sign_out_view(request: HttpRequest) -> HttpResponse:
    """
    Sing out the authenticated user
    """

    return redirect("tasks:list")

Adjust project settings

To serve templates from non-apps directory(ies) you have to add path to the templates directory to TEMPLATES[0]["DIRS"] in the tasktracker/settings.py module.

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": [BASE_DIR / "templates"],
        "APP_DIRS": True,
        "OPTIONS": {
            "context_processors": [
                "django.template.context_processors.debug",
                "django.template.context_processors.request",
                "django.contrib.auth.context_processors.auth",
                "django.contrib.messages.context_processors.messages",
            ],
        },
    },
]

Changes

  1. Full change log
  2. Fake DB
  3. Templates