Tugas 5 (Pertemuan ke 6): Studi Kasus - Membuat Halaman Login

 Oleh Arya Widia Putra / 5025201016

Studi Kasus - Membuat Halaman Login

Halaman login adalah salah satu bagian terpenting untuk aplikasi dapat digunakan pengguna, terutama aplikasi yang membutuhkan proses otentikasi. Halaman login biasanya berisi form data pengguna, yang mana biasanya terdiri dari email address/username, password, dan tombol submit data untuk login.

1. Dokumentasi

Code explanation

  1. File layout: LoginScreen.kt and HomeScreen.kt

    Kedua file ini digunakan untuk mengatur layout dari masing-masing halaman.

  2. Perpindahan halaman: Navigation.kt

    File in mengandung logika untuk perpindahan halaman. Tombol login akan mengarahkan halaman berpindah dari Login ke Home, sedangkan tombol logout akan membuat halaman berpindah dari Home ke Login. Hal ini dilakukan dengan cara meneruskan fungsi onLoginClick dan onLogoutClick ke masing-masing halaman, lalu digunakan di tombolm halaman masing-masing.

                        
composable(route = Route.LoginScreen().name){
    LoginScreen(
        onLoginClick = {
            navHostController.navigate(
                Route.HomeScreen().name
            )
        }
    )
}
composable(route = Route.HomeScreen().name){
    HomeScreen(
        onLogoutClick = {
            navHostController.navigate(
                Route.LoginScreen().name
            )
        }
    )
}

  3. MainActivity.kt

    Pada MainActivity, bagian lambda setContent kita tambahkan kode di bawah supaya perubahan halaman dapat diatur oleh NavHostController dan MyNavigation. 

                        
val navController = rememberNavController()
MyNavigation(navHostController = navController)

2. Tampilan UI

Tampilan halaman untuk login


Tampilan halaman Home saat user berhasil login.



3. Video Demonstrasi

Comments

Post a Comment