Pernahkan anda melihat website berita yang memunculkan slider berita yang selalu update ?. Katakanlah seperti web detik.com, republika.co.id dan lain-lain. Pembahasan dari beberapa blog telah banyak yang mengupas tentang membuat slide berita....namun secara statis. ( 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 through ziddu or 4shared)
Sebelum kita masuk ke langkah-langkah pembuatannya,,,,,,silahkan lihat hasil tampilan dari : Web Headline News Dinamis dari php Database. ( You can see the result of this tutorial in advance by clik this link : Web Headline News Dinamis dari php Database.)
Langkah-langkahnya: (The steps)
Buat 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=latin
Setelah 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 )
Membuat 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();
}
?>
Membuat 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/style.css" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/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>
<script src="bootstrap/js/portfolio/setting.js"></script>
<style type="text/css">
.navbar-inverse {
background-color: #800040;
border-color: #080808;
font-size:18px;
}
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
.navbar-inverse .navbar-nav > li > a {
color: #F9F1F1;
}
.nav {
padding-left: 40px;
margin-bottom: 0;
list-style: none;
}
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
height: 353px;
width: 553px;
}
.carousel-control {
position: absolute;
top: 40%;
left: 15px;
width: 40px;
height: 40px;
margin-top: -20px;
font-size: 60px;
font-weight: 100;
line-height: 30px;
color: #ffffff;
text-align: center;
background: #222222;
border: 3px solid #ffffff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 23px;
opacity: 0.5;
filter: alpha(opacity=50);
}
.carousel-control.right {
right: 15px;
left: auto;
}
.carousel-caption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 5px;
background: #333333;
background: rgba(0, 0, 0, 0.75);
}
.carousel-caption p {
margin-bottom: 0;
}
.carousel-indicators{
top:0px;
}
@media screen and (max-width: 700px){
.carousel-caption p {
font-size: 13px;
}
.carousel-caption {
background: rgba(0, 0, 0, 0.55);
}
.carousel-control {
top: 20%;
}
}
</style>
</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'>";
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'>";
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)
Untuk anda yang membutuhkan file secara utuh dapat mendownload :(You can download all the scripts on the link below :)- Ziddu
- 4Shared
Artikel Membuat Web Headline News Dinamis dari database, Diterbitkan oleh scodeaplikasi pada Sabtu, 19 September 2015. Semoga artikel ini dapat menambah wawasan Anda. Website ini dipost dari beberapa sumber, bisa cek disini sumber, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, karena segala yang dipost di public adalah milik public. Bila Sobat tertarik Ingin membuat software, membeli software,
membeli source code ,Dengan Cara menghubungi saya
Ke Email: Fajarudinsidik@gmail.com, atau
No Hp/WA : (fajar) : 085369237896, (puat) : 085267792168.
