A

MAJOR PROJECT REPORT

On

“E-Learning Platform for

IMS’s Students”

BACHELOR OF COMPUTER APPLICATIONS

Of
C.C.S University, MEERUT

Submitted By
Shivil Baliyan
Roll no: 210935106217
Session: 2021-24

Under the guidance of

Mr. Ashish Bhatnagar
INSTITUTE OF MANAGEMENT STUDIES GHAZIABAD
(UNIVERSITY COURSES CAMPUS)
NH 24, ADHYATAMIK NAGAR, GHAZIABAD

1
 DECLARATION

I hereby declare that the work, which is presented in this report, is in partial fulfillment
of the requirement for the award of the degree BCA (C.C.S. University. Meerut), in an
authentic record of work carried.

No part of this dissertation has been submitted to any other University or Institution for
any other degree or reward.

SHIVIL BALIYAN

2
 ACKNOWLEDGMENT

It is a pleasure to acknowledge the direct and implied help I have received in

task of developing the project at its various stages. It would not have been
possible to develop such a project without the contribution efforts and great
deal of encouragement on part of numerous individuals.

I express my profound gratitude to my guide Mr. Ashish Bhatnagar for

guidance, motivation and assistance in the course of this profit.

I am greatly thankful to all our lab in charge/instructors for providing us all

the facilities and environment for the successful completion of the project
within the time limits.

I am also grateful for the support and resources provided to me by the IMS,
UNIVERSITY COURSES CAMPUS. GHAZIABAD computer center
and library.

3
 TABLE OF CONTENT
S. NO CONTENT PAGE
NO.
1. Abstract 6
2. Introduction 7
3. System Analysis 9
4. System Requirement 10
5. Technology Used 11
6. E-R Diagram 12-13
7. System Design 14-17
8. Coding 18-90
9. Testing 90
10. Testing Technique 91-93
11. Advantage 94
12. Limitation 94
13. Future Scope of the Project 95
14. Conclusion 96
15. Reference 97

4
 LIST OF FIGURES

S.NO. FIG NO. TOPIC PAGE

NO.

1. FIG. 1 E-R Diagram 13

2. FIG User Interface 14 -17

5
 ABSTRACT

This project report details the development of a comprehensive e-learning

platform designed to support students preparing for BCA exams or entrance
exams such as NIMCET and CUET, along with resources for mastering data
structures and courses offered at IMS College. The platform aims to bridge
the gap in accessible, high-quality study materials, offering a wide range of
interactive and personalized learning resources.

Key features of the platform include detailed syllabus coverage, video

tutorials, coding exercises, and personalized learning paths. The integration
of data structures resources is a significant addition, ensuring students not
only prepare for their entrance exams but also build a strong foundation in
essential computer science concepts. Furthermore, the platform extends its
resources to cover various courses offered at IMS College, providing a
unified learning solution for a broader student audience.

The project employs a combination of manual and automated testing

methodologies to ensure the platform's reliability, functionality, and
usability. Continuous assessment and feedback mechanisms, along with
community engagement features, foster an interactive and supportive
learning environment. Accessibility considerations ensure the platform is
inclusive, catering to students with diverse learning needs and preferences.

By addressing the academic and skill development needs of MCA aspirants

and IMS College students, the project aims to enhance their preparation,
confidence, and performance. The commitment to continuous improvement
and innovation positions the platform as a dynamic and responsive
educational tool, contributing significantly to students' academic success and
career readiness.

6
 INTRODUCTION

2.1 Objective:

The primary objective of this e-learning project is to create a robust,

comprehensive, and accessible online platform that caters to the diverse
educational needs of students preparing for BCA exams or entrance exams
like NIMCET and CUET, as well as those seeking to master data structures
and various courses offered at IMS College. This project aims to address the
current gaps in quality study materials and provide a supportive, engaging,
and effective learning environment.

A key focus of the project is to offer detailed study materials that cover the
entire syllabus of MCA entrance exams. By including resources such as
theoretical notes, practice questions, previous years' papers, and mock tests,
the platform ensures that students are thoroughly prepared for their exams.
This comprehensive approach helps students understand and master the
concepts required to excel in these competitive exams. Recognizing the
importance of data structures in computer science education, the project also
includes in-depth resources on this topic. These resources cover a wide
range of data structures, including arrays, linked lists, stacks, queues, trees,
graphs, and sorting algorithms. By offering detailed explanations, practical
exercises, and coding challenges, the platform aims to enhance students'
problem-solving skills and programming proficiency.

In summary, this e-learning project seeks to empower students with the

knowledge, skills, and confidence needed to excel in their academic and
professional pursuits. By providing comprehensive resources, personalized
learning experiences, and fostering a supportive community, the platform
aims to make a meaningful impact on students' educational journeys.

7
 2.2 Scope:

 Comprehensive BCA or Entrance Exam Preparation

 Integration of Data Structures Resources

 Preparation for IMS College Courses

 Interactive Learning Resources

 Personalized Learning Paths

 Progress Tracking and Feedback

 Mobile Compatibility and Accessibility

 Community Engagement and Collaboration

 Quality Assurance and Continuous Improvement

8
 SYSTEM ANALYSIS
3.1 Existing System:
Current e-learning platforms for BCA exam or entrance exams, data
structures, and IMS College courses are fragmented, making it challenging
for students to find comprehensive study materials. These platforms often
lack personalized learning paths and adaptive assessments, resulting in a
one-size-fits-all approach. Additionally, many existing systems are not
mobile-friendly or accessible to students with disabilities, limiting their
usability. They also tend to lack interactive elements such as quizzes, coding
exercises, and video tutorials, which are essential for engaging learning.
Furthermore, there is often limited opportunity for students to interact and
collaborate, leading to a lack of community support.

3.2 Proposed System:

The proposed e-learning platform aims to provide a unified resource for

MCA entrance exams, data structures, and IMS College courses. It will offer
personalized learning paths and adaptive assessments to cater to individual
student needs. The platform will prioritize mobile compatibility and
accessibility to ensure all students can easily access the resources. It will
feature a variety of interactive learning resources, such as quizzes, video
tutorials, and coding exercises, to engage students. Additionally, the
platform will foster a vibrant learning community with discussion forums,
peer-to-peer learning opportunities, and mentorship programs to encourage
collaboration and support.

3.3 Feature of Proposed System:

The proposed e-learning platform offers comprehensive content for BCA
exams, data structures, and IMS College courses, consolidating essential
study materials. It includes interactive quizzes, video tutorials, and coding
exercises to enhance engagement. Personalized learning paths and adaptive
assessments tailor the experience to individual needs, while progress
tracking and feedback tools help monitor development. Mobile-friendly and
accessible, the platform supports students with disabilities. Community

9
features like discussion forums and peer-to-peer learning foster a supportive
environment.

SYSTEM REQUIREMENTS

4.1 Hardware Requirements:

Processor : P-4 processor or higher

RAM : At least 512 MB
Disk Space : 2 GB

4.2 Software Requirements:

Operating System : Windows XP/7/8 or Later

Software used : Internet explorer, Google chrome (or any browser)
Notepad (or any text editor)
Language : CSS, HTML 5.0

10
 TECHNOLOGY USED
5.1Front End:

 HTML (Hypertext Markup Language): HTML is the standard markup

language used to create the structure and content of web pages. It provides
a set of elements and tags that define the layout, text, images, and other
multimedia elements on a webpage.
 CSS (Cascading Style Sheets): CSS is used to style the appearance of
HTML elements on a webpage. It allows developers to specify colors,
fonts, layout, and other visual aspects of the webpage, enhancing its
aesthetic appeal and user experience.
 JavaScript: JavaScript is a programming language commonly used for
client-side scripting in web development. It enables dynamic and
interactive functionality on web pages, such as form validation,
animation, and event handling. JavaScript interacts with the HTML and
CSS to create responsive and interactive user interfaces.

Backend Technologies (PHP, SQL):

PHP (Hypertext Preprocessor): PHP is a server-side scripting language

used for developing dynamic web applications and websites. It executes on
the server and generates dynamic content, such as HTML, to be sent to the
client's browser. PHP is commonly used for tasks such as user
authentication, data processing, and interacting with databases.

SQL (Structured Query Language): SQL is a programming language used

for managing and manipulating relational databases. It provides a
standardized syntax for performing operations such as querying, inserting,
updating, and deleting data in databases. SQL is essential for backend
development as it allows developers to store, retrieve, and manage data
efficiently and securely.

11
 E-R DIAGRAM

An entity-relationship (ER) diagram is a specialized graphic that illustrates

the Interrelationship between entities in a database. ER diagram often use
symbols to represent three different types of information. Boxes are
commonly used to represent entities. Diamonds are normally used to
represent relationship and ovals are used to represent attributes. Without
understands the relationship between an users with the DUF orum we cannot
build the on-line test and an forum, only then we would be able to design the
process that needs to be computerized to build the system.

The diagram documents the entities and relationship involved in the user
information and on-line test system. It depicts the fundamental relation like
recording personnel information, taking test handling queries.

The E-R Diagram for DUF orum can be simple as well as complex, Data
flow Diagramming is a means of representing a system at any level of detail
with a graphic network of symbols showing data flows, data stores, data
processes, and data sources/destination.

12
FIG:-1

13
SYSTEM DESIGN

User Interface

14
15
16
17
CODE EXCERPTS:-

1. Index page:-
<!DOCTYPE html>
<html>

<head>
<link rel="shortcut icon" type="png" href="images/icon/icons8-
creative-64.png">
<meta charset="utf-8">
<meta http-equiv="X-UA-Comaptible" content="IE=edge">
<title>Imsian</title>
<meta name="desciption" content="">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" type="text/css" href="stage.css">
<script type="text/javascript" src="script.js"></script>
<script>
$(window).on('scroll', function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
})

18
 </script>
</head>

<body>
<!-- Navigation Bar -->
<div class="nav">

</div>
<header id="header">

<nav>

<div class="logo"><img
src="images/icon/imasianlogo.png" alt="logo"></div>
<ul>
<li><a class="active"
href="">Home</a></li>
<li><a
href="#portfolio_section">Portfolio</a></li>
<li><a
href="#team_section">Team</a></li>
<li><a
href="#services_section">Services</a></li>
<li><a
href="#feedback_section">Feedback</a></li>

19
 </ul>
<a class="get-started" href="login.php">Get
Started</a>
<img src="images/icon/menu.png" class="menu"
onclick="sideMenu(0)" alt="menu">
</nav>
<div class="head-container">
<div class="quote">
<p> “Give a man a fish and you feed him
for a day; teach a man to fish and you feed him for a lifetime.”
—Maimonides </p>
<h5>The great thing about learning is that
you never have to stop! There’s no limit as to the amount of
knowledge you can obtain. So, rip a
page from Gandhi’s book and keep on learning while you’re
living.</h5>
</div>
<div class="svg-image">
<img src="images/extra/IMS PHOTO.png"
alt="svg">
</div>
</div>

</header>

<!-- Some Popular Subjects -->

20
 <div class="title">
<span>Popular Subjects on Imasian</span>
</div>
<br><br>
<div class="course">
<center>
<div class="cbox">
<div class="det"><a href="login.php"><img
src="images/courses/book.png">BCA</a></div>
<div class="det"><a href="login.php"><img
src="images/courses/d1.png">NIMCET Entrance</a>
</div>
<div class="det"><a href="login.php"><img
src="images/courses/paper.png">Sample
Papers</a></div>
</div>
</center>
<div class="cbox">
<div class="det"><a href="login.php"><img
src="images/courses/computer.png">Computer
Courses</a></div>
<div class="det"><a href="login.php"><img
src="images/courses/data.png">Data
Structures</a></div>
<div class="det"><a href="login.php"><img
src="images/courses/algo.png">Algorithm</a></div>
</div>

21
 </div>

<!-- ABOUT -->

<div class="diffSection" id="about_section">
<center>
<p style="font-size: 50px; padding:
100px">About</p>
</center>
<div class="about-content">
<div class="side-image">
<img class="sideImage"
src="images/extra/e3.jpg">
</div>
<div class="side-text">
<h2>What you think about us ?</h2>
<p>Education is the process of facilitating
learning, or the acquisition of knowledge, skills, values,
beliefs, and habits. Educational
methods include teaching, training, storytelling, discussion and
directed research.<br> Educational
website can include websites that have games, videos or topic
related resources that act as tools to
enhance learning and supplement classroom teaching. These
websites help make the process of
learning entertaining and attractive to the student, especially in

22
 today's age. <br>Using
HTML(HyperText Markup Language), CSS(Cascading Style Sheet),
JavaScript, we
can make learning more easier and in
a interesting way.</p>
</div>
</div>
</div>

<!-- PORTFOLIO -->

<div class="diffSection" id="portfolio_section">
<center>
<p style="font-size: 50px; padding: 100px;
padding-bottom: 40px;">Portfolio</p>
</center>
<div class="content">
<p>
“Education is the passport to the future, for
tomorrow belongs to those who prepare for it today.” “Your
attitude, not your aptitude, will determine
your altitude.” “If you think education is expensive, try
ignorance.” “The only person who is
educated is the one who has learned how to learn …and change.”
</p>
</div>
</div>

23
 <div class="extra">
<p>We're increasing this data every year</p>
<div class="smbox">
<span>
<center>
<div class="data">200</div>
<div class="det">Enrolled
Students</div>
</center>
</span>
<span>
<center>
<div class="data">50</div>
<div class="det">Total
Courses</div>
</center>
</span>
<span>
<center>
<div class="data">100</div>
<div class="det">Placed
Students</div>
</center>
</span>

</div>

24
 </div>

<!-- TEAM -->

<div class="diffSection" id="team_section">
<center>
<p style="font-size: 50px; padding-top: 100px;
padding-bottom: 60px;">We're the Creators</p>
</center>
<div class="totalcard">
<div class="card">
<center><img
src="images/creator/shubham.jpeg"></center>
<center>
<div class="card-title">Shubham
Srivastwa</div>
<div id="detail">
<p>“ You can teach a student a
lesson for a day; but if you can teach him to learn by creating
curiosity, he will
continue the learning process as long as he lives “</p>
<div class="duty"></div>
<a href="#"
target="_blank"><button class="btn-roshan">Follow +</button></a>
</div>
</center>
</div>

25
 <div class="card">
<center><img
src="images/creator/Yash.jpg"></center>
<center>
<div class="card-title">Yash
Tyagi</div>
<div id="detail">
<p>“ Real education should
consist of drawing the goodness and the best out of our own students.
What better books can
there be than the book of humanity “</p>
<div class="duty"></div>
<a href="#"
target="_blank"><button class="btn-akhil">Follow +</button></a>
</div>
</center>
</div>
</div>
</div>

<!-- SERVICES -->

<div class="service-swipe">
<div class="diffSection" id="services_section">
<center>
<p style="font-size: 50px; padding: 100px;
padding-bottom: 40px; color: #fff;">Services</p>

26
 </center>
