Îndrum ator s ,tiint ,ific: [612414]

UNIVERSITATEA DIN CRAIOV A
FACULTATEA DE S ,TIINTE EXACTE
SPECIALIZAREA INFORMATIC ˘A METODE S ,I MODELE ÎN
INTELIGENT ,A ARTIFICIAL ˘A
LUCRARE DE DISERTAT ,IE
Îndrum ˘ator s ,tiint ,ific:
Conf. univ. dr. Colhon Mihaela
Absolvent: [anonimizat]
2019

UNIVERSITATEA DIN CRAIOV A
FACULTATEA DE S ,TIINTE EXACTE
SPECIALIZAREA INFORMATIC ˘A METODE S ,I MODELE ÎN
INTELIGENT ,A ARTIFICIAL ˘A
MODUL DE INTEROGARE
SEMANTIC ˘A A UNEI BAZE DE DATE
Îndrum ˘ator s ,tiint ,ific:
Conf. univ. dr. Colhon Mihaela
Absolvent: [anonimizat]
2019

Cuprins
Cuprins i
1 Introducere 2
1.1 Introducere . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 Motiva¸ tia lucr ˘arii . . . . . . . . . . . . . . . . . . . . . . . 7
2 Tehnologii Web si baze de date MySQL 11
2.1 Introducere . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.2 Cascading Style Sheets – CSS . . . . . . . . . . . . . . . . . 13
2.3 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.4 AJAX – Asynchronous JavaScript and XML . . . . . . . . . 17
2.4.1 Metoda convent ,ional ˘a . . . . . . . . . . . . . . . . 18
2.4.2 Metoda AJAX . . . . . . . . . . . . . . . . . . . . 19
2.4.3 Înc ˘arcare asincron ˘a vs sincron ˘a . . . . . . . . . . . 20
2.5 PHP:HyperText Preprocessor . . . . . . . . . . . . . . . . . 22
2.5.1 PHP . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.5.2 SQL s ,i MySQL . . . . . . . . . . . . . . . . . . . . 24
3 Aplicat ,ie. Interog ˘ari semantice ale unei baze de date 26
3.1 Prezentare general ˘a . . . . . . . . . . . . . . . . . . . . . . 26
3.2 Ecranul principal . . . . . . . . . . . . . . . . . . . . . . . 27
3.3 Autocomplete /Autosuggestion . . . . . . . . . . . . . . . . 30
3.4 Funct ,ionalitate . . . . . . . . . . . . . . . . . . . . . . . . 30
i

CUPRINS 1
Bibliografie 40

Capitolul 1
Introducere
1.1 Introducere
Era digital ˘a s ,i sfârs ,itul secolului al XX-lea au dus la schimb ˘ari
substant ,iale în toate aspectele viet ,ii oamenilor. Interact ,iunea om-calculator
(HCI) este un concept relativ recent, dar foarte dinamic. Cres ,terea sa rapid ˘a
a fost determinat ˘a de dezvoltarea tehnologic ˘a continu ˘a s ,i f˘ar˘a precedent,
care a f ˘acut posibil ˘a construirea unor sisteme complexe care s ˘a poat ˘a re-
zolva numeroase s ,i dificile sarcini. Calculatoarele devin din ce în ce mai
importante în aproape toate aspectele viet ,ii noastre s ,i în aproape orice me-
diu. În prezent, asist ˘am la tranzit ,ia interact ,iunii om-calculator cu ceea ce
am putea numi "dincolo de desktop".
Tehnica de calcul s-a mutat rapid de la a fi o zon ˘a numai pentru
expert ,i la o abilitate comun ˘a pentru aproape toat ˘a lumea. Avem acum o
gam˘a mult mai larg ˘a de utilizatori de cultur ˘a, personalitate, vârst ˘a s,i dome-
niu de activitate. Aceast ˘a diversitate face ca deciziile de proiectare s ˘a fie
mai dificile, dar, de asemenea, înt ˘are¸ ste importan¸ ta lor – o mult ,ime de oa-
meni vor suferi din cauza unor modele de software nepotrivite. Cum spune
Dix în (1994) "HCI este pe cale s ˘a devin ˘a o problem ˘a a tuturor".
2

CAPITOLUL 1. INTRODUCERE 3
Acum dou ˘azeci de ani, majoritatea calculatoarelor erau bazate pe
desktop. Ast ˘azi sunt portabile, pot fi puse într-un buzunar, integrate în bi-
rouri, case, mas ,ini, aproape în orice. Interconectarea dintre televiziune s ,i
calculatoare, cres ,terea extraordinar ˘a a utiliz ˘arii internetului, toate acestea
au schimbat mediul nostru, strategiile de c ˘autare a informat ,iilor s ,i c˘aile s ,i
mijloacele tradit ,ionale de comunicare.
Asist ˘am la urm ˘atoarele transform ˘ari:
Schimb ˘ari în tipul de utilizator
Modific ˘ari ale cerint ,elor pentru locurile de munc ˘a, în special stat ,ii de
lucru pentru computere: R ˘aspândirea locurilor de munc ˘a IT intuitive
Cunos ,tint ,e în cercetarea de baz ˘a a interact ,iunii om-calculator, cum ar
fi Psihologia s ,i ergonomia
Dezvolt ˘ari tehnice software în colaborare cu performant ,e hardware pu-
ternice.
Când vorbim despre interact ,iunea om-calculator , nu avem neap ˘a-
rat în vedere un singur utilizator cu un computer desktop. Prin utilizator
am putea face referint ,˘a la un utilizator individual, un grup de utilizatori care
lucreaz ˘a împreun ˘a sau o secvent ,˘a de utilizatori dintr-o organizat ,ie, fiecare
ocupându-se de o anumit ˘a parte a sarcinii sau procesului. Prin computer
înt,elegem orice tehnologie care variaz ˘a de la un computer desktop la un
sistem informatic de mari dimensiuni, un sistem de control al procesului
sau un sistem încorporat. Sistemul poate include piese ne-computerizate,
inclusiv alte persoane. Prin interact ,iune înt,elegem orice comunicare în-
tre un utilizator s ,i computer, fie ea direct ˘a sau indirect ˘a. Interact ,iunea di-
rect˘a implic ˘a un dialog cu feedback s ,i control pe parcursul îndeplinirii sar-
cinii. Interact ,iunea indirect ˘a poate implica procesarea în serie sau senzorii

CAPITOLUL 1. INTRODUCERE 4
inteligent ,i care controleaz ˘a mediul. Cel mai important este c ˘a utilizatorul
interact ,ioneaz ˘a cu computerul pentru a realiza ceva [4].
Some of the main investigation themes of HCI are: analysis ta-
sks performed by the users with the system, representations or mental user
models, human-system communication structure, human capacity to use al-
gorithms for programming interface, processes of specifying, designing and
implementing. Because this discipline studies the interaction between the
two actors: man and computer, the HCI research area is situated somewhere
at the border between the Humanities (eg. Psychology, Sociology, Anthro-
pology, Linguistics) and Sciences (eg. Computer Science), including con-
tributions from fine arts (like Graphic Design):
Unele dintre principalele teme de investigare ale HCI sunt: sarci-
nile de analiz ˘a efectuate de utilizatori cu sistemul, reprezent ˘ari sau modele
de utilizatori mentali, structura de comunicare a sistemului uman, capacita-
tea uman ˘a de a folosi algoritmi pentru interfat ,a de programare, procesele de
specificare, proiectare s ,i implementare. Deoarece aceast ˘a disciplin ˘a studi-
az˘a interact ,iunea dintre cei doi actori: om s ,i calculator, domeniul cercetarea
HCI este situat ˘a undeva la granit ,a dintre Umanistic ˘a (de ex., Psihologie, So-
ciologie, Antropologie, Lingvistic ˘a) s ,i S,tiint ,e (de ex. Inromatic ˘a), incluzând
contribut ,ii din artele fine (cum ar fi Grafica):
Informatic ˘a pentru proiectarea aplicat ,iilor s ,i dezvoltarea interfet ,elor
umane
Psihologie pentru studierea teoriilor proceselor cognitive s ,i analiza em-
piric ˘a a comportamentului utilizatorilor
Sociologie s ,i antropologie pentru gestionarea interact ,iunii dintre teh-
nologie, munc ˘a s,i organizare

CAPITOLUL 1. INTRODUCERE 5
Ergonomie din punctul de vedere al factorului uman, analizând sigurant ,a
s,i confortul
Lingvistic ˘a pentru fonologie (sunete), corectitudine semantic ˘a (semnificat ,ie
s,i sintax ˘a)
Ca rezultat, cercetarea s ,i practica în acest domeniu implic ˘a cola-
borarea dintre specialis ,ti din diferite discipline, care lucreaz ˘a într-o echip ˘a
multidisciplinar ˘a.
Scopul principal al domeniului Interact ,iune om-calculator (HCI)
este de a proiecta s ,i implementa interfet ,e utilizator (UI). O interfat ,˘a este uti-
lizabil ˘a dac ˘a funct ,ionalitatea acesteia este us ,or de înv ˘at,at s ,i, ulterior, us ,or
de ret ,inut. Eficient ,a privind interfet ,ele utilizatorilor reprezint ˘a, prin inter-
mediul interfet ,ei, efectuarea rapid ˘a de act ,iuni complexe. Interfat ,a este con-
sistent ˘a s,i uniform ˘a, dac ˘a este flexibil ˘a s,i nu în ultimul rând, confortabil ˘a.
Interact ,iunea om-calculator abordeaz ˘a problema g ˘asirii s ,i adopt ˘a-
rii celor mai adecvate modalit ˘at,i de a realiza subiectul ergonomiei interfet ,ei
UI. Construirea unui design interfat ,˘a utilizator "prietenos s ,i personalizat"
necesit ˘a mai multe principii ergonomice cognitive care trebuie luate în con-
siderare:
caracterul unitar coerent al interfet ,ei constituent ,ilor;
concizie, oferind economie cognitiv ˘a;
conexiune invers ˘a (feedback).
Realizarea unei interfet ,e presupune cunoas ,terea exact ˘a a compor-
tamentului entit ˘at,ilor care urmeaz ˘a s˘a fie conectate. Atunci când aceste
entit˘at,i sunt obiecte artificiale, comportamentul s ,i formalismul sunt, în ge-
neral, bine controlate; atunci când o entitate este o t ,int˘a în mis ,care, ca

CAPITOLUL 1. INTRODUCERE 6
subiect uman, definit ,ia interfet ,ei devine o sarcin ˘a complex ˘a, deseori afec-
tat˘a de empirism s ,i arbitrare. Exist ˘a trei motive pentru aceasta: puterea
funct ,ional ˘a a sistemelor informatice, lipsa interesului oamenilor de s ,tiint ,˘a
pentru s ,tiint ,a cognitiv ˘a s,i lipsa unor modele psihologice pentru interact ,iunea
om-calculator.
Interact ,iunea este, în practic ˘a, indus ˘a de interfat ,˘a, dar numai part ,ial
deoarece utilizatorul, prin trecutul s ˘au, starea sa, cultura, credint ,ele s ,i înt ,elegerea
sa influent ,eaz˘a sistemul, mai mult, s ,i interact ,iunea. Exemplul tipic este stan-
dardul: pentru un cercet ˘ator în domeniul informaticii, culoarea ros ,ie este si-
nonim ˘a cu pericolul, în timp ce pentru un chimist, acesta denot ˘a c˘aldur ˘a. De
asemenea, o cunoas ,tere detaliat ˘a a utilizatorului este necesar ˘a în procesul de
proiectare a interfet ,elor utilizator adaptate.
“Design is not just what it looks like and feels like. Design is how
it works. It’s really hard to design products by focus groups. A lot of times,
people don’t know what they want until you show it to them." (Steve Jobs,
BusinessWeek, May 25, 1998)
Putem concluziona c ˘a interact ,iunea nu este doar o problem ˘a de
proiectare a interfet ,ei. Interact ,iunea este, de asemenea, determinat ˘a de:
Secvent ,a act ,iunilor necesare pentru îndeplinirea sarcinii
Echilibrul dintre sistem s ,i contextul în care este utilizat ˘a
Pentru cunoas ,terea HCI, modelele de reprezentare sunt importante
din dou ˘a motive [8]:
Ajut˘a la înt ,elegerea proceselor complexe de stocare s ,i recuperare a
informat ,iilor
Ofer ˘a metode de reprezentare pentru utilizator s ,i modelarea sarcinilor

CAPITOLUL 1. INTRODUCERE 7
Reprezentarea cunos ,tintelor este una dintre cele mai importante
subretele ale inteligentei artificiale – s,tiinta de proiectare a sistemelor infor-
matice pentru a efectua sarcini care sunt în mod normal efectuate mai bine
de c˘atre expert ,i umani. Deoarece schemele de reprezentare a cunos ,tint ,elor
sunt inutile f ˘ar˘a capacitatea de a rat ,iona cu acestea, acest câmp este de obi-
cei cunoscut sub numele de reprezentare a cunos ,tint ,elor s ,i rat ,ionament
Ast˘azi, în majoritatea sistemelor avansate este implementat ˘a inteligent ,a
uman ˘a: recuperarea informat ,iei, tranzact ,ionarea pe burs ˘a, alocarea resurse-
lor, realitatea virtual ˘a, recunoas ,terea vorbirii s ,i traducerea automat ˘a.
Pentru a proiecta un sistem informatic capabil s ˘a se comporte in-
teligent într-un anumit mediu, trebuie s ˘a îmbog ˘at,im sistemul cu cunos ,tint ,e
suficiente despre acel mediu. Aceasta înseamn ˘a c˘a avem nevoie de o me-
tod˘a de reprezentare a cunos ,tint ,elor, mai exact, de un limbaj formal capabil
s˘a exprime cunos ,tint ,e, împreun ˘a cu un mod precis de manipulare s ,i actuali-
zare a acestor informat ,ii.
Putem concluziona c ˘a studiile de Interac¸ tiune Om-Calculator pro-
pun s ˘a construiasc ˘a interfet ,e compatibile cu as ,tept˘arile s ,i capacit ˘at,ile uti-
lizatorilor. Studiul fenomenelor cognitive, hardware-ului, software-ului s ,i
schimbului social reciproc între om s ,i mas ,in˘a este inima disciplinei.
1.2 Motiva¸ tia lucr ˘arii
Am ales sa exemplific tema aleas ˘a, ¸ si anume Modul de interogare
semantic˘ a a unei baze de date încadrându-o într-o aplica¸ tie extrem de popu-
lar˘a printre utilizatorii de toate vârstele: un magazin online . În acest mod,
avantajele implement ˘arii acestor tipuri de interog ˘ari se pot observa foarte
u¸ sor.

CAPITOLUL 1. INTRODUCERE 8
Succesul unui magazin online depinde de mul¸ ti factori, printre
care amintim: identificarea ni¸ sei de clien¸ ti, planul de afaceri, strategia de
business ¸ si de marketing, calitatea serviciilor ¸ si “Customer Care".
Dac˘a website-ul magazinului online – prim punct de întâlnire cu
poten¸ tialii clien¸ ti – nu este ergonomic ¸ si intuitiv, nu ajut ˘a business-ul s ˘a
creasc ˘a ¸ si îi pune în dificultate pe utilizatori, atunci magazinul online ¸ si
implicit afacerea din spatele lui risc ˘a s˘a î¸ si piard ˘a clien¸ tii nereu¸ sind s ˘a î¸ si
valorifice adev ˘aratul poten¸ tial.
Unul dintre aspectele ignorate de cei care vând online este expe-
rien¸ ta utilizatorului . Mul¸ ti fac gre¸ seala de a complica inutil procesul de
achizi¸ tionare a unui produs /serviciu, neglijând astfel un aspect important în
ceea ce prive¸ ste interac¸ tiunea dintre poten¸ tialii clien¸ ti si website-ul maga-
zinului. ¸ Si anume acela c ˘a orice dezvoltator de astfel de aplica¸ tii trebuie
înainte de toate s ˘a se asigure c ˘a utilizatorii site-ului navigheaz ˘a us ,or prin el.
Oamenii ar trebui s ˘a poat ˘a cump ˘ara produsele sau serviciile cu doar câteva
clic-kuri. În caz contrar, î¸ si vor pierde r ˘abdarea ¸ si vor închide site-ul.
În lucrarea de fa¸ t ˘a îmi propun s ˘a prezint o abordare nou ˘a pentru un
magazin virtual în care orice utilizator s ˘a poat ˘a s˘a g˘aseasc ˘a ceea ce dore¸ ste
cu un minim de efort. În abordarea pe care am realizat-o am avut de aseme-
nea în vedere ¸ si faptul c ˘a utilizatorii nu sunt în mod necesar familiariza¸ ti cu
organizarea produselor în magazinul virtual. Mai precis, conform criteriilor
HCI, utilizatorii nu trebuie s ˘a fie instrui¸ ti asupra modului în care func¸ tiona-
litatea aplica¸ tiei (în acest caz a magazinului) poate fi accesat ˘a prin interfa¸ ta
dedicat ˘a. În cazul aplica¸ tiei pe care o propun, utilizatorii interac¸ tioneaz ˘a
prin intermediul unei interfe¸ tei web cu magazinul virtual.
Pentru a putea face posibile toate aceste lucruri, am ales s ˘a ghidez
utilizatorul în procesul s ˘au de c ˘autare prin intermediul formei de “Search"
care este cea mai intuitiv ˘a ¸ si mai natural ˘a form ˘a de interogare în cadrul

CAPITOLUL 1. INTRODUCERE 9
aplica¸ tiilor de acest tip.
Astfel, utilizatorul este “ajutat" s ˘a ajung ˘a la produsele dorite f ˘ar˘a
a fi în mod necesar con¸ stient de acest ajutor. Acest “ajutor" se traduce prin
faptul c ˘a se elimin ˘a încerc ˘arile e¸ suate, cele care nu pot fi în¸ telese de c ˘atre
aplica¸ tie. Din acest motiv, forma de c ˘autare – care este permanent afi¸ sat ˘a în
zona cea mai vizibil ˘a a site-ului – este interactiv ˘a propunând utilizatorului
sugestii de c ˘autare în func¸ tie de:
categoriile de produse încarcate în baza de date a magazinului
intr˘arile anterioare ale utilizatorului, propunând filtre semantice pentru
categoriile de produse specificate de utilizator
Aceste sugestii sunt generate chiar ¸ si în lipsa unei intr ˘ari propriu-
zise a utilizatorului. Mai precis, este necesar doar ca utilizatorul s ˘a dea
“focus" formei de c ˘autare pentru a activa lista de sugestii.
Generarea automat ˘a de sugestii de c ˘autare este cu atât mai nece-
sar˘a aplica¸ tiilor care primesc intr ˘ari în limbaj natural, caz în care utilizatorul
poate avea o multitidine de variante pentru a introduce o comand ˘a. Acest
lucru este mai cu seam ˘a valabil pentru limbajele naturale care au un voca-
bular bogat, cum este limba român ˘a. Pentru exemplificare, s ˘a consider ˘am
cazul în care se dore¸ ste interogarea magazinului virtual în ceea ce prive¸ ste
produsele de îmbr ˘ac˘aminte destinate femeilor. Printre variantele posibile,
avem:
haine /hain˘a destinat ˘a/destinate /pentru /de fat ˘a/fete/femei(e) /dam˘a/dame
În acest caz, o astfel de aplica¸ tie ar trebui s ˘a aib ˘a în baza de cuno¸ s-
tin¸ te toate aceste forme posibile de interogare. Solu¸ tia de care o propun se
dovede¸ ste o posibil ˘a rezolvare a problemelor de “parsing" pentru intr ˘arile în
limbaj natural.

CAPITOLUL 1. INTRODUCERE 10
Prin urmare, consider c ˘a ghidarea c ˘aut˘arilor utilizatorilor este de
mare ajutor atât din punctul de vedere al celui ce acceseaz ˘a magazinul vir-
tual cât ¸ si al dezvoltatorului aplica¸ tiei deoarecere elimin ˘a situa¸ tiile nepl ˘acute
în care produsele specificate în interogare nu sunt g ˘asite, caz în care apli-
ca¸ tia ar trebui s ˘a genereze un mesaj de eroare sau s ˘a genereze automat alte
interogari, cât mai apropiate de cele ale utilizatorului, dar care în cele mai
multe cazuri nu sunt cele a¸ steptate.

Capitolul 2
Tehnologii Web si baze de
date MySQL
2.1 Introducere
World Wide Web este omniprezent în viat ,a cotidian ˘a, majorita-
tea calculatoarelor s ,i dispozitivelor computerizate fiind conectate la acesta.
Totus ,i, infrastructura fundamental ˘a a Internetului a avut un punct de por-
nire diferit fat ,˘a de Internet însus ,i. Cel din urm ˘a ment ,ionat îs ,i are r ˘ad˘acinile
în proiectul ARPA, înaintat de Agent ,ia pentru Proiecte de Cercetare a Mi-
nisterului Ap ˘ar˘arii al Statelor Unite ale Americii (Department of Defence
Advanced Research Project Agency) în jurul anului 1960. Printre scopurile
principale ale proiectului se num ˘ara s ,i posibilitatea de a conecta în ret ,ea mai
multe calculatoare, rapid s ,i de la distant ,e mari. Ret ,eaua fusese gândit ˘a s˘a fie
suficient de puternic ˘a, astfel încât, în cazul în care leg ˘aturile dintre calcula-
toare ar fi afectate, dispozitivele conectate s ˘a poate continua comunicarea de
date. Acest principal scop a fost implementat prin intermediul Protocolului
de Internet (IP), ce permitea pachetelor de comunicare s ˘a g˘aseasc ˘a leg ˘aturi
alternative c ˘atre destinat ,ie, în caz c ˘a una sau mai multe conexiuni deveneau
11

CAPITOLUL 2. TEHNOLOGII WEB SI BAZE DE DATE MYSQL 12
instabile. Acest protocol de comunicare a devenit stâlpul de sust ,inere al
Internetului de ast ˘azi.
Ulterior, Protocolului de Internet i-a fost al ˘aturat Protocolul de
Control al Transmisiunii, creând un set mai puternic de transmisiune, o îm-
binare a doua protocoale pentru o mai mare flexibilitate s ,i pentru a putea
crea aplicat ,ii de comunicare mai bune pentru Internet. Dac ˘a la început In-
ternetul a fost utilizat în mod special de institut ,iile educat ,ionale, în ultimele
dou˘a decade ale secolului XX diferite agent ,ii guvernamentale i s-au al ˘atu-
rat, iar reprezentant ,ii domeniului militar au decis s ˘a îs ,i creeze propria ret ,ea,
numit ˘a MILNET.
O ret ,ea -network- este o structur ˘a ce permite dispozitivelor cunos-
cute ca noduri (nodes) s ,i gazde (hosts) s ˘a fie conectate împreun ˘a pentru a
împ˘art,i informat ,ii s ,i servicii. Gazdele pot fi reprezentate de calculatoare,
imprimante sau scannere, deoarece aceste dispozitive au capacitatea de a
primi s ,i a transmite date în mod electronic prin intermediul ret ,elei. O gazd ˘a
ce ofer ˘a o informat ,ie sau un serviciu se numes ,te server. Un calculator sau
un alt dispozitiv ce primes ,te un serviciu se numes ,te client (Schafer, 2011).
Astfel, ret ,elele se pot clasifica în funct ,ie de relat ,ia dintre client s ,i server,
sau depinzând de aria pe care o acoper ˘a. O ret ,ea restrâns ˘a la o arie geo-
grafic ˘a mai mic ˘a, precum o institut ,ie sau un departament, se numes ,te LAN
-local area network-, iar o ret ,ea mai r ˘aspândit ˘a din punct de vedere geografic
poart ˘a numele de WAN -wide area network-.
Unul dintre principalele obstacole timpurii ale Internetului a fost
imposibilitatea de a fi accesibil publicului obis ,nuit, deoarece utilizatorii
necesitau cunos ,tint ,e tehnice foarte specifice, limitând astfel întrebuint ,area
acestuia la institut ,iile educat ,ionale superioare s ,i cele guvernamentale.

CAPITOLUL 2. TEHNOLOGII WEB SI BAZE DE DATE MYSQL 13
2.2 Cascading Style Sheets – CSS
Cascading Style Sheets sau CSS sunt standarde moderne de stili-
zare a documentelor Web. Combinate cu limbajele markup precum HTML,
XHTML sau XML, acestea îi ofer ˘a browser-ului de Internet informat ,ia ce
îi permite ulterior s ˘a afis ,eze aspectele vizuale ale documentului Web. CSS
adaug ˘a elemente precum borduri, spat ,iere între paragrafe, anteturi sau ima-
gini, seteaz ˘a fontul s ,i culorile, imaginea de fundal, efecte ale textului, as ,ezarea
în pagin ˘a s ,i multe alte efecte. Des ,i create sub forma unui limbaj us ,or de
înv˘at,at s ,i de înt ,eles, aceste standarde de stilizare confer ˘a un control puternic
prezent ˘arii documentului (Carey, 2012).
CSS este, în fapt, un simplu limbaj pentru design destinat simpli-
fic˘arii procesului de stilizare a paginii Web, combinat întotdeauna cu unul
dintre limbajele markup (HTML sau XHTML). Limbajele markup cont ,in
textul ce este vizibil pe pagina Web, datele paginii Web, precum s ,i docu-
mentul CSS, care la rândul s ˘au înglobeaz ˘a informat ,ia referitoare la aspectul
vizual al paginii (York, 2005). Prin utilizarea standardelor Cascading Style
Sheets în prezentarea unui document Web, se poate reduce substant ,ial efor-
tul s ,i timpul petrecut la compunerea a nu numai unui singur document, si a
unui întreg Website. CSS face posibil ˘a reducerea spat ,iului utilizat pe hard
disk de c ˘atre site-ul Web, s ,i de asemenea l ˘at,imii benzii de transfer necesar ˘a
transmiterii paginii Web de la server la browser.
Unul dintre principalele avantaje ale utiliz ˘arii CSS este posibili-
tatea de a centraliza prezentarea unui întreg site Web într-un num ˘ar redus
de documente, permit ,ând ca aspectul vizual s ,i impactul paginii s ˘a fie ac-
tualizate în timp real (Carey, 2012). Dac ˘a în cazul documentelor HTML
prezentarea era limitat ˘a doar la document în sine, CSS ofer ˘a posibilitatea
de a separa structura documentului de prezentarea acestuia. De asemenea,
utilizatorii paginii Web au posibilitatea s ˘a îs ,i actualizeze singuri standardul

CAPITOLUL 2. TEHNOLOGII WEB SI BAZE DE DATE MYSQL 14
de stilizare, tr ˘as˘atur˘a ce face site-urile Web mult mai accesibile. De exem-
plu, un utilizator îs ,i poate compune singur foaia de stilizare a contrastului,
pentru a putea face cont ,inutul mai us ,or de citit. Un alt avantaj îl consti-
tuie abilitatea browserelor de a suporta mai multe file de stilizare, tr ˘as˘atur˘a
ce permite ca mai multe designuri s ˘a fie prezentate în acelas ,i timp. Astfel,
utilizatorii pot alege interfat ,a pe care o prefer ˘a. În plus, filele de stilizare
îi permit cont ,inutului s ˘a fie optimizat de mai multe dispozitive. Folosind
acelas ,i document HTML, diferite versiuni ale paginii Web pot fi prezen-
tate pentru dispozitive variate, precum telefoanele mobile, agende personale
electronice, sau pentru a fi imprimate. Nu în ultimul rând, este important de
ment ,ionat avantajul filelor de stilizare de a downloada mult mai repede, de-
oarece documentele Web ce folosesc CSS ocup ˘a mai put ,in spat ,iu pe hard
disk s ,i reduce l ˘at,imea benzii de transmisie a datelor.
Dac˘a un cod HTML utilizeaz ˘a în general doar aranjarea cont ,inutului
în documentul Web, foile de stilizare în cascad ˘a -CSS- realizeaz ˘a detaliile
care t ,in de afis ,are (culoare, fonturi, fundaluri, etc), ce se aplic ˘a suplimentar
peste codul HTML s ,i în cadrul paginii Web. Mai precis, CSS realizeaz ˘a
separarea paginii de structura sa efectiv ˘a (York, 2005). Asftel, putet ,i vedea
mai jos o secvent ,˘a de cod ce are aplicate foi de stilizare în cascad ˘a:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Pagina Web</title>
<style type = "text/css">
h1,p {
background-color:aqua;
font-family: "Lucida Calligraphy";
font-style: italic;
color: blue;
border: 5px solid;
}

CAPITOLUL 2. TEHNOLOGII WEB SI BAZE DE DATE MYSQL 15
</style>
</head>
<body>
<h1>Bine ati venit pe pagina mea Web</h1>
<p>Va doresc o zi buna!</p>
</body>
</html>
În acest exemplu, foile de stilizare în cascad ˘a sunt plasate intern,
mai precis în interiorul paginii HTML unde stilurile trebuie aplicate între
etichetele <head>s,i</head>. Exist ˘a mai multe forme de aplicare a CSS-
urilor. Exist ˘a stiluri în linie, ce se definesc în linia de cod HTML, mai exact
în codul etichetei, stiluri interne, precum în exemplul de mai sus, stiluri ex-
terne s ,i clase CSS. În cazul stilului extern, fis ,ierul poate fi scris fie cu orice
editor simplu de text, precum Notepad sau Wordpad, fie cu editoare speciali-
zate, cum ar fi Dreamweaver. Acest fis ,ier nu cont ,ine cod HTML, ci doar un
cod CSS de la care se face referire din paginile HTML prin plasarea etiche-
tei link în interiorul etichetei head a fiec ˘arei pagini care necesit ˘a respectiva
formatare. Ultima form ˘a ment ,ionat ˘a, s ,i anume clasele CSS, se folosesc cu
scopul de a stiliza în mod diferent ,iat anumite mult ,imi de etichete HTML,
distribuite în una sau mai multe pagini Web. Avantajul major al acestei
forme este c ˘a, atunci când se intent ,ioneaz ˘a schimbarea stilului pentru mai
multe elemente, nu este necesar ˘a efectuarea acesteia la nivel individual, ci
este suficient ˘a o modificare în cadrul clasei CSS care defines ,te respectivele
stiluri.
2.3 JavaScript
JavaScript este un limbaj de programare orientat pe obiect s ,i este
destinat în mod special sporirii interactivit ˘at,ii paginilor Web. Inventat în

CAPITOLUL 2. TEHNOLOGII WEB SI BAZE DE DATE MYSQL 16
1995 cu scopul de a ad ˘auga programe site-urilor Web în browserul Navi-
gator Netscape, limbajul JavaScript a fost ulterior adoptat de toate browse-
rele web grafice importante din lume. JavaScript a f ˘acut ca aplicat ,iile Web
moderne s ˘a devin ˘a posibile, aplicat ,ii cu care utilizatorul poate interact ,iona
direct, f ˘ar˘a a reînc ˘arca pagina dup ˘a fiecare act ,iune. De asemenea, limbajul
JavaScript este folosit s ,i pentru pagini Web tradit ,ionale, cu scopul de a le
oferi acestora diferite forme de interactivitate (Flanagan, 2006).
Prin natura sa, JavaScript este un limbaj compact îns ˘a foarte fle-
xibil, iar dezvoltatorii i-au creat o mult ,ime de instrumente pentru a debloca
o multitudine de funct ,ionalit ˘at,i cu minimum efort. De exemplu, interfet ,ele
pentru programarea de aplicat ,ii – API- (Application Programming Interfa-
ces) construite în browserele Web, ofer ˘a o gam ˘a larg ˘a de funct ,ionalit ˘at,i pre-
cum crearea dinamismului în HTML s ,i setarea stilurilor CSS, captarea s ,i
manipularea în timp real a înregistr ˘arilor video de la camerele Web ale utili-
zatorilor, sau generarea graficelor 3D s ,i a mostrelor audio (Flanagan, 2006).
De asemenea, API-urile le permit dezvoltatorilor s ˘a încorporeze site-urilor
funct ,ionalit ˘at,i ale unor propriet ˘at,i externe, precum Twitter sau Facebook.
În plus, pot fi aplicate HTML-ului framework-uri s ,i libr ˘arii pentru a permite
construirea mai rapid ˘a a site-urilor s ,i aplicat ,iilor.
Din punct de vedere sintactic, limbajul JavaScript se aseam ˘an˘a cu
limbajele C, C ++s,i Java, având structuri de programare precum declarat ,ia
If, bucla while sau operatorul &&. Îns ˘a asem ˘an˘arile se termin ˘a la nivelul
sintactic. Limbajul JavaScript în esent ,˘a suport ˘a numere, s ,iruri s ,i valori Bo-
olean ca tipuri de date. De asemenea include suport built-in pentru tablouri,
date, s ,i expresii regulare ale obiectelor. JavaScript este de obicei folosit în
browserele Web s ,i, în acel context, scopul general este extins cu obiecte ce
permit scripturilor s ˘a interact ,ioneze cu utilizatorul, s ˘a controleze browserul
Web s ,i s˘a altereze cont ,inutul documentelor care apare în interiorul ferestrei
browserului Web. Versiunea încorporat ˘a a JavaScript ruleaz ˘a scripturi încor-

CAPITOLUL 2. TEHNOLOGII WEB SI BAZE DE DATE MYSQL 17
porate în paginile Web HTML. În general este numit client-side JavaScript,
pentru a scoate în evident ,˘a c˘a scripturile sunt rulate de browserul clientu-
lui, s ,i nu de serverul Web (Flanagan, 2006). Atunci când browserul Web
este suplimentat cu un interpret JavaScript, acesta îi permite cont ,inutului
executabil s ˘a fie distribuit pe Internet sub forma de scripturi JavaScript.
De-a lungul timpului au existat mai multe versiuni de JavaScript.
Versiunea a treia, ECMAScript, a fost cea mai suportat ˘a versiune din timpul
ascensiunii JavaScript, în mod special între anii 2000 s ,i 2010. În aceast ˘a
perioad ˘a se lucra intensiv la versiunea 4, ce promitea un num ˘ar mare de
îmbun ˘at˘at,iri radicale s ,i extensii ale limbajului, îns ˘a s-a dovenit a fi prea
dificil ˘a, proiectul fiind abandonat în 2008 (Flanagan, 2006). Un an mai
târziu a început lucrul la versiunea 5, un proiect mai put ,in ambit ,ios decât
cel precedent. A cincea versiune de JavaScript este suportat ˘a în prezent de
toate browserele importante. Cea mai recent ˘a versiune, a s ,asea, este aproape
finalizat ˘a s,i mai multe browsere au început deja s ˘a suporte noile tr ˘as˘aturi pe
care aceast ˘a versiune le prezint ˘a.
Nu în ultimul rând, este important de precizat c ˘a browserele Web
nu sunt singurele platforme unde JavaScript este utilizat. Câteva baze de
date, precum MongoDB s ,i CounchDB, utilizeaza JavaScript ca limbaj qu-
ery s ,i scripting. Mai multe platforme pentru desktop s ,i program ˘ari pentru
server, în mod special proiectul Node.js, ofer ˘a un mediu puternic pentru
programare JavaScript în afara browserului Web.
2.4 AJAX – Asynchronous JavaScript and XML
AJAX este prescurtarea de la Asynchronous JavaScript and XML,
care face referire mai degrab ˘a la un set de tehnici pentru dezvoltare web de-
cât la un limbaj de programare. Cu toate acestea, Ajax este utilizat pe o scar ˘a

CAPITOLUL 2. TEHNOLOGII WEB SI BAZE DE DATE MYSQL 18
foarte larg ˘a în programarea client-side, pentru a da posibilitatea trimiterii s ,i
primirii de date dintr-o baz ˘a de date /server. Ce este foarte interesant s ,i im-
portant în utilizarea AJAX este faptul c ˘a act ,iunea de schimbare a datelor se
petrece în fundal, f ˘ar˘a a afecta în vreun fel experient ,a utilizatorului. As ,adar,
prin separarea act ,iunii de pagina web în sine, AJAX permite paginilor web
s,i respectiv aplicat ,iilor web s ˘a modifice cont ,inut într-un mod dinamic f ˘ar˘a a
fi necesar ˘a reînc ˘arcarea întregii pagini.
Aceast ˘a metod ˘a de modificare a cont ,inutului este extrem de util ˘a
atât pentru partea de performant ,˘a a website-ului cât s ,i pentru partea de utili-
zabilitate. Deoarece înc ˘arcarea asincron ˘a nu este o blocare randat ˘a, va per-
mite HMTL-ului paginii s ˘a continue parsarea chiar dac ˘a întâlnes ,te o etichet ˘a
de script. Din punct de vedere al utilizabilit ˘at,ii, utilizatorul poate beneficia
de anumite informat ,ii generate f ˘ar˘a ca pagina s ˘a fie reînc ˘arcat ˘a. Acesta este
un pas urias ,pentru îmbun ˘at˘at,irea performant ,ei.
Modul în care AJAX lucreaz ˘a este destul de simplu. Pentru o
explicat ,ie mai us ,oar˘a s,i mai rapid ˘a urm ˘arit ,i imaginea de mai jos, care pre-
zint˘a o comparat ,ie între metoda convent ,ional ˘a de a solicita date de la un
server web s ,i metoda folosit ˘a de AJAX. Cele dou ˘a metode vor fi explicate
în rândurile ce urmeaz ˘a.
2.4.1 Metoda convent ,ional ˘a
Pornind de la partea de sus a metodei convent ,ionale, putem vedea
c˘a browser-ul dores ,te s˘a solicite server-ului web anumite date /informat ,ii,
având loc urm ˘atoarele:
1. Se realizeaz ˘a o cerere din browser c ˘atre serverul web. Prin
urmare, utilizatorul trebuie s ˘a as ,tepte ca aceast ˘a solicitare s ˘a fie procesat ˘a s,i
s˘a se returneze un r ˘aspuns înainte de a putea vedea datele solicitate.

CAPITOLUL 2. TEHNOLOGII WEB SI BAZE DE DATE MYSQL 19
Figura 2.1: Metoda convent ,ional ˘a vs metoda AJAX
2. Solicitarea ajunge la server-ul web s ,i returneaz ˘a datele cores-
punz ˘atoare.
3. Datele solicitate sunt apoi trimise înapoi la browser s ,i utilizato-
rul poate vedea aceste date.
2.4.2 Metoda AJAX
Utilizând metoda AJAX au loc urm ˘atoarele lucruri, atunci când se
solicit ˘a aceleas ,i date.

CAPITOLUL 2. TEHNOLOGII WEB SI BAZE DE DATE MYSQL 20
1. Browserul face o apelare JavaScript c ˘atre motorul AJAX. Cu
alte cuvinte, se creeaz ˘a un obiect XMLHttpRequest.
2. În fundal se face o solicitare HTTP c ˘atre server s ,i se recupe-
reaz˘a datele corespunz ˘atoare.
3. Datele HTML, XML sau JavaScript sunt returnate motorului
Ajax, care apoi furnizeaz ˘a browser-ului datele solicitate.
Utilizând aceast ˘a metod ˘a, utilizatorul nu are niciun punct de între-
rupere din momentul în care a facut solicitarea pân ˘a în momentul în care
primes ,te informat ,iile.
2.4.3 Înc ˘arcare asincron ˘a vs sincron ˘a
Pentru înc ˘arcarea de scripturi, în mod tradit ,ional acestea se încarc ˘a
folosind metoda sincron ˘a. Acesta a fost mai mult sau mai put ,in un proces de
genul „primul venit primul servit”, unde dac ˘a în timpul procesului de ran-
dare a paginii, HTML a intrat într-o etichet ˘a de script, atunci ar înc ˘arca acea
etichet ˘a script în succesiune, blocând astfel parsarea codului HTML. Odat ˘a
ce scriptul a fost înc ˘arcat complet, codul HTML va continua s ˘a analizeze s ,i
s˘a încarce restul paginii web.
Dup˘a cum se poate vedea în imaginea de mai jos, exist ˘a 3 script-
uri sincronizate care sunt înc ˘arcate unul dup ˘a altul. Deasemenea, exist ˘a s,i
un script asincron care poate fi înc ˘arcat în acelas ,i timp cu script-ul sincron,
ceea ce face procesul de înc ˘arcare mult mai eficient.
În ceea ce prives ,te înc ˘arcarea unui script în mod asincron, acest
lucru este foarte us ,or. Pentru a face acest lucru, pur s ,i simplu trebuie ad ˘augat
atributul async la eticheta de script. De exemplu, dac ˘a inc ˘arc˘am un script
localizat în js /example.js, putem defini urm ˘atoarele.

CAPITOLUL 2. TEHNOLOGII WEB SI BAZE DE DATE MYSQL 21
Figura 2.2: Înc ˘arcare asincron ˘a vs sincron ˘a
<script src="example.js" async></script>
În ceea ce prives ,te utilizarea funct ,iilor AJAX, exist ˘a o mult ,ime de
posibilit ˘at,i. În primul rând, o funct ,ie tipic ˘a AJAX va avea urm ˘atoarele dou ˘a
componente.
$.ajax(url [, settings])
Parametrul AJAX „url” defines ,te adresa URL pentru care se dores ,te
a se face solicitarea, iar parametrul de set ˘ari este utilizat pentru a configura
cererea AJAX.
$.ajax('demo.html', {
success: function(result) {
$('#testdiv').html(result);
}
});
Exemplul de mai sus este o simpl ˘a demonstrat ,ie a modului în care
pot fi utilizate jQuery si AJAX. Adresa URL pentru care se face solicita-
rea este demo.html. Apoi se ia rezultatul s ,i se insereaz ˘a în elementul care
cont ,ine id #testdiv.
As,a cum am ment ,ionat mai sus, metodele de programare AJAX
nu reprezint ˘a un limbaj de programare în sine. Acestea combin ˘a mai multe

CAPITOLUL 2. TEHNOLOGII WEB SI BAZE DE DATE MYSQL 22
tehnologii într-un mod care face accesul la date mai us ,or s ,i mai eficient. Este
recomandat ˘a înc ˘arcarea script-urilor utilizând caracteristica „async” de câte
ori este posibil s ,i deasemenea implementarea funct ,iilor AJAX de câte ori
are sens, astfel încât utilizatorii s ˘a aib ˘a acces la informat ,iile necesare mult
mai rapid.
2.5 PHP:HyperText Preprocessor
Php:HyperText Preprocessor, denumit mai simplu PHP, s-a init ,iat
ca un set de instrumente destinate rezolv ˘arii sarcinilor simple ale Web-ului.
Init ,ial, PHP era folosit pentru a t ,ine evident ,a num ˘arului de vizitatori al unei
pagini Web, apoi a fost extins pentru a interact ,iona cu bazele de date s ,i
pentru a oferi un set de instrumente pentru evident ,a vizitatorilor online s ,i
pentru procesarea formularelor HTML (Atkinson, 2004).
PHP este un limbaj de programare, creat pentru a genera pagini
Web interactive în serverul Web. Spre deosebire de HTML, unde browserul
Web folosesc etichete s ,i limbaj markup pentru a genera o pagin ˘a, codul PHP
ruleaz ˘a între pagina solicitat ˘a s,i serverul Web, suplimentând s ,i modificând
output-ul de baz ˘a al HTML-ului (Davis, 2007). PHP faciliteaz ˘a dezvoltarea
Web-ului deoarece toate codurile necesare sunt cont ,inute de framework-ul
PHP.
Des ,i PHP este foarte util pentru dezvoltarea Web, acesta nu sto-
cheaz ˘a informat ,ii. Pentru aceasta, este necesar ˘a utilizarea unei baze de date.
Baza de date preferat ˘a de dezvoltatorii Web este MySQL, deoarece aceasta
act ,ioneaz ˘a ca o arhiv ˘a pentru informat ,ia procesat ˘a a utilizatorului. MySQL
este accesat us ,or din PHP, acestea lucrând bine împreun ˘a. Un avantaj în plus
este faptul c ˘a ambele ruleaz ˘a pe diferite tipuri de calculatoare s ,i sisteme de
operare, precum Mac OS X, Windows s ,i Linux.

CAPITOLUL 2. TEHNOLOGII WEB SI BAZE DE DATE MYSQL 23
2.5.1 PHP
PHP a evoluat din dorint ,a oamenilor de a dezvolta s ,i a întret ,ine
site-uri Web cu cont ,inut dinamic s ,i funct ,ionalitate Client-Server. În pre-
zent, PHP este omniprezent s ,i compatibil cu cea mai mare parte a siste-
melor de operare. De asemenea, este us ,or de înv ˘at,at, ceea ce îl face un
instrument ideal pentru programatorii încep ˘atori. Creatorii PHP au dezvol-
tat o infrastructur ˘a ce le permite programatorilor C experimentat ,i s˘a extind ˘a
capacit ˘at,ile PHP-ului (Atkinson, 2004). Prin urmare, PHP integreaz ˘a în pre-
zent tehnologii avansate, precum XML, XSL, s ,i tehnologii Microsoft COM
(Microsoft’s Component Object Model Technologies).
Spre deosebire de alte limbaje de programare, codul PHP se scrie
mai us ,or s ,i este executat mai rapid. Acelasi cod PHP ruleaz ˘a nealterat
pe diverse sisteme de operare s ,i servere We b(Atkinson, 2004). În plus,
funct ,ionalitatea care în PHP este standard, în alte medii este ceva adit ,ional.
Limbajul de programare PHP este un limbaj liber, mai exact, oricine poate
vizita pagina Web PHP <http://php.net />s,i s˘a descarce codul surs ˘a complet
sub licent ,a BSD-style <http://php.net //license >. De asemenea, PHP este
modificabil, deoarece este proiectat s ˘a permit ˘a viitoare extensii de funct ,ionalitate.
Acest limbaj este codat în C s ,i ofer ˘a o interfat ,˘a de programare a aplicat ,iei
(API) bine definit ˘a.
Limbajul PHP a fost scris pentru a crea pagini Web. Aplicat ,iile
PHP pot fi dezvoltate us ,or s ,i repede, deoarece codul lor este integrat în
îns˘as,i paginile Web. Aptitudinile de programare dobândite s ,i dezvoltate în
alte limbaje structurate pot fi aplicate PHP-ului, iar programatorii care s ,i-au
însus ,it mai întâi cunos ,tint ,ele de PHP, le pot aplica ulterior cu us ,urint ,˘a atât
limbajelor C, cât s ,i Java.

CAPITOLUL 2. TEHNOLOGII WEB SI BAZE DE DATE MYSQL 24
2.5.2 SQL s ,i MySQL
SQL, sau Structured Query Language, este cel mai popular limbaj
folosit pentru a crea, a recupera, a actualiza s ,i a s ,terge date din sistemul
de management a bazelor de date relat ,ionale. O baz ˘a de date relat ,ional ˘a se
ajusteaz ˘a modelului relat ,ional s ,i trimite referint ,˘a c˘atre datele s ,i schemele
din baza de date. Schema reprezint ˘a structura bazei de date s ,i modul în care
datele sunt organizate. Utilizarea comun ˘a a termenului Sistem de manage-
ment a bazelor de date relat ,ionale, sau Relational Database Management
System, se refer ˘a din punct de vedere tehnic la software-ul utilizat pentru
crearea bazelor de date relat ,ionale, cum este de exemplu Microsoft SQL
Server (McLaughlin 2013). O baz ˘a de date relat ,ional ˘a este o colect ,ie de
tabele, îns ˘a s,i alte elemente sunt deseori considerate p ˘art,i din baza de date,
deoarece ajut ˘a la organizarea s ,i structurarea datelor s ,i fort ,eaz˘a baza de date
s˘a urmeze setul de cerint ,e sau instruct ,iuni impuse.
MySQL este o baz ˘a de date relat ,ional ˘a liber ˘a, îns ˘a complex ˘a. Aceasta
a fost dezvoltat ˘a în anii 90 pentru a satisface neîncetata nevoie a calculatoa-
relor de a administra informat ,ia în mod inteligent. Dezvol ˘atorii init ,iali ai
MySQL au încercat s ˘a rezolve acest impediment prin utilizarea unei baze
de date mic ˘a s,i simpl ˘a: mSQL. S-a dovedit clar îns ˘a faptul c ˘a mSQL nu pu-
tea satisface toate condit ,iile necesare, asftel c ˘a s-a trecut la proiectarea unei
baze de date mai robuste s ,i mai complexe: MySQL (Davis, 2007).
Microsoft SQL suport ˘a mai multe tipuri de motoare database. Aces-
tea determin ˘a modul în care MySQL manipuleaz ˘a cont ,inutul stocat s ,i inte-
rogarea datelor. Astfel, fiecare motor de stocare are propriul set de abilit ˘at,i s,i
de puncte forte (McLaughlin 2013). De-a lungul timpului, motoarele dispo-
nibile ale bazelor de date au devenit din ce în ce mai avansate s ,i mai rapide.
În esent ,˘a, MySQL este un depozit virtual care nu numai c ˘a stocheaz ˘a datele,
dar ofer ˘a s,i un mecanism extrem de rapid de g ˘asire a elementelor stocate în

CAPITOLUL 2. TEHNOLOGII WEB SI BAZE DE DATE MYSQL 25
baza de date.
Prin urmare, PHP s ,i MySQL lucreaz ˘a foarte bine împreun ˘a, interfet ,ele
de programare dintre ele fiind legate logic. Atât PHP cât s ,i MySQL au sursa
de putere deschis ˘a, ceea ce le confer ˘a amândurora caracterul liber (McLau-
ghlin 2013). În plus, acestea nu coples ,esc utilizatorul cu detalii care nu sunt
necesare. Utilizatorul nu este obligat s ˘a cunoasc ˘a în esent ,˘a cum limbajul
PHP se conecteaz ˘a interdependent cu baza de date MySQL, deoarece exist ˘a
o interfat ,˘a standard pentru procedurile MySQL de chemare din PHP. În plus,
interfet ,ele pentru programarea de aplicat ,ii (API) ofer ˘a resurse nelimitate.

Capitolul 3
Aplicat ,ie. Interog ˘ari
semantice ale unei baze de
date
3.1 Prezentare general ˘a
Ideea implement ˘arii acestui proiect a pornit luând în calcul vi-
teza s ,i pasul major cu care inteligent ,a artificial ˘a evolueaz ˘a în zilele noastre.
Având în vedere rapiditatea cu care se petrec lucrurile de zi cu zi, este ne-
voie ca tehnologia s ˘a ajute cât mai mult s ,i cât mai rapid s ,i facil cu putint ,˘a.
Astfel, inteligent ,a artificial ˘a este un domeniu foarte c ˘autat si foarte extins în
prezent.
Acest proiect propune prin folosirea de interog ˘ari semantice o me-
tod˘a mai rapid ˘a s,i mai eficient ˘a de c ˘autare, respectiv g ˘asire de produse, în
lista de produse a unui magazin, idee ce poate fi extins ˘a s,i/sau aplicat ˘a la
orice alt tip de website sau aplicat ,ie cu un num ˘ar ridicat de elemente.
26

CAPITOLUL 3. APLICAT ,IE. INTEROG ˘ARI SEMANTICE 27
3.2 Ecranul principal
Proiectul a fost realizat cu ajutorul unui es ,antion de produse obt ,inut
de la o clon ˘a a magazinului românesc Topsport. As ,adar, având la dispozit ,ie
produsele, s-a creat o baz ˘a de date cu ajutorul MySQL (sistem de gestiune
a bazelor de date relat ,ionale), folosit prin utilitarul phpmyadmin. Primul
tabel creat a fost cel de produse – products, care cont ,ine o cheie primar ˘a
cu auto incrementare – product_id, chei str ˘aine c ˘atre tabelele de brand-uri –
brand_id, categorii – category_id, culori – color_id s ,i sezoane – season_id,
alte coloane cu detalii despre produse cum ar fi: nume, descriere, pret ,s,i o
coloan ˘a ce ajut ˘a la crearea de interog ˘ari mai rapide în ceea ce prives ,te inte-
rog˘arile semantice, respectiv g ˘asirea produselor c ˘autate – search_keywords.
Coloana search_keywords cont ,ine cuvinte generate din numele, categoria,
culoarea, genul produselor. În figura de mai jos putet ,i vedea structura tabe-
lului products.
Figura 3.1: Structur ˘a tabel products

CAPITOLUL 3. APLICAT ,IE. INTEROG ˘ARI SEMANTICE 28
Urmatoarele tabele create au fost cele de legatur ˘a (cheie str ˘ain˘a)
s,i au aceeas ,i structur ˘a – prima coloan ˘a este un id setat cheie primar ˘a s,i auto
incrementat, iar cea de-a doua coloan ˘a este numele brand-ului, categoriei,
sezonului, etc. În urm ˘atoarea figur ˘a avet ,i ca exemplu structura tabelului
brands.
Figura 3.2: Structur ˘a tabel brands
Pentru realizarea proiectului pe partea de backend dar s ,i de fron-
tend s-au folosit tehnologiile HTML, CSS, JavaScript (AJAX) s ,i PHP. Pro-
iectul este conceput pe model arhitectural MVC (Model-view-controller)
cu ajutorul framework-ului PHP CodeIgniter. Dup ˘a ce s-au setat configu-
r˘arile s ,i s-a realizat conexiunea la baza de date a fost creat model-ul Pro-
dus, corespunz ˘ator tabelului products, în care se afl ˘a funct ,ia de interogare
a produselor. Apoi a fost creat controller-ul Home, care cont ,ine funct ,ia
de afis ,are a primei pagini a website-ului. Urm ˘atorul controller creat a fost
controller-ul Produse – controller ce cont ,ine funct ,ia apelat ˘a prin formularul
de c˘autare s ,i alte funct ,ii apelate în cadrul acesteia pentru îmbun ˘at˘at,irea s ,i fa-
cilitarea interog ˘arilor. Controller-ul Produse cont ,ine deasemenea s ,i funct ,ia
autocomplete, funct ,ie apelat ˘a prin intermediul AJAX atunci când este focu-
sat input-ul formularului. Au mai fost setate rutele c ˘atre pagina de Home
– controller-ul Home s ,i c˘atre controller-ul Produse, respectiv c ˘atre metoda
de c˘autare – search. În final a fost creat ˘a partea de frontend a aplicat ,iei
s,i anume View-ul home_view, fis ,ier în care se afl ˘a cont ,inut HTML cât s ,i
cont ,inut PHP pentru a oferi formularul de c ˘autare s ,i lista de produse afis ,ate.
Acest View include, pentru o bun ˘a funct ,ionare s ,i o afis ,are cât mai estetic ˘a
s,i ergonomic ˘a, framework-ul Bootstrap s ,i libr ˘aria jQuery împreun ˘a cu un
fis,ier existent în proiect în care este implementat ˘a funct ,ia de autocomplete.

CAPITOLUL 3. APLICAT ,IE. INTEROG ˘ARI SEMANTICE 29
As,adar, homepage-ul aplicat ,iei prezint ˘a un titlu care îndeamn ˘a uti-
lizatorul s ˘a foloseasc ˘a formularul de c ˘autare pentru o utilizare mai rapid ˘a s,i
mai eficient ˘a, un câmp(input) cu placeholder-ul intuitiv „Cauta”, un buton
ros ,u cu o lup ˘a pe el care este folosit ca submit pentru a trimite datele din
input, iar mai jos se afl ˘a lista de produse obt ,inut˘a f˘ar˘a vreo interogare im-
plementat ˘a, bineînt ,eles cu o limitare de 100 de produse. Lista de produse
prezint ˘a într-o as ,ezare de patru coloane imaginea, categoria, genul, culoa-
rea, sezonul s ,i pret ,ul fiec ˘arui produs.
Figura 3.3: Ecranul principal – Homepage

CAPITOLUL 3. APLICAT ,IE. INTEROG ˘ARI SEMANTICE 30
3.3 Autocomplete /Autosuggestion
Odat ˘a accesat homepage-ul website-ului, utilizatorul poate folosi
funct ,ia de c ˘autare produse prin ad ˘augarea de text în câmpul formularului
s,i prin accesarea acestuia sau prin funct ,ia de autocomplete /autosuggestion.
Funct ,ia de autocomplete /autosuggestion se activeaz ˘a atunci când utilizato-
rul face click pe input s ,i se preg ˘ates ,te s˘a scrie. Odat ˘a focusat input-ul se
deschide un dropdown cu o list ˘a de sugestii. Mai exact, la prima accesare se
va sugera lista categoriilor existente – îmbr ˘ac˘aminte, înc ˘alt,˘aminte s ,i acceso-
rii. Accesarea uneia dintre categorii va genera o interogare a produselor doar
din categoria respectiv ˘a în timp ce selectarea unei categorii f ˘ar˘a accesarea
acesteia va autocompleta formularul cu aceast ˘a categorie s ,i va genera noi
sugestii de c ˘autare dup ˘a selectarea acesteia. Urm ˘atoarea sugestie va fi c ˘a-
tre sezonul corespunz ˘ator produselor – var ˘a, iarn ˘a – iar urmând aceias ,i pas ,i
vor fi generate recomand ˘ari c ˘atre gen s ,i c˘atre o sortare dup ˘a pret ,– ieftin,
scump. În imaginea de mai jos putet ,i observa cum funct ,ioneaza aceast ˘a
caracteristic ˘a a aplicat ,iei.
Figura 3.4: Autocomplete /Autosuggestion
3.4 Funct ,ionalitate
La accesarea formularului se trimit datele din acesta prin metoda
POST c ˘atre Controller-ul Produse, funct ,ia get. Aceast ˘a funct ,ie preia datele
– cuvintele introduse de utilizator in câmpul de c ˘autare s ,i le trimite mai de-
parte c ˘atre funct ,ia din acelas ,i controller – semanticQuery. Aici este parsat

CAPITOLUL 3. APLICAT ,IE. INTEROG ˘ARI SEMANTICE 31
fiecare cuvânt din cele trimise s ,i trecut print-un array declarat privat la în-
ceputul controller-ului, ce cont ,ine cuvinte ce ar putea fi introduse de c ˘atre
utilizator într-un mod familiar acestuia ci nu tocmai termenii folosit ,i în baza
de date. De exemplu, s ˘a spunem c ˘a utilizatorii sunt obis ,nuit ,i s˘a caute ter-
meni ca „adidas ,i”, „tenis ,i”, „tenes ,i”, etc. în timp ce în baza de date avem
„pantofi sport”. Dup ˘a ce se face aceast ˘a verificare s ,i se atribuie fiec ˘arui cu-
vânt mai lung de 2 caractere un termen ce s ,tim sigur c ˘a va fi g ˘asit în baza
de date, mai exact în câmpul special creat „search_keywords”, se trimite un
array doar cu aces ,ti termeni s ,i se apeleaz ˘a funct ,ia din Model-ul Produs –
fetch_produse() cu parametrii o limitare de 100 de rezultate s ,i array-ul cu
termenii obt ,inut ,i.
private $elements =
array(
"ski" => array("ski","skiuri","echipament", "clapari", "ghete
", "iarna", "gros", "groase"),
"barbati" => array("barbat", "baiat", "baieti", "baeat", "
copil", "copii", "barbatesc", "barbatesti"),
"femei" => array("femeie", "femei", "fata", "fete", "fetita",
"fetite"),
"jacheta" => array("geaca"),
"pantofi sport" => array("adidasi","tenisi","tenesi",""),
"incaltaminte" => array("incaltari",""),
"ghete" => array("bocanci"),
"imbracaminte" => array("haine"),
"albastru" => array("albastri","albastre"),
"verde" => array("verzi"),
"negru" => array("negri")
);
public function get($search)
{
$data['search'] = str_replace("-"," ",$search);
$searchStrings = explode("-", $search);

CAPITOLUL 3. APLICAT ,IE. INTEROG ˘ARI SEMANTICE 32
$search_array['search'] = $this->semanticQuery($searchStrings
);
}
public function semanticQuery($search)
{
foreach($search as $s){
foreach($this->elements as $key => $e){
if(in_array($s, $e)){
$where[] = $key;
break;
}
}
if(strlen($s) > 2) {
$where[] = $s;
}
}
return $where;
}
Funct ,ia fetch_produse din Model-ul Produs face o verificare dac ˘a
exist ˘a parametri trimis ,i, iar dac ˘a aces ,tia sunt primit ,i se face o parsare a
acestora s ,i se caut ˘a în coloana „search_keywords” prin metoda WHERE s ,i
metoda LIKE a limbajului de interogare SQL. Astfel se genereaza un string
care alc ˘atuies ,te condit ,ia de interogare a cuvintelor introduse în formular.
Mai departe se genereaza un script cu metoda IF s ,i ORDER_BY pentru a
putea filtra produsele în funct ,ie de cât de multe cuvinte se potrivesc în inte-
rogare astfel încât produsele ce au în coloana „search_keywords” cele mai
multe cuvinte introduse de c ˘atre utilizator vor fi afis ,ate primele. În urm ˘a-
toarele rânduri avet ,i afis ,at˘a sect ,iunea de cod care face aceste verific ˘ari.
public function fetch_produse($limit, $start, $params = null)
{
if (!empty($params['search'])) {

CAPITOLUL 3. APLICAT ,IE. INTEROG ˘ARI SEMANTICE 33
$like_statements = array();
$order_by = '';
foreach($params['search'] as $key => $s){
$like_statements[] = "search_keywords LIKE '% " . $s .
" %' OR search_keywords LIKE '% " . $s . "' OR
search_keywords LIKE '" . $s . " %' OR
search_keywords LIKE '" . $s . "'";
$like_statements[] = "s.alias = '". $s ."'";
if($key !== 0){
$order_by .='+';
}
$order_by .= "IF('".$s."'='ieftin' OR '".$s."'='scump'
OR s.alias = '" . $s . "' OR search_keywords LIKE
'% " . $s . " %' OR search_keywords LIKE '% " . $s
. "' OR search_keywords LIKE '" . $s . " %' OR
search_keywords LIKE '" . $s . "',1,0)";
}
$order_by .= " DESC";
În continuare se face o verificare a cuvintelor ca atunci când în
formularul de c ˘autare este introdus un cuvânt ce sugereaz ˘a ordonarea în
funct ,ie de pret ,, cum ar fi „ieftin” sau „scump”, s ˘a se aplice condit ,ia OR-
DER_BY în funct ,ie de coloana „price” ascendent sau descendent, cores-
punz ˘ator cerint ,elor. Iar pentru a nu face interogare unor produse mai vechi,
ce nu au pret ,, se aplic ˘a inc ˘a o condit ,ie s ,i anume coloana „price” s ˘a fie mai
mare ca 0 (diferit ˘a de FALSE).
if(in_array("scump",$params['search'])||in_array("scumpi",$params['
search'])||in_array("scumpe",$params['search'])){
$order_by .= ", price DESC";
}elseif(in_array("ieftin",$params['search'])||in_array("

CAPITOLUL 3. APLICAT ,IE. INTEROG ˘ARI SEMANTICE 34
ieftina",$params['search'])||in_array("ieftini",$params
['search'])||in_array("ieftine",$params['search'])){
$order_by .= ", price ASC";
}
if(in_array("scump",$params['search'])||in_array("scumpi",
$params['search'])||in_array("scumpe",$params['search
'])){
$order_by .= ", price DESC";
}elseif(in_array("ieftin",$params['search'])||in_array("
ieftina",$params['search'])||in_array("ieftini",$params
['search'])||in_array("ieftine",$params['search'])){
$order_by .= ", price ASC";
}
$like_string = "(" . implode(' OR ', $like_statements) .
")";
$like_string .= " AND price > 0";
}
Mai departe se face select-ul pentru toate coloanele tabelului, se
foloses ,te metoda JOIN pentru a obt ,ine categoriile, sezoanele, brand-urile
corespunz ˘atoare produselor s ,i se aplic ˘a metoda GROUP_BY pe coloana de
nume a tabelului products pentru a se evita afis ,area de produse dublate. Se
seteaz ˘a parametrii de limitare s ,i în caz de succes se returneaza produsele
obt ,inute din interogare.
$this->db->select('*');
$this->db->from('products as p');
$this->db->join('seasons as s', 's.season_id = p.season_id');
if (!empty($params['search'])) {
$this->db->where($like_string);
}
$by = 'p.name_ro';
$order = 'asc';
if(isset($order_by)){

CAPITOLUL 3. APLICAT ,IE. INTEROG ˘ARI SEMANTICE 35
$this->db->order_by($order_by);
} else {
$this->db->order_by($by, $order);
}
$this->db->group_by("p.name_ro");
$this->db->limit($limit, $start);
$query = $this->db->get();
if ($query->num_rows() > 0) {
return $query->result();
} else {
return FALSE;
}
}
Dup˘a cum am spus mai sus, aplicat ,ia faciliteaz ˘a navigarea utili-
zatorului prin funct ,ia de autocomplete /autosuggest. Aceast ˘a funct ,ie ajut ˘a
utilizatorul prin punerea la dispozit ,ie de posibilit ˘at,i de c ˘autare în produsele
existente pe website. Aceast ˘a funct ,ie este realizat ˘a prin folosirea tehnolo-
giilor JavaScript – platforma de dezvoltare jQuery, AJAX (Asynchronous
JavaScript and XML) s ,i PHP. JQuery este folosit pentru manevrabilitatea
elementelor DOM cum ar fi input-ul formularului, care la focusare deschide
dropdown-ul cu opt ,iuni, cât s ,i pentru accesarea dropdown-ului si umplerea
de cont ,inut a input-ului folosind taste precum saget ,ile – pentru navigare în
opt ,iuni, tasta „enter” pentru accesare sau tasta „escape” pentru p ˘ar˘asire me-
niu. În urm ˘atoarele rânduri putet ,i vedea secvent ,e de cod jQuery care face
aceste verific ˘ari.
searchInput.on('focus',function(){
ajaxSearch();
$(document).on('keyup',function(e) {
var li = $('#autoSuggestionsList li');
if (e.keyCode === 27){ // esc
searchInput.val('');
$("#autoSuggestionsList").removeClass("auto_list");

CAPITOLUL 3. APLICAT ,IE. INTEROG ˘ARI SEMANTICE 36
$("#autoSuggestionsList li").remove();
}else if(e.keyCode === 40){ // down arrow
if(liSelected){
liSelected.removeClass('selected');
next = liSelected.next();
if(next.length > 0){
liSelected = next.addClass('selected');
}else{
liSelected = li.eq(0).addClass('selected');
}
}else{
liSelected = li.eq(0).addClass('selected');
}
searchInput.val(liSelected.children().text());
}else if(e.keyCode === 38){ //up arrow
if(liSelected){
liSelected.removeClass('selected');
next = liSelected.prev();
if(next.length > 0){
liSelected = next.addClass('selected');
}else{
liSelected = li.last().addClass('selected');
}
}else{
liSelected = li.last().addClass('selected');
}
searchInput.val(liSelected.children().text());
}else if(e.keyCode === 13){
//nothing
} else {
ajaxSearch();
}
});
});

CAPITOLUL 3. APLICAT ,IE. INTEROG ˘ARI SEMANTICE 37
AJAX este folosit pentru preluarea datelor din formular s ,i trimi-
terea acestora c ˘atre controller, acolo unde vor fi prelucrate cu tehnologia
PHP s ,i apoi returnate c ˘atre AJAX pentru a fi folosite, respectiv afis ,ate în
pagin ˘a. Prin urmare, datele introduse în formular sunt obt ,inute cu ajutorul
jQuery, iar dac ˘a valoarea cont ,inut˘a de input-ul formularului este goal ˘a se va
afis ,a prima categorie de sugestii, respectiv categoria produselor – îmbr ˘ac˘a-
minte, înc ˘alt,˘aminte, accesorii. În cazul în care valoarea input-ului nu este
goal˘a, se foloses ,te AJAX pentru a trimite datele la funct ,ia autocomplete
din controller-ul PHP. Avet ,i mai jos prezentarea codului care face aceste
operat ,iuni.
//ajax search suggestions
function ajaxSearch()
{
var input_data = $('#cauta').val();
if (input_data.length === 0) {
var data = '<li><a href="'+ base_url +'search/imbracaminte">
imbracaminte</a></li>' +
'<li><a href="'+ base_url +'search/incaltaminte">
incaltaminte</a></li>' +
'<li><a href="'+ base_url +'search/accesorii">
accesorii</a></li>';
$('#suggestions').show();
$('#autoSuggestionsList').addClass('auto_list');
$('#autoSuggestionsList').html(data);
}
else {
var post_data = {
'search_data': input_data
};
$.ajax({
type: "POST",
url: base_url + "ajax/autocomplete/",
data: post_data,
success: function (data) {

CAPITOLUL 3. APLICAT ,IE. INTEROG ˘ARI SEMANTICE 38
// return success
if (data.length > 0) {
$('#suggestions').show();
$('#autoSuggestionsList').addClass('auto_list');
$('#autoSuggestionsList').html(data);
}
}
});
}
}
În controller, funct ,ia autocomplete primes ,te s ,i prelucreaz ˘a informat ,iile
dupa relevant ,a cuvintelor introduse în motorul de c ˘autare. Se obt ,in din baza
de date opt ,iunile necesare pentru afis ,area în dropdown, s ,i dac ˘a utilizatorul
a selectat o opt ,iune din dropdown sau a introdus o opt ,iune corect ˘a, se reco-
mand ˘a urm ˘atoarea select ,ie – sezon, gen, pret ,, prin trimiterea acesteia înapoi
la AJAX, de unde se va afis ,a în website cu ajutorul jQuery. Mai jos putet ,i
vedea codul din funct ,ia autocomplete.
public function autocomplete()
{
$search = $this->input->post('search_data');
$searchArr = explode(" ",$search);
$query = $this->db->query("select name_ro from categories");
$categs = $query->result();
$categorii = array();
foreach($categs as $c){
$categorii[] = $c->name_ro;
}
$sezoane = array("vara","iarna");
$sex = array("femei","barbati");
if((count($searchArr) === 1) && in_array(ucfirst($searchArr
[0]),$categorii)){
echo "<li><a href='".base_url()."search/".$search."-vara
'>".$search." vara</a></li>
<li><a href='".base_url()."search/".$search."-iarna

CAPITOLUL 3. APLICAT ,IE. INTEROG ˘ARI SEMANTICE 39
'>".$search." iarna</a></li>";
}elseif ((count($searchArr) === 2) && isset($searchArr[0],
$searchArr[1]) && in_array($searchArr[1],$sezoane)){
$searchURL = str_replace(' ', '-', $search);
echo "<li><a href='".base_url()."search/".$searchURL."-
femei'>".$search." femei</a></li>
<li><a href='".base_url()."search/".$searchURL."-
barbati'>".$search." barbati</a></li>";
}elseif ((count($searchArr) === 3) && isset($searchArr[0],
$searchArr[1],$searchArr[2]) && in_array(ucfirst(
$searchArr[0]),$categorii) && in_array($searchArr[1],
$sezoane) && in_array($searchArr[2],$sex)){
$searchURL = str_replace(' ', '-', $search);
echo "<li><a href='".base_url()."search/".$searchURL."-
ieftin'>".$search." ieftin</a></li>
<li><a href='".base_url()."search/".$searchURL."-
scump'>".$search." scump</a></li>";
}
}
Având în vedere cele prezentate mai sus, putem spune c ˘a aceast ˘a
aplicat ,ie este conceput ˘a pentru a facilita navigarea utilizatorului prin pune-
rea la dispozit ,ie de interog ˘ari semantice s ,i a funct ,iei de autocomplete /auto-
suggestion. Plecând de la aceste idei, folosirea website-urilor s ,i a aplicat ,iilor
poate fi mult us ,urat˘a ceea ce poate aduce multe beneficii. Pe de o parte poate
aduce beneficii utilizatorului prin timpul câs ,tigat, punându-i la dispozit ,ie
unelte moderne de c ˘autare, pe de alt ˘a parte comerciantul poate beneficia,
prin starea de bine creat ˘a utilizatorului, de cump ˘ar˘aturi în num ˘ar mai mare,
de recenzii pozitive aduse aplicat ,iei sau de recomandarea aplicat ,iei altor
persoane.
As,adar, interog ˘arile semantice fac parte din inteligent ,a artificial ˘a,
iar inteligent ,a artificial ˘a este viitorul tehnologiei informat ,iei. Deci, viitorul
este acum.

Bibliografie
[1] Atkinson, Leon & Suraski, Zeev. 2004. "Core PHP Programming".
Third Edition. Prentice Hall, New Jersey.
[2] Carey, Patrick. 2012. "New perspectives on HTML and CSS". Sixth
Edition. Introductory. Boston.
[3] Davis, Michele E. & Phillips, Jon A. 2007. "Learning PHP and My-
SQL: Step-by-Step Guide to Creating Database-Driven Websites".
Second Edition. O’Reilly, Sebastopol.
[4] Dix, A., Finlay, J. E., Abowd, G. D., Beale, R. (2003) Human-
Computer Interaction (3rd Edition), Prentice-Hall, USA.
[5] Flanagan, David. 2006. "JavaScript: The Definitive Guide". Fifth
Edition. O’Reilly Media, Inc., Sebastopol.
[6] Howe, Shay. 2014. "Learn to Code HTML and CSS: Develop & Style
Websites". First Edition. New Riders: Chicago.
[7] McLaughlin, Brett. 2013. "PHP & MySQL: The Missing Manual".
Second Edition. O’Reilly, Sebastopol.
[8] Pribeanu, C. (1999) Interac¸ tiunea om-calculator, Editura Didactic ˘a ¸ si
Pedagogic ˘a.
[9] Schafer, Steven M. 2011. "HTML, XHTML and CSS Bible". Fifth
Edition. Wiley Publishing, Inc. Indianapolis, Indiana.
40

BIBLIOGRAFIE 41
[10] York, Richard. 2005. "Beginning CSS: Cascading Style Sheets for
Web Design". Wiley Publishing, Inc. Indianapolis, Indiana.