Sunday, May 10, 2015

Membuat Filter Data Dengan AngularJS Dan Codeigniter-3

Membuat Filter Data Dengan AngularJS Dan Codeigniter-3

Membuat Filter Data Dengan AngularJS Dan Codeigniter-3 - Selateh pada pembahasan sebelumnya saya telah membahas :


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.

Membuat Filter Data Dengan AngularJS Dan Codeigniter-3
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.
Membuat Filter Data Dengan AngularJS Dan Codeigniter-3
Untuk mengubah datanya menjadi json, anda hanya perlu menggunakan fungsi json_encode yang sudah di sediakan di php.

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 angulaJSCara 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">
- 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 :)

Terimakasih :)
Reff Learning : Angular Guide & Youtube

Saya hanya seorang "newbie" yang baru bisa ngoding lohor kemarin.

1 komentar so far

gan, kalo nampilkan datanya pakai fitur pagination apakah masih bisa ditampilkan?


EmoticonEmoticon