Tugas 4 PPB - B

Nama : Tsabita Putri Ramadhany

NRP : 5025211130

Kelas : PPB - B


Tugas 4

Aplikasi Menampilkan Halaman Login


Tugas : Menggunakan Jetpack Compose untuk membangun aplikasi Android sederhana yang menampilkan halaman login

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


Saya telah membuat aplikasi yang menampilkan halaman login menggunakan Andriod Studio.

Membuat Halaman Login di Android Studio

Memulai Proyek di Android Studio

  1. Membuka Android Studio:
    • Buka Android Studio dan pilih opsi "Empty Activity".
    • Beri nama proyek sebagai "MyLogin" dan pilih level API minimum. Untuk proyek ini, kita akan menggunakan API 26 (Oreo).
    • Setelah template berhasil dimuat, kita akan melanjutkan untuk menyesuaikan struktur kode default proyek sesuai kebutuhan.

Mengubah Struktur Kode Default

  1. Modifikasi Kode Default:
    • Modifikasi struktur kode default sesuai dengan kebutuhan proyek halaman login sederhana.
    • Hapus semua fungsi yang memiliki anotasi @Composable dan isi dari setContent pada class MainActivity. Ini akan memberi kita ruang untuk menambahkan kode khusus yang dibutuhkan proyek.

Membuat File Kotlin Baru

  1. Menambahkan File LoginScreen.kt:
    • Buat file baru bernama LoginScreen.kt yang akan digunakan untuk menuliskan kode tampilan.
    • Dalam LoginScreen.kt, buat fungsi LoginScreen() yang akan dipanggil pada setContent di MainActivity.

Merancang Tampilan Awal Halaman Login

  1. Mendesain Tampilan Login:
    • Buat tampilan halaman login dengan menggunakan format Column di LoginScreen.kt.
    • Tambahkan gambar dan teks "Selamat Datang" menggunakan fungsi Image() dan Text().
    • Sesuaikan tampilan dengan modifier seperti fillMaxSize() untuk mengisi seluruh ruang yang tersedia, verticalArrangement untuk memusatkan objek secara vertikal, dan horizontalAlignment untuk memusatkan objek secara horizontal.
    • Gunakan fungsi Spacer() untuk memberikan jarak antara objek, sehingga tampilan terlihat rapi dan terstruktur.

Menambahkan Form Email dan Password

  1. Menambahkan Form Input:
    • Gunakan fungsi OutlinedTextField() untuk membuat form input email dan password.
    • Tambahkan teks label "Email Address" pada form email dan teks label "Password" pada form password menggunakan fungsi Text().
    • Bungkus form email dan password dalam Column dan tambahkan fungsi Spacer() untuk memberikan jarak antara form tersebut.
    • Tambahkan fungsi Button() dengan teks "Login". Untuk sementara, biarkan nilai onClick kosong sampai kita menambahkan logika untuk login.

Menambahkan Logo Media Sosial

  1. Menambahkan Elemen Tambahan:
    • Tambahkan teks "Lupa Password?" yang dapat diklik dan teks "Login dengan" sebagai bagian dari tampilan halaman login.
    • Tambahkan beberapa logo media sosial dalam Row untuk menampilkan susunan logo secara horizontal.
    • Pastikan logo media sosial dapat diklik untuk memberikan alternatif metode login bagi pengguna.

Membuat Logika Sederhana untuk Login

  1. Membuat Variabel dan Logika Login:
    • Buat variabel email dan password menggunakan by remember dengan fungsi mutableStateOf() di dalamnya. Ini akan menyimpan nilai input dari pengguna.
    • Ubah nilai value dan onValueChange pada OutlinedTextField() sesuai input pengguna.
    • Pada fungsi Button, tambahkan argumen onClick untuk menyimpan Credential (email & password) ke dalam Log setelah pengguna menginput data. Ini akan memungkinkan kita menangkap data login yang diinput pengguna.

Hasil Proyek Simple Login Page

  1. Menampilkan Hasil:
    • Tampilan halaman login akan mencakup gambar, teks "Selamat Datang", form email dan password, tombol login, serta logo media sosial yang dapat diklik sebagai alternatif metode login.
    • Implementasi logika sederhana untuk menyimpan Credential pengguna ke dalam Log, memungkinkan kita menangkap dan menyimpan data login yang diinput pengguna.

