Membuat Akomodasi Readmore Dengan Tinymce

21 views

Setelah saya tertidur usang selama bertahun-tahun, alhasil saya menemukan ide untuk menciptakan artikel ini. Saya mendapat wahyu lewat mimpi untuk memberikan ilmu ini kepada Anda semua. Ketika terbangun, saya pribadi menarikan jari saya diatas keyboard. Namun sayang sekali saya terbangun dikala jam 3 sore. Dikit lagi padahal mau buka puasa. 🙁

Yah sudahlah, lupakan paragraf tadi. Kalau Anda hingga membaca paragraf di atas mungkin sudah nasib Anda. (eror juga nih penulis)

Warga andal koding sekalian, niscaya bila Anda pernah memakai WordPress ataupun blogger niscaya di editor artikel terdapat kemudahan read more atau page break. Fasilitas itu di gunakan untuk memotong cupikan artikel  kita. Nantinya bila pengunjung ingin melihat detail artikel mereka harus mengklik link atau tombol readmore. Biasanya di editor kita tinggal meletakan kursor dimana bab ingin di potong, kemudian 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 berguru sama-sama, mencoba dan menghayati gimana sih caranya menciptakan fitur readmore sekelas wordpress. Bukan tidak mungkin, kita malah sanggup menciptakan kemudahan readmore yang lebih canggih dari website jagokoding.com. Gimana ga canggih? alasannya 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 hingga di potong juga yah… >_<

Oke deh, ngawur nih jadinya. Langsung aja ke pembahasan.

Soal potong memotong nih kita sudah tahu bila fungsi explode() ialah 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 sanggup memadukan setiap fungsi pemograman.

Pertama-tama supaya tidak repot silahkan import dulu databasenya. Saya sudah menyediakan file sqlnya jadi Anda tinggal mengimport saja memakai php myadmin. Nanti bila sudah di import struktur databasenya akan menjadi menyerupai ini

Monggo di import, ini orisinil produk luar loh (kira import barang) 😀

Terus kita buat dulu file koneksi.php sebagai berikut

<?php// koneksi ke mysql$dbHost = "localhost";$dbUser = "root";$dbPass = "";$dbName = "artikel";mysql_connect($dbHost, $dbUser, $dbPass);mysql_select_db($dbName);?>

Selajutnya kita akan menciptakan form untuk memasukan data artikel. Disini kita juga akan menyertakan isyarat javascript dari tinyMCE. Buat file gres dengan nama form.php. Berikut ialah source kodenya

<html xmlns="http://www.w3.org/1999/xhtml"><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: "<!--more-->"});</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><input type="submit" name="button" id="button" value="Submit" />  </p></form></body></html>

Perhatikan pada baris 8 dan 9 kita melaksanakan inialisasi untuk memuat plugin pagebreak pada TinyMCE, nah pada baris 9 bab pagebreak_separator saya memakai <!–more–> sebagai isyarat pemisah. Kaprikornus bila nanti kita klik pagbreak pada editor, secara otomatis akan menghasilkan <!–more–> pada artikel. isyarat pemisah ini sebetulnya sanggup Anda definisikan sendiri, mau <!–selengkapnya–>,<!–readmore–>, atau <!–potong–> juga boleh. Yang penting isyarat pemisah harus dalam format komentar html. Dalam pola ini saya memakai <!–more–> saja.

Kode diatas akan menghasilkan tampilan menyerupai ini

 

Fitur Page breaknya itu berada di sajian insert

Jadi bila mau potong tinggal klik insert > pagebreak. Kita bikin tampilan formnya sederhana aja dulu, yang penting Anda sanggup nangkap inti dari maksud tutorial ini. Kalau sudah mengerti silahkan kembangkan sendiri yah.

Oke lanjut ke langkah berikutnya, sehabis menciptakan form untuk input data artikelnya, kita akan menciptakan file proses.php yang berkhasiat untuk memasukan data artikel ke tabel artikelnya. Silahkan buat file dengan nama proses.php. Berikut ialah source kodenya

 

<?phpinclude "koneksi.php";$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 bila 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 ialah source kodenya

<?php// lakukan koneksi ke mysqlinclude "koneksi.php";?><h1>Daftar Artikel</h1><?php// query untuk membaca data artikel yg diurutkan menurut 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 menurut string <!--more-->  $pecah = explode("<!--more-->", $data['isi']);  // excerpt ialah 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  echo "<p><a href='detail.php?id=".$data['id']."'>Baca selengkapnya...</a></p>";  echo "<hr>";}?>

 

Nah perhatikan isyarat baris 21, menyerupai yang saya bilang tadi kita memakai fungsi explode dari php sebagai eksekutor utama untuk memotong. Karena di file form.php tadi kita mendefiniskan <!–more–>, maka otomatis di situ juga kita memakai <!–more–> sebagai pemisah. Lalu datanya kita tampung pada variabel $excerpt, variabel $excerpt berisi bab awal dari artikel.

Terakhir kita buat file detail.php untuk menampilkan detail artikelnya. Berikut source kodenya

<?php// lakukan koneksi ke mysqlinclude "koneksi.php";// baca id artikel dari parameter link 'Baca selengkapnya...' dari index.php$id = $_GET['id'];// baca data artikel menurut id nya$query = "SELECT * FROM artikel WHERE id = '$id'";$hasil = mysql_query($query);$data  = mysql_fetch_array($hasil);// tampilkan title artikelecho "<h3>".$data['judul']."</h3>";// tampilkan tanggal pub, author, dan jumlah viewsecho "<p><small>Tanggal publikasi: ".$data['tgl'];// tampilkan isi artikelecho "<p>".$data['isi']."</p>";?>

 

Nah, pribadi uji coba nih. Lihat saya menciptakan pagebreak sehabis kata  Proin

 

Hasilnya pada daftar artikel akan terpotong juga sehabis kata proin

 

Mantap kan? Nah itulah final dari cerita potong-memotong. 

 

 

 

 

 

 

 

 

 

Author: 
    author
    No related post!