Skip to content
Snippets Groups Projects
Commit 827ae032 authored by Thomas Fritsch's avatar Thomas Fritsch
Browse files

ajout formulaires + navigation

parent f962434a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
C-formulaires.md
+ 29
− 19
View file @ 827ae032
......@@ -7,6 +7,7 @@
- [C.3. Le formulaire d'ajout de pizza](#c3-le-formulaire-dajout-de-pizza)
- [C.4. La validation de la saisie](#c4-la-validation-de-la-saisie)
- [C.5. Le formulaire complet :](#c5-le-formulaire-complet-)
- [Étape suivante](#Étape-suivante)
## C.1. Rappels
Comme vu en cours (cf. pdf sur moodle), on peut utiliser l'API DOM avec les formulaires principalement pour 2 choses :
......@@ -16,10 +17,10 @@ Comme vu en cours (cf. pdf sur moodle), on peut utiliser l'API DOM avec les form
## C.2. Préparatifs
**Avant d'aller plus loin dans le TP faisons un point sur le code qui est fourni dans ce repo** : il contient en effet des classes qui correspondent à la solution du précédent TP [D. POO avancée](https://gitlab.univ-lille.fr/js/tp2/blob/master/D-poo-avancee.md) :
- **La classe `js/pages/Page.js`** est une classe de base dont hériterons les pages de notre application et qui implémente juste une méthode `renderTitle()` qui retourne le titre de la page (passé dans le constructeur).
- **La classe `js/pages/HomePage.js`** hérite de `Page` et permet d'afficher une liste de pizzas passées soit au constructeur, soit à un setter `homePage.pizzas = ...`. Mettre à jour la liste des pizzas a pour effet de re-générer le tableau des children de la page.
- **La classe `js/pages/Page.js`** est une classe de base dont hériterons les pages de notre application et qui implémente juste une méthode `renderTitle()`. cette méthode `renderTitle()` retourne le titre de la page (passé dans le constructeur sous forme de chaîne de caractères).
- **La classe `js/pages/HomePage.js`** hérite de `Page` et permet d'afficher une liste de pizzas passées soit au constructeur, soit à un setter `homePage.pizzas = ...`. Mettre à jour la liste des pizzas via le setter a pour effet de re-générer le tableau des children de la page.
- **La classe `js/components/PizzaThumbnail.js`** est une classe qui hérite de `Component` et qui permet d'afficher une pizza. Elle est utilisée dans `HomePage`.
- **Enfin la classe `js/PageRenderer.js`** est une classe qui dispose d'une méthode statique `PageRenderer.renderPage( page )` qui est appelée dans le `main.js`. Cette méthode permet d'afficher une page avec son contenu (méthode `page.render()`) et son titre (méthode `page.renderTitle()`).
- **Enfin la classe `js/PageRenderer.js`** est une classe qui dispose d'une méthode statique `PageRenderer.renderPage( page )` qui est appelée dans le `main.js`. Cette méthode statique permet d'afficher une page avec son contenu (méthode `page.render()`) et son titre (méthode `page.renderTitle()`).
***Maintenant que les présentations sont faites, adaptons un peu le code pour préparer la suite du TP :***
......@@ -27,7 +28,7 @@ Pour permettre à chaque page de réagir aux événements de l'utilisateur, on v
1. **Ajouter la méthode `mount()`** dans la classe `Page` :
```js
mount(contentElement) {
mount(element) {
// par défaut, cette méthode ne fait rien
// ce sont les classes filles qui devront surcharger cette méthode
}
......@@ -40,6 +41,8 @@ Pour permettre à chaque page de réagir aux événements de l'utilisateur, on v
}
```
**Ces deux modifications faites, passons à la création du formulaire d'ajout de pizza.**
## C.3. Le formulaire d'ajout de pizza
1. **Créez la classe `AddPizzaPage`** (dans un module `js/pages/AddPizzaPage.js`) :
```js
......@@ -51,25 +54,28 @@ Pour permettre à chaque page de réagir aux événements de l'utilisateur, on v
}
render() {
return /*html*/ `<form class="addPizzaPage">
<label>
Nom :
<input type="text" name="nom" class="form-control">
</label>
<button type="submit" class="btn btn-default">Ajouter</button>
</form>`;
return /*html*/ `
<form class="addPizzaPage">
<label>
Nom :
<input type="text" name="nom" class="form-control">
</label>
<button type="submit" class="btn btn-default">Ajouter</button>
</form>`;
}
mount(container) {}
mount(element) {}
submit(event) {}
}
```
***NB :** le commentaire `/*html*/` juste avant la chaîne permet à l'extension de vscodium "es6-string-html" (que vous avez installé lors du précédent TP) d'appliquer la coloration syntaxique au code html contenu dans la template string, ce qui peut être pratique pour s'y retrouver.*
***NB :** le commentaire `/*html*/` juste avant la chaîne dans la méthode `render()` permet à l'extension de vscodium "es6-string-html" (que vous avez installé lors du précédent TP) d'appliquer la coloration syntaxique au code html contenu dans la template string, ce qui peut être pratique pour s'y retrouver.*
2. Affichez la page `AddPizzaPage` lors du clic sur le lien du menu `"Ajouter une Pizza"` et la `HomePage` lors du clic sur le lien `"La carte"` et sur le logo.
2. **Implémentez la méthode `mount()` dans la classe `AddPizzaPage`** en y ajoutant un écouteur d'événement 'submit' sur la balise `<form class="addPizzaPage">`. Cet écouteur d'événement devra déclencher la méthode `submit()` de l'instance.
3. **Dans la méthode `mount()` de la classe `AddPizzaPage`** ajoutez un écouteur d'événement 'submit' sur la balise `<form class="addPizzaPage">`. Cet écouteur d'événement devra déclencher la méthode `submit()` de l'instance.
***NB :** Pour rappel, la valeur du `this` à l'intérieur d'un écouteur d'événement (fonction appelée par addEventListener) est toujours l'élément HTML qui a déclenché l'événement (ici le formulaire). Pour pouvoir appeler une méthode de l'instance, il faut forcer la valeur du `this` pour qu'elle corresponde toujours à l'instance dans laquelle le code s'exécute. Comme expliqué dans le pdf du cours, il existe plusieurs manières de le faire, mais celle que je vous recommande est l'emploi de la méthode [`bind()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) dans le constructeur de la classe :*
```js
......@@ -82,7 +88,7 @@ Pour permettre à chaque page de réagir aux événements de l'utilisateur, on v
}
}
```
3. **Implémentez la méthode `submit()` dans la classe `AddPizzaPage`.** : cette méthode va pour le moment juste afficher un message dans la console.
4. **Implémentez la méthode `submit()` dans la classe `AddPizzaPage`.** : cette méthode va pour le moment juste afficher un message dans la console.
```js
submit(event) {
// ici le code de votre méthode
......@@ -94,11 +100,12 @@ Pour permettre à chaque page de réagir aux événements de l'utilisateur, on v
## C.4. La validation de la saisie
1. **Au submit, afficher dans la console la valeur saisie par l'utilisateur dans le champ "nom"**. Un sélecteur CSS qui peut être utile ici est le [sélecteur d'attributs](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors).
3. **Si le champ "nom" est vide, afficher un message d'erreur** à l'aide de la fonction [`alert()`](https://developer.mozilla.org/fr/docs/Web/API/Window/alert)
4. **Si le champ "nom" n'est pas vide, afficher une alerte "La pizza xxxxx a été ajoutée"** (où "xxxxx" correspond au nom qu'a saisi l'utilisateur) **et vider le champ de saisie** pour permettre à l'utilisateur de saisir une nouvelle pizza.
2. **Si le champ "nom" est vide, afficher un message d'erreur** à l'aide de la fonction [`alert()`](https://developer.mozilla.org/fr/docs/Web/API/Window/alert)
3. **Si le champ "nom" n'est pas vide, afficher une alerte "La pizza xxxxx a été ajoutée"** (où "xxxxx" correspond au nom qu'a saisi l'utilisateur) **et vider le champ de saisie** pour permettre à l'utilisateur de saisir une nouvelle pizza.
## C.5. Le formulaire complet :
Coder le formulaire complet de création de pizza selon le code HTML suivant (tous les champs sont obligatoires) :
1. Coder le formulaire complet de création de pizza selon le code HTML suivant (tous les champs sont obligatoires) :
```html
<form class="addPizzaPage">
<label>
......@@ -133,4 +140,7 @@ Coder le formulaire complet de création de pizza selon le code HTML suivant (to
</form>
```
***NB:** Pour récupérer la valeur contenue dans un champ `<select>` ce n'est pas la propriété `value` qu'il faut utiliser mais `selectedOptions` (https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions). Cette propriété retourne un tableau des valeurs sélectionnées, si le tableau est vide, c'est qu'aucune valeur n'a été choisie par l'utilisateur.*
\ No newline at end of file
***NB:** Pour récupérer la valeur contenue dans un champ `<select multiple="true">` ce n'est pas la propriété `value` qu'il faut utiliser mais `selectedOptions` (https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions). Cette propriété retourne un tableau des valeurs sélectionnées, si le tableau est vide, c'est qu'aucune valeur n'a été choisie par l'utilisateur.*
## Étape suivante
Pour terminer, voyons comment intégrer ce que saisit l'utilisateur dans le reste de l'application : [D. Formulaires et navigation](./D-navigation.md).
\ No newline at end of file
D-navigation.md 0 → 100644
+ 19
− 0
View file @ 827ae032
#### TP3 - API DOM <!-- omit in toc -->
# D. Formulaires et navigation <!-- omit in toc -->
## Sommaire <!-- omit in toc -->
- [D.1. Mise à jour de la liste](#d1-mise-à-jour-de-la-liste)
- [D.2. Formulaire d'ingrédients](#d2-formulaire-dingrédients)
## D.1. Mise à jour de la liste
Lorsque l'utilisateur soumet le formulaire (et à condition que l'utilisateur n'ait pas fait d'erreur de saisie), faites en sorte que l'on retourne sur la `HomePage` avec la liste des pizzas mise à jour.
## D.2. Formulaire d'ingrédients
**Ajoutez dans le formulaire `AddPizzaPage` un lien "ajouter un ingrédient".**
Au clic sur ce lien, il faut :
1. **Afficher un nouveau formulaire à la place de la AddPizzaPage**. Ce formulaire contient uniquement un champ "nom" (obligatoire) et un bouton "submit". (*Vous pouvez vous inspirer vous du code HTML fourni à l'exercice [C.3. Le formulaire d'ajout de pizza](./C-formulaires.md#c3-le-formulaire-dajout-de-pizza)*)
2. Lors de la soumission du formulaire (si pas d'erreur), **ré-afficher la `AddPizzaPage` avec la liste des ingrédients mise à jour** avec le nouvel ingrédient saisi par l'utilisateur.
3. Faire en sorte que les champs du formulaire `AddPizzaPage` soient pré-remplies avec les valeurs précédentes :<br>
Si l'utilisateur avait par exemple déjà renseigné un nom pour sa pizza avant de cliquer sur le lien "ajouter un ingrédient", lorsqu'il a terminé d'ajouter son ingrédient et qu'il retourne sur la `AddPizzaPage`, le formulaire doit se ré-afficher avec le nom de pizza qu'il avait précédemment saisi.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment