Form Array Dinamis dengan Laravel dan jQuery

29 July 2020 | Tags: ,


Mungkin pada kasus tertentu kita memerlukan form untuk memasukkan data lebih dari 1 record sekaligus. Hal ini bertujuan untuk lebih efesien dan cepat dalam melakukan inputasi data. Untuk menangani ini kita bisa menggunakan form input array dinamis. Bagaimana caranya? Ok, pada artikel ini kita akan membahas proses pembuatan dan penanganan form array dinamis dengan Laravel dan jQuery.

Penanganan Form Array Dinamis dengan jQuery dan Laravel

Untuk membuat form input array dinamis kita menggunakan jQuery. Dengan form dinamis ini, anda bisa memasukkan sejumlah record sesuai yang diperlukan. Sementara untuk proses penyimpanan data ke database dilakukan oleh Laravel.

Langkah-langkah Penanganan Form Array Dinamis dengan Laravel dan jQuery

1. Konfigurasi file .env

Langkah awal yang harus anda lakukan adalah menyiapkan koneksi ke database yang bisa anda lakukan di file .env. Sesuaikan konfigurasinya dengan MySql anda.

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=NAMA_DATABASE
DB_USERNAME=NAMA_USER
DB_PASSWORD=PASSWORD_USER

2. Buat TABLE tbl_bahasa_pemrograman

Selanjutnya kita membuat sebuah table dengan nama tbl_bahasa_pemrograman untuk menyimpan data yang dimasukkan. Anda bisa membuat table dengan menggunakan fasilitas migration atau dengan perintah sql dibawah ini:

CREATE TABLE tbl_bahasa_pemrograman( 
          id INT(10) PRIMARY KEY auto_increment, 
          nama_bahasa varchar(255)
);

3. Buat view Form Dinamis

Seperti pembahasan di awal, kita memanfaatkan jQuery untuk pembuatan form dinamis-nya. Form dinamis ini sedikit saya modifikasi dari tutorial CODEXWORLD.COM. File ini kita simpan pada subfolder dinamis.
resource/views/dinamis/form.blade.php

<html>
<head>
    <title>Contoh Form Dinamis</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Penanganan Form Array Dinamis dengan jQuery dan Laravel</h2>
<hr />
<p>Nama bahasa pemrograman yang anda ketahui?</p>
<form action="/dinamis/proses" method="post">
{{ csrf_field() }}
<div class="field_wrapper">
<div class="form-group">
    <div class="row">
    <div class="col-md-10">
            <input class="form-control" placeholder="Bahasa Pemrograman" type="text" name="nama_bahasa[]" value=""/>
    </div>
    <div class="col-md-2">
            <a class="btn btn-success" href="javascript:void(0);" id="add_button" title="Add field">TAMBAH</a>
    </div>           
    </div>
    </div>
