VISUAL PROGAMING

UTS

Oleh :

Devina Valeria Fakdawer

201765073

PROGRAM STUDI S1 TEKNIK INFORMATIKA

JURUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS PAPUA

MANOKWARI

2020
 I PENDAHULUAN

I.1 Tujuan

1. Mahasiswa dapat memahami pembuatan sistem login menggunakan kodular, database

firebase dan firebase storage untuk media penyimpanan.
2. Mahasiswa dapat membuat aplikasi sistematis login menggunakan kodular, database
firebase dan firebase storage untuk media penyimpanan.
3. Mahasiswa dapat mengimplementasikan aplikasi yang telah dibuat menggunakan
Android.

I.2 Alat

1. Laptop/PC
2. Smartphone Android

I.3 Bahan

1. Kodular
2. Database Firebase, dan Storage
3. Kodular Companion For Android
 II PEMBAHASAN

II.1 Form Registrasi User

II.1.1 Design Registrasi User

Gambar 2.1 Design Registrasi User

Dalam design form registrasi user, text box untuk mengisi data data tombol daftar untuk
melakukan registrasi dan tombol login untuk masuk ke halam login apabila sudah terdaftar
 II.1.2 Membuat Blok Registrasi User

Gambar 2.2 Block Tombol Daftar

Fungsi block dari tombol daftar yaitu pada saat tombol diklik maka akan menyimpan data
yang telah diinput.
 Gambar 2.3 Block Menyimpan Data ke Firebase

Pada block ini memiliki fungsi untuk menyimpan data dan membuat list ke dalam
firebase sesuai urutan input data yang diisi. Kemudian, firebase diipanggil untuk memilih
gambar dan diupload dan disimpan di firebase.

Gambar 2.4 Block Tombol Upload Gambar

Pada block ini berfungsi untuk mengetahui lokasi file dari mana file gambar yang diambil
untukk di upload.
 Gambar 2.5 Block Firebase Storage

Pada block tersebut berfungsi untuk menyimpan file gambar pada firebase storage dan
memberikan nama file sesuai NIM yang di isi pada form registrasi.
II.1.3 Hasil Aplikasi

Gambar 2.6 Hasil Jadi Design Form Registrasi User

II.2 Form Login User

II.2.1 Design Login

Gambar 2.7 Design Form Login User

Pada Screen Login ini terdapat komponen untuk mengisikan data user dan melakukan
login apa bila user sudah melakukan registrasi.

II.2.2 Membuat Blok Form Login User

Gambar 2.8 Block Tombol Button Login

Block tombol button login berfungsi apabila tombol setelah diklik maka akan masuk ke
halaman setelah melakukan login.
 Gambar 2.9 Block Firebase pada Login

Block pada gambar 2.9 berfungsi untuk mengambil data pada firebase sesuai dengan
NIM yang telah terdaftar agar dapat melakukan login.

Gambar 2.10 Block Firebase Got Value

Block ini berfungsi untuk mengambil hasil dari login sesuai NIM dan apabila data yang
dimasukkan sama dengan yang ada pada firebase maka akan masuk ke screen atau halaman
berikutnya.
II.2.3 Hasil Aplikasi

Gambar 2.11 Hasil Jadi Design Form Login User

II.3 Halaman Selamat Datang

II.3.1 Design Home

Gambar 2.12 Design Home Setelah Login

Ini adalah design login dimana terdapat labr; dan button tombol bottun ada dua yaitu
update data dan keluar.

II.3.2 Membuat Blok Home

Gambar 2.13 Block inisialisasi global

Block ini berfungsi untuk inisialisasi halaman home.

 Gambar 2.14 Block Inisialisasi Home

Block tersebut berfungsi untuk mengambil data dari firebase agar dapat menampilkan
data yang sesuai NIM setelah login.

Gambar 2.15 Block Firebase Tag List pada Home

Fungsi dari block ini yaitu mengambil data dari firebase tag list untuk menampilkan di
halaman selamat datang.

Gambar 2.16 Block Firebase Got Value pada Home

 Block ini berfungsi untuk mengambil hasil dan menampilkan sesuai urutan yang ada pada
database firebase.

Gambar 2.17 Block Tombol Button Update

Fungsi dari block tersebut untuk mengubah data sesuai NIM yang ada pada halaman
selamat datang.

Gambar 2.18 Block Firebase Store Response

Block ini berfungsi untuk mengambil data dan menampilkan gambar pada halaman
selamat datang.

Gambar 2.19 Block Tombol Button LogOut

Block pada gambar 2.19 berfungsi untuk keluar dari halaman selamat datang dan kembali
ke halaman registrasi user.
II.3.3 Hasil Aplikasi

Gambar 2.20 Hasil Jadi Design Selamat Datang

II.4 Form Ubah Data

II.4.1 Design Ubah Data User

Gambar 2.21 Design Form Ubah Data User

Pada Screen ubah data user ini hampir sama dengan screen registrasi user hanya saja
bibagian screen ini hanya terdapat tombol update untuk proses mengubah data.

II.4.2 Membuat Blok Form Ubah Data

Gambar 2.22 Block Inisialisasi Global Ubah Data

Block ini berfunsi untuk inisialisasi halaman ubah data.

Gambar 2.23 Block Inisialisasi Tombol Update

 Block tombol update berfungsi untuk mengambil data dari database dan firebase storage
kemudian, menampilkan data pada textbox di halaman ubah data.

Gambar 2.24 Block Firebase Tag List

Block pada gambar 2.24 berfungsi untuk mengambil data dari list yang akan di update
pada Form Ubah data user.

Gambar 2.25 Block Firebase Got Value

Block ini berfugsi untuk mengambil hasil data dari list pada firebase kemudian
menampilkannya sesuai urutan list.
 Gambar 2.26 Block Firebase Tag List

Block ini berfungsi untuk memasukan data kembali ke firebase database setelah
melakukan ubah data.
II.4.3 Hasil Aplikasi

Gambar 2.27 Hasil Jadi Design Form Ubah Data User

II.5 Database Firebase dan Firebase Storage

II.5.1 Project Firebase

Gambar 2.28 Project Firebase

Pada Project ini, telah dibuat dengan menggunakan nama Project uts-devina untuk
menampung data. Kemudian nama project bucket harus sama yang ada pada kodular agar dapat
terhubung.

II.5.2 Project Firebase Storage

Gambar 2.29 Project Firebase Storage

 Firebase storage yaitu untuk menampung data file gambar yang telah di upload pada saat
melakukan registrasi. Kemudian cara menghubungkam project ini sama seperti yang ada pada
database firebase.