LOGO MSJ
MSJ GROUP
 PT MATAHARI SAKTI JAYA
INSTRUKSI KERJA PENGEMBANGAN SISTEM
Proyek: MSJ Guidelines — Brand Guidelines Management System
Nomor Dokumen:
IK-SYS-GUIDE-2025/2026-001 		Tanggal Terbit:
14 April 2026 		Versi: 1.1
Halaman: 1 dari 7
Dibuat Oleh:
Althaf (Developer) 		Tanggal Revisi Terakhir:
14 April 2026 		Status: AKTIF

1. Tujuan

Instruksi kerja ini disusun untuk mendokumentasikan seluruh pekerjaan pengembangan sistem MSJ Guidelines yang merupakan aplikasi Brand Guidelines Management System berbasis web. Sistem ini berfungsi sebagai portal terpusat untuk mengelola dan mendistribusikan aset brand, tipografi, mockup, komponen visual, dan dokumen panduan desain kepada seluruh stakeholder PT Matahari Sakti Jaya. Dokumen ini mencakup deskripsi fitur, arsitektur modul, dan panduan penggunaan dari setiap bagian sistem.

2. Ruang Lingkup Pekerjaan

Sistem MSJ Guidelines mencakup modul-modul berikut:

3. Daftar Commit & Perubahan

Berikut adalah commit terkini yang tercatat pada repository datamismsj/msjguidelines:

No Commit ID Tanggal Deskripsi Perubahan Author
1 b9565c7 08-04-2026 Perbaikan tampilan highlight konten pada halaman guest mockup Althaf
2 55bb55e 08-04-2026 Perbaikan highlight seeder — data konten highlight mockup diperbarui Althaf
3 b647f4d 07-04-2026 Penambahan tampilan desktop pada highlight mockup — responsive desktop view Althaf
4 13caf65 06-04-2026 Perbaikan dan penambahan konten brand dan seeder pada sistem guidelines Althaf
5 80bc4f4 - Hapus user bodong & kartu nama belakang (Adel) Adel
6 ce4415c - Update views guest & branch (Radif) Radif
7 0743b3c - Revisi image proxy & update AOS Adel
8 7e9a2f4 - Update asset yang masih salah pada visual component bahasa Indonesia Radif
9 0ccdc80 - Update Photopea — URL langsung tanpa proxy Radif
10 b74abc8 - Fix revisi Photopea — duplikat header Radif
11 7c211d1 - Revisi tampilan mockup (Adel) Adel

4. Detail Instruksi Kerja per Modul

4.1 Guest Portal — Halaman Publik Panduan Brand

Controller: GuestController.php  |  Views: resources/views/guest/  |  Akses: Publik (tanpa login) & Login
  1. Homepage (/) — Halaman selamat datang dengan informasi visi & misi MSJ. Dapat diakses tanpa login. Tersedia dalam 2 bahasa (EN/ID).
  2. Setiap halaman konten guest memiliki fitur bilingual (Bahasa Indonesia / English). Bahasa disimpan di session (session('lang')) dan dapat diubah via route /language/english atau /language/indonesian.
  3. Halaman Brand (/brand): Menampilkan layout brand yang aktif beserta konten (logo, panduan warna, dll.) dan link unduhan. Filter: dmenu='msbrnd', isactive='1', bahasa sesuai session.
  4. Halaman Typography (/typography): Menampilkan font dan panduan tipografi. Mendukung unduhan file font (TTF/OTF) dan preview via Photopea.
  5. Halaman Mockup (/mockup): Menampilkan template mockup dengan tampilan highlight desktop yang telah diperbarui (commit b647f4d). Mendukung download ZIP per konten.
  6. Halaman Visual Component (/visual-component): Komponen visual dan elemen UI yang dapat diunduh.
  7. Halaman Document (/document): Dokumen panduan brand dalam format PDF dan lainnya.
  8. Fitur Download ZIP: Tersedia di semua halaman konten. Sistem mengumpulkan semua link aktif dari suatu konten ke dalam file ZIP sementara lalu mengirimkannya ke browser. File ZIP dihapus otomatis setelah pengiriman.
  9. Fitur Pencarian Global (/search?q=...): Mencari kata kunci di seluruh konten brand, tipografi, mockup, visual component, dan dokumen.
  10. Fitur Image Proxy (/image-proxy): Melayani gambar eksternal untuk kebutuhan CORS pada editor Photopea.

