INGINERIA SISTEMELOR MULTIMEDIA PROIECT DE DIPLOMĂ Ionică Oana Alexandra COORDONATOR ȘTIINȚIFIC Conf. Dr. Ing. Ionuț Cristian Rescean u Iulie 2020… [620971]

1
UNIVERSITATEA DIN CRAIOVA
FACULTATEA DE AUTOMATICĂ,
CALCULATOARE ȘI ELECTRONICĂ
INGINERIA SISTEMELOR MULTIMEDIA

PROIECT DE DIPLOMĂ
Ionică Oana Alexandra

COORDONATOR ȘTIINȚIFIC
Conf. Dr. Ing. Ionuț Cristian Rescean u

Iulie 2020
CRAIOVA

2

UNIVERSITATEA DIN CRAIOVA
FACULTATEA DE AUTOMATICĂ, CALCULATOARE
ȘI ELECTRONICĂ
INGINERIA SISTEMELOR MULTIMEDIA

APLICAȚIE WEB PENTRU GESTIUNEA
ACTIVITĂȚII CLIENȚILOR UNEI FIRME DE
SERVICII
Ionică Oana Alexandra

COORDONATOR ȘTIINȚIFIC
Conf. Dr. Ing. Ionuț Cristian Resceanu

Iulie 2020
CRAIOVA

„Învățătura este o comoară care își urmează stăpânul pretutindeni.”
Proverb popular

3
DECLARAȚIE DE ORIGINALITATE
Subsemnata IONICĂ OANA ALEXANDRA , absolvent: [anonimizat],
promoția 2016-2020, în specializarea INGINERIA SISTEMELOR MULTIMEDIA la
Facultatea de Automatică, Calculatoare și Electronică , certific prin prezenta că am luat la
cunoștință de cele prezentate mai jos și că îmi asum, în acest context, originalitatea
proiectului meu de licență:
• cu titlul “APLICAȚIE WEB PENTRU GESTIUNEA ACTIVITĂȚII
CLIENȚILOR UNEI FIRME DE SERVICII ”,
• coordonată de CONF. DR. ING. IONUȚ CRISTIAN RESCEANU,
• prezentată în sesiunea IULIE 2020
La elaborarea proiectului de licență, se consideră plagiat una dintre următoarele
acțiuni:
• reproducerea exactă a cuvintelor unui alt autor, în limba română sau prin tranducere
dintr -o altă limbă, dacă se omit ghilimele și referința precisă,
• redarea cu alte cuvinte, reformularea prin cuvinte proprii sau rezumarea ideilor din
alte lucrări, dacă nu se indică sursa bibliografică,
• prezentarea unor date experimentale obținute sau unor aplicații realizate de alți autori
fără menționarea corectă a acestor surse,
• însușirea totală sau parțială a unei lucrări în care regulile de mai sus sunt respectate,
dar care are alt autor.
Pentru evitarea acestor situații neplăcute se recomandă:
• plasarea între ghilimele a citatelor directe și indicarea referinței într- o listă
corespunzătoare la sfârșitul lucrării,
• indicarea în text a reformulării unei idei, opinii sau teorii și corespunzător în lista de
referințe a sursei originale de la care s- a făcut preluarea,
• precizarea sursei de la care s- au preluat date experimentale, descrieri tehnice, figure,
imagini, statistici, tabe le et caetera,
• precizarea referințelor poate fi omisă dacă se folosesc informații sau teorii
arhicunoscute, a căror paternitate este unanim cunoscută și accptată

Data, Semnătu ră,
20.06.2020

4

UNIVERSITATEA DIN CRAIOVA Aprobat la data de
Facultatea de Automatică, Calculatoare și …………………
Electronică Director de
Departamentul de Automatică și Electronică departament
, Prof. dr. ing.
Cosmin IONETE

PROIECTUL DE DIPLOMĂ

Numele și prenumele stu dentului/ -ei: IONICĂ OANA ALEXANDRA
Enunțul temei: “APLICAȚIE WEB PENTRU GESTIUNEA
ACTIVITĂȚII CLIENȚILOR UNEI FIRME
DE SERVICII ”,
Tema aplicației se referă la un sistem de
gestiune a activității clienților unei firme de servicii. Un sistem de gestionare a conținutului
web (WCMS) este un sistem de management al conținutului software (CMS)
specific pentru
conținutul web.
Datele de pornire: Tehnologiile folosie : PHP , HTML , CSS ,
Javascript, API, MySQLi, PDO, jQuery

Conținutul proiectului:

Proiectul este realizat din două părți: una teoretică
care se referă la noțiuni generale despre web
design și una practică care se referă la aplicația în sine.
1.Introducere
2.Programarea web
3.Concluzii
4.Bibliografie
5.Referințe web
Material grafic obligatoriu: Capturi ale ferestrelor, scheme generale ale
sistemului implementat
Consultații: Periodice
Conducătorul științific Sef lucrari dr. ing. Marius MARIAN

5
(titlul, nume și prenume, semnătura):
Data eliberării temei: 01.12.2019
Termenul estimat de predare a proiectului: 01.06.2020
Data predării proiectului de către student și
semnătura acestuia:

Prof. dr. ing. Cosmin IONETE

20.06.2020

6

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

REFERATUL CONDUCĂTORULUI ȘTIINȚIFIC
Numele și prenumele
candidatului/ -ei: IONICĂ OANA ALEXANDRA
Specializarea: ISM
Titlul proiectului: APLICAȚIE WEB PENTRU GESTIUNEA
ACTIVITĂȚII CLIENȚILOR UNEI FIRME DE SERVICII

Locația în care s- a realizat practica
de documentare (se bifează una sau mai multe din opțiunile din dreapta): În facultate □
În producție □
În cercetare □
Altă locație: ON LINE
În urma analizei lucrării candidatului au fost constatate următoarele:

7

În concluzie, se propune:
ADMITEREA PROIECTULUI □ RESPINGEREA PROIECTULUI □

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

8
Rezumatul proiectului

Gestiunea unor firme de servicii este realizata sub forma unei baze de date .
Prima pagină cu care v -a avea contact utilizatorul este pagina de auntentificare, î n care i se va
cere să introducă un mail și o parola deja existente în baza de date pentru a putea continua mai
departe în aplicație. După autentificare, utilizatorul poate observa in partea st ângă un meniu de
navigare și un rezumat al tuturor datelor aflate în aplicație.
Pentru realizarea site -ului s -au folosit următo arele tehnologii: PHP , HTML , CSS , Javascript,
API, MySQLi, PDO, jQuery.

Termenii cheie: Site, Javascript, XAMPP , HTML, CSS, SQL, PHP, Twing.

1
Cuprins
Capitolul 1. Introducere ……………………………………………………………………………………………………. 3
1.1. Tema aplicaț iei …………………………………………………………………………………………………… 3
1.2. Motivație …………………………………………………………………………………………………………… 3
1.3. Descrierea solu ției propuse ………………………………………………………………………………….. 4
1.4. Operarea unui CMS ……………………………………………………………………………………………. 7
Capitolul 2. Tehnologii folosite …………………………………………………………………………………………. 8
2.1. Ce este PHP? …………………………………………………………………………………………………………. 8
2.2. Sintaxe de bază în PHP …………………………………………………………………………………………… 9
2.3. Gestionarea formulare lor cu PHP …………………………………………………………………………… 13
2.4. API, MySQLi, PDO și informații depsre conectarea la baza de date folosind PHP ………. 19
2.4.1 Ce este un API? ……………………………………………………………………………………………… 19
2.4.2. Ce este un Connector? ……………………………………………………………………………………. 20
2.4.3. Ce este un Driver? …………………………………………………………………………………………. 21
2.4.4. Ce este o Extensie? ………………………………………………………………………………………… 22
2.5. Ce este CSS? ……………………………………………………………………………………………………….. 23
2.5.1. Ce este și cum funcționeză un limbaj de tip Style Sheet? ………………………………… 23
2.5.2. Componente ………………………………………………………………………………………………. 23
2.6. Informații despre funcționabilitatea CSS …………………………………………………………………. 26
2.6.1 Selectori ……………………………………………………………………………………………………. 26
2.6.2 Surse ………………………………………………………………………………………………………… 31
2.6.3 Specificitate ………………………………………………………………………………………………. 32
2.7. JavaScript ………………………………………………………………………………………………………… 33
2.8. jQuery …………………………………………………………………………………………………………….. 34
2.9. Chart.JS …………………………………………………………………………………………………………… 34
Capitolul 3. Manual de utilizare ………………………………………………………………………………………. 35

2
Capitolul 4. Concluzii …………………………………………………………………………………………………….. 41
Capitolul 5. Bibliografie …………………………………………………………………………………………………. 42

3
Capitolul 1. Introducere

1.1. Tema aplica ției

Tema aplicației se referă la un sistem de gestiune a activității clienților unei firme de
servicii. Un sistem de gestionare a conținutului web (WCMS) este un sistem de management al
conținutului software (CMS) specific pentruconținutul web.
Oferă instrumente de autorizare, colaborare și administrare a site- urilor web care ajută
utilizatorii cu puțină cunoaștere a limbajelor de programare web sau a limbajelor de marcare să
creeze și să gestioneze conținutul site -ului. Un WCMS oferă fundația pentru colaborare, oferind
utilizatorilor posibilitatea de a gestiona documente și informații oferite de către sistemul de
stocare a datelor pe care CMS -ul îl deține.
Majoritatea sistemelor utilizează un depozit de conținut sau o bază de date pentru a stoca
conținutul paginii, metadatele și altei nformații de care are nevoie sistemul.

1.2. Motivație

Odată cu apariția primului “World Wide Web” server și browser, creat de Tim Berners-
Lee în anul 1990, care a fost dat în folosință pentru uzul comercial în 1991 ofertele de job- uri
pentru crearea sistemelor de gestionare a activităților din domeniul online au inceput să prindă
rădăcini. Primele inovații în materie de sisteme de gestionare au apărut în anul 1994 odată cu
deschiderea primului sistem de online banking și deschiderea unui magazin online de Pizza creat
de Pizza Hut.
Apariția sistemelor de gestionare a făcut ca Web -ul să aibă o dezvoltare prolifică întrucat
ideea de a putea creea, edita și șterge informații ce pot ulterior fi salvate si vizualizate de angajații firmei fără a fi nevoie să te deplasezi a adus mulți susținători. O ramură importantă în dezvoltarea web au avut -o si companiile ce veneau cu soluții de encrypție a datelor, securitatea
informațiilor fiind o mare problemă a web- ului în primii ani de existență.

4
Creearea de platforme unice și sigure care să atragă clienți era o provocare întrucât
securitatea informațiilor la debutul sistemelor de gestionare reprezenta o mare problemă, iar
majoritatea fondurilor pentru platforme erau investiți în metode de criptare și securizare a datelor
pentru a asigura consumatorilor de web o navigare sigură și certitudinea faptului că informațiile personale, juridice sa u bancare nu erau compromise sau furate.
Dezvoltarea web -ului nu a fost posibilă și nu este în continuare posibilă fără ajutorul web
serverelor. Un Web server este o colecție de aplicații, baze de date care găzduiesc o pagină web și o pun la dispoziția ut ilizatorilor prin protcolul HTTP. Web serverul conține mai multe relații
prin care se transmit date externe sau interne, către web server sau dinspre web server către
client. Interdependența server -client se bazează pe o aplicație de pe server care este pr ogramată
pentru transferul de fisiere sau date între client și server de obicei majoritatea serverlor web
folosesc Apache sau Nginx pentru această interdepentență.
Informațiile transmise sau cerute de către utilizator sunt procesate de către un script CGI
care verifică corectitudinea datelor introduse de către utilizator sau permisiunea de a cere date de
la server, cele mai folosite script -uri în ziua de azi sunt PHP, Python, Perl. Datele introduse care
conțin informații despre adresa, email, parolă sunt i ntroduse sau retrase dintr -o bază de date.
Cele mai folosite baze da date de către web serverele contemporane sunt MariaDB, MySQL, Drizzle.
Hypertext Transfer Protocol este metoda cea mai utilizată pentru transmiterea de
informații între client și server, este protocolul implicit al WWW sub formă de text. Cerințele
HTTP- ului sunt ca pe calculatorul unde se va salva informația să existe un program care înțelege
protocolul.

1.3. Descrierea soluției propuse

Soluția propusă constă în creearea unui website sub formă de platformă de gestionare ce
permite administrarea logisticii din cadrul companiei. Platforma va fi creată sub formă de CMS
pentru adaugarea, editarea și ștergera datelor cu ușurință.

5
Tehnologiile pe care le -am folosit se regăsesc în topul tehnolo giilor pentru creearea unui
website dinamic care să satisfacă în totalitate tema aplicației. Pentru partea de frontend a
aplicației am folosit HTML5 pentru limbajul de markup interpretat de browser, CSS pentru
stilizarea elementelor folosite de limbajul de markup ales, JavaScript împreună cu populara
librărie jQuery pentru adăugarea de dinamicitate și funcționabilitate a paginii, PHP pentru partea
de backend unde procesăm datele trimise printr -un formular HTML și le introducem în baza de
date dacă acestea t rec toate verificările.
Functionalitățile pe care platforma de gestiune le oferă sunt adăugarea, editarea, ștergerea
și vizualizarea de informații despre anumite componente ale companiei, o altă funcționalitate se
referă la vizualizarea unor grafice ce co nțin informații despre datele companiei.
Ce este un sistem CMS?
Un sistem de gestionare a conținutului (CMS) gestionează crearea și modificarea
conținutului digital. De obicei, acesta accept mai mulți utilizatori într-un mediu colaborativ.
Funcțiile CMS variază foarte mult. Majoritatea CMS include publicarea pe Web,
gestionarea formatului, editarea istoricului și controlul versiunii, indexarea, căutarea și
recuperarea. Prin naturalor, sistemele de management al conținutului susținse pararea
conținutuluiși a prezentării.
Un sistem de gestionare a conținutului web (WCM sau WCMS) este un CMS conceput
pentru a sprijini gestionarea conținutului paginilor Web. CMS -urile cele mai populare sunt, de
asemenea, WCMS -uri. Conținutul Web include text și grafice încorporate, fotografii, video,
audio, hărțiși cod de program (de exemplu, pentru aplicații) care afișează conținut sau
interacționează cu utilizatorul.
Un astfel de sistem de management al conținutului (CMS) are de obicei două component
majore:
O apli cație de administrare a conținutului (CMA) este interfața utilizator frontală care
permite unui utilizator, chiar și cu experiență limitată, să adauge, să modifice și să elimine
conținut de pe un site fără intervenția unui webmaster.
O aplicație de dis tribuire a conținutului (CDA) compilează aceste informații și
actualizează site -ul Web.

6
Sistemele digitale de gestionare a activelor sunt un alt tip de CMS. Ei gestionează
conținutul cu un autor sau o proprietate clar definită, cum ar fi documente, filme, imagini,
numere de telefon și date științifice. Companiile utilizează, de asemenea, CMS -uri pentru a
stoca, controla, revizui și publica documentația.
Avantaje ale unui sistem CMS:
• Reducerea necesității de a codifica de la zero
• Ușor de creat(pentru editare de text) si permite un aspect unificat
• Controlul versiunii
• Facilitatea gestion ării permisiunilor
Dezavantaje ale unuisistem CMS:
• Abilitatea limitată sau imposibilă de a crea funcții care nu sunt prevăzute în CMS
(de ex., Machete, aplicații web e tc.)
• Creșterea nevoii de expertiză și formare special pentru autorii conținutului.
De obicei un asemenea sistem oferă unelte software prin care utilizatorii fără cunoștințe
de programare pot totuși crea și organiza conținutul cu relativă ușurință. Majorita tea sistemelor
folosesc o bază de date pentru stocarea conținutului, și un layer de prezentare pentru afișarea
acestuia vizitatorilor obișnuiți, bazat pe un set de modele sau mostre (templates). Administrarea
se face în mod normal printr -un browser web, da r unele sisteme pot fi modificate și pe alte căi.
Un CMS web diferă de creatoare de site -uri precum FrontPage sau Dreamweaver prin
faptul că un CMS permite utilizatorilor fără cunoștințe tehnice să facă schimbări în site cu
training puțin sau deloc. Un CMS este ușor de folosit și permite utilizatorilor autorizați să
administreze un site web. Un CMS este mai mult o unealtă de întreținere decât de creare de site –
uri.
Un sistem de administrare a conținutului web oferă următoarele facilități cheie:
• Templateuri automate – Creează templateuri vizuale standard care pot fi aplicate automat
conținutului nou și existent, creând un punct central pentru schimbarea interfețeiunui site
web.
• Conținut ușor editabil – Odat ă ce conținutul e separat de reprezentarea vizuală a site-ului,
editatul și manipulatul de vin de obicei mult mai ușoare și mai rapide. Cele mai multe

7
CMS -uri includ unelte de editat WYSIWYG ce permi t personalului non- tehnic să creeze
și să editeze conținut.
• Scalable feature sets – Cele mai multe CMS -uri au pluginuri sau module care pot fi
instalate ușor pentru a extinde funcționalitatea.
• Upgrade -uri după standardele web – Soluțiile active de administrare a conținutului
primesc de- obicei update -uri regulate care include noi facilități și țin sistemul la
standardele web.
• Administrarea workflow -ului – Workflowul este procesul creării de sarcini secvențiale și
paralele care trebuiesc îndeplinite de către CMS. De exemplu, un creator de conținut scrie
un articol care nu este publicat pe site până când nu este verificat de un editorul și aprobat
de editorul șef.
• Administrarea documentelor – CMS -urile pot veni cu mijloace de gestionare a ciclului de
viață al unui document, de la creare, prin revizii, publicare, arhivare și distrugere.

1.4. Operarea unui CMS

Un sistem de administrare a continutului unui site web rulează des pe serverul site- ului.
Majoritatea sistemelor oferă acces controlat pentru diferite ranguri de utilizatori cum ar fi
administratorii, editoriisicreatorii de conținut. Accesul se face de obiceiprinbro wserul web,
posibilcombinat cu FTP pentruuploadareaconținutului.
Creatorii de conținut încarcă documentelelor in sistem. Editorii accept sau resping
documentele, editorii de layout aranjează siteul. Editorul șef are deci responsabilitatea public ării
conținutului pe site -ul live. CMS -ul controlează și ajută la controlarea fiecărui pas din workflow,
incluzând partea tehnică a publicării documentelor pe unul sau mai multe servere web.
Conținutul și toate informațiile care au legătură cu site -ul sunt de -obicei stocate într-o
bază de date relaționala pe server. CMS -ul ține în mod normal evidența edițiilor anterioare ale
site-uluiși a edițiilor nepublicate încă. Paginile controlate și publicate printr -un CMS pot fi apoi
văzute de vizitatorii site -ului.

8
Capitolul 2. Tehnologii folosite

2.1.Ce este PHP?
PHP este un limbaj server -side scripting care a fost proiectat pentru dezvoltarea web
darestefolosit in ziua de azi ca un limbaj de programare întreg. Original creat de autorul sau,
Rasmus Lerdorf, în anul 1994 el este acum produs de o echipa de rezvoltare și referențiere
numită „The PHP Development Team”. Acronimul PHP a provenit în trecut de la „Personal
Home Page” dar în present numele său a fost modificat și păstrat în cel de „PHP: Hypertext
Preprocessor”
Dezv oltarea PHP -ului a început în anul 1995 când autorul său RamusLerdorf a scris
numeroase CGI -uri în limbajul de programare C cu scopul de a și întrețin apropia pagină web. El
a extins aceste CGI -uri pentru a putea lucra cu baze de date și forumlare denumind astfel propia
creație în „Personal Home Page/FormsInterpreter” sau pe scrut PHP/FI.
PHP/FI a fost proiectat pentru a ajuta la creerea de pagini web dinamice. Pentru a
accelera depanarea și rezolvarea eventualelor erori el a lansat limbajul sub numele de „Personal
Home Page Tools (PHP Tools) version 1.0” pe forumul Usenet în anul 1995 pe data de 8 iunie.
Această lansare deja deținea funcționabilitățile de bază pe care le avea PHP -ul în anul 2013.
Funcționabilități care includeau abilitatea de a lucra cu f ormulare, de a insera cod HTML,
variabile definite aproximativ ca în limbajul Perl, diferența era ca era mult mai simplu de folosit,
mai limitat si mai puțin consistent decât Perl.
În 1997 ZeevSuraski și Andi Gutmans au rescris parser -ul de bază al PHP -ului (soft -ul ce
forma structurile de date după ce ele au fost trimise către server) punând astfel bazele PHP 3 și schimbând numele lui în acronimul recursiv „PHP: HypertextPreprocessor”. După lansare testarea cu publicul a PHP -ului 3 a început în anul 1998. Suraski și Gutmans au început apoi să
rescrie funcționabilitățile de bază ale limbajului creeând astfel ZendEngine în anul 1999. ZendEngine este motorul ce interpretează PHP -ul, a apărut odată cu PHP 4 și a fost scris în C
fiind un modul back- end care pen tru prima dată putea fi folosit înafară aplicațiilor PHP. El oferă
gestionarea memoriei și a resurselor, și alte servicii de bază pentru limbajul PHP. Performanța,
fiabilitatea și puterea de extindere au jucat un rol foarte important în creșterea semnificativă a
PHP-ului.

9
Zend Engine este folosit intern de PHP ca și un compilator și ca motor de rulare. Script-
urile PHP sunt încărcate în memorie și compilate în opcode -urilor (parți ce dictează limbajului
mașină ce operații trebuie făcute pentru fișierul respective) iar după rularea op code -urilor
rezultatul HTML este trimis către utilizator.
Structura interpretoare lor este una simplistă care se rezumă la 3 părți de bază:
• Partea interpretorului care analizeaz ă codul introdus, îl traduce și îl execută.
• Partea funcționabilității care implementează funcționabilitatea limbajului (funcțiile,
denumirea de variabile etc).
• Partea de interfață care comunică cu serverul Web.
Zend se ocupă în totalitate de partea 1 și o porțiune din partea 2. PHP -ul se ocupă complet de
partea 2 și 3.

