This document summarizes the development of a Fitness 365 web portal. It includes developing the client side with general account settings forms, validation, and connecting it to the server side database. The client side is created with HTML, CSS, JavaScript and Bootstrap for compatibility across devices. AJAX is used to connect the client forms to backend functions that interface with the SQL database, performing actions like updating username. Appropriate validations and encryption algorithms are also implemented.

1. FITNESS 365
PRACTICE SCHOOL 1

2. WHAT IS FITNESS 365
• Fitness 365 is a school level program which aims at improving
the fitness level of students across the country through
research and innovations in Fitness and Sports .
• Widen the concept of ‘Fitness and Sports for All’
• Promote Fitness as a 365 days a year activity..

3. WHAT IS FITNESS 365
• Improve fitness levels of children over a period of time through
a series of Motor and Physical Fitness Assessments, and round
the year focus on Fun-based Physical Activities, Nutrition and
Mental Fitness.
• Align with the national education policies of providing quality
fitness and sports program in schools.
• Reward and Recognition Programs at National and State levels
to felicitate Top Talent, and move them to specific Sports
Programs

4. 1. AIM OF PROJECT
• I have been assigned project to develop dashboard of FITNESS
365 Webportal . Client Side Development includes designing
General Account Settings . This includes creating forms for
various attributes included in Settings like Username , Password
, Email-Id etc. Server Side Development includes connecting
every form with database .

5. CLIENT SIDE DEVELOPMENT
This part of project contains
creating General Account
Settings and logout option .
Logout option is easily
created in Asp.net by
entering url of Login page in
href of Logout link . Also we
can easily manipulate
windows.history.back() . in
order to prevent that after
logging out we don’t get
logged in by pressing back
button of browser .

6. CLIENT SIDE DEVELOPMENT
General Account Settings consists
attributes like Username, Passwor
Email-ID , School Name , Date of
etc . All these attributes are assig
a value when a new account is cre
Account Settings Page is mainly u
update information which will late
updated in database .

7. CLIENT SIDE DEVELOPMENT
Front End has
developed using HTML ,
CSS , Javascript and
Bootstrap 4.0.0
framework . Using
bootstrap classes like
row , col-xs , col-sm ,
col-md and col-lg in
order to make it
compatible with all kind
of devices like mobile
phones , tablets etc.

8. CLIENT SIDE DEVELOPMENT
Edit acts as a
collapsible button
whch when clicked
displays a form
which asks for
relevant information
in order to update
the value of attribute
. E.g. In Password
field when edit is
clicked , it asks for
old , new password
and confirm the new

9. CLIENT SIDE DEVELOPMENT

10. CLIENT SIDE DEVELOPMENT

11. CLIENT SIDE DEVELOPMENT

12. CLIENT SIDE DEVELOPMENT

13. CLIENT SIDE DEVELOPMENT

14. CLIENT SIDE DEVELOPMENT

15. VALIDATIONS

16. VALIDATIONS

17. VALIDATIONS

18. VALIDATIONS

19. VALIDATIONS

20. SERVER SIDE DEVELOPMENT
• This part of project consists of connecting client side of webportal to
the database which in this case is SQL server 2014 . AJAX
(Asynchronous JavaScript and XML) is used to connect client side to
server side as all the components like buttons etc are all HTML/ CSS
and not asp.net tools . Using asp.net tools directly creates a function
in server side (.cs file) which determines functionality of the
component and there is no need of ajax . But using asp.net tools
makes website quite heavy and slow to load . Hence basic HTML/CSS
components have been used and ajax is used as connection to server
side .

21. SERVER SIDE DEVELOPMENT
This is an example of updating the
username in database. On the left is the ajax
code which is used to connect client side to
server side . Url specifies the location of
function which will take action when submit
button is clicked . Data specifies the variable
name which will be passed to function.This is the function which is
being called by ajax function in
client side when button is
clicked . Statusmessage is a
variable which contains sql query
to be executed .
ExecuteSQLConnection is a class
containing Execute Non Query

22. CONNECTION TO DATABASE
Connection to database (Microsoft
SQL Server 2014 ) is done using
connectionStrings listed in
WebConfig file .
Name =‘SFP’ acts as
connection name
Data Source = server name/IP
address

23. DATA RETRIEVAL FROM DATABASE

24. DATA RETRIEVAL FROM DATABASE
Data retrieval from database has
been done using FillDataset .
DataSet is a datatype which is used
to store table. Squery is sql
connection which is to be executed .
When passed into
ExecuteSQLConnection.FillDataset
returns table as a result of squery
which is then searched through
cursor.

25. PASSWORD ENCRYPTION
• 4 Encryption algorithms have been used
• MD5 Hash Algorithm
• SHA1 Hash Algorithm
• SHA256 Hash Algorithm
• SHA512 Hash ALgorithm

26. THANK YOU
`