Un site Web avec Laravel

Les étapes

    Les fichiers ajoutés ou modifiés dans cette partie sont disponibles ici. Chaque étape est disponible sur Github sous forme de tag.

  1. Installer l'application Laravel

    1. Créer le dossier projetlaravel
    2. Ouvrir le dossier dans le Visual Studio Code
    3. Dans le volet terminal, exécuter la commande composer create-project --prefer-dist laravel/laravel . "5.4.*"
    4. Regarder le contenu du dossier dans l'arborescence de fichiers.
    5. Exécuter php artisan serve
    6. Ouvrir le site dans Chrome
    7. Réarranger les fenêtres en panneaux
    8. Regarder le fichier public/robots et le modifier en observant les changements dans le fureteur. Remettre le fichier à sa forme d'origine.

  2. Les routes

    1. Ouvrir le fichier routes/web.php
    2. Modifier l'adresse et la valeur de retour et tester le résultat.
    3. Dupliquer la route (garder la route originale avec l'adresse "/welcome")
    4. Faire afficher "Dans la route"
    5. Changer l'action pour le controller "UserController@index"
    6. Tester la page et constater l'erreur.

  3. Créer le model et les controllers

    1. Regarder le contenu des dossiers /app et /app/http/controllers ainsi que le fichier /app/User.php
    2. Rouvrir le dossier du projet dans le Terminal (une nouvelle fenêtre).
    3. Exécuter php artisan list
    4. Regarder les commandes possibles, dont make:model et make:controller
    5. Exécuter php artisan make:model Post -mrc
    6. Regarder les nouveaux fichiers /app/Post.php et /app/http/controllers/PostController.php
    7. Exécuter php artisan make:controller UserController -r
    8. Ouvrir le fichier UserController.php et regarder les méthodes ajoutées par l'option r
    9. Ajouter l'instruction return "Dans le controller"; dans la méthode (ou action) index()
    10. Tester la page.

  4. Créer un user

    1. Regarder le fichier User.php. On n'a rien à faire ici pour l'instant.
    2. Retourner à l'action UserController@index.
    3. Ajouter l'instruction $user = new User(); et constater l'erreur.
    4. Ajouter temporairement le namespace : $user = new \App\User(); et ça marche.
    5. Ajouter l'instruction use App\User; ou use App\User as User; avant la définition de la classe.
    6. Enlever le namespace.
    7. Retourner la variable $user et tester la page. Affiche un tableau vide en JSON.
    8. Ajouter l'instruction $user->prenom = "Rita";
    9. Ajouter l'instruction $user->nom = "Raté";
    10. Tester la page.

  5. Ajouter un user bidon avec le Faker

    1. Ajouter l'instruction $f = \Faker\Factory::create("fr_CA"); au début de la méthode.

    2. Mettre des données bidon avec le Faker

      $user->prenom = $f->firstName();
      $user->nom = $f->lastName();
      $user->email = $f->lastName();
      $user->tel = $f->phoneNumber();
      $user->adresse = $f->streetAddress();
      $user->ville = $f->city();
      $user->province = $f->state();
      $user->codepostal = $f->postcode();
      $user->citation = $f->paragraph();
    3. Voir l'aide du Faker

    4. Placer le code dans le model User.php en créant une fonction statique.

      static public function fake() {
      $f = \Faker\Factory::create("fr_CA");
      $resultat = new self();
      $resultat->prenom = $f->firstName();
      $resultat->nom = $f->lastName();
      $resultat->email = \Str::slug($resultat->prenom.$resultat->nom, '')
      .'@'.$f->domainName();
      $resultat->tel = $f->phoneNumber();
      $resultat->adresse = $f->streetAddress();
      $resultat->ville = $f->city();
      $resultat->province = $f->state();
      $resultat->codepostal = $f->postcode();
      $resultat->citation = $f->paragraph();
      return $resultat;
      }
    5. Utiliser la méthode dans le controller. $user = User::fake();

  6. Utilisation de la view

    1. Dans le controller UserController@index, faire afficher la view users.index : return view("users.index");
    2. Créer la view users.index : c'est à dire créer le dossier /resources/views/users et le fichier /resources/views/users/index.blade.php
    3. Ajouter {{$user}} et sauvegarder.
    4. Tester et constater l'erreur.
    5. Envoyer la variable user à la view : return view("users.index", ['user'=>$user]);
    6. Tester et constater l'affichage au format JSON.

    7. Dans la view, faire afficher chaque information individuellement.

      <h1>{{$user->prenom}} {{$user->nom}}</h1>
      <div>{{$user->email}}</div>
      <div>{{$user->tel}}</div>
      <div>{{$user->adresse}}</div>
      <div>{{$user->ville}} {{$user->province}}</div>
      <div>{{$user->codepostal}}</div>
      <p>{{$user->citation}}</p>

  7. Ajout du template

    1. Télécharger un template de templatemo.com
    2. Mettre le contenu du dossier dans le dossier public
    3. Visiter la page http://localhost:8000/index.html
    4. Mettre les pages HTML dans le dossier public/interface et les renommer nom_de_la_view.blade.php
    5. Dans le controller, faire temporairement afficher la view interface.index. return view("interface.index");
    6. Faire une normalisation partielle de l'interface en fonction du template choisi. Typiquement, créer des fichiers : header.blade.php, footer.blade.php, content.blade.php, top.blade.php, bottom.blade.php, nav.blade.php...
    7. Ajouter les @include et tester.

  8. La page maîtresse

    1. Repérer la zone principale du contenu.
    2. Ajouter au début @section("contenu") et à la fin @show.
    3. Optionnelement, faire afficher $user pour voir s'afficher sa valeur.
    4. Dans le controller, remettre la view "users.index" (Ça ne changera plus)
    5. Au début de la view "users.index", ajouter la commande @extends("contenu")
    6. Envelopper le contenu existant de @section("contenu") et @endsection
    7. Ajouter une autre section dans la page maîtresse et dans la page pour afficher spécifiquement le nom.

  9. Le component

    1. Créer la view interface.post avec le html d'un post du template.
    2. Rendre le post générique en ajoutant des variables.
    3. Dans la boucle de la view users.index, tester l'appel à cette view en lui envoyant des données pour les variables.
    4. Envelopper le contenu de la section des commandes @component("interface.post") et @endcomponent

    5. Pour chacune des variables du component (donc, de la view) créer une slot

      @slot("nom_de_la_variable")
      <h2>{{$bidule}}</h2>
      @endslot

  10. La boucle

    1. Dans le controller, créer un tableau $users avec plusieurs objets User et l'envoyer à la view.

      $users = [];
      for ($i = 0; $i < 10; $i += 1) {
      $users[] = User::fake();
      }
      return view("users.index", ['users'=>$users]);

    2. Dans la view, ajouter une boucle qui enveloppe le contenu de la section avec @foreach($users as $user) et @endforeach

    3. Voir le cheatsheet sur Blade pour les autres commandes possibles.