Form Array Dinamis dengan Laravel dan jQuery
29 July 2020 | Tags: Form array dinamis dengan Laravel, Form array dinamis dengan Laravel dan Jquery
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.
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 tentang Form Array Dinamis dengan Laravel dan jQuery
ggw