Kako stilizirati forme s django-crispy-formama

Najbolji način da svladate Django je koristiti ga za razvoj full-stack aplikacija. Naići ćete na mnoge fascinantne značajke kada radite s okvirom. Jedan od njih je kako renderirati forme u predlošcima pomoću hrskavih formi.

Korištenje django-crispy-forms je jedan od mnogih načina na koje možete prikazati forme u Djangu. Ovisnost vam omogućuje stvaranje obrazaca u predlošcima bez pisanja HTML koda. Možete jednostavno izraditi rasporede za višekratnu upotrebu bez muke s pisanjem koda obrasca.

Možete saznati više tako da instalirate biblioteku, zatim je konfigurirate i upotrijebite za izradu obrasca za registraciju.

Kako django-crispy-forms funkcionira

The biblioteka django-crispy-forms dolazi s ugrađenim HTML kodom koji možete prilagoditi svojim potrebama. Sadrži filtar pod nazivom |hrskav koji prikazuje oblike temeljene na divu u predlošku.

The {% hrskavo %} tagswill render forme prema specifičnoj postavci.django-crispy-forms dobro funkcionira s drugim ovisnostima o predlošcima kao što su Bootstrap i Tailwind CSS.

Pogledajmo kako to funkcionira u predlošku.

Instalirajte Crispy Forms

Počni od stvaranje Django projekta i aplikacija Zatim instalirajte najnoviju verziju django-crispy-forms koristeći Pipenv sa sljedećom naredbom:

pipenv instalirati django-hrskave-forme

Uspješna instalacija izgledat će kao na slici ispod:

Konfigurirajte django-crispy-forms u postavkama

Nakon instalacije morate registrirati hrskave forme kao ovisnost u postavkama projekta. Ako ga registrirate, biblioteka hrskavih obrazaca bit će dostupna svim aplikacijama u projektu.

U projektu postavke.py datoteku, dodajte niz 'hrskavi_oblici':

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'moja aplikacija',
'hrskavi_oblici',
]

Stvorite obrazac

Morate sinkronizirati svoj obrazac za registraciju s ugrađenim Django obrascem za kreiranje korisnika kako biste pomogli s autentifikacijom.

Ugrađeni Django provjera autentičnosti korisnika sustav obrađuje uobičajene zahtjeve poput potvrđivanja lozinki i izdavanja dozvola.

Sustav također upravlja provjerom valjanosti obrasca umjesto vas. Tako možete stvarati obrasce bez gnjavaže oko samog rukovanja provjerom valjanosti. Ako ste radili provjeru valjanosti obrazaca u drugim okvirima, znat ćete koliko to može biti glomazno. Ne s Djangom.

Modul za provjeru autentičnosti ima Korisnik model ili predmet. The Korisnik objekt je glavna komponenta sustava autentifikacije korisnika. Upravlja dozvolama, provjerom autentičnosti profila registriranih korisnika, kontrolom pristupa i još mnogo toga.

The Obrazac za kreiranje korisnika koristi ugrađeni Korisnik objekt za registraciju novih korisnika. Nasljeđuje od klase ModelForm.

Prvo uvezite obrasce iz Django modula obrazaca. Zatim uvezite Obrazac za kreiranje korisnika iz django.contrib.auth.forms. Također, uvezite ugrađeni Korisnik model iz django.contrib.auth.models. Zatim uvezite unose polja iz django ModelForma.

iz django uvoz oblicima
izdjango.pridonositi.auth.formeuvozObrazac za kreiranje korisnika
izdjango.pridonositi.auth.modeliuvozKorisnik
iz django.forme uvoz ModelForm, TextInput, EmailInput, ImageField, Textarea

Zatim stvorite registracijski objekt pod nazivom Obrazac za registraciju korisnika. Potrebno je Obrazac za kreiranje korisnika kao argument. Dodajte Korisnik polja objekata kao što su provjera autentičnosti e-pošte, korisničko ime i dvije lozinke.

razredaObrazac za registraciju korisnika(Obrazac za kreiranje korisnika):
 email = obrasci. EmailField (max_length=254, help_text='Potreban. Unesite važeću e-mail adresu.')
razredaMeta:
 model = Korisnik
 polja = ('Korisničko ime', 'elektronička pošta', 'lozinka1', 'lozinka2')

Ova polja su primarni atributi korisnika na obrascu za registraciju. To su obvezni unosi koje korisnici moraju ispuniti kako bi ih sustav autentificirao.

Stvorite funkciju prikaza