💡 Panduan Penggunaan (Tutorial — User Umum)

4.2 Modul Master Brand (msbrnd)

Controller: MsbrndController.php  |  Views: resources/views/master/msbrnd/  |  Route Prefix: /msbrnd
  1. Method index() — Menampilkan halaman master brand. Ambil otorisasi dari sys_auth berdasarkan role user. Ambil daftar menu dari sys_gmenu. Load enum cardtype, photopea, filetype dari sys_enum.
  2. Method getLayouts() — AJAX endpoint JSON: Ambil semua layout untuk dmenu='msbrnd' sesuai bahasa session. Urut berdasarkan position ASC.
  3. Method storeLayout() — Simpan layout baru. Validasi: header required, card_type required, lang required. Auto-assign posisi = max position + 1. Normalisasi deskripsi HTML kosong menjadi string kosong.
  4. Method updateLayout() — Update layout. Validasi sama seperti store + position required integer. Reorder posisi layout lain secara otomatis jika posisi berubah (geser ke atas/bawah).
  5. Method destroyLayout() — Hapus layout:
  6. Method storeContent() — Tambah konten brand ke layout. Validasi file: mimes:jpeg,png,svg, max:16384. File thumbnail disimpan ke public/assets/thumbnails/brands/. Link file disimpan ke public/assets/links/brands/. Validasi tidak boleh duplikat tipe link (kecuali slider_image).
  7. Method activateLayout() / deactivateLayout() — Toggle status aktif layout via PATCH request.
  8. Method activateContent() / deactivateContent() — Toggle status aktif konten brand.
  9. Method previewLayout() — Menampilkan pratinjau tampilan layout sebelum dipublikasikan.
  10. Semua aksi dicatat ke sys_log via Function_Helper::log_insert() dengan tipe: V (View), I (Insert), U (Update), X (Delete).

💡 Panduan Penggunaan (Tutorial — Admin)

⚙️ Role: Administrator

4.3 Modul Master Typography, Mockup, Visual Component, Document

Controllers: MstypoController, MsmockController, MsvisController, MsdocsController  |  Pola Arsitektur: Generalized Controller Pattern
  1. Keempat modul ini menggunakan pola arsitektur yang identik dengan MsbrndController. Setiap controller memiliki method yang sama: index(), getLayouts(), storeLayout(), updateLayout(), destroyLayout(), getContents(), storeContent(), updateContent(), destroyContent(), activateLayout(), deactivateLayout(), previewLayout().
  2. Perbedaan antar modul hanya pada: nilai $dmenu, model yang digunakan (Brand/Typography/Mockup/VisualComponent/Document), dan path penyimpanan file.
  3. Path penyimpanan file per modul:
  4. Route sistem menggunakan generalized routing via loop foreach ($mastermenu as $menu => $config) di web.php, sehingga semua 5 modul master tercover dengan struktur route yang seragam.
  5. Fitur Photopea integration: Konten dengan flag photopea='1' akan menampilkan tombol edit online di halaman guest. File dibuka langsung di editor Photopea via image proxy.
  6. Highlight Mockup (commit b647f4d & b9565c7): Tampilan highlight khusus pada halaman mockup diperbarui untuk mendukung tampilan desktop yang lebih baik. Seeder juga diperbarui untuk sinkronisasi data (commit 55bb55e).

💡 Panduan Penggunaan — Modul Master (Typography / Mockup / Visual / Document)

⚙️ Role: Administrator

4.4 Modul Dashboard Analytics

Controller: DashboardController.php  |  Route: /dashboard  |  AJAX Endpoints: /dashboard/visitors-data, downloads-data, activity-data, stats-data, top-downloaders-data
  1. Method index() — Memuat data dashboard: statistik ringkasan, data unduhan per kategori menu, top downloaders, aktivitas per role, dan aktivitas terkini.
  2. Statistik Ringkasan (getDashboardStats()):
  3. Grafik Unduhan per Menu (getDownloadsByMenuType()): Menampilkan jumlah unduhan per kategori (Brand, Typography, Document, Mockup, Visual). Mendukung filter berdasarkan rentang tanggal atau preset (week/month/year/all).
  4. Grafik Pengunjung (getVisitorsData()): Data kunjungan oleh user terautentikasi, dapat difilter per role dan periode (harian/bulanan/tahunan).
  5. Top Downloaders: Leaderboard 5 user teratas berdasarkan jumlah unduhan (mengecualikan user guest username='-').
  6. Aktivitas Terkini: Log 10 aktivitas terbaru (Login, View, Download, Create, Update, Delete). Dapat difilter per user, tipe aksi, dan rentang waktu.
  7. AJAX Filtering: Semua data chart dapat diperbarui secara dinamis tanpa reload halaman via endpoint AJAX dengan parameter filter.

💡 Panduan Penggunaan (Tutorial)

🌎 Role: Administrator

4.5 Sistem Otentikasi & Manajemen Profil

Controller: LoginController.php, PageController.php  |  Routes: /login, /profile, /changepass
  1. Login (LoginController::login()): Autentikasi user via username + password. Mendukung SSO via token (/auth/{token}).
  2. Profil (/profile): Menampilkan dan memperbarui data profil user. Method update() di PageController menangani penyimpanan perubahan data profil.
  3. Ganti Password (/changepass): Form untuk mengubah password akun. Validasi kekuatan password diterapkan.
  4. Semua route yang memerlukan login dilindungi oleh middleware auth.

4.6 Seeder & Konfigurasi Sistem

Direktori: database/seeders/  |  Orchestrator: DatabaseSeeder.php
  1. BrandsTableSeeder — Data awal konten brand (logo, panduan warna, panduan penggunaan).
  2. TypographiesTableSeeder — Data font dan panduan tipografi awal.
  3. MockupsTableSeeder & Seedermockupbaru & Seedermockupother — Data template mockup termasuk highlight dan tampilan desktop (diperbarui Althaf commit b647f4d & 55bb55e).
  4. VisualComponentsTableSeeder — Data komponen visual awal (icon, ilustrasi, elemen UI).
  5. DocumentsTableSeeder — Data dokumen panduan brand awal.
  6. LayoutsTableSeeder — Konfigurasi layout grup untuk semua modul master.
  7. LinksTableSeeder — Data link file awal untuk setiap konten.
  8. UsersSeeder — User akun awal (admin dan user standar).
  9. Seeder Sistem: tabel_sys_app, tabel_sys_auth, tabel_sys_role, tabel_sys_gmenu, tabel_sys_dmenu — Konfigurasi aplikasi, hak akses, role pengguna, dan menu navigasi.
  10. add_content_dokumen — Seeder tambahan untuk konten dokumen guideline.
  11. Menjalankan seeder: php artisan db:seed --class=NamaSeeder

4.7 Pengelolaan Modul Mockup (msmock)

URL Publik: /mockup  |  URL Master: /msmock  |  Fitur Khusus: Highlight Desktop View & ZIP Package
  1. Konfigurasi Highlight: Modul mockup memiliki fitur Highlight Desktop View yang menampilkan aset utama secara lebih impresif pada lebar layar besar. Pastikan thumbnail yang digunakan memiliki resolusi tinggi agar tidak pecah saat ditampilkan sebagai highlight.
  2. Manajemen Layout (Kategori): Kelompokkan mockup berdasarkan jenis media (seperti: "Corporate Stationery" atau "Signage"). Pengaturan posisi (position) menentukan kategori mana yang muncul pertama kali di halaman Guest.
  3. Asset Linking: Setiap konten mockup disarankan memiliki link download dalam format ZIP (berisi file .PSD/.AI) dan format gambar (PNG/JPG) untuk pratinjau cepat.
  4. Sinkronisasi Data: Gunakan Seedermockupbaru untuk menambahkan koleksi aset baru secara massal tanpa merusak struktur layout yang sudah ada.

