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.

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

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

cd 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.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_app
DB_USERNAME=database_user_name
DB_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.

php 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.

<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Team extends Model
{
    use HasFactory;
    protected $fillable = [
        'name'
    ];
}

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().

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateTeamsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('teams', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('teams');
    }
}

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.

php 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.

php 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.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Team;
class TeamController extends Controller
{
    public function index()
    {
        return view("welcome");
    }
    public function store(Request $request)
    {
        $request->validate([
            'addMoreInput.*.name' => 'required'
        ]);
 
        foreach ($request->addMoreInput as $key => $value) {
            Team::create($value);
        }
 
        return back()->with('success', 'New Team has been added.');
    }
}

#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 .

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TeamController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
*/
Route::get('/team-form', [TeamController::class, 'index']);
Route::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.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel App</title>
    <!-- CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bo..." rel="stylesheet">
    <style>
      .container {
            max-width: 600px;
        }
    </style>
</head>
<body>
    <div class="container">
        <form action="{{ route('add-team') }}" method="POST">
            @csrf
            @if ($errors->any())
            <div class="alert alert-danger" role="alert">
                <ul>
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif
            @if (Session::has('success'))
            <div class="alert alert-success text-center">
                <p>{{ Session::get('success') }}</p>
            </div>
            @endif
            <table class="table table-bordered" id="dynamicAddRemove">
                <tr>
                    <th>Name</th>
                    <th>Action</th>
                </tr>
                <tr>
                    <td><input type="text" name="addMoreInput[0][name]" placeholder="Enter subject" class="form-control" />
                    </td>
                    <td><button type="button" name="add" id="dynamic-ar" class="btn btn-outline-primary">Add Name</button></td>
                </tr>
            </table>
            <button type="submit" class="btn btn-outline-success btn-block">Save</button>
        </form>
    </div>
</body>
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/boo..."></script>
<script type="text/javascript">
    var i = 0;
    $("#dynamic-ar").click(function () {
        ++i;
        $("#dynamicAddRemove").append('<tr><td><input type="text" name="addMoreInput[' + i +
            '][name]" placeholder="Enter name" class="form-control" /></td><td><button type="button" class="btn btn-outline-danger remove-input-field">Delete</button></td></tr>'
            );
    });
    $(document).on('click', '.remove-input-field', function () {
        $(this).parents('tr').remove();
    });
</script>
</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.

php artisan serve