Hướng dẫn html form python - html dạng python

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 UPLOAD FILE ẢNH VÀO TRANG WEB ĐƯỢC LÀM BẰNG DJANGO MVC.

Trong bài này Kteam hướng dẫn cách tạo Form đăng ký tài khoản trong Python Django.tạo Form đăng ký tài khoản 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

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

  • Form trong Django là gì?
  • Tạo Form cho User Django
  • Tạo đường dẫn đăng ký tài khoản

Form trong Django là gì?

Trong HTML, Form là 1 tập hợp các tag nằm trong tag ... để cho phép người dùng trang web có thể làm những việc như điền thông tin, chọn option,... và gửi thông tin đến server.

Django cung cấp một loạt tool và thư viện để giúp chúng ta có thể xây dựng những forms để quản lý thông tin mà user gửi đi, thực hiện và trả về thông tin đến người gửi.


Tạo Form cho User Django

Để tạo form cho user Django, ta sẽ kiểm tra xem bảng user của Django được thiết kế field như thế nào. Ta sẽ vào Admin, ở bảng Users vào chọn thông tin user admin mà mình đã tạo để kiểm tra:user Django, ta sẽ kiểm tra xem bảng user của Django được thiết kế field như thế nào. Ta sẽ vào Admin, ở bảng Users vào chọn thông tin user admin mà mình đã tạo để kiểm tra:

Hướng dẫn html form python - html dạng python

Có khá nhiều field của bảng user nhưng ta sẽ tập trung ở những phần sau:field của bảng user nhưng ta sẽ tập trung ở những phần sau:

  • username: là tên tài khoản : là tên tài khoản
  • password: mật khẩu tài khoản (ở đây hệ thống đã mã hóa mật khẩu) : mật khẩu tài khoản (ở đây hệ thống đã mã hóa mật khẩu)
  • first name và last name: họ và tên của user name và last name: họ và tên của user
  • email: địa chỉ email của user : địa chỉ email của user
  • active: option kích hoạt tài khoản, trường hợp bạn chặn user không có sử dụng nữa (nên tắt active thay vì xóa user) : option kích hoạt tài khoản, trường hợp bạn chặn user không có sử dụng nữa (nên tắt active thay vì xóa user)
  • staff status: option kiểm tra user có phải là nhân viên của hệ thống, khi được chọn đồng nghĩa user có quyền đăng nhập vào admin và sẽ có vài quyền tác động admin theo quyền hạn admin được cấp cho : option kiểm tra user có phải là nhân viên của hệ thống, khi được chọn đồng nghĩa user có quyền đăng nhập vào admin và sẽ có vài quyền tác động admin theo quyền hạn admin được cấp cho
  • superuser status: cho phép là super user không, như trường hợp Kteam tạo tài khoản admin chính là super user : cho phép là super user không, như trường hợp Kteam tạo tài khoản admin chính là super user

Có những phần khác các bạn có thể tham khảo:

  • groups: là nhóm user để admin có thể đưa user vào nhóm nào, mỗi group admin có thể phân quyền một số chức năng nhất định dành cho nhóm đó. Phân quyền thương là quyền hạn như cho phép thêm, sửa hay xóa đến bảng nào đó. : là nhóm user để admin có thể đưa user vào nhóm nào, mỗi group admin có thể phân quyền một số chức năng nhất định dành cho nhóm đó. Phân quyền thương là quyền hạn như cho phép thêm, sửa hay xóa đến bảng nào đó.
  • user permission: quyền hạn user, cũng là 1 cách phân quyền theo cá nhân user thay vì group. : quyền hạn user, cũng là 1 cách phân quyền theo cá nhân user thay vì group.
  • last join: lần đăng nhập cuối cùng : lần đăng nhập cuối cùng
  • date joined: ngày tham gia : ngày tham gia

Bây giờ Kteam sẽ tạo Form có các field điền thông tin username, password và email để tạo user:username, passwordemail để tạo user:

  1. Tạo file forms.py ở app home: forms.py ở app home:


Hướng dẫn html form python - html dạng python

  1. Ở file forms. Ta sẽ tạo class RegistrationForm kế thừa thư viện forms.Form và khai báo các field điền thông tin RegistrationForm kế thừa thư viện forms.Form và khai báo các field điền thông tin
from django import forms:

class RegistrationForm(forms.Form):
    username = forms.CharField(label='Tài khoản', malength=30)
    email = forms.EmailField(label='Email')
    password1 = forms.CharField(label='Mật khẩu', widget=forms.PasswordInput())
    password2 = forms.CharField(label='Nhập lại mật khẩu', widget=forms.PasswordInput())

Tiếp theo, ta sẽ phải viết các function kiểm tra giá trị nhập vào của người dùng. Ta sẽ dùng cú pháp đặt tên bên dưới để khi kiểm tra thì form sẽ biết để gọi các function đó:function kiểm tra giá trị nhập vào của người dùng. Ta sẽ dùng cú pháp đặt tên bên dưới để khi kiểm tra thì form sẽ biết để gọi các function đó:

 [ clean_ ]

from django import forms
import re
from django.contrib.auth.models import User

class RegistrationForm(forms.Form):
    username = forms.CharField(label='Tài khoản', malength=30)
    email = forms.EmailField(label='Email')
    password1 = forms.CharField(label='Mật khẩu', widget=forms.PasswordInput())
    password2 = forms.CharField(label='Nhập lại mật khẩu', widget=forms.PasswordInput())

    def clean_password2(self):
        if 'password1' in self.cleaned_data:
            password1 = self.cleaned_data['password1']
            password2 = self.cleaned_data['password2']
            if password1 == password2 and password1:
                return password2
        raise forms.ValidationError("Mật khẩu không hợp lệ")

    def clean_username(self):
        username = self.cleaned_data['username']
        if not re.search(r'^\w+&', username):
            raise forms.ValidationError("Tên tài khoản có kí tự đặc biệt")
        try:
            User.objects.get(username=username)
        except User.DoesNotExist:
            return username
        raise forms.ValidationError("Tài khoản đã tồn tại")
  1. clean_password2: phương thức kiểm tra dữ liệu nhập lại mật khẩu, trước tiên kiểm tra password1 đã nhập chưa, nếu rồi thì lấy thông tin password1 và password2 thông qua thuộc tính cleaned_data để kiểm tra. Nếu 2 giá trị bằng nhau và không có dấu cách thì xem như hợp lệ, lúc đó ta sẽ return giá trị password2 để báo Form là thông tin không sai. Ngược lại toàn bộ điều kiện thì raise lỗi là “Mật khẩu không hợp lệ”: phương thức kiểm tra dữ liệu nhập lại mật khẩu, trước tiên kiểm tra password1 đã nhập chưa, nếu rồi thì lấy thông tin password1password2 thông qua thuộc tính cleaned_data để kiểm tra. Nếu 2 giá trị bằng nhau và không có dấu cách thì xem như hợp lệ, lúc đó ta sẽ return giá trị password2 để báo Form là thông tin không sai. Ngược lại toàn bộ điều kiện thì raise lỗi là “Mật khẩu không hợp lệ”
  2. clean_username: phương thức kiểm tra username, đầu tiên lấy giá trị username ra, kiểm tra giá trị có kí tự đặc biệt không, nếu có thì trả lỗi. Nếu không thì kiểm tra giá trị username đã tồn tại trong bảng user chưa để tránh trùng tên, ta để trong try except, nếu except bắt lỗi User.DoesNotExist thì chưa có tài khoản nào trùng tên thì return giá trị về. Nếu không có lỗi đồng nghĩa đã tồn tại username đó, ta raise lỗi là “Tài khoản đã tồn tại”: phương thức kiểm tra username, đầu tiên lấy giá trị username ra, kiểm tra giá trị có kí tự đặc biệt không, nếu có thì trả lỗi. Nếu không thì kiểm tra giá trị username đã tồn tại trong bảng user chưa để tránh trùng tên, ta để trong try except, nếu except bắt lỗi User.DoesNotExist thì chưa có tài khoản nào trùng tên thì return giá trị về. Nếu không có lỗi đồng nghĩa đã tồn tại username đó, ta raise lỗi là “Tài khoản đã tồn tại”

Tiếp theo, Kteam sẽ tạo function save để tạo user:  save để tạo user:  

from django import forms
import re
from django.contrib.auth.models import User

class RegistrationForm(forms.Form):
    username = forms.CharField(label='Tài khoản', malength=30)
    email = forms.EmailField(label='Email')
    password1 = forms.CharField(label='Mật khẩu', widget=forms.PasswordInput())
    password2 = forms.CharField(label='Nhập lại mật khẩu', widget=forms.PasswordInput())

    def clean_password2(self):
        if 'password1' in self.cleaned_data:
            password1 = self.cleaned_data['password1']
            password2 = self.cleaned_data['password2']
            if password1 == password2 and password1:
                return password2
        raise forms.ValidationError("Mật khẩu không hợp lệ")

    def clean_username(self):
        username = self.cleaned_data['username']
        if not re.search(r'^\w+$', username):
            raise forms.ValidationError("Tên tài khoản có kí tự đặc biệt")
        try:
            User.objects.get(username=username)
        except User.DoesNotExist:
            return username
        raise forms.ValidationError("Tài khoản đã tồn tại")

    def save(self):
        User.objects.create_user(username=self.cleaned_data['username'], email=self.cleaned_data['email'], password=self.cleaned_data['password1'])

Tạo đường dẫn đăng ký tài khoản

Sau khi tạo form xong, Kteam sẽ tạo đường dẫn đăng ký tài khoản. 

