Source Code Reservasi Bangku dengan Jquery

Ketika anda membuat aplikasi reservasi bangku duduk untuk bus,hall konser,lapangan,dll pastinya akan berpikir membuat yang lebih canggih. Contohnya membuat reservasi langsung klik yg disukai oleh pengunjung anda.
Sekarang saya membagikan source code untuk implementasi reservasi bangku dengan Jquery.
Pertama sekali yang harus diperhatikan adalah :
1. Jquery dan Javascript
2. Cookies (Source code ini membutuhkan cookies, jadi browser anda harus support cookies)
3. Desain bangku

Nah, untuk desain bangku, saya memberikan contoh sebagai berikut :

Untuk lebih mudahnya buatlah desain bangku tersebut di Dreamweaver atau kalau yang sudah ahli, buat pake kode sendiri.

Berikut kode HTML desain bangkunya :

<table width="10%" border="0" cellpadding="4" cellspacing="4" class="aaaaa">
  <tr>
    <td colspan="2" align="center" valign="middle"><h5>PINTU</h5></td>
    <td align="center" valign="middle"><h5>CC</h5></td>
    <td colspan="2" align="center" valign="middle"><h5>SUPIR</h5></td>
  </tr>
  <tr>
    <td><div class="bangku btn-hijau" data-id="0">1</div></td>
    <td><div class="bangku btn-hijau" data-id="0">2</div></td>
    <td>&nbsp;</td>
    <td><div class="bangku btn-hijau" data-id="0">3</div></td>
    <td><div class="bangku btn-hijau" data-id="0">4</div></td>
  </tr>
  <tr>
    <td><div class="bangku btn-hijau" data-id="0">5</div></td>
    <td><div class="bangku btn-hijau" data-id="0">6</div></td>
    <td>&nbsp;</td>
    <td><div class="bangku btn-hijau" data-id="0">7</div></td>
    <td><div class="bangku btn-hijau" data-id="0">8</div></td>
  </tr>
  <tr>
    <td><div class="bangku btn-hijau" data-id="0">9</div></td>
    <td><div class="bangku btn-hijau" data-id="0">10</div></td>
    <td>&nbsp;</td>
    <td><div class="bangku btn-hijau" data-id="0">11</div></td>
    <td><div class="bangku btn-hijau data-id="0">12</div></td>
  </tr>
</table>

Keterangan :
data-id digunakan untuk membuat parameter status bangku. Disini saya membuat value nya adalah 0. Artinya bangku tersedia :D
class bangku ini nantinya berguna untuk menginisialkan ke Jquery sebagai bangku
Untuk membuat bangku petak-petak seperti di atas, saya membuat CSS nya seperti berikut :

.bangku
{
width: 30px;
height:30px;
text-align:center;
font-size:20px;
background-color:#F00;
color:#FFF;
cursor:pointer;
margin-top:4px;
margin-right:4px;
}
.btn-hijau
{
background:#4fb821;
} .btn-biru
{
background:#2c35f1;
}

Nah sekarang mari kita buat kode javascriptnya :
Pertama jangan lupa includekan JQuery di atas kode halaman. Bisa pakai CDN ataupun Embed Javascipt.
Lalu buatlah kode seperti berikut :

<script>
function writeCookie(name,value,days) {
    var date, expires;
    if (days) {
        date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        expires = "; expires=" + date.toGMTString();
            }else{
        expires = "";
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
    var i, c, ca, nameEQ = name + "=";
    ca = document.cookie.split(';');
    for(i=0;i < ca.length;i++) {
        c = ca[i];
        while (c.charAt(0)==' ') {
            c = c.substring(1,c.length);
        }
        if (c.indexOf(nameEQ) == 0) {
            return c.substring(nameEQ.length,c.length);
        }
    }
    return '';
}
$(document).ready(function(){
$('.bangku').each(function() {
   $(this).click(function() {
        var i=$(this).attr("data-id");
if(i=="1")
{
return false;
}else{
if(i=="0")
{
$(this).attr('class','btn-biru bangku');
$(this).attr('data-id','3');
Tambah();
}else if(i=="3"){
$(this).attr('class','btn-hijau bangku');
$(this).attr('data-id','0');
Tambah();
}
}
   });
  });
    $("#lihattotal").click(function(){
  var total=$('div[data-id="3"]').length;
  alert("Jumlah pemesanan " + total);
  });
    $("#lihatbangku").click(function(){
  var str = [], item;
   $.each($('div[data-id="3"]'), function (index, value) {
       item = $(this).text();                
       str.push(item);                
   });
   var selek=str.join(',');
   alert("Bangku yg dipesan "+selek);
  });
    function Tambah() {
 var total=$('div[data-id="3"]').length;
    var str = [], item;
   $.each($('div[data-id="3"]'), function (index, value) {
       item = $(this).text();                
       str.push(item);                
   });
   var selek=str.join(',');
    writeCookie('totseat',total,1);
    writeCookie('selekseat',selek,1);
    }
});
</script>

Keterangan :
WriteCookie untuk membuat cookies
ReadCookie untuk membaca cookies

Nah untuk function each class bangku saat klik yang sudah kita desain tadi akan berfungsi untuk semua bangku. Lalu untuk logika sederhananya, jika data-id = 0 maka Reservasi (data-id jadi 3), lalu berikut sebaliknya.

Ada function tambah yang tujuannya, menghitung semua bangku yang telah direservasi dan detail bangku yang dipesan.
Sekian beberapa artikel nya, untuk mencobanya silahkan klik tombol dibawah ini :



Demo
Download Source Code

Tweet