Gym management system using full stack web development
CHAPTER 1
ABOUT THE COMPANY
Vivarttana Technologies is a efficient mixture of providing outstanding services to customers
and to build a good software package.
It is led by Shanthala Nagaraj, CEO. She has experience in industry and technical coaching
Vivarttana's product strategy and architecture practice can help technology vendors and
enterprises develop innovative and effective product and IT strategies that prove successful for
their business
1|Page
DEPT. OF ECE, KSIT
Gym management system using full stack web development
CHAPTER 2
INTRODUCTION
Full stack web development is the practice of working on both the front-end and back-end of a
program. It is a term mostly used for those working in web development. The developers have
background on creating user interface and user experience for front-end, and also have strong
knowledge in a programming language that is used for handling the logic of the application,
hence back-end.
Full Stack is a layer of software or web development consisting of the front-end and the back-
end portions of an application. Front-end is what the users will see or interact with on your
application. Back-end part is what users do not see, such as application's logic, database, server,
etc. A full-stack web developer is comfortable working with both back-end and front-end
technologies which make a website or application function properly.
Front end: It is the visible part of website or web application which is responsible for user
experience. The user directly interacts with the front-end portion of the web application or
website.
Front end Languages: The front-end portion is built by using some languages which are
discussed below:
• HTML: HTML stands for Hyper Text Markup Language. It is used to design the front-
end portion of web pages using markup language. HTML is the combination of
Hypertext and Markup language. Hypertext defines the link between the web pages.
The markup language is used to define the text documentation within tag which
defines the structure of web pages.
• CSS: Cascading Style Sheets, fondly referred to as CSS, is a simply designed
language intended to simplify the process of making web pages presentable. CSS
allows you to apply styles to web pages. More importantly, CSS enables you to do
this independent of the HTML that makes up each web page.
• JavaScript: JavaScript is a famous scripting language used to create the magic on the
sites to make the site interactive for the user. It is used to enhancing the functionality
of a website to running cool games and web-based software.
Front End Frameworks and Libraries:
• AngularJS: AngularJS is a JavaScript open-source front-end framework that is
mainly used to develop single page web applications (SPAs). It is a continuously
growing and expanding framework which provides better ways for developing web
applications. It changes the static HTML to dynamic HTML. It is an open-source
project which can be freely used and changed by anyone. It extends HTML attributes
with Directives, and data is bound with HTML.
2|Page
DEPT. OF ECE, KSIT
Gym management system using full stack web development
• React.js: React is a declarative, efficient, and flexible JavaScript library for building
user interfaces. ReactJS is an open-source, component-based front-end library
responsible only for the view layer of the application. It is maintained by Facebook.
• Bootstrap: Bootstrap is a free and open-source tool collection for creating responsive
websites and web applications. It is the most popular HTML, CSS, and JavaScript
framework for developing responsive, mobile-first web sites.
• jQuery: jQuery is an open-source JavaScript library that simplifies the interactions
between an HTML/CSS document, or more precisely the Document Object Model
(DOM), and JavaScript. Elaborating the terms, jQuery simplifies HTML document
traversing and manipulation, browser event handling, DOM animations, Ajax
interactions, and cross-browser JavaScript development.
• SASS: It is the most reliable, mature and robust CSS extension language. It is used to
extend the functionality of an existing CSS of a site including everything from
variables, inheritance, and nesting with ease.
Back end: It refers to the server-side development of web application or website with a
primary focus on how the website works. It is responsible for managing the database
through queries and APIs by client-side commands. This type of website mainly consists of
three parts front end, back end, and database.
The back-end portion is built by using some libraries, frameworks, and languages which are
discussed below:
• PHP: PHP is a server-side scripting language designed specifically for web
development. Since, PHP code executed on server side so it is called server-side
scripting language.
• C++ It is a general-purpose programming language and widely used now a days
for competitive programming. It is also used as backend language.
• Java: Java is one of the most popular and widely used programming language and
platform. It is highly scalable. Java components are easily available.
• Python: Python is a programming language that lets you work quickly and
integrate systems more efficiently.
• JavaScript: JavaScript can be used as both (front end and back end) programming
languages.
• Node.js: Node.js is an open source and cross-platform runtime environment for
executing JavaScript code outside of a browser. You need to remember that
NodeJS is not a framework and it’s not a programming language. Most of the
people are confused and understand it’s a framework or a programming language.
Database is the collection of inter-related data which helps in efficient retrieval, insertion and
deletion of data from database and organizes the data in the form of tables, views, schemas,
reports etc.
• Oracle: Oracle database is the collection of data which is treated as a unit. The
purpose of this database is to store and retrieve information related to the query.
It is a database server and used to manages information.
3|Page
DEPT. OF ECE, KSIT
Gym management system using full stack web development
• MongoDB: MongoDB, the most popular NoSQL database, is an open-source
document-oriented database. The term ‘NoSQL’ means ‘non-relational’. It means
that MongoDB isn’t based on the table-like relational database structure but
provides an altogether different mechanism for storage and retrieval of data.
• Sql: Structured Query Language is a standard Database language which is used
to create, maintain and retrieve the relational database.
Figure 2: Full stack web development layers
4|Page
DEPT. OF ECE, KSIT
Gym management system using full stack web development
CHAPTER 3
TASKS PERFORMED
Project on Gym Management and database management and transactions were carried out. This
system is proposed to be an automate database management & transactions. This stores
employee, member, payroll, receipts, and products information. It also provides the facility of
search & advanced search for searching the records efficiently & immediately. This system
provides data storing & report generation with graphical user interface (GUI).
It is always necessary to study and recognize the problems of existing system, which will help
in finding out the requirements for the new system. System study helps in finding different
alternatives for better solution. The project study basically deals with different operations and
steps involved this includes:
1. Data gathering
2. Study of existing system
3. Analysing problem
4. Studying various documents
5. Feasibility study for further improvements
Following are the steps taken during the initial study: Initially, we collected all the information,
which they wanted to store. Then we studied the working of the current system which is done
manually. We noted the limitation of that system which motivated them to have new system.
With the help of these documents, we got basic ideas about the system as well as input output
of the developed system.
The most important thing is to study system thoroughly. Here we are studying both existing
system and proposed system so that advantages & disadvantages of both the systems can be
understood.
The first task was identifying how system can be computerized. Some analysis and projections
were done regarding changes to be made to the existing system. The new developed system for
Gym Management is simple without complexities.
5|Page
DEPT. OF ECE, KSIT
Gym management system using full stack web development
CHAPTER 4
METHODOLGY
4.1 The Spiral Model:
The spiral model, originally proposed by Boehm, is evolutionary software process model that
couples the iterative nature of prototyping with the controlled and systematic aspects of the
linear sequential model. It provides the potential for rapid development of incremental versions
of the software. Using the spiral model, software is developed in a series of incremental
releases. During early iterations, the incremental release might be a paper model or prototype.
During later iterations, increasingly more complete versions of the engineered system are
produced. A spiral model is divided into a number of framework activities, also called task
regions.6 typically, there are between three and six task regions. Figure depicts a spiral model
that contains six task regions:
• Customer communication—tasks required to establish effective communication between
developer and customer.
• Planning—tasks required to define resources, timelines, and other project related information.
• Risk analysis—tasks required to assess both technical and management risks.
• Engineering—tasks required to build one or more representations of the application.
• Construction and release—tasks required to construct, test, install, and provide user support
(e.g., documentation and training).
• Customer evaluation—tasks required to obtain customer feedback based on evaluation of the
software representations created during the engineering stage and implemented during the
installation stage.
Each of the regions is populated by a set of work tasks, called a task set, that are adapted to
the characteristics of the project to be undertaken. For small projects, the number of work tasks
and their formality is low. For larger, more critical projects, each task region contains more
work tasks that are defined to achieve a higher level of formality. In all cases, the umbrella
activities (e.g., software configuration management and software quality assurance) noted is
applied. As this evolutionary process begins, the software engineering team moves around the
spiral in a clockwise direction, beginning at the center.
The first circuit around the spiral might result in the development of a product specification;
subsequent passes around the spiral might be used to develop a prototype and then
progressively more sophisticated versions of the software. Each pass through the planning
region results in adjustments to the project plan. Cost and schedule are adjusted based on
feedback derived from customer evaluation. In addition, the project manager adjusts the
planned number of iterations required to complete the software. Unlike classical process
models that end when software is delivered, the spiral model can be adapted to apply
6|Page
DEPT. OF ECE, KSIT
Gym management system using full stack web development
throughout the life of the computer software. An alternative view of the spiral model can be
considered by examining the project entry point axis, also shown in Figure. Each cube placed
along the axis can be used to represent the starting point for different types of projects.
A “concept development project” starts at the core of the spiral and will continue (multiple
iterations occur along the spiral path that bounds the central shaded region) until concept
development is complete. If the concept is to be developed into an actual product, the process
proceeds through the next cube (new product development project entry point) and a “new
development project” is initiated. The new product will evolve through a number of iterations
around the spiral, following the path that bounds the region that has somewhat lighter shading
than the core. In essence, the spiral, when characterized in this way, remains operative until the
software is retired. There are times when the process is dormant, but whenever a change is
initiated, the process starts at the appropriate entry point (e.g., product enhancement). The
spiral model is a realistic approach to the development of large-scale systems and software.
Because software evolves as the process progresses, the developer and customer better
understand and react to risks at each evolutionary level. The spiral model uses prototyping as
a risk reduction mechanism but, more important, enables the developer to apply the prototyping
approach at any stage in the evolution of the product. It maintains the systematic stepwise
approach suggested by the classic life cycle but incorporates it into an iterative framework that
more realistically reflects the real world. The spiral model demands a direct consideration of
technical risks at all stages of the project and, if properly applied, should reduce risks before
they become problematic.
Figure 4.1: Spiral Model
7|Page
DEPT. OF ECE, KSIT
Gym management system using full stack web development
4.2: SYSTEM REQUIREMENTS:
Hardware and Software Specification:
HARDWARE:
1) Minimum 5 GB HDD space
2) Pentium based processor
3) 128 MB RAM
4) Power Supply For Backup
SOFTWARE:
1) Microsoft Windows 11
2) Microsoft Visual code
8|Page
DEPT. OF ECE, KSIT
Gym management system using full stack web development
4.3: Technologies used
1) Figma is a web-based graphics editing and user interface design app. You can use it to do
all kinds of graphic design work from wireframing websites, designing mobile app interfaces,
prototyping designs, crafting social media posts, and everything in between.
Figma is different from other graphics editing tools. Mainly because it works directly on your
browser. This means you get to access your projects and start designing from any computer or
platform without having to buy multiple licenses or install software.
Another reason why designers love this app is that Figma offers a generous free plan where
you can create and store 3 active projects at a time. It’s more than enough for you to learn,
experiment, and work on small projects.
Figure 4.3.1: Wireframing in figma
2) Hypertext Markup Language or HTML is the standard markup language for documents
designed to be displayed in a web browser. It can be assisted by technologies such as Cascading
Style Sheets (CSS) and scripting languages such as JavaScript.
Web browsers receive HTML documents from a web server or from local storage
and render the documents into multimedia web pages. HTML describes the structure of a web
page semantically and originally included cues for the appearance of the document.
HTML elements are the building blocks of HTML pages. With HTML constructs, images and
other objects such as interactive forms may be embedded into the rendered page. HTML
provides a means to create structured documents by denoting structural semantics for text such
as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated
9|Page
DEPT. OF ECE, KSIT
Gym management system using full stack web development
by tags, written using angle brackets. Tags such as <img /> and <input /> directly introduce
content into the page. Other tags such as <p> surround and provide information about
document text and may include other tags as sub-elements. Browsers do not display the HTML
tags but use them to interpret the content of the page.
Table 4.3.2: HTML Tags
3) Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of
a document written in a markup language such as HTML. CSS is a cornerstone technology of
the World Wide Web, alongside HTML and JavaScript.[2]
CSS is designed to enable the separation of presentation and content, including layout, colours,
and fonts. This separation can improve content accessibility; provide more flexibility and
control in the specification of presentation characteristics; enable multiple web pages to share
formatting by specifying the relevant CSS in a separate .css file, which reduces complexity and
repetition in the structural content; and enable the .css file to be cached to improve the page
load speed between the pages that share the file and its formatting.
Separation of formatting and content also makes it feasible to present the same markup page in
different styles for different rendering methods, such as on-screen, in print, by voice (via
speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has
rules for alternate formatting if the content is accessed on a mobile device.
The name cascading comes from the specified priority scheme to determine which style rule
applies if more than one rule matches a particular element. This cascading priority scheme is
predictable.
10 | P a g e
DEPT. OF ECE, KSIT
Gym management system using full stack web development
The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet
media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998).
The W3C operates a free CSS validation service for CSS documents.
Figure 4.3.3: CSS Syntax
4) JavaScript often abbreviated JS, is a programming language that is one of the core
technologies of the World Wide Web, alongside HTML and CSS. Over 97% of websites use
JavaScript on the client side for web page behaviour, often incorporating third-
party libraries. All major web browsers have a dedicated JavaScript engine to execute
the code on users' devices.
JavaScript is a high-level, often just-in-time compiled language that conforms to
the ECMAScript standard. It has dynamic typing, prototype-based object-orientation,
and first-class functions. It is multi-paradigm, supporting event-driven, functional,
and imperative programming styles. It has application programming interfaces (APIs) for
working with text, dates, regular expressions, standard data structures, and the Document
Object Model (DOM).
JavaScript engines were originally used only in web browsers, but are now core components
of some servers and a variety of applications. The most popular runtime system for this usage
is Node.js. Although Java and JavaScript are similar in name, syntax, and respective standard
libraries, the two languages are distinct and differ greatly in design.
11 | P a g e
DEPT. OF ECE, KSIT
Gym management system using full stack web development
Figure4.3.4: JavaScript Syntax
5) Visual Studio Code, also commonly referred to as VS Code, is a source-code editor made
by Microsoft for Windows, Linux and macOS. Features include support
for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring,
and embedded Git. Users can change the theme, keyboard shortcuts, preferences, and
install extensions that add additional functionality.
Visual Studio Code is a source-code editor that can be used with a variety of programming
languages, including Java, JavaScript, Go, Node.js, Python and C++. It is based on
the Electron framework, which is used to develop Node.js Web applications that run on
the Blink layout engine. Visual Studio Code employs the same editor component used in Azure
DevOps (formerly called Visual Studio Online and Visual Studio Team Services).
6) Bootstrap is an HTML, CSS & JS Library that focuses on simplifying the development of
informative web pages (as opposed to web apps). The primary purpose of adding it to a web
project is to apply Bootstrap's choices of color, size, font and layout to that project. As such,
the primary factor is whether the developers in charge find those choices to their liking. Once
added to a project, Bootstrap provides basic style definitions for all HTML elements. The result
is a uniform appearance for prose, tables and form elements across web browsers. In addition,
developers can take advantage of CSS classes defined in Bootstrap to further customize the
appearance of their contents. For example, Bootstrap has provisioned for light- and dark-
colored tables, page headings, more prominent pull quotes, and text with a highlight.
Bootstrap also comes with several JavaScript components in the form of jQuery plugins. They
provide additional user interface elements such as dialog boxes, tooltips, and carousels. Each
Bootstrap component consists of an HTML structure, CSS declarations, and in some cases
accompanying JavaScript code. They also extend the functionality of some existing interface
elements, including for example an auto-complete function for input fields.
12 | P a g e
DEPT. OF ECE, KSIT
Gym management system using full stack web development
Figure 4.3.6: Bootstrap Template
7) Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that
runs on the V8 engine and executes JavaScript code outside a web browser. Node.js lets
developers use JavaScript to write command line tools and for server-side scripting—running
scripts server-side to produce dynamic web page content before the page is sent to the user's
web browser. Consequently, Node.js represents a "JavaScript everywhere" paradigm,
unifying web-application development around a single programming language, rather than
different languages for server-side and client-side scripts.
Node.js has an event-driven architecture capable of asynchronous I/O. These design choices
aim to optimize throughput and scalability in web applications with many input/output
operations, as well as for real-time Web applications (e.g., real-time communication programs
and browser games).
The Node.js distributed development project was previously governed by the Node.js
Foundation, and has now merged with the JS Foundation to form the OpenJS Foundation,
which is facilitated by the Linux Foundation's Collaborative Projects program.
13 | P a g e
DEPT. OF ECE, KSIT
Gym management system using full stack web development
Figure 4.3.7: Node.Js processing model
8) XAMPP is one of the widely used cross-platform web servers, which helps developers to
create and test their programs on a local webserver. It was developed by the Apache Friends,
and its native source code can be revised or modified by the audience. It consists of Apache
HTTP Server, MariaDB, and interpreter for the different programming languages like PHP and
Perl. It is available in 11 languages and supported by different platforms such as the IA-32
package of Windows & x64 package of macOS and Linux.
XAMPP is an abbreviation where X stands for Cross-Platform, A stands for Apache, M stands
for MYSQL, and the Ps stand for PHP and Perl, respectively. It is an open-source package of
web solutions that includes Apache distribution for many servers and command-line
executables along with modules such as Apache server, MariaDB, PHP, and Perl.
XAMPP helps a local host or server to test its website and clients via computers and laptops
before releasing it to the main server. It is a platform that furnishes a suitable environment to
test and verify the working of projects based on Apache, Perl, MySQL database, and PHP
through the system of the host itself. Among these technologies, Perl is a programming
language used for web development, PHP is a backend scripting language, and MariaDB is the
most vividly used database developed by MySQL.
14 | P a g e
DEPT. OF ECE, KSIT
Gym management system using full stack web development
Figure 4.3.8: XAMPP Apache Engine
4.2: DETAIL LIFE CYCLE OF THE PROJECT
Phased development process:
A development process consists of various phases, each phase ending with a defined output.
The main reason for having a phased process is that it breaks the problem of developing
software into successfully performing a set of phases, each handling a different concern of
software development.
Requirement Analysis:
➢ Requirement analysis is done in order to understand the problem the software system
is to solve. The goal of the requirements activity is to document the requirements in a
software requirements specification document.
➢ There are two major activities in this phase: Problem Understanding or Analysis and
Requirement Specification. In problem analysis, the aim is to understand the problem
and its context, and the requirements of the new system that is to be developed.
➢ Once the problem is analysed and essentials understood, the requirements must be
specified in the requirements specification document. The requirements specification
document. The requirement document must specify all functional and performance
requirements; the formats of inputs and output; and all design constraints that exist due
to political, economic, environmental, and security reasons.
15 | P a g e
DEPT. OF ECE, KSIT
Gym management system using full stack web development
Software Design:
➢ The purpose of the design phase is to plan a solution of the problem specified by the
requirements documents. This phase is the first step in moving from the problem
domain to the solution domain.
➢ The design activity often results in three separate outputs: -
• Architecture Design – It focuses on looking at a system as a combination of many
different components, and how they interact with each other to produce the desired
results.
• High Level Design – It identifies the module that should be built for developing
the system and the specifications of these modules
. • Design Level Design – The internal logic of each of the modules is specified.
Coding:
➢ The goal of the coding phase is to translate the design of the system into code in a given
programming language. For a given design, the aim in this phase is to implement the
design in the best possible way.
➢ The coding phase affects both testing and maintenance profoundly. Well-written code
can reduce the testing and maintenance effort. The testing and maintenance costs of
software are much higher than coding cost. Hence during coding, the focus should be
developing programs that are easy to read and understand, and not simply on
developing programs that are easy to write. Simplicity and clarity should be strived for
during the coding phase.
Testing:
➢ Testing is the major quality control measure used during software development. Its
basic function is to detect defects in the software. The goal of testing is to uncover
requirement, design, and coding errors in the programs.
➢ The starting point of testing is unit testing, where the different modules or components
are tested individually.
➢ The modules are integrated into the system; integration testing is performed, which
focuses on testing the interconnection between modules.
➢ After the system is put together, system testing is performed. Here the system is tested
against the system requirements to see if all the requirements are met and if the system
performs as specified by the requirements.
➢ Finally, the acceptance testing is performed to demonstrate to the client, on real-life
data of the client, the operation of the system.
➢ Then for different test. A test case specification document is produced, which lists all
the different test cases, together with the expected outputs.
➢ The final output of the testing phase is the test report and the error report, or set of such
reports. Each test report contains the set of test cases and the result of executing the
code with these test cases.
16 | P a g e
DEPT. OF ECE, KSIT
Gym management system using full stack web development
CHAPTER 5
EXPERIMENTATION AND RESULTS
Designed a Gym management system using figma for UI/UX designing and HTML, CSS,
JavaScript for languages and Bootstrap for front end framework and Nodejs for backend
framework and XAMPP for database management.
IMAGES OF WEBSITE:
LOGIN PAGE:
Figure 5.1: LOGIN PAGE
17 | P a g e
DEPT. OF ECE, KSIT
Gym management system using full stack web development
MEMBERS SCREEN:
Figure 5.2: MEMBERS SCREEN
PACKAGE DETAILS:
Figure 5.3: PACKAGE DETAILS
18 | P a g e
DEPT. OF ECE, KSIT
Gym management system using full stack web development
REGISTER NEW MEMBER:
Figure 5.4: REGISTER NEW MEMBER
TRAINER DETAILS:
figure 5.5: TRAINER DETAILS
19 | P a g e
DEPT. OF ECE, KSIT
Gym management system using full stack web development
REGISTER NEW TRAINER:
Figure 5.6: REGISTER NEW TRAINER
PACKAGE DETAILS:
Figure 5.7: PACKAGE DETAILS
20 | P a g e
DEPT. OF ECE, KSIT
Gym management system using full stack web development
PAYMENT DETAILS:
Figure 5.8: PAYMENT DETAILS
MAKE NEW PAYMENT:
Figure 5.9: MAKE NEW PAYMENT
21 | P a g e
DEPT. OF ECE, KSIT
Gym management system using full stack web development
CHAPTER 6
CONCLUSION
The “GYM MANAGEMENT SYSTEM” is successfully designed and developed to fulfilling
the necessary requirements, as identified in the requirements analysis phase, such as the system
is very much user friendly, form level validation and field level validation are performing very
efficiently.
The new computerized system was found to be much faster and reliable and user friendly then
the existing system, the system has been designed and developed step by step and tested
successfully. It eliminates the human error that are likely to creep in the kind of working in
which a bulk quantity of data and calculations as to be processed.
The system results in quick retrieval of information that is very vital for the progress any
organization. Cost is minimized in case of stationary. Burden of manual work is reduced as
whenever transaction takes place, there is a no need to record it in many places manually.
22 | P a g e
DEPT. OF ECE, KSIT
Gym management system using full stack web development
REFERENCES:
[1] http://vivarttana.com/about-us.php
[2] https://en.wikipedia.org/wiki/HTML
[3] https://code.visualstudio.com/learn
[4] https://www.w3schools.com/bootstrap
[5] https://www.javatpoint.com/xampp
23 | P a g e
DEPT. OF ECE, KSIT
