ETS - Aplikasi Login dan Transaksi

   

ETS

Login dan Transaksi

Nama    : Arya Nur Razzaq

NRP    : 5025201102

Kelas    : PPB B

Kali ini kita mendapatkan tugas ETS untuk membuat aplikasi yang dapat melakukan login dan akses pin transaksi

1. Set up project

Buka android studio lalu pilih New Project untuk membuat project baru. Kemudian pilih Empty Activity untuk set up project

2. Source Code

• MainActivity

package com.example.loginpage

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.ui.graphics.Color
import androidx.compose.material3.Surface
import com.example.loginpage.ui.theme.LoginPageTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LoginPageTheme {
                Surface(color = Color.White) { 
                    SetupNavigation()
                }
            }
        }
    }
}

• LoginScreen.kt

package com.example.loginpage

import android.util.Log
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.material3.Button
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController

@Composable
fun LoginScreen(navController: NavHostController){

    var email by remember {
        mutableStateOf("")
    }

    var password by remember {
        mutableStateOf("")
    }

    Column(
        modifier =  Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "Welcome Back", fontSize = 28.sp, fontWeight = FontWeight.Bold)

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

        Text(text = "Login to your account")

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

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

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

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

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

        Button(onClick = {
            Log.i("Credential", "Email : $email Password : $password")
            navigateToTransaksi(navController)
        }) {
            Text(text = "Login")
        }

    }
}

• Navigation.kt

package com.example.loginpage


import androidx.compose.runtime.Composable
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

@Composable
fun SetupNavigation() {
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = "login") {
        composable("login") {
            LoginScreen(navController)
        }
        composable("transaksi") {
            TransaksiScreen(navController)
        }
        composable("NomorPin/{nomorRekening}/{jumlahTransaksi}") { backStackEntry ->
            val nomorRekening = backStackEntry.arguments?.getString("nomorRekening") ?: ""
            val jumlahTransaksi = backStackEntry.arguments?.getString("jumlahTransaksi") ?: ""
            NomorPinScreen(navController, nomorRekening, jumlahTransaksi)
        }
    }
}

fun navigateToTransaksi(navController: NavHostController) {
    navController.navigate("transaksi")
}

• Shape.kt

/*
 * Copyright (C) 2023 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
package com.example.woof.ui.theme

import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Shapes
import androidx.compose.ui.unit.dp

val Shapes = Shapes(
    medium = RoundedCornerShape(bottomStart = 16.dp, topEnd = 16.dp)
)

• TransaksiScreen.kt

package com.example.loginpage

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.text.style.TextAlign
import androidx.navigation.NavHostController
import kotlinx.coroutines.delay

@Composable
fun TransaksiScreen(navController: NavHostController) {
    var nomorRekening by remember { mutableStateOf("") }
    var jumlahTransaksi by remember { mutableStateOf("") }
    var showMessage by remember { mutableStateOf(false) }
    var messageToShow by remember { mutableStateOf("") }

    var isSubmitClicked by remember { mutableStateOf(false) }

    LaunchedEffect(isSubmitClicked) {
        if (isSubmitClicked) {
            delay(100)
        }
    }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Spacer(modifier = Modifier.weight(0.1f))

        Column(
            modifier = Modifier.padding(horizontal = 16.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Text(
                text = "Masukkan Nomor Rekening dan Jumlah Transaksi",
                style = MaterialTheme.typography.headlineMedium,
                textAlign = TextAlign.Center,
                modifier = Modifier.fillMaxWidth()
            )

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

            TextField(
                value = nomorRekening,
                onValueChange = {
                    nomorRekening = it
                },
                label = { Text("Nomor Rekening") },
                modifier = Modifier
                    .fillMaxWidth()
                    .border(width = 1.dp, color = Color.Black)
                    .background(Color.Transparent)
            )

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

            TextField(
                value = jumlahTransaksi,
                onValueChange = {
                    jumlahTransaksi = it
                },
                label = { Text("Jumlah Transaksi") },
                modifier = Modifier
                    .fillMaxWidth()
                    .border(width = 1.dp, color = Color.Black)
                    .background(Color.Transparent)
            )

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

            Button(onClick = {
                if (nomorRekening.isNotEmpty() && jumlahTransaksi.isNotEmpty()) {
                    navController.navigate("NomorPin/$nomorRekening/$jumlahTransaksi")
                } else {
                    showMessage = true
                    messageToShow = "Masukkan nomor rekening dan jumlah transaksi"
                }
            }) {
                Text("Kirim")
            }

            if (showMessage) {
                Text(messageToShow)
            }
        }

        Spacer(modifier = Modifier.weight(1f))
    }
}

• NomorPinScreen.kt

package com.example.loginpage

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.navigation.NavHostController

@Composable
fun NomorPinScreen(navController: NavHostController, nomorRekening: String, jumlahTransaksi: String) {
    var pin by remember { mutableStateOf("") }
    var pinValidationMessage by remember { mutableStateOf("") }
    var showDialog by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Masukkan PIN",
            style = MaterialTheme.typography.headlineMedium,
            textAlign = TextAlign.Center,
            modifier = Modifier.fillMaxWidth()
        )

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

        OutlinedTextField(
            value = pin,
            onValueChange = { pin = it },
            label = { Text("PIN") },
            singleLine = true,
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
            visualTransformation = PasswordVisualTransformation(),
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp)
        )

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

        Button(
            onClick = {
                if (pin == "123456") {
                    showDialog = true
                } else {
                    pinValidationMessage = "PIN salah, coba lagi."
                }
            }
        ) {
            Text("Submit")
        }

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

        if (pinValidationMessage.isNotEmpty()) {
            Text(
                text = pinValidationMessage,
                style = MaterialTheme.typography.bodyMedium,
                color = Color.Red
            )
        }

        if (showDialog) {
            AlertDialog(
                onDismissRequest = {
                    showDialog = false
                },
                text = {
                    Column {
                        Text(
                            text = "Transaksi berhasil ke nomor rekening $nomorRekening sejumlah $jumlahTransaksi",
                            textAlign = TextAlign.Center,
                            modifier = Modifier.fillMaxWidth()
                        )
                    }
                },
                confirmButton = {
                    Button(
                        onClick = {
                            showDialog = false
                        }
                    ) {
                        Text("OK")
                    }
                },
                modifier = Modifier.padding(16.dp)
            )
        }
    }
}

3. Tampilan App Login dan Transaksi

• Tampilan Login

• Tampilan Input Nomor Rekening dan Jumlah Transaksi

• Tampilan Input PIN