diff --git a/groups/ApeNameTeamE/PROJECT_CONTEXT.md b/groups/ApeNameTeamE/PROJECT_CONTEXT.md deleted file mode 100644 index de03b10..0000000 --- a/groups/ApeNameTeamE/PROJECT_CONTEXT.md +++ /dev/null @@ -1,273 +0,0 @@ -# PROJECT CONTEXT -## Website Statis Halaman Beasiswa — Informatika UNTAN - -> File ini adalah konteks utama proyek untuk AI assistant (Antigravity). -> Baca file ini setiap kali kamu membantu pengerjaan proyek ini. - ---- - -## 🎯 Apa yang Dibangun? - -**Single static landing page** berbasis HTML/CSS/JS murni (native web) untuk menampilkan informasi beasiswa bagi mahasiswa aktif, alumni, dan masyarakat umum Program Studi Informatika, Universitas Tanjungpura (UNTAN), Pontianak. - -Website ini bukan aplikasi web dinamis. Tidak ada backend, tidak ada database, tidak ada login. Update konten dilakukan dengan mengedit file JSON dan push ke GitHub → auto-deploy via Puify ke server prodi. - ---- - -## 🏗️ Tech Stack - -| Layer | Teknologi | -|---|---| -| Markup | HTML5 | -| Styling | CSS3 + Tailwind CSS | -| Interaktivitas | Vanilla JavaScript (ES6+) | -| Font | Google Fonts (Inter / Poppins) | -| Ikon | Font Awesome | -| Animasi | AOS.js (Animate on Scroll) | -| Carousel | Swiper.js | -| Hosting | Dedicated Server Prodi UNTAN via Puify | -| Version Control | Git + GitHub | - -**Tidak boleh menggunakan:** Framework berat (React, Vue, Angular), backend (Node.js, PHP, Python), database (MySQL, MongoDB). - ---- - -## 📐 Desain - -- **Figma Project:** https://www.figma.com/design/rG6JYG19CWziaPMhbJ2NPL/PPL-FIGMA?node-id=0-1 -- **Prototype:** https://www.figma.com/proto/rG6JYG19CWziaPMhbJ2NPL/PPL-FIGMA?node-id=120-1247 - -### Warna Utama - -| Variabel | Hex | Penggunaan | -|---|---|---| -| Primary (Biru) | `#2B4590` | Navbar, heading, tombol, border aktif | -| Secondary (Kuning) | `#F5A623` | CTA, aksen, badge | -| Background | `#FFFFFF` | Latar halaman | -| Text | `#1A1A1A` | Body text | -| Accent | `#6B7280` | Caption, label, border | -| Success | `#10B981` | Badge "Buka" | -| Danger | `#EF4444` | Badge "Ditutup" | -| Overlay | `#00000080` | Background popup | - -### Tipografi -- **Font:** Inter (utama) / Poppins (heading) -- H1: 48–64px bold | H2: 32–40px semibold | H3: 24–28px semibold -- Body: 16–18px regular | Caption: 12–14px - ---- - -## 📄 Struktur Halaman (Top → Bottom) - -``` -[NAVBAR - Sticky] - Logo UNTAN | Menu: Beranda, Beasiswa, Testimoni, Kontak | Toggle ID/EN - -[#hero - Hero Section] - Judul: "Beasiswa Studi & Penelitian" - Sub: Teknik Informatika Universitas Tanjungpura - Deskripsi singkat tentang beasiswa - CTA Button (kuning): "Lihat Daftar Beasiswa →" - Foto ilustrasi mahasiswa (kanan) - -[#statistics - Statistik Counter] - 3 angka dengan animasi scroll: - - Total Mahasiswa Penerima Beasiswa Semester Ini - - Total Penerima Beasiswa Pembiayaan Pemerintah - - Total Penerima Beasiswa Pembiayaan Swasta - -[#directory - Direktori Beasiswa] - - Tab filter: Semua | Sedang Buka | Ditutup | Pemerintah | Swasta - - Search bar (real-time) - - Grid kartu beasiswa: - * Desktop: 3 kolom - * Tablet: 2 kolom - * Mobile: 1 kolom - - Tiap kartu: thumbnail, badge status, nama, deskripsi singkat, tanggal, tombol "Selengkapnya →" - - Klik "Selengkapnya →" → buka POPUP MODAL - -[POPUP MODAL - Detail Beasiswa] - - Nama + thumbnail/logo beasiswa - - Badge status (Buka / Ditutup) - - Syarat umum (ringkasan/bullet) - - Kontak yang bisa dihubungi - - Tombol "Info Lebih Lanjut" → buka URL sumber resmi (tab baru) - - Tutup: tombol ×, klik luar area, tekan Escape - -[#testimonial - Testimoni Penerima Beasiswa] - - Carousel / grid kartu - - Tiap kartu: foto, nama, nama beasiswa yang diterima, kutipan singkat - - Navigasi carousel jika > 3 testimoni - -[#cta - Call to Action] - - Judul: "Ingin Mengetahui Info Lebih Lanjut?" - - Dua tombol: - * "Daftar Beasiswa" (scroll ke #directory) - * "Hubungi Kami" (WhatsApp admin) - -[#footer - Footer] - - Logo Informatika UNTAN - - Alamat prodi, email, telepon, WhatsApp - - Ikon media sosial - - Ilustrasi khas Pontianak (dekorasi bawah) -``` - ---- - -## 📁 Struktur File Proyek - -``` -project-root/ -├── index.html -├── assets/ -│ ├── css/ -│ │ └── style.css -│ ├── js/ -│ │ ├── main.js # Init AOS, smooth scroll, sticky navbar -│ │ ├── filter.js # Filter tab + real-time search -│ │ ├── popup.js # Modal detail beasiswa -│ │ ├── counter.js # Animasi counter statistik -│ │ ├── carousel.js # Carousel testimoni (Swiper.js) -│ │ └── i18n.js # Toggle bahasa ID/EN -│ └── images/ -│ ├── hero/ -│ ├── beasiswa/ # Logo/thumbnail beasiswa -│ └── testimoni/ # Foto penerima -├── data/ -│ ├── beasiswa.json -│ └── testimoni.json -└── README.md -``` - ---- - -## 🗃️ Format Data - -### `data/beasiswa.json` -```json -[ - { - "id": "bsw-001", - "nama": "Beasiswa Adaro Foundation 2026", - "kategori": "Swasta", - "status": "Ditutup", - "thumbnail": "assets/images/beasiswa/adaro.jpg", - "deskripsi_singkat": "Beasiswa untuk mahasiswa S1 & D4 dengan IPK minimal 3.00...", - "syarat_umum": [ - "Mahasiswa aktif S1/D4", - "IPK minimal 3.00", - "Berasal dari keluarga kurang mampu" - ], - "kontak": "Admin Prodi / Kemahasiswaan UNTAN", - "tanggal_buka": "2026-01-01", - "tanggal_tutup": "2026-04-09", - "url_sumber": "https://...", - "tags": ["S1", "Swasta"] - } -] -``` - -### `data/testimoni.json` -```json -[ - { - "id": "tsm-001", - "nama": "Aulia Rahman", - "foto": "assets/images/testimoni/aulia.jpg", - "nama_beasiswa": "Beasiswa Prestasi", - "kutipan": "Beasiswa ini benar-benar membuka jalan bagi saya untuk fokus sepenuhnya pada pendidikan..." - } -] -``` - ---- - -## ⚙️ Fitur Interaktif yang Harus Diimplementasikan - -| Fitur | Status | File | -|---|---|---| -| Sticky Navbar (transparent → solid saat scroll) | ⏳ | `main.js` | -| Hamburger Menu | ⏳ | `main.js` | -| Smooth Scroll ke seksi | ⏳ | `main.js` | -| Active State Navbar (IntersectionObserver) | ⏳ | `main.js` | -| Animasi AOS (elemen muncul saat scroll) | ⏳ | `main.js` | -| Counter Animasi Statistik | ⏳ | `counter.js` | -| Render kartu beasiswa dari JSON | ⏳ | `filter.js` | -| Filter tab (Semua/Buka/Ditutup/Pemerintah/Swasta) | ⏳ | `filter.js` | -| Real-time search | ⏳ | `filter.js` | -| Popup Modal detail beasiswa | ⏳ | `popup.js` | -| Tutup popup (×, klik luar, Escape) | ⏳ | `popup.js` | -| Carousel testimoni (Swiper.js) | ⏳ | `carousel.js` | -| Toggle bahasa ID/EN | ⏳ | `i18n.js` | - ---- - -## 📱 Responsive Breakpoints - -```css -/* Mobile first */ -/* Default: mobile < 768px */ -/* Tablet: */ @media (min-width: 768px) { ... } -/* Laptop: */ @media (min-width: 1024px) { ... } -/* Desktop: */ @media (min-width: 1280px) { ... } -``` - ---- - -## 🔒 Aturan Keamanan Kode - -- Semua link eksternal: `target="_blank" rel="noopener noreferrer"` -- Tidak ada hardcoded data sensitif di source code -- Input search di-sanitasi sebelum digunakan untuk filter DOM -- Tidak menggunakan `innerHTML` dengan input pengguna langsung (cegah XSS) - ---- - -## 👥 Tim & Peran - -| Nama | Peran | -|---|---| -| Djapianus Thebrianto | Project Manager | -| Derangga Aray Abimanyu | Backend Developer (data, scraping, JSON) | -| Destra Aulia Faza Ananda Putra | Frontend Developer (HTML, CSS, JS) | -| Dian Satrio Prayogo | UI/UX Designer (Figma) | -| Jonathan Geral Nababan | Quality Assurance (testing) | - ---- - -## 📋 Hal Penting untuk AI Assistant - -1. **Ini bukan React/Vue/Angular.** Semua harus ditulis dalam HTML/CSS/Tailwind/Vanilla JS. -2. **Data beasiswa dibaca dari `data/beasiswa.json`** — bukan hardcoded di HTML. -3. **Warna wajib sesuai palet resmi** — jangan gunakan warna lain sembarangan. -4. **Mobile-first** — tulis CSS dari ukuran kecil dulu, baru ke besar. -5. **Popup harus bisa ditutup 3 cara:** tombol ×, klik overlay, tekan Escape. -6. **Filter dan search bisa aktif bersamaan** (kumulatif, bukan saling menggantikan). -7. **Navbar berubah warna saat scroll** — transparent di atas hero, solid biru setelah scroll turun. -8. **Semua animasi pakai AOS.js** — inisialisasi di `main.js` dengan `AOS.init()`. -9. **Carousel testimoni pakai Swiper.js** — touch-friendly untuk mobile. -10. **Tidak ada `alert()`, `console.log()` di production code.** - ---- - -## 🚀 Cara Kerja Deployment - -``` -Developer push ke GitHub - ↓ - Puify detects push - ↓ - Auto-deploy ke server - ↓ - Website live (Dev) - ↓ - Approved → Production -``` - ---- - -## 📎 Dokumen Terkait - -- `SRS.md` — Spesifikasi kebutuhan lengkap (use case, NFR, batasan) -- `SDD.md` — Desain teknis lengkap (arsitektur, komponen, schema data) -- Figma: https://www.figma.com/design/rG6JYG19CWziaPMhbJ2NPL/PPL-FIGMA?node-id=0-1 diff --git a/groups/ApeNameTeamE/SDD.md b/groups/ApeNameTeamE/SDD.md deleted file mode 100644 index ebbef87..0000000 --- a/groups/ApeNameTeamE/SDD.md +++ /dev/null @@ -1,329 +0,0 @@ -# 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 `<>` 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. diff --git a/groups/ApeNameTeamE/SRS.md b/groups/ApeNameTeamE/SRS.md deleted file mode 100644 index 71f675f..0000000 --- a/groups/ApeNameTeamE/SRS.md +++ /dev/null @@ -1,337 +0,0 @@ -# Software Requirements Specification (SRS) -## Pengembangan Website Statis Halaman Beasiswa -### Program Studi Informatika — Universitas Tanjungpura - -| Field | Detail | -|---|---| -| Nama Proyek | Pengembangan Website Statis Halaman Beasiswa | -| Kelompok | Ape Nama Team E | -| Versi | 1.1 | -| Tanggal | 01/05/2026 | -| Dosen | Izuardo Zulkarnain, S.Pd., M.T | -| Mata Kuliah | Proyek Perangkat Lunak — Semester Genap 2025/2026 | - -**Anggota Tim:** -- Djapianus Thebrianto — Project Manager -- Derangga Aray Abimanyu — Backend Developer -- Destra Aulia Faza Ananda Putra — Frontend Developer -- Dian Satrio Prayogo — UI/UX Designer -- Jonathan Geral Nababan — Quality Assurance - ---- - -## 1. Pendahuluan - -### 1.1 Tujuan Dokumen - -SRS ini memberikan spesifikasi teknis dan fungsional untuk pengembangan Website Statis Beasiswa Informatika Universitas Tanjungpura. Dokumen ini memastikan: - -- Pengembang membangun sistem dengan kode sederhana yang mudah di-maintain melalui mekanisme push-to-repo ke dedicated server prodi. -- Penyajian data beasiswa (nama & syarat umum) dilakukan melalui fitur **Pop-up** dengan akses langsung ke admin via WhatsApp dan Instagram kemahasiswaan UNTAN. -- Proyek mengalihkan alur data dari portal universitas/survei admin ke static page dengan **availability 24 jam**. - -**Ditujukan kepada:** Tim Ape Nama Team E, Product Owner (dosen), dan Administrator Prodi. - -### 1.2 Ruang Lingkup - -Website statis single-page yang menjadi pusat informasi beasiswa, riset, dan pengembangan karir — terintegrasi dengan infrastruktur server Prodi Informatika UNTAN. - -**Fitur yang dicakup:** -- Direktori beasiswa (mahasiswa aktif, alumni, S2 luar negeri, magang) -- Detail beasiswa via popup (nama + syarat umum) -- Data beasiswa dari web scraping sumber resmi -- Seksi testimoni penerima beasiswa (foto, profil, kutipan) -- Toggle bahasa Indonesia / Inggris (bilingual) -- CTA ke WhatsApp admin & Instagram kemahasiswaan UNTAN - -**Yang TIDAK dicakup:** -- Formulir pendaftaran (diarahkan ke URL asli penyedia) -- Halaman admin berbasis web (update via push-to-repo) -- Database — data bersifat statis (JSON/JS di repositori) - -### 1.3 Definisi & Akronim - -| Istilah | Definisi | -|---|---| -| Native Website | Web dengan HTML, CSS, JS murni tanpa framework kompleks | -| Scraping | Pengambilan data otomatis dari website eksternal | -| Dedicated Server | Server milik Prodi Informatika UNTAN (Dev & Production) | -| Pop-up / Modal | Jendela overlay di atas halaman tanpa reload | -| CTA | Call-to-Action — tombol ajakan ke WhatsApp/Instagram | -| Availability | Kemampuan sistem beroperasi 24 jam | -| Puify | Platform SaaS otomatisasi deployment dari repo ke server | - -### 1.4 Referensi -- IEEE Std 830-1998 — Software Requirements Specifications -- UU No. 27 Tahun 2022 tentang Perlindungan Data Pribadi (UU PDP) - ---- - -## 2. Deskripsi Umum Sistem - -### 2.1 Perspektif Produk - -Produk baru berdiri sendiri sebagai **single static landing page** — bukan pengganti sistem lama. Website ini hadir sebagai transformasi digital dari penyebaran info beasiswa yang sebelumnya manual (portal, surat kabar mahasiswa, grup medsos) ke satu platform terpusat. - -**Integrasi eksternal (satu arah):** -- Website resmi penyedia beasiswa (data via scraping) -- API Website Informatika UNTAN (konten artikel/berita) -- WhatsApp & Instagram Kemahasiswaan UNTAN (CTA) - -Tidak ada antarmuka admin berbasis web. Semua update konten via **push ke GitHub → auto-deploy ke server** melalui Puify. - -### 2.2 Fungsi Utama Sistem - -| Kode | Fungsi | Deskripsi | -|---|---|---| -| F01 | Direktori Beasiswa | Grid kartu beasiswa aktif, S2, magang, penelitian dari berbagai sumber resmi | -| F02 | Filter & Pencarian | Saring berdasarkan kategori (Semua/Buka/Ditutup/Pemerintah/Swasta) + real-time search | -| F03 | Detail via Pop-up | Modal berisi nama, syarat umum, kontak, tautan sumber resmi | -| F04 | Testimoni | Foto, nama, nama beasiswa, kutipan dari penerima beasiswa | -| F05 | CTA Hubungi Admin | Tombol cepat ke WhatsApp admin & Instagram kemahasiswaan | -| F06 | Bilingual ID/EN | Toggle bahasa Indonesia ↔ Inggris tanpa reload | -| F07 | Update via Repository | Admin edit file data + push → halaman publik auto-update | - -### 2.3 Kelas Pengguna - -| Kelas | Karakteristik | Hak Akses | -|---|---|---| -| Pengunjung Umum | Mahasiswa aktif, alumni, masyarakat — tanpa login | Lihat konten, filter, search, buka popup, akses link eksternal | -| Admin Prodi | Staf/mahasiswa dengan kemampuan Git dasar | Edit file data di GitHub → push → deploy otomatis | - -### 2.4 Lingkungan Operasional - -| Komponen | Spesifikasi | -|---|---| -| Platform | Browser modern: Chrome ≥v100, Firefox ≥v100, Edge ≥v100, Safari ≥v15 | -| Server/Hosting | Dedicated server Prodi Informatika UNTAN (Dev & Production) via Puify | -| Database | Tidak ada — data di file statis JSON/JS di repositori | -| Bahasa Pemrograman | HTML5, CSS3 + Tailwind CSS, JavaScript ES6+ | -| Version Control | Git / GitHub | -| Koneksi | Min 1 Mbps (dasar), 10 Mbps (optimal) | - -### 2.5 Asumsi & Ketergantungan - -**Asumsi:** -- Pengunjung menggunakan browser modern dengan JS ES6+ dan CSS3 aktif -- Data beasiswa sudah diverifikasi admin sebelum dipublikasikan -- Perangkat pengunjung mendukung akses WhatsApp (app atau web) - -**Ketergantungan:** -- Dedicated server Prodi UNTAN harus aktif untuk availability 24 jam -- Update data bergantung pada keaktifan admin melakukan push secara berkala -- Fitur berita bergantung pada stabilitas API Website Informatika UNTAN -- CTA bergantung pada keaktifan nomor WhatsApp & akun Instagram kemahasiswaan - ---- - -## 3. Kebutuhan Fungsional - -### 3.1 Daftar Use Case - -| UC ID | Nama Use Case | Aktor | Prioritas (MoSCoW) | -|---|---|---|---| -| UC-01 | Melihat Daftar Beasiswa | Pengunjung Umum | Must Have | -| UC-02 | Memfilter Beasiswa Berdasarkan Kategori | Pengunjung Umum | Must Have | -| UC-03 | Mencari Beasiswa | Pengunjung Umum | Must Have | -| UC-04 | Melihat Detail Beasiswa (Popup) | Pengunjung Umum | Must Have | -| UC-05 | Mengakses Sumber Informasi Beasiswa | Pengunjung Umum | Must Have | -| UC-06 | Menghubungi Admin via CTA | Pengunjung Umum | Must Have | -| UC-07 | Melihat Testimoni Penerima Beasiswa | Pengunjung Umum | Should Have | -| UC-08 | Mengganti Bahasa Tampilan (ID/EN) | Pengunjung Umum | Should Have | -| UC-09 | Memperbarui Data Beasiswa | Admin Prodi | Must Have | - -### 3.2 Detail Use Case - -#### UC-01: Melihat Daftar Beasiswa -| Field | Detail | -|---|---| -| Aktor | Pengunjung Umum | -| Precondition | Halaman berhasil dimuat di browser | -| Trigger | Pengunjung membuka URL atau scroll ke seksi Daftar Beasiswa | -| Main Flow | 1. Pengunjung buka URL halaman
2. Sistem tampilkan hero, statistik, daftar beasiswa
3. Kartu ditampilkan grid: 3 kolom desktop / 2 tablet / 1 mobile
4. Tiap kartu: thumbnail, badge status, nama, deskripsi singkat, tanggal, tombol "Selengkapnya"
5. Paginasi tampil di bawah grid jika beasiswa > 1 halaman | -| Alt Flow | 3a. Koneksi lambat → skeleton loading
3b. Tidak ada data → tampil "Belum ada beasiswa tersedia saat ini." | -| Postcondition | Pengunjung dapat melihat seluruh daftar beasiswa | - -#### UC-02: Memfilter Beasiswa Berdasarkan Kategori -| Field | Detail | -|---|---| -| Aktor | Pengunjung Umum | -| Precondition | Halaman dimuat, daftar beasiswa tampil | -| Trigger | Pengunjung klik salah satu tab filter | -| Main Flow | 1. Tampil tab: Semua \| Sedang Buka \| Ditutup \| Pemerintah \| Swasta
2. Pengunjung klik tab
3. Sistem real-time filter beasiswa sesuai kategori
4. Tab aktif ditandai bold/underline/warna
5. Jumlah hasil diperbarui | -| Alt Flow | 3a. Tidak ada hasil → "Tidak ada beasiswa pada kategori ini."
3b. Klik "Semua" → tampil semua beasiswa | -| Postcondition | Daftar beasiswa sesuai filter yang dipilih | - -#### UC-03: Mencari Beasiswa -| Field | Detail | -|---|---| -| Aktor | Pengunjung Umum | -| Precondition | Halaman dimuat, kolom pencarian tersedia | -| Trigger | Pengunjung mengetik di kolom pencarian | -| Main Flow | 1. Pengunjung klik kolom pencarian
2. Ketik kata kunci (misal: "Pertamina", "KIP", "luar negeri")
3. Sistem real-time filter kartu yang nama/deskripsinya cocok
4. Hapus kata kunci → kembali ke tampilan penuh
5. Filter dan pencarian dapat aktif bersamaan (kumulatif) | -| Alt Flow | 3a. Tidak ada hasil → "Tidak ditemukan beasiswa yang sesuai pencarian Anda." | -| Postcondition | Daftar beasiswa sesuai kata kunci | - -#### UC-04: Melihat Detail Beasiswa (Popup) -| Field | Detail | -|---|---| -| Aktor | Pengunjung Umum | -| Precondition | Kartu beasiswa tampil, pengunjung menemukan beasiswa yang diinginkan | -| Trigger | Klik tombol "Selengkapnya →" pada kartu | -| Main Flow | 1. Klik "Selengkapnya →"
2. Sistem tampilkan modal popup berisi: nama + thumbnail, badge status, syarat umum ringkasan, kontak, tombol "Info Lebih Lanjut" (→ URL sumber resmi di tab baru)
3. Background di-overlay gelap
4. Tutup via: tombol ×, klik di luar area, atau tekan Escape | -| Alt Flow | 4a. Klik "Info Lebih Lanjut" → jalankan UC-05 | -| Postcondition | Pengunjung mendapat info ringkas dan dapat lanjut ke sumber resmi | - -#### UC-05: Mengakses Sumber Informasi Beasiswa -| Field | Detail | -|---|---| -| Aktor | Pengunjung Umum | -| Precondition | Popup detail terbuka, tombol "Info Lebih Lanjut" tersedia | -| Trigger | Klik tombol "Info Lebih Lanjut" di popup | -| Main Flow | 1. Klik tombol
2. Sistem buka URL sumber resmi di tab baru
3. Popup di tab asal tetap terbuka | -| Alt Flow | 3a. URL tidak tersedia → "Tautan tidak tersedia. Silakan hubungi admin prodi." | -| Postcondition | Pengunjung diarahkan ke sumber resmi beasiswa | - -#### UC-06: Menghubungi Admin via CTA -| Field | Detail | -|---|---| -| Aktor | Pengunjung Umum | -| Precondition | Pengunjung ingin info lebih lanjut | -| Trigger | Scroll ke seksi CTA, klik salah satu tombol | -| Main Flow | 1. Scroll ke CTA ("Ingin Tahu Lebih Banyak tentang Beasiswa?")
2. Tampil dua tombol: "Hubungi Admin" (WhatsApp) + "Instagram Beasiswa" (IG kemahasiswaan)
3. Klik tombol → buka platform di tab baru | -| Alt Flow | 4a. Tanpa WhatsApp terinstall → buka WhatsApp Web | -| Postcondition | Pengunjung terhubung dengan admin atau follow Instagram | - -#### UC-07: Melihat Testimoni Penerima Beasiswa -| Field | Detail | -|---|---| -| Aktor | Pengunjung Umum | -| Precondition | Halaman dimuat, data testimoni tersedia di source code | -| Trigger | Scroll ke seksi Testimoni | -| Main Flow | 1. Scroll ke seksi Testimoni
2. Tampil kartu testimoni: foto, nama, nama beasiswa, kutipan singkat
3. Jika > 3 testimoni → navigasi carousel/tombol selanjutnya | -| Alt Flow | 2a. Belum ada data → seksi tidak ditampilkan atau tampil placeholder | -| Postcondition | Pengunjung mendapat gambaran pengalaman penerima beasiswa | - -#### UC-08: Mengganti Bahasa Tampilan (ID/EN) -| Field | Detail | -|---|---| -| Aktor | Pengunjung Umum | -| Precondition | Toggle ID\|EN tersedia di header navigasi | -| Trigger | Klik toggle bahasa di pojok kanan header | -| Main Flow | 1. Pengunjung lihat toggle ID \| EN di kanan atas
2. Klik bahasa yang diinginkan
3. Seluruh teks berubah tanpa reload
4. Pilihan tersimpan di session (tidak reset saat scroll/filter) | -| Alt Flow | 3a. Konten hanya tersedia 1 bahasa → tetap tampil bahasa aslinya | -| Postcondition | Halaman tampil dalam bahasa yang dipilih | - -#### UC-09: Memperbarui Data Beasiswa -| Field | Detail | -|---|---| -| Aktor | Admin Prodi | -| Precondition | Admin punya akses repo, ada info beasiswa baru/perubahan status | -| Trigger | Admin mendapat informasi update dari survei/portal/sumber lain | -| Main Flow | 1. Admin dapat info baru/perubahan status
2. Edit file data beasiswa (nama, kategori, status, syarat, kontak, URL)
3. Simpan dan push ke GitHub
4. Halaman publik auto-update dalam waktu singkat via Puify | -| Alt Flow | 3a. Error saat deploy → halaman publik tidak berubah, admin perbaiki dan push ulang | -| Postcondition | Info beasiswa terbaru tersedia di halaman publik 24/7 | - ---- - -## 4. Kebutuhan Antarmuka Eksternal - -### 4.1 Antarmuka Pengguna (UI) - -- Responsive design: breakpoint 320px (mobile), 768px (tablet), 1280px (desktop) -- Warna utama: Biru Informatika `#2B4590` dan Kuning `#F5A623` (branding UNTAN) -- Font: Inter atau Poppins, minimal 14px untuk body text -- Waktu respons antarmuka ≤ 3 detik pada koneksi 10 Mbps -- Aksesibilitas WCAG 2.1 level AA (kontras warna, ARIA label, navigasi keyboard) -- Semua elemen interaktif memiliki feedback visual saat hover/klik - -**Halaman / Seksi:** - -| Seksi | ID | Konten Utama | -|---|---|---| -| Header & Navigasi | — | Navbar sticky, logo UNTAN, toggle ID/EN, info ticker | -| Hero | `#hero` | Judul "Beasiswa Studi & Penelitian", deskripsi, CTA kuning, foto mahasiswa | -| Statistik Counter | `#statistics` | 3 angka animasi: Total Penerima, Pemerintah, Swasta | -| Direktori Beasiswa | `#directory` | Grid kartu, tab filter, real-time search, popup detail | -| Testimoni | `#testimonial` | Carousel foto+nama+kutipan penerima beasiswa | -| CTA | `#cta` | Banner ajakan + tombol WhatsApp & Instagram | -| Footer | `#footer` | Logo, alamat, kontak, sosial media, ilustrasi Pontianak | - -### 4.2 Antarmuka Hardware -- Browser modern: Chrome/Firefox/Edge ≥v100, Safari ≥v15 -- Koneksi minimal 1 Mbps; optimal 10 Mbps -- Resolusi minimal 320px lebar -- Tidak butuh hardware khusus (kamera, printer, sensor, dll.) - -### 4.3 Antarmuka Software - -| Layanan | Tujuan | Protokol | -|---|---|---| -| Dedicated Server + Puify | Hosting dev & production, auto-deploy dari GitHub | HTTPS | -| GitHub | Version control, kolaborasi, deliverable akhir | HTTPS/SSH | -| Sumber Resmi Beasiswa | Link eksternal di popup (dibuka tab baru) | HTTPS | -| WhatsApp / Instagram UNTAN | Tombol CTA | HTTPS / wa.me | -| Figma | Desain mockup & wireframe acuan implementasi | HTTPS | -| Web Scraper | Ambil data beasiswa dari sumber resmi | HTTPS | - -### 4.4 Antarmuka Komunikasi -- Semua file dikirim via HTTPS dengan sertifikat SSL/TLS valid -- Fitur interaktif (filter, search, toggle bahasa, popup, counter) berjalan client-side (JS) — tanpa request ke server -- Semua link eksternal: `target="_blank"` + `rel="noopener noreferrer"` -- Tidak menggunakan cookie, session storage, atau autentikasi pengguna (v1.0) - ---- - -## 5. Kebutuhan Non-Fungsional - -### NFR-01: Performa -- **P-01** Loading halaman ≤ 3 detik pada koneksi 10 Mbps -- **P-02** Filter beasiswa merespons < 0,5 detik setelah klik -- **P-03** Tetap responsif dan optimal di desktop, tablet, dan smartphone - -### NFR-02: Keamanan -- **S-01** Semua komunikasi via HTTPS dengan SSL/TLS -- **S-02** Source code bersih dari script berbahaya, bebas celah XSS -- **S-03** Semua link CTA dan pendaftaran mengarah ke sumber resmi tervalidasi - -### NFR-03: Skalabilitas -- **SC-01** Mampu menampilkan minimal 100 data beasiswa tanpa penurunan performa -- **SC-02** Struktur kode memungkinkan penambahan kategori baru tanpa perubahan besar -- **SC-03** Sistem bilingual mendukung penambahan bahasa baru di masa depan - -### NFR-04: Ketersediaan & Reliabilitas -- **R-01** Uptime minimal 99% selama masa operasional -- **R-02** Dapat diakses 24 jam selama server aktif -- **R-03** Backup source code via Git/GitHub untuk pemulihan data - -### NFR-05: Usability -- **U-01** Antarmuka bilingual ID/EN -- **U-02** Pengguna menemukan info beasiswa dalam < 2 menit via navigasi & filter -- **U-03** Tombol CTA di Hero kontras dan posisinya jelas - -### NFR-06: Maintainability -- **M-01** Tech stack: HTML5, CSS3 + Tailwind CSS, JavaScript ES6+ — kode rapi dan mudah dipelihara -- **M-02** Semua perubahan dikelola via Git/GitHub (version control) -- **M-03** Dokumentasi teknis & panduan deployment disertakan saat penyerahan akhir - ---- - -## 6. Batasan & Kendala - -### 6.1 Batasan Implementasi -- Tech stack terkunci: HTML5, CSS3, Tailwind CSS, JavaScript ES6+, Figma, Git/GitHub -- Single static landing page — tidak ada backend, database, atau login -- Harus berjalan optimal di Chrome, Firefox, Edge versi terbaru -- Wajib responsif: desktop, tablet, smartphone - -### 6.2 Batasan Proyek -- Durasi: 10 hari kerja (1 Mei – 11 Mei 2026) -- Tim: 5 orang dengan peran tetap (PM, Backend, Frontend, UI/UX, QA) -- Revisi antarmuka/konten sesuai batas yang disepakati -- Penambahan fitur baru saat development = di luar ruang lingkup utama - -### 6.3 Regulasi & Standar -- UU PDP No. 27/2022 untuk pengelolaan data testimoni mahasiswa -- Visual harus selaras branding resmi Informatika UNTAN -- Memenuhi prinsip aksesibilitas dasar (navigasi jelas, tampilan informatif)