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

Mini Project Front End

 


Project : News Portal Website

Deskripsi: Website portal berita dengan kategori dan headline dinamis.

Fitur:

  • Landing page (headline + trending)
  • Kategori berita (politik, teknologi, olahraga)
  • Detail berita
  • Search berita
  • Dark mode

Project : E-Commerce Product Catalogue

Deskripsi: Katalog produk dengan fitur keranjang.

Fitur:

  • List produk (grid)
  • Detail produk
  • Add to cart (localStorage)
  • Filter & sorting

Project : Portal Online Learning

Deskripsi: Platform pembelajaran online.

Fitur:

  • Dashboard siswa
  • List course
  • Video pembelajaran
  • Progress bar

Project : Booking Hotel Website

Deskripsi: Sistem booking hotel sederhana.

Fitur:

  • Search hotel
  • List kamar
  • Detail + booking form
  • Kalender tanggal


Project :  Job Portal

Deskripsi: Portal lowongan kerja.

Fitur:

  • List job
  • Filter lokasi/kategori
  • Detail pekerjaan
  • Apply form

Projetct :  Food Ordering Website

Deskripsi: Sistem pemesanan makanan online.

Fitur:

  • Menu makanan
  • Cart system
  • Checkout
  • Total harga otomatis

Latihan :

1. Buatkan deskripsi aplikasi
2. Jelaskan fitur yang ada di aplikasi
3. Desain Wireframe
4. Implementasikan dalam Coding dan Struktur File
5. Deploy dan Publikasi.





Studi Kasus HTML 1









Buatlah sebuah website profil sekolah asal. Website harus terdiri dari minimal 3 halaman yang saling terhubung. Dokumentasi sertakan screenshot website sekolah asal beserta linknya.

📋 Kebutuhan Halaman

1️⃣ index.html

  • Header berisi:

    • Nama Sekolah

    • Logo (gunakan tag <img>)

  • Navigation menu (Home, Jurusan, Kontak)

  • Section:

    • Sambutan Kepala Sekolah

    • Visi & Misi (gunakan <ul> atau <ol>)

  • Footer:

    • Copyright

2️⃣ jurusan.html

  • Daftar jurusan menggunakan:

    • <h2>

    • <p>

    • <ul>

  • Buat tabel jumlah siswa tiap jurusan menggunakan <table>

3️⃣ kontak.html

  • Form kontak menggunakan:

    • <form>

    • <input type="text">

    • <input type="email">

    • <textarea>

    • <button>