Đầu tiên ta sẽ tạo hàm register trong view app homeregister trong view app home

from .forms import RegistrationForm
from django.http import HttpResponseRedirect 

def register(request):
    form = RegistrationForm()
    if request.method == 'POST':
        form = RegistrationForm(request.POST)
        if form.is_valid():
            form.save()
            return HttpResponseRedirect('/')
    return render(request, 'pages/register.html', {'form': form})
  • import RegistrationForm và HttpResponseRedirectRegistrationForm HttpResponseRedirect
  • khởi tạo instance từ class RegistrationForminstance từ class RegistrationForm
  • nếu method của request là POST có nghĩa ở trạng thái user đã gửi dữ liệu từ người dùng. Nếu không thì chỉ là phương thức GET bình thường, ta sẽ đưa form vào template để hiển thị form cho user nhập vào POST có nghĩa ở trạng thái user đã gửi dữ liệu từ người dùng. Nếu không thì chỉ là phương thức GET bình thường, ta sẽ đưa form vào template để hiển thị form cho user nhập vào
  • nếu là method POST, ta sẽ lấy dữ liệu người dùng gửi thông qua request.POST, ta đưa vào phương thức khởi tạo  RegistrationFormPOST, ta sẽ lấy dữ liệu người dùng gửi thông qua request.POST, ta đưa vào phương thức khởi tạo  RegistrationForm
  • từ instance form được khởi tạo lại, ta sẽ gọi phương thức is_valid, phương thức này sẽ gọi tất cả các phương thức ‘clean’ để kiểm tra dữ liệu đầu vào có hợp lệ không instance form được khởi tạo lại, ta sẽ gọi phương thức is_valid, phương thức này sẽ gọi tất cả các phương thức ‘clean’ để kiểm tra dữ liệu đầu vào có hợp lệ không
  • nếu phương thức is_valid trả về true thì ta sẽ gọi phương thức save ta đã viết phía trên để tạo ra user mới, sau đó redirect về trang chủ. is_valid trả về true thì ta sẽ gọi phương thức save ta đã viết phía trên để tạo ra user mới, sau đó redirect về trang chủ.
  • nếu không hợp lệ thì form sẽ có những error để thông báo lý do lỗi, thì sẽ chạy lại hàm render để template hiển thị lỗi ra cho người dùng. error để thông báo lý do lỗi, thì sẽ chạy lại hàm render để template hiển thị lỗi ra cho người dùng.

Bây giờ, ta sẽ thiết kế template

<!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>Document</title>
</head>
<body>
    <center>
        <form action="." method="POST">
            {% csrf_token %}
            {{form.as_p}}
            <input type="submit" value="Đăng ký"/>
        </form>
    </center>
</body>
</html>
  • Ta tạo tag form có action=”.” đồng nghĩa khi nhấn vào submit form thì gọi là url hiện tại, tuy nhiên sẽ dùng method POST để cho server biết là client vừa gửi yêu cầu đăng ký tài khoản action=”.” đồng nghĩa khi nhấn vào submit form thì gọi là url hiện tại, tuy nhiên sẽ dùng method POST để cho server biết là client vừa gửi yêu cầu đăng ký tài khoản
  • Kteam thêm {% csrf_token %} để tạo bảo mật tránh kỹ thuật tấn công csrf, các bạn nào muốn quan tâm về bảo mật thì có thể tự tìm hiểu. Ở Django, các form bắt buộc có đoạn mã này {% csrf_token %} để tạo bảo mật tránh kỹ thuật tấn công csrf, các bạn nào muốn quan tâm về bảo mật thì có thể tự tìm hiểu. Ở Django, các form bắt buộc có đoạn mã này
  • ta gọi form được truyền vào từ render, dùng as_p để các field xuống dòng render, dùng as_p để các field xuống dòng
  • thêm input type là submit để gửi submit forminput typesubmit để gửi submit form

Cuối cùng là tạo đường dẫn url

urlpatterns = [
   path('', views.index),
   path('contact/', views.contact, name='contact'),
   path('register/', views.register, name="register"),
]

Bây giờ, ta sẽ khởi động server và vào đường dẫn bên dưới sẽ thấy form được Django thiết kế ra:

http://localhost:8000/register/

Hướng dẫn html form python - html dạng python

Tiếp theo, Kteam cố tình nhập lỗi để xem form có hiện cảnh báo không:

Hướng dẫn html form python - html dạng python

Cuối cùng, Kteam sẽ nhập đúng thông tin để user có được tạo ra không:

Hướng dẫn html form python - html dạng python

Hướng dẫn html form python - html dạng python


Kết luận

Trong bài này, chúng ta đã tìm hiểu cách Tạo Form đăng ký tài khoản.

Bài sau chúng ta sẽ cùng tìm hiểu về cách HƯỚNG DẪN XỬ LÝ LOGIN VÀ LOGOUT USER

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.