</div>
<a href="login.php">
<div class="s-card"><img
src="images/icon/computer-courses.png">
<p>Free Online Computer Courses</p>
</div>
</a>
<a href="login.php">
<div class="s-card"><img
src="images/icon/brainbooster.png">
<p>NIMCET ENTRANCE</p>
</div>
</a>

<a href="login.php">
<div class="s-card"><img
src="images/icon/papers.jpg">
<p>Sample Papers for University
Exams</p>
</div>
</a>
<a href="#contactus_section">
<div class="s-card"><img
src="images/icon/discussion.png">
<p>Discussion with Our Tutors &
Mentors</p>

27
 </div>
</a>
<a href="#contactus_section">
<div class="s-card"><img
src="images/icon/help.png">
<p>24x7 Online Support</p>
</div>
</a>
</div>

<!-- Reviews by Students -->

<div id="makeitfull">
<a href="#review_section"><img
src="images/icon/makeitfull.png"></a>
</div>
<div class="review">
<div class="diffSection" id="review_section">
<center>
<p style="font-size: 40px; padding: 100px;
padding-bottom: 40px; color: #2E3D49;">What the Students Say
About Us?</p>
</center>
</div>
<div class="rev-container">
<div class="rev-card">
<div class="identity">

28
 <img src="#">
<p>Gaurav Singh</p>
<h6>Java</h6>
<div class="rating"><img
src="images/icon/star.png"><img src="images/icon/star.png"><img
src="images/icon/star.png"><img src="images/icon/star.png"><img
src="images/icon/star.png">
</div>
</div>
<div class="rev-cont">
<p id="title">Review:</p>
<p id="content">
I did Java Fundamenetal course
with Rishab Sir. It was a great experience. The brain teasers and
assignments, actually the whole
lot of content was really good. Some problems were challenging
yet interesting. Was explained
very well where ever I stuck...
</p>
</div>
</div>
<div class="rev-card">
<div class="identity">
<img src="#">
<p>Priya Bansal</p>
<h6>C/C++</h6>

29
 <div class="rating"><img
src="images/icon/star.png"><img src="images/icon/star.png"><img
src="images/icon/star.png"><img src="images/icon/star.png"><img
src="images/icon/star.png">
</div>
</div>
<div class="rev-cont">
<p id="title">Review:</p>
<p id="content">
When I was watching "Dear
Zindagi", I could relate Sharukh Khan to Arnav Bhaiya. The way
Sharukh
Khan was giving life lessons to
Alia Bhatt, in the same way Arnav Bhaiya will give coding life
lessons which will guide you
throughout your code life...
</p>
</div>
</div>
<div class="rev-card">
<div class="identity">
<img src="#">
<p>Tanisha Singh</p>
<h6>JEE</h6>
<div class="rating"><img
src="images/icon/star.png"><img src="images/icon/star.png"><img
src="images/icon/star.png"><img src="images/icon/star.png"><img
src="images/icon/star.png">
</div>
30
 </div>
<div class="rev-cont">
<p id="title">Review:</p>
<p id="content">
LearnEd was an amazing
experience for me. I belong to electronics department and had a little
experience in coding but I think
it has helped me think things through in a much more analytical
manner. Coding is important no
matter which branch you are in. It gives you a better
understanding about how to
approach a problem...
</p>
</div>
</div>
<div class="rev-card">
<div class="identity">
<img src="#">
<p>Ambika Budhiraj</p>
<h6>Python</h6>
<div class="rating"><img
src="images/icon/star.png"><img src="images/icon/star.png"><img
src="images/icon/star.png"><img src="images/icon/star.png"><img
src="images/icon/star.png">
</div>
</div>
<div class="rev-cont">

31
 <p id="title">Review:</p>
<p id="content">
This was my first complete
course at coding blocks. I attended the Python course in Winter 2020
and loved it which made me
join the full course. Shubham bhaiya and Ayush Bhaiya(TA) have
good
knowledge about the field and
were very helpful in making us understand the concepts. I would
certainly recommend this to
anyone...
</p>
</div>
</div>
</div>
</div>

<!-- Feedback -->

<div class="diffSection" id="feedback_section">
<center>
<p style="font-size: 50px; padding:
100px">Feedback</p>
</center>
<div class="csec"></div>
<div class="back-contact">
<div class="cc">

32
 <form
action="mailto:[email protected]" method="post"
enctype="text/plain">
<label>First Name <span
class="imp">*</span></label><label style="margin-left:
185px">Last Name
<span
class="imp">*</span></label><br>
<center>
<input type="text" name=""
style="margin-right: 10px; width: 175px"
required="required"><input type="text" name="lname"
style="width: 175px" required="required"><br>
</center>
<label>Email <span
class="imp">*</span></label><br>
<input type="email" name="mail"
style="width: 100%" required="required"><br>
<label>Message <span
class="imp">*</span></label><br>
<input type="text" name="message"
style="width: 100%" required="required"><br>
<label>Additional
Details</label><br>
<textarea
name="addtional"></textarea><br>
<button type="submit"
id="csubmit">Send Message</button>
</form>
</div>

33
 </div>
</div>

<!-- Sliding Information -->

<marquee style="background: linear-gradient(to right,
#FA4B37, #DF2771); margin-top: 50px;" direction="left"
onmouseover="this.stop()" onmouseout="this.start()"
scrollamount="20">
<div class="marqu">“Education is the passport to the
future, for tomorrow belongs to those who prepare for it
today.” “Your attitude, not your aptitude, will
determine your altitude.” “If you think education is
expensive, try ignorance.” “The only person who
is educated is the one who has learned how to learn …and
change.”</div>
</marquee>

<!-- FOOTER -->

<footer>
<div class="footer-container">
<div class="left-col">
<img src="images/icon/IMSLOGO.png"
style="width: 100px;">
<div class="logo"></div>
<div class="social-media">
<a href="#"><img
src="images/icon\fb.png"></a>

34
 <a href="#"><img
src="images/icon\insta.png"></a>
<a href="#"><img
src="images/icon\tt.png"></a>
<a href="#"><img
src="images/icon\ytube.png"></a>
<a href="#"><img
src="images/icon\linkedin.png"></a>
</div><br><br>
<p class="rights-text">Copyright © 2024
Created By Shubham Srivastwa ,Yash Tyagi All Rights Reserved.
</p>
<br>
<p><img src="images/icon/location.png">
Institute of Management Studies <br>Ghaziabad, Uttar Pradesh</p>
<br>
<p><img src="images/icon/phone.png">
+91-1234-567-890<br><img src="images/icon/mail.png">&nbsp;
[email protected]</p> </div>
<div class="right-col">
<h1 style="color: #fff">Our
Newsletter</h1>
<div class="border"></div><br>
<p>Enter Your Email to get our News and
updates.</p>
<form class="newsletter-form">
<input class="txtb" type="email"
placeholder="Enter Your Email">

35
 <input class="btn" type="submit"
value="Submit">
</form>
</div>
</div>
</footer>

</body>
</html>

2. Index.two

<?php
session_start();
if (!isset($_SESSION['userid'])) {
header("location:login.php");
}
?>
<!DOCTYPE html>
<html>

<head>
<link rel="shortcut icon" type="png" href="images/icon/icons8-
creative-64.png">
<meta charset="utf-8">

36
 <meta http-equiv="X-UA-Comaptible" content="IE=edge">
<title>Imasian</title>
<meta name="desciption" content="">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" type="text/css" href="stage.css">
<script type="text/javascript" src="script.js"></script>
<script>
$(window).on('scroll', function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
})
</script>
</head>
<style>
.container {
width: 400px;
height: 450px;
border: 2px solid black;
margin: 220px auto;
background-color: azure;
padding-top: 30px;

37
 border-radius: 40px;
padding-left: 40px;

}
</style>

