My App

Konten & Bahan Ajar (Admin)

Panduan untuk admin dalam mengelola bahan ajar seperti ebook, video, PPT, artikel, dan tugas di dashboard Nasmedia.

Konten & Bahan Ajar (Admin)

Halaman Konten di panel admin digunakan untuk mengelola bahan ajar yang disediakan kepada penulis/pengguna, seperti:

  • Ebook.
  • Video (YouTube).
  • PPT / presentasi.
  • Artikel.
  • Tugas.

Dari halaman ini admin dapat:

  • Melihat daftar semua bahan ajar yang sudah diunggah.
  • Mencari dan memfilter bahan ajar berdasarkan tipe.
  • Mengunggah bahan ajar baru (file atau link YouTube/URL lain yang didukung).
  • Mengedit bahan ajar yang sudah ada.
  • Menghapus bahan ajar yang sudah tidak relevan.
  • Mengunduh atau membuka bahan ajar (untuk cek cepat dari sisi admin).
  • Menyinkronkan artikel dari WordPress (jika fitur ini aktif).

Menu ini dapat diakses melalui Konten di sidebar admin dan mengarah ke /dashboard/content.


1. Tampilan Utama Halaman Konten

Di bagian atas halaman, admin melihat:

  • Judul: biasanya berupa teks seperti "Manajemen Bahan Ajar" atau serupa.
  • Ringkasan jumlah materi: misalnya Menampilkan X dari Y materi atau Total: Y materi di header tabel.
  • Tombol untuk unggah bahan ajar baru.
  • Tombol untuk sinkronisasi artikel WordPress (jika diaktifkan di hook useWordPressSync).

Aksi utama yang terlihat di header adalah:

  • "Unggah Bahan Ajar Baru" – membuka dialog upload.
  • Kadang ada aksi tambahan seperti "Sinkronisasi Artikel" dari WordPress (bergantung konfigurasi).

2. Filter & Pencarian Bahan Ajar

Di bawah header terdapat kartu Filter & Pencarian.

2.1. Pencarian Judul

  • Field Cari Materi dengan ikon kaca pembesar.
  • Admin dapat mengetik sebagian judul bahan ajar.
  • Nilai ini disimpan di filter search dan diteruskan ke hook useAdminLearningMaterials untuk mengambil data yang sudah difilter.

2.2. Filter Tipe Materi

  • Dropdown Tipe Materi dengan pilihan:
    • Semua Tipe (all)
    • Ebook
    • Video
    • PPT
    • Artikel
    • Tugas (di implementasi yang mendukung tipe ini)
  • Ketika admin memilih salah satu tipe, daftar akan difilter sehingga hanya menampilkan materi dengan tipe tersebut.

2.3. Reset Filter

  • Tombol Reset / Reset Filter akan:
    • Mengembalikan pencarian ke kosong.
    • Mengubah tipe materi menjadi Semua Tipe.
    • Menampilkan pesan kecil (toast) bahwa filter sudah direset.

3. Daftar Bahan Ajar

Daftar bahan ajar ditampilkan dalam bentuk tabel di dalam kartu "Daftar Bahan Ajar".

3.1. Kolom Tabel

Berdasarkan tipe data LearningMaterial, tabel menampilkan beberapa kolom utama:

  • Cover/Thumbnail

    • Menampilkan gambar cover jika tersedia:
      • Untuk Video: menggunakan youtube_thumbnail_url.
      • Untuk tipe lain: menggunakan cover_url.
    • Jika gambar tidak ditemukan atau gagal dimuat, akan diganti dengan ikon/emotikon sesuai tipe:
      • Video → ikon kamera/video.
      • PPT → ikon presentasi.
      • Artikel → ikon koran.
      • Lainnya → ikon dokumen.
  • Judul Materi (judul)

    • Nama atau judul bahan ajar.
  • Tipe Materi (tipe_materi)

    • Ditampilkan sebagai badge dengan gaya warna berbeda untuk tiap tipe.
  • Tanggal Unggah (tanggal_unggah_formatted)

    • Tanggal upload materi dalam format yang sudah dirapikan (misalnya 12 Sep 2024).
  • Ukuran File (file_size)

    • Menampilkan ukuran file (misalnya 2.3 MB) untuk bahan ajar berupa file.
    • Untuk materi YouTube, teks berubah menjadi YouTube Video.
  • Aksi

    • Tombol-tombol untuk Download/Buka, Salin URL YouTube (jika tipe Video), Edit, dan Hapus.

3.2. Loading, Error, dan Data Kosong

  • Saat data masih diambil dari server, tabel menampilkan baris "Memuat data..." dengan teks penjelas.
  • Jika terjadi kesalahan saat mengambil data (misalnya API error), akan muncul pesan error di dalam tabel atau kartu, dan biasanya disediakan tombol Coba Lagi.
  • Jika tidak ada bahan ajar yang cocok dengan filter/pencarian, akan muncul pesan seperti "Tidak ada data yang ditemukan" atau "Tidak ada materi ditemukan".

3.3. Pagination

Di bawah tabel terdapat kontrol pagination:

  • Menampilkan informasi seperti:
    • Halaman X dari Y • Z total materi.
  • Tombol Sebelumnya dan Selanjutnya untuk berpindah halaman.
  • Perpindahan halaman akan mengubah currentPage di hook dan memicu pemanggilan data ulang ke backend.

4. Mengunggah Bahan Ajar Baru

