-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcours1.html
199 lines (199 loc) · 11.6 KB
/
cours1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="etapes.css"/>
<script src="etapes.js"></script>
<title>Étapes</title>
</head>
<body>
<div class="interface">
<header>
<h1>Un site Web avec Laravel</h1>
<h2>Les étapes</h2>
</header>
<nav></nav>
<footer>Les vidéos sont disponibles sur <a href="https://www.youtube.com/channel/UCFWzWuHnqYOlBN2lJhBIGNg">la chaîne Youtube</a></footer>
<div class="body">
<ol start="1">
<p style="padding:1em; border:1px solid black;">
Les fichiers ajoutés ou modifiés dans cette partie sont disponibles <a href="projetlaravel1.zip">ici</a>.
Chaque étape est disponible sur <a href="https://github.com/web3cstj/projetlaravel">Github</a> sous forme de tag.
</p>
<li id="installation" data-video="sZ8crC_QQKU">
<h2>Installer l'application <cite>Laravel</cite></h2>
<ol>
<li>Créer le dossier <span class="fichier">projetlaravel</span></li>
<li>Ouvrir le dossier dans le <cite class="app">Visual Studio Code</cite></li>
<li>Dans le volet terminal, exécuter la commande <span class="commande copiable">composer create-project --prefer-dist laravel/laravel . "5.4.*"</span></li>
<li>Regarder le contenu du dossier dans l'arborescence de fichiers.</li>
<li>Exécuter <span class="commande copiable">php artisan serve</span></li>
<li>Ouvrir le site dans <cite class="app">Chrome</cite></li>
<li>Réarranger les fenêtres en panneaux</li>
<li>Regarder le fichier <span class="fichier">public/robots</span> et le modifier en observant les changements dans le fureteur. Remettre le fichier à sa forme d'origine.</li>
</ol>
</li>
<li id="routes" data-video="N0pxSP6-ou4">
<h2>Les routes</h2>
<ol>
<li>Ouvrir le fichier <span class="fichier">routes/web.php</span></li>
<li>Modifier l'adresse et la valeur de retour et tester le résultat.</li>
<li>Dupliquer la route (garder la route originale avec l'adresse <span class="string">"/welcome"</span>)</li>
<li>Faire afficher <span class="string">"Dans la route"</span></li>
<li>Changer l'action pour le controller <span class="string">"UserController@index"</span></li>
<li>Tester la page et constater l'erreur.</li>
</ol>
</li>
<li id="modelcontroller" data-video="j2-moIHddWU">
<h2>Créer le model et les controllers</h2>
<ol>
<li>Regarder le contenu des dossiers <span class="fichier">/app</span> et <span class="fichier">/app/http/controllers</span> ainsi que le fichier <span class="fichier">/app/User.php</span></li>
<li>Rouvrir le dossier du projet dans le <cite>Terminal</cite> (une nouvelle fenêtre).</li>
<li>Exécuter <span class="commande copiable">php artisan list</span></li>
<li>Regarder les commandes possibles, dont <code>make:model</code> et <code>make:controller</code></li>
<li>Exécuter <span class="commande copiable">php artisan make:model Post -mrc</span></li>
<li>Regarder les nouveaux fichiers <span class="fichier">/app/Post.php</span> et <span class="fichier">/app/http/controllers/PostController.php</span></li>
<li>Exécuter <span class="commande copiable">php artisan make:controller UserController -r</span></li>
<li>Ouvrir le fichier <span class="fichier">UserController.php</span> et regarder les méthodes ajoutées par l'option <span class="string">r</span></li>
<li>Ajouter l'instruction <code class="php copiable">return "Dans le controller";</code> dans la méthode (ou action) <code>index()</code></li>
<li>Tester la page.</li>
</ol>
</li>
<li id="nouveauuser" data-video="7zmz8vZjLKM">
<h2>Créer un user</h2>
<ol>
<li>Regarder le fichier <span class="fichier">User.php</span>. On n'a rien à faire ici pour l'instant.</li>
<li>Retourner à l'action <span class="controller">UserController@index</span>.</li>
<li>Ajouter l'instruction <code class="php copiable">$user = new User();</code> et constater l'erreur.</li>
<li>Ajouter temporairement le <cite>namespace</cite> : <code class="php copiable">$user = new <b>\App\</b>User();</code> et ça marche.</li>
<li>Ajouter l'instruction <code class="php copiable">use App\User;</code> ou <code class="php copiable">use App\User as User;</code> avant la définition de la classe.</li>
<li>Enlever le <cite>namespace</cite>.</li>
<li>Retourner la variable <var>$user</var> et tester la page. Affiche un tableau vide en JSON.</li>
<li>Ajouter l'instruction <code class="php copiable">$user->prenom = "Rita";</code></li>
<li>Ajouter l'instruction <code class="php copiable">$user->nom = "Raté";</code></li>
<li>Tester la page.</li>
</ol>
</li>
<li id="faker" data-video="WhANPheGAao">
<h2>Ajouter un user bidon avec le Faker</h2>
<ol>
<li>Ajouter l'instruction <code class="php copiable">$f = \Faker\Factory::create("fr_CA");</code> au début de la méthode.</li>
<li><p>Mettre des données bidon avec le Faker</p>
<div class="bloccode php copiable">
<div>$user->prenom = $f->firstName();</div>
<div>$user->nom = $f->lastName();</div>
<div>$user->email = $f->lastName();</div>
<div>$user->tel = $f->phoneNumber();</div>
<div>$user->adresse = $f->streetAddress();</div>
<div>$user->ville = $f->city();</div>
<div>$user->province = $f->state();</div>
<div>$user->codepostal = $f->postcode();</div>
<div>$user->citation = $f->paragraph();</div>
</div>
</li>
<li>Voir l'aide du <a href="https://github.com/fzaninotto/Faker" target="_blank">Faker</a></li>
<li><p>Placer le code dans le model <span class="fichier">User.php</span> en créant une fonction statique.</p>
<div class="bloccode php copiable">
<div>static public function fake() {</div>
<div> $f = \Faker\Factory::create("fr_CA");</div>
<div> $resultat = new self();</div>
<div> $resultat->prenom = $f->firstName();</div>
<div> $resultat->nom = $f->lastName();</div>
<div> $resultat->email = \Str::slug($resultat->prenom.$resultat->nom, '')</div>
<div> .'@'.$f->domainName();</div>
<div> $resultat->tel = $f->phoneNumber();</div>
<div> $resultat->adresse = $f->streetAddress();</div>
<div> $resultat->ville = $f->city();</div>
<div> $resultat->province = $f->state();</div>
<div> $resultat->codepostal = $f->postcode();</div>
<div> $resultat->citation = $f->paragraph();</div>
<div> return $resultat;</div>
<div>}</div>
</div>
</li>
<li>Utiliser la méthode dans le controller. <span class="php copiable">$user = User::fake();</span></li>
</ol>
</li>
<li id="view" data-video="YGlbmKL-DiU">
<h2>Utilisation de la view</h2>
<ol>
<li>Dans le controller <span class="controller">UserController@index</span>, faire afficher la view <span class="view">users.index</span> : <span class="php copiable">return view("users.index");</span></li>
<li>Créer la view <span class="view">users.index</span> : c'est à dire créer le dossier <span class="fichier">/resources/views/users</span> et le fichier <span class="fichier">/resources/views/users/index.blade.php</span></li>
<li>Ajouter <span class="blade copiable">{{$user}}</span> et sauvegarder.</li>
<li>Tester et constater l'erreur.</li>
<li>Envoyer la variable <var>user</var> à la view : <span class="php copiable">return view("users.index", ['user'=>$user]);</span></li>
<li>Tester et constater l'affichage au format JSON.</li>
<li><p>Dans la view, faire afficher chaque information individuellement.</p>
<div class="bloccode blade copiable">
<div><h1>{{$user->prenom}} {{$user->nom}}</h1></div>
<div><div>{{$user->email}}</div></div>
<div><div>{{$user->tel}}</div></div>
<div><div>{{$user->adresse}}</div></div>
<div><div>{{$user->ville}} {{$user->province}}</div></div>
<div><div>{{$user->codepostal}}</div></div>
<div><p>{{$user->citation}}</p></div>
</div>
</li>
</ol>
</li>
<li id="template" data-video="a277KeS9nn0">
<h2>Ajout du template</h2>
<ol>
<li>Télécharger un template de <a target="_blank" href="http://templatemo.com">templatemo.com</a></li>
<li>Mettre le contenu du dossier dans le dossier <span class="fichier">public</span></li>
<li>Visiter la page <a href="http://localhost:8000/index.html">http://localhost:8000/index.html</a></li>
<li>Mettre les pages HTML dans le dossier <span class="fichier">public/interface</span> et les renommer <span class="fichier">nom_de_la_view.blade.php</span></li>
<li>Dans le controller, faire temporairement afficher la view <span class="view">interface.index</span>. <span class="php copiable">return view("interface.index");</span></li>
<li>Faire une normalisation partielle de l'interface en fonction du template choisi. Typiquement, créer des fichiers : <span class="fichier">header.blade.php</span>, <span class="fichier">footer.blade.php</span>, <span class="fichier">content.blade.php</span>, <span class="fichier">top.blade.php</span>, <span class="fichier">bottom.blade.php</span>, <span class="fichier">nav.blade.php</span>...</li>
<li>Ajouter les <code>@include</code> et tester.</li>
</ol>
</li>
<li id="pagemaitresse" data-video="wFBQBunvK4g">
<h2>La page maîtresse</h2>
<ol>
<li>Repérer la zone principale du contenu.</li>
<li>Ajouter au début <span class="blade copiable">@section("contenu")</span> et à la fin <span class="blade copiable">@show</span>.</li>
<li>Optionnelement, faire afficher <var>$user</var> pour voir s'afficher sa valeur.</li>
<li>Dans le controller, remettre la view <span class="view">"users.index"</span> (Ça ne changera plus)</li>
<li>Au début de la view <span class="view">"users.index"</span>, ajouter la commande <span class="blade copiable">@extends("contenu")</span></li>
<li>Envelopper le contenu existant de <span class="blade copiable">@section("contenu")</span> et <span class="blade copiable">@endsection</span></li>
<li>Ajouter une autre section dans la page maîtresse et dans la page pour afficher spécifiquement le nom.</li>
</ol>
</li>
<li id="component" data-video="hvtjfrZkY7c">
<h2>Le component</h2>
<ol>
<li>Créer la view <span class="view">interface.post</span> avec le html d'un post du template.</li>
<li>Rendre le post générique en ajoutant des variables.</li>
<li>Dans la boucle de la view <span class="view">users.index</span>, tester l'appel à cette view en lui envoyant des données pour les variables.</li>
<li>Envelopper le contenu de la section des commandes <span class="blade copiable">@component("interface.post")</span> et <span class="blade copiable">@endcomponent</span></li>
<li><p>Pour chacune des variables du component (donc, de la view) créer une slot</p>
<div class="bloccode blade copiable">
<div>@slot("nom_de_la_variable")</div>
<div> <h2>{{$bidule}}</h2></div>
<div>@endslot</div>
</div>
</li>
</ol>
</li>
<li id="boucle" data-video="VBApEJY0U3E">
<h2>La boucle</h2>
<ol>
<li><p>Dans le controller, créer un tableau <var>$users</var> avec plusieurs objets <var>User</var> et l'envoyer à la view.</p>
<div class="bloccode php copiable">
<div>$users = [];</div>
<div>for ($i = 0; $i < 10; $i += 1) {</div>
<div> $users[] = User::fake();</div>
<div>}</div>
<div>return view("users.index", ['user<strong>s</strong>'=>$user<strong>s</strong>]);</div>
</div>
</li>
<li><p>Dans la view, ajouter une boucle qui enveloppe le contenu de la section avec <span class="blade copiable">@foreach($users as $user)</span> et <span class="blade copiable">@endforeach</span></p></li>
<li>Voir le <a href="https://learninglaravel.net/cheatsheet/#blade" target="_blank">cheatsheet sur <var>Blade</var></a> pour les autres commandes possibles.</li>
</ol>
</li>
</ol>
</div>
</div>
</body>
</html>