E-Learning Portal

StudyLand
(Web Based Learning System)

By

Subhrajit Nayak (544-1111-0371-18)

Sabyasachi Mazumder (544-1111-0364-18)
Shybal Ghosh (544-1111-0372-18)
Rudra Narayan Paul (544-1111-0387-18)
Anirban Guha (544-1111-0382-18)
Pallabi Dome (544-1212-1647-18)

B.Sc. (HONS) IN COMPUTER SCIENCE UNIVERSITY

OF CALCUTTA
2021
 E-Learning
The project entitled “StudyLand”, submitted by

• Subhrajit Nayak
• Sabyasachi Mazumder
• Shybal Ghosh
• Rudra Narayan Paul
• Anirban Guha
• Pallabi Dome

Under the guidance of Prof. Mr. Amitava Biswas, Lecturer, Vivekananda

College, Thakurpukur. This project thesis is submitted in partial fulfilment
of the requirement for the B.Sc. (Hons.) in Computer Science under
University of Calcutta.

Vivekananda College, 269 Diamond Harbour Road,

Thakurpukur, Kolkata - 700063
 CERTIFICATE
This is to certify that the Project entitled “StudyLand” is s record of work done by

Mr. Subhrajit Nayak (Roll No: 183544-21-0058, Reg. No: 544-1111-0371-18)

Mr. Sabyasachi Mazumder (Roll No: 183544-21-0052, Reg. No: 544-1111-0364-18)

Mr. Shybal Ghosh (Roll No: 183544-21-0058, Reg. No: 544-1111-0372-18)

Mr. Rudra Narayan Paul (Roll No: 183544-21-0058, Reg. No: 544-1111-0387-18)

Mr. Anirban Guha (Roll No: 183544-21-0058, Reg. No: 544-1111-0382-18)

Ms. Pallabi Dome (Roll No: 183544-11-0179, Reg. No: 544-1212-1647-18)

Under my guidance and supervision and submitted in partial fulfilment of the

requirements for the award of CC-13 of 6 semester B.Sc. (Hons.) in Computer Science
Degree by the University of Calcutta. These candidates have completed the total
parameters and requirement of the entire project. I wish them a very success in future.

(Prof. Samiran Panda)

(INTERNAL EXAMINER) (EXTERNAL EXAMINER)
 ACKNOWLEDGEMENT

It is our prime duty to express our sincere gratitude to all those who have helped us
to complete this project successfully. We want to express our respectful and sincere
thanks to our respected and honourable project guide Prof. Amitava Biswas,
Department of Computer science, Thakurpukur, Vivekananda College for the
valuable cooperation, guidance and continuous support rendered by hime throughout
our project works.

At least we would like to thanks and we are also grateful to Prof. Jhuma Mazumder,
Dept. Co-ordinator along with other Dept Teacher, staff and all other classmates for
giving needful advises and support for completion of this project.

(INTERNAL EXAMINER) (SIGNATURE OF HOD)

 1

Table of Contents
TOPICS Page No.
1. ABSTRACT (4 - 7)
• Introduction
• Abstract
• Scope of the project

2. Background/Review of Related Work (8 - 26)

Hardware and Software Specifications
➢ Software Requirement Specification
o Introduction to SDLC
o SDLC Model
o Spiral Model
o Advantages of Spiral Model
o Disadvantages of Spiral Model
o Development Schedule
➢ Functionality
➢ Functional and Operational Requirements
➢ Feasibility study and Requirement Analysis
o Operational Feasibility
o Technical Feasibility
o Economic Feasibility
o Time Feasibility
➢ Technology Used

o Introduction to MySQL
o Introduction to PHP
 2

o Introduction to phpMyAdmin
o Introduction to HTML
o Introduction to CSS
• Advantages of CSS
o Introduction to JavaScript
o Introduction to XAMPP
o Introduction to Bootstrap

➢ Category
➢ Hardware and Software Requirements
o Software Used
o Hardware Used
➢ Description of the component of system

3. METHODOLOGY (27 - 51)

Design
➢ Output Design
➢ Input Design
➢ Design Considerations
➢ Database Design
o Entity
o Attribute
o Relation
❖ Entities
❖ Attributes
❖ Relationships
❖ ER Diagrams
❖ Data Dictionary
➢ Normalization
 3

➢ Data Flow Diagrams

o Context Level Data Flow Diagram
o Level 0 Data Flow Diagram
o Level 1 Data Flow Diagram of Admin
o Level 1 Data Flow Diagram of Student
o Level 1 Data Flow Diagram of Teacher
➢ Modules

➢ Functional Flowchart

➢ Use-Case Diagram

o Use-case Diagram of Student

o Use-case Diagram of Teacher

➢ Class Diagram

4. IMPLEMENTATION (52 - 55)

➢ How the project is implemented
➢ Testing
5. RESULTS AND DISCUSSION (56 - 72)
➢ Snap-Shots
➢ Coding
➢ Future Scope
6. CONCLUSION (73 - 74)
7. REFERENCES (75 - 76)
 4

Abstract
 5

Introduction
In the era of internet all the essential items can be found on the internet. From groceries to furniture
and all other things which are very important for our regular life, we can buy all of those things on
the internet. Even the education system got upgraded to online. Recently e-learning systems are
experiencing rapid development. We are experiencing a rough time where the lives, health,
economy even the education system got affected from this pandemic situation. Education is the
most important thing in anyone’s life. But in this time where maintaining social distancing is an
obvious, a student can’t attend schools or colleges in regular way. So, online classes are organised
by the schools and colleges for the students for safe learning. Online classes are an integrated part
of e-learning that’s why e-learning got a huge popularity among the student and the teachers.

The advantages of learning through a global network are manifold and obvious: the independence
of time and space, learners can learn at their own pace, learning materials can be organized in one
place and used-processed all around the world. One of the most important segments in today’s
development and use of e-learning system is the personalization of the contents and building of
the user profiles based on the learning behaviour of each individual user. The personalization
options increase the efficiency of e-learning, thus justifying the higher initial cost of their
construction. In order to personalize the learning process and adapt content to each learner, e-
learning systems can use some strategies that have the ability to meet the needs of learners. Also,
these systems have to use different technologies to change the environment and perform the
adaptation of different teaching materials based on the needs of the learners. The process of
adaptation of contents, learning processes, feedbacks or navigation and objectives studied in the
subsequently presented research, and presents major standards and specifications in e-learning.
 6

Abstract of the Project

E-learning uses electronic media to deliver flexible vocational education and training. It includes
access to, downloading materials through the web or reading a bunch of important blogs. It also
includes online access to participation in course activities (e.g. online stimulations, online group
discussions). Direct use of the Internet is detectable in learning and research purposes, structured
learning curriculum; constant messaging between a teacher/trainer and learner on any learning
issue, or online administration of learning activities. The effectiveness of e-learning has greatly
enhanced through student-centre design. For example, students remember more information from
a text book that is well organized, with extensive visuals, reflection/interaction points, clear
headings, etc. The same concepts exist for online courses—learners can understand a concept more
clearly by knowing about the topic with a proper practical implementation. Basically, usability is
the process of testing (through observations) how students behave with a course— what works,
what doesn’t, what confuses, what doesn’t confuses.
 7

Scope of the project

The rapid increase in Internet connectivity in the last few years have been an important
catalyst for growth of e-learning in India. The story is not limited to schools, colleges,
universities only. Many Indian companies are focusing on e-learning to train their freshers
and existing employees because continuous employee learning is a crucial strategy. And
day by day the existing technology is advancing and new technology is introducing.

So, initially after completing the project we will try to increase the content of our website so that
a major number of users can get the benefit. We will also try to add some new features on the
proposed system. Our main goal will be scale down this project to mobile app. This way it will
become much flexible to use.
 8

Background/Review Of
Related Work
 9

Hardware And Software Specifications

2. Software Requirement Specification

Introduction to SDLC
A software development life cycle (SDLC) model describes the different activities that need to be
carried out for the software to evolve in its life cycle. For example, for a software to evolve from
the requirements specification stage to the design stage, the developers need to elicit requirements
from the customers, analyze those requirements, and formally document the requirements in the
form of SRS documents. Then System Requirements are specified followed by phases of System
design, System implementation, Testing, Conversion and Evaluation. Also, a recycling and
maintenance activity may occur if the following system still need modification or redevelopment.
So, maintaining a system is also the most crucial part of the “Development Cycle”.

SDLC Model
There are 5 different types of SDLC models:

1. Classical Waterfall Model

2. Iterative Model
3. Spiral Model
4. Prototype Model
5. Evolutionary Model
 10

Spiral Model – We have used Spiral Model for our project.

The diagrammatic representation of Spiral model appears like a spiral with many loops. Each loop
of the spiral represents a phase of the software process. The radius of the spiral at any point
represents the cost incurred in the project till then and the angular dimensions represent the
progress made in the current phase.

This model is split into 4 sectors/quadrants:

1. The 1st quadrant or Object Setting phase identifies, Objectives of the phase.

→ Examine the risks associated with this phase.

2. The 2nd quadrant or Risk Assessment and Reduction phase dictates,

→ A detailed analysis is carried out to identify all the project risks.
 11

→ And if there is any risk then necessary steps are taken to reduce the risks.

3. The section of 3rd quadrant is also known as the Development and Validation phase. In
this phase the next level is developed and validated after resolving all risks.

4. The Review and Planning (4th quadrant) phase consists of,

→ Reviewing the results achieved so for with the customer and planning next steps around
the spiral.
→ Progressively more complete version of the software gets built with each iteration around
the spiral.

Advantages of Spiral Model:

I. This model is good for large and complex projects.
II. Updates are received to the customer at each iteration.
III. Risks are analyzed after each iteration. This model provides direct support for coping with
the project risks.
IV. Documentation is clearly defined and understandable.

Disadvantages of Spiral Model:

I. Not suitable for small or low risk projects could be expensive for small projects.

II. This model is much more complex and difficult to understand if a new employee is entered
in the project development.

III. It is much expensive.

IV. Not defined the end points of the project, so it can take a long time to develop or iterations
can go infinitely.
 12

Development schedule:
Development schedule is one of the important parts of the planning, there is a different way of
making development here we used Gantt chart for development schedule. The development
schedule must be independent as possible. Ideally, the components should be stand-alone so that
it does not need any other component to operate. This is only possible for every simple component
and a more complex component is inevitably having some dependencies on another component.
The schedule gives the time estimation of the project. In the project or development of software,
there are different phases like study, design, implementation, and test. Our project also has
different phases and each phase takes a different time for development.

Our project starts on the 5th of May 2021 and ends on the. The total time taken by our project is.
The project consists of different phases like Analysis, design, implementation, and testing.
 13

TASK MAY MAY MAY MAY MAY JUNE JUNE JUNE JUNE JULY JULY JULY JULY
NAME
02/21 09/21 16/21 23/21 30/21 06/21 13/21 20/21 27/21 04/21 11/21 18/21 25/21

ANALYSIS 100%
ANALYSE

DESIGN DESIGN 100%

IMPLEMEN IMPLEMENTATION 100%

TATION

TESTING 100%
TESTING

DEPLOYMENT DEPLOYMENT 100%

Total Project Time:

Analysis: 5th May 2021 – 10th May 2021

Design: 11th May 2021 – 26th May 2021

Implementation: 27th May 2021 – 7th July 2021

Testing: 8th July 2021 – 20th July 2021

Deployment: 21st July 2021 – 28th July 2021

 14

2.1 Functionality
This project has 3 major functional units—

- User interface/front end---Using PHP

- Backend database--- My SQL
- Presentation--- HTML 5.0
- Client-Side Validation--- JavaScript
- Server-side processing tool --- Apache server of XAMPP

2.2 Functional and Operational Requirements

Nowadays, E-Learning is considered one of the most effective media of education. A
feasibility study combines up-to-date pedagogical research with best practice in implementation of
E-Learning tools acknowledging the scenario of that present time. The first step in the system
development life cycle is the preliminary investigation to determine the feasibility of the system.
The purpose of the preliminary investigation is to evaluate the project request. It is neither a design
study nor does it includes the collection of details to describe the system in all respect. Rather it is
collection of information that helps the maker to evaluate the merits of the project requests and
make an informed judgment about the proposed project. The report analyses accomplish the
following objective.
➢ Clarifying and determining the project request.
➢ Determining the size of the project.
➢ Accessing costs and benefits of alternatives approaches.
➢ Reports of the finding to the organization, with recommendations outlining the acceptance
of the proposal.
Reviewing Organization document:- In this the investigation is made about the organization
involved in, or affected by the project. So, the present activities are studied in order to develop a
fully automated system. A feasibility study is an analysis that takes all of the project’s relevant
factors into account – including Operational, Technical, Economic, Time Feasibility studies to
ascertain the likelihood of completing the project successfully.
 15

Operational Feasibility
The most important step is the implementation plan for the strategy of E-Learning deployment.
Proposed project is beneficial only if it can be turned into information systems that will meet the
operating requirements of the organization. This feasibility asks if the system will work when it is
developed and installed. So, in this project we tested the operational feasibility by determining:
➢ Whether there is sufficient support for the project from the organization.
➢ Is the current system being acceptable by them?
➢ Will the proposed system causes harm?
➢ Can our system give learners the best study guide?
➢ Will Teachers be satisfied with the working technique of our system?
➢ Whether we can achieve 100% success based on our goal?
➢ Most importantly user friendly our system will be?
➢ Last but on the least, study on how much helpful our system for our users?

Technical Feasibility
The process of proving that the concept is technically possible . Technical Feasibility, involves
development of a working model or the product of the service. This Assessment focuses on the
technical resources available to the organization. The objective of the technical feasibility step is
to confirm that the product will perform and to verify that there are no production barriers. There
are number of technical issues which are generally raised during the technical feasibility which are
determined as follows:

➢ Does the necessary technology assist to do what is suggested?

➢ Does the proposed equipment have the technical capacity to hold the data required to use
the new system?
➢ Can the system be upgraded if developed?
➢ Is there technical guarantee of accuracy, reliability, and ease to access?
➢ Will the system be user-friendly enough?
➢ How much easy is the Registration process?
➢ Security of the Portal.
➢ Regular Updation of the system.
 16

Economic Feasibility
A system that can be developed technically and will be used be profitable for the organization.
Financial benefits must equal or exceed the costs. The first purpose of this effort is to financially
model the venture opportunity & achieve a break-even analysis. These scenarios will be critical in
strategic planning, milestone development & venture valuation analysis. The simple objective is
to determine what level of revenue is required to satisfy the return of investment of the developers.
The main objective of the Economic Feasibility is to develop a financial model of the business
venture. The analysis raises various financial questions during the investigation to estimate the
following:
➢ The cost of conduct, a full system investigation.
➢ The cost of hardware and software for the application being used.
➢ The benefits in the form of cost or fewer costly errors.
➢ The cost if nothing changes.
➢ How much the cost can be minimized without compromising any drawbacks?
➢ How much it can reach among students?
➢ Well maintained advertisement of the system.
To be judged feasible, a proposal for the specific project must pass all these tests. Otherwise, it is
not considered as economic feasible.
In general, request that don’t pass all the feasibility tests are not persuaded further, unless they are
modified and resubmitted as new proposals.

Time Feasibility
Time Feasibility is a measure how reasonable the project timetable is. The required system’s
development was expected to be successfully completed within the stipulated time, as the
constraints of time placed on the process was of crucial importance . A project will fail if it takes
too long to be completed before it is useful. If we look, clearly we will see that how much Economic
Feasibility depends on Time Feasibility. Thus, finally concluding that the proposed project fulfilled
all feasibility requirements, the implementation of the project was progressed with. Thus,
everything is done while taking time into consideration.
 17

Software Environment

Technology Used

INTRODUCTION TO MySQL
MySQL is an open-source relational database management system [RDBMS]. Its name is a
combination of “My”, the name of co-founder Michael Widenius’s daughter and “SQL”, the
abbreviation for Structured Query Language. A relational database organizes data into one or more
data tables in which data types may be related to each other; these relations help structure the data.
SQL is a language programmers use to create, modify and extract data from the relational database,
as well as control user access to the database. In addition to relational databases and SQL, an
RDBMS like MySQL works with an operating system to implement a relational database in a
computer’s storage system, manages users, allows for network access and facilitates testing
database integrity and creation of backups.

MySQL is free and open-source software under the terms of the GNU General Public License, and
is also available under a variety of proprietary licenses. MySQL was owned and sponsored by the
Swedish company MySQL AB, which was bought by Sun Microsystems (now Oracle
Corporation). In 2010, when Oracle acquired Sun, Widenius forked the open-source MySQL
project to create MariaDB.

MySQL has stand-alone clients that allows users to interact directly with a MySQL database using
SQL, but more often, MySQL is used with other programs to implement applications that need
relational database capability. MySQL is a component of the LAMP web application software
stack (and others).

INTRODUCTION TO PHP
PHP is a general-purpose scripting language especially suited to web development. It was
originally created by Danish-Canadian programmer Rasmus Lerdorf in 1944. The PHP
reference implementation is now produced by the PHP Group. PHP originally stood for Personal
Home Page, but it now stands for the recursive initialism PHP: Hypertext Preprocessor. PHP
code is usually processed on a web server by a PHP interpreter implemented as a module, a daemon
or as a Common Gateway Interface (CGI) executable. On a web server, the result of the
interpreted and executed PHP code – which may be any type of data – would form the whole or
part of an http response. Various web template systems, web content management systems, and
web frameworks exist which can be employed to orchestrate or facilitate the generation of that
 18

response. Additionally, PHP can be used for many programming tasks outside of the web context,
such as standalone graphical applications and robotic drone control. PHP code can also be directly
executed from the command line.

PHP files can contain text, HTML, CSS, JavaScript, and PHP code. PHP code is executed on
the server, and the result is returned to the browser as plain HTML. PHP files have extension
“.php”.

PHP can generate dynamic page content. PHP can create, open, read, write, delete, and close
files on the server. PHP can collect from data. PHP can add, delete, modify data in your
database. PHP can be used to control user-access. PHP can encrypt data. With PHP you are not
limited to output HTML. You can output images, PDF files, and even Flash movies. You can also
output any text, such as XHTML and XML.

PHP runs on various platforms (Windows, Linux, Unix, Mac OS X, etc). PHP is compatible with
almost all servers used today (Apache, IIS, etc.). PHP supports a wide range of databases. PHP is
free and also easy to learn and runs efficiently on the server side.

INTRODUCTION TO phpMyAdmin
phpMyAdmin is a free and opensource administration tool for MySQL and MariaDB. As a
portable web application written primarily in PHP, it has become one of the most popular MySQL
administration tools, especially for web hosting services. Tobias Ratschiller, then an IT consultant
and later founder of the software company Maguma, started to work on a PHP-based web front-
end to MySQL in 1998, inspired by MySQL-Webadmin. He gave up the project in 2000 because
of lack of time. By that time, phpMyAdmin had already become one of the most popular PHP
applications and MySQL administration tools, with a large community of users and contributors.
In order to coordinate the growing number of patches, a group of three developers (Olivier Muller,
Marc Delisle and Loic Chapeaux) registered the phpMyAdmin project at Source-Forge and took
over the development in 2001. In July 2015, the main website and the downloads left Source-Forge
and moved to a content delivery network. At the same time, the releases began to be PGP-signed.
Afterwards, issue tracking moved to GitHub and the mailing lists migrated. Before version 4,
which uses Ajax extensively to enhance usability, the software used HTML frames.

Features provided by the program include:

• Web interface
• MySQL database management
• Import data from CSV, jQuery and SQL
 19

• Export data to various formats: CSV, SQL, XML, jQuery, PDF (via the TCPDF library),
ISO/IEC 26300 – OpenDocument Text and Spreadsheet, Word, Excel, SQL, and others

• Administrating multiple servers

• Creating complex queries using query-by-example (QBE)
• Creating PDF graphics of database layout
• Searching globally in a database or a subset of it
• Live charts to monitor MySQL server activity like connections, processes, CPU/memory
usage, etc

• Network traffic to the SQL server

• Make complex SQL queries easier

INTRODUCTION TO HTML
The Hypertext Markup Language, or HTML is the standard markup language for documents
designed to be displayed in a web browser. It can be assisted by technologies such as Cascading
Style Sheets (CSS) and scripting languages such as JavaScript.

Filename extensions: .html, or .htm

Internet media type: text/html

Type code: TEXT

Uniform Type Identifier (UTI): public.html

Developed by: WHATWG

Initial release: 1993; 28 years ago

Latest Release: (2021) Living Standard

Type of format: Document file format

Container for: HTML elements

Contained by: Web browser

Extended from: SGML

Extended to: XHTML

 20

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> directly introduce content into the
page. Other tags such as <p> surround and provide information about documents 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), former maintainer of the HTML and current
maintainer of the CSS standards, has encouraged the use of CSS over explicit presentational
HTML since 1997.

INTRODUCTION TO CSS
Cascading Style Sheet (CSS) is a style sheet language used for describing the presentation of a
document written in a markup language such as HTML. CSS is a cornerstone technology of the
World Wide Web, alongside HTML and JavaScript.

Filename extension: .css

Internet media type: text/css

Uniform Type Identifier (UTI): public.css

Developed by: World Wide Web Consortium (W3C)

Initial release: December 17, 1996; 24 years ago

Latest release: CSS 2.1: Level 2 Revision 1 (April 12, 2016; 5 years ago)

Type of format: Style Sheet Language

Container for: Style rules for HTML elements (tags)

Contained by: HTML Documents

CSS facilities publication of content in multiple presentation formats based on nominal parameters.
Nominal parameters include explicit user preferences, different web browsers, the type of device
being used to view the content, the geographic location of the user and many other variables.
 21

Each web browser uses a layout engine to render web pages, and support for CSS functionality is
not consistent between them. Because browsers do not parse CSS perfectly, multiple coding
techniques have been developed to target specific browsers with workarounds (commonly known
as CSS hacks or CSS filters). Adoption of new functionality in CSS can be hindered by lack of
support in major browsers. For example, Internet Explorer was slow to add support for many CSS
3 features and damaged the browser’s reputation among developers. In order to ensure a consistent
experience for their users, web developers often test their sites across multiple operating systems,
browsers, and browser versions, increasing development time and complexity.

Advantages of CSS:
• Site-wide consistency: When CSS is used effectively in terms of inheritance and
“cascading”, a global style sheet can be used to affect and style elements site-wide. If the
situation arises that the styling of the elements should be changed or adjusted, these
changes can be made by editing rules in the global style sheet. Before CSS, this sort of
maintenance was more difficult, expensive and time-consuming.
• Bandwidth: A style sheet, internal or external, specifies the style once for a range of
HTML elements selected by class, type or relationship to others. This is much more
efficient than repeating style information inline for each occurrence of the element. An
external style sheet is usually stored in the browser cache, and can therefore be used on
multiple pages without being reloaded, further reducing data transfer over a network.
• Page reformatting: With a simple change of one line, a different style sheet can be used
for the same page. This has advantages for accessibility, as well as providing the ability
to tailor a page or site to different target devices.
• Accessibility: Without CSS, web designers must typically lay out their pages with
techniques such as HTML tables that hinder accessibility for vision-impaired users.

INTRODUCTION TO JavaScript
JavaScript often abbreviated as JS, is a programming language that conforms to ECMAScript
specification. JavaScript is high-level, often Just-in-time complied, and multi-paradigm. It has
curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class
functions.

Paradigm: event-driven, functional, imperative

Designed by: Brendan Eich of Netscape initially; others have also contributed to ECMAScript
standard

First appeared: December 4, 1995; 25 years ago

 22

Stable release: ECMAScript 2020/June 2020; 1 year ago

Filename extensions: (.js), (.cjs), (.mjs)

As a multi-paradigm language, JavaScript supports event-driven, functional, and imperative

programming styles. It has application programming interfaces (APIs) for working with text,
dates, regular expressions, standard data structures, and the Document Object Model (DOM).
JavaScript engines were originally used only in web browsers, but they are now core components
of other software systems, most notably servers and a variety of applications.

Although there are similarities between JavaScript and Java, including language name, syntax, and
respective standard libraries, the two languages are distinct and differ greatly in design.

Important tools have evolved with the language:

• Every major web browser has built-in web development tools, including a JavaScript
debugger.
• Static program analysis tools, such as ESLint and JSLint, scan JavaScript code for
conformance to a set of standards and guidelines.
• Some browsers have built-in profilers. Standalone profiling libraries have also been
created, such as benchmark.js and jsbench.
• Many text editors have syntax highlighting support for JavaScript code.

INTRODUCTION TO XAMPP
XAMPP is a free and opensource cross platform web server solution stack package developed
by Apache Friends, consisting mainly of the ApacheHTTP Server, MariaDB database, and
interpreters for scripts written in the PHP and Perl programming languages. Since most actual
web server deployments use the same components as XAMPP, it makes transitioning from a local
test server to a live server possible.

XAMPP’s ease of deployment means a WAMPP or LAMP stack can be installed quickly and
simply on an operating system by a developer.

XAMPP is regularly updated to the latest releases of Apache, MariaDB, PHP, and Perl. It also
comes with a number of other modules including OpenSSl, phpMyAdmin, MediaWiki, Joomla,
WordPress and more. Self-contained, multiple instances of XAMPP can exist on a single
computer, and any given instance can be copied from one computer to another. XAMPP is offered
in both a full and a standard version.
 23

