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)
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 )
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).
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).
Perhatikan potongan script berikut dari index.php
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 :)
dirubah sesuai dengan keinginan anda dan juga pada bagian : (we change according to our need and it must be also changed on script )
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 :)
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).
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 :)
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :