Hướng dẫn tạo Template Django trong Python

Trong quá trình phát triển web với Django, việc tạo và quản lý các giao diện người dùng là một phần quan trọng và không thể thiếu. Django Templates là một công cụ mạnh mẽ giúp chúng ta xây dựng các trang web linh hoạt và dễ bảo trì. Trong bài viết này, mình sẽ tìm hiểu sâu hơn về Django Templates, từ cách sử dụng các biến và tags cho đến cách tổ chức và kết hợp các template. Hãy cùng freetuts.net bắt đầu tìm hiểu về cách tạo Template Django trong Python!

Django Templates là gì?

Django Templates là một phần của framework Django, được sử dụng để tạo các giao diện người dùng linh hoạt và dễ bảo trì trong ứng dụng web. Templates trong Django cho phép chúng ta tách biệt logic của ứng dụng và giao diện người dùng, giúp làm cho mã nguồn trở nên dễ đọc và bảo trì hơn.

Mục đích sử dụng Django Templates

• Tách biệt logic và giao diện người dùng: Django Templates cho phép tách biệt logic xử lý dữ liệu và giao diện người dùng ra khỏi nhau. Điều này giúp làm cho mã nguồn trở nên dễ đọc, bảo trì và phát triển.

  Bài viết này được đăng tại [free tuts .net]

• Tạo ra các trang web linh hoạt: Sử dụng Django Templates, chúng ta có thể tạo ra các trang web linh hoạt với nhiều loại dữ liệu khác nhau, từ dữ liệu tĩnh đến dữ liệu động được truy vấn từ cơ sở dữ liệu.

• Tích hợp dễ dàng: Django Templates được tích hợp một cách dễ dàng vào các view của Django, cho phép tạo ra các trang web có tính tương tác cao và đáp ứng nhu cầu của người dùng một cách linh hoạt.

• Tăng hiệu suất phát triển: Bằng cách tách biệt logic và giao diện người dùng, Django Templates giúp tăng hiệu suất phát triển bằng cách cho phép các nhà phát triển chia nhỏ công việc và làm việc song song trên các phần khác nhau của ứng dụng.

Ngôn ngữ Template của Django (DTL)

Django Template Language (DTL) là ngôn ngữ template được Django cung cấp để tạo ra các template linh hoạt và mạnh mẽ. DTL bao gồm các phần sau:

• Biến (Variables): Được bao quanh bởi cặp dấu ngoặc nhọn {{ và }}, biến trong DTL cho phép chúng ta hiển thị dữ liệu động trong các template.

• Tags: Được bao quanh bởi cặp dấu {% và %}, tags trong DTL được sử dụng để thực hiện các thao tác logic như vòng lặp, câu điều kiện và truy vấn dữ liệu từ cơ sở dữ liệu.

• Filters: Filters trong DTL được sử dụng để biến đổi dữ liệu trước khi hiển thị nó trong template. Ví dụ, chuyển đổi chữ hoa, chữ thường hoặc định dạng ngày tháng.

• Comments: Được bao quanh bởi cặp dấu {# và #}, comments trong DTL cho phép chúng ta thêm các chú thích vào các template mà không ảnh hưởng đến việc render chúng ra ngoài.

• Kết hợp logic và giao diện: DTL cho phép kết hợp logic xử lý dữ liệu và giao diện người dùng trong cùng một file template một cách dễ dàng và linh hoạt.

Các phần tử cơ bản trong Django Templates bằng Python

Biến (Variables)

Trong Django Templates, biến được sử dụng để hiển thị dữ liệu động trong các template. Biến được bao quanh bởi cặp dấu ngoặc nhọn {{ và }}.

Ví dụ:

<p>Xin chào, {{ username }}!</p>

Trong đoạn mã trên, {{ username }} là một biến, nó sẽ được thay thế bằng giá trị của biến username.

Tag

Tags trong Django Templates được sử dụng để thực hiện các thao tác logic hoặc lặp lại. Tags được bao quanh bởi cặp dấu {% và %}.

Tags cơ bản

Ví dụ về một số tags cơ bản:

• {% if condition %} ... {% endif %}: Sử dụng để thực hiện một điều kiện và hiển thị nội dung trong trường hợp điều kiện đúng.

• {% for item in list %} ... {% endfor %}: Sử dụng để lặp qua các phần tử trong một danh sách và hiển thị nội dung.

Ví dụ:

{% if user.is_authenticated %}
    <p>Xin chào, {{ user.username }}!</p>
{% else %}
#Bài viết này được đăng tại freetuts.net
    <p>Vui lòng đăng nhập để tiếp tục.</p>
{% endif %}

Tags điều khiển (Control Tags)

Các tags điều khiển được sử dụng để điều khiển luồng logic trong template. Ví dụ:

• {% csrf_token %}: Tạo ra một mã token để bảo vệ khỏi tấn công CSRF.

Filters

Filters trong Django Templates được sử dụng để biến đổi dữ liệu trước khi hiển thị. Filters được áp dụng bằng cách sử dụng dấu gạch chân sau biến hoặc giá trị.

Ví dụ:

<p>{{ content|truncatewords:20 }}</p>

Trong đoạn mã trên, truncatewords là một filter được sử dụng để giảm số từ trong biến content xuống còn 20 từ.

Comments

Comments trong Django Templates cho phép chú thích trong code mà không ảnh hưởng đến việc render template.

Ví dụ:

{# Đây là một comment trong Django Templates #}

Comments sẽ không được hiển thị trong output của template.

Thực hành tạo và sử dụng Django Templates trong Python

Tạo và cấu trúc thư mục cho Templates

• Đầu tiên, tạo một thư mục có tên là templates trong thư mục của ứng dụng Django của bạn.

• Trong thư mục templates, tạo các thư mục con tương ứng với tên của các ứng dụng Django trong dự án của bạn. Ví dụ, nếu bạn có ứng dụng có tên là blog, bạn sẽ tạo một thư mục có tên là blog bên trong thư mục templates.

Tạo các template cơ bản

• Trong mỗi thư mục của ứng dụng Django, bạn có thể tạo các file template với các phần mở rộng như .html, .txt, vv.

• Ví dụ, bạn có thể tạo một template có tên là home.html trong thư mục templates/blog để hiển thị trang chủ của blog.

Sử dụng biến và tags trong template

Trong template, bạn có thể sử dụng các biến để hiển thị dữ liệu động và sử dụng các tags để thực hiện các thao tác logic.

Ví dụ, bạn có thể sử dụng biến {{ username }} để hiển thị tên người dùng đang đăng nhập.

<p>Xin chào, {{ username }}!</p>

Bạn cũng có thể sử dụng các tags như {% if condition %} ... {% endif %} để thực hiện các điều kiện.

Truyền dữ liệu từ view function đến template

Trong view function, bạn có thể tạo một dictionary chứa dữ liệu mà bạn muốn truyền cho template.

Sau đó, bạn có thể truyền dictionary này vào hàm render() để render template cùng với dữ liệu.

from django.shortcuts import render
#Bài viết này được đăng tại freetuts.net
def home(request):
    username = 'John'
    return render(request, 'blog/home.html', {'username': username})

Kết hợp các template và sử dụng base template

Đôi khi, bạn có thể muốn sử dụng một template chung làm cơ sở cho các template khác. Điều này giúp tránh việc lặp lại mã HTML.

Bạn có thể tạo một template cơ sở (base template) có tên là base.html và sử dụng nó như một template cha cho các template khác.

<!-- base.html -->
#Bài viết này được đăng tại freetuts.net
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}My Site{% endblock %}</title>
</head>
<body>
    <div class="container">
        {% block content %}
        {% endblock %}
    </div>
</body>
</html>

<!-- home.html -->

{% extends 'base.html' %}

{% block title %}Home{% endblock %}
#Bài viết này được đăng tại freetuts.net
{% block content %}
    <h1>Xin chào, {{ username }}!</h1>
{% endblock %}

Trong các template con, bạn có thể sử dụng {% extends 'base.html' %} để kế thừa từ template cơ sở và sử dụng {% block %} để ghi đè nội dung của các block trong template cơ sở.

Cấu hình và sử dụng các Static Files trong Python

Tạo và cấu trúc thư mục cho Static Files

Bắt đầu bằng việc tạo một thư mục có tên là static trong thư mục gốc của dự án Django của bạn.

├── static
|  ├── css
|  ├── images
|  └── js

Trong thư mục static, bạn có thể tạo các thư mục con để phân chia file tĩnh theo loại như css, js, images, vv.

Cấu hình và sử dụng Static Files trong Templates

Trước tiên, thêm đường dẫn đến thư mục static vào biến STATICFILES_DIRS trong cấu hình của Django.

# settings.py
#Bài viết này được đăng tại freetuts.net
STATICFILES_DIRS = [
    BASE_DIR / 'static',
]

Trong template của bạn, bạn có thể sử dụng tag {% load static %} để load các file tĩnh.

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Site</title>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
    <h1>Welcome to my site!</h1>
#Bài viết này được đăng tại freetuts.net
    <img src="{% static 'images/logo.png' %}" alt="Logo">
    <script src="{% static 'js/app.js' %}" defer></script>
</body>
</html>

Trong ví dụ trên, {% static 'css/style.css' %} sẽ tạo ra một URL tĩnh cho file CSS trong thư mục static/css, và tương tự cho các file JS và hình ảnh.

Kết bài

Qua bài viết này, mình đã tìm hiểu cách tạo và sử dụng Django Templates trong dự án Django của mình. Mình đã đi qua các bước để tạo và cấu trúc thư mục cho Templates, từ việc tạo thư mục gốc đến việc tạo các thư mục con cho từng ứng dụng Django và tạo các template cơ bản trong từng thư mục ứng dụng.

Mình đã thấy cách tạo các template cơ bản như trang chủ, trang chi tiết, và các trang khác trong dự án của mình. Bằng cách sử dụng Django Templates, có thể dễ dàng tái sử dụng mã HTML và hiển thị dữ liệu động từ view functions lên các trang web của chúng ta.

Hơn nữa, ta cũng đã tìm hiểu cách sử dụng các biến, tags, filters và comments trong Django Templates để tạo ra các trang web linh hoạt và dễ bảo trì. Các ví dụ cụ thể và mã nguồn minh họa đã giúp chúng ta hiểu rõ cách thức hoạt động của mỗi phần tử trong Templates.

Cuối cùng,mình đã thực hành kết hợp các template và sử dụng base template để giảm thiểu việc lặp lại mã HTML và tạo ra cấu trúc tổ chức hợp lý cho dự án của mình.