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

3Copyright © 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

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.

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
 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
 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;
Parents4
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

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:

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.

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

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.

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

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.

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.

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

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.

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.

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.

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

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

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

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.

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
Register
successfully
Register
successfully
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.

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

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,

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

ICT SBA final

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to ICT SBA final (20)

ICT SBA final