Pourquoi Laravel : creer une application web ?
Laravel est un framework PHP très populaire pour créer des applications web robustes, performantes et bien structurées. Il offre une grande flexibilité tout en facilitant les tâches complexes de développement.
Un cas concret d'utilisation serait la création d'un site e-commerce : avec Laravel, on peut gérer facilement la gestion des produits, des paniers, des paiements, et même l'intégration de services tiers comme Google Analytics ou Stripe pour le traitement des transactions.
Prerequis
- Connaissance de base en PHP
- Familiarité avec les bases du MVC (Model-View-Controller)
- Compréhension des concepts d'ORM (Object-Relational Mapping) et SQL
Outils à installer :
- PHP >= 8.1
- Composer (gestionnaire de dépendances)
- Node.js (pour l'utilisation de packages comme Laravel Mix)
- Un éditeur de code (ex: VSCode, PhpStorm)
Installation rapide de Laravel
## Installer Composer si ce n'est pas déjà fait
curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
## Créer un nouveau projet Laravel
composer create-project --prefer-dist laravel/laravel my-app
Concepts fondamentaux
1. Routing
Le routing est le processus par lequel les URL sont mappées aux actions appropriées dans votre application.
// routes/web.php
Route::get('/hello', function () {
return 'Bonjour, Laravel !';
});
2. Controllers
Les contrôleurs gèrent la logique métier de l'application.
// app/Http/Controllers/WelcomeController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class WelcomeController extends Controller
{
public function index()
{
return view('welcome');
}
}
3. Views (Vues)
Les vues définissent la structure de l'interface utilisateur.
<!-- resources/views/welcome.blade.php -->
<!DOCTYPE html>
<html>
<head>
<title>Bienvenue</title>
</head>
<body>
<h1>$message</h1>
</body>
</html>
4. Models (Modèles)
Les modèles représentent les données et interagissent avec la base de données.
// app/Models/User.php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class User extends Model
{
protected $fillable = ['name', 'email'];
}
5. Migrations (Migrations)
Les migrations permettent de gérer les schémas de la base de données.
// database/migrations/2014_10_12_000000_create_users_table.php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateUsersTable extends Migration
{
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('email')->unique();
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('users');
}
}
6. Middleware
Les middleware permettent de filtrer les requêtes HTTP avant qu'elles ne atteignent le contrôleur.
// app/Http/Middleware/Authenticate.php
namespace App\Http\Middleware;
use Closure;
use Illuminate\Support\Facades\Auth;
class Authenticate
{
public function handle($request, Closure $next)
{
if (!Auth::check()) {
return redirect('login');
}
return $next($request);
}
}
7. Packages (Packages)
Les packages tiers augmentent les fonctionnalités de Laravel en ajoutant des composants supplémentaires.
## Installer un package via Composer
composer require laravel/ui
## Utiliser le package pour créer une interface d'authentification
php artisan ui vue --auth
npm install && npm run dev
Mise en pratique : projet fil rouge
Créer un gestionnaire de tâches simple
## Créer un nouveau projet Laravel
composer create-project --prefer-dist laravel/laravel task-manager
## Installer les dépendances
cd task-manager
npm install && npm run dev
Étape 1 : Création d'une migration pour la table des tâches
// database/migrations/2023_04_01_000000_create_tasks_table.php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateTasksTable extends Migration
{
public function up()
{
Schema::create('tasks', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('description')->nullable();
$table->boolean('completed')->default(false);
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('tasks');
}
}
bash
## Exécuter la migration
php artisan migrate
Étape 2 : Création d'un modèle pour les tâches
// app/Models/Task.php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class Task extends Model
{
protected $fillable = ['title', 'description', 'completed'];
}
Étape 3 : Création d'une migration pour l'authentification des utilisateurs
## Installer le package Laravel UI et créer les vues d'authentification
composer require laravel/ui
php artisan ui vue --auth
npm install && npm run dev
Étape 4 : Création de la contrôleur pour les tâches
// app/Http/Controllers/TaskController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Task;
class TaskController extends Controller
{
public function index()
{
$tasks = Task::all();
return view('tasks.index', compact('tasks'));
}
public function create()
{
return view('tasks.create');
}
public function store(Request $request)
{
$task = Task::create($request->all());
return redirect()->route('tasks.index');
}
public function edit(Task $task)
{
return view('tasks.edit', compact('task'));
}
public function update(Request $request, Task $task)
{
$task->update($request->all());
return redirect()->route('tasks.index');
}
public function destroy(Task $task)
{
$task->delete();
return redirect()->route('tasks.index');
}
}
Étape 5 : Création des vues pour les tâches
<!-- resources/views/tasks/index.blade.php -->
@extends('layouts.app')
@section('content')
<div class="container">
<h1>Tâches</h1>
<a href="route('tasks.create')" class="btn btn-primary mb-2">Nouvelle Tâche</a>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Titre</th>
<th>Description</th>
<th>Complétée</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach ($tasks as $task)
<tr>
<td>$task->id</td>
<td>$task->title</td>
<td>$task->description</td>
<td>$task->completed ? 'Oui' : 'Non'</td>
<td>
<a href="route('tasks.edit', $task)" class="btn btn-warning">Modifier</a>
<form action="route('tasks.destroy', $task)" method="POST" style="display: inline-block;">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger">Supprimer</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@endsection
<!-- resources/views/tasks/create.blade.php -->
@extends('layouts.app')
@section('content')
<div class="container">
<h1>Nouvelle Tâche</h1>
<form action="route('tasks.store')" method="POST">
@csrf
<div class="mb-3">
<label for="title" class="form-label">Titre</label>
<input type="text" name="title" id="title" class="form-control" required>
</div>
<div class="mb-3">
<label for="description" class="form-label">Description</label>
<textarea name="description" id="description" class="form-control"></textarea>
</div>
<button type="submit" class="btn btn-primary">Enregistrer</button>
</form>
</div>
@endsection
<!-- resources/views/tasks/edit.blade.php -->
@extends('layouts.app')
@section('content')
<div class="container">
<h1>Modifier Tâche</h1>
<form action="route('tasks.update', $task)" method="POST">
@csrf
@method('PUT')
<div class="mb-3">
<label for="title" class="form-label">Titre</label>
<input type="text" name="title" id="title" class="form-control" value="$task->title" required>
</div>
<div class="mb-3">
<label for="description" class="form-label">Description</label>
<textarea name="description" id="description" class="form-control">$task->description</textarea>
</div>
<button type="submit" class="btn btn-primary">Mettre à jour</button>
</form>
</div>
@endsection
Étape 6 : Configuration des routes
// routes/web.php
use App\Http\Controllers\TaskController;
Route::get('/tasks', [TaskController::class, 'index'])->name('tasks.index');
Route::get('/tasks/create', [TaskController::class, 'create'])->name('tasks.create');
Route::post('/tasks', [TaskController::class, 'store'])->name('tasks.store');
Route::get('/tasks/{task}/edit', [TaskController::class, 'edit'])->name('tasks.edit');
Route::put('/tasks/{task}', [TaskController::class, 'update'])->name('tasks.update');
Route::delete('/tasks/{task}', [TaskController::class, 'destroy'])->name('tasks.destroy');
Erreurs frequentes et debugging
1. ErrorException : Trying to get property 'id' of non-object
## ❌ Mauvais
$task = Task::find($id);
## ✅ Correct
$task = Task::where('id', $id)->first();
2. InvalidArgumentException : Expected argument of type [string], null given
## ❌ Mauvais
Route::get('/tasks/{task}', function ($task) {
return view('tasks.show', compact('task'));
});
## ✅ Correct
Route::get('/tasks/{id}', function ($id) {
$task = Task::find($id);
if (!$task) {
abort(404, 'Tâche non trouvée');
}
return view('tasks.show', compact('task'));
});
3. SQLSTATE[42S22]: Column not found: 1054 Unknown column 'id' in 'where clause'
## ❌ Mauvais
$task = Task::whereId($id)->first();
## ✅ Correct
$task = Task::find($id);
Pour aller plus loin
1. Traitement des formulaires avec Laravel Collective
2. Utilisation de Vue.js pour la gestion frontale
3. Intégration avec un service d'API RESTful
Défi pratique : Créer un simple blog
- Installer Laravel.
- Créer un modèle
Postet sa migration correspondante. - Créer un contrôleur pour les articles de blog.
- Créer des vues pour afficher, créer, modifier et supprimer des articles.
Code du contrôleur :
// app/Http/Controllers/PostController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Post;
class PostController extends Controller
{
public function index()
{
$posts = Post::all();
return view('posts.index', compact('posts'));
}
public function create()
{
return view('posts.create');
}
public function store(Request $request)
{
Post::create($request->all());
return redirect()->route('posts.index');
}
public function show(Post $post)
{
return view('posts.show', compact('post'));
}
public function edit(Post $post)
{
return view('posts.edit', compact('post'));
}
public function update(Request $request, Post $post)
{
$post->update($request->all());
return redirect()->route('posts.index');
}
public function destroy(Post $post)
{
$post->delete();
return redirect()->route('posts.index');
}
}
Code des vues :
<!-- resources/views/posts/index.blade.php -->
@extends('layouts.app')
@section('content')
<div class="container">
<h1>Articles</h1>
<a href="route('posts.create')" class="btn btn-primary mb-2">Nouvel Article</a>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Description</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach ($posts as $post)
<tr>
<td>$post->id</td>
<td>$post->title</td>
<td>$post->description</td>
<td>
<a href="route('posts.show', $post)" class="btn btn-info">Voir</a>
<a href="route('posts.edit', $post)" class="btn btn-warning">Modifier</a>
<form action="route('posts.destroy', $post)" method="POST" style="display: inline-block;">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger">Supprimer</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@endsection
<!-- resources/views/posts/create.blade.php -->
@extends('layouts.app')
@section('content')
<div class="container">
<h1>Nouvel Article</h1>
<form action="route('posts.store')" method="POST">
@csrf
<div class="mb-3">
<label for="title" class="form-label">Titre</label>
<input type="text" name="title" id="title" class="form-control" required>
</div>
<div class="mb-3">
<label for="description" class="form-label">Description</label>
<textarea name="description" id="description" class="form-control"></textarea>
</div>
<button type="submit" class="btn btn-primary">Enregistrer</button>
</form>
</div>
@endsection
<!-- resources/views/posts/edit.blade.php -->
@extends('layouts.app')
@section('content')
<div class="container">
<h1>Modifier Article</h1>
<form action="route('posts.update', $post)" method="POST">
@csrf
@method('PUT')
<div class="mb-3">
<label for="title" class="form-label">Titre</label>
<input type="text" name="title" id="title" class="form-control" value="$post->title" required>
</div>
<div class="mb-3">
<label for="description" class="form-label">Description</label>
<textarea name="description" id="description" class="form-control">$post->description</textarea>
</div>
<button type="submit" class="btn btn-primary">Mettre à jour</button>
</form>
</div>
@endsection
Code de la migration :
// database/migrations/xxxx_xx_xx_create_posts_table.php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreatePostsTable extends Migration
{
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('description')->nullable();
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('posts');
}
}
Code du modèle :
// app/Models/Post.php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
protected $fillable = ['title', 'description'];
}
En suivant ces étapes, vous devriez être en mesure de créer un simple blog avec Laravel.