Membuat Web Headline News Dinamis dari database
( Have you ever seen the news website display update news slider ?, such as detik.com, republika.co.id an etc. Many blogs / website explain how to make web news slide....but statically).
Pada pembahasan edisi ini kita akan membahas slider berita secara dinamis...dimana gambar dan judul diambil dari database MySQL dengan bantuan script PHP. Untuk mempermudah desain web...disini kita menggunakan bootstrap sebagai front-end. Pastikan anda telah mendownlad Bootstrap....jika belum...jangan khawatir...pada tutorial ini telah disertakan semua script yang dapat didownlad secara free pada akhir pembahasan.
(In this tutorial..i will try explain how make news slider [Content slider along with image and title from database] with script PHP. To simplify web design...here we use bootstrap as a front-end. Make sure you have downloaded Bootstrap...if not....don't be worry....you can download all script which contain bootstrap and others at the bottom of this explanation)
Bagaimana cara menyajikan berita dinamis secara bergantian seperti gambar di atas, untuk itu silahkan ikuti langkah-langkah berikut ini
(How to display dynamic slideshow of news like the figure above, here are the steps that you have to do it )
Create database "db_carousel"
CREATE TABLE `berita` (
`id` int(10) 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 AUTO_INCREMENT=4 DEFAULT CHARSET=latinSetelah database terbuat....maka isikan masing-masing atribut tersebut...Jangan lupa...file gambar disimpan pada folder img.
(After database created...fill each atribute...and don't forget file image save in folder named img )
Create file koneksi.php
Tahap berikutnya, membangun koneksi dengan database yang berisikan script php dan disimpan dengan nama koneksi.php ....disimpan di folder config.(The next step, create file connection which named koneksi.php and it is save in folder config).
<?php
$con=mysqli_connect("localhost","root","","db_carousel");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?>Create file index.php
Tahap berikutnya...kita akan membuat file index.php yang bertujuan untuk menampilkan slider dinamis dengan memanggil data dari database.( The next step....we create file index.php destinate to display dynamic slider [dynamic content slider] from database).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Kaurosel</title>
<meta content='Ilmu Detil' name='description'/>
<meta content='Pusat Ilmu Secara Detil' name='keywords'/>
<meta content='Informasi tentang Bootstrap' name='author'/>
<meta content='All' name='robots'/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
<link rel ="stylesheet" href="bootstrap/css/styles.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Navigation -->
<header>
<div class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#">
</a>
<h4 class="pull-right" style="color:#eee;padding-right:17px 0;">
Caurosel
</h4>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="@Url.Action("About", "Home")">
<i class="glyphicon glyphicon-info-sign"></i> About
</a>
</li>
<li>
<a href="@Url.Action("Contact", "Home")">
<i class="glyphicon glyphicon-phone"></i> Contact
</a>
</li>
<li>
<a href="@Url.Action("Index", "Strains")">
<i class="glyphicon glyphicon-leaf"></i> Strains
</a>
</li>
</ul>
</div>
</div>
</div>
</header>
<div class="container">
<div class ="row">
<div class="col-md-6 ">
<div class="panel panel-primary">
<div class="panel-heading">Headline News</div>
<!-- Slider News by Carousel -->
<div id='myCarousel' class='carousel slide' data-ride='carousel'>
<ol class='carousel-indicators'>
<?php
include "config/koneksi.php";
$query = "select * from berita order by id desc limit 3";
$res = mysqli_query($con,$query);
$count = mysqli_num_rows($res);
$slides ='';
$Indicators ='';
$counter =0;
echo "<li data-target='#myCarousel' data-slide-to='0'></li>";
echo "<li data-target='#myCarousel' data-slide-to='1'></li>";
echo "<li data-target='#myCarousel' data-slide-to='2'></li>";
?>
</ol>
<div class='carousel-inner'>
<?php
include "config/koneksi.php";
$query = "select * from berita order by id desc limit 3";
$res = mysqli_query($con,$query);
$count = mysqli_num_rows($res);
while($c=mysqli_fetch_array($res)){
$judul = $c['judul'];
$konten = $c['konten'];
$gbr = $c['gambar'];
$artikel= substr($konten,0,200);
$spasi =strrpos($artikel,' ');
$ringkas= substr($artikel,0,$spasi); // pemecah artikel
if($counter==0)
{
echo"<div class='item active'>";
echo "<a href=''>";
echo "<img src='img/$gbr.png'>";
echo "</a>";
echo "<div class='container'>";
echo "<div class='carousel-caption left-caption style='background-color:#EE0930'>";
echo "<a href=''> <font color=#ffffffff style='font-family: Verdana,Arial,Helvetica,Georgia; font-size: 13px;'>";
echo "<h5 class='text-left'>".$judul."</h5></font>";
echo "</a>";
echo "<br>";
echo "<p style='font-family: Verdana,Arial,Helvetica,Georgia; font-size: 10px; text-align: justify;'> ".$ringkas."</p>";
echo "<br> ";
echo "<p><a href=''>";
echo "<h6 class='text-left'>Selengkapnya</b></h6>";
echo "</p>";
echo "</div>";
echo"</div>";
echo "</div>";
}
else
{
echo "<div class='item'>";
echo "<a href=''>";
echo "<img src='img/$gbr.png'>";
echo "</a>";
echo "<div class='container'>";
echo "<div class='carousel-caption left-caption style='background-color:#EE0930'>";
echo "<a href=''> <font color=#ffffffff style='font-family: Verdana,Arial,Helvetica,Georgia; font-size: 13px;'><h5 class='text-left'>".$judul."</h5></font>
</a>";
echo "<br>";
echo "<p style='font-family: Verdana,Arial,Helvetica,Georgia; font-size: 10px; text-align: justify;'>
".$ringkas."</p>";
echo "<br>";
echo "<p><a href=''> <h6 class='text-left'>Selengkapnya</b> </h6></p>";
echo "</div>";
echo "</div>";
echo "</div>";
}
$counter++;
}
echo"</div>";
echo "<a class='left carousel-control' href='#myCarousel' data-slide='prev'>‹</a>";
echo "<a class='right carousel-control' href='#myCarousel' data-slide='next'>›</a>";
echo"</div>";
echo"<!-- End Slider Caraousel-->";
?>
</div>
</div>
</div>
</div>
</body>
</html>Perhatikan potongan script berikut dari index.php:
<?php
include "config/koneksi.php";
$query = "select * from berita order by id desc limit 3";
$res = mysqli_query($con,$query);
$count = mysqli_num_rows($res);
$slides ='';
$Indicators ='';
$counter =0;
echo "<li data-target='#myCarousel' data-slide-to='0'></li>";
echo "<li data-target='#myCarousel' data-slide-to='1'></li>";
echo "<li data-target='#myCarousel' data-slide-to='2'></li>";
?> Script diatas menerangkan bahwa...akan ada tiga berita terbaru yang ditampilkan. Jika menginginkan 4,5,6 dan seterusnya...maka pada bagian :
( Script above point that there are three new news which displayed. If we want 3,4,5 etc...then on script :)
$query = "select * from berita order by id desc limit 3";dirubah sesuai dengan keinginan anda dan juga pada bagian :
(we change according to our need and it must be also changed on script )
echo "<li data-target='#myCarousel' data-slide-to='0'></li>";
echo "<li data-target='#myCarousel' data-slide-to='1'></li>";
echo "<li data-target='#myCarousel' data-slide-to='2'></li>";harus ditambah sesuai dengan banyaknya berita yang kita inginkan.
(Modify script above as needed)
