CMS dengan PHP Part 7: Editor WYSIWYG, Penyempurnaan, & Kesimpulan Seri

CMS dengan PHP Part 7: Editor WYSIWYG, Penyempurnaan, & Kesimpulan Seri

CMS dengan PHP Part 7: Editor WYSIWYG, Penyempurnaan, & Kesimpulan Seri

Novian Hidayat
2025-05-12

Capai garis finis! Di Part 7 ini, kita akan mengintegrasikan editor WYSIWYG (TinyMCE) untuk pengalaman menulis artikel yang lebih baik, melakukan beberapa penyempurnaan akhir pada CMS kita, dan menutup seri tutorial dasar ini dengan rangkuman pembelajaran.

Membangun CMS Sederhana dengan PHP & MySQL - Part 7: Editor WYSIWYG, Penyempurnaan, & Kesimpulan Seri

Selamat datang di bagian terakhir dari seri tutorial dasar “Membangun CMS Sederhana dengan PHP & MySQL”! Kita telah melakukan perjalanan panjang, mulai dari menampilkan konten (Part 1), membangun sistem login (Part 2), manajemen artikel (Part 3), kategori (Part 4), pengguna (Part 5), hingga upload gambar dan pagination (Part 6).

Di Bagian 7 ini, kita akan fokus pada:

  1. Mengintegrasikan Editor WYSIWYG (TinyMCE): Mengganti <textarea> standar untuk konten artikel dengan editor teks kaya, memungkinkan pemformatan teks, penambahan list, link, dll., dengan mudah.
  2. Beberapa Penyempurnaan Kecil: Melihat kembali beberapa area yang bisa ditingkatkan sedikit.
  3. Kesimpulan Seri Tutorial: Merangkum apa yang telah kita pelajari dan langkah selanjutnya yang bisa Anda ambil.

Ini akan menjadi sentuhan akhir untuk membuat CMS kita lebih ramah pengguna bagi penulis konten.

Prasyarat

Pastikan Anda telah mengikuti semua bagian sebelumnya. Kita akan memodifikasi form tambah dan edit artikel.

Bagian A: Integrasi Editor WYSIWYG (TinyMCE)

TinyMCE adalah editor teks kaya berbasis JavaScript yang populer dan kuat. Kita akan mengintegrasikannya menggunakan CDN (Content Delivery Network) agar lebih mudah.

Langkah A1: Dapatkan API Key TinyMCE (Opsional, tapi Direkomendasikan)

TinyMCE bisa digunakan tanpa API key untuk penggunaan dasar atau dari CDN komunitas, tetapi untuk penggunaan cloud versi terbaru dan menghindari pesan peringatan di konsol, mendapatkan API key gratis dari tiny.cloud direkomendasikan.

Jika Anda tidak menggunakan API key, Anda bisa menggunakan link CDN komunitas, namun beberapa fitur mungkin terbatas atau ada branding.

Langkah A2: Modifikasi Halaman Tambah & Edit Artikel

Kita perlu menyertakan skrip TinyMCE dan menginisialisasinya pada <textarea> konten.

1. Modifikasi admin/add_post.php:

Tambahkan skrip TinyMCE di dalam tag <head>:

<!-- admin/add_post.php (di dalam <head>) -->
    <title><?php echo htmlspecialchars($page_title_admin); ?> - CMS Admin</title>
    <link rel="stylesheet" href="../css/admin_style.css">
    <!-- TinyMCE CDN (Ganti YOUR_API_KEY dengan API Key Anda jika ada) -->
    <script src="https://cdn.tiny.cloud/1/YOUR_API_KEY/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
    <!-- Jika tidak pakai API Key, bisa coba dari CDN lain atau self-host, contoh:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.2/tinymce.min.js"></script>
    Perhatikan versi TinyMCE yang digunakan.
    -->

Kemudian, di bawah tag <textarea name="content" ...>, tambahkan skrip inisialisasi TinyMCE:

                <!-- ... (textarea konten) ... -->
                <textarea name="content" id="contentEditor" rows="15" required><?php echo htmlspecialchars($content); ?></textarea>
                <!-- Nanti bisa diganti dengan editor WYSIWYG seperti TinyMCE -->
            </div>
            <!-- ... (field status berikutnya) ... -->
        </form> <!-- Tutup form di sini jika script di bawahnya, atau letakkan script sebelum penutup body -->
    </div> <!-- Tutup admin-container -->

    <script>
        tinymce.init({
            selector: 'textarea#contentEditor', // Targetkan textarea dengan ID contentEditor
            plugins: 'advlist lists link image charmap print preview hr anchor pagebreak searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking table contextmenu directionality emoticons template paste textcolor autoresize',
            toolbar1: 'undo redo | styleselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media',
            toolbar2: 'print preview | forecolor backcolor emoticons | code fullscreen',
            image_advtab: true,
            // (Opsional) Konfigurasi untuk upload gambar langsung dari editor (memerlukan backend handler)
            // images_upload_url: 'upload_handler.php', // Anda perlu membuat file ini
            // images_upload_base_path: '/uploads/editor_images/', // Path di server
            // images_upload_credentials: true,
            // file_picker_types: 'image',
            // file_picker_callback: function (cb, value, meta) { /* ... logika file picker ... */ },
            height: 400, // Tinggi editor
            autoresize_bottom_margin: 15,
            setup: function (editor) {
                editor.on('change', function () {
                    tinymce.triggerSave(); // Penting agar perubahan di TinyMCE tersimpan ke textarea asli saat form submit
                });
            }
        });
    </script>
    <?php if(isset($conn)) { mysqli_close($conn); } ?>
</body>
</html>

Perubahan Penting:

  • ID Textarea: Ubah id="content" pada <textarea> menjadi id="contentEditor" (atau ID unik lain).
  • Skrip TinyMCE CDN: Sertakan link CDN TinyMCE. Ganti YOUR_API_KEY jika Anda punya. Versi TinyMCE (misalnya /6/) bisa disesuaikan.
  • Inisialisasi tinymce.init():
    • selector: 'textarea#contentEditor': Menargetkan textarea yang akan diubah menjadi editor WYSIWYG.
    • plugins: Daftar plugin yang ingin Anda aktifkan (banyak pilihan tersedia).
    • toolbar1, toolbar2: Konfigurasi tombol-tombol yang muncul di toolbar editor.
    • height: Mengatur tinggi editor.
    • autoresize: Plugin untuk menyesuaikan tinggi editor secara otomatis.
    • editor.on('change', function () { tinymce.triggerSave(); });: SANGAT PENTING! Ini memastikan bahwa setiap kali konten di editor TinyMCE berubah, nilainya disalin kembali ke elemen <textarea> asli. Tanpa ini, data dari TinyMCE mungkin tidak terkirim saat form disubmit.

2. Modifikasi admin/edit_post.php: Lakukan perubahan yang sama seperti di add_post.php:

  • Tambahkan skrip TinyMCE CDN di <head>.
  • Ubah ID <textarea> menjadi contentEditor.
  • Tambahkan skrip tinymce.init() sebelum tag penutup </body>.

3. Menampilkan Konten HTML di Frontend: Sekarang karena konten artikel bisa mengandung HTML dari editor WYSIWYG, kita perlu memastikan konten tersebut ditampilkan dengan benar (bukan sebagai teks biasa yang di-escape) di frontend.

Modifikasi single.php: Di bagian menampilkan konten:

            <div class="post-content-full">
                <?php
                // Karena konten sekarang bisa HTML dari TinyMCE, kita tampilkan langsung.
                // PERHATIAN: Ini mengasumsikan Anda akan menerapkan sanitasi HTML yang kuat
                // saat menyimpan data ke database jika ada input dari sumber yang tidak terpercaya
                // atau jika Anda ingin mengontrol tag HTML apa saja yang diizinkan.
                // Untuk tutorial ini dengan admin sebagai satu-satunya inputter, kita tampilkan langsung.
                echo $post['content']; 
                ?>
            </div>

PENTING TENTANG KEAMANAN KONTEN HTML: Jika konten artikel bisa diinput oleh berbagai jenis pengguna (bukan hanya admin tepercaya) atau jika Anda ingin membatasi tag HTML yang boleh digunakan, menampilkan $post['content'] secara langsung seperti di atas bisa berisiko XSS.

  • Solusi Ideal: Gunakan library sanitasi HTML seperti HTML Purifier saat menyimpan konten dari TinyMCE ke database atau saat menampilkannya. HTML Purifier akan membersihkan HTML dari skrip berbahaya dan hanya mengizinkan tag dan atribut yang aman.
  • Untuk Tutorial Ini: Karena kita berasumsi hanya admin yang menginput konten melalui TinyMCE, dan kita tidak mengimplementasikan upload gambar di dalam editor (yang bisa jadi vektor lain), kita akan menampilkan HTML secara langsung untuk kesederhanaan. Namun, sadari risikonya untuk aplikasi produksi.

Modifikasi index.php (untuk excerpt): Fungsi generate_excerpt() kita sudah menggunakan strip_tags(), jadi excerpt akan tetap aman dan bersih dari HTML. Tidak perlu perubahan besar di sini, kecuali jika Anda ingin excerpt juga menampilkan format HTML sederhana (ini lebih kompleks).

Bagian B: Penyempurnaan Kecil

Berikut beberapa ide penyempurnaan yang bisa Anda terapkan:

1. Pesan Konfirmasi yang Lebih Baik di delete_*.php (Opsional): Daripada hanya return confirm(), Anda bisa membuat modal konfirmasi kustom untuk pengalaman yang lebih baik, tapi ini akan menambah kompleksitas. Konfirmasi JavaScript standar sudah cukup untuk fungsionalitas dasar.

2. Link “Edit” dari Halaman Single Post (Jika Admin Login): Jika pengguna yang sedang melihat halaman single.php adalah admin yang sedang login, Anda bisa menampilkan link “Edit Post” yang mengarah langsung ke halaman edit di area admin.

Tambahkan di single.php, di bawah judul atau di akhir artikel:

<?php
// single.php
// Pastikan session sudah dimulai jika belum (misalnya di header.php global)
if (session_status() == PHP_SESSION_NONE) {
    session_start();
}

// ... (setelah tag </article> atau di tempat yang sesuai) ...
if (isset($_SESSION['user_id']) && isset($post) && $post !== null): // Cek jika admin login dan post ada
    // Anda bisa menambahkan pengecekan peran juga jika perlu
    // if ($_SESSION['role'] === 'admin' || ($_SESSION['role'] === 'editor' && $_SESSION['user_id'] == $post['author_id']))
?>
    <div class="admin-edit-link" style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; text-align:right;">
        <a href="<?php echo site_url('admin/edit_post.php?id=' . $post['id']); ?>" class="btn btn-edit-frontend">Edit Artikel Ini (Admin)</a>
    </div>
<?php endif; ?>

<!-- Tambahkan CSS untuk .btn-edit-frontend jika perlu -->

Pastikan site_url() tersedia (dari includes/header.php atau includes/functions.php).

3. Pesan “Tidak Ada Hasil” yang Lebih Informatif: Di halaman index.php atau category.php, jika tidak ada artikel, pesannya bisa lebih spesifik. Ini sudah kita lakukan sebagian.

4. Favicon: Tambahkan favicon untuk situs Anda. Buat file favicon.ico (atau .png) dan letakkan di root proyek. Tambahkan link di includes/header.php:

<link rel="icon" href="<?php echo site_url('favicon.ico'); ?>" type="image/x-icon">

5. Optimasi Query Database (Lanjutan): Untuk situs yang lebih besar, perhatikan query Anda. Gunakan EXPLAIN di SQL untuk menganalisis performa query. Indexing pada kolom yang sering digunakan untuk WHERE, JOIN, atau ORDER BY (seperti slug, status, category_id, author_id, created_at) sangat penting. Sebagian besar sudah kita lakukan dengan PRIMARY KEY dan UNIQUE yang otomatis membuat index.

6. Struktur URL yang Lebih Baik (URL Rewriting - Lanjutan): Saat ini URL kita seperti single.php?slug=nama-artikel. Dengan URL rewriting (menggunakan .htaccess di Apache atau konfigurasi server lain), kita bisa membuatnya lebih cantik seperti artikel/nama-artikel. Ini adalah topik lanjutan.

Bagian C: Kesimpulan Seri Tutorial Dasar CMS PHP

Selamat! Anda telah berhasil menyelesaikan seri tutorial dasar membangun CMS dari nol menggunakan PHP dan MySQL. Ini adalah pencapaian yang signifikan dan memberikan Anda fondasi yang kuat dalam pengembangan web sisi server.

Mari kita rangkum apa saja yang telah kita pelajari dan bangun:

  1. Dasar-dasar Frontend (Part 1):
    • Menampilkan daftar artikel dan detail artikel secara dinamis dari database.
    • Struktur HTML reusable dengan header dan footer.
    • Koneksi ke database MySQL menggunakan mysqli.
  2. Sistem Admin & Keamanan Dasar (Part 2):
    • Membuat halaman login administrator.
    • Menggunakan sesi PHP untuk autentikasi.
    • Implementasi hashing password (password_hash dan password_verify) untuk keamanan kredensial.
    • Membangun dashboard admin dasar dan mekanisme logout.
    • Melindungi halaman admin dari akses tidak sah.
  3. Manajemen Artikel - CRUD (Part 3):
    • Membuat fungsionalitas penuh untuk menambah, membaca (daftar), mengedit, dan menghapus artikel.
    • Penanganan formulir dengan metode POST.
    • Validasi input dasar dan pembuatan slug otomatis.
    • Penggunaan prepared statements untuk interaksi database yang aman.
    • Pesan notifikasi (flash messages) untuk umpan balik pengguna.
  4. Manajemen Kategori (Part 4):
    • Membuat CRUD untuk kategori artikel.
    • Mengintegrasikan kategori dengan sistem artikel (foreign key).
    • Menampilkan kategori di frontend dan membuat halaman arsip kategori.
  5. Manajemen Pengguna & Peran (Part 5):
    • Membuat CRUD untuk pengguna (hanya untuk admin).
    • Mengimplementasikan sistem peran dasar (admin, editor).
    • Membatasi akses fitur berdasarkan peran.
    • Mengaitkan artikel dengan penulisnya.
  6. Fitur Tambahan (Part 6 & 7):
    • Implementasi upload gambar unggulan untuk artikel dengan validasi dasar.
    • Menerapkan pagination untuk daftar artikel di frontend dan admin.
    • Mengintegrasikan editor WYSIWYG (TinyMCE) untuk pengalaman menulis konten yang lebih baik.

Keterampilan Utama yang Terasah:

  • PHP Sisi Server: Logika aplikasi, penanganan form, interaksi database, manajemen sesi.
  • MySQL: Desain skema database, query SQL (SELECT, INSERT, UPDATE, DELETE, JOIN).
  • HTML & CSS: Struktur dan presentasi halaman web.
  • JavaScript (Dasar): Untuk konfirmasi dan inisialisasi editor WYSIWYG.
  • Keamanan Web Dasar: Sanitasi input, htmlspecialchars, prepared statements, hashing password, perlindungan halaman.
  • Struktur Proyek & Modularitas: Membagi kode menjadi file-file yang logis.

Langkah Selanjutnya Setelah Menyelesaikan Seri Ini

Perjalanan belajar Anda tidak berhenti di sini. CMS yang kita bangun adalah dasar yang baik, tetapi ada banyak area untuk dikembangkan lebih lanjut dan dipelajari:

  1. Fitur CMS Lanjutan:
    • Sistem Komentar: Memungkinkan interaksi pengunjung.
    • Fitur Pencarian: Untuk frontend dan mungkin backend.
    • Tagging Artikel: Sistem tagging selain kategori.
    • Menu Builder Dinamis: Mengelola navigasi situs dari admin.
    • Pengaturan Situs: Mengelola judul situs, deskripsi, item per halaman, dll., dari admin.
    • Optimasi SEO: URL rewriting lebih lanjut, sitemap, meta tags dinamis.
    • Multi-bahasa.
  2. Keamanan yang Lebih Mendalam:
    • Perlindungan XSS Komprehensif: Menggunakan library seperti HTML Purifier untuk konten yang diinput pengguna.
    • Perlindungan CSRF (Cross-Site Request Forgery): Menggunakan token.
    • Rate Limiting: Mencegah brute-force pada login.
    • Validasi Input yang Lebih Ketat.
    • HTTPS.
  3. Pengembangan Frontend Modern:
    • Belajar JavaScript lebih lanjut (ES6+).
    • Mempelajari framework JavaScript seperti React, Vue, atau Angular untuk membangun antarmuka pengguna yang lebih interaktif dan kompleks. Anda bisa menggunakan CMS PHP ini sebagai backend (API).
  4. PHP Modern & Framework PHP:
    • Mempelajari OOP (Object-Oriented Programming) di PHP secara mendalam.
    • Mencoba framework PHP seperti Laravel atau Symfony. Framework ini menyediakan banyak alat, struktur, dan praktik terbaik yang mempercepat pengembangan dan meningkatkan kualitas kode.
  5. Manajemen Database Lanjutan:
    • Optimasi query, indexing.
    • Transaksi database.
    • Backup dan restore.
  6. Deployment:
    • Mempelajari cara mendeploy aplikasi PHP ke server hosting (shared hosting, VPS).
    • Penggunaan Git untuk version control.
  7. Testing:
    • Menulis unit test dan integration test untuk kode PHP Anda.

Proyek Selanjutnya yang Bisa Anda Coba:

  • Mengembangkan CMS ini lebih lanjut dengan fitur-fitur di atas.
  • Membangun aplikasi web lain, seperti toko online sederhana, forum, atau aplikasi booking.

Terima kasih telah mengikuti seri tutorial ini! Saya harap Anda mendapatkan banyak pengetahuan dan pengalaman berharga. Ingatlah bahwa kunci untuk menjadi developer yang baik adalah terus belajar, berlatih, dan membangun proyek.

Jangan ragu untuk kembali ke bagian-bagian sebelumnya jika ada konsep yang perlu di-review. Selamat melanjutkan perjalanan coding Anda!

Tutorial Terkait