January 2015

Cara membuat polling atau voting dengan PHP

<div dir="ltr" style="text-align: left;" trbidi="on"><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6oa2M9cdY-h6mXrCQUnYO5a4KFkFvE6_Yvw7qup04OE94h4SOZa5Ra4EOuNDKHE6qggv0Qlcgt9tIzdrv0OBBFwL-KBRkX0s88Q6P0tqy2mVtEeh3uiLJRXFEN9l9ohMFZtwAwEATdcM/s1600/voting.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Membuat Voting atau Polling dengan PHP" border="0" height="286" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6oa2M9cdY-h6mXrCQUnYO5a4KFkFvE6_Yvw7qup04OE94h4SOZa5Ra4EOuNDKHE6qggv0Qlcgt9tIzdrv0OBBFwL-KBRkX0s88Q6P0tqy2mVtEeh3uiLJRXFEN9l9ohMFZtwAwEATdcM/s1600/voting.png" title="voting" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Membuat Voting atau Polling dengan PHP</td></tr>
</tbody></table> 
 
Kali ini saya bahas tentang Membuat Voting dengan PHP, voting biasanya digunakan oleh admin web dengan menyodorkan sebuah pertanyaan dengan beberapa sebuah pilihan kemudian pengunjung web disuruh memilih mana yang terbaik menurutnya. 
 
 
 
Okee Simak Baik-baik..... 
 
 
 
<div id="tabmenu"><ul id="nar"><li><a class="active" href=#">Database</a></li>
<li><a href="#">Style.css</a></li>
<li><a href="#">Index.php</a></li>
<li><a href="#">voting.php</a></li>
<li><a href="#">View-voting.php</a></li>
<li><a href="#">koneksi.php</a></li>
</ul><div id="tab-konten"><div id="tab1">Buatlah database dengan nama voting, berikut struktur databasenya: 
 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6CDJPf1IfAjZz0nrVWj3YQ70bdiP3ZQV5Vzck4Q1bk7_3MQFpOvUhlwooDxrAgQy3Phc0BgoVqQxx7mn_Q_ed_C5Rk3BLTpz9kJKRhE3ZbE2Jfto63XDU3fcDdjoHqXhJolKwA0KtbwE/s1600/db.png" /></div><div id="tab2"> 
 
 
 
body { 
 
 margin:0; 
 
 background-color:#fff; 
 
 
 
} 
 
 
 
#sidebar{ 
 
 background-color:#f3f1e7; 
 
 margin-left:30%; 
 
 margin-right:30%; 
 
 margin-top:5%; 
 
 border-radius:5px; 
 
 box-shadow:5px 0px 5px #999; 
 
 border-color:#C4E0AF; 
 
 border-style:solid; 
 
 border-width:thin; 
 
} 
 
 
 
 #sidebar .body { 
 
 margin: 20px 5px 20px 5px; 
 
 } 
 
 
 
 #sidebar .judul { 
 
 margin:-13px auto 0; 
 
 width:98%; 
 
 height:35px; 
 
 background-color:#96b74b; 
 
 background-repeat:repeat-x; 
 
 border-radius:5px; 
 
 } 
 
 
 
 #sidebar .judul h4{ 
 
 color:#ffffff; 
 
 text-shadow:0px 0px 5px #666666; 
 
 padding-left:10px; 
 
 padding-top:5px; 
 
 } 
 
 
 
 #sidebar li{ 
 
 list-style-type:none; 
 
 display:block; 
 
 padding-top:8px; 
 
 padding-bottom:8px; 
 
 margin-left:-40px; 
 
 border-bottom:1px solid; 
 
 border-color:#C4E0AF; 
 
 
 
 } 
 
 
 
 #sidebar li a{ 
 
 color:#2e776a; 
 
 text-decoration:none; 
 
 padding-left:5px; 
 
 } 
 
 
 
 #sidebar li:hover{ 
 
 color:#ffffff; 
 
 background-color:#b2df8e; 
 
 padding-left:-80px; 
 
 } 
 
 </div><div id="tab3"><?php 
 
include "koneksi.php"; 
 
?> 
 
 
 
<!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" /> 
 
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/> 
 
<title>Demo Voting - Masholeh</title> 
 
<link href="style.css" rel="stylesheet" type="text/css" /> 
 
<script type="text/javascript"> 
 
function voting(){ 
 
 
 
 alert('Terima Kasih Anda telah mengikuti Voting'); 
 
 return false; 
 
 
 
} 
 
</script> 
 
 
 
</head> 
 
 
 
<body> 
 
<div id="isi"> 
 
 
 
<div id="sidebar"><div class="judul"><h4>Tentukan Pilihan Anda</h4></div> 
 
<div class="body"> 
 
 Apakah Tutorial WWW.BLOG.MASHOLEH.WEB.ID Bermanfaat Bagi Anda? 
 
 <form method="post" action="voting.php"> 
 
 
 
 <table> 
 
 <tr><td width="20"><input type="Radio" name="polling" value="sangat" checked></td> 
 
 <td>Sangat Bermanfaat</td></tr> 
 
 <tr><td width="20"><input type="Radio" name="polling" value="bermanfaat"></td> 
 
 <td>Bermanfaat</td></tr> 
 
 <tr><td width="20"><input type="Radio" name="polling" value="biasa"></td> 
 
 <td>Biasa Saja</td></tr> 
 
 <tr><td width="20"><input type="Radio" name="polling" value="tidak"></td> 
 
 <td>Tidak Bermanfaat</td></tr> 
 
 <tr><td width="20"><input type="Radio" name="polling" value="sangattidak"></td> 
 
 <td>Sangat Tidak Bermanfaat</td></tr> 
 
 <tr><td width="20"></td><td><input type="submit" name="polling2" value="Vote" onClick="voting();"></tr> 
 
 </table> 
 
 
 
 </form> 
 
 
 
</div> 
 
</div> 
 
 
 
 
 
</div> 
 
</body> 
 
</html></div><div id="tab4"><? 
 
if (isset($_POST['polling'])) 
 
{ 
 
 include "koneksi.php"; 
 
 $pilihan=$_POST['polling']; 
 
 $tanggal; 
 
 
 
 $polling=mysql_db_query($db,"select * from voting",$koneksi); 
 
 $baris=mysql_fetch_row($polling); 
 
 list($sangat,$bermanfaat,$biasa,$tidak,$sangattidak)=$baris; 
 
 
 
 $array1=$sangat+1; 
 
 $array2=$bermanfaat+1; 
 
 $array3=$biasa+1; 
 
 $array4=$tidak+1; 
 
 $array5=$sangattidak+1; 
 
 
 
 
 
 switch($pilihan) 
 
 { 
 
 case "sangat"; 
 
 echo " "; 
 
 $update=mysql_db_query($db,"update voting set sangat='$array1', tanggal='$tanggal'",$koneksi); 
 
 echo "<script> document.location.href='view-voting.php'; </script>"; 
 
 break; 
 
 
 
 case "bermanfaat"; 
 
 echo " "; 
 
 $update=mysql_db_query($db,"update voting set bermanfaat='$array2', tanggal='$tanggal'",$koneksi); 
 
 echo "<script> document.location.href='view-voting.php'; </script>"; 
 
 break; 
 
 
 
 case "biasa"; 
 
 echo " "; 
 
 $update=mysql_db_query($db,"update voting set biasa='$array3', tanggal='$tanggal'",$koneksi); 
 
 echo "<script> document.location.href='view-voting.php'; </script>"; 
 
 break; 
 
 
 
 case "tidak"; 
 
 echo " "; 
 
 $update=mysql_db_query($db,"update voting set tidak='$array4', tanggal='$tanggal'",$koneksi); 
 
 echo "<script> document.location.href='view-voting.php'; </script>"; 
 
 break; 
 
 
 
 case "sangattidak"; 
 
 echo " "; 
 
 $update=mysql_db_query($db,"update voting set sangattidak='$array5', tanggal='$tanggal'",$koneksi); 
 
 echo "<script> document.location.href='view-voting.php'; </script>"; 
 
 break; 
 
 
 
 } 
 
 
 
}</div><div id="tab5"><!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" /> 
 
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/> 
 
<title>Demo Voting - Masholeh</title> 
 
<link href="style.css" rel="stylesheet" type="text/css" /> 
 
</head> 
 
 
 
<body> 
 
 
 
<? 
 
 include "inc/koneksi.php"; 
 
 $hasil=mysql_db_query($db,"select * from voting",$koneksi); 
 
 $row=mysql_fetch_row($hasil); 
 
 list($sangat,$bermanfaat,$biasa,$tidak,$sangattidak,$megah,$masih)=$row; 
 
 $total=(int)$sangat+(int)$bermanfaat+(int)$biasa+(int)$tidak+(int)$sangattidak; 
 
 
 
 //menampilkan persentase 
 
 $persen_sangat =round(((int)$sangat/(int)$total)*100,2); 
 
 $persen_bermanfaat =round(((int)$bermanfaat/(int)$total)*100,2); 
 
 $persen_biasa =round(((int)$biasa/(int)$total)*100,2); 
 
 $persen_tidak =round(((int)$tidak/(int)$total)*100,2); 
 
 $persen_sangattidak =round(((int)$sangattidak/(int)$total)*100,2); 
 
 $persen_megah =round(((int)$megah/(int)$total)*100,2); 
 
 $persen_masih =round(((int)$masih/(int)$total)*100,2); 
 
 
 
 //mengkonversi persentasi menjadi ukuran pada diagram batang dengan mengalikan faktor 2, karena jika 100% artinya lebar maksimum digram adalah 100pt 
 
 $lebar_sangat=$persen_sangat*2; 
 
 $lebar_bermanfaat=$persen_bermanfaat*2; 
 
 $lebar_biasa=$persen_biasa*2; 
 
 $lebar_tidak=$persen_tidak*2; 
 
 $lebar_sangattidak=$persen_sangattidak*2; 
 
 
 
 
 
?> 
 
 
 
<div id="sidebar"><div class="judul"><h4>Hasil Voting</h4></div> 
 
 
 
<center>Apakah Tutorial WWW.BLOG.MASHOLEH.WEB.ID Bermanfaat Bagi Anda?</center> 
 
<table width="100%" border="0" cellspacing="2" cellpadding="2"> 
 
<tr> 
 
 <td><table border="0" width="100%"> 
 
    
 
      <tr> 
 
        <td width="30%" align="left">Sangat Bermanfaat</td> 
 
        <td width="5%" align="right"><? echo $sangat;?></td> 
 
        <td width="1%">&nbsp;</td> 
 
        <td width="20%" align="left"><img src="images/stat.jpg" border="1" width="<? echo $lebar_sangat ?>" height="12"> 
 
 <? echo $persen_sangat."%"; ?></td> 
 
      </tr> 
 
      <tr> 
 
        <td align="left">Bermanfaat</td> 
 
        <td align="right"><? echo $bermanfaat;?></td> 
 
        <td>&nbsp;</td> 
 
        <td align="left"><img src="images/stat.jpg" border="1" width="<? echo $lebar_bermanfaat ?>" height="12"> 
 
 <? echo $persen_bermanfaat."%";?> </td> 
 
      </tr> 
 
      <tr> 
 
        <td align="left">Biasa Saja</td> 
 
        <td align="right"><? echo $biasa;?></td> 
 
        <td>&nbsp;</td> 
 
        <td align="left"><img src="images/stat.jpg" border="1" width="<? echo $lebar_biasa ?>" height="12"> 
 
 <? echo $persen_biasa."%";?></td> 
 
      </tr> 
 
  <tr> 
 
        <td align="left">Tidak Bermanfaat</td> 
 
        <td align="right"><? echo $tidak;?></td> 
 
        <td>&nbsp;</td> 
 
        <td align="left"><img src="images/stat.jpg" border="1" width="<? echo $lebar_tidak ?>" height="12"> 
 
 <? echo $persen_tidak."%"; ?></td> 
 
      </tr> 
 
      <tr> 
 
        <td align="left">Sangat Tidak Bermanfaat</td> 
 
        <td align="right"><? echo $sangattidak;?></td> 
 
        <td>&nbsp;</td> 
 
        <td align="left"><img src="images/stat.jpg" border="1" width="<? echo $lebar_sangattidak ?>" height="12"> 
 
 <? echo $persen_sangattidak."%";?> </td> 
 
      </tr> 
 
    </table> 
 
 </td> 
 
</tr> 
 
<tr> 
 
 <td align="center"><? echo 'Total Voting : ',$total; ?></td> 
 
</tr> 
 
</table> 
 
 
 
<a href="index.php">Back To Home</a> 
 
</div> 
 
 
 
 
</div><div id="tab6"><?php 
 
ini_set('display_errors',FALSE); 
 
 $server="localhost"; 
 
 $user_db="root"; 
 
 $pass_db=""; 
 
 $db="voting"; 
 
 
 
$koneksi=mysql_connect($server,$user_db,$pass_db) or die("Gagal Koneksi DB!"); 
 
mysql_select_db($db) or die ("DB tidak ada!"); 
 
$tanggal=date("Y-m-d"); 
 
 
 
?></div></div></div><div style="text-align: center;">Sekian dari saya, banyak lebihnya Terimakasih !!! 
 
 
</div><div style="text-align: center;"><a class="kr_button rounded" href="http://www.masholeh.web.id/blog/demo/voting" target="_blank"> Demo </a><a class="kr_button rounded" href="http://www.masholeh.web.id/blog/download/voting.zip" target="_blank"> Download</a></div></div>

Membuat Voting atau Polling dengan PHP Kali ini saya bahas tentang Membuat Voting dengan PHP, voting biasanya digunakan oleh admin web dengan menyodo…

Jan 19, 2015 +

Cara membuat dan mendesain progress bar sendiri dengan CSS

<div dir="ltr" style="text-align: left;" trbidi="on">
 
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbycWttad63chJLujRQh_UiPox6zIoastQQij9JCZLRpdikLacMtsXtBB4nXCbeeXZGb_ngluWeXO7RaPl5SMj2TydKYsXxgGfr_-i2UwUEV_3Gc98bCBeW1AopPrJUMKD6j8IIzZwBhM/s1600/5387e_21-35-gorgeous-progress-bars.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Cara membuat dan mendesain progress bar sendiri dengan CSS" border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbycWttad63chJLujRQh_UiPox6zIoastQQij9JCZLRpdikLacMtsXtBB4nXCbeeXZGb_ngluWeXO7RaPl5SMj2TydKYsXxgGfr_-i2UwUEV_3Gc98bCBeW1AopPrJUMKD6j8IIzZwBhM/s1600/5387e_21-35-gorgeous-progress-bars.png" title="progress bar " width="320" /></a></div>
 
Wah gak terasa udah tahun 2015 dan baru update ne gara-gara di kul 
banyak tugas, (curhat dulu, hehhee). Setelah tugas dan UAS selesai admin
 duduk-duduk dan minum secangkir kopi sambil muter otak kira-kira mau 
update apa ya, emm, dan ahirnya saya tetapkan untuk buat tutorial desain
 progress. Untuk hal ini anda wajib ne mengenal siapa tu mbah jquery 
(library javascript),hahaha bagi yang belum sapa dulu, kenalan gitu sama
 mbah jquery. dan tentunya Css juga harus wajib mengerti, setidaknya 
basicnya.

Lanjut ke tutorial ya, siapkan editor kesayangan anda, apakah wajib? ya 
donk, lah kalau egak mau pake apa? maksudnya kesayangan? ya kalau gak 
sayang gak mood ngerjainnya nanti. 
Setelah itu buat halaman utamanya, masukkan kode HTML di bawah ini, dan 
jangan lupa library javascriptnya itu di atur dimana anda menaruhkan 
library.

