TUGAS 7 PPB - KEYSA ANADEA 5025211028

TUGAS 7 PPB

Deskripsi Proyek: Login Page

Nama: Keysa Anadea Aqiva Ajie

NRP: 5025211028

Kelas: PPB A

Membangun sebuah aplikasi Login Page sederhana menggunakan Jetpack Compose di Android Studio.
Aplikasi ini digunakan untuk menerima inputan email dan password, serta melakukan validasi sederhana sebelum login.

Langkah-Langkah Pembuatan Aplikasi

1. Membuat Project Baru

Membuat project baru di Android Studio dengan konfigurasi berikut:

• Template: Empty Activity (Compose aktif)

• Nama Project: LoginPage

• Bahasa: Kotlin

• Minimum SDK: API 24 (Android 7.0 Nougat)

2. Membuat Halaman Login

Semua tampilan dan logika dibuat menggunakan Jetpack Compose.
Fitur halaman login:

• Text Input Email: Input email pengguna.

• Text Input Password: Input password pengguna.

• Button Sign In: Untuk melakukan validasi dan login.

• Validasi:

  • Email tidak boleh kosong dan harus sesuai format email.

  • Password tidak boleh kosong dan harus lebih dari 6 karakter.

• Toast Message:

  • Menampilkan pesan sukses atau kesalahan saat login.

Struktur Program

a) MainActivity.kt

Semua fungsi login ditempatkan di dalam file MainActivity.kt.

Berikut fitur utamanya:

• State Management:

  • email ➔ Menyimpan input email pengguna.

  • password ➔ Menyimpan input password pengguna.

• Layout:

  • Terdiri dari Column dengan input field dan tombol login.

  • Tampilan sederhana dengan background ungu muda (#F8F4FF).

• Validasi:

  • Cek email kosong atau salah format.

  • Cek password kosong atau kurang dari 6 karakter.

• Toast Feedback:

• Menampilkan toast pada setiap validasi.

• Menampilkan toast "Login berhasil!" jika semua validasi lolos.

Hasil Kode:

KODE:

Mainactivity.kt

package com.example.loginpage

import android.os.Bundle
import android.util.Patterns
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {  // 🛠️ sudah pakai nama default MainActivity
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = Color(0xFFF8F4FF) // Background ungu muda
                ) {
                    LoginScreen()
                }
            }
        }
    }
}

@Composable
fun LoginScreen() {
    val context = LocalContext.current

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

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(24.dp),
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = "Welcome Back!",
            fontSize = 28.sp,
            color = Color.Black
        )

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

        OutlinedTextField(
            value = email,
            onValueChange = { email = it },
            label = { Text("Email") },
            singleLine = true,
            modifier = Modifier.fillMaxWidth(),
            keyboardOptions = KeyboardOptions.Default.copy(
                keyboardType = KeyboardType.Email,
                imeAction = ImeAction.Next
            )
        )

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

        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("Password") },
            singleLine = true,
            modifier = Modifier.fillMaxWidth(),
            keyboardOptions = KeyboardOptions.Default.copy(
                keyboardType = KeyboardType.Password,
                imeAction = ImeAction.Done
            )
        )

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

        Button(
            onClick = {
                if (email.isEmpty()) {
                    Toast.makeText(context, "Email tidak boleh kosong", Toast.LENGTH_SHORT).show()
                } else if (!Patterns.EMAIL_ADDRESS.matcher(email).matches()) {
                    Toast.makeText(context, "Format email salah", Toast.LENGTH_SHORT).show()
                } else if (password.isEmpty()) {
                    Toast.makeText(context, "Password tidak boleh kosong", Toast.LENGTH_SHORT).show()
                } else if (password.length < 6) {
                    Toast.makeText(context, "Password minimal 6 karakter", Toast.LENGTH_SHORT).show()
                } else {
                    Toast.makeText(context, "Login berhasil!", Toast.LENGTH_SHORT).show()
                }
            },
            modifier = Modifier.fillMaxWidth()
        ) {
            Text(text = "Sign In")
        }
    }
}