Membuat Cuplikan Artikel (Readmore atau Baca Selengkapnya) dengan PHP

Artikel ini ditulis untuk melengkapi projek pelatihan "Membuat Website Personal" dengan menggunakan bahasa pemrograman PHP dan database MySQL. Dan pada kesempatan ini, sedikit saya akan berbagi dengan kawan-kawan pembaca tentang trik bagaimana kita membuat cuplikan artikel atau read more atau baca selengkapnya, yang sering kita lihat di blogspot, wordpress ataupun website portal (semuanya tentang website, kalau ada post/ artikel, pasti ada baca selengkapnya. hehe). 

Untuk konsepnya, kita akan membuat seperti sebagian besar blog pada umumnya, atau blogspot lebih khususnya. Yuk mari kita mulai pilah-memilah skrip PHP dengan PHPBEJO.
Langkah 1

Kita buka database editor dan buat database. Untuk nama database saya menggunakan nama phpbejo_news. Berikut ini adalah database yang saya buat lengkap dengan field, type data, dan ini dari setiap field yang dibuat.

Untuk gambarnya bisa dilihat berikut ini:

dan untuk full source code database silahkan jalankan script berikut ini:

-- --------------------------------------------------------
-- Host:                         127.0.0.1
-- Server version:               5.5.27 - MySQL Community Server (GPL)
-- Server OS:                    Win32
-- HeidiSQL Version:             8.1.0.4545
-- --------------------------------------------------------

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET NAMES utf8 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;

-- Dumping database structure for phpbejo_news
CREATE DATABASE IF NOT EXISTS `phpbejo_news` /*!40100 DEFAULT CHARACTER SET latin1 */;
USE `phpbejo_news`;


