[Laravel] Membuat Dropdown Dependency dengan Ajax Pada Contoh Pemilihan Nama Daerah
Belum seminggu saya kenal dengan framework ini, entah kenapa saya mulai luluh dan suka. Entah karena rasa penasaran atau mungkin kebosenan pada framework lain. Ah ya sudahlah. Pada kesempatan ini, saya akan sedikit memberikan contoh penggunaan Dropdown Dependency dengan Ajax jQuery pada laravel. Nah loh, apa itu Dropdown Dependency ? "Mungkin" Dropdown Dependency merupakan cara atau kelakuan dropdown atau combobox dimana jika kita memilih suatu pilihan pada combobox pertama, maka otomatis combobox berikutnya akan mengikuti hasil dari pilihan pertama tai, sebaga contoh, Jika pada dropdown pertama itu pilihan indonesia, dan malaysia. maka jika kita pilih indonesia otomatis pada combobox kedua akan mengikuti hasil pilihan tersebut, yaitu nama propinsi-propinsi yang ada di indonesia, dan jika kita pilih propinsi maka otomatis pada combobox berikutnya lagi akan berisi nama kota atau kabupaten yang berada pada propinsi yang kita pilih, dan begitu seterusnya.
Ok persiapkan project laravel anda, dan atur database dengan table terserah anda. Saya disini menggunakan database 'test'. setelah itu buka command line yang telah di set pada folder project laravel anda. kemudian buat Migrate seperti berikut
php artisan migrate:make create_table_propinsiKemudian buka folder app/database/migrations dan buka file yang belakangnya ada nama create_table_propinsi dan edit seperti berikut
<?php use Illuminate\Database\Migrations\Migration; class CreateTablePropinsi extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('propinsi', function(Illuminate\Database\Schema\Blueprint $table) { $table->increments('id'); $table->string('propinsi', 50); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::drop('propinsi'); } }
Selanjutnya ulangi langkah diatas tadi tetapi dengan nama file berbeda, yaitu create_table_kota dan edit lagi
<?php use Illuminate\Database\Migrations\Migration; class CreateTableKota extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('kota', function(Illuminate\Database\Schema\Blueprint $table){ $table->increments('id'); $table->string('kota', 100); $table->unsignedInteger('propinsi_id'); $table->foreign('propinsi_id') ->references('id')->on('propinsi') ->onDelete('cascade'); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::drop('kota'); } }
ulangi lagi langkah diatas dengan nama file create_table_kecamatan
<?php use Illuminate\Database\Migrations\Migration; class CreateTableKecamatan extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('kecamatan', function(Illuminate\Database\Schema\Blueprint $table){ $table->increments('id'); $table->string('kecamatan', 100); $table->unsignedInteger('kota_id'); $table->foreign('kota_id') ->references('id')->on('kota') ->onDelete('cascade'); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::drop('kecamatan'); } }
ulangi lagu dengan nama create_table_desa
<?php use Illuminate\Database\Migrations\Migration; class CreateTableDesa extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('desa', function(Illuminate\Database\Schema\Blueprint $table){ $table->increments('id'); $table->string('desa', 100); $table->unsignedInteger('kecamatan_id'); $table->foreign('kecamatan_id') ->references('id')->on('kecamatan') ->onDelete('cascade'); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::drop('desa'); } }
Jika sudah, pada command line ketik
php artisan migrateLihat database anda, maka otomatis akan berisi table-table sesuai isi migrate di atas. Selanjutnya buka folder app/database/seeds dan buat file dengan nama AllSeeder.php dan isi seperti berikut
<?php class AllSeeder extends Seeder { /** * Run the database seeds. * * @return void */ public function run() { // TABLE PROPINSI DB::table('propinsi')->insert(array( array('propinsi' => 'Banten') )); // TABLE KOTA DB::table('kota')->insert(array( array('kota' => 'Pandeglang', 'propinsi_id' => 1), array('kota' => 'Serang', 'propinsi_id' => 1), )); // TABLE KECAMATAN DB::table('kecamatan')->insert(array( array('kecamatan' => 'Picung', 'kota_id' => 1), array('kecamatan' => 'Munjul', 'kota_id' => 1), array('kecamatan' => 'Cikeusal', 'kota_id' => 2), array('kecamatan' => 'Curug', 'kota_id' => 2) )); // TABLE DESA DB::table('desa')->insert(array( array('desa' => 'Cililitan', 'kecamatan_id' => 1), array('desa' => 'Kadupandak', 'kecamatan_id' => 1), array('desa' => 'Ciodeng', 'kecamatan_id' => 2), array('desa' => 'Pasir Tenjo', 'kecamatan_id' => 2), array('desa' => 'Dahu', 'kecamatan_id' => 3), array('desa' => 'Katulisan', 'kecamatan_id' => 3), array('desa' => 'Tinggar', 'kecamatan_id' => 4), array('desa' => 'Cipete', 'kecamatan_id' => 4), )); } }
Buka file DatabaseSeeder.php yang juga terdapat pada folder seeds tersebut dan edit seperti berikut
<?php class DatabaseSeeder extends Seeder { /** * Run the database seeds. * * @return void */ public function run() { Eloquent::unguard(); $this->call('AllSeeder'); } }
Pada command line ketik seperti berikut
php artisan db:seedPembuatan database dan table selesai, selanjutnya buat Controller dengan nama SiteController.php dan isi seperti berikut.
<?php class SiteController extends \BaseController { public function getIndex() { $propinsi = array('' => ''); foreach(Propinsi::all() as $row) $propinsi[$row->id] = $row->propinsi; return View::make('index', array( 'propinsi' => $propinsi )); } public function postData() { switch(Input::get('type')): case 'kota': $return = '<option value=""></option>'; foreach(Kota::where('propinsi_id', Input::get('id'))->get() as $row) $return .= "<option value='$row->id'>$row->kota</option>"; return $return; break; case 'kecamatan': $return = '<option value=""></option>'; foreach(Kecamatan::where('kota_id', Input::get('id'))->get() as $row) $return .= "<option value='$row->id'>$row->kecamatan</option>"; return $return; break; case 'desa': $return = '<option value=""></option>'; foreach(Desa::where('kecamatan_id', Input::get('id'))->get() as $row) $return .= "<option value='$row->id'>$row->desa</option>"; return $return; break; endswitch; } }
Kode diatas tampak berantakan, silahkan rapihkan sesuai selera anda.
selanjutnya buat 4 buah model dengan nama Propinsi.php, Kota.php, Kecamatan.php dan Desa.php dan isi seperti berikut.
// Untuk Propinsi.php <?php class Propinsi extends Eloquent { protected $table = 'propinsi'; public $timestamps = false; } // Untuk Kota.php <?php class Kota extends Eloquent { protected $table = 'kota'; public $timestamps = false; } // Untuk Kecamatan.php <?php class Kecamatan extends Eloquent { protected $table = 'kecamatan'; public $timestamps = false; } // Untuk Desa.php <?php class Desa extends Eloquent { protected $table = 'desa'; public $timestamps = false; }
Untuk selanjutnya buka folder view dan buat file dengan nama layouts.blade.php
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dropdown Depedency - Studi kasus Pemilihan Propinsi Indonesia</title> {{ HTML::script("assets/jquery.js") }} </head> <body> @yield('content') <script type="text/javascript"> $(document).ready(function() { @yield('script') }); </script> </body> </html>
Buat lagi dengan nama index.blade.php
@extends('layouts') @section('content') {{ Form::open(array('url' => '#', 'id' => 'wilayah')) }} <table width="500px" align="center"> <tr> <td>{{ Form::label('propinsi', 'Propinsi') }}</td> <td>: {{ Form::select('propinsi', $propinsi, null, array('id' => 'sPropinsi', 'style'=>'width: 200px')) }}</td> </tr> <tr> <td>{{ Form::label('kota', 'Kabupaten / Kota') }}</td> <td>: {{ Form::select('kota', array(), null, array('id' => 'sKota', 'style'=>'width: 200px')) }}</td> </tr> <tr> <td>{{ Form::label('kecamatan', 'Kecamatan') }}</td> <td>: {{ Form::select('kecamatan', array(), null, array('id' => 'sKecamatan', 'style'=>'width: 200px')) }}</td> </tr> <tr> <td>{{ Form::label('desa', 'Desa / Kelurahan') }}</td> <td>: {{ Form::select('desa', array(), null, array('id' => 'sDesa', 'style'=>'width: 200px')) }}</td> </tr> </table> {{ Form::close() }} @stop @section('script') $('#sPropinsi').on('change', function(){ $.post('{{ URL::to('site/data') }}', {type: 'kota', id: $('#sPropinsi').val()}, function(e){ $('#sKota').html(e); }); $('#sKecamatan').html(''); $('#sDesa').html(''); }); $('#sKota').on('change', function(){ $.post('{{ URL::to('site/data') }}', {type: 'kecamatan', id: $('#sKota').val()}, function(e){ $('#sKecamatan').html(e); }); $('#sDesa').html(''); }); $('#sKecamatan').on('change', function(){ $.post('{{ URL::to('site/data') }}', {type: 'desa', id: $('#sKecamatan').val()}, function(e){ $('#sDesa').html(e); }); }); @stopBuka file routes.php dan isi seperti berikut
<?php /* |-------------------------------------------------------------------------- | Application Routes |-------------------------------------------------------------------------- | | Here is where you can register all of the routes for an application. | It's a breeze. Simply tell Laravel the URIs it should respond to | and give it the Closure to execute when that URI is requested. | */ Route::get('/', 'SiteController@getIndex'); Route::controller('site', 'SiteController');
Selesai deh, berikut penampakannya.
Download
Password : didanurwanda.blogspot.com
wah mantep mas bro dida :d ijin unduh
BalasHapusmantap gan...
BalasHapusKomentar ini telah dihapus oleh pengarang.
BalasHapusgimana caranya supaya halaman edit.blade.php saya hanya menampilkan data kecamatan berdasarkan data kabupaten yang terpilih saja, misal :
HapusKabupaten : Kediri, Ngawi
Kecamatan : Kediri memiliki [Timur, Selatan, Utara] sedangkan Ngawi [Barat]
case yang sekarang di halaman edit.blade.php menampilkan data kecamatan semuanya, padahal data kecamatan tersebut tidak berada di kabupaten yang terpilih itu.
Assalamu'alaikum,
BalasHapussaya telah mencoba source diatas pada laravel 5, tapi ada yang erorr,
pilihan di subkategorinya tidak mau..
mohon bantuannya
terima kasih
route yang saya buat
HapusRoute::resource('site', SiteController);
solved ga bos masalahnya ?
Hapusambil idenya aja, mungkin cara pemakaian laravel 4 dan 5 berbeda ...
Hapus(p)
BalasHapuskok saya gagal ya
BalasHapusgan itu untuk table yang sama yah ? kalau untuk table yang berbeda gimana yah gan
BalasHapusKomentar ini telah dihapus oleh pengarang.
BalasHapus