VEILLE TECHNOLOGIQUE – PROJET DJANGO , Ajout et affichage de données
Dans cet article, nous allons apprendre à ajouter des données et les éditer via des formulaires.
Nous allons nous appuyer sur notre article précédent dans lequel on a appris à créer des formulaires
Table des matières
TogglePour ajouter des données à la base de données à l’aide d’un formulaire, Django nous met à disposition un type de formulaire qui va nous faciliter grandement la tâche.
Ce type de formulaire est le « forme.ModelForm »
Pour notre exemple, je vais réutiliser le formulaire créé précédemment en modifiant un peu le modèle Article pour que ce soit plus simple.
Voici le model modifié :
Pour le model j’ai simplement supprimé la liaison avec le model user de ce fait lors de la création de l’article, il y aura un nouveau champ pour écrire son pseudo.
Voici à quoi ressemblait l’ancien formulaire :
Et voici le nouveau :
Dans ce nouveau formulaire, grâce au type forms.ModelForm pas besoin d’ajouter les champs manuellement comme précédemment il suffit juste de créer une classe Meta dans laquelle on renseigne le model que l’on va utiliser, les champs dans l’ordre que nous avons choisi et enfin les labels pour modifier le nom des champs à l’affichage.
Voici ce que cela donne sur le site après la seule modification du formulaire :
Maintenant, à l’aide de ce formulaire, nous allons ajouter des données dans la base de données pour ce faire là aussi, nous allons récupérer notre précédente vue que nous allons modifier.
La voici :
Et voici la nouvelle :
Comme on peut le voir, j’ai juste rajouté la ligne 5 « form.save() » qui va permettre à Django d’enregistrer correctement les données du formulaire.
Voici l’article que je crée à l’aide du formulaire ainsi que le résultat dans la base de données :
Comme on peut le voir après utilisation du formulaire, les données se sont bien enregistrées. Maintenant, il ne reste plus qu’à afficher ces données, nous allons voir comment faire.
Maintenant, pour afficher les données, il nous faut d’abord les récupérer dans la vue à l’aide d’une requête, voici la vue avec la nouvelle requête :
C’est grâce au code « Article.objects.all() » qui permet de récupérer les données de la base de données, tout ceci est stocké dans la variable « articles » qui est celle que nous allons utiliser pour afficher les informations sur la page HTML.
Voici comment on utilise la variable articles dans le code HTML pour afficher les données :
Comme on peut le voir, j’utilise une boucle « for » pour récupérer les valeurs dans la variable, ce qui me permet d’afficher les attributs que je veux dans la liste « ul ».
Voici, pour finir, le résultat de tout ce que nous avons réalisé :