Exercice 05 - Conditions et fonctions

Mise en situation

Vous devez faire un formulaire de contact, qui si valide en Bootstrap, envoie les infos en PHP.
Ensuite, vous allez faire une page À propos qui va contenir des infos sur votre projet ainsi que des réponses à l'utilisateur.

Modalités

• Seul
• Réalisé durant le cours
• Durée approximative tout le cours
• Remettre le tout zippé sur Léa dans exercice 05

Partie 1 - À faire (étapes)

1. À partir de votre projet (projet.local)
   • RAPPEL: À partir de maintenant votre dossier de projet devrais avoir:
   • Les fichiers bootstrap CSS et JS d'intégrés
   • Avoir les fichiers du HTML5boilerplate complet pas juste 3 fichiers!
2. Faites une copie de index.php et renommez-le contact.php

3. Utilisez le code HTML suivant pour faire le formulaire (javascript fourni aussi):
   La documentation sur la validation avec Bootstrap

   <div class="container">
   <h2>Formulaire de contact</h2>
   <form class="needs-validation" novalidate method="post">
       <div class="row">
           <div class="mb-3 col-lg-6 col-12">
               <label for="nom" class="form-label">Nom de la personne</label>
               <input type="text" class="form-control" id="nom" name="nom" placeholder="Entrez votre nom" required>
               <div class="invalid-feedback">
                   Veuillez entrer votre nom.
               </div>
           </div>
           <div class="mb-3 col-lg-6 col-12">
               <label for="courriel" class="form-label">Courriel</label>
               <input type="email" class="form-control" id="courriel" name="courriel" placeholder="nom@example.com" required>
               <div class="invalid-feedback">
                   Veuillez entrer une adresse courriel valide.
               </div>
           </div>
       </div>
   
       <div class="mb-3">
           <label for="sujet" class="form-label">Sujet</label>
           <input type="text" class="form-control" id="sujet" name="sujet" placeholder="Sujet de votre message" required>
           <div class="invalid-feedback">
               Veuillez entrer un sujet pour votre message.
           </div>
       </div>
       <div class="mb-3">
           <label for="message" class="form-label">Message</label>
           <textarea class="form-control" id="message" name="message" rows="3" required></textarea>
           <div class="invalid-feedback">
               Veuillez entrer votre message.
           </div>
       </div>
       <button type="submit" class="btn btn-primary">Envoyer</button>
   </form>
   </div>

// JavaScript pour activer la validation client côté navigateur de Bootstrap
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Récupère tous les formulaires qui nécessitent une validation
    var forms = document.getElementsByClassName('needs-validation');
    // Boucle sur tous les formulaires
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

4. Assurez-vous que le dossier includes existe, config.php présent aussi
5. Dans le dossier includes, créez un fichier functions.php, qui contiendra vos fonctions
6. Ajouter l'instruction declare(strict_types=1); en haut complètement de functions.php pour forcer l'utilisation des types en PHP.
7. Ouvrez les 3 précédents fichiers contact.php config.php et functions.php dans Visual Studio Code
8. Faites un require du fichier config.php ET aussi du fichier functions.php dans le haut du fichier contact.php
9. Si le formulaire est envoyé et valide, on affiche le contenu de celui si avec un var_dump($_POST) dans une fonction de functions.php
   IMPORTANT: Vous aurez besoin de la variable de formulaire $_POST pour récupéré les variables du formulaire
   Plus de documentation ici

Partie 2 - À faire (étapes)

1. À partir des fichiers de la partie précédente
2. Faites une copie de index.php et renommez-le apropos.php
3. Ouvrez les 3 précédents fichiers apropos.php config.php et functions.php dans Visual Studio Code
4. Dans la page À propos, écrivez une courte description de votre site/projet
5. Écrivez vos deux noms de coéquipiers avec une courte bio (vous pouvez mettre une photo de vous ;) )
6. Faites l'ajout de deux fonctions dans functions.php qui peuvent faire n'importe quelle opération sur votre page.
   Voici des exemples:
   • Détection du fuseau horaire
   • Calcul de la taxe au Québec
   • Taux de change US
   • Affichage de la date du jour
   • Affichage de la période du jour
   • Etc. tant que c'est paramètre(s) => calcul / opération => résultat
7. Vous devez utiliser au moins une constante de configuration que vous voulez provenant de config.php
8. Vous devez commenter chacune des fonctions
   • Ce quelle fait => description
   • Quelles sont les entrées => paramètres
   • Qu'est-ce quelle produit => retourne
9. Faites l'utilisation concrète de vos fonctions sur la page apropos.php
10. Faites des tests pour vous assurer de la validité de vos fonctions, n'hésitez pas à utiliser var_dump()
11. Vous devez remettre le tout sur Léa lorsque c'est complet dans Exercice 05

Solution