Membuat Aplikasi Login Android dan IOS Dengan IONIC 3

Leave a Comment / By /
  1. Pastikan anda sudah menginstall serta konfigurasi NPM serta Node.js.
  2. Pertama tama, ketik ionic start LoginApp

3. Pilih blank .

4. input y

5. input n

6. Apabila proses instalasi sudah selesai, masuk ke folder anda dengan mengetik cd LoginApp

7. Untuk mengecek apakah sudah berhasil, ketik ionic serve -ctl

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.

9. Kemudian buka folder project LoginApp dengan IDE anda, pada tutorial ini menggunakan Visual Code.

10. Lalu masuk ke src/pages/login/login.html

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

13. Lalu masuk ke src/providers/auth/auth.ts

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

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

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

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

Scroll to Top