Les exercices d’aujourd’hui sont une opportunités de pratiquer les concepts vu en classe. L’objectif est de reproduire l’application que vous trouverez au lien suivant. Pour le faire, veuilliez suivre les étapes suivantes
Exercice 0
Installer l’application XAMPP et démarrer le service “Apache”. Le code des prochains exercices devra être déployer sous le répertoire “C:/xampp/htdocs/cours02/” et pourra être accéder dans un fureteur Internet à partir du lien “localhost”
Exercice 1
Créez une page “index.html”. En utilisant un menu “Bootstrap” de votre choix, créez un menu avec les sections “Accueil”, “Nos produits”, “Calculateur” et “Contactez-nous”. Assurez-vous que ces éléments du menu envoi respectivement vers les pages “index.html”, “produits.html”, “calculateur.html” et “contact.html”. Dans chacune des pages, recopier ce même menu. Assurez-vous que chaque page possède un titre <h1> qui indique le nom de la page (Accueil, Nos Produits, Calculateur, Contactez-nous). De plus, assurez-vous que la page sélectionner apparaisse dans le menu en blanc pour montrer qu’elle est sélectionnée (Par exemple, si vous cliquez sur “Nos produits”, le lien deviendra blanc). Finalement, pour chacune des pages, assurez-vous que votre menu ainsi que le contenu de la page soit d’une largeur de 1000 pixels exactement, et centré au milieu de la page.
Exercice 2
Dans la page “Nos produits”, reproduisez le tableau présent en utilisant Bootstrap. Utiliser le tableau qui change légèrement de couleur la ligne sur laquelle se trouve le curseur de la souris.
Exercice 3
Dans la page “calculateur.html”, reproduisez le calculateur de taxe tel que dans la démonstration. Le montant des taxes doit être de 15% du montant entré initialement. Le total est l’addition du montant initial et des taxes.
Exercice 4
Dans le fichier “contact.html”, créez un formulaire avec les champs “nom” (texte), telephone (texte) et message (Text area). Les noms des champs doivent être respectivement: nom, telephone, message”. Le formulaire doit soumettre son contenu à une page “traitement_formulaire.php” en utilisant la méthode POST. Créez la page “traitement_formulaire.php”. Vous pouvez y mettre le code se trouvant dans le fichier suivant.
Exercice 5
Ajouter une validation au formulaire. Si le numéro de téléphone ne respecte pas un format valide (Par exemple: (XXX)XXX-XXXX), la soumission du formulaire sera refusée et un message d’erreur affichera “Le format du numéro de téléphone est invalide”.
Exercice 6
Dans la page “index.html”, créez une division (div) avec un bouton tel que présenté dans l’exemple. Créez également une page “contenu_ajax.html” qui contient du Lorem Ipsum. Faites en sorte que lorsque le bouton est appuyé, une requête AJAX appelera la page “contenu_ajax.html” et en affichera le contenu dans la division. Pour cet exercice, il sera nécessaire d’utiliser XAMPP.