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">–<?=$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
0 comments: