Mettre à jour un article dans une application Laravel peut sembler complexe.
Sans une bonne gestion des permissions et des méthodes HTTP, des erreurs peuvent survenir, compromettant la sécurité de l’application.
Cet article vous guide à travers la création d’un formulaire de mise à jour sécurisé en utilisant la méthode PUT dans Laravel tout en vérifiant les permissions utilisateur.
Initiez-vous à Laravel et réalisez votre première application en toute confiance.
Dans cette section, vous allez apprendre à créer un formulaire permettant de mettre à jour un article dans votre application, ainsi qu’à implémenter la méthode PUT dans votre contrôleur. Nous allons aborder les différentes étapes à suivre, y compris la validation, le formulaire, la vue, et la gestion des permissions pour l’édition.
Editer article avec PUT dans Laravel
Dans le contrôleur ArticleController, vous devez créer une méthode edit qui permet de récupérer un article existant et de le pré-remplir dans un formulaire pour qu’il puisse être modifié. Voici comment procéder.
Voici le code de la méthode edit
public function edit(Article $article)
{
abort_if(auth()->id() != $article->user_id, 403);
$data = [
'title' => $description = 'Mise à jour de ' . $article->title,
'description' => $description,
'article' => $article,
'categories'=>Category::get(),
];
return view('article.edit', $data);
}
Explication
- Vérification des permissions :Nous utilisons abort_if(auth()->id() != $article->user_id, 403) pour vérifier que l’utilisateur authentifié est bien le propriétaire de l’article. Si ce n’est pas le cas, un message d’accès interdit est affiché (code 403).
Données à passer à la vue :
- Le titre et la description de la page sont définis.
- L’article à éditer est récupéré et envoyé à la vue pour afficher les informations actuelles.
- Les catégories disponibles sont également envoyées pour permettre à l’utilisateur de choisir une nouvelle catégorie.
Formulaire édition article Laravel
Une fois que vous avez préparé les données dans le contrôleur, vous devez maintenant créer le formulaire dans la vue article.edit. Ce formulaire permettra à l’utilisateur de modifier le titre, le contenu et la catégorie de l’article.
Voici le code de page edit.blade.php
@extends('layouts.main')
@section('content')
<div class="row">
<div class="col-lg-3">
@include('includes/sidebar')
</div>
<!-- /.col-lg-3 -->
<div class="col-lg-9">
@if(session('success'))
<div class="alert alert-success">{{ session('success') }}</div>
@endif
<div class="card card-outline-secondary my-4">
<div class="card-header">
Modifier {{ $article->title }}
</div>
<div class="card-body">
<form action="{{ route('articles.update', ['article' => $article->slug]) }}" method="post">
@method('PUT')
@csrf
<div class="form-group">
<label for="title">Titre</label>
<input type="text" name="title" class="form-control" value="{{ old('title', $article->title) }}">
@error('title')
<div class="error">{{ $message }}</div>
@enderror
</div>
<div class="form-group">
<label for="content">Contenu</label>
<textarea class="form-control" name="content" cols="30" rows="5" placeholder="Contenu de l'article">{{ old('content', $article->content) }}</textarea>
@error('content')
<div class="error">{{ $message }}</div>
@enderror
</div>
<div class="form-group">
<label for="category">Catégorie</label>
<select name="categorie" class="form-control">
<option value=""></option>
@foreach($categories as $category)
<option value="{{ $category->id }}"
@if(old('category', $article->category_id ?? '') == $category->id) selected @endif>
{{ $category->name }}
</option>
@endforeach
</select>
@error('category')
<div class="error">{{ $message }}</div>
@enderror
</div>
<button type="submit" class="btn btn-primary">Ajouter</button>
</form>
</div>
</div>
</div>
<!-- /.col-lg-9 -->
</div>
@stop
Explication
Action du formulaire : Le formulaire envoie une requête POST vers la route articles.update, mais la méthode @method(‘PUT’) permet de simuler une requête PUT pour la mise à jour.
Champs du formulaire :
- Titre :Le champ title est pré-rempli avec la valeur actuelle de l’article grâce à old(‘title’, $article->title).
- Contenu :Un champ textarea permet à l’utilisateur de modifier le contenu de l’article.
- Catégorie :Un champ select est utilisé pour permettre à l’utilisateur de choisir la catégorie de l’article parmi celles disponibles.
Validation et erreurs : En cas d’erreur de validation, un message d’erreur s’affiche sous le champ concerné grâce à @error.
Bouton modifier : permissions et affichage
Sur la page d’index des articles, vous devez afficher un bouton Modifier uniquement si l’utilisateur authentifié est le propriétaire de l’article. Voici comment ajouter cette fonctionnalité.
Voilà le code à ajouter dans la vue d’index :
@if(Auth::check() && Auth::user()->id == $article->user_id)
<div class="author mt-4">
<a href="{{ route('articles.edit', ['article' =" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer"> $article->slug]) }}" class="btn btn-info">Modifier</a>
</div>
@endif
Explication
- Ce bloc de code vérifie si l’utilisateur est authentifié (Auth ::check()) et si l’ID de l’utilisateur connecté correspond à l’ID du propriétaire de l’article (Auth::user()->id == $article->user_id).
- Si ces conditions sont remplies, le bouton Modifier apparaît, permettant au propriétaire de l’article de le modifier.
Après avoir lancé le serveur, voici l’affichage de la page d’index des articles. Cette page liste tous les articles disponibles, accompagnés des options permettant de les modifier ou de les supprimer si vous êtes l’auteur de l’article
Problème : Si l’utilisateur tente de modifier un article qui ne lui appartient pas, une erreur de permission peut survenir.
Solution : Utilisez abort_if() dans la méthode edit pour vérifier les permissions de l’utilisateur et afficher un message d’erreur si nécessaire
Pour tester le bon fonctionnement, cliquez sur le bouton Modifier situé sous l’article, comme indiqué ci-dessous.
Cela ouvrira la page de modification, dont voici l’affichage.
En suivant ces étapes, vous avez créé un formulaire de mise à jour d’article dans Laravel, en utilisant la méthode PUT pour effectuer des mises à jour sécurisées. Vous avez également ajouté une logique de vérification des permissions pour permettre uniquement aux propriétaires des articles de les modifier. N’oubliez pas de tester soigneusement chaque fonctionnalité, y compris la gestion des erreurs et la validation des données.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment créer un formulaire de mise à jour dans Laravel ?
Pourquoi utiliser la méthode PUT pour les mises à jour dans Laravel ?
Comment vérifier les permissions d'un utilisateur dans Laravel ?
Comment gérer les erreurs de validation dans un formulaire Laravel ?
Comment afficher un bouton de modification conditionnellement ?
Conclusion
En suivant ces étapes, vous pouvez facilement mettre à jour des articles dans Laravel tout en assurant la sécurité et la validation des données. Quels autres aspects de Laravel aimeriez-vous explorer ?
