Tugas 7 - PPB G Membuat Halaman Login pada Aplikasi

 

Muhammad Fahmi Syahputra 

5025221302 - PPB (G)

Link GitHub : https://github.com/fahmisyahputra/logincomposeapp

Pada tugas kali ini, saya membuat sebuah aplikasi dimana terdapat halaman Login dengan menerapkan Jetpack Compose dan bahasa pemrograman Kotlin. Aplikasi ini digunakan untuk tampilan pada saat pengguna akan login akun pada aplikasi. 

File 1: MainActivity.kt

File ini berfungsi sebagai pintu masuk utama aplikasi (entry point). Kelas MainActivity mewarisi dari ComponentActivity karena kita menggunakan Jetpack Compose sebagai UI framework.

Di dalam fungsi onCreate(), kita memanggil setContent {} yang digunakan untuk menampilkan tampilan berbasis Compose. Di dalamnya, kita bungkus tampilan dengan MaterialTheme {} untuk mengatur styling global, dan kemudian kita panggil fungsi LoginScreen() yang isinya adalah UI halaman login.



File 2: LoginScreen.kt

File ini adalah tempat kita mendesain tampilan halaman login pakai Jetpack Compose. Fungsi utama di sini adalah @Composable fun LoginScreen().

- State

Kita bikin dua state lokal:


Fungsinya untuk menyimpan input dari user di textfield email dan password.

- Struktur Layout

Untuk layout-nya, kita pakai Column yang isinya ditata di tengah layar. Di dalam Column itu kita atur beberapa komponen:

  • Gambar: Ilustrasi login yang kita ambil dari drawable (ic_login_illustration.png).

  • Teks: Tulisan “Welcome Back” dan “Login to your account”.

  • Input Field: Dua OutlinedTextField buat input email dan password. Password-nya dibungkus PasswordVisualTransformation() supaya input-nya gak kelihatan.

  • Tombol Login: Button warna ungu yang bisa diklik (walaupun belum ngapa-ngapain).

  • Tombol Lupa Password: Cuma teks biasa tapi bisa diklik (masih kosong juga).

  • Login Sosial: Ada ikon Facebook, Google, dan X (Twitter) yang ditampilkan pakai Row dan IconButton.

Semua layout-nya kita atur pakai modifier kayak padding, fillMaxWidth, dan Spacer untuk ngatur jarak antar elemen.

- Interaksi

Ketika user ngetik di textfield, isi email dan password langsung berubah karena onValueChange-nya update state-nya.

Untuk sekarang, semua tombol masih placeholder — klik tombol login belum melakukan aksi apa-apa, dan login sosial juga masih belum dihubungkan ke mana-mana.

File 3: build.gradle.kts (Module)

File ini adalah konfigurasi untuk module aplikasi. Beberapa hal penting:

  • Karena pakai Kotlin 2.0, kita juga aktifkan plugin Compose Compiler terbaru:



  • Kita pakai Material 3, jadi semua komponen UI kita impor dari library androidx.compose.material3

  • Versi-versi library kita sesuaikan:



Secara keseluruhan, aplikasi ini menampilkan satu halaman login dengan desain modern dan rapi. Semua elemen dasar seperti input email/password, tombol login, dan opsi login sosial sudah ada.

Screenshot hasil :
 


Comments

Post a Comment

Popular posts from this blog

Final Project PPB G

Image
Final Project PPB (G) 👤 Anggota Kelompok: 5025221302 - Muhammad Fahmi Syahputra 5025221315 - Fairuz Fuadi 1. Judul Proyek ClassMate: Aplikasi Manajemen Jadwal, Tugas, dan Catatan Mahasiswa 2. Deskripsi Singkat Proyek Tema: Produktivitas & Manajemen Akademik Tujuan: Membantu mahasiswa dalam mengelola jadwal perkuliahan, tugas, dan catatan penting secara terpusat dan terstruktur. Target Pengguna: Mahasiswa tingkat sarjana atau diploma yang ingin merapikan seluruh kegiatan akademiknya dalam satu aplikasi mobile yang ringan dan sederhana. ClassMate adalah aplikasi mobile berbasis Android yang dirancang untuk membantu mahasiswa dalam mengelola aktivitas perkuliahan sehari-hari. Aplikasi ini menyediakan empat layanan utama: Manajemen Jadwal Kuliah Manajemen Tugas Mahasiswa Catatan Pribadi  Profil Pengguna Figur utama dari aplikasi ini adalah seorang mahasiswa yang ingin tetap terorganisir dan produktif selama masa kuliah. Dengan tampilan yang simple dan modern, ClassMate memban...
Read more

Tugas 11 - Redesign Starbucks App

Image
  Muhammad Fahmi Syahputra  5025221302 - PPB (G) Link GitHub : https://github.com/fahmisyahputra/starbuck-app Pada tugas kali ini, saya membuat sebuah aplikasi Starbuck  dengan menerapkan Jetpack Compose dan  bahasa pemrograman   Kotlin .  Tools & Library Jetpack Compose  (Material 3) NavigationBar State management  via  remember Image assets  dalam  res/drawable Locale formatting  untuk harga IDR Desain & Warna Warna utama yang digunakan adalah hijau khas Starbucks  #00704A , putih, serta font bold/medium untuk hierarki visual. Dan berikut adalah fitur dan struktur utama aplikasi: 1. Splash Screen Halaman pembuka menampilkan logo Starbucks, sapaan selamat datang, serta tombol “Start” yang berwarna putih, menyatu dengan tema hijau khas Starbucks ( #00704A ). 2. Welcome Page Halaman utama menampilkan sapaan personal: “Good Morning, Fahmi. It’s a great day for coffee.” Disusul banner promosi dan daftar min...
Read more

Tugas 9 - PPB G Aplikasi Woof

Image
 Muhammad Fahmi Syahputra  5025221302 - PPB (G) Link GitHub : https://github.com/fahmisyahputra/app-woof Pada tugas kali ini, saya membuat sebuah aplikasi Woof  dengan menerapkan Jetpack Compose dan  bahasa pemrograman   Kotlin .  Aplikasi ini adalah katalog anjing yang menampilkan daftar anjing beserta detail nama dan usia dalam bentuk card. File 1: MainActivity.kt File ini adalah entry point utama aplikasi. Di dalam onCreate() , kita menggunakan setContent {} untuk mengatur UI berbasis Jetpack Compose. Aplikasi dibungkus dengan WoofTheme {} agar seluruh tampilan konsisten mengikuti tema yang telah disediakan (baik untuk light mode maupun dark mode). Di dalamnya, fungsi WoofApp() dipanggil untuk menampilkan semua konten utama. Fungsi WoofApp() Fungsi ini memanfaatkan Scaffold sebagai layout utama, yang menyediakan Top App Bar dan isi konten di bawahnya. Di bagian atas ada WoofTopAppBar() (menampilkan logo dan nama aplikasi). Di bagian...
Read more