Découvrez l'Architecture Model-View-Controller

Découvrez l'Architecture Model-View-Controller

Qu'est-ce qu'une Architecture Logicielle ?

Le développement d'un site web depuis zéro est une étape que tout développeur a déjà connu dans sa vie. Vous avez une idée de projet, où une demande d'un client, et vous ouvrez votre éditeur de texte favori, en commençant à programmer toutes ses fonctionnalités.

Instinctivement, la première idée serait de créer un fichier HTML (Où PHP) par page de votre site web. Prenons l'exemple du développement d'un blog. Vous devriez avoir besoin de trois fichiers distincts :

• Home.php : Page d'accueil, qui présente tous vos articles.

• Search.php : Effectue une recherche parmi les articles existants.

• Article.php : Afficher le contenu d'un article en particulier.

L'inconvéniant d'une telle approche est que tous vos fichiers sont isolés les uns des autres. Prenons l'exemple des deux premiers fichiers (Home.php et Search.php) : Leur contenu est identique, à l'exception que le premier va afficher tous les articles existants, alors que le second va les filtrer. Mais tout le reste, de la connexion à la base de données, juqu'à la mise en page des articles récupérés, sera strictement identique.

Afin de mieux comprendre cela, je vous propose d'analyser le fichier Search.php.

 

<?php

try {
    $pdo = new PDO("mysql:host=localhost;dbname=DataBase", "root", "root");
} catch(PDOException $exception) {
    exit();
}

$query = $pdo->prepare("SELECT Title, Content FROM Articles WHERE Title LIKE :title");
$query->bindValue("title", "%" . htmlspecialchars($_GET["Search"]) . "%", PDO::PARAM_STR);
$query->execute();

if($articles = $query->fetchAll()) { ?>
    <!DOCTYPE HTML>

    <html>
        <head>
            <meta charset="utf-8"/>
            <title> Blog </title>
        </head>
        <body>
            <?php foreach($articles as $row) { ?>
                <h3> <?= $row["Title"]; ?> </h3>
                <p> <?= $row["Content"]; ?> </p>
            <?php } ?>
        </body>
    </html>
<?php } else { ?>
    <script> window.location.replace("Index.php"); </script>
<?php }

?>

 

Si vous avez l'habitude de programmer en PHP, vous devriez facilement comprendre ce programme. Vous remarquerez que, pour créer le fichier Home.php, il suffit de remplacer la ligne 11 par ceci :

  $query = $pdo->exec("SELECT Title, Content FROM Articles");  

Et supprimer les deux lignes suivantes. Tout le reste du code est strictement identique.

Si je vous ai parlé de cette méthode, c'est qu'elle est utilisée par la plupart des développeurs débutants, y compris moi-même il y a encore quelques années… Dans l'absolu, vous pouvez tout à fait concevoir un projet de cette façon, mais vous rencontrerez alors de nombreuses contraintes.

Tout d'abord, à chaque nouvelle page que vous allez ajouter, vous serez obligés de reprendre une page existante, et de la modifier selon vos besoins. De plus, si vous souhaitez changer la couleur de fond de votre site, vous aurez besoin de modifier chaque fichier un par un… Imaginez un peu si vous avez plusieurs dizaines de pages différentes. Je vous donne l'exemple d'un changement de design, mais vous aurez le même problème si vous avez besoin de modifier la connexion à la base de données, ou n'importe quel autre paramètre qui est dupliqué dans chacun de vos fichiers… Pas très pratique, n'est-ce pas ?

Toutes ces contraintes sont imposées par l'architecture basique de ce projet. Heureusement, il existe d'autres façons de procéder, qui nous permettent de contourner la plupart de ces limitations. La plus connue est probablement l'architecture Modèle-Vue-Contrôleur, (MVC - Soit "Model-View-Controller" en anglais) qui est massivement utilisée dans le monde du développement web.

Modèles, Vues et Contrôleurs

De la même facon qu'un cuisinier doit apprendre une nouvelle recette avant de se lancer dans un nouveau plat, la création d'un projet respectant l'architecture MVC implique de connaître les bases de son fonctionnement. Celle-ci va justement nous donner un cadre de développement, nous permettant de structurer de façon cohérente et intelligente notre projet.

Concrètement, l'architecture MVC repose sur le constat que nous avons vu au début de cet article : Tous les fichiers PHP se ressemblent, et sont toujours composés de trois parties distinctes. Tout d'abord, il faut effectuer une ou plusieurs requêtes en base de données, (Lignes 5 à 13 du fichier Search.php) puis traiter et vérifier ces données, (Lignes 15 et 30) et enfin, générer une page HTML, en fonction des données récupérées. (Lignes 16 à 29)

Auparavant, tout cela était programmé dans un même fichier. À partir de maintenant, je vais vous demander de les séparer dans trois dossiers distincts.

Pour commencer, le dossier Models contenant la connexions à la base de données. Pour ma part, j'utilise un fichier différent pour chaque table de ma base de données, et j'y inclus des fonctions permettant d'ajouter, de récupérer, ou de modifier des informations sur cette table. (Et uniquement cette table)

 

<?php

function getArticles($search) {
    try {
        $pdo = new PDO("mysql:host=localhost;dbname=DataBase", "root", "root");
    } catch(PDOException $exception) {
        exit();
    }

    $query = $pdo->prepare("SELECT Title, Content FROM Articles WHERE Title LIKE :title");
    $query->bindValue("title", "%" . htmlspecialchars($search) . "%", PDO::PARAM_STR);
    $query->execute();

    return $query->fetchAll();
}

?>

 

Ensuite, le dossier Views, contenant les différentes vues de votre projet. Une vue est un fichier générant du code HTML dynamique, mais contenant le strict minimum de PHP. Elle peut donc contenir des conditions et des boucles, mais ne fera pas d'opération complexe, ni de redirection.

 

<!DOCTYPE HTML>

<html>
    <head>
        <meta charset="utf-8"/>
        <title> Blog </title>
    </head>
    <body>
        <?php foreach($articles as $row) { ?>
            <h3> <?= $row["Title"]; ?> </h3>
            <p> <?= $row["Content"]; ?> </p>
        <?php } ?>
    </body>
</html>

 

Ces vérifications seront faites dans le dossier Controllers. Il s'agit du chef d'orchestre, et fait le lien entre les deux autres dossiers. Son rôle est de vérifier les données reçues par les modèles, et d'appeler la vue correspondante.

 

<?php

require("Models/Articles.php");

