🚀 Cours : API Django
Django !
1- Formulaire HTML manuel
On construit un formulaire HTML à la main et on traite les données soi-même dans la vue.
👩🏼🎓Django → vers generic : etape 1
🪛Travail : CRUD
2 - Form (forms.Form)
On remplace le formulaire HTML manuel par une classe Form qui gère la validation et la récupération des données.
Django → vers generic : etape 2 (Form)
3 -ModelForm (forms.ModelForm)
On utilise un ModelForm pour générer automatiquement le formulaire à partir du modèle et créer l’objet en base via form.save().
Django → vers generic : etape 3 (ModelForm)
🪛 Travail : CRUD
4 - Generic Views (ListView / CreateView)
On remplace les vues manuelles par des vues génériques qui automatisent entièrement le CRUD (liste, création, modification, suppression).
Django → vers generic : etape 4 (generic View)
https://github.com/dupontdenis/Generic-CRUD.git
JS : suite
API :
Créer ce site sur les studios Ghibli
Liste des projets sur une structure "étudiants" !
Choix d'un projet :
Les bases de JS
Suite les bases de JS
https://docs.google.com/document/d/1gRA9N2u6O6eozarmP1yzYjEKvsAaMEztooWzCKKkPSI/edit?usp=sharin
👩🏼🎓 Ce qu'il faut comprendre en priorité
Générer une liste HTML à partir d’un tableau JavaScript
Le tableau :
const fruits = ["Pomme", "Poire", "Banane"];
Le résultat HTML :
<ul>
<li>Pomme</li>
<li>Poire</li>
<li>Banane</li>
</ul>
👩🏼🎓L’idée essentielle :
🪛On écrit les balises HTML que l’on connaît et on utilise ${...} pour générer dynamiquement les éléments <li> à partir d’un tableau JavaScript.
Explications :
La structure HTML fixe : les balises <ul> et </ul> sont écrites directement, car nous savons que nous voulons créer une liste.
L’insertion dynamique : ${...} permet d’insérer le résultat d’une expression JavaScript dans la chaîne HTML.
La génération des éléments : fruits.map(fruit => ...) parcourt le tableau et génère un élément <li> pour chaque fruit.
La réunion des éléments : .join("") rassemble les différentes chaînes HTML en une seule, sans séparateur.
👩🏼🎓À retenir : - les backticks ` ` délimitent le template literal,
- le HTML fixe en définit la structure et
${...} permet de calculer le contenu à insérer.
🚀 Ainsi, si le tableau contient davantage de fruits, la liste s’adapte automatiquement.
👩🏼🎓L’idée essentielle :
🪛On écrit les balises HTML que l’on connaît et on utilise ${...} pour générer dynamiquement les éléments <li> à partir d’un tableau JavaScript.
Explications :
La structure HTML fixe : les balises
<ul>et</ul>sont écrites directement, car nous savons que nous voulons créer une liste.L’insertion dynamique :
${...}permet d’insérer le résultat d’une expression JavaScript dans la chaîne HTML.La génération des éléments :
fruits.map(fruit => ...)parcourt le tableau et génère un élément<li>pour chaque fruit.La réunion des éléments :
.join("")rassemble les différentes chaînes HTML en une seule, sans séparateur.
👩🏼🎓À retenir :
- les backticks ` ` délimitent le template literal,
- le HTML fixe en définit la structure et
${...}permet de calculer le contenu à insérer.
🚀 Ainsi, si le tableau contient davantage de fruits, la liste s’adapte automatiquement.
🥷🏼Le problème des structures hétérogènes
🪛Comment afficher dans un même tableau HTML des objets dont la structure est inconnue et les attributs différents ? Faut-il prévoir manuellement une colonne pour chaque attribut possible ?
🛟La solution : parcourir dynamiquement les attributs des objets pour construire automatiquement les colonnes du tableau et afficher les données disponibles.
Inscription à :
Articles (Atom)