Oke untuk kali ini kita akan coba mempelajari bersama salah satu framework javascript bernama Angularjs.
Dalam penggunaannya, Angularjs memiliki elemen-elemen dasar yang harus kita kuasai antara lain expression, directive dan module/controller. Untuk yang ingin belajar dari basic saya sarankan mencoba terlebih dahulu dari http://www.w3schools.com/angular/angular_examples.asp
Oke, lanjut ke topik utama kali ini, kita akan mencoba membuat dropdown list dalam Angularjs.
Dalam pembuatannya, sejauh yang saya ketahui, kita bisa menggunakan 2 cara yaitu dengan menggunakan directives ng-repeat atau menggunakan ng-options. Kita akan sekalian membahas bagaimana memasukkan konten dropdown list yang diambil dari database atau REST. Versi angular yang digunakan ialah v 1.3.2
Membuat dropdown list dengan menggunakan ng-repeat
Ini adalah cara yang paling mudah dan simpel dalam membuat dropdown list di Angularjs, tapi juga fungsionalitasnya sangat terbatas dan sederhana. Perhatikan kode berikut :
HTML :
<html ng-app="myApp">
<body>
<div ng-controller="DropdownDemoCtrl">
<p>selected item is : {{selectedItem}}</p>
<select ng-model="selectedItem">
<option ng-repeat="item in items">{{item.name}}</option>
</select>
</div>
</body>
</html>
JS :
var myApp = angular.module('myApp',[]);
myApp.controller ('DropdownDemoCtrl', function($scope){
$scope.items = [{name: 'one', id: 1 },{ name: 'two', id: 2 },{ name: 'three', id: 3 }];
}]);
Karena nanti kita akan berhubungan dengan database, maka kita mengambil contoh untuk memasukkan konten dropdown list yang berisi objek. Perhatikan bahwa $scope.items merupakan array berisi objek-objek yang memiliki atribut 'name' dan 'id'. Kode-kode diatas akan menampilkan item yang dipilih sebagai items.name, sbb :
 |
| Gambar 1 |
Kita juga bisa menentukan atribut mana yang ingin ditampilkan dari elemen yang dipilih, caranya ialah dengan menambahkan label "value" pada tag option di html, sbb:
<option ng-repeat="item in items" value="{{item.id}}">{{item.name}}</option>
Kode di atas akan menampilkan id dari item, meskipun konten yang tampil di dropdown list merupakan item.name.
 |
| Gambar 2 |
Oke, selanjutnya kita akan coba menampilkan konten yang diambil dari database. Sebelumnya perlu diperhatikan bahwa angularjs menyediakan modul $http untuk berkomunikasi (membaca atau menyimpan data) dari web server dalam format .json atau xml . Untuk lebih detailnya silakan baca di https://docs.angularjs.org/api/ng/service/$http
Oleh karena itu kita akan memanfaatkan modul $http ini untuk mengambil data dari database yang sudah terformat dalam bentuk json/xml. Silakan gunakan database apapun dan bahasa pemrograman apapun sebagai server-side (misal php, java dll), kemudian parsing datanya dalam bentuk json atau xml untuk diambil oleh modul $http tadi.
myApp.controller ('DropdownDemoCtrl', function($scope, $http){
$http.get('items.json').success(function(response) {
$scope.items = response;
});
}]);
Kode diatas, mengambil data dari file json statis yang secara fisik tersimpan dengan nama items.json, dengan isi sbb :
[
{
"name" : "satu",
"id" : "1"
},
{
"name" : "dua",
"id" : "2"
},
{
"name" : "tiga",
"id" : "3"
},
{
"name" : "empat",
"id" : "4"
}
]
Apabila anda lebih mahir, mungkin anda bisa melakukan query dari database kemudian mengkonversi hasil query-nya dalam format json, untuk kemudian diambil dengan $http.get . Saat anda bisa melakukan hal tersebut, berarti anda telah bisa mengimplementasikan salah satu metode web-service pada angularjs yaitu REST ;) CMIIW
Membuat dropdown list dengan menggunakan ng-options
Angularjs menyediakan sebuah directive khusus untuk mendukung fitur dropdown yaitu menggunakan ng-options. Berbeda dengan penggunaan ng-repeat, label ng-options ini disimpan pada tag <select> di html bukan pada tag <option>. Namun inti penggunaannya tidak jauh berbeda.
HTML :
<html ng-app="myApp">
<body>
<div ng-controller="DropdownDemoCtrl">
<p>selected item is : {{selectedItem}}</p>
<select ng-model="selectedItem" ng-options="item.name for item in items">
<option></option>
</select>
</div>
</body>
</html>
Kode di atas akan menampilkan item.name sebagai data yang tampil pada list dropdown, sedangkan data yang dimasukkan ke dalam var selectedItem ialah objek yang dipilih. Sehingga hasilnya ialah sbb :
 | |||
| Gambar 3 |
Sedangkan untuk mendapatkan isi var selectedItem berdasarkan atribut yang kita inginkan, misal ingin mengambil atribut id dengan list yang tampil merupakan item.name (lihat Gambar 2), maka gunakan kode berikut :
<select ng-model="selectedItem1" ng-options="item.id as item.name for item in items">
Label as pada ng-options diatas menunjukkan bahwa atribut id lah yang menjadi "value" atau dengan kata lain, id-nya yang akan diambil saat kita memilih salah satu item.name dari dropdown list.
Membuat dropdown-list yang telah menunjuk salah satu data
Perlu diingat bahwa penggunaan ng-repeat tidak bisa berjalan sesuai keinginan saat kita ingin memberi state awal dari dropdown list milik kita, seperti saat kita membuat form untuk edit dimana var selecteItem nya biasanya sudah memiliki nilai tertentu. Dan perlu diketahui juga bahwa semua kode yang tercantum di atas memiliki state awal kosong seperti berikut :
 |
| Gambar 4 |
Lalu bagaimana apabila kita ingin membuat form editor yang saat page tersebut dibuka, dropdown list nya sudah menunjuk salah satu nilai? untuk itulah digunakan ng-options dengan tag <option> sebagai berikut :
HTML :
<html ng-app="myApp">
<body>
<div ng-controller="DropdownDemoCtrl">
<p>selected item is : {{selectedItem}}</p>
<select ng-model="selectedItem" ng-options=" item.id as item.name for item in items">
<option value="selectedItem" selected="selected"></option>
</select>
</div>
</body>
</html>
JS :
myApp.controller ('DropdownDemoCtrl', function($scope, $http){ $http.get('items.json').success(function(response) { $scope.items = response; $scope.selectedItem = response[1].id; }); }]);
Dengan kode di atas, kita telah menampilkan dropdown list yang initial state nya menunjuk data yang ada pada array response index ke-1. Dan perlu diingat juga, var $scope.selectedItem pada file js harus diisi atribut yang sama dengan atribut yang menjadi "value" pada html. Dalam kontex kode di atas, yang diambil adalah atribut id.
Dan berikut ini adalah source code yang bisa kita gunakan untuk mempelajari pembuatan dropdown-list pada angularjs, dengan data yang diambil dari database mySQL yang terintegrasi dengan Slim PHP :
Semoga bermanfaat ;)
Posting Komentar
0 Komentar