lOMoARcPSD|20777611

SDP Documentation - Provides Proposal about the system.

System make as website. All about e-learning
System Development Methods (Asia Pacific University of Technology and Innovation)

Studocu is not sponsored or endorsed by any college or university

Downloaded by Roger ([email protected])
 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

GROUP ASSIGNMENT
TECHNOLOGY PARK MALAYSIA
AAPP006-4-2-SDP
SOFTWARE DEVELOPMENT PROJECT
UCDF1805ICT/ICT(ITR)/ICT(DI)

HAND OUT DATE: 13 JANUARY 2020

HAND IN DATE: 19 APRIL 2020
WEIGHTAGE: 100%

INSTRUCTIONS TO CANDIDATES:
1. Submit your assignment at the administrative counter.
2. Students are advised to underpin their answers with the use of
references (cited using the Harvard Name System of Referencing).
3. Late submission will be awarded zero (0) unless Extenuating
Circumstances (EC) are upheld.
4. Cases of plagiarism will be penalized.
5. The assignment should be bound in an appropriate style (comb-bound
or stapled).
6. Where the assignment should be submitted in both hardcopy and
softcopy, the softcopy of the written assignment and source code
(where appropriate) should be on a CD in an envelope / CD cover and
attached to the hardcopy.
7. You must obtain 50% overall to pass the module.

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Software Development Project – Cover Sheet

ASSIGNMENT
Instruction:
 Marks will be awarded for good presentation and thoroughness in your approach.
 Referencing Code: If you use some code, or ideas for code, which are taken or adapted from
another source (book, magazine, internet, discussion forum, etc), then this must be cited and
referenced using the Harvard Name convention within your source code. Failure to reference code
properly is considered as plagiarism.
 Complete this cover sheet and attach it to your project.
 This project is to be attempted by a group of 3-4 students.

 Student declaration:
I declare that:  We understand what is meant by plagiarism
 The implication of plagiarism have been explained to us by our lecturer
 This project is all our work and we have acknowledged any use of the
published or unpublished works of other people.

Group Leader’s Signature: Nicholas Date: 16/4/2020

Project Title: E-Learning System Intake: UCDF1805ICT/ICT(DI)/ICT(ITR)

Role Name Signature

Project Manager Tan Ming Wei Nicholas
System Analyst Tan Kim Chuan Kim
Programmer Pang Qi Hao Isaac Isaac
Programmer Lim Wei Hern Wei Hern

Table of Contents

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Table of Figures..........................................................................................................................7

1.0 Acknowledgement................................................................................................................1

2.0 Abstract................................................................................................................................2

3.0 Workload Matrix..................................................................................................................3

4.0 Introduction..........................................................................................................................4
4.1 Project Background........................................................................................................................................4

4.2 Project Context...............................................................................................................................................6

4.3 Proposed Solution..........................................................................................................................................8

4.4 Project Scope................................................................................................................................................10

4.5 Project Objectives........................................................................................................................................12

5.0 Project Plan........................................................................................................................14

5.1 System Development Methodology.............................................................................................................14

5.2 Project Gantt Chart.......................................................................................................................................18

6.0 System Hierarchy Chart.....................................................................................................19

6.1 Landing Page and Home Page Chart............................................................................................................19

6.2 Portal Page Chart..........................................................................................................................................20

7.0 Context Diagram and Data Flow Diagram (DFD).............................................................21

7.1 Context Diagram..........................................................................................................................................21

7.2 DFD Level-0................................................................................................................................................22

7.3 DFD Level-1................................................................................................................................................23

7.3.1 Library Function (Tan Ming Wei)............................................................................23

7.3.2 Discussion Function – Read Thread (Tan Kim Chuan)............................................24

7.3.3 Test Function (Lim Wei Hern)..................................................................................25

7.3.4 Feedback Function (Pang Qi Hao Isaac)..................................................................26

8.0 Data Dictionary..................................................................................................................27

8.1 Library Function (Tan Ming Wei)................................................................................................................27

8.2 Discussion Function – Read Thread (Tan Kim Chuan)...............................................................................33

8.3 Test Function (Lim Wei Hern).....................................................................................................................37

8.4 Feedback Function (Pang Qi Hao Isaac)......................................................................................................40

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

9.0 Entity Relationship Diagram (ERD)..................................................................................44

10.0 Pseudocode / Flowchart...................................................................................................45

10.1 Library Function (Tan Ming Wei)..............................................................................................................45

10.2 Discussion Function – Read Thread (Tan Kim Chuan).............................................................................46

10.3 Test Function (Lim Wei Hern)...................................................................................................................47

10.4 Feedback Function (Pang Qi Hao Isaac)....................................................................................................49

11.0 Screen Design and User Manual......................................................................................50

11.1 Landing Page..............................................................................................................................................50

11.2 Register Page..............................................................................................................................................53

11.3 Login Page..................................................................................................................................................55

11.4 Home Page.................................................................................................................................................56

11.4.1 Feedback Page........................................................................................................59

11.4.2 Career Page.............................................................................................................61

11.5 Portal Page..................................................................................................................................................63

11.5.1 Classes Page...........................................................................................................63

11.5.2 User Profile Page....................................................................................................67

11.5.3 Discussion Page......................................................................................................68

11.5.3.1 Create Thread Page........................................................................................69

11.5.3.2 Read Thread Page...........................................................................................70

11.5.4 Test Page.................................................................................................................73

11.5.5 Library Page...........................................................................................................77

11.6 Admin Page................................................................................................................................................78

11.6.1 Admin Page (Test Page)..........................................................................................80

11.6.2 Admin Page (User Page).........................................................................................82

11.6.3 Admin Page (User Photo Page)..............................................................................84

11.6.4 Admin Page (Feedback Page).................................................................................85

11.6.5 Admin Page (Library Page)....................................................................................86

11.6.6 Admin Page (Thread Page).....................................................................................88

11.6.7 Admin Page (Reply Page).......................................................................................89

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

12.0 Report Design and User Manual......................................................................................90

12.1 Admin Page (Test Statistics Report)...........................................................................................................90

13.0 Test Plan...........................................................................................................................93

13.1 Unit Testing................................................................................................................................................93

13.1.1 Library Function (Add/Read) (Tan Ming Wei)......................................................93

13.1.2 Discussion Function – Read Thread (Tan Kim Chuan)..........................................94

13.1.3 Test Function (Lim Wei Hern)................................................................................96

13.1.4 Feedback Function (Pang Qi Hao Isaac)................................................................97

13.2 User Acceptance Testing............................................................................................................................98

13.2.1 Project Objectives...................................................................................................98

13.2.2 List of Modules.......................................................................................................98

14.0 Significant Source Code...................................................................................................99

14.1 Connection String.......................................................................................................................................99

14.2 MYSQL and WAMP................................................................................................................................101

14.3 Register....................................................................................................................................................102

14.4 Login........................................................................................................................................................105

14.5 Logout......................................................................................................................................................108

14.6 Feedback..................................................................................................................................................109

14.7 User Profile (Photo)..................................................................................................................................110

14.8 Discussion................................................................................................................................................113

14.8.1 Create Thread........................................................................................................113

14.8.2 Read Thread..........................................................................................................115

14.8.3 View Reply Thread...............................................................................................116

14.9 Test...........................................................................................................................................................118

14.10 Library....................................................................................................................................................122

14.11 Admin Page (User Database).................................................................................................................125

14.11.1 Delete Data.........................................................................................................127

14.11.2 Edit Data (Users)................................................................................................129

14.11.3 Update Data (Users)...........................................................................................131

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

14.11.4 Add Data (Library).............................................................................................132

15.0 Conclusion......................................................................................................................134

16.0 References......................................................................................................................135

17.0 Appendix........................................................................................................................138
17.1 Installation Guide.....................................................................................................................................138

17.2 Weekly Progress Reports..........................................................................................................................143

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Table of Figures
Figure 1 Statistic......................................................................................................................15
Figure 2 Waterfall Model.........................................................................................................25
Figure 3 Project Gannt Chart...................................................................................................29
Figure 4 Landing Page and Home Page Chart.........................................................................30
Figure 5 Portal Page Chart.......................................................................................................31
Figure 6 Context Diagram........................................................................................................32
Figure 7 DFD Level 0..............................................................................................................33
Figure 8 DFD Level 1 (Library)...............................................................................................34
Figure 9 DFD Level 1 (Discussion – Read Thread).................................................................35
Figure 10 DFD Level 1 (Test)..................................................................................................36
Figure 11 DFD Level 1(Feedback)..........................................................................................37
Figure 12 Entity Relationship Diagram (ERD)........................................................................55
Figure 13 Flowchart (Library).................................................................................................56
Figure 14 Flowchart (Discussion - Read Thread)....................................................................57
Figure 15 Flowchart (Test).......................................................................................................59
Figure 16 Flowchart (Feedback)..............................................................................................60
Figure 17 Landing 1.................................................................................................................61
Figure 18 Landing 2.................................................................................................................61
Figure 19 Landing Info............................................................................................................62
Figure 20 Landing Nav............................................................................................................62
Figure 21 Landing Footer.........................................................................................................62
Figure 22 Register 1.................................................................................................................64
Figure 23 Register 2.................................................................................................................64
Figure 24 Register 3.................................................................................................................64
Figure 25 Register 4.................................................................................................................65
Figure 26 Register 5.................................................................................................................65
Figure 27 Login 1.....................................................................................................................66
Figure 28 Login 2.....................................................................................................................66
Figure 29 Login 3.....................................................................................................................66
Figure 30 Home 1.....................................................................................................................67
Figure 31 Home 2.....................................................................................................................67
Figure 32 Home Feedback.......................................................................................................68

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 33 Home Career............................................................................................................68

Figure 34 Home Donate...........................................................................................................68
Figure 35 Logout 1...................................................................................................................69
Figure 36 Logout 2...................................................................................................................69
Figure 37 Feedback 1...............................................................................................................70
Figure 38 Feedback 2...............................................................................................................70
Figure 39 Feedback 3...............................................................................................................71
Figure 40 Feedback 4...............................................................................................................71
Figure 41 Career 1....................................................................................................................72
Figure 42 Career 2....................................................................................................................72
Figure 43 Career 3....................................................................................................................73
Figure 44 Portal 1.....................................................................................................................74
Figure 45 Portal 2.....................................................................................................................74
Figure 46 Portal 3.....................................................................................................................75
Figure 47 Classes 1..................................................................................................................75
Figure 48 Classes 2..................................................................................................................75
Figure 49 Classes 3..................................................................................................................76
Figure 50 Classes 4..................................................................................................................76
Figure 51 Classes 5..................................................................................................................77
Figure 52 Classes 6..................................................................................................................77
Figure 53 Classes 7..................................................................................................................77
Figure 54 User Profile 1...........................................................................................................78
Figure 55 User Profile 2...........................................................................................................78
Figure 56 Discussion 1.............................................................................................................79
Figure 57 Discussion 2.............................................................................................................80
Figure 58 Discussion 3.............................................................................................................80
Figure 59 Discussion 4.............................................................................................................81
Figure 60 Discussion 5.............................................................................................................81
Figure 61 Discussion 6.............................................................................................................82
Figure 62 Discussion 7.............................................................................................................82
Figure 63 Discussion 8.............................................................................................................82
Figure 64 Discussion 9.............................................................................................................83
Figure 65 Test 1........................................................................................................................84
Figure 66 Test 2........................................................................................................................84

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 67 Test 3........................................................................................................................85

Figure 68 Test 4........................................................................................................................85
Figure 69 Test 5........................................................................................................................85
Figure 70 Test 6........................................................................................................................86
Figure 71 Test 7........................................................................................................................86
Figure 72 Test 8........................................................................................................................86
Figure 73 Test 9........................................................................................................................86
Figure 74 Test 10......................................................................................................................87
Figure 75 Library 1..................................................................................................................88
Figure 76 Admin 1...................................................................................................................89
Figure 77 Admin 2...................................................................................................................90
Figure 78 Admin 3...................................................................................................................90
Figure 79 Admin 4...................................................................................................................90
Figure 80 Admin 5...................................................................................................................91
Figure 81 Admin 6...................................................................................................................91
Figure 82 Admin 7...................................................................................................................91
Figure 83 Admin 8...................................................................................................................92
Figure 84 Admin 9...................................................................................................................93
Figure 85 Admin 10.................................................................................................................93
Figure 86 Admin 11..................................................................................................................94
Figure 87 Admin 12.................................................................................................................94
Figure 88 Admin 13.................................................................................................................95
Figure 89 Admin 14.................................................................................................................96
Figure 90 Admin 15.................................................................................................................97
Figure 91 Admin 16.................................................................................................................97
Figure 92 Admin 17.................................................................................................................98
Figure 93 Admin 18.................................................................................................................98
Figure 94 Admin 19.................................................................................................................99
Figure 95 Admin 20...............................................................................................................100
Figure 96 Admin Page Menu.................................................................................................101
Figure 97 Test Statistics Piechart...........................................................................................102
Figure 98 Java Test Table from MYSQL...............................................................................102
Figure 99 PHP Test Table from MYSQL...............................................................................102
Figure 100 SQL Test Table from MYSQL.............................................................................103

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 101 Java Test Database...............................................................................................103

Figure 102 Unit Testing (Library)..........................................................................................104
Figure 103 Unit Testing (Discussion - Read Thread).............................................................106
Figure 104 Unit Testing (Test)...............................................................................................107
Figure 105 Unit Testing (Feedback).......................................................................................108
Figure 106 Connection String................................................................................................110
Figure 107 PHPMYADMIN...................................................................................................112
Figure 108 PHPMYADMIN DATABASE.............................................................................112
Figure 109 Register 1.............................................................................................................113
Figure 110 Register 2.............................................................................................................113
Figure 111 Register 3.............................................................................................................114
Figure 112 Login....................................................................................................................116
Figure 113 Login 2.................................................................................................................116
Figure 114 Login 3.................................................................................................................117
Figure 115 Login 4.................................................................................................................118
Figure 116 Logout..................................................................................................................119
Figure 117 Feedback..............................................................................................................120
Figure 118 UP........................................................................................................................121
Figure 119 UP2......................................................................................................................122
Figure 120 Create...................................................................................................................124
Figure 121 Create 2................................................................................................................124
Figure 122 Read.....................................................................................................................126
Figure 123 Reply....................................................................................................................127
Figure 124 Reply 2.................................................................................................................127
Figure 125 Test.......................................................................................................................129
Figure 126 Test 2....................................................................................................................130
Figure 127 Test 3....................................................................................................................130
Figure 128 Test 4....................................................................................................................131
Figure 129 Test 5....................................................................................................................132
Figure 130 Library.................................................................................................................133
Figure 131 Library 2..............................................................................................................134
Figure 132 Library 3..............................................................................................................134
Figure 133 Admin User..........................................................................................................136
Figure 134 Admin User 2.......................................................................................................137

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 135 Delete...................................................................................................................138

Figure 136 Edit 1....................................................................................................................140
Figure 137 Edit 2....................................................................................................................140
Figure 138 Update..................................................................................................................142
Figure 139 Library 1..............................................................................................................143
Figure 140 Library 2..............................................................................................................143
Figure 141 Library 3..............................................................................................................144
Figure 142 Wamp 1................................................................................................................149
Figure 143 Wamp 2................................................................................................................150
Figure 144 Wamp 3................................................................................................................150
Figure 145 Wamp 4................................................................................................................150
Figure 146 Wamp 5................................................................................................................151
Figure 147 Wamp 6................................................................................................................151
Figure 148 Wamp 7................................................................................................................151
Figure 149 Wamp 8................................................................................................................151
Figure 150 Wamp 9................................................................................................................151
Figure 151 Wamp 10..............................................................................................................152
Figure 152 Wamp 11..............................................................................................................152
Figure 153 Wamp 12..............................................................................................................152
Figure 154 Wamp 13..............................................................................................................153

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

1.0 Acknowledgement

We would like to thank our lecturers that have taught us througout the semesters for
this diploma. We are very grateful as they have given us the ability and knowledge to perform
well and succeed in our specific fields. Most importantly, we are very thankful for our
lecturer Dr. Nurul Haniza Binti Mohtar as she had been guiding us on our progress for SDP.
Secondly, we would like to thank our PHP lecturer from our previous semester, Sivaguru A/L
Subarmaniyan as we would not have been able to create our E-Learning Website if it was not
for his teaching. Our group had created an E-Learning system website named Coding 101.
The intention of the website is to provide free online computing education to the people of
Malaysia. The overall process was done by a team of 4 members. Each of the components for
the project required different skills for the overall complete project establishment. The project
was split accordingly to suit each of the group member’s expertise in the field. The project
took a total of 14 long weeks to complete. Despite all of the obstacles and hassles, it was still
a very interesting and a great learning experience.

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

2.0 Abstract

An E-learning system website named Coding 101 was developed. The intention of
the website was to provide free online computing education to the people of Malaysia. There
are a number of functions provided by the system that aims to benefit the users. For example,
a platform where students can choose the courses they are interested in to study. Next, a page
for the students to take an online examination to evaluate their performances. A discussion
page where they are able to exchange their questions and answers with other students.
Finally, a free accessible library where students can get a range of readable E-Books. The
main highlights of the website were to mainly provide free education to the people who are in
need, as higher education is expensive and not many people can afford it. The system had the
main intention of promoting online learning to the community mostly because it can be very
beneficial and helpful in many ways to most people. Coding 101 hopes that they are able to
reach out and assist many more in need. It also hopes to be able to grow and expand their
services in the future.

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

3.0 Workload Matrix

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

4.0 Introduction
4.1 Project Background

An E-Learning system that is named “Coding 101” is created by a team of web

developers in Malaysia. The E-Learning system aims to assist Malaysian students in getting
an opportunity to learn about IT and programming. Malaysia is a very developed country;
however, it is not very well known for its IT technology. With this initiative, the country can
grow and expand tremendously with the help of computing technology.

The E-Learning system was created due to many factors faced by many people. One
of the problems faced is that not every person is able to afford higher education such as
colleges or universities. This is an important factor as higher education acts as an investment
that requires a substantial threshold for an individual to further their studies [ CITATION Dan
\l 17417 ]. Malaysia has also been ranked as the fifth most expensive country for one to get
university education [ CITATION Cha15 \l 17417 ] This is mostly due to the low average
monthly income of RM3,087 earned by most employees based on the Salaries & Wages
Survey Report Malaysia by Statistics Department (DOSM) in 2018 [ CITATION htt \l
17417 ]. The statistic report is shown as the figure Statistic below.

Figure 1 Statistic

Secondly, traditional learning methods implemented in universities might not be very

effective. In this modern era, different people might nurture and learn stuff through a variety
of methods. The Internet can provide effective learning methods such as E-Learning
education to many people. This is also due to the syllabus contained in secondary schools that

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

do not consists of computer-based subjects. Many secondary schools do not contain

computing subjects in their syllabus due to many reasons, while some secondary schools may
teach computing subjects, they do not prioritize computing subjects due to many reasons.
Thirdly, most of the IT resources are very limited and cannot be easily found in most
universities compared to online. IT resources such as extension notes, or PDF e-books can be
found easily online for free or for a fee. It helps people to save time in searching for a
particular book in need, through the use of a search engine on the Internet. Fourth, a lot of
students have poor computer fundamental skills. Most of them do not know how to do basic
things using the computer, such as sending an email, submitting a form and etc. Finally, most
lecturers in universities do not provide holistic education to their students due to time and
other constraints. In other words, students who perform and score well for a subject does not
guarantee that they have full understanding on the particular subject. With these scenarios,
the E-Learning System, Coding 101, plans to start an initiative to help the people of Malaysia
by providing a free online virtual learning space for them to obtain proper IT knowledge.
Coding 101 plans to use client-side scripting programming languages such as PHP, HTML,
CSS and JavaScript for the E-Learning System development. SQL will also be implemented
for the E-Learning System’s database. SQL and PHP will be used together in combination for
the database connectivity. The E-Learning System is planned and set to finish within 13
weeks.

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

4.2 Project Context

The first problem that arises is that there are many under privileged high school
leavers and other students who are not able to afford higher education due to financial
issues. With this problem, a lot of people who are potentially talented misses and waste the
opportunity to learn and utilize computer skills.

The second problem will be the traditional learning methods that are being
conducted in universities and colleges. Traditional learning methods are not very effective
in the modern era as different students require different learning techniques. The old
traditional learning technique might not be effective in delivering the module as most
universities do not provide consistent balance of practical training and theoretical
understanding of the particular module.

The third problem will be the limited knowledge and IT study resources found in
most universities’ libraries compared to online. This is due to the expensive cost for
universities to purchase books. With limited variety of books and studying materials, it will
not provide students full understanding of their modules.

The fourth problem is the poor computer fundamental skills that most students
have. Most of the students have very poor computer skills and most of them do not know
how to use the basic functions, such as downloading a software and many more. This factor is
very likely due to the poor exposure of computer knowledge for students during their
studying days. Most schools do not provide computing skills and knowledge to lower level
education students. This is a very crucial and critical factor as IT is becoming more important
in the modern world, without the basic computer skills, they will face a lot of issues later on.

The fifth and final problem is that most graduates or students do not fully
understand in the particular subject despite scoring well for their exams. The traditional
learning system usually consists of exams being conducted after learning the subject for a
certain number of weeks. Students might score as high as a distinction however; they are not
guaranteed to fully understand the module as some exams conducted in universities might be

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

biased or unfair. This can bring serious problems to certain graduates especially when they
are out in the working environment as expectations by employers are usually high.

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

4.3 Proposed Solution

The first solution is that by creating an E-Learning system, it can help to provide
students a virtual place to obtain complete IT knowledge as most students are under
privileged and are not able to afford higher education. The E-learning system can be another
useful alternative for people in obtaining proper computer knowledge.

Next, the second solution is to provide students alternative ways for learning
compared to the old traditional learning method. For example, students can learn through
the videos provided, read online notes, do tutorial questions, ask questions in the discussion
page, conduct online tests and browse the online library page in the portal. It can help
overcome the traditional learning method as most traditional learning ways are tedious and
boring.

The third solution is that by creating an E-Learning website, students can access the
website’s portal page that consists of an online virtual library to obtain studying
resources and knowledge. The library page consists of many educational websites found all
over the Internet. It can help students solve programming problems and gain more additional
knowledge.

The fourth solution is that by creating an E-Learning website, students are not just
able to learn IT and programming, but they are also able to enhance and learn basic
computer fundamental skills such as emailing, creating an account and so on. With this
skill, they are able to browse the web without any problems.

The fifth and final solution is that an E-learning website helps students to fully
understand their module. The major problem that most graduates do not realize is that
besides scoring distinction in that particular module, it does not guarantee that these students
fully understand the module. With this new E-learning system, it can help student emphasize
the understanding of a particular course. There is a slide page for the courses chapter that
allows students to learn. There is also a tutorial page that allows student practice and answer
questions. There is also a video page for each course to provide better explanation to the
students. There is a discussion page that allow students to seek help or answer some questions

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

posted by other users. Students will understand their courses better when they seek help from
other users. Finally, There will be a test for each course to evaluate the student’s
understanding. This can help students to learn and understand each chapter of the module
better.

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

4.4 Project Scope

Coding 101 E-Learning system emphasizes in helping the students or any learner to
gain the knowledge regarding Information Technology in a more effective way. Coding 101
aims to deliver programming knowledge to students virtually.

The roles of the system will be divided into web administrators and students. For the
roles, a web administrator can perform activities such as website editing such as creating,
updating and deleting web contents. Students are able to learn through online videos, lecture
session and do programming exercises. They can take online tests.

The first point for the system’s scope is that the target audience will be mainly for
Malaysians high school leavers but not restricted to other education level students, such as
undergraduates and so on. This initiative is made as it helps to boost the countries recognition
for IT. Malaysia can be more modern and well developed if there is a good introduction of
technology being implemented. The system aims to target high school leavers as teenagers
with young mind are relatively active at this age range, and can contribute a lot with a good
foundation of IT. However, the system plans to open up and expand to other countries in the
future.

Secondly, the system will be web based and can be easily accessible through the
Internet. Anything can be accessed online via the Internet. One will need a computer or any
electronic device along with an Internet connection to access the webpage via an Internet web
browser. This approach makes it very easily accessible and less confusing. The development
of the web page is relatively cheaper compared to hiring software engineers to develop a
software for the system. This helps to save cost especially when the E-Learning system
service is free of charge to the students.

Thirdly, users of intermediate computer skills can easily access and utilize the e-
learning system. Coding 101 E-Learning system has made initiatives and plans that aims to
allow users to use the service easily without hesitations. If the system is complicated, it will
not be user friendly and can lead to many problems. Hence, it will not be very effective for
students in using the provided service.

10

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Fourthly, the courses provided are Java programming, PHP and SQL. Coding 101 E-
Learning system aims to introduce and teach the most widely used programming language to
their students. The following programming languages are very commonly used in the
working environment. Students with a good foundation of the following languages can apply
for work easily in the future.

Finally, the level of the courses provided are based on the Diploma standard level of
education. The courses offered are not too hard and complex as it follows the real university
level standard of IT education. When the courses offered by the system is set at a difficult
level, students might give up easily due to many difficulties and problem faced, especially
when they are high school leavers with poor IT computer knowledge background.

11

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

4.5 Project Objectives

Coding 101 E-Learning System has set 5 major objectives in hopes that the system
will fulfil and satisfy. The objectives set are relatively important for a new system’s milestone
growth. When the objectives set are achieved, it opens a bigger pathway for opportunities,
such as the worldwide expansion of the system to assists more students in need.

The first objective of the system is to provide every student a chance to study and
obtain computer knowledge through a free online education platform. Not everyone is
able to afford higher education as most of them comes from poorer family background and
many other factors. Coding 101 aims to assist and provide opportunities for under privileged
high school leavers and other different level of education students to pursue in IT. Some
students might waste their opportunity, especially those who have the talent and potential in
programming. Thus, the system plans to help the students in getting an exposure to IT
education by offering a free online E-Learning platform.

Secondly, it is to provide an alternative way of learning and to overcome the

traditional learning method for Malaysian students by including more modern
techniques. Old traditional learning methods might not be very useful especially when there
are many new modern techniques in delivering knowledge to students. E-Learning had been
introduced long ago, however; most people do not know the effectiveness of it. Thus, the
system plans to make education fully online and virtual for students to replace the old
traditional learning method that are taught in universities classes.

Thirdly, it is to educate students through a complete library of IT knowledge

content and studying resources. This is one of the main objectives as most universities
might have limited library resources to IT and programming books. In the Internet however, it
is always open and very unlimited. One can easily locate the sources they need upon
searching on a search engine. In Coding 101, the portal itself offers students a library page
that allows them to browse a number of PDF programming E-books resources. This help
students to expand their knowledge easily without the hesitation of getting learning resources.
The fourth objective is to enhance the student’s basic computer skills. The system
is web based and this allows students to improve their basic computer skills, such as creating

12

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

an account, logging in, submitting forms and etc. Most people in Malaysia have very poor
computer fundamental knowledge, with this system, they can learn programming while
improving their basic computer skills.

Finally, it is to improve student’s existing programming knowledge. Some students

who are passionate in IT and programming might have some basic fundamental programming
knowledge in hand. However, they still can utilize the system to improve and maximize their
existing programming knowledge.

13

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

5.0 Project Plan

5.1 System Development Methodology

Figure 2 Waterfall Model

Waterfall model is the first methodology that was conceived by Dr Winston W. Royce
in 1970. The waterfall model emphasizes that a logical progression of steps be taken
throughout the system development process, much like the cascading steps down an
incremental waterfall[ CITATION Pow16 \l 17417 ]. It breaks down the project activities into
a liner sequence Thus, each activity will depend on the deliverables of the previous one and
correspond to a specialization of tasks.

Reason to apply this Methodology:

The reason why the project should implement this methodology is due to its
significant features as it suits a smaller project where requirements are well defined. The
project team has mentioned all the requirements for the proposed system in the early stage of
the project. Besides, a project Gantt chart is produced and the elaboration of documentation is
done at every phase of the system development cycle. This can ensure that the progression of
the project is in the right time frames and the implementation of the proposed system is in the
right direction. In additions, the project development team will also perform quality assurance
test such as verification and validation before completing each stage. It is very important as
the new system will have a lesser problem and its quality can be guaranteed.

14

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Steps to implement the Waterfall Model in this project:

This model consists of five different phases which are Requirement Analysis,
Design, Implementation and Unit Testing, Integration and System Testing, and
Operation and Maintenance.

First and foremost, the key aspect of the waterfall model is that all system
requirements are gathered at the beginning of the project. During this initial phase which is
requirement analysis, the system goal, services and constraints are established by having a
formal meeting with the project development team. This is to ensure all the requirements are
being identified and defined in detail, and serve as a system specification. For instance, the
system requirements for student users are the e-learning system should be able to provide
online course material such as lecture slides for module detailed information, tutorial
questions for better understanding of the module and also educational videos for a more
interesting learning environment. Besides, the admin will be able to manage the system
database for data modification and new data entry, and also generate test statistic reports to
monitor the students’ academic performance. Thus, a system requirement specification (SRS)
is produced and being reviewed by the project development team. This stage will mainly
focus on defining and planning of the project without mentioning specific processes
[ CITATION Lew07 \l 17417 ].

Once all the requirements have been determined, the project will enter the next phase
which is the design phase. During this phase, the hardware and system requirements will be
specified to help in defining overall system architecture. The design phase is broken up into
logical design and physical design subphases [ CITATION Pro19 \l 17417 ]. The logical
design involves the Context Diagram and Data Flow Diagrams (DFD) which are used to
visualize a system and analyse each process and subprocess within the context of the entire
flow which helps the team discover areas that can be improved. All the diagrams mentioned
can be found under the heading of 7.0 Context Diagram and Data Flow Diagram (DFD).
Besides, the flowcharts for certain functions are produced to show the process taken to
achieve the outcome of the functions and the outputs are provided under the heading of 10.0
Flow Chart. The physical design subphase will produce a prototype of the proposed system
which will show all the main solutions and requirements that have been suggested. Moreover,
this phase will plan the programming language such as PHP in order to produce system code
15

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

that will be used at the next stage. MYSQL online database server is applied to connect the
system to store and retrieve data.

After the design stage, it is the implementation and unit testing phase. The
implementation phase is when programmers assimilate the requirements and specifications
from the prior phases and produce actual code. With inputs from system design, the system is
first developed in small programs called units, which are integrated into the next phase
[ CITATION Sha16 \l 17417 ]. Each unit is developed and tested for its functionality which is
referred to as Unit Testing. Some unit test plans for certain functions are provided for this
project under the heading of 13.0 Test Plan. For example, library page which can provide
extra study materials to the student user and its study material can be uploaded or modified
by the admin, is produced and tested to ensure its function meets the system requirements.

When each unit has been verified to meet its specification, the project will enter the
integration and system testing phase. At the beginning of this phase, all the units developed
such as user account system, course system, admin database system and test statistic report
system are integrated into a complete system to ensure the system requirements have met
[ CITATION Sha16 \l 17417 ]. After the integration process, the new system must go through
constant system testing to ensure there are no flaws or errors. A system test then will be
applied for this project. The testing must be done so that the system will not face any problem
during the implementation of the e-learning website. However, when there is any error
occurs, the whole activities of the Implementation and Unit Testing phase must take part
again for the revealed bus to be properly squashed.

After the testing is done and the system has met all the specification and
requirements, the new proposed system will be delivered to its target customers or users.
Thus, the project has entered the final phase which is the operation and maintenance phase.
Finally, the e-learning system is ready for deployment as it is deemed fully functional.
Maintenance phase occurs after installation and involves making modification to the system
to alter attributes or improve performance [ CITATION Sha16 \l 17417 ]. These
modifications arise might be the change requests from users’ feedbacks. For instance, a
feedback function has been applied to the system to collect the users’ comments and response
towards the system. Besides, this might occur due to defects uncovered during live use of the
system such as the student users are not able to view the test results. Therefore, the system
16

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

development team must apply the fixes as necessary until the needs of the users are satisfied.
Lastly, the regular maintenance and support for the developed e-learning system will be
provided to ensure the smooth operation of the system can be achieved and new system
features or functions can be included to meet the target customers’ requirements.

17

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

5.2 Project Gantt Chart

Figure 3 Project Gannt Chart

18

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

6.0 System Hierarchy Chart

6.1 Landing Page and Home Page Chart

Figure 4 Landing Page and Home Page Chart

19

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

6.2 Portal Page Chart

Figure 5 Portal Page Chart

20

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

7.0 Context Diagram and Data Flow Diagram (DFD)

7.1 Context Diagram

Figure 6 Context Diagram

21

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

7.2 DFD Level-0

Figure 7 DFD Level 0

22

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

7.3 DFD Level-1

7.3.1 Library Function (Tan Ming Wei)

Figure 8 DFD Level 1 (Library)

23

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

7.3.2 Discussion Function – Read Thread (Tan Kim Chuan)

Figure 9 DFD Level 1 (Discussion – Read Thread)

24

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

7.3.3 Test Function (Lim Wei Hern)

Figure 10 DFD Level 1 (Test)

25

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

7.3.4 Feedback Function (Pang Qi Hao Isaac)

Figure 11 DFD Level 1(Feedback)

26

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

8.0 Data Dictionary

8.1 Library Function (Tan Ming Wei)

External Entity

Name Admin
Description Customer clicks on “Library Database”
page to add new books to the library.
Input Data Flow -
Output Data Flow Library Database Request

Name Student
Description Student clicks on “Library” button to access
to library page on portal.
Input Data Flow -
Output Data Flow Portal

Process

27

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Name 6.1 Access Library Database

Description Admin accesses the library database on
admin page
Input Data Flow Library database request
Output Data Flow Book Details

Name 6.2 Add New Books

Description Adds new books to the library database
Input Data Flow 1) Book Details
2) Prompt Message
Output Data Flow Book Details

Name 6.3 Verification

Description Checks if the books were successful added
to the library database or not
Input Data Flow Book Details
Output Data Flow 1) Fail Message
2) Successful Message

Name 6.4 New Books Added

Description Books were successfully added to the
library database
Input Data Flow Successful Message
Output Data Flow Database

Name 6.5 Library Database

Description New books stored are shown at the library
database page
Input Data Flow 1) Database
2) Book Details
Output Data Flow 1) Result
2) Book Details

Name 6.6 Library Page

Description Students accesses the library page through

28

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

the portal
Input Data Flow 1) Portal
2) Result
Output Data Flow -

29

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Data Flow
Name Library Database Request
Description Admin is directed to the library database
page through the admin page
Origin / Source Admin
Destination / Sink Access Library Database

Name Book Details

Description Library database page shows the library
books stored
Origin / Source Access Library Database
Destination / Sink Add New Books

Name Book Details

Description Book details are entered on the form field
and goes through the validation process
Origin / Source Add New Books
Destination / Sink Verification

Name Fail Message

Description Book details entered consists of wrong
formats
Origin / Source Verification
Destination / Sink Add New Books

Name Successful Message

Description Book details entered is in correct format and
is successfully added.
Origin / Source Verification
Destination / Sink New Books Added

Name Database
Description New book details are stored in the library
database.
Origin / Source New Books Added
Destination / Sink Library Database

30

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Name Book Details

Description Books are stored to the library database
Origin / Source Library Database
Destination / Sink library

Name Book Details

Description Books are retrieved from the library
database
Origin / Source library
Destination / Sink Library Database

Name Result
Description Books are fetched and retrieved from the
library database
Origin / Source Library Database
Destination / Sink Library Page

Name Portal
Description Student clicks on the portal page to get
access to the library page
Origin / Source Student
Destination / Sink Library Page

31

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Data Store

Name library

Description Stores and displays all books

Input Data Flow Book Details
Output Data Flow Book Details
Data Structure Book_ID,
Book_Name,
Book_Author,
Book_Image
Link

32

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

8.2 Discussion Function – Read Thread (Tan Kim Chuan)

External Entity
Name Student
Description Student clicks on “Read Thread” button to access to Read Thread
Page on Discussion page.
Input Data Flow -
Output Data Flow Read Thread Request

Process
Name 8.1 Access Read Thread Function
Description Student accesses the Read Thread function on Discussion page
Input Data Flow Read Thread Request
Output Data Flow Read Thread Request

Name 8.2 Search Thread

Description User searches thread by typing keywords such as thread title.
Input Data Flow Read Thread Request
Output Data Flow Thread Keyword

Name 8.3 View Thread

Description User views the thread that is searched from Reply datastore.
Input Data Flow Thread Keyword
Output Data Flow Thread Information

Name 8.4 Reply Thread

Description User replies the thread that is viewed.
Input Data Flow Thread Information
Output Data Flow Thread Reply

Name 8.5 Submit Thread

Description User submits the thread reply that will be stored to Reply datastore.
Input Data Flow Thread Reply
Output Data Flow Updated Thread Reply

Name 8.6 View Reply

Description User views the thread reply that is submitted.

33

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Input Data Flow Updated Thread Reply

Output Data Flow -

Data Flow
Name Read Thread Request
Description User is directed to the Read Thread page through the Discussion
page.
Origin / Source External Entity, Student
Destination / Sink Process, 8.1 Access Read Thread Function

Name Read Thread Request

Description User can access Read Thread function on Discussion page and type
thread keyword on the search bar.
Origin / Source Process, 8.1 Access Read Thread Function
Destination / Sink Process, 8.2 Search Thread

Name Thread Keyword

Description Thread keyword such as thread titles are entered on the search bar
and viewed by the user.
Origin / Source Process, 8.2 Search Thread
Destination / Sink Process, 8.3 View Thread

Name Thread Information

Description Thread information that is viewed by the user such as thread title and
description are shown for user to reply.
Origin / Source Process, 8.3 View Thread
Destination / Sink Process, 8.4 Reply Thread

Name Thread Reply

Description Thread reply typed by the user is submitted.
Origin / Source Process, 8.4 Reply Thread
Destination / Sink Process, 8.5 Submit Thread

Name Updated Thread Reply

Description The submitted thread reply is viewed by the user.

34

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Origin / Source Process, 8.5 Submit Thread

Destination / Sink Process, 8.6 View Reply

Name Thread Information

Description Thread information such as thread title and description are extracted
from Reply datastore and shown to the user to view.
Origin / Source Datastore, D8 Reply
Destination / Sink Process, 8.3 View Thread

Name New Reply Data

Description The submitted thread reply data are stored to the Reply datastore.
Origin / Source Process, 8.5 Submit Thread
Destination / Sink Datastore, D8 Reply

35

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Data Store

Name D8 Reply
Description Stores and Display all thread information and thread reply data.
Input Data Flow New Reply Data
Output Data Thread Information
Flow
Data Structure Thread_Username,
Thread_Title,
Thread_Description,
Thread_Reply

36

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

8.3 Test Function (Lim Wei Hern)

Process
Name Description Input data flow Output data flow
5.1 Validate test Check if all Test Validation Success,
questions is Fail Message
answered

Data flow
Name Description Source Sink
Test User Submitted test Student External Validate test process
information Entity
Validation Success Test information is Validate test process Calculate Result
valid process
Fail Message Indicate test Validate test process Validate test failed
information is not process
valid

Process
Name Description Input data flow Output data flow
5.2 Validate test Inform user some Failed Message Prompt Message
failed questions are not
answered

Data flow
Name Description Source Sink
Fail Message Indicate test Validate test process Validate test failed
information is not process
valid
Prompt Message Display an alert Validate test failed Student External
message to the user process Entity

Process
Name Description Input data flow Output data flow
5.3 Calculate Result Calculate the total Validation Success Test Result Data
marks of the user
Data flow
Name Description Source Sink
Validation Success Test information is Validate test process Calculate test process
valid
Test Result Data User’s total marks Calculate Result Store Result process
process

Process

37

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Name Description Input data flow Output data flow

5.4 Store Result Store user’s total Test Result Data (1) Test Result Data (2)
mark into the (Sink from 5.3) (Input for database)
database

Data flow
Name Description Source Sink
Test Result Data (1) User’s total marks Calculate Result Store Result process
process
Test Result Data (2) User’s total marks Store Result process Java Test, PHP Test or
SQL Test data store

Data Store
Name Description Input data flow Output data flow Data structure
Java Test Store all Test Result Data Test Result JAVA_Form_ID,
information about Information user_id, Java_Q1,
Java Test Java_Q2,
Java_Q3,
Java_Q4,
Java_Q5,
Java_Q6, Result
PHP Test Store all Test Result Data Test Result PHP_Form_ID,
information about Information user_id,
PHP Test PHP_Q1,
PHP_Q2,
PHP_Q3,
PHP_Q4,
PHP_Q5,
PHP_Q6, Result

38

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

SQL Test Store all Test Result Data Test Result SQL_Form_ID,
information about Information user_id,
SQL Test SQL_Q1,
SQL_Q2,
SQL_Q3,
SQL_Q4,
SQL_Q5,
SQL_Q6, Result

Process
Name Description Input data flow Output data flow
5.5 Output Result Display user’s test Test Result Test Result
marks Information

Data flow
Name Description Source Sink
Test Result User’s test marks from Store Result process Output Result process
Information database
Test Result User’s test marks Output Result process Student External
Entity

8.4 Feedback Function (Pang Qi Hao Isaac)

External Entity
Name Description Input data flow(s) Output data flow(s)
Student Students access the Access Portal Success Message
feedback page from
the portal and
answers all the
questions. When
finished, the
“Submit” button is
clicked and the data
is stored.

Process
Name Description Input Data Output Data Process
Flow(s) Flow(s) (Structured
English)
9.1 Feedback The page where Question Error Message Program
Page students give Details FeedbackRedire
their feedback ct:
about the Detect if an
website. account is
logged in.

39

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

If yes then
allow the
student to
access the
Feedback page.
If no then
redirect the
student to the
Login page .
9.2 Submit After Error Message, Question Program
Feedback submitting the Feedback Details FeedbackSubmi
feedback, a Details t:
script checks if Detect when a
all the questions student clicks
had been on the “Submit”
answered. button.
If one or more
questions are
not answered,
give an error
message.
If all questions
are answered,
give a success
message and
redirect users to
the Portal.
9.3 Update Using a script, Feedback Form Existing Program
Feedback any updated Update Feedback Form UpdateFeedbac
feedback forms Detected k:
will have Detect if the
updated student has an
answers existing form.
reflecting the If yes, modify
change. the answers of
the student.

Data Flow
Name Description Origin Sink
Access Portal Students access the Student Feedback Page
“Portal” page to
access the
“Feedback” page
Question Details The answers of the Feedback Page Submit Feedback
student’s feedback
Error Message If some questions Submit Feedback Feedback Page
are not answered,
students will be
prompted with

40

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

“Please select one of

these options” for
the corresponding
questions.
Feedback Details Answers of all the Submit Feedback Feedback
questions by the
student.
Success Message If all questions are Submit Feedback Student
answered and the
student clicks on the
“Submit” button,
students will be
prompted with
“Thank you!”.
Existing Form A script to detect if Feedback Update Feedback
Detected all the answers are
the same.
Feedback Form The system updates Update Feedback Feedback
Update the answer of a
student if they
already have a
feedback form
before.

Name Description Origin Destination Data Structure

Feedback Stores the Feedback Existing Form User_ID,
feedback Details Detected QuestionOne,
answers of all QuestionTwo,
the questions by QuestionThree,
students QuestionFour,
QuestionFive,
QuestionSix

41

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

9.0 Entity Relationship Diagram (ERD)

42

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 12 Entity Relationship Diagram (ERD)

43

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

10.0 Pseudocode / Flowchart

10.1 Library Function (Tan Ming Wei)

Figure 13 Flowchart (Library)

44

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

10.2 Discussion Function – Read Thread (Tan Kim Chuan)

Figure 14 Flowchart (Discussion - Read Thread)

45

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

10.3 Test Function (Lim Wei Hern)

46

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 15 Flowchart (Test)

47

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

10.4 Feedback Function (Pang Qi Hao Isaac)

Figure 16 Flowchart (Feedback)

48

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

11.0 Screen Design and User Manual

11.1 Landing Page

The E-Learning Website “Coding 101” was created using PHP, HTML, CSS, JavaScript. It is
also linked with the PHPMYADMIN databases. It has a total of 80 PHP files on its own along
with other html and bootstrap files. The website has used 2 different bootstrap templates for
the design. For this user manual, the user “James” will be used as a test. The first page will be
the landing page. It is shown as the figures below.

Figure 17 Landing 1

Figure 18 Landing 2

Upon landing on the page, the user will first see the items and contents as shown as Figure
Landing 1 above. Firsly, there is a “GET STARTED” label along with a login and register
button below for the user to create an account or log into the website with an existing
account. When a user hovers their mouse over one of the buttons, the buttons will show a

49

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

glowing effect. It is shown as Figure Landing 2 above. Next, the second content will be the
“ABOUT US” section. It is shown as Figure Landing Info below.

Figure 19 Landing Info

The ABOUT US section talks about the company’s detail and background along with its
objectives. Next, the navigation bar is shown as Figure Landing Nav below.

Figure 20 Landing Nav

The navigation bar on top shows 3 buttons, that is the website’s name “CODING 101”, GET
STARTED and INFO. Upon clicking on the CODING 101 or GET STARTED button, it
brings the user back up to the top section when they scroll down along the website, as it is
also first item of the page. Clicking on the INFO button brings the user down to the ABOUT
US section. Next, the footer is shown as Figure Landing Footer below.

Figure 21 Landing Footer

50

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

The footer shows 3 items, the company’s origin location with a detailed written address, the
social media link icons and contact details. There is a navigation bar and footer for every
page except for the portal.

51

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

11.2 Register Page

Upon clicking on the Register Button on the Landing Page, it brings the user to the register
page as shown as Figure Register 1 below.

Figure 22 Register 1

The register page shows a registration form that the user must fill in to register an account. It
includes their first name, last name, e-mail address, password and gender field. It is
compulsory for a user to fill in all of the fields or else a message will appear. It is shown as
Figure Register 2 below.

Figure 23 Register 2

The user will have to enter a password with a minimum length of 4 characters at least or else
a message will appear. It is shown as Figure Register 3 below.

Figure 24 Register 3

52

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

A user cannot user an existing e-mail address. If they use an existing e-mail address, the user
will not be able to create an account and an error will appear. It is shown as Figure Register 4
below.

Figure 25 Register 4

Upon successfully creating an account, a message will appear and direct the user to the Login
Page. The message is shown as Figure Register 5 below.

Figure 26 Register 5

53

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

11.3 Login Page

After creating an account or clicking on the Login Button, it will direct the user to the Login
Page. It is shown as Figure Login 1 below.

Figure 27 Login 1

A user will have to key in their E-mail address and Password to sign in. After successfully
entering the details, they will have to click on the Sign In button. Users can also choose to
create an account by clicking on the green “Create an account” label below the Sign In
button. The user will have to enter both of the fields. If the user enters a wrong e-mail address
or password, an error will be thrown to them. The error is shown as Figure Login 2 below.

Figure 28 Login 2

If the user enters the correct credentials, a message will appear and direct them to the Home
Page. The message is shown as Figure Login 3 below.

54

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 29 Login 3

11.4 Home Page

After successfully signing in, the user will be directed to the home page. It is shown as Figure
Home 1 below.

Figure 30 Home 1

An avatar will appear on the screen welcoming the current user with a clickable “Launch
Course” label that directs the user to the Portal Page.

Figure 31 Home 2

Next, the second item on the webpage will be the SUPPORT section. It is shown as Figure
Home 2 above. There are 3 clickable square buttons that are named Feedback, Career and

55

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Donate. Upon clicking on one of the buttons, a mini window pops up allowing the user to get
to the specific webpage. The 3 mini windows are shown as the figures below.

Figure 32 Home Feedback

Figure 33 Home Career

Figure 34 Home Donate

56

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Based on the figures above, each of the window has a detailed mini description and a button
down below. The feedback window as shown as Figure Home Feedback above directs the
user to the website’s feedback page. The career window as shown as Figure Home Career
above directs the user to the website’s career page while the donate window as shown as
Figure Home Donate above directs the user to UNICEF’s donation page. Next, the third item
on the webpage will be the same ABOUT US section that was discussed earlier. The
navigation bar above has replaced the previous buttons with 4 new buttons instead, the
CODING 101 button remains however. The 4 new buttons are the SUPPORT, INFO,
LAUNCH COURSE and LOG OUT button. Upon clicking on the CODING 101 button, it
still brings the user back to the top section of the page. Clicking on the SUPPORT button, it
brings the user to the support section. Similarly, clicking on the INFO button, it brings the
user to the about us section. Next, clicking on the LAUNCH COURSE button, it brings the
user to the Portal Page. Finally, clicking on the log out button will bring the user back to the
home page. A message will appear if the user has been successfully logged out. The message
is shown as Figure Logout 1 below.

Figure 35 Logout 1

If a user has already logged out but tries to get to the home page, a message will appear to
remind the user that they have to log in first. The message is shown as Figure Logout 2
below.

Figure 36 Logout 2

57

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

58

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

11.4.1 Feedback Page

On the feedback page, there is a form containing a set of 5 questions that requests for the
user’s feedback. It is shown as the figures below.

Figure 37 Feedback 1

Figure 38 Feedback 2

A user must then select a rating based on a range of 5 different rating options that are “Very
Bad”, “Bad”, “Average”, “Good” or “Very Good”. The user must then click on the submit
button to send their responses. After the user has clicked on the submit button, a message will
appear and redirect the user back to the home page. It is shown as Figure Feedback 3 below.

59

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 39 Feedback 3

The user’s feedback will be recorded in a database. A user must answer all of the given
questions or else an error will appear. The error is shown as Figure Feedback 4 below.

Figure 40 Feedback 4

A user can submit a feedback more than once.

60

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

11.4.2 Career Page

On the career page, there is a section of information that talks about the company’s
background, objectives, job benefits and career options. It is shown as the figures below.

Figure 41 Career 1

Figure 42 Career 2

There is a collapsible career box as shown as Figure Career 2 above that allows the user to
click on each job position. Upon clicking on either one, a brief description regarding the job
scope will appear. It is shown as Figure Career 3 below.

61

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 43 Career 3

Users who are interested to apply for the jobs can follow the instructions shown below the
collapsible career box.

62

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

11.5 Portal Page

11.5.1 Classes Page

Users will land to the classes path page of the portal page upon clicking on “Launch Course”
from the home page. The portal page has a side navigation bar on the left that includes the
user’s avatar icon and 6 buttons that is Home, Discussion, Classes, Test, Library and the
clickable user’s name or image. The Home button redirects the user back to the home page,
the Discussion button directs the user to the discussion page, the Classes button directs the
user to the current classes page, the Test button directs the user to the test page, the Library
button directs the user to the library page and finally the clickable user’s name or image
directs the user to the user profile page. The portal and classes page is shown as Figure Portal
1 below.

Figure 44 Portal 1

There is an orange button on top of the webpage for the user to hide the side navigation bar,
this helps to stretch the webpage, allowing them to study and perform study activities better.
The button is shown as Figure Portal 2 below.

Figure 45 Portal 2

Upon clicking on the button, it hides the side navigation bar. It is shown as Figure Portal 3
below.

63

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 46 Portal 3

The classes page shows 3 types of courses that are available to study. The courses are Java,
PHP and SQL. Upon clicking on either of them it shows a similar layout that consists of
slides, tutorial and videos. For this example, the Java course will be selected for showcase.
The figure is shown as Figure Classes 1 below.

Figure 47 Classes 1

Users can select the slides button to study a series of chapters for the current course, select
the tutorial button to do course exercises or select the video button to view a full course
video. On the top right side of the page, there is a BACK button that redirects the user back to
the previous page. It is shown as Figure Classes 2 below.

Figure 48 Classes 2

In the slides, the user can choose a chapter to study. It is shown as Figure Classes 3 below.

64

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 49 Classes 3

After selecting a chapter, they will be directed to the chapter’s webpage where they can read
and study the contents of the module’s chapter via a slideshow. Users can navigate the pages
of the chapter by clicking on the left and right arrows on the side of the slideshow to view the
slideshow chapter content. There are also a few light grey coloured buttons below that allows
the user to navigate to the desired page of the chapter. The slideshow is shown as Figure
Classes 4 below.

Figure 50 Classes 4

Next, the tutorial path is similar to the slides path. After selecting the tutorial, the user can
choose a chapter to do the course exercises. After selecting a chapter, they will be directed to
the chapter’s webpage where they can answer a set of questions. There is also a set of
answers down below for the user to refer and do their corrections. It is shown as the figures
down below.

65

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 51 Classes 5

Figure 52 Classes 6

Finally, for the video path, when a user selects the video button, they will be directed to the
courses’ video webpage where they can view a full course video via a large screen
implemented in the webpage. The video webpage is shown as Figure Classes 7 below.

Figure 53 Classes 7

66

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

11.5.2 User Profile Page

Upon clicking on the user’s name or the avatar icon, the user will be directed to the user
profile page. The user profile page is shown as Figure 37 User Profile 1 below.

Figure 54 User Profile 1

From the figure as shown above, the user profile webpage shows a form containing the user’s
first name, last name, e-mail address and gender. It also shows their test results on the right
side. There is also a photo upload button below for the user to upload a profile picture. The
user’s uploaded photo will be stored in a database. For this showcase, a blue and white avatar
icon will be used as the profile picture for the user “James”. After creating a new account, the
default picture will be blank. Users will have to upload their profile pictures by themselves.
The blank default picture for a new user is shown as Figure User Profile 2 below.

Figure 55 User Profile 2

Users are not able to modify their details besides uploading or changing their profile picture.

67

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

11.5.3 Discussion Page

On the discussion page, there are two pathways available for the users. The users can either
choose to create a thread or read a thread by clicking on the buttons. The discussion page is
shown as Figure Discussion 1 below.

Figure 56 Discussion 1

68

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

11.5.3.1 Create Thread Page

When a user clicks on the CREATE THREAD button, they will be directed to the create
thread page. At the page, users can post a thread by filling in the form that consists of a title
and description box field. The page is shown as Figure Discussion 2 below.

Figure 57 Discussion 2

After the user has filled in the form, they must click on the “Post Thread” button to post their
thread. After the user clicks on the button, a message will appear to notify the user that the
thread has been successfully posted. The message is shown as Figure Discussion 3 below.

Figure 58 Discussion 3

Users cannot type more than 100 characters in the title box field and they also cannot type
more than 255 characters in the description box field. There is a placeholder written at each
of the field boxes to remind the users not to exceed the maximum number of characters they
are allowed to type. The threads created will be stored in a database.

69

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

11.5.3.2 Read Thread Page

When a user clicks on the READ THREAD button, they will be directed to the read thread
page. At the page, users can view a thread by browsing through a list of threads found on the
webpage. The list of thread consists of a title, user name and view field. The title field shows
the title of the thread, the user name field shows the name of the user who posted the thread
and the view field consists of a button that allow the users to click onto the specific thread.
The page is shown as Figure Discussion 4 below.

Figure 59 Discussion 4

There is a search bar located on the top for users to search for a thread by the title of the
thread posted. Users can type and search for a specific thread. After typing, they will have to
click on the Search button to filter out the unrelated threads. It is shown as Figure Discussion
5 below.

Figure 60 Discussion 5

After the user clicks on the view button for a specific thread, they will be directed to the
thread’s page. For this showcase, the Tutorial 1 (JAVA) question submitted by James will be
used. The thread page is shown as the figures below.

70

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 61 Discussion 6

Figure 62 Discussion 7

As shown as Figure Discussion 6 above, the webpage shows the user who submitted the
thread, title and description of the thread. There is also a reply box as shown as Figure
Discussion 7 above. Users can choose to reply to a thread. After the user has completed
typing, they must click on the Submit Reply button to post their response. A message will pop
up to notify the user that their response has been successfully submitted. The message is
shown as Figure Discussion 8 below.

Figure 63 Discussion 8

71

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Users cannot type more than 255 characters in the reply box field. There is a placeholder
written at the reply field box to remind the users not to exceed the maximum number of
characters they are allowed to type. The user’s reply will be recorded in a database. The
replies are shown down below the reply box. It shows the name of the user who responded
and the user’s reply. Every user is able to check on other user replies. When a user enter and
views a newly created thread with no replies, a message will pop up to notify the user that
there are currently no responses in that thread yet, before entering the thread. The message is
shown as Figure Discussion 9 below.

Figure 64 Discussion 9

72

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

11.5.4 Test Page

On the test page, users can choose to take a test for any of the three courses by clicking on the
green courses buttons. The webpage is shown as Figure Test 1 below.

Figure 65 Test 1

For this showcase, we will be choosing Java for the test. After clicking on the Java button, it
will direct the user to the test page where they must answer a set of questions. It is shown as
the figures below.

Figure 66 Test 2

73

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 67 Test 3

Figure 68 Test 4

Figure 69 Test 5

There are a total of 6 questions that the user must answer. After the user has answered all of
the 6 questions, they must click on the submit button below. If the user does not choose an
answer for any of the questions, a message will pop up to remind them that they have to
answer the question. It is shown as Figure Test 6 below.

74

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 70 Test 6

When the user submits the test, a message will pop up and notify the user that the test has
been successfully submitted. It is shown as Figure Test 7 below.

Figure 71 Test 7

Another message will also appear to notify the user about the marks they have scored for the
test. It is shown as Figure below.

Figure 72 Test 8

After clicking on OK, they will be redirected to the user profile page. The users are able to
see their overall test marks for the particular course on the “YOUR RESULT” window
located at the right side of the page. It is shown as Figure Test 9 below.

Figure 73 Test 9

75

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

The results will be stored in a database. After completing a test for the particular course, the
user is not able to redo the test for the same course. If they try to redo the same test by
clicking on the course’s button at the test page, a message will appear to tell them that they
have already submitted a test for that particular course. It is shown as Figure Test 10 below.

Figure 74 Test 10

76

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

11.5.5 Library Page

On the library page, users can choose to read any online PDF books through a list of books
given. The page is shown as Figure Library 1 below.

Figure 75 Library 1

In the library page as shown as Figure Library 1 above, there is an image, book name, author
and read field. Users can choose a book to read from the list range. Upon clicking on the read
field links, a new tab will appear with the book PDF content. On top, there is also a search
bar for the users to locate a specific book by the book name.

77

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

11.6 Admin Page

On the admin page, the admin is able to view all of the database table that contains the data of
the users. The admin page has a total of 9 blue database table buttons and 1 red button to
view all the three test’s statistics pie chart. The E-Learning system has a total of 9 tables. The
database shown are directly extracted from PHPMYADMIN. The JAVA, PHP and TEST
button directs the admin to the specific course results database page. The USERS button
directs the admin to the users database page. The PHOTO button directs the admin to the
user’s photo database page. The FEEDBACK button directs the admin to the user’s feedback
page. The LIBRARY button directs the admin to the library page. The THREAD button
directs the admin to the thread page and the REPLIES button direct the admin to the user
replies page. Finally, the unique red colour “TESTS STATISTICS” button directs the admin
to all the three test’s statistics pie chart page. The webpage is shown as Figure Admin 1
below.

Figure 76 Admin 1

The admin page does not have a footer unlike the home page or landing page, it also only
contains a LOG OUT button at the navigation bar. Only the admin can access the admin page.
For this showcase, the admin’s account credentials are shown as the table admin below.

E-mail Address [email protected]

Password 123123

Table Admin

78

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

When the admin signs in, a message will appear. It is shown as Figure Admin 2 below.

Figure 77 Admin 2

However, if the user is not an admin but tries to get access to the admin page, a message will
pop up. In this showcase, the user James will be the user. It is shown as Figure Admin 3
below.

Figure 78 Admin 3

If a random person who is not a user of CODING 101 tries to get access to the admin page, a
different message will pop up. It is shown as Figure Admin 4 below.

Figure 79 Admin 4

79

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

11.6.1 Admin Page (Test Page)

In the admin page, the three course test button has the similar design. Upon clicking, it directs
the admin to the user test’s page. Inside the webpage, the admin can view or delete the user’s
test results. The Java, PHP and SQL database are shown as the figures below.

Figure 80 Admin 5

Figure 81 Admin 6

Figure 82 Admin 7

80

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

There is a “Go Back” button located below that directs the admin back to the previous page.
It is shown as Figure Admin 8 below.

Figure 83 Admin 8

There is also a search bar located on top for the admin to locate the user’s results. The admin
has to search based on the user’s ID. The admin can delete the user’s result by clicking on the
Delete button located on the right.

81

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

11.6.2 Admin Page (User Page)

For the user button, it directs the admin to the user database page. Inside the webpage, the
admin can view, edit or delete the user’s information. It is shown as Figure Admin 9 below.

Figure 84 Admin 9

There is also a search bar located on top for the admin to locate the user. The admin has to
search based on the user’s first name. The admin can delete the user by clicking on the Delete
button located on the right. When the admin clicks on the Edit button, it brings the admin to
the edit page. It is shown as Figure Admin 10 below.

Figure 85 Admin 10

In this page, the admin is able to modify a user’s information. There is a form that shows the
user’s detail. There are two buttons below the form, that is the Update button that updates the
user new information and the Back to previous Page button that redirects the admin back to
the previous page. After the admin clicks on the Update button, a message will appear to

82

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

notify the admin that the user’s information has been successfully updated. It is shown as
Figure Admin 11 below.

Figure 86 Admin 11

However, if the data was not changed but the admin decides to click on the Update button,
another message will appear to notify the admin that the data was not updated. It is shown as
Figure Admin 12 below.

Figure 87 Admin 12

83

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

11.6.3 Admin Page (User Photo Page)

For the photo button, it directs the admin to the user’s photo database page. Inside the
webpage, the admin can view or delete the user’s profile picture. It is shown as Figure Admin
13 below.

Figure 88 Admin 13

There is also a search bar located on top for the admin to locate the user’s profile picture. The
admin has to search based on the user’s ID. The admin can delete the user’s photo by clicking
on the Delete button located on the right.

84

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

11.6.4 Admin Page (Feedback Page)

For the feedback button, it directs the admin to the user’s feedback database page. Inside the
webpage, the admin can view or delete the user’s feedback. It is shown as Figure Admin 14
below.

Figure 89 Admin 14

There is also a search bar located on top for the admin to locate the user’s feedback. The
admin has to search based on the user’s ID. The admin can delete the user’s feedback by
clicking on the Delete button located on the right.

85

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

11.6.5 Admin Page (Library Page)

For the library button, it directs the admin to the portal’s library database page. Inside the
webpage, the admin can view, add or delete the library’s content. It is shown as Figure Admin
15 below.

Figure 90 Admin 15

There is also a search bar located on top for the admin to locate the books. The admin has to
search based on the book name. The admin can delete the book by clicking on the Delete
button located on the right. When the admin clicks on the ADD BOOK button, it brings the
admin to the add book page. It is shown as Figure Admin 16 below.

86

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 91 Admin 16

In the webpage, the admin is able to publish a new book. There is a form of fields that the
admin has to fill in. After filling in all of the fields, the admin has to click on the submit
button located below to publish. All of the fields must be entered or else a message will
appear. It is shown as Figure Admin 17 below.

Figure 92 Admin 17

After clicking on the submit button, a message will appear to notify the admin that the book
has been successfully published. It is shown as Figure Admin 18 below.

Figure 93 Admin 18

87

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

11.6.6 Admin Page (Thread Page)

For the thread button, it directs the admin to the user’s thread database page. Inside the
webpage, the admin can view or delete the user’s thread. It is shown as Figure Admin 19
below.

Figure 94 Admin 19

There is also a search bar located on top for the admin to locate the user’s thread. The admin
has to search based on the user’s ID. The admin can delete the user’s thread by clicking on
the Delete button located on the right.

88

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

11.6.7 Admin Page (Reply Page)

For the replies button, it directs the admin to the user’s reply database page. Inside the
webpage, the admin can view or delete the user’s reply. It is shown as Figure Admin 20
below.

Figure 95 Admin 20

There is also a search bar located on top for the admin to locate the user’s reply. The admin
has to search based on the user’s ID. The admin can delete the user’s reply by clicking on the
Delete button located on the right.

89

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

12.0 Report Design and User Manual

12.1 Admin Page (Test Statistics Report)

There is one function that allows the admin to generate a test statistics report on the
admin page which is the unique red coloured “TESTS STATISTICS” button as shown in the
figure below. The Test Statistic Pie Chart for each subject is used to show the total results of
the student for particular subject. This is to help the admin to analyze which course test has
the higher percentage of number of the students that have high scores and also low scores for
the test. It provides the easiness for the admin to get information about which course might
need to change or modify the study materials offered in order to help the students to have a
better understanding of the particular course and therefore, they are able to score better marks
for the tests.

Figure 96 Admin Page Menu

Furthermore, the admin can also provide a new student’s course feedback form on the
feedback page to collect comments and responses from student user about the study materials
of the courses provided and any suggestion or improvement for the courses. Thus, it can help
the admin to improve the course’s study materials that are able to help students to have a
greater learning outcome.

90

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

For the tests statistics button, it directs the admin to the test statistics page. It is shown
as Figure Test Statistics Piechart below.

Figure 97 Test Statistics Piechart

Inside the webpage, the admin can see 3 different pie charts that each represents different
tests, such as Java, PHP and SQL. All the test statistic pie charts are auto-generated.
Moreover, the pie charts are generated based on real time data, for instance, all the real time
data are extracted from the test tables of MYSQL for each subject as shown as Figures 98, 99
and 100 below.

Figure 98 Java Test Table from MYSQL

Figure 99 PHP Test Table from MYSQL

91

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 100 SQL Test Table from MYSQL

This means that when there is a new user submits a test, the pie chart will be updated
automatically. The pie chart figure shows all of the user’s taken test results. The colours are
represented differently for the number of correct answers from the results. There is a total of
6 questions for each test and the correct answer value will range from 0 to 6. The correct
answer results are based on the preset “Default” field values on the database by the admin.
For this example, the java test will be used as the showcase. The figure is shown as Figure
Java Test Database below.

Figure 101 Java Test Database

The answers submitted by the students for the java test must match the default field values as
shown as the figure above. or else it would result as a wrong answer. It is similar for the PHP
and SQL tests.

92

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

13.0 Test Plan

13.1 Unit Testing
13.1.1 Library Function (Add/Read) (Tan Ming Wei)

System Name: Coding 101 E-Learning System

Test Unit: Library (Add and Read)
Tester Name: Tan Ming Wei
Date Created: 27/3/2020
Date Review: 11/4/2020

Figure 102 Unit Testing (Library)

93

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

13.1.2 Discussion Function – Read Thread (Tan Kim Chuan)

System Name: Coding 101 E-Learning System

Test Unit: Discussion – Read Thread
Tester Name: Tan Kim Chuan
Date Created: 27/3/2020
Date Review: 11/4/2020

94

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 103 Unit Testing (Discussion - Read Thread)

95

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

13.1.3 Test Function (Lim Wei Hern)

System Name: Coding 101 E-Learning System

Test Unit: Test
Tester Name: Lim Wei Hern
Date Created: 27/3/2020
Date Review: 11/4/2020

Figure 104 Unit Testing (Test)

96

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

13.1.4 Feedback Function (Pang Qi Hao Isaac)

System Name: Coding 101 E-Learning System

Test Unit: Feedback
Tester Name: Pang Qi Hao Isaac
Date Created: 27/3/2020
Date Review: 11/4/2020

Figure 105 Unit Testing (Feedback)

97

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

13.2 User Acceptance Testing

13.2.1 Project Objectives

13.2.2 List of Modules

98

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

14.0 Significant Source Code

For the E-Learning website, Coding 101 to be developed, PHP programming language was
used for the development of most of the functions. PHP is a server scripting language that is
used for make dynamic and also interactive web pages [CITATION w3s1 \l 1033 ]. One of
the main functions added in the website were the User Log In and Register Page, Feedback
Page, User Profile Page, Discussion Page, Test Page, Library Page along with the Admin
Page. The functions used were connected with the MYSQL online database server. The
software “ATOM” was used as the main source for the PHP coding along with HTML and
CSS. For this documentation, only the PHP codes will be discussed as they are the main
functions that help to power up the E-Learning website.

14.1 Connection String

First of all, the connection string is a php page that acts as a tool in helping other pages to
connect for data retrieving and receiving purposes. It helps to connect with MYSQL to store
and retrieve the data collected. The connecting string file is created and named as
“coding101conn”.php. The codes are shown as the figure Connection String below.

99

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 106 Connection String

It starts off with the <?php opening tag first on line 10. It is the opening component key in
order for the code to work. It also ends with the ?> closing tag on line 17. Next line stores a
variable called conn. It is written with a dollar sign first and then followed by the name. A
variable is a symbol or name that represents a value. They are used in storing numeric,
characters or string values in order for them to be used in a program [ CITATION w3r20 \l
1033 ]. The variable is then followed with a mysqli_connect() function. The
mysqli_connection() function helps the user to access MYSQL database servers [CITATION
w3s2 \l 1033 ]. It is then followed up a set of four items inside a parenthesis that is,
(“localhost”,”root”,””,”coding101”);. The first item “localhost” represents the local server
location, the next item “root” represents the username of the server, the third item””
represents the password used for the server while the last “coding101” value stands for the
name of the database that is used for the server connection. The line of code must end with a
semicolon tag as it helps to tell PHP that the line of code is finished and done modifying. If
the semicolon tag is not used, the overall code will not be executed and will be resulted in a
coding failure. The next line is represented by a set of IF ELSE conditions. There is a
mysqli_connect_errno() function added after the IF statement. The mysqli_connect_errno()
function helps to return the error code from the last happened connect call [CITATION php \l
1033 ]. It is followed by “echo” and a string of sentences. The echo function helps to call the
output. They are wrapped under a set of curly braces. The whole lines of code aims to check
the connection, it undergoes an IF statement to check if there is an error in the connection
part, if there is, it will echo out the message to notify the user. It is then closed with the ?>
closing tag. The connection string php file is saved and can be reused again as a connection

100

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

string. This will help to save time by not needing to rewrite the redundant connecting string
line codes in other php files.

101

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

14.2 MYSQL and WAMP

The connection string code links with the MYSQL online database server. Users must first
download the “WAMP”. The software WAMP is a tool that helps to link PHP and MYSQL
Database. WAMP provides a usable MYSQL server that is called PHPMYADMIN. Users
must first run the WAMP software first in order to make the MYSQL server online. The
PHPMYADMIN webpage is shown as figure PHPMYADMIN below.

Figure 107 PHPMYADMIN

After logging in, the users will be directed to a database webpage where they can create their
own tables. It is shown as figure PHPMYADMIN DATABASE below.

Figure 108 PHPMYADMIN DATABASE

102

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

14.3 Register

Next will be the user registration page, the connecting string as mentioned previously has to
be created first in order for the registration process to work. The code is shown as the figures
below.

Figure 109 Register 1

Figure 110 Register 2

103

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

104

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 111 Register 3

There are two register files being created, one is created and saved via .PHP called
Register.php and another is saved via .HTML called Register.html. The HTML file is the
design template layout and it stores the variable names needed for the PHP linkage. The PHP
file is the page that will handle the connectivity functions. Figure Register 1 shows the
HTML codes while Figure Register 2 and Register 3 shows the Register page’s PHP codes. In
Figure Register 1, the fields for the registration page has been created and declared, each of
them have different names in the <input type>. The input tag specifies an input field that
allows user to enter data [CITATION w3s3 \l 1033 ]. Next, on the php file, Figure Register 2
shows the “include (“../coding101conn.php”); code line. This line is called to enable the
connectivity through the connection string file. Next line shows the variables called for the
fields. It is followed by a mysqli_real_escape_string() function. This function escapes special
characters inside a string in an SQL query. It is used to create a SQL string that can be used in
an SQL statement [CITATION w3s4 \l 1033 ]. Inside the parenthesis includes the $conn
variable called from the connection string file. It is followed by a $_POST super global
variable. Super globals are built-in variables that are available in all scopes [CITATION w3s5
\l 1033 ]. The $_POST super global variable is used to collect form data after submitting a
form with the method “post” [CITATION w3s5 \l 1033 ]. The item brackets are followed up
after, the items are the names used previously in the HTML Input type field. The next line
$sqlcheck variable is called with an SQL function. The SELECT key is called to call out the
data from the database, in this case, it is calling for the user_email attribute from the users
table where the value is based on the $email variable. The next line shows a $resultc variable
being created with the $conn and $sqlcheck variables wrapped inside a parenthesis. It is
stored as a single variable to be used for the next line. The next line uses the
mysqli_num_rows() function. The function is used to return a number of rows present in the
result set [CITATION Rah \l 1033 ]. It is followed up by the $resultc variable with a greater
than 0 “ > “ value. It is to check if the data exists or not, if it does then it will echo out a
message. The window.history.go(-1) method is called to redirect the user back to the previous
page after clicking on the submit button, if failed. There is also a $password !=
$confirmpassword line of code that checks if the current typed password matches the
confirmed typed password field. This is for security purposes. On the last line at line 56, it
shows the mysqli_close() function. The function is called to close the connection. If the

105

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

connection is not closed, it will result in many errors. The php code is then closed with the ?>
closing tag.

106

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

14.4 Login

Next, the user login page is accessed after successfully creating an account. The code is
shown as figure Login below.

Figure 112 Login

Figure 113 Login 2

107

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

108

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 114 Login 3

It is created with two types of files as well similarly to the registration page. There is a
HTML file for the field and design layout along with a PHP file for the connectivity. The
HTML code is shown as Figure Login while the PHP code is shown as Figure Login 2 and
Login 3. The HTML file consists of the <input type> values similarly to the registration page.
They are used to link with the PHP page. In Figure Login 2 and 3 shows the php codes. It is
similar to the registration page, like every other page, it is started with the <?php opening tag
first and the “include “../coding101conn.php”; line. However, in between the two lines of
code, there is a session_start() function. The function starts a new session or continues an
existing session [ CITATION php20 \l 1033 ]. This is called as the user’s data needs to be
hold after they have successfully logged in. In line 19, the md5() function is called. The
function calculates the MD5 hash of a string [CITATION w3s6 \l 1033 ]. The function is
helps to encrpyt the user’s password into a set of random characters. This is a security
function that helps to prevent the breach of the password leaked from the database server. It is
shown as Figure Login 4 below.

Figure 115 Login 4

The following lines are quite straight forward and repeated, in line 36, the $row variable is
called with the mysqli_fetch_array() function. The function fetches a result row as an
associative array, a numeric array or even both [CITATION w3s7 \l 1033 ]. This function will
fetch the data from the database server, upon being followed up by the $result variable. The
next line shows the $_SESSION super global variables. The $_SESSION is a super global
variable that acts as a way to store information to be used across multiple pages [ CITATION
w3s20 \l 1033 ]. The variables are called with the $_SESSION super global variable instead
of the $_POST because the data is needed to be hold and carried out in the next page, after
the user has successfully login. The user will be directed to the home page after logging in,
the system checks if there are data being hold from the previous login page that are associated

109

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

with the database. If the data does not exist, it means that the user has not logged in but is
trying to access the page. The user will then be redirected back to the login page. The next
line in line 48 checks and validates the user with 2 types of roles. Every user will have a role
of 1 except the admin, who has a role of 0. This helps to differentiate and allows the system
to check if the user logging in is a normal user or an admin. The role of the admin is set as 0
because the admin user is created in the PHPMYADMIN database. Every user will have a
role of “1” when registered via the registration page. The line 60 shows a $sqlphoto variable
that selects the data from the photo table in the database. The $imageresult variable is called
with the mysqli_query function along with the $conn and $sqlphoto in the parenthesis to store
the fetched photo data. At line 64, the $row variable uses the mysqli_fetch_array() function
along with the $imageresult variable contained in the parenthesis to check if the picture data
are fetched. The data fetched are needed to display the user’s profile picture later at the User
Profile page section. The php code is then closed with the ?> closing tag.

110

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

14.5 Logout

When user clicks on the logout button, it will redirect the user back to the landing page. The
logout code is shown as Figure Logout below.

Figure 116 Logout

It starts off with the opening <?php tag and the session_start() tag. The session has to be
declared in every page after login page as it still holds the user’s data. In line 14, it will echo
a message when the user clicks on the logout button. After that, in line 16, the
session_destroy() function will kill the current session. It will remove the current data being
hold and reset the system. The next line has a window.location.href method followed with the
link of the landing page, that will redirect the user back to the landing page. The closing ?>
php tag is then called.

111

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

14.6 Feedback

Figure 117 Feedback

Based on the figure feedback above, the following code were used to insert the feedback user
gave into the database table. Include() were used to include code in coding101conn.php
which contain database connection to allow query to be executed[CITATION Placeholder2 \l
17417 ]. $sql were used to stores the query for inserted all the feedback info from the user
into the feedback table. Mysqli_query() was used to perform the sql query in line
9[CITATION Placeholder1 \l 17417 ]. From line 14 to 17 if the query failed to execute, it will
be terminated and show an error message. Mysqli_affected_rows() was used to get result
rows from the database[CITATION Placeholder4 \l 17417 ]. From line 25 to 28 if there are no
affected rows in feedback table in database, an alert message will pop out and tell user data is
not inserted and redirect user to previous table.

112

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

14.7 User Profile (Photo)

Figure 118 UP

The code shows for the user profile page’s upload picture section. It is shown as Figure UP
above. The following code was used to check if user has upload an image or no.
session_start() was used to start the session for the current user. Include() was used to retrieve
the code from coding101conn.php which contain connection string that allow database
connection[CITATION Placeholder2 \l 17417 ]. $target_dir stores the directory of the main
folder used to store the images while $target_file stores the directory of the main folder and
return the trailing name component of the path with basename, $_FILES was used to retrieve
the name of the file. $imageFileType contain pathinfo() which is used to return the
information about the file path, PATHINFO_EXTENSION was used to retrieve the extension
of the file. getImageSize() was used to get the size of the image uploaded in line 12. Since
getImageSize() can only function if the file is an valid image, from line 13 to 21 if the $check
which include the getImageSize() able to execute, an alert message will pop out and tell that
the file is an image. Else a different alert message will pop out tell that the file is not and
image and redirect user back to previous page.

113

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 119 UP2

Based on Figure UP2 above, the following code is used to check the extension type of the
file, move the image into the folder and insert the data into the database. From line 23 to 27 if
the image file extension is not JPG, JPEG, PNG or GIF file, an alert message will pop out tell
that only those file extension are allowed and redirect user back to the previous page. Inside
line 28, move_uploaded_file is used to move an uploaded file to $target_file that contain the
directory[ CITATION php202 \l 17417 ]. From line 28 to 34 if the uploaded file is not moved
to the targeted directory, an alert message will pop out and tells that the file was not able to
upload and redirect user to the previous page. Else a different alert message will pop out tells
that the file has been uploaded. $sql was used in line 36 to store query for inserting the
information of the photo into the photo table. Mysqli_query() was used to execute the query
in line 36. Line 41 to line 44 was used to check if query is executed or no[CITATION
Placeholder1 \l 17417 ]. If the query is able to execute, an alert message will pop out tell that
the picture has been updated and redirect user back to their profile page.

114

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Mysqli_affected_rows() was used to get the result rows from the table[CITATION
Placeholder4 \l 17417 ]. Line 51 to 57 was used to check if there are any rows affected after
the query executed.

115

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

14.8 Discussion
14.8.1 Create Thread

Figure 120 Create

Based on Figure Create above, the following code is used to record the thread information
into the thread table in database. Line 6 to line 20 were used to check if the passed variable is
not blank for the tittle and description ,insert the data into the thread table and check if the
data is being inserted into the table or no. isSet() was used to check if the variable is declared[
CITATION Mer20 \l 17417 ]. $q stores the query used to insert the thread data into the threat
table as well as mysqli_query for executing the query[CITATION Placeholder1 \l 17417 ].
Mysqli_affected_rows() was used to get the result of the rows from database
table[CITATION Placeholder4 \l 17417 ]. From line 13 to line 20 if there is no affected rows,
an alert message will pop out tells that the thread is not able to create and redirect user back
to previous page. Else a different alert message will pop out tells that the thread has been
created and posted and redirect user back to discussion page. Mysqli_close() was used to
close the database connection after finish using it[ CITATION w3r202 \l 17417 ].

Figure 121 Create 2

116

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Based on Figure Create 2 above, the following code was use to open connection, create a
search function inside the website. Include() was used to retrieve code from
coding101conn.php file which contain connection string that allow query to be able to
execute[CITATION Placeholder2 \l 17417 ]. In line 148, $sql was used to store the query to
perform the search function in website. An inner join was use between users table and thread
table to include the username of the thread creator since the threads table only has the user id
instead of the username. Mysqli_query was used to execute the query created in line
148[CITATION Placeholder6 \l 17417 ].

117

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

14.8.2 Read Thread

Figure 122 Read

Based on the Figure Read above, the following code was used[CITATION Placeholder2 \l
17417 ] to retrieve creator id and retrieve the detail of selected thread. $fid was used in line
141 to store the thread creator id. $sql was used to store query for getting thread information
based on the creator id. $sqlun was used to store query for getting the creator username, inner
join was used in the query since username is not store in thread table. From line 149 to 166 if
there is number of row retrieve after the query store in $sql was 0, an alert message will pop
out and tell something is wrong. Else output all the info which include the username the title
of the thread and the description. Include (“thread_viewreply.php”) was used to retrieve the
code from thread_viewreply.php file which contain the code needed to show the reply from
other users.

118

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

14.8.3 View Reply Thread

Figure 123 Reply

Based on the Figure Reply above, the following code was used to create a table. Include()
was used to retrieve code from coding101conn.php which contain the connection string that
allow query to execute[CITATION Placeholder2 \l 17417 ]. $sqlj was used to store the query
used for getting the username of the user who reply in the thread. $resultj was used to execute
the query that stored in $sqlj. From line 33 to 45 if the number of row retrieve after query has
been execute is 0, then an alert message will pop out said there is no replies yet. Else it will
output the table header for each column.

Figure 124 Reply 2

119

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Based on the Figure Reply 2 above, the following code is used to show the username with
their replies into the website. From line 17 to 20 if the number of rows retrieve after the query
that store in $resultj is 0 or lower than 0, then a alert message will pop out tells that
something is wrong, else do nothing. From line 22 to 37 while there are data retrieve after the
query stored in $resultj is execured, out put the username and the replies .

120

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

14.9 Test

Figure 125 Test

Based on Figure Test above, the following php codes were used to check if user logged in and
check the profile picture in database. Session_start() at line 46 were used to resume the
session of the existed session[ CITATION Vic10 \l 17417 ]. Line 49 to line 53 contain code
that prevent users to directly access following page unless has logged in. Isset() is used to
determine if session_start(‘name’) existed of no. An alert message will pop out that tell user
to login first to proceed and sent user back to login page. Line 57 code is used to include the
code in coding101conn.php which contain the connection of the database. Line 61 to line 68
were used to display users profile picture, $img stores the default user image address. Line 63
to line 65 codes were use to check the image address in the database, mysqli_query were use
to performed the query written in line 63[CITATION Placeholder1 \l 17417 ], and
mysqli_fetch_array were used to fetch the result row in line 64[CITATION w3s191 \l
17417 ]. Line 67 to 68 is used to check whether the user has uploaded a profile picture before

121

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

and show the uploaded profile picture instead of the default picture. File_exists were used to
check if the directory exist and $img will replace the old directory if its exists[ CITATION
Shu20 \l 17417 ]. In Addition, <?php echo $img;?> and <?php echo ($_SESSION['name']); ?
> were used to display the profile picture and username.

Figure 126 Test 2

Based on Figure Test 2 above, the following php code were create by to verify if user already
taken the test. Include() were used in line 59 to include codes in coding101conn.php which
contain the database connection that allow query to be able to execute[CITATION
Placeholder2 \l 17417 ]. Line 61 to 67 were used to check if user has taken the test or no.
$sqljava in line 61 stores a query which is used to check users java test result. Mysqli_query()
were used in line 62 to use to perform the query in line 61[CITATION Placeholder1 \l
17417 ]. Mysqli_fetch_array was used in line 64 to fetch the result from the query performed,
an alert message will pop out and tell user has already taken the test and redirect user to
previous page if java test result were found in the database[ CITATION w3s191 \l 17417 ]
[CITATION Placeholder3 \l 17417 ].

Figure 127 Test 3

122

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

123

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Based on Figure Test 3 above, the following php code were create by to verify if user already
taken the test. Include() were used in line 59 to include codes in coding101conn.php which
contain the database connection that allow query to be able to execute[CITATION
Placeholder2 \l 17417 ]. Line 61 to 67 were used to check if user has taken the test or no.
$sqljava in line 61 stores a query which is used to check users java test result. Mysqli_query()
were used in line 62 to use to perform the query in line 61[CITATION Placeholder1 \l
17417 ]. Mysqli_fetch_array was used in line 64 to fetch the result from the query performed,
an alert message will pop out and tell user has already taken the test and redirect user to
previous page if java test result were found in the database[ CITATION w3s191 \l 17417 ]
[CITATION Placeholder3 \l 17417 ].

Figure 128 Test 4

Based on Figure Test 4 above, this following php code were created to check users’ answers,
give user the result and store it into the database table. Include() were used in line 7 to
include codes in coding101conn.php which contain the database connection that allow query
to be execute[CITATION Placeholder2 \l 17417 ]. Line 9 to line 23 were used to collect user
result on the test. $a were used to store result, result will be set to 0 before checking each of
the question as shown in line 9. $_POST[] were used to pass the variable from the previous
page which in this case is the answer user picked[CITATION Placeholder3 \l 17417 ]. From

124

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

line 11 to line 16, if the answer user picked is A, then $a will be $a++ which will become 1 or
else $a will remain 0. It will then check for question two until the last question.

Figure 129 Test 5

Based on Figure Test 5 above, after all the question is checked, line 53 to line 55 will be used
to insert the data into the database. $sql stores the query used to insert the data into javatest
table with its corresponding value. Mysqli_query() was used to perform the query in line
53[CITATION Placeholder1 \l 17417 ]. From line 58 to 6 if the query failed to execute, it will
be terminated and display a message as shown in line 60 using die(). Echo() was use in both
line 63 and 66 to output the alert message. Mysqli_affected_rows() was use to get result rows
in the database[CITATION Placeholder4 \l 17417 ]. From line 70 to line 73 if there are no
rows added in the database, an alert message will pop out tell user unable to insert data and
direct user to previous page. Mysqli_close() were used to close the database connection in
line 74 which is the last line of code in TEST_JAVAFORM.php[ CITATION w3r202 \l 17417
].

125

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

14.10 Library

Figure 130 Library

Based on Figure Library above, the following code were used to create a search keyword
function, to retrieve data from library table in database to put it into a table. Include() was
used to get code from coding101conn.php which contain database connection that allow
query to be execute[CITATION Placeholder2 \l 17417 ]. $search_key were used to store the
keyword users type in which is passed using $_POST. From line 135 to 140 if the
$search_key contain nothing, then do nothing else also do nothing. $sql stores the query that
is used to perform search function on the book name in library table. Mysqli_query were used
to execute the query that is being stored in $sql[CITATION Placeholder1 \l 17417 ]. $sqlimg
were used to store the query used to find book image from library table. Mysqli_query was
used in line 147 to execute the query stored in $sqlimg[CITATION Placeholder1 \l 17417 ].
Mysqli_fetch_array were used in line 148 to get the result from the query performed in
$resultimg[ CITATION w3s191 \l 17417 ][ CITATION Rah20 \l 17417 ]. $path were used to
store the directory of the book image.

126

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 131 Library 2

Based on Figure Library 2 above, the following code were used to check affected rows and
build a table in the web side. Mysqli_num_rows() were used to get the number of rows in the
$result which is the query performed previously in line 144[ CITATION Rah20 \l 17417 ]
[CITATION Placeholder5 \l 17417 ]. From line 151 to 166 if the numbers of rows are 0, alert
message will appear telling there are no result. Else it will output the table header of each
row.

Figure 132 Library 3

Based on Figure Library 3 above, the following code were used to put the data from database
table into the website’s table. While() were used to fetch the result repeatedly from the query

127

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

performed[CITATION Placeholder5 \l 17417 ]. From line 168 to 185 while there are result
from the query performed, output all the result into the table on the website.

128

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

14.11 Admin Page (User Database)

The admin page allows the admin to view the database of the users. Only the Admin can
access the admin page, the system checks the type of user via the role based line code as
mentioned early before. The codes for the tests, photo, feedback, thread and replies table will
not be discussed in this documentation as it is similar to the user’s database. The code for the
user database page is shown as the figures below.

Figure 133 Admin User

129

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

130

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 134 Admin User 2

Based on Figure Admin User above, a search bar template is created on line 79. It uses the
$_POST super global variable as the method and is named “search_key”. On line 87, it shows
the search key function that allow the admin to filter out results. The $search_key variable is
declared with the isset() function. The isset function helps to identify if the variable declared
and is different than null [ CITATION php201 \l 17417 ]. The function is followed up with
the $_POST super global variable along with the name of the search key that was declared
earlier. The next line shows a $sql variable being declared. It uses the SQL Select statement
to filter out the results based on the users table with the user_first_name field. This will filter
out the results after the admin has successfully typed the desired data and clicks on the
“search” button. The next following lines are similar to what was discussed earlier. The
$result variable is declared along with an IF condition. If the results are not found, it will
occur a message and not build the table, else it will build a table as shown in line 101 to 112
using the html <table> tag. The next line will fetch the data from the database into the created
table. It uses the $rows variable along with the while loop to represent. On line 124 and 125,
there is a hyperlink tag that uses the <a href> tag followed by the link of the webpage. This
means that it will direct the admin to the following pages after the admin has successfully
clicked on the buttons. This will be further discussed later on.

131

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

14.11.1 Delete Data

The delete function continues from the user database’s page when the admin clicks on the
delete button. Every database page has a delete button as well. The code is shown as figure
Delete below.

Figure 135 Delete

Based on the Figure Delete above, the lines from 10 to 29 were discussed earlier, thus it will
not be explained again. On line 34, the $id variable is declared along with the intval()
function. The function returns the integer value of the variable [ CITATION w3s201 \l
17417 ]. It will convert any variables into a integer value. In this case, it will receive the id
based on the user’s table. It is followed up with a $_GET super global variable first. The
$_GET super global variable is similarly to the $_POST super global variable as mentioned
earlier. It will then declare a $sql variable with the SQL DELETE statement based on the
users table on the condition where the user_id is equal to the $id variable. It will then run a

132

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

condition to check if the rows were fully deleted or not. If it is not, then it will echo out a
message and redirect the admin back to the same page. If it is deleted, then it will delete the
data based on the user ID selected and echo out a message along with redirecting the admin
back to the same database page.

133

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

14.11.2 Edit Data (Users)

The edit function continues from the user database’s page when the admin clicks on the edit
button. The code is shown as the figures below.

Figure 136 Edit 1

Figure 137 Edit 2

134

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Based on Figure Edit 1, it is similar to the previous code. On line 41, the $result variable is
declared and undergo the IF condition with the $rows variable. If it the data exists, then it
will create a form using the <form> tag, a table using the <table> tag and a set of fields
known as the user’s ID, name, last name, emaill address, password and gender using the
<input> tag. In each input tag line, there is a <?php echo $rows[ ]?> line for the attributes,
except for the user id attribute, that is using the <?php echo $uid;?> line. These lines help to
call out and fetch the previous held data, so that the admin can see the data in the edit form
page. There is an submit button with the input type submit. This input type will create a
button. The name of the button is called as “Update” via the value. Upon clicking on the
button, it will direct the admin to the update_user.php page. In line 38, the form is created
along with the form action added that links the admin to the update page after clicking on the
update button. The edit page acts as a template for the admin to enter the data to be modified
while the update page will be the main function that modifies the data in the database. The
update page will be discussed after this.

135

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

14.11.3 Update Data (Users)

The update function continues after the edit page. The code is shown as figure Update below.

Figure 138 Update

Bassed on the Figure Update above, the variables are declared on line 35 to 40. It uses the
passed names from the edit page. A $_POST super global variable is declared first. On line
43, the $sql variable is then declared with the SQL UPDATE statement to update the users
table along with the SET method. This will change the previous database data to the newly
modified data fetched from the edit page. Again, on line 53, the IF statement is called to
check whether the data has been successfully updated or not. If it has been successful, then it
will echo out a message and redirect the admin back to the user database page. If it fails, then
it will echo out a message and redirect the admin back to the edit page.

136

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

14.11.4 Add Data (Library)

Next, the library database page allows the admin to view and delete the current data, similarly
to the users and other databases. However, the library database page also has a button that
allows the admin to upload new books into the database and website. The code is shown as
the figures below.

Figure 139 Library 1

Figure 140 Library 2

137

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 141 Library 3

The figure Library 1 shows the form template that is similar to the previous edit page while
the figures Library 2 and Library 3 performs the function. In figure Library 1, the form is
created with a form action that links to the update page that is known as “add_library2”. A
field of input types tags are created with unique names that will link with the update page
later. Figure library 2 and library 3 shows the code function that will be used to store the
newly added books into the database. In the beginning at line 4, there is a $target_dir variable
declared with the “upload” statement. It means that it will store the images into the folder
called “upload”. This is needed as the admin is able to upload pictures for the library section.
The next few lines perform the similar functions that were mentioned earlier. Line 4 to 28
discusses entirely on the photo function. On line 8, a $check variable will be declared to be
placed in an IF Else condition. It is to check if the uploaded item is a picture format or not.
After the admin uploads a picture and clicks on the submit button, the system will check if it
is an image or not. If the item is an image, it carries on to line 19. If the item is not an image,
a message will be echoed out and the admin will be redirected to the same page. On line 19, it
checks to see if the uploaded image consists of one of the given image formats. If the
uploaded image format does not belong to any one of the mentioned formats, a message will
be echoed out and wont allow the admin to proceed. Next, on line 24, it will go through
another validation process based on the earlier declared variables. If it fails, then it will not
allow the admin to proceed. However, if all the validations are done and there is no error, the
code will continue at line 32. A $sql variable will be declared with the SQL INSERT
statement to insert the data into the library table. It will insert the previous newly added data
into the previously declared name fields. The $_POST super global variable is declared
before putting in the name fields. The next few lines will undergo an IF statement to check if
there is an error with the insert function linkage with the database. If there are errors, it will
echo out a message and it will not allow the admin to proceed. However, if there are no
errors, it will echo out a message and redirect the admin back to the library database page.
The admin can now view the newly added book data at the library database page.
138

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

15.0 Conclusion

In conclusion, the E-Learning System website Coding 101 includes one of the main
functions that are needed by most of the students in the real world. Most students are not able
to get access to quality course slides, well detailed tutorial questions or even videos on the
understanding of the courses. They are also not able to ask questions due to many factors
such as mental disorders, shyness, lack of opportunity, inability to reach out and many more.
Most students are also not able to get their hands on library books or free accessible E-books
online. With the establishment of the E-Learning System website, Coding 101 aims to help
students curb the obstacles and limitations by providing them the needed resources and
services. In the future, Coding 101 hopes to be more well-known and to be able to expand
their services to assist many more in need.

139

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

16.0 References
Banerjee, S., 2020. PHP | file_exists( ) Function. [Online]
Available at: https://www.geeksforgeeks.org/php-file_exists-function/
[Accessed 14 April 2020].
Chan, A., 2015. High cost of varsity degree. [Online]
Available at: https://www.thestar.com.my/news/nation/2015/10/27/high-cost-of-varsity-
degree-malaysia-fifth-most-expensive-place-to-get-tertiary-education/
Daniel, E., 2018. The rising cost of higher education. [Online]
Available at: https://www.nst.com.my/education/2018/01/320953/rising-cost-higher-
education
Lewis, S., 2007. Definition: Waterfall Model. [Online]
Available at: https://searchsoftwarequality.techtarget.com/definition/waterfall-model
[Accessed 2 April 2020].
MerlynShelley, 2020. isset() Function. [Online]
Available at: https://www.geeksforgeeks.org/why-to-check-both-isset-and-empty-function-in-
php/
[Accessed 14 April 2020].
Murad, D., 2019. Feature: Malaysian salaries are insufficient. [Online]
Available at: https://www.thestar.com.my/news/nation/2019/11/03/malaysian-salaries-are-
insufficient
Nicollet, V., 2010. PHP session_start(). [Online]
Available at: https://stackoverflow.com/questions/4015729/php-session-start
[Accessed 14 April 2020].
php, 2020. $_POST. [Online]
Available at: https://www.php.net/manual/en/reserved.variables.post.php
[Accessed 14 April 2020].
php, 2020. isset. [Online]
Available at: https://www.php.net/manual/en/function.isset.php
php, 2020. move_uploaded_file. [Online]
Available at: https://www.php.net/manual/en/function.move-uploaded-file.php
[Accessed 14 April 2020].
php, 2020. mysqli::$connect_errno. [Online]
Available at: https://www.php.net/manual/en/mysqli.connect-errno.php

140

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

php, 2020. session_start. [Online]

Available at: https://www.php.net/manual/en/function.session-start.php
php, 2020. while. [Online]
Available at: https://www.php.net/manual/en/control-structures.while.php#control-
structures.while
[Accessed 14 April 2020].
Powell-Morse, A., 2016. Waterfall Model: What Is It and When Should You Use It?. [Online]
Available at: https://airbrake.io/blog/sdlc/waterfall-model
[Accessed 2 April 2020].
ProjectManager.com, 2019. Waterfall Methodology in Project Management. [Online]
Available at: https://www.projectmanager.com/software/use-cases/waterfall-methodology
[Accessed 2 April 2020].
RahulUniyal, 2020. PHP | mysqli_num_rows() Function. [Online]
Available at: https://www.geeksforgeeks.org/php-mysqli_num_rows-function/
RahulUniyal, 2020. PHP | mysqli_num_rows() Function. [Online]
Available at: https://www.geeksforgeeks.org/php-mysqli_num_rows-function/
[Accessed 14 April 2020].
Sharma, L., 2016. WaterFall Model. [Online]
Available at: https://www.toolsqa.com/software-testing/waterfall-model/
[Accessed 2 April 2020].
w3resource, 2020. PHP mysqli: affected_rows() function. [Online]
Available at: https://www.w3resource.com/php/function-reference/mysqli_affected_rows.php
[Accessed 14 April 2020].
w3resource, 2020. PHP mysqli: close() function. [Online]
Available at: https://www.w3resource.com/php/function-reference/mysqli_close.php
[Accessed 14 April 2020].
w3resource, 2020. PHP mysqli: connect_error() function. [Online]
Available at: https://www.w3resource.com/php/function-reference/mysqli_connect_error.php
w3resource, 2020. PHP mysqli: query() function. [Online]
Available at: https://www.w3resource.com/php/function-reference/mysqli_query.php
[Accessed 14 April 2020].
w3resource, 2020. PHP variables. [Online]
Available at: https://www.w3resource.com/php/variables/declaring-php-variables.php

141

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

w3schools, 2020. HTML <input> Tag. [Online]

Available at: https://www.w3schools.com/tags/tag_input.asp
w3schools, 2020. PHP intval() Function. [Online]
Available at: https://www.w3schools.com/php/func_var_intval.asp
w3schools, 2020. PHP md5() Function. [Online]
Available at: https://www.w3schools.com/pHP/func_string_md5.asp
w3schools, 2020. PHP mysqli fetch_array() Function. [Online]
Available at: https://www.w3schools.com/pHP/func_mysqli_fetch_array.asp
w3schools, 2020. PHP MySQLi Functions. [Online]
Available at: https://www.w3schools.com/pHP/php_ref_mysqli.asp
w3schools, 2020. PHP mysqli real_escape_string() Function. [Online]
Available at: https://www.w3schools.com/php/func_mysqli_real_escape_string.asp
w3schools, 2020. PHP mysqli_fetch_array() Function. [Online]
Available at: https://www.w3schools.com/php/func_mysqli_fetch_array.asp
[Accessed 14 April 2020].
w3schools, 2020. PHP Sessions. [Online]
Available at: https://www.w3schools.com/php/php_sessions.asp
w3schools, 2020. PHP Superglobal - $_POST. [Online]
Available at: https://www.w3schools.com/php/php_superglobals_post.asp
w3schools, 2020. PHP Tutorial. [Online]
Available at: https://www.w3schools.com/php/
w3shcool, 2020. PHP Include Files. [Online]
Available at: https://www.w3schools.com/php/php_includes.asp
[Accessed 14 April 2020].
w3source, 2020. PHP mysqli: query() function. [Online]
Available at: https://www.w3resource.com/php/function-reference/mysqli_query.php
[Accessed 14 April 2020].

142

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

17.0 Appendix
17.1 Installation Guide

How to install and use WampServer:

1. Firstly, go to https://sourceforge.net/projects/wampserver/. It is shown as Figure
Wamp 1 below.

Figure 142 Wamp 1

2. Download WampServer installer using the download button. It is shown as Figure

Wamp 2 below.

143

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 143 Wamp 2

3. Click on the installer launcher to install WampServer on your device. Make sure to
accept the terms and conditions and also set the directory for WampServer to be
stored in. It is shown as Figure Wamp 3 below.

Figure 144 Wamp 3

4. Search up WampServer on your search bar and then launch WampServer. A command
prompt will briefly appear upon clicking it. Wait until it disappears before executing
the next step. It is shown as Figure Wamp 4 below.

Figure 145 Wamp 4

5. A “W” icon will appear on the sidebars, it should turn red then orange then green. If it
remains at red or orange, check for potential errors that may had caused the
application to malfunction. It is shown as Figure Wamp 5 below.

144

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 146 Wamp 5

6. Once the icon turns green, click the icon to have access to the WampServer menu. It is
shown as Figure Wamp 6 below.

Figure 147 Wamp 6

7. Click on www directory to store your projects. It is shown as Figure Wamp 7 below.

Figure 148 Wamp 7

8. Click on localhost directly to select your file and open it. It is shown as Figure Wamp
8 below.

Figure 149 Wamp 8

9. Click on phpMyAdmin to access the database. It is shown as Figure Wamp 9 below.

Figure 150 Wamp 9

10. Enter your Username and Password, this will be the username and password you use
to access your database. It is shown as Figure Wamp 10 below.

145

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Figure 151 Wamp 10

11. On the top left corner, click on the New button to create a new database. It is shown
as Figure Wamp 11 below.

Figure 152 Wamp 11

12. Name the new database and the language used by the database. Usually,
latin1_swedish_ci is used in order to support more characters. It is shown as Figure
Wamp 12 below.

Figure 153 Wamp 12

146

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

13. Create a new table for the database. Enter the name and the number of columns (can
be changed later) for the database. It is shown as Figure Wamp 13 below.

Figure 154 Wamp 13

