Atelier de développement 2Ginfo

TP1 : Framework Laravel 8

Exercice 1 :

A- Installation des outils nécessaires

1. Installation d'un serveur web apache avec mysql: je vous recommande LARAGON

2. Télécharger et installer Composer: https://getcomposer.org/. Outil de gestion des

dépendances en PHP. Il vous permet de déclarer les bibliothèques dont dépend votre projet et
il les installe et les met à jour pour vous automatiquement.

3. Au cours de l'installation de composer, vous devez indiquer le chemin de l'interpréteur

php.exe.

B- création d’un premier projet

1-Lancer votre serveur et placer vous dans le dossier www ou htdocs (xamp).

2- Créer un nouveau projet nommé « first_laravel » (directement avec Laragon ou à travers la

ligne de commande)

3- Ajouter 3 routes paramétrés 1,2 et 3 dans lesquelles chaque page affiche le texte suivant
« je suis dans la page numéro : x »

Exercice 2 :

Nous souhaitons maintenant créer un système de gestion des étudiants sous forme d'une
CRUD application avec Laravel 8.

1- Créer un projet intitulé manageschool

2- Configurer ensuite la base de données mysql au niveau du fichier .env
2.1- Créer ensuite la base de données manageSchool qui contient une seule table
student(id, name, email, tel, section, image)au niveau de phpMyAdmin ou de votre
SGBD.
2.2-Effectuer ensuite la migration en utilisant la commande suivante :
php artisan migrate
3- Créer le modèle Student avec la commande suivante :
php artisan make:model Student –m
La création du modèle se fait dans le but de pouvoir gérer les étudiants via un système
de CRUD.
Après l’exécution de la commande de création de modèle, Laravel vous crée
automatiquement les deux fichiers:
 app/Models/Students.php
Atelier de développement 2Ginfo

 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
4- Créer un contrôleur StudentsController qui contient tous les méthodes nécessaires en
ajoutant --ressources à la fin de la commande de création.
L’exécution réussite de cette commande génère le fichier suivant :
« 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:
index(): utilisée pour afficher la liste des étudiants.
create(): affichera le formulaire ou la vue pour créer un étudiant.
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()).
show(): affichera un étudiant spécifié.
edit(): affichera le formulaire pour éditer un étudiant. Le formulaire sera rempli avec
les données de l'étudiant existant).
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()).
destroy(): utilisée pour supprimer un étudiant spécifié.
5- 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.
5.1- Créer ou télécharger un template bootstrap et renommer le layout.blade.php
5.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)
5.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 dossiers public/css/
et public/js/ doivent être crées lorsqu'ils n'existent pas!)
5.4- Lier ensuite les feuilles .css .js du bootstrap en ajoutant le code suivant:
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="js/bootstrap.bundle.min.js" ></script>
5.6- Ajouter les tags nécessaire pour faire un héritage au fichier
resources/view/layout.blade.php : @yield('content')
5.7-Créer ensuite le fichier: index.blade.php au sein du dossier resources/view/ et y
ajouter les balises d'héritage:
@extends('layout')
@section('content')
<!-- Content here ! -->
@endsection
Atelier de développement 2Ginfo

@extends('layout')
@section('content')
<!-- Content here ! -->
@endsection
5.8- Faites 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)
6- Créer une route gérer le contrôleur Student
7- Configurer Boostrap avec Laravel 8 en poursuivant ces étapes :
Afin de rendre le bootstrap opérationnel au sein de laravel 8, nous devons configurer
ce dernier et l'installer:
7.1- Installation du package laravel/ui via cmd à travers la commande :
composer require laravel/ui
7.2- Installation de Bootsrap via la ligne de commande :
php artisan ui bootstrap
7.3- Compilation
Et maintenant afin de compiler la nouvelle structure, on doit exécuter les deux
commandes:
npm install
npm run dev
8- Création et affichage des données :
8.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
8.2- Création et insertion des données au niveau du contrôleur : insérer les ligne de
code nécessaires afin que la méthode create du contrôleur pointe directement vers le
formulaire d'insertion des données au niveau du template qui sera représenté par le
fichier create.blade.php
Méthode create()
8.3- En agissant sur méthode store() insérer les données récupérer du formulaire dans
la table students
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()
Atelier de développement 2Ginfo

Annexe

1- Fichier template: create.blade.php

@extends('layout')
@section('content')
<h2 style="color:blue;">Add New Student </h2>

<form method="POST" action="{{ route('students.store') }}"

enctype="multipart/form-data">
@csrf
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" name="name" />
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="text" class="form-control" name="email" />
</div>
<div class="form-group">
<label for="phone">Phone:</label>
<input type="text" class="form-control" name="phone" />
</div>

<div class="form-group">
<label for="section">Section :</label>

<select name="section" style="width: 100%;">

<!-- Les options -->
<option value="Math">Math</option>
<option value="Svt">SVT</option>
<option value="Physique">Physique</option>
<option value="Informatique">Informatique</option>
</select>
</div>

<div class="form-group">
<label for="image">Image :</label>
<input type="file" name="image" class="form-control">
</div>
<button type="submit" class="btn btn-success" style="float:right;
width:300px;">Add Student</button>
</form>
@endsection
@extends('layout')
@section('content')
<h2 style="color:blue;">Add New Student </h2>

<form method="POST" action="{{ route('students.store') }}"

enctype="multipart/form-data">
@csrf
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" name="name" />
</div>
<div class="form-group">
Atelier de développement 2Ginfo

<label for="email">Email:</label>
<input type="text" class="form-control" name="email" />
</div>
<div class="form-group">
<label for="phone">Phone:</label>
<input type="text" class="form-control" name="phone" />
</div>

<div class="form-group">
<label for="section">Section :</label>

<select name="section" style="width: 100%;">

<!-- Les options -->
<option value="Math">Math</option>
<option value="Svt">SVT</option>
<option value="Physique">Physique</option>
<option value="Informatique">Informatique</option>
</select>
</div>

<div class="form-group">
<label for="image">Image :</label>
<input type="file" name="image" class="form-control">
</div>
<button type="submit" class="btn btn-success" style="float:right;
width:300px;">Add Student</button>
</form>

@endsection

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

@extends('layout')
@section('content')
<div class="table-wrapper">
<table class="fl-table">
<thead style="height: 5px;">
<tr>
<th> ID </th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Section</th>
<th>Image</th>
<th>Show </th>
<th>Update </th>
<th>Delete</th>
</tr>
<tr>
<td colspan="7"></td>
</tr>
</thead>
<tbody>
@foreach($students as $student)
<tr>
<td>{{$student->id}}</td>
<td>{{$student->name}}</td>
Atelier de développement 2Ginfo

<td>{{$student->email}}</td>
<td>{{$student->phone}}</td>
<td style="color:brown; font-weight:
bold;">{{$student->section}}</td>
<td><img src="/image/{{ $student->image }}"
width="64" height="64"></td>
<td style="vertical-align:middle; ">
<form method="POST" align="left">
<a ; class="btn btn-info" href="{{
route('students.show' , $student->id) }}">Show</a>
</form>
</td>

<td style="vertical-align:middle; ">

<form method="POST" align="left">
<a class="btn btn-primary" href="{{
route('students.edit' , $student->id) }}">Edit</a>
</form>
</td>

<td style="vertical-align:middle; ">

<form method="POST" align="left">
<a class="btn btn-danger" href="{{
url('students.destroy' ,$student->id) }}">Delete</a>
</form>
</td>
</tr>
@endforeach
</tbody>

</table>
<div style="width:650px;">
{!! $students->links() !!}
</div>
</div>

@endsection