Formulieren stylen met django-crispy-forms

De beste manier om Django onder de knie te krijgen, is door het te gebruiken om full-stack applicaties te ontwikkelen. U zult veel fascinerende functies tegenkomen wanneer u met het raamwerk werkt. Een daarvan is hoe formulieren in sjablonen kunnen worden weergegeven met behulp van knapperige formulieren.

Het gebruik van django-crispy-forms is een van de vele manieren waarop u formulieren in Django kunt weergeven. Door de afhankelijkheid kunt u formulieren in sjablonen maken zonder HTML-code te schrijven. U kunt eenvoudig herbruikbare lay-outs bouwen zonder het gedoe van het schrijven van formuliercode.

U kunt meer leren door de bibliotheek te installeren, vervolgens te configureren en te gebruiken om een ​​registratieformulier te maken.

Hoe django-crispy-forms werkt

De django-crispy-forms-bibliotheek wordt geleverd met ingebouwde HTML-code die u kunt aanpassen aan uw behoeften. Het bevat een filter met de naam

|krokant dat div-gebaseerde formulieren in de sjabloon weergeeft.

De {% krokant %} tags geven formulieren weer volgens een specifieke instelling. django-crispy-forms werkt goed met andere sjabloonafhankelijkheden zoals Bootstrap en Tailwind CSS.

Laten we eens kijken hoe dat werkt in een sjabloon.

Installeer knapperige formulieren

Start op een Django-project maken en app. Installeer vervolgens de nieuwste versie van django-crispy-forms met behulp van Pipenv met de volgende opdracht:

pipenv installeren django-krokante-vormen

Een succesvolle installatie ziet er uit zoals op onderstaande afbeelding:

Configureer django-crispy-forms in de Instellingen

Na de installatie moet u crispy-formulieren als afhankelijkheid registreren in de projectinstellingen. Door deze te registreren, is de bibliotheek met knapperige formulieren beschikbaar voor alle apps in het project.

In het project instellingen.py bestand, voeg de string toe 'crispy_forms':

GEÏNSTALLEERDE_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessies',
'django.contrib.berichten',
'django.contrib.staticfiles',
'mijnapp',
'knapperige_vormen',
]

Maak een formulier

U moet uw registratieformulier synchroniseren met het ingebouwde Django-formulier voor het maken van gebruikers om te helpen bij authenticatie.

De ingebouwde Django-gebruikersauthenticatie systeem verwerkt algemene vereisten zoals het valideren van wachtwoorden en het verlenen van machtigingen.

Het systeem regelt ook de formuliervalidatie voor u. U kunt dus formulieren maken zonder dat u zelf de validatie hoeft af te handelen. Als je formuliervalidatie in andere frameworks hebt gedaan, weet je hoe omslachtig het kan zijn. Niet met Django.

De authenticatiemodule heeft een Gebruiker model of voorwerp. De Gebruiker object is het belangrijkste onderdeel van het gebruikersauthenticatiesysteem. Het behandelt machtigingen, authenticeert profielen van geregistreerde gebruikers, toegangscontrole en nog veel meer.

De UserCreationForm maakt gebruik van de ingebouwde Gebruiker bezwaar maken tegen het registreren van nieuwe gebruikers. Het erft van de klasse ModelForm.

Importeer eerst formulieren uit de Django-formuliermodule. Importeer vervolgens de UserCreationForm van django.contrib.auth.formulieren. Importeer ook de ingebouwde Gebruiker model van django.contrib.auth.models. Importeer vervolgens de veldinvoer van django ModelForm.

van django importeren formulieren
vandjango.bijdragen.aut.formulierenimporterenUserCreationForm
vandjango.bijdragen.aut.modellenimporterenGebruiker
van django.formulieren importeren ModelForm, TextInput, EmailInput, ImageField, Textarea

Maak vervolgens een registratieobject met de naam Registreer UserForm. Het duurt de UserCreationForm als argument. Voeg de Gebruiker objectvelden zoals e-mailauthenticatie, gebruikersnaam en twee wachtwoorden.

klasRegistreer UserForm(UserCreationForm):
 e-mail = formulieren. E-mailveld (max_length=254, help_text='Vereist. Voer een geldig e-mailadres in.')
klasMeta:
 model = Gebruiker
 velden = ('gebruikersnaam', 'e-mailen', 'wachtwoord1', 'wachtwoord2')

Deze velden zijn de primaire kenmerken van een gebruiker op het registratieformulier. Het zijn verplichte invoergegevens die gebruikers moeten invullen zodat het systeem ze kan authenticeren.