2.2. Sintaxe de bază în PHP
Pentru ca interpretatorul de pe serverul Web s ă citească codul PHP acesta trebuie să
indeplinească 3 pași.
• Fișierul din care a fost executat să aibă extensia .php
• Codul să fie corect din punct de vedere sintatic altfel pagina va afișa erori
• Codul să fie scris între ethichete PHP

3. Diagramă ce arată cum funcționează motorul Zend împreună cu alte funcționabilități.

10

<?php
//Etichete PHP, codultrebuiescrisîntreacestedouăetichetepentru a putea fi interpretat.
?>

Afișarea mesajelor de tip text pe chat se face prin comanda „echo” urmată de șirul de
caractere pe care dorim să îl afișăm :

<?php
echo "Primul meu cod PHP" ;
?>

Rezultatul generat va fi urm ătorul

Fiind un limbaj high -end și interpretabil PHP -ul nu are nevoie, în mare parte din timp, să
îi specificăm tipul de variabile pe care dorim să îl folosim, el îl va determina singur fără nici o
problemă :
<?php

$variabila1 =3;//Variabila de tip intreg
$variabila2 =0.9;//Variabila cu zecimaladupavirgula
echo $variabila1 +$variabila2 ;//Rezultatuladunarii

?>
4. Paginagenerata din codul anterior

11
Acest cod se va rula, întrucat PHP -ul față de alte limbaje de programare cum ar fi
C/C++/C#, Java încearcă să interpreteze tipul variabilelor. Rezultatul obținut este:

Deși în mare parte din timp PHP -ul încearcă să interpeteze variabilele cand vine vorba de
vectori aceștia trebuie definiți prin comanda array() care ii spune variabilei curente faptul ca ea
este un vector.

<?php

$vector =array(); //Definimvariabila vector ca fiind un vector de elemente
$vector [1]=2; //Primul cu indexul 1 element valoare de tip integer
$vector [3]=3; //Al doilea element cu indexul 3, valoare de tip integer
$vector [6]="string" ; //Al 3 -lea element cu indexul 6, valoare de tip sir de caractere
$vector [-1]=4.2; //Al 4 -lea element cu idnexul -1, valoare de tip float

var_dump( $vector ); //Afisaminformatiile din vector

?>

5. Paginarezultatadunare

12
După cum se poate vedea în exemplul de mai sus PHP -ul nu restricționează tipul unui vector la
un set de date în plus știe să lucreze cu index -uri negative iar pentru valori de tip șir de caractere
nu este nevoie copierea lor în vector ci doar asignarea șirului de caractere.

6. Rezultatafisareelemente din vector

Creerea variabilelor în PHP necesită doar simbolul $ înainte de prima literă, ele nu pot
începe cu cifr e sau alte simboluri care sunt predestinate altor operații de exemplu următorul cod
va genera o eroare:
<?php

$3=5;

echo $3;

?>

13
Eroarea generat ă este următoarea:

7. Paginaeroare
Însă underline este un simbol acceptat următorul cod fiind valid și rulând afișând pe ecran
rezultatul dorit.
<?php

$_asdas =3;

echo $_asdas ;

?>

2.3. Gestionarea formularelor cu PHP
Pentru ca PHP -ul să se poat ă folosii de formulare acesta are nevoie de creerea unui
formular sintactic corect in HTML , iar scriptul să fie apelat de acel formular. Mai jos avem un
exemplu care arată cum trebuie scris un formular în HTML.
<form action= "php.php" method= "post" >
<h2>Adunarea, înmulțireașiîmpărțirea a 2 valori date </h2>
Valoare 1: <input type= "number" name= "valoare1" ><br/>
Valoare 2: <input type= "number" name= "valoare2" ><br/>
<input type= "submit"value= "Calculează" >
</form>

14
Odat ă apăsat se va trimite prin metoda specificată în atributul „method” valorile către
fișierul specificat în atributul „action” al etichetei form. Fișierul PHP conține următoarele linii de
cod.
<?php

$variabila1 =$_POST ['valoare1' ];
$variabila2 =$_POST ['valoare2' ];

$suma =$variabila1+ $variabila2;

$produs =$variabila1 *$variabila2 ;

$cat=$variabila1 /$variabila2 ;

echo "Suma este: " .$suma ;
echo "<br/>" ;
echo "Produsuleste: " .$produs ;
echo "<br/>" ;
echo "Catuleste: ".$cat ;

?>

Codul HTML generază următoarea pagină .

8. Paginaformularinainte de procesare

15
La apăsarea butonului calculează se va transmite către fișierul php.php de pe serverul
web prin metoda POST valorile din casetele formularului. Rezultatul va fi cod HTML pe care îl
afișează PHP -ul.

În exemplul de mai jos vom calcula suma, produsul și câtul celor două variabile folosind
metoda GET în locul metodei POST. Codul HTML este următorul:
<form action= "php.php" method= "get">
<h2>Adunarea, înmulțireașiîmpărțirea a 2 valori date </h2>
Valoare 1: <input type= "number" name= "valoare1" ><br/>
Valoare 2: <input type= "number" name= "valoare2" ><br/>
<input type= "submit"value= "Calculează" >
</form>

Observa ți cum singura diferență între POST și GET când vine vorba de codul HTML este
doar specificarea metodei în atributul method din eticheta formularului. Pagina generată ulterior
este idetică la aparență cu cea din exempl ul anterior.

9. Paginaformulardupaprocesare

16

Deși aspectul este identic codul PHP trebuie modificat astfel încât să reflecte faptul că
retragem informația din URL prin metoda GET.
<?php

$variabila1 =$_GET ['valoare1' ];
$variabila2 =$_GET ['valoare2' ];

$suma =$variabila1+ $variabila2;

$produs =$variabila1 *$variabila2 ;

$cat=$variabila1 /$variabila2 ;

echo "Suma este: " .$suma ;
echo "<br/>" ;
echo "Produsuleste: " .$produs ;
echo "<br/>" ;
echo "Catuleste: ".$cat ;

?>

10. Paginaformular GET

17
Odată ce este apăsat butonul calculează URL se modifică și ne trimite către fișierul
specificat adică php.php, adițional la acest URL se adaugă toate casetele din formulare respectiv,
URL -ul devenind http://localhost/php.php?valoare1=12&valoare2=20 . La fel cum putem
obersva în poza de mai jos codul PHP rulează în același mod odată ce i-am adus modificările
necesare.

Dacă metoda POST necesită un formular prin care să se transmit datele pentru metoda
GET acest lucru nu mai este valabil, putând accesa script -ul PHP chiar dacă nu este apelată
pagina HTML ci doar URL către calea script -ului împreună cu variabilele necesare. De exemplu
accesând link -ul http://localhost/php.php?valoare1=15&valoare2= 40 direct din browser va avea
același efect ca și apăsarea butonului.
PHP-ul poate genera cod HTML înfuncție de condițiile ce ii se dau, de exemplu el poate
genera o pagină diferită dacă butonul de trimitere a formularului a fost apăsat înainte. Din aceast
motiv se spune că el poate genera pagini web dinamice, în trucâ t acestea se schimbă și se mulează
după datele pe care le primesc de la utilizatori sau deținători.
Codul de mai jos va genera o pagina care se va schimba odată cu apăsarea butonului
„Apasă”.
<!DOCTYPE html>
<html>
<head>
<title> <?php if(isset($_POST ['buton'])) echo "Titlu 2" ;elseecho "Titlu 1"; ?></title>
</head>

11. Paginaformular GET procesat

18
<body>
<h1><?php if(isset($_POST ['buton'])) echo "Formulartrimis"; elseecho "Formularnetrimi
s";?></h1>

<form method= "post" action= "php.php" >
<input type= "submit"value= "Apasa" name="buton" >
</form>

</body>
</html>

Pagina generată înainte de apăsarea butonului:

Pagina generată după apăsarea butonului:
12. Paginatestarefunctieisset

19

13.Pagina rezultatfunctieisset

PHP a detectat faptul că butonul a fost apăsat și a schimbat titlul și conținutul paginii.

2.4. API, MySQLi, PDO și informații depsre conectarea la baza de
date folosind PHP

2.4.1 Ce este un API?

Appilcation Programming Interface sau API definește clase, metode, funcții și variabile
pe care aplicația ta va trebuii să le apeleze pentru a obține un rezultat împreună cu un set de date.
În acest caz aplicațiile care trebuie să comunice cu bazele date au nevoie de unul sau mai multe API-uri. Majoritatea lor se regăsesc în extensi ile PHP -ului.
Stilurile API- urilor pot fi procedurale sau orientate pe obiecte. Cu un API procedural
apelezi funcțiile pentru a obține rezultatul dorit, cu un API orientat pe obiecte inițializezi clase apoi apelezi metodele acelor clase pentru a obține un obiect ce conține rezultatele dorite. Dintre
cele două cea mai bună este ceea pe care o preferi sau varianta care duce la cele mai moderne implementari și un cod bine organizat.

20
În imaginea de mai jos aveți ilustrată cum funcționează un API atunci când este apelat.

2.4.2. Ce este un Connector?
În documentația MySQL termenul de connector se referă la o parte din software care ne
permite aplicației noastre să se conecteze la un server cu bază de date MySQL. MySQL deține
conectori pentru o varietate largă de limbaje de programare, unul dintre ele fiind și PHP.
Dacă aplicația ta necesită să comunice cu un server ce conține o bază de date trebuie să
scrii cod PHP care să execute astfel de activități , conectarea la baza de d ate, verificarea
conexiunii către cod și baza de date, interogarea bazei de date precum și alte opreații specifice
bazelor de date. Software- ul trebuie să conțină API -ul pe care aplicația PHP o va folosii și va
trebuii să poată să manipuleze conexiuni într e aplicația ta și serverul ce conține baza de date,
posibil să fie nevoie de alte librări intermediare pe parcursul procesului. Acest software este
cunoscut sub numele generic de connector, ceea ce îți permite conectarea aplicației tale la un
server cu o b ază de date.

14. Diagrama API

21
În imaginea de mai jos aveți reprezentat rolul conectorului

2.4.3. Ce este un Driver?

Driver- ul este aceea parte din software proiectată să comunice cu un tip specificat de bază
de date. Driver -ul poate apela la librări, cum ar fi MySQL Client Library sau la alte drivere
MySQL Native Driver. Aceste librăriimplementeză un protocol low -level folosit pentru
comunicarea cu un server ce deține bază de date MySQL.
De exemplu stratul de abstrac ție al bazei de date PDO (sau PHP Data Objects) folosește
mai multe drivere specifice pentru a realiza acest lucru. Unul dintre drivere este chiar PDO
MySQL driver, care ne lasă să interferăm cu interfața serverului MySQL.
De multe ori persoanele folosesc termenii de connector și driver pe dos, ceea ce poate
duce la confuzie. În documentația MySQL termenul de „driver” este rezervat pentru un software
ce prevede o parte a unui connector folosită special pentru conectarea la o bază de date specifică.
15. Diagrama connector

22
În imaginea de mai jos putem observa cum functionează un driver :

2.4.4. Ce este o Extensie?
În documentația PHP o să ne întâlnim de multe ori cu termenul de extensie. Codul PHP
este format dintr -un miez căruia ii se pot aduce extensii suplimentare pentru mai multă
funcționabilitate. Extensiile ce țin de PHP MySQL, cum ar fi extensia mysqli și extensia mysql, sunt implmentate folosind framework- ul PHP extension.
O extensie dezvăluie un API c ătre programator, ceea ce îi permite să folosească
facilitățile lui. Totuși, unele extensii care folosesc frameworkul PHP extension nu dezvă luie un
API către programator.
Termenii API și extensie nu trebuie să fie confundați cu faptul că înseamnă același lucru,
întrucat extensia nu trebuie să îi dea acces programatorului la un API.
Care sunt principalele API- uri din PHP pe care le oferă MySQL? Există trei API -uri
principale când dormi să ne conectăm la un server cu bază de date MySQL :
• PHP's MySQL Extensio n
• PHP's mysqli Extension
• PHP Data Objects (PDO)
16. Diagrama driver

23
Fiecaredintreleele are avantajeleș i dezavantajele propii. În discuția de mai jos voi încerca să
fac o scurtă descriere despre fiecare API cât și ceea ce oferă în plus.
2.5.Ce este CSS?
CSS sau Cascading Style Sheets este un limbaj de tip style sheet folosit pentru a înfățișa
prezentareaunui document scrisintr -un limbaj de tip markup. Deși este folosit cel mai des
pentru a seta un stil visual pentru pagini web și interfațe pentru utilizatori scrise în HTML
sau XHTML, el poate fi olosit pe orice document de tip XML (inclusive XML simplu, SVG
și XUL) ș i este aplicabil pentru redarea în vorbire . Împreună cu HTML și JavaScript, CSS
este o piatră de temelie folosită de majoritatea siteurilor web pentru a crea conț inut captivant
pentru utilizatori, interfațe pentru aplicațiile web, interfațe de utlizator pentru multe aplicații
mobile.
2.5.1. Ce este și cum funcționeză un limbaj de tip StyleSheet?

Un limbaj de tip stylesheet este un limbaj de programare creat cu scoup de a infrumuseța
prezentarea unor documente structurate. O parte atractiva a acestor limbaje de programare este faptul că diferite stiluri pot fi aplicate pe structura logică a documentului pentru a produce diferite prezentări ale documentului.
Un limbaj de programare modern de tip stylesheet cu o mare răspândire este chiar
CascadingStyleSheets, care este folosit pentru a stiliza documente scrie in limbaje precum
HTML, XHTML, SVG, XUL, precum și alte limbaje de programare de tip markup.
Pentru st ilizarea conținutului din documentele ce urmează să fie prezentate un set de reguli
stilistice trebuie aplicate, reguli care descriu spre exemplu culoarea, font -ul sau așezarea în
pagină. O colecție de reguli stilistice se numeste fișier de tip stylesheet. Stylesheets care prezintă
documente scrise au o lungă istorie, ele au fost folosite prima dată de către editoarele de text și tipografii pentru a asigura consistența prezentărilor, ortografia și punctuația. În publicarea electronică, stylesheet -urile sunt folosinte cel mai des pentru prezentarea vizuală în defavoarea
ortografiei și a punctuației.
2.5.2. Componente
Sintaxa este unul dintre principalele componente a unui limbaj de programare de tip
stylesheet. O sintaxă este necesară pentru a exprima totul într -o manieră în care și mașina și
omul poate citii. De exemplu mai jos regăsim o sintaxă CSS :

24
h2{font-size:12px}

Selectorii specifică care elemente o să fie sub influența regulii de stilizare. Astfel ei devin
lipiciul dintre structurile documentului și regulile stilizării într -un limbaj de tip stylesheet. În
exemplul de mai sus selectorul „h2” selectează toate elementele de tip h2. Selectori complecși
sunt folosiți pentru a selecta elemente pe baza contextuluilor, a atributelor sau a conținutului.

17. Selectori CSS
Toate limbajele de tip style sheet au conceptual de propietăți cărora trebuie să le atribui
valori prestabilite sau logice pentru ca aspectul unui element să se modifice. Propietatea „font –
size” folosită mai este strict o propietate a limbajului CSS. Limbajele de tip style sheet au de
obiceiînjur de 50 care ajută la prezentarea documentelor.

25

18. Plasarepropietăți CSS
Toate limbajele de programare de tip style sheet suportă un fel de model de formatare.
Multe limbaje de tip style sheet au un model de formatare vizual care arată, în cateva detalii, cum
este textul și alt conținut așezat în prezentarea finală. De exemplu, modelul de formatare CSS
specifică faptul că elementel e de tip block- level (din care "h2 " este un exemplu) se extend pentru
a umple lățimea elementului părinte. Unele limbaje style sheet au un model de formatare audio.

19. Model formatarevizuala CSS

26
2.6. Informații despre funcționabilitatea CSS

CSS este conceput în primul rând pentru a permite separarea prezentării și a conținutului,
inclusive aspecte precum layou t-ul, culorile și fonturile. Această separare poate îmbunătăți
accesibilitatea conținutului, poate oferi mai multă flexibilitate și control în specificațiile
caracteristicilor de prezentare, permite mai multor pagini HTML să partajeze formatarea prin
specificarea CSS -ului relevant într -un fișier separat .css și să reducă complexitatea și repetarea în
conținutul structural.
Separarea formatării și a conținutului face posibilă prezentarea aceleiași pagini d e
marcare în diferite stiluri pentru diferite metode de randare, cum ar fi pe ecran, prin imprimare,
prin voce (prin intermediul browserului bazat pe vorbire sau cititor de ecran) și tactil pe baza
unor dispositive care redau alfabetul Braille . De asemenea, poate afișa diferit pagina web, în
funcție de dimensiunea ecranului sau de dispozitivul de vizualizare. De asemenea, cititorii pot
specifica o altă foaie de stil (style sheet), cum ar fi un fișier CSS stocat pe calculatorul propriu,
pentru a l înlocui pe cel specificat de autor.
Modificările aduse designului grafic al unui document (sau a sute de documente) pot fi
aplicate rapid și ușor, prin editarea câtorva linii din fișierul CSS pe care îl folosește apicația, mai
degrabă decât prin modificarea m arcajului în documente.
Specificația CSS descrie o schemă prioritară pentru a determina ce reguli de stil se aplică
dacă mai multe reguli se potrivesc cu un anumit element. În această așa-numită cascadă,
prioritățile (saugreutățile) sunt calculate și atribuite regulilor, astfel încât rezultatele să fie
previzibile.
Specificațiile CSS sunt menținute de Consorțiul World Wide Web (W3C). Internet
media type (tip MIME) text/cssesteînregistrată pentruutilizare a CSS cu revizia RFC 2318 (martie
1998). W3C oper ează un serviciugratuit de valida re CSS pentrudocumente.

2.6.1 Selectori

În CSS, selectorii declară care parte a marcajului aplică un stil prin potrivirea etichetelor și
atributelor înmarcajul propriu- zis/

27
Selectorii se pot aplica la:
• Toate elementele de tipul specific, de ex. Anteturile de nivelul al doilea h2
• Elemente specificate prin atribut, în special:
• Id: un identificator unic în cadrul documentului
• Clasă: un identificator care poate adnota mai multe
elemente într -un document
• Elementeînfuncție de modulîn care sunt plasate înraport cu ceilalți în arborele de
documente.
Claseleși ID -urile sunt case- sensitive, încep cu litereși pot include caractere alfanumerice
și subliniere. O clasă se poateaplicaoricăruinumăr de elemente de elemente. Un ID poate fi
aplicat numai unui singur element.
Pseudo- clasele sunt folosite înselectorii CSS pentru a permite formatarea pe baza
informațiilor care nu sunt conținute în arborele de documente. Un exemplu de pseudo- clasă pe
scară largăeste :hover care identifică conțin utul numai atunci când utilizatorul "indică"
elemental vizibil, de obicei ținând cursorul mouse -ului peste el. Acesta este atașat unui selector
ca în a:hover sau #elementid:hover . O pseudo- clasă clasifică elementele documentului,
cum ar fi :link sau :visited întrucât un pseudo- element face o selecție care poate consta
din elemente parțiale, cum ar fi ::first-line sau ::first-letter .
Selectorii pot fi combinați în multe feluri pentru a obține o mare spe cificitate și
flexibilitate. Selectorii multipli pot fi uniți într-o listă distanțată pentru a specifica elementele
după locație, tip de element, id, clasă sau orice combinație a acestora. Ordinea selectorilor este
important. De exemplu, div .myClass {color: red;} se aplică tuturor elementelor din
clasamyClass care sunt în interiorul elementelor div, întimp ce .myClass div{color: red;}
se aplică tuturor elementelor div care se află în elementele claseimyClass.
Următorul table oferă un rezumat al sintaxei selectorului care indică utilizarea și
versiunea CSS care a introdus -o.

28
Model Folosin ță Prima dată
aparută în CSS
E Un element de tip E 1
E:link Un element E este ancora sursă a unei hiper legături a cărei
destinație nu este încă vizitată (: link) sau déjà vizitate (:
visited) 1
E:active Un element E în timpul anumitor acțiuni ale utilizatorilor 1
E::first- line Prima linie formatată a unui element E 1
E::first- letter Prima literă formatată a unui element E 1
.c Toate elementele cu clasa = "c" 1
#myid Elementul cu id = "myid" 1
E.warning Un element E a cărui clasă este "avertizare" (limbajul
documentului specifică modul de determinare a clasei) 1
E#myid Un element E cu ID egal cu "myid" 1
E F Un element F descendent al unui element E 1
* Orice element 2
E[foo] Un element E cu un atribut "foo" 2
E[foo="bar"] Un element E a cărui valoare de atribut "foo" este exact
egală cu "bar" 2

29
E[foo~="bar"] Un element E a căruivaloare de atribut "foo" este o listă a
valorilor separate de spațiulalb, dintre care unul este exact
egal cu "bar" 2
E[foo|="en"] Un element E al cărui atribut "foo" are o listă de valori
separate prin liniuțe începând (din stânga) cu "en" 2
E:first -child Un element E, primul copil al părintelui său 2
E:lang(fr) Un element de tip E înlimba "pentru" (limba de
documentar e specific modul în care limba este determinată) 2
E::before Conținut înainte de conținutul elementului E 2
E::after Conținut după conținutul elementului E 2
E > F Un element F descedent al unui element E 2
E + F Un element F precedent imediat de un element E 2
E[foo^="bar"] Un element E a cărui valoare de atribut "foo" începe exact
cu șirul „bar” 3
E[foo$="bar"] an E element whose "foo" attribute value ends exactly with
the string "bar" 3
E[foo*="bar"] Un element E a cărui valoare de atribut "foo" se termină
exact cu șirul "bar" 3
E:root Un element E, rădăcina documentului 3
E:nth -child(n) Un element E, al n- lea copil al părintelui său 3
E:nth -last- Un element E, al n -lea copil al părintelui său, numărând de 3

30
child(n) la ultimul
E:nth -of-type(n) Un ele ment E, cel de -al doilea frate al tipului său 3
E:nth -last-of-
type(n) Un element E, cel de- al doilea frate de tip, numărând de la
ultimul 3
E:last- child Un element E, ultimul copil al părintelui său 3
E:first -of-type Un element E, primul frate de același tip 3
E:last- of-type Un element E, ultimul frate de același tip 3
E:only- child Un element E, numai copilul părintelui său 3
E:only- of-type Un element E, doar pentru fratele său de același tip 3
E:empty Un element E care nu are copii ( inclusive noduri de text) 3
E:target Un element E fiind ț inta adresei URL de trimitere 3
E:enabled Un element de interfață cu utilizatorul E care este activat 3
E:disabled Un element de interfață cu utilizatorul E care este
dezactivat 3
E:checked Un element al interfeței utilizator E care este bifat (de
exemplu, un buton radio sau casetă de selectare) 3
E:not(s) Un element E care nu se potrivește cu selectorii simpli s 3
E ~ F Un element F precedat de un element E 3

31
2.6.2 Surse

Informațiile CSS pot fi furnizate din diverse surse. Aceste surse pot fi browserul web,
utilizatorul și autorul. Informațiile de la autor pot fi clasificate în continuare în linie, tipul media,
importanța, specificitatea selectorului, ordinea regulilor, mo ștenirea și definiția proprietății.
Informațiile despre stil CSS pot fi într- un document separate sau pot fi incorporate într-un
document HTML. Foi de stil multiple pot fi importate. Diferite stiluri pot fi aplicate în funcție de
dispozitivul de ieșire utilizat; De exemplu, versiunea de ecran poate fi destul de diferită de
versiunea tipărită, astfel încât autorii să poată adapta prezentarea corespunzător pentru fiecare
mediu.

Foaia de stil cu cea mai mare prioritate controlează afișarea conținutului. Decla rațiile care nu
sunt setate în sursa cea mai înaltă prioritate sunt transferate către o sursă de prioritate mai mică,
cum ar fi stilul agentului utilizator. Acest proces se numește cascadă.
Unul dintre scopurile CSS este de a permite utilizatorilor un control mai mare asupra
prezentării. Cineva care găsește titluri roșii italiene greu de citit poate aplica o foaie de stil
diferită. Înfuncție de browser și de site- ul Web, utilizatorul poate allege între diferitele foi de stil
furnizate de designer sau poate elimina toate stilurile adăugate și poate vizualiza site -ul folosind
stilul implicit al browserului sau poate să înlocuiască doar stilul rubricii roșii italice fără a altera
alte atribute.
Mai jos avem s chema de priorități CSS ( de la cea mai mare prioritate până la cea mai mică)

Prioritate Tipul de sursă CSS Descriere
1 Importanță Adontarea ‘ !important ’ suprascrie tipurile de
priorități anterioare
2 Pe linie Un stil aplicat unui element HTML prin
atributul HTML "stil"
3 Tipul media O definiție a proprietății se aplicătuturortipurilor
de suporturi media, cu excepțiacazuluiîn care
estedefinită o CSS specifică mass- media
4 Definită de utilizator Majoritatea browserelor au funcția de
accesibilitate: un CSS definit de utilizator

32
5 Selectivitateaspecificatorului Un selector contextual specific ( #heading p)
suprascriedefinițiagenerică
6 Ordinearegulilor Ultima declarație de regulă are o prioritatemai
mare
7 Moștenireapărintească Dacă nu este specificată o proprietate, ea este
moștenită de la un element părinte
8 Definireaproprietății CSS
îndocumentul HTML Regula CSS saustilul CSS pe linie suprascrie o
valoare implicită a browserului
9 Valorileimplicite ale
browserului Prioritatea minimă: valoarea implicită a
browserului este determinată de specificațiile
valorii inițiale W3C

2.6.3 Specificitate

Specificitatea se referă la greutățile relati ve ale diferitelor reguli. Aceastadeterminăstilurile
care se aplicăunui element atuncicând se pot aplicamaimulte reguli. Pe bazaspecificațiilor, un
simplu selector (de exemplu, H1) are o specificitate de selectori de clasă 1, care au o specificitate de 1,0 șiselectori de ID o specificitate de 1,0,0. Deoarecevalorilespecificității nu se reportează ca însistemulzecimal, se utiliz ează virgule pentru a separa "cifrele" (o regulă CSS având 11
elementeși 11 clasearavea o specificitate de 11,11, nu 121).

Astfel, următoriiselectori de reguli au ca rezultatspecificitateaindicată:
Selectori Specificitate
H1 {color: white;} 0, 0, 0, 1
P EM {color: green;} 0, 0, 0, 2
.grape {color: red;} 0, 0, 1, 0
P.bright {color: blue;} 0, 0, 1, 1
P.brightEM.dark {color: yellow;} 0, 0, 2, 2
#id218 {color: brown;} 0, 1, 0, 0
style=" " 1, 0, 0, 0

33
Exemplu, se considera acest cod HTML
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<style >
#xyz {color :red;}
</style >
</head>
<body >
<pid="xyz" style ="color: blue;" >Pentru a demonstra specificitatea</ p>

2.7. JavaScript

JavaScript, adesea abreviat ca JS, este un limbaj de programare la nivel înalt, interpretat. Este
un limbaj care este, de asemenea, caracterizat ca fiind dinamic, slab tastat (nu conț ine reguli
stricte pentru tipurile de elemente la initializare, EX: int, string, char), bazat pe prototip și multi-
paradigmă.
Alături de HTML și CSS, JavaScript este una dintre cele trei tehnologii de bază ale World
Wide Web.JavaScript permite pagini i web să devină interactiv ă și, astfel, este o parte esențială a
aplicațiilor web. Marea majoritate a site- urilor web utilizează acest limbaj și toate browserele
web majore au un motor dedicat JavaScript pentru a -l executa.
Ca limbaj cu mai multe paradigme, JavaScript accept stiluri de programare bazate pe
evenimente, funcționale și imperative (inclusive obiecte orientate și prototipuri). Are un API
pentru a lucra cu text e, matrice, date, expresii regulate și manipulare de bază a DOM, însă limba
în sine nu include niciun I / O (input/output), cum ar fi facilități de rețea, stocare sau grafică,
bazându- se pe gazdă în care este încorporat să îl aprovizionez e cu informații .

Inițial JavaScript a fost integrat numai în partea de client implementată în browserele web,
motoarele JavaScript sunt acum în corporate în multe alte tipuri de software gazdă, inclusive în
servere web , baze de date,ș i în programe non- web, cum ar fi procesoare de text și software PDF,

34
medii care fac JavaScript disponibil pentru scrierea aplicațiilor mobile și desktop, inclusiv
widget -uri desktop.

Deși există similitudini puternice între JavaScript și Java, inclusive numele limbajului ,
sintaxa și bibliotecile standard respective, cele două limbaje sunt distinct și diferă foarte mult în
ceea ce privește designul; JavaScript a fost influențat de limb aje de programare, cum ar fi Self și
Scheme.

2.8. jQuery

jQuery este o bibliotecă JavaScript proiectată pentru a simplifica scripting -ul HTML al
clientului. Este gratuită , open- source cu permisiunea permisivă MIT. Analiza web indică faptul
că este cea mai răspândită bibliotecă JavaScript cu o marjă mare.
Sintaxa jQuery este concepută pentru a facilita navigarea pe un document, selectarea
elementelor DOM, crearea animațiilor, gestionarea evenimentelor și dezvoltarea aplicațiilor
Ajax. jQuery oferă, de asemenea, capabilități dezvoltatorilor de a crea pluginuri JavaScript.
Acest lucru îi permite dezvoltatorilor să creeze abstracții pentru interacțiune și animație la
nivel scăzut, efecte avansate și widget -uri la nivel înalt, care pot fi modelate. Abordarea
modulară a bibliotecii jQuery permite crearea de pagini web dinamice puternice șiaplicații Web.
Setul de caracteristici de baza ale jQuery sunt selecțiile elementului DOM, parcurgerile in
mod traversal și manipulare a acestora – activate de motoruls ău selector (numit "Sizzle" de la
versiunea 1.3), au creat un nou "stil de programare", algoritmi de fuziune și structuri de date
DOM. Acest stil a influențat arhitectura altor cadre JavaScript cum ar fi YUI și Dojo, stimulând
ulterior crearea standardului API Selectors.

2.9. Chart.JS

Chart.js este o bibliotecă JavaScript care ne permite să desenăm diferite tipuri de
diagrame utilizând elementul canvas HTML5. Din moment ce folosește o “pânză”, trebuie să
includem un “polyfill” pentru a sprijini browserele mai vechi în cazul în care lucram cu browsere
vechi . Cel sugerat de autor este Explorer Canv as.

35

Biblioteca nu are dependențe, iar dimensiunea ei este foarte scăzută, deoarece este de
aproximativ 11KB atunci când este minificată, concatenată șiservită GZIPPED . Cu toate acestea,
putem reduce chiar mai mult dimensiunea, dacă nu utiliz ăm toate cele șase tipuri de diagram e de
bază, prin includerea numai a modulelor de care ave m nevoie. Deci, să spunem că trebuie doar să
desen ăm o diagram în site -ul nostru web, pute m include modulul de bază și modulul de bara și
astfel pute m salva lățimea de bandă pentru utilizatorii noștri cefolosesc diagrama .

O altă caracteristică interesantă a Chart. JS este că diagramele sunt receptive, astfel încât acestea
se vor adapta pe baza spațiului disponibil. Încele din urmă, spre deosebire de multe biblioteci pe
care le puteți găsi pe web, furnizează o documentație extinsă și clară, care face foarte ușor
utilizarea funcțiilor sale de bază ș i a opțiunilor avansate.

Capitolul 3. Manual de utilizare

Prima pagină cu care v -a avea contact utilizatorul este pagina de auntentificare. În care ii
se va cere să introducă un mail și o parola deja existente în baza de date pentru a putea continua mai departe în aplicație.

Dacă numele sau parola sunt introduse greșit ii se va afișa un mesaj de eroare care nu îl va lăsa să continue mai departe în aplicație până când nu introduce date valide.

36

Odată intr oduse datele corecte utilizatoru l va fi redirecționat către pagina de întâmpinare
care îi v a arata un mesaj specific. De aici el poate să observe un rezumat al tutu ror datelor aflate
în aplicație . În partea din stânga se află meniul de navigare iar in partea de sus în stânga se află
numele firmei .

Utilizatorul poate naviga liber prin oricare dintre secțiunile aflate în meniu. Dând click pe
profil acesta va fi redirecționa t câtre pagina de profil al contului de unde poate să își datele
personale sau sa vizualizeze date precum punctul de lucru, departamet ul sau compania .

37

La selectarea uneia dintre paginile de administrare ii se va deschide o pagina care va
conține un t abel cu informații despre secțiunea selectată.

Inițial butoanele modifică și informații nu sunt decât dacă utilizatorul are permisiunea de
administrator. După selectarea uneia dintre î nregistrarile din tabel se va deschide o pagină ce
conține informații despre î nregistrarea selectată

38

Dacă se dă click pe butonul de modificăse va deschide o pagina cu datele companiei care
pot fi modificate.

La click pe modificare va aparea un pop- out ce conține informații desprea starea modificării.

39
La cl ick pe butonul de adaugare se va afisa un formular nou de unde se poate adauga o
noua inregistrare după completarea câmpurilor goale.

La navigarea către pagina de statistici administratorul va fi întâmpinat cu 4 diagrame
generale ce conțin statistici realizate folosind datele care au fost înregistrare până în prezent.

40

41
Capitolul 4. Concluzi i

Având în vedere evoluția tehnologică accelerată a paginilor web actuale determinată de
nevoile sporite de mobilitate a utilizatorilor dar și de entuziasmul care nu poate fi neglijat al
tinerei generații pentru utilizarea acestora, consider că paginile web sunt o parte importantă a
lumii contemporane .

Cu puterea de procesare și folosirea mai rară a ramilor, limbajele de programare web
ajung tot mai aprope de cerințele a limbajelor de programare lowlevel și cu viteza de comunicare
între server și utilizator, acestea reușesc să devină componente viabile ale unor sistemelor de
automatizare, în special în ce privește monitorizarea activităților, managementul clienților și a
informațiilor din cadrul unei firme .
Evoluția explozivă a pieței terminalelor inteligente mobile din ultimii ani a fost
caracterizată de schimbări importante în tehnologiile înglobate, dar și de o serie de noi apariții în rândul sistemelor de operare pentru acestea. Odată cu ele a fost dezvoltată în paralel piața de
pagini web ce oferă servicii de gestionare și administrare a soluțiilor unei comapnii .

Consider că această lucrare demonstrează viabilitatea ideii propuse, de util izare a
terminalelor și a paginilor web pentru administrarea activităților clienților a unei companii de
servicii cu scopul de a ușura în viața de zi cu zi munca depusă pentru colectarea și procesarea
datelor care sunt din ce in ce mai greu de gest ionat ma nual de către o persoană, fără ajutorul unui
calculator sau a unor sisteme informatice, intrucât volumul de date se mărește constant .

42
Capitolul 5. Bibliografie

• L. Ullman, "PHP pentru World Wide Web", Editura Teora, Bucuresti, 2004
• Site-ul oficial al PHP: http://www.php.net
• L. Welling, L. Thomson, "Dezvoltarea aplicatiilor Web cu PHP si MySQL", Editura
Teora, Bucuresti, 2004: http://www.teora.ro
• S. Buraga, "Tehnol ogii Web", Editura Matrix Rom, Bucuresti, 2001:
http://www.infoiasi.ro/~busaco/books/web.html
• Sabin Buraga, Proiectarea siturilor Web, Editura Polirom, Iași, 2002
• LukeWroblewski, Site -Seeing -A Visual ApproachTo Web Usability, HungryMinds, New
York, 2002
• Valentin Clocotici, HTM L – manual on- line:
http://www.infoiasi.ro/~val/htmlearn.htm
• ȘtefanTanasă, Scurtă prezentare a limbajului HTML :
http://thor.infoiasi.ro/~stanasa/web/html.html
• * * *, HyperText Markup Language (HTML) Home Page :
http://www.w3.org/MarkUp/
• * * *, Basics of HTML :
http://www.htmlgoodies.com/primers/basics.html
• jQuery – https://jquery.com/
• Chart.JS – https://www.chartjs.org/
• Creating Beautiful Charts with Chart. JS – https://www.sitepoint.com/creating –
beautiful -charts -chart -js/
• CMS (Content management System) –
https://ro.wikipedia.org/wiki/Sistem_de_administrare_a_con%C8%9Binutului