React辅导 | SportsCo Web Application

SportsCo – SRS
System Requirements Specification
SportsCo Web Application
Version 1.0
September 6, 2019
Project Team:
Chris Felix
Onam Khan
Mingfeng Li
Katherine Sutarlim
Yi Zhong
1
SportsCo – SRS
Table of Contents
Table of Contents 2
Introduction 3
System Overview 3
Use Cases 4
UC1 Search for Field 5
UC2 View field information 5
UC3 Book Field 6
UC4 Cancel Field 6
UC5 View Bookings 7
UC6 Sign in 7
UC7 Sign Out 8
UC8 Sign up as a member 8
UC9 Update member details 9
UC 11 Register booking status 9
UC10 Add New Staff Account 10
UC12 View All Booking Details 10
UC13 Disable Field Booking 11
UC14 Search all booking history 11
Misuse Case 12
UC15 Inject SQL query into search bar 12
Wireframes 13
Common Elements 13
Home Page 14
Search results 15
Field Information 16
Sign In 19
Sign up 19
My Bookings 20
All Booking 21
Customer’s Profile Page 22
Update profile 23
Add New Staff Account 24
Project Plan 25
2
SportsCo – SRS
Introduction
This document will present a detailed description of the SportsCo Web Application. It will
explain the purpose of the application, the design of the system and its functionality. This
document is intended for and will be proposed to representatives of the SportsCo facility for
its approval.
System Overview
SportsCo is a sports complex which contains multiple sports fields (basketball court, soccer
field, etc.) and this facility allows customers to rent specific fields for a few hours at a time.
All bookings must be made in advance by the customer, and on-site at the reception of the
SportsCo facility. Customers will render payment to SportsCo for the hiring of the sports field
on-site at the beginning of their booked timeslot.
SportsCo Web Application aims to make bookings easier for customers with an online
platform on which they may book fields remotely. The minimum viable product (MVP) for the
will allow customers to create an account on the application, and through this account they
may book fields, and cancel their bookings. The MVP will also allow guests and customers
to view the different sports fields and their available times for booking.
Extended features for the SportsCo Web Application include allowing staff members of
SportsCo to have a special staff account through which they may create a new staff account,
cancel bookings made by customers and disable a booking time-slot in the event of
unavailability of a sports field.
3
SportsCo – SRS
Use Cases
The use cases will be described in this section to show how the system works.
UC1 Search for Field
UC2 View field information
UC3 Book Field
UC4 Cancel Field
UC5 View Bookings
UC6 Sign in
UC7 Sign Out
UC8 Sign up as a member
UC9 Update member details
UC 11 Register booking status
UC10 Add New Staff Account
UC12 View All Booking Details
UC13 Disable Field Booking
UC14 Search all booking history
UC15 Inject SQL query into the search bar
4
SportsCo – SRS
UC1 Search for Field
1.1 Actors:
Customer, Staff.
1.2 Preconditions:
The user is in the home page, results page, or field information page.
1.3 Main Flow:
The user inputs a search keyword into the search bar. With every change in search keyword,
suggestions will be displayed. After the user submits the search, the results will be displayed
[E1]. Results will include the field name and details.
1.4 Subflows:
None.
1.5: Alternative Flows:
[E1] If there are no results for the search keyword, a message indicating this will be
displayed.
1.6 Priority
High
UC2 View field information
2.1 Actors :
Customer; Staff.
2.2 Preconditions:
None.
2.3 Main Flow:
The user selects a specific field. Further details of the field including location and available
times for booking will be displayed.
2.4 Subflows:
None.
2.5 Alternative Flows:
None.
2.6 Priority
High
5
SportsCo – SRS
UC3 Book Field
3.1 Actors:
Customer.
3.2 Preconditions:
1. The user is logged in as a member
2. The user is viewing field information.
3. The user has not exceeded their booking limit
3.3 Main Flow:
A user can select the date and time range that they want to book the sports field for, then
submit the booking. After submitting, a confirmation for the booking will be displayed [E1 –
E2].
3.4 Subflows:
None.
3.5 Alternative Flows:
[E1] If the time chosen by the user is unavailable, the submission will be unsuccessful. A
message notifying the user that the time they requested is unavailable will be displayed.
[E2] If the user has exceeded their booking limit (4 fields per day), the submission will be
unsuccessful. A message notifying the user that they have reached their booking limit will be
displayed.
3.6 Priority:
High
UC4 Cancel Field
4.1 Actors:
Customer
4.2 Preconditions:
1. The user is logged in as a member.
2. The user holds an upcoming booking.
3. The user is in the “My Booking” page.
4.3 Main Flow:
The user can cancel future bookings by clicking on the “Cancel” button of a specific booking.
The booking statement and booking list will be updated afterwards.
4.4 Subflows:
None.
6
SportsCo – SRS
4.5 Alternative Flows:
None.
4.6 Priority
High
UC5 View Bookings
5.1 Actors:
Customer
5.2 Preconditions:
1. The user must be logged in as a member.
5.3 Main Flow:
The user can click on their name shown on the header, and a drop-down menu will show a
link to “My Bookings” page. Clicking on that link will take them to their booking history. The
user can see a list of all the bookings they have made with the field name, booking date and
time, and an option to cancel a future booking.
5.4 Subflows:
None.
5.5 Alternative Flows:
None.
5.6 Priority:
High
UC6 Sign in
6.1 Actors:
Customer, Staff
6.2 Preconditions:
1. The user is not signed in.
6.3 Main Flow:
The system requests the actor to enter username and password. The system validates the
actor’s username and password and logs the actor into the system [E1 – E2].
6.4 Subflows:
None.
6.5 Alternative Flows:
[E1] Invalid Name/Password: If the actor enters an invalid username and/or password, the
system displays an error message. The actor can then retype the username/password.
7
SportsCo – SRS
[E2] If the actor has entered valid staff credentials, the actor is then logged into the system
as a staff with extra privileges.
6.6 Priority:
High
UC7 Sign Out
7.1 Actors:
Member
7.2 Preconditions:
1. The user is logged in
7.3 Main Flow:
If the user clicks on their name is shown at the right-hand side of the header, a drop-down
menu will appear, containing a “Log out” menu. When the user clicks that option, then the
system will log the user out of their account.
7.4 Subflows:
None
7.5 Alternative Flows:
None
7.6 Priority:
High
UC8 Sign up as a member
8.1 Actors:
Customer (non-member)
8.2 Precondition:
1. The user is not logged in
2. The user is not a member
8.3 Main Flows:
The user clicks on the “Sign in” button on the header, then the link to the “Sign Up” page.
The user fills their personal information. The user’s new account will then be created. The
user is redirected to the home page, but this time logged in as a user.
8.4 Sub-flows:
None.
8.5 Alternative Flows:
8
SportsCo – SRS
None.
8.6 Priority
High
UC9 Update member details
9.1 Actor:
Customers
9.2 Preconditions:
1. The user must be logged in as a member
2. The user must be in the “My Profile” page.
9.3 Main flow:
The user can see their account details. The user can then click on a link, which shows a new
section under their details where they can enter updated details [S1]. After saving the
changes, the details will be updated and a confirmation message will be displayed to the
user.
9.4 Subflows:
[S1] In the new sections that appears, The customer enters the details they want to update
and submit it.
9.5 Alternative Flows
None.
9.6 Priority
Medium
UC 11 Register booking status
11.1 Actor:
Staff
11.2 Precondition:
1. The user is logged in as staff
2. The user is on the all bookings page
11.3 Main Flows:
The user can mark one of the bookings in the “All Bookings” page as completed or missed.
11.4 Sub-flows:
None.
9
SportsCo – SRS
11.5 Alternative Flows:
None
11.6 Priority:
Low
UC10 Add New Staff Account
12.1 Actors:
Staff
12.2 Preconditions:
1. The user is logged in as a staff
12.3 Main Flow:
The user will go to the “Account” page and find the “Add new staff account” option in the
bottom. Then, the user will be directed to a page with a data-entry form that asks for the new
account’s email, first name, last name, and password. Once the data is filled, the user will
click the submit button to create the account. The user will click the submit button to create
the account [E1]. Then, the user will be directed to a confirmation page that displays a
message saying the account has successfully been created.
12.4 Subflows:
None
12.5. Alternate Flow
[E1] If any field in the form contains invalid information or is empty, the form can’t be
submitted. There will be a message displayed saying that the account could not be created
because an information is invalid or a field is empty.
12.6 Priority:
Low
UC12 View All Booking Details
14.1 Actors:
Staff
14.2 Precondition:
1. The user is logged in as a staff.
14.3 Main Flows:
The user can click on the “All Bookings” menu accessible from the drop-down menu that
appears when clicking on the user’s name on the header. A list of all bookings made on the
10
SportsCo – SRS
web application. The user can view rows of bookings, each containing the field’s name, the
customer who booked the field, booking date and time, and booking status.
14.4 Subflows:
None.
14.5 Alternative Flows:
None.
14.6 Priority:
Low
UC13 Disable Field Booking
15.1 Actors:
Staff
15.2 Preconditions:
1. The user is logged in as staff.
2. The user is on the field information page.
15.3 Main Flow:
The staff inputs the date and time they want to disable the field for, then submit it. The time
is then disabled, all previous booking made for that time frame will be cancelled, and no
more booking can be made for that time frame.
15.4 Subflows:
None.
15.5: Alternative Flows:
None.
15.6 Priority:
Low
UC14 Search all booking history
14.1 Actors:
Staff
14.2 Preconditions:
1. The user is logged in as staff.
2. The user is on the “All booking history” page
14.3 Main Flow:
11
SportsCo – SRS
The user can select whether they want to search by user’s name or sports field name. Then,
they can enter a keyword into the search bar and submit it. The page will then list all
bookings that matches the keywords [E1].
14.4 Subflows:
None.
14.5: Alternative Flows:
[E1] If there are no bookings matching the keyword, there won’t be any booking displayed.
14.6 Priority:
Low
Misuse Case
UC15 Inject SQL query into search bar
15.1 Actor:
Malicious User
15.2 Preconditions:
1. User enters input into search bar except entering the acceptable information
15.3 Main Flow:
User insert the SQL query into the search bar trying to access the database and spy on
user’s personal information. The query instead is processed as a string instead and a
booking that most closely matches the string will be displayed.
15.4 Sub-flows:
None.
15.5 Alternative Flows:
None.
15.6 Priority:
High
12
SportsCo – SRS
Wireframes
This section will describe the design of the web application interface through wireframes.
Common Elements
The majority of the pages of the web application will use the same header and footer. They
will use the footer shown above and one of the headers above.
The main body will have a fixed size and will be positioned in the center, as seen in the
second, third, and fourth header from the top. To match the body, the logo on the left of the
header and the element on the right is positioned with a distance from the left and right edge
of the screen so they can be in line with the content of the main body.
The first header is used by pages that will be displayed when the user is not logged in. For
this header, there is a button on the right that will lead to a sign in page. The second header
is used by pages that will be displayed when the customer is logged in as a member. On the
right side of the header, the name of the user will be displayed instead of the “Sign in”
button. When clicked, a menu will appear as seen on the third header, containing items “My
Profile”, “My Bookings”, and “Log out”. The fourth header is used by pages that will be
displayed when a user is logged in as a staff. Similar to the second and third header, the
name of the user will be displayed on the right side, but the drop-down menu will contain “My
Staff Profile”, “All Bookings”, and “Log out” instead.
The footer contains the name “SportsCo” as well as credits for the main contributors to this
web application.
13
SportsCo – SRS
Home Page
This page will be the home page of the web application. There will be a promotional image
with promotional text on the top of the page, which will fill the entire screen. There will also
be a search bar on it, which will allow the user to search for sports fields by name. Below the
search bar are field categories which will be an image with the category name on the corner
as shown. When clicked, it will lead to a page displaying all fields in that category. There is
also a footer at the bottom of the page.
14
SportsCo – SRS
Search results
This page displays the sports fields that matches the search. There is a search bar at the top
of the page but below the header so that the user can change their search if they want to.
There are also filters which the user can use to refine their search. The filters will be
drop-down menus, showing filtering options that the user can select. For each sports field,
the image, name and more additional information for the sports field will be shown. Near the
bottom of the page, there are page navigation leading to other pages of the results.
15
SportsCo – SRS
Field Information
This page will display detailed information about a field or sports field. A search bar will still
be on top. Under it, a picture of the sports field will be displayed. The details about the sports
field will be displayed below it. The details include the name of the sports field, a short
description about it, some features of the sports field, and the availability of the sports field.
The user can choose which date they want to see the sports field’s availability for using the
calendar. The availability is then displayed in a timetable format, with the available, booked,
and unavailable time coloured differently.
There are three versions of the page according to whether the user is logged in and who
they are logged in as.
16
SportsCo – SRS
The first one is displayed when the user is not logged in. The user will have to sign in as a
member to book a time, so the button below the timetable on the first version will take the
user to the sign in page.
The second version is displayed when the customer is logged in. Instead of a “Sign In”
button, there are text fields where the user can enter the time and date they want to book the
sports field for and a button to submit their time.
17
SportsCo – SRS
The third version is displayed when the staff is logged in. It is similar to the second version,
but instead of a button to book the time, it has a button to disable booking for that time.
18
SportsCo – SRS
Sign In
The sign in page has a box in the middle containing the form for the sign in details. On the
top left of the box, there will be a back button that takes the user back to the page they come
from. The form will ask the user for their email address and password, give the option to
keep the user signed in and show their password, and have a button to sign in with those
details. On the bottom of the box, there is a link to the sign up page for users who don’t have
an account.
Sign up
This page will also have a box containing the form inside for users to enter their new account
details. It will have a link to sign in at the top for users who already have an account. The
form will ask for the user’s name, email address, and password. The user will have to check
the box to state their agreement to the privacy policy before submitting. After that, the user
can click the “Create Account” button to create their account.
19
SportsCo – SRS
My Bookings
This page will show the user’s booking history. Each row displays a booking number, sports
field, date, and time. There is also a button on the right-most column for the users to cancel
the booking. If the booking has passed, the “Cancel” button will be replaced by a
complete/missed status.
20
SportsCo – SRS
All Booking
This page will display all bookings made by customers and is only accessible to staff users.
There will be a search bar at the top of the page so staff can search for bookings with a
keyword. Under the search bar, there are options to search by name or field. The search bar
will look for the search keyword in the option the user chose (i.e. either in the name or field).
A row of booking will display a booking number, the name of the user who made the
booking, the sports field, the date and time of the booking, a button to cancel the booking,
and an option to mark the booking as completed or missed. A booking that has been marked
will have one of the options checked.
Staff Profile
21
SportsCo – SRS
The My Staff Profile page will display the personal details of the staff who is signed in. The
staff user’s first name, family name and email address is displayed and there are appropriate
links to allow the staff to change their first name, family name and password as well as add a
new staff account.
Customer’s Profile Page
The My Profile page will display the personal details of the customer who is signed in. The
customer’s first name, family name and email address is displayed and there are appropriate
links to allow the customer to change their first name, family name and password.
22
SportsCo – SRS
Update profile
When the customer clicks the link to “Change your name?”, a new section appears below
the link where the customer may enter a new first name and last name as well as a “Change
name” button in order to submit the changes. When the customer clicks the link to “Change
your password?”, a container appears below the link where the customer may enter a new
password as well as a “Change name” button in order to submit the changes.
23
SportsCo – SRS
Add New Staff Account
When the staff clicks the link to “Change your name?”, a container appears below the link
where the staff may enter a new First Name and Last as well as a “Change name” button in
order to submit the changes. When the customer clicks the link to “Change your password?”,
a container appears below the link where the customer may enter a new password as well
as a “Change name” button in order to submit the changes. When the customer clicks the
link to “Add New Staff Account”, a container appears below the link where the customer may
the account details of the new account as well as a “Create account” button in order to
create the new staff account.
24
SportsCo – SRS
Project Plan
25
SportsCo – SRS
26
SportsCo – SRS
Milestones:
● System Design Specification, 20/09/2019
● System Implementation, 25/10/2019
● System Deployment & Testing, 01/11/2019
The timeline of the project is set to be 8 weeks and have three main stages.
1) The first stage will go for 14 days (2 weeks) and would focus on developing the
systems design specifications which will provide details on the deliverables and
scope as well as the basic structure of the system including external dependencies.
1.1) Model the data: Develop an ERD and specify deliverables and
exclusions.
1.2) Decide on code structure: The style and layout of the system code.
1.3) Document dependencies : Document third-party software packages
utilised by the system
2) The second stage will go for 28 days (4 weeks) and is the most critical and complex
part of the project where the development and implementation of the system will take
place.
2.1) Design and implement HTML : Develop company website
2.2) Integrate CSS with HTML : Done simultaneously with 2.1
2.3) Implement Rest API
2.4) Implement AJAX
2.5) Implement User Login Session
2.6) Conduct Security Checks : Check for system vulnerabilities
3) The third stage will go for 13 days (less than 2 weeks) and will include the
deployment of the system and conducting unit tests.
3.1) Set up the system : Have the system running in a production environment
3.2) Complete unit tests : Develop unit tests for system functionalities.
3.3) Incorporate Security Adequate security precautions and restrictions for
the system
27