• 30 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 23/11/2017

Le Pattern MVC

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Maintenant que les bases du web sont révisées et que les outils de développement sont installés, il est grand temps de se mettre à la pratique d’ASP.NET MVC. Parce que du HTML c’est bien beau, mais ce n’est pas avec ça que nous allons créer notre future application web.

Nous allons donc nous plonger dans le vif du sujet en abordant les bases du pattern MVC sur lequel repose ASP.NET MVC. Puis nous appliquerons ces bases avec un petit hello world pour voir du concret à l’écran (c’est quand même ce que je vous ai promis dans ce cours !).

Ne vous inquiétez pas si tout n’est pas clair dès la première lecture, vous aurez tout le loisir d’y revenir ultérieurement.

Préchauffez les cerveaux à 180° et allons-y. :)

Qu’est-ce que MVC et pourquoi l’utiliser ?

MVC est un patron de conception (design pattern en anglais) très répandu pour réaliser des sites web. Ce patron de conception est une solution éprouvée et reconnue permettant de séparer l’affichage des informations, les actions de l’utilisateur et l’accès aux données.

MVC signifie Modèle-Vue-Contrôleur. C’est un modèle qui a été conçu au départ pour des applications dites « client lourd », c’est-à-dire dont la majorité des données sont traitées sur le poste client (par exemple : un traitement de texte comme Word). MVC était tellement puissant pour ces applications « client lourd », qu’il a été massivement adopté comme modèle pour la création d’applications web (dites « client léger »). C’est cette utilisation de MVC pour le web que je vais bien sûr décrire ici.

Vous aurez compris que MVC n’est pas associé à un langage de programmation et qu'il peut être utilisé avec énormément de langages. MVC est beaucoup utilisé avec PHP par exemple ou même JAVA. En général MVC agit comme une couche supplémentaire (qu’on appelle un « framework ») qui vient se greffer par-dessus un langage. C’est le cas pour ASP.NET MVC qui est une couche supplémentaire à ASP.NET.

MVC est donc une bonne solution pour réaliser des applications web et nous allons en détailler tous les avantages, mais commençons d’abord par son unique inconvénient, qui n’en est souvent pas un d’ailleurs : MVC apporte un découpage qui demande une certaine gymnastique mentale et qui multiplie le nombre de fichiers. Donc MVC s’avère souvent disproportionné pour des tous petits sites qui n’évoluent jamais. Mais comme il y a peu de sites de ce genre, cet inconvénient est assez minime.

Heureusement, malgré sa relative complexité pour les petits sites, le framework MVC d’ASP.NET apporte beaucoup de simplicité et masque un peu cette complexité pour les petits sites grâce à un mécanisme que je décrirai plus loin qui s’appelle « convention plutôt que configuration ».

MVC permet également de concevoir des applications de manière claire et efficace grâce à la séparation des intentions. Les opérations de maintenance et de mises à jour sont fortement simplifiées, et on évite plus facilement le syndrome du plat de spaghetti où la moindre modification à un endroit risque de provoquer des débordements à d’autres endroits tellement tout est emmêlé. Par exemple, il est très fréquent que l’affichage d’un site web change beaucoup plus régulièrement que les données que nous souhaitons afficher. Avec une bonne séparation, nous n’aurons qu’à modifier une toute petite partie de code sans toucher au reste qui fonctionne très bien. De même, si une règle métier change - par exemple imaginons qu’un site d’e-commerce souhaite changer ses modalités de livraison - nul besoin de toucher l’interface, les risques d’impacts sont limités.

MVC permet également de répartir plus facilement les tâches entre développeurs. Rares sont les personnes qui sont capables de transformer des règles métiers complexes en code efficace tout en étant expertes en design web, que ce soit pour PC, tablette, ou smartphone... Le découpage permet à un développeur de s’occuper des règles métiers complexes et à un designer de faire du beau HTML ergonomique.
Alors, ce découpage, c’est bien beau mais comment ça marche ?

M comme Modèle

