Allez plus loin avec le framework Django

Maintenant que nous avons vu comment créer plusieurs instances de modèles en envoyant un seul formulaire, voyons comment inclure différents formulaires, par le biais d’envois séparés, sur la même page.

Pour démontrer ceci, nous allons construire une page depuis laquelle nous modifierons et supprimerons un billet de blog.

Étape 1 : Créez les formulaires

Pour supprimer l’instance de  Blog  , créez un nouveau formulaire,  DeleteBlogForm  . Pour modifier l’instance de  Blog  , utilisez le  BlogForm  déjà créé.

Néanmoins, il nous faut un moyen de distinguer ces deux formulaires lorsque nous récupérons les données de la requête  POST  dans la vue.

Pour atteindre ce but, attachez un champ caché à chaque formulaire. Voici comment faire :

# blog/forms.py

class BlogForm(forms.ModelForm):
    edit_blog = forms.BooleanField(widget=forms.HiddenInput, initial=True)
    
    class Meta:
        model = models.Blog
        fields = ['title', 'content']
        
        
class DeleteBlogForm(forms.Form):
    delete_blog = forms.BooleanField(widget=forms.HiddenInput, initial=True)

Vous avez attaché un champ   edit_blog  et un champ   delete_blog  aux formulaires   BlogForm  et   DeleteBlogForm , respectivement. Ces champs utilisent le widget   HiddenInput   , et ne seront pas vus par l’utilisateur sur le front-end. Le choix du type de champ et de la valeur initiale est quelque peu arbitraire, vu que nous allons simplement vérifier la présence du champ dans la vue.

Étape 2 : Incluez les formulaires dans une vue

Maintenant que nous avons les formulaires, gérons-les dans une vue.

Premièrement, créez une vue  edit_blog  sans gestion de requête  POST  .

# blog/views.py

@login_required
def edit_blog(request, blog_id):
    blog = get_object_or_404(models.Blog, id=blog_id)
    edit_form = forms.BlogForm(instance=blog)
    delete_form = forms.DeleteBlogForm()
    if request.method == 'POST':
        pass
    context = {
        'edit_form': edit_form,
        'delete_form': delete_form,
}
return render(request, 'blog/edit_blog.html', context=context)

Depuis que vous avez ajouté les champs cachés aux formulaires, vous pouvez vérifier quel formulaire est envoyé en vérifiant la présence de ce champ dans les données  POST  . Puis, vous pouvez simplement gérer le formulaire comme d’habitude.

@login_required
def edit_blog(request, blog_id):
    blog = get_object_or_404(models.Blog, id=blog_id)
    edit_form = forms.BlogForm(instance=blog)
    delete_form = forms.DeleteBlogForm()
    if request.method == 'POST':
        if 'edit_blog' in request.POST:
            edit_form = forms.BlogForm(request.POST, instance=blog)
            if edit_form.is_valid():
                edit_form.save()
                return redirect('home')
             if 'delete_blog' in request.POST:
                delete_form = forms.DeleteBlogForm(request.POST)
                if delete_form.is_valid():
                    blog.delete()
                    return redirect('home')
    context = {
        'edit_form': edit_form,
        'delete_form': delete_form,
}
return render(request, 'blog/edit_blog.html', context=context)

Étape 3 : Ajoutez le gabarit

Maintenant que la vue est construite, travaillons sur le gabarit :

# blog/templates/blog/edit_blog.html
{% extends 'base.html' %}
{% block content %}
    <h2>Modifier le billet</h2>
    <form method="post">
        {{ edit_form.as_p }}
        {% csrf_token %}
        <button type="submit" >Sauvegarder</button>
    </form>
    <hr>
    <h3>Supprimer le billet ?</h3>
    <form method="post">
        {{ delete_form }}
        {% csrf_token %}
        <button type="submit" >Supprimer</button>
    </form>
{% endblock content %}

L’inclusion des champs cachés garantit que chaque formulaire n’est géré que lorsque vous avez l’intention de l’envoyer. Vous pouvez désormais inclure n’importe quelle quantité de formulaires sur la même page.

Étape 4 : Ajoutez le modèle d’URL

Ajoutez maintenant le modèle d’URL pour la page de modification du billet.

# fotoblog/urls.py
urlpatterns = [
    …
    path('blog/<int:blog_id>/edit', blog.views.edit_blog, name='edit_blog'),
]

Étape 5 : Ajoutez un lien vers la page de modification du billet

Et pour finir, ajoutez un lien vers la page de modification du billet depuis la page de visualisation du billet.

# blog/templates/blog/view_blog.html
{% extends 'base.html' %}
{% block content %}
    <h2>{{ blog.title }}</h2>
    <p><a href="{% url 'edit_blog' blog.id %}">Modifier le billet</a></p>
    <img src="{{ blog.photo.image.url }}">
    <p>{{ blog.photo.caption }}</p>
    <p>{{ blog.content }}</p>
{% endblock content %}

Et voilà, nous avons fini ! Voyons à quoi ressemble la page de modification du billet :

Elle a l’air très bien ! Vous avez remarqué les deux boutons « Sauvegarder » et « Supprimer » séparés sur la page ? Ces deux boutons vont envoyer nos deux formulaires différents. Amusez-vous à tester cette fonctionnalité !

Incluez plusieurs instances du même formulaire avec des ensembles de formulaires, ou formsets

Vous possédez maintenant deux techniques pour inclure différents formulaires sur la même page. Vous pouvez les envoyer simultanément ou séparément. Mais que se passerait-il si vous vouliez inclure le même formulaire plusieurs fois sur une même page ?

Vous pouvez utiliser des ensembles de formulaires, ou formsets. Découvrez dans la vidéo ci-dessous comment créer une page qui permettra à un utilisateur de charger plusieurs photos en même temps.

Étape 1 : Créez un formset dans une vue avec  formset_factory 

Vous avez déjà  PhotoForm  qui peut instancier le modèle  Photo  . Vous pouvez réutiliser ce formulaire plutôt que d’en créer un nouveau.

Pour générer un formset avec ce formulaire, utilisez la méthodeformset_factoryque vous trouverez dans   django.forms. Cette méthode prend la classe formulaire (« form ») comme premier argument, puis un autre argument,extra, qui définit combien d’instances du formulaire vous voulez faire générer. Cette fonction « factory » (usine) renvoie une  classe, que vous devrez ensuite instancier dans la vue.

Concrètement, voici de quoi ça a l’air :

# blog/views.py
from django.forms import formset_factory

@login_required
def create_multiple_photos(request):
    PhotoFormSet = formset_factory(forms.PhotoForm, extra=5)
    formset = PhotoFormSet()
    if request.method == 'POST':
        pass
    return render(request, 'blog/create_multiple_photos.html', {'formset': formset})

Pour traiter les données  POST , vous pouvez exécuter la méthode  is_valid()   sur le  formset  , exactement comme vous pouvez le faire sur un formulaire. Puis, vous pouvez itérer à travers les formulaires dans le  formset  en utilisant une boucle. Vous pouvez les gérer comme vous le feriez habituellement. Leformset  ne sera pas invalidé si des formulaires individuels sont vides, alors vérifions si un formulaire contient des données avant de le sauvegarder, comme ceci :

# blog/views.py
@login_required
def create_multiple_photos(request):
    PhotoFormSet = formset_factory(forms.PhotoForm, extra=5)
    formset = PhotoFormSet()
    if request.method == 'POST':
        formset = PhotoFormSet(request.POST, request.FILES)
        if formset.is_valid():
            for form in formset:
                if form.cleaned_data:
                    photo = form.save(commit=False)
                    photo.uploader = request.user
                    photo.save()
            return redirect('home')
    return render(request, 'blog/create_multiple_photos.html', {'formset': formset})

Ceci sauvegardera tous les formulaires, avant de nous rediriger vers la page d’accueil. Et maintenant, ajoutons un gabarit.

Étape 2 : Créez le gabarit

Il y a deux méthodes pour inclure un formset dans un gabarit. La plus simple : inclure le  formset  comme vous le feriez pour un formulaire.

# blog/templates/blog/create_multiple_photos.html
{% extends 'base.html' %}
{% block content %}
    <h2>Télécharger plusieurs photos</h2>
    <form method="post" enctype="multipart/form-data">
        {{ formset.as_p }}
        {% csrf_token %}
        <button type="submit" >Publier</button>
    </form>
{% endblock content %}

Vous voudrez peut-être présenter chaque formulaire du formset individuellement. Pour ce faire, n’oubliez pas d’inclure  {{ formset.management_form }}  dans les balises  <form>. Le  management_form   n’inclut rien qui sera vu par l’utilisateur sur le front-end, mais il comprend certaines métadonnées dont Django a besoin pour traiter le formset, par exemple le nombre de formulaires dans le formset.

Pour inclure un formset dans une page tout en gérant l’affichage de chaque formulaire, vous pouvez ajouter :

# blog/templates/blog/create_multiple_photos.html
{% extends 'base.html' %}
{% block content %}
    <h2>Télécharger des photos</h2>
    <form method="post" enctype="multipart/form-data">
        {{ formset.management_form }}
        {% csrf_token %}
        {% for form in formset %}
            {{ form.as_p }}
        {% endfor %}
        <button type="submit" >Publier</button>
    </form>
{% endblock content %}

Étape 3 : Ajoutez le modèle d’URL

À nouveau, vous devez ajouter le modèle d’URL.

# fotoblog/urls.py
urlpatterns = [
    …
    path('photo/upload-multiple/', blog.views.create_multiple_photos,
    name='create_multiple_photos'),
]

Étape 4 : Ajoutez un lien dans la barre latérale

Et un lien dans la barre latérale.

# templates/base.html
...
<p><a href="{% url 'photo_upload' %}">Télécharger une photo</a></p>
<p><a href="{% url 'create_multiple_photos' %}">Télécharger plusieurs photos</a></p>
<p><a href="{% url 'upload_profile_photo' %}">Changer la photo de profil</a></p>
...

Et c’est tout ! Vous pouvez maintenant inclure plusieurs instances du même formulaire sur la même page. Voyons de quoi ça a l’air :

Testez cette possibilité, avant de me retrouver au prochain chapitre. Nous y verrons comment surcharger des méthodes de modèle.

En résumé 

• Vous pouvez gérer plusieurs formulaires séparés sur une seule page, en incluant un champ caché qui identifie le formulaire envoyé.

• Vous pouvez utiliser des ensembles de formulaires, dits formsets, pour créer plusieurs instances différentes du même formulaire sur une seule page.

Maintenant que vous savez gérer plusieurs formulaires dans une seule vue, vous pouvez apprendre à étendre des modèles avec des méthodes personnalisées !