Le modèle MVC expliqué
Tags: mvc, webdev, french, beginners
Published: 2023-05-11 09:09:09

**Les concepts clés et les avantages**

Avez-vous déjà essayé de créer un site Web avec plusieurs personnes ?
Cela peut vite devenir la pagaille si vous ne décidez pas comment organiser vos fichiers.
De plus, vous pourriez passer des heures à chercher comment résoudre un seul bug si vous ne savez pas où se trouve le code.
Quelqu'un pourrait accidentellement supprimer un code important et casser votre site Web !

![employé épuisé et dépassé qui travaille sur un ordinateur](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f21xfg0lbbu7vpyu2ifb.jpg)

## La solution en trois lettres : MVC
MVC est un paradigme architectural de programmation conçu en 1979 par [Trygve Reenskaug](https://fr.wikipedia.org/wiki/Trygve_Reenskaug).

### Qu'est-ce qu'un paradigme ?

![une personne qui s'interroge sur les paradigmes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7m8kt8dzeiv2wdyy9r2.jpg)

C'est comme un **modèle** utilisé pour structurer le code. Le but de MVC est de rendre votre code **plus modulaire** et plus **facile à maintenir**.

> MVC est l'abréviation de Model View Controller

Notre code sera séparé en 3 parties : le modèle, la vue et le contrôleur. 

Pour mieux comprendre cela, comparons le modèle MVC à une bibliothèque.

## Si MVC était une bibliothèque

_Disons que vous cherchez un nouveau livre à lire._

_Tout d'abord, vous allez à votre bibliothèque locale pour voir ce qui s'y trouve._

![l'utilisatrice de la bibliothèque](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xztvja11i2h9gnqjzvhy.jpg)

Vous êtes <mark>l'UTILISATEUR</mark> de la bibliothèque

_Dans la bibliothèque, les livres sont présentés de manière attrayante. Vous pouvez regarder la couverture, le titre et trouver quelque chose qui vous plaira._
 
_Vous ne pouvez voir que les livres à l'intérieur de la bibliothèque. Aucune information stockée dans le dos, ou des détails sur qui a acheté quel livre._

![Gens lisant dans une bibliothèque](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9u7e44je9h68t2del685.jpg)

L'interface utilisée par l'utilisateur s'appelle la <mark>VUE </mark> .

   
![l'utilisateur interagit avec la vue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b7eev3wpw1n0kt0i5qdn.jpg)  


| utilisateur | ➡️ vue |
|------------|----------|
| c'est vous  | ➡️ les choses que vous voyez à l'écran | 
|       | ➡️ la seule chose à laquelle l'utilisateur a accès|


_Vous trouvez un livre sympa à lire,
et vous demandez à votre bibliothécaire de l'emprunter._


![Bibliothécaire](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uw6woo00mc0f7l3diqyw.jpg)



- Le bibliothécaire gère la collection de livres
- Il aide également les usagers à trouver les livres dont ils ont besoin

Le bibliothécaire serait le <mark>CONTRÔLEUR </mark> dans le modèle MVC.

Les informations de l'utilisateur sont communiquées au contrôleur.

![utilisateur communique via la vue, la vue envoie les informations au contrôleur](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n77nfvvygz03dl5haltq.jpg)

_Le bibliothécaire va consulter le catalogue des livres pour traiter la demande de l'utilisateur._


![Le modèle est un système de stockage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c6b2alk3avek0dmlmmve.jpg)


Le système de stockage définit la logique de classement des livres (par auteur, genre, sujet...)

Le système de stockage serait le <mark>MODÈLE </mark>dans le modèle MVC.

Le contrôleur envoie une requête au modèle.

![le contrôleur envoie une requête au modèle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmik6ku9cx74x8fcmwog.jpg)

| contrôleur |  modèle |
|------------|----------|
| traite les informations de l'utilisateur et communique avec le modèle |  ajoute et récupère des informations de la base de données  | 
|       | contient tout le stockage |

Ensuite, le contrôleur met à jour la vue.

![Le contrôleur met à jour la vue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8bgrmwuvjs2fck40b9d.jpg)

| contrôleur ➡️ |  vue ➡️ | utilisateur |
|------------|----------| ----------|
| indique à la vue ce qu'il faut afficher |  affiche les données demandées  |  | 

## Qu'est-ce que le modèle MVC sur mon ordinateur ?

### MODÈLE = base de données

Le composant **Modèle** gère les **données** de l'application.

Il communique avec le composant Contrôleur pour fournir et mettre à jour les données selon les besoins, et représente les données et les opérations qui peuvent être effectuées sur ces données.


![serveur](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34ayk2rt1osejlz5cz4n.jpg)

Le modèle est une base de données. Elle peut être écrite avec MySQL, PostSQL ou MongoDB.

---

### C'est quoi Mongoose ?


Mongoose est une bibliothèque ODM (Object Data Modeling) populaire pour les applications Node.js qui permet aux développeurs de créer des modèles pour leurs données et d'interagir avec les bases de données MongoDB. 


![logo de Mongoose](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7qdzewq3t0dhn1sldvc.jpg)

> Mongoose fournit une solution simple basée sur un **schéma** pour modéliser vos données d'application. Il comprend la conversion de type intégrée, la validation, la création de requêtes, les crochets de logique métier et plus encore, prêts à l'emploi.

[https://mongoosejs.com/](https://mongoosejs.com/)

**Et un schéma, c'est quoi ?**

![une personne qui s'interroge sur le sens de "schéma"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ui9fns293iqzmrit6yy4.jpg)

Un schéma contient une collection d'objets de base de données.
C'est comme un plan pour **organiser et gérer les données **de votre base de données.

### VUE = NAVIGATEUR

Le composant View de l'architecture MVC est chargé de présenter les données à l'utilisateur d'une manière facile à comprendre et à interagir.

Il définit **l'interface utilisateur (UI)** et gère les événements d'entrée utilisateur.

Les vues peuvent être créées à l'aide de HTML, CSS et JavaScript pour créer la structure, le style et l'interactivité de l'interface utilisateur. 

![ordinateur](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4pfmi67ypsq9i20k3cn.jpg)

### CONTRÔLEUR = SERVEUR

Le composant Controller de l'architecture MVC gère le flux de données et les interactions entre les composants Model et View. Il reçoit les entrées de l'utilisateur via la vue, les traite et met à jour le modèle en conséquence.

![serveur](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5b1hapkylez0gfkaus4p.jpg)

On utilise des langages backend pour écrire le serveur, comme PHP, Python ou Ruby.

## En bref, ça se passe comme ça

![schéma récapitulatif du MVC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u0dtndoxofm5pyeaty0u.jpg)

Le modèle Model-View-Controller (MVC) aide à organiser le code en séparant les préoccupations en trois composants distincts.

Le composant Model **gère les données** et la logique métier
Le composant View** gère la présentation** de l'interface utilisateur
Le composant Controller** gère le flux de données **et les interactions entre le modèle et la vue.

Le modèle MVC est important dans le développement de logiciels car il promeut un code modulaire plus facile à maintenir et à tester. De plus, il rend la collaboration entre les membres de l'équipe plus efficace en fournissant des directives claires sur la façon dont le code doit être organisé.