The most obvious characteristic of XAMPP is the ease at which a WAMP webserver stack can be
deployed and instantiated. XAMPP also provides support for creating and manipulating databases
in MariaDB and SQLite among others. Once XAMPP is installed, it is possible to treat a localhost
like a remote host by connecting using an FTP client. Using a program like FileZilla has many
advantages when installing a content management system (CMS). It is also possible to connect
to localhost via FTP with an HTML editor.

INTRODUCTION TO BOOTSTRAP
Bootstrap is free and open-source CSS framework directed at responsive, mobile-first
frontend web development. It contains CSS and (optionally) JavaScript based design templates
for typography, forms, buttons, navigation and other interface components.

Original author (s): Mark Otto, Jacob Tornton

Developer (s): Bootstrap core team

Initial release: August 19, 2011; 9 years ago

Repository: Bootstrap Repository

Written in: HTML, CSS, JavaScript

Platform: Web Platform

As of April 2021, Bootstrap is the tenth most starred project on Github, with more than 150,000
stars. Bootstrap is a HTML, CSS and JS Library that focuses on simplifying the development of
informative web pages. The primary purpose of adding it to a web project is to apply Bootstrap’s
choices of color, size, font and layout to the project. Once added to a project, Bootstrap provides
basic style definitions for all HTML elements. The result is uniform appearance for prose, tables
and from elements across web browsers. In addition developers can take advantages of CSS
classes defined in Bootstrap to further customize the appearance of their contents. Bootstrap also
comes with several JavaScript components in the form of jQuery plugins. They provide additional
user interface elements such as dialog boxes, tooltips. Each Bootstrap component consists of an
HTML structure, CSS declarations, and in some cases accompanying JavaScript code. The most
components of Bootstrap are its layout components, as they affect an entire web page. The basic
layout component is called “Container”, as every other element in the page is placed in it.
 24

Category: Internet

• Hardware & Software Requirements:

Software used:
Platform : Windows 10

Web Server : XAMPP server

Presentation : HTML 5.0

Client-Side Validation : JavaScript

Database Connectivity : PHP, MySql

And, also a dedicated server to run all the above softwares.

Hardware used:
Processor : Intel Core i5-8250U, up to 3.4 GHz

RAM : 8GB

Hard Disk Drive : 1TB

Monitor : LG 22MP68VQ 22-Inche LED Monitor

Keyboard : Zebronics

Mouse : Zebronics
 25

Description of the components of system

Well-structured designs improve the maintainability of a system. A structured system is one that

is developed from the top down and functional, that is, broken down into manageable components.

In this project we modularized the system so that they have minimal effect on each other. So the

components of the system are as follows:

Admin Module deals with payment, teachers, students and almost all the purposes related

of that website such as activity management, course details, assignments etc. It is the main

part of website.

Login to system deals with the candidates who wants to login in the system.

Payment Management deals with the payments like course fees and exam fees from

students.

Candidates Management deals with the problems of the candidates.

Teacher Management deals with the problems of teachers.

Student Management deals with the problems of students.

Activity Management deals with the activities of users. It checks if a user is active or not.

Course Details gives our users a proper idea of the courses offered by our system.
 26

Functional Flowchart:

A System consists of many different activities or processes. We know the relation between the

processes that one process will contain several individual processes. We often show these relations

in terms of process charts.

E-Learning portal

Admin Teacher Student

Admin

Teacher Student Payment

Management Management Management

Teacher

Subject Course Details Teacher Profile

 27

Student

Course Student Profile

Login to system

Check Check Roles

Credentials of access

Subject

Online Classes Assignments Study Materials

Course

Course Course Course

Name Duration Fess
 28

Methodology
 29

Design
The most challenging phase of the system life cycle is system design. The term design describes a
final system and the process by which it is developed. It refers to the technical specifications that
will be applied in implementing the candidate system. It also includes the construction of programs
and program testing.

System design is a solution, a “how to” approach the creation of a new system. This important
phase is composed of several steps. It provides understanding and procedural details necessary for
implementing the system recommended in the feasibility study. Emphasis is on translating the
performance requirements into design specifications.

The first step is to determine how the output is to be produced and int what format. Samples of the
output and input are also presented. Second, input data and master files (database) have to be
designed to meet the requirements of the proposed output. The operational (processing) phases are
handled through program construction and testing, including a list of programs needed to meet the
systems objectives and to complete documentation. Finally, details related to justification of the
system and an estimate of the impact of the candidate system on the user and the organization are
documented and evaluated by management as a step toward implementation. The basic steps in
designing are:

• Output Design
• Input Design
• Data Design
• Process Design

Output Design
Output of the system is the most important and direct source of information to the user.
Efficient, intelligible output design should improve the system’s relationships with the user and
help in decision making. A major form of output is hard copy from the printer.

Output from computer system is required to communicate the result of processing to users.
Designing computer output should process in an organized. Well thought out manner. The right
output must be developed while ensuring that each output element is designed so that the user will
find the system easy to use.

In addition to deciding on the output device, the systems analyst must consider the print
format and the editing for the final printout. The task of output preparation is critical, requiring
skill and ability to align user requirements with the capabilities of the system in operation. The
design considerations we have followed while designing output are:
 30

• Name or title.
• Space and arrangement
• Headers and footers.
In online applications, the layout sheet for displayed output is similar to the layout chart used for
designing input. In these cases, the output forms are similar to the input forms. Other type of
applications output forms like reports used to make decisions must be designed carefully. The
following layout describes our report designing.

Input Design
Inaccurate input data are the most common cause of errors in data processing. Errors entered by
data entry operators can be controlled by input design. Input design is the process of converting
user-originated inputs to a computer-based format. In the system design phase, the expanded data
flow diagram identifies logical data flows, data stores, sources and destinations. A system
flowchart specifies master files (database), transaction files and computer programs.

• Input Media: In this project, earlier stages identified the data that is input to the
transactions. The next step is what media should be used for the input. Since this is a Online
Learning project we need computer based online forms as the media for input entry. There
are three approaches for data entry with forms: menu based formatted forms, and prompts.
Here in this we have 2 login options. One for teacher and one for student. They have to
register them with proper details. After that they will be registered in the appropriate table
based on their input data. A formatted form is a pre-printed form or a template that requests
the user to enter data in appropriate locations. It is a fill-in-blank type. The form is flashed
on the screen as a unit. The cursor is usually positioned at the first blank. After the user
responds by filling in the appropriate information, the cursor automatically moves to the
next line, and so on until the form is completed.

• Forms Types: There are five types of forms classified by what it does in the system.
They are: action forms - to perform some action such as modifying, and deleting data,
memory forms - to store data in the appropriate tables and display existing historical data,
report forms – to generate decision support data from existing records, course forms – here
teachers can submit the study materials and students can access those materials by using
their ids and feedback form – here both teachers and students can give their feedbacks.

• Form Layout: When form is designed, a list is prepared of all the items to be included
on the form and the maximum space to be reserved. The form user to make sure it has the
required details should check the list.
o Title
o Data Zoning
 31

o Rules and Captions

Design Considerations:
In designing these forms we taken care several attributes that are mentioned below:

• Identification and wording.

➢ Form titles and labels.
• Maximum readability and use.
➢ Legible, intelligible, uncomplicated, and space.
• Physical factors.
➢ Composition, color, layout.
• Order of data items.
➢ Logical sequence, data relation.
• Ease of data entry.
➢ Field positions.
• Size and arrangement.
➢ Size, storing, filing, and space for signs.
• Use of instructions.
➢ Online help for data entry, status info.
The following diagram describes the sample form layout we used to design forms in our project.

Form Title

Record
Navigation Data Zone

Action Commands

Online Help
 32

Database Design

Database Design is a collection of processes that facilitate the designing, development,

implementation and maintenance of enterprise data management systems. Properly designed
database are easy to maintain, improves data consistency and are cost effective in terms of disk
storage space. The database designer decides how the data elements correlate and what data must
be stored. The main objectives of database design in DBMS are to produce logical and physical
designs models of the proposed database system. The logical model concentrates on the data
requirements and the data to be stored independent of physical considerations. It does not
concern itself with how the data will be stored or where it will be stored physically.
Database Design helps produce database systems:
1. That meet the requirements of the users
2. Have high performance.
Database Design process in DBMS is crucial for high performance database system.

Entity:

Entity in DBMS can be a real-world object with an existence, for example. In College database,
the entities can be Professor, Student, Courses, etc. Entities has attributes, which can be considered
as properties describing it, for example, for professor entity, the attributes are Professor_Name,
Professor_Address, Professor_Salary, etc. The attribute value gets stored in the database.

Types of DBMS entities:

Strong Entity: The strong entity has a primary key. Weak entities are dependent on strong entity.
Its existence is not dependent on any other entity. Strong Entity is represented by a single rectangle.

Weak Entity: The weak entity in DBMS do not have a primary key and are dependent on the parent
entity. It mainly depends on other entities. Weak Entity is represented by double rectangle.

Strong Entity Weak Entity

 33

Attribute:

An attribute is a property or characteristic of an entity. An entity may contain any number of

attributes. One of the attributes is considered as the primary key. In an Entity- Relation model,
attributes are represented in an elliptical shape.

Attribute

Relation:

Relation is sometimes used to refer to a table in a relational database but is more commonly
used to describe the relationships that can be created between those tables in a relational database. In
relational databases, a relationship exists between two tables when one of them has a foreign key that
references the primary key of the other table. This single fact allows relational databases to split and
store data in different tables, yet still link the disparate data items together. It is one of the features that
makes relational databases such powerful and efficient stores of information. The ability to define
relationships is so fundamental and so important that this is what differentiates relational databases
from other types of databases. Relation, therefore, is the defining feature of relational databases.
Relation may also be known as relationship.

Relationship

In our project we have identified entities, attributes for those entities, and relationships
between those entities from data collected at analysis phase.
These are listed below:

Entities:

▪ Admin
▪ teacher
▪ student
 34

▪ Schedule
▪ Examination
▪ Question
▪ courses
▪ Paper
▪ contents
▪ Payment Management

Attributes:
Table Attributes

Admin AdminID, AdminName, AdminAdd,

AdminEmail, MobileNo

teacher id, image, name, email, password, mobnumber,

status

student id, image, name, email, password, mobnumber,

status

Schedule id, date, time, description

Examination id, roll_no, date

Question id, question_type, description

courses id, teacherid, name, description, image, type,

coursefee, status

Paper id, exam_id, paper_marks, paper_name

contents Id, topicid, heading, type, links, createdBy,

createdAt, updatedAt

Payment Management id, course_fee, student_id, course_id

 35

Relationships:
▪ Admin manages the whole system
▪ Teacher manage Course
▪ Teacher manage Schedule
▪ Teacher manage Examination
▪ Course has Contents
▪ Course has Payment
▪ Students enrol for Course
▪ Students browse Contents
▪ Students makes Payment
▪ Exam has Answers
▪ Exam has Questions

ER Diagrams:

ER diagrams are used to represent ER model as graphical notation. Then it will be easy to

understand the relations.

 36

Admin_em
ail id Admin_
name
Admin_phone
No.
Admin_a
ddress
Admin

manages

Teacher_ Course Course_ Payment Student

_fee number management _id
Teacher_pho name
neNo. Course_
Course fee
_id Course
_id Transaction

email Teacher manages _id

Course Has
Makes
M
id
Examination M 1
Enrol
for
Student id

Exam Exam
_time _id name
manages
Exam_ 1
date Student_a
Has
ddress
browse

Schedule
M
M Student_p
honeNo
teacher_i
time
Content
d Has

date id Content_i
d

Content_
question no
Ques_id
paper
Ques_type
description

id paper
_nam
e
exam
_id paper_
marks
 37

Data Dictionary:
A data dictionary contains metadata i.e. data about the database. The data dictionary is very
important as it contains information such as what is in the database, who is allowed to access it,
where is the database physically stored etc. The users of the database normally do not interact with
the data dictionary, it is only handeled by the database admin.

The data dictionary in general contains information about the following-

Names of all the database and their schemas.

Details about all the tables in the database, such as their owners, their security constrains, when
they were created etc.

Physical information about the tables such as where they are stored and how.

Table constrains such as primary key, attributes, foreign key information etc.

Information about the database views that are visible.

Table Name: Admin

Description: This data structure describes the admin details

Contents:

Name Type Null Key

ID bigint Not Null Primary Key

Admin Name nvarchar(64)

Admin Email nvarchar(64)

Admin Address nvarchar(64)

Admin Mobile char(64)

 38

Table Name: Teacher

Description: This data structure defines the teacher details.

Contents:

Name Type Null Key

ID bigint Not Null Primary Key

image varchar(255)

name nvarchar(64)

email char(64)

mobnumber nvarchar(64)

password varchar

status status

Table Name: Student

Description: this data structure defines the student details.

Contents:

Name Type Null Key

ID bigint Not Null Primary Key

image varchar(255)

name nvarchar(64)

email char(64)

mobnumber nvarchar(64)

password varchar

status status
 39

Table Name: Schedule

Description: this data structure defines the schedule details.

Contents:

Name Type Null Key

Schedule ID bigint Not Null Primary Key

Teacher ID bigint Not Null Foreign Key

Schedule Time datetime

Schedule Date datetime

Table Name: Course

Description: this data structure defines the course details.

Contents:

Name Type Null Key

Id bigint Not Null Primary Key

teacherid bigint

name varchar

description varchar

image varchar

type enum

coursefee varchar

status enum
 40

Table Name: Question

Description: this data structure defines the question details.

Contents:

Name Type Null Key

Question ID bigint Not Null Primary Key

Course ID bigint Not Null Foreign Key

Question Type

Table Name: Answer

Description: this data structure defines the answer details.

Contents:

Name Type Null Key

nnswer_id int Not Null Primary Key

question_id int Not Null Foreign Key

answer_type

Table Name: Examination

Description: this data structure defines the examination details.

Contents:

Name Type Null Key

id bigint Not Null Primary Key

exam_date datetime
 41

exam_time datetime

Table Name: Content

Description: this data structure defines the content details.

Contents:

Name Type Null Key

Id bigint Not Null Primary Key

topicrid bigint

heading varchar(50)

type text

links varchar

content varchar

createdBy varchar

createdAt datetime

updatedAt datetime

status text

Table Name: Payment Management

Description: this data structure defines the payment details.

Contents:

Name Type Null Key

Transaction ID bigint Not Null Primary Key

Student ID bigint Not Null Foreign Key

 42

Course ID bigint Not Null Foreign Key

Course Fee
 43

Normalization

Normalization is the process of refining the data model built by the ER diagram. The
normalization technique, logically groups the data over the number of tables, with minimum
redundancy of data. The entities or tables resulting from normalization contain data items, with
relationships being represented by replication of key data items.
The goal of relational database design is to generate a set of relation schemes that allow
us to store information with minimum redundancy of data and allow us to retrieve information
easily and efficiently. The approach followed is to design schemas that are in an appropriate
form one of the so-called normal form.
The first step towards normalization is to convert the ER model into tables or relations. The next
step is to examine the database for redundancy and if necessary, change them to non-redundant
forms. This non-redundant model is then converted into a database definition, which achieves the
objective of the database design phase. We, defined database from the above ER model by
normalizing it to 3rd normal form. We will show the definitions of those database tables later at
the time of physical database design phase.
 44

Data Flow Diagrams:

A graphic tool used to describe and analyze the moment of data through a system – manual or
automated – including the processes, stores of data, and delays in the system. Data flow diagrams
are the central tools and the basis from which other components are developed. The transformation
of data from input to output, through processes, may be described logically and independently of
the physical components associated with the system.

Context Level Data Flow Diagram:

Teacher

Overview E-
Admin Learning
Request login/manages
System
teachers and courses

Student
 Login/Uplo
Store
ad contents
Teacher’s
Data

0.3
Process
Teacher
Teacher
Fetch Records Response
Level 0 Data Flow Diagram:

Login/Visits
Store Courses
Student’s Data
45

0.2
Student
Process
Student

Data Storage
Fetch Records Response

Store Admin’s Request Data

Data
0.1
Admin

Admin
Process

Fetch Data Response

 46

Level 1 Data Flow Diagram of Admin:

admin
Request Login
Login 0.1.1

View profile
teacher

Manages teacher’s records

Teacher
Management
0.1.2
View profiles student

Manages student’s records

Student
Management
0.1.2
Response
course

Manages courses
Course
Admin Management
0.1.2
View courses
contents

Manages payment Payment

Management payment
0.1.4
View stored payments data

paper

Manages examination Examination

management
0.1.5
response question

Replies to the feedback

Feedback
Response
0.1.6
View the feedbacks feedback
Check feedbacks
 47

Level 1 Data Flow Diagram of Student:

student

courses
student

contents

Login
0.2.2
Registration Courses
0.2.1
0.2.3

paper

Give exams
Exam
Student 0.2.4
Get results

