TP Laravel: Système de gestion d'un établissement

scolaire avec Laravel 8 06/03/2024

1 Création du projet & configuration de la base de données

1.1 pour commencer créer un nouveau projet Laravel 8:

1 composer create-project laravel/laravel manageSchool

1.2 Configurer ensuite la base de donnée mysql au niveau du fichier

.env

1 DB_CONNECTION=mysql
2 DB_HOST=127.0.0.1
3 DB_PORT=3306
4 DB_DATABASE=manageSchool
5 DB_USERNAME=root
6 DB_PASSWORD=

1.3 Créer ensuite la base de donnée manageSchool au niveau de

phpMyAdmin.

1.4 Effectuer ensuite la migration

La migration s'effectue à l'aide de la commande:

1 php artisan migrate

TP Laravel: Système de gestion d'un établissement
scolaire avec Laravel 8 06/03/2024
A ce moment là, Laravel vous crée automatiquement 4 tables mysql:

2 Création du modèle Student

Afin de pouvoir gérer les étudiant via un système de CRUD, nous devons créer un
modèle Students:

1 php artisan make:model Student -m

A ce niveau là, Laravel vous crée automatiquement les deux fichiers:

1. app/Models/Students.php
2. database/migrations/create_students_table.php
Ajouter ensuite les attributs nécessaires à la gestion des étudiants au modèle
Students:
database/migrations/create_students_table.php
1 public function up()
2 {
3 Schema::create('students', function (Blueprint $table) {
4 $table->id();
5 $table->string('name');
6 $table->string('email');
7 $table->integer('phone');
8 $table->string('section');
9 $table->string('image');
10 $table->timestamps();
TP Laravel: Système de gestion d'un établissement
scolaire avec Laravel 8 06/03/2024

11 });
12 }

3 Création du contrôleur
Afin que notre application soit un système de CRUD valide, il faut qu'elle soit dotée
d'un contrôleur. Laravel 8 crée le contrôleur automatiquement à l'aide de la
commande make:controller et si on veut créer les méthodes au sein du contrôleur
on ajoute à la fin de la commande: --resource:

1 php artisan make:controller StudentsController --resource

Cela crée automatiquement le
fichier app/Http/Conrollers/StudentsController.php qui contient une classe
nommée StudentsController.
La commande –resources qui a été ajoutée à la fin de la commande, avait pour rôle
la création de 7 méthodes au sein de la classe StudentsController:

1. index(): utilisée pour afficher la liste des étudiants.

2. create(): affichera le formulaire ou la vue pour créer un étudiant.
3. store(): utilisée pour insérer un étudiant dans la base de données.
(Remarque: la méthode create submit les données du formulaire à la méthode
store()).
4. show(): affichera un étudiant spécifié.
5. edit(): affichera le formulaire pour éditer un étudiant. Le formulaire sera
rempli avec les données de l'étudiant existant).
6. update(): utilisée pour mettre à jour un étudiant dans la base de données.
Remarque: la méthode edit() submit les données du formulaire à la méthode
update()).
7. destroy(): utilisée pour supprimer un étudiant spécifié.
Code du fichier app/Http/Conrollers/StudentsController.php:

1 <?php
2 namespace App\Http\Controllers;
3 use Illuminate\Http\Request;
4
TP Laravel: Système de gestion d'un établissement
scolaire avec Laravel 8 06/03/2024

5 class StudentsController extends Controller{

6 /**
7 * Display a listing of the resource.
8 *
9 * @return \Illuminate\Http\Response
10 */
11 public function index() {
12 //
13 }
14
15 /**
16 * Show the form for creating a new resource.
17 *
18 * @return \Illuminate\Http\Response
19 */
20 public function create() {
21 //
22 }
23
24 /**
25 * Store a newly created resource in storage.
26 *
27 * @param \Illuminate\Http\Request $request
28 * @return \Illuminate\Http\Response
29 */
30 public function store(Request $request) {
31 //
TP Laravel: Système de gestion d'un établissement
scolaire avec Laravel 8 06/03/2024

32 }
33
34 /**
35 * Display the specified resource.
36 *
37 * @param int $id
38 * @return \Illuminate\Http\Response
39 */
40 public function show($id) {
41 //
42 }
43
44 /**
45 * Show the form for editing the specified resource.
46 *
47 * @param int $id
48 * @return \Illuminate\Http\Response
49 */
50 public function edit($id) {
51 //
52 }
53
54 /**
55 * Update the specified resource in storage.
56 *
57 * @param \Illuminate\Http\Request $request
58 * @param int $id
TP Laravel: Système de gestion d'un établissement
scolaire avec Laravel 8 06/03/2024

59 * @return \Illuminate\Http\Response
60 */
61 public function update(Request $request, $id) {
62 //
63 }
64
65 /**
66 * Remove the specified resource from storage.
67 *
68 * @param int $id
69 * @return \Illuminate\Http\Response
70 */
71 public function destroy($id) {
72 //
73 }
74 }

