0% found this document useful (0 votes)

79 views

CSS Report

The document describes an online cinema ticket booking system project. It includes an introduction explaining the goal of providing a user-friendly website for moviegoers to select movies, showtimes and reserve seats online. It then covers the front-end implementation using HTML for content and structure, and CSS for styling. Sample code is provided to demonstrate creating the seat selection interface.

Uploaded by

workwithsnehh

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

79 views

CSS Report

Uploaded by

workwithsnehh

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 18

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

AJEENKYA D. Y. PATIL SCHOOL OF

ENGINEERING(POLYTECHNIC)

MICRO PROJECT
Academic year: 2023 - 2024

TITLE OF THE PROJECT

Online Cinema Ticket Booking System

Program: Program code:

Course: Course code:

1
MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

CERTIFICATE
This is to certify that the following students -

Roll No. Name of the students Exam seat number

30 Bhakti Bhagwan Borate

of Diploma in Artificial Intelligence & Machine Learning of Institute, Ajeenkya D. Y.

PatilSchool of Engineering (Polytechnic) Institute Code – 1649, has completed the Micro
Project satisfactorily in Subject - CLIENT SIDE SCRIPTING (CSS) for the academic
year 2023 - 2024 as prescribed in the curriculum.
Place: Lohegaon Date:

Subject Teacher Head of the Department Principal

2
INDEX

SR.NO. CONTENT PAGE NO.

ABSTRACT 4
1

INTRODUCTION 5
2

FRONT-END 6
3

BACK -END 12
4

METHODOLOGY 12
5

6 BENEFITS 12

7 RESULTS 13

8 SYSTEM REQUIREMENT `13

9 CONCLUSION 14

10 BIBLIOGRAPHY 14

3
 Abstract

The project objective is to book cinema tickets in online. The Ticket Reservation System
is an Internet based application that can be accessed throughout the Net and can be
accessed by anyone who has a net connection. This application will reserve the ickets.
This online ticket reservation system provides a website for a cinema hall where any
user of internet can access it. User is equired to login to the system and needs a credit
card for booking the tickets. Tickets can be collected at the counter and Watching
movies with family and friends in theatres is one of the best medium of entertainment
after having a hectic schedule. But all this excitement vanishes after standing in hours in
long queues to get tickets booked.
The website provides complete nformation regarding currently running movies on all
the screens with details of show timings, available seats. Ticket reservations re done
using credit card and can be cancelled if needed. Our online tickets reservation system is
one of the best opportunities for those who cannot afford enough time to get their tickets
reserved standing in long queues. People can book tickets online at any time of day or
night. Our reservation system also provides option to cancel the tickets which are
reserved previously.

4
 Introduction

In the fast-paced digital era, the entertainment industry has witnessed a remarkable shift
towards online platforms. The convenience and flexibility offered by web-based
solutions have revolutionized the way people access and book movie tickets. This
project report encapsulates the development and implementation of an "Online Movie
Ticket Booking System" using a combination of front-end technologies such as HTML,
CSS, and JavaScript.
The primary objective of this project is to provide a user-friendly, efficient, and
responsive platform for moviegoers to explore movie listings, select showtimes, and
reserve seats, all from the comfort of their web browsers. This system bridges the gap
between movie enthusiasts and cinema experiences, eliminating the need for traditional
ticket purchase methods, and optimizing the ticket booking process.

5
 FRONT-END
1. HTML:
HTML (Hypertext Markup Language) is a markup language used to create and structure content on the
web. It is the foundation of all websites, allowing developers to create web pages and applications that
can be viewed in web browsers. HTML uses tags and attributes to define and display content such as
text, images, and videos. It also allows for the creation of hyperlinks to other web pages, enabling easy
navigation between pages. HTML is constantly evolving, with new versions and updates being
released regularly to improve its capabilities and ensure compatibility with new web technologies.

HTML CODE :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Movie Seat Booking</title>
</head>
<body>
<div class="movie-container">
<label> Select a movie:</label>
<select id="movie">
<option value="220">Godzilla vs Kong (RS.220)</option>
<option value="320">Radhe (RS.320)</option>
<option value="250">RRR (RS.250)</option>
<option value="260">F9 (RS.260)</option>
</select>
</div>
<ul class="showcase">
<li>
<div class="seat"></div>
<small>Available</small>
</li>
<li>
<div class="seat selected"></div>
<small>Selected</small>
</li>
<li>
<div class="seat sold"></div>
<small>Sold</small>
</li>
</ul>
<div class="container">
<div class="screen"></div>
<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>

6
<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat sold"></div>
<div class="seat sold"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat sold"></div>
<div class="seat sold"></div>
</div>
<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat sold"></div>
<div class="seat sold"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat sold"></div>
<div class="seat sold"></div>
<div class="seat sold"></div>
<div class="seat"></div>
</div>
</div>
<p class="text">
You have selected <span id="count">0</span> seat for a price of RS.<span
id="total"
>0</span
>
</p>
<script src="script.js"></script>
</body>
</html>

7
2. CSS:
CSS (Cascading Style Sheets) is a stylesheet language used to add style and design to web pages. It
allows developers to separate the content and structure of a web page from its presentation and styling.
CSS defines the visual elements of a web page, including font styles, colours, layout, and animations.
With CSS, developers can create responsive designs that adjust to different screen sizes and devices.
CSS has a wide range of selectors and properties, making it a versatile language that can be used to
create visually appealing and user-friendly web pages. It is an essential tool for web development and
design.

CSS CODE :-
@import url("https://fonts.googleapis.com/css?family=Lato&display=swap");

*{
box-sizing: border-box;
}

body {
background-color: #242333;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
font-family: "Lato", sans-serif;
margin: 0;
}

.movie-container {
margin: 20px 0;
}

.movie-container select {
background-color: #fff;
border: 0;
border-radius: 5px;
font-size: 16px;
margin-left: 10px;
padding: 5px 15px 5px 15px;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}

.container {
perspective: 1000px;
margin-bottom: 30px;
}

.seat {
background-color: #444451;
height: 26px;
width: 32px;
margin: 3px;
font-size: 50px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

8
.seat.selected {
background-color: green;
}

.seat.sold {
background-color: #fff;
}

.seat:nth-of-type(2) {
margin-right: 18px;
}

.seat:nth-last-of-type(2) {
margin-left: 18px;
}
.seat:not(.sold):hover {
cursor: pointer;
transform: scale(1.2);
}
.showcase .seat:not(.sold):hover {
cursor: default;
transform: scale(1);
}
.showcase {
background: rgba(0, 0, 0, 0.1);
padding: 5px 10px;
border-radius: 5px;
color: #777;
list-style-type: none;
display: flex;
justify-content: space-between;
}
.showcase li {
display: flex;
align-items: center;
justify-content: center;
margin: 0 10px;
}
.showcase li small {
margin-left: 2px;
}
.row {
display: flex;
}
.screen {
background-color: #fff;
height: 120px;
width: 100%;
margin: 15px 0;
transform: rotateX(-48deg);
box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
}
p.text{
margin: 5px 0;
}
p.text span{
color: rgb(158, 248, 158);
}

9
3. BOOTSTRAP:
Bootstrap is a popular front-end framework that allows developers to quickly create responsive and mobile-
first websites. It includes HTML, CSS, and JavaScript components, such as typography, forms, buttons,
navigation, and more. Bootstrap provides a wide range of pre-built UI components and styles, making it easy
to design a professional-looking website without having to start from scratch. It also has a grid system that
enables developers to create responsive layouts that adapt to different screen sizes and devices. Bootstrap is
free and open-source, with a large community of developers contributing to its development and support. It is
a valuable tool for web developers looking to streamline

4. JAVA SCRIPT:
JavaScript is a programming language used to create interactive and dynamic web pages. It allows developers
to add complex functionality to web pages, such as form validation, animations, and dynamic content updates,
without the need for server-side processing. JavaScript is a client-side language that runs on the user's browser,
making web pages more responsive and interactive. It is also used in server-side applications, such as Node.js,
which enables developers to create fast and scalable web applications. JavaScript has a wide range of libraries
and frameworks, such as React, Angular, and Vue.js, making it a versatile language for web development.

JAVA SCRIPT CODE :

const container = document.querySelector(".container");
const seats = document.querySelectorAll(".row .seat:not(.sold)");
const count = document.getElementById("count");
const total = document.getElementById("total");
const movieSelect = document.getElementById("movie");

populateUI();

let ticketPrice = +movieSelect.value;

// Save selected movie index and price

function setMovieData(movieIndex, moviePrice) {
localStorage.setItem("selectedMovieIndex", movieIndex);
localStorage.setItem("selectedMoviePrice", moviePrice);
}

// Update total and count

function updateSelectedCount() {
const selectedSeats = document.querySelectorAll(".row .seat.selected");

const seatsIndex = [...selectedSeats].map((seat) => [...seats].indexOf(seat));

localStorage.setItem("selectedSeats", JSON.stringify(seatsIndex));

const selectedSeatsCount = selectedSeats.length;

count.innerText = selectedSeatsCount;
total.innerText = selectedSeatsCount * ticketPrice;

setMovieData(movieSelect.selectedIndex, movieSelect.value);
}

10
// Get data from localstorage and populate UI
function populateUI() {
const selectedSeats = JSON.parse(localStorage.getItem("selectedSeats"));

if (selectedSeats !== null && selectedSeats.length > 0) {

seats.forEach((seat, index) => {
if (selectedSeats.indexOf(index) > -1) {
console.log(seat.classList.add("selected"));
}
});
}

const selectedMovieIndex = localStorage.getItem("selectedMovieIndex");

if (selectedMovieIndex !== null) {

movieSelect.selectedIndex = selectedMovieIndex;
console.log(selectedMovieIndex)
}
}
console.log(populateUI())
// Movie select event
movieSelect.addEventListener("change", (e) => {
ticketPrice = +e.target.value;
setMovieData(e.target.selectedIndex, e.target.value);
updateSelectedCount();
});

// Seat click event

container.addEventListener("click", (e) => {
if (
e.target.classList.contains("seat") &&
!e.target.classList.contains("sold")
){
e.target.classList.toggle("selected");

updateSelectedCount();
}
});

// Initial count and total set

updateSelectedCount();

11
 BACK -END
1. PHP:
PHP (Hypertext Pre-processor) is a server-side scripting language used for web development. It is widely
used to create dynamic web pages and web applications, allowing developers to add complex functionality to
their websites. PHP is open-source and runs on various platforms, making it a popular choice among web
developers. It can be used to interact with databases, create user authentication systems, and generate dynamic
content. PHP has a vast library of functions and frameworks, such as Laravel, CodeIgniter, and Symfony,
making it a versatile language for web development. It is easy to learn, and its popularity among web
developers ensures a wealth of resources and community support.
2. SQL:
SQL (Structured Query Language) is a programming language used for managing relational databases. It is a
standard language for storing, manipulating, and retrieving data in databases. SQL is useful in storing data
because it provides a simple and organized way to structure data in tables, rows, and columns. It enables
developers to create, modify, and delete data in a database. SQL is also used to fetch data from databases,
allowing developers to retrieve specific data based on certain criteria. This makes it a powerful tool for data
analysis and reporting. SQL provides a wide range of commands and functions, such as SELECT, INSERT,
UPDATE, DELETE, and JOIN, making it a versatile language for managing data in databases.

 Methodology:
Using PHP and MySQL, the online cinema ticket ordering project was created. The website's front end was
created with the use of HTML, CSS, and JavaScript. Users can choose their desired movie, showtime, and seat
through the project, and they can even pay online. Additionally, the website's administrator could add, amend,
or remove movies, showtimes, and theatres. The website is flexible to many screen sizes and features a user-
friendly interface.

 Benefits:
Both moviegoers and theatre owners might benefit from the idea to book movie tickets online in several ways.
Moviegoers may easily order their tickets from the convenience of their homes, saving them the hassle of
standing in huge lines. The online solution can lower the cost of printing and delivering paper tickets, and
theatre owners can manage their bookings with ease. The internet technology can also produce reports, which
will aid theatre owners in monitoring sales and enhancing marketing initiatives.
6.Influencing the film industry
The movie industry has been significantly impacted by the effort to allow for internet movie ticket purchases.
By making it simpler for individuals to purchase tickets, the project has contributed to an increase in the
overall income of movie theatres. Additionally, it has improved convenience, which has increased the appeal
of going to the movies. The internet system can also offer useful information on consumer preferences and
buying patterns, which can aid the film business in making educated choices regarding movie creation and
marketing.

12
 Results:
To assure its functionality, the project to book movie tickets online underwent extensive testing. Users
can choose their chosen seats and pay online while perusing the available films and showtimes on the
website. Through the admin interface, the website administrator may quickly manage movies,
showtimes, and theatres. The project is user-friendly and adaptable to many screen sizes.

Final output screenshot:-

 SYSTEM REQUIREMENT
o 2.1 Hardware Specification
Server:
Processor-7th generation i5
RAM-128MB (min) Hard disk-20GB

Client:
Processor-7th generation i5
Ram-128MB (min) Hard disk- 20GB

o 2.2 Software Specification

Platform - Windows 8,10
Front end - Html, CSS, Java Script`
Back end – PHP, SQL

13
 CONCLUSION
o The core objectives of this project were to provide a seamless movie selection, showtime reservation,
and seat booking experience to users, and the system has achieved this with great success. Through a
well-structured and aesthetically pleasing user interface, movie enthusiasts can now effortlessly
browse movie listings, pick showtimes, and reserve seats with just a few clicks, all while enjoying the
comforts of their web browser.

o This project underscores the importance of an intuitive and accessible design, leveraging CSS for
styling and layout to enhance the visual appeal while ensuring a user-centric interface. The system's
interactivity, powered by JavaScript, facilitates dynamic content generation and a superior user
experience.

o Moreover, by adopting best practices in usability and accessibility, this system extends its reach to a
broader audience, ensuring that everyone, regardless of ability, can comfortably access and use the
platform.

 BIBLIOGRAPHY
o W3Schools - HTML, CSS, Bootstrap, and JavaScript tutorials:
https://www.w3schools.com/
o Bootstrap documentation: https://getbootstrap.com/docs/5.0/gettingstarted/introduction/
o Movie database API: https://www.themoviedb.org/documentation/api
o jQuery - JavaScript library for DOM manipulation: https://jquery.com/
o Font Awesome - Icon library: https://fontawesome.com/
o Google Fonts - Free web fonts: https://fonts.google.com/
o GitHub - Version control and collaboration platform: https://github.com/

Dr. D Y Patil Educational Enterprises Charitable Trust’s

14
Dr. D. Y. PATIL SCHOOL OF ENGINEERING,
(POLYTECHNIC)
Approved by AICTE NO. West / 1-3847411/2010/ New Dated 13
July 2010/DTE/Affiliated to MSBTE, Mumbai.
Dr. D Y Patil Knowledge City, Charholi Bk, Via Lohegaon, Pune –
412105

Annexure - I

MICRO-PROJECT PROPOSAL

Title of Micro-project: Online Cinema Ticket Booking System

1.0 Aims/Benefits of the Micro-project –

The project objective is to book cinema tickets in online.
2.0 Course Outcomes Addressed –
allows customers to access the services of a business, reserve seats and buy tickets.
3.0 Proposed Methodology –
a software solution and reservation system that makes it simple for guests to
…………book and pay for your tours and activities online.
4.0 Action Plan –

Planned
Sr. Details of Activity Planned
Finish
No. Start Date
Date
Discussion and
1 finalization
of topic
Preparation and
2 submission
of abstract
3 Literature Review

15
4 Collection of data
5 Collection of data
Discussion and outline of
6
content
7 Formulation of content
8 Editing of content
9 Editing of content
10 Proof reading of content
11 Compilation of report
12 Compilation of report
13 Presentation
14 Seminar
15 Viva voce
Final submission of micro-
16
project

5.0 Resources Required –

Sr. Name of
Specifications Quantity Remarks
No. Resource/material
1 LAPTOP 16 GB RAM, 512 1
SSD
2 NETWORK Wi-Fi 1
3 GOOGLE - 1

Names of Team Members with Roll nos.

1. BHAKTI BHAGWAN BORATE

DHANASHRI PATIL MA’AM

(Name and Signature of Subject Teacher)

16
Dr. D Y Patil Educational Enterprises Charitable Trust’s
Dr. D. Y. PATIL SCHOOL OF ENGINEERING,
(POLYTECHNIC)
Approved by AICTE NO. West / 1-3847411/2010/ New Dated 13
July 2010/DTE/Affiliated to MSBTE, Mumbai.
Dr. D Y Patil Knowledge City, Charholi Bk, Via Lohegaon, Pune – 412105

Annexure - II

MICRO-PROJECT REPORT

Title of Micro-project: Online Cinema Ticket Booking System

6.0 Rationale –
An online booking system works all the time. This gives freedom to potential visitors to
book a room anytime they want.

7.0 Aim/Benefits of the Micro-project –

The project objective is to book cinema tickets in online.
8.0 Course Outcomes Achieved –
allows customers to access the services of a business, reserve seats and buy tickets.

9.0 Literature Review –

……. the online ticket booking system project, prior research highlights the evolution
…………..of digital platforms for ticket booking, emphasizing the significance of user
…………..experience and security.
o https://www.itarian.com/ticketing-system/online-ticketing-system-
proposal
o https://www.zaui.com/blog/top-10-benefits-of-online-booking
o https://www.scribd.com/document/54938910/Ticket-Booking-System
o https://www.geeksforgeeks.org/online

10.0 Actual Methodology Followed

a software solution and reservation system that makes it simple for guests to book
and pay for your tours and activities online.

17
11.0 Actual Resources Required –

Sr. Name of
Specifications Quantity Remarks
No. Resource/material
1 LAPTOP 16 GB RAM, 512 1
SSD
2 NETWORK Wi-Fi 1

3 GOOGLE - 1

12.0 Outputs of the Micro-Projects

Makes a catalogue of all the interactions that occur between a support team and the
business’s clients or employees.
13.0 Skill Developed/Learning outcome of this Micro-Project
Online ticket system allows you to increase productivity by automating a great number of
booking processes.
14.0 Applications of this Micro-Project
streamlines the booking process for you and your customers by automating tasks such
as collecting customer information, updating booking information, payment, scheduling,
and more.