INSTITUTE OF ENGINEERING AND TECHNOLOGY

“Movie Ticket Booking”

Mini project report submitted in fulfillment of curriculum prescribed for the Web
Technology based Mini project (ICS-454) course for

BACHELOR OF
ENGINEERING IN
COMPUTER SCIENCE AND ENGINEERING

by

Nikita Sachan (2200520100130)

Satvic Bajpai (2200520100148)

Under the Guidance of

Dr. Natthan
Singh
Assistant Professor,
Dept.of CSE,
IET Lucknow
 INSTITUTE OF ENGINEERING AND TECHNOLOGY

CERTIFICATE

This is to certify that the work entitled “Movie Ticket Booking” is a bonafide work carried out
by Satvic Bajpai and Nikita Sachan in work of passing course ICS-454. It is certified that all
corrections / suggestions indicated during CIE have been incorporated in the report. The mini project
report has been approved as it satisfies the academic requirements in respect of mini project work
prescribed for the Mini project(ICS-554) course.

Course in Charge and Guide

Dr. Natthan Singh

Assistant Professor
Dept. of CSE

IET Lucknow

Place: Lucknow Date : 26/06/2024

 INSTITUTE OF ENGINEERING AND TECHNOLOGY

DECLARATION
We Satvic Bajpai and Nikita Sachan students of 4th Semester B.Tech ,Computer Science &
Engineering at IET Lucknow hereby declare that this group activity was carried out by our
group and this report was prepared by us as a part of the course work ICS-454

Under the guidance of Dr. Natthan Singh.

Place: Lucknow
Date: 26/06/2024

1
Abstract

This report specifies the various processes and techniques The Movie Ticket Booking System
designed to streamline the process of booking movie tickets online. This project leverages
modern web technologies to provide users with a seamless and efficient way to reserve
seats for their favorite movies. The system aims to enhance user experience by offering an
intuitive interface, real-time seat availability.

Using the various resources and tools we gathered along the way we implemented the
Movie Ticket Booking system using some features that provides a demo for how these
system works. The software was also tested using the various testing methods and results
were positive.

Acknowledgment
2
First, we would like to thank IET Lucknow for implementing this mini project as a subject for
our course.

We would also like to thank our Mentor Professor Dr. Natthan Singh for giving us an
opportunity to do this project about Movie Ticket booking system.

We would also like to thank our friends who were our backbone and helped us in collect ing
the requirements for our project.

At last we would like to thank all the other people who were involved directly or in- directly
in collecting the requirements.

- Satvic Bajpai
- Nikita Sachan

3
Table Of Content
 Certificate
 Acknowledgement
 Abstract
 Introduction
 Methodology
 Results
 Conclusion
References

4
 1 Introduction
The advent of web technologies has significantly transformed various aspects of our daily lives,
including how we book movie tickets. Traditional methods of purchasing tickets, such as queuing at
cinema counters, have become outdated and inconvenient. To address these issues and enhance the
overall user experience, this project introduces a web-based movie ticket booking system.

The primary objective of this project is to develop an intuitive and efficient platform that allows
users to book movie tickets seamlessly from any device. By leveraging modern web technologies,
this system aims to provide real-time updates on seat availability, secure payment options, and a
user-friendly interface.

This project employs a responsive web design to ensure accessibility across desktops, tablets, and
smartphones. The backend is powered by Node.js and Express.js, offering a robust environment for
data management and processing. The frontend is developed using HTML, CSS, and JavaScript,
with a focus on creating an engaging and interactive user experience.

The main features of the system include:

1. Movie Selection: Users can select from a list of available movies, each with its
corresponding ticket price.
2. Seat Selection: A visual representation of the cinema seating allows users to choose their
preferred seats, with real-time updates indicating occupied and available seats.
3. Booking Summary: Users receive a summary of their selected seats and the total price
before proceeding to payment.
4. Local Storage: The system utilizes local storage to remember users' seat selections and
movie choices, enhancing the convenience for repeat users.
5. Responsive Design: The platform is designed to be fully responsive, providing a seamless
experience on various devices.

The project files include:

 index.html: The main HTML file that structures the web page and integrates other
components.
 style.css: The CSS file that styles the web page, ensuring an appealing and consistent design.
 script.js: The JavaScript file that handles the interactive functionalities, such as seat
selection and booking summary updates.

By integrating these components, the project aims to deliver a comprehensive solution for movie
ticket booking, making it easier and more convenient for users to enjoy their favorite films without
the hassle of traditional booking methods. This system not only enhances the user experience but
also sets a foundation for future enhancements, such as user authentication, payment gateway
integration, and personalized recommendations.

5
 2 METHODOLOGY
The project involves the development of a web-based movie seat booking system. The methodology
includes the following steps:

1. HTML Structure:
o The basic structure of the webpage is created using HTML. The index.html file
defines the layout, including the movie selection dropdown, the seating arrangement,
and the display of selected seats and total price.
o The seating arrangement is represented using a series of <div> elements organized in
rows within a container.
o The movie selection is handled by a <select> element with different movie options,
each having a distinct price.
2. Styling with CSS:
o The style.css file is used to style the webpage. It includes styles for the body,
movie container, seat rows, and individual seats.
o The styles define the appearance of available, selected, and occupied seats, as well as
hover effects and responsive design considerations.
o The CSS file also imports a Google Font for consistent and visually appealing
typography.
3. Interactivity with JavaScript:
o The script.js file contains the JavaScript code that makes the webpage interactive.
Key functions include:
 populateUI(): Loads saved seat selection and movie choice from local
storage to maintain state between sessions.
 setMovieData(movieIndex, moviePrice): Saves the selected movie's
index and price to local storage.
 updateSelectedCount(): Updates the displayed count of selected seats and
the total price based on current selections.
 Event listeners for seat selection and movie change to update the UI and local
storage accordingly.
o The script initializes by populating the UI with saved data and setting up event
listeners for user interactions.

6
 3 RESULTS
The implementation of the movie seat booking system resulted in a functional web application with
the following features:

1. Movie Selection:
o Users can choose a movie from a dropdown menu, which updates the ticket price
dynamically.
2. Seat Selection:
o Users can select and deselect seats by clicking on them. Selected seats are visually
distinct from available and occupied seats.
o The system prevents users from selecting seats marked as occupied.
3. Real-time Updates:
o The total number of selected seats and the corresponding total price are updated in
real-time as users select or deselect seats.
o The selection state is preserved across page reloads using local storage.
4. User Feedback:
o The application provides immediate visual feedback for seat selection, helping users
understand which seats are available, selected, or occupied.

7
 4 CONCLUSION
The movie seat booking system successfully demonstrates the integration of HTML, CSS, and
JavaScript to create an interactive and user-friendly web application. The key outcomes include:

1. Enhanced User Experience:

o The system offers a seamless and intuitive interface for selecting movie seats and
viewing the total cost.
2. Persistent State:
o By utilizing local storage, the application retains user selections across sessions,
improving usability.
3. Modular and Maintainable Code:
o The separation of concerns between HTML structure, CSS styling, and JavaScript
functionality makes the codebase easy to understand and maintain.

Overall, this project serves as a practical example of building a responsive and interactive web
application with a focus on user experience and functionality.

8
 REFERENCES
 HTML basic documentation
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/
HTML_basics
 CSS basic documentation
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/
CSS_basics
 JavaScript basic documentation
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
 Git hub Repository of Code
https://github.com/bajpaisatvic/Mini-Project

9
10