Scribd
Unggah
158 tayangan5 halaman

Menampilkan Data Di Database Dengan AngularJS Dan Codeigniter-3 - Log Cahya

Dokumen tersebut menjelaskan cara menampilkan data dari database MySQL menggunakan AngularJS dan CodeIgniter. Langkah-langkahnya adalah membuat tabel database dan mengambil datanya lewat controller kemudian mengubahnya menjadi format JSON, lalu menampilkannya di view menggunakan directive ng-repeat dari AngularJS. Penjelasan dilengkapi dengan contoh kode lengkap.

Diunggah oleh

Yana Epri
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
158 tayangan5 halaman

Menampilkan Data Di Database Dengan AngularJS Dan Codeigniter-3 - Log Cahya

Dokumen tersebut menjelaskan cara menampilkan data dari database MySQL menggunakan AngularJS dan CodeIgniter. Langkah-langkahnya adalah membuat tabel database dan mengambil datanya lewat controller kemudian mengubahnya menjadi format JSON, lalu menampilkannya di view menggunakan directive ng-repeat dari AngularJS. Penjelasan dilengkapi dengan contoh kode lengkap.

Diunggah oleh

Yana Epri
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 5

10/20/2015

MenampilkanDataDiDatabasedenganAngularJSDanCodeigniter3LogCahya

Menampilkan Data Di Database dengan AngularJS


Dan Codeigniter-3
Cahya Dyazin

7.47.00 PM

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
http://www.kangcahya.com/2015/05/menampilkandatadidatabasedenganangularjsdancodeigniter3.html

1/5

10/20/2015

MenampilkanDataDiDatabasedenganAngularJSDanCodeigniter3LogCahya

bawah ini.

TabelMahasiswa

#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.
Double click to selection
<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angul
ar.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.
Double click to selection
<linkrel="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)

http://www.kangcahya.com/2015/05/menampilkandatadidatabasedenganangularjsdancodeigniter3.html

2/5

10/20/2015

MenampilkanDataDiDatabasedenganAngularJSDanCodeigniter3LogCahya

Double click to selection

<?php
if(!defined('BASEPATH'))exit('Nodirectscriptaccessallowed');
classAngularextendsCI_Controller{
function__construct(){
parent::__construct();
}

publicfunctionindex(){
$this>load>view('angular');
}

publicfunctiondata_angularnya(){
$dt=$this>db>get('mahasiswa')>result();
$arr_data=array();
$i=0;
foreach($dtas$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++;
}
echojson_encode($arr_data);
}
}
?>

Keterangan :
Kode di atas berfungsi untuk mengambil data pada tabel mahasiswa, lalu data di
keluarkan semua menggunakan foreachsehingga data yang di hasilkan akan
berbentuk array. Tetapi jika kita ingin menampilkan data tersebut menggunakan
angularJS, Maka data harus berbentuk json.

Untuk mengubah datanya menjadi json, anda hanya perlu menggunakan fungsi
json_encodeyang sudah di sediakan di php.
Selanjutnya buat view baru, lalu simpan dengan nama angular.php . (salin kode di

bawah ini)

http://www.kangcahya.com/2015/05/menampilkandatadidatabasedenganangularjsdancodeigniter3.html

3/5

10/20/2015

MenampilkanDataDiDatabasedenganAngularJSDanCodeigniter3LogCahya

Double click to selection

<htmlngapp="app_pertamaku">
<metacharset="utf8">
<head>
<title>DokumenAngularPertama</title>
<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstr
ap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<h1>ANGULAR.JS:Menampilkandata</h1>
<divngcontroller="ini_controller">
<tableclass="table">
<thead>
<tr>
<th>ID</th>
<th>NIM</th>
<th>NAMA</th>
<th>JENISKELAMIN</th>
<th>ALAMAT</th>
</tr>
</thead>
<tbody>
<trngrepeat="valinini_datanya">
<td>{{val.id}}</td>
<td>{{val.nim}}</td>
<td>{{val.nama}}</td>
<td>
<b><spanclass="textsuccess"ngshow="val.jk=='L'">LakiLaki</
span>
<spanclass="textdanger"ngshow="val.jk=='P'">Perempuan</span
></b>
</td>

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.
http://www.kangcahya.com/2015/05/menampilkandatadidatabasedenganangularjsdancodeigniter3.html

4/5

10/20/2015

MenampilkanDataDiDatabasedenganAngularJSDanCodeigniter3LogCahya

<spanclass="textsuccess"ngshow="val.jk=='L'">LakiLaki</span>
<spanclass="textdanger"ngshow="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 "

- textsuccess = text berwarna hijau.


- textdanger = 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.... :)
Terimakasih:)
ReffLearning:AngularGuide&Youtube

http://www.kangcahya.com/2015/05/menampilkandatadidatabasedenganangularjsdancodeigniter3.html

5/5

Anda mungkin juga menyukai