My App

Banner (Admin)

Panduan untuk admin dalam melihat, membuat, mengedit, dan menghapus banner untuk halaman landing dan promosi.

Banner (Admin)

Halaman Manajemen Banner di panel admin digunakan untuk mengelola gambar banner yang tampil di halaman landing atau area promosi lain.

Dari sini admin bisa:

  • Melihat daftar banner yang sudah pernah dibuat.
  • Mencari banner berdasarkan nama.
  • Mengatur urutan / cara urut daftar banner (berdasarkan nama atau tanggal).
  • Menambahkan banner baru (hanya Superadmin).
  • Mengubah banner yang sudah ada (hanya Superadmin).
  • Menghapus banner yang sudah tidak relevan (hanya Superadmin).

Menu ini bisa diakses melalui Banner di sidebar admin dan mengarah ke /dashboard/banners.

1. Tampilan Utama Manajemen Banner

Di bagian atas halaman, admin akan melihat:

  • Judul: Manajemen Banner.
  • Deskripsi: Kelola banner untuk halaman landing dan promosi.
  • Informasi rasio ideal:
    • Badge kecil Rasio Ideal: 4:1.
    • Contoh ukuran: 1200x300px, 1600x400px.

Di sisi kanan header:

  • Badge kecil yang menunjukkan hak akses:
    • Full Access jika user memiliki role superadmin.
    • Read Only jika user bukan superadmin (misalnya hanya editor).
  • Tombol "Tambah Banner" hanya muncul jika user memiliki izin membuat banner (canCreate = true, artinya role superadmin).

2. Filter & Pencarian Banner

Di bawah header terdapat kartu filter yang berisi:

2.1. Pencarian

  • Input teks bertanda ikon kaca pembesar.
  • Admin dapat mengetik nama banner untuk menyaring daftar.
  • Pencarian dikirim sebagai parameter search ke API (/admin/banners?search=...).

2.2. Urutkan (Sort)

  • Dropdown Sort by dengan beberapa pilihan, misalnya:
    • Nama A–Z / Z–A.
    • Tanggal dibuat terbaru / terlama.
    • Tanggal diperbarui terbaru / terlama.
  • Pilihan ini diubah menjadi parameter sort_by dan sort_order pada permintaan API ke backend.

2.3. Jumlah Data per Halaman

  • Dropdown untuk memilih 10, 20, 50, dan sebagainya.
  • Mengontrol nilai per_page yang dikirim ke API.

2.4. Tombol Reset Filter

  • Tombol Reset untuk mengembalikan filter ke kondisi awal (pencarian kosong, sort dan jumlah per halaman kembali ke default).

3. Tabel Daftar Banner (Tampilan Desktop)

Pada layar lebar (desktop), daftar banner ditampilkan sebagai tabel:

  • Kolom utama yang umum terlihat:
    • Preview Gambar – thumbnail kecil banner.
    • Nama Banner – nama yang diberikan admin.
    • Tanggal Dibuat / Diperbarui – ditampilkan dengan format tanggal lokal.
    • Link – jika banner memiliki link tujuan, bisa dilihat/diakses.
    • Aksi – tombol Edit dan Delete (jika admin memiliki hak).

Saat data sedang dimuat, komponen BannerTableSkeleton akan muncul dengan skeleton baris tabel (gambar palsu, teks abu-abu) sehingga admin tahu bahwa data sedang dimuat.

Jika setelah pencarian/filter tidak ada banner yang cocok, tabel akan menampilkan pesan bahwa tidak ada hasil ("Tidak ada banner" atau sejenisnya).

4. Tampilan Mobile (Kartu Banner)

Pada layar kecil (mobile), daftar banner ditampilkan sebagai kartu-kartu:

  • Setiap kartu menampilkan:
    • Gambar banner kecil di kiri.
    • Nama banner.
    • Tanggal dibuat.
    • Jika ada, link tujuan dengan teks "Lihat Link" yang bisa diklik untuk membuka tab baru.
  • Di sisi kanan kartu, jika user memiliki izin:
    • Tombol Edit.
    • Tombol Hapus.

Jika belum ada banner sama sekali, akan muncul kartu dengan teks seperti: "Belum ada banner". Jika pencarian tidak menemukan apapun, teks akan berubah menjadi "Tidak ada banner yang ditemukan".

Untuk loading di mobile, komponen BannerCardSkeleton akan muncul dengan skeleton tampilan kartu.

5. Pagination

Di bagian bawah daftar, jika total banner lebih dari satu halaman, akan muncul kontrol pagination:

  • Teks ringkasan:
    Menampilkan X-Y dari Z banner.
  • Tombol Sebelumnya dan Selanjutnya.
  • Deretan nomor halaman, dengan dukungan ... jika jumlah halaman banyak.

Admin dapat berpindah halaman; setiap perubahan mengirim parameter page baru ke backend.

6. Menambahkan Banner Baru

Untuk menambah banner baru:

  1. Pastikan akun Anda memiliki role superadmin.
  2. Tekan tombol "Tambah Banner" di header.
  3. Modal BannerModal akan terbuka dengan judul "Tambah Banner Baru".

6.1. Field di BannerModal (Create)

Di dalam modal, admin mengisi:

  • Nama Banner*
    Nama internal/banner yang akan memudahkan admin mengenali fungsi banner.

  • Link Tujuan (opsional)
    URL yang akan dibuka ketika pengunjung mengklik banner. Contoh: https://nasmedia.id/pricing.

  • Mode Upload Gambar
    Admin bisa memilih salah satu:

    • Upload File – mengupload file gambar dari komputer.
    • URL Gambar – memasukkan link gambar yang sudah ada di internet.

  • Upload File Gambar (jika pilih Upload File)

    • Mendukung format JPG/PNG/GIF.
    • Ukuran maksimal 5MB.
    • Nama file akan tampil sebagai badge kecil setelah dipilih.

  • URL Gambar (jika pilih URL Gambar)

    • Field untuk memasukkan URL penuh ke file gambar.

Semua field yang wajib akan diberi tanda * di label.

6.2. Preview Gambar

Di sisi kanan modal terdapat area Preview Gambar:

  • Jika gambar sudah dipilih (file/URL), preview langsung ditampilkan.
  • Jika gagal memuat gambar (misalnya URL salah), akan muncul error dan preview direset.
  • Jika belum ada gambar, area ini menampilkan icon gambar dan teks petunjuk ukuran maksimal.

6.3. Simpan atau Batal

Di bagian bawah modal terdapat tombol:

  • Batal – menutup modal tanpa menyimpan perubahan.
  • Simpan – mengirim permintaan create banner ke backend.

Jika validasi gagal (misalnya nama kosong atau tidak ada gambar), akan muncul notifikasi error di UI. Jika berhasil:

  • Banner baru dibuat melalui endpoint /admin/banners (dengan form-data untuk upload gambar).
  • Modal tertutup.
  • Daftar banner otomatis diperbarui.

Catatan Hak Akses: Hanya user dengan role superadmin yang bisa membuat banner baru. Jika bukan superadmin, tombol dan aksi create akan diblokir di sisi frontend maupun backend.

7. Mengedit Banner

Untuk mengedit banner yang sudah ada:

  1. Klik tombol Edit di baris/kartu banner yang ingin diubah.
  2. Modal BannerModal terbuka dengan judul "Edit Banner".
  3. Field akan terisi data banner saat ini (nama, link, dan URL gambar jika ada).

Admin dapat:

  • Mengubah nama banner.
  • Mengubah link tujuan.
  • Mengganti gambar banner:
    • Dengan upload file baru; atau
    • Dengan mengganti URL gambar.

Saat menekan Perbarui:

  • Frontend mengirim permintaan ke /admin/banners/{id} dengan metode POST + _method=PUT (standar Laravel untuk update dengan form-data).
  • Backend akan:
    • Jika file gambar baru di-upload → hapus file lama (jika disimpan lokal) dan simpan yang baru.
    • Update nilai nama, image_url, dan link sesuai input.

Jika berhasil, banner di daftar akan diperbarui dan modal tertutup.

Hak Akses: Hanya superadmin yang dapat menyimpan perubahan (update). Editor dapat melihat tapi tidak bisa mengubah.

8. Menghapus Banner

Untuk menghapus banner:

  1. Klik tombol Hapus (ikon tempat sampah) di baris/kartu banner.
  2. Dialog konfirmasi akan muncul dengan teks:
    • Judul: "Hapus Banner".
    • Deskripsi: menegaskan bahwa tindakan ini tidak dapat dibatalkan.
  3. Admin dapat memilih Batal atau Hapus.

Jika menekan Hapus:

  • Frontend memanggil endpoint DELETE /admin/banners/{id}.
  • Backend akan:
    • Menghapus record banner dari database.
    • Mencoba menghapus file gambar terkait dari storage (jika tersimpan lokal).
  • Jika berhasil:
    • Muncul notifikasi sukses.
    • Daftar banner dimuat ulang tanpa banner tersebut.

Hak Akses: Lagi-lagi, hanya superadmin yang diizinkan menghapus banner. Jika user bukan superadmin, aksi ini akan ditolak dan menampilkan pesan "Anda tidak memiliki izin untuk menghapus banner".

9. Error & Hak Akses

Modul Banner dilengkapi dengan:

  • Notifikasi kesalahan ketika gagal memuat daftar banner, membuat, mengedit, atau menghapus.
  • Pembatasan hak akses di level frontend dan backend:
    • Superadmin: dapat melihat, membuat, mengedit, dan menghapus banner.
    • Editor: dapat melihat banner (read only) tetapi tidak dapat membuat/mengubah/menghapus.

Dengan memahami modul Banner (Admin) ini, tim admin dapat:

  • Menjaga tampilan landing page dan promosi tetap relevan dan rapi.
  • Mengontrol siapa saja yang boleh mengubah materi promosi visual.
  • Mengelola siklus hidup banner (buat → tampil → hapus) tanpa harus menyentuh kode.

Pengaturan Admin

Panduan untuk admin dalam mengatur integrasi WhatsApp dan persentase royalti default untuk buku fisik dan digital.

Konten & Bahan Ajar (Admin)

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

On this page

Banner (Admin)1. Tampilan Utama Manajemen Banner2. Filter & Pencarian Banner2.1. Pencarian2.2. Urutkan (Sort)2.3. Jumlah Data per Halaman2.4. Tombol Reset Filter3. Tabel Daftar Banner (Tampilan Desktop)4. Tampilan Mobile (Kartu Banner)5. Pagination6. Menambahkan Banner Baru6.1. Field di BannerModal (Create)6.2. Preview Gambar6.3. Simpan atau Batal7. Mengedit Banner8. Menghapus Banner9. Error & Hak Akses