Jumat, 11 Mei 2012

Script Excerpt (Cuplikan) Artikel (ReadMore) Ala WordPress

Kalau Anda WordPress maniac, tentu tidak asing dengan istilah ‘excerpt’. Excerpt adalah istilah yang maksudnya kurang lebih sama dengan ‘cuplikan artikel’ dalam bahasa Indonesia. Contoh excerpt adalah seperti di halaman depan blog ini. Di situ ada daftar artikel, yang di dalamnya ada judul artikel dan cuplikan artikelnya. Untuk melihat detail artikel, cukup mengklik judul artikel atau kata-kata ‘Baca selengkapnya..’ atau kalo di blog lain seringnya berbunyi ‘Read more…’.
Nah… di sini saya akan membahas tuntas mengenai cara membuat sendiri excerpt tersebut dengan PHP dan MySQL. Ide pembuatannya kita contoh saja idenya WordPress. Mudah-mudahan hal ini bisa bermanfaat bagi Anda yang ingin membuat atau mengembangkan CMS buatan sendiri.

Ide membuat excerpt di WordPress adalah penulis artikel diminta menyisipkan semacam tag komentar yang berbunyi
. Bagian yang merupakan excerpt adalah paragraf sebelum tag tersebut. Berikut ini adalah contohnya.

1.<p>ini adalah isi artikel 1. ini adalah isi artikel 1. ini adalah isi artikel 1. ini adalah isi artikel 1. ini adalah isi artikel 1. ini adalah isi artikel 1. ini adalah isi artikel 1. ini adalah isi artikel 1. p>
2.
3.<p>ini adalah isi artikel 1. ini adalah isi artikel 1. ini adalah isi artikel 1. ini adalah isi artikel 1. ini adalah isi artikel 1. ini adalah isi artikel 1. ini adalah isi artikel 1. ini adalah isi artikel 1. p>
4.<p>ini adalah isi artikel 1. ini adalah isi artikel 1. ini adalah isi artikel 1. ini adalah isi artikel 1. ini adalah isi artikel 1. ini adalah isi artikel 1. ini adalah isi artikel 1. ini adalah isi artikel 1. p>
Dalam contoh di atas, bagian yang dianggap excerpt adalah paragraf pertama (sebelum tag )
Cara yang dipakai WordPress untuk membuat excerpt ini lebih simple dibandingkan jika kita membuat komponen input sendiri untuk mengisi excerpt ketika memposting artikel melalui form. Beberapa CMS yang dibuat oleh rekan-rekan saya, maupun mahasiswa seringnya menggunakan form input sendiri ketika membuat excerpt ini. Apalagi dibuat field sendiri dalam tabel database untuk menyimpan data excerpt. Tentu saja ini pemborosan ruang dan energi. Dengan konsep ala WordPress ini, membuat excerpt tidak perlu menulis 2 kali tapi cukup sekali saja karena excerpt terletak dalam isi postingan (artikel) juga. Jadi cukup menandai saja bagian excerptnya dengan suatu tag tertentu.
Selain itu ide excerpt yang digunakan WordPress ini cukup luar biasa, karena cukup menandai suatu postingan namun tanda ini tidak akan kelihatan ketika tampil di browser. Hal ini dikarenakan tanda itu berupa tag komentar di HTML yang secara umum berbentuk . Oleh karena itu, sebenarnya Anda boleh membuat tanda excerpt sendiri selain misalnya atau dll.
OK… sekarang kita fokus lagi ke cara pembuatan script untuk excerptnya. Berikut ini adalah contoh tampilan script excerpt yang nanti akan kita coba buat.
Script Excerpt (Cuplikan) Artikel (ReadMore) Ala WordPress
Gambar di atas adalah tampilan daftar artikel berisi judul, nama penulis (author), tanggal publikasi, jumlah berapa kali dilihat/dibaca oleh pengunjung, dan juga… excerptnya.
Script Excerpt (Cuplikan) Artikel (ReadMore) Ala WordPress
Gambar di atas menampilkan full artikel ketika salah satu artikel diklik ‘Baca Selengkapnya…’.
Untuk membuat script sesuai tampilan di atas, pertama kita siapkan dahulu tabel database untuk menyimpan data artikelnya. Kita misalkan tabelnya berstruktur sbb:

