Créer un formulaire dans Laravel

Créer un formulaire dans Laravel

  1. Objectifs

    • Apprendre à créer un formulaire réactif dans Laravel avec Bootstrap.
    • Etre capable d’insérer des données de formulaire dans la base de données à l’aide de laravel 8.
  2. Présentation

    • Laravel fournit diverses balises intégrées pour gérer les formulaires HTML.
    • Tous les balises du formulaire HTML sont générés à l’aide de Laravel.
    • La création de formulaires est très courante pour mettre à jour ou créer des ressources dans la base de données.
    • Dans ce tutoriel on




  3. Réalisation

    1. Créer un projet Laravel 8
      • ouvrir votre terminal et accéder au répertoire de votre serveur Web local : pour moi c’est C:\wamp64\www\laravel>
      • Exécuter la commande suivante pour installer un nouveau projet Laravel 8.
      • composer create-project laravel/laravel --prefer-dist creation-formulaire-laravel8
      • Toujours dans votre terminal, placez-vous dans le dossier du projet crée: cd creation-formulaire-laravel8
    2. Configuration de la base de données à l’aide du fichier Env
      • Établir une connexion à la base de données
        • Ajouter les détails de la base de données dans le fichier .env comme suit
        • DB_CONNECTION=mysql
          DB_HOST=localhost
          DB_PORT=3306
          DB_DATABASE=gestion-notes
          DB_USERNAME=root
          DB_PASSWORD=
      • Modifier le fichier database.php
        • 'charset' => 'utf8mb4', en 'charset' => 'utf8',
          et 'collation' => 'utf8mb4_unicode_ci', en 'collation' => 'utf8_unicode_ci',
    3. Créer un fichier de modèle et de migration pour ajouter le contenu du formulaire.
      • N’oublier pas que notre objectif est de créer un formulaire Laravel 8 et de stocker les données du formulaire dans la base de données.
      • Créer le modèle pour définir le schéma de table pour le formulaire, exécuter la commande suivante pour créer le modèle: php artisan make:model Etudiant -m
      • Ouvrir le fichier database/migrations/xxxx_xx_xx_xxxxxx_create_etudiants_table.php et ajouter les valeurs de formulaire que nous devons stocker dans la base de données.
      • Créer un formulaire dans Laravel

        public function up()
            {
                Schema::create('etudiants', function (Blueprint $table) {
                    $table->id();
                    $table->string('prenomNom');
                    $table->date('dteNaissance');
                    $table->string('email');
                    $table->string('telephone');
                    $table->text('adresse');
                    $table->timestamps();
                });
            }
      • Modifier le fichier app/Models/Etudiant.php comme suit:
      • public $fillable = ['prenomNom', 'dteNaissance', 'email', 'telephone', 'adresse'];
      • Exécuter la migration par la commande suivante: php artisan migrate
    4. Créer des routes
      • Ouvrirle fichier web.php, qui se trouve dans le répertoire routes. Ajouter ensuite les routes suivantes dans ce fichier:
      • Route::get('/form-inscription', 'App\Http\Controllers\EtudiantController@createUserForm');
        Route::post('/form-inscription', 'App\Http\Controllers\EtudiantController@UserForm');
    5. Création du contrôleur
      • Pour créer le contrôleur (Controller), exécutez la commande ci-dessous :
      • php artisan make:controller EtudiantController
      • La commande ci-dessus créera le fichier EtudiantController.php , qui se trouve dans le répertoire /app/Http/Controllers/.
      • Créer un formulaire dans Laravel

      • Alors ouvrir le fichier EtudiantController.php et ajouter-y le code suivant:
      • <?php
        
        namespace App\Http\Controllers;
        
        use Illuminate\Http\Request;
        //use App\Etudiant;
        class EtudiantController extends Controller
        {
            // Create Form
          public function createUserForm(Request $request) {
            return view('form-inscription');
          }
          // Store Form data in database
          public function UserForm(Request $request) {
        
              // Form validation
              $this->validate($request, [
                  'prenomNom' => 'required',
                  'dteNaissance'=>'required',
                  'email' => 'required|email',
                  'telephone' => 'required|regex:/^([0-9\s\-\+\(\)]*)$/|min:8',
                  'adresse' => 'required'
               ]);
        
              //  Store data in database
              'App\Models\Etudiant'::create($request->all());
              //
              return back()->with('success', 'Les données ont été enregistrées avec succès.');
          }
        }
    6. Créer un fichier Blade pour ajouter le formulaire de publication
      • Dans le dossier views créer le fichier form-inscription.blade.php
      • Créer un formulaire dans Laravel

      • Ajouter le code html suivant dans form-inscription.blade.php:
      • <!DOCTYPE html>
        <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
        
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Form Validation in Laravel</title>
            <!-- Bootstrap CSS -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
            <!-- Custom CSS -->
            <link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">
        </head>
        
        <body>
            <div class="container mt-5">
        
                <!-- Success message -->
                @if(Session::has('success'))
                <div class="alert alert-success">
                    {{Session::get('success')}}
                </div>
                @endif
        
                <form action="" method="post" action="{{ action('App\Http\Controllers\EtudiantController@createUserForm') }}">
        
                    @csrf
        
                    <div class="form-group">
                        <label>Prénom & Nom</label>
                        <input type="text" class="form-control {{ $errors->has('prenomNom') ? 'error' : '' }}" name="prenomNom" id="prenomNom">
        
                        <!-- Error -->
                        @if ($errors->has('prenomNom'))
                        <div class="error">
                            {{ $errors->first('prenomNom') }}
                        </div>
                        @endif
                    </div>
        
                    <div class="form-group">
                        <label>Date Naissance</label>
                        <input type="text" class="form-control {{ $errors->has('dteNaissance') ? 'error' : '' }}" name="dteNaissance"
                            id="dteNaissance">
        
                        @if ($errors->has('dteNaissance'))
                        <div class="error">
                            {{ $errors->first('dteNaissance') }}
                        </div>
                        @endif
                    </div>
        
                    <div class="form-group">
                        <label>Email</label>
                        <input type="email" class="form-control {{ $errors->has('email') ? 'error' : '' }}" name="email"
                            id="email">
        
                        @if ($errors->has('email'))
                        <div class="error">
                            {{ $errors->first('email') }}
                        </div>
                        @endif
                    </div>
        
                    <div class="form-group">
                        <label>Téléphone</label>
                        <input type="text" class="form-control {{ $errors->has('telephone') ? 'error' : '' }}" name="telephone"
                            id="telephone">
        
                        @if ($errors->has('telephone'))
                        <div class="error">
                            {{ $errors->first('telephone') }}
                        </div>
                        @endif
                    </div>
        
                    <div class="form-group">
                        <label>Adresse</label>
                        <textarea class="form-control {{ $errors->has('adresse') ? 'error' : '' }}" name="adresse" id="adresse"
                            rows="4"></textarea>
        
                        @if ($errors->has('adresse'))
                        <div class="error">
                            {{ $errors->first('adresse') }}
                        </div>
                        @endif
                    </div>
        
                    <input type="submit" name="send" value="Submit" class="btn btn-dark btn-block">
                </form>
            </div>
        </body>
        
        </html>
        
    7. Démarrez le serveur de développement
      • Ouvrir le terminal de votre Visual Studio Code et exécuter la commande suivante : php artisan serve
    8. Exécutez l’application Laravel sur le navigateur
      • Ouvrir votre navigateur et taper l’URL suivante : http://127.0.0.1:8000/form-inscription



Laisser un commentaire

Abonnez vous à notre chaîne YouTube gratuitement