Membuat Fasilitas Readmore dengan TInyMCE Oleh: Dadan

Warga jago koding sekalian, pasti kalau Anda pernah menggunakan Wordpress ataupun blogger pasti di editor artikel terdapat fasilitas read more atau page break. Fasilitas itu di gunakan untuk memotong cupikan artikel kita. Nantinya kalau pengunjung ingin melihat detail artikel mereka harus mengklik link atau tombol readmore. Biasanya di editor kita tinggal meletakan kursor dimana bagian ingin di potong, lalu tinggal klik deh tombol readmore di editor. Langsung secara otomatis artikel kita di potong.

Setelah saya tertidur lama selama bertahun-tahun, akhirnya saya menemukan inspirasi untuk membuat artikel ini. Saya mendapatkan wahyu lewat mimpi untuk menyampaikan ilmu ini kepada Anda semua. Ketika terbangun, saya langsung menarikan jari saya diatas keyboard. Namun sayang sekali saya terbangun ketika jam 3 sore. Dikit lagi padahal mau buka puasa. :-( Yah sudahlah, lupakan paragraf tadi. Kalau Anda sampai membaca paragraf di atas mungkin sudah nasib Anda. (eror juga nih penulis) Warga jago koding sekalian, pasti kalau Anda pernah menggunakan Wordpress ataupun blogger pasti di editor artikel terdapat fasilitas read more atau page break. Fasilitas itu di gunakan untuk memotong cupikan artikel kita. Nantinya kalau pengunjung ingin melihat detail artikel mereka harus mengklik link atau tombol readmore. Biasanya di editor kita tinggal meletakan kursor dimana bagian ingin di potong, lalu tinggal klik deh tombol readmore di editor. Langsung secara otomatis artikel kita di potong. Nah, itulah yang akan saya tunjukin kepada Anda semua. Kita akan belajar sama-sama, mencoba dan menghayati gimana sih caranya membuat fitur readmore sekelas wordpress. Bukan tidak mungkin, kita malah bisa membuat fasilitas readmore yang lebih canggih dari website jagokoding.com. Gimana ga canggih? karena kita ga perlu lagi ngetik dua kali untuk paragraf cupikannya. Langsung potong aja. (potong ndas mu, nih penulis nyinggung jagokoding.com, ane bilangin om cecep loh) Waduh, ampun nih mas cecep. THR saya jangan sampai di potong juga yah... >_< Oke deh, ngawur nih jadinya. Langsung aja ke pembahasan. Soal potong memotong nih kita sudah tahu kalau fungsi explode() adalah jagonya. Nah konsepnya kita akan kolaborasikan fitur plugin dari TinyMCE dengan fungsi explode() dari php. (kayak artis aja pake kolaborasi). Iya dong, itulah harmoni sebuah pemograman. Programer itukan seniman yang harus bisa memadukan setiap fungsi pemograman. Pertama-tama biar tidak repot silahkan import dulu databasenya. Saya sudah menyediakan file

sqlnya jadi Anda tinggal mengimport saja menggunakan php myadmin. Nanti kalau sudah di import struktur databasenya akan menjadi seperti ini

Monggo di import, ini asli produk luar loh (kira import barang) :-D Terus kita buat dulu file koneksi.php sebagai berikut Selajutnya kita akan membuat form untuk memasukan data artikel. Disini kita juga akan menyertakan kode javascript dari tinyMCE. Buat file baru dengan nama form.php. Berikut adalah source kodenya <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="tinymce/js/tinymce/tinymce.min.js"> <script> tinymce.init({selector:'textarea',plugins: "pagebreak", pagebreak_separator: ""});

judul

isi

Perhatikan pada baris 8 dan 9 kita melakukan inialisasi untuk memuat plugin pagebreak pada TinyMCE, nah pada baris 9 bagian pagebreak_separator saya menggunakan sebagai kode pemisah. Jadi kalau nanti kita klik pagbreak pada editor, secara otomatis akan menghasilkan pada artikel. kode pemisah ini sebenarnya bisa Anda definisikan sendiri, mau ,, atau juga boleh. Yang penting kode pemisah harus dalam format komentar html. Dalam contoh ini saya menggunakan saja. Kode diatas akan menghasilkan tampilan seperti ini

Fitur Page breaknya itu berada di menu insert

Jadi kalau mau potong tinggal klik insert > pagebreak. Kita bikin tampilan formnya sederhana aja dulu, yang penting Anda bisa nangkap inti dari maksud tutorial ini. Kalau sudah mengerti silahkan kembangkan sendiri yah. Oke lanjut ke langkah berikutnya, setelah membuat form untuk input data artikelnya, kita akan membuat file proses.php yang berguna untuk memasukan data artikel ke tabel artikelnya. Silahkan buat file dengan nama proses.php. Berikut adalah source kodenya


$judul=$_POST['judul']; $isi=$_POST['isi']; $tgl=date("Y-m-d"); $sql=mysql_query("INSERT INTO artikel (judul,isi,tgl) VALUES ('$judul','$isi','$tgl')"); if($sql){echo "data berhasil masuk lihat daftar artikel atau input lagi";} else {echo"data gagal masuk";}

?>

Kode diatas berfungsi untuk memasukan data artikel lewat perintah mysql_query(). Lalu kalau berhasil akan memunculkan link apakah mau lihat daftar artikel atau input artikel lagi. Selanjutnya kita buat file daftar.php yang berfungsi menampilkan seluruh artikel yang ada di database. Berikut adalah source kodenya

Daftar Artikel

".$data['judul'].""; // tampilkan tanggal artikel echo "

<small>Tanggal publikasi: ".$data['tgl']; // lakukan exploding terhadap isi artikel berdasarkan string $pecah = explode("", $data['isi']); // excerpt adalah elemen pertama (index ke-0) dari array hasil exploding $excerpt = $pecah[0]; // tampilkan excerpt echo "

".$excerpt."

"; // link untuk baca selengkapnya. Gunakan id artikel sebagai parameternya

echo "

Baca selengkapnya...

"; echo "

---

"; } ?>

Nah perhatikan kode baris 21, seperti yang saya bilang tadi kita menggunakan fungsi explode dari php sebagai eksekutor utama untuk memotong. Karena di file form.php tadi kita mendefiniskan , maka otomatis di situ juga kita menggunakan sebagai pemisah. Lalu datanya kita tampung pada variabel $excerpt, variabel $excerpt berisi bagian awal dari artikel. Terakhir kita buat file detail.php untuk menampilkan detail artikelnya. Berikut source kodenya ".$data['judul'].""; // tampilkan tanggal pub, author, dan jumlah views echo "

<small>Tanggal publikasi: ".$data['tgl']; // tampilkan isi artikel echo "

".$data['isi']."

"; ?>

Nah, langsung uji coba nih. Lihat saya membuat pagebreak setelah kata Proin

Hasilnya pada daftar artikel akan terpotong juga setelah kata proin

Mantap kan? Nah itulah akhir dari kisah potong-memotong.

Tentang Penulis Dadan Saya adalah pria biasa saja yang tumbuh semakin besar di lingkungan yang serba biasa, Semoga kehadiran saya disini bisa membantu Anda. ^_^