MAJOR PROJECT REPORT

on

“Online Learning Platform”

Submitted in partial fulfilment of the requirements for the award of the degree of

Bachelor of Computer Applications

Submitted By

Arpit (A50504822040)
Haresh (A50504822030)
Aakash (A50504822058)

Under the guidance of

Dr. Akshay Mudgal

Associate Professor
CSE Department

Department of Computer Science and Engineering

Amity Institute of Information Technology
Amity University Gurugram, Haryana

0
 Department of Computer Science and Technology
Amity Institute of Information Technology

DECLARATION

We, Arpit, Haresh, and Aakash, with Enrollment No.- A50504822040, A50504822030, and
A50504822058 respectively student of Bachelor of Computer Applications, Amity Institute of
Information Technology, Amity University Haryana, hereby declare that we are fully
responsible for the information and results provided in this project report titled “Online
Learning Platform” submitted in Department of Computer Science and Engineering, Amity
Institute of Information Technology, Amity University Haryana, Gurugram for the partial
fulfilment of the requirement for the award of the degree of Bachelor of Computer
Applications. We have taken care in all respects to honour the intellectual property rights and
have acknowledged the contributions of the others for using them. We further declare that in
the case of any violation of any violation of intellectual property rights or copyrights, we as
candidates will be fully responsible for the same, Head of department and the Institute should
not be held for full or partial violation of copyrights if found at any stage of my degree.

Name of Candidates: Arpit, Haresh, and Aakash

Enrollment Nos. of candidates: A50504822040, A50504822030, and A50504822058

1
 Department of Computer Science and Technology
Amity Institute of Information Technology

CERTIFICATE

This is to certify that the work in the project report entitled “Online Learning Platform” by
Arpit, Haresh, and Aakash bearing Enrollment Nos. A50504822040, A50504822030, and
A50504822058 respectively, is a Bonafide report of project work carried out by them under
my supervision and guidance in partial fulfilment of the requirement for the award of the degree
of Bachelor of Technology in Computer Science and Engineering in the Department of
Computer Science and Engineering, Amity Institute of Information Technology, Amity
University Haryana, Gurugram. Neither this project nor any part of it has been submitted for
any degree or academic award elsewhere.

Dr Akshay Mudgal

Associate Professor

Head
Department of Computer Science & Engineering
Amity Institute of Information Technology
Amity University Haryana, Gurugram

2
 Department of Computer Science and Technology
Amity Institute of Information Technology

ACKNOWLEDGEMENT

This major project has been a wonderful experience, requiring dedication, collaboration, and
hard work from all of us. The successful completion of the project and compilation of this
report would not have been possible without the support and guidance of several key
individuals. Therefore, we would like to extend our sincere gratitude to each one of them.
It is our heartfelt pleasure to place on the record our best regards and express our sincere thanks
to the Director of Amity Institute of Information Technology and our project supervisor, Dr.
Akshay Mudgal, for providing us with this valuable opportunity to gain practical field
knowledge through this major project.

Name of Candidates: Arpit, Haresh, and Aakash

Enrollment Nos. of candidates: A50504822040, A50504822030, and A50504822058

3
 ABSTRACT

The seamless and efficient delivery of educational content is crucial for enhancing learning
experiences and improving educational outcomes. In this project, we propose an online
learning platform that enables students to access educational resources and interact with
teachers through a dynamic and user-friendly interface. The primary objective of the platform
is to provide students with the ability to explore subject-specific content, while offering
teachers the tools to upload, manage, and track the engagement of their content.
Our methodology involves developing a web-based platform with features such as content
upload, playlist creation, and real-time tracking of likes and comments for teachers. For
students, we provide an interactive space where they can browse, search, like, comment, and
save their favorite educational materials. We also ensure the platform is responsive, allowing
for a smooth experience across different devices.
The implementation of the platform involves the use of HTML, CSS, JavaScript, PHP, and
MySQL for the database. We focus on building a secure, scalable, and user-friendly
environment that supports both students and teachers. The system's effectiveness is
demonstrated by its ability to provide personalized and interactive learning experiences while
maintaining ease of use.
Overall, this online learning platform offers a scalable solution for modern education,
leveraging web technologies to enhance student engagement, support teachers in content
management, and contribute to the advancement of online learning.

4
 TABLE OF CONTENTS

CONTENTS PAGE NO.

DECLARATION 1

CERTIFICATE 2

ACKNOWLEDGEMENT 3

ABSTRACT 4

TABLE OF CONTENTS 5

LIST OF FIGURES 7

CHAPTER 1: INTRODUCTION

1.1 OBJECTIVES 8

1.2 IMPORTANCE OF ONLINE LEARNING PLATFORM 8

1.3 CURRENT SYSTEM 9

1.4 PROPOSED SYSTEM 9

CHAPTER 2: BACKGROUND OF THE PROJECT

2.1 NEED FOR AN INTERACTIVE ONLINE LEARNING PLATFORM 10

2.2 DYNAMIC SELECTION CONCEPT 10

CHAPTER 3: TECHNOLOGIES USED

3.1 HTML 11

3.2 CSS 12

3.3 JAVASCRIPT 12

3.4 PHP 13

3.5 MYSQL 13

3.6 APACHE SERVER 14

5
CHAPTER 4: DESIGN OF PROJECT

4.1 HARDWARE CONFIGURATION 14

4.2 SOFTWARE REQUIREMENTS 14

4.3 DATA FLOW 15

4.4 LIST OF MODULES 16

CHAPTER 5: IMPLEMENTATION

5.1 OVERVIEW 18

5.2 TECHNOLOGIES USED 18

5.3 MAJOR IMPLEMENTATION MODULES 19

5.4 IMPLEMENTATION STRATEGY 20

5.5 TESTING AND DEBUGGING 21

CHAPTER 6: RESULTS 22

CHAPTER 7: CONCLUSION AND FUTURE WORK

7.1 CONCLUSION 26

7.2 FUTURE WORK 26

REFERENCES 27

6
 LIST OF FIGURES

FIGURE NO. FIGURE TITLE PAGE NO.

FIGURE 6.1 STUDENT’S DASHBOARD 22

FIGURE 6.2 UPDATE PROFILE 22

FIGURE 6.3 TUTORS’ PROFILE 23

FIGURE 6.4 PLAYLISTS BY TUTORS 23

FIGURE 6.5 STUDENTS COMMENTS 24

FIGURE 6.6 RESPONSIVENESS OF WEBSITE 24

FIGURE 6.7 DARK MODE 25

FIGURE 6.8 UPDATE AND DELETE PLAYLISTS 25

7
 CHAPTER – 1

INTRODUCTION

1.1 OBJECTIVES

1. To design and develop a web-based platform using HTML, CSS, JavaScript, PHP, and
MySQL that supports two main user roles: students and teachers. The platform will
allow teachers to upload content, create playlists, and track student engagement through
likes and comments.
2. To implement features that enable students to search, explore, and interact with content
uploaded by teachers. Students will be able to like, comment, save content, and track
their learning progress. Additionally, we will ensure the platform’s responsiveness for
optimal use across devices.
3. To integrate common features such as login, registration, and theme options (dark mode
and light mode) to improve user experience. The platform will be designed to be
scalable and secure, ensuring a smooth, reliable learning experience for users.

1.2 IMPORTANCE OF ONLINE LEARNING PLATFORM

The importance of an online learning platform lies in its potential to significantly enhance the
learning experience and improve educational outcomes for both students and teachers. Here
are some key points highlighting its importance:

1. Accessible Education for All: An online learning platform makes educational content
accessible to a wider audience, allowing students from various geographical locations
and backgrounds to access high-quality learning resources at their convenience.
2. Student Engagement and Interaction: By enabling students to like, comment, and save
content, the platform encourages active participation and engagement. This interactive
learning environment enhances students' understanding and retention of the material.
3. Teacher Empowerment: The platform empowers teachers by providing them with tools
to upload, manage, and organize educational content. Teachers can track engagement
through likes, comments, and video analytics, helping them tailor their teaching
methods and improve content delivery.
4. Personalized Learning Experience: The platform allows students to explore courses and
content based on their individual preferences and learning goals.

8
1.3 CURRENT SYSTEM

The current systems of online learning platforms mostly rely on static content delivery and
offer limited interaction features. Many platforms provide access to study materials but lack
effective engagement tools, performance tracking, and personalized learning options. As a
result, the user experience is not dynamic and does not adapt well to individual learner needs.

In the following ways, the current system is lagging –

 The system lacks personalization in content recommendations.

 There is limited interaction between teachers and students.
 Student performance tracking is often inadequate.
 Feedback mechanisms are either missing or underdeveloped.
 There is no feature to organize content into playlists or structured modules.
 Many systems are not fully responsive or user-friendly across devices.
 Accessibility features like dark mode and light mode are not commonly available.

1.4 PROPOSED SYSTEM

The proposed online learning platform provides a dynamic and interactive environment for
both students and teachers. It supports structured content delivery, allowing teachers to upload
educational materials, create playlists, and manage course modules. The system is enriched
with features like like/dislike, commenting, and saving videos, enhancing user engagement and
participation.
The platform includes secure login and registration for authenticated access and supports
responsive design with both dark and light modes for better accessibility. Students can explore
and search for courses uploaded by teachers, allowing for an organized and efficient learning
experience.
 Allows content upload and playlist creation by teachers.
 Enhances interaction with like, comment, and save features.
 Enables students to search and explore teacher-uploaded content.
 Offers secure login and password-protected access.
 Provides a user-friendly interface and responsive design.
 Supports dark mode and light mode for user comfort.

9
 CHAPTER – 2

BACKGROUND OF PROJECT

2.1 NEED FOR AN INTERACTIVE ONLINE LEARNING PLATFORM

Online learning has become an essential mode of education delivery in the digital age.
Traditional classroom settings are often limited by geography, time, and resources, making it
difficult to provide flexible learning opportunities. Existing systems typically offer basic
content delivery without dynamic interaction or personalized learning features.

Static content platforms lack student engagement and do not simulate the real-world classroom
experience. These limitations encouraged the development of an “Online Learning Platform”
that addresses modern educational needs. The rise of digital content and the demand for remote
access to quality education have made it necessary to create an efficient, interactive, and
scalable solution.

This platform is designed to bridge the gap between traditional teaching methods and modern
digital education. It allows teachers to upload and organize educational content while enabling
students to access, interact with, and engage in learning anytime and anywhere. The inclusion
of search features, playlists, comment sections, and personalization makes it more adaptable to
real-world learning scenarios. The focus is on improving content delivery, user interaction, and
overall accessibility to quality education.

2.2 DYNAMIC SELECTION CONCEPT

The dynamic content delivery concept strengthens the foundation of the entire “Online
Learning Platform.” This mode enables personalized and flexible access to educational content
based on student needs and preferences.

The whole platform works on the basic idea of subject-wise content organization, but the
content delivery mechanism is advanced and enhanced. The platform not only supports the idea
of categorized learning but also introduces dynamic features such as recommended videos,
playlists, and adaptive content delivery, giving users a personalized and engaging learning
experience.

10
 CHAPTER - 3

TECHNOLOGIES USED
3.1 HTML (HYPER TEXT MARKUP LANGUAGE)

HTML is the standard markup language used to create and design the structure of web pages.
It defines the content elements such as headings, paragraphs, links, buttons, forms, and
multimedia. HTML plays a fundamental role in building the interface of the online learning
platform, providing the structural framework for displaying educational content.

HTML documents are composed of a series of elements enclosed within angle brackets (< >).
These elements can define headings, paragraphs, lists, and more. HTML also enables
embedding of multimedia content, such as images and videos, and allows for the creation of
interactive forms.

For an online learning platform, HTML forms the backbone of all pages, including the layout
for course listings, video content, and interactive features such as search bars and user
authentication forms. By structuring content with HTML, we ensure users can easily access
and navigate the platform.

Key Features:

 Provides structure for web pages

 Supports multimedia integration (images, videos, etc.)
 Works with CSS and JavaScript for styling and interactivity

3.2 CSS (Cascading Style Sheets)

CSS is a stylesheet language used to define the presentation of a web page written in HTML.
It is responsible for controlling the layout, colors, fonts, spacing, and overall appearance of the
website. CSS allows web designers to separate the content (HTML) from its presentation,
making the design more flexible and easier to maintain.

CSS rules consist of selectors and declarations. Selectors identify the HTML elements to which
the style will be applied, while declarations define the styles for those elements, such as font
size, color, and layout properties.

11
For the online learning platform, CSS is used to enhance user experience by ensuring the
platform is visually appealing, responsive, and user-friendly. It ensures the site adapts to
various screen sizes (e.g., mobile devices and desktops), providing a seamless learning
experience.

Purpose in the Platform:

 Styling the elements like buttons, text fields, and forms.

 Ensuring the platform’s responsiveness across devices (mobile, tablet, desktop).
 Implementing features like dark mode and light mode for a better user experience.

3.3 JAVASCRIPT

JavaScript is essential for the interactive elements of the platform. It allows the creation of
dynamic content, such as real-time search, interactive forms, and user-triggered actions.
JavaScript also ensures that the user interface responds without reloading the page, offering a
more fluid experience.

Purpose in the Platform:

 Enabling dynamic course searching and filtering.

 Handling user interactions like likes, comments, and course selections.
 Implementing real-time features without page reload (AJAX functionality).

With JavaScript, the platform becomes highly interactive, ensuring users can quickly find what
they need and engage with content in real time.

3.4 PHP (Hypertext Preprocessor)

PHP is a server-side scripting language used to handle dynamic content on the platform. It
manages backend operations, including user authentication (login/register), content uploads,
and database interactions. PHP interacts with the MySQL database to retrieve and update data
as per user requests.

Purpose in the Platform:

 Managing user authentication and data handling.

 Handling content uploads such as videos, notes, and other course materials.
 Interacting with the MySQL database to store user interactions, comments, and likes.

12
  PHP ensures the platform runs smoothly by managing server-side operations, making
sure users can access their content and interact with it securely.

3.5 MySQL

MySQL is the database management system that stores all the data related to users, courses,
content, and interactions. It is used to perform complex queries and retrieve information
quickly, ensuring efficient data retrieval for the platform's users.

Purpose in the Platform:

 Storing user data (students, teachers, and admin).

 Managing course data, video links, comments, likes, and progress.
 Facilitating efficient data queries and retrieval, ensuring fast page loads.

MySQL plays a critical role in managing large datasets, allowing the platform to function
smoothly while handling user requests in real time.

3.6 APACHE SERVER

Apache Server is a widely-used open-source web server that is responsible for serving the
platform’s web content. It ensures smooth communication between the client and server,
handling HTTP requests and delivering the necessary data efficiently.

Purpose in the Platform:

 Serving the web pages and content to users.

 Managing the communication between the client-side interface and the backend (PHP
scripts).
 Ensuring the platform remains stable, secure, and accessible to users at all times.

Apache Server guarantees that the platform is accessible, stable, and efficient, ensuring a
reliable experience for all users.

13
 CHAPTER - 4

DESIGN OF PROJECT

4.1 HARDWARE CONFIGURATION

– Processor: AMD Ryzen 5 5625U with Radeon Graphics, 2.30 GHz

– RAM: 8.00 GB (7.34 GB usable)
– Free Space Required on Hard Disk: 10 GB (for software and development tools)

4.2 SOFTWARE REQUIREMENTS

Server End:

– Web Server: Apache Server

– Database: MySQL
– Server-Side Language: PHP

Client End:

– Web Browser: HTTP-supported modern web browser (e.g., Google Chrome, Mozilla
Firefox, or Microsoft Edge)
– Web Connectivity: Required for accessing the platform and interactive features
– JavaScript: Enabled for frontend interactivity and functionality

4.3 DATA FLOW

User Interaction (Frontend):

 Student/Teacher login: The user (either Student or Teacher) accesses the website and
logs in using the provided credentials.
 Student Views Content: Students can browse through the courses uploaded by teachers.
When a student clicks on a subject or course, the frontend (HTML, CSS, JavaScript)
fetches the data (course details, YouTube links, comments) from the backend.
 Teacher Uploads Content: Teachers can upload videos, create playlists, and add course
