Menyelami

Framework

Edisi 1

Ricko Virnanda
Daftar Isi

Daftar Isi ......................................................................................................................................... 2

BAB I Instalisasi ............................................................................................................................. 3
1. Install Node JS ..................................................................................................................... 3
1.1 Windows ....................................................................................................................... 3
2. Install JDK dan Android Studio ........................................................................................... 3
2.1 Install JDK .................................................................................................................... 3
2.2 Install Andoid Studio .................................................................................................... 4
3. Install Cordova ..................................................................................................................... 4
4. Install Ionic .......................................................................................................................... 5
BAB II Memulai Pembuatan Aplikasi ............................................................................................ 6
1. Memulai Ionic ...................................................................................................................... 6
2. Menjelajah File Ionic ........................................................................................................... 8
BAB III Page dan Basic Layout.................................................................................................... 10
1. Page .................................................................................................................................... 10
2. Inputs atau Form Element .................................................................................................. 14
3. Alert ................................................................................................................................... 16
BAB IV Navigation & Storage ..................................................................................................... 20
1. Memasang Navigasi Aplikasi ............................................................................................ 20
2. Menggunakan Storage Untuk Menyimpan Data................................................................ 23
2.1 Instalisasi Storage ........................................................................................................... 23
2.2 Storage Untuk form Register............................................................................................... 24
BAB I
Instalisasi

Sebelum kita memulai pengembangan aplikasi, maka kita perlu melakukan instalisasi terlebih
dahulu. Nah, mari kita lakukan langkah-langkahnya sampai selesai. Good luck..

1. Install Node JS
Apa itu Node JS? Node JS adalah server side scripting berbasiskan bahasa pemrograman
Javascript. Dengan Node JS ini kita dapat membuat berbagai aplikasi layanan web
maupun platform lainnya menggunakan Javascript. Didalam Node JS terdapat NPM atau
Node Package Manager, yaitu paket library untuk memudahkan pengembangan program
yang akan kita buat. Namun kali ini yang akan saya berikan yaitu instalisasi pada
platform windows, mungkin akan menyusul untuk platform Mac OS, atau linux. Hehe..

1.1 Windows
Untuk instalisasi windows kalian dapat mendownload installer Node JS di
https://nodejs.org/en/download/. Jalankan Installernya dan ikuti panduannya
seperti menginstall aplikasi windows lainnya.

Cek hasil instalisasi dengan Command Prompt :

Node JS :

node –v
NPM :

npm –v

Apabila nomor versi muncul maka Node JS dan NPM sudah dapat digunakan.

2. Install JDK dan Android Studio

JDK dan Android Studio ini kita gunakan untuk export package android dan akan
membuild aplikasi android yang akan kita buat.

2.1 Install JDK

Untuk cek apakah JDK ada atau tidak, ketikan perintah berikut :

javac –version
Apabila nomor versi muncul maka jdk sudah terinstall.

Jika belum, maka download di website resmi jdk yaitu buka pada halaman :
http://www.oracle.com/technetwork/java/javase/downloads/index.html.
Kemudian pilih Java SE Downloads , lalu pilihlah JDK. Kemudian akan muncul
tampilan dibawah ini, dan pilih Accept License Agreement, lalu klik link download
 sesuai jenis Sistem Operasi kalian.

Jika sudah terdownload maka jalankan installernya dan lakukan seperti instalasi
aplikasi windows lainnya.

2.2 Install Andoid Studio

Setelah instalisasi Android Studio selesai lalu, download instalisasi Android Studio
pada halaman https://developer.android.com/studio/index.html. Jika sudah
terdownload maka jalankan installernya dan lakukan seperti instalasi aplikasi
windows lainnya.

3. Install Cordova
Cordova adalah sebuah tools yang digunakan untuk membuild aplikasi Javascript ke
Aplikasi Andoid. Salah satu kelebihan Cordova ini yaitu dengan satu Code Aplikasi
Javascript dapat dijadikan aplikasi ke antar platfrom, bisa Android, IOS, Windows
Phone, dll. Buka aplikasi Terminal atau Command Prompt, lalu ketikkan perintah berikut
:
 npm install -g cordova

