Top Banner
Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB CV. LOKOMEDIA Agung Julisman
34

Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Mar 03, 2019

Download

Documents

vandieu
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

B i k i n A p l i k a s i A N D RO I D

dengan Angular Mobile & mongoDB

CV. LOKOMEDIA

Agung Julisman

Page 2: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

ii

Bikin Aplikasi ANDROID dengan Angular Mobile dan mongoDBPerpustakaan Nasional : Katalog Dalam Terbitan (KDT)Penulis : Agung JulismanBikin Aplikasi ANDROID dengan Angular Mobile dan mongoDB- Cet. I. - Yogyakarta : Penerbit Lokomedia, 2015 228 halaman; 14 x 21 cm ISBN : 978-602-14307-0-5

Penerbit Lokomedia, Cetakan Pertama : Januari 2015

Editor : Lukmanul HakimCover : Subkhan AnshoriLayout : Lukmanul Hakim

Diterbitkan pertama kali oleh :CV. LOKOMEDIAJl. Jambon, Perum. Pesona Alam Hijau 2 Kav. B-4, Kricak Yogyakarta 55242.

email : [email protected] : www.bukulokomedia.com

Copyright © Lokomedia, 2015

Hak Cipta dilindungi oleh Undang-Undang

Dilarang memperbanyak, mencetak ataupun menerbitkan sebagian maupun seluruh isi buku ini tanpa izin tertulis dari penerbit.

Page 3: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

iii

KATA PENGANTAR

Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile menghabiskan waktunya dengan mobilenya masing-masing ini menjadikan tren tersendiri, dimana ini menjadi kesempatan untuk developer mengembangkan aplikasi berbasis mobile.

Perlu kita ketahui, sistem sistem operasi mobile yang mendominasi antara lain Android, IOS, Blackberry dan Windows Phone. Setiap OS masing-masing memiliki native bahasa pemograman sendiri-sendiri yang berarti aplikasi yang berjalan di Android tidak bisa berjalan di OS mobile lainnya, begitu juga sebaliknya. Sehingga, masa yang akan datang akan diperlukan sebuah bahasa pemograman yang dapat berjalan di semua OS mobile.

Buku ini mengajak para pembaca untuk membuat aplikasi yang dapat berjalan di cross platform menggunakan teknologi Phonegap sebagai pembungkus aplikasi agar dapat berjalan di mobile, NodeJS sebagai server dari aplikasi, AngularJS sebagai bahasa pemrograman di sisi client, Socket.io sebagai jembatan untuk mengirim data secara realtime dan mongoDB sebagai database.

Puji syukur kehadirat Allah SWT atas berkat dan rahmat-Nya, sehingga penulis dapat menyelesaikan buku ini, dan penulis menyadari masih banyak kekurangan dalam buku ini, kritik dan saran dapat langsung disampaikan ke penulis.

Bandung, Agustus 2014

Agung Julisman

Web : http://julisman.com

Blog : blog.julisman.com

Email : [email protected]

Page 4: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

iv

Halaman ini Sengaja Dikosongkan

www.bukulokomedia.com

Page 5: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

v

DAFTAR ISI

BAB 1. Memahami AngularJS dan Kasusnya ..............................................1

1.1. Teknik Insert Multiple Data .........................................................................2

1.2. Teknik Edit Multiple Data ...........................................................................7

1.3. Teknik Delete Multiple Data .....................................................................13

1.4. Teknik Filter Data.......................................................................................18

1.5. Ng-keypress ................................................................................................23

1.6. Ng-cloak .....................................................................................................25

BAB 2. Mengenal NodeJS ..............................................................................27

2.1. Blocking Vs Non-Blocking .......................................................................31

2.2. JSON...........................................................................................................34

2.3. API ..............................................................................................................36

2.3.1. Readline ............................................................................................36

2.3.2. Kriptografi ........................................................................................38

2.4. Penanganan Error .......................................................................................42

BAB 3. NPM (Node Packaged Module) .......................................................45

3.1. Menggunakan NPM ...................................................................................46

3.2. Instalasi Modul ...........................................................................................47

BAB 4. MongoDB (Database NoSQL) .........................................................49

4.1. Instalasi dan Konfigurasi MongoDB .........................................................50

4.2. Action With MongoDB ..............................................................................56

Page 6: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

vi

4.2.1. Create Database ................................................................................58

4.2.2. Create Collection dan Insert ............................................................58

4.2.3. Membuat Relasi di MongoDB dengan Konsep RDBMS ..............61

4.2.4. Find ...................................................................................................67

4.3. SQL to MongoDB ......................................................................................69

4.4. Mengakses MongoDB dengan NodeJS ....................................................72

BAB 5. Socket.io ..............................................................................................75

BAB 6. Phonegap dan Apache Cordova ......................................................81

6.1. Pengenalan Phonegap ................................................................................82

6.2. Pengenalan Apache Cordova .....................................................................82

6.3. Perbedaan Phonegap dengan Apache Cordova.........................................83

6.4. Persiapan Environment ..............................................................................83

6.4.1. Install Phonegap ...............................................................................84

6.4.2. Install Cordova .................................................................................84

6.4.3. Install Apache Ant ............................................................................86

6.4.4. JDK (Java Development Kit) ..........................................................91

6.4.5. SDK Android....................................................................................93

6.4.6. Emulator ...........................................................................................96

6.4.6.1. AVD (Android Virtual Device) ...........................................96

6.4.6.2. BlueStacks .........................................................................100

6.4.6.3. Device ................................................................................100

6.5. Hallo Android ...........................................................................................103

6.5.1. Struktur Framework Phonegap ......................................................104

6.5.2. Menambahkan Platform Android ..................................................105

6.6. Plugin API ................................................................................................108

Page 7: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

vii

6.6.1. Plugin Dialog .................................................................................109

6.6.2. Plugin Camera ................................................................................113

6.6.3. Plugin Device .................................................................................118

6.6.4. Plugin Network Information ..........................................................119

6.6.5. Plugin Geolocation.........................................................................121

BAB 7. Framework CSS Mobile Angular UI ............................................123

BAB 8. Teknik Debugging Javascript ........................................................127

BAB 9. Manajemen Tanggal dan Waktu dengan MomentJS .................141

9.1. Waktu Sekarang .......................................................................................144

9.2. Set Bahasa ................................................................................................145

9.3. Validasi Waktu ..........................................................................................147

9.4. Manipulasi Tanggal ..................................................................................148

9.4.1. Penambahan Tanggal .....................................................................148

9.4.2. Pengurangan Tanggal .....................................................................149

9.4.3. Menghitung Selisih Perbedaan Antar Tanggal ..............................150

9.4.4. Menghitung Waktu dari Sekarang .................................................150

9.4.5. Perbandingan Tanggal ....................................................................152

BAB 10. Mengenal Git (Version Control) ..................................................153

10.1. Version Control ......................................................................................156

10.2. Git ...........................................................................................................156

10.3. Git di Github ..........................................................................................160

10.3.1. Setup Repository Github ..............................................................162

10.3.2. Mengelola File di Github ..............................................................166

Page 8: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

viii

BAB 11. Proyek Membuat Aplikasi Chat ..................................................173

11.1. Arsitektur Aplikasi .................................................................................174

11.2. Desain Skema MongoDB ......................................................................175

11.3. Persiapan MongoDB ..............................................................................176

11.4. Persiapan di Sisi Server..........................................................................176

11.5. Persiapan di Sisi Client ..........................................................................184

11.6. Menguji Aplikasi di Browser .................................................................198

11.7. Build Aplikasi ke Android .....................................................................206

11.7.1. Persiapan Plugin .........................................................................207

11.7.2. Tahap Satu ..................................................................................207

11.7.3. Tahap Dua ...................................................................................208

11.7.4. Tahap Tiga ..................................................................................209

11.7.5. Tahap Empat ...............................................................................209

11.7.6. Tahap Lima .................................................................................209

11.7.7. Build Aplikasi .............................................................................210

11.8. Ujicoba Aplikasi di Android ..................................................................211

BAB 12. Cara Menjalankan Aplikasi Chat ...............................................221

11.1. Jalankan Server ......................................................................................222

11.2. Aplikasi di Browser ................................................................................223

11.3. Aplikasi di Android ................................................................................224

11.4. User .........................................................................................................227

11.5. Bonus ......................................................................................................227

Page 9: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

BAB I

Memahami AngularJS dan Kasusnya

Page 10: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Aplikasi ANDROID dgn Angular Mobile & mongoDB2

BAB 1

Memahami AngularJS dan Kasusnya

Dalam Bab 1 ini, kita tidak akan membahas hal-hal mendasar tentang AngularJS, pada bab ini kita akan langsung ke studi kasusnya.

1.1 Teknik Insert Multiple DataPada sub-bab 1.1 ini, kita akan membuat insert multiple data dengan AngularJS, jadi kita bisa langsung menginputkan data banyak sekaligus tanpa satu per satu, jumlahnya pun akan dinamis sesuai dengan keinginan user..

Pertama, buat terlebih dahulu database dengan nama bab1, lalu buat sebuah tabel didalamnya dengan nama siswa dengan field nama dan kelas.

Kemudian buat folder bab1 di C:\xampp\htdocs\, lalu buat file dengan nama insert.html dan simpan di folder yang baru dibuat tersebut, adapun isi kodenya sebagai berikut:

Skrip insert.html<!DOCTYPE html><html data-ng-app=”bab1”><head><meta charset=”utf-8” /><title>Insert Multiple Data</title><script src=”./vendor/angular/angular.js”></script></head><body ng-controller=”MainController” >{{ data }}<div data-ng-repeat=”key in data”> Nama <input type=”text”

data-ng-model=”data[$index].nama”><br> Kelas <input type=”text”

data-ng-model=”data[$index].kelas”><br></div>

<button data-ng-click=”tambah()”>Tambah Data</button><button data-ng-click=”cancel()” data-ng-show=”data.length > 1”>Cancel</button><button data-ng-click=”simpan()”>Simpan</button><p>{{ pesan }}</p>

Page 11: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Bab I. Memahami AngularJS dan Kasusnya 3

</body></html><script> var app = angular.module(‘bab1’, []);

app.controller(‘MainController’,function($scope,$http){ //set type data ‘data’ dengan object $scope.data = [{nama : ‘’,kelas : ‘’} ]; //fungsi tambah inputan $scope.tambah = function(){ $scope.data.push({nama : ‘’, kelas : ‘’}); }; //fungsi kurangi inputan $scope.cancel = function(){ $scope.data.splice($scope.data.length-1); }; //fungsi simpan $scope.simpan = function(){ $http.post(‘http://localhost/bab1/server.php?action=insert’,$scope.data).success(function(response){ if(respone > 0){ $scope.data = [{nama : ‘’,kelas : ‘’} ]; $scope.pesan = response +’ Data telah berhasil disimpan’; $scope.$apply(); } }); } })</script>

Kemudian buat file dengan nama server.php dan simpan di folder yang sama yaitu htdocs\bab1, lalu isikan dengan kode berikut:

Skrip server.php<?php$hostname = “localhost”;$user = “root”;$pass = “”;$database = “bab1”;

$conn = mysql_connect($hostname,$user,$pass);if(!$conn) die (“gagal melakukan koneksi”);mysql_select_db($database,$conn) or die(“database tidak ditemukan”);

switch($_GET[‘action’]){ case ‘insert’ : $data = json_decode(file_get_contents(“php://input”));

Page 12: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Aplikasi ANDROID dgn Angular Mobile & mongoDB4

$i = 0; foreach($data as $k => $v){ $query = “INSERT INTO siswa(nama,kelas)

VALUES (‘”.$v->nama.”’,’”.$v->kelas.”’)”; mysql_query($query); $i++; }; echo $i; break;}

Selanjutnya, buka browser dan ketikkan http://localhost/bab1/insert.html, maka akan tampil form insert seperti pada gambar 1.1.

Gambar 1.1 Form insert

Karena kita akan melakukan insert lebih dari 1 data, maka sekarang coba klik tombol Tambah Data, maka secara otomatis form insert akan bertambah dibawahnya. Lihat gambar 1.2.

Page 13: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Bab I. Memahami AngularJS dan Kasusnya 5

Gambar 1.2 Hasil penambahan form insert dibawahnya

Apabila diperhatikan lagi pada gambar 1.2, sekarang terdapat sebuah tombol baru yaitu Cancel, dimana apabila tombol Cancel di-klik, maka akan mengurangi form insert.

Sekarang coba isikan datanya, lalu klik tombol Simpan. Contohnya bisa dilihat pada gambar 1.3.

Page 14: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Aplikasi ANDROID dgn Angular Mobile & mongoDB6

Gambar 1.3 Mengisikan data pada form insert

Apabila data berhasil disimpan, maka akan tampil informasi berapa jumlah data yang disimpan ke database, dalam contoh ini ada 2 data, artinya kita baru saja memasukkan lebih dari satu data sekaligus, itulah yang dimaksud dengan insert multiple data. Lihat gambar 1.4.

Page 15: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Bab I. Memahami AngularJS dan Kasusnya 7

Gambar 1.4 Pesan insert multiple data telah berhasil disimpan

1.2 Teknik Edit Multiple DataUntuk edit multiple data, kita akan menggunakan data yang telah kita insert-kan sebelumnya pada sub-bab 1.1. Oke langsung saja, buat file baru dengan nama edit.html di folder htdocs/bab1, adapun isi kodenya sebagai berikut:

Skrip edit.html<!DOCTYPE html><html data-ng-app=”bab1”><head><meta charset=”utf-8” /><title>Edit Multiple Data</title><script src=”./vendor/angular/angular.js”></script></head><body ng-controller=”MainController” >

<table><tr>

Page 16: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Aplikasi ANDROID dgn Angular Mobile & mongoDB8

<td>No</td><td>Nama</td><td>Kelas</td><td>Action</td></tr><tr data-ng-repeat=”(k,v) in data”><td>{{ $index +1 }}</td><td><input type=”text” data-ng-model=”v.nama” data-ng-if=”v.isedit”><p data-ng-if=”!v.isedit”>{{v.nama}}</p></td>

<td><input type=”text” data-ng-model=”v.kelas” data-ng-if=”v.isedit”><p data-ng-if=”!v.isedit”>{{v.kelas}}</p></td>

<td><button data-ng-click=”edit($index)”>Edit</button></td></tr></table><button data-ng-click=”update()”>Update</button>{{ pesan }}</body></html><script> var app = angular.module(‘bab1’, []);

app.controller(‘MainController’,function($scope,$http){ // set type data dataedit dengan array kosong $scope.dataedit = []; // fungsi menggambil data ke server $scope.getdata = function(){ $http.get(‘http://localhost/bab1/server.php?action=get’).success(function(response){ $scope.data = response; $scope.$apply(); }); }; // init data $scope.getdata(); //ketika user klik button edit $scope.edit = function(index){ //set agar ketika user input //munculkan input type $scope.data[index][‘isedit’] = true; // masukkan data yang dipilih ke array dataedit $scope.dataedit.push($scope.data[index]); }; $scope.update = function(){ //kirim data yang di edit saja ke server $http.post(‘http://localhost/bab1/server.php?

Page 17: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Bab I. Memahami AngularJS dan Kasusnya 9

action=update’,$scope.dataedit).success(function(response){ if(response > 0){ //munculkan list baru yang sudah berhasil di edit $scope.getdata(); //tampilkan pesna sukses $scope.pesan = response +’ Data telah berhasil di update’; $scope.$apply(); } }); } });</script>

Kemudian tambahkan kode baru di skrip server.php menjadi seperti berikut:

Skrip server.php (tambahan untuk edit/update, perhatikan teks tebal)<?php$hostname = “localhost”;$user = “root”;$pass = “”;$database = “bab1”;

$conn = mysql_connect($hostname,$user,$pass);if(!$conn) die (“gagal melakukan koneksi”);mysql_select_db($database,$conn) or die(“database tidak ditemukan”);

switch($_GET[‘action’]){ case ‘insert’ : $data = json_decode(file_get_contents(“php://input”)); $i = 0; foreach($data as $k => $v){ $query = “INSERT INTO siswa(nama,kelas)

VALUES (‘”.$v->nama.”’,’”.$v->kelas.”’)”; mysql_query($query); $i++; }; echo json_encode($i); break;

case ‘get’ : $query = “SELECT * FROM siswa”; $sql = mysql_query($query); $data = array(); while($row=mysql_fetch_array($sql)) { $data[] = $row; }

echo json_encode($data);

Page 18: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Aplikasi ANDROID dgn Angular Mobile & mongoDB10

break;

case’update’ : $data = json_decode(file_get_contents(“php://input”)); $i = 0; foreach($data as $k => $v){ $query = “UPDATE siswa set nama = ‘”.$v->nama.”’ , kelas = ‘”.$v->kelas.”’

where siswaid = ‘”.$v->siswaid.”’”; mysql_query($query); $i++; }; echo json_encode($i); break;}

Selanjutnya, buka browser dan ketikkan http://localhost/bab1/edit.html, maka akan tampil data yang disertai Action tombol Edit di sebelan kanan datanya. Lihat gambar 1.5.

Gambar 1.5 Menampilkan data beserta tombol Edit-nya

Page 19: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Bab I. Memahami AngularJS dan Kasusnya 11

Sekarang coba klik tombol Edit untuk data No. 1, maka data tersebut akan berubah menjadi baris form yang bisa di edit. Lihat gambar 1.6.

Gambar 1.6 Data No. 1 dalam keadaan bisa di edit

Kemudian klik tombol Edit untuk data No. 2, maka data tersebut akan berubah menjadi baris form yang bisa di edit, artinya kita bisa langsung mengedit lebih dari 1 data sekaligus (multiple edit). Lihat gambar 1.7.

Sekarang coba ubah semua data-datanya, lalu klik tombol Update. Contohnya bisa dilihat pada gambar 1.8.

Page 20: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Aplikasi ANDROID dgn Angular Mobile & mongoDB12

Gambar 1.7 Data No. 1 dan No. 2 dalam keadaan bisa di edit

Gambar 1.8 Mengubah beberapa data sekaligus

Page 21: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Bab I. Memahami AngularJS dan Kasusnya 13

Apabila data berhasil di update, maka akan tampil informasi berapa jumlah data yang di update ke database, dalam contoh ini ada 2 data, artinya kita baru saja mengedit/mengupdate lebih dari satu data sekaligus, itulah yang dimaksud dengan edit multiple data. Lihat gambar 1.9.

Gambar 1.9 Pesan edit multiple data telah berhasil di update

1.3 Teknik Delete Multiple DataUntuk delete multiple data, kita akan menggunakan data yang telah kita insert-kan sebelumnya pada sub-bab 1.1. Oke langsung saja, buat file baru dengan nama delete.html di folder htdocs/bab1, adapun isi kodenya sebagai berikut:

Skrip delete.html<!DOCTYPE html><html data-ng-app=”bab1”>

Page 22: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Aplikasi ANDROID dgn Angular Mobile & mongoDB14

<head><meta charset=”utf-8” /><title>Delete Multiple Data</title><script src=”./vendor/angular/angular.js”></script></head><body ng-controller=”MainController” >

<table><tr><td></td><td>No</td><td>Nama</td><td>Kelas</td></tr><tr data-ng-repeat=”(k,v) in data”><td><input type=”checkbox” data-ng-click=”check(v.siswaid)”></td><td>{{ $index +1 }}</td><td><input type=”text” data-ng-model=”v.nama” data-ng-if=”v.isedit”><p data-ng-if=”!v.isedit”>{{v.nama}}</p></td>

<td><input type=”text” data-ng-model=”v.kelas” data-ng-if=”v.isedit”><p data-ng-if=”!v.isedit”>{{v.kelas}}</p></td></tr></table><button data-ng-click=”delete()”>Delete</button>{{ pesan }}</body></html><script> var app = angular.module(‘bab1’, []);

app.controller(‘MainController’,function($scope,$http){ // set type data datadelete dengan array kosong $scope.datadelete = []; // fungsi mengambil data ke server $scope.getdata = function(){ $http.get(‘http://localhost/bab1/server.php?action=get’).success(function(response){ $scope.data = response; $scope.$apply(); }); }; // init data $scope.getdata(); //ketika user klik checkbox $scope.check = function(siswaid){

Page 23: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Bab I. Memahami AngularJS dan Kasusnya 15

//buat variabel tmp bernilai true //ini digunakan untuk chek apakah sudah ada //siswa id di dalah array data delete //jika sudah ada delete array dengan splce dan set // tmp jadi false agar tidak di push

//(dimasukan ke dalam array) kembali di bawah var tmp = true; for(var i = 0; i < $scope.datadelete.length;i++){ if($scope.datadelete[i] == siswaid){ $scope.datadelete.splice(i); tmp = false; break; } } if(tmp)$scope.datadelete.push(siswaid); }; $scope.delete = function(){ //kirim data yang dihapus saja ke server $http.post(‘http://localhost/bab1/server.php?action=delete’,$scope.datadelete).success(function(response){ if(response > 0){ //munculkan list baru yang sudah berhasil di delete $scope.getdata(); //tampilkan pesan sukses $scope.pesan = response +’ Data telah berhasil dihapus’; $scope.$apply(); } }); } });</script>

Kemudian tambahkan kode baru di skrip server.php menjadi seperti berikut:

Skrip server.php (tambahan untuk hapus, perhatikan teks yang ditebalkan)<?php$hostname = “localhost”;$user = “root”;$pass = “”;$database = “bab1”;

$conn = mysql_connect($hostname,$user,$pass);if(!$conn) die (“gagal melakukan koneksi”);mysql_select_db($database,$conn) or die(“database tidak ditemukan”);

switch($_GET[‘action’]){ case ‘insert’ : $data = json_decode(file_get_contents(“php://input”));

Page 24: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Aplikasi ANDROID dgn Angular Mobile & mongoDB16

$i = 0; foreach($data as $k => $v){ $query = “INSERT INTO siswa(nama,kelas)

VALUES (‘”.$v->nama.”’,’”.$v->kelas.”’)”; mysql_query($query); $i++; }; echo json_encode($i); break;

case ‘get’ : $query = “SELECT * FROM siswa”; $sql = mysql_query($query); $data = array(); while($row=mysql_fetch_array($sql)) { $data[] = $row; }

echo json_encode($data); break;

case’update’ : $data = json_decode(file_get_contents(“php://input”)); $i = 0; foreach($data as $k => $v){ $query = “UPDATE siswa set nama = ‘”.$v->nama.”’ , kelas = ‘”.$v->kelas.”’

where siswaid = ‘”.$v->siswaid.”’”; mysql_query($query); $i++; }; echo json_encode($i); break;

case’delete’ : $data = json_decode(file_get_contents(“php://input”)); $i = 0; foreach($data as $k => $v){ $query = “DELETE FROM siswa

where siswaid = ‘”.$v.”’”; mysql_query($query); $i++; }; echo json_encode($i); break;}

Selanjutnya, buka browser dan ketikkan http://localhost/bab1/delete.html, maka akan tampil data yang disertai checkBox di sebelan kiri datanya. Lihat

Page 25: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Bab I. Memahami AngularJS dan Kasusnya 17

gambar 1.10.

Gambar 1.10 Menampilkan data disertai checkBox di sebelah kirinya

Sekarang coba klik pada checkBox, misalnya akan menghapus 2 data dengan mencentang checkBox-nya (lihat lagi gambar 1.10), kemudian klik tombol Delete.

Apabila data berhasil di hapus, maka akan tampil informasi berapa jumlah data yang di hapus di database, dalam contoh ini ada 2 data, artinya kita baru saja menghapus lebih dari satu data sekaligus, itulah yang dimaksud dengan delete multiple data, maka sekarang data di tabel siswa sudah kosong. Lihat gambar 1.11.

Page 26: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Aplikasi ANDROID dgn Angular Mobile & mongoDB18

Gambar 1.11 Pesan delete multiple data telah berhasil

1.4 Teknik Filter DataKita bisa memfilter data pada saat kita ingin menampilkan data tertentu atau mengubah data tertentu sesuai dengan kriteria yang kita inginkan, kita cukup menambahkah filter:{expression} pada ng-repeat.

Oke langsung saja, buat file baru dengan nama filter1.html di folder htdocs/bab1, adapun isi kodenya sebagai berikut:

Skrip filter1.html<!DOCTYPE html><html data-ng-app=”bab1”><head><meta charset=”utf-8” /><title>Filter 1</title><script src=”./vendor/angular/angular.js”></script></head><body ng-controller=”MainController” > Filtering by <br>

Page 27: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Bab I. Memahami AngularJS dan Kasusnya 19

Cari nama <input type=”text” data-ng-model=”carinama”><br> Cari kelas <select data-ng-model=”carikelas”><option value=””></option><option value=”1”>1</option><option value=”2”>2</option></select><table><tr><td>Nama</td><td>Kelas</td></tr><tr data-ng-repeat=”(k,v) in data | filter:{nama : carinama,kelas : carikelas}”><td>{{ v.nama }}</td><td>{{ v.kelas }}</td></tr></table>

</body></html><script> angular.module(‘bab1’, [])

.controller(‘MainController’,function($scope,$http){ // fungsi mengambil data ke server $scope.getdata = function(){ $http.get(‘http://localhost/bab1/server.php?action=get’).success(function(response){ $scope.data = response; $scope.$apply(); }); }; // init data $scope.getdata();

});</script>

Selanjutnya, buka browser dan ketikkan http://localhost/bab1/filter1.html, maka akan tampil data yang disertai form input untuk mem-filter data berdasarkan Nama atau Kelas atau keduanya. Lihat gambar 1.12.

Page 28: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Aplikasi ANDROID dgn Angular Mobile & mongoDB20

Gambar 1.12 Menampilkan data disertai form untuk mem-filter data

Sekarang coba masukkan pada Cari nama: agung, maka data yang ditampilkan hanyalah data Nama yang ada agung saja. Lihat gambar 1.13.

Page 29: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Bab I. Memahami AngularJS dan Kasusnya 21

Gambar 1.13 Memfilter data berdasarkan nama

Pada gambar 1.13 terlihat data Agung Julisman Kelas 1 dan Agung Setiabudi Kelas 2. Kemudian coba filter lagi berdasarkan Cari kelas, silahkan pilih kelas yang di-inginkan, misalnya Kelas 1, maka sekarang yang tampil hanya Agung Julisman saja. Lihat gambar 1.14.

Page 30: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Aplikasi ANDROID dgn Angular Mobile & mongoDB22

Gambar 1.14 Memfilter data berdasarkan nama dan kelas

Pada skrip filter1.html yang perlu diperhatikan adalah kode:<tr data-ng-repeat=”(k,v) in data | filter:{nama : carinama,kelas : carikelas}”>

Karena pada kode tersebut, kita menambahkan filter pada saat ng-repeat, kita memfilter nama dengan carinama dan kelas dengan carikelas.

Kemudian pada kode:<input type=”text” data-ng-model=”carinama”>

Pada input tersebut, kita memberi model carinama yang nantinya otomatis akan masuk ke dalam filter yang kita buat, begitu juga dengan filter kelas. Kita juga bisa melakukan filter tanpa perlu mendefinisikan field mana yang akan kita berlakukan filter, caranya dengan mengubah ng-repeat menjadi seperti berikut:

Page 31: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Bab I. Memahami AngularJS dan Kasusnya 23

<tr data-ng-repeat=”(k,v) in data | filter:carinama”>

Dengan kode seperti itu, maka ketika kita memasukkan data didalam form input cari nama, filter akan berlaku untuk semua field, baik nama maupun kelas.

1.5 Ng-keypressPada contoh kasus berikutnya, kita ingin ketika kita melakukan event Enter pada form input, kita bisa memanggil fungsi dan melakukan sesuatu.

Untuk mempraktekkannya, buatlah sebuah file dengan nama enter.html di folder htdocs/bab1 yang isi kodenya sebagai berikut:

Skrip enter.html<!DOCTYPE html><html data-ng-app=”bab1”><head><meta charset=”utf-8” /><title>Enter</title><script src=”./vendor/angular/angular.js”></script></head><body ng-controller=”MainController” ><input type=”text” data-ng-keypress=”enterFn()” data-ng-model=”texts”></body></html><script> angular.module(‘bab1’, []) .controller(‘MainController’,function($scope){ $scope.enterFn = function(){ console.log($scope.texts); } });</script>

Selanjutnya, buka browser dan ketikkan http://localhost/bab1/enter.html, maka akan tampil sebuah form input. Lihat gambar 1.15.

Untuk lebih jelasnya, Anda bisa membuka dulu Developer Tools, kalau di browser Google Chrome melalui menu More tools > Developer tools.

Oke, sekarang coba inputkan apapun didalam form input, maka fungsi kepress akan langsug memanggil fungsi enterFn, lalu bagaimana jika kita ingin ketika user menekan event enter, baru kita bisa melakukan sesuatu didalam fungsi enterFn? Kita hanya perlu menambahkan $event pada ng-keypress dan parameter clickEvent pada fungsi enterFn. Untuk itu, edit file enter.html menjadi seperti berikut:

Page 32: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Aplikasi ANDROID dgn Angular Mobile & mongoDB24

Gambar 1.15 Apapun yang di-inputkan akan langsung memanggil fungsi enterFn

Skrip enter.html <!DOCTYPE html><html data-ng-app=”bab1”><head><meta charset=”utf-8” /><title>Enter</title><script src=”./vendor/angular/angular.js”></script></head><body ng-controller=”MainController” >

<input type=”text” data-ng-keypress=”enterFn($event)”></body></html><script> angular.module(‘bab1’, []) .controller(‘MainController’,function($scope){

Page 33: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Bab I. Memahami AngularJS dan Kasusnya 25

$scope.enterFn = function(clickEvent){ if(clickEvent.keyCode == ‘13’){ //lakukan sesuatu ketika user menekan enter alert(‘Hai, Anda telah menekan enter!’); } } });</script>

Jalankan lagi http://localhost/bab1/enter.html, lalu pada form input, isikan angka 3 dan 4, maka alert (peringatan) tidak tampil dan alert akan tampil ketika user menekan tombol Enter di keyboard. Lihat gambar 1.16.

Gambar 1.16 Alert tampil ketika tombol Enter di keyboard ditekan

1.6 Ng-cloakDirective ng-cloak berguna untuk menyembunyikan seluruh isi angularjs sebelum app angular telah di-load seluruhnya. Sebagai contoh, ketika penulis mengerjakan sebuah aplikasi pada saat Angular sedang me-load data tampilannya seperti pada gambar 1.17.

Page 34: Bikin Aplikasi ANDROID dengan Angular Mobile & mongoDB · iii KATA PENGANTAR Pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile

Aplikasi ANDROID dgn Angular Mobile & mongoDB26

Gambar 1.17 Tampilan aplikasi yang dibuat tanpa ng-cloak

Pada gambar 1.17 terlihat {{ }} sesaat sebelum data muncul, hal ini disebabkan karena Angular belum selesai di-load secara keseluruhan, meski hanya tampil beberapa detik saja, tampilan tersebut cukup menggangu. Maka dari itu, kita tambahkan ng-cloak dan style pada skrip kita, contohnya:

<style type=”text/css”> [ng\:cloak], [ng-cloak], [data-ng-cloak],

[x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } .loading-visible{ display:block; } .loading-invisible{ display:none; }</style><body ng-controller=”MainController” class=”ng-cloak”>

Dengan menambahkan ng-cloak, saat Angular belum selesai me-load data secara keseluruhan, maka tampilannya akan disembunyikan (hidden) dulu. Dan kalau sudah selesai di-load secara keseluruhan baru ditampilkan. Lihat gambar 1.18.

Gambar 1.18 Tampilan aplikasi yang dibuat dengan menyertakan ng-cloak