<FOREIGN LANGUAGE

LEARNING>
CSC264
Final Report
Group Web-Based System

SEMESTER MARCH-AUGUST 2024

GROUP: M3CDCS1104A

Fatin
Siti
Adawiyah
Ina
TABLE OF CONTENT

NO. TITLE PAGE NO

1.0 Organizational chart 3

2.0 Introduction 4

3.0 Objectives 4

4.0 Flowchart for each user

4.1 Admin 5-6
4.2 Student

5.0 User Interface 7 - 25

5.1​Admin
5.2​Student

6.0 Frontend Development (HTML, CSS, JavaScript)

6.1 Admin 26 - 56
6.2 Student

7.0 Backend Development with PHP (Codes development) 57 - 59

7.1 Admin
7.2 Student

8.0 Database Design (PHPMyAdmin) 60 - 62

9.0 User Authentication and Authorization (Log In, Security) 63 - 64

10.0 Testing
10.1 Unit Testing
10.2 Integration testing 65 - 90
10.3 System Testing

11.0 User Interface and Experience (Usability Testing) 91 - 95

12.0 References 96

13.0 Appendix 97 - 99

2
1.0 ORGANIZATIONAL CHART

3
2.0 INTRODUCTION

Our company’s name is 2Lingo. This company's purpose is to make learning multiple
languages more convenient for people to gain knowledge. 2Lingo uses a web-based
language learning application that provides interactive lessons like quizzes made for users
who are looking to learn a new language with interesting features. Our platform creates a
modern tool to learn different types of languages for better understanding to help people
innovatively learn various languages. In most cases people are lacking language skills which
make it difficult for them to interact with natives when they are traveling overseas. In
conclusion, by developing this website, we aim to solve this problem to help people
communicate in expressing their true feelings, thoughts, and experiences.

3.0 OBJECTIVES

1.​ To build relationships and connect with people from different language backgrounds.
2.​ To enjoy multilingual media such as understanding foreign movies, songs and books.
3.​ To enhance writing skills in spelling, grammar and vocabulary of multiple languages.

4
4.0 FLOWCHART FOR EACH USER
4.1 ADMIN

5
4.2 STUDENT

6
5.0 USER INTERFACE
5.1 ADMIN

Step 1 : To login, admin needs to click the “Admin navigation” button at the top. Since admin
data is manually inserted in the database, only the admin can login to this page. They must
enter their name and password then click “LOGIN” to access the system.

If they entered a wrong name or password, the text area will be reset to empty. Meaning
that, they must enter a valid name and password.

Step 1.1 : A welcome pop-up message with the admin name will appear after successfully
login. Then the admin can click “OK” to go to the next page.

7
Step 2 : Admin dashboard will appear. The admin will get access to “VIEW STUDENTS
RECORDS”, “SEARCH STUDENT RECORDS”, “DELETE STUDENTS RECORDS”,
“UPLOAD LESSON”, “VIEW UPLOADED LESSON” and “UPDATE UPLOADED LESSONS”.

Step 3 : For instance, if the admin wants to view students' records, they can click on the
“VIEW STUDENTS RECORDS” button. This page contains the list of students registered in
the system with their ID, NAME and EMAIL. To return to the admin dashboard, click the
“BACK TO HOME” button.

8
Step 4 : By clicking the “SEARCH STUDENT RECORDS” button, admin can look up specific
students' details by their ID. For example, student's ID number 1. They can input the number
in the text box and click the “Search Student ID” button. Then the students' details will show
up. To return to the admin dashboard, click the “BACK TO HOME” button.

Step 5 : To delete any student records, admin can click the “DELETE STUDENT
RECORDS" button. The list of students will appear with an action row “delete”. Admin can
click it to delete any records.

9
Step 5.1 : For example, the admin wants to delete student ID number 10. Once the “delete”
action is clicked from the record, an alert message will pop-up to confirm the deletion.

Step 5.1.1 : If the admin clicks “OK”, a pop-up message will appear as the record is
successfully deleted. Then click “OK” again to return to the delete student page and see that
the record has been deleted.

10
 Student ID number 10 is removed

Step 5.1.2 : If they click “Cancel”, the deletion will not occur and the student record will still
be recorded. The admin can click the “BACK TO HOME” button to return to the admin
dashboard.

Step 6 : To upload lesson questions, admin must click the “UPLOAD LESSON" button. Once
clicked, the admin needs to choose the language they want to upload. For instance, English.

11
Step 6.1 : Once the language is chosen, a page to add a lesson will appear. Admin must
insert the Question, Option A, B, C ,D and the Correct Option. When completed, they need
to click the “Add Lesson” button to upload the lesson into the database.

Step 6.2 : A pop-up message will appear if the lesson is added successfully. Click “OK” to
return back to the page.

12
Step 7 : To view all the uploaded lesson records, admin needs to go to the “VIEW
UPLOADED LESSON" button. Once clicked all the records will be displayed with the lesson
ID, LANGUAGE, OPTION A, B, C, D and CORRECT OPTION. To return to the admin
dashboard, click the “BACK TO HOME” button.

Step 8 : To modify and delete any uploaded lesson, admin needs to click “UPDATE
UPLOADED LESSON”. The below page will appear. A text box search and all the lesson list
will be displayed with an action row “edit” “delete”.

13
Step 8.1 : To make it easier, the admin can search the lesson by language by inserting the
language in the text box then clicking the “Search Lesson Language" button. For instance,
English. When the button is clicked, only the list of English language lessons will be shown.

Step 8.2 : If the admin wants to edit a record, they can click the “edit” action. For example,
lesson ID number 1. The page will go to the edit lesson page. Admin can modify any column
in the lesson. For instance, admin wants to change Option B to “Mouse”. To confirm, they
can click the “Submit” button.

Unmodified Record

14
 Modified Record

Step 8.2.1 : Once clicked, a pop-up message will appear as the record is successfully
modified. Then click “OK”, to return to the update lesson page.

15
Step 8.3 : If the admin wants to delete a record, they can click the “delete” action. For
example, lesson ID number 2. Once clicked, an alert message will pop-up to confirm the
deletion.

Step 8.3.1 : If the admin clicks “OK”, a pop-up message will appear as the record is
successfully deleted. Then click “OK” again to return to the update page and see the deleted
record.

16
 Lesson ID number 2 is removed

Step 8.3.2 : If they click “Cancel”, the deletion will not occur and the lesson record will still be
recorded. The admin can click the “BACK TO HOME” button to return to the admin
dashboard.

Step 9 : Lastly, after the admin has finished with their task, they need to logout from the
system by clicking the “Logout” navigation button at the top. Then they will be directed back
to the registration page.

17
5.2 STUDENT

Step 1 : This is our website's home page. Students can sign up by clicking the “Register
Now !!” button to join our website.

Step 2 : Students can access more information about us by using the "About Us" option
located in the top menu navigation.

18
Step 3 : In order to learn more about our website, students can reach us by phone or by
clicking the email icon or link in this webpage.

Step 4 : If the students want to join our website, they must fill out the student details on this
webpage in order to register after clicking the "Register Now !!” button on the homepage.
This is the requirement before they can access the website. Next, click “REGISTER” to go to
the next page.

19
Step 4.1 : A notification message (pop-up) will appear at the top of the webpage to let the
student know when they have successfully registered. Click “OK” to go to the next page.

Step 5 : After registration, students will be directed to the Login Page. Students must insert
their name and password correctly, then click the “Login” button.

20
Step 5.1 : A welcoming notification message (pop-up) will show at the top of the page to
greet students to the website when they have successfully logged into their accounts. Go to
the next page, then click the "OK" button.

Step 6 : After that, students can view the language package available on the website by
using this page as a lesson plan for them to choose the quiz language they want. Then, click
“START LESSON” to start the quiz.

21
Step 7 : Next, students can choose any language they want to start the quiz on this
webpage. We provided three languages in the website which are Korean, Arabic and English
for our users.

Step 8 : The student will be directed to this page to answer the question that the
administrator has uploaded.
If they click the Korean language quiz, the questions will appear. After answering the
question, click the “Submit” button to view the score.

