Écrit par Alexandre Buleté

Mise à jour le 20 juillet 2019 | Difficulté : moyen

  0 Avis  |  1.7K views

Architecture MVC

Nous voici donc sur la page d’accueil de notre application web. Super ! Mais que voit-on ? Quels sont les fichiers à l’origine de cette page ? Pour cela dirigeons nous vers le fichier web.php situé dans le dossier « routes ».


/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function() {
  return view('welcome');
});

Nous pouvons voir que la route ‘/’ return une method « view » avec comme paramètre welcome. Qu’est-ce-que tout cela veut dire ? Cela veut dire que pour la route ‘/’ (donc la homepage) on retourne une vue (view) appelé welcome. Qui se trouve plus précisément dans resources/views/welcome.blade.php (Blade étant le moteur de template utilisé par Laravel, nous verrons cela plus tard).

Chemin du fichier welcome.blade.php de votre projet Laravel (resources/views/welcome.blade.php)

Si nous ouvrons le fichier nous pouvons voir le html et le style présent sur la page d’accueil. Avant d’aller plus loin voyons pourquoi nous parlons de « vues » (views).

1. L’architecture MVC

Laravel, comme une grande partie des autres framework php, a une architecture dite MVC (Model – View – Controller). Voici une illustration simple pour vous faire comprendre rapidement la logique de cette architecture.

MVC (Modèle View Controller) Illustration - walkerspider

Chaque action de l’utilisateur passe par le contrôleur (controller) qui envoie des demandes de manipulation d’un objet au modèle. Le modèle (model) effectue les changements de l’objet et le renvoie au contrôleur qui à son tour le passe à la vue (view). Ainsi ces trois pôles ont des responsabilités différentes :
Le model contient les données et leur logique.
La view contient la présentation graphique à renvoyer à l’utilisateur.
Le controller traite les actions utilisateur (via des requêtes), demande au modèle d’effectuer les changements, puis passe les données à la vue.

Le controller a donc une place centrale dans cette architecture. Il est le pont entre les interactions utilisateur et les traitements de données. Tout passe par lui afin de pouvoir tout contrôler… d'où son nom. :p

2. Les assets

Le deuxième fonctionnement important à connaître pour débuter avec Laravel sont les assets. Ils se trouvent dans : /resources. Il s'agit des dossiers js et sass. Ces dossiers ont subi un léger changement d'emplacement depuis la 5.7 (avant ils se trouvaient dans resources/assets maintenant ils se trouvent directement dans /resources).

Cette partie vous permettra d’organiser vos fichiers javascript (dans le dossier js) et vos feuilles de style (dans le dossier Sass). Pour ceux qui ne connaissent pas Sass pour vous expliquer brièvement cela vous permet d’avoir du code CSS :
• mieux écrit et moins dense avec un système d’indentation, créer des boucles (comme un foreach en php) etc…
• Utiliser des variables. Même s’il est vrai que cela est possible en CSS également vous verrez que c’est tout de même plus « sexy » en Sass.
• Utiliser des mixins, ce sont des sortes de fonctions qui peuvent renvoyer plusieurs lignes de code CSS. Elles peuvent donc prendre des paramètres et permettent de réutiliser du CSS en incluant votre mixin où vous le souhaitez.

Vous gagnerez en temps et en visibilité pour ceux qui aiment styliser eux-mêmes : mettez-vous-y vous allez vous régaler ! ;)
Pour ceux qui désirent en savoir plus sur Sass : Site Officiel de Sass.

Attardons-nous donc un peu sur les assets Sass. De base, vous pouvez voir que vous avez un fichier app.scss et un fichier _variables.scss. Les fichiers commençant par « _ » sont des partials, c’est-à-dire que ce sont des portions de votre feuille de style globale.
app.scss est donc le fichier qui regroupera tous les partials via des import.

En l’ouvrant, vous voyez qu’il importe effectivement une font externe (la Nunito pour la 5.7), le fichier partial variables et Bootstrap. Donc, l’ensemble de la librairie Bootstrap est importée ici. Si vous voulez donc importer votre propre librairie CSS vous pouvez placer directement vos partials et votre app.scss dans ce dossier Sass.

3. Compiler nos assets grâce à npm

Nous allons maintenant installer npm qui est le gestionnaire de paquets officiel de Node.js. (Node est une plateforme de logiciel libre et événementielle en Javascript). Il nous permettra de compiler nos assets et d’envoyer la version compilée dans notre dossier « public ». Pour l’installer, ouvrez votre console et lancez :

npm install

Après le téléchargement vous retrouvez le colossale dossier node_modules dans votre dossier racine Laravel.

Ok mais comment il sait quels fichiers il doit regarder et où il doit les compiler ?

En lui indiquant dans le fichier webpack.mix.js à la racine de votre projet.


const mix = require('laravel-mix');

/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');
   

C’est dans ce fichier que vous définissez les fichiers à compiler et où les envoyer.
Hormis si vous désirez une config différente vous n’avez rien à modifier dans ce fichier. Les assets app.js et app.scss sont déjà ciblés et leurs dossiers de destination respectifs également. Pour tester cela nous allons lancer le watcher avec la commande suivante :

npm run watch

Ouvrez ensuite votre fichier app.scss, effacez son contenu et mettez-y le style qui était présent dans la balise style de la vue. Écrivez-le avec l'indentation de Sass afin de tester rapidement la compilation).


// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

$grey-laravel : #636b6f;

html, body {
  background-color: #fff;
  color: $grey-laravel;
  font-family: 'Nunito', sans-serif;
  font-weight: 200;
  height: 100vh;
  margin: 0;
  .full-height {
    height: 100vh;
  }
  .position-ref {
    position: relative;
  }
  .flex-center {
    align-items: center;
    display: flex;
    justify-content: center;
    .content {
      text-align: center;
      .title {
        font-size: 84px;
      }
      .links > a {
        color: $grey-laravel;
        padding: 0 25px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .1rem;
        text-decoration: none;
        text-transform: uppercase;
      }
      .m-b-md {
        margin-bottom: 30px;
      }
    }
  }
  .top-right {
    position: absolute;
    right: 10px;
    top: 18px;
  }
}

Enregistrez et allez voir votre fichier app.css dans /public :

Vous pouvez voir que la valeur de notre variable $grey-laravel a été placée là où nous l'appelions, que l'indentation du Sass a été remplacée etc…

À chaque enregistrement du fichier Scss le watcher compile comme un grand tout ceci en CSS et réédite le fichier CSS se trouvant dans le dossier public. La console vous permet de voir si la compilation a correctement été effectuée mais également de débugger si jamais il y a une erreur. Pas besoin non plus de relancer la commande, il lancera la compilation à chaque sauvegarde de vos fichiers Sass (pas mal non).

Il ne vous reste plus qu’à ajouter le lien de votre style dans la vue comme ceci :

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

Vos fichiers views se trouvent également dans le dossier « resources ».

Les {{ }} sont propres au moteur de template blade. Nous reviendrons sur blade plus tard car il nous faut voir encore un système important : le routing.

Avis

N'hésitez pas à laisser votre avis. Actuellement 0 avis sur ce cours

Note Globale :

Classer par …  

Date

Rate

Dans l'ordre…  

Croissant

Décroissant

notez et laissez un avis

--/5

connectez-vous pour laisser un avis

Vous n'avez pas de compte ? Inscrivez-vous ici.