FACULTY OF AUTOMATION, COMPUTERS AND ELECTRONICS COMPUTERS AND INFORMATION TECHNOLOGY DEPARTMENT BACHELOR’S DEGREE PROJECT Corina Maria Becherescu… [629562]

UNIVERSITY OF CRAIOVA
FACULTY OF AUTOMATION, COMPUTERS AND ELECTRONICS

COMPUTERS AND INFORMATION TECHNOLOGY DEPARTMENT

BACHELOR’S DEGREE PROJECT

Corina Maria Becherescu

SCIENTIFIC COORDINATOR

Prof.Ph.D.Eng ANCA UDRIȘTOIU

FEBRUARY 2019
CRAIOVA

UNIVERSITY OF CRAIOVA
FACULTY OF AUTOMATION, COMPUTERS AND ELECTRONICS

COMPUTERS AND INFORMATION TECHNOLOGY DEPARTMENT

E-LEARNING APPLICATION

Corina Maria Becherescu

SCIENTIFIC COORDI NATOR

Prof.Ph.D.Eng ANCA UDRIȘTOIU

FEBRUARY 2019

CRAIOVA

ii

„Education is the most powerful weapon which you can use to change the world.”

Nelson Mandela

iii

DECLARAȚIE DE ORIGINALIT ATE

Subsemnatul Becherescu Corina Maria , student: [anonimizat], din cadrul Facultății de Automatică, Calculatoare și Electronică a
Universității din Craiova, certific prin prezenta că am luat la cunoștință de cele prezentate mai jos și
că îmi asum, în acest context, originalitatea proiectului meu de licență:

 cu titlul INTERACTIVE SOFTWARE SYSTEM FOR LEARNING AND TESTING ,
 coordonată de Prof.univ.dr.ing. Anca Udr iștoiu ,
 prezentată în sesiunea februarie 2019 .

La elaborarea proiectului de licență, se consideră plagiat una dintre următoarele acțiuni:

 reproducerea exactă a cuvintelor unui alt autor, dintr -o altă lucrare, în limba română sau prin
traducere dintr -o altă limbă, dacă se omit ghilimele și referința p recisă,

 redarea cu alte cuvinte, reformularea prin cuvinte proprii sau rezumarea ideilor din alte
lucrări, dacă nu se indică sursa bibliografică, 

 prezentarea unor date experimentale obținute sau a unor aplicații realizate de alți autori fără
menționarea corectă a acestor surse, 

 însușirea totală sau parțială a unei lucrări în care regulile de mai sus sunt respectate, dar care
are alt autor. 

Pentru evitarea acestor situații neplăcute se recomandă:

 plasarea între ghilimele a citatelor directe și indicarea referinței într -o listă corespunzătoare la
sfărșitul lucrării, 

 indicarea în text a reformulării unei idei, opinii sau teorii și corespunzător în lista de referințe
a sursei originale de la care s -a făcut preluarea, 

 precizarea sursei de la care s -au prel uat date experimentale, descrieri tehnice, figuri, imagini,
statistici, tabele et caetera, 

 precizarea referințelor poate fi omisă dacă se folosesc informații sau teorii arhicunoscute, a
căror paternitate este unanim cunoscută și acceptată. 

Data, Semnătur a candidat: [anonimizat],

iv

UNIVERSITATEA DIN CRAIOVA Aprobat la data de
Facultatea de Automatică, Calculatoare și Electronică …………………
Șef de departament,
Departamentul de Calculatoare și Tehnologia Informației Prof. dr. ing.
Marius BREZOVAN

PROIECTUL DE DIPLOMĂ

Numele și prenumele student: [anonimizat]/ -ei:

BECHERESCU CORINA MARIA

Enunțul temei:

Sa se realizeze o platforma online de e -learning

Datele de pornire:

Aplicație web, creearea u nei soluții software online de e-learning

Conținutul proiectului:
1.Introducere
2. Considerente tehnice
3. Tehnologii si framework -uri
4. Design si implementare
5. Arhitectura software
6. Optimizarea performanței
7. Securitate Web
8. Manualul Utilizatorului
9. Concluzii si viitoare imbunatațiri

Material grafic obligatoriu:

Scheme, diagrame, capturi

Consultații:

Periodice

Conducătorul științific (titlul, nume și
prenume, semnătura):

Prof.univ.dr.ing. Anca Udr iștoiu

Data eliberării temei:

01.10.2017

Termenul estimat de predare a proie ctului:

Data predării proiectului de către student și
semnătura acestuia:

v

UNIVERSITATEA DIN CRAIOVA
Facultatea de Automatică, Calculatoare și Electronică

Departamentul de Calculatoare și Tehnologia Informației

REFERATUL CON DUCĂTORULUI ȘTIINȚIFIC

Numele și prenumele candidatului/ -ei:
Specializarea:
Titlul proiectului:

Locația în care s -a realizat practica de
documentare (se bifează una sau mai
multe din opțiunile din dreapta):

Calculatoare Engleza
Interactive Sof tware System for Learning and T esting
În facultate □
În producție □
În cercetare □
Altă locație: [se detaliază ]

În urma analizei lucrării candidatului au fost constatate următoarele:

