Hướng dẫn logout page template bootstrap - trang đăng xuất mẫu bootstrap

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ữa 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ữa 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

Ở bài trước, Kteam đã hướng dẫn các bạn xong cách TẠO FORM ĐĂNG KÝ TÀI KHOẢN TRONG PYHTON DJANGO

Trong bài này Kteam hướng dẫn cách xử lý đăng nhập và đăng xuất của user trong Python Django.xử lý đăng nhập và đăng xuất của user trong Python Django.


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 VỚI PYTHON DJANGO
  • TẠO WEB APP VÀ XỬ LÝ KHI NGƯỜI DÙNG YÊU CẦU TRUY CẬP TRONG PYTHON DJANGO
  • SỬ DỤNG TEMPLATE VÀ JINJA TRONG PYTHON DJANGO
  • FILE TĨNH VÀ THIẾT KẾ WEB BẰNG BOOTSTRAP TRONG PYTHON DJANGO
  • THIẾT KẾ HOÀN CHỈNH BLOG TRONG PYTHON DJANGO
  • DÙNG MODEL TẠO BẢNG DATABASE BẰNG NGÔN NGỮ PYTHON
  • TƯƠNG TÁC DATABASE BẰNG NGÔN NGỮ PYTHON
  • HỆ THỐNG ADMIN TRONG PYTHON DJANGO
  • LIỆT KÊ DANH SÁCH BÀI VIẾT TRONG PYTHON DJANGO
  • HIỂN THỊ THÔNG TIN BÀI VIẾT TRONG PYTHON DJANGO
  • LOẠI BỎ HARDCODED URL TRONG PYTHON DJANGO.
  • XỬ LÝ LỖI 404 TRONG PYTHON DJANGO
  • DJANGO SỬ DỤNG MÔ HÌNH MVC
  • UPLOAD FILE ẢNH VÀO TRANG WEB ĐƯỢC LÀM BẰNG DJANGO MVC
  • TẠO FORM ĐĂNG KÝ TÀI KHOẢN TRONG PYHTON DJANGO

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

  • Built-in user authentication system
  • Thiết kế template đăng nhập và đăng xuất

Built-in user authentication system

Tại vì Django đã giúp cho chúng ta thiết kế 1 hệ thống user có sẵn, vì vậy Django đã hỗ trợ cho chúng ta những chức năng đăng nhập và đăng xuất của hệ thống. Vì vậy, trong bài này Kteam chỉ hướng dẫn các bạn cách config các chức năng đó Ở urls app home, ta sẽ import views từ authentication để dùng các function đã xây dựng sẵn: config các chức năng đó
Ở urls app home, ta sẽ import views từ authentication để dùng các function đã xây dựng sẵn:

from django.urls import path
from . import views
from django.contrib.auth import views as auth_views

urlpatterns = [
   path('', views.index),
   path('contact/', views.contact, name='contact'),
   path('register/', views.register, name="register"),
   path('login/',auth_views.LoginView.as_view(template_name="pages/login.html"), name="login"),
   path('logout/',auth_views.LogoutView.as_view(next_page='/'),name='logout'),
]

  • Để tránh nhầm lẫnviews của app home, Kteam định danhviewscủa auth là auth_views. views của app home, Kteam định danh viewscủa authauth_views.
  • tạo path login/: dùng class LoginView gọi function as_view để xử lý đăng nhập, truyền tham số template_name để custom lại template đăng nhập. : dùng class LoginView gọi function as_view để xử lý đăng nhập, truyền tham số template_name để custom lại template đăng nhập.
  • tạo path logout/: dùng class LogoutView gọi function as_view để xử lý đăng xuất, : dùng class LogoutView gọi function as_view để xử lý đăng xuất,
  • truyền tham số next_page để thực hiện sau khi đăng xuất sẽ về đâu (ở đây Kteam sẽ cho về trang chủ). next_page để thực hiện sau khi đăng xuất sẽ về đâu (ở đây Kteam sẽ cho về trang chủ).

Tiếp theo, Kteam sẽ tạo template login, LoginView có thiết kế Form login để đăng nhập, tuy nhiên Kteam muốn custom lại form để Việt hóa:template login, LoginView có thiết kế Form login để đăng nhập, tuy nhiên Kteam muốn custom lại form để Việt hóa:




    
    
    
    Login


    
{% csrf_token %} {% for key, value in form.errors.items %} {{value}} {% endfor %}

{{form.username}}

{{form.password}}

  • thiết kế label tiếng Việt, rồi sau đó tạo các thẻ input thông qua các field của form đăng nhập. label tiếng Việt, rồi sau đó tạo các thẻ input thông qua các field của form đăng nhập.
  • tạo input next để sau khi đăng nhập sẽ đi về đâu. input next để sau khi đăng nhập sẽ đi về đâu.
  • tạo input submit có value là Đăng nhậpinput submitvalue Đăng nhập
  • Để tính trường hợp lỗi, nên dùng vòng lặp for lấy value từ form.errors.for lấy value từ form.errors.

Bây giờ ta thử kiểm tra kết quả

Hướng dẫn logout page template bootstrap - trang đăng xuất mẫu bootstrap

Sau khi đăng nhập, nếu về trang chủ thì đăng nhập thành công. Tương tự với path đăng xuất. path đăng xuất.


Thiết kế template đăng nhập và đăng xuất

Bây giờ, Kteam sẽ thiết kế lại ở base.html cho 2 đường link đăng nhập và đăng xuất để người dùng có thể nhấn vào. Ta chỉnh ở mục header lại như sau:base.html cho 2 đường link đăng nhập và đăng xuất để người dùng có thể nhấn vào. Ta chỉnh ở mục header lại như sau:

Hướng dẫn logout page template bootstrap - trang đăng xuất mẫu bootstrap

Blog Làm từ Python Django

{% if user.username %}

Xin chào {{user.username}}

Đăng xuất

{% else %}

Đăng ký|Đăng nhập

{% endif %}

Kiểm tra nếu user đã đăng nhập thì hiển thị xin chào user và có đăng xuất. Kteam sửa lại thêm 1 col góc bên phải chiếm 1/12.col góc bên phải chiếm 1/12.

Nếu chưa đăng nhập thì hiển thị đăng ký và đăng nhập.

Bây giờ ta thử kiểm tra lại:

Hướng dẫn logout page template bootstrap - trang đăng xuất mẫu bootstrap

Hướng dẫn logout page template bootstrap - trang đăng xuất mẫu bootstrap

Chức năng thì khá ổn, do Kteam không tập trung thiết kế giao diện cho bài học nên các bạn có thể custom lại cho đẹp hơn.


Kết luận

Trong bài này, chúng ta đã tìm hiểu Hướng dẫn xử lý Login và Logout User.

Bài sau chúng ta sẽ cùng tìm hiểu về cách SỬ DỤNG GENERIC VIEW.

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. Và đừ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.