4. Install Ionic
Ionic adalah sebuah framework Javascript yang kita gunakan untuk memudahkan
pembuatan aplikasi android yang akan kita buat. Didalam Ionic Framework terdapat tools
code yang sudah dapat instan kita gunakan dalam bentuk HTML, style atau CSS, dan
library Javascript. Untuk Action Script, Ionic menggunakan framework Angular, kalian
dapat pelajari Angular ini pada halaman https://angular.io/.

Buka aplikasi Terminal atau Command Prompt, lalu ketikkan perintah berikut :

npm install -g cordova ionic

Setelah seluruh penginstalan aplikasi selesai maka kita akan siap untuk melakukan coding atau
developing aplikasi. Penjelasan pembuatan aplikasinya akan saya jelaskan pada Bab selanjutnya,
semangat.. :D
BAB II
Memulai Pembuatan Aplikasi

Setelah kalian melakukan instalisasi maka kita akan langsung melakukan pembuatan aplikasi.
Nah, apabila kalian belum menyelesaikan instalisasi maka saya tidak mensarankan untuk
langsung lanjut dibagian ini.

Seperti yang kalian tahu sendiri, aplikasi yang akan kita buat ini berbasis pada Web atau hasil
akhirnya adalah Hybrid Apps. Berbeda dengan Native Apps, yang dikembangkan pada bahasa
dasar yang digunakan oleh masing-masing platform, misalnya Android menggunakan Java atau
IOS menggunakan Swift, Hybrid Apps ini kita bersih menggunakan Javascript. Pada Ionic yang
kita gunakan ini menggunakan Angular dan Angular ini menggunakan bahasa Typescript. Nah,
pasti bingung apa lagi itu Typescript ? hehe.. Typescript adalah bahasa pemrograman yang mana
memenuhi standar ECMAScript 6 syntax dan mendukung bahasa Javascript, namun bedanya
pada Typescript ini dapat kita gunakan prinsip OOP(Object Oriented Programming) seperti C++
dan Java sehingga mudah kita gunakan sesuai prinsip OOP yaitu mengurangi duplikasi code
memudahkan integrasi code, pembungkusan, abstraksi, penurunan sifat, dan lain-lain banyak
sekali. Namun, pada tutorial kali ini saya tidak akan berpanjang lebar mengenai Typescript, saya
akan lebih fokus pada praktis pembuatan aplikasi menggunakan Ionic, Okey..

1. Memulai Ionic
Ionic menyediakan berbagai template untuk kita melakukan starting pembuatan aplikasi.

Dari gambar diatas merupakan beberapa template starting Ionic, yaitu seperti blank, tabs,
atau menu sesuai kebutuhan yang ada. Namun untuk lebih gampangnya kita gunakan tabs
untuk permulaan dan kebanyakan kebutuhan aplikasi. Buka aplikasi Terminal atau
Command Prompt, lalu ketikkan perintah berikut :

ionic start MyApps tabs

Pada command diatas ionic start berarti perintah untuk membuat direktori dan folder
proyek Ionic, MyApps berarti nama proyek yang akan kita buat dan tabs adalah tipe atau
jenis default tampilan yang akan kita buat.
Jika Terminal atau Command Prompt memberikan pertanyaan “Would you like to
integrate your new app with Cordova to target native iOS and Android?”, maka pilih
“Y”.

Maka kita sudah memberikan perintah untuk menjadikan aplikasi kita untuk terhubung ke
IOS atau Android.

Kemudian jika muncul pertanyaan lagi “Install the free Ionic Pro SDK and connect your
app?”, maka pilih “n” karena kita tidak membutuhkan Ionic Pro SDK.

Kemudian jika proses Terminal tadi sudah selesai maka masuk ke direktori proyek
tersebut pada Terminal atau Command Prompt, ketikkan perintah :

cd MyApps
Kemudian jalankan aplikasinya dengan perintah :

