ICT SBA final

Information and Communication Technology

School-Based Assignment

Someday you will be part of Sports Day.

Chen Hung Ta 6D 05

CSS 2013-2014 ICT SBA-S.A.I.S. Chen Hung Ta

2

Copyright © All right reserved.

Table of Content

Objective ................................................................................................................................................................. 4

1. Situation ................................................................................................................................................... 4

2. Aims .......................................................................................................................................................... 4

3. Target Users .............................................................................................................................................. 4

4. Scope ........................................................................................................................................................ 4

5. Consideration ........................................................................................................................................... 5

Analysis ................................................................................................................................................................... 6

1. Background............................................................................................................................................... 6

2. Stakeholders and their needs ................................................................................................................... 6

3. Pain point ................................................................................................................................................. 7

4. Technology used ....................................................................................................................................... 7

5. General Restriction ................................................................................................................................... 8

6. Assumption .............................................................................................................................................. 9

7. Plan ........................................................................................................................................................... 9

A. Identity Verification ........................................................................................................................ 10

B. Existing System ............................................................................................................................... 14

C. IT tools Comparison ....................................................................................................................... 19

D. Database Management System Comparison ................................................................................. 21

Design and Implementation ................................................................................................................................. 24

1. Application Management ....................................................................................................................... 25

A. Login functions ............................................................................................................................... 25

B. Account Register ............................................................................................................................ 26

C. Identification .................................................................................................................................. 27

D. Photos............................................................................................................................................. 27

E. Comments ...................................................................................................................................... 28

F. Event register ................................................................................................................................. 29

G. Records ........................................................................................................................................... 30

2. Database Management .......................................................................................................................... 31

A. User data ........................................................................................................................................ 31

B. Picture information ........................................................................................................................ 31

C. Comment information .................................................................................................................... 31

D. Event ............................................................................................................................................... 31

E. Event Registration .......................................................................................................................... 32

Testing and Evaluation .......................................................................................................................................... 33

1. Web Browsers ........................................................................................................................................ 33

2. Identification .......................................................................................................................................... 33

3. System modules ..................................................................................................................................... 34

A. Account Registration ...................................................................................................................... 34

B. Menu .............................................................................................................................................. 35

C. Record Viewing and Editing............................................................................................................ 35


3 Copyright © All right reserved.

D. Photo Viewing and Uploading ........................................................................................................ 36

E. Comment ........................................................................................................................................ 37

F. Event register ................................................................................................................................. 37

User Testing .......................................................................................................................................................... 38

1. User-Friendly .......................................................................................................................................... 38

2. Feedback ................................................................................................................................................ 38

A. Upload photo button...................................................................................................................... 38

B. Photo showing method .................................................................................................................. 38

C. Full name input .............................................................................................................................. 38

Conclusion and Discussion ................................................................................................................................... 39

1. Conclusion .............................................................................................................................................. 39

2. Further Development ............................................................................................................................. 39

A. CaptCha .......................................................................................................................................... 39

B. Automatic event schedule ............................................................................................................. 39

C. Secure Transmission ....................................................................................................................... 40

D. Password Encryption ...................................................................................................................... 40

E. Photo Showing method .................................................................................................................. 40

Reference .............................................................................................................................................................. 41


4


Objective

1. Situation

The main objective of this project is to set up a Sport Activities Information System for the school

Sports Day by allowing to share information and photos among teachers, students and parents. At the

same time, provide a registration system for students to register for sports events.

As being an IT project manager responsible for this project, I am going to produce a system contain

the following requirements for Carmel Secondary School:

(i) Provide a registration system for students to register for sports activities;

(ii) Provide a management system for organizers to share information about various sports events

and allow students to register for events;

(iii) Provide a system for keeping participation records, schools records, photos and other details

about various sports activities;

(iv) Provide an interface for teachers, students and optionally other visitors to browse through

details on previous events;

(v) Provide a platform for students and teachers to share and communicate on issues related to

these sports activities such as providing feedback, evaluation forms etc.

2. Aims

The aim of this project is consist of two parts.

First, this project is to provide a brand new registration method for student to register for sport

events, so that students can register for their sport event with a digital device instead of handing in

registration form on sheet. In addition, this project will provide a schedule of the sports events so that

teachers and students can check for the schedule at anytime and anywhere they want. Also, the record

access and manage function will be included in the system.

On the other hand, this project is to provide a platform for students and teachers to communicate

about the topics and photos related to Sports Day, in order to narrow the gap between teachers and

students, at the same time provide more chance for the teacher-student communication.

3. Target Users

Since this project is designed for Carmel Secondary School’s Sports Day, the citizens outside of the

school will be excluded. So the user of the project will be the teachers, students and parents.

4. Scope

This project should provide a registration system for students to register for the sports events. At



the same time, a log-in function and an account creating function in order to record the students

participate in each sports event. Also, the system has to make sure the students do not register for 3

field events or 3 track events which is a policy of Carmel Secondary School.

On the other hand, a sharing platform should be provided for user to communicate and share

ideas, feedback and photos.

5. Consideration

This system should contain a user friendly interface so that everyone of the school will be able to

access the information on the system with no difficulty. The system should also be able to have a short

response time in order to provide a good using experience to user.


6


Analysis

1. Background

Carmel Secondary School organizes Sports Day every year. Many activities allow students to register

individually while other activities allow students to form groups and participate in it. The participation

records, photos and other multimedia artifacts are not kept systematically. The teacher-in-charge decided

to implement and information system to streamline the management, records keeping and information

sharing on sports activities among Carmel Secondary School teachers, students and parents.

2. Stakeholders and their needs

Stakeholders Responsibility and Needs

Application

administrator1

Provide the application functions which meets the users’ needs;

Design a user-friendly interface to improve users’ using experience;

Revise the source code of the application for debugging;

Decide users’ access authorization to manage the data can be read

and write by different group of users.

Database administrator1 Make sure that data can be read and write by users;

Record users’ access authorization;

Enhance the efficiency of extracting data.

Server administrator2 Avoid physical problems happening;

Restore the server if any physical.

Organizers3 Announce the results of each event;

Make announcement when the event is about to begin.

The most updated participate records for announcement;

Timetable of the whole sports day rundown;

Input the previous events records and school records.

Teachers3 Give feedback about the Sports Day;

Share the photos he/she take in Sports Day.

Platform to submit students’ name for inter-house events.

Students

(will not join any events)4

Give feedback about the Sports Day;

Leave comment or discuss about the topic related to the Sports Day.

Be able to browse the photos and records of the Sports Day.

Students

(will join events)4

Give feedback about the Sports Day;

Leave comment or discuss about the topic related to the Sports Day.

Register for events easily;

Easy to browse through the time of his/her event hold;

Be able to browse the photos and records of the Sports Day.

Parents4 Be able to browse the photos and records of the Sports Day.

Reference: 1- The responsibilities that I believe I have.|2- Wikipedia| 3- by observations| 4-by interview



3. Pain point

Until today, students in Carmel Secondary School still have to register for sports events in Sports Day

by handing in receipt. Also, all the registrations have to be verified by officers or teachers manually. There

are about 160 students in each form, and that means teachers have to verify and record about 960

registrations one by one manually. I think this is one of the pain points of holding a Sports Day for

teachers.

On the other hand, organizers still have to keep record of the previous event by write down on a

board manually for students to check, students have to go to some fixed location for reading records.

Besides that, students cannot find a platform to give out their feedback to school so they shout it on

Facebook. This makes no improvement of Sports Day but damage of school image.

Also, the album for Sports Day photos only shows the photo taken by the organizers. Teachers and

students cannot include the photos they have taken into the album.

4. Technology used

In order to solve the pain point, we figure out we have to run this project with the functions that I

mentioned in the objective. But there are still some choices that we have to decide before starting the

project.

First, we should look of the efficiency of the project. As we mentioned a lot of problems in the pain

point, we can see that there is a big problem in today’s situation: low accessibility. So the first thing we

have to solve is to increase the accessibility of the system. And my solution is to design the system for

mobile devices. According to the marketing research of NetMarketShare, There is about 58% iOS device

among the mobile device and Android takes 25%.

Also, according to an IES project done by a student in Carmel: Stephy Peng, it shows at least 80% of

our students have at least one mobile device. That means mobile device is common among Carmel. So

design the system to fit mobile devices could allow students and teachers to access information of the

Sports Day, which mean it should work well on every well-functioned mobile device. This could solve the

accessibility problem.

After decide to design the system to fit mobile devices, there is another problem comes out. Since


8


application for different operating system requires different kind of coding language, for example iOS

makes use of C# and Android makes use of Java. It will be difficult to satisfy all wants from both different

operating system users. But there is something common among the various operating system, it is the

web page reading. To get through the problem, I will choose to produce a web based application so that

all operating system users can use this system and can be satisfied.

Since web-based application is basically a kind of web page. After some reference of some famous

web-based applications (Google drive, Google calendar, moodle) I find out the technologies that they

commonly used. In order to make a stunning and user-friendly web-based application, there will be

several technologies that I will make use of:

Technology Name Description & Usage

HTML The main markup language for a web page.

Usage: Build the basic structure of the webpage layout

PHP A general-purpose server-side scripting language originally designed for

web development to produce dynamic web pages

Usage: Include more functions into the system

CSS A style sheet language used for describing the presentation formatting of a

web page layout

Usage: Enhance the web page layout to improve the using experience

5. General Restriction

As this project does not contain the database support by the school server, the information provided

by the user such as name, ID, birthday can be wrong if the users are willing to do so or type it wrongly. In

order to verify the identity of the user, I am planning to make use of the Carmail account name for

sending an verification mail, so that we could make sure the user is inputting his/her Carmail account of

Carmel Secondary School honestly and correctly. But still we cannot verify the birthday and the gender of

the users which cause the system cannot divide them into grades automatically.

Since this project is not supported by school database server and the teacher-in-charge, the system

cannot calculate the marks of the participants by recognizing participants rank in the event automatically.

The server stability is also a restriction since server is an electronic device which requires energy

supply and maintenance to function well. As the result, the status of the system-database connection will

be restricted by the stability of the server.

The last but not least, the performance of the system will be restricted by the coding language and

technology used. Although those technologies have been developed well by lot of programmer,

everything have its limitation, there may be some function which is not provided by the technology I use.

As a developer using those technologies, this is a restriction that cannot be solved.



6. Assumption

Assumption is made according to the general restriction mentioned before because they are not the

problem of the design of the information system.

Firstly, the personal information like name, class, class number, gender and birthday provided are

assumed as real information of the user.

Secondly, the records inputted by the organizers are assumed to be correct data without any data

source error.

Thirdly, this project assume the server is functioning well and being well maintained. The power

supply of the server will not be removed or malfunction.

Fourth, this project assuming the firewall of the system well-functioned.

7. Plan

I am planning to set up a web-based application for this project, because of the cross-platform

feature brings by web-based. Users will be able to create a new account for this system with the identity

verification. The users will be able to register for the personal sports events of the Sports Day, in order to

replace the original paper registration form used before. According to the IES report about Usage of

communication tools, which is written by Stephy Peng from Carmel Secondary School, the usage of

“What’s App” is about 80% of the students in Carmel Secondary School. As “What’s App” is an application

designed just for smartphone device which means we can state that at least 80% of the students of

Carmel Secondary School own a smartphone device and this data does not include the people owning

tablet devices. Which means mobile device is commonly used by students in Carmel Secondary School.

Thus, I am going to design the system into a mobile-device-suitable interface, so that users can access the

information and register for the events at anytime and anywhere they want.

Besides of that, the system will also provide an information sharing platform to the users. Users will

be able to access the information and the records of various events. At the same time, users can also

leave comment and share photos about the Sports Day. This could build up a brand new way for teachers

and students to share what they have and communicate.

The following graph will be the layer model of the project structure:


10


A. Identity Verification

As I have mentioned before, the identity of user is difficult to verify since we cannot detect

whether the users are inputting their real information. I will have to find a way to verify the

identity of the users. After the research that I have done, I find out few ways are able to do the

identity verification:

Choice A – ID number verification

Citizen ID number will be used as the identity verification field. Since the Hong Kong

Special Administration Region (HKSAR) citizen ID card number contain a special mathematical

formulae, the system could check for the digit of the ID number to see whether the number

provided is matching the formulae in order to identify the number is real or not. Since each ID

number is unique in HKSAR, each ID number can only being used for create account for once.

The duplication of ID number will be not be allowed for creating account. Therefore, this could

Server layer:

All the data processed at the web page layer will be stored on this layer. The access authorization will also be stored here to make sure the user can only access the information that his/her account group have the permission to do so.

Web page layer:

After blocking the server attack by bot or virus, the web page will be provided on this layer which means the user-interface will be appear at here. This layer will be coded by the several language including HTML, CSS and PHP.

Firewall layer:

Before access the system, there should be a firewall to prevent DDoS and virus attack. Therefore, some request from some proxy IP address will be blocked in order to maintain the data flow of the server.

End user layer:

Users are able to access the system through mobile device. The regitration and information access function should be provided.



make sure no one use the same ID number for register.

The above example is a shopping system in Mainland China called “Taobao”. Users have to

input their real name and ID number. At the same time, a photo of their ID card is also

required to verify their identity. Then there will be employees verify their ID manually.

Choice B – Email verification

Compare to the ID number verification, Email verification is a easier way to do verification,

no matter to the user or the administrator. The user just have to type in his/her email address

and the system will generate a verification mail and send to users’ email inbox for verifying so

that we can know whether the email address is valid.

The example below is a forum system from Hong Kong using email verification. We could

see that the registration procedure is less complicated than Taobao. Also the email for

verification will be sent automatically, the employee for manual verification will not be

necessary.


12


Choice C – Third-party login verification

Instead of doing verification, there is still another method to verify users identity. By

using the third-party login method. Users do not have to register an additional account if they

already have a third-party account like Facebook account and Google account. Users can

simply just click the login button for verification. The example above provides 2 third-party

method for verification.



Choice D – Carmail account verification

Besides the above method, there is still another method that only Carmel Secondary

School can be using. The Carmail account is an account just for teachers and students in

Carmel Secondary School. Using Carmail for verifying can avoid the users outside the school

creating account. Since the system is designed for Carmel Secondary School, this verifying

method will be suitable for this project.

Summary

Method ID card number Email Third-Party login Carmail login

Examples Taobao Legislative

Election

Forum Registration

Forum posting Eclassroom

Advantages Every user own one ID number only

Most of the user own email account

Template provided by third-party can be used

Make sure the users are people in Carmel

Disadvantages Can be generated

Privacy problem

One user can have multiple email address

May register for more than one account

Cannot identify users

Cannot identify users

Not all user own a Third-party account.

Have to gain the school server support

My Choice


14


Since the system is designed for Carmel Secondary School. Carmail account verification will be

a great choice for the Users identity verification. Unfortunately, this project does not supported by

school database system, the verification method have to be changed. Therefore, I decided to

merge the email method and the Carmail method by asking for Carmail account from the users

and then send a verification email with a randomly generated activation password to the Carmail

account inbox.

B. Existing System

Sport Activities Information System

I. eSports

This system is produced by a company in Hong Kong. It is included in a eClass system

series. eSports including the following feature:

(i) online registration system;

(ii) divide students into group automatically;

(iii) organize events rundown automatically;

(iv) calculate ranking and produce participants list;

(v) calculate inter-house, inter-group and personal score;

(vi) produce different kind of reports.

The picture above shows a clear and well-organized system layout which is a feature of a

user-friendly interface.

II. Sports Pilot



This system provides the following features:

1. scheduling

2. online registration

3. back office

4. facility management

5. messaging

6. financial reporting

7. online store

8. background checks

However, this program are not well-integrated, since all functions are separated into

different pages but there is no efficient way to switch between, the interface design is less

user-friendly than eSports.

III. Taipei City 2011 Sports Registration System

On the picture below we can see that the system of event registration require a login before

the registration happen. This is a kind of identity verification which is good to prevent the

users who are not qualify to the sport events register for the game.

As the result, this method will be a good choice for being embedded into this project.

On the other hand, there is also a Sports events helpers registration included in this sample.

Although this is a good feature, because of the time limitation and the main objective, even

this is a good feature that should be added into the system, it is still difficult to do it in this

project. Therefore, I will mark this feature into the future development part of my project for

future process.


16


IV. 2013 National High School Athletic Game in Yilan

This system contain a same identity verifying method as the previous example, which

shows that the login function is widely used in Sport Activities Registration Systems.



The above picture shows the email verification function of the example system, as we

can see the verification email has been sent to the user and there will be a notification

textbox pop out to remind the user to finish the verification.

V. Taipei City 2012 Sports Registration System

The above capture is a sport event registration system, this system is designed to list all

the events which are available, and then user can just click the register button of the event

for registration.

This is a kind of method that I never think about before, which inspires me to think of

redesigning the registration method for this project.

Also, the user interface of this system is clear and easy to use, I don’t a tutorial will be

necessary to make sure users know how the use it.

Summary:

Comparing the 5 existing Sports Activities Information System, I think the eSports and Taipei City

2012 Sports Activities Registration System providing a stunning and clear layout which makes user to use it

with a higher quality of using experience. At the following procedure of the project, I may consider use both

layouts as a reference to inspire me about the design of the system. On the other hand, the previous

examples really inspire me some new method for this project, it will be concerned when I am designing the

system. However, there is no existing system contain any method for users do express their feedback or

comment about the sports day, this makes the sports day have less chance to get improvement. As the result,

I decide to create a comment system for users to provide their feedback.

Comment System

I. Facebook plugin

Facebook comment plugin is widely used by many informative website especially in

Taiwan, it is easy for user to use since user can just leave a comment if he/she did login to


18


the Facebook. At the same time, the comment can also be published to user ’s Facebook

timeline automatically.

II. HKGolden

The capture below is an example from a popular forum in Hong Kong. As we see it

contains some functions of basic word processor software like font-size, font-color, bold,

italic, underline etc.

More than that, the website provide some icon for user to add into their comment

which is a funny way to present one’s feeling.

III. www.newmobilelife.com

This is a Hong Kong IT Informative website. As we can see, it provides a totally different

method of comment from the 2 examples above. The 2 examples above both needs the user

to login an account before any comment actions, but this website makes it in a different way.

This website allows all users including the users without an account to submit comment.

Users just need to leave his/her name and email for simple record. This is a good method for

people without an account of the system to leave comment or feedback. I may consider it as

a reference of my system.



C. IT tools Comparison

Choice A: Adobe Dreamweaver

It is a website developing software produced by Adobe Dreamweaver provide an easy way for

web page layout designing by providing drag and drop function. Users just have to drag the item

he/she needed into the layout area and the software will edit the code of the page to match your

design. This is the reason why Adobe Dreamweaver is popular among the web developers. To use

this tool for designing web page, the requirement to the knowledge of code is relatively less than

using other IT tools. User can take advantage of support for modern web platforms, including

HTML5, CSS3, PHP, and JavaScript. It is a kind of IT tools that suitable for developing a website

suitable for developing a website like the project that I am going to do. According the introduction

of the Adobe Dreamweaver from Adobe’s official webpage, Adobe Dreamweaver allows users to

code the webpage with PHP, HTML, CSS and JQuery. There is also a dynamic website creating

tutorial in the Dreamweaver Developer Center which provided by Adobe. As my system is a kind of

dynamic website, it is obvious that Adobe Dreamweaver will be a powerful tool for me to build up

the system and give me a great help.


20


Advantages:

user-friendly function drag and drop is provided

less coding knowledge is required

easy to design a stunning layout for the web page

Disadvantages:

It is a commercial software which user have to pay for it

The less programming technique can be learnt during the process of completing this project.

Choice B: Notepad++

Notepad++ is a free source code editor and Notepad replacement that supports several

programming languages including some webpage coding language like PHP, HTML, CSS etc. Running

in the MS Windows environment, its use is governed by GPL License. It is Notepad-like software,

but it provides more functions for coding. For example, the User interface is entirely customizable,

Auto word completion etc. It is also a kind of IT tools that suitable for developing a website suitable

for developing a website like the project that I am going to do. It is true that it does not provide the

functions like Adobe Dreamweaver did, but it still give a great help on coding since it provide a font

color change among different type of syntax. This makes the code of the webpage being more

readable by me.

http://www.gnu.org/copyleft/gpl.html



Advantages:

GUI entirely customizable

Auto-completion

Multi-View

Multi-Language environment supported

Bookmark

Disadvantages:

More knowledge of coding is required for using

Have to design page layout all by coding

My Choice I decided to use Notepad++ as my IT tool instead of Dreamweaver.

Although Dreamweaver is easier to use for my project and make my project more stunning, the

main objective of doing this assignment is to learn from doing this project. Using Notepad++ could

improve my knowledge of programming in a better way than Dreamweaver. As the result, I would

choose Notepad++.

D. Database Management System Comparison

Choice A: Google Fusion Table


22


Google Fusion Tables is an experimental data visualization web application to gather, visualize,

and share larger data tables. It has been widely used for most of the android application in MIT app

inventor. Since this product is owned by Google, which is a world-wide IT company with great

reputation, It will be reliable to be a stable storage database since Google own lot of servers in the

company, the maintenance of server stability will be great. Which means Google Fusion Table will

be reliable for this project’s database choice.

Advantages:

A database device preparation does not needed

The responsibility of maintaining server are not on us

Disadvantages:

The server devices are not managed by us, the physical status of the server cannot be told.

Choice B: Ubuntu Server

Ubuntu Server is an operating system for server devices. It is a Linux-based system which

makes it have good security protection and high stability. Besides of that, Ubuntu provide an

easy-use, user-friendly interface for user which is a great feature for a beginner of database

management. Most of the local business servers use Ubuntu system because it is really reliable, and

this makes it being popular among the IT industry.

Advantages:

Stable

Reliable

Easy for beginner to use



Great security protection

Disadvantages:

Expensive to maintain a server device by ourselves

Physical device maintenance is difficult

Choice C: phpMyAdmin

phpMyAdmin is a good database system, it contain a lots of built-in functions which make user

easy to maintain and manage the database. It is widely used by beginner of database management

system users.

Advantages:

User-friendly

A lots of functions for beginner

Disadvantages:

Not safety

My Choice

I would choose phpMyAdmin as the database management system of this project. Since we are

students of the school, we have no ability to maintain a server to work well and stable without any help.

phpMyAdmin has user-friendly interface and functions, that makes it easier to be used. Also, I have been

running a forum in the past and that forum contains a built-in phpMyAdmin system as the database

management system that makes me more familiar to the phpMyAdmin system. As the result, I decided to

choose Google Fusion Table as the database for this project.


24


Design and Implementation

This project is divided into two major aspects:

1. Application management

2. Database management

Since this system is a web-based application, a webserver is needed for maintain the application works well.

As the result, xampp , which consists of Apache HTTP Server, MySQL and phpMyAdmin, is chosen to be used

as the webserver package.

For the management convenience, the operating system-Windows has been used to run and hold the

xampp webserver, as most people are familiar to Windows more than other operating system. Hence, the

efficiency of managing the application will be improved. It will also be easier for passing down the application

managing work.

Regarding Database Management, MYSQL is used as the relational database management system since its

basic concept has been taught in the Core chapter of ICT. So it will be easier for a time limited project like this

Sports Activities Information System since the time required for learning MYSQL is relatively shorter than

other. Also, phpMyAdmin will also been used with MYSQL since I use to be an administrator of a forum

website which contain a phpMyAdmin system as a database management system. It is more familiar to me

and save time for learning an entire new database management system.

To conclude, the sports activities information system would be held in the Virtual Private Server provided

by XAMPP for less cost and convenience of maintenance. Before getting the application online, the application

would be constructed and tested within the school’s intranet or LAN. Therefore, the administrators could

construct and enhance the application more effectively as the data transmission of the application and also

the database does not effected by the Internet data bandwidth provided by broadcasting companys. At the

same time, this could avoid the attack of the system and firewall by the outside hackers at the period of time

that the system is still in preparation.



1. Application Management

Since one system may contains a lot of logical calculations it will be very difficult to solve it once. In

order to make it easier to solve, I separated the whole system into 7 parts, which is:

1. Login

2. Account Register

3. Identification

4. Photos

5. Comments

6. Event Register

7. Records

A. Login functions

Login is a very important part of a system. It decides whether the user is permitted to access or

not, it is the first protection gate of the system. The following is the interface of the login function of

this system.

First of all, the user type in the username and password and click the submit button. The input

will be sent to the webserver immediately. Then the php program will request the database to find

the data of the username and check whether the password is matching the username. If yes, then

the user will be directed to the next page. Else the user will receive an error notification and he will

need to receive this over and over again as long as the user typing wrong username or password.


26


B. Account Register

This function is really important for creating the database used by the login function. In account

registration, visitors have to provide their username, desired password, school ID, English full name,

class, class number, birthday, house and gender.

For desired password, visitor has to input it for twice in order to confirm that there is no typing

error and make sure the user will be able to login.

For the school id, is to verify whether the user is belongs to a member of our school or not. Also,

is can be used to identify whether the user is student or teacher by considering the first letter of the

school id.

For the Birthday, it is used to identify which grade does the user belongs to, so that the events

that the user can register for will be able to determine.



The user first fills in the form that we provided for registration, then he or she submit the form to

the webserver. When the webserver receive the information that the user inputs, the php program of

the webserver will start to request the database server to find whether there is a same username or

school id existing in the database. If there is no, the registration will be success, else the user will

receive the error notification.

C. Identification

It is used to identify the user’s role like grade, group, and identity. When the user submitted his

or her information, the input values will be stored on the webserver temporary. Then there will be

some function including calculations and a lot of logical statement to identify the groups that the

user belongs to. And then the php program on the webserver will sent the request to update the

information of the user.

D. Photos

A photos function is included in the Sports Activities Information System. It considered as view

and upload functions. The below are the screen capture of the photo upload and view function of

this system.

First, the user will send the photo to the webserver, and the webserver will request the database

to create a new photo id for this photo and save it in a table which contains all the information of

photo uploading. Then the database will send the photo id to the webserver and the php program on

the webserver will rename the photo with the photo id and save it to the webserver file. After that,

the webserver will send back the username of the user who upload the photo and the path of the

photo to the database for record. Lastly, the webserver send the upload success webpage to the user

and redirect he or she to the photo viewing page.


28


E. Comments

This comment function is created for receiving the feedback of the Sports Day from students and

teachers. It included a lot of looping functions in order to show all the comments that have been left

by user.



When the user input some comment and click the submit button. The content of the comment

will be sent to the database via the php program of the webserver. The username of the user who

send this comment will also be sent to the database as a reference. At the same time, an id will also

being generated in the database for each record of comment in order to act as a primary key of the

table for management convenience.

F. Event register

This is the most important and also the most complicated function in the entire system. The logic

included is really complicated.

First of all, in my logic design, the database has to have two tables in order to make the function

well. One of them is the one used as the database for account register and login functions, it contain

all the information of the user. The grade, gender number of track event and number of field event

joined will have to be selected from here. Another will be used just for recording the registration of

events.

When the user requests for event register, the php program in the webserver will request the

database to provide the grade, gender, number of track event and the number of field event that the

user registered. After that, the php program on webserver will start to do logical calculation in order

to generate a select menu of the event that the user can register for. And the webserver will return

the result of select menu that generated by the php program.

After the user submit the register request, the webserver will activate the php program to send

the record adding request to the database.

If there are already 3 events have been registered by the user, when the user click the register

event button on the menu again, the webserver will return the events that the user has registered by

requesting record from the database. The user will no longer be able to register for new events


30


G. Records

The records function is used to view the records of events, as the result of that, the database of

the event registration will be involved. When the user send a request event to the webserver and the

webserver will send a request to the database for all the record that match the requested event.

When the webserver receive the result, the php program on the webserver will form the result into a

stunning table in order to let user has a clear records sheet to read.



2. Database Management

A. User data

The login, account register, identification, event register functions included in the Application

Management all need the support of this user data table called “data” in the database.

This table consist of username, password, sch_id, eng_n, class, cls_no, bday, grade, house, sex, id,

track, field, event1, event2 and event3 as shown below, which is referring username, password,

school id, English name, class, class number, birthday, grade, house, gender, id, number of track

events, number of field events, first event, second event and third event.

B. Picture information

The photos function in the application needs the support of this picture information table called

“pic_info” in the database.

This table consists of id and username. The id is automatically generated by the database

whenever it receives a new record request. This id is used for naming the photo so that there will not

be same file name exist situation happens. Also, it can be used as a record of the user who post this

picture. It can be used to find out the user when there is something wrong with the picture.

C. Comment information

The comment function in the application needs the support of this comment information table

called “comment” in the database.

This table consists of id, username and content. The id is automatically generated by the

database like how the picture information table works. This id is set as primary key and it is just for

record. The content is used to record the content of the user’s comment.

D. Event

The event registration and record functions in the application need the support of this event

table. It consists of event_id, event_name and record.

The column ‘event_id’ is an id number that I provided to every single event. As we need to count

the number of tracks event and field events that the user has registered and what event should the

system shows to the user in order to let user join the event that belongs to his group. As the result, a

lots of IF statement will be involved to do so.

However, if the system uses the event name for IF statement, it will be very difficult to determine

whether the event is track or field. In order to make it easier, I figured out to give each event an id

number and this idea is inspired by the idea of ASCII code. The hundred is representing the grade and

group that the event belongs to. For example, the event with the id number as 1xx belongs to Boys A


32


Grade, 3xx belongs to Boys C grade and 4xx belongs to Girls A Grade.

The next 2 digit is to represent the event. For example, the 100 m event is 02, so Boys A 100m

event will be 102 in the id number. I grouped all the track event together and so to the fields. The

number between 01 and 07 are tracks events, the number between 08 and 13 are fields events. So

that When I need to determine whether the event belongs to track or field, I just need to check

whether the id number of that event is smaller or equal to 07 and whether it is larger or equal to 08.

The record column is used to keep the best record of the event. It will be used to show in the

records views function in the application.

E. Event Registration

It is used to record the registration of events, it consists of reg_id, event_id, std_name and record.

These columns are saved in a table called “event_reg” in the database. The event registration and the

records function need the support of this table.

The event_id is used for record the event registered in this record, and the record column is used

to record the result of that student in that event.

Demonstration

The Design and Demonstration presentation of the system that presented by me has been uploaded to

Youtube.com. Please pay some time and have a look: http://www.youtube.com/watch?v=eSCmuvCZMGg

http://www.youtube.com/watch?v=eSCmuvCZMGg



Testing and Evaluation

Testing is planned to examine whether the system fulfills the essential requirements:

1. Whether the system can be functioning well in various popular browsers;

2. Whether the system can identify teachers and students and provide right functions;

3. Whether the system modules functioning well.

1. Web Browsers

To make sure the system can be used by all of the teachers, parents and students, I will test the

system in different type of browsers in order to make sure these users can use the system easily. As this is

a student project, the time limitation will not allow me to test the system in all kinds of mobile browsers

among the world. Also, as this system is designed for mobile device to use, personal computer web

browser will not be necessary to be considered. As the result, I will find 3 of the most popular mobile

browsers among the smartphone users and test whether these browsers can run the system well.

Since iOS devices contain built-in browser: Safari. It must be tested so that user who using iOS

devices must be able to use the system well. Also, there is a default browser for Android, so the Android

default browser should also be tested. Besides that, the Chrome browser has become one of the built-in

web browsers in Android since Android 4.0 and it could also be downloaded by iOS devices via AppStore,

so Chrome browser will also be tested.

According to the above concern, the 3 browsers will be tested in this section will be Safari, Chrome

and the Android default browser.

Pages Safari Chrome Android Browser

Account register Success Success Success

Login Success Success Success

Photo upload & view Success Success Success

Comment Success Success Success

Record edit & view Success Success Success

Event register Success Success Success

Logout Success Success Success

2. Identification

To make sure the functions can only be used by the user who is permitted, the identification of the

users' identity must be done correctly. According to the algorithm of the system, the identity is identified

by the school id that the user provide when he or she register for a new account or the “Login as guest”

button provided in the login screen. So the identification included in these modules should function well

in order to provide the right function to the right user.


34


Testing target Requirement Value of input Expected result Result

Try invalid input

's' or 't' as the first

character

R12344321 Return error

message

Return error

message

Correct input t120 Identity as

teacher

Identity as

teacher

Correct input s20061111 Identity as

student

Identity as

student

3. System modules

In this section, all the functions in the system should be tested in order to make sure the system is

functioning well and without error. Before that, the access of all the pages of the system should be

checked in order to make sure there will not be any effect of testing caused by the availability of the page

access.

Web pages Result of accessing

Login (Home page) Available

Account Registration Available

Menu Available

Record Viewing Available

Photo Viewing Available

Photo Posting Available (login required)

Comment Available (login required)

Event Registration Available (only for students)

Best Record Editing Available (only for teachers)

Event Record Editing Available (only for teachers)

A. Account Registration

For the account registration, the username that user desire to register for should not be

already exist in the database table. Also, the password inputted should be the same as the

password confirm. At the same time, the registration module should also be able to identify the

user's grade of the sports day event.

Field /

function to

be tested

Testing target Requirem

ent

Value of input Expected

Result

Result

Username Try existing

username Within 20

characters

t128 Return error

message

Return error

message

Try non-existing

username

chauchunman Register successfully

Register successfully



Password and Password confirm

Different input between 2

textbox Contain

same input

Def abc

Return error

message

Return error

message

Same input between 2

textbox

def def



Grade identify Find any error

of detection Input

birthday

29-01-1994 Grade A Grade A

29-01-1998 Grade B Grade B

29-01-2000 Grade C Grade C

B. Menu

The menu page should show different button according to the identity of the user. Only the

record view and photo view button for the guest, the event register button should only been

showed for the students, the record edit button should only been showed for the teachers. As the

result, the menu will be tested by logging in different type of user to test whether there is any

unexpected button appeared.

Button(s) to

be tested

Testing target Requirement Identity of

user

Expected

result

Return result

Event

register

Identify and

show the

button

correctly

Identity

should be

student only

teacher Not showing

the button

Not showing

the button

guest Not showing

the button

Not showing

the button

student Show the

button

Show the

button

Record edit Identify and

show the

button

correctly

Identity

should be

teacher only

student Not showing

the button

Not showing

the button

guest Not showing

the button

Not showing

the button

teacher Show the

button

Show the

button

Upload ,

Comment

Identify and

show the

button

correctly

Identity

should be

teacher or

student only

guest Not showing

the button

Not showing

the button

teacher Show the

button

Show the

button

student Show the

button

Show the

button

C. Record Viewing and Editing

The record viewing function is designed to allow users searching for records of a specific event.

The event record can be searched by a drop down menu, which means there will not have any

unexpected searching exist since the input submitted for searching is limited and controlled.


36


However, the searching result should also be tested. The record result is designed to show the best

record of the event start from the event exist then the participants’ records ordered by their

ranking. In this section, I will test for the record result whether it can show the best record and the

participants’ record in the right order correctly.

Value inputted Best record showing Event record showing Record order

Boys A 100m Successful and correct Successful and correct Correct

Girls C high jump Successful and correct Successful and correct Correct

Girls A 800m Successful and correct Successful and correct Correct

The record editing function has been separated into 2 parts, which is best record edit and event

record edit. Both the best record and event record editing is showed in a table form, and each

event will have a textbox. Suppose every time the teacher access the best record edit or event

record edit, the textboxes will contain the original record submitted. After submitting the edited

record, the table containing record should be updated. As the result, the original record and the

record update will be tested in this section.

Function being

tested

Original record

showing

Record submit Record update Record order

Best record

edit

Successful and

correct

Successful Successful and

correct

Correct

Event record

edit

Successful and

correct

Successful Successful and

correct

Correct

D. Photo Viewing and Uploading

The photo viewing function that I designed can show all the photos and resize them to fit the

screen size, the photo will be showed one by one, user just have to scroll down to see the photos.

As the result, the photo showing function has to be tested whether it is functioning well.

Testing target Photo showing

Whether the photo can be showed well Successful and correct

Whether the photo just has been uploaded can be showed Successful and correct

The photo uploading function that I designed can only allow users to upload files in .png, .jpg

or .gif format, uploading the other format of files will return an error message and the upload

process will be stopped immediately. However, a testing is necessary to make sure the module is

functioning well and will not bring unexpected result.



Testing target Requirement File format

uploaded

Expected result Return result

Try uploading

wrong file type

The file format

must be either

.png, .jpg

or .gif

.doc Return error

message

Return error

message

Try uploading

correct file type

.png Uploaded

successfully

Uploaded

successfully

.jpg Uploaded

successfully

Uploaded

successfully

.gif Uploaded

successfully

Uploaded

successfully

E. Comment

The comment function is designed as a guestbook, users can leave a comment in the text area

provided on the top of the page and then after the user submit the comment, his or her comment

will be shown at the bottom of the page. In this section, the comment posting and viewing

function will be tested to see whether they are functioning well.

Testing target Requirement Value input Expected result Result return

Try whether the

comment can be

posted and

showed well

The character

length should not

be more than

1000

Final report!! t128:

Final report!!

t128:

Final report!!

Keep it up! t128:

Keep it up!

t128:

Keep it up!

F. Event register

The event register function has been designed for students only, since the identification has

been tested in the previous section already, the testing of identification can be skipped in this

section. This function allows students to register for event that they are allow to join, the events

that they can join is determined by their gender and grade. Also, according to the Carmel

Secondary School’s policy, students can only join 3 personal events and they cannot register for 3

field events or 3 track events. As the result, the function that hiding all the event that they cannot

join is coded and make sure they cannot choose it for submission. Also, the event that has been

chose by the user will be hidden. In this section, the event hiding function and the event

submitting function have to be tested.

Testing target Belonging

group

Value input Event

submission

Events hiding

Try whether the system

functioning well

Boys A Boys A 100m Successful Successful and correct

Boys C Boys C 800m Successful Successful and correct


38


User Testing

After the system coding and testing by myself, it is necessary to find some target user of this system

for further testing and feedback, in order to improve the system and provide a better using experience for

the target users. The testing user will be separated into 2 groups: teachers and students. For more

accurate testing result, I will invite about 1 teacher and 2 students to do this testing.

1. User-Friendly

A successful system should be able to be used by the user without any other instructions, which means

it is user-friendly designed. As the result, I invited 2 students and 1 teacher for user testing and just

briefly explain the name of the system. The 3 users did not receive any other instructions of how to use

the system. However, All 3 of them can use the system well, which means the system is designed in a

user-friendly way in both logical functions and user-interface.

2. Feedback

After the user testing, I have invited the testing users to provide some feedback about the system and

the following are the comments that they have provided.

A. Upload photo button

One of the testing users suggests me to make some changes of the button in the photo upload

page. Since when first he saw the page, he thought he should tap click the upload button to

choose the photo that he decided to upload. It is because that button is a lot larger than the select

photo button, it attracts user’s eye ball better than the select photo button. As the result, he

suggests that the upload button can be resized into a smaller size and the select photo button can

be larger.

B. Photo showing method

One of the testing users thinks that the method of photo showing has a lower accessibility.

She thinks that user will be difficult to find the photo which is in the middle of the order, that’s

why she suggest me to change the photo showing method and show the upload user’s username

or full name so that people can know who upload the photo.

C. Full name input

One of the user suggest that the full name input textbox should separate into 2 textbox which

contain last name and first name, so that the system can make sure the user input their full name

instead of nickname or English name.



Conclusion and Discussion

1. Conclusion

During the process of doing this ICT SBA, I have learnt a lot. I have never thought that I could make

this system by my own self. At the beginning of the SBA, I was asked to choose which functions that I will

be willing to do in this SBA. After I take a look on those functions, I felt that I want to do it all. I love doing

projects more than homework, especially project that related to Computer Technology like coding. I want

to make things right and perfect, so finally I chose to do all the functions provided.

After I started doing the system coding, I realized that it’s actually not as difficult as I think, or

maybe the passion of I toward programming has narrow the difficulty of coding the system. I enjoyed the

process of coding the system. Watching it turn from a blank white page into a complete system, this made

me felt excited. I had learnt a lot of php functions, in the future I hope I can improve the product of this

SBA and adjust it into a professional class product. Maybe I can sell it to secondary schools to earn money.

Also, I have improved my problem solving skills. In the past, I always think and design the algorithm

of a program in my thought, it works every time. But since I start doing the SBA product, I finally got stuck

on algorithm designing inside my head. I started to draw some graph on paper to clear my mind, and I

realize this make a great different from thinking in my head only. The problem solving on paper is a lot

faster, and this improved my debugging speed and accuracy. Thanks to the SBA, I have learnt a lot of

problem solving skills.

It has a lot of fun while coding the system and also typing the SBA report. Maybe I have been

affected by my desire of perfection, this SBA project report is actually much longer than my IES report for

Liberal Studies. I think it is also a kind of technic to explain your system design to others by words instead

of demonstration. So besides the coding language that I have learnt during the SBA, I have also learnt a

lot of how to make a good report.

2. Further Development

Since this is just a student project, there is still a long way to go for the system become a formal

product to be sold. As the result, there are still a lot of improvements for me to do in the future.

A. CaptCha

CaptCha is a type of challenge-response test used in computing to determine whether or not

the user is human. Since this is just a small system, minor server attack can easily break down the

server. As the result, the CaptCha test is necessary to prevent the DDoS.

B. Automatic event schedule

Since this system is a sports activities information system, the information processing function

should be provided to the users. And the most difficult thing for the teachers to think about is the

event schedule design. Since most of the students will join more than 1 sports event in Sports day,


40


the event schedule must minimize the number of students to play more than 1 events at the same

time. There will be a lot of comparison to design the best schedule. As the result, automatic event

schedule designing function will be very helpful to teachers.

C. Secure Transmission

Although this is just a sports system, it still contains a lot of personal information. To make sure

the data transformation will not be understood by others or hackers, secure transmission is

necessary. Digital Certificate and encryption key need to be generated to form a HTTPS connection

between user and the system server to make sure the data of the user and school will not be

spread out.

D. Password Encryption

As a system manager, I should not be able to know about the users’ password. But the

password has to be saved for logging in. So the password encryption is needed to protect users’

privacy. The Public key encryption should be used for the password encryption and the database

just save the encrypted password for comparison, in order to make sure no one else can

understand the password.

E. Photo showing method

As I mentioned in the Design and Evaluation part, there was a user suggested me to change the

showing method of the photo. The improvement will be a huge different from my version of photo

showing, it require a lot of JavaScript language and this may take a long time to make that change.

As this is a student project and I am about to participate in HKDSE, this improvement can be done

in the future to make the system more stunning and user-friendly.

F. Forum-like comment function

The comment function that I designed is a guestbook-like function, which is a kind of outdated

method of comment function. However, it is the easiest way to make a comment function. To

make the system more stunning and perfect, I would like to add a schedule in my future plan,

which is improve the comment function into a forum-like comment function. It will be separated

into topics. Users can open a new discussion topic and also leave a comment to the topic. So that

the system will be more attractive and more user will be willing to use the system more rapidly.



Reference

湯佳佳,n.d. 我想學 PHP. s.l.:s.n.

彭曉雯,2013,使用即時通訊工具對青少年朋輩關係的影響,香港

Apple Inc., Safari Developer Library [Online]

Available at:

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/A

rticles/MetaTags.html

2011. How to create ios device home screen icons for web sites [Online]

Available at: http://gigaom.com/2011/06/22/how-to-create-ios-device-home-screen-icons-for-web-sites/

2012. Mobile version of website: adjust to screen size [Online]

Available at:

http://stackoverflow.com/questions/10254850/mobile-version-of-website-adjust-to-screen-size

w3schools online tutorial [Online]

Available at: http://www.w3schools.com/

Google Inc., Google fusion table [Online]

Available at: https://developers.google.com/fusiontables/

Schoolware for Educators in HKSAR [Online]

Available at: http://schoolware.useit.us/?page_id=74

NetMarketShare, 2013, Mobile Operating System Market Share Research [Online]

Available at:

http://www.netmarketshare.com/operating-system-market-share.aspx?qprid=10&qpcustomd=1&qpcusto

mb=

David Powers, 2010, Building your first dynamic website [Online]

Available at: http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt1.html

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

http://gigaom.com/2011/06/22/how-to-create-ios-device-home-screen-icons-for-web-sites/

http://stackoverflow.com/questions/10254850/mobile-version-of-website-adjust-to-screen-size

http://www.w3schools.com/

https://developers.google.com/fusiontables/

http://schoolware.useit.us/?page_id=74http://schoolware.useit.us/?page_id=74

http://www.netmarketshare.com/operating-system-market-share.aspx?qprid=10&qpcustomd=1&qpcustomb=

http://www.netmarketshare.com/operating-system-market-share.aspx?qprid=10&qpcustomd=1&qpcustomb=

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt1.html

ICT SBA final

Documents