materials. This data is sent from the frontend to the backend (PHP).

Frontend (Client-Side):

14
  HTML/CSS: The structure and design of the web pages are rendered on the client side.
 JavaScript: It handles interactions like liking videos, commenting, searching for
courses, and dynamically updating the content without refreshing the page (using AJAX
or fetch API).
 PHP and MySQL: Data is fetched and displayed dynamically by interacting with the
backend server.

Backend (Server-Side):

 PHP Scripts: When a student clicks on a course, PHP scripts handle the request. They
interact with the MySQL database to fetch the necessary course data (videos, details,
etc.).
 MySQL Database: Stores user details (students and teachers), course information, video
URLs, comments, likes, and other relevant data. This database is queried when data
needs to be retrieved for display.

Database Interaction:

 SQL Queries: PHP sends SQL queries to MySQL to:

o Retrieve course data.
o Fetch student comments and likes.
o Store new content uploaded by teachers.
o Save student interactions (e.g., which videos they liked or saved).
 MySQL Response: The data fetched from the database is returned to PHP, which then
sends it back to the frontend for rendering.

Final Output (Frontend Response):

 Dynamic Content: Once the PHP backend processes the request and fetches the data
from MySQL, the frontend displays the updated content (like course videos, comments,
and like buttons) dynamically using JavaScript (AJAX).
 Interactive Features: Students can like videos, comment, and save content. These
actions are sent to PHP, which updates the database (through SQL queries) and provides
feedback to the frontend to update the UI accordingly.

4.4 LIST OF MODULES (SYSTEM APPLICATION

15
1. User Interface
 Login: Allows both students and teachers to securely log into the platform using their
credentials.
 Registration: Enables new users (students or teachers) to create an account on the
platform.
2. Manual Mode
 Static access to course content uploaded by teachers.
 No real-time data fetching; fixed content display.
3. Dynamic Mode
 Real-time interaction and data retrieval from the backend.
 Enables liking, commenting, and saving videos dynamically.
4. Message Digest
 Securely processes passwords and sensitive user data using hashing techniques for
privacy.
5. Crypt Information
 Implements data encryption and decryption mechanisms for sensitive information like
user credentials and communication between frontend and backend.

16
 CHAPTER - 5

IMPLEMENTATION

5.1 OVERVIEW

The implementation phase marks the transformation of system design into a functional and
user-interactive application. After analysing the requirements and designing the architecture,
the focus shifted toward building individual modules and integrating them to work as a
complete system. In this project — an Online Learning Platform — implementation involved
connecting the frontend with the backend, establishing secure database transactions, handling
dynamic content, and ensuring usability through responsive design and modern UI elements.

The implementation was carried out in a phased manner to ensure that every component works
efficiently and interacts smoothly with others. Throughout the process, various technologies
were employed, such as HTML, CSS, JavaScript, PHP, and MySQL, while Apache served as
the local development server.

5.2 TECHNOLOGIES USED

 Frontend
o HTML5 – For structuring content and elements.
o CSS3 – For designing a user-friendly and visually appealing interface.
o JavaScript – To handle client-side validation, interactivity, and dark/light mode
toggling.
 Backend
o PHP – Used for writing server-side scripts, handling form submissions,
login/register logic, and dynamic content management.
 Database
o MySQL – Used for storing user data, course information, comments, likes, and
saved content.
 Server
o Apache (XAMPP) – Served as the local development server to test PHP and
database connectivity.

17
5.3 MAJOR IMPLEMENTATION MODULES

1. Database Design and Setup

o Created relational tables for students, teachers, videos, playlists, likes,
comments, and saved content.
o Implemented primary and foreign key constraints for data integrity.
o Indexed key columns to improve query performance.
2. User Registration and Authentication
o Implemented secure login and registration system using PHP.
o Applied hashing techniques for password storage.
o PHP session management was used to ensure secure logins and prevent
unauthorized access.
3. Teacher Dashboard
o Upload content (YouTube video links).
o Create subject-wise or topic-wise playlists.
o Monitor student interactions through likes and comments.
o Implemented easy-to-use upload forms with real-time validation.
4. Student Dashboard
o Browse content uploaded by various teachers.
o Like videos and post comments.
o Save videos/playlists to their profile for later viewing.
o A robust search bar was added for filtering content topic-wise.
5. Content Management System
o Allows teachers to manage uploaded content (edit/delete).
o Students can access content dynamically without page reloads using AJAX.
o The layout supports both grid and list views for better navigation.
6. Like & Comment System
o Users can interact with video content through likes and comments.
o AJAX is used for seamless posting without refreshing the page.
o Teachers can see who liked or commented on their videos.
7. Dark Mode / Light Mode Feature
o Toggle button created using JavaScript.
o User preference stored in localStorage for persistent theme selection.
8. Responsiveness and UI Design
18
 o CSS media queries used to ensure full responsiveness.
o Platform adapts to all screen sizes — desktops, tablets, and mobiles.
o Used modern color schemes and minimalistic UI for better user experience.

5.4 IMPLEMENTATION STRATEGY

a) Phased Development: Modules were implemented in a step-by-step manner to isolate