01.CREATE TABLE `artikel` (
02.`idArtikel` int(11) auto_increment,
03.`title` varchar(30),
04.`content` text,
05.`author` varchar(30),
06.`datePub` date,
07.`views` int(11),
08.PRIMARY KEY  (`idArtikel`)
09.);
Selanjutnya berikut ini contoh data artikelnya:
01.INSERT INTO `artikel`
02.VALUES ('1', 'Title Artikel 1', 'ini adalah isi artikel 1. ini adalah isi artikel 1.
03.ini adalah isi artikel 1. ini adalah isi artikel 1.
04.ini adalah isi artikel 1. ini adalah isi artikel 1.
05.ini adalah isi artikel 1. ini adalah isi artikel 1.
06.
07.ini adalah isi artikel 1. ini adalah isi artikel 1. ini adalah isi artikel 1.
08.ini adalah isi artikel 1. ini adalah isi artikel 1. ini adalah isi artikel 1.
09.ini adalah isi artikel 1. ini adalah isi artikel 1.
10.ini adalah isi artikel 1. ini adalah isi artikel 1. ini adalah isi artikel 1.
11.ini adalah isi artikel 1. ini adalah isi artikel 1. ini adalah isi artikel 1.
12.ini adalah isi artikel 1. ini adalah isi artikel 1.
'
, 'Rosihan Ari', '2010-01-20', '0');
01.INSERT INTO `artikel`
02.VALUES ('2', 'Title Artikel 2', 'ini adalah isi artikel 2. ini adalah isi artikel 2.
03.ini adalah isi artikel 2. ini adalah isi artikel 2.
04.ini adalah isi artikel 2. ini adalah isi artikel 2.
05.ini adalah isi artikel 2. ini adalah isi artikel 2.
06.
07.ini adalah isi artikel 2. ini adalah isi artikel 2. ini adalah isi artikel 2.
08.ini adalah isi artikel 2. ini adalah isi artikel 2. ini adalah isi artikel 2.
09.ini adalah isi artikel 2. ini adalah isi artikel 2.
10.ini adalah isi artikel 2. ini adalah isi artikel 2. ini adalah isi artikel 2.
11.ini adalah isi artikel 2. ini adalah isi artikel 2. ini adalah isi artikel 2.
12.ini adalah isi artikel 2. ini adalah isi artikel 2.
'
, 'Rosihan Ari', '2010-01-21', '0');
Dalam membuat scriptnya, mula-mula kita buat dahulu script untuk koneksi ke db mysqlnya.
koneksi.php
01.
02.// koneksi ke mysql
03.$dbHost = "localhost";
04.$dbUser = "...";
05.$dbPass = "...";
06.$dbName = "...";
07.mysql_connect($dbHost, $dbUser, $dbPass);
08.mysql_select_db($dbName);
09.?>
Script koneksi.php tersebut nantinya kita includekan ke semua script yang di dalamnya terdapat query SQL terhadap tabel di MySQL.
Script berikutnya yang kita buat adalah script index.php. Script ini nanti akan menampilkan daftar artikel yang berisi judul, author, tanggal publikasi, dan excerptnya, sekaligus link untuk membaca artikel full nya.
Untuk membuat excerpt nya cukup mudah yaitu idenya hanya dengan memecah string dari isi artikel menggunakan explode() berdasarkan substring nya. Anda bisa lihat penjelasan tentang explode() dan contoh penggunaannya di sini. Kita tahu bahwa hasil explode() berdasarkan karakter atau substring tertentu pada suatu string adalah suatu array. Nah… karena excerpt ini terletak sebelum substring maka, bagian excerpt ini adalah elemen pertama (elemen ke-0) dari array hasil explode().
index.php
01.
02.// lakukan koneksi ke mysql
03.include "koneksi.php";
04.?>
05. 
06.

Daftar Artikel

07. 
08.
09.// query untuk membaca data artikel yg diurutkan berdasarkan id artikel
10.$query = "SELECT * FROM artikel ORDER BY idArtikel";
11.$hasil = mysql_query($query);
12.while ($data = mysql_fetch_array($hasil))
13.{
14.// tampilkan title artikel
15.echo "

".$data['title']."

";
16. 
17.// tampilkan tanggal pub, author dan berapa kali dibaca
18.echo "Tanggal publikasi: ".$data['datePub'].". Penulis: ".$data['author'].". Dibaca: ".$data['views']." kali
";
19. 
20.// lakukan exploding terhadap isi artikel berdasarkan string
21.$pecah = explode("", $data['content']);
22. 
23.// excerpt adalah elemen pertama (index ke-0) dari array hasil exploding
24.$excerpt = $pecah[0];
25. 
26.// tampilkan excerpt
27.echo "".$excerpt."
";
28. 
29.// link untuk baca selengkapnya. Gunakan id artikel sebagai parameternya
31.echo "

";
32.}
33.?>
Selanjutnya kita buat script view.php untuk menampilkan full artikelnya. Di dalam script ini, selain menampilkan full artikel juga terdapat bagian untuk proses update jumlah berapa kali artikel dibaca yaitu bertambah satu dari jumlah sebelumnya.
view.php
01.
02.// lakukan koneksi ke mysql
03.include "koneksi.php";
04. 
05.// baca id artikel dari parameter link 'Baca selengkapnya...' dari index.php
06.$id = $_GET['id'];
07. 
08.// update jumlah views (jumlah views bertambah 1 dari sebelumnya) dari artikel
09.$query = "UPDATE artikel SET views = views + 1 WHERE idArtikel = '$id'";
10.mysql_query($query);
11. 
12.// baca data artikel berdasarkan id nya
13.$query = "SELECT * FROM artikel WHERE idArtikel = '$id'";
14.$hasil = mysql_query($query);
15.$data  = mysql_fetch_array($hasil);
16. 
17.// tampilkan title artikel
18.echo "

".$data['title']."

";
19.// tampilkan tanggal pub, author, dan jumlah views
20.echo "Tanggal publikasi: ".$data['datePub'].". Penulis: ".$data['author'].". Dibaca: ".$data['views']." kali
";
21.// tampilkan isi artikel
22.echo "".$data['content']."
";
23. 
24.?>
OK… mudah bukan cara membuatnya? Semoga ada manfaatnya ya :-)

Artikel Terkait


EmoticonEmoticon