forked from izu/student-web-if-development-kit
Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 cygouw
|
0c9ece813a | ||
|
cygouw
|
d765783877 | ||
|
cygouw
|
f1cd7a8f5f | ||
|
cygouw
|
ce3c2e6ae8 | ||
|
cygouw
|
6430aee79e | ||
|
cygouw
|
2fc6b7b6bc | ||
|
cygouw
|
d6db9cc464 | ||
|
cygouw
|
ab4493e589 | ||
|
cygouw
|
154550d3b4 | ||
 AufaHafizah
|
3975798ba2 | ||
|
AufaHafizah
|
b943518500 | ||
|
cygouw
|
3ead384ec9 |
+646
-132
File diff suppressed because it is too large
Load Diff
@@ -1,125 +0,0 @@
|
||||
# Panduan Pengelolaan Data Kelompok C4A
|
||||
|
||||
Dokumentasi ini dibuat untuk memudahkan pengembang atau pengguna berikutnya dalam mengelola data Staf Pendukung, SOP, dan FAQ pada halaman C4A.
|
||||
|
||||
---
|
||||
|
||||
## 📋 Aturan Umum Pengelolaan Data
|
||||
|
||||
1. **Lokasi Berkas Data**:
|
||||
Seluruh data disimpan dalam format JSON di direktori `groups/C4A/data/`:
|
||||
- Data Staf: `groups/C4A/data/data-staff.json`
|
||||
- Data SOP: `groups/C4A/data/data-sop.json`
|
||||
- Data FAQ: `groups/C4A/data/data-faq.json`
|
||||
|
||||
2. **Dukungan Bilingual (ID/EN)**:
|
||||
Semua teks konten yang ditampilkan ke pengguna mendukung dua bahasa. Anda perlu menggunakan objek dengan properti `id` (Bahasa Indonesia) dan `en` (Bahasa Inggris) pada setiap field teks. Jika properti `en` tidak diisi atau data masih berupa *string* biasa, sistem akan otomatis menggunakan Bahasa Indonesia sebagai *fallback*.
|
||||
|
||||
3. **Ikon FontAwesome (v4)**:
|
||||
Jika ingin mengubah atau menambahkan logo/ikon pada data SOP, harap gunakan daftar ikon dari **FontAwesome v4** melalui tautan berikut:
|
||||
👉 **[FontAwesome v4 Icons](https://fontawesome.com/v4/icons/)** (Contoh penggunaan: `fa-dot-circle-o`, `fa-graduation-cap`, `fa-flask`).
|
||||
|
||||
4. **Field Opsional**:
|
||||
Pada data SOP, properti **`staff_responsible`** (Staf Bertanggung Jawab) dan **`additional_info`** (Informasi Tambahan) bersifat **opsional**. Jika informasi tersebut tidak tersedia, kosongkan nilainya atau hapus propertinya dari JSON agar UI secara otomatis menyembunyikan bloknya.
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ Template Penambahan Data
|
||||
|
||||
Silakan salin-tempel (copy-paste) format di bawah ini ke dalam array JSON yang sesuai di folder `data/` untuk menambahkan data baru.
|
||||
|
||||
### 1. Template Data Staf (`data-staff.json`)
|
||||
```json
|
||||
{
|
||||
"id": 3,
|
||||
"name": "Nama Staf Beserta Gelar",
|
||||
"role": {
|
||||
"id": "Peran / Jabatan Staf",
|
||||
"en": "Staff Role / Title"
|
||||
},
|
||||
"image": "assets/images/nama-file-foto.png",
|
||||
"location": {
|
||||
"id": "Lokasi Ruang Kerja / Kantor Staf",
|
||||
"en": "Staff Workspace / Office Location"
|
||||
},
|
||||
"contact_consent": true,
|
||||
"phone": "628xxxxxxxxxx",
|
||||
"schedule": [
|
||||
{
|
||||
"day": {
|
||||
"id": "Hari Kerja (contoh: Senin – Jumat)",
|
||||
"en": "Work Days (e.g., Monday – Friday)"
|
||||
},
|
||||
"time": "07.30–16.00 WIB",
|
||||
"break": {
|
||||
"id": "Jam Istirahat (contoh: istirahat 12.00–13.00 WIB)",
|
||||
"en": "Break Time (e.g., break 12.00–13.00 WIB)"
|
||||
}
|
||||
}
|
||||
],
|
||||
"tasks": [
|
||||
{
|
||||
"id": "Tugas dan tanggung jawab utama 1",
|
||||
"en": "Main task and responsibility 1"
|
||||
},
|
||||
{
|
||||
"id": "Tugas dan tanggung jawab utama 2",
|
||||
"en": "Main task and responsibility 2"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
*Catatan: Letakkan file gambar/foto staf ke dalam direktori `groups/C4A/assets/images/` dan masukkan nama berkas fotonya pada properti `image` di atas. Untuk nomor telepon (`phone`), Anda dapat menggunakan format `08xxxxxxxxxx` atau `628xxxxxxxxxx` karena skrip JavaScript akan melakukan normalisasi secara otomatis.*
|
||||
|
||||
### 2. Template Data SOP (`data-sop.json`)
|
||||
```json
|
||||
{
|
||||
"tab_id": "id-unik-sop-tanpa-spasi",
|
||||
"tab_number": 9,
|
||||
"category": "akademik",
|
||||
"icon": "fa-file-text",
|
||||
"title": {
|
||||
"id": "Judul Lengkap SOP",
|
||||
"en": "Full SOP Title"
|
||||
},
|
||||
"description": {
|
||||
"id": "Deskripsi singkat mengenai SOP ini.",
|
||||
"en": "Brief description of this SOP."
|
||||
},
|
||||
"purpose": {
|
||||
"id": "Tujuan dibuatnya standar operasional prosedur ini.",
|
||||
"en": "The purpose of creating this standard operating procedure."
|
||||
},
|
||||
"requirements": [
|
||||
{ "id": "Persyaratan administratif/akademik 1", "en": "Administrative/academic requirement 1" },
|
||||
{ "id": "Persyaratan administratif/akademik 2", "en": "Administrative/academic requirement 2" }
|
||||
],
|
||||
"procedures": [
|
||||
{ "id": "Langkah alur prosedur ke-1", "en": "Procedure flow step 1" },
|
||||
{ "id": "Langkah alur prosedur ke-2", "en": "Procedure flow step 2" }
|
||||
],
|
||||
"staff_responsible": [
|
||||
"👤 Staf Administrasi Informatika / Informatics Administrative Staff"
|
||||
],
|
||||
"additional_info": {
|
||||
"id": "Informasi tambahan penting.",
|
||||
"en": "Important additional information."
|
||||
}
|
||||
}
|
||||
```
|
||||
*Catatan: Properti `category` bernilai antara `"akademik"` atau `"praktikum"`. Properti `staff_responsible` dan `additional_info` bersifat opsional.*
|
||||
|
||||
### 3. Template Data FAQ (`data-faq.json`)
|
||||
```json
|
||||
{
|
||||
"id": 11,
|
||||
"question": {
|
||||
"id": "Pertanyaan yang sering diajukan?",
|
||||
"en": "Frequently asked question?"
|
||||
},
|
||||
"answer": {
|
||||
"id": "Jawaban dari pertanyaan tersebut. Boleh menggunakan tag HTML seperti <strong>tebal</strong>.",
|
||||
"en": "Answer to the question. HTML tags like <strong>bold</strong> can be used."
|
||||
}
|
||||
}
|
||||
```
|
||||
+23
-24
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="id" class="scroll-smooth">
|
||||
|
||||
<head>
|
||||
@@ -1150,7 +1150,8 @@
|
||||
<span
|
||||
class="bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 inline-block mb-3">Tugas
|
||||
Halaman Statis</span>
|
||||
<h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">Judul Halaman Group 04</h1>
|
||||
<h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">Staf Pendukung dan Standar Operasional
|
||||
Prosedur (SOP)</h1>
|
||||
<p class="text-slate-500 text-sm">Kelompok 04 — C4A · Informatika UNTAN 2026
|
||||
</p>
|
||||
</div>
|
||||
@@ -1159,13 +1160,13 @@
|
||||
<!-- HERO SECTION -->
|
||||
<section class="c4a-hero reveal">
|
||||
<div class="c4a-hero-inner">
|
||||
<div class="c4a-hero-tag" data-i18n="grp_c4a_hero_tag">LAYANAN AKADEMIK • INFORMATIKA UNTAN
|
||||
<div class="c4a-hero-tag">LAYANAN AKADEMIK • INFORMATIKA UNTAN
|
||||
</div>
|
||||
<h1 class="c4a-hero-title" data-i18n-html="grp_c4a_hero_title">
|
||||
Staf Pendukung & <br/>
|
||||
<h1 class="c4a-hero-title">
|
||||
Staf Pendukung & <br />
|
||||
<span class="highlight-orange">Standar Operasional Prosedur (SOP)</span>
|
||||
</h1>
|
||||
<p class="c4a-hero-desc" data-i18n="grp_c4a_hero_desc">Halaman ini menampilkan informasi petugas
|
||||
<p class="c4a-hero-desc">Halaman ini menampilkan informasi petugas
|
||||
layanan akademik serta
|
||||
prosedur administrasi
|
||||
mahasiswa
|
||||
@@ -1173,12 +1174,12 @@
|
||||
<div class="hero-stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number" id="stat-staf">0</div>
|
||||
<div class="stat-label" data-i18n="grp_c4a_stat_staf">Staf Aktif</div>
|
||||
<div class="stat-label">Staf Aktif</div>
|
||||
</div>
|
||||
<div class="stat-divider"></div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number" id="stat-sop">0</div>
|
||||
<div class="stat-label" data-i18n="grp_c4a_stat_sop">Jenis SOP</div>
|
||||
<div class="stat-label">Jenis SOP</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1187,10 +1188,10 @@
|
||||
<!-- STAFF SECTION -->
|
||||
<section class="content-section">
|
||||
<div class="section-header">
|
||||
<div class="section-tag"><span class="dot"></span> <span data-i18n="grp_c4a_staff_tag">Tim
|
||||
<div class="section-tag"><span class="dot"></span> <span>Tim
|
||||
Kami</span></div>
|
||||
<h2 class="section-title" data-i18n="grp_c4a_staff_title">Staf Pendukung</h2>
|
||||
<p class="section-subtitle" data-i18n="grp_c4a_staff_subtitle">Staf yang siap melayani kebutuhan
|
||||
<h2 class="section-title">Staf Pendukung</h2>
|
||||
<p class="section-subtitle">Staf yang siap melayani kebutuhan
|
||||
akademik dan operasional
|
||||
laboratorium di Prodi Informatika UNTAN.</p>
|
||||
</div>
|
||||
@@ -1202,10 +1203,10 @@
|
||||
<!-- SOP SECTION -->
|
||||
<section class="sop-section">
|
||||
<div class="section-header">
|
||||
<div class="section-tag"><span class="dot"></span> <span data-i18n="grp_c4a_sop_tag">Prosedur
|
||||
<div class="section-tag"><span class="dot"></span> <span>Prosedur
|
||||
Resmi</span></div>
|
||||
<h2 class="section-title" data-i18n="grp_c4a_sop_title">Standar Operasional Prosedur (SOP)</h2>
|
||||
<p class="section-subtitle" data-i18n="grp_c4a_sop_subtitle">Standar Operasional Prosedur untuk
|
||||
<h2 class="section-title">Standar Operasional Prosedur (SOP)</h2>
|
||||
<p class="section-subtitle">Standar Operasional Prosedur untuk
|
||||
berbagai kebutuhan administrasi
|
||||
akademik mahasiswa. Gunakan pencarian atau filter untuk menemukan SOP yang Anda butuhkan.
|
||||
</p>
|
||||
@@ -1216,7 +1217,6 @@
|
||||
<div class="sop-search-wrap">
|
||||
<i class="fas fa-search sop-search-icon"></i>
|
||||
<input type="search" id="sop-search-input" class="sop-search-input"
|
||||
data-i18n-placeholder="grp_c4a_sop_search_placeholder"
|
||||
placeholder="Cari SOP berdasarkan judul..." autocomplete="off" aria-label="Cari SOP" />
|
||||
<button class="sop-search-clear" id="sop-search-clear" aria-label="Hapus pencarian"
|
||||
style="display:none;">
|
||||
@@ -1225,12 +1225,12 @@
|
||||
</div>
|
||||
<div class="sop-filter-chips" id="sop-filter-chips" role="group"
|
||||
aria-label="Filter kategori SOP">
|
||||
<button class="sop-chip active" data-filter="semua" id="chip-semua" data-i18n="grp_c4a_sop_chip_semua">Semua</button>
|
||||
<button class="sop-chip active" data-filter="semua" id="chip-semua">Semua</button>
|
||||
<button class="sop-chip" data-filter="akademik" id="chip-akademik">
|
||||
<i class="fas fa-graduation-cap"></i> <span data-i18n="grp_c4a_sop_chip_akademik">Akademik</span>
|
||||
<i class="fas fa-graduation-cap"></i> <span>Akademik</span>
|
||||
</button>
|
||||
<button class="sop-chip" data-filter="praktikum" id="chip-praktikum">
|
||||
<i class="fas fa-flask"></i> <span data-i18n="grp_c4a_sop_chip_praktikum">Praktikum</span>
|
||||
<i class="fas fa-flask"></i> <span>Praktikum</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1244,8 +1244,8 @@
|
||||
<!-- EMPTY STATE -->
|
||||
<div class="sop-empty-state" id="sop-empty-state" style="display:none;">
|
||||
<i class="fas fa-search-minus sop-empty-icon"></i>
|
||||
<p class="sop-empty-title" data-i18n="grp_c4a_sop_empty_title">SOP tidak ditemukan</p>
|
||||
<p class="sop-empty-desc" data-i18n="grp_c4a_sop_empty_desc">Coba kata kunci lain atau reset
|
||||
<p class="sop-empty-title">SOP tidak ditemukan</p>
|
||||
<p class="sop-empty-desc">Coba kata kunci lain atau reset
|
||||
filter pencarian.</p>
|
||||
<button class="sop-empty-reset" id="sop-empty-reset">
|
||||
<i class="fas fa-undo"></i> <span data-i18n="grp_c4a_sop_reset_btn">Reset Pencarian</span>
|
||||
@@ -1268,13 +1268,12 @@
|
||||
<section class="faq-section-wrap">
|
||||
<div class="faq-section-inner">
|
||||
<div class="faq-header reveal">
|
||||
<div class="section-tag"><span class="dot"></span> <span data-i18n="grp_c4a_faq_tag">Pertanyaan Umum</span></div>
|
||||
<h2 data-i18n="grp_c4a_faq_title">Pertanyaan yang Sering Diajukan</h2>
|
||||
<p data-i18n="grp_c4a_faq_subtitle">Temukan jawaban cepat atas pertanyaan umum mahasiswa
|
||||
<div class="section-tag"><span class="dot"></span> <span>Pertanyaan Umum</span></div>
|
||||
<h2>Pertanyaan yang Sering Diajukan</h2>
|
||||
<p>Temukan jawaban cepat atas pertanyaan umum mahasiswa
|
||||
seputar layanan akademik prodi.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="faq-wrap" id="faq-container">
|
||||
<!-- Item FAQ diisi secara dinamis melalui main.js berdasarkan data-faq.json -->
|
||||
</div>
|
||||
|
||||
@@ -48,7 +48,7 @@ async function initApp() {
|
||||
initAnimations();
|
||||
}, 100);
|
||||
} catch (error) {
|
||||
console.error('Terjadi kesalahan saat menginisialisasi aplikasi C4A:', error);
|
||||
console.error('Terjadi kesalahan saat menginisialisasi halaman:', error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+2
-2
@@ -100,8 +100,8 @@ export function renderStaffCards(staffs) {
|
||||
|
||||
const scheduleHTML = schedule.map(sched =>
|
||||
`<div class="schedule-item">` +
|
||||
`<span class="s-day">${sched.day}</span>` +
|
||||
`<span class="s-time">${sched.time} <span class="s-break">| ${sched.break}</span></span>` +
|
||||
`<span class="s-day">${sched.day}</span>` +
|
||||
`<span class="s-time">${sched.time} <span class="s-break">| ${sched.break}</span></span>` +
|
||||
`</div>`
|
||||
).join('');
|
||||
|
||||
|
||||
Reference in New Issue
Block a user