<body>
<!-- Navigation Bar -->
<header id="header">
<nav>

<div class="logo"><img
src="images/icon/imasianlogo.png" alt="logo"></div>
<ul>
<li><a class="active" href="">Home</a></li>
<li><a
href="#portfolio_section">Portfolio</a></li>
<li><a href="#team_section">Team</a></li>
<li><a
href="#services_section">Services</a></li>
<li><a
href="#feedback_section">Feedback</a></li>

<div class="logt"><li><a class="active"

href="logout.php">Logout</a></li>
</div>
</ul>
38
 <img src="images/icon/menu.png" class="menu"
onclick="sideMenu(0)" alt="menu">
</nav>

<div class="head-container">
<div class="quote">
<p> “Give a man a fish and you feed him for a
day; teach a man to fish and you feed him for a lifetime.”
—Maimonides </p>
<h5>The great thing about learning is that you
never have to stop! There’s no limit as to the amount of
knowledge you can obtain. So, rip a page
from Gandhi’s book and keep on learning while you’re
living.</h5>

</div>
<div class="svg-image">
<img src="images/extra/IMS PHOTO.png"
alt="svg">
</div>
</div>
<div class="side-menu" id="side-menu">
<div class="close" onclick="sideMenu(1)"><img
src="images/icon/close.png" alt=""></div>
<div class="user">

39
 <img src="images/creator/roshan.jpeg"
alt="Username">
<p>Shubham and Yash</p>
</div>
<ul>
<li><a href="#about_section">About</a></li>
<li><a
href="#portfolio_section">Portfolio</a></li>
<li><a href="#team_section">Team</a></li>
<li><a
href="#services_section">Services</a></li>
<li><a
href="#contactus_section">Contact</a></li>
<li><a href="#feedBACK">Feedback</a></li>
</ul>
</div>
</header>

<!-- Some Popular Subjects -->

<div class="title">
<span>Popular Subjects on Imasian</span>
</div>
<br><br>
<div class="course">
<center>

40
 <div class="cbox">
<div class="det"><a
href="subjects/bca.php"><img
src="images/courses/book.png">BCA</a></div>
<div class="det"><a
href="subjects/nimcet.php"><img src="images/courses/d1.png">NIMCET
Entrance</a>
</div>
<div class="det"><a
href="subjects/bca.php"><img src="images/courses/paper.png">Sample
Papers</a></div>
</div>
</center>
<div class="cbox">
<div class="det"><a
href="subjects/computer_courses.php"><img
src="images/courses/computer.png">Computer
Courses</a></div>
<div class="det"><a
href="subjects/computer_courses.php#data"><img
src="images/courses/data.png">Data
Structures</a></div>
<div class="det"><a
href="subjects/computer_courses.php#algo"><img
src="images/courses/algo.png">Algorithm</a></div>
</div>
</div>

41
 <!-- ABOUT -->
<div class="diffSection" id="about_section">
<center>
<p style="font-size: 50px; padding: 100px">About</p>
</center>
<div class="about-content">
<div class="side-image">
<img class="sideImage"
src="images/extra/e3.jpg">
</div>
<div class="side-text">
<h2>What you think about us ?</h2>
<p>Education is the process of facilitating
learning, or the acquisition of knowledge, skills, values,
beliefs, and habits. Educational methods
include teaching, training, storytelling, discussion and
directed research.<br> Educational website
can include websites that have games, videos or topic
related resources that act as tools to enhance
learning and supplement classroom teaching. These
websites help make the process of learning
entertaining and attractive to the student, especially in
today's age. <br>Using HTML(HyperText
Markup Language), CSS(Cascading Style Sheet), JavaScript, we
can make learning more easier and in a
interesting way.</p>
</div>
</div>

42
 </div>

<!-- PORTFOLIO -->

<div class="diffSection" id="portfolio_section">
<center>
<p style="font-size: 50px; padding: 100px; padding-
bottom: 40px;">Portfolio</p>
</center>
<div class="content">
<p>
“Education is the passport to the future, for
tomorrow belongs to those who prepare for it today.” “Your
attitude, not your aptitude, will determine your
altitude.” “If you think education is expensive, try
ignorance.” “The only person who is educated is
the one who has learned how to learn …and change.”
</p>
</div>
</div>
<div class="extra">
<p>We're increasing this data every year</p>
<div class="smbox">
<span>
<center>
<div class="data">200</div>

43
 <div class="det">Enrolled Students</div>
</center>
</span>
<span>
<center>
<div class="data">50</div>
<div class="det">Total Courses</div>
</center>
</span>
<span>
<center>
<div class="data">100</div>
<div class="det">Placed Students</div>
</center>
</span>

</div>
</div>

<!-- TEAM -->

<div class="diffSection" id="team_section">
<center>
<p style="font-size: 50px; padding-top: 100px; padding-
bottom: 60px;">We're the Creators</p>

44
 </center>
<div class="totalcard">
<div class="card">
<center><img
src="images/creator/shubham.jpeg"></center>
<center>
<div class="card-title">Shubham
Srivastwa</div>
<div id="detail">
<p>“ You can teach a student a lesson
for a day; but if you can teach him to learn by creating
curiosity, he will continue the
learning process as long as he lives “</p>
<div class="duty"></div>
<a href="#" target="_blank"><button
class="btn-roshan">Follow +</button></a>
</div>
</center>
</div>
<div class="card">
<center><img
src="images/creator/Yash.jpg"></center>
<center>
<div class="card-title">Yash Tyagi</div>
<div id="detail">
<p>“ Real education should consist of
drawing the goodness and the best out of our own students.

45
 What better books can there be
than the book of humanity “</p>
<div class="duty"></div>
<a href="#" target="_blank"><button
class="btn-akhil">Follow +</button></a>
</div>
</center>
</div>
</div>
</div>

<!-- SERVICES -->

<div class="service-swipe">
<div class="diffSection" id="services_section">
<center>
<p style="font-size: 50px; padding: 100px;
padding-bottom: 40px; color: #fff;">Services</p>
</center>
</div>
<a href="subjects/computer_courses.php">
<div class="s-card"><img src="images/icon/computer-
courses.png">
<p>Free Online Computer Courses</p>
</div>
</a>

46
 <a href="subjects/nimcet.php">
<div class="s-card"><img
src="images/icon/brainbooster.png">
<p>NIMCET ENTRANCE</p>
</div>
</a>

<a href="subjects/bca.php#sample_papers">
<div class="s-card"><img
src="images/icon/papers.jpg">
<p>Sample Papers for University Exams</p>
</div>
</a>
<a href="#contactus_section">
<div class="s-card"><img
src="images/icon/discussion.png">
<p>Discussion with Our Tutors & Mentors</p>
</div>
</a>
<a href="#contactus_section">
<div class="s-card"><img src="images/icon/help.png">
<p>24x7 Online Support</p>
</div>
</a>
</div>

47
 <!-- Reviews by Students -->
<div id="makeitfull">
<a href="#review_section"><img
src="images/icon/makeitfull.png"></a>
</div>
<div class="review">
<div class="diffSection" id="review_section">
<center>
<p style="font-size: 40px; padding: 100px;
padding-bottom: 40px; color: #2E3D49;">What the Students Say
About Us?</p>
</center>
</div>
<div class="rev-container">
<div class="rev-card">
<div class="identity">
<img src="#">
<p>Gaurav Singh</p>
<h6>Java</h6>
<div class="rating"><img
src="images/icon/star.png"><img src="images/icon/star.png"><img
src="images/icon/star.png"><img src="images/icon/star.png"><img
src="images/icon/star.png">
</div>
</div>
<div class="rev-cont">
<p id="title">Review:</p>
48
 <p id="content">
