Hướng dẫn django html - django html

Ghi chú

Nội dung bài viết bạn đang xem được update từ tháng 06/2019. Vì vậy sẽ có đôi chút khác biệt giữ VIDEO và NỘI DUNG BÀI VIẾT.update từ tháng 06/2019. Vì vậy sẽ có đôi chút khác biệt giữ VIDEO và NỘI DUNG BÀI VIẾT.

Chúng ta sẽ có nhiều cập nhập hơn về cả bài viết lẫn video trong thời gian tới. Nhớ like/ share hoặc đánh giá 5 sao để Kteam có động lực nhé! like/ share hoặc đánh giá 5 sao để Kteam có động lực nhé! 

Cảm ơn các bạn! 


Dẫn nhập

Trong bài viết hôm nay, Kteam sẽ hướng dẫn cho các bạn cách sử dụng template và ngôn ngữ Jinja để phát triển Website tốt hơn.


Nội dung

Để theo dõi bài này tốt nhất, bạn nên xem qua bài:

  • GIỚI THIỆU VỀ PYTHON DJANGO
  • TẠO PROJECT PYTHON DJANGO
  • TẠO WEB APP VÀ XỬ LÝ KHI NGƯỜI DÙNG YÊU CẦU TRUY CẬP TRONG PYTHON DJANGO

Bài này sẽ giới thiệu những nội dung sau:

  • Template là gì? Jinja là gì?
  • Tạo các template

Template là gì? Jinja là gì?

Template là một layout được thiết kế các khung web có sẵn, ta chỉ cần thêm nội dung chính của nó vào, và nhờ các template ta mới tiết kiệm thời gian trong việc phát triển website.là một layout được thiết kế các khung web có sẵn, ta chỉ cần thêm nội dung chính của nó vào, và nhờ các template ta mới tiết kiệm thời gian trong việc phát triển website.

Ví dụ:Ta hãy quan sát trang HowKteamTa hãy quan sát trang HowKteam

Hướng dẫn django html - django html

Ta để ý giao diện của 2 webpage này có vài đoạn tương đồng với nhau. Như vậy ta sẽ tạo một template chung và chỉ cần đưa nội dung vào đó để tái sử dụng template. Chúng ta sẽ làm thông qua các template enginetemplate engine

Jinja là một template engine cho python nhằm tạo các template như đã nói ở trên. Kteam sẽ giải thích Jinja rõ hơn ở phía sau.là một template engine cho python nhằm tạo các template như đã nói ở trên. Kteam sẽ giải thích Jinja rõ hơn ở phía sau.


Tạo các template

Bây giờ, ở app home Kteam sẽ tạo một folder templates, trong folder đó tạo thêm một folder pages. Trong folder pages Kteam sẽ tạo ra một file khung html là base.htmlhome Kteam sẽ tạo một folder templates, trong folder đó tạo thêm một folder pages. Trong folder pages Kteam sẽ tạo ra một file khung html là base.html

Hướng dẫn django html - django html

Bây giờ, ta sẽ thiết kế file base.html trong đó có 2 block để sau này điền nội dung vào. Một là block title nằm trong tag title, hai là block content nằm ở tag body:base.html trong đó có 2 block để sau này điền nội dung vào. Một là block title nằm trong tag title, hai là block content nằm ở tag body:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>{% block title %}{% endblock %}</title>
</head>
<body>
   Nội dung
   {% block content %}
  
   {% endblock %}
</body>
</html>

Tiếp theo, ta sẽ tạo một template home.html tái sử dụng template base.html (file home.html nằm trong folder page) home.html tái sử dụng template base.html (file home.html nằm trong folder page)

{% extends "pages/base.html" %}

{% block title %}
Home
{% endblock %}

{% block content %}
<h2>Xin Chào</h2>
Đây là app home   
{% endblock %}

Như vậy các nội dung nằm trong những block template home.html sẽ được thay thế vào trong base.html.home.html sẽ được thay thế vào trong base.html.

Bây giờ ta quay lại file views.py ở app home, trong hàm index ta sẽ gọi template home.html:views.py ở app home, trong hàm index ta sẽ gọi template home.html:

from django.shortcuts import render
from django.http import HttpResponse
# Create your views here.
def index(request):
   return render(request, 'pages/home.html')

Ta sẽ gọi template bằng hàm render, hàm render có 2 tham số truyền vào: đầu tiên là request là request từ máy client, thứ 2 là tên đường dẫn đến template ta muốn dùng (ta chỉ cần gọi đường dẫn bên trong folder 'templates')

Bây giờ ta sẽ xem kết quả:

Hướng dẫn django html - django html

Giờ Kteam sẽ vẽ nguyên lý hoạt động của template engine Jinja: Khi ta dùng render để gọi template home.html. template engine Jinja: Khi ta dùng render để gọi template home.html.

Hướng dẫn django html - django html


Kết

Như vậy Kteam đã giới thiệu cách sử dụng Template và Jinja trong Python Django

Ở bài tiếp theo, Kteam sẽ giới thiệu cho các bạn FILE TĨNH & THIẾT KẾ WEB BẰNG BOOSTRAP TRONG PYTHON DJANGO

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó”.Luyện tập – Thử thách – Không ngại khó”.


Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.