- Pastikan anda sudah menginstall serta konfigurasi NPM serta Node.js.
- Pertama tama, ketik ionic start LoginApp
![](https://www.rumahcoding.co.id/wp-content/uploads/2019/03/image-4.png)
3. Pilih blank .
![](https://www.rumahcoding.co.id/wp-content/uploads/2019/03/image-5.png)
4. input y
![](https://www.rumahcoding.co.id/wp-content/uploads/2019/03/image-6.png)
5. input n
![](https://www.rumahcoding.co.id/wp-content/uploads/2019/03/image-7.png)
6. Apabila proses instalasi sudah selesai, masuk ke folder anda dengan mengetik cd LoginApp
![](https://www.rumahcoding.co.id/wp-content/uploads/2019/03/image-8.png)
7. Untuk mengecek apakah sudah berhasil, ketik ionic serve -ctl
![](https://www.rumahcoding.co.id/wp-content/uploads/2019/03/image-10.png)
![](https://www.rumahcoding.co.id/wp-content/uploads/2019/03/image-12-1024x576.png)
8. Sekarang kita akan membuat 2 buah halaman yaitu login dan home dengan megetik ionic generate page login untuk halaman login, serta
ionic generate page home untuk halaman home.
![](https://www.rumahcoding.co.id/wp-content/uploads/2019/03/image-13.png)
![](https://www.rumahcoding.co.id/wp-content/uploads/2019/03/image-14.png)
9. Kemudian buka folder project LoginApp dengan IDE anda, pada tutorial ini menggunakan Visual Code.
![](https://www.rumahcoding.co.id/wp-content/uploads/2019/03/image-15-1024x576.png)
10. Lalu masuk ke src/pages/login/login.html
![](https://www.rumahcoding.co.id/wp-content/uploads/2019/03/image-16.png)
11. Masukkan code berikut , ubah code aslinya yang ada pada gambar di atas
<ion-content padding>
<ion-list text-center>
<br>
<H3> Welcome </H3>
<br>
<ion-item>
<ion-label color="primary" >Username</ion-label>
<ion-input type="email" [(ngModel)]="credentials.username" ></ion-input>
</ion-item>
<br>
<ion-item>
<ion-label color="primary" >Password</ion-label>
<ion-input type="password" [(ngModel)]="credentials.password" ></ion-input>
</ion-item>
<br>
<br>
<button ion-button round center (click)="login()">Login</button>
<br>
<p text-center tappable> Forget Password </p>
<p text-center tappable (click)="register()" > Don't have account? Register </p>
</ion-list>
</ion-content>
12. Sekarang kita akan membuat Auth Provider untuk menangani login, ketik ionic generate provider auth
![](https://www.rumahcoding.co.id/wp-content/uploads/2019/03/image-17.png)
13. Lalu masuk ke src/providers/auth/auth.ts
![](https://www.rumahcoding.co.id/wp-content/uploads/2019/03/image-18.png)
14. Masukkan code berikut , ubah code aslinya yang ada pada gambar di atas
import { Injectable } from '@angular/core';
@Injectable()
export class AuthProvider {
constructor() {
// console.log("belum dipake");
}
public login(credentials) {
return new Promise((resolve, reject) => {
if (credentials.username == "" || credentials.password == "") {
reject("Username / password harus diisi")
} else if (credentials.username == "admin" && credentials.password=="admin") {
localStorage.setItem("isLogin", "true");
resolve("Berhasil Login")
} else {
reject("Username / password salah");
}
})
}
public logOut() {
localStorage.setItem("isLogin", "false");
}
}
15. Setelah login.html dan auth.ts diubah, sekarang kita akan mengubah
src/pages/login/login.ts
![](https://www.rumahcoding.co.id/wp-content/uploads/2019/03/image-19.png)
16. Masukkan code berikut , ubah code aslinya yang ada pada gambar di atas
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import { HomePage } from '../home/home';
// import auth provider
import { AuthProvider } from '../../providers/auth/auth';
@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
credentials: any = {
username: "",
password: ""
}
constructor(public navCtrl: NavController, public navParams: NavParams,
public auth: AuthProvider, public toastCtrl: ToastController) {}
ionViewDidLoad() {
//check apakah sudah dalam kondisi login?
let status = localStorage.getItem("isLogin");
if (status == "true") {
this.navCtrl.setRoot(HomePage);
}
}
login() {
this.auth.login(this.credentials).then((resp) => {
let toast = this.toastCtrl.create({
message: "Berhasil",
duration: 3000,
position: 'bottom'
});
toast.present();
this.navCtrl.setRoot(HomePage);
}).catch((err) => {
let toast = this.toastCtrl.create({
message: err,
duration: 2000,
position: 'bottom'
});
toast.present();
})
}
}
17. Lalu masuk ke src/pages/home/home.html
![](https://www.rumahcoding.co.id/wp-content/uploads/2019/03/image-20-1024x387.png)
18. Masukkan code berikut , ubah code aslinya yang ada pada gambar di atas
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
Selamat Datang
<br>
<br>
<button ion-button round (click)="logout()">Logout</button>
</ion-content>
19. Kemudian masuk ke src/pages/home/home.ts
![](https://www.rumahcoding.co.id/wp-content/uploads/2019/03/image-21-1024x446.png)
20. Masukkan code berikut , ubah code aslinya yang ada pada gambar di atas
import { AuthProvider } from './../../providers/auth/auth';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html',
providers: [AuthProvider]
})
export class HomePage {
constructor(public navCtrl: NavController, public auth: AuthProvider) {
}
logout() {
this.auth.logOut()
this.navCtrl.setRoot("LoginPage")
}
}
21. Sekarang buka cmd baru, lakukan cara di no 7
![](https://www.rumahcoding.co.id/wp-content/uploads/2019/03/image-22-1024x576.png)
![](https://www.rumahcoding.co.id/wp-content/uploads/2019/03/image-23-1024x576.png)
![](https://www.rumahcoding.co.id/wp-content/uploads/2019/03/image-24-1024x576.png)