--> Skip to main content
Home Bootstrap Pemrograman Web php Web Programming Cara Membuat PHP Readmore pada Artikel Web

Cara Membuat PHP Readmore pada Artikel Web

Berbicara tentang cara membuat artikel berita, tentunya portal web berita menyajikan berita berupa judul dan potongan berita. Untuk dapat membaca berita secara utuh atau penuh, kita harus mengklik tombol readmore.

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` (
  `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 ;
Silahkan diisi masing-masing field tersebut. Anda dapat menemukan database lengkap (termasuk isi beritanya) pada link Download bagian bawah.

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>
<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>
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.

 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
         
Bagian kode $x=mktime(0,0,0,date("$tgl[1]"),date("$tgl[2]"),date("$tgl[0]") bertujuan untuk membuat tanggal sendiri dari database. Karena format tanggal dari database adalah Y-M-D dan kita memiliki tujuan untuk mengubahnya nama harinya dalam bentuk bahasa Indonesia, maka dilakukan proses switch...case terhadap nama hari dari variabel $x.

 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>

  • DEMO
    •                              
  • DOWNLOAD

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar