PPB - Pertemuan 7 dan 12 - Halaman Login Sederhana

5025231245 | Rafie Zaidan Umara | Pertemuan 7 dan 12 | PPB C

Halaman Login Sederhana

Project ini merupakan aplikasi Simple Login Page berbasis Android menggunakan bahasa pemrograman Kotlin dan Jetpack Compose. Aplikasi ini dirancang untuk menampilkan antarmuka halaman login modern yang memiliki fitur input email dan password, tombol login, navigasi register, serta opsi login menggunakan akun Google dan Facebook. Tampilan aplikasi dibuat menyerupai halaman login pada aplikasi mobile modern dengan kombinasi warna, layout, dan komponen UI yang responsif serta menarik.

1. Membuat New Project

Tahap pertama dalam pembuatan aplikasi kalkulator sederhana adalah melakukan persiapan awal atau set up environment pengembangan. Langkah awal yang dilakukan yaitu menginstall Android Studio sebagai software utama untuk membuat aplikasi Android. Setelah proses instalasi selesai, Android Studio dibuka kemudian pengguna memilih menu “New Project” untuk mulai membuat project baru.

Selanjutnya dilakukan proses pembuatan project baru dengan memilih template “Empty Activity” agar project memiliki tampilan dasar yang sederhana dan mudah dikembangkan. Setelah itu klik tombol “Next”, lalu mengisi konfigurasi project seperti nama aplikasi yaitu “calculator-app” serta memilih bahasa pemrograman Kotlin yang direkomendasikan untuk pengembangan aplikasi Android modern menggunakan Jetpack Compose. 

3. Package dan Library
Bagian ini digunakan untuk mengimpor berbagai library yang dibutuhkan dalam pembuatan aplikasi. Library tersebut mencakup komponen tampilan seperti Text, Button, Column, dan OutlinedTextField, serta library untuk mengatur warna, ukuran, layout, ikon, dan state pada Jetpack Compose. Import ini menjadi dasar agar seluruh komponen UI dapat digunakan pada project.

4. MainActivity
Kode ini merupakan activity utama pada aplikasi Android. Fungsi onCreate() akan dijalankan pertama kali ketika aplikasi dibuka. Di dalamnya terdapat setContent yang digunakan untuk menampilkan halaman LoginScreen() sebagai tampilan utama aplikasi menggunakan Jetpack Compose.

5. Fungsi LoginScreen()
Fungsi LoginScreen() digunakan untuk membuat keseluruhan tampilan halaman login. Pada bagian awal terdapat variabel email dan password yang digunakan untuk menyimpan input pengguna secara dinamis menggunakan mutableStateOf. Ketika pengguna mengetik pada text field, nilai variabel akan otomatis diperbarui.

6. Background Gradient
Bagian ini digunakan untuk membuat background utama aplikasi dengan efek gradasi warna biru gelap. Komponen Box dipakai sebagai wadah utama layout, sedangkan Brush.verticalGradient() digunakan untuk menghasilkan perpaduan warna secara vertikal agar tampilan aplikasi terlihat lebih modern dan menarik.

7. Card Login Form
Kode ini digunakan untuk membuat card atau panel utama yang berisi form login. Card dibuat dengan sudut melengkung pada bagian atas menggunakan RoundedCornerShape sehingga tampilan terlihat lebih halus dan modern. Warna putih dipilih agar kontras dengan background biru.

8. Input Email

Bagian ini digunakan untuk membuat kolom input email. Komponen OutlinedTextField memungkinkan pengguna memasukkan teks dengan tampilan border outline. Terdapat ikon person di sebelah kiri untuk memperjelas fungsi field sebagai input email atau username.

9. Input Password

Kode ini digunakan untuk membuat kolom input password. Perbedaannya dengan input email adalah adanya PasswordVisualTransformation() yang berfungsi menyembunyikan karakter password agar keamanan pengguna lebih terjaga. Selain itu digunakan ikon gembok untuk menandakan field password.

10. Tombol Login

Bagian ini digunakan untuk membuat tombol login. Tombol dibuat memenuhi lebar layar dengan bentuk rounded agar tampil seperti tombol modern pada aplikasi mobile saat ini. Fungsi onClick nantinya dapat digunakan untuk menambahkan proses validasi login atau navigasi ke halaman lain.

11. Register dan Forgot Password

Kode ini digunakan untuk menampilkan teks interaktif seperti “Forgot Password?” dan “Register”. Modifier clickable memungkinkan teks tersebut ditekan layaknya tombol sehingga nantinya dapat diarahkan ke halaman reset password atau registrasi akun.

12. Social Login Button

Bagian ini digunakan untuk menampilkan opsi login menggunakan akun Google dan Facebook. Komponen Row digunakan agar kedua tombol tampil sejajar secara horizontal dengan jarak tertentu sehingga tampilan menjadi lebih rapi.

13. Fungsi SocialButton()

Fungsi SocialButton() digunakan untuk membuat tombol sosial media berbentuk lingkaran. Fungsi ini dibuat terpisah agar kode lebih rapi dan dapat digunakan kembali untuk berbagai platform login lainnya. Parameter text digunakan untuk menentukan simbol platform, sedangkan color digunakan untuk menentukan warna khas masing-masing brand.

14. Tampilan Halaman

15. Kesimpulan

Berdasarkan hasil pembuatan project ini, dapat disimpulkan bahwa Jetpack Compose mempermudah proses pengembangan antarmuka aplikasi Android dengan penulisan kode yang lebih modern, ringkas, dan terstruktur. Pada project ini berhasil dibuat sebuah halaman login sederhana yang memiliki tampilan modern dengan fitur input email dan password, tombol login, halaman register, serta opsi login menggunakan akun Google dan Facebook. Selain memiliki desain yang menarik, penggunaan composable function juga membuat kode menjadi lebih mudah dibaca, dipelajari, dan dikembangkan kembali pada project Android berikutnya

Link Code: Simple Login Page