Nivelul documentării Insuficient Satisfăcător Bine Foarte bine
□ □ □ □

Tipul proiectului Cercetare Proiectare Realizare Altul
□ □ practică □ [se detaliază ]

Aparatul matematic utilizat Simplu Mediu Complex Absent
□ □ □ □

Utilitate Contract de Cercetare Utilare Altul
cercetare □ internă □ □ [se detaliază ]

Redactarea lucrării Insuficient Satisfăcător Bine Foarte bine
□ □ □ □

Partea grafică, desene Insuficientă Satisfăcătoare Bună Foarte bună
□ □ □ □

Contribuția autorului Insuficientă Satisfăcătoare Mare Foarte mare
□ □ □ □
Simplă Medie Mare Complexă Complexitatea
Realizarea temei □ □ □ □
practică
Analiza cerințelor Insuficient Satisfăcător Bine Foarte bine
□ □ □ □

Arhitectura Simplă Medie Mare Complexă
□ □ □ □

vi

Întocmirea Insuf icientă Satisfăcătoare Bună Foarte bună specificațiilor
□ □ □ □ funcționale

Implementarea Insuficientă Satisfăcătoare Bună Foarte bună
□ □ □ □

Testarea Insuficientă Satisfăcătoare Bună Foarte bună
□ □ □ □

Funcționarea Da Parțială Nu

□ □ □

Rezultate experimentale Experiment propriu Preluare din bibliografie
□ □

Bibliografie Cărți Reviste Articole Referin țe web

Comentarii
și
observații

În concluzie, se propune:

ADMITEREA PROIECTULUI RESPINGEREA PROIECTULUI
□ □

Data, Semnătura conducătorului științific,

vii

THES YS SUMMARY

The project is named: CodEsay – e-learning platform

E-Learning or eLearning represents the possibili ty to learn by using electronic
technologies in order to access educational curriculum outside the traditional classroom. In
most c ases, it refers to a course, program or degree delivered online.

This technology is used in many contexts like:

 Distance education. This defines the learning/teaching experience that uses a
large area of technologies, like the Internet for reaching a stu dent/trainee
anywhere in the world. 

 In companies, it refers to the strategies used by the company to distribute
training courses to employees. 

The main objective of this project is to create a software application dedicated to both
students and professor s from IT domain . Users may have access to courses, write a
positive/negative review related to the content and gives stars if they consider that the curs is
useful and gives helpful informations .***
In order to develop this application, the implemented we b pages will create an
environment where the users will have access to the best courses with the correct
information.
The information from curses will be efficiently group because all the users should
understand the information very fast and try to use it in the exercise and problems.
Users can create accounts on the website or register with their Facebook
account.
?Students and teacher accounts are supervised by an administrator who is allowed to
manage their accounts and courses. ?

viii

SUM MARY

ix

x

FIGURE LIST

FIG. 1- MEDICAL ACADEMY LOGO ………………………….. ………………………….. ………………………….. …………………………. 16
FIG. 2- .NET F RAMEWORK COMPONENT STACK ………………………….. ………………………….. ………………………….. … 18
FIG. 3 – CLR C ONVERTS CIL (C OMMON INTERM EDIATE LANGUAGE ) TO NATIVE CODE ………………………….. …………………….. 19
FIG. 4– STRUCTURE OF AN HTML P AGE ………………………….. ………………………….. ………………………….. ………………….. 20
FIG. 5– STRUCTURE OF CSS SYNTAX ………………………….. ………………………….. ………………………….. ……………………….. 21
FIG. 6– HTML D OCUMENT IS ENHANCED VISUALLY (CSS) AND FUNCTIONALLY (JS) ………………………….. ………………………… 21
FIG. 7– EXAMPLE OF CODE WITH RAZOR TAGS ………………………….. ………………………….. ………………………….. …………… 24
FIG. 8– MODEL VIEW CONT ROLLER ………………………….. ………………………….. ………………………….. ……………………….. 24
FIG. 9– APPLICATION PROGRAM INTERFACE ………………………….. ………………………….. ………………………….. ……………… 25
FIG. 10– COMMUNICATION BETWEEN DATABASE AND APPLICATION ………………………….. ………………………….. ……………… 27
FIG. 11– DATABASE DIAGRAM ………………………….. ………………………….. ………………………….. ………………………….. …. 29
FIG. 12– USE CASE DIAGRAM ………………………….. ………………………….. ………………………….. ………………………….. ….. 33
FIG. 13– DOMAIN MODEL ………………………….. ………………………….. ………………………….. ………………………….. ……… 35
FIG. 14– THREE -TIER ARCHITECTURE ………………………….. ………………………….. ………………………….. ………………………. 38
FIG. 15– PERFORMANCE OPTIMIZATION ………………………….. ………………………….. ………………………….. …………………… 39
FIG. 16– DATA TIER ………………………….. ………………………….. ………………………….. ………………………….. ……………… 39
FIG. 17– GLIPSE TOOL INTERFACE ………………………….. ………………………….. ………………………….. ………………………….. . 40
FIG. 18– GLIPSE HTTP TOOL INTERFACE ………………………….. ………………………….. ………………………….. ………………….. 40
FIG. 19- GIPSE HOST TOOL INTERFACE ………………………….. ………………………….. ………………………….. …………………….. 40
FIG. 20– CLIENT -TIER PRINCIPLE ………………………….. ………………………….. ………………………….. ………………………….. .. 41
FIG. 21- DTO -JS-CSS-IMAGE PRINCIPLE ………………………….. ………………………….. ………………………….. ………………… 41
FIG. 22– EXAMPLE OF USING BUNDLES ………………………….. ………………………….. ………………………….. ……………………. 41
FIG. 23– EXAMPLE OF USING RENDERS ………………………….. ………………………….. ………………………….. ……………………. 42
FIG. 24– EXAMPLE OF HACKER ATTACK ………………………….. ………………………….. ………………………….. …………………… 43
FIG. 25– EXAMPLE OF USING ANTIFORGERY TOKEN () METHOD ………………………….. ………………………….. …………………….. 44
FIG. 26– EXAMPLE OF USING VALIDATION FORGERY TOKEN ………………………….. ………………………….. …………………………. 44
FIG. 27– APPLICATION HOMEPAGE ………………………….. ………………………….. ………………………….. ………………………… 45
FIG. 28– REGISTRATION FORM ………………………….. ………………………….. ………………………….. ………………………….. …. 46
FIG. 29– AUTHENITICATION FORM ………………………….. ………………………….. ………………………….. …………………………. 46
FIG. 30– APPLICATION – FACEBOOK COMMUNICATION ………………………….. ………………………….. ………………………….. … 47
FIG. 31– GIVE APPLICATION PERMISSION TO FACEBOOK ………………………….. ………………………….. ………………………….. .. 47
FIG. 32– APPLICATION – FACEBOOK COMMUNICATION II ………………………….. ………………………….. ………………………….. 48
FIG. 33– LOGIN FROM ………………………….. ………………………….. ………………………….. ………………………….. …………… 49
FIG. 34– COURSE CATALOG ………………………….. ………………………….. ………………………….. ………………………….. …….. 49
FIG. 35– EXAMPLE OF CODE USING AJAX DATATABLE ………………………….. ………………………….. ………………………….. …… 50
FIG. 36– COURSE DETAILS ………………………….. ………………………….. ………………………….. ………………………….. ………. 51

xi

FIG. 37– QUESTION LIST ………………………….. ………………………….. ………………………….. ………………………….. ………… 51
FIG. 38– STUDENTS LIST ………………………….. ………………………….. ………………………….. ………………………….. ………… 52
FIG. 39– DELETE CONFIRMATION MESSAGE ………………………….. ………………………….. ………………………….. ……………… 52
FIG. 40– EXAMPLE OF CODE WITH BOOTBOX LIBRARY ………………………….. ………………………….. ………………………….. …… 52
FIG. 41– PROFESSOR FORM ………………………….. ………………………….. ………………………….. ………………………….. …….. 53
FIG. 42– SEPARATING ROLES ………………………….. ………………………….. ………………………….. ………………………….. …… 53
FIG. 43– LIST OF PROFESSOR COURSES ………………………….. ………………………….. ………………………….. ……………………. 53
FIG. 44– QUESTION FORM ………………………….. ………………………….. ………………………….. ………………………….. ……… 54
FIG. 45– NOTIFICATION EXAMPLE USING TOASTR PLUGIN ………………………….. ………………………….. ………………………….. . 54
FIG. 46– TEST RESULTS ………………………….. ………………………….. ………………………….. ………………………….. ………….. 55
FIG. 47– SINGLE COURSE VIEW AS STUDENT USER ………………………….. ………………………….. ………………………….. ……… 55
FIG. 48– EXAMPLE OF CODE USING RANDOM () ………………………….. ………………………….. ………………………….. ………….. 56
FIG. 49– TEST FORMAT ………………………….. ………………………….. ………………………….. ………………………….. …………. 56
FIG. 50– SINGLE TEST RESULT ………………………….. ………………………….. ………………………….. ………………………….. ….. 57
FIG. 51 TEST RESULT ………………………….. ………………………….. ………………………….. ………………………….. …………….. 57
FIG. 52– ABOUT PAGE ………………………….. ………………………….. ………………………….. ………………………….. …………… 58
FIG. 53– IMPLEMENTATION OF GOOGLE MAPS API ………………………….. ………………………….. ………………………….. …….. 58

xii

1. INTRODUCTION

1.1 Context

The present project aims to create an e-learning site, a site dedicated to students with purpose
to improving the educational process and raising the level of knowledge .
People who set goals in life and who manage to fulfill them are motivated by certain elements
that help them achieve their long-term goals .
Throughout this project, I have learned new skills and gained new useful knowledge in my
future professional work. Professional progress has been the greatest motivation for me.

1.2 Motivation

I have chosen this project because the traditional learning methods have been replaced with
E-Learning applications. E -Learning stands for Electronic Learning and allows users to take courses
online using electronic device s like computer, tablets or even smartphones. With e -learning , users
can take courses from all around the world, at any time.

E-Learning is a proven and effective way to educate students while tracking their
participation and assessment all at a small fr action of the cost of traditional training.

E-Learning is easy to maintain and update, so the materials are almost always up -to-date.
With the power of e -learning, students can learn at their own pace. For example, when a student sits
on a lecture, he mus t adapt himself to the rhythm of the class. One cannot wait for which some
student does not understand. Also, there is an opportunity to run ahead and skip on points that to
certain people seem clear and to others not.

Learners have the option to select m aterials that meet their level of knowledge and interest.

1.3 Thesis structure

The thesis “E -LEARNING APPLICATION” is divided into 4 major parts, each one containing
their own subsections and also a section named “USER MANUAL”.

The first part , “TECHNO LOGIES AND FRAMEWORKS”, contains the technologies used :
Php, JavaScript, Electron Framework, MySQL , jQuery, Bootstrap , HTML, CSS, Adobe
Dreamweaver, Atom .

xiii

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 browse r only.
A PHP file contains PHP tags and ends with the extension ".php".

JavaScript (often shortened to JS) is a lightweight, interpreted, object -oriented language with
first-class functions, and is best known as the scripting language for Web pages, bu t it's used in many
non-browser environments as well. It is a prototype -based, multi -paradigm scripting language that is
dynamic, and supports object -oriented, imperative, and functional programming styles.
JavaScript runs on the client side of the web, wh ich can be used to design / program how the web pages
behave on the occurrence of an event. JavaScript is an easy to learn and also powerful scripting
language, widely used for controlling web page behaviour.
“Electron is a framework for creating desktop a pplications with all the emerging technologies
including JavaScript, HTML and CSS. Basically, Electron framework takes care of the hard parts so
that you can focus on the core of the application and revolutionize its design.
Designed as an open -source fram ework, Electron combines the best web technologies and is a
cross -platform – meaning that it is easily compatible with Mac, Windows and Linux . It comes with
automatic updates, native menus and notifications as well as crash reporting, debugging and
profili ng.”(Electron Framework)
MySQL is the world's most popular open source database. With its proven performance,
reliability and ease -of-use, MySQL has become the leading database choice for web -based applications,
used by high profile web properties includin g Facebook, Twitter, YouTube, Yahoo! and many more.
Oracle drives MySQL innovation, delivering new capabilities to power next generation web,
cloud, mobile and embedded applications.
14

“Bootstrap is a free and open -source front -end framework for designing websites and web applications.
It provides a variety of design templates like typography, forms, and navigation menus.” (Bootstrap)

HTML or HyperText Markup Language is used to create the structure of web pages while the
layout and style are handled by C SS (Cascading Style Sheets).

Adobe Dreamweaver CC is a popular visual development tool for designing, publishing and
managing websites. It offers a lot of power and flexibility for both designers and developers.
Dreamweaver's many features make it intimid ating for beginners, but Adobe's onboarding experience is
designed to help people new to the program get started. The software's advanced features make it
possible to go from beginning web designer to professional in a short period.

Atom is a free and ope n-source text and source code editor for macOS , Linux , and Microsoft
Windows with support for plug-ins written in Node.js , and embedded Git Control , developed by
GitHub . Atom is a desktop application built using web technologies.
Atom is based on Electron (formerly known as Atom Shell) a framework that enables cross –
platform desktop applications using Chromium and Node.js .

In the third section “DESIGN AND IMPLEMENTATION” there is a description of the
requirements using use -case diagrams, schemas and also, the database structure.

In the fourth section, “WEB SECURITY” there is presented the major web improvements and at
the same time weaknesses from the security point of view. Also, there is a presentation of how this
application is protected from the most c ommon hacker attack.

In the final part, “CONCLUSIONS AND THE FUTURE”, there are presented the problems that
appeared during development and their solutions. Also, there is a section for ideas for features that can
be added to this application.

15

In the last part, there is “USER MANUAL”, that contains the details of navigation on this
website through screenshots and comments.

2. THEORETICAL CONSIDERATIONS

2.1 E-LEARNING PLATFORM

For a very long time reading, writing and learning were considered a pr ivilege of the wealthy.
Then, in the late 1700s, the Prussians decided that everyone deserved an education and introduced an
education model inspired by the Industrial Revolution.
In this model, children were grouped by age and taught certain things each year. They had a
fixed amount of time for one year to absorb a certain amount of information and if there was anything
they did not fully understand, then that was just unfortunate. As the years pass by it becomes obvious
who is academically gifted and wh o are academically challenged.
In 1840, Horace Mann decided to introduce this model to the USA and by 1870 public
education had become fairly commonplace. However, the education system was not uniform; different
states had different standards, different p eriods for academic pursuits and taught different subjects. So,
universities and employers had no idea of what knowledge their new staff or enrollees might have.
Finally, the universities decided that this state of affairs needed to change.
So, in 1892 a committee of 10 led by the president of Harvard was formed in order to
standardize the process. They decided compulsory education should last 12 years when to introduce
certain subjects such as algebra and physics and then primary and secondary schools wit h different
formats should exist.
Although this was extremely forward -thinking for the time, education has remained mostly
unchanged for the past 120 years.
However, in the recent year, the education method has started to extend to new areas and
platform s due to the fact that computer and Internet have given as the opportunity to broaden our
horizons.
“E-learning theory describes the cognitive science principle of effective multimedia learning
using electronic educational technology.” (E -Learning)
16

