Index

Sr. No. Contents Page No.

Annexure I– Micro Project Proposal 2-3

1.Aims/Benefits of the Micro-Project 2

2. Course Outcome Addressed 2

1 3.Proposed Methodology 2

4. Action Plan 2-3

5. Resources Required 3

6. Name of student with roll no 3

Annexure II – Micro Project Report 5-12

1.Rationale 5

2.Aims/Benefits of the Micro-Project 5

3.Course Outcome Achieve 5

2
4. Literature Review 5

5.Actual Methodology Followed 6-12

6.Actual Resources Used 13

7. Applications of this Micro-Project 13

1
 Annexure I
Micro Project Proposal

A MICRO PROJECT ON
"Movie Ticket Booking System "
1. Aims/Benefits of the Micro-Project:
The proposed project “Online Movie Ticket Booking System” is the process whereby
consumers directly buy movie tickets online from a multiplex website interactively in real-time without
an intermediary service over the Internet. The Given System provides the detailed working of the
Online Movie Ticket Booking Processing and what all happens whenever we or any one of us goes to
book movie tickets online.

2. Course Outcome Addressed:

1. Create interactive web pages using program flow control structure.
2. Create event based web forms using Java Script.

3. Proposed Methodology:

This involves an online development software application approach to proper solution to the problems
being encountered in the existing system. A mobile App / website was developed to create a system for
easy accessibility. The mobile app / website developed will creates accounts to customers and obtain
their personal information / details. The site will offer customers an email list facility where users can
enter their email address to be kept up to date with upcoming events. The proposed system is a web
based application where one can book or reserve tickets with just a single click. An internet user can buy
tickets at any time of the day and be guided with all the necessary steps to book tickets and print out the
ticket. Customers can also cancel seats at a suitable time receives confirmation details regarding his
cancellation immediately.

2
4. Action Plan:

Sr. Details of Activity Planned Planned Name of Responsible

No. Start date Finish date Team Members
Search the topic of project 23/08/2022 30/08/2022
1
3:30 – 5:30 PM 3:00 – 5:30 PM
Search the information 07/09/2022 14/09/2022
2
about operating system 3:30 – 5:30 PM 3:30 – 5:30 PM
Find the list of types 21/09/2022 28/09/2022
3
of operating system 3:30 – 5:30 PM 3:30 – 5:30 PM
Find the information 12/10/2022 19/10/2022
4
of different types of 3:30 – 5:30 PM 3:30 – 5:30 PM
OS Maniyar Sohanaz
Maniyar Afifa
Disadvantages and 02/11/2022 09/11/2022
5
Advantages of 3:30 – 5:30 PM 3:30 – 5:30 PM
types
Collecting the different 09/11/2022 16/11/2021
6
images of types of OS 3:30 – 5:30 PM 3:30 – 5:30 PM
Insert all the 23/11/2022 30/11/2022
7
collected information 3:30 – 5:30 PM 3:30 – 5:30 PM
Finalizing Project with 13/12/2022 13/12/2022
8
its report 3:30 – 5:30 PM 3:30 – 5:30 PM

5. Resources Required:

Sr.No. Name of resource / material Specification Quantity Remarks

WINDOWS 11, 8GB
1 Computer 1
RAM, 256GB SSD
2 Operating System WINDOWS 11 1

3 Browser Chrome 1

3
6. Names of Team Member with Roll No.:

Sr. No. Enrollment No. Name of Team Member Roll No.

1 2215000041 Maniyar Sohanaz mahamad 33

Rizwan
2 2215000009 Maniyar Afifa Faruk 11

Ms. Seema Somwanshi

Name and Signature of the Teacher

4
 Annexure-II
Micro-Project Report
A MICRO PROJECT ON
“ Movie Ticket Booking
System”
1. Rationale:
This research is an online movie ticket reservation basically made for providing the customers
ample opportunity to make movie reservation booking anywhere and anytime to book for desired
but available seat(s) in a movie hall and in a specified seating position. Information about the
movies will be online, so the user easily gets more details about the movies released and then
make a choice either to buy the ticket or cancel an already placed order at a specified time to the
show. This is being implemented using an object oriented software approach through the
development of an app and an internet based platform thereby overcoming the traditional movie
reservation approach in cinemas.
2. Aims/Benefits of the Micro-Project:
The proposed project “Online Movie Ticket Booking System” is the process whereby
consumers directly buy movie tickets online from a multiplex website interactively in real-time
without an intermediary service over the Internet. The Given System provides the detailed
working of the Online Movie Ticket Booking Processing and what all happens whenever we or
any one of us goes to book movie tickets online.

3. Course Outcomes Achieved:

1. Create interactive web pages using program flow control structure.
2. Create event based web forms using Java Script.

4. Literature Review:
A reservation system is used to ensure customers can purchase tickets for a given performance
well in advance and avoid being disappointed at the last minute. Theatre owners also prefer
tickets to be sold as early as possible, both for financial reasons and to avoid a long queue at.
The entrance just before the performance is due to begin.

5
 5. Actual Methodology Followed:
Description:

It is a web based online project . The main aim of the project is any user they can access
the system through website at any time without going to the company. /s anew user also he can collect
all information like as a movies available , list of theatres.

1. Administrator Module
2. Ticket Booking Module

1. Administrator Module:

The administrator is maintain the user details ,movie details ,Theatre details, and check
the no of seats available .

2. Ticket Booking Module :

The users will search for the movie and then go for theatre then booking the tickets
online. The user collect all information like movies details ,Theatre details, seats
details.

Scope:
The scope of the project “Movie Ticket Booking” is to enable user select movie and books the
desired movie and desired seats .Motive of this is to book tickets online.

6
Program code:

Index.html
<!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">
<title>Document</title>
<link rel="stylesheet" href="style-home.css">
<link rel="stylesheet" integrity="sha384-
BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body style="background-color: black;">
<nav class="navbar navbar-expand-lg navbar-light bg-custom">
<div class="container">
<a class="navbar-brand" href="#">
<img src="./image/netflix.png" style="width:80px"/>
</a>
<div >
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="./index.html">Home</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<img src="./image/banner.jpg" class="mx-auto d-block" style="max-width: 40%;"/>
</div>
<div class="btn-collection">
<a href="booking.html">
<button class="btn btn-custom">
7
 Buy Ticket
</button>
</a>
<a href="./playing.html">
<button class="btn btn-custom">
Now Playing
</button>
</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-
KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
crossorigin="anonymous"></script>
<script src="integrity="sha384-
nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
crossorigin="anonymous"></script>
</body>
</html>

Playing.html

<!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">
<title>Document</title>
<link rel="stylesheet" href="style-home.css">
integrity BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body style="background-color: black;">
<nav class="navbar navbar-expand-lg navbar-light bg-custom">
<div class="container">
<a class="navbar-brand" href="#">
<img src="./image/netflix.png" style="width:80px"/>
8
 </a>
<div >
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="./index.html">Home</a>
</li>
</ul>
</div>
</div>
</nav>
<div>
<h4 style="color: #E50914; font-weight: 700;" class="text-center my-4">Now Playing</h4>
</div>
<div class="btn-collection-playing my-4">
<a href="booking.html">
<button class="btn btn-custom">
Buy Ticket
</button>
</a>
</div>
<div class="container">
<div class="row justify-content-around align-items-center">
<img src="./image/jp1993.jpg" class="img-card col-lg-4 col-md-6 col-sm-12 col-12"
style="max-width: 250px;width:90%"/>
<img src="./image/ai2018.jpg" class="img-card col-lg-4 col-md-6 col-sm-12 col-12"
style="max-width: 250px;width:90%"/>
<img src="./image/logan2017.jpg" class="img-card col-lg-4 col-md-6 col-sm-12 col-12"
style="max-width: 250px;width:90%"/>
</div>
</div>
integrity="sha384-
KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
crossorigin="anonymous"></script>
<script src=" integrity="sha384-
nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
crossorigin="anonymous"></script>
</body>
</html>

9
Style.css
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

*{
box-sizing: border-box;
}
.main-logo{
width:90%;
max-width: 150px;
}

body {
background-color: #000000;
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: 14px;
margin-left: 10px;
padding: 5px 15px 5px 15px;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}

10
.container {
perspective: 1000px;
margin-bottom: 30px;
}
.seat {
background-color: #444451;
height: 12px;
width: 15px;
margin: 3px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.seat.selected {
background-color: #6feaf6;
}
.seat.occupied {
background-color: #fff;
}
.seat:nth-of-type(2) {
margin-right: 18px;
}
.seat:nth-last-of-type(2) {
margin-left: 18px;
}
.seat:not(.occupied):hover {
cursor: pointer;
transform: scale(1.2);
}
.showcase .seat:not(.occupied):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;
11
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: 70px;
width: 100%;
margin: 15px 0;
transform: rotateX(-45deg);
box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
}p.text {
margin: 5px 0;
}
p.text span {
color: #6feaf6;
}
/* body{
transform: scale(1.4);
} */
.status{
color:white;
}
.nav-link{
color: white !important;
font-weight: 500 !important;
}
12
 .btn-home{
background-color: #E50914;
border: 1px solid #E50914;
padding: .6em 2em;
border-radius: 10px;
font-size: 1em;
font-weight: 600;
cursor: pointer;
}
.btn-home:active{
border: 0px solid #E50914;
}

Booking.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Movie Seat Booking</title>
<link rel="stylesheet" href="style.css">

<style>
</style>
</head>
<body>
<div>
<img class="main-logo" src="./image/netflix.png"/>
</div>
<div class="movie-container">
<label style="font-size: 1em;">Pick a movie:</label>
<select id="movie">
<option value="10">Jurassic Park ($10)</option>
<option value="12">Logan ($12)</option>
<option value="8">Avengers Infinity War ($8)</option>

13
 </select>
</div>
<ul class="showcase">
<li>
<div id="seat" class="seat"></div>
<small class="status" style="font-size: 1em;">N/A</small>
</li>
<li>
<div id="seat" class="seat selected"></div>
<small class="status" style="font-size: 1em;">Selected</small>
</li>
<li>
<div id="seat" class="seat occupied"></div>
<small class="status" style="font-size: 1em;">Occupied</small>
</li>
</ul>
<div class="container">
<div class="screen"></div>
<div class="row">
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
</div>
<div class="row">
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat occupied"></div>
<div id="seat" class="seat occupied"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
</div>
14
<div class="row">
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat occupied"></div>
<div id="seat" class="seat occupied"></div>
</div>
<div class="row">
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
</div>
<div class="row">
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat occupied"></div>
<div id="seat" class="seat occupied"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
</div>
<div class="row">
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat"></div>
<div id="seat" class="seat occupied"></div>
<div id="seat" class="seat occupied"></div>
<div id="seat" class="seat occupied"></div>
15
 <div id="seat" class="seat"></div>
</div>
</div>
<p class="text" style="font-size: 1em; margin:0px 0px 15px 0px">
You have selected <span id="count">0</span> seats for a price of $<span
id="total"
>0</span>
</p>
<a href="./index.html">
<button class="btn-Buy" onclick="check()">
Buy
</button>
</a>
<script>
function check()
{
alert("you have selected=" +count);
}
</script>
<script>
var count=0;
var seats=document.getElementsByClassName("seat");
for(var i=0;i<seats.length;i++){
var item=seats[i];
item.addEventListener("click",(event)=>{
var price= document .getElementById("movie").value;
if (!event. target. classList. contains('occupied') && !event.target.classList.contains('selected') ){
count++;
var total=count*price;
event.target.classList.add("selected");
document.getElementById("count").innerText=count;
document.getElementById("total").innerText=total;
}
})
} </script>
</body>
</html>

16
6. OUTPUT OF THE PROGRAM

17
18
19
 9 . Actual Resources Used:

Sr. Name of resource

Specification Quantity Remarks
No. / material

WINDOWS 11,8GB
1 Computer 1
RAM, 256GB SSD
2 Operating System WINDOWS 11 1

3 Browser Chrome 1

10 . Skill developed / Learning out of this Micro-Project:

 From this, we learned about programing as well as website development.
 This movie ticket booking website helps to book tickets quickly.
 People look online for movie names and seats booking.
 We learn to develop the useful movie ticket booking sites for our skill orientation .

11. Applications of this Micro-Project:

Javascript lets you embed programs right in your Web pages and run these programs using the
Web browser. This can be used as a reference for people who want to books their movie
tickets. This project is to check the movie names , booking seats and payment.

*********

20