student-web-if-development-kit/groups/C4A

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 (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)

{
    "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)

{
    "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)

{
    "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."
    }
}