TD5 – Architecture MVC avancée 1/2 Contrôleur frontal, échappement du HTML, vues modulaires, CRUD

Dessinez sur papier un schéma qui explique comment le contrôleur (le routeur et la partie Voiture), le modèle et la vue interagissent pour créer la page qui correspond par exemple à l’action afficherDetail. Ce schéma doit représenter les différents fichiers exécutés par PHP, les regrouper par composant MVC, et indiquer à l’aide de flèches l’ordre d’exécution.

Préparez-vous à l’expliquer à votre chargé de TD quand il passera le corriger.

1. Renommez et déplacez le fichier Controleur/routeur.php pour qu’il devienne web/controleurFrontal.php.

   Note : Ce script s’appelle contrôleur frontal (front controller en anglais) puisque c’est la partie visible de notre site.

2. Déplacez les dossiers Configuration, Controleur, Modele et vue dans un dossier src. Ce déplacement casse le site Web. Nous allons le réparer dans le prochain exercice.

Corrigez tous les require_once pour que le site remarche. Si besoin, changez les liens de liste.php et l’attribut action du formulaire formulaireCreation.php.

1. Nous allons indiquer au serveur Web Apache que les fichiers ne sont pas accessibles sur internet par défaut. Pour ceci, créez un fichier .htaccess à la racine de votre site TD5 avec le contenu suivant

   Require all denied
   

2. Pour indiquer que les fichiers du dossier web sont accessibles, créez un fichier web/.htaccess avec le contenu suivant

   Require all granted
   

3. Vérifiez que l’accès par internet aux scripts autres que web/controleurFrontal.php affiche une page Web Forbidden You don't have permission to access this resource.

   Note : Si votre fichier .htaccess n’a pas d’effet et que vous êtes sur votre machine, il se peut qu’il faille configurer Apache autrement.

1. Rajoutez

   namespace App\Covoiturage\Configuration;
   

   au début de src/Configuration/ConfigurationBaseDeDonnees.php.

   Explication : La déclaration namespace regroupe toutes les classes (et fonctions) déclarées dans le fichier dans l’espace de nom App\Covoiturage\Configuration, ce qui a pour effet de rajouter un préfixe à leur nom. Ainsi, la classe déclarée dans ConfigurationBaseDeDonnees.php s’appelle maintenant App\Covoiturage\Configuration\ConfigurationBaseDeDonnees.

   Attention : Les espaces de nom utilisent des antislashs \, tandis que les chemins de fichiers Linux/Mac utilisent des slashs /.

2. Le site est de nouveau cassé : ConnexionBaseDeDonnees.php ne connait pas la classe ConfigurationBaseDeDonnees. En effet, cette classe s’appelle désormais App\Covoiturage\Configuration\ConfigurationBaseDeDonnees.
   Complétez le nom de la classe ConfigurationBaseDeDonnees dans ConnexionBaseDeDonnees.php. Le site Web doit refonctionner.

   Note : Vous ne devez pas toucher aux noms de fichiers dans les require_once, mais plutôt changer le nom de classe ConfigurationBaseDeDonnees dans les appels à des méthodes statiques.

3. Vous conviendrez volontiers que ce nom de classe à rallonge est pénible. Nous allons utiliser un alias à la place :

   // ConfigurationBaseDeDonnees est un raccourci pour App\Covoiturage\Configuration\ConfigurationBaseDeDonnees
   use App\Covoiturage\Configuration\ConfigurationBaseDeDonnees as ConfigurationBaseDeDonnees; 
   // ou syntaxe équivalente plus rapide 
   use App\Covoiturage\Configuration\ConfigurationBaseDeDonnees;
   

   Raccourcissez les noms de classe dans ConnexionBaseDeDonnees.php grâce à cet alias.

   Remarques :

   • use est similaire à import en Java.
   • PhpStorm peut faire ce travail à votre place. Par exemple, quand il ne connait pas la classe Configuration, il la surligne pour indiquer un warning. Lorsque votre curseur est sur la ligne du warning, une ampoule apparait pour vous proposer des solutions rapides (ou faites Alt+Entrée). Choisissez la solution Import Class.

1. Créez le dossier src/Lib (attention à la majuscule). Enregistrez le fichier Psr4AutoloaderClass.php directement à l’emplacement src/Lib/Psr4AutoloaderClass.php.

   Attention : Un bug apparaît si vous vous servez de PhpStorm pour déplacer Psr4AutoloaderClass et le changer de dossier. Il est donc important d’enregistrer Psr4AutoloaderClass directement dans le bon dossier.

2. Au début du contrôleur frontal, incluez ce fichier à l’aide d’un require_once. Utilisez un chemin de fichier absolu avec __DIR__ comme vu précédemment.

3. Rajoutez le code suivant dans le contrôleur frontal juste avant de traiter les actions :

   // initialisation en activant l'affichage de débogage
   $chargeurDeClasse = new App\Covoiturage\Lib\Psr4AutoloaderClass(true);
   $chargeurDeClasse->register();
   // enregistrement d'une association "espace de nom" → "dossier"
   $chargeurDeClasse->addNamespace('App\Covoiturage', __DIR__ . '/../src');
   

   En résumé, ce code dit au système d’autoloading de PHP que les classes dont l’espace de nom commence par App\Covoiturage se trouvent dans le dossier src.

4. Nous allons enfin pouvoir utiliser l’autoloader. Comme expliqué précédemment, la classe App\Covoiturage\Configuration\ConfigurationBaseDeDonnees sera cherchée dans le fichier src/Configuration/ConfigurationBaseDeDonnees.php.
   Dans ConnexionBaseDeDonnees.php, enlevez le require_once de la classe Configuration.
   Le site Web doit refonctionner.

5. Répétez ce processus pour enlever tous les require_once de fichier de déclaration de classe (sauf pour Psr4AutoloaderClass) :
   • ajout de namespace dans chaque classe,
   • utilisation d’alias pour faire référence à cette classe,
   • suppression des require_once.

   Nous vous conseillons de procéder classe par classe, dans l’ordre suivant : ConnexionBaseDeDonnees, ModeleVoiture puis ControleurVoiture.

   Attention : La classe PDO dans ConnexionBaseDeDonnees.php est comprise comme App\Covoiturage\Modele\PDO à cause du namespace App\Covoiturage\Modele. Or son nom complet est \PDO. Deux solutions possibles :

   • Ajoutez use \PDO as PDO; pour que PHP sache que PDO est dans l’espace de nom global.
   • Ou spécifiez que PDO est dans l’espace de nom global en appelant la classe \PDO.
6. Maintenant que vous avez compris le principe de Psr4AutoloaderClass, vous pouvez si vous le souhaitez désactiver son affichage de débogage :

   $loader = new App\Covoiturage\Lib\Psr4AutoloaderClass(false);
   

Créez une voiture d’immatriculation <h1>Hack et regardez comment elle s’affiche. Inspectez le code source HTML correspondant pour comprendre ce qu’il s’est passé.

1. Changer donc toutes vos vues pour appliquer la fonction htmlspecialchars à toutes les variables PHP qui se trouvent à un endroit où du code HTML pourrait être interprété. L’endroit typique est dans les zones de texte.
   Nous vous conseillons de créer des variables temporaires pour stocker le texte échappé, par exemple $immatriculationHTML, puis d’afficher ces variables.

2. Vérifiez que votre voiture d’immatriculation <h1>Hack s’affiche maintenant correctement et ne créé plus de balise HTML <h1>. Allez voir dans le code source comme l’immatriculation a été échappée.

1. Créez une voiture d’immatriculation &a=b en utilisant votre action afficherFormulaireCreation ;

2. Observez que le lien vers la vue de détail de cette voiture ne marche pas. Pourquoi ?

