Exercice - Implémenter des vues génériques pour modifier des données

Effectué

Pour permettre aux utilisateurs d’inscrire de nouveaux chiens auprès d’un refuge, nous allons utiliser CreateView.

Mettre à jour le modèle pour prendre en charge get_absolute_url

Commençons par mettre à jour le modèle pour prendre en charge get_absolute_url.

  1. Dans Visual Studio Code, ouvrez dog_shelters/models.py.

  2. Ajoutez le code suivant sous la ligne # TODO: Import reverse pour importer la fonction reverse.

    # TODO: Import reverse
    from django.urls import reverse
    
  3. Ajoutez le code suivant à la classe Dog immédiatement en dessous de la ligne qui lit # TODO: Add get_absolute_url pour lire le chemin de dog_detail dans URLconf et passer l’ID en tant que paramètre.

        # TODO: Add get_absolute_url
        def get_absolute_url(self):
            return reverse('dog_detail', kwargs={"pk": self.pk})
    

Important

Souvenez-vous que Python gère les boîtiers avec des onglets plutôt que des accolades ({ }). En raison de ce fait, get_absolute_url doit être au même niveau de tabulation que le commentaire #TODO. Vous pouvez vous référer aux fichiers dans le répertoire de la solution pour afficher le projet terminé.

Créer DogCreateView

Créons à présent DogCreateView pour permettre à quelqu’un d’inscrire un chien.

  1. Dans Visual Studio Code, ouvrez dog_shelters/views.py.

  2. À la fin de views.py, ajoutez le code suivant pour créer DogCreateView.

    class DogCreateView(generic.CreateView):
        model = models.Dog
        template_name = 'dog_form.html'
        fields = ['shelter', 'name', 'description']
    

Nous définissons le modèle avec Dog, notre template avec dog_form.html et la liste des champs qui pourront être modifiés.

Notes

L’ordre dans lequel vous listez les champs correspond à l’ordre dans lequel ils apparaîtront dans le formulaire.

Inscrire la route

Une fois notre vue créée, nous allons inscrire la route dans notre URLconf.

  1. Dans Visual Studio Code, ouvrez dog_shelters/urls.py.

  2. Sous la ligne # TODO: Register create view, ajoutez le code suivant pour inscrire la route.

    # TODO: Register create view
    path('dog/register', views.DogCreateView.as_view(), name='dog_register'),
    

Créer le modèle HTML

Créons le template pour héberger notre formulaire.

  1. Dans Visual Studio Code, créez un fichier dans dog_shelters/templates nommé dog_form.html.

  2. Ajoutez le code suivant à dog_form.html pour créer le template qui hébergera notre formulaire.

    {% extends 'base.html' %}
    
    {# TODO: Register crispy_forms_tags #}
    
    {% block title %}
    Register dog at shelter
    {% endblock %}
    
    {% block content %}
    <h2>Register dog at shelter</h2>
    <form method="POST">
        {% csrf_token %}
    
        {{ form.as_p }}
    
        <button type="submit" class="btn btn-primary">Save</button>
    </form>
    {% endblock %}
    

Notes

Créons une note pour ne pas oublier d’ajouter une bibliothèque, ce que nous ferons dans l’exercice suivant.

Créons un lien sur la page de la liste des refuges, qui est actuellement la page d’accueil de notre application, vers la page d’inscription que nous avons créée.

  1. Dans Visual Studio Code, ouvrez dog_shelters/templates/shelter_list.html.

  2. Sous la ligne {# TODO: Add link to registration page #}, ajoutez le code suivant pour créer le lien.

    {# TODO: Add link to registration page #}
    <div>
        <a href="{% url 'dog_register' %}">Register a dog available for adoption</a>
    </div>
    

Tester la page

Voyons notre page en action.

  1. Sélectionnez Fichier>Tout enregistrer pour enregistrer tous les fichiers.

  2. Dans votre navigateur, accédez à http://localhost:8000.

  3. Sélectionnez Register a dog available for adoption (Inscrire un chien disponible pour l’adoption).

    Vous devriez maintenant voir le formulaire.

    Screenshot of the register dog page, with the drop-down list for Shelter highlighted.

    Notez que notre relation de clé étrangère devient une liste déroulante.

  4. Choisissez un refuge, puis ajoutez un nom du chien et sa description.

  5. Sélectionnez Enregistrer.

    Vous êtes maintenant redirigé vers la page de détails de votre chien !

Vous venez de créer un formulaire de création avec CreateView dans Django.