Dalam tutorial pemrograman web kali ini, pertama-tama kita akan membuat beberapa artikel berita yang telah dipotongan dari artikel lengkapnya. Untuk memotong artikel berita, kita dapat menggunakan fungsi php yaitu :substr(). Kemudian saat user mengklik tombol Readmore, maka akan dibawah ke halaman web yang menyajikan artikel secara lengkap.
Berikut ini adalah ouput yang akan kita buat, seperti yang ditunjukkan oleh Gambar.1 dibawah ini:
 |
| Gambar.1 |
Dan apabila kita mengklik pada tombol Read More atau link pada bagian judul, maka akan muncul ouput penyajian berita secara utuh seperti yang ditunjukkan oleh Gambar.2 dibawah ini :
 |
| Gambar.2 |
Dalam perancangan interface digunakan Bootstrap, baru kemudian disertakan script php pemotong berita pada desain interface yang kita buat.
Langkah-langkah membuat readmore
1. Create database dbilmu_berita
Langkah pertama, kita akan mempersiapkan berita dengan nama table : berita. Di dalam table berita berisikan field-field : id, tanggal, gambar, judul serta konten. Data-data dari database ini nantinya yang akan retrieve untuk ditampilkan pada artikel web.CREATE TABLE IF NOT EXISTS `berita` (Silahkan diisi masing-masing field tersebut. Anda dapat menemukan database lengkap (termasuk isi beritanya) pada link Download bagian bawah.
`id` int(5) NOT NULL AUTO_INCREMENT,
`tanggal` date NOT NULL,
`gambar` varchar(50) NOT NULL,
`judul` varchar(200) NOT NULL,
`konten` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;
2. Create file koneksi.php
File ini bertujuan untuk membuat koneksi terhadap database yang nantinya mengizinkan kita untuk berkomunikasi dengan tabel yang ada dalam database tersebut.<?php
$con=mysqli_connect("localhost","root","","dbilmu_berita");
?>
3. Create file index_post.php
File ini adalah file utama, anda dapat memberi nama lain seperti index.php. File ini berisikan perancangan interface untuk top navigation bar, tampilan untuk penyajian artikel serta footer. Dalam penyajian artikel kita menambahkan judul, tanggal, gambar serta potongan berita yang mana semua data diambil dari database.<!DOCTYPE html>Pada kode diatas, kita melakukan pemanggilan file css Bootstrap dan ilmudetil. File bootstrap.css digunakan untuk mendesain layout seperti pembuatan top fix navigation bar, footer serta tampilan untuk artikel berita. Sedangkan file ilmudetil.css untuk memberi style yang lebih menarik pada bagian top fix navigation bar dan footer.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="ilmu-detil.blogspot.com">
<title>Readmore using php bootstrap </title>
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/ilmudetil.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
Pusat Ilmu Secara Detil</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="clr1 active"><a href="index.html">Home</a></li>
<li class="clr2"><a href="">Programming</a></li>
<li class="clr3"><a href="">English</a></li>
</ul>
</div>
</div>
</div>
</br></br></br></br>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="pull-left">
<button type="button" class="btn btn-info" style="margin-top:-7px">
<b>Berita Terkini</b>
</button>
</div>
<br>
</div>
<div class="panel-body" style="background-color:#2040a8;color:#eee; ">
<?php
include "koneksi.php";
date_default_timezone_set("Asia/Jakarta");
$qu=mysqli_query($con,"select * from berita order by id desc limit 2");
while($has=mysqli_fetch_row($qu))
{
$tgl=explode("-",$has[1]);
$x = mktime(0, 0, 0, date("$tgl[1]"), date("$tgl[2]"), date("$tgl[0]"));
switch(date("l",$x))
{
case 'Monday':$nmh="Senin";break;
case 'Tuesday':$nmh="Selasa";break;
case 'Wednesday':$nmh="Rabu";break;
case 'Thursday':$nmh="Kamis";break;
case 'Friday':$nmh="Jum'at";break;
case 'Saturday':$nmh="Sabtu";break;
case 'Sunday':$nmh="minggu";break;
}
echo "
<div class='row' style='margin-bottom:12px;border-bottom: solid 1px #337ab7; '>
<div class='col-md-3'>
<img class='img-default img-center' src='img/$has[2]' width='120' height='135' alt='agenda' style='padding-top: 10px;'>
</div>
<!-- Bagian Beritanya-->
<div class='col-md-9'>
<h5 style='color:#ffb60f;'>
<strong><a href='detil_post.php?id=$has[0]' style='color:#ffb06f'>$has[3]</a></strong>
</h5>
<small style='font-size:8pt;color:#ea7048'>$nmh, ".$has[1]."</small>
<p>".strip_tags(substr(substr($has[4],0,200),0,strrpos(substr($has[4],0,200),' ')))." ...</p>
</div>
<p style='text-align:right;'>
<a href='artikel_edukasi.html'>
<button class='btn btn-primary'>
<a href='detil_post.php?id=$has[0]'>Read More</a>
</button>
</a>
</p>
</div>
";
}
?>
</div>
</div>
</div>
</div>
</div>
<!-- Akhir dari artikel berita -->
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">Detailed Technology Center, Powered by <a href="http://ilmu-detil.blogspot.co.id/">Pusat Ilmu Secara Detil</a></p>
</div>
</div>
</body>
</html>
Bagian kode date_default_timezone_set("Asia/Jakarta") bertujuan untuk memakai standar waktu indonesia. Artinya meskipun web kita dihosting di server luar negeri yang memakai standar waktu berbeda, disaat kita publish berita maka akan diambil standar waktu indonesia.
Contoh : Anda menghosting file web di server perancis. Saat ini pukul 23.00 waktu bagian perancis, kebetulan anda akan mengupdate berita, maka yang akan ditampilkan adalah pukul 05.00 waktu Indonesia (Selisih waktu Indonesia dan Perancis kurang lebih 6 Jam).
Bagian kode $tgl=explode("-",$hasil[1]) bertujuan untuk memecah dari tanggal, misalnya tanggal dari database : 2016-01-03. Maka tanggal tersebut akan dipecah berdasarkan karakter "-", sehingga masing-masing pecahan tersebut akan tersimpan dalam bentuk array. Silahkan baca tutorial php explode untuk memahami lebih dalam tentang fungsi explode :
| Memahami fungsi explode |
Untuk pemahaman lebih lanjut tentang fungsi mktime dan merubah tanggal dalam format Indonesia, silahkan baca tutorial :
| Memahami fungsi mktime |
| Konversi tanggal dan hari dalam format bahasa Indonesia |
Bagian kode strip_tags berfungsi untuk menghilangkan tag-tag HTML. Untuk pemahaman lebih lanjut tentang fungsi strip_tags(), silahkan baca tutorial :
| Memahami kegunaan fungsi strip_tags() |
4. Create file detil_post.php
File ini bertujuan untuk menampilkan detil berita yang diklik pada bagian judul atau tombol readmore pada file index_post.php.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="ilmu-detil.blogspot.com">
<title>Readmore using php bootstrap </title>
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/ilmudetil.css">
<script src='assets/js/jquery-1.10.1.min.js'></script>
<script src="assets/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
Pusat Ilmu Secara Detil</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="clr1 active"><a href="index.html">Home</a></li>
<li class="clr2"><a href="">Programming</a></li>
<li class="clr3"><a href="">English</a></li>
</ul>
</div>
</div>
</div>
</br></br></br></br>
<!-- Bagian artikel berita -->
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="pull-left">Isi Berita</div>
<br>
</div>
<div class="panel-body">
<?php
include "koneksi.php";
$data=mysqli_fetch_row(mysqli_query($con,"select * from berita where id='".$_GET['id']."'"));
date_default_timezone_set("Asia/Jakarta");
$tgl=explode("-",$data[1]);
$x = mktime(0, 0, 0, date("$tgl[1]"), date("$tgl[2]"), date("$tgl[0]"));
switch(date("l",$x))
{
case 'Monday':$nmh="Senin";break;
case 'Tuesday':$nmh="Selasa";break;
case 'Wednesday':$nmh="Rabu";break;
case 'Thursday':$nmh="Kamis";break;
case 'Friday':$nmh="Jum'at";break;
case 'Saturday':$nmh="Sabtu";break;
case 'Sunday':$nmh="Minggu";break;
}
?>
<h5 style='color:#ffb60f;'>
<strong><?php echo $data[3]; ?></strong>
</h5>
<small style='font-size:8pt;color:#ea7048'><?php echo "$nmh, tanggal $tgl[2]-$tgl[1]-$tgl[0]" ?></small>
<hr>
<img src='img/<?php echo $data[2] ?>' style="float:left;padding:5px 10px 5px 10px;width:150px;">
<!-- Bagian Beritanya-->
<p><?php echo $data[4]; ?></p>
</div>
</div>
</div>
</div>
</div>
<!-- Akhir dari artikel berita -->
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">Detailed Technology Center, Powered by <a href="http://ilmu-detil.blogspot.co.id/">Pusat Ilmu Secara Detil</a></p>
</div>
</div>
</body>
</html>
0 Response to "Cara Membuat PHP Readmore pada Artikel Web"
Posting Komentar