Membuat Aplikasi Eosis Pemilihan Osis

AI Prompt
Buatkan aplikasi web Pemilihan OSIS bernama eOSIS menggunakan Vue.js 3 + Vite, Bootstrap 5, Bootstrap Icons, dan Supabase sebagai database. Aplikasi memiliki 2 role yaitu Admin dan User/Siswa. Admin memiliki menu Beranda, Kelas, Siswa/User, Calon Kandidat, Perolehan Suara, Pengaturan, dan Keluar. Beranda menampilkan statistik total siswa, kelas, kandidat, jumlah siswa yang sudah dan belum memilih, serta persentase partisipasi. Menu Kelas digunakan untuk CRUD kelas, menu Siswa/User untuk CRUD data siswa seperti NISN, nama, tanggal lahir, kelas, dan status sudah/belum memilih, sedangkan menu Calon Kandidat digunakan untuk CRUD kandidat yang berisi nomor urut, foto, nama ketua dan wakil, visi, misi, serta slogan. Menu Perolehan Suara menampilkan total suara dan perolehan masing-masing kandidat dalam bentuk tabel, persentase, dan grafik. Menu Pengaturan memungkinkan admin mengganti username dan password serta mengatur nama sekolah, logo sekolah, dan periode pemilihan yang nantinya otomatis ditampilkan pada aplikasi.
Untuk User/Siswa, login menggunakan NISN dan tanggal lahir. Setelah berhasil login, tampilkan biodata siswa dan status hak suara. Jika belum memilih, tampilkan tombol Berikan Suara yang akan membuka halaman berisi foto dan informasi seluruh kandidat. Siswa memilih satu kandidat kemudian muncul konfirmasi sebelum suara disimpan. Setelah berhasil memilih, tampilkan pesan "Suara Anda berhasil dicatat, terima kasih telah berpartisipasi" selama 4 detik, kemudian otomatis kembali ke halaman login siswa dan session pemilih dihapus. Setiap siswa hanya boleh memberikan suara 1 kali. Jika siswa login kembali setelah memilih, tampilkan informasi "Anda sudah menggunakan hak suara" dan jangan tampilkan tombol Berikan Suara. Mekanisme satu suara harus divalidasi di database/backend Supabase, bukan hanya di frontend, sehingga tidak dapat dilewati dengan refresh, membuka banyak tab, atau manipulasi browser. Gunakan Row Level Security (RLS), database constraint, dan Supabase RPC/function jika diperlukan untuk menjaga keamanan dan integritas voting. Jangan menampilkan kepada admin hubungan antara identitas siswa dengan kandidat yang dipilih; admin cukup melihat status siswa sudah/belum memilih dan total perolehan suara kandidat.
Buat UI yang modern, profesional, bersih, rapi, dan responsif untuk desktop, laptop, tablet, dan HP. Gunakan sidebar untuk admin dan tampilan yang sederhana untuk siswa. Gunakan Supabase Storage untuk logo sekolah dan foto kandidat. Gunakan Vue Router dengan route guard untuk membatasi akses berdasarkan role, serta buat struktur kode yang modular, reusable, aman, dan mudah dikembangkan. Jangan menyimpan password dalam plain text dan jangan pernah menempatkan Supabase Service Role Key di frontend. Buat seluruh kebutuhan database, tabel, relasi, constraint, RLS policy, function/RPC voting, storage policy, routing, komponen, dan halaman aplikasi sehingga aplikasi dapat langsung dikembangkan dan digunakan.
Tentang Project Ini
Pembuat Aplikasi ini menggunakan ai google studio dan untuk databasenya menggunakan supabase semua gratis 100%
Small Thumb
Dibuat pada

30 Agustus 2026

Google Studio
PromptMaster

© 2026 AI Prompt LMS TD Digital | HubApps. Dirancang untuk masa depan pengembang.