Menampilkan Data Di Database dengan AngularJS Dan Codeigniter-3 - AngularJS adalah framework untuk javascript yang dikembangkan oleh Google. Dengan fitur-fitur powerful dari AngularJS, proses development bisa menjadi jauh lebih singkat. Di sisi lain, organisasi kode Javascript menjadi lebih terstruktur dan “bersih” karena penggunaan framework ini mengdukung penerapan konsep MVC ataupun MV-Whatever pada aplikasi yang kita kembangkan.
Hari ini saya akan coba membahas sedikit seputar angularJS. Sesama newbie kita wajib berbagi :) . Kebetulan hari ini saya sedang belajar angularJS. Pada pembahasan kali ini saya akan mencoba menampilkan data dari database dengan angularJS dan Codeigniter.
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 :)
Pertama buatlah controller baru lalu simpan dengan nama Angular.php. (salin kode di bawah ini)
<?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');
}
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.php. (salin kode di bawah ini)
<html ng-app="app_pertamaku">
<meta charset="utf-8">
<head>
<title>Dokumen Angular Pertama</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<h1>ANGULAR.JS : Menampilkan data</h1>
<div ng-controller="ini_controller">
<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">
<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_pertamaku',[]);
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 :
Json pada controller akan di get menggunakan angular lalu di tampilkan dengan directive ng-repeat dari angular.
- Directive ng-app merupakan akar dari aplikasi yang di buat oleh angularJS. ng-app biasanya di letakan pada element <html> atau <body>
- Directive ng-controller merupakan directive yang menghubungkan model dan view pada angularJS.
- Directive ng-repeat ini sama fungsinya dengan fungsi looping di php.
- Directive ng-show, berfungsi untuk mengingat elemen HTML berdasarkan ekspresi yang diberikan pada directive ini. Pada penerapan kode di atas atribut pada directive ini hampir sama bentuknya sepeti penggunaan if di php.
<span class="text-success" ng-show="val.jk=='L'">Laki-Laki</span>
<span class="text-danger" ng-show="val.jk=='P'">Perempuan</span>
Contoh penerapan ng-show pada kode di atas bisa di terjemahkan seperti ini :
"Jika jk sama dengan L maka tampilkan Laki-laki, tetapi jika jk sama dengan P maka tampilkan Perempuan"
- text-success = text berwarna hijau.
- text-danger = text berwarna merah.
Mohon maaf jika penjelasannya tidak terlalu lengkap. karena agak susah menjelaskannya semuanya di sini (harap ma'lum, baru belajar) hihihihiii. Mungkin jika ada yang di kurang mengerti anda bisa bertanya langsung lewat form komentar di bawah ini.
Artikel ini masih bersambung.... :)
Mohon maaf jika penjelasannya tidak terlalu lengkap. karena agak susah menjelaskannya semuanya di sini (harap ma'lum, baru belajar) hihihihiii. Mungkin jika ada yang di kurang mengerti anda bisa bertanya langsung lewat form komentar di bawah ini.
Artikel ini masih bersambung.... :)
Gan itu nama controllernya CI angular yah ?
BalasHapusDi controller angular ada "site_url('angular/data_angularnya')", jadi di fungsi ci controller "data_angularnya" isinya JSon semua?
Controller angular ngambil json dari controller CI, cara kerjanya begitu bukan gan ? Maaf nih newbie
iyah betul gan :)
HapusTapi gan kalo http service nya dipindahin ke file.js sendiri gak work gan. Bisa diakalin tapi url nya gak dinamis. Bisa gak biar file nya di taro khusus di file js tapi syntax php nya kebaca? Saya nerapin ini di laravel
BalasHapusagar url di namis bisa di akalin kyk gini,
Hapuspertama buat variabel base url di javascript kyk gini :
[script]
var base_url = [php] echo base_url(); [/php]
[/script]
(taro sintak di atas didalam tag [head])
nanti pas manggil di js nya, tinggal kyk gini aja :
base_url/nama_class/nama_function/ID-nya
Keren bang,, makasih ilmunya,,
BalasHapusPosting Komentar