Strasbourg - Nancy - Epinal
07 82 44 81 95

L’architecture MVC expliquée

Le concept MVC prend de l’ampleur dans le monde technique du web, c’est pourquoi MoonsterWeb se devait de vous en parler.

Qu’est ce que le MVC ? Le MVC est un concept de programmation ayant pour objectif de structurer son code selon des normes de conception. Vous l’aurez bien compris, cet article intéressera plus les développeurs que le commun des mortels. Cet article est donc dédié au monde technique.

Techniquement, le concept MVC est un concept qui à pour objectif de séparer le code en trois composantes:
– La Vue : C’est à dire tout le code Front-office qui sera visible pour les utilisateurs.
– Le Model : C’est à dire tout le code qui aura pour but d’interagir avec la base de donnée.
– Le Controller : C’est à dire tout le code qui aura pour objectif de recevoir des instructions de la vue pour les transmettre au model et vis versa.

Quel sont les avantages du concept MVC ?
– Il permettra à plusieurs corps de métier de travailler sur la même application/site web. Par exemple, le Web-designer pourra travailler sur la Vue, le développeur pourra travailler sur le Controller et le DBA pourra travailler sur le Model. Ainsi, tout les acteurs du projet pourront travailler chacun de leur coté sans entrer en conflit avec un tiers.
– Il permet d’obtenir un code plus propre et donc plus facile à maintenir par la suite ! En cas de problème visuel, nous savons que nous devons intervenir dans le code de la Vue. En cas de problème concernant une requête, nous savons qu’il faille absolument intervenir dans le code du model.
– Il permettra de changer de charte graphique beaucoup plus facilement car seul la Vue sera retouchée.
– D’avoir une vision plus globale et plus propre de son code et de sa structure.

Techniquement, comment ça se passe ?
La règle technique numéro 1 est de ne jamais écrire de code serveur dans la vue et jamais de code client dans le Controller et le model.
Votre site web ou votre application devra respecter cette arborescence :
– /View : C’est là où sera présent tout le code client, c’est à dire vos Templates HTML, vos styles CSS et votre code client Javascript/Jquery.
– /Controller : Vous placerez ici votre controller principal. Votre controller principal aura pour seul et unique but d’appeler les fonctions de vos classes ( le Model ) et de transmettre le résultat de ces fonctions à la Vue.
– /Model : Vous placerez ici le code qui ira chercher les données directement dans la base de données. Vous écrirez donc dans ce dossier toutes vos classes Objets. Pour cela, le langage SQL couplé au langage serveur (SQL et PHP/mySQL ou ASP/SQLServeur) ainsi que de solides connaissances en langages orientés Objet seront des connaissances requises.

L’exemple par le scénario : Je veux écrire une application ayant pour but d’afficher des articles.
Etape 1 : Création de la table « Articles » dans la base de données
Etape 2 : Création de la classe Articles et de ses fonctions de manipulation de la table dans le modèle Article.php. Dans notre cas, création d’une fonction de manipulation permettant d’aller chercher tout les articles de la base de données que nous nommerons GetAllArticles() contenant une requête SQL du type (« Select * from Articles; »).
Etape 3 : Création du code pour récuperer le résultat de la fonction dans le controller $lesarticles = Articles::GetAllArticles();
Etape 4 : Transmission des articles récupérés dans le modèle à la Vue. Display(« templateArticle.tpl », Array($lesarticles));
Etape 5 : Dans le code de la vue et plus particulièrement dans la template templateArticle.tpl, nous nous servons du tableau $article transmis par le Controller pour les afficher à l’utilisateur.
Etape 6 : Appréciez votre réussite.

Le modèle MVC est assez compliqué à comprendre, d’autant plus qu’il existe de multitude de façon de représenter ce concept. MoonsterWeb vous en a aujourd’hui montré une mais d’autre représentations MVC existent sans qu’aucune ne soit « LA » solution ultime.

Quels outils peuvent m’aider à la mise en place de MVC ?
Il est très difficile de mettre en place un concept MVC de zéro. C’est pourquoi MoonsterWeb vous conseil l’utilisation de liaison de micro-frameworks. Pour cela, téléchargez et utilisez :
– Le micro-framework Laravel pour le model : Il vous permettra d’économiser un temps fou car son moteur est basé sur un principe de récupération des données par fonction et non par SQL.
– Le micro-framework SLIM pour le controller : Idéal pour la mise en place de routes ( RewriteUrl ).
– Le micro-framework TWIG pour la Vue : TWIG à fais ses preuves avec le framework Synphony vous permettera de réaliser des interfaces en HTML/CSS très facilement tout en manipulant le résultat du controller.
– Si vous travaillez sous linux, le package Composer vous aidera à mettre en place ces outils

Les frameworks tel que Synphony ou encore Zend vous obligerons également à programmer avec le concept MVC.

Ressources pour vous aider à télécharger les outils nécessaires :
– Téléchargez le micro-framework Laravel ici
– Téléchargez le micro-framework SLIM ici
– Téléchargez le micro-framework Twig ici
– Télécharger le framework complet Synphony ici

La conclusion MoonsterWeb : Toutes les applications où les sites internet qui sortent chaque jours de chez MoonsterWeb sont développés en respectant MVC. Nous tenons à  respecter ces normes car elles nous sont très utiles par la suite pour la maintenance de nos systèmes. Nous encourageons les développeurs à s’orienter vers ce concept parfois difficile à apprendre mais très bénéfique par la suite.

Si vous désirez une formation en programmation orienté objet sous le concept MVC contactez-nous dès maintenant par téléphone au 07 82 44 81 95 ou contactez-nous par E-mail sur contact@moonsterweb.fr. Des formations dans nos locaux à Epinal avec un formateur diplômé en conception web.

Autre formations :
– Formation PrestaShop / WordPress / Magento
– Formation HTML5/CSS3 niveau débutant / intermédiaire / Pro / Expert.
– Formation Javascript / Framework Jquery tout niveaux
– Formation Programmation pure / Algorithmique.
– Formation PHP5 / mySql tout niveaux
– Formation référencement naturel SEO

Toutes ces formations sont disponibles sur Strasbourg. Possibilité de se rendre dans vos locaux pour former vos salariés.

A bientôt pour de nouvelles aventures Moonsteresques…

Articles associés