Final Project Report

Progressive Website for a Training Company

Project Supervisor
Abdullah Qamar

Submitted By

F23023011C

SAMAN NAZIR PANJWANI

BC190411521

Software Projects & Research Section,

Department of Computer Sciences,
Virtual University of Pakistan

CERTIFICATE

1
This is to certify that SAMAN NAZIR PANJWANI (BC190411521), have worked on and
completed their Software Project at Software & Research Projects Section,
Department of Computer Sciences, Virtual University of Pakistan in partial fulfillment
of the requirement for the degree of BS in Computer Sciences under my guidance and
supervision.

In our opinion, it is satisfactory and up to the mark and therefore fulfills the
requirements of BS in Computer Sciences.

Supervisor / Internal Examiner

Abdullah Qamar
Supervisor,
Software Projects & Research Section,
Department of Computer Sciences
Virtual University of Pakistan

___________________
(Signature)

External Examiner/Subject Specialist

<<External Supervisor Name>>

___________________
(Signature)

Accepted By:

_____________
(For office use)

EXORDIUM

2
 In the name of Allah, the Compassionate, the
Merciful.

Praise be to Allah, Lord of Creation,

The Compassionate, the Merciful,
King of Judgment-day!

You alone we worship, and to You alone we pray

for help,
Guide us to the straight path

The path of those who You have favored,

Not of those who have incurred Your wrath,

Nor of those who have gone astray.

DEDICATION

Thank to Allah and His Beloved Prophet

Muhammad (PBUH)

We want to dedicate this project to our respected and

honorable parents, as they guide and pray for us
throughout the project.
Thanks to teachers and friends who also cooperate with
us to complete this project on time, they motivate us in
this project and wish for our success in life.

3
 ACKNOWLEDGEMENT

We would like to express our sincere gratitude to the

Virtual University of Pakistan for providing us with the
opportunity to undertake the CS619 final project. This
project has been a valuable learning experience, allowing
us to apply our theoretical knowledge in a practical
setting and develop real-world skills that will be
beneficial for our future careers.

We would like to extend our appreciation to our project

supervisor SIR ABDULLAH QAMAR and faculty members
for their guidance, support, and encouragement
throughout the duration of the project. Their insights,
feedback, and mentorship have been instrumental in
shaping our project and ensuring its successful
completion.

Lastly, we are grateful to our families and friends for their

unwavering support, understanding, and encouragement
throughout this journey. Their encouragement and
motivation have been invaluable in helping us overcome
challenges and stay focused on achieving our objectives.

Thank you to everyone who has contributed to the

success of this project. We are proud of our
accomplishments and look forward to applying the
knowledge and skills gained from this experience in our
future endeavors.

Saman Nazir Panjwani.

4
 PREFACE

This project has helped me in gaining valuable programming knowledge in the field of computer science.
The preface of the CS619 Progressive Website Designing project highlights its significance in bridging
theory and practice, showcasing the application of acquired knowledge in real-world scenarios. It
emphasizes the project's transformative impact on personal and professional growth, offering opportunities
for skill development, confidence building, and career advancement. Gratitude is expressed to supporters,
and readers are invited to join the journey of discovery and achievement in the realm of web development
and technology.

5
 TABLE OF CONTENTS
CHAPTER NO. 1
GATHERING & ANALYZING INFO…………………………………………………9

1.1

Introduction…………………………………………………………………………………………
…………..9

1.2 purpose………………………………………………………………………….10

1.3

scope……………………………………………………………………………
………..12
1.4definitions, acronyms and
abbreviations………………………………..13

1.5 Project requirements……………………………………………………………

………………15

1.5.1 Functional
Requirements…………………………………………..15
1.5.2 Non-Functional Requirements
…………………………………..17

6
1.6 use cases and usage
scenarios……………………………………………… 19

1.6.1 Use Case

Diagrams………………………………………………………..20
1.6.2 Usage
Scenarios…………………………………………………………….21
1.7 Development
Methodology……………………………………………………28

1.7.1 Chosen
Methodology…………………………………………………….28
1.7.2 Reasons for Chosen
Methodology………………………………….29

1.7.2 Work Plan (Gantt Chart)

…………………………………………………31
1.7.2 Project Schedule (Submission Calendar)
………………………..31

CHAPTER NO. 2
DESIGNING THE PROJECT......................................................32

2.1

Introduction…………………………………………………………………
………………..32

7
2.2

purpose…………………………………………………………………………
………………34
2.3

scope……………………………………………………………………………
……………….34
2.4 definitions, acronyms and
abbreviations………………………………………….35
2.5 Architectural Representation (Architecture Diagram)
……………………….37

2.6 Dynamic Model: Sequence

Diagrams……………………………………………….38

2.7 Object Model/Logical Model: Class

Diagram……………………………………..41

2.8 Database Model (Database Diagram)

………………………………………………..42

2.9 Graphical User

Interfaces………………………………………………………………....43

CHAPTER NO.3

DEVELOPMENT.....................................................................44

