Licenta Stancu Horia Bogdan V1.6 [617290]

UNIVERSITATEA TEHNIC Ă DE CONSTRUCȚ II BUCURE ȘTI

FACUL TATEA DE HIDROTEHNIC Ă
SPECIALIZAREA: AUTOMATICĂ ȘI INFORMATICĂ APLICATĂ

PROIECT DE DIPLOMĂ

Absolvent: [anonimizat]:
Ș.l. dr.ing.Ramona Oana FLANGEA

BUCUREȘTI
2017

UNIVERSITATEA TEHNIC Ă DE CONSTRUC ȚII BUCURE ȘTI

FACUL TATEA DE HIDROTEHNIC Ă
SPECIALIZAREA: AUTOMATICĂ ȘI INFORMATICĂ APLICATĂ

Aplica ție informatică pentru administrarea
resurselor umane dintr -o organizaț ie

Absolvent: [anonimizat]:
Ș.l. dr.ing.Ramona Oana FLANGEA

BUCUREȘTI
2017

1
Contents
Capitolul I Introducere în tematica lucrarii ………………………….. ………………………….. ………………………….. …. 3
Capitolul II Concepte si tehnologii utilizate in elaborarea proiectului ………………………….. ………………………. 5
2.1. Pagini WEB ………………………….. ………………………….. ………………………….. ………………………….. ……….. 5
2.2. Serverul WEB ………………………….. ………………………….. ………………………….. ………………………….. .. 6
2.3. Tehnologia bazelor de date ………………………….. ………………………….. ………………………….. …………. 7
2.3.1. Evoluția organizării datelor ………………………….. ………………………….. ………………………….. ….. 7
2.3.2. Avantajele sistemelor de gestiune a bazelor de date ………………………….. ………………………… 8
2.3.3. Dezavantajele sistemelor de g estiune a bazelor de date ………………………….. …………………… 9
2.3.4. Limbajul SQL ………………………….. ………………………….. ………………………….. ……………………… 9
2.4. Limbajul PHP ………………………….. ………………………….. ………………………….. ………………………….. .11
2.5. Limbajul HTML ………………………….. ………………………….. ………………………….. ………………………… 13
2.6. Limbajul CSS ………………………….. ………………………….. ………………………….. ………………………….. ..13
2.7. Limbajul JavaScript ………………………….. ………………………….. ………………………….. …………………… 15
2.8. Conceptul MVC ( Model -View -Controller ) ………………………….. ………………………….. ……………….. 17
2.9. Framework -ul CodeIgniter ………………………….. ………………………….. ………………………….. ………… 21
Capitolul III Instrumente informa tice folosite ………………………….. ………………………….. ………………………… 23
3.1. HeidiSQL ………………………….. ………………………….. ………………………….. ………………………….. ……. 23
3.2. PhpStorm ………………………….. ………………………….. ………………………….. ………………………….. ……24
3.3. phpMyAdm in ………………………….. ………………………….. ………………………….. ………………………….. 25
3.4. MySQL Workbench ………………………….. ………………………….. ………………………….. ………………….. 26
3.5. Notepad++ ………………………….. ………………………….. ………………………….. ………………………….. ….28
3.6. GitHub ………………………….. ………………………….. ………………………….. ………………………….. ……….. 29
Capitolul IV Studiu de caz – Aplicatie informatica pentru administrarea resurselor umane dintr -o organizatie
………………………….. ………………………….. ………………………….. ………………………….. ………………………….. ……31
4.1. Configurare ………………………….. ………………………….. ………………………….. ………………………….. …31
4.2. Descrierea aplica ției ………………………….. ………………………….. ………………………….. …………………. 32
4.2.1. Autentificarea in aplicație ………………………….. ………………………….. ………………………….. …..33

2
4.2.2. Descrierea bazei de date ………………………….. ………………………….. ………………………….. ……. 34
4.2.3. Modulul Admin ………………………….. ………………………….. ………………………….. ………………… 35
4.2.4. Validarea contului ………………………….. ………………………….. ………………………….. …………….. 47
4.2.5. Modulul Angajat (user) ………………………….. ………………………….. ………………………….. ……… 51
4.2.6. Plugin -uri folosite ………………………….. ………………………….. ………………………….. ……………… 54
Capitolul V Concluzii, perspective si contributii ………………………….. ………………………….. ………………………. 56
Bibliografie ………………………….. ………………………….. ………………………….. ………………………….. ……………….. 59
Capitolul VI Anexe – cod sursa ………………………….. ………………………….. ………………………….. …………………. 61
Anexa1 – Fișierul javascript pentru editarea unui utilizator ………………………….. ………………………….. ……61
Anexa2 – Metoda pentru adăugarea unui nou angajat ………………………….. ………………………….. …………. 64
Anexa3 – Pagina addsalary ………………………….. ………………………….. ………………………….. …………………… 67
Anexa4 – Metoda downloadPDF ………………………….. ………………………….. ………………………….. …………… 70
Anexa5 – Fișierul mystyle.css ………………………….. ………………………….. ………………………….. ……………….. 74

3
Capitolul I Introducere în tematica lucrarii

Din cele mai vechi timpuri omul a simțit nevoia să cunoască spațiul înconjurător, și
materializarea gândirii sale într -un limbaj matematic de bază. Odată cu evoluția omului au
evoluat și problemele acestuia, so luția la aceasta a fost inventarea unei mașini de calcul ce îi va
schimba radical modul de viață.
Dezvoltarea rapidă din ultima perioadă a resurselor software și hardware din domeniul
tehnologiei informației are meritul de a oferi o mai bună comunicare și un acces mult mai rapid la
toate categoriile de informații.
Se poate zice, pe drept cuvânt că trăim într -o societate informatizată , unde întâlnim
calculatoare peste tot, de la apartamentele și casele î n care lo cuim, majoritatea dintre noi deținând
fiecare câte un calculator personal, dacă nu chiar ș i un laptop ș i un dispozitiv cu acces la internet
cum ar fi tableta sau telefon ul mobil cu caracteristici inteligente(smartphone). Toate acestea au
posibilitatea de a avea acces la internet. Peste tot există calculatoare, legate eventual între ele și
formân d astfel rețele de calculatoare, ce ne permit să rămânem conectați la toate sistemele ce ne
sunt puse la dispoziție. Toate acestea se datorează faptului că ne dăm seama din ce în ce mai mult
că sistemele de calc ul, calculatoarele ne ușurează munca și viața prin utilizarea lor.
Să analizăm puțin cât de mult s -a schimbat lumea de când au apărut calculatoarele.
Înaintea apariției calculatoarelor orice tip de informație era așternută pe hârtie, scrisă cu mâna sau
în cel mai bun caz scrise la dactilograf. Marele dezavantaj al acestei metode era că acele hârtii se
pierdeau, sau pu r și simplu se deteriorau, dar ș i menținerea evidenței acestora era mult mai
dificilă. Apariția calculatorului și a utilitarelor acestuia repr ezintă un mare pas în față.
Odată cu introducerea calculatoarelor în mediile de lucru, salvarea datelor sau
documentelor a devenit mult mai facilă, salvarea făcându -se pe discul magnetic, astfel oferindu –
se următoarele avantaje: datele erau securizate, afl ate într -un loc sigur, nu se deteriorau, accesul
fiind acordat doar persoanelor care erau desemnate pentru utilizarea acestora.
Având în vedere necesitatea oamenilor de a fi informați și de a avea acces ușor la
informaț ii, și profitand de suporturile ofer ite din domeniul internetului si tehnologiile pus e la
dispoziț ie de acesta, prezen ta lucrare a putut lua nastere.
Aplicaț ia cu titlul “ UpWeGo ” – așa cum am decis să o numesc – își propune să pună la
dispoziția ut ilizatorilor accesul la informaț ii legate de situațiile financiare pe care angajaț ii unei

4
companii le dețin, precum si informaț ii legate de statutul acestora, toate aceste informaț ii fiind
accesibile prin intermediul unei platforme Web.
Aplicația cuprinde două module – modulul de administrator care e administrat de către
partea de conducere a companiei, precum și modulul de angajat care este accesibil doar
persoanelor angajate în cadrul companiei. Modulul administrator oferă posibilități cum ar fi :
adăugarea unui nou angajat, administrarea personalu lui și vizualizarea statutului acestora.
Modulul angajat oferă informații angajatului din cadrul companiei cu privire la statutul acestuia
în companie și informații legate de starea financiară a acestuia. Aplicaț ia este concepută a fi la
îndemâ na utilizato rilor, având o interfață accesibilă și intuitivă, ceea ce duce la o navigare ușoară
și implicit, oferă utilizatorului o experiență placută și de calitate.

5
Capitolul II Concepte si tehnol ogii utilizate in elaborarea
proiectului

2.1. Pagini WEB

O pagină web este o resursă aflată în spațiul web (WWW) din Internet, de obicei în
format HTML sau XHTML (extensia numelui fișierului fiind de cele mai multe ori .html sau
.htm) și având hiperlinkuri (hiperlegături) pentru navigarea simplă de la o pagină sau secțiune de
pagină la alta. Pagina web se numește astfel deoarece ea se poate afișa pe un monitor sau ecran de
calculator și se aseamănă într -o oarecare măsură cu o pagină de ziar. Lățimea paginii web este de
obicei astfel făcută ca ea să încapă în înt regime pe lățimea ecranului disponibil. În schimb
înălțimea ei o poate depăși cu mult pe cea a ecranului. În aceste cazuri browser -ul permite de
obicei vizionarea simplă și rapidă a întregii pagini, și anume prin "tragerea" paginii în sus și în
jos, după d orință.
Pentru a furniza nu numai texte dar și imagini și sunete, paginile web utilizează deseori
fișiere grafice sau sonore integrate, dar și hiperlinkuri către alte resurse neintegrate în pagina
respectivă. [1]

O pagină web poate conține:
– texte în cele mai diferite formate (forme, mărimi, culori, poziții etc.) ;
– imagini (fișiere cu formatele .gif, .jpeg, .png ș.a.m.d.) ;
– audio (fișiere în formatele .mid, .wav ș.a.m.d.) ;
– conținut multimedia interactiv care, pentru a fi văzut și utilizat, necesită de obicei un
plugin ca de ex. cu formatul Adobe Flash sau Adobe Shockwave ;
– miniaplicații (așa -numite "applets") – subprograme care rulează la chemarea paginii și
care deseori oferă filme, imagini, interacțiune și sunete.
Paginile web mai pot conține și elemente care nu sunt făcute pentru a fi afișate de browser,
cum ar fi:
– scripturi (de obicei în formatul JavaScript), care adaugă paginii funcționalitate

6
suplimentară (de exemplu creează efecte vizuale sau verifică datele introduse intr -un
formular web);
– meta -etichete – furnizează informații despre pagină, instrucțiuni pentru roboții motoarelor
de căutare, etc. Cuvintele cheie și celelalte descrieri din meta -etichete ajută motoarele de
căutare să catalogheze pagina corect și, în cazul acțiunilor de căutare, să ofere rap id
informa ții și rezultate;
– foi de stil (așa -numite "Cascading Style Sheets" sau "CSS"), care stabilesc modul cum
este formatată pagina ;
– comentarii .
Atenție, paginile web mai pot conține și așa -numiți viruși informatici precum și alte funcțiuni
dăunătoare (malițioase) dar greu de văzut/recunoscut. [1]

2.2. Serverul WEB
Serverul web sau web server este serverul care stochează (găzduiește) pagini web și le
pune la dispoziția solicitanților prin protocolul HTTP. Și de dată aceasta relația server -client se
bazează pe o aplicație care este instalată pe server și care este programată să transfere paginile
web găzduite. Putem observa aici că ideea de web server presupune și noțiunea de hosting
(găzduire), asta deoarece serverul trebuie să dețină datele pe care urmează să le returneze la
cerere.
HTTP reprezintă Protocolul de transfer HyperText. HTTP este protocolul de bază utilizat
de World Wide Web și acest protocol definește modul în care mesajele sunt formatate și
transmise și ce acțiuni ar trebui să aibă serverele W eb și browserele ca răspuns la diferite
comenzi.
Relația este următoarea: utilizatorul (clientul) – aflat în dreptul unui computer pe care are
instalată o aplicație tip browser – solicită (serverului) prin intermediul unui url o anumită pagină
web; serveru l rulează anumite linii de cod și returnează un rezultat. Descrierea de mai sus se
potrivește perfect în cazul site -urilor (paginilor web) statice (adică cele bazate în exclusivitate
doar pe limbajele html și css). Există însă așa numitele site -uri dinamic e care au în compunere
alături de limbajul rudimentar de afișare a paginii web și un limbaj de comunicare între serverul
web și o bază de date. De această dată relația este următoarea: utilizatorul (clientul) aflat în
dreptul unui computer pe care are inst alată o aplicație tip browser solicită (serverului) prin

7
intermediul unui url o anumita pagină web; serverul web verifică solicitarea și prin intermediul
unui limbaj de programare special interoghează o bază de date, dacă anumite condiții sunt
intrunite, b aza de date returnează serverului web datele solicitate care la rândul lui furnizează
datele mai departe clientului inițial. În această ultimă relație între web server și utilizator sunt
transmise doar informații destinate afișării în browser într -o formă prietenoasă a informațiilor
solicitate. Până să ajungă la utilizator, așa cum am văzut mai sus, serverul web prin intermediul
unui scripting special schimbă o serie de informații cu o bază de date stocată. [2]

2.3. Tehnologia bazelor de date
2.3.1. Evoluția organizăr ii datelor
Societatea contemporană, caracterizată prin afluxul fără precedent de informație de
diferite tipuri și pe diverse canale, necesită strategii și instrumente din ce in ce mai complexe
pentru stocare, procesa re și, mai ales, interpretare. În acest context, se pune problema
transformării informației în date și organizarea acestora într -o asemenea manieră încât în orice
moment să poată fi extrase, cu promptitudine și exactitate, datele favorabile realizării unui scop
specific.
Datele sunt fapte cules e din lumea reală. Ele sunt preluate din măsurători și observații și
constituie orice mesaj primit de un receptor sub o anumită formă. O percepție a lumii reale poate
fi privită ca o serie de obiecte sau fenomene distincte sau interdependente.
Datele în s ine nu au nici un fel de semnificație. Mai mult decât atât, nefiind altceva decât
o înșiruire de litere și cifre, ele pot primi diverse interpretări, cele mai multe dintre ele fiind, de
obicei, greșite. Datele se refera la numere, fapte, diferite documente etc. Informațiile se referă la
date organizate, date care au fost filtrate și ordonate după anumite criterii. Dorința oricărui
utilizator este obținerea de informație și nu manipularea unor date seci. Un model de date corect
alcătuit oferă posibilitatea t ransformării informațiilor în date și a acestora înapoi în informații fără
a denatura sensul lor inițial. A obține informație înseamnă, de fapt, a introduce datele disponibile
într-un anumit context conferindu -le în acest fel o anume semnificație. Ceea ce se înmagazinează
într-o bază de date, așa cum am arătat, sunt datele care au o natură statică în sensul că ele rămân
în aceeași stare până în momentul modificării lor de către administratorul bazei de date prin
intermediul unui proces manual sau automat. P entru ca datele să poată fi transformate în

8
informație ele trebuie organizate astfel încât să poată fi prelucrate efectiv. Pentru a determina în
cazul unei aplicații modul de organizare a datelor, trebuie determinate acele caracteristici ale
datelor care p ermit extragerea esenței înțelesului lor.
O bază de date reprezintă o colecție integrată și structurată de date operaționale
înmagazinate pe un mediu de stocare. Sa fie ceva de Genu conform (carte document nr 17 in
bibliografie) Elsmari și Navathe definesc o bază de date sub forma unei colecții de date aflate în
asociere. Scopul unei baze de date este acela de a înmagazina datele în așa fel încât să se poată
obține informația dorită în orice moment. Informațiile, spre deosebire de date, au un caracter
dinam ic în sensul că ele se modifică în funcție de datele înmagazinate în baza de date, dar și în
sensul că ele pot fi procesate și prezentate în diverse feluri. [3]
2.3.2. Avantajele sistemelor de gestiune a bazelor de date

1. Controlul redundanței datelor
Risipa de s pațiu care se face prin stocarea acelorași informații în mai multe fișiere este mult
diminuată prin utilizarea bazelor de date, dar nu complet eliminată datorită altor cereri de
îmbunătățire a performanțelor.
2. Coerența datelor
Dacă un articol de date e înma gazinat de mai multe ori trebuie să se garanteze că toate copiile
acestuia vor fi actualizate dacă se reactualizează o valoare a sa (valoarea articolului e aceeași
pentru toate copiile sale).
3. Mai multe informații de la aceeași cantitate de date
Se pot obți ne prin integrarea fișierelor ce conțin informații diferite despre aceleași date.
4. Partajarea datelor
Datele pot fi utilizate de către mai mulți utilizatori în același timp. De asemenea se pot face
modificări sau adăugiri la baza de date existentă fără a fi necesară definirea repetată a tuturor
cerințelor referitoare la acestea.
5. Integritatea crescută a datelor
Se referă la validitatea și coerența datelor înmagazinate și se exprimă prin constrângeri (reguli
de coerență). Constrângerile se pot aplica articolel or de date din cadrul unei singure înregistrări
sau relațiilor dintre înregistrări.
6. Securitatea crescută
Se realizează prin atribuirea unor nume de utilizatori și parole ce permit identificarea
persoanelor autorizate să folosească baza de date și impun mod alitatea de utilizare a acestor date.
7. Aplicarea standardelor
Se referă la formatul datelor, convențiile privind denumirile, documentarea, procedurile de
reactualizare, regulile de acces.
8. Reducerea costurilor
Prin realizarea integrării se alocă fonduri cent ralizat și nu separat fiecărui departament.
9. Rezolvarea conflictelor

9
Fiecare utilizator va avea propriile cerințe ce pot intra în conflict cu ale altora.
Administratorul bazei de date poate lua decizii ce duc la utilizarea optimă a resurselor.
10. Creșterea acc esibilității datelor și a capacității de răspuns
Se realizează prin intermediul utilizării limbajelor de programare din generația a IV -a (ex.
SQL, QBE).
11. Creșterea productivității
Prin furnizarea unor funcții ce permit manipularea fișierelor și a introducer ii limbajelor de
programare din generația a IV -a ce reduc mult timpul de programare.
12. Independența datelor
Duce la creșterea capacității de întreținere prin faptul că descrierile datelor sunt separate de
aplicații.
13. Controlul concurenței este îmbunătățit
Se garantează că dacă doi sau mai mulți utilizatori accesează simultan aceleași date nu se
pierd informații sau nu se alterează integritatea acestora.
14. Asigurarea salvării de siguranță și a refacerii
Prin recuperarea ultimei stări coerente a bazei de date în c azul apariției unei defecțiuni hard
sau soft. [3]
2.3.3. Dezavantajele sistemelor de gestiune a bazelor de date
1. Complexitatea
Trebuie avute în vedere o serie de probleme referitoare la date care se manifestă suplimentar
față de cazul aplicațiilor clasice. Se face mai întâi o analiză amănunțită a datelor și apoi a
aplicației propriu -zise.
2. Dimensiunea
SGBD -urile ocupă mult spațiu pe disc.
3. Costul
a) sistemelor SGBD;
b) elementelor hard achiziționate;
c) conversiei aplicațiilor existente la noul SGBD și noua configura ție hard.
4. Performanța
Este mai redusă în cazul utilizării SGBD -urilor care au un caracter mai general, în locul unei
aplicații simple bazată pe fișiere care apelează o singură funcție.
5. Efectul unei defecțiuni
Este mult mai mare datorită centralizării (o d efecțiune minoră afectează toți utilizatorii). [3]
2.3.4. Limbajul SQL

“SQL (de la numele englez Structured Query Language – limbaj de interogare stru cturat )
este un limbaj de programare specific pentru manipularea datelor în sistemele de manipulare a
bazelor de date relaționale, iar la origine este un limbaj bazat pe algebra relațională. Acesta are ca
scop inserarea datelor, interogații, actualizare și ștergere, modificarea și crearea schemelor,

10
precum și controlul accesului la date. A devenit un standard în dom eniu, fiind cel mai popular
limbaj utilizat pentru creearea, modificarea, regăsirea și manipularea datelor de către SGBD -urile
(Sistemele de Gestiune a Bazelor de Date) relaționale. Pe lângă versiunile standardizate ale
limbajului, există o mulțime de dial ecte și variante, unele proprietare, fiind specifice anumitor
SGBD -uri și de asemenea conținând extensii pentru a suporta SBD -urile (Sistemele de Baze de
Date) obiectu ale (obiectual -relaționale). SQL permite atât accesul la conținutul bazelor de date,
cât și la structura acestora ”. [4]
O bază de date este o aplicație separată care stochează o colecție de date. Fiecare bază de
date are unul sau mai multe API -uri distincte pentru crearea, accesarea, gestionarea, căutarea și
replicarea datelor pe care le dețin e.

– Baza de date – O bază de date este o colecție de tabele, cu date conexe.
– Tabel – O tabelă este o matrice cu date. Un tabel într -o bază de date arată ca o foaie de
calcul simplă.
– Coloană – O coloană (element de date) conține date de același tip, de exem plu codul
poștal al coloanei.
– Rând – Un rând (= tuplu, intrare sau înregistrare) este un grup de date conexe, de
exemplu datele unui singur abonament.
– Redundanță – stocarea datelor de două ori, redundant pentru a face sistemul mai
rapid.
– Cheie primară – o cheie primară este unică. O valoare cheie nu poate apărea de două
ori într -un singur tabel. Cu o cheie, puteți găsi doar un rând.
– Cheia străină – O cheie străină este clema de legătură între două mese.
– Cheie compusă – Cheia compus (cheia compozită) este o cheie care constă din mai
multe coloane, deoarece o coloană nu este suficient de unică.
– Index – Un index într -o bază de date seamănă cu un index din spatele unei cărți.
– Integritatea referențială – Integritatea referențială asigură că valoarea unei chei
străine indică întotdeauna un rând existent.
MySQL este rapid și ușor de utilizat, folosit pentru multe întreprinderi mici și mari, care
devine atât de popular din cauza multor motive bune, printre care putem să numărăm:

11
– Este lansat sub licență open -source. D eci nu este necesară nicio plată pentru serviciile
pe care aplicația le oferă.
– Este un program foarte puternic în sine. Acesta gestionează un subset mare de
funcționalitate a celor mai scumpe și mai puternice pachete de baze de date.
– Utilizează o formă sta ndard a limbii cunoscute a datelor SQL.
– Funcționează pe mai multe sisteme de operare și cu multe limbi, inclusiv PHP, PERL,
C, C ++, JAVA etc.
– Funcționează foarte rapid și lucrează bine chiar și cu seturi de date mari.
– Este foarte prietenos cu PHP, limba c ea mai apreciată pentru dezvoltarea web.
– Suportă baze de date mari, de până la 50 de milioane de rânduri sau mai mult într -un
tabel. Limita implicită a dimensiunii fișierelor pentru o table este de 4GB, dar puteți
crește această valoare (dacă sistemul dvs. de operare se poate ocupa de ea) la o limită
teoretică de 8 milioane de terabyte (TB).
– Este personalizabil. Licența GPL open -source permite programatorilor să modifice
software -ul MySQL pentru a se potrivi propriilor medii specifice. [5]

2.4. Limbajul PHP
PHP este un limbaj de programare folosit pentru a crea site -uri de web. Prescurtarea de la
PHP: Hypertext Preprocessor (iniț ialele provin de fapt de la o versiune anterioară a programului,
care se numea: Personal Home Page Tools). Este un limbaj de programa re web open -source,
reflectiv (abilitatea unui program de a -și observa si modifica struct ura si comportamentul) folosit
în prin cipal pentru dezvoltarea aplicaț iilor server -side ( Scripting serv er-side: tehnologie web
server în care cerinț ele user -ilor sunt îndeplinite prin rularea unui script direct pe serverul web
pentru a crea pagini HTML dinamice. Este folosit de obicei pentru a crea s ite-uri web dinamice
ce interfațează cu baze de date) și a conț inuturilor web dinamice.
Principala facilitate a limbajul ui este că permit e interacțiunea cu un numă r mare de
sisteme de gestiune a bazelor de date relaționale, cum ar f i: MySql, Oracle, IBM DB2, Microsoft
SQL Server, PostgreSQL si SQLite. Php este compatibil cu majoritate a sistemelor de operare,
incluzâ nd: Unix , Linux, Windows si Mac OS X și poate interacț iona cu majoritatea serverelor
web. [6]

12
Paginile web pot fi dinamice și statice. Paginile dinamice sunt asemănătoare celor statice
cu singura deosebire ca își schimbă, cu ajutorul unor scripturi, dinamic conțin utul. Rezultatul
scripturilor sunt tot fișiere de tip text care conțin tag -uri HTML.
Ceea ce distinge PHP -ul față de Javascript este faptul că, codul este executat pe server.
Clientul primește doar rezultatul executării scriptului, nepermițând în nici un f el determinarea
codului.
Ceea mai mare parte a sintaxei este împrumutată din C, Java și Perl, cu câteva proprietăți
unice PHP -ului. Scopul acestui limbaj este de a permite programatorilior WEB dezvoltarea rapidă
și dinamică a programelor.
PHP-ul a fost dez voltat la sfârșitul anului 1994 de către Rasmus Lerdorf, și a fost utilizată
în scopuri personale. Prima versiune care a fost folosita și de alți programatori a apărut la
începutul anului 1995, fiind cunoscuta ca Personal Home Page Tools. Această versiune permitea
înțelegerea câtorva funcții și macro -uri folosite în mod regulat pentru realizarea de guestbook -uri
si de contoare. Acesta a fost momentul în care programatorii din toata lumea au început să -și
aducă contribuția la dezvoltarea limbajului. La sfârș itul anului 1997, PHP/FI era folosit în peste
50.000 de sit e-uri Web din întreaga lume. În 1997, Zeev Suraski și Andi Gutmans au rescris de la
zero serverul de PHP/FI, iar noua versiune lansată pe piață a devenit cunoscută sub denumirea de
PHP3. La mijlocu l anului 1999, numărul de servere pe care rula PHP -ul ajunsese la 1.000.000.
PHP-ul este realizat și distribuit în sistemul OpenSource, ceea ce face din acest limbaj
unul foarte utilizat pe scară largă. PHP -ul este foarte utilizat și datorită faptului că este foarte ușor
de folosit și se poate integra în codul html la fel de ușor.

Pentru a scrie un fișier în PHP avem nevoie doar de un editor de texte tot ca și în cazul
paginilor HTML singura deosebire este că paginile trebuie salvate în format PHP , sau po ate fi
folosit un IDE . IDE-ul este acronim pentru “integrated development environment” – se traduce ca
un mediu integrat de dezvoltare, care este o suită de software care consolidează instrumentele de
bază pe care dezvoltatorii trebuie să le scrie și să te steze software -ul.
Scripturile PHP sunt întotdeauna incluse între două taguri PHP, conform acele iași scheme
ca și în HTML. Astea s pun serverului să preia informaț ia dintre ele și să o interpreteze ca
expresie din PHP. [7]

13
2.5. Limbajul HTML

În 1990 Tim Berner s-Lee, fizician la CERN Geneva, dezvoltă protocoalele de
comunicație pentru World Wide Web, creând și limbajul HTML (Hypertext Markup Language).
Limbajul HTML este un meta limbaj (limbaj descriptiv de marcare) care utilizează
indentificatori de marcare des criptivi (tag -uri) pentru identificarea distinctivă a conținutului
documentului.
Instrucțiunile pe care le folosim într -o pagină HTML se numesc tag -uri și acestea indică
browser -ului (Netscape, Internet Explorer, Mozilla Firefox, Google Chrome, Opera, etc. ) modul
de prezentare a informației din pagina. Tag -urile se scriu între semnele “<” și “>”.
Documentele de tip HTML sunt independente de platformă, singura condiție este ca
utilizatorul să aibă un browser de internet care să decodifice informația provenit ă de la server.
Pentru crearea unui fișier html nu avem nevoie decât de un editor de texte, care să poată
salva în format ASCII: notepad, word. Există însă și programe specializate care au suport și
pentru alte limbaje cum ar fi Macromedia Dreamweaver, Fro ntpage. [8]
HTML nu este un limbaj de programare. HTML s -a dezvoltat ca un subdomeniu al
SGML(Standard Generalized Markup Language) care este un limbaj de marcare mai avansat ș i a
fost mult timp favoritul DoD(Department of Defense). Problema schimbului de informație între
două sau mai multe calculatoare este o proble mă extrem de complexă . Rez olvarea acestei
probleme implică existenț a unor "reguli de comun icare" pe care calculatoarele să le respecte. O
comunicare reală între două părț i – fie ele calculatoar e sau nu – se bazează pe faptul că informația
oferită de una di ntre parți poate fi preluată și mai apoi înțeleasă de către cealaltă. Regulile după
care două calculatoare care rulează sub dife rite sisteme de operare comunică sunt stabilite de
către protocoa le. Dar î n afara acestor reguli mai apare nevoia existenț ei unui "limbaj " pe care
ambele calculatoare să -l inteleaga. Î n WWW (World Wide Web), acesta est e limbajul HTML.
Redus la esență , HTML (Limbajul de Marcare HiperText) este alcă tuit dintr -un set de ma rcaje,
coduri speciale inserate în conț inutul unui text, care o feră unui program nu mit interpretor de
HTML informaț ii despre modul de formatare a conținutului unui document și despre legăturile
acestuia cu alte fiș iere. [9]
2.6. Limbajul CSS