Le M de MVC signifie Modèle. Il s’agit des données et de l’état de votre application web (par exemple votre panier de courses sur un site d'e-commerce, ou la liste des produits à acheter,...). En général, ces données sont représentées par un ensemble de classes qui permettent d’accéder à une base de données, mais vos données pourraient tout aussi bien être stockées dans des fichiers plats ou XML, ou même vos classes pourraient utiliser des services web ou autre…

Bref, dans le modèle vous aurez de quoi accéder à vos données. Reprenons par exemple un site d’e-commerce, vous aurez sans doute une classe Client, une classe Commande, une classe Produit, etc. Il y aura des méthodes pour obtenir le détail d'un client précis, retrouver une commande, récupérer les produits par ordre de prix croissant, etc. Toutes ces informations seront stockées dans une base de données, et vous pourrez utiliser pourquoi pas un ORM comme Entity Framework pour faciliter cet accès aux données.

Dans ce cours, nous utiliserons dans un premier temps un modèle de classes très simple avec des données en dur. Puis, plus loin, nous utiliserons l'ORM Entity Framework afin de pousser le modèle dans ses retranchements...

À noter que le modèle ne connaît ni la vue, ni le contrôleur. Sa seule finalité est d’être consulté ou modifié par ces derniers.

V comme Vue

Le V de MVC signifie la Vue et traite de ce qu’on voit à l’écran dans le navigateur web. Il s’agira globalement de code HTML et de CSS. Le but de la vue est de présenter les données issues du modèle mais sans les modifier, sans en interpréter le contenu.

Dans un site web, il y a en général plusieurs vues et une vue correspond bien souvent à une unique page. Dans notre site d’e-commerce par exemple, une vue permettra d’afficher les caractéristiques d’un produit, une autre affichera la page d’accueil, une autre encore permettra de visualiser sa commande, etc.

Nous pourrons également avoir plusieurs vues pour représenter les mêmes informations. Il est par exemple tout à fait envisageable de présenter un rapport sous la forme de chiffres dans un tableau, mais également sous la forme de graphiques en barres ou autre…

Vous verrez que la vue, c’est le plus simple à maîtriser, surtout si vous connaissez déjà un peu le HTML. En plus, ASP.NET MVC nous offre toute l’aide qu’il nous faut pour être pleinement efficaces dans la réalisation de nos vues.

C comme contrôleur

Le C de MVC signifie Contrôleur. Il fait le lien entre la vue et le modèle.

Le contrôleur gère les interactions avec l’utilisateur et détermine quels traitements doivent être effectués pour une action donnée. D’une manière générale, il va utiliser les données du modèle, les traiter en fonction de l’action de l’utilisateur, et les envoyer à la vue afin qu’elle les affiche.

Nous verrons que le contrôleur est au cœur du système, il interprète et « contrôle » les données venant de l’utilisateur, comme des données venant d’un formulaire ou bien simplement une action faite via une URL.

Une bonne pratique est de faire en sorte que le contrôleur fasse le moins de choses possible. Il doit traiter l’action et choisir la bonne vue. Il est important de comprendre vraiment le rôle de chaque élément car le plus souvent, si vous ne savez pas où mettre quelque chose, vous risquez de le mettre dans le contrôleur…

Schéma récapitulatif

Voici un petit schéma synthétique pour vous rappeler ce qu’est MVC et comment les différentes couches interagissent entre elles :

Schéma MVC
Schéma MVC
  1. Action utilisateur via une requête HTTP

  2. Consultation et/ou mise à jour du modèle (facultatif)

  3. Le contrôleur décide de la vue à afficher

  4. La vue renvoi le HTML au navigateur

Nous allons voir tout au long de ce cours comment industrialiser son code grâce à MVC. Ce n’est pas grave si vous n’avez pas complétement saisi l’intérêt de cette architecture, vous verrez au fur et à mesure comment l’appréhender correctement et en tirer des bénéfices.

À noter que je n’en ai pas encore parlé, mais le patron de conception MVC apporte un élément supplémentaire non négligeable : il facilite les tests de son application. Lorsque tout est emmêlé, il est très difficile de tester son application. Il vous faut alors la démarrer, cliquer un peu partout, voir si ça marche ou si ça plante, et essayer de deviner d’où ça vient. Avec MVC, vous pourrez plus facilement tester votre application grâce à la séparation des intentions. Il sera très facile de tester les contrôleurs et le modèle et même d’écrire des tests automatiques permettant de vérifier qu’il n’y a pas de régressions. La vue sera toujours complexe à tester car elle nécessitera une intervention manuelle, mais l’avantage est que vous n’aurez que des contraintes « visuelles » à tester. Toute la logique métier aura préalablement été testée via les tests du modèle et des contrôleurs.

En résumé

  • MVC est un patron de conception particulièrement adapté pour réaliser une application web.

  • MVC est l’acronyme de Modèle-Vue-Contrôleur : le Modèle contient les données de l’application, la Vue (ou les Vues) contient le code pour afficher les pages de l’application, et le Contrôleur gère les interactions de l’utilisateur en faisant le lien avec le Modèle et la Vue.

  • MVC permet une séparation claire des intentions et optimise la création d’une application web ou d’un site, sa maintenance et ses tests automatisés.

 

Exemple de certificat de réussite
Exemple de certificat de réussite