4 Définition des routes et des views

Les routes pour laravel8 sont gérées au niveau du fichier route/web.php. Afin de
pouvoir ajouter correctement des routes qui pointent vers des views, on doit
préalablement créer le template de base et les views:

4.1 Création du template de base resources/view/layout.blade.php

1. créer ou télécharger un template bootstrap et renommer le layout.blade.php

2. mettez le fichier layout.blade.php au sein du dossier resources/view pour obtenir
à la fin, le fichier resources/view/layout.blade.php (ce fichier va être utilisé comme
template de base pour notre application)
3. placer ensuite les fichiers du bootstrap bootstrap.min.css dans un
dossier public/css/ et bootstrap.bundle.min.js dans le dossier public/js/ (les
TP Laravel: Système de gestion d'un établissement
scolaire avec Laravel 8 06/03/2024
dossiers public/css/ et public/js/ doivent être crées lorsqu'ils n'existent pas!)
4. lier ensuite les feuilles .css .js du bootstrap en ajoutant le code suivant:

1 <link rel="stylesheet" href="/css/bootstrap.min.css">

2 <script src="js/bootstrap.bundle.min.js" ></script>
5. ajouter les tags nécessaire pour faire un héritage au fichier
resources/view/layout.blade.php

1 @yield('content')
6. créer ensuite le fichier: index.blade.php au sein du dossier resources/view/ et y
ajouter les balises d'héritage:

1 @extends('layout')
2 @section('content')
3 <!-- Content here ! -->
4 @endsection
7. Faite la même chose pour les fichiers , create.blade.php , edit..blade.php,
update.blade.php et delete.blade.php (vous devez créer ces fichiers).

4.2 Création des routes

Pour créer une route, rien de plus simple, il suffit d'utiliser l'objet Root et d'indiquer
le suffixe souhaité pour l'url de l'application et le controller de l'application au
niveau du fichier 'Routes/web.php':

1 use App\Http\Controllers\StudentController;
2 Route::resource('students' , StudentController::class);

5 - Configuration du Bootstrap dans laravel 8

Afin de rendre le bootstrap opérationnel au sein de laravel 8, nous devons
configurer ce dernier et l'installer:
Installation du package laravel/ui via cmd
TP Laravel: Système de gestion d'un établissement
scolaire avec Laravel 8 06/03/2024

1 composer require laravel/ui

Installation de bootstrap via cmd

1 php artisan ui bootstrap

Et maintenant afin de compiler la nouvelle structure, vous devez exécuter les deux
commandes:

1 npm install
1 npm run dev

Remarque
ces deux commandes 'npm install' et 'npm run dev', exige que Node.JS soit installé
dans votre machine! Si ce n'est pas le cas veuillez le télécharger et l'installer via
l'adresse: https://nodejs.org/fr/download/

Remarque
Afin d'éviter les vulnérabilité d'attaque sous forme d'un envoie de données en
masse, on doit ajouter le tableau $fillable au modèle:
app/Models/Students.php

1 class Students extends Model {

2 use HasFactory;
3 protected $fillable = ['name', 'email' , 'phone' , 'section' , 'image'];
4}

6 Création et affichage des données

6.1 Création de l'objet tableau des données au niveau du contrôleur

Nous utilisons la méthode index() du

contrôleur app/Http/Controllers/StudentsController.php pour pointer et afficher les
données sur le fichier du template resources/view/index.blade.php
TP Laravel: Système de gestion d'un établissement
scolaire avec Laravel 8 06/03/2024

1 // app/Http/Controllers/StudentsController.php
2
3 public function index()
4 {
5 // recuperation des donnees sous forme d'un tableau
6 $students = Students::all();
7
8 // afficher les donnees sur le template index.blade.php
9 return view('index', compact('students'));
10 }

6.2 - Création et insertion des données au niveau du contrôleur

6.2.1 - la méthode create()

La méthode create du contrôleur pointe directement vers le formulaire d'insertion
des données au niveau du template qui sera rprésenté par le
fichier create.blade.php
Méthode create()