14
Denumirea de CSS p rovine din limba engleză de la cascading style sheets, care se poate
traduce ca fiind foi de stil în cascadă, stiluri ce pot fi definite atât inline(în interiorul etichetelor),
în headerul unei pagini web, cât și într -un fișier separat, individual, cea de -a treia variantă fiind
cea recomandată – pentru descrierea prezentării unui document scris într -un limbaj de marcare.
Limbajele de marcare sunt destinate procesării, definirii și prezentării textului. Limbajul
specifică codul pentru formatare, atât aspect ul, cât și stilul, într -un fișier text. Codul utilizat
pentru a specifica formatarea se numește etichetă (tag). HTML este un exemplu de limbaj de
marcare cunoscut și folosit.
Etichetele HTML au fost concepute inițial pentru a defini conținutul unui documen t,
pentru a structura documentul. Structura documentului (formularul) trebuia să fie preluată de
browser, fără a utiliza nici o etichetă de formatare.
Pe măsură ce s -a dezvoltat HTML, noi etichete și atribute au fost adăugate la standard și
HTML a trebuit să includă diverse opțiuni de formatare pe ntru a realiza modele frumoase . A
devenit din ce în ce mai dificil să se creeze site -uri web în care conținutul documentelor HTML
să fie clar separat de aspectul prezentării documentului. Pentru a rezolva această p roblemă au fost
create CSS -uri.
Împreună cu HTML și JavaScript, CSS este o tehnologie de piatră de temelie folosită de
majoritatea site -urilor web pentru a crea pagini Web accesibile, interfețe utilizator pentru aplicații
web și interfețe pentru utilizator i pentru multe aplicații mobile.
CSS este utilizat de atât de autorii cât și de cititorii de pagini web pentru a defini culori,
fonturi, layout, precum și alte aspecte legate de prezentarea documentelor. El este conceput în
primul rând pentru a permite sep ararea documentului ca și conținut (scrise în HTML sau un
Markup Language similar) de documentul de prezentare (scris în CSS).
Această separare poate îmbunătăți accesibilitatea conținutului, să ofere o mai mare
flexibilitate și poate diminua caietul de sar cini al celui care se ocupă de mentenanța unui site web
prin asigurarea unui control mai simplu. De asemenea CSS -ul poate reduce complexitatea și
repetarea tag -urilor folosite pentru formatare din structura conținutului. CSS poate, de asemenea,
permite ca aceeași pagină să fie prezentată în diferite stiluri de redare pentru diferite medii, cum
ar fi pe ecranul unui calculator, în imprimare sau vocal(când este redat printr -un cititor de ecran.
O dată cu apariția sa, mulți dezvoltatori web au considerat că C SS este un mod de
formatare mult mai puternic și mai ușor de utilizat, și au considerat că <FONT> este un tag

15
învechit. În 2006 (s -a facut Update), capabilitățile CSS -ului au fost îmbunătățite considerabil în
ceea ce privește design -ul layout -ului unei pa gini web. Cu toate acestea, multe site -uri web încă
utilizează CSS numai pentru formatarea textului, în timp ce, pentru layout folosesc tabele. Pentru
că Internetul este într -o creșterea rapidă, datorită utilizarii tot mai frecvente a telefoanelor mobile
și a PDA -urilor, este necesară crearea unor pagini web accesibile utilizatorilor care folosesc o
mare varietate de dispozitive. Un design web fară tabele îmbunătățește considerabil
accesibilitatea, în acest sens.
Autoritatea în ceea ce privește acest tip d e fișiere, este deținută de World Wide Web
Consortium (sau W3C ). Aceștia oferă specificațiile complete, lista browserelor care suportă
CSS, instrumente de validare, precum și informații despre învățare a CSS . [10]

2.7. Limbajul JavaScript

JavaScript (JS) este un limbaj de programare orientat obiect bazat pe conceptul
prototipurilor. Este folosit mai ales pentru introducerea unor funcționalități în paginile web, codul
Javascript din aceste pagini fiind rul at de către browser. Limbajul este binecunoscut pentru
folosirea sa în construirea sit e-urilor web, dar este folosit și pentru ac cesul la obiecte încastrate
(embedded objects) în alte aplicații. A fost dezvoltat inițial de către Brendan Eich de la Netscape
Communications Corporation sub numele de Mocha, apoi LiveScript, și denumit în final
JavaScript.
În ciuda numelui și a unor similarități în sintaxă, între JavaScript și limbajul Java nu
există nicio legătură. Ca și Java, JavaScript are o sintaxă apropiată de cea a limbajului C, dar are
mai multe în comun cu limbajul Self decât cu Java. [11]
JavaScript este un limbaj interpretat (adică scriptul este executat direct, fără compilare
prealabilă) care, în general, este înglobat direct în paginile HTML.
JavaScri pt poate reacționa la evenimente:

16
– Un cod JavaScript poate fi proiecta să se execute când se întâmplă ceva, spre exemplu
când pagina s -a încărcat complet sau utilizatorul acționează un element HTML
JavaScript poat e citi și scrie elementele HTML:
– Un cod Java Script poate citi și modifica conținutul unui element HTML
JavaScript poate fi folosit pentru a valida datele:
– Un cod JavaScript poate fi folosit pentru a valida datele înainte de a fi trimise către
server. În acest fel serverul nu mai face procesări supl imentare.
JavaScript poate fi folosit pentru a detecta browserul u tilizatorului:
– Un cod JavaScript poate detecta tipul browserului și poate încărca o pagină proiectată
special pentru tipul respectiv de browser
JavaScript poate fi folosit pentru a crea co okies :
– Un cod JavaScript poate fi utilizat pentru a stoca și extrage informații pe calculatorul
vizitatorului paginii HTML
Important de reținut este faptul ca JavaScript -ul poate fi declarat atât în interiorul etichetei
de HTML “<head>”, dar și în interio rul etichetei “<body>”. Dacă scriptul este inclus în secțiunea
body, el va fi executat cât timp se încarcă pagina. Dacă scriptul este inclus în secțiunea head, el
va fi executat numai când este apelat. [12]
Dacă se dorește a fi utilizat același script în mai multe pagini web fără a fi rescris codul,
trebuie ca scriptul JS să fie inclus într -un fișier extern. Fișierul trebuie să aibă extensia .js și nu
poate conține tagul “<script>”, care este insă necesar la declararea aflată în interiorul secțiunii
body sau head.

17
2.8. Conceptul MVC ( Model -View -Controller )

Figura 2.1. Schema Model -View -Controller
Modelul -View -Controller (MVC) este un model arhitectural care separă o aplicație în trei
componente principale logice: modelul, vizualizarea și cont roller-ul. Fiecare dintre aceste
componente sunt construite pentru a trata aspectele specifice ale unei aplicații. MVC este unul
dintre cele mai frecvent utilizate platforme de dezvoltare web standard pentru a crea proiecte
scalabile și extensibile. [13]

Model
Comp onenta Model corespunde cu toată logica cu care lucrează utilizatorul. Aceasta
poate reprezenta fie datele transferate între componentele View și Controller, fie orice alte date
legate de logica de afaceri. De exemplu, un obiect al clientului va prelua informațiile despre
client din baza de date, va manipula și le va actualiza înapoi în baza de date. [13]

18
View
Componenta Vizualizare este utilizată pentru întreaga logică UI (user -interface) a
aplicației. De exemplu, vizualizarea clienților va in clude toate componentele UI, cum ar fi casete
de text, dropdown -uri etc. cu care inte racționează utilizatorul final. [13]

Controller
Control ler-ele acționează ca o interfață între componentele Model și View pentru a
procesa toate logica de afaceri și cere rile de intrare, pentru a manipula datele utilizând
componenta Model și pentru a interacționa cu Vizualizările pentru a face ieșirea finală. De
exemplu, control ler-ul client va gestiona toate interacțiunile și intrările din vizualizarea clientului
și va ac tualiza baza de date utilizând modelul client. Același control ler va fi utilizat pentru
vizualizarea datelor despre client. [13]
Detaliere
Conceptul de design Model -View -Controller, în documentația de specialitate folosit și sub
forma scurtă de MVC, a apăr ut ca o necesitate de a transpune metodele tradiționale de gestionare
a datelor în mediul "virtual", mai exact a apărut în scopul de a ușura modul de lucru al
utilizatorilor respectând aceleași principii de bază și diferențiindu prin instrumentele folosite .
MVC a fost mai întâi întâlnit la limbajul Smalltalk dar a fost folosit pe scară largă ani mulți de -a
rândul suferind mai multe redefiniri. Totuși principiile de baza ale conceptului sunt ușor de
înțeles, în schimb detalierile sunt îndeajuns de complexe î ncât să lanseze multe dezbateri și să se
întâlnească implementări contradictorii.
Într-o aplicație bazată creată astfel încât să respecte acest concept, partea de model va
lucra doar cu starea aplicației și cu logica ei, nu va conta cum este sau va fi repr ezentată această
stare către utilizator sau cum interacționează acesta cu aplicația. Tot așa, partea de "view", este
preocupată doar cu crearea interfeței utilizator în funcție de datele și mai ales a schimbărilor
stărilor acesteia, recepționate de la "mod el". Pentru ea nu contează logica aplicației sau cum are
loc procesul de "input", ci doar reprezentarea cât mai corectă a stării curente a modelului. Și în
final, "controller" -ul se ocupă cum translatarea acțiunilor prestate de utilizator în "update" -uri
către model, nefiind important la ce va folosi modelul aceste "update" -uri.
Astfel, avem următoarea corespondență:

19
Introducere→ Procesare → Rezultat
Controller → Model → View
Încercând să intrăm mai în detaliu, avem acționarea utilizatorului, modelarea lum ii reale,
și răspunsul vizual al sistemului către utilizator sunt separate și controlate de obiectele "model",
"viewport" și "controller". O vedere pe scurt a ordinii sub care are loc comunicarea între obiecte
se poate face astfel: "controller" -ul interpre tează semnalele introduse cu ajutorul "Mouse" -ului și
al tastaturii de către utilizator și furnizează mai departe (ca rezultat) niște comenzi care sunt
trimise către "model" sau/"viewport" pentru a se putea efectua schimbările necesare. "Modelul"
gestionea ză unul, sau mai multe, elemente ale unei surse de date, furnizând atât un răspuns cu
situația, starea, exactă a sistemului, cât și posibilitatea de a schimba această stare. Și nu în ultimul
rând "viewport" -ul este partea vizuală pentru utilizator a aplica ției, este gestionarul modului sub
care sunt prezentate datele utilizatorului utilizând totodată o parte grafică și/sau o vizualizare sub
formă doar de text.
"Model" -ul este utilizat la organizarea informației și anunțarea când aceasta se modifică.
El con ține doar date și funcționalități care sunt legate printr -un scop comun. Dacă ar fi fost cazul
de a modela date din două grupuri care nu sunt legate intre ele, s -ar fi creat două modele separate.
Un model va conține mai mult decât date și funcții care ope rează pe aceste date. Scopul
unui model este de a realiza o aproximare, sau abstractizare, în mediul informațional al unor
procese sau sisteme din lumea reală. El nu trebuie să se limiteze la a captura starea unui preces
sau sistem, ci chiar la cum acel si stem funcționează, ceea ce face foarte ușoară folosirea modelării
din lumea reală la definirea propriilor sisteme.
"View" -ul este responsabil de legarea elementelor grafice unui element hardware. De
obicei un "view" are o corespondență unu -la-unu cu supraf ața unui "display"și știe cum să o
folosească. De fapt un "view" se leagă de un "model" și ne înfățișează conținutul lui pe un
"display", chiar mai mult, când modelul se va modifica, "view" -ul în mod automat va redesena
partea afectată a imaginii pentru a se vedea acele schimbări. Se pot adăuga mai multe modele de
"view" la același model, și fiecare din aceste "view" -uri redau bucăți din model pe display -uri
diferite.
Separarea codului ce stă la baza unei aplicații în cele trei componente ale conceptului
MVC va aduce următoarele beneficii directe:
– Permite mai multe reprezentări (views) ale aceeași informații (model) ;

20
– Permite interfețelor utilizator (views) să fie ușor adăugate, înlăturate sau modificate,
în ambele faze, compilare sau/și execuție ;
– Permite uș oara modificare a răspunsurilor la "input" -urile utilizatorului (controller)
atât în timpul compilării cât și în timpul execuției ;
– Promovează reutilizarea (Exemplu: o vizualizare (view) poate fi folosită împreună cu
modele diferite) ;
– Permite mai multor dez voltători să actualizeze simultan interfața, logica sau "input" -ul
unei aplicații fără a afecta celălalt cod sursă ;
– Ajută dezvoltătorii să se orienteze, la un moment dat, doar pe un singur aspect al
aplicației .
În ciuda beneficiilor prezentate în rândurile de mai sus acest concept nu se pretează la
toate aplicațiile, el se adresează mai mult aplicațiilor de anvergură decât celor mici.
Comunicarea in cadrul MVC
Deși părțile "model", "view" și "controller" în cadrul modelului "Model -View -Controller"
sunt inte nționat despărțite, între ele trebuie să existe o comunicare regulată. Partea de modelul
trebuie să anunțe modificările de stare părții de view. Partea de view trebuie să pregătească partea
de controller pentru recepționarea de evenimente de la utilizator și, posibil, să solicite date de la
partea de model. Partea de controller trebuie să facă actualizării ale părții de model, și posibil, să
înprospăteze partea de view ca răspuns la evenimentele generate de utilizator.
Pentru a facilita această comunicare, fiecare obiect al MVC trebuie să păstreze o referință
către celălalt(e) obiect(e) cu care interacționează. Concret, instanța model are nevoie de o
referință care folosește instanței view la crearea reprezentării modelului, în timp ce părțile de
view și con troller au nevoie fiecare de o referință la model și referințe reciproce, una către
cealaltă. [14]

21
2.9. Framework -ul CodeIgniter

În cadrul programării pe calculator, un framework este o abstractizare în care software -ul
care furnizează funcționalități ge nerice poate fi schimbat selectiv prin cod suplimentar scris de
utilizator, oferind astfel software -ul specific aplicației. Un framework oferă o modalitate standard
de a construi și implementa aplicații. Framework -ul este un mediu software universal reutil izabil
care oferă funcționalități deosebite ca parte a unei platforme software mai mari pentru a facilita
dezvoltarea de aplicații software, produse și soluții. Framework -urile pot include programe de
suport, compilatoare, biblioteci de coduri, seturi de i nstrumente și interfețe de programare a
aplicațiilor (API) care reunesc toate componentele diferite pentru a permite dezvoltarea unui
proiect sau a unui sistem.
CodeIgniter este un cadru de dezvoltare a aplicațiilor – un set de instrumente – pentru
persoan ele care construiesc site -uri web folosind PHP. Scopul său este de a permite dezvoltarea
unor proiecte mult mai rapid decât s -ar putea, dacă s -ar scrie codul de la zero, oferind un set
bogat de biblioteci pentru sarcinile obișnuite, precum și o interfață s implă și o structură logică
pentru a accesa aceste biblioteci. CodeIgniter permite concentrarea creativă exclusivă asupra
proiectului, minimizând cantitatea de cod necesară pentru o anumită sarcină.
CodeIgniter utilizează abordarea Model -View -Controller, c are permite o mare separare
între logică și prezentare. Acest lucru este deosebit de importantă pentru proiectele în care
designerii lucrează cu fișierele tip șablon, deoarece codul pe care aceste fișiere îl conțin va fi
redus la minimum.
CodeIgniter are o abordare destul de slabă pentru MVC deoarece modelele nu sunt
necesare, aplicația putând fi construită doar pe baza controller -elor și view -urilor.
Din punct de vedere tehnic și arhitectural, CodeIgniter a fost creat cu următoarele
obiective:
Instanție d inamică. În CodeIgniter, componentele sunt încărcate și rutinele executate
numai atunci când sunt solicitate, decât la nivel global. Nu există nicio presupunere făcută de
sistem cu privire la ceea ce ar putea fi necesar dincolo de resursele minime de bază, deci sistemul
este foarte greu în mod implicit. Eveniment ele, declanșate de cererea HTTP, control ler-ele și
view -urile care sunt proiectate , vor determina ce se invocă.

22
Cuplaj slab . Cuplajul este gradul în care componentele unui sistem se bazează unul pe
celălalt. Cu cât există mai puține componente care depind una de cealaltă, cu cât sistemul devine
mai reutilizabil și mai flexibil .
Singularitatea componentelor . Singularitatea este gradul în care componentele au un
scop strict concentrat. În CodeIgniter, fiecare clasă și funcțiile acesteia sunt foarte autonome
pentru a permite o utilitate maximă.
CodeIgniter este un sistem dinamic dinamic, slab cuplat, cu singularitate ridicată a
componentelor. Se străduiește pentru simplitate, flexibilitate și performanță ridicată într -un
pachet de dimensiuni reduse. [15]

23
Capitolul III Instrumente informatice fol osite
3.1. HeidiSQL
Heidi SQL este fără îndoială unul dintre cele mai puternice utilitare pentru crearea și
gestionarea bazelor de date (Microsoft SQL Server, MySQL și PosgreSQL). Poate fi descărcat și
ca utilitar portabil, ocupând mai puțin de 10 M B. Are I ntellisense avansat si poate fi folosit
pentru interogări MySQL sigure sub raportul sintaxei, funcțiilor și c onținut (tabelă/coloană),
dacă IDE -ul nostru PHP nu are această funcționalitate. [16]
HeidiSQL este un instrument util și fiabil conceput pentru dezvoltatorii web care utilizează
serverul popular MySQL, bazele de date Microsoft SQL și PostgreSQL. Permite răsfoirea,
editarea datelor, crearea si editarea de tabele, vizualizări, proceduri, declanșatoare și evenimente
programate. De asemenea, pot fi exportate structuri și date fie în fișiere SQL, fie în clipboard, fie
pe alte servere. [17]
HeidiSQL vine cu o serie de posibilități, printre care numărăm:
– Gratuit pentru toată lumea, OpenSource d e la 9 ani de dezvoltare activă;
– Permite conectarea la mai multe servere într -o singură fereastră ;
– Permite conectarea la servere prin linia de comandă ;
– Permite conectarea prin tunel SSH transmite setările SSL ;
– Permite crearea și edita rea tabele lor, vizualizări, rutine stocate, declanșatoare și
evenimente programate;
– Generează exporturi plăcute SQL, comprimate ulterior sau copiate în clipboard;
– Export ă de la un singur server / bază de date direct la alt server / bază de date ;
– Gestion ează privilegiile utilizatorilor ;
– Import ă fișiere text ;
– Exportă rânduri de tabele ca CSV, HTML, XML, SQL, LaTeX, Wiki Markup și PHP
Array ;
– Căut ă și edit ează datele de tabel utilizând o rețea confo rtabilă ;
– Tabelele de editare în bloc ;
– Permite insera rea de ascii sau fișiere binare în tabele ;
– Scrie interogări cu evidențierea sintaxei personalizabile și finalizarea codului ;
– Monitorizează și ucide procesele client ;

24
– Găsește un text specific în toate tabe lele tuturor bazelor de date ale unui singur server ;
– Optimiz ează și repar ă tabelele în mod discontinuu ;
– Lans ează o fereastră de linie de comandă paralelă mysql.exe folosind setările de
conexiune curente . [17]

Figura 3.1. SGBD HeidiSQL

3.2. PhpStorm
PhpStorm este un mediu integrat de dezvoltare pentru dezvoltatorii PHP, construit pe
platforma IntelliJ IDEA. PhpStorm moștenește toate funcționalitățile legate de web ale IntelliJ
IDEA pentru editarea PHP, HTML, CSS, JavaScript, XML, care lucrează cu VCS, SQL și
adaugă suport avansat pentru celelalte instrumente specifice dezvoltării web.
PhpStorm vă oferă următoarele caracteristici avansate:
– Editor inteligent: pentru PHP, HTML, CSS, JavaScript și XML, care include
evidențierea sintaxei, căutarea d e documentație și refactorizări;
– Cod de eroare fără erori: analiza codului on -the-fly, evidențierea erorilor și
remedierile rapide;
– Navigarea pe proiecte și coduri: vizualizări de proiect specializate, vizualizări de
structuri de fișiere și sărituri rapide între fiși ere, clase, metode și utilizări;
– FTP Sync: server de act ualizare utilizând FTP sau SFTP;

25
– Suport SQL: asistență de codare, consolă SQL și browser de bază de date. [18]

Figura 3.2 . PhpStorm

3.3. phpMyAdmin
PhpMyAdmin este un instrument gratuit de software scris în PHP, destinat să gestioneze
administrarea MySQL pe Web. PhpMyAdmin suportă o gamă largă de operații pe MySQL și
MariaDB. Operațiile utilizate frecvent (gestionarea bazelor de date, a tabelelor, a coloanelor, a
relațiilor, a indexurilor, a utilizatorilor , a permisiunilor etc.) pot fi realizate prin interfața cu
utilizatorul, în timp ce aveți încă posibilitatea de a executa direct orice instrucțiune SQL.
Caracteristici:
– Interfață web intuitivă ;
– Suport pentru majoritatea funcțiilor MySQL:
– Căutare și sterge rea de baze de date, tabele, vizualizări, câmpuri și indexuri ;
– Crea re, copi ere, renunț are, redenumi re și modifica e de baze de date, tabele, câmpuri
și indexuri ;
– Server de întreținere, baze de date și tabele, cu propuneri privind configurarea
serverului ;

26
– Execută , edit ă si marc hează orice instrucțiune SQL ;
– Gestionează conturile de utilizator MySQL și privilegiile acestora ;
– Gestionează procedurile și declanșatoarele stocate ;
– Importă date din CSV și SQL ;
– Exportează date în diverse formate: CSV, SQL, XML, PDF, I SO / IEC 26300 – Text
și foaie de calcul OpenDocument, Word, LATEX și altele ;
– Administrarea mai multor servere ;
– Crearea grafică a aspectului bazei de date în diferite formate ;
– Crearea de interogări complexe utilizând Query -by-example (QBE) ;
– Căutarea global ă într -o bază de date sau într -un subset al acesteia ;
– Transformarea datelor stocate în orice format utilizând un set de funcții predefinite,
cum ar fi afișarea datelor BLOB ca imagine sau descărcare . [19]

Figura 3.3. phpMyAdmin

3.4. MySQL Workbench
MySQL Wor kbench este un instrument vizual unificat pentru arhitecții de ba ze de date,
dezvoltatori și administratori de baze de date . MySQL Workbench oferă modelarea datelor,
dezvoltarea SQL și instrumentele de administrare complete pentru configurarea serverului,

27
administrarea utilizatorului, copierea de rezervă și multe altele. MySQL Workbench este
disponibil pe Windows, Linux și Mac OS X.
MySQL Workbench permite unui DBA, dezvoltator sau arhitect de date să proiecteze, să
modeleze, să genereze și să administreze bazele de date. Aceasta include tot ceea ce un modelator
de date are nevoie pentru a c rea modele ER complexe și livrează de asemenea caracteristici cheie
pentru realizarea unor sarcini dificile de gestionare de schimbări și de documentare care în mod
norma l necesită mult timp și efort.
MySQL Workbench oferă instrumente vizuale pentru crearea, executarea și optimizarea
interogărilor SQL. Editorul SQL furnizează evidențierea sintaxelor prin color are, auto –
completarea, reutilizarea fragmentelor SQL și istoricu l execuției SQL. Panoul de conexiuni baze
de date permite dezvoltatorilor să gestioneze cu ușurință conexiuni standard de baze de date,
inclusiv MySQL Fabric. Object Browser oferă acces instantaneu la schema și obiectele bazei de
date.
MySQL Workbench ofer ă o consolă vizuală pentru a administra cu ușurință mediile
MySQL și a obține o vizibilitate mai bună în bazele de date. Dezvoltatorii și administratorii
bazelor de date pot folosi instrumentele vizuale pentru configurarea serverelor, administrarea
utiliza torilor, efectuarea de backup și recuperare, inspectarea datelor de audit și vizualizarea
integrității bazei de date.
MySQL Workbench oferă o soluție completă și ușor de folosit pentru a migra MySQL în
Microsoft SQL Server, Microsoft Access, Sybase ASE, Po streSQL și alte tabele, obiecte și date.
Dezvoltatorii și administratorii de baze de date pot converti rapid și ușor aplicațiile existente
pentru a rula pe MySQL atât pe Windows, cât și pe alte platforme. Migrarea acceptă, de
asemenea, migrarea de la versi unile anterioare ale MySQL la ultimele versiuni. [20]

28

Figura 3.4. MySQL Workbench

3.5. Notepad++
Notepad ++ este un editor free source și este un înlocuitor de Notepad care acceptă mai
multe limbi. Rulează în mediul MS Windows, utilizarea sa fiind guvernată de licența GPL.
Bazat pe componenta puternică de editare Scintilla, Notepad++ este scris în C ++ având o
viteză de execuție mai mare și o dimensiune mai mică a programului. Optimizând cât mai multe
rutine fără a pierde ușurința de utilizare, Notepad ++ înce arcă să reducă emisiile de dioxid de
carbon mondiale. Atunci când se utilizează mai puțină putere procesorul , calculatorul poate
accelera și reduce consumul de energie, ducând la un mediu mai ecologic. [21]
Puncte forte:
– Costul este probabil cel mai mare p lus; Editorul de text este încă o descărcare gratuită
open source cu utilizare nelimitată.
– Descărcare și instalare ușoară: descărcarea este mai mică de 8 MB, iar instalarea are
doar un spațiu de disc de 23 MB, o dată instalată și se execută rapid.
– Un direc tor uriaș de plugin -uri este disponibil, care adaugă mai multă funcționalitate
editorului de text, toate acestea fiind distribuite prin Managerul Plugin, care ajută la
verificarea pluginurilor disponibile și la adăugarea acestora la aplicație.
– Datorită nat urii sale ușoare, este portabil și poate fi rulat de la iPod -uri sau orice

29
dispozitiv portabil care acceptă aplicații.
– Verificarea ortografică implicită este un plus mare.
– Căutare globală și înlocuire caracteristică între site -uri și documente.
– Codul se co mpletează automat pentru toate limbile de programare acceptate.
– Preîncărcat cu peste 50 de limbi d e programare cele mai populare are, de asemenea,
capacitatea de a adăuga limbi definite de utilizator.
– Permite crearea de macro -uri pentru a înregistra acțiun i și a le reda mai târziu pentru a
evita repetarea acțiunilor repetitive și a secvențelor de editare.
– Comutatorul de documente care utilizează Ctrl + Tab este un instrument rapid pentru
navigarea între documente deschise.
Puncte slabe:
– Disponibil pentru in stalare exclusiv pe medii Microsoft Windows.
– Există dificil de utilizat la început pentru începători care nu sunt obișnuiți să editeze
text direct și ar putea beneficia de alți editori care oferă un panou de previzualizare
pentru a vedea sugestiile de auto completare propuse în timp ce codul devine
actualizat.
– Versiunile anterioare au avut probleme de instabilitate ; Versiunile recente au fost puse
la dispoziție pentru a repara mai multe probleme cunoscute. [22]

3.6. GitHub

Git este un s istem de control al versi unilor pentru urmărirea modificărilor în fișierele de pe
computer și coordonarea lucrului asupra acelor fișiere în rândul mai multor persoane. Acesta este
folosit în principal pentru gestionarea codului sursă în dezvoltarea de software, dar poate fi folosi t
pentru a urmări schimbările în orice set de fișiere. Ca sistem de control revizuit distribuit, acesta
vizează viteza, integritatea datelor și suport pentru fluxurile de lucru distribuite, neliniare. [23]
GitHub este un depozit de control al versiunilor G it și un serviciu de găzduire pe Internet.
Este folosit mai mult pentru cod. Oferă toate funcționalitățile distribuite de control al versiunilor
și managementul codului sursă ale Git, precum și adăugarea propriilor caracteristici. Oferă
controlul accesului și câteva funcții de colaborare, cum ar fi urmărirea erorilor, solicitări de
caracteristici, gestionarea sarcinilor și wiki -uri pentru fiecare proiect. [24]

30

Figura 3. 5. GitHub

31
Capitolul IV Studiu d e caz – Aplicatie informatica pentru
administrarea resursel or umane dintr -o organizatie

4.1. Configurare
WAMP Server
WampServer este un pachet software dezvoltat pentru sistemul de operare Microsoft
Windows, creat de Romain Bourdon și care const ă din serverul web Apache, OpenSSL pentru
suport SSL (Secure Sockets Layer ), o baza de date MySQL și limbajul de programare PHP.
Am efectuat o căutare pe internet pentru a găsi un server care sa se muleze pe necesitățile
aplicației, am considerat că WAMP ofe ră un bun suport. Instalarea acestuia nu a necesitat decât
descărcarea aplicației iar în pașii următori nu a fost necesară o configurare. Proiectul a fost pus
într-o locație pe care WAMP -ul o deține sub control.
Git Bash
Git Bash este o aplicație de tip Command -Line, dezvoltată pentru Microsoft Windows, care
perm ite accesul sau modificarea unui proiect aflat local, sincronizarea acestuia cu ramurile
(branch -urile) existente pe serverele aflate pe www.github.com . Branch -urile reprezintă versiuni
asupra cărora s -a lucrat în int eriorul proiectului. Un proiect are un branch principal, care se
numește “Master” , branch -urile construite ulterior fiind doar versiune ale aplicației în care se
lucrează, în care se stabilesc anumite scopuri ce trebuiesc atinse înaintea îmbinării acestora cu
branch -ul principal ( master ). Proiectul a fost urcat pe serverele de pe www.github.com cu
ajutorul programului Git Bash, creându -se astfel o legătura între fișierele aflate local și serverul
fișierele aflate pe s erver. În timp, după ce branch -urile au fost modificate, acestea actualizează
versiunile de pe server cu ajutorul comenzilor introduse în Git Bash. Programul permite – printre
altele – crearea de branch -uri, ștergerea acestora, verificarea diferențelor în tre versiunile aflate
local și cele aflate pe server, îmbinarea branch -urilor secundare cu cel primar ( master ), urcarea
versiunilor locale pe server precum și aducerea versiunilor mai vechi de pe server pe sistemul
local.

32

Figura 4. 1. Git Bash

4.2. Descrie rea aplica ției
Așa cum spune tema proiectului – “Aplica ție informatică pentru administrarea resurselor
umane dintr -o organizație ” , aplicația cu numele “UpWeGo” a fost creat ă în scopul de a
administra resur sele umane dintr -o organizație. Se presupune ca f irma este fictivă, datele din baza
de date precum si cele care fac referire la adresa organizatiei au doar rolul de a simula un caz
real.
Aplica ția cuprinde dou ă module – modulul de administrator care e administrat de c ătre
partea de conducere a companiei, precum și modulul de angajat care este accesibil doar
persoanelor angajate în cadrul companiei. Modulul administrator oferă posibilit ăți cum ar fi :
adăugarea unui nou angajat, administrarea personalului și vizualizarea statutului acestora.
Modulul angaja t ofer ă informa ții angajatului din cadrul companiei cu privire la statutul acestuia
în companie și informații legate de starea financiară a acestuia. Aplica ția este conceput ă a fi la
îndemana utilizatorilor, av ând o interfa ță accesibil ă și intuitiv ă, ceea ce duce la o navigare u șoară
și implicit, ofer ă utilizatorului o experien ță placut ă și de calitate.

33
Fiecare modul implementat și funcționalitatea acestuia sunt dezbătute în subcapitolele ce
urmează.

4.2.1. Autentificarea in aplicație

Fereastra principală conți ne un formular de logare conform figurii 4. 3. Formularul de
logare cuprinde câmpurile necesare autentificării utilizatorului. În cazul în care utilizatorul
folosește date invalide sau formularul nu are câmpurile completate, acesta este alertat prin
interme diul unei ferestre de tip pop -up.

Figura 4.2. Alertă date invalide

În momentul logării utilizatorului, dat fiind faptului ca aplicația cuprinde două tipuri de
utilizatori, fiecare dintre aceștia având privilegii diferite, și anume admin sau user(angaja t),
aceștia vor fi redirecționați spre modulul destinat.
Cazurile tratate în vederea logării sunt prezentate în Anexa 1.

34

Figura 4. 3. Interfață logare

4.2.2. Descrierea bazei de date
Aplicația utilizează o baza de date MySQL cu doua tabele , acestea numindu -se “user” si
“salarii” , ce prezint ă o legătura de tipul unu -la-unu. Prima dintre acestea de ține informații cu
privire la utilizatorii aplicației . Angajaților le sunt în registrate în baza de date de către
administratorul acesteia, următoarele date :
– Nume angaja tului;
– Prenume angajatului ;
– Email angajatului ;
– Utilizator ( numele folosit pentru autentificare ) ;
– Departament din care face parte noul angajat ;
– Func ția pe care acesta o va dețin e în departament .

35

Figura 4. 4. Diagrama Entitate -Asociere

4.2.3. Modulul Admin
Interfața administrator prezentată în figura 4.5. oferă posibilitatea vizualizării atât a
angajaților care lucrează cât și a celor care au lucrat la un moment dat în organizație dar în
prezent nu o mai fac. Această interfață oferă informaț ii cu privire la date le angaja ților.

36

Figura 4. 5. Interfața principală administrator

Funcționalități și interacțiuni specifice
Una din funcționalitățile interfeței este cea de filtrare a rezulta telor pe baza selectării
unuia dintre criteriile mai jos enumerate :
– Nume ;
– Prenume ;
– Utilizator ;
– Email ;
– Departament ;
– Func ție.

37

Figura 4. 6. Filtrul de căutare – Starea 1

În momentul selectării uneia dintre valori, următorul câmp devine accesibil, iar
administratorul poate să introducă text, butonul de căutare devenind astfe l la rândul lui accesibil.

Figura 4. 7. Filtrul de căutare – Starea 2

Figura 4. 8. Filtrul de căutare – Starea 3

În momentul accesării butonului de căutare, se va face un apel către server, fiind returnate
rezultatele dorite sau, în cazul în care filtr area nu a putut să returneze niciun rezultat, va apărea o
fereastră de tip pop -up care va anun ța administratorul acest lucru, iar acesta va fi redirecționat
înapoi către pagina principală , conform cu .

38

Figura 4. 9. Fereastra tip pop -up informare

A doua funcționalitate este aceea de “Ștergere” a unui utilizator. În rea litate, aceasta nu
este o practică care să aibă loc, întrucât orice firmă trebuie sa își păstreze evidențele legate de
persoanele care au fost angajate. Drept urmare, aceasta procedură o să aibă ca efect schimbarea
statusului de activitate din baza de date al utilizatorului respectiv, privându -i totodată și accesul la
cont.
Schimbarea statusului de activitate are ca urmare și schimbarea pozei de profil a
utilizatorului, modificând -o să apară pe un fundal alb -negru, blocarea accesului la butoanele de
“Șterge re” și de “Adăugare plată ”, precum și mutarea acestui utilizator la sfârșitul căutărilor,
pentru a avea prioritate angajații curenți (cu statusul de activ).

Figura 4. 10. Diferența angajat activ – angajat inactiv

A treia funcționalitate presupune închide rea sesiunii curente prin interacțiunea cu butonul
de “Delogare” . A fost necesară verificarea sesiunii curente deoarece paginile trebuie să poată fi

39
accesate doar de utilizatorii cărora le sunt destinate.

Figura 4. 11. Buton pentru delogare

A patra func ționalitate este reprezentată de două input -uri aflate la sfârșitul paginii, după
secțiunea de paginație, care au rolul de a trimite utilizatorul la pagina introdusă, respectiv,
afișarea unui anumit număr de utilizatori pe pagină . Pe baza numărului de util izatori aflați în
momentul respectiv in baza de date, și numărului de utilizatori ce se cere a fi afișat – este prezent
un indice ce reprezintă numărul de pagini maxim ce poate fi accesat.

Figura 4 .12. Input pentru selectarea paginii și input pentru numă rul de rânduri de afișat

Figura 4.13 . Vizualizarea tabelului previzualizând doar trei utilizatori pe pagină

40

Modulul de admin prezintă rezultatele într -un mod prietenos, distribuind rezultatele pe
mai multe pagini. Paginarea este procesul de împărțire a unui document în pagini discrete, fie
pagini ele ctronice, fie pagini imprimate.
Paginare a în cadrul acestei lucrări este un mecanism care oferă administratorului opțiuni
suplimentare de navigare pentru navigarea prin părți individuale ale rezultatelor afiș ate.

Figura 4. 14. Paginare – starea 1

Figura 4.15 . Paginare – starea 2

Figura 4. 16. Paginare – starea 3

Interacțiunea printr -un click pe poza de profil a unui utilizator permite afișarea unei
ferestre de tip modal, ce permite vizualizarea pozei l a o dimensiune mai mare, permițând
administratorului să recunoască mai ușor persoana în cauză.

41

Figura 4. 17. Fereastra tip modal prezentând poza de profil

În tabelul afișat pe pagina principală a ferestrei administratorului , putem distinge câteva
butoan e care au trimitere către alte pagini accesibile doar administratorului. Printre acestea putem
distinge :
– Realocare către pagina principală ;
– Adăugarea unui utilizator(angajat no u);
– Editează utilizator ul respectiv ;
– Adaugă plata utilizatorului respe ctiv.

Figura 4. 18. Buton de realocare

Figura 4. 19. Buton pentru adăugarea unui angajat nou

42

Figura 4. 20. Buton pentru editarea unui angajat

Figura 4. 21. Buton pentru adăugarea unui salariu pentru un anumit angajat
Butonul de “Adăugare utilizator” conduce către pagina prezentată in figura 4. 22. Aceasta
conține un formular care cuprinde următoarele câmpuri de completare :
– Numele angajatului;
– Prenumele angajatului;
– Email -ul angajatului;
– Numele contului de utilizator al angajatului;
– Departamentul în care acest an gajat va lucra;
– Funcția pe care acest angajat o va deține.
Odat ă completate aceste seturi de date, în urma apăsarii pe butonul de “Adăugare
utilizator”, datele vor fi introduse în baza de date.
Formularul cuprinde și un input care poate să rețină o poză c are este aleasă în momentul
când administratorul va fi dat click pe poza “Adăugă poză ”. Dac ă formularul este trimis fără să se
fi ales o poză pentru utilizatorul respectiv, acesta va avea o poză tip “Default ”, prezentat ă in

43
figura 4.24 .

Figura 4.2 2. Pagina specifică adăugării unui angajat nou

Figura 4.2 3. Input -ul pentru adăugarea pozei

Figura 4.2 4. Poza de profil a unui angajat fără o poză aleasă

44

Figura 4. 25. Fereastra care se deschide in urma acționării input -ului pentru adăugare poză

Figura 4 .26. Input -ul pentru adăugarea pozei după ce poza a fost aleasă

Butonul “Editeaz ă” îl conduce pe administrator la pagina din figura 4. 27. Aceasta
cuprinde un formular ce are câmpurile deja completate cu datele aflate în baza de date. Atât la

45
adăugarea un ui utilizator cât și la editarea acestuia, se ține cont ca numele utilizatorului, respectiv
adresa de email introdusă să fie unice în baza de date, pentru a se evita un posibil conflict. În
cazul în care numele de utilizator sau adresa de email există deja in baza de date, va apărea o
fereastră pop -up cu mesajul prezentat in figura 4.2 8. – respectiv – figura 4.2 9. și figura 4. 30.
pentru momentul când adresa de email nu are un format valid.

Figura 4. 27. Fereastra pentru editarea angajatului

Figura 4.28 . Fereastra pop -up pentru existența numelui

46
Figura 4. 29. Fereastra pop -up pentru existența adresei de email

Figura 4. 30. Fereastra pop -up ce apare când adresa introdusă nu e validă

Butonul de “Adăugare plată” îl conduce pe utilizator la fereastra prezen tată in figura 4. 31.
Aceasta cuprinde câteva câmpuri deja completate cu datele utilizatorului, acestea fiind și cele
menționate anterior în celelalte ferestre – precum și două câmpuri pentru adăugarea sumei care
urmează a fi introdusă in baza de date și po ate fi apoi prelucrată, respectiv, alegerea lunii și
anului corespunzătoare plății.

Figura 4. 31. Fereastra pentru adăugarea unui salariu

47

Figura 4. 32. Selectarea lunii și anului aferente plății

4.2.4. Validarea contului

În momentul în care un utilizator a f ost adăugat în baza de date, acesta este introdus cu
statusul de inactiv. Cu ajutorul adresei de email introduse, îi va fi trimis un email ce va conține un
link de activare al contului și o parolă asignată în mod aleator.
Accesând link -ul din email, utili zatorul va fi redirecționat către fereastra de validare a
contului, ce poate fi observată în figura 4 .34. Aici, utilizatorului îi este cerut să introducă parola
ce i-a fost transmisă pe email, ca apoi să își introducă noua parolă, urmată apoi de rescrierea
acesteia. În cazul în care parola transmisă în email nu coincide cu cea introdusă în formular, va fi
afișat un mesaj de eroare. La fel se va întâmpla dacă parola conține mai puțin de 6 caractere sau
dacă câmpul aferent noii parole nu coincide cu câmpul care necesita reintroducerea parolei.
În momentul când toate datele sunt introduse corect, va fi afișat un mesaj care confirmă
validarea contului și se va face trimiterea automată la pagina de autentificare la scurt timp după
aceasta.

48

Figura 4 .33. Email -ul sosit în urma înscrierii in baza de date

Figura 4. 34. Pagina aferentă validării unui cont

49

Figura 4. 35. Pagina aferentă validării unui cont

50
Figura 4 .36. Pagina aferentă validării unui cont

Figura 4. 37. Pagina aferentă validării unui cont

Figu ra 4. 38. Confirmarea validării contului

Figura 4. 39. Mesaj care informează utilizatorul situația prezentă

51

4.2.5. Modulul Angajat (user)
Utilizatorul după ce se autentifică, va fi redirecționat către pagina principală care îi este
adresată. Aici își va put ea vedea detaliile personale cu care este trecut în baza de date, precum si
un grafic care să îi prezinte situația financiară din anul selectat. Se presupune ca organizația a luat
naștere în anul 2014, iar in prezent anul este 2017, el putând să aleagă ori care dintre acești ani
pentru a vedea graficul cu informațiile dorite.
Datele din graficul anului respectiv pot fi exportate într -un fișier de tip format “.csv”, un
format ce poate fi deschis de catre programul Microsoft Excel în scopul de a fi prelucrate datele
mai ușor. Acest lucru se va intâmpla în momentul când utilizatorul va accesa butonul “Exportare
fișier CSV ”.

Figura 4. 40. Fereastra principală a utilizatorului

52

Figura 4. 41. Selectarea anului pentru afișarea plăților

Figura 4. 42. Exportarea dat elor în format .csv

Figura 4. 43. Fișierul format .csv accesat de către Microsoft Excel

În momentul în care utilizatorul apasă pe grafic pe una din coloanele aferente lunilor
anului, care conțin o plată, va fi descărcat un fișier de tip format “.pdf” care va reprezenta

53
fluturașul de salariu conform lunii respective.

Figura 4. 44. Selectarea lunii martie pentru descărcarea fluturașului de salariu

Figura 4. 45. Descărcarea fluturașului de salariu

Acest fluturaș are con ținutul prezentat in figura 4 .46. Fluturașul are la bază calculul
salariului net, pe baza impozitelor și taxelor ce trebuiesc plătite către stat sau asigurărilor de
pensii private.

54

Figura 4. 46. Descărcarea fluturașului de salariu

Angajatul poate s ă se delogheze oricând accesând butonu l de “Delogare”, prezentat și
anterior, având ca referință figura 4.11.

4.2.6. Plugin -uri folosite

Mailgun
Mailgun este un serviciu de automatizare a e -mailurilor furnizat de Rackspace. Oferă un
serviciu de e -mail complet bazat pe cloud pentru trimiterea, primi rea și urmărirea mesajelor
trimise prin interme diul site -urilor și aplicațiilor . Funcțiile Mailgun sunt disponibile utilizând
protocoale tradiționale de e -mail, cum ar fi SMTP (Simple Mail Transfer Protocol ), acesta fiind
un standard Internet pentru transmi terea poștei electronice (e -mail). [25]

55

Amcharts
AmCharts este un producător pentru diagramele interactiv e bazate pe JavaScript și
bibliotecile și instrumentele de programare. Principalele produse – graficele JavaScript și hărțile
JavaScript – sunt co mpletate de instrumentul de editare grafică online Live Editor, precum și de
un plugin activ și dezvoltat pentru WordPress. [26]

TCPDF
TCPDF este o clasă PHP gratuită și open source pentru generarea de documente PDF.
TCPDF este singura bibliotecă bazată p e PHP care include suport complet pentru UTF -8 Unicode
(Unicode Transformation Format ) și limbajul scris de la dreapta la stânga, inclusiv algoritmul
bidirecțional . UTF -8 poate reprezenta orice caracter din standardul Unicode. UTF -8 este
compatibil cu ASCI I. UTF -8 este codificarea preferată pentru e -mail și pagini web. [27]

56
Capitolul V Concluzii, perspective si contributii

Dezvoltarea web reprezintă o expresie larg intâlnită pentru munca implicată în dezvoltarea
unui site Web pentru Internet. Aceasta po ate varia de la creerea unei simple pagini statice de text
la aplicații complexe bazate pe internet (sau doar "aplicații web") și servicii de rețele sociale. O
listă mai cuprinzătoare a sarcinilor la care se referă în mod obișnuit dezvoltarea web poate
include ingineria web, designul web, dezvoltarea conținutului web, legătura cu clienții,
scriptingul pe partea clientului / serverului, configurarea serverului web și a securității rețelei și
dezvoltarea e -commerce. [28]
Resursele Web au devenit aproape indis pensabile în predare, învățare ș i evaluare. Noile
tehnologii oferă o gamă variată de aplicaț ii. Aplicaț iile Web sunt mult mai complexe, accesibile
si variate .
Noua economie sau economia digitală, este o rezultantă a interacțiunii dintre calculatorul
person al, telecomunicații . Este vorba de crearea unui nou model de afaceri (e -business, e –
commerce, e -banking, etc.) prin intermediul internetului, care schimbă radical eficiența acestora,
în sensul reducerii costurilor, inclusiv a celor tranzacționale, pe baza relației afacere/afacere ,
afacere/cumpărător , afacere/angajat, etc. În ultimul timp, comerțul electronic a căpătat extinderea
cea mai mare ca formă conc retă de realizare a unor afaceri. [29]
Lucrarea prezentă reprezintă o aplicație informatică pentru admin istrarea resurselor umane
dintr -o organizație. Utilizând tehnologiile descrise în capitolul doi, alături de intrumentele
informatice amintite în capitolul trei, a fost posibilă realizarea acestei aplicații.
Contribuțiile aduse în realizarea lucrării sun t:
– Instalarea serverului local WAMP , împreuna cu phpMyAdmin
– Crearea bazei de date “UpWeGo” și a tot ceea ce cuprinde aceasta
– Crearea urmatoarelor pagini :
 Pagina de autentificare ;
 Pagina principal ă folosită de către administrator ;
 Pagina folosită pe ntru adăugarea unui utilizator (angajat) ;
 Pagina folosită pentru editarea unui utilizator (angajat) ;
 Pagina folosită pentru plătirea salariului unui utilizator (angajat) ;

57
 Pagina principală folosită de către utilizator (angajat) ;
 Pagina verificare și valida re a unui cont .
– Crearea controller -elor specifice fiecărei pagini, respectiv, metodelor utilizate în cadrul
utilizării aplicației :
 Controller -ul admin :
o Funcția index ;
o Funcția pageindex ;
o Funcția pageadduser ;
o Funcția pageaddsalary ;
o Funcția pageedituser ;
o Funcția makeinactive .
 Controller -ul user :
o Funcția index ;
o Funcția changeChart ;
o Funcția downloadPDF .
 Controller -ul login :
o Funcția index ;
o Funcția verify ;
o Funcția logout .
 Controller -ul Welcome
o Funcția index .
– Crearea script -urilor de javascript care rulează pe mașinile -client :
 addsalary.js ;
 adduser.js ;
 edituser.js ;
 listusers.js ;
 login.js ;
 user.js ;
 verify.js .

58
– Crearea CSS -ului pentru înfrumusețarea paginilor de html, acesta existând atât la nivel
in-line, în paginile de HTML, cât și prezent în fișierul extern :
 mystyle.css .

Lucrarea cu titlul “Aplica ție informatică pentru administrarea re surselor umane dintr -o
organizaț ie” are în vedere crearea unui model de afaceri în cadrul unei organizații, precum și
gestionarea si administrarea resurselor umane.
Aplicația p oate prezenta îmbunătățiri, urmărindu -se pe viitor :
– Implementarea interfețelor pentru dispozitivele mobile ce au acces la internet (
telefoane mobile, pad -uri, etc.) ;
– Crearea unor teme de vizualizare ale interfețelor, în funcție de preferințele
utilizatoru lui;
– Accesarea aplicațiilor precum Skype pentru efectuarea de apeluri .

59
Bibliografie

[1] https://ro.wikipedia.org/wiki/Pagină_web
[2] https:/ /ro.wikipedia.org/wiki/Server_web
[3] Notițe de curs – Valeriu Lupu www.seap.usv.ro/~valeriul/lupu/baza_de_date_cig.doc
[4] https:/ /ro.wikipedia.org/wiki/SQL
[5] https://www.tutorialspoint.com/mysql/mysql -introduction.htm
[6] http://www.referatele.com/referate/noi/informatica/ce -este-php121082229.php
[7] http://www.preferatele.com/docs/informatica/noi/php201621919.php
[8] http://www.preferatele.com/docs/informatica/noi/html1092211118.php
[9] https://www.scribd.com/document/54408975/Referat -HTML
[10] http://www.web -start.ro/ce -este-css-ul/
[11] https://ro.wikipedia.org/wiki/JavaScript
[12] http://laurian.ro/wordpress/wp -content/uploads/2013/JavaScript_a5.pdf
[13] https://www.tutorialspoint.com/mvc_framework/m vc_framework_introduction.htm
[14] http://www.referatele.com/referate/noi/informatica/conceptul -de-design -82272414.php
[15] https://codeigniter.com/userguide3/general/welcome.html
[16]https://ascensorspiritual.wordpress.com/2015/11/09/v arianta -mysql -intelisense -heidisql/
[17] https://www.heidisql.com/
[18] https://www.jetbrains.com/help/phpstorm/meet -phpstorm.html
[19] https://www.phpmyadmin.net/
[20] https://www.mysql.com/products/workbench/
[21] https://notepad -plus-plus.or g/
[22] http://www.techrepublic.com/blog/web -designer/open -source -notepad -plus-plus-is-a-
solid -contender -among -text-editors /
[23] https://en.wikipedia.org/wiki/Git
[24] https://en.wikipedia.org/wiki/GitHub
[25] https://support.rackspace.com/how -to/introduction -to-mailgun -email -automation/
[26] https://www.linkedin.com/company/amcharts
[27] https://en.wikipedia.org/wiki/TCPDF
[28] https://en.wikipedia.org/wiki/Web_development

60
[29] http://www.academia romana.ro/pro_pri/doc/st_g04.doc

61

Capitolul VI Anexe – cod sursa

Anexa1 – Fișierul javascript pentru editarea unui utilizator
/**
* Created by hstancu on 10/27/2016.
*/

function chooseFile () {
document .getElementById ("fileInput" ).click();
}
/*$(document).bind("contextmenu",function(e) {
e.preventDefault();
});
$(document).keydown(function(e){
if(e.which === 123){
return false;
}
});*/
$(document ).ready(function () {

$(".to_home2" ).click(function () {
location .href='/UpWeGo/admi n';
});
$(".log_out2" ).click(function () {
logout();
});
$("#reset" ).click(function () {
location .reload(true);
});
function logout() {
$.ajax({
url: base_url + "login/logout" ,
dataType : 'json',
success: function (response) {
if(response. success){
location .href = "/UpWeGo" ;
}else{
alert("Ceva nu a mers bine, inapoi la login" );
location .href = "/UpWeGo" ;
}
},
type: 'POST'
});
}

var sistem_list = [
{display: "Programator IT" , value: "Programator -IT" },
{display: "Tester" , value: "Tester" },
{display: "Manager Proiect" , value: "Manager -Proiect" }];

var priordana_list = [
{display: "Team Leader" , value: "Team-Leader" },
{display: "Programator Java" , value: "Programator -Java" },
{display: "Programator Android" , value: "Programator -Android" },

62
{display: "Tester" , value: "Tester" }];

var ittech_list = [
{display: "Manager Proiect" , value: "Manager -Proiect" },
{display: "Programator C#" , value: "Programator -C#" },
{display: "Programator Web" , value: "Programator -Web" },
{display: "Tester" , value: "Tester" }];

switch(departament ){ //using switch compare selected option and populate child
case 'SisTem' :
list2(sistem_list );
break;
case 'PriorDana' :
list2(priordana_list );
break;
case 'iT Tech' :
list2(ittech_list );
break;
default: //default child option is blank
$("#child_selection" ).html('');
break;
}
function list2(array_list)
{
$("#child_selection" ).html(""); //reset child options
$(array_list). each(function (i) { //populate child options
if(array_list[i]. value==functie){
$("#child_selection" ).append('<option va lue='+array_list[i]. value+'"
selected="selected">' +array_list[i]. display+'</option>' );
}else{
$("#child_selection" ).append("<option
value="+array_list[i]. value+">"+array_list[i]. display+"</option>" );
}
});
}

//If parent option is changed
$("#parent_selection" ).change(function () {
var parent = $(this).val(); //get option value from parent

switch(parent){ //using switch compare selected option and populate child
case 'SisTem':
list(sistem_list );
break;
case 'PriorDana' :
list(priordana_list );
break;
case 'iT Tech' :
list(ittech_list );
break;
default: //default child option is blank
$("#child_selection" ).html('');
break;
}
});

//function to populate child select box
function list(array_list)
{
$("#child_selection" ).html(""); //reset child options
$(array_list). each(function (i) { //populate child options

63
$("#child_selection" ).append("<option
value="+array_list[i]. value+">"+array_list[i]. display+"</option>" );
});
}

function readURL(input) {

if (input.files && input. files[0]) {
var reader = new FileReader ();

reader.onload = function (e) {
$('#changePhoto' ).attr('src', e.target.result);
}

reader.readAsDataURL (input.files[0]);
}
}

$("#fileInput" ).change(function () {
readURL(this);
var filename = $('#fileInput' ).val();
var filename = filename .replace(/^.*\\/, "");
//var filename = document.getElementById("fileInput").files[0];
//$('#fileInputName').html(filename);
document .getElementById ("fileInputName" ).value=filename ;
});
});

64
Anexa2 – Metoda pentru adăugarea unui nou angajat

function pageadduser()
{
if ($this->input->post()) {
$this->load->database();

$this->db->select( 'username' );
$this->db->where('username=' , $this->input->post('username' ));
$query = $this->db->get('user');

$this->db->select( 'email');
$this->db->where('email=' , $this->input->post('email'));
$query2 = $this->db->get('user');

if ($query->num_rows() > 0) {
$message = "Acest nume de utilizator există deja. Vă rugăm să alegeți alt
nume de utilizator." ;
echo "<script type='text/javascript'> alert('$message ');</script>" ;
} elseif ($query2->num_rows() > 0) {
$message = "Această adresă de email există deja. Vă rugăm să alegeți altă
adresă de email." ;
echo "<script type='text/javascript'> alert('$message ');</script>" ;
} elseif (!(filter_var ($this->input->post('email'), FILTER_VALIDATE_EMAIL ))) {
$message = "Această adresă de email nu este validă" ;
echo "<script type='text/javascript'> alert('$message ');</script>" ;
} else {

$secret_key = "key-1a09ec0d388ee909db72392f91315f3f" ; // apparently it's
the same
$domain = "sandbox3e9b9f50dadb48a09d73f35a82204c0c.mailgun.org" ;

//$html= $this ->load->view('pinql', '', true);

$pass = rand(1000, 500000);
$hash = password_hash ($pass, PASSWORD_BCRYPT );
//$link= 'http://gorillaz/UpWeGo/verify.php?email='.$this ->input-
>post("email").'&hash='.$hash;
$link = base_url() . 'login/verify?email=' . $this->input->post("email") .
'&hash=' . $hash;

/*if(password_verify($pass,$hash)){
echo 'Match !';
}else{
echo 'Nein !';
}*/

$Option['FROM_MAIL' ] =
"postmaster@sandbox9ca54d91dbdf46b4b961f7700fa16fc4.mailgun.org ";
$Option['FROM_NAME' ] = "UpWeGo" ;
$Option['TO_MAIL' ] = $this->input->post('email');
$Option['TO_NAME' ] = "Mr/Mrs." . $this->input->post('lastname' );
$Option['SUBJECT' ] = "UpWeGo Registration" ;
$Option['BODY_TEXT' ] = "Here is some plain message" ;
$Option['BODY_HTML' ] = '
<head>
<style>
p{
color:yellow;
}

65
i{
color:#0645AD;
}
li{
color:sandybrown;
}
</style>
</head>
<body>

<div style="background -color:black; color:white; padding:20px;
width:100%; height:700px;">
<h2>Hello,' . $this->input->post('lastname' ) . '</h2>
<p>Thank you for joining our team, everything is almost set
up.</p>
<p>You can login with the following credentials after you have
activated your account by pressing the url below.</p>

<p>Activation URL: </p>
<p><i>' . $link . '</i></p>

––––––––––-
<p>Username: ' . $this->input->post('username' ) . '</p>
<p>Password: ' . $pass . '</p>
––––––––––-

<p>This password was assigned automatically. For better
security, change the password after first login or as soon as possible.</p>
<p>Here are some tips to help you create a strong password:</p>

<ul>
<li>Make sure your password is at least eight characters in
length.</li>
<li>Combine numbers and letters, and don \'t include
commonly used words.</li>
<li>Select a word or acronym and insert numbers between
some of the letters.</li>
<li>Include punctuation marks.</li>
<li>Mix capital and lowercase letters.</li>
</ul>
<p>For your security, we recommend that you don \'t reuse
passwords associated with your email address or any other ty pe of account.
Additionally, if you enter your original password as your new password, you may trigger
an error message. Create an entirely new password the next time you sign in.</p>

</div>
</body>' ;

$client = new \GuzzleHttp \Client([
'verify' => false,
]);
$mailgun = new Mailgun( $secret_key , new
\Http\Adapter\Guzzle6\Client($client));

$mailgun ->sendMessage( $domain, array(
'from' => "{$Option['FROM_NAME' ]} <{$Option['FROM_MAIL' ]}>",
'to' => "{$Option['TO_NAME' ]} <{$Option['TO_MAIL' ]}>",
'subject' => $Option['SUBJECT' ],
'text' => $Option['BODY_TEXT' ],
'html' => $Option['BODY_HTML' ],
));
//echo $html;
//echo "<script type='text/javascript'>alert('$html');</script>";

66

if ($this->input->post('fileInputName' ) != '') {
$extension_pos = strrpos($this->input->post('fileInputName' ), '.'); //
find position of the last dot, so where the extension starts
$new_name = $this->input->post('username' ) . "_" . uniqid() .
substr($this->input->post('fileInputName' ), $extensio n_pos);

$config['upload_path' ] = './upload/' ;
$config['allowed_types' ] = 'gif|jpg|png' ;
$config['max_size' ] = 8192000;
$config['max_width' ] = 9000;
$config['max_height' ] = 9000;
$config['file_name' ] = $new_name ;

$this->load->library( 'upload' , $config);
$this->upload->do_upload( 'fileInput' );

$data = array(
'picture' => $new_name ,
'firstname' => $this->input->post('firstname' ),
'lastname' => $this->input->post('lastname' ),
'email' => $this->input->post('email'),
'username' => $this->input->post('username' ),
'admin' => '0',
'active' => '0',
'password' => $hash,
'departament' => $this->input->post('departament' ),
'functie' => $this->input->post('functie' )
);
$this->db->insert( 'user', $data);
} else {
$data = array(
'firstname' => $this->input->post('firstname' ),
'lastname' => $this->input->post('lastname' ),
'email' => $this->input->post('email'),
'username' => $this->input->post('username' ),
'admin' => '0',
'active' => '0',
'password' => $hash,
'departament' => $this->input->post('departament' ),
'functie' => $this->input->post('functie' )

);
$this->db->insert( 'user', $data);
}
redirect( 'admin', 'refresh' );

}
}

$this->load->view("adduser" );
}

67
Anexa 3 – Pagina addsalary
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset= "UTF-8">
<title>Add salary </title>
<link rel="shortcut icon" href="http://legalservicesmiami.org/wp –
content/uploads/2015/02/icon -money.png">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font –
awesome/4.7.0/css/font -awesome.min.css" >
<link rel="stylesheet" href="<?php echo base_url(); ?>web/bootstrap -3.3.7-
dist/css/bootstrap.min.css" />
<link rel="stylesh eet" type="text/css" href="<?php echo base_url();
?>/web/bootstrap -3.3.7-dist/css/mystyle.css" >

<script type="text/javascript" src="<?php echo base_url(); ?>web/bootstrap -3.3.7-
dist/js/jquery -3.1.1.min.js" ></script>

<script
src="https://ajax.goog leapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" ></script>
<script type="text/javascript" src="<?php echo base_url(); ?>/web/bootstrap -3.3.7-
dist/js/addsalary.js" ></script>

<script>
var base_url = "<?php echo base_url(); ?>";
</script>

</head>
<body>
<div style="height:80px; min-width: 1270px;">
<button class="button button1 to_home2" type="button" >
<span class="glyphicon glyphicon -home"></span> Acasa
</button>
<button type="button" class="button button1 log_out2" >
<span class="glyphicon glyphicon -log-out"></span> Delogare
</button>
</div>
<div style="border:2px solid #dcffff; border-radius:50px; margin:0 auto; width:700px;
height:470px; margin-top:120px; background -color:#d4fff8;">

<?php foreach ($myUser as $user): ?>
<form method="post">
<!–<div style="height:0px;overflow:hidden">
<input type="file" id="fileInput" name="fileInput" accept="image/*"/>
<input type="text" name="fileInputName" id="fileI nputName"
value=""></input>
</div>–>

<div onclick= "divshow('<?php echo base_url() ?>upload/<?php echo
$user['picture' ]; ?>','<?php echo base_url() ?>/upload/noprofilepic.jpg' )"
style="float:left; width:150px; height:150px; margin-left:25px;
margin-top:50px; margin-right:5px; border-radius:50%; background -color:white;">
<img id="changePhoto"
style="object-fit:cover; width:150px; height:150px; border-
radius:50%;"
src="<?php echo base_url() ?>upload/<?php echo $user['picture' ];
?>" alt="Image not found"
onerror= "this.onerror=null;this.src='<?php echo
base_url() ?>/upload/noprofilepic.jpg' ;"/>
</div>

68

<div style="float:left; width:440px; margin-top:50px; border:1px solid
darkgray ;border-radius:25px; padding-top:20px; padding-left:25px; margin-left:30px;
padding-bottom:10px; color:#101010;">
<table id="table2" >
<tr>
<td>Nume:</td>
<td> <?php echo $user['lastname' ]?></td>
</tr>
<tr>
<td>Prenume: </td>
<td> <?php echo $user['firstname' ]?></td>
</tr>
<tr>
<td>Email:</td>
<td> <?php echo $user['email']?></td>
</tr>
<tr>
<td>Utilizator: </td>
<td> <?php echo $user['username' ]?></td>
</tr>
<tr>
<td>Departament: </td>
<td> <?php echo $user['departament' ]?></td>
</tr>
<tr>
<td>Functie: </td>
<td> <?php echo $user['functie' ]?></td>
</tr>

</table>
<div class="form-group has -feedback group3" >
<label class="control -label label3" >Adauga salariu </label>
<input type="text" id="s_amount" name="s_amount" pattern= "\d*"
maxlength= "8" class="form-control input" placeholder= "Adauga suma" required />
<i class="form-control-feedback fa fa -money fa –
2x"><span>&nbspRON </span></i>
</div>

<div class="group3" >
<label class="label3" >Luna si anul: </label>
<input type="month" name="s_date" id="myMonth" class="form-control
input" required />
</div>

</div>
<div style="width:100%; height:80px; clear:left; text-align:center;">
<button type="submit" class="button button1"
style="outline:none; margin-top:50px;">
<i class="fa fa-money fa -lg"></i> Adauga plata
</button>
</div>
</form>
<?php endforeach ;?>
</div>

<div class="modal fade" id="viewprofilepic2" >
<div class="modal-dialog modal -md">
<div class="modal-content" >
<div class="modal-header" style="margin-bottom:0;border-bottom:none;

69
color:white; background : rgba(0, 0, 0, 1); ">
<button style="color:white;"type="button" class="close"
data-dismiss= "modal">X</button>
<h3 class="modal-title">Profile picture </h3>
</div>
<div class="modal-body" style="margin:0; padding:0px 0px 10px 0px;
background : rgba(0, 0, 0, 1); " >
<div id="divPicture2" style=" opacity:1 !important ; margin:0 auto;
border-radius:5%; width:500px; height:500px;"></div>
</div>
</div>
</div>
</div>

<script type="text/javascript" src="<?php echo base_url(); ?>web/bootstrap -3.3.7-
dist/js/jquery -3.1.1.min.js" ></script>

<script type="text/javascript" src="<?php echo base_url(); ?>/web/bootstrap -3.3.7-
dist/js/addsalary.js" ></script>

<script type="text/javascript" src="<?php echo base_url(); ?>web/bootstrap -3.3.7-
dist/js/bootstrap.min.js" ></script>

</body>
</html>

70
Anexa 4 – Metoda downloadPDF

function downloadPDF(){

/*
$content='';
$content.= '
<div>
<h2>Hello,Horia</h2>
<p>Thank you for joining our team, everything is almost set
up.</p>
<p>You can login with the following credentials after you
have activated your account by pressing the url below.</p>

<p>Activation URL: </p>
<p><i>Random Link</i></p>
</div>
';
$pdf->AddPage();*/

$this->load->library( 'Pdf');

$pdf = new Pdf();
$pdf->SetTitle( 'Pay Slip' );
$pdf->SetHeaderMargin( 30);
$pdf->SetTopMargin( 0);
$pdf->setFooterMargin( 20);
$pdf->SetAutoPageBreak( true);
$pdf->SetAuthor( 'UpWeGo');
$pdf->SetDisplayMode( 'real', 'default' );

$pdf->AddPage();

if ($this->session->userdata( 'logged_in' ) && !$this->session-
>userdata( 'logged_in' )['isAdmin' ]) //// dar in teorie nu am nevoie decat de username ca
sa il afisez pe un deva 🙂 Majoritatea lor sunt doar pentru testare
{

$session_data = $this->session->userdata( 'logged_in' );
$data['username' ] = $session_data ['username' ];
$data['password' ] = $session_data ['password' ]; // doar pe ntru testare
$data['email'] = $session_data ['email']; // doar pentru testare

$data['isAdmin' ] = $session_data ['isAdmin' ]; // doar pentru testare
$data['logged_in' ] = $session_data ['logged_in' ];
//$this->load->view('ListUsers',$data);
} else {
//If no session, redirect to login page
redirect( 'welcome' , 'refresh' );
}
$this->load->database();

//$password = $this ->input->post('password');

$this->db->select( "firstname,lastname,id" );
$this->db->where('username=' , $data['username' ]);
$select = $this->db->get("user");

$firstname = $select->result_array()[ 0]['firstname' ];

71
$lastname = $select->result_array()[ 0]['lastname' ];
$id_employee = $select->result_array()[ 0]['id'];
$year= $this->input->get('yearPicker' );
$month= $this->input->get('month');
$months=array("Ianuarie" , "Februarie" , "Martie" , "Aprilie" , "Mai", "Iunie",
"Iulie", "August" ,"Septembrie" ,"Octombrie" ,"Noiembrie" ,"Decembrie" );
for($i=0; $i<12;++$i){
if($months[$i]==$month){
$date=sprintf("%s-%02d", $year, $i+1);
break;
}
}
$this->db->select( "*");
$this->db->where("id_employee=" , $id_employee );
$this->db->where("s_date=" , $date);
$select = $this->db->get("salary" );

$salary=$select->result_array()[ 0]['s_amount' ];
$cas = round($salary*0.105,0,PHP_ROUND_HALF_UP );
$somaj = round($salary*0.005,0,PHP_ROUND_HALF_UP );
$cass = round($salary*0.055,0,PHP_ROUND_HALF_UP );
$venit_imp =round($salary-$cas-$somaj-$cass+200+100,0,PHP_ROUND_HALF_UP ); //
tichete masa + tra nsport
$impozit = round($venit_imp *0.16,0,PHP_ROUND_HALF_UP );
$net = $salary-$cas-$somaj-$cass-$impozit ;

$filename =$data['username' ]."_".$year.$month.".pdf";

$logo=base_url(). 'upload/UpWeGo_Logo.png' ;
$qr_code_pdf=base_url(). 'upload/qr_code_pdf.jpg' ;

// set text shadow effect
//$pdf->setTextShadow(array('enabled'=>true, 'depth_w'=>0.2,
'depth_h'=>0.2, 'color'=>array(196,196,196), 'opacity'=>1, 'blend_mode'=>'Normal'));

// Set some content to print
$html = <<<EOD
<body>
<div id="container -parent" style="font -family: 'Muli', sans -serif; background -color:
#7f7f7f;">
<div id="container" style="border:2px solid #000000; background -color:#D8D8D8;">
<div>
<div class="h1" style="font -size: 35px; text -align: center; font -weight:
bolder;">UpWeGo</div>
<table style="width:100%;">
<tr>
<td style="width:32%;"></td>
<td style="width:3 3%; border -top:5px solid black;"></td>
<td></td>
</tr>
<tr>
<td style="width:34%;"></td>
<td style="width:29%; border -top:3px solid #5f5f5f;"></td>
<td></td>
</tr>
</table>
<div class="h2" style="clear:both; font -size: 25px; text -align: center;
font-weight: bolder;">Pay Slip</div>
<table style=" width:100%; padding -top:25px;">
<tr>
<td style="width:51%; font -size: 10px;">
<span><b>Adress:</b> Calea Septembrie 13 , nr. 113 , Bucuresti

72
sector 5</span><br>
<span><b>Phone:</b> 021 224 75 21</span><br>
<span><b>Fax:</b> 021 224 75 20</span><br>
<span><a
href="www.upwego.com">www.upwego.com</a></span><br><br><br>
<span><b>Nume si Prenume:</b> $lastname $firstname </span><br>
<span><b>Anul si luna:</b></span> $year $month <br>
</td>
<td style="width:20%;"></td>
<td style="width:28%;"><img id="logo" width="120px"
height="120px;" src=" $logo" />
</td>
</tr>
</table>
</div><br>
<table>
<tr>
<td width="9%"></td>
<td width="81%">
<table border="1">
<tr>
<th colspan="3" style="text -align:center; background -color:
#9d9d9d;"><b>Salariu de plata</b></th>
</tr>
<tr style="background -color: #BEBEBE;">
<td><b> Salariu de baza</b></t d>
<td> </td>
<td style="text -align:right;"><b> $salary RON(+)</b></td>
</tr>
<tr>
<td> Nr. tichete de masa</td>
<td> </td>
<td style="text -align:right;">20</td>
</tr>
<tr>
<td> Val. tichete de masa</td>
<td> </td>
<td style="text -align:right;">200 RON</td>
</tr>
<tr>
<td> Decontare transport</td>
<td> </td>
<td style="text -align:right;">100 RON</td>
</tr>
<tr>
<td> Contributie C.A.S. </td>
<td style="text -align:right;">10.5%</td>
<td style="text -align:right;"> $cas RON(-)</td>
</tr>
<tr>
<td> Contributie ajutor somaj </td>
<td style="text -align:right;">0.5%</td>
<td style="text -align:right;"> $somaj RON(-)</td>
</tr>
<tr>
<td> Contributie C.A.S.S. </td>
<td style="text -align:right;">5.5%</td>
<td style="text -align:right;"> $cass RON(-)</td>
</tr>
<tr>
<td> Baza imp. tichete masa </td>
<td style="text -align:right;"></td>
<td style="text -align:right;">200 RON</td>
</tr>

73
<tr>
<td> Baza imp. decont. transp. </td>
<td style="text -align:right;"></td>
<td style="text -align:right;">100 RON</td>
</tr>
<tr style="background -color: #BEBEBE;">
<td><b> Venit baza calc. impoz.</b></td>
<td> </td>
<td style="text -align:right;"><b> $venit_imp RON</b></td>
</tr>
<tr>
<td> Impozit</td>
<td style="text -align:rig ht;">16%</td>
<td style="text -align:right;"> $impozit RON(-)</td>
</tr>
<tr style="background -color: #BEBEBE;">
<td><b> Salariu net</b></td>
<td></td>
<td style="text -align:right;"><b> $net RON</b></td>
</tr>
</table>
</td>
<td width="9%"></td>
</tr>
</table>
<p></p>
<table>
<tr>
<td width="70%"></td>
<td width="29%"><img id="qr_code" width="120px" height="120px;"
src="$qr_code_pdf " /></td>
</tr>
</table>
<p></p>
</div>
</div>
</body>
EOD;

//$html= file_get_contents("application/views/flyer.php");

// Print text using writeHTMLCell()
//$pdf->writeHTMLCell(0, 0, '', '', $html, 0, 1, 0, true, '', true);
//$pdf->writeHTML($html);
$pdf->writeHTML( $html, true, false, true, false, '');
$pdf->Output( $filename , 'I');
//echo var_dump($pdf);

}

74
Anexa 5 – Fișierul mystyle.css
#myForm {
margin: 80px auto;
border: 1px solid #F9F9F8;
border-radius: 15px;
width: 430px;
height: 560px;
background -color: rgba(61, 76, 116, 0.35);

animation -duration : 2s;
}

#loginBody {
background : linear-gradient (150deg, #155181, #1f677f, #348c7d, #41a17c,#0fecdd);
background -size: 600% 600%;
animation: BackgroundGradient 25s ease infinite ;
overflow : hidden;
}
#verifyBody {
background : linear-gradient (150deg, #155181, #1f677f, #348c7d, #41a17c,#0fecdd);
background -size: 600% 600%;
animation : BackgroundGradient 25s ease infinite ;
overflow -x:hidden;
}
@keyframes BackgroundGradient {
0% {background -position : 0% 50% ;}
50% {background -position : 100% 50% ;}
100% {background -position : 0% 50% ;}
}
.fly-in-text{
list-style: none;
position : absolute ;
left: 50%;
top:40%;
transform : translateX (-50%) translateY (-50%);
}
.fly-in-text li{
display:inline-block;
margin-right: 20px;
font-family: Open Sans, Arial;
font-weight: 300;
font-size: 4em;
color:#fff;
opacity: 1;
transition : all 1.5s ease;
}
#search{
width:130px;
transition : width .35s ease-in-out;
}
#search:focus{
width:215px;

}
.hidden2{
visibility : hidden;
}
.fly-in-text.hidden li {
opacity:0;
}
.fly-in-text.hidden li :nth-child(1){ transform : translateX (-200px) translateY (-200px);}

75
.fly-in-text.hidden li :nth-child(2){ transform : translateX (20px) translateY (100px);}
.fly-in-text.hidden li :nth-child(3){ transform : translateX (-150px) translateY (-80px);}
.fly-in-text.hidden li :nth-child(4){ transform : translateX(10px) translateY (-200px);}
.fly-in-text.hidden li :nth-child(5){ transform : translateX (-300px) translateY (200px);}
.fly-in-text.hidden li :nth-child(6){ transform : translateX (30px) translateY (-20px);}
/*#loginBody {
background: radial -gradient(#15518 1 20%, #1f677f 20%, #348c7d 20%, #41a17c
20%,#0fecdd 20%);
background -size: 200% 200%;
animation: BackgroundGradient 25s ease infinite;
}
@keyframes BackgroundGradient {
0% {background -size: 200% 200%;}
50% {background -size: 300% 300%;}
100% {background -size: 400% 400%;}
}*/

body {
margin-left:20px;
margin-top:20px;
background -color: #9bf3d4;
padding-right: 0 !important ;
}

.statusmsg_yes {
margin: 50px auto;
width: 450px;
text-align: center;
background : #cdffc0;
color: #0dc435;
border: 3px solid ;
border-radius:10px;
padding: 20px;
margin-bottom: 20px;
}

.statusmsg_no {
margin: 50px auto;
width: 450px;
text-align: center;
background : #ffd3db;
color: #c40022;
border: 3px solid ;
border-radius:10px;
padding: 20px;
margin-bottom: 0px;
}
.listaAngajati {
text-align: center;
color: #eefffc;
font-family: 'Bree Serif' , serif;
font-size: 50px;
line-height: 48px;
height: 48px;
}
.shade {
position : relative ;
margin: -21px auto;
padding: 0;
display: block;
background : #37bfb9;
width: 300px;
height: 28px;
opacity: 0.45;

76
text-align: center;
}
#letter {
position : absolute ;
top:95px;
left:0px;
text-shadow: 0px 0px 5px rgb(60, 209, 203);
font-weight: 400;
display: block;
width: 100%;
min-width: 1330px;
color: #dcffff;
margin:0 auto;
/*font-family: 'Mrs Saint Delafield', cursive;*/
/*font-family: 'Pinyon Script', cu rsive;*/
/*font-family: 'Rochester', cursive;*/
font-family: 'Mr De Haviland' , cursive;
font-size: 115px;
line-height: 115px;
text-align:center;
margin-bottom: -15px;
animation -duration : 3s;
}
#myForm div > p {
padding: 10px 10px;
}
#myForm > h1 {
text-align: center;
font-family: Arial;
font-weight: 100;
font-size: 30px;
margin-top:80px;
color:#dcffff;
}
#myForm .data, .inputs {

