--> Skip to main content
Home Bootstrap Pemrograman Web php Fungsi php untuk cuplikan berita

Fungsi php untuk cuplikan berita

Tutorial kita kali ini akan membahas tentang cara bagaimana mengambil potongan berita atau dikenal dengan istilah cuplikan berita. Dalam pembuatan atau penyajian artikel berita pada web, tentunya tidak semua isi dari sebuah artikel berita ditampilkan di halaman utama. Pada saat pengunjung mengklik pada bagian judul, maka akan ditampilkan isi artikel berita secara utuh.

Biasanya kita menyajikan artikel berita dihalaman utama berupa :
  • Gambar, penyajian artikel berita dengan dilengkapi image akan membuat tampilan menjadi lebih hidup dan membuat pengunjung tertarik.
  • Tanggal, merupakan kapan artikel berita tersebut dipublikasikan.
  • Judul, tentunya bagian ini menjadi hal yang mutlak yang harus ada.
  • Cuplikan artikel berita, bagian ini akan memberikan sedikit gambaran dari isi artikel berita tersebut. Pada bagian cuplikan, biasanya kalimat yang diambil adalah pada bagian paragraf pertama.

Berikut ini adalah target dari output yang akan kita buat seperti yang ditunjukkan oleh Gambar.1 dibawah ini :



(Gambar.1 )


Seperti yang terlihat pada Gambar.1, setelah tanggal diterbitkannya berita,terdapat bagian cuplikan dari isi artikel berita.

Langkah-langkah membuat cuplikan artikel berita

Dalam percobaan ini kita menggunakan Bootstrap sebagai front-end. Dan ada bagian-bagian tertentu dari bootstrap.css yang kita override.

Langkah 1. Membuat Database dbilmu_berita
Pada percobaan ini database yang kita gunakan adalah MySQL. Semua fitur berita, baik tanggal, judul, gambar dan cuplikan disimpan di database.

Buatalah database dengan nama dbilmu_berita, dilanjutkan dengan membuat 5 fiedl/kolom seperti script sql dibawah ini :
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 ;

Langkah 2. Membuat file koneksi.php
File ini untuk mendapatkan akses ke database yang berisikan script sebagai berikut : 
<?php
$con=mysqli_connect("localhost","root","","dbilmu_berita");
?>

Langkah 3. Membuat file ilmudetil.css
Tujuan dari pembuatan file ilmudetil.css adalah untuk mengoverride beberapa bagian dari framework bootstrap agar tampilan menjadi lebih indah. Berikut ini adalah scriptnya :
.navbar-default .navbar-nav > li.clr1 a{
        color:#ffffff;
}
.navbar-default .navbar-nav > li.clr2 a{
    color: #FFEB3B;;
}
.navbar-default .navbar-nav > li.clr3 a{
    color: #5EC64D;
}
.navbar-default .navbar-nav > li.clr4 a{
    color: #29AAE2;
}
.navbar-default .navbar-nav > li.clr1 a:hover, .navbar-default .navbar-nav > li.clr1.active a{
    color:#fff;
    background: #F55;
}
.navbar-default .navbar-nav > li.clr2 a:hover, .navbar-default .navbar-nav > li.clr2.active a{
    color: #fff;
    background:#973CB6;
}
.navbar-default .navbar-nav > li.clr3 a:hover, .navbar-default .navbar-nav > li.clr3.active a{
    color: #fff;
    background:#5EC64D;
}
.navbar-default .navbar-nav > li.clr4 a:hover, .navbar-default .navbar-nav > li.clr4.active a{
    color: #fff;
    background: #29AAE2;
}
.navbar-default{
    background-color: #3b5998;
    font-size:18px;
}
.navbar-default .navbar-brand {
    color: #ffffff;
    font-weight:bold;
}
.navbar-default .navbar-text {
    color:#ffffff;
}
a{color: #FFC107;text-decoration: none;}
img{width:120px;    height:135px;padding-top: 10px;}

Langkah 4. Membuat file index-tgl1.php
File index-tgl1.php merupakan halaman utama untuk menampikan artikel berita dimana isi artikel berita akan diambil beberapa kalimat dari paragraf pertama. Berikut ini adalah script dari index-tgl1.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>Cuplikan Berita </title>
    <!-- Bagian css -->
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <link rel="stylesheet" href="assets/css/ilmudetil.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css"> 
    <!-- Akhir dari Bagian css -->
    
    <!-- Bagian js -->
    <script src='assets/js/jquery-1.10.1.min.js'></script>       
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- akhir dari Bagian js -->

</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-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">
                            <span class="glyphicon glyphicon-list-alt " style="margin-right:4px;"></span>
                            <b>Berita Terkini</b>
                        </button>
                    </div>
                    <div class="pull-right">
                        <a href="berita.php" style="color:#eee" ;>Indeks</a>
                    </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]' >
                                </div>
                                <!-- Bagian Beritanya-->
                                <div class='col-md-9'>
                                    <h5 style='color:#ffb60f;'>
                                        <strong><a href='' 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>
                            </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>

Live PreviewDownload

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