Korean Quiz

22
Arabic Quiz

English Quiz

23
Step 9 : The score webpage will show up once they have responded to the question so they
can see their score. In case they receive an incorrect answer, students have the option to
verify the correct answer. When finished, students can return to the previous webpage by
clicking the “BACK TO HOME” button.

Step 10 : Students can exit the website by using the “Logout” button found in the top menu
navigation to exit from the website.

24
Step 11 : Students may press the back button to return to the home page after clicking the
“Logout" button, which will cause this page to appear as a thank you for joining us.

25
6.0 FRONT END DEVELOPMENT (HTML, CSS, JavaScript)

​
6.1 Admin

headerFooter.css

26
lesson.php

27
lesson.css

28
Home.php

29
About.php

30
Contact.php

31
adminLoginPage.php

32
adminHome.php

33
viewStudent.php

34
35
searchStudent.php

36
37
languageAdmin.php

38
deleteStudent.php

39
40
view_lesson.php

41
42
addLesson.php

43
44
search_edit_deleteLesson.php

45
46
edit_lesson.php

47
48
thankYouPage.php

49
6.2 Student

registration.php

50
studentLoginPage.php

51
lesson.php

52
languageStudent.php

53
answerLesson.php

54
55
56
7.0 BACKEND DEVELOPMENT WITH PHP (Codes development)

ADMIN

adminLogin.php

delete_lesson.php

57
STUDENT

studentRegister.php

58
studLogin.php

59
8.0 DATABASE DESIGN (PHPMYADMIN)

This is the database design for a PHPMyAdmin module used for Foreign Language
Learning. Basically, there are three tables in our project which are lesson, student and
admin. The relationship in this system is many to many and table Lesson functions as a
composite entity that connects the table admin and student. Multiple lessons can be
uploaded by an admin, and multiple lessons can be taken by a student through our system.
Additionally, we manually enter data into the system only for the table admin and all other
data must be stored via the website.

60
This is the attributes in our database system PHPMyAdmin :

Admin

Student

Lesson

61
Data Dictionary :

Admin

Student

Lesson

62
9.0 USER AUTHENTICATION AND AUTHORIZATION (LOG IN, SECURITY)

ADMIN

Admin does not need to register. The admin only needs to key in their name and password
before getting access to the website. If the admin leaves the field empty, a mini pop-up will
notify the admin to fill out the empty field.

Meanwhile, if the admin entered a wrong name or password, the field will reset to empty
meaning that the admin must enter a valid name and password first before getting the
access to the website.

63
STUDENT

If the unregistered student tries to login into the website, an alert message will appear to
remind them to register first. After the registration is successful, they can login to the website
as usual. This is to make sure our system cannot be accessed by the unauthenticated users.

Unregistered student

Alert message appear

64
10.0 TESTING
10.1 UNIT TESTING

ADMIN

Test Case #: 1 Test Case Name: Login Page Admin

Interface

System: Foreign Language Learning Subsystem: Login

Designed by: Siti Nurazwani Design Date: 10/6/2024

Executed by: Fatin Najihah Execution Date: 21/6/2024

Short Description: Test if the Admin can interact with the login interface

Pre-conditions
●​ AdminName
●​ AdminPassword

Step Action Expected System Pass/Fail Comment

Response

1 Enter a valid Name The admin name and Pass

and Password into password successfully
the designated field. entered, and the field
accepts the input. The
Password is
successfully entered,
and the characters are
masked for security

2 Click on the “Login” The system validates Pass/Fail (if

button. The system the Name and any or both of
validates the Password and grants the credentials
AdminName and access to the user’s are incorrect
AdminPassword and or entered with

65
 grants access to the account if the an empty field,
user’s account if the credentials are correct. the system will
credentials are display an
correct. appropriate
error message
indicating the
failure.)

3 Click on Login button Redirected the button Pass(only if all

Login to the Admin the credentials
Dashboard are correct)

Post-conditions
Login Admin :
●​ Successfully logged in to the admin’s interface

66
Test Case #: 2 Test Case Name: Admin Home Page
Interface

System: Foreign Language Learning Subsystem: Admin Homepage

Designed by: Fatin Najihah Design Date: 10/6/2024

Executed by: Nurun Nabahatil Execution Date: 21/6/2024

Short Description: Test if the Admin can interact with the interface

Pre-conditions
●​ AdminName
●​ AdminPassword

Step Action Expected System Response Pass/Fail Comment

1 Click on each Redirected the button of: Pass

navigation bar • Home to Home Page
button • About to About Page
• Contact to Contact Page.
• Logout to ThankYou Page

67
2 Click on each Redirected the button of: Pass
button • VIEW STUDENT RECORDS
to View Students Records Page
• SEARCH STUDENTS
RECORDS to Search Student
Record Page
• UPLOAD LESSON to Add
Lesson Page.
• DELETE STUDENT
RECORDS to Delete Student
Record Page
• VIEW UPLOADED LESSON to
View Lesson Records Page
• EDIT UPLOADED LESSON to
Edit Lesson Page.

Post-conditions
Admin successfully viewed, searched, uploaded, deleted and edited students/lesson
records.

STUDENT

Test Case #: 3 Test Case Name: Login Page Student

Interface

System: Foreign Language Learning Subsystem: Login

Designed by: Ina Norshafina Design Date: 10/6/2024

Executed by: Siti Nurazwani Execution Date: 21/6/2024

Short Description: Test if the Student can interact with the login interface

Pre-conditions
●​ StudName
●​ StudPassword

68
Step Action Expected System Pass/Fail Comment
Response

1 Enter a valid The student name and Pass

Name and password successfully
Password into entered, and the field
the designated accepts the input. The
field. Password is successfully
entered, and the
characters are masked
for security

2 Click on the The system validates the Pass/Fail (if any

“Login” button. Name and Password and or both of the
The system grants access to the credentials are
validates the user’s account if the incorrect or
StudName and credentials are correct. entered with an
StudPassword empty field, the
and grants system will
access to the display an
user’s account if appropriate
the credentials error message
are correct. indicating the
failure.)

3 Click on Login Redirected the button Pass(only if all

button Login to the Student the credentials
Dashboard are correct)

Post-conditions
Login Student :
●​ Successfully logged in to the student’s interface

69
Test Case #: 4 Test Case Name: Home Page Student
Interface

System: Foreign Language Learning Subsystem: Student Homepage

Designed by: Siti Nurazwani Design Date: 10/6/2024

Executed by: Nurun Nabahatil Execution Date: 21/6/2024

Short Description: Test if the Student can interact with the interface

Pre-conditions
●​ StudName

70
 ●​ StudPassword

Step Action Expected System Pass/Fail Comment

Response

1 Click on each Redirected the button of: Pass

navigation bar • Home to Home Page
button • About to About Page
• Contact to Contact
Page
• Logout to ThankYou
Page

2 Click on START Redirected the button to Pass

LESSON button choose language lesson
to answer quiz

Post-conditions
Student successfully starts the lesson.

10.2 INTEGRATION TESTING

ADMIN

Test Case #: 1 Test Case Name: Admin Login

Integration

71
System: Foreign Language Learning Subsystem: Authentication, Admin
Dashboard(Admin HomePage)

Designed by: Nurun Nabahatil Design Date: 10/6/2024

Executed by: Siti Nurazwani Execution Date: 21/6/2024

Short Description: Test if the Admin can interact with the dashboard interface

Pre-conditions
●​ Authentication service is operational
●​ Admin account exists

Step Action Expected System Pass/Fail Comment

Response

1 Admin logs in Authentication service Pass(If admin

with correct verifies credentials, account are login
credentials and admin is correctly)
redirected to the admin Fail(if there are
dashboard. integration issues
or if account are
not retrieved
properly)

Post-conditions
●​ Admin session is active
●​ Admin dashboard is displayed

72
Test Case #: 2 Test Case Name: View Student
Integration

System: Foreign Language Learning Subsystem:Admin Dashboard,

Student Database

Designed by: Nurun Nabahatil Design Date: 10/6/2024

Executed by: Siti Nurazwani Execution Date: 21/6/2024

Short Description: Test the integration between the admin interface and the student
database subsystem.

Pre-conditions
●​ Admin is logged into the system
●​ Student with a specific ID exists in the database

Step Action Expected System Pass/Fail Comment

Response

1 Admin clicks on Student records are Pass(If student

the “VIEW retrieved and records are
STUDENT displayed correctly. displayed
RECORDS” correctly)
button Fail(if there are
integration issues
or if records are
not retrieved
properly)

Post-conditions
●​ Student records are displayed on the admin interface.

73
Test Case #: 3 Test Case Name: Search Student
Record Integration

System: Foreign Language Learning Subsystem:Admin Dashboard,

Student Database

Designed by: Nurun Nabahatil Design Date: 10/6/2024

Executed by: Siti Nurazwani Execution Date: 21/6/2024

Short Description: Validates the integration of search functionality with student

records

Pre-conditions
●​ Admin is logged into the system
●​ Student with a specific ID exists in the database

Step Action Expected System Pass/Fail Comment

Response

1 Admin clicks on The system should display a Pass

the “SEARCH search input field (where the
STUDENT admin can enter the student
RECORDS” ID) and a SEARCH button.
button

2 Admin enters a The system validates the Pass

specific student entered student ID.
ID into the search
field

74
3 Admin clicks the The system filters student Pass( The
“Search Student records based on the student ID is
ID” button entered student ID and available in
matching student records the database
are displayed in a list and matching
format. records are
displayed.)
Fail( The
student ID is
not available
in the
database,
and no
records are
displayed.)

Post-conditions
●​ Admin can view the student records entered before.

75
Test Case #: 4 Test Case Name: Upload Lesson
Integration

System: Foreign Language Learning Subsystem: Lesson database ,

Lesson Management

Designed by: Ina Norshafina Design Date: 10/6/2024

Executed by: Fatin Najihah Execution Date: 21/6/2024

Short Description: Verifies the integration between lesson management and lesson
database for creating and storing quiz-based lessons.

Pre-conditions
●​ Admin is logged into the system and on the lesson upload page.

Step Action Expected System Pass/Fail Comment

Response

1 Admin creates a Lesson (quiz) is stored Pass

new quiz directly correctly in the lesson
on the lesson database, including
answer options and

76
 upload page and the correct answer. A
uploads it. confirmation message
is displayed.

2 Admin click on The system will display Pass

language button an add lesson page for
for any language the admin to upload.
they want to
upload

3 Admin clicks on The system should Pass

the “Add Lesson” successfully upload
button the lesson in view
webpage.

Post-conditions
●​ The new lesson is available in the system.

Test Case #: 5 Test Case Name: Delete Student

Records Integration

System: Foreign Language Learning Subsystem: Student Management ,

Database

Designed by: Ina Norshafina Design Date: 10/6/2024

Executed by: Fatin Najihah Execution Date: 21/6/2024

Short Description: Verifies the integration of the delete functionality with the student
records database

Pre-conditions
●​ Admin is logged into the system
●​ Student with a specific ID exists in the database

77
Step Action Expected System Pass/Fail Comment
Response

1 Admin clicks on The system should Pass

the “DELETE redirect to a page
STUDENT listing all student
RECORDS” records with a delete
button. button next to each
record.

2 Admin clicks the The system should Pass

“delete” button display a delete
next to the confirmation dialog
specific student then immediately
record. proceed with deletion.

Post-conditions
●​ Admin can confirm that the student record is deleted by verifying its absence
from the student records list.

Test Case #: 6 Test Case Name: View Uploaded

Lesson Integration

System: Foreign Language Learning Subsystem: Lesson Management ,

Database

Designed by: Ina Norshafina Design Date: 10/6/2024

Executed by: Fatin Najihah Execution Date: 21/6/2024

Short Description: Verifies the integration of viewing uploaded lessons with the
lesson database.

78
Pre-conditions
●​ Admin is logged into the system
●​ Lessons are uploaded and available in the database.

Step Action Expected System Pass/Fail Comment

Response

1 Admin clicks on The system displays a Pass

the “VIEW list of uploaded
UPLOADED lessons.
LESSON” button

Post-conditions
●​ Admin can view the list of uploaded lessons.

Test Case #: 7 Test Case Name: Edit Uploaded

Lesson

System: Foreign Language Learning Subsystem: Lesson Management ,

Database

Designed by: Fatin Najihah Design Date: 10/6/2024

79
Executed by: Siti Nurazwani Execution Date: 21/6/2024

Short Description: Verifies the integration of editing uploaded lessons with the lesson
database.

Pre-conditions
●​ Admin is logged into the system
●​ Lessons are uploaded and available in the database.

Step Action Expected System Pass/Fail Comment

Response

1 Admin clicks on The system displays a Pass

the “EDIT list of uploaded
UPLOADED lessons with an option
LESSON” button to edit each lesson.

2 Admin selects a The system updates Pass

lesson to edit and the lesson details in
makes changes the database.

Post-conditions
●​ Admin can confirm that the lesson details are uploaded.

STUDENT

80
Test Case #: 8 Test Case Name: Student Login
Integration

System: Foreign Language Learning Subsystem: Authentication, Student

Lesson Page

Designed by: Siti Nurazwani Design Date: 10/6/2024

Executed by: Ina Norshafina Execution Date: 21/6/2024

Short Description: Test if the Student can interact with the student’s lesson interface

Pre-conditions
●​ Authentication service is operational
●​ Student account exists

Step Action Expected System Pass/Fail Comment

Response

1 Student logs in Authentication service Pass (If all of the

with correct verifies credentials, credentials are
credentials and the student is correct)
redirected to the
student lesson page.

Post-conditions
●​ Student session is active
●​ Student lesson page is displayed

81
Test Case #: 9 Test Case Name: Start Lesson

System: Foreign Language Learning Subsystem: Student Lesson Plan

Page

Designed by: Siti Nurazwani Design Date: 10/6/2024

Executed by: Nurun Nabahatil Execution Date: 21/6/2024

Short Description: Test if the Student can interact with the language student’s
interface.

Pre-conditions
●​ Student account exists

Step Action Expected System Pass/Fail Comment

Response

1 Students click The system displays a Pass

the “START list of languages for
LESSON” button. the lesson plans.

Post-conditions
●​ Student lesson plan page is displayed
●​ Student start lesson is displayed

82
Test Case #: 10 Test Case Name: Start Language
Quiz

System: Foreign Language Learning Subsystem: Language quiz

Designed by: Siti Nurazwani Design Date: 10/6/2024

Executed by: Ina Norshafina Execution Date: 21/6/2024

Short Description: Test if the Student can interact with the language student’s
interface.

Pre-conditions
●​ Student account exists
●​ Language and lesson with a specific ID exists in the database

Step Action Expected System Pass/Fail Comment

Response

1 Students clicks The system displays a Pass

on one of the list of languages to
language start start the quiz.
quiz buttons
(e.g., "Arabic")

2 Students answer The system displays Pass

the lesson quiz, the score and the
then click the correct answer in the
“Submit” button. webpage.

83
Post-conditions
●​ Student score and correct answer page is displayed

10.3 SYSTEM TESTING

ADMIN

Test Case #: 1 Test Case Name: Complete Admin

Workflow

System: Foreign Language Learning Subsystem: Authentication Lesson

Management, Student Management,
Database

Designed by: Fatin Najihah Design Date: 10/6/2024

Executed by: Siti Nurazwani Execution Date: 21/6/2024

Short Description: Validates the complete workflow for admin functionalities from
login to lesson management.

Pre-conditions
●​ Admin credentials are set up in the system.
●​ Students and lessons exist in the database

84
Step Action Expected System Pass/Fail Comment
Response

1 Admin logs in with Admin is logged in and Pass (If all of

correct credentials redirected to the the
dashboard. credentials
are correct)

2 Admin clicks on the The system displays a Pass

“VIEW STUDENT list of student records.
RECORDS” button

3 Admin clicks on the The system displays a Pass

“SEARCH STUDENT search input field and a
RECORDS” button SEARCH button.

4 Admin enters a The system filters Pass

specific student ID student records based
into the search field on the entered student
and clicks the ID and displays
“SEARCH” button matching records.

5 Admin clicks on the The system displays all Pass

“DELETE STUDENT student records in a
RECORDS” button table format, with a
DELETE button for each
record.

6 Admin clicks the The system removes the Pass

DELETE button next student record and
to a specific student updates the table to
record reflect the deletion.

85
7 Admin clicks on the The system displays Pass
“UPLOAD LESSON” options to select the
button language (Korean,
Arabic, English) with
buttons for each
language.

8 Admin clicks on one The system redirects to Pass

of the language the lesson upload page
buttons (e.g., for the selected
"Korean") language.

9 Admin fills in the The system stores the Pass

question field, the lesson and displays a
answer fields (a, b, c, confirmation message.
d), and the correct
answer field with the
correct option (a, b, c,
or d), then clicks the
“ADD LESSON”
button

10 Alternatively, admin The system redirects Pass

clicks on the “BACK back to the admin
TO ADMIN dashboard without
DASHBOARD” button saving the lesson.
on the lesson upload
page

11 Admin clicks on the The system displays a Pass

“VIEW UPLOADED list of uploaded lessons.
LESSON” button

86
12 Admin clicks on the The system displays a Pass
“EDIT UPLOADED list of uploaded lessons
LESSON” button with an option to edit
each lesson.

13 Admin selects a The system updates the Pass

lesson to edit, makes lesson details in the
changes, and saves database and displays a
the updates confirmation message.

Post-conditions
●​ The system correctly reflects all changes made by the admin during the test
(e.g., deleted student records, uploaded lessons, edited lessons).

Test Case #: 2 Test Case Name: Security Testing -

Unauthorized Access

System: Foreign Language Learning Subsystem: Authentication

Designed by: Ina Norshafina Design Date: 10/6/2024

Executed by: Siti Nurazwani Execution Date: 21/6/2024

Short Description: Verifies that non-admin users cannot access the admin
dashboard.

Pre-conditions

●​ User credentials (non-admin) are set up in the system which is student.

Step Action Expected System Pass/Fail Comment

Response

87
1 Non-admin user Access denied(user is Pass (If all of the
attempts to redirected to the admin credentials are
access the admin login page which correct)
dashboard URL means user need to
directly enter the correct
credentials in order to
access admin
dashboard)

Post-conditions
●​ Non-admin users cannot access the admin dashboard.

Test Case #: 3 Test Case Name: Performance

Testing - Load Test

System: Foreign Language Learning Subsystem: Entire System

Designed by: Fatin Najihah Design Date: 10/6/2024

Executed by: Siti Nurazwani Execution Date: 21/6/2024

Short Description: Validates the system's performance under load.

Pre-conditions

88
 ●​ Multiple admin users are set up in the system.

Step Action Expected System Pass/Fail Comment

Response

1 Simulate 4 admin System maintains Pass

users performing acceptable response
various actions times and performance
(e.g., logging in, without errors.
searching records,
uploading
lessons)
simultaneously.

Post-conditions
●​ The system remains stable and responsive under load.

STUDENT

Test Case #: 4 Test Case Name: Complete Student

Workflow

89
System: Foreign Language Learning Subsystem: Students and lessons
management.

Designed by: Nurun Nabahatil Design Date: 10/6/2024

Executed by: Fatin Najihah Execution Date: 21/6/2024

Short Description: Validates the complete workflow for student functionalities from
login to logout management.

Pre-conditions
●​ Student credentials are set up in the system.
●​ Students and lessons exist in the database.

Step Action Expected System Pass/Fail Comment

Response

1 Student logs in with Students are logged in Pass (If all of

correct credentials and redirected to the the
dashboard. credentials
are correct)

2 Student clicks on The system displays a list Pass

the “START of language quizzes.
LESSON” button

3 Student clicks on The system redirects to Pass

one of the language the lesson quiz page for
buttons (e.g., students to answer the
"English") question.

4 Student answer the The system stores the Pass

question , then lesson and displays a
clicks the “Submit” question that has been
button uploaded by the admin.

90
5 Students view the The system stores the Pass
score and the score and the correct
correct answer. answer for the question in
the webpage.

6 Alternatively, The system redirects Pass

student clicks on the back to the started lesson
“BACK TO HOME” plans page.
button on the
answer score
lesson page

Post-conditions
●​ The system correctly reflects all the students quiz page(e.g. start lesson).

91
Test Case #: 5 Test Case Name: Security Testing -
Unauthorized Access

System: Foreign Language Learning Subsystem: Authentication

Designed by: Nurun Nabahatil Design Date: 10/6/2024

Executed by: Siti Nurazwani Execution Date: 21/6/2024

Short Description: Verifies that non-admin users cannot access the admin
dashboard.

Pre-conditions

●​ User credentials (non-student) are set up in the system which is student.

Step Action Expected System Pass/Fail Comment

Response

1 Non-student Access denied(user is Pass (If all of the

user attempts to redirected to the student credentials are
access the login page which means correct)
student URL user need to enter the
directly correct credentials in
order to access student
login system )

Post-conditions
●​ Non-student users cannot access the student login system.

92
Test Case #: 6 Test Case Name: Performance
Testing - Load Test

System: Foreign Language Learning Subsystem: Entire System

Designed by: Fatin Najihah Design Date: 10/6/2024

Executed by: Ina Norshafina Execution Date: 21/6/2024

Short Description: Validates the system's performance under load.

Pre-conditions

●​ Multiple student users are set up in the system.

Step Action Expected System Pass/Fail Comment

Response

1 Simulate 5 System maintains Pass

student users acceptable response
performing times and performance
various actions without errors.
(e.g., logging in,
starting lessons,
submitting scores
) simultaneously.

Post-conditions

93
 ●​ The system remains stable and responsive under load.

11.0 USER INTERFACE AND EXPERIENCE (USABILITY TESTING)

Table 10.1 Total Score for 5 Respondents based on System Usability Scale

Respondents 1 2 3 4 5

A total score
of the 82.5 90 97.5 95 85
application

94
95
96
97
98
12.0 REFERENCES

1.​ Wiley Online Library (June 2024). Language Learning A Journal of Research in
Language Studies[Website]. Retrieved from
https://onlinelibrary.wiley.com/journal/14679922

2.​ Cnet (Jan 1, 2024). Best Language Learning Apps for 2024[Website]. Retrieved from
https://www.cnet.com/tech/services-and-software/best-language-learning-apps/

3.​ The Learning Center (Feb 20, 2024). Learning Languages[Website]. Retrieved from
https://learningcenter.unc.edu/tips-and-tools/learning-a-second-language/

99
 4.​ Mr. Web Designer (Oct 1, 2022). Complete Responsive Online Education Website
Design Using HTML/CSS/JS/PHP-Demo[YouTube]. Retrieved from
https://www.youtube.com/watch?v=wvu37Ze0HmE

5.​ Planics dev (Jun 11, 2020). E-class System using PHP | academy Site | E-learning
Management system| ELMS | 2020 | PHP Project[YouTube]. Retrieved from
https://www.youtube.com/watch?v=-Gtlo6wMDPs

13.0 APPENDIX

APPENDIX A

Conduct testing with 5 users and analyze the SUS score. You can distribute the test via
Google Forms.

References :
https://usabilitygeek.com/how-to-use-the-system-usability-scale-sus-to-evaluate-the-usability
-of-your-website/

How to calculate usability SUS score

The odd and even-numbered responses are scored individually; here’s how:

100
 1.​ Add up the responses for the odd-numbered questions. Then, subtract 5 from the
total for the odd score.
2.​ Add up the responses for the even-numbered questions. Then, subtract the total from
25 for the even score.
3.​ Add your odd and even scores, and multiply the total by 2.5 for your SUS score out
of 100.

The scores should not be interpreted as percentages because they are percentile ranks.

What does the SUS score mean?

A score of 80 or higher equates to exceptional usability and will be placed in the top 10% of
apps. While scores below 50 are not acceptable.

101
102
 APPENDIX B

Diagram 12.1 shows the Entity Relationship Diagram (ERD) of this project

103