Invoice
question

Feedback
Response
Payment
0.2.6
0.2.5

feedback

payment
 48

Level 1 Data Flow Diagram of Teacher:

teacher

courses
teacher

Show data
contents

Login
0.3.2
Registration Courses
0.3.1
0.3.3
paper

Publish results
Exam
Teacher 0.3.4

Take exams

Feedback 0.3.6 Schedule

question
0.3.5

feedback schedule
 49

Use–Case Diagram:
Use – case diagram shows us the way how we’ll interact with the software as a
normal user. The diagram for this software is given below:

Teacher

Register
Student

Verify Id

Display
Error

Teacher
Login

Student

Popular
courses Verify Id
User
Manages

Display
Error

Get
started
View courses
and details
Update +
Contact us manages

Call Email Our

us us address Assist +
Admin
manages
 50

Use Case Diagram of Student:

View available
courses
Manage and
update
Choose courses

View course

Choose course
duration

Given Exam
Course enrollment
Studen
t
Payment
Upload Start Course
Answer
Verify
paper
Payment
Log View Contents
out

Download
View performance contents Show
and Marks error
messag
Manage
Edit profile Edit DOB

Edit Change
Edit phone password
Profile
photo
number

Admi
n

Update
 51

Use Case Diagram of Teacher:

View available
courses

Edit

View My
course Delete
course
s

Create
courses

Add Delete
content
Content
Edit
content
Teache
r
Exam Manage
Edit
Exam
and update
Date/Tim

Log
Create
out
Question View Upload
Paper Answer Marks and
Paper Remarks

Edit profile

Edit Edit phone Edit DOB

Change
Profile number password
photo

Admin

Update
52
 53

Implementation
 54

How the Project Is Implemented

A crucial phase in the system life cycle is the successful implementation of the new
system design. The change to make a web based application took place in phased
manner. First the system was used to enter, validate and store the different types of
data in the database used by the systems. The static data were also entered in the
directory files. The comparison testified to the reliability, speed and accuracy of the
web based system.

There are two types of implementation

1. Implementation of a windows based application to replace a window

based application The problems encountered are converting files, training
users, creating accurate files, and verifying printouts for integrity.
2. Implementation of a modified application to replace an existing one
using the same computer. This type of conversion is relatively easy to
handle provided there are no major changes in the files.

The proposed system is an implementation from computer based system to Web

based System. More clearly we can state that user can access the system on web
efficiently while the previous system is window based. Conversion means changing
from one system to another. The objective is to put tested system into operation
while holding costs, risks, and personnel irritation to a minimum. Conversion should
be exciting because it is the last step before the
candidate system begins to show result. Unfortunately, the results of conversion
have been chaotic and traumatic for many firms. Unforeseen difficulties crop up as
the system breaks down, data files are damaged and tempers grow short. The training
package is frequently not complete and people are trying to figure out what to do.
Much of this steams of poor planning at all. Let us examine the steps that preceded
conversion.
 55

Testing
The aim of program testing is to help realise identify all defects in a program. However, in practice,
even after satisfactory completion of the testing phase, it is not possible to guarantee that a program
is error free. This is because the input data domain of most programs is very large, and it is not
practical to test the program exhaustively with respect to each value that the input can assume.
Consider a function taking a floating point number as argument. If a tester takes 1sec to type in a
value, then even a million testers would not be able to exhaustively test it after trying for a million
number of years. Even with this obvious limitation of the testing process, we should not
underestimate the importance of testing. We must remember that careful testing can expose a large
percentage of the defects existing in a program, and therefore provides a practical way of reducing
defects in a system. 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 is not unlike
other physical processes where inputs are received and outputs are produced. Where software
differs is in the manner in which it fails. Most physical systems fail in a fixed (and reasonably
small) set of ways. By contrast, software can fail in many bizarre ways. Detecting all of the
different failure modes for software is generally infeasible unlike most physical systems; most of
the defects in software are design errors, not manufacturing defects. Software does not suffer from
corrosion, wear-and-tear -- generally it will not change until upgrades, or until obsolescence. So
once the software is Shipped, the design defects -- or bugs -- will be buried in and remain latent
until activation. Software bugs will almost always exist in any software module with moderate
size: not because programmers are careless or irresponsible, but because the complexity of
software is generally intractable -- and humans have only limited ability to manage complexity.

The Purpose of Testing:

▪ To carry out comprehensive testing of the system/product and its individual components in
order to ensure that the developed system/product conforms to the user requirements/
design.
▪ To verify the proper integration of all components of the software.
▪ To verify that all requirements have been correctly implemented.
▪ To identify and ensure defects are addressed prior to the deployment of the software.

A software product is normally tested in 3 levels.

1. Unit testing: Unit testing is undertaken after a module has been coded and reviewed. This
activity is typically undertaken the coder of the module himself in the coding phase. Before
carried out unit testing, the unit test cases have to designed and test environment for the
unit under test has to be developed.
2. Integration Testing: Integration testing is carried out after all the module have been unit
tested. For successful completion of unit testing to a large extend, ensure that the unit as a
 56

whole work as a satisfactorily. In this context, the objective of the integration testing is to
detect the errors at the module interfaces. For example, it is checked that no parameter
mismatch occur when one module invoked a functionality of another module. Thus the
primary objective of integration testing is to check the module interfaces, i.e., there is no
error in parameter passing. When one module invokes the functionality of another module.
During integration testing, different module of a system in a planned manner using an
integration plan. The integration plan specifies the step and the order in which modules are
combined to realize the full system.
Thus by examining the structure chart, the integration plan can be developed. Any
one of the following approaches can be used in develop the test plan.

• Big-bang approach to integration testing.

• Top-down approach to integration testing
• Bottom-up approach to integration testing
• Mixed up approach to integration testing.
3. System Testing: System testing is a design to validate a fully developed system to assure
that it meets requirements. The test cases are therefore designed solely based on SRS
document. The system testing procedure are the same for object oriented and procedural
program, since system test cases are designed solely based on the SRS document and actual
implementation is immaterial. There are essentially 3 main kind of system testing
depending who carries out testing.
I. Alpha testing: Alpha testing refers to the system testing carried out by the
test team within the developing organization.
II. Beta testing: Beta testing is a system testing performed by a group of
friendly customers.
Acceptance testing: Acceptance testing is the system testing performed by the customer to
determine whether to accept the delivery of the system
 57

Results And Discussion

 58

Snap-Shots:
59
60
61
 62

Coding:
Index Page

<?php include_once "connection.php"; ?>

<?php
session_start();
// print_r($_SESSION);
if (isset($_SESSION['id'])) {
if($_SESSION['role']=='teacher')
{
header('location: teacher/teacher-profile.php');
}
else{
header('location: student/stud-profile.php');
}
}
// die();
?>

<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#" style="height: 100%;">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-
scale=1">
<meta name="description" content="A studing portal for students. It contains well writ
ten, well thought and well explained computer science and programming articles, quizzes
and practice/competitive programming/company interview Questions.">
<link rel="shortcut icon" src="112-book-morph-outline-edited.json" type="image/x-
icon">
<meta name="theme-color" content="#308D46">
<meta property="og:image" content="112-book-morph-outline-edited.json">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="200">
<meta property="og:image:height" content="200">
<!-- Tailwind CSS -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<!-- Bootstrap CSS -->
 63

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootst

rap.min.css'>
<!-- Font Awesome CSS -->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-
awesome/4.2.0/css/font-awesome.min.css'>
<!-- jQuery -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<!-- Bootstrap JS -->
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></scr
ipt>
<script async="" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"
></script>
<script async="" src="//translate.google.com/translate_a/element.js?cb=googleTranslat
eElementInit"></script>
<title>Only Studies | Learning Platform</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>

<body>
<?php include_once "layout/navbar.php"; ?>

<?php
if(isset($_REQUEST['status'])) {
echo $_REQUEST['status'];
}
?>
<?php

$q1 = mysqli_query($con, "SELECT `id` FROM `courses` ");

$num = mysqli_num_rows($q1);
$a = rand(1, $num);
$b = rand(1, $num);
$c = rand(1, $num);
$qry= mysqli_query($con, "SELECT * FROM `courses` WHERE `id` = '".$a."' ");
$row = mysqli_fetch_array($qry);

$qry1 = mysqli_query($con, "SELECT * FROM `courses` WHERE `id` = '".$b."' ");

$row1 = mysqli_fetch_array($qry1);

$qry2= mysqli_query($con, "SELECT * FROM `courses` WHERE `id` = '".$c."' ");

