ONLINE QUIZ TEST-3
ONLINE QUIZ TEST-3
ONLINE QUIZ TEST-3
MAJOR PROJECT
ON
ONLINE QUIZ TEST
This is submitted in partial fulfillment of the requirement for the degree
of
MASTER IN COMPUTER APPLICATION
by
Name: STITI ROUT
Regd. No.: 2105274109
Page no.
1. Introduction
Introduction.................................................................7
Objective of the Project...............................................8
2. System Study
Existing System…………………………………...…10
Proposed System………………………………….…10
5. System Design
Design Consideration………………………………14
Data Flow Diagram(DFD).…………………………16
Entity Relationship(ER) Diagram……...…….……..19
Class Diagram……………………………………....20
Sequence Diagram……………………………..……21
6. Implementation
HTML……………………………………………….23
CSS………………….……………………………....24
Java Script…………………………………………...25
PHP………………………………………………….26
My SQL …………….………………………………27
7. Module Specification………………………………………27
9. Source Code……………………………………………….37
10. Snapshots……………………………………………….….37
11. Conclusion………………………………………………....47
INTRODUCTION
At the current stage, with the corona virus pandemic going around, more and more students prefers to
study on the online learning management systems. So the main objective of the platform is to provide
various types of resources to different kinds of students/teachers /working person over the globe who
can need offend physical classes. The courses are free for all users.
E-Learning is a learning process with the combination of content that is both delivered digitally
and through face-to-face learning. eLearning contributes to the shifts from traditional face-to-face
learning to the use of web technological tools which enhances collaborative learning and presents
an entirely new learning platform for students. eLearning has also been the principal form of
distance education but now, it is also changing the instructions on higher education as it is now
becoming a global agent in higher education. Advancements in technology learning have
contributed to the enhancements of generations of face-to-face learning and generations of
distance education. As to it, when E-Learning develops, it has begun to use different approaches
to address diverse goals.
A flexible web-based learning experience allows you to go through a guided curriculum or choose
lessons on an as-needed basis. Following are the main objectives:-
Ability to recall previously learned material – Students/learners can watch video courses as
many times as they need. If they forgot something during the course they can come back and
watch that specific part anytime.
Free Cost – As nobody needs to travel or pay anything as it’s cost is free.
Learn anytime from anywhere – Students/Learners can start learning anytime from anywhere
they just required internet connection with a compatible device.
Improve course quality according to learner’s feedback – Tutor can improve their course as per
student’s feedback. It will help tutor to improve their ability to teach.
System Study
Traditional System:
Existing system is a manual one in which users are maintaining books to store the
information like Student Details, Instructor Details, Schedule Details and feedbacks
about students who attend classes as per schedule. It is very difficult to maintain
historical data.
Disadvantages:
The following drawbacks of existing system emphasize the need for computerization:
It may help collecting perfect management in details. In a very short time, the
collection will be obvious, simple and sensible. It will help a person to know the
management of passed year perfectly and vividly. It also helps in current all works
relative to E-learning Management System. It will be also reduced the cost of
collecting the management & collection procedure will go on smoothly.
Functional Requirements:
1. Admin
2. Student
1. Admin Module: The administrator is the super user of this application. Only
admin have access into this admin page. Admin has all the information about all
the users (student) and about all course, videos, questions and exams.
Non-functional requirements are those requirements that don’t define the actual
working of the system. Non-functional requirements are used to judge the quality of
the system. Nonfunctional requirements cover all the remaining requirements which
are not covered by the functional requirements. They specify criteria that judge the
operation of a system, rather than specific behaviors.
1. Usability: Usability is a quality attribute used to access how easy the interface is to
use. Usability is ease of use. It tells how user friendly the interface is. It includes
memorability, learn ability, and satisfaction. Our software interface has all the above
quality. Any kind of user can easily understand the interface.
2. Integrity: Integrity means doing the right thing in a reliable way. Data integrity is a
fundamental component of security. In its broadcast use, “Data Integrity” refers to
the accuracy and consistency of data stored in a database, data mart or another
construct. Data integrity is the overall completeness, accuracy and consistency of
data.
3. Security: Security is how much the system is secured in different platforms. Only
Admin can create a specific password for different user which is used for candidate
for login. For appearing an examination, lecture can create specific token for each
student. Then tokens are used by the student to access the examination.
Technology: PHP
Database: MySQL
Hardware Requirements:
RAM: 4 GB
System Design
Design Consideration:
Phases of Iterative waterfall model:
Requirement gathering and analysis: All possible requirements of the system to be
developed are captured in this phase and documented in a requirement specification
doc .
System design: The requirement specifications from first phase are studied in this
phase and system design is prepared. System Design helps in specifying hardware and
system requirements and also helps in defining overall system architecture.
Implementation: With inputs from system design, the system is first developed in
small programs called units, which are integrated in the next phase. Each unit is
developed and tested for its functionality which is referred to as Unit Testing.
Integration and testing: All the units developed in the implementation phase are
integrated into a system after testing of each unit. Post integration the entire system is
tested for any faults and failures.
Deployment of system: Once the functional and non-functional testing is done, the
product is deployed in the customer environment or released into the market.
Maintenance: There are some issues which come up in the client environment. To fix
those issues patches are released. Also, to enhance the product some better versions are
released. Maintenance is done to deliver these changes in the customer environment.
All these phases are cascaded to each other in which progress is seen as flowing steadily
downwards (like a waterfall) through the phases. The next phase is started only after the
defined set of goals are achieved for previous phase and it is signed off, so the name
"Waterfall Model". In this model phases do not overlap.
Reason for choosing Iterative Waterfall model:
The iterative waterfall model allows for departmentalization and control. A schedule
can be set with deadlines for each stage of development and a product can proceed
through the development process model phases one by one.
Development moves from concept, through design, implementation, testing, and end
up at operation and maintenance. Each phase of development proceeds in strict order.
Some other reasons for choosing the model are:
Requirements are very well documented, clear and fixed.
Product definition is stable.
Technology is understood and is not dynamic.
There are no ambiguous requirements.
Ample resources with required expertise are available to support the product.
Data Flow Diagram:
Data flow diagram depicts the way data is processed by a system, the inputs and outputs with
a special focus on the information flow and storage.
Level – 0 DFD:
Level - 0 DFD is also known as context diagram. Its shows an abstract view of main
processes included in E-LEARNING WEBSITE.
Log in
Add Courses
Admin
Videos
Log out
E-Learning
Management
System
Log in
Level 1 DFD enumerates all of the major sub processes that comprise the entire system. It
also identifies the data store of the student record, which contains all of the student’s data,
which contains several master data used throughout the system, such as class data, videos
data, question data etc.
User Record
R/W
New Subjects
and Topics
Skill Test
Watch Lectures
R/W
Learning
programming
Tutorials Pre Defined Data
Master data Exercise
Watch lectures
& videos
Master data
R/W
Add Videos
Question Add/Update & Entry
Delete Course
Courses
Entry
R/W
Master data
Admin
Student Manage
The Class diagram for E-LEARNING WEBSITE (E-Learning Management System) shows the
structures of information or data that will be handled in the system. These data or information will
be represented by classes.The arrows on them represents their relationships in each other.
Login
Class
- id: int
- username: string
- Course
password: string
Qus_id
+ add()
+ update()
Video Option-1
Option-2
Questions
User Skill Test Admin
Option-3
+ verify() Stores
+ add_user()
+ viewfile() + delete_user()
+ upload_file()
+ delete_file()
Topic File
[ Class diagram ]
Sequence Diagram:
The designed sequence diagram illustrates the series of events that occurs in E-LEARNING
WEBSITE (E-Learning Management System). In this illustration, the actors are represented by a
stick man and the classes are represented by objects. It will give you clear explanation about the
behavior of an E-Learning Management System in terms of processing the flow of instructions.
This designed sequence diagram is able to show programmers and readers about the sequence of
messages between the actor and the objects.
[ Sequence Diagram ]
IMPLEMENTATION
There should have a clear purpose or goal in the mind before choosing a programming language
for a project. The choice of language heavily depends on the type of application. What kind of
application is going to build? Is it a web application or mobile application or its embedded
firmware etc.? This is the first and one of the biggest factors one should consider before choose
any programming language for a project.
Overview of Technologies used:
HTML provides the basic structure of sites, which is enhanced and modified by other
technologies like CSS and JavaScript.
CSS is used to control presentation , formatting and layout.
JavaScript is used to control the behavior of different elements.
HTML:
Hypertext Markup Language (HTML) is the standard markup language for creating web pages
and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of
cornerstone technologies for the World Wide Web. Web browsers receive HTML documents
from a web server or from local storage and render the documents into multimedia web pages.
HTML describes the structure of a web page semantically and originally included cues for the
appearance of the document. HTML elements are the building blocks of HTML pages. With
HTML constructs, images and other objects such as interactive forms may be embedded into the
rendered page. HTML provides a means to create structured documents by denoting structural
semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML
elements are delineated by tags, written using angle brackets. Tags such as <img/> and <input/>
introduce content into the page. Other tags such as <p>…</p> surround and provide information
about document text and may include other tags as sub-elements. Browsers do not display the
HTML tags, but use them to interpret the content of the page.
HTML can embed programs written in a scripting language such as JavaScript which affects the
behaviour and content of web pages. Inclusion of CSS defines the look and layout of content.
The World Wide Web Consortium (W3C), maintainer of both the HTML and the CSS standards,
has encouraged the use of CSS over explicit presentational HTML since 1997.
CSS :
CSS Stands for "Cascading Style Sheet." Cascading style sheets are used to format the layout
of Web pages. They can be used to define text styles, table sizes, and other aspects of Web
pages that previously could only be defined in a page's HTML. CSS helps Web developers
create a uniform look across several pages of a Web site. Instead of defining the style of each
table and each block of text within a page's HTML, commonly used styles need to be defined
only once in a CSS document. Once the style is defined in cascading style sheet, it can be used
by any page that references the CSS file. Plus, CSS makes it easy to change styles across
several pages at once. For example, a Web developer may want to increase the default text size
from 10pt to 12pt for fifty pages of a Web site. If the pages all reference the same style sheet,
the text size only needs to be changed on the style sheet and all the pages will show the larger
text. While CSS is great for creating text styles, it is helpful for formatting other aspects of
Web page layout as well. For example, CSS can be used to define the cell padding of table
cells, the style, thickness, and color of a table's border, and the padding around images or other
objects. CSS gives Web developers more exact control over how Web pages will look than
HTML does. This is why most Web pages today incorporate cascading style sheets.
JavaScript:
What is Apache?
The Apache web server, more popular as simply Apache, represents an open-source web server
platform lying in the basis of most of the websites we see today on the World Wide Web.
Looking back at the time when it was introduced in mid 90's and gradually adopted as a
preferred server platform on the web, we could state that Apache acted as the main driving
force behind today's web expansion. As a web server 'pioneer', Apache has turned into a
standard for the development of other successful web server platforms. The Apache web server
is a work of the Apache Software Foundation open source community. Namely the fact that it
is backed up by the efforts of many supporters worldwide keeps it so well maintained and
regularly updated with new useful features and functionalities up to the latest quality and
security requirements in HTTP service delivery. Where does that strange name of the popular
server come from? There are two intriguing and radically different stories behind its origin. The
more popular one says that naming the server this way is a kind of a tribute to the Native
American Indian tribe Apache, known for its fighting strength and dauntless spirit. According
to the other story, the name ‘Apache server’ represents a sound analogue to ‘a patchy server’,
with 'patchy' referring to the bundle of patches that are attached to the codebase of NCSA
HTTP 1.3.
MySQL :
MySQL is a database management system that is used by WordPress to store and retrieve all
your blog information. Think of it this way. If your database is a filing cabinet that WordPress
uses to organize and store all the important data from your website (posts, pages, images, etc),
then MySQL is the company that created this special type of filing cabinet. MySQL is an open
source relational database management system. It runs as a server and allows multiple users to
manage and create numerous databases. It is a central component in the XAMPP stack of open
source web application software that is used to create websites.
XAMPP stands for X-operating system, Apache, MySQL, PHP and Perl scripting. Most
WordPress installations use the XAMPP stack because it is open source and works seamlessly
with WordPress. WordPress requires MySQL to store and retrieve all of its data including post
content, user profiles, and custom post types. Most web hosting providers already have MySQL
installed on their web servers as it is widely used in many open source web applications such as
WordPress. WordPress uses the PHP programming language to store and retrieve data from the
MySQL database. To retrieve data from the database, WordPress runs SQL queries to
dynamically generate content.
SQL stands for Structured Query Language and is the programming language typically used to
query databases. For users that are not comfortable writing their own PHP and SQL scripts, most
web hosting providers offer easy to use web applications to manage databases. One such web
application is phpMyAdmin which allows users to manage their database using a web based
graphical interface. You can manipulate your tables visually while phpMyAdmin runs the SQL
queries for you.
Out of the box MySQL doesn’t come with any graphical interface and advanced level users may
prefer to just manage their databases from the command line.
What is PHP?
PHP is a server side scripting language. that is used to develop Static websites or Dynamic
websites or Web applications. PHP stands for Hypertext Pre-processor, that earlier stood for
Personal Home Pages. PHP scripts can only be interpreted on a server that has PHP installed.
The client computers accessing the PHP scripts require a web browser only. A PHP file contains
PHP tags and ends with the extension ".php".
PHP means - Personal Home Page, but it now stands for the recursive backronym PHP:
Hypertext Preprocessor. PHP code may be embedded into HTML code, or it can be used in
combination with various web template systems, web content management system and web
frameworks.
E-Learning Management System Table from Database: All the tables related data are stored under this
database as following,
Department: All the department related data are stored under this database as
following,
Course: All the course related data and newly added course are stored under this
database as following,
Programming Languages: All the programming languages related data and
newly added programming languages are stored under this database as following,
Video: All the video related data and newly added videos are stored under this
database as following,
Comment: All the Comments of different videos are stored under this
comment database as following.
Questions: All the questions added by the Admin are stored under this database
as following,
Question Answers: All the question results are stored under this database as
following,
Total User: All the users informations who log-in are stored under this
database as following,
Log-In: All the users information like users id & password, admin id &
password are stored under this database as following,
TESTING
System testing is the essential step for the development of a reliable and error free
system. Testing is the process is the process of executing a program with the explicit intension of
finding error i.e. making the program fail and test case are derived with the purpose in mind. A
test case is the set of data item that the system process as normal input. A successful test is one
that find an error.
Requirement listed in SRS document were used as a baseline for testing to ensure that
the existing and new functionality are working. Test case is derived for each requirement as a
way of proving that the system or changes being implemented is ready for day to day business
use without error and/or adverse impact on the existing functionality. Requirement itself changed
from time to time and some become obsolete and to be removed together with the test case.
Test Environment:
The software is tested with the required hardware and software requirements. The
software configuration is window 11.
A testing strategy is decided for testing the system so that all modules are tested to fulfill
all user requirements. A test strategy is methodologies that describe the various steps that
need to be performed during testing and the time and effort required for performing them.
The following strategies are used for testing our application.
Unit Testing:
Unit testing is a white-box testing technique. The main consideration in the test is
verification of all modules of the software system. Each module is unit tested, as follows: Unit
testing the module to ensure that status is send to server. Unit testing the module to ensure
connection is established.
Unit testing the module to ensure data storage in Real-time Database when Connection
is established. Unit testing the module to ensure system security by verifying Admin. Unit
testing the module to ensure system security by verifying User. Unit testing the module to
Admin credentials Registration. Unit testing the module to manage Admin Logout. Unit testing
the module for View Complaint Details. Unit testing the module for Modify Worker
Information. Unit testing the module for viewing user meetings. Unit testing the module for user
complaints. Unit testing the module for adding new user. Unit testing the module for View user
profile. Unit testing the module for Update user password.
Integration Testing:
Integration testing is the technique for testing the interfaces of software components.
Each software components in unit tested, and all the components are integrated to perform
together. The test is conducted to ensure that the components are working properly after
interfacing.
All modules are integrated, and integration testing of the system is performed as follows:
Interface of the applications are integrated together and then tested. The Backend functionality is
then added and application is tested again. Following are the interfaces of the application:
Admin/User(Login)
Add different User
Manage User Details
Add Courses/Videos/Questions
Manage Courses/Videos/Questions
Give Efficiency test
View Score
Admin/User(Logout)
.
Test Report
Test case No. -1 Test case name: Verify the login page
Input set Expected output Actual output Remark/ Comment/ action
taken
A valid login logged in logged in Pass
name:admin
Invalid login name: Wrong username Wrong username Pass
user1122 or password or password
Test case No. -2 Test case name: Add new user who don’t have any account
Input set Expected output Actual output Remark/ Comment/ action
taken
Add a new user name: logged in logged in Pass
newuser
Add an existing user id: Fail to login Wrong username or Pass
new password
...
Test case No. -3 Test case name: User Function Learn Courses
Input set Expected output Actual output Remark/ Comment/ action
taken
Learn Programming Successfully Successfully Pass
Tutorials Redirected Redirected
Back to Homepage Successfully Successful Back Pass
Back to to Homepage
Homepage
Test case No. -4 Test case name: User Function Watch Videos
Input set Expected output Actual output Remark/ Comment/ action
taken
Learn Programming Successfully Successfully Pass
Videos Redirected Redirected
Back to Homepage Back to Homepage Back to Homepage Pass
...
Test case No. -5 Test case name: User Function Exercise
Input set Expected output Actual output Remark/ Comment/
action taken
Practice Skill Test Successfully Successfully Pass
Redirected Redirected
Back To Homepage Successfully Successfully Pass
Back to Homepage Back to Homepage
Test case No. -6 Test case name: Admin Courses Function
Input set Expected output Actual output Remark/ Comment/
action taken
Admin Add Courses Successfully Added Successfully Added Pass
Source Code
Sign up:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Aleo"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro"
rel="stylesheet">
<title>E-Learning Website</title>
<!----Linking google fonts-->
<link href="https://fonts.googleapis.com/css?family=Lobster"
rel="stylesheet">
<!----font-awsome start-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<!----font-awsome ends-->
<!----favicon setting-->
<link rel="shortcut icon" type="text/css" href="img/mylogo.png">
<!----------email notification-------->
</head>
<body>
<!---Navigation Starts ----->
</button>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#cpwd').keyup(function(){
var pwd=$('#pwd').val();
var cpwd=$('#cpwd').val();
if (cpwd!=pwd)
{
$('#errorlabel').html('**password are not matched');
$('#errorlabel').css('color','red');
return false;
}
else
{
$('#errorlabel').html('');
return true;
}
});
});
</script>
<!---confirm password validation end------->
</body>
</html>
Css style:
body {
background: #91a716;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
*{
font-family: cursive;
box-sizing: padding-box;
form {
width: 1000px;
padding: 20px;
border-radius: 20px;
h2 {
text-align: center;
margin-bottom: 40px;
}
input {
display: block;
width: 95%;
padding: 10px;
border-radius: 5px;
label {
color: #888;
font-size: 18px;
padding: 10px;
button {
float: right;
color: #fff;
border-radius: 5px;
margin-right: 10px;
border: none;
button:hover{
opacity: .10;
.error {
background: #F2DEDE;
color: #0c0101;
padding: 10px;
width: 95%;
border-radius: 5px;
h1 {
text-align: center;
a {
float: right;
color: #fff;
border-radius: 10px;
margin-right: 10px;
border: none;
text-decoration: none;
a:hover{
opacity: .7;
Validation PHP:
<?php
session_start();
$con=mysqli_connect('localhost','root');
if ($con)
{
echo "connection successful";
}
else
{
echo "no connection";
}
mysqli_select_db($con,'e-learning');
$name=$_POST['name'];
$pass=$_POST['password'];
$email=$_POST['email'];
$result=mysqli_query($con,$q);
$res=mysqli_fetch_assoc($result);
$num=mysqli_num_rows($result);
if ($num==1)
{
if ($res['username']=='admin')
{
header("location:admin/admin_main.php");
}
else
{
$_SESSION['username']=$name;
header('location:index.php');
}
}
else
{
$_SESSION['error']="error";
header('location:login.php');
?>
Registration PHP:
<?php
session_start();
$con=mysqli_connect('localhost','root');
if ($con)
{
echo "connection successful";
}
else
{
echo "no connection";
}
mysqli_select_db($con,'e-learning');
$name=$_POST['name'];
$pass=$_POST['password'];
$email=$_POST['email'];
$result=mysqli_query($con,$q);
$num=mysqli_num_rows($result);
if ($num==1)
{
"duplicate data";
header('location:signup.html');
}
else
{
$qy="insert into login(username,password,email)
values('$name','$pass','$email')";
mysqli_query($con,$qy);
echo "inserted";
header('location:login.php');
}
?>
Sample HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</div>
<div class="container">
<div class="row">
<div class="card">
<div class="card-header">
this is header
</div>
<div class="card-body">
<div class="card-img">
<img src="img/work1.png" class="img-thumbnail img-fluid"
height="400px" width="200px;">
</div>
</div>
<div class="row">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>username</th>
<th>password</th>
</tr>
</thead>
<tbody>
<tr>
<td>
sunil
</td>
<td>1234</td>
</tr>
<tr>
<td>mangesh</td>
<td>4562</td>
</tr>
</tbody>
</div>
</table>
<form>
<div class="form-group">
<input type="text" name="" class="form-control">
</div>
<div class="form-group">
<input type="text" name="" class="form-control">
</div>
</form>
</div>
</div>
JQuery(document).ready(function()
{
$(".slider").ripples({
})
);
</body>
</html>
Programming demo:
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>E-Learning Website</title>
<!----css file link-->
<link rel="stylesheet" type="text/css" href="css/programming.css">
<!----font-awsome start-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
.context-dark, .bg-gray-dark, .bg-primary {
color: rgba(255, 255, 255, 0.8);
}
.nav-list li a:hover:before {
margin-left: 0;
opacity: 1;
visibility: visible;
}
ul, ol {
list-style: none;
padding: 0;
margin: 0;
}
.social-inner {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 23px;
font: 900 13px/1 "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.social-container .col {
border: 1px solid rgba(255, 255, 255, 0.1);
display: inline-block;
}
.nav-list li a:before {
content: "\f14f";
font: 400 21px/1 "Material Design Icons";
color: #4d6de6;
display: inline-block;
vertical-align: baseline;
margin-left: -28px;
margin-right: 7px;
opacity: 0;
visibility: hidden;
transition: .22s ease;
}
</style>
</head>
<body>
</button>
</div>
<?php
// session_start();
$con=mysqli_connect('localhost','root');
mysqli_select_db($con,'e-learning');
?>
<div class="news-content">
<p>
<?php echo
$res['language_description']; ?>
</p><br>
<a
href="programming/java/java_programming.php?course_name=<?php echo
$res['language_name'] ?>">Start Reading...</a>
</div>
</div>
</div>
<?php } ?>
</div>
</section>
<br><br><br><br>
</body>
</html>
Programming HTML:
<!DOCTYPE html>
<html>
<head>
<title>E-Learning Website</title>
<!----css file link-->
<link rel="stylesheet" type="text/css" href="css/programming.css">
<!----font-awsome start-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
.bgcolor
{
background: rgba(0,0,0,0.1);
body
{
background: #FC354C; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #0ABFBC, #FC354C); /* Chrome
10-25, Safari 5.1-6 */
background: linear-gradient(to right, #0ABFBC, #FC354C); /* W3C, IE 10+/ Edge,
Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: white;
}
.navbar
{
background: #C04848; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #480048, #C04848); /* Chrome
10-25, Safari 5.1-6 */
background: linear-gradient(to right, #480048, #C04848); /* W3C, IE 10+/ Edge,
Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
</style>
</head>
<body>
</button>
<div class="row">
<div class="news-active">
<div class="col-md-4 col-sm-6 col-xs-12 content-
border" >
<div class="bgcolor latest-news-wrap " >
<div class="news-img">
<img src="img/JAVA.png" class="img-
responsive">
<div class="deat">
<span>JAVA</span>
</div>
</div>
<div class="news-content">
<p>
Python is a scripting language
like PHP, Perl, Ruby and so much more. It can be used for web programming
</p><br>
<a
href="http://localhost/MyResponsiveWebsite/programming/java/java_programming.h
tml">Start Reading...</a>
</div>
</div>
</div>
<div class="news-content">
<p>
Python is a scripting language
like PHP, Perl, Ruby and so much more. It can be used for web programming
</p><br>
<a
href="http://localhost/MyResponsiveWebsite/programming/python/python_home.html
">Start Reading...</a>
</div>
</div>
</div>
<div class="news-content">
<p>
Python is a scripting language
like PHP, Perl, Ruby and so much more. It can be used for web programming
</p><br>
<a
href="http://localhost/MyResponsiveWebsite/programming/android/android_home.ht
ml">Start Reading...</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body></html>
Logout PHP:
<?php
session_start();
session_destroy();
header('location:login.php');
?>
<!DOCTYPE html>
<html>
<head>
<title>LOGIN</title>
</head>
<body>
<header><div></div>
<h1> home </h1>
</header>
<section>
<form action="login.php" method="post">
<h2>LOGIN</h2>
<?php } ?>
<label>User Name</label>
<input type="text" name="uname" placeholder="User
Name"><br>
<label>Password</label>
<button type="submit">Login</button>
</form>
</section>
</body>
</html>
Login PHP:
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Aleo"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro"
rel="stylesheet">
<title>E-Learning Website</title>
<!----Linking google fonts-->
<link href="https://fonts.googleapis.com/css?family=Lobster"
rel="stylesheet">
<!----font-awsome start-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<!----font-awsome ends-->
<!----favicon setting-->
<link rel="shortcut icon" type="text/css" href="img/mylogo.png">
<!----------email notification-------->
<script type="text/css">
</script>
</head>
<body>
<!---Navigation Starts ----->
</button>
<span id="perror"><?php
if(isset($_SESSION['error']))
{
echo "wrong username or password";
}
else{ echo " ";}
?>
</span>
<button id="btn-login"
type="submit">Login</button>
</div>
<div class="register">
<h2>Don't have an account? <span
id="create-account"><a href="signup.html">Create</span></a> </h2>
</div>
</form>
</div>
<div class="right-box">
<span class="signinwith">Sign in With <br> Social
Networks</span>
<button class="social facebook">Log in with
Facebook</button>
<button class="social twitter">Log in with
twitter</button>
<button type="submit" class="social google g-signin2"
data-onsuccess="onSignIn()">Log in with gmail</button>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript">
function validation() {
var username=document.getElementById('username').value;
var password=document.getElementById('password').value;
function clear() {
document.getElementById('perror').innerHTML="ksdfisdhfg";
}
</script>
<!---confirm password validation end------->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form method="POST" action='imgdemo.php' enctype="multipart/form-data">
<div class="form-group">
<label><i class="fa fa-user fa-2x"></i>Language Name :</label>
<input type="text" name="languagename" class="form-control">
</div>
<div class="register">
<h2>Don't have an account? <span id="create-account"><a
href="signup.html">Create</span></a> </h2>
</div>
</form>
</body>
</html>
Demo HTML:
<!DOCTYPE html>
<html>
<head>
<title>E-Learning Website</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></
script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></
script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="card" style="width: 18rem;">
<img src="img/1logo.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on
the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
Index PHP:
<?php
session_start();
if (!isset($_SESSION['username'])) {
header('location:login.php');
# code...
?>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Aleo"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro"
rel="stylesheet">
<title>E-Learning Website</title>
<!----magnific popup css file for work section -->
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
<link href="https://fonts.googleapis.com/css?family=Lobster"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></
script>
<script type="text/javascript"
src="js/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></
script>
<style type="text/css">
.servicebody
{
html
{
scroll-behavior: smooth;
}
</style>
</head>
<body onload="myfunction()">
<div id="loading"></div>
</button>
<h1 style="color: white;margin-top: 10px;" id="myhead">E-
Learning Website</h1>
</div>
<div class="collapse navbar-collapse" id="navi">
<!------Navigation menus starts---->
<ul class="nav navbar-nav navbar-right">
<li> <a href="">Home</a></li>
<li> <a href="#myservice_section">Our Service</a></li>
<li> <a href="#work">Works</a></li>
</div>
</div>
</nav>
<section class="slider text-center" id="slider">
<div class="slider-overlay">
<div class="slider-content">
<div class="icons">
</div>
<div class="cta-div">
<a href="" class="btn1">CONTACT US</a>
<a href="#myservice_section"
class="btn2">LEARN TODAY</a>
</div>
<br><br>
<div class="social-networks">
<a href="https://www.facebook/com-
282626055790378/?modal=admin_todo_tour" class="fa fa-facebook"></a>
<a href="https://twitter.com/" class="fa fa-
twitter"></a>
<a href="https://www.instagram.com" class="fa
fa-instagram"></a>
<a href="" class="fa fa-reddit"></a>
<a href="https://www.linkedin.com/in/sunil-
yadav-70b3bb181/" class="fa fa-linkedin"></a>
<a href="" class="fa fa-cog"></a>
</div>
</div>
</div>
</section>
</div>
<div class="register">
<h2>Don't have an account? <span
id="create-account"><a href="signup.html">Create</span></a> </h2>
</div>
</form>
</div>
<div class="right-box">
<span class="signinwith">Sign in With <br> Social
Networks</span>
</div>
</div>
</div>
</div>
<br><br>
<div class="container-fluid servicebody" id="myservice_section">
<div class="service-are" id="service">
<div class="row">
<div class="col-xs-12">
<div class="section-title text-center">
<h2><b>SERVICES</b></h2>
<p>
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="service-wrap text-center">
<div class="service-icon">
<i class="fa fa-leaf"></i>
</div>
<h3><a href="programmingdemo.php">PROGRAMMING</a></h3>
<p>
</p>
</div>
</div>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<br><br><br>
<section class="faq" id="myfaq">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2><b>GENERAL FAQs</b></h2>
<div class="sub-heading">
<p>
you can ask the regarding the issues.we
will <br>solve that together for sure
</p>
</div>
</div>
</div>
</div> <br><br><br>
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="panel-group" id="accordian">
<?php
$con=mysqli_connect('localhost','root');
if (!$con) {
die('connection
failed'.mysqli_connect_error());
}
mysqli_select_db($con,'e-learning');
<?php } ?>
</div>
</div>
</div>
</div>
</section>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" aria-describedby="emailHelp"
placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your
email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">message</label>
<input type="password" class="form-control" placeholder="enter your
message">
</div>
<script type="text/javascript">
var preloader=document.getElementById('loading');
function myfunction()
{
preloader.style.display='none';
}
function addButton() {
var body=document.getElementsByTagName('body')[0];
var myfaq1=document.getElementById('myfaq');
var btn=document.createElement('button');
btn.innerHTML='sunil';
myfaq1.appendChild(btn);
body.appendChild(myfaq);
}
</script>
</body>
</html>
E Learning SQL:
--
-- Database: `uniquedeveloper`
--
-- --------------------------------------------------------
--
-- Table structure for table `answers`
--
--
-- Dumping data for table `answers`
--
-- --------------------------------------------------------
--
-- Table structure for table `category`
--
--
-- Dumping data for table `category`
--
-- --------------------------------------------------------
--
-- Table structure for table `commentsection`
--
--
-- Dumping data for table `commentsection`
--
-- --------------------------------------------------------
--
-- Table structure for table `courses`
--
--
-- Dumping data for table `courses`
--
-- --------------------------------------------------------
--
-- Table structure for table `faq`
--
--
-- Dumping data for table `faq`
--
-- --------------------------------------------------------
--
-- Table structure for table `image`
--
--
-- Dumping data for table `image`
--
-- --------------------------------------------------------
--
-- Table structure for table `login`
--
--
-- Dumping data for table `login`
--
INSERT INTO `login` (`id`, `username`, `password`, `email`) VALUES
(1, 'sunil yadav', '1234', '[email protected]'),
(3, 'sunil ', '1234', '[email protected]'),
(8, 'deepak', '5687', 'ndvnkvjks'),
(11, 'deepak y', '258', 'lsnzbbv'),
(12, 'deepa', '520', 'sam8rt7gnailvnnvngkjf'),
(19, 'ghf', 'rtat', ''),
(20, 'deepak', '7896', 'osdbfas@ukhsvdfb'),
(21, 'mahesh', '258', '[email protected]'),
(22, 'mahesh', 'mahesh', 'sanmsnksd@,zxv'),
(23, 'mangesh', '2589', 'sbdjchjsdc'),
(24, 'rahul', '123', 'bdjkbdasb'),
(25, 'mangesh tiwari', '123', 'jfdvfsdvdf'),
(26, 'sunil yadav', '12345', 'jbsadjvb'),
(27, 'hg', '', ''),
(28, 'admin', 'admin', 'samndjdsfadg'),
(29, 'deepak yadav', '123456789', ''),
(30, '', '', ''),
(32, 'mahesh', 'singh', '12345'),
(33, 'mangesh', '12345678', 'jdvzhfds'),
(34, 'deepak', 'deepak123', '[email protected]');
-- --------------------------------------------------------
--
-- Table structure for table `mytable`
--
--
-- Dumping data for table `mytable`
--
-- --------------------------------------------------------
--
-- Table structure for table `programming_languages`
--
--
-- Dumping data for table `programming_languages`
--
-- --------------------------------------------------------
--
-- Table structure for table `questions`
--
--
-- Dumping data for table `questions`
--
-- --------------------------------------------------------
--
-- Table structure for table `question_test`
--
--
-- Dumping data for table `question_test`
--
-- --------------------------------------------------------
--
-- Table structure for table `user`
--
--
-- Dumping data for table `user`
--
-- --------------------------------------------------------
--
-- Table structure for table `users`
--
--
-- Dumping data for table `users`
--
-- --------------------------------------------------------
--
-- Table structure for table `videos`
--
--
-- Dumping data for table `videos`
--
INSERT INTO `videos` (`video_id`, `video_path`, `video_name`, `course_name`,
`video_image`) VALUES
(51, 'https://www.youtube.com/embed/LGKniBZoxvc', 'How to download jcalender
in Netbeans | Hindi', 'java', '../../uploadimg/4.png'),
(52, 'https://www.youtube.com/embed/QmKJrnt4rQg', 'How to download jcalender
in Netbeans | Hindi', 'java', '../../uploadimg/v.png'),
(54, 'https://www.youtube.com/embed/9vIi56spxo8', 'How to do this', 'java',
'../../uploadimg/ANDROID.png'),
(56, 'https://www.youtube.com/embed/VEQYRJkoRBY', 'this is a python video',
'python', '../../uploadimg/2.png');
-- --------------------------------------------------------
--
-- Table structure for table `videos_demo`
--
-- --------------------------------------------------------
--
-- Table structure for table `video_info`
--
--
-- Dumping data for table `video_info`
--
--
-- Indexes for dumped tables
--
--
-- Indexes for table `answers`
--
ALTER TABLE `answers`
ADD PRIMARY KEY (`aid`);
--
-- Indexes for table `category`
--
ALTER TABLE `category`
ADD PRIMARY KEY (`id`);
--
-- Indexes for table `commentsection`
--
ALTER TABLE `commentsection`
ADD PRIMARY KEY (`cid`);
--
-- Indexes for table `courses`
--
ALTER TABLE `courses`
ADD PRIMARY KEY (`id`);
--
-- Indexes for table `faq`
--
ALTER TABLE `faq`
ADD PRIMARY KEY (`id`);
--
-- Indexes for table `login`
--
ALTER TABLE `login`
ADD PRIMARY KEY (`id`);
--
-- Indexes for table `mytable`
--
ALTER TABLE `mytable`
ADD PRIMARY KEY (`id`);
--
-- Indexes for table `programming_languages`
--
ALTER TABLE `programming_languages`
ADD PRIMARY KEY (`id`);
--
-- Indexes for table `questions`
--
ALTER TABLE `questions`
ADD PRIMARY KEY (`qid`);
--
-- Indexes for table `question_test`
--
ALTER TABLE `question_test`
ADD PRIMARY KEY (`id`);
--
-- Indexes for table `user`
--
ALTER TABLE `user`
ADD PRIMARY KEY (`uid`);
--
-- Indexes for table `users`
--
ALTER TABLE `users`
ADD PRIMARY KEY (`id`);
--
-- Indexes for table `videos`
--
ALTER TABLE `videos`
ADD PRIMARY KEY (`video_id`);
--
-- Indexes for table `videos_demo`
--
ALTER TABLE `videos_demo`
ADD PRIMARY KEY (`id`);
--
-- Indexes for table `video_info`
--
ALTER TABLE `video_info`
ADD PRIMARY KEY (`course_id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `answers`
--
ALTER TABLE `answers`
MODIFY `aid` int(255) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=21;
--
-- AUTO_INCREMENT for table `category`
--
ALTER TABLE `category`
MODIFY `id` int(4) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=15;
--
-- AUTO_INCREMENT for table `commentsection`
--
ALTER TABLE `commentsection`
MODIFY `cid` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=159;
--
-- AUTO_INCREMENT for table `courses`
--
ALTER TABLE `courses`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=56;
--
-- AUTO_INCREMENT for table `faq`
--
ALTER TABLE `faq`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
--
-- AUTO_INCREMENT for table `login`
--
ALTER TABLE `login`
MODIFY `id` int(255) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=35;
--
-- AUTO_INCREMENT for table `mytable`
--
ALTER TABLE `mytable`
MODIFY `id` int(255) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;
--
-- AUTO_INCREMENT for table `programming_languages`
--
ALTER TABLE `programming_languages`
MODIFY `id` int(255) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=12;
--
-- AUTO_INCREMENT for table `questions`
--
ALTER TABLE `questions`
MODIFY `qid` int(250) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
--
-- AUTO_INCREMENT for table `question_test`
--
ALTER TABLE `question_test`
MODIFY `id` int(255) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=24;
--
-- AUTO_INCREMENT for table `user`
--
ALTER TABLE `user`
MODIFY `uid` int(255) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=36;
--
-- AUTO_INCREMENT for table `users`
--
ALTER TABLE `users`
MODIFY `id` int(255) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=22;
--
-- AUTO_INCREMENT for table `videos`
--
ALTER TABLE `videos`
MODIFY `video_id` int(255) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=57;
--
-- AUTO_INCREMENT for table `videos_demo`
--
ALTER TABLE `videos_demo`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=34;
--
-- AUTO_INCREMENT for table `video_info`
--
S
MODIFY `course_id` int(255) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=24;
COMMIT;
Snapshots
Exercise Page:
View Test Result Page:
Conclusion
The E-LEARNING WEBSITE (E-Learning Management System) has been computed successfully and
was also tested successfully by taking "Test Cases". It is user friendly, and has required options, which
can be utilized by the user to perform the desired operations.
The Software is developed using HTML, CSS, JS as front end and PHP, MySql as back end in
windows environment.
E-LEARNING WEBSITE can be used in various sectors, schools, colleges, tuition centres,
or individual tutors. There is no doubt that the E-LEARNING WEBSITE is not perfect yet,
but students are really get benefit from them from their own pace. Our application will be
adding more free educational videos in future keeping in eyes for of lower standard students.
Content will be made more user-friendly so that each student will understand the concepts
more easily.
The Most important future scope from the development of the project is:-