July 27, 2019

Online Movie Tickets Booking using jQuery

Online movie tickets booking system using jQuery based. Instead of standing in a queue and buying tickets, it is a waste of time and energy. The ticket reservation system allowing you to book in a few easy steps. Where you can book tickets in advance, know your movie show timing, movie name, and seat number.

You know everything about a movie and its show rates and showtime just sitting on your desktop or mobile phone. You can buy tickets just by selecting a movie and seats. By using jQuery here you can book the tickets first you need to select movie and seats then you get the seat selection option in that you need to select the seats once you completed the selection process then you get the booking confirmation. If you like to store this information you need to use PHP/MySQL.

Inbetween the seat selection and booking confirmation you like to integrate online payment gateway there is a lot of providers are there. Popularly Paypal, American Express, CCAvenue, Paytm, Payumoney, etc., Using this payment gateway you can process the movie tickets. For this, you need one online website in that you need to integrate the below code. Once you integrate your payment gateway then the users can book the tickets and you get the payment to your bank account.

Here you also see Movie Card UI Design Using HTML & CSS.

index.html

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<title>
    Online Movie Tickets Booking - softAOX
</title>

<body>
    <div class="container">
        <div class="row d-flex justify-content-center">
            <div class="logo">
                <img src="img/softaox_movie.svg" width="150px" />
            </div>
            <h1>Online Movie Tickets Booking</h1>
        </div>

        <div class="row d-flex justify-content-center">
            <form class='bookingTicket'>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="name">Select Movie:</label>
                            	<select class="form-control" id='name' required="required">
								<option disabled selected value>Select any movie</option>
                                <option value="Avengers">Avengers</option>
                                <option value="Thor">Thor</option>
                                <option value="Deadpool">Deadpool</option>
                                <option value="Doctor Strange">Doctor Strange</option>
                                <option value="Captain Marvel">Captain Marvel</option>
                            </select>

                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="seats">How Many Seats?</label>
                            <select class="form-control" id='seats' required="required">
								<option disabled selected value>Select Seats</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
					<div class="col-md-12">
						<div class="text-center">
							<span class="message"></span>
						</div>
					</div>
                    <div class="col-md-12">
                        <div class="text-center">
                            <button type="button" class="btn btn-success btn-sm nextButton" id="continueBooking">Continue</button>
                        </div>
                    </div>
                </div>

            </form>
        </div>

        <div class="row d-flex justify-content-center">
            <div class="ticketBox">

                <div class="col-md-12">
                    <div class="screen-map">
                        <label for="availableRoot">Selected Seat</label>
                        <img src="img/selected.png" class="selectedRoot" id="selectedRoot">
                        <label for="">Booked Seat</label>
                        <img src="img/booked.png" class="bookedRoot" id="bookedRoot">
                        <label for="">Available Seat</label>
                        <img src="img/available.png" class="availableRoot" id="availableRoot">
                    </div>
                </div>


                <div class="col-md-12">
                    <table class="table table-striped" id="table-screen">
                        <thead id="screen-head">
                            <tr>
                                <script type="text/template" id='displayTickets'>
                                    <% _.each(_.range(0,columns+1),function(item){ %>
                                        <% if(item==0) {%>
                                            <th></th>
                                            <% } else {%>
                                                <th>
                                                    <%= item %>
                                                </th>
                                                <% } %>
                                                    <% }) %>
                                </script>
                            </tr>
                        </thead>
                        <tbody id="screen-body">
                            <script type="text/template" id='displaybodyTickets'>
                                <% _.each(rows,function(row){ %>
                                    <tr id='displayscreenTickets'>
                                        <td>
                                            <%=row%>
                                        </td>
                                        <% _.each(_.range(1,columns+1),function(column){ %>
                                            <% var id=(_.indexOf(rows,row)*columns)+column; var seatsBooked=JSON.parse(localStorage.getItem('seatsBooked')); if(seatsBooked!=null && _.indexOf(seatsBooked,String(id))!=-1) {%>
                                                <td><img src="img/booked.png" class="reserved-seat" id="<%=id%>" /></td>
                                                <% }else {%>
                                                    <td><img src="img/available.png" class="empty-seat" id="<%=id%>" /></td>
                                                    <% }}) %>
                                    </tr>
                                    <% }) %>
                            </script>
                        </tbody>
                    </table>
				</div>
				
                <div class="col-md-12">
						<div id="screen">
							<span color="white">Screen This Way</span>
						</div>
					</div>
	
                <div class="col-md-12 text-center">
                    <button type="button" class="btn btn-success btn-sm nextButton" id="confirmSelection">Book Now</button>
                </div>

            </div>

        </div>

        <div class="row d-flex justify-content-center">

            <div class="table-responsive booked_list">
				<h4 align="center">Tickets Booked</h4>
				<br/>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Movies Name</th>
                            <th>Number of Seats</th>
                            <th>Seats</th>
                        </tr>
                    </thead>
                    <tbody id="soldMessage">
                        <script type="text/template" id='ticketMessage'>
                            <% _.each(items,function(item){%>
                                <tr>
                                    <td>
                                        <%-item.names%>
                                    </td>
                                    <td>
                                        <%-item.numbers%>
                                    </td>
                                    <td>
                                        <%-item.seats%>
                                    </td>
                                </tr>
                                <%})%>
                        </script>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</body>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/underscore-min.js"></script>
<script type="text/javascript" src="js/backbone.js"></script>
<script type="text/javascript" src="js/core.js"></script>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

<html>

<head>

</head>

<title>

Online Movie Tickets Booking - softAOX

</title>

<body>

</div>

<h1>Online Movie Tickets Booking</h1>

</div>

<label for="name">Select Movie:</label>

<option disabled selected value>Select any movie</option>

<option value="Avengers">Avengers</option>

<option value="Deadpool">Deadpool</option>

<option value="Doctor Strange">Doctor Strange</option>

<option value="Captain Marvel">Captain Marvel</option>

</select>

</div>

<label for="seats">How Many Seats?</label>

<option disabled selected value>Select Seats</option>

</select>

</div>

</div>

<button type="button" class="btn btn-success btn-sm nextButton" id="continueBooking">Continue</button>

</div>

</form>

</div>

<label for="availableRoot">Selected Seat</label>

<label for="">Booked Seat</label>

<label for="">Available Seat</label>

</div>

<tr>

<% _.each(_.range(0,columns+1),function(item){ %>

<% if(item==0) {%>

<% } else {%>

<th>

<%= item %>

</th>

<% } %>

<% }) %>

</script>

</tr>

</thead>

<% _.each(rows,function(row){ %>

<td>

<%=row%>

</td>

<% _.each(_.range(1,columns+1),function(column){ %>

<% var id=(_.indexOf(rows,row)*columns)+column; var seatsBooked=JSON.parse(localStorage.getItem('seatsBooked')); if(seatsBooked!=null && _.indexOf(seatsBooked,String(id))!=-1) {%>

<% }else {%>

<% }}) %>

</tr>

<% }) %>

</script>

</tbody>

</table>

</div>

<span color="white">Screen This Way</span>

</div>

</div>

<h4 align="center">Tickets Booked</h4>

<br/>

<thead>

<tr>

<th>Movies Name</th>

<th>Number of Seats</th>

<th>Seats</th>

</tr>

</thead>

<% _.each(items,function(item){%>

<tr>

<td>

<%-item.names%>

</td>

<td>

<%-item.numbers%>

</td>

<td>

<%-item.seats%>

</td>

</tr>

<%})%>

</script>

</tbody>

</table>

</div>

</body>

</html>

core.js

var BookedSeats = [];
var Rows = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M"];
var Columns = 15;
var TotalSeats = Rows.length * Columns;

function convertIntToSeatNumbers(seats) {
    var bookedSeats = "";
    _.each(seats, function(seat) {
        var row = Rows[parseInt(parseInt(seat) / 12)];
        var column = parseInt(seat) % 12;
        if (column == 0) {
            column = 12;
        }
        if (_.indexOf(seats, seat) == seats.length - 1) {
            bookedSeats = bookedSeats + row + column;
        } else {
            bookedSeats = bookedSeats + row + column + ",";
        }
    });
    return bookedSeats;
}

var InitialView = Backbone.View.extend({
    events: {
        "click #continueBooking": "submitForm"
    },
    submitForm: function() {
        var seatsBooked = JSON.parse(localStorage.getItem('seatsBooked'));
        var seatsAvailable = TotalSeats;
        var selectedNumberOfSeats = $('#seats').val();
        if (seatsBooked != null)
            seatsAvailable = TotalSeats - seatsBooked.length;
        if (!$('#name').val()) {
            $(".message").html("Please select any movie");
        } else if (!selectedNumberOfSeats) {
            $(".message").html("Please select seats");
        } else if (parseInt(selectedNumberOfSeats) > seatsAvailable) {
            $(".message").html("You can only select " + seatsAvailable + " seats")
        } else {
            $(".message").html("");
            screenUI.showView();
        }
    }
});
var initialView = new InitialView({
    el: $('.bookingTicket')
});

var ScreenUI = Backbone.View.extend({
    events: {
        "click .empty-seat,.booked-seat": "toggleBookedSeat",
        "click #confirmSelection": "bookTickets"
    },
    initialize: function() {
        var tableheaderTemplate = _.template($("#displayTickets").html());
        var tableBodyTemplate = _.template($("#displaybodyTickets").html());
        var data = {
            "rows": Rows,
            "columns": Columns
        };
        $("#screen-head").after(tableheaderTemplate(data));
        $("#screen-body").after(tableBodyTemplate(data));
    },
    hideView: function() {
        $(this.el).hide();
    },
    showView: function() {
        $(this.el).show();
    },
    toggleBookedSeat: function(event) {
        var id = "#" + event.currentTarget.id;
        if ($(id).attr('class') == 'empty-seat' && BookedSeats.length < $('#seats').val()) {
            BookedSeats.push(id.substr(1));
            $(id).attr('src', 'img/booked.png');
            $(id).attr('class', 'booked-seat');

        } else if ($(id).attr('class') == 'booked-seat') {
            BookedSeats = _.without(BookedSeats, id.substr(1));
            $(id).attr('src', 'img/empty-seat.png');
            $(id).attr('class', 'empty-seat');
        }
    },
    updateTicketInfo: function() {
        var bookedSeats = convertIntToSeatNumbers(BookedSeats);
        $("#soldMessage").append("<tr><td>" + $('#name').val() + "</td><td>" + $('#seats').val() + "</td><td>" + bookedSeats + "</td></tr>");
    },
    bookTickets: function() {
        if (BookedSeats.length == parseInt($('#seats').val())) {
            $(".message").text("");
            var seatsBooked = JSON.parse(localStorage.getItem('seatsBooked')) || [];
            _.each(BookedSeats, function(bookedSeat) {
                seatsBooked.push(bookedSeat);
            });
            var identifySeats = JSON.parse(localStorage.getItem('identifySeats')) || {};
            identifySeats[$('#name').val()] = BookedSeats;
            localStorage.setItem('identifySeats', JSON.stringify(identifySeats));
            localStorage.setItem('seatsBooked', JSON.stringify(seatsBooked));
            this.updateTicketInfo();
            window.location.reload();
        } else {
            $(".message").html("Please select exactly " + $('#seats').val() + " seats");
        }
    },
});

var screenUI = new ScreenUI({
    el: $('.ticketBox')
});
screenUI.hideView();

var TicketInfo = Backbone.View.extend({
    initialize: function() {
        var items = [];
        var json = JSON.parse(localStorage.getItem('identifySeats'));
        if (json != null) {
            _.each(json, function(key, value) {
                var name = value;
                var number = key.length;
                var bookedSeats = convertIntToSeatNumbers(key);
                items.push({
                    names: name,
                    numbers: number,
                    seats: bookedSeats
                });
            });
            var data = {
                "items": items
            };
            var ticketInfoBody = _.template($("#ticketMessage").html());
            $("#soldMessage").html(ticketInfoBody(data));
        }
    }
});

var ticketInfo = new TicketInfo({
    el: $('.table-responsive')
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

var BookedSeats = [];

var Rows = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M"];

var Columns = 15;

var TotalSeats = Rows.length * Columns;

function convertIntToSeatNumbers(seats) {

var bookedSeats = "";

_.each(seats, function(seat) {

var row = Rows[parseInt(parseInt(seat) / 12)];

var column = parseInt(seat) % 12;

if (column == 0) {

column = 12;

}

if (_.indexOf(seats, seat) == seats.length - 1) {

bookedSeats = bookedSeats + row + column;

} else {

bookedSeats = bookedSeats + row + column + ",";

}

});

return bookedSeats;

}

var InitialView = Backbone.View.extend({

events: {

"click #continueBooking": "submitForm"

submitForm: function() {

var seatsBooked = JSON.parse(localStorage.getItem('seatsBooked'));

var seatsAvailable = TotalSeats;

var selectedNumberOfSeats = $('#seats').val();

if (seatsBooked != null)

seatsAvailable = TotalSeats - seatsBooked.length;

if (!$('#name').val()) {

$(".message").html("Please select any movie");

} else if (!selectedNumberOfSeats) {

$(".message").html("Please select seats");

} else if (parseInt(selectedNumberOfSeats) > seatsAvailable) {

$(".message").html("You can only select " + seatsAvailable + " seats")

} else {

$(".message").html("");

screenUI.showView();

}

});

var initialView = new InitialView({

el: $('.bookingTicket')

});

var ScreenUI = Backbone.View.extend({

events: {

"click .empty-seat,.booked-seat": "toggleBookedSeat",

"click #confirmSelection": "bookTickets"

initialize: function() {

var tableheaderTemplate = _.template($("#displayTickets").html());

var tableBodyTemplate = _.template($("#displaybodyTickets").html());

var data = {

"rows": Rows,

"columns": Columns

};

$("#screen-head").after(tableheaderTemplate(data));

$("#screen-body").after(tableBodyTemplate(data));

hideView: function() {

$(this.el).hide();

showView: function() {

$(this.el).show();

toggleBookedSeat: function(event) {

var id = "#" + event.currentTarget.id;

if ($(id).attr('class') == 'empty-seat' && BookedSeats.length < $('#seats').val()) {

BookedSeats.push(id.substr(1));

$(id).attr('src', 'img/booked.png');

$(id).attr('class', 'booked-seat');

} else if ($(id).attr('class') == 'booked-seat') {

BookedSeats = _.without(BookedSeats, id.substr(1));

$(id).attr('src', 'img/empty-seat.png');

$(id).attr('class', 'empty-seat');

}

updateTicketInfo: function() {

var bookedSeats = convertIntToSeatNumbers(BookedSeats);

$("#soldMessage").append("<tr><td>" + $('#name').val() + "</td><td>" + $('#seats').val() + "</td><td>" + bookedSeats + "</td></tr>");

bookTickets: function() {

if (BookedSeats.length == parseInt($('#seats').val())) {

$(".message").text("");

var seatsBooked = JSON.parse(localStorage.getItem('seatsBooked')) || [];

_.each(BookedSeats, function(bookedSeat) {

seatsBooked.push(bookedSeat);

});

var identifySeats = JSON.parse(localStorage.getItem('identifySeats')) || {};

identifySeats[$('#name').val()] = BookedSeats;

localStorage.setItem('identifySeats', JSON.stringify(identifySeats));

localStorage.setItem('seatsBooked', JSON.stringify(seatsBooked));

this.updateTicketInfo();

window.location.reload();

} else {

$(".message").html("Please select exactly " + $('#seats').val() + " seats");

}

});

var screenUI = new ScreenUI({

el: $('.ticketBox')

});

screenUI.hideView();

var TicketInfo = Backbone.View.extend({

initialize: function() {

var items = [];

var json = JSON.parse(localStorage.getItem('identifySeats'));

if (json != null) {

_.each(json, function(key, value) {

var name = value;

var number = key.length;

var bookedSeats = convertIntToSeatNumbers(key);

items.push({

names: name,

numbers: number,

seats: bookedSeats

});

var data = {

"items": items

};

var ticketInfoBody = _.template($("#ticketMessage").html());

$("#soldMessage").html(ticketInfoBody(data));

}

});

var ticketInfo = new TicketInfo({

el: $('.table-responsive')

});

style.css

body {
	background: #F5F5F5;
}
.logo {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}
.nextButton {
	margin-top: 20px;
}
.form-inline {
	margin-top: 50px;
}
.form-group {
	margin-left: 260px;
}
.table-responsive {
	margin-top: 50px;
}
#title {
	font-size: 20px;
	margin-top: 50px;
}
.bookingTicket,
.booked_list,
.ticketBox {
	background: #ffffff;
	box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.1);
	width: 100%;
	padding: 40px;
	margin: 2em;
	border-radius: 10px;
	display: inline-block;
}
#screen {
	width: 200px;
	border: 1px solid #f1f1f1;
	border-radius: 3px;
	box-shadow: 1px 3px 6px 0px #f9f9f9;
	text-align: center;
	margin: 0 auto;
	background-color: #fefeff;
}
#table-screen {
	border-collapse: separate;
}
#displayscreenTickets {
	margin-top: 10px;
}
#table-screen td,
th,
tr {
	padding: 8px 0px;
	text-align: center;
}
.bookingTicket select {
	width: 100% !important;
}
.bookingTicket .form-group {
	margin-left: 0px;
}
.screen-map {
	margin-top: 10px;
	margin-bottom: 30px;
	text-align: center;
}
.screen-map img {
	margin-right: 15px;
}
.reserved-seat {
	margin-left: 4px;
	width: 25px;
}
.empty-seat {
	cursor: pointer;
	width: 25px;
}
.booked-seat {
	cursor: pointer;
	content: url('../img/selected.png');
	width: 25px;
}
.message {
	font-size: 14px;
	color: #ff0000;
	font-family: sans-serif;
}

body {

background: #F5F5F5;

}

.logo {

display: block;

width: 100%;

text-align: center;

margin-top: 20px;

margin-bottom: 20px;

}

.nextButton {

margin-top: 20px;

}

.form-inline {

margin-top: 50px;

}

.form-group {

margin-left: 260px;

}

.table-responsive {

margin-top: 50px;

}

#title {

font-size: 20px;

margin-top: 50px;

}

.bookingTicket,

.booked_list,

.ticketBox {

background: #ffffff;

box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.1);

width: 100%;

padding: 40px;

margin: 2em;

border-radius: 10px;

display: inline-block;

}

#screen {

width: 200px;

border: 1px solid #f1f1f1;

border-radius: 3px;

box-shadow: 1px 3px 6px 0px #f9f9f9;

text-align: center;

margin: 0 auto;

background-color: #fefeff;

}

#table-screen {

border-collapse: separate;

}

#displayscreenTickets {

margin-top: 10px;

}

#table-screen td,

th,

tr {

padding: 8px 0px;

text-align: center;

}

.bookingTicket select {

width: 100% !important;

}

.bookingTicket .form-group {

margin-left: 0px;

}

.screen-map {

margin-top: 10px;

margin-bottom: 30px;

text-align: center;

}

.screen-map img {

margin-right: 15px;

}

.reserved-seat {

margin-left: 4px;

width: 25px;

}

.empty-seat {

cursor: pointer;

width: 25px;

}

.booked-seat {

cursor: pointer;

content: url('../img/selected.png');

width: 25px;

}

.message {

font-size: 14px;

color: #ff0000;

font-family: sans-serif;

}

Preview & Download

Booking

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts. If you have any questions let me drop an email with the article name to the following email id: [email protected]

Online Movie Tickets Booking using jQuery

Share:

index.html

core.js

style.css

Preview & Download

Mraj

Don't miss on latest updates