3.1 DEVELOPMENT PLAN (ARCHITECTURE DIAGRAM)………

44

8
 <<DEAR STUDENTS, YOU HAVE TO TAKE SPECIAL CARE OF
PAGE NUMBERS, WHICH ARE WRITTEN AGAINST EACH CHAPTER AND SUB
HEADINGS. YOU HAVE TO MENTION YOUR OWN PAGE NUMBERS AND
CORRECT ONE AGAINST EACH DOCUMENT HEADING. MAKE PROPER
TABLE OF CONTENTS. REMEMBER THAT IF THERE ARE ANY NEW
HEADINGS OR YOU HAVE INCLUDED MORE HEADINGS IN YOUR
DOCUMENTS THEN YOU ALSO HAVE TO WRITE THESE IN TABLE OF
CONTENTS AND MODIFY TABLE OF CONTENTS ACCORDING TO YOUR
DOCUMENTS MATERIAL>>

<<Dear Students, before starting each chapter the following would be the
title page for each chapter on a separate page>>

CHAPTER 1
Gathering & Analyzing Info

9
1.1 Introduction

In today's digital era, the demand for innovative and user-friendly online
platforms for learning and training has surged significantly. As a response, the
development of progressive websites tailored for training companies has become
paramount. This project, CS619 Progressive Website Designing, aims to create a
dynamic and interactive online platform using PHP Laravel framework for a
training company.
The project focuses on leveraging cutting-edge technologies and modern design
principles to develop a progressive website that offers a seamless learning
experience for students and efficient management tools for trainers and
administrators. By harnessing the power of PHP Laravel, a robust and versatile
framework for web application development, the project aims to deliver a
scalable, secure, and feature-rich platform tailored to the unique needs of the
training industry.

Key objectives of the project include:

1. Designing a user-friendly interface with intuitive navigation and responsive

layout to accommodate users across various devices and screen sizes.
2. Implementing comprehensive student and trainer management
functionalities, including registration, profile management, progress
tracking, and assignment management.
3. Developing a flexible course administration system that allows
administrators to easily add, edit, and assign courses to students and
trainers.
4. Integrating event scheduling features to facilitate efficient management of
training events, including automated notifications for participants.
5. Seamless integration with Learning Management Systems (LMS) such as
OpenEdX or Moodle to provide access to course materials, quizzes, and
grading.

10
 6. Showcasing company achievements, partnerships, and success stories
through a dedicated portfolio section.
7. Implementing a blog section for publishing articles and fostering
community engagement through user comments.

1.2 Purpose
The purpose of developing a final year project on progressive website designing
for a training company using PHP can encompass several objectives:

1. Skill Development: It provides an opportunity for students to apply their

knowledge of PHP programming language and web development concepts
learned throughout their academic journey to a real-world project. This
helps in honing their technical skills and understanding of web
development frameworks and tools.
2. Understanding Progressive Web Apps (PWAs): Progressive website
designing involves creating websites that progressively enhance the user
experience, offering functionalities similar to native mobile apps.
Developing a training website as a PWA allows students to understand and
implement features such as offline access, push notifications, and
responsive design.
3. Client Requirements Understanding: Working on a project for a training
company requires understanding their specific needs and target audience.
This involves communication with the client, gathering requirements, and
translating them into technical specifications. It teaches students the
importance of client collaboration and requirements analysis in software
development.
4. Enhancing User Experience: Designing a progressive website aims to
enhance the user experience by providing fast loading times, seamless
navigation, and engaging interactions. Through this project, students can
explore various techniques and best practices for creating user-friendly
interfaces and optimizing website performance.
5. Integration of Backend and Frontend Technologies: PHP is commonly
used for server-side scripting in web development, while frontend
technologies like HTML, CSS, and JavaScript handle the presentation
layer. Developing a progressive website involves integrating these

11
 technologies effectively to create a cohesive and interactive user
experience.
6. Project Management and Documentation: Managing a final year project
involves planning, organizing, and executing tasks within a specified
timeframe. Students learn project management skills such as task
prioritization, scheduling, and team collaboration. Additionally,
documenting the project requirements, design decisions, and
implementation details helps in knowledge sharing and future reference.
7. Testing and Quality Assurance: Thorough testing is essential to ensure
the functionality, usability, and security of the website. Students learn about
different testing methodologies, including unit testing, integration testing,
and user acceptance testing. This fosters a mindset of quality assurance and
continuous improvement in software development.
8. Presentation and Demonstration Skills: Finally, presenting the completed
project to faculty members, peers, and potential employers is a crucial
aspect of the final year assessment. Students learn to effectively
communicate their project goals, methodologies, and outcomes, showcasing
their technical competence and problem-solving abilities.

1.2 Scope

Scope of Project:
The scope of the CS619 Progressive Website Designing project for a
training company in PHP Laravel encompasses various aspects aimed at
delivering a comprehensive and feature-rich online platform. Here are the
key scopes of the project:
1. User Management: Implementing user authentication and authorization
systems to manage students, trainers, and administrators, including
registration, login, and profile management functionalities.
2. Course Management: Developing a robust system for creating, editing,
and assigning courses to students and trainers, including features for course
enrollment, progress tracking, and completion certificates.
3. Event Scheduling: Integrating event scheduling capabilities to allow
administrators to schedule training events, workshops, and seminars, with
automated notifications sent to participants.
4. Learning Management System (LMS) Integration: Seamless integration
with popular LMS platforms such as OpenEdX or Moodle to provide
access to course materials, quizzes, assessments, and grading
functionalities.

12
5. Content Management: Implementing a content management system
(CMS) to facilitate easy management and publication of blog articles,
company portfolio content, and other static pages.
6. Responsive Design: Ensuring the website is accessible and optimized for
various devices and screen sizes, including desktops, laptops, tablets, and
smartphones, through responsive design principles.
7. Security Features: Implementing robust security measures to protect user
data, prevent unauthorized access, and safeguard against common web
vulnerabilities such as SQL injection and cross-site scripting (XSS).
8. Scalability and Performance: Designing the architecture with scalability
in mind to accommodate future growth in users, courses, and content, while
ensuring optimal performance and responsiveness.
9. User Experience (UX): Focusing on delivering an intuitive and seamless
user experience through intuitive navigation, clear layouts, and interactive
elements to enhance user engagement and satisfaction.
10. Documentation and Support: Providing comprehensive
documentation covering system architecture, installation instructions, user
guides, and developer documentation, along with ongoing technical support
and maintenance services.
By addressing these scopes, the project aims to deliver a sophisticated and
user-friendly progressive website design tailored to the needs of the training
company, empowering students, trainers, and administrators with efficient
tools for learning, management, and collaboration.

1.4 DEFINITIONS, ACRONYMS AND ABBREVIATIONS

1. PWA (Progressive Web App):

 Definition: A type of website that provides a native app-like
experience to users by incorporating features such as offline
functionality, push notifications, and device hardware access.
 Acronym: PWA
2. PHP (Hypertext Preprocessor):
 Definition: A server-side scripting language primarily used for
web development, which can be embedded into HTML to create
dynamic web pages.
 Acronym: PHP
3. CSS (Cascading Style Sheets):
 Definition: A style sheet language used for describing the
presentation of a document written in HTML, including aspects
such as layout, colors, and fonts.

13
 Acronym: CSS
4. HTML (Hypertext Markup Language):
 Definition: The standard markup language for creating web
pages and web applications, defining the structure and content
of a webpage.
 Acronym: HTML

5. JS (JavaScript):
 Definition: A programming language that enables interactive
web pages by adding dynamic behavior to HTML and CSS,
allowing for client-side scripting and manipulation of webpage
elements.
 Acronym: JS
6. AJAX (Asynchronous JavaScript and XML):
 Definition: A technique used in web development to create
asynchronous web applications, enabling data exchange
between the client and server without reloading the entire
webpage.
 Acronym: AJAX
7. UI (User Interface):
 Definition: The graphical layout of an application or webpage
through which users interact, including elements such as
buttons, menus, and forms.
 Acronym: UI
8. UX (User Experience):
 Definition: The overall experience of a user when interacting
with a product or system, encompassing aspects such as
usability, accessibility, and satisfaction.
 Acronym: UX
9. SPA (Single Page Application):
 Definition: A web application or website that interacts with the
user by dynamically rewriting the current page rather than
loading entire new pages from the server, providing a more
fluid user experience.
 Acronym: SPA

10. API (Application Programming Interface):

 Definition: A set of rules and protocols that allows different
software applications to communicate and interact with each
other, enabling the exchange of data and functionality.
 Acronym: API

14
11. DBMS (Database Management System):
 Definition: Software designed to manage and organize
databases, facilitating the storage, retrieval, and manipulation
of data.
 Acronym: DBMS

12. CMS (Content Management System):

 Definition: A software application or framework used to create
and manage digital content, typically for websites, allowing
users to easily publish, edit, and organize content without
requiring specialized technical knowledge.
 Acronym: CMS

1.5 Project requirements

1.5.1 Functional Requirements
Functional Requirements:

1. User Management:
 Registration: Students, trainers, and administrators
should be able to register by providing necessary
details such as name, email, and password.
 Login: Registered users (students, trainers,
administrators) should be able to securely log in using
their credentials.
 Profile Management: Users (students, trainers,
administrators) can update their profiles, including
personal information, contact details, and profile
pictures.

2. Course Management:

15
  Course Creation: Administrators can add new courses,
specifying details such as title, description, duration,
and prerequisites.
 Course Enrollment: Students should be able to enroll in
available courses, with confirmation notifications sent
upon successful enrollment.
 Assignment Management: Trainers can view and
manage assignments for their assigned courses,
including adding new assignments, setting deadlines,
and grading submissions.

3. Event Scheduling:
 Event Creation: Administrators can schedule training