1 public function create() {

2 return view('create');
3 }
Fichier template: create.blade.php
Le fichier de template create.blade.php est utilié pour accéder au formulaire
d'insertion de données, il est accéssible via l'adresse
url: http://127.0.0.1:8000/create
1 @extends('layout')
2 @section('content')
TP Laravel: Système de gestion d'un établissement
scolaire avec Laravel 8 06/03/2024

3 <h2 style="color: blue;">Add New Student</h2>

4
5
6 <form action="{{ route('students.store') }}" enctype="multipart/form-data"
7 method="POST">@csrf
8 <div class="form-group"><label for="name">Name:</label> <input class="form-
9 control" name="name" type="text" /></div>
10
11 <div class="form-group"><label for="email">Email:</label> <input class="form-
12 control" name="email" type="text" /></div>
13
14 <div class="form-group"><label for="phone">Phone:</label> <input class="form-
15 control" name="phone" type="text" /></div>
16
17 <div class="form-group"><label for="section">Section :</label><select
18 style="width: 100%;" name="section"><!-- Les options -->
19 <option value="Math">Math</option>
20 <option value="Svt">SVT</option>
21 <option value="Physique">Physique</option>
22 <option value="Informatique">Informatique</option>
23 </select></div>

<div class="form-group"><label for="image">Image :</label> <input class="form-

control" name="image" type="file" /></div>
<button class="btn btn-success" style="float: right; width: 300px;"
type="submit">Add Student</button>
TP Laravel: Système de gestion d'un établissement
scolaire avec Laravel 8 06/03/2024

</form>@endsection

6.2.2 La méthode d'insertion des données store()

Comme son nom l'indique, la méthode store() récupère les données envoyés depuis
le formulaire d'insertion des données au niveau du view create.blade.php et les
insère directement au sein de la table students de la base de donnée.
Méthode store()

1 public function store(Request $request)

2 {
3 $validatedData = $request->validate([
4 'name' => 'required|max:255',
5 'email' => 'required|max:255',
6 'phone' => 'required',
7 'section' => 'required|max:255',
8 'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
9 ]);
10
11 if ($image = $request->file('image')) {
12 $destinationPath = 'image/';
13 $profileImage = date('YmdHis') . "." . $image->getClientOriginalExtension();
14 $image->move($destinationPath, $profileImage);
15 $validatedData['image'] = "$profileImage";
16 }
17
18 $students = Student::create($validatedData);
19
20 return redirect('/students')->with('success', 'Student created successfully');
21 }
TP Laravel: Système de gestion d'un établissement
scolaire avec Laravel 8 06/03/2024

6.2.3 Template d'affichage des données index.blade.php

Python

1 @extends('layout')
2 @section('content')
3 <div class="table-wrapper">
4 <table class="fl-table">
5 <thead style="height: 5px;">
6 <tr>
7 <th> ID </th>
8 <th>Name</th>
9 <th>Email</th>
10 <th>Phone</th>
11 <th>Section</th>
12 <th>Image</th>
13 <th>Show </th>
14 <th>Update </th>
15 <th>Delete</th>
16 </tr>
17 <tr>
18 <td colspan="7"></td>
19 </tr>
20 </thead>
21 <tbody>
22 @foreach($students as $student)
TP Laravel: Système de gestion d'un établissement
scolaire avec Laravel 8 06/03/2024

23 <tr>
24 <td>{{$student->id}}</td>
25 <td>{{$student->name}}</td>
26 <td>{{$student->email}}</td>
27 <td>{{$student->phone}}</td>
28 <td style="color:brown; font-weight: bold;">{{$student->section}}</td>
29 <td><img src="/image/{{ $student->image }}" width="64"
30 height="64"></td>
31 <td style="vertical-align:middle; ">
32 <form method="POST" align="left">
33 <a ; class="btn btn-info" href="{{ route('students.show' , $student-
34 >id) }}">Show</a>
35 </form>
36 </td>
37
38 <td style="vertical-align:middle; ">
39 <form method="POST" align="left">
40 <a class="btn btn-primary" href="{{ route('students.edit' , $student-
41 >id) }}">Edit</a>
42 </form>
43 </td>
44
45 <td style="vertical-align:middle; ">
46 <form method="POST" align="left">
47 <a class="btn btn-danger" href="{{ url('students.destroy' ,$student-
48 >id) }}">Delete</a>
49 </form>
TP Laravel: Système de gestion d'un établissement
scolaire avec Laravel 8 06/03/2024

50 </td>
51 </tr>
52 @endforeach
53 </tbody>
54
55 </table>
56 <div style="width:650px;">
57 {!! $students->links() !!}
</div>
</div>

@endsection