if($articles = getArticles($_GET["Search"]) require("Views/Search.php");
else echo '<script> window.location.replace("Index.php"); </script>';

?>

 

Comme vous l'avez remarqué, le contrôleur va inclure seulement les modèles dont il a besoin. En fonction des données récupérées, celui-ci va faire diverses vérifications, (Ici, il teste simplement si l'article demandé existe bel et bien, mais vous aurez généralement d'autres vérifications) et devra inclure la vue de présentation des articles, ou une éventuelle redirection en cas d'erreur.

Arrivés à ce stade, il ne reste plus qu'une étape : Le routeur. Il s'agit du point d'entrée de toute architecture MVC, et dont le but est d'inclure un contrôleur. Le plus souvent, le routeur prend un paramètre (Transmit via l'URL) qui indique quel contrôleur appeller.

 

<?php

$action = htmlspecialchars($_GET["Action"]);

if($action == "Blog") require("Controllers/Blog.php");
else if($action == "Article") require("Controllers/Article.php");
else require("Controllers/Error.php");

?>

 

Notez bien que le routeur va tester uniquement la valeur de son paramètre, afin de déterminer quel contrôleur appeler. Toutes les autres vérifications (Notamment la présence ou non de l'article demandé en base de données) seront faites dans le contrôleur en question, qui pourra éventuellement faire une redirection en cas de problème.

Je vous présente ici les dossiers minimums à tout projet utilisant l'architecture MVC. À coté de ceux-là, vous trouverez généralement un dossier Public, contenant toutes vos ressources statiques. (Fichiers CSS/JavaScript, …) Personnellement, je crée également un dossier Requests, contenant les fichiers générant les résultats des requêtes AJAX. Cela reste bien évidemment optionnel, et vous êtes libres d'ajouter autant de dossiers que vous le souhaitez.

Faire Plus pour Faire Moins

Arrivés à ce stade, vous êtes en droit de vous demander en quoi l'architecture MVC va révolutionner votre site web. S'il fonctionne très bien sans, pourquoi vouloir le découper en modèles, vues et contrôleurs ?

L'avantage principal de cette architecture est le temps requis pour développer de nouvelles fonctionnalités. Imaginiez que vous souhaitiez intégrer un classement des articles les plus lus. Il suffit d'ajouter une nouvelle fonction dans un des modèles, créer un nouveau contrôleur, et l'indiquer dans le routeur. Vous n'avez ni à modifier vos autres modèles, ni vos vues, car vous utiliserez les mêmes que sur les autres pages.

De plus, cela vous oblige à découper votre code efficacement. Si vous avez une erreur lorsque vous récupérez vos articles en base de données, vous savez que cela provient du fichier Articles.php du dossier Models. Pour l'avoir vécu, c'est beaucoup plus pratique que de devoir chercher une erreur dans un fichier de 500 lignes, où sont mélangés connexion à la base de données, vérifications des résultats obtenus, et affichages des variables.

Si vous ne me croyez pas, je vous invite à créer un blog basique, comme vous l'auriez fait avec la méthode présentée au début de cet article. Une fois cela fait, essayez de le programmer une nouvelle fois, en utilisant l'architecture MVC. Vous obtiendrez alors le même projet, mais avec un code beaucoup plus clair et compréhensible. Je vous invite vraiment à vous lancer dans un tel exercice, afin de vous rendre compte des avantages procurés par l'architecture MVC !

L'architecture MVC est une facon d'organiser un projet, en séparant les fichiers selon leurs rôles : Les modèles, gérant la connexion à la base de données, les vues, qui générent la page HTML, et enfin les contrôleurs, qui font le lien entre les données récupérées et le résultat à l'écran. Une telle méthodologie permet de simplifier le développement, tout en améliorant la maintenance de votre futur site web. Son utilisation a explosée au cours des dernières années, si bien que de très nombreux frameworks modernes l'utilisent aujourd'hui. (Symfony, ASP.Net, …) Son utilisation vous demandera un effort de compréhension au début, mais soyez certain que l'investissement sera rentable pour tous vos futurs projets.

Écrit par Pythony le 12/01/2020.

Qu'avez-vous pensé de cet article ?

Prénom Date Message
Pythony Le 15/01/2020
À 01:20:58
Merci beaucoup ^^
Olson Le 12/01/2020
À 20:42:23
Sublime

Autres Articles

Hello World de Pythony

Hello World de Pythony

Lorsque l'on débute un nouveau langage de programmation, la tradition est de commencer par un programme affichant le message "Hello World !" à l'écran. Et c'est également par ce message que je tenais à commencer mon premier article sur ce blog. Au cours de ma vie, j'ai eu l'occasion de travailler sur de nombreux projets, et ce site est l'un d'entre eux. Depuis de longues années, je rêve de pouvoir vivre de ma passion, et je suis sur le point d'y parvenir

Lire "Hello World de Pythony"
Créer des Formulaires Dynamiques avec AJAX

Créer des Formulaires Dynamiques avec AJAX

En vous baladant sur le web, vous avez sûrement déjà aperçu un formulaire à remplir. Ils vous permettent de saisir des informations, puis vous redirigent vers une page les enregistrant en base de données. Mais il existe aujourd'hui une méthode permettant de simplifier ce fonctionnement, et d'éviter ainsi tout changement de page

Lire "Créer des Formulaires Dynamiques avec AJAX"
Optimisez vos Applications avec le Multithreading

Optimisez vos Applications avec le Multithreading

Une application développée avec un langage de programmation est une suite d'instructions, s'exécutant les unes à la suite des autres. Un tel fonctionnement dispose toutefois d'un inconvénient majeur, qui est la dépendance de chaque instruction envers les instructions précédentes. De ce fait, le moindre ralentissement de l'une de ces opérations risque d'impacter l'intégralité de votre application

Lire "Optimisez vos Applications avec le Multithreading"