Bikin Aplikasi ANDROID dengan Angular Mobile & mongodb. Agung Julisman CV. LOKOMEDIA

Bikin Aplikasi ANDROID

dengan Angular Mobile & mongoDB

Agung Julisman

CV. LOKOMEDIA

Bikin Aplikasi ANDROID dengan Angular Mobile dan mongoDB Perpustakaan Nasional : Katalog Dalam Terbitan (KDT) Penulis : Agung Julisman Bikin 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 Hakim Cover : Subkhan Anshori Layout : Lukmanul Hakim

Diterbitkan pertama kali oleh : CV. LOKOMEDIA Jl. Jambon, Perum. Pesona Alam Hijau 2 Kav. B-4, Kricak Yogyakarta 55242. email : [email protected] website : 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.

ii

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]

iii

Halaman ini Sengaja Dikosongkan www.bukulokomedia.com

iv

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 v

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

vi

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

vii

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

viii

BAB I

Memahami AngularJS dan Kasusnya

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 Data Pada 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 <meta charset=”utf-8” /> Insert Multiple Data <script src=”./vendor/angular/angular.js”> {{ data }}
Nama
Kelas

{{ pesan }}

2

Aplikasi ANDROID dgn Angular Mobile & mongoDB

<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(); } }); } })

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

“localhost”; “root”; “”; “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”));

Bab I. Memahami AngularJS dan Kasusnya

3

}

$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.

4


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.


5

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.

6


Gambar 1.4 Pesan insert multiple data telah berhasil disimpan

1.2 Teknik Edit Multiple Data Untuk 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 <meta charset=”utf-8” /> Edit Multiple Data <script src=”./vendor/angular/angular.js”>


7

No Nama Kelas Action

{{ $index +1 }}
{{v.nama}}

{{v.kelas}}

{{ pesan }} <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?

8


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(); } }); } });

Kemudian tambahkan kode baru di skrip server.php menjadi seperti berikut: Skrip server.php (tambahan untuk edit/update, perhatikan teks tebal)
= = = =


$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);


9

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

10


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.


11

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

Gambar 1.8 Mengubah beberapa data sekaligus

12


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 Data Untuk delete multiple data, kita akan menggunakan data yang telah kita insertkan 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


13

<meta charset=”utf-8” /> Delete Multiple Data <script src=”./vendor/angular/angular.js”>

No Nama Kelas

{{ $index +1 }}
{{v.nama}}

{{v.kelas}}

{{ pesan }} <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){

14


//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(); } }); } });

Kemudian tambahkan kode baru di skrip server.php menjadi seperti berikut: Skrip server.php (tambahan untuk hapus, perhatikan teks yang ditebalkan)
= = = =


$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”));


15

$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

16


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.


17

Gambar 1.11 Pesan delete multiple data telah berhasil

1.4 Teknik Filter Data Kita 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 <meta charset=”utf-8” /> Filter 1 <script src=”./vendor/angular/angular.js”> Filtering by

18


Cari nama
Cari kelas <select data-ng-model=”carikelas”>

Nama Kelas

{{ v.nama }} {{ v.kelas }}

<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(); });

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.


19

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.

20


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.


21

Gambar 1.14 Memfilter data berdasarkan nama dan kelas

Pada skrip filter1.html yang perlu diperhatikan adalah kode:

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

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:

22


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-keypress Pada 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 <meta charset=”utf-8” /> Enter <script src=”./vendor/angular/angular.js”> <script> angular.module(‘bab1’, []) .controller(‘MainController’,function($scope){ $scope.enterFn = function(){ console.log($scope.texts); } });

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:


23

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

Skrip enter.html <meta charset=”utf-8” /> Enter <script src=”./vendor/angular/angular.js”> <script> angular.module(‘bab1’, []) .controller(‘MainController’,function($scope){

24


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

});

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-cloak Directive 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.


25

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; }

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

26


Bikin Aplikasi ANDROID dengan Angular Mobile & mongodb. Agung Julisman CV. LOKOMEDIA

Recommend Documents