margin-top: 125px;
}

.data {
width: 39%;
display: inline-block;
text-align: right;
margin: 0 auto;
}

.inputs {
width: 59%;
display: inline-block;
margin: 0 auto;
}

.select {
margin: 20px auto;
width: 50%;
text-align: center;
}

.inputs input , .select select {
border-radius: 8px;
padding: 3px;
outline: none;
}

77
#logIn, #activate {
margin: 100px auto;
width: 180px;
text-align: center;
}

/*#logIn > button, #activate > button {
background -color: #4CAF50; !* Green *!
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline -block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition -duration: 0.4s; !* Safari *!
transition -duration: 0.4s;
cursor: pointer;
}*/
.button {
border: none;
border-radius:4px;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration : none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition -duration : 0.4s; /* Safari */
transition -duration : 0.4s;
cursor: pointer;
outline: 0px;
}
.button1 {
background -color: #008CBA;
color: white;

}

.button1:hover {
background -color: #3da683;
/*color: black;
border: 2px solid #008CBA;*/
}
.to_home{
position:relative ;
z-index: 100;
float:left;
margin-left:275px;
margin-bottom:10px;
margin-top:50px;
margin-right:60px;
}
.log_out{
position :relative ;
z-index: 100;
float:right;
margin-right:275px; margin-bottom:10px; margin-top:50px;margin-left:0px;
}
.to_home2 {
position :relative ;
z-index: 100;

78
float:left;
margin-left:10%;
margin-bottom:10px;
margin-top:50px;
margin-right:60px;
}
.log_out2 {
position :relative ;
z-index: 100;
float:right;
margin-right:10%; margin-bottom:10px; margin-top:50px;margin-left:0px;
}

#addPhoto :hover {
opacity: 0.8;
cursor: pointer;
}

#changePhoto :hover {
opacity: 0.8;
cursor: pointer;
}
#table1{
margin:auto;
margin-top:100px;
background -color: #afe8df;
}
#table1 tr :hover{
background -color: #37bfb9;
}
#table1 a .disabled {
pointer-events: none;
}
#table1 a {
background -color: #2c928c;
border: 1px solid #2c928c;
border-radius: 5px;
color: #fff;
display: inline-block;
font-size: 14px;
font-weight: bold;
margin: 0px 5px;
width:145px;
padding: 10px 25px;
text-align: center;
text-decoration : none;
transition -duration : 0.4s;
outline:0;
}
#table1 tr :hover a{
background -color: #dcffff;
color:#2c928c;
}
#table1 tr :hover a:hover{
background -color: #b0fffd;
color: #000000;
}

#table1 tr > td:first-child {
padding: 5px;
}
#table1 th {
background -color: #37bfb9;
min-width:100px;

79
}
#table1 td {
min-width: 100px;
}
#table1 td , #table1 th {
text-align: center;
padding: 5px;
border:2px solid black ;
}
#table2 tr > td:first-child{
width:120px;
font-weight: bold;
}
.center{
width:100%;
text-align:center;
min-width: 1330px;
}
.pagination > li > a {
z-index: 3;
color: darkgreen ;
border-color: black;
}

.pagination > li > a:focus, .pagination > li > a:hover {
z-index: 3;
color: darkgreen ;
border-color: black;
}

.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active >
a:hover {
z-index: 3;
color: #fff;
cursor: default;
background -color: darkgreen ;
border-color: black;
}

.pagination > li > .arrow1 {

z-index: 3;
color: #fff;
cursor: default;
background-color: #0fbfb0;
border-color: black;
}

.pagination > li > .arrow1:focus, .pagination > li > .arrow1:hover {
z-index: 3;
color: #fff;
cursor: default;
background -color: #0fecdd;
border-color: black;

}

.pagination > li > .arrow2 {
z-index: 3;
color: #fff;
cursor: default;
background -color: #1aa813;
border-color: black;
}

80

.pagination > li > .arrow2:focus, .pagination > li > .arrow2:hover {
z-index: 3;
color: #fff;
cursor: default;
background -color: #1ada13;
border-color: black;

}
.addUser {

background -color: #2c928c;
background -size: 200px 200px;
border-radius: 50%;
border:0;
font-family: Arial;
color: #ffffff;
font-size: 33px;
padding: 10px 20px 10px 20px;
text-decoration : none;
transition -duration :0.5s;
margin:5px 10px 5px 0px;
box-shadow: 0px 0px 20px 5px #dcffff;
outline:0;
}
.addUser:hover {
background -color: #dcffff;
color:#2c928c;
box-shadow: 0px 0px 20px 5px #2c928c;

}
.addUser2 {
position : relative ;
top: 20px;
left: 0px;
font-size: 25px;
color:#dcffff;
text-decoration : underline ;
}
#rows_per_page , #goto_page {
width: 60px;
}

#pageCount {
font-size: 25px;
padding-left: 5px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; < – Crashes Chrome on hover */
-webkit-appearance : none;
margin: 0; /* <– Apparently some margin are still there even though it's hidden */
}

#chartdiv {
width: 85%;
height: 400px;
margin:0 auto;
}

.styled-select {
background : url(http://i62.tinypic.com/15xvbd5.png ) no-repeat 96% 0;
height: 29px;

81
overflow : hidden;
width: 240px;
margin: 20px;
margin-left:0px;
}

.styled-select select {
background : transparent ;
border: none;
font-size: 14px;
height: 29px;
padding: 5px; /* If you add too much padding here, the options won't show in IE */
width: 268px;
}

.rounded {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

.yellow {
background -color: #eec111;
}
#form1{
padding:35px 70px 50px 70px;
}
.group{
margin-bottom:25px;
box-sizing: border-box;
}
*::-webkit-input-placeholder {
color: #e2e2e2;
}
*:-moz-placeholder {
/* FF 4-18 */
color: #e2e2e2;
}
*::-moz-placeholder {
/* FF 19+ */
color: #e2e2e2;
}
*:-ms-input-placeholder {
/* IE 10+ */
color: #e2e2e2;
}
.group .label{
color: #e2e2e2;
font-size: 12px;
width:100%;
display:block;
text-transform : uppercase ;
box-sizing: border-box;
padding-bottom:5px;
}
.group .input {
border: none;
padding: 15px 20px;
border-radius: 25px;
background : rgba(255, 255, 255, .1);
width: 100%;
color: #fff;
display: block;
box-sizing: border-box;

82
outline: 0;
cursor: auto;
}
.group2{
margin-left:45px;
margin-bottom:10px;
box-sizing: border-box;
}
.group2 .label2{
color: #000000;
font-size: 12px;
font-weight: 100;
margin:0;
width:100%;
display:block;
text-transform : uppercase ;
box-sizing: border-box;
padding-bottom:2px;
}
.group2 .input {
border: none;
padding: 10px 20px;
border-radius: 10px;
background : rgba(65, 177, 125, 0.71);
width: 85%;
color: #fff;
display: block;
box-sizing: border-box;
outline: 0;
cursor: auto;
}
.group2 select {
border: none;
padding: 10px 20px;
border-radius: 10px;
background : rgba(65, 177, 125, 0.71);
width: 85%;
color: #fff;
display: block;
box-sizing: border-box;
outline: 0;
cursor: auto;
}
.group2 * ::-webkit-input-placeholder {
color: #ffffff;
}
.group2 * :-moz-placeholder {
/* FF 4-18 */
color: #ffffff;
}
.group2 * ::-moz-placeholder {
/* FF 19+ */
color: #ffffff;
}
.group2 * :-ms-input-placeholder {
/* IE 10+ */
color: #ffffff;
}
.group3{
margin:3px 0px;
margin-bottom:10px;
box-sizing: border-box;
width: 60%;

83
}
.group3 .label3{
color: #000000;
font-size: 12px;
font-weight: bold;
text-transform : uppercase ;
box-sizing: border-box;
margin:0;
padding-bottom:2px;
}
.group3 > i.form-control-feedback {
top: 21px;
margin-right: 55px;
}
.group3 > i.form-control-feedback >span {
font-size:20px;
position :relative ;
bottom:3px;
}
.group3 .input {
border: none;
padding: 7px 20px;
border-radius: 10px;
background : rgba(65, 177, 125, 0.71);
color: #fff;
display: block;
box-sizing: border-box;
outline: 0;
cursor: auto;
}
.group3 * ::-webkit-input-placeholder {
color: #ffffff;
}
.group3 * :-moz-placeholder {
/* FF 4-18 */
color: #ffffff;
}
.group3 * ::-moz-placeholder {
/* FF 19+ */
color: #ffffff;
}
.group3 * :-ms-input-placeholder {
/* IE 10+ */
color: #ffffff;
}
#container {
margin-left:130px;
}
/* FROM SAMPLE */
/*
body{
font-family: 'Muli', sans -serif;
background -color: #2faca9;
margin:0;
}

#container{
width:1450px;
margin:0 auto;
background -color:#ffffff;
}
#h1{
font-size:28px;
padding-top:55px;

84
margin-left:45px;
}
#h2{
font-size:25px;
padding-top:10px;
margin-left:45px;
color: #2a87a1;
}

p:first-child{
font-size:28px;
color: #376a1f;
margin-bottom:1px;
margin-top: 45px;
padding-top: 1px;
padding-bottom: 1px;
}
div p{
font-size:28px;
color: #2faca9;

margin-top: 1px;
margin-bottom: 1px;
padding-top: 1px;
padding-bottom: 1px;

}
p:last-child{
margin-bottom:45px;
}
.margintop{
margin-top:70px;
}
.common{
border-bottom:2px solid #fffad3;
margin-left:45px;
margin-right:150px;
}
.section1{
font-size:20px;
color: #bcb8b0;
margin-top: 35px;
margin-bottom:35px;
}
.section2{
margin-bottom:45px;
}
.section2 img{
margin-right:20px;
margin-top:20px;
}
.pieces{
display:inline -block;
}
.pieces p{
font-size:28px;
color: #23bc8d;
}
#pieces1{
margin-right:30px;
margin-top:15px;
margin-bottom:45px;

}

85
#pieces2{
margin-top:15px;
margin-bottom:45px;
}
.common2{
margin-left:45px;
margin-right:150px;
}*/

/* END OF SAMPLE */