Pourquoi Laravel avec MySQL : guide pratique ?
Laravel est un framework PHP populaire pour le développement d'applications web modernes, offrant une structure solide et des outils puissants. Il utilise les dernières technologies de la plateforme pour créer des applications robustes et sécurisées. En utilisant MySQL comme base de données, Laravel vous permet d'optimiser efficacement votre application en stockant et en récupérant des données rapidement.
Un cas d'utilisation concret est le développement d'un site e-commerce ou d'une plateforme de gestion des tâches. Les développeurs peuvent utiliser Laravel avec MySQL pour créer une interface utilisateur moderne et une base de données robuste, permettant aux utilisateurs de gérer facilement leurs tâches et de suivre leur progression.
Prerequis
- Connaissances en PHP, HTML, CSS et JavaScript
- Base de connaissances en programmation orientée objet (POO)
- Installation d'un environnement de développement local (XAMPP, WAMP ou MAMP pour Windows/Mac/Linux)
- Comptes MySQL
Concepts fondamentaux
1. Migration
Les migrations sont des fichiers PHP qui définissent les tables et leurs champs dans votre base de données. Elles permettent de gérer la structure de la base de données en version et facilitent le partage du code entre différents environnements.
Schema mental :
Migration -> Création de table
laravel
## Créer une migration pour la table "tasks"
php artisan make:migration create_tasks_table --create=tasks
## Fichier Migration généré
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');
}
2. Eloquent ORM
Eloquent est l'ORM (Object-Relational Mapping) de Laravel qui simplifie la manipulation des données de la base de données.
Schema mental :
Model -> Représentation de la table dans le code
laravel
## Créer un modèle pour la table "tasks"
php artisan make:model Task
## Fichier Model généré
class Task extends Model
{
protected $fillable = ['title', 'description', 'completed'];
}
3. Routes et Contrôleurs
Les routes définissent les URL accessibles et les actions associées à chaque URL. Les contrôleurs gèrent la logique métier de l'application.
Schema mental :
Route -> Contrôleur -> Action
laravel
## Définir une route pour afficher toutes les tâches
Route::get('/tasks', [TaskController::class, 'index']);
## Fichier Controller généré
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', ['tasks' => $tasks]);
}
}
4. Templates Vue.js et Blade
Vue.js est un framework JavaScript pour la création d'interfaces utilisateur réactives. Laravel utilise Blade comme moteur de templates, permettant l'intégration avec Vue.js.
Schema mental :
Blade Template -> Vue Component
html
<!-- resources/views/tasks/index.blade.php -->
@extends('layouts.app')
@section('content')
<div id="app">
<task-list :tasks="json_encode($tasks)"></task-list>
</div>
@endsection
<!-- public/js/app.js -->
import Vue from 'vue';
import TaskList from './components/TaskList.vue';
new Vue({
el: '#app',
components: {
TaskList
}
});
// resources/js/components/TaskList.vue
<template>
<div>
<ul>
<li v-for="task in tasks" :key="task.id">
task.title
</li>
</ul>
</div>
</template>
<script>
export default {
props: ['tasks']
}
</script>
5. Sécurité et Middleware
Laravel offre des outils de sécurité intégrés pour protéger vos applications contre les vulnérabilités courantes.
Schema mental :
Middleware -> Filtrage des requêtes
php
## Créer un middleware pour vérifier si l'utilisateur est authentifié
php artisan make:middleware CheckAuth
## Fichier Middleware généré
public function handle($request, Closure $next)
{
if (!auth()->check()) {
return redirect('/login');
}
return $next($request);
}
## Utiliser le middleware dans une route
Route::get('/tasks', [TaskController::class, 'index'])->middleware('checkAuth');
Mise en pratique : projet fil rouge
Nous allons créer un simple gestionnaire de tâches avec Laravel et MySQL. Le projet comprendra les fonctionnalités suivantes :
- Ajout d'une nouvelle tâche
- Modification d'une tâche existante
- Suppression d'une tâche
- Affichage des tâches
Étape 1 : Installer Laravel
Créez un nouveau projet Laravel en utilisant Composer.
composer create-project --prefer-dist laravel/laravel task-manager
cd task-manager
Étape 2 : Configurer la base de données
Modifiez le fichier .env pour configurer les paramètres de connexion à MySQL.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=task_manager
DB_USERNAME=root
DB_PASSWORD=
Étape 3 : Créer la migration et le modèle
Créez une migration pour la table tasks et un modèle correspondant.
php artisan make:migration create_tasks_table --create=tasks
php artisan make:model Task
Fichier Migration (database/migrations/xxxx_xx_xx_xxxxxx_create_tasks_table.php):
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');
}
Fichier Model (app/Models/Task.php):
class Task extends Model
{
protected $fillable = ['title', 'description', 'completed'];
}
Étape 4 : Créer les routes et le contrôleur
Créez une route pour afficher toutes les tâches et un contrôleur pour gérer la logique métier.
php artisan make:controller TaskController --resource
Fichier Route (routes/web.php):
Route::resource('tasks', 'TaskController');
Fichier Controller (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', ['tasks' => $tasks]);
}
public function create()
{
return view('tasks.create');
}
public function store(Request $request)
{
$task = new Task;
$task->title = $request->title;
$task->description = $request->description;
$task->save();
return redirect('/tasks');
}
public function show($id)
{
$task = Task::find($id);
return view('tasks.show', ['task' => $task]);
}
public function edit($id)
{
$task = Task::find($id);
return view('tasks.edit', ['task' => $task]);
}
public function update(Request $request, $id)
{
$task = Task::find($id);
$task->title = $request->title;
$task->description = $request->description;
$task->save();
return redirect('/tasks');
}
public function destroy($id)
{
$task = Task::find($id);
$task->delete();
return redirect('/tasks');
}
}
Étape 5 : Créer les vues
Créez les vues pour afficher, créer et modifier des tâches.
Fichier Vue (resources/views/tasks/index.blade.php):
@extends('layouts.app')
@section('content')
<div id="app">
<task-list :tasks="json_encode($tasks)"></task-list>
</div>
@endsection
Fichier Vue (resources/js/components/TaskList.vue):
<template>
<div>
<ul>
<li v-for="task in tasks" :key="task.id">
task.title
<button @click="editTask(task)">Edit</button>
<button @click="deleteTask(task)">Delete</button>
</li>
</ul>
</div>
</template>
<script>
export default {
props: ['tasks'],
methods: {
editTask(task) {
// Rediriger vers la page d'édition de la tâche
},
deleteTask(task) {
// Supprimer la tâche
}
}
}
</script>
Étape 6 : Installer et configurer Vue.js
Installez Vue.js et configurez-le dans votre projet Laravel.
npm install vue axios
Fichier Entrée (resources/js/app.js):
import Vue from 'vue';
import axios from 'axios';
new Vue({
el: '#app',
data: {
tasks: []
},
methods: {
fetchTasks() {
axios.get('/api/tasks').then(response => {
this.tasks = response.data;
});
},
createTask(task) {
axios.post('/api/tasks', task).then(response => {
this.fetchTasks();
});
},
editTask(id, task) {
axios.put(`/api/tasks/${id}`, task).then(response => {
this.fetchTasks();
});
},
deleteTask(id) {
axios.delete(`/api/tasks/${id}`).then(response => {
this.fetchTasks();
});
}
},
created() {
this.fetchTasks();
}
});
Fichier API (routes/api.php):
Route::get('/tasks', [TaskController::class, 'index']);
Route::post('/tasks', [TaskController::class, 'store']);
Route::put('/tasks/{id}', [TaskController::class, 'update']);
Route::delete('/tasks/{id}', [TaskController::class, 'destroy']);
Erreurs frequentes et debugging
1. La migration n'est pas exécutée
Message d'erreur :
[PDOException] SQLSTATE[42S02]: Base table or view not found: 1146 Table 'task_manager.tasks' doesn't exist
Code incorrect :
Schema::create('tasks', function (Blueprint $table) {
$table->id();
});
Code correct :
Schema::create('tasks', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('description')->nullable();
$table->boolean('completed')->default(false);
$table->timestamps();
});
2. La route n'est pas trouvée
Message d'erreur :
NotFoundHttpException in RouteCollection.php line 165: No query results for model [App\Models\Task].
Code incorrect :
Route::get('/tasks/{id}', function ($id) {
$task = Task::find($id);
return view('tasks.show', ['task' => $task]);
});
Code correct :
Route::get('/tasks/{id}', [TaskController::class, 'show']);
3. L'utilisateur n'est pas authentifié
Message d'erreur :
Unauthenticated.
Code incorrect :
Route::get('/tasks', function () {
$tasks = Task::all();
return view('tasks.index', ['tasks' => $tasks]);
});
Code correct :
Route::get('/tasks', [TaskController::class, 'index'])->middleware('auth');
Pour aller plus loin
API RESTful avec Laravel : Développer une API RESTful pour gérer les tâches.
Notifications Push : Ajouter des notifications push pour informer l'utilisateur lorsqu'une tâche est mise à jour ou supprimée.
Intégration avec Cloud Storage : Stocker les fichiers joints aux tâches dans un service de stockage cloud comme Amazon S3.
Défi pratique
Développer une API pour gérer des articles d'un blog. Les fonctionnalités devraient inclure :
- Création d'un nouvel article
- Lecture de tous les articles
- Lecture d'un article spécifique
- Mise à jour d'un article existant
- Suppression d'un article
Ressources :