- Pastikan anda sudah menginstall serta konfigurasi NPM serta Node.js.
- Pertama tama, ketik ionic start LoginApp
![](https://i0.wp.com/www.rumahcoding.co.id/wp-content/uploads/2019/03/image-4.png?resize=525%2C22&ssl=1)
3. Pilih blank .
![](https://i0.wp.com/www.rumahcoding.co.id/wp-content/uploads/2019/03/image-5.png?resize=750%2C60&ssl=1)
4. input y
![](https://i0.wp.com/www.rumahcoding.co.id/wp-content/uploads/2019/03/image-6.png?resize=750%2C45&ssl=1)
5. input n
![](https://i0.wp.com/www.rumahcoding.co.id/wp-content/uploads/2019/03/image-7.png?resize=672%2C60&ssl=1)
6. Apabila proses instalasi sudah selesai, masuk ke folder anda dengan mengetik cd LoginApp
![](https://i0.wp.com/www.rumahcoding.co.id/wp-content/uploads/2019/03/image-8.png?resize=409%2C21&ssl=1)
7. Untuk mengecek apakah sudah berhasil, ketik ionic serve -ctl
![](https://i0.wp.com/www.rumahcoding.co.id/wp-content/uploads/2019/03/image-10.png?resize=569%2C21&ssl=1)
![](https://i0.wp.com/www.rumahcoding.co.id/wp-content/uploads/2019/03/image-12-1024x576.png?resize=750%2C422&ssl=1)
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://i0.wp.com/www.rumahcoding.co.id/wp-content/uploads/2019/03/image-13.png?resize=668%2C22&ssl=1)
![](https://i0.wp.com/www.rumahcoding.co.id/wp-content/uploads/2019/03/image-14.png?resize=654%2C26&ssl=1)
9. Kemudian buka folder project LoginApp dengan IDE anda, pada tutorial ini menggunakan Visual Code.
![](https://i0.wp.com/www.rumahcoding.co.id/wp-content/uploads/2019/03/image-15-1024x576.png?resize=750%2C422&ssl=1)
10. Lalu masuk ke src/pages/login/login.html
![](https://i0.wp.com/www.rumahcoding.co.id/wp-content/uploads/2019/03/image-16.png?resize=750%2C302&ssl=1)
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://i0.wp.com/www.rumahcoding.co.id/wp-content/uploads/2019/03/image-17.png?resize=697%2C27&ssl=1)
13. Lalu masuk ke src/providers/auth/auth.ts
![](https://i0.wp.com/www.rumahcoding.co.id/wp-content/uploads/2019/03/image-18.png?resize=750%2C317&ssl=1)
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://i0.wp.com/www.rumahcoding.co.id/wp-content/uploads/2019/03/image-19.png?resize=750%2C392&ssl=1)
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://i0.wp.com/www.rumahcoding.co.id/wp-content/uploads/2019/03/image-20-1024x387.png?resize=750%2C283&ssl=1)
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://i0.wp.com/www.rumahcoding.co.id/wp-content/uploads/2019/03/image-21-1024x446.png?resize=750%2C327&ssl=1)
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://i0.wp.com/www.rumahcoding.co.id/wp-content/uploads/2019/03/image-22-1024x576.png?resize=750%2C422&ssl=1)
![](https://i0.wp.com/www.rumahcoding.co.id/wp-content/uploads/2019/03/image-23-1024x576.png?resize=750%2C422&ssl=1)
![](https://i0.wp.com/www.rumahcoding.co.id/wp-content/uploads/2019/03/image-24-1024x576.png?resize=750%2C422&ssl=1)
0 Comments