Licenta Magazin Online

UNIVERSITATEA SPIRU HARET BUCURESTI
FACULTATEA DE MATEMATICA SI INFORMATICA
LUCRARE DE LICEN
Coordonator tiinific:
Student:
David Laureniu-Georgian
2015
UNIVERSITATEA SPIRU HARET BUCURESTI

FACULTATEA DE MATEMATICA SI INFORMATICA
Coordonator tiinific:
Student:
David Laureniu-Georgian
2015
Cuprins
I INTRODUCERE.....................................................................................................................................4
1.1 Comertul Electronic.........................................................................................................................4
I.2 Beneficiile comertului electronic......................................................................................................7
I.3 Modele de afaceri.............................................................................................................................9
II ROLUL I IMPORTANA INTERNETULUI I A PAGINILOR WEB............................................13
II.1 Scurct Istoric.................................................................................................................................13
II.2 Prezentare si importanta................................................................................................................15
II.3 HTML. Prezentare.........................................................................................................................17
II.4 CSS. Prezentare.............................................................................................................................22
II.5 JavaScript. Prezentare...................................................................................................................25
II.5.1 Limbajul JavaScript................................................................................................................25
II.5.2 Prezentarea bibliotecii JQuery...............................................................................................31
II.6 Limbaje de scripting......................................................................................................................33
II.6.1 Python. Prezentare..................................................................................................................33
II.6.2 Frameworkul web Flask.........................................................................................................38
II.6.3 Administrarea bazelor de date cu SQLAlchemy....................................................................41
III. ARHITECTURA MAGAZINULUI WEB.........................................................................................44
III.1 Prezentarea magazinului..............................................................................................................44
III.2 Strucura backendului aplicaiei....................................................................................................54
III.3 Structura bazei de date.................................................................................................................64
IV. CONCLUZII......................................................................................................................................72
V. BIBLIOGRAFIE.................................................................................................................................74
DAVID LAURENIU
INTRODUCERE
I INTRODUCERE
1.1 Comertul Electronic
ntreprinderile moderne sunt caracterizate printr-o cerere din ce in ce mai mare, prin existen a
unei competiii la nivel mondial si prin sporirea permanent a ateptrilor clien ilor. Ca s poat
raspunda acestor cerinte, ntreprinderile de pe tot globul sunt n plin proces de tranformare
organizational si a modului lor de funcionare. Comerul electronic este o cale prin care se
faciliteaz si sprijin aceste schimbri, la scar global.
Pentru unele firme, comert electronic nseamna orice tranzactie financiar care utilizeaz
tehnologia informatic. Pentru altele, notiunea de comert electronic acoper circuitul complet de
vanzri - inclusiv marketingul si vanzarea propriuzis.
Multi oameni consider comertul electronic ca fiind orice tranzactie comercial condus
electronic pentru cumpararea unor produse cum ar fi crti, CD-uri, bilete de calatorie si altele.
Dar, comertul electronic are, in sens larg, un impact mult mai profund asupra evolutiei afacerilor
si cuprinde, in fapt, nu numai noile achiziii comerciale ci i totalitatea activit ilor care sus in
obiectivele de marketing ale unei firme i care pot include, spre exemplu, publicitate, vanzri,
plai, activitai post-vanzare, servicii catre clieni, etc.
Comertul electronic da posibilitatea firmelor sa devina mai eficiente si flexibile in modul intern
de funcionare, s conlucreze mai strns cu furnizorii si sa devina mai atente fa de nevoile si
asteptrile clienilor. Permite companiilor sa selecteze cei mai buni furnizori, indiferent de
localizarea lor geografica i s vand unei piee globale.
Aceast evoluie are un impact major asupra economiei, in ceea ce priveste crearea de noi
ntreprinderi, diversificarea celor existente i, n special, asupra potenialului pie ei forei de
munc i a gradului de ocupare a acesteia in viitor. Industria comer ului electronic face, n
4
DAVID LAURENIU
INTRODUCERE
general, distincie ntre mai multe tipuri de tranzacii, unele active altele n ateptarea:
- Business-to-Business (B-2-B sau BTB) cuprinde toate tranzaciile ce se efectueaza intre doi sau
mai muli parteneri de afaceri. Aceste tranzacii se bazeaza, de obicei, pe sisteme extranet, ceea
ce nseamna ca partenerii de afaceri acioneaza pe internet prin utilizarea de nume si parole
pentru paginile de web proprii. n termeni practici, n aceasta categorie de comer electronic
poate fi orice firma care utilizeaza internetul pentru a comanda de la furnizori, pentru a primi
facturi si a efectua plai.
- Business-to-Consumer (B-2-C sau BTC) se refera la relaiile dintre comerciant si consumatorul
final, fiind considerat comer electronic cu amnuntul. Aceasta categorie s-a extins foarte mult
datorita World Wide Web : exista acum mall-uri pe tot internetul care ofer toate tipurile de
bunuri de consum, de la prjituri sau vinuri, la calculatoare si automobile.
- Business-to-Administration (B-2-A sau BTA) acopera toate tranzactiile dintre firme si autorit i
administrative locale sau centrale. Spre exemplu, In Statele Unite ale Americii, licita iile publice
lansate de guvern sunt publicate pe internet iar firmele pot rspunde pe cale electronic. In
momentul de fata, aceasta categorie de comert electronic este intr-o faza de dezvoltare primar,
dar se asteapt o extindere rapid, mai ales in contextul in care guvernele si alte autorita i
folosesc propriile metode de promovare a comerului electronic. Aceasta categorie de ecommerce ar putea, n viitor, sa fie utilizat i pentru plata TVA sau a impozitelor firmelor.
DAVID LAURENIU
INTRODUCERE
Majoritatea afacerilor dezvoltate pe Internet, cu comer electronic, s-au dezvoltat n aria

Business-to-Business i mai puin Busines-to-Consumer. Business-to-Business(B2B) const n
realizarea de tranzacii ntre companii, transformnd modul n care acestea lucreaz ntre ele.
Iniial transferul dintre companii se realiz prin intermediul unui sistem electronic de transfer
numit EDI(Electronic Data Interchange). Transferul electronic care are la baz sistemul EDI
transmitea datele conform unui format standard. Avnd n vedere faptul c documentele erau
aproximativ n acelai format, s-au putut realiza standarde dup acestea i a fost posibil trecerea
lor n format electronic. Datorit faptului c reelele EDI aveau un cost ridicat, multe companii
foloseau linii nchiriate sau serviciile unor firme care ofereau conexiuni si servicii de transmisie
celor angajai n EDI (VAN Value Added Network).
Folosirea unei astfel de metode pentru transferul datelor a prezentat ansa de a diminua
costurile pentru completarea formulalelor, listarea, trimiterea sau stocarea din nou ntr-un sistem
informatic odat ajunse la destinatar, precum i erorile ce ar fi rezultat prin introducerea repetat
a datelor.
Odat cu apariia Internetului s-a trecut la comerul electronic bazat pe internet deoarece
folosirea acestuia este mai puin costisitoare. Comerul electronic bazat pe Internet a cunoscut
mai multe etape:
- etapa iniial, etap n care e-mail-ul a fost cea mai folosit tehnologie de transfer a datelor;
- etapa www, care a luat natere odat cu apariia primului browser web(Mosaic);
- etapa interactiv, cnd multe website-uri au introdus protocoale securizate de
comunicaie, aplicaii software pe partea de server i/sau client, formulare, asigurnd
interactivitatea client-furnizor;
- etapa maturizrii web-ului, caracterizat de introducerea lui n cadrul intranetorganizaiei, utilizarea extranet-ului ntre organizaii, utilizarea tehnologiei Python
ului
i
capabilitilor multimedia ale Web-ului, care a devenit, astfel, un valoros canal de reclam
publicitate(Pia Electronic).
6
a
i
DAVID LAURENIU
INTRODUCERE
I.2 Beneficiile comertului electronic
n cazul comerului electronic exist avantaje att pentru vnzator ct i pentru

cumprtor. Avantajele pentru vnztor sunt urmtoarele:
- dispariia limitelor geografice de vnzare;
- publicitatea online poate atinge publicul int mai uor;
- dezvoltarea de noi produse se poate realiza mai uor n concordana cu
consumatorului;
- adaptarea la schimbri este mai rapid;
- disponibilitatea informaiilor despre clieni;
- economii la vnzarea produsului;
- mbuntirea relaiilor cu clienii;
- reducerea erorilor prin automatizarea proceselor de plat;
- operabilitate 24 ore / zi, 7 zile pe saptaman.
Pentru cumprtor, comerul electronic aduce urmtoarele avantaje:

- timpul redus de acces la produs;
7
cerinele
DAVID LAURENIU
INTRODUCERE
- identificarea mult mai uoar de furnizori i parteneri de afaceri;

- economii la cumprarea prosusului;
- negocierea preurilor se face mai uor;
- scderea costurilor tranzaciilor prin creterea vitezei de transfer a informaiei;
- distribuirea online pentru produse digitale;
- lucrul la distan;
- accesul la produse/servicii din zone aflate la distan(exemplu: nvmnt la distan).
Dezavantaje:
- imposibilitatea de a realiza cu succes transferuri online a unor produse i servicii (exemplu:
produse alimentare perisabile, bijuterii unicat, alte produse imposibil
de
inspectat
la
distan, indiferent de tehnologiile curente);

- posibiliatea de non-profit n cazul anumitor produse;
- credibilitate sczut;
- integrarea greoaie a bazelor de date i a software-ului de procesare a
tranzaciilor
tradiionale cu software pentru comer electronic (aceste servicii de integrare pot fi costisitoare).
Pe lng problemele tehnologice i legate de software, exist i alte obstacole:
- de natur cultural i legal;
DAVID LAURENIU
INTRODUCERE
- legate de securitatea comerului electronic;

- legate de confidenialitatea datelor (ce tranzacii efectueaz, ce site-uri
viziteaz,
ce
preocupri are fiecare persoan etc.).
I.3 Modele de afaceri
Analiznd aplicaiile curente dezvoltate pe Internet, identificm urmtoarele modele

de afaceri n comerul electronic:
- magazin electronic (e-shop): un magazin electronic se implementeaz prin intermediul unui site
Web; acesta este gestionat de o companie, pentru marketingul i vnzrile propriilor produse i
servicii. Minimal, conine catalogul de produse sau servicii cu descrieri tehnice i comerciale
pentru fiecare poziie din catalog. Aceste descrieri sunt gestionate n general de un Sistem de
Gestiune al Bazelor de Date (SGBD). Sistemul de Gestiune al Bazelor de Date, se va ocupa cu
stocarea i manipularea datelor i cu oferirea posibilitilor de acces la date. Varianta medie
conine faciliti pentru preluarea comenzilor (prin e-mail sau forme interactive pe care le vor
completa clienii), iar varianta extins cuprinde i posibilitatea efecturii on-line a plii (prin
cri de credit sau alte variante electronice).
- aprovizionarea electronic (eProcurement): pentru procurarea bunurilor i serviciilor, marile
companii i autoriti publice organizeaz licitaii. Prin publicarea pe Web a specificaiilor
ofertei, scade att timpul ct i costul de transmisie, mrindu-se i numrul de firme care iau
parte la licitaie. Astfel, crete concurena i scade preul.
- magazin electronic universal (eMall): ca i n lumea real, magazinul electronic universal este o
colecie de magazine electronice, reunite sub o umbrel comun i care, n general, accept
metode de plat comune.
DAVID LAURENIU
INTRODUCERE
- piaa unui ter (3rd party marketplace): se apeleaz la o interfa utilizator pentru catalogul de
produse al companiei, interfa ce aparine unui ter (n general, furnizor de servicii internet sau o
banc). Aceast metod are avantajul c interfaa este unic pentru mai muli productori,
utilizatorii fiind familiarizai cu utilizarea ei
- comuniti virtuale (virtual communities): valoarea cea mai important a unei comuniti
virtuale este dat de ctre membrii si (clieni sau parteneri), care adaug informaii proprii peste
un mediu de baz furnizat de companie. Fiecare membru poate oferi spre vnzare produse sau
servicii sau poate adresa cereri de cumprare a unor produse sau servicii. Calitatea de membru al
unei comuniti virtuale presupune plata unei taxe.
- furnizor de servicii cu valoare adugat pentru canalele de comer electronic (value chain
service provider): furnizorii de servicii sunt specializai pe funcii specifice, cum ar fi asigurarea
logisticii, plata electronic sau expertiza n managementul produciei i a stocurilor. Plata acestor
servicii se face pe baza unor tarife sau a unei cote procentuale.
- platforme de colaborare: platformele de colaborare cuprind un set de instrumente i un mediu
informaional pentru colaborarea ntre companii. Acestea pot adresa funcii specifice, cum ar fi
concepia sau proiectarea n colaborare. Ctigurile provin din managementul platformei (taxa de
membru sau taxa de utilizare), i din vnzri de instrumente specializate (pentru design,
workflow i gestiunea de documente). Prin workflow se nelege fluxul de documente, care
implic dou entiti: partea pasiv (documentele) i partea activ (deplasarea acestor
documente).
- brokeraj de informaii i alte servicii: exemplele cuprind cataloage de clieni clasificai pe
profil, vnzarea de oportuniti de afaceri, consultan n domenii specializate. O categorie
special o constituie serviciile de ncredere furnizate de autoritile de certificare sau de
notariatele electronice.
Un sistem electronic de pli se refer la totalitatea obiectelor care conlucreaz pentru
10
DAVID LAURENIU
INTRODUCERE
asigurarea plii tranzaciilor ce se efectueaz. Sunt implicate, n general, trei entiti care
interacioneaz: o banca B, un cumprtor C i un vnztor V. Sistemul electronic de pli
conine i o mulime de protocoale care permit cumprtorului C s fac pli ctre vnztorul V.
Sistemele electronice de pli pot fi privite ntr-o structur ierarhic pe nivele, derivate din
arhitectura sistemelor ISO-OSI .
Un Sistem Electronic de Pli (Fig. 1.3) este format din doua nivele:
- nivelul utilizator, care constituie nivelul ierarhic superior;
11
DAVID LAURENIU
INTRODUCERE
- nivelul sistem, care constituie nivelul ierarhic inferior.
Nivelul utilizator const din mulimea utilizatorilor i a tranzaciilor care au loc ntre acetia.
Utilizatorii sunt grupai dup diverse roluri, dup modul n care interacioneaz n relaiile de
afaceri dintre ei: cumprtorul, vnztorul, emitentul de bani electronici (banca), etc.
Nivelul sistem: const din mulimea entitilor fizice i a relaiilor care se stabilesc ntre ele.
Entitile pot juca unul dintre urmtoarele roluri: purttor de bani electronici sau registru de cas.
De-a lungul ultimilor ani, Comerul Electronic a devenit o activitate comun pentru multe
companii. Unele dintre acestea au acceptat aceast provocare, fr a lua n considerare
schimbrile culturale pe care le implic situaia n cauz, precum i infrastructura necesar pentru
a continua proiectul iniial.
Pentru a ncepe dezvoltarea unei afaceri n lumea electronic, exist unele puncte care trebuie
s fie acoperite. n primul rnd este necesar s se stabileasc o strategie de marketing, pentru a
crea un catalog de produse, pentru a defini costurile i preurile de vnzare, piaa int, preurile
de transport i de manipulare.
n prezent, majoritatea companiilor doresc s includ dezvoltarea E-Business. Aceast nou
tehnologie, care se bazeaz pe Internet, este i va rmne pentru o lung perioad de timp o
variant de dezvoltare a unei afaceri. Pentru a putea utiliza aceast tehnologie ntr-un mod
corespunztor, este necesar s se bazeze pe o bun organizare a informaiilor i proceselor.
Aceasta este o provocare, datorit faptului c cele mai multe companii nu au propriile lor sisteme
care s ofere sprijin pentru a rezolva nevoile specifice. Pentru a realiza o dezvoltare
corespunztoare a acestui proiect este nevoie de o companie care are personal calificat.
12
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
II ROLUL I IMPORTANA INTERNETULUI I A PAGINILOR WEB
II.1 Scurct Istoric
Internetul s-a nscut la mijlocul anilor 60 n forma ARPAnet (Advanced Research Projects
Agency Net) - o reea ntre mai multe computere din unele instituii americane, ce lucrau pentru
ARPA, un departament de cercetare din cadrul Pentagonului. ARPA a fost pus n funciune ca
reacie la succesul sovietic al lansrii satelitului Sputnik n spaiu n 1957. Unul din obiectivele
ARPAnet era crearea unei reele, care s nu fie distrus datorit atacurilor asupra sistemului.
Rzboiul Rece fiind la apogeu, scenariul unui dezastru era considerat fie lansarea unei bombe fie
un atac nuclear.
De aici a rezultat un proiect de reea, unde reeaua nsi era permanent n pericol de atac. n
consecin:- doar un minimum de informaii era cerut de la computerele client n reea - oricnd
transmisia de date ntlnea un obstacol, sau una dintre adrese era de negsit, se gsea o alt cale
ctre adresa cutat.
Toate acestea au fost codificate ntr-un protocol care reglementa transmisia de date pe Internet.
n forma sa final, acesta era TCP/IP (Transmission Control Protocol / Internet protocol), care
este i acum baza Internetului. TCP/IP face posibil ca modele diferite de calculatoare, de
exemplu IBM compatibile sau Mac's, folosind sisteme diferite sisteme de operare, cum ar fi
UNIX, Windows, MacOS etc. S se "neleag" unele cu altele. n acest fel, internetul era i este
cu adevrat o platform independent.
Internet-ul "civil" a nceput ca o reea de patru computere ntre Universitile din Utah, Santa
Barbara i Los Angeles i Institutul de Cercetare din Stanford. n curnd, cercettori din alte
instituii de stat au devenit interesai. Deoarece folosirea computerelor era costisitoare, ei au
vzut imediat avantajele folosirii n comun a unei reele.
La sfritul anilor 60 i nceputul anilor 70, cnd Internetul numra n jur de 50 de computere,
13
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
s-au dezvoltat primele dintre servicii, folosite nc i azi pentru transferul informaiei:- File
Transfer Protocol pentru trimiterea i regsirea fiierelor - Telnet pentru accesarea i folosirea
bazelor de date, a bibliotecilor i a cataloagelor din toat lumea - E-Mail pentru trimiterea
mesajelor personale.
Internetul era n mod categoric n ascenden. Cu noi grupuri de utilizatori care se alturau, n
urmtoarea decad, Internetul a crescut la o reea de 200 de computere. Partea militar era
organizat ntr-o reea separat, Milnet.
n acelai timp, au aprut alte reele, mai ales n sectorul academic. Important printre acestea
era (i este) USENET sau Users' Network, care a nceput n 1979, cnd cteva computere UNIX
au fost conectate mpreun.
USENET. n sute de grupuri de discuii despre orice subiect imaginabil, oamenii fceau schimb
de nouti i imagini, n ciuda distanelor i a hotarelor. Alte reele s-au dezvoltat de-a lungul
USENETului. Toate formau baza unui spaiu de comunicaie radical democratic. De exemplu,
naintea unei noi discuii pe care grupul o ncepea, comunitii Netului i se cerea un vot de
accept. Grupurile de discuii joac nc un rol mare pe Internet. Exist mii i zeci de mii n ntreg
internetul.
Alt motenire a USENET este "Netiquette", sau regulile de comportament pe Internet.
10 ani dup ce USENET i ncepuse dezvoltarea, Internetul a crescut la 80.000 de computere.
A nceput s fie un factor de luat n considerare n politic. i curnd, expresia "Information
SuperHighway" (autostrada informaiei) a devenit uzual. n aceast metafor, Internetul era
vzut ca o important infrastructur pentru transportul unor bunuri vitale - informaiile.
n anii 80 i nceputul anilor 90, cnd Internetul era folosit doar de un numr mic de cercettori,
arata mult diferit fa de prezent. Principalele aplicaii erau atunci pota electronic i grupurile
de discuii (Newsgroups) plus diverse rutine de cutare i mecanisme de transfer al fiierelor.
Aceasta era o lume UNIX, n care toate comunicaiile existau doar ca text sau numere, i liniile
de comand trebuiau memorate i tiprite.
Era destinat s fie o platform intern de comunicaii pentru cercettorii din ntreaga lume care
lucrau pentru CERN. Sarcina principal era s asigure un sistem care s fac legtura ntre
14
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
varietatea de platforme ale diverselor calculatoare.

Soluia de baz era ideea de a face legtura ntre documente via "hipertext". Hipertext nseamn,
a marca irurile de text sau alte obiecte i de a le lega cu alte obiecte, care ar putea fi din punct de
vedere fizic la mare distan de obiectul original. Cnd legtura este selectat, cineva poate "sri"
la documentul legat. n acest fel este posibil de a lega un numr nelimitat de documente ntre ele
ntr-o structur web ne-ierarhic. Pentru a putea deosebi aceste documente i pentru a le regsi,
fiecare are o adres unic. Aceasta este Unique Resource Locator (URL). URL-urile constau ntrun protocol de transmitere (n cazul WWW-ului acesta este Hypertext Transfer Protocol - http),
urmat de www (n cele mai multe cazuri) i de domeniu (de exemplu numele serverului i
numele paginii).
Prima versiune a programelor pentru a naviga pe www, aa numitele "browsere" urmau nc
tradiia original a internetului - erau numai text. De aceea, sistemul a rmas, n principiu,
neprietenos cu utilizatorii. n septembrie 1992 nu existau mai mult de 20 de servere web n
ntreaga lume.
Schimbarea radical s-a produs cnd NCSA (National Center for Supercomputing Applications)
din SUA a scos "Mosaic" - Browser n 1993, care era bazat pe o interfa grafic (Windows).
Enorma cretere a web-ului a nceput virtual, dintr-o dat: n iunie 1993, 130 servere Web erau
nregistrate, n 1994 erau deja 11.576 servere.
Dar web-ul nu a fcut doar s se dezvolte. De asemenea, posibilitile de a prezenta datele au
crescut dramatic. Curnd au aprut poze i animaii pe situri web, urmate de sunete . Doar un
mic pas mai era necesar pentru a aduce cataloage, directoare i formulare de comand pe situri
web. Astfel, civa ani mai trziu s-a nscut E-Commerce.
II.2 Prezentare si importanta
n Romnia, penetrarea internetului a crescut constant n ultimii ani, atingnd 53% la nivel
naional i 63% la nivel urban n rndul persoanelor cu vrsta de peste 15 ani n aprilie 2013. n
acelai timp, apetitul romnilor pentru tablete i smartphone-uri este n continu cretere.
Vnzrile au cunoscut o important tendin ascendent n ultimii ani, smartphone-urile
15
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
ajungnd la o pondere de 25% din totalul pieei de telefoane mobile n uniti n 2012, iar
numrul de tablete vndute a crescut de aproape 5 ori n 2012 fa de 2011.
Aceste evoluii ncep s i pun amprenta nu doar asupra stilului de via al consumatorilor, ci
i asupra comportamentului lor de cumprare. Dac pn nu de mult magazinele i mediile
tradiionale de comunicare erau principalele surse de informare n vederea lurii deciziei de
cumprare, n prezent internetul este utilizat pe scar larg.
Un studiu desfurat de GfK Romnia pe un eantion reprezentativ pentru populaia urban
utilizatoare de Internet, cu vrste ntre 15 i 45 de ani, relev rolul important al internetului n
redefinirea comportamentului de cumprare. 70% dintre cei chestionai declar c Internetul a
devenit un instrument de cumprare foarte util, iar 44% menioneaz c reelele sociale au
devenit la fel de importante ca i alte surse de informaii pentru a face cele mai bune alegeri de
produse.
Accesarea site-urilor de comparare a preurilor, consultarea online a descrierilor detaliate ale
produselor i a recenziilor altor cumprtori, schimbul de informaii din reelele sociale, toate
acestea sunt activiti desfurate din ce n ce mai mult n vederea lurii celei mai bune decizii de
cumprare, care s aduc cea mai mare valoare cumprtorului. Astfel, accesul la surse multiple
de informare ne transform pe toi n cumprtori mult mai implicai i mai exigeni, mai dificil
de mulumit dect nainte, spune Raluca Rschip, Consumer Goods & Retail Director GfK
Romnia.
n afar de mediul online, treptat se dezvolt i alte medii de interaciune, cum ar fi cel prin
intermediul smartphone-urilor. Dac n momentul de fa smartphone-ul este folosit cu precdere
pentru a compara preuri (44% dintre deintorii care s-au informat online sau au cumprat
online n ultimele 6 luni), pentru a cuta informaii i recenzii (42%) i pentru a localiza
magazine (42%), i alte tipuri de comportamente ncep s apar: verificarea disponibilitii unui
produs (31%) sau scanarea de coduri QR (22%).
16
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
n acest mediu n care cumprtorul este mult mai contient de instrumentele pe care le are la
ndemn i mai implicat n procesul de cumprare, utiliznd tot mai multe prghii pentru a
maximiza valoarea pe care o obine, devine tot mai dificil pentru productori i pentru retaileri s
pstreze un nivel de loialitate ridicat.
De aceea, cunoaterea modului n care cumprtorii se informeaz i folosesc noile tehnologii,
a diversitii stimulilor cu care acetia intr n contact n procesul de cumprare, devine din ce n
ce mai important pentru asigurarea succesului pe pia, nu doar pentru a rspunde nevoilor
actuale ale cumprtorilor, ci i pentru a anticipa nevoi viitoare ntr-un peisaj din ce n ce mai
digitalizat.
II.3 HTML. Prezentare

Unul din primele elemente fundamentale ale WWW (World Wide Web) este HTML (Hypertext
Markup Language), care descrie formatul primar in care documentele sunt distribuite si vzute
pe Web. Multe din trasaturile lui, cum ar fi independenta fata de platforma, structurarea
formatrii si legaturile hypertext, fac din el un foarte bun format pentru documentele Internet si
Web.
Primele specificaiile de baza ale Web-ului au fost HTML, HTTP si URL.
HTML a fost dezvoltat initial de Tim Berners-Lee la CERN in 1989. HTML a fost vazut ca o
posibilitate pentru fizicienii care utilizeaza computere diferite si schimbe ntre ei informaie
utilizind Internetul. Erau prin urmare necesare citeva trasaturi: independenta de platforma,
posibiliti hypertext si structurarea documentelor.Independenta de platforma nseamn ca un
document poate fi afiat in mod asemntor de computere diferite, lucru vital pentru o audien
att de variat.
Hipertext nseamn ca orice cuvnt, fraza, imagine sau alt element al documentului vzut de un
utilizator (client) poate face referina la un alt document, ceea ce uureaz mult navigarea intre
17
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
multiple documente sau chiar in interiorul aceluiai document. Structurarea riguroasa a
documentelor permite convertirea acestora dintr-un format in altul precum si interogarea unor
baze de date formate din aceste documente.
Standardul oficial HTML este World Wide Web Consortium (W3C), care este afiliat la Internet
Engineering Task Force (IETF). W3C a enunat cteva versiuni ale specificaiei HTML, printre
care si HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0 si, cel mai recent, HTML 4.01. In acelai
timp, autorii de browsere, cum ar fi Netscape si Microsoft, au dezvoltat adesea propriile
"extensii" HTML in afara procesului standard si le-au incorporat in browserele lor. In unele
cazuri, cum ar fi tagul Netscape , aceste extensii au devenit standarde de facto adoptate de autorii
de browsere.
HTML 2.0, elaborat in Iunie 1994, este standardul pe care ar trebui sa-l suporte toate
browserele curente -- inclusiv cele mod text. HTML 2.0 reflecta concepia originala a HTML ca
un limbaj de marcare independent de obiectele existente pentru aezarea lor in pagina, in loc de a
specifica exact cum ar trebui sa arate acestea. Dac dorii sa fii siguri ca toi vizitatorii vor vedea
paginile aa cum trebuie, folosii tagurile HTML 2.0.
Specificaia HTML 3.0, Enunata in 1995, a ncercat sa dezvolte HTML 2.0 prin adugarea
unor faciliti precum tabelele si un mai mare control asupra textului din jurul imaginilor. Dei
unele din noutile HTML 3.0 erau deja folosite de autorii de browsere, multe nu erau nc. In
unele cazuri, taguri asemntoare implementate de autorii de browsere au devenit mai rspndite
dect tagurile "oficiale". Specificaia HTML 3.0 acum a expirat, deci nu mai este un standard
oficial.
In Mai 1996, W3C a scos pe piaa specificaia HTML 3.2, care era proiectata sa reflecte si sa
standardizeze practicile acceptate la scara larga. Deci, HTML 3.2 include tagurile HTML 3.0 ce
erau adoptate de autorii de browsere ca Netscape si Microsoft plus extensii HTML rspndite. In
Bilanul asupra HTML, W3C recomanda ca providerii de informaii sa utilizeze specificaia
HTML 3.2.Versiunile curente ale majoritii browserelor ar trebui sa suporte toate, sau aproape
18
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
toate aceste taguri.

De asemenea exista extensii Netscape si Microsoft care nu fac parte din specificaia HTML 3.2,
ori pentru ca sunt mai puin utilizate, ori au fost omologate dup apariia HTML 3.2. Pentru ca
navigatorul Netscape a fost printre primele browsere care suporta anumite taguri HTML 3.0, iar
Netscape deine in jur de 70% din piaa de browsere, muli au crezut eronat ca toate extensiile
Netscape (incluznd taguri ca si facilitai ca ferestrele) fac parte din HTML 3.0 sau HTML 3.2.
Documentele HTML sunt documente in format ASCII si prin urmare pot fi create cu orice
editor de text. Au fost, nsa, dezvoltate editoare specializate care permit editarea intr-un fel de
WYSIWYG dei nu se poate vorbi de WYSIWYG atta vreme cat navigatoarele afieaz acela i
document oarecum diferit, in functie de platforma pe care ruleaza. Au fost, de asemenea,
dezvoltate convertoare care permit formatarea HTML a documentelor generate (si formatate) cu
alte editoare. Evident conversiile nu pot pastra dect parial formatrile anterioare deoarece
limbajul HTML este nca incomplet.
Orice document HTML ncepe cu notaia <html> si se termina cu notaia </html>. Aceste
entitai se numesc in literatura de specialitate "TAG-uri". Prin convenie, toate informaiile
HTML ncep cu o parantez unghiular deschis " < " si se termin cu o parantez unghiular
nchisa " > ".
Tag-urile ntre aceste paranteze transmit comenzi ctre browser pentru a afia pagina ntr-un
anumit mod. Unele blocuri prezint delimitator de sfrit de bloc, n timp ce pentru alte blocuri
acest delimitator este opional sau chiar interzis.
Intre cele doua marcaje <html> si </html> vom introduce doua seciuni:
- seciunea de antet <head>...</head>
- corpul documentului <body>...</body>. Blocul <body>...</body> cuprinde coninutul
19
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
propriu-zis al paginii HTML, adic ceea ce va fi afiat in fereastra browser-ului.
Fig. 1.4 Structura unui document html.

Aplicnd cele spuse mai sus vom ajunge la urmatorul rezultat:
<html>
<head><head>
<body></body>
</html>
Tagul <head> conine, de obicei, elemente precum tagul <title> - ce semnific titlul paginii,
20
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
<script> - pentru a face referire la fisiere javascript folosite pentru a da dinaminictate paginii,
<link> - folosit pentru a face referire la fisiere css
ce contin informaii despre aspectul
documentului.
In general, documentul va avea urmatoarea structura a elementelor coninute in tagul <head>:
<html>
<head>
<title> Titlul paginii </title>
<script src=dinamism.js></script>
<link rel=stylesheet type=text./css href=stil.css >
</head>
<body>
</body>
</html>
Tagul <body> conine corpul documentului. Practic, in acest tag rezida toate elementele ce vor
fi afiate direct ctre utilizator. Pentru a structtura o pagina web cat mai eficient se folosete tagul
<div> ce marcheaz o poriune din document ale crei mrimi pot fi setate fie din interiorul
fiierului css sau aplicand atributele width si height acestui document.
Un exemplu practic de utilizare a tagului <div> este crearea unui meniu de navigare. Folosind
tagul <div> ntregul meniu va fi privit ca o singura entitate. Aceasta este structura unui fisier
HTML ce conine un meniu de navigare minimalist implementat prin intermediul tagului <div>.
<!DOCTYPE html>
<html>
<head>
<title> Titlul paginii </title>
<script src=dinamism.js></script>
21
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
<link rel=stylesheet type=text./css href=stil.css >

</head>
<body>
<div>
<ul>
<li> <a href=sectiunea1.html> Sectiunea 1 </a> </li>
</ul>
</div>
</body>
</html>
Dup cum putei observa, am folosit tagul <ul> ce marcheaza o lista neordonat pentru a
introduce elementele meniului de navigare. Fiecare element din meniu de navigare este introdus
prin intermediul tagului <li> ce marcheaza un element al unei liste.
De asemenea, pentru a crea legaturi intre numele unei seciuni si pagina acestei sectiuni am
folosit tagul <a> ce marcheaza un link spre o pagin, pentru a preciza pagina acionat de link
am folosit atributul href al acestui tag ce specific resursa indicat de link.
II.4 CSS. Prezentare
CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui document
HTML. Stilurile se pot ataa elementelor HTML prin intermediul unor fi iere externe sau n
cadrul documentului, prin elementul <style> i/sau atributul style.
Pentru a personaliza aspectul unui element dintr-un fisier HTML prin intermediu css este
necesara o modalitate de a face referire la acele elemente din interiorul unui fisier css. De obicei,
se folosesc atributede id si class ale unui tag html pentru a se face referire la el dintr-un fisier
css.
22
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
n exemplul urmtor modficm mrimea fontului unui paragraf si culoarea acestuia prin
intermediul unui fisser css.
#paragraf {
font-size: 23px;
font-color: blue;
}
Acesta este fiierul html asupra caruia aplicm stilul definit in interiorul fiierului css.
<!DOCYPE html>
<html>
<head>
<link rel=stylesheet type=text/css href=stil.css>
</head>
<body>
<p id=paragraf>
Acesta este un paragraf.
</p>
</boody>
</html>
Este demn de precizat ca este nevoie sa precedem id-ul elementului cu un # atunci cand dorim sa
facem referire la un element dupa id-ul acestuia.
O alta caracteristic des folosita a fiierelor css este poziionarea unui element. Bazndu-ne pe
acelai principiu expus n exemplul anterior putem poziiona un element dupa bunul plac
folosind atributele left, right, botton si top.
23
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
In exemplul urmtor vom poziiona o imagine la 200px de partea din stanga a paginii si 200px
de partea din dreapta a paginii.
.imagine {
left: 200px;
top: 200px;
position: absolute;
}
Aceasta este structura fiierului html asupra cruia am aplicat stilurile definite in fisierul css
expus mai sus.
<!DOCTYPE html>
<html>
<head>
<link rel=stylesheet type=text/css href=stil.css>
</head>
<body>
<img src=imagine.png class=imagine>
</body>
</html>
Dupa cu observati, de aceasta data am folosit atributul class al tagului <img> pentru a face
referire la acesta din interiorul fiierului css. De asemenea, se poate observa ca n interiorul
fiierului css am prefixat clasa imaginii cu un punct, acesta fiind modul prin care selectam un
element in funcie de valoarea atributului class.
Dei nu foarte folosit n pactic, exista o a doua modalitate de a personaliza un fisier html prin
intermediul css fara a face referire la resurse externe. Pentru aceasta va trebui sa utilizam tagul
24
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
<style> din interiorul tagului <head>.

Acesta este modul in care putem scrie exemplul prezentat anterior intr-un singur fisier:
<!DOCTYPE html>
<html>
<head>
<style type=text/css>
.imagine {
left: 200px;
top: 200px;
position: absolute;
}
</style>
</head>
<body>
<img src=imagine.png class=imagine>
</body>
</html>
II.5 JavaScript. Prezentare
II.5.1 Limbajul JavaScript
JavaScript (JS) este un limbaj de programare orientat obiect bazat pe conceptul prototipurilor.
Este folosit mai ales pentru introducerea unor funcionaliti n paginile web, codul Javascript
din aceste pagini fiind rulat de ctre browser. Limbajul este binecunoscut pentru folosirea sa n
construirea siturilor web, dar este folosit i pentru accesul la obiecte ncastrate (embedded
objects) n alte aplicaii. A fost dezvoltat ini ial de ctre Brendan Eich de la Netscape
25
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
Communications Corporation sub numele de Mocha, apoi LiveScript, i denumit n final
JavaScript.
n ciuda numelui i a unor similariti n sintax, ntre JavaScript i limbajul Java nu exist
nicio legtur. Ca i Java, JavaScript are o sintax apropiat de cea a limbajului C, dar are mai
multe n comun cu limbajul Self dect cu Java.
Codul scris in acest limbaj este introdus direct in interiorul fisierului HTML prin intermediul
tagului <script> sau se poate face referire la un fisier JavaScript prin intermediul atributului src
al tagului <script>. Prima variant este cea mai des ntalnit ntruct este ideala pentru scripturi
de dimensiuni mici, ce nu depasesc 200-250 de linii de cod. n mod normal, aa va arata un fisier
HTML ce conine si cod JavaScript:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type=text/javascript>
alert('alerta in javascript');
</script>
</body>
</html>
n exemplul de mai sus am folosit funcia alert pentru a demonstra modul de funcionare a unui
program simplu in JavaScript.
Definirea variabilelor
26
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
In JavaScript, precum si n alte limbaje de scripting, nu este necesar declararea tipului de date
atunci cand definim o noua variabil sau funcie. Totui, definirea unei noi variabile se face
folosindu-ne de cuvntul cheie var, nu puteam pur i simplu sa folosim acea variabila fara sa o fi
declarat.
Exemplu de definire a variabilelor in limbajul JavaScript:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
var a = 1;
a = string cu doua ghilimele;
a = 'string cu apostroafe';
a = 2.3;
</script>
</body>
</html>
n exemplul de mai sus am creat o variabila a i i-am am atribuit pe rand 4 valori de tip: intreg,
string, string delimitat de apostroafe i numr real. Precum majoritatea limbajelor de scripting,
JavaScript, pune la dispoziie dou modaliti sintactice de reprezentare a stringurilor: forma ce
face uz de ghilimele i forma ce folosete apostroafele.
Structuri decizionale n limbajul JavaScript
27
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
Din punct de vedere al structurilor decizionale JavaScript se aseamn foarte mult cu limbajele
C, C++ si Java. Exemplul urmator demostraza modul de folosire a celor mai frecvente structuri
decizionale, i anume: if/else/elseif i switch.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
if(true) {
alert('ramura de adevar');
}
else if(undefined) {
alert('ramura elseif');
}
else {
alert('ramura else');
}
switch(variabila) {
case true:
alert('cazul de adevar');
break;
default:
alert('nicio ramura nu a fost acoperita');
}
</script>
</body>
28
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
</html>
n exemplul de mai sus am introdus o strucura decizional de tip if/elseif/else ce apeleaza
funcia alert, pasndu-i ca i argumente stringurile: 'ramura de adevar', 'ramura elseif',
'ramura else', n funcie de ramura pe care se afla fluxul de execuie.
n cazul celui de al doilea exemplu, n care folosim structura switch, vom apela funcia alert
pasndu-i ca i argument stringul 'cazul de adevar', atunci cand fluxul de executie se afla in
cazul in care valoarea variabilei variabila este true.
Structuri repetitive
Precum i in limbajul de programare C, limbajul JavaScript pune la dispozitie 3 structuri
repetitive principale: do/while, while, for.
n exemplul urmator voi prezenta fiecare din cele 3 structuri repetitive:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
do {
alert(i);
i++;
} while(i < 10);
while(i > 8) {
alert(i);
29
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
i--;
}
for(var i = 0; i < 20; i++) {
alert(i);
}
</script>
</body>
</html>
Bucla do/while va rula pana cand valoarea varieabilei i va fi mai mare decat 10, la fiecare iteraie
se afieaz valoarea variabilei i i se incrementeaz cu o unitate.
Bucla while va rula pan cnd valoarea ei va fi mai mica de 8, la fiecare itera ie a buclei se va
afia valoarea variabilei prin intermediul functiei alert, iar valoarea variabilei i va fi
decrementat cu o unitate.
Bucla for va rula pn cnd valoarea variabilei i va fi mai mare de 20, la fiecare iteraie a buclei
valoarea variabilei va fi incrementata cu o unitate, iar valoarea acesteia va fi afiat ntr-o csu a
de dialog prin intermediul funciei alert.
Definirea functiilor
Limbajul JavaScript pune la dispoziie doua modaliti de definire a func iilor, prima
asemnndu-se foarte mult cu modul de definire a funciilor din limbajul php. Exemplul urmtor
ilustreaza modul de utilizare a celor doua modaliti.
<!DOCTYPE html>
30
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
<html>
<head>
</head>
<body>
function f() {
alert('f');
}
var g = function() {
alert('g');
}
</script>
</body>
</html>
Prima modalitate definete o funcie f ce va afia o casu de dialog cu textul f atunci cand este
apelat, iar a doua definete o variabila g caruia i este atribuit valoarea unei funcii anonime ce
afieaz o casuta de dialog cu textul g.
II.5.2 Prezentarea bibliotecii JQuery
Pentru a prelucra elementele DOM-ului prin intermediul JavaScript simplu vom ntampina o
serie de dificultati, ntrucat funciile folosite pentru realizarea acestor lucruri sunt implementate
diferit de producatorii de browsere, iar API-ul nativ pus la dispozitie de un browser pentru
efectuarea acestui lucru ofera o interfata neprietenoasa. Pentru a usura procesul de selectare si
modificare a elementelor DOM-ului vom folosi o biblioteca denumita JQuery.
Selectarea elementelor dupa id
31
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
Pentru a modifica elementele unui document HTML este nevoie de o modalitate de a le accesa,
interfata pus la dispoziie de JQuery se aseman foarte mult cu modul n care selectm
elementele HTML din limbajul CSS. n exemplul urmator voi selecta tagul <p> cu id-ul
paragraf si voi adauga in interiorul acestuia textul text.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
$(document).ready(function() {
$('#paragraf').append('text');
});
</script>
<div>
<p id=paragraf> </p>
</div>
</body>
</html>
Se observa apelul la metoda ready a documentului, scopul acestei aciuni este de a executa cod
JavaScript decat dupa ce browserul a terminat de incrcat pagina complet. Folosind metoda
append aplicata asupra elementului cu id-ul paragraf vom adauga textul text n interiorul
acestui element.
Tratarea evenimentelor
32
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
JQuery ne permite s legm diferite evenimente de elemente din fisierul HTML. Spre
exemplu, atunci cnd se face click pe un buton va fi apelat evenimentul click. JQuery ne permite
s executam poriuni de cod la executarea unui astfel de eveniment.
In exemplul de mai jos voi afisa o casuta de dialog de fiecare data cand se face click pe un
buton ce are atributul class egal cu buton.
<!DOCTYPE html>
<html>
<head></head>
<body>
$('.buton').click(function() {
alert('ati apasat butonul');
});
</script>
<div>
<button type=button class=buton> Buton </button>
</div>
</body>
</html>
II.6 Limbaje de scripting
II.6.1 Python. Prezentare
Python este un limbaj de programare dinamic multi-paradigm, creat n 1989 de programatorul

olandez Guido van Rossum. Van Rossum este i n ziua de astzi un lider al comunit ii de
dezvoltatori de software care lucreaz la perfecionarea limbajul Python i implementarea de
33
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
baz a acestuia, CPython, scris n C. Python este un limbaj multifunc ional folosit de exemplu
de ctre companii ca Google sau Yahoo pentru programarea aplicaiilor web, ns exist i o serie
de aplicaii tiinifice sau de divertisment programate parial sau n ntregime n Python.
Popularitatea n cretere, dar i puterea limbajului de programare Python au dus la adoptarea sa
ca limbaj principal de dezvoltare de ctre programatori specializai i chiar i la predarea
limbajului n unele medii universitare. Din aceleai motive, multe sisteme bazate pe Unix,
inclusiv Linux, BSD i Mac OS X includ din start interpretatorul CPython.
Python pune accentul pe curenia i simplitatea codului, iar sintaxa sa le permite
dezvoltatorilor s exprime unele idei programatice ntr-o manier mai clar i mai concis dect
n alte limbaje de programare ca C. n ceea ce privete paradigma de programare, Python poate
servi ca limbaj pentru software de tipul object-oriented, dar permite i programarea imperativ,
funcional sau procedural. Sistemul de tipizare este dinamic iar administrarea memoriei
decurge automat prin intermediul unui serviciu gunoier (garbage collector). Alt avantaj al
limbajului este existena unei ample biblioteci standard de metode.
Implementarea de referin a Python este scris n C i poart deci numele de CPython. Aceast
implementare este software liber i este administrat de fundaia Python Software Foundation.
Tipizare
Limbajele dinamice sunt deseori caracterizate prin tipizare dinamic, sunt interpretate, au
management de memorie automatizat (garbage collecting) i au un nivel nalt de abstractizare.
Tipul variabilelor nu este fixat la momentul declarrii acestora (de fapt, declararea variabilelor
nu este necesar ca n C), ci este determinat de interpretator dup coninutul lor sau dup
operaiile efectuate. ntr-un asemenea caz se vorbete de tipizare dinamic.
Avantajul acestei metode de a lucra cu tipuri este c codul produs este mai clar i mai intuitiv. De
exemplu
34
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
a = 10 # a va fi consider un numr ntreg (integer)

b = 11.5 # b va fi considerat un numr raional (double sau float)
c = "un rnd de text" # c va fi considerat un ir (string)
n ciuda tipizrii dinamice, Python este puternic tipizat, adic interpretatorul nu permite operaii
cu obiecte de tip diferit dac acestea nu sunt bine definite, cum ar fi opera iile de tip cast n C.
Exist totui unele excepii logice, cum ar fi n cazul numerelor ntregi i celor ra ionale (float),
ntre care sunt permise operaii ca adunarea sau mprirea, tipul rezultatului innd cont de
natura operaiei, cum se poate vedea mai jos
d = 10 + 11.5 # rezultatul va fi un numr raional, 21.5
e = "o brio" + 4 # aceast comand va genera o eroare.
Alt concept important n Python este cel al tipurilor mutabile i nemutabile. Aa cum implic
numele, datele cu un tip mutabil pot fi alterate dup iniializare, n vreme ce la date nemutabile
lucrul acesta este imposibil. Lund ca exemplu o list (mutabil), constatm c putem aduga
elemente la list sau le putem modifica fr probleme. n cazul unui ir de caractere (nemutabil),
acest lucru nu este permis:
lista_mea = ["mr", "par"]
lista_mea.append("strugure") # adaug la list
print lista_mea[2] # afiaz: strugure
irul_meu = "varz"
irul_meu[0] = "b" # schimb cuvntul n "barz" -> Eroare
Structuri de date
Python ofer tipuri tradiionale de date, cum ar fi numrul ntreg (integer, int) sau cel ra ional
35
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
(float), dar introduce totodat i concepte noi.

De exemplu, un grad mare de flexibilitate l ofer listele (tablourile) n Python. Acestea nu sunt
statice, ci pot conine orice tipuri de date (n cadrul aceleiai liste) i pot fi modificate pe loc
adugnd i eliminnd elemente fr a declara sau utiliza funcii de manipulare a memoriei.
lista_mea = [10, "ir de caractere", variabil, ["alt", "list"], chiar_ i_o_func ie]
Alte structuri de date sunt tuplurile/perechile (tuples) i dicionarele (dictionaries, mappings).

Tuplurile sunt liste care au un numr prestabilit de elemente, i nu pot fi modificate par ial.
Tuplurile pot fi utilizate n cazuri n care este nevoie de o anumit structur de date specializat,
de exemplu coordonate n spaiul cartezian. Dicionarele sunt liste neordonate n care fiecare
element are asociat o cheie, care poate fi numr sau ir de caractere. Dic ionarele au foarte multe
aplicaii, inclusiv crearea structurilor de tip hash-tables.
Stil
Python este un limbaj multi-paradigm, concentrndu-se asupra programrii imperative,
orientate pe obiecte i funcionale, ceea ce permite o flexibilitate mai mare n scrierea aplicaiilor.
Din punctul de vedere al sintaxei, Python are un numr de contrucii i cuvinte cheie cunoscute
oricrui programator, dar prezint i un concept unic: nivelul de indentare are semnifica ie
sintactic. Blocurile de cod sunt delimitate prin simpl indentare.
n C un astfel de blocuri sunt deseori desemnte prin acolade, {<cod>}, dar n Python nu este
nevoie de astfel de construcii. Nivelele de indentare ndeplinesc aceast funcie. Aceast
importan a indentrii este foarte suprinztoare pentru muli utilizatori noi ai limbajului Python,
chiar dac sunt programatori cu experien. Dar o astfel de utilizare a indentrii permite codului
s fie mai uor de citit i mai compact. Programatorii cu experien vor indenta implicit codul
surs, oricare ar fi limbajul, fiindc astfel se permite structurarea codului surs i eviden ierea
36
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
funcionalitii. Python face din aceast deprindere folositoare n acest sens o cerin strict.
O impunere similar exist i n limbajul de programare Java, care for eaz programatorii s
delimiteze clasele n fiiere aparte, din motive de organizare i sporire a eficien ei de scriere a
softului n echipe.
Biblioteci i Extindere
Includerea tuturor acestor structuri, precum i a funciilor ce permit manipularea i prelucrarea
lor, precum i multe alte biblioteci de funcii sunt prezente datorit conceptului Batteries
Included, ce poate fi explicat prin faptul c Guido van Rossum i comunitatea ce s-a format n
jurul limbajului cred c un limbaj de programare nu prezint utilitate practic dac nu are un set
de biblioteci importante pentru majoritatea dezvoltatorilor.
Din acest motiv Python include bibioteci pentru lucrul cu fiiere, arhive, fiiere XML i un set
de biblioteci pentru lucrul cu reeaua i principalele protocoale de comunicare pe internet (HTTP,
Telnet, FTP). Un numr mare de platforme Web sunt construite cu Python. Abilit ile limbajului
ca limbaj pentru programarea CGI sunt n afara oricror dubii. De exemplu YouTube, unul din
site-urile cu cea mai ampl cantitate de trafic din lume, este construit pe baza limbajului Python.
Totui, Python permite extinderea funcionalitii prin pachete adiionale programate de teri
care sunt axate pe o anumit funcionalitate. De pild, pachetul wxPython con ine metodele i
structurile necesare crerii unei interfee grafice.
Popularitatea limbajului este n cretere ncepnd cu anul 2000, datorit faptului c Python
permite crearea mai rapid a aplicaiilor care nu cer viteze nalte de procesare a datelor. De
asemenea este util ca limbaj de scriptare, utilizat n cadrul aplica iilor scrise n alte limbaje.
Modulele (bibliotecile) Python pot fi de asemenea scrise n C, compilate i importate n Python
pentru a mri viteza de procesare.
37
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
II.6.2 Frameworkul web Flask
Spre deosebire de PHP, Python nu ofer suport direct pentru dezvoltarea aplicaiilor web,
pentru a dezvolta aplicaii web in python este necesar un framework web ce va pune la
dispozitie toate funciile i dependinele necesare dezvoltrii unei aplicaii web.
Elementele de baza puse la dispozitie de Flask sunt: serverul web folosit pentru efectuarea
testelor, template engine-ul si o bibliotec vasta de funcii uzuale n dezvoltarea unei aplicatii
web.
Structura unei aplicaii web dezvoltate folosind Flask
Exemplul urmtor ilustreaza structura de baza a unei aplicaii scrise in flask:
from flask import Flask

from flask import render_template
app = Flask(__name__)
@app.route('/index')
def index():
return render_template('index.html')
Dupa cum vedei, este necesar importarea clasei Flask i a funciei render_template.
Variabila app va fi iniializat drep un obiect de tip Flask, acest obiect va conine toate datele ce
in de configurarea aplicatiei.
38
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
Functia render_template va procesa templateul al crui nume i este pasat ca i argument si va
returna sub forma unui string coninutul acestuia. Motivul folosirii unei astfel de metode este
pentru a permite utilizarea structurilor de control ce permit crearea templateurilor ntr-un mod
dinamic.
Folosind decoratorul app.route nregistram funcia index drept un view. Astfel, funcia index
va fi apelat de fiecare dat cand un client solicit resursa /index.
De asemenea, Flask permite si introducerea variabilelor n URL si selectarea metodei aferente

unei rute. Exemplul urmator demonstreaza aceste lucruri:

@app.route('/utilizator/<int:id>', methods=['GET', 'POST'])
def utilizator():
return render_template('pagina_utilizator.html')
Din exemplul prezentat mai sus putem observa ca ruta utilizator contine in URL o variabila de
tip integer ce semnifica id-ul utilizatorului. De asemenea, puteam observa ca metodele aferente
acestei rute sunt GET si POST. In mod standard, fiecare ruta permite accesul doar prin metoda
GET, folosirea metodei post este necesara decat dac dorim sa procesm un formular.
Prezentarea template engineului
Pentru a procesa templateurile intr-un mod dinamic este necesar folosirea unui template
engine ce implementeaza structuri de control de baza. Template engineul folosit de flask se
39
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
numeste Jinja2 i pune la dispoziie majoritatea structurilor de control ntlnite n limbajul
Python, asemnndu-se foarte mult si din punct de vedere sintactic.
Exemplul urmtor ilustreaza un template ce genereaza in mod dinamic o list HTML iternd
elementele dintr-o lista, pentru o mai buna ntelegere am inclus i codul responsabil cu servirea
cererilor.
@app.route('/lista')
lista = [1, 2, 3]
return render_template('lista.html', lista=lista)
Acesta este templateul
<!DOCTYPE html>
<html>
<head></head>
<body>
<ol>
{% for element in lista %}
<li> {{ element }} </li>
{% endfor %}
</ol>
</body>
</html>
40
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
Dupa cum se poate observa stuctura for folosit n template engine se aseaman foarte mult cu
cea folosit n limbajul Python. Demn de men ionat este si faptul c strucurile de control sunt
scrise n interiorul elementelor {% i %}, iar atunci cnd dorim sa accesm valoarea unui obiect
vom scrie numele acestuia intre elementele {{ i }}.
II.6.3 Administrarea bazelor de date cu SQLAlchemy
SQLAlchemy este un ORM(Object Relational Mapper) ce permite efectuarea de interogri

fara a mai scrie cod SQL. Folosind SQLAlchemy se va crea o relatie intre baza de date si modul
in care sunt reprezentate atributele clasei ce mosteneste clasa pusa la dispozitie de SQLAlchemy.
Crearea tabelelor n SQLAlchemy

n SQLAlchemy tabelele sunt reprezentate de clase ce motenesc clasa db.Model.
Astfel, la rularea scriptului ce se ocupa de crearea bazei de date, SQLAlchemy, va crea tabelele
n funcie de clasele ce mostenesc clasa db.Model.
Pentru a defini cmpurile unui tabel vom iniializa fiecare atribut al clasei ce motenete clasa
db.Model cu instane ale clasei db.Column.
Urmatorul exemplu ilustreaza conceptele explicate mai sus:
class Utilizator(db.Model)
id = db.Column(db.Integer, primary_key=True)
nume = db.Column(db.String, nullable=False)
prenume = db.Column(db.String, nullable=False)
parola = db.Column(db.Srtring, nullable=False)
41
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
def __init__(self, nume, prenume, parola):

self.nume = nume
self.prenume = prenume
self.parola = parola
Dup cum se poate vedea, definim o clasa denumita Utilizator ce motenete clasa db.Model.
Clasa Utilizator contine urmatoarele atribute: id contine o instanta a clasei db.Column create
pentru un cmp de tip ntreg ce este i cheie primar, nume ce contine o instan a clasei
db.Column iniializat pentru un camp de tip string a crui valoare nu poate fi nul, prenume ce conine o instana a clasei db.Column iniializat pentru un camp de tip string ce nu poate
conine o valoare nul, parola conine o instan a clasei db.Column iniializat pentru un
element de tip string ce nu poate conine o valoare nula.
Un alt avanatj al SQLAlchemy este faptul c nu constrnge utilizatorul la folosirea unui anumit
sistem de management al bazelor de date. In general, utilizatorii SQLAlchemy folosesc
PostgreSQL.
Executarea interogarilor
Avand in vedere faptul ca clasele ce motenesc clasa db.Model sunt reprezentarile tabelelor din
baza de date, acestea conin i metode speciale folosite pentru a efectua interogari.
Exemplul urmtor demonstreaza cele mai frecvent utilizate meode pentru efectuarea unei
interogri:
utilizatori = Utilizator.query.all()
george = Utilizator.query.filter_by(name='geroge').first()
utilizatorul1 = Utilizator.query.get(1)
42
DAVID LAURENIU
ROLUL I IMPORTANA
INTERNETULUI I A
PAGINILORWEB
n primul exemplu atribuim variabilei utilizatori o lista ce va conie toate obiectele de tip
Utilizator din baza de date.
n al doilea exemplu atribuim variabilei george ca i valoare obiectul returnat de efectuarea unei
interogri dup cmpul nume.
n al treilea exemplu atribuim vaiabilei utilizatorul1 valorea returnat de interogarea efectuata
cu scopul de a obine elementul cu id-ul 1.
Pentru a aduga informaii noi n baza de date va trebui sa adugam obiectul modificat sau nou
creat in sesiunea pusa la dispozitie de SQLALchemy dupa ce am terminat de adaugat elementele
noi sau modificate n sesiune va trebui sa confirmm schimbarea.
Exemplul urmtor ilustreaza introducerea unui nou utilizator n baza de date
utilizator = Utilizator(nume='David', prenume='laurentiu', parola='123444')

db.session.add(utilizator)
db.session.commit()
Apelul la metoda db.session.commit arat acordul nostru cu privire la introducerea noului

utilizator adaugat n sesiune n baza de date.
43
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
III. ARHITECTURA MAGAZINULUI WEB
III.1 Prezentarea magazinului
Magazinul web creat in cadrul lucrrii de licenta este unul ce se axeaza pe o gam cat mai larga
de produse, oferind suport pentru o varietate de produse din diverse categorii. Pagina web este
mprit in 3 zone: bara de navigare, zona de coninut si subsolul paginii.
Bara de navigare prezentat in figura 3.1 cuprinde: numele magazinului online numele fiind
un link la pagina de index, butonul de acas, butonul pentru pagina de contact, butonul ce
afieaz meniul cu categoriile disponibile, casua de cutare i butoanele de ieire din cont i de
interogare a cosului.
Fig. 3.1 Bara de navigare
Zona de coninut difer n funcie de pagina pe care se afla utilizatorul. Spre exemplu, pe pagina
de cos se vor afisa elementele aflate in cos, valoarea acestora si meoda de plata.
44
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
Fig. 3.2 Coninutul paginii de co
Zona de subsol conine o bar de navigare ce cuprinde numele creatorului magazinului web
Fig. 3.3 Coninutul subsolului

In continuare, voi prezenta fiecare pagin din cadrul aplicaiei.
Pagina de index, conine un carusel cu imagini ale celor mai noi 3 produse, iar mai jos con ine
informaii detaliate despre produse, fiecare imagine este un link catre pagina produsului.
45
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
Fig. 3.4 Pagina de index

Pagina de contact, contine un formular de contact n care utilizatorul i va introduce datele de
contact si mesajul pe care dorete s-l transmit administratorului siteului. Dac formularul
completat de utilizator a fost valid, utilizatorul va fi redirecionat pe o noua pagina in care ii este
confirmat trimiterea cu succes a emailului, iar un email cu mesajul utilizatorului va fi expediat
ctre administratori.
46
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
Fig. 3.5 Formularul de contact
Fig. 3.6 Trimiterea cu succes a unui mesaj
47
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
Fig. 3.7 Recepionarea mesajului de catre administrator

Pagina de prosduse, va conine, n functie de categoria de produse selectat, toate produsele
disponibile in baza de date din acea categorie. Produsele vor fi afisate in panouri mici ce vor
conine: preul, poza cu link spre pagina produsului i butonul de adugare n co.
Odat ce un produs a fost adugat n co. o casu de dialog ce va confirma acest lucru va fi
afiat.
Fig. 3.8 Adugarea unui produs n co
48
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
Pagina de cutare, va conine toate rezultatele cutrii efectuate prin intermediul csuei de
cutare coninut n meniul de navigare. Rezultatele cautarii vor fi structurate astfel: poza
produsului cu link la pagina produsului, descrierea prosului, preul acestuia si disponibilitatea
produsului.
Fig. 3.9 Cutarea unui produs

Pagina de nregistrare, conine un formular cu datele pe care un utilizator trebuie sa le
completeze pentru a efectua cumprturi de pe aceast platforma. Dupa completarea datelor,
utilizatorului i se va trimite un email cu un cod de activare a contului, odata ce utilizatorul va
accesa linkul trimis prin email contul acestuia va fi activat.
49
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
Fig. 3.10 Pagina de nregistrare
Fig. 3.11 Confirmarea trimiterii emailului ce conine codul de activare
50
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
Fig.3.12 Codul de activare trimis prin email
Fig. 3.13 Activarea cu succes a contului
Pagina de autentificare, conine un formular cu 2 campuri: numele de utilizator si parola. Odata

trimis acest formular, utilizatorul va fi autentificat i va putea sa efectueze cumparaturi de pe
acest site.
51
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
Fig. 3.14 Autentificarea unui utilizator
Pagina de co, va conine toate produsele aflate n co la momentul accesrii paginii i va oferi
utilizatorului posibilitatea s modifice cantitatea cumprat din acel produs, s tearg produsul,
s vizualizeze n timp real costul acelui produs i costul ntregii tranzacii. Dup ce utilizatorul
i-a setat cantitatea dorit dintr-un anumit produs i a selectat i metoda de cumprare, va trebui
s introduc datele de transport, iar un email cu factura va fi trimis.
Fig. 3.15 Pagina de co
52
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
Fig. 3.16 Introducerea datelor de transport
53
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
Fig. 3.17 Structura emailului ce conine factura
III.2 Strucura backendului aplicaiei
Pe partea de server, aplicaia este mparit n 21 de rute menite sa deserveasca fiecare dintre
paginile prezentate mai sus, att si apelurile efectuate prin AJAX pentru a nu mai fi necesar
rencarcarea paginii.
Demn de prezentat sunt urmatoarele rute:
Ruta pentru pagina de index, trimite uilizatorului pagina de index pasnd funciei
render_template i o lista cu cele mai noi 3 produse in baza de date.
@app.route('/')
@app.route('/index')
def index():
promotionalProducts = Product.query.paginate(1, 3, False)
return render_template('index.html',
promotionalProducts=promotionalProducts)
Ruta pentru pagina de contact, i va returna utilizatorului pagina de contact dac acesta o
acceseaz pentru prima dat sau dac formularul completat de acesta este unul invalid. Dac
formularul completat de utilizator este unul valid, atunci se va realiza un apel la functia
sendMail pentru a-i trimite un email cu mesajul utilizatorului administratorului siteului. Func ia
sendMail este implementata in interiorul fiierului helper.py i este o interfa mult mai
54
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
accesibil a extensiei flask-mail ce necesit o cantitate mult mai mare de cod pentru transmiterea
unui mail. De asemenea, se poate observa ca funcia render_template este folosit pentru
generarea templaterurilor pentru mailuri, astfel putem scrie intr-un fisier HTML ablonul pentru
un email.
@app.route('/contact', methods=['GET', 'POST'])
def contact():
form = ContactForm()
if request.method == 'POST' and form.validate():
sendMail(subject='Conact',
sender=app.config['ADMINS'][0],
recipients=app.config['ADMINS'],
messageBody='-----',
messageHtmlBody=render_template('contact_mail.html',
email=form.email.data,
name=form.name.data,
message=form.message.data)
)
return render_template('message_send_successfully.html')
return render_template('contact.html', form=form)
Ruta pentru pagina de cutare, va returna templateul pentru pagina de cautare pasandu-i funciei
render_template ca i argument o lista de produse ce se potrivesc cu elementul cautat de
utilizator.
@app.route('/search', methods=['POST'])
def search():
products = Product.query.all()
productsToRender = []
for product in products:
55
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
if request.form["search"] in product.name:
productsToRender.append(product)
return render_template('search_page.html', products=productsToRender)
Ruta pentru pagina de inregistrare va verifica validitatea formularului de nregistrare completat
de catre utilizator i, n funcie de validitatea acestuia, va trimite un email cu codul de activare
sau l va ateniona pe utilizator s recompleteze corespunztor formularul.
@app.route('/singup', methods=['GET', 'POST'])
def singup():
form = SingupForm(request.form)
if request.method == 'POST' and form.validate():
newPendingUser = PendingUser(pendingId=str(uuid4()),
name=form.name.data,
username=form.username.data,
password=md5(form.password.data).hexdigest(),
email=form.email.data
)
db.session.add(newPendingUser)
db.session.commit()
mailUrl = generateUrl(
route=url_for('validateUser',
pendingUserId=newPendingUser.pendingId
),
hostname=request.host
)
sendMail(subject="Validation Mail",
56
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
recipients=[newPendingUser.email],
messageBody=render_template("confirmation_mail_body.html",
confirmationLink=mailUrl
),
messageHtmlBody=render_template(
"confirmation_mail_html_body.html",
confirmationLink=mailUrl
)
)
flash("User " + form.name.data + " was added")

return render_template("before_finish_singup.html",
email=form.email.data
)
flashErrors(form.errors, flash)
return render_template('singup.html',
form=form
)
Odat ce un utilizator a completat corect formularul de nscriere, acesta va fi adaugat intr-o

baza de date temporar pana ce linkul ce activare va fi accesat si va fi mutat in baza de date
primara. Ruta ce se ocupa de activarea conturilor va verifica validitatea codului de activare si il
va muta pe noul utilizator in baza de date primara in cazul in care codul de activare a fost valid.
n cazul n care codul de activare nu este valabil, utilizatorul va fi redirec ionat spre o alt pagin
n care i se va spune acest lucru.
57
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
@app.route('/validate/<pendingUserId>')
def validateUser(pendingUserId):
pendingUser = PendingUser.query.filter_by(pendingId=pendingUserId).first()
if pendingUser is None:
return render_template("invalid_activation_link.html")
user = User(name=pendingUser.name,
email=pendingUser.email,
password=pendingUser.password,
username=pendingUser.username
)
db.session.add(user)
db.session.delete(pendingUser)
db.session.commit()
return render_template("successfull_activation.html",
username=user.username
)
Ruta pentru pagina de login, va verifica validitatea formularului de login i, n funcie de acest
aspect, va decide daca utilizatorul va fi autentificat sau daca va fi redirec ionat spre pagina de
autentificare situaie n care se ajunge n momentul completrii incorecte a formularului de
autentificare.
@app.route('/login', methods=['GET', 'POST'])
def login():
form = LoginForm()
if request.method == "POST" and form.validate():
user = User.query.filter_by(username=form.username.data,
58
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
password=md5(form.password.data).hexdigest()
).first()
if not user is None:
login_user(user)
flash('Te-ai logat cu succes')
return redirect(url_for('index'))
else:
flash("Numele de utilizator sau parola nu sunt corecte!")
flashErrors(form.errors, flash)
return render_template("login.html",
form=form
Ruta pentru pagina de categorii, acesta rut va returna un template ce va conine toate produsele
dintr-o categorie suportat de magazin.
@app.route('/categories/<string:category>/<int:page>')
def categories(category, page):
products = Product.query.filter_by(category=category).paginate(page,
PRODUCTS_PER_PAGE, False
)
return render_template("products.html",
products=products
)
Ruta pentru pagina produsului, aceasta rut va reurna un template ce va contine toate datele
stocate in baza de date despre un anumit produs.
@app.route('/product_page/<int:productId>')
def productPage(productId=1):
product = Product.query.get(productId)
59
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
return render_template("product_page.html",
product=product
)
Ruta pentru pagina de co, aceasta rut va returna un template ce con ine toate produsele
coninute n co, dar i toate metodele de transport stocate n baza de date.
@app.route('/cart')
def cart():
form = AddressForm()
return render_template("products_in_cart.html",
cart=g.cart.getProductData(),
form=form
)
Ruta de updatare a coului, este folosit pentru a adauga un produs nou n co atunci cnd
apsm butonul de adugare n co. Aceast rut este folosit n apelurie AJAX pentru a nu mai
fi necesar rencrcarea paginii atunci cand se va face click pe butonul de adaugare n co.
@app.route('/update_cart', methods=['GET', 'POST'])
def updateCart():
g.cart.updateQuantity(int(request.form["id"]),
int(request.form["quantity"])
)
session["cart"] = g.cart.items
session.modified = True
app.save_session(session, make_response("dummy"))
product = Product.query.get(int(request.form["id"]))
return jsonify(total=product.price *
60
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
int(request.form["quantity"])
)
Ruta pentru verificare a disponibilitii unui produs, este folosit
atunci cand utilizatorul
updateaza cantitatea unui produs pentru a verifica daca cantitatea introdus de utilizator este n
concordan cu valoarea stocului acelui produs.
@app.route('/check_stock', methods=['GET', 'POST'])
def checkStock():
product = Product.query.get(int(request.form["id"]))
return jsonify(stock=product.stock)
Ruta responsabila cu calcularea valorii coului, este folosita pentru a spori securitatea i a evita
eventualele atacuri informatice realizate de utilizatorii ru voitori. Este mult mai sigur sa
calculm valoarea coului pe server dect s-i cerem browserului utilizatorului s o fac pentru
noi.
@app.route('/get_cart_total', methods=['GET', 'POST'])
def getCartTotal():
total=g.cart.getTotal()
return jsonify(total=round(total, 2))
Ruta pentru tergerea unui produs din co, folosit pentru a terge un produs din cos prin
intermediul AJAX.
@app.route('/delete_from_cart', methods=['POST'])
def deleteFromCart():
g.cart.deleteFromCart(int(request.form['id']))
session["cart"] = g.cart.items
return jsonify(status="ok")
61
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
Ruta pentru setarea metodei de transport, folosit pentru a selecta firma dorita pentru a transporta
produsul.
@app.route('/set_shipping_method', methods=['POST'])
def setShippingMethod():
for shippingMethod in g.shippingMethods:
if shippingMethod.name == request.form["name"]:
g.cart.updateShipping(shippingMethod.price)
session["shipping"]["price"] = g.cart.shipping
session["shipping"]["name"] = request.form["name"]
return jsonify(status="fail")
Ruta pentru obtinerea numelui firmei de transport, folosita pentru a menine valoarea firmei de
transport aleas de utilizator de fiecare dat cnd acesta prsete pagina.
@app.route('/get_shipping_method', methods=["POST"])
def getShippingMethod():
return jsonify(name=session["shipping"]["name"])
Ruta pentru plasare a unei comenzi, va verifica validitatea datelor de livrare completate n
formular de ctre utilizator, iar dac acestea sunt valide va trimite un email cu factura
administratorului i unul clientului. n caz contrar il va avertiza pe utilizator de invaliditatea
datelor introduse de el.
@app.route('/place_order', methods=["POST"])
def placeOrder():
form = AddressForm(request.form)
if form.errors:
return jsonify(status='fail', errors=form.errors)
62
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
for shippingMethod in g.shippingMethods:

if shippingMethod.name == request.form["shipping"]:
g.cart.updateShipping(shippingMethod.price)
userData = UserData(phone=form.phone.data,
email=form.email.data,
region=form.region.data,
city=form.city.data,
address=form.address.data)
userData.userId = g.user.id
db.session.add(userData)
db.session.commit()
# The third argument was an architerchtural mistake.
order = Order(g.cart.getTotal(), g.user.id, 1)
order.address = userData.id
db.session.add(order)
db.session.commit()
cart = []
for item in g.cart.items:
cart.append({
'quantity': g.cart.items[item]['quantity'],
'name': Product.query.get(item).name,
'price': g.cart.items[item]['price']
})
sendMail(subject='Factura',
recipients=[form.email.data, app.config['ADMINS'][0]],
messageBody='----',
messageHtmlBody=render_template('bill.html',
cart=cart,
63
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
name=g.user.name,
total=g.cart.getTotal(),
phone=form.phone.data,
region=form.region.data,
city=form.city.data,
address=form.address.data,
shipping=request.form['shipping'],
shippingCost=ShippingMethods.query.filter_by(
name=request.form['shipping']).first().price)
)
session["cart"] = {}
III.3 Structura bazei de date
Aplicaia conine 11 clase ce motenesc clasa db.Model i au drept corespondent un tabel n

baza de date.
n continuare, voi prezenta structura celor mai importante din aceste 11 clase.
Clasa utilizator, conine cmpuri pentru: nume, prenume, parol, email, dar i un cmp userData
ce nu este direct reprezentat n baza de date, dar este specific SQLAlchemy. Scopul campului
userData din cadrul clasei User este de a accesa datele din tabelul UserData fra a mai fi nevoie
sa executm o interogare.
class User(db.Model):
__tablename__ = 'user_table'
64
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
username = db.Column(db.String, nullable=False)
name = db.Column(db.String, nullable=False)
password = db.Column(db.String, nullable=False)
email = db.Column(db.String, nullable=False)
userData = db.relationship('UserData', backref='user', lazy='dynamic')
def is_authenticated(self):
return True
def is_active(self):
return True
def is_anoymous(self):
return False
def get_id(self):
return unicode(self.id)
def __init__(self, username, name, password, email):
self.username = username
self.name = name
self.password = password
# An user should have a primary email address.
self.email = email
def __repr__(self):
return "<User(%r, %r, %r)>" % (self.username, self.name, self.password)
65
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
Meodele is_authenticated, is_active, is_anonymous si get_id sunt folosite cu scopul de face
clasa User compatibil cu extensia flask-mail.
Clasa UserData, este folosit pentru a stoca date despre locaia n care se va expedia produsul
unui utilizator. Motivul pentru care nu-l constrngem pe utilizator sa-i selecteze adresa de
transmitere a coletului de la nceput este pentru ca aceasta poate efectua o comanda de pe o
adresa diferita. Intre clasa User i clasa UserData este o relaie de tip one-to-many, ntrucat un
utilizator poate avea mai multe adrese.
class UserData(db.Model):
__tablename__ = 'userdata_table'
phone = db.Column(db.String)
email = db.Column(db.String)
region = db.Column(db.String)
city = db.Column(db.String)
address = db.Column(db.String)
userId = db.Column(db.Integer, db.ForeignKey('user_table.id'))
def __init__(self, phone=None, email=None, region=None, city=None,
address=None):
self.phone = phone
self.email = email
self.region = region
self.city = city
self.address = address
def __repr__(self):
return "<UserData(%r, %r, %r, %r, %r)>" % (self.phone, self.email,
self.region, self.city, self.address)
66
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
Clasa PendingUser, este folosit pentru a stoca temporar un utilizator pn n momentul

accesrii linkului de activare, moment n care utilizatorul va fi mutat n baza de date principal
permanent. Motivul folosirii acestui sistem de activare prin email este pentru a evita crearea de
conturi ce nu vor fi niciodat folosite.
class PendingUser(db.Model):
__tablename__ = 'pending_user_table'
username = db.Column(db.String, nullable=False)
password = db.Column(db.String, nullable=False)
email = db.Column(db.String, nullable=False)
pendingId = db.Column(db.String, nullable=False, unique=True)
registrationDate = db.Column(db.DateTime, nullable=False)
def __init__(self, pendingId, username, name, password, email):
self.username = username
self.name = name
self.password = password
self.email = email
self.pendingId = pendingId
self.registrationDate = datetime.utcnow()
Clasa Product, este folosita cu scopul de reprezenta in baza de date un produs. Campurile:
comments, pictures i specifications nu vor fi reprezentate in baza de date. Scopul lor este s i
elimine nevoia executrii unei noi interogri.
class Product(db.Model):
67
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
__tablename__ = 'product_table'
category = db.Column(db.String, nullable=False)
description = db.Column(db.String, nullable=False)
price = db.Column(db.Float, nullable=False)
stock = db.Column(db.Integer, nullable=False)
comments = db.relationship('ProductComment', backref='product',
lazy='dynamic'
)
pictures = db.relationship('ProductPictures', backref='product',
lazy='dynamic'
)
specifications = db.relationship('ProductSpecifications',
backref='product',
lazy='dynamic'
)
def __init__(self, name, price, stock):

self.name = name
self.price = price
self.stock = stock
def __repr__(self):
return "<Product(%r, %r, %r)>" % (self.name, self.price, self.stock)
Clasa ProductPictures, este folosit pentru a reprezenta o poza a unui produs. ntruct un
produs poate avea mai multe poze se creaza o relatie de tip one-to-many intre aceste 2 clase.
68
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
class ProductPictures(db.Model):
__tablename__ = "product_pictures_table"
link = db.Column(db.String, nullable=False)
date = db.Column(db.DateTime, nullable=False)
productId = db.Column(db.Integer, db.ForeignKey('product_table.id'))
def __init__(self, link, productId):
self.link = link
self.productId = productId
self.date = datetime.utcnow()
def __repr__(self):
return "<ProductPicures(%r)>" % self.link
Clasa ProductComment, este folosita pentru a reprezenta n baza de date un comentariu postat
de un utilizator la adresa unui produs. Ca i in cazul anterior, se creaza o relatia one-to-many
ntre clasele Product si ProductComment, ntruct un produs poate avea mai multe comentarii.
class ProductComment(db.Model):
__tablename__ = 'product_comments_table'
comment = db.Column(db.String, nullable=False)
userId = db.Column(db.Integer, db.ForeignKey('user_table.id'))
def __init__(self, comment, userId):
self.comment = comment
self.userId = userId
69
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
def __repr__(self):
return "<ProductComment(%r)>" % self.comment
Clasa ProductSpecifications, este folosit pentru a stoca o specificaie a unui produs. ntruct
magazinul suporta diferite tipuri de produse nu se poate uniformiza ntr-un mod eficient modul n
care sunt reprezentate specificaiile unui produs. Din acest motiv am ales s introduc o nou
tebela ce va conine cte o specificaie, creandu-se, astfel, o relatie one-to-many ntre clasa
Product i ProductSpecifications.
class ProductSpecifications(db.Model):
__tablename__ = 'product_specification_table'
data = db.Column(db.String, nullable=False)
def __init__(self, productId, name, data):
self.productId = productId
self.name = name
self.data = data
def __repr__(self):
return "ProductSpecfication(%r)" % self.name
Pentru a aduga un nou produs n baza de date va trebui sa instan iem clasa Product i
ProductPictures ntruct multe din funcionalitile aplicaiei nu vor funciona n lipsa unei
poze. Odata creat o nou instan a clasei Product este necesar adugarea ei n baza de date.
Instata clasei ProductPictures poate fi adaugat in baza de date dect dupa ce a fost adaugat
cea a clasei Product ntrucat este necesar id-ul produsului, iar id-ul este generat dect atunci
70
DAVID LAURENIU
ARHITECTURA
MAGAZINULUI WEB
cand produsul este incrcat n baza de date.

Urmtorul exemplu dovedete conceptele ilustrate mai sus:
produs = Produs('cafea', 2.33, 23)
produs.descriere = 'cafea'
produs.category = 'cafea'
db.session.add(produs)
db.session.commit()
poza = ProductPictures('http://i.imgur.com/poza', produs.id)
db.session.add(poza)
db.session.commit()
71
IV. CONCLUZII
Aceast lucrare a prezentat procesul
de dezvoltare a unei aplicaii web de complexitate
medie, dar i uneltele moderne folosite pentru ducerea la bun sfarit a unei astfel de aplicaii.
Proiectul prezentat in acest document se difereniaz de celelalte din categoria sa prin folosirea
unei noi tehnologii, relativ noi pe partea de server limbajul Python i biblioteca Flask.
Avantajul acestei diferenieri fa de aplicatiile web clasice ce folosesc, de obicei, un limbaj
precum Php este uurina n dezvoltare.
Dezavantajele acestei opiuni sunt lipsa unor extensii ce ar putea s ajute programatorul n
procesul de devoltare al unui magazin web a fost necesar s implementez aceast
funcionalitate de la zero, dar am compensat printr-un grad mai mare de flexibilitate i faptul c
este mult mai dificil gsirea unei companii de hosting cu un pre rezonabil care s suporte
tehnologiile folosite n acest proiect. Dei numrul companiilor ce ofer hosting pentru aplica ii
ce folosesc Python i Flask este sesizabil mai mic, se compenseaz prin serviciile irepro abile.
Astfel, companii precum Heroku sau Microsoft(cu platforma Windows Azure) ofer servicii
ideale pentru a gzdui aceast aplicaie.
Flask este un framework web nou pe pia, fapt datorit caruia nu beneficiaza de mul imea de
extensii pe care o are la dispoziie Django. Motivul pentru care am optat pentru Flask n
dezvoltarea acestei aplicaii este flexibilitatea. Alegerea unui framework web precum Django near fi impus un mod strict de dezvoltare ce ar fi fcut imposibil implementarea anumitor
funcionaliti.
n momentul de fa, aplicaia pune la dispoziie, cel puin din punct de vedere al utilizatorului
de rand, toate specificaiile necesare pentru a-i conferi utilizatorului o experien de utilizare
decenta. O funcionalitate ce ar fi sporit comunicarea cu utilizatorul ar fi fost implementarea unui
modul de chat, ce ne-ar fi permis s discutm n timp real cu clien ii no tri. Din punct de vedere
al administratorului magazinului, integrarea unui modul de adaugare a produselor ar fi u urat
72
procesul, totui diferena ar fi fost isesizabil. n momentul de fa, produsele se pot adauga prin
intermediul liniei de comand sau prin intermediul unui sistem de management al bazelor de
date.
O funcionalitate pe care dorim s o adaugm pe viitor este un sistem de validare a comenzilor
i a nregistrrii utilizatorilor prin SMS - acest lucru ar duce la sporirea gradului de securitate.
73
V. BIBLIOGRAFIE
1. Python Cookbook, Brian K. Jones (2013), O'Reilly Media

2. Flask Web Development, Miguel Grinberg, (2014), O'Reilly Media
3. Head First HTML with CSS & XHTML, Eric Freeman, (2005), O'Reilly Media
4. Bootstrap, Jake Spurlock, (2013), O'Reilly Media
5. Essential SQLAlchemy , Rick Copeland, (2008), O'Reilly Media
6. PostgreSQL: Up and Running, Leo S, Hsu, (2012), O'Reilly Media
7. Functional JavaScript, Michael Fogus, (2013), O'Reilly Media
8. jQuery Cookbook, Cody Lindley, (2009), O'Reilly Media
9. Head First jQuery, Ronan Cranley, (2011), O'Reilly Media
10. Ajax: The Definitive Guide, Anthony T. (2011), O'Reilly Media
74

Licenta Magazin Online

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Licenta Magazin Online

Încărcat de

Drepturi de autor:

Formate disponibile

UNIVERSITATEA SPIRU HARET BUCURESTI

FACULTATEA DE MATEMATICA SI INFORMATICA

UNIVERSITATEA SPIRU HARET BUCURESTI

Majoritatea afacerilor dezvoltate pe Internet, cu comer electronic, s-au dezvoltat n aria

I.2 Beneficiile comertului electronic

n cazul comerului electronic exist avantaje att pentru vnzator ct i pentru

Pentru cumprtor, comerul electronic aduce urmtoarele avantaje:

- identificarea mult mai uoar de furnizori i parteneri de afaceri;

distan, indiferent de tehnologiile curente);

- legate de securitatea comerului electronic;

preocupri are fiecare persoan etc.).

I.3 Modele de afaceri

Analiznd aplicaiile curente dezvoltate pe Internet, identificm urmtoarele modele

- nivelul sistem, care constituie nivelul ierarhic inferior.

II ROLUL I IMPORTANA INTERNETULUI I A PAGINILOR WEB

II.1 Scurct Istoric

varietatea de platforme ale diverselor calculatoare.

II.3 HTML. Prezentare

toate aceste taguri.

Fig. 1.4 Structura unui document html.

ce contin informaii despre aspectul

<link rel=stylesheet type=text./css href=stil.css >

<style> din interiorul tagului <head>.

II.5 JavaScript. Prezentare

II.5.1 Limbajul JavaScript

Structuri decizionale n limbajul JavaScript

II.5.2 Prezentarea bibliotecii JQuery

II.6 Limbaje de scripting

II.6.1 Python. Prezentare

Python este un limbaj de programare dinamic multi-paradigm, creat n 1989 de programatorul

a = 10 # a va fi consider un numr ntreg (integer)

(float), dar introduce totodat i concepte noi.

Alte structuri de date sunt tuplurile/perechile (tuples) i dicionarele (dictionaries, mappings).

II.6.2 Frameworkul web Flask

Structura unei aplicaii web dezvoltate folosind Flask

Exemplul urmtor ilustreaza structura de baza a unei aplicaii scrise in flask:

from flask import Flask

De asemenea, Flask permite si introducerea variabilelor n URL si selectarea metodei aferente

from flask import Flask

Prezentarea template engineului

II.6.3 Administrarea bazelor de date cu SQLAlchemy

SQLAlchemy este un ORM(Object Relational Mapper) ce permite efectuarea de interogri

Crearea tabelelor n SQLAlchemy

def __init__(self, nume, prenume, parola):

utilizator = Utilizator(nume='David', prenume='laurentiu', parola='123444')

Apelul la metoda db.session.commit arat acordul nostru cu privire la introducerea noului

III. ARHITECTURA MAGAZINULUI WEB

III.1 Prezentarea magazinului

Fig. 3.1 Bara de navigare

Fig. 3.2 Coninutul paginii de co

Fig. 3.3 Coninutul subsolului

Fig. 3.4 Pagina de index

Fig. 3.5 Formularul de contact

Fig. 3.6 Trimiterea cu succes a unui mesaj

Fig. 3.7 Recepionarea mesajului de catre administrator

Fig. 3.8 Adugarea unui produs n co

Fig. 3.9 Cutarea unui produs

Fig. 3.10 Pagina de nregistrare

Fig. 3.11 Confirmarea trimiterii emailului ce conine codul de activare

Fig.3.12 Codul de activare trimis prin email

Fig. 3.13 Activarea cu succes a contului

Pagina de autentificare, conine un formular cu 2 campuri: numele de utilizator si parola. Odata

Fig. 3.14 Autentificarea unui utilizator

def init(self, nume, prenume, parola):

def init(self, name, price, stock):