forked from izu/student-web-if-development-kit
merge upstream
This commit is contained in:
@@ -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
|
||||
@@ -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 `<<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.
|
||||
@@ -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)
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user