CHAPITRE 1
Développer des sites dynamiques en MVC
1. Présentation du MVC (Modèle - Vue - Contrôleur)
2. Création des composants Contrôleur
3. Création des Vues
4. Création des composants Modèle
Développer des sites dynamiques en MVC
01 - Présentation du MVC (Modèle - Vue - Contrôleur)
Introduction
• Dans l'architecture 3-tiers, si une vue modifie les données, toutes les vues concernées par la modification doivent être mises à jour, d'où l'utilité de l'utilisation du MVC
au niveau de la couche de présentation. La couche de présentation permet donc d'établir des règles du type « mettre à jour les vues concernant X si Y ou Z sont
modifiés ». (Wikipédia)
• MVC (Modèle-Vue-Contrôleur) est un modèle de conception, il est donc indépendant du langage de programmation. Il met l'accent sur la séparation entre la logique
métier et l'affichage du logiciel.
Le contrôleur : qui gère la navigation.
MVC est très utilisé dans les applications web.
Le modèle : qui gère la structuration et l'accès aux données.
Il est décomposé en 3 parties :
PARTIE 4
La vue : qui gère l’interface utilisateur.
• Les modèles et les contrôleurs sont généralement des classes.
• Les vues sont généralement des Templates HTML ou PDF.
Copyright - Tout droit réservé - OFPPT 206
Développer des sites dynamiques en MVC
01 - Présentation du MVC (Modèle - Vue - Contrôleur)
Avantages & Inconvénients de l’architecture MVC
Quelques Avantages
• Meilleure organisation du code.
• Possibilité de réutiliser le code.
• Meilleure gestion de temps pour la maintenance et l’évolution du site.
• Plus de facilité pour les tests unitaires.
• Conception claire et efficace grâce
Quelques Inconvénients
PARTIE 4
• Complexe pour de petites applications. Le temps accordé à l’architecture peut ne pas être rentable pour le projet.
• Augmentation de la difficulté d’implémentation.
• Le nombre important de fichiers représente une charge non négligeable dans un projet.
Copyright - Tout droit réservé - OFPPT 207
Développer des sites dynamiques en MVC
01 - Présentation du MVC (Modèle - Vue - Contrôleur)
Frameworks MVC pour PHP
L’utilisation de Framework peut s’avérer d’un grand avantage au développeur. Il permet de faciliter le travail et réduire le temps de réalisation tout en profitant des
avantages qu’offre l’architecture.
Exemples de frameworks utilisant l’architecture MVC
• Lavarel : [Link]
• Lumen : [Link]
• Symfony : [Link]
• Cake PHP : [Link]
• Zend Framework : [Link]
• Yii Framework : [Link]
• Phalcon : [Link]
• CodeIgniter : [Link]
• Slim : [Link]
PARTIE 4
• FuelPHP : [Link]
• Aura : [Link]
Copyright - Tout droit réservé - OFPPT 208
Développer des sites dynamiques en MVC
01 - Présentation du MVC (Modèle - Vue - Contrôleur)
Architecture MVC
PARTIE 4
Fig. : Architecture MVC
Copyright - Tout droit réservé - OFPPT 209
Développer des sites dynamiques en MVC
01 - Présentation du MVC (Modèle - Vue - Contrôleur)
Contrôleur
Le contrôleur est chargé de :
• Reconnaître l’action (événement) à réaliser
pour l’exécuter.
• Demander la construction du modèle (données Le contrôleur récupère les données du
à renvoyer ou afficher en sortie). formulaire pour les traiter.
• Tester les erreurs et récupérer les éventuelles
exceptions pour éviter les erreurs.
• Appeler la vue (ou la vue d’erreur) pour
afficher le résultat de l’action.
PARTIE 4
Le contrôleur est chargé de la synchronisation Le contrôleur est souvent réparti
du modèle et de la vue. en plusieurs objets.
Copyright - Tout droit réservé - OFPPT 210
Développer des sites dynamiques en MVC
01 - Présentation du MVC (Modèle - Vue - Contrôleur)
Les Modèles
Son rôle est d'aller
récupérer les
Le modèle contient les informations « brutes »
Le but du modèle est de
Il fait l'interface entre la données manipulées dans la base de
Le modèle représente stocker les données
base de données d'une par le programme. Il données, de les
les données et les règles nécessaires à la vue
part, le contrôleur et la assure la gestion de ces organiser et de les
métiers. pour afficher le résultat
vue d'autre part données et garantit leur assembler pour qu'elles
d’une action.
intégrité. puissent ensuite être
traitées par le
contrôleur.
PARTIE 4
Copyright - Tout droit réservé - OFPPT 211
Développer des sites dynamiques en MVC
01 - Présentation du MVC (Modèle - Vue - Contrôleur)
Les Vues
Les vues ne font La vue peut aussi
aucun test et se La vue peut aussi offrir la possibilité à
contentent d’afficher Elle gère l'aspect du donner plusieurs l'utilisateur de La vue présente les
le modèle qui, en formulaire : son vues, partielles ou changer de type données et interagit
l’absence de bug, doit design. non, des mêmes d’affichage. (Exemple avec l’utilisateur..
s’afficher données. : Mode tablette,
correctement. Mode ordinateur, …)
PARTIE 4
Copyright - Tout droit réservé - OFPPT 212
CHAPITRE 1
Développer des sites dynamiques avec
MVC en mode natif
1. Présentation du MVC (Modèle - Vue - Contrôleur)
2. Création des composants Contrôleur
3. Création des Vues
4. Création des composants Modèle
Développer des sites dynamiques en MVC
02 - Création des composants Contrôleur
Création d’un fichier contrôleur
• [Link] peut être considéré comme contrôleur. Il établit le lien avec le modèle et la vue qui seront détaillés dans les prochaines sections.
• Nous pourrons créer un nouveau contrôleur si besoin.
Exemple :
• Prérequis : Table de commentaires « comments » dans la Base de données « test » ayant les champs suivants : id, auteur, commentaire et date_commentaire
• Le contrôleur [Link] permet de gérer la liste des derniers commentaires.
<?php
require(‘[Link]’);
$comments = getComments(); //fonction présente dans [Link]
require(‘[Link]’);
?>
PARTIE 4
Copyright - Tout droit réservé - OFPPT 214
CHAPITRE 1
Développer des sites dynamiques en MVC
1. Présentation du MVC (Modèle - Vue - Contrôleur)
2. Création des composants Contrôleur
3. Création des Vues
4. Création des composants Modèle
Développer des sites dynamiques en MVC
03 - Création des Vues
Création d’un fichier vue
• L’affichage est important pour un site Web. Il faut bien soigner la vue en <!DOCTYPE html>
utilisant les notions HTML et XHTML, … <html>
<head>
Exemple : <meta charset="utf-8" />
<title>Mon Site Web Dynamique</title>
• Prérequis : Table de commentaires « comments » dans la Base de
<link href="[Link]" rel="stylesheet" />
données « test » ayant les champs suivants : id, auteur, commentaire
</head>
et date_commentaire. <body>
• Le fichier [Link] permet dans cet exemple d’afficher les <h1>Bonjour </h1>
commentaires. <p>Derniers commentaires du site :</p>
<?php
while ($data = $comments->fetch()){
?>
<div class="news">
<p>
<?= nl2br(htmlspecialchars($data['commentaire'])) ?>
<br />
<em><a href="#">Commentaires</a></em>
PARTIE 4
</p>
</div>
<?php } ?>
</body>
</html>
Copyright - Tout droit réservé - OFPPT 216
CHAPITRE 1
Développer des sites dynamiques en MVC
1. Présentation du MVC (Modèle - Vue - Contrôleur)
2. Création des composants Contrôleur
3. Création des Vues
4. Création des composants Modèle
Développer des sites dynamiques en MVC
04 - Création des composants Modèle
Création d’un fichier modèle
• Dans une architecture MVC, on commence en général par écrire le modèle.
• Le code fourni par le modèle permet de récupérer les données grâce notamment à des requêtes SQL.
Exemple :
• Prérequis : Table de commentaires « comments » dans la Base de données « test » ayant les champs suivants : id, auteur, commentaire et date_commentaire.
• Le fichier [Link] permet dans cet exemple d’établir la connexion avec la base de donnée uniquement.
<?php
function bdConnect()
{
try
{
$bd = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root', 'root');
return $bd;
}
catch(Exception $e)
PARTIE 4
{
die('Erreur : '.$e->getMessage());
}
}
?>
Copyright - Tout droit réservé - OFPPT 218
Développer des sites dynamiques en MVC
04 - Création des composants Modèle
Exemple modèle
• Suite à l’exemple précédent, nous pourrons ajouter d’autres fonctions qui récupèrent les commentaires d’un ID ou les 5 dernier commentaires par exemple :
function getCommentsById($Id)
{
$bd = bdConnect();
$comments_id = $bd->prepare(‘
SELECT id, auteur, commentaire, DATE_FORMAT(date_commentaire, \'%d/%m/%Y à %Hh%imin%ss\') AS comment_date_fr
FROM comments
WHERE id = ? ORDER BY date_ commentaire DESC');
$comments_id->execute(array($Id));
return $comments_id;
}
function getLastFiveComments()
{
$bd = bdConnect();
$req = $bd->query(‘
SELECT id, auteur, commentaire, DATE_FORMAT(date_commentaire, \'%d/%m/%Y à %Hh%imin%ss\') AS comment_date_fr
PARTIE 4
FROM comments
ORDER BY date_commentaire DESC
LIMIT 0, 5');
return $req;
}
Copyright - Tout droit réservé - OFPPT 219
Développer des sites dynamiques en MVC
Quizz
Questions
Question n°1 : Question n°3 :
Dans MVC, quelle partie s'occupe d'afficher la page en HTML ? Pourquoi le routeur se trouve souvent dans un fichier nommé [Link] à la
racine ?
1. Modèle
1. Parce que cela permet d'accélérer les traitements
2. Vue
2. Parce que c'est obligatoire pour faire du routing
3. Contrôleur
3. Parce que c'est une convention
4. Parce que le routeur est le premier élément qu'on appelle
Question n°2 :
Laquelle de ces phrases décrit le mieux les différentes phases d'exécution d'un
code en MVC ? Question 4 :
1. Le routeur appelle le bon contrôleur, qui récupère des informations MVC est un modèle de conception utilisé pour découpler l'interface utilisateur,
depuis le modèle qu'il passe ensuite à la vue les données et ____________.
2. Le contrôleur appelle le modèle, qui passe le tout au routeur pour que 1. Logique d'application
celui-ci puisse afficher la vue
PARTIE 4
2. Application
3. Le routeur appelle le modèle, qui transmet les données au contrôleur
3. Logique
qui passe à la vue
4. Rien
Copyright - Tout droit réservé - OFPPT 220
Développer des sites dynamiques en MVC
Quizz
Questions Question 7 :
Question 5 : Pourquoi est-il conseillé de ne pas mélanger PHP, HTML et SQL dans un même
fichier ?
Le ____________ aide à transmettre les données du contrôleur à afficher et à
afficher au contrôleur. 1. Cela permet de travailler à plusieurs sur plusieurs fichiers en parallèle
1. Vue 2. Cela permet aux pages web de s'afficher plus rapidement
2. Modèle 3. Cela facilite la maintenance du code
3. Routeur
Question 8 :
Question 6 : En programmation, il est préférable d'écrire en...
Il est utilisé pour afficher l'ensemble des données à l'aide du modèle : 1. Français
1. Contrôleur 2. Anglais
2. Vue 3. Arabe
3. Routeur 4. N’importe quelle langue
PARTIE 4
Question 9 :
Quand une page ne contient que du code PHP, on ouvre la balise <?php et...
1. On ne la ferme pas à la fin
2. On pense bien à ajouter un ?> à la fin
Copyright - Tout droit réservé - OFPPT 221
Développer des sites dynamiques en MVC
Quizz (Correction)
Réponses
Question n°1 : Question n°3 :
Dans MVC, quelle partie s'occupe d'afficher la page en HTML ? Pourquoi le routeur se trouve souvent dans un fichier nommé [Link] à la
racine ?
1. Modèle
1. Parce que cela permet d'accélérer les traitements
2. Vue
2. Parce que c'est obligatoire pour faire du routing
3. Contrôleur
3. Parce que c'est une convention
4. Parce que le routeur est le premier élément qu'on appelle
Question n°2 :
Laquelle de ces phrases décrit le mieux les différentes phases d'exécution d'un
code en MVC ? Question 4 :
1. Le routeur appelle le bon contrôleur, qui récupère des informations MVC est un modèle de conception utilisé pour découpler l'interface utilisateur,
depuis le modèle qu'il passe ensuite à la vue les données et ____________.
2. Le contrôleur appelle le modèle, qui passe le tout au routeur pour que 1. Logique d'application
celui-ci puisse afficher la vue
PARTIE 4
2. Application
3. Le routeur appelle le modèle, qui transmet les données au contrôleur
3. Logique
qui passe à la vue
4. Rien
Copyright - Tout droit réservé - OFPPT 222
Développer des sites dynamiques en MVC
Quizz (Correction)
Réponses Question 7 :
Question 5 : Pourquoi est-il conseillé de ne pas mélanger PHP, HTML et SQL dans un même
fichier ?
Le ____________ aide à transmettre les données du contrôleur à afficher et à
afficher au contrôleur. 1. Cela permet de travailler à plusieurs sur plusieurs fichiers en parallèle
1. Vue 2. Cela permet aux pages web de s'afficher plus rapidement
2. Modèle 3. Cela facilite la maintenance du code
3. Routeur
Question 8 :
Question 6 : En programmation, il est préférable d'écrire en...
Il est utilisé pour afficher l'ensemble des données à l'aide du modèle : 1. Français
1. Contrôleur 2. Anglais
2. Vue 3. Arabe
3. Routeur 4. N’importe quelle langue
PARTIE 4
Question 9 :
Quand une page ne contient que du code PHP, on ouvre la balise <?php et...
1. On ne la ferme pas à la fin
2. On pense bien à ajouter un ?> à la fin
Copyright - Tout droit réservé - OFPPT 223
Développer des sites dynamiques en MVC
Références et ressources
Références et ressources
[Link]
[Link]
[Link]
PARTIE 4
Copyright - Tout droit réservé - OFPPT 224