PPB G - Pertemuan 7

Nama: Moh. rosy haqqy aminy

NRP: 5025211012

Kelas: PPB G

Membuat login sederhana

link github: https://github.com/rosyhaqqy/Tugas_Tugas_PPB/tree/main/login_page

---

✅ Penjelasan Kode LoginScreen Android dengan Jetpack Compose

Kode ini merupakan implementasi sederhana halaman login menggunakan Jetpack Compose dengan Material 3. Berikut adalah penjelasan bagian per bagian:

---

📱 MainActivity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            LoginPageTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    LoginScreen()
                }
            }
        }
    }
}

Penjelasan:

• MainActivity adalah entry point aplikasi.

• setContent { ... } digunakan untuk memuat UI menggunakan Jetpack Compose.

• LoginScreen() dipanggil untuk menampilkan layar login di dalam tema LoginPageTheme.

---

🔐 Fungsi LoginScreen

@Composable
fun LoginScreen() {
    val context = LocalContext.current
    var username by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

• username dan password disimpan dalam state menggunakan remember agar UI bisa bereaksi saat nilainya berubah.

• context digunakan untuk menampilkan Toast.

---

🧱 Tampilan Halaman Login

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {

• Column menyusun komponen secara vertikal di tengah layar.

---

✏️ Input Username & Password

        OutlinedTextField(
            value = username,
            onValueChange = { username = it },
            label = { Text("Username") },
            ...
        )
        
        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("Password") },
            ...
            visualTransformation = PasswordVisualTransformation(),
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
        )

• OutlinedTextField digunakan untuk input teks.

• Password disembunyikan dengan PasswordVisualTransformation().

---

🔘 Tombol Login

        Button(
            onClick = {
                Toast.makeText(context, "Logged in", Toast.LENGTH_SHORT).show()
            },
            ...
        ) {
            Text("Login")
        }

• Saat tombol diklik, Toast akan muncul dengan pesan "Logged in".

• Belum ada validasi login — ini bisa dikembangkan lebih lanjut.

---

🆘 Tautan Lupa Password

        Text(
            text = "Forgot Password?",
            color = MaterialTheme.colorScheme.primary,
            modifier = Modifier.padding(top = 8.dp)
        )

• Menampilkan teks untuk lupa password.

• Belum interaktif (bisa dibuat klik dengan Modifier.clickable { ... }).

---

👀 Preview Fungsi

@Preview(showBackground = true)
@Composable
fun LoginScreenPreview() {
    LoginPageTheme {
        LoginScreen()
    }
}

• Digunakan untuk menampilkan preview layout di Android Studio.