Pertemuan 7 - PPB G

 Nama : Muhammad Hafidh Rosyadi

NRP : 5025211013

Kelas  : PPB G

Simple Login Page

Kode : https://github.com/Hfdrsyd/Tugas-PPB/tree/main/LoginPage 

 

 

 

MainActivity

MainActivity bertugas menginisialisasi tampilan aplikasi dengan menerapkan tema LoginPageTheme, lalu menampilkan LoginScreen sebagai konten utama:

setContent {
    LoginPageTheme {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background
        ) {
            LoginScreen()
        }
    }
}

LoginScreen

LoginScreen adalah fungsi Composable utama yang mendesain tampilan halaman login. Beberapa poin penting di dalamnya:
 

1. Manajemen State:

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

State ini menyimpan input username dan password dari pengguna.

2. Tata Letak Utama:

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center
) {
    // Komponen UI diatur di sini
}

Tata letak menggunakan Column untuk menempatkan elemen-elemen secara vertikal di tengah layar.

3. Komponen-komponen UI:

    - Logo Aplikasi: Menampilkan gambar logo dari resources drawable.
    - Judul: Teks "Welcome Back" dengan style headline medium.
    - Input Username: Menggunakan OutlinedTextField untuk memasukkan username.
    - Input Password: OutlinedTextField khusus password dengan PasswordVisualTransformation.
    - Tombol Login: Button yang menampilkan Toast saat ditekan
    - Tautan "Forgot Password?": Teks interaktif berwarna aksen.

4. Input Password yang Aman:

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

Input password menggunakan PasswordVisualTransformation agar teks yang diketik tidak terlihat langsung, serta mengatur keyboard bertipe password.

5. Fungsi Tombol Login:

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

    Saat tombol login ditekan, aplikasi akan menampilkan notifikasi Toast bertuliskan "Logged in". Dalam pengembangan lebih lanjut, di bagian ini biasanya ditambahkan verifikasi autentikasi pengguna.

Fitur-fitur UI

Halaman login ini memiliki beberapa fitur penting:

    - Tampilan Bersih dan Minimalis: Fokus pada pengalaman pengguna.
    - Input Password Tersembunyi: Memberikan keamanan tambahan.
    - Umpan Balik Cepat: Pengguna mendapat notifikasi saat login ditekan.
    - Desain Responsif: UI beradaptasi dengan berbagai ukuran layar menggunakan fillMaxWidth() dan padding.

Kesimpulan

Kode ini memberikan contoh halaman login yang bersih, fungsional, dan modern dengan pendekatan deklaratif menggunakan Jetpack Compose. Semua elemen penting untuk login pengguna, seperti input username, password, tombol login, dan tautan reset password telah diimplementasikan. UI mengikuti prinsip Material Design 3, memastikan tampilan yang konsisten dan modern. Pendekatan berbasis state membuat pengelolaan UI lebih mudah dan lebih reaktif terhadap perubahan.