Membuat Aplikasi Android (Absensi Siswa) Chapter 2

Bertemu lagi dengan saya, Tio Prasetyo dalam tulisan saya yang ke-2. Setelah sebelumnya pada chapter 1 saya membahas tentang bagaimana membuat sebuah file projek aplikasi yang berbasis android dan iOS. Pada chapter 2 ini saya akan membahas bagaimana cara membuat sebuah form login. Sebelumnya saya ingin mengingatkan kembali, bahwa tujuan dari tutorial ini adalah membuat sebuah aplikasi absensi siswa yang berbasis android dan iOS. Untuk itu perlu adanya sebuah akun atau id bagi untuk setiap user yang ingin menggunakan aplikasi ini nantinya. Dengan adanya id atau akun, maka perlu juga adanya sebuah form login agar user dapat membuat sebuah id atau akun pribadinya, serta masuk ke dalam id atau akun miliknya. Oke, langsung saja kita masuk dalam pembahasannya.

Membuat Page Login, Page Register dan Provider AuthService

            Sebenarnya di dalam file projek aplikasi yang telah kita buat sebelumnya, seudah terdapat beberapa page bawaan dari ionic. Hanya saja untuk membuat sebuah form login lebih baik kita membuat sebuah page baru agar page yang sebelumnya telah tersedia hanya digunakan untuk isi konten dari aplikasinya saja. Kemudian, provider atuhservice disini dimaksudkan untuk mengatur jalannya sebuah sistem dari form login tersebut. Untuk membuat file page baru dan sebuah provider hamper tidak jauh berbeda. Langkahnya adalah, silahkan buka jendela command prompt atau CMD pada perangkat anda, tentukan lokasi atau directory nya sesuai lokasi tersimpannya file projek aplikasi yang telah kita buat sebelumnya. Kemudian ketikkan :

Ionic g page login

Ionic g page register

Ionic g provider atuhService

            Ketikkan 3 kode diatas satu persatu. Ketik satu lalu tunggu prosesnya, kemudian baru 

ketikkan kode selanjutnya sampai selesai. Kemudian jika sudah, buka file projek aplikasinya, didalam folder file projek aplikasinya akan terdapat folder src, apabila di klik akan terdapat folder provider yang isinya apabila dibuka adalah file authService. Dan terdapat pula folder pages, dimana isinya terdapat folder login dan register. Jika benar, maka proses menginput file dan folder baru tersebut telah berhasil. Nah, langsung saja kita eksekusi. Namun, file yang pertama kali akan kita edit bukanlah file baru tersebutm tetapi file app.module dan file app.component yang sebelumnya telah ada dari bawaan ionicnya. Dimanakah lokasi file tersebut? Silahkan anda buka file projek aplikasinya, kemudian klik src/app/app.module.ts. kemudian buka appmodule.ts di sublime text. Ubah script app.module.ts menjadi seperti ini :

import { NgModule } from '@angular/core'; import { IonicApp, IonicModule } from 'ionic-angular'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { LoginPage } from '../pages/login/login'; import { AuthService } from '../providers/auth-service'; import { RegisterPage } from '../pages/register/register'; @NgModule({   declarations: [     MyApp,     HomePage,     LoginPage,     RegisterPage   ],   imports: [     IonicModule.forRoot(MyApp)   ],   bootstrap: [IonicApp],   entryComponents: [     MyApp,     HomePage,     LoginPage,     RegisterPage   ],   providers: [AuthService] }) export class AppModule {}

Pada sricpt app.module.ts ini kita harus mengimport semua page yang ada di aplikasi kita dan mendeklarasikannya. Hal ini bertujuan agar page tersebut dapat di gunakan dan terbaca oleh program karena sudah dideklarasikan.

Kemudian setelah itu, buka file app.component di src/app/app.component ke sublime text. Edit kembali script file tersebut menjadi seperti dibawah ini :

import { Component } from '@angular/core'; import { Platform } from 'ionic-angular'; import { StatusBar } from 'ionic-native'; import { LoginPage } from '../pages/login/login'; @Component({   template: `<ion-nav [root]="rootPage"></ion-nav>` }) export class MyApp {   rootPage = LoginPage;   constructor(platform: Platform) {     platform.ready().then(() => {       StatusBar.styleDefault();     });   } }

Pada bagian ini, salah satunya adalah berfungsi untuk menentukan page mana yang akan terbuka ketika pertamakali program dijalankan. Maka dari itu, pada export class My App disitu dituliskan rootPage = loginPage. Hal ini agar ketika program file projek dijalankan, page yang pertamakali terbuka adalah page login.

Selanjutnya, kita masih harus mengedit file atau iscript lainnya lagi. File atau script yang harus kita ubah selanjutnya adalah authService. Buka file di src/provider/authService dan edit script  menjadi seperti berikut :

import { Injectable } from '@angular/core'; import {Observable} from 'rxjs/Observable'; import 'rxjs/add/operator/map'; export class User {   name: string;   email: string;   constructor(name: string, email: string) {     this.name = name;     this.email = email;   } } @Injectable() export class AuthService {   currentUser: User;   public login(credentials) {     if (credentials.email === null || credentials.password === null) {       return Observable.throw("Please insert credentials");     } else {       return Observable.create(observer => {         // At this point make a request to your backend to make a real check!         let access = (credentials.password === "pass" && credentials.email === "email");         this.currentUser = new User('Simon', 'saimon@devdactic.com');         observer.next(access);         observer.complete();       });     }   }   public register(credentials) {     if (credentials.email === null || credentials.password === null) {       return Observable.throw("Please insert credentials");     } else {       // At this point store the credentials to your backend!       return Observable.create(observer => {         observer.next(true);         observer.complete();       });     }   }   public getUserInfo() : User {     return this.currentUser;   }   public logout() {     return Observable.create(observer => {       this.currentUser = null;       observer.next(true);       observer.complete();     });   } }

Pada script authService, kita mengatur untuk email dan password yang akan kita gunakan ketika login nantinya. Jadi sebagai syarat yang kita gunakan untuk mendapatkan akses ke aplikasi tersebut. 

Setelah kita mengatur sistematis jalannya program, sekarang saatnya kita mengatur page loginnya sendiri. Dalam folder login page, terdapat 3 file. Nah ketiga-tiganya akan kita edit scriptnya untuk mendapatkan hasil yang menarik. Oke, untuk pertama, bukalah file login.ts di src/pages/login/login.ts pada sublime text. Kemudian ubah scriptnya menjadi seperti berikut :

import { Component } from '@angular/core'; import { NavController, AlertController, LoadingController, Loading } from 'ionic-angular'; import { AuthService } from '../../providers/auth-service'; import { RegisterPage } from '../register/register'; import { HomePage } from '../home/home'; @Component({   selector: 'page-login',   templateUrl: 'login.html' }) export class LoginPage {   loading: Loading;   registerCredentials = {email: '', password: ''};   constructor(private nav: NavController, private auth: AuthService, private alertCtrl: AlertController, private loadingCtrl: LoadingController) {}   public createAccount() {     this.nav.push(RegisterPage);   }   public login() {     this.showLoading()     this.auth.login(this.registerCredentials).subscribe(allowed => {       if (allowed) {         setTimeout(() => {         this.loading.dismiss();         this.nav.setRoot(HomePage)         });       } else {         this.showError("Access Denied");       }     },     error => {       this.showError(error);     });   }   showLoading() {     this.loading = this.loadingCtrl.create({       content: 'Please wait...'     });     this.loading.present();   }   showError(text) {     setTimeout(() => {       this.loading.dismiss();     });     let alert = this.alertCtrl.create({       title: 'Fail',       subTitle: text,       buttons: ['OK']     });     alert.present(prompt);   } }

Script di file login.ts ini adalah berisikan perintah yang nantinya menentukan fungsi-fungsi atau fitur apa saja yang kita sematkan dalam aplikasi ini terutama dalam page login. Kemudian untuk mengatur konten isi dalam page kita beralih ke file login.html. Buka file tersebut di src/pages/login/login.html pada sublime text, kemudian edit script file tersebut menjadi seperti berikut :

<ion-content class="login-content" padding>   <ion-row class="logo-row">     <ion-col></ion-col>     <ion-col width-67>       <img src="http://placehold.it/300x200"/>     </ion-col>     <ion-col></ion-col>   </ion-row>   <div class="login-box">     <form (ngSubmit)="login()" #registerForm="ngForm">       <ion-row>         <ion-col>           <ion-list inset>                          <ion-item>               <ion-input type="text" placeholder="Email" name="email" [(ngModel)]="registerCredentials.email" required></ion-input>             </ion-item>                          <ion-item>               <ion-input type="password" placeholder="Password" name="password" [(ngModel)]="registerCredentials.password" required></ion-input>             </ion-item>                        </ion-list>         </ion-col>       </ion-row>              <ion-row>         <ion-col class="signup-col">           <button ion-button class="submit-btn" full type="submit" [disabled]="!registerForm.form.valid">Login</button>           <button ion-button class="register-btn" block clear (click)="createAccount()">Create New Account</button>         </ion-col>       </ion-row>            </form>   </div> </ion-content>

Dengan mengedit script html, maka apabila kalian buka atau jalankan program ini page login sudah berisikan kata-kata atau komten lainnya seperti yang terdapat dalam script di atas. Selanjutnya untuk tahap terakhir, bagian file yang harus kita edit adalah file login.scss. buka file tersebut di src/pages/login/login.scss pada sublime text dan kemudian sedit script di dalamnya menjadi seperti berikut :

page-login {   .login-content {     background: #56CA96;     .logo-row {       padding-top: 50px;       padding-bottom: 20px;     }     .login-box {       background: #399F8B;       padding: 20px 20px 0px 20px;       margin-top: 30px;     }     ion-row {        align-items: center;        text-align: center;      }      ion-item {          border-radius: 30px !important;          padding-left: 30px !important;          font-size: 0.9em;          margin-bottom: 10px;          border: 1px solid #ffffff;          border-bottom: 0px !important;          box-shadow: none !important;      }      .signup-col {        margin: 0px 16px 0px 16px;        padding-bottom: 20px;      }      .item-inner {        border-bottom-color: #ffffff !important;        box-shadow: none !important;      }      .submit-btn {        background: #51CFB1;        border-radius: 30px !important;        border: 1px solid #ffffff;      }      .register-btn {        color: #ffffff;        font-size: 0.8em;      }   } }

Pada bagian ini, script  ini berfungsi untuk menentukan size huruf, background page, margin dan border yang telah kita sematkan di dalam isi konten page. Oke setelah kita mengedit semua file yang telah saya anjurkan, maka jangan lupa untuk mengesave nya. Setelah itu buka kembali command prompt atau CMD kemudian arahkan directory ke file projek kemudian ketikkan ionic serve –lab dan tunggu prosesnya. Jika proses berhasil dan telah selesai maka akan terbuka programnya di web browser yang kalian gunakan di perangkat anda. Maka, hasil dari mengedit script-script di atas adalah sebagai berikut :