The Archive Content Management System

Dalam era pengembangan web modern, banyak developer mencari cara untuk membuat Content Management System (CMS) yang ringan, cepat, dan tidak bergantung pada server backend. Potongan Kode pada artikel ini merupakan contoh implementasi CMS berbasis frontend yang memanfaatkan HTML, CSS, JavaScript, dan localStorage untuk mengelola konten novel digital secara efisien.

Artikel ini akan membahas secara lengkap bagaimana struktur kode tersebut bekerja, fitur utama yang tersedia, serta keunggulan dari pendekatan CMS tanpa backend ini.

Apa Itu CMS Berbasis LocalStorage?

CMS ini adalah aplikasi web yang berjalan sepenuhnya di browser tanpa database server. Semua data disimpan menggunakan localStorage, yaitu penyimpanan lokal di browser pengguna.

Keunggulan utama pendekatan ini:

• Tidak memerlukan sever database untuk backend
• Cepat dan ringan
• Mudah digunakan untuk proyek personal
• Cocok untuk prototipe atau digital publishing sederhana

Struktur Utama Kode

Kode ini terdiri dari tiga bagian utama:

1. HTML (Struktur)
2. CSS (Tampilan/UI)
3. JavaScript (Logika dan interaksi)

Mari kita bahas satu per satu.

1. Struktur HTML: Fondasi CMS

Bagian HTML membangun kerangka utama aplikasi CMS. Beberapa elemen penting:

Topbar (Header)

<div class="topbar">

Berfungsi sebagai navigasi utama dengan fitur:

• Judul CMS (ARCHIVE CMS Editor)
• Status localStorage
• Tombol preview novel
• Tombol simpan data

Ini memberikan dashboard menjadi user-friendly.

Sidebar (Navigasi Menu)

<div class="sidebar">

Sidebar digunakan untuk berpindah antar fitur CMS, seperti:

• Dashboard
• Cover & Metadata
• Chapters
• Pages & Konten
• Export HTML
• LocalStorage

Pada versi mobile, sidebar ini berubah menjadi hamburger menu, meningkatkan UX di perangkat kecil.

Panel (Konten Dinamis)

Setiap menu memiliki panel sendiri:

<div class="panel" id="panel-dashboard">

Panel ini bersifat dinamis:

• Hanya satu panel aktif yang ditampilkan
• Panel lain disembunyikan menggunakan CSS (display: none)

Ini menciptakan pengalaman seperti aplikasi SPA (Single Page Application).

2. Desain UI dengan CSS Modern

CSS pada potongan kode ini cukup kompleks dan dirancang untuk pendekatan yang modern.

Variabel CSS (Root System)

:root {
    --bg: #0b0b0b;
    --accent: #d4af37;
}

Menggunakan variabel memberikan keuntungan:

• Konsistensi desain
• Mudah diubah (theming)
• Lebih maintainable

Tema Dark Mode 

UI menggunakan:

• Background gelap
• Aksen emas (gold)
• Font serif premium

Kombinasi ini sangat cocok untuk:

• Novel digital
• Website storytelling
• Portfolio kreatif

Responsive Design

Potongan Kode yang membuat responsif  menggunakan media query:

@media (max-width: 768px)

Fitur mobile:

• Sidebar berubah jadi slide menu
• Layout menjadi satu kolom
• Navigasi lebih mudah diakses

3. Fitur Utama CMS

CMS ini memiliki fitur lengkap untuk mengelola novel digital.

1. Dashboard

Menampilkan statistik:

• Jumlah chapter
• Jumlah halaman
• Status bacaan

Juga terdapat daftar chapter sebagai ringkasan konten.

2. Cover & Metadata

Form untuk mengatur:

• Judul novel
• Subjudul
• Gambar cover
• Catatan pembuka
• URL home
• Warna aksen

Ini penting untuk branding dan identitas konten.

3. Manajemen Chapter

<button onclick="addChapter()">+ Tambah Chapter</button>

Fitur:

• Tambah chapter
• Edit chapter
• Hapus chapter

Struktur ini membuat novel lebih terorganisir.

4. Manajemen Halaman (Pages)

Setiap chapter bisa memiliki halaman:

<button onclick="addPage()">+ Tambah Halaman</button>

Fungsi:

• Membuat konten per halaman
• Mengatur isi cerita
• Struktur seperti buku digital

5. Export HTML

Fitur penting:

<button onclick="generateExport()">Generate HTML</button>

Kegunaan:

• Mengubah data menjadi file HTML siap pakai
• Bisa dipublish langsung ke web
• Tidak perlu database

Ini menjadikan CMS ini sebagai static site generator sederhana.

6. Penyimpanan LocalStorage

localStorage['archive_novel_data']

Semua data disimpan dalam bentuk JSON.

Keuntungan:

• Data tetap ada walau refresh
• Tidak perlu login/server
• Cepat diakses

Fitur tambahan:

• Lihat isi storage
• Hapus data
• Refresh data

4. Interaksi JavaScript

Walaupun kode JS tidak ditampilkan (src.js), kita bisa memahami fungsi utama:

Fungsi Penting:

• saveAll() → menyimpan data ke localStorage
• addChapter() → menambah chapter
• addPage() → menambah halaman
• switchPanel() → navigasi panel
• generateExport() → membuat HTML output

JavaScript di sini berperan sebagai:

• Controller (mengatur UI)
• Data manager
• State handler

5. UX & UI yang Profesional

Beberapa elemen yang meningkatkan kualitas aplikasi:

Card System

.card { border-radius: 10px; }

Memberikan tampilan modular dan rapi.

Badge Status

.badge-reading
.badge-done

Digunakan untuk:

• Status chapter
• Progress membaca

Alert System

.alert-success
.alert-error

Untuk notifikasi user:

• Data berhasil disimpan
• Error saat proses

6. Keunggulan CMS Ini

CMS ini memiliki banyak kelebihan dibanding CMS tradisional:

1. Tanpa Backend

Tidak perlu:

• Database
• API
• Server

2. Cepat dan Ringan

Semua berjalan di browser:

• Load cepat
• Minim resource

3. Portable

Bisa digunakan:

• Offline
• Dipindahkan ke mana saja

4. Cocok untuk:

• Penulis novel digital
• Blogger
• Developer frontend
• Portfolio interaktif

7. Potensi Pengembangan

CMS ini masih bisa dikembangkan lebih jauh:

• Integrasi GitHub API
• Export ke Markdown
• Sinkronisasi cloud
• Multi-user system
• Rich text editor

Kesimpulan

CMS “The Archive” ini adalah contoh implementasi Content Management System berbasis frontend. Dengan memanfaatkan HTML, CSS, dan localStorage, sistem ini mampu mengelola konten novel secara lengkap tanpa memerlukan backend.

Bagi developer atau kreator digital, pendekatan ini sangat menarik karena:

• Mudah dikembangkan
• Fleksibel
• Efisien

Jika kamu ingin membangun platform publishing sendiri tanpa ribet database di sisi server, CMS seperti ini adalah solusi yang sangat tepat.