Aplikasi Undian untuk menentukan Urutan Pemenang

Membuat Aplikasi Undian untuk menentukan Urutan Pemenang

Aplikasi undian untuk menentukan urutan pemenang ini bisa digunakan untuk mengundi siapa yang mendapat nomor terakhir dan nomor pertama.

Jumlah nomor peserta bisa kita masukkan sesuai dengan keinginan hingga tak terbatas. Urutan pemenang akan ditampilkan mulai dari nomor paling bawah hingga nomor teratas.

Pertama, tentukan terlebih dahulu jumlah orang yang mengikuti undian tersebut. Kemudian pada aplikasi tekan tombol start/ mulai. Aplikasi akan berjalan dengan menentukan siapa saja yang akan mendapatkan nomor urut mulai dari nomor terakhir hingga nomor pertama.

Aplikasi ini cocok untuk digunakan untuk menentukan pemenang dari suatu kuis atau doorprize pada acara jalan sehat, acara hiburan, dll.

Untuk membuat aplikasi ini secara local computer, kita install terlebih dahulu software xampp sebagai webserver. Kemudian pada direktori web server kita buat sebuat folder untuk meletakkan kode-kode aplikasi undian ini.

Script aplikasi undian online ini bisa kita lihat pada baris program di bawah :

</pre>
<html>
<head>
<title>Aplikasi Undian</title>
<script language="JavaScript">
// @author m.izzul.mutho@gmail.com
 
\ var arr_undi = new Array();
var index = 0;
 
function getE(e){
return document.getElementById(e);
}
 
function countDown(max){
if(max > 0){
getE("frmUndi").style.display = "none";
getE("place_undi").innerHTML = '<div class="countdown">'+max+'</div>';
setTimeout('countDown('+(max-1)+')',1000);
} else { prepare(); }
}
 
function prepare(){
index = 0;
getE("explanation").style.display = "block";
getE("place_undi").innerHTML = "<h2>Penentuan Pemenang</h2>";
for(var i=0;i < getE("txtJumlahKelompok").value;i++){
arr_undi[i] =(i+1);
getE("place_undi").innerHTML+= '<div class="undian_item">'
+'<div class="undian_header">'+(i+1)+'</div>'
+'<div class="undian_content" id="undian_content_'+i+'">-</div>'
+'</div>';
if(((i+1) % 5) == 0){
getE("place_undi").innerHTML+= '<div style="clear:both;"></div>';
}
}
}
 
function ayoUndi(){
if(index == 0){
getE("btnStart").value = "Ulangi";
getE("btnStart").style.background = "#ccc";
}
if((index+1) == getE("txtJumlahKelompok").value){
getE("btnStart").style.background = "#8b9f07";
}
if(index < getE("txtJumlahKelompok").value){
acak(0,200);
 
getE("undian_content_"+(arr_undi.length-1)).innerHTML = arr_undi[0];
getE("undian_content_"+(arr_undi.length-1)).style.color = "#218ed4";
getE("undian_content_"+(arr_undi.length-1)).style.font = "bold 44px Arial";
getE("undian_content_"+(arr_undi.length-1)).style.marginTop = 5;
 
array_shift(arr_undi);
index++;
 
setTimeout('ayoUndi()',5000);
}
return true;
}
 
function acak(start,stop){
var j, k;
j = arr_undi.length-1; k = arr_undi.length-1;
if(start < stop){
while(j >= 0){
arr_undi = shuffle(arr_undi);
arr_undi = shuffle(arr_undi);
getE("undian_content_"+j).innerHTML = arr_undi[k];
j--; k--;
}
 
sleep(20);
start = start+1;
setTimeout('acak('+start+','+stop+')',1);
}
return true;
}
 
function sleep(milliseconds) {
var start = new Date().getTime();
for(var i = 0; i < 1e7; i++) {
if((new Date().getTime() - start) > milliseconds){
break;
}
}
}
 
function array_shift(inputArr){
var props = false,
shift = undefined,
pr = '',
allDigits = /^\d$/,
int_ct = -1,
_checkToUpIndices = function(arr, ct, key){
if(arr[ct] !== undefined){
var tmp = ct;
ct += 1;
if(ct === key){ ct += 1; }
ct = _checkToUpIndices(arr, ct, key);
arr[ct] = arr[tmp];
delete arr[tmp];
}
return ct;
};
 
if(inputArr.length === 0){ return null; }
if(inputArr.length > 0){ return inputArr.shift(); }
}
 
function shuffle(inputArr){
var valArr = [], k = '', i = 0, strictForIn = false, populateArr = [];
for(k in inputArr){
if(inputArr.hasOwnProperty(k)){
valArr.push(inputArr[k]);
if(strictForIn){ delete inputArr[k]; }
}
}
valArr.sort(function(){ return 0.5 - Math.random(); });
 
this.php_js = this.php_js ||{};
this.php_js.ini = this.php_js.ini ||{};
strictForIn = this.php_js.ini['phpjs.strictForIn'] && this.php_js.ini['phpjs.strictForIn'].local_value && this.php_js.ini['phpjs.strictForIn'].local_value !== 'off';
populateArr = strictForIn ? inputArr : populateArr;
 
for(i = 0; i < valArr.length; i++){
populateArr[i] = valArr[i];
}
 
return strictForIn || populateArr;
}
</script>
<style type="text/css">
body { margin:20px 0 auto 0 }
input { -moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; }
input[type="text"] { width:400px;margin:10px 0 10px 0;padding:2px;font:bold 24px Arial;border:1px solid #ccc;text-align:center; }
input[type="button"] { padding:4px 9px 4px 9px;font:bold 16px Arial;border:none;background:#8b9f07;color:#ffffff; }
 
#main { margin:0 auto 0 auto;width:950px;text-align:center; }
#frmUndi { font:bold 18px Arial; }
#place_undi { float:left;font:bold 14px Arial; }
#place_undi h2 { font:bold 28px Arial; }
#explanation { float:left;width:300px;height:222px;margin:85px 0 0 30px;text-align:center;border:1px solid #ccc;background:#f6f6f6; }
#explanation .header { margin:25px 0 0 0;font:normal 18px Arial;color:#000; }
#explanation .content { margin:35px 0 0 0;font:bold 40px Arial;color:#218ed4; }
#explanation input { margin:25px 0 0 0;padding:4px 9px 4px 9px;font:bold 16px Arial;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; }
 
.undian_item { float:left;width:100px;height:80px;padding:5px;margin:5px 5px 5px 5px;border:1px solid #ccc;background:#f6f6f6; }
.undian_header { font:bold 14px Arial;color:#000; }
.undian_content { margin:18px 0 0 0;font:bold 22px Arial;color:#bd1100; }
.countdown { width:900px;margin:150px auto 0 auto;text-align:center;font:bold 225px Arial;color:#bd1100; }
</style>
</head>
<body>
 
<br>
<div id="main">
<form action="" method="post" id="frmUndi">
Jumlah Data
<br />
<input type="text" name="txtJumlahKelompok" id="txtJumlahKelompok" value="10" />
<br />
<input type="button" name="btnSettingUp" id="btnSettingUp" value="Mulai" onclick="countDown(5);" />
</form>
<div id="place_undi"></div>
<div id="explanation" style="display:none;">
<div class="header">Urutan Pemenang</div>
<div class="content" id="explanation_header">No. Urut</div>
<input type="button" name="btnStart" id="btnStart" value="Undi" onclick="prepare();ayoUndi();" />
</div>
</div>
</body>
</html>
<pre>

Untuk menjalankanya kita buka browser kemudian ketik url alamat localhost/(nama folder untuk undian tersebut) kemudian enter. Terlebih dahulu jangan lupa untuk mengaktifkan PHP di xampp control panel yang kita install tadi.

Source Code Membuat installer pada aplikasi berbasis web

Source Code Membuat installer pada aplikasi berbasis web Untuk membuat installer pada aplikasi berbasis website yang kita buat salah satu Read more

Tutorial Codeigniter Gratis Membangun Sistem Informasi Akademik

Tutorial Codeigniter Gratis Membangun Sistem Informasi Akademik Codeigniter adalah salah satu framework yang bisa digunakan untuk membuat aplikasi dengan menggunakan Read more

Source Code Aplikasi PHP Gratis untuk Mengelola Berkas di Tempat Kerja

Source Code Aplikasi PHP Gratis untuk Mengelola Berkas di Tempat Kerja Aplikasi ini berfungsi untuk mengelompokkan file document secara digital Read more

Aplikasi Akuntansi Gratis untuk bisnis Indonesia

Aplikasi akuntansi gratis bahasa Indonesia untuk bisnis ini ditujukan kepada para milenial atau para pelaku usaha yang memerlukan aplikasi akuntansi Read more

© 2021 javacposjavacpos.com ALL RIGHT RESERVED