Untuk menambahkan bahan ajar baru:

  1. Klik tombol "Unggah Bahan Ajar Baru" di bagian atas halaman.
  2. Dialog UploadDialog akan terbuka.

4.1. Field Upload (UploadDialog)

Berdasarkan tipe UploadFormData, form unggah biasanya meminta:

  • Judul (wajib) – nama materi yang akan tampil di daftar.
  • Deskripsi (opsional) – penjelasan singkat isi materi.
  • Tipe Materi (wajib) – memilih salah satu dari:
    • Ebook.
    • Video.
    • PPT.
    • Artikel.
    • Tugas.
  • Sumber Konten, tergantung tipe:
    • File upload (misalnya untuk Ebook/PPT/Tugas) – memilih file dari komputer.
    • YouTube URL (untuk Video) – mengisi link video YouTube.
    • File URL/Embed URL (opsional) – misalnya untuk PPT dalam bentuk link embed.

Detail validasi persisnya ditangani oleh UploadDialog dan API; jika ada input yang tidak sesuai (misalnya field wajib kosong), sistem akan menampilkan pesan error di dialog.

4.2. Proses Simpan

Ketika admin menekan tombol Simpan / Unggah di dialog:

  1. Data dikirim ke fungsi createMaterial di hook useAdminLearningMaterials.
  2. Hook akan memanggil endpoint backend yang menyimpan data materi dan mengunggah file (jika ada).
  3. Jika berhasil:
    • Dialog tertutup.
    • Daftar bahan ajar diperbarui.
    • Notifikasi sukses ditampilkan.
  4. Jika gagal:
    • Ditampilkan pesan error yang menjelaskan masalahnya (misalnya koneksi gagal atau validasi).

5. Mengedit Bahan Ajar

Untuk mengedit bahan ajar yang sudah ada:

  1. Di kolom Aksi, klik tombol Edit di baris materi yang ingin diubah.
  2. Dialog EditDialog akan terbuka berisi data materi tersebut.

Admin dapat:

  • Mengubah judul.
  • Mengubah deskripsi.
  • Mengubah tipe materi (jika diizinkan implementasi).
  • Mengganti file atau mengubah URL (YouTube atau embed) sesuai kebutuhan.

Saat menekan tombol Simpan / Update di EditDialog:

  1. Data dikirim ke fungsi updateMaterial(id, data).
  2. Jika proses backend berhasil:
    • Dialog tertutup.
    • Baris materi di tabel diperbarui.
  3. Jika gagal:
    • Pesan error akan ditampilkan (biasanya berupa toast).

6. Menghapus Bahan Ajar

Untuk menghapus bahan ajar:

  1. Klik tombol Hapus (ikon tempat sampah) di kolom Aksi.
  2. Sistem akan membuka Dialog Konfirmasi Hapus.
  3. Di dialog ini ada teks peringatan bahwa tindakan tidak dapat dibatalkan.

Jika admin menekan tombol Hapus di dialog konfirmasi:

  1. Fungsi deleteMaterial(materialId) dipanggil.
  2. Backend akan menghapus materi dari database (dan file terkait jika diatur demikian).
  3. Jika berhasil:
    • Daftar materi di-refresh tanpa entri tersebut.
    • Notifikasi sukses ditampilkan.
  4. Jika gagal:
    • Pesan error ditampilkan, dan materi tidak dihapus.

7. Mengunduh & Membuka Bahan Ajar

Di kolom Aksi, ada tombol untuk Download / Buka materi.

Perilakunya tergantung tipe materi:

  • Video (YouTube)

    • Jika is_youtube = true, tombol download akan membuka video di YouTube (misalnya di tab baru) menggunakan fungsi openYouTubeVideo.
    • Ada juga aksi Salin URL YouTube yang menyalin link video ke clipboard (melalui copyYouTubeUrl).
  • Artikel

    • Tombol akan membuka link file_url di tab baru (browser membuka halaman artikel).
    • Sistem menampilkan notifikasi bahwa artikel sedang dibuka.
  • Ebook / PPT / Tugas (file)

    • Tombol akan memanggil downloadFile(id, judul) yang memulai proses unduhan file.
    • Nama file yang diunduh biasanya mengikuti file_name atau judul materi.

Dengan cara ini, admin dapat dengan cepat memeriksa isi bahan ajar tanpa harus masuk ke sisi pengguna.


8. Sinkronisasi Artikel WordPress (Jika Diaktifkan)

Halaman Konten juga terhubung dengan hook useWordPressSync, yang menyediakan fungsi syncArticles.

  • Jika integrasi ini aktif, biasanya disediakan tombol untuk sinkronisasi artikel dari WordPress.
  • Saat tombol ditekan:
    1. Sistem memanggil syncArticles() untuk menarik artikel terbaru dari WordPress.
    2. Jika ada artikel baru yang berhasil disinkronkan (synced > 0):
      • Hook akan memanggil refetch() untuk memuat ulang daftar bahan ajar.
    3. Jika gagal, ditampilkan pesan error.

Fitur ini memudahkan tim konten yang menulis artikel di WordPress agar otomatis muncul sebagai bahan ajar di sistem Nasmedia tanpa perlu input ganda.


Dengan menggunakan modul Konten & Bahan Ajar (Admin) ini, tim admin bisa:

  • Menyediakan materi belajar yang terstruktur untuk penulis/pengguna.
  • Mengelola seluruh siklus hidup bahan ajar (unggah → gunakan → perbarui → hapus).
  • Mengintegrasikan sumber eksternal (seperti YouTube dan WordPress) ke dalam satu dashboard terpusat.