Hari ini tanggal 29,September 2013 ..saya akan membagikan script php sistem voting sistem yang mengunakan sedikit bantuan mysql ....
Berikut SSnya
..Ini tutorial pembuatannya :
1.Pertama buat dulu tabel untuk sqlnya ...berikut :
CREATE TABLE `s183_polls` (
`id` int(10) unsigned NOT NULL auto_increment,
`title` varchar(255) default '',
`answers` text NOT NULL,
`results` varchar(60) NOT NULL default '',
`total_votes` int(10) NOT NULL default '0',
`when` int(10) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
2.Insert kode berikut ke tabel sql s183_polls
INSERT INTO `s183_polls` (`id`, `title`, `answers`, `results`, `total_votes`, `when`) VALUES== TIPS :
(NULL, 'Siapa saya', 'Manusia<sep>Orang gila<sep>Binatang<sep>Brian', '', 0, UNIX_TIMESTAMP()),
(NULL, 'Henlatoz itu', 'keren<sep>keren<sep>keren<sep>keren', '', 0, UNIX_TIMESTAMP()+1),
(NULL, 'siapa henlatoz', 'orang pintar<sep>orang cerdas<sep>mad dog<sep>Chuck norris', '', 0, UNIX_TIMESTAMP()+2),
(NULL, 'terimakasih untuk', 'lygacool<sep>henlatoz<sep>arvin<sep>henlatoz lagi', '', 0, UNIX_TIMESTAMP()+3),
(NULL, 'keep smile', 'ok<sep>sip<sep>mantap<sep>kocak', '', 0, UNIX_TIMESTAMP()+4);
- Ganti tulisan bewarna merah dengan judul/topik pertama2 yang muncul di index
- Ganti tulisan bewarna biru dengan nama yang akan di vote
3.sekarang..copy dan paste kode berikut dan beri nama "index.php"
4.buat folder "classes" , "css" , dan "js" (untuk file cs,dan konek ke mysql..sbaiknya download aja)<?php
// mamtikan peringatan!
if (version_compare(phpversion(), "5.3.0", ">=") == 1)
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
error_reporting(E_ALL & ~E_NOTICE);
require_once('classes/CMySQL.php'); // Memerlukan untuk di isi!
if ($_POST['do'] == 'vote') {
$iPollId = (int)$_POST['id'];
$iAnswer = (int)$_POST['answer'];
if ($iPollId && $iAnswer >= 0 && ! isset($_COOKIE['av' . $iPollId])) {
// Mendapatkan jumlah yang voting
$aPollInfo = $GLOBALS['MySQL']->getRow("SELECT * FROM `s183_polls` WHERE `id` = '{$iPollId}'");
// update jumlah voting
$aAnswers = explode('<sep>', $aPollInfo['answers']);
$iCnt = count($aAnswers);
$aVotes = ($aPollInfo['results'] == '') ? array_fill(0, $iCnt, 0) : explode('<sep>', $aPollInfo['results']);
$aVotes[$iAnswer]++;
$iVotesCount = array_sum($aVotes);
$sVotes = implode('<sep>', $aVotes);
$GLOBALS['MySQL']->res("UPDATE `s183_polls` SET `results` = '{$sVotes}', `total_votes` = {$iVotesCount} WHERE `id` = {$iPollId}");
$iVotesCnt = $aPollInfo['total_votes'] + 1;
$aPercents = array();
foreach ($aAnswers as $i => $sAnswer) {
$aPercents[$i] = round( (0 != $iVotesCnt ? (( $aVotes[$i] / $iVotesCnt ) * 100) : 0), 1);
}
setcookie('av' . $iPollId, '1', time() + 24*3600, '/'); // easy protection from duplicate votes
// Kembali ke js
echo json_encode($aPercents);
exit;
} else {
exit;
}
}
$sCode = '';
$iItemId = (int)$_GET['id'];
if ($iItemId) {
$aItemInfo = $GLOBALS['MySQL']->getRow("SELECT * FROM `s183_polls` WHERE `id` = '{$iItemId}'"); // get poll info
$aAnswers = explode('<sep>', $aItemInfo['answers']);
$iCnt = count($aAnswers);
$aVotes = ($aItemInfo['results'] == '') ? array_fill(0, $iCnt, 0) : explode('<sep>', $aItemInfo['results']);
$iVotesCnt = $aItemInfo['total_votes'];
$sAnswers = '';
foreach ($aAnswers as $i => $sAnswer) {
$fPercent = round((0 != $iVotesCnt ? (($aVotes[$i] / $iVotesCnt) * 100) : 0), 1);
$sAnswers .= "<div id='{$i}'><div>{$sAnswer} (<span>{$aVotes[$i]}</span>)</div><div class='row' style='width:{$fPercent}%'>{$fPercent}%</div></div>";
}
ob_start();
?>
<h1><?= $aItemInfo['title'] ?></h1>
<h3><?= date('F j, Y', $aItemInfo['when']) ?></h3><hr />
<div class="answers"><?= $sAnswers ?></div>
<hr /><h3><a href="<?= $_SERVER['PHP_SELF'] ?>">back</a></h3>
<script>
$(function(){
$('.answers > div').click(function () {
var answer = $(this).attr('id');
var $span = $(this).find('span');
$.post('<?= $_SERVER['PHP_SELF'] ?>', {id: <?= $iItemId ?>, answer: answer, do: 'vote'},
function(data){
if (data) {
var da = eval('(' + data + ')');
for (var p in da) {
$($('.answers > div .row')[p]).animate({
width: da[p] + "%"
}, 500);
$($('.answers > div .row')[p]).text(da[p] + "%");
}
$span.text(parseInt($span.text()) + 1);
}
}
);
});
});
</script>
<?
$sCode .= ob_get_clean();
} else {
$sCode .= '<h1>List of polls:</h1>';
$aItems = $GLOBALS['MySQL']->getAll("SELECT * FROM `s183_polls` ORDER by `when` ASC");
foreach ($aItems as $i => $aItemInfo) {
$sCode .= '<h2><a href="'.$_SERVER['PHP_SELF'].'?id='.$aItemInfo['id'].'">'.$aItemInfo['title'].'</a></h2>';
}
}
?>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>Buat AJAX Voting Sistem milikmu sendiri | Henlatoz,Lygacool</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
</head>
<body>
<div class="container">
<?= $sCode ?>
</div>
<footer>
<h2>Buat AJAX Voting Sistem milikmu sendiri</h2>
<a href="lygacool.blogspot.com" class="stuts">Kembali ke <span>Lygacool</span></a>
</footer>
</body>
</html>
5.Sekarang..copy dan paste kode berikut dan berinama dengan main.css dan save di folder css
*{
margin:0;
padding:0;
}
body {
background-repeat:no-repeat;
background-color:#bababa;
background-image: -webkit-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
background-image: -moz-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
background-image: -o-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
background-image: radial-gradient(600px 200px, circle, #eee, #bababa 40%);
color:#fff;
font:14px/1.3 Arial,sans-serif;
min-height:600px;
}
footer {
background-color:#212121;
bottom:0;
box-shadow: 0 -1px 2px #111111;
display:block;
height:70px;
left:0;
position:fixed;
width:100%;
z-index:100;
}
footer h2{
font-size:22px;
font-weight:normal;
left:50%;
margin-left:-400px;
padding:22px 0;
position:absolute;
width:540px;
}
footer a.stuts,a.stuts:visited{
border:none;
text-decoration:none;
color:#fcfcfc;
font-size:14px;
left:50%;
line-height:31px;
margin:23px 0 0 110px;
position:absolute;
top:0;
}
footer .stuts span {
font-size:22px;
font-weight:bold;
margin-left:5px;
}
.container {
border:3px #111 solid;
color:#000;
margin:20px auto;
padding:15px;
position:relative;
text-align:center;
width:500px;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
}
.answers > div {
cursor:pointer;
margin:0 0 0 40px;
padding:10px;
text-align:left;
}
.answers > div:hover {
background-color: rgba(255, 255, 255, 0.4);
}
.answers div .row {
background-color:#0f0;
}
---Sekian ..btw,sisanya download aja gan ..(gk di tulis panjang lebar..btw,kode di atas itu gk lengkap :P)
Untuk DEMO ..KLIK DISINI
Untuk Download ..KLIK DISINI (terdapat tutor install)
--Memiliki masalah,kritik,atau saran? ..comment disini atau ke forum kami : Dengan cara KLIK DISINI
Find out how 1,000's of individuals like YOU are earning their LIVING online and are fulfilling their dreams TODAY.
ReplyDeleteGET FREE INSTANT ACCESS