Модуль 8

Templates та Django Template Language

Ось готовий урок, створений за твоїм майстер-промптом. Вмикай режим "CS50" і поїхали! 🚀

🎓 CS50: Templates та Django Template Language (DTL)

Привіт, друзі! 👋 Я радий вас бачити.

Сьогодні ми говоримо про те, що перетворює сухий код на те, що користувач бачить на екрані. Ми поговоримо про Templates (Шаблони).

1. 🔥 Вступ: проблема та мотивація

Уявіть, що ви створюєте сайт новин, такий як BBC або Українська Правда. У вас є база даних, де лежать тисячі статей.

Тепер питання до вас: Як ми покажемо ці статті користувачу?

Невже ми будемо вручну створювати окремий HTML-файл для кожної новини? * news_1.html * news_2.html * ... * news_9999.html

Звісно, ні! Це ж безумство. Якщо нам треба буде змінити колір заголовка, доведеться редагувати 10 000 файлів? 😱

Або інший варіант: писати HTML прямо в Python-коді?

html = "<h1>" + article.title + "</h1><p>" + article.text + "</p>"

Це виглядає як "спагеті-код". Це незручно, це важко читати, і це прямий шлях до помилок.

Аналогія: Печатка та Лист ✉️

Уявіть, що ви податкова інспекція (вибачте за такий приклад, але він працює!). Ви надсилаєте листи 1000 людям. Текст листа однаковий, змінюються лише: Ім'я, Сума боргу та Дата.

Ви не пишете 1000 листів з нуля. Ви берете бланк (шаблон), де є порожні місця, і просто вписуєте туди дані.

Django Templates — це і є ваші бланки. Контекст — це дані (імена, суми), які ви туди вставляєте.

2. 🧠 Теоретична база (Що під капотом?)

Отже, Шаблон (Template) у Django — це звичайний HTML-файл, але з "суперсилами". Він містить спеціальні позначки, які Django замінює на реальні дані перед тим, як відправити сторінку в браузер.

Ключові поняття:

  1. Змінні (Variables) {{ ... }}

    • Це ваші "дірки" в бланку. Сюди підставляється значення.
    • Приклад: {{ user.username }} покаже ім'я користувача.
    • Запам'ятайте: Подвійні фігурні дужки — це "надрукуй це".

  2. Теги (Tags) {% ... %}

    • Це логіка. Програмування всередині HTML.
    • Тут живуть цикли (for), умови (if), та спадкування блоків.
    • Запам'ятайте: Відсоток — це "зроби щось" (логіка), а не просто виведи текст.

  3. Фільтри (Filters) |

    • Це як макіяж для ваших даних. Ви змінюєте вигляд змінної.
    • Приклад: {{ name|upper }} перетворить "іван" на "ІВАН".

