Crearea unui magazin Online

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
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.

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.

commerce ar putea, în viitor, sa fie utilizată și pentru plata TVA sau a impozitelor firmelor.

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ă).

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;

- 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ă;

- 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.).

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 computer 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 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.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
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
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

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,
<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>
<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.

Î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.

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
<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
program simplu in JavaScript.

Definirea variabilelor

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

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>
</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);
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>
<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

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

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 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.

Structuri de date

Python oferă tipuri tradiționale de date, cum ar fi numărul întreg (integer, int) sau cel rațional
(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
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 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.

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.
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. 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)

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.

Urmatorul exemplu ilustreaza conceptele explicate mai sus 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)

Î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.