$row2 = mysqli_fetch_array($qry2);
// //echo (rand(10, 100));
// //print_r ($row);
 64

?>

<!-- ======Start of Home Section====== -->

<section id="home" class="d-flex align-items-center">
<div class="container" data-aos="zoom-out" data-aos-delay="100">
<h1>Welcome to <span>StudyLand</span></h1>
<h3>Education is the most powerful weapon which you can use to change the world</h3>
<div class="d-flex">
<a href="get_started_content.php" class="btn-get-started">Get Started</a>
</div>
</div>
</section>

<main id="main">

<!-- ======= Featured Services Section ======= -->

<section id="featured-services" class="featured-services">
<div class="container" data-aos="fade-up">

<div class="row">
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
<div class="icon-box" data-aos="fade-up" data-aos-delay="100">
<h4 class="title"><a href="">Daily live classes</a></h4>
<p class="description">You can chat with educators, ask them questions, answer live polls, and
get your doubts cleared-
all while the class is going on
</p>
</div>
</div>

<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">

<div class="icon-box" data-aos="fade-up" data-aos-delay="200">
<h4 class="title"><a href="">Practice and revise</a></h4>
<p class="description">Learning isn't just limited to classes with our practice section,
mock tests and lecture notes shared as PDFs for your revision</p>
</div>
</div>

<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">

<div class="icon-box" data-aos="fade-up" data-aos-delay="300">
<h4 class="title"><a href="">Learn anytime, anywhere</a></h4>
<p class="description">One subscription gets you access to all our live and recorded classes to w
atch from the comfort of any of your devices</p>
</div>
</div>

<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">

<div class="icon-box" data-aos="fade-up" data-aos-delay="400">
 65

<h4 class="title"><a href="">Score higher</a></h4>

<p class="description">We provide you the guarantee of scoring higher, We have best teachers a
vailable and they will make you enjoy learning </p>
</div>
</div>

</div>

</div>
</section><!-- End Featured Services Section -->

<!-- ======= About Section ======= -->

<section id="about" class="about section-bg">
<div class="container" data-aos="fade-up">

<div class="section-title">
<h2>About</h2>
<h3>Find Out More <span>About Us</span></h3>
<p>Ut possimus qui ut temporibus culpa velit eveniet modi omnis est adipisci expedita at voluptas
atque vitae autem.</p>
</div>

<div class="row">
<div class="col-lg-6" data-aos="fade-right" data-aos-delay="100">
<img src="assets/img/about.jpg" class="img-fluid" alt="">
</div>
<div class="col-lg-6 pt-4 pt-lg-0 content d-flex flex-column justify-content-center" data-aos="fade-
up" data-aos-delay="100">
<h3>Voluptatem dignissimos provident quasi corporis voluptates sit assumenda.</h3>
<p class="fst-italic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab
ore et dolore
magna aliqua.
</p>
<ul>
<li>
<i class="bx bx-store-alt"></i>
<div>
<h5>Ullamco laboris nisi ut aliquip consequat</h5>
<p>Magni facilis facilis repellendus cum excepturi quaerat praesentium libre trade</p>
</div>
</li>
<li>
<i class="bx bx-images"></i>
<div>
<h5>Magnam soluta odio exercitationem reprehenderi</h5>
<p>Quo totam dolorum at pariatur aut distinctio dolorum laudantium illo direna pasata redi</p
>
</div>
 66

</li>
</ul>
<p>
Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit i
n voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, s
unt in
culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
</div>

</div>
</section><!-- End About Section -->

<!-- ======= Popular Courses Section ======= -->

<section id="popular-courses" class="courses">
<div class="container" data-aos="fade-up">

<div class="section-title">
<p class="course-heading">Popular Courses</p>
</div>

<div class="row" data-aos="zoom-in" data-aos-delay="100">

<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0">

<div class="course-item">
<img src="assets/img/course-1.jpg" class="img-fluid" alt="...">
<div class="course-content">
<div class="d-flex justify-content-between align-items-center mb-3">
<h4><?php print_r($row['name']);?></h4>
<p class="price"><?php print_r($row['coursefee']);?></p>
</div>

<?php echo "<h3><a href=course/course-

details.php?id=".$row['id'].">".$row['name']."</a></h3>" ?>
<p><?php print_r($row['description']);?></p>
</div>
</div>
</div> <!-- End Course Item-->

<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0">

<div class="course-item">
<img src="assets/img/course-2.jpg" class="img-fluid" alt="...">
<div class="course-content">
<div class="d-flex justify-content-between align-items-center mb-3">
<h4><?php print_r($row1['name']);?></h4>
<p class="price"><?php print_r($row1['coursefee']);?></p>
</div>
 67

<?php echo "<h3><a href=course/course-

details.php?id=".$row1['id'].">".$row1['name']."</a></h3>" ?>
<p><?php print_r($row1['description']);?></p>

</div>
</div>
</div> <!-- End Course Item-->

<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0">

<div class="course-item">
<img src="assets/img/course-3.jpg" class="img-fluid" alt="...">
<div class="course-content">
<div class="d-flex justify-content-between align-items-center mb-3">
<h4><?php print_r($row2['name']);?></h4>
<p class="price"><?php print_r($row2['coursefee']);?></p>
</div>

<?php echo "<h3><a href=course/course-

details.php?id=".$row2['id'].">".$row2['name']."</a></h3>" ?>
<p><?php print_r($row2['description']);?></p>

</div>
</div>
</div> <!-- End Course Item-->
</div>
</div>
</section><!-- End Popular Courses Section -->

<!-- Start statistic Section -->

<section class="statistic-sec body-font">
<div class="container-stats container px-5 py-24 mx-auto">
<h2 class="heading">We have achieved so far</h2>
<div class="flex flex-wrap -m-4 text-center">
<div class="p-4 sm:w-1/4 w-1/2">
<h2 class="title-font font-medium sm:text-4xl text-3xl text-gray-900">4.7K</h2>
<p class="leading-relaxed">Students</p>
</div>
<div class="p-4 sm:w-1/4 w-1/2">
<h2 class="title-font font-medium sm:text-4xl text-3xl text-gray-900">1.8K</h2>
<p class="leading-relaxed">Educators</p>
</div>
<div class="p-4 sm:w-1/4 w-1/2">
<h2 class="title-font font-medium sm:text-4xl text-3xl text-gray-900">100+</h2>
<p class="leading-relaxed">Courses</p>
</div>
<div class="p-4 sm:w-1/4 w-1/2">
<h2 class="title-font font-medium sm:text-4xl text-3xl text-gray-900">400+</h2>
<p class="leading-relaxed">Video lecture</p>
 68

</div>
</div>
</div>
</section><!-- End statistic Section -->

<!-- Testimonial Section -->

<section class="text-gray-600 body-font">
<div class=" testimonial-title">
<p>What are they saying</p>
</div>
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap -m-4">
<div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
<div class="h-full text-center">
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-
block border-2 border-gray-200 bg-gray-100" src="assets/img/testimonials-1.jpg">
<p class="leading-
relaxed">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1
kinfolk. Single-
origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pac
k vaporware.</p>
<span class="inline-block h-1 w-10 rounded bg-blue-500 mt-6 mb-4"></span>
<h2 class="text-gray-900 font-medium title-font tracking-wider text-
sm">SUBHRAJIT NAYAK</h2>
<p class="text-gray-500">UI Develeoper</p>
</div>
</div>
<div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
<div class="h-full text-center">
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-
block border-2 border-gray-200 bg-gray-100" src="assets/img/testimonials-2.jpg">
<p class="leading-
relaxed">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1
kinfolk. Single-
origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pac
k vaporware.</p>
<span class="inline-block h-1 w-10 rounded bg-blue-500 mt-6 mb-4"></span>
<h2 class="text-gray-900 font-medium title-font tracking-wider text-
sm">SABYASACHI MAZUMDER</h2>
<p class="text-gray-500">Software Develeoper</p>
</div>
</div>
<div class="lg:w-1/3 lg:mb-0 p-4">
<div class="h-full text-center">
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-
block border-2 border-gray-200 bg-gray-100" src="assets/img/testimonials-3.jpg">
<p class="leading-
relaxed">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1
kinfolk. Single-
 69

origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pac
k vaporware.</p>
<span class="inline-block h-1 w-10 rounded bg-blue-500 mt-6 mb-4"></span>
<h2 class="text-gray-900 font-medium title-font tracking-wider text-sm">SHYBAL GHOSH</h2>
<p class="text-gray-500">Tester</p>
</div>
</div>
</div>
</div>
</section> <!--End Testimonial Section -->

