Nama  : Fathin Muhashibi Putra
NRP   : 5025211229
Kelas  : PPB - A

Tugas 7:

Membuat Halaman Simple Login

      Pada tugas kali ini, saya membuat halaman simple login. Berikut adalah langkah-langkah yang dilakukan:

1. Buat Proyek Baru

Buka Android Studio dan buat proyek baru dengan memilih Empty Compose Activity. Beri nama proyek MyLogin dan biarkan pengaturan lainnya dalam kondisi default.

2. Struktur Dasar Project

Setelah proyek dibuat, buka file MainActivity.kt dan siapkan struktur dasar untuk menampilkan UI login menggunakan Jetpack Compose.

package com.example.mylogin
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.mylogin.ui.theme.MyLoginTheme

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

3. Implementasi LoginScreen

Untuk membuat halaman login yang responsif, saya mengimplementasikan LoginScreen composable yang berisi semua komponen UI dan logika untuk mengelola keyboard dan fokus input.

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun LoginScreen() {
    var email by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    val keyboardController = LocalSoftwareKeyboardController.current
    val focusManager = LocalFocusManager.current

    val passwordFocusRequester = remember { FocusRequester() }

    val interactionSource = remember { MutableInteractionSource() }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(horizontal = 24.dp)
            .clickable(
                interactionSource = interactionSource,
                indication = null
            ) {
                keyboardController?.hide()
                focusManager.clearFocus()
            },
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // Komponen UI akan ditambahkan di sini
    }
}

4. Menambahkan Gambar dan Judul

Saya menambahkan gambar ilustrasi login dan teks judul "Welcome Back" untuk memberikan tampilan yang menarik pada halaman login.

// Gambar login
Image(
    painter = painterResource(id = R.drawable.a),
    contentDescription = "Login image",
    modifier = Modifier.size(200.dp)
)

// Teks Welcome Back
Text(
    text = "Welcome Back",
    fontSize = 28.sp,
    fontWeight = FontWeight.Bold,
    color = Color(0xFF673AB7)  // Warna ungu
)

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

// Subtitle
Text(
    text = "Login to your account",
    fontSize = 16.sp,
    color = Color(0xFF9575CD)  // Warna ungu muda
)

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

5. Implementasi Form Login

Saya mengimplementasikan form login dengan dua field input untuk email dan password.

// Email input field
OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email address") },
    modifier = Modifier.fillMaxWidth(),
    shape = RoundedCornerShape(8.dp),
    keyboardOptions = KeyboardOptions(
        keyboardType = KeyboardType.Email,
        imeAction = ImeAction.Next
    ),
    keyboardActions = KeyboardActions(
        onNext = {
            passwordFocusRequester.requestFocus()
        }
    ),
    singleLine = true
)

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

// Password input field
OutlinedTextField(
    value = password,
    onValueChange = { password = it },
    label = { Text("Password") },
    modifier = Modifier
        .fillMaxWidth()
        .focusRequester(passwordFocusRequester),
    shape = RoundedCornerShape(8.dp),
    visualTransformation = PasswordVisualTransformation(),
    keyboardOptions = KeyboardOptions(
        keyboardType = KeyboardType.Password,
        imeAction = ImeAction.Done
    ),
    keyboardActions = KeyboardActions(
        onDone = {
            keyboardController?.hide()
            focusManager.clearFocus()
        }
    ),
    singleLine = true
)

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

6. Tombol Login dan Fitur Tambahan

Saya menambahkan tombol login dan teks "Forgot Password?" untuk membantu pengguna yang lupa password.

// Tombol login
Button(
    onClick = {
        keyboardController?.hide()
        focusManager.clearFocus()
        // Di sini nantinya bisa ditambahkan logika login yang sebenarnya
    },
    modifier = Modifier.fillMaxWidth(0.7f),
    shape = RoundedCornerShape(12.dp),
    colors = ButtonDefaults.buttonColors(
        containerColor = Color(0xFF673AB7)  // Warna ungu
    )
) {
    Text(
        text = "Login",
        fontSize = 16.sp,
        fontWeight = FontWeight.Medium,
        modifier = Modifier.padding(vertical = 8.dp)
    )
}

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

// Teks Forgot Password
Text(
    text = "Forgot Password?",
    color = Color(0xFF673AB7),  // Warna ungu
    fontWeight = FontWeight.Medium,
    modifier = Modifier.clickable {
        // Di sini nantinya bisa ditambahkan logika untuk reset password
    }
)

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

7. Social Media Login

Untuk memberikan opsi login alternatif, saya menambahkan pilihan login melalui platform media sosial seperti Facebook, Google, dan Twitter.

// Divider dengan teks di tengah
Row(
    modifier = Modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically
) {
    Spacer(
        modifier = Modifier
            .weight(1f)
            .height(1.dp)
            .padding(end = 8.dp)
            .background(Color.LightGray)
    )
    Text(
        text = "Or sign in with",
        color = Color.Gray
    )
    Spacer(
        modifier = Modifier
            .weight(1f)
            .height(1.dp)
            .padding(start = 8.dp)
            .background(Color.LightGray)
    )
}

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

// Ikon media sosial
Row(
    modifier = Modifier
        .fillMaxWidth()
        .padding(horizontal = 40.dp),
    horizontalArrangement = Arrangement.SpaceEvenly
) {
    // Facebook
    Image(
        painter = painterResource(id = R.drawable.fb),
        contentDescription = "Facebook",
        modifier = Modifier
            .size(60.dp)
            .clickable {
                //Facebook clicked
            }
    )
    
    // Google
    Image(
        painter = painterResource(id = R.drawable.google),
        contentDescription = "Google",
        modifier = Modifier
            .size(60.dp)
            .clickable {
                //Google clicked
            }
    )
    
    // Twitter
    Image(
        painter = painterResource(id = R.drawable.twitter),
        contentDescription = "Twitter",
        modifier = Modifier
            .size(60.dp)
            .clickable {
                //Twitter clicked
            }
    )
}

8. Hasil Akhir

Setelah mengikuti semua tahap tersebut tersebut, maka jadilah sebuah halaman simple login.

• Screenshot Hasil: 

• Kode Lengkap (Github Code): 

https://github.com/fathinmputra/PPB_Tugas7_Aplikasi_Simple_Login.git

• Video Demo Aplikasi Simple Login:

Referensi :

https://kuliahppb.blogspot.com/2024/03/studi-kasus-membuat-halaman-login.html