Șef lucrări dr. ing. Stefan Udristoiu SEPTEMBRIE 2019 CRAIOVA ii UNIVERSITATEA DIN CRAIOVA FACULTATEA DE AUTOMATICĂ, CALCULATOARE ȘI ELECTRONICĂ… [604782]
i
UNIVERSITATEA DIN CRAIOVA
FACULTATEA DE AUTOMATICĂ, CALCULATOARE ȘI
ELECTRONICĂ
DEPARTAMENTUL DE CALCULATOARE ȘI TEHNOLOGIA
INFORMAȚIEI
LUCRARE DE DI SERTAȚIE
Cirjaliu Alina -Maria
COORDONATOR ȘTIINȚIFIC
Șef lucrări dr. ing. Stefan Udristoiu
SEPTEMBRIE 2019
CRAIOVA
ii
UNIVERSITATEA DIN CRAIOVA
FACULTATEA DE AUTOMATICĂ, CALCULATOARE ȘI
ELECTRONICĂ
DEPARTAMENTUL DE CALCULATOARE ȘI TEHNOLOGIA
INFORMAȚIEI
HOSPITAL MANAGEMENT SYSTEM
Cirjaliu Alina -Maria
COORDONATOR ȘTIINȚIFI C
Șef lucrări dr. ing. Stefan Udristoiu
SEPTEMBRIE 2019
CRAIOVA
iii
„An investment in knowledge pays the best interest .”
Benjamin Franklin
iv
DECLARAȚIE DE ORIGINALITATE
Subsemnatul Cirja liu Alina -Maria , student: [anonimizat], Calculatoare și Electronică a Universit ății din Craiova, certific prin preze nta că am luat la
cunoșt ință de cele prezentate mai jos și că î mi asum, în acest context, originalita tea lucrării mele de
disertație :
cu titlul Hospital Management System,
coordonată de Șef lucrări dr. ing. Stefan Udristoiu ,
prezentată în sesiunea SEPTEMB RIE 2019 .
La elaborarea lucrării de disertație , 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 re ferința precisă,
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 acest or situații neplăcute se recomandă:
plasarea într e 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 preluat 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ătura candidat: [anonimizat] ,
v
UNIVERSITATEA DIN CRAIOVA
Facultatea de Automatică, Calculatoare și Electronică
Departamentul de Calculatoare și Tehnologia Informației
Aprobat la data de
…………………
Șef de departament,
Prof. dr. ing.
Marius BREZOVA N
LUCRARE DE DI SERTAȚIE
Numele și prenumele student: [anonimizat]/ -ei:
Cirjaliu Alina -Maria
Enunțul temei:
Hospital Management System
Datele de pornire:
Promovarea firmelor IT prin adăugare de articole/anunțuri pe
o singură platforma web, accesibilă t uturor studenților A.C.E
Conținutul lucrării :
1. Introduction
2. Web application – Interface presentation
3. Web application – Implementation
4. Conclu sions
5. Bibliogra phy
Material grafic obligatoriu:
Capturi de ecran
Secvențe de cod
Consultații:
Periodic e
Conducătorul științific
(titlul, nume și prenume, semnătura): Șef lucrări dr. ing. Stefan Udristoiu
Data eliberării temei :
01.12.201 8
Termenul estimat de predare a
lucrării :
01.06.2019
Data predării lucrării de către student
și semnătura acestui a:
01.09.2019
vi
UNIVERSITATEA DIN CRAIOVA
Facultatea de Automatică, Calculatoare și Electronică
Departamentul de Calculatoare și Tehnologia Informației
REFERATUL CONDUCĂTORULUI ȘTIINȚIFIC
Numele și prenumele candida tului/ -ei: DABU Adrian -Florin
Specializarea: Information Systems for e -Business
Titlul lucrării : Web Platform Dedicated to Promoting IT Environment to
ACE Students: Front -end
Locația în care s -a realizat practica de
documentare (se bifează una sau mai
multe din opțiunile din dreap ta): În facultate □
În producție □
În cercetare □
Altă locație:
Î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
practică □ Altul
Aparatul matematic utilizat Simplu
□ Mediu
□ Complex
□ Absent
□
Utilitate Contract de
cercetare □ Cercetare
internă □ Utilare
□ Altul
Redactarea lucrării Insuficient
□ Satisfăcător
□ Bine
□ Foarte bin e
□
Partea grafică, desene Insuficient ă
□ Satisfăcătoare
□ Bună
□ Foarte bună
□
Realizarea
practică Contribuția autorului Insuficientă
□ Satisfăcătoare
□ Mare
□ Foarte mare
□
Complexitatea
temei Simplă
□ Medie
□ Mare
□ Complexă
□
Anali za cerințelor Insuficient
□ Satisfăcător
□ Bine
□ Foarte bine
□
Arhitectura Simplă Medie Mare Complexă
vii
□ □ □ □
Întocmirea
specificațiilor
funcționale Insuficientă
□ Satisfăcătoare
□ Bună
□ Foarte bună
□
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 LUCRĂRII
□ RESPINGEREA LUCRĂRII
□
Data, Semnătura conducăt orului științific,
viii
PAPER SUMMARY
This dissertation paper entitled “Hospital Management System ” presents a web application
created for the purpose of uniting available courses, news regarding technologies, training programs,
internship positions as well as available job openings from local It companies as well as companies
from other cities, in a single, easy to acces web platform available for the students of the Automation,
Computer Science and Electronics Faculty of Craiova.
It was decided that the bes t option was to create it as a web application because of how easy
to acces s web applications are, being available on almost every device that can connect to the internet
such as personal computers, laptops, mobile phones and tablets which is a big advanta ge over desktop
applications.
There are 3 type of users with different privileges: admin , companies (a representative that is
posting in t he company’s name) and students and the project consists of two modules:
The web app lication (front -end) where all t ype of users cand enter and access the information
posted by companies as articles and they can comment on those articles to promote interaction
between the companies and the students (for example: a student posting a question in the comments
and then reci eving an answer from a company) . Furthermore, the comments have a scoring system
based on likes and dislikes (thumbs up/down) that changes the order of the comments, pushing the
most appreciated ones to the top and the most disliked ones to the bottom (fo r example, an answer to a
popular question regarding that article can recieve likes and be displayed as a top comment so new
students cand find the answer easier and even without having to post the question beforehand)
The administration panel (back -end) where only the admin and company type of users have
access to. The admin has to approve the creation of new student or company accounts and has full
rights over all application data like manually add ing a student or a company (as opposed to them
registering on their own and waiting for approval from the admin), edit ing information regarding
existent students or companies or simply deleting them if needed and adding, deleting and editing
articles as well. The company can only add and edit or delete existing o wned articles from the
administration panel.
The ideea from which this project started was that A.C.E students should have the possibility
to learn about the opportunities and the options available to them once they graduate from this Faculty
and that the y can get exposed as early as possible to different technologies so they can experiment and
choose a career in their prefered domain.
Termenii cheie : Forum, It, Companies, Technologies, Students, Opportunities .
ix
Table of contents
1 INTRODUCTION ………………………….. ………………………….. ………………………….. ………………………….. ……. 1
1.1 SCOPE ………………………….. ………………………….. ………………………….. ………………………….. …………… 1
1.2 MOTIVATION ………………………….. ………………………….. ………………………….. ………………………….. …… 1
1.3 APPLICATION WORKFLOW ………………………….. ………………………….. ………………………….. ………………….. 1
1.4 USED TECHNOLOGIES ………………………….. ………………………….. ………………………….. ……………………….. 2
1.4.1 PHP ………………………….. ………………………….. ………………………….. ………………………….. …………. 4
1.4.2 MySQL Database ………………………….. ………………………….. ………………………….. ……………………. 6
1.4.3 HTML ………………………….. ………………………….. ………………………….. ………………………….. ………. 7
1.4.4 CSS (Cascading Style Sheets) ………………………….. ………………………….. ………………………….. …….. 9
1.4.5 JavaScript ………………………….. ………………………….. ………………………….. ………………………….. .. 11
1.4.6 jQuery ………………………….. ………………………….. ………………………….. ………………………….. ……. 15
1.5 APPLICATION ARCHITECT URE ………………………….. ………………………….. ………………………….. …………….. 17
2 WEB APPLICATION – INTERFACE PRESENTATI ON………………………….. ………………………….. ………………. 23
2.1 HOME PAGE ………………………….. ………………………….. ………………………….. ………………………….. ….. 23
2.1.1 Register ………………………….. ………………………….. ………………………….. ………………………….. ….. 24
2.1.2 Login Screen for all tipes of users. ………………………….. ………………………….. ………………………… 26
2.1.3 Log out ………………………….. ………………………….. ………………………….. ………………………….. …… 28
2.1.4 Change Password ………………………….. ………………………….. ………………………….. …………………. 28
2.2 THE DASHBOARD PAGE ………………………….. ………………………….. ………………………….. …………………… 29
2.2.1 Dasboard Page functionalityes for the Admin user ………………………….. ………………………….. ….. 30
2.2.2 Dasboard Page Functionality -Doctor user ………………………….. ………………………….. ……………… 34
2.2.3 Dashboard Page Functionality – Patient user ………………………….. ………………………….. …………. 35
3 WEB APPLICATION – IMPLEMENT ATION ………………………….. ………………………….. …………………………. 35
3.1 THE DATABASE ………………………….. ………………………….. ………………………….. ………………………….. … 35
3.2 LOGIN PAGE ………………………….. ………………………….. ………………………….. ………………………….. …… 37
3.2.1 Register ………………………….. ………………………….. ………………………….. ………………………….. ….. 40
3.2.2 Forgot password ………………………….. ………………………….. ………….. Error! Bookmark not defined.
3.2.3 Log out ………………………….. ………………………….. ………………………….. ………………………….. …… 42
3.3 THE MAIN PAGE ………………………….. ………………………….. ………………………….. ………………………….. . 42
3.3.1 The recommended section ………………………….. …………………………. Error! Bookmark not defined.
3.3.2 The categories section ………………………….. ………………………….. ………………………….. …………… 49
3.3.3 The tags se ction ………………………….. ………………………….. ………………………….. ……………………. 50
3.4 ARTICLE PAGE ………………………….. ………………………….. ………………………….. ………………………….. …. 51
x
3.5 COMPANIES PAGE ………………………….. ………………………….. ………………………….. …………………………. 61
4 CONCLUSIONS ………………………….. ………………………….. ………………………….. ………………………….. ……. 63
5 BIBLIOGRAPHY ………………………….. ………………………….. ………………………….. ………………………….. …… 65
A. SOURCE CODE ………………………….. ………………………….. ………………………….. ………………………….. ……. 67
B. CD / DVD ………………………….. ………………………….. ………………………….. ………………………….. …………… 81
xi
LIST OF FIGURES
FIGURE 1 JAVASCRIPT IN BROWSER ………………………….. ………………………….. ………………………….. ……………………. 14
FIGURE 2. THE ROOT COMPONENT ………………………….. ………………………….. ………………………….. …………………….. 17
FIGURE 3. ASSETS DIRECTORY ………………………….. ………………………….. ………………………….. ………………………….. . 19
FIGURE 4. APPLICATION DIRECTORY ………………………….. ………………………….. ………………………….. ……………………. 20
FIGURE 5. VIEWS DIRECTO RY ………………………….. ………………………….. ………………………….. ………………………….. . 21
FIGURE 6. HELPERS DIRECTORY ………………………….. ………………………….. ………………………….. …………………………. 22
FIGURE 7. HOME PAGE ………………………….. ………………………….. ………………………….. ………………………….. …….. 23
FIGURE 8. REGISTER PAGE ………………………….. ………………………….. ………………………….. ………………………….. ….. 24
FIGURE 9. LOGIN SCREEN ………………………….. ………………………….. ………………………….. ………………………….. …… 25
FIGURE 10. DOCTORS LOGIN SCREEN ………………………….. ………………………….. ………………………….. ………………….. 26
FIGURE 11. DOCTOR DASHBORD ………………………….. ………………………….. ………………………….. ………………………. 26
FIGURE 12. ADMIN LOGIN SCREEN ………………………….. ………………………….. ………………………….. …………………….. 27
FIGURE 13. ADMIN DASHBOARD SCREEN ………………………….. ………………………….. ………………………….. ……………… 27
FIGURE 14. LOG OUT ………………………….. ………………………….. ………………………….. ………………………….. ……….. 28
FIGURE 16. ARTICLE COMMENTS TABL E ………………………….. ………………………….. ………………………….. ……………….. 60
FIGURE 17. COMPANY TABLE ………………………….. ………………………….. ………………………….. ………………………….. . 62
xii
LIST OF TABLES
TABLE 1. THE DATABASE ………………………….. ………………………….. ………………………….. ………………………….. ……. 37
TABLE 2. CATEGORIES TABLE ………………………….. ………………………….. ………………………….. ………………………….. .. 50
TABLE 3. TAG TABLE ………………………….. ………………………….. ………………………….. ………………………….. ………… 51
TABLE 4. ARTICLE TABLE ………………………….. ………………………….. ………………………….. ………………………….. ……. 53
TABLE 5. ARTICLE COMMENTS TABL E ………………………….. ………………………….. ………………………….. ………………….. 61
TABLE 6. COMPANY TABLE ………………………….. ………………………….. ………………………….. ………………………….. …. 63
1
1 INTRODU CTION
1.1 Scop e
The scope of this dissertation project is to ease the doctors appoitment procedure. promote
interaction b etween companies and students by having a web platform where as a company you can
post about training programs and internships to better prepare students and introduce them to a
workplace environment so they can become employees , and as a student you a re exposed to different
technologies and you can decide what you want to pursue in the future and, hopefully, start your
career at one of the companies present on the app.
1.2 Motiva tion
Students, especially 1st year students , can be overwhelmed by the ammount of technologies and
option s existing in the It domain. If the faculty helps them decide what technology they like the most
and wish to learn, the only problem remains in finding a company to hire them without previous work
experience . I’ve created this applic ation to address that issue by allowing companies to help students
interested in hiring with training courses and internships until they have the necessary skills to
become valuable employees.
1.3 Application workflow
The Forum A.C.E. Application is divided in to three sections : a management / back -end one and
a presentation / front -end one.
The back -end is accessible to both the administrator and the companies. This does not mean,
however, that the same category of users have the same rights. Administrator, of course, has full
rights over all application data, starting wit h the approval of new companies or students wishing to
join this forum and even deleting articles . On the other hand, companies only have editing / deleting
rights on their own articles.
The fr ont-end is equally accessible to both students and companies. Here, students can view
articles posted by companies based on certain filters (the most recent articles, most popular articles,
articles that are tagged with the same tags or categories as the s tudent originally viewed) . At the same
time, students can add comments on these articles. The comment system is quite complex, with three –
level nested comments (comment => answer => response to the original response) and being featured
with a reviewing fe ature (like / dislikes can be added and, again depending on their number, the
comm ent will climb or drop down to the level they are in.)
2
1.4 Used technologies
In the web domain, there are two great concepts – client and server. The client or web browser
is the terminal where the user receives the information served by the server through a protocol. Most
commonly used is the Hypertext Transfer Protocol (HTTP) protocol.
The application of this dissertation works on both the client a nd the server. Therefore, a series
of main and secondary technologies (somewhat complementing the main features) that run on both
the client and the server have been used.
For the client side, the following technologies are used:
HTML 5 – HTML or Hyper Text Markup Language is the st andard language for displaying
web pages. It is a markup language because it uses bookmarks / tags to store / organize /
display the information to the client / browser. Version 5 is currently the latest language
version, offering far more features for tod ay's technologies .
CSS 3 – CSS or Cascade Style Sheet is the language that handles the design of HTML
elements / tags. The latest version, 3, offers many features compared to the previous
version, most of which are found on the mobile market segment (smart phone / tablet
browsers).
JavaScript – is the standard web scripting language. Scripts produce actions that allow for
better interaction of the user with the website. Like HTML and CSS, JavaScript runs
directly into the browser so all three of these langua ges do not require external libraries /
dependencies.
jQuery – jQuery is one of the most popular client -side JavaScript frameworks. With this
framework, the DOM Objects (Document Object Model) can be manipulated very easily
using the CSS syntax (# for id and class for classes). The version used is 1.11, this being
the most stable at this time.
Bootstrap – Bootstrap i s another framework, but it is for design purposes. Using CSS3 for
design and jQuery for functionalities. It is one of the most popular frame works of its kind
at this time, thanks to well -defined classes, easy -to-use functionalities, and especially for
responsive design (the elements of the web page are folded so that they appear well both on
a resolution computer and mobile resolution – smartp hone or tablet). Both the management
panel and the teaching staff panel are 100% accomplished within this framework. The
source of the administration panel is https://colorlib.com/polygon/elaadmin/index.html and
3
the front end is https://www.themeineed.com/ downloads/bravana -lite-free-bootstrap –
business -template
Other JavaScript plugins: jQuery nicescroll, jQuery timepicker, select2, jQuery
metisMenu, jQuery slimscroll, screenfull + related CSS files. These plug -ins are related to
the design of certain eleme nts and a better user experience on the site.
For the server side, the following technologies were used:
PHP – PHP: Hypertext Preprocessor is one of the most popular / popular scripting
languages on the server in the world. Why? Because it is open -source (anyone can
contribute to its development) so it's free, it has a very large and active community, it runs
directly on the server and its download and installation is very fast. This language is the
primary rival of scripting language on ASP.net (Micros oft).
MySQL has been used as the DBMS (Database Management System). It is the most popular
open -source relational database DBMS, currently available.
To work with PHP and MySQL, the XAMPP environment (Apache + Maria DB + PHP + Perl)
was installed. This is a popular platform for developing a project in the Windows operating system, a
project that uses PHP and MySQL. Practically, using this deployment environment, an offline server
is configured on its own computer with Apache (the most popular / used open s ource HTTP server in
the world). At the same time, PHP, MySQL and a database management system called PHPMyAdmin
are also installed in this environment. This platform allows us to create and run a web application that
uses PHP and MySQL.
As an integrate d software development environment, PhpStorm was used. This is a very
powerful IDE on PHP but also on the other client -side technologies mentioned above.
Google Chrome (together with Developer Tools) and Mozilla Firefox (along with Firebug)
have been used to test the app.
4
1.4.1 PHP
PHP (Hypertext Preprocessor) started out as a small open source project that evolved as more and
more people found out how useful it was. Rasmus Lerdorf unleashed the first version of PHP way
back in 1994.
PHP is a server side scr ipting language that is embedded in HTML. It is used to manage dynamic
content, databases, session tracking, even build entire e -commerce sites.
It is integrated with a number of popular databases, including MySQL, PostgreSQL, Oracle, Sybase,
Informix, and Microsoft SQL Server.
PHP is pleasingly zippy in its execution, especially when compiled as an Apache module on the Unix
side. The MySQL server, once started, executes even very complex queries with huge result sets in
record -setting time.
PHP supports a large number of major protocols such as POP3, IMAP, and LDAP. PHP4 added
support for Java and distributed object architectures (COM and CORBA), making n -tier development
a possibility for the first time.
Common uses of PHP
PHP performs system functions, fr om files on a system it can create, open, read, write, and close
them.
PHP can handle forms, gather data from files, save data to a file, through email you can send data,
return data to the user.
You add, delete and modify elements within your database thr ough PHP.
Access coo kies variables and set cookies.
Using PHP, you can restrict users to acc ess some pages of your website.
It can encrypt data.
Characteristics of PHP
Five important characteristics make P HP's practical nature possible :
Simplicity
Efficie ncy
Security
Flexibility
5
Familiarity
"Hello World" Script in PHP
To get a feel for PHP, first start with simple PHP scripts. Since "Hello, World!" is an essential
example, first we will create a friendly little "Hello, World!" script.
As mentioned earlier, PHP is embedded in HTML. That means that in amongst your normal HTML
(or XHTML if you're cutting -edge) you'll have PHP statements like this –
<html>
<head>
<title>Hello World </title>
</head>
<body>
<?php echo "Hello, World!" ;?>
</body>
</html>
It returns the following result −
Hello, World!
If you examine the HTML output of the above example, you'll notice that the PHP code is not present
in the file sent from the server to your Web browser. All of the PHP present in the Web page is
processed and stripped from the page; the only thing returned to the client from the Web server is pure
HTML output.
All PHP code must be included inside one of the three special markup tags ATE are recognised by the
PHP Parser.
<?php PHP code goes here ?>
<? PHP code goes here ?>
<script language = "php"> PHP code goes here </script>
6
1.4.2 MySQL Database
MySQL is an Oracle -backed open source relational database management system (RDBMS) based on
Structured Query Language (SQL). MySQL runs on virtually all platforms, including Linux, UNIX
and Wi ndows. Although it can be used in a wide range of applications, MySQL is most often
associated with web applications and online publishing.
MySQL is an important component of an open source enterprise stack called LAMP. LAMP is a web
development platform t hat uses Linux as the operating system, Apache as the web server, MySQL as
the relational database management system and PHP as the object -oriented scripting language.
(Sometimes Perl or Python is used instead of PHP.)
Today, MySQL is the RDBMS behind many of the top websites in the world and countless corporate
and consumer -facing web -based applications, including Facebook, Twitter and YouTube.
How MySQL works
MySQL is based on a client -server model. The core of MySQL is MySQL server, which handles all of
the database instructions (or commands). MySQL server is available as a separate program for use in
a client -server networked environment and as a library that can be embedded (or linked) into seperate
applications.
MySQL operates along with several utilit y programs which support the administration of MySQL
databases. Commands are sent to MySQLServer via the MySQL client, which is installed on a
computer.
MySQL was originally developed to handle large databases quickly. Although MySQL is typically
installed on only one machine, it is able to send the database to multiple locations, as users are able to
access it via different MySQL client interfaces. These interfaces send SQL statements to the server
and then display the results.
Core MySQL features
MySQL en ables data to be stored and accessed across multiple storage engines, including InnoDB,
CSV, and NDB. MySQL is also capable of replicating data and partitioning tables for better
performance and durability. MySQL users aren't required to learn new commands ; they can access
their data using standard SQL commands.
MySQL is written in C and C++ and accessible and available across over 20 platforms, including
Mac, Windows, Linux and Unix. The RDBMS supports large databases with millions records and
7
supports man y data types including signed or unsigned integers 1, 2, 3, 4, and 8 bytes long; FLOAT;
DOUBLE; CHAR; VARCHAR; BINARY; VARBINARY; TEXT; BLOB; DATE; TIME;
DATETIME; TIMESTAMP; YEAR; SET; ENUM; and OpenGIS spatial types. Fixed – and variable –
length string typ es are also supported.
For security, MySQL uses an access privilege and encrypted password system that enables host -based
verification. MySQL clients can connect to MySQL Server using several protocols, including TCP/IP
sockets on any platform. MySQL also supports a number of client and utility programs, command –
line programs and administration tools such as MySQL Workbench.
Compatibility with other services
MySQL was designed to be compatible with other systems. It supports deployment in virtualized
enviro nments, such as Amazon RDS for MySQL, Amazon RDS for MariaDB and Amazon Aurora for
MySQL. Users can transfer their data to a SQL Server database by using database migration tools like
AWS Schema Conversion Tool and the AWS Database Migration Service.
1.4.3 HTML
HTML was first created by Tim Berners -Lee, Robert Cailliau, and others starting in 1989. It stands
for Hyper Text Markup Languag e.
Hypertext means that the document contains links that allow the reader to jump to other places in the
document or to another document altogether. The la test version is known as HTML5.
A Markup Language is a way that computers speak to each other to control how text is processed and
presented. To do this HTML uses t wo things: tags and attributes.
What are Tags and Attributes?
Tags and attributes are the basis of HTML.
They work together but perform different functions – it is worth investing 2 minutes in differentiating
the two.
What Are HTML Tags?
8
Tags are used to mark up the start of an HTML element and they are usually enclo sed in angle
brackets. An example of a tag is: <h1>.
Most tags must be opened <h1> and closed </h1> in order to function.
What are HTML Attributes?
Attributes contain additional pieces of information. Attributes take the form of an opening tag and
addition al info is placed inside.
An example of an attribute is:
<img src="mydog .jpg" alt="A photo of my dog.">
In this instance, the image source (src) and the alt text (alt) are attributes of the <img> tag.
Golden Rules To Remember
The vast majority of tags must be opened (<tag>) and closed (</tag>) with the element information
such as a title or text resting between the tags.
When using multiple tags, the tags must be closed in the order in which they were opened. For
example:
<strong><em>This is really importa nt!</em></strong>
HTML Editors
Now that we’ve gotten the basic theory out of the way. It’s time to learn how to build our first
website.
First off, we must ensure that we have the right tools. Most important, we need an HTML editor.
9
1.4.4 CSS ( Cascading St yle Sheets )
CSS stands for Cascading Style Sheets with an emphasis placed on “Style.” While HTML is used to
structure a web document (defining things like headlines and paragraphs, and allowing you to embed
images, video, and other media), CSS comes throug h and specifies your document’s style —page
layouts, colors, and fonts are all determined with CSS. Think of HTML as the foundation (every
house has one), and CSS as the aesthetic choices (there’s a big difference between a Victorian
mansion and a mid -centu ry modern home).
How Does CSS Work?
CSS brings style to your web pages by interacting with HTML elements. Elements are the individual
HTML components of a web page —for instance a paragraph —which in HTML might look like this:
<p>This is my paragraph!</p>
If you wanted to make this paragraph appear pink and bold to people viewing your web page through
a web browser, you’d use CSS code that looks like this:
p { color:pink; font-weight:bold; }
In this case, “p” (the paragraph) is called the “selector” —it’s the part of CSS code specifying which
HTML element the CSS styling will effect. In CSS, the selector is written to the left of the first curly
bracket. The information between curly brackets is called a declaration, and it contains properties and
values that are applied to the selector. Properties are things like font size, color, and margins, while
values are the settings for those properties. In the example above, “color” and “font -weight” are both
properties, and “pink” and “bold” are values. The full bracketed set of
{ color:pink; font-weight:bold; }
is the declaration, and again, “p” (meaning the HTML paragraph) is the selector. These same basic
principles can be applied to change font sizes, background colors, margin indentations, and more. For
instance. . .
body { background -color:lightblue; }
10
. . .would make your page’s background light blue, or. . .
p { font-size:20px; color:red; }
. . .will create a 20 point font paragraph with red letters.
External, Internal, or Inline CSS?
You migh t be wondering how this CSS code is actually applied to HTML content, though. Much like
HTML, CSS is written in simple, plain text through a text editor or word processor on your computer,
and there are three main ways to add that CSS code to your HTML pag es. CSS code (or Style Sheets)
can be external, internal, or inline. External style sheets are saved as .css files and can be used to
determine the appearance of an entire website through one file (rather than adding individual
instances of CSS code to eve ry HTML element you want to adjust). In order to use an external style
sheet, your .html files need to include a header section that links to the external style sheet and looks
something like this:
<head>
<link rel=”stylesheet” type=”text/css” href=mysit estyle.css”>
</head>
This will link the .html file to your external style sheet (in this case, mysitestyle.css), and all of the
CSS instructions in that file will then apply to your linked .html pages.
Internal style sheets are CSS instructions written d irectly into the header of a specific .html page.
(This is especially useful if you have a single page on a site that has a unique look.) An internal style
sheet looks something like this. . .
<head>
<style>
Body { background -color:thistle; }
P { font-size:20px; color:mediumblue; }
</style>
</head>
. . . a thistle background color and paragraphs with 20 point, medium blue font will now be applied to
this single .html page.
11
Finally, inline styles are snippets of CSS written directly into HTML code, and applicable only to a
single coding instance. For example:
<h1 style=”font -size:40px;color:violet;”>Check out this headline!</h1>
would cause one specific headline on a single .html page to appear in violet, 40 point font.
Generally speaking, external style sheets are the most efficient method for implementing CSS on a
website (it’s easier to keep track of and implement a site’s style from a dedicated CSS file), while
internal style sheets and inline style can be used on a case by case basis when indiv idual style changes
need to be made.
So if HTML is the foundation, frames, walls, and girders supporting your website, consider CSS the
paint color, window styles, and landscaping that comes on afterward. You can’t get anywhere without
putting that foundat ion up first, but —once you do —you’ll want to follow up with some style, and
CSS is the ticket to unleashing your inner decorator.
1.4.5 JavaScript
JavaScript was initially created to “make web pages alive”.
The programs in this language are called scripts. The y can be written right in a web page’s HTML and
run automatically as the page loads.
Scripts are provided and executed as plain text. They don’t need special preparation or compilation to
run.
In this aspect, JavaScript is very different from another langu age called Java.
Why JavaScript?
12
When JavaScript was created, it initially had another name: “LiveScript”. But Java was very popular
at that time, so it was decided that positioning a new language as a “younger brother” of Java would
help.
But as it evolv ed, JavaScript became a fully independent language with its own specification called
ECMAScript, and now it has no relation to Java at all.
Today, JavaScript can execute not only in the browser, but also on the server, or actually on any
device that has a special program called the JavaScript engine.
The browser has an embedded engine sometimes called a “JavaScript virtual machine”.
Different engines have different “codenames”. For example:
V8 – in Chrome and Opera.
SpiderMonkey – in Firefox.
…There are oth er codenames like “Trident” and “Chakra” for different versions of IE, “ChakraCore”
for Microsoft Edge, “Nitro” and “SquirrelFish” for Safari, etc.
The terms above are good to remember because they are used in developer articles on the internet.
We’ll use them too. For instance, if “a feature X is supported by V8”, then it prob ably works in
Chrome and Opera.
How do engines work?
Engines are complicated. But the basics are easy.
The engine (embedded if it’s a browser) reads (“parses”) the script.
Then it con verts (“compiles”) the script to the machine language.
And then the machine code runs, pretty fast.
The engine applies optimizations at each step of the process. It even watches the compiled script as it
runs, analyzes the data that flows through it, and a pplies optimizations to the machine code based on
that knowledge. When it’s done, scripts run quite fast.
What can in -browser JavaScript do?
13
Modern JavaScript is a “safe” programming language. It does not provide low -level access to memory
or CPU, becaus e it was initially created for browsers which do not require it.
JavaScript’s capabilities greatly depend on the environment it’s running in. For instance, Node.js
supports functions that allow JavaScript to read/write arbitrary files, perform network requ ests, etc.
In-browser JavaScript can do everything related to webpage manipulation, interaction with the user,
and the webserver.
For instance, in -browser JavaScript is able to:
Add new HTML to the page, change the existing content, modify styles.
React to user actions, run on mouse clicks, pointer movements, key presses.
Send requests over the network to remote servers, download and upload files (so -called
AJAX and COMET technologies).
Get and set cookies, ask questions to the visitor, show messages.
Remem ber the data on the client -side (“local storage”).
What CAN’T in -browser JavaScript do?
JavaScript’s abilities in the browser are limited for the sake of the user’s safety. The aim is to prevent
an evil webpage from accessing private informat ion or harming the user’s data.
Examples of such restrictions include:
JavaScript on a webpage may not read/write arbitrary files on the hard disk, copy them or execute
programs. It has no direct access to OS system functions.
Modern browsers allow it to work with files , but the access is limited and only provided if the user
does certain actions, like “dropping” a file into a browser window or selecting it via an <input> tag.
There are ways to interact with camera/microphone and other devices, but they require a user’s
explicit permission. So a JavaScript -enabled page may not sneakily enable a web -camera, observe the
surroundings and send the information to the NSA.
Different tabs/windows generally do not know about each other. Sometimes they do, for example
when one win dow uses JavaScript to open the other one. But even in this case, JavaScript from one
page may not access the other if they come from different sites (from a different domain, protocol or
port).
This is called the “Same Origin Policy”. To work around that, both pages must agree for data
exchange and contain a special JavaScript code that handles it. We’ll cover that in the tutorial.
This limitation is, again, for the user’s safety. A page from http://anysite.com which a user has opened
must not be able to a ccess another browser tab with the URL http://gmail.com and steal information
from there.
14
JavaScript can easily communicate over the net to the server where the current page came from. But
its ability to receive data from other sites/domains is crippled. T hough possible, it requires explicit
agreement (expressed in HTTP headers) from the remote side. Once again, that’s a safety limitation.
Figure 1 JavaScript In Browser
What makes JavaScript unique?
There are at least three gre at things about JavaScript:
Full integration with HTML/CSS.
Simple things are done simply.
Support by all major browsers and enabled by default.
JavaScript is the only browser technology that combines these three things.
That’s what makes JavaScript unique . That’s why it’s the most widespread tool for creating browser
interfaces.
That said, JavaScript also allows to create servers, mobile applications, etc.
Languages “over” JavaScript
The syntax of JavaScript does not suit everyone’s needs. Different people want different features.
That’s to be expected, because projects and requirements are different for everyone.
15
So recently a plethora of new languages appeared, which are transpiled (converted) to JavaScript
before they run in the browser.
Modern tools mak e the transpilation very fast and transparent, actually allowing developers to code in
another language and auto -converting it “under the hood”.
Examples of such languages:
CoffeeScript is a “syntactic sugar” for JavaScript. It introduces shorter syntax, a llowing us to write
clearer and more precise code. Usually, Ruby devs like it.
TypeScript is concentrated on adding “strict data typing” to simplify the development and support of
complex systems. It is developed by Microsoft.
Flow also adds data typing, b ut in a different way. Developed by Facebook.
Dart is a standalone language that has its own engine that runs in non -browser environments (like
mobile apps), but also can be transpiled to JavaScript. Developed by Google.
There are more. Of course, even if we use one of transpiled languages, we should also know
JavaScript to really understand what we’re doing.
Summary
JavaScript was initially created as a browser -only language, but is now used in many other
environments as well.
Today, JavaScript has a uniq ue position as the most widely -adopted browser language with full
integration with HTML/CSS.
There are many languages that get “transpiled” to JavaScript and provide certain features. It is
recommended to take a look at them, at least briefly, after master ing JavaScript.
1.4.6 jQuery
jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice
motto: Write less, do more . jQuery simplifies HTML document traversing, event handling,
animating, and Ajax interactions for rapid web develop ment. jQuery is a JavaScript toolkit designed
to simplify various tasks by writing less cod e. Here is the list of important core features supported by
jQuery −
DOM manipulation − The jQuery made it easy to select DOM elements, negotiate them and
modifying their content by using cross -browser open source selector engine called Sizzle .
Event handl ing − The jQuery offers an elegant way to capture a wide variety of events, such
as a user clicking on a link, without the need to clutter the HTML code itself with event
handlers.
AJAX Support − The jQuery helps you a lot to develop a responsive and featu rerich site
using AJAX technology.
Animations − The jQuery comes with plenty of built -in animation effects which you can use
in your websites.
16
Lightweight − The jQuery is very lightweight library – about 19KB in size (Minified and
gzipped).
Cross Browser S upport − The jQuery has cross -browser support, and works well in IE 6.0+,
FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+
Latest Technology − The jQuery supports CSS3 selectors and basic XPath syntax.
How to use jQuery?
Local Installation − You can download j Query library on your local machine and include it
in your HTML code.
CDN Based Version − You can include jQuery library into your HTML code directly from
Content Delivery Network (CDN).
Local Instalation
In order to install jQuery on the local computer, t he user have to access the following link
https://jquery.com/download/ in order to download the latest version available.
After downloading the .js file the user has to move the .js file in the webs ite directoy
Now the user can include jquery library in the HTML file as follows −
<html>
<head>
<title>The jQuery Example </title>
<script type = "text/javascript" src = "/jquery/jquery –
2.1.3.min.js" >
</script>
<script type = "text/javascript" >
$(document ).ready(function () {
document .write("Hello, World!" );
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
This will produce following result –
Hello, World!
17
1.5 Application architecture
The application uses MVC (Model View C ontroller) as the programming style. MVC is a model
/ type of architecture used in software engineering. It is used very often in production, this being
somewhat the standard for web programming but also standalone. The most popular PHP frameworks
(Symfony , Laravel, Zend, PHP Cake etc.) use it but not only.
This type of code approach enjoys this success due to the isolation of the main logic (database
interactio n, more complex operations) from the user interface, and the data from it is processed to
anothe r level. So each of these three levels has a well established role. Generally, the view takes the
user information and sends it to the controller. It delivers it to the model, which processes it and
resubmits to the controller the final processed informati on. The latter delivers it to the viewer / user.
This logic separates by level, the controller being the one delivering in the two parts while the model
never communicates with the view.
The following figures will illustrate the composition of the root / m ain directory and related
subdirectories.
Figure 2. The root component
18
Code Igniter has, as can be seen above, a fairly simple structure. At the root level, it has
index.php (the application startup file that loads all of the r equired files for the project) along with
some other files that include composer.json (here are the external dependencies of the framework that
are brought by Composer the most popular dependency manager for PHP) and .htaccess (a
configuration file on Apac he-running servers, at the root level, various server -specific settings can be
modified in this file).
In addition to index.php, CI (CodeIgniter) also has 3 directories (application, system,
user_guide). The application develops a new application, while th e system contains the files that make
up the core CI; (so the developer of the new application only works inside the application directory –
Figure 3). user_guide, as we know from the name, contains a user guide for the developer of the new
application. as sets, on the other hand, is a directory created by myself that contains the client / front
endings that the application needs to work (JavaScript, CSS, images, fonts – Figure 2).
19
Figure 3. Assets directory
In the application dire ctory, you find the entire code for this application. It is divided into several
subfolders, each of which has a certain importance in the economy of the entire application (Figure 3).
20
Figure 4. Application directory
The directo ries that interested me in writing the application are: controllers, models, views,
config, helpers, third_party.
As mentioned above, the architecture / design pattern of the application is MVC. But, like all
MVCs, this is also a custom one. Custom in the idea that the relationship between the three
components is not 1: 1: 1. I decided not to go on the idea of 1: 1: 1 because the application is quite
small and because much logic used on back -end is applied on the front end and vice versa. And if I
went to a controller for a model for a view, it would invariably result in a lot of duplicate code, the
DRY (Do not Repeat Yourself) principle, one of the most important programming, no longer
respected. Moreover, some controllers, due to their increased complexi ty, have several views. This
structure can be seen in Figure 4
21
Figure 5. Views directory
22
The other folders, config, helpers, third_party are folders containing either project configurations
(config contains the routes.php – the p lace where the application's routes are defined for both admin
and front and database.php – the place where they are defined credentials for database access) but also
non-project -specific functions / plugins / classes that have a specific purpose (PHPMaile r – the PHP –
special class for sending mail via SMTP – Simple Mail Transfer Protocol, Editor Editor – sdk /
external library that integrates the Frola editor with the application's server side). These guidelines can
be seen in Figure 5.
Figure 6. Helpers directory
23
2 WEB APPLICATION – INTERFACE PRESENTATI ON
În this section I will present the interface of each page and its sections as well as their
functionalities.
2.1 Home Page
Figure 7. Home Page
When first accessing the website via any link, if the user has not previously logged in, he/she
will be prompted to the home page.
From this page the user can make several actions. He/ she can click on the „Contact” button, or, the
user can login or register an acco unt.
The web application has three diferent types of users.
The Admin user, this user can add docto rs specialityes, add doctors to the webb application, can
manage doctors, appoiments, pacients. He/she can view the doctors and patiens session logs, and the
history of the appoiments.
24
The type of users Doctors can login with an existing account.
And the users patients that can login with an existing account or they can regi ster and create a new
account.
2.1.1 Register
If the user “Patients” does not have an accou nt, he/she can click on the register button “ Register
& Book Appointment ” and will be redirected to the following screen .
Figure 8. Register page
At the “Patient registration ” screen, the user has to ins ert a first name, last na me, a valid
address , the current City, the Gender (Male or Female), a valid email address, a password, the
reconfirm the password, and also the user has to check a checkbox that he/she give us the permission
25
to create the account. Then the user has to clic k on the button “Submit”. After submitting the
registration formular, the user can observe a pop up window browser with the following message
“Successfully Registered. You can login now ”. And the user will be redirected to the Login screen.
Figure 9. Login Screen
26
2.1.2 Login Screen for all tipes of users.
This web application was developed in order to facilitate the doctor’s appoiments.
The type of users, “Doctors” cannot create an account by themselves. The Admin user has th e role to
add an account for the doctor. After the admin user crates the account for the user type doctor. The
doctor can login in the application.
Figure 10. Doctors Login Screen
Here, the user type doctor asked to insert the username used when the account was created
and the password that was given in order to login.
After the Login the user is redirected to the Doctor/ Dasboard
Figure 11. Doctor Dashbord
After the user insets the email address he/sh e will be redirect to the login page and a
notification will appear on screen saying that the email with instructions to reset the password has
been sent .
27
The Admin type user can login into the web application with an username and password, that
was given when the application was developed.
Figure 12. Admin Login screen
After the Admin user completes the required fields with the username and password, he will
be redirected to the Admin Dashboard screen.
Figure 13. Admin Dashboard screen
28
2.1.3 Log out
The log out button is included in the menu which appears on every page so the user can log out
at any given time by clicking it and then be redirected to the login screen.
Figure 14. Log out
2.1.4 Change Password
The “Change Password” button is included in the menu which appears on every page so the
user can change is password when he/she wants at any given time by clicking it and then the user will
be redirected to the change pas sword screen.
29
Figure 18. Change Password
On the “Change Password” screen the user have to write the old password, the new password
and the reconfirm the new password. After the fields are completed the user have to click the
“Submit” button .
2.2 The Dashb oard Page
After a successful login, the user will be redirected to the dasboard page. The Dasboard page is
differnet for the user accouns.
From the Dasboard page the different types of users can make different operations such as,
book an appoiment.
Update the user profile, cancel or approve an appoiment etc.. Since the dashboard page has
different functionalityes for all three users types, we will describe each dashboard page for each type
of users in the next chapters.
30
Figure 19. Main page: Dashboard p age
2.2.1 Dasboard Page functionalityes for the Admin user
The Admin Dashboard is the more complex, because the Admin user is the mos empowered user that
has all the permisions, to add, delete, approwe and cancel all the actions from the web application.
This is how the Admin Dashboard looks, and now we will describe each action that the Admin user
can make in the web application.
Figure 20. Dashboard page – admin user
In the left menu we can observe 6 menu Items: “Dasboard”, “Doctors” drop down list, “Patien ts” –
drop down list,” Appoiment History”, “Doctors session logs” and “User session logs”.
31
Figure 21 Left Menu – Admin
The “Doctors” menu item – is a drop down list that has three sub -pages: “Doctor Specialization”,
“Add Doctors” and “Manage Doctors”.
Figure 22 – Doctors drop down list
If the Admin users clicks on the “Doctor Specialization” menu Item, it will be redirected to the Doctor
specialization Screen. From this screen the Admin can add a new doctor specialization, update an
existing doctor spe cialization or delete/remove an existing one.
32
Figure 23 – Doctor Specialization
Add doctors – menu item. If the Admin user click on the add doctors menu item it will be redirected
to the Add a doctor screen. From here the Admin user can Add a doctor, li nk the added doctor to a n
existing specialization , add doctorsfirst and last name, contact information, doctors email and set up a
password for the new added user account.
Figure 24 – Add a doctor
33
From the Manage Doctors menu item the admin user can, update the existing user accounts, or it can
delete existing user accounts.
Figure 25 – Manage Doctors
From the “Manage Patiens” menu item the Admin user can vew all the existing patients that have
registered on the web application, and the admin user can remove/ delete the existing accounts.
Figure 26 – Manage Patients
34
2.2.2 Dasboard Page Functionality -Doctor user
This is how the Doctors Dashboard looks, and now we will describe each action that the Doctors user
can make in the web application.
Figure 27 – Doctors Dashboard
The doctor user can click on the Appoiment History and a list of the appoiments it will be displayed.
Here the doctor can cancel an active appoiment.
Figure 28 – Appoiment History
35
2.2.3 Dashboard Page Functionality – Patient us er
After the Patient user is logged in, the user can see the Dasboard screen. From here the patient user
can book an appoiment, select a doctor specialization, select an avalabile doctor, select a date and a
hour. Also the patient user can see the cost of the consultation.
Figure 29 – Patient Dashboard
3 WEB APPLICATION – IMPLEMENTATION
In this section I will present how each page was implemented and explain the functionalities
alongside important snippets of code.
3.1 The database
The database is administr ated through phpMyAdmin which is a database management system
installed in the XAMPP environment. This system allows us to create and run a web application that
uses PHP and MySQL. The database has the following tables:
36
Figure 30. The database
Figure 31 – Database Design
37
Following is a list of the tables in the database alongside a description of each one:
Table name Description
Admin The main table where we store articles and
information about them.
appointment The table where we assign articles to specific
categories .
doctors The table where we store comments and
information about them .
doctorslog The table where we manage the thumbs up or
downs of each comment .
doctorspecialization The table where we assign tags to articles .
users The tabl e where we track how many views an
article gets.
userlog The table with the hardcoded admin user.
Table 1. The database
3.2 Login page
As stated at in the 2.1 section of this paper, every user must first login before gaining access to
the web application.
When the user inputs data in both the email form and the password form and it is validated, the
form will close and the user wi ll be redirected to the „Dashboard ” page (the main page). The login
page php code for the two forms (ema il and password) from the user-login .php file is:
<body class="login" >
<div class="row">
<div class="main-login col -xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2
col-md-4 col-md-offset-4">
<div class="logo margin -top-30">
<h2> HMS | Patient Login </h2>
38
</div>
<div class="box-login">
<form class="form-login" method="post">
<fieldset>
<legend>
Sign in to your account
</legend>
<p>
Please enter your name and password to log in. <br />
<span style="color:red;"><?php echo $_SESSION ['errmsg' ];
?><?php echo $_SESSION ['errmsg' ]="";?></span>
</p>
<div class="form-group">
<span class="input-icon">
<input type="text" class="form-control" name="username"
placeholder ="Username" >
<i class="fa fa-user"></i> </span>
</div>
<div class="form-group form -actions" >
<span class="input-icon">
<input type="password" class="form-control password"
name="password" placeholder ="Password" >
<i class="fa fa-lock"></i>
</span>
</div>
<div class="form-actions" >
<button type="submit" class="btn btn -primary pull -right"
name="submit" >
Login <i class="fa fa-arrow-circle-right"></i>
</button>
</div>
<div class="new-account" >
Don't have an account yet?
<a href="registration.php" >
Create an account
</a>
</div>
</fieldset>
</form>
<div class="copyright" >
© <span class="current -year"></span><span class="text-bold
text-uppercase" > HMS</span>. <span>All rights reserved </span>
</div>
</div>
</div>
</div>
The session and vali dation rules are in the user-login .php file:
39
<?php
session_start() ;
error_reporting( 0);
include("include/con fig.php" );
if(isset($_POST['submit' ]))
{
$ret=mysql_query( "SELECT * FROM users WHERE email='" .$_POST['username' ]."' and
password='" .md5($_POST['password' ])."'");
$num=mysql_fetch_array( $ret);
if($num>0)
{
$extra="dashboard.php" ;//
$_SESSION ['login']=$_POST['username' ];
$_SESSION ['id']=$num['id'];
$host=$_SERVER ['HTTP_HOST' ];
$uip=$_SERVER ['REMOTE_ADDR' ];
$status=1;
$log=mysql_query( "insert into userlog(uid,username,userip,status)
values('" .$_SESSION ['id']."','".$_SESSION ['login']."','$uip','$status')");
$uri=rtrim(dirname( $_SERVER ['PHP_SELF' ]),'/\\');
header("location:http:// $host$uri /$extra");
exit();
}
else
{
$_SESSION ['login']=$_POST['username' ];
$uip=$_SERVER ['REMOTE_ADDR' ];
$status=0;
mysql_query( "insert into userlog(username,userip,status)
values('" .$_SESSION ['login']."','$uip','$status')");
$_SESSION ['errmsg' ]="Invalid username or password" ;
$extra="user-login.php" ;
$host = $_SERVER ['HTTP_HOST' ];
$uri = rtrim(dirname( $_SERVER ['PHP_SELF' ]),'/\\');
header("location:http:// $host$uri /$extra");
exit();
}
}
?>
The check login is located in the check -login.php and the code that verify the session id is:
<?php
function check_login ()
{
if(strlen( $_SESSION ['login'])==0)
{
$host = $_SERVER ['HTTP_HOST' ];
$uri = rtrim(dirname( $_SERVER ['PHP_SELF ']), '/\\');
$extra="../admin.php" ;
$_SESSION ["login"]="";
header("Location: http:// $host$uri /$extra");
}
}
?>
40
3.2.1 Register
At the login page, the registration link is right under the sign in form and the php code is in
the registrati on.php file:
</head>
<body class="login" >
<!– start: REGISTRATION –>
<div class="row">
<div class="main-login col -xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2
col-md-4 col-md-offset-4">
<div class="logo margin -top-30">
<h2>Patient Registration </h2>
</div>
<!– start: REGISTER BOX –>
<div class="box-register" >
<form name="registration" id="registration" method="post">
<fieldset>
<legend>
Sign Up
</legend>
<p>
Enter your personal details below:
</p>
<div class="form-group">
<input type="text" class="form-control" name="full_name"
placeholder ="Full Name" required >
</div>
<div class="form-group">
<input type="text" class="form-control" name="address"
placeholder ="Address" required >
</div>
<div class="form-group">
<input type="text" class="form-control" name="city"
placeholder ="City" required >
</div>
<div class="form-group">
<label class="block" >
Gender
</label>
<div class="clip-radio radio -primary" >
<input type="radio" id="rg-female" name="gender"
value="female" >
<label for="rg-female">
Female
</label>
<input type="radio" id="rg-male" name="gender"
value="male">
<label for="rg-male">
Male
</label>
</div>
</div>
<p>
Enter your account details below:
41
</p>
<div class="form-group">
<span class="input-icon">
<input type="email" class="form-control" name="email"
id="email" onBlur="userAvailability ()" placeholder ="Email" required >
<i class="fa fa-envelope" ></i> </span>
<span id="user-availability -status1" style="font-
size:12px;"></span>
</div>
<div class="form-group">
<span class="input-icon">
<input type="password" class="form-control" id="password"
name="password" placehol der="Password" required >
<i class="fa fa-lock"></i> </span>
</div>
<div class="form-group">
<span class="input-icon">
<input type="password" class="form-control"
name="password_again" placeholder ="Password Again" required >
<i class="fa fa-lock"></i> </span>
</div>
<div class="form-group">
<div class="checkbox clip -check chec k-primary" >
<input type="checkbox" id="agree" value="agree" >
<label for="agree" >
I agree
</label>
</div>
</div>
<div class="form-actions" >
<p>
Already have an account?
<a href="user-login.php" >
Log-in
</a>
</p>
<button type="submit" class="btn btn -primary pull -right"
id="submit" name="submit" >
Submit <i class="fa fa-arrow-circle-right"></i>
</button>
</div>
</fieldset>
</form>
<div class="copyright" >
© <span class="current -year"></span><span class="text-bold
text-uppercase" > HMS</span>. <span>All rights reserved </span>
</div>
</div>
</div>
</div>
The block of code from above saves the user data and closes the form after the user clicks the
submit button (“ Submit ”) and then, in the registration. php file the data validation occurs:
42
<?php
include_once ('include/config.php' );
if(isset($_POST['submit' ]))
{
$fname=$_POST['full_name' ];
$address =$_POST['address' ];
$city=$_POST['city'];
$gender=$_POST['gender' ];
$email=$_POST['email'];
$password =md5($_POST['password' ]);
$query=mysql_query( "insert into users(fullname,address,city,gender,email,password)
values('$fname','$address ','$city','$gender','$email','$password ')");
if($query)
{
echo "<script> alert('Successfully Registered. You can login now');</script>" ;
//header('location:user -login.php');
}
}
?>
3.2.2 Log out
The log out button is included in the me nu so it will be present on every page and the php code
is in the logout .php:
<?php
session_start() ;
include('include/config.php' );
$_SESSION ['login']=="";
date_default_timezone_set( 'Asia/Kolkata' );
$ldate=date( 'd-m-Y h:i:s A' , time () ) ;
mysql_query( "UPDATE userlog SET logout = ' $ldate' WHERE uid =
'".$_SESSION ['id']."' ORDER BY id DESC LIMIT 1" );
session_unset() ;
//session_destroy();
$_SESSION ['errmsg' ]="You have successfully logout" ;
?>
<script language ="javascript" >
document .location ="./user-login.php ";
</script>
3.3 Change Password
The Change password functionaliy is applicable to any type of user. The buuton Change password is
located befor the Logout button.
<div class="main-content" >
<div class="wrap-content container" id="container" >
<!– start: PAGE TITLE –>
<section id="page-title">
43
<div class="row">
<div class="col-sm-8">
<h1 class="mainTitle" >User | Change Password </h1>
</div>
<ol class="breadcrumb" >
<li>
<span>User</span>
</li>
<li class="active">
<span>Change Password </span>
</li>
</ol>
</div>
</section>
<!– end: PAGE TITLE –>
<!– start: BASIC EXAMPLE –>
<div class="container -fluid container -fullw bg -white">
<div class="row">
<div class="col-md-12">
<div class="row margi n-top-30">
<div class="col-lg-8 col-md-12">
<div class="panel panel -white">
<div class="panel-heading" >
<h5 class="panel-title">Change
Password </h5>
</div>
<div class="panel-body">
<p style="color:red;"><?php echo
htmlentities( $_SESSION ['msg1']);?>
<?php echo htmlentities( $_SESSION ['msg1']="");?></p>
<form role="form" name="chngpwd"
method="post" onSubmit ="return valid();">
<div class="form-group">
<label for="exampleInputEmail1" >
Current Password
</label>
<input type="password" name="cpass" class="form-control"
placeholder="Enter Current Password" >
</div>
<div class="form-group">
<label for="exampleInputPassword1" >
New Password
</label>
<input type="password" name="npass" class="form-control"
placeholder ="New Password" >
</div>
<div class="form-group">
<label for="exampleInputPassword1" >
Confirm Password
</label>
<input type="password" name="cfpass" class="form-
control" placeholder ="Confirm Password" >
</div>
44
<button type="submit" name="submit"
class="btn btn -o btn-primary" >
Submit
</button>
</form>
</div>
</div>
</div>
The block of code from above saves the user data and closes the form after the user clicks the
submit button (“Submit”) and then, in the change -password.php file the data validation occurs:
<?php
session_start() ;
//error_reporting(0);
include('include/config.php' );
include('include/checklogin.php' );
check_login() ;
date_default_timezone_set( 'Asia/Kolk ata');// change according timezone
$currentTime = date( 'd-m-Y h:i:s A' , time () ) ;
if(isset($_POST['submit' ]))
{
$sql=mysql_query( "SELECT password FROM users where
password='" .md5($_POST['cpass'])."' && email='" .$_SESSION ['login']."'");
$num=mysql_fetch_ array($sql);
if($num>0)
{
$con=mysql_query( "update users set password='" .md5($_POST['npass'])."',
updationDate=' $currentTime ' where email='" .$_SESSION ['login']."'");
$_SESSION ['msg1']="Password Changed Successfully !!" ;
}
else
{
$_SESSION ['msg1']="Old Pas sword not match !!" ;
}
}
?>
3.4 The Dashboard Page –
The main page also known as “ Dashboard ” page is the page that users get redirected after login
and the main page that user will use in the web application:
<body>
<div id="app">
<?php include ('include/sidebar.php' );?>
<div class="app-content" >
<?php include ('include/header.php' );?>
<!– end: TOP NAVBAR –>
<div class="main-content" >
<div class="wrap-content container" id="container" >
45
<!– start: PAGE TITLE –>
<section id="page-title">
<div class="row">
<div class="col-sm-8">
<h1 class="mainTitle ">User | Dashboard </h1>
</div>
<ol class="breadcrumb" >
<li>
<span>User</span>
</li>
<li class="active" >
<span>Dashboard </span>
</li>
</ol>
</div>
</section>
<!– end: PAGE TITLE –>
<!– start: BASIC EXAMPLE –>
<div class="container -fluid container -fullw bg -white">
<div class="row">
<div class="col-sm-4">
<div class="panel panel -white no-radius text -center">
<div class="panel-body">
<span class="fa-stack fa -2x"> <i class="fa fa-
square fa -stack-2x text-primary" ></i> <i class="fa fa-smile-o fa-stack-1x fa-
inverse" ></i> </ span>
<h2 class="StepTitle" >My Profile </h2>
<p class="links cl -effect-1">
<a href="edit-profile.php" >
Update Profile
</a>
</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel -white no -radius text -center">
<div class="panel-body">
<span class="fa-stack fa -2x"> <i class="fa fa-
square fa -stack-2x text-primary" ></i> <i class="fa fa-paperclip fa -stack-1x fa-
inverse" ></i> </span>
<h2 class="StepTitle" >My Appointments </h2>
<p class="cl-effect-1">
<a href="appointment -history.php" >
View Appointment History
</a>
</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel -white no -radius text -center">
<div class="panel-body">
<span class="fa-stack fa -2x"> <i class="fa fa-
square fa -stack-2x text-primary" ></i> <i class="fa fa-terminal fa -stack-1x fa-
46
inverse" ></i> </span>
<h2 class="StepTitle" > Book My Appointment </h2>
<p class="links cl -effect-1">
<a href="book-appointment.php" >
Book Appointment
</a>
</p>
</div>
</div>
</div>
</div>
</div>
3.4.1 Book an appointment
After the pacient user is logged in the web application, the user can book an appointment to a doctor.
The code that verify and fetch data from the database in order to can make an appointment is:
<?php
session_start() ;
//error_reporting(0);
include('include/config.php' );
include('include/checklogin.php' );
check_login() ;
if(isset($_POST['submit' ]))
{
$specilization =$_POST['Doctorspecialization' ];
$doctorid =$_POST['doctor' ];
$userid=$_SESSION ['id'];
$fees=$_POST['fees'];
$appdate =$_POST['appdate' ];
$time=$_POST['apptime' ];
$userstatus =1;
$docstatus =1;
$query=mysql_query ("insert into
appointment(doctorSpecialization,doctorId,userId,consultancyFees,appointmentDate,a
ppointmentTime,userStatus,doctorStatus)
values(' $specilization ','$doctorid ','$userid','$fees','$appdate ','$time','$usersta
tus','$docstatus ')");
if($query)
{
echo "<script> alert('Your appointment successfully booked');</script>" ;
}
}
?>
The form that the user will be able to complete in order to make an online appointment it is also
located in the book -appointment.php file:
47
</head>
<body>
<div id="app">
<?php include ('include/sidebar.php' );?>
<div class="app-content" >
<?php include ('include/header.php' );?>
<!– end: TOP NAVBAR –>
<div class="main-content" >
<div class="wrap-content container" id="container" >
<!– start: PAGE TITLE –>
<section id="page-title">
<div class="row">
<div class="col-sm-8">
<h1 class="mainTitle" >User | Book Appointment </h1>
</div>
<ol class="breadcrumb" >
<li>
<span>User</span>
</li>
<li class="active" >
<span>Book Appointment </span>
</li>
</ol>
</section>
<!– end: PAGE TITLE –>
<!– start: BASIC EXAMPLE –>
<div class="container -fluid container -fullw bg -white">
<div class="row">
<div class="col-md-12">
<div class="row margin -top-30">
<div class="col-lg-8 col-md-12">
<div class="panel panel -white">
<div class="panel-heading" >
<h5 class="panel-title">Book
Appointment </h5>
</div>
<div class="panel-body">
<p style="color:red;"><?php echo
htmlentities( $_SESSION ['msg1']);?>
<?php echo htmlentities( $_SESSION ['msg1']="");?></p>
<form role="form" name="book" method="post"
>
<div class="form-group">
<label for="DoctorSpecialization" >
Doctor Specialization
</label>
<select name="Doctorspecialization" class="form-control"
onChange ="getdoctor (this.value);" required ="required" >
<option value="">Select
Specialization </option>
<?php $ret=mysql_query( "select * from doctorspecilization" );
48
while($row=mysql_fetch_array( $ret))
{
?>
<option value="<?php echo
htmlentities( $row['specilization' ]);?>">
<?php echo
htmlentities( $row['specilization' ]);?>
</option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label for="doctor" >
Doctors
</label>
<select name="doctor" class="form-control" id="doctor"
onChange ="getfee(this.value);" required ="required" >
<option value="">Select Doctor </option>
</select>
</div>
<div class="form-group">
<label for="consultancy fees">
Consultancy Fees
</label>
<select name="fees" class="form-control" id="fees" readonly >
</select>
</div>
<div class="form-group">
<label for="AppointmentDate" >
Date
</label>
<input class="form-control datepicker" name="appdate"
type="date" required ="required" >
</div>
<div class="form-group">
<label for="Appointmenttime" >
Time
</label>
<input class="form-control datepicker" name="apptime"
type="time" required ="required" >
</div>
49
<button type="submit" name="submit"
class="btn btn -o btn-primary" >
Submit
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
3.4.2 The categories section
The categories section is placed on the right side of the main page under the recommended
section and has the following code:
The categories are stored in the categories table:
public function get_categories_articles ()
{
$this->db->select('*')
->from($this::ARTICLE_CATEGORY_TABLE )
->join($this::CATEGORY_TABLE , $this::ARTICLE_CATEGORY_TABLE .
".id_category = " . $this::CATEGORY_TABLE . ".id_category" );
$query = $this->db->get();
$results = $query->result();
if (!empty($results )) {
foreach ($results as $result) {
if (!empty($data[$result->id_catego ry])) {
$number_of_articles = $data[$result-
>id_category ]['articles_number' ] + 1;
$data[$result->id_category ]['articles_number' ] =
$number_of_articles ;
} else {
$data[$result->id_category] = array(
'id_category' => $result->id_category ,
'name' => $result->name,
'articles_number' => 1
);
}
}
return $data;
}
return array();
}
50
Column name Description
id_category Unique identifier for each category created
name Appropriate name for each category created
Table 2. Categories table
3.4.3 The tags section
The categorie s section is placed on the right side of the main page under the category section
and has the following code in the index.php file:
public function get_tags_articles ()
{
$this->db->select('*')
->from($this::ARTICLE_TAG_TABLE )
->join($this::TAG_TABLE , $this::ARTICLE_TAG_TABLE . ".id_tag =
" . $this::TAG_TABLE . ".id_tag" );
$query = $this->db->get();
$results = $query->result();
if (!empty($results )) {
foreach ($results as $result) {
$data[$result->id_tag] = array(
'id_tag' => $result->id_tag,
'name' => $result->name
);
}
return $data;
}
return array();
}
This is the tags ta ble:
Column name Description
51
id_tag Unique identifier for each tag created
name Appropriate name for each tag created
Table 3. Tag table
3.5 Article page
The individual article page contains the article title, author name, add date and the article body, the
code is the following:
<div class="col-md-9">
<article class="entry-post entry -post-single">
<header class="entry-header">
<h1 class="entry-title"><?php echo
$article ['title']; ?></h1>
<div class="meta-line">
<span class="post-author"><i class="fa fa-
user"></i> <a href="#"><?php echo $article ['name_company' ]; ?></a></span>
<span class="post-date"><i class="fa fa-
calendar" ></i> <?php echo $article ['creation_date_en' ]; ?></span>
<span class="post-comment" ><i class="fa fa-
comments" ></i> <a href="#">4 Comments </a></span>
</div>
</header>
<figure class="media">
<a href="#">
<img src="<?php echo assets_uploads_files_url () .
strtolower (str_replace (' ', '', $article ['name_company' ])) . '/' .
$article ['poster']; ?>"
class="img-responsive img -centered" alt="by <?php
echo $article ['name_company' ]; ?>">
</a>
</figure>
<div class="content" >
<?php echo $article ['body']; ?>
</div>
</article>
<?php if (!empty($article ['tags'])): ?>
<div class="row">
<div class="col-md-12">
<h4>Tag-uri:</h4>
<?php $tags = explode(', ', $article ['all_tags' ]);
?>
<ul class="list-inline tag -list">
<?php foreach ($tags as $tag): ?>
<li><a href="#"><?php echo $tag;
?></a></li>
<?php endforeach ; ?>
</ul>
</div>
</div>
<?php endif; ?>
52
<section class="post-author-info">
<h3 class="section -heading sr -only">About
The Author </h3>
<div class="media">
<a href="#" class="media-left">
<img src="<?php echo
assets_uploads_url () . $article ['logo_company' ]; ?>" class="img-circle w -h-
60px" alt="Avatar" >
</a>
<div class="media-body">
<a href="#" class="author-
name"><?php echo $article ['name_company' ]; ?></a>
<p class="author-title"><?php echo
$article ['city_company' ]; ?></p>
</div>
</div>
The table from the database that stores all articles is called article:
A short description for each column in th e article table :
Column name Description
id_article Unique identifier to each article and the primary
key of the article table
id_company Unique identifier for each company
creation_date The date when the article was created
53
body The content of the article (text, images, videos)
title The title of the article
poster Obligatory banner that will be displayed on other
pages to recognize this article
type Boolean value to determine the type of comments
Table 4. Article ta ble
At the end of each article we have the comment section whe re any type of user can:
Add a comment:
public function add_comment ($post_data )
{
$id_article = $post_data ['id_article' ];
$comment = nl2br($post_data ['comment' ]);
$is_response = $post_data ['is_response' ];
$type_user = !empty($this->session->userdata ['front_faculty' ]) ?
'0' : '1';
$creation_date = date('Y-m-d H:i:s' );
$avatar = !empty($this->session->userdata ['front_faculty' ]) ?
$this->session->userdata ['front_avatar' ] : $this->session-
>userdata ['front_logo' ];
$user_name = !empty($this->session->userdata ['front_faculty' ]) ?
$this->session->userdata ['front_last_name' ] . ' ' . $this-
>session->userdata ['front_first_nam e'] : $this->session-
>userdata ['front_name' ];
$data_to_insert = array(
'id_article' => $id_article ,
'id_user' => $this->session->userdata ['front_id' ],
'type_user' => $type_user , // 0 = student, 1 = company
'creation_date' => $creation_date ,
'body' => $comment ,
'response_to' => $is_response
);
$this->db->insert($this::TABLE_ARTICLE_COMMENT , $data_to_insert );
return json_encode (
array(
'id_comment' => $this->db->insert_id (),
'avatar' => assets_uploads_url () . $avatar,
'creation_date' => date('d.m.Y H:i' ,
strtotime ($creation_date )),
'user_name' => $user_name ,
'comment' => $comment
)
54
);
}
Edit previously added comments:
public function edit_comment ($post_data )
{
$id_comment = $post_data ['id_comment' ];
$updated_comment = nl2br($post_data ['updated_comment' ]);
$this->db->where('id_article_comment' , $id_comment );
$this->db->update($this::TABLE_ARTICLE_COMMENT , array('body' =>
$updated_comment ));
return json_encode (
array(
'comment' => $updated_comment
)
);
}
Delete previously added comments:
public function delete_comment ($id)
{
$this->db->where('id_article_comment' , $id);
$this->db->delete($this::TABLE_ARTICLE_COMMENT );
}
Review comments (give them thumbs up or down)
public function review_comment ($post_data )
{
$type_user = !empty($this->session->userdata ['front_faculty' ]) ?
'0' : '1';
$user_of_comment = $this-
>get_user_of_comment ($post_data ['id_comment' ]);
// if the user that reviews is the one who made the comment
if (($user_of_comment ['id'] == $this->session-
>userdata ['front_id' ])
&& ($type_user == $user_of_comment ['type'])) {
// return empty response
return false;
}
$data_to_insert = array(
'id_comment' => $post_data ['id_comment' ],
'type' => $post_data ['review' ],
'id_user' => $this->session->userdata ['front_id' ],
'type_user' => $type_user // 0 = student, 1 = company
);
$this->db->insert($this::TABLE_ARTICLE_COMMENT_THUMB ,
$data_to_insert );
55
return json_encode (
array(
'id_review_comment' => $this->db->insert_id ()
)
);
}
Or cancel a comment review previously made:
public function delete_review_comment ($id)
{
$this->db->where('id_article_comment_thumb' , $id);
$this->db->delete($this::TABLE_ARTICLE_COMMENT_THUMB );
}
Comments mapping on the page (with Js)
var articleCommentsContainer = $('article.comme nts');
// display add comment textarea
$('.add-comment-header').click(function (){
$('#add_comment_form' ).toggle('slow');
});
/**
* Adding a typical comment
*/
$('#add_comment_form' ).submit(function (event){
event.preventDefault ();
var form = $(this),
textarea = form.find('textarea' ),
message = textarea .val(),
id_article = textarea .attr('data-id');
$.post('../adaugare -comentariu' , {'id_article' : id_article ,
'comment': message, 'is_response' : 0}, function (response ){
textarea .val('');
form.toggle('slow');
response = JSON.parse(response );
// add the new comment as the first one in the list
var commentsCon tainer = $('article.comments ul.media –
list').first();
commentsContainer .prepend('<li class="media">' +
$('#typical_comment' ).html() + '</li>');
// build the new comment's container
var inserted_comment = commentsContain er.find('li').first();
// map the new inserted comment into DOM
map_inserted_comment (inserted_comment , response );
});
});
function map_inserted_comment (inserted_comment , response )
{
inserted_comment .attr('id', 'row_comment_' + response .id_comment );
inserted_comment .find('div').first().attr('id',
'comment_displayed_' + response .id_comment );
56
// adding avatar
inserted_comment .find('#comment_displayed_' + response .id_comment +
' img.avatar' ).attr('src', response .avatar);
// adding name
inserted_comment .find('.media-body .comment -author
a').text(response .user_name );
// adding comment date
inserted_comment .find('.media-body
span.timestamp' ).text(response .creation_date);
// adding comment body
inserted_comment .find('.media-body p.comment –
body').html(response .comment);
// make edit/delete buttons functional
inserted_comment .find('span.edit -comment' ).attr('data-id',
response .id_comme nt);
inserted_comment .find('span.delete -comment' ).attr('data-id',
response .id_comment );
inserted_comment .children ('div').eq(1).attr('id', 'comment_edited_'
+ response .id_comment );
inserted_comment .find('#comment_edited_' + response .id_comment + '
textarea' ).val(response .comment);
inserted_comment .find('.update -comment' ).attr('data-id',
response .id_comment );
inserted_comment .find('.cancel -editing' ).attr('data-id',
response .id_comment );
}
/**
* Adding a respons e comment
*/
// first, display the textarea in which the comment will be written
articleCommentsContainer .on('click', '.answer -to-comment' , function (){
var commentId = $(this).attr('data-id');
// display new comment textarea
$('#respond_to_' + commentId ).removeClass ('hidden' );
});
// secondly, send to server the new updated message
articleCommentsContainer .on('click', '.add-response -comment' ,
function (){
var commentId = $(this).attr('data-id'),
textarea = $('#respond_to_' + commentId + ' textarea' ),
message = textarea .val(),
id_article = textarea .attr('data-id'),
commentLevel = $(this).attr('data-comment-level');
$.post('../adaugare -comentariu' , {'id_article' : id_article ,
'comment' : message, 'is_response' : commentId }, function (response ){
textarea .val('');
$('#respond_to_' + commentId ).addClass ('hidden' );
response = JSON.parse(response );
var mainConta iner = $('#comment_displayed_' + commentId );
// if another response has been already added, just add another
element to the list
if (mainContainer .find('ul.media -list').length) {
mainContainer .find('.media-body ul.m edia-list').append('<li
class="media comment -by-author">' + $('#typical_comment' ).html() +
'</li>');
57
} else {
// otherwise, create the list
mainContainer .find('.media-body').append('<ul class="media –
list">'
+ '<li class="media comment -by-author">' +
$('#typical_comment' ).html() + '</li>' + '</ul>');
}
// map the inserted comment into DOM
var inserted_comment = mainContainer .find('.media-body
ul.media -list li' ).first();
map_inserted_comment (inserted_comment , response );
});
});
// or cancel the edit process
articleCommentsContainer .on('click', '.cancel -adding-response' ,
function (){
var commentId = $(this).attr('data-id');
// hide new comment textarea
$('#respond_to_' + commentId ).addClass ('hidden' );
});
/**
* Edit a comment
*/
// first, display the form with the current comment
articleCommentsContainer .on('click', '.edit-comment' , function (){
var commentId = $(this).attr('data-id');
$('#comment_edited_' + commentId ).removeClass ('hidden' );
$('#comment_displayed_' + commentId ).addClass ('hidden' );
});
// secondly, send to server the new updated message
articleCommentsContainer .on('click', '.update -comment' , function (){
var commentId = $(this).attr('data-id'),
updatedComment = $('#comment_edited_' +
commentId ).find('textarea' ).val();
$.post('../editare -comentariu' , {'id_comment': commentId ,
'updated_comment' : updatedComment }, function (response ){
response = JSON.parse(response );
$('#row_comment_' + commentId ).find('.media-body p.comment –
body').html(response .comment);
$('#comment_edited_' + commentId ).addClass ('hidden' );
$('#comment_displayed_' + commentId ).removeClass ('hidden' );
});
});
// or cancel the edit process
articleCommentsContainer .on('click', '.cancel -editing' , function (){
var commentId = $(this).attr('data-id');
$('#comment_edited_' + commentId ).addClass ('hidden' );
$('#comment_displayed_' + commentId ).removeClass ('hidden' );
});
/**
* Delete a comment
*/
articleCommentsContainer .on('click', '.delete -comment', function (){
var commentId = $(this).attr('data-id');
58
$.post('../stergere -comentariu' , {'id_comment' : commentId },
function (){
$("#row_comment_" + commentId ).fadeOut("slow", function () {
// remove element
$(this).remove();
});
})
});
/**
* Adding a like / thumbs up
*/
articleCommentsContainer .on('click', '.like-comment' , function () {
var commentId = $(this).attr('data-id'),
likeContainer = $(this),
commentContainer = $('#row_comment_' + commentId ),
commentParentList = commentContainer .parent('ul.media -list'),
reviewId = likeContainer .attr('data-review-id');
if (reviewId != null) {
// if current user wants to withdraw its thumbs up
$.post('../stergere -review-comentariu' , {'id_review' :
reviewId }, function (){
likeContainer .removeAttr ('data-review-id');
likeContainer .find('i').removeClass ('fa-thumbs-
up').addClass ('fa-thumbs-o-up');
likeContainer .find('span').text(parseInt (likeContainer .find('span').text(),
10) – 1);
if (commentParentList .length > 1) {
var nextComment = commentContainer .next();
if (nextComment .length) {
nextComment .after(commentContainer .detach());
}
}
});
} else {
// adding thumbs up
$.post('../adaug are-review-comentariu' , {'id_comment' :
commentId , 'review' : '1'}, function (response ){
if (!response .length) {
alert('You can NOT review your own comment!' );
return false;
}
response = JSON.parse(response );
likeContainer .attr('data-review-id',
response .id_review_comment );
likeContainer .find('i').removeClass ('fa-thumbs-o-
up').addClass ('fa-thumbs-up');
likeContainer .find('span').text(1 +
parseInt (likeContainer .find('span').text(), 10));
if (commentParentList .length > 1) {
var previousComment = commentContainer .prev();
if (previousComment .length) {
previousComment .before(commentContainer .detach());
}
}
59
// if comment was previously down -voted (and not by current
user), remove thumbs down
var dislikeContainer = likeContainer .next(),
dislikeReviewId = dislikeContainer .attr('data-review-
id');
if (dislikeContainer .find('i').hasClass ('fa-thumbs-down')
&& (dislikeReviewId != null)) {
$.post('../stergere -review-comentariu' , {'id_review' :
dislikeContainer .attr('data-review-id')}, function (){
dislikeContainer .removeAttr ('data-review-id');
dislikeContainer .find('i').removeClass ('fa-thumbs-
down').addClass ('fa-thumbs-o-down');
dislikeContainer .find('span').text(parseInt (dislikeContainer .find('span').t
ext(), 10) – 1);
});
}
})
}
});
/**
* Adding a dislike / thumbs down
*/
articleCommentsContainer .on('click', '.dislike -comment' , function () {
var commentId = $(this).attr('data-id'),
dislikeContainer = $(this),
commentContainer = $('#row_comment_' + commentId ),
commentParentList = commentContainer .parent('ul.media-list'),
reviewId = dislikeContainer .attr('data-review-id');
if (reviewId != null) {
// if current user wants to withdraw its thumbs down
$.post('../stergere -review-comentariu' , {'id_review' :
reviewId }, function(){
dislikeContainer .removeAttr ('data-review-id');
dislikeContainer .find('i').removeClass ('fa-thumbs-
down').addClass ('fa-thumbs-o-down');
dislikeContainer .find('span').text(parseInt (dislikeContainer .find('span').t
ext(), 10) – 1);
if (commentParentList .length > 1) {
var previousComment = commentContainer .prev();
if (previousComment .length) {
previousComment .before(commentCon tainer.detach());
}
}
});
} else {
// adding thumbs down
$.post('../adaugare -review-comentariu' , {'id_comment' :
commentId , 'review' : '0'}, function (response ){
if (!response .length) {
alert('You can NOT review your own comment!' );
return false;
}
response = JSON.parse(response );
60
dislikeContainer .attr('data-review-id',
response .id_review_comment );
dislikeContainer .find('i').removeClass ('fa-thumbs-o-
down').addClass ('fa-thumbs-down');
dislikeContainer .find('span').text(1 +
parseInt (dislikeContainer .find('span').text(), 10));
if (commentParentList .length > 1) {
var nextComment = commentContainer .next();
if (nextComment .length) {
nextComment .after(commentContainer .detach());
}
}
});
}
})
}
});
The comments are stored in the article_comment table:
Figure 15. Article comments table
Column name Description
id_article_comment Unique ident ifier for the article and also the
primary key of this table
id_article The id of the article that is commente upon
id_user The id of the users that post comments
type_user The type of the users that post comments
(students or companies)
61
creation_date The creation date of each comment
body The body of the comment (text)
response_to If the comment is a response to another comment,
the id of that parent comment.
Table 5. Article comments table
3.6 Companies page
The companies page brings a list of partenered companies which can post articles and
comments on the app. The code to fetch the company list is:
public function get_companies ()
{
$this->db->select('*');
$query = $this->db->get($this::ARTICLE_TABLE );
$results = $query->result();
if (!empty($results )) {
foreach ($results as $result) {
$company = $this->get_company_by_id ($result->id_company );
if ($company ['status' ] == $this::STATUS_COMPLETED ) {
$data[$result->id_company ] = array(
'id_company' => $result->id_company ,
'name' => $company ['name'],
'city' => $company ['city'],
'logo' => $company['logo'],
'description' => $company ['description' ],
'address' => $company ['address' ]
);
}
}
return $data;
}
return array();
}
Furthermore, when clicking a company from this page, the user will be redirected to a new page
where only the articles created by that company are selected and displayed in ordered by date. The
code to get all the articles from a single company is:
public function get_articles_by_company ($id_company )
{
$this->db->select('*');
$this->db->where(array('id_company' => $id_company ));
$this->db->order_by ('creation_date' , 'desc');
$query = $this->db->get($this::ARTICLE_TABLE );
62
$results = $query->result();
if (!empty($results )) {
foreach ($results as $result) {
$company = $this->get_company_by_id ($id_company );
$data[$result->id_article ] = array(
'title' => $result->title,
'poster' => $result->poster,
'creation_date' => date('d.m.Y', strtotime ($result-
>creation_date )),
'creation_date_en' => date('M d, Y' , strtotime ($result-
>creation_date )),
'#comments' => $this->get_number_of_comments ($result-
>id_article ),
'id_company' => $result->id_company ,
'name' => $company ['name'],
'city' => $company ['city'],
'logo' => $company ['logo'],
'description' => $company ['description' ],
'address' => $company ['address' ]
);
}
return $data;
}
return array();
}
The compani es are stored in the company table:
Figure 16. Company table
Column name Description
id Unique identifier for each company and the
primary key of the table
63
name The company’s name
city The city where the company is located
logo The current logo of the company
description A description of the company provided by the
company
email The email of the company
password The password of the company’s account
address The current address of the company
register_date The date when t he company registered
last_login The time of the last login of the company
status Status of the company (completed registration or
not)
Table 6. Company tabl e
4 CONCLU SIONS
The main goal was to initiate a minimal interaction betwee n students and companies and I firmly
believe that I achieved that . Students have the possibility to be noticed by companies and their
growth, passion and interest can result in getting hired. Virtually all three parts (student, faculty,
company) will ult imately benefit from such interaction.
Based on feedback on articles, companies could figure out how to better target students to make
them even more curious and willing to continue in this area. Students would be more motivated to
receive this minimal att ention in the application from companies. And, as an intermediary, the ACE
managed to create relationships and build a better image not only in Craiova but also in other major
cities of Romania.
Naturally there i s a lot of room for improvement . If the appl ication reaches its original target , this
does not mean it is the ideal application. Throughout its development, I have noticed many aspects
that can be enhanced and many features that can be implemented to turn it into an application as
technically comple x as it is useful in several respects.
64
It has started as a small forum but it can turn into much more than that. What is important is that
the first step has been achieved – we have the students in the same place together with IT companies.
As an improveme nt ideea, s ince most companies have internal programs for students (interships,
academies, trainings, etc.), the selection and enrollment process could somehow be portrayed in this
application, as I repeat, we already have the same place and students and c ompanies.
Another idea would be that the situation of college projects done by students could be somehow
made public for companies (of course, invisible to other students , and only with the student’s
approval ). This would be somewhat an extension of the id ea above, ideal for situations where there
are a lot of students enrolled in an academy and companies do not have much data collected about
them and this could give the chance to the students to impress some companies in the field they wish
to start their careers.
65
5 BIBLIOGRA PHY
During the planning and development of this dissertation project the followi ng web resources were consulted:
http://php.net/ – PHP
https://codeigniter.com/ – CodeIgniter
https://www.froala.com/wysiwyg -editor – Froala Editor
http://phpmailer.worx ware.com/index.php?pg=tutorial – PHPMailer
https://en.wikipedia.org/wiki/MySQL – MySQL
http://www.w3schools.com/html/default.asp – HTML
http://www.w3schools.com/css/default.asp – CSS
http://www.w3schools.com/js/default.asp – JavaScript
https://jquery.com – jQuery
http://www.w3schools.com/json/default.asp – JSON
http://getbootstrap.com/ – Bootstrap
https://ro.wikipedia.org/wiki/Model -view -controller – MVC pattern
http://www.w3schools.com/ajax/default.asp – AJAX
https://www.apachefriends.org/index.html – XAMPP
https://colorlib.com/polygon/elaadmin/index.html – The template of the back -end
administration panel
https://wrapbootstrap.com/theme/bravana -responsive -website -template -WB0D6B38R – The
template of the front -end interface
https://mlocati.github.io/articles/php -windows -imagick.html – Details for adding the
custom library needed for the Froala editor
https://searchoracle.te chtarget.com/definition/MySQL
https://www.tutorialspoint.com/php/php_introduction.htm
https://skillcrush.com/2012/04/03/css/
https://javascript.info/intro
66
67
A. SOURCE CODE
application/config/database.php (credentialele pentru baza de date)
$active_group = 'default' ;
$query_builder = TRUE;
$db['default' ] = array(
'dsn' => '',
'hostname' => 'localhost' ,
// 'dbport' => '3306',
'username' => 'root',
'password' => '',
'database' => 'forum_ace' ,
'dbdriver' => 'mysqli' ,
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production' ),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci' ,
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);
application/config/routes.php (rutele aplicatiei)
$route['default_controller' ] = 'Front_article' ;
$route['404_override' ] = '';
$route['translate_uri_dashes' ] = FALSE;
$route['assets/(:any)' ] = 'assets/$1' ;
/* Admin Routes */
$route['admin'] = 'Admin_ma in/index' ; // main admin route
// Admin user main functions
$route['admin/login' ] = 'Admin_main/login' ;
$route['admin/register' ] = 'Admin_main/register' ;
$route['admin/forgot' ] = 'Admin_main/forgot' ;
$route['admin/reset_password/token/(:any)' ] =
'Admin_main/reset_password/$1' ;
$route['admin/complete/token/(:any)' ] = 'Admin_main/complete/$1' ;
$route['admin/approve -user'] = 'Admin_main/approve_request' ;
$route['admin/logout' ] = 'Admin_main/logout' ;
$route['admin/profilul -meu'] = 'Admin_main/get_user _profile' ;
// Companies routes
$route['admin/companii' ] = 'Admin_company/read' ;
$route['admin/companii/(:any)' ] = 'Admin_company/read/$1' ;
$route['admin/adaugare -companie' ] = 'Admin_company/create' ;
$route['admin/editare -companie/(:any)' ] = 'Admin_com pany/update/$1' ;
$route['admin/stergere -companie' ] = 'Admin_company/delete' ;
// Students routes
68
$route['admin/studenti' ] = 'Admin_student/read' ;
$route['admin/studenti/(:any)' ] = 'Admin_student/read/$1' ;
$route['admin/adaugare -student' ] = 'Admin_student /create' ;
$route['admin/editare -student/(:any)' ] = 'Admin_student/update/$1' ;
$route['admin/stergere -student' ] = 'Admin_student/delete' ;
$route['admin/studenti -activi'] = 'Admin_student/get_students_activity' ;
// Articles routes
$route['admin/articole' ] = 'Admin_article/read' ;
$route['admin/articole/(:any)' ] = 'Admin_article/read/$1' ;
$route['admin/adaugare -articol' ] = 'Admin_article/create' ;
$route['admin/editare -articol/(:any)' ] = 'Admin_article/update/$1' ;
$route['admin/stergere -articol' ] = 'Admin_articl e/delete' ;
$route['admin/top -articole' ] = 'Admin_article/get_top_articles' ; // ?
$route['admin/upload -image'] = 'Admin_article/upload_image' ;
$route['admin/delete -image'] = 'Admin_article/delete_image' ;
$route['admin/upload -file'] = 'Admin_article/upload_f ile';
$route['admin/delete -file'] = 'Admin_article/delete_file' ;
$route['admin/categorii -articole' ] = 'Admin_article/read_categories' ;
$route['admin/adaugare -categorie' ] = 'Admin_article/create_category' ;
$route['admin/editare -categorie/(:any)' ] =
'Admin_a rticle/update_category/$1' ;
$route['admin/stergere -categorie' ] = 'Admin_article/delete_category' ;
$route['admin/taguri -articole' ] = 'Admin_article/read_tags' ;
$route['admin/adaugare -tag'] = 'Admin_article/create_tag' ;
$route['admin/editare -tag/(:any)' ] = 'Admin_article/update_tag/$1' ;
$route['admin/stergere -tag'] = 'Admin_article/delete_tag' ;
// Admin search
$route['admin/cautare/(:any)' ] = 'Admin_search/read/$1' ;
/* Front Routes */
$route['acasa'] = 'Front_article/index' ;
$route['login'] = 'Front_main/log in';
$route['register' ] = 'Front_main/register' ;
$route['forgot' ] = 'Front_main/forgot' ;
$route['reset_password/token/(:any)' ] = 'Front_main/reset_password/$1' ;
$route['complete/token/(:any)' ] = 'Front_main/complete/$1' ;
$route['logout' ] = 'Front_main/logo ut';
$route['my-profile' ] = 'Front_main/get_user_profile' ;
$route['articol/(:any)' ] = 'Front_article/get_article/$1' ;
$route['trending' ] = 'Front_article/get_trending_articles' ;
$route['companii' ] = 'Front_company/get_companies' ;
$route['articole -companie/ (:any)'] =
'Front_article/get_articles_by_company/$1' ;
$route['studenti -activi'] = 'Front_student/get_active_students' ;
$route['adaugare -comentariu' ] = 'Front_article/add_comment' ;
$route['editare -comentariu' ] = 'Front_article/edit_comment' ;
$route['stergere-comentariu' ] = 'Front_article/delete_comment' ;
$route['adaugare -review-comentariu' ] = 'Front_article/review_comment' ;
$route['stergere -review-comentariu' ] =
'Front_article/delete_review_comment' ;
assets/js/my -custom -scripts.js (scripturile custom ale a plicatiei scrise in JavaScript)
/* Custom app scripts */
/**
* Initiate datatable
*/
$(function (){
$('#recent_companies, #recent_students, #all_companies,
#all_students, #all_categories, #all_tags' ).DataTable ();
});
69
/**
* Initiate custom select2
*/
$(function (){
$('#article_categories,#article_tags' ).select2({ closeOnSelect :false});
});
/***
* Get input file path and add it to the source of a image to preview it
* @param input
*/
function readURL(input) {
if (input.files && input. files[0]) {
var reader = new FileReader ();
reader.onload = function (e) {
$('#img_preview' ).attr('src', e.target.result);
}
reader.readAsDataURL (input.files[0]);
}
}
$(document ).ready(function (){
/**
* On-click handler to dynamically approve a user
*/
$('button.approve-user').click(function () {
var id = $(this).attr('id'),
email = $(this).attr('data-email'),
userTable = $(this).attr('data-table-name'),
button = $(this),
slashSign = button.closest('td').find('strong' );
$.post('admin/approve -user', {id: id, email: email, userTable :
userTable }).done(function (response) {
if (response == true) {
button.closest('td').find('span').removeClass ('badge-
warning' ).addClass ('badge-success' ).text('Approved' );
slashSign .remove();
button.remove();
}
});
});
/**
* On-click handler to dynamically delete data f rom db and also
remove it from DOM
*/
$('button.delete-company').click(function (){
var id = $(this).attr('id'),
logo = $(this).attr('data-logo');
$.post('stergere -companie' , {id: id, logo: logo}, function (){
$("#company -record-" + id).fadeOut("slow", function () {
// remove element
$(this).remove();
});
});
});
/**
* On-click handler to dynamically delete data from db and also
remove it from DO M
*/
70
$('button.delete-student').click(function (){
var id = $(this).attr('id'),
avatar = $(this).attr('data-avatar');
$.post('stergere -student' , {id: id, avatar: avatar}, function (){
$("#student -record-" + id).fadeOut("slow", function () {
// remove element
$(this).remove();
});
});
});
/**
* On-click handler to dynamically delete data from db and also
remove it from DOM
*/
$('button.delete-category ').click(function (){
var id = $(this).attr('id');
$.post('stergere -categorie' , {id: id}, function (){
$("#category -record-" + id).fadeOut("slow", function () {
// remove element
$(this).remove();
});
});
});
/**
* On-click handler to dynamically delete data from db and also
remove it from DOM
*/
$('button.delete-tag').click(function (){
var id = $(this).attr('id');
$.post('stergere-tag', {id: id}, function (){
$("#tag-record-" + id).fadeOut("slow", function () {
// remove element
$(this).remove();
});
});
});
/**
* Preview image (input file upload)
*/
$('#poster' ).change(function (){
// show image preview container
var previewNode = $('#img_preview' ).closest('div');
previewNode .attr('style','');
// build image preview src
readURL(this);
// if no file has been chosen, hide image container
if (!(this.files && this.files[0])) {
previewNode .attr('style','display: none;' );
}
});
/**
* Send Froala content as html to server to be further stored into
db
*/
$('#add_article_form' ).find('#submit' ).click(function (){
var articleBody =
$(this).find('#article_body' ).froalaEditor ('html.get' );
$(this).find('#article_body' ).text(articleBody );
$('#add_article_form' ).submit();});
71
$('#edit_artic le_form' ).find('#submit' ).click(function (){
var articleBody =
$(this).find('#article_body' ).froalaEditor ('html.get' );
$(this).find('#article_body' ).text(articleBody );
$('#edit_article_form' ).submit();
});
/**––––– ––
* Article Comments logic
* ––––––– */
var articleCommentsContainer = $('article.comments ');
// display add comment textarea
$('.add-comment-header').click(function (){
$('#add_comment_form' ).toggle('slow');
});
/**
* Adding a typical comment
*/
$('#add_comment_form' ).submit(function (event){
event.preventDefault ();
var form = $(this),
textarea = form.find('textarea' ),
message = textarea .val(),
id_article = textarea .attr('data-id');
$.post('../adaugare -comentariu' , {'id_article' : id_article ,
'comment' : message, 'is_response' : 0}, function (response){
textarea .val('');
form.toggle('slow');
response = JSON.parse(response);
// add the new comment as the first one in the list
var commentsContainer = $('article.comments ul .media-
list').first();
commentsContainer .prepend('<li class="media">' +
$('#typical_comment' ).html() + '</li>');
// build the new comment's container
var inserted_comment = commentsContainer .find('li').first();
// map the new inserted comment into DOM
map_inserted_comment (inserted_comment , response) ;
});
});
/**
* Map newly inserted comment into DOM
* @param inserted_comment
* @param response
*/
function map_inserted_comment (inserted_comment, response)
{
inserted_comment. attr('id', 'row_comment_' +
response. id_comment );
inserted_comment. find('div').first().attr('id',
'comment_displayed_' + response. id_comment );
// adding avatar
inserted_comment. find('#comment_displayed_' +
response. id_comment + ' img.avatar' ).attr('src', response.avatar);
// adding name
inserted_comment. find('.media-body .comment -author
a').text(response.user_name);
// adding comment date
inserted_comment. find('.media-body
span.timestamp' ).text(response.creation_date);
72
// adding comment body
inserted_comment. find('.media-body p.comment –
body').html(response. comment);
// make edit/delete buttons functional
inserted_comment. find('span.edit -comment' ).attr('data-id',
response. id_comment );
inserted_comment. find('span.delete -comment' ).attr('data-id',
response. id_comment );
inserted_comment. children ('div').eq(1).attr('id',
'comment_edited_' + response. id_comment );
inserted_comment. find('#comment_edited_' + response. id_comment +
' textarea').val(response. comment);
inserted_comment. find('.update -comment' ).attr('data-id',
response. id_comment );
inserted_comment. find('.cancel -editing' ).attr('data-id',
response. id_comment );
}
/**
* Adding a response comment
*/
// first, display the textarea in which the comment will be written
articleCommentsContainer .on('click', '.answer -to-comment' ,
function (){
var commentId = $(this).attr('data-id');
// display new comment textarea
$('#respond_to_' + commentId ).removeClass ('hidden' );
});
// secondly, send to server the new updated message
articleCommentsContainer .on('click', '.add-response -comment' ,
function (){
var commentId = $(this).attr('data-id'),
textarea = $('#respond_to_' + commentId + ' textarea' ),
message = textarea .val(),
id_article = textarea .attr('data-id'),
commentLevel = $(this).attr('data-comment-level');
$.post('../adaugare -comentariu' , {'id_article' : id_article ,
'comment' : message, 'is_response' : commentId }, function (response){
textarea .val('');
$('#respond_to_' + commentId ).addClass ('hidden' );
response = JSON.parse(response);
var mainContainer = $('#comment_displayed_' + commentId );
// if another response has been already added, just add
another element to the list
if (mainContainer .find('ul.media -list').length) {
mainContainer .find('.media-body ul.media –
list').append('<li class="media comment -by-author">' +
$('#typical_comment' ).html() + '</li>');
} else {
// otherwise, create the list
mainContainer .find('.media-body').append('<ul
class="media -list">'
+ '<li class="media comment -by-author">' +
$('#typical_comment' ).html() + '</li>' + '</ul>');
}
// map the inserted comment into DOM
var inserted_comment = mainContainer .find('.media-body
ul.media -list li' ).first();
map_inserted_comment (inserted_comment , response);
});
});
// or cancel the edit process
articleCommentsContainer .on('click', '.cancel -adding-response' ,
73
function (){
var commentId = $(this).attr('data-id');
// hide new comment textarea
$('#respond_to_' + commentId ).addClass ('hidden' );
});
/**
* Edit a comment
*/
// first, display the form with the current comment
articleCommentsContainer .on('click', '.edit-comment' , function (){
var commentId = $(this).attr('data-id');
$('#comment_edited_' + commentId ).removeClass ('hidden' );
$('#comment_displayed_' + commentId ).addClass ('hidden' );
});
// secondly, send to server the new updated message
articleCom mentsContainer .on('click', '.update -comment' , function (){
var commentId = $(this).attr('data-id'),
updatedComment = $('#comment_edited_' +
commentId ).find('textarea' ).val();
$.post('../editare -comentariu' , {'id_comment' : commentId,
'updated_comment' : updatedComment }, function (response){
response = JSON.parse(response);
$('#row_comment_' + commentId ).find('.media-body p.comment-
body').html(response. comment);
$('#comment_edited_' + commentId ).addClass('hidden' );
$('#comment_displayed_' + commentId ).removeClass ('hidden' );
});
});
// or cancel the edit process
articleCommentsContainer .on('click', '.cancel -editing' , function (){
var commentId = $(this).attr('data-id');
$('#comment_edited_' + commentId ).addClass ('hidden' );
$('#comment_displayed_' + commentId ).removeClass ('hidden' );
});
/**
* Delete a comment
*/
articleCommentsContainer .on('click', '.delete -comment' , function(){
var commentId = $(this).attr('data-id');
$.post('../stergere -comentariu' , {'id_comment' : commentId },
function (){
$("#row_comment_" + commentId ).fadeOut("slow", function () {
// remove element
$(this).remove();
});
})
});
/**
* Adding a like / thumbs up
*/
articleCommentsContainer .on('click', '.like-comment' , function () {
var commentId = $(this).attr('data-id'),
likeContainer = $(this),
commentContainer = $('#row_comment_' + commentId ),
commentParentList = commentContainer .parent('ul.media –
list'),
reviewId = likeContainer .attr('data-review-id');
if (reviewId != null) {
// if cu rrent user wants to withdraw its thumbs up
74
$.post('../stergere -review-comentariu' , {'id_review' :
reviewId }, function (){
likeContainer .removeAttr ('data-review-id');
likeContainer .find('i').removeClass ('fa-thumbs-
up').addClass ('fa-thumbs-o-up');
likeContainer .find('span').text(parseInt (likeContainer .find('span').text
(), 10) – 1);
if (commentParentList .length > 1) {
var nextComment = commentContainer .next();
if (nextComment .length) {
nextComment .after(commentContainer .detach());
}
}
});
} else {
// adding thumbs up
$.post('../adaugare -review-comentariu' , {'id_comment' :
commentId , 'review' : '1'}, function (response){
if (!response. length) {
alert('You can NOT review your own comment!' );
return false ;
}
response = JSON.parse(response);
likeContainer .attr('data-review-id',
response.id_review_comment);
likeContainer .find('i').removeClass ('fa-thumbs-o-
up').addClass ('fa-thumbs-up');
likeContainer .find('span').text(1 +
parseInt (likeContainer .find('span').text(), 10));
if (commentParentList .length > 1) {
var previousComment = commentContainer .prev();
if (previousComment .length) {
previousComme nt.before(commentContainer .detach());
}
}
// if comment was previously down -voted (and not by
current user), remove thumbs down
var dislikeContainer = likeContainer .next(),
dislikeReviewId = dislikeContainer .attr('data-
review-id');
if (dislikeContainer .find('i').hasClass ('fa-thumbs-
down') && (dislikeReviewId != null)) {
$.post('../stergere -review-comentariu' ,
{'id_review' : dislikeCont ainer.attr('data-review-id')}, function (){
dislikeContainer .removeAttr ('data-review-id');
dislikeContainer .find('i').removeClass ('fa-
thumbs-down').addClass ('fa-thumbs-o-down');
dislikeContainer .find('span').text(parseInt (dislikeContainer .find('span'
).text(), 10) – 1);
});
}
})
}
});
/**
* Adding a dislike / thumbs down
*/
articleCommentsContainer .on('click', '.dislike -comment' , function (){
var commentId = $(this).attr('data-id'),
75
dislikeContainer = $(this),
commentContainer = $('#row_comment_' + commentId ),
commentParentList = commentContainer .parent('ul.media –
list'),
reviewId = dislikeContainer .attr('data-review-id');
if (reviewId != null) {
// if current user wants to withdraw its thumbs down
$.post('../stergere -review-comentariu' , {'id_review' :
reviewId }, function (){
dislikeContainer .removeAttr ('data-review-id');
dislikeContainer .find('i').removeClass ('fa-thumbs-
down').addClass ('fa-thumbs-o-down');
dislikeContainer .find('span').text(parseInt (dislikeContainer .find('span'
).text(), 10) – 1);
if (commentParentList .length > 1) {
var previousComment = commentContainer .prev();
if (previousComment .length) {
previousComment .before(commentContainer .detach());
}
}
});
} else {
// adding thumbs down
$.post('../adaugare -review-comentariu' , {'id_comment' :
commentId , 'review' : '0'}, function (response){
if (!response. length) {
alert('You can NOT review your own comment!' );
return false ;
}
response = JSON.parse(response);
dislikeContainer .attr('data-review-id',
response.id_review_com ment);
dislikeContainer .find('i').removeClass ('fa-thumbs-o-
down').addClass ('fa-thumbs-down');
dislikeContainer .find('span').text(1 +
parseInt (dislikeContainer .find('span').text(), 10));
if (commentParentList .length > 1) {
var nextComment = commentContainer .next();
if (nextComment .length) {
nextComment .after(commentContainer .detach());
}
}
// if comment was previously up -voted (and not by
current user), remove thumbs up
var likeContainer = dislikeContainer .prev(),
likeReviewId = likeContainer .attr('data-review-id');
if (likeContainer .find('i').hasClass('fa-thumbs-up') &&
(likeReviewId != null)) {
$.post('../stergere -review-comentariu' ,
{'id_review' : likeContainer .attr('data-review-id')}, function (){
likeContainer .removeAttr ('data-review-id');
likeContainer .find('i').removeClass ('fa-thumbs-
up').addClass ('fa-thumbs-o-up');
likeContainer .find('span').text(parseInt (likeContainer .find('span').text
(), 10) – 1);
});
}
})
}
76
});
/**–––––––
* End of Article Comments logic
* ––––––– */
});
application/controllers/Admin_main.php (user management -ul in procesele de
logare/inregistrare/recuperare parola)
<?php
defined('BASEPATH' ) OR exit('No direct script access allowed' );
class Admin_main extends CI_Controller
{
public $status;
private $usersTable ;
function __construct()
{
parent::__construct ();
$this->load->model('User_model' , 'user_mo del', TRUE);
$this->load->library( 'form_validation' );
$this->form_validation ->set_error_delimiters( '<div
class="error">' , '</div>' );
$this->status = $this->config->item('status' );
$this->usersTable = 'company' ;
}
public function index()
{
if (empty($this->session->userdata ['id'])) {
redirect(site_url() . 'admin/login/' );
}
$this->load->model('Company_model' , 'company_model' , TRUE);
$this->load->model('Student_model' , 'student_model' , TRUE);
$this->load->view('admin/page_home' , array('pending_companies'
=> $this->company_model ->get_pending_companies(), 'pending_students' =>
$this->student_model ->get_pending_students()));
}
public function register()
{
$this->form_validation ->set_rules( 'name', 'Company name' ,
'required' );
$this->form_validation ->set_rules( 'email', 'Email',
'required|valid_email' );
if ($this->form_validation ->run() == FALSE) {
$this->load->view('admin/page_register' );
} else {
if ($this->user_model ->isDuplicate( $this->input-
>post('email'), $this->usersTable )) {
$this->session->set_flashdata( 'flash_message' , 'User
email already exists' );
redirect(sit e_url() . 'admin/login' );
} else {
// add company with pending status
$clean = $this->security ->xss_clean( $this->input-
77
>post(NULL, TRUE));
$this->user_model ->insertUser( $clean, $this-
>usersTable );
$this->session->set_flashdata( 'flash_message' , 'In
curand veti primi un email cu instructiuni pentru incheierea procesului
de inregistrare.' );
redirect(site_url() . 'admin/login' );
};
}
}
public function approve_request()
{
$id = $this->input->post('id');
$email = $this->input->post('email');
$usersTable = $this->input->post('userTable' );
$user_approved = $this->user_model ->approveUser( $id,
$usersTable );
if ($user_app roved) {
$token = $this->user_model ->insertToken( $id, $usersTable );
$qstring = $this->base64url_encode( $token);
// create link for wither admin or front
$url = $usersTable == 'company' ? site_url() .
'admin/complete/token/' . $qstring : site_url() . 'complete/token/' .
$qstring ;
$link = '<a href="' . $url . '">link</a>' ;
echo $this->send_register_mail( $email, $link);
}
echo false ;
}
protected function send_reg ister_mail( $to_email , $link)
{
$from = 'admin@ace.ro' ;
$subject = 'Bun venit la Forum A.C.E.' ;
$message = '<strong>Accesati urmatorul link pentru
inregistrare:</strong> ' . $link;
$footer = '<strong>Forum A.C.E.</strong><br>' ;
$footer .= '<strong>' . date('d M Y') . '</strong>' ;
$this->load->helper( 'email');
$body = get_email_template( '', $message , $footer, 'Bun venit la
Forum A.C.E.' );
return send_email( $from, $to_email , $subject , $body);
}
protected function _islocal()
{
return strpos($_SERVER ['HTTP_HOST' ], 'local');
}
public function complete( $token = false)
{
$token = base64_decode ($token);
$cleanToken = $this->security ->xss_clean( $token);
$userInfo = $this->user_model ->isTokenValid( $cleanToken , $this-
>usersTable ); //either false or array();
if (!$userInfo ) {
$this->session->set_flashdata( 'flash_message' , 'Token is
invalid or exp ired');
redirect(site_url() . 'admin/login' );
78
}
$data = array(
'name' => $userInfo ->name,
'email' => $userInfo ->email,
'user_id' => $userInfo ->id,
'token' => $this->base64url_encod e($token)
);
$this->form_validation ->set_rules( 'password' , 'Password' ,
'required|min_length[5]' );
$this->form_validation ->set_rules( 'passconf' , 'Password
Confirmation' , 'required|matches[password]' );
if ($this->form_valida tion->run() == FALSE) {
$this->load->view('admin/page_complete' , $data);
} else {
$this->load->library( 'password' );
$post = $this->input->post(NULL, TRUE);
$cleanPost = $this->security ->xss_clean( $post);
$hashed = $this->password –
>create_hash( $cleanPost ['password' ]);
$cleanPost ['password' ] = $hashed;
unset($cleanPost ['passconf' ]);
$userInfo = $this->user_model ->updateUserInfo( $cleanPost ,
$this->usersTab le);
if (!$userInfo ) {
$this->session->set_flashdata( 'flash_message' , 'There
was a problem updating your record' );
redirect(site_url() . 'admin/login' );
}
unset($userInfo ->password );
// just in case the last logged in user was the admin
$this->session->set_userdata( 'role', 'company' );
foreach ($userInfo as $key => $val) {
$this->session->set_userdata( $key, $val);
}
redirect(site_url() . 'admin');
}
}
public function login()
{
// if somehow the user is logged but he's accessing the login
page, redirect him to home page
if (!empty($this->session->userdata ['id'])) {
/*go to home page*/
redirect(site_url() . 'admin');
}
$this->form_validation ->set_rules( 'email', 'Email',
'required|valid_email' );
$this->form_validation ->set_rules( 'password' , 'Password' ,
'required' );
if ($this->form_validation ->run() == FALSE) {
$this->load->view('admin/page_login' );
} else {
$post = $this->input->post();
$clean = $this->security ->xss_clean( $post);
// first check if user is admin
if (!$userInfo = $this->user_model ->checkLogin( $clean,
'backend_user' )) {
79
// if not, check if company
$userInfo = $this->user_model ->checkLogin( $clean, $this-
>usersTable );
}
if (!$userInfo ) {
$this->session->set_flashdata( 'flash_message' , 'The
login was unsuccessful' );
redirect(site_url() . 'admin');
}
foreach ($userInfo as $key => $val) {
$this->session->set_userdata( $key, $val);
}
redirect(site_url() . 'admin');
}
}
public function logout()
{
$this->session->sess_destroy();
redirect(site_url() . 'admin/login' );
}
public function forgot()
{
$this->form_validation ->set_rules( 'email', 'Email',
'required|valid_email' );
if ($this->form_validation ->run() == FALSE) {
$this->load->view('admin/page_forgot' );
} else {
$email = $this->input->post('email');
$clean = $this->security ->xss_clean( $email);
$userType = 'admin';
if (!$userInfo = $this->user_model –
>getUserInfoByEmail( $clean, 'backend_user' )) {
$userType = 'company' ;
$userInfo = $this->user_model –
>getUserInfoByEmail( $clean, $this->usersTable );
}
if (!$userInfo ) {
$this->session->set_flashdata( 'flash_message' , 'We can
not find your email address' );
redirect(site_url() . 'admin/login' );
}
if ($userInfo ->status != $this->status[2]) { //if status is
not completed
$this->session->set_flashdata( 'flash_message' , 'Your
account is not in approved status' );
redirect(site_url() . 'admin/login' );
}
//build token
$token = $this->user_model ->insertToken( $userInfo ->id,
$userType );
$qstring = $this->base64url_encode( $token);
$url = site_url() . 'admin/reset_password/token/' .
$qstring ;
$link = '<a href="' . $url . '">link</a>' ;
if ($this->send_forgot_pass_email( $clean, $link)) {
// first check if user is admin
if (!$userInfo = $this->user_model ->checkLogin( $clean,
'backend_user' )) {
80
// if not, check if company
$userInfo = $this->user_model ->checkLogin( $clean, $this-
>usersTable );
}
if (!$userInfo ) {
$this->session->set_flashdata( 'flash_message' , 'The
login was unsuccessful' );
redirect(site_url() . 'admin');
}
foreach ($userInfo as $key => $val) {
$this->session->set_userdata( $key, $val);
}
redirect(site_url() . 'admin');
}
}
public fu nction logout()
{
$this->session->sess_destroy();
redirect(site_url() . 'admin/login' );
}
public function forgot()
{
$this->form_validation ->set_rules( 'email', 'Email',
'required|valid_email' );
if ($this->form_validation ->run() == FALSE) {
$this->load->view('admin/page_forgot' );
} else {
$email = $this->input->post('email');
$clean = $this->security ->xss_clean( $email);
$userType = 'admin';
if (!$userInfo = $this->user_model –
>getUserInfoByEmail( $clean, 'backend_user' )) {
$userType = 'company' ;
$userInfo = $this->user_model –
>getUserInfoByEmail( $clean, $this->usersTable );
}
if (!$userInfo ) {
$this->session->set_flashdata( 'flash_message' , 'We can
not find your email address' );
redirect(site_url() . 'admin/login' );
}
if ($userInfo ->status != $this->status[2]) { //if status is
not comple ted
$this->session->set_flashdata( 'flash_message' , 'Your
account is not in approved status' );
redirect(site_url() . 'admin/login' );
}
//build token
$token = $this->user_model ->insertToken ($userInfo ->id,
$userType );
$qstring = $this->base64url_encode( $token);
$url = site_url() . 'admin/reset_password/token/' .
$qstring ;
$link = '<a href="' . $url . '">link</a>' ;
if ($this->send_forgot_pass_em ail($clean, $link)) {
$cleanPost ['user_id' ] = $userInfo ->id;
unset($cleanPost ['passconf' ]);
if (!$this->user_model ->updatePassword( $cleanPost , $table))
81
{
$this->session->set_flashdata( 'flash_message' , 'There
was a problem updating your password' );
} else {
$this->session->set_flashdata( 'flash_message' , 'Your
password has been updated. You may now login' );
}
redirect(site_url() . 'admin/login' );
}
}
public function base64url_encode( $data)
{
return rtrim(strtr(base64_encode ($data), '+/', '-_'), '=');
}
public function base64url_decode( $data)
{
return base64_decode (str_pad(strtr($data, '-_', '+/'),
strlen($data) % 4, '=', STR_PAD_RIGHT ));
}
public function get_user_profile()
{
$userSession = $this->session->userdata ;
if (empty($userSession ['id'])) {
redirect(site_url() . 'admin/login' );
}
$this->load->view('admin/page_profile' , array('user' =>
$userSession ));
}
}
B. CD / DVD
A dvd with the presentation and dissertation paper has been included.
Copyright Notice
© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.
Acest articol: Șef lucrări dr. ing. Stefan Udristoiu SEPTEMBRIE 2019 CRAIOVA ii UNIVERSITATEA DIN CRAIOVA FACULTATEA DE AUTOMATICĂ, CALCULATOARE ȘI ELECTRONICĂ… [604782] (ID: 604782)
Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.