Studi Kasus Membuat Halaman Login

on

Pendahuluan   

Pada pertemuan minggu kelima kuliah Pemrograman Perangkat Bergerak kali ini kita mendapatkan latihan atau tugas untuk membuat sebuah studi kasus berupa halaman login sederhana. Pada proyek ini terdapat beberapa composable yang akan digunakan, seperti Image, Text, OutlinedTextField, dan Button

Membuat Halaman Login

  • Membuka Android Studio dan memilih opsi "Empty Activity".
  • Setelah memilih template Empty Activity kita akan menuliskan nama proyek kita yaitu "MyLogin" dan memilih level API minimum untuk proyek kita, disini kita akan memilih API 26 (Oreo).
  • Setelah kode template berhasil dimuat kita akan mengubah struktur kode default proyek.
Kita akan mengubah beberapa struktur kode yang sudah ada dan menyesuaikan dengan kebutuhan proyek Simple Login Page ini. Kita akan menghapus semua fungsi dengan anotasi @Composable dan isi dari setContent pada class MainActivity.
  • Membuat File Kode Kotlin baru dengan nama LoginScreen.
Kemudian setelah mengubah struktur kode default, kita akan membuat file baru dengan nama LoginScreen.kt untuk menuliskan kode tampilan pada proyek ini.
  • Membuat tampilan awal halaman login dengan format Column. 
Pada file LoginScreen.kt kita akan membuat tampilan untuk halaman login. Pertama kita akan membuat fungsi LoginScreen() dan kita akan panggil pada setContent pada file MainActivity.
Setelah membuat fungsi LoginScreen() kita akan membuat tampilan sederhana, yaitu dengan menambahkan gambar dan teks "Selamat Datang". Karna kita akan membuat tampilannya terpusat secara vertikal dan horizontal serta mengisi seluruh ukuran dari ruang yang tersedia. 

Disini untuk menambahkan gambar dan teks kita akan menggunakan fungsi Image() dan Text(). Kemudian kita akan sesuaikan tampilannya dengan menggunakan beberapa modifier seperti pada proyek sebelumnya. Kemudian kita akan memusatkan gambar dan teks dengan format Column dengan beberapa modifier seperti fillMaxSize() untuk mengisi seluruh ukuran dari ruang yang tersedia, verticalArrangement untuk memusatkan objek (gambar dan teks) secara vertikal, dan horizontalAlignment untuk memusatkan objek (gambar dan teks) secara horizontal. Selain itu kita akan menambahkan fungsi Spacer() untuk memberikan jarak antar objek.
  • Menambahkan form email dan password menggunakan OutlinedTextField dan Button.
Setelah menambahkan gambar dan teks pada tampilan halaman login kita, selanjutnya kita akan menambahkan form untuk menginput email dan password dengan menggunakan fungsi OutlinedTextField(). Pada lambda label OutlinedTextField() kita akan menambahkan teks dengan fungsi Text() sehingga ketika kita meng-klik form email maka teks "Email Address" akan berada diatas form email. Kemudian kita akan melakukan hal yang sama untuk password. Untuk form email dan password kita akan masukkan kedalam lambda Column dan kita beri fungsi Spacer().
Kemudian setelah menambahkan gambar dan teks, sekarang kita akan menambahkan untuk melakukan login pada halaman ini. Disini kita akan menggunakan fungsi Button() dan pada lambdanya kita akan menambahkan Text() dengan nilai "Login" serta untuk nilai onClick kita biarkan kosong terlebih dahulu.
  • Menambahkan beberapa logo media social dalam format Row.
Setelah itu kita akan menambahkan beberapa komponen lainnya sesuai dengan contoh yang diberikan seperti teks "Lupa Password?" yang dapat di klik dan teks "Login dengan". Kita juga akan menambahkan beberapa gambar yang dibungkus oleh Row dan dapat di klik nantinya. Row disini akan membuat susunan gambar secara horizontal. Sebelum itu kita perlu menambahkan beberapa logo dari media social yang akan digunakan untuk alternatif login. 

  • Membuat Logika sederhana untuk melakukan login dan menyimpan Credential (email & password) user.
Pertama kita akan membuat variabel email dan password dengan menggunakan by remember yang didalam lambdanya terdapat fungsi mutableStateOf() dengan argumen "". Kemudian setelah itu kita akan mengubah nilai dari value dan onValueChange pada OutlinedTextField(). Setelah itu pada fungsi Button di argumen onClick kita akan mengisikan Log untuk menangkap Credential yang sudah diisi, yaitu email dan password. Sehingga setelah pengguna menginput email dan password, maka Credential tersebut akan disimpan pada Log.

Berikut adalah hasil dari proyek Simple Login Page:


Kode Sumber dari proyek Simple Login Page
kode MainActivity:
Kode LoginScreen:
Selengkapnya kode sumber dapat diakses di Github

Referensi

Comments

Post a Comment