Tugas 7 PPB G - Membuat Halaman Login Sederhana Menggunakan Jetpack Compose

 Tugas Pertemuan 7 PPB G 2025

oleh : Arfi Raushani Fikra (5025211084)

Pada pertemuan ke-7 ini, kami diminta membuat aplikasi android sederhana yang menampilkan halaman login menggunakan Jetpack Compose. Pengguna dapat mengisi email dan password, dan sistem akan menampilkan dialog keberhasilan atau kegagalan login berdasarkan input yang diberikan.

Source code dapat dilihat disini

Berikut penjelasan kodenya

a. MainActivity.kt

• Kelas utama aplikasi yang me-load tampilan UI menggunakan Jetpack Compose melalui fungsi setContent.
• Tema aplikasi ditentukan oleh SimpleLoginPageTheme.
• Memuat tampilan LoginScreen()

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            SimpleLoginPageTheme {
                LoginScreen()
            }
        }
    }
}

b. Fungsi Utama: LoginScreen()

Fungsi @Composable yang menampilkan seluruh antarmuka halaman login.

@Composable
fun LoginScreen() {

 # State Management

• email: Menyimpan input email pengguna.

• password: Menyimpan input password pengguna.

• passwordVisible: Mengatur visibilitas karakter password.

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

• loginMessage: Disiapkan untuk pesan status login (tidak digunakan secara aktif).

• showSuccessDialog: Mengatur tampilan dialog sukses.

• showErrorDialog: Mengatur tampilan dialog gagal.

var loginMessage by remember { mutableStateOf("") }
var showSuccessDialog by remember { mutableStateOf(false) }
var showErrorDialog by remember { mutableStateOf(false) }

  # UI Komponen

• Gambar Login: Ilustrasi di atas teks "Welcome Back".

• Text: "Welcome Back" dan "Login to your account".

Image(
    painter = painterResource(id = R.drawable.newlogin),
    contentDescription = "Ilustrasi Login",
    modifier = Modifier
        .size(300.dp)
        .padding(bottom = 8.dp),
    contentScale = ContentScale.Fit
)

Text(
    text = "Welcome Back",
    style = MaterialTheme.typography.headlineMedium,
    fontWeight = FontWeight.Bold
)

• OutlinedTextField: Untuk input email dan password, dilengkapi icon untuk toggle password visibility.

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email address") },
    singleLine = true,
    modifier = Modifier.fillMaxWidth()
)

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

OutlinedTextField(
    value = password,
    onValueChange = { password = it },
    label = { Text("Password") },
    singleLine = true,
    modifier = Modifier.fillMaxWidth(),
    visualTransformation = if (passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),
    keyboardOptions = KeyboardOptions(
        keyboardType = KeyboardType.Password,
        imeAction = ImeAction.Done
    ),
    trailingIcon = {
        val image = if (passwordVisible)
            Icons.Filled.Visibility
        else Icons.Filled.VisibilityOff

        val description = if (passwordVisible) "Hide password" else "Show password"

        IconButton(onClick = { passwordVisible = !passwordVisible }) {
            Icon(imageVector = image, contentDescription = description)
        }
    }
)

• Button: Tombol login, dengan warna kustom #195494.

Button(
    onClick = {
        if (email == dummyEmail && password == dummyPassword) {
            showSuccessDialog = true
        } else {
            showErrorDialog = true
        }
    },
    modifier = Modifier.fillMaxWidth(),
    colors = ButtonDefaults.buttonColors(
        containerColor = Color(0xFF195494)
    )
) {
    Text("Login")
}

• Text: "Forgot Password?" dan "Or sign in with".

Text("Forgot Password?", modifier = Modifier.padding(top = 8.dp))

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

Text("Or sign in with")

• Row of Icons: Opsi login sosial (Facebook, Google, X).

Row(horizontalArrangement = Arrangement.SpaceEvenly, modifier = Modifier.fillMaxWidth()) {
    Image(
        painter = painterResource(id = R.drawable.facebook),
        contentDescription = "Facebook",
        modifier = Modifier
            .size(48.dp)
            .padding(8.dp)
    )
    Image(
        painter = painterResource(id = R.drawable.google),
        contentDescription = "Google",
        modifier = Modifier
            .size(48.dp)
            .padding(8.dp)
    )
    Image(
        painter = painterResource(id = R.drawable.x),
        contentDescription = "X",
        modifier = Modifier
            .size(48.dp)
            .padding(8.dp)
    )
}

 # Logika Login

• Validasi terhadap input email dan password.

• Jika cocok dengan dummyEmail dan dummyPassword, maka showSuccessDialog = true.

• Jika tidak cocok, showErrorDialog = true.

if (email == dummyEmail && password == dummyPassword) {
    showSuccessDialog = true
} else {
    showErrorDialog = true
}

# Dialog

• SuccessDialog: Menampilkan pesan sambutan jika login berhasil.

• ErrorDialog: Menampilkan pesan kesalahan jika login gagal.

if (showSuccessDialog) {
    AlertDialog(
        onDismissRequest = { showSuccessDialog = false },
        title = { Text("Berhasil Login") },
        text = { Text("Selamat datang kembali!") },
        confirmButton = {
            Button(onClick = { showSuccessDialog = false }) {
                Text("OK")
            }
        }
    )
}

if (showErrorDialog) {
    AlertDialog(
        onDismissRequest = { showErrorDialog = false },
        title = { Text("Login Gagal") },
        text = { Text("Email atau password salah. Silakan coba lagi.") },
        confirmButton = {
            Button(onClick = { showErrorDialog = false }) {
                Text("Coba Lagi")
            }
        }
    )
}

Berikut hasil dari aplikasinya

                                                                     ~ Terima Kasih ~