Membuat Aplikasi Android (Absensi Siswa) Chapter 3

Halo, berjumpa lagi dengan saya. Ini merupakan tulisan saya yang ke-3 yang membahas bagaimana cara membuat aplikasi berbasis android dan iOS, absensi siswa. Pada bagian atau chapter 1 dan 2 saya telah membahas bagaimana membuat sebuah file projek ionic 2 dan bagaimana cara membuat form login. Chapter 3 ini saya akan membahas bagaimana membuat sebuah button yang berfungsi untuk memindahkan dari page satu ke page lainnya dan juga membahas bagaimana cara membuat sebuah allertcontroller sebagai sebuah penringatan atau pemberitahuan. Oke tanpa harus basa-basi lagi, kita langsung saja masuk ke dalam pembahasan kita.

Membuat Button Fungsi

            Bagaimana membuat penghubung antar page. Untuk membuat sebuah aplikasi pastinya kita perlu menggunakan lebih dari satu page. Entah itu digunakan untuk sebuah menu yang tidak mungkin di sematkan dalam satu halaman saja. Untuk itu perlu adanya fungsi yang menghubungkan antar page agar page-page tersebut saling terhubung. Biasanya untuk masalah tersebut, jawabannya adalah menggunakan fungsi button. Untuk membuat fungsi button. Langkah pertama adalah kita membuka file html dari page pertama (misalnya home page). Tambahkan code dalam script html tersebut seperti berikut :

<button ion-button button class= "….." (click)="…..()" icon-left>

            <ion-icon name="….."></ion-icon>

            …..

</button>

            Untuk yang saya beri warna, meurpakan nama class dari button atau tombol yang akan kita buat. Sedangkan yang saya beri tanda warna kuning merupakan tanda atau kode untuk pemanggilan fungsi tersebut dari file typescript (.ts).  untuk yang berwarna hijau itu merupakan kode dari icon yang akan kita tampilkan, misalnya kita mau menggunakan icon handphone dalam tombol yang kita buat, nah untuk menampilkannya tinggal mengubah yang saya beri tanda hijau tersebut dengan kode icon handphone. Untuk mengetahui kode-kode dan icon apa saja yang dapat kota gunakan, maka kalian bisa membuka https://ionicframework.com/docs/v2/ionicons. Kemudian untuk yang saya beri tanda warna biru itu untuk menamakan tombol yang akan kita buat. Jadi untuk semua yang saya beri warna, bisa kalian ubah-ubah sesuai dengan kebutuhan tombol yang akan kalian buat untuk projek aplikasi kalian nanti.

            Oke, kita balik lagi ke tujuan kita untuk membuat sebuah aplikasi absensi siswa. Setelah kita membuat tampilan tombol yang akan kita buat pada file atau script html, maka sekarang saatnya kita membuat fungsi dari tombol tersebut. Untuk membuat fungsi dari tombol tersebut, maka kita harus mengubah script pada file typescriptnya (.ts). tambahkan code seperti ini pada file typescriptnya di bagian paling bawah dari script tersebut :

public …..() {

this.nav.setRoot(Page tujuan);

}

            Nah, untuk yang saya beri tanda kuning adalah kunci untuk memanggil atau mengkoneksikan antara file typescript dengan file html. Warna kuning yang saya pilih karena ini haruslah sama dengan apa yang anda ketik di file html tadi dengan posisi atau letak yang saya beri tanda kuning pula. Kemudian langkah selanjutnya adalah menambahkan import baru pada script file (.ts) ini di bagian paling atas dari code lainnya. Seperti berikut :

import { ….. } from '../…../…..';

            Baik, untuk yang saya beri tanda merah, itu berarti harus kalian isi dengan page tujuan anda. Seperti tujuan awalnnya, bahwa kita ingin membuat sebuah perpindahan dari page 2 ke page 2 atau page lainnya. Nah, untuk yang diberi tanda merah tersebut, isilah page tujuan yang anda inginkan apabila tombol di klik. Kemudian untuk yang saya beri tanda warna biru, itu adalah lokasi dari file page tujuan anda. Di folder manakah anda menaruh file dari page tujuan anada tersebut. Misalnya ada didalam folder page/login/login. Maka yang perlu di input hanyalah 2 lokasi bagian paling akhir saja yaitu login/login. Jadi nanti itu diisi sesuai dengan lokasi kalian dimana menyimpan file tersebut.

Membuat Allert controller

Untuk membuat alert controller itu sebenarnya tidaklah jauh berbeda dengan membuat sebuah button. Membuat allert controller diperlukan editing pada script html dan type script pula. Namun, apabila kita telah membuat button fungsi maka kita tidak perlu lagi mengedit file atau script htmlnya. Kita hanya perlu mengedit script dari typescriptnya saja, seperti berikut :

public …..() {let alert = this.alertCtrl.create({    title: 'Success',    subTitle: 'Anda berhasil menginput absen',    buttons: ['OK']  });  alert.present();  this.nav.setRoot(Page tujuan);  }

Nah, hamper sama bukan dengan membuat button atau tombol? Hanya saja kita tinggal menambahkan code yang saya beri tanda dengan warna biru tua. Untuk title, subtitle dan button itu bisa diisi sesuai keinginan kalian. Peringatan atau pemberitahuan apa yang kalian inginkan, kalian bisa isi di bagian tersebut. Oke, mungkin cukup sekian untuk pembahasan di chapter ke-3 kali ini. Sampai berjumpa di pembahasan chapter berikutnya.