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

1. Renommez et déplacez le fichier Controleur/routeur.php pour qu’il devienne web/controleurFrontal.php en évitant d’utiliser PHPStorm. En effet, PHPStorm vous rajouterait des lignes namespace ... et use ... en haut de vos scripts PHP qu’il faudrait supprimer.

   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 en évitant d’utiliser PHPStorm.

   Ce déplacement casse quand même le site Web, mais nous allons le réparer dans le prochain exercice.

Corrigez tous les require_once pour que le site remarche :

1. Changez tous les require_once qui chargent des classes ;
2. Changez le require dans ControleurUtilisateur::afficherVue qui charge les vues ;
3. Si besoin, changez les liens de liste.php et l’attribut action du formulaire formulaireCreation.php pour qu’ils renvoient sur controleurFrontal.php au lieu de routeur.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. Ajoutez 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 ConfigurationBaseDeDonnees et importez correctement la classe ConfigurationBaseDeDonnees avec use.

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, ModeleUtilisateur puis ControleurUtilisateur. N’oubliez pas d’importer la classe ControleurUtilisateur dans le contrôleur frontal pour pouvoir l’utiliser.

   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.

   La même remarque tient pour toutes les autres classes de la librairie standard de PHP (comme DateTime utilisée dans Trajet par exemple).

   Le site doit maintenant fonctionner à nouveau.

6. Maintenant que vous avez compris le principe de Psr4AutoloaderClass, vous pouvez si vous le souhaitez désactiver son affichage de débogage :

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

Créez un utilisateur de login <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 $loginHTML, puis d’afficher ces variables.

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

1. Créez un utilisateur de login &a=b en utilisant votre action afficherFormulaireCreation ;

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

3. Changer la vue liste.php pour qu’elle encode à l’aide de rawurlencode la variable PHP correspondant au login.
   Attention : Il ne faut pas encoder le login déjà échappé pour le HTML. Il faut créer deux variables : un login $loginHTML pour le HTML et un $loginURL 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 $cheminCorpsVue (et le titre de page contenu dans $titre).

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

   Rappel : L’IDE devrait signaler une erreur/warning indiquant que les variables $titre et $cheminCorpsVue sont non-définies. Pensez à ajouter une documentation en format PHDoc avant l’utilisation de la variable pour avoir un code propre. <!– Par exemple, pour $titre :

   /**
    * @var string $titre
    */
   

   –>

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 "titre" => "Liste des utilisateurs", "cheminCorpsVue" => "utilisateur/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=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.

   N’oubliez pas de rajouter la balise d’inclusion du CSS dans la vue générale

   <link rel="stylesheet" href="...">
   

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="login_id">Login&#42;</label>
        <input class="InputAddOn-field" type="text" placeholder="Ex : leblancj" name="login" id="login_id" required>
    </p>
   

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

<p>L'utilisateur a bien été créé !</p>

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

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

2. Changez l’action creerDepuisFormulaire du contrôleur pour appeler cette vue.
   Attention : Il faut initialiser la variable $utilisateurs contenant le tableau de tous les utilisateurs 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.