Studi Kasus - Aplikasi Desktop Rich UI

 


Soal

1. Jelaskan deskripsi dan ruang lingkup fitur aplikasi Desktop Rich UI yang dibuat.
2. Apa latar belakang dan Manfaat aplikasi tersebut di buat.
3. Buat Poster Infografis aplikasi yang telah dibuat dalam 1 halaman.


Pengisian Form

Absensi



Studi Kasus - Perpustakaan

 


1. Deskripsi Sistem

Sebuah perpustakaan perguruan tinggi masih melakukan pendaftaran anggota secara manual menggunakan formulir kertas. Proses tersebut menimbulkan beberapa kendala, seperti antrean pendaftaran, kesalahan pencatatan data, kesulitan mencari informasi anggota, dan lambatnya pembuatan kartu anggota.

Untuk mengatasi masalah tersebut, perpustakaan membutuhkan aplikasi web bernama LibraryReg — Aplikasi Pendaftaran Anggota Perpustakaan. LibraryReg menyediakan landing page yang menampilkan informasi perpustakaan, menu navigasi yang terstruktur, formulir pendaftaran anggota secara online, dan halaman pengelolaan data anggota untuk petugas perpustakaan.

Pada tahap pembelajaran ini, mahasiswa berfokus pada front end. Data anggota dapat dikelola sementara menggunakan JavaScript dan localStorage, sehingga mahasiswa dapat mempraktikkan interaksi antarmuka tanpa harus langsung membangun backend atau database server.

2. Identifikasi Kebutuhan Sistem

A. Landing Page
Tujuan: memberikan informasi awal dan mengarahkan pengunjung ke layanan perpustakaan.
• Header dengan logo dan nama perpustakaan.
• Hero section dengan judul, deskripsi, dan tombol ajakan.
• Informasi layanan perpustakaan.
• Keunggulan dan fasilitas perpustakaan.
• Statistik ilustratif jumlah koleksi dan anggota.
• Footer berisi kontak dan informasi jam layanan.

B. Pengelolaan Menu Navigasi
Tujuan: memudahkan pengguna berpindah antarbagian aplikasi.
• Beranda
• Tentang Perpustakaan
• Layanan
• Daftar Anggota
• Pendaftaran Anggota
• Login Petugas (simulasi antarmuka)
Mahasiswa menerapkan navbar responsif Bootstrap, tautan navigasi, navigasi antarhalaman atau bagian, dan penanda menu aktif.

C. Formulir Pendaftaran Anggota
Tujuan: menggantikan formulir kertas dengan formulir digital.
• Nama lengkap
• NIM/NIP
• Program studi
• Alamat
• Nomor telepon
• Email
• Jenis keanggotaan: mahasiswa, dosen, atau tenaga kependidikan
Formulir memiliki validasi kolom wajib, format email, dan keunikan nomor induk. Setelah berhasil, data ditambahkan ke daftar anggota pada sisi front end.

D. Halaman Pengelolaan Anggota
Tujuan: membantu petugas mengelola data anggota melalui antarmuka web.
• Menampilkan tabel daftar anggota.
• Mencari anggota berdasarkan nama atau NIM/NIP.
• Melihat detail anggota.
• Mengedit data anggota.
• Menghapus data dengan dialog konfirmasi.
• Menampilkan notifikasi keberhasilan atau kesalahan.
• Menyimpan data pada localStorage agar tetap tersedia setelah halaman dimuat ulang di browser yang sama.

Soal

1. Buat deskripsi dan ruang lingkup pekerjaan yang akan dibuat
2. Buatk Rancangan Halaman dan Struktur Menu
3. Desain UI Landing Page.
4. Implementasikan dan publis web yang dibuat.






Rich UI - Sistem Informasi Mahasiswa SISMA

 






SISMA (Sistem Informasi Mahasiswa) adalah aplikasi desktop untuk membantu institusi pendidikan mengelola data mahasiswa dan program studi melalui antarmuka modern. Produk dirancang dengan pendekatan Rich UI yang menampilkan navigasi sidebar, kartu statistik, tabel data, grafik, aktivitas terbaru, formulir terstruktur, dan pilihan tema gelap/terang. PRD ini menerjemahkan referensi visual menjadi kebutuhan produk yang dapat direncanakan, dibangun, dan diuji.

1.1 Tujuan Produk

  • Menyediakan satu aplikasi desktop untuk melihat dan mengelola data mahasiswa.

  • Mempercepat pekerjaan administratif melalui pencarian, filter, dan operasi CRUD.

  • Menyajikan ringkasan data dalam bentuk kartu statistik dan grafik.

  • Memberikan pengalaman penggunaan yang konsisten, jelas, dan mudah dipelajari.

  • Menerapkan pemisahan kode yang terstruktur agar aplikasi mudah diuji dan dikembangkan.

1.2 Pernyataan Produk

Untuk administrator dan staf akademik yang membutuhkan pengelolaan data mahasiswa, SISMA menyediakan aplikasi desktop terintegrasi yang menggabungkan manajemen data, ringkasan analitik, dan UI modern dalam satu lingkungan kerja.

2. Latar Belakang dan Permasalahan

  • Data mahasiswa perlu dikelola secara terstruktur agar pencarian dan pembaruan tidak dilakukan secara manual.

  • Pengguna membutuhkan gambaran cepat mengenai jumlah mahasiswa, program studi, dosen, dan angkatan.

  • Tampilan aplikasi administrasi yang padat perlu memiliki hierarki visual dan navigasi yang konsisten.

  • Perubahan data perlu divalidasi, dicatat secara memadai, dan dilindungi dari input tidak sah.

3. Sasaran, Indikator, dan Batasan

Sasaran

Indikator keberhasilan awal

Pengelolaan mahasiswa

Pengguna berwenang dapat menambah, melihat, mengubah, dan menghapus data.

Pencarian data

Pencarian berdasarkan NIM atau nama menghasilkan data yang relevan.

Dashboard

Kartu statistik dan grafik menggunakan data database, bukan angka statis.

Kualitas UI

Navigasi utama konsisten, teks terbaca, dan tampilan mendukung dark/light mode.

Keandalan

Kesalahan validasi atau koneksi ditangani dengan pesan yang dapat dipahami.

Keamanan dasar

Akses berbasis peran, query berparameter, dan penyimpanan password dengan hash.

Angka seperti 125 mahasiswa, 12 program studi, 8 dosen, dan 3 angkatan pada referensi visual merupakan contoh tampilan. Angka tersebut bukan target data aktual dan harus dihitung dari database.

Latihan




Monitoring

Form Pengumpulan
Hasil Pengumpulan Tugas

Absensi