ONLINE BUS TICKET RESERVATION

SYSTEM
In Partial fulfillment of the requirement for the award of the degree of

DEPARTEMENT OF COMPUTER APPLICATION

Submitted by

M.Rama sundar. (23SCA45)

A.Xavier kingsleen. (23SCA48)

A . Abdul Basil. (23SCS10)

M.Irfan Sherif. (23SCS13)

Under the guidance of

S.MOHIDEEN PILLAI M.C.A, SET

Assistant professor

DEPARTMENT OF COMPUTER APPLICATION

SADAKATHULLAH APPA COLLEGE (AUTONOMOUS)

(Reaccredited with “A++” Grade by NAAC

&

1
AN ISO9001:2008 certified institution)

RAHMATHNAGAR,TIRUNELVELI - 627011

2
CERTIFICATE

3
 CERTIFICATE
This is to certify the project work entitled “ONLINE BUS RESERVATION WEB
APPLICATION” is the bonafide record of work done by

NAME REGNO

M.Rama sundar (23SCA45)

A.Xavier kinglseen (23SCA48)

A.Abdul Basil (23SCS10)

M.Irfan sherif (23SCS13)

In partial fulfillment of the requirement for the award of the degree of Bachelor of
Computer Application in our college, during the academic year 2023-2024

Internal Guide Head of the Department

S.MOHIDEEN PILLAI M.C.A, SET W.FATHIMAFARSANA,M.Sc, M.Phil.

Assistant ProfessorAssistant Professor & Head

Department of Computer Application Department of Computer Application
SadakathullahAppaCollege, SadakathullahAppaCollege,
Rahmathnagar, Tirunelveli – 627011 Rahmathnagar, Tirunelveli- 627011

Submitted for viva-voce examination to be held at SadakathullahAppa College

(Autonomous), Rahmathnagar, Tirunelveli – 627011 on …………………

INTERNALEXAMINER EXTERNAL EXAMINER

4
DECLARATION

5
 DECLARATION
I hereby declare that the project work done for the award
of the degree of Bachelor of Computer Application on “ONLINE
BUS RESERVATION WEB APPLICATION” is our original. The data
and reports submitted are true and correct to best of our
knowledge.

M.Rama sundar

A.Xavier kingsleen

A. Abdul Basil

M.Irfan sherif

Signature of the Candidates

I certify that the declaration made above by the candidates is true

Signature of the Guide

S.MOHIDEEN PILLAI MCA, SET

Assistant Professor

Department of Computer
Application

SadakathullahAppa College

Rahmath Nagar, Tirunelveli- 627011

6
 ONLINE BUS TICKET
RESERVATION SYSTEM

7
ABSTRACT:

Online Bus Ticket Reservation System is a Web based

application that works within a centralized network. This project
presents a review on the software program “Online Bus Ticket
Reservation System” as should be used in a bus transportation system,
a facility which is used to reserve seats. It maintains all customer
details, bus details, reservation details. It is a front end web
development for ITC Travels. The software achieved is capable of
improving the customer hand and relationship management in ITC
Travels. Using this web application one can book ticket, contact the
admin and login to the web application.
Languages used:
● Html

● Cascading Style Sheet

● Java script

Recommendations:
Research and development are continuous processes; this is the
same in computer and software development. Operation are still
carried out manually and it can also be useful to other Bus
Transportation industries whose processes are still manually done.
The system can contribute more on those bus representatives handling
the account if it can generate reports by trip so that they will no longer
go to a certain module to check the reservation and its details. Also, it
will be more beneficial to both clients and bus representatives if
clients can create an account just like in airlines websites.

8
Background of Study:

The prevalent view in various global circles is that man is

presently living in an age growth of information gathering, processing
and dissemination, popularly called the information age. For this
reason, managers and other users of information especially in
transport industries are demanding more kinds of information to
support management and operations. They must therefore respond to
the increasing requirement for information and data management.
Electronic tickets, or e-tickets, gives evidence that their holders
have the permission to enter a place of entertainment, use a means of
transportation, or have access to some Internet services. The design of
this online system will be beneficial to the company because it has not
existed before.
9
 Therefore, Imo Transport Company, Were, a viable investment
owned by the state government whose primary objectives are: to
spread comfort and hospitality to passengers away from their home, to
make profit, will definitely appreciate a system which can automate
its manual operations in the area of bus ticket reservation in order to
meet customers increasing demand during peak and off peak seasons.
The ultimate expectation is to inspire a feasibility study aimed at
providing proper guidance and awareness to any future potential
investors, particularly those in the bus industry, to consider utilizing
the Imo transport, as a gateway to the fertile soil of unlimited
opportunities in the south-east Nigeria.
Currently, staff at the bus ticket counter is using an internal
system to sell tickets at the counter and customers who are unable to
buy bus ticket online at this moment would have to go to the counter
to a buy bus ticket. Sometimes, customers’ needs to queue up a long
queue to buy bus ticket and ask for information and this brings a lot of
inconveniences to customers.
However, Online Bus Ticket Reservation System enables the
customer to buy bus ticket, make payment, and ask for information
online easily.
Statement of Problem:
Currently, the type of system being used at the
counter is an internal system which is manually used in selling the bus
tickets. The problems facing the company are that customers have to
go to the counter to buy bus ticket or ask for bus schedule, customers
will also have to queue up for a long time in order to secure a bus
ticket and will also need to pay cash when they buy the bus ticket.

10
INPUT AND OUTPUT DESIGN:
The input design is the link between the information system
and the user. It comprises of the developing specification and
procedures for data preparation and those steps are necessary to put
transaction data into a usable form for processing data entry while an
output design is a process that involves designing necessary outputs in
the form of reports that should be given to the users according to the
requirements.

visit

contact Use Login

admin r

Book
ticket

About project:
Project Name Bus reservation system

Project Type Web application

Front end Html, CSS and JS

Database No Database

Developed By
● Rama sundar

● Xavier kingsleen

11
 ● Abdul Basil

● Irfan sherif

Project description:
This web application mainly contains four menu

● Home

● Booking

● Contact Us

● Login

Home Page:
It is the opening page of the web application of online bus
ticket reservation.

12
Figure 1: Home page of the web application

Figure 2: Footer of the home page

Login page:
User can login to the web application with their username
and password with the help of the login menu in the upper corner of
the home page.

13
Figure: Login form
User asked to enter their correct username and password for
login and further use.

Booking Page:
User can book a new ticket by clicking on the booking
in the upper right corner in home page. .In the booking page you are
asked to enter the following details in order to book a new ticket.

● First Name

● Last Name

● Age

● Date

● From

● Destination

14
Contact Page:
User can also the admin using the contact us page
in the web application. Easy to find, so a visitor can quickly get in
touch with the admin. In contact page user asked to enter the
following information.

● Name

● Email

● Message

Picture represent the contact Menu:

15
16
Sample code for Home Page:
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Bus-reservation mini project</title>

<script src="none.js" defer></script>

<link rel="stylesheet" type="text/css" href="styleatm.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?

family=Audiowide">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

<nav>

<h1 class="heading" style="font-family:Audiowide; margin-left:

10px;">ITC</h1>

<div class="linebox" onclick="myfunction()">

<span class="first line"></span>

<span class="second line"></span>

<span class="third line"></span>

</div>

<span class="menubar">Menu</span>

<ul>

17
<li><a href="index.html">Home</a></li>

<li><a href="booking.html">Booking</a></li>

<li><a href="contact.html">Contact us</a></li>

<li><a href="Loginpage.html">Login</a></li>

</ul>

</nav>

Sample Code for Login Page:

<body>

<div class="full">

<div class="box" >

<form action="index.html" onsubmit="return validate()">

<div class="Elements">

<h1 align="center" class="heading">Login to continue </h1>

<input type="text" name="" placeholder="Username" required maxlength="15"

class="username Boxshadow" onkeyup="input(0)">

<input type="password" name="" placeholder="password" required

maxlength="15" minlength="8" class="password Boxshadow"
onkeyup="input(1)">

<input type="submit" value="Login" class="Button" onclick="myfunction()">

</div>

</form>

</div>

</div>

<script type="text/javascript" defer>

18
let name=prompt("what's your name?","arumuga").toUpperCase();

let heading=document.querySelector('.heading');

heading.innerHTML += name;

let username = document.querySelector(".username");

let password=document.querySelector(".password");

let button=document.querySelector(".Button");

var inputvar=[username,password];

function input(x) {

if(inputvar[x].value.length<8) {

inputvar[x].classList.remove("Boxshadow");

inputvar[x].classList.add("red");

console.log("executing red");

button.classList .add("Button");

Sample Code for Booking Page:

<body>

<div class="container">

<h1 class="heading" align="center">Book your ticket here</h1>

<hr size="10" class="hr-line">

<div class="full">

<form action = "index.html" class="myform">

<label>

First Name:

<input type="text" name="" required>

19
</label>

<label>

Last Name:

<input type="text" name="" required>

</label>

<br>

<label>

Gender:

<input type="radio" name="Gender">Male

<input type="radio" name="Gender">Female

</label>

<br>

<label>

Age:

<input type="number" name="" required>

</label>

<br>

<label>

Enter the Date:

<input type="Date" name="" required>

</label>

<br>

<label>

<input type="text" name="" placeholder="From" required>

20
Sample code for Contact Page:
<body bgcolor="black">

<h1 >Contact us</h1>

<hr size = "5">

<div class="container">

<form style="width: 100%;">

<div class="form-group">

Email:

<input type="email" class="form-control trans-input-area" placeholder="Email"

id="email">

</div>

<div class="form-group">

Name:

<input type="text" class="form-control trans-input-area" placeholder="Name"

name="" id="name" >

</div>

<div class="form-group">

Age:

<input type="text" class="form-control trans-input-area" placeholder="Age"

name="" id="Country" >

</div>

<div class="form-group">

Message: <br>

<textarea class="trans-input-area" placeholder="Write something.."

style="height:200px; width: 80%"></textarea>
21
</div>

<div class="input-group-btn" style="margin: 0; padding: 0;">

<button class="submit" type="submit">Send</button>

<a href="index.html">Back to home</a>

</div>

</body>

This is the actual view of the web application:

22
Website Reference:

▪ www.w3school.com

▪ www.tutorialpoint.com

▪ www.javatpoint.com

To host the Web Application in www.github.com

repository:

⮚ https://arumuga007.github.io/mini-project/index.html

23