membuat script readmore dalam paging dengan class paging cnnnav

Berkenaan dengan pertanyaan pembaca pada halaman kontak kami, maka pada pembahasan kali ini kami akan membahas kembali pengembangan tentang script paging menggunakan class cnnNav yang berkaitan dengan headline berita yang biasanya hanya ditampilkan sebagian saja pada halaman web, dan tentunya dengan link Readmore / Baca selengkapnya

Seringkali kita melihat website yang menampilkan sebagian isi berita dengan link readmore pada masing - masing headline tersebut. Bagi pemula dalam pemrograman php mungkin berfikir bagaimana cara membuatnya ?

Sebelum kita melangkah lebih jauh pada proses pembuatannya, kita pahami dahulu konsep yang digunakan untuk memecah berita tersebut dan mengambil sebagian datanya :
Untuk melakukan pemecahan data seperti isi berita, ada dua cara yang mungkin kita lakukan, yaitu :

1. Mengambil isi dari huruf pertama sampai huruf ke -xx

Cara ini biasanya digunakan dengan menggunakan fungsi substr(), dimana kita akan mengambil tulisan dari huruf ke 0 sampai dengan huruf yang kita tentukan. Contoh : Kita mempunyai berita yang isi sebagai berikut :

Bagi kalangan pemula dalam bahasa pemrograman, ketahuilah bahwasannya dalam mempelajari sebuah bahasa pemrograman akan memerlukan suatu proses. Tentunya dalam hal ini sangat diperlukan kesabaran, ketelitian dan juga kadang kita perlu biaya untuk belajar , kursus dan juga membeli buku - buku pemrograman. Berikut ini kami sajikan tips dan trik dalam kita mempelajari bahasa pemrograman
dst sampai selesai beritanya

Pada contoh diatas, jika kita bisa mengambil huruf ke 0 sampai huruf ke 200 kemudian hasilnya kita cetak sebagai headline dengan perintah :

1 2 3 4

//contoh berita $berita   = 'kata - kata yang sangat panjang bla bla blas ~'; //ambil hanya 200 huruf untuk headline $headline = substr($berita,0,200);

Pada contoh diatas, kita sudah dapat menampilkan headline yang memuat 200 huruf pada masing - masing berita dalam website kita

TAPI, JANGAN GUNAKAN CARA DI ATAS !!! ;D
Alasannya apa ???
Cara diatas dapat menimbulkan permasalahan jika dalam proses pemotongan tersebut memuat sebuah TAG HTML yang belum tertutup. Contoh dalam headline tersebut memuat sebuah TAG :
<a href="">klik di sini
akan tetapi TAG </a>nya tidak termasuk dalam headline ;D

Cara diatas kami sampaikan hanya sekedar untuk menambah pemahaman tentang pembuatan headline berita

2. Menggunakan pemecahan data dengan struktur tertentu

Cara inilah yang sekarang banyak digunakan, dimana pada masing - masing berita kita tentukan sampai bagian mana berita yang akan kita tampilkan. Cara memecahnya yaitu dengan memasukkan sebuah struktur text tertentu yang besifat unik pada berita tersebut kemudian kita gunakan perintah explode() untuk mengambil bagian pertama.

Cobalah download contoh script dibawah dan lihat masing - masing berita pada tabel posting terdapat TAG yang unik, yaitu :

1	<div style="page-break-after: always;"><span style="display: none;"> </span></div>

Struktur diatas merupakan kode yang dihasilkan dalam WYSIWYG CkEditor. Jika kita tidak menggunakan editor atau masih menggunakan TEXTAREA biasa, kita masukkan kode unik tertentu yang nantinya akan kita gunakan untuk memcah berita berdasarkan kode struktur unik tersebut, misalnya :

1	===pecah===

Masing - masing berita dalam database kita tambahkan 1 tulisan tersebut, kemudian kita pecah isinya dengan struktur tersebut dengan perintah :

1 2 3

$berita   = $data_berita_dari_tabel_posting; $pecah    = explode('===pecah===',$berita); $headline = $pecah[0];

Script diatas kita tempatkan pada proses perulangan while dalam pemrosesan query sql.

Setelah memahami konsepnya, selanjutnya kita lihat contoh scriptnya seperti terlihat dibawah ini :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73

<style type="text/css">     #cnnNav{         width:500px;         text-align:right;     }     #headline{         font:normal 12px Tahoma;         display:block;         width:500px;         letter-spacing:0.5px;         margin:0 0 10px 0;         border-bottom:#cfd7f0 1px solid;     }     #more-data{         text-align:right;     }     #more-data a,#cnnNav a{         text-decoration:none;         color:#6c7eb7;     }     h3.judul{         font:bold 14px Tahoma;         display:block;         margin:5px 0 5px 0;         padding:0 5px 0 10px;         line-height:25px;         border-bottom:#cfd7f0 1px solid;         background-color:#6c7eb7;         color:#ffffff;     }     p.content_by{         font:normal 10px Tahoma;         text-align:right;         color:#666666;     } </style> <?php include_once("config.php"); //panggil script koneksi include_once("ClassPaging.php"); //Panggil classPaging   //buat batas berita yang akan ditampilkan dalam setiap halaman $limit = 5;   //buat query $query = new CnnNav($limit,'posting','*','PID');   //jalankan querynya $result = $query ->getResult(); //perintah diatas sama dengan perintah mysql_query ?> <div id="cnnNav"><?php $query->printNav(); ?></div> <?PHP //membuat penomoran posting $nomor = ($limit * $_GET['offset'])+1; while($data = mysql_fetch_array($result)){     $id       = $data['PID'];     $judul    = $data['Judul'];     $isi      = $data['Isi'];     $pecah    = explode('<div style="page-break-after: always;">',$isi);     $headline = $pecah[0];     $penulis  = $data['Penulis'];     $tgl      = $data['PostDate'];     echo '<div id="headline">             <h3 class="judul">'.$judul.'</h3>             <div id="headline-content">                 <p class="content_by">Oleh » '.$penulis.' » '.$tgl.'</p>                 '.$headline.'             </div>             <div id="more-data"><a href="detail.php?pid='.$id.'">Readmore</a></div>             <div id="clear" style="display:block;height:1px;clear:both;"> </div>           </div>'; } ?>

Script diatas tidak berdiri sendiri, akan tetapi memerlukan script lain yaitu class paging, config dan script detail untuk menampilkan berita secara keseluruhan. Sekian dulu pembahasan kita kali ini, jangan lupa klik LIKE atau tuliskan komentar / pertanyaan anda jika ada beberapa hal yang dimengerti dari pembahasan diatas.

selamat mencoba dan Salam kreatif