Bab ini membahas pembuatan aplikasi login pada perangkat bergerak dengan menggunakan App Inventor. Terdiri dari tiga langkah yaitu membuat desain antarmuka, membuat kode program, dan menjalankan aplikasi. Pada desain ditambahkan komponen label, textbox, passwordtextbox dan button. Kode program menggunakan kondisi if-else untuk mengecek kesesuaian username dan password sebelum membuka layar berhasil atau gagal login.

1. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 1
BAB XI - MEMBUAT APLIKASI LOGIN
Tujuan Pembelajaran:
Setelah mempelajari bab ini siswa diharapkan dapat mampu:
1. Membuat desain aplikasi login
2. Membuat kode block aplikasi login
3. Menjalankan aplikasi aplikasi login
Login adalah salah satu proses dalam aplikasi di mana aplikasi meminta pengguna
untuk memasukkan username dan password untuk keperluan pengecekan kepemilikan
akun. Pada bab ini Anda akan diajak untuk mempelajari pembuatan sistem login di mana
pengguna harus memasukkan username dan password. Jika username atau password
salah, ponsel Android Anda akan mengeluarkan suara "Wrong username or Password". Jika
username dan password benar, ponsel akan mengeluarkan suara "Welcome to Android".
A. Membuat Desain
Sebelum memulai pembuatan Struktur Behavior dari aplikasi yang Anda buat,
terlebih dahulu Anda harus membuat Desain Interface. Untuk membuat Desain Interface,
ikuti langkah-Iangkah berikut.
1. Buat project baru dengan mengklik menu My Projects, kemudian klik menu Start new
project, dan ketik Login seperti gambar yang dibawah ini, klik OK.
Gambar 6.1 Menu Create new App Inventor Project

2. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 2
2. Maka, App Inventor akan membuatkan Anda sebuah project baru dengan nama
Login, seperti tampak pada gambar berikut:
Gambar 6.2 Project Login telah Berhasil Dibuat
3. Langkah selanjutnya, klik pada menu Design, selanjutnya App Inventor akan
menampilkan halaman Design seperti pada gambar berikut.
Gambar 6.3 Halaman Design
4. Pada Components, klik pada Screen1, selanjutnya, lihat pada Properties (Bagian
sebelah kanan).
Gambar 6.4 Mengubah Title pada komponen screen1

3. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 3
5. Ubah properti Title pada komponen Screen1 menjadi Login. Lihat pada gambar
berikut:
Gambar 6.4 Mengubah Title Menjadi Login
6. Pada Palette ambil komponen Label.
7. Ubah properti Text komponen Label menjadi Username.
8. Pada properti Width komponen Label ubah menjadi Fill Parent
9. Langkah selanjutnya, ambil komponen TextBox dari Palette
10. Ubah properti Width komponen TextBox menjadi Fill Parent
11. Ubah properti Hint komponen TextBox menjadi Hit for Username
12. Selanjutnya pada Pallete ambil komponen Label Kembali
13. Ubah properti Text komponen Label menjadi Password
14. Pada properti Width, komponen Label ubah menjadi Fill Parent
15. Langkah selanjutnya, ambil komponen PasswordTextBox
16. Ubah properti Width komponen TextBox menjadi Fill Parent.
17. Ubah properti Hint komponen TextBox menjadi Hit for Password
18. Langkah selanjutnya, ambil komponen Button dari Palette.
19. Ubah properti Text dari komponen Button tersebut menjadi Submit.
20. Adapun tampilan bentuk formnya adalah seperti pada gambar berikut.

4. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 4
Gambar 6.5 Tampilan Form Login
21. Langkah selanjutnya, ambil komponen TextToSpeech dari Palette Media
22. Adapun tampilan lengkap dari desain formnya adalah seperti pada gambar berikut:
Gambar 6.6 Tampilan Lengkap Desain Form
B. Membuat Kode Block Program
Langkah-Iangkah pembuatan Kode Block dari aplikasi Login adalah sebagai
berikut:
1. Buka Block Editor dari App Inventor Anda dengan mengKlik tombol Block (Sudut
bagian kanan atas)
2. Klik pada Button1 pada Pallete Block. Dan Ambil method Block Button1.Click

5. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 5
3. Letakkan pada Block Design.
4. Pada program aplikasi Login, logika program adalah "Pada saat Button1 ditap,
program akan mengecek username dan password. Jika password dan username
benar, nilainya true, jika username atau password salah, nilainya false". Maka Anda
harus menggunakan fungsi kondisi. Adapun fungsi kondisi yang digunakan di sini
adalah fungsi kondisi If..then..else.
5. Pada Block Palette, di tab Built-In. Pilih Control dan ambil method If..then..else.
Seperti yang terlihat pada gambar dibawah ini :
Gambar 6.7. Block If..then..else
6. Setelah mengambil method if..else..then, pasangkan dengan method Button1.Click
seperti pada gambar berikut.
Gambar 6.8 Memasangkan Block
7. Karena terdapat dua faktor yang akan diuji, yaitu username dan password, fungsi
kondisi harus digabungkan dengan fungsi penggabungan logika AND, Pada tab Built-
In klik pada pilihan Logic.
8. Ambil Block Logic and. Kemudian, pasangkan dengan Block If..then..else. Untuk
lebih jelasnya, lihat pada gambar berikut.

6. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 6
Gambar 6.7 Memasangkan Block
9. Sebelum kita lanjutkan, tambahan terlebih dahulu Screen2 di menu Add Screen
sebagai screen Berhasil Login seperti yang terlihat pada gambar dibawah ini:
Gambar 6.8 Menu Add Screen untuk menambahkan Screen baru
10. Lalu tambahkan Label dan ganti propertie Text nya dengan tulisan misal Success
Login.
11. Lalu tambahkan Screen3 di menu Add Screen sebagai screen Gagal Login, lalu
tambahkan Label dan ganti property Text nya dengan tulisan Failed Login seperti
yang terlihat pada gambar dibawah ini:
Gambar 6.9 Menu Desain Gagal Login (Failed Login)
12. Karena yang akan diuji berupa teks Login, Anda harus memasukkan Block pengujian
teks Login. Block pengujian teks terdapat pada Tab Built-In dan pillih tab Text.
13. Pasangkan Block Program seperti gambar dibawah ini :

7. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 7
Gambar 6.9 Memasangkan Block
14. Klik Block  Built-in -> Variabel -> Klik dan Drag Block initialize global di Screen1,
ketik name di initialize global 1 dan password di initialize global 2.
15. Klik Block -> Built-in -> Text dan pasangkan dengan Block initialize global name
dan ketik admin (contoh) dan 12345 untuk Block initialize global password seperti
yang terlihat pada gambar 6.13.
16. Langkah selanjutnya adalah klik Block -> Screen1 -> Klik Button1 dan drag
Button1.Clik (warna coklat) seperti yang terlihat pada gambar di 6.13 diatas
17. Langkah selanjutnya adalah memasukkan nilai yang akan diuji, yaitu nilai yang
terdapat pada TextBox dan PasswordTextBox, Pertama kali yang akan diuji adalah
nilai yang terdapat pada komponen TextBox1
18. Pilih pada method TextBox1.Text dan pasangkan pada Block get global name
19. Dan pasangkan PasswordTextBox1.Text dengan get global password
20. Jadi, pada saat running program, username yang dianggap benar adalah yang
menggunakan username admin dan password 12345 seperti yang sudah di inisiasi
diawal dengan initialize global username dan initialize global password.
21. Jangan lupa untuk memilih block open another screenname untuk membuka
Screen2 apabila login berhasil (Success Login) di block then dan open antoher
screenname untuk membuka Screen3 apabila login tidak berhasil (Failed Login)
untuk menutup Block Code Program.

8. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 8
C. Menjalankan Aplikasi
Untuk menjalankan aplikasi yang telah Anda buat, Anda harus menginstalnya langsung
ke perangkat Android Anda. Setetah Anda menginstal aplikasi tersebut, selanjutnya
jalankan aplikasinya. Berikut adalah penjelasan mengenai aplikasi yang telah dibuat.
1. Jalankan aplikasi yang sudah dibuat dengan mengklik Connect dan AI Companion
(pastikan AI Companion telah terinstall di Perangkat Bergerak Android Anda), seperti
gambar dibawah ini:
Gambar 6.10 Menjalankan aplikasi dengan AI Companion
2. Maka berikutnya akan muncul tampilan menu AI Companion meminta Anda untuk
memasukkan digit karakter yang tampil di layar monitor komputer Anda ke perangkat
begerak Android anda atau bisa scan barcode yang yang muncul dilayar monitor
computer Anda seperti yang terlihat pada gambar dibawah ini :
Gambar 6.11 Tampilan Connect AI Companion

9. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 9
3. Berikut adalah tampilan user interface dari aplikasi Login yang telah Anda buat.
Gambar 6.12 Tampilan User Interface
4. Pada Username masukkan admin, kemudian pada Password masukkan 12345.
5. Kemudian, klik pada tombol Submit. Jika Username dan Password dimasukkan
dengan benar maka akan tampil tulisan Success Login seperti gambar dibawah ini
yang berarti Anda telah sukses membuat aplikasi Login.
6. Langkah selanjutnya, ubah username atau password Anda. Kemudian, tekan pada
button Submit. Jika Username dan Password yang dimasukkan salah maka akan
tampilan tulisan Failed Login di layar perangkat bergerak Android Anda yang berarti
aplikasi Anda telah berjalan dengan semestinya.