Hvordan style skjemaer med django-sprø-former

Den beste måten å mestre Django på er å bruke den til å utvikle fullstack-applikasjoner. Du vil komme over mange fascinerende funksjoner når du jobber med rammeverket. En av dem er hvordan du gjengir skjemaer i maler ved å bruke sprø skjemaer.

Å bruke django-crispy-forms er en av mange måter du kan gjengi skjemaer i Django. Avhengigheten lar deg lage skjemaer i maler uten å skrive HTML-kode. Du kan enkelt bygge gjenbrukbare layouter uten å måtte skrive skjemakode.

Du kan lære mer ved å installere biblioteket, deretter konfigurere det og bruke det til å lage et registreringsskjema.

Hvordan django-sprø-former fungerer

De django-crispy-forms-biblioteket leveres med innebygd HTML-kode som du kan tilpasse etter dine behov. Den inkluderer et filter kalt |sprø som gjengir div-baserte skjemaer i malen.

De {% sprø %} tags vil gjengi skjemaer i henhold til en spesifikk setup.django-crispy-forms fungerer godt med andre malavhengigheter som Bootstrap og Tailwind CSS.

La oss se hvordan det fungerer i en mal.

Installer Crispy Forms

Start med lage et Django-prosjekt og app. Installer deretter den nyeste versjonen av django-crispy-forms ved å bruke Pipenv med følgende kommando:

pipenv installere django-sprø-former

En vellykket installasjon vil se ut som bildet nedenfor:

Konfigurer django-crispy-forms i innstillingene

Etter installasjonen må du registrere sprø skjemaer som en avhengighet i prosjektinnstillingene. Ved å registrere det, vil det sprø skjemabiblioteket være tilgjengelig for alle apper i prosjektet.

I prosjektet settings.py fil, legg til strengen 'crispy_forms':

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'minapp',
'sprø_former',
]

Lag et skjema

Du må synkronisere registreringsskjemaet ditt med det innebygde Django-brukeropprettingsskjemaet for å hjelpe med autentisering.

Den innebygde Django brukerautentisering systemet håndterer vanlige krav som validering av passord og utstedelse av tillatelser.

Systemet håndterer også skjemavalidering for deg. Så du kan lage skjemaer uten å måtte håndtere validering selv. Hvis du har gjort skjemavalidering i andre rammeverk, vet du hvor tungvint det kan være. Ikke med Django.

Autentiseringsmodulen har en Bruker modell eller objekt. De Bruker objektet er hovedkomponenten i brukerautentiseringssystemet. Den håndterer tillatelser, autentisering av registrerte brukeres profiler, tilgangskontroll og mye mer.

De UserCreationForm bruker den innebygde Bruker motsette seg å registrere nye brukere. Den arver fra ModelForm-klassen.

Først importerer du skjemaer fra Django-skjemamodulen. Deretter importerer du UserCreationForm fra django.contrib.auth.forms. Importer også den innebygde Bruker modell fra django.contrib.auth.models. Importer deretter feltinndataene fra django ModelForm.

fra django import skjemaer
fradjango.contrib.auth.skjemaerimportUserCreationForm
fradjango.contrib.auth.modellerimportBruker
fra django.forms import ModelForm, TextInput, EmailInput, ImageField, Textarea

Deretter oppretter du et registreringsobjekt med navn Registrer brukerskjema. Det tar UserCreationForm som et argument. Legg til Bruker objektfelt som e-postautentisering, brukernavn og to passord.

klasseRegistrer brukerskjema(UserCreationForm):
 e-post = skjemaer. EmailField (max_length=254, help_text='Obligatorisk. Oppgi en gyldig e-post-adresse.')
klasseMeta:
 modell = Bruker
 felt = ('brukernavn', 'e-post', 'passord1', 'passord2')

Disse feltene er de primære attributtene til en bruker på registreringsskjemaet. De er obligatoriske inndata som brukere må fylle inn for at systemet skal autentisere dem.

Opprett en visningsfunksjon

