W App Assignment

See discussions, stats, and author profiles for this publication at: https://www.researchgate.
net/publication/337224940
Web Applications
Thesis · November 2019

DOI: 10.13140/RG.2.2.16545.15207
CITATIONS READS
0 7,369
1 author:
Alfred Tan Yik Ern

Asia Pacific University of Technology and Innovation
29 PUBLICATIONS 1 CITATION
SEE PROFILE
All content following this page was uploaded by Alfred Tan Yik Ern on 13 November 2019.
The user has requested enhancement of the downloaded file.

UC2F1805IT(ISS) Web Application CT050-3-2-WAPP
ASIA PACIFIC UNIVERSITY OF TECHNOLOGY AND INNOVATION

WEB APPLICATIONS
GROUP ASSIGNMENT
UC2F1805IT(NC) / UC2F1805IT(MBT) / UC2F1805IT(DBA) / UC2F1805IT(ISS) /
UC2F1805IT(CC) / UC2F1805IT(BIS) / UC2F1805IT / UC2F1805CS / UC2F1805MMT
Student Name TP Number

Tan Yik Ern TP046566
Chea Yan Shaw TP045215
Guo Jun Hao TP046636
Intake code: UC2F1805IT(ISS)

Project title: Game Management System
LECTURER: Mohamad Firdaus Che Abdul Ran
HAND OUT DATE: 19 October 2018
HAND IN DATE: 23 January 2019
WEIGHTAGE: 70%
1
Contents
Contents ........................................................................................................................................................ 2
Introduction ................................................................................................................................................... 3
6 project key points ....................................................................................................................................... 3
Elemental change ...................................................................................................................................... 3
Increase shadow ........................................................................................................................................ 4
Remind users............................................................................................................................................. 4
Button........................................................................................................................................................ 5
Situational navigation ............................................................................................................................... 5
Key function.............................................................................................................................................. 5
Requirement Specification ............................................................................................................................ 6
User ........................................................................................................................................................... 6
Administrator ............................................................................................................................................ 6
Major functions ......................................................................................................................................... 6
Design and Modeling .................................................................................................................................... 7
Context Diagram ....................................................................................................................................... 7
DFD-0 Diagram1 ...................................................................................................................................... 8
DFD-1 Diagram ........................................................................................................................................ 9
Data dictionary ........................................................................................................................................ 12
ERD Diagram.......................................................................................................................................... 15
Activity Diagram .................................................................................................................................... 15
Interface design ....................................................................................................................................... 19
Implementation Specification ..................................................................................................................... 28
Create ...................................................................................................................................................... 28
Read ........................................................................................................................................................ 29
Update ..................................................................................................................................................... 30
Login ....................................................................................................................................................... 31
Log out .................................................................................................................................................... 32
Conclusion .................................................................................................................................................. 32
References ................................................................................................................................................... 33
Workload Matrix......................................................................................................................................... 34
2
Introduction
A web application is an application that operates on the Internet or an intranet using a web
browser. An application written in a web-language (such as HTML, JavaScript, Java, etc.) that
needs to be run through a browser.
This Project is about game management system written by C sharp, SQL, Html and CSS
programming. The objective to build game management system is to manage player game
account. For those who want to play the game have to register an account before they start the
game.
There have 2 users in game management system, player and administrator. The player registers
an account through the game web site after that player have to create a game ID in game register
web site. This game management system also allow player to top up their game account. Besides
that, administrator’s job is managing the game management system. Administrator can view the
player, edit information of player, ban the player, search the player or other. Every data is saved
in SQL server management.
6 project key points
Elemental change
Strive to be concise and clear is an important principle of user interface design. The more
features that are shown to the user at the same time, the more time users need to find and think.
Similarly, the fewer options that exist in the interface, the more obvious the features available
and the easier it is to navigate. But simplifying the interface is not a trivial task, especially if you
don't want to reduce the functionality of your application.
Hiding advanced features is an effective way to simplify. Find out which features users use most
often in the interface, and then hide other features. These can be done by drop-down menus and
controls. For example, the advanced filter in the search bar can be used as a special drop-down
menu style for the tail. When users need these filters, they only need a few clicks to use.
Deciding which features to keep showing and what needs to be hidden is not a simple task and
depends on how important the feature controls are and how often they are used.
3
Increase shadow
The pop-up menu and the shadows around the window are not just for visual beauty. On the one
hand, the shadow increases the size of the menu or window, which helps to distinguish the menu
or window from the background; on the other hand, the grayed-out edge shadow can shield the
noise of the background content.
This technique is rooted in traditional desktop programs that help users focus on the pop-up
window. Since many modal windows are not easily highlighted from the desktop content page,
the shadows can make them look stereoscopic, as if floating above other content, thus bringing
the modal window closer to the users.
Remind users
When designing a web app, you not only need to care about the information display under
normal circumstances, but also ensure that the interface performs well and has a guiding role in
the blank state. When no information has been generated on the page, you can place a help
message in the blank area to tell the user how to start.
For example, a project management application home page lists the user's project, and if there is
no project information yet, the user can be provided with a link to the project creation page. Even
if such a function button already exists on this page, an extra help will not be a hindrance. This
technique can effectively encourage users to try the service and use it immediately after
registration. A single step in the application helps users understand the benefits of this
application and whether it is useful to them.
In addition, it is also critical to show users only the most important feature options. It doesn't
make any sense to pour a lot of functions into the user. It's important to keep in mind that users
often want to get more or less information from the app, but don't want to jump into the details,
the user has no time or interest. Motivating users in a blank state can significantly reduce the
churn rate of users and help potential users better understand how the program system works.
4
Button
Many web apps have custom style buttons. The default input buttons may not be suitable for
certain scenarios, and text links sometimes seem too subtle. It should be noted that when the
links are made into a Button style, they should have a button representation.
For example, when you click on the button, they should appear "pressed". This is not just a
purely visual change. Timely feedback to the user can make the web app feel more sensitive and
closer to the user experience of the desktop application. You can use CSS to add buttons such as
"pressed" to achieve different background images in different states.
Situational navigation
It is very important to consider what the user wants to see and what is needed in a given
situation. You don't need to place the same navigation controls everywhere, because users don't
need them under any circumstances.
Key function
Not all controls have the same importance. For example, to create a new entry, there will be two
buttons "Create" and "Cancel". The "Create" here is more important, because this is what the
user is going to do in most cases. In rare cases, the user will click to cancel. Although the two
controls are placed side by side, don't give the same level of attention.
In order to direct attention to "create", we can try to use styles or styles that are not used. One
way is to design "create" as a button style and "cancel" as a text link style. Another way is to use
different colors visually and make the button slightly convex. This makes it easy to capture the
user's gaze.
5
Requirement Specification
In game management system have 2 type of audiences, there are user and administrator.
User
The user also stands for player in game management system. The user able to register an account
through the game web site before user starts the game. User logins in an account with their
username and requirement a password authentication. User able to edit personal data in own
account. User also can make payment to the game (top-up game), purchase the game credit by
real money.
Administrator
The admin is managing the whole game management system. Administrator also require a
username and password before log in game management system. administrator allows edit the
user’s account. For example, change the name, game’s data of user and remove or ban user.
Furthermore, administrator also allows to send email notification and news announcements in the
game management system.
Major functions
Audience: User Administrator
Major function: Create an account and start Manage user in game
the game. management system.
Edit account: Allowed edit personal Allowed edit user account
account only. and own account.
Payment: Allowed make top-up game Not allowed top-up game
credit. credit.
Log in and log out Requirement username and Requirement username and
password. password.
Edit game account: Not allowed edit game Allowed edit game account.
account.
6
Design and Modeling

Context Diagram
(Figure 1: Context diagram of game management system)
7
DFD-0 Diagram1
(Figure 2: DFD-0 diagram of game management system)
8
DFD-1 Diagram
(Figure 3: DFD-1 diagram of unregister player)
(Figure 4: DFD-1 diagram of administrator)
9
(Figure 5: DFD-1 diagram of player login account)
(Figure 6: DFD-1 diagram of player create game ID)
10
(Figure 7: DFD-1 diagram of player’s payment)
(Figure 8: DFD-1 diagram of player logout account)

11
Data dictionary
Entity: FK_character_account
Primary char_id
key
Attributes:
Name Primary key Data type NULL Comment
char_id Yes INT No character ID
acc_id No INT No Character’s account ID
name No Nvarchar(20） No Game character’s name
type No INT No Game character’s job type
level Primary key INT No Character’s level
exp Yes BIGINT No Character’s experience
money No BIGINT No Character’s game money
deleted No INT No Is character has been deleted
create_time No DATETIME No Character’s create time
12
Entity: Acc_id
Primary char_id
key
Attributes:
acc_id Yes int No User account ID
isadmin No int No Is user being admin or not
isban No int No Which account is ban
username No nvarchar(50) No User’s account username
password No nvarchar(50) No User’s password hash MD5
dob No date No User’s birthday date
email No nvarchar(50) No User’s email
point No int No User’s game money
totalplaytimesec No bigint No User play game time
create_time No datetime No To store when the user creates

account’s time
13
Entity: Point_log
Primary FK_point_log_account
key
Attributes:
id Yes int No Unique key
acc_id No int No Account’s ID
type No nvarchar(10) No Type of transaction, such as paypal, online

banking.
value No int No Transaction value, how much game credit,

how much money purchase
time No datetime No Transaction record and history
14
ERD Diagram
(Figure 9: ERD diagram of game management system)
Activity Diagram
(Figure 10: Activity diagram of player register an account in game management system)
15
(Figure 11: Activity diagram of administrator manages player account in game management
system)
(Figure 12: Activity diagram of player log in account)
16
(Figure 13: Activity diagram of player create game ID in game management system)
(Figure 14: Activity diagram of player makes payment in game management system)
17
(Figure 15: Activity diagram of player log out account)
18
Interface design
(Figure 1: Registration web page’s user interface)
The non-register user can visit this Cool game’s registration web page to register an account. The
user requires to fill in all the details. Username, password, Real name, Birthday and email must
be filled up.
19
Lastly, click the register to complete registration account. If the user already has an account,
below the register web page have a visibility sentence, click the “sign in” text can proceed to log
in account.
(Figure 2: Log in account’s user interface)
This is the Cool game’s log in web page for user. User requires to input username and password
to log in personal account. Click the affordance button “Sign in” to log in the account. If the
username and password are not match with registration data, user will not able to log in account.
Moreover, if the user has not created an account. Click the visibility text “Sign up here” can
proceed to register web page. Besides that, user forgets password can click “Forgotten password”
to recovery your account.
20
(Figure 3: Recovery account’s user interface)
User have to input the email address to recovery account. The game management system will
send a link to user ‘s email address. The game management system will generate a new password
and sent it to user’s email. User can use the new password to log in account then change account
password in game management system.
21
(Figure 4: User account’s user interface)
Above is user interface of user profile, user can view and change the avatar profile or edit own
account’s information. After changed the details in account, user have to click the “summit”
button to save the new information.
22
(Figure 5: Game ranking’s user interface)
This web page is shown the top player in this game so far. There have 2 categories, such as top
10 player’s experience and top 10 player’s game money.
23
(Figure 6: Game character’s user interface)
Game character interface can show how many game characters owned. For example, this user
has 4 game characters in this account.
24
(Figure 7: Purchased game credit’s user interface)
This user interface shows all the game credit transaction. If the game credit does not achieve, the
status will show in processed; transaction done will show complete. The layout also shows the
which date and which type of transaction.
25
(Figure 8: User’s dashboard)
Dashboard used for knowing currently have how much player online and latest news. Dashboard
also announce the game event to user.
(Figure 9: Admin’s manage web page)
Administrator manage all the user through this web page. Admin can search specific name, edit
the user’s information or ban the user in game management system.
26
(Figure 10：Play time exchange point web page)
This is an additional feature in game management system. It allowed user’s play time to
exchange the game money. For example, User A play time is high then user A can exchange
more game credit.
27
Implementation Specification
Create
(Figure 1: Create account’s code)
All the data will save in SQL query statement, query insert the string such as username,
password, name, dob, email, create date. After user click the register method button, the data
insert and store in query statement.
28
Read
(Figure 2: Read data’s code)
This path is viewing the data entry in user interface. Open the query statement and execute the
read function. Then the query statement will output line by line, username, name, date of birth,
email. After exit, the query statement will close.
29
Update
(Figure 3: Update data’s code)
Open the data query statement that wish to update. Edit the value username, password, name,
date of birth, email. After click the update method button, the new data entry will insert to query
statement. After exit the update data’s user interface, query statement will close.
30
Login
(Figure 4: Login account’s code)
The username and password should match with query statement. If login successful will pop-up
“login successfully”. Account cannot login maybe the password not match with query statement
or user’s account has been banned.
31
Log out
(Figure 5: Log out’s account code)
Click the logout method button to log out account. After log out, game management system will
redirect to login account web page.
Conclusion
In conclusion, this is a game management system that build with C sharp programming. This
system is designed to benefits of administrator to management the player account.
Besides that, player can make payment in the game management system. For example, we will
add some daily payment methods, such as Touch ‘n Go (TNG), Alipay, WeChat pay, etc. Using
QR code scanning payment makes it easier for users to pay. In addition, we will use the most
advanced Face ID method for more advanced payment methods. although currently the game
management system does not have much features, but we will add more additional features that
useful in the system. For security issues, we will add the security code and algorithm in game
management system. Meanwhile, add the latest news of the game in home page to notify the
player.
A good design of game management system needs to have a good interface design. Follow the
design principles such as visibility, feedback, constraints, mapping, consistency and affordances.
These will help user of game management system feel easy to browse and function the web site.
Using the right color and standard icon will help the player and administrator easier to use and
function the game management system.
Through this project, we have learned a perfect web application. There are many factors to
consider, the most satisfying users' needs, the perfect operation of each function and the query of
various
32
References
Code, V. (2019). C# programming with Visual Studio Code. [online] Code.visualstudio.com.
Available at: https://code.visualstudio.com/docs/languages/csharp [Accessed 23 Jan. 2019].
Code, V. (2019). C# programming with Visual Studio Code. [online] Code.visualstudio.com.

Available at: https://code.visualstudio.com/docs/languages/csharp [Accessed 23 Jan. 2019].
Anh.cs.luc.edu. (2019). 3.6. Returned Function Values — Introductory Programming in C# 1.0

documentation. [online] Available at:
http://anh.cs.luc.edu/170/notes/CSharpHtml/funcreturn.html [Accessed 23 Jan. 2019].
www.javatpoint.com. (2019). C# Function - javatpoint. [online] Available at:

https://www.javatpoint.com/c-sharp-function [Accessed 23 Jan. 2019].
Csharpindepth.com. (2019). C# in Depth: Overloading. [online] Available at:

http://csharpindepth.com/Articles/General/Overloading.aspx [Accessed 23 Jan. 2019].
Mode Effect. (2019). 4 keys to Effectively Managing Your Website After Launch. [online]
Available at: https://modeeffect.com/4-keys-managing-website-after-launch/ [Accessed 23 Jan.
2019].
AGConsult. (2019). Content Management Systems don't manage websites - people do |

AGConsult. [online] Available at: http://www.agconsult.com/en/usability-blog/cms-dont-
manage-websites-people-do [Accessed 23 Jan. 2019].



33
Workload Matrix
Documentation
Student name TP Number Percentage (%)
Tan Yik Ern TP046566 34
Chea Yan Shaw TP045215 33
Guo Jun Hao TP046636 33
Coding
Student name TP Number Percentage
Tan Yik Ern TP046566 33
Chea Yan Shaw TP045215 34
Guo Jun Hao TP046636 33
34
View publication stats

W App Assignment

Uploaded by

Copyright:

Available Formats

W App Assignment

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

W App Assignment

Uploaded by

Copyright:

Available Formats

See discussions, stats, and author profiles for this publication at: https://www.researchgate.

Thesis · November 2019

Alfred Tan Yik Ern

The user has requested enhancement of the downloaded file.

ASIA PACIFIC UNIVERSITY OF TECHNOLOGY AND INNOVATION

Student Name TP Number

Intake code: UC2F1805IT(ISS)

6 project key points

Design and Modeling

(Figure 1: Context diagram of game management system)

(Figure 2: DFD-0 diagram of game management system)

(Figure 3: DFD-1 diagram of unregister player)

(Figure 4: DFD-1 diagram of administrator)

(Figure 5: DFD-1 diagram of player login account)

(Figure 6: DFD-1 diagram of player create game ID)

(Figure 7: DFD-1 diagram of player’s payment)

(Figure 8: DFD-1 diagram of player logout account)

char_id Yes INT No character ID

acc_id No INT No Character’s account ID

name No Nvarchar(20） No Game character’s name

type No INT No Game character’s job type

level Primary key INT No Character’s level

exp Yes BIGINT No Character’s experience

money No BIGINT No Character’s game money

deleted No INT No Is character has been deleted

create_time No DATETIME No Character’s create time

acc_id Yes int No User account ID

isadmin No int No Is user being admin or not

isban No int No Which account is ban

username No nvarchar(50) No User’s account username

password No nvarchar(50) No User’s password hash MD5

dob No date No User’s birthday date

email No nvarchar(50) No User’s email

point No int No User’s game money

totalplaytimesec No bigint No User play game time

create_time No datetime No To store when the user creates

id Yes int No Unique key

acc_id No int No Account’s ID

type No nvarchar(10) No Type of transaction, such as paypal, online

value No int No Transaction value, how much game credit,

time No datetime No Transaction record and history

(Figure 9: ERD diagram of game management system)

(Figure 12: Activity diagram of player log in account)

(Figure 15: Activity diagram of player log out account)

(Figure 1: Registration web page’s user interface)

(Figure 2: Log in account’s user interface)

(Figure 3: Recovery account’s user interface)

(Figure 4: User account’s user interface)

(Figure 5: Game ranking’s user interface)

(Figure 6: Game character’s user interface)

(Figure 7: Purchased game credit’s user interface)

(Figure 8: User’s dashboard)

(Figure 9: Admin’s manage web page)

(Figure 10：Play time exchange point web page)

(Figure 1: Create account’s code)

(Figure 2: Read data’s code)

(Figure 3: Update data’s code)

(Figure 4: Login account’s code)