Hasil Aplikasi:


Source code : GitHub

Dokumentasi Saat mengerjakan :





Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 1 PPL - A

Gambar
Nama  : Tsabita Putri Ramadhany NRP  : 5025211130 Kelas : PPL - A Tugas 1 Dokumen Perancangan Perangkat Lunak Judul : Sistem Online untuk Dokumen Perancangan Perangkat Lunak bagi Perusahaan atau Tim Pengembang Link : Dokumen A. Deskripsi Dokumen Dokumen tersebut diharapkan dapat membantu tim pengembang software dengan membuat Sistem Online Untuk Dokumen Perancangan Perangkat Lunak Bagi Perusahaan/Tim Pengembang berbasis web yang dapat digunakan tim pengembang software untuk berkolaborasi dalam membuat perancangan maupun dalam pembuatan suatu sistem. Sistem ini dapat menyimpan seluruh requirementsuatu software hingga rancangan seperti Data Flow Diagram (DFD), Use Case Diagram (UCD), Activity Diagram, dan lain lain. B. Perancangan Arsitektur 1. Kebutuhan Perangkat Lunak a. Browser yang digunakan adalah Google Chrome dan Mozilla Firefox. Untuk Google Chrome minimum versi 67.0.3396.99 atau lebih tinggi dan untuk Mozilla Firefox minimum versi 59.0.2 atau lebih tinggi. b. Untuk sist...
Baca selengkapnya

Tugas 2 PPB - B

Gambar
Nama  : Tsabita Putri Ramadhany NRP  : 5025211130 Kelas : PPB - B Tugas 2 Aplikasi Happy Birthday Tugas : Menggunakan Jetpack Compose untuk membangun aplikasi Android sederhana yang menampilkan pesan ulang tahun di layar. Petunjuk Tugas :  https://kuliahppb.blogspot.com/2024/03/mengenal-composable.html Saya telah membuat aplikasi yang mengucapkan Selamat Ulang Tahun menggunakan Andriod Studio. Jetpack Compose adalah toolkit modern untuk membangun UI Android. Ini mempermudah dan mempercepat pengembangan UI di Android dengan menggunakan lebih sedikit kode, alat yang canggih, dan API Kotlin yang intuitif. Antarmuka pengguna (UI) aplikasi adalah tampilan visual yang kita lihat di layar, seperti teks, gambar, tombol, dan berbagai jenis elemen lainnya. Fungsi composable adalah elemen dasar dalam Compose yang mendeskripsikan bagian-bagian dari UI kita. Fungsi composable dianotasi dengan @Composable, yang memberi tahu compiler Compose bahwa fungsi tersebut dimaksudkan untuk mengo...
Baca selengkapnya

Tugas 8 PPL - A

Gambar
Nama  : Tsabita Putri Ramadhany NRP  : 5025211130 Kelas : PPL - A Tugas 8 Estimasi Kapasitas System Tugas : Studi Kasus Estimasi Kapasitas System Petunjuk Tugas :  https://kuliahppl.blogspot.com/2024/05/estimasi-kapasistas-system.html Dokumen :  Dokumen Estimasi kapasitas sistem adalah proses kritis dalam perancangan dan pengembangan perangkat lunak untuk memastikan sistem dapat menangani beban kerja yang diharapkan dengan efisien dan efektif. Proses ini mencakup berbagai aspek seperti estimasi usaha, biaya, dan sumber daya yang diperlukan untuk mengembangkan perangkat lunak. Komponen Utama Estimasi Kapasitas Estimasi Usaha (Effort Estimation) : Proses untuk memprediksi jumlah waktu dan tenaga kerja yang diperlukan untuk menyelesaikan proyek perangkat lunak. Estimasi ini sering dilakukan menggunakan metode-metode seperti COCOMO (Constructive Cost Model), Function Point Analysis, dan Use Case Points (UCP). Metode UCP, misalnya, memperkirakan usaha berdasarkan jumlah d...
Baca selengkapnya