Aujourd’hui, je vais vous donner un exemple d’opération brute laravel 10. Ici, vous apprendrez à construire une application de gestion des contacts avec laravel 10. Nous utiliserons l’application laravel 10 crud pour les débutants. C’est un exemple simple de la façon de créer un crud dans laravel 10. Très bien, plongeons dans les étapes.
Signification de CRUD
CRUD est un acronyme qui vient du monde de la programmation informatique et fait référence aux quatre fonctions considérées comme nécessaires pour implémenter le stockage persistant dans votre application:
C : Créer,
R : Lire,
U : Mettre à jour et
D : Supprimer.
Dans cet exemple, nous allons créer une application de gestion de contact avec les quatre opérations précitées en utilisant laravel 10. Nous allons créer une table de contacts avec des colonnes de nom et du telephone en utilisant la Migration de Laravel 10, puis nous allons créer des fichiers d’itinéraires (routes), de contrôleurs (controllers), de vues (views) et de modèle (Models) pour notre module de contact. Nous allons utiliser Bootstrap 5 pour la conception visuelle de notre applilication.
Mais si vous avez encore de difficultés à comprendre c’est quoi Laravel 10, je vous conseille de lire cet article : Introduction à Laravel 10
Suivons donc l’étape ci-dessous pour créer une opération crud avec Laravel 10.
Étape 1: Installez l’application Laravel 10
Commençons le tutoriel en installant une nouvelle application laravel 10. Si vous avez déjà créé votre projet avec composer, ignorez l’étape suivante.
Avant la création de votre projet, vous devez vous rassurer avoir déjà installé Composer dans votre PC ; si c’est ne pas encore fait, rendez-vous sur le site de Composer et suivez les instructions avant de poursuivre cet article.
Si vous avez tout installé, rendez-vous sur le terminal de votre éditeur de texte. Pour cet article, nous utilisons VS Code ; tapez ensuite la commande ci-dessous :
composer create-project laravel/laravel contact-app
Si l’installation de l’application se passe bien, vous allez avoir une notification ci-dessous :
Étape 2 : Configuration de la base de données
Dans la deuxième étape, nous allons faire une configuration de notre base de données, nous devons ajouter le nom de la base de données, le nom d’utilisateur MySQL et le mot de passe.
Alors ouvrons le fichier.env et remplissons tous les détails comme ci-dessous:
.Env
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB=3306 DB=ici le nom de votre base de données(laravel_contact) DB_USERNAME=ici nom d’utilisateur de la base de données(root) DB_PASSWORD=ici mot de passe de la base de données
Étape 3 : Créer une migration
Ici, nous allons créer une table « contacts » en utilisant la migration laravel. Utilisons donc la commande suivante pour créer un fichier de migration.
php artisan make:migration create_contacts_table --create=contacts
Après cette commande, vous trouverez un fichier dans le chemin suivant « database/migrations » et vous devrez mettre le code ci-dessous dans votre fichier de migration pour créer la table contacts.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('contacts', function (Blueprint $table) {
$table->id();
$table->string('nom');
$table->string('telephone');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('contacts');
}
};
Vous devez maintenant exécuter cette migration à l’aide de la commande suivante :
php artisan migrate
Vous pouvez aussi lire : Comment apprendre la programmation
Étape 4 : Créer un contrôleur (Controller) et un modèle (Model)
Dans cette étape, nous devons maintenant créer un nouveau contrôleur de ressources en tant que ContactController. Alors exécutez la commande ci-dessous et créez un nouveau contrôleur. Contrôleur ci-dessous pour créer un contrôleur de ressources.
php artisan make:controller ContactController --resource --model=Contact
Après la commande ci-dessous, vous trouverez un nouveau fichier dans ce chemin « app/Http/Controllers/ContactController.php ».
Dans ce contrôleur, seront créées sept méthodes par défaut comme les méthodes ci-dessous:
1)index()
2)create()
3)store()
4)show()
5)edit()
6)update()
7)destroy()
Alors, copions le code ci-dessous et mettons dans notre fichier ContactController.php.
app/Http/Controllers/ContactController.php
<?php
namespace App\Http\Controllers;
use App\Models\Contact;
use Illuminate\View\View;
use Illuminate\Http\Request;
use Illuminate\Http\RedirectResponse;
class ContactController extends Controller
{
/**
* Display a listing of the resource.
*/
public function index(): View
{
$contacts = Contact::latest()->paginate(5);
return view('contacts.index',compact('contacts'))
->with('i', (request()->input('page', 1) - 1) * 5);
}
/**
* Show the form for creating a new resource.
*/
public function create(): View
{
return view('contacts.create');
}
/**
* Store a newly created resource in storage.
*/
public function store(Request $request): RedirectResponse
{
$request->validate([
'nom' => 'required',
'telephone' => 'required',
]);
Contact::create($request->all());
return redirect()->route('contacts.index')
->with('success','Contact créé avec succès.');
}
/**
* Display the specified resource.
*/
public function show(Contact $contact): View
{
return view('contacts.show',compact('contact'));
}
/**
* Show the form for editing the specified resource.
*/
public function edit(Contact $contact): View
{
return view('contacts.edit',compact('contact'));
}
/**
* Update the specified resource in storage.
*/
public function update(Request $request, Contact $contact): RedirectResponse
{
$request->validate([
'nom' => 'required',
'telephone' => 'required',
]);
$contact->update($request->all());
return redirect()->route('contacts.index')
->with('success','Contact modifié avec succès');
}
/**
* Remove the specified resource from storage.
*/
public function destroy(Contact $contact): RedirectResponse
{
$contact->delete();
return redirect()->route('contacts.index')
->with('success','Contact supprimé avec succès ');
}
}
Étape 5 : Ajouter une route des ressources
Ici, nous devons ajouter une route de ressources pour l’application de gestion des contacts. Ouvrez donc votre fichier « routes/web.php » , supprimer la route existante et ajoutez la route suivante :
routes/Web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ContactController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/
Route::resource('contacts', ContactController::class);
Vous pouvez aussi lire : ChatGPT : Modèle de langage d’OpenAI
Étape 6 : Ajouter les fichiers Blades
En dernière étape. Dans cette étape, nous devons créer uniquement des fichiers blades, rappelons que les fichiers blades contiendrons les composants de notre application (Zone de texte, Tableaux, Buttons, …).
Donc, nous devons principalement créer un fichier de mise en page (layout), puis créer un nouveau dossier « contacts », puis créer des fichiers blades de notre application de gestion des contacts. Donc, enfin, vous devez créer les fichier blades ci-dessous :
1) layout.blade.php
2) index.blade.php
3) create.blade.php
4) edit.blade.php
5) show.blade.php
Alors créons simplement le fichier suivant et mettons le code ci-dessous :
ressources/vues/contacts/layout.blade.php
Comme signalé au début de cet article, nous allons utiliser Bootstrap 5 pour la partie visuelle de notre application, suivez donc le lien de cette application sur mon GitHub et télécharger l’application zippée : Laravel10-Contact-CRUD-App.
Une fois téléchargée, décompressez l’application et rendez-vous dans le dossier « public/assets/css », donc vous allez dans votre dossier de votre application, dans le sous dossier public, créez ensuite un sous dossier assets et coller le dossier css que vous avez copié dans mon application téléchargée sur GitHub.
Ainsi donc, notre fichier layout.blade.php ressemblera à celui-ci :
<!DOCTYPE html>
<html>
<head>
<title>CRUD App Laravel 10 - Pdevtuto.com</title>
<link href="{{ asset('assets/css/bootstrap.min.css') }}" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
@yield('content')
</div>
</body>
</html>
ressources/vues/contacts/index.blade.php
@extends('contacts.layout')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>CRUD Exemple Laravel 10 pour débutants - Pdevtuto.com</h2>
</div>
<div class="pull-right">
<a class="btn btn-success" href="{{ route('contacts.create') }}"> Ajouter un nouveau contact</a>
</div>
</div>
</div>
@if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
@endif
<table class="table table-bordered">
<tr>
<th>No</th>
<th>Nom</th>
<th>Téléphone</th>
<th width="280px">Action</th>
</tr>
@foreach ($contacts as $contact)
<tr>
<td>{{ ++$i }}</td>
<td>{{ $contact->nom }}</td>
<td>{{ $contact->telephone }}</td>
<td>
<form action="{{ route('contacts.destroy',$contact->id) }}" method="POST">
<a class="btn btn-info" href="{{ route('contacts.show',$contact->id) }}">Afficher</a>
<a class="btn btn-primary" href="{{ route('contacts.edit',$contact->id) }}">Modifier</a>
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger">Supprimer</button>
</form>
</td>
</tr>
@endforeach
</table>
{!! $contacts->links() !!}
@endsection
resources/views/contacts/create.blade.php
@extends('contacts.layout')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Ajouter nouveau contact</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('contacts.index') }}"> Retour</a>
</div>
</div>
</div>
@if ($errors->any())
<div class="alert alert-danger">
<strong>Attention!</strong> Vous avez des problèmes liés à vos informations .<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('contacts.store') }}" method="POST">
@csrf
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Nom:</strong>
<input type="text" name="nom" class="form-control" placeholder="Nom">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Téléphone:</strong>
<input type="text" name="telephone" class="form-control" placeholder="Téléphone">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Ajouter</button>
</div>
</div>
</form>
@endsection
ressources/vues/contacts/edit.blade.php
@extends('contacts.layout')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Modifier Contact</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('contacts.index') }}"> Retour</a>
</div>
</div>
</div>
@if ($errors->any())
<div class="alert alert-danger">
<strong>Attention!</strong> Vous avez des problèmes liés avec vos informations.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('contacts.update',$contact->id) }}" method="POST">
@csrf
@method('PUT')
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Name:</strong>
<input type="text" name="nom" value="{{ $contact->nom }}" class="form-control" placeholder="Nom">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Téléphone:</strong>
<input type="text" name="telephone" value="{{ $contact->telephone }}" class="form-control" placeholder="Téléphone">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Modifier</button>
</div>
</div>
</form>
@endsection
ressources/vues/contacts/show.blade.php
@extends('contacts.layout')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2> Afficher Contact</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('contacts.index') }}"> Retour</a>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Nom:</strong>
{{ $contact->nom }}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Téléphone:</strong>
{{ $contact->telephone }}
</div>
</div>
</div>
@endsection
Exécutez l’application Laravel 10
Toutes les étapes requises ont été effectuées, vous devez maintenant taper la commande ci-dessous et appuyer sur Entrée pour exécuter l’application Laravel :
php artisan serve
Maintenant, accédez à votre navigateur Web, tapez l’URL donnée et affichez la sortie de l’application:
http://localhost:8000/contacts
Vous trouverez toutes les pages créées dans la partie ci-dessous:
Liste des contacts :
Ajouter un contact :
Modifier un contact :
Afficher le détail du contact :
Vous pouvez télécharger ce code source depuis mon git : Laravel10-Contact-CRUD-App
J’espère que cela pourra vous aider…
Vous pouvez aussi lire : Introduction à php
Laisser un commentaire