Unggulan

Pertemuan 13 - Registrasi Siswa

Penjelasan Project Registrasi Siswa - Pertemuan 13

Aplikasi Registrasi Siswa dengan Room Database dan Jetpack Compose

Nama: Christoforus Indra Bagus Pratama

NRP: 5025231124

Mata Kuliah: Pemrograman Perangkat Bergerak

Tanggal: 20 Mei 2026

Pertemuan: 13

Link: Link Github

1. Deskripsi Aplikasi dan Tujuan Pembuatan

1.1 Deskripsi Umum

Project Pertemuan 13 ini berfokus pada pembuatan aplikasi Registrasi Siswa berbasis Android. Aplikasi memungkinkan pengguna menambahkan data siswa (nama dan email), menampilkan daftar siswa secara real-time, melakukan edit data, serta menghapus data dengan konfirmasi. Aplikasi dibangun dengan Jetpack Compose untuk UI dan Room Database sebagai penyimpanan lokal, sehingga data tetap tersimpan di perangkat.

1.2 Tujuan Pembuatan

Tujuan utama pembuatan aplikasi ini adalah memperdalam konsep berikut:

  • Menguasai CRUD dengan Room: Memahami proses Create, Read, Update, dan Delete pada database lokal melalui DAO.

  • Menerapkan arsitektur MVVM: Memisahkan UI dan logika bisnis agar kode lebih terstruktur dan mudah dirawat.

  • Menggunakan Flow dan StateFlow: Menampilkan data secara reaktif tanpa perlu refresh manual.

  • Membuat UI modern dengan Compose: Membangun form input, daftar data, dan dialog konfirmasi secara deklaratif.

  • Menerapkan validasi input: Menjaga kualitas data dengan validasi sederhana sebelum disimpan.

2. Arsitektur Aplikasi (MVVM + Room)

2.1 Penjelasan Pola MVVM

MVVM (Model-View-ViewModel) membagi aplikasi menjadi tiga lapisan dengan tanggung jawab yang jelas. Pada project ini, View menampilkan UI dan menerima input, ViewModel mengelola state serta menjalankan logika bisnis, sedangkan Model/Data menangani penyimpanan data melalui Room Database.

2.2 Tiga Lapisan dalam Aplikasi Ini

Lapisan File/Class Tanggung Jawab Penjelasan
View MainScreen.kt, FormInput.kt, StudentItem.kt Menampilkan UI dan menerima input user Berisi composable untuk form input, daftar siswa, dan kartu item siswa.
ViewModel StudentViewModel.kt Mengelola state UI dan logika bisnis Mengatur list siswa, proses tambah, edit, dan hapus data melalui DAO.
Model/Data Siswa.kt, SiswaDao.kt, AppDatabase.kt Penyimpanan dan akses data Entity mendefinisikan tabel siswa, DAO menyediakan operasi database, AppDatabase mengelola instance Room.

2.3 Alur Data Aplikasi

Alur data mengikuti pola satu arah: View → ViewModel → DAO → Room/SQLite, kemudian hasilnya dikembalikan ke ViewModel sebagai state dan UI akan ter-update otomatis melalui Flow/StateFlow.

Tahap Komponen Aksi
1 User / View User mengisi nama dan email lalu menekan tombol tambah.
2 MainScreen Memvalidasi input dan memanggil fungsi ViewModel.
3 StudentViewModel Menjalankan operasi insert atau update di dalam coroutine.
4 SiswaDao DAO mengeksekusi query insert/update/delete sesuai kebutuhan.
5 Room/SQLite Database menyimpan perubahan dan mengirim data terbaru.
6 Flow/StateFlow Daftar siswa di-emit ulang dari DAO sebagai Flow.
7 UI (Compose) UI melakukan recomposition dan menampilkan data terbaru.

3. Langkah-Langkah Pembuatan Aplikasi (Detail Implementasi)

3.1 Langkah 1: Persiapan Project

Project dibuat di Android Studio dengan nama Pertemuan 13 dan package com.example.pertemuan13. UI menggunakan Jetpack Compose sebagai pendekatan modern untuk membangun tampilan.

3.2 Langkah 2: Menambahkan Dependency

Pada app/build.gradle.kts, saya menambahkan dependency Room, ViewModel Compose, dan Coroutines agar database dapat bekerja secara asynchronous dan UI tetap responsif.

3.3 Langkah 3: Membuat Entity (Siswa.kt)

Entity Siswa mendefinisikan struktur tabel dengan kolom id, nama, dan email. Field id dibuat auto-generate agar unik untuk setiap siswa.

3.4 Langkah 4: Membuat DAO (SiswaDao.kt)

DAO berisi fungsi untuk insert, update, delete, dan query daftar siswa. Query getAllSiswa() mengembalikan Flow agar UI menerima perubahan data secara real-time.

3.5 Langkah 5: Membuat Database Class (AppDatabase.kt)

AppDatabase adalah singleton Room Database yang menyediakan akses ke SiswaDao. Database ini menggunakan nama siswa_database.

3.6 Langkah 6: Membuat ViewModel (StudentViewModel.kt)

ViewModel menampung state daftar siswa dan menyediakan fungsi tambahSiswa, editSiswa, dan hapusSiswa. Semua operasi dilakukan di dalam viewModelScope.

3.7 Langkah 7: Membuat UI Compose

UI dibangun melalui tiga komponen utama: FormInput untuk input data, StudentItem untuk tampilan kartu siswa, dan MainScreen sebagai layar utama yang menyusun semua komponen.

3.8 Langkah 8: Setup MainActivity

MainActivity.kt menginisialisasi database dan DAO, membuat ViewModel dengan factory, lalu menampilkan MainScreen dalam tema Pertemuan13Theme.

4. Penjelasan File, Isi Kode, dan Tujuan Masing-Masing

4.1 Tabel Ringkasan File-File Utama

Kategori File Tujuan Isi Kode Utama
Entry Point MainActivity.kt Activity utama aplikasi Inisialisasi database dan ViewModel, render MainScreen.
AndroidManifest.xml Konfigurasi manifest aplikasi Menetapkan MainActivity sebagai launcher.
UI/View Layer ui/MainScreen.kt Layar utama aplikasi Form input, daftar siswa, dialog konfirmasi hapus.
ui/FormInput.kt Form input data siswa TextField nama dan email, tombol tambah atau simpan.
ui/StudentItem.kt Kartu tampilan siswa Avatar inisial, nama, email, tombol edit dan hapus.
ViewModel Layer viewmodel/StudentViewModel.kt Logika bisnis dan state management StateFlow list siswa, fungsi tambah, edit, hapus.
Data Layer data/Siswa.kt Entity tabel siswa @Entity dengan id, nama, email.
data/SiswaDao.kt DAO untuk operasi database @Insert, @Update, @Delete, dan query Flow.
data/AppDatabase.kt Konfigurasi Room Database Singleton database dengan siswaDao().
Theme & Resources ui/theme/Color.kt Definisi warna aplikasi Warna dasar Material Theme 3.
ui/theme/Theme.kt Konfigurasi tema MaterialTheme dengan dukungan dynamic color.
ui/theme/Type.kt Typography aplikasi Pengaturan font dasar.
Config & Build app/build.gradle.kts Konfigurasi build dan dependency Room, ViewModel Compose, Coroutines, Compose UI.
res/values/strings.xml Resource string aplikasi Nama aplikasi dan string dasar.

5. Penjelasan Detail Setiap Bagian Kode MainActivity.kt

5.1 Struktur Umum MainActivity

MainActivity berfungsi sebagai entry point aplikasi. Di sini dilakukan inisialisasi database, pembuatan ViewModel, serta rendering UI Compose dengan tema aplikasi.

5.2 Bagian 1: Package dan Import

package com.example.pertemuan13

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.activity.viewModels
import com.example.pertemuan13.data.AppDatabase
import com.example.pertemuan13.ui.MainScreen
import com.example.pertemuan13.ui.theme.Pertemuan13Theme
import com.example.pertemuan13.viewmodel.StudentViewModel

Import berisi komponen Activity modern, Compose, database, UI screen, tema, serta ViewModel.

5.3 Bagian 2: Class Declaration dan onCreate()

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

MainActivity mewarisi ComponentActivity agar kompatibel dengan Compose. Method onCreate digunakan sebagai titik awal lifecycle Activity.

5.4 Bagian 3: Inisialisasi Database dan DAO

val dao = AppDatabase.getDatabase(applicationContext).siswaDao()

Database Room dibuat melalui singleton AppDatabase, lalu diambil DAO untuk mengakses tabel siswa.

5.5 Bagian 4: ViewModel Factory

val factory = StudentViewModel.factory(dao)
val viewModel: StudentViewModel by viewModels { factory }

ViewModel membutuhkan parameter DAO, sehingga digunakan factory agar ViewModel dapat dibuat dengan dependency yang benar.

5.6 Bagian 5: SetContent dan Render UI

enableEdgeToEdge()
setContent {
    Pertemuan13Theme {
        MainScreen(viewModel = viewModel)
    }
}

UI Compose dirender dengan tema aplikasi, lalu MainScreen ditampilkan sebagai layar utama.

6. Tree Struktur Folder Aplikasi dan Alur Lalu Lintas Data

6.1 Struktur Folder Aplikasi

Pertemuan 13/
├── app/
│   ├── build.gradle.kts
│   └── src/
│       └── main/
│           ├── AndroidManifest.xml
│           ├── java/com/example/pertemuan13/
│           │   ├── MainActivity.kt
│           │   ├── data/
│           │   │   ├── AppDatabase.kt
│           │   │   ├── Siswa.kt
│           │   │   └── SiswaDao.kt
│           │   ├── viewmodel/
│           │   │   └── StudentViewModel.kt
│           │   └── ui/
│           │       ├── FormInput.kt
│           │       ├── MainScreen.kt
│           │       ├── StudentItem.kt
│           │       └── theme/
│           │           ├── Color.kt
│           │           ├── Theme.kt
│           │           └── Type.kt
│           └── res/
│               ├── values/
│               │   ├── strings.xml
│               │   └── themes.xml
│               ├── mipmap-*/
│               │   └── ic_launcher.webp
│               └── xml/
│                   ├── backup_rules.xml
│                   └── data_extraction_rules.xml
├── build.gradle.kts (root)
├── settings.gradle.kts
└── gradle/

6.2 Penjelasan Struktur Folder

Folder/File Kegunaan Penjelasan
data/ Layer data Menampung Entity, DAO, dan konfigurasi Room Database.
viewmodel/ Layer ViewModel Mengelola state dan logika bisnis aplikasi.
ui/ Layer UI Composable untuk form input, daftar siswa, dan item siswa.
ui/theme/ Styling dan tema Konfigurasi warna, tema, dan typography aplikasi.
res/values/ Resource dasar Strings dan tema XML untuk kebutuhan Android.

6.3 Alur Lalu Lintas Data (Data Flow)

Data mengalir secara terstruktur mulai dari input user sampai ditampilkan kembali dalam daftar siswa:

  1. User Input (View): User mengisi nama dan email pada form.

  2. Event ke ViewModel: MainScreen memanggil fungsi tambah atau edit.

  3. ViewModel Processing: ViewModel menjalankan operasi DAO di coroutine.

  4. DAO Query: DAO mengubah data di Room Database.

  5. Room Result: Data terbaru di-emit sebagai Flow.

  6. State Update: StateFlow diperbarui dan UI recomposition otomatis.

7. Cara Pengujian di Android Studio

7.1 Persiapan Sebelum Testing

  1. Buka Project: Buka folder Pertemuan 13 di Android Studio dan tunggu indexing selesai.

  2. Gradle Sync: Pastikan semua dependency ter-download dengan benar.

  3. Check Build: Pastikan tidak ada error di Build Console.

7.2 Langkah-Langkah Testing

  1. Clean & Build: Jalankan Build > Clean Project, lalu Build > Rebuild Project.

  2. Jalankan Emulator/Device: Siapkan emulator atau device fisik.

  3. Run App: Tekan tombol Run dan pilih device target.

7.3 Scenario Testing

No Skenario Input Aksi Expected Result
1 Tambah Siswa Nama dan email valid Isi form lalu klik Tambah Siswa Data tersimpan dan tampil di daftar siswa.
2 Edit Siswa Nama/email baru Klik tombol Edit, ubah data, simpan Data siswa berubah sesuai input.
3 Hapus Siswa - Klik Hapus lalu konfirmasi Data siswa terhapus dari daftar.
4 Validasi Input Nama/email kosong atau email tanpa "@" Klik Tambah Siswa Data tidak disimpan.

8. Hasil Pengujian dan Area Placeholder untuk Screenshot

Berikut ringkasan hasil observasi dari beberapa kondisi uji utama.

Kondisi Uji Hasil Observasi Screenshot Hasil
Kondisi 1:
Dashboard Kosong
  • Daftar siswa masih kosong
  • Pesan ajakan menambah data muncul
  • Form input siap digunakan
Kondisi 2:
Data Bertambah
  • Beberapa siswa berhasil ditambahkan
  • Daftar menampilkan banyak item dan bisa di-scroll
  • Avatar inisial muncul untuk tiap siswa
Kondisi 3:
Edit Data
  • Form masuk mode edit
  • Tombol Simpan dan Batal muncul
  • Data diperbarui setelah disimpan
Kondisi 4:
Konfirmasi Hapus
  • Dialog konfirmasi muncul
  • User dapat memilih batal atau hapus
  • Data terhapus jika dikonfirmasi

9. Kesimpulan

Project Registrasi Siswa pada Pertemuan 13 berhasil mengimplementasikan proses CRUD yang lengkap dengan Room Database, sekaligus menerapkan arsitektur MVVM agar kode lebih rapi dan mudah dikembangkan. Integrasi Flow dan StateFlow membuat data tampil secara reaktif tanpa refresh manual, sedangkan Compose mempermudah pembuatan UI yang modern dan konsisten.

Dari project ini, saya memperoleh pemahaman yang lebih baik tentang manajemen data lokal, validasi input sederhana, serta workflow pengembangan Android yang profesional. Aplikasi ini dapat menjadi dasar untuk pengembangan fitur lanjutan seperti pencarian, filtering, atau sinkronisasi dengan backend.

Komentar

Posting Komentar

Postingan Populer