Cách tạo kiểu cho biểu mẫu với django-crispy-forms

Cách tốt nhất để thành thạo Django là sử dụng nó để phát triển các ứng dụng full-stack. Bạn sẽ bắt gặp nhiều tính năng hấp dẫn khi làm việc với framework. Một trong số đó là cách hiển thị biểu mẫu trong mẫu bằng cách sử dụng biểu mẫu giòn.

Sử dụng django-crispy-forms là một trong nhiều cách bạn có thể hiển thị biểu mẫu trong Django. Phần phụ thuộc cho phép bạn tạo biểu mẫu trong mẫu mà không cần viết mã HTML. Bạn có thể dễ dàng xây dựng các bố cục có thể tái sử dụng mà không gặp rắc rối khi viết mã biểu mẫu.

Bạn có thể tìm hiểu thêm bằng cách cài đặt thư viện, sau đó định cấu hình và sử dụng nó để tạo biểu mẫu đăng ký.

Cách thức hoạt động của django-crispy-forms

Thư viện django-crispy-forms đi kèm với mã HTML tích hợp mà bạn có thể tùy chỉnh theo nhu cầu của mình. Nó bao gồm một bộ lọc có tên |giòn hiển thị các biểu mẫu dựa trên div trong mẫu.

Các {% giòn %} thẻ sẽ hiển thị các biểu mẫu theo một thiết lập cụ thể. django-crispy-forms hoạt động tốt với các phần phụ thuộc mẫu khác như Bootstrap và Tailwind CSS.

Hãy xem cách nó hoạt động trong một mẫu.

Cài đặt các hình thức giòn

Bắt đầu bằng cách tạo một dự án và ứng dụng Django. Sau đó cài đặt phiên bản mới nhất của django-crispy-forms bằng Pipenv bằng lệnh sau:

pipenv install django-crispy-forms

Cài đặt thành công sẽ như hình bên dưới:

Định cấu hình django-crispy-forms trong Cài đặt

Sau khi cài đặt, bạn phải đăng ký các biểu mẫu giòn dưới dạng phụ thuộc trong cài đặt dự án. Bằng cách đăng ký nó, thư viện biểu mẫu giòn sẽ có sẵn cho tất cả các ứng dụng trong dự án.

Trong dự án cài đặt.py tập tin, thêm chuỗi ‘giòn_forms’:

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'myapp',
'crispy_forms',
]

Tạo một biểu mẫu

Bạn cần đồng bộ hóa biểu mẫu đăng ký của mình với biểu mẫu tạo người dùng Django tích hợp sẵn để trợ giúp xác thực.

Hệ thống xác thực người dùng Django tích hợp xử lý các yêu cầu phổ biến như xác thực mật khẩu và cấp quyền.

Hệ thống cũng xử lý xác thực biểu mẫu cho bạn. Vì vậy, bạn có thể tạo biểu mẫu mà không gặp rắc rối khi tự xử lý xác thực. Nếu bạn đã thực hiện xác thực biểu mẫu trong các khung công tác khác, bạn sẽ biết nó có thể cồng kềnh như thế nào. Không phải với Django.

Mô-đun xác thực có một Người sử dụng mô hình hoặc đối tượng. Các Người sử dụng đối tượng là thành phần chính của hệ thống xác thực người dùng. Nó xử lý các quyền, xác thực hồ sơ của người dùng đã đăng ký, kiểm soát truy cập, v.v.

Các UserCreationForm sử dụng tích hợp Người sử dụng đối tượng để đăng ký người dùng mới. Nó kế thừa từ lớp ModelForm.

Đầu tiên, nhập biểu mẫu từ mô-đun biểu mẫu Django. Sau đó, nhập khẩu UserCreationForm từ django.contrib.auth.forms. Ngoài ra, nhập bản dựng sẵn Người sử dụng mô hình từ django.contrib.auth.models. Sau đó nhập các trường đầu vào từ django ModelForm.

from django import forms
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User
from django.forms import ModelForm, TextInput, EmailInput,ImageField, Textarea

Tiếp theo, tạo một đối tượng đăng ký có tên Đăng kýUserForm. Nó mất UserCreationForm như một lý lẽ. thêm Người sử dụng các trường đối tượng như xác thực email, tên người dùng và hai mật khẩu.

class RegisterUserForm(UserCreationForm):
email = forms.EmailField(max_length=254, help_text='Required. Enter a valid email address.')
class Meta:
model = User
fields = ('username', 'email', 'password1', 'password2')

Các trường này là thuộc tính chính của người dùng trên biểu mẫu đăng ký. Chúng là đầu vào bắt buộc mà người dùng phải điền vào để hệ thống xác thực chúng.

