Pertemuan 7

 Nama    :    Muhammad Shafa Narariya

 NRP      :    5025231016

Kelas      :    PPB (C)

Source Code : https://github.com/ItsPong/PBB/tree/main/Pertemuan_7

1. Struktur Layout Utama (Column & Row)

Dalam halaman login ini, saya menggunakan dua jenis layout utama untuk mengatur posisi elemen:

• Column: Digunakan sebagai wadah utama untuk menyusun elemen secara vertikal (Gambar, Teks, Field Input, Tombol) dari atas ke bawah. Saya mengaturnya agar semua konten berada tepat di tengah layar dengan Arrangement.Center.

• Row: Digunakan khusus di bagian bawah untuk menyusun ikon sosial media (Google, Twitter, Facebook) secara horizontal (kiri ke kanan). Dengan Arrangement.SpaceEvenly, jarak antar ikon menjadi rapi dan sama rata.

2. Input Data dengan Keamanan (State & Visual Transformation)

Sama seperti aplikasi kalkulator, saya menggunakan remember dan mutableStateOf untuk menangkap input pengguna. Namun, ada perbedaan penting pada bagian Password:

OutlinedTextField(
    value = password,
    onValueChange = { password = it },
    label = { Text(text = "password") },
    visualTransformation = PasswordVisualTransformation()
)

Penjelasan: Fungsi PasswordVisualTransformation() sangat penting untuk keamanan. Ia secara otomatis mengubah teks yang diketik menjadi titik-titik (••••••) agar tidak bisa diintip oleh orang lain di sekitar pengguna.

3. Elemen Visual dan Interaksi

Aplikasi ini tidak hanya berisi teks, tapi juga elemen visual agar lebih menarik:

• Image: Saya menambahkan gambar ilustrasi di bagian atas dan ikon sosial media di bagian bawah menggunakan painterResource.

• Clickable Text: Teks seperti "Forgot password?" dibuat interaktif menggunakan Modifier.clickable. Meskipun fungsinya masih kosong, ini adalah dasar untuk navigasi antar halaman di masa depan.

• Spacer: Untuk mengatur napas desain, saya menggunakan Spacer dengan berbagai ukuran (misalnya 16.dp) agar antar komponen tidak saling berdempetan.

4. Debugging dengan Logcat

Untuk memastikan data yang dimasukkan pengguna sudah benar, saya menambahkan fungsi log pada tombol Login:

Button(onClick = {
    Log.i("Credential", "Email: $email Password: $password")
})

Penjelasan: Saat tombol ditekan, data email dan password akan muncul di jendela Logcat Android Studio. Ini adalah teknik debugging dasar untuk memverifikasi bahwa State kita bekerja dengan benar sebelum dihubungkan ke database asli.