Membuat Halaman Login Sederhana

 Pertemuan 7 Nama : Hafidz Panji Ashari NRP : 5025231278

Langkah-Langkah Pembuatan Halaman Login Sederhana dengan Jetpack Compose



Pada praktikum pertemuan ketujuh ini, fokus materi adalah penerapan desain antarmuka secara deklaratif menggunakan Jetpack Compose untuk membuat halaman autentikasi (Login Page). Praktikum ini juga mencakup manajemen State untuk input form, tata letak tingkat lanjut (advanced layouting), pemisahan berkas untuk modularitas kode, dan penggunaan Logcat untuk debugging.

Berikut adalah tahapan implementasinya di Android Studio:

1. Persiapan Proyek dan Aset Visual (Drawable)

  • Membuat proyek Empty Activity baru dengan nama LoginPage.

  • Mengunduh empat aset gambar berformat .png, yang terdiri dari satu gambar ilustrasi login utama, serta tiga logo platform pihak ketiga (Facebook, Google, dan GitHub).

  • Menyalin dan memasukkan (import) keempat file gambar tersebut ke dalam direktori app > res > drawable agar dapat dipanggil di dalam kode program.

2. Pemisahan Kode Antarmuka (Modularitas)

  • Untuk menerapkan prinsip clean code, logika antarmuka (UI) dipisahkan dari entry point aplikasi.

  • Dibuat sebuah file Kotlin baru bernama LoginScreen.kt yang berisi fungsi Composable bernama @Composable fun TampilanLoginUtama(). Seluruh desain UI ditulis di dalam file ini.

  • Pada file bawaan MainActivity.kt, seluruh kode UI bawaan dihapus sehingga MainActivity hanya bertugas memanggil dan menampilkan fungsi TampilanLoginUtama() saat aplikasi pertama kali dijalankan.

3. Pembuatan Form Input dan State Management

  • Di dalam LoginScreen.kt, dideklarasikan dua variabel mutasi (State) menggunakan remember { mutableStateOf("") }, yaitu variabel surel dan kataSandi untuk menampung ketikan pengguna.

  • Komponen OutlinedTextField digunakan untuk form input. Pada form password, ditambahkan modifikasi visualTransformation = PasswordVisualTransformation() sehingga setiap karakter yang diketik akan disensor menjadi titik/bintang demi keamanan dasar.

  • Ditambahkan parameter KeyboardOptions agar keyboard yang muncul di layar HP otomatis menyesuaikan (mode ketik email dan mode password).

4. Menyusun Layout dan Elemen Interaktif

  • Seluruh elemen dibungkus menggunakan komponen Column dengan pengaturan posisi terpusat secara vertikal dan horizontal.

  • Teks "Lupa Sandi?" dibungkus menggunakan komponen Row dengan pengaturan horizontalArrangement rata kanan (End). Teks ini diberi modifier .clickable agar merespons saat disentuh.

  • Tiga logo platform (Facebook, Google, GitHub) diletakkan di dalam Row dengan parameter Arrangement.SpaceEvenly di bagian bawah form, sehingga letaknya proporsional dan sejajar secara horizontal. Ketiga gambar ini juga diberi modifier clickable.

5. Pengujian Logging via Logcat

  • Komponen tombol Login (Button) dihubungkan dengan library pencatatan sistem bawaan Android, yaitu android.util.Log.

  • Pada parameter aksi tombol (onClick), ditambahkan perintah cetak dengan tag khusus: Log.w("SistemAutentikasi", "Mencoba Login -> Surel: $surel | Sandi: $kataSandi").

  • Saat aplikasi dijalankan (Run) dan pengguna menekan tombol "Masuk", aplikasi akan menangkap teks yang diisi di dalam kolom, lalu mencetaknya ke konsol Logcat di Android Studio. Uji coba ini membuktikan bahwa alur pengambilan data input dari State telah berhasil dilakukan sebelum dikirimkan ke database.




Comments

Post a Comment

Popular posts from this blog

Daily Task Manager

Image
Daily Task Manager LAPORAN EVALUASI TENGAH SEMESTER (ETS) Anggota 1  Nama: Hafidz Panji Ashari NRP: 5025231278 Anggota 2 Nama: Amin Vinurdi NRP:  5025231241 Kelas: Pemrograman Perangkat Bergerak B Departemen: Teknik Informatika, Institut Teknologi Sepuluh Nopember (ITS) Link Source Code :  GitHub Download :  Drive Blogspot :  Blog PPT :  Canva Video Presentasi : .... 1. Pendahuluan Daily Task Manager adalah aplikasi pengelolaan tugas harian berbasis Android yang dirancang untuk membantu pengguna mencatat, memantau, dan mengorganisasi daftar kegiatan mereka secara efisien. Pengembangan aplikasi ini mengutamakan kemudahan interaksi pengguna ( User Experience ) dengan mengimplementasikan antarmuka yang modern, bersih, dan intuitif. 2. Teknologi dan Lingkungan Pengembangan Pengembangan aplikasi ini memanfaatkan teknologi front-end modern pada ekosistem Android, yang meliputi: Bahasa Pemrograman: Kotlin UI Framework: Jetpack Compose (Material Design 3) A...
Read more

EAS

  Nama : Hafidz Panji Ashari  NRP : 5025231278 Kelas : PBO - A Soal  Evaluasi Akhir Semester Apa yang dimaksud dengan Package Library dalam Java. Jelaskan kegunaan dan contoh penggunaannya dalam pemrograman Buatlah Rancangan Aplikasi yang diambil dalam Final Project Deskripsikan kegunaan dan ruang lingkup aplikasi Implementasikan Aplikasi yang telah didesain dengan menggunakan Pemrograman Berbasis Obyek Java Buat PPT presentasi yang menunjang Demo Aplikasi Demokan aplikasi dengan membuat video dan diupload di Youtube. 1. Apa yang dimaksud dengan Package Library dalam Java. Jelaskan kegunaan dan contoh penggunaannya dalam pemrograman Dalam Java, Package Library mengacu pada kumpulan class dan interface yang dikelompokkan dalam sebuah package untuk menyediakan fungsi yang sudah siap digunakan oleh developer. Library ini bisa berasal dari bawaan Java (Java Standard Library) atau dibuat oleh pihak ketiga. Package adalah mekanisme untuk mengelompokkan class dan interface a...
Read more

DisplayClock

Image
 Nama: Hafidz Panji Ashari NRP: 5025231278 KELAS: PBO-A  import javax . swing .* ; import java . awt .* ; import java . text . SimpleDateFormat ; import java . util . Date ; public class DisplayClock extends JFrame {     private JLabel timeLabel ;     public DisplayClock () {         setTitle ( "Display Clock" );             timeLabel = new JLabel ();         timeLabel . setFont ( new Font ( "Verdana" , Font . PLAIN , 50 ));         timeLabel . setHorizontalAlignment ( SwingConstants . CENTER );         add ( timeLabel );         setSize ( 400 , 200 );         setDefaultCloseOperation ( JFrame . EXIT_ON_CLOSE );         setVisible ( true );         startClock ();     }     public void startClock () {         Timer...
Read more