Membuat Fasilitas Readmore dengan TInyMCE

Ukuran: px

Mulai penontonan dengan halaman:

Download "Membuat Fasilitas Readmore dengan TInyMCE"

Adi Santoso
7 tahun lalu
Tontonan:

2 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

3 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 // koneksi ke mysql $dbhost = "localhost"; $dbuser = "root"; $dbpass = ""; $dbname = "artikel"; mysql_connect($dbhost, $dbuser, $dbpass); mysql_select_db($dbname); 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 <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled Document</title> <script src="tinymce/js/tinymce/tinymce.min.js"></script> <script> tinymce.init({selector:'textarea',plugins: "pagebreak", pagebreak_separator: ""}); </script> </head> <body> <form method="post" action="proses.php"> <p>judul <input type="text" name="judul" id="judul" /> </p> <p>isi <textarea name="isi" cols="45" rows="5"></textarea> </p> <p>

4 <input type="submit" name="button" id="button" value="submit" /> </p> </form> </body> </html> 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 include "koneksi.php";

5 $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 <a href='daftar.php'>lihat daftar artikel</a> atau <a href='form.php'>input lagi</a>";} 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 // lakukan koneksi ke mysql include "koneksi.php"; <h1>daftar Artikel</h1> // query untuk membaca data artikel yg diurutkan berdasarkan id artikel $query = "SELECT * FROM artikel ORDER BY id"; $hasil = mysql_query($query); while ($data = mysql_fetch_array($hasil)) { // tampilkan title artikel echo "<h3>".$data['judul']."</h3>"; // tampilkan tanggal artikel echo "<p><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 "<p>".$excerpt."</p>"; // link untuk baca selengkapnya. Gunakan id artikel sebagai parameternya

6 echo "<p><a href='detail.php?id=".$data['id']."'>baca selengkapnya...</a></p>"; echo "<hr>"; } 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 // lakukan koneksi ke mysql include "koneksi.php"; // baca id artikel dari parameter link 'Baca selengkapnya...' dari index.php $id = $_GET['id']; // baca data artikel berdasarkan id nya $query = "SELECT * FROM artikel WHERE id = '$id'"; $hasil = mysql_query($query); $data = mysql_fetch_array($hasil); // tampilkan title artikel echo "<h3>".$data['judul']."</h3>"; // tampilkan tanggal pub, author, dan jumlah views echo "<p><small>tanggal publikasi: ".$data['tgl']; // tampilkan isi artikel echo "<p>".$data['isi']."</p>"; Nah, langsung uji coba nih. Lihat saya membuat pagebreak setelah kata Proin

7 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. ^_^

dokumen-dokumen yang mirip

Membuat Sistem Pertemanan Sederhana

Membuat Sistem Pertemanan Sederhana Oleh: Dadan Pada artikel kali ini saya akan menunkukan kepada Anda cara membuat sistem pertemanan seperti pada website jejaring sosial. Contohnya yah seperti pada website