Files
roda-student-web-if-develop…/groups/HabisIniSeminar

🎓 Portal Informasi Penerimaan Mahasiswa Baru (PMB)

Program Studi Informatika - Universitas Tanjungpura (UNTAN)

Screenshot Website Pratinjau Antarmuka Halaman PMB Informatika UNTAN oleh Kelompok 02


💡 Pengantar (Project Overview)

📌 Gambaran Umum

Proyek ini merupakan halaman web statis yang dikembangkan untuk menyediakan informasi penerimaan mahasiswa baru secara terpusat, terstruktur, dan mudah diakses. Halaman ini bertujuan membantu calon mahasiswa dalam memahami berbagai jalur seleksi serta informasi terkait secara menyeluruh.

🎯 Fitur Utama

Penyajian informasi terpusat untuk seluruh jalur penerimaan:

  1. SNBP
  2. SNBT
  3. Mandiri-UNTAN
  4. SMMPTN-Barat

Informasi detail setiap jalur:

  1. Persyaratan
  2. Mekanisme seleksi
  3. Jadwal
  4. Biaya pendidikan
  5. Informasi beasiswa
  6. FAQ (Frequently Asked Questions)
  7. Tautan ke situs resmi dan sumber informasi terkait
  8. Tampilan responsif untuk desktop dan perangkat mobile

Tanya Jawab Seputar Proyek (Project Q&A)

Q: Apa fokus utama dari rancangan website ini? A: Website ini dirancang sebagai pusat informasi terpadu yang merangkum empat jalur seleksi masuk UNTAN (SNBP, SNBT, SMMPTN-Barat, dan Mandiri). Pengunjung dapat melihat persyaratan, mekanisme, jadwal, rincian biaya, hingga peluang beasiswa dalam satu tampilan interaktif tanpa harus berpindah halaman.

Q: Mengapa dibangun sepenuhnya sebagai halaman statis? A: Pendekatan statis (HTML, CSS, Vanilla JS) menawarkan tiga keuntungan utama: Kecepatan muat yang luar biasa, Keamanan tingkat tinggi (karena tidak ada akses database langsung dari luar), dan kemudahan Deployment di hampir semua layanan hosting.

Q: Bagaimana sistem dua bahasa (Bilingual) bekerja di website ini? A: Kami menggunakan script kustom (localization.js) yang mendeteksi bahasa bawaan dari peramban pengguna (navigator.language). Pengguna juga dapat mengubah bahasa secara manual (ID/EN), dan pilihan tersebut akan disimpan di dalam localStorage sehingga preferensi tidak hilang saat halaman di-muat ulang.

Q: Apakah visualisasi data di website ini bersifat statis (gambar)? A: Tidak. Kami mengimplementasikan Chart.js untuk merender grafik perbandingan antara "Jumlah Peminat" dan "Daya Tampung" secara dinamis dan interaktif.

Q: Bagaimana tingkat responsivitas website ini di perangkat seluler? A: Sangat optimal. Kami menggunakan pendekatan tata letak Grid dan Flexbox mutakhir. Untuk navigasi kartu jalur masuk, kami bahkan mengintegrasikan Horizontal Drag Slider yang ramah sentuhan (touch-friendly) khusus untuk perangkat mobile dan tablet.


🌐 Navigasi & Antarmuka

  1. Menggunakan pendekatan single-page dengan smooth scrolling
  2. Navigasi berbasis tab untuk pemilihan jalur seleksi
  3. Komponen accordion untuk FAQ dan persyaratan
  4. Layout berbasis card untuk penyajian informasi ringkas

📎 Sumber Eksternal

Sistem menyediakan tautan menuju berbagai sumber resmi, seperti:

  1. Situs resmi SNPMB
  2. Situs resmi Mandiri-UNTAN
  3. Situs resmi SMMPTN-Barat
  4. Portal informasi beasiswa
  5. Media sosial resmi terkait

🛠️ Tumpukan Teknologi (Tech Stack)

Kategori Teknologi Kegunaan dalam Proyek
Inti (Core) HTML5, CSS3, Vanilla JS Fundamental pembentuk struktur, gaya, dan logika halaman.
Visualisasi Chart.js 4.4 Merender grafik batang peminat & daya tampung.
Animasi AOS (Animate On Scroll) Memberikan efek transisi halus saat elemen masuk ke viewport.
Ikonografi FontAwesome 6.5 Menyediakan aset ikon modern dan ringan berskala vektor.

🚀 Panduan Deployment (Hosting Guide)

Sifat proyek yang 100% statis membuatnya sangat mudah untuk di-deploy (di-online-kan). Pilih salah satu platform favorit Anda di bawah ini:

Opsi 1: Vercel (Paling Direkomendasikan & Cepat)

  1. Push proyek ke repositori GitHub, GitLab, atau Bitbucket.

  2. Buat akun dan masuk ke Vercel.

  3. Klik tombol Add New Project dan import repositori Anda.

  4. Pada bagian Framework Preset, pilih Other.

  5. Kosongkan bagian Build Command dan Output Directory.

  6. Klik Deploy. Website Anda akan aktif dalam kurang dari 30 detik.

Opsi 2: Coolify (Self-Hosted)

  1. Masuk ke Dashboard Coolify server Anda.

  2. Buka menu proyek lalu tambahkan resource baru (+ Add).

  3. Pilih opsi Application dan hubungkan repositori Git Anda.

  4. Coolify secara otomatis akan menggunakan Nixpacks untuk mendeteksi Static/HTML Site.

  5. Kosongkan Build Command dan Install Command.

  6. Klik Deploy.

Opsi 3: GitHub Pages (Paling Praktis)

  1. Pastikan kode sudah di-push ke repositori GitHub.

  2. Masuk ke halaman repositori Anda, klik tab Settings.

  3. Di panel sebelah kiri, pilih menu Pages.

  4. Pada bagian Source, pilih Deploy from a branch.

  5. Pilih branch utama dan pastikan foldernya diatur ke / (root).

  6. Klik Save.

Opsi 4: Netlify (Sistem Drag & Drop)

  1. Masuk ke Netlify.

  2. Masuk ke menu Sites -> Klik Add new site.

  3. Kita bisa memilih Import an existing project (lewat Git) atau Deploy manually (cukup seret dan lepas folder proyek ke browser).

  4. Jika lewat Git, biarkan Build command dan Publish directory kosong.

  5. Klik Deploy site.


👥 Tim Pengembang (Credits)

Disusun dan dikembangkan oleh Kelompok 02 untuk memenuhi standar tugas perancangan antarmuka Halaman Statis.

Nama Kelompok : Habis Ini Seminar


📂 Struktur Direktori (Folder Structure)

Pastikan struktur direktori Anda sesuai sebelum menjalankan atau men-deploy proyek ini:

📦 project-root/
 ┣ 📜 localization.js       # Script logika terjemahan & State Management
 ┃ 🖼️ logo.png              # Logo Universitas/Prodi
 ┃ 🖼️ footer.png            # Aset ornamen footer
 ┣ 📜 index.html            # Halaman utama aplikasi (Entry point)
 ┣ 📜 style.css             # Berkas tata letak dan desain (Styling)
 ┣ 🖼️ Screenshot.png        # Gambar pratinjau halaman
 ┗ 📜 README.md             # Dokumentasi proyek