events, workshops, or seminars, specifying details such
as date, time, location, and agenda.
 Participant Notifications: Automated notifications
should be sent to participants (students, trainers) upon
event creation, modification, or cancellation.

4. Learning Management System (LMS) Integration:

 Platform Integration: Seamless integration with
OpenEdX or Moodle to provide access to course
materials, quizzes, assessments, and grading
functionalities.
 Material Access: Students and trainers should be able
to access course materials, participate in quizzes, view
grades, and track progress through the integrated LMS.

5. Content Management:
 Blog Management: Administrators can publish, edit, or
delete blog articles, including features for
categorization, tagging, and scheduling posts.
 Company Portfolio: A dedicated section to showcase
company achievements, partnerships, success stories,
and other relevant information.

6. Security Features:
 User Authentication: Implementing secure
authentication mechanisms to verify user identities and
prevent unauthorized access.

16
  Data Encryption: Encrypting sensitive user data, such
as passwords and personal information, to protect
against data breaches.
 Role-Based Access Control (RBAC): Defining roles and
permissions to restrict access to certain features or
content based on user roles (student, trainer, and
administrator).
These functional requirements ensure that the website caters to
the specific needs and roles of students, trainers, and
administrators, providing them with the necessary tools and
functionalities for effective learning management and
administration.

1.5.2 Non-Functional Requirements

Non-functional requirements define the attributes or qualities of a system,
such as performance, security, usability, and reliability, rather than
specific functionalities. Here are the non-functional requirements for the
CS619 Progressive Website Designing project:

1. Performance:
 The website should load quickly and respond to user
interactions within acceptable timeframes, aiming for a
response time of less than 2 seconds for most actions.
 It should be capable of handling a large number of concurrent
users without experiencing significant performance
degradation.
2. Scalability:
 The system should be designed to scale horizontally and
vertically to accommodate increasing user traffic and data
volume over time.
 It should support easy addition of resources (such as servers)
and be capable of distributing the workload efficiently across
multiple servers if needed.
17
3. Security:
 User data should be securely encrypted during transmission
and storage to prevent unauthorized access or data breaches.
 Strong authentication mechanisms, such as password hashing
and multi-factor authentication, should be implemented to
ensure user account security.
 Role-based access control (RBAC) should be enforced to restrict
access to sensitive functionalities or data based on user roles.
 The system should be regularly tested for vulnerabilities, and
security patches should be applied promptly to mitigate
potential risks.
4. Reliability:
 The website should be highly available, with minimal downtime
and regular maintenance windows scheduled during off-peak
hours.
 Automated backups of the database and website files should be
performed regularly to prevent data loss in case of system
failures or disasters.
 Fault-tolerant mechanisms should be implemented to ensure
graceful handling of errors and exceptions without disrupting
the user experience.
5. Usability:
 The user interface should be intuitive and easy to navigate,
with clear labeling, consistent layout, and familiar design
patterns.
 Accessibility features should be implemented to ensure that the
website is usable by people with disabilities, adhering to WCAG
(Web Content Accessibility Guidelines) standards.
6. Compatibility:
 The website should be compatible with a wide range of web
browsers (such as Chrome, Firefox, Safari, and Edge) and
devices (including desktops, laptops, tablets, and
smartphones).
 It should support different operating systems (such as
Windows, macOS, iOS, and Android) and screen resolutions
without compromising functionality or user experience.
7. Maintainability:
 The codebase should be well-structured, modular, and
documented to facilitate ease of maintenance, debugging, and
future enhancements by developers.
 Version control systems (such as Git) should be used to track
changes to the codebase and enable collaboration among team
members.
 Dependency management tools (such as Composer for PHP
packages) should be utilized to manage third-party libraries
and frameworks efficiently.

18
By addressing these non-functional requirements, the progressive
website designing project can ensure that the website not only meets the
functional needs of users but also delivers a high-quality, reliable, and
secure user experience.

1.6 USE CASES AND USAGE SCENARIOS

Descriptions:

System:
The "Online Learning Platform" represents the entire system designed for
online education. It includes functionalities for course browsing,
enrollment, progress tracking, and administrative tasks.
Actor:
Actors represent external entities that interact with the system. In this
example, ‘’Students’’, ‘’Trainers’’ and "Administrator" are actors.
Students can browse courses, enroll, and view progress, while
administrators have additional capabilities for managing courses, users,
and generating reports. And the system should enable trainers to view
and manage assigned courses.

Relationship Type:
The relationships between actors and use cases are represented by lines.
These lines illustrate how actors interact with the system through various
use cases. Whereas, system should enable trainers to view and manage
assigned courses, showcasing expertise and experience.
For instance, a "Student" can browse courses, enroll in a course, and view
progress. An "Administrator" has broader responsibilities, including

19
managing courses, users, and generating reports. And Trainers can create
and update their profiles, showcasing expertise and experience. The
system should enable trainers to view and manage assigned courses.

1.6.1 Use Case Diagrams

20
1.6.2 Usage Scenarios

