Travaux Pratique 5

Travaux pratique #5
Insertion, modification et effacement de données en utilisant MySQL et Laravel
1. Création d’un nouveau projet Laravel.
a. Lancer laragon et démarrer les services de serveur d’application et de serveur de base de données MySQL.
b. Taper le nom « TP-5-Lavavel » dans la zone de text Nom de projet.
c. Ouvrir Visual Studio Code et ouvrir le dossier TP-5-Laravel.
d. Dans le répertoire views créer un repertoire « CRUD »

2. Insertion dans une table de base de données.
Note : Si vous rencontrer un problème de routage insérer le code suivant dans le terminal afin
d’effacer le cache de routage. « php artisan route:cache »
a. Créer un fichier « index.blade.php »

b. Insérez le code suivant dans le fichier « index.blade.php »
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form action='' method='post'>
<div class="form-group">
<label for="name"> Nom</label>
<input type="text" class="form-control" name="name"
placeholder="Entrez le nom">
</div>
<label for="fcolor"> couleur favorite</label>
<input type="text" class="form-control" name="fcolor"
placeholder="Entrez la couleur favorite">
</div>
<label for="email"> Email</label>
<input type="text" class="form-control" name="email"
placeholder="Entrez rer le email">
</div>
<button type="submit" class="btn btn-primary btn-black"

name="email">SAVE </button>
</div>
</form>
</div>
</div>
</div>
c. Créer un contrôleur
En utilisant l’invite de commande :
php artisan make:controller LaravelCrudController
d. Ouvrir le ficher « LaravelCrudController.php » dans le répertoire « App/ http/Controllers/ » et créer une

fonction permettant d’afficher le formulaire dans le fichier « index.blade.php »
e. Le code de la fonction est :
class LaravelCrudController extends Controller

{
//
function index(){
return view('crud.index');
}
}
f. Ouvrir le fichier « web.php » dans le répertoire App/routes/ et ajouter la route vers la fonction index dans le
contrôleurs.
Route::get('crud',[LaravelCrudController::class,'index']);
g. Ouvrir le fichier index.blade.php et modifier le formulaire comme suit :
<form action='add' method='post'>
h. Créer une route de celle si dans le fichier web.php
Route::post('add',[LaravelCrudController::class, 'add']);
i. Ajouter la fonction « add » dans le contrôleur « LaravelCrudController »
function add(Request $request)

{
return $request->input();
}
Test la page « index.blade.php »
php artisan serve
j. Copier et coller l’url «http://127.0.0.1:8000/crud» et remplissez le formulaire
Cliquer sur Save !, vous obtenez l’erreur

419
PAGE EXPIRED
k. Cela veut dire qu’il vous manque la déclaration @csrf après la ligne suivante

@csrf
3. Ajouter la validation des données

a. Ajouter la validation des données dans la fonction add

{
// return $request->input();
$request->validate([
'name'=>'required',
'fcolor'=>'required',
'email'=>'required|email|unique:crud'
]);
}
b. Créer la table « crud » dans la base de données « laraval ».

c. Ajouter les messages d’erreurs de validation dans le fichier index.blade.php comme suit :
<body>
<div class="row">
<div class="col-md-6 col-md-offset-3 mt-5">
<div class="h4 text-center">Ajaouter un nouveau Enregistrement</div>
<hr>
@csrf
placeholder="Entrer le nom">
@error('name') <span class="text-danger" >{{$message}} </span>
@enderror
</div>
placeholder="Entre la couleur favorite">
@error('fcolor') <span class="text-danger" >{{$message}} </span>
@enderror
</div>
placeholder="Entrer le email">
@error('email') <span class="text-danger" >{{$message}} </span>
@enderror
</div>
<button type="submit" class="btn btn-primary btn-
block">SAVE</button>
</div>
</form>
</div>
</div>
</div>
</body>
d. Vérifier le résultat en cliquant sur « save » sans entrer des données dans le formulaire.
e. Pour récupérer les valeurs non valide entrées dans les champs par l’utilisateur. Ajouter le code
suivant :
<div class="row">
<div class="col-md-6 col-md-offset-3 mt-5">
<div class="h4 text-center">Ajaouter un nouveau Enregistrement</div>
<hr>
@csrf
placeholder="Entrer le nom" value="{{old('name')}}">
@error('name') <span class="text-danger" >{{$message}} </span>
@enderror
</div>
placeholder="Entre la couleur favorite" value="{{old('fcolor')}}">
@error('fcolor') <span class="text-danger" >{{$message}} </span>
@enderror
</div>
placeholder="Entrer le email" value="{{old('email')}}">
@error('email') <span class="text-danger" >{{$message}} </span>
@enderror
</div>
<button type="submit" class="btn btn-primary btn-
block">SAVE</button>
</div>
</form>
</div>
</div>
</div>
f. Vérifier que le formulaire récupère les données entrées par l’utilisateur.
g. Insérer des données dans la table « crud » comme c’est montre dans la suite : ouvrez le fichier
contrôler « » et modifier la fonction add :

{
// return $request->input();
'name'=>'required',
]);
$query = DB::table('crud')->insert([
'name'=>$request->input('name'),
'fcolor'=>$request->input('fcolor'),
'email'=>$request->input('email')
]);
if($query){
return back()->with('success','Les donnees sont bien inseres');
}
else{
return back()->with('fail',' un problème est survenu, les données ne sont bien
insères');
}
}
h. Pour afficher les messages d’erreurs de validation des données, ajouter le code ci-après avant la
déclaration du formulaire.
<div class="h4 text-center">Ajouter un nouveau Enregistrement</div>

<hr>
@if(Session::get('success'))
<div class="alert alert-success">
{{ Session::get('success') }}
</div>
@endif
@if(Session::get('fail'))
<div class="alert alert-danger">
{{ Session::get('fail') }}
</div>
@endif
i. Visualiser le résultat d’insertion de donnes dans le formulaire et vérifier la sauvegarde des données
dans la table « crud ».
4. Retirer les donnes d’une table
a. Après la balise de fermetures du formulaire dans le ficher « index.blade.php », ajouter le code suivant :
<table class="table table-cover">

<thead>
<th>Nom</th>
<th>Couleur favorite</th>
<th>Email</th>
<th>Action</th>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
b. Ajouter le code suivant dans la fonction index du contrôleurs « LaravelCrudController »
function index()
{
$data = array(
'list' => DB::table('crud')->get()
);
return view('crud.index',$data);
}
c. Ajouter le code Laravel permettant d’afficher le contenu de la table crud dans le fichier « index.blade.php ».
</form>
<br>
<thead>
<th>Nom</th>
<th>Email</th>
<th>Action</th>
</thead>
<tbody>
@foreach($list as $item)
<tr>
<td>{{ $item->name }}</td>
<td>{{ $item->fcolor }}</td>
<td>{{ $item->email }}</td>
<td> </td>
</tr>
@endforeach
</tbody>
</table>
d. Visualiser le résultat en rafraichissant la page dans le navigateur.

5. Modifier une ligne dans la table de base de données
a. Ajouter les boutons d’actions dans la table de visualisation ci-dessus.
<tbody>
<tr>
<td>
<div class="btn-group">
<a href="#" class="btn btn-danger btn-xs">Effacer</a>
<a href="edit/{{ $item->id }}" class="btn btn-primary btn-xs">Editer</a>
</div>
</td>
</tr>
@endforeach
</tbody>
b. Ajouter la fonction edit dans la classe « LaravelCrudController » permettant d’éditer la ligne de la table, l’id de la
ligne étant le paramètre d’entrée de la cette fonction.
function edit($id){
echo $id;
}
c. Ajouter le routage a cette fonction dans le fichier web.php
Route::post('add',[LaravelCrudController::class, 'add']);
Route::get('edit/{id}',[LaravelCrudController::class, 'edit']);
d. Tester le fonctionnement du bouton éditer de la page « index.blade.php », cliquer sur une ligne quelconque de la
table et vérifier que le numéro de la ligne s’affiche dans le navigateur.
e. Modifier la fonction edit dans la classe « » pour permettre la récupération des donnes et envoyer le résultat vers
une page « edit.blade.php » que vous créez par la suite.
function edit($id){
$row =DB::table('crud')
->where('id',$id)
->first();
$data = ['info'=>$row];
return view('crud.edit',$data);
}
f. Copier et coller le fichier « index.blade.php » dans le répertoire views/crud et renommer la copie

« edit.blade.php »’
g. Modifier ce nouveau fichier pour devenir identique a figure suivante :
- Effacer la table.
- Rendre le titre de la page dynamique :
- <div class="container">
- <div class="row">
- <div class="col-md-6 col-md-offset-3 mt-5">
- <div class="h4 text-center">{{$Title}} | TP LARAVEL</div>
- <hr>
- @if(Session::get('success'))
- <div class="alert alert-success">
- {{ Session::get('success') }}
- </div>
- @endif
-
- @if(Session::get('fail'))
- <div class="alert alert-danger">
- {{ Session::get('fail') }}
- </div>
- @endif
-
- <form action='add' method='post'>
h. Remplacer save par Update dans le buton submit du formulaire.

- Modifier la valeur value de chaque « input text » pour afficher l’attribut récupère de la table et permettre sa
modification par l’utilisateur.

@csrf
<input type="hidden" name="cid" value="{{ Info->id }}">
<input type="text" class="form-control" name="name" placeholder="Entrer le nom" value="{{
Info->name }}">
@error('name') <span class="text-danger">{{$message}} </span> @enderror
</div>
<input type="text" class="form-control" name="fcolor" placeholder="Entre la couleur
favorite" value="{{Info->color }}">
@error('fcolor') <span class="text-danger">{{$message}} </span> @enderror
</div>
<input type="text" class="form-control" name="email" placeholder="Entrer le email"
value="{{Info->email }}">
@error('email') <span class="text-danger">{{$message}} </span> @enderror
</div>
<button type="submit" class="btn btn-primary btn-block">UPDATE</button>
</div>
</form>
i. Visualiser le résultat et vérifier que les données d’une ligne de la table sera transmit a la page « edit.blade.php »
pour la modifier.
j. Maintenant que les données sont affiche, nous allons procéder à la sauvegarde des modification apporte a cette
ligne dans la table « crud ».
Pour le faire modifier l’attribut « action » du formulaire dans le fichier « edit.blade.php »
31 <form action='update' method='post'>
k. Créer la fonction update dans le contrôleurs «LaravelCrudController » pour permettre le sauvegarde de la

modification et ajouter la validation des données :
function update(Request $request){
'name'=>'required',
]);
l. Ajouter le routage vers cette fonction dans le fichier « web.php ».
Route::post('update',[LaravelCrudController::class, 'update'])->name('update');
m. Modifier l’attribut action du formulaire dans le fichier « edit.blade.php » comme suit :
<form action="{{route('update')}}" method="post">
n. Ajouter le code suivant permettant de sauvegarder les données dans la table « crud »
function update(Request $request)

{
'name' => 'required',
'fcolor' => 'required',
'email' => 'required|email|unique:crud'
]);
$udating = DB::table('crud')->where('id', $request->input('id'))

->update([
'name' => $request->input('name'),
'fcolor' => $request->input('fcolor'),
'email' => $request->input('email')
]);
}
o. Rediriger vers la page de sais des données une fois la sauvegarde a été effectué avec succès.
Si vous rencontrer un probleme de routage insérer le code suivant dans le terminal afin d’effacer le cache de
routage. « php artisan route:cache »
p. Vérifier le résultat de mise à jour de la table « crud » via la page « edit.blade.php ».
Effacer un enregistrement dans une table de base de données.
a. Pour effacer un enregistrement dans une table de base de données, ouvrir le fichier index.blade.php et modifier
le l’attribut href du lien hypertexte comme suit :

<thead>
<th>Nom</th>
<th>Email</th>
<th>Action</th>
</thead>
<tbody>
<tr>
<td>
<div class="btn-group">
<a href="delete/{{ $item->id }}" class="btn btn-danger btn-xs">Effacer</a>
<a href="edit/{{ $item->id }}" class="btn btn-primary btn-xs">Editer</a>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
b. Créer une nouvelle fonction dans le contrôleur « LaravelCrudController.php»
function delete($id){
c. Dans le fichier web.php, ajouter un routage vers la fonction delete.
Route::get('delete/{id}',[LaravelCrudController::class, 'delete']);
d. Completer la function delete affin de permettre la suppression d’une ligne de la table « curd ».
function delete($id){
// echo $id;
$delete = DB:: table('crud')->where('id',$id)
->delete();
return redirect('crud');
}

Travaux Pratique 5

Transféré par

Droits d'auteur :

Formats disponibles

Travaux Pratique 5

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Travaux Pratique 5

Transféré par

Droits d'auteur :

Formats disponibles

Travaux pratique #5

Insertion, modification et effacement de données en utilisant MySQL et Laravel

1. Création d’un nouveau projet Laravel.

b. Taper le nom « TP-5-Lavavel » dans la zone de text Nom de projet.

c. Ouvrir Visual Studio Code et ouvrir le dossier TP-5-Laravel.

d. Dans le répertoire views créer un repertoire « CRUD »

a. Créer un fichier « index.blade.php »

<button type="submit" class="btn btn-primary btn-black"

En utilisant l’invite de commande :

php artisan make:controller LaravelCrudController

d. Ouvrir le ficher « LaravelCrudController.php » dans le répertoire « App/ http/Controllers/ » et créer une

e. Le code de la fonction est :

class LaravelCrudController extends Controller

g. Ouvrir le fichier index.blade.php et modifier le formulaire comme suit :

<form action='add' method='post'>

h. Créer une route de celle si dans le fichier web.php

i. Ajouter la fonction « add » dans le contrôleur « LaravelCrudController »

function add(Request $request)

Test la page « index.blade.php »

php artisan serve

j. Copier et coller l’url «http://127.0.0.1:8000/crud» et remplissez le formulaire

Cliquer sur Save !, vous obtenez l’erreur

<form action='add' method='post'>

3. Ajouter la validation des données

function add(Request $request)

b. Créer la table « crud » dans la base de données « laraval ».

f. Vérifier que le formulaire récupère les données entrées par l’utilisateur.

function add(Request $request)

<div class="h4 text-center">Ajouter un nouveau Enregistrement</div>

<form action='add' method='post'>

<table class="table table-cover">

b. Ajouter le code suivant dans la fonction index du contrôleurs « LaravelCrudController »

d. Visualiser le résultat en rafraichissant la page dans le navigateur.

c. Ajouter le routage a cette fonction dans le fichier web.php

f. Copier et coller le fichier « index.blade.php » dans le répertoire views/crud et renommer la copie

h. Remplacer save par Update dans le buton submit du formulaire.

<form action='add' method='post'>

31 <form action='update' method='post'>

k. Créer la fonction update dans le contrôleurs «LaravelCrudController » pour permettre le sauvegarde de la

function update(Request $request){

l. Ajouter le routage vers cette fonction dans le fichier « web.php ».

m. Modifier l’attribut action du formulaire dans le fichier « edit.blade.php » comme suit :

<form action="{{route('update')}}" method="post">

function update(Request $request)

$udating = DB::table('crud')->where('id', $request->input('id'))

p. Vérifier le résultat de mise à jour de la table « crud » via la page « edit.blade.php ».

Effacer un enregistrement dans une table de base de données.

<table class="table table-cover">

b. Créer une nouvelle fonction dans le contrôleur « LaravelCrudController.php»

c. Dans le fichier web.php, ajouter un routage vers la fonction delete.

Vous aimerez peut-être aussi