💡 Tips Admin: Optimasi Tampilan Mockup

4.8 Pengelolaan Dokumen Panduan (msdocs)

URL Publik: /document  |  URL Master: /msdocs  |  Dokumen Utama: Brand Guideline MSJA / Pedoman Brand & Design
  1. Aset Guideline Utama: Dokumen "Brand Guideline MSJA" adalah panduan komprehensif yang di-seed melalui add_content_dokumen. Dokumen ini tersedia dalam dua bahasa (English/Indonesia) untuk menjangkau pengguna internal dan eksternal secara luas.
  2. Pembaruan Dokumen: Untuk memperbarui file PDF guideline, admin dapat mengakses menu Master Document, mencari konten "Brand Guideline MSJA", lalu mengunggah revisi terbaru pada bagian link file. Sistem akan otomatis mengganti file lama dengan yang baru di direktori assets/links/documents/.
  3. Konsistensi Visual: Gunakan thumbnail cover resmi PEDOMAN BRAND & DESIGN.png. Hal ini penting agar user dapat mengenali dokumen panduan utama dengan cepat di antara daftar dokumen lainnya.
  4. Link Download Terpadu: Dokumen ini diatur agar mudah diunduh dalam format PDF tunggal, namun admin tetap dapat menambahkan format lain (seperti ZIP berisi aset mentah) dalam satu konten yang sama melalui menu Content Link.

📄 Prosedur Update Dokumen Guideline

5. Arsitektur & Struktur Teknis

5.1 Struktur Database Utama

Tabel Fungsi Relasi Utama
layouts Grup/kategori konten. Berisi header, deskripsi, tipe kartu, posisi, bahasa (lang), dan status aktif. Field dmenu menentukan modul (msbrnd/mstypo/msmock/msvis/msdocs). One-to-Many → brands, typographies, mockups, visual_components, documents
brands Konten aset brand (logo, panduan warna). Berisi header, deskripsi, file_path thumbnail, flag photopea, dan isactive. Many-to-One → layouts
One-to-Many → links
typographies Konten font dan tipografi perusahaan. Many-to-One → layouts
One-to-Many → links
mockups Template dan mockup desain. Mendukung tampilan highlight desktop. Many-to-One → layouts
One-to-Many → links
visual_components Elemen visual dan komponen UI. Many-to-One → layouts
One-to-Many → links
documents Dokumen panduan brand dalam berbagai format. Many-to-One → layouts
One-to-Many → links
links File yang dapat diunduh. Berisi type (filetype), address (path file), dmenu, layoutid, contentid. Memungkinkan satu konten memiliki banyak format unduhan. Many-to-One → brands/typographies/mockups/visual_components/documents
sys_log Log aktivitas sistem. Tipe: L=Login, V=View, D=Download, I=Insert, U=Update, X=Delete, E=Error. Many-to-One → users
sys_enum Data master enum (cardtype, photopea, filetype, dll.) untuk dropdown dan konfigurasi dinamis. —
sys_auth Hak akses per role per menu. Field: idroles, dmenu, add, edit, delete, excel, pdf, print. Many-to-One → sys_roles

5.2 Hak Akses per Modul

Modul Admin User Login Publik (Guest)
Homepage (/) ✓ Lihat ✓ Lihat Akses Penuh
Brand (/brand) ✓ Lihat Lihat + Unduh —
Typography (/typography) ✓ Lihat Lihat + Unduh —
Mockup (/mockup) ✓ Lihat Lihat + Unduh —
Visual Component (/visual-component) ✓ Lihat Lihat + Unduh —
Document (/document) ✓ Lihat Lihat + Unduh —
Master Brand (msbrnd) Full CRUD — —
Master Typography (mstypo) Full CRUD — —
Master Mockup (msmock) Full CRUD — —
Master Visual (msvis) Full CRUD — —
Master Document (msdocs) Full CRUD — —
Dashboard Analytics Full — —
Profil (/profile) Full Full —

6. Catatan Teknis Penting

Topik Catatan
Bilingual System Bahasa disimpan di session key 'lang' (nilai: 'en' atau 'id'). Semua query konten otomatis filter berdasarkan bahasa aktif. Default: English.
Generalized Controllers Kelima modul master (msbrnd, mstypo, msmock, msvis, msdocs) menggunakan struktur controller yang identik. Perubahan arsitektur pada satu modul harus direplikasi ke modul lain.
File Upload Validation Thumbnail: mimes:jpeg,png,svg, max:16384 (16MB). Link file: mimes:jpeg,jpg,png,svg,zip,ai,pdf,psd,doc,docx,ttf,otf,ppt,pptx, max:16384. Validasi duplikat tipe link diterapkan (kecuali slider_image).
Duplikat Tipe Link Dalam satu konten, tipe link tidak boleh duplikat (misal tidak bisa 2 link bertipe PDF dalam satu konten), kecuali tipe slider_image yang mengizinkan multiple.
Soft Delete vs Hard Delete Layout dengan isactive='1' hanya soft-deleted (isactive ke 0). Layout dengan isactive='0' dapat di-hard-delete bersama seluruh konten dan file fisik terkait.
Photopea Integration Konten dengan photopea='1' menampilkan tombol edit di halaman guest. Image proxy (/image-proxy) diperlukan untuk mengatasi CORS saat Photopea mengakses file dari server lokal.
Download ZIP Dibuat dengan ZipArchive. File ZIP sementara disimpan di storage/app/temp/ dan dihapus otomatis setelah response dikirim (deleteFileAfterSend(true)).
Audit Log (sys_log) Setiap aksi (View, Insert, Update, Delete, Download, Login) dicatat otomatis via Function_Helper::log_insert($tipe, $dmenu, $keterangan, $status). Data ini menjadi sumber Dashboard Analytics.
Posisi Layout Posisi layout dikelola manual via field position. Saat update posisi, sistem otomatis menggeser posisi layout lain untuk menghindari duplikat posisi.
HTML Description Normalization Deskripsi yang hanya berisi HTML kosong ( , tag tanpa teks) dinormalisasi menjadi string kosong sebelum disimpan ke database.

7. Ringkasan Statistik Pengembangan

Metrik Jumlah / Keterangan
Total Controller Utama 8 Controller (MsbrndController, MstypoController, MsmockController, MsvisController, MsdocsController, DashboardController, GuestController, PageController)
Modul Master Data 5 Modul (Brand, Typography, Mockup, Visual, Document)
Halaman Guest Publik 6 Halaman (Homepage, Brand, Typography, Mockup, Visual, Document)
Bahasa yang Didukung 2 Bahasa (English, Bahasa Indonesia)
Jumlah Seeder 10+ Seeder (konten + konfigurasi sistem)
Commit Terbaru Althaf 4 Commit (Highlight mockup desktop & seeder)
Framework Laravel (PHP) + Blade Templating
Status Keseluruhan AKTIF & PRODUCTION

8. Lembar Pengesahan

Dokumen instruksi kerja ini disusun berdasarkan hasil analisis kode sumber dan riwayat commit pada repository datamismsj/msjguidelines dan disahkan oleh pihak-pihak berikut:

Dibuat Oleh
Althaf
Developer / Programmer
Tanggal: _______________ 		Diperiksa Oleh
____________________
Supervisor / Team Lead
Tanggal: _______________ 		Disetujui Oleh
____________________
Manager / Kepala Divisi
Tanggal: _______________

Dokumen ini dibuat berdasarkan analisis kode sumber — Repository: gitlab.com/datamismsj/msjguidelines — Dicetak: 08 April 2026