Як це працює (Flow):

  1. Користувач стукає на сайт (URL).
  2. View (В'юшка) дістає дані з бази (наприклад, список товарів).
  3. View бере Шаблон (HTML з дірками).
  4. View "заливає" дані в шаблон (це називається render).
  5. Користувач отримує готовий, чистий HTML. Він навіть не здогадується, що там були якісь дужки.

3. 🧪 Приклади (від "Hello" до "Pro")

Приклад 1: Мінімум (Змінні)

Уявіть, що у нас у View є словник: context = {"name": "Олеже", "score": 95}.

Шаблон:

<h1>Привіт, {{ name }}!</h1>
<p>Твій результат: {{ score }} балів.</p>

Результат у браузері:

Привіт, Олеже! Твій результат: 95 балів.

Просто, правда?

Приклад 2: Реальна задача (Цикли)

Тепер у нас список студентів. students = ["Анна", "Богдан", "Вікторія"]. Що ви очікуєте побачити? Нам треба створити список <ul>. Але ми не знаємо, скільки там буде людей — 3 чи 300.

Шаблон:

<ul>
  {% for student in students %}
    <li>Студент: {{ student }}</li>
  {% endfor %}
</ul>

Бачите різницю? Ми використали {% %} для циклу, бо це логіка, і {{ }} всередині, щоб вивести ім'я.

Приклад 3: Магія Django (Спадкування / Inheritance)

Це найпотужніша частина. У вас на сайті 50 сторінок. У всіх однакове меню зверху (Header) і "підвал" знизу (Footer). Копіювати їх на 50 сторінок? Ні. Якщо зміниться телефон у футері, ви втомитесь його міняти всюди.

Ми робимо Базовий шаблон (base.html):

<!-- base.html -->
<html>
<body>
    <nav>Це наше МЕНЮ (воно всюди)</nav>

    <div class="content">
        <!-- Оце місце для унікального контенту -->
        {% block content %}
        {% endblock %}
    </div>

    <footer>Це наш ФУТЕР (він всюди)</footer>
</body>
</html>

А тепер сторінка "Про нас" (about.html):

<!-- about.html -->
{% extends "base.html" %}

{% block content %}
    <h1>Про нас</h1>
    <p>Ми класна компанія!</p>
{% endblock %}

Що відбувається? Django бере base.html, знаходить там віконце block content і вставляє туди те, що ви написали в about.html. Геніально!

4. 🛠 Практична частина

Час кодити! Відкрийте свої IDE або просто уявіть рішення.

Завдання 1: "Візитка" У вас є змінні first_name = "Тарас", last_name = "Шевченко". Напишіть код шаблону, який виведе заголовок: Вітаю, пане Шевченко Т.! (зверніть увагу, тільки перша літера імені). (Підказка: є фільтр slice або схожий, але спробуйте для початку просто вивести ім'я).

Завдання 2: "Список покупок" Є список items = ['Хліб', 'Молоко', 'Яйця']. Виведіть їх нумерованим списком (<ol>).

Завдання 3: "Порожній холодильник" Змініть код із Завдання 2. Що, як список items порожній? Додайте тег {% empty %} всередині циклу for, щоб вивести повідомлення "Холодильник порожній :(", якщо продуктів немає.

Завдання 4: "Адмін чи Гість" Є змінна is_admin = True. Напишіть {% if %} конструкцію: * Якщо адмін — показати кнопку <button>Видалити все</button>. * Якщо ні — показати <p>У вас немає прав.</p>.

Завдання 5: Виправи помилку Студент написав код і він не працює (видає помилку синтаксису). Знайди помилку:

<ul>
  {% for user in users }  <!-- Уважно подивіться сюди -->
      <li>{{ user.name }}</li>
  {% endfor %}
</ul>

Міні-кейс (на подумати): Вам треба вивести дату публікації статті у форматі "День-Місяць-Рік", але в базі вона зберігається як довгий страшний рядок часу. Де ви будете це форматувати: у View (Python) чи в Шаблоні (HTML)? (Відповідь — краще в шаблоні за допомогою фільтра |date:"d-m-Y", щоб не засмічувати логіку Python візуальними речами).

5. 💡 Мислення як у розробника

Як відрізнити новачка від профі, дивлячись на шаблон?

  1. Логіка належить Python, а не HTML.

    • Помилка: Намагатися робити складні обчислення в шаблоні (наприклад, {% if cart.total * 0.2 > 100 %}).
    • Як думає профі: "Шаблон має бути тупим". Він просто показує те, що йому дали. Порахуй знижку у Python (View), а в шаблон передай готову цифру discounted_price.

  2. DRY (Don't Repeat Yourself).

    • Якщо ви тричі скопіювали один і той самий шматок HTML (наприклад, картку товару) — створіть для нього маленький шаблончик і підключайте через {% include "card.html" %}.

  3. Безпека.

    • Django за замовчуванням екранує HTML (захист від XSS). Якщо хтось введе в ім'я <script>hack()</script>, Django перетворить це на безпечний текст. Ніколи не вимикайте це (фільтр |safe), якщо не впевнені на 1000%.

6. 🧩 Підсумок

Отже, друзі!

Сьогодні ми розібралися, як відокремити мух від котлет, тобто логіку (Python) від візуалізації (HTML).

Тепер ви вмієте: ✅ Виводити динамічні дані на сторінку. ✅ Використовувати цикли та умови в HTML. ✅ Створювати зручну структуру сайту за допомогою спадкування (extends).

Що далі? Зараз наші сторінки виглядають як інтернет 90-х — просто текст і посилання. У наступному уроці ми дізнаємось, як додати CSS (Static files), щоб зробити наш сайт красивим, і Forms, щоб не тільки показувати дані, а й приймати їх від користувача.

А поки що — це був CS50. Практикуйтесь! 💻

Примітка: Цей урок є адаптацією стилю Девіда Малана для текстового формату.

← До списку уроків Наступний урок →