<div id="kotakKode">
index.php
<div>
<pre class="prettyprint lang-html linenums prettyprinted"><ol class="linenums">
<li class="L0"><!DOCTYPE HTML></li>
<li class="L1"><head></li>
<li class="L2"> <meta http-equiv="content-type" content="text/html" /></li>
<li class="L3"> <meta name="author" content="mmlpro" /></li>
<li class="L4"> </li>
<li class="L5"> <script type="text/javascript" src="jquery-1.10.2.js"></script></li>
<li class="L6"> </li>
<li class="L7"> <title>desain progress</title></li>
<li class="L8"></head></li>
<li class="L9"> </li>
<li class="L0"><body></li>
<li class="L1"> </li>
<li class="L2"><h1>design progress by:mmlpro</h1></li>
<li class="L3"> </li>
<li class="L4"><div id="konten"></li>
<li class="L5"> <button value="25">25%</button></li>
<li class="L6"> <button value="50">50%</button></li>
<li class="L7"> <button value="75">75%</button></li>
<li class="L8"> <button value="100">100%</button></li>
<li class="L9"> <a class="run">Run</a></li>
<li class="L0"> </li>
<li class="L1"> <div id="progress">0%</div></li>
<li class="L2"></div></li>
<li class="L3"> </li>
<li class="L4"></body></li>
<li class="L5"></html></li>
</ol>
</pre>
</div>
</div>
Udah? cepet banget, padahal aku nulisnya aja lumayan beberapa menit. hehehe 
Sekarang cssnya silahkan dicopy. Simpan dengan nama style.css dan 
panggil css dengan cara external, taruh di dalam element head. Manggil 
cssnya seperti ini. 
<link href="style.css" rel="stylesheet"/>

<div id="kotakKode">
style.css
<div>
<pre class="prettyprint lang-css linenums prettyprinted"><ol class="linenums">
<li class="L0">body{margin:0;padding:0;background:#eeeeee;font-family: 'lucida grande',sans,verdana,arial,sans-serif;font-size:14px;color:#555555;}</li>
<li class="L1">h1{</li>
<li class="L2"> font-weight: normal;</li>
<li class="L3"> text-align: center;</li>
<li class="L4"> position: relative;</li>
<li class="L5">}</li>
<li class="L6">h1 sub{</li>
<li class="L7"> font-size: 12px;</li>
<li class="L8"> position: absolute;</li>
<li class="L9"> bottom:3px;</li>
<li class="L0">}</li>
<li class="L1">#konten{</li>
<li class="L2"> background-color: #ffffff;</li>
<li class="L3"> padding:10px 5px;</li>
<li class="L4"> width:400px;</li>
<li class="L5"> margin: 0 auto;</li>
<li class="L6">}</li>
<li class="L7">a{</li>
<li class="L8"> border:1px solid #bbb;</li>
<li class="L9"> background-color: #eeeeee;</li>
<li class="L0"> cursor: pointer;</li>
<li class="L1"> padding:0px 5px;</li>
<li class="L2"> position: relative;</li>
<li class="L3">}</li>
<li class="L4">a:after{</li>
<li class="L5"> content:"";</li>
<li class="L6"> position: absolute;</li>
<li class="L7"> top:0px;</li>
<li class="L8"> bottom:0px;</li>
<li class="L9"> right:-10px;</li>
<li class="L0"> border-left:10px #eeeeee solid;</li>
<li class="L1"> border-top:7px solid transparent;</li>
<li class="L2"> border-bottom:7px solid transparent;</li>
<li class="L3">}</li>
<li class="L4">a:before{</li>
<li class="L5"> content:"";</li>
<li class="L6"> position: absolute;</li>
<li class="L7"> top:-1px;</li>
<li class="L8"> bottom:-1px;</li>
<li class="L9"> right:-11px;</li>
<li class="L0"> border-left:11px #bbb solid;</li>
<li class="L1"> border-top:7px solid transparent;</li>
<li class="L2"> border-bottom:7px solid transparent;</li>
<li class="L3">}</li>
<li class="L4">button{</li>
<li class="L5"> border:1px solid #ccc;</li>
<li class="L6"> background-color: #eeeeee;</li>
<li class="L7"> cursor: pointer;</li>
<li class="L8">}</li>
<li class="L9">#progress{</li>
<li class="L0"> background-color: #f5f5f5;</li>
<li class="L1"> border:1px solid #ccc;</li>
<li class="L2"> margin: 10px 0px;</li>
<li class="L3"> border-radius: 7px;</li>
<li class="L4"> -webkit-border-radius: 7px;</li>
<li class="L5"> -moz-border-radius: 7px;</li>
<li class="L6"> border-radius: 7px;</li>
<li class="L7">}</li>
<li class="L8">#progress p{</li>
<li class="L9"> text-align: center;</li>
<li class="L0"> font-weight: bold;</li>
<li class="L1"> margin:0;</li>
<li class="L2"> padding:3px 0px;</li>
<li class="L3"> width:0;</li>
<li class="L4"> max-width: 100%;</li>
<li class="L5"> -webkit-border-radius: 7px;</li>
<li class="L6"> -moz-border-radius: 7px;</li>
<li class="L7"> border-radius: 7px;</li>
<li class="L8">}</li>
<li class="L9">.bgColor1{</li>
<li class="L0"> background-color: #DF8E84;</li>
<li class="L1"> color:#ffffff;</li>
<li class="L2">}.bgColor2{</li>
<li class="L3"> background-color: #C6DF84;</li>
<li class="L4"> color:#222;</li>
<li class="L5">}.bgColor3{</li>
<li class="L6"> background-color: #7ED777;</li>
<li class="L7"> color:#ffffff;</li>
<li class="L8">}</li>
</ol>
</pre>
</div>
</div>
Tambahkan script jquerynya seperti ini, taruh di file utama dan didalam element head seperti saat manggil css tadi.

<div id="kotakKode">

<div>
<pre class="prettyprint lang-javascript linenums prettyprinted"><ol class="linenums">
<li class="L0"> <script type="text/javascript"></li>
<li class="L1"> $(function(){</li>
<li class="L2"> var progress=$("#progress");</li>
<li class="L3"> var kontentProgress=$("#progress p");</li>
<li class="L4"> var button=$("button");</li>
<li class="L5"> var runaway=$(".run");</li>
<li class="L6"> var timer=null;</li>
<li class="L7"> </li>
<li class="L8"> //jalankan otomatis</li>
<li class="L9"> runaway.click(function(){</li>
<li class="L0"> var i;</li>
<li class="L1"> i=0;</li>
<li class="L2"> function tambahProgress(){</li>
<li class="L3"> i++;</li>
<li class="L4"> kontentProgress.css({"width":i+"%"}).text(i+"%");</li>
<li class="L5"> bgcolor(i);</li>
<li class="L6"> timer=setTimeout(tambahProgress, 50);</li>
<li class="L7"> if(i==100){</li>
<li class="L8"> clearTimeout(timer);</li>
<li class="L9"> kontentProgress.text("Loading selesai");</li>
<li class="L0"> }</li>
<li class="L1"> }</li>
<li class="L2"> timer=setTimeout(tambahProgress, 50);</li>
<li class="L3"> });</li>
<li class="L4"> </li>
<li class="L5"> //jika button diklik</li>
<li class="L6"> button.click(function(){</li>
<li class="L7"> clearTimeout(timer);</li>
<li class="L8"> var nilaiPersen=$(this).val();</li>
<li class="L9"> kontentProgress.css({"width":nilaiPersen+"%"}).text(nilaiPersen+"%");</li>
<li class="L0"> bgcolor(nilaiPersen);</li>
<li class="L1"> });</li>
<li class="L2"> </li>
<li class="L3"> </li>
<li class="L4"> //pengaturan bacground dan warna</li>
<li class="L5"> function bgcolor(nilai){</li>
<li class="L6"> if(nilai<35){</li>
<li class="L7"> kontentProgress.removeClass();</li>
<li class="L8"> kontentProgress.addClass("bgColor1");</li>
<li class="L9"> }else if(nilai>35 && nilai<60){</li>
<li class="L0"> kontentProgress.removeClass();</li>
<li class="L1"> kontentProgress.addClass("bgColor2");</li>
<li class="L2"> }else if(nilai>60 && nilai<=100){</li>
<li class="L3"> kontentProgress.removeClass();</li>
<li class="L4"> kontentProgress.addClass("bgColor3");</li>
<li class="L5"> }</li>
<li class="L6"> }</li>
<li class="L7"> });</li>
<li class="L8"> </li>
<li class="L9"> </script></li>
</ol>
</pre>
</div>
</div>
Nah coba di jalankan file uatamanya dengan browser kesayangan anda. 
Kalau aku sih pas buatnya makek google chrome (udah kebiasaan pakai 
google chrome) 
Gimana? Jalan atau tidak? jika ada yang eror bisa di tanyakan kok. iya, silahkan saja.

