0ebc25809b
- Jelaskan cara kerja toggle bahasa (auto-detect, localStorage) - Tambah langkah-langkah agar konten kelompok ikut bilingual (data-i18n + localization.js) - Sertakan contoh key dengan prefix unik per kelompok Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
117 lines
4.2 KiB
Markdown
117 lines
4.2 KiB
Markdown
# Student Web IF — Development Kit
|
|
|
|
Paket tugas halaman statis untuk mahasiswa Informatika UNTAN.
|
|
Navbar dan footer identik dengan web resmi prodi (`informatika.untan.ac.id`).
|
|
|
|
## Jalankan project
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
Buka URL dari Vite (default: `http://localhost:5173`) lalu akses launcher di `/`.
|
|
|
|
## Script NPM
|
|
|
|
| Perintah | Fungsi |
|
|
|---|---|
|
|
| `npm run dev` | Jalankan local dev server |
|
|
| `npm run build` | Build static output ke folder `dist` |
|
|
| `npm run preview` | Preview hasil build |
|
|
|
|
## Struktur Folder
|
|
|
|
```
|
|
student-web-if-development-kit/
|
|
├── index.html ← Launcher (daftar link semua grup)
|
|
├── assets/
|
|
│ └── global/
|
|
│ ├── output.css ← Tailwind CSS (compiled dari web prod)
|
|
│ ├── localization.js ← Toggle bahasa ID/EN
|
|
│ ├── hero.webp
|
|
│ ├── footer.png
|
|
│ └── logo.png
|
|
└── groups/
|
|
├── Jellyfish.Corp/ ← Group 01
|
|
├── HabisIniSeminar/ ← Group 02
|
|
├── HarusSelesaiKP/ ← Group 03
|
|
├── C4A/ ← Group 04
|
|
├── M4N1FEST/ ← Group 05
|
|
├── ACAAB/ ← Group 06 — Sorotan dan Prestasi Karya Mahasiswa
|
|
├── LimaEm/ ← Group 07 — Kehidupan Mahasiswa & Himpunan (HMIF)
|
|
├── RODA/ ← Group 08 — Riset & Kelompok Bidang Keahlian (KBK)
|
|
├── Tapops/ ← Group 09 — Berkas Penting
|
|
└── ApeNameTeamE/ ← Group 10 — Beasiswa
|
|
```
|
|
|
|
Setiap folder grup berisi:
|
|
- `index.html` → halaman tugas (navbar + footer sudah tersedia)
|
|
- `style.css` → CSS tambahan milik kelompok (opsional)
|
|
|
|
## Aturan Pengerjaan
|
|
|
|
1. **Tiap kelompok hanya mengedit foldernya sendiri.**
|
|
2. Area konten yang boleh diubah hanya bagian ini di dalam `index.html`:
|
|
|
|
```html
|
|
<!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
|
|
...konten kalian di sini...
|
|
<!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
|
|
```
|
|
|
|
3. Jangan ubah navbar, footer, dan path asset global (`../../assets/global/...`).
|
|
4. Boleh menambah `<style>` atau mengedit `style.css` untuk styling konten.
|
|
5. `node_modules` tidak perlu di-commit — jalankan `npm install` untuk generate ulang.
|
|
|
|
## Catatan Teknis
|
|
|
|
- Navbar dan footer menggunakan **Tailwind CSS** dari `assets/global/output.css` (tidak perlu install Tailwind per grup).
|
|
- Mega menu dan mobile menu sudah aktif via inline script di tiap halaman.
|
|
|
|
## Fitur Bilingual (ID / EN)
|
|
|
|
Setiap halaman grup mendukung toggle bahasa **Indonesia ↔ English** di pojok kanan atas navbar.
|
|
|
|
### Cara kerja
|
|
- Bahasa default mengikuti pengaturan browser (`navigator.language`).
|
|
- Pilihan bahasa disimpan di `localStorage`, sehingga tetap aktif saat pindah halaman atau refresh.
|
|
- Klik **ID** untuk Bahasa Indonesia, klik **EN** untuk English.
|
|
- Elemen navbar dan footer akan otomatis berganti teks.
|
|
|
|
### Cara menambahkan terjemahan pada konten kelompok
|
|
|
|
Jika kelompok ingin konten di `#assignment-body` ikut berganti bahasa, gunakan atribut `data-i18n` dan daftarkan terjemahannya di `localization.js`.
|
|
|
|
**Langkah 1** — Tambahkan atribut `data-i18n` pada elemen HTML di `index.html`:
|
|
|
|
```html
|
|
<h2 data-i18n="grp_acaab_title">Sorotan Prestasi Mahasiswa</h2>
|
|
<p data-i18n="grp_acaab_desc">Halaman ini menampilkan prestasi mahasiswa Informatika UNTAN.</p>
|
|
```
|
|
|
|
**Langkah 2** — Daftarkan key tersebut di `assets/global/localization.js` pada bagian `id` dan `en`:
|
|
|
|
```js
|
|
const translations = {
|
|
id: {
|
|
// ...key lainnya...
|
|
grp_acaab_title: "Sorotan Prestasi Mahasiswa",
|
|
grp_acaab_desc: "Halaman ini menampilkan prestasi mahasiswa Informatika UNTAN.",
|
|
},
|
|
en: {
|
|
// ...key lainnya...
|
|
grp_acaab_title: "Student Achievement Highlights",
|
|
grp_acaab_desc: "This page showcases the achievements of Informatika UNTAN students.",
|
|
}
|
|
};
|
|
```
|
|
|
|
> **Catatan:** Gunakan prefix unik per kelompok pada nama key (contoh: `grp_acaab_`, `grp_roda_`) agar tidak bentrok dengan key kelompok lain.
|
|
|
|
## Output Pengumpulan
|
|
|
|
Setiap kelompok submit perubahan pada:
|
|
- `groups/<nama-folder>/index.html`
|
|
- `groups/<nama-folder>/style.css` (jika ada)
|