Tạo một chức năng xem

Tiếp theo, bạn sẽ tạo chức năng xem cho biểu mẫu đăng ký. Đầu tiên, nhập chức năng kết xuất cũng như Đăng kýUserForm từ biểu mẫu.py. Sau đó nhập khẩu Người sử dụng mô hình từ django.contrib.auth.models.

Chức năng xem có tên register lấy Đăng kýUserForm. Nó sẽ hiển thị nó trên register.html mẫu.

from django.shortcuts import render,
from django.http import HttpResponse,Http404
from .forms import RegisterUserForm
from django.contrib.auth.models import User
def register(request):
form=RegisterUserForm
context={'form':form}
return render(request,'register.html',context)

Tạo đường dẫn URL

Tạo một đường dẫn URL cho register.html mẫu. URL này là đường dẫn cho chức năng xem mà bạn vừa tạo. Đặt tên cho nó Đăng kývì vậy bạn có thể sử dụng tên để gọi nó trên mẫu.

from django.urls import path
from . import views
urlpatterns=[
path ('register', views.register, name='register'),
]

Tải trên một mẫu

Bây giờ bạn đã có chế độ xem và đường dẫn URL, bạn có thể tạo register.html mẫu trong thư mục ứng dụng. Bạn sẽ sử dụng django-crispy-forms để hiển thị Đăng kýUserForm.

bên trong register.html mẫu, mở rộng cơ sở.html. Các cơ sở.html chứa các liên kết Bootstrap mà bạn sẽ sử dụng để tạo kiểu cho biểu mẫu đăng ký. Sau đó tải django-crispy-forms bằng register.html bằng các thẻ mẫu.

{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% block content %}
<div class="container" style="">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="card" style="color:black;">
<div class="card-body">
<h5 class="card-title"><a>Register to be a member</a> <span style="float:right">Are you a member? <a href="#" class="text-primary">Login now</a></span></h5>
<div class="card-text">
<form action="" method="POST" novalidate>
{% csrf_token %}
{{ form|crispy}}
<button type="submit" class="btn btn-primary btn-sm"> Register</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

Biểu mẫu bao gồm các csrf_token, giúp bảo vệ quá trình đăng ký khỏi tin tặc. Kết xuất biểu mẫu có cùng tên biến như trong hàm xem. Sau đó thêm |giòn bộ lọc vào Django {{hình thức}} Biến đổi. Điều này sẽ làm cho biểu mẫu ở dạng giòn.

Chạy máy chủ. Sau đó, kiểm tra ứng dụng trong trình duyệt tại http://127.0.0.1:8000/register. Bạn sẽ thấy biểu mẫu được hiển thị như minh họa bên dưới:

Bạn đã kết xuất một biểu mẫu đăng ký bằng cách sử dụng biểu mẫu giòn! Lưu ý rằng Django đã tự động thêm xác thực vào biểu mẫu. Chúng bao gồm các yêu cầu như quyền truy cập tên người dùng và mật khẩu.

Để có một hệ thống đăng ký hoàn chỉnh, hãy thêm logic xác thực vào chức năng xem. Bạn cũng có thể thêm một trang đăng nhập để đăng nhập người dùng đã đăng ký. Người dùng phải đáp ứng các yêu cầu xác thực để đăng nhập vào ứng dụng.

Thư viện django-crispy-forms cho phép bạn hiển thị các biểu mẫu đã được xác thực một cách nhanh chóng và dễ dàng. Xác thực dữ liệu đảm bảo bạn có dữ liệu chính xác từ người dùng của mình.

Dữ liệu có ích khi giao tiếp với người dùng và phân tích các chỉ số hiệu suất.

Tại sao nên sử dụng django-crispy-forms?

Sử dụng thư viện biểu mẫu giòn để hiển thị biểu mẫu trong Django là một ví dụ tuyệt vời về cách áp dụng nguyên tắc DRY. django-crispy-forms tạo các thành phần có thể tái sử dụng mà bạn có thể hiển thị trong các mẫu.

Chúng đi kèm với mã HTML tích hợp. Mã này sẽ giúp bạn tránh khỏi những rắc rối trong việc cấu trúc và xác thực các biểu mẫu. Biểu mẫu giòn cung cấp thẻ và bộ lọc hiển thị biểu mẫu ở định dạng div. Chúng cũng cung cấp khả năng định cấu hình và kiểm soát HTML được hiển thị.

django-giòn-hình thức hoạt động tốt với hệ thống xác thực Django. Bạn có thể tạo một hệ thống xác thực để xác minh người dùng của mình mà không cần viết nhiều mã.