Pertemuan 7

 Nama: Thopaz Givangkara Rosadi

NRP: 5025231050

Kelas: PPB (C)

Source Code: https://github.com/rsthopaz/Pemrograman-Mobile/tree/main/Pertemuan_7

This code based on: https://www.youtube.com/watch?v=-Kj9T1sa6zk (link on blogspot lecture)

1. Fungsi Utama UI

@Composable
fun LoginScreen()

Penjelasan:

@Composable
Artinya fungsi ini digunakan untuk membuat tampilan UI di Jetpack Compose.

LoginScreen()
Ini adalah layar login yang akan ditampilkan di aplikasi.

---

2. State Variable (Data yang berubah)

var email by remember { mutableStateOf("") }
var password by remember { mutableStateOf("") }

Penjelasan:

Ini bagian paling penting di Compose.

mutableStateOf("")

Digunakan untuk menyimpan data yang bisa berubah.

remember

Agar data:

• tidak hilang saat UI di-refresh
• tetap tersimpan selama composable aktif

Artinya:

• email → menyimpan input email user
• password → menyimpan input password user

---

3. Layout Utama (Column)

Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
)

Penjelasan:

Column
Semua komponen ditampilkan secara vertikal (atas ke bawah).

Modifier:

• fillMaxSize() → memenuhi seluruh layar
• verticalArrangement = Center → isi di tengah vertikal
• horizontalAlignment = CenterHorizontally → isi di tengah horizontal

Jadi semua UI ada di tengah layar

---

4. Gambar Login

Image(
    painter = painterResource(id = R.drawable.login2),
    contentDescription = "Login image",
    modifier = Modifier.size(200.dp)
)

Penjelasan:

• Menampilkan gambar dari folder drawable
• size(200.dp) → ukuran gambar 200dp
• contentDescription → untuk aksesibilitas

---

5. Judul

Text(
    text = "welcome back",
    fontSize = 28.sp,
    fontWeight = FontWeight.Bold
)

Penjelasan:

• Menampilkan teks besar
• fontSize = 28.sp → ukuran teks besar
• Bold → tebal

---

6. Sub Judul

Text(text = "Login to your account")

Penjelasan:
Teks kecil sebagai deskripsi.

---

7. Spacer (Jarak)

Spacer(modifier = Modifier.height(16.dp))

Penjelasan:

Memberi jarak antar komponen.

Contoh:

• 4.dp → kecil
• 16.dp → sedang
• 32.dp → besar

---

8. Input Email

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text(text = "email address") }
)

Penjelasan:

value = email
Menampilkan isi dari variabel email.

onValueChange
Setiap user mengetik:

email = it

it = teks baru dari user

label
Tulisan di dalam field (placeholder)

---

9. Input Password

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

Penjelasan:

Sama seperti email, tapi:

PasswordVisualTransformation()
membuat teks jadi •••••• (tersembunyi)

---

10. Tombol Login

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

Penjelasan:

Saat tombol ditekan:

• data email & password dicetak ke Logcat

Log.i("Credential", "Email: $email Password: $password")

Untuk debugging (cek input user)

---

11. Text "Forgot Password"

Text(
    text = "Forgot password?",
    modifier = Modifier.clickable { }
)

Penjelasan:

• Bisa diklik
• Saat ini belum ada aksi (kosong {})

 Biasanya dipakai untuk:

• pindah ke halaman reset password

---

12. Text "Or Sign In With"

Text(text="or sign in with")

Penjelasan:
Pembatas antara login biasa dan sosial media.

---

13. Row (Login Sosial Media)

Row(
    modifier = Modifier.fillMaxWidth().padding(40.dp),
    horizontalArrangement = Arrangement.SpaceEvenly
)

Penjelasan:

Row
Menyusun item secara horizontal (kiri ke kanan)

Arrangement.SpaceEvenly
Jarak antar icon sama rata

---

14. Icon Sosial Media

Image(
    painter = painterResource(id = R.drawable.google),
    contentDescription = "Google",
    modifier = Modifier.size(60.dp).clickable {}
)

Penjelasan:

• Menampilkan icon Google
• Bisa diklik
• Tapi belum ada fungsi

Sama untuk:

• Twitter
• Facebook