21
 Usage Scenarios NO.1

USE CASE TITTLE

Register as Student

USE CASE ID UC-01

ACTORS Prospective Student

DESCRIPTION The primary goal of this use case is to allow a prospective

student to successfully register on the training platform, gaining
access to course information, progress tracking features, and
other functionalities.
PRE-CONDITION The student has access to the training platform's registration
page.
The student has a valid email address and necessary personal
information ready.
ACTIONS The prospective student opens a web browser and navigates to
the official training platform's registration page. This could be
achieved by entering the platform's URL in the browser's
address bar.
The prospective student ensures they have a valid and accessible
email address. Additionally, they prepare necessary personal
information such as their full name and any required
identification details (e.g., student ID, contact information).
POST-CONDITION The student's registration information is stored securely in the
system.
The student receives a confirmation email with registration
details.
EXCEPTIONS If there are issues with the provided information (e.g., invalid
email format), the system provides appropriate error messages.
AUTHOR BC190411521

DATE 08-12-2023

22
 Usage Scenarios NO.2

USE CASE TITTLE Schedule Training Event

USE CASE ID UC-02

ACTORS Administrator
DESCRIPTION To allow an administrator to schedule a new
training event, specifying details like date,
time, and venue.
PRE-CONDITION The administrator is logged into the system.
ACTIONS Log into the system as an administrator.
Navigate to the training event management
section.
Select the option to schedule a new event.
Enter details such as event name, date, time,
and venue.
Validate the entered information.
If successful, the system adds the new training
event to the system

POST-CONDITION A new training event is added to the system

with specified details.
EXCEPTIONS If there are conflicts with the selected date and
time, the system prompts the administrator to
choose an alternative slot.
AUTHOR BC190411521

Usage Scenarios NO.3

USE CASE TITTLE

View Progress

USE CASE ID UC-03

ACTORS
Student
DESCRIPTION To allow a student to view their progress in
enrolled courses.
PRE-CONDITION The student is logged into the system.
The student is enrolled in at least one course.
ACTIONS Log into the system as a student.

23
 Navigate to the dashboard or progress tracking
section.
Select the course for which you want to view
progress.
The system displays the student's progress,
including completed modules, grades, and
assessments.

POST-CONDITION NA
EXCEPTIONS If the student is not enrolled in any courses, the
system provides a message guiding them to
enroll first.
AUTHOR BC190411521

Usage Scenarios NO.4

USE CASE TITTLE

Manage Courses

USE CASE ID UC-04

ACTORS Administrator
DESCRIPTION To enable an administrator to manage courses,
including adding, editing, or deleting courses.
PRE-CONDITION The administrator is logged into the system.
ACTIONS Log into the system as an administrator.
Navigate to the course management section.
Select the option to add a new course or
edit/delete an existing one.
For adding a new course, provide details such
as course name, description, schedule, and
materials.
For editing/deleting, select the course to
modify or remove.
Validate the entered information or confirm the
deletion.
If successful, the system updates the course
information.

POST-CONDITION Course information is updated based on the

administrator's actions.
EXCEPTIONS If there are dependencies on the course being
deleted (e.g., enrolled students), the system
provides a warning and prompts the
administrator to resolve dependencies.
AUTHOR BC190411521

24
 Usage Scenarios NO.5

USE CASE TITTLE

Make Payment

USE CASE ID UC-05

ACTORS Student
DESCRIPTION To allow a student to make a secure payment
for a selected course
PRE-CONDITION The student is logged into the system.
The student has selected a course for
enrollment.
ACTIONS Log into the system as a student.
Navigate to the payment section.
Select the course for which you want to make a
payment.
The system calculates the course fee.
Select a payment method and provide
necessary details.
The system securely processes the payment.
If successful, the student is enrolled in the
course.

POST-CONDITION NA
EXCEPTIONS If there are issues with the payment (e.g.,
declined card), the system provides an
appropriate error message, guiding the student
to resolve the issue.
AUTHOR BC190411521

Usage Scenarios NO.6

USE CASE TITTLE

Update Trainer Profile
USE CASE ID UC-06
ACTORS Trainer
DESCRIPTION To enable a trainer to update their profile
information, including qualifications and
schedule.
PRE-CONDITION The trainer is logged into the system.
25
 ACTIONS Log into the system as a trainer.
Navigate to the profile management section.
Select the option to update the profile.
Provide updated information such as
qualifications and schedule.
Validate the entered information.
If successful, the system updates the trainer's
profile.

POST-CONDITION The trainer's profile information is updated in

the system.
Any changes made to qualifications, schedule,
or other details are reflected in the trainer's
profile.
EXCEPTIONS If there are issues with the provided
information (e.g., invalid schedule format), the
system provides appropriate error messages,
guiding the trainer to correct the information.
AUTHOR BC190411521

Usage Scenarios NO.7

USE CASE TITTLE

Enroll in Course

USE CASE ID UC-07

ACTORS Student
DESCRIPTION To allow a student to enroll in a specific
course, gaining access to course materials and
assessments.
PRE-CONDITION The student is logged into the system.
The student has navigated to the course details
page.

ACTIONS Navigate to the course details page.

Select the option to enroll in the course.
System validates eligibility for enrollment.
If eligible, the student is enrolled, granting
access to course materials

POST-CONDITION The student is successfully enrolled in the

selected course.
The course materials and assessments are
accessible to the student.

26
 EXCEPTIONS If the course has enrollment restrictions (e.g.,
maximum capacity reached), the system
provides a notification, and the student may
choose an alternative course.
AUTHOR BC190411521

Usage Scenarios NO.8

USE CASE TITTLE

Access Course Materials through
LMS

USE CASE ID UC-08

ACTORS Student, Trainer
DESCRIPTION To enable students and trainers to access course
materials, quizzes, and grading through the
integrated Learning Management System
(LMS).
PRE-CONDITION The student or trainer is logged into the system.
The course is successfully enrolled or assigned
to the student or trainer.

ACTIONS Navigate to the course section.

System seamlessly redirects to the integrated
LMS.
View and interact with course materials,
quizzes, and grading within the LMS.

POST-CONDITION The student or trainer can access course

materials, quizzes, and grading through the
LMS.
EXCEPTIONS If there are technical issues with LMS
integration, the system provides a notification
and suggests alternative access methods.
AUTHOR BC190411521

Usage Scenarios NO.9

27
USE CASE TITTLE
Automated Notifications

USE CASE ID UC-09

ACTORS System
DESCRIPTION To automatically notify participants (students
and trainers) regarding scheduled training
events, course updates, and important
announcements.
PRE-CONDITION There are scheduled training events, course
updates, or announcements in the system.
ACTIONS System checks for scheduled events, updates,
or announcements.
Automated notifications are sent via email or
in-app notifications.
Participants are informed of relevant
information.

POST-CONDITION Participants receive timely and relevant

notifications
EXCEPTIONS If there are issues with the notification system
(e.g., email delivery failure), the system logs
the issue for review and may attempt
alternative notification methods.
AUTHOR BC190411521

Usage Scenarios NO.10

USE CASE TITTLE

Achievement Showcase

USE CASE ID UC-10

ACTORS Administrator
DESCRIPTION To showcase company achievements,
partnerships, and success stories on the
company portfolio page.
PRE-CONDITION The administrator is logged into the system.
ACTIONS Navigate to the company portfolio section.
Select the option to add a new achievement,
partnership, or success story.
System validates the entered information.
If successful, the new achievement is added to
the portfolio.

POST-CONDITION Company achievements are displayed on the

28
 company portfolio page.
EXCEPTIONS If the provided information is incomplete or
invalid, the system prompts the administrator to
correct the details.
AUTHOR BC190411521

1.7 Development Methodology

1.7.1 Chosen Methodology

Adopted Methodology
The VU Process Model, as described in SE2 (CS605) handouts, is a hybrid methodology that
combines elements of both the waterfall and spiral models. This approach aims to leverage
the strengths of these models while mitigating their individual limitations. Here's a detailed
explanation of the adopted methodology for the project:

VU Process Model Overview:

1. Waterfall Model Elements:

FIG- 02

29
 - Sequential Phases: The VU Process Model adopts the sequential phases of the waterfall
model. The project progresses through distinct and well-defined stages, including
requirements analysis, design, implementation, testing, deployment, and maintenance.
- Document-Driven Approach: Each phase emphasizes thorough documentation, ensuring
clear communication, and providing a basis for evaluation and validation.

2. Spiral Model Elements:

FIG- 03

- Iterative Development: The VU Process Model incorporates the iterative nature of the
spiral model. After the completion of each phase, there's an evaluation and feedback loop,
allowing for refinements and adjustments based on insights gained during the preceding
phases.
- Risk Analysis and Management: The spiral model's emphasis on risk analysis is
integrated. Throughout the project, regular risk assessments are conducted, and appropriate
measures are taken to manage and mitigate identified risks.

1.7.2 Reasons for Chosen Methodology

 Key Features:

- Requirements Refinement: The model recognizes that requirements may evolve

over time. Iterative cycles allow for continuous refinement of requirements,
ensuring alignment with changing project needs.

- Flexibility and Adaptability:

 The VU Process Model provides flexibility to accommodate changes while
maintaining the structure of a phased approach. This is crucial for projects with
evolving or dynamic requirements.

30
 Phases in the VU Process Model:

-
 FIG- 04

- Requirements Analysis: Define and document project requirements.

- Design: Develop a detailed system design based on the requirements.
- Implementation: Code the system according to the design specifications.
- Testing: Conduct comprehensive testing to ensure the system meets
requirements.
- Deployment: Release the system for use in the intended environment.
- Maintenance: Address issues, updates, and improvements as needed.

Advantages of the VU Process Model:

- Clear Structure: The sequential phases provide a clear and structured path for
project development.
 -Risk Management: Regular risk analysis and mitigation strategies enhance project
stability.
- Iterative Refinement: Iterative cycles facilitate continuous improvement and
adaptability to changing requirements.

31
  Considerations:
Resource Intensity: The model requires careful resource allocation for iterative
cycles and documentation.
 Communication: Effective communication and collaboration are critical to ensure
seamless transitions between phases.

 Conclusion:
 The adoption of the VU Process Model aims to strike a balance between the structured
approach of the waterfall model and the flexibility of the spiral model. This
methodology is well-suited for projects where requirements may evolve, and risk
management is a priority, providing a framework for systematic development with
room for adaptation.

1.7.2 Work Plan (Gantt Chart)

Work Plan (Use MS Project to create Schedule/Work Plan)

1.7.2 Project Schedule (Submission Calendar)

FIG- 05

32
 CHAPTER 2
Designing the Project

2.1 Introduction

Introduction of Design Document

A Design Document also known as a technical specification is a description of how you plan to solve a
problem. A design document is the most powerful tool for making sure the right work gets done. The
software Design Document is a document to provide documentation which will be used to aid in software
development by providing the details for how the software should be built. It is a written description of
software product, that a software designer writes in order to give a software development team overall
guidance to the architecture of the software project.
Software Design Document Composition:
The Software Design Document (SDD) usually contains the following information:

Data Design: In this section, we delve into the intricacies of data management for
the Progressive Website. We define the structure of user data, course information,
and the relationships between different entities. The data design lays the foundation
for efficient storage, retrieval, and manipulation of information, supporting the core
functionalities of the training platform.

33
Architecture Design: The architecture design elucidates the overall system
architecture, emphasizing the interaction between front-end and back-end
components. We detail the technology stack, frameworks, and communication
protocols to ensure a scalable, maintainable, and performance system. Special
attention is given to the implementation of Progressive Web App (PWA) principles for
enhanced user experience.
Interface Design: User experience is at the forefront of our design philosophy. The
interface design section presents wireframes and mockups of key pages, ensuring a
visually appealing and intuitive layout. By incorporating responsive design principles,
we guarantee a seamless user experience across various devices, fostering
engagement and accessibility.
Entity Relationship Model: This section explores the relationships and
dependencies among different entities within the system. We define the structure of
the database, including user profiles, course information, and any other relevant
entities. The entity relationship model serves as a visual representation of the data
design, aiding in database implementation.
Sequence Diagrams: Sequence diagrams illustrate the flow of interactions between
system components and users. By mapping out the sequence of events during user
actions or system processes, we provide a detailed understanding of how the system
behaves in various scenarios. These diagrams are essential for ensuring the
correctness and efficiency of the system's functionality.
Class Diagram: Class diagrams offer a high-level view of the system's object-
oriented structure. This section defines the classes, their attributes, and the
relationships between them. The class diagram serves as a guide for developers in
implementing the software components, promoting modularity and maintainability.
Test Case: A robust testing strategy is essential for delivering a reliable product. The
test case section outlines detailed scenarios, acceptance criteria, and procedures for
testing each component of the system. Through systematic testing, we ensure the
functionality, security, and performance of the Progressive Website.
Maintenance Plan: The maintenance plan outlines strategies for ongoing support,
updates, and enhancements post-launch. It includes a schedule for regular
maintenance activities, procedures for handling issues, and plans for incorporating
user feedback. This section ensures the long-term sustainability and improvement of
the Progressive Website.

As we embark on the design phase, our goal is to create a Progressive Website that
not only meets the technical requirements but also exceeds user expectations. By
addressing data design, architecture, interface, and other crucial aspects, we lay the
groundwork for a successful development process and the delivery of an outstanding
training platform.

2.2 Purpose

Design Document is used to give an application development team overall guidance to the architecture of
the application project.

Design Document contains

1. ERD

34
 2. Sequence Diagram

3. Architecture Diagram

4. Class Diagram

5. Database Design

6. Interface Design

7. Test cases

Design documents in progressive website designing for a training company serve as a

blueprint and communication tool, outlining the website's structure, functionality, and
design. They facilitate collaboration, mitigate risks, and provide a reference guide for
development and quality assurance activities. Additionally, design documents help
manage changes and serve as documentation for future maintenance and
enhancements, ensuring the successful delivery of a high-quality website.

2.3 Scope
The scope of design documents in progressive website designing for a training company encompasses
various aspects related to the website's design and development process. This includes:

1. Functional Scope: Design documents define the features and functionalities that the website will
offer to users. This encompasses everything from user authentication and registration to content
management, interactive modules, and any specific requirements of the training company, such as course
management and scheduling.

2. Design Scope: They outline the visual design elements of the website, including layout, color
schemes, typography, imagery, and branding guidelines. This ensures consistency and coherence in the
website's appearance and user interface.

3. Technical Scope: Design documents specify the technical aspects of the website, such as the choice
of programming languages, frameworks, and libraries. They also outline the database schema, server
architecture, and integration with external systems or APIs.

4. User Experience Scope: Design documents address the user experience (UX) aspects of the website,
including navigation flow, interaction design, and accessibility considerations. They ensure that the website
is intuitive, easy to use, and accessible to all users, including those with disabilities.

5. Content Scope: They define the content structure and organization of the website, including the
types of content to be included (e.g., text, images, videos), content management workflows, and content
publication schedules.

6. Scope Management: Design documents help manage the scope of the project by clearly defining
what is included and excluded from the website's design and development. This helps prevent scope creep
and ensures that the project stays within budget and timeline constraints.

35
 Overall, the scope of design documents in progressive website designing for a training company
encompasses all aspects of the website's design and development, from functionality and visual design to
technical implementation and user experience, while also providing mechanisms for scope management and
control.

2.4 Definitions, Acronyms and Abbreviations

1. CMS (Content Management System):

 Definition: A software application or framework used to create, manage, and modify digital
content on a website without requiring technical expertise. It enables users to publish, edit, and organize
content efficiently.
 Acronym: CMS

2. UI (User Interface):

 Definition: The graphical layout of an application or website that users interact with. It
includes elements such as buttons, menus, and forms, designed to facilitate user interaction and navigation.
 Acronym: UI

3. UX (User Experience):

 Definition: The overall experience and satisfaction a user derives from interacting with a
product, system, or service. It encompasses factors such as ease of use, accessibility, and emotional
response.
 Acronym: UX

4. API (Application Programming Interface):

 Definition: A set of rules, protocols, and tools that allow different software applications to
communicate and interact with each other. APIs define the methods and data formats used for exchanging
information between systems.
 Acronym: API

5. HTML (Hypertext Markup Language):

 Definition: The standard markup language used to create and structure content on web pages.
HTML defines the structure of web documents by using a variety of tags and attributes.
 Acronym: HTML

36
6. CSS (Cascading Style Sheets):

 Definition: A style sheet language used to control the presentation and layout of HTML
documents. CSS defines how elements are displayed on the screen, including aspects such as colors, fonts,
and spacing.
 Acronym: CSS

7. JS (JavaScript):

 Definition: A high-level programming language commonly used to create dynamic and

interactive features on websites. JavaScript enables client-side scripting and manipulation of web page
content.
 Acronym: JS

8. DBMS (Database Management System):

 Definition: Software that provides an interface for managing databases, including tasks such
as storing, retrieving, and updating data. DBMSs ensure data integrity, security, and efficiency.
 Acronym: DBMS

These definitions, acronyms, and abbreviations provide a foundation for understanding the terminology used
in the context of website development and management.

2.5 Architectural Representation

(Architecture Diagram)

37
 Architecture design Diagram

2.6 Dynamic Model: Sequence Diagrams

Sequence Diagrams (To be developed using Rational Rose or any other drawing.

38
 STUDENT:

TRAINER:

39
40
Administration:

41
2.6 Object Model/Logical Model: Class
Diagram

Class Diagram/ Flowcharts/ Data Flow Diagrams (DFD)

The Class diagram of Training company.

42
 2.7 DATABASE MODEL (DATABASE DIAGRAM)
Database Design

The complete Database system of the training company.

43
 2.9 GRAPHICAL USER INTERFACES

Registration layout interface design

Dashboard of LMS for Students and tutors.

44
 CHAPTER 3
Development

3.1 DEVELOPMENT PLAN (ARCHITECTURE DIAGRAM)

3.1 Developments Tools and technologies

 Visual studio code

 MS SQL Server

45
 Xampp server
 MS word
 MS project
 Asp.net
 MS powerpoint
 MS visio

46
 REFERENCES

1. Laravel Documentation: https://laravel.com/docs

2. PHP Documentation: https://www.php.net/manual/en/

3. Vue.js Documentation: https://v3.vuejs.org/guide/introduction.html

4. Bootstrap Documentation: https://getbootstrap.com/docs/5.1/getting-started/introduction/

5. Tailwind CSS Documentation: https://tailwindcss.com/docs

6. MySQL Documentation: https://dev.mysql.com/doc/

7. GitHub: https://github.com/

8. Laracasts: https://laracasts.com/

9. Udemy: https://www.udemy.com/courses/search/?q=laravel

10. YouTube: https://www.youtube.com/results?search_query=laravel+tutorial

11. Stack Overflow: https://stackoverflow.com/questions/tagged/laravel

12. Laracasts Forum: https://laracasts.com/discuss

13. Laravel News: https://laravel-news.com/

14. Google https://google.com

15. www.w3school.com

16. PHP: https://www.w3schools.com/php/

17. Free Courses PHP on udemy https://www.udemy.com/courses/search/?

lang=en&lang=ur&price=price-free&q=PHP&ratings=4.5&sort=relevance&src=ukw

 MS Visio Stencils and Tutorial:

http://www.youtube.com/watch?v=w2hT8oo2iVo
http://www.softwarestencils.com/uml/index.html
 Links for drawing UML diagrams online

47
APPENDIX

48