Laravel 9 Ajouter ou supprimer plusieurs champs de saisie avec jQuery

Il s'agit d'un Tuto complet sur l'ajout et la suppression dynamique de champs de saisie Laravel ; dans ce guide complet, nous expliquerons comment ajouter ou supprimer en profondeur des champs de saisie de formulaire dans l'application Laravel à l'aide de jQuery.

Les utilisateurs interagissent avec l'application Web et l'application mobile via des formulaires Web, en particulier pour effectuer un travail spécifique. Nous créons des champs de formulaires avec des éléments d'entrée statiques pour obtenir des informations sur l'utilisateur ; néanmoins, rarement, les champs de saisie prédéfinis ne suffisent pas.

À l'aide de ce tuto, nous expliquerons étape par étape comment ajouter/supprimer dynamiquement plusieurs champs de saisie à l'aide de jquery dans une application Laravel.

#Comment ajouter et supprimer dynamiquement plusieurs champs de saisie dans laravel 9

Voici l'ensemble des étapes qui vous aideront à apprendre comment ajouter/supprimer dynamiquement plusieurs champs de saisie et les soumettre à la base de données dans Laravel à l'aide de jQuery.

• Etape 1 : Créer un projet Laravel
• Etape 2 : Ajouter les détails de la base de données dans ENV
• Etape 3 : Configuration du model et la migration
• Etape 4 : Générer et configurr le contrôleur
• Etape 5 : Créer les routes
• Etape 6 : Préparer la vue
• Etape 7 : Démarrez et testez l'application Laravel

#Créer un projet laravel

Composer est l'outil de base qui vous permet de développer une application Laravel. assurez-vous que vous avez installé Composer sur votre système. Après quoi, dirigez-vous vers le terminal, tapez la commande suivante à l'invite de commande et exécutez la commande suivante pour installer la nouvelle application Laravel.

1composer create-project --prefer-dist laravel/laravel laravel_app
1composer create-project --prefer-dist laravel/laravel laravel_app

Ensuite, entrez dans le répertoire de l'application :

1cd laravel_app
1cd laravel_app

#Ajouter les détails de la base de données dans le ENV

Afin de stocker les valeurs des champs d'entrée dans la base de données, vous devez connecter l'application laravel à la base de données. Cela peut être fait en ajoutant le nom de la base de données, le nom d'utilisateur et le mot de passe dans le fichier .env.

1DB_CONNECTION=mysql
2DB_HOST=127.0.0.1
3DB_PORT=3306
4DB_DATABASE=laravel_app
5DB_USERNAME=database_user_name
6DB_PASSWORD=database_password
1DB_CONNECTION=mysql
2DB_HOST=127.0.0.1
3DB_PORT=3306
4DB_DATABASE=laravel_app
5DB_USERNAME=database_user_name
6DB_PASSWORD=database_password

#Configurer le model et la migration

Cette étape explique comment créer des fichiers de modèle et de migration, stocker la valeur des champs d'entrée dynamiques dans la base de données et, par conséquent, exécuter la commande pour créer des fichiers de migration team.

1php artisan make:model Team -m
1php artisan make:model Team -m

Dans cette étape, vous devez enregistrer la propriété name dans le tableau remplissable dans le fichier app/Models/Team.php.

 1<?php
 2namespace App\Models;
 3use Illuminate\Database\Eloquent\Factories\HasFactory;
 4use Illuminate\Database\Eloquent\Model;
 5class Team extends Model
 6{
 7    use HasFactory;
 8    protected $fillable = [
 9        'name'
10    ];
11}
 1<?php
 2namespace App\Models;
 3use Illuminate\Database\Eloquent\Factories\HasFactory;
 4use Illuminate\Database\Eloquent\Model;
 5class Team extends Model
 6{
 7    use HasFactory;
 8    protected $fillable = [
 9        'name'
10    ];
11}

Dans la prochaine instruction, vous comprendrez comment enregistrer une nouvelle propriété dans le fichier de migration, ouvrez le fichier database/migrations/create_teams_table.php et mettre à jour la nouvelle valeur dans la méthode up().

 1<?php
 2use Illuminate\Database\Migrations\Migration;
 3use Illuminate\Database\Schema\Blueprint;
 4use Illuminate\Support\Facades\Schema;
 5class CreateTeamsTable extends Migration
 6{
 7    /**
 8     * Run the migrations.
 9     *
10     * @return void
11     */
12    public function up()
13    {
14        Schema::create('teams', function (Blueprint $table) {
15            $table->id();
16            $table->string('name');
17            $table->timestamps();
18        });
19    }
20    /**
21     * Reverse the migrations.
22     *
23     * @return void
24     */
25    public function down()
26    {
27        Schema::dropIfExists('teams');
28    }
29}
 1<?php
 2use Illuminate\Database\Migrations\Migration;
 3use Illuminate\Database\Schema\Blueprint;
 4use Illuminate\Support\Facades\Schema;
 5class CreateTeamsTable extends Migration
 6{
 7    /**
 8     * Run the migrations.
 9     *
10     * @return void
11     */
12    public function up()
13    {
14        Schema::create('teams', function (Blueprint $table) {
15            $table->id();
16            $table->string('name');
17            $table->timestamps();
18        });
19    }
20    /**
21     * Reverse the migrations.
22     *
23     * @return void
24     */
25    public function down()
26    {
27        Schema::dropIfExists('teams');
28    }
29}

Nous sommes tous prêts à migrer la nouvelle table dans la base de données, exécutez simplement la commande et assurez-vous de vérifier votre base de données après cela.

1php artisan migrate
1php artisan migrate

#Générer et configurer le controller

Cette étape consiste à générer un nouveau controller laravel et à préparer le controller avec la logique PHP pour créer des champs de formulaire dynamiques à l'aide de jQuery.

1php artisan make:controller TeamController
1php artisan make:controller TeamController

Après avoir exécuté la commande ci-dessus, un nouveau fichier de contrôleur s'est manifesté, vous devez maintenant ajouter le code suivant dans app\Http\Controllers\TeamController.php ce fichier, puis enregistrer le fichier.

 1<?php
 2namespace App\Http\Controllers;
 3use Illuminate\Http\Request;
 4use App\Models\Team;
 5class TeamController extends Controller
 6{
 7    public function index()
 8    {
 9        return view("welcome");
10    }
11    public function store(Request $request)
12    {
13        $request->validate([
14            'addMoreInput.*.name' => 'required'
15        ]);
16 
17        foreach ($request->addMoreInput as $key => $value) {
18            Team::create($value);
19        }
20 
21        return back()->with('success', 'New Team has been added.');
22    }
23}
 1<?php
 2namespace App\Http\Controllers;
 3use Illuminate\Http\Request;
 4use App\Models\Team;
 5class TeamController extends Controller
 6{
 7    public function index()
 8    {
 9        return view("welcome");
10    }
11    public function store(Request $request)
12    {
13        $request->validate([
14            'addMoreInput.*.name' => 'required'
15        ]);
16 
17        foreach ($request->addMoreInput as $key => $value) {
18            Team::create($value);
19        }
20 
21        return back()->with('success', 'New Team has been added.');
22    }
23}

#Créer les routes

Ajoutez le controller TeamController, puis créez des méthodes GET et POST à ​​l'aide du controller pour afficher le formulaire team et ajouter et supprimer des champs de saisie. Vous devez ouvrir et mettre à jour le code suivant dans le fichier routes/web.php .

 1<?php
 2use Illuminate\Support\Facades\Route;
 3use App\Http\Controllers\TeamController;
 4/*
 5|--------------------------------------------------------------------------
 6| Web Routes
 7|--------------------------------------------------------------------------
 8*/
 9Route::get('/team-form', [TeamController::class, 'index']);
10Route::post('/team-add', [TeamController::class, 'store'])->name('add-team');
 1<?php
 2use Illuminate\Support\Facades\Route;
 3use App\Http\Controllers\TeamController;
 4/*
 5|--------------------------------------------------------------------------
 6| Web Routes
 7|--------------------------------------------------------------------------
 8*/
 9Route::get('/team-form', [TeamController::class, 'index']);
10Route::post('/team-add', [TeamController::class, 'store'])->name('add-team');

#Préparer la vue

Dans cette dernière étape, nous devons créer le formulaire de base ; nous utiliserons Bootstrap 5 et jQuery pour créer le formulaire qui permet la création dynamique de plusieurs champs de saisie.

Par conséquent, ouvrez le fichier resources/views/welcome.blade.php et ajoutez le code suivant dans le fichier.

 1<!DOCTYPE html>
 2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 3<head>
 4    <meta charset="utf-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1">
 6    <title>Laravel App</title>
 7    <!-- CSS -->
 8    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bo...; rel="stylesheet">
 9    <style>