Zatim ćete stvoriti funkciju prikaza za obrazac za registraciju. Prvo uvezite funkciju renderiranja kao i Obrazac za registraciju korisnika iz obrazaca.py. Zatim uvezite Korisnik model iz django.contrib.auth.models.

Funkcija pregleda pod nazivom register preuzima Obrazac za registraciju korisnika. Prikazat će ga na registar.html šablona.

iz django.prečaci uvoz prikazati,
iz django.http uvoz HttpResponse, Http404
iz .forme uvoz Obrazac za registraciju korisnika
izdjango.pridonositi.auth.modeliuvozKorisnik
defRegistar(zahtjev):
 obrazac=Obrazac za registraciju korisnika
 kontekst={'oblik':oblik}
 vratiti render (zahtjev,'registar.html',kontekst)

Stvorite URL put

Stvorite URL put za registar.html šablona. Ovaj URL je staza za funkciju prikaza koju ste upravo stvorili. Daj mu ime Registar, tako da možete upotrijebiti ime da ga nazovete na predlošku.

iz django.urls uvoz staza
iz. uvoz pogleda
url uzorci=[
 staza ('Registar', views.register, ime='Registar'),
]

Učitaj predložak

Sada kada imate prikaz i URL putanju, možete izraditi registar.html predložak u mapi aplikacije. Koristit ćete django-crispy-forms za prikaz Obrazac za registraciju korisnika.

u registar.html predložak, proširite baza.html. The baza.html sadrži Bootstrap veze koristit ćete za stiliziranje obrasca za registraciju. Zatim učitajte django-crispy-forms s register.html pomoću oznaka predloška.

{% se proteže 'baza.html' %}
{% load crispy_forms_tags %}
{% blokiraj sadržaj %}
<div klasa="spremnik" stil="">
<div klasa="red">
<div klasa="stupac-md-2"></div>
<div klasa="stupac-md-8">
<div klasa="kartica" stil="Crna boja;">
<div klasa="tijelo kartice">
<h5 razred="kartica-naslov"><a>Registrirajte se da postanete član</a><span style="plovak: desno">Jeste li član? <a href="#" klasa="tekst-primarni">Prijavite se sada</a></span></h5>
<div klasa="kartica-tekst">
<oblik radnje="" metoda="POST" novalidirati>
 {% csrf_token %}
 {{ oblik|hrskavo}}
<tip gumba="podnijeti" klasa="btn btn-primarni btn-sm"> Registar</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

Obrazac uključuje csrf_token, koji štiti proces registracije od hakera. Prikažite obrazac s istim nazivom varijable kao u funkciji prikaza. Zatim dodajte |hrskavo filter za Django {{oblik}} varijabla. Ovo će oblik učiniti hrskavim.

Pokrenite poslužitelj. Zatim provjerite aplikaciju u pregledniku na adresi http://127.0.0.1:8000/register. Trebali biste vidjeti obrazac prikazan kao što je prikazano u nastavku:

Izradili ste obrazac za registraciju pomoću hrskavih obrazaca! Primijetite da je Django automatski dodao potvrdu u obrazac. To uključuje zahtjeve kao što su dozvole za korisničko ime i lozinku.

Da biste imali potpuni sustav prijave, dodajte logiku provjere autentičnosti funkciji pregleda. Također možete dodati stranicu za prijavu za prijavu registriranih korisnika. Korisnici bi trebali ispuniti zahtjeve za autentifikaciju da bi se prijavili u aplikaciju.

Biblioteka django-crispy-forms omogućuje brzo i jednostavno renderiranje potvrđenih obrazaca. Provjera valjanosti podataka osigurava da imate točne podatke od svojih korisnika.

Podaci su korisni u komunikaciji s korisnicima i analizi metrike izvedbe.

Zašto koristiti django-crispy-forms?

Korištenje hrskave biblioteke obrazaca za renderiranje obrazaca u Djangu izvrstan je primjer kako primijeniti princip DRY. django-crispy-forms stvara komponente za višekratnu upotrebu koje možete prikazati u predlošcima.

Dolaze s ugrađenim HTML kodom. Kod će vas uštedjeti gnjavaže oko strukturiranja i provjere valjanosti obrazaca. Hrskavi obrasci pružaju oznaku i filtar koji renderira obrasce u div formatu. Oni također pružaju mogućnost konfiguriranja i kontrole prikazanog HTML-a.

django-crispy-forms dobro radi s Django sustavom provjere autentičnosti. Možete stvoriti sustav provjere autentičnosti za provjeru svojih korisnika bez pisanja puno koda.