Keterangan :

Disini saya membuatnya untuk simulasi saja. Silahkan atur sendiri dari 
mana progress ini mendapatkan nilai, entah dengan cara eksekusi waktu 
ataupun dengan mendeteksi saat eksekusi file. Kalau di tutorial ini saya
 mengatur nilai progress dari value button dan juga dari looping di 
setTimout. 
Untuk bagian mendapatkan nilai dengan cara klik button, nilai persen di 
ambil dari value button yang di klik. Coba anda lihat discript jquery 
bagian button click. terdapat deklarasi variable seperti ini. 
var nilaiPersen=$(this).val();
 
Itu untuk mendapatkan nilai(value) dari button yang di klik. Nah untuk 
memasukkan nilai persen ke progressnya dan juga nilai panjangnya 
progress berjalan saya gunakan ini.
 
kontentProgress.css({"width":nilaiPersen+"%"}).text(nilaiPersen+"%");
 
Maksud dari script code di atas adalah mengatur panjang element p yang berada di dalam selector #progress menggunakan properti css width, dan megatur text di dalam element p.
 
Anda melihat ini? bgcolor(nilaiPersen);, itu saya gunakan untuk mengeksekusi Function bgcolor
 dan mengirimkan nilainya. Function ini saya gunakan untuk mengatur 
warna background dan text dan didalamnya terdapat if else statement yang
 akan menerima nilai progress dan mengubah warna progress setiap nilai 
yang sudah di tentukan di if else. Pengambilan/pengaturan warna dari 
progress saya gunakan teknik addClass dan removeClass yang nantinya akan
 menambah class keelement dan menghapus class dielement.

Di element run jika diklik progressnya akan berjalan sendiri saya 
gunakan setTimeout. Untuk memasukkan nilai ke progress tekniknya sama 
seperti tadi, cuma bedanya disini mendapatkan nilainya dari looping dan 
nantinya akan menghentikan setTimeout bila variable i sudah mencapai nilai 100 dengan tekik if statement condisi itu.
 
clearTimeout(timer); 
code inilah yang untuk menghentikan setTimeoutnya. Perhatikan deklarasi 
var yang di buat diatas sendiri, semua berhubungan dengan setTimoutnya 
kan maka clear timoutnya ditujukan ke timer.
 
Untuk perubahan warna sama seperti button klik tadi, memanggil function bgcolor(i); dan mengirimkan nilainya dari looping.

Yah, segitu aja yang diterangkan, jika ada yang kurang jelas bisa 
ditanyakan. Lewat facebook atau kontak lainnya. Terimakasih sudah 
berkunjung. 
 
<a href="https://app.box.com/s/lpd8bej8gij78956qscnyakj9c404zt6">DOWNLOAD </a> 
 
 
re-post from http://mmlpro.com/23/-membuat-dan-mendesain-progress-bar-sendiri.html 
</div>

Cara membuat dan mendesain progress bar sendiri dengan CSS

Wah gak terasa udah tahun 2015 dan baru update ne gara-gara di kul banyak tugas, (curhat dulu, hehhee). Setelah tugas dan UAS selesai admin duduk-d…

Jan 18, 2015 +

Load more posts

M-S Blog

M-S Blog

M-S Blog

Cara membuat polling atau voting dengan PHP

Cara membuat dan mendesain progress bar sendiri dengan CSS

Popular Posts

Blog Archive