David Lauren iu-Georgian ț [621335]

UNIVERSITATEA “SPIRU HARET” BUCURESTI
FACULTATEA DE MATEMATICA SI INFORMATICA
LUCRARE DE LICEN Ă Ț
Coordonator tiin ific: Ș ț
Student: [anonimizat]
2015

UNIVERSITATEA “SPIRU HARET” BUCURESTI
FACULTATEA DE MATEMATICA SI INFORMATICA
Coordonator tiin ific: Ș ț
Student: [anonimizat]
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 IMPORTAN A 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 aplica iei ț………………………………………………………………………………………. 54
III.3 Structura bazei de date ………………………………………………………………………………………………….. 64
IV. CONCLUZII…………………………………………………………………………………………………………………….. 72
V. BIBLIOGRAFIE ………………………………………………………………………………………………………………… 74

DA VID LAURENȚIU INTRODUCERE
I INTRODUCERE
1.1 Comertul Electronic
Întreprinderile moderne sunt caracterizate printr-o cerere din ce in ce mai mare, prin existen a ț
unei competi ii la nivel mondial si prin sporirea permanentă a a teptărilor 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 func ionare. Comer ul electronic este o cale prin care se ț ț
facilitează si sprijină aceste schimbări, 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
vanzări – inclusiv marketingul si vanzarea propriuzisă.
Multi oameni consideră comertul electronic ca fiind orice tranzactie comercială condusă
electronic pentru cumpararea unor produse cum ar fi cărti, 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 achizi ii comerciale ci i totalitatea activită ilor care sus in ț ș ț ț
obiectivele de marketing ale unei firme i care pot include, spre exemplu, publicitate, vanzări, ș
pla i, activita i post-vanzare, servicii catre clien i, etc.ț ț ț
Comertul electronic da posibilitatea firmelor sa devina mai eficiente si flexibile in modul intern
de func ionare, să conlucreze mai strâns cu furnizorii si sa devina mai atente fa ă de nevoile si ț ț
asteptările clien ilor. Permite companiilor sa selecteze cei mai buni furnizori, indiferent de ț
localizarea lor geografica i să vandă unei pie e globale. ș ț
Această evolu ie are un impact major asupra economiei, in ceea ce priveste crearea de noi ț
întreprinderi, diversificarea celor existente i, în special, asupra poten ialului pie ei for ei de ș ț ț ț
muncă i a gradului de ocupare a acesteia in viitor. Industria comer ului electronic face, în ș ț
4

DA VID LAURENȚIU INTRODUCERE
general, distinc ie între mai multe tipuri de tranzac ii, unele active altele în a teptarea: ț ț ș
– Business-to-Business (B-2-B sau BTB) cuprinde toate tranzac iile ce se efectueaza intre doi sau ț
mai mul i parteneri de afaceri. Aceste tranzac ii se bazeaza, de obicei, pe sisteme extranet, ceea ț ț
ce înseamna ca partenerii de afaceri ac ioneaza 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 pla i. ț
– Business-to-Consumer (B-2-C sau BTC) se refera la rela iile dintre comerciant si consumatorul ț
final, fiind considerat comer electronic cu amănuntul. 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 prăjituri 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 răspunde 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 comer ului electronic. Aceasta categorie de e- ț
commerce ar putea, în viitor, sa fie utilizată i pentru plata TVA sau a impozitelor firmelor. ș
5

DA VID LAURENȚIU INTRODUCERE
Majoritatea afacerilor dezvoltate pe Internet, cu comerț electronic, s-au dezvoltat în aria
Business-to-Business și mai puțin Busines-to-Consumer. Business-to-Business(B2B) constă în
realizarea de tranzacții între companii, transformând modul în care acestea lucrează între ele.
Inițial 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. Având în vedere faptul că documentele erau
aproximativ în același format, s-au putut realiza standarde după acestea și a fost posibilă trecerea
lor în format electronic. Datorită faptului că rețelele EDI aveau un cost ridicat, multe companii
foloseau linii închiriate sau serviciile unor firme care ofereau conexiuni si servicii de transmisie
celor angajați î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 apariția Internetului s-a trecut la comerțul electronic bazat pe internet deoarece
folosirea acestuia este mai puțin costisitoare. Comerțul electronic bazat pe Internet a cunoscut
mai multe etape:
– etapa inițială, etapă în care e-mail-ul a fost cea mai folosită tehnologie de transfer a datelor;
– etapa www, care a luat naștere odată cu apariția primului browser web(Mosaic);
– etapa interactivă, când multe website-uri au introdus protocoale securizate de
comunicație, aplica ii software pe partea de server și/sau client, formulare, asigurând ț
interactivitatea client-furnizor;
– etapa maturizării web-ului, caracterizată de introducerea lui în cadrul intranet- ului
organizației, utilizarea extranet-ului între organizații, utilizarea tehnologiei Python și a
capabilităților multimedia ale Web-ului, care a devenit, astfel, un valoros canal de reclamă și
publicitate(Piață Electronică).
6

DA VID LAURENȚIU INTRODUCERE
I.2 Beneficiile comertului electronic
În cazul comerțului electronic există avantaje atât pentru vânzator cât și pentru
cumpărător. Avantajele pentru vânzător sunt următoarele:
– dispariția limitelor geografice de vânzare;
– publicitatea online poate atinge publicul țintă mai ușor;
– dezvoltarea de noi produse se poate realiza mai ușor în concordanța cu cerințele
consumatorului;
– adaptarea la schimbări este mai rapidă;
– disponibilitatea informațiilor despre clienți;
– economii la vânzarea produsului;
– îmbunătățirea relațiilor cu clienții;
– reducerea erorilor prin automatizarea proceselor de plată;
– operabilitate 24 ore / zi, 7 zile pe saptamană.
Pentru cumpărător, comerțul electronic aduce următoarele avantaje:
– timpul redus de acces la produs;
7

DA VID LAURENȚIU INTRODUCERE
– identificarea mult mai ușoară de furnizori și parteneri de afaceri;
– economii la cumpărarea prosusului;
– negocierea prețurilor se face mai ușor;
– scăderea costurilor tranzacțiilor prin creșterea vitezei de transfer a informației;
– distribuirea online pentru produse digitale;
– lucrul la distanță;
– accesul la produse/servicii din zone aflate la distanță(exemplu: învățământ 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 scăzută;
– integrarea greoaie a bazelor de date și a software-ului de procesare a tranzacțiilor
tradiționale cu software pentru comerț electronic (aceste servicii de integrare pot fi costisitoare).
Pe lângă problemele tehnologice și legate de software, există și alte obstacole:
– de natură culturală și legală;
8

DA VID LAURENȚIU INTRODUCERE
– legate de securitatea comerțului electronic;
– legate de confidențialitatea datelor (ce tranzacții efectuează, ce site-uri vizitează, ce
preocupări are fiecare persoană etc.).
I.3 Modele de afaceri
Analizând aplicațiile curente dezvoltate pe Internet, identificăm următoarele modele
de afaceri în comerțul electronic:
– magazin electronic (e-shop): un magazin electronic se implementează prin intermediul unui site
Web; acesta este gestionat de o companie, pentru marketingul și vânzările propriilor produse și
servicii. Minimal, conține catalogul de produse sau servicii cu descrieri tehnice și comerciale
pentru fiecare poziție 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 posibilităților de acces la date. Varianta medie
conține facilități pentru preluarea comenzilor (prin e-mail sau forme interactive pe care le vor
completa clienții), iar varianta extinsă cuprinde și posibilitatea efectuării on-line a plății (prin
cărți de credit sau alte variante electronice).
– aprovizionarea electronică (eProcurement): pentru procurarea bunurilor și serviciilor, marile
companii și autorități publice organizează licitații. Prin publicarea pe Web a specificațiilor
ofertei, scade atât timpul cât și costul de transmisie, mărindu-se și numărul de firme care iau
parte la licitație. Astfel, crește concurența și scade prețul.
– magazin electronic universal (eMall): ca și în lumea reală, magazinul electronic universal este o
colecție de magazine electronice, reunite sub o umbrelă comună și care, în general, acceptă
metode de plată comune.
9

DA VID LAURENȚIU INTRODUCERE
– piața unui terț (3rd party marketplace): se apelează la o interfață utilizator pentru catalogul de
produse al companiei, interfață ce aparține unui terț (în general, furnizor de servicii internet sau o
bancă). Această metodă are avantajul că interfața este unică pentru mai mulți producători,
utilizatorii fiind familiarizați cu utilizarea ei
– comunități virtuale (virtual communities): valoarea cea mai importantă a unei comunități
virtuale este dată de către membrii săi (clienți sau parteneri), care adaugă informații proprii peste
un mediu de bază furnizat de companie. Fiecare membru poate oferi spre vânzare produse sau
servicii sau poate adresa cereri de cumpărare a unor produse sau servicii. Calitatea de membru al
unei comunități virtuale presupune plata unei taxe.
– furnizor de servicii cu valoare adăugată pentru canalele de comerț electronic (value chain
service provider): furnizorii de servicii sunt specializați pe funcții specifice, cum ar fi asigurarea
logisticii, plata electronică sau expertiza în managementul producției ș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
informațional pentru colaborarea între companii. Acestea pot adresa funcții specifice, cum ar fi
concepția sau proiectarea în colaborare. Câștigurile provin din managementul platformei (taxa de
membru sau taxa de utilizare), și din vânzări de instrumente specializate (pentru design,
workflow și gestiunea de documente). Prin workflow se înțelege fluxul de documente, care
implică două entități: partea pasivă (documentele) și partea activă (deplasarea acestor
documente).
– brokeraj de informații și alte servicii: exemplele cuprind cataloage de clienți clasificați pe
profil, vânzarea de oportunități de afaceri, consultanță în domenii specializate. O categorie
specială o constituie serviciile de încredere furnizate de autoritățile de certificare sau de
notariatele electronice.
Un sistem electronic de plăți se referă la totalitatea obiectelor care conlucrează pentru
10

DA VID LAURENȚIU INTRODUCERE
asigurarea plății tranzacțiilor ce se efectuează. Sunt implicate, în general, trei entități care
interacționează: o banca B, un cumpărător C și un vânzător V. Sistemul electronic de plăți
conține și o mulțime de protocoale care permit cumpărătorului C să facă plăți către vânzătorul V.
Sistemele electronice de plăți pot fi privite într-o structură ierarhică pe nivele, derivate din
arhitectura sistemelor ISO-OSI .
Un Sistem Electronic de Plăți (Fig. 1.3) este format din doua nivele:
– nivelul utilizator, care constituie nivelul ierarhic superior;
11

DA VID LAURENȚIU INTRODUCERE
– nivelul sistem, care constituie nivelul ierarhic inferior.
Nivelul utilizator constă din mulțimea utilizatorilor și a tranzacțiilor care au loc între aceștia.
Utilizatorii sunt grupați după diverse roluri, după modul în care interacționează în relațiile de
afaceri dintre ei: cumpărătorul, vânzătorul, emitentul de bani electronici (banca), etc.
Nivelul sistem: constă din mulțimea entităților fizice și a relațiilor care se stabilesc între ele.
Entitățile pot juca unul dintre următoarele roluri: purtător de bani electronici sau registru de casă.
De-a lungul ultimilor ani, Comer ul Electronic a devenit o activitate comună pentru multe ț
companii. Unele dintre acestea au acceptat această provocare, fără a lua în considerare
schimbările culturale pe care le implică situația în cauză, precum și infrastructura necesară pentru
a continua proiectul inițial.
Pentru a începe dezvoltarea unei afaceri în lumea electronică, există unele puncte care trebuie
să fie acoperite. În primul rând este necesar să se stabilească o strategie de marketing, pentru a
crea un catalog de produse, pentru a defini costurile și prețurile de vânzare, piața țintă, prețurile
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 rămâne pentru o lungă perioadă de timp o
variantă de dezvoltare a unei afaceri. Pentru a putea utiliza această tehnologie într-un mod
corespunzător, este necesar să se bazeze pe o bună organizare a informațiilor ș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
corespunzătoare a acestui proiect este nevoie de o companie care are personal calificat.
12

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
INTERNETULUI ȘI A
PAGINILORWEB
II ROLUL I IMPORTAN A INTERNETULUI I A PAGINILOR WEB Ș Ț Ș
II.1 Scurct Istoric
Internetul s-a născut la mijlocul anilor 60 în forma ARPAnet (Advanced Research Projects
Agency Net) – o rețea între mai multe computere din unele instituții americane, ce lucrau pentru
ARPA, un departament de cercetare din cadrul Pentagonului. ARPA a fost pus în funcțiune ca
reacție la succesul sovietic al lansării satelitului Sputnik în spațiu în 1957. Unul din obiectivele
ARPAnet era crearea unei rețele, care să nu fie distrusă datorită atacurilor asupra sistemului.
Războiul Rece fiind la apogeu, scenariul unui dezastru era considerat fie lansarea unei bombe fie
un atac nuclear.
De aici a rezultat un proiect de rețea, unde rețeaua însăși era permanent în pericol de atac. În
consecință:- doar un minimum de informații era cerut de la computerele client în rețea – oricând
transmisia de date întâlnea un obstacol, sau una dintre adrese era de negăsit, se găsea o altă cale
către adresa căutată.
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 "înțeleagă" unele cu altele. În acest fel, internetul era și este
cu adevărat o platformă independentă.
Internet-ul "civil" a început ca o rețea de patru computere între Universitățile din Utah, Santa
Barbara și Los Angeles și Institutul de Cercetare din Stanford. În curând, cercetători din alte
instituții de stat au devenit interesați. Deoarece folosirea computerelor era costisitoare, ei au
văzut imediat avantajele folosirii în comun a unei rețele.
La sfârșitul anilor 60 și începutul anilor 70, când Internetul număra în jur de 50 de computere,
13

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
INTERNETULUI ȘI A
PAGINILORWEB
s-au dezvoltat primele dintre servicii, folosite încă și azi pentru transferul informației:- File
Transfer Protocol pentru trimiterea și regăsirea fișierelor – 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 alăturau, în
următoarea decadă, Internetul a crescut la o rețea de 200 de computere. Partea militară era
organizată într-o rețea separată, Milnet.
În același timp, au apărut alte rețele, mai ales în sectorul academic. Importantă printre acestea
era (și este) USENET sau Users' Network, care a început în 1979, când câteva computere UNIX
au fost conectate împreună.
USENET. În sute de grupuri de discuții despre orice subiect imaginabil, oamenii făceau schimb
de noutăți și imagini, în ciuda distanțelor și a hotarelor. Alte rețele s-au dezvoltat de-a lungul
USENETului. Toate formau baza unui spațiu de comunicație radical democratic. De exemplu,
înaintea unei noi discuții pe care grupul o începea, comunității Netului i se cerea un vot de
accept. Grupurile de discuții joacă încă un rol mare pe Internet. Există mii și zeci de mii în întreg
internetul.
Altă moștenire 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 curând, expresia "Information
SuperHighway" (autostrada informației) a devenit uzuală. În această metaforă, Internetul era
văzut ca o importantă infrastructură pentru transportul unor bunuri vitale – informațiile.
În anii 80 și începutul anilor 90, când Internetul era folosit doar de un număr mic de cercetători,
arata mult diferit față de prezent. Principalele aplicații erau atunci poșta electronică și grupurile
de discuții (Newsgroups) plus diverse rutine de căutare și mecanisme de transfer al fișierelor.
Aceasta era o lume UNIX, în care toate comunicațiile existau doar ca text sau numere, și liniile
de comandă trebuiau memorate și tipărite.
Era destinat să fie o platformă internă de comunicații pentru cercetătorii din întreaga lume care
lucrau pentru CERN. Sarcina principală era să asigure un sistem care să facă legătura între
14

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
INTERNETULUI ȘI A
PAGINILORWEB
varietatea de platforme ale diverselor calculatoare.
Soluția de bază era ideea de a face legătura î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. Când legătura este selectată, cineva poate "sări"
la documentul legat. În acest fel este posibil de a lega un număr nelimitat de documente între ele
într-o structură web ne-ierarhică. Pentru a putea deosebi aceste documente și pentru a le regăsi,
fiecare are o adresă unică. Aceasta este Unique Resource Locator (URL). URL-urile constau într-
un 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, așa numitele "browsere" urmau încă
tradiția originală a internetului – erau numai text. De aceea, sistemul a rămas, î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 când NCSA (National Center for Supercomputing Applications)
din SUA a scos "Mosaic" – Browser în 1993, care era bazat pe o interfață grafică (Windows).
Enorma creștere 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 făcut doar să se dezvolte. De asemenea, posibilitățile de a prezenta datele au
crescut dramatic. Curând au apărut poze și animații 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, câțiva ani mai târziu s-a născut E-Commerce.
II.2 Prezentare si importanta
În România, penetrarea internetului a crescut constant în ultimii ani, atingând 53% la nivel
național și 63% la nivel urban în rândul persoanelor cu vârsta de peste 15 ani în aprilie 2013. În
același timp, apetitul românilor pentru tablete și smartphone-uri este în continuă creștere.
Vânzările au cunoscut o importantă tendință ascendentă în ultimii ani, smartphone-urile
15

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
INTERNETULUI ȘI A
PAGINILORWEB
ajungând la o pondere de 25% din totalul pieței de telefoane mobile în unități în 2012, iar
numărul de tablete vândute a crescut de aproape 5 ori în 2012 față de 2011.
Aceste evoluții încep să își pună amprenta nu doar asupra stilului de viață al consumatorilor, ci
și asupra comportamentului lor de cumpărare. Dacă până nu de mult magazinele și mediile
tradiționale de comunicare erau principalele surse de informare în vederea luării deciziei de
cumpărare, în prezent internetul este utilizat pe scară largă.
Un studiu desfășurat de GfK România pe un eșantion reprezentativ pentru populația urbană
utilizatoare de Internet, cu vârste între 15 și 45 de ani, relevă rolul important al internetului în
redefinirea comportamentului de cumpărare. 70% dintre cei chestionați declară că Internetul a
devenit un instrument de cumpărare foarte util, iar 44% menționează că rețelele sociale au
devenit la fel de importante ca și alte surse de informații pentru a face cele mai bune alegeri de
produse.
“Accesarea site-urilor de comparare a prețurilor, consultarea online a descrierilor detaliate ale
produselor și a recenziilor altor cumpărători, schimbul de informații din rețelele sociale, toate
acestea sunt activități desfășurate din ce în ce mai mult în vederea luării celei mai bune decizii de
cumpărare, care să aducă cea mai mare valoare cumpărătorului. Astfel, accesul la surse multiple
de informare ne transformă pe toți în cumpărători mult mai implicați și mai exigenți, mai dificil
de mulțumit decât înainte”, spune Raluca Răschip, Consumer Goods & Retail Director GfK
România.
În afară de mediul online, treptat se dezvoltă și alte medii de interacțiune, cum ar fi cel prin
intermediul smartphone-urilor. Dacă în momentul de față smartphone-ul este folosit cu precădere
pentru a compara prețuri (44% dintre deținătorii care s-au informat online sau au cumpărat
online în ultimele 6 luni), pentru a căuta informații și recenzii (42%) și pentru a localiza
magazine (42%), și alte tipuri de comportamente încep să apară: verificarea disponibilității unui
produs (31%) sau scanarea de coduri QR (22%).
16

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
INTERNETULUI ȘI A
PAGINILORWEB
În acest mediu în care cumpărătorul este mult mai conștient de instrumentele pe care le are la
îndemână și mai implicat în procesul de cumpărare, utilizând tot mai multe pârghii pentru a
maximiza valoarea pe care o obține, devine tot mai dificil pentru producători și pentru retaileri să
păstreze un nivel de loialitate ridicat.
De aceea, cunoașterea modului în care cumpărătorii se informează și folosesc noile tehnologii,
a diversității stimulilor cu care aceștia intră în contact în procesul de cumpărare, devine din ce în
ce mai importantă pentru asigurarea succesului pe piață, nu doar pentru a răspunde nevoilor
actuale ale cumpărătorilor, 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 văzute
pe Web. Multe din trasaturile lui, cum ar fi independenta fata de platforma, structurarea
formatării si legaturile hypertext, fac din el un foarte bun format pentru documentele Internet si
Web.
Primele specificațiile 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 informație
utilizind Internetul. Erau prin urmare necesare citeva trasaturi: independenta de platforma,
posibilități hypertext si structurarea documentelor.Independenta de platforma înseamnă ca un
document poate fi afișat in mod asemănător de computere diferite, lucru vital pentru o audien ă ț
atât de variată.
Hipertext înseamnă ca orice cuvânt, fraza, imagine sau alt element al documentului văzut de un
utilizator (client) poate face referința la un alt document, ceea ce ușurează mult navigarea intre
17

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
INTERNETULUI ȘI A
PAGINILORWEB
multiple documente sau chiar in interiorul aceluia i 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 enunțat câteva versiuni ale specificației HTML, printre
care si HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0 si, cel mai recent, HTML 4.01. In același
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 concepția originala a HTML ca
un limbaj de marcare independent de obiectele existente pentru așezarea lor in pagina, in loc de a
specifica exact cum ar trebui sa arate acestea. Dacă doriți sa fiți siguri ca toți vizitatorii vor vedea
paginile așa cum trebuie, folosiți tagurile HTML 2.0.
Specificația HTML 3.0, Enunțata in 1995, a încercat sa dezvolte HTML 2.0 prin adăugarea
unor facilități precum tabelele si un mai mare control asupra textului din jurul imaginilor. Deși
unele din noutățile HTML 3.0 erau deja folosite de autorii de browsere, multe nu erau încă. In
unele cazuri, taguri asemănătoare implementate de autorii de browsere au devenit mai răspândite
decât tagurile "oficiale". Specificația HTML 3.0 acum a expirat, deci nu mai este un standard
oficial.
In Mai 1996, W3C a scos pe piața specificația 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 răspândite. In
Bilanțul asupra HTML, W3C recomanda ca providerii de informații sa utilizeze specificația
HTML 3.2.Versiunile curente ale majorității browserelor ar trebui sa suporte toate, sau aproape
18

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
INTERNETULUI ȘI A
PAGINILORWEB
toate aceste taguri.
De asemenea exista extensii Netscape si Microsoft care nu fac parte din specificația HTML 3.2,
ori pentru ca sunt mai puțin utilizate, ori au fost omologate după apariția HTML 3.2. Pentru ca
navigatorul Netscape a fost printre primele browsere care suporta anumite taguri HTML 3.0, iar
Netscape deține in jur de 70% din piața de browsere, mulți au crezut eronat ca toate extensiile
Netscape (incluzând taguri ca si facilitați 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 de i nu se poate vorbi de WYSIWYG atâta vreme cat navigatoarele afișează 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 decât par ial formatările anterioare deoarece ț
limbajul HTML este înca incomplet.
Orice document HTML începe cu notația <html> si se termina cu notația </html>. Aceste
entita i se numesc in literatura de specialitate "TAG-uri". Prin convenție, toate informațiile ț
HTML încep cu o paranteză unghiulară deschisă " < " si se termină cu o paranteză unghiulară
închisa " > ".
Tag-urile între aceste paranteze transmit comenzi către browser pentru a afișa pagina într-un
anumit mod. Unele blocuri prezintă delimitator de sfârșit de bloc, în timp ce pentru alte blocuri
acest delimitator este opțional sau chiar interzis.
Intre cele doua marcaje <html> si </html> vom introduce doua secțiuni:
– sec iunea de antet ț<head>…</head>
– corpul documentului <body>…</body>. Blocul <body>…</body> cuprinde conținutul
19

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
INTERNETULUI ȘI A
PAGINILORWEB
propriu-zis al paginii HTML, adică ceea ce va fi afișat in fereastra browser-ului.
Fig. 1.4 Structura unui document html.
Aplicând cele spuse mai sus vom ajunge la urmatorul rezultat:
<html>
<head><head>
<body></body>
</html>
Tagul <head> con ine, de obicei, elemente precum tagul ț <title> – ce semnifică titlul paginii,
20

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
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 informa ii despre aspectul ț
documentului.
In general, documentul va avea urmatoarea structura a elementelor con inute 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> con ine corpul documentului. Practic, in acest tag rezida toate elementele ce vorț
fi afi ate direct către utilizator. Pentru a structtura o pagina web cat mai eficient se folose te tagul ș ș
<div> ce marchează o por iune din document ale cărei mărimi pot fi setate fie din interiorul ț
fi ierului ș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 con ine un meniu de navigare minimalist implementat prin intermediul tagului ț <div>.
<!DOCTYPE html>
<html>
<head>
<title> Titlul paginii </title>
<script src=”dinamism.js”></script>
21

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
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>
<li> <a href=”sectiunea2.html”> Sectiunea 2 </a> </li>
<li> <a href=”sectiunea3.html”> Sectiunea 3 </a> </li>
</ul>
</div>
</body>
</html>
După cum pute i 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 sec iuni si pagina acestei sectiuni am ț
folosit tagul <a> ce marcheaza un link spre o pagină, pentru a preciza pagina ac ionată 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 ata a 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

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
INTERNETULUI ȘI A
PAGINILORWEB
În exemplul următor modficăm mărimea fontului unui paragraf si culoarea acestuia prin
intermediul unui fisser css.
#paragraf {
font-size: 23px;
font-color: blue;
}
Acesta este fi ierul html asupra caruia aplicăm stilul definit in interiorul fi ierului ș ș 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 fi ierelor șcss este pozi ionarea unui element. Bazându-ne pe ț
acela i principiu expus în exemplul anterior putem pozi iona un element dupa bunul plac ș ț
folosind atributele left, right, botton si top.
23

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
INTERNETULUI ȘI A
PAGINILORWEB
In exemplul următor vom pozi iona 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 fi ierului html asupra căruia 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 fi ierului șcss. De asemenea, se poate observa ca în interiorul
fi ierului șcss am prefixat clasa imaginii cu un punct, acesta fiind modul prin care selectam un
element in func ie de valoarea atributului ț class.

De i 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

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
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 func ionalită i în paginile web, codul Javascript ț ț
din aceste pagini fiind rulat de către browser. Limbajul este binecunoscut pentru folosirea sa în
construirea siturilor web, dar este folosit i pentru accesul la obiecte încastrate (embedded ș
objects) în alte aplica ii. A fost dezvoltat ini ial de către Brendan Eich de la Netscape ț ț
25

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
INTERNETULUI ȘI A
PAGINILORWEB
Communications Corporation sub numele de Mocha, apoi LiveScript, i denumit în final ș
JavaScript.
În ciuda numelui i a unor similarită i în sintaxă, între JavaScript i limbajul Java nu există ș ț ș
nicio legătură. Ca i Java, JavaScript are o sintaxă apropiată de cea a limbajului C, dar are mai ș
multe în comun cu limbajul Self decât cu Java.
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ă întrucât este ideala pentru scripturi
de dimensiuni mici, ce nu depasesc 200-250 de linii de cod. În mod normal, a a va arata un fisier ș
HTML ce con ine 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 func ia țalert pentru a demonstra modul de func ionare a unui ț
program simplu in JavaScript.
Definirea variabilelor
26

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
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 func ie. ț Totu i, definirea unei noi variabile se face ș
folosindu-ne de cuvântul 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>
<script type=”text/javascript”>
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 număr real. Precum majoritatea limbajelor de scripting, ș
JavaScript, pune la dispoziie două modalită i sintactice de reprezentare a stringurilor: forma ce ț
face uz de ghilimele i forma ce folose te apostroafele. ș ș
Structuri decizionale în limbajul JavaScript
27

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
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>
<script type=”text/javascript”>
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

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
INTERNETULUI ȘI A
PAGINILORWEB
</html>
În exemplul de mai sus am introdus o strucura decizională de tip if/elseif/else ce apeleaza
func ia țalert, pasându-i ca i argumente stringurile: ș 'ramura de adevar' , 'ramura elseif',
'ramura else', în func ie de ramura pe care se afla fluxul de execu ie. ț ț
În cazul celui de al doilea exemplu, în care folosim structura switch, vom apela func ia țalert
pasându-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>
<script type=”text/javascript”>
do {
alert(i);
i++;
} while(i < 10);
while(i > 8) {
alert(i);
29

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
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 itera ie ț
se afi ează valoarea variabilei ș i i se incrementează cu o unitate.ș
Bucla while va rula pană când valoarea ei va fi mai mica de 8, la fiecare itera ie a buclei se va ț
afi a valoarea variabilei prin intermediul functiei ș alert, iar valoarea variabilei i va fi
decrementată cu o unitate.
Bucla for va rula până când valoarea variabilei i va fi mai mare de 20, la fiecare itera ie a buclei ț
valoarea variabilei va fi incrementata cu o unitate, iar valoarea acesteia va fi afi ată într-o căsu a ș ț
de dialog prin intermediul func iei țalert.
Definirea functiilor
Limbajul JavaScript pune la dispozi ie doua modalită i de definire a func iilor, prima ț ț ț
asemănându-se foarte mult cu modul de definire a func iilor din limbajul țphp. Exemplul următor
ilustreaza modul de utilizare a celor doua modalită i. ț
<!DOCTYPE html>
30

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
INTERNETULUI ȘI A
PAGINILORWEB
<html>
<head>
</head>
<body>
<script type=”text/javascript”>
function f() {
alert('f');
}
var g = function() {
alert('g');
}
</script>
</body>
</html>
Prima modalitate define te o func ie ș țf ce va afi a o casu ă de dialog cu textul ș ț f atunci cand este
apelată, iar a doua define te o variabila șg caruia îi este atribuită valoarea unei func ii țanonime ce
afi ează 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 func iile 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

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
INTERNETULUI ȘI A
PAGINILORWEB
Pentru a modifica elementele unui document HTML este nevoie de o modalitate de a le accesa,
interfata pusă la dispozi ie de țJQuery se asemană foarte mult cu modul în care selectăm
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>
<script type=”text/javascript”>
$(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 ac iuni este de a executa cod ț
JavaScript decat dupa ce browserul a terminat de incărcat pagina complet. Folosind metoda
append aplicataă asupra elementului cu id-ul paragraf vom adauga textul text în interiorul
acestui element.
Tratarea evenimentelor
32

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
INTERNETULUI ȘI A
PAGINILORWEB
JQuery ne permite să legăm diferite evenimente de elemente din fisierul HTML. Spre
exemplu, atunci când se face click pe un buton va fi apelat evenimentul click. JQuery ne permite
să executam por iuni 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>
<script type=”text/javascript”>
$('.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 astăzi un lider al comunită ii de ș ț
dezvoltatori de software care lucrează la perfec ionarea limbajul Python i implementarea de ț ș
33

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
INTERNETULUI ȘI A
PAGINILORWEB
bază a acestuia, CPython, scrisă în C. Python este un limbaj multifunc ional folosit de exemplu ț
de către companii ca Google sau Yahoo pentru programarea aplica iilor web, însă există i o serie ț ș
de aplica ii tiin ifice sau de divertisment programate par ial sau în întregime în Python. ț ș ț ț
Popularitatea în cre tere, dar i puterea limbajului de programare Python au dus la adoptarea sa ș ș
ca limbaj principal de dezvoltare de către programatori specializa i i chiar i la predarea ț ș ș
limbajului în unele medii universitare. Din acelea i motive, multe sisteme bazate pe Unix, ș
inclusiv Linux, BSD i Mac OS X includ din start interpretatorul CPython. ș
Python pune accentul pe cură enia i simplitatea codului, iar sintaxa sa le permite ț ș
dezvoltatorilor să exprime unele idei programatice într-o manieră mai clară i mai concisă decât ș
în alte limbaje de programare ca C. În ceea ce prive te paradigma de programare, Python poate ș
servi ca limbaj pentru software de tipul object-oriented, dar permite i programarea imperativă, ș
func ională sau procedurală. Sistemul de tipizare este dinamic iar administrarea memorieiț
decurge automat prin intermediul unui serviciu „gunoier” (garbage collector). Alt avantaj al
limbajului este existen a 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 funda ia 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 declarării acestora (de fapt, declararea variabilelor
nu este necesară ca în C), ci este determinat de interpretator după con inutul lor sau după ț
opera iile efectuate. Într-un asemenea caz se vorbe te de tipizare dinamică. ț ș
Avantajul acestei metode de a lucra cu tipuri este că codul produs este mai clar i mai intuitiv. De ș
exemplu
34

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
INTERNETULUI ȘI A
PAGINILORWEB
a = 10 # a va fi consider un număr întreg (integer)
b = 11.5 # b va fi considerat un număr ra ional (double sau float) ț
c = "un rând de text" # c va fi considerat un ir (string) ș
În ciuda tipizării dinamice, Python este puternic tipizat, adică interpretatorul nu permite opera ii ț
cu obiecte de tip diferit dacă acestea nu sunt bine definite, cum ar fi opera iile de tip cast în C. ț
Există totu i unele excep ii logice, cum ar fi în cazul numerelor întregi i celor ra ionale (float), ș ț ș ț
între care sunt permise opera ii ca adunarea sau împăr irea, tipul rezultatului inând cont de ț ț ț
natura opera iei, cum se poate vedea mai jos ț
d = 10 + 11.5 # rezultatul va fi un număr ra ional, 21.5 ț
e = "o brio ă" + 4 # această comandă va genera o eroare. ș
Alt concept important în Python este cel al tipurilor mutabile i nemutabile. A a cum implică ș ș
numele, datele cu un tip mutabil pot fi alterate după ini ializare, în vreme ce la date nemutabile ț
lucrul acesta este imposibil. Luând ca exemplu o listă (mutabilă), constatăm că putem adăuga
elemente la listă sau le putem modifica fără probleme. În cazul unui ir de caractere (nemutabil), ș
acest lucru nu este permis:
lista_mea = ["măr", "pară"]
lista_mea.append("strugure") # adaugă la listă
print lista_mea[2] # afi ază: strugure ș

irul_meu = "varză"ș
irul_meu[0] = "b" # schimbă cuvântul în "barză" -> Eroareș
Structuri de date
Python oferă tipuri tradi ionale de date, cum ar fi numărul întreg (integer, int) sau cel ra ional ț ț
35

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
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 con ine orice tipuri de date (în cadrul aceleia i liste) i pot fi modificate pe loc ț ș ș
adăugând i eliminând elemente fără a declara sau utiliza func ii 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 dic ionarele (dictionaries, mappings). ș ț
Tuplurile sunt liste care au un număr 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 spa iul cartezian. Dic ionarele sunt liste neordonate în care fiecare ț ț
element are asociat o cheie, care poate fi număr sau ir de caractere. Dic ionarele au foarte multe ș ț
aplica ii, inclusiv crearea structurilor de tip hash-tables. ț
Stil
Python este un limbaj multi-paradigmă, concentrându-se asupra programării imperative,
orientate pe obiecte i func ionale, ceea ce permite o flexibilitate mai mare în scrierea aplica iilor. ș ț ț
Din punctul de vedere al sintaxei, Python are un număr de contruc ii i cuvinte cheie cunoscute ț ș
oricărui 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 construc ii. Nivelele de indentare îndeplinesc această func ie. Această ț ț
importan ă a indentării este foarte suprinzătoare pentru mul i utilizatori noi ai limbajului Python, ț ț
chiar dacă sunt programatori cu experien ă. Dar o astfel de utilizare a indentării permite codului ț
să fie mai u or 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

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
INTERNETULUI ȘI A
PAGINILORWEB
func ionalită ii. 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 fi iere 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 func iilor ce permit manipularea i prelucrarea ș ț ș
lor, precum i multe alte biblioteci de func ii 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 fi iere, arhive, fi iere XML i un set ș ș ș
de biblioteci pentru lucrul cu re eaua i principalele protocoale de comunicare pe internet (HTTP, ț ș
Telnet, FTP). Un număr mare de platforme Web sunt construite cu Python. Abilită ile limbajului ț
ca limbaj pentru programarea CGI sunt în afara oricăror dubii. De exemplu YouTube, unul din
site-urile cu cea mai amplă cantitate de trafic din lume, este construit pe baza limbajului Python.
Totu i, Python permite extinderea func ionalită ii prin pachete adi ionale programate de ter iș ț ț ț ț
care sunt axate pe o anumită func ionalitate. De pildă, pachetul wxPython con ine metodele i ț ț ș
structurile necesare creării unei interfe e grafice. ț
Popularitatea limbajului este în cre tere începând cu anul 2000, datorită faptului că Python ș
permite crearea mai rapidă a aplica iilor 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 mări viteza de procesare.
37

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
INTERNETULUI ȘI A
PAGINILORWEB
II.6.2 Frameworkul web Flask
Spre deosebire de PHP, Python nu oferă suport direct pentru dezvoltarea aplica iilor web, ț
pentru a dezvolta aplica ii web in python este necesar un ț framework web ce va pune la
dispozitie toate func iile i dependin ele necesare dezvoltării unei aplica ii web. ț ș ț ț
Elementele de baza puse la dispozitie de Flask sunt: serverul web folosit pentru efectuarea
testelor, template engine-ul si o bibliotecă vasta de func ii uzuale în dezvoltarea unei aplicatii ț
web.
Structura unei aplica ii web dezvoltate folosind Flask ț
Exemplul următor ilustreaza structura de baza a unei aplica ii 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 vede i, este necesară importarea clasei ț Flask i a func iei ș țrender_template.
Variabila app va fi ini ializată drep un obiect de tip ț Flask, acest obiect va con ine toate datele ce ț
in de configurarea aplicatiei.ț
38

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
INTERNETULUI ȘI A
PAGINILORWEB
Functia render_template va procesa templateul al cărui nume îi este pasat ca i argument si va ș
returna sub forma unui string con inutul 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 func ia țindex drept un view. Astfel, func ia ț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:
from flask import Flask
from flask import render_template
app = Flask(__name__)
@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 procesăm 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

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
INTERNETULUI ȘI A
PAGINILORWEB
numeste Jinja2 i pune la dispozi ie majoritatea structurilor de control întâlnite în limbajulș ț
Python, asemănându-se foarte mult si din punct de vedere sintactic.
Exemplul următor ilustreaza un template ce genereaza in mod dinamic o listă HTML iterând
elementele dintr-o lista, pentru o mai buna întelegere am inclus i codul responsabil cu servirea ș
cererilor.
from flask import Flask
from flask import render_template
app = Flask(__name__)
@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

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
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 când dorim sa accesăm 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 interogări
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 mo tenesc clasa șdb.Model.
Astfel, la rularea scriptului ce se ocupa de crearea bazei de date, SQLAlchemy, va crea tabelele
în func ie de clasele ce mostenesc clasa ț db.Model.
Pentru a defini câmpurile unui tabel vom ini ializa fiecare atribut al clasei ce mo tene te clasa ț ș ș
db.Model cu instan e 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

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
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 mo tene te clasa ș șdb.Model.
Clasa Utilizator contine urmatoarele atribute: id – contine o instanta a clasei db.Column create
pentru un câmp de tip întreg ce este i cheie primară, șnume – ce contine o instan ă a clasei ț
db.Column ini ializată pentru un camp de tip string a cărui valoare nu poate fi nulă, ț prenume –
ce con ine o instan a a clasei ț ț db.Column ini ializată pentru un camp de tip string ce nu poateț
con ine o valoare nulă, ț parola – con ine o instan ă a clasei ț ț db.Column ini ializată pentru unț
element de tip string ce nu poate con ine o valoare nula. ț
Un alt avanatj al SQLAlchemy este faptul că nu constrânge 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 mo tenesc clasa șdb.Model sunt reprezentarile tabelelor din
baza de date, acestea con in i metode speciale folosite pentru a efectua interogari. ț ș
Exemplul următor demonstreaza cele mai frecvent utilizate meode pentru efectuarea unei
interogări:
utilizatori = Utilizator.query.all()
george = Utilizator.query.filter_by(name='geroge').first()
utilizatorul1 = Utilizator.query.get(1)
42

DA VID LAURENȚIU ROLUL ȘI IMPORTANȚA
INTERNETULUI ȘI A
PAGINILORWEB
În primul exemplu atribuim variabilei utilizatori o lista ce va con ie toate obiectele de tip ț
Utilizator din baza de date.
În al doilea exemplu atribuim variabilei george ca i valoare obiectul returnat de efectuarea uneiș
interogări după câmpul nume.
În al treilea exemplu atribuim vaiabilei utilizatorul1 valorea returnată de interogarea efectuata
cu scopul de a ob ine elementul cu țid-ul 1.
Pentru a adăuga informa ii noi în baza de date va trebui sa adăugam 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 confirmăm schimbarea.
Exemplul următor 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

DA VID LAURENȚIU ARHITECTURA
MAGAZINULUI WEB
III. ARHITECTURA MAGAZINULUI WEB
III.1 Prezentarea magazinului
Magazinul web creat in cadrul lucrării 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
împăr ită in 3 zone: bara de navigare, zona de con inut 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
afi ează meniul cu categoriile disponibile, casu a de căutare i butoanele de ie ire din cont i deș ț ș ș ș
interogare a cosului.
Fig. 3.1 – Bara de navigare
Zona de con inut diferă în func ie 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

DA VID LAURENȚIU ARHITECTURA
MAGAZINULUI WEB
Fig. 3.2 – Con inutul paginii de co ț ș
Zona de subsol con ine o bară de navigare ce cuprinde numele creatorului magazinului web ț
Fig. 3.3 – Con inutul subsolului ț
In continuare, voi prezenta fiecare pagină din cadrul aplica iei. ț
Pagina de index, con ine un carusel cu imagini ale celor mai noi 3 produse, iar mai jos con ine ț ț
informa ii detaliate despre produse, fiecare imagine este un link catre pagina produsului. ț
45

DA VID LAURENȚIU 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 dore te să-l transmită administratorului siteului. Dacă formularul ș
completat de utilizator a fost valid, utilizatorul va fi redirec ionat pe o noua pagina in care ii este ț
confirmată trimiterea cu succes a emailului, iar un email cu mesajul utilizatorului va fi expediat
către administratori.
46

DA VID LAURENȚIU ARHITECTURA
MAGAZINULUI WEB
Fig. 3.5 – Formularul de contact
Fig. 3.6 – Trimiterea cu succes a unui mesaj
47

DA VID LAURENȚIU ARHITECTURA
MAGAZINULUI WEB
Fig. 3.7 – Recep ionarea mesajului de catre administrator ț
Pagina de prosduse, va con ine, î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
con ine: pre ul, poza cu link spre pagina produsului i butonul de adăugare în co .ț ț ș ș
Odată ce un produs a fost adăugat în co . o casu ă de dialog ce va confirma acest lucru va fi ș ț
afi ată.ș
Fig. 3.8 – Adăugarea unui produs în co ș
48

DA VID LAURENȚIU ARHITECTURA
MAGAZINULUI WEB
Pagina de căutare, va con ine toate rezultatele căutării efectuate prin intermediul căsu ei de ț ț
căutare con inută în meniul de navigare. Rezultatele cautarii vor fi structurate astfel: poza ț
produsului cu link la pagina produsului, descrierea prosului, pre ul acestuia si disponibilitatea ț
produsului.
Fig. 3.9 – Căutarea unui produs
Pagina de înregistrare, con ine un formular cu datele pe care un utilizator trebuie sa le ț
completeze pentru a efectua cumpărături 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

DA VID LAURENȚIU ARHITECTURA
MAGAZINULUI WEB
Fig. 3.10 – Pagina de înregistrare
Fig. 3.11 – Confirmarea trimiterii emailului ce con ine codul de activare ț
50

DA VID LAURENȚIU ARHITECTURA
MAGAZINULUI WEB
Fig.3.12 – Codul de activare trimis prin email
Fig. 3.13 – Activarea cu succes a contului
Pagina de autentificare, con ine 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

DA VID LAURENȚIU ARHITECTURA
MAGAZINULUI WEB
Fig. 3.14 – Autentificarea unui utilizator
Pagina de co , va con ine toate produsele aflate în co la momentul accesării paginii i va oferi ș ț ș ș
utilizatorului posibilitatea să modifice cantitatea cumpărată din acel produs, să teargă produsul, ș
să vizualizeze în timp real costul acelui produs i costul întregii tranzac ii. După ce utilizatorul ș ț
i-a setat cantitatea dorită dintr-un anumit produs i a selectat i metoda de cumpărare, va trebuiș ș ș
să introducă datele de transport, iar un email cu factura va fi trimis.
Fig. 3.15 – Pagina de co ș
52

DA VID LAURENȚIU ARHITECTURA
MAGAZINULUI WEB
Fig. 3.16 – Introducerea datelor de transport
53

DA VID LAURENȚIU ARHITECTURA
MAGAZINULUI WEB
Fig. 3.17 – Structura emailului ce con ine factura ț
III.2 Strucura backendului aplica iei ț
Pe partea de server, aplica ia este împar ită în 21 de rute menite sa deserveasca fiecare dintre ț ț
paginile prezentate mai sus, atât si apelurile efectuate prin AJAX pentru a nu mai fi necesară
reâncarcarea paginii.
Demn de prezentat sunt urmatoarele rute:
Ruta pentru pagina de index, trimite uilizatorului pagina de index pasând func iei ț
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 fi ierului șhelper.py i este o interfa ă mult maiș ț
54

DA VID LAURENȚIU 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 func ia ț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 căutare, va returna templateul pentru pagina de cautare pasandu-i func iei ț
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

DA VID LAURENȚIU 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 func ie de validitatea acestuia, va trimite un email cu codul de activare ș ț
sau îl va aten iona pe utilizator să recompleteze corespunzător 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

DA VID LAURENȚIU ARHITECTURA
MAGAZINULUI WEB
sender=app.config['ADMINS'][0],
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

DA VID LAURENȚIU 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 func ie de acest ș ț
aspect, va decide daca utilizatorul va fi autentificat sau daca va fi redirec ionat spre pagina de ț
autentificare – situa ie în care se ajunge în momentul completării 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

DA VID LAURENȚIU 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 con ine 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

DA VID LAURENȚIU 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 ș ț
con inute î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 co ului, este folosită pentru a adauga un produs nou în co atunci când ș ș
apăsăm butonul de adăugare în co . Această rută este folosită în apelurie ș AJAX pentru a nu mai
fi necesară reîncărcarea 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

DA VID LAURENȚIU ARHITECTURA
MAGAZINULUI WEB
int(request.form["quantity"])
)
Ruta pentru verificare a disponibilită ii 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 co ului, este folosita pentru a spori securitatea i a evita ș ș
eventualele atacuri informatice realizate de utilizatorii rău voitori. Este mult mai sigur sa
calculăm valoarea co ului pe server decât 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

DA VID LAURENȚIU 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="ok")
return jsonify(status="fail")
Ruta pentru obtinerea numelui firmei de transport, folosita pentru a men ine valoarea firmei de ț
transport aleasă de utilizator de fiecare dată când acesta părăse te 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 către 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

DA VID LAURENȚIU 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',
sender=app.config['ADMINS'][0],
recipients=[form.email.data, app.config['ADMINS'][0]],
messageBody='–-',
messageHtmlBody=render_template('bill.html',
cart=cart,
63

DA VID LAURENȚIU 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"] = {}
return jsonify(status="ok")
III.3 Structura bazei de date
Aplica ia con ine 11 clase ce mo tenesc 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, con ine câmpuri pentru: nume, prenume, parolă, email, dar i un câmp ț ș 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 făra a mai fi nevoie
sa executăm o interogare.
class User(db.Model):
__tablename__ = 'user_table'
64

DA VID LAURENȚIU ARHITECTURA
MAGAZINULUI WEB
id = db.Column(db.Integer, primary_key=True)
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

DA VID LAURENȚIU 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 loca ia în care se va expedia produsul ț
unui utilizator. Motivul pentru care nu-l constrângem 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 rela ie de tip one-to-many, întrucat un ț
utilizator poate avea mai multe adrese.
class UserData(db.Model):
__tablename__ = 'userdata_table'
id = db.Column(db.Integer, primary_key=True)
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

DA VID LAURENȚIU ARHITECTURA
MAGAZINULUI WEB
Clasa PendingUser, este folosită pentru a stoca temporar un utilizator până în momentul
accesării 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'
id = db.Column(db.Integer, primary_key=True)
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)
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 executării unei noi interogări.
class Product(db.Model):
67

DA VID LAURENȚIU ARHITECTURA
MAGAZINULUI WEB
__tablename__ = 'product_table'
id = db.Column(db.Integer, primary_key=True)
category = db.Column(db.String, nullable=False)
description = db.Column(db.String, nullable=False)
name = 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. Întrucât un
produs poate avea mai multe poze se creaza o relatie de tip one-to-many intre aceste 2 clase.
68

DA VID LAURENȚIU ARHITECTURA
MAGAZINULUI WEB
class ProductPictures(db.Model):
__tablename__ = "product_pictures_table"
id = db.Column(db.Integer, primary_key=True)
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, întrucât un produs poate avea mai multe comentarii.
class ProductComment(db.Model):
__tablename__ = 'product_comments_table'
id = db.Column(db.Integer, primary_key=True)
comment = db.Column(db.String, nullable=False)
userId = db.Column(db.Integer, db.ForeignKey('user_table.id'))
productId = db.Column(db.Integer, db.ForeignKey('product_table.id'))
def __init__(self, comment, userId):
self.comment = comment
self.userId = userId
69

DA VID LAURENȚIU ARHITECTURA
MAGAZINULUI WEB
def __repr__(self):
return "<ProductComment(%r)>" % self.comment
Clasa ProductSpecifications, este folosită pentru a stoca o specifica ie a unui produs. Întrucât ț
magazinul suporta diferite tipuri de produse nu se poate uniformiza într-un mod eficient modul în
care sunt reprezentate specifica iile unui produs. Din acest motiv am ales să introduc o nouă ț
tebela ce va con ine câte o specifica ie, creandu-se, astfel, o relatie one-to-many între clasa ț ț
Product iș ProductSpecifications.
class ProductSpecifications(db.Model):
__tablename__ = 'product_specification_table'
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String, nullable=False)
data = db.Column(db.String, nullable=False)
productId = db.Column(db.Integer, db.ForeignKey('product_table.id'))
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 adăuga un nou produs în baza de date va trebui sa instan iem clasa țProduct iș
ProductPictures – întrucât multe din func ionalită ile aplica iei nu vor func iona în lipsa unei ț ț ț ț
poze. Odata creată o nouă instan ă a clasei țProduct este necesară adăugarea ei în baza de date.
Instata clasei ProductPictures poate fi adaugată in baza de date decât dupa ce a fost adaugată
cea a clasei Product întrucat este necesar id-ul produsului, iar id-ul este generat decât atunci
70

DA VID LAURENȚIU ARHITECTURA
MAGAZINULUI WEB
cand produsul este incărcat în baza de date.
Următorul exemplu dovede te 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 aplica ii web de complexitate ț
medie, dar i uneltele moderne folosite pentru ducerea la bun sfar it a unei astfel de aplica ii. ș ș ț
Proiectul prezentat in acest document se diferen iază de celelalte din categoria sa prin folosirea ț
unei noi tehnologii, relativ noi pe partea de server – limbajul Python i biblioteca Flask. ș
Avantajul acestei diferen ieri fa ă de aplicatiile web clasice ce folosesc, de obicei, un limbaj ț ț
precum Php este u urin a în dezvoltare. ș ț
Dezavantajele acestei op iuni sunt lipsa unor extensii ce ar putea să ajute programatorul în ț
procesul de devoltare al unui magazin web – a fost necesar să implementez această
func ionalitate de la zero, dar am compensat printr-un grad mai mare de flexibilitate – i faptul căț ș
este mult mai dificilă găsirea unei companii de hosting cu un pre rezonabil care să suporte ț
tehnologiile folosite în acest proiect. De i numărul 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 găzdui această aplica ie. ț
Flask este un framework web nou pe pia ă, fapt datorită caruia nu beneficiaza de mul imea de ț ț
extensii pe care o are la dispozi ie Django. Motivul pentru care am optat pentru Flask în ț
dezvoltarea acestei aplica ii este flexibilitatea. Alegerea unui framework web precum Django ne- ț
ar fi impus un mod strict de dezvoltare ce ar fi făcut imposibilă implementarea anumitor
func ionalită i.ț ț
În momentul de fa ă, aplica ia pune la dispozi ie, cel pu in din punct de vedere al utilizatorului ț ț ț ț
de rand, toate specifica iile necesare pentru a-i conferi utilizatorului o experien ă de utilizare ț ț
decenta. O func ionalitate ce ar fi sporit comunicarea cu utilizatorul ar fi fost implementarea unui ț
modul de chat, ce ne-ar fi permis să discutăm î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, totu i diferen a 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 func ionalitate pe care dorim să o adaugăm pe viitor este un sistem de validare a comenzilor ț
i a înregistrării 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