Module Code & Module Title
CS5002NP
Software Engineering
Assessment Weightage & Type
35% Individual Coursework
Year and Semester
2018-19 Autumn
Name: Ashish Thapa
College ID: NP04CP4A170008
University ID: 17030706
I confirm that I understand my coursework needs to be submitted online via Google Classroom under
the relevant module page before the deadline in order for my assignment to be accepted and marked.
I am fully aware that late submissions will be treated as non-submission and a mark of zero will be
awarded.
Contents
1.
Introduction.............................................................................................................. 1
1.1.
1.2.
2.
Introduction to System................................................................................................. 1
Introduction to RUP ..................................................................................................... 1
Gantt Chart ............................................................................................................... 2
3.
Use Case ................................................................................................................... 3
3.1.
3.2.
3.3.
Use Case Diagram ........................................................................................................ 3
High level Use Case ...................................................................................................... 4
Expanded Use Cases..................................................................................................... 7
4.
Communication Diagram ........................................................................................... 9
5.
Sequence Diagram .................................................................................................. 10
6.
Class Diagram ......................................................................................................... 11
7.
Design..................................................................................................................... 13
7.1.
7.2.
7.3.
9.
Development Process................................................................................................. 13
Assumptions .............................................................................................................. 14
Visual Design of a user interface ................................................................................. 14
References .............................................................................................................. 18
10.
10.1.
10.2.
10.3.
10.4.
10.5.
10.6.
Appendix............................................................................................................. 19
Registration ............................................................................................................... 19
Payment: ................................................................................................................... 22
Login ......................................................................................................................... 24
Customer Details ....................................................................................................... 31
Registration Records .................................................................................................. 34
Payment Details ......................................................................................................... 38
Table of Figure:
Figure 1: Gantt Chart.................................................................................................. 2
Figure 2: Use Case Diagram ...................................................................................... 3
Figure 3: Communication Diagram ............................................................................. 9
Figure 4: Sequence Diagram ................................................................................... 10
Figure 5: Class Diagram........................................................................................... 12
Figure 6: Registration UI .......................................................................................... 14
Figure 7: Payment Form UI ...................................................................................... 15
Figure 8: Login UI ..................................................................................................... 15
Figure 9: Customer Details....................................................................................... 16
Figure 10: Registration Records ............................................................................... 16
Figure 11: Price Detail .............................................................................................. 17
Table of Tables:
Table 1: Registration .................................................................................................. 4
Table 2: Customer Type ............................................................................................. 4
Table 3: New Customer.............................................................................................. 4
Table 4: Old Customer ............................................................................................... 5
Table 5: Payment ....................................................................................................... 5
Table 6: Check Payment Details ................................................................................ 5
Table 7: Customer card .............................................................................................. 5
Table 8: Generate Report........................................................................................... 5
Table 9: to-do-list ....................................................................................................... 6
Table 10: update to-do-list .......................................................................................... 6
Table 11: delete to-do-list ........................................................................................... 6
Table 12: Reminder update information ..................................................................... 6
Table 13: Daily Task................................................................................................... 6
Table 14: De-register.................................................................................................. 7
Table 15: Expanded use Case of Registration ........................................................... 7
Table 16: Expanded Use Case of to-do-list ................................................................ 8
CS5002NA
Software Engineering
1. Introduction
1.1.
Introduction to System
There is a GYM named as a ‘Fitness GYM’. The system is facing many
problems in maintaining records of the customer with their payment details.
Thus, in order to reduce the problem a system is to be developed. Firstly,
we are required to gather the requirements of the system. The system is
named as ‘Fitness Application’. The administrator is resulting a way to
computerize all the system to make easy approach to data and information
about the customer registration and payment and so on. A procedure
named Rational Unified Process will be the type of software development
lifecycle that will be using in this software development.
1.2.
Introduction to RUP
Rational unified process (RUP) is a software application development
technique with many tools to support in coding the final product and tasks
connected to this goal. RUP is an object-oriented method used to ensure
real project management and high-quality software production.
RUP has enabled great steps in development community standards and the
acceptance of use cases and unified modelling language (UML). RUP is
contained of three characteristics and a recurring four-phase cycle.
RUP has the following key characteristics:
•
Use-case driven from to deployment.
•
Architecture-centric, when architecture is a function of user needs.
•
Iterative and incremental, where large projects are divided into smaller
projects.
RUP follows the following four-phase process:
•
Inception: The core idea is envisioned.
•
Elaboration: Use cases and architecture are designed.
•
Construction: Activities from design to completed product.
•
Transition: Follow-up activities to ensure customer satisfaction
(techopedia, 2019).
Ashish Thapa
1
CS5002NA
Software Engineering
2. Gantt Chart
Figure 1: Gantt Chart.
Ashish Thapa
2
CS5002NA
Software Engineering
3. Use Case
Use cases describes the processes or tasks that a system will carry out, who
will use them and how.
3.1.
Use Case Diagram
Use case diagram is a dynamic or behaviour diagram in UML. Use case
diagram model the functionality of a system using actors and use cases.
Use cases are a set of actions, services and functions that the system
needs to perform (smartdraw, 2015).
The following use case diagram show the use case of Gym Fitness
system:
Figure 2: Use Case Diagram
Ashish Thapa
3
CS5002NA
3.2.
Software Engineering
High level Use Case
Use Case
Registration
Actor
Customer, Admin
Description
Customer fills up a registration form
and the admin inform the customer
of the registration payment fee and
then admin files the customer
registration details and provides an
id card with a unique customer id
no.
Whereas, new staffs are registered
by admin to provide necessary
information to the users.
Table 1: Registration
Use Case
Customer Type
Actors
Customer
Description
Identify Customer Type either he/ she is
new or old client.
Table 2: Customer Type
Use Case
New Customer
Actor
Customer
Description
New
Customer
should
mark
customer type.
Table 3: New Customer
Ashish Thapa
4
new
CS5002NA
Software Engineering
Use Case
Old Customer
Actor
Customer
Description
An old customer can renew his/her
registration, or he/she can add new type
of registration if his/her old registration
has de-register or expired.
Table 4: Old Customer
Use Case
Payment
Actor
Customer
Description
After choosing the customer type he/she
pays the payment.
Table 5: Payment
Use Case
Actor
Description
Check Payment Details
Staff
Staff checks the payment pays by the
customer whereas, maintains payment
details.
Table 6: Check Payment Details
Use Case
Customer Card
Actor
Customer, Admin
Description
After payment of registration, admin
provides a customer card which must be
carried by customer every time to enter
the Gym Fitness.
Table 7: Customer card
Use Case
Generate Report
Actor
Admin
Description
Once
the
customer
registration
is
registered the admin adds details of
customer and generates the reports.
Table 8: Generate Report
Ashish Thapa
5
CS5002NA
Software Engineering
Use Case
To-do-list
Actor
Customer
Description
Customer do set of tasks that are to be
carried out where as fitness staff provide
a task that can be carried out at home.
Plus, customer can update and delete
exercise and create own exercise task
list
setup
on
which
customer
set
reminder which allows customer to do
certain exercise in the given period.
Table 9: to-do-list
Use Case
Actor
Description
Update to-do-list
Customer
Customer can update own exercise task
list setup.
Table 10: update to-do-list
Use Case
Actor
Description
delete to-do-list
Customer
Customer can delete own exercise task
list setup.
Table 11: delete to-do-list
Use Case
Reminder update information
Actor
Staff
Description
If necessary, information is added like
payment updates, payment deadline,
holiday leave and many other programs
which is provided to the customers.
Table 12: Reminder update information
Use Case
Actor
Daily Task
Customer, Staff
Description
Staff defines set of tasks to the customer
that are to be carried out.
Table 13: Daily Task
Ashish Thapa
6
CS5002NA
Software Engineering
Use Case
Actor
Description
De-register
Customer, Admin
If customer is inactive for a month then
customer
is
deregistered,
or
else
customer can de-registered themselves.
If staff is out of contract termination, then
admin deregistered to staff.
Table 14: De-register
3.3.
Expanded Use Cases
Expanded use case of Registration Use case:
Customer, Admin
System
1. Customer fills up the onscreen registration form to
2. System store the customer
records.
input personal details and
makes an inquiry regarding
customer type.
3. The
system
asks
the
customer to pay for the
registration.
4. Request card details
5. Customer
pays
by
credit/debit card or cash.
6. Provides a unique customer
id together with confirmation
of the recorded registration
details.
7. The admin provides the
customer with an id card.
Table 15: Expanded use Case of Registration
Alternative Registration:
Line 1: If customer is an old customer then the system confirms to add
old id no and assign to re-new the id no. Hence, no need to fill up
registration form.
Ashish Thapa
7
CS5002NA
Software Engineering
Line 5: The customer does not have credit/debit card available. Use
Case ends.
Expanded Use Case of to-do-list Use Case:
Customer
System
1. Customer inquiry set of tasks
that are to be carried out.
2. System provides a set of tasks
that
need
to
be
carried
according to the age.
3. Customer divides the set of
4. Division of workout task is
tasks that need to be workout
store in customer profile. Plus,
in every 7 days.
provides
a
reminder
notification bell.
5. Customer follows the workout
routine.
Table 16: Expanded Use Case of to-do-list
Alternative:
Line 1: Customer can create their own workout task in which customer can
update/delete the workout routine. Use Case ends.
Ashish Thapa
8
CS5002NA
Software Engineering
4. Communication Diagram
Communication diagrams, also known as collaboration diagrams. It is a kind of
object diagram, shows how objects interact. A communication diagram is an
added of object diagram that shows the messages between the objects that
travel from one to another (Paradigm, 2019).
For producing communication diagram following steps are include:
a. Recognise the use case and fix the domain classes.
b. In view of the domain classes and making the objects of the domain classes.
c. Objects should be managed which is determined by controller object.
d. Boundary objects determines the user interaction
e. Actor should be added next to boundary object as directly involves with user
interface.
f. Connectors are used to associate pair of objects.
g. Process wise method or Messages are added to the diagram.
Figure 3: Communication Diagram
Based on the above Use Case Model a communication diagram for a
registration was developed. From the above communication diagram, customer
fill up the personal detail on-screen registration form and after that registration
record is recorded in registration object. Customer details is recorded in
different customer object. Whereas, payment detail is got from payment objects
and customer choose the payment choice and record in registration object. And
lastly, in registration records object which customer choose which payment
choice is recorded.
Ashish Thapa
9
CS5002NA
Software Engineering
5. Sequence Diagram
A sequence diagram is simply interaction between objects in a sequential order.
Sequence diagrams describes how and in what order the objects in a system
function.
The main keywords that completes sequence diagram are:
a. Lifeline
b. Activation
c. Message
d. Guards
e. Alternatives
f. Parallel
g. Object Destruction
h. Reflexive Message
i.
Focus of control
j.
Returns
Figure 4: Sequence Diagram
Based on the above Use Case model a sequence diagram for registration Use
Case was developed. In sequence diagram every notation has its own specific
meaning. From the above figure the registration object activation box is more
active while registration records activation box is less active as compare to
other objects.
Ashish Thapa
10
CS5002NA
Software Engineering
6. Class Diagram
Class Diagram is a static diagram that describes the structure of a system by
showing the system’s classes, their attributes, operations or methods, and the
relation among objects.
The benefit of creating class diagram is it gives much information related to
designing.
A class notation consists of three parts:
a. Class Name
The name of the class appears in the first partition.
b. Class Attributes
Attributes are shown in the second partition. The attribute type is shown
after the colon. Attributes map onto member variables (data members) in
code.
c. Class Operations (Methods)
Methods are shown in the third partition. They are the services the class
provides. The return type of a method is shown after the colon at the end of
the method signature.
A class diagram shows a set of classes and relationship between them
(Paradigm, 2015).
Ashish Thapa
11
CS5002NA
Software Engineering
Figure 5: Class Diagram
Ashish Thapa
12
CS5002NA
Software Engineering
7. Design
7.1.
Development Process
I would move forward from this part of the development process on involving
other designing process like data flow diagram and E-R diagrams.
o Data Flow Diagram (DFD)
A Data Flow Diagram is traditional visual representation of the
information flows within a system.
DFD shows how information enters and leaves the system, what
changes the information and where information is stored. The
purpose of the DFD is to show the scope and boundaries of a system.
DFD usually beginning with a context diagram as the level of DFD
diagram, a simple representation of the whole system. To elaborate,
a level 1 DFD notates each of the main sub-processes that together
form the complete system. Level 1 DFD provides more detailed view
of context level diagram. Whereas, level 2 DFD represents a more
detailed look at the processes that make up an information than a
level 1 DFD does.
o E-R diagram
An entity-relationship model (ERM) is a theoretical and conceptual
way of showing data relationships in software development. ERM is
a database modelling technique that generates an abstract diagram
or visual representation of a system’s data that can be helpful in
designing a relational database. These diagrams are known as
entity-relationship diagrams, ER diagrams or ERDs. Entityrelationship patterns were first proposed by Peter Pin-Shan Chen of
the
Massachusetts
Institute
of
Technology
(MIT)
in
1976
(techopedia, 2019).
A design tool that allows database administrators to view the
relationships between several entities is called the entity relationship
diagram. The components of an ERD are:
i)
Entities – It is represented by rectangle shape.
ii)
Actions – It is represented by diamond shape.
iii) Attributes – It is represented by oval shape.
iv) Connecting lines – It is represented by solid lines.
Ashish Thapa
13
CS5002NA
7.2.
Software Engineering
Assumptions
Registrations Form:
Here customer fill up their personal. In addition, customer choose customer
type if it is old customer then no need to fill up form again in which customer
should choose signup button else customer do need to fill up registration
form.
Payment Form:
If customer want to pay their fee online then customer fill their card id and
card name with appropriate amount.
Signup:
After registration is registered customer is provided with id and password
and it is confirmed in which he/she can login to check the details.
Registration Records:
Although any member can view their registration records but only staff are
permitted to edit or delete the records.
Customer:
Registration member of GYM Fitness details are record in appropriate table.
Payment Detail:
Payment details like monthly, 3 month and yearly amount details are
detailed here.
7.3.
Visual Design of a user interface
Registration UI
Figure 6: Registration UI
Ashish Thapa
14
CS5002NA
Software Engineering
Payment Form UI
Figure 7: Payment Form UI
Login UI
Figure 8: Login UI
Ashish Thapa
15
CS5002NA
Software Engineering
Customer Details
Figure 9: Customer Details
Registration Records
Figure 10: Registration Records
Ashish Thapa
16
CS5002NA
Software Engineering
Price Detail
Figure 11: Price Detail
8. Conclusion
The coursework is all about the developing a Gym Fitness Application System.
Rational United Process (RUP) methodology is used for software development
in the coursework. To determine the planning and working phase of the full
coursework Gantt chart is formed. The Gant chart reflects the development
point used in RUP. Use Case modelling is the first process involved in
abstracting the analysis of the software requirements. Use case diagram shows
the graphic description of the interactions among the elements of a system.
Whereas, High level use cases clarify description of the diagram. As required,
two Expanded Use Case for two of the use cases are contained within this
document. By means of the aid of one of the expanded use case Collaboration
and Sequence diagram are set. These figures give understanding of the
domain classes and their activities and timeline respectively. To explain these
communication, Class Diagram divides into the classes and their objects and
methods. Lastly, after all the planning and analysis work, the implementation if
these analogies to develop a good user interface prototype. Hence, a software
for a Gym Fitness Application System, via using RUP was done.
Ashish Thapa
17
CS5002NA
Software Engineering
9. References
Paradigm, 2015. Visual Paradigm. [Online]
Available at: https://www.visual-paradigm.com/guide/uml-unified-modelinglanguage/what-is-class-diagram/
[Accessed 25 04 2019].
Paradigm, V., 2019. Visual Paradigm. [Online]
Available at: https://www.visual-paradigm.com/guide/uml-unified-modelinglanguage/what-is-communication-diagram/
[Accessed 23 04 2019].
smartdraw, 2015. smartdraw. [Online]
Available at: https://www.smartdraw.com/use-case-diagram/
[Accessed 23 04 2019].
techopedia, 2019. techopedia. [Online]
Available at: https://www.techopedia.com/definition/3863/rational-unified-process-rup
[Accessed 25 04 2019].
techopedia, 2019. techopedia. [Online]
Available at: https://www.techopedia.com/definition/1200/entity-relationship-diagramerd
[Accessed 25 04 2019].
Ashish Thapa
18
CS5002NA
10.
Software Engineering
Appendix
10.1. Registration
<!DOCTYPE html>
<html>
<head>
<title>Registration</title>
<script type="text/javascript" src="lib/bootstrap-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="lib/bootstrapdatepicker.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.
css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></scri
pt>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"
></script>
<style type="text/css">
.container{
border: solid;
border-style: dotted;
border-radius: 15px;
background-color: #E9D3D3;
margin-top: 95px;
}
h2{
text-align: center;
}
body{
background-color: #E9DCDC;
}
.btn-default{
background-color: #5CB26D;
width: 45%;
}
.btn-default:hover{
background-color: #928787;
color: white;
}
.btn-primary{
background-color: #5CB26D;
width: 45%;
float: right;
Ashish Thapa
19
CS5002NA
Software Engineering
margin-top: -50px;
color: black;
}
.btn-primary:hover{
background-color: #928787;
}
.btn-secondary{
background-color: #A4DCDE;
}
.btn-secondary:hover{
background-color: #DBF4F5;
}
.btn-group-toggle{
margin-left: 15px;
}
</style>
</head>
<body>
<div class="container">
<h2>GYM Fitness Registration</h2>
<form class="form-horizontal" action="#">
<div class="form-group">
<label class="control-label col-sm-2" for="text">Full
Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="text"
placeholder="Enter Full Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"
for="text">Address:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="text"
placeholder="Enter Address">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"
for="text">Contact:</label>
<div class="col-sm-10">
<input type="tel" class="form-control" id="text"
placeholder="Enter Contact">
</div>
</div>
Ashish Thapa
20
CS5002NA
Software Engineering
<div class="form-group">
<label class="control-label col-sm-2"
for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email"
placeholder="Enter Email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"
for="password">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control"
id="password" placeholder="Enter Password">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="retypepassword">retype-password:</label>
<div class="col-sm-10">
<input type="password" class="form-control"
id="retype-password" placeholder="Enter Password">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="retypepassword">Gender:</label>
<div class="btn-group btn-group-toggle" datatoggle="buttons">
<label class="btn btn-secondary active" >
<input type="radio" name="options" id="option1"
autocomplete="off" checked > male
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2"
autocomplete="off"> female
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3"
autocomplete="off"> other
</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btndefault">Registration</button>
</div>
</div>
Ashish Thapa
21
CS5002NA
Software Engineering
<div class="col-sm-offset-2 col-sm-10">
<a class="btn btn-primary" href="signin.html" role="button">Sign
in</a>
</div>
</form>
</div>
</body>
</html>
10.2. Payment:
<!DOCTYPE html>
<html>
<head>
<title>Payment</title>
<script type="text/javascript" src="lib/bootstrap-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="lib/bootstrapdatepicker.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.
css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></scri
pt>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"
></script>
<style type="text/css">
.container{
border: solid;
border-style: dotted;
border-radius: 15px;
background-color: #E9D3D3;
margin-top: 95px;
}
h2{
text-align: center;
}
.control-label{
font-size: 15px;
}
.opp{
margin-left: 15px;
margin-top: 5px;
}
body{
background-color: #E9DCDC;
}
.btn-default{
Ashish Thapa
22
CS5002NA
Software Engineering
background-color: #5CB26D;
width: 45%;
}
.btn-default:hover{
background-color: #928787;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h2>Payment form</h2>
<form class="form-horizontal" action="#">
<div class="form-group">
<label class="control-label col-sm-2" for="text">Card
Number:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="text"
placeholder="card number">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="text">Card
Holder Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="text"
placeholder="card holder name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"
for="payment">Payment:</label>
<select class="opp" name="Payment" id="payment">
<option value="1">1 month</option>
<option value="2">3 month</option>
<option value="3">yearly</option>
</select><br>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="text">Amount
to pay:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="text"
placeholder="amount to pay">
</div>
</div>
<div class="form-group">
<div class="dates">
Ashish Thapa
23
CS5002NA
Software Engineering
<label class="control-label col-sm2">payment paid date:</label>
<div class="col-sm-10">
<input type="text " autocomplete="off"
id="user1" class="form-control" placeholder="yyyy-mm-dd">
</div>
</div>
</div>
<div class="form-group">
<div class="dates">
<label class="control-label col-sm2">payment expiry date:</label>
<div class="col-sm-10">
<input type="text " autocomplete="off"
id="user1" class="form-control" placeholder="yyyy-mm-dd">
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Pay</button>
</div>
</div>
</form>
</div>
</body>
</html>
10.3. Login
<!DOCTYPE html>
<html>
<head>
<title>Sign in</title>
<link
href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
rel="stylesheet" id="bootstrap-css">
<script
src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></scr
ipt>
<script
src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
html {
background-color: #56baed;
}
body {
font-family: "Poppins", sans-serif;
Ashish Thapa
24
CS5002NA
Software Engineering
height: 100vh;
}
a{
color: #92badd;
display:inline-block;
text-decoration: none;
font-weight: 400;
}
h2 {
text-align: center;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
display:inline-block;
margin: 40px 8px 10px 8px;
color: #cccccc;
}
.wrapper {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
min-height: 100%;
padding: 20px;
}
#formContent {
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
background: #fff;
padding: 30px;
margin-top: 65px;
width: 90%;
max-width: 450px;
position: relative;
padding: 0px;
-webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
text-align: center;
}
#formFooter {
background-color: #f6f6f6;
border-top: 1px solid #dce8f1;
padding: 25px;
Ashish Thapa
25
CS5002NA
Software Engineering
text-align: center;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
h2.inactive {
color: #cccccc;
}
h2.active {
color: #0d0d0d;
border-bottom: 2px solid #5fbae9;
}
input[type=button], input[type=submit], input[type=reset] {
background-color: #56baed;
border: none;
color: white;
padding: 15px 80px;
text-align: center;
text-decoration: none;
display: inline-block;
text-transform: uppercase;
font-size: 13px;
-webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
margin: 5px 20px 40px 20px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover
{
background-color: #39ace7;
}
input[type=button]:active, input[type=submit]:active,
input[type=reset]:active {
-moz-transform: scale(0.95);
-webkit-transform: scale(0.95);
-o-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
Ashish Thapa
26
CS5002NA
Software Engineering
}
input[type=text] {
background-color: #f6f6f6;
border: none;
color: #0d0d0d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 5px;
width:75%;
border: 2px solid #f6f6f6;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
input[type=text]:focus {
background-color: #fff;
border-bottom: 2px solid #5fbae9;
}
input[type=password] {
background-color: #f6f6f6;
border: none;
color: #0d0d0d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 5px;
width: 75%;
border: 2px solid #f6f6f6;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
input[type=password]:focus {
Ashish Thapa
27
CS5002NA
Software Engineering
background-color: #fff;
border-bottom: 2px solid #5fbae9;
}
input[type=text]:placeholder {
color: #cccccc;
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fadeIn {
Ashish Thapa
28
CS5002NA
Software Engineering
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.fadeIn.first {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.fadeIn.second {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.fadeIn.third {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.fadeIn.fourth {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
background-color: #5CB26D;
}
.underlineHover:after {
display: block;
left: 0;
bottom: -10px;
width: 0;
height: 2px;
background-color: #56baed;
content: "";
transition: width 0.2s;
}
Ashish Thapa
29
CS5002NA
Software Engineering
.underlineHover:hover {
color: #0d0d0d;
}
.underlineHover:hover:after{
width: 100%;
}
*:focus {
outline: none;
}
#icon {
width:60%;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper fadeInDown">
<div id="formContent">
<div class="fadeIn first">
<img src="UserImage.jpg" id="icon" alt="User Icon" height="92"
width="65" />
</div>
<form>
<input type="text" id="login" class="fadeIn second" name="login"
placeholder="login">
<input type="password" id="password" class="fadeIn third"
name="login" placeholder="password">
<input type="submit" class="fadeIn fourth" value="Log In">
</form>
<div id="formFooter">
<a class="underlineHover" href="#">Forgot Password?</a>
</div>
</div>
</div>
</div>
</body>
</html>
Ashish Thapa
30
CS5002NA
Software Engineering
10.4. Customer Details
<!DOCTYPE html>
<html>
<head>
<title>Customer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.
css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></scri
pt>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"
></script>
<style type="text/css">
.head{
background-color: #E9D3D3;
}
.heading{
border: 1px solid red;
text-align: center;
background-color: #DBF4F5;
}
body{
background-color: #E9DCDC;
}
.table-striped{
border: solid;
border-style: solid;
border-radius: 25px;
}
</style>
</head>
<body>
<div class="container">
<h2 class="heading"> Customer Details</h2>
<table class="table table-striped">
<thead class="head">
<tr>
<th scope="col">id</th>
<th scope="col">Customer Name</th>
<th scope="col">Address</th>
<th scope="col">Contact</th>
<th scope="col">Email</th>
<th scope="col">Password</th>
<th scope="col">Payment Type</th>
<th scope="col">Gender</th>
</tr>
Ashish Thapa
31
CS5002NA
Software Engineering
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Sandeep Gurung</td>
<td>Amarsingh Chok-10</td>
<td>123456</td>
<td>gurungsandeep@gmail.com</td>
<td>sandeep</td>
<td>3 month</td>
<td>male</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Nirakar Sigdel</td>
<td>New Road-13</td>
<td>246810</td>
<td>sigdelnirakar@gmail.com</td>
<td>nirakar</td>
<td>monthly</td>
<td>male</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Prativa Gurung</td>
<td>Amarsingh Chok-10</td>
<td>13579</td>
<td>gurungprativa@gmail.com</td>
<td>prativa</td>
<td>3 month</td>
<td>female</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Ashish Thapa</td>
<td>Amarsingh Chok-10</td>
<td>951357</td>
<td>thapaashish@gmail.com</td>
<td>ashish</td>
<td>yearly</td>
<td>male</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Neeraj Gurung</td>
<td>Gairapatan-15</td>
<td>258852</td>
<td>gurungniraj@gmail.com</td>
<td>niraj</td>
<td>Yearly</td>
Ashish Thapa
32
CS5002NA
Software Engineering
<td>male</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Amit Gurung</td>
<td>Bindabashini-18</td>
<td>125456</td>
<td>gurungamit@gmail.com</td>
<td>amitgurung</td>
<td>Yearly</td>
<td>male</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Khum Raj Gurung</td>
<td>Chindada-13</td>
<td>789456</td>
<td>gurungkhum@gmail.com</td>
<td>khum</td>
<td>3 month</td>
<td>male</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Abhisek Lamichaney</td>
<td>Madgauda-12</td>
<td>122346</td>
<td>lamichaneabhisek@gmail.com</td>
<td>abhisek</td>
<td>Yearly</td>
<td>male</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Ankit Gurung</td>
<td>Birauta-9</td>
<td>1224756</td>
<td>gurungankit@gmail.com</td>
<td>ankitgurung</td>
<td>Yearly</td>
<td>male</td>
</tr>
<tr>
<th scope="row">10</th>
<td>Kamana Gurung</td>
<td>Amarsingh Chok-10</td>
<td>115456</td>
<td>gurungkamana@gmail.com</td>
<td>kamana</td>
<td>Yearly</td>
Ashish Thapa
33
CS5002NA
Software Engineering
<td>female</td>
</tr>
<tr>
<th scope="row">11</th>
<td>Koplila Gurung</td>
<td>Amarsingh Chok-10</td>
<td>1456456</td>
<td>gurungkopila@gmail.com</td>
<td>kopila</td>
<td>Yearly</td>
<td>female</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
10.5. Registration Records
<!DOCTYPE html>
<html>
<head>
<title>Registration Records</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.
css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></scri
pt>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"
></script>
<style type="text/css">
.head{
background-color: #E9D3D3;
}
.heading{
border: 1px solid red;
text-align: center;
background-color: #DBF4F5;
}
body{
background-color: #E9DCDC;
}
.table-striped{
border: solid;
border-style: solid;
border-radius: 25px;
Ashish Thapa
34
CS5002NA
Software Engineering
}
</style>
</head>
<body>
<div class="container">
<h2 class="heading">Registration Records</h2>
<table class="table table-striped">
<thead class="head">
<tr>
<th scope="col">id</th>
<th scope="col">Customer Name</th>
<th scope="col">Payment Choice</th>
<th scope="col">Payment paid date</th>
<th scope="col">Payment expiry date</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Sandeep Gurung</td>
<td>3 month</td>
<td>2017/5/1</td>
<td>2017/8/1</td>
<td><p data-placement="top" data-toggle="tooltip" title="Edit"><button
class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" datatarget="#edit" ><span class="glyphicon glyphiconpencil"></span></button></p></td>
<td><p data-placement="top" data-toggle="tooltip"
title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete"
data-toggle="modal" data-target="#delete" ><span class="glyphicon
glyphicon-trash"></span></button></p></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Nirakar Sigdel</td>
<td>monthly</td>
<td>2017/5/1</td>
<td>2017/6/1</td>
<td><p data-placement="top" data-toggle="tooltip" title="Edit"><button
class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" datatarget="#edit" ><span class="glyphicon glyphiconpencil"></span></button></p></td>
<td><p data-placement="top" data-toggle="tooltip"
title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete"
data-toggle="modal" data-target="#delete" ><span class="glyphicon
glyphicon-trash"></span></button></p></td>
</tr>
<tr>
Ashish Thapa
35
CS5002NA
Software Engineering
<th scope="row">3</th>
<td>Neraj Gurung</td>
<td>Yearly</td>
<td>2017/6/1</td>
<td>2018/6/1</td>
<td><p data-placement="top" data-toggle="tooltip" title="Edit"><button
class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" datatarget="#edit" ><span class="glyphicon glyphiconpencil"></span></button></p></td>
<td><p data-placement="top" data-toggle="tooltip"
title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete"
data-toggle="modal" data-target="#delete" ><span class="glyphicon
glyphicon-trash"></span></button></p></td>
</tr>
<tr>
<th scope="row">4</th>
<td>Prativa Gurung</td>
<td>3 month</td>
<td>2017/6/1</td>
<td>2017/7/1</td>
<td><p data-placement="top" data-toggle="tooltip" title="Edit"><button
class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" datatarget="#edit" ><span class="glyphicon glyphiconpencil"></span></button></p></td>
<td><p data-placement="top" data-toggle="tooltip"
title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete"
data-toggle="modal" data-target="#delete" ><span class="glyphicon
glyphicon-trash"></span></button></p></td>
</tr>
<tr>
<th scope="row">5</th>
<td>Ashish Thapa</td>
<td>Yearly</td>
<td>2017/7/1</td>
<td>2018/7/1</td>
<td><p data-placement="top" data-toggle="tooltip" title="Edit"><button
class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" datatarget="#edit" ><span class="glyphicon glyphiconpencil"></span></button></p></td>
<td><p data-placement="top" data-toggle="tooltip"
title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete"
data-toggle="modal" data-target="#delete" ><span class="glyphicon
glyphicon-trash"></span></button></p></td>
</tr>
<tr>
<th scope="row">6</th>
<td>Amit Gurung</td>
<td>Yearly</td>
<td>2017/6/1</td>
<td>2018/6/1</td>
Ashish Thapa
36
CS5002NA
Software Engineering
<td><p data-placement="top" data-toggle="tooltip" title="Edit"><button
class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" datatarget="#edit" ><span class="glyphicon glyphiconpencil"></span></button></p></td>
<td><p data-placement="top" data-toggle="tooltip"
title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete"
data-toggle="modal" data-target="#delete" ><span class="glyphicon
glyphicon-trash"></span></button></p></td>
</tr>
<tr>
<th scope="row">7</th>
<td>Khum Raj Gurung</td>
<td>3 month</td>
<td>2017/6/1</td>
<td>2017/9/1</td>
<td><p data-placement="top" data-toggle="tooltip" title="Edit"><button
class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" datatarget="#edit" ><span class="glyphicon glyphiconpencil"></span></button></p></td>
<td><p data-placement="top" data-toggle="tooltip"
title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete"
data-toggle="modal" data-target="#delete" ><span class="glyphicon
glyphicon-trash"></span></button></p></td>
</tr>
<tr>
<th scope="row">8</th>
<td>Abhisek Lamichaney</td>
<td>Yearly</td>
<td>2017/6/1</td>
<td>2018/6/1</td>
<td><p data-placement="top" data-toggle="tooltip" title="Edit"><button
class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" datatarget="#edit" ><span class="glyphicon glyphiconpencil"></span></button></p></td>
<td><p data-placement="top" data-toggle="tooltip"
title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete"
data-toggle="modal" data-target="#delete" ><span class="glyphicon
glyphicon-trash"></span></button></p></td>
</tr>
<tr>
<th scope="row">9</th>
<td>Ankit Gurung</td>
<td>Yearly</td>
<td>2017/6/1</td>
<td>2018/6/1</td>
<td><p data-placement="top" data-toggle="tooltip" title="Edit"><button
class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" datatarget="#edit" ><span class="glyphicon glyphiconpencil"></span></button></p></td>
Ashish Thapa
37
CS5002NA
Software Engineering
<td><p data-placement="top" data-toggle="tooltip"
title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete"
data-toggle="modal" data-target="#delete" ><span class="glyphicon
glyphicon-trash"></span></button></p></td>
</tr>
<tr>
<th scope="row">10</th>
<td>Kamana Gurung</td>
<td>Yearly</td>
<td>2017/10/1</td>
<td>2018/10/1</td>
<td><p data-placement="top" data-toggle="tooltip" title="Edit"><button
class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" datatarget="#edit" ><span class="glyphicon glyphiconpencil"></span></button></p></td>
<td><p data-placement="top" data-toggle="tooltip"
title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete"
data-toggle="modal" data-target="#delete" ><span class="glyphicon
glyphicon-trash"></span></button></p></td>
</tr>
<tr>
<th scope="row">11</th>
<td>Kopila Gurung</td>
<td>Yearly</td>
<td>2017/10/1</td>
<td>2018/10/1</td>
<td><p data-placement="top" data-toggle="tooltip" title="Edit"><button
class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" datatarget="#edit" ><span class="glyphicon glyphiconpencil"></span></button></p></td>
<td><p data-placement="top" data-toggle="tooltip"
title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete"
data-toggle="modal" data-target="#delete" ><span class="glyphicon
glyphicon-trash"></span></button></p></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
10.6. Payment Details
<!DOCTYPE html>
<html>
<head>
<title>Price</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.
css">
Ashish Thapa
38
CS5002NA
Software Engineering
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></scri
pt>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"
></script>
<style type="text/css">
h3{
text-align: center;
font-size: 45px;
border-bottom: solid;
width: 50%;
margin-left: 350px;
margin-right: 350px;
}
body{
background-color: ivory;
}
section.pricing {
background: ivory;
margin-top: 55px;
}
.pricing .card {
border: none;
border-radius: 1rem;
height: 265px;
transition: all 0.2s;
box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}
.pricing hr {
margin: 1.5rem 0;
}
.pricing .card-title {
margin: 0.5rem 0;
font-size: 6rem;
letter-spacing: .1rem;
font-weight: bold;
}
.pricing .card-price {
font-size: 3rem;
margin: 0;
}
.pricing .card-price .period {
font-size: 0.8rem;
Ashish Thapa
39
CS5002NA
Software Engineering
}
.pricing ul li {
margin-bottom: 1rem;
list-style-type: none;
}
.pricing .text-muted {
opacity: 0.7;
}
.pricing .btn {
font-size: 80%;
border-radius: 5rem;
letter-spacing: .1rem;
font-weight: bold;
padding: 1rem;
opacity: 0.7;
transition: all 0.2s;
}
/* Hover Effects on Card */
@media (min-width: 992px) {
.pricing .card:hover {
margin-top: -.25rem;
margin-bottom: .25rem;
box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
}
.pricing .card:hover .btn {
opacity: 1;
}
}
</style>
</head>
<body>
<h3>Price Detail</h3>
<section class="pricing py-5">
<div class="container">
<div class="row">
<!-- Free Tier -->
<div class="col-lg-4">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase textcenter">monthly</h5>
<h6 class="card-price text-center">Rs 1500</h6>
<hr>
<ul class="fa-ul">
Ashish Thapa
40
CS5002NA
Software Engineering
<li><span class="glyphicon glyphicon-ok"></span> Water
Available</li>
<li class="text-muted"><span class="glyphicon glyphiconremove"></span> Protein Available</li>
<li class="text-muted"><span class="glyphicon glyphiconremove"></span> Free T-shirt Available</li>
</ul>
</div>
</div>
</div>
<!-- Plus Tier -->
<div class="col-lg-4">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase text-center">3
month</h5>
<h6 class="card-price text-center">Rs 4000</h6>
<hr>
<ul class="fa-ul">
<li><span class="glyphicon glyphicon-ok"></span> Water
Available</li>
<li class="text-muted"><span class="glyphicon glyphiconremove"></span> Protein Available</li>
<li class="text-muted"><span class="glyphicon glyphiconremove"></span> Free T-shirt Available</li>
</ul>
</div>
</div>
</div>
<!-- Pro Tier -->
<div class="col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase textcenter">Yearly</h5>
<h6 class="card-price text-center">Rs 15000</h6>
<hr>
<ul class="fa-ul">
<li><span class="glyphicon glyphicon-ok"></span> Water
Available</li>
<li><span class="glyphicon glyphicon-ok"></span> Protein
Available</li>
<li><span class="glyphicon glyphicon-ok"></span> Free T-shirt
Available</li>
</ul>
</div>
</div>
Ashish Thapa
41
CS5002NA
Software Engineering
</div>
</div>
</div>
</section>
</body>
</html>
Ashish Thapa
42