Kategori Random

Membuat Text Slider Testimonial dengan JQuery Cycle Plugin

Posted : 10 Maret 2015 | 16:06:41 , Dibaca 2611 kali

Pernah  an sobat melihat testimonial yang berbaganti-ganti secara statis pada tampilan awal sebuah website? Nah kalo saya akan berbagi tentang slider text dengan jquery Cycle Plugin.

Testimonial kita ketahui sangat perlu dibuat pada sebuah website sebagai feedback kita dapatkan dari publik tentang produk ataupun perusahaan kita. Baik mari kita mulai

Langkah 1 : Buat database

CREATE TABLE `testimonial` (
`idtest` INT( 5 ) NOT NULL AUTO_INCREMENT ,
`nama` VARCHAR( 30 ) NOT NULL ,
`isitest` TEXT NOT NULL ,
`kota` VARCHAR(20) NOT NULL ,
PRIMARY KEY ( `idtest` )
) ENGINE = MYISAM ;

kemudian insertkan datanya seperti dibawah ini

INSERT INTO `testimonial` (`idtest` ,`nama` ,`isitest` ,`kota`) VALUES 
( '' , 'GooLanz', 'Terkadang didalam hidup, seseorang harus bersedia mundur selangkah untuk mempersiapkan diri melangkah kedepan.', 'Medan' ), 
( '', 'Agus Han', 'Seorang pemenang itu ibarat rajawali yang mengepakan sayapnya terbang di angkasa menerjang segala rintangan.', 'Papua'), 
( '', 'Budi', 'Sebagai pemimpin, kita hidup bagaikan dibawah mikroskop. Segala hal yang kita lakukan atau katakana, tidak terlepas dari pengamatan pengikut kita.', 'Makassar'), 
('', 'Faber', 'Kebahagian tidak datang begitu saja. tidak ada orang yang dikaruniai kebahagian. kita harus mencari kebahagian kita sendiri, melauli sikap berpikir kita dan kesediaan kita untuk bersyukur.', 'Medan');

Langkah 2 : Download Plugin Cycle dan JQuery

Jquery bisa didownload di website jquery.com sedangkan untuk plugin cyclenya bisa disini

Langkah 3 : Style CSS

untuk mempercantik tampilanya buat skrip untuk style cssnya, beri nama style.css

/* CSS Document */
#testimonials {
width:500px;
background:#E7E9E6 ;
border:1px solid #D8D9D6;
margin:5px 0 ; height:auto;
}
#blockquote{
padding:5px;
width:400px; height:auto;
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic;
color:#808080;
}
 
#isi{ text-align:justify;
    padding:10px; width:380px;
}
#cite {
font-style: normal;
display: block;
 
text-transform: uppercase;
font-weight: bold;
font-style:italic;
color: #555;
padding-left:5px;
margin-top:10px;
}

Langkah 4 : Buat file tampilan slider

Untuk tampilannya beri nama testimonial.php, buat seperti skrip dibawah ini

<?php
//menghilangkan pesan error
//jika ingin ditampilkan kasi komentar saja
error_reporting(0);

//koneksi server
mysql_connect("localhost","root","password");
mysql_select_db("nama_database");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- include jQuery library -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $('#testimonials')
	.before('<div id="nav">')
	.cycle({
        fx: 'fade', // bisa anda pilih tipe transition, contoh : fade, scrollUp, scrollRight, shuffle
		pager:  '#nav'
     });
});
</script>
<link href="style.css" type="text/css" media="screen" rel="stylesheet" />
<title>Slider Testimonials With jQuery Cycle</title>
</head>

<body>
<? $mysql=mysql_query("SELECT*FROM testimonial");?>
<h1>Slider Testimonials With jQuery Cycle</h1>
<div id="testimonials">
 <? while($qMysql=mysql_fetch_array($mysql)){?>
 <div id="blockquote">
    <div id="isi">"<?php print $qMysql[2];?>"</div>
       <div id="cite">&ndash;<?=$qMysql[1]?> - <?=$qMysql[3]?></div>
    
  </div>
 <? }?>
</div><!--end testimonials-->
</body>
</html>

Gambar Tampilan output yang diihasilkan dari skrip diatas.

Demikian tutorial kali ini semoga bermanfaat.

Source Code

Postingan Terkait
» Sorter Data Tabel MySQL berdasarkan judul dengan JQuery Table.Sorter ( 23 Feb 2015 | 09:42:55 , 3408 hits )
» Memasang JQuery Isotope pada tampilan portofolio item ( 30 Jan 2015 | 19:24:28 , 1588 hits )
» Membuat SyntaxHighlighter pada website ( 30 Jan 2015 | 04:28:10 , 1249 hits )
» HTML5 ( 20 Jan 2012 | 04:08:00 , 1438 hits )
» jQuery Mobile ( 20 Jan 2012 | 04:08:00 , 1765 hits )