forked from izu/student-web-if-development-kit
Readme Dokumentasi :D
This commit is contained in:
@@ -0,0 +1,162 @@
|
||||
# 🎓 Portal Informasi Penerimaan Mahasiswa Baru (PMB)
|
||||
**Program Studi Informatika - Universitas Tanjungpura (UNTAN)**
|
||||
|
||||
|
||||
*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:
|
||||
|
||||
```text
|
||||
📦 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
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
Reference in New Issue
Block a user