</div>
<button class="btn btn-lg btn-primary" type="submit">SIMPAN</a>
<script type="text/javascript">
$(document).ready(function(){
    var maxField = 10; //Input fields increment limitation
    var addButton = $('#add_button'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper
    var fieldHTML = '<div class="form-group add"><div class="row">';
    fieldHTML=fieldHTML + '<div class="col-md-10"><input class="form-control" placeholder="Bahasa Pemrograman" type="text" name="nama_bahasa[]" /></div>';
    fieldHTML=fieldHTML + '<div class="col-md-2"><a href="javascript:void(0);" class="remove_button btn btn-danger">HAPUS</a></div>';
    fieldHTML=fieldHTML + '</div></div>'; 
    var x = 1; //Initial field counter is 1
    
    //Once add button is clicked
    $(addButton).click(function(){
        //Check maximum number of input fields
        if(x < maxField){ 
            x++; //Increment field counter
            $(wrapper).append(fieldHTML); //Add field html
        }
    });
    
    //Once remove button is clicked
    $(wrapper).on('click', '.remove_button', function(e){
        e.preventDefault();
        $(this).parent('').parent('').remove(); //Remove field html
        x--; //Decrement field counter
    });
});
</script>
</div>
</body>
</form>
</html>

Pertama kali ditampilkan, hanya tersedia sebuah text input dengan nama nama_bahasa[]. Jika ingin menambah text input, anda tinggal meng-klik tombol tambah. Anda bisa menentukan jumlah maksimal text input dengan mengubah nilai variable maxField.

4. Buat view Menampilkan data.

View ini berfungsi untuk menampilkan data dari TABLE tbl_bahasa_pemrograman. File ini kita simpan pada subfolder dinamis.
resource/views/dinamis/index.blade.php

<html>
<head>
    <title>Daftar Bahasa Pemrograman</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Daftar Bahasa Pemrograman</h2>
<hr />
<a class="btn btn-lg btn-success" href="/dinamis/form">Input Data</a> <br /><br />
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nama Bahasa Pemorgraman</th>
    </tr>
  </thead>
  <tbody>
  @php
  $i=1;
  @endphp
    @foreach($bahasa as $data)
    <tr>
      <th scope="row">{{$i++}}</th>
      <td>{{$data->nama_bahasa}}</td>
    </tr>
    @endforeach 
  </tbody>
</table>
</div>
</body>
</html>

5. Buat Model BahasaModel.php

Untuk operasi ke TABLE tbl_bahasa_pemrograman kita akan menggunakan metode Eloquent sehingga memerlukan Model, dan kita beri nama BahasaModel.php.
app/BahasaModel.php

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class BahasaModel extends Model
{
    protected $table="tbl_bahasa_pemrograman";
    public $timestamps = false;
}

6. Buat Controller BahasaController.php

Controller ini untuk mengatur tampilan dan menghubungkan ke Model. Terdiri dari tiga method yaitu:

  • index: untuk menampilkan data
  • form: untuk menampilkan form dinamsi
  • proses: untuk melakukan proses form array dinamis dan menyimpan ke database.

app/Http/BahasaController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\BahasaModel;
class BahasaController extends Controller
{
    public function index()
        {
            $bahasa=BahasaModel::all();
            return view('dinamis/index',['bahasa'=>$bahasa]);
        }
    public function form()
        {
            return view('dinamis/form');
        }
    public function proses(Request $request)
        {
            foreach($request->nama_bahasa as $key => $value)
                {
                    $bahasa = new BahasaModel;    
                    $bahasa->nama_bahasa =$value;
                    $bahasa->save();
                }
            return redirect("/dinamis");    
        }    
}

Untuk mengambil semua record dari table kita menggunakan perintah:
$bahasa=BahasaModel::all();

Jika pada text input tunggal biasanya kita menggunakan perintah:

$nama=$request->nama_bahasa;

Maa pada text input array bisa anda tangani dengan perintah:

$nama1=$request->nama_bahasa[0];
$nama2=$request->nama_bahasa[1];
.....
dan seterusnya

Atau bisa dengan proses perulangan

foreach($request->nama_bahasa as $key => $value)
    {
       //perintah
    }

Pada pernitah diatas variabel $key berisi index text input array , sedangkan $value menyimpan nilai yang dimasukkan pada text input array.

7. Tambah Route

Langkah terakhir adalah menambahkan Route pada file:
app/routes/web.php

Route::get('dinamis', 'BahasaController@index');
Route::get('dinamis/form', 'BahasaController@form');
Route::post('dinamis/proses', 'BahasaController@proses');

Sekarang jalankan local server anda dengan mengetikkan perintah pada terminal:
php artisan server.

Karena tutorial ini menggunakan Content Delivery Network (CDN) Bootstrap dan Jquery, pastikan pada saat menjalankan sudah terhubung koneksi internet.

Buka browser anda dan ketikkan URL:
http://localhost:8000/dinamis/form

Nah demikian kali ini tutorial untuk pembuatan dan penanganan Form Array Dinamis dengan Laravel dan jQuery.

Semoga bermanfaat.

Download Form Array Dinamis dengan Laravel dan jQuery

Klik tombol Facebook / Twitter / Google + untuk Download


Komentar via Facebook tentang Form Array Dinamis dengan Laravel dan jQuery

Komentar tentang Form Array Dinamis dengan Laravel dan jQuery

Silahkan tulis saran, komentar dan pertanyaan dibawah!

Your email address will not be published. Required fields are marked *