3. Changer la vue liste.php pour qu’elle encode à l’aide de rawurlencode la variable PHP correspondant à l’immatriculation.
   Attention : Il ne faut pas encoder l’immatriculation déjà échappée pour le HTML. Il faut créer deux variables : une immatriculation pour le HTML et une pour les URLs.

4. Testez que le lien vers la vue de détail remarche.

1. Créer une vue générique TD5/vue/vueGenerale.php avec le code suivant. La fonction de vueGenerale.php est de charger un en-tête et un pied de page communs, ainsi que la vue dont le nom de fichier est stocké dans la variable $cheminVueBody (et le titre de page contenu dans $pagetitle).

   <!DOCTYPE html>
   <html>
      <head>
         <meta charset="UTF-8">
         <title><?php echo $pagetitle; ?></title>
      </head>
      <body>
         <header>
               <nav>
                   <!-- Votre menu de navigation ici -->
               </nav>
         </header>
         <main>
               <?php
               require __DIR__ . "/{$cheminVueBody}";
               ?>
         </main>
         <footer>
         </footer>
      </body>
   </html>
   

2. Dans vos vues existantes, supprimer les parties du code correspondant aux header et footer.

3. Reprendre l’action afficherListe du contrôleur pour afficher la vue vueGenerale.php avec les paramètres supplémentaires "pagetitle" => "Liste des voitures", "cheminVueBody" => "voiture/liste.php".

4. Testez votre action afficherListe. Regardez le code source de la page Web pour vérifier que le HTML généré est correct.

5. Modifiez les autres actions et testez votre site.

1. Modifier la vue vueGenerale.php pour ajouter en en-tête de page une barre de menu, avec trois liens vers les différents contrôleurs :

   <nav>
      <ul>
         <li>
            <a href="controleurFrontal.php?action=afficherListe&controleur=voiture">Gestion des voitures</a>
         </li><li>
            <a href="controleurFrontal.php?action=afficherListe&controleur=utilisateur">Gestion des utilisateurs</a>
         </li><li>
            <a href="controleurFrontal.php?action=afficherListe&controleur=trajet">Gestion des trajets</a>
         </li>
      </ul>
   </nav>
   

2. Modifier la vue vueGenerale.php pour rajouter un pied de page comme

   <p>
     Site de covoiturage de ...
   </p>
   

3. Rajoutez un style CSS minimaliste à votre page Web. Ce style sera mis dans un dossier css. Où mettre ce dossier css sachant que nous interdisons l’accès internet à certaines parties du dossier TD5 ?

   Une façon de faire est de créer un dossier TD5/ressources qui sera accessible sur internet (copiez le .htaccess de web), et qui contiendra le dossier css, mais aussi plus tard des dossiers img d’images et js pour le JavaScript.

4. Ce fichier CSS rajoute aussi un style pour les formulaires. Pour l’appliquer, changez formulaireCreation.php pour qu’un champ de formulaire s’obtienne par exemple avec

    <p class="InputAddOn">
        <label class="InputAddOn-item" for="immat_id">Immatriculation&#42;</label>
        <input class="InputAddOn-field" type="text" placeholder="Ex : 256AB34" name="immatriculation" id="immat_id" required>
    </p>
   

Nous souhaitons créer une vue voitureCreee.php qui affiche le message

<p>La voiture a bien été créée !</p>

avant de faire un require de liste.php puisque cette vue sert à écrire la liste des voitures. Ceci donnerait le visuel suivant.

1. Créez la vue voitureCreee.php comme expliqué ci-dessus, en utilisant le concept de vue modulaire.
   Remarque : La vue voitureCreee.php doit faire deux lignes maintenant.

2. Changez l’action creerDepuisFormulaire du contrôleur pour appeler cette vue.
   Attention : Il faut initialiser la variable $voitures contenant le tableau de toutes les voitures afin qu’elle puisse être affichée dans la vue.

3. Comme vous développez un site Web, il faut vérifier régulièrement sa conformité HTML et CSS. Faites-le maintenant.