ionic serve
Jika berhasil maka akan otomatis terbuka pada browser tampilan seperti ini :

Dan pada Command Prompt atau Terminal akan muncul status seperti berikut :
 Jika muncul seperti diatas, berarti aplikasi yang kita buat sudah dapat running,
selanjutnya kita akan kembangkan ke tahap berikutnya.

2. Menjelajah File Ionic

Didalam file Ionic terdapat beberapa bagian-bagian yang perlu kita ketahui terkait
tampilan atau style, action, module, page, dll.

Pada bagian diatas yang saya lingkari adalah source folder yang mana akan kita lakukan
pengkodean.

Ada folder app, assets, pages, dan theme.

Pada folder app ini sebagai main action atau sebagai starter. Terdapat juga untuk
konfigurasi modul yaitu pada app.module.ts, kemudian konfigurasi style global pada
app.css, selain dari pada 2 hal tersebut jarang kita gunakan kedepannya.

Kemudian ada folder assets yaitu bisa gunakan untuk menyimpan berbagai gambar,
fonts, atau plugin yang berguna untuk pengembangan aplikasi.

Selanjutnya folder pages merupakan tempat-tempat page atau halaman aplikasi yang
akan kita gunakan.

Kemudian folder theme digunakan untuk kita menyusun tema yang digunakan untuk
mempercantik tampilan. Kemudian file index.html yaitu file html utama, nantinya ini
bisa kita gunakan untuk men-include plugin-plugin html atau css.

Selain dari pada bagian-bagian diatas, nantinya akan kita bahas pada bab selanjutnya
kegunaannya, namun pengembangan utamanya tidak terlepas dari folder-folder diatas.
BAB III
Page dan Basic Layout

Setelah kita memahami basic struktur dari Ionic, nah kita langsung menuju pada pembuatan
page, dan membuat basic layout.

Pada dasarnya pengaturan page utama dapat kita ubah melalu src/app/app.component.ts

Diatas merupakan pengaturan defaultnya untuk page yang tampil, artinya root page atau main
page yang digunakan adalah TabsPage. Pada gambar diatas yang dibulatkan itu adalah file yang
di include kan ke dalam file ini untuk dijadikan root page dan pada garis merah diatas merupakan
konfigurasinya, atau menset variabel rootPage yaitu adalah TabsPage.

Untuk bagian kali ini saya akan membuat sebuah form Login dan didalamnya akan diisi basic
layout form, button, list dll.

1. Page
Pada kali ini akan kita mulai dari menambahkan page, untuk membuat page ketikkan
perintah berikut pada Command Prompt :

ionic generate page Login

Setelah itu akan otomatis tergenerate page Login. Kemudian buka file app.module.ts pada
text editor anda, src/app/app.module.ts. Berikut adalah code file tersebut :
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';

import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { LoginPage } from '../pages/login/login';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
LoginPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
LoginPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
Kemudian tambahkan kedalam app.module.ts anda sesuai code diatas yang berwarna
merah.

Jika sudah, maka langkah selanjutnya adalah menjadikan LoginPage sebagai page utama
saat aplikasi dijalankan.

Buka file app.component.ts pada text editor anda, berikut adalah codenya :

import { Component } from '@angular/core';

import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

// import { TabsPage } from '../pages/tabs/tabs';

import { LoginPage } from '../pages/login/login';

@Component({
templateUrl: 'app.html'
})
export class MyApp {
// rootPage:any = TabPage;

rootPage:any = LoginPage;

constructor(platform: Platform, statusBar: StatusBar, splashScreen:

SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}
}
Kemudian tambahkan kedalam app.component.ts anda sesuai code diatas yang berwarna
merah.

Setelah langkah diatas dilakukan, artinya kita telah menjadikan halaman LoginPage
sebagai page utama saat pertama kali dibuka.

Setelah itu buka browser kembali yang sudah di run Ionic app pada bab sebelumnya.
Maka hasilnya akan seperti berikut ini :
Langkah selanjutnya adalah menambahkan komponen-komponen dasar pada aplikasi. Namun
sebelumnya kita perlu menjadikan jendela browser seperti mobile device. Jika menggunakan
chrome maka akan lebih mudah lagi, dengan cara inspect element kemudian klik button toogle
device toolbar dan kemudian aturlah tampilannya sesuai yang kita inginkan. Contoh yang saya
gunakan adalah dibawah ini :
2. Inputs atau Form Element
Bukalah pada teks editor anda src/pages/login/login.html, berikut codingnya :

<ion-header>
</ion-header>

<ion-content padding>
<ion-list>
<img ion-img src="assets/imgs/sample-logo.jpg">

<ion-item>
<ion-label floating>Username</ion-label>
<ion-input type="text"></ion-input>
</ion-item>

<ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="password"></ion-input>
</ion-item>

<button ion-button color="primary" block >LOGIN</button>

 <p text-center>Belum Punya Akun ?</p>
<button ion-button color="danger" clear block>Daftar</button>

</ion-list>
</ion-content>
Kemudian tambahkan pada file login.html, ubah seperti diatas. Pada coding diatas
terdapat tag img, maka jangan lupa sebelum coding anda menambahkan sebuah sample
logo dan masukkan file tersebut kedalam direktori src/assets/imgs.

Pada coding diatas terdapat tag ion-list yaitu untuk menjadikan satu blok element
tersebut sebagai list dengan style yang telah diatur pada framework Ionic. Kemudian
sama pula pada ion-item yang berarti item-item dari element list.

Kemudian bukalah pada teks editor anda src/pages/login/login.scss, berikut

codingnya :

page-login {
ion-list{
padding-top:2rem;
text-align:center;
p{
color:#666;
}

img{
height:200px;
}
}
}
Kemudian tambahkan pada file login.scss, ubah seperti diatas. Pada file diatas
menggunakan SASS CSS sebagai stylenya, kemudian saya buat bersarang sesuai dengan
tingkatan tag tiap-tiap element htmlnya.

Maka hasil akhirnya seperti berikut gambar dibawah ini :

3. Alert
Alert merupakan sebuah element yang penting untuk memberikan sebuah peringatan atau
sebuah pesan. Pada dasarnya Alert Ionic sama saja dengan Alert pada Javascript, namun
kustomisasinya lebih bagus lagi.

Berikut ini Codingnya :

<ion-header>

</ion-header>

<ion-content padding>
<ion-list>
<img ion-img src="assets/imgs/sample-logo.jpg">

<ion-item>
<ion-label floating>Username</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
 <ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="password"></ion-input>
</ion-item>

<button ion-button color="primary" block

(click)="showAlert()">LOGIN</button>

<p text-center>Belum Punya Akun ?</p>

<button ion-button color="danger" clear block>Daftar</button>

</ion-list>
</ion-content>
Buka lagi file login.html, ubah dan tambahkan blok merah yang ada diatas ini.

Kemudian bukalah pada teks editor anda src/pages/login/login.ts

import { Component } from '@angular/core';

import { IonicPage, NavController, NavParams,AlertController } from 'ionic-
angular';

