Créer un formulaire de connexion efficace avec Laravel peut être un défi pour de nombreux développeurs.
Sans une implémentation correcte, vous risquez des failles de sécurité et des problèmes d’authentification frustrants pour les utilisateurs.
Cet article vous guide à travers chaque étape de la création d’un formulaire de connexion fonctionnel avec Laravel, en assurant à la fois sécurité et convivialité.
Initiez-vous à Laravel et réalisez votre première application en toute confiance.
Dans cette section, vous allez apprendre à créer un formulaire de connexion fonctionnel avec Laravel. Ensemble, nous allons aborder chaque étape, de la création du contrôleur à la gestion du formulaire, en passant par l’affichage de la page dédiée à la connexion.
Alors, c’est parti pour réaliser le formulaire de connexion !
Configurer LoginController Laravel
Pour commencer, vous allez créer un contrôleur qui s’occupera de la logique liée à la connexion. Ce contrôleur permettra :
- D’afficher la page de connexion,
- De traiter les informations saisies par l’utilisateur lorsqu’il soumet le formulaire.
Voici à quoi peut ressembler votre contrôleur :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class LoginController extends Controller
{
//
public function index()
{
$data = [
'title' => 'Inscription -'.config('app.name'),
'description' => 'Inscription sur le site -'.config('app.name'),
];
return view('auth.login', $data);
}
public function login()
{
return 'je suis connecté';
}
}
Voici des détails d’explications :
- Méthode index :Cette méthode est utilisée pour afficher la page de connexion. Vous pouvez y inclure des données dynamiques, comme le titre ou la description de la page.
- Méthode login :Elle est déclenchée lorsque l’utilisateur soumet le formulaire. Pour l’instant, elle retourne un message simple indiquant que la connexion est réussie.
Avec ce contrôleur, vous avez la base pour gérer la connexion des utilisateurs.
Créer vue login.blade.php Laravel
Passons maintenant à la création de la vue qui affichera le formulaire de connexion. Vous allez concevoir une interface utilisateur claire et intuitive pour permettre à vos utilisateurs de se connecter facilement.
Voici le code de votre fichier login.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 mt-4">
<div class="card-body">
<h2 id="laravel-cest-top" class="rb-heading-index-3 card-title"><a href="" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Laravel c'est top !</a></h2>
{{-- <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente dicta fugit fugiat hic aliquam itaque facere, soluta. Totam id dolores, sint aperiam sequi pariatur praesentium animi perspiciatis molestias iure, ducimus!</p> --}}
<span class="auhtor">Par <a href="" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Hamid</a></span> <br>
<span class="time">Il y'a 1 heure</span>
</div>
</div>
<!-- /.card -->
<div class="card card-outline-secondary my-4">
<div class="card-header">
Connexion
</div>
<form action="{{route('post.login')}}" method="post">
@csrf
<div class="card-body">
<div class="mb-3 row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" id="staticEmail" >
@error('email')
<div class="error">{{$message}}</div>
@enderror
</div>
</div>
<div class="mb-3 row">
<label for="inputPassword" class="col-sm-2 col-form-label">Mot de passe</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password" id="inputPassword">
@error('password')
<div class="error">{{$message}}</div>
@enderror
</div>
</div>
<div class="mb-3 row">
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="remember" name="remember">
<label class="form-check-label" for="flexCheckDefault">
Se souvenir de moi
</label>
</div>
</div>
</div>
<button class="btn btn-primary">Connexion </button>
</div>
</form>
</div>
<!-- /.card -->
</div>
<!-- /.col-lg-9 -->
</div>
@stop
Voici des détails d’explications du formulaire :
Champs de saisie :
- Un champ pour l’adresse email de l’utilisateur.
- Un champ pour le mot de passe.
Case à cocher : Une option permettant à l’utilisateur de rester connecté en cochant « Se souvenir de moi ».
Bouton : Le bouton « Connexion » pour soumettre le formulaire.
Gestion des erreurs : Les erreurs liées à la validation des champs sont affichées sous chaque champ concerné.
Définir routes formulaire Laravel
Les routes permettent de relier les URL à vos méthodes dans le contrôleur. Voici comment vous allez les définir :
Route::get('login', 'LoginController@index')->name('login');
Route::post('login', 'LoginController@login')->name('post.login');
Voici des détails d’explications :
- Route GET :Elle sert à afficher le formulaire de connexion.
- Route POST :Elle est utilisée pour traiter les données du formulaire après leur soumission.
Tester formulaire connexion Laravel
Une fois que tout est en place, vous pouvez tester le fonctionnement de votre formulaire en suivant ces étapes :
- Lancez votre serveur avec la commande php artisan serve.
- Rendez-vous à l’URL correspondant à la route /login (par exemple, http ://127.0.0.1:8000/login).
- Vérifiez que la page s’affiche correctement avec le formulaire.
Voici l’affichage de page de connexion
Avec ces étapes, vous avez tout ce qu’il vous faut pour gérer efficacement un formulaire de connexion. Vous pouvez maintenant continuer à personnaliser votre logique de connexion ou intégrer des fonctionnalités supplémentaires, comme l’authentification avec un système de tokens ou une redirection vers une page spécifique après la connexion.
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 contrôleur de connexion dans Laravel?
Comment concevoir la vue pour le formulaire de connexion?
Comment définir les routes pour gérer la connexion?
Comment tester le formulaire de connexion Laravel?
Quelles sont les étapes pour personnaliser le formulaire de connexion?
Conclusion
En maîtrisant la création d’un formulaire de connexion avec Laravel, vous améliorez l’expérience utilisateur de votre application. Quelles fonctionnalités supplémentaires aimeriez-vous explorer pour enrichir ce processus d’authentification Laravel?
