seat reservation with jquery and php

seat reservation with jquery and php. We are designing a bus reservation system. We store all the data in a DB MySql using PHP page.

seat reservation with jquery and php

You have more jquery.js library include that comes after the simply Slider Revolution files js inclusion.

Seat Reservation with jQuery

HTML: Code

 Choose seats by clicking the corresponding seat in the layout below:
    
 
        

        
    
    
    
 
    

        
Available Seat
        
Booked Seat
        
Selected Seat
    
    
        

        
                   
        

Settings:

var settings = {
               rows: 5,
               cols: 15,
               rowCssPrefix: 'row-',
               colCssPrefix: 'col-',
               seatWidth: 35,
               seatHeight: 35,
               seatCss: 'seat',
               selectedSeatCss: 'selectedSeat',
               selectingSeatCss: 'selectingSeat'
           };

Seat Layout:

var init = function (reservedSeat) {
                var str = [], seatNo, className;
                for (i = 0; i < settings.rows; i++) {
                    for (j = 0; j < settings.cols; j++) {
                        seatNo = (i + j * settings.rows + 1);
                        className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
                        if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
                            className += ' ' + settings.selectedSeatCss;
                        }
                        str.push('
' +
                                  '' + seatNo + '' +
                                  '
');
                    }
                }
                $('#location').html(str.join(''));
            };
            //case I: Show from starting
            //init();
 
            //Case II: If already booked
            var bookedSeats = [5, 10, 25];
            init(bookedSeats);

Seat Selection:

jQuery code

$('.' + settings.seatCss).click(function () {
if ($(this).hasClass(settings.selectedSeatCss)){
    alert('This seat is already reserved');
}
else{
    $(this).toggleClass(settings.selectingSeatCss);
    }
});
 
$('#btnShow').click(function () {
    var str = [];
    $.each($('#location li.' + settings.selectedSeatCss + ' a, #location li.'+ settings.selectingSeatCss + ' a'), function (index, value) {
        str.push($(this).attr('title'));
    });
    alert(str.join(','));
})
 
$('#btnShowNew').click(function () {
    var str = [], item;
    $.each($('#location li.' + settings.selectingSeatCss + ' a'), function (index, value) {
        item = $(this).attr('title');                   
        str.push(item);                   
    });
    alert(str.join(','));
})

CSS code

#holder{    
height:200px;    
width:550px;
background-color:#F5F5F5;
border:1px solid #A4A4A4;
margin-left:10px;   
}
#location {
position:relative;
margin:7px;
}
#location a{
font-size:0.6em;
}
#location li
{
 list-style: none outside none;
 position: absolute;   
}    
#location li:hover
{
background-color:yellow;      
} 
#location .seat{
background:url("images/available_seat_img.gif") no-repeat scroll 0 0 transparent;
height:33px;
width:33px;
display:block;   
}
#location .selectedSeat
{ 
background-image:url("images/booked_seat_img.gif");          
}
#location .selectingSeat
{ 
background-image:url("images/selected_seat_img.gif");        
}
#location .row-3, #location .row-4{
margin-top:10px;
}
#seatDescription li{
verticle-align:middle;    
list-style: none outside none;
padding-left:35px;
height:35px;
float:left;
}

PHP session management using database

I hope you get an idea about seat reservation with jquery and php.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.