<!-- ======= Contact Section ======= -->

<section id="contact" class="contact">
<div class="container" data-aos="fade-up">

<div class="section-title">
<h2>Contact</h2>
<h3><span>Contact Us</span></h3>
<p>Ut possimus qui ut temporibus culpa velit eveniet modi omnis est adipisci expedita at voluptas
atque vitae autem.</p>
</div>

<div class="row" data-aos="fade-up" data-aos-delay="100">

<div class="col-lg-6">
<div class="info-box mb-4">
<i class="fa fa-map-marker"></i>
<h3>Our Address</h3>
<p>Diamond Harbour Rd,Thakurpukur, Kolkata-700063</p>
</div>
</div>

<div class="col-lg-3 col-md-6">

<div class="info-box mb-4">
<i class="fa fa-envelope"></i>
<h3>Email Us</h3>
<p>[email protected]</p>
</div>
</div>

<div class="col-lg-3 col-md-6">

<div class="info-box mb-4">
<i class="fa fa-phone"></i>
<h3>Call Us</h3>
<p>+91 9876543210</p>
</div>
</div>
</div>

<div class="row" data-aos="fade-up" data-aos-delay="100">

 70

<div class="col-lg-6 ">

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3687.05897533152
7!2d88.30559331490886!3d22.46441798523857!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!
1s0x3a027a8bc7db49ed%3A0xf7ab6bbe6079d673!2sVivekananda%20College!5e0!3m2!1sen!2sin!4v16
24975763630!5m2!1sen!2sin" frameborder="0" width="100%" height="384px" style="border:1;" allowf
ullscreen="" loading="lazy"></iframe>
</div>
<div class="col-lg-6">
<form action="#" method="post" role="form" class="php-email-form">
<div class="row">
<div class="col form-group">
<input type="text" name="name" class="form-
control" id="name" placeholder="Your Name" required>
</div>
<div class="col form-group">
<input type="email" class="form-
control" name="email" id="email" placeholder="Your Email" required>
</div>
</div>
<div class="form-group">
<input type="text" class="form-
control" name="subject" id="subject" placeholder="Subject" required>
</div>
<div class="form-group">
<textarea class="form-
control" name="message" rows="5" placeholder="Message" required></textarea>
</div>
<div class="my-3">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
</div>
<div class="text-center"><button type="submit">Send Message</button></div>
</form>
</div>

</div>

</div>
</section><!-- End Contact Section -->

</main><!-- End main Section -->

<!-- ======= Footer ======= -->

<footer id="footer">

<div class="footer-top">
<div class="container">
<div class="row">
 71

<div class="col-lg-3 col-md-6 footer-contact">

<h3>StudyLand</h3>
<p>
Diamond Harbour Rd, Thakurpukur <br>
Kolkata-700063<br>
West Bengal <br><br>
<strong>Phone:</strong> +91 9876543210 <br>
<strong>Email:</strong> [email protected]<br>
</p>
</div>

<div class="col-lg-3 col-md-6 footer-links">

<h4>Useful Links</h4>
<ul>
<li><i class="fa fa-dot-circle-o"></i> <a href="#">Home</a></li>
<li><i class="fa fa-dot-circle-o"></i> <a href="#">About us</a></li>
<li><i class="fa fa-dot-circle-o"></i> <a href="#">Course</a></li>
<li><i class="fa fa-dot-circle-o"></i> <a href="#">Terms of service</a></li>
<li><i class="fa fa-dot-circle-o"></i> <a href="#">Privacy policy</a></li>
</ul>
</div>

<div class="col-lg-3 col-md-6 footer-links">

<h4>Our Services</h4>
<ul>
<li><i class="fa fa-dot-circle-o"></i> <a href="#">Programming</a></li>
<li><i class="fa fa-dot-circle-o"></i> <a href="#">Web Development</a></li>
<li><i class="fa fa-dot-circle-o"></i> <a href="#">SCC Exams</a></li>
<li><i class="fa fa-dot-circle-o"></i> <a href="#">NEET UG</a></li>
<li><i class="fa fa-dot-circle-o"></i> <a href="#">Graphic Design</a></li>
</ul>
</div>

<div class="col-lg-3 col-md-6 footer-links">

<h4>Our Social Networks</h4>
<p>Now you can join us on social media platforms to stay updated to our latest news</p>
<div class="social-links mt-3">
<a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
<a href="#" class="instagram"><i class="fa fa-instagram"></i></a>
<a href="#" class="google-plus"><i class="fa fa-skype"></i></a>
<a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
</div>
</div>

</div>
</div>
</div>
 72

<div class="container py-4">

<div class="copyright">
&copy; Copyright <strong><span>StudyLand</span></strong>. All Rights Reserved
</div>
</div>
</footer><!-- End Footer -->

<!-- <div id="preloader"></div> -->

<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="fa fa-angle-
up"></i></a>

<!-- Template Main JS File -->

<script src="assets/js/main.js"></script>
</body>

<p style="color: red;">

<?php
if(isset($_REQUEST['status'])) {
echo $_REQUEST['status'];
// echo $_REQUEST[$q1];
}
?>
</p>
<!-- this div is for the buttons -->

<!-
- <button class="btn" onclick="document.getElementById('id01').style.display='block'" style="width:auto
;"><a href = "registeras.php">Register</a></button>
<button class="btn" onclick="document.getElementById('id02').style.display='block'" style="widt
h:auto;"><a href = "loginAs.php">LoginAs</a></button> -->

</html>
 73

Future Scope
E-Learning has become increasingly popular across Asia. The continent’s rise in internet users and
the revolutionary changes that have happened in education have created a very fertile environment
for e-learning to grow.

E-learning brings unique advantages, the most prominent being the ability for online instructors to
provide personalised attention to all students. This is especially critical for those students who
cannot afford private face-to-face tutoring sessions or who live in rural areas where such help is
not available. In a conventional set up, this is only possible when a highly skilled tutor offers one-
to-one tutorials to a student. Online tutoring will definitely pose a threat to conventional methods
of teaching—while online learning can never look at completely replacing schools as schools offer
much more than just academic opportunities within their campuses. However, private tuition
centres which are typically managed by individual teachers will have to take a second look at their
business model and adopt digital learning aids to sharpen their offerings.

In a nutshell, it is evident that the future scope of this project circles around maintaining
information. We have to make constant updates, to keep pace with the rest of the world. But due
to shortage of time the following features are unable to include:

• Live Classroom: Certain curricula may require specialised instructors. By using live
broadcasts, these instructors can remain in one location and provide instruction to many
students in other locations. This type of specialisation increases as students move into
higher levels of education, for example towards advanced degrees in medicine. Video
conferencing technology may also be used to provide interactions between students and
instructors. We would try our best to add this in future.
• Video content delivery: Pre-recorded content such as lectures, documentaries, and other
video content may be delivered in a forward and store model so that the material can be
viewed when needed. We will host the platform on online servers to make it accessible
worldwide.
• Student-to-student interactions (Messaging System): Related to the first point, students
may learn just as much from each other as they do from teachers. Thus, communications
technology can be used to connect students in different regions or even different parts of
the world so that they may interact.
• Remote test administration: In some countries, standardised tests are used to evaluate
students on a level playing field. These tests must be delivered securely and on time to
meet testing schedules. In Indonesia, for example, this is a daunting task simply because
of geography and population size. Digital delivery could be the solution.
• Up-to-date materials: As mentioned above, the basics seldom change. However, virtually
all textbooks must be updated. Textbooks are very expensive to purchase, maintain, and
 74

deliver. Again, digital delivery solves this issue when coupled with e-Readers such as
tablets.
• Extra -curricular activities: We would also add some other field like singing, playing
instruments, dancing, drawing, etc, so that students can also learn more and enhance their
skills.
• Teachers and instructors may also take advantage of the technology to interact with their
peers, students, and parents using email and social media.
 75

Conclusion
 76

This project has been implemented to do some basic concepts. We have a few plans for
this project which is mentioned in the future scope portion, but we are unable to implement those
due to lack of time. The frontend of this project has been developed using HTML, JavaScript, CSS
and Bootstrap. The backend of this project has been developed by PHP and MySQL. The system
maintains data consistency by avoiding manual error and documents are maintained accurately
which reduces the losses that can be made due to various environment features. All the requirement
regarding to this problem are solved and the needs, specified in the problem definition are fulfilled.
This project will help all end users as a user-friendly system.
 77

References
 78

Websites:

1. www.google.com
2. www.w3schools.com
3. www.youtube.com
4. www.stackoverflow.com
5. www.bootstrap.com
6. www.wikipedia.com