bugs and verify individual functionalities.
b) Modular Coding: Code was structured in separate PHP and JS files for reusability and
maintainability.
c) Version Control: Git was used to manage changes, track versions, and collaborate.

5.5 TESTING AND DEBUGGING

a) Unit Testing: Each module (login, upload, view content) was tested independently.
b) Integration Testing: Verified the working of combined modules such as comment-
posting and content-liking with the database.
c) Browser Compatibility Testing: Ensured smooth performance across Chrome, Firefox,
and Edge.
d) Debugging Tools:
o Browser DevTools (for frontend)
o PHP error reporting and logs
o MySQL console (for data verification)

19
 CHAPTER - 6
RESULTS

Fig. 6.1 Student’s Dashboard

Fig. 6.2 Update Profile

20
 Fig. 6.3 Tutors' Profile

Fig. 6.4 Playlists by Tutors

21
 Fig. 6.5 Students Comments

Fig. 6.6 Responsiveness of Website

22
 Fig. 6.7 Dark Mode

Fig. 6.8 Update and delete Playlists

23
 CHAPTER – 7

CONCLUSION AND FUTURE WORK

7.1 CONCLUSION

This project aimed to develop an efficient and user-friendly Online Learning Platform using
HTML, CSS, JavaScript, PHP, and MySQL. The system facilitates seamless interaction
between students and teachers. Students can register, view content, like and comment on
videos, and explore playlists. Teachers, on the other hand, can upload content, organize it into
playlists, and view feedback from students. Core functionalities like login, registration, search,
and responsiveness have been implemented effectively, ensuring accessibility across devices.
The inclusion of both light and dark modes enhances user experience and visual comfort.
Overall, the platform achieves its goal of delivering educational content in a structured,
interactive, and accessible manner.

7.2 FUTURE WORK

• Live Class Integration: Adding support for live video classes or webinars using
platforms like Zoom or Jitsi.
• Quiz and Assessment Module: Allowing teachers to create quizzes and tests to evaluate
students' understanding.
• Progress Tracking: Introducing progress bars and performance analytics for students.
• Mobile Application: Creating a mobile app version of the platform to increase
accessibility.
• Chat Support: Implementing a real-time chat system for communication between
students and teachers.
• Admin Panel: A dedicated panel for administrators to manage users, content, and
platform statistics.
• Certificate Generation: Generating course completion certificates automatically.
• Security Enhancements: Adding two-factor authentication and better encryption for
sensitive data.

24
 REFERENCES
1. W3Schools – https://www.w3schools.com
• Used for learning HTML, CSS, JavaScript, and PHP basics.
2. PHP Manual – https://www.php.net/manual/en/
• Official PHP documentation for syntax, functions, and database integration.
3. MySQL Documentation – https://dev.mysql.com/doc/
• Used for understanding MySQL queries and database design.
4. Stack Overflow – https://stackoverflow.com
• Helped resolve coding errors and implementation issues during development.
5. YouTube Tutorials –
• Various video tutorials were used to understand full-stack development and UI/UX
design.
6. MDN Web Docs – https://developer.mozilla.org
• Detailed explanation of JavaScript functions and browser compatibility.

25