Deretter oppretter du en visningsfunksjon for registreringsskjemaet. Først importerer du render-funksjonen så vel som Registrer brukerskjema fra forms.py. Importer deretter Bruker modell fra django.contrib.auth.models.

Visningsfunksjonen kalt register tar Registrer brukerskjema. Det vil gjengi det på register.html mal.

fra django.snarveier import gjengi,
fra django.http import HttpResponse, Http404
fra .skjemaer import Registrer brukerskjema
fradjango.contrib.auth.modellerimportBruker
defregistrere(be om):
 form=RegisterUserForm
 kontekst={'form':form}
 returnere gjengivelse (forespørsel,'register.html',kontekst)

Opprett URL-bane

Opprett en URL-bane for register.html mal. Denne URL-en er banen for visningsfunksjonen du nettopp opprettet. Gi den navnet registrere, slik at du kan bruke navnet til å kalle det på en mal.

fra django.urls import sti
fra. import visninger
urlpatterns=[
 sti ('registrere', views.register, navn='registrere'),
]

Last på en mal

Nå som du har visningen og URL-banen, kan du opprette register.html mal i app-mappen. Du vil bruke django-crispy-forms for å gjengi Registrer brukerskjema.

I register.html mal, utvide base.html. De base.html inneholder Bootstrap-lenker du vil bruke til å style registreringsskjemaet. Deretter laster du django-crispy-formene med register.html ved å bruke malkoder.

{% strekker 'base.html' %}
{% load crispy_forms_tags %}
{% blokker innhold %}
<div klasse="container" stil="">
<div klasse="rad">
<div klasse="col-md-2"></div>
<div klasse="col-md-8">
<div klasse="kort" stil="farge svart;">
<div klasse="kort-kropp">
<h5 klasse="kort-tittel"><en>Registrer deg for å bli medlem</en><span style="flyte: høyre">Er du medlem? <a href="#" klasse="tekst-primær">Logg inn nå</en></span></h5>
<div klasse="kort-tekst">
<form handling="" metode="POST" novalidate>
 {% csrf_token %}
 {{ form|sprø}}
<knapp type="sende inn" klasse="btn btn-primær btn-sm"> Registrere</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% sluttblokk %}

Skjemaet inkluderer csrf_token, som beskytter registreringsprosessen mot hackere. Gjengi skjemaet med samme variabelnavn som i visningsfunksjonen. Legg deretter til |sprø filter til Django {{form}} variabel. Dette vil gjengi formen som sprø form.

Kjør serveren. Sjekk deretter appen i en nettleser på http://127.0.0.1:8000/register. Du bør se skjemaet vist som illustrert nedenfor:

Du har gjengitt et registreringsskjema med sprø skjemaer! Legg merke til at Django automatisk la til validering i skjemaet. Disse inkluderer krav som brukernavn og passordtillatelser.

For å ha et komplett registreringssystem, legg til autentiseringslogikk til visningsfunksjonen. Du kan også legge til en påloggingsside for å logge på registrerte brukere. Brukere må oppfylle autentiseringskrav for å logge på appen.

Django-crispy-forms-biblioteket lar deg raskt og enkelt gjengi validerte skjemaer. Validering av data sikrer at du har nøyaktige data fra brukerne dine.

Dataene kommer godt med når du kommuniserer med brukere og analyserer ytelsesmålinger.

Hvorfor bruke django-sprø-former?

Å bruke det sprø skjemabiblioteket til å gjengi skjemaer i Django er et godt eksempel på hvordan man bruker DRY-prinsippet. django-crispy-forms lager gjenbrukbare komponenter som du kan gjengi i maler.

De kommer med innebygd HTML-kode. Koden vil spare deg for bryet med å strukturere og validere skjemaer. Sprø skjemaer gir en kode og et filter som gjengir skjemaer i et div-format. De gir også muligheten til å konfigurere og kontrollere den gjengitte HTML-en.

django-crispy-forms fungerer godt med Django-autentiseringssystemet. Du kan opprette et autentiseringssystem for å verifisere brukerne dine uten å skrive mye kode.