feat(ApeNameTeamE): tambah proyek web-beasiswa-untan

Memindahkan seluruh file web-beasiswa-untan (assets, data, index.html, SRS/SDD, PROJECT_CONTEXT) ke dalam folder grup ApeNameTeamE. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-22 13:33:40 +07:00
parent 0ebc25809b
commit 8e9137f725
17 changed files with 4256 additions and 1306 deletions
@@ -0,0 +1,329 @@
+# Software Design Document (SDD)
+## Website Statis Halaman Beasiswa — One-Page HTML
+### Program Studi Informatika — Universitas Tanjungpura
+
+| Field | Detail |
+|---|---|
+| Nama Proyek | Pengembangan Website Statis Halaman Beasiswa |
+| Kelompok | Ape Nama Team E |
+| Versi | 1.0 |
+| Fase SDLC | Design (aktif) |
+| Dosen | Izuardo Zulkarnain, S.Pd., M.T |
+| Semester | Genap 2025/2026 |
+
+---
+
+## 1. Pendahuluan
+
+### 1.1 Tujuan Dokumen
+SDD ini mendeskripsikan perancangan teknis website beasiswa Informatika UNTAN sebagai one-page HTML native. Dokumen ini menjadi panduan tim dalam mengimplementasikan:
+- Fitur popup detail beasiswa
+- Integrasi data hasil scraping & survei admin
+- Otomatisasi deployment via Puify (push-to-deploy)
+
+### 1.2 Stack Teknologi
+
+| Layer | Teknologi | Keterangan |
+|---|---|---|
+| Markup | HTML5 | Struktur konten |
+| Styling | CSS3 / Tailwind CSS | Layout responsif |
+| Interaktivitas | JavaScript (Vanilla / Alpine.js) | Animasi, scroll, toggle |
+| Font & Ikon | Google Fonts / Font Awesome | Tipografi & ikon |
+| Hosting | Puify (SaaS) | Auto-deploy dari repo ke server |
+| Server | Dedicated Server Prodi | Dev & Production |
+| Version Control | Git + GitHub | Kolaborasi & push-to-deploy |
+
+### 1.3 Posisi dalam SDLC
+
+| Fase | Status |
+|---|---|
+| Requirement | ✅ Selesai |
+| Design | 🔄 Aktif |
+| Implementation | ⏳ Belum |
+| Testing | ⏳ Belum |
+| Deployment | ⏳ Belum |
+
+---
+
+## 2. Arsitektur Halaman (Site Architecture)
+
+### 2.1 Konsep One-Page Website
+Single-page statis — semua konten dalam satu file HTML utama. Navigasi menggunakan **smooth scroll**. Detail beasiswa (syarat umum) ditampilkan via **popup modal** agar halaman tetap bersih.
+
+### 2.2 Struktur Seksi (Vertikal, Atas → Bawah)
+
+| No | ID | Nama Seksi | Konten Utama |
+|---|---|---|---|
+| 1 | `#hero` | Hero / Landing | Judul "Beasiswa Studi & Penelitian", deskripsi, CTA "Lihat Daftar Beasiswa", foto ilustrasi mahasiswa |
+| 2 | `#statistics` | Statistik Counter | 3 angka animasi: Total Penerima Semester Ini, Total Pemerintah, Total Swasta |
+| 3 | `#directory` | Direktori Beasiswa | Grid kartu (3 kolom desktop, 2 tablet, 1 mobile), tab filter, real-time search, popup detail |
+| 4 | `#testimonial` | Testimoni | Carousel/grid testimoni: foto, nama, beasiswa, kutipan singkat |
+| 5 | `#cta` | Call-to-Action | Banner ajakan + tombol WhatsApp admin + Instagram kemahasiswaan |
+| 6 | `#footer` | Footer | Logo prodi, alamat, email, telepon, WA, ikon sosmed, dekorasi ilustrasi Pontianak |
+
+### 2.3 Navigasi
+**Sticky navbar** yang selalu terlihat saat scroll.
+
+| Perangkat | Perilaku Navbar |
+|---|---|
+| Desktop/Laptop | Horizontal, semua item terlihat |
+| Tablet | Horizontal, item muat; sisanya dropdown |
+| Mobile | Hamburger menu (≡) — tap untuk expand vertikal |
+
+---
+
+## 3. Desain Visual & Identitas
+
+### 3.1 Color Palette
+
+| Peran | Nama | Hex | Digunakan Untuk |
+|---|---|---|---|
+| Primary | Biru Informatika | `#2B4590` | Navbar, heading, tombol primary, border aktif |
+| Secondary | Kuning/Oranye | `#F5A623` | CTA button, aksen, badge |
+| Background | White | `#FFFFFF` | Latar halaman utama |
+| Text | Dark Gray | `#1A1A1A` | Body text, paragraf |
+| Accent | Abu-abu | `#6B7280` | Caption, label, border |
+| Success | Hijau | `#10B981` | Badge status "Buka" |
+| Danger | Merah | `#EF4444` | Badge status "Ditutup" |
+| Overlay | Hitam + Transparansi | `#00000080` | Background popup modal |
+
+### 3.2 Tipografi
+
+| Elemen | Font Family | Ukuran | Weight |
+|---|---|---|---|
+| Heading H1 | Poppins / Inter | 48–64px | 700 (Bold) |
+| Heading H2 | Poppins / Inter | 32–40px | 600 (SemiBold) |
+| Heading H3 | Poppins / Inter | 24–28px | 600 (SemiBold) |
+| Body Text | Inter / Poppins | 16–18px | 400 (Regular) |
+| Caption/Label | Inter / Poppins | 12–14px | 400–500 |
+| Navbar | Inter | 14–16px | 500 (Medium) |
+| Button | Inter | 14–16px | 600 (SemiBold) |
+
+### 3.3 Komponen UI
+
+| Komponen | Spesifikasi |
+|---|---|
+| Navbar | Sticky; transparent di atas hero → solid biru `#2B4590` saat scroll; toggle ID/EN di kanan |
+| Hero Section | Full-height, overlay gradient gelap, judul besar, deskripsi, CTA kuning kontras |
+| Card Beasiswa | Border subtle, shadow ringan; hover: scale sedikit + shadow lebih dalam; thumbnail 100% lebar |
+| Button Primary | Solid biru, teks putih |
+| Button Secondary | Outline biru |
+| Button Ghost | Tanpa border |
+| Badge Status | Rounded pill; Hijau "Buka", Merah "Ditutup" |
+| Tab Filter | Underline active state, smooth transition, teks hitam, garis bawah aktif biru |
+| Popup Modal | Center screen, dark overlay, border-radius 12px, close button (×) kanan atas |
+| Footer | Background `#1A1A1A`, teks putih, 3–4 kolom desktop |
+
+---
+
+## 4. Desain Mockup (UI/UX)
+
+### 4.1 Alat Desain
+**Figma** — kolaborasi realtime, wireframe + hi-fidelity prototype.
+
+- **Figma Project:** https://www.figma.com/design/rG6JYG19CWziaPMhbJ2NPL/PPL-FIGMA?node-id=0-1
+- **Prototype Interaktif:** https://www.figma.com/proto/rG6JYG19CWziaPMhbJ2NPL/PPL-FIGMA?node-id=120-1247
+
+### 4.2 Tahapan Desain
+1. **Wireframe (Lo-Fi)** — sketsa hitam-putih, fokus layout & posisi elemen
+2. **Mockup (Hi-Fi)** — desain lengkap dengan warna, font, dan aset visual
+3. **Prototype** — mockup yang bisa diklik untuk simulasi navigasi antar seksi
+4. **User Testing** — validasi desain bersama calon pengguna
+
+### 4.3 Breakpoint & Resolusi
+
+| Perangkat | Resolusi Mockup |
+|---|---|
+| Desktop Monitor | 1920 × 1080 |
+| Laptop | 1366 × 768 |
+| Tablet Portrait | 768 × 1024 |
+| Tablet Landscape | 1024 × 768 |
+| Mobile / HP | 390 × 844 |
+
+---
+
+## 5. Desain Responsif
+
+### 5.1 Strategi: Mobile-First
+Desain dimulai dari layar terkecil → diperluas ke layar lebih besar via CSS media query. Memastikan performa optimal di koneksi lambat.
+
+### 5.2 Breakpoint
+
+| Perangkat | Breakpoint | Resolusi Umum |
+|---|---|---|
+| Desktop Monitor | `>= 1280px` | 1920×1080, 2560×1440 |
+| Laptop | `>= 1024px` | 1366×768, 1440×900 |
+| Tablet | `>= 768px` | 768×1024, 820×1180 |
+| Mobile | `< 768px` | 360×800, 390×844, 414×896 |
+
+### 5.3 Perubahan Layout per Breakpoint
+
+| Elemen | Mobile (<768px) | Tablet (768–1279px) | Desktop (≥1280px) |
+|---|---|---|---|
+| Navbar | Hamburger menu | Hamburger / partial menu | Horizontal full menu |
+| Hero Section | Teks atas, gambar bawah | Teks kiri, gambar kanan 50/50 | Teks kiri, gambar kanan lebar |
+| Card Grid | 1 kolom | 2 kolom | 3–4 kolom |
+| Teks Body | 16px | 16–17px | 17–18px |
+| Padding Section | 24px 16px | 40px 32px | 80px 64px |
+| Footer | Stack vertikal | 2 kolom | 3–4 kolom |
+
+### 5.4 Hasil Uji Responsivitas
+
+| No | Perangkat/Browser | Ukuran | Status | Catatan |
+|---|---|---|---|---|
+| 1 | Chrome Desktop | 1920×1080 | ✅ Lulus | Layout proporsional, spacing rapi |
+| 2 | Chrome Mobile Sim. | 390×844 | ✅ Lulus | Card grid 1 kolom, teks 16px nyaman |
+| 3 | Firefox Desktop | 1440×900 | ✅ Lulus | Konsisten dengan Chrome Desktop |
+| 4 | iPhone (Safari) | 390×844 | ✅ Lulus | Hero stack sempurna, padding aman |
+| 5 | Android Chrome | 360×800 | ✅ Lulus | Touch target ideal, gambar proporsional |
+| 6 | iPad (Safari) | 768×1024 | ✅ Lulus | Hero 50/50, spasi sentuh lega |
+
+---
+
+## 6. Use Case Diagram
+
+### 6.1 Aktor Sistem
+
+| Aktor | Deskripsi |
+|---|---|
+| Pengunjung Umum | Mahasiswa aktif, alumni, calon mahasiswa, dosen, masyarakat — tanpa autentikasi |
+| Admin Prodi | Pengelola konten: memperbarui data beasiswa, testimoni, statistik via push-to-repo |
+
+### 6.2 Daftar Use Case & Skenario
+
+Lihat detail lengkap di SRS.md. Ringkasan:
+
+| Kode | Nama | Aktor |
+|---|---|---|
+| UC-01 | Melihat Daftar Beasiswa | Pengunjung Umum |
+| UC-02 | Memfilter Beasiswa Berdasarkan Kategori | Pengunjung Umum |
+| UC-03 | Mencari Beasiswa | Pengunjung Umum |
+| UC-04 | Melihat Detail Beasiswa (Popup) | Pengunjung Umum |
+| UC-05 | Mengakses Sumber Resmi Beasiswa | Pengunjung Umum |
+| UC-06 | Menghubungi Admin via CTA | Pengunjung Umum |
+| UC-07 | Melihat Testimoni Penerima Beasiswa | Pengunjung Umum |
+| UC-08 | Mengganti Bahasa Tampilan (ID/EN) | Pengunjung Umum |
+| UC-09 | Memperbarui Data Beasiswa | Admin Prodi |
+
+**Relasi antar UC:** UC-04 `<<include>>` UC-05 (popup detail menyertakan akses sumber resmi)
+
+---
+
+## 7. Fitur Interaktif (Client-Side)
+
+Tidak ada backend API. Semua interaktivitas dijalankan di sisi klien.
+
+| No | Fitur | Teknologi | Keterangan |
+|---|---|---|---|
+| 1 | Smooth Scroll Navigasi | CSS `scroll-behavior` / JS | Scroll halus ke seksi saat klik menu |
+| 2 | Sticky Navbar | CSS `position:sticky` / JS scroll | Navbar tetap di atas saat scroll |
+| 3 | Hamburger Menu | JavaScript + CSS toggle | Menu responsif layar kecil |
+| 4 | Active State Navbar | JS `IntersectionObserver` | Highlight menu sesuai seksi terlihat |
+| 5 | Animasi Masuk (AOS) | AOS.js / CSS animation | Elemen muncul saat pertama kali di viewport |
+| 6 | Counter Animasi | JavaScript | Angka statistik berjalan saat di-scroll |
+| 7 | Filter Real-Time | Vanilla JavaScript | Filter kartu saat klik tab, tanpa reload |
+| 8 | Pencarian Real-Time | Vanilla JavaScript | Cari beasiswa saat ketik di search bar |
+| 9 | Popup Modal Detail | Vanilla JavaScript | Detail beasiswa dalam modal; tutup via ×, klik luar, atau Escape |
+| 10 | Toggle Bahasa ID/EN | Vanilla JS + localStorage | Ubah teks tanpa reload, simpan preference di session |
+| 11 | Carousel Testimoni | Vanilla JS / Swiper.js | Navigasi testimoni left/right; touch swipe di mobile |
+| 12 | Form Kontak (Opsional) | Formspree / EmailJS / mailto | Kirim pesan tanpa backend |
+| 13 | Lightbox Galeri (Opsional) | Fancybox / vanilla JS | Gambar fullscreen saat diklik |
+
+---
+
+## 8. Layanan Pihak Ketiga
+
+| Layanan | Kegunaan | Gratis? |
+|---|---|---|
+| Google Fonts | Tipografi (Inter/Poppins) | ✅ Ya |
+| Font Awesome | Ikon UI | ✅ Ya (tier dasar) |
+| Google Maps Embed | Peta lokasi di seksi kontak | ✅ Ya (basic embed) |
+| Formspree | Form kontak tanpa backend | ✅ Ya (tier dasar) |
+| AOS.js | Animasi scroll (Animate on Scroll) | ✅ Ya (open source) |
+| Swiper.js | Carousel testimoni | ✅ Ya (open source) |
+
+---
+
+## 9. Desain Keamanan
+
+### 9.1 Keamanan Form Kontak
+- Validasi client-side: semua field wajib diisi, format email dicek sebelum submit
+- Rate limiting: Formspree/EmailJS membatasi pengiriman untuk mencegah spam
+- reCAPTCHA (Opsional): Google reCAPTCHA v3 untuk mencegah bot
+
+### 9.2 Keamanan Konten
+- **Tidak ada data sensitif** — website tidak menyimpan data pengguna (no login, no database)
+- **HTTPS wajib** — sertifikat SSL/TLS pada server hosting prodi
+- **Content Security Policy** — meta CSP header untuk mencegah XSS
+- **External link** — semua link eksternal menggunakan `rel="noopener noreferrer"`
+
+---
+
+## 10. Struktur File yang Direkomendasikan
+
+```
+project-root/
+├── index.html              # File HTML utama (one-page)
+├── assets/
+│   ├── css/
+│   │   └── style.css       # Custom CSS (jika tidak full Tailwind)
+│   ├── js/
+│   │   ├── main.js         # Logika utama: scroll, navbar, AOS init
+│   │   ├── filter.js       # Filter & pencarian beasiswa
+│   │   ├── popup.js        # Modal popup detail beasiswa
+│   │   ├── counter.js      # Animasi counter statistik
+│   │   ├── carousel.js     # Carousel testimoni
+│   │   └── i18n.js         # Toggle bahasa ID/EN
+│   └── images/
+│       ├── hero/           # Foto hero section
+│       ├── beasiswa/       # Thumbnail logo beasiswa
+│       └── testimoni/      # Foto penerima beasiswa
+├── data/
+│   ├── beasiswa.json       # Data beasiswa (diupdate oleh admin)
+│   └── testimoni.json      # Data testimoni
+└── README.md               # Panduan setup & deployment
+```
+
+---
+
+## 11. Data Schema
+
+### 11.1 Schema Beasiswa (`beasiswa.json`)
+```json
+{
+  "id": "string",
+  "nama": "string",
+  "kategori": "Pemerintah | Swasta",
+  "status": "Buka | Ditutup",
+  "thumbnail": "path/to/image.jpg",
+  "deskripsi_singkat": "string (max 150 char)",
+  "syarat_umum": ["string", "string"],
+  "kontak": "string",
+  "tanggal_buka": "YYYY-MM-DD",
+  "tanggal_tutup": "YYYY-MM-DD",
+  "url_sumber": "https://...",
+  "tags": ["S1", "S2", "Magang", "Luar Negeri"]
+}
+```
+
+### 11.2 Schema Testimoni (`testimoni.json`)
+```json
+{
+  "id": "string",
+  "nama": "string",
+  "foto": "path/to/foto.jpg",
+  "nama_beasiswa": "string",
+  "kutipan": "string (max 200 char)"
+}
+```
+
+---
+
+## 12. Referensi
+
+1. IEEE Standard 1016-2009 — Software Design Descriptions
+2. W3C — HTML5 & CSS3 Specification (https://www.w3.org)
+3. Google — Web Fundamentals: Responsive Web Design
+4. MDN Web Docs — CSS Media Queries
+5. Figma — Design Tool Documentation
+6. Nurhikmat et al. (2024) — Optimasi Responsivitas Web dengan Mobile-First Design. JINTEKS.