PSM Thesis Cb18107

E-LEARNING MANDARIN WEB-BASED
SYSTEM
AYUNI NAFISYA BINTI ABU BAKAR
BACHELOR OF COMPUTER SCIENCE

(SOFTWARE ENGINEERING)
WITH HONOURS
UNIVERSITI MALAYSIA PAHANG

DECLARATION OF THESIS AND COPYRIGHT
Author’s Full Name : _ AYUNI NAFISYA BINTI ABU BAKAR

Date of Birth : _20TH OCTOBER 1999
Title :
E-LEARNING MANDARIN WEB-BASED SYSTEM
Academic Session :
2020/202
I declare that this thesis is classified as:
 CONFIDENTIAL (Contains confidential information under the Official

Secret Act 1997)*
 RESTRICTED (Contains restricted information as specified by the
organization where research was done)*
 OPEN ACCESS I agree that my thesis to be published as online open access
(Full Text)
I acknowledge that Universiti Malaysia Pahang reserves the following rights:
1. The Thesis is the Property of Universiti Malaysia Pahang

2. The Library of Universiti Malaysia Pahang has the right to make copies of the thesis for
the purpose of research only.
3. The Library has the right to make copies of the thesis for academic exchange.
Certified by:
Ayuni
(Student’s Signature) (Supervisor’s Signature)
991020-02-5994 NOORLIN MOHD ALI

New IC/Passport Number Name of Supervisor
Date: 9TH January 2021 Date:
NOTE : * If the thesis is CONFIDENTIALor RESTRICTED, please attacha thesis declaration letter.
THESIS DECLARATION LETTER (OPTIONAL)
Librarian,
Perpustakaan Universiti Malaysia Pahang,
Universiti Malaysia Pahang,
Lebuhraya Tun Razak,
26300, Gambang, Kuantan.
Dear Sir,
CLASSIFICATION OF THESIS AS RESTRICTED
Please be informed that the following thesis is classified as RESTRICTED for a period of three
(3) years from the date of this letter. The reasons for this classification are as listed below.
Author’s Name
Thesis Title
Reasons (i)
(ii)
(iii)
Thank you.
Yours faithfully,
(Supervisor’s Signature)
Date:
Stamp:
Note: This letter should be written by the supervisor, addressed to the Librarian, Perpustakaan
Universiti Malaysia Pahang with its copy attached to the thesis.
SUPERVISOR’S DECLARATION
I hereby declare that I have checked this thesis and in my opinion, this thesis is adequate
in terms of scope and quality for the award of thedegree of Bachelor in Computer Science
Software Engineering.
(Supervisor’s Signature)
Full Name :
Position :
Date :
(Co-supervisor’s Signature)
Full Name :
Position :
Date :
STUDENT’S DECLARATION
I hereby declare that the work in this thesis is based on my original work except for
quotations and citations which have been duly acknowledged. I also declare that it has
not been previously or concurrently submitted for any other degree at Universiti Malaysia
Pahang or any other institutions.
Ayuni
(Student’s Signature)
Full Name : AYUNI
NAFISYA BINTI ABU
BAKAR
ID Number : CB18107
Date : 9th JANUARY 2021
E-LEARNING MANDARIN WEB-BASED SYSTEM
AYUNI NAFISYA BINTI ABU BAKAR
Thesis submitted in fulfillment of the requirements

for the award of the
Bachelor Degree in Computer Science (Software Engineering)
Faculty of Computing
21 NOVEMBER 2021
ACKNOWLEDGEMENTS
Praise to be with him the Al-Mighty, with Allah blessing, I managed to finish this project
successfully without any incident.
First, I would like to express my gratitude towards my supervisor, Dr. Noorlin Mohd Ali for
her guide and advices on how I should improve any mistakes that I made throughout completing this
project.
Lastly, I would like to also express my gratitude to my mother for also helping and encouraging
me in this completion and in my research. Thank you.
ii
ABSTRACT
This project, E-Learning Mandarin Web-Based System (ELMBS) are introduced and
built due to the rising demand of mandarin language usage in daily life. Mandarin, or called as
"Huáyŭ" are widely been used in many professional fields and by having the ability to speak
one thus help increases one’s credibility. But, this language is also considered as one of the
toughest language to be learn, thus this e-learning is introduced to help those who seek and
interested to learn Mandarin in an easy way, as long as they have internet connection and
smartphone. The scopes of the project are to design for the language development. This
application consisted of 2 section and every section can be divided into 3 parts: Beginner,
Intermediate, and also Advance. The first section is for the language learning and for the
second section, it is a recap prepared to test its users after they have learned on what that have
been teach in the first section. This project comes with the hope of its user to have a knowledge
on how to speak or learn basic Mandarin after the completion of both sections.
Keywords— learning Mandarin Language through web-based training
iii
ABSTRAK
Projek ini, ‘E-Learning Mandarin Web-Based System’ ataupun ‘ELMWBS’

diperkenalkan dan dibina disebabkan oleh penggunaan Bahasa Mandarin semakin meningkat.
Mandarin, ataupun digelar sebagai "Huáyŭ" telah digunakan secara meluas termasuk di alam
pekerjaan dan memiliki kemahiran dalam bertutur Bahasa demikian secara tidak langsungnya
memberi kelebihan kepada individu tersebut. Tetapi, walaupun Bahasa ini digunakan secara
meluas pada abad ini, Bahasa tersebut merupakan salah satu Bahasa yang sukar untuk dikuasai.
Oleh itu, kelas secara alam maya ini diperkenalkan untuk membantu golongan ataupun
individu yang berminat untuk mempelajari Bahasa tersebut secara mudah. Laman web ini
terbahagi kepada dua bahagian iaitu bahagian pertama untuk belajar Bahasa tersebut dah
bahagian ini juga terbahagi kepada tiga iaitu: Beginner, Intermediate dan juga Advance. Bagi
bahagian kedua, ia merupakan bahagian di mana pengguna aplikasi tersebut dapat menguji
tahap mereka berdasarkan ujian ringkas yang disediakan di bahagian tersebut. Projek ini juga
datang dengan harapan untuk membantu pengguna untuk menguasai asas dalam Bahasa
tersebut.
Kata kunci— mempelajari Bahasa Mandarin melalui laman web
iv
TABLE OF CONTENT
DECLARATION
TITLE PAGE i
ACKNOWLEDGEMENTS ii
ABSTRACT iii
ABSTRAK iv
TABLE OF CONTENT v
LIST OF FIGURES x
LIST OF SYMBOLS xii
LIST- OF ABBREVIATIONS xiii
CHAPTER 1 INTRODUCTION 1
1.1 Background of study 14
1.2 Problem Statement 15
1.3 Goal and Objective 17
1.4 Scope 17
1.5 Significance of this Project 18
1.6 Thesis Organization 18
CHAPTER 2 LITERATURE REVIEW 20
2.1 Introduction 20
2.2 Review of existing systems 20
2.2.1 TutorMing 20
2.2.2 ChineseClass101 22
v
2.2.3 FluentU 23
2.2.4 Comparative analyses of existing systems 24
2.3 Advantages & Disadvantages of Existing Work / Project 27
2.4 Proposed Project 28
2.5 Summary 28
CHAPTER 3 METHODOLOGY 29
3.1 Introduction 29
3.2 Methodology 30
3.2.1 Requirements Planning 31
3.2.2 User Design 31
3.2.3 Construction 32
3.2.4 Cutover 33
3.3 Use Case Diagram and Context Diagram 34
3.4 Flowchart 36
3.5 Architecture / Blue Print 35
3.6 System Requirement 36
3.6.1 Hardware Requirement 36
3.6.2 Software Requirement 37
vi
3.7 Gantt Chart 38
3.8 Conclusion 40
CHAPTER 4 RESULT AND DISCUSSIONS 41
4.1 Introduction 41
4.2 Implementation 41
4.2.1 Create project - Sublime 41
4.2.2 Web Server Connection - XAMPP 42
4.3 System User Interface 44
4.3.1 Homepage Interface 44
4.3.2 Login Interface 45
4.3.3 Register Interface 46
4.3.4 Choose Difficulty Level Interface 47
4.3.5 Learning Module – Beginner Level Interface 48
4.3.6 Recap Module – Beginner Level Interface 56
4.3.7 Learning Module – Intermediate Level Interface 64
4.3.8 Recap Module – Intermediate Level Interface 72
4.3.9 Learning Module – Advance Level Interface 81
4.3.10 Recap Module – Advance Level Interface 92
4.4 Source Code 103
4.5 Testing and Result Discussion 104
CHAPTER 5 CONCLUSION 105
5.1 Introduction 105
5.2 Project Constraint 106
5.2.1 System constraint 106
vii
5.2.2 Development constraint 106
5.3 Future work 106
REFERENCES 107
viii
APPENDIX A Software requirement specification (SRS) 64
APPENDIX B Software Design Document (SDD) 65
APPENDIX C User Acceptance Test (UAT) 66
ix
LIST OF TABLES
Table 1.1: Summary of Problem Statements ................................................................... 16
Table 2.1: Summary of the existing systems ................................................................ 25
Table 2.2: Advantages and disadvantages for existing systems ................................... 26
Table 3.3.1: Use Case Functionality ................................................................................ 35

Table 3.6.1.1: Hardware requirements ............................................................................. 36
Table 3.6.2.1: Software requirements ...............................................................................37
x
LIST OF FIGURES
Figures 2.2.1.1: Example of TutorMing Interface ............................................................................ 21

