merge upstream

This commit is contained in:
2026-06-05 09:06:07 +00:00
5 changed files with 245 additions and 1014 deletions
-273
View File
@@ -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: 4864px bold | H2: 3240px semibold | H3: 2428px semibold
- Body: 1618px regular | Caption: 1214px
---
## 📄 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
-329
View File
@@ -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 | 4864px | 700 (Bold) |
| Heading H2 | Poppins / Inter | 3240px | 600 (SemiBold) |
| Heading H3 | Poppins / Inter | 2428px | 600 (SemiBold) |
| Body Text | Inter / Poppins | 1618px | 400 (Regular) |
| Caption/Label | Inter / Poppins | 1214px | 400500 |
| Navbar | Inter | 1416px | 500 (Medium) |
| Button | Inter | 1416px | 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, 34 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 (7681279px) | 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 | 34 kolom |
| Teks Body | 16px | 1617px | 1718px |
| Padding Section | 24px 16px | 40px 32px | 80px 64px |
| Footer | Stack vertikal | 2 kolom | 34 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.
-337
View File
@@ -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<br>2. Sistem tampilkan hero, statistik, daftar beasiswa<br>3. Kartu ditampilkan grid: 3 kolom desktop / 2 tablet / 1 mobile<br>4. Tiap kartu: thumbnail, badge status, nama, deskripsi singkat, tanggal, tombol "Selengkapnya"<br>5. Paginasi tampil di bawah grid jika beasiswa > 1 halaman |
| Alt Flow | 3a. Koneksi lambat → skeleton loading<br>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<br>2. Pengunjung klik tab<br>3. Sistem real-time filter beasiswa sesuai kategori<br>4. Tab aktif ditandai bold/underline/warna<br>5. Jumlah hasil diperbarui |
| Alt Flow | 3a. Tidak ada hasil → "Tidak ada beasiswa pada kategori ini."<br>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<br>2. Ketik kata kunci (misal: "Pertamina", "KIP", "luar negeri")<br>3. Sistem real-time filter kartu yang nama/deskripsinya cocok<br>4. Hapus kata kunci → kembali ke tampilan penuh<br>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 →"<br>2. Sistem tampilkan modal popup berisi: nama + thumbnail, badge status, syarat umum ringkasan, kontak, tombol "Info Lebih Lanjut" (→ URL sumber resmi di tab baru)<br>3. Background di-overlay gelap<br>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<br>2. Sistem buka URL sumber resmi di tab baru<br>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?")<br>2. Tampil dua tombol: "Hubungi Admin" (WhatsApp) + "Instagram Beasiswa" (IG kemahasiswaan)<br>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<br>2. Tampil kartu testimoni: foto, nama, nama beasiswa, kutipan singkat<br>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<br>2. Klik bahasa yang diinginkan<br>3. Seluruh teks berubah tanpa reload<br>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<br>2. Edit file data beasiswa (nama, kategori, status, syarat, kontak, URL)<br>3. Simpan dan push ke GitHub<br>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)
+18 -17
View File
@@ -26,7 +26,7 @@
return s; // "Segera Dibuka" atau nilai lain: tampilkan apa adanya
}
// Petakan satu item Directus ke skema yang diharapkan filter.js / popup.js
// Petakan satu item (API remote maupun lokal) ke skema yang diharapkan filter.js / popup.js
function normalizeItem(item) {
const parts = [item.jenjang, item.negara, item.tipe_pendanaan].filter(Boolean);
return {
@@ -34,14 +34,16 @@
nama: item.nama || '',
status: normalizeStatus(item.status),
kategori: item.tipe_pendanaan || '',
thumbnail: '',
deskripsi_singkat: parts.join(' · ') || 'Info beasiswa tersedia di sumber resmi.',
thumbnail: item.thumbnail || '',
deskripsi_singkat: item.deskripsi_singkat || parts.join(' · ') || 'Info beasiswa tersedia di sumber resmi.',
deskripsi_singkat_en: item.deskripsi_singkat_en || '',
tanggal_buka: item.tanggal_buka || '',
tanggal_tutup: item.tenggat_waktu || '',
url_sumber: item.url || '',
syarat_umum: [],
kontak: '',
tags: parts,
syarat_umum: item.syarat_umum || [],
syarat_umum_en: item.syarat_umum_en || [],
kontak: item.kontak || '',
tags: item.tags || parts,
};
}
@@ -56,23 +58,22 @@
const res = await fetch(CONFIG.localSource);
if (!res.ok) throw new Error(`Gagal memuat data lokal (HTTP ${res.status})`);
const json = await res.json();
return Array.isArray(json) ? json : json.data || [];
const raw = Array.isArray(json) ? json : json.data || [];
return raw.map(normalizeItem);
}
async function getBeasiswa() {
try {
// Prioritas: data lokal (lengkap: url_sumber, syarat_umum, kontak tersedia)
// Remote API digunakan hanya sebagai fallback jika data lokal tidak ditemukan.
const data = await fetchLocal();
return { data, source: 'local' };
const data = await fetchRemote();
return { data, source: 'remote' };
} catch (err) {
console.warn('[BeasiswaAPI] Data lokal gagal, fallback ke API remote:', err.message);
console.warn('[BeasiswaAPI] API remote gagal, fallback ke data lokal:', err.message);
try {
const data = await fetchRemote();
return { data, source: 'remote' };
} catch (remoteErr) {
console.error('[BeasiswaAPI] Semua sumber gagal:', remoteErr.message);
throw remoteErr;
const data = await fetchLocal();
return { data, source: 'local' };
} catch (localErr) {
console.error('[BeasiswaAPI] Semua sumber gagal:', localErr.message);
throw localErr;
}
}
}
+227 -58
View File
@@ -1,12 +1,19 @@
[
{
"id": "bsw-001",
"id": 101,
"nama": "Boustany Foundation Scholarship, MBA - Harvard University",
"nama_en": "Boustany Foundation Scholarship, MBA - Harvard University",
"kategori": "Swasta",
"kategori_en": "Private",
"status": "Buka",
<<<<<<< HEAD
"tipe_pendanaan": "Swasta",
"jenjang": "S2",
"negara": "Amerika Serikat",
"tanggal_buka": "2026-05-21",
"tenggat_waktu": "2027-05-31",
"url": "https://www.schoters.com/id/beasiswa/boustany-foundation-scholarship-mba-harvard-university-1",
"thumbnail": "https://images.unsplash.com/photo-1541339907198-e08756dedf3f?w=400&q=80&auto=format&fit=crop",
=======
>>>>>>> b5bc7bad0c7de6e63a60018da0fe06e923bf094c
"deskripsi_singkat": "Beasiswa bergengsi dari Boustany Foundation untuk program MBA di Harvard University, Amerika Serikat, bagi calon pemimpin bisnis dunia.",
"deskripsi_singkat_en": "A prestigious scholarship from the Boustany Foundation for the MBA program at Harvard University, United States, for future global business leaders.",
"syarat_umum": [
@@ -22,18 +29,23 @@
"Complete the scholarship application online through the official Boustany Foundation website"
],
"kontak": "Boustany Foundation — boustany-foundation.com",
"tanggal_buka": "2026-05-21",
"tanggal_tutup": "2027-05-31",
"url_sumber": "https://www.schoters.com/id/beasiswa/boustany-foundation-scholarship-mba-harvard-university-1",
"tags": ["S2", "Swasta", "Amerika Serikat", "Partially Funded", "MBA"]
},
{
"id": "bsw-002",
"id": 102,
"nama": "La Trobe University - La Trobe High Achiever Scholarship (S1)",
"kategori": "Swasta",
"kategori_en": "Private",
"nama_en": "La Trobe University - La Trobe High Achiever Scholarship (S1)",
"status": "Buka",
<<<<<<< HEAD
"tipe_pendanaan": "Swasta",
"jenjang": "S1",
"negara": "Australia",
"tanggal_buka": "2023-09-29",
"tenggat_waktu": "2026-12-31",
"url": "https://www.schoters.com/id/beasiswa/la-trobe-university-la-trobe-high-achiever-scholarship-2",
"thumbnail": "https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=400&q=80&auto=format&fit=crop",
=======
>>>>>>> b5bc7bad0c7de6e63a60018da0fe06e923bf094c
"deskripsi_singkat": "Beasiswa dari La Trobe University Australia untuk mahasiswa internasional jenjang S1 berprestasi tinggi yang ingin melanjutkan studi di Melbourne.",
"deskripsi_singkat_en": "Scholarship from La Trobe University Australia for high-achieving international undergraduate students who wish to pursue their studies in Melbourne.",
"syarat_umum": [
@@ -49,18 +61,23 @@
"Meet La Trobe University's entry and English language requirements"
],
"kontak": "La Trobe University Admissions — latrobe.edu.au",
"tanggal_buka": "2023-09-29",
"tanggal_tutup": "2026-12-31",
"url_sumber": "https://www.schoters.com/id/beasiswa/la-trobe-university-la-trobe-high-achiever-scholarship-2",
"tags": ["S1", "Swasta", "Australia", "Partially Funded"]
},
{
"id": "bsw-003",
"id": 103,
"nama": "Charles Sturt University - International Student Support Scholarship",
"kategori": "Swasta",
"kategori_en": "Private",
"nama_en": "Charles Sturt University - International Student Support Scholarship",
"status": "Buka",
<<<<<<< HEAD
"tipe_pendanaan": "Swasta",
"jenjang": "S1",
"negara": "Australia",
"tanggal_buka": "2026-05-21",
"tenggat_waktu": "2026-12-31",
"url": "https://www.schoters.com/id/beasiswa/charles-sturt-university-international-student-support-scholarship-3",
"thumbnail": "https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=400&q=80&auto=format&fit=crop",
=======
>>>>>>> b5bc7bad0c7de6e63a60018da0fe06e923bf094c
"deskripsi_singkat": "Beasiswa dukungan dari Charles Sturt University bagi mahasiswa internasional jenjang S1 yang mendaftar di kampus yang berlokasi di New South Wales, Australia.",
"deskripsi_singkat_en": "Support scholarship from Charles Sturt University for international undergraduate students enrolling at a campus located in New South Wales, Australia.",
"syarat_umum": [
@@ -76,18 +93,23 @@
"Apply through the official international admission pathway"
],
"kontak": "Charles Sturt University International — csu.edu.au",
"tanggal_buka": "2026-05-21",
"tanggal_tutup": "2026-12-31",
"url_sumber": "https://www.schoters.com/id/beasiswa/charles-sturt-university-international-student-support-scholarship-3",
"tags": ["S1", "Swasta", "Australia", "Partially Funded"]
},
{
"id": "bsw-004",
"id": 104,
"nama": "La Trobe University - La Trobe High Achiever Scholarship (S2)",
"kategori": "Swasta",
"kategori_en": "Private",
"nama_en": "La Trobe University - La Trobe High Achiever Scholarship (S2)",
"status": "Buka",
<<<<<<< HEAD
"tipe_pendanaan": "Swasta",
"jenjang": "S2",
"negara": "Australia",
"tanggal_buka": "2023-09-29",
"tenggat_waktu": "2026-12-31",
"url": "https://www.schoters.com/id/beasiswa/la-trobe-university-la-trobe-high-achiever-scholarship-4",
"thumbnail": "https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=400&q=80&auto=format&fit=crop",
=======
>>>>>>> b5bc7bad0c7de6e63a60018da0fe06e923bf094c
"deskripsi_singkat": "Beasiswa dari La Trobe University Australia untuk mahasiswa internasional jenjang S2 (Postgraduate) dengan pencapaian akademik tinggi.",
"deskripsi_singkat_en": "Scholarship from La Trobe University Australia for international postgraduate students with high academic achievements.",
"syarat_umum": [
@@ -103,18 +125,23 @@
"Not currently receiving another scholarship from the same university"
],
"kontak": "La Trobe University Admissions — latrobe.edu.au",
"tanggal_buka": "2023-09-29",
"tanggal_tutup": "2026-12-31",
"url_sumber": "https://www.schoters.com/id/beasiswa/la-trobe-university-la-trobe-high-achiever-scholarship-4",
"tags": ["S2", "Swasta", "Australia", "Partially Funded"]
},
{
"id": "bsw-005",
"id": 105,
"nama": "ETH Zurich - Excellence Scholarship & Opportunity Programme (ESOP)",
"kategori": "Pemerintah",
"kategori_en": "Government",
"nama_en": "ETH Zurich - Excellence Scholarship & Opportunity Programme (ESOP)",
"status": "Buka",
<<<<<<< HEAD
"tipe_pendanaan": "Pemerintah",
"jenjang": "S2",
"negara": "Swiss",
"tanggal_buka": "2026-11-01",
"tenggat_waktu": "2026-11-30",
"url": "https://www.schoters.com/id/beasiswa/eth-zurich-excellence-scholarship-opportunity-programme-esop-5",
"thumbnail": "https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=400&q=80&auto=format&fit=crop",
=======
>>>>>>> b5bc7bad0c7de6e63a60018da0fe06e923bf094c
"deskripsi_singkat": "Beasiswa bergengsi dari ETH Zurich (salah satu universitas teknik terbaik dunia) untuk mahasiswa S2 internasional yang unggul secara akademik.",
"deskripsi_singkat_en": "Prestigious scholarship from ETH Zurich (one of the world's best engineering universities) for academically outstanding international master's students.",
"syarat_umum": [
@@ -132,18 +159,23 @@
"Obtain a recommendation letter from authorized academics"
],
"kontak": "ETH Zurich Scholarship Office — ethz.ch",
"tanggal_buka": "2026-11-01",
"tanggal_tutup": "2026-11-30",
"url_sumber": "https://www.schoters.com/id/beasiswa/eth-zurich-excellence-scholarship-opportunity-programme-esop-5",
"tags": ["S2", "Pemerintah", "Swiss", "Fully Funded", "Prestasi"]
},
{
"id": "bsw-006",
"id": 106,
"nama": "STUST - Scholarship for International Students (S3, Fully Funded)",
"kategori": "Swasta",
"kategori_en": "Private",
"nama_en": "STUST - Scholarship for International Students (S3, Fully Funded)",
"status": "Buka",
<<<<<<< HEAD
"tipe_pendanaan": "Swasta",
"jenjang": "S3",
"negara": "Taiwan",
"tanggal_buka": "2026-09-15",
"tenggat_waktu": "2026-11-30",
"url": "https://www.schoters.com/id/beasiswa/southern-taiwan-university-of-science-and-technology-the-stust-scholarship-for-international-students-6",
"thumbnail": "https://images.unsplash.com/photo-1580582932707-520aed937b7b?w=400&q=80&auto=format&fit=crop",
=======
>>>>>>> b5bc7bad0c7de6e63a60018da0fe06e923bf094c
"deskripsi_singkat": "Beasiswa penuh (fully funded) dari Southern Taiwan University of Science and Technology untuk mahasiswa internasional jenjang S3 (Doktoral).",
"deskripsi_singkat_en": "Fully funded scholarship from Southern Taiwan University of Science and Technology for international doctoral students.",
"syarat_umum": [
@@ -161,18 +193,23 @@
"Obtain approval from a prospective supervisor at STUST"
],
"kontak": "STUST International Affairs Office — stust.edu.tw",
"tanggal_buka": "2026-09-15",
"tanggal_tutup": "2026-11-30",
"url_sumber": "https://www.schoters.com/id/beasiswa/southern-taiwan-university-of-science-and-technology-the-stust-scholarship-for-international-students-6",
"tags": ["S3", "Swasta", "Taiwan", "Fully Funded"]
},
{
"id": "bsw-007",
"id": 107,
"nama": "STUST - Scholarship for International Students (S2, Partially Funded)",
"kategori": "Swasta",
"kategori_en": "Private",
"nama_en": "STUST - Scholarship for International Students (S2, Partially Funded)",
"status": "Buka",
<<<<<<< HEAD
"tipe_pendanaan": "Swasta",
"jenjang": "S2",
"negara": "Taiwan",
"tanggal_buka": "2026-09-15",
"tenggat_waktu": "2026-11-30",
"url": "https://www.schoters.com/id/beasiswa/southern-taiwan-university-of-science-and-technology-the-stust-scholarship-for-international-students-7",
"thumbnail": "https://images.unsplash.com/photo-1606761568499-6d2451b23c66?w=400&q=80&auto=format&fit=crop",
=======
>>>>>>> b5bc7bad0c7de6e63a60018da0fe06e923bf094c
"deskripsi_singkat": "Beasiswa parsial (partially funded) dari Southern Taiwan University of Science and Technology untuk mahasiswa internasional jenjang S2 (Magister).",
"deskripsi_singkat_en": "Partially funded scholarship from Southern Taiwan University of Science and Technology for international master's students.",
"syarat_umum": [
@@ -190,18 +227,23 @@
"Include academic transcripts and a motivation letter"
],
"kontak": "STUST International Affairs Office — stust.edu.tw",
"tanggal_buka": "2026-09-15",
"tanggal_tutup": "2026-11-30",
"url_sumber": "https://www.schoters.com/id/beasiswa/southern-taiwan-university-of-science-and-technology-the-stust-scholarship-for-international-students-7",
"tags": ["S2", "Swasta", "Taiwan", "Partially Funded"]
},
{
"id": "bsw-008",
"id": 108,
"nama": "University of Melbourne - Melbourne International Undergraduate Scholarship",
"kategori": "Swasta",
"kategori_en": "Private",
"nama_en": "University of Melbourne - Melbourne International Undergraduate Scholarship",
"status": "Buka",
<<<<<<< HEAD
"tipe_pendanaan": "Swasta",
"jenjang": "S1",
"negara": "Australia",
"tanggal_buka": "2026-05-21",
"tenggat_waktu": "2026-10-31",
"url": "https://www.schoters.com/id/beasiswa/university-of-melbourne-melbourne-international-undergraduate-scholarship-8",
"thumbnail": "https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=400&q=80&auto=format&fit=crop",
=======
>>>>>>> b5bc7bad0c7de6e63a60018da0fe06e923bf094c
"deskripsi_singkat": "Beasiswa untuk mahasiswa internasional berprestasi yang mendaftar program S1 di University of Melbourne, salah satu universitas terbaik di Australia.",
"deskripsi_singkat_en": "Scholarship for outstanding international students applying for an undergraduate program at the University of Melbourne, one of Australia's best universities.",
"syarat_umum": [
@@ -219,18 +261,23 @@
"The scholarship is awarded automatically based on academic merit, no separate application required"
],
"kontak": "University of Melbourne Future Students — unimelb.edu.au",
"tanggal_buka": "2026-05-21",
"tanggal_tutup": "2026-10-31",
"url_sumber": "https://www.schoters.com/id/beasiswa/university-of-melbourne-melbourne-international-undergraduate-scholarship-8",
"tags": ["S1", "Swasta", "Australia", "Partially Funded", "Prestasi"]
},
{
"id": "bsw-009",
"id": 109,
"nama": "Charles Darwin University - CDU Global Merit Scholarship",
"kategori": "Swasta",
"kategori_en": "Private",
"nama_en": "Charles Darwin University - CDU Global Merit Scholarship",
"status": "Buka",
<<<<<<< HEAD
"tipe_pendanaan": "Swasta",
"jenjang": "S1",
"negara": "Australia",
"tanggal_buka": "2026-05-21",
"tenggat_waktu": "2026-10-09",
"url": "https://www.schoters.com/id/beasiswa/charles-darwin-university-cdu-global-merit-scholarship-9",
"thumbnail": "https://images.unsplash.com/photo-1434030216411-0b793f4b4173?w=400&q=80&auto=format&fit=crop",
=======
>>>>>>> b5bc7bad0c7de6e63a60018da0fe06e923bf094c
"deskripsi_singkat": "Beasiswa merit global dari Charles Darwin University (CDU) di Darwin, Australia, untuk mahasiswa internasional S1 yang memiliki rekam jejak akademik yang kuat.",
"deskripsi_singkat_en": "Global merit scholarship from Charles Darwin University (CDU) in Darwin, Australia, for international undergraduate students with a strong academic track record.",
"syarat_umum": [
@@ -248,18 +295,23 @@
"Not currently receiving any other tuition fee discount from CDU"
],
"kontak": "CDU International — cdu.edu.au",
"tanggal_buka": "2026-05-21",
"tanggal_tutup": "2026-10-09",
"url_sumber": "https://www.schoters.com/id/beasiswa/charles-darwin-university-cdu-global-merit-scholarship-9",
"tags": ["S1", "Swasta", "Australia", "Partially Funded"]
},
{
"id": "bsw-010",
"id": 110,
"nama": "Deakin University - Vice-Chancellor's International Scholarship",
"kategori": "Swasta",
"kategori_en": "Private",
"nama_en": "Deakin University - Vice-Chancellor's International Scholarship",
"status": "Buka",
<<<<<<< HEAD
"tipe_pendanaan": "Swasta",
"jenjang": "S1 & S2",
"negara": "Australia",
"tanggal_buka": "2026-05-21",
"tenggat_waktu": "2026-09-25",
"url": "https://www.schoters.com/id/beasiswa/deakin-university-vice-chancellor-s-international-scholarship-10",
"thumbnail": "https://images.unsplash.com/photo-1541339907198-e08756dedf3f?w=400&q=80&auto=format&fit=crop",
=======
>>>>>>> b5bc7bad0c7de6e63a60018da0fe06e923bf094c
"deskripsi_singkat": "Beasiswa bergengsi dari Wakil Rektor (Vice-Chancellor) Deakin University untuk mahasiswa internasional terbaik yang akan menempuh studi S1 atau S2 di Australia.",
"deskripsi_singkat_en": "Prestigious Vice-Chancellor's scholarship from Deakin University for the best international students pursuing an undergraduate or postgraduate degree in Australia.",
"syarat_umum": [
@@ -277,9 +329,126 @@
"Submit the scholarship application before the specified closing date"
],
"kontak": "Deakin University International — deakin.edu.au",
<<<<<<< HEAD
"tags": ["S1 & S2", "Swasta", "Australia", "Partially Funded", "Prestasi"]
}
]
=======
"tanggal_buka": "2026-05-21",
"tanggal_tutup": "2026-09-25",
"url_sumber": "https://www.schoters.com/id/beasiswa/deakin-university-vice-chancellor-s-international-scholarship-10",
"tags": ["S1 & S2", "S2", "Swasta", "Australia", "Partially Funded", "Prestasi"]
},
{
"id": "bsw-011",
"nama": "Djarum Beasiswa Plus 2026/2027",
"nama_en": "Djarum Plus Scholarship 2026/2027",
"kategori": "Swasta",
"status": "Buka",
"deskripsi_singkat": "Program beasiswa prestasi dari Djarum Foundation untuk mahasiswa S1.",
"deskripsi_singkat_en": "Merit-based scholarship program from Djarum Foundation for undergraduate students.",
"syarat_umum": [
"Mahasiswa S1/D4 semester 4 dari semua disiplin ilmu.",
"IPK minimum 3.00 pada semester 3."
],
"syarat_umum_en": [
"4th-semester undergraduate (S1/D4) students from all disciplines.",
"Minimum GPA of 3.00 in the 3rd semester."
],
"kontak": "https://register.djarumbeasiswaplus.org/",
"tanggal_buka": "2026-04-08",
"tanggal_tutup": "2026-06-10",
"url_sumber": "https://register.djarumbeasiswaplus.org/",
"tags": ["S1", "D4", "Swasta", "Indonesia"]
},
{
"id": "bsw-012",
"nama": "Beasiswa Sobat Bumi Kalimantan 2026",
"nama_en": "Sobat Bumi Kalimantan Scholarship 2026",
"kategori": "Swasta",
"status": "Buka",
"deskripsi_singkat": "Beasiswa dari Pertamina Foundation khusus mahasiswa S1 di wilayah Kalimantan.",
"deskripsi_singkat_en": "Scholarship from Pertamina Foundation specifically for undergraduate students in the Kalimantan region.",
"syarat_umum": [
"Mahasiswa S1 aktif yang berdomisili atau kuliah di Kalimantan.",
"Memiliki kepedulian terhadap lingkungan hidup."
],
"syarat_umum_en": [
"Active undergraduate students domiciled or studying in Kalimantan.",
"Demonstrate care and commitment to the environment."
],
"kontak": "https://pertaminafoundation.org/",
"tanggal_buka": "2026-05-02",
"tanggal_tutup": "2026-07-01",
"url_sumber": "https://pertaminafoundation.org/",
"tags": ["S1", "Swasta", "Indonesia"]
},
{
"id": "bsw-013",
"nama": "Beasiswa Sehat Kemenkes 2026",
"nama_en": "Ministry of Health (Sehat) Scholarship 2026",
"kategori": "Pemerintah",
"status": "Segera Dibuka",
"deskripsi_singkat": "Program bantuan biaya pendidikan dari Kementerian Kesehatan untuk jenjang D3, D4, dan Profesi.",
"deskripsi_singkat_en": "Educational assistance program from the Ministry of Health for D3, D4, and Professional degrees.",
"syarat_umum": [
"Mahasiswa aktif jenjang D3, D4, atau Profesi di bidang kesehatan.",
"Memenuhi kualifikasi dan standar nilai dari Kementerian Kesehatan."
],
"syarat_umum_en": [
"Active D3, D4, or Professional degree students in the health sector.",
"Meet the qualifications and academic standards of the Ministry of Health."
],
"kontak": "https://sibk.kemkes.go.id/",
"tanggal_buka": "2026-06-08",
"tanggal_tutup": "2026-06-30",
"url_sumber": "https://sibk.kemkes.go.id/",
"tags": ["D3", "D4", "Profesi", "Pemerintah", "Indonesia"]
},
{
"id": "bsw-014",
"nama": "Beasiswa SDM Sawit 2026",
"nama_en": "Palm Oil Human Resources Scholarship 2026",
"kategori": "Pemerintah",
"status": "Buka",
"deskripsi_singkat": "Beasiswa pendanaan BPDPKS untuk pengembangan SDM Perkebunan Kelapa Sawit (D1-D4, S1).",
"deskripsi_singkat_en": "BPDPKS funding scholarship for the development of Palm Oil Plantation Human Resources (D1-D4, S1).",
"syarat_umum": [
"Terbuka untuk lulusan SMA/SMK/sederajat yang melanjutkan ke jenjang D1-D4 atau S1.",
"Bersedia ditempatkan atau mengabdi di sektor perkebunan kelapa sawit."
],
"syarat_umum_en": [
"Open to high school/vocational school graduates continuing to D1-D4 or S1 levels.",
"Willing to be placed or serve in the palm oil plantation sector."
],
"kontak": "https://sdmperkebunan.bpdp.or.id/",
"tanggal_buka": "2026-06-03",
"tanggal_tutup": "2026-06-20",
"url_sumber": "https://sdmperkebunan.bpdp.or.id/",
"tags": ["S1", "D1", "D3", "D4", "Pemerintah", "Indonesia"]
},
{
"id": "bsw-015",
"nama": "Beasiswa PPBP/PPTI BCA 2027",
"nama_en": "BCA PPBP/PPTI Scholarship 2027",
"kategori": "Swasta",
"status": "Buka",
"deskripsi_singkat": "Program Pendidikan Bisnis dan Perbankan (PPBP) serta Teknik Informatika (PPTI) dari BCA.",
"deskripsi_singkat_en": "Business and Banking Education Program (PPBP) and Informatics Engineering (PPTI) from BCA.",
"syarat_umum": [
"Lulusan SMA/SMK/sederajat yang berprestasi.",
"Lulus seleksi administrasi dan serangkaian tes dari BCA."
],
"syarat_umum_en": [
"High-achieving high school/vocational school graduates.",
"Pass the administrative selection and a series of tests from BCA."
],
"kontak": "https://bcafinance.co.id/Pendaftaran-Beasiswa-BCA-Finance-Peduli-2026-Dibuka",
"tanggal_buka": "2026-05-01",
"tanggal_tutup": "2026-10-20",
"url_sumber": "https://bcafinance.co.id/Pendaftaran-Beasiswa-BCA-Finance-Peduli-2026-Dibuka",
"tags": ["S1", "Swasta", "Indonesia"]
}
]
]
>>>>>>> b5bc7bad0c7de6e63a60018da0fe06e923bf094c