-- Dumping structure for table phpbejo_news.tabel_artikel
CREATE TABLE IF NOT EXISTS `tabel_artikel` (
  `no_id` int(11) NOT NULL AUTO_INCREMENT,
  `tanggal_post` datetime NOT NULL,
  `judul_post` varchar(200) NOT NULL,
  `isi_post` text NOT NULL,
  `author` varchar(50) NOT NULL,
  PRIMARY KEY (`no_id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;

-- Dumping data for table phpbejo_news.tabel_artikel: ~3 rows (approximately)
/*!40000 ALTER TABLE `tabel_artikel` DISABLE KEYS */;
INSERT INTO `tabel_artikel` (`no_id`, `tanggal_post`, `judul_post`, `isi_post`, `author`) VALUES
 (2, '2013-11-05 13:20:03', 'Wenger menganggap gocekan bola Ozil lebih bagus daripada Zidane.', 'Manajer Arsenal Arsene Wenger meyakini Mesut Ozil punya dribel yang lebih bagus ketimbang legenda Prancis Zinedine Zidane. Menurut Wenger, dua playmaker ini sama-sama punya kemampuan spesial.\r\n<!--readmore-->\r\n"Ozil punya kualitas spesial. Dia selalu mengambil keputusan cepat dan tepat. Dribel Ozil sedikit lebih baik ketimbang Zidane. Secara teknis, mereka sama-sama bagus dan mereka juga sama-sama punya kerendahan hati" ujar Wenger seperti dikutip Telefoot.\r\n\r\nSelain itu, Wenger juga membeberkan bahwa Paris Saint-Germain berupaya menghalangi Arsenal untuk menggaet playmaker berusia 25 tahun itu pada musim panas lalu. The Gunners pada akhirnya sukses mengamankan transfer itu dengan tebusan 50 juta.\r\n\r\n"Dia mengambil keputusan selama hampir 24 jam. Setelah itu, proses transfer segera dijalankan dan berlangsung sangat cepat. Paris juga tertarik menggaetnya pada musim panas lalu. Namun, saya beruntung karena lebih dulu melakukan kontak dengannya, bahkan sejak sebelum ia bergabung ke Real" tutur pelatih Prancis ini. \r\n\r\n"Saya sempat mencoba membelinya sebelum ia pindah ke Real Madrid [pada 2010]. Dia menelepon saya dan mengatakan bahwa dia telah memilih Real. Tapi, dia juga bilang kepada saya bahwa dia juga ingin bergabung dengan kami," imbuh Wenger.\r\n', 'SANDY MARIATNA'),
 (3, '2013-11-05 13:20:03', 'Menghadapi Crystal Palace, Cazorla siap memberikan kontribusi terbaiknya bersama Ozil.', 'Santi Cazorla mengaku tak sabar bisa kembali berduet dengan Mesut Ozil di lini tengah Arsenal saat menghadapi Crystal Palace akhir minggu ini.\r\n<!--readmore-->\r\nDiharapkan Cazorla, tandemnya dengan Ozil di lini tengah Arsenal bisa membantu tim meraih gelar juara di musim ini.\r\n\r\n"Kami memiliki pemahaman yang jauh lebih baik setelah kami berlatih cukup lama di lapangan," kata Cazorla, Jumat (25/10).\r\n\r\n"Kami harus saling tahu satu sama lain dan saya harus mengatakan sangat mudah bisa saling memahami dengan pemain sepertinya, karena filosofi bermain kami sangat mirip."\r\n\r\n"Ia bukan pemain yang biasa Anda lihat dan ia bisa memenangkan pertandingan dengan caranya sendiri, karena itulah mengapa ia bisa jadi pemain top," tandasnya.', 'TEGAR PARAMARTHA'),
 (6, '2013-11-06 04:03:07', 'Tak ada yang lebih baik dari Mesut Ozil dalam memainkan peran gelandang serang, demikian Cesc Fabregas', 'Sinar Mesut Ozil bersama Arsenal tak luput dari pengamatan Cesc Fabregas, mantan kapten Gunners yang kini berseragam Barcelona.\r\n<!--readmore-->\r\nPlaymaker Jerman itu langsung mengemuka sebagai figur penting lesatan Arsenal awal musim ini usai dipinang dengan mahar £42,5 juta, rekor pembelian termahal klub, dari Real Madrid.\r\n\r\nDengan Ozil sebagai kreator permainan, Arsenal kini memuncaki klasemen sementara Liga Primer Inggris, dan sebelum ditundukkan Borussia Dortmund 2-1 di Liga Champions, skuat Arsene Wenger sempat melaju tak terkalahkan dalam 12 partai kompetitif.\r\n\r\nFabregas, yang pernah beberapa kali bermain melawan Ozil di el clasico, memberikan pujiannya buat mantan penggawa Werder Bremen itu.\r\n\r\n"Kalau Anda memiliki kans untuk mendatangkan Ozil, Anda tak boleh melewatkannya," tukasnya kepada Guardian.\r\n\r\n"Saya pikir dia akan sangat menikmatinya. Dia orang yang harus membuat perbedaan di sepertiga akhir lapangan. Umpan akhirnya brilian, dia akan mendapatkan lebih banyak ruang dan dengan ruang tersebut dia akan \'membunuh\' Anda."\r\n\r\n"Dia sendiri juga akan mencetak lebih banyak gol karena ruang tersebut. Tak ada orang yang lebih baik darinya untuk peran mediapunta [gelandang serang]."', 'DEDE SUGITA');
/*!40000 ALTER TABLE `tabel_artikel` ENABLE KEYS */;
/*!40101 SET SQL_MODE=IFNULL(@OLD_SQL_MODE, '') */;
/*!40014 SET FOREIGN_KEY_CHECKS=IF(@OLD_FOREIGN_KEY_CHECKS IS NULL, 1, @OLD_FOREIGN_KEY_CHECKS) */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

Langkah 2

Buat susunan folder sebagai berikut:

Sampai dengan langkah ini, saya harapkan kawan-kawan pembaca teliti dengan cermat! Jangan sampai salah! Selanjutnya kita akan menuliskan script fungsi untuk membuat cuplikan artikel pada website kita nanti.

Langkah 3

Buka text editor favorit kawan, dan ketikkan kode berikut ini:

<?php
/*
-- --------------------------------------------------------
-- --------------------------------------------------------
-- Nama File : fungsi.php  
-- Author    : Fitri Ariyanto 
-- Email     : seorang.fitri@gmail.com
-- Website   : http://phpbejo.blogspot.com 
-- Copyright [c] 2013 Fitri Ariyanto 
-- --------------------------------------------------------
*/
 function readmore($content){
  $xplode = explode("<!--readmore-->", $content);
    $detail = $xplode[0];
    return $detail;
 }
 function rapikan($str){
     $cont = nl2br($str);
     $text = substr($cont,0,100);
     $text = substr($cont,0,strrpos($cont, " "));
     return $text;
 }
?>

Simpan di dalam folder "fungsi", dengan nama "fungsi.php". Selanjutnya ikuti langkah berikut.

Langkah 4

Buat file baru, dan kemudian ketikkan kode berikut ini:

<?php
    include("configuration/koneksi.php");
    include("function/fungsi.php");
?>
<!DOCTYPE html>
<html>
<head><title>PHPBEJO News</title>
<style type="text/css">
 a:link,a:visited,a:active{color:#58A;text-decoration:none;font-weight:bold;}
 .fontheader{font-size:24px;padding:10px;padding-top:20px;}
 .fontfooter{font-size:12px;padding:5px;text-align:center;}
 #wrapper{width:768px;height:640px;border:solid 1px #BBB;margin:0 auto;}
 #header{width:768px;height:100px;margin:0 auto;background:#EEE;border-bottom:1px solid #BBB;}
 #content{width:748px;height:488px;margin:0 auto;border-bottom:1px solid #BBB;padding:10px;}
 #footer{width:768px;height:30px;margin:0 auto;background:#EEE;}
</style>
</head>
<body>
 <div id="wrapper">
  <div id="header">
   <div class="fontheader">PHPBEJO News: Latihan dan Tutorial Dasar Pemrograman PHP</div>
  </div>
  <div id="content">
   <?php
    $result = mysql_query("SELECT * FROM tabel_artikel");
    while ($data=mysql_fetch_array($result)) {
     echo '<span style="font-size:18px;color:#58F;font-weight:bold;">
      <a href="detail.php?baca=' . $data['no_id']. '">' . $data['judul_post'] . '</a></span><br/>
      <i>dipublikasikan oleh: ' . $data['author'] . ', tanggal: ' . $data['tanggal_post']. '</i><br/>' .
      '<p align="justify">'.readmore(rapikan($data['isi_post'])) . '... <br><a href="detail.php?baca=' . $data['no_id']. '">
      Read More</a></p><hr>';
    }
   ?>
  </div>
  <div id="footer">
   <div class="fontfooter">Copyright © 2013 Fitri Ariyanto. Hak Cipta Dilindungi oleh Undang-undang.</div>
  </div>
 </div>
</body>
</html>

Simpan dengan nama "index.php". Index ini kita gunakan untuk halaman utama website kita. Oke, selangkah lagi bisa kita lihat hasilnya.

Langkah 5
Silahkan buat file baru dan ketikkan baris kode berikut ini:

<?php
 $host = "localhost";
 $user = "root";
 $pass = "";
 $conn = mysql_connect($host, $user, $pass) or die("Koneksi gagal!");
 mysql_select_db("phpbejo_news", $conn) or die("Database tidak ditemukan!");

?>

Simpan dengan nama "koneksi.php". Letakkan di folder "configuration". Ingat jangan sampai salah! Karena file koneksi ini kita gunakan untuk melakukan koneksi ke database serta untuk memperlihatkan field atau isi dari tabel yang kita gunakan.

Langkah 6

Buat dokumen baru, dan ketik kode berikut ini:

<?php
 include("configuration/koneksi.php");
 include("function/fungsi.php");
?>
<!DOCTYPE html>
<html>
<head><title>PHPBEJO News</title>
<style type="text/css">
 .fontheader{font-size:24px;padding:10px;padding-top:20px;}
 .fontfooter{font-size:12px;padding:5px;text-align:center;}
 #wrapper{width:768px;height:640px;border:solid 1px #BBB;margin:0 auto;}
 #header{width:768px;height:100px;margin:0 auto;background:#EEE;border-bottom:1px solid #BBB;}
 #content{width:748px;height:488px;margin:0 auto;border-bottom:1px solid #BBB;padding:10px;}
 #footer{width:768px;height:30px;margin:0 auto;background:#EEE;}
</style>
</head>
<body>
 <div id="wrapper">
  <div id="header">
   <div class="fontheader">PHPBEJO News: Latihan dan Tutorial Dasar Pemrograman PHP</div>
  </div>
  <div id="content">
   <?php
    $result = mysql_query("SELECT isi_post FROM tabel_artikel WHERE no_id='" . $_GET['baca'] . "'");
    while ($data=mysql_fetch_array($result)) {
     echo '<p align="justify">' . $data['isi_post'] . '</p>';
    }
   ?>
  </div>
  <div id="footer">
   <div class="fontfooter">Copyright © 2013 Fitri Ariyanto. Hak Cipta Dilindungi oleh Undang-undang.</div>
  </div>
 </div>
</body>
</html>

Kemudian simpan dengan nama "detail.php". Kode tersebut berfungsi sebagai pencetak lengkap artikel yang sebelumnya ditampilkan secara cuplikan. Ketika kita meng-klik readmore, maka program akan langsung mengakses file detail.php dan kemudian menampilkan artikel secara lengkap.

Setelah semuanya selesai, maka kita coba dengan mengkases dari browser, dengan mengetikkan alamat url. Di sini saya menggunakan

http://localhost/examp/phpbejo/cuplikan-artikel/

dan hasilnya sebagai berikut:

Untuk screenshot detail artikel bisa dilihat di gambar berikut ini:

Bagaimana? mudahkan? Saya berharap semua tulisan saya dapat mudah dimengerti kawan-kawan pembaca. Sekian tulisan dari saya, ada kurang dan lebih, mohon dimaafkan dan ditunggu kritik dan saran. Jika ada yang ditanyakan, silahkan isi kolom komentar di bawah.

Salam,

Ditulis Oleh: Fitri Ariyanto
URL: https://phpbejo.blogspot.com/2013/11/membuat-cuplikan-artikel-readmore-atau-baca-selengkapnya-dengan-php.html
PHPBEJO: Tutorial Dasar Pemrograman PHP

Share this

Related Posts