Chapter Three: System Design 3

L
 Sequence diagram 1.3

A sequence diagram simply depicts the interaction between objects in sequential order. The
purpose of a sequence diagram is to visualize the sequence of message flow in a system. A
sequence diagram shows the interaction between life lines as a chronological sequence of
events. A sequence diagram shows the execution of a scenario in a system. Life lines
participate in a system during the execution of a system. In a sequence diagram, a life line is
represented by a vertical bar. The flow of messages between two or more objects is
represented by a vertical dotted line running across the bottom of the page. Different types
...of messages are used, and

.Also use repetition and branching

Figure (13) User sequence diagram

 This sequence diagram shows the interaction between the user and the educational
platform. The user accesses the platform, views the dashboard, browses and registers for
courses, performs actions such as viewing lessons, tracking progress, updates their profile,
communicates with a support agent, provides feedback, and finally logs out The diagram
captures the flow of events from user interaction to system responses Basic, including user
.authentication, course enrollment validation, and profile updates

Page break

XXVIII

29/55

Admin Educational Platform

 Access Educational Platform

Display Admin Dashboard

Manage Courses

Show Course Management interface

Add New Cou

Provide Course Details

Figure (2-3) Sequence diagram for the supervisor

Validate Course Information

Course Added Successfully

Update Course (Course (D)

Provide Updated Course Details

Validate Updated Course information

Course Updated Successfully

 Delete Course (Course ID)

Confirm Deletion

Validate Course Deletion

Course Deleted Successfuly

Manage Users

Show User Management interface

View User Details (User ID)

Display User information

Update User Details (User ID)

Provide Updated User information

Validate Updated User Information Details

User Detals Updated Successfully

This sequence diagram depicts the interaction between the administrator, the course
management platform, and the user. The administrator accesses the platform, views the
admin dashboard and manages courses by adding, updating and deleting them. In addition
to managing users by viewing, updating and deleting the user. Each procedure includes
platform interactions, including validation steps
 Delete User (User ID)

Confirm Deletion

Vaidate User Deletion

User Deleted Successfully

Logout

Display Logout Message

Course and user information. The diagram captures the flow of events

XXX

From administrator inputs to platform responses, incl

Successful course additions, updates, and deletions, as well as actions

User Administration The sequence ends with the administrator logging off and displaying the
system

.Primary logout message

Page break
 31/55

ERD diagram 2.3

An entity-relationship diagram (ERD) is a visual representation of a data model that

describes the relationships between entities within a system or database. It is a powerful
tool used in database design to illustrate the logical structure of a database and how
different entities interact with each other. ERDS uses different symbols to represent entities,
 attributes, and relationships, providing a clear and concise way to communicate the basic
.data structure of the system

Figure (13) ERD diagram

This class diagram represents entities and their relationships. Entities include Administrator,
User, Category, Subcategory, Course, Lesson, Enrollment, and Progress

Figure (13) ERD diagram

This class diagram represents entities and their relationships. Entities include Administrator,
User, Category, Subcategory, Course, Lesson, Enrollment, and Progress

User, Review, Contact Each entity has its own attributes, such as ID, name, email, status, etc.
Relationships are depicted with associations, indicating how the entities are related For
 example, Administrator and User have an association that indicates that the administrator
manages the users. Likewise there are associations between category and subcategory,
category and course, subcategory and course, course and lesson, user, registration and user,
user progress and course, review and user, review and contact and user. This diagram
provides a visual overview of the data model of the educational platform, and shows how
different entities relate to each other.. Page break

34/55

Activity diagram 3.3

An activity diagram is a diagram to describe the dynamic aspects of a system, and an activity
diagram is basically an advanced version of a flow diagram that models a flow

.The process in a project from one activity to another

Activity Diagram elements:

 Initial node: It shows the beginning of the shape and is the first thing to move and branch
.through. As we will notice, it is a solid circle, and it is the beginning of the shape

The final node is considered the end of the shape, and it is also a solid circle, but it is
surrounded by a thin, thin line, and what is between them is the shape of the Activity
Diagram. It represents the process itself, which cannot be divided. It represents, as we will
see, a rectangle with rounded corners, with an arrow entering it and an arrow coming out of
.it, which is the edges

.Which represents the logical order of operations

Page break

XXXIV

Figure (5.3) activity diagram

This sequence diagram shows the interaction flow between user and administrator in the
context of an educational platform. When logging in, the system checks whether the user is
an administrator or not. If the user is an administrator, the sequence depicts actions related
to managing courses and managing users. Administrator-specific activities include adding,
updating, or deleting courses and users, followed by administrator logout. If the user is not
an administrator the sequence will show typical user activities, such as browsing courses

XXXVI

Register for a training course, view lessons, track progress, and update your file
 Personal, and finally log out. The diagram provides a step-by-step representation

Step by step for actions performed by both administrators and users within the system

.Educational basic

:Conclusion 4.3

This third chapter of the development of the technical support system for our educational
platform represents a critical stage in the overall process. The primary focus was on
formulating the system design and defining the basic features and functions of the platform.
Various models, including sequence diagrams, collaboration diagrams and activity diagrams,
were used to represent the data flow process and interactions between users and the
.system

.Visually

By using appropriate design techniques, we have succeeded in designing a system design

that matches our users' requirements and simplifies the technical support process for them.
This design ensures a smooth and efficient flow of information which contributes to a
positive and effective educational support experience. The successful implementation of the
design has created a platform that meets the needs of users, providing them with a
convenient and direct help-seeking experience

.Artistic
This chapter represents a pivotal stage in the development of the technical support system
for our educational platform, paving the way for future chapters that will delve into the
complex details of system implementation and further enhance the support services
.provided to our users

XXXVII

37/55

.....Chapter Four: Implementing the system Page break 4

 :Overview 1.4

In this chapter, we will focus on implementing the system that was analyzed and designed in
the previous chapters. We will begin to design and implement the database that the
application will use to store user data and courses. After that, we will develop the GUI for
the application and implement basic functions such as adding courses and validating users'
information. We will also add advanced functionality such as we will use appropriate
programming languages and tools to develop the platform and ensure the quality of the
software using the necessary testing techniques. We will ensure that the platform meets
.security standards and maintains the confidentiality of users' information

Hardware requirements 1.2

System operating requirements 2.4

the tool

In use

The team has to build the project

 PC RAM: 4GB, HARD: 550

CPU Intel Core

Internet

The team's attic to build the project from

A penchant for plugins and add-ons

.Insight into platform development

Damn

Review plans and important documents

.The project

HTML 5

Software

HTML (Hypertext Markup Language):

HTML is the standard markup language for creating web pages and web applications. It
organizes content on the web and uses a tagging system to identify elements such as
headings, paragraphs, links, and images
 .and more

40/55

:CSS Cascading Style Sheets

CSS

CSS is used to design HTML documents. It allows web developers to control the layout,
appearance and design of multiple pages at once. CSS is essential for creating visually
.attractive and responsive web pages

Javascript

JavaScript is a versatile scripting language that enables dynamic content on websites. It is

commonly used as JS for client-side scripting to create interactive web pages, validate forms,
.handle events, and communicate with servers asynchronously

PHP hypertext preprocessor

PHP is a server-side scripting language designed for web development. It is embedded in

HTML code and executed on the server allowing the creation of dynamic web pages. PHP is
.often used to interact with databases, manipulate forms, and manage sessions
 php

:MySQL database

MySQL

MySQL is a popular open source relational database management system (RDBMS). It is used
to store and manage data in a structured format, making it easy to retrieve information

XL

Wt-PIM form is culled for it's web comments

 L

And updated. MySQL is commonly used with PHP to create web applications

.Dynamic, database-driven

Boxicons

Boxicons is a free, carefully designed set of open source icons. Each icon is designed on a
24px grid with

.Material guidelines

StarUml

Staruml is an open source software for creating structural and behavioral models of
programs and applications. The program runs on Windows, Mac, and Linux operating
systems. StarUML allows users to create UML models in the Unified Modeling Language,
including classes, functions, variables, and relationships between objects and functions. The
program also allows users to add notes and comments and create diagrams of classes and
objects. StarUML can be used to design models in various software projects such as desktop
applications, mobile applications, web applications, and also to design... Database models.
StarUML is available in two versions: free and paid. The paid version has additional features
such as profile support, integration with Git, and the ability to export models

.into various different formats

It is a VS Code editor for Visual Studio Code

 Visual Studio Code

Lightweight yet powerful source code that runs on your desktop and is available for
Windows systems

.And Linux macOS comes with built-in support for

XLI

JavaScript, TypeScript, Node.js, and has a rich ecosystem of plugins for other languages such
as C++, Java #C, Python, PHP, GO, and runtimes (such as .NET and Unity). VS Code allows you
to expand your capabilities through extensions. VS Code extensions can add more features
.to the overall experience

Page break

XLII
 C

:Program code 3.4

:Code for creating an account on the platform 1.3.4

LIFE
 National distance learning programs in response to COVID-19 ]1[

.Education and training in the Kingdom of Saudi Arabia ]2[

.Ministry of Education - Ministry of Education ]3[

System context diagram - Wikipedia (wikipedia.org) ]4[

Use case diagram - Wikipedia (wikipedia.org) ]5[

Class diagram - Wikipedia (wikipedia.org) ]6[

https://boxicons.com/[7]

HTML Tutorial - W3Schools [8]

CSS Tutorial - MDN Web Docs [9]

JavaScript Guide - Mozilla Developer Network (MDN) [10]

PHP Manual - PHP.net [11]

MySQL Documentation [12]

[Any Arabic Interaction Diagrams - e3arabi - 13] Interaction Diagrams

LV