/**
* Generated class for the LoginPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/

@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {

constructor(
public navCtrl: NavController,
public navParams: NavParams,
public alertCtrl: AlertController ) {
}

ionViewDidLoad() {
console.log('ionViewDidLoad LoginPage');
}

showAlert() {
let alert = this.alertCtrl.create({
title: 'Confirmation!',
subTitle: 'Yes, Login Success',
buttons: ['OK']
});
alert.present();
}
 }
Kemudian pada file login.ts, ubah dan tambahkan blok merah yang ada diatas ini.

Pada yang ditambahkan pada file login.html tersebut adalah (click)=”showAlert()”,

merupakan sebuah pemanggilan event apabila di klik kemudian akan otomatis
memanggil fungsi showAlert() pada file login.ts sebagai actionnya.

Pada file login.ts tersebut terdapat AlertController yang mana AlertController

merupakan sebuah interface objek alert yang disediakan oleh ionic. Kemudian pada
fungsi showAlert() merupakan konfigurasi Alert yang mau ditampilkan, dari tittlenya,
subtitle maupun button. Kemudian pada alert.present(); adalah sebuah fungsi untuk
menampilkan Alert apabila fungsi showAlert() dipanggil.

Berikut adalah hasil dari alert yang kita buat tadi.

Oke sampai jumpa lagi kawan di bab selanjutnya.. :D

Latihan

Buatlah halaman register seperti pada tutorial pada bab ini. Berikut adalah contohnya

Lanjutkan ke bab selanjutnya jika sudah membuat form register seperti diatas 
BAB IV
Navigation & Storage

Setelah kita memahami bagaimana pembuatan konten ionic sederhana melalui form login dan
register. Kita akan melanjukan ke tahap Navigasi dan Penyimpanan. Pada kali ini kalian harus
menyelesaikan dahulu tutorial pada bab sebelumnya untuk melanjut kesini. Oke lets kita mulai

1. Memasang Navigasi Aplikasi

Sekarang kita akan memasang navigasi pada login page agar bisa terhubung dengan
register page atau sebaliknya. Penggunaan navigasi ini sama saja dengan tag link html
sebenarnya yang menghubungkan antar page. Namun, berbeda dengan HTML, ionic
memindahkan page tanpa refresh konten ulang.

Buka file login.ts pada text editor yang kalian miliki, kemudian tambahkan baris code
pada baris yang berwarna merah dibawah ini

import { Component } from '@angular/core';

import { IonicPage, NavController, NavParams,AlertController } from 'ionic-
angular';
import { RegisterPage } from '../register/register';

/**
* Generated class for the LoginPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/

@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {

constructor(
public navCtrl: NavController,
public navParams: NavParams,
public alertCtrl: AlertController) {
}

ionViewDidLoad() {
console.log('ionViewDidLoad LoginPage');
}

showAlert() {
let alert = this.alertCtrl.create({
title: 'Confirmation!',
subTitle: 'Yes, Login Success',
buttons: ['OK']
 });
alert.present();
}
gotoRegister()
{
this.navCtrl.push(RegisterPage);
}
}
Sip, lanjut ketik baris kode diatas dengan hati-hati.

Pada coding diatas pertama kita men-inculde kan atau import file register page sesuai
dengan letak dibawah setting Ionic.

Kemudian pada fungsi gotoRegister() kita menggunakan objek class dari Navigation
Controller atau kita inisialkan dengan navCtrl dan menggunakan method push() artinya
kita akan melakukan push page ke page Register.

Selanjutnya kalian buka file login.html , kemudian tambahkan bagian yang berwarna
merah.

<ion-header>

</ion-header>

<ion-content padding>
<ion-list>
<img ion-img src="assets/imgs/sample-logo.jpg">

<ion-item>
<ion-label floating>Username</ion-label>
<ion-input type="text"></ion-input>
</ion-item>

<ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="password"></ion-input>
</ion-item>

<button ion-button color="primary" block

(click)="showAlert()">LOGIN</button>
<p text-center>Belum Punya Akun ?</p>
<button ion-button color="danger" clear block
(click)="gotoRegister()" >Daftar</button>

</ion-list>
</ion-content>
(click)=””
Merupakan event atau action listener yang kita dapat gunakan, selain itu seperti (focus),
(active) dll. Namun pada event diatas berarti ketika di click maka akan melakukan
sebuah perintah, maka diatas jika di click maka akan menjalankan fungsi gotoRegister()
pada file login.ts .

Kemudian kita akan memberikan navigasi pada Page register, berarti navigasi yang
dilakukan bisa dari register ke login setelah sebelumnya login ke registrer.

Pertama buka file register.ts pada direktori pages/register , kemudian lakukan seperti
halnya page login sebelumnya, atau seperti dibawah ini.

import { Component } from '@angular/core';

import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { LoginPage } from '../login/login';

/**
* Generated class for the RegisterPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/

@IonicPage()
@Component({
selector: 'page-register',
templateUrl: 'register.html',
})
export class RegisterPage {

constructor(public navCtrl: NavController, public navParams: NavParams) {

}

ionViewDidLoad() {
console.log('ionViewDidLoad RegisterPage');
}
gotoLogin()
{
this.navCtrl.push(LoginPage);
}
}

Kemudian buka file register.html pada direktori yang sama dan lakukan hal yang
sebelumnya kita lakukan di login.html.

<ion-header>

</ion-header>
 <ion-content padding>
<ion-list>
<img ion-img src="assets/imgs/sample-logo.jpg">
<h3>Daftar</h3>
<ion-item>
<ion-label floating>Nama Lengkap</ion-label>
<ion-input type="text”></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Email</ion-label>
<ion-input type="email"> </ion-input>
</ion-item>
<ion-item>
<ion-label floating>Username</ion-label>
<ion-input type="text"></ion-input>
</ion-item>

<ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="password"></ion-input>
</ion-item>

<button ion-button color="primary" block>Submit</button>

<p text-center>Sudah Punya Akun ?</p>
<button ion-button color="danger" clear block
(click)="gotoLogin()">Login</button>

</ion-list>
</ion-content>

Setelah melakukan hal diatas maka kita sudah dapat melakukan pindah dari page satu ke
yang lainnya dengan cara push, kemudian adalagi dengan cara pop.

2. Menggunakan Storage Untuk Menyimpan Data

Kali ini kita akan mempelajari bagaimana menyimpan data kedalam aplikasi ionic dan
menggunakannya sebagai local storage.

2.1 Instalisasi Storage

Pertama ketikan perintah dibawah ini di terminal atau command prompt kalian :

ionic cordova plugin add cordova-sqlite-storage

Kemudian ketik ini lagi di command prompt atau terminal

npm install --save @ionic/storage

Kemudian buka file app.modules.ts pada direktori src/app/app.modules.ts tambahkan

konfigurasi berikut pada baris yang berwarna merah :
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';

import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { LoginPage } from '../pages/login/login';
import { RegisterPage } from '../pages/register/register';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';
import { IonicStorageModule } from '@ionic/storage';

@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
LoginPage,
RegisterPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
LoginPage,
RegisterPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

2.2 Storage Untuk form Register

Buka file register.ts pada page register pages/register, dan tambahkan seperti berikut
ini :
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { LoginPage } from '../login/login';
import { Storage } from '@ionic/storage';

/**
* Generated class for the RegisterPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/

@IonicPage()
@Component({
selector: 'page-register',
templateUrl: 'register.html',
})
export class RegisterPage {
namaLengkap:any;
email:any;
username:any;
password:any;

constructor(
public navCtrl: NavController,
public navParams: NavParams,
public storage:Storage) {
this.namaLengkap = "";
this.email = "";
this.username = "";
this.password = "";
}

ionViewDidLoad() {
console.log('ionViewDidLoad RegisterPage');
}
gotoLogin()
{
this.navCtrl.push(LoginPage);
}

submit()
{
// fill storage
this.storage.set('namaLengkap',this.namaLengkap);
this.storage.set('email',this.email);
this.storage.set('password',this.password);
this.storage.set('username',this.username);

console.log(this.namaLengkap);
console.log(this.email);
console.log(this.username);
console.log(this.password);
}
 viewData()
{
this.storage.get('namaLengkap').then(
(namalengkap) =>
{
console.log('Nama : '+ namalengkap);
}
);
}}
Pada page diatas kita pertama membuat macam-macam variabel untuk data yang
diketikan di form register, seperti namalengkap, email, username, dan password.

Kemudian kita menambahkan library storage pada file import diatas yaitu storage.

Pada coding diatas, kita menggunakan objek storage, kemudian memanggil method set
untuk menyimpan sebuah data. Parameter pertama untuk nama key, kemudian yang
kedua untuk value atau isi data yang di isi pada key tersebut set(‘key’, value).
Contohnya pada this.storage.set('namaLengkap',this.namaLengkap); artinya kita
menyimpan data namaLengkap dengan key valuenya namaLengkap dan seterusnya.

Selanjutnya untuk mendapatkan data digunakan method get.

this.storage.get('namaLengkap').then(...
Dengan parameter nama key pada storage tersebut. Kemudian kita panggil lagi method
then artinya adalah event callback, apa yang dilakukan pasca eksekusi method get akan
mengumpan sesuatu hal dan kita dapat tangani dengan then ini.

(namalengkap) => pada baris fungsi disamping adalah parameter, setelah kita melakukan
callback, biasanya objek akan mengembalikan nilai, nah kita gunakan ini sebagai
parameter nilai untuk kita gunakan pada baris program dibawahnya. namaLengkap
digunakan untuk parameter dan programnya di bawahnya.

Setelah melakukan hal diatas, form pada register.html belum bisa terhubung ke
register.ts. untuk mengubungkannya untuk input data maka kita perlu menambahkan
ngModel. Mudahnya kita langsung ketikkan pada dibawah ini, tambahkan sesuai yang
berwarna merah

<ion-header>

</ion-header>

<ion-content padding>
<ion-list>
<img ion-img src="assets/imgs/sample-logo.jpg">
<h3>Daftar</h3>
<ion-item>
<ion-label floating>Nama Lengkap</ion-label>
<ion-input type="text" [(ngModel)]="namaLengkap"></ion-input>
</ion-item>
 <ion-item>
<ion-label floating>Email</ion-label>
<ion-input type="email" [(ngModel)]="email"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Username</ion-label>
<ion-input type="text" [(ngModel)]="username"></ion-input>
</ion-item>

<ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="password" [(ngModel)]="password"></ion-input>
</ion-item>

<button ion-button color="primary" block

(click)="submit()">Submit</button>
<p text-center>Sudah Punya Akun ?</p>
<button ion-button color="danger" clear block
(click)="gotoLogin()">Login</button>
<button ion-button color="primary" round block
(click)="viewData()">View Data</button>

</ion-list>
</ion-content>
Pada ngModel diatas kita samakan dengan nama variabel pada file register.ts.
Hasil koding pada tutorial ini.
Dan jika tutorial pada kali ini berhasil maka jika kita cek storagenya dapat kelihatan hasil seperti
berikut.

Selamat belajaarr...
Latihan

Buatlah autentikasi login menggunakan data yang telah terdaftar pada storage. Berikan status
jika berhasil atau tidaknya. Contoh seperti pada gambar dibawah ini
BAB V
HTTP GET & Cards

Pada bab kali ini kita akan mempelajari HTTP GET dan Cards. Jadi pada kali ini kita akan
membahas bagaimana melakukan koneksi ke server menggunakan HTTP dan kemudian server
mengirim data yang disebut dengan API (Application Interface) dalam bentuk data file JSON
(JavaScript Object Notation) dan barulah kita tampilkan di aplikasi android kita. Metode itu
disebut juga REST(Representational State Transfer) API.

Gambar 1. Metode REST API

1. HTTP GET
HTTP GET merupakan suatu metode pemanggilan data menggunakan protokol HTTP
dan kemudian data yang dipassing tertera pada url link tersebut. Pada intinya sih dengan
metode ini kita mengirim data ke server dengan passing parameter melalui link url.

Oke kita mulai pertama kali kita setting pada module terlebih dahulu, untuk
mengaktifkan modul HTTP yang telah disediakan oleh angular. Buka app.module.ts
pada folder app. Kemudian tambahkan seperti yang ditandai dengan warna merah.

import { NgModule, ErrorHandler } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HttpModule } from '@angular/http';

import { AboutPage } from '../pages/about/about';

import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { LoginPage } from '../pages/login/login';
import { RegisterPage } from '../pages/register/register';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';
import { IonicStorageModule } from '@ionic/storage';

@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
LoginPage,
RegisterPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot(),
HttpModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
LoginPage,
RegisterPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

Selanjutnya buka file app.components.ts pada folder app. Kemudian ganti root page
menjadi TabsPage. Atau ubah sesuai yang bertanda merah dibawah ini. Karena kita akan
menggunakan page home.

import { Component } from '@angular/core';

import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';

// import { LoginPage } from '../pages/login/login';

@Component({
templateUrl: 'app.html'
})
export class MyApp {
 rootPage:any = TabsPage;

constructor(platform: Platform, statusBar: StatusBar, splashScreen:

SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}
}

Jika sudah maka kita pasang modul HTTP tersebut pada file home.ts pada page home,
seperti yang bertanda merah berikut.

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

constructor(public navCtrl: NavController, public http: Http) {

}

}
Pada coding diatas mungkin kalian agak asing dengan import 'rxjs/add/operator/map';
. itu adalah Rxjs yang berfungsi untuk memetakan hasil JSON yang didapat dari
pemanggilan HTTP GET.

Kemudian pada file yang sama yaitu home.ts . Ketik lagi seperti dibawah ini.

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

posts: any;
 constructor(public navCtrl: NavController, public http: Http) {
this.posts = null;
let url = 'https://newsapi.org/v2/top-
headlines?country=id&apiKey=012f3abefd3f4fdfa926c69792c6357d';

this.http.get(url).map(res => res.json()).subscribe(

data => {
this.posts = data.articles;
},
err => {
console.log("Oops!");
});
}

Pada koding diatas kita akan koneksi ke url 'https://newsapi.org/v2/top-

headlines?country=id&apiKey=012f3abefd3f4fdfa926c69792c6357d

Yaitu url yang menyediakan API untuk berita.

Berikut adalah data yang didapatkan dari API tersebut.

 Pada koding this.http.get(url) Merupakan fungsi untuk memanggil url menggunakan
metode get. Kemudian pada .map(res => res.json()) merupakan fungsi yang kita
gunakan untuk membuat mapping data yang dihasilkan kedalam bentuk JSON. Dan
kemudian pada.subscribe( merupakan fungsi yang kita gunakan untuk menggunakan
data tadi yang didapat setelah respon dari GET.

2. Cards
Cards merupakan bentuk elemen yang menyediakan media gambar, tulisan dan judulnya
seperti layaknya sebuah kartu. Contoh penggunaan ini bisa kalian lihat pada post
Facebook atau Instagram kalian yang seolah-olah seperti kartu setiap postnya.

Pada Cards ini berisi konten-konten, seperti gambar, logo, link, header, text dan lain
sebagainya tergantung pada fungsinya.

Pada Bab ini kita akan menggunakan Cards untuk menampilkan konten lalu HTTP untuk
akses datanya dan data akan di sebarkan dan nantinya dalam bentuk Cards ini.

Oke kita langsung saja. Ketik koding berikut ini pada file home.html pada page home

<ion-header>
</ion-header>

<ion-content padding>
<!-- This is Content of cards -->
<ion-card *ngFor="let post of posts">

<ion-item>
<h2 text-wrap ><b> {{ post.title }} </b></h2>
<p> {{ post.author }} </p>
</ion-item>

<img src="{{post.urlToImage}}">

<ion-card-content>
<p>{{post.description}}</p>
</ion-card-content>

<ion-row>
<ion-col>
<button ion-button color="danger" icon-left clear small>
<div>{{post.source.name}}</div>
</button>
</ion-col>
<ion-col>
<a href="{{post.url}}" ion-button icon-left clear small>
<ion-icon name="open"></ion-icon>
<div>Lihat</div>
</a>
</ion-col>
<ion-col center text-center>
 <ion-note>
{{post.publishedAt.substr(0,10)}}
</ion-note>
</ion-col>
</ion-row>

</ion-card>
</ion-content>

Pada koding diatas dapat kita pelajari berikut

*ngFor="let post of posts" berfungsi untuk memanggil variable posts kemudian

diurai menggunakan proses looping for.

{{ post.author }} atau {{post.urlToImage}} dan yg lainnya merupakan cara

menampilkan isi dari variable tersebut. Namun cara diatas adalah bentuk dari penguraian
JSON. Dan penggunaan {{}} digunakan untuk menampilkan isi dari variabel.

Dan kemudian hasilnya adalah sebagai berikut :