Comment déployer son application Django sur n’importe quel serveur privé virtuel (VPS) linux ?
WePynaire
Objectifs
- Découvrir django-crispy-forms
- Approfondir la mise en forme des formulaires
- Séparer le form et la forme
Liens utiles
Le dépôt du WePynaire: https://bit.ly/wepynaire-20230130
Diapositives du WePynaire: http://bit.ly/3DxbC7r
{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% block content %}
<div class="container">
<h1 class="row">Nouvelle inscription</h1>
<form method="post" class="row">
{% csrf_token %}
{% for form in forms %}
{% crispy form %}
{% endfor %}
<button
type="submit"
class="btn btn-primary"
>Soumettre</button>
</form>
</div>
{% endblock content %}
Personnalisons un peu ce formulaire
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="border: 1px black solid; border-radius: 10px; margin-bottom: 1rem;",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="border: 1px black solid; border-radius: 10px; margin-bottom: 1rem;",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="border: 1px black solid; border-radius: 10px; margin-bottom: 1rem;",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="border: 1px black solid; border-radius: 10px; margin-bottom: 1rem;",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column("name"),
Column("username"),
),
Row(
Column("password1"),
Column("password2"),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
La mise en page est OK !
Personnalisons les champs eux-même p.ex. en modifiant le placeholder
placeholder personnalisé
...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column, Fieldset
...
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.help_text_inline = False
self.helper.layout = Layout(
Fieldset(
"Données de connexion",
Row(
Column(Field("name", placeholder="Votre nom")),
Column(Field("username", placeholder="Votre username")),
),
Row(
Column(
Field("password1", placeholder="Votre mot de passe")
),
Column(
Field(
"password2", placeholder="Répétez le mot de passe"
)
),
),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
Fieldset(
"Adresse",
Row(
Column("street", css_class="col-md-10"),
Column("street_number", css_class="col-md-2"),
),
Row("address_complement"),
Row(
Column("zip_code", css_class="col-md-4"),
Column("city"),
),
Row("country"),
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
from crispy_forms.layout import Field
Field(
"nom du champ",
css_id="ma-classe",
hx_get="valeur de hx-get",
attr2="valeur de attr2
)
Les classes de Layout (Field, Row, Column, Div, Button, etc.) peuvent recevoir des paramètres qui deviendront des attributs HTML
- css_id devient id
-
css_class devient class
-
placeholder devient placeholder
-
hx_get devient hx-get
-
hx_target devient hx-target
-
...
- css_id devient id
-
css_class devient class
-
placeholder devient placeholder
-
hx_get devient hx-get
-
hx_target devient hx-target
-
...
- css_id devient id
-
css_class devient class
-
placeholder devient placeholder
-
hx_get devient hx-get
-
hx_target devient hx-target
-
...
- css_id devient id
-
css_class devient class
-
placeholder devient placeholder
-
hx_get devient hx-get
-
hx_target devient hx-target
-
...
- css_id devient id
-
css_class devient class
-
placeholder devient placeholder
-
hx_get devient hx-get
-
hx_target devient hx-target
-
...
- css_id devient id
-
css_class devient class
-
placeholder devient placeholder
-
hx_get devient hx-get
-
hx_target devient hx-target
-
...
Séparer la structure du formulaire et sa mise en page
- form_layouts.py: mise en forme des formulaires
- forms.py: définition des formulaires
Analysons notre form_layouts.py
class UserCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'utisateur."""
def __init__(self):
super().__init__(
Fieldset(
"Données de connexion",
Row(
Column(Field("name", placeholder="Votre nom")),
Column(Field("username", placeholder="Votre username")),
),
Row(
Column(
Field("password1", placeholder="Votre mot de passe")
),
Column(
Field(
"password2", placeholder="Répétez le mot de passe"
)
),
),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'adresse."""
def __init__(self):
super().__init__(
Fieldset(
"Adresse",
Row(
Column(
Field("street", placeholder="Votre rue"),
css_class="col-md-10",
),
Column(
Field("street_number", placeholder="N°"),
css_class="col-md-2",
),
),
Row(
Field(
"address_complement",
placeholder="Votre complément d'adresse",
),
),
Row(
Column(
Field("zip_code", placeholder="Code postal"),
css_class="col-md-4",
),
Column(Field("city", placeholder="Votre ville")),
),
Row("country", placeholder="Votre pays"),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class UserCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'utisateur."""
def __init__(self):
super().__init__(
Fieldset(
"Données de connexion",
Row(
Column(Field("name", placeholder="Votre nom")),
Column(Field("username", placeholder="Votre username")),
),
Row(
Column(
Field("password1", placeholder="Votre mot de passe")
),
Column(
Field(
"password2", placeholder="Répétez le mot de passe"
)
),
),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'adresse."""
def __init__(self):
super().__init__(
Fieldset(
"Adresse",
Row(
Column(
Field("street", placeholder="Votre rue"),
css_class="col-md-10",
),
Column(
Field("street_number", placeholder="N°"),
css_class="col-md-2",
),
),
Row(
Field(
"address_complement",
placeholder="Votre complément d'adresse",
),
),
Row(
Column(
Field("zip_code", placeholder="Code postal"),
css_class="col-md-4",
),
Column(Field("city", placeholder="Votre ville")),
),
Row("country", placeholder="Votre pays"),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class UserCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'utisateur."""
def __init__(self):
super().__init__(
Fieldset(
"Données de connexion",
Row(
Column(Field("name", placeholder="Votre nom")),
Column(Field("username", placeholder="Votre username")),
),
Row(
Column(
Field("password1", placeholder="Votre mot de passe")
),
Column(
Field(
"password2", placeholder="Répétez le mot de passe"
)
),
),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'adresse."""
def __init__(self):
super().__init__(
Fieldset(
"Adresse",
Row(
Column(
Field("street", placeholder="Votre rue"),
css_class="col-md-10",
),
Column(
Field("street_number", placeholder="N°"),
css_class="col-md-2",
),
),
Row(
Field(
"address_complement",
placeholder="Votre complément d'adresse",
),
),
Row(
Column(
Field("zip_code", placeholder="Code postal"),
css_class="col-md-4",
),
Column(Field("city", placeholder="Votre ville")),
),
Row("country", placeholder="Votre pays"),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class UserCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'utisateur."""
def __init__(self):
super().__init__(
Fieldset(
"Données de connexion",
Row(
Column(Field("name", placeholder="Votre nom")),
Column(Field("username", placeholder="Votre username")),
),
Row(
Column(
Field("password1", placeholder="Votre mot de passe")
),
Column(
Field(
"password2", placeholder="Répétez le mot de passe"
)
),
),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'adresse."""
def __init__(self):
super().__init__(
Fieldset(
"Adresse",
Row(
Column(
Field("street", placeholder="Votre rue"),
css_class="col-md-10",
),
Column(
Field("street_number", placeholder="N°"),
css_class="col-md-2",
),
),
Row(
Field(
"address_complement",
placeholder="Votre complément d'adresse",
),
),
Row(
Column(
Field("zip_code", placeholder="Code postal"),
css_class="col-md-4",
),
Column(Field("city", placeholder="Votre ville")),
),
Row("country", placeholder="Votre pays"),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class UserCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'utisateur."""
def __init__(self):
super().__init__(
Fieldset(
"Données de connexion",
Row(
Column(Field("name", placeholder="Votre nom")),
Column(Field("username", placeholder="Votre username")),
),
Row(
Column(
Field("password1", placeholder="Votre mot de passe")
),
Column(
Field(
"password2", placeholder="Répétez le mot de passe"
)
),
),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'adresse."""
def __init__(self):
super().__init__(
Fieldset(
"Adresse",
Row(
Column(
Field("street", placeholder="Votre rue"),
css_class="col-md-10",
),
Column(
Field("street_number", placeholder="N°"),
css_class="col-md-2",
),
),
Row(
Field(
"address_complement",
placeholder="Votre complément d'adresse",
),
),
Row(
Column(
Field("zip_code", placeholder="Code postal"),
css_class="col-md-4",
),
Column(Field("city", placeholder="Votre ville")),
),
Row("country", placeholder="Votre pays"),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class UserCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'utisateur."""
def __init__(self):
super().__init__(
Fieldset(
"Données de connexion",
Row(
Column(Field("name", placeholder="Votre nom")),
Column(Field("username", placeholder="Votre username")),
),
Row(
Column(
Field("password1", placeholder="Votre mot de passe")
),
Column(
Field(
"password2", placeholder="Répétez le mot de passe"
)
),
),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'adresse."""
def __init__(self):
super().__init__(
Fieldset(
"Adresse",
Row(
Column(
Field("street", placeholder="Votre rue"),
css_class="col-md-10",
),
Column(
Field("street_number", placeholder="N°"),
css_class="col-md-2",
),
),
Row(
Field(
"address_complement",
placeholder="Votre complément d'adresse",
),
),
Row(
Column(
Field("zip_code", placeholder="Code postal"),
css_class="col-md-4",
),
Column(Field("city", placeholder="Votre ville")),
),
Row("country", placeholder="Votre pays"),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class UserCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'utisateur."""
def __init__(self):
super().__init__(
Fieldset(
"Données de connexion",
Row(
Column(Field("name", placeholder="Votre nom")),
Column(Field("username", placeholder="Votre username")),
),
Row(
Column(
Field("password1", placeholder="Votre mot de passe")
),
Column(
Field(
"password2", placeholder="Répétez le mot de passe"
)
),
),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
class AddressCreationLayout(Layout):
"""Mise en page pour le formulaire de création
d'adresse."""
def __init__(self):
super().__init__(
Fieldset(
"Adresse",
Row(
Column(
Field("street", placeholder="Votre rue"),
css_class="col-md-10",
),
Column(
Field("street_number", placeholder="N°"),
css_class="col-md-2",
),
),
Row(
Field(
"address_complement",
placeholder="Votre complément d'adresse",
),
),
Row(
Column(
Field("zip_code", placeholder="Code postal"),
css_class="col-md-4",
),
Column(Field("city", placeholder="Votre ville")),
),
Row("country", placeholder="Votre pays"),
# Utilisez des classes css pour le style
style="""
border: 1px black solid;
border-radius: 10px;
margin-bottom: 1rem;
""",
),
)
forms.py se simplifie
from .form_layouts import UserCreationLayout, AddressCreationLayout
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
from .form_layouts import UserCreationLayout, AddressCreationLayout
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
from .form_layouts import UserCreationLayout, AddressCreationLayout
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
class Meta(auth_forms.UserCreationForm):
model = User
fields = ("name", "username")
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = UserCreationLayout()
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
from .form_layouts import UserCreationLayout, AddressCreationLayout
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
from .form_layouts import UserCreationLayout, AddressCreationLayout
class UserCreationForm(auth_forms.UserCreationForm):
"""Formulaire de souscription pour les utilisateurs."""
class AddressCreationForm(forms.ModelForm):
"""Formulaire de création pour une adresse."""
...
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["address_type"].choices = UserAddress.AdresseRoles.choices
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = AddressCreationLayout()Des éléments de mise en page avancés
Différents frameworks CSS
La documentation de crispy-forms
https://django-crispy-forms.readthedocs.io/