Szablony HTML w Django

Póki co funkcje odpowiedzialne za zwracanie zawartości w Django zwracają poprawne dane, ale nie przypominają one aplikacji internetowych, które znamy z codziennego użytkowania komputera. Dodajmy im nieco bardziej oszlifowanego wyglądu.

Tworzenie szablonów HTML w Django

Dotychczas nasze widoki, czyli funkcje polls.views.index, polls.views.by_name czy polls.views.by_id zwracały czysty tekst oraz status żądania HTTP. W przypadku nadawania im statusu HTTP 404 (Not found) dla ścieżek, którym nie odpowiadała żadna istniejąca ankieta, wiadomo jaki status zwracała funkcja. W pozostałych przypadkach, domyślnie Django zwracało za nas status 200 (OK), żeby potwierdzić, że przetwarzanie żądania HTTP przeszło bez problemów.

W przypadku aplikacji webowych, te części portalu, z których mają korzystać odwiedzający przy użyciu przeglądarki internetowej, zazwyczaj zwracają strony w języku HTML.

W przypadku naszej strony głównej, czyli widoku polls.views.index moglibyśmy chcieć zwrócić taki podstawowy dokument HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Awesome polls page</title>
  </head>
  <body>
    <div id="content">
      Welcome to the polls page.
    </div>
  </body>
</html>

Jak widać, już w tym przypadku jest dość dużo treści, które nie mają nic wspólnego z naszymi ankietami:

Cała struktura dokumentu HTML, czyli tagi DOCTYPE, html, head, body, itp.
tag związany z kodowaniem znaków na stronie meta charset
tag odpowiedzialny za wyświetlanie strony w oknie danej przeglądarki meta name="viewport"

Jak zaznaczyliśmy, to bardzo podstawowy dokument, będziemy go dalej rozbudowywać w miarę rozwoju naszej aplikacji. W związku z tym na horyzoncie pojawia się problem, bo musimy zwracać podobny dokument z każdego widoku w naszej aplikacji. Już teraz mamy trzy widoki, a prawdopodobnie ta liczba będzie rosnąć. A co, jeżeli postanowimy zmienić język naszej strony na polski? Musielibyśmy pamiętać, żeby we wszystkich widokach odpowiednio zmienić atrybut lang tagu html. Django rozwiązuje ten problem przy użyciu szablonów. Możemy zdefiniować następujący szablon:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Awesome polls page</title>
  </head>
  <body>
    <div id="content">
      {{ content }}
    </div>
  </body>
</html>

Umieszczając go w pliku polls/templates/polls/base.html

Podwójne wystąpienie folderu polls w ścieżce nie jest błędem, jest to związane ze sposobem w jaki Django przeszukuje foldery z szablonami w poszukiwaniu wskazanego przez programistę.

Następnie wykorzystując następujący kod dla naszego widoku:

from django.http import HttpResponse
from django.template import loader

def index(request):
    template = loader.get_template("polls/base.html")
    context = {
        "content": "Hello world! Welcome to the polls page.",
    }
    return HttpResponse(template.render(context, request))

W ten sposób nasz widok dla ścieżki polls/ powinien teraz zwracać pełny dokument HTML z treścią podaną w zmiennej content.

Zadania praktyczne

Zadanie 1: używając tego samego szablonu zmodyfikuj kod pozostałych widoków, aby zwracały dokument HTML z odmienną treścią
Zadanie 2: Zmodyfikuj szablon tak, aby oprócz treści w tagu div id="content" można było też modyfikować tytuł, dodając odpowiedni wpis w zmiennej kontekst.

Dodawanie styli CSS i kodu JavaScript

Nasze widoki zwracają w odpowiedzi na żądania HTTP treści, które są generowane na bieżąco, w zależności od aktualnego stanu aplikacji. Natomiast aplikacje webowe zawierają często treści, które nie zmieniają się w czasie używania aplikacji, niezależnie od tego, co zrobi użytkownik. Często są to obrazy zawierające loga, albo tła, pliki CSS, czy kod frontedowy w postaci kodu JavaScript. W Django wszystkie te treści, które nie są generowane dynamicznie nazywane są _plikami statycznymi.

Jeżeli chcemy dodać podobne pliki do naszej aplikacji, możemy to zrobić w następujący sposób:

Pierwszym, najważniejszym krokiem jest dodanie w pliku ustawień projektu, tj. mysite/mysite/setting.py naszej aplikacji 'polls' do listy zainstalowanych aplikacji:

# ...
# Application definition

INSTALLED_APPS = [
    'polls',
    'django.contrib.admin',
    'django.contrib.auth',
# ...

Następnie w folderze naszej aplikacji polls utwórzmy katalogi 'templates/polls'. Powtórzenie nazwy jest celowe, to nie błąd.

W szablonie html dodaj komendę uruchamiającą moduł ładujący pliki statyczne. Komenda może się znaleźć teoretycznie w dowolnym miejscu przed użyciem plików statycznych, ale polecam dopisać ją na początku pliku.

{% load static %}

Po dodaniu tej linijki w szablonie możesz się odwoływać do plików z folderu polls/templates/polls np. w następujący sposób:

	<link rel="stylesheet" href="{% static 'polls/style.css' %}">
	<script src="{% static 'polls/app.js' %}"></script>	

Zadania praktyczne

Dodaj do swojej aplikacji plik CSS, który jakoś wpłynie na wygląd strony. Może to być coś trywialnego, jak zmiana koloru tekstu na stronie.
Dodaj do swojej aplikacji plik JavaScript, który wykona jakąś akcję na stronie. Jeżeli nie masz innego pomysłu, wydrukuj na konsolę jakiś standardowy komunikat, np.
console.log("hello world!");