I did Java Fundamenetal course with
Rishab Sir. It was a great experience. The brain teasers and
assignments, actually the whole lot of
content was really good. Some problems were challenging
yet interesting. Was explained very
well where ever I stuck...
</p>
</div>
</div>
<div class="rev-card">
<div class="identity">
<img src="#">
<p>Priya Bansal</p>
<h6>C/C++</h6>
<div class="rating"><img
src="images/icon/star.png"><img src="images/icon/star.png"><img
src="images/icon/star.png"><img src="images/icon/star.png"><img
src="images/icon/star.png">
</div>
</div>
<div class="rev-cont">
<p id="title">Review:</p>
<p id="content">
When I was watching "Dear Zindagi",
I could relate Sharukh Khan to Arnav Bhaiya. The way Sharukh
Khan was giving life lessons to Alia
Bhatt, in the same way Arnav Bhaiya will give coding life

49
 lessons which will guide you
throughout your code life...
</p>
</div>
</div>
<div class="rev-card">
<div class="identity">
<img src="#">
<p>Tanisha Singh</p>
<h6>NIMCET</h6>
<div class="rating"><img
src="images/icon/star.png"><img src="images/icon/star.png"><img
src="images/icon/star.png"><img src="images/icon/star.png"><img
src="images/icon/star.png">
</div>
</div>
<div class="rev-cont">
<p id="title">Review:</p>
<p id="content">
LearnEd was an amazing experience
for me. I belong to electronics department and had a little
experience in coding but I think it has
helped me think things through in a much more analytical
manner. Coding is important no
matter which branch you are in. It gives you a better
understanding about how to approach
a problem...
</p>

50
 </div>
</div>
<div class="rev-card">
<div class="identity">
<img src="#">
<p>Ambika Budhiraj</p>
<h6>Python</h6>
<div class="rating"><img
src="images/icon/star.png"><img src="images/icon/star.png"><img
src="images/icon/star.png"><img src="images/icon/star.png"><img
src="images/icon/star.png">
</div>
</div>
<div class="rev-cont">
<p id="title">Review:</p>
<p id="content">
This was my first complete course at
coding blocks. I attended the Python course in Winter 2020
and loved it which made me join the
full course. Shubham bhaiya and Ayush Bhaiya(TA) have good
knowledge about the field and were
very helpful in making us understand the concepts. I would
certainly recommend this to anyone...
</p>
</div>
</div>
</div>

51
 </div>

<!-- Sliding Information -->

<marquee style="background: linear-gradient(to right, #FA4B37,
#DF2771); margin-top: 50px;" direction="left" onmouseover="this.stop()"
onmouseout="this.start()" scrollamount="20">
<div class="marqu">“Education is the passport to the future,
for tomorrow belongs to those who prepare for it
today.” “Your attitude, not your aptitude, will determine
your altitude.” “If you think education is
expensive, try ignorance.” “The only person who is
educated is the one who has learned how to learn …and
change.”</div>
</marquee>

<!-- feedback section -->

<div class="diffSection" id="feedback_section">
<center>
<p style="font-size: 50px; padding:
100px">Feedback</p>
</center>
<div class="csec"></div>
<div class="back-contact">
<div class="cc">
<form action="mailto:[email protected]"
method="post" enctype="text/plain">

52
 <label>First Name <span
class="imp">*</span></label><label style="margin-left: 185px">Last
Name
<span
class="imp">*</span></label><br>
<center>
<input type="text" name=""
style="margin-right: 10px; width: 175px" required="required"><input
type="text" name="lname" style="width: 175px" required="required"><br>
</center>
<label>Email <span
class="imp">*</span></label><br>
<input type="email" name="mail"
style="width: 100%" required="required"><br>
<label>Message <span
class="imp">*</span></label><br>
<input type="text" name="message"
style="width: 100%" required="required"><br>
<label>Additional Details</label><br>
<textarea
name="addtional"></textarea><br>
<button type="submit" id="csubmit">Send
Message</button>
</form>
</div>
</div>
</div>
<!-- FOOTER -->
<footer>

53
 <div class="footer-container">
<div class="left-col">
<img src="images/icon/imasianlogo.png"
style="width: 200px;">
<div class="logo"></div>
<div class="social-media">
<a href="#"><img
src="images/icon\fb.png"></a>
<a href="#"><img
src="images/icon\insta.png"></a>
<a href="#"><img
src="images/icon\tt.png"></a>
<a href="#"><img
src="images/icon\ytube.png"></a>
<a href="#"><img
src="images/icon\linkedin.png"></a>
</div><br><br>
<p class="rights-text">Copyright © 2024 Created
By Shubham Srivastwa ,Yash Tyagi All Rights Reserved.
</p>
<br>
<p><img src="images/icon/location.png">
Institute of Management Studies <br>Ghaziabad, Uttar Pradesh</p>
<br>
<p><img src="images/icon/phone.png"> +91-
1234-567-890<br><img src="images/icon/mail.png">&nbsp;
[email protected]</p>
</div>

54
 <div class="right-col">
<h1 style="color: #fff">Our Newsletter</h1>
<div class="border"></div><br>
<p>Enter Your Email to get our News and
updates.</p>
<form class="newsletter-form">
<input class="txtb" type="email"
placeholder="Enter Your Email">
<input class="btn" type="submit"
value="Submit">
</form>
</div>
</div>
</footer>
</body>
</html>

3 .Login page

<?php
session_start();
$msg = "";
if (isset($_POST['login'])) {
$username = $_POST['email'];
$password = md5($_POST['password']);
include './dbname.php';

55
 $con = mysqli_connect(HOSTNAME, USERNAME, "", DBNAME);
$qry = "select * from imsian where email= '$username' and Password
='$password'";
$resultset = mysqli_query($con, $qry);
if (mysqli_num_rows($resultset) > 0) {
$row = mysqli_fetch_array($resultset);
$_SESSION['uname'] = $row[0];
$_SESSION['userid'] = $row[1];
header("location:index2.php");
} else {
$msg = "Invalid username and password !!!!!!";
}
}
?>

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Login</title>
<link rel="shortcut icon" type="png" href="images/icon/icons8-creative-
64.png">

56
 <link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.cs
s">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
</script>
<link rel="stylesheet" href="css/style.css">
</head>
<style>
.container {
width: 400px;
height: 500px;
border: 2px solid black;
margin: 200px auto;
background-color:azure;
padding-top: 20px;
border-radius: 40px;
padding-left: 40px;
}

body {
background-image: url(images/extra/28480371_7402279.svg);
background-repeat: no-repeat;
background-size: cover;

57
 overflow-y: hidden;
}

.reg-btn {
margin-left: 20px;
}

#temp {
margin-left: 45px;
margin-top: 20px;
}

#exampleInputEmail1 {
margin-top: 20px;

.tannu {
width: 300px;
background-color:yellow;
border: solid black 2px;
}

#regi,
#logi {

58
 background-color: blueviolet;
}

#regi:hover {
background-color: cadetblue;
}

#logi:hover {
background-color: cadetblue;

#regi:active {
background-color: darksalmon;
}

#logi:active {
background-color: darksalmon;
}
</style>

<body><br>
<div class="container">
<form method="post">
<h2>Log in</h2>

59
 <div class="form-group">