Figures 2.2.2.1: Example of ChineseClass101 Interface ................................................................. 22
Figures 2.2.3.1: Example of FluentU Interface ................................................................................. 23
Figure 3.2.1: RAD phases ................................................................................................................ 30
Figure 3.3.1: ELMWBS Use Case Diagram ....................................................................................... 34
Figure 3.3.2: ELMWBS Context Diagram ............................................................................. 35
Figure 3.4.1: Main Flowchart of ELMWBS ........................................................................................ 36
Figure 3.4.2: Login Flowchart of ELMWBS ....................................................................................... 37
Figure 3.5.1: System Architecture of Proposed System – ELMWBS .................................................... 35
Figure 3.7.1: Gantt chart ................................................................................................................... 39
Figure 4.2.1.1: Creating a new project in Sublime Text Editor ........................................................... 42
Figure 4.2.2.1: Control panel of XAMPP ........................................................................................... 42
Figure 4.2.2.2: PhpMyAdmin Homepage............................................................................................ 43
Figure 4.2.2.3: Database of the ELMWBS .......................................................................................... 43
Figure 4.3.1: ELMWBS Homepage for unloggin users .......................................................................44
Figure 4.3.2: ELMWBS Login Interface ............................................................................................. 45
Figure 4.3.3: ELMWBS Register Interface ......................................................................................... 46
Figure 4.3.4: ELMWBS Choose Difficulty Level Interface .................................................................. 47
Figure 4.3.5.1: ELMWBS Beginner Level Interface............................................................................. 48
Figure 4.3.5.5: ELMWBS Beginner Level Interface..........................................................................52
Figure 4.3.5.6: ELMWBS Beginner Level Interface ............................................................................ 53
Figure 4.3.5.7: ELMWBS Beginner Level Interface..........................................................................54
Figure 4.3.5.8: ELMWBS Done Beginner Level Interface .................................................................. 55
Figure 4.3.6.1: ELMWBS Recap Beginner Level Interface................................................................. 56
Figure 4.3.6.8: ELMWBS Recap Beginner Level Completion Interface ............................................. 63
Figure 4.3.7.1: ELMWBS Intermediate Level Interface ...................................................................... 64
xi
LIST OF FIGURES
Figure 4.3.7.8: ELMWBS Done Intermediate Level Interface ............................................................. 71
Figure 4.3.8.1: ELMWBS Recap Intermediate Level Interface............................................................ 72
Figure 4.3.8.10: ELMWBS Recap Intermediate Level Completion Interface ....................................... 80
Figure 4.3.9.1: ELMWBS Advance Level Interface ............................................................................. 81
Figure 4.3.9.7: ELMWBS Advance Level Interface ............................................................................ 87
Figure 4.3.9.10: ELMWBS Advance Level Interface ........................................................................... 90
Figure 4.3.9.11: ELMWBS Done Advance Level Interface.................................................................. 91
Figure 4.3.10.1: ELMWBS Recap Advance Level Interface ................................................................ 92
Figure 4.3.10.9: ELMWBS Recap Advance Level Interface ............................................................... 100
xi
LIST OF FIGURES
Figure 4.3.10.10: ELMWBS Recap Advance Level Interface ............................................................. 101
Figure 4.3.10.11: ELMWBS Recap Advance Level Completion Interface ......................................... 102
Figure 4.4.1: Sample code of insert SQL in loginRegisterModel....................................................... 103
Figure 4.4.2: Sample code of sigupStudent() in loginRegisterController .......................................... 104
xi
LIST OF SYMBOLS
xiv
LIST- OF ABBREVIATIONS
SRS Software Requirement Specification

SDD Software Design Document
ELMWBS E-Learning Mandarin Web-Based System
IBT Internet-Based Training
OS Operating System
UAT User Acceptance Testing
MVC Model View Controller
RAD Rapid Application Development
xv
CHAPTER 1
INTRODUCTION
1.1 Background of study
Based on Technopedia, web-based training or system that can be short-formed as

WBT, is a web-based learning programme that is also available on a local intranet.
Streaming audio/video, webinars, forums, and instant messaging are among the WBT
technologies. WBT can be used for a wide range of institutions, including the military,
primary and secondary schools, colleges and universities, and law enforcement. There are
also many known terms to call WBT such as e-learning, Internet-based training (IBT) and
Distance Learning.
By learning new language without any proper guidance can be quite challenging
due to the language being completely different from most of the Malaysian mother tongue
as the language are consisted of Chinese character and not alphabets and the reading must
also be read in a correct pronunciation or known as “Hànyǔ Pīnyīn”. Thus, this project is
made to help interested people to learn Mandarin in an easy and correct way. The web-
based system will display the Chinese character alongside with its pinyin and also the
meaning of the word. It will teach basic but frequent dialogue used in daily life: in which
how to introduce yourself and give correct greetings, how to converse using the correct
noun and adjective and also common things, fruits or objects used in everyday life.
The web-based system is also one of the many methods introduce on how to learn
Mandarin language trough virtual learning. The reason why this method or the project
proposed are due to comprehend with today’s situation: where the world is currently
battling with the Covid-19 viruses thus almost every university, schools or any learning
institution are forced to stop having face-to-face learning that needs to be replaced with
virtual learning to stop the pandemic chain. This learning is also made in a web-based due
to almost every citizen are and have at least one smartphone, laptop, or even pcs which
1
comes with the availability of the internet connection thus making the web-based to be
easily accessible by anybody interested to learn the languages. It is well classified into its
own sections thus it made its user to learn easily even without any teacher or instructor.
1.2 Problem Statement
Today, due to Covid-19, almost all university or any learning institution are forced
to close its face-to-face learning due to avoid more widespread of the viruses. Several MCO’s
had been introduce and to adapt with the sudden change without effecting any learning
process, virtual learning through Google Meet, Zoom or Google Teams had been introduced
to make sure its student still can learn without any hindrance. But, students are consisted of
different background: some had excellent internet connection, some had a stable or suffice
connection and some may have trouble to even be connected to join live to learn due to
different topography and location.
Mandarin language had also been included as one of foreign language courses in
most of the university. Those students that having difficulties in joining the class on time
might encounter problems in learning the subjects thus with the existence of the mandarin
language e-learning web-based, it might help to solve their problem as they can access the
website whenever their connection is good. Students that having difficulties in learning
through online class may also use the app to strengthened on what they have learned during
the class. This website also best used for introvert type of students that are shy or afraid to
ask for questions and seek guidance at their respective lecturer during the online classes as
ELMWBS are to be learn without any ‘real instructor’ and there are also will be no other
students or users to learn together through the same account on the same time. This thus will
boost the student or its shy users to learn more confidently and proactively.
1
In conclusion, the table below summarizes these problem statements.
Table 1.1 Summary of Problem Statement
No. Problem Description Effect
1 Different topography Results in weak connection Student might face
difficulties in trying to
stay online to learn
during classes due to
weak connection.
2 Introvert student Students are shy to ask Causes the student to be

left behind while not
question
having any improvement
in the language.
3 Pandemic outbreak
Students have to resort in Student might face held
online learning back due to having
difficulties in adapting in
a new learning
environment.
1
1.3 Goal and Objective
The goal of this project is to develop an educational learning website for interested
UMP students that can be accessed anywhere. A number of objectives must be met in
order to reach the project's goal. The project's aims are listed below:
i. To design a platform for learning Mandarin language through a web-

based system.
ii. To build and develop the system that could be differentiate into 3 sections:
Beginner, Intermediate and Advance.
iii. To evaluate the effectiveness of the project build through the UAT and
feedback receive by the UMP students.
1.4 Scope
The following are the project's objectives:
User Scope:
i. This system is developed where is focused for those UMP students
that majority of them have smart devices such as laptops,
smartphone or PCs.
ii. The target user for this project is for UMP students that are taking
Mandarin language as their foreign language subjects or those who
are interested in learning the language.
1
Development Scope:
i. This system is developed by using Sublime Text 3 and Xampp.
ii. This system used Xampp mySQL to store the user’s data.
.
1.5 Significance of this Project
By taking consideration of the system, it shall provide significance as following:
i. This system provides free educational material that can be accessible by

everyone in which the UMP students are consisted of different
background
ii. To be able to be access anywhere and everywhere as long as there is
internet connection.
1.6 Thesis Organization
The following is a list of the project's thesis organization:
i. Chapter 1: This chapter discusses the project's introduction, which

includes the project's background, problem description,
purpose and goals, and system scope.
ii. Chapter 2: This chapter contains the project's literature study, and it
discusses three existing systems, technologies, and
software that are relevant to the project.
2
iii. Chapter 3: This chapter covers the technique that will be utilized in the
project, including the approach chosen, the use case, the
context diagram, the flowchart, the gantt chart, and the
hardware and software requirements.
iv. Chapter 4: This chapter explains the implementation procedure as well

as the testing findings obtained from the developed project.
v. Chapter 5: The project's conclusion, project constraints, and future

work of this project system are all covered in this
chapter
2
CHAPTER 2
LITERATURE REVIEW
2.1 Introduction
This chapter is a general summary and review about literature review that are
related to the proposed project. This chapter describes three (3) existing web-based that
will then, be compared in the chapter. All three existings e-learning web based chosen are
all related with the proposed project – online Mandarin learning. The first web-based is
ChineseClass101 that’s basically, users will learn Mandarin through phrasebook provided
in the app. There are many course materials to learn from but the content is a little more
sparse and tougher for anyone who didn’t have any basic in the language. Next, the second
web-based is FluentU Mandarin. FluentU Mandarin consisted a lot of lessons and comes
from a variety of directions. Lastly, the third existing e-learning is TutorMing in which this
website is an uniquely developed courses for its online classes. Lastly, this chapter will
also explain on why the proposed project are much better than all three existing
applications.
2.2 Review of existing systems
In this section, the details on the analysis of the three existing work are explained and
discussed. The existing mobile applications are FluentU Mandarin, TutorMing and
ChineseClass101.
2.2.1 TutorMing
The first existing website is TutorMing. TutorMing conduct classes through their
cloud-based classrooms with licenced Chinese professors in which they will interact with
its users in real time and answer their queries. TutorMing's classroom software puts its
users in a virtual classroom with a real, live Chinese tutor, unlike taped lesson videos or
Chinese dictionaries. The professors-in-charge can correct its users Chinese pronunciation,
answer their queries, and teach them new Chinese vocabulary and sentences. It also
2
provided will more than 3000 lesson materials to be learned.
Figures 2.2.1.1: Example of TutorMing Interface
2
2.2.2 Chinese Class101
ChineseClass101 is one of the excellent Chinese e-learning for interested uses. It

consisted a lot of lessons and comes at the topic from a variety of directions. The content
of the courses ranges from absolute beginner to advanced. It's a great course for improving
listening abilities, but it also includes all of the necessary vocabulary and grammar, as well
as a slew of other features. At the lower levels, there is a variety of Chinese course material.
Even so, beyond the beginner level, the content options are a little more restricted. On the
beginner level, there is also more English words compared to what it is supposed to teach.
Lastly, the GUI and the clumsy navigation makes it a little daunting and might appear
confusing for its first-time user.
Figures 2.2.2.1: Example of ChineseClass101 Interface
24
2.2.3 FluentU
The last existing system is FluentU. FluentU is a language learning website which
is essentially a derivation of Yabla. Although it has a more modern and updated UI, it is
significantly more expensive compared to Yabla. There are 9 languages that are currently
available on the system platform. This website advantages also ranged from having a very
sleek interface to having a lot of content for Chinese learners and its users. There are also
many categorized videos with good quality that could immensely help its users to master
the language. But, FluentU are also known to contain malware attack in which there many
spammy blog posts and articles that could sometimes stack the whole frame whenever we
are searching for any language query.
Figures 2.2.3.1: Example of FluentU Interface
25
2.2.4 Comparative analyses of existing systems
FluentU, ChineseClass101 and TutorMing each have their own pros and cons that
could impact the society. The detail summary of the three existing systems is shown in
Table 2.1. The advantages and disadvantages of the three existing systems are shown in
Table 2.2.
26
Table 2.1 Summary of the existing systems
Features TutorMing ChineseClass101 FluentU
Suitable for all ages, travellers Suitable for all ages Suitable for all ages
Target User
Graphical User 2D characters and images with simple Interfaces are full of unnecessary English Simple and sleek interface that
Interface (GUI) interface to enable users to interact words for the lowest level for beginner. GUI consisted of 2D images and
easily with online instructor. is slightly overwhelmed with confusing characters that instantly carry a
navigation. message and meaning with the help
of video learning.
Operating IOS, Android, Windows PC, Mac OS Android, Windows PC, Android, IOS, Windows,
System (OS) Phone, PC
Price Vary per level Starts from $4 month $19.99 per month
$24 per month

Premium $196 - $4,299 per month $29.99 per month
In-app purchase Yes

Yes Yes
Ads Yes No Yes
27
Table 2.2 Advantages and disadvantages for existing systems
TutorMing ChineseClass101 FluentU
Advantages Could conduct classes through their An organized course and more of a jumble of Has a very sleek and easy-to-understand
cloud-based classrooms with certified topic-based podcast courses. GUI.
Chinese teachers that can interact with
its users in real-time and answering
questions.
Instructor can correct any Chinese Makes use of audio lessons that sound a lot Uses real-world interactive videos
pronunciation made by the user, answer like podcasts.
any problems, and teach students new
Chinese vocabulary and sentences.
Equipped themselves with advanced Content of the courses ranges from absolute Covered everything from a beautiful UI
DCGS (Dynamic Course Generation beginner to advanced. to a wealth of content for Chinese
System) matches users with the course learners and users.
content that are most appropriate for user
needs, interests, and industry.
Disadvantages Weak internet connection might cause At the beginner levels, there is a lot of English Contain malware in the form of
the class to not be able to proceed with spoken compared to the teaching languages spamming blog posts
learning session. and content options are limited.
User need to pay entrance money that Report required related expertise
vary on every difficulty level before able understanding from user
to join any classes.
28
2.3 Advantages & Disadvantages of Existing Work / Project
The advantage of TutorMing is that they could conduct classes through their cloud-
based classrooms with certified Chinese teachers that can interact with its users in real-time
and answering questions. TutorMing's classroom puts their users in a virtual classroom with
a real, live Chinese tutor, unlike pre-recorded lesson videos or Chinese dictionaries. The
instructor can correct any Chinese pronunciation made by the user, answer any problems,
and teach students new Chinese vocabulary and sentences. TutorMing also equipped
themselves with advanced DCGS (Dynamic Course Generation System) matches users with
the course content that are most appropriate for user needs, interests, and industry. But there
are also a few disadvantages such as, any interested users must be well-prepared to pay an
entrance money before they are able to join any of the classes. The classes and many courses
also make its users to have long commitment since the learning schedule is in a long way
and time-consuming. Live lessons will also cause several problems such as low-connectivity
thus making the classes to not be able to proceed.
Next, the advantages of ChineseClass101 is that it is this is an excellent alternative

for anyone going to China, as it is less of an organised course and more of a jumble of topic -
based podcast courses. ChineseClass101 makes use of audio lessons that sound a lot like
podcasts. The content of the courses ranges from absolute beginner to advanced. It's a good
course for improving listening abilities, but it also contains all of the necessary vocabulary
and grammar, plus a handful of other features. The disadvantages of this website is that
beyond the beginning level, the content options are a little more limited. At the beginner
levels, there is a lot of English spoken compared to the teaching languages.
Lastly, the advantages of FluentU is that is has a very sleek and easy-to-understand
GUI. FluentU uses real-world interactive videos to bring languages to life. On the system
platform, there are now nine languages accessible. This website's advantages covered
everything from a beautiful UI to a wealth of content for Chinese learners and users. There
are also several well-organized, high-quality films that can help enormously viewers in
learning the language. However, FluentU has been known to contain malware in the form
of spamming blog posts and articles that can occasionally fill the entire frame when
searching for a language query.
29
2.4 Proposed Project
This proposal is to propose a new web-based application system which is called as

E-Learning Mandarin Web-Based System that consisted of 2 section and every section can
be divided into 3 parts: Beginner, Intermediate, and also Advance. The first section is for
the language learning and for the second section, it is a recap prepared to test its users after
they have learned on what that have been teach in the first section.
This web-based is compatible for users and the target users are all aged and anyone
who are interested in learning how to learn Mandarin language in a simple and easy way.
2.5 Summary
This chapter mainly discuss about the literature review regarding the proposed
project and the three existings web-based system which are TutorMing, ChineseClass101
and FluentU. Based on the review and discussion, these website shows that each of them
has their own advantages and also disadvantages. There are also some similarities between
all three of the existing applications. The benefits of this review is to provide and act as a
guidance for the proposed system to provide a better system and application compared to
previous existing mobile application.
30
CHAPTER 3
METHODOLOGY
3.1 Introduction
This chapter will describe about the entire Undergraduate Project system One and
this chapter will also explain the ways, methods and approaches used to complete the
project. The methodology used in the project will also be explained that shows the
information of the study and the development of the system. The methodology of the project
will make the flow or progression of the project to be more systematic in order to achieve
all the objective of the project.
The methodology chosen for developing ELMWBS is RAD or is known as Rapid
Application Development. Reason why this model is chosen will be explain in the chapter.
31
3.2 Methodology
In completing this project, RAD model or methodology was chosen. This is because
of the simple and easy to moderate functions are what make the model to be implemented
into this project. Each of the stages in the model will be go through one by one before
ELMWBS can be released for all Malaysian users to experience using the websites.
RAD or Rapid Application Development is an over long-drawn development and

testing cycles, in which it is a development model that prioritizes rapid prototyping and
fast feedback. Developers can make several iterations and changes to a program easily
with rapid application development without having to start a development schedule from
scratch each time. It makes it possible for stakeholders to accurately measure progress
and engage with changing developments in real time.
The primary aim of RAD is to build a high quality, high speed and low cost system.
In other words, RAD focuses on standardized development methodologies that include a
short development time or period.
Figure 3.2.1: RAD phases
RAD model is also can be great for small team developer in a quick projects
development and some of its advantages are any requirements can be changed or edited at
any time without any restrictions, encourages and priorities customer feedback that can
ensure and boost system performance quick reviews, time development can be reduced also
the time consume between prototypes and iterations are short.
32
While RAD be having a lot of advantages, it also has its own shortcoming or
disadvantages such as it will require a strong team collaboration and cooperation while it
cannot work or functioned in a large team. And RAD is only suitable for projects that have
a small development time which this disadvantage will not give any misfortune or effect
any of our project proposed development. There are four (4) main phases in the model:
Requirement planning, User design, Construction and also Cutover. Each phase will be
further explained in this chapter.
3.2.1 Requirements Planning
The first phase of RAD, requirement planning will involves gathering information
from any related sources. Any information such as purpose, scopes, objectives of the system
that had been explained in chapter 1 will be primarily gathered in this phase. In this phase,
stakeholder also needs to be identified and meeting or conference needs to be done to discuss
about defining user requirements, business needs and identifying other information that are
required in this proposed project.
3.2.2 User Design
User description or design is the second phase of the Rapid Application

Development model. This phase will be in charge or responsible in taking all user feedback
and by all the feedback, a several prototypes of the project implementing with the feedbacks
will be develop by using the developer tools. All of the prototypes developed will soon be
released by user to be tested. Any requirement or any function that has been mentioned from
the user will be recorded.
The prototype created will allow users to easily understand on how the system
actually work and behave. By creating prototypes, this will also reduce the development
cost while ensuring maximum performance for the system. On this phase also, there are
several types of diagrams such as flow chart, context diagram, use case diagram and also
storyboard are created.
33
3.2.3 Construction
The Construction phase is the third step of the RAD concept. The actions carried out
during the building phase are mostly identical to those carried out during the program and
application development phases of the conventional SDLC. Because it translates the
prototype or beta system from the previous phase into a working model, the RAD approach
allows for quick application development. Because this is an iterative phase with user
participation, clients are still free to make suggestions for project adjustments or
enhancements. The tasks of program and application development, coding, unit, integration,
and system testing are broken down into smaller tasks in the Construction phase.
34
3.2.4 Cutover
The Cutover phase is the last step in the RAD paradigm, and it involves final user
testing, user training, data conversion, and application system implementation. The
application system will be launched as soon as it is complete in order to test it in a real-
world setting. As a result, the client receives the new application system, which is
constructed and provided.
After the building of the project application is completed, the cutover phase of this
proposed project will begin. During this phase, the built project application will be subjected
to user acceptability testing and user training on how to use the project application, which
will be delivered with the application user manual. At the same time, the project application
will be evaluated by users and an evaluator.
The results of the user acceptance testing must be documented after it is completed.
This phase will also include a User Acceptance Test (UAT). ELMWBS will be put to the
test, and if every UAT result is positive, it will be concluded that ELMWBS has finally met
all user expectations, and the planned project will be considered a success. This is the final
phase of the project development process.
35
3.3 Use Case Diagram and Context Diagram
The use case diagram is a graphical representation that depicts the interaction
between the system's actors and its functionalities. A use case diagram is a dynamic diagram
that uses actors and use cases to function. Use cases are a collection of actions, behaviours,
services, and tasks that systems must accomplish to function properly. Actors, on the other
hand, are genuine persons or things who perform specific roles in the system. The use case
diagram for ELMWBS is shown below. The use case flow is defined in depth in the use
case description included in Appendix A of the Software Requirement Specification (SRS).
Table 3.3.1 also shows the functionality of each use case.
Figure 3.3.1: ELMWBS Use Case Diagram
36
Table 3.3.1: Use Case Functionality
Use case Description

Login It allows the user to login into application using username
and password.
Register It allows the user to register a new user account by providing
user information.
Manage Learn Mandarin
It allows user to learn the material updated in it
Manage Recap Mandarin

It allows user to test the user skills after learning.
Manage Tutor
Manages tutor information
The context diagram is a diagram that shows how the system's entity interacts with the
proposed project application in terms of data flow. Context diagram, or also known as a level 0
data flow diagram is drawn to function as defining and clarifying the boundaries of the software
system. This diagram will identify the flow of the information between the system and external
entities existed and the entire system of the project is shown or drawn as a single process. Figure
below shows the context diagram for ELMWBS.
Figure 3.3.2: ELMWBS Context Diagram
Figure 5 shows the context diagram for the proposed project, ELMWBS. The data
flowing out into the system from user Exit to enable user to exit from the application and
Login_info about loging in information while the data flowing in from the system into the
student are Learn_syllabus for user to learn, GUI, for student to interact with the system,
Recap_syllabus for user to test their understanding based on what they have learn. While for
ServiceProvider, Maintenance, TutorDetails, Recap_syllabus and Learn_syllabus flow into
the system. Login_info, LogoutDetails also flowed out from ServiceProvider into the
system.
37
3.4 Flowchart
Flowchart is a diagram that explain a system process in a diagram form. Figure

below shows the flowchart for ELMWBS.
Figure 3.4.1: Main Flowchart of ELMWBS
Figure 3.4.1 shows the ELMWBS flowchart proses. It shows the flow of the system
from main menu interface until the end of the process. First, user will be brought onto
picking level for the learning of the language after they proceeded from the Main Menu.
User are able to choose 3 levels: Beginner, Intermediate and Advance to start learning. After
38
the learning ended, users may choose to end their learning of even move to test their
understanding based on their previous learning on the Recap interface that is also
differentiate base on the learning difficulties.
Figure 3.4.2: Login Flowchart of ELMWBS
Based on the figure, user will only able to access the main page of ELMWBS after
they have entered the correct information of username, password and also choosing the right
role. System will display error messages of “Invalid username or password. Try again.” if
there are invalid input of logging in. After successful attempt of logging in, system will bring
all user to the main page of ELMWBS.
39
Figure 3.4.2: Login Flowchart of ELMWBS
For new user, they can register a new account based on the above flowchart. New
user will require to enter new username, password, and enter email for recovery account.
Error messages will appear of “Please insert all field. Try again.” if the user continues
registering new account without filling all the field provided. User will be brought onto login
page after successful attempt of creating a new account.
40
3.5 Architecture / Blue Print
ServiceProvider
Student
Figure 3.5.1: System Architecture of Proposed System – ELMWBS
Figure 3.5.1 shows the architecture of the E-Learning Mandarin Web-Based system. It
shows that there are two actors or entity that interacted with the system: Student, and Service
Provider. Any data of both actors will be saved and are able to be retrieved from the database.
User will be able to access Learn Mandarin and Recap Question after logging in into the system.
Meanwhile, Service Provider will not just be able to access both sections, but they are also able
to update any content as they seem fit. They can manage all the modules in this system except
Registermodule.
35
3.6 System Requirement
The hardware and software required for the development of this suggested project
system were discussed in this section.
3.6.1 Hardware Requirement
Table 3.6.1.1 lists the hardware that was used to create this suggested project application.
Table 3.6.1.1: Hardware requirements
Hardware Specification Description

Laptop (HP) Used for development,
NITRO 5
documentation and project
completion
Laptop (HP) HP 14-bs537TU 14

Used for development,
documentation and project
completion
Smartphone Samsung A71

Used for assisting in searching
information for completion of
the project proposed.
36
3.6.2 Software Requirement
Table 3.6.2.1 lists the software that was used to create this suggested project application.
Table 3.6.2.1: Software requirements

Software Specification Description
Microsoft Word Version 2016
To write report, thesis, SRS and
SDD documentation of the
project
Draw io -
To draw flowchart, context
diagram, use case diagram,
dialogue diagram general
architecture and also package
module.
Snip -
To snip images of existing
system
Notepad++ Version 7.5.1 To develop and write HTML,
PHP and JavaScript codes for the
project
CiteThisForMe -
To get a correct citation format
for references
Wix - To create GUI of the proposed

project.
MySQL Version 5.5.62

For database and data storage for
the system.
Microsoft Project 2016 Version 2016 To create Gantt Chart
37
3.7 Gantt Chart
The gantt chart was developed that depicts the project's timeline by splitting the tasks to be
completed into multiple lines of bar over a set period of time. The gantt chart based on the
phases in the methodology, which is the RAD model, has been intended to guarantee the
design of the proposed project application is completed on time. Figure 3.7.1 depict the
planned project's gantt chart.
38
Figure 3.7.1: Gantt chart
39
3.8 Conclusion
To conclude, chapter 3 explains about the methodology used in order to

complete the project, in which is RAD model. RAD methodology is chosen due to its
several advantages such as it is able building a high quality, high speed and low costs
system. In other words, RAD focuses on standardized development methodologies that
include a short development time or period. This methodology can also be used to
track the project's progress from the start to the completion of the development.
In addition, this chapter explains the project flow as well as the hardware and
software requirements that were employed to complete the project. Last but not least,
this chapter outlines the working development's process flow to make sure the project
remains on schedule and can be developed successfully.
This chapter also discusses the system requirements, which include hardware
and software requirements that will be employed in the creation of this project. Last
but not least, the gantt chart that we described earlier in this chapter is used to guide
and ensure that the project is completed on schedule and effectively.
40
CHAPTER 4
RESULT AND DISCUSSIONS
4.1 Introduction
This chapter discuss about the adaptation process of E-Learning Mandarin

Web-Based System (ELMWBS) in details. This chapter will be about reviewing the
output received from the proposed project execution and testing. PHP are being
implemented as the programming language for the web-based development
application. The interface of the proposed project is designed based on the finalization
met.
The interface is kept as simple and minimal as to allow even first-time user to
be able to operate the application without any help. After the implementation phase
completed, a testing of the project will be held to detect any error and deficiencies
before releasing the final version.
ELMWBS was developed as a web-based application system to allow user to

learn Mandarin language without any physical class or tutor presented. This proposed
project also able to achieve the aims of helping and enabling every interested user to
learn the language.
4.2 Implementation
The steps involved in developing and implementing various system features

were discussed in this section. This section offers a brief rundown of each of the steps
involved. The software tools used for the implementation for the proposed project are
Sublime Text Editor while XAMPP and MySQL for the database storage.
4.2.1 Create project - Sublime
To begin a new project, the user must first launch the Sublime Text editor.
41
Then, to start a new project, click on the file and open folder. Figure 4.2.1.1 depicts
the application settings for creating a new project.
Figure 4.2.1.1: Creating a new project in Sublime Text Editor
4.2.2 Web Server Connection - XAMPP
XAMPP is a control panel for connecting the system to the database and
providing a local server for this project. This application was chosen for this project
because it is compatible with the PHP programming language, which was utilized to
create it. XAMPP also has a MySQL service for database management via the
PhpMyAdmin interface. As seen in the graphical user interface, PhpMyAdmin is one
of the platforms that makes it easier for users to manage structured databases. Figures
4.2.2.1, 4.2.2.2, and 4.2.2.3 show the XAMPP control panel, PhpMyAdmin home
page, and the project database in PhpMyAdmin.
Figure 4.2.2.1: Control panel of XAMPP
42
Figure 4.2.2.2: PhpMyAdmin Homepage
Figure 4.2.2.3: Database of the ELMWBS
43
4.3 System User Interface
This portion of the system user interface describes and illustrates the proposed
website system's created functionality.
4.3.1 Homepage Interface
Figure 4.3.1: ELMWBS Homepage for unloggin users
Navigation Description
‘Log In’ Bring user to log in page
‘BEGINNER’ User need to log in to be able to click
‘INTERMEDIATE’ User need to log in to be able to click
‘ADVANCE’ User need to log in to be able to click
44
4.3.2 Login Interface
Figure 4.3.2: ELMWBS Login Interface
Email field Fill in to login
Password field Fill in to login
User Type Choose your user type: ‘Customer’ or ‘Service Provider’.
‘Register’ Bring to Register GUI
45
4.3.3 Register Interface
Figure 4.3.3: ELMWBS Register Interface
Email field Fill in to register
Gender Choose our gender
Tel. Number Fill in to register
Address Fill in to register
Register as Choose to register as ‘Customer’ or ‘Service Provider’
Password field Enter password
‘Sign Up’ button Click to complete signing up
46
4.3.4 Choose Difficulty Level Interface
Figure 4.3.4: ELMWBS Choose Difficulty Level Interface
‘BEGINNER’ Click to go to Beginner Level to learn
‘INTERMEDIATE’ Click to go to Intermediate Level to learn
‘ADVANCE’ Click to go to Advance Level to learn
47
4.3.5 Learning Module – Beginner Level Interface
Figure 4.3.5.1: ELMWBS Beginner Level Interface
Audio Click to listen to the Chinese character shown above.
Round ‘<’ button Click to go to previous page
Round ‘>’ button Click to go to next page
48
49
50
51
52
53
54
Figure 4.3.5.8: ELMWBS Done Beginner Level Interface
‘TEST’ button Click to go to Beginner recap or test interface
‘NEXT LEVEL’ Click to go to next level of difficulty level

button
55
4.3.6 Recap Module – Beginner Level Interface
Figure 4.3.6.1: ELMWBS Recap Beginner Level Interface
‘Speak’ button Click and speak the character.
56
57
58
59
Round ‘<’ Click to go to previous page

button
Round ‘>’ Click to go to next page

button
60
61
62
Figure 4.3.6.8: ELMWBS Recap Beginner Level Completion Interface
‘NEXT LEVEL’ Click to go to the next level difficulty

button
63
4.3.7 Learning Module – Intermediate Level Interface
Figure 4.3.7.1: ELMWBS Intermediate Level Interface
64
65
66
67
68
69
70
Figure 4.3.7.8: ELMWBS Done Intermediate Level Interface
‘TEST’ button Click to go to Intermediate recap or test interface
‘NEXT LEVEL’ Click to go to next level of difficulty level

button
71
4.3.8 Recap Module – Intermediate Level Interface
Figure 4.3.8.1: ELMWBS Recap Intermediate Level Interface
72
73

button

button
74
75
76
77
78
79
Figure 4.3.8.10: ELMWBS Recap Intermediate Level Completion Interface
‘NEXT LEVEL’ Click to go to the next level difficulty

button
80
4.3.9 Learning Module – Advance Level Interface
Figure 4.3.9.1: ELMWBS Advance Level Interface
81
82
83
84
85
86
87
88
89
90
Figure 4.3.9.11: ELMWBS Done Advance Level Interface
‘TEST’ button Click to go to Intermediate recap or test interface
91
4.3.10 Recap Module – Advance Level Interface
Figure 4.3.10.1: ELMWBS Recap Advance Level Interface
92
93
94
95
96
97
98
99

button

button
10
10
Figure 4.3.10.11: ELMWBS Recap Advance Level Completion Interface
‘TUTOR HELP’ Click to bring to contact tutor GUI.

button
10
4.1.11 Manage Tutor – View Tutor Details
Figure 4.3.11.1: ELMWBS Contact Tutor Interface
‘CONTACT ME’ Click to the tutors whatsapp
‘EXIT’ button Bring user to end GUI
10
Figure 4.3.11.2: ELMWBS whatsapp connect GUI
Pop up message Informing user to open whatsapp or not.
‘Open Brings user to the selected tutors whatsapp.

WhatsApp’
button
10
Figure 4.3.11.3: WhatsApp GUI
Whatsapp Students are directed to the selected tutor

messager whatsapp and are able to proceed with
inquiry.
10
Figure 4.3.11.4: ELMWBS end GUI
End page of the User have manage to complete the whole

system system cycle.
10
4.1.12 Service Provider – Manage Tutor
Figure 4.3.12.1: Service Provider Manage Tutor Homepage
‘TUTOR’ Brings service provider to manage tutor details

information.
10
Figure 4.3.12.2: Service Provider View List Tutor
‘Back’ button Brings service provider to previous page.
‘DELETE’ button Delete the whole tutor’s details.
10
Figure 4.3.12.3: Service Provider Delete Tutor
‘OK’ button Notifying service provider that the tutors

details had been deleted after the delete button
has clicked.
10
Figure 4.3.12.4: Service Provider Add New Tutor
‘Select File’ Allow service provider to add image.
‘Tutor;s Name’ Allowed to fill the field
‘Tutor’s Age’ Allowed to fill the field
‘ADD’ Adding the tutors information.
10
4.1 Source Code
ELMWBS uses MVC which divides application into three components which
are Model, View and Controller. First components, Model, are responsible for data
storage and retrieval. View are for user GUI that shows the data. Meanwhile, for
Controller, it will handle every user request.
Figure 4.4.1: Sample code of insert SQL in loginRegisterModel
Figure 4.4.2 shows example code of the insertion of the data information after
user as in Student key in the information in the field section in the GUI. Student are
required to register a few data information such as studentName, studentGender,
studentEmail, studentTelNumber, studentAddress and studentPasword before they
are able to enter further GUI.
Figure 4.4.2: Sample code of sigupStudent() in loginRegisterController
10
4.2 Testing and Result Discussion
E-Learning Mandarin Web-Based System, the proposed website system, is

iteratively developed and built using the process. This section will discuss about the
output that have been generated during the development process. Inspection and test
processing were being held out to confirm that the aim of the project corresponds
with the task. As a result, the project has achieved all the goals from Chapter 1:
i. To design a platform for learning Mandarin language through a web-based

system.
ii. To build and develop the system that could be differentiate into 3 sections:
Beginner, Intermediate and Advance.
iii. To evaluate the effectiveness of the project build through the UAT and
feedback receive by the UMP students.
After the development phase is completed, a User Acceptance Test (UAT) is

executed on the overall website system to check that the system's features meet the
SRS's functional requirements. Appendix C contains the User Acceptance Test
documentation.
4.3 User Manual
Appendix D contains the User Manual documentation.
10
CHAPTER 5
CONCLUSION
5.1 Introduction
Finally, there are five chapters in this thesis. The study's backdrop, problem
description, objectives, and scopes were reviewed in Chapter 1. The goal and
objectives in Chapter 1 have been accomplished and fulfilled as a result of the
development of the ELMWBS. Furthermore, Chapter 2 is a Literature Review, in
which three current systems are addressed, and a review of their roles aids in the
implementation of the system. In addition, Chapter 3 described the concept and
practical approach of the chosen technique, Rapid Application Development (RAD).
The implementation, testing, and result discussion of the build system are covered in
Chapter 4.
During the construction of the system, however, it is realized that there are
limitations or restrictions that interfere with the process. Aside from the limitations ,
it has been observed that ELMWBS offers a potential for future improvement. The
system's output is critical for displaying it and making it user-friendly. This method
was established in the hopes of making it easier and more advantageous for UMP
students interested in learning Mandarin in a virtual environment.
10
5.2 Project Constraint
5.2.1 System constraint
ELMWBS still had a few constraints that would require improvement and
upgraded. Some of the constraint are:
I. Language barrier
This website system only allocated English as the language moderator in
translating the Mandarin characters in the website thus it may cause
confusion for certain student that are struggling with English.
II. Platform
The only platform used are on a local based website system, thus student
could not find or download it at the Apple or App Store.
III. User
Only UMP student are eligible and able to operate the web-based system
since the host is local.
5.2.2 Development constraint
Constraint of during the development android application is as follow:
I. Limited database usage

This website system can only run by UMP students that are still not
graduated.
5.3 Future work
Because the construction of the website system is constrained by the

aforementioned limits, additional website research is conducted. Based on additional
research, it is believed that this system would be more reliable and flexible if it is
upgraded with anyone in Malaysia could access and use the website to its full
potential, rather than just UMP students.
11
REFERENCES
1. Dan, H. (2020, January 17). Makeuseof.com. Retrieved from The 8 Best

Mo bile Apps to Learn Mandarin Chinese:
https://www.makeuseo f.co m/tag/best-apps-learnmandarin-chinese/
2. Dylan, L. (2017, May 22). Babbel.com (BabbelMagazinel) Retrieved

from The 6 Hardest Language Fo r English Speakers to Learn:
https://www.babbel.co m/en/magazine/6-hardestlanguages-fo r-english-
speakers-to –learn
3. FluentU (2021). Retrieved from 13 Shockingly Good Apps for Learning

Mandarin Chinese in 2021:
https://www.fluentu.co m/blo g/chinese/2014/12/29/best-apps-to -learn-
mandarin-chinese/
4. Vijay S. (2020, December 10). Hackr.io Retrieved from What is Rapid

Application Development Model (RAD) ?:
https://hackr.io/blog/rapid-application-development-
model#:~:text=during%20its%20advent.-
,Phases%20of%20the%20RAD%20Model,is%20done%20by%20the%2
0customer.
5. n.d.(2020, October 26). Kissflow Retrieved from Rapid Application

Development(RAD): Changing How Developers Work:
https://kissflow.com/rad/rapid-application-development/
6. Elders, M. (2019). Neighborhood watch: Social media in the community.

In M. Elders (Ed.), POL 241: Politics and activism in the 21st century
(pp. 34-41). American University.
11
APPENDIX A
SOFTWARE REQUIREMENT SPECIFICATION (SRS)
11
2020
SOFTWARE
REQUIREMENT
SPECIFICATION (SRS)
SYSTEM (ELMWBS)
AYUNI NAFISYA BINTI ABU BAKAR CB18107

Bachelor of Computer Science (Software Engineering)
SRS_SP_VER 1.0
SOFTWARE REQUIREMENT SPECIFICATION (SRS) FKOM
DOCUMENT APPROVAL
Name Date
Authenticated by:
Dr. Noorlin Mohd Ali
Supervisor
Approved by:
Miss Nurul Shabilla Shaherra Binti

Muhammad Ali Tan
Client
Software : Microsoft Word, DrawIO
Archiving Place :
SRS_ELMWBS_VER 1.0 ii
TABLE OF CONTENT
CONTENT PAGE
DOCUMENT APPROVAL .................................................................................................... ii

TABLE OF CONTENT.......................................................................................................... iii
LIST OF FIGURES ................................................................................................................. v
LIST OF TABLES .................................................................................................................. vi
LIST OF APPENDIXES ....................................................................................................... vii
Appendex A… ........................................................................................................................ vii
1. INTRODUCTION ............................................................................................................ 1
1.1 PROJECT DESCRIPTION .................................................................................................................. 1
1.2 SYSTEM IDENTIFICATION .............................................................................................................. 1
1.3 CONTEXT DIAGRAM ...................................................................................................................... 1
1.4 DATA FLOW DIAGRAM .................................................................................................................. 1
2. CHAPTER 2 ..................................................................................................................... 3
2.1 USE CASE DIAGRAM AND DESCRIPTION ....................................................................................... 3
2.2 SEQUENCE DIAGRAM .................................................................................................................... 4
3. CHAPTER 3 ..................................................................................................................... 7
3.1 INTERFACE DESIGN........................................................................................................................ 7
3.2 HARDWARE AND SOFTWARE SPECIFICATION............................................................................. 19
4. ACRONYMS AND ABBREVIATION......................................................................... 21
SRS_ELMWBS_VER 1.0 iii

LIST OF FIGURES
Figure 1.3: Context Diagram of ELMWBS ............................................................................................................... 2

Figure 1.4.1: Data Flow Diagram for Login ............................................................................................................. 3
Figure 1.4.2: Data Flow Diagram for Register ......................................................................................................... 3
Figure 1.4.3: Data Flow Diagram for Learn Mandarin ............................................................................................. 4
Figure 1.4.4: Data Flow Diagram for Recap Question .............................................................................................. 4
Figure 1.4.5: Data Flow Diagram for Report ............................................................................................................ 5
Figure 2.1.1: Use Case Diagram for ELMWBS ......................................................................................................... 1
Figure 2.2.1: Sequence Diagram for Login in ELMWBS ............................................................................................ 3
Figure 2.2.2: Sequence Diagram for MandarinLearning in ELMWBS .......................................................................3
Figure 2.2.3: Sequence Diagram for RecapQuestion in ELMWBS............................................................................. 4
Figure 2.2.4: Sequence Diagram for Manage Report in ELMWBS ........................................................................... 4
Figure 3.1.1: ELMWBS Login Interface ................................................................................................................... 5
Figure 3.1.2: ELMWBS Register Interface ................................................................................................................ 5
Figure 3.1.3: ELMWBS Forgot Password Interface ................................................................................................ 6
Figure 3.1.4: ELMWBS Main Interface ..................................................................................................................... 6
Figure 3.1.5: Choose Learning Level Interface ......................................................................................................... 7
Figure 3.1.6 : ELMWBS Beginner Level – Noun Interface ........................................................................................ 7
Figure 3.1.7: ELMWBS Beginner Level – Family Interface ....................................................................................... 8
Figure 3.1.8: ELMWBS Intermediate Level - State Interface .................................................................................... 9
Figure 3.1.9: ELMWBS Intermediate Level - Fruit Interface .................................................................................. 10
Figure 3.1.10: ELMWBS Advance Level - Direction Interface ................................................................................. 10
Figure 3.1.11: ELMWBS Recap Option Interface.................................................................................................... 11
Figure 3.1.12: ELMWBS Recap Beginner Level - Noun Interface............................................................................ 12
Figure 3.1.13: ELMWBS Recap Beginner Level – Family Interface ........................................................................ 13
Figure 3.1.14: ELMWBS Recap Intermediate Level - State Interface....................................................................... 14
Figure 3.1.15: ELMWBS Recap Intermediate Level - Fruit Interface .......................................................................15
Figure 3.1.16: ELMWBS Recap Advance Level - Direction Interface ...................................................................... 16
Figure 3.1.17: ELMWBS End Recap Interface ........................................................................................................ 16
Figure 3.1.18: ELMWBS Report Interface............................................................................................................... 17
Figure 3.1.19: The end interface of ELMWBS......................................................................................................... 17
SRS_ELMWBS_VER 1.0 iv
LIST OF TABLES
Table 2.1.1: Use Case Description of ELMWBS ....................................................................................................... 2

Table 3.2.1: Hardware Specification of ELMWBS .................................................................................................. 18
Table 3.2.2: Software Specification of ELMWBS .................................................................................................... 18
Table 5.1: Acronyms and abbreviation ....................................................................................................................19
SRS_ELMWBS_VER 1.0 v
LIST OF APPENDIXES
SRS_ELMWBS_VER 1.0 vi
CHAPTER 1
1. INTRODUCTION
1.1 PROJECT DESCRIPTION
This project, E-Learning Mandarin Web-Based System (ELMWBS) are introduced and
built due to the rising demand of mandarin language usage in daily life. Mandarin, or called as
"Huáyŭ" are widely been used in many professional fields and by having the ability to speak one
thus help increases one’s credibility. But, this language is also considered as one of the toughest
language to be learn, thus this e-learning is introduced to help those who seek and interested to
learn Mandarin within the UMP community in an easy way, as long as they have internet
connection and smart devices. The scopes of the project are to design for the language
development.
This application consisted of 2 section and every section can be divided into 3 parts:
Beginner, Intermediate, and also Advance. The first section is for the language learning and for
the second section, it is a recap prepared to test its users after they have learned on what that have
been teach in the first section. This project comes with the hope of its user to have a knowledge
on how to speak or learn basic Mandarin after the completion of both sections.
The goal of this document is to convey all of the various concepts that have been collected
and analyzed in order to define the system. It will describe the system's characteristics and
functions in detail, including clear graphical and diagram illustrations to aid comprehension of
the project. As a result, the goal of this SRS paper is to provide a comprehensive overview of the
Smart, its parameters, and its objectives. This paper is designed for both the system's developers
and stakeholders.
1.2 SYSTEM IDENTIFICATION
This document represents the project title as below:
1.2.1 System Name: E-Learning Mandarin Web-Based System

System Abbreviation: ELMWBS
1.2.2 Module Identification ID: M <Module number>-<System abbreviation name>-<Year>
SRS_ELMWBS_VER 1.0 1
Example Module Identification ID: M01-ELMWBS-2020
1.2.3 Requirement Identification ID: R <Module number>-<System abbreviation name>-
<Year>
Example Requirement Identification ID: R01-ELMWBS-2020
1.2.4 Use Case Identification ID: UC <Module number>-<System abbreviation name>-<Year>
Example Use Case Identification ID: UC01-ELMWBS-2020
1.3 CONTEXT DIAGRAM
Context diagram, or also known as a level 0 data flow diagram is drawn to function as
defining and clarifying the boundaries of the software system. This diagram will identify the flow
of the information between the system and external entities existed and the entire system of the
project is shown or drawn as a single process. Figure below shows the context diagram for
ELMWBS.
Figure 1.3: Context Diagram of ELMWBS
Figure 1 shows the context diagram for the proposed project, ELMWBS. The data flowing out
into the system from student LogoutDetails to enable student to exit from the application and
Login_info about loging in information while the data flowing in from the system into the student are
Learn_syllabus for student to learn, GUI, for student to interact with the system, Recap_question for
student to test their understanding based on what they have learn. While for ServiceProvider,
Maintenance, TutorDetails, Recap_question and Learn_syllabus flow into the system. Login_info
and LogoutDetails also flowed out from ServiceProvider into the system.
1.4 DATA FLOW DIAGRAM
1.4.1 Login
ServiceProvider
Student
Figure 1.4.1: Data Flow Diagram for Login
Figure 1.4.1 shows the relationship between ServiceProvider and Student when logging into
the system. Both user need to enter their username, password and role for the user identification
through the database login. When it is successful, the system will display the homepage of
ELMWBS.
1.4.2 Register
Figure 1.4.2: Data Flow Diagram for Register
Figure 1.4.2 shows when User logging into the system. New user needs to enter their
username, password and role and the new information will be saved into the Login database.
When it is successful, the system will display the login interface.
1.4.3 Manage Learn Syllabus Mandarin
Student
ServiceProvider
Figure 1.4.3: Data Flow Diagram for Learn Mandarin
Figure 1.4.3 shows that when Student click to any of the 3 learning level, the system will
enable user to interact or view learning syllabus retrieve from the database. The learn Mandarin
syllabus will be updated if ServiceProvider decide to update any content in the database.
1.4.4 Manage Recap Question
Student
ServiceProvider
Figure 1.4.4: Data Flow Diagram for Recap Question
Figure 1.4.4 shows that when Student click to the recap question after learning at Learn
Mandarin, the system will enable user view recap question retrieved from the database. The recap
question database will be updated if ServiceProvider decided to update any content in the
database.
1.4.5 Manage Tutor
Student
Tutor
Tutor
ServiceProvider
Manage Manage
Tutor Tutor
Manage Tutor
Figure 1.4.5: Data Flow Diagram for Tutor
Figure 1.4.5 shows that when student click to the view tutor after completing
RecapQuestion, the system will enable student view the available tutor in order to ask more
question or inquiry of the language. The list will be generated by ServiceProvider to which it
will updated into the database
CHAPTER 2
2.1 USE CASE DIAGRAM AND DESCRIPTION
Figure 2.1.1: Use Case Diagram for ELMWBS

Use Case Description
Both user Student and Service Provider will need to

login first before proceeding. Service
Provider
Service
Provider
Service Provider will manage learn syllabus here.
Service
Provider
Service Provider will manage recap question here.
Manage Tutor A list of available tutor will be displayed for Student

to communicate and seek help. Service
Provider
Table 2.1.1: Use Case Description of ELMWBS
2.2 SEQUENCE DIAGRAM
Service Student
Provider
Figure 2.2.1: Sequence Diagram for Login in ELMWBS
Student
Figure 2.2.2: Sequence Diagram for MandarinLearning in ELMWBS
Student
Figure 2.2.3: Sequence Diagram for RecapQuestion in ELMWBS
CHAPTER 3
3.1 INTERFACE DESIGN
Figure 3.1.1: ELMWBS Login Interface
Figure 3.1.2: ELMWBS Register Interface
Figure 3.1.3: ELMWBS Forgot Password Interface
Figure 3.1.4: ELMWBS Main Interface
Figure 3.1.5: Choose Learning Level Interface
Figure 3.1.6 : ELMWBS Beginner Level – Noun Interface
Figure 3.1.7: ELMWBS Beginner Level – Family Interface
Figure 3.1.8: ELMWBS Intermediate Level - State Interface
Figure 3.1.9: ELMWBS Intermediate Level - Fruit Interface
Figure 3.1.10: ELMWBS Advance Level - Direction Interface
Figure 3.1.11: ELMWBS Recap Option Interface
Figure 3.1.12: ELMWBS Recap Beginner Level - Noun Interface
Figure 3.1.13: ELMWBS Recap Beginner Level – Family Interface
Figure 3.1.14: ELMWBS Recap Intermediate Level - State Interface
Figure 3.1.15: ELMWBS Recap Intermediate Level - Fruit Interface
Figure 3.1.16: ELMWBS Recap Advance Level - Direction Interface
Figure 3.1.17: ELMWBS End Recap Interface
Figure 3.1.18: ELMWBS Report Interface
Figure 3.1.19: The end interface of ELMWBS
3.2 HARDWARE AND SOFTWARE SPECIFICATION
3.2.1 Hardware Specification
Table 3.2.1: Hardware Specification of ELMWBS
3.2.2 Software Specification
Table 3.2.2: Software Specification of ELMWBS
5. ACRONYMS AND ABBREVIATION

HTML HyperText Markup Language
PHP Hypertext Preprocessor
SDD Software Design Description
GUI Graphical User Interface
UC Use Case
Table 5.1: Acronyms and abbreviation
APPENDIX B
SOFTWARE DESIGN DOCUMENT (SDD)
65
2020
SOFTWARE DESIGN
DOCUMENT (SDD)
E-LEARNING MANDARIN WEB-BASED SYTEM
(ELMWBS)
AYUNI NAFISYA BINTI ABU BAKAR CB18107

Bachelor of Computer Science (Software Engineering) 1
SOFTWARE DESIGN DOCUMENT (SDD) FKOM
DOCUMENT APPROVAL
Name Date
Authenticated by:
Dr. Noorlin Mohd Ali
Supervisor
Approved by:

Asri Tan
Client
Software : Microsoft Word, DrawIO, WIX
Archiving Place :
SDD_ELMWBS_VER 1.0 2
TABLE OF CONTENT
CONTENTS PAGE
DOCUMENT APPROVAL .................................................................................................... 2

TABLE OF CONTENT........................................................................................................... 3
LIST OF FIGURES ................................................................................................................. 4
LIST OF TABLES ................................................................................................................... 5
1. INTRODUCTION ............................................................................................................ 1
1.1 PROJECT DESCRIPTION ....................................................................................................... 1
1.2 SYSTEM IDENTIFICATION ................................................................................................... 1
1.3 ARCHITECTURE / BLUEPRINT ........................................................................................... 2
1.4 ARCHITECHTURE / BLUEPRINT DESCRIPTION ............................................................ 3
2. DETAILED DESCRIPTION .......................................................................................... 6
2.1 Data Dictionary........................................................................................................................... 15
3. ACRONYM AND ABREVIATION ............................................................................. 17
LIST OF FIGURES
Figure 1.3.1: System Architecture of Proposed System – ELMWBS ......................................................................... 2

Figure 1.4.1: Class Diagram UML of Proposed System – ELMWBS… .................................................................... 3
LIST OF TABLES
Table 1.4.1: Description for ELMWBS ........................................................................................................................ 4

Table 1.4.2: Description for Student ............................................................................................................................ 4
Table 1.4.2: Description for Student ............................................................................................................................ 4
Table 1.4.3: Description for Admin ............................................................................................................................ 4
Table 1.4.4: Description for Register.......................................................................................................................... 4
Table 1.4.5: Description for LearnMandarin .............................................................................................................. 5
Table 1.4.6: Description for RecapQuestion................................................................................................................ 5
Table 1.4.7: Description for Report ............................................................................................................................ 5
Table 2.1.1: Table Description and Algorithm for Login............................................................................................. 6
Table 2.1.2: Table Description and Algorithm for Register ........................................................................................7
Table 2.1.3: Table Description and Algorithm for LearnMandarin ............................................................................8
Table 2.1.4: Table Description and Algorithm for RecapQuestion........................................................................... 10
Table 2.1.5: Table Description and Algorithm for Report ..........................................................................................13
Table 2.2.1: Data Dictionary for ELMWBS...............................................................................................................15
Table 2.2.2: Data Dictionary for ELMWBS ..............................................................................................................15
Table 2.2.3: Data Dictionary for Admin ....................................................................................................................15
Table 2.2.4: Data Dictionary for Register .................................................................................................................. 15
Table 2.2.5: Data Dictionary for LearnMandarin .....................................................................................................16
Table 2.2.6: Data Dictionary for RecapQuestion ......................................................................................................16
Table 2.2.7: Data Dictionary for Report ...................................................................................................................16
Table 3.1: Acronyms and abbreviation……………………………………………………………………………………….
1.1 PROJECT DESCRIPTION
The E-Learning Mandarin Web-Based System (ELMWBS) is a project that was created in
response to the growing need for Mandarin language usage in everyday life. Mandarin, often
known as "Huáyu" is frequently utilized in a variety of professional domains, and knowing it
helps to boost one's credibility. However, because Mandarin is regarded as one of the most
difficult languages to learn, this e-learning program was created to assist individuals in UMP
who wish to learn Mandarin in a simple and convenient manner, as long as they have access to
the internet and a smartphone. The project's objectives are to design for language development.
This website system had two sections, each of which could be broken into three parts:
beginner, intermediate, and advanced. The first section is for language learning, and the second
section is a review created to evaluate the users' understanding of what they learned in the first
segment. After completing both phases, the user should be able to speak or learn basic
Mandarin, which is the goal of this project. This program is designed for any UMP students
that have smart devices, and the target audience includes people of all ages who want to learn
Mandarin in a simple and straightforward manner.
1.2 SYSTEM IDENTIFICATION
This document represents the project title as below:

1.2.1 System Name: E-Learning Mandarin Web-Based System
System Abbreviation: ELMWBS
1.2.2 Detailed Description ID: D <Module number>-<System abbreviation name>-<Year>
Example Detailed Description ID: D01-ELMWBS-2020
1.2.3 Data Dictionary ID: DD <Module number>-<System abbreviation name>-<Year>
Example Data Dictionary ID: DD01-ELMWBS-2020
1.3 ARCHITECTURE / BLUE PRINT

Service Provider
Student
Figure 1.3.1: System Architecture of Proposed System – ELMWBS
Figure 1.3.1 shows the architecture of the E-Learning Mandarin Web-Based System. It
shows that there are two actors or entity that interacted with the system: Student, and Service
Provider. Any data of student and service provider will be saved and are able to be retrieved
from the database. Student will be able to access Learn Mandarin and Recap Question after
logging in into the system. Meanwhile, ServiceProvider will not just be able to access both
sections, but they are also able to update any content as they seem fit. They can manage all the
modules in this system except Register module.
1.4 ARCHITECTURE / BLUEPRINT DESCRIPTION
Figure 1.4.1: Class Diagram UML of Proposed System – ELMWBS
Figure 1.4.1 shows the class diagram for the proposed project. There are four entities of
ELMWBS: which is, Student, tutor, Register and serviceprovider.
1.4.1 Register
Field name Description Use Case ID

userID User id
UC01-ELMA-2020
userType User type
userEmail User email
Table 1.4.1: Description for ELMWBS
1.4.2 Student

studentID Username
UC01-ELMWBS-
studentName User password 2020
studentGender User gender UC03-ELMWBS-
2020
UC04-ELMWBS-
studentTelNumber 2020
User telephone number
UC06-ELMWBS-2020
studentPassword User password
studentAddress User address
Table 1.4.2: Description for Student
1.4.3 Servive Provider

serProID Service Provider id
UC01-ELMWBS-
SerProName Service Provider name
2020
UC03-ELMWBS-
serProGender Service Provider gender 2020
UC04-ELMWBS-
SerProEmail 2020
Service Provider Email
UC06-ELMWBS-
SerProTelNumber Service Provider telephone number 2020
SerProAddress Service Provider address
serProPassword Service Provider password
Table 1.4.3: Description for Admin
1.4.4 Tutor

tutorID Tutor ID
tutorName Tutor Name
tutorAge Tutor Age UC06-ELMA-2020
tutorEmail Tutor Email
Table 1.4.7: Description for Tutor
SOFTWARE DESIGN DESCRIPTION (SDD) FKOM
2.1 DETAILED DESCRIPTION
2.1.1 Login D01-ELMWBS-2020

Description
Responsibility To enable every student and service provider to log in into E-

Learning Mandarin Website with username and password.
Actor Student, Service Provider
Basic Flow BEGIN

1.1 Access the login page.
1.2 Enter username, password.
1.3 Choose role between Student or Service Provider.
1.4 Proceed with clicking “Login” button.
1.5 If every field is entered. [E1]
1.5.1 Retrieve login username and password data. [E2]
1.6 If retrieve successful. [E3]
1.6.1 Proceed to display and bring user to ELMWBS main page
interface.
END
Alternative Flow None
Exceptional Flow E1 – Not every field is entered.

If any of the field is empty.
Display error message: “Please fill all field”.
Continue step in 1.6.
E2 – If retrieve not successful.
Display error message: “Try again”.
Continue step in 1.6.1.
E3 – Invalid Username & Password
Display error message: “Invalid Username & Password”
Table 2.1.1: Table Description and Algorithm for Login
2.1.2 Register D02-ELMWBS-2020

Description
Responsibility To enable new user to access and learn every syllabus and content in
the system.
Actor Student
Basic Flow BEGIN

2.1 Access the register page.
2.2 Enter username, password and email.
2.3 Choose role between Student or Service Provider.
2.4 Proceed with clicking “GO” button.
2.5 If every field is entered. [E1]
2.5.1 Save registration data into database.
2.6 If registration successful. [E2]
2.6.1 Proceed to log in as Student in Login interface.
END
Exceptional Flow E1 – Not every field is entered.

If any of the field is empty.
Display error message: “Please fill all field”.
E2 – Unsuccessful registration
Display error message: “Unsuccessful registration. Please try
again.”
Table 2.1.2: Table Description and Algorithm for Register
2.1.3 Manage LearnMandarin D03-ELMWBS-2020

Description
Responsibility To enable student to view and learn Mandarin language based on

level chosen and also to enable service provider to update any
content in the module.
Basic Flow Student

BEGIN
3.1 Access the Choose Learning Level Interface.
3.2 If Student choose Beginner.
3.2.1 Display Beginner Level of LearnMandarin.
3.2.2 Student may start learning.
3.3 Else if Student choose Intermediate.
3.3.1 Display Intermediate Level of LearnMandarin.
3.4 Else
3.4.1 Display Advance Level of LearnMandarin.
END
Service Provider
BEGIN
3.1 Access the Choose Learning Level Interface.
3.2 If Service Provider choose Beginner.
3.2.1 Display Beginner Level of LearnMandarin.
3.2.2 Service provider may view and update the syllabus. [E1]
3.2.3 If updating successful.
3.2.3.1 Saves updated data in database.
3.3 Student and Service Provider will be able to view updated
syllabus in the interface.
3.4 If Service Provider choose Intermediate.
3.4.1 Display Intermediate Level of LearnMandarin.
3.4.2 Service Provider may view and update the syllabus. [E2]
3.5 Student and Service Provider will be able to view updated
syllabus in theinterface.
3.6 Else
3.6.1 Display Advance Level of LearnMandarin.
3.6.2 Service Provider may view and update the syllabus. [E3]
3.6 Student and Service provider will be able to view updated
syllabus in theinterface.
END
Exceptional Flow E1 – Unsuccessful update for Beginner level

If updating fail or unsuccessful.
Display error message: “Update fail. Try again.”
Continue step 3.4.2
E2 – Unsuccessful update Intermediate level
Continue step 3.5.2
E3 – Unsuccessful update Advance level
Continue step 3.6.2
Table 2.1.3: Table Description and Algorithm for LearnMandarin
2.1.4 Manage RecapQuestion D04-ELMWBS-2020
Description
Responsibility To enable user to recap and test their understanding after the learning
in the LearnMandarin and also to enable service provider to
update anycontent or question.
Actor Student, Service provider
Basic Flow Student

BEGIN
4.1 If Student wanted to recap, clicked ‘YES’ button on the Recap
Option interface.
4.1.1 If Student from Beginner Level LearnMandarin.
4.1.1.1 Display Beginner Level of RecapQuestion.
4.1.1.2 Student may start the recap.
4.1.1.3 Student click the record symbol button for the system
to recognize whether the pronunciation is correct or not.
4.1.2 Else if Student from Intermediate Level LearnMandarin.
4.1.2.1 Display Intermediate Level of RecapQuestion.
4.1.2.2 Student may start recap.
4.1.3 Else
4.1.3.1 Display Advance Level of RecapQuestion.
4.1.3.2 Student may start recap.
4.2 Else
4.2.1 Exit the system application.
END
Service provider
BEGIN
4.1 Access the RecapQuestion interface.
4.2 If service provider choose Beginner level of RecapQuestion.
4.2.1 Display Beginner Level of RecapQuestion.
4.2.2 Service provider may view and update RecapQuestion.
[E1]
4.2.4 Service provider will be able to retrieve the
correctness of thepronunciation from the speech
recognition.
4.3 Service provider and Student will be able to
view updatedRecapQuestion in the interface.
4.4 If service provider choose Intermediate Level of RecapQuestion.
4.4.1 Display Intermediate Level of RecapQuestion.
[E2]
4.5 Student and Service provider will be able to
view updated RecapQuestion in the interface.
4.6 Else
4.6.1 Display Advance Level of RecapQuestion.
[E3]
4.6 Service provider and Student will be able to
view updatedRecapQuestion in the interface.
END
Exceptional Flow E1 – Unsuccessful update for Beginner level of RecapQuestion
Continue step 4.4.2
E2 – Unsuccessful update Intermediate level of RecapQuestion
Continue step 4.5.2
E3 – Unsuccessful update Advance level of RecapQuestion
Continue step 4.6.2
Table 2.1.4: Table Description and Algorithm for RecapQuestion
2.1.5 Manage Tutor D05-ELMA-2020
Description
Responsibility To enable user to view all tutor that is available for further inquiry
after the completion of all difficulty level. Service provider may
add, edit and delete any tutors profile.
Basic Flow Student

BEGIN
5.1 If Student wanted to view the tutor, click ‘TUTOR HELP’
button on the ELMWBS End Recap interface.
5.1.1 Display all tutor that is available.
5.2 If Student want to contact any tutor, click “CONTACT ME”
at any tutor they wanted.
5.2.1 System will connect
and brings student to the
selected tutors whatssapp chat.
END
Service Provider
BEGIN
5.1 Access the Manage Tutor interface.
5.2 Service Provider retrieve the tutor’s information at the
database and system will display all the list.
5.2 Service will click “ADD” button to ass more tutor and fill all
the required field. Service provider click “ADD” to finalize adding
tutor into the database. [E1]
5.2.1 If adding successful.
5.3 Service provider able to delete any tutor by clicking “DELETE”
button.
5.3.1 If deletion is successful, updated list will be displayed and
saved in database.
END
Exceptional Flow E1 – Unsuccessful adding of the tutor
If adding fail or unsuccessful.
Display error message: “Adding fail. Try
again.”Continue step 5.2
Table 2.1.5: Table Description and Algorithm for Manage Tutor
2.2 DATA DICTIONARY
2.2.1 Student DD02-ELMWBS-2020

Field name Description Data Type Constraint
studentID Student id Int (20) PK
studentPassword Student password Varchar (50)
studentName Student name Varchar(10)
StudentGender Student Gender Varchar(10)
studentEmail Student email Varchar(60)
studentAddress Student Address Varchar(60)
Table 2.2.1: Data Dictionary for Student
2.2.2 Service Provider DD03-ELMWBS-2020

serProID Service Provider Int (20) PK
id
serProPassword Service Provider Varchar (50)
password
serProName Service Provider Varchar(10)
name
serProGender Service Provider Varchar(10)
Gender
serProEmail Service Provider Varchar(60)
email
serProAddress Service Provider Varchar(60)
Address
Table 2.2.3: Data Dictionary for Service Provider
2.2.3 Register DD04-ELMWBS-2020

registerID New User id Int (20) PK
Table 2.2.4: Data Dictionary for Register
2.2.4 LearnMandarin DD05-ELMWBS-2020

learnID LearnMandarin id Int (20) PK
Table 2.2.5: Data Dictionary for LearnMandarin
2.2.5 RecapQuestion DD06-ELMWBS-2020

recapID RecapQuestion id Int (20) PK
Table 2.2.6: Data Dictionary for RecapQuestion
2.2.6 Tutor DD07-ELMWBS-2020

tutorID Report id Int (20) PK
TutorName Tutor Name Varchar(10)
tutorAge Tutor Age Int(10)
tutorEmail Tutor Email Varchar(60)
Table 2.2.7: Data Dictionary for Report
3. ACRONYM AND ABBREVIATION

HTML HyperText Markup Language
INT Integer
SDD Software Design Description
PK Primary Key
FK Foreign Key
UC Use Case
Table 3.1: Acronyms and abbreviation
APPENDIX C
USER ACCEPTANCE TEST (UAT)
66
2020
USER
ACCEPTANCE
TEST (UAT)
SYSTEM (ELMWBS)
AYUNI NAFISYA BINTI ABU BAKARR CB18107

Bachelor of Computer Science (Software Engineering)
UATSP_VER 1.0
USER ACCEPTANCE TEST (UAT) FKOM
TABLE OF CONTENT
CONTENT PAGE
TABLE OF CONTENT........................................................................................................... ii
2. TEST REPORT ................................................................................................................ 1
3. SYSTEM TESTING APPROVAL ................................................................................. 5
UAT ELMWBS VER 1.0 ii

1. TEST REPORT
The User Acceptance Testing (UAT) process is the focus of this section. This part will
concentrate on unit testing, which will be based on the table provided below. Any flaws or
errors that are discovered will be noted. The ELMWBS User Acceptance Test template is
shown below.
Table 1: Login module testing
GUI Test Data Expected Result Actual Result Pass/Fail
Login Email field Able to fill in Able to fill in PASS
Password field Able to fill in Able to fill in PASS
User Type Able to click to choose Able to click to PASS

choose
‘Register’ Bring to register page Bring to register PASS

GUI page GUI
Table 2: Register user module testing
Register Email field Able to fill in to Able to fill in to PASS

register register
Gender Able to choose our Able to choose PASS

gender our gender
Tel. Number Able to fill in to Able to fill in to PASS

register register
Address Able to fill in to Able to fill in to PASS

register register
UAT_ELMWBS_VER 1.0 1
Register as Able to choose to Able to choose to PASS
register as ‘Student’ or register as
‘Admin’ ‘Admin’ or
‘Student’
Password field Able to enter password Able to enter PASS

password
‘Register’ button Able to click to Able to click to PASS

complete registering complete
registering
Table 3: Choose Difficulty Level module testing
Choose ‘Beginner’ button Bring to Beginner Bring to Beginner PASS

Difficulty LearnMandarin LearnMandarin
Level GUI GUI
‘Intermediate’ Bring to Bring to PASS

button intermediate Intermediate
LearnMandarin LearnMandarin
GUI GUI
‘Advance’ button Bring to Advance Bring to Advance PASS

LearnMandarin LearnMandarin
GUI GUI
Table 4: Beginner Level LearnMandarin module testing
Beginner Level ‘Audio’ button Voice output of Voice output of PASS

LearnMandarin the Chinese the Chinese
character is heard character is heard
‘Next’ button Bring to next Bring to next GUI PASS

GUI
‘Previous’ button Bring to previous Bring to previous PASS
GUI GUI
Table 5: Intermediate Level LearnMandarin module testing
Intermediate ‘Audio’ button Voice output of Voice output of PASS

Level the Chinese the Chinese
LearnMandarin character is heard character is heard
‘Next’ button Bring to next GUI Bring to next GUI PASS
‘Previous’ button Bring to previous Bring to previous PASS

GUI GUI
Table 6: Advance Level LearnMandarin module testing
Advance Level ‘Home’ button Bring to main page Bring to main page PASS
LearnMandarin GUI GUI
‘Next’ button Bring to next GUI Bring to next GUI PASS
‘Bulb’ button Produce voice of Produce voice of PASS

pronunciation pronunciation
Table 7: Done Beginner Level Interface module testing
Done ‘TEST’ button Able to bring to Able to bring to PASS

Beginner current level test current level test
Level and recap and recap
Interface
‘NEXT LEVEL’ Able to bring to Able to bring to PASS
button next level difficulty next level difficulty
Table 8: Done Intermediate Level Interface module testing

Intermediate current level test current level test
Interface
‘NEXT LEVEL’ Able to bring to Able to bring to PASS

button next level difficulty next level difficulty
Table 9: Done Advance Level Interface module testing

Advance current level test current level test
Interface
Table 10: Done Recap Beginner Level Interface module testing
Done Recap ‘NEXT LEVEL’ Able to bring to Able to bring to PASS

Beginner button next level learning next level
Level difficulty difficulty
Interface
Table 11: Done Recap Intermediate Level Interface module testing
Done Recap ‘NEXT LEVEL’ Able to bring to Able to bring to PASS

Intermediate button next level learning next level
Level difficulty difficulty
Interface
Table 12: Done Recap Advance Level Interface module testing
Done Recap ‘REPORT’ button Able to bring to Able to bring to PASS

Advance Report GUI Report GUI
Level
Interface
Table 13: Report module testing
Report Users marks Able to view own Able to view own PASS
percentage marks marks
USER ACCEPTANCE TESTING (UAT) FKOM
2. SYSTEM TESTING APPROVAL
Name Date
Authenticated by:
Miss Ayuni Nafisya Binti Abu Bakar
Developer
Approved by:

Muhammad Asri Tan
Client
UM_SP_VER 1.0 6

PSM Thesis Cb18107

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

PSM Thesis Cb18107

Uploaded by

Copyright:

Available Formats

E-LEARNING MANDARIN WEB-BASED

AYUNI NAFISYA BINTI ABU BAKAR

BACHELOR OF COMPUTER SCIENCE

UNIVERSITI MALAYSIA PAHANG

DECLARATION OF THESIS AND COPYRIGHT

Author’s Full Name : _ AYUNI NAFISYA BINTI ABU BAKAR

 CONFIDENTIAL (Contains confidential information under the Official

I acknowledge that Universiti Malaysia Pahang reserves the following rights:

1. The Thesis is the Property of Universiti Malaysia Pahang

991020-02-5994 NOORLIN MOHD ALI

CLASSIFICATION OF THESIS AS RESTRICTED

AYUNI NAFISYA BINTI ABU BAKAR

Thesis submitted in fulfillment of the requirements

UNIVERSITI MALAYSIA PAHANG

Projek ini, ‘E-Learning Mandarin Web-Based System’ ataupun ‘ELMWBS’

LIST OF SYMBOLS xii

LIST- OF ABBREVIATIONS xiii

1.1 Background of study 14

1.2 Problem Statement 15

1.3 Goal and Objective 17

1.5 Significance of this Project 18

1.6 Thesis Organization 18

CHAPTER 2 LITERATURE REVIEW 20

2.2 Review of existing systems 20

2.2.4 Comparative analyses of existing systems 24

2.3 Advantages & Disadvantages of Existing Work / Project 27

2.4 Proposed Project 28

3.2.1 Requirements Planning 31

3.2.2 User Design 31

3.3 Use Case Diagram and Context Diagram 34

3.5 Architecture / Blue Print 35

3.6 System Requirement 36

3.6.1 Hardware Requirement 36

3.6.2 Software Requirement 37

CHAPTER 4 RESULT AND DISCUSSIONS 41

4.2.1 Create project - Sublime 41

4.2.2 Web Server Connection - XAMPP 42

4.3 System User Interface 44

4.3.1 Homepage Interface 44

4.3.2 Login Interface 45

4.3.3 Register Interface 46

4.3.4 Choose Difficulty Level Interface 47

4.3.5 Learning Module – Beginner Level Interface 48

4.3.6 Recap Module – Beginner Level Interface 56

4.3.7 Learning Module – Intermediate Level Interface 64

4.3.8 Recap Module – Intermediate Level Interface 72

4.3.9 Learning Module – Advance Level Interface 81

4.3.10 Recap Module – Advance Level Interface 92

4.4 Source Code 103

4.5 Testing and Result Discussion 104

CHAPTER 5 CONCLUSION 105

5.1 Introduction 105

5.2 Project Constraint 106

5.2.1 System constraint 106

5.3 Future work 106

APPENDIX B Software Design Document (SDD) 65

APPENDIX C User Acceptance Test (UAT) 66

Table 1.1: Summary of Problem Statements ................................................................... 16

Table 2.1: Summary of the existing systems ................................................................ 25

Table 2.2: Advantages and disadvantages for existing systems ................................... 26

Table 3.3.1: Use Case Functionality ................................................................................ 35

Figures 2.2.1.1: Example of TutorMing Interface ............................................................................ 21

SRS Software Requirement Specification