For learners, E -Learning allows them to directly interact with lessons for an engaging learning
experience. Learners can participate in simulations and games that allow them to apply what they are
learning in real time. They can learn at their own pace and explore in a safe repeatable environment.
On the other hand, for the institution side, E -Learning allows the delivery of consistent course
material that can be accessed on demand anytime and anywhere. Lesson objectives can be tested and
evaluated imp artially to make sure that learners meet passing requirements.
New content can be updated and rolled out institution -wide in one click, allowing companies to
keep their information and training always relevant and up -to-date. Also, E -learning can signific antly
lower overhead costs such as training budgets and travel time and real estate.

Some of the best inspiring E -Learning websites are :

KhanAcademy: “This platform is a non -profit educational organization created in 2006 by
educator Salman Hkan with a goal of creating a set of online tools to help educate students. “ (One man
one computer) .This platform has now gathered over 10 million students and offers online content for
subjects like Math, Science, and engineering, computing, economics, and finan ce. The courses are
available not only in English but also in Spanish, Italian, Chinese, French, etc.
Coursera: “It is an online learning platform founded by Stanford professors Andrew Ng and
Daphne Koller that offers courses, specializations, and degrees . Coursera works with universities and
other organizations to offer online courses, specializations, and degrees in a variety of subjects such as
engineering, humanities, medicine, biology, social science, mathematics, business, computer science,
digital m arketing, data science and others.” (Coursera)

2.2 PHP

A script is a set of programming instructions that is interpreted at runtime.
A scripting language is a language that interprets scripts at runtime. Scripts are usually embedded into
other softwar e environments. The purpose of the scripts is usually to enhance the performance or
perform routine tasks for an application.
17

Server side scripts are interpreted on the server while client side scripts are interpreted by the client
application.
PHP is a server side script that is interpreted on the server while JavaScript is an example of a client
side script that is interpreted by the client browser. Both PHP and JavaScript can be embedded into
HTML pages.
2.2.1 Programming Language v s Scripting Language

Fig 1. Programming Language vs Scripting Language

PHP means – Personal Home Page , but it now stands for the recursive 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.
2.2.2 Php Syntax

Fig 2 . Php Syntax
A PHP file can also contain tags such as HTML and client side scripts such as JavaS cript.
 HTML is an added advantage when learning PHP Language. You can even learn PHP
without knowing HTML but it’s recommended you at least know the basics of HTML.
18

 Database management systems DBMS for database powered applications.
 For more advanced t opics such as interactive applications and web services, you will need
JavaScript and XML .
The flowchart diagram shown below illustrates the basic architecture of a PHP web application
and how the server handles the requests.

Fig 3 . Flowchart – basic ar chitecture php

Reason for using PHP:
 PHP is open source and free.
 Short learning curve compared to other languages such as JSP, ASP etc.
 Large community document
19

 Most web hosting servers support PHP by default unlike other languages such as ASP that ne ed IIS.
This makes PHP a cost effective choice.
 PHP is regular updated to keep abreast with the latest technology trends.
 Other benefit that you get with PHP is that it’s a server side scripting language ; this means you only
need to install it on the serve r and client computers requesting for resources from the server do not
need to have PHP installed; only a web browser would be enough.
 PHP has in built support for working hand in hand with MySQL
 PHP is cross platform – this means you can deploy your appli cation on a number of different
operating systems such as windows, Linux, Mac OS etc.

2.3 JAVA SCRIPT

2.3.1 About JS

Over the past 20 years or so since when JavaScript was released, it has become the most
popular programming language for web development t oday. You can understand the importance of
JavaScript as a web development language from the fact that as per the recent reports, JavaScript is
currently being used by more than 94 percent of all the websites.
JavaScript is a client -side programming langua ge which helps web developer to do Web
Application Development and make dynamic and interactive web pages by implementing custom client –
side scripts. Developers can also use cross -platform runtime engines like Node.js to write server -side
code in JavaScrip t. Developers can also create web pages which works well across various browsers,
platforms, and devices by combi ning JavaScript, HTML5, and CSS .
JavaScript is an interpreted programming language still it simplifies development of complex
web applications by allowing the developers to simplify the application’s composition. The developers
can use JavaScript libraries to create DOM boundaries. This shadow DOM further makes web browsers
deliver documents with widely used HTML tags like select, div and input.
20

Nowadays most developers do responsive web design to make a website accessible and work
well across multiple browsers and devices like smartphones and desktops. Responsive web design
enables the developers to optimize the site for both computers and mob ile devices using the same code.
The developers have to combine the CSS3, HTML5, and JavaScript to make the web pages responsive.
The developers can use JavaScript to optimize web pages for mobile devices.

JavaScript borrows most of its syntax from Java, but is also influenced by Awk, Perl and Python.
JavaScript is case-sensitive and uses the Unicode character set.
In JavaScript, instructions are called statements and are separated by a semicolon (;).
Spaces, tabs and newline characters are called whitesp ace.
The source text of JavaScript script gets scanned from left to right and is converted into a sequence of
input elements which are tokens, control characters, line terminators, comments or whitespace. ECMA
Script also defines certain keywords and lite rals and has rules for automatic insertion of semicolons
(ASI) to end statements. However, it is recommended to always add semicolons to end your statements;
it will avoid side effects.

The syntax of comments is the same as in C++ and in many other languages:

Fig 4 . Comments JS

21

2.3.2 Declarations
There are three kinds of declarations in JavaScript.
Var – Declares a variable, optionally initializing it to a value.

Fig 5.Variable JS – var

Let – Declares a block -scoped, local variable, optionally initializing it to a value.

Fig 6. Variable JS – let

Const – Declares a block -scoped, read -only named constant.

Fig 7. Variable JS – const

Variables :

Variables are used as symbolic names for values in application s. The names of variables, called
identifiers , conform to certain rules.
A JavaScript identifier must start with a letter, underscore (_), or dollar sign ($); subsequent characters
can also be digits (0 -9). Because JavaScript is case sensitive, letters include the characters "A" through
"Z" (uppercase) and the characters "a" through "z" (lowercase).
22

Constants :
The syntax of a constant identifier i s the same as for a variable identifier: it must start with a letter,
underscore or dollar sign ($) and can contain alphabetic, numeric, or underscore characters.
A constant cannot change value through assignment or be re -declared while the script is runni ng. It has
to be initialized to a value.

Fig 8 . Variable JS – const (PI)

2.3.3. Operators

Assignment operator :

An assignment operator assigns a value to its left operand based on the value of its right
operand. The simple assignment operator is equal (=), which assigns the value of its right operand to its
left operand. That is, x = y assigns the value of y to x.

Fig 9.Assignment Operators

23

Comparison operators:

Fig 10. Comparison Operators

Arithmetic operators :
An arithmetic operator takes numerical values (either literals or variables) as their operands and
returns a single numerical value. The standard arithmetic operators are addition ( +), subtraction ( -),
multiplication ( *), and division ( /). These operators work as they do in most other programming
languages when used with floating point numbers (in particular, note that division by zero produces
Infinity ).

24

Fig 11.Arithmetic operators

2.3.4 Cookies

Cookies are most commonly used to track website activity. When you visit some sites, the
server gives you a cookie that acts as your identification car d. Upon each return visit to that site, your
browser passes that cookie back to the server. In this way, a web server can gather information about
which web pages are used the most, and which pages are gathering the most repeat hits.
Cookies are also used for online shopping. Online stores often use cookies that record any
personal information you enter, as well as any items in your electronic shopping cart, so that you don't
need to re -enter this information each time you visit the site.
Servers can use co okies to provide personalized web pages. When you select preferences at a
site that uses this option, the server places the information in a cookie. When you return, the server uses
the information in the cookie to create a customized page for you.
Example s of cookies:
 User Name – The first time the user visits your page must fill in the name. The name is stored in
a cookie. The next time the visitor reaches your page, you can welcome it with a message like
"Welcome ……..!" The name is retrieved from a cookie.
 Password – The first time the user visits your page needs to fill in a password. The password is
stored in a cookie. The next time the visitor reaches the page, the password can be recovered
from a cookie.
25

 Calendar date – The first time the user visits your page, the current date is stored in a cookie.
The next time the user visits your page, you can display a message like "Your last visit was on
………." This date is recovered from a cookie. Creating and storing a cookie In this example, we
create a cookie that stores the name of the visitor and then uses the name stored in the cookie to
display a welcome message. The first time we create a function that stores the visitor's name in
a cookie variable:

Fig 12. Function getCookie

2.4 Electron Framework
Electron is an open source library developed by GitHub for building cross -platform desktop
applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium
and Node.js into a single runtime and apps can be pack aged for Mac, Windows, and Linux.

26

2.4.1 Why Electron?
Electron enables you to create applications with pure JavaScript by providing a runtime with
rich native (operating system) APIs.
This does not mean Electron is a JavaScript binding to graphical us er interface (GUI) libraries.
Instead, Electron uses web pages as its GUI, so you can also see it as a minimal Chromium browser,
controlled by JavaScript. So all the electron apps are technically web pages running in a browser that
can leverage your OS API s
2.4.2 Who Uses Electron?
Github developed Electron for creating the text editor Atom. They were both open sourced in
2014. Electron is used by many companies like Microsoft, Github, Slack, etc.
Electron has been used to create a number of apps. Following are a f ew notable apps −
 Slack desktop
 WordPress desktop app
 Visual Studio Code
 Caret Markdown Editor
 Nylas Email App
 GitKraken git client

2.4.3 How Electron Works
Electron takes a main file defined in your package.json file and executes it. This main file creat es
application windows which contain rendered web pages and interaction with the native GUI (graphical
user interface) of your Operating System.
As you start an application using Electron, a main process is created. This main process is
responsible for int eracting with the native GUI of the Operating System. It creates the GUI of your
application.
Just starting the main process does not give the users of your application any application window.
These are created by the main process in the main file by usin g the BrowserWindow module. Each
browser window then runs its own renderer process . The renderer process takes an HTML file which
references the usual CSS files, JavaScript files, images, etc. and renders it in the window.
27

The main process can access th e native GUI through modules available directly in Electron. The
desktop application can access all Node modules like the file system module for handling files, request
to make HTTP calls, etc.

2.5 My SQL
“A database is a separate application that stores a collection of data. Each database has one or
more distinct APIs for creating, accessing, managing, searching and replicating the data it holds.
Other kinds of data stores can also be used, such as files on the file system or large hash tables
in memory but data fetching and writing would not be so fast and easy with those type of systems.
Nowadays, we use relational database management systems (RDBMS) to store and manage
huge volume of data. This is called relational database because all the data is stor ed into different tables
and relations are established using primary keys or other keys known as Foreign Keys .
 A Relational DataBase Management System (RDBMS) is a software that −
 Enables you to implement a database with tables, columns and indexes.
 Guaran tees the Referential Integrity between rows of various tables.
 Updates the indexes automatically.
 Interprets an SQL query and combines information from various tables. ”
(My Sql)

MySQL Database
MySQL is a fast, easy -to-use RDBMS being used for many small a nd big businesses. MySQL is
developed, marketed and supported by MyS QL AB, which is a Swedish company. MySQL is becoming
so popular because of many good reasons −
 MySQL is released under an open -source license. So you have nothing to pay to use it.
 MySQL is a very powerful program in its own right. It handles a large subse t of the
functionality of the most expensive and powerful database packages.
 MySQL uses a standard form of the well -known SQL data language.
28

 MySQL works on many operating systems and with many languages including PHP, PERL, C,
C++, JAVA, etc.
 MySQL wor ks very quickly and works well even with large data sets.
 MySQL is very friendly to PHP, the most appreciated language for web development.
 MySQL supports large databases, up to 50 million rows or more in a table. The default file size
limit for a table is 4GB, but you can increase this (if your operating system can handle it) to a
theoretical limit of 8 million terabytes (TB).
 MySQL is customizable. The open -source GPL license allows programmers to modify the
MySQL software to fit their own specific enviro nments.

2.5 JQuery
JQuery is a lightweight JavaScript library that simplifies programming with JavaScript.
Web analysis indicates that is the most widely deployed JavaScript library by a large margin.
The use of JQuery has several benefits over the raw J avaScript:
 jQuery is cross -browser
 jQuery is extensible
 JQuery simplifies and has rich AJAX support
 Excellent documentation
JQuery’s syntax is designed to make it quicker and easier to add complex JavaScript interactions to
web pages.
2.5 Bootstrap

“Bootstrap is a free and open -source front -end framework for designing websites and web applications.
It provides a variety of design templates like typography, forms, and navigation menus.”
(Bootstrap)
29

By adding pre -styled bootstrap CSS classes t o HTML it can quickly layout and style the web pages.
Bootstrap makes it easier to set common user interface components like photo carousels and modal
windows.
2.6 HTML, CSS
Hypertext Markup Language (HTML) is the foundation of every webpage.

“It is t he standard markup language for creating web pages and web applications Web
browsers receive HTML documents from a web server or from local storage and render the
documents into multimedia web pages.” (HTML)
With HTML, the developer provides the web browse r with information about how the content
is structured by defining its different parts (like HTML Tags) to tell the browser which parts are
headings, sidebars, footer or main area of the site. One of the goals of HTML is to provide good
semantic markup tha t is: provide information about what kind of content the HTML tag contains:
links, lists items, buttons, paragraphs, checkboxes, radio boxes, etc.

Fig 13. Structure of HTML Page

This not only helps the developer style the website with CSS but search e ngines use this
information to understand the pages and semantic markup helps accessibility tools like screen readers
make more sense about the page content.
“Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation
of a document written in a markup language like HTML.
30

CSS is designed to enable the separation of presentation and content, including layout, colors,
and fonts. This separation can improve content accessibility, provide more flexibility and control in
the sp ecification of presentation characteristics, enable multiple web pages to share formatting by
specifying the relevant CSS in a separate .css file and reduce complexity and repetition in the
structural content. CSS helps the developer create responsive page s.” (Cascading Style Sheets)

Fig. 14 – Structure of CSS syntax

Alongside HTML and CSS, JavaScript is one of the three core technologies of the World Wide Web.
JavaScript enables interactive web pages and this is an essential part of web applications
Generally, front -end developers write JavaScript for the browser using the DOM or document
object model. The document object model is like a representation of the webpage or application that
allows JavaScript and the browser to communicate. Each HTML eleme nt on the web page is
represented by the DOM.
Although there are strong outward similarities between JavaScript and Java, including language
name, syntax and respective standard libraries, the two languages are distinct and differ greatly in
desig n.

Fig. 15– HTML Document is enhanced visually (CSS) and functionally

31

2.6 Adobe Dreamweaver

Adobe Dreamweaver CC is a popular visual development tool for des igning, publishing and
managing websites. It offers a lot of power and flexibility for both designer s and developers.
Dreamweaver's many features make it intimidating for beginners, but Adobe's onboarding experience is
designed to help people new to the program get started. The software's advanced features make it
possible to go from beginning web design er to professional in a short period. Because Dreamweaver is
WYSIWYG (what you see is what you get) software, you can opt to design visually or with code.
Dreamweaver CC is both a WYSIWYG editor and code editor for Windows PCs and Macs.
You can use it to write HTML, CSS, JSP, XML, PHP, JavaScript, and other coding languages. It can
read WordPress, Joomla, and Drupal templates, and it includes a grid system to do grid -based
responsive layouts for three device sizes at once, which is an enormous timesaver fo r developers who
work on sites for desktop, tablet, and cell phone browsers. Dreamweaver offers plenty of tools for
mobile web development including creating native apps for iOS and Android devices. There's no
shortage of things you can do with Dreamweaver .
Before you write code, Dreamweaver encourages users to understand the different design
techniques necessary when displaying content across mobile phones, tablets, and desktop browsers.
Developers who work on websites for both computers and mobile platfor ms can preview their sites on
multiple devices at the same time to see the effects of their page edits in real time.

2.7 ATOM
The GitHub team launched the Atom text editor in 2015 and it has since become one of the most
popular and powerful text editors a vailable to programmers.
Over the years a strong open source community has built countless packages and add -ons for Atom. It is
the first text -editor currently supported at CodeStream (VS Code, JetBrains, and Sublime to be
introduced in the coming months .
2.7.1 Development packages
In order to use a package you're developing locally in Atom before you publish it with APM, you can
link it to Atom using the APM CLI. For instance, from within the package's directory in Terminal or
Bash, use the following comman d:
32

Fig 16 – Command Atom
Linked packages will show up in the Development Packages section in the Packages view.

Fig 16 – Command Linked packages

UI and syntax themes
Atom has themes for both the UI and the code syntax. The syntax themes style how the code looks in
the editor itself, and the UI themes style how the rest of Atom looks (e.g. the tabs and file tree).You can
even make small changes to Atom without creating a complete theme or package.

33

3. Desingn & Implementasion

3.1 Implem entation

The application CodEsay has information about the users and Log In part stored in a SQL database .

The database contains 2 tables that contain the following information:

STUDENT table contain information about user and have the following field s:

 Student_Id : Primary Key Column

An identity column is a column (also known as a field) in a database table that is made up of
values generated by the database. This is much like an AutoNumber field in Microsoft Access or a
sequence in Oracle . Because the concept is so important in database science , many RDBMS systems
implement some type of g enerated key, although each has its own terminology.
An identity column differs from a primary key in that its values are managed by the server
and usually cannot be modified. In m any cases an identity column is used as a primary key; however,
this is not always the case.
It is a common misconception that an identity column will enforce uniqueness; however, this
is not the case. If you want to enforce uniqueness on the column you m ust include the appropriate
constraint too.
In Microsoft SQL Server you have options for both the seed (starting value) and the
increment. By default the seed and increment are both 1.
 Student_name : This field contain the name of user;
 Student_password: This field contain the password introduced by the user;
 Student_email : This field contain the of user and he can log in into her account with
email and password;

Teacher table contain the informations about teachers and have the following fields:
 Teacher_Id
 Teacher_name
 Teacher_password
 Teacher_email

34

The following picture contain the implemented code for create E -learning database:

Fig 18. Database Imp lementation

3.2 Use Case Diagram

A use case diagram at its simplest is a representation of a user's interaction with the system
that shows the relationship between the user and the different use cases in which the user is involved.
A use case diagram ca n identify the different types of users of a system and the different use cases
and will often be accompanied by other types of diagrams as well.
The use cases are represented by either circles or ellipses.

35

Fig 19. Use Case Diagram

CodEsay is a e -learning platform that offer free access for students and teacher to different
information from IT domain, programming languages and new.
Student could access the information by making a free account to view all the courses from
different domains o f programming. The platform offer access to different programming languages –
one of the top programming languages like Java, PHP, Python, C++.
One of the benefit s to making an account on our platform is that users can add comments and
help to the future i mprovement of the articles.
User interested in future news on the platform can subscribe of the news.
Also a page where the user can send messages, ideas, complain is implemented on the
website.

PROFESOR!!!!!!

36

4.Web Security

In the last couple of years, the Browser added more and more features like :
– JavaScript: that now allows pages to execute client -side code,
– Turing complete,
– DOM model: essentially allows JavaScript code to dynamically change the visual appearance of the
page appen ding things like font stylings,
– XML HTTP request are basically a way for JavaScript to asynchronously fetch contents from
servers,
– Web sockets: allow full duplex communication between clients and servers
– Multimedia support: a video tag which allows a web page to play video without using a Flash
application, it can just play that video natively.
– Geolocation : now a web page can determine physically where you are ( for example if someone
enter a web page from a smartphone, the browser can ac cess the GPS unit, or if someone enters a page
on a desktop browser, it can actually look at the WI -FI connection and connect to Google’s Wi -FI
geolocation service to know exactly where that person is located).
The security of this application is provided by a list of prevention items added to the code.

????? Avem ceva web security?????

5.User Manual

5.1 Login form
The first page when access the site is Log In page :

It is a classic login form that contains:
▪ Username
▪ Password
▪ Remember me
▪ Forgot Password
▪ Login button

In the following figure I will give you the reference links for this login form: