Travail pratique #2¶
Travail pratique à remettre
Ce travail pratique est à remettre et compte dans le cumul de la note finale du cours.
Pondération : 5% de la session
Détails :
- Ce travail peut être fait en équipe de 2
- Bien lire les instructions
- Valider le code avec le validateur avant la remise
- La remise se fait sur LÉA
- La date limite de remise est disponible sur LÉA
Ce travail met en pratique :
- La création de formulaires web HTML et CSS
- Le traitement de formulaires par Javascript
Lire les notes de cours
Les notes de cours sont très importantes pour ce TP et vous y trouverez des exemples pour vous aider.
Le projet¶
Extraire le projet du dossier ZIP et le conserver dans votre espace de travail.
Le projet a déjà la bonne structure. Il suffit d'ajouter les portions manquantes dans les bons fichiers.
N'oubliez pas d'indiquer votre/vos noms complets dans la balise d'auteur
Vous pouvez modifier le CSS existant pour votre mise en page.
Compléter le projet¶
Ce travail consiste à mettre en pratique :
- La création de formulaires HTML
- La mise en page CSS de formulaires
- Le traitement Javascript de formulaires
Exemple de l'interface complétée :
Les formulaires¶
L'interface finale comprend 2 formulaires délimités avec une balise <form>.
Chaque formulaire comprend des divisions <div> pour le positionnement des éléments.
Créer les formulaires demandés avec les informations suivantes :
Formulaire de création de pizza¶
Dans la div ayant l'ID optionsPizza, créer les éléments HTML du formulaire suivant :
La balise <form> existe déjà plus haut dans le code, ne pas modifier cela, car le CSS l'utilise!
Regrouper un champ et un libellé dans une div pour pouvoir les traiter en bloc et pour qu'ils s'affichent automatiquement un en-dessous de l'autre.
C'est le CSS qui permettra de donner les styles aux champs du formulaire.
Le CSS
Dans pizza.css :
Ajouter ce qu'il faut pour :
- Donner une hauteur et largeur aux champs input pour les agrandir
- Les champs input ont une couleur d'accent (couleur lorsque coché)
-
Le champ select a :
- une largeur en %
- une hauteur en rem
- une couleur de fond
Formulaire de commande¶
Dans le formulaire ayant l'id info_commande, créer les éléments HTML du formulaire suivant :
cliquer sur l'image pour l'agrandir
Tous les champs sont requis sauf pour la case à cocher
Tous les champs on un libellé associé
Le CSS
Dans commande.css :
-
Ajouter lez styles nécessaires pour positionner les champs et leur libellés de façon structurée
Vous êtes libres de créer l'interface de votre choix, tant que c'est structuré
Il y a des exemples dans les notes de cours
-
Respectez le standard d'interfaces qui dicte que les boutons se trouvent au bas à droite d'une interface
Le Javascript¶
Maintenant que l'interface est prête, nous allons programmer les fonctionnalités.
Nous allons écrire les deux scripts du projet :
- pizzaBuilder.js : traite le formulaire de création de pizza
- commande.js : traite le formulaire de commande
commande.js¶
Le script de commande est plus simple, nous allons donc débuter par ce dernier.
Une fonction de soumission de commande est appelée sur le clic du bouton "Soumettre la commande".
Ajouter l'événement sur le bouton dans le HTML et l'appel de fonction.
Écrire le code javascript du pseudo-algorithme suivant :
1. Trouver le formulaire de commande avec son ID (getElementByID)
2. Vérifier la validité des champs (reportValidity() -> voir notes de cours)
3. Si pas valide -> sortir de la fonction
4. Lire les informations des formulaires nécessaires pour afficher le message
5. Afficher (alert) le message :
"Merci [prénom nom], votre commande a bien été reçue pour le [date de commande] à [heure de commande], pour une pizza [taille de pizza choisie] pouces. Lorsque votre commande sera prête, nous communiquerons avec vous au numéro [téléphone fourni]."
Remplacer les informations entre crochets "[ ]" par les valeurs fournies dans les champs de formulaire.
Utilisez "n" pour insérer des retours de ligne dans une chaîne de caractères.
pizzaBuilder.js¶
Ce script permet de construire l'image de la pizza dès qu'on ajoute un choix.
Ainsi, les événements sont appelés lorsque les champs changent de valeur et non sur le clic d'un bouton.
- Sur les cases à cocher : événement onchange
- Sur la liste déroulante : événement onchange
- Les boutons radio ne déclenchent pas de fonction
- Sur le bouton réinitialiser de type reset, on ajoute l'événement onclick pour ajouter du traitement
Cases à cocher
Chaque case à cocher appelle sa fonction, exemple : "ajouterChampignons()".
Vous aurez donc une fonction par ingrédient.
L'algorithme est le même pour toutes les cases à cocher :
1. Trouver la zone d'affiche avec son ID (*pizza*)
2. Si la case à cocher est cochée (checked)
* Créer une balise image
* lui donner la source de l'image de l'ingrédient
* lui donner le texte alternatif (nom de l'ingrédient)
* lui ajouter la classe nommée *ingredient_affiche* (déjà dans le CSS)
* lui donner un id unique
* ajouter l'image dans la zone d'affichage
3. Sinon (la case est décochée)
* supprimer l'image de cet ingrédient dans la zone d'affichage
Liste déroulante
La liste déroulante est différente, car elle gère 3 images différentes, selon le choix de fromage.
Lorsque la valeur de la liste change <select onchange="ajouterFromage()">, on appelle donc sa fonction.
L'algorithme est :
1. Trouver la zone d'affiche avec son ID (*pizza*)
2. Si la valeur (value) de la liste déroulante n'est pas "aucun"
* Si l'image de fromage existe déjà (getElementById != null)
* Modifier la source de l'image pour le choix de fromage
* Sinon
* Créer une nouvelle balise image
* lui donner la source de l'image de l'ingrédient
* lui donner le texte alternatif (nom du fromage)
* lui ajouter la classe nommée *ingredient_affiche*
* lui donner un id (le même id est utilisé pour tous les fromages, car un remplace l'autre)
* ajouter l'image dans la zone d'affichage
3. Sinon (donc aucun fromage)
* supprimer l'image du fromage dans la zone d'affichage
Bouton réinitialiser
Le bouton est de type reset et remet donc le formulaire à vide automatiquement.
Toutefois, on doit s'assurer que l'image de pizza soit réinitialisée aussi.
Sur le clic du bouton, on appelle une fonction qui réinitialise la pizza :
1. Trouver l'image de pâte à pizza avec son ID
2. Dans la zone d'affichage *pizza*, retirer tous les enfants (replaceChildren)
3. Dans la zone d'affichage *pizza*, ajouter l'image de pâte
Défi et bonus¶
Voici l'occasion d'obtenir un point bonus sur votre total de la session -> 1% ajouté à votre note finale ! (ce qui veut dire que vous pouvez obtenir 5% + 1% pour ce TP)
- Si chaque option d'une case à cocher vaut 1$ lorsque sélectionnée
- Si l'ajout de fromage vaut 3$ peu importe le fromage
-
Si les prix par taille de pizza sont :
- 8 pouces : 10$
- 12 pouces : 12$
- 20 pouces : 15$
Lors de la commande, après avoir affiché le message de réception de la commande :
Afficher un autre message (alert) pour afficher le prix total de la pizza.
Ne pas utiliser de variables globales (pas de variable déclarée hors fonction) !
Appeler une autre fonction pour exécuter ce traitement (voir notes de cours).
Les points bonus sont corrigés à la méthode "tout ou rien" : on a le point ou on l'a pas.
Valider et corriger¶
Valider le code à l'aide du validateur.
S'il reste des erreurs, on perd automatiquement des points!
Assurez-vous que votre code respecte les règles de programmation !
Si les règles ne sont pas respectées, on perd des points!
Barème de correction¶
| Élément de correction | points |
|---|---|
| Règles de programmation | 2pts |
| Formulaire de création de pizza (HTML + CSS) | 4 pts |
| Formulaire de commande (HTML + CSS) | 5 pts |
| Script de création de pizza | 5 pts |
| Script de commande | 4 pts |
| TOTAL: | 20 pts ramenés sur 5% session |
| BONUS: | 1 % session |
-1 point /20 s'il reste des erreurs dans le validateur
Remise¶
La remise se fait sur LÉA à l'aide d'un dossier ZIP.
Date limite de remise affichée sur LÉA.
Profitez de la semaine de lecture pour y mettre du temps!