14. Enter for each row the name of the row, the type of data, the length or values, the
default values, collations, attributes, whether null values are allowed, the index of the
row (primary, unique etc.) and auto-increments of the database and save it.

15. Finally, to use this database in the website, link it to localhost, use php and type
mysqli_connect("localhost","Username","Password","DatabaseName").

147

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

17.2 Weekly Progress Reports

Progress Report
Meeting No.: 1
Week: 1
Date of Meeting: 17/1/2020
Start Time: 10:35am
End Time: 12:35pm
Meeting Venue: APU Classroom

Group Members
Present: Absent:
Tan Ming Wei
Tan Kim Chuan
Lim Wei Hern
Pang Qi Hao Isaac

Report
No Agenda Progress Decision Person- Due date
. (Action and in-
Suggested/Decided Charge
by)
1 Forming Complete Tan Ming Wei Tan Ming 17/1/2020
a Tan Kim Chuan Wei
complete Lim Wei Hern
group of Pang Qi Hao Isaac
4

2 Deciding Complete Tan Ming Wei Tan Ming 17/1/2020

topic for Tan Kim Chuan Wei
project Lim Wei Hern
Pang Qi Hao Isaac
3 Assignin Complete Tan Ming Wei Tan Ming 28/1/2020
g parts Tan Kim Chuan Wei
for Lim Wei Hern
proposal Pang Qi Hao Isaac
draft

Next Meeting
Date of Meeting: 24/1/2020
Start Time: 10:35am
Meeting Venue: APU Classroom

Minutes taker / Prepared by

148

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Name: Tan Ming Wei Signature: Tan

Approved by
Lecturer Signature:
Dr. Nurul Husna Binti Mohd Saad

149

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Progress Report
Meeting No.: 2
Week: 2
Date of Meeting: 24/1/2020
Start Time: 10:35am
End Time: 12:35pm
Meeting Venue: APU Classroom

Group Members
Present: Absent:
Tan Ming Wei
Tan Kim Chuan
Lim Wei Hern
Pang Qi Hao Isaac

Report
No Agenda Progress Decision Person- Due date
. (Action and in-
Suggested/Decided Charge
by)
1 Compiling Complete Tan Ming Wei Tan 28/1/2020
proposal Ming
draft parts Wei
on 23rd Jan
2020
2 Fixing Complete Tan Ming Wei Tan 28/1/2020
correction Tan Kim Chuan Ming
s Lim Wei Hern Wei
according Pang Qi Hao Isaac
to format
and
lecturer’s
feedback
3 Submitted Complete Tan Ming Wei Tan 28/1/2020
proposal Ming
draft on Wei
rd
23 Jan
2020
4 Assigning Complete an Ming Wei Tan 7/2/2020
parts for Ming
finalized Wei
proposal
document

Next Meeting

150

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Date of Meeting: 31/1/2020

Start Time: 10:35am
Meeting Venue: APU Classroom

Minutes taker / Prepared by

Name: Tan Ming Wei Signature: Tan

Approved by
Lecturer Signature:
Dr. Nurul Husna Binti Mohd Saad

151

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Progress Report
Meeting No.: 3
Week: 3
Date of Meeting: 31/1/2020
Start Time: 10:35am
End Time: 12:35pm
Meeting Venue: APU Classroom

Group Members
Present: Absent:
Tan Ming Wei
Tan Kim Chuan
Lim Wei Hern
Pang Qi Hao Isaac

Report
No Agenda Progress Decision Person- Due date
. (Action and in-
Suggested/Decided Charge
by)
1 Compiling Complete Tan Ming Wei Tan 7/2/2020
parts for Ming
proposal Wei
document

2 Fixing Complete Tan Ming Wei Tan 7/2/2020

correction Tan Kim Chuan Ming
s on Lim Wei Hern Wei
proposal Pang Qi Hao Isaac
based on
lecturer’s
feedback
3 Discussing Complete Tan Ming Wei Tan
further Tan Kim Chuan Ming
plans for Lim Wei Hern Wei
website Pang Qi Hao Isaac

Next Meeting
Date of Meeting: 7/2/2020
Start Time: 10:35am
Meeting Venue: APU Classroom

Minutes taker / Prepared by

Name: Tan Ming Wei Signature: Tan

152

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Approved by
Lecturer Signature:
Dr. Nurul Husna Binti Mohd Saad

153

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Progress Report
Meeting No.: 4
Week: 4
Date of Meeting: 7/2/2020
Start Time: 10:35am
End Time: 12:35pm
Meeting Venue: APU Classroom

Group Members
Present: Absent:
Tan Ming Wei
Tan Kim Chuan
Lim Wei Hern
Pang Qi Hao Isaac

Report
No Agenda Progress Decision Person- Due date
. (Action and in-
Suggested/Decided Charge
by)
1 Submittin Complete Tan Ming Wei Tan 7/2/2020
g complete Ming
proposal Wei

2 Planning Complete Tan Ming Wei Tan 7/2/2020

and Tan Kim Chuan Ming
receiving Lim Wei Hern Wei
guides Pang Qi Hao Isaac
regarding
ERD
tables,
context
diagrams
and
flowchart
for
website

Next Meeting
Date of Meeting: 14/2/2020
Start Time: 10:35am
Meeting Venue: APU Classroom

Minutes taker / Prepared by

154

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Name: Tan Ming Wei Signature: Tan

Approved by
Lecturer Signature:
Dr. Nurul Husna Binti Mohd Saad

155

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Progress Report
Meeting No.: 5
Week: 5
Date of Meeting: 14/2/2020
Start Time: 10:35am
End Time: 12:35pm
Meeting Venue: APU Classroom

Group Members
Present: Absent:
Tan Ming Wei
Tan Kim Chuan
Lim Wei Hern
Pang Qi Hao Isaac

Report
No Agenda Progress Decision Person- Due date
. (Action and in-
Suggested/Decided Charge
by)
1 Planning Complete Tan Ming Wei Tan 14/2/2020
and Tan Kim Chuan Ming
allocating Lim Wei Hern Wei
appropriate Pang Qi Hao Isaac
ERD tables
needed for
system.
2 Initial start Complete Tan Ming Wei Tan 14/2/2020
on planning Tan Kim Chuan Ming
context Lim Wei Hern Wei
diagram Pang Qi Hao Isaac
and DFD
level 0.
3 Identifying Complete Tan Ming Wei Tan 14/2/2020
needed Tan Kim Chuan Ming
software Lim Wei Hern Wei
and Pang Qi Hao Isaac
templates
for website
system
4 Allocating Complete Tan Ming Wei Tan 14/2/2020
individual Tan Kim Chuan Ming
component Lim Wei Hern Wei
s to group Pang Qi Hao Isaac

156

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Next Meeting
Date of Meeting: 21/2/2020
Start Time: 10:35am
Meeting Venue: APU Classroom

Minutes taker / Prepared by

Name: Tan Ming Wei Signature: Tan

Approved by
Lecturer Signature:
Dr. Nurul Husna Binti Mohd Saad

157

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Progress Report
Meeting No.: 6
Week: 7
Date of Meeting: 28/2/2020
Start Time: 10:35am
End Time: 12:35pm
Meeting Venue: APU Classroom

Group Members
Present: Absent:
Tan Ming Wei
Tan Kim Chuan
Lim Wei Hern
Pang Qi Hao Isaac

Report
No Agenda Progress Decision Person- Due date
. (Action and in-
Suggested/Decided Charge
by)
1 Implementin Complete Tan Ming Wei Tan 27/2/2020
g correction Tan Kim Chuan Ming
on group Lim Wei Hern Wei
component Pang Qi Hao Isaac
tasks
(ERD,
Context
Diagram &
DFD Level
0)
2 Begin On-Going Tan Ming Wei Tan 27/3/2020
website Tan Kim Chuan Ming
coding Lim Wei Hern Wei
Pang Qi Hao Isaac

Next Meeting
Date of Meeting: 13/3/2020
Start Time: 10:35am
Meeting Venue: APU Classroom

Minutes taker / Prepared by

Name: Tan Ming Wei Signature: Tan

Approved by

158

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Lecturer Signature:
Dr. Nurul Husna Binti Mohd Saad

159

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Progress Report
Meeting No.: 7
Week: 8
Date of Meeting: 12/3/2020
Start Time: 12:00pm
End Time: 3:30pm
Meeting Venue: APU Classroom

Group Members
Present: Absent:
Tan Ming Wei
Tan Kim Chuan
Lim Wei Hern
Pang Qi Hao Isaac

Report
No Agenda Progress Decision Person- Due date
. (Action and in-
Suggested/Decided Charge
by)
1 Finalizing Complete Tan Ming Wei Tan 13/3/2020
Context Tan Kim Chuan Ming
Diagram Lim Wei Hern Wei
Pang Qi Hao Isaac

2 Complete Home Complete Tan Ming Wei Tan 13/3/2020

Page & Landing Tan Kim Chuan Ming
Page Coding Lim Wei Hern Wei
Implementation Pang Qi Hao Isaac
s
3 Begin portal On-Going Tan Ming Wei Tan 27/3/2020
coding Lim Wei Hern Ming
Wei

Next Meeting
Date of Meeting: 20/3/2020
Start Time: 10:35am
Meeting Venue: APU Classroom

Minutes taker / Prepared by

Name: Tan Ming Wei Signature: Tan

160

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Approved by
Lecturer Signature:
Dr. Nurul Husna Binti Mohd Saad

161

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Progress Report
Meeting No.: 8
Week: 9
Date of Meeting: 20/3/2020
Start Time: 10:35am
End Time: 12:35am
Meeting Venue: Online (WhatsApp)

Group Members
Present: Absent:
Tan Ming Wei
Tan Kim Chuan
Lim Wei Hern
Pang Qi Hao Isaac

Report
No Agenda Progress Decision Person- Due date
. (Action and in-
Suggested/Decided Charge
by)
1 Start discussing Complete Tan Ming Wei Tan 1/4/2020
on individual Tan Kim Chuan Ming
components Lim Wei Hern Wei
Pang Qi Hao Isaac

2 Continue On-Going Tan Ming Wei Tan 27/3/2020

website coding Lim Wei Hern Ming
Wei
Lim Wei
Hern

Next Meeting
Date of Meeting: 27/3/2020
Start Time: 10:35am
Meeting Venue: Online (WhatsApp)

Minutes taker / Prepared by

Name: Tan Ming Wei Signature: Tan

Approved by
Lecturer Signature:
Dr. Nurul Husna Binti Mohd Saad

162

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

163

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Progress Report
Meeting No.: 9
Week: 10
Date of Meeting: 27/3/2020
Start Time: 10:35am
End Time: 12:35am
Meeting Venue: Online (WhatsApp)

Group Members
Present: Absent:
Tan Ming Wei
Tan Kim Chuan
Lim Wei Hern
Pang Qi Hao Isaac

Report
No Agenda Progress Decision Person- Due date
. (Action and in-
Suggested/Decided Charge
by)
1 Finalizing Complete Tan Ming Wei Tan 27/3/2020
website coding Lim Wei Hern Ming
Wei
Lim Wei
Hern
2 Start on Code On-Going Tan Ming Wei Tan 19/4/2020
snipping & Lim Wei Hern Ming
User manual Wei
Lim Wei
Hern

Next Meeting
Date of Meeting: 3/4/2020
Start Time: 10:35am
Meeting Venue: Online (WhatsApp)

Minutes taker / Prepared by

Name: Tan Ming Wei Signature: Tan

Approved by
Lecturer Signature:
Dr. Nurul Husna Binti Mohd Saad

164

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

165

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Progress Report
Meeting No.: 10
Week: 11
Date of Meeting: 3/4/2020
Start Time: 10:35am
End Time: 12:35am
Meeting Venue: Online (WhatsApp)

Group Members
Present: Absent:
Tan Ming Wei
Tan Kim Chuan
Lim Wei Hern
Pang Qi Hao Isaac

Report
No Agenda Progress Decision Person- Due date
. (Action and in-
Suggested/Decided Charge
by)
1 Progress on On-Going Tan Ming Wei Tan 19/4/2020
code snipping Lim Wei Hern Ming
& user manual Wei
Lim Wei
Hern

2 Fix on previous On-Going Tan Ming Wei Tan 19/4/2020

parts Ming
Wei

Next Meeting
Date of Meeting: 10/4/2020
Start Time: 10:35am
Meeting Venue: Online (WhatsApp)

Minutes taker / Prepared by

Name: Tan Ming Wei Signature: Tan

Approved by

166

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Lecturer Signature:
Dr. Nurul Husna Binti Mohd Saad

167

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Progress Report
Meeting No.: 11
Week: 12
Date of Meeting: 10/4/2020
Start Time: 10:35am
End Time: 12:35am
Meeting Venue: Online (WhatsApp)

Group Members
Present: Absent:
Tan Ming Wei
Tan Kim Chuan
Lim Wei Hern
Pang Qi Hao Isaac

Report
No Agenda Progress Decision Person- Due date
. (Action and in-Charge
Suggested/Decided
by)
1 Complete code Complete Tan Ming Wei Tan Ming 19/4/2020
snipping & Lim Wei Hern Wei
user manual Lim Wei
Hern

2 Fix on On-Going Tan Ming Wei Tan Ming 19/4/2020

previous parts Wei

3 Preparing On-Going Tan Ming Wei Everybod 19/4/2020

document y
finalization

Next Meeting
Date of Meeting: 16/4/2020
Start Time: 12:00pm
Meeting Venue: Online (WhatsApp)

Minutes taker / Prepared by

Name: Tan Ming Wei Signature: Tan

168

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Approved by
Lecturer Signature:
Dr. Nurul Husna Binti Mohd Saad

169

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Progress Report
Meeting No.: 12
Week: 13
Date of Meeting: 16/4/2020
Start Time: 12:00pm
End Time: 1:00pm
Meeting Venue: Online (WhatsApp)

Group Members
Present: Absent:
Tan Ming Wei
Tan Kim Chuan
Lim Wei Hern
Pang Qi Hao Isaac

Report
No Agenda Progress Decision Person- Due date
. (Action and in-Charge
Suggested/Decided
by)
1 Finalizing Complete Tan Ming Wei Everybod 19/4/2020
previous parts Lim Wei Hern y
correction

2 Discussion on On-Going Tan Ming Wei Everybod 19/4/2020

individual y
parts with
lecturer

3 Preparing Complete Tan Ming Wei Everybod 19/4/2020

document y
finalization

4 Double On-Going Tan Ming Wei Tan Ming 19/4/2020

checking on Wei
final document

Minutes taker / Prepared by

Name: Tan Ming Wei Signature: Tan

170

Downloaded by Roger ([email protected])

 lOMoARcPSD|20777611

Asia Pacific University AAPP006-4-2-SDP Software Development Project

Approved by
Lecturer Signature:
Dr. Nurul Husna Binti Mohd Saad

171

Downloaded by Roger ([email protected])