Days
Hours
Minutes
Seconds
Tentu, ini adalah artikel mengenai cara membuat form posting artikel dengan CKEditor.
Dalam membangun sebuah blog atau sistem manajemen konten (CMS), formulir untuk membuat atau mengedit artikel adalah komponen yang sangat vital. Menggunakan textarea biasa untuk konten artikel akan membatasi pengguna dalam hal format teks, seperti membuat teks tebal, miring, menambahkan daftar, atau menyisipkan gambar.
Di sinilah CKEditor berperan. CKEditor adalah editor WYSIWYG (What You See Is What You Get) yang memungkinkan pengguna mengedit teks dengan antarmuka yang kaya fitur, mirip dengan pengolah kata. Tutorial ini akan memandu Anda membuat form posting artikel yang terintegrasi dengan CKEditor dan memproses datanya menggunakan PHP.
Langkah pertama adalah mendapatkan file CKEditor. Anda dapat mengunduh versi terbaru dari situs web resminya. Untuk kemudahan, kita akan menggunakan Classic Editor dari CKEditor 5.
ckeditor.Struktur proyek Anda mungkin akan terlihat seperti ini:
proyek_anda/
├── ckeditor/
│ ├── build/
│ │ ├── ckeditor.js
│ │ ├── ... (file lainnya)
├── form_artikel.php
Sekarang, mari kita buat formulir HTML sederhana. Di dalam form ini, kita akan membuat satu input untuk judul dan satu textarea untuk konten artikel. textarea inilah yang akan kita ubah menjadi CKEditor.
Buat file baru bernama form_artikel.php dan tambahkan kode berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Posting Artikel</title>
</head>
<body>
<h2>Buat Artikel Baru</h2>
<form action="proses_artikel.php" method="post">
<label for="judul">Judul Artikel:</label><br>
<input type="text" id="judul" name="judul" style="width: 100%; padding: 8px;"><br><br>
<label for="editor">Konten Artikel:</label><br>
<textarea name="konten" id="editor"></textarea><br><br>
<input type="submit" value="Posting Artikel">
</form>
</body>
</html>
Perhatikan bahwa textarea kita memiliki atribut id="editor" dan name="konten". id akan kita gunakan untuk inisialisasi CKEditor, sementara name akan digunakan oleh PHP untuk mengambil datanya.
Ini adalah bagian paling penting dari integrasi. Kita perlu menyisipkan file JavaScript CKEditor dan menulis sedikit kode untuk mengubah textarea menjadi editor.
Tambahkan kode JavaScript berikut di bagian bawah <body> di file form_artikel.php.
<script src="ckeditor/ckeditor.js"></script>
<script>
// Inisialisasi CKEditor pada textarea dengan id="editor"
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
Sekarang, jika Anda membuka file form_artikel.php di browser, textarea akan berubah menjadi editor teks yang kaya fitur!
Setelah pengguna mengisi form dan menekan tombol “Posting Artikel”, data akan dikirim ke file proses_artikel.php (sesuai dengan atribut action di form).
Buat file baru bernama proses_artikel.php dan tambahkan kode PHP berikut.
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Ambil data dari form
$judul = $_POST['judul'];
$konten = $_POST['konten'];
// Menampilkan data yang diterima (untuk contoh)
echo "<h1>Judul: " . htmlspecialchars($judul) . "</h1>";
echo "<h3>Konten Artikel:</h3>";
echo "<hr>";
echo $konten; // Output konten, perhatikan tanpa htmlspecialchars
// PERINGATAN PENTING:
// Menggunakan htmlspecialchars() pada konten CKEditor akan menghilangkan semua format!
// Untuk tujuan keamanan (mencegah XSS), Anda harus menggunakan library sanitasi yang lebih canggih
// seperti HTML Purifier sebelum menyimpan konten ke database.
// Kode di atas hanya untuk demonstrasi, JANGAN gunakan di lingkungan produksi
// tanpa sanitasi yang tepat.
// Contoh kode untuk menyimpan ke database (belum lengkap)
// $sql = "INSERT INTO artikel (judul, konten) VALUES (?, ?)";
// $stmt = $koneksi->prepare($sql);
// $stmt->execute([$judul, $konten]);
// echo "Artikel berhasil disimpan!";
} else {
echo "Metode pengiriman data tidak valid.";
}
?>
Penting: Data yang dihasilkan oleh CKEditor adalah kode HTML. Jika Anda ingin menyimpannya ke database, Anda harus berhati-hati. Sanitasi adalah hal yang wajib dilakukan untuk mencegah serangan Cross-Site Scripting (XSS). Menggunakan echo $konten secara langsung dalam produksi sangat tidak disarankan. Anda harus menggunakan pustaka seperti HTML Purifier untuk membersihkan kode HTML dari skrip berbahaya.
Dengan mengikuti langkah-langkah di atas, Anda telah berhasil membuat form posting artikel yang modern dan mudah digunakan dengan CKEditor. Ini adalah peningkatan signifikan dari textarea biasa dan memberikan pengalaman yang jauh lebih baik bagi pengguna Anda. Proyek ini adalah fondasi yang bagus untuk membangun sistem blog atau CMS yang lebih besar dan fungsional. Langkah selanjutnya adalah menghubungkan proses ini dengan database untuk menyimpan dan menampilkan artikel yang telah dibuat.
Dipercaya oleh lebih dari 200++ client untuk menyelesaikan proyeknya dengan total 250++ proyek dari berbagai jenis proyek