<input type="email" name="email" class="form-control tannu"

id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" name="password" class="form-control
tannu" id="exampleInputPassword1" placeholder="Password">
</div><br>
<button type="submit" name="login" class="btn btn-primary"
id="logi">Login</button>
<span class="reg-btn"><a href="signup.php"><input type="button"
class="btn btn-primary btn-right" value="Register"
id="regi"></a></span><br>
<div class="logimage">
<img src="images/icon/books-stack-three_29302.png" alt=""
width="210px" height="210px" id="temp">
</div>
<p><?php echo "<center><font color='green'>" . $msg .
"</font></center>" ?></p>

</form>
</div>
</body>

</html>

60
 4. Log out
<?php
session_start();
session_destroy();
header("location:login.php");
?>
5. CSS
@import
url('https://fonts.googleapis.com/css?family=Montserrat:500&display=swap'
);
@import
url('https://fonts.googleapis.com/css?family=Dancing+Script&display=swap
');
@import
url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
scroll-behavior: smooth;
61
}
body {
background:white;
font-family: 'Open Sans', sans-serif;
}

header {
height: 90vh;
}
.black {
box-shadow: 0 2px 10px rgba(192, 205, 12, 0.737);
}
nav {
padding-top: 20px;
padding-bottom: 20px;
top: 0;
position: fixed;
display: flex;
width: 100%;
z-index: 1000;
background:rgba(252, 252, 250, 0.747);
justify-content: space-around;
transition: 1.5s;
align-items: center;
height: 90px;

62
 border-bottom: solid rgba(0, 0, 0, 0.171) 2px;
}
.logt{
margin-left: 100px;
}
nav ul {
display: flex;
align-items: center;
}
nav ul li {
list-style: none;
margin: 5px 10px;
}
nav ul li a {
padding: 2px 10px;
color: #2e2e2e;
cursor: pointer;
transition: .5s;
text-decoration: none;
}
nav ul li a:hover {
color: #fff;
border-radius: 5px;
background: #DF2771;
}

63
.active {
color: #fff;
border-radius: 5px;
background: #DF2771;
}
.srch {
padding: 2px 10px;
display: flex;
/* align-items: center; */
justify-content: center;
/* background: #0066ff; */
border: 1px solid;
.get-started {
margin-left: 50px;
padding: 5px 20px;
border: 2px solid #DF2771;
border-radius: 20px;
text-decoration: none;

transition: .5s;
background-color: #DF2771;
color: #fff;
}
.get-started:hover {
color: #2e2e2e;

64
 background: #fff;
}
.logo img{
width: 120px;
cursor: pointer;
transition: all 1s;
}

a, button {
float: left;
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 15px;
color: #2E3D49;
display: block;
text-decoration: none;
text-align: center;
}
.head-container {
margin-top: 245px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}

65
.quote {
width: 600px;
transform: translateY(-50px);
}
.quote h5 {
margin-top: 20px;
color: #0009;
line-height: 20px;
}
.quote p {
font-size: 50px;
color: #2e2e2e;
}
.quote .play {
margin-top: 20px;
display: flex;
/* justify-content: center; */
align-items: center;
}
.quote .play img {
width: 45px;
cursor: pointer;
filter: drop-shadow(0 0 10px #0002);
}
.quote .play span a{

66
 margin-left: 10px;
font-size: 20px;
font-weight: 900;
color: rgba(0, 0, 0, 0.8);
cursor: pointer;
}
.svg-image img{
width: 700px;
filter: drop-shadow(0 20px 10px rgba(0,0,0,0.2));
}

/* SIDE MENU */
.menu {
cursor: pointer;
width: 25px;
display: none;
}
.side-menu {
width: 100%;
height: 100%;
background: rgba(182, 33, 90, 0.993);
position: absolute;
top: 0;
transition: .8s;
z-index: 2000;

67
 transform: translateX(-100%);
}
.side-menu ul {
margin-top: 35%;
display: flex;
flex-direction: column;
justify-content: center;
/* background: #FA4B37; */
}
.side-menu ul li {
list-style: none;
/* background: #009900; */
display: flex;
justify-content: center;
align-items: center;
/* border-bottom: 1px solid #fff; */
/* padding: 10px 0px; */
}
.side-menu ul li:hover a{
background: #fff;
color: #DF2771;
}
.side-menu ul li a{
color: #FFF;
width: 100%;

68
 font-size: 1em;
/* background: #2E3D49; */
text-decoration: none;
padding: 15px 0px;
}
.close img{
float: right;
width: 35px;
cursor: pointer;
margin: 10px;
}
.user {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10%;
}
.user img {
width: 60px;
border-radius: 50%;
border: 2px solid #fff;
filter: drop-shadow(0 10px 20px #0004);
margin-right: 30px;
cursor: pointer;
}

69
.user p {
color: #fff;
cursor: pointer;
}
.user img, .user p {
opacity: 1;
}
/*Common things in all sections*/
#about_section, #portfolio_section, #team_section, #services_section,
#contactus_section {
font-family: 'Open Sans', sans-serif;
color: #2E3D49;
position: relative;
}
.diffSection {
width: 100%;
justify-content: center;
align-items: center;
}
.diffSection .content {
margin: 10px;
text-align: center;
padding: 10px 100px;
font-size: 1.1em;
}

70
/*PORTFOLIO*/
.extra {
width: 100%;
}
.extra p {
padding: 30px;
padding-bottom: 150px;
font-size: 50px;
text-align: center;
color:#E5E8EF;
background-image: linear-
gradient(rgba(0,0,0,0),rgba(0,0,0,0.7)),url("images/extra/IMS\
PHOTO.png");
background-size: cover;
background-attachment: fixed;
font-family: cursive;
z-index: -9;
}

/*POPULAR SUBJECTS*/

.cbox {
position: relative;
width: 100%;

71
 display: inline-flex;
flex-wrap: wrap;
justify-content: center;
}
.cbox .det {
width: 250px;
height: 80px;
margin: 10px;
background: #fff;
cursor: pointer;
}
.cbox .det a{
justify-content: space-around;
width: 250px;
padding: 28px;
border-radius: 10px;
border: 1px solid #FA4B37;
font-size: 15px;
color: #272529;
font-family: cursive;
text-decoration: none;
}
.cbox .det a:hover {
background: linear-gradient(to right, #FA4B37, #DF2771);
color: white;

72
}
.cbox .det a:hover img{
filter: brightness(100);
}
.cbox img {
width: 20px;
margin-right: 20px;
}

/*TEAM SECTION*/
.totalcard {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-bottom: 50px;
}
.totalcard .card {
margin: 50px;
width: 300px;
border-radius: 10px;
background: #fff;
}
.totalcard .card{

73
 box-shadow: inset 0 0 10px rgba(0,0,0,0.4),
0 0 10px rgba(0,0,0,0.3);
}
.card:nth-child(1){
border-top: 5px solid green;
}
.card:nth-child(2){
border-top: 5px solid blue;
}
.card:nth-child(1):hover {
box-shadow: inset 0px 0px 10px rgba(0,255,0,0.5),
1px 1px 30px rgba(0,255,0,0.5);
}
.card:nth-child(2):hover {
box-shadow: inset 0px 0px 10px rgba(0,0,255,0.5),
1px 1px 30px rgba(0,0,255,0.5);
}
.totalcard .card img {
width: 100px;
height: 100px;
margin-top: 5px;
cursor: pointer;
border-radius: 50px;
transition-duration: .8s;
}

74
.totalcard .card img:hover {
transform: scale(3.5);
border-radius: 0;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
#detail p{
font-size: 15px;
line-height: 25px;
font-variant: small-caps;
text-align: center;
margin: 25px;
margin-bottom: 0px;
margin-top: 0px;
}
#detail button {
outline: none;
border-radius: 10px;
border-style: none;
border: 1px solid black;
padding: 9px 25px;
cursor: pointer;
transition-duration: .4s;
}
#detail a {
bottom: 80px;

75
 text-decoration: none;
margin-left: 90px;
align-self: center;
}
.btn-roshan:hover {
background: rgba(0,255,0,0.7);
color: #fff;
}
.btn-roshan2:hover {
background: rgba(0,0,255,0.5);
color: #fff;
}
.card-title {
font-size: 17px;
color: #343A40;
padding: 20px;
font-weight: 700;
}

/*Service Section*/
/*Service Section*/
.service-swipe {
display: flex;
flex-wrap: wrap;
justify-content: center;

76
 align-items: center;
background-image: linear-
gradient(rgba(0,0,0,0),rgba(0,0,0,0.7)),url("images/extra/IMS\
PHOTO.png");
background-size: cover;
background-attachment: fixed;
}
.service-swipe .s-card img {
width: 100px;
}
.service-swipe a {
padding: 0;
margin: 40px 10px;
}
.service-swipe .s-card {
display: flex;
justify-content: space-around;
padding: 10px;
}
.service-swipe .s-card p {
color: #f2f2f2;
font-size: 1.2em;
font-family: 'Open Sans',sans-serif;
}
.service-swipe .s-card:hover {

77
 box-shadow: 0 0 50px rgba(255,255,255,0.8);
transform: translateY(-10px);
}

/*Feedback Section*/
#feedback_section{
background-color:#0f66be88;
}
.csec {
background-attachment: fixed;
position: absolute;
width: 100%;
height: 250px;

}
.back-contact {
margin-top: 0px;
transform: translateY(-50px);
display: flex;
align-items: center;
justify-content: space-around;
}
.cc {
height: 400px;
width: 400px;

78
}
.cc form {
margin: 5%;
margin-top: 40px;
width: 90%;
height: 90%;
}
.cc form label {
position: absolute;
color: #2E3D49;
font-size: 10px;
font-weight: 800;
}
.cc form input {
padding: 15px;
margin-bottom: 10px;
border-radius: 5px;
box-shadow: inset 0 0 5px lightgray;
border: 1px solid rgba(0,0,0,0.2);
outline: none;
color: #2E3D49;
font-weight: 600;
}
.imp {
color: red;

79
}
form textarea {
width: 100%;
height: 100px;
box-shadow: inset 0 0 5px lightgray;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 5px;
outline: none;
color: #2E3D49;
font-weight: 600;
padding: 15px;
}
#csubmit {
margin-top: 20px;
background: linear-gradient(to right, #FA4B37, #DF2771);
border-radius: 5px;

/*REVIEW SECTION*/
#makeitfull {
display: flex;
justify-content: center;
transform: translateY(35px);
}

80
#makeitfull img {
width: 50px;
}
.review {
background: #F8F8F8;
width: 100%;
}
.rev-container {
padding: 10px 10%;
display: flex;
flex-wrap: wrap;

/*PROPERTIES FOR MAKING WEBSITE RESPONSIVE*/

@media screen and (max-width: 960px) {
.footer-container {
max-width: 600px;
}

}
.menu {
display: block;
}
nav {
padding-bottom: 20px;
border-bottom: 1px solid #0005;

81
 /* position: fixed; */
/* top: 0; */
}
.quote p, .quote h5, .play {
justify-content: center;
text-align: center;
}
.quote p {
font-size: 30px;
}
.service-container .right-side img {
width: 90%;
}
.title {
margin-top: 0px;
}

}
@media screen and (max-width: 700px) {
footer .btn{
margin: 0;
width: 100%;
margin-top: 20px;
}
.svg-image img {

82
 width: 90%;
margin: 20px;
/* align-self: center; */
}
}

@media screen and (max-width: 1000px) {

.feedbox form input, .feedbox form .fname{
width: 100%;
}

6. Javascript

function scrollAppear() {
var introText = document.querySelector('.side-text');
var sideImage = document.querySelector('.sideImage');
var introPosition = introText.getBoundingClientRect().top;
var imagePosition = sideImage.getBoundingClientRect().top;

var screenPosition = window.innerHeight / 1.2;

if(introPosition < screenPosition) {

introText.classList.add('side-text-appear');
}
if(imagePosition < screenPosition) {

83
 sideImage.classList.add('sideImage-appear');
}
}

window.addEventListener('scroll', scrollAppear);

// For switching between navigation menus in mobile mode

var i = 2;
function switchTAB() {
var x = document.getElementById("list-switch");
if(i%2 == 0) {
document.getElementById("list-switch").style= "display: grid;
height: 50vh; margin-left: 5%;";
document.getElementById("search-switch").style= "display:
block; margin-left: 5%;";
}else {
document.getElementById("list-switch").style= "display:
none;";
document.getElementById("search-switch").style= "display:
none;";
}
i++;
}

// For LOGIN
var x = document.getElementById("login");

84
var y = document.getElementById("register");
var z = document.getElementById("btn");
var a = document.getElementById("log");
var b = document.getElementById("reg");
var w = document.getElementById("other");

function register() {
x.style.left = "-400px";
y.style.left = "50px";
z.style.left = "110px";
w.style.visibility = "hidden";
b.style.color = "#fff";
a.style.color = "#000";
}

function login() {
x.style.left = "50px";
y.style.left = "450px";
z.style.left = "0px";
w.style.visibility = "visible";
a.style.color = "#fff";
b.style.color = "#000";
}

// CheckBox Function

85
function goFurther(){
if (document.getElementById("chkAgree").checked == true) {
document.getElementById('btnSubmit').style = 'background: linear-
gradient(to right, #FA4B37, #DF2771);';
}
else{
document.getElementById('btnSubmit').style = 'background: lightgray;';
}
}

function google() {

window.location.assign("https://accounts.google.com/signin/v2/identi
fier?service=accountsettings&continue=https%3A%2F%2Fptop.only.wip.la%3A443%2Fhttps%2Fmyaccount.goog
le.com%2F%3Futm_source%3Dsign_in_no_continue&csig=AF-
SEnbZHbi77CbAiuHE%3A1585466693&flowName=GlifWebSignIn&flow
Entry=AddSession", "_blank");
}

// QUIZ Page
function quizt(frame) {
document.getElementById('f1').style='display: none;';
document.getElementById('f2').style='display: none;';
document.getElementById('f3').style='display: none;';
document.getElementById('f4').style='display: none;';
document.getElementById('f5').style='display: none;';
document.getElementById('f6').style='display: none;';

86
 document.getElementById('f7').style='display: none;';
document.getElementById('f8').style='display: none;';
document.getElementById('f9').style='display: none;';
document.getElementById('f10').style='display: none;';
document.getElementById('f11').style='display: none;';
if(frame == 1) document.getElementById('f1').style = 'display: block';
else if(frame == 2) document.getElementById('f2').style = 'display: block';
else if(frame == 3) document.getElementById('f3').style = 'display: block';
else if(frame == 4) document.getElementById('f4').style = 'display: block';
else if(frame == 5) document.getElementById('f5').style = 'display: block';
else if(frame == 6) document.getElementById('f6').style = 'display: block';
else if(frame == 7) document.getElementById('f7').style = 'display: block';
else if(frame == 8) document.getElementById('f8').style = 'display: block';
else if(frame == 9) document.getElementById('f9').style = 'display: block';
else if(frame == 10) document.getElementById('f10').style = 'display:
block';
else if(frame == 11) document.getElementById('f11').style = 'display:
block';
else alert('error');
}

function startquiz() {
document.getElementById('title').style = 'display: none;';

document.getElementById('panel').style = 'display: inline-flex;';

87
 document.getElementById('left').style = 'display: block;';
document.getElementById('right').style = 'display: block;';
}
function searchdisplay() {
document.getElementById('searchpanel').style.display="block";
}

function display(n) {
var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
var img3 = document.getElementById('img3');
var img4 = document.getElementById('img4');
var s1 = document.getElementById('s1');
var s2 = document.getElementById('s2');
var s3 = document.getElementById('s3');
var s4 = document.getElementById('s4');

img1.style = 'display: none;';

img2.style = 'display: none;';
img3.style = 'display: none;';
img4.style = 'display: none;';
s1.style = 'background: #DF2771; color: #FFF;';
s2.style = 'background: #DF2771; color: #FFF;';
s3.style = 'background: #DF2771; color: #FFF;';
s4.style = 'background: #DF2771; color: #FFF;';

88
 if(n==1) {
img1.style = 'display: block;';
s1.style = 'background: #E5E8EF; color: #DF2771;';
}
if(n==2) {
img2.style = 'display: block;';
s2.style = 'background: #E5E8EF; color: #DF2771;';
}
if(n==3) {
img3.style = 'display: block;';
s3.style = 'background: #E5E8EF; color: #DF2771;';
}
if(n==4) {
img4.style = 'display: block;';
s4.style = 'background: #E5E8EF; color: #DF2771;';
}
}

function sideMenu(side) {
var menu = document.getElementById('side-menu');
if(side==0) {
menu.style = 'transform: translateX(0vh); position:fixed;';
}

89
 else {
menu.style = 'transform: translateX(-100%);';
}
side++;
}

TESTING

Testing:-
Software testing is the process of executing a program or system with the
intent of finding errors or it involves any activity aimed at evaluating an
attribute or capability of a program or system and determining that it meets
its required results.

Software testing is a process used to identify the correctness, completeness

and quality of developed computer software.

Testing Framework:-
To begin with, let us look at the traditional Software Development life cycle.
The figure below depicts the same.

90
In the above diagram (Fig A), the testing phase comes after the coding is
complete and before the product is launched and goes into maintenance. But,
the recommended test Process involves testing in every phase of the life
cycle (Fig B). During the requirements Phase, the emphasis is upon
validation to determine the defined requirements meet the needs of the
organization. During the design and program phase, the emphasis is on the
organization. . During the design and program phase, the emphasis is on
verification to ensure that the design and programs accomplish the defined
requirements. During the test and installation phase, the emphasis in on
inspection to determine that the implemented system meets the system
specification. During the maintenance phase, the system will be retested to
determine that the changes work and that the unchanged portion continues to
work.

91
 TESTING TECHNIQUES
In the project we have used the following testing techniques:-

1) Unit Testing:-
Goal of unit testing is to uncover defects using formal techniques like
Boundary Value Analysis (BVA), Equivalence Partitioning, and error
Guessing. Defects and derivations in data formats, Special requirement in
input conditions (For example Text box where only numeric or alphabets
should be entered), selection based on combo Box’s, List Box’s, Option
button, Check Box’s would be identified during the Unit testing Phase.
Following validation checks are performed during the unit testing.

a) Validation for Numeric Entries: -This Validation checks whether an

entry in the text box in numeric or not. If not, a suitable message is
flashed to user.

b) Validation for Mandatory Entries: - This Validation checks whether

mandatory entries are filled or not. If not, a suitable message is
flashed touser.

c) Validation for Unauthorized Entries: -This Validation checks for

validityof user for making entries or modification. If user is not
authorized than such a user is prevented from executing the software.

92
2) Integration Testing:-

Integration Testing is a systematic technique for constructing the program

structure while at same time conducting tests to uncover errors associated
with interfacing. The objective is to take unit tested components and build a
program structure that has been dictated by design.

In these testing forms means for relevant schemes that have already been
tested during the Unit testing are integrated into one module namely online
monitoring of land reforms schemes, this system is then tested thoroughly
for the errors.

3) System Testing:-

The system was tested with the test data and it was put to its limits so that
various exceptions and errors could be detected. It was tested for these
exceptions

 Validation checks for numeric entries, for data type data, and for blank
text entries are working properly or not. So that wrong data is not
added to database.

 Data addition, modification and deletion should result in change of

values in to the database.

93
 ADVANTAGES

1. Cross-Platform Compatibility.

2. Ease of Learning and Use.

3. Rich User Interface.

4. Fast Rendering and Performance.

5. Cost-Effectiveness.

6. Integration with Backend Technologies.

LIMITATIONS

Security Vulnerabilities: PHP-based applications are susceptible to

security vulnerabilities such as SQL injection, cross-site scripting
(XSS), and session hijacking if not properly secured. Ensuring robust
securities measures, such as input validation, parameterized queries,
and secure session management, is crucial to mitigate these risks.

Learning Curve: Developing proficiency in HTML, CSS, JavaScript,

PHP, and SQL requires time and effort, especially for novice
developers. Limited expertise or experience in these technologies may
impact the project's development timeline and quality of
implementation.

Addressing these limitations through proactive measures, such as

adopting scalable technologies, implementing robust security
practices, and staying abreast of best practices and industry standards,
is essential to ensure the long-term success and sustainability of the
project

94
 FUTURE SCOPE OF THE PROJECT

Expansion into AI-driven Personalization: Utilize machine

learning to tailor content, adaptive assessments, and study paths,
optimizing learning outcomes through personalized
recommendations.
Diverse Course Offerings: Collaborate with institutions to
broaden subjects beyond BCA and data structures, offering
resources for diverse disciplines.
Scalability Improvements: Implement cloud-based infrastructure,
caching mechanisms, and database optimizations to ensure
responsiveness and reliability under increased user demand.
Ongoing Innovation for Enhanced Learning Experiences:
Continuously incorporate user feedback, emerging technologies,
and educational trends to enhance interactivity, engagement, and
effectiveness of the platform.
Mobile Accessibility: Develop mobile applications or optimize the
platform for mobile devices, enabling convenient access to
learning resources anytime, anywhere.

95
 CONCLUSION

In conclusion, the e-learning platform represents a significant step towards

providing accessible, comprehensive, and personalized learning experiences
for students preparing for BCA entrance exams, mastering data structures,
and pursuing courses at IMS College. By leveraging HTML, CSS,
JavaScript, PHP, and SQL, the platform offers a robust solution with
interactive resources, personalized learning paths, and community
engagement features. While the project has addressed key challenges in
exam preparation and skill development, its future success lies in embracing
emerging technologies, expanding course offerings, enhancing accessibility,
and fostering continuous innovation. Through ongoing collaboration with
stakeholders and a commitment to excellence, the platform endeavors to
empower learners worldwide and contribute to their academic and
professional success.

96
 REFERENCES

1) W3Schools (https://www.w3schools.com/ )
2) PHP Manual (https://www.php.net/manual/en/index.php )
3) Mozilla Developer Network (MDN) Web Docs
(https://developer.mozilla.org/ )
4) SQLCourse (https://www.sqlcourse.com/ )
5) Stack Overflow (https://stackoverflow.com/ )

Books:

 "Learning PHP, MySQL & JavaScript" by Robin Nixon

 "HTML and CSS: Design and Build Websites" by Jon Duckett
 "JavaScript: The Good Parts" by Douglas Crockford

97