Maak een weergavefunctie

Vervolgens maak je een weergavefunctie aan voor het inschrijfformulier. Importeer eerst de renderfunctie en het Registreer UserForm van formulieren.py. Importeer dan de Gebruiker model van django.contrib.auth.models.

De weergavefunctie met de naam register neemt de Registreer UserForm. Het zal het weergeven op de registreren.html sjabloon.

van django.snelkoppelingen importeren veroorzaken,
van django.http importeren HttpReactie, Http404
van .formulieren importeren Registreer UserForm
vandjango.bijdragen.aut.modellenimporterenGebruiker
defregister(verzoek):
 form=RegistreerUserForm
 context={'formulier':formulier}
 return render (verzoek,'registreren.html',context)

URL-pad maken

Maak een URL-pad voor de registreren.html sjabloon. Deze URL is het pad voor de weergavefunctie die u zojuist hebt gemaakt. Geef het de naam register, zodat u de naam kunt gebruiken om het op een sjabloon aan te roepen.

van django.urls importeren pad
van. importeren keer bekeken
urlpatronen=[
 pad ('register', views.register, naam='register'),
]

Laad op een sjabloon

Nu u de weergave en het URL-pad hebt, kunt u het registreren.html sjabloon in de app-map. Je gebruikt django-crispy-forms om de Registreer UserForm.

In de registreren.html sjabloon, verleng de basis.html. De basis.html bevat de Bootstrap-koppelingen die u gebruikt om het registratieformulier vorm te geven. Laad vervolgens de django-crispy-forms met de register.html met behulp van sjabloontags.

{% verlengt 'basis.html' %}
{% laad crispy_forms_tags %}
{% blokinhoud %}
<div klasse="container" stijl="">
<div klasse="rij">
<div klasse="col-md-2"></div>
<div klasse="col-md-8">
<div klasse="kaart" stijl="de kleur zwart;">
<div klasse="kaartlichaam">
<h5 klasse="kaart-titel"><A>Schrijf je in om lid te worden</A><overspanningsstijl="zweven: juist">Ben je een lid? <een href="#" klasse="tekst-primair">Log nu in</A></span></h5>
<div klasse="kaart-tekst">
<vorm actie="" methode="NA" niet valideren>
 {% csrf_token %}
 {{ vorm|knapperig}}
<knoptype="indienen" klasse="btn btn-primair btn-sm"> Register</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% eindblok %}

Het formulier bevat de csrf_token, die het registratieproces beschermt tegen hackers. Geef het formulier weer met dezelfde variabelenaam als in de weergavefunctie. Voeg vervolgens de |knapperig filter naar de Django {{formulier}} variabel. Hierdoor wordt het formulier knapperig.

Voer de server uit. Controleer vervolgens de app in een browser op http://127.0.0.1:8000/register. U zou het formulier moeten zien zoals hieronder afgebeeld:

Je hebt een registratieformulier gemaakt met knapperige formulieren! Merk op dat Django automatisch validatie aan het formulier heeft toegevoegd. Deze omvatten vereisten zoals gebruikersnaam en wachtwoordmachtigingen.

Om een ​​volledig aanmeldingssysteem te hebben, voegt u authenticatielogica toe aan de weergavefunctie. U kunt ook een inlogpagina toevoegen om geregistreerde gebruikers aan te melden. Gebruikers moeten aan authenticatievereisten voldoen om zich aan te melden bij de app.

Met de django-crispy-forms-bibliotheek kunt u gevalideerde formulieren snel en eenvoudig weergeven. Door gegevens te valideren, beschikt u over nauwkeurige gegevens van uw gebruikers.

De gegevens zijn handig bij het communiceren met gebruikers en het analyseren van prestatiestatistieken.

Waarom django-crispy-forms gebruiken?

Het gebruik van de knapperige formulierenbibliotheek om formulieren in Django weer te geven, is een goed voorbeeld van hoe het DRY-principe kan worden toegepast. django-crispy-forms maakt herbruikbare componenten die u in sjablonen kunt weergeven.

Ze worden geleverd met ingebouwde HTML-code. De code bespaart u het gedoe van het structureren en valideren van formulieren. Knapperige formulieren bieden een tag en filter waarmee formulieren in een div-indeling worden weergegeven. Ze bieden ook de mogelijkheid om de gerenderde HTML te configureren en te controleren.

django-crispy-forms werkt goed met het Django-authenticatiesysteem. U kunt een authenticatiesysteem maken om uw gebruikers te verifiëren zonder veel code te hoeven schrijven.