S. Widodo
Selamat malam para developer jumpa lagi dengan s-widodo.com
Semoga kabar kalian baik semuanya karena ada beberapa daerah yang lagi kena musibah (banjir) semoga cepet surut ya gan, up oke untuk mlm ini s-widodo.com akan memberi tutorial lagi seperti biasa tentang PHP dan kali kita akan mencoba membuat sebuah slider dengan php, untuk membuat sebuah slider ini kita memakai plugin slider yang free yaitu nivo slider dan untuk menampilkan datanya kita memakai MYSQLI tau sendirikan MYSQL sudah deprecated, saat ini kita bisa menggunakan fungsi PHP mysqli untuk kebutuhan akses ke database MySQL kita.
UNUTK INSTALASI MYSQLI
Jika Anda menjalankan PHP versi 5.3.0 ke atas, maka Mysqli sudah otomatis aktif, tapi di PHP versi sebelumnya 5.0, 5.1, 5.2, extensi mysqli tidak aktif secara otomatis di system Windows, Anda harus mengaktifkan php_mysqli.dll didalam konfigurasi php.ini.
Untuk mengaktifkannya, edit php.ini dan hapus tanda ; (semi-colon) di awal tulisan extension=php_mysqli.dll, untuk detail lainnya tentang instalasi mysqli ini bisa dibaca di http://in3.php.net/manual/en/mysqli.installation.php
Kalo udah paham kita langsung aja ke pokok permasalahan sebelumnya silahkan download nivo slidernya terlebih dahulu anda bisa mendownload disini dan simpan di dalam locahost kalian masing2
1. Buatlah sebuah datebase baru dengan nama tutorial dan buat tabel dengan nama slider
| Nama | Jenis |
| id-slider | Int (11) |
| name | varchar(40) |
| images | varchar(80) |
| description | text |
| PRIMARY | id_slider |
1. Setelah itu anda input/insert manual datanya, untuk membuat sebuah upload gambar anda bisa membaca artikel sebelumnya di
Cara Membuat Upload Edit dan Hapus Gambar dengan php
2. Kalo udah selesai inputnya sekarang kita buat koneksi dengan MYSQLI Create doument baru dan sispkan script dibawah ini dan simpan dengan nama db.php
<?php
$Host = "localhost";
$User = "root";
$Pass = "";
$Db_name = "tutorial";
$conn = new mysqli( $Host, $User, $Pass, $Db_name );
if ($conn->connect_error){
echo 'Gagal Koneksi';
}?>
3. Create lagi document baru setelah itu include koneksi yang tadi kita buat taruh di paling atas sekali.
4. Jangan lupa pangil css dan Jquery nivo slidernya contoh seperti dibawah ini
<link rel="stylesheet" href="./css/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="./css/nivo-slider.css" type="text/css" media="screen" />
<script type="text/javascript" src="./js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="./js/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Untuk Jquerynya silahkan taruh diatas kode </body> , jangan lupa simpan dengan nama index.php
5. Sekarang kita buat querynya untuk menampilkan Gambar dan keterangan slidernya contohnya seperti dibawah ini
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<?PHP $result = mysqli_query($conn, "SELECT * FROM slider order by slider.id_slider ASC")or die(mysqli_error());
while($row = mysqli_fetch_assoc($result)) {
$images_slider = strip_tags($row['images']);
$description_slider = strip_tags($row['description']);
echo'<img src="images/'.$images_slider.'" data-thumb="images/'.$images_slider.'" alt="" title="'.$description_slider.'"/>';
}?>
</div>
</div>
6. Selesai gan..
Bagi teman-teman yang masih belum paham dalam tutorial ini anda bisa mendownload action scriptnya dibawah ini secara free
Komentar