IUT d’Orsay – département informatique Développement Web
BUT A2 R3.01
TP6 – introduction au modèle (pattern) MVC
Nous allons, dans ce TP6, réorganiser notre production du TP5 selon le design pattern « MVC ».
C’est essentiel car nous allons multiplier les fichiers et voir que des caractéristiques se retrouvent, ce
qui incite à les regrouper en 3 grandes familles : Modèle, Vue et Contrôleur.
Exercice 1 – Nouvelle organisation – Les répertoires config et modele
1. Nous allons commencer à organiser notre code de manière classique, selon le pattern
« MVC », pour Modèle – Vue – Contrôleur. Pour le moment, recopiez TP5/ex7 dans
TP6/ex1 sans rien changer. Votre structure de départ est la suivante :
- Les fichiers [Link] et [Link] sont des fichiers de type Modèle. Ils
définissent une classe PHP. Nous allons donc les placer dans un répertoire
TD6/ex1/modele.
1 / 12
IUT d’Orsay – département informatique Développement Web
BUT A2 R3.01
- Le fichier [Link] est aussi de type Modèle, puisqu’il définit une classe, la
classe Connexion. Mais c’est une classe vraiment à part, et on va plutôt la ranger dans
un répertoire de configuration, qu’on appellera TD6/ex1/config
Construisez la nouvelle architecture qui ressemble à :
Modifiez ensuite, dans [Link] et dans [Link], les
chemins qui mènent aux fichiers [Link], [Link]. et
[Link]. Testez que tout fonctionne.
2 / 12
IUT d’Orsay – département informatique Développement Web
BUT A2 R3.01
Exercice 2 – Nouvelle organisation – Un répertoire css
1. Dupliquez TP6/ex1 en TP6/ex2, puis créez le répertoire TP6/ex2/css.
2. Déplacez dans ce répertoire les fichiers [Link] et [Link].
Reproduisez l’architecture locale sur le serveur, en veillant à ne pas garder les fichiers css à la
racine au niveau de l’architecture serveur.
3. Modifiez, partout où c’est nécessaire, les chemins d’accès aux fichiers css. Assurez-vous que
tout fonctionne, une fois les changements reportés sur le serveur.
Exercice 3 – Nouvelle organisation – Le répertoire vue et quelques fichiers « vue »
1. Dupliquez TP6/ex2 en TP6/ex3, puis créez le répertoire TP6/ex3/vue. Ce répertoire
contiendra essentiellement des fichiers avec du code html, ou des scripts PHP d’affichage.
2. Déplacez le fichier [Link] dans ce répertoire, et actualisez l’architecture serveur. Testez.
Si vous avez des erreurs, corrigez-les…
Indice : chemin vers le menu ?
3. Nous allons maintenant observer les deux fichiers restants : [Link] et
[Link]. Ils commencent quasiment de la même façon :
La seule différence est dans la balise <title>. Pour supprimer cette différence, une astuce
est de créer une variable PHP, $titre, et de remplacer le code par :
Et comme ce fichier est clairement voué à de l’affichage, c’est un fichier de type vue. Créez-le
en le nommant [Link] et rangez-le dans le répertoire vue.
3 / 12
IUT d’Orsay – département informatique Développement Web
BUT A2 R3.01
4. Modifiez ensuite les deux fichiers [Link] et [Link] pour
que :
a. Le début de ces fichiers définisse la valeur de la variable $titre.
b. Et continue par l’insertion du fichier [Link].
Testez, tout doit fonctionner comme avant.
5. Pendant qu’on y est… Isolez les deux dernières lignes dans un fichier appelé [Link] :
Et remplacez ces lignes par un appel au fichier.
Enrichissez ce fichier en y ajoutant un <footer> personnalisé…
Testez que tout fonctionne encore. Vous pouvez donner un style personnalisé à votre footer.
6. On va plus loin dans la « vue » : Dans les deux fichiers [Link] et
[Link] il y a des lignes d’affichage quasiment identiques :
L’un pour les utilisateurs, l’autre pour les voitures.
Vous allez créer
a. Deux répertoires :
- vue/voiture
- vue/utilisateur ;
b. Deux fichiers :
- vue/utilisateur/[Link]
- vue/voiture/[Link]
Le contenu de ces deux fichiers sera exactement les lignes des captures ci-dessus.
Ensuite, vous modifierez le code pour réaliser des insertions de ces fichiers, et vous vérifierez
que tout fonctionne bien. Sinon, vous corrigez
Remarque : ces deux fichiers étant quasiment les mêmes, on pourrait réfléchir à factoriser le
code, un jour ou l’autre…
4 / 12
IUT d’Orsay – département informatique Développement Web
BUT A2 R3.01
Exercice 4 – Nouvelle organisation – Le répertoire controleur
Commencez, comme d’habitude, par dupliquer votre code TP6/ex3 en TP6/ex4.
A ce stade, il ne reste plus beaucoup de code dans les fichiers [Link] et
[Link].
Tout ce qui reste est du domaine des fichiers « contrôleur » :
- appeler des classes, lancer des méthodes
- gérer des calculs (affectations)
- appeler des vues
1. Créez un répertoire TP6/ex4/controleur, et dans ce répertoire un fichier
[Link].
2. Complétez ce fichier de façon qu’il :
a. insère la classe Voiture;
b. gère la variable $titre (puisque c’est une affectation, cela doit faire partie de la
logique calculatoire, donc c’est le rôle du contrôleur) ;
5 / 12
IUT d’Orsay – département informatique Développement Web
BUT A2 R3.01
c. gère le tableau des voitures récupéré au moyen de la méthode getAllVoitures
de la classe Voiture ;
d. appelle, dans l’ordre suivant, les fichiers vue [Link], [Link],
[Link] et [Link] ;
3. Créez un fichier TP6/ex4/controleur/[Link]. Ce fichier
sera exactement l’analogue du précédent, pour les voitures.
4. Supprimez maintenant des fichiers [Link] et [Link]
toutes les instructions qui ont été reportées vers les contrôleurs, et pensez à les remplacer par
une insertion du contrôleur. Par exemple, dans [Link], Il ne devrait plus
rester que
Idem pour l’autre fichier.
5. Vérifiez que tout fonctionne !
Exercice 5 – Nouvelle organisation – Le routeur
En l’état actuel des choses, vous avez à la racine deux fichiers qui jouent le même rôle : assurer la
connexion, et appeler un certain contrôleur (Voiture ou Utilisateur).
Nous allons remplacer ces deux fichiers par un seul, qui s’appellera [Link]. En effet, il va
assurer la connexion, mais son rôle essentiel sera d’aiguiller l’internaute vers le bon contrôleur.
Il est donc une sorte d’aiguillage, et c’est par lui que désormais tout lien du menu passera :
- on n’appellera plus [Link], mais plutôt [Link], en précisant que
l’on souhaite obtenir le contrôleur des voitures ;
- on n’appellera plus [Link], mais plutôt [Link], en
précisant que l’on souhaite obtenir le contrôleur des utilisateurs ;
6 / 12
IUT d’Orsay – département informatique Développement Web
BUT A2 R3.01
- ces deux appels se feront ainsi :
o …TP6/ex5/[Link]?controleur=controleurVoiture
o …TP6/ex5/[Link]?controleur=controleurUtilisateur
1. Créez un fichier TP6/ex5/[Link] ;
2. Codez dans ce fichier l’insertion du fichier config/[Link], et l’appel de la
fonction Connexion ::connect ;
3. Initialisez ensuite une variable $controleur à la valeur par défaut suivante :
Ainsi, même si le renseignement du contrôleur n’est pas fourni par l’internaute, nous avons
quand même une valeur à utiliser.
4. En phase de production, nous passerons toutes les informations dans l’url. C’est donc le
tableau $_GET qui sera rempli. Codez l’instruction suivante, donnée en français : « si le
contrôleur a été renseigné dans l’url, alors la variable $contrôleur prend cette valeur ».
5. Enfin, le routeur doit demander l’insertion du fichier contrôleur par la commande
qui utilise une chaîne de caractères dont une partie sera interprétée.
6. Dans le menu, changez les appels
en
7 / 12
IUT d’Orsay – département informatique Développement Web
BUT A2 R3.01
Il est essentiel de comprendre que maintenant, tout passe par le routeur qui aiguille vers le
bon contrôleur. Supprimez [Link] et [Link], ils ne
servent plus.
7. Enfin, vérifiez que tout fonctionne ! Si c’est le cas, vous pouvez être fier de vous car votre
architecture correspond bien au design pattern MVC
8 / 12
IUT d’Orsay – département informatique Développement Web
BUT A2 R3.01
Exercice 6 – version classe PHP du controleur
Vous avez peut-être remarqué que les fichiers « modèle » et « config » sont écrits en classes PHP.
Pour les vues, ça n’a pas de sens puisque ce n’est que de l’affichage.
Pour les contrôleurs, ça a du sens. Même si nous allons nous limiter à des méthodes statiques (donc
de classe). Nous allons donc en écrire une version objet.
1. Dupliquez votre TP6/ex5 en TP6/ex6.
2. Nous allons maintenant coder une classe ControleurVoiture, qui ne contiendra que des
méthodes statiques. Cette classe sera à terme un catalogue de méthodes statiques dont la
première s’appelle lireVoitures.
Nous prendrons le parti, pour bien les différencier, de noter « à l’anglaise » les méthodes de
la classe modèle, et « à la française » les méthodes de la classe contrôleur.
Vous devez toujours garder à l’esprit que le contrôleur a besoin, dans ses méthodes, des
méthodes du modèle. L’insertion du modèle Voiture en première instruction est donc
essentielle.
Pour le moment, notre contrôleur ressemble à :
Réorganisez ce fichier en PHP objet pour qu’il ressemble à :
9 / 12
IUT d’Orsay – département informatique Développement Web
BUT A2 R3.01
3. Au niveau du routeur, l’insertion du controleurVoiture ne va donc plus
automatiquement afficher toutes les voitures, puisque les commandes correspondantes sont
regroupées dans la méthode lireVoitures.
Nous attendons donc du routeur qu’il appelle cette fonction lireVoitures au moyen de
la commande ControleurVoiture ::lireVoitures();
MAIS on ne peut pas écrire ça « en dur » dans le routeur car :
- Parfois ce sera l’autre contrôleur qui sera demandé
- Parfois, ce sera une autre méthode qui sera demandée (car votre travail ne vas pas
s’arrêter à la liste des voitures )
On va donc passer la méthode à lancer DANS L’URL, comme pour le contrôleur : on appellera
par exemple
…/TP6/ex6/[Link] ?controleur=controleurVoiture&action=lireVoitures
a. Ajoutez, dans le routeur, une variable $action que vous initialiserez par défaut ainsi :
b. Ajoutez, comme pour le contrôleur, un test qui vérifie si une action a été passée dans
l’url. Si c’est le cas, elle remplace l’action par défaut.
10 / 12
IUT d’Orsay – département informatique Développement Web
BUT A2 R3.01
c. Enfin, après l’insertion du contrôleur, lancez la commande
4. Apportez les mêmes modifications au fichier [Link] pour en
faire un fichier PHP objet.
5. Dans le menu, complétez les deux liens pour qu’ils précisent l’action demandée.
6. Testez !
Exercice 7 – l’action passée dans l’url – modification du routeur
1. Que se passe-t-il si on appelle les url suivantes :
a. …/TP6/ex6/[Link] ?controleur=toto&action=lireVoitures
b. …/TP6/ex6/[Link] ?controleur=controleurVoiture&action=rien
c. …/TP6/ex6/[Link] ?controleur=controleurUtilisateur&action=rien
Expliquez chaque erreur.
2. Dans votre routeur, vous allez gérer :
- un tableau des valeurs possibles du contrôleur :
- un tableau des actions par défaut :
Vous modifierez le test sur l’information passée sur le contrôleur dans l’url : si l’information
« controleur » est passée dans l’url et si sa valeur fait partie du tableau des valeurs possibles
des contrôleurs, alors on l’affecte à la variable $controleur.
Codez ceci. Vous pourrez utiliser cette fonction native de PHP, décrite dans :
[Link]
Ensuite, on procédera à l’insertion du bon contrôleur.
11 / 12
IUT d’Orsay – département informatique Développement Web
BUT A2 R3.01
3. Enfin, avant de lancer l’action passée dans l’url, vous allez vous assurer que cette action fait
bien partie des méthodes de la classe. Sinon, vous affecterez à $action l’action par défaut du
contrôleur $controleur.
Pour cela, vous pourrez utiliser la fonction native de PHP nommée get_class_methods.
Voyez cette page du manuel :
[Link]
Codez cette nouvelle protection.
4. Retestez les trois url de la question 1 et vérifiez que les bugs sont corrigés.
12 / 12
