Devendra Singh Report 240501 112118
Devendra Singh Report 240501 112118
BATCHELOR OF TECHNOLOGY
in
COMPUTER SCIENCE & ENGINEERING
by
DEVENDRA SINGH (2104220109003)
Affiliated to
DR. APJ ABDUL KALAM TECHNICAL UNIVERSITY, LUCKNOW
Session: 2023-2024
CERTIFICATE
ii
DECLARATION
I hereby declare that the industry training entitled “GAS BOOKING MANAGEMENT
SYSTEM” submitted for the B. Tech (CSE) fourth Year Course work of industrial
training project, is my original work.have done it myself by the help of some resources
and materials which have been required in this project.
SIGNATURE OF STUDENT
DEVENDRA SINGH (210422019003)
iii
ACKNOWLEDGEMENT
“It is not the brain that matters the most, but that which guide them: the character, the
heart, generous qualities and progressive force.”
The satisfaction that accompanies the successful completion of any task would be
incomplete without the mention of people who made it possible, whose constant
guidance and encouragement crown all the efforts with success. Thus, the successful
completion of this project is attributing to the great and indispensible help I received
from different people.
“No single achievement of a person can be attributed to efforts alone, there are always
helping hands that shape the effort into tangible form.”
First of all, I pay my regards to constant guidance and encouragement received from
Mr. S.K Maurya our mentor.
I would also like to acknowledge my immense gratification to my fellow classmates
and my friends for their invaluable support and inspiration. The help received from
each and every one directly or indirectly is duly acknowledged.
iv
ABSTRACT
The aim of this project was to build a Online LPG Booking application using React.js,
Node.js and MongoDB Server programming environment. The system provides
functionality for consumer, allowing them to book for new gas cylinder by features
or address. It provides functionality for the distributors, allowing them to log into the
system and add new stock of cylinder or delete existing ones. For this purpose, each
user is provided a login account with login ID and password access. This web
application makes use of network features, including web controls, html controls,
customer web controls, forms authentication, error handling. The programming tasks
included building the customer web controls and deploying these on the Apache web
server. The system architecture is based on the three-tier enterprise architecture,
comprised of a data layer, business logic, and a presentation layer.
v
TABLE OF CONTENTS
Tittle i
Certificate ii
Declaration iii
Acknowledgement iv
Abstract v
List of Tables vii
List of Figures viii
CHAPTER 1 : INTRODUCTION 9-6
1.1 PROBLEM STATEMENT 9
1.2 PROJECT AIM 9
1.3 SCOPE 10
1.4 OVERVIEW 10
1.5 OPERATION ENVIRONMENT 11
1.6 SOFTWARE AND HARDWARE REQUIREMENTS 12
1.8 PROPOSED SYSTEM 13
CHAPTER 2 : OTHER TECHNOLOGY USED 14-16
2.1 SOFTWARE TOOLS USED 14
2.2 REACT.JS AS FRAMEWORK: 16
CHAPTER 3:ABOUT THE PROJECT 20-36
3.1 EXPLANATION: 20
3.2 MODULE DESCRIPTION: 22
3.3 SYSTEM DESIGN 24
4.4 SCREENSHOT 27
CONCLUSION 32
FUTURE SCOPE 32
REFERENCES 33
vi
LIST OF TABLES
vii
LIST OF FIGURES
viii
CHAPTER-1
INTRODUCTION
The aim of an online gas booking system is to provide a convenient, efficient, and
transparent platform for customers to book and manage gas cylinder deliveries. The
primary objectives of such a system include:
Convenience: To enable customers to book gas cylinders from the comfort of their
homes or through mobile devices, eliminating the need for physical visits to gas
agencies or long phone calls.
Efficiency: To streamline the gas cylinder booking and delivery process, reducing
wait times and ensuring timely delivery to customers.
Transparency: To provide real-time information on gas cylinder pricing, availability,
and delivery status, allowing customers to make informed decisions.
Resource Optimization: To optimize the allocation of resources, including delivery
routes and schedules, to reduce operational costs and delivery times for gas agencies.
Safety: To promote safety by ensuring that customers receive gas cylinders in a
timely manner, reducing the risks associated with running out of gas.
Secure Online Payments: To offer secure online payment options for customers,
making the payment process convenient and reliable.
Customer Engagement: To enhance customer engagement by providing features
such as order tracking, alerts, and notifications.
9
Operational Effectiveness: To improve the overall efficiency of gas agencies,
reducing manual work and administrative overhead.
Customer Support: To offer responsive customer support to address customer
inquiries and concerns promptly.
1.3 SCOPE
The scope of an online gas booking system is broad, and it encompasses various
aspects related to the management and facilitation of gas cylinder bookings and
deliveries. Designing an intuitive and user-friendly web or mobile application
interface for customers to interact with the system. This includes login/registration,
booking forms, account management, and order tracking. Implementing secure user
authentication mechanisms to protect user data and access to their accounts.
1.4 OVERVIEW
An online gas booking system is a digital solution designed to streamline the process of
booking, tracking, and managing the delivery of gas cylinders to both residential and
commercial customers. This system leverages modern technology to replace or enhance
traditional, often manual, methods of booking gas cylinders.
User Interface
Booking Gas Cylinders
Real-time Information
Inventory Management
Delivery Scheduling
Scalability Regulatory
Compliance
Order Tracking
Payment Processing
Advantages
Online booking systems are accessible round the clock, allowing customers to
make reservations at any time, even outside of business hours.
Customers can book appointments or services without the need for phone calls
or in-person visits, providing a convenient and efficient booking process.
The system can prevent double-booking or overbooking, ensuring a smoother
operational flow.
10
1.5 OPERATION ENVIRONMENT
TARGET DEVICE
ANDROID, TABLET
MEMORY
500 MB RAM
HARD DISK SPACE
1 GB HDD
11
1.6 SOFTWARE AND HARDWARE REQUIREMENTS
This section describes the software and hardware requirements of the system
SOFTWARE REQUIREMENTS
HARDWARE REQUIREMENTS
Intel 5 is more than enough to handle day-to-day tasks, and they can even hold their
own when it comes to gaming.
RAM 8GB is used as it will provide fast reading and writing capabilities and will in turn
support in processing.
12
1.8 PROPOSED SYSTEM
A proposed online gas booking system can significantly enhance the efficiency and
convenience of ordering and delivering gas for both customers and suppliers.
System Interfaces:
❖ User Interfaces
This section provides a detailed description of all inputs into and outputs from the
system. It also gives a description of the hardware, software and communication
interfaces and provides basic prototypes of the user interface.
The protocol used shall be HTTP.
The Port number used will be 80.
There shall be logical address of the system in IPv4 format.
❖ Hardware Interfaces
Laptop/Desktop PC-Purpose of this is to give information when Patients ask
information about doctors, medicine available lab tests etc. To perform such Action
itneed very efficient computer otherwise due to that reason patients have to wait for
a long time to get what they ask for.
Laser Printer (B/W) - This device is for printing patients’ info etc.
Wi-Fi router - Wi-Fi router is used to for internetwork operations inside of a hospital
and simply data transmission from pc’s to sever.
Communication Interfaces
NIC (Network Interface Card) – It is a computer hardware component that allows a
computer to connect to a network. NICs may be used for both wired and wireless
connections.
CAT 5 network cable- for high signal integrity
TCP/IP protocol- Internet service provider to access and share information over the
Internet
13
Chapter-2
THE TECHNOLOGY USED
Database Management:
Relational Database: MySQL, PostgreSQL, or SQL Server for storing structured data.
NoSQL Database: MongoDB or Cassandra for storing unstructured data if necessary.
Hosting and Deployment:
Cloud Platforms: Amazon Web Services (AWS), Microsoft Azure, Google Cloud
Platform (GCP), or a platform like Heroku.
Web Hosting Services: Bluehost, SiteGround, or similar for hosting the web application.
Version Control:
14
PROGRAMMING LANGUAGE
A MERN-based language website is a web application built using the MERN stack, which is
an acronym for MongoDB, Express.js, React, and Node.js. This stack is a popular choice for
developing modern, dynamic, and responsive web applications. When applied to a language-
related website, it can offer a wide range of features and functionalities to assist language
learners, educators, or enthusiasts.
MongoDB: This is a NoSQL database that stores data in a flexible, JSON-like format. In the
context of a language website, MongoDB can be used to store user profiles, content,
vocabulary, and other language-related data.
Express.js: Express is a backend web application framework for Node.js. It provides a simple
and efficient way to handle HTTP requests and manage routes, making it a key component
for creating the server-side logic for your language website.
React.js: React is a JavaScript library for building user interfaces. It is known for its
component-based architecture and reusability. In a language website, React can be used to
create interactive and responsive user interfaces, such as language learning exercises,
flashcards, quizzes, and more.
Node.js: Node.js is a runtime environment that allows you to run JavaScript on the server
side. It's ideal for building the backend of your language website, handling authentication,
user management, and interfacing with the database.
User Registration and Profiles: Users can create accounts and maintain profiles to track
their language learning progress.
Language Courses: The website will offer a range of language courses. Each course will
include lessons, quizzes, and interactive activities.
Unity Integration: As demonstrated in the example, Unity will be used to create immersive
language learning experiences.
Progress Tracking: Users can monitor their progress and see their improvements over
time.
Social Features: Users can connect with other learners, join study groups, and share their
achievements on social media.
Mobile Responsiveness: The website will be designed to work seamlessly on both desktop
and mobile devices.
Multilingual Support: The website itself will support multiple languages, making it
accessible to a global audience.
15
Adobe Illustrator:
Creating an Adobe Illustrator design for an online gas booking system involves creating a
user interface (UI) that is visually appealing, user-friendly, and intuitive. Below, I'll outline
the steps to design the interface for such a system:
Before you start designing, it's essential to understand the user requirements and the features
of the online gas booking system. This can include user registration, gas cylinder selection,
delivery scheduling, payment processing, and order tracking.
Design wireframes to plan the layout of your online gas booking system. Wireframes are
basic sketches of your web or app interface that help you organize the elements. Adobe
Illustrator offers various shapes and tools to create wireframes.
The home page should be visually appealing and provide essential information. You can use
Adobe Illustrator to create graphics and icons to represent key features. For instance, you
might create icons for "Order Gas," "Track Delivery," "User Profile," and "Customer
Support."
Create a clean and straightforward registration page. Include fields for users to enter their
details, such as name, address, contact information, and a password. Design buttons for "Sign
Up" and "Log In."
This page should allow users to choose the type and quantity of gas cylinders they want to
order. Use Adobe Illustrator to create appealing graphics or illustrations of gas cylinders.
Allow users to schedule the date and time for gas delivery. Create an intuitive calendar
interface and time picker. Use Adobe Illustrator to design calendar widgets and icons.
Design a secure payment page that includes fields for card details or other payment methods.
Ensure that the page conveys trust and security. Use Adobe Illustrator to create icons for
different payment options and secure transaction visuals.
16
Step 8: Design the Order Confirmation Page
After the user completes the booking process, provide them with a confirmation page. Design
it with a summary of the order, estimated delivery time, and any additional information. You
can use Adobe Illustrator to create visually pleasing order confirmation graphics.
The user profile page should allow users to view their order history, manage their details, and
change their preferences. Create user-friendly icons and navigation elements using Adobe
Illustrator.
Include a section for customer support, FAQs, or contact information. Use Adobe Illustrator
to design icons for different support options.
Apply your brand colors, logo, and typography consistently throughout the design to maintain
a cohesive look.
After completing the design in Adobe Illustrator, export the assets in the necessary formats
(e.g., SVG, PNG) to use in the actual development of the online gas booking system.
VISUAL STUDIO
Creating the Visual Studio Code project structure for an online gas booking system involves
setting up the directories and files for the frontend and backend components of the system.
Here's a basic structure for such a project:
Project Structure:
Root Directory
This is the main directory for your project.
frontend/
This directory contains all the files related to the front-end of the online gas booking
system. You can use React for the front-end.
17
src/
Contains all the source code for the front-end.
components/
Store React components for various parts of the application (e.g., Home, Registration,
Gas Selection, Payment).
pages/
Define different pages of the application (e.g., Home, Login, Register, GasSelection).
utils/
Utility functions and reusable code.
App.js
The main entry point for the React application.
Index.js
The entry point for rendering the React app.
Package.json
Dependency and script configuration for the front-end.
Backend/
This directory contains all the files related to the backend of the online gas booking
system. You can use Node.js and Express.js for the backend.
Routes/
Define API routes for the system (e.g., user registration, gas booking, payment
processing).
Models/
Define data models (e.g., User, GasOrder) using a tool like Mongoose if you're using
MongoDB as your database.
Controllers/
Handle business logic for the routes.
config/
Store configuration files (e.g., database connection, environment variables).
app.js
The main entry point for the Node.js application.
package.json
Dependency and script configuration for the backend.
database/
18
If you are using a database like MongoDB, you can include data migration scripts or
database setup files in this directory.
public/
Store public assets like images, styles, and client-side JavaScript.
package.json
The project's root package.json file manages dependencies and scripts for both the front-
end and back-end.
Additional Files:
19
CHAPTER 3
ABOUT THE PROJECT
3.1 EXPLANATION:
This phase mainly deals with how we can plan and organize different stages for each
project. There are different stages for each project. A good software engineer must go
through these phases. Otherwise, chances failure are very high and also it is difficult to
correct. A good programmer must go through these following phases as system study, data
collection, design, coding, testing and implementation.
The developing process of the LPG Booking System will be carried out in this chapter as
well as the system objectives, scope and scheduling
The project aims and objectives that will be achieved after completions of the system were
carried out in this chapter. The succession of this system Will also be evaluated through this
sub chapter. The project objectives are:
To manage the details of Consumers and Staffs.
. To maintain booking details and keep track of complaints and remarks. To design a
user friendly graphical user interface which suits the users.
.
DESIGN
Design is the first Step into the development phase for any engineered product or System.
Design is creative process. A good design is the key to effective system. The term "design"
is defined as "the process of applying various techniques and principles for the purpose of
defining a process or a system in sufficient detail to permit its physical realization". It may
be defined as a process of applying various techniques and principles for the purpose of
defining a device, a process or a system in sufficient detail to permit its physical realization.
Software design sits at the technical kernel of the software engineering and is applied
regardless of the development paradigm that is used. The system design develops the
architectural detail required to build a system or product. As in the case of any systematic
approach, this software too has undergone the best design phase fine tuning all efficiency,
performance and accuracy levels. The design phase is a transition from a user oriented
document to a document to the programmers or database personnel.
20
INPUT DESIGN
The design of input focuses on controlling the amount Of input required, controlling the
errors, avoiding delay, avoiding extra steps and keeping the process simple. The input is
designed in such a way so that it provides security and ease of use with remaining the
privacy. Input Design considered the following things:
(d) Methods for preparing input validations and steps to follow when an error occur.
OUTPUT DESIGN
A quality output is one, which meets the requirements of the end user and presents the
information Clearly. output design it is determine how the information is to be displaced for
immediate need and also the hard copy output. It is the most important and direct source
information to the user. Efficient and intelligent output design impro•.es the system's
relationship to help user decision making,
Designing computer output should proceed in nn Organized, well thought out manner; the
right output must be developed while ensuring that each output element is designed so that
people Will find the system can use easily and effectively. When analysis design computer
output, they should:
(a) Identify the specific output that is needed to meet the requirements.
(c) Create document, report, or Other formats that contain information produced by the
system.
DATABASE DESIGN
A database is an organized mechanism that has the capability of storing information through
which a user can retrieve stored information in an effective and efficient manner. The data is the
purpose of any database and must be protected.
The database design is a two level process. In the first step, user requirements are gathered
together and a database is designed which Will meet these requirements as clearly as possible.
This Step is called Information Level Design and it is taken independent of any individual
DBMS.
In the second Step, this Information level design is transferred into a design for the specific
21
DBMS that will be used to implement the System in question. This step is called Physical Level
Design, concerned with the characteristics of the specific DBMS that will be used. A database
design runs parallel with the system design. The organization of the data in the database is
aimed to achieve the following two major Objectives.
(a) Data Integrity
(b) Data Independence
(a) To structure the data so that there is no repetition of data, this helps in saving.
(b) To permit simple retrieval of data in response to query and report request.
(c) To simplify the maintenance of the data through updates, insertions, deletions.
(d) To reduce the need to restructure or reorganize data which new application
requirements arise.
BASIC MODULES
i. Admin Module
ADMIN MODULE
22
CONSUMER MODULE
23
3.3 SYSTEM DESIGN
DATAFLOW DIAGRAMS
Larry Constantine first developed the DFD as a way of expressing System requirements in a
graphical form that led to module design. A DFD also known as "bubble chart" has the of
clarifying system requirements and identify major transformations that Will become programs
in system design. so it is the starting point of design phase that functionality decomposes the
requirement specification down to the lowest levels Of details. A DFD consists of series of
bubbles joined by lings. The bubbles represent data flow in the system.
2. An arrow identifies data flow, data ill motion. It is a pipeline through which information
flows.
3. A circle or bubble represents a process that transforms incoming data flows into outgoing
data flows.
Figure process
24
A DFD describes what data flow rather than how they are processed. So it does not depend on
negation. The key question we are trying to is: what major transformation must occur for input
to be correctly transformed to output hardware, software and data structure or file. The creation
of the designed system takes place in the implementation phase. Development phase overview,
preparing of implementation, computer program development phase report and overview. It also
performs activities like writing, testing, debugging and documentation.
25
FIG 4.2.3 Level 01 DFD
26
4.4 SCREENSHOT
27
FIG 4.2.3 USER BOOKING HOME PAGE
28
FIG 4.2.5 BOOK NOW PAGE
29
FIG 4.2.7 FEEDBACK PAGE
30
FIG 4.2.9 ALL BOOKING PAGE
31
CONCLUSION
This system provides the facility to handle and manage details of consumer, staff and Jpg
booking of a gas agency efficiently and securely. The system is simple and easy to
maintain. This can be implemented in any gas agency. The system is futuristic. The system
also handles the complaints and queries of consumers.
In future, the system can be enhanced with billing System and delivery Status.
Availability of cylinders and details on website will also be provided through this system.
FUTURE SCOPE
The future scope of an online gas management system is promising, as it aligns with the
ongoing digital transformation trends and the growing need for efficient and sustainable
energy management.
32
REFERENCES
4. www3school.com
5. www.codeproject.eorn
6. www.staekoverflow.com
7. www.codepen.com
8. www.fortnget.com
9. www.csbnttongenerator.com
33