10      .container {
11            max-width: 600px;
12        }
13    </style>
14</head>
15<body>
16    <div class="container">
17        <form action="{{ route('add-team') }}" method="POST">
18            @csrf
19            @if ($errors->any())
20            <div class="alert alert-danger" role="alert">
21                <ul>
22                    @foreach ($errors->all() as $error)
23                    <li>{{ $error }}</li>
24                    @endforeach
25                </ul>
26            </div>
27            @endif
28            @if (Session::has('success'))
29            <div class="alert alert-success text-center">
30                <p>{{ Session::get('success') }}</p>
31            </div>
32            @endif
33            <table class="table table-bordered" id="dynamicAddRemove">
34                <tr>
35                    <th>Name</th>
36                    <th>Action</th>
37                </tr>
38                <tr>
39                    <td><input type="text" name="addMoreInput[0][name]" placeholder="Enter subject" class="form-control" />
40                    </td>
41                    <td><button type="button" name="add" id="dynamic-ar" class="btn btn-outline-primary">Add Name</button></td>
42                </tr>
43            </table>
44            <button type="submit" class="btn btn-outline-success btn-block">Save</button>
45        </form>
46    </div>
47</body>
48<!-- JavaScript -->
49<script src="https://code.jquery.com/jquery-3.5.1.min.js";></script>
50<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/boo...;></script>
51<script type="text/javascript">
52    var i = 0;
53    $("#dynamic-ar").click(function () {
54        ++i;
55        $("#dynamicAddRemove").append('<tr><td><input type="text" name="addMoreInput[' + i +
56            '][name]" placeholder="Enter name" class="form-control" /></td><td><button type="button" class="btn btn-outline-danger remove-input-field">Delete</button></td></tr>'
57            );
58    });
59    $(document).on('click', '.remove-input-field', function () {
60        $(this).parents('tr').remove();
61    });
62</script>
63</html>
 1<!DOCTYPE html>
 2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 3<head>
 4    <meta charset="utf-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1">
 6    <title>Laravel App</title>
 7    <!-- CSS -->
 8    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bo..." rel="stylesheet">
 9    <style>
10      .container {
11            max-width: 600px;
12        }
13    </style>
14</head>
15<body>
16    <div class="container">
17        <form action="{{ route('add-team') }}" method="POST">
18            @csrf
19            @if ($errors->any())
20            <div class="alert alert-danger" role="alert">
21                <ul>
22                    @foreach ($errors->all() as $error)
23                    <li>{{ $error }}</li>
24                    @endforeach
25                </ul>
26            </div>
27            @endif
28            @if (Session::has('success'))
29            <div class="alert alert-success text-center">
30                <p>{{ Session::get('success') }}</p>
31            </div>
32            @endif
33            <table class="table table-bordered" id="dynamicAddRemove">
34                <tr>
35                    <th>Name</th>
36                    <th>Action</th>
37                </tr>
38                <tr>
39                    <td><input type="text" name="addMoreInput[0][name]" placeholder="Enter subject" class="form-control" />
40                    </td>
41                    <td><button type="button" name="add" id="dynamic-ar" class="btn btn-outline-primary">Add Name</button></td>
42                </tr>
43            </table>
44            <button type="submit" class="btn btn-outline-success btn-block">Save</button>
45        </form>
46    </div>
47</body>
48<!-- JavaScript -->
49<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
50<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/boo..."></script>
51<script type="text/javascript">
52    var i = 0;
53    $("#dynamic-ar").click(function () {
54        ++i;
55        $("#dynamicAddRemove").append('<tr><td><input type="text" name="addMoreInput[' + i +
56            '][name]" placeholder="Enter name" class="form-control" /></td><td><button type="button" class="btn btn-outline-danger remove-input-field">Delete</button></td></tr>'
57            );
58    });
59    $(document).on('click', '.remove-input-field', function () {
60        $(this).parents('tr').remove();
61    });
62</script>
63</html>

#Démarrer et tester l'application Laravel

Tout d'abord, vous devez démarrer le serveur de développement Laravel pour ajouter ou supprimer dynamiquement plusieurs champs d'entrée. Ouvrez le terminal et exécutez la commande suivante.

1php artisan serve
1php artisan serve