Membuat Filter Data Dengan AngularJS Dan Codeigniter-3 - Selateh pada pembahasan sebelumnya saya telah membahas :
- Insert Data Ke Mysql Dengan AngularJS Dan Codeigniter-3
- Menampilkan Data Di Database dengan AngularJS Dan Codeigniter-3
Kali ini saya akan coba berbagi bagaimana ca membuat filter data menggunakan angularJS dan codeigniter. Filter data yang akan di buat ini akan terlihat ajaib, karena filter data ini mirip dengan filter data yang ada pada datatable, terlihat realtime hehehe.
Spesifikasi Soucecode :
- Codeigniter 3
- AngularJS 1.3
- Bootstrap 3.3.4
- Mysql
Persiapan
#Database
Buat database terlebih dahulu, untuk nama database terserah anda (bebas).
Lalu buat tabel baru dengan nama mahasiswa. samakan fieldnya seperti gambar di bawah ini.
 |
| Tabel Mahasiswa |
#Configurasi Codeigniter
Atur pada application/config/database.php , sesualkan nama databasenya.
Atur pada application/config/routes.php , sesuaikan default controller yang akan diloadnya.
#Angular
Jika anda terkoneksi ke internet, di sarankan langsung meload angularJS dari CDN agar lebih cepat. tapi kalau tidak terkonesi, ya terpaksa anda harus mendownloadnya terlebih dahulu.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
Direkomendasikan pakai angularJS 1.3
#Bootstrap
Menggunakan bootstrap hanya sebagai penghias saja agar tidak terlalu polos tampilannya :). Untuk bootstrap saya sarankan menggunakan dari CDN.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">Praktik
Seletah semua persiapan sudah selesai di lakukan. Sekarang saatnya kita praktik :)
<?php
if (!defined('BASEPATH'))exit('No direct script access allowed');
class Angular extends CI_Controller {
function __construct() {
parent::__construct();
}
public function index() {
$this->load->view('angular-filter-data');
}
public function data_angularnya(){
$dt=$this->db->get('mahasiswa')->result();
$arr_data=array();
$i=0;
foreach($dt as $r){
$arr_data[$i]['id']=$r->id;
$arr_data[$i]['nim']=$r->nim;
$arr_data[$i]['nama']=$r->nama;
$arr_data[$i]['jk']=$r->jk;
$arr_data[$i]['alamat']=$r->alamat;
$i++;
}
echo json_encode($arr_data);
}
}
?>
Keterangan :
Kode di atas berfungsi untuk mengambil data pada tabel mahasiswa, lalu data di keluarkan semua menggunakan foreach sehingga data yang di hasilkan akan berbentuk array. Tetapi jika kita ingin menampilkan data tersebut menggunakan angularJS, Maka data harus berbentuk json.
Selanjutnya buat view baru, lalu simpan dengan nama angular-filter-data.php. (salin kode di bawah ini)
<html ng-app="app_filter">
<meta charset="utf-8">
<head>
<title>Angular Filter Data</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container" ng-controller="ini_controller">
<h1>ANGULAR.JS : Filter data</h1>
<input type="text" class="form-control" placeholder="Filter..." ng-model="filter_data">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>NIM</th>
<th>NAMA</th>
<th>JENIS KELAMIN</th>
<th>ALAMAT</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="val in ini_datanya | filter:filter_data">
<td>{{val.id}}</td>
<td>{{val.nim}}</td>
<td>{{val.nama}}</td>
<td>
<b><span class="text-success" ng-show="val.jk=='L'">Laki-Laki</span>
<span class="text-danger" ng-show="val.jk=='P'">Perempuan</span></b>
</td>
<td>{{val.alamat}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
var app=angular.module('app_filter',[]);
app.controller('ini_controller',function($scope,$http){
$scope.ini_datanya=[];
$http.get("<?php echo site_url('angular/data_angularnya');?>").success(function(result){
$scope.ini_datanya=result;
});
});
</script>
</body>
</html>
Keterangan :
Untuk melakukan filter data, kita akan menggunakan fungsi filter yang ada dalam modul ng di angulaJS. Cara implamentasinya, buat terlebih dahulu directive ng-model pada <input type="text" .... ng-model="filter_data">. Lalu tambahkan fungsi filter dangan format filter:nama-ng-modelnya pada directive ng-repeat. Jika didalam satu directive terdapat lebih dari satu fungsi, maka kita harus menggunakan tanda pemisah agar bisa menambahkan lebih dari satu fungsi pada satu directive.
Kita tengok implementasi pada kode diatas :
<tr ng-repeat="val in ini_datanya | filter:filter_data">
<tr ng-repeat="val in ini_datanya | filter:filter_data">
- Tanda pemisah yang di maksud menggunakan tanda pipa ( | ) .
- filter_data merupakan nama ng-model pada <input type=.....>
Demo filter data menggunakan angularJS dan codeigniter.
Mungkin cukup sekian dulu untuk artikel angularJS kali ini. Mohon maaf jika ada banyak sekali kekurangan pada saat menjelaskan materi. Harap di ma'lum, saya juga masih belajar sama seperti anda hihihi :) . Jangan sungkan untuk mengirim komentar jika ada yang tidak paham atau pun ada yang perlu di perbaiki dari kode yang saya buat. :)
Artikel ini masih bersambung, tunggu artikel selanjutnya ya :). Jangan lupa di bookmak alamatnya. tekan CTRL+D :)
Mungkin cukup sekian dulu untuk artikel angularJS kali ini. Mohon maaf jika ada banyak sekali kekurangan pada saat menjelaskan materi. Harap di ma'lum, saya juga masih belajar sama seperti anda hihihi :) . Jangan sungkan untuk mengirim komentar jika ada yang tidak paham atau pun ada yang perlu di perbaiki dari kode yang saya buat. :)
Artikel ini masih bersambung, tunggu artikel selanjutnya ya :). Jangan lupa di bookmak alamatnya. tekan CTRL+D :)
gan, kalo nampilkan datanya pakai fitur pagination apakah masih bisa ditampilkan?
BalasHapusPosting Komentar