Bonjour je m’appelle Alice, j’espère que vous passez une excellente journée, aujourd’hui nous allons apprendre à créer une application web étape par étape avec le frameword Laravel 8. Nous allons également stocker des données dans une base de données relationnel MySQL en CRUD (Create, Read, Update, Delete) : Ajouter, Afficher, Modifier et Supprimer du contenu.
Nous allons créer une application de gestion des stocks. Dans cette application, un utilisateur peut créer, afficher, mettre à jour et supprimer des produits de la base de données MySQL à l’aide du framework Laravel 8.
Qu’est ce que Laravel ?
Laravel est un framework PHP open source conçu pour rendre le développement d’applications web plus facile et plus rapide grâce à des fonctionnalités intégrées. C’est grâce à ces fonctionnalités qui rend Laravel si populaire auprès des développeurs Web.
Laravel offre une bibliothèque de fonctionnalités pré-programmées (telles que l’authentification, la création de controllers, la connexion à un serveur de base de données).
Cela simplifie l’ajout des fonctionnalités à votre application Laravel en minimisant la quantité de code.
En outre, Laravel inclus Eloquent(ORM) pour simplifier l’accès et la manipulation des données.
Laravel est-il frontend ou backend ?
Laravel est principalement un framework backend (côté serveur). Laravel implémente l’architecture MVC dans le cadre de sa conception.
Qu’est-ce que le modèle MVC en PHP Laravel ?
MVC (Model-View-Controller) est un modèle architectural qui sépare une application en trois composants logiques principaux : les données (Model), une interface pour afficher et modifier les données (View) et les opérations pouvant être effectuées sur les données (Controller) :
- Model : structure vos données sous une forme fiable et les prépare sur la base des instructions du responsable du traitement
- View : affiche les données à l’utilisateur en fonction des actions de l’utilisateur
- Controller : reçoit les demandes de l’utilisateur, envoie des requêtes au modèle pour les mises à jour des données, envoie des instructions à afficher pour mettre à jour l’interface. Un contrôleur est la partie qui délègue les tâches. Le controller est le gestionnaire de notre application. Il indique au model ce qu’il doit calculer et à la view ce qu’il faut afficher. C’est l’intermédiaire entre la view et le model.
L’architecture MVC on peut le comparer lorsque que vous commandez un plat dans un restaurant :
MODEL :
VIEW : Le view est la répresentation des données telle qu’un graphique ou un diagramme.
Puis-je apprendre Laravel sans PHP ?
Non, Laravel est écrit en PHP, vous devez d’abord apprendre les bases du langage PHP et le concept POO pour pouvoir utiliser Laravel. Si vous décidez d’apprendre Laravel sans avoir ces pré-requis, vous ne serez peut-être pas très productif et surtout vous ne pourrez peut-être pas créer de fonctionnalités supplémentaires qui ne sont pas incluses dans le framework.
Laravel est facile à apprendre ?
Laravel est extrêmement facile à apprendre et à prendre en main. La console de Laravel appelée Artisan fournit de nombreuses commandes pour vous puissiez développer rapidement votre application, par exemple l’authentification fonctionne immédiatement pour la connexion de l’utilisateur, l’enregistrement, la réinitialisation du mot de passe ou encore l’envoi d’un e-mails. L’excellente documentation Laravel vous explique étape par étape comment l’utiliser.
Pré-requis
- Un serveur LAMP tel que Laragon, WAMP ou XAMP, dans ce projet j’utilise Laragon
- Un client MySQL comme PHPMyAdmin ou HeidiSQL, dans ce projet j’utiliserais MySQL Workbench
- Un éditeur de code, dans ce projet j’utiliserais Visual Studio Code
1. Installer PHP Composer
Composer est un gestionnaire de dépendances pour les bibliothèques PHP.
Installer pour Windows
Téléchargez le fichier d’installation de Composer depuis le site officiel puis éxécutez le.
Qu’est ce que Composer ?
Composer est un gestionnaire de packages pour PHP qui gère les dépendances logicielles au niveau de l’application.
Installer pour Linux
Démarrer votre terminal et lancer cette commande pour installer composer à l’aide de curl :
curl -sS https://getcomposer.org/installer -o composer-setup.php
Exécutez la commande suivante pour installer composer globalement sur votre ordinateur :
sudo php composer-setup.php --install-dir=/usr/local/bin --filename=composer
Exécutez la commande suivante pour identifier la version de Composer installée sur votre machine :
composer
La terminal affichera votre version :
______
/ ____/___ ____ ___ ____ ____ ________ _____
/ / / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__ ) __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
/_/
Composer version 2.1.3 2021-06-09 16:31:20
OK ! Maintenant vous êtes prêt à créer un projet Laravel 8.
Créer un projet Laravel 8
Depuis votre terminal de commande exécuter la commande suivante pour créer un projet Laravel avec composer :
composer create-project laravel/laravel --prefer-dist laravel-gestion-stocks
Qu’est ce que l’option –prefer-dist ?
–prefer-dist tenteras de télécharger et de décompresser les dépendances à l’aide de GitHub ou d’une autre API lorsqu’elle est disponible.
Entrez dans le projet :
cd laravel-gestion-stocks
puis ouvrez Visuel Studio Code avec cette commande :
code .
Dans Visual Studio Code, afficher le terminal :
Exécutez la commande suivante pour identifier la version de Laravel :
php artisan -V
Qu’est ce que Artisan ?
Artisan est l’interface de ligne de commande de Laravel. Artisan vous aide à développer rapidement votre application Laravel. Par exemple si vous saisissez dans le terminal php artisan make:controller ArticleController Cette commande crée pour vous un contrôleur nommé ArticleController. Et si vous n’avez pas Artisan, vous devrez créer un fichier PHP nommé ArticleController. Ensuite dans ce fichier vous devez ajouter une balise php et importer toutes les classes nécessaire pour faire fonctionner votre contrôleur. Voilà pourquoi Artisan est régulièrement utilisé par les développeurs Laravel, Artisan leur fait gagner du temps ?.
Démarrer l’application Laravel
A présent, démarrez l’application dans votre navigateur web en exécutant la commande ci-dessous :
php artisan serve
Un message indique l’url de l’application Laravel :
Starting Laravel development server: http://127.0.0.1:8000
Copier-coller l’url http://127.0.0.1:8000 dans votre navigateur. Vous aurez cette fenêtre qui apparaît :
Et voilà, nous avons installé Laravel et l’application tourne sur le port 8000 !
Ok mais qu’est ce qu’il sait passé ? Comment Laravel à compris notre requête et où est stocké le contenu ? Reprenons notre schéma. Laravel fonctionne sur une architecture MVC, mais il faut savoir qu’il y a un autre composant qui va intercepter la requête du client. Il s’appelle le Route.
Qu’est ce une route ?
Laravel a son propre système de cartographie de routage (itinéraire ou url) et il fournit également des outils utiles pour nous aider à organiser nos routes. C’est dans le fichier web.php que se trouve les configurations du routage.
Voici comment tout ça fonctionne :
- Le client envoie une requête, il veut voir la page d’accueil.
- Le route intercepte la requête et dans le fichier /routes/web.php se trouve la liste de tous les urls. Par défaut l’url principe “/” est configuré. On peut lire que si une requête correspond à l’url “/”, c’est à dire la racine de notre application, alors la view publie le fichier welcome, welcome est le raccourci du fichier welcome.blade.php du dossier /ressources/views/.
- La view affiche le contenu du fichier /ressources/views/welcome.blade.php.
Voici la syntaxe du route :
1. Ok, pour bien vous compreniez, nous allons ajouter une nouvelle route. Imaginons le client veut afficher la page contact. Pour cela dans le fichier web.php, nous ajoutons après la ligne 19 une nouvelle destination de la requête avec la view ‘contact’ :
Route::get('/', function () {
return view('welcome');
});
Route::get('/contact', function () {
return view('contact');
});
2. Créer le fichier contact.blade.php dans le dossier /ressources/views/ et ajoutez un titre :
<h1>Page contact</h1>
3. On sauvegarde et ensuite on demande cette page dans notre navigateur :
Félicitation ? ?! Vous avez réussi votre premier routage. Voici le mécanisme :
Pourquoi nous ajoutons l’extension blade.php ?
Laravel utilise le moteur de modélisation Blade. L’extension de ce moteur est blade.php. Blade est très puissant et vous permet de faire des choses vraiment chouettes.
Créer une base de donnée MySQL
Dans cette étape, nous allons créer une base de donnée dans MySQL.
1. Lancer votre client MySQL tel quel PHPMyAdmin, pour ma part je lance MySQL Workbench.
2. Créez votre base de donnée avec la commande :
CREATE DATABASE laravel;
Parfait ! Dans la prochaine étape, nous allons établir la connexion avec cette base de donnée.
Configurer la base de données MySQL
Pour établir la connexion à la base de données MySQL. Nous devons mettre à jour les informations de la base de données MySQL dans le fichier .env.
Qu’est ce le fichier .env ?
Le fichier .env pour “environnement” se situe à la racine de notre application Laravel. Elle est constitué d’une ligne avec une paire KEY=VALUE, en français clé=valeur.
Ce fichier est utilisé pour stocker tous les données sensibles tels les mots de passe, les clés d’API etc… Ce sont des informations spécifiques à l’environnement de votre application. Cela signifie, par exemple, que si vous souhaitez développer ou déployer l’application sur un autre environnement, un nouveau PC Windows ou un serveur, vous devrez simplement modifier certains paramètres de ce fichier .env pour qu’il s’exécute dans ce nouvel environnement.
Attention, ce fichier .env ne doit pas être partagé car comme vous l’avez compris, il contient des informations privées !
Mettre à jour le fichier .env
1. Ouvrez le fichier .env et mettez à jour les identifiants pour accéder à votre base de données MySQL, vous devez entrer le nom de la base de données, le nom d’utilisateur et le mot de passe :
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=
Créer votre premier modèle Laravel
Pour rappel, Laravel utilise le modèle MVC pour organiser votre application en trois parties.
1. Créons maintenant notre premier modèle Laravel. Dans votre terminal, exécutez la commande suivante :
php artisan make:model Produit -m
Cela va ajouter 2 fichiers :
- /app/Models/Produit.php : le modèle de Produit
- /app/database/migrations/xxxxx_create_produits_table : le fichier de migration
Dans le terminal, vous obtenez une réponse comme ceci :
Model created successfully.
Created Migration: 2021_08_27_100641_create_produits_table
Ouvre le fichier Produit.php, à la ligne 10 vous avez la ligne use HasFactory. Elle fait référence à une fonctionnalité de Laravel appelé Model Factory, en français “une fabrique de modèles”. Cette fonctionnalité permet de créer de fausses données pour vos modèles. C’est très utile pour tester et introduire de fausses valeurs dans votre base de données. Dans cette atelier nous allons pas l’utiliser mais je ferais prochainement un atelier dédié à cette fonctionnalité.
Maintenant que notre modèle Produit est crée, nous allons créer la table Produit et ses propriétés dans notre base de données MySQL. Pour cela nous allons utiliser la migration.
Qu’est-ce qu’une migration Laravel ?
Une migration Laravel est un moyen qui vous permet de créer ou mettre à jour une table dans votre base de données, sans passer par un gestionnaire de base de données tel que PHPMyAdmin, MySQL Workbench ou par le terminal avec les lignes de commandes.
Pourquoi une migration au lieu de créer directement la table ?
Les migrations sont comme un gestionnaire de version de votre base de données, elles conservent un historique de la façon dont votre base de données a été créée et modifiée au fil du temps, un exemple courant l’ajout ou la suppression d’une colonne. Vous avez un suivi de vos modifications.
Mais aussi les migrations Laravel facilitent le déploiement de l’application à d’autres développeurs grâce aux seeders. Cela signifie par exemple, vos collaborateurs récupérent le projet, configurent la base de données et exécutent la commande “php artisan migrate”. Et là, La base de données avec les différentes tables seront ajoutés dans le serveur MySQL sans importer de fichier SQL. Magique non ???.
Configurer la migration et le modèle
1. Ouvrez le dossier /database/migrations. Par défaut Laravel génère 4 fichiers. Elles concernent l’authentification des utilisateurs :
- xxxx_create_users_table : Ajoute une table utilisateur
- xxxx_create_password_resets_table : ajoute une table pour l’oubli du mot de passe
- xxxx_create_failed_jobs_table : ajoute une table pour les tâches échouées
- xxxx_create_personal_access_tokens_table : ajoute une table pour authentifier les demandes d’accès à l’application Laravel
et le 5eme fichier xxxx__create_produits_table.php, souvenez-vous, il est généré au moment où nous avons crée notre model Produit.
2. Ouvrez ce fichier xxxx__create_produits_table.php puis ajoutez un nom, une description, un prix et une quantité pour notre future table produits :
public function up()
{
Schema::create('produits', function (Blueprint $table) {
$table->increments('id');
$table->string('nom');
$table->text('description');
$table->decimal('prix', 12, 2);
$table->float('quantite');
$table->timestamps();
});
}
Remarque :
- Ligne 17 : nous ajoutons
incrementspour auto-incrémenter l’id. - Ligne 20 : nous typons en décimal avec 2 paramètres après le nom du champ
prix, Le premier paramètre12correspondra au nombre total de chiffres soit 999 999 999 999 €. Le deuxième paramètre2est le nombre de chiffre après la virgule. Ce qui nous donnes : 9 999 999 999.99 €
Comme vous pouvez le voir, il existe deux fonctions dans le fichier de migration :
- La
function up()permet de créer ou de mettre à jour des tables, des colonnes et des index. - La
function down()permet d’inverser une opération effectuée par la function up().
3. Maintenant le fichier de migration est prêt, nous allons pouvoir créer la table produits dans la base de données à l’aide de la commande suivante :
php artisan migrate
4. Lancez votre client MySQL, rafraichissez la base de données et les nouvelles tables vont apparaître, ci-dessous j’utilise MySQL Workbench :
Et voilà, les tables ont été crée et nous avons notre table produits avec ses différents attributs :
Voici un schéma pour mieux comprendre :
4. Passons à notre modèle Produit, ce modèle sera utilisé pour interagir avec la table produits de la base de données. Ouvrez le fichier app/Models/Produit.php et ajouter le code ci-dessous :
class Produit extends Model
{
use HasFactory;
protected $fillable = ['nom', 'description', 'phone', 'password'];
}
protected $fillable signifie en français “protégé remplissable” :
protected: protège notre modèle du remplissage en masse.$fillable: seuls les champs que vous mettez dans $fillable sont remplissables.
Nous pouvez le lire comme ceci : Protège les attributs de mon modèle mais seuls ceux que je te définis dans $fillable peuvent être mis à jour dans la base de données et donc à l’exception de id, created_at, updated_at qui ne peuvent pas être mis à jour par un formulaire.
Création du contrôleur et des routes
Après avoir créé le modèle et la migration, passons maintenant au contrôleur et les routes pour travailler avec le modèle Produit. Pour rappel dans ce projet, nous développons une application pour gérer des produits, il va falloir une requête pour :
- afficher la liste des produits
- afficher un formulaire
- poster les données dans la base de données
- afficher un produit spécifique
- afficher un formulaire pour éditer le produit spécifique
- mettre à jour le produit
- supprimer le produit de la base de données
Ce qui nous fait 7 requêtes à coder. L’avantage avec Laravel, il existe une commande qui permet de générer automatiquement ces 7 requêtes :
1. Dans le terminal, exécutez la commande suivante :
php artisan make:controller ProduitController --resource
L’option –resource ou -r ajoute les 7 méthodes dans le fichier controller.
Par convention on nomme le contrôleur par une première lettre en majuscule et on ajoute le suffixe Controller.
Cette commande génère un fichier contrôleur dans le répertoire app/Http/Controllers/ProduitController.php.
2. Ouvrez ce fichier ProduitController.php. On peut voir que la class ProduitController hérite de la class Controller et cette class ProduitController définit un ensemble de méthodes qui seront utilisées pour les opérations CRUD sur le modèle Produit, vous avez vu ? Il y en a 7 ? :
- index() => affiche la liste des produits
- create() => affiche le formulaire pour créer un produit
- store() => crée un produit dans la base de données
- show() => affiche un produit spécifique
- edit() => affiche le formulaire pour éditer un produit
- update() => met à jour un produit dans la base de données
- destroy() => supprime un produit spécifique
Pour l’instant, ces fonctions sont n’ont pas d’instructions, nous allons les mettre à jour dans quelques instants.
3. Puisque que avant, nous devons définir le routage. Retournons sur le fichier routes/web.php, à la ligne 2 importez la classe ProduitController et à la ligne 25, définissez l’url “produits” grâce à la méthode Route::resource :
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProduitController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::get('/contact', function () {
return view('contact');
});
Route::resource('produits', ProduitController::class);
La méthode Route::resource est un contrôleur qui génère toutes les routes de base pour l’application. Ces routes peuvent être gérer à l’aide de la classe du contrôleur ProduitController.
Elle prend 2 arguments, le premier c’est l’url, ici nous avons mis produits et le second c’est le nom de la classe du contrôleur ProduitController::class qui sera utilisé pour gérer les requêtes.
Ça va ? Vous suivez ? ?. Bon si vous n’avez pas compris, je vous détail avec un schéma :
Pour rappel voici ce qui se passe quand notre utilisatrice demande la page avec l’url “contact”, la route reconnais l’url et renvois sur la view dédié :
Bon ça vous l’avez compris, cette fois-ci, au lieu de retourner sur une view, nous utilisons la méthode Route::resource, la méthode demande 2 paramètres, la première l’url, nous lui signalons le endpoint “produits” et ensuite elle demande le controller, on lui donne ProduitController . A partir de là, la méthode va mapper les différentes méthodes de la classe ProduitController :
Comme dans notre classe ProduitController il y a 7 méthodes (.index(), .create(), .store() etc…) et bien elle va générer 7 routes ! Ces routes ne sont pas visibles, pour afficher la liste de toutes les routes, utilisez cette commande dans votre terminal :
php artisan route:list
Vous aurez la liste de toutes les routes avec les méthodes, les url et surtout les noms. Nous aurons tout l’heure besoin de relancer cette commande pour récupérer le nom de la méthode POST. Mais
4. Relancez votre application avec la commande php artisan serve et dans votre navigateur web, lancez cette url : http://127.0.0.1/produits/. Aaaah ! Une blanche ?. Voilà ce qui se passe :
La route détecte le endpoint “produits” qui est indexé et retourne sur la méthode index() grâce au mappage mise en place. Sauf que dans notre méthode index(), elle est vide ? ! C’est pour ça que nous avons une page blanche. Nous allons tout de suite afficher un message.
5. Ouvrez le fichier ProduitController.php, puis ajoutez ce message à la ligne 16 :
public function index()
{
echo "Liste des produits";
}
Sauvegarder et rafraîchissez la page http://127.0.0.1/produits/ et voilà vous avez un message ?.
Le moteur de template Blade
Alors nous avons vu ensemble ce qu’est un model puis un controller, maintenant nous allons travailler sur la view avant d’implémenter les opérations CRUD.
Toutes les views dans Laravel sont par défaut construites par le moteur de templating Blade. Le moteur Blade est simple et puissant. Ces fichiers ont l’extension .blade.php et sont dans le dossier /resources/views.
Qu’est ce que un moteur de template ?
En français on peux le traduire par moteur de modélisation. Le moteur de template est utilisé pour fusionner la page HTML avec les données de votre application :
Au moment de l’exécution, il remplace les variables d’un fichier de template par des valeurs réelles et transforme le fichier de template en contenu HTML qui sera envoyé au client. Ici dans le fichier de template, le nom d’utilisateur est une variable {{ name }}. Le moteur de template remplacera ce nom d’utilisateur par la valeur reçue du backend. Côté backend, la variable du nom d’utilisateur contient la valeur Vincent, alors le résultat sera Bonjour Vincent :
Un autre exemple : Quand vous allez vous inscrire dans un club de sport, on vous demande de remplir le formulaire d’inscription (fichier de template). Vous écrivez vos coordonnées qui sont dynamique (données). On obtiens alors une copie de votre demande (résultat). Et bien dans la programmation, c’est pareil. Le formulaire représente le code HTML et les coordonnées manuscrites sont des valeurs de la base de données.
Avec le moteur de template vous pouvez aussi boucler, modifier le contenu de manière dynamique etc… On y reviendras dans quelques instant.
Créer les views avec le moteur de template Blade
Maintenant, nous allons créer les différentes vues pour notre application de gestion de stock avec les fichiers de template Blade.
1. Accédez au dossier resources/views et ajouter un nouveau dossier nommé produits.
2. Dans ce dossier produits, ajoutez ces 4 fichiers :
- index.blade.php : affiche la liste des produits
- create.blade.php : affiche un formulaire pour ajouter un produit
- show.blade.php : affiche un produit spécifique
- edit.blade.php : affiche un formulaire pour éditer un produit
3. Puis de retour dans le dossier resources/views ajoutez ce nouveau fichier layout.blade.php. Vous devez avoir une architecture qui ressemble à ça :
3. Le fichier de template layout.blade.php définis la mise en page principale de notre application. Dans ce template, ajoutez l’architecture d’une page HTML avec l’importation du framework Bootstrap 4 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Application Laravel Crud</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="container">
@yield('content')
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>
Remarqué à la ligne 13, nous avons le marqueur @yield('content'). Ce marqueur indique que si un fichier utilise le marqueur @extend(), alors cherche dans ce même fichier une section de balisage identifiée comme @section() ensuite insère le dans le fichier layout.blade.php à la place de @yield(‘content’) :
4. Mettons ça en pratique ? ! dans le fichier create.blade.php, à la ligne 1, nous ajoutons le marqueur @extends('layout') puis ligne 3 le marqueur @section(‘content’) avec son contenu. N’oubliez pas de fermer le marqueur @section par @endsection. Ce qui nous donne ceci :
@extends('layout')
@section('content')
<div class="container py-5">
<div class="row">
<div class="col-lg-7 mx-auto">
<div class="bg-white rounded-lg shadow-sm p-5">
<div class="tab-content">
<div id="nav-tab-card" class="tab-pane fade show active">
<h3> Ajouter un produit</h3>
<!-- Formulaire -->
<form method="POST">
@csrf
<div class="form-group">
<label>Nom</label>
<input type="text" name="nom" class="form-control">
</div>
<div class="form-group">
<label>Description</label>
<input type="text" name="description" class="form-control">
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label><span class="hidden-xs">Prix</span></label>
<div class="input-group">
<input type="number" name="prix" class="form-control">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group mb-4">
<label>Quantité</label>
<input type="number" name="quantite" class="form-control">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary rounded-pill shadow-sm"> Ajouter un produit </button>
</form>
<!-- Fin du formulaire -->
</div>
</div>
</div>
</div>
</div>
@endsection
Qu’est ce que CSRF ?
Maintenant, découvrons-en plus sur la vulnérabilité CSRF.
CSRF signifie contrefaçon de requête intersites. C’est un type d’exploit malveillant qui permet à un site web tiers de se faire passer par un utilisateur identifié sur le site Web cible :
Les navigateurs utilisent des méthodes HTTP telles que GET, POST, et DELETEpour communiquer avec les sites Web. Cette communication prend la forme d’une demande de page Web ou d’une action sur le serveur. Bien que la plupart de ces demandes puissent être bénignes (par exemple, « Donnez-moi la page d’accueil »), les demandes protégées doivent être cachées derrière un certain type de mécanisme d’authentification.
Ces systèmes d’authentification utiliseraient ensuite des cookies dans chaque demande pour identifier les utilisateurs et les marquer comme étant de confiance.
Des problèmes surviennent lorsqu’un acteur malveillant crée une demande malveillante pour une page ou une action à l’insu de l’utilisateur et fait croire au site Web source qu’il s’agit d’une demande légitime.
5. Ok maintenant que le formulaire est fait, on teste si ça fonctionne. Retournons sur le fichier ProduitController.php et indiquons à la function create() de nous retourner le fichier de template create.blade.php :
public function create()
{
return view('produits.create');
}
6. Sauvegardons et testons cette url : http://127.0.0.1:8000/produits/create
Félicitation ? ! Nous avons le formulaire.
7. Restons sur le controller, dans la function index(), nous retournons sur le template index.blade.php, ce qui donne :
public function index()
{
return view('produits.index');
}
8. Ensuite, nous allons éditer ce template index.blade.php :
@extends('layout')
@section('content')
<div class="container py-5">
<div class="row">
<div class="col-lg-10 mx-auto">
<div class="bg-white rounded-lg shadow-sm p-5">
<div class="tab-content">
<div id="nav-tab-card" class="tab-pane fade show active">
<h3>Liste des produits</h3>
<!-- Tableau -->
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nom</th>
<th scope="col">Description</th>
<th scope="col">Prix</th>
<th scope="col">Quantité</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Chemise</td>
<td>100% coton</td>
<td>30€</td>
<td>1000</td>
<td>
<a href="" class="btn btn-primary btn-sm"">Editer</a>
<a href="" class="btn btn-danger btn-sm"">Supprimer</a>
</td>
</tr>
</tbody>
</table>
<!-- Fin du Tableau -->
</div>
</div>
</div>
</div>
</div>
@endsection
9. Testons cette vue http://127.0.0.1:8000/produits :
Bon travail ! Nous allons laissez pour l’instant les templates edit.blade.php et show.blade.php. Nous y reviendrons dans quelques instants. Nous allons toute de suite faire fonctionner le formulaire avec l’opérateur CREATE puis afficher la liste des produits dans le template index.blade.php.
Les opérateurs CRUD
Pour rappel CRUD signifie Create, Read, Update et Delete, en français : créer, afficher, mettre à jour, supprimer. Ce sont des opérations qui sont nécessaires dans la plupart des applications pour manipuler les données d’une base de données. Nous allons d’abord mettre en place l’opérateur Create pour ajouter les données du formulaire vers la base de données, puis nous les affichons dans le template produits/index.blade.php grâce à l’opérateur READ. Et ensuite nous finirons par l’édition et le suppression du produit. Allez c’est parti ? !
Implémenter l’opération Create
Pour enregistrer des données le controller ProduitController inclut deux méthodes :
- create() correspond au endpoint http://127.0.0.1:8000/produits/create de type GET. Elle est utilisé pour afficher le formulaire HTML.
- store() correspond au endpoint http://127.0.0.1:8000/produits/ de type POST. Elle utilisé par le formulaire pour enregistrer les données dans la base de données.
1. Mettons en place ces 2 méthodes, dans le fichier ProduitController, à la ligne 4 importer le modèle Produit :
<?php
namespace App\Http\Controllers;
use App\Models\Produit;
use Illuminate\Http\Request;
Dans la méthode store(), nous avons l’object $request qui est en instance de la classe Request, Dans Laravel, c’est la classe Request qui gère toutes les requêtes HTTP provenant du client. Cela signifie que durant tout le cycle de vie d’une requête, les variables qui sont affectées dans l’appel d’une fonction seront directement adressées à l’object $request. Ça va ? Vous avez compris ? ?
Bon pour faire simple, c’est dans l’object $request que se trouves toutes les valeurs qui ont été saisi dans le formulaire ?. Voici l’explication avec un schéma :
- L’utilisatrice remplis le formulaire et clique sur le bouton “Ajouter un produit”. Le bouton déclenche une requête de type POST
- La route intercepte et identifie l’url de la requête et envois vers la méthode du contrôleur dédié. Ici c’est la méthode store(Request $request).
- Nous créons une variable $nom. Pour lui assigner la valeur “Chemise”, nous utilisons l’object $request ce qui donne : $nom = $request->get(‘nom’). On fera pareil pour les autres variables.
2. Editons cette méthode store(), nous allons d’abord ajouter une condition de validation grâce à la méthode validate(), on vérifie si les champs ont été saisi :
public function store(Request $request)
{
$request->validate([
'nom'=>'required',
'prix'=>'required',
'description'=>'required',
'quantite'=>'required'
]);
}
3. Ensuite nous appelons notre modèle Produit pour créer un nouveau produit grâce à la méthode create(). Dans cette méthode, nous ajoutons un tableau associatif puis nous définissons les propriétés du modèle avec l’object &request. Ensuite les données seront persistez dans la base de données.
public function store(Request $request)
{
$request->validate([
'nom'=>'required',
'prix'=>'required',
'description'=>'required',
'quantite'=>'required'
]);
Produit::create([
'nom' => $request->nom,
'description' => $request->description,
'prix' => $request->prix,
'quantite' => $request->quantite,
]);
// Alternative
// Product::create($request->all());
}
4. Et pour finir on demande une redirection sur la vue index qui est la liste des produits :
public function store(Request $request)
{
$request->validate([
'nom'=>'required',
'prix'=>'required',
'description'=>'required',
'quantite'=>'required'
]);
Produit::create([
'nom' => $request->nom,
'description' => $request->description,
'prix' => $request->prix,
'quantite' => $request->quantite,
]);
return redirect()->route('produits.index')
}
Voilà nous avons fini avec la méthode store().
5. Ok, nous avons notre formulaire et notre méthode store() qui permet d’enregistrer les données. Bon il manque encore un élément et c’est dans le template resources/views/produits/create.blade.php. Ouvrez ce fichier et à la ligne 15, nous devons ajouter l’attribut action avec le lien de la requête. Mais avec Laravel nous allons plutôt utiliser le nom de la route. Et souvenez-vous pour avoir la liste de toutes les routes on utilise la commande :
php artisan route:list
Pour la méthode POST produits, le nom de la route est produits.store. La valeur de l’attribut action sera déclaré comme ceci : action="{{ route('produits.store') }}". Mettons à jour notre formulaire :
<!-- Formulaire -->
<form method="POST" action="{{ route('produits.store') }}">
@csrf
Ensuite nous ajoutons un message d’erreur si les champs ne sont pas remplis :
<h3> Ajouter un produit</h3>
<!-- Message d'information -->
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<!-- Formulaire -->
<form method="POST" action="{{ route('produits.store') }}">
6. Parfait alors ajoutons un produit sans écrire du contenu !
Ok nous avons les messages mais c’est en anglais ?. Nous allons traduire en français.
7. Dans le dossier resources/lang/ ajoutez un nouveau dossier fr. Toujours dans ce dossier resources/lang/ vous avez le dossier en, ouvrez ce dossier en puis copiez-coller le fichier validation.php dans le dossier fr.
8. Toujours dans ce fichier validation.php, traduisez la ligne 100. Puis sauvegardez.
'present' => 'The :attribute field must be present.',
'regex' => 'The :attribute format is invalid.',
'required' => 'Le champs :attribute est requis.',
'required_if' => 'The :attribute field is required when :other is :value.',
'required_unless' => 'The :attribute field is required unless :other is in :values.',
9. Et pour finir, nous devons activer la langue française. Ouvrez le fichier config/app.php et editez la ligne 83 :
*/
'locale' => 'fr',
/*
Testons de nouveau :
Voilà c’est en français !
Cette fois ci on ajoute du contenu et en cliquant sur le bouton, nous sommes rédirigé vers la page de la liste des produits.
Allons sur notre base de donnée pour vérifier sur le nouveau produit est enregistré :
TOP il est !
OK maintenant nous allons afficher la liste des produits
Implémenter l’opération Read
Maintenant, nous devons afficher la liste des produits. Toujours dans notre fichier ProduitController.php, la fonction index() doit renvoyer la vue index.blade.php avec les données extraites de la base de données mysql.
1. Ajoutez le code ci-dessous dans la méthode index() :
public function index()
{
$produits = Produit::all();
return view('produits.index', compact('produits'));
}
La méthode all() récupère tous le contenu de la table produuits. Puis dans la méthode view nous avons 2 méthodes. La première c’est notre vue, et le deuximème nous passons dans cette vue l’object $produits.
2. Ouvrez le fichier de template index.blade.php, après la ligne 25, nous faisons une boucle avec la méthode foreach(). Dans cette méthode nous récupérons la variable $produits que nous avons fait passé avec la méthode compact() controlleur. Puis nous …
<tbody>
@foreach($produits as $produit)
<tr>
<td>{{$produit->id}}</td>
<td>{{$produit->nom}}</td>
<td>{{$produit->description}}</td>
<td>{{$produit->prix}}</td>
<td>{{$produit->quantite}}</td>
<td>
<a href="" class="btn btn-primary btn-sm"">Editer</a>
<a href="" class="btn btn-danger btn-sm"">Supprimer</a>
</td>
</tr>
@endforeach
</tbody>
Testons tout de suite l’url http://127.0.0.1:8000/produits/ pour voir si nous avons la liste des produits :
Formidable nous avons notre produit qui s’affiche !
Ok, maintenant que notre formulaire fonctionne et quand nous enregistrons le produit il y a une redirection vers la liste des produits. Ça serait bien d’avoir un message d’information pour nous dire que le produit a bien été ajouté avec succès. Alors c’est parti !
3. Retournons sur le fichier ProduitController et ajoutons dans la fonction store(), ligne 53, le message à afficher si l’enregistrement est un succès. Pour faire ça, nous prenons la méthode with(), on passe comme propriété success et le message à afficher :
public function store(Request $request)
{
$request->validate([
'nom'=>'required',
'prix'=>'required',
'description'=>'required',
'quantite'=>'required'
]);
Produit::create([
'nom' => $request->nom,
'description' => $request->description,
'prix' => $request->prix,
'quantite' => $request->quantite,
]);
return redirect()->route('produits.index')
->with('success', 'Produit ajouté avec succès !');
}
4. Ensuite, nous retournons sur le fichier template index.blade.php et nous ajoutons une condition si il y a une propriété success alors affiche le message :
<h3>Liste des produits</h3>
@if(session()->get('success'))
<div class="alert alert-success">
{{ session()->get('success') }}
</div><br />
@endif
<!-- Tableau -->
<table class="table">
Parfait ! Allez nous ajoutons un nouveau produit pour vérifier si ça fonctionne bien !
Editer et mettre à jour le produit
Pour éditer et mettre à jour les informations d’un produit, nous utilisons les fonctions edit() et update() du fichier ProduitController.php. Commençons par le function edit() qui doit afficher la vue pour éditer un produit spécifique.
Afficher le formulaire pour éditer
1. A la ligne 73 la function edit() demande un paramètre qui correspond à l’id d’un produit.
Donc à la ligne 75, nous créons une variable $produit qui correspond au produit demandé par l’id. Et pour faire ça nous utilisons la méthode findOrFail() grâce au model Produit.
Qu’est ce que findOrFail($id) ? Cette méthode prend un identifiant et renvoie un seul modèle. Si aucun modèle ne correspond à l’identifiant alors il renvoie une erreur.
Ensuite ligne 76, on retourne la vue edit et nous lui passons la variable $produit.
public function edit($id)
{
$produit = Produit::findOrFail($id);
return view('edit', compact('student'));
}
2. Affichez le fichier de template edit.blade.php, dans ce fichier nous allons récupérer le formulaire du fichier create.blade.php et ajouter l’attribut value pour tous les <input> :
@extends('layout')
@section('content')
<div class="container py-5">
<div class="row">
<div class="col-lg-7 mx-auto">
<div class="bg-white rounded-lg shadow-sm p-5">
<div class="tab-content">
<div id="nav-tab-card" class="tab-pane fade show active">
<h3>Editer un produit</h3>
<!-- Message d'information -->
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<!-- Formulaire -->
<form method="POST" action="">
@csrf
<div class="form-group">
<label>Nom</label>
<input type="text" name="nom" class="form-control" value="{{ $produit->nom }}">
</div>
<div class="form-group">
<label>Description</label>
<input type="text" name="description" class="form-control" value="{{ $produit->description }}">
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label><span class="hidden-xs">Prix</span></label>
<div class="input-group">
<input type="number" name="prix" class="form-control" value="{{ $produit->prix }}">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group mb-4">
<label>Quantité</label>
<input type="number" name="quantite" class="form-control" value="{{ $produit->quantite }}">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary rounded-pill shadow-sm">Mettre à jour</button>
</form>
<!-- Fin du formulaire -->
</div>
</div>
</div>
</div>
</div>
@endsection
3. Pour finir nous retournons sur le template de la liste des produits index.blade.php puis nous ajoutons le lien pour le bouton Editer.Dans l’attribut href=” nous passons la méthode route() qui prends 2 valeurs :
- “produits.edit” : nom de la méthode edit(). Pour rappel, la commande
php artisan route:listaffiche toutes les routes avec les noms - $produit->id : est l’id du produit demandé par la méthode edit() dans son paramètre, pour rappel :
public function edit($id)
Ce qui nous donne : route('produits.edit', $produit->id, mettons à jour le bouton du lien :
<tbody>
@foreach($produits as $produit)
<tr>
<td>{{$produit->id}}</td>
<td>{{$produit->nom}}</td>
<td>{{$produit->description}}</td>
<td>{{$produit->prix}}</td>
<td>{{$produit->quantite}}</td>
<td>
<a href="{{ route('produits.edit', $produit->id)}}" class="btn btn-primary btn-sm"">Editer</a>
<a href="" class="btn btn-danger btn-sm"">Supprimer</a>
</td>
</tr>
@endforeach
</tbody>
Ok, on sauvegarde et on test un bouton Editer pour voir si on arrive bien sur la page d’édition du produit :
Bravo ça fonctionne ??? !.
Mettre à jour le produit
Le formulaire s’affiche avec les valeurs du prorduit. Ok maintenant on va mettre à jour la méthode update() pour mettre à jour le produit.
1. Retournons dans le contrôleur ProduitController.php pour éditer la function update() ligne 86. Dans l’instruction, nous faisons comme dans la function create(), nous récupérons l’object $request avec une condition de validation grâce à la méthode validate() puis nous mettons l’object dans une variable $updateProduit :
public function update(Request $request, $id)
{
$updateProduit = $request->validate([
'name' => 'required',
'email' => 'required',
'phone' => 'required',
'password' => 'required',
]);
}
2. Ensuite on reprends le model Produit puis on passe 2 méthodes :
- whereId() :
- update($updateProduit) :
Et enfin nous faisons une redirection vers la liste des produits comme pour la function create() :
public function update(Request $request, $id)
{
$updateProduit = $request->validate([
'name' => 'required',
'email' => 'required',
'phone' => 'required',
'password' => 'required',
]);
Produit::whereId($id)->update($updateProduit);
return redirect()->route('produits.index')
->with('success', 'Le produit mis à jour avec succès !');
}
Ensuite on mets à jour le formulaire edit.blade.php avec la méthode route nous lui indiquons 2 paramètres, le premier c’est le nom du controlleur puis le deuxième est l’id du produit.
Ligne 25, nous ajoutons la méthode PATCH, car pour rappel, avec le formulaire nous sommes limiter avec la méthode POST. Et comme nous voulez mettre un jour un produit alors nous passons à la ligne 25 la méthode PATCH. Comment ça la méthode Patch ? Alice tu devrais mettre Put normalement ? Oui oui normalement je peux mettre Put mais pour notre cas, nous pouvons mettre la méthode Patch.
Quelle est la différence entre la méthode Put et Patch ?
Put remplace complètement le produit tandis que Patch met à jour une partie d’un produit.
<!-- Formulaire -->
<form method="post" action="{{ route('produits.update', $produit->id) }}">
@csrf
@method('PATCH')
<div class="form-group">
Bien éditons un produit puis cliquons sur mettre à jour
Génial le nom du produit 1 a été mis à jour ? !
Nous avons fait l’opérateur Create, Read et Update, maintenant il nous reste plus que l’opérateur Delete. Allez c’est parti !
Supprimer un produit
Dans le fichier le contrôleur ProduitController.php, c’est la function destroy() qui permet de supprimer un produit. De la même manière que la functon edit(), cette function destroy() à besoin d’un id en paramètre pour identifier le produit. Nous allons faire 3 étapes :
- $produit = Produit::findOrFail($id) : Nous récupérons le model Produit et grâce à la méthode findOrFail, nous identifiant l’id du produit dans la base de donnée. Pour rappel la varaible $id correspond au paramètre de la function destroy(). Puis nous stockons le résultat dans une variable.
- $produit->delete() : La variable $produit est maintenant en instance du model Produit, elle hérite de toutes ses méthode. La méthode pour supprimer est un enregistrement est delete().
- return redirect(‘/produits’)->with(‘success’, ‘Produit supprimé avec succès’) : Nous retournons vers la vue de la liste des produits avec un message de succès.
Voici ce que ça donne dans la function :
public function destroy($id)
{
$produit = Produit::findOrFail($id);
$produit->delete();
return redirect('/produits')->with('success', 'Produit supprimé avec succès');
}
Bien, nous venons de créer en place la méthode destroy(), maintenant nous devons faire fonctionner le bouton Supprimer de la liste des produits.
Dans le fichier … nous mettons à jour le bouton Supprimer, nous allons
<tbody>
@foreach($produits as $produit)
<tr>
<td>{{$produit->id}}</td>
<td>{{$produit->nom}}</td>
<td>{{$produit->description}}</td>
<td>{{$produit->prix}}</td>
<td>{{$produit->quantite}}</td>
<td>
<a href="{{ route('produits.edit', $produit->id)}}" class="btn btn-primary btn-sm"">Editer</a>
<form action="{{ route('produits.destroy', $produit->id)}}" method="POST" style="display: inline-block">
@csrf
@method('DELETE')
<button class="btn btn-danger btn-sm"" type="submit">Supprimer</button>
</form>
</td>
</tr>
@endforeach
</tbody>
Nous essayons de supprimer le 2eme produit :
Et voilà ! le produit est supprimé !
Voilà nous avons fini de mettre en place les 4 opérateurs CRUD ? !.
Conclusion
Félicitations nous avons fini cette atelier. J’espère que ça vous a plus. Si vous avez été bloqué vous pouvez suivre le code source via le lien ci-dessous.
Je vous souhaites une excellente journée, à bientôt
Code source :
Si vous avez trouvé ce projet utile, n’oubliez pas de partager s’il vous plait ? !.
French
Dutch
English
German
Italian
Russian
Spanish