DESIGNER PAGINI WEB

Anca Mehedinu
Irina Ciocrlan

DESIGNER PAGINI WEB

DESIGNER PAGINI WEB

INTRODUCERE
Designerul de pagini de web (studii medii) este liantul ntre clienii, persoane juridice
sau persoane fizice, fiecare cu nevoile lor i tehnologia de promovare prin pagini web. Este
un bun cunosctor al structurii tehnologice a internetului, a mediului specific n care sunt
instalate-publicate, gzduite, promovate i vizitate paginile diferitor clieni de ctre
vizitatorii din ntreaga lume. Este cel care face transferul de informaie primit de la client,
sub o anume form, ntr-o manier ct mai apropiat de vizitatori.
Vizualizarea coninutului informaional destinat vizitatorilor de pagini web se face prin
intermediul diferiilor navigatori sau browseri, cum ar fi: Internet Explorer, Netscape,
Opera, Mozilla, Konqueror sau Firefox.
Designerul de pagini web pune n practic cunotine din domeniul marketing,
realizeaz analize i sinteze, pentru a descoperi cerinele vizitatorilor i clienilor, are
aptitudini specifice proiectanilor n domeniul tehnologiei informaiei dar i calitile unui
artist cu ajutorul crora modeleaz site-urile. El reuete s mbine datele tehnice ntr-o
structur artistic ct mai plcut i funcional.
ntruct proiectarea unei pagini web presupune activiti din domenii conexe, este
necesar munca n echipe de webdesigneri care s conlucreze la realizarea acestor lucrri
complexe. Ocupaia satisface un segment limitat al nevoilor clienilor, printr-o specializare
ntr-o anumit zon a proiectrii de pagini de internet: texte, grafic i animaie, coninut,
multimedia, interactivitate.
Cunotine necesare practicii ocupaiei:

calculatoare i subsisteme hardware: structura i arhitectura calculatoarelor;

Serviciul World Wide Web;

HTML ca limbaj de marcare al hypertext-ului;

JavaScript i alte limbaje de scriptare;

Framework.NET

PHP & MySQL.

Autorii
Septembrie 2014

DESIGNER PAGINI WEB

CUPRINS
INTRODUCERE..............................................................................................................2
CUPRINS.........................................................................................................................3
Partea I..................................................................................................................................4
Partea II..............................................................................................................................12
Partea III.............................................................................................................................16
PARTEA IV........................................................................................................................19
PARTEA V.........................................................................................................................29
PARTEA VI........................................................................................................................44
PARTEA VII.....................................................................................................................274
PARTEA VIII...................................................................................................................278
PARTEA IX......................................................................................................................282
PARTEA X.......................................................................................................................301
PARTEA XI......................................................................................................................307
PARTEA XII.....................................................................................................................312
PARTEA XIII...................................................................................................................322
PARTEA XIV...................................................................................................................330
PARTEA XV....................................................................................................................334
PARTEA XVI...................................................................................................................340
Partea XVII......................................................................................................................348
BIBLIOGRAFIE..........................................................................................................352

DESIGNER PAGINI WEB

PARTEA I
DEZVOLTAREA PROFESIONAL.
COMUNICAREA INTERACTIV LA
LOCUL DE MUNC. LUCRUL N
ECHIP

DESIGNER PAGINI WEB

1.1. DEZVOLTAREA PROFESIONAL

Aspecte generale
Conducerea propriei dezvoltri profesionale nseamn a fi capabil de a:
Evalua propriile performane n comparaie cu cerinele slujbei voastre prezente sau
viitoare prin solicitarea permanent a unui feedback din partea colegilor i a clienilor;
Identifica un stil personal de nvatare pentru direcionarea dezvoltarii competenelor
voastre.
Elabora un plan de dezvoltare personal i a-l aplica;
Utiliza diverse metode de investigare a intereselor personale n scopul dezvoltrii sau
mbunatatirii cunotinelor i competenelor;
Identifica i exploata oportunitaile de dezvoltare profesional.

Cteva informaii de baz

Dezvoltarea profesional nseamna s i intelegi propriile puncte forte i puncte slabe,
s i
identifici obiectivele i cum poi s te ajui pe tine nsui s le atingi. Pe parcursul definirii
competenelor din cadrul acestui program privind experiena de munc vi se va solicita s
identificai n fiecare etap punctele forte i mbuntirile pe care le putei aplica n afara
experienei de munc, n viitoarea voastr carier.
Dezvoltarea profesional proprie a captat o importan tot mai mare n ultimele
decenii. n
prezent este mult mai probabil s aveti mai multe cariere n cadrul mai multor organizaii, iar
ceea ce n trecut era cunoscut drept scara unei cariere, este astazi o expresie nvechit.
Acum, tendina s-a indeprtat de la ideea de urmare a unei ci prestabilite de promovare
lucrnd pentru acelai angajator, n schimb este mult mai posibil s castigai experien dintro
varietate de funcii n diferite organizaii, transfernd competenele i experienele de la una
la
alta.
Probabil vei recunoate din experienele pe care le-ai avut n cadrul colii i
universitii c
suntei mai buni la anumite lucruri dect la altele. Unele vi se par uoare, la altele trebuie s
petrecei mai mult timp cercetnd, nvatnd i exersnd. Acelai principiu se aplic i carierei
voastre. Identificarea unei competene sau a unui domeniu de cunotine pe care dorii s le
mbunttii reprezint un pas, dar cu toate acestea merit s petrecei o perioada de timp
analiznd cum voi ca persoane ai putea nvaa cel mai eficient. Prin aceasta putei s v
directionai modul de abordare ctre nvaare i mbuntirea competenelor, fie c acest

DESIGNER PAGINI WEB

lucru nseamn cercetare sau strngerea de informaii de pe Internet sau participarea la
cursuri
de instruire interactive.
Un mod de identificare a preferinelor legate de stilul vostru de nvare este cel
descris de
Peter Honey i Alan Mumford. Cercetrile pe care acetia le-au ntreprins indic faptul c
puteti nvata mult mai repede dac folositi stilul vostru natural de a invata. Un rezumat al
acestor stiluri de nvare poate fi gasit pe site-ul web al EFWE, www.efwe.org.
Dezvoltarea profesional nu trebuie realizat independent. Dimpotriv, feedback-ul
din partea
colegilor, a prietenilor i mentorilor are un rol vital n a v ajuta s identificai care sunt
punctele slabe i zonele care trebuie dezvoltate. Solicitarea unui feedback nu trebuie s fac
parte doar din procesul anual de revizuire, ci trebuie s fie o constant de-a lungul ntregii
voastre activiti. Deschiderea ctre feedback-ul pe care l primii reprezint de asemenea o
abilitate esenial, la fel ca i disponibilitatea de a aciona conform acestuia, n cazul n care
considerai necesar. Planurile de dezvoltare personal (PDP) sunt un instrument folositor
pentru construirea unei structuri n spatele obiectivelor dumneavoastr, iar acestea pot fi ct
de simple sau detaliate dorii.
Este ilustrat un exemplu de baz prin care se identific paii i oportunitile pentru
atingerea scopurilor voastre, suportul necesar pentru ndeplinirea obiectivelor i se specific
perioada de timp n care le vei obine.

Exemplu
Domeniu de
competen

Pai

De ce suport am Perioada
nevoie?
de timp

Capacitatea de
a face
prezentri

1.Participarea la un curs
de
formare a abilitilor de
prezentare.
2.Prezentarea proiectului
n
cadrul
unei
sedine
interne.
3. Identificarea altor
oportuniti de prezentare
pe masur ce apar.

Obinerea aprobrii 1 lun

pentru curs de la 2 luni
managerul direct.
Permanent

Obinerea
acordului efului de
departament pentru
a m prezenta la
sedin.

Obinerea
sprijinului
managerului direct
pentru identificarea
altor oportunitai i
obinerea feedbackului

Recomandari:
Preferina pentru modul de nvare i dezvoltare de noi competene se va schimba n timp
i poate fi influenat de mediu i rolul pe care l avei prin funcia voastr. Periodic,
trebuie s analizai dac preferinele voastre s-au schimbat, pentru a v ajuta n
dezvoltarea voastr viitoare.

DESIGNER PAGINI WEB

Profitai de ansa de a experimenta noi modaliti de dezvoltare a competenelor. Nu le
excludei doar pentru ca nu le-ai mai ncercat niciodat.
Obinuii-v s v stabilii obiective n mod regulat i s v analizai progresul prin
implicarea altora.
Dezvoltarea profesional se refer la competena necesar autoevalurii capacitilor
proprii i aplicrii n activitatea practic a cunotinelor acumulate la diverse forme de
formare continu, asigurnd astfel mbuntirea performanelor profesionale.
Elemente de competen
1. Identific necesarul de perfecionare

2. Autoinstruire profesional

Criterii de realizare
1.1. Necesarul de perfecionare este stabilit
prin
autoevaluare obiectiv
1.2. Necesarul de perfecionare este
identificat
pe baza observaiilor venite din partea echipei
multidisciplinare
2.1. Materialele de specialitate sunt consultate
periodic/ori de cte ori este necesar pentru
asigurarea unui volum de informaii noi
necesare n activitatea desfurat
2.2. Autoinstruirea profesional este fcut
prin
consultarea
surselor
de
informare
corespunztoare necesarului de informaii
2.3. Cunotinele dobndite sunt aplicate n
activitatea curent n scopul creterii calitii
muncii
2.4. Cunotinele dobndite sunt aplicate n
interesul beneficiarului

Gama de variabile
Materialele documentare de specialitate pot fi: publicaii de specialitate, manuale de
prezentare i exploatare sau ghiduri de utilizare a altor produse software, participare la
expoziii,
trguri, simpozioane de specialitate etc.
Pentru autoinstruire pot fi folosite: manuale de specialitate, reviste, documentaie electronic,
INTERNETul etc.
Ghid pentru evaluare
Cunotinele necesare se refer la:
- Participare la cursuri de instruire
- Citirea de publicaii de specialitate
- Aplicarea cunotinelor dobndite

DESIGNER PAGINI WEB

La evaluare se urmrete:
- Contiinciozitatea de a-i mbunti activitatea profesional;
- Capacitatea de analiz i sintez viznd identificarea necesarului de perfecionare ;
- Capacitatea de a procesa informaiile;
- Obiectivitate n autoevaluarea nivelului de cunotine;
- Receptivitate fa de informaiile de specialitate.

1.2. COMUNICAREA INTERACTIV LA LOCUL DE

MUNC
Descriere
Unitatea se refer la competena de comunicare a sarcinilor, evenimentelor i a tuturor
aspectelor legate de activitile de la locul de munc, n cadrul discuiilor n grup sau
individuale i la capacitatea de a formula i a transmite opinia.

Elemente
de Criterii de realizare
competen
1.
Transmite
i 1.1. Metoda de comunicare este utilizat corespunztor
primete informaii
situaiei date pentru transmiterea i primirea corect i rapid
a informaiilor.
1 .2. Transmiterea i primirea informaiilor este efectuat
permanent cu respectarea raporturilor ierarhice i funcionale.
1 .3. Limbajul utilizat este specific locului de munc pentru
primirea i transmiterea informaiilor cu corectitudine.
1 .4. Modul de adresare utilizat este concis i politicos.
1 .5. ntrebrile utilizate sunt pertinente i logice pentru
obinerea de informaii suplimentare i clarificri.
2. Particip la discuii 2.1. Opiniile i punctele de vedere proprii sunt communicate
de grup
deschis pentru clarificarea problemelor aprute.
2.2. Opiniile proprii sunt susinute cu argumente clare, prin
intervenii prompte i logice.
2.3. Participarea la discuii n grup este efectuat prin
respectarea opiniilor i a drepturilor celorlali colegi.
2.4. Problemele sunt discutate i rezolvate printr-un proces
agreat i acceptat de toi membrii grupului.
2.5 Divergenele aprute sunt comunicate deschis efului
direct, pentru rezolvarea acestora cu promptitudine.
2.6 Divergenele aprute sunt rezolvate rapid, pentru
desfurarea unei activiti fluente.
Gama de variabile
Unitatea se aplic la toate ocupaiile din domeniul informaticii, proiectrii i publicitii
(electronice i tipografice).

DESIGNER PAGINI WEB

1. Surse de informaii: documentaia (fia de proiect, fia de lucrare) specifice lucrrii,
etaloane, referine, sarcini verbale / scrise de la efii direci .
2. Forme de comunicare: scris / verbal
Comunicarea se refer la activitile procesului de creaie design, respectiv de implementare
punere n opera a concepiei.
Ghid pentru evaluare
Cunotine necesare:
- Terminologia de specialitate.
La evaluare se urmrete:
1. Utilizarea corect a terminologiei de specialitate;
2. Adaptarea stilului de comunicare la situaie i interlocutor;
3. Capacitatea de selecie a informaiile primite;
4. Politeea i promptitudinea la transmiterea i recepionarea informaiilor;
5. Receptivitatea, adaptabilitatea; respectul faa de prerile altor persoane.

1.3. LUCRUL N ECHIP

n zilele noastre, individualitatea si originalitatea personala au pierdut teren in fata
muncii in echipa, mai ales in cazul sarcinilor complexe. Toate companiile bazate pe
informaie, care practica tehnologii de vrf, servicii ireproabile si un management modern si
eficient, solicita din partea personalului abilitati superioare de comunicare si team-player
(lucru in echipa). O echipa profesionista este o structura in care intregul este mai mult decat
suma partilor. Membrii formatiei actioneaza in sinergie si consens pentru realizarea unui
obiectiv comun. Echipa inseamna comunicare directa si fatisa, obligand la asumarea
constanta a responsabilitatii propriilor obiective, deoarece neindeplinirea acestora este
imediat
sanctionata
de
catre
grup.
In managementul resurselor umane, termenul de echipa/team este frecvent utilizat, desi
cel de retea tinde sa-i ia rapid locul. Adesea il folosim pentru a ne referi la intreaga
companie, deoarece scopurile propuse nu pot fi atinse decat prin coroborarea tuturor fortelor.
Dar totdeauna este dificil sa sudezi, sa motivezi, sa pregatesti si sa conduci o echipa strans
unita, formata din peste doisprezece membri.

Diagnosticarea echipelor
Studii realizate in peste 150 de organizatii din diferite domenii si la care au participat
peste 6000 de persoane pun in evidenta faptul ca o echipa performanta este caracterizata de 5
dinamici cheie:

Membrii echipei. Membrii echipei au competentele tehnice si interpersonale necesare

pentru a putea lucra eficace in echipa.

Relatiile de lucru in cadrul echipei. Relatiile in cadrul echipei sunt constructive:
caracterizate prin deschidere si sprijin reciproc.

DESIGNER PAGINI WEB

Procesele pe care le foloseste echipa. Rezolvarea problemelor si luarea deciziilor in

echipa se face la timp si cu cele mai bune rezultate.

Atributele liderului de echipa. Conducerea incurajeaza realizarile colective si lucrul

in echipa.
Factorii organizationali care influenteaza lucrul in echipa. Mediul organizational
(practicile manageriale, sistemele, structurile si procesele) promoveaza in mod sincer
colaborarea si lucrul in echipa.

Pentru a actiona eficace in directia dezvoltarii unei echipe trebuie sa stabilim unde
anume este necesar sa se focalizeze interventia sau daca este cazul unei interventii sistemice.
Instrumentele pe care le utilizam pentru diagnosticare vizeaza aceste 5 dinamici cheie:

Effective Team Member (ETM) este un instrument bazat pe Feedback la 360 de

grade care analizeaza abilitatile individuale de lucru in echipa. O varianta simplificata

a ETM poate fi folosita in timpul programelor de teambuilding ca baza pentru
elaborarea unor planuri individuale de invatare si dezvoltare.
Analiza Motivatiei Echipei (AME) este un instrument usor de aplicat si interpretat

care permite identificarea factorilor motivationali asupra carora trebuie actionat

pentru a obtine cel mai mare impact.
Metoda Sedintelor Asistate (MSA) consta in participarea consultantilor nostri la o

serie de sedinte obisnuite ale echipei. Dupa etapa de observare urmeaza oferirea de
coaching echipei pentru cresterea performantelor.
After Action Review (AAR) este o metoda de coaching pentru echipe utilizata si de

armata SUA care ne permite sa ajutam echipa sa progreseze in ceea ce priveste

eficacitatea si eficienta proceselor ei lucru. Utilizam un set de 12 criterii de evaluare a
performantei definite in termeni comportamentali. Folosim AAR atat in faza de
diagnosticare cat si in sesiunile de reflectie din cadrul programelor de teambuilding.
Leadership Effectiveness Apraisal Package (LEAP) este un instrument bazat pe

Feedback la 360 de grade care ofera liderului echipei o oglinda a diferentelor dintre
perceptia proprie si cea a subordonatilor, colegilor si sefilor referitoare la
competentele sale de conducere. Competentele evaluate sunt direct corelate cu
capacitatea de a conduce echipa catre performante inalte.
Analiza Mediului Organizational (AMO) urmareste stabilirea aspectelor (practici
manageriale, sisteme, structuri si procese) asupra carora trebuie sa ne concentram
pentru a ajuta la crearea unui mediu favorizant pentru lucrul in echipa. Folosim in
acest scop metode cum sunt: workshop-uri cu echipa, interviuri cu manageri si
persoane cheie din cadrul organizatiei, chestionare, tehnici proiective.

10

DESIGNER PAGINI WEB

11

DESIGNER PAGINI WEB

PARTEA II
APLICAREA PROCEDURILOR DE
CALITATE

12

DESIGNER PAGINI WEB

ESTE NEVOIE DE ORDINE

Pentru obinerea unui un rezultat n bun web design este nevoie de ordine. Lucrul
haotic, "vznd i fcnd" aduce arareori rezultate. n plus, ntotdeauna cineva risca s fie
nemulumit n final. Aadar, toate etapele de lucru trebuie s fie clare de la nceput, puse
pe hrtie i urmate, astfel nct nimic s nu rmn pe dinafar. Trebuie s existe
proceduri testate i eficiente pentru fiecare stadiu de lucru.

Proceduri de calitate, pe stadii de lucru, n proiectarea paginilor web

Activitatea se desfoar n compartimentul de informatic, atelier- birou, sau client dac condiiile tehnice permit.
n web design, orice detaliu uitat devine o problema mai trziu!
PROCEDUR PRIVIND REALIZAREA UNUI SITE
Colectarea datelor de la client - aadar, pentru nceput designerul se ntlnete cu
clientul. Afl despre ce este vorba i care sunt nevoile reale ale clientului, dincolo
de "am nevoie de un site". Se intereseaz de afacerea lui, caut esena i o ntelege
din toate materialele de prezentare i din discutie. Se traseaz primii pai:
Primul pas n web design - elaborarea de prototipuri: interfata grafica, sau
designul site-ului, layoutul, faa, prima pagin, un "print-screen" a ceea ce se va
construi n etapele urmtoare.
Al doilea pas n web design - elaborarea site-ului : grafica aplicat; acum
dezvoltm fiecare pagin pornind de la tema grafic aprobat, facem analizele de
"usability", gndim n detaliu fiecare meniu, pagin n aa fel nct experiena de
navigare s fie ct mai bun, iar conversia cat mai mare.
Al treilea pas - web development testarea, publicarea, i ntreinerea siteului: acum programm site-ul i dm viata tuturor elementelor de web design
stabilite n etapele anterioare; acest pas se finalizeaza cu o verificare a calitii,
pentru a fi siguri nu numai ca nu ne-a scapat nimic, dar i ca toate elementele sunt
mbinate exact asa cum trebuie. De asemenea trebuie intoduse textele. Fr texte,
un site nu exist. Se poate ntmpla s se construiasc un site al crui continut s
nu fie mulumitor , pentru ca nu aduce vizite suficiente, nu este uor de gasit n
Google i alte motoare de cutare sau este gsit dupa cuvinte i fraze care nu
intereseaz. Pe scurt, textele sunt o problem. Pentru efecte rapide la inceput, este

13

DESIGNER PAGINI WEB

suficient s adaugam corect coninutul n site. Ulterior, pentru c nici concurena
nu st degeaba, trebuie s facem periodic cercetarea online necesar, s revizuim
constant textele, s schimbm cte ceva acolo unde este nevoie i s adaugam
coninut nou.

Criterii de performan pe care trebuie s le ndeplineasc un site

1. Web design ORIGINAL
Unul dintre principiile de web design este originalitatea. n prezent exista sute de
servicii care furnizeaza site-uri "la cheie", cu "design personalizat", dar care opereaza cu
interfete grafice lucrate n prealabil (template-uri) i carora le schimba culorile i le
adauga sigla beneficiarului. Aceste site-uri nu au un design original i se poate avea
surpriza de a regsi pe internet un site cu un aspect identic sau aproape identic.
2. Web design CORECT
Dei aspectul grafic poate fi acelai, ntre doua site-uri pot exista diferene majore de
execuie. Dup ce aspectul grafic dorit a fost hotrt, site-urile sunt lucrate prin utilizarea
unui cod specific care are o serie de particularitai i necesit rigurozitate. ntocmai ca o
limba strin, codul poate fi folosit mai fluent sau mai stngaci, n funcie de cunotinele
pe care le deine programatorul.
PROCEDUR PRIVIND CODAREA CORECT

pasajele de cod s poata fi uor descifrate i integrate cu elementele noi de

programare pentru ca atunci cand doriti s adaugati o componenta sau un
element functional nou n site-ul dumneavoastra s avei posibilitatea
interventiilor ulterioare facile.

cod curat care s asigure execuia mai fluid a diverselor funcii. Acest lucru
trebuie s conduc la o vitez de ncrcare mai mare. Acest aspect poate parea
fr importan, dar avnd n vedere viteza conexiunilor la care au n prezent
acces din ce n ce mai muli utilizatori de internet n cazul executarii unei cutri
ntr-un site cu continut complex, fiecare milisecunda conteaza.

cod curat, care s favorizeze site-ul la afiarea n lista de rezultate n motoarele

de cutare serioase (ex.:Google). Dac selectati View>Page Source (Ctrl+U n
Mozilla Firefox) sau View>Source (n Internet Explorer) vei putea observa ceea
ce "vd" motoarele de cutare atunci cnd intr n site-ul dumneavoastra. Cu ct

14

DESIGNER PAGINI WEB

codul este mai curat, cu att este mai favorizat optimizarea ctre deschiderea
site-ului n motoarele de cutare.
3. Web design USABILITY
Un site trebuie s fie uor de utilizat att pentru persoana care l administreaz
(beneficiar) ct i pentru vizitatori (poteniali clienti). Accesibilitatea funciilor,
vizibilitatea butoanelor, poziionarea meniurilor i a diverselor elemente de interes intr-o
pagina web este esenial pentru transformarea simplilor vizitatori n clieni. Noiunea de
"uzabilitate" definete msura n care un website este accesibil vizitatorilor si, dar i
motoarelor de cutare .
Un site frumos nu este neaparat i "usable"!!!!
n urm cu civa ani erau la mod site-urile realizate integral n Flash i exista nc
tendina pentru prezena online plin de animaie. Unul dintre dezavantajele site-urilor
realizate integral n Flash este compatibilitatea pariala cu motoarele de cutare ,
situaie n care coninutul este arareori indexat corespunztor, iar site-ul este greu de
gasit. n acelasi timp, un site care servete scopului pentru care a fost creat nu trebuie s
fie exclusiv pe gustul proprietarului su, ci i pe gustul celor care urmeaz sa-l viziteze.
Nu putem alege un fundal cu flori de cmp pentru un site dedicat modului de fabricaie al
uruburilor i piulielor, de exemplu. De asemenea melodia preferat a clientului este
arareori un fundal muzical potrivit pentru site.
4.

Interaciunea vizitatorilor cu site-ul

Un website i atinge scopul atunci cnd publicul pentru care a fost creat poate beneficia
optim de coninutul acestuia. Daca site-ul nu direcioneaza vizitatorii ctre accesarea
informaiilor disponibile, iar coninutul este greu de gsit, va pierde trafic. Vizitatorii se
plictisesc rapid, nu au rabdare s caute i tiu c pot gasi informaii, mai repede, i n alta
parte. Prin urmare, coninutul unui site trebuie s fie accesibil, lizibil i vizibil.
5.

Interactiunea motoarelor de cutare cu site-ul

Un website, pentru a atrage vizitele publicurilor int, trebuie s poat fi gsit rapid de
ctre motoarele de cutare i n directoarele cel mai des folosite. Astfel, exist procedurile
de optimizare a site-urilor pentru motoarele de cutare , care, daca sunt aplicate corect,
pot s dea rezultate foarte bune i s poziioneze site-ul preferenial fa de alte site-uri al
cror coninut nu este optimizat.

15

DESIGNER PAGINI WEB

PARTEA III
APLICAREA

NORMELOR

DE

TEHNICA SECURITATII MUNCII SI

A

PREVEDERILOR

PENTRU

STINGEREA INCENDIILOR

16

DESIGNER PAGINI WEB

INSTRUCIUNI SPECIFICE PROPRII

de aprare mpotriva incendiilor n spaii administrative, birouri, etc.
Art. 1 Se va reduce la minimum pericolul potenial de incendiu, n sensul limitrii la
strictul necesar a materialelor combustibile care se introduc n spaiile respective.
Art. 2 n interiorul spaiilor respective i pe holurile cldirilor n care sunt amplasate
acestea, fumatul este strict interzis.
Art. 3 Fumatul este permis numai n spaiile amenajate, prevzute cu perei de separaie i
ventilaie, astfel nct noxele rezultate s fie evacuate i s nu ptrund n holul cldirilor
sau interiorul spaiilor de lucru (birouri, sli).
Art. 4 Holurile cldirilor i casa scrilor vor fi meninute liber permanent. n caz de
incendiu acestea devin ci de evacuare a personalului i bunurilor materiale, de aceea se
interzice blocarea cu dulapuri, fiete, etc., fie i cu caracter temporar.
Art. 5 Amplasarea meselor de lucru se va face astfel nct, de la fiecare loc de munc
pn la ua de evacuare, s existe culoar pentru evacuarea persoanelor i bunurilor
materiale.
Art. 6 Se interzice utilizarea surselor de foc deschis (reouri, aeroterme etc.) pentru
nclzirea spaiilor de lucru sau n alte scopuri.
Art. 7 Prizele pentru alimentarea consumatorilor cu energie electric, vor avea marcat
lng ele tensiunea de alimentare.
Art. 8 Nu se vor alimenta la aceiai priz mai muli consumatori, pentru evitarea
suprasolicitrii acesteia, ceea ce ar conduce la nclziri repetate, urmate de deteriorarea
izolaiei conductorilor de alimentare i implicit la apriia nceputurilor de incendiu.
Art. 9 Se vor utiliza numai prize legate la centura de mpmntare a cldirii, iar
consumatorii vor fi alimentai prin techere cu protecie (al treilea fir).
Art. 10 Orice lucrri cu foc deschis, pentru remedierea unor deficiene aprute, se vor
executa numai dup ntocmirea permisului de lucru cu foc, realizarea msurilor necesare,
cu avizul pompierilor sau, dup caz, chiar sub supravegherea acestora.
Art. 11 La terminarea lucrului, la toi consumatorii electrici, se va ntrerupe alimentarea
cu energie electric, prin scoaterea din priz (calculatoare, imprimante, etc.).
Art. 12 Pentru stingerea incendiilor se vor utiliza n general stingtoare cu praf i CO2
(P3, P5, P6, P10 etc.) exceptnd incendiile la componentele electrice. Litera P nscris pe

17

DESIGNER PAGINI WEB

etichet arat c substana de stingere este praf n amestec cu CO2, iar cifra care o
nsoete arat cte kilograme de substan de stingere conine fiecare tip de stingtor.
Art. 13 Pentru stingerea incendiilor la componentele electronice calculatoare,
imprimante, etc. se utilizeaz stingtoare cu CO2 (G3, G6,, etc.). Litera G arat c
stingtorul (butelia) conine numai gaz CO2, iar cifra arat cte kilograme de gaz conine
butelia.

18

DESIGNER PAGINI WEB

PARTEA IV
INTRODUCEREA INFORMAIILOR
I

DATELOR

ELECTRONIC

19

FORMAT

DESIGNER PAGINI WEB

I.

Data i informaia

Informaia poate fi format din texte, numere, imagini sau sunete.

Datele sunt codificri binare ale informaiei, deoarece calculatorul nu tie s

prelucreze dect iruri binare, care pot fi modelate fizic prin impulsuri de curent,
cu dou niveluri de tensiune, ce corespund celor dou cifre binare:0 i 1.
II.

Tipuri de programe de introducere a datelor

a) Editoare de text: sunt o aplicaie software (un program) folosit pentru editarea
(= crearea i modificarea) de fiiere text, mai mult sau mai puin complexe. Spre
deosebire de procesoarele de texte, un editor de text nu ofer funciile complexe
specifice crerii asistate de calculator a publicaiilor (numite aplicaii de tip
DeskTop Publishing, DTP).Editoarele de text se folosesc ndeosebi pentu scrierea
(dezvoltarea) de programe i de pagini web (pot fi: simple ex.:Notepad, complexe:
phpDesigner7 (editor php printre altele) etc.).
b) Editoare grafice complexe: Schimb sau mbuntesc imaginile grafice de
exemplu:imagini bitmap, fotografii, imagini grafice vectoriale etc. Folosind un
editor grafic, imaginile pot fi modificate de utilizator folosind stilou, pensula,
aerograful i alte instrumente. Display-urile computerelor sunt alctuite din puncte
minuscule numite pixeli . Imaginile bitmap sunt de asemenea construite folosind

20

DESIGNER PAGINI WEB

aceste puncte. Cu ct sunt mai mici i mai apropiate, cu att calitatea imaginii este
mai ridicat, dar i mrimea fiierului necesar pentru stocarea ei. Dac imaginea
este afiat la o mrime mai mare dect cea la care a fost creat iniial, devine
granulat i neclar, deoarece pixelii din alctuirea imaginii nu mai corespund cu
pixelii de pe ecran. Exemple de editoare grafice: simple Paint, etc. complexe
CorelDRAW, Adobe Illustrator, etc.
c) Programe de calcul tabelar: uureaz sistemul de calcul i ordonarea alfabetic a
datelor dintr-un tabel (Tabelul este o baz de date n care se face ordonarea pe
rnduri orizontale i coloane verticale dup diferite criterii a datelor sau textelor
culese. Prin capul tabelei se stabilete punctele de referin a modului de
ordonare a datelor n cmpurile coninute de coloane sau rndur). Exemple
programe de calcul tabelar: MS Excel - cel mai folosit.
d) Programe (sisteme) de gestiune a bazelor de date: reprezint totalitatea
programelor utilizate pentru crearea, interogarea i ntreinerea unei baze de date.
Include dou categorii de module: module care sunt comune cu cele ale sistemelor
de operare ale calculatoarelor i module cu funcii specifice bazei de date.( O baz
de date, uneori numit i banc de date, reprezint o modalitate de stocare a
unor informaii i date pe un suport extern (un dispozitiv de stocare), cu
posibilitatea extinderii uoare i a regsirii rapide a acestora. Cel mai rspndit tip
de baze de date este cel relaional, n care datele sunt memorate n tabele. Pe lnga
tabele, o baz de date relaional mai poate conine: indeci, proceduri stocate,
declanatori, utilizatori i grupuri de utilizatori, tipuri de date, mecanisme de
securitate i de gestiune a tranzaciilor etc). Exemplu de sisteme de gestiune a
bazelor de date: MS Access, MySQL, VisualFox, etc.
e) Softuri pentru accesul direct la o baz de date: cel mai bun exemplu este
produsul phpMyAdmin (instalat i pe calculatoarele noastre n cadrul platformei
WAMP) care este un utilitar software gratuit scris n PHP destinat s se ocupe de
administrarea MySQL pe World Wide Web. phpMyAdmin suport o gam larg
de operaii cu MySQL. Operaiunile cel mai frecvent utilizate sunt suportate de
ctre interfaa de utilizator (gestionarea bazelor de date, tabele, cmpuri, relaii,

21

DESIGNER PAGINI WEB

indici, utilizatori, permisiuni, etc), n timp ce noi avem posibilitatea de a executa
direct o declaraie SQL.
III.

Procesul informaional

Este format din:

1. Introducerea datelor;
2. Prelucrarea datelor;
3. Extragerea informaiilor;
4. Arhivarea(stocarea)datelor.
IV. Introducerea datelor
Este procesul prin care datele sunt prelucrate de calculator i convertite ntr-un format pe
care-l poate prelucra.

Introducerea datelor se poate face:

- pe loturi(batch)
- direct(on-line)
Pentru a ntelege mai bine ideea de intoducere a datelor n calculator s vedem care sunt
sursele care furnizeaz informaia:

22

DESIGNER PAGINI WEB

Tipuri de fiiere:

Tipuri de baze de date:

23

DESIGNER PAGINI WEB

Tipuri de bnci de date:

V. Introducerea datelor cu ajutorul unui ablon de tip formular

24

DESIGNER PAGINI WEB

Un formular este un obiect din baza de date care se utilizeaz pentru a crea o interfa
utilizator pentru o aplicaie de baz de date. Un formular legat este unul conectat n
mod direct la o surs de date cum ar fi un tabel sau o interogare i poate fi utilizat pentru a
introduce, a edita sau a afia date din sursa de date. Alternativ, este posibil s creai un
formulat nelegat care s nu se lege direct la o surs de date, dar care s conin n
continuare butoane de comand, etichete sau alte controale de care avei nevoie pentru a
opera aplicaia.
Un ablon formular este un fiier singular ce conine mai multe fiiere formular de suport
sau fiiere surs, cum ar fi fiiere care definesc modul de afiare a controalelor n ablonul
formular, fiiere pentru imagini care apar n ablonul formular i fiiere de programare
care activeaz n ablonul formular comportamente particularizate. Aceste fiiere de
suport sunt cunoscute mpreun ca fiiere formular. La proiectarea unui ablon formular,
se pot vizualiza i se poate lucra cu fiierele formular care alctuiesc ablonul formular
extrgnd i salvnd acele fiiere formular ntr-un folder.
Cnd completeaz formulare, utilizatorii introduc informaii tastnd n casete text,
executnd clic pe elementele unei liste, bifnd casete de selectare i efectund alte aciuni.
Obiectele de interfa grafic utilizator interacioneaz cu obiecte care se numesc
controale. Controalele se utilizeaz pentru a afia date sau opiuni, a efectua o aciune sau
a uura citirea interfeei utilizator. Informaiile care se introduc ntr-un control sunt stocate
n sursa de date (Surs de date: Colecia de cmpuri i grupuri care definesc i stocheaz
datele unui formular . Controalele din formular sunt legate la cmpurile i grupurile din
sursa de date.a formularului).
Majoritatea acestor controale dintr-un formular sunt asociate sau legate la sursa de date a
ablonului formular. Majoritatea controalelor, inclusiv casetele text, casetele de selectare
i casetele list, sunt legate la cmpuri. Dac un control nu este legat la un cmp sau grup
din sursa de date sau dac este legat incorect, informaiile introduse n control nu se pot
salva corect n fiierul formularului adiacent.
Prezentm mai jos o list a controalelor cel mai des utilizate controalele standard - care
se asociaz de obicei cu colectarea i afiarea informaiilor:

Control

Pictogram

Descriere

25

DESIGNER PAGINI WEB

Caset text

Controlul cel mai frecvent

utilizat

Utilizatorii

formular.

pot

introduce

orice tip de text neformatat

ntr-o caset text, cum ar fi
propoziii, nume, numere,
date i ore. Casetele text nu
pot conine text formatat.
Un control care poate

Caset text mbogit

conine text formatat, aldin

sau cursiv, diverse fonturi,
dimensiuni de font i culori
de font. n plus, ntr-o caset
text mbogit utilizatorii pot
insera

imagini,

liste

tabele.
Un control care prezint

Caset cu list vertical

utilizatorilor

list

de

opiuni ntr-o caset. Pentru

a selecta un element din
list, utilizatorii fac clic pe o
sgeat pentru a deschide
lista de opiuni. Opiunile
pot s provin dintr-o list
creat manual, de la valorile
sursei

de

formularului
valorile

care

date
sau

ale
de

la

provin din

conexiunea de date la un
document XML, baz de
date,

serviciu

Web

bibliotec ori list.

26

sau

DESIGNER PAGINI WEB

Caset combo

Un control care prezint

utilizatorilor

list

de

opiuni ntr-o caset de unde

utilizatorii

selecteaz

elementul corespunztor sau

l tasteaz pe cel propriu.
Opiunile pot s provin
dintr-o list creat manual,
de la valorile sursei de date
ale formularului sau de la
valorile

care

provin din

conexiunea de date la un
document XML, baz de
date,

serviciu

Web

sau

bibliotec ori list.

Control
care
prezint

Caset list

utilizatorilor

list

de

opiuni ntr-o caset de unde

utilizatorii

selecteaz

elementul adecvat. Opiunile

pot s provin dintr-o list
creat manual, de la valorile
sursei

de

formularului
valorile

care

date
sau

ale
de

la

provin din

conexiunea de date la un
document XML, baz de
date,
Caset
(CheckBox

de

Web

sau

bibliotec ori list.

Un control care permite

selectare
pentru

serviciu

un

utilizatorilor s seteze valori

formular Web)

da/nu

sau

adevrat/fals,

adugnd sau eliminnd un

marcaj de selectare dintr-o

27

DESIGNER PAGINI WEB

caset

ptrat

ajutorul

mic.

Cu

CheckBox-urilor

userul are posibilitatea de a

alege unul, doua sau mai
multe variante de raspuns.
Un control care permite

Buton opiune (radio)

utilizatorilor s selecteze un
set de alegeri care se exclud
reciproc. Cnd se selecteaz
un buton de opiune dintr-un
grup, celelalte butoane de
opiune se debifeaz. Un
grup de butoane de opiune
este legat la un singur cmp
din sursa de date, iar fiecare
buton de opiune salveaz o
valoare
Buton

(de

diferit

respectivul cmp.
Un control care se poate

trimitere

pentru un formular Web)

utiliza pentru a remite un

formular sau interoga o baz
de

date,

ntre

alte

posibiliti. De asemenea,
butonul se poate asocia la
reguli sau cod particularizat
care

se

execut

cnd

utilizatorii fac clic pe buton.

28

DESIGNER PAGINI WEB

PARTEA V
PROCESAREA INFORMATIILOR SI
DOCUMENTELOR DIN FORMATE
BRUTE

29

DESIGNER PAGINI WEB

MICROSOFT WORD
Microsoft Word este o aplicaie de procesare de text i face parte din suita de aplicaii
Microsoft Office.
Un procesor de text, sau un sistem de pregtire a documentelor, este o aplicaie
software folosit pentru producerea (nelegnd prin aceasta: compoziie, editare, aezare
n pagin sau formatare, eventual i tiprire) de orice tip de material destinat tipririi.
Deschiderea aplicaiei Word
Exist dou posibiliti de a deschide aplicaia Microsoft Word:
Din meniul Start Programs - Microsoft Word
Efectund dublu clic pe pictograma Microsoft Word de pe ecran
Dup executarea uneia dintre cele 2 posibiliti se deschide urmtoarea fereastr:
Deschiderea unui document Word
Petru a deschide un document Word existent avem mai multe posibiliti:
Localizm n calculator documentul i efectum dublu clic pe pictograma acestuia.
Lansm n execuie aplicaia Word i din meniul Fiier selectm opiunea Deschidere, se
va deschide fereastra Deschidere cu ajutorul creia vom cuta fiierul dorit. Dup gsirea
fiierului se execut dublu clic pe acesta sau se selecteaz si se apas butonul Deschide.
Microsoft Word ne ofer posibilitatea de a deschide mai multe documente n acelai timp,
acestea fiind marcate pe bara de Start sau n meniul Fereastr. Schimbarea fiierului n
care se dorete scrierea se realizeaz prin click pe numele documentului deschis pe bara
de Start.

Crearea unui document nou

n momentul n care se lanseaz aplicaia Microsoft Word se deschide un
document nou care poart numele de: document1.doc pn cnd documentul este salvat.
Pentru a crea un document nou exist mai multe posibiliti:
Din meniul Fiier se alege opiunea Nou

30

DESIGNER PAGINI WEB

Prin apsarea pe butonul Document necompletat nou

Prin apsarea combinaiei de taste Ctrl + N

Salvarea unui document Word

Pentru a salva un document Word, se apeleaz funcia Salvare din meniul Fiier
sau se apas pe butonul Salvare

din bara de instrumente a aplicaiei.

O alt metod de salvare a documentul este prin folosirea combinaie de taste Ctrl
+ S.
Dup folosirea uneia dintre aceste metode se deschide urmtoarea fereastr:
Dup ce se salveaz documentul pe bara de titlu a aplicaiei apare numele cu care
a fost salvat documentul. Dup ce documentul a fost salvat cu un nume pentru a salva
modificrile fcute n document se folosete butonul Salvare

sau combinaia de taste

Ctrl + S.

Salvarea fiierului sub un alt format sau cu un alt nume

Un fiier poate fi salvat sub diferite tipuri n funcie de dorina utilizatorului. Cele mai
uzuale tipuri sunt:

Document Word, cu extensia .doc (implicit)

Pagin Web, cu extensia .html

ablon Document, cu extensia .dot

Rich Text Format, cu extensia .rtf

Text simplu, cu extensia .txt

Pentru a salva fiierul cu o alt extensie la opiunea Tip fiier din fereastra Salvare ca se
alege tipul fiierului.

nchiderea unui document Word

nchiderea documentului se poate realiza prin alegerea

urmtoarelor

posibiliti:
Meniul Fiier nchidere
sau se poate apsa pe butonul de nchidere
aplicaiei

31

existent n colul din dreapta sus al

DESIGNER PAGINI WEB

La nchiderea documentului, dac modificrile nu au fost salvate aplicaia Microsoft
Word afieaz pe ecran urmtoarea fereastr:
Pentru a pstra informaia din fiier se apas butonul Da.

nchiderea aplicaiei
Pentru a nchide aplicaia se alege opiunea Ieire din meniul Fiier sau se poate
apsa pe butonul de nchidere

existent n colul din dreapta sus al aplicaiei.

Modul de vizualizare al paginii

Procesorul de texte Word permite vizualizarea documentului n mai multe moduri:
Aspect pagin imprimat - n acest mod, documentul este afiat pe ecran, pagin cu
pagin, exact aa cum va fi tiprit. Se recomand folosirea acestui mod de vizualizare.
Normal prezint documentul ntr-un format mai mare deoarece nu prezint
marginile documentului;
Aspect pagin Web este folosit pentru a crea pagini simple Web;
Schi ofer o prezentare succint a documentului sub form de schi.
Funcia de modificare a dimensiunii vizualizrii paginii
Apelnd din meniul Vizualizare, opiunea Panoramare se deschide fereastra:
O alt metod prin care se poate modifica dimensiunea vizualizrii paginii pe ecran este
prin folosirea butonului de panoramare aflat pe bara de instrumente

. n cazul

n care se dorete s se introduc o anumit dimensiune care nu exist n meniul derulant

al casetei se poate introduce manual n caset de la tastatur i se apas tasta Enter.

Modificarea barei de instrumente

Microsoft Word ofer utilizatorului o gam foarte larg de instrumente. Acestea sunt
grupate n funcie de aria de aplicabilitate, pentru a optimiza i uura munca utilizatorului.
Aceste instrumente sunt grupate sub forma unor bare de instrumente ce pot fi aduse pe
ecran (activate) sau pot fi ascunse n funcie de necesitile de moment. Pentru a activa
aceste bare de instrumente folosim meniul Vizualizare - Bare de instrumente - selectm
bara dorit. Nu este recomandat s folosim un numr foarte mare de astfel de bare pentru
a nu micora prea mult spaiu de lucru.

32

DESIGNER PAGINI WEB

Modificarea opiunilor generale ale aplicaiei

Microsoft Word permite utilizatorului modificarea unor opiuni generale ale
aplicaiei din care cale mai importante sunt:

numele utilizatorului

directorul n care se salveaz implicit fiierele

unitatea de msur (cm, mm, inches)

Aceste modificri pot fi fcute din fereastra Opiuni ce se deschide selectnd meniul
Instrumente - Opiuni .
Introducerea simbolurilor i a caracterelor speciale
Microsoft Word permite utilizatorului s foloseasc, pe lng caracterele normale i alte
caractere speciale. Acestea se introduc din fereastra Simbol ce se deschide activnd
opiunea Simbol din meniul Inserare.
Pentru a introduce n text un caracter special trebuie s poziionai punctul de inserare n
locul n care se dorete introducerea simbolului. Din fereastra Simbol se selecteze
simbolul dorit i se apas butonul Inserare.
Simbolurile pot fi formatate asemenea unui text normal.

Introducerea datei calendaristice

Pentru a introduce data ntr-un document Word se apeleaz din meniul Inserare
comanda Data i ora . Se deschide urmtoarea fereastr:
Dac se dorete ca data s fie inserat cu actualizare automat se bifeaz opiunea
Actualizare automat. Acest lucru face ca data inserat s se actualizeze de fiecare dat
cnd se deschide documentul.
n cazul n care data introdus nu este cea corespunztoare zilei i orei actuale verificai
ceasul calculatorului care pstreaz evidena datei i orei.

Anularea i refacerea comenzilor

33

DESIGNER PAGINI WEB

Aplicaia

Microsoft

Word

permite

anularea

operaiunilor efectuate. n momentul n care se dorete

anularea unei operaii se folosete comanda Anulare Tastare
din meniul Editare.
Acelai lucru se poate realiza cu ajutorul butonului

de pe bara de instrumente sau se

poate folosi combinaia de taste Ctrl + Z

Opus funciei de Anulare Tastare este funcia Repetare Tastare care reface ultima
operaiune anulat. Acelai lucru se poate realiza cu ajutorul butonului

de pe bara

de instrumente sau se poate folosi combinaia de taste Ctrl + Y.

Selectarea textului dintr-un document Word

Selectarea textului este folosit n multe situaii, nainte de a efectua o comand
de modificare a textului acesta trebuie selectat. Microsoft Word ofer utilizatorului mai
multe posibiliti de realizare a seleciei. n funcie de necesitate se poate efectua:
selectarea unei poriuni din text (poziionnd mouse-ul la nceputul textului de
selectat, se apas butonul stnga al mouse-ului i se mut cursorul la sfritul
textului ce trebuie selectat);
selectarea unui cuvnt (se efectueaz dublu clic stnga pe cuvntul respectiv);
selectarea unui paragraf (se efectueaz triplu clic stnga pe paragraful
respectiv);
selectarea unui rnd (se efectueaz clic n dreptul rndului respectiv, n partea
stng, n afara spaiului de scriere);
selectarea ntregului text (se realizeaz prin apsarea simultan a tastelor
CTRL+A);
Selecia se mai poate realiza innd apsat tasta SHIFT i deplasndu-ne prin text cu
ajutorul sgeilor de deplasare. Textul selectat va aprea scris cu culoare alb pe fond negru
ex:
Pentru deselectarea textului se realizeaz un clic n orice parte a documentului.

Mutarea i copierea textului

34

DESIGNER PAGINI WEB

Pentru a putea muta o poriune din text, aceasta trebuie selectat. Cu textul
selectat, efectuai click pe butonul Decupare

de pe bara standard pentru a decupa

textul selectat. Odat ce ai tiat textul selectat, mutai puctul de inserare ntr-o nou
locaie i executai un click pe butonul Lipire

Pentru decuparea textului se poate folosi i combinaia de taste Ctrl + X sau din
meniul Editare se alege comanda Decupare
. Odat ce ai selectat textul, putei de asemenea sa-l copiai. Pentru copiere se apas pe
butonul Copiere

aflat pe bara standard. Mutai cursorul ntr-o nou locaie (in cadrul

aceluiai document sau ntr-un document nou) i efectuai click pe butonul Lipire

Acum, avei dou copii ale textului selectat una n locaia original a textului i una n
noua locaie. Pentru copiere, n afara de buton, se mai poate folosi combinaia de taste
CTRL+C, sau opiunea Copiere din meniul Editare
Odat ce utilizatorul a copiat sau a mutat un text, informaia se pstreaz n
memoria Clipboard a calculatorului de unde poate fi lipit de fiecare dat cnd se folosete
comanda de Lipiere.
De asemenea pentru Lipire, n afara de buton, se mai poate folosi combinaia de
taste CTRL+V, sau opiunea Lipire din meniul Editare.

tergerea textului
Pentru a terge un text se folosete tasta BackSpace(terge la stnga punctului de
inserare) sau tasta Delete (terge la dreapta punctului de inserare). Pentru a terge o
poriune mai mare de text, acesta se selecteaz i se apas tasta Delete.

Gsirea i nlocuirea
Exist situaii n care este necesar ca n interiorul unui document s gsim un
anumit cuvnt. Pentru a uura munca de cutare a aplicaiei Microsoft Word, ofer o
funcie de gsire n interiorul documentului. Pentru a activa aceast funcie exist dou
posibiliti:
se apas simultan tastele CTRL+F
din meniul Editare se selecteaz opiunea Gsire
n ambele situaii se va deschide fereastra Gsire i nlocuire.

35

DESIGNER PAGINI WEB

n cmpul De cutat se scrie cuvntul care se caut i se apas butonul Urmtorul
gsit.
De fiecare dat cnd cuvntul cutat a fost gsit n text, cutarea se suspend i
cuvntul gsit apare selectat n text. Cutarea se poate relua apsnd din nou butonul
Urmtorul gsit.
Pentru a nlocui un cuvnt din text cu altul Microsoft Word, ofer o funcie de
nlocuire a cuvintelor. Pentru a activa aceast funcie exist dou posibiliti:
se apas simultan tastele CTRL+H
din meniul Editare se selecteaz opiunea nlocuire
n ambele situaii se va deschide fereastra Gsire i nlocuire
Pentru nlocuirea cuvintelor se poate apsa pe butonul Urmtorul gsit pentru a
gsi cuvntul de cutat i pe butonul nlocuire n cazul n care se dorete nlocuirea
cuvintelor pas cu pas sau putei apsa pe butonul nlocuire peste tot pentru a nlocui toate
cuvintele cutate.

Formatare text.
Formatarea fonturilor
Orice text introdus ntr-un document Word trebuie format. Prin procedeul de
formatare se lucreaz asupra caracterelor din interiorul paragrafelor pentru obinerea unor
efecte: font, dimensiune, stil de afiare (sublinieri, ngrori, nclinare), cuvinte cheie,
citate, efecte special, indici, spaiul dintre caractere, introducerea unor caractere speciale
(sgei, figuri, semne speciale etc.)
Pentru a putea formata un text se apeleaz comanda Font din meniul Format. Se
deschide urmtoarea fereastr:
Pentru a se economisi timp, modificrile asupra textului se pot realiza folosind
butoanele de pe bara de formatare.

Pentru a scrie mai ngroat va trebui s apsai pe butonul B (Bold);

Pentru a scrie nclinat se apas pe butonul I (Italic sau Cursiv);

Pentru a sublinia textul se apas pe butonul U (Subliniat);
Pentru a scrie cu o anumit culoarea se folosete butonul

36

DESIGNER PAGINI WEB

Pentru a schimba fontul sau dimensiunea acestuia se folosesc butoanele
;
Pentru a schimba stilul paragrafului se folosete butonul
Aldin

Cursiv

(ngroare) (nclinare) Subliniere

Culoare text

Desprirea n silabe
Desprirea n silabe se poate face n dou feluri:

Manual, utilizatorul desparte cuvntul la sfritul rndului cu ajutorul

liniuei despritoare;

Automat, se selecteaz textul, se activeaz fereastra Desprire n silabe

din meniul Instrumente Limb Desprire n silabe
Se bifeaz opiunea Desprire automat n silabe n document, se apas butonul

OK.
Formatarea paragrafelor
Pentru a vizualiza paragrafele introduse ntr-un text se activeaz butonul
Afiare/Ascundere aflat pe bara de butoane.
Paragrafele pot fi aliniate la:
stnga - pentru alinierea paragrafului la stnga se selecteaz paragraful i se apas
pe butonul
centru - pentru alinierea paragrafului la centru se selecteaz paragraful i se apas
pe butonul
dreapta - pentru alinierea paragrafului la dreapta se selecteaz paragraful i se
apas pe butonul

37

DESIGNER PAGINI WEB

stnga dreapta - pentru alinierea paragrafului la stnga-dreapta se selecteaz
paragraful i se apas pe butonul
O alt metod de aliniere a unui paragraf este prin folosirea comenzii Paragraf din meniul
Format, ce are ca urmare deschiderea urmtoarei ferestre:
Pentru a modifica distana dintre liniile de spaiere ale unui paragraf trebui s folosii
meniul derulant care se deschide prin apsarea pe sgeata din dreapta opiunii Spaiere
din fereastra Paragraf .
n mod normal spaierea dintre rnduri este la un rnd.
Dac se dorete s se modifice spaiul dintre dou paragrafe, trebuie s lucrai cu
opiunea Spaiere

Indentarea paragrafelor
Indentarea unui paragraf reprezint deplasarea testului fa de marginile
documentului stnga i dreapta la o anumit distan. Pentru a realiza acest lucru se
selecteaz paragraful i din opiunea Indentare a ferestrei Paragraf se alege distana la
care se dorete s se fac indentarea paragrafului.
Folosirea i setarea tabulatorilor
Exist patru tipuri de tabulatori:
Tabulator de aliniere la stnga

- textul este introdus de la stnga la dreapta

ncepnd de la tabulator
Tabulator de aliniere la dreapta

- textul se aliniaz la dreapta pn la tabulator

Tabulator de aliniere la centru

- textul introdus se aliniaz la centru innd cont

de poziia tabulatorului.
Tabulator separator zecimal

- textul se aliniaz nainte de punctul zecimal la

stnga, iar dup punctul zecimal se aliniaz la dreapta.

Fixarea tabulatorilor
Pentru a introduce un tabulator se poziioneaz punctul de inserare n faa textului care se
dorete a fi aliniat cu ajutorul unui tabulator i se alege din meniul Format comanda
Tabulatori. Se deschide urmtoarea fereastr:

38

DESIGNER PAGINI WEB

Stiluri de formatare a paragrafelor
Un stil reprezint un ansamblu de mai multe cerine ce caracterizeaz un paragraf
(font, dimensiune, culoare, aliniere, spaiere, indentare).
Pentru a aplica un stil asupra unui paragraf putei apela comanda Stil din meniul Format
sau se poate folosi meniul derulant Stil din bara de formatare.
Folosirea listelor numerotate i a listelor cu marcatori
Pentru a introduce o list de marcatori, trebuie selectat textul, apoi se activeaz fereastra
Marcatori i numerotare selectnd opiunea Marcatori i numerotare din meniul
Format. Din fereastra ce se deschide putei alege un anumit tip de marcator.
Pentru a folosi o list numerotat se lucreaz n meniul Numerotat din fereastra
Marcatori i numerotare, pentru a folosi o list cu marcatori se lucreaz n meniul Cu
marcatori din fereastra Marcatori i numerotare.

Folosirea chenarelor
Pentru a evidenia un cuvnt, sau o parte dintr-un text putei alege s ncadrai textul
respectiv ntr-un chenar. Pentru aceasta trebuie urmai paii:
se selecteaz textul pentru care se dorete adugarea chenarului
din meniul Format, clic pe opiunea Borduri i umbrire. Apare fereastra Borduri
i umbrire.
Pentru a aplica un efect umbrit n interiorul unui chenar se folosete meniul
Umbrire din fereastra Borduri i umbrire din care se alege culoarea de umplere a
chenarului.

ntreruperea documentului n seciuni

Exist situaii n care chiar dac nu s-a ajuns la sfritul paginii, utilizatorul
dorete trecerea la o pagin nou. Pentru aceasta, se poziioneaz cursorul n locul de
unde se dorete introducerea unei noi pagini, i se activeaz opiunea ntrerupere din
meniul Inserare. Se va deschide o fereastra cu opiuni, se va marca opiunea Sfrit de
pagin si se apas pe butonul OK.
Punctul de inserare va ajunge automat pe pagina urmtoare. Daca dup poziionarea
punctului de inserare a existat text, textul va fi automat mutat pe pagina urmtoare.

39

DESIGNER PAGINI WEB

Pentru a vizualiza unde a fost fcut ntreruperea sfrit de pagin trebuie s apsai pe
butonul Afiare/ascundere de pe bara de instrumente

. Dac se dorete s se tearg

aceast ntrerupere se selecteaz i se apas tasta Delete.

Introducerea antetului i a subsolului

n cazul n care se dorete introducerea n document a unui antet sau a unui subsol, care s
conin: o sigl, numele utilizatorului, titlu lucrrii, denumirea capitolului, numrul
paginii, data sau alte informaii ce vor fi afiate pe fiecare pagin, Microsoft Word ofer
inserare numr
de pagin

inserare numrul
total al paginilor

formatarea numrului de pagini

inserare

inserare

dat curent

ora curent

Comut ntre antet

i subsol
posibilitatea de a introduce un antet sau un subsol. Pentru aceasta se activeaz opiunea
Antet i subsol din meniul Vizualizare. Se vor activa automat seciunile Antet (n parte de
sus a paginii) i Subsol (n partea de jos a paginii) precum i bara de butoane Antet i
subsol. Dup introducerea textului n antet sau n subsol se apas butonul nchidere sau
se face un dublu click n document.

Numerotarea paginilor
Programul Microsoft Word ofer posibilitatea de a numerota paginile din
document. Pentru acesta, se alege opiunea Numere de pagin din meniul Inserare.
Dac dorii ca numerotarea s nu fie afiat pe prima pagin, debifai opiunea de

Afiare numr pe prima pagin.

Pentru a stabili un anumit format de numerotare se apas pe butonul Format. Se
deschide urmtoarea fereastr:
Pentru crearea unui tabel trebuie s mergei n meniul Tabel Inserare - Tabel.
La apelarea comenzii se va deschide o fereastr n care vei putea s stabilii opiunile
necesare construirii tabelului dumneavoastr: numr de rnduri, numr de coloane, stil de
formatare.
Numrul de coloane i numrul de rnduri poate fi modificat din seciunile
corespunztoare cu ajutorul sgeilor sus, jos sau prin modificarea manual a valorii

40

DESIGNER PAGINI WEB

existente n caset. Dac se apas butonul AutoFormatare atunci se va deschide o
fereastr n care vei putea s alegei un stil de formatare pentru tabel.
Tabelul obinut poate fi completat cu datele necesare. Deplasarea
dintr-o csu n alta se face cu ajutorul sgeilor direcionale sau cu mouse-ul, prin clic n
csua n care dorii s ajungei. Formatarea textului din tabel se face n mod obinuit cu
ajutorul comenzilor de formatare a fontului i paragrafului.
Obiecte i imagini
Inserarea foilor de calcul din aplicaia Microsoft Excel se face prin comanda
Obiect din meniul Inserare. Din fereastr alegei obiectul ce trebuie inserat,
respectiv Foaie de lucru Microsoft Excel. Apsai OK, iar n document apare o
gril cu rnduri i coloane care reprezint o foaie de calcul alb. Pentru a edita
obiectul va trebui s-l accesai printr-un dublu clic stnga pe el. Se pot introduce
date, se pot efectua calcule i alte operaii specifice aplicaiei Microsoft Excel.
Inserarea diagramelor se face prin comanda Imagine, Diagram din meniul
Inserare. n cadrul documentului apare un grafic mpreun cu foaia de calcul care
conine datele pe baza crora este construit. Modificarea datelor din foaie va duce
la modificarea aspectului graficului. Printr-un clic n afara zonei de grafic, foaia
de calcul se va nchide, iar n document va rmne doar diagrama. Pentru editarea
numelor de rnd, coloan sau a valorilor numerice trebuie s facei dublu clic
stnga pe diagram i se va activa foaia de lucru unde putei s facei modificrile
necesare.
Inserarea imaginilor. Exist dou categorii de imagini care se pot introduce n
cadrul unui document: imagini existente n galeria de imagini a aplicaiei i
imagini stocate n fiiere de imagini n calculatorul dumneavoastr.
Inserarea imaginilor din galeria de imagini trebuie s mergei n
meniul Inserare, Imagine, Miniatur. n fereastra Clip Art care apare
apsai butonul Search pentru a cuta toate tipurile de imagini din
calculatorul dumneavoastr sau v putei rafina cutarea n funcie de ceea
ce dorii s gsii. Pentru acest lucru, n seciunea Search for va trebui s
scriei cuvntul semnificativ pentru categoria de imagini cutat i s
apsai butonul Search. Pentru a insera n documentul dumneavoastr

41

DESIGNER PAGINI WEB

imaginea gsit trebuie s facei clic pe ea sau pe bara gri care apare n
dreapta pozei i s alegei comanda Insert.
Inserare imaginilor din fiier trebuie s mergei n meniul Inserare,
Imagini, Din fiier. Se va deschide o fereastr n care va trebui s
localizai fiierul care conine imaginea dorit.

Redimensionarea unei imagini sau a unui grafic

Pentru a modifica dimensiunile unui obiect exist dou metode:
Metoda manual selectai obiectul i tragei cu butonul stng al mouse-ului
apsat de butoanele de control care apar n jurul su. Obiectul se va mri sau se va
micora n funcie de direcia n care deplasai marginile.
Metoda automat selectai obiectul respectiv iar din meniul Format alegei
comanda Obiect. Se va deschide o fereastr n care putei s stabilii mai multe
opiuni:
Dimensiunile obiectului se stabilesc din submeniul Dimensiune.
Modificai nlimea i limea imaginii nu nainte de a debifa butonul
Blocare aspect raport.
Culorile i liniile de contur ale obiectului se pot modifica din
submeniul Culori i linii.
Aspectul obiectului se modific din submeniul Aspect.

tergerea unui obiect

Pentru a terge un obiect, acesta trebuie selectat i se poate apsa una dintre tastele
BackSpace sau Delete.

Desenarea i manipularea obiectelor grafice

Dac avei nevoie s introducei n document diferite obiecte de desen putei s
utilizai bara de desenare care apare n partea de jos a ecranului. n cazul n care nu este
activ, o putei activa din meniul Vizualizare, Bare de instrumente, Desenare.

42

DESIGNER PAGINI WEB

Cu ajutorul acestei bare putei s desenai linii simple cu butonul
, dreptunghiuri sau ptrate dac inei tasta Shift apsat cu
tasta Shift apsat cu

sau

. Putei s modificai limea liniei cu butonul

i forma i direcia sgeilor cu butonul

umbre i adncimi ale obiectelor cu butoanele

butonul

, elipse sau cercuri cu

. Putei s colorai obiectele cu ajutorul butonului

putei s colorai conturul cu butonul

, stilul de linie cu

, sgei cu

. Se pot stabili

. Casetele de text se introduc cu

, iar textul artistic (Word Art) se creeaz cu butonul

Dac vrei s mrii sau s micorai obiectul va trebui s-l selectai i s tragei
cu butonul stng al mouse-ului de butoanele de control aprute n jurul obiectului. Pentru
a muta un obiect n pagin putei s v poziionai pe el i cu butonul stng apsat s-l
deplasai n alt loc. Eliberai butonul atunci cnd ai ajuns n locul dorit.
Dac dorii s adugai text pe un obiect trebuie s facei un clic dreapta pe el i s
selectai comanda Adugare text din meniul care apare. Textul poate fi formatat n mod
obinuit cu ajutorul comenzilor de formatare.

43

DESIGNER PAGINI WEB

PARTEA VI
LIMBAJUL HTML, BAZE DE DATE
MYSQL, LIMBAJUL JAVASCRIPT,
CADRUL

DE

FRAMEWORK.NET

44

SOFTWARE,

DESIGNER PAGINI WEB

PLATFORMA .NET
Prezentare
NET este un cadru (Framework) de dezvoltare software unitar care permite realizarea,
distribuirea i rularea aplicaiilor-desktop Windows i aplicaiilor WEB. Tehnologia .NET
pune laolalt mai multe tehnologii (ASP, XML, OOP, SOAP, WDSL, UDDI) i limbaje de
programare (VB, C++, C#, J#) asigurnd totodat att portabilitatea codului compilat
ntre diferite calculatoare cu sistem Windows, ct i reutilizarea codului n programe,
indiferent de limbajul de programare utilizat.
.NET Framework este o component livrat mpreun cu sistemul de operare Windows.
De fapt, .NET 2.0 vine cu Windows Server 2003, se poate instala pe versiunile anterioare,
pn la Windows 98 inclusiv; .NET 3.0 vine instalat pe Windows Vista i poate fi instalat
pe versiunile Windows XP cu SP2 i Windows Server 2003 cu minimum SP1.
Pentru a dezvolta aplicaii pe platforma .NET este bine sa avem 3 componente
eseniale:
un
set de limbaje (C#, Visual Basic .NET, J#, Managed C++, Smalltalk, Perl, Fortran,
Cobol, Lisp, Pascal etc),
un
set de medii de dezvoltare (Visual Studio .NET, Visio),
i
o bibliotec de clase pentru crearea serviciilor Web, aplicaiilor Web i aplicaiilor
desktop Windows.
Cnd dezvoltm aplicaii .NET, putem utiliza:
Servere

specializate - un set de servere Enterprise .NET (din familia SQL Server 2000,
Exchange 2000 etc), care pun la dispoziie funcii de stocare a bazelor de date, email,
aplicaii B2B (Bussiness to Bussiness comer electronic ntre partenerii unei afaceri).
Servicii

Web (n special comerciale), utile n aplicaii care necesit identificarea

utilizatorilor (de exemplu, .NET Passport - un mod de autentificare folosind un singur
nume i o parol pentru toate ste-urile vizitate)
Servicii

incluse pentru dispozitive non-PC (Pocket PC Phone Edition, Smartphone,

Tablet PC, Smart Display, XBox, set-top boxes, etc.)
.NET Framework
Componenta .NET Framework st la baza tehnologiei .NET, este ultima interfa ntre
aplicaiile .NET i sistemul de operare i actualmente conine: Limbajele C#, VB.NET,

45

DESIGNER PAGINI WEB

C++ i J#. Pentru a fi integrate n platforma .NET toate aceste limbaje respect nite
specificaii OOP numite Common Type System (CTS). Ele au ca elemente de baz: clase,
interfee, delegri, tipuri valoare i referin, iar ca mecanisme: motenire, polimorfism i
tratarea excepiilor.
Platforma comun de executare a programelor numit Common Language Runtime
(CLR), utilizat de toate cele 4 limbaje. CTS face parte din CLR. Ansamblul de biblioteci
necesare n realizarea aplicaiilor desktop sau Web numit Framework Class Library
(FCL).
Arhitectura .NET Framework
Componenta .NET Framework este format din compilatoare, biblioteci i alte
executabile utile n rularea aplicaiilor .NET. Fiierele corespunztoare se afl, n general,
n

directorul

C:\WINDOWS\Microsoft.

NET\Framework\V2.0.

(corespunztor

versiunii instalate)
Compilarea programelor
Un program scris ntr-unul dintre limbajele .NET conform Common Language
Specification (CLS) este compilat n Microsoft Intermediate Language (MSIL sau IL).
Codul astfel obinut are extensia exe, dar nu este direct executabil, ci respect formatul
unic MSIL.
CLR include o main virtual asemntoare cu o main Java, ce execut instruciunile
IL rezultate n urma compilrii. Maina folosete un compilator special JIT (Just In Time).
Compilatorul JIT analizeaz codul IL corespunztor apelului unei metode i produce
codul main adecvat i eficient. El recunoate secvenele de cod pentru care s-a obinut
deja codul main adecvat permind reutilizarea acestuia fr recompilare, ceea ce face
ca, pe parcursul rulrii, aplicaiile .NET s fie din ce n ce mai rapide.
Faptul c programul IL produs de diferitele limbaje este foarte asemntor are ca rezultat
interoperabilitatea ntre aceste limbaje. Astfel, clasele i obiectele create ntr-un limbaj
specific .NET pot fi utilizate cu succes n altul.
n plus, CLR se ocup de gestionarea automat a memoriei (un mecanism implementat n
platforma .NET fiind acela de eliberare automat a zonelor de memorie asociate unor date
devenite inutile Garbage Collection).
Ca un element de portabilitate, trebuie spus c .NET Framework este implementarea unui
standard numit Common Language Infrastructure (http://www.ecmainternational.
org/publications/standards/Ecma-335.htm), ceea ce permite rularea aplicaiilor .NET, n

46

DESIGNER PAGINI WEB

afar de Windows, i pe unele tipuri de Unix, Linux, Solaris, Mac OS X i alte sisteme de
operare (http://www.mono-project.com/Main_Page ).
De ce am alege .NET?
n primul rnd pentru c ne ofer instrumente pe care le putem folosi i n alte programe,
ofer acces uor la baze de date, permite realizarea desenelor sau a altor elemente grafice.
Spaiul de nume System.Windows.Forms conine instrumente (controale) ce permit
implementarea elementelor interfeei grafice cu utilizatorul.
Folosind aceste controale, putei proiecta i dezvolta rapid i interactiv, elementele
interfeei grafice. Tot .NET v ofer clase care efectueaz majoritatea sarcinilor uzuale cu
care se confrunt programele i care plictisesc i fur timpul programatorilor, reducnd
astfel timpul necesar dezvoltrii aplicaiilor.
Editoare PHP/HTML
Exist o suit de editoare text simple, gratuite, ce ofer suport pentru programarea
n PHP/HTML. Acestea au suficiente faciliti pentru a putea fi folosite cu succes zi de
zi pentru a scrie cod-surs n PHP/HTML.
Cele mai cunoscute dintre acestea sunt:
Notepad++ (Windows)
PsPad (Windows)
SciTE (Windows si Linux)
Crimson Editor (Windows)
Pentru nceptori un editor simplu este de cele mai multe ori alegerea ideal,
datorit simplitii modului de lucru i a interfeei grafice. La majoritatea editoarelor
simple nu exist conceptul de proiect i se lucreaz direct cu fiiere simple ce pot fi
grupate manual n directoare.
Eclipse pentru PHP. Eclipse este o platform integrat de dezvoltare (IDE) extensibil,
ce dispune de o multitudine de funcionaliti. Folosit iniial pentru dezvoltarea n
limbajul Java, a fost ulterior extins i la alte limbaje de programare.
Eclipse PDT (Eclipse PHP Development Tools) reprezint la ora actual unul din
cele mai avansate editoare PHP. Este gratuit i poate rula pe orice sistem de operare. Mai
multe informaii pot fi gsite pe site-ul proiectului Eclipse PDT.
Editorul Eclipse este centrat pe ideea de proiect. Un proiect reprezint o suit de
mai multe fiiere PHP, grupate n acelai director. Este indicat s creai un proiect nou
pentru fiecare aplicaie PHP, n care putei salva mai multe scripturi diferite.
Netbeans. Netbeans vine din aceeai zon a programrii n Java. Este un IDE complet
ce a fost extins recent pentru lucrul n PHP. Ca i Eclipse poate fi folosit pe orice
sistem de operare ntruct ruleaz pe platforma Java. Poate fi descarcat gratuit de la
http://netbeans.org/downloads/ (alegei pachetul PHP). Modul de lucru n Netbeans

47

DESIGNER PAGINI WEB

este similar cu cel din Eclipse. Avem i aici conceptul de proiect iar pentru a putea
crea scripturi PHP este nevoie s creai n prealabil un proiect de tip PHP. Toate
celelalte observaii fcute la editorul Eclipse rmn valabile i aici.
Zend Studio i Adobe Dreamweaver. Zend Studio i Adobe Dreamweaver sunt dou
IDE-uri comerciale pentru programarea n PHP. Zend Studio este bazat pe Eclipse
PDT i specializat doar pe dezvoltarea n PHP, pe cnd Adobe Dreamweaver poate fi
folosit si pentru web-design. Ambele editoare pot fi descrcate pentru teste (trial
version), dar pentru a continua folosirea lor trebuie achiziionat o licen.
Un IDE avansat poate avea mai multe faciliti, dar deprinderea cu folosirea lui
poate lua ceva timp. n schimb, pentru nceptori se recomand un editor simplu, datorit
simplitii modului de lucru i a interfeei grafice cu utilizatorul.

HTML
Ce este HTML?
HTML este prescurtarea pentru HyperText Markup Language.

HyperText este metoda prrin care navighezi pe web apsnd pe text special
numit hyperlink care te direcioneaz ctre alte pagini. Prin hyper se nelege
neliniar adic, poi ajunge ctre orice loc de pe Internet cand vrei apsnd pe
link-uri nu exist ordine prestabilit n care se fac lucrurile.

Markup este ceea ce extensiile HTML fac textului din interiorul lor. l marchez
ca un anumit tip de text (text n italic, de exemplu).

HTML este un limbaj, avand codul i sintaxa sa, ca orice alt limbaj.

Ce este o pagin HTML?

O pagin HTML este un document care folosete limbajul HTML pentru a indica
modul n care va fi format textul cand va fi afiat - adic va diferenia textul pe categorii:
linkuri, titluri, paragrafe, liste etc, - i pentru a nsoi textul cu forme interactive, imagini
ncadrate i alte obiecte
Fundamental, este un fiier text cu extensia .html sau htm. Aa arat o pagin
web simpla atunci cand este deschisa cu un browser web.

48

DESIGNER PAGINI WEB

Cum arat codul HTML?

Consider c avem o pagin web simpla salvat ntr-un fiier de tip text numit
simplepage.html. La stanga poti vedea pagina web aa cum arata cand este deschisa cu
un browser web. La dreapa poti vedea codul paginii web, asa cum arata cand este
deschis cu un editor de text.

49

DESIGNER PAGINI WEB

Ce este un tag?
HTML utilizeaz "tag-uri" pentru a specifica modul n care textul va fi formatat atunci
cnd se va folosi un web browser. Tag-urile sunt nconjurate de paranteze n unghi. Tagurile vin de cele mai multe ori n perechi. n fiecare pereche, exist o etichet de
deschidere "<>" i o etichet de nchidere "</> '. Tag-ul de deschidere conine un nume de
etichet i, uneori, atributele tag-ului. El i spune browser-ului c ai dori s efectuai o
aciune de formatare din acel punct al textului. Eticheta de nchidere spune browser-ului,
cu "/" (numit forward slash), urmat de acelai nume al tag-ului, c dorii s oprii
aciunea la acel punct al textului.
Bold (ngroat)
Pentru a face cuvintele s apar boldate (bold), nconjurai textul cu taguri <b></b> .
<b>Trenul Consecinelor</b> Trenul Consecinelor
Italic (nclinat) Pentru a face cuvintele s par nclinate spre dreapta, nconjurai textul cu
taguri <i></i>.
<i> Aproape Onest</i> Aproape Onest

50

DESIGNER PAGINI WEB

Subscript (indice) Pentru a face cuvintele s apar ca jumtate din nlime i 50% sub
linie, nconjurai textul cu taguri .
_{n ora mea cea mai ntunecat} n ora mea cea mai ntunecat
Superscript (exponent)
Pentru a face cuvintele s apar ca jumtate din nlime i 50% peste linie,
nconjurai textul cu taguri .
<sub>Poduri arznde</sup> Poduri arznde
Cum pot folosi un heading?
O poziie n text este creat cu <H1> tag. Exist de fapt 6 poziii de tag-uri: <H1> (cel
mai mare) i <H6> (cel mai mic).

Cum pot decora textul?

Exist o mulime de lucruri pe care le putei face pentru a schimba aspectul fontului.
Primul lucru este s utilizai un font diferit. Cum putei face asta? Putei face acest lucru
folosind atributul face astfel:
<font face= Comic Sans Ms >Elysian Fields</font> Elysian Fields
Avei aici mai multe fonturi pe care le putei ncerca:
Arial
Arial Black
Arial Narrow
Book Antiqua
Bookman Old Style
Century Gothic
Comic Sans MS
Courier New
Garamond

51

DESIGNER PAGINI WEB

Times New Roman
Verdana
Putei de asemenea s schimbai mrimea fontului. Facei acest lucru folosind
atributul mrime (size) ,astfel:
<font size="1">Sngele eroilor</font> Sngele eroilor
<font size="3">Insomnie</font> Insomnie
<font size="5">Voi fi acolo</font> Voi fi acolo
i n sfrit,putei schimba culoarea textului, folosind atributul pentru culoare
(color).Astfel:
<font color="orange">Trezire grosolan</font> Trezire grosolan

Paragrafe i linia nou

Un nou paragraf se ncepe cu tag-ul <P>, i poate fi, ncheiat, opional, cu tag-ul
invers al alineatului</ P>.
O linie nou este creat de <BR/> tag.
Privii exemplul urmtor:

Cum pot aduga Caractere speciale?

Exist mai multe moduri de a aduga simboluri pentru paginile dumneavoastr.
Probele urmtoare ilustreaz utilizarea fiecrei metode de cod. Pentru a plasa un simbol
ntr-o pagin HTML, copiai i inserai codul corespunztor n dosarul n care dorii
simbolul.

HTML Cod Numeric

52

DESIGNER PAGINI WEB

exemplu: pentru a face o acolad,{ tastai &#123;
Font Face Tag
exemplu: pentru a scrie xA, tastai x<font face="Simbol">
&#8712;</font>A
HTML Literal Code
exemplu: pentru a face simbolul gradului, ,tastai &deg;
Este prezentat un tabel ce conine simbolurile i codurile corespunztoare ale
acestora n Appendix A.

Care este structura de baz a unui document HTML?

Aceasta este structura de baz a unei pagini HTML:

Tag-urile HTML
Un document HTML ncepe cu un element HTML care conine HEAD i BODY
Pentru a ncepe o pagin HTML:

Tasteaz <html> pentru a ncepe partea HTML din documentul dumneavoastr

Lasai cteva spaii pentru crearea restului paginii dumneavoastr

53

DESIGNER PAGINI WEB

Tastai </html>

Tag-ul HEAD
Seciunea head este locul unde vei defini titlul paginii tale, incluznd informaii
despre pagina ta, pentru motoarele de cutare precum Google, stabilete locaia paginii,
adaug stil foii tale i scrie script-urile.
Pentru a crea seciunea head:

Imediat dup deschiderea tag-ului html, tastai <head>.

Las cteva spaii pentru seciunea capului de pagin.

Tasteaz </head>.

Tag-ul BODY
Body documentului tu HTML include coninutul paginii tale de Web, care este,
partea pe care vizitatorii ti o vor vedea, inclusiv textul i elementele de grafic.
Pentru a crea cuprinsul:

Dup ultimul </head> tag, tasteaz <body>

Las cteva spaii pentru coninutul paginii tale de Web

Tasteaz</body>

Problema rezolvat: Crearea unui document HTML.

<HTML>
<HEAD>
<TITLE>Prima mea pagina web</TITLE>
</HEAD>
<BODY>Bine ai venit!<BR>
Vom invata impreuna limbajul HTML. Aceasta este prima mea
pagina web!<BR>
</BODY>
</HTML>

54

DESIGNER PAGINI WEB

Am folosit tag-ul <BR> pentru a trece pe urmtorul rnd. Astfel i spunem
browser-ului c ce va fi scris dup tag-ul <BR> va trebui afiat pe urmtorul rnd. Tag-ul
<BR> nu are un tag de nchidere.
Folosim pentru editarea codului editorul de texte Notepad. Dup ce am scris
codul, va trebui s salvm documentul cu extensia .html sau .htm. Din meniul File se
alege opiunea Save As, iar apoi se denumete documentul index, dar cu una din
extensiile de mai sus. Se apas butonul Save. Am obinut acum un document html, care
reprezint prima pagin web realizat. Acest fiier va fi salvat la adresa:
C:\wamp\www\test.
Se deschide browserul web i se introduce n bara de adrese:
http://localhost/test/
Efectul este acela c browserul va afia coninutul paginii web creat aa cum este
prezentat n figura 1.

Crearea unei pagini web folosind cod HTML

Problema rezolvat: Crearea unui document HTML care folosete diferite tag-uri
i atribute pentru formatare.
<HTML>
<HEAD>
<TITLE>Prima mea pagina web</TITLE>
</HEAD>
<BODY BGCOLOR="#00FFFF">
<FONT COLOR="#0000FF" SIZE="6">
Bine ai venit!
</FONT><BR>
<HR COLOR="#FF0000" WIDTH="25%" SIZE="5%" ALIGN="left">
<BR>
<FONT COLOR="#FF0000">
Vom invata impreuna limbajul HTML. Aceasta este prima mea

55

DESIGNER PAGINI WEB

pagina web!
</FONT>
<HR>
</BODY>
</HTML>

Crearea unei pagini web folosind cod HTML cu exemple de atribute

Problema rezolvat: Crearea unui document HTML care folosete opiuni de
formatare a textului.
<HTML>
<HEAD>
<TITLE>Eticheta</TITLE>
</HEAD>
<BODY>
<FONT COLOR="#0000FF" SIZE="4" >
<B><I><U>
Invat limbajul HTML. </B></I></U>
</FONT><P>Exersez limbajul HTML.</P>Stiu limbajul HTML.
</BODY>
</HTML>

56

DESIGNER PAGINI WEB

Crearea unei pagini web folosind cod HTML cu exemple de formatare a textului

Probleme propuse:
<html>
<head>
<title>Stiluri pentru blocuri de text </title>
</head>
<body>
<b>Text scris cu caractere ingrosate.</b>
<br> <big>Text cu caractere marite cu o unitate <big>mai mare<big> i mai mare<big>
i mai mare.</big></big></big></big><br>
<small>Textul este scris cu caractere micsorate cu o unitate <small>mai
mic.</small></small><br>
<i>Text scris cu caractere italice.</i>
<br> n aceasta linie ^sus este superscript iar _jos este
subscript.<br>
<strike>Aceasta linie este n intregime sectionata de o linie orizontala.</strike> <br>
n aceasta linie urmatorul cuvant este <u>subliniat</u>, iar cuvantul <s>strike</s>
sectionat. <br> Acest cuvant clipeste
<blink>Blink</blink>
</body>
</html>
==============================================================
<html><head>
<title> Linii orizontale</title></head>
<body><h1 align="center"> Tipuri de linii orizontale </h1> O linie implicita alinierea
stanga, latime 100%, grosime 2 cu umbra.

57

DESIGNER PAGINI WEB

<hr>
<h2 align="center"> Tipuri de linii orizontale </h2>
<h3 align="center"> Tipuri de linii orizontale </h3>
<h4 align="center"> Tipuri de linii orizontale </h4>
<h5 align="center"> Tipuri de linii orizontale </h5>
<h6 align="center"> Tipuri de linii orizontale </h6>
Urmeaza o linie aliniata n centru, de latime 50%, grosime 5 pixeli, fara umbra.
<hr align="center" width="50%" size="5" noshade> Urmeaza o linie aliniata la
dreapta, de latime 150 de pixeli, grosime 12 pixeli, de culoare rosie.
<hr align="right" width=150 size=12 color="red">
</body>
</html>

Problema rezolvat: Crearea unui document HTML care afieaz imagini.

58

DESIGNER PAGINI WEB

<HTML>
<HEAD>
<TITLE>Imagini</TITLE>
</HEAD>
<BODY>
<CENTER><B>Adaugarea imaginilor in paginile web</B>
<BR>
<IMG SRC=uk_steag.jpg >
</CENTER>
</BODY>
</HTML>

Crearea unei pagini web folosind cod HTML cu exemple de imagini

Pentru a folosi o imagine ca fundal al unei pagini web vom aduga tag-ului <BODY>
atributul BACKGROUND dup cum urmeaz:
<BODY BACKGROUND=background.jpg>

<HTML>
<HEAD>
<TITLE>Imagini</TITLE></HEAD>
<BODY BACKGROUND=background.jpg>
<CENTER><B>Adaugarea imaginilor in paginile web</B>
<BR>
<IMG SRC=uk_steag.jpg >

59

DESIGNER PAGINI WEB

</CENTER></BODY></HTML>

Crearea unei pagini web folosind cod HTML cu exemple de imagini i background

Crearea Listelor i Tabelelor

Cum pot crea o list?
Acesta este modul prin care poi crea o list simpl:
1. Tasteaz<ol> pentru o list ordonat sau <ul> pentru a ncepe o lista neordonat.
2. Tasteaz <li> pentru a ncepe primul item al listei.
3. Tasteaz textul care urmeaz s fie inclus n item.
4. Tasteaz</li> pentru a completa fiecare item al listei.
5. Continu acest proces introducnd cai mai muli itemi ai listei care sunt necesari
pentru a-i completa lista ordonat.Nu exist o limit a numrului de itemi pe care-i poate
avea o list.
6. Pentru a ncheia lista., introdu un sfrit </ol> or </ul> pentru a marca tag-ul de nceput
dup ultimul item al listei.

60

DESIGNER PAGINI WEB

Problem propus:
<html>
<head>
<title> Culori pentru legaturi</title>
</head>
<body link="blue" vlink="green" alink="#FF0000">
<h3>Setarea culorilor pentru link-uri:<br>rosu pentru legaturi active, verde pentru
legaturi vizitate i albastru pentru legaturi nevizitate </h3>
<a href=pag1.html>
Link catre pagina 1 <br>
<a href=pag2.html>
Link catre pagina 2 <br>
<a href=pag3.html>
Link catre pagina 3 </a>
</body>
</html>

Cum pot crea un tabel?

Un tabel este un element structurat care const n rnduri i coloane de celule. Ai

61

DESIGNER PAGINI WEB

posibilitatea s introduci orice fel de coninut doreti n aceste celule: text, imagini, i
chiar
alte tabele.
Acesta este modul n care putei crea un tabel simplu:
1. Tasteaz <table> tag.
2. Tasteaz <tr> pentru a marca nceputul primului rnd.
3. Tasteaz <td> pentru a marca nceputul celulei.
4. Tasteaz coninutul celulei.
5. Completeaz celula introducnd un tag de nchidere: </td>
6. Repet paii 3. pn la 5. pentru fiecare celula pe care doreti s o adugai
rndului. Cnd rndul dvs. este terminat, mut-te la urmtoarea linie i
introducei un tag de ncheiere </tr> aliniat vertical cu tag-ul de deschidere <tr>,
pentru a crea lizibilitate.
<tabel>
<tr>
<td>celula 1 </td>
<td>celula 2 </td>
<td>celula 3 </td>
</tr>
7. Repet paii 2. pn la 7. pentru fiecare rnd.
8. Dupa ce completezi numrul de rnduri dorit, tasteaz tag-ul </table> pentru a
termina tabelul.

62

DESIGNER PAGINI WEB

EXEMPLU

Frames
Ce sunt frames?
Cu frames, poi afia mai mult de un document HTML n aceeai fereastr de
browser.Fiecare document HTML se numete frame i fiecare frame este independent de
celelalte.

63

DESIGNER PAGINI WEB

Acesta este un exemplu de o pagin Web care folosete frames:

Poi vedea o linie vertical ce divide ecranul n dou pari. Cea din stnga este o bar
lateral n timp ce cea din dreapta este o list cu anunuri pentru o lecie de zoologie.
Acestea sunt dou documente separate HTML pe care, pn n acest moment, ar trebui s
fii capabil s le creezi singur, deci haide s ne concentrm pe codul pe care urmeaz s-l
foloseti pentru a pune toate acestea ntr-o pagin de Web.

Tag-ul Frameset
Tag-ul <frameset> definete modul n care se poate mpri fereastra n frame-uri. Fiecare
frameset definete un set de rnduri / coloane. Valorile rndurilor / coloanelor Indic ct
din suprafaa ecranului va fi ocupat de fiecare rnd / coloan.

64

DESIGNER PAGINI WEB

Tag-ul frame
Tag-ul <frame> definete ce document HTML trebuie s fie pus n fiecare frame. n
exemplul de mai sus, am creat un set de frames cu dou coloane. Prima coloan ocup
15% din browser-ul total al ecranului, iar a doua coloan ocup restul. Documentul
HTML "sidebar.html" este pus n prima coloan, i documentul HTML "content.html"
este pus n a doua coloan.
Reine c, dac doreti s previi un utilizator s redimensioneze un frame (prin
tragerea de cadru) adaug cuvintele noresize frame-ului pe care doreti s-l blochezi.
Mai mult, dup cum se poate observa n exemplul de mai sus, tag-ul <body> lipsete.
Aceasta este din cauz c nu se poate utiliza tag-ul <body>, mpreun cu tag-ul
<frameset>.
Problema rezolvat: S dezvoltm o pagin web care s conin legturi ctre
site-uri ale unor ziare din Romnia. Site-ul fiecrui ziar se va deschide ntr-o nou
fereastr, atunci cand se va efectua un click pe legtura ctre acesta. Atunci cnd
utilizatorii paginii web vor trece cursorul mouse-ului deasupra legturilor, va apare o
mic not explicativ (folosind atributul TITLE).
Vom folosi urmtorul cod HTML pe care l vom salva sub numele ziare.html:
<HTML>
<HEAD>
<TITLE>Legaturi catre site-uri particulare</TITLE>
</HEAD>
<BODY>
<CENTER>
<b>Legaturi catre site-urile unor ziare din Romania </b>
</CENTER>
<BR><A HREF="http://www.evz.ro" TARGET="_blank"
TITLE="Ziarul Evenimentul Zilei">Evenimentul Zilei</A>
<BR><A HREF="http://www.prosport.ro" TARGET="_blank"
TITLE="Ziarul Prosport">Prosport</A>
<BR><A HREF="http://www.gsp.ro" TARGET="_blank"
TITLE="Ziarul Gazeta Sporturilor">Gazeta sporturilor</A>
<BR>
</BODY>
</HTML>

65

DESIGNER PAGINI WEB

Problem propus:
<html>
<head>
<title> Legaturi catre fisiere oarecare</title>
</head>
<body>
<h4>Legaturi catre fisiere oarecare</h4>
<a href="fisier.doc">
Link catre fisierul fisier.doc
</body>
</html>

Problema rezolvat: S crem o list ordonat pe care o vom salva n fiierul

liste.html.
<HTML>
<HEAD>
<TITLE>Liste ordonate</TITLE>
</HEAD>
<BODY>
<OL>Firma noastra va ofera urmatoarele servicii:
<LI>printare
<LI>laminare
<LI>indosariere

66

DESIGNER PAGINI WEB

<LI>xerox
<LI>tehnoredactare
</OL>
</BODY>
</HTML>

Problem propus:
<html>
<head>
<title>Pagina cu liste</title></head>
<body>
<p>Aceasta pagina exemplifica crearea listelor</p>
<p>Cele mai uzual folosite tipuri de liste sunt:
<ul>
<li>neordonate</li>
<li>ordonate</li>
</ul>
<p>O lista ordonata este o lista numerotata:
<ol>
<li>primul element;</li>
<li>al doilea element...</li>
</ol>
</body>
</html>

Tabelele se introduc ntre marcajele <TABLE></TABLE>, crora li se pot ataa

(opional) parametrii BORDER i RULES. Un titlu pentru tabel se poate introduce cu

67

DESIGNER PAGINI WEB

marcajul <CAPTION>. Fiecare coloan se definete cu marcajul <COL>, avnd ca
parametru ALIGN - modul de aliniere a informaiilor din acea coloan (LEFT, CENTER,
RIGHT).
Antetul tabelului se poate indica ntre marcajele <TH></TH> ("Table Header"),
pentru trecerea la o linie nou se utilizeaz marcajul <TR> ("Table Row") iar celulele
individuale se marcheaz cu <TD> ("Table Data"), eventual cu parametru de aliniere. Se
mai pot specifica alinieri orizontale sau verticale ale celulelor, grupri de celule etc.
Aceste marcaje permit navigatorului s afieze difereniat informaiile din tabel.
Probleme propuse:
<html>
<head><title>tabel</title></head>
<body><h5 align=center>Un tabel format din 4 linii si 2
coloane</h5><hr>
<table>
<tr> <td>cell 11</td> <td>cell 12</td></tr>
<tr> <td>cell 21</td> <td>cell 22</td></tr>
<tr> <td>cell 31</td> <td>cell 32</td></tr>
<tr> <td>cell 41</td> <td>cell 42</td></tr>
</table>
</body>
</html>

<html>
<head><title>tabel</title></head>
<body><h4 align=center>Un tabel cu chenar</h4><hr>
<table border="4">
<tr> <td>cell 11</td> <td>cell 12</td></tr>
<tr> <td>cell 21</td> <td>cell 22</td></tr>
<tr> <td>cell 31</td> <td>cell 32</td></tr>
<tr> <td>cell 41</td> <td>cell 42</td></tr>
</table>
</body>
</html>

68

DESIGNER PAGINI WEB

Alinierea tabelului ntr-o pagin Web se face folosind atributul align al etichetei
<table>, cu urmtoarele valori posibile: "left" (valoarea prestabilit), "center " i "right".
Unui tabel i se poate ataa un titlu cu ajutorul etichetei <caption> (de la "table
caption" = titlu tabel). Aceast etichet trebuie plasat n interiorul etichetelor
<table>...</table>, dar nu n interiorul etichetelor <tr> sau <td>. Titlul unui tabel poate fi
aliniat cu ajutorul atributului align al etichetei <caption>, care poate lua una dintre
valorile:
"bottom" ( sub tabel );
"top" ( deasupra tabelului );
"left" ( la stanga tabelului );
"right" ( la dreapta tabelului ).
Problema rezolvat: S crem un tabel cu 2 coloane i 2 rnduri, border 1,
coloana 1 lime 80px, coloana 2 lime 160px, fiecare celul are o alt culoare de fond
(bgcolor).
<table border="1">
<tr>
<td width="80" bgcolor="red">rosu</td>
<td width="160" bgcolor="yellow">galben</td>
</tr>
<tr>
<td bgcolor="white">alb</td>
<td bgcolor="green">verde</td>
</tr>
</table>

69

DESIGNER PAGINI WEB

Problema rezolvat: S crem un tabel n care am folosit colspan pentru a uni
celulele 1 i 2 din rndul 2 i rowspan pentru a uni celula 1 din rndul 3 cu celula 1 din
rndul 4. Tabelul are primul rnd (capul de tabel) afiat centrat i titlul: Tabel de lucru.
<table border="1">
<caption><b>Tabel de lucru</b></caption>
<tr>
<th width="120">Titlul 1</th>
<th width="120">Titlul 2</th>
<th width="60">Titlul 3</th>
<th width="60">Titlul 4</th>
</tr>
<tr>
<td bgcolor="white">R1 C1</td>
<td bgcolor="yellow">R1 C2</td>
<td bgcolor="white">R1 C3</td>
<td bgcolor="yellow">R1 C4</td>
</tr>
<tr>
<td colspan="2" bgcolor="red">R2 C1+C2</td>
<td bgcolor="yellow">R2 C3</td>
<td bgcolor="red">R2 C4</td>
</tr>
<tr>
<td rowspan="2" bgcolor="white">R3 C1 + R4 C1</td>
<td bgcolor="yellow">R3 C2</td>
<td bgcolor="white">R3 C3</td>
<td bgcolor="yellow">R3 C4</td>
</tr>
<tr>
<td bgcolor="red">R4 C2</td>
<td bgcolor="yellow">R4 C3</td>
<td bgcolor="red">R4 C4</td>
</tr>
</table>

70

DESIGNER PAGINI WEB

Ferestrele sau (cadrele) ne permit s definim, n fereastra browserului, subferestre n

care s fie ncrcate documente HTML diferite.
Ferestrele sunt definite ntr-un fiier HTML special, n care blocul
<body>...</body> este nlocuit de blocul <frameset>...</frameset>.
n interiorul acestui bloc, fiecare cadru este introdus prin eticheta <frame>.
Un atribut obligatoriu al etichetei <frame> este src, care primete ca valoare adresa
URL a documentului HTML care va fi ncrcat n acel frame. Definirea cadrelor se face
prin mprirea ferestrelor (i a subferestrelor) n linii i coloane:
mprirea unei ferestre ntr-un numr de subferestre de tip coloan se face cu
ajutorul atributului cols al etichetei <frameset> ce descrie acea fereastr;
mprirea unei ferestre ntr-un numr de subferestre de tip linie se face cu ajutorul
atributului rows al etichetei <frameset> ce descrie acea fereastr;
valoare atributelor cols i rows este o list de elemente separate prin virgul, care
descriu modul n care se face mprirea.
Elementele listei pot fi:
un numr ntreg de pixeli;
procente din dimensiunea ferestrei (numr intre 1 i 99 terminat cu %);
n* care nseamn n pari din spaiul rmas;
Exemplu: cols=200,*,50%,* nseamn o mprire n 4 subferestre, dintre care
prima are 200 pixeli, a treia ocup jumtate din spaiul total disponibil, iar a doua i a
patra ocup n mod egal restul de spaiu rmas disponibil.
Referitor la ferestre, trebuie evideniat folosirea intei unei legturi (target).
n mod prestabilit, la efectuarea unui clic pe o legtur, noua pagin (ctre care
indic legtura) o nlocuiete pe cea curent n aceeai fereastr (acelai cadru). Acest
comportament se poate schimba n dou moduri:
prin plasarea n blocul <head>...</head> a unui element <base> care precizeaz, prin
atributul target numele ferestrei (cadrului) n care se vor ncrca toate paginile noi
referite de legturile din pagina curent conform sintaxei:
<base target="nume_fereastra/frame_de_baza">

71

DESIGNER PAGINI WEB

prin plasarea n eticheta <a> a atributului target, care precizeaz numele ferestrei
(cadrului) n care se va ncrca pagina nou referit de legtur, conform sintaxei:
<a href="legatura" target="nume_fereastra/frame">...</a>
Atributul target accept anumite valori predefinite. Aceste valori sunt:
"_self" (ncrcarea noii pagini are loc n cadrul curent);
"_blank" (ncrcarea noii pagini are loc ntr-o fereastr nou anonim);
"_parent" (ncrcarea noii pagini are loc n cadrul printe al cadrului curent dac acesta
exist, altfel are loc n fereastra browserului curent);
"_top" (ncrcarea noii pagini are loc n fereastra browserului ce conine cadrul
curent);

Probleme propuse:
<!--index.html -->
<html>
<head><title>Ferestre</title></head>
<frameset rows="100,*,10%">
<frame src="pag1.html">
<frame src="uk_steag.jpg">
<frame src="pag2.html">
</frameset><noframes></noframes>
</html>

<!--pag1.html -->
<html>
<head>
<title>Pagina 1</title>
</head>
<body>

72

DESIGNER PAGINI WEB

Curs GBD
</body>
</html>
<!--pag2.html -->
<html>
<head>
<title>Pagina 2</title>
</head>
<body>
Curs Contabilitatea Afacerilor
</body>
</html>
--------------------------------------------------------------<html>
<head><title>Ferestre noi</title>
<base target="_blank" />
</head>
<body>
<a href="http://www.google.ro/">Google</a>
</body>
</html>

73

DESIGNER PAGINI WEB

Comentariile sunt folosite des n codurile HTML. De aceea este important s fie
semnalate browserului pentru a evita afiarea lor.
Sunt mai multe motive pentru care putem s plasm un comentariu n interiorul
unui script html.
O not sau un reminder, o specificaie sau o clarificare.
Comentarii javascript
Un element lsat neterminat.
Comentariul va fi plasat ntre semnele <!-- i -->. n acest fel vom putea lsa o
not pentru ca mai trziu s ne dm seama ce face codul respectiv sau ce anume rmne
de introdus.

Crearea Formularelor
Cum pot crea un formular simplu?
Un formular este pur i simplu o zon care poate s conin cmpuri de formulare.
Cmpurile din formular sunt obiecte care permit vizitatorilor de a introduce informaii
de exemplu casete de text, meniuri derulante sau butoane radio. Cele mai comune utilizri
ale formularelor sunt sondajele, formulare on-line de comand, feedback-ul, sau chiar
orice pagin Web, n care este necesar un input din partea utilizatorului, n vederea
ndeplinirii unei sarcini date sau de a furniza un serviciu utilizatorului.
Aceasta este modalitatea prin care poi crea un formular simplu:

74

DESIGNER PAGINI WEB

Cum pot crea un buton radio?

Butoanele radio sunt utilizate atunci cnd doreti ca utilizatorul s selecteze una dintr-un
numr limitat de opiuni i trebuie s aib o "valoare". Input-urile radio trebuie s aib
acelai nume, deoarece ele nu fac dect s-i dea utilizatorului o opiune posibil. Este
posibil s oferim mai multe opiuni utilizatorului cu input-urile radio, oferindu-le un
altnume.
Acesta este modul in care creezi un radio box simplu:

Cum pot crea un checkbox?

Checkbox sunt utilizate atunci cnd vrei ca utilizatorul s selecteze una sau mai multe
opiuni dintr-un numr limitat de variante i permite utilizatorilor ti de a face mai mult
de o selecie ntr-o list. Acesta este modul in care se creaza un checkbox
simplu:

Un exemplu al unui drop down menu:

Drop down menu sunt probabil cele mai flexibile obiecte pe care le poi aduga
formularelor. Avantajul unui drop down menu, n comparaie cu radio buttons sau cu
check box, este acela ca ocup mai puin spaiu. Aceasta este modalitatea prin care creezi
un drop down menu simplu:

75

DESIGNER PAGINI WEB

MULTIMEDIA
Cum pot aduga o imagine paginii mele de Web?
S presupunem c avem fiierul de imagine "cat.jpg", i vrem s l punem pe site-ul
nostru. Pentru a face acest lucru, vom folosi tag-ul <img> oriunde dorim n pagina
HTML, pentru ca imaginea s fie afiat. Codul, n forma sa cea mai simpl, este ca
acesta:
<img src=cat.jpg>
Singurul impediment pentru ca acest cod sa funcioneze, este acela c avem o imagine cu
numele de cat.jpg, n acelai folder cu pagina noastr de HTML. n cazul n care
imaginea este ntr-un director diferit, tastm att calea, ct i numele fiierului, de
exemplu, daca l pstrm ntr-un folder separat, numit imagini, codul va fi: <img
src="images/cat.jpg"/>

Cum pot schimba mrimea unei imagini in pagina mea de Web?

Prin specificarea valorilor atributelor "nlime" i "lime", putem modifica dimensiunea
imaginii n pagina noastr de Web. Pentru a modifica aceste atribute, trebuie doar sa le
adaugi la codul tu <img> tag-ul, astfel:
<img src="cat.jpg" width="48" height="48" />
Acest atribut poate lua valori diferite, putnd specifica alinierea imaginii, dup cum e
desemnat prin valoare. Valorile ar putea fi: "top", "middle", "bottom", left", "center",
"right".

76

DESIGNER PAGINI WEB

Cum pot folosi o imagine ca fundal?

Acest lucru este un pic diferit de ceea ce am vzut mai sus, deoarece pentru a seta o
imagine ca fundal nu trebuie modificate atributele tagului imagine (<img>), dar trebuie
schimbat tag-ul corpului (<body>). Acest lucru este logic, pentru c tag-ul <body>
definete corpul principal al paginii web, care este, de fapt, cea mai mare unitate vizibil a
corpului documentului. Deci, ce trebuie s facem este s definim imaginea de fundal a
paginii web, astfel:
<body background="background.jpg">
Observai c modul implicit pentru browser pentru a afia imaginea este n funcie de
dimensiunea sa iniial, deci, dac este vorba de o imagine mic, aceasta se va repeta i va
crea un efect de teracot.

Cum pot ncorpora alte tipuri de date multimedia n pagina mea de web?
Putei aduga diverse tipuri de date multimedia la pagina dvs. Web ntr-un mod similar
cu adugarea de imagini. n loc de a utiliza <img> tag-ul, care este utilizat numai pentru
imagini, putei utiliza tag-ul <object>, care este mai generic. Tot ce trebuie s facei este
s defini tipul de datelor multimedia pe care vrei s le incorporai.

Cum pot s adaug sunet la pagina mea web?

Acesta este un exemplu:
<object type="audio/x-mpeg" data="yoursound.mp3"> </ object>
Cu type = "audio / x-MPEG" transmitem browser-ului Web c este dorit ca un fiier audio
s fie ataat, fiier de tip mpeg(mp3). Apoi, cu data = "yoursound.mp3" vom transmite
numele (adresa) fiierului care trebuie ataat.

Cum pot aduga fiiere video la pagina mea web?

Acesta este un exemplu:
<object data="test.mpg" type="video/mpeg" width="320" height="255"> </ object> Cu
type = "video / MPEG" transmitem browser-ului Web c este dorit ca un fiier video s
fie ataat, fiier de tip mpeg(mp3). Apoi, cu data = "test.mpg" vom transmite numele
(adresa) fiierului care trebuie ataat. De asemenea, se pot specifica nlimea i limea
cu care acesta s apar n pagina web.

77

DESIGNER PAGINI WEB

PHP
Ce inseamna server?
Toata lumea stie, probabil, ce inseamna Internet: acea colectie uriasa
de echipamente legate intre ele in scopul schimbului de informatii sau
servicii. Daca ar fi sa simplificam mult ideea de internet, am putea
considera ca acesta este o retea de calculatoare in care fiecare nod
(calculator) gazduieste informatii sau servicii ce pot fi accesate de
publicul larg. Aceste calculatoare din internet poarta numele
de servere.
In sens larg, un server este un dispozitiv (combinatie de hardware si
software) care ofera servicii si/sau informatii utilizatorilor (clientilor).
O data cu notiunea de server apare si cea de arhitectura clientserver, care se refera la un ansamblu format dintr-un dispozitiv server
(furnizor de informatii) si un dispozitiv (calculator) client, conectate
prin intermediul unei retele si care fac schimb de informatii. Cel mai
comun exemplu al acestui ansamblu este dat de functionalitatea de
partajare a fisierelor in retea (File Sharing). Spre exemplu, un
calculator contine un folder partajat (share-uit) si un alt calculator
copiaza folderul prin retea. In aceasta situatie, calculatorul care ofera
folderul are functia de server iar cel care preia folderul - pe cea de
client. Rolul de client/server nu este statornic in acest scenariu, oricare
din cele doua calculatoare putand oricand sa detine oricare din functii.
Asadar notiunea de server se aplica in momentul in care dispozitivul
din retea (calculatorul) ofera informatii sau servicii.

Server web
Un tip particular de server, este server-ul web. Un server web este un
sistem care gazduieste si ofera pagini web prin intermediul unei retele.
De cele mai multe ori, termenul de server web desemneaza a
aplicatie, un program care ruleaza pe calculatorul-server si care este
responsabil cu primirea cerintelor de la utilizatori si transferarea
paginilor web catre ei.

Ce inseamna site?
Paginile stocate pe un calculator-server si oferite publicului larg sunt
grupate sub denumirea generica desite. Un site (denumit si website)
este, asadar, o colectie de pagini web, interconectate, stocate pe un
server web.

78

DESIGNER PAGINI WEB

Deservirea paginilor
In momentul in care un server web primeste o cerinta de la un
utilizator pentru o pagina, se verifica mai intai existenta acesteia. Daca
pagina exista fizic pe server atunci este transmisa catre utilizator.
Paginile returnate de un server web sunt de obicei in format HTML.
Navigatoarele web (browserele) sunt capabile sa interpreteze codul
HTML si sa afiseze informatiile intr-un mod usor de citit.
In imaginea de mai jos este reprezentata o comunicare tipica intre un
server web si un client.

Deservirea
PHP

unei

pagini

statice,

fara

interventia

interpretorului

In lumea reala, paginile deservite de un server web sunt de cele mai

multe ori modificate inainte de a fi transmise catre clienti. Exista
situatii cand paginile cerute nici nu exista fizic pe calculatorul server si
cu toate astea ele sunt construite si deservite la cerere.
Acest lucru este posibil gratie unor module sau aplicatii aditionale care
functioneaza impreuna cu aplicatia de server web. Unul din aceste
module este PHP.

Pregatirea

calculatorului

pentru

lucrul

cu

PHP.

Instalare PHP
Cel mai simplu mod de a lucra cu PHP este sa fie instalat pe
calculatorul personal. Este nevoie, asadar, ca propriul calculator sa
devina un server web mai intai. Acest lucru este posibil instaland o

79

DESIGNER PAGINI WEB

aplicatie capabila sa accepte cerinte si sa transmita pagini web ca
raspuns. O astfel de aplicatie este Apache HTTP Server.
Deservirea paginilor
Avand un server web pregatit, mai trebuie doar instalat modulul
PHP. PHP actioneaza ca o componenta aditionala a serverului web care
este invocata de ori cate ori o pagina PHP este intalnita. Aceasta
componenta proceseaza pagina si apoi o transmite inapoi la webserver, ajungand in final in browserele utilizatorilor. Acest proces este
prezentat in imaginea din dreapta de mai jos

Deservirea

unei

pagini

statice,

PHP

80

fara

interventia

interpretorului

DESIGNER PAGINI WEB

Deservirea unei pagini dinamice, modificata de PHP in momentul request-ului

Static si dinamic
Din imaginile de mai sus, se observa ca atunci cand nu exista un
interpretor PHP, paginile sunt transmise direct catre utilizatori asa cum
sunt salvate pe disc, fara modificari. Pentru a actualiza continutul
acestora, este nevoie de interventie directa asupra lor si salvarea
modificarilor pe server. Aceste pagini sunt denumite"pagini statice".
Spre exemplu, presupunand ca avem o pagina statica ce afiseaza
membrii unei comunitati, la fiecare inscriere a unei noi persoane,
pagina ar trebui modificata manual de catre cineva cu acces la serverul
web. Lucrurile se complica daca acea lista este personalizata, cu
trimiteri catre alte informatii (cum ar fi detalii de contact pentru
fiecare, etc) sau cu un design intortocheat. Toate aceste probleme pot
fi rezolvate cu ajutorul PHP.
Folosind o secventa de cod PHP am putea prelua lista de membri dintro baza de date, eliminand problema actualizarii - nu va mai fi nevoie sa
se modifice pagina odata cu fiecare membru nou, scriptul PHP va afisa
in mod automat noile persoane adaugate in baza de date. Este
rezolvata si problema linkurilor personalizate, sau a designului - toate
elementele specifice unei persoane pot fi generate in mod automat.
Aceste pagini sunt, asadar, modificate de catre PHP la momentul
accesarii lor de catre utilizatori. In functie de parametrii primiti si de
secventa de cod definita de programator, aceasi pagina poate avea
continut diferit. Aceasta proprietate este denumita dinamism, iar o
astfel de pagina este considerata pagina dinamica.

81

DESIGNER PAGINI WEB

Instalarea interpretorului PHP

Pentru ca fisierele ce contin cod PHP sa poata fi interpretate, devenind
astfel dinamice, serverul web trebuie configurat pentru "comunicarea"
cu modulul PHP.
Pentru inceput, cea mai simpla modalitate de a avea totul pregatit
pentru a lucra cu PHP este un pachet "All in one". Voi descrie pe scurt
pasii necesari instalarii programului EasyPHP, o aplicatie care include
serverul web Apache, interpretorul PHP, sistemul de gestiune a bazelor
de date MySQL si aplicatia de administrare a bazelor de date
phpMyAdmin.

1.

2.
3.

4.

5.

6.

Nota: trebuie sa dezinstalati Apache, PHP sau MySQL de pe calculator

(daca le aveti deja) inainte de a instala EasyPHP.
Descarcati EasyPHP. Mergeti la http://www.easyphp.org/ ->
Download EasyPHP ( sau direct
lahttp://sourceforge.net/projects/quickeasyphp/files/EasyPHP/5.3.0/Ea
syPHP-5.3.0-setup.exe/download )
Instalati EasyPHP (e bine sa se pastreze configurarile
implicite).
Porniti programul EasyPHP (de cele mai multe ori va porni
automat)
Nota: la avertizarile de la Windows XP/Vista trebuie sa se aleaga
"Allow" sau "Unblock" altfel este posibil ca serverul web sa nu
functioneze.
In fereastra de EasyPHP apasati F8 (sau Click-Dreapta pe iconita
EasyPHP de langa ceas - in Systray - si alegeti Explore). Se va
deschide un folder, care reprezinta locatia de unde vor fi luate fisierele
cand sunt afisate in browser (de obicei C:\Program Files\EasyPHP
5.3.0\www). Nota: in Windows Vista este nevoie sa deschideti manual
acest folder (F8 nu pare sa functioneze). Aceasta locatie poarta numele
de Document Root si aici trebuie puse toate fisierele .php pe care le
scrieti.
Salvati un fisier de test in locatia de mai sus. Dati-i un nume
sugestiv, gen test.php. Editati fisierul astfel incat sa contina
urmatoarea secventa:
<?php print "Salut, ai reusit! Iata primul tau script PHP"; ?
>
Intr-un browser (Firefox, Internet Explorer, Opera, Safari, etc)
mergeti la http://localhost/. Va fi afisata o pagina cu linkuri catre
fisierele/folderelor din Document Root care pot fi accesate. Faceti click
pe test.php. O alta modalitate de a accesa un fisier este sa mergeti

82

DESIGNER PAGINI WEB

direct lahttp://localhost/[cale]/[nume].php, de
exemplu http://localhost/test.php.
7.
Accesand http://localhost/test.php ar trebui sa fie afisata o
pagina alba cu mesajul de mai sus.
Retineti! Toate fisierele PHP pe care le scrieti (inclusiv cele de test
preluate de pe acest site) *trebuie*salvate in folderul Document
Root (locatia implicita este C:\Program Files\EasyPHP 5.3.0\www).
Webserver-ul local instalat de EasyPHP va cauta fisierele doar in
aceasta locatie. Daca fisierele sunt salvate in alta parte ele nu vor mai
putea fi accesate in browser.

De ce imi trebuie un server web?

Instaland EasyPHP, calculatorul personal devine un server web (local,
ce-i drept - accesibil doar de catre tine). Practic PC-ul se comporta ca
un site ce are adresa http://localhost/ (sau http://127.0.0.1/). Este
foarte important ca fisierele PHP sa fie accesate prin intermediul
serverului web, deoarece acesta recunoaste scripturile PHP si invoca
automat interpretorul PHP. Fara aceasta intermediere oferita de webserver, scripturile PHP nu ar fi procesate ci trimise asa cum sunt la
browser.
De exemplu, avem un fisier care contine doar urmatorul cod: (atentie
la semnul ! in afara tagurilor)
<?php print "Salut"; ?>
Sa

presupunem
-

Daca

il

ca

!
fisierul

accesam

in

se

numeste

browser

salut.php.

folosind

adresa

"http://localhost/salut.php" (prin intermediul serverului web local)

atunci interpretorul PHP este invocat, scriptul este executat iar
rezultatul
-

procesarii

afisat

de

browser

va

fi

"Salut!".

Daca accesam fisierul direct de pe disc, scriind in browser calea lui

"file:///C:/Program Files/EasyPHP 5.3.0/www/salut.php" se va afisa (in

cel mai fericit caz) doar "!". Asta pentru ca interpretorul PHP nu este
invocat, iar fisierul este transmis ca atare, cu tagurile de PHP (care
sunt ignorate de browser).

83

DESIGNER PAGINI WEB

PHP si programarea server-side

Pe scurt, ce este PHP? Ca idee generala, PHP reprezinta un limbaj ce
permite modificarea paginilor web inainte ca acestea sa fie transmise
de server catre browserele utilizatorilor. PHP poate insera text intr-ul
fisier HTML deja definit, poate defini un fisier HTML de la zero, poate sa
afiseze o imagine sau sa redirectioneze utilizatorul catre alta pagina. In
cadrul acestui proces, PHP poate consulta baze de date, fisiere externe
sau orice alta resursa, poate trimite email-uri sau executa comenzi ale
sistemului de operare.
Modul in care PHP modifica/defineste o pagina ce va fi afisata de
browser este prin instructiunile scrise de programator si delimitate de
etichetele <?php ?>. Astfel, orice se afla intre aceste tag-uri va fi
executat de interpretorul PHP si inlocuit cu rezultatul executiei. Ce
este in afara lor ramane neschimbat si este transmis catre browser.
Spre exemplu, avem o pagina ca mai jos.
<html>
<body>
Azi e <?php print date( 'd.m.Y' ); ?>
</body>
</html>
Rezultatul va fi o pagina HTML ce va contine cuvintele "Azi e" si
rezultatul codului PHP (in cazul acesta - data curenta). Codul HTML
final, transmis de server in urma procesarii PHP este urmatorul:
<html>
<body>
Azi e 09.04.2012
</body>
</html>
Codul PHP nu trebuie sa fie neaparat intercalat in pagina HTML.
Secventa de mai jos produce o pagina similara celei de mai sus (in
acest caz PHP produce o pagina HTML de la zero).
<?php
print

'<html><body>';

print

'Azi e' . date( 'd.m.Y' );

print

'</body></html>';

?>

84

DESIGNER PAGINI WEB

Nota: interpretorul PHP nu este instalat implicit pe orice calculator.
Pentru ca toate exemplele de pe site sa functioneze, trebuie sa instalati
(manual) un interpretor. Vedeti sectiunea "Inainte de a incepe" pentru
detalii.

Ce afiseaza PHP?
Rezultatul unui script PHP este de obicei text simplu care, de cele mai
multe ori, este interpretat ca fiind cod HTML. Cu alte cuvinte, in
majoritatea cazurilor PHP returneaza o pagina ce va fi afisata in
browser. La inceput, acest lucru poate genera confuzii, intrucat sursa
HTML este diferita de ceea ce se afiseaza efectiv in browser.
Spre exemplu, fie urmatoarea secventa de cod:
<?php
print

"Salut";

print

"Acesta este un script simplu";

?>
Probabil v-ati astepta ca rezultatul sa fie un text afisat pe 2 linii.
Salvand aceasta secventa intr-un fisier PHP si accesandu-l prin
intermediul unui web-server, veti observa ca rezultatul este urmatorul:
SalutAcesta este un script simplu
Desi este confuz, rezultatul este corect. Codul PHP afiseaza doar
caracterele care i-au fost indicate. Sfarsitul de linie reprezinta un
caracter separat, ne-printabil, dar care controleaza cum apare textul
pe ecran. In cazul nostru, nu s-a transmis acest caracter (numit si newline)

si prin urmare PHP nu l-a afisat.

Sa rescriem exemplul de mai sus pentru a se afisa si caracterul "sfarsit

de linie"
<?php
print

"Salut";

"\n"; # se afiseaza caracterul "new-line" care

determina trecerea la un rand nou
print

# randul nou va fi afisat in textul trimis catre browser

print

"Acesta este un script simplu";

85

DESIGNER PAGINI WEB

?>
Verificand iar in browser veti constata ca nu s-a schimbat nimic. La
prima vedere. In realitate rezultatul este afisat pe 2 linii, in textul
trimis de PHP catre browser. Intrucat pagina este interpretata ca fiind
HTML,

browserul

ignora

caracterele

new-line.

Pentru

verificare

vizualizati sursa paginii (meniul View din browser -> view source).
Pentru a ajunge la efectele dorite (acelea de a afisa un text pe 2 linii)
trebuie folosit urmatoarea secventa:
<?php
print

"Salut";

"\n"; # acum se afiseaza caracterul care determina

trecerea la un rand nou
print

# randul nou va fi afisat in textul primit de browser

(vizibil in sursa HTML)
"<br>"; # se afiseaza tagul BR ce va fi interpretat de
browser ca 'linie noua'
print

# linia noua va fi afisata in pagina finala HTML dupa ce

este interpretata de
# browser si nu are nici o legatura cu \n
print

"Acesta este un script simplu";

?>
Sursa paginii arata in felul urmator:
Salut
<br>Acesta este un script simplu
In browser nu apare tagul BR, intrucat acesta este interpretat ca sfarsit
de linie. Caracterul "new-line" afisat de noi (in print "\n") este ignorat
oricum. Rezutatul:
Salut
Acesta este un script simplu

Nota: Este foarte important sa se inteleaga diferenta dintre ceea ce se

returneaza in urma executiei unui script PHP si ceea ce se afiseaza
propriu-zis in browser. Pe scurt, PHP printeaza cod HTML care este
afisat diferit de browsere.

86

DESIGNER PAGINI WEB

De asemenea, trebuie inteles faptul ca functia print nu afiseaza
textul pe mai multe linii daca nu se specifica acest lucru in mod
express. Spre exemplu fie urmatoare secventa de cod:
<?php
print

"1";

print

"2";

print

"3";

?>
Rezultatul va fi
123
S-a afisat doar ce s-a indicat, 3 caractere, pe o singura linie, fara
spatii.
Un alt lucru important de retinut este faptul ca odata printat, un text
nu mai poate fi "sters". Nu exista "undo" pentru un print. Se poate
captura intregul continut ce se transmite la finalul executiei, dar nu se
poate altera textul afisat de o instructiune print anume.
Intelegand aceste aspecte va va fi mai usor in lucrul cu PHP si in modul
in care verificati rezultatele scripturilor voastre.

Taguri PHP, instructiuni, punct si virgula

Codul PHP trebuie inclus in fisierele ce vor fi deservite utilizatorilor
finali si trebuie delimitat de restul continutului prin tagul de inceput <?
php si tagul de sfarsit ?>. Practic tot ce se afla in interiorul acestor
etichete va fi interpretat ca fiind cod-sursa PHP (cod ce va fi executat
de interpretorul PHP). Textul din afara celor 2 taguri este lasat
neschimbat, fiind ulterior interpretat de browser. Se pot folosi si alte
etichete in functie de configuratia serverului web, dar acestea nu sunt
recomandate.
<?php
/* forma recomandata */
?>
<script language="php">
/* forma disponibila oricand, putin folosita */
</script>

87

DESIGNER PAGINI WEB

<?
/* taguri scurte, acceptarea lor de catre web-server depinde
de configurare */
?>
<%
/* taguri in stilul asp, acceptarea lor de catre web-server
depinde de configurare */
%>
Codul

PHP

este

format

din instructiuni -

comenzi

date

catre

interpretor, in urma carora se executa ceva. Asa cum s-a mai spus,
PHP este folosit in principal pentru a genera cod HTML, asa ca de cele
mai multe ori instructiunile folosite sunt cele de afisare. In aplicatii mai
complexe se pot insa folosi si instructiuni de conectare la bazele de
date, de citire/scriere/manipulare fisiere, intructiuni de trimitere emailuri si altele. Instructiunile se pot grupa in blocuri delimitate de
acolade { }. Aceste blocuri, numite si "instructiuni complexe" se
comporta ca si cum ar fi o singura instructiune (vezi mai jos exemple
de blocuri).
Toate instructiunile (in afara de blocuri) trebuie sa fie terminate
cu punct si virgula ( ; ). Lipsa acestuia genereaza o eroare.

Intructiuni uzuale in PHP

echo, print, printf

In multe din scripturile scrise de incepatori (si nu numai) continutul
rezultat in urma executiei este un text (care poate fi sau nu cod
HTML). Pentru a obtine acest text, secventele de cod trebuie sa contina

88

DESIGNER PAGINI WEB

instructiuni explicite care sa "spuna" intrepretorului ce anume trebuie
afisat.
Instructiunile de afisare sunt print, echo si printf. Exista si alte
modalitati dar aceste 3 instructiuni sunt cele mai uzuale si usor de
folosit. Diferente intre ele exista
(vezihttp://www.faqts.com/knowledge_base/view.phtml/aid/1/fid/40),
dar ca idee generala print si echo fac acelasi lucru si poate fi folosita
oricare dintre ele. printf este folosita mai rar datorita sintaxei oarecum
greoaie.
<?php
# cele 2 instructiuni de mai jos sunt echivalente
print
echo

"Text";
"Text";

# o instructiune echo poate primi mai multi parametrii

echo "Afisez", " un text din ", 4, "

bucati";
# o singura intstructiune print poate primi doar unul
print

"Afisez";

print

" un text din ";

print

4;

print

" bucati";

# printf este folosita pentru a formata continutul, la fel

ca in C/C++
printf(

"Am %4.2f lei", 102.1234 ); // afiseaza Am 102.12 lei

?>

Instructiuni de atribuire
Alte instructiuni, la fel de uzuale ca cele de afisare, sunt cele de
atribuire. Acestea sunt explicate mai pe larg in sectiunea "Variabile.
Constante".

89

DESIGNER PAGINI WEB

Instructiunea if
In afara de aceste 2 categorii, la fel de des intalnita este
instructiunea if. Aceasta se numeste instructiunea de test si este
folosita pentru a executa o secventa de cod in functie de valoarea de
adevar a unei conditii. Exista mai multe forme, prezentate mai jos:
if( conditie ) instructiune 1;
Aceasta forma permite executarea unei instructiuni numai daca este
indeplinita o conditie. Conditia poate fi orice expresie de genul "2 mai
mic decat 3", "variabila $a este definita", s.a. tradusa in limbajul PHP.
Instructiunea poate fi simpla (o singura instructiune) sau un bloc (mai
multe instructiuni delimitate de acolade). Regula este ca atunci cand
este nevoie sa se execute mai mult de o instructiune, trebuie creat
un

bloc

(trebuie

folosite

acoladele).

Exemplu:
<?php
if( 2 < 4 ) print "2 e mai mic decat 4";
if( 3 > 1 ) {
print

"3 e mai mare ca 1 \n";

print

"<br />";

}
?>
Atentie! Daca nu se foloseste un bloc in cadrul instructiunii if, atunci
doar prima instructiune dintre cele existente se executa in urma
evaluarii conditiei, pe cand celelalte se vor executa intotdeauna,
indiferent de rezultatul verificarii. De exemplu:
<?php
echo

"Este 3 mai mic decat 2? <br />";

if( 3 < 2 )
print

"3 < 2";

90

DESIGNER PAGINI WEB

print

"3 este mai mic decat 2";

?>
Codul de mai sus va afisa:
Este 3 mai mic decat 2? <br />
3 este mai mic decat 2
Pentru ca nu am inclus cele 2 instructiuni print intr-un bloc, a doua
instructiune s-a executat indiferent de valoarea de adevar a conditiei.
Codul corect (din punct de vedere logic) ar fi urmatorul, care contine
un bloc de instructiuni:
<?php
echo

"Este 3 mai mic decat 2? <br />";

if( 3 < 2 ) {
print

"3 < 2";

print

"3 este mai mic decat 2";

}
?>

Instructiunea if - else
De multe ori este nevoie sa se specifice o instructiune ce trebuie
executata daca nu este indeplinita conditia. In acest caz se foloseste if
- else.
if( conditie ) instructiune 1;
else instructiune 2;
Aceasta forma permite executarea unei instructiuni atunci cand se
indeplineste conditia sau executarea alteia diferite in caz contrar.
Aceleasi observatii ca si mai sus se aplica.

Siruri de caractere
In majoritatea scripturilor PHP se lucreaza cu bucati de text
denumite siruri de caractere sau string-uri. PHP prezinta

91

DESIGNER PAGINI WEB

particularitati in modul in care sunt folosite stringurile, particularitati ce
sunt prezentate in exemplele de mai jos.
Nota: sirurile de caractere reprezinta expresii (entitati ce
au/returneaza o valoare). Asadar, un string poate fi folosit, pe langa,
afisare, in atribuiri, la verificari, etc. In exemplele ce urmeaza s-a optat
pentru afisarea sirurilor.
<?php
print

"Salut, straine!"; // sir simplu

print

'Salut din nou!'; // sir simplu, delimitat de apostrof

?>
Nota: in acest exemplu nu este nici o diferenta intre modul de afisare a
sirurilor delimitate prin ghilimele si cele delimitate prin apostrof. Cu
toate astea, PHP trateaza in mod diferit aceste caractere. Mai multe
explicatii si exemple sunt prezentate in pagina "Variabile.Constante".
<?php
"Ma numesc \"Alex\"!"; // sir ce contine ghilimele, se
foloseste \"
print

'Porecla ta e Kelu\' ?'; // sir delimitat de ghilimele

simple ce contine un apostrof
print

print

"Text afisat pe 3 linii: \n linia 2 si \n linia3";

// atentie, textul e afisat pe 2 linii in sursa HTML cu

ajutorul \n
"Am castigat \$30 :D"; // caracterul dolar are un
statut aparte
print

// pentru a afisa semnul $ asa cum este se foloseste \$

"Text cu \\backslash\\."; // caracterul \ (numit
escape char) poate fi afisat intr-un
print

// text daca este dublat; daca e folosit doar un \ PHP ar

trata textul diferit:
print

"Text fara \backslash\- \nu se afiseaza corec\t.";

print

<<<TXT

Text pe mai multe linii.

92

DESIGNER PAGINI WEB

Delimitatorii pot avea orice nume: TXT, START, etc, cu
urmatoarele conditii
- ambii delimitatori trebuie sa aiba acelasi nume
- inainte de primul delimitator se foloseste <<<
- delimitatorul de inceput nu trebuie sa fie urmat de spatiu
sau alt caracter
- delimitatorul de final sa fie la inceputul liniei (fara
spatii inainte)
- dupa delimitatorul final se pune punct si virgula ;
TXT;
// concatenarea (legarea) sirurilor
print

'Sir1' . " legat de " . 'Sir2'; // Sir1 legat de Sir2

?>

Comentarii in PHP
Comentariile sunt portiuni de cod care nu se executa. Sunt folosite de
programatori de regula pentru a da diverse explicatii despre logica
aplicatiei, variabile si altele. Comentariile nu afecteaza executia unui
script si pot fi sterse din cod fara nici un efect.
<?php
// acesta este un comentariu. intreaga linie nu va fi luata
in considerare
# la fel ca mai sus - print "hello" - nu se executa
/* comentariu cu delimitator de inceput si sfarsit */

print

/* partea asta e ignorata */ "Salut!";

/* afiseaza
Salut!
*/
?>
Nota: comentariile /* */ nu pot fi imbricate (unele in altele). Exemplul
urmator nu este un cod valid.

93

DESIGNER PAGINI WEB

<?php
/* comentariu /* altul */ inapoi la primul */
?>
Este un lucru foarte util sa folositi comentarii in cod pentru a explica
modul de rezolvare a problemei abordate, sau pentru a da detalii
despre operatiile efectuate. Acestea va vor ajuta mai tarziu daca veti
vrea sa modificati codul scris, sau vor oferi altor persoane informatii
(valoroase) despre cum ati gandit codul respectiv.

Terminarea executiei
<?php
exit(
die(

print

"Script terminat" );
"Script terminat" );
"Acesta linie nu se afiseaza niciodata";

?>
Nota: instructiunile die si exit sunt echivalente.

Variabile in PHP
Ce sunt variabilele?
Variabilele sunt elemente ce au o anumita valoare la un moment dat.
Valoare unei variabile se poate schimba de-a lungul executiei unui
script.
Lucrul cu variabile in PHP este foarte usor. Nu trebuie specificat un tip
pentru ele (de genul "variabila text", "variabila numerica") ci acesta
este determinat in mod automat.
Variabilele sunt diferentiate de celelalte elemente ale limbajului prin
caracterul $. Astfel, o variabila are forma "$nume". Numele variabilei
poate fi orice identificator valid (un text ce contine doar litere, cifre si
underscore _, fara spatii sau alte caractere; un identificator nu poate
incepe cu o cifra).

94

DESIGNER PAGINI WEB

Declararea variabilelor
In PHP declararea variabilelor se realizeaza in acelasi timp cu
initializarea lor (cu atribuirea unei valori de inceput). Atribuirea unei
valori se realizeaza cu ajutorul instructiunii de atribuire ce are
forma <nume variabila> = <valoare>;
// variabile numerice
$variabila = 1;
$numar = 0;
// variabile text (stringuri)
$text = "Salut";
$text2 = 'Ce faci?';
// variabile logice (boolean)
$stiuPHP = true;
$uitRepede = false;
// vector
$vectorGol = array();
$vectorS = array( 10,11,12,13 ); // vector simplu
// vector asociativ
$vector = array(
'luni' => 'Monday',
'marti' => 'Tuesday',
'miercuri' => 'Wednesday'
);
// definirea unei noi componente a unui vector asociativ
$vector[ 'joi' ] = 'Thursday';
// vector simplu definit ca asociativ, echivalentul lui
$vectorS

95

DESIGNER PAGINI WEB

$vectorS2 = array(
0 => 10,
1 => 11,
2 => 12,
3 => 13
);
Nota: un vector asociativ se diferentiaza de unul normal prin faptul ca
are chei alfa-numerice (cuvinte).
Atentie: PHP face distinctie intre literele mari si mici. Astfel, cele 3
variabile de mai jos sunt TOTAL diferite:
$variabila = "negru";
$vaRiabila = "alb";
$Variabila = 1;
Atribuirea de valori
Se realizeaza la fel ca si declararea prin intermediul instructiunii de
atribuire.
# atribuirea unei valori anume
$variabila = 2;
# copierea valorii de la o alta variabila
$text = $variabila;
# copierea valorii functioneaza si in cazul vectorilor
# in urma copierii cei 2 vectori vor fi identici
$vectorS = $vectorS2; # toate componentele lui $vectorS2
sunt copiate in $vectorS
# in cazul vectorilor se pot atribui valori separat fiecarei
componente
$vectorS[ 0 ] = 100;
$vectorS[ 3 ] = 10;
$vector[ 'luni' ] = 'Lundi';

96

DESIGNER PAGINI WEB

$vector[ 'joi' ] = 'Jeudi';

Stergerea variabilelor
De obicei nu e nevoie ca variabilele sa fie sterse dupa ce au fost
folosite. Totusi, lucrul aceste se poate face in urmatoarele moduri:
unset( $variabila );
$variabila = null;
Afisarea variabilelor
Afisarea se realizeaza utilizand oricare din instructiunile de afisare:
$variabila = "Text";
$randNou = "<br>";

print
echo

$variabila; print $randNou;

$variabila, $randNou;

Ponturi de PHP
Diferenta dintre ghilimele simple si duble la declararea variabilelor
Ghilimelele duble permite compilatorului sa "citeasca" variabilele ce
apar in interiorul textului.
$today = date( 'd-m-Y' );
$text1 = "Azi e $today";

print

$text1; // Azi e 17-07-2008

Astfel, textul cuprins intre ghilimele duble este procesat inainte de

afisare: variabilele sunt cautate iar valoarea lor este afisata in locul
numelui.
In cazul apostrofului, textul este afisat neschimbat, iar variabilele nu
sunt interpretate.
$today = date( 'd-m-Y' );

97

DESIGNER PAGINI WEB

$text2 = 'Azi e $today';

print

$text2; // Azi e $today

Verificarea
daca
o
variabila
e
definita
Se pot folosi 2 functii: isset si empty .
// definim o variabila, cealalta definire nu se executa
$var = 0;
// $var2 = 1;
var_dump( isset($var)

); // bool(true)

var_dump( isset($var2)

); // bool(false)

var_dump( empty($var1)

); // bool(true), pentru ca 0 este

considerat nul
var_dump( empty($var2)

); // bool(true)

Atentie, isset verifica

daca

variabila

fost

definita,

pe

cand empty verifica daca a fost definita si daca are o valoare

considerata vida. O variabila este vida daca are urmatoarele valori:
"" (text de lungime 0)
0 (cifra 0)
"0" (textul "0")
null
false
array() (vector gol)
Nota: pentru valorile de mai sus, empty returneaza true
Operatorul
{}
Pot exista situatii cand anumite variabile trebuie procesate mai inainte
decat altele, sau mai inainte de procesarea intregii instructiuni. De
exemplu:
$salut = array(
'dimineata' => 'Buna dimineata',
'pranz' => 'Buna ziua',
'seara' => 'Noapte buna'

98

DESIGNER PAGINI WEB

);

print

"$salut[ 'pranz' ], vizitatorule"; // eroare

Modul in care am scris variabila ($salut[ 'pranz' ]) este corect. Doar ca

PHP-ul nu "stie" sa vada variabila noastra ca pe un element din vector,
sa-i ia valoarea si apoi sa afiseze tot textul. Pentru a rezolva aceasta
problema folosim acoladele:
"{$salut[ 'pranz' ]}, vizitatorule"; // "Buna ziua,
vizitatorule"
print

In acest caz spunem compilatorului sa interpreteze mai intai ce este

intre acolade (elementul $salut[ 'pranz' ] din vector) si apoi sa afiseze
tot

textul.

Ori de cate ori e nevoie ca o variabila sa fie interpretata cu prioritate,

ea trebuie pusa intre acolade.
Dublu-dolar

($$nume)

$obiect = 'masina';
$masina = "Chevrolet";
$avion = "Boeing";
$tren = "TGV";

print

$$obiect; // Chevrolet

Pentru a intelege ce se intampla, trebuie mentionat ca ultima linie

poate fi scrisa astfel:
print

${$obiect}; // Chevrolet

In virtutea explicatiei de mai sus a operatorului {}, putem vedea usor

ca PHP mai intai extrage valoarea variabilei $obiect ( care este:
"masina" ) si apoi afiseaza variabila $masina (care are valoarea
"Chevrolet".

99

DESIGNER PAGINI WEB

Constante
Constantele sunt entitati care nu isi schimba valoarea pe parcursul
executiei. Sunt utile pentru a recunoaste usor valorile folosite in cod.
De exemplu, e mai usor de inteles urmatorul cod, cand se foloseste o
constanta decat daca s-ar folosi cifra 5
define( 'ZILE_LUCRATOARE', 5);
$zile = array( 'luni', 'marti', 'miercuri', 'joi', 'vineri',
'sambata', 'duminica' );

print

'Zilele lucratoare sunt: ';

for( $i = 0; $i < ZILE_LUCRATOARE; $i++ ) {

print

$zile[ $i ] . ' ';

}
Asadar constantele de definesc folosind define:
define(

'NUME', "Flo" );

define(

'VARSTA', 10 );

define(

"ADEVARAT", true );

Este recomandat ca numele constantelor sa fie scris cu majuscule

(pentru a fi mai usor identificate) desi nu este obligatoriu. Atunci cand
se folosesc, se specifica doar numele, fara ghilimele sau $:
print

"Ma numesc " . NUME;

print

" si am " . VARSTA . " ani";

Pentru

a verifica

daca o constanta

functia defined
if( defined( 'NUME' ) ) {
print

"Ma numesc " . NUME;

}
if ( !defined( 'VARSTA' ) ) {
define(

'VARSTA' , 2 );

}
print

" Am " . VARSTA . " ani";

100

este definita,

se foloseste

DESIGNER PAGINI WEB

Superglobals, variabile speciale

PHP dispune de cateva variabile "built-in". Acestea sunt pre-populate
de PHP in momentul executiei, deci nu trebuie definite sau initializate.
Sunt disponibile in orice portiune a codului si in orice script PHP si pot
fi folosite fara sa fie nevoie de alte pregatiri. Anumite variabile (ca de
exemplu $_POST) au valori doar in anumite situatii (spre exemplu,
doar atunci cand sunt folosite formulare).
Mai jos sunt descrise pe scurt aceste variabile, cu mentiunea ca in
lectiile urmatoare vor fi folosite in exemple din care veti intelege (usor)
rostul lor.
$_GET
Vector asociativ ce contine parametrii transmisi prin URL. De exemplu,
daca pagina noastra PHP se numeste test.php, un URL de genul
http://localhost/test.php?nume=Alex&varsta=12&ocupatie=elev
ar popula variabila $_GET cu urmatoarele valori:
print_r(

$_GET );

/* afiseaza:
Array
(
[nume] => Alex
[varsta] => 12
[ocupatie] => elev
)
*/
Nota:

numele

parametrilor

au

rol

de cheie in

vectorul

$_GET.

Vectorul $_GET este de asemenea populat la folosirea formularelor

GET.
$_POST
Similar cu $_GET, doar ca parametrii sunt transmisi prin formulare
(forms) - vezi lectia "Transmiterea prin formulare (POST)" pentru
detalii
$_REQUEST
Inglobeaza atat $_GET cat si $_POST.

101

DESIGNER PAGINI WEB

$_SESSION
Folosita pentru a defini date ce sunt disponibile atata timp cat
utilizatorul acceseaza site-ul, indiferent de paginile vizualizate. In mod
normal o variabila este definita doar cand un utilizator cere o pagina.
La finalul executiei scriptului, valorile variabilelor se pierd (inclusiv
variabile $_GET, $_POST, etc). Daca sunt puse in vectorul $_SESSION,
valorile pot persista si dupa terminarea executiei scripturilor.
$_SERVER
Furnizeaza informatii despre server, pagina ceruta si utilizatorul care
acceseaza pagina.
print_r( $_SERVER );
/* afiseaza ceva asemanator cu ce e mai jos:
Array
(
[REDIRECT_STATUS] => 200
[HTTP_VIA] =>
[HTTP_COOKIE] =>
[HTTP_REFERER] => http://php.punctsivirgula.ro/
[HTTP_USER_AGENT] => Mozilla/5.0 ...
[HTTP_HOST] => php.punctsivirgula.ro
[HTTP_ACCEPT] =>
text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=
0.8
[HTTP_ACCEPT_LANGUAGE] => ro-ro,ro;q=0.8,en-us;q=0.6,engb;q=0.4,en;q=0.2
[HTTP_ACCEPT_CHARSET] => UTF-8,*
[HTTP_KEEP_ALIVE] => 300
[HTTP_CACHE_CONTROL] => max-age=0, max-age=0
[HTTP_CONNECTION] => Keep-Alive
[PATH] => /bin:...:/usr/bin:/bin
[SERVER_SIGNATURE] => Apache/2.2.9 (Unix) ... at
php.punctsivirgula.ro Port 80
[SERVER_SOFTWARE] => Apache/2.2.9 (Unix) ...
[SERVER_NAME] => php.punctsivirgula.ro
[SERVER_ADDR] => 89.xx.xx.xx
[SERVER_PORT] => 80

102

DESIGNER PAGINI WEB

[REMOTE_ADDR] => 69.xx.xx.xx
[DOCUMENT_ROOT] => /.../
[SERVER_ADMIN] => webmaster@...
[SCRIPT_FILENAME] => /.../index.php
[REMOTE_PORT] => 35423
[REDIRECT_QUERY_STRING] =>
[REDIRECT_URL] => /arrays/
[GATEWAY_INTERFACE] => CGI/1.1
[SERVER_PROTOCOL] => HTTP/1.1
[REQUEST_METHOD] => GET
[QUERY_STRING] =>
[REQUEST_URI] => /arrays/
[SCRIPT_NAME] => /index.php
[PHP_SELF] => /index.php
[REQUEST_TIME] => 1250589158
[argv] => Array()
[argc] => 0
)
*/
$_ENV
Afiseaza informatii despre mediul curent in care este instalat si ruleaza
interpretorul PHP, despre scriptul curent, etc
$_COOKIE
Folosita pentru a vedea elementele de tip Cookies de la site-ul/pagina
curenta, disponibile pe calculatorul utilizatorilor.
$_FILES
Folosita la incarcarea fisierelor pe server (file uploads) - vezi lectia "File
upload" pentru mai multe detalii
Desi toate aceste variabile au si nume alternative, este recomandat sa
se foloseasca in forma in care au fost prezentate mai sus.

103

DESIGNER PAGINI WEB

Constante magice
Limbajul PHP dispune de o serie de "constante magice" care au valori
diferite in functie de anumiti momentul si codul in care sunt folosite.
Denumirea de 'constanta' este improprie, pentru ca, asa cum stiti deja,
o constanta nu-si poate schimba valoarea. Nici 'variabile' nu pot fi
numite deoarece nu au nevoie de declarare sau initializare, asa ca s-a
recurs la un compromis: denumirea 'constante magice' (magic
constants).
Cele mai uzuale sunt __LINE__, __FILE__, __FUNCTION__ si __CLASS__. Mai
noile __DIR__, __METHOD__ si__NAMESPACE__ sunt mai rar folosite datorita
faptului ca au nevoie de o versiune mai noua a interpretorului PHP (cel
putin versiunea 5.0 sau chiar 5.3)
Mai jos sunt explicate aceste constante.
LINE
Returneaza linia curenta a scriptului PHP.
<?php
# afiseaza numarul liniei pe care este scrisa instructiunea
echo
echo

__LINE__; // 151

?>
FILE
Contine calea completa catre scriptul PHP care se executa. Daca este
folosita intr-un fisier inclus atunci numele acestui fisier este returnat.
<?php
echo

__FILE__; // numescript.php

?>
FUNCTION
Returneaza numele functie din interiorul careia se foloseste constanta.
<?php
# declar o functie care contine o constanta magica
function spuneNumele() {
echo

__FUNCTION__;

}
# apelez functia care va afisa valoarea constantei

104

DESIGNER PAGINI WEB

spuneNumele(); // va afisa: spuneNumele
?>
CLASS
Returneaza numele clasei curente.
DIR
Contine numele directorului in case este salvat scriptul curent. Aceasta
constanta este echivalenta cu dirname(__FILE__).
METHOD
Contine numele metodei de clasa din care se foloseste constanta. Se
poate folosi numai cu clase.
NAMESPACE
Contine numele spatiului de lucru curent (name-space).

Operatori de comparare
$a == $b // egal
$a === $b // identic (aceeasi valoare si acelasi tip)
$a != $b // diferit
$a <> $b // diferit
$a !== $b // ne-identic
$a < $b // strict mai mic
$a <= $b // mai mic sau egal
$a > $b // strict mai mare
$a >= $b // mai mare sau egal
Exemple:
<?php
$a = 4; # initializam $a cu numarul 4
$b = "4"; # initializam $b cu string-ul "4"
if( $a == 4 ) print "\$a este 4";

# va afisa "$a este 4"

else print "\$a nu este 4";

if( $a == $b ) print "Sunt egale";

105

# va afisa "Sunt egale"

DESIGNER PAGINI WEB

else print "Nu sunt egale";
if( $a === $b ) print "Sunt identice";
identice"

# va afisa "Nu sunt

else print "Nu sunt identice";

# Nota: deoarece $a este numar iar $b string, ele nu sunt
identice
if( $a > 4 ) print "\$a este mai mare decat 4";
?>
Atentie! Daca se compara un string (text) cu un numar, stringul este
convertit la un numar. Exemplu:
"text" == 0 // echivalent 0 == 0, evalueaza la true
Daca se compara 2 stringuri ce contin numere, acestea sunt mai intai
convertite la numerele pe care le reprezinta si apoi are loc comparatia.
Astfel, 2 texte care sunt diferite ar putea fi considerate egale.
Exemplu:
"1" == "01" // echivalent 1 == 1, evalueaza la true
"1" == "1e0" // echivalent 1 == 1, evalueaza la true
Nota: "01" si "1e0" sunt notatii matematice diferite pentru numarul 1.
Diferenta intre operatorii == si =
Operatorul == este diferit de operatorul de atribuire = si nu trebuie
confundati. Dublu-egal (==) este folosit pentru comparare iar egal
simplu (=) - pentru atribuirea de valori unei variabile.
# $a = 5 este o atribuire.
print

$a = 5; // 5

# instructiunea print afiseaza rezultatul atribuirii

( rezultatul unei atribuiri este
# intotdeauna egal cu valoarea atribuita
# $a == 1 este o verificare. Instructiunea afiseaza
rezultatul verificarii.
print

$a == 1; // false

In timp ce atribuirile se pot folosi atat de sine statator ($a = 1;), cat si
ca expresii in cadrul instructiunilor (print $a = 1; return $a = 1;)
operatorii == sau === sunt folositi doar in cadrul instructiunilor.

106

DESIGNER PAGINI WEB

# corect
$a = 10; # atribuire de sine statatoare
$a = 10; # atribuire + afisarea rezultatului
atribuirii
print

# incorect - nu genereaza erori dar aceasta constructie este

inutila.
$a == 1; # nu se face nimic cu rezultatul comparatiei
# corect
print

$a == 1; # se afiseaza rezultatul comparatiei

$a === '1'; # se afiseaza rezultatul comparatiei

exacte
print

if( $a == 1 ) echo 'egal'; # se face o verificare

Operatorul ternar
PHP ofera un operator care are 3 termeni. Sintaxa lui este urmatoarea:
(conditie ? adevarat : fals )
De remarcat ca adevarat, fals si conditie nu sunt instructiuni ci expresii
(variabile, constante, stringuri, etc) iar operatorul returneaza o valoare
si nu o variabila.
print

( 1 == 2 ? 'egal' : 'ne-egal' ); // afiseaza ne-egal

Operatori de incrementare/decrementare
Incrementare inseamna cresterea valorii, de obicei cu o unitate, iar
decrementarea este operatia inversa. PHP ofera (ca si C/C++)
posibilitatea ca incrementarea/decrementarea sa se faca printr-un
operator, fara sa fie nevoie de o instructiune separata. Spre exemplu:
$a = 1;

107

DESIGNER PAGINI WEB

// pentru a-l creste pe $a cu o unitate, normal am scrie:
$a = $a + 1;
// folosind operatorul de incrementare scriem:
$a++;
// sau
++$a;
// pentru a afisa noua valoare, putem aplica operatorul
direct din instructiunea print:
print

++$a;

Dupa cum se poate observa, putem scrie $a++ si ++$a. Diferenta

este ca atunci cand ++ apare inainte de variabila, PHP face mai intai
incrementarea si apoi returneaza noua valoare. Cand ++ apare dupa,
se returneaza valoarea actuala (ne-incrementata) si apoi se creste cu o
unitate. Exemplu:
$a = 1;
$a++; // afiseaza 1 - mai intai se afiseaza valoarea
curenta, dupa care $a devine 2;
print

$a; // afiseaza 2 - $a are valoarea 2 dupa

incrementare;
print

$a = 1
++$a; // afiseaza 2 - mai intai $a creste cu o
unitate, apoi este afisata noua valoare
print
print

$a; // afiseaza 2 - $a are valoarea 2;

Nota: aceleasi observatii (legate de pozitie) se aplica si pentru

operatorul de decrementare.
$a = 2;
$a--; // afiseaza 2 - mai intai se afiseaza valoarea
curenta, dupa care $a devine 1;
print

$a; // afiseaza 1 - $a are valoarea 1 dupa

decrementare;
print

108

DESIGNER PAGINI WEB

$a = 2
--$a; // afiseaza 1 - mai intai $a scade cu o unitate,
apoi este afisata noua valoare
print
print

$a; // afiseaza 1 - $a are valoarea 1;

Operatori de atribuire
$a = 1; // atribuire simpla
$a += 4; // echivalent cu $a = $a + 4; $a are valoarea 5
acum
$a -= 1; // echivalent cu $a = $a - 1;
$a *= 2; // echivalent cu $a = $a * 2;
$a /= 3; // echivalent cu $a = $a / 3;
$a %= 2; // echivalent cu $a = $a % 2; restul impartirii lui
$a la 2
$a = &$b; /* $a este o referinta la $b, adica ambele
variabile fac referire
la aceeasi entitate; daca $a se schimba, se va schimba si
$b.
Altfel spus, $a este un alias pentru $b */
$s = "Salut"; // atribuire simpla
$s .= " straine!"; // echivalent $s = $s . " straine!";

Operatori pentru siruri de caractere

In aceasta categorie sunt inclusi 2 operatori ".=" (operator de atribuire
prin concatenare - vezi mai sus) si "."
Punctul (.) este operatorul de concatenare (legare) stringuri.
print "Text1" . " legat de " . "Text2"; // afiseaza Text1
legat de Text2

109

DESIGNER PAGINI WEB

$a = "Eu am";
print

$a . " mere"; // afiseaza Eu am mere;

Operatori de control al erorilor @

Operatorul @ este folosit pentru a suprima erorile sau avertismentele
produse de PHP.
// $nedefinit = 1; - nu se executa, variabila nu e definita
$nedefinit; // Notice: Undefined variable: nedefinit
in file.php on line 120
print

@print $nedefinit; // nu va genera nici un avertisment /

notificare
include( "inexistent.php" ); // Warning: include(nedefinit)
failed to open...
@include( "inexistent.php" ); // nu afiseaza nici un
avertisment

Operatorul de executie ` `
Operatorul de executie permite rularea unor aplicatii sau comenzi ale
sistemului de operare direct din PHP. Rezultatul executiei este capturat
de script si poate fi prelucrat sau afisat. Operatorul ` ` este echivalent
cu functia shell_exec.
# in ambele situatii de mai jos este afisat continutul
directrului curent
$output = `ls -al`;
echo

"<pre>$output</pre>";

$output = shell_exec('ls -ala');

echo

"<pre>$output</pre>";

110

DESIGNER PAGINI WEB

Alti operatori

PHP mai dispune de urmatoarele tipuri de operatori:

Operatori aritmetici: +, -, *, etc
Operatori pe biti: &, |, ^, ~, <<, >>
Operatori logici: and, or, xor, &&, ||
Operatori de tip: instanceof
Operatori pentru vectori: asemanatori celor de comparare,
doar ca se aplica vectorilor, operatorul de uniune (+) - leaga 2 sau mai
multi vectori

Instructiuni uzuale folosite in PHP

Pe langa instructiunile comune amintite in lectia "Notiuni de baza" instructiunile de afisare (echo, print, printf), instructiunea de
atribuire, instructiunea if-then-else si cele de terminare a executiei
(exit, die) - exista o serie de alte functii ale limbajului care sunt
folosite cu precadere de orice programator.
Detaliem in cele ce urmeaza cateva dintre ele.
Includerea altor scripturi: include() si require()
De multe ori este nevoie sa separam codul nostru in scripturi de sine
statatoare. Spre exemplu, putem avea niste declaratii de date intr-un
script numit config.php si codul propriu-zip intr-un altul, script.php.
Pentru a putea include codul dintr-un fisier separat in scriptul curent se
pot folosi doua functii: include si require, cu derivatele lor.
Important de mentionat, in momentul in care un script este inclus cu
una din cele 2 functii, el este si executat (interpretat). Spre exemplu,
daca avem doua fisiere ca mai jos, la accesarea scriptului script.phpvor
fi afisate ambele mesaje - asta pentru ca in urma
instructiunii include scriptul config.php a fost si interpretat.
<?php
// codul din config.php
echo

'Sunt in config.php <br />';

// script.php
include( 'config.php' );
echo

'Sunt in script.php <br />';

?>

111

DESIGNER PAGINI WEB

Functia require face acelasi lucru ca si include dar exista o mica
diferenta intre cele doua: daca fisierul care este solicitat pentru
includere nu exista include va returna un avertisment, continuand
executia, pe cand require va returna o eroare iar executia codului va fi
intrerupta.
<?php
include( 'fisier_inexistent.php' );
si merge mai departe
echo

'Acest mesaj va fi afisat';

require( 'fisier_inexistent.php' );
iar executia se intrerupe
echo

// genereaza un warning

// genereaza o eroare

'Aceasta instructiune nu va mai fi executata' );

?>
Cele doua functii au fiecare cate o
varianta: include_once respectiv require_once. Aceste forme, dupa cum
si numele o spune, includ fisierul specificat o singura data, astfel incat,
daca fisierul solicitat a fost deja inclus la o noua apelare
a include_once sau require_once acesta nu va fi inclus a doua oara.
Aceste forme ale functiilor sunt utile atunci cand fisierle incluse contin
declaratii ce trebuie sa fie facute o singura data.
Functia mail()
PHP poate trimite emailuri daca pe serverul curent este instalata si o
aplicatie de email (un server de email). Nu este nevoie de configurari
suplimentare atat timp cat serverul de email nu are restrictii si poate fi
accesat de aplicatiile locale. Intr-o instalare pe calculatorul personal,
cum este cea descrisa in primele pagini ale acestui tutorial, nu
este posibila trimiterea de mesage email, iar functia mail va returna o
eroare. Pe un web-server configurat complet si corect, cum sunt
serverele ce ofera gazduirea site-urilor, functiamail functioneaza corect.
<?php
// trimitere mesaj simplu
mail('adresa@exemple.com',

'Subiect mesaj', 'Mesaj simplu');

// trimiterea unui mesaj in care se specifica date

aditionale
$to

= 'adresa@example.com';

112

DESIGNER PAGINI WEB

$subject = 'Subiect mesaj';
$message = 'Mesaj simplu cu date aditionale';
$headers = 'From: punctsivirgula@example.com' . "\r\n" .
'Reply-To: punctsivirgula@example.com' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
mail($to,

$subject, $message, $headers);

?>
Functii matematice
Limbajul PHP dispune de majoritatea functiilor matematice uzuale.
Cateva dintre ele sunt prezentate mai jos cu titlu exemplificativ. Lista
completa poate fi gasita pe site-ul de documentatie PHP.
<?php
echo abs(-7);

// functia "valoare absoluta", afiseaza 7

echo sin(60);

// functia "sinus", afiseaza -0.304810621 ...

echo decbin(12);

// returneaza reprezentarea binara a

numarului, afiseaza 1100
echo base_convert('7DB',

16, 10);
// returneaza convesia
dintr-o baza in alta, afiseaza 2011
echo round(12.3);

// returneaza o rotunjire la cel mai

apropiat intreg, afiseaza 12
echo rand();

// afiseaza un numar aleator

echo rand(10,

70); // afiseaza un numar aleator din

intervalul specificat
?>
Functia set_time_limit()
Functia set_time_limit se foloseste pentru a configura timpul maxim cat
scriptul curent are voie sa se execute. Este utila atunci cand codul PHP
trebuie sa execute un volum mare de operatii care ar putea dura
cateva zeci de secunde (spre exemplu la un upload de fisiere). Daca
dupa expirarea timpului scriptul inca se afla in executie, serverul va
intrerupe executia fi va returna o eroare.

113

DESIGNER PAGINI WEB

<?php
set_time_limit(50);

// seteaza limita la 50 secunde

set_time_limit(0);

// dezactiveaza limita - scriptul poate

rula la nesfarsit
?>
Functia flush()
Functia flush trimite catre browser tot ceea ce a fost afisat deja de
script. In mod normal, rezultatul unui script PHP este trimis catre
browser pentru afisare doar la finalul executiei intregului script.
Aceasta functie ofera posibilitatea trimiterii catre browser a rezultatului
pe parcurs ce acesta este printat in PHP. Asta inseamna ca pagina
poate fi afisata partiala in timp ce inca se incarca.
<?php
echo

'Text 1<br />';

echo

'Text 2<br />';

flush();

?>
Functii de transformare base64
Functiile de codificare base64 sunt folosite pentru
codificarea/decodificarea unui text in si din formatul Base64.
<?php
$text = 'Tutorial PHP in limba romana';
echo base64_encode($text);

// afiseaza
VHV0b3JpYWwgUEhQIGluIGxpbWJhIHJvbWFuYQ==
echo base64_decode('VHV0b3JpYWwgUEhQIGluIGxpbWJhIHJvbWFuYQ==');

// afiseaza textul initial

?>
Functia phpinfo()
Functia phpinfo ofera informatii despre instalarea PHP curenta si despre
serverul pe care aceasta este executata. Rolul acestei functii este pur
informativ; functia nu poate fi folosita intr-un script care are un alt

114

DESIGNER PAGINI WEB

scop bine definit. De aceea, este recomandata apelarea acestei functii
intr-un script PHP separat, intrucat aceasta creaza o pagina HTML
completa.
<?php
phpinfo();

// returneaza o pagina HTML cu informatii despre

instalarea PHP
?>
O alta functie, ce poate fi utila in scripturile voastre, este phpversion aceasta returneaza doar versiunea curenta a interpretorului PHP. Un
exemplu al folosirii acestei functii este mai sus la functia mail.

Extensii ale limbajului PHP

Pe langa functiile de baza, limbajul PHP ofera posibilitatea extinderii
capacitatilor sale prin folosirea extensiilor. Extensiile sunt librarii
dezvoltate de regula de cei care au creat limbajul PHP si care ofera
functionalitati aditionale, cum ar fi posibilitatea de a manipula anumite
tipuri de fisiere (PDF, Excel, Word), posibilitatea de a crea imagini, de a
comunica cu alte aplicatii, etc.
Extensiile cele mai uzuale sunt activate implicit la instalarea
interpretorului PHP, dar cele mai multe trebuie activate manual prin
modificarea configurarii PHP. Intrucat in acest tutorial nu vom folosi nici
o functionalitate care sa necesite vreo extensie a PHP-ului, nu vom
insista asupra acestora. E bine de stiut doar ca pentru operatiuni
specializate si/sau avansate, sunt sanse mari sa existe o extensie care
sa usureze lucrul.
OPERATII CU VARIABILE. STRUCTURI REPETITIVE
O structura repetitiva este o secventa de cod ce permite realizarea
repetata a aceleiasi operatii de un anumit numar de ori. O structura
repetitiva este definita de 2 elemente: operatia care este executata si
conditia de oprire a executiei. In unele cazuri se cunoaste si numarul
de executii.
Iata cateva aplicatii care implementeaza anumite tipuri de structuri in
PHP:

115

DESIGNER PAGINI WEB

Structura repetitiva FOR

Se foloseste atunci cand se cunoaste dinainte numarul de repetitii
(numarul de pasi ce se vor executa). Are urmatoarea sintaxa:
for( [instructiune] , [conditie], [instructiune2] )
{
[instructiune3] }
unde:

este o instructiune de executat la inceput

[conditie] este o expresie care daca este evaluata ca adevarata
va determina repetarea ciclului - este denumita generic conditia de
repetare
[instructiune2] se va executa la fiecare pas al repetarii
[instructiune3] reprezinta operatia efectiva care se repeta in
cadrul FOR-ului
[instructiune1]

In general, [instructiune1] este o expresie de initializare de forma $i =

1, conditia de repetare este de forma $i <= numarul de pasi si
[instructiune2] este o expresie de incrementare $i++.
for( $i = 1; $i <= $x; $i++) { /* operatii */ }
In limbaj natural, intructiunea se traduce prin "plecand de la $i = 1,
executa operatia si creste-l pe $i cu o unitate; apoi repeta totul
atat timp cat $i <= $x
De retinut: instructiunea din cadrul for-ului se executa doar daca
expresia (conditia) este adevarata, deci pot exista situatii cand
expresia este falsa si [instructiune3] nu se executa niciodata. Exemplu:
for( $i = 0; $i > 10; $i++ ) {
echo

'Aceasta instructiune nu se executa niciodata';

116

DESIGNER PAGINI WEB

Aplicatie: sa se defineasca un vector cu x elemente,

fiecare element avand valori de forma "php1",
"php2", "php3" ...
Aplicatie: sa se afiseze un element de tip select cu
valori de la 1 la 100
Structura repetitiva WHILE
Instructiunea while este folosita atunci cand nu se cunoaste dinainte
numarul de executii. Are o forma mai intuitiva decat for si multe
persoane o considera mai usor de folosit. Diferenta
dintre while si for este aceea ca prima este mai generala si mai
flexibila. Se poate chiar afirma ca for este o situatie particulara a unei
structuri while. Sintaxa este urmatoarea:
while( [conditie] ) { [instructiune] }
Este probabil usor de inteles ca [instructiune] se executa atata timp
cat [conditie] este adevarata. La fel ca si la for, exista posibilitatea ca
instructiunea sa nu fie executata niciodata.
De retinut: este de datoria programatorului sa includa
in [instructiune] codul necesar iesirii din bucla. Daca acest lucru nu se
realizeaza, instructiunea se va executa la nesfarsit. Exemplu:
$continua = true;
while( $continua == true ) {
echo

'La nesfarsit', '<br>';

}
echo

'Aici nu se mai ajunge';

Varianta corecta a exemplului de mai sus este urmatoarea:

$continua = true;
while( $continua == true ) {
echo

'La nesfarsit', '<br>';

$continua = false; # modific variabila de testare a

conditiei
}
echo

'Acum se ajunge aici';

117

DESIGNER PAGINI WEB

Aplicatie: se da un vector. Sa se parcurga vectorul

pana cand se intalneste valoarea 0
Structura repetitiva DO-WHILE
O alta structura repetitiva este "do... while". Diferenta este ca
verificarea de face la final, dupa ce se executa cel putin o data
secventa de cod. O traducere in cuvintele noastre ar fi: "executa
secventa

si

cat

timp

conditia

este

adevarata,

repet-o".

Exemplul de mai sus, rescris ar arata asa:

$vector = array( 3, 4, 5, 1, 2, 9, 76, 42, 2, 9, 6, 0, 4, 1,
10 );
# operatia: se verifica daca elementul curent al vectorului
este 0
# conditia de oprire: elementul curent este 0 sau s-a ajuns
la finalul vectorului
# nota: desi putem afla numarul de elemente al vectorului,
in functie de care
# putem hotari numarul maxim de repetari, se va folosi o
alta sctructura repetitiva

$pozitie = 0; // plecam de la primul element

// parcurgem vectorul pana cand ajungem la final sau gasim
valoarea 0
do {
// presupun mai intai ca elementul e gasit
$gasit = true;
// verific daca elementul curent (initial primul
element) este diferit de 0
// cu alte cuvinte, deocamdata nu am gasit ce caut,
deci merg mai departe
if( $vector[ $pozitie ] != 0 ) {

118

DESIGNER PAGINI WEB

$gasit = false;
// trec la pozitia urmatoare pentru verificare
$pozitie++;
}

} while ( !$gasit && $pozitie < count( $vector ) );

if( $gasit ) print "Am gasit 0 pe pozitia $pozitie";
else print "Nu am gasit 0 in vectorul asta";
/* afiseaza
Am gasit 0 pe pozitia 11
*/

Iterarea cu foreach()
PHP ofera o structura repetitiva foarte puternica si des
folosita: foreach. Aceasta permite iterarea prin toate elementele unui
vector. Pot fi folositi si vectori simpli si asociativi.
Spre deosebire de celelalte instructiuni, pentru foreach nu trebuie
specificata explicit o conditie de oprire, fiind de datoria interpretorului
PHP sa opreasca iterarea atunci cand s-a ajuns la finalul vectorului.
$vector = array( 3, 4, 5, 1, 2, 9, 76, 42, 2, 9, 6, 0, 4, 1,
10 );
# operatia: afisarea elementului curent al vectorului
# conditia de oprire: s-a ajuns la finalul vectorului
(implicita)
foreach( $vector as $element) {
print

"$element ";

119

DESIGNER PAGINI WEB

// afiseaza: 3 4 5 1 2 9 76 42 2 9 6 0 4 1 10

// vector asociativ
$zile = array(
'luni' => 'Mo',
'marti' => 'Tu',
'miercuri' => 'We',
'joi' => 'Th',
'vineri' => 'Fr',
'sambata' => 'Sa',
'duminica' => 'Su'
);
foreach( $zile as $zi) {
print

"$zi ";

}
// afiseaza Mo Tu We Th Fr Sa Su

foreach( $zile as $rom => $eng) {

print

"$eng inseamna $rom <br />";

}
/* afiseaza
Mo inseamna luni
Tu inseamna marti
We inseamna miercuri
Th inseamna joi
Fr inseamna vineri
Sa inseamna sambata
Su inseamna duminica
*/

120

DESIGNER PAGINI WEB

Aplicatii - Structuri repetitive

Mai jos sunt prezentate cateva aplicatii legate de structurile repetitive.
Sunt mai degraba portiuni de cod, care nu vor face decat sa va ajute
sa va obisnuiti cu particularitatile limbajului PHP.

Cum afisez o lista de limbi sau de tari?

<?php
# va trebui sa avem lista de limbi/tari definita intr-un
vector.
$countries = array(
'Romania',
'France',
'Bulgaria',
'United Kingdom'
);
# preiau lungimea listei
$n = count( $countries );
# avand lungimea, folosesc o structura for pentru a afisa
lista
echo

'<ul>';

for( $i = 0; $i < $n; $i++ ) {

echo '<li>', $countries[ $i ], '</li>'; # echo poate
primi mai multi parametrii

}
echo

'</ul>';

?>
Rezultat:

121

DESIGNER PAGINI WEB

Romania
France
Bulgaria
United Kingdom

Cum afisez un select-box cu toate tarile?

<?php
# din nou, ne trebuie o lista de tari. Cel mai uzual pastram
doar codul tarii, iar numele
# il afisam doar. Astfel, optiunile vor avea ca "value"
codul tarii iar ca "text" - numele.
$countries = array(
'AF'=>'Afghanistan',
'AL'=>'Albania',
'DZ'=>'Algeria',
'AS'=>'American Samoa',
'AD'=>'Andorra',
'AO'=>'Angola',
'AI'=>'Anguilla',
'AQ'=>'Antarctica',
'AG'=>'Antigua And Barbuda',
'AR'=>'Argentina',
'AM'=>'Armenia',
/* ... */
'WS'=>'Western Samoa',
'YE'=>'Yemen',
'YU'=>'Yugoslavia',
'ZM'=>'Zambia',
'ZW'=>'Zimbabwe'
);

122

DESIGNER PAGINI WEB

# avand un array asociativ, este mai dificil sa-i accesam
elementele, asa ca nu vom
# mai folosi for. Vom folosi in schimb un iterator
'<select name="tara">', "\n"; # afisez pe alt rand
pentru a aseza in pagina sursa HTML
echo

foreach( $countries as $code => $name ) {

'<option value="', $code, '">', $name,
'</option>', "\n";
echo

}
echo

"</select>\n";

?>

Cum preiau primul email valid introdus de un utiliator?

<?php
# presupunem ca exista mai multe textbox-uri intr-un
formular, numite email[]
$emails = $_POST[ 'email' ]; # pentru detalii despre $_POST
vedeti lectia "Formulare"
# pentru teste se poate folosi:
$emails = array( '123', 'zzz', 'test@site', 'test@test.com',
'aaa' );
# folosesc o variabila ce actioneaza ca un flag/switch
$gasit = false;
# preiau nr de email-uri
$n = count( $emails );
# plec de la primul email-uri

123

DESIGNER PAGINI WEB

$i = 0;
while( $gasit == false && $i < $n ) {
# verific fiecare email, pe rand
if( strpos( $emails[ $i ], '@' ) !== false &&
strpos(

$emails[ $i ], '.' ) !== false ) {

# un email valid trebuie sa contina @ si un

punct
$gasit = true;
echo

'Am gasit un email valid: ', $emails[ $i ],

'<br />';
}
$i++; # cresc pe $i
}
# daca s-a ajuns la sfarsitul sirului de email-uri si $gasit
este tot false
# inseamna ca nu exista nici un element valid
if( !$gasit ) echo 'N-am gasit nici un email valid!<br />';
?>
Rezultat:
Am gasit un email valid: test@test.com
Nota: se putea folosi si structura repetitiva for pentru ca se cunosteau
dinainte numarul de pasi ce trebuiau efectuati. In schimb, folosind
aceasta implementare, atunci cand se gaseste un email valid se
opreste executia (se iese din bucla while), asadar codul ar putea fi mai
performant decat in cazul folosirii for.
Spre exemplu, daca avem un vector cu 15 elemente, iar pe pozitia a
doua se afla un email valid, atunci executia se termina dupa 2 pasi: la
primul pas se verifica primul element care nu este valid, iar la al
doilea, gasindu-se un email valid se iese din ciclul while (din cauza ca
$gasit nu mai este false).

124

DESIGNER PAGINI WEB

Operatii cu vectori
Operatiile clasice de cautare, sortare, inserare, etc se pot realiza foarte
usor cu ajutorul functiilor specializate, fara sa fie necesara parcurgerea
manuala a vectorilor. Iata cateva exemple.
$vector = array( 1, 2, 3, 4, 5, 6 );
$vectAs = array(
'unu' => 'one',
'doi' => 'two',
'trei' => 3
);

// lungimea unui vector (numarul de elemente)

print count(

$vector ); // 6

// se gaseste o valoare in vector?

print in_array(

3, $vector ); // true

// exista o anumita cheie in vector?

print array_key_exists(

'trei', $vectAs ); // true

// returneaza toate cheile din vector:

print_r( array_keys(

$vectAs ) ); // Array ( [0] => unu [1] =>

doi [2] => trei )

// returneaza toate valorile din vector:
print_r( array_values(

$vectAs ) ); // Array ( [0] => one [1]

=> two [2] => 3 )

// returneaza o parte din vector
print_r( array_slice(

$vector, 3 ) ); // 4, 5, 6

print_r( array_slice(

$vector, 3, 2 ) ); // 4, 5

print_r( array_slice(

$vector, -5, 3 ) ); // 2, 3, 4

125

DESIGNER PAGINI WEB

// foloseste cheile unui vector ca variabile:

extract(

$vectAs );

print

$unu; // one

print

$doi; // two

print

$trei; // 3

// sorteaza un vector
sort(
rsort(

$vector ); // 1, 2, 3, 4, 5, 6
$vector ); // 6, 5, 4, 3, 2, 1

asort(

$vectAs ); // sorteaza valorile si mentine asocierea

cheilor
// adauga o valoare la sfarsitul unui vector
$vector[] = 7;
array_push(

$vector, 8 );

# nota: cele 2 instructiuni de mai sus sunt echivalente

// modifica un anumit element din vector
$vectAs[ 'trei' ] = 'three';

Aplicatie: Sa se afiseze tipul browserului folosit de

utilizator
Vom folosi variabila predefinita $_SERVER care contine
elementul HTTP_USER_AGENT. Acesta contine textul de identificare
transmis de browser catre server. Vom cauta in acest text denumirile
browserelor cunostcute si vom afisa un mesaj corespunzator.
Pentru inceput definim o lista de browsere cunoscute.
<?php
$browser = array( 'Firefox', 'MSIE', 'Chrome', 'Safari',
'Opera' );
?>

126

DESIGNER PAGINI WEB

In continuare vom lua fiecare browser si vom verifica daca se afla in
textul de identificare al browserului.
<?php
$gasit = false;

// initial nu am gasit nimic

foreach( $browser as $i => $b ) {

// $b va avea pe rand fiecare valoare din vectorul
$browser
// $i preprezinta pozitia lui $b in vector
if( stristr( $_SERVER[ 'HTTP_USER_AGENT' ], $b ) ) {
$gasit = true;
print

"Folositi {$browser[ $i ]}!<br />";

}
if( $gasit ) break; // opreste cautarea daca
browserul a fost identificat
}
?>
Rezultatul este afisat mai jos (nota: incercati sa accesati aceasta
pagina cu browsere diferite pentru a vedea ca mesajul de schimba):
Folositi Chrome!

Depanare
// afisarea unui 'dump' al vectorului - o lista cu toate
elementele.
//De obicei se foloseste la depanare:
print_r(

$vectAs );

/* afiseaza
Array
(
[unu] => one
[doi] => two
[trei] => 3

127

DESIGNER PAGINI WEB

)
*/

// se afiseaza la fel ca mai sus o lista cu elementele

vectorului, doar
// ca se specifica si tipul fiecaruia.
var_dump(

$vectAs );

/* afiseaza
array(3) {
["unu"]=>
string(3) "one"
["doi"]=>
string(3) "two"
["trei"]=>
int(3)
}
*/

Operatii cu siruri de caractere

Lungimea
$s = "acesta este un text";
$sir = "stiu PHP stiu HTML stiu CSS";
# ce lungime are sirul? (numarul de caractere)
print strlen(

$s ); // 19

Cautarea unei secvente

# verific daca un cuvant sau text (in cazul de fata cuvantul
'PHP') apare in
# sirul exprimat prin variabila $sir

128

DESIGNER PAGINI WEB

if( strstr( $sir, 'PHP' ) !== false ) print 'gasit';
else print "nu am gasit";
# pentru a nu tine cont de litere mari/mici se foloseste
stristr
if( stristr( $sir, 'phP' ) !== false ) print 'gasit';
Afisarea unui subsir
# afisez o sectiune din sir
print substr(

$sir, 0, 4); // stiu

print substr(

$sir, 5 ); // PHP stiu HTML stiu CSS

print substr(

$sir, 5, -3 ); // PHP stiu HTML stiu

print substr(

$sir, -3 ); // CSS

# returnez doar un caracter din string

print

$sir{5}; // P

print

$sir{ strlen($sir)-1 }; // S

Transformarea sirului
# inlocuirea unor secvente
print str_replace(

"stiu", "invat", $sir); // invat PHP invat

HTML invat CSS

# schimb tipul literelor (mari, mici)
print strtoupper(

$s ); // ACESTA ESTE UN TEXT

print strtolower(

$sir ); // stiu php stiu html stiu css

print ucfirst(

$s ); // Acesta este un text

print ucwords(

$s ); // Acesta Este Un Text

# sterg spatiile de la inceput si sfarsit: trim, ltrim,

rtrim
print trim('

ok

'); // ok

129

DESIGNER PAGINI WEB

# caractere "enter" transformate in <br />
print nl2br(

"acesta e afisat pe \n 2 linii" ); // acesta e

afisat pe <br /> 2 linii
Impartirea (spargerea) sirului
# impart sirul dupa un caracter (sau regex)
$output1 = split( " ", $s ); // impart dupa spatiu
/*
Array (
[0] => acesta
[1] => este
[2] => un
[3] => text
)
*/
# impart sirul dupa un cuvant (sau un alt sir) - nu regex
sau caracter
$output2 = explode( "stiu ", $sir ); // impart dupa
stiu<spatiu>
/*
Array (
[0] => PHP
[1] => HTML
[2] => CSS
)
*/
# operatia inversa impartirii unui sir:
$a = implode( 'invat ', $output2 ); // invat PHP invat HTML
invat CSS
$b = join( ' ', $output1 ); // acesta este un text
Nota: implode si join sunt echivalente (nu exista nici o diferenta intre
ele), pe cand explode si split sunt diferite.

130

DESIGNER PAGINI WEB

Interpretarea sirului
# parsez un Query String
$str = "first=value&arr[]=foo+bar&arr[]=baz";
parse_str($str);
print

$first;

// value

print

$arr[0]; // foo bar

print

$arr[1]; // baz

parse_str($str,

$output);

print

$output['first'];

// value

print

$output['arr'][0]; // foo bar

print

$output['arr'][1]; // baz

Masuri de siguranta
print addslashes(

"Baiatu' ia vino-ncoa'!" ); # Baiatu\' ia

vino-ncoa\'!
# functia inversa este stripslashes();
print htmlspecialchars("<a

href='test'>Test</a>", ENT_QUOTES);

# afiseaza &lt;a href=&#039;test&#039;&gt;Test&lt;/a&gt;

# functia inversa este htmlspecialchars_decode()
print strip_tags(

"<p>E <b>bold</b></p>" ); // E bold

print strip_tags(

"<p>E <b>bold</b></p>", '<b>' ); // E

<b>bold</b>

Operatii comune cu indicatori de timp

Limbajul PHP ofera solutii simple (dar puternice) pentru lucrul cu data
si timpul. In versiunile mai noi (dupa 5.1) sunt introduse facilitati
avansate cum ar fi DST (Daylight Saving Time), Timezones, Date
Intervals, s.a. Inainte de acestea insa lucrul cu timpul se realiza
folosind Unix timestamp.

131

DESIGNER PAGINI WEB

Conceptul de Unix timestamp desemneaza numarul de secunde scurse
de la 1 ianuarie 1970 (cand se considera ca a inceput era Unix).
Unix Timestamp-ul curent:
1333952692
Fiind vorba de un numar pozitiv ce are mereu aceeasi referinta, este
usor sa se realizeze operatii cum ar fi scaderea, adunarea sau
compararea a doua date reprezentate printr-un Unix timestamp.
Mai jos sunt cateva aplicatii menite sa evidentieze cat de usor se pot
manipula date si ore in PHP.
<?php
// data curenta
print date(

'd.m.Y H.i.s' ); // 09.04.2012 09.24.52

// data in format Unix (UNIX timestamp)

print time();

// 1333952692

// alegerea unui fus orar

date_default_timezone_set( 'Europe/Bucharest' );
// parsarea unei date
print strtotime("now");
print strtotime('1st

January 2004'); //1072915200

?>

Cum aflu o data din trecut sau viitor?

Sunt mai multe posibilitati. Se poate pleaca de la o data cunoscuta
(pentru care avem Unix timestamp) si prin adunari/scaderi de secunde
se afla data dorita (vezi aplicatia de mai jos). Sau se poate parsa o
data folosind strtotime. Aceste solutii nu sunt intotdeauna aplicabile,
iar in aceste cazuri se foloseste functiamktime.
Functia mktime primeste ca parametri anul, luna, ziua, ora pentru care
se doreste aflarea detaliilor. Rezultatul este un timestamp ce poate fi
formatat dupa cum se doreste.
<?php

132

DESIGNER PAGINI WEB

# care este timestamp-ul pentru 31 januarie 2004, ora 13:00
echo mktime(

13, 0, 0, 1, 31, 2004); // afiseaza 1075546800

# care este timestamp-ul pentru 3 septembrie 2014, ora 10:30

echo mktime(

10, 30, 0, 9, 3, 2014); // afiseaza 1409729400

# ultima zi a unei luni poate fi exprimata ca ziua "0" a

lunii urmatoare.
$ultima = mktime(0, 0, 0, 3, 0, 2000);
echo strftime("Ultima

zi din Februarie 2000 este: %d", $ultima

);
// afiseaza Ultima zi din Februarie 2000 este: 29
# se pot folosi si valori negative
$zi = mktime(0, 0, 0, 3, -3, 2000);
echo strftime("Inainte

de Martie 2000 cu 4 zile: %d", $zi );

// afiseaza Inainte de Martie 2000 cu 4 zile: 26

?>
Important: inainte de PHP 5.1.0, timestamp-urile negative nu erau
suportate in unele sisteme (inclusiv Windows). De aceea domeniul
valid al anilor era limitat intre 1970 si 2038.

Cum se formateaza data sau ora?

Formatarea datei sau a orei se poate realiza usor folosind functia date.
Cu ajutorul acesteia se pot "extrage" doar acele parti din data care
sunt necesare si se poate specifica formatul dorit. Spre exemplu,
folosind functia date putem afisa data in format lung (de genul: "marti,
30 septembrie 2001") sau scurt (30.11.2001) sau cu aceeasi functie
putem afisa ora sau oricare combinatie a celor doua.
Formatul se specifica print-un text format din caractere ce au o
semnificatie anume, transmis ca parametru functiei date. Pentru detalii
complete despre fiecare caracter in parte
accesatihttp://www.php.net/manual/ro/function.date.php.
<?php

133

DESIGNER PAGINI WEB

# se preia data/ora curenta
$acum = time(); // $acum este o data in format Unix:
1333952692
# formatarea se realizeaza cu functia date
# daca nu se specifica altfel, functia date va formata
data/ora curenta
echo date("H:i:s")

. "<br>"; // afiseaza 09:24:52

echo date("Y-m-d")

. "<br>"; // afiseaza 2012-04-09

echo date("F

j, Y, g:i a") . "<br>"; // afiseaza April 9,

2012, 9:24 am
echo date("l")

. "<br>"; // afiseaza Monday

# se poate specifica un al doilea parametru ce reprezinta

data/ora care se formateaza
echo date("d-m-Y

H:i:s", $acum) . "<br>"; // afiseaza 09-04-

2012 09:24:52
echo date("D,

M d, Y", 1072915200) . "<br>"; // afiseaza Thu,

Jan 01, 2004

# combinat cu mktime, se pot obtine informatii despre zile
din trecut sau viitor
# de exemplu, ce zi a fost pe 4 iulie 2000
$iulie4 = mktime( 0, 0, 0, 7, 4, 2000 ); # aflu timestamp-ul
echo date(

'l', $iulie4 ); # formatez acel timestamp - extrag

doar ziua
// afiseaza Tuesday
?>

Cum determin ce zi si ora va fi peste 480 ore?

Pentru a efectua usor operatii cu zile si ore, se va folosi formatul de
data Unix (UNIX timestamp), returnat de functia time(). Practic, data
este afisata ca numarul de secunde scurs de la 1 ianuarie 1970, ora
00:00. Avand aceasta noua perspectiva (de a privi datele ca un numar

134

DESIGNER PAGINI WEB

de secunde), operatiile cu date (de genul 'cat va fi peste 2 zile', 'ce ora
a fost acum xxx minute', etc) devin extrem de simple luand forma unor
simple scaderi si adunari de secunde.
<?php
// cerinta este: "cat va fi ora peste 480 de ore, adica
peste (480 * 60 *60) secunde
$acum = time();
$maiTarziu = 480 /*ore*/ * 60 /*minute*/ * 60 /*secunde*/;
"Data ceruta este: " . date( 'd.m.Y H.i.s', $acum +
$maiTarziu );
print

// Data ceruta este: : 29.04.2012 09.24.52

?>

Cum validez o data sau un timp?

Sunt mai multe modalitati de a valida datele si orele introduse de un
utilizator, in functie de formatul acestora. Cel mai uzual insa se folosesc
cele 2 functii de aflare a timestamp-ului: mktime si strtotime. Acestea
returneaza anumite valori in cazul in care data verificata nu este
valida.
<?php
# verificam daca a existat 29 februarie 2004
$rezultat = mktime( 0, 0, 0, 2, 29, 2004 );
if( $rezultat === FALSE || $rezultat === -1 ) {
# daca rezultatul nu este un timestamp inseamna ca
data nu e valida
echo

"Data nu exista";

} else {
echo

"Data este valida";

}
// Rezultat: Data este valida
# similar se foloseste si strtotime

135

DESIGNER PAGINI WEB

$rezultat = strtotime( "29 february 2010" );
if( $rezultat === FALSE || $rezultat === -1 ) {
echo

"Data nu exista";

} else {
echo

"Data este valida";

}
// Rezultat: Data este valida

?>

Cum afisez un mesaj de salut in functie de ora curenta

(a serverului)?
<?php
$t = localtime( time(), true ); // returneaza un vector cu
elementele datei si orei locale
$h = $t[ 'tm_hour' ]; // iau doar ora
if( $h >= 7 && $h <= 11 ) print "Buna dimineata!";
elseif( $h > 11 && $h < 18 ) print "Buna ziua!";
elseif( $h >= 18 && $h < 22 ) print "Buna seara!";
elseif( $h >= 22 ) print "Noapte buna!";
else print "Ce? Esti treaz(a) la ora asta?";
// Buna dimineata!
?>

136

DESIGNER PAGINI WEB

Cum afisez luna curenta si toate cele 12 luni in limba

romana?
Nota: aceasta secventa de cod depinde de configurarile serverului pe
care este executata. Limba romana trebuie instalata pe server pentru a
avea rezultatele scontate.
<?php
setlocale(

LC_TIME , 'ROM_ROM' );

// afiseaza numele celor 12 luni

for( $m = 1; $m <= 12; $m++ ) {
print strftime(

"%B", mktime( 0,0,0, $m, 1, 2008 ) ) .

"\n";
}
// afiseaza luna curenta
print

'Luna curenta este: ' . strftime( "%B", time() );

?>
Rezultatul (este posibil sa nu fie in limba romana!):
January
February
March
April
May
June
July
August
September
October
November
December
Luna curenta este: April

137

DESIGNER PAGINI WEB

Cum determin durata de executie a unui script PHP?

<?php
$time_start = microtime(true); # la inceputul codului PHP
/* ... codul PHP cu diverse operatii ... */
# la final se face diferenta si se afiseaza
$time_end = microtime(true);
print "Durata de executie (secunde): " .
number_format($time_end - $time_start, 6)

(
);

// Durata de executie (secunde): 0.000787

?>

Functii in PHP
Functiile sunt blocuri de cod PHP (secvente de cod) bine delimitate si
identificate printr-un nume, ce executa un set de operatii. Functiile pot
fi executate de mai multe ori in cadrul unui script prin simpla apelare a
numelui lor.
Exista functii predefinite, specifice limbajului PHP (cum ar
fi print, empty, etc) ce poti fi folosite in orice moment, fara a fi nevoie
de vreo actiune speciala; si exista functii definite de utilizator, scrise
practic de programatori. Pentru ca acestea sa poata fi folosite este
nevoie sa fie declarate (si implementate).
Exemplu de functie definita de utilizator:
<?php
# functiile se declara folosind cuvantul cheie "function"
urmat de numele functiei
# numele functiei trebuie sa fie orice identificator valid
(adica sa inceapa cu
# litere sau cu caracterul _ ) si sa nu contina caractere
speciale sau spatiu

138

DESIGNER PAGINI WEB

# dupa numele functiei se pun paranteze rotunde
# corpul functiei (implementarea) trebuie incadrata in
acolade
function afisLuna()
{
$luni = array( 'Jan', 'Feb', 'Mar', 'Apr', 'May',
'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
echo

'<select>';

for( $i = 0; $i < 12; $i++ ) {

# intrucat se cunosc nr de pasi, se foloseste
structura repetitiva for
echo

"<option>{$luni[ $i ]}</option>\n";

}
echo

'</select>';

}
# mai jos vom folosi functia pentru a afisa un drop-down cu
lunile anului:
echo

'Luna inceperii activitatii: ';

afisLuna();

echo

'<br /><br />Luna terminarii activitatii: ';

afisLuna();
?>
Am scris, asadar, o singura data codul care afiseaza lunile anului si lam apelat de cate ori am avut nevoie. Apelarea functiei se face prin
specificarea numelui urmat de paranteze. Intre paranteze se pot
specifica parametrii, dupa cum vom vedea mai jos. Alternativ, o functie
definita de utilizator se poate apela folosind
instructiunea call_user_func
# vom rescrie ultima parte a codului
echo

'Luna inceperii activitatii: ';

call_user_func(

'afisLuna' );

139

DESIGNER PAGINI WEB

echo

'<br /><br />Luna terminarii activitatii: ';

call_user_func(

'afisLuna' );

Instructiunea call_user_func este utila atunci cand numele functiei este

furnizat de o variabila, cu ajutorul caruia se poate apela dinamic o
functie. Exemplu:
<?php
# definesc 2 functii diferite
function unu() {
print

'Azi suntem in intai!<br />';

}
function alta() {
print

'Azi e o zi obisnuita<br />';

}
# declar o variabila care sa aiba ca valoare numele functiei
$functie = 'unu';
# variabila $functie poate sa se schimbe in functie de
diferite conditii
# in cazul nostru, daca ziua curenta e prima zi din luna,
valoarea va fi 'unu'
if( date( 'd' ) == 1 ) $functie = 'unu';
else $functie = 'alta';
# la final apelez dinamic functia data de variabila
# Interpretorul nu stie exact care functie va fi - el doar
executa ce-i transmite variabila
# eventual pot face niste validari:
# - function_exists verifica daca functia transmisa a fost
definita

140

DESIGNER PAGINI WEB

# - is_callable verifica daca variabila transmisa poate fi
apelata ca functie
if( function_exists( $functie ) && is_callable( $functie ) ) {
call_user_func(

$functie );

} else {
echo

"Nu pot apela functia $functie";

}
// Rezultat (live): Azi e o zi obisnuita
?>
Foarte important de stiut este faptul ca variabilele definite in afara
functiilor nu sunt disponibile in interiorul lor. Astfel, codul de mai
jos nu va functiona asa cum ne asteptam:
<?php
# declar o variabila
$a = "Afara e frumos";
# definesc o functie
function afisMesaj() {
echo

$a;

}
# apelez functia
afisMesaj(); // nu va afisa nimic!!
?>
Functia nu va afisa mesajul, asa cum v-ati fi gandit la prima vedere.
Asta pentru ca ce este definit in afara functiei nu este recunoscut in
interior. In mod similar, variabilele definite in interiorul unei
functii se pierd si NU sunt disponibile in afara acesteia.
Exista totusi o modalitate prin care variabilele definite in afara unei
functii sa fie 'aduse' in interiorul ei: folosind intructiunea global.

141

DESIGNER PAGINI WEB

<?php
# declar o variabila
$a = "Afara e frumos";
# definesc o functie
function afisMesaj() {
# folosind cuvantul 'global' ii spun interpretorului
PHP ca
# vreau sa folosesc o variabila din afara functiei
global
echo

$a;

$a;

}
# apelez functia
afisMesaj(); // va afisa Afara e frumos
?>
Daca e nevoie sa se foloseasca mai multe variabile globale in cadrul
unei functii, acestea se pot specifica toate intr-o singura instructiune
global:
global

$a, $b, $Vector;

De ce sunt folosite functiile?

Printre avantajele folosirii functiilor, se numara:

reutilizarea codului
Spre exemplu, daca este nevoie sa se execute aceeasi secventa de cod
in mai multe parti ale unui programm sau script, pentru a nu se rescrie
codul de fiecare data, se defineste o functie care este apelata de mai
multe ori, asa cum am facut in primul exemplu de mai sus
modularizare
Odata cu aparitia functiilor (a subprogramelor, in general) s-a introdus
si conceptul de modularizare care presupune impartirea (spargerea)

142

DESIGNER PAGINI WEB

problemei ce trebuie rezolvata in probleme mai mici. Fiecare modul

problema mai mica reprezinta un subprogram, implementat intr-o
functie care contribuie la rezultatul final.
Spre exemplu, avem o operatie (relativ) complexa: afisarea inbox-ului
unui utilizator. Aceasta problema poate fi impartita in parti mai
mici/simple. Pentru fiecare parte s-ar defini cate o functie in loc sa se
scrie un singur script foarte mare, iar la final codul va arata cam in
felul urmator:
preluareDateAutentificare();

verificareDate();

preluareMesajeInbox();
afisareInbox();

mentinerea usoara a codului si intelegerea mai usoara a logicii

aplicatiei sau a scriptului
Acestea sunt urmari imediate ale primelor 2 puncte. Daca scriptul este
structurat, impartit in bucati mai mici, in care aceleasi secvente de cod
nu se repeta atunci va fi mai usor si de inteles si de modificat sau
intretinut.

Valori returnate. Parmetrii

De multe ori este nevoie ca o functie sa returneze o valoare.
Majoritatea functiilor predefinite fac lucrul asta; spre
exemplu empty returneaza TRUE sau FALSE in functie de starea si
continutul unei variabile transmise ca parametru.
Si functiile definite de utilizator pot returna o valoare, cu ajutorul
instructiunii return. Exemplu:
<?php
function formatareData() {
$rezultat = date( 'd-m-Y' );
return $rezultat;
}
# rezultatul returnat de functie poate fi folosit in
diferite moduri:
$azi = formatareData(); // atribuirea rezultatului

143

DESIGNER PAGINI WEB

print

formatareData(); // afisarea rezultatului

formatareData(); // rezultatul nu este folosit - daca

functia nu printeaza ceva
// atunci apelul nu are nici un efect vizibil
?>
De asemenea, functiile pot primi date ce pot fi folosite in interiorul lor
pentru diverse prelucrari. Aceste date de intrare sunt transmise sub
forma de parametrii.
Pentru ca o functie sa poata primi parametrii, aceasta trebuie sa ii
declare intre parantezele rounde, ca in exemplul de mai jos
<?php
# functia este declarata sa primeasca 2 parametrii ce vor fi
prelucrati
# functia returneaza si o valoare, in functie de datele de
intrare
function minim($a, $b) {
if( $a < $b ) return $a;
else return $b;
}
# la apelul functiei, este obligatoriu sa se transmita 2
parametrii
# parametrii pot fi orice expresie (variabile, constante,
rezultatul altor functii, etc)

print

minim( 3, 4 ); // parametrii sunt 2 valori numerice

$x = 1; $y = 4;
print

minim( $x, $y ); // parametrii sunt 2 variabile

$x = 4; $a = 3; $b = 5;
minim( $x, minim( $a, $b ) ); // parametrii primului
apel sunt: variabila $x
print

// si rezultatul unui alt apel cu 2 parametrii diferiti

144

DESIGNER PAGINI WEB

?>
Nota: intrucat functia minim() returneaza o valoare, ea poate fi folosita
ca si cum ar fi un numar normal. De aceea apelul de mai sus este
valid. Alte exemple valide sunt mai jos:
<?php
$a = 1 + minim( 4, 3 );
if( minim( $a, 4 ) > 5 ) { echo "If-ul este True"; }
else { echo "If-ul este False"; }
?>
O facilitate avansata oferita de limbajul PHP este folosirea valorilor
predefinite pentru parametrii functiilor. Aceasta permite ca o functie sa
nu fie apelata cu toti parametrii ei, urmand ca pentru valorile care
lipsesc sa fie folosite valorile predefinite. Functia minim() definita mai
sus poate fi rescrisa in felul urmator:
<?php
function minim($a = 1, $b = 2) {
if( $a < $b ) return $a;
else return $b;
}
?>
Declararea functiei de mai sus se traduce in felul urmator: daca functia
minim() nu este apelata cu toti parametrii, atunci foloseste valoarea 1
pt $a si valoarea 2 pt $b in calculele din interiorul functiei. In acest
caz, functia se poate apela in felul urmator:
<?php

echo

minim(); // echivalent cu echo minim(1,2);

145

DESIGNER PAGINI WEB

echo

minim(7); // echivalent cu echo minim(7,2);

echo

minim(7,8); // apel normal cu toti parametrii

?>

Facilitati avansate referitoare la functii

Pe langa functionalitatile standard, explicate mai sus, limbajul PHP
dispune de alte caracteristici mai avansate. Astfel, pot fi definite functii
ce pot primi oricati parametrii este nevoie, pot fi executate functii de
fiecare data la terminarea executiei unui script PHP, etc. Acestea nu
sunt insa lucruri folosite de zi cu zi, asa ca prezentarea lor depaseste
scopul acestui site. Nu trebuie sa le invatati acum, ci doar sa stiti ca
exista.

Mai jos amintite sunt cateva din functiile avansate ce pot fi folosite:
call_user_func - alternativa pentru apelul simplu al unei functii
definite de utilizator; numele functiei poate fi stocat intr-o variabila,
programatorul putand astfel apela functii diferite in situatii diferite
call_user_func_array - la fel ca ma sus, doar ca este folosita
atunci cand functia ce trebuie apelata are mai mult de un parametru
function_exists - folosita pentru a verifica daca o functie este
definita
create_function - folosita pentru a defini o functie 'on the fly',
atunci cand codul PHP se executa
register_shutdown_function - folosita pentru a specifica o functie
care sa se execute la finalul executiei codului PHP
func_num_args, func_get_args, func_get_arg - functii ajutatoare
folosite in cazul functiilor apelate cu un numar variabil de parametrii

Formulare
Formularele sunt elementele prin intermediul carora utilizatorii trimit
date catre server. Pe o pagina web pot fi introduse diferite tipul de
informatii (parole, comentarii, mesaje, etc). Toate aceste date sunt
transmise catre servere prin intermediul formularelor (in engleza
"form").
Odata transmise, datele pot fi prelucrare folosind PHP. Astfel, ele pot fi
salvate intr-o baza de date, in fisiere, trimise prin email, sau doar
afisate inapoi pe o pagina. In cele ce urmeaza vor fi prezentate

146

DESIGNER PAGINI WEB

elemente de baza ale folosirii formularelor in PHP. Ca o nota,
formularele sunt intalnite in orice aplicatie web (cele mai uzuale sunt
poate paginile de login, contact sau inregistrare). Cert este ca sunt
esentiale in folosirea internetului si este foarte important pentru un
programator web sa stie sa foloseasca form-uri in PHP.
Pe scurt, pentru a putea fi introduse date pe o pagina web trebuie sa
existe un formular. Acesta se defineste in HTML prin tag-ul form. Un
form trebuie sa aiba specificate obligatoriu 2 atribute: "action" si
"method". Action reprezinta locatia unde vor fi transmise datele,
reprezentata prin numele fisierul ce va prelucra requestul (de regula un
fisier PHP). Acest atribut poate fi gol, specificand ca datele vor fi
transmise catre acelasi script ce afiseaza formularul (fisierul
curent). Method specifica metoda de acces, dupa cum este descrisa mai
jos.
Formularele sunt strans legate de conceptul de "Metoda de acces"
(Request Method). De fapt, in functie de modul in care se face cerinta
catre server, exista doua tipuri de formuri: formulare GET si POST.

Request Methods: GET, POST si altele

Metodele de acces reprezinta modul in care cerintele pentru o pagina

web si alte informatii aferente sunt transmise de la browser la serverul
web. Exista 8 metode definite, in schimb doar 2 dintre ele sunt cel mai
des folosite in dezvoltarea paginilor web. Mai multe detalii pot fi
citite pe pagina de Wikipedia.
GET
Este cea mai uzuala metoda, folosita implicit de browsere pentru a
trimite cereri catre servere. Majoritatea paginilor pe care le vizualizam
pe internet sunt obtinute in urma unei cereri GET. De exemplu, scrierea
unui URL in bara de adrese a browserului sau accesarea unui link, sau
a unei imagini, toate sunt request-uri de tip GET.
Aceasta metoda este utilizata, asadar, pentru a "cere" o pagina de la
server (in engleza "get data"). Totusi, odata cu cererea se pot
transmite si mici bucati de informatii catre server. Aceste informatii
transmise la momentul cererii pot fi date introduse de utilizatori (intrun form) si sunt adaugate la finalul URL-ului sub forma "pagina.php?
parametru=valoare".

POST
Opus metodei GET, POST este folosita pentru a transmite informatii
catre server (in engleza "post data"). Spre deosebire de GET care
permite doar o cantitate limitata de date sa fie transmisa de la client
(browser) la serverul web, POST dispune de limite mai generoase, fiind

147

DESIGNER PAGINI WEB

standardul de transmitere a datelor. Astfel, upload-ul unui fisier pe
server, salvarea unui post pe blog, etc - toate sunt requesturi de tip
POST.
Mai jos sunt descrise cele 2 tipuri de formulare si cum pot fi accesate
datele lor in PHP. Apoi, pe pagina urmatoare, GET vs. POST puteti afla
diferentele concrete dintre ele si cum puteti determina ce tip de form
sa folositi pe paginile voastre.

Formulare GET
Acest tip de formulare permite utilizatorilor sa transmita informatii
aditionale atunci cand cer o pagina web. Actiunea unui formular GET
poate fi usor reprodusa specificand URL-ul si parametrii direct in
browser (vezi aplicatia de mai jos).
Datele transmise de utilizatori la un request de tip GET sunt disponibile
pentru prelucrare in PHP folosind variabila globala $_GET. Fiecare
parametru al requestului reprezinta o componenta a variabilei $_GET.

Aplicatie: sa se preia numele utilizatorului (printr-un

formular) si sa se afiseze pe pagina.
Intr-o prima faza fisierul va cuprinde formularul:
<form id="afiseaza" action="" method="get">
Nume:
<input type="text" name="numele" />
<input type="submit" value="Trimite" />
</form>
Acesta da utilizatorilor posibilitatea sa scrie numele in caseta afisata si
sa apese pe butonul "Trimite".
Urmatorul pas este definirea codului care va prelua numele si-l va
afisa. Secventa de cod PHP se scrie in acelasi fisier ca si codul HTML de
mai sus. Daca s-ar pune intr-un fisier separat, atunci
atributul action al etichetei form ar trebui sa specifice numele acelui
fisier.
<?php

148

DESIGNER PAGINI WEB

if( isset( $_GET[ 'numele' ] ) && !empty( $_GET[ 'numele' ] )
) {
print

"Salut, {$_GET[ 'numele' ]}!";

}
?>
Se observa ca atunci cand se foloseste metoda GET, toate elementele
formularului (care au specificat un nume!) apar in URL-ul paginii
urmatoare sub forma
pagina.php?element1=valoare1&element2=valoare2
Astfel, acelasi efect ca si folosirea formularului s-ar obtine daca s-ar
accesa direct pagina cu parametrul
numele=ceva

(click pentru test)

Asta confirma faptul ca toate requesturile pe care le facem in mod

obisnuit catre un server web sunt de tip GET (de exemplu cand
accesam direct in browser www.google.ro, sau cand facem click pe un
link - toate sunt cerinte GET catre server) - si ca sunt echivalente cu
folosirea unui formular GET.
Asadar, fie ca folosim un formular cu metoda GET, fie ca scriem direct
in bara de adrese a browserului, rezultatul este acelasi: un request de
tip GET ai carui parametrii ce sunt accesibili in PHP prin vectorul
asociativ $_GET. Dezavantajele metodei GET sunt: cantitatea mica de
date ce pot fi transmise (de obicei parametrii au valori mici, de cateva
caractere) si restrictiile ce se impun valorilor parametrilor (acestia
trebuie sa formeze, impreuna cu numele serverului si calea ceruta, un
URL valid).

Formulare de tip POST

Un alt tip de request folosit in practica este POST. Acesta permite
transferul unei cantitati mult mai mari de date (de ordinul
gigaoctetilor), in timp de metoda GET este limitata la cativa octeti.
Astfel, prin POST se pot transfera fisiere catre web-servere si se pot
transmite texte foarte lungi, fara a ne face griji de formatul datelor
transmise (care pot contine caractere speciale, pot fi in format binar).

149

DESIGNER PAGINI WEB

Datele transmise de utilizator sunt disponibile in PHP prin intermediul
variabilei globale $_POST. Astfel, daca formularul contine 2 campuri
numite "numele" si "textfl" (ca in aplicatia urmatoare), variabila
$_POST va avea doua componente ce pot fi accesate prin
$_POST[ 'numele'] si $_POST[ 'textfl' ].

Aplicatie: sa se preia numele utilizatorului (printr-un

formular) si un text foarte lung. Sa se afiseze pe
pagina numele si lungimea textului.
Continutul fisierului PHP este redat mai jos
<form id="afiseaza2" action="" method="post">
Nume:
<input type="text" name="numele" /> <br />
Text foarte lung:
<textarea name="textfl" rows="3" cols="20"></textarea> <br
/>
<input type="submit" value="Trimite" />
</form>
<?php
# mai intai verificam daca a fost trimis formularul
if( isset( $_POST ) && !empty( $_POST )) {
# da, a fost trimis; verificam fiecare componenta
if( isset( $_POST[ 'numele' ] ) && !empty( $_POST[
'numele' ] ) ) {
print

"Salut, {$_POST[ 'numele' ]}!<br />";

}
if( isset( $_POST[ 'textfl' ] ) && !empty( $_POST[
'textfl' ] ) ) {
print

"Ai trimis " . strlen( $_POST[ 'textfl' ] )

. " caractere";
}
}
?>

150

DESIGNER PAGINI WEB

Se observa ca elementele formularului (numele si textfl) nu mai sunt
transmise in URL, ci printr-un alt mecanism. Daca pagina este reafisata (cu Refresh/F5) browserul va afisa o notificare, cerand
confirmarea ca datele sa fie retrimise. Acest lucru confirma, totodata,
ca pagina a fost afisata in urma unui request de tip POST.
Formulare POST si GET
Asa cum am vazut in lectia anterioara exista 2 tipuri de formulare. Din
punctul de vedere al utilizatorului final (cel care foloseste browser-ul si
completeaza formularul pentru a transmite date catre server) metoda
folosita (POST vs. GET) nu conteaza prea mult, in sensul ca modul de
transmitere al datelor este transparent. Din punctul de vedere al celui
care construieste formularul si care prelucreaza datele primite pe
server (folosindu-se de un script PHP) exista diferente notabile ce
trebuie luate in calcul.

Cum determin ce tip de formular trebuie sa folosesc

(GET sau POST)?
Cele 2 tipuri de formulare prezinta fiecare avantaje si dezavantaje. Mai
jos sunt prezentate cateva dintre caracteristicile fiecarui tip. In general,
avantajul formularelor POST este acela ca pot manipula cantitati mari
de date iar al formularelor GET ca sunt usor de folosit/retrimis.
GET
1.

Datele transmise catre server prin GET apar la finalul URL-ului,

asa cum au fost introduse; acest lucru ar putea fi un dezavantaj cand
este vorba de date senzitive, dar ajuta la modificarea usoara a datelor
pentru retrimitere
2.
Cantitatea de date GET depinde de lungumea maxima permisa a
URL-ului, care in Internet Explorer este de 2 083 caractere. Asadar prin
GET nu se pot transmite prea multe date
3.
Rezultatul unui request GET poate fi preluat din cache-ul
browser-ului sau al proxy-ului web. Trebuie ca URL-ul sa fie diferit la
fiecare request nou pentru a fi siguri ca datele reale sunt preluate
4.
Caracterele speciale pot fi codificate folosind atributul enc-type al
formularului; dezavantajul este ca aceasta codificare va reduce
cantitatea de date ce pot fi transmise (ex. 3 caractere japoneze sunt
reprezentate cu ajutorul a 42 caractere normale: %26%2312454%3B
%26%2312455%3B%26%2312502%3B)

151

DESIGNER PAGINI WEB

5.

In PHP, elementele formularului sunt disponibile prin intermediul

variabilei globale $_GET (sau prin $_REQUEST)
POST

1.
2.
3.
4.
5.

Cantitatea de date ce poate fi transmisa prin POST poate fi

restrictionata doar de catre serverul web, desi nu exista o limitare
reala
Datele transmise prin POST nu apar in URL si nu pot fi alterate
usor, ceea ce ofera un oarecare grad de securitate
In mod implicit, datele preluate prin POST nu sunt puse in cacheul de la browser sau proxy-server; astfel folosind aceasta metoda vor fi
afisate intotdeauna datele reale
Codificarea caracterelor speciale se poate realiza ca si la GET
folosind atributul enc-type al formularului (application/x-www-formurlencoded); avantajul este ca nu exista limitari de cantitate a datelor
In PHP, elementele formularului sunt disponibile prin intermediul
variabilei globale $_POST (sau prin $_REQUEST)
Pe langa considerentele de mai sus, trebuie avuta in vedere si o
recomandare generala: GET ar trebui folosit pentru operatiile care
nu modifica nimic pe server, in timp ce POST ar trebui folosit
pentru operatiile de modificare/actualizare/stergere.
Spre exemplu, atunci cand se face o cautare intr-o baza de date si
(doar) se afiseaza niste rezultate, ar trebui folosit un formular GET. De
asemenea, cand se realizeaza verificari ce nu au ca efect modificarea
bazei de date sau a vreunui fisier de pe server, se poate folosi tot GET.
Atunci cand, in schimb, trebuie facute modificari se recomanda
folosirea metodei POST.
Mai mult decat atat, pentru a evidentia tendinta de folosire a POST
pentru modificari de date, browserele afiseaza o avertizare cand se
incearca reimprospatarea (refresh-ul) paginilor aceesate prin POST.
Astfel, se cere confirmarea utilizatorului ca datele introduse sa fie
trimise din nou catre server. Aceasta confirmare este necesara pentru a
evita efectuarea unor tranzactii (cum ar fi plati on-line) de doua sau
mai multe ori.
Portiuni din acest text au fost preluate cu permisiunea autorului, de
lahttp://weblogs.asp.net/mschwarz/archive/2006/12/04/post-vs-get.aspx.

De ce conteaza tipul de formular?

Este important sa se aleaga metoda corecta (POST sau GET) atunci

cand:
se realizeaza inserari in baza de date sau modificari pe server

152

DESIGNER PAGINI WEB

se vor transmite cantitati mari de date

utilizatorii pot sa modifice usor datele transmise (cum ar fi un
cuvant de cautat)
utilizatorii trebuie informati/atentionati atunci cand retrimit
aceleasi date catre server (NB: la metoda POST, browser-ul afiseaza o
notificare atunci cand se incearca Refresh)
este important ca datele afisate sa nu fie preluate din cache
(POST)
Fiecare situatie in care este necesar un formular ar trebui analizata
pentru a determina tipul de metoda care trebuie folosita. In practica
metoda POST se foloseste la formulare de inregistrare/login, formulare
de contact sau de plati online, formulare de upload si altele, in timp ce
metoda GET este folosita pentru formulare simple de confirmare, de
cautare, de abonare/dezabonare la un newsletter, s.a.

Formular simplu de login in PHP

Mai jos este un exemplu de formular ce poate fi folosit pentru
autentificarea (logarea) utilizatorilor. Deocamdata nu contine decat
elementele de baza si verificari simple, tocmai pentru a evidentia
modul de lucru cu formulare in PHP. Codul contine comentarii in care
sunt explicati pasii urmariti.

In mare, sunt executati urmatorii pasi:

se verifica daca a fost facut submit
Ar putea fi putin derutant faptul ca portiunea de cod PHP se afla in
acelasi fisier cu formularul HTML. Intrebarea fireasca ar fi: "nu se
executa prelucrarea datelor cand de fapt trebuie doar sa afiseze
formularul?" sau altfel spus "cum stie serverul cand sa prelucreze
datele din formular?".
Ideea este ca acea portiune de cod PHP se executa la fiecare afisare a
paginii. De fapt nu toata, ci doar prima parte. Cand se incarca pagina
(in urma unui click sau refresh), pe langa codul HTML static se
returneaza si rezultatul codului PHP. In cazul nostru, codul PHP consta
in 2 atribuiri de variabile si un if mare. Atribuirile se executa mereu (la
fiecare afisare), la fel si if-ul, doar ca rezultatul comparatiilor este
adevarat doar atunci cand datele din formular au fost trimise.

Cu alte cuvinte, acel if va fi evaluat true doar cand utilizatorul da

submit la formular - deci prelucrarea datelor se va face doar dupa ce
utilizatorul face click pe "Login".
daca nu a fost facut submit, e simplu: pur si simplu afiseaza
codul HTML static si ce mai este prin script (rezultatul va fi un
formular).

153

DESIGNER PAGINI WEB

Dupa ce s-a incarcat pagina, utilizatorul va putea introduce datele in

formular si va putea da submit. Atunci cand se da submit, se face un
request POST catre aceeasi pagina si se executa inca o data codul
PHP din cadrul fisierului, de aceasta data insa cu informatiile
actualizate
cand se face submit, se intra pe ramura lui if unde se executa
mai multe operatii (in cazul nostru doar 2)
Nota: este foarte important sa se inteleaga mersul lucrurilor, cum este
tratata pagina in fiecare situatie si cum se ajunge sa se execute fiecare
portiune de cod. Daca aceste aspecte nu sunt clare nu veti putea scrie
formulare de unii singuri.

Continuand cu explicarea codului, iata care sunt operatiile care se

executa:
1.
se valideaza datele (se verifica daca au fost introduse valori): if( !
isset( $_POST[ 'user' ] ) ...

2.

se verifica daca numele de utilizator si parola sunt

corecte: if( $erori == 0 ) ...
Daca sunt corecte, atunci se face o redirectionare catre o pagina ce
poate fi accesata dupa autentificare. Redirectionarea se realizeaza
folosind etichete HTML, desi exista o modalitate mai eleganta de a o
realiza (dupa cum veti vedea in lectia Headere).
Codul este expus mai jos. Aveti si posibilitatea sa descarcati scriptul
(mai jos) si sa-l incercati pe serverul vostru local.
<?php
# username si parola
$user_corect = 'admin';
$parola_corecta = 'ghiceste-Ma';
# verific daca se acceseaza pagina ca urmare a unui request
POST
$mesaj = '';
if( isset( $_POST ) && !empty( $_POST[ 'trimite' ] ) ) {
# nota: se va intra pe ramura aceasta a lui if atunci
cand utilizatorul
# face click pe butonul "Login"
# Atunci cand pagina este accesata normal (scriind
adresa in browser)
# variabila $_POST este goala

154

DESIGNER PAGINI WEB

$erori = 0;
# validam datele, presupunem ca nu sunt erori si
verificam valoarile introduse
if( !isset( $_POST[ 'user' ] ) || strlen( $_POST[
'user' ] ) == 0 ) {
$mesaj =

'Numele de utilizator nu a fost

specificat';
$erori = 1;
} elseif( !isset( $_POST[ 'pass' ] ) || strlen( $_POST[
'pass' ] ) == 0 ) {
$mesaj = 'Parola nu a fost specificata';
$erori = 1;
}
# daca nu au fost erori, atunci fac prelucrarile
if( $erori == 0 ) {
# pentru acum, vom face o verificare simpla
if(

$_POST[ 'user' ] === $user_corect &&

$_POST[ 'pass' ] ===

$parola_corecta )
{
# login realizat, redirectionez
'Ati fost autentificat. Veti fi

echo

redirectionat...';
exit;

# nu mai afisez nimic altceva

} else {
# nu s-a facut login
$mesaj = 'Username-ul sau parola sunt
gresite';
}
}
}
?>
<html>

155

DESIGNER PAGINI WEB

<head>
<title>Aplicatie formular: pagina de login - Invata
PHP</title>
</head>
<body style="font-family: verdana,sans-serif; font-size:
small;">
<form action="" method="post" style="width: 30%">
<fieldset>
<legend>Date de autentificare</legend>
<input type="text" name="user" /> User<br />
<input type="password" name="pass" /> Pass<br />
</fieldset>
<fieldset>
<legend>Actiuni</legend>
<input type="submit" value="Login" name="trimite"
value="1" />
<input type="reset" value="Curata formular" />
</fieldset>
</form>
<?php
# aici afisam mesajul de eroare, daca avem
if( strlen( $mesaj ) > 0 ) {
echo

'<p style="color: red">', $mesaj, '</p>';

}
?>
</body>
</html>

156

DESIGNER PAGINI WEB

Formularul este disponibil pentru testare aici (click pentru a accesa).
Introduceti diferite valori pentru a verifica functionalitatea, iar in final
introduceti datele corecte (admin / ghiceste-Ma).
Descarcati fisierul PHP si incercati-l pe serverul vostru

Pagina de administrare anunturi

O alta situatie in care se folosesc formularele este atunci cand se
doreste administrarea unor date, cum ar fi anunturile. In cele ce
urmeaza va fi explicat mecanismul de functionare a unei aplicatii in
care se pot adauga si vizualiza anunturi. Pentru a face codul usor de
inteles, sunt incluse doar operatiile de baza, fara validari sau prelucrari
aditionale.
In acest exemplu, vom folosi si formularul de login descris mai sus.
Astfel, in urma unei autentificari reusite, utilizatorul va fi redirectionat
catre pagina principala de anunturi, numita anunturi.php. Aceasta
cuprinde 2 sectiuni: "anunturi existente" si "adaugare anunt".
Sectiunea "Anunturi existente"
In acesta aplicatie simpla, citirea anunturilor existente se face prin
intermediul unei functii (citireDate) definite intr-un fisier separat.
Pentru acest exemplu, am ales ca datele sa fie stocate temporar in
memorie, urmand ca mai tarziu sa vedem cum le putem stoca in fisiere
sau intr-o baza de date. Pentru scopul acestui exemplu nu este
relevant modul de salvare/citire a datelor, deci nu se va insista asupra
acestui aspect.
<?php
// anunturi.php - prima parte
$anunturi = citireDate();
# verific daca exista anunturi salvate
if( !is_array( $anunturi ) || count( $anunturi ) == 0 ) {
echo '<strong style="color: orange">Nu exista
anunturi</strong>';

} else {

157

DESIGNER PAGINI WEB

# cum exista deja anunturi, le afisez

echo

'<table width="75%" cellspacing="0" border="1">';

# folosesc o structura repetitiva care parcurge

vectorul si afiseaza datele lui
foreach($anunturi as $anunt) {
echo

'<tr>';

echo

'<td>', $anunt[ 'nume' ], '</td>';

echo

'<td>', $anunt[ 'telefon' ], '</td>';

echo

'<td>', $anunt[ 'email' ], '</td>';

echo

'<td>', $anunt[ 'oras' ], '</td>';

echo

'<td width="45%">', $anunt[ 'continut' ],

echo

'</tr>';

'</td>';
}
# afisez cate anunturi exista
'</table><p>', 'Anunturi salvate: ', count(
$anunturi ), '</p>';
echo

}
?>
Asa cum se poate observa, se verifica mai intai daca exista date
( count( $anunturi ) == 0 verifica numarul de elemente din vector).
Daca nu exista anunturi, se afiseaza un mesaj specific.
In caz contrar, atunci cand exista anunturi salvate, acestea sunt afisate
cu ajutorul structurii repetitiveforeach. Pentru detalii
consultati sectiunea de structuri repetitive a site-ului.
In cadrul structurii, este afisat cate un rand de tabel ce contine datele
anuntului. La final, sub tabel este afisat un mesaj cu numarul total de
inregistrari gasite.
Sectiunea "Adaugare anunt"
Sub lista de anunturi, pe aceeasi pagina este afisat si formularul pentru
adaugarea de noi inregistrari. Acesta este de tip POST, care trimite
datele catre fisierul anunturi-post.php. Prin apasarea pe butonul

158

DESIGNER PAGINI WEB

"Salveaza anuntul", datele introduse vor fi transmise catre fisierul PHP
de pe server si vor fi disponibile prin intermediul variabilei $_POST.
<!-- anunturi.php - a doua parte -->
<form method="post" action="anunturi-post.php">
<input type="text" name="nume" value="" /> Nume
contact<br />
<input type="text" name="telefon" value="" /> Telefon
contact<br />
<input type="text" name="email" value="" /> Email<br
/>
<input type="text" name="oras" value="" /> Oras<br />
Continut: <br />
<textarea name="continut" rows="10"
cols="50"></textarea><br />
<input type="submit" name="trimite" value="Salveaza
anuntul" />
<input type="reset" value="Curata" />
</form>
Fisierul anunturi-post.php
Fisierul PHP care proceseaza datele este inclus mai jos. Ca si in
exemplul de login, se fac verificari pentru a fi siguri ca a fost facut un
submit. Daca datele sunt disponibile in variabila $_POST atunci acestea
sunt salvate cu ajutorul functiei scriereDate. Functia de salvare a
datelor va returna intotdeauna true (in aceasta mica aplicatie), deci va
fi mereu afisat mesajul de succes.
<?php
// anunturi-post.php
# verific daca a fost facut submit
if( isset( $_POST ) && !empty( $_POST[ 'trimite' ] ) ) {
# salvez datele, apelez functia din anunturi-accesdate-sesiune.php

159

DESIGNER PAGINI WEB

$rezultat = scriereDate( $_POST );
if( $rezultat ) $mesaj = '<strong>Date salvate cu
succes!</strong>';
else $mesaj = '<strong style="color: red">Datele nu
au putut fi salvate</strong>';
} else {
# nu a fost facut post, poate cineva a intrat direct
din browser pe aceasta pagina?
$mesaj = 'Nimic de afisat aici.';
}
?>
Formularul este disponibil pentru testare aici (click pentru a accesa).
Datele de login sunt aceleasi ca mai sus (admin / ghiceste-Ma).

Puteti descarca fisierele PHP si sa le incercati pe serverul vostru local.

index.php (pagina de login)
anunturi.php (fisierul principal)
anunturi-post.php (fisierul de prelucrare a datelor din form)
acces-date.php (fisierul de citire/salvare a datelor)
Descarcati o arhiva cu toate fisierele
Atentie! codul foloseste un mod simplist de verificare a autentificarii,
util doar pentru intelegerea codului. Nu folositi acest tip de verificare
intr-o aplicatie reala. Un exemplu de autentificare corect gasiti pe
pagina deaplicatii sesiune.

Formulare "in real life" - exemple de site-uri care

folosesc formulare
Mai jos sunt incluse o serie de formulare folosite in site-uri live. Veti fi
surprinsi poate sa observati ca majoritatea site-urilor folosesc
formulare si ca o mare parte din activitatea de navigare pe internet
presupune folosirea formularelor.
La randul vostru, ca dezvoltatori web, voi insiva veti construi foarte des
formulare si veti scrie codul de prelucrare/manipulare a datelor
provenite din formulare.

160

DESIGNER PAGINI WEB

Exemplele de mai jos nu prezinta decat partea formala, codul HTML al
formularelor. Partea de programare (codul efectiv care face
prelucrarea) nu este disponibila, fiind gazduita de fiecare site in parte.
Rolul acestor exemple este de a va da o idee despre cum sunt folosite
formularele si cu ce ocazii, ce elemente sunt intrebuintate si care este
comportamentul browserului pentru fiecare tip de formular
(GET/POST).
Formular de cautare folosind motorul Bing
<form id="form_bing" action="http://www.bing.com/search"
method="get">
Expresie de cautat:<br />
<input type="text" name="q" value="" /> <input
type="submit" value="Cauta pe Bing" />
</form>
Analog se poate construi un formular pentru Google. Practic, trebuie
schimbat decat atributul action din formular (pus URL-ul specific
Google: http://www.google.com/search), intrucat cele doua motoare
de cautare accepta acelasi parametru GET (numit simplu q) pentru
textul de cautat.
Formular de cautare in documentatia PHP
<form id="form_php" action="http://ro.php.net/manuallookup.php" method="get">
Cauta functia PHP sau un cuvant:<br />
<input type="text" name="pattern" value="" /> <input
type="submit" value="Cauta" />
</form>
La fel ca mai sus, formularul foloseste metoda GET, ceea ce ofera o
facilitate: utilizatorul poate introduce singur, in URL, textul de cautat.
Dati Cauta si verificati adresa paginii care se deschide.
Formular de conversie valutara din EUR in RON
<form id="form_xe"
action="http://www.xe.com/ucc/convert.cgi" method="get" >
<fieldset>
<legend>Suma de convertit</legend>
<input type="text" name="Amount" value="10"
style="width: 100px" />
</fieldset>

161

DESIGNER PAGINI WEB

<fieldset>
<legend>Moneda</legend>
<input type="text" name="From" value="EUR"
style="width: 100px" />
- moneda sursa<br />
<input type="text" name="To" value="RON"
style="width: 100px" />
- moneda in care se
face conversia<br />
</fieldset>
<fieldset>
<input type="submit" name="image"
value="Convertire" />
</fieldset>
</form>
Formular de cautare locuri de munca pe site-ul ejobs.ro
<form action="http://www.ejobs.ro/user/searchjobs"
id="searchjob" method="post" >
<input type="hidden" value="" name="refine"/>
<input type="hidden" value="" name="allof"/>
<table cellspacing="0" cellpadding="0" border="0" >
<tr>
<td valign="middle" style="padding-left:
3px;"><span>Locuri de munca:</span></td>
<td valign="middle" style="padding-left: 9px;"
rowspan="5">
<input type="submit" value="Cauta Job >>"
name="cauta_job" />
</td>
</tr>
<tr>
<td valign="middle" style="padding-left: 3px;">

162

DESIGNER PAGINI WEB

<input onclick="if (this.value=='Cuvant
cheie') {this.value='';}"
style="width: 210px;" name="jobskeyword"
value="Cuvant cheie" />
</td>
</tr>
<tr>
<td valign="middle" style="padding-left: 3px;">
<select style="width: 210px;"
name="oras">
<option value="">Toate
orasele</option>
</select>
</td>
</tr>
<tr>
<td valign="middle" style="padding-left: 3px;">
<select style="width: 210px;"
name="categ">
<option value="">Toate
departamentele</option>
</select>
</td>
</tr>
<tr>
<td valign="middle" style="padding-left: 3px;">
<select style="width: 210px;"
name="nivel_cariera">
<option value="">Orice nivel de
cariera</option>
</select>
</td>

163

DESIGNER PAGINI WEB

</tr>
</table>
</form>
Acesta este un formular putin mai cuprinzator. Contine mai multe tipuri
de elemente, inclusiv de tip ascuns (hidden). Aceste sunt folosite pentru
a transmite anumite informatii care nu trebuie in mod necesar sa fie
accesibile utilizatorilor. Elementele hidden sunt accesibile ca orice alt
input, prin intermediul variabilei $_POST.
Formularul de la eJobs foloseste metoda POST. Ca urmare datele
introduse nu apar in URL si nu pot fi modificate imediat. Mai mult, la
refresh pe pagina de rezultate o sa apara acea avertizare care cere
confirmarea ca datele introduse sa fie trimise inca o data la server.

Aplicatie: sa se incarce (copieze) un fisier de pe

calculatorul

personal

pe

server

(upload

de

fisiere)

Formularul folosit pentru upload este unul special, avand un parametru

obligatoriu (enc-type) si metoda POST.
Important de verificat, pentru ca functionalitatea de upload sa fie
activata:
directiva file_uploads din php.ini trebuie sa fie 'on'
directiva upload_tmp_dir din php.ini trebuie sa se refera la o cale
existenta pe server si cu permisiuni suficiente pentru ca web-serverul
sa poata crea fisiere
directivele upload_max_filesize si post_max_size din php.ini
specifica marimea maxima a fisierului si respectiv a datelor ce pot fi
transmise prin intermediul formularului; este recomandat ca aceste
valori sa fie revizuite
atributul enctype="multipart/form-data" NU TREBUIE omis, altfel
uploadul nu va functiona
Formularul trebuie sa contina un input de tip FILE, ca in exemplul de
mai jos.
<!-- Encoding type, specificat de atributul enctype, TREBUIE
specificat ca mai jos -->
<form enctype="multipart/form-data" action="upload.php"
method="POST">
Incarca un fisier: <input name="fisier" type="file" />
<input type="submit" value="Trimite fisier" />
</form>

164

DESIGNER PAGINI WEB

Nota asupra mecanismului de upload:

web serverul copiaza fisierul transmis de utilizator intr-o locatie
temporara (specificata de directivaupload_tmp_dir)
interpretorul PHP este invocat, avand variabila $_FILES populata
cu informatii despre upload
Programatorul este responsabil cu prelucrarea fisierului incarcat
pe server (mutare intr-o alta locatie, citire, copiere, etc), prelucrare ce
se face cu ajutorul functiilor puse la dispozitie de PHP. Daca fisierul
incarcat nu este mutat (sau redenumit) din locatia temporara, acesta
va fi sters automat la terminarea executiei scriptului (la finalul
requestului, mai exact).
Fisierul PHP (upload.php) ce va prelucra uploadul contiune urmatoarea
secventa de cod (include si validare).
<?php
# se verifica daca fisierul incarcat a depasit dimensiunea
maxima acceptata
# daca acest lucru se intampla, variabilele $_POST si
$_FILES se golesc automat
if( empty( $_POST ) && empty( $_FILES ) ) {
# a fost facut un POST sau nu?
if( isset( $_SERVER['CONTENT_LENGTH'] ) ) {
# atunci cand se trimit date prin post
variabila $_SERVER['CONTENT_LENGTH']
# contine valoarea dimensiunii datelor
$POST_MAX_SIZE = ini_get('post_max_size');
if( !empty( $POST_MAX_SIZE ) ) {
# determin limita maxima (care poate fi
in KB, MB sau GB
$mul = substr($POST_MAX_SIZE, -1);
$mul = ($mul == 'M' ? 1048576 :(
$mul == 'K' ? 1024 :($mul == 'G' ?
1073741824 : 1)));
if ( $_SERVER['CONTENT_LENGTH'] >
$mul*(int)$POST_MAX_SIZE &&
$POST_MAX_SIZE ) {
"Fisier prea mare! Ati
depasit limita maxima permisa";
print

165

DESIGNER PAGINI WEB

} else {
"Eroare nespecificata (probabil
fisierul este prea mare)";
print

}
} else {
# nu s-a facut inca submit la fisier, afisez un
mesaj
print

"Apasati pe 'Trimite fisier' pentru a face

upload!";
}
} else {
# $_POST si $_FILES sunt setate; verific alte erori
ce pot sa apara
if( $_FILES['fisier']['error'] > 0 ) {
"A intervenit o eroare
(#{$_FILES['fisier']['error']})";
print

} else {
# fisierul uploadat va fi pus in subfolderul
'upload' (care trebuie sa
# existe deja in aceeasi locatie ca si fisierul
upload.php
$uploaddir = dirname( __FILE__ ).
DIRECTORY_SEPARATOR .
'upload' .
DIRECTORY_SEPARATOR;
$uploadfile = $uploaddir .
basename($_FILES['fisier']['name']);

if (move_uploaded_file($_FILES['fisier']
['tmp_name'], $uploadfile)) {
print

"Fisier incarcat cu succes!";

} else {
print

"Nu s-a putut incarca fisierul";

}
}
}

166

DESIGNER PAGINI WEB

?>

Aplicatie: sa se incarce mai multe fisiere pe server in

acelasi timp
Formularul contine mai multe elemente de tip INPUT FILE, denumite
sub forma unui vector (array):
<form action="" method="post" enctype="multipart/form-data">
<p>Fisiere:
<input type="file" name="pictures[]" />
<input type="file" name="pictures[]" />
<input type="file" name="pictures[]" />
<input type="submit" value="Incarca" />
</p>
</form>
Codul PHP pentru prelucrarea uploadului trebuie scris in acelasi fisier
ca si formularul (Nota: acesta este o in varianta cu validari minimale)
<?php
# pentru fiecare fisier incarcat, fac o verificare dupa
status code
if( !empty( $_FILES ) )
foreach ($_FILES["pictures"]["error"] as $key => $error) {
if ($error > 0) { # echivalent cu
( $_FILES["pictures"]["error"][$key] > 0 )
print "Eroare cu fisierul {$_FILES["pictures"]
["tmp_name"][$key]}!";

} else {
$tmp_name = $_FILES["pictures"]["tmp_name"]
[$key];
$name = $_FILES["pictures"]["name"][$key];
# mut fisierul din locatia temporara in
directorul curent (acelasi
# director in care se afla scriptul PHP)
move_uploaded_file($tmp_name,

167

"$name");

DESIGNER PAGINI WEB

}
}
?>

Headere
Headerele sunt elemente prin care browser-ul si serverul web
comunica in fundal pentru a afisa o pagina web in bune conditii.
Exista 2 tipuri de headere: cele emise de browser (headere de request)
si cele emise de server (headere de raspuns).
Request headers
De fiecare data cand un utilizator acceseaza o pagina web, browserul
trimite catre server cantitati mici de date, sub forma request headers
(sau, intr-o traducere destul de rar folosita la noi, antetelor de cerere).
Aceste antete cuprind detalii despre pagina care a fost solicitata, modul
de transfer a ei, precum si informatii despre capabilitatile browser-ului.
De exemplu, cand ati accesat aceasta pagina, browser-ul dvs a trimis
catre server urmatoarele headere de request:
GET /http/ HTTP/1.1
Host: php.punctsivirgula.ro
Connection: close
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; ro;
rv:1.9.1) Gecko/20090624 Firefox/3.5
Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7
Cache-Control: no
Accept-Language: de,en;q=0.7,en-us;q=0.3
Headerele sunt trimise de browser in mod implicit, utilizatorul nu
trebuie sa faca ceva anume pentru asta. De asemenea, headerele nu
pot fi (usor) modificate inainte de a fi trimise.
Response headers

In raspuns la request headers primite de la browsere, serverele web

trimit inapoi 2 tipuri de informatie:
headere de raspuns (response headers)
continutul efectiv al paginii solicitate (continut ce poate fi
construit/modificat prin intermediul PHP)

168

DESIGNER PAGINI WEB

Headerele de raspuns contin informatii despre pagina solicitata (cum ar
fi: daca exista sau nu, dimensiunea ei, tipul de continut, etc).
De exemplu, in urma solicitarii acestei pagini in browser, serverul
nostru a trimis urmatorul raspuns:
HTTP/1.1 200 OK
Date: Fri, 17 Jul 2009 14:54:18 GMT
Server: Apache/2.2.9 (Unix) mod_ssl/2.2.9 OpenSSL/0.9.8b
PHP/5.2.6 mod_scgi/1.12
X-Powered-By: PHP/5.2.6
Set-Cookie: PHPSESSID=h8144gj13180725c2aufkrd397; path=/
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, postcheck=0, pre-check=0
Pragma: no-cache
Connection: close
Transfer-Encoding: chunked
Content-Type: text/html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<title>Ghid PHP pentru incepatori - headere. cookies.
modificarea requestului HTTP</title>
....
</html>
Headerele reprezinta prima parte, separate de continut prin 2 linii
goale (reprezentate prin caracterele\r\n\r\n). Din acest raspuns,
browserul "stie" sa interpreteze headerele si sa afiseze in pagina doar
continutul, astfel ca antetele nu vor fi niciodata vizibile utilizatorului
final.
La fel ca in cazul antetelor de cerere, cele de raspuns sunt trimise in
mod automat de catre server, inainte de a trimite continutul si nu este
nevoie ca programatorul sa intervina. Exista insa situatii cand trebuie

169

DESIGNER PAGINI WEB

ca anumite antete sa fie modificate. Acest lucru este posibil cu ajutorul
limbajului PHP.
PHP ofera posibilitatea modificarii headerelor de raspuns prin
intermediul functiei header.
# trimiterea unui semnal (Not-Found, Status OK, etc)
header(

'HTTP/1.0 404 Not Found' );

afiseze un mesaj de eroare
header(

'HTTP/1.0 200 OK' );

va fi trimisa catre browser

// spune browserului sa

// anunta ca pagina exista si

# redirectionare - "spune" browserului sa "mearga" la alta

adresa
header(

'Location: http://www.punctsivirgula.ro/' );

# specificarea tipului paginii ce se va afisa - in urma

acestor apeluri, browser-ul va
# astepta alte tipuri de continut decat pagini HTML
header(

'Content-type: application/pdf' ); // browserul va

astepta sa fie trimis un PDF
header(

'Content-type: text/css' ); // fisier css

Aplicatie: Sa se redirectioneze un utilizator la o

anumita pagina
<?php
# daca este definit un site, fac redirectarea
if( isset( $_GET[ 'site' ] ) ) {
# folosesc instructiunea de selectie multiple
switch( $_GET[ 'site' ] ) {
case 'home':
header(

'Location: /');

break; # break este necesar dupa fiecare

'ramura' a lui switch
case 'search':
header(

'Location: http://www.google.ro' );

170

DESIGNER PAGINI WEB

break;
default: # daca nici una din conditiile de mai sus nu
a fost indeplinita
header(

'Location: http://www.punctsivirgula.ro'

);
}
exit; # dupa header() trebuie oprita executia
scriptului

}
?>
<a href="page.php?site=home">home</a>
<a href="page.php?site=search">home</a>
<a href="page.php?site=bla">other</a>
Important! Inainte de folosirea instructiunii header() nu trebuie sa
fie afisat nimic (cu print, echo, sau scriind cod HTML). Se intampla
adesea ca si un spatiu ramas la sfarsitul unui fisier inclus
cu include saurequire sa opreasca functia de la a functiona corect. De
exemplu, urmatoarele secvente de cod nu sunt valide:
<?php
print

"Nu mai pot trimite headere";

header(

"Location: http://www.google.ro" );

exit;

?>
<html>
<body>
<?php
header(

"Location: /" );

exit;

?>

171

DESIGNER PAGINI WEB

Aplicatie: Sa se creeze o pagina care ofera spre

download un document PDF, in loc sa-l deschida in
browser
Probabil ca multi dintre voi ati observat ca browserele afiseaza
documentele PDF sau imaginile direct in cadrul ferestrei, iar pentru a le
descarca trebuie ales in mod explicit optiunea de Save din meniul
browserului. Acest comportament poate fi schimbat prin headere. Daca
serverul web i-ar "spune" browserului ca ceea ce se va transmite
trebuie downloadat si nu afisat atunci problema ar fi rezolvata. Sa
creem asadar fisierul download.php
<?php
# pagina download.php va primi ca parametru numele
fisierului
# forma unui link va fi urmatoarea: download.php?
file=document.pdf
if( isset( $_GET[ 'file' ] ) ) {
# curat calea fisierului pentru a elimina riscurile
de atacuri
$_GET[ 'file' ] = preg_replace( '/\.\.\//', '', $_GET[
'file' ] );
# daca a fost trimis un fisier verific daca exista
if( !is_file( $_GET[ 'file' ] ) ) {
# daca fisierul nu exista, trimit un semnal
corespunzator
header(

"HTTP/1.0 404 Not Found" );

# timit un

mesaj de eroare

print

"<html><title>Document inexistent</head>

<body><h1>Documentul nu a fost
gasit.</h1>Parametrul
<tt>file</tt> trebuie sa specifice un
fisier existent in
folderul curent. Incercati din
nou.</body></html>";

172

DESIGNER PAGINI WEB

exit;

# opresc executia aici

}
# daca s-a ajuns aici, inseamna ca fisierul exista
# preiau extensia pentru a-i determina tipul
$type = strrchr($_GET[ 'file' ], '.' ); # preiau
textul de la ultimul punct la final
# $type va fi acum ceva de genul ".pdf"
if( strlen( $type ) ) $type = substr( $type, 1 ); #
elimin punctul
# in functie de tip, trimit browserului un anumit
Content-Type
# este necesar pentru ca browserul sa stie ce tip de
fisier va fi descarcat
switch( $type ) {
case 'pdf':
header( 'Content-type: application/pdf' ); //
fisierul va fi PDF

break; # break este necesar dupa fiecare

'ramura' a lui switch
case 'gif':
header(

'Content-type: image/gif' );

break;
case 'jpg':
# daca nu specific un break se va executa
instructiunea de la urmatoarea
# ramura 'case'.
# Cu alte cuvinte pentru 'jpg' si 'jpeg' este
aceeasi instructiune
case 'jpeg':
header(

'Content-type: image/jpeg' );

break;

173

DESIGNER PAGINI WEB

case 'html': # fisierul HTML va fi oferit spre
download in loc sa fie afisat
header(

'Content-type: text/html' );

break;
case 'php':
header(

'Content-type: application/x-httpd-php'

);
break;
/*
aici pot fi definite oricate conditii
*/
default: # daca nici una din conditiile de mai sus nu
a fost indeplinita
# afisez ca text
header(

'Content-type: text/plain' );

}
# trimitem headerul prin care "fortam" download-ul.
Partea "filename" din textul
# de mai jos specifica numele sub care va fi propus
spre download fisierul
header("Content-Disposition:

attachment;

filename=\"download.$type\"");
# trimit continutul fisierului de descarcat
readfile(
'.'.DIRECTORY_SEPARATOR.'resurse'.DIRECTORY_SEPARATOR.$_GET[
'file' ] );

# alternativ de poate folosi

// echo file_get_contents( './resurse/' .
$_GET[ 'file' ] );
# nota: se pot specifica doar fisiere din folderul
'resurse', orice incercare de
# a accessa alte fisiere este blocata
} else {

174

DESIGNER PAGINI WEB

# nu a fost transmis parametrul file, fac redirect la
pagina principala
header(

"Location: /" );

}
exit;

/* intrerup executia, desi nu e necesar in aceasta

situatie fiind deja la
sfarsitul scriptului */
?>
Puteti testa "in actiune" acest cod urmand urmatoarele link-uri:

Imagine jpeg Imagine jpeg Document PDF

Document PDF

link direct
link de download
- link direct
- link de download

Descarcati fisierul PHP si incercati-l pe serverul vostru.

Problema rezolvat: Vom folosi o baz de date MySQL cu numele carti pentru
care vom scrie cod PHP cu ajutorul cruia s ilustrm cteva operaii de lucru cu baza de
date. Tabela folosit este cri i are urmtoarea structur:

Mai nti vom crea un formular de cutare realizat n HTML care ne va permite
cutarea unei cari n baza de date dup unul din criteriile: autor sau titlu. Codul pentru
formular este prezentat n listingul de mai jos:
<html>
<head>
<title>Formular cautare carti</title>
</head>
<body>
<h1><b>Formular cautare carti in baza de date</b></h1>
<form action="rezultate.php" method="POST">
Alegeti tipul de cautare:
<select name="tipcautare">
<option value="autor">Autor</option>
<option value="titlu">Titlu</option>

175

DESIGNER PAGINI WEB

</select>
<br>
Introduceti termenul cautat:
<input name="termencautat" type="text">
<br>
<input type="submit" value="Cautare">
</form>
</body>
</html>
Ieirea acestui cod este prezentat n figura de mai jos:

Scriptul care va fi apelat la apsarea butonului Cautare este rezultate.php.

<html>
<head>
<title>Formular cautare carti</title>
</head>
<body>
<h1><b>Formular cautare carti in baza de date</b></h1>
<?php
//creaza variabile cu nume scurte
$tipcautare=$_POST['tipcautare'];
$termencautat=$_POST['termencautat'];
$termencautat=trim($termencautat);
/* verificam daca utilizatorul a introdus tipul cautarii si
termenul cautat */
if(!$termencautat||!$termencautat)
{
echo 'Nu ati introdus detalii pentru cautare. Va rugam
reveniti la pagina precedenta si incercati din nou';
exit;
}
if(!get_magic_quotes_gpc())
{
$tipcautare=addlashes($tipcautare);
$termencautat=addlashes($termencautat);
}

176

DESIGNER PAGINI WEB

@ $db=new mysqli('localhost','root','','carti');
if(mysqli_connect_errno())
{
echo 'Eroare: Nu va puteti conecta la BD. Va rog sa
incercati mai tarziu';
exit;
}
// interogarea BD
$query="select * from carti where ".$tipcautare." like '%".
$termencautat."%'";
// rularea interogrii BD
$rezultat=$db->query($query);
// contorizm numarul de linii returnate de interogare
$nr_rezultate=$rezultat->num_rows;
echo '<p> Numar de carti gasite: '.$nr_rezultate.'</p>';
for($i=0; $i<$nr_rezultate;$i++)
{
$rand=$rezultat->fetch_assoc();
echo '<p><strong>'.($i+1).'. Titlu: ';
echo htmlspecialchars(stripslashes($rand['titlu']));
echo '</strong><br /> Autor: ';
echo stripslashes($rand['autor']);
echo '<br /> ISBN: ';
echo stripslashes($rand['isbn']);
echo '<br /> Pret: ';
echo stripslashes($rand['pret']);
echo '</p>';
}
// deconectarea de la BD i nchiderea conexiunii la BD
$rezultat->free();
$db->close();
?>
</body>
</html>

Observaii:
n orice script utilizat pentru accesarea de pe web a unei baze de date vom parcurge
urmtoarele etape:
o Verificarea i filtrarea datelor provenite de la utilizator;
o Configurarea unei conexiuni la BD;

177

DESIGNER PAGINI WEB

o Interogarea BD;
o Regsirea rezultatelor;
o Prezentarea rezultatelor la utilizator.
Funcia trim() din expresia $termencautat=trim($termencautat) elimin spaiile
nesemnificative pe care e posibil din neatenie s le introduc utilizatorul la nceputul
sau sfritul termenului cutat;
Anumite caractere sunt perfect valide ca pri ale unui ir, dar pot cauza probleme mai
ales la inserarea datelor ntr-o BD, deoarece BD poate interpreta aceste caractere ca
fiind de control. Caracterele problematice sunt: apostrofurile, ghilimelele, NULL i
backslash. Trebuie folosit o metod de a marca aceste caractere sau de a le transforma
n caractere escape pentru ca BD MySQL s le trateze ca valori literare. Pentru aceasta
se folosete caracterul backslash n faa lor (Popa\ se transform n \Popa\\). PHP are
dou funcii proiectate special pentru transformarea caracterelor n caractere escape.
Funcia addslashes() marcheaz cu un backslash toate ghilimelele i se folosete la
trimiterea datelor n BD, funcia stripslashes() elimin caracterele backslash i se
folosete la datele care vin din BD. Funcia get_magic_quotes_gpc() ne spune dac
marcarea este efectuat automat.
PHP5 are o nou bibliotec pentru conectarea la BD numit mysqli.
Linia @ $db=new mysqli('localhost','root','','carti'); instaniaz clasa mysqli i creeaz
o conexiune la gazda 'localhost', cu numele de utilizator 'root', fr parol, care va
folosi BD carti. @ reprezint un operator de suprimare a erorilor.
Funcia mysqli_connect_errno() returneaz un numr de eroare n cazul unei erori de
conexiune la BD i zero n caz de reuit.
Funcia fetch_assoc() preia fiecare linie dintr-un set de rezultate (noiunea de cursor) i
returneaz linia sub forma unui tablou, fiecare cheie fiind un nume de atribut iar
fiecare valoare fiind valoarea corespunztoare n tablou.
Problema rezolvat: Vom folosi n acest exemplu BD Books. Vom dezvolta o
aplicaie PHP/HTML care va realiza diferite operaii asupra BD: cutare/interogare,
afiarea rezultatelor, adugarea datelor etc.
Baza de date Books are structura i coninutul din imaginea de mai jos:

178

DESIGNER PAGINI WEB

Pentru a asigura conexiunea la baza de date am creat pentru BD books un

utilizator cu numele bookorama si parola bookorama123:
GRANT
ALL
ON
books.
*
TO
bookorama
IDENTIFIED
BY
'bookorama123';

Toate fisierele vor fi salvate la adresa C:\wamp\www\carti, unde am creat

directorul carti pentru a stoca intreg proiectul dezvoltat n cadrul aplicaiei.
Vom ncepe cu formularul de cutare care este un formular simplu HTML.
Pagina pentru cutare n BD Books este search.html. Formularul de cutare este
destul de general, se poate cuta o carte dup titlu, autor sau ISBN.
<html>
<head>
<title>Book-O-Rama Catalog Search</title>
</head>
<body>
<h1>Book-O-Rama Catalog Search</h1>

179

DESIGNER PAGINI WEB

<form action="results.php" method="post">
Choose Search Type:<br />
<select name="searchtype">
<option value="author">Author</option>
<option value="title">Title</option>
<option value="isbn">ISBN</option>
</select>
<br />
Enter Search Term:<br />
<input name="searchterm" type="text">
<br />
<input type="submit" value="Search">
</form>
</body>
</html>

Scriptul care va fi apelat la apsarea butonului Search este results.php.

<html>
<head>
<title>Book-O-Rama Search Results</title>
</head>
<body>
<h1>Book-O-Rama Search Results</h1>
<?php
// create short variable names
$searchtype=$_POST['searchtype'];
$searchterm=$_POST['searchterm'];
/* eliminarea spatiilor albe pe care utilizatorul le poate introduce din neatentie la
inceputul sau sfarsitul termenului cautat */
$searchterm= trim($searchterm);
/* verificam daca utilizatorul a introdus termenul cautat si tipul de cautare */

180

DESIGNER PAGINI WEB

if (!$searchtype || !$searchterm) {
echo 'You have not entered search details. Please go
back and try again.';
exit;
}
/* filtrarea datelor introduse de utilizator pt. a gasi eventuale caractere de control */
if (!get_magic_quotes_gpc()) {
$searchtype = addslashes($searchtype);
$searchterm = addslashes($searchterm);
}
/* conectarea la serverul MySQL folosind o abordare orientata spre obiecte; se instantiaza
clasa mysqli prin care se creeaza o conexiuna la gazda localhost cu nume de utilizator
bookorama si parola bookorama123 */
/* in varianta procedurala conexiunea se realizeaza prin comanda:
@ $db = mysqli_connect('localhost', 'bookorama', 'bookorama123', 'books'); */
@ $db = new mysqli('localhost', 'bookorama', 'bookorama123',
'books');
/* functia mysqli_connect_errno() returneaza un numar de eroare daca nu e conexiunea
valida la BD si zero in caz de reusita */
if (mysqli_connect_errno())
{
echo 'Error: Could not connect to database. Please try
again later.';
exit;
}
// configurarea interogarii folosind operatorul like
$query = "select * from books where ".$searchtype." like
'%".$searchterm."%'";
// rularea interogarii
$result = $db->query($query);
// returnam nr. de randuri gasite prin interogare si il afisam
$num_results = $result->num_rows;
echo '<p>Number of books found: '.$num_results.'</p>';
/* prin iteratie, se preia fiecare linie dintr-un set de rezultate sub forma unui tablou
asociativ, parcurgem fiecare camp si il afisam */
for ($i=0; $i <$num_results; $i++) {
$row = $result->fetch_assoc();
echo '<p><strong>'.($i+1).'. Title: ';

181

DESIGNER PAGINI WEB

echo
echo
echo
echo
echo
echo
echo
echo

htmlspecialchars(stripslashes($row['title']));
'</strong><br />Author: ';
stripslashes($row['author']);
'<br />ISBN: ';
stripslashes($row['isbn']);
'<br />Price: ';
stripslashes($row['price']);
'</p>';

}
// eliberarea setului de rezultate, deconectarea de la BD si inchiderea conexiunii
$result->free();
$db->close();
?>
</body>
</html>

n orice script utilizat pentru accesarea de pe web a unei BD vei parcurge

urmtoarele etape:
1. Verificarea i filtrarea datelor provenite de la utilizator
2. Configurarea unei conexiuni la BD
3. Interogarea BD
4. Regsirea rezultatelor
5. Prezentarea rezultatelor la utilizator.
Acestea sunt etapele pe care le-am urmat n scriptul results.php.
Vom realiza un formular HTML elementar pentru introducerea de carti noi in BD.
Codul HTML pentru aceasta pagina este prezentat in scriptul newbook.html.
<html>
<head>

182

DESIGNER PAGINI WEB

<title>Book-O-Rama - New Book Entry</title>
</head>
<body>
<h1>Book-O-Rama - New Book Entry</h1>
<form action="insert_book.php" method="post">
<table border="0">
<tr>
<td>ISBN</td>
<td><input
type="text"
name="isbn"
maxlength="13"
size="13"></td>
</tr>
<tr>
<td>Author</td>
<td> <input type="text" name="author" maxlength="30"
size="30"></td>
</tr>
<tr>
<td>Title</td>
<td>
<input
type="text"
name="title"
maxlength="60"
size="30"></td>
</tr>
<tr>
<td>Price $</td>
<td><input
type="text"
name="price"
maxlength="7"
size="7"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Register"></td>
</tr>
</table>
</form>
</body>
</html>

183

DESIGNER PAGINI WEB

Rezultatele acestui formular sunt transferate la scriptul insert_book.php, un script

care preia detaliile, realizeaz anumite validri i scrie datele n BD.
<html>
<head>
<title>Book-O-Rama Book Entry Results</title>
</head>
<body>
<h1>Book-O-Rama Book Entry Results</h1>
<?php
// create short variable names
$isbn=$_POST['isbn'];
$author=$_POST['author'];
$title=$_POST['title'];
$price=$_POST['price'];
if (!$isbn || !$author || !$title || !$price) {
echo 'You have not entered all the required details.<br
/>'
.'Please go back and try again.';
exit;
}
if (!get_magic_quotes_gpc()) {
$isbn = addslashes($isbn);
$author = addslashes($author);
$title = addslashes($title);
$price = doubleval($price);
}

184

DESIGNER PAGINI WEB

@
$db
=
new
mysqli('localhost',
'bookorama',
'bookorama123', 'books');
if (mysqli_connect_errno())
{
echo 'Error: Could not connect to database. Please try
again later.';
exit;
}
$query = "insert into books values
('".$isbn."', '".$author."', '".$title."', '".
$price."')";
$result = $db->query($query);
if ($result)
echo
$db->affected_rows.' book inserted into
database.';
$db->close();
?>
</body>
</html>

Scriptul este rulat cu succes i cartea a fost adugat n BD.

185

DESIGNER PAGINI WEB

Ce sunt Cookies?
Cookies reprezinta portiuni de informatii (stocate sub forma de fisiere
de mici dimensiuni) ce se afla pe calculatorul utilizatorului si care sunt
create si folosite de catre browser in comunicarea cu serverul web. De
obicei cookie-urile sunt folosite pentru a identifica utilizatorii sau a
pastra urma vizitelor pe un site.
Cookie-urile pot fi sterse cu usurinta de catre utilizator, sau pot fi
blocate de catre browser, deci folosirea lor trebuie facuta cu grija si
doar in cazuri de necesitate. Un cookie poate contine o cantitate
limitata de informatie iar durata de viata poate fi limitata (la un anumit
numar de zile, la inchiderea sesiunii de lucru, etc) sau nelimitata (pana
la stergerea lor).
PHP dispune de 2 functii prin care se pot crea cookieuri: setcookie si setrawcookie. Cookie-urile create pe calculatorul
utilizatorului pentru un site sunt transmise de catre browser inapoi la
server si sunt disponibile in variabila globala $_COOKIE.

Cum setez un cookie? Cum vad cookie-urile existente

si cum le sterg?
Adaugarea unui cookie pe calculatorul vizitatorului se realizeaza cu
ajutorul functiei setcookie. Aceasta va trimite un header pe care
browserul client il va interpreta si va crea cookie-ul. Fiind vorba de
headere, se aplica regula de a nu printa nimic intainte de apelarea
functiei setcookie. In cazul in care o instructiune de afisare a fost
apelata inainte, cookie-ul nu va mai putea fi creat.
Pentru a vedea cookie-urile deja create in browser-ul vizitatorului se
foloseste variabila predefinita $_COOKIE. Aceasta este un vector asociativ
ce contine un element pentru fiecare cookie existent. Popularea
acestuia se face in mod automat in functie de informatiile transmise de
browser.

186

DESIGNER PAGINI WEB

Nota: elemente de tip cookie se pot crea si la nivel de browser
(folosind JavaScript sau un alt limbaj de client-side scripting). Acestea
vor fi disponibile in variabila $_COOKIE la urmatorul request (efectuat,
evident, dupa ce cookie-urile au fost create).
<?php
# crearea unui cookie de test care expira la sfarsitul
sesiunii de lucru
setcookie("Test",

'acesta este un test');

# crearea unui cookie care expira intr-o ora

setcookie("Test2",

'o ora', time()+3600);

# vizualizarea cookie-urilor
if( isset( $_COOKIE[ 'Test' ] ) ) {
echo

'Test: ', $_COOKIE[ 'Test' ], '<br>';

}
if( isset( $_COOKIE[ 'Test2' ] ) ) {
echo

'Test2: ', $_COOKIE[ 'Test2' ], '<br>';

}
// Rezultat (e nevoie de refresh prima data)
//
//

# stergerea unui cookie se face printr-un truc: alegand o

data de expirare din trecut
setcookie("Test2",

'o ora', time()-3600); // timpul de

expirare a trecut, deci cookie-ul
// nu va mai fi valid si va fi sters de catre browser
?>

187

DESIGNER PAGINI WEB

Cum verific daca browser-ul utilizatorilor accepta

cookie-uri?
Ideea de baza este urmatoarea: se incearca sa se creeze un cookie,
apoi se face un redirect la aceeasi pagina iar in urma redirectului
(practic la a doua accesare a paginii) se verifica daca acel cookie a fost
creat cu succes.
Redirect-ul se face folosind headere, deci va fi transparent pentru
utilizator, care probabil nici nu va observa ca a fost redirectionat.
Pentru a stii cand se face verificarea cookie-ului, se foloseste un
parametru GET ce va avea valoarea 1 dupa redirect.
<?php
function testCookie() {
# se foloseste variabila globala $_SERVER pentru a
prelua numele
# scripului curent (folosit la redirect)
$paginaCurenta = $_SERVER[ 'PHP_SELF' ];
# testez mai intai daca am creat cookie-ul
if( empty( $_GET[ 'creat' ] ) ) {
# este prima data cand accesez pagina
#

adaug un cookie de test

setcookie(

'ctest', 'verificare' );

# fac redirect la aceasi pagina si adaug

parametrul "creat"
# pentru a putea semnala faptul ca s-a incercat
deja crearea cookie-ului
header(

'Location: ' . $paginaCurenta . '?

creat=1' );
exit;

} else {
# se va executa asta
parametrul GET, deci dupa

188

atunci cand exista

DESIGNER PAGINI WEB

# redirect, cand cookie-ul a fost deja creat
if( isset( $_COOKIE[ 'ctest' ] ) && !empty(
$_COOKIE[ 'ctest' ] ) ) {
return true;
} else {
return false;
}
}
}
if (testCookie()) print 'Browserul dvs. accepta cookie-uri';
else print 'Ne pare rau dar browserul dvs. nu accepta
cookies';
?>
Puteti verifica acest exemplu mergand la pagina cookietest.php. Ca
idee de testare, dezactivati cookie-urile din browser si accesati pagina.
Apoi activati-le si face click din nou pe link (nu dati refresh la pagina
deja deschisa intrucat are deja parametrul "creat=1" ceea ce va
impiedica scriptul sa creeze cookie-ul din nou).
Descarcati fisierul cookietest.php si incercati-l pe serverul vostru

Cum creez un tracking cookie (un cookie care sa retina

numarul de vizite pe pagina)?
<?php
# verific daca cookie-ul exista deja si preiau numarul de
vizite stocat
$vizite = 0;
if( isset( $_COOKIE[ 'visits' ] ) ) {
$vizite

= $_COOKIE[ 'visits' ];

189

DESIGNER PAGINI WEB

# cresc numarul vizitelor cu o unitate

$vizite++;
# actualizez (sau setez) cookie-ul ce va retine nr de vizite
setcookie(

'visits', $vizite, time() * 2 ); // va expira peste

mult timp
# afisez un mesaj corespunzator
if( $vizite == 1 ) {
echo

"Bun venit! Se pare ca nu ne-ai mai vizitat pana

acum!";
} else {
echo "Bine ai revenit. E a $vizite-a oara cand ne
vizitezi.";

}
// Rezultat: Bun venit! Se pare ca nu ne-ai mai vizitat pana
acum!
?>

Sesiuni in PHP
Sesiunile, reprezinta o functionalitate prin care anumite informatii sunt
mentinute de la o pagina la alta. O sesiune dureaza atat timp cat
utilizatorul acceseaza un site si se incheie odata cu inchiderea
browserului.
Requesturi stateless si necesitatea sesiunilor
Accesarea unei pagini web este o operatie de sine statatoare
(stateless, sau fara stare). Asta inseamna ca orice accesare ulterioara
a aceleiasi pagini (spre exemplu un refresh) se va face fara ca serverul
"sa stie" de accesarile anterioare. La fel se intampla si atunci cand sunt
accesate mai multe pagini diferite una dupa alta.
Spre exemplu, daca un utilizator acceseaza pagina a.php si apoi b.php,
codul PHP din a doua pagina (b.php) nu poate sti ce "s-a intamplat" in
a.php. Sa luam urmatorul exemplu: in a.php se defineste o variabila ca
mai jos
$text = 'Mesaj din prima pagina';

190

DESIGNER PAGINI WEB

In b.php exista o bucata de cod care afiseaza variabila $text
echo $text;
Datorita naturii stateless a requesturilor pagina b.php nu va afisa
nimic, intrucat variabilele si toate operatiunile executate in pagina
a.php nu se pastreaza de la o cerinta la alta. In mod implicit nu exista
nici o modalitate de a face legatura intre cele doua accesari, si prin
urmare informatiile de pe prima pagina "traiesc" doar in cadrul
accesarii paginii respective si se pierd cand executia scriptului din
a.php se termina.
Acest design poate ridica probleme, in special in aplicatiile complexe,
pentru ca informatiile nu persista de la o pagina la alta. Este adevarat
ca exista cateva moduri prin care mici cantitati de date pot fi transmise
catre o alta pagina - spre exemplu, prin formulare (vezi
lectia Formulare in PHP), dar acestea nu sunt viabile pentru aplicatii
mari, cum ar fi o aplicatie de email, sau un site e-commerce. Din
fericire, PHP ofera posibilitatea de a persista informatiile pe parcursul
navigarii, prin intermediul sesiunilor (sessions).
Sesiuni in PHP
In PHP o sesiune reprezinta perioada de timp in care mai multe
scripturi PHP, accesate la momente diferite de timp, pot stoca si folosi
informatii comune. O sesiune incepe atunci cand un script apeleaza
functiasession_start si se termina atunci cand utilizatorul inchide
browserul (exista si alte modalitati de a porni o sesiune, dar nu sunt
prea uzuale - folosirea comenzii session_start este metoda
recomandata).
O sesiune se intinde pe mai multe requesturi (pe parcursul a mai
multor accesari ale diferitelor pagini), iar pentru a identifica existenta
unei sesiuni PHP poate folosi cookie-uri sau parametrii GET un URL-ul
paginii.

Mecanismul de functionare a sesiunilor in PHP

In momentul in care un script apeleaza functia session_start pentru
prima data intr-o sesiune de lucru, se transmite un cookie catre
browserul clientului (un header de tipul 'Set-Cookie', vezi lectia Cookieuri). Fiind vorba de un cookie, este necesar ca functia session_start sa
fie apelata inaintea oricarei instructiuni ce afiseaza ceva (print, echo,
etc) si inaintea oricarui cod HTML. Cookie-ul transmis contine un
identificator ce poarta numele de Session ID, pe baza caruia se poate

191

DESIGNER PAGINI WEB

face distinctie intre sesiunea curenta si alte sesiuni ale altor utilizatori
ce acceseaza site-ul in acel moment.
In cazul in care browserul utilizatorului nu accepta cookie-uri,
identificatorul de sesiune va fi transmis printr-un parametru GET, in
forma script.php?PHPSESSID=[session id] (se va face practic un
redirect automat la aceeasi pagina avand specificat parametrul in URL).
Este apoi responsabilitatea programatorului sa includa manual acest
identificator in toate celelalte link-uri de pe pagina, asigurandu-se ca
toate paginile vor fi accesate cu acest parametru. Aceste situatii sunt
insa rare, iar in exemplele ce urmeaza vom considera ca browserele au
mereu cookie-urile activate, astfel ca nu va trebui sa avem grija sa
transmitem manual Session ID-ul.
In momentul in care se acceseaza din nou aceeasi pagina, sau o alta
din cadrul aceluiasi site, identificatorul de sesiune este transmis de
catre browser (ca orice cookie existent in browser). Astfel, orice script
PHP are acces la Session ID-ul creat initial, fiind capabil sa acceseze
sesiunea corecta. Mai este nevoie de ceva insa: pentru a putea avea
acces la informatiile persistate, un script trebuie sa
apeleze session_start. De aceasta data, existand deja un Session ID
disponibil, PHP va sti ca nu trebuie creata o sesiune noua ci continuata
una existenta. Asadar, session_start are doua functionalitati: sa
porneasca o sesiune noua (atunci cand nu exista un Session ID) sau sa
continue o sesiune existenta, identificata printr-un Session ID.
Functiile principale de manipulare a sesiunii sunt prezentate mai jos.
Exista o functie care returneaza Session ID-ul curent: session_id.
Aceasta este utila cand este nevoie ca identificatorul sa fie transmis in
URL. Alternativ se poate folosi constanta globala SID. De asemenea
exista o functie pe permite inchiderea unei sesiuni pe parcursul
executiei scriptului curent. Inchiderea sesiunii inseamna oprirea
posibilitatii de a scrie/citi date, nu stergerea datelor salvate deja.
Datele raman salvate si pot fi accesate din nou dupa apelarea
functiei session_start.
<?php
session_start();

echo session_id();

echo

SID; // are acelasi efect ca instructiunea anterioara

session_write_close();

// permite inchiderea sesiunii in

scriptul curent

192

DESIGNER PAGINI WEB

?>
Accesarea datelor
Din momentul in care scriptul PHP apeleaza session_start, acesta poate
incepe deja sa stocheze date ce vor fi persistate. In limbajul
programatorilor de PHP se foloseste expresia "sa pastreze date in
sesiune" sau "pe sesiune". Aceste date sunt gestionate de catre limbajul
PHP (salvate, preluate, etc) si nu este esential pentru programator sa
cunoasca mecanismul intern de manipulare a acestora. Poate deveni
important, totusi, atunci cand se doreste definirea unui mecanism
particularizat de gestionare a sesiunii, dar aceasta reprezinta o
facilitate avansata a limbajului PHP care depaseste nivelul acestor
lectii.
Salvarea datelor pe sesiune se face prin intermediul vectorului superglobal $_SESSION. Exista si o functie ce permite inregistrarea datelor pe
sesiune (nu si modificarea lor), dar folosirea acesteia nu este
recomandata. Functia se numeste session_register si a fost marcata ca
invechita in versiunea 5.3 a limbajului PHP. Citirea datelor persistate se
poate realiza tot prin intermediul $_SESSION.
<?php
session_start();

// inregistrarea datelor in sesiune

$_SESSION[ 'text' ] = 'Mesaj persistat';
// citirea din sesiune
echo

$_SESSION[ 'text' ];

// pe sesiune se pot inregistra aproape orice tipuri de date

$vector = array('a', 'b', 'c');
$_SESSION[ 'litere' ] = $vector;
// accesez o parte din vectorul stocat
echo

$_SESSION[ 'litere' ][0];

// afiseaza a

echo

$_SESSION[ 'litere' ][2];

// afiseaza c

?>

193

DESIGNER PAGINI WEB

Scrierea si citirea datelor de sesiune se realizeaza practic la fel ca
manipularea unui vector asociativ, ceea ce face aceasta functionalitate
usor de folosit.

Aplicatie: sa se transmita o informatie de la o pagina

la alta folosind sesiunile PHP
Urmand exemplul de la inceputul paginii, sa construim cele doua fisiere
a.php si b.php pentru a putea pastra textul de la o accesare la alta.
In primul fisier stochez date pe sesiune, urmand ca acestea sa fie citite
de pe sesiune in al doilea fisier.
<?php
// a.php
session_start();

// pornesc sesiunea pentru a putea stoca o

variabila
$_SESSION[ 'text' ] = 'Mesaj de pe prima pagina';

echo

'<a href="b.php">Mergeti la pagina urmatoare</a>';

?>
Dupa accesarea paginii a.php ar trebui sa existe deja o sesiune creata
ce are stocata variabila text. Scriptul din b.php va accesa aceasta
sesiune, tot prin session_start si va citi datele inregistrate anterior.
<?php
// b.php
session_start()

echo

// continuam o sesiune existenta

$_SESSION[ 'text' ]; // afisam informatia

?>
Fisiere in PHP

194

DESIGNER PAGINI WEB

PHP, ca orice alt limbaj modern de programare, ofera facilitati avansate
in lucrul cu fisierele. Astfel, folosind cod PHP se pot crea, modifica,
manipula si sterge fisiere.
Fisiere text si fisiere binare
Fisierele sunt colectii de informatii stocate pe un dispozitiv de stocare
(hard-disk, CD, etc). In functie de formatul datelor continute fisierele
se impart in doua categorii: fisiere text si fisiere binare.
Fisierele text sunt cele care contin text simplu ce poate fi citit,
reprezentat si modificat de catre oricine si de catre orice secventa de
cod. Spre exemplu, un fisier cu extensia .txt, creat cu un utilitar cum
este Notepad, este cel mai definitoriu tip de fisier text. Un alt exemplu
este un cod-sursa PHP salvat intr-un fisier. Desi codul sursa PHP are o
anumita structura si poate fi interpretat intr-un anumit mod, el este la
baza un fisier text, ce poate fi citit de oricine (orice om). De asemenea
continutul sau poate fi modificat oricand, fie de un om, fie de un
program.
Fisierele binare sunt acele fisiere ce contin secvente de text intr-un
anumit format si cu o structura specifica inteleasa doar de un
calculator (de o anumita secventa de cod). Un exemplu de fisier binar
este o imagine (fisier cu extensia .jpg) sau o melodie (fisier cu
extensia .mp3). Desi acestea pot fi vizualizate cu un editor de texte, ca
Notepad, continutul lor nu poate fi modificat de oricine (cel putin nu
fara a corupe fisierul). Fisierele binare sunt utile pentru ca pot contine
orice tip de date, cu orice structura se doreste. Avantajul este ca prin
intermediul fisierelor binare si pot crea formate proprietare, care
permit modificarea continutului fisierelor doar de anumite programe.
Spre exemplu, fisiere PDF pot fi create/vizualizate doar cu anumite
aplicatii, la fel si documentele Word, s.a.
PHP ofera suport pentru ambele tipuri de fisiere: text si binare. Atat
timp cat se cunoaste structura fisierelor binare (ce tipuri de informatii
contin) acestea pot fi modificate din PHP. Cu toate acestea, in cele ce
urmeaza ne vom concentra asupra fisierelor text intrucat sunt cel mai
des intalnite si mai usor de folosit.
Folosirea fisierelor in PHP
In orice limbaj de programare, si deci si in PHP, cand se lucreaza cu
fisiere trebuie efectuate urmatoarele operatiuni:
1.
deschiderea fisierului
2.
citirea din fisier/scrierea in fisier
3.
inchiderea fisierului

195

DESIGNER PAGINI WEB

Necesitatea fiecarei operatiuni este probabil usor de inteles. Un fisier
trebuie deschis pentru a putea vedea ce este in el - chiar si pentru o
secventa de cod aceasta este o necesitate. Scrierea/citirea propriu-zisa
reprezinta operatia pentru care fisierul a fost deschis, prin care sunt
preluate sau adaugate informatii in fisier. La finalul folosirii fisierului
acesta trebuie sa fie inchis, altfel este posibil ca informatiile continute
sa se piarda.
Instructiunile PHP corespunzatoare operatiilor de mai sus sunt
prezentate in cele ce urmeaza. De remarcat este faptul ca trebuie
specificat inca de la deschiderea fisierului ce fel de operatii vor avea
loc: citire, scriere sau ambele.
<?php
# deschiderea unui fisier si citirea din el
$id_fisier = fopen("c:\\folder\\fisier.txt", 'r');
deschidere
fread(

$id_fisier, 10 );

fclose($id_fisier);

//

// citire 10 octeti din fisier

// inchidere

# deschiderea unui fisier, stergerea continutului si

scrierea in el
$id_fisier = fopen("c:\\folder\\fisier.txt", 'w');
deschidere
fwrite(

//

$id_fisier, 'Text nou in fisier' );

fclose($id_fisier);

// inchidere

# deschiderea unui fisier si scrierea la sfarsitul lui

$id_fisier = fopen("c:\\folder\\fisier.txt", 'a');
deschidere
fwrite(

//

$id_fisier, 'Text adaugat in fisier' );

fclose($id_fisier);

// inchidere

?>
Asa cum s-a observat, un mod de deschidere pentru citire ('r') si 2
moduri de deschidere pentru scriere: cu stergere a continutului vechi

196

DESIGNER PAGINI WEB

(modul 'w') si cu pastrare a continutului (modul 'a'), caz in care
scrierea se face la sfarsitul fisierului, imediat dupa continutul vechi.
Depinde de specificul fiecarei situatii ce mod de scriere trebuie ales.
Limbajul PHP dispune si de alte moduri de deschidere a fisierului, care
sunt mici variatii ale celor prezentate mai sus. Intrucat sunt folosite
doar in anumite situatii nu vor fi prezentate aici. Pentru detalii puteti
consulta pagina de documentatie a functiei fopen.
Instructiunile de mai sus pot fi folosite cu orice tip de fisier, text sau
binar si reprezinta baza in lucrul cu fisierele. Exista o suita de alte
functii pentru citirea sau scrierea anumitor tipuri de date specifice, ce
pot fi folosite cu ambele tipuri de fisiere. In practica insa, de cele mai
multe ori se lucreaza cu instructiuni "utilitare" de manipulare a
fisierelor text - instructiuni care simplifica efortul programatorului in
special in situatii generale. Aceste functii sunt descrise in cele ce
urmeaza.
Instructiuni pentru fisiere text
Pentru simplificarea codului de citire/scriere a unui fisier in situatii
generale, PHP ofera cateva functii foarte
convenabile: file_get_contents, file_put_contents si file. Primele doua,
dupa cum si numele spune, permit preluarea intregului continut al unui
fisier si punerea lui intr-o variabila string, printr-un singur apel,
respectiv crearea unui fisier care sa contina valoarea unei variabile
(exemple mai jos). Cea de-a treia functie permite crearea unui vector
ce are ca elemente liniile fisierului specificat. De exemplu, un fisier cu
3 linii va genera un vector cu 3 elemente, fiecare element reprezentant
o linie din fisier.
Este important de mentinut ca odata citit continutul fisierului
(cu file_get_contents si file) variabilele se "deconecteaza" de fisier,
adica orice modificare facuta asupra variabilei nu se reflecta si asupra
fisierului, cele 2 entitati fiind separate.
<?php
// pun tot continutul fisierului intr-o variabila
$continut = file_get_contents( 'fisier.txt' );
// in acest moment tot continutul este stocat in variabila
$continut
// pot procesa continutul sau il pot modifica

197

DESIGNER PAGINI WEB

// adaug ceva la final
// Nota: modificarea se face doar in variabila $continut, nu
si in fisier
$continut = $continut . ' -- Text adaugat de PHP';
// la final salvez variabila $continut intr-un al doilea
fisier
file_put_contents( 'fisier2.txt', $continut );
// creea un alt fisier care contine 2 cifre doar
file_put_contents( 'fisier3.txt', '11' );

// din continutul unui fisier creez un vector format din

liniile fisierului
$linii = file( 'fisier4.txt' );
'Linia a 3a din fisier este: ', $linii[ 2 ];

echo

?>

Manipularea fisierelor in PHP

Pe langa functiile pentru preluarea/modificarea continutului fisierelor,
PHP ofera si facilitati de gestionare a fisierelor: creare, mutare,
copiere, modificare atribute, etc. Cateva din acestea sunt prezentate
mai jos.
<?php
// verificare daca un fisier exista
echo file_exists(

'fisier.txt' );

// copiere fisier
copy(

'sursa.txt', 'destinatie.txt' );

198

DESIGNER PAGINI WEB

// stergere fisier
unlink(

'fisier.txt' );

// redenumire sau mutare

rename(

'vechi.txt', 'nou.txt' );

// afisarea numelui unui fisier

echo basename(

"c:\\cale\\catre\\fisier.txt" ); // afiseaza

fisier.txt
// afisarea folderului unui fisier
echo dirname(

"c:\\cale\\catre\\fisier.txt" ); // afiseaza
c:\cale\catre
// afisarea dimensiunii unui fisier in octeti
echo filesize(

'fisier.txt' );

// verificare daca numele specificat este un fisier

echo is_file(

"c:\\cale\\catre\\fisier.txt" ); // afiseaza

true
// verificare daca un fisier poate fi citit
echo is_readable(

'fisier.txt' );

// verificare daca un fisier poate fi scris/modificat

echo is_writable(

'fisier.txt' );

?>

199

DESIGNER PAGINI WEB

Directoare in PHP
Manipularea directoarelor (folderelor) folosind PHP se face la fel de
usor ca in cazul fisierelor. Majoritatea functiilor folosite pentru fisiere se
pot aplica si la foldere (de exemplu copy, rename, is_file, etc), dar
exista o serie de alte instructiuni specifice dosarelor.
<?php
// afiseaza directorul curent (current working directory)
// de obicei este folderul in care se afla scriptul ce se
executa
echo getcwd();

// ex. c:\scripturi

// schimba directorul curent

chdir(

'exemple' ); // ex. c:\scripturi\exemple

// returneaza un vector ce contine numele fisierelor si

directoarelor dintr-un folder
$vector = scandir( getcwd() );
print_r(

$vector );

// verifica daca un element este director (folder)

echo is_dir(

"c:\\cale\\fisier.txt" );

// afiseaza false

?>
Limbajul PHP dispune de o serie de functii ce permit citire continutului
unui folder intr-un mod similar cu preluarea continutului unui fisier.
Astfel, exista functii pentru deschiderea unui director (opendir), citirea
continutului, adica a fisierelor sau folderelor existente in acel director
(readdir) si inchiderea lui (closedir). O situatie in care aceste functii
pot fi folosite este aceea cand se doreste afisarea unei liste a
elementelor continute intr-un folder si se doreste efectuarea unor
calcule sau procesari pe baza fiecaruia dintre aceste elemente.
<?php
$folder = getcwd();

// va lista folderul curent

$handle = opendir( $folder );

// deschid folderul

200

DESIGNER PAGINI WEB

if ( !empty( $handle ) ) {
echo

"Fisiere si directoare:\n";

$terminat = false;
while ($terminat == false) {
$file = readdir($handle);

// citesc urmatorul

fisier
if( $file === false ) {
// atentie la operatorul de exactitate ===
// daca nu mai sunt alte fisiere/foldere trebuie
sa ies din bucla
$terminat = true;
} else {
// aici pot face orice procesare, de exemplu sa
redenumesc fisierul/subdirectorul
// doar afisez numele fisierului/subdirectorului
echo

"$file\n";

echo

"<br />";

}
}
}
?>

MYSQL
Ce este o baz de date?
O baza de date este o colectie organizat de informaii care este format din nregistrrile
aferente. Aceasta este aranjat ntr-un mod care face ct mai uoar obinerea de
informaii. Fiecare nregistrare din baza de date este compus dintr-un set de cmpuri,
care conin elementele individuale de informaii pentru un anumit element. Baza de date

201

DESIGNER PAGINI WEB

este stocat n tabele. Fiecare tabel este identificat printr-un nume (de exemplu, "Pontaj"
sau "Cri").
Acesta este un exemplu de tabel:

Ce este SQL?
Structured Query Language (SQL) cuprinde una din pietrele de temelie ale arhitecturii
moderne a bazelor de date. SQL definete metodele utilizate pentru a crea i manipula
baze de date relaionale pe toate platformele majore. SQL este un limbaj standard pentru a
face interogri (query-uri) interactive pentru manipularea (stocarea, extragerea,
actualizarea, tergerea) unei baze de date. Interogrile iau forma unei limbi de comand
care v permite s selectai, inserai, updatai, s aflai locaia unor anumite date, i aa
mai departe. Exist, de asemenea, o interfata de programare.

Cum se poate crea o simpl baz de date MySQL?

n zilele noastre, aplicatii de management cum ar fi Joomla sau Moodle sunt dinamice.
Scopul lor este de a oferi depozitare pentru articole, posturi, povestiri, poze, filme i alte
tipuri de coninut. n scopul de a pstra toate datele organizate i pentru o afiare mai
rapid, aceste cereri sunt folosind baze de date MySQL. Baza de date MySQL este
compus din tabele i la fiecare dintre acestea MySQL stocheaz informaii specifice
pentru aplicaia curent.
Imaginea de mai jos arat modul n care o simpl baz de date MySQL este organizat
pentru a stoca date. Baza de date este numit bookstore (librrie) i const n tabele
ordonate logic (ordonare de tip tree).

202

DESIGNER PAGINI WEB

Exist mai multe moduri n care putei crea o nou baz de date MySQL. Cel mai rapid i
mai mai uor este cu ajutorul instrumentului phpMyAdmin. Imaginea de mai jos arat mai
pe larg un tabel MySQL.

Fiecare tabel cuprinde rnduri i coloane. Coloanele precizeaz tipul de date. Datele in
sine sunt stocate pe rnduri. Numele acestui tabel este book (carte) i este folosit pentru a
stoca informaii despre cri.
Informaiile despre cri stocate n baza noastr de date sunt afiate mai jos:

Procesul de instalare a unei baze de date MySQL difer de la o platform la alta.

In esen este vorba peste tot de un nume al bazei de date, un nume de utilizator (cont) i
o parol. Aceste informaii sunt cerute pentru conectarea la baza de date.
Dac avei pachetul PHPMyAdmin (sau un program similar) instalat, atunci putei s
intrai acolo i s v conectai introducnd contul (numele de utilizator) i parola. Dac nu
avei aa ceva, atunci trebuie s facei ntreaga administrare a bazelor de date folosind
script-uri PHP (i o putei face).
Crearea unei Tabele

203

DESIGNER PAGINI WEB

Mai nainte de orice altceva cu baza de date, trebuie s v creai o tabel. O tabel
este o seciune a bazei de date pentru memorarea unor informaii structurate (legate). Intro tabel vom defini diferite cmpuri care vor fi folosite n acea tabel. Din cauza acestei
construcii, aproape toate centrele cu baze de date trebuie s fie satisfcute folosind doar o
baz de date.
Crearea unei tabele n PHPMyAdmin este simpl, scriei numele, selectai
numrul de cmpuri i &Quot;apsai" butonul (click). Ajungei atunci la un ecran setup
n care trebuie s creai cmpurile pentru baza de date. Dac folosii un script PHP pentru
a crea propria baz de date, completa creere i iniializarea vor fi fcute ntr-o singur
comand.
Cmpuri
Exist o larg varietate de cmpuri i de atribute disponibile n MySQL dintre care
amintim:
Tipul cmpului Descriere
TINYINT
Numr Intreg mic
SMALLINT
Numr Intreg mic
MEDIUMINT
Numr Intreg
INT
Numr Intreg
VARCHAR
Text (maximum 256 caractere)
TEXT
Text
Acestea sunt doar cteva dintre cmpurile disponibile. O cutare pe Internet ne poate
furniza lista cu toate tipurile de cmpuri permise.
Crearea unei Tabele cu PHP
S creem o tabel din PHP este ceva mai dificil dect cu MySQL. Avem de parcurs
urmtorii pai:
CREATE TABLE nume_tabel { Fields }
Cmpurile sunt definite dup cum urmeaz:
fieldname type(length) extra info,
Ultimul cmp introdus nu poate include nici o virgul.
Exemplu creare baza de date cu adrese de contact:
Baza de date de contact va conine toate informaiile de contact ale cunoscuilor introdui
n tabel. Iar informaiile vor putea fi editate i consulate . Urmtoarele cmpuri vor fi
folosite n baza de date:
Nume

Tipul

Lungimea

Descrierea

204

DESIGNER PAGINI WEB

id
INT
6
Un identificator unic pentru fiecare nregistrare
Nume
VARCHAR 15
Numele de familie al persoanei
prenume VARCHAR 15
Numele de botez al persoanei
telefon
VARCHAR 20
Numrul de telefon
mobil
VARCHAR 20
Numrul de telefon mobil
fax
VARCHAR 20
Numrul de fax
email
VARCHAR 30
Adresa e-mail
web
VARCHAR 30
Pagina Web personal
Cmpul id va fi definit ca PRIMARY, INDEX, UNIQUE i iniializat ca auto_increment
(poziie ce apare n Extra n PHPMyAdmin). Raiunea pentru asta este c acesta va fi
cmpul identificator (primar sau index) i deci trebuie s fie unic. Definirea sa ca auto
increment nseamn c la adugarea fiecrei nregistrri, ct vreme nu specificm acolo
un id, acesta va primi ca valoare urmtorul numr.
Crearea Tabelei n PHP
Pentru a crea aceast tabel vom folosi urmtoarea secven de comenzi PHP.
<?
$user="username";
$password="password";
$database="database";
mysql_connect(localhost,$user,$password);
@mysql_select_db($database) or die( "Baza de date nu poate fi selectata");
$query="CREATE TABLE contacts (id int(6) NOT NULL auto_increment,nume
varchar(15) NOT NULL,prenume varchar(15) NOT NULL,telefon varchar(20) NOT
NULL,mobil varchar(20) NOT NULL,fax varchar(20) NOT NULL,email varchar(30)
NOT NULL,web varchar(30) NOT NULL,PRIMARY KEY (id),UNIQUE id (id),KEY
id_2 (id))";
mysql_query($query);
mysql_close();
?>
Introducei numele bazei de date, contul MySQL i parola MySQL n poziiile
corespunztoare din primele 3 linii de mai sus.

205

DESIGNER PAGINI WEB

Interogri (query-uri) SQL i manipularea datelor

n scopul de a accesa datele unui tabel folosim SQL query pentru a comunica cu baza de
date. O interogare SQL deschide legtura cu baza de date, gsete tabelul care conine
datele dorite i modific nregistrrile necesare. De exemplu, urmtoarea declaraie SQL
va selecta toate nregistrrile din tabelul Persons:
SELECT * FROM Persons
Putem insera, actualiza sau chiar terge datele dintr-un tabel cu ajotorul comenzilor SQL.
Mai important este c aceast manipulare a datelor se poate face prin intermediul unui site
web, precum i cu multele posibiliti pe care PHP le ofer.

HTML, PHP i baze de date

Un utilizator poate interaciona cu un site web care afieaz form-uri cu ajutorul web
browser-ului lui / ei. Atunci cnd utilizatorul apas pe butonul submit a form-ului, o
cerere poate fi trimis la serverul care conine baze de date i interogri (query-uri) pot fi
fcute spre tabelele unei baze de date. Rezultatele care sunt returnate de server pot fi
afiate pe pagina web. Toate aceste pagini web pot fi scrise ntr-o combinaie de HTML,
PHP i SQL.

CSS
CSS, prescurtarea de la Cascading Style Sheets, sunt etichete folosite pentru formatarea
paginilor web (de exemplu formatare text, background sau aranjare in pagina, etc.).
Beneficiile sintaxei CSS sunt:

formatarea este introdusa intr-un singur loc pentru tot documentul

editarea rapida a etichetelor
datorita introducerii intr-un singur loc a etichetelor se obtine o micsorare a codului
paginii, implicit incarcarea mai rapida a acesteia

Sintaxa CSS este structurata pe trei nivele:

nivelul 1 fiind proprietatile etichetelor din documentul HTML, tip inline
nivelul 2 este informatia introdusa in blocul HEAD, tip embedded
nivelul 3 este reprezentat de comenzile aflate in pagini separate, tip externe

206

DESIGNER PAGINI WEB

Cea mai mare importanta (suprascrie orice alt parametru) o are sintaxa de nivelul 1 iar cea
mai mica importanta o are cea de nivelul 3.
Folosirea unui fisier extern sau nivel 3 care sa contina comenzi CSS este foarte practic
deoarece poate fi utilizat in mai multe situatii (mai multe fisiere HTML pot folosi acelasi
fisier extern CSS) eliminand timpul necesar introducerii codului corespunzator in fiecare
pagina si totodata editarea lor intr-un singur loc pentru mai multe fisiere.
Extensia acestor fisiere este .css.
Legatura paginilor HTML cu fisierele extene CSS se face prin introducerea urmatoarei
linii:
<link rel="stylesheet" type="text/css" href="fisier_css.css">
Atributele indica urmatoarele: rel - fisierul este tip styleshhet
type - tip text ce contine comenzi CSS
href - fisierul sau adresa fisierului CSS.
Comenzile de nivel 2 sau embedded sunt cele gazduite oriunde intre perechea de etichete
<head> si </head> conform sintaxei:
<style type="text/css">
<!-... comenzi CSS ...
-->
</style>
Unde style -specifica unde incepe si unde se termina blocul CSS iar type este folosit
pentru a ascunde de browserele vechi, care nu cunosc sintaxa CSS, continutul blocului
style.
Comenzile CSS de nivel 1 sau inline sunt cele mai folosite, ele suprascriind orice alte
comenzi CSS. Sunt amplasate in interiorul etichetelor HTML aflate in zona BODY si au
sintaxa:

207

DESIGNER PAGINI WEB

<eticheta style="codul CSS dorit">
...textul sau obiectul asupra caruia este aplicat codul CSS...
</eticheta>
Este permisa folosirea comentariilor in CSS ca si in HTML:

id si class sunt comenzi care dau unei formatari CSS un nume. Se folosesc atunci cand
dorim sa aplicam un style de formatare unei anume zone. Pentru compatibilitate cu
versiunile anterioare de browsere numele asociate zonelor nu vor contine caracterul _.
Elementul id se aplica unui style de format o singura data sau la o singura eticheta
HTML, plasandu-se un nume acelui style. Acest element necesita existenta comezilor
CSS in zona HEAD sau intr-un fisier extern.
Exemplu: folosirea elementului id
<html>
<head>
<title>Exemplu 2_1</title>
<style type="text/css">
<!-- #albastru{color: #0000FF;}-->
</style>
</head>
<body>
<p id="albastru">Text albastru introdus prin id "albastru"</p>
Text negru
</body>
</html>
Elementul class se similar cu id dar spre deosebire de acesta poate fi folosit de mai multe
ori sau pentru zone mai mari. Ca si la id necesita existenta comezilor CSS in zona HEAD
sau intr-un fisier extern.
Exemplu: folosirea elementului class

208

DESIGNER PAGINI WEB

<html>
<head>
<title>Exemplu 2_2</title>
<style type="text/css">
<!-- .rosu{color: #FF0000;}-->
</style>
</head>
<body>
<p class="rosu">Primul text rosu introdus prin class "rosu"</p>
Text negru
<p class="rosu">Al doilea text rosu introdus prin class "rosu"</p>
</body>
</html>
ceste elemente specifica argumentul fontului care se asociaza unui element HTML fiind
incluse ori in zona HEAD ori in interiorul etichetei dorite.
In cazul de fata se remarca asemanarea cu eticheta font din HTML care accepta
argumentele type, style, size si weight.
3.1 font-family
font-family este de fapt o lista de fonturi din care browserul va folosi in ordinea in care le
recunoaste (primul folosit va fi primul din lista, daca nu este recunoscut il foloseste pe al
doilea si tot asa mai departe). Este recomandat ca ultima pozitie din lista sa fie un font
generic (de exemplu serif, sans-serif sau monospace).
In situatia in care numele fontului este format din doua cuvinte se incadreaza intre
ghilimele duble pentru ca browserul sa le interpreteze impreuna.
Exemplu: CSS introdus in HEAD aplicat etichetei p. Browserul nu recunoaste primele
doua fonturi din lista, folosindu-l pe al treilea
<html>
<head>
<title>Exemplu 3_1</title>
<style type="text/css">

209

DESIGNER PAGINI WEB

<!-- p{font-family: font1,font2,arial;}-->
</style>
</head>
<body>
<p>Text scris cu cu fontul Arial</p>
Text negru
<p>Text scris cu cu fontul Arial</p>
</body>
</html>
Exemplu: acelasi exemplu dar CSS introdus in eticheta p din HTML
<html>
<head>
<title>Exemplu 3_2</title>
</head>
<body>
<p style="font-family: font1,font2,arial;">Text scris cu cu fontul Arial</p>
Text negru
<p style="font-family: font1,font2,arial;">Text scris cu cu fontul Arial</p>
</body>
</html>
3.2 font-size
Este parametrul prin care stabilim dimesiunea fontului, exprimat in pixeli (px), puncte
(pt), keywords sau procente. Are o functionare asemanatoare cu eticheta <font>.
Exemplu: CSS introdus in HEAD aplicat etichetei p, dimensiunea exprimata in pixeli
<html>
<head>
<title>Exemplu 3_3</title>
<style type="text/css">
<!-- p{font-size: 20px;}-->
</style>

210

DESIGNER PAGINI WEB

</head>
<body>
<p>Text scris cu font de 20px</p>
Text negru
</body>
</html>
Pentru dimensiunea exprimata in puncte folosim acelasi exemplu inlocuid px cu pt.
Dimensiunea exprimata prin keywords foloseste cuvinte in loc de cifre. Sapte cuvinte
inlocuiesc dimensiunile de la 1 la 7 de la veche eticheta FONT FACE din HTML.
CSS keyword numar FONT size
xx-small
1
x-small
2
small
3
medium
4
large
5
x-large
6
xx-large
7
Pentru verificare se poate folosi exemplul anterior in care se inlocuieste 20px cu unul din
cuvintele de mai sus.
Procentele sunt o alta valoare pe care o poate lua font-size. Aceasta modalitate poate fi
vizualizata diferit de browsere diferite.
Ca verificare folositi acelasi exemplu schimband 20px cu 200%.
3.3 font-style
font-style este folosit pentru a adauga caracteristica italica fontului. Poate lua valorile
normal si italic.
<style type="text/css">
<!-- p{font-style: italic;}-->
</style>

211

DESIGNER PAGINI WEB

3.4 font-weight
font-weight este paramerul care stabileste grosimea caracterului putand lua valorile
numerice de la 100 la 900 sau BOLD, BOLDER, LIGHTER.
<style type="text/css">
<!-- p{font-weight: 700;}-->
</style>
3.4 Compunerea stilurilor
Stilurile prezentate anterior pot fi folosite simultan in interiorul aceeasi etichete fiind
despartite de caracterul ; (punct si virgula).
Exemplu: folosirea unui stil compus aplicat etichetei p
<html>
<head>
<title>Exemplu 3_4</title>
<style type="text/css">
<!-p{
font-family: arial;
font-size: 20px;
font-style: italic;
font-weight: 800;}
-->
</style>
</head>
<body>
<p>Text scris cu Arial, 20px, italic, 800</p>
Text negru
</body>
</html>

212

DESIGNER PAGINI WEB

4.1 Aliniere
text-align pozitioneaza pe orizontala obiecte (de exemplu text sau imagini) si admite
valorile left, right si center ca si eticheta align din HTML.
In continuare este prezentat ca exemplu codul folosit in HEAD, aplicat etichetei p:
<style type="text/css">
<!-p{text-align: center;}
-->
</style>
Exemplu: prin intermediul lui div aplicam stilul pecentru imaginii si textului
<html>
<head>
<title>Exemplu 4_1</title>
<style type="text/css">
<!-p{text-align: center;}
-->
</style>
</head>
<body>
<div class="pecentru"><img src="poza.jpg"></div>
Text neformatat
<div class="pecentru">Text formatat</div>
</body>
</html>
vertical-align este folosit pentru alinierea pe verticala a obiectelor dintr-un tabel si poate
lua valorile: top, middle si bottom.
In exemplul de mai jos este creat clasa sus care va putea fi aplicat elementelor <td> ale
tabelului

213

DESIGNER PAGINI WEB

<style type="text/css">
<!-.sus{vertical-align: top;}
-->
</style>
float este folosit pentru alinierea textului cu imaginile si poate avea valorile: left si right.
In functie de valoarea aleasa imaginea va fi aliniata in partea opusa a paginii.
Exemplu: cream clasa auto si o aplicam inaginii
<html>
<head>
<title>Exemplu 4_2</title>
<style type="text/css">
<!-.auto{float: left;}
-->
</style>
</head>
<body>
<img src="poza.jpg" class="auto">
Textul se aliniaza la dreapta, iar poza la stanga datorita clasei "auto".
</body>
</html>
4.2 Tabulare
text-indent este folosit pentru alinierea textului in interior avand valori exprimate in inci
(in), centimetri (cm) sau pixeli (px).
In exemplul de mai jos text-indent este aplicat etichetei p deplasand textul cu 10 pixeli in
interior
<style type="text/css">
<!-p{text-indent: 10px;}

214

DESIGNER PAGINI WEB

-->
</style>
4.3 Decorare
text-decoration adauga sublinierea sau taierea blocului text asociat si poate avea valorile
underline, line-through sau none.
Exemplu: stilul asociat etichetei p este prezentat in HEAD
<html>
<head>
<title>Exemplu 4_3</title>
<style type="text/css">
<!-p{text-decoration: underline;}
-->
</style>
</head>
<body>
Text normal
<p>Text subliniat</p>
</body>
</html>
4.4 Culoare
color defineste culoarea textului dintr-o zona sau intraga pagina.
Exemplu: stilul asociat etichetei p este prezentat in HEAD
<html>
<head>
<title>Exemplu 4_4</title>
<style type="text/css">
<!-p{color: #0000FF;}

215

DESIGNER PAGINI WEB

-->
</style>
</head>
<body>
Text normal
<p>Text albastru</p>
</body>
</html>
4.5 Stiluri pentru legaturi
In HTML culoarea legaturilor poate fi stabilita prin atributele LINK, ALINK si VLINK
declarate in interiorul etichetei BODY.
Acelasi lucru si chiar mai mult poate fi realizat folosind sintaxa CSS.
Exemplu
<html>
<head>
<title>Exemplu 4_5</title>
<style type="text/css">
<!-a{font-family: arial; font-size: 20px;}
a:link {color: #0000FF;}
a:visited {color: #00FF00;}
a:active {color: #FF0000;}
a:hover {color: #000000;}
-->
</style>
</head>
<body>
Text normal
<a href="exemplu4_4.html">link</a> catre exemplul 4_4
</body>
</html>

216

DESIGNER PAGINI WEB

a defineste stilul general pentru legatura
a:link defineste stilul legaturii nevizitate
a:visited defineste stilul legaturii vizitate
a:active defineste stilul legaturii active (nu prea se foloseste)
a:hover defineste stilul cand mouse-ul este deasupra legaturii
Background culoare sau imagine poate fi definita pentru intreaga pagina, o celula a
tabelului sau pentru text.
5.1 Culoare de fond
background-color defineste culoarea de fond si poate fi asociat oricarei etichete HTML.
Exemplu: definim un stil pentru intreg BODY si un altul pentru eticheta p
<html>
<head>
<title>Exemplu 5_1</title>
<style type="text/css">
<!-body {background-color: #FFFF00;}
p {background-color: #FF0000;}
-->
</style>
</head>
<body>
Text normal
<p>Text cu background rosu</p>
</body>
</html>
5.2 Imagine de fond
Imaginile pot fi folosite ca fundal in spatele intregii pagini, a unui obiect sau a textului.
background-image asociaza o imagine ca fundal unui obiect.
Exemplu: definim un stil pentru eticheta p

217

DESIGNER PAGINI WEB

<html>
<head>
<title>Exemplu 5_2</title>
<style type="text/css">
<!-p {background-image: url(poza.jpg);}
-->
</style>
</head>
<body>
Text normal
<p>Text cu imagine de fond</p>
</body>
</html>
5.3 Repetare
Functie de dimensiunile obiectului caruia ii sunt asociate imaginile de fond se repeta pe
orizontala si verticala.
Repetarea poate fi controlata prin parametrul background-repeat care poate lua valorile:
repeat-x imaginea se repeta pe orizontala
repeat-y imaginea se repeta pe verticala
no-repeat imaginea nu se repeta
Exemplu: imaginea nu se repeta sub eticheta p
<html>
<head>
<title>Exemplu 5_3</title>
<style type="text/css">
<!-p {background-image: url(poza.jpg);
background-repeat: no-repeat;}
-->
</style>

218

DESIGNER PAGINI WEB

</head>
<body>
Text normal
<p>Text cu imagine de fond</p>
</body>
</html>
5.4 Pozitia
In mod normal imaginea de fundal incepe din coltul stanga sus al obiectului asociat, dar
acest lucru poate fi controlat prin comanda CSS background-position.
Sunt acceptate doua valori:
in prima pozitie poate fi: top, center, bottom, percentage sau pixel
in a doua pozitie poate fi: right, center, left, percentage sau pixel
Exemplu: imaginea de fundal este asociata etichetei BODY fiind amplasata top si center,
fara repetare
<html>
<head>
<title>Exemplu 5_4</title>
<style type="text/css">
<!-body {background-image: url(poza.jpg);
background-repeat: no-repeat;
background-position: top center;}
-->
</style>
</head>
<body>
Text normal
</body>
</html>
6.1 list-style-type
Folosind eticheta ol din HTML cream liste ordonate sau numerotate. Adaugand comenzi

219

DESIGNER PAGINI WEB

CSS in zona HEAD putem adauga pe langa numere si cifre sau alte simboluri. Browserul
Netscape nu permite asocierea comenzilor CSS decat pentru eticheta li.
Sintaxa este:
<style type="text/css">
<!-li {list-style-type: valoare;}
-->
</style>
valoarea poate fi:
valoare
disc
circle
square
decimal
lower-roman
upper-roman

disc
disc
cerc
patrat
numere intregi
numere romane, caractere mici (i, ii, iii, iv)
numere romane, caractere mari (I, II, III,

IV)
upper-alpha litere mari (A, B, C, D)
lower-alpha litere mici (a, b, c, d)
none
nimic
Exemplu: lista ordonata folosind marcaje cu litere mici
<html>
<head>
<title>Exemplu 6_1</title>
<style type="text/css">
<!-li {list-style-type: lower-alpha;}
-->
</style>
</head>
<body>
Necesar materiale:

220

DESIGNER PAGINI WEB

<ol>
<li>caramida</li>
<li>ciment</li>
<li>ipsos</li>
</ol>
</body>
</html>
6.2 list-style-image
In afara simbolurilor de marcaj prestabilite cunoscute de browser pot fi folosite si imagini
prin comansa CSS list-style-image. Imaginile sunt introduse prin adresa url().
Exemplu: lista ordonata folosind ca marcaj imaginea punct.gif
<html>
<head>
<title>Exemplu 6_2</title>
<style type="text/css">
<!-li {list-style-image: url(punct.gif);}
-->
</style>
</head>
<body>
Necesar materiale:
<ul>
<li>caramida</li>
<li>ciment</li>
<li>ipsos</li>
</ul>
</body>
</html>
Fiecare element este incadrat intr-o caseta care este compusa din urmatoarele elemente:

221

DESIGNER PAGINI WEB

marginea (margin) este spatiul exterior chenarului pana la celelalte elemente

chenarul (border) este o bordura care inconjoara elementul
completarea (padding) stabileste distanta dintre continut si chenar
continutul include informatia utila (text, tabele, imagini, formulare, etc.)
Originea elementului este considerat coltul din dreapta sus fata de care se vor raporta
toate dimensiunile prezentate in continuare.
7.1 width si height
Latimea si inaltimea unui element sunt stabilite in HTML prin atributele width si height.
Aceste atribute pot fi adaugate sau suprascrise prin comenzi CSS.
Exemplu: folosind comenzi CSS modificam dimensiunile originale ale imaginii
<html>
<head>
<title>Exemplu 7_1</title>
<style type="text/css">
<!-img {width: 50px; height: 100px;}
-->
</style>
</head>
<body>
<img src="margini.gif">

222

DESIGNER PAGINI WEB

</body>
</html>
7.2 padding si margin
padding stabileste distanta dintre obiect si chenar simultan pentru toate laturile.
Distantele pot fi stabilite si individual folosind padding-top, padding-bottom, paddingleft sau padding-right.
margin stabileste distanta dintre chenar si celelalte obiecte din pagina simultan pentru
toate laturile. Distantele pot fi stabilite si individual folosind margin-top, marginbottom, margin-left sau margin-right.
Valorile pentru padding si margin pot fi exprimate in: px (pixeli), in (inci), pt (puncte) sau
cm (centimetri).
Exemplu: folosind comenzi CSS imaginea este pozitionata la 100px fata de latura stanga
si 25px fata de latura de sus
<html>
<head>
<title>Exemplu 7_2</title>
<style type="text/css">
<!-img {margin-left: 100px; margin-top: 25px;}
-->
</style>
</head>
<body>
<img src="margini.gif">
</body>
</html>
7.3 border
Netscape si Internet Explorer afiseaza diferit chenarele. Comanda CSS pentru definirea
chenarului este border avand proprietatile asociate width, style si color. Pentru a fi

223

DESIGNER PAGINI WEB

siguri ca aceste proprietati functioneaza atat in Internet Explorer cat si in Netscape trebuie
sa declaram pentru border cel putin width si style.
border-width stabileste grosimea chenarului si poate fi exprimata in px (pixeli), pt
(puncte), cm (centimetri) sau in (inci).
border-style stabileste tipul chenarului si poate fi dotted, dashed, solid, double, groove,
ridge, inset si outset.
border-color stabileste culoarea chenarului si poate fi exprimata prin valoare
hexazecimala sau in cuvinte.
Exemplu: definim noua clase utilizand proprietatile border-width border-style si bordercolor
<html>
<head>
<title>Exemplu 7_3</title>
<style type="text/css">
<!-.clasa1 {border-width: 2px; border-style: dotted; border-color: red;}
.clasa2 {border-width: 3px; border-style: dashed; border-color: blue;}
.clasa3 {border-width: 2px; border-style: solid; border-color: green;}
.clasa4 {border-width: 3px; border-style: double; border-color: black;}
.clasa5 {border-width: 2px; border-style: groove; border-color: silver;}
.clasa6 {border-width: 3px; border-style: ridge; border-color: lime;}
.clasa7 {border-width: 2px; border-style: inset; border-color: yellow;}
.clasa8 {border-width: 3px; border-style: outset; border-color: aqua;}
.clasa9 {border-width: 2px; border-style: hidden; border-color: olive;}
-->
</style>
</head>
<body>
<div class="clasa1">border-width: 2px; border-style: dotted; border-color:
red;</div><br>

224

DESIGNER PAGINI WEB

<div class="clasa2">border-width: 3px; border-style: dashed; border-color:
blue;</div><br>
<div class="clasa3">border-width: 2px; border-style: solid; border-color:
green;</div><br>
<div class="clasa4">border-width: 3px; border-style: double; border-color:
black;</div><br>
<div class="clasa5">border-width: 2px; border-style: groove; border-color:
silver;</div><br>
<div class="clasa6">border-width: 3px; border-style: ridge; border-color:
lime;</div><br>
<div class="clasa7">border-width: 2px; border-style: inset; border-color:
yellow;</div><br>
<div class="clasa8">border-width: 3px; border-style: outset; border-color:
aqua;</div><br>
<div class="clasa9">border-width: 2px; border-style: hidden; border-color: olive;</div>
</body>
</html>
Pozitionarea permite asezarea unui obiect intr-un anume loc folosind coordonatele.
Totodata obiectele pot fi pozitionate pe straturi diferite, unul deasupra celuilalt.
Atat pozitionarea absoluta (ASOLUTE) cat si cea relativa (RELATIVE) folosesc
proprietatile LEFT si TOP exprimate in px (pixeli), in (inci), pt (puncte), ems, procentaje
sau cm (centimetri).
8.1 Pozitionare absoluta plaseaza obiectul in pagina exact in locatia data de left si top.
Astfel poate fi creat un element liber fata de celelalte din pagina. Obiectul poate fi orice,
de exemplu text sau imagine.
Exemplu: am aplicat pozitionarea absoluta etichetei h4
<html>
<head>
<title>Exemplu 8_1</title>

225

DESIGNER PAGINI WEB

</head>
<body>
<h4 style="position: absolute; left: 50px; top: 50px">Text 1</h4>
<h4 style="position: absolute; left: 100px; top: 200px">Text 2</h4>
</body>
</html>
8.2 Pozitionare relativa este pozitia normala pe care o ocupa un element, dupa
elementele anterioare si inaintea celor urmatoare. Poate fi deplasat fata de aceasta pozitie
folosind proprietatile left si top.
Exemplu: am folosit doua obiecte unul pozitionat absolut celalalt relativ
<html>
<head>
<title>Exemplu 8_2</title>
<style type="text/css">
<!-.absolut {position: absolute; left: 200px; top: 150px;}
.relativ {position: relative; left: 50px; top: 50px;}
-->
</style>
</head>
<body>
<div class="absolut">Pozitionare absoluta, independent de celelate obiecte din
pagina</div>
Text
<div class="relativ">Pozitionare relativa, dupa "Text"</div>
</body>
</html>
8.3 Pozitionarea tridimensionala
Elementele sunt pozitionate pe ecran pe o suprafata bidimensionala dar pot fi asezate si
unul deasupra celuilalt, intr-o stiva utilizand un indicativ (index-z) incepand cu 0,

226

DESIGNER PAGINI WEB

urmatorul 1 si tot asa in continuare. Elementul cu indexul cel mai mare este asezat
deasupra.
Exemplu: am folosit doua obiecte unul pozitionat absolut celalalt relativ
<html>
<head>
<title>Exemplu 8_3</title>
<style type="text/css">
<!-.element1 {position: absolute; left: 30px; top: 30px; z-index: 3}
.element2 {position: absolute; left: 50px; top: 50px; z-index: 2}
.element3 {position: absolute; left: 70px; top: 70px; z-index: 1}
-->
</style>
</head>
<body>
<div class="element1"><img src="poza.jpg"></div>
<div class="element2"><img src="poza.jpg"></div>
<div class="element3"><img src="poza.jpg"></div>
</body>
</html>

PROGRAMAREA WEB CU ASP.NET

Introducere
ASP.NET este tehnologia Microsoft care permite dezvoltarea de aplicaii web
moderne, utiliznd platforma Microsoft .NET cu toate beneficiile sale.
Pentru a nelege procesul de realizare a unui site web cu ASP.NET este important s
cunoatem modul n care funcioneaz comunicarea ntre browser i serverul web.
Acest proces este format din urmtoarele etape principale:
1. Browserul Web iniiaza o cerere (request) a unei resurse ctre serverul Web unde
este instalat aplicaia dorit.
2. Cererea este trimis serverului Web folosind protocolul HTTP.

227

DESIGNER PAGINI WEB

3. Serverul Web proceseaz cererea.
4. Serverul web trimite un rspuns browserului folosind protocolul HTTP.
5. Browserul proceseaz rspunsul n format HTML, afind pagina web.
6. Utilizatorul poate introduce date (s spunem ntr-un formular), apas butonul
Submit i trimite date napoi ctre server.
7. Serverul Web proceseaz datele.
8. Se reia de la pasul 4.
Serverul web primete cererea (request), iar apoi trimite un rspuns (response)
napoi ctre browser, dup care conexiunea este nchis, i sunt eliberate resursele folosite
pentru procesarea cererii. Acesta este modul de lucru folosit pentru afiarea paginilor
statice (datele dintr-o pagin nu depind de alte date din alte pagini sau de alte aciuni
precedente ale utilizatorului) i nici o informaie nu este stocat pe server.
n cazul paginilor web dinamice, serverul poate s proceseze cereri de pagini ce conin
cod care se execut pe server, sau datele pot fi salvate pe server ntre dou cereri din
partea browserului.
Trimiterea datelor de la browser ctre server se poate realiza prin metoda GET sau
POST.
Prin GET, URL-ul este completat cu un ir de caractere (QueryString) format din
perechi de tipul cheie = valoare separate prin &.
Exemplu:
GET /getPerson.aspx?Id=1&city=Cluj HTTP/1.1
Folosind POST, datele sunt plasate n corpul mesajului trimis serverului:
Exemplu:
POST /getCustomer.aspx HTTP/1.1
Id=123&color=blue
Prin Get nu se pot trimite date de dimensiuni mari, iar datorit faptului c datele
sunt scrise n URL-ul browser-ului, pot aprea probleme de securitate. De aceea, de
preferat este s se foloseasc metoda POST pentru trimiterea de date.
Trimiterea datelor napoi ctre server este numit deseori PostBack. Aciunea de
PostBack poate fi folosit att cu metoda GET ct i cu metoda POST. Pentru a ti dac se
trimit date (POST) sau pagina este doar cerut de browser (GET), cu alte cuvinte pentru a
ti dac pagina curent se ncarc pentru prim dat sau nu, n ASP.NET se folosete o
proprietate a clasei Page numit IsPostBack.

228

DESIGNER PAGINI WEB

Structura unei pagini ASP.NET
La crearea unui proiect nou, n fereastra Solution Explorer apare o nou pagin
web numit Default.aspx.
Orice pagin web .aspx este format din 3 seciuni: seciunea de directive,
seciunea de cod, i seciunea de layout.
Seciunea de directive se folosete pentru a seta mediul de lucru, preciznd modul n care
este procesat pagina.
<%@ Page Language=C# AutoEventWireup=true
CodeFile=Default.aspx.cs Inherits=_Default %>
Seciunea de cod, conine codul C# asociat paginii sau obiectelor din pagin.
Codul poate fi plasat direct n pagina sau ntr-un fiier cu extensia .cs, cu acelai nume ca
al paginii (de ex. Default.aspx.cs). n cazul n care se gsete direct n pagin, codul este
cuprins ntre tag-urile <script> </script>:
<script runat=server>
protected void Button1_Click(object sender, EventArgs e)
{
Page.Title = First Web Application;
}
</script>
De obicei blocurile <script> conin cod care se execut pe partea de client, ns
dac se folosete atributul runat = server, codul se va executa pe serverul web.
n cazul exemplului de mai sus, la apsarea butonului se schimb titlul paginii Web n
browser.
n cazul n care n fereastra pentru adugarea unei pagini noi n proiect, se bifeaz
opiunea Place code in separate file, codul este plasat ntr-un fiier separat, iar n
seciunea de directive este precizat numele acestui fiier.
Exemplu: CodeFile=Default.aspx.cs.
Seciunea de layout conine codul HTML din seciunea Body:
<body>
<form id=form1 runat=server>
<div>
<asp:Button ID=Button1 runat=server OnClick=Button1_Click
Text=Button /></div>

229

DESIGNER PAGINI WEB

</form>
</body>
Atributul runat=server pentru un anumit control, specific faptul c pentru
obiectul respectiv, ASP.NET Runtime Engine care ruleaz pe serverul web (IIS) va face
transformarea ntr-un obiect HTML standard. Aceast conversie se realizeaz n funcie
de tipul browserului, de varianta de javascript instalat pe browser i de codul C# asociat
obiectului respectiv (numit code behind).
De exemplu pagina aspx de mai sus este transformat n urmtorul fiier html:
<form name=form1 method=post action=Default.aspx id=form1>
<div>
<input type=hidden name=__VIEWSTATE id=__VIEWSTATE
value=/wEPDwUKMTQ2OTkzNDMyMWRkIftHHP/CS/zQf/D4XczzogN1M1w= />
</div>
<div>&nbsp;<br />
<input type=submit name=Button1 value=Button id=Button1 style=zindex:
102;left: 349px; position: absolute; top: 156px />
</div>
<div>
<input type=hidden name=__EVENTVALIDATION = __EVENTVALIDATION
value =
/wEWAgKlr8nLBAKM54rGBh7DPY7SctG1t7rMEnJSrO+1hHyP />
</div>
</form>

Controale Server
Un control server poate fi programat, prin intermediul unui cod server-side, s rspund la
anumite evenimente din pagin. i menine n mod automat starea ntre 2 cereri ctre
server, trebuie s aib atributul id i atributul runat.
Exist dou tipuri de controale server: Web i Html. Controalele server web ofer mai
multe funcionaliti programabile dect cele HTML. De asemenea pot detecta tipul
browserului i pot fi transformate corespunztor n tag-urile html corespunztoare.

230

DESIGNER PAGINI WEB

ASP.NET vine cu o suit foarte bogat de controale care pot fi utilizate de ctre
programatori i care acoper o foarte mare parte din funcionalitile necesare unei
aplicaii web.
O proprietate important a controalelor server este AutoPostBack. Pentru a nelege
exemplificarea, vom considera o pagin n care avem un obiect de tip checkbox i un
obiect de tip textbox care are proprietatea visible = false. n momentul n care este bifat
checkbox-ul, vrem ca obiectul textbox s apar n pagin. Codul poate fi urmtorul:
protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
if (CheckBox1.Checked == true)
{
TextBox3.Visible = true;
TextBox3.Focus();
}
else
{
TextBox3.Visible = false;
}
}
Cnd vom rula pagina, vom constata c totui nu se ntmpl nimic. Pentru a se executa
metoda CheckBox1_CheckedCanged, pagina trebuie retrimis serverului n momentul
bifrii checkbox-ului. Serverul trebuie s execute codul i apoi s retrimit ctre browser
pagina n care textbox-ul este vizibil sau nu. De aceea controlul checkbox trebuie s
genereze aciunea de PostBack, lucru care se ntmpl dac este setat valoarea true
proprietii AutoPostBack. Unele controale genereaz ntotdeauna Postback atunci cnd
apare un anumit eveniment. De exemplu evenimentul click al controlului button.
Pentru a nelege mai bine fenomenul de PostBack, ne propunem s realizm urmtoarea
aplicaie. ntr-o pagin avem un textbox i un buton. Dorim ca n textbox s avem iniial
(la ncrcarea paginii) valoarea 0, i de fiecare dat cnd se apas butonul, valoarea din
textbox s fie incrementat cu 1. Codul evenimentului Click al
butonului i al evenimentului Load al paginii ar putea fi urmtorul:
protected void Page_Load(object sender, EventArgs e)
{

231

DESIGNER PAGINI WEB

TextBox1.Text = 0;
}
protected void Button1_Click(object sender, EventArgs e)
{
TextBox1.Text = Convert.ToString(Convert.ToInt32(TextBox1.Text) + 1) ;
}
Vom observa, ns, c dup prima incrementare valoarea n textbox rmne 1. Acest lucru
se ntampl deoarece evenimentul Load se execut la fiecare ncrcare a paginii
(indiferent c este vorba de request-ul iniial al browserului su de apelul de postback
generat automat de evenimentul clic al butonului). Pentru a remedia aceast situaie,
obiectul Page n ASP are proprietarea isPostBack, a.. putem s rescriem codul metodei
Load:
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack == false) // nu este postback deci e prima
{ // incarcare a paginii
TextBox1.Text = 0;
}
}

Pstrarea informaiilor n aplicaiile web

Exist o deosebire fundamental ntre aplicaiile Windows i cele Web. Anume, n
aplicaiile Windows odat creat un obiect acesta rmne n memorie n principiu pn la
terminarea aplicaiei i va putea fi utilizat i din alte ferestre dect cele n care a fost creat,
atta timp ct este public. Pe de alt parte, n aplicaiile web paginile nu se pstreaz n
memorie pe calculatorul utilizatorului (clientului) iar aici ne vom pune problema pstrrii
informaiilor.
Cnd browserul cere o anumit pagin, ea este ncrcat de serverul web, se execut
codul asociat pe baza datelor trimise de user, rezultnd un rspuns n format html trimis
browserului. Dup ce este prelucrat pagina de ctre server, obiectele din pagin sunt
terse din memorie, pierznd astfel valorile. De aceea apare ntrebarea: cum se
salveaz/transmit informaiile ntre paginile unui site web sau chiar n cadrul aceleiai
pagini, ntre dou cereri succesive ctre server?

232

DESIGNER PAGINI WEB

Pstrarea strii controalelor

Obiectul ViewState
Starea controalelor unei pagini este pastrat automat de ctre ASP.NET i astfel nu trebuie
s ne facem griji cu privire la informaiile care apar n controale pentru caele nu vor
disprea la urmtorul PostBack adic la urmtoarea ncrcare a paginii curente. De
exemplu, dac scriem un text ntr-o csu de text i apoi apsm un buton care genereaz
un PostBack iar pagina se rencarc, ea va conine csua de text respectiv cu textul
introdus de noi nainte de rencrcare.
n momentul generrii codului Html de ctre server se genereaz un control html de tip
<input type=hidden...> , a crui valoare este un ir de caractere ce codific starea
controalelor din pagin:
<input type=hidden name=__VIEWSTATE id=__VIEWSTATE
value=/wEPDwULLTE1OTg1NDYyNDZkZFCFstl/DwSGv81TuCB397Tk5+CJ />
Se pot aduga valori n ViewState i de ctre programator, folosind obiectul ViewState cu
metoda Add (cheie, valoare_obiect): ViewState.Add(TestVariable,
Hello);
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack == false)
{
ViewState.Add(ViewStateTest, Hello);
}
}
Regsirea datelor se realizeaz folosind ca indice numele obiectului:
protected void Button1_Click(object sender, EventArgs e)
{
TextBox1.Text = ViewState[ViewStateTest].ToString();
}

Pstrarea altor informaii

Aa cum am observat n paragraful anterior, starea controalelor de pe o anumit pagin
web ASP.NET se pastreaz ntre mai multe cereri ctre server pentru aceeai pagin,
folosind obiectul ViewState n mod automat, transparent pentru programator.

233

DESIGNER PAGINI WEB

Dac dorim s pstrm mai multe informaii dect doar coninutul controalelor, cum ar fi
valorile unor variabile instaniate ntr-o anumit pagin, atunci va trebui s o facem
explicit, pentru c acestea se pierd n momentul n care serverul web regenereaz pagina
curent, ceea ce se ntmpl la fiecare PostBack , cum se ntmpl de exemplu la apsarea
unui buton ASP.NET.

Profile
O posibilitate de pstrare a informaiilor specifice unui utilizator const n folosirea
obiectului Profile, prin intermediul fiierului de configurare Web.Config. Acesta este un
fiier XML n care se rein opiuni de configurare. Pentru a aduga o proprietate
obiectului profile, n fiierul Web.Config se adaug:
<profile enabled=true>
<properties>
<add name =ProfileTest allowAnonymous =true/>
</properties>
</profile>
Atributul name reine numele proprietii. Dup aceste modificri, proprietatea definit n
Web.config poate fi apelat pentru obiectul Profile:
Profile.ProfileTest = Hello world;
Sau
Label1.Text = Profile.ProfileTest;
Session
Obiectul Session este creat pe serverul web la prima accesare a sitului de ctre un
utilizator i rmne n memorie n principiu att timp ct utilizatorul rmne conectat la
site. Exist i excepii, dar ele nu fac obiectul acestui material.
Pentru a aduga un obiect n sesiune, trebuie doar s scriem un cod de genul urmtor:
protected void Button1_Click(object sender, EventArgs e)
{
Session[sir] = test;
}
Session este de fapt un dicionar (list de perechi cheie valoare), n care valorile sunt de
tip object. Ceea ce nseamn c la citirea unor valori din sesiune va trebui s realizm o
conversie de tip.

234

DESIGNER PAGINI WEB

protected void Button2_Click(object sender, EventArgs e)
{
test = Session[sir].ToString();
TextBox1.Text = test;
}
Odat introdus un obiect n Session, el poate fi accesat din toate paginile aplicaiei, att
timp ct el exist acolo. Programatorul poate realiza scoaterea obiectului din sesiune
atunci cnd dorete acest lucru:
Session.Remove(sir);

Application
Obiectul Application se comport n mod identic cu Session, doar c este specific ntregii
aplicaii, adic tuturor utilizatorilor care acceseaza un site web la un moment dat, i nu
unei anumite sesiuni. Cu alte cuvinte odat introdus un obiect n Applicatio, va putea fi
accesat din orice loc al sitului i de ctre toi utilizatorii acestuia.

Membrii statici
Toate variabilele declarate ca fiind statice sunt specifice ntregii aplicaii i nu unei
anumite sesiuni. De exemplu, dac atunci cnd un site este accesat de Utilizator1 i o
variabil declarat:
static string test = init; se modific de ctre acesta: test = modificat; atunci toi
utilizatorii aplicaiei vor vedea valoarea modificat din acel moment nainte.

Concluzii
n cazul obiectului ViewState, datele sunt salvate n pagina web sub forma unui ir de
caractere, iar n cazul obiectului Session respectiv Application n memoria serverului
web. Dac datele salvate sunt de dimensiuni mari, n primul caz crete dimensiunea
paginii web, care va fi transmis mai ncet, iar n al doilea caz rezult o folosire excesiv
a memoriei serverului web, ceea ce duce la scderea vitezei de lucru. Aceast folosire
excesiv a memoriei poate s apar i n cazul unei dimensiuni a datelor ceva mai redus,
dar a unui numr mare de utilizatori care acceseaz simultan pagina (pentru fiecare se va
creea un obiect sesiune).

235

DESIGNER PAGINI WEB

Validarea datelor
n toate aplicaiile web i nu numai se pune problema validrii datelor introduse de
utilizator. Cu alte cuvinte, trebuie s ne asigurm c utilizatorul site-ului nostru introduce
numai date corecte n csuele de text care i sunt puse la dispoziie. De exemplu, dac pe
o pagin web se cere utilizatorului introducerea vrstei sale i pentru asta i punem la
dispozitie o csu de text, va fi obligatoriu s ne asigurm c n acea csu se pot
introduce numai cifre i c numrul rezultat este ncadrat ntr-un anumit interval. Sau, un
alt exemplu, este introducerea unei adrese de email valid din punct de vedere al
formatului.
ASP.NET vine cu o serie de controale gata create n scopul validrii datelor. Aceste
controale sunt de fapt clase care provin din aceeai ierarhie, avnd la baz o clas cu
proprieti comune tuturor validatoarelor.

Proprieti comune
1 ControlToValidate: este proprietatea unui control de validare care arat spre controlul
(csua de text) care trebuie s fie validat.
2 ErrorMessage: reprezint textul care este afiat n pagina atunci cnd datele controlul
de validat nu corespund regulii alese.
3 EnableClientSideScript: este o proprietate boolean care specific locul n care se
execut codul de validare (pe client sau pe server).
4 Alte proprieti, specifice tipului de validator.

Validatoare
1 RequiredFieldValidator. Verific dac n csua de text asociat prin proprietatea
ControlToValidate s-a introdus text. Util pentru formularele n care anumite date sunt
obligatorii.
2 RangeValidator. Verific dac informaia introdus n csua de text asociat face parte
dintr-un anumit interval, specificat prin tipul datei introduse (prorietatea Type) i
MinimumValue respectiv MaximumValue.
3 RegularExpressionValidator. Verific dac informaia din csua de text asociat este
conform unei expresii regulate specificate. Este util pentru validarea unor informaii de
genul adreselor de email, numerelor de telefon, etc n general informaii care trebuie s
respecte un anumit format. Trebuie setat proprietatea ValidationExpression n care se
pot alege cteva expresii uzuale gata definite.

236

DESIGNER PAGINI WEB

4 CompareValidator. Compar datele introduse n csua de text asociat cu o valoare
prestabilit (ValueToCompare), n funcie de operatorul ales (proprietatea Operator) i
de tipul de date care se ateapt (proprietatea Type).
Pe lng validatoarele prezentate mai sus, programatorul poate crea validatoare
customizate, care s verifice datele introduse de utilizator conform unor reguli proprii.
Exemplu de folosire a validrilor pentru un modul de login putei gsi pe dvd-ul ARK,
instalnd Resurse\Visual Studio 2005\101 Samples CS101SamplesAll.msi sau
descrcnd cele 101 exemple de utilizare a Visual Studio 2005 de la adresa
http://msdn2.microsoft.com/en-us/vstudio/aa718334.aspx, aplicaia Membership.

Securitatea n ASP.NET
Pentru o aplicaie securizat, avem mai multe posibiliti de autentificare. Implementarea
politicii de securitate se poate face att din IIS ct i din aplicaia ASP.NET.
Tipul aplicaiei
Modul de autentificare
Descriere
Aplicaie web public pe Internet.
Anonim
Nu avem nevoie de securizare.
Aplicaie web pentru Intranet.
Windows Integrated. Acest mod autentific utilizatorii folosind lista de useri de pe server
(Domain Controller). Drepturile userilor n aplicaia web este dat de nivelul de privilegii
al contului respectiv.
Aplicaie web disponibil pe Internet, dar cu acces privat.
Utilizatorii companiei pot accesa aplicaia din afara Intranetului, folosind conturi din lista
serverului (Domain Controller).
Aplicaii web comerciale. Forms Authentication Aplicaii care au nevoie de informaii
confideniale i eventual n care sunt mai multe tipuri de utilizatori.

Windows Authentication
n acest mod de autentificare, aplicaia ASP .NET are ncorporate procedurile de
autentificare, dar se bazeaz pe sistemul de operare Windows pentru autentificarea
utilizatorului.
1. Utilizatorul solicit o pagin securizat de la aplicaia Web.

237

DESIGNER PAGINI WEB

2. Cererea ajunge la Serverul Web IIS care compar datele de autentificare ale
utilizatorului cu cele ale aplicaiei (sau ale domeniului)
3. Dac acestea dou nu corespund, IIS refuz cererea utilizatorului
4. Calculatorul clientului genereaz o fereastr de autentificare
5. Clientul introduce datele de autentificare, dup care retrimite cererea ctre IIS
6. IIS verific datele de autentificare, i n cazul n care sunt corecte, direcioneaz
cererea ctre aplicaia Web.
7. Pagina securizat este returnat utilizatorului.

Forms-Based Authentication
Atunci cnd se utilizeaz autentificarea bazat pe formulare, IIS nu realizeaz
autentificarea, deci este necesar ca n setrile acestuia s fie permis accesul anonim.
1. n momentul n care un utilizator solicit o pagin securizat, IIS autentific clientul ca
fiind un utilizator anonim, dup care trimite cererea ctre ASP.NET
2. Acesta verific pe calculatorul clientului prezena unui anumit cookie1
3. Dac cookie-ul nu este prezent sau este invalid, ASP.NET refuz cererea clientului i
returneaz o pagin de autentificare (Login.aspx)
4. Clientul completeaz informaiile cerute n pagina de autentificare i apoi trimite
informaiile
5. Din nou, IIS autentific clientul ca fiind un utilizator anonim i trimite cererea ctre
ASP.NET
6. ASP.NET autentific clientul pe baza informaiilor furnizate. De asemenea genereaz i
un cookie. Cookie reprezint un mic fiier text ce pstreaz diverse informaii despre
utilizatorul respectiv, informaii folosite la urmtoarea vizit a sa pe site-ul respectiv, la
autentificare, sau n diverse alte scopuri.
7. Pagina securizat cerut i noul cookie sunt returnate clientului. Atta timp ct acest
cookie rmne valid, clientul poate solicita i vizualiza orice pagin securizat ce
utilizeaz aceleai informaii de autentificare.

Securizarea unei aplicaii web

Securizarea unei aplicaii web presupune realizarea a dou obiective: (1) autentificarea i
(2) autorizarea.

238

DESIGNER PAGINI WEB

1. Autentificarea presupune introducerea de ctre utilizator a unor credeniale, de
exemplu nume de utilizator i parol, iar apoi verificarea n sistem c acestea exist si
sunt valide.
2. Autorizarea este procesul prin care un utilizator autentificat primete acces pe
resursele pe care are dreptul s le acceseze.
Aceste obiective pot fi atinse foarte uor utiliznd funcionalitile i uneltele din
ASP.NET respectiv Visual Studio, anume clasa Membership i unealta ASP.NET
Configuration (din meniul Website al Visual Studio Web Developer Express).
Configurarea autentificrii i autorizrii se poate realiza dup cum se vede n acest
tutorial:
http://msdn2.microsoft.com/en-us/library/879kf95c(VS.80).aspx.
Un exemplu de securizare a aplicailor web putei gsi pe dvd-ul ARK, instalnd
Resurse\Visual Studio 2005\101 Samples CS101SamplesAll.msi sau descrcnd cele
101

exemple

de

utilizare

Visual

Studio

2005

de

la

adresa

http://msdn2.microsoft.com/en-us/vstudio/aa718334.aspx, aplicatia Security.

Accesul la o baza de date ntr-o pagin web

Pentru adugarea unei baze de date proiect, din meniul Add Item se alege SQL Database.
Baza de date va fi adaugat n directorul App_data al proiectului. Legtura ntre baza de
date i controalele html se realizeaz prin intermediul obiectului SqlDataSource. Din
meniul contextual asociat acestui obiect se alege opiunea Configure Data Source, se
alege baza de date, i se construiete interogarea SQL pentru regsirea datelor. La aceast
surs de date se pot lega controale de afiare a datelor cum ar fi: GridView, Detailview,
FormView. Din meniul contextual asociat acestor controale se alege opiunea Choose data
source, de unde se alege sursa de date.
Pentru acest exemplu va trebui s descrcai baza de date AdventureWorksDB de la
adresa
http://www.codeplex.com/MSFTDBProdSamples/Release/ProjectReleases.aspx?
ReleaseId=4004. Fiierul descrcat va fi unul de tip *.msi care trebuie lansat pentru a
instala baza de date pe server/calculator.

239

DESIGNER PAGINI WEB

JAVASCRIPT
Java Script este un limbaj de programare care face posibil ca paginile web sa fie mai
interactive. Este mai des recunoscut ca facand parte din categoria "Scripting Languages".
A fost lansat sub numele de "LiveScript", schimbarea numelui in JavaScript fiind o
chestie legata de strategia de marketing.
Scripturile Javascript sunt introduse in pagina HTML si sunt interpretate si executate de
browser. Javascript poate fi considerat o unealta foarte buna daca doriti sa controlati
continutul paginilor in functie de data, ora, sistemul de operare sau browserul
utilizatorilor, sa faceti site-uri interactive, care sa comunice cu vizitatorii, site-uri
dinamice, sa validati datele primite din formulare, dar nu numai atat, acestea fiind doar
cateva din posibilitatile pe care le ofera acest limbaj.
Pentru a invata Javascript, ai nevoie de cateva lucruri:
1. Sa cunosti limbajul HTML si sa iti poti modifica singur documentele HTML.
2. Sa ai un web browser care suporta Javascript.
3. Nu trebuie sa stii programare pentru a folosi scripturile urmatoare. Totusi, daca
vrei sa creezi alte scripturi, notiunile de programare iti vor fi de folos.
Javascript ofera trei metode pentru a include scripturi in pagina:
1. Cu tag-ul <SCRIPT>,
2. Dintr-o biblioteca externa sau
3. Prin atributele HTML.
Cea mai simpla si cea mai raspandita metoda de a include scripturi in document este cea
dintai, in care tag-urile folosite pentru a semnala inceputul si sfarsitul codului Javascript
sunt <SCRIPT> respectiv </SCRIPT>. Tag-ul de inceput arata in felul urmator:
<SCRIPT language="Javascript">
Fiecare tag de acest tip trebuie sa includa atributul language. Deoarece <SCRIPT> este un
tag general ce semnaleaza ca declaratiile continute sunt un script executabil si nu un cod
HTML obisnuit, acest tag este conceput pentru a fi recunoscut de orice browser care
lucreaza cu scripturi. Comanda language=Javascript ii spune browserului ca urmeaza un
cod in limbajul Javascript, si nu in alt limbaj, cum ar fi de exemplu VBScript.
Versiunea Javascript pentru Interner Explorer se numeste JScript. In timp ce IE
recunoaste comanda language="Javascript", Netscape Navigator ignora atributul
language="Jscript, deci pentru ca scriptul sa functioneze corect pe ambele browsere,
folositi language="Javascript. Codul javascript se incheie cu tag-ul </SCRIPT> :

240

DESIGNER PAGINI WEB

<SCRIPT language="Javascript">
........Cod Javascript ...........
</SCRIPT>
In sectiunea body a documentului HTML poti avea oricate tag-uri <SCRIPT> doresti, ca
si cum ar fi un tag normal. Nu uita sa inchizi fiecare tag inainte de a continua. De
asemenea, daca vrei sa folosesti functii Javascript, acestea trebuiesc incluse in
sectiunea <HEAD></HEAD> a documentului. In acest mod, functiile sunt incarcate
inainte ca documentul sa fie afisat si astfel nu vei avea erori Javascript.
Iata un exemplu:
<HEAD>
<TITLE> Titlul </TITLE>
<SCRIPT language="Javascript">
function numele_functiei()
{
Cod Javascript ...
}
</SCRIPT>
</HEAD>
Desi majoritatea browserelor lucreaza cu scripturi, exista si unele browsere mai vechi
care nu recunosc tag-ul <SCRIPT>. In general, browserele ignora tag-urile pe care nu le
cunosc, dar aceasta nu este valabil si pentru scripturi, deoarece acestea au mai multe linii
de text. Browserele vechi nu vor cauta tag-ul de sfarsit </SCRIPT> si vor afisa continutul
scriptului ca pe un text normal. Pentru a rezolva problema, trebuie ca aceste browsere sa
sara peste declaratiile din tag-ul <SCRIPT>. Pentru aceasta, include codul intr-un
comentariu HTML. Astfel, browserele vechi vor ignora textul comentariului, in timp ce
browserele care recunosc Javascript vor executa codul:
<SCRIPT language="Javascript">
/* <!-- Deschide comentariul HTML care
ascunde scriptul de browserele vechi*/
......Declaratii Javascript .......
/* --> Inchide comentariul si browserul va interpreta
normal codul care urmeaza */

241

DESIGNER PAGINI WEB

</SCRIPT>
Ar fi gresit sa spunem ca folosind comentariile HTML ascundem codul de browserele
vechi. De fapt, cu ajutorul comentariilor, codul nu este afisat pe pagina, desi tag-urile si
scriptul

sunt

preluate

de

browser

si

pot

fi

vazute

in

sursa.

Daca doresti ca scripturile de pe pagina ta sa nu fie vazute de vizitatori, cea mai simpla
metoda ar fi ca documentul descarcat sa nu contina decat scripturi care asambleaza
pagina, deci HTML simplu. Un inconvenient ar fi ca o astfel de pagina nu este interactiva,
deoarece nu are scripturi atasate.
O alta metoda pentru a folosi scripturile javascript, metoda pe care o recomand si o
consider mai practica, este aceea de utilizare a scripturilor externe. Cei care folosesc CSS
sunt obisnuiti cu folosirea stylesheet-urilor externe. Este aproximativ acelasi lucru: se
adreseaza fisierul extern in interiorul etichetei <HEAD> a fisierului html si apoi o
modificare a acestui script se propaga in intreg documentul.
Iata cum adresam un fisier JS extern (fisierul extern este exemplu.js):

<html>
<head>
<title>
Exemplu
</title>
<script type="text/javascript" src=exemplu.js>
</script>
</head>
<body>
Continut
</body>
</html>
In continuare voi incerca sa afisez in browser un text folosind javascript.

242

DESIGNER PAGINI WEB

Exemplul 1

<html>
<head>
<title>
exemplu
</title>
</head>
<body>
<h1>
Text HTML
</h1>
<h1>
<script type="text/javascript">
document.write("Text JAVASCRIPT");
</script>
</h1>
</body>
</html>
Explicatii suplimentare:
document.write("text Javascript");
document este un obiect iar write() este o metoda.
Un obiect poate contine alte obiecte care pot fi considerate proprietati ale acestuia. Spre
exempludocument contine alte obiecte, de exemplu title . In javascript acest obiect se
identifica cu:document.title. Alt exemplu ar fi obiectul submit care este intr-un formular
din

pagina.

Acesta

ar

fi

adresat document.form.submit.

Iata cateva exemple de obiecte HTML si corespondentele in JavaScript:

Obiectul
Pagina

Tag-ul HTML
<body> .... </body>

Coresp. JavaScript
document

243

DESIGNER PAGINI WEB

Web
Formular

<form

HTML

name="formular">

Buton

... </form>
<INPUT

document.formular

document.formular.buton

TYPE="button"
name="buton">
Imagine

<IMG

document.imagine

name="imagine">
write() este o metoda. O metoda ne face sa ne gandim la actiune, au efect asupra
obiectelor. Metodele au tot timpul paranteze ( ). O sa mai intalnim in tutorial metode si
obiecte si atuci o sa le intelegeti mai bine rolul.
S-a folosim si un fisier extern (exemplu2.js)
Fisierl HTML are codul de mai jos

<html>
<head>
<title>exemplu2</title>
<script

type="text/javascript"

src="exemplu2.js">

</script>
</head>
<body>
<h1>

Text

HTML

</h1>

<h1 id="text1"> <!-- aplicam un id pe care-l vom defini in JS

-->
</h1>
</body>
</html>

244

DESIGNER PAGINI WEB

Exemplu
Am adresat fisiserul extern javascript in zona <HEAD> a documentului HTML si am
atribuit marcajului <h1> id-ul "text1". Un ID javascript functioneaza ca un ID in CSS:
poate fi folosit o singura data intr-o pagina. Iata si codul din exemplu2.js :

window.onload = scrieText;
function scrieText() {
document.getElementById("text1").innerHTML
= "Text JavaScript din fisier extern";
}
Ce face acest script:
- dupa ce termina de incarcat fereastra executa functia "scrieText" (window.onload =
scrieText;)
- pasul urmator este definirea functie scrieText(). Aceasta se face intre acolade
({ }).Aceasta functie cauta dupa ID-ul "text1" in documentul HTML si unde il gaseste
inlocuieste continutul tagului respectiv cu textul pe care l-am introdus in ghilimele.

COMENTARII IN FISIERE
Pentru a face comentarii care sa nu fie afisate de browser, cu scopul de a explica codul
pentru altii sau pentru a lasa marcaje care sa-ti aduca aminte anumite lucruri despre script,
ai la dispozitie doua modalitati:
- pentru comentarii pe o singura linie se foloseste marcajul //:

// comentariu pe o singura linie (daca treceti pe linia urmatoare

va fi interpretat de browser si va afisa o eroare)
- pentru comentarii pe mai multe linii:

/*

245

DESIGNER PAGINI WEB

comentariu

1
comentariu

comentarii pe mai multe randuri, tot ce se afla in interiorul

acestor marcaje este ignorat
*/
Din pacate, inca sunt folosite browsere care nu suporta JavaScript. Pentru a-i avertiza si
pe acestia ca browserul lor nu suporta JavaScript folosit tag-ul <noscript>. Acesta nu este
luat in seama daca browserul nostru suporta javascript dar in situatia in care nu suporta
sau nu-l are activat putem sa afisam un mesaj de avertizare:

<noscript>
Browserul dumneavoastra nu suporta javascript. Pentru a
beneficia de toate facilitatile acestui site schimbati browserul
sau activati Javascript
</noscript>

ALERTE JAVASCRIPT
Una dintre cele mai importante facilitati a acestui limbaj este aceea ca ofera posibilitatea
sa interactionezi cu utilizatorii.
Pentru a crea o alerta care sa afiseze un mesaj la care utilizatori trebuie sa raspunda, codul
din fisierul JS este urmatorul (codul din fisierul html il pastram):

alert("Mesaj de intampinare - Bine ati

venit!"); // pagina se va incarca atunci cand se
face click pe OK
Exemplu

246

DESIGNER PAGINI WEB

In continuare vom invata cate ceva despre conditionale. Ele ofera posibilitatea de a face
sa se intample anumite lucruri in functie de anumite circumstante, de exemplu daca sunt
sau nu cookie-urile activate.
O conditionala putem sa o facem cu o structura de forma if then else. Vom face un script
care sa afiseze un mesaj sau o alerta daca cookie-urile sunt activate si altul daca nu sunt
activate:

if (/* intre aceste paranteze vom introduce conditia. Aceasta

trebuie sa intoarca valoarea true sau false.*/)
{
/*Aici trebuie introdus codul care sa fie executat daca conditia
din if intoarce valoarea true */
}
else

/* Codul care este executat daca conditia intoarce

valoareafalse. Conditionala poate fi folosita si fara partea
de else*/
}
Acestea fiind stiute vom face un script care sa afiseze o aleta daca sunt activate si alta
daca sunt dezactivate.Iata codul din fisierul JS:

if (navigator.cookieEnabled) {
alert ("cookies activate!!!");
}
else {

247

DESIGNER PAGINI WEB

alert ("cookies dezactivate");
}
Exemplu
Acum voi scrie un script care sa ofere utilizatorilor posibilitatea sa confirme sau nu, iar in
functie de raspuns sa avem actiuni diferite. Pentru asta, vom folosi tot un if si vom
schimba doar conditia:

if (confirm("Esti sigur ca aceasta e pagina pe care trebuie sa te

afli?")) {
alert("ai zis ca esti sigur"); }
else {
alert("nu esti sigur");
}
Exemplu
Daca dorim ca user-ul sa introduca raspunsul de la tastatura trebuie sa folosim variabile.
O variabila se defineste o data si poate fi folosita de mai multe ori. Scriptul urmator preia
raspunsul introdus de utilizator si poate sa-l foloseasca pentru a-i da acestuia un raspuns
(de exemplu). Pentru ca vizitatorii sa introduca valori se foloseste keyword-ul prompt(),
care este din aceeasi categorie cualert() si confirm(), toate solicitand actiune din partea
utilizatorului.

var raspuns = prompt("esti sigur ca aici pe aceasta pagina vrei

sa ajungi","");
/* Intre primele ghilimele se introduce intrebarea iar intre
celelalte se introduce un raspuns random. Am lasat liber pentru
a nu avea un raspuns predefinit. */

248

DESIGNER PAGINI WEB

if (raspuns) { // daca exista vreun raspuns

alert("ai zis: " + raspuns); //concateneaza cele doua siruri
}
else {
alert("nu esti sigur");
}
Exemplu

Confirm face parte din aceeasi categorie cu alert si prompt, adica ferestre popup. Spre
deosebire de alert, confirm intoarce valoarea true sau false, putand fi astfel folosit in
structuri if, ca in exemplul de mai jos:

if (confirm("esti de acord?")) {
alert("Esti de acord")
}
else {
alert ("Nu esti de acord")
};
FUNCTII Java Script
Sintaxa pentru crearea unei functii este urmatoarea:

249

DESIGNER PAGINI WEB

function
NumeFunctie(var1,var2,...,varX)
{
ceva cod
}
In caz ca nu are parametrii numele functiei va trebui urmat de paranteze ( ).

function NumeFunctie()
{
ceva cod
}
Iata un exemplu foarte simplu de functie fara parametrii:

<html>
<head>
<script
type="text/javascript">
function ScrieText()
{
alert("Text de
PROBA");
}
</script>
</head>
<body>
<form>
<input type="button"
value="Apasa"
onclick="ScrieText()" >
</form>
</body>

250

DESIGNER PAGINI WEB

</html>
Exemplu
In acest exemplu nu am mai folosit fisier JS extern si am definit functia in zona de
<HEAD> a documentului HTML. La apasarea butonului se va executa functia ScrieText.
Inlocuiti codul intr-un fisier .txt, schimbati extensia fisierului in .html si observati cum
functioneaza.

Functiile cu parametri sunt si ele foarte utile. Sa presupunem ca avem nevoie de o functie
care sa faca anumite operatii cu anumiti parametrii. Nu vom sta sa scriem functia de cate
ori avem nevoie sa efectuam operatia asupra altor parametrii, ci vom folosi doar o alta
adresare a functiei, folosind parametrii.

function prod(a,b)
{
x=a*b;
return x;
}
Functia face produsul a doua numere. Ca sa atribuim unei variabile produsul a doua
numere este suficient sa adresam functia prod (pe care am definit-o) si sa indicam si cele
2 numere intre paranteze.

produs=prod(5,10);

//

face produsul celor 2 nr.

Link-uri inteligente javascript
Cu ajutorul Javascript putem sa facem link-urile mai "destepte", adica sa primim mesaje
de avertizare, sa duca la o pagina sau la alta in fuctie de anu ite conditii, s.a.m.d.
Exemplul urmator este un exemplu de link "destept" dar si un bun exercitiu de lucru cu
functii.
Pentru a putea sa controlezi un link cu javascript trebuie sa folosim o metoda de marcare

251

DESIGNER PAGINI WEB

a link-ului respectiv. Cel mai uzual este sa folosim un ID si apoi, in Javascript, sa
folosimdocument.getElementById("") .
Sa zicem ca dorim sa controlam un link din urmatoarea pagina:

<html>
<head> <title> exemplu </title>
<script

type="text/javascript"

src="script.js">

</script>
</head>
<body>
<h1> Exemplu link destept </h1>
<h2 align="center">
<a href="index.html " id="redirect"> Link "destept" JavaScript
</a>
</h2>
</body>
</html>
Link-ului destept i-am atasat un ID, putand astdel sa-l folosim in fisierul javascript. Vom
incerca sa controlam accesul la pagina spre care face link-ul trimitere. Codul din fisierul
script.Js:

window.onload = functieI; /* Dupa ce se incarca pagina se

trimite la funtia functieI pe care o vom defini mai jos in
script*/

252

DESIGNER PAGINI WEB

function functieI() {
document.getElementById("redirect").onclick

controlClick; /* cauta in document elementul care are idul redirect, actiunea este onclick (cand se face click pe
elementul respectiv) si trimite la functia controlClick */
}
function controlClick() {
alert("Link controlat!! Atentie!!");
return false; /* nu ne lasa sa mergem mai departe. Daca
puneam return true ne lasa sa trecem la pagina la care
trimite link-ul */
}
Exemplu cu return false Exemplu cu return true
Daca dorim ca utilizatorii care au JS activat sa ajunga pe o pagina si cei care-l au
dezactivat pe alta pagina cam asta trebuie sa facem:

window.onload = functieI;
function functieI() {
document.getElementById("redirect").onclick
controlClick;}
function controlClick() {
window.location = "paginajs.html";

253

DESIGNER PAGINI WEB

return false;
}
Exemplu
Cei care au JS activat vor fi directionati de catre link pe pagina paginajs.html iar cei care
nu au JavaScript activat vor ajunge pe pagina care este trecuta in html,
adica index.html. De explicat nu este prea mult de explicat... , daca in browser nu este
JavaScript activat sau nu este suportat, acesta nu va putea sa interpreteze codul JS si-l va
executa doar pe cel html.

Am mai gasit un exemplu care poate fi util. De exemplu daca doriti sa primiti mesaj de
avertizare atunci cand se face click pe un link care nu duce la o pagina de pe domeniul
vostru, asta tebuie sa faceti:
Fisierul html (am schimbat decat link-ul):

<html>
<head> <title> exemplu </title>
<script type="text/javascript" src="script.js">
</script>
</head>
<body>
<h1> Exemplu link destept </h1>
<h2 align="center">
<a href="www.google.com" id="redirect"> Link "destept"
JavaScript </a>
</h2>

254

DESIGNER PAGINI WEB

</body>
</html>
Fisierul JavaScript:

window.onload = functieI;
function functieI() {
document.getElementById("redirect").onclick

controlClick;}
function controlClick() {
if(this.toString().indexOf("etutoriale") < 0) {
alert("Nu suntem responsabile de continutul acestui site.
Aceasta pagina este in afara domeniului nostru!!");
}
}
Exemplu
Dupa cum se poate observa, in acest exemplu au aparut multe noutati. Cea mai
importanta dintre ele ar fi Keyword-ul this.
This este un keyword care depinde de context. De obicei se refera la un obiect in functie
de metoda care cheama functia sau structura in care intra this. In cazul nostru se refera la
un link si ne dam seama de asta pentru ca functia este chemata de onclick, care se aplica
link-ului. Sincer imi e foarte greu sa explic cum se foloseste this, asa ca voi incerca sa
exemplific cat mai mult si poate o sa va prindeti singuri :).
<input type="radio" name="Buton radio test"
onClick="alert(this.name)">
apasati pe butonul radio de langa sa vedeti ce efect are

255

DESIGNER PAGINI WEB

<input type="checkbox" name="MyCheckbox"

onClick="alert(this.checked)">
apasati pe butonul de langa sa vedeti ce efect are
Tratarea evenimentelor
Aplicatiile JavaScript sunt determinate de eveniment. Evenimentele de obicei sunt
rezultatele actiuni utilizatorilor (de exemplu miscarea mouse-ului). Exist mai multe
evenimente recunoscute de navigatoare (onBlur, onChange, onClick, onFocus, onLoad,
etc.) Prin scripturi pot fi definite metode care vor trata automat aceste evenimente.
Metodele de tratare a evenimentelor pot fi incluse n documentele HTML ca atribute ale
elementelor. Forma general este:
<TAG eventHandler="JavaScript Code">
unde TAG este element HTML, event Handler este numele metodei de tratare a
evenimentului.
De exemplu, se doreste introducerea n pagin a unui buton, care la apsare va reciti
penultima pagin cerut.
<INPUT TYPE=button VALUE="Back 2" onClick="history.go(-2)">
ntre ghilimelele dup onClick pot fi puse mai multe comenzi JavaScript, desprtite cu ";"
Exemplul urmtor contine dou cadre. Sectiunea <NOFRAMES> este introdus pentru
navigatoarele care nu recunosc cadrele (acestea nu recunosc nici JavaScript). Cadrele sunt
realizate cu ajutorul a dou documente: index.html si menu.html. Pentru vizualizare se va
lansa documentul index.html. care va mprti ecranul n dou portiuni horizontale. n cea
de sus va apare continutul documentului menu.html, iar n cel de jos continutul
documentului de intrare hotsoft.html.
Sursa documentului index.html:
<HTML>
<TITLE>Welcome to HotSoft</TITLE>
<FRAMESET ROWS="17%,83%">
<NOFRAMES>
<H4>Continut</H4>
<A HREF=hotsoft.html TARGET="display">Bun Venit/A><BR>

256

DESIGNER PAGINI WEB

<A HREF=servicii.htm TARGET="display">Servicii /A>
</NOFRAMES>
<FRAME SRC=menu.html>
<FRAME SRC=hotsoft.html NAME="display">
</FRAMESET>
</HTML>
Documentul menu.html contine dou butoane, plasate n interiorul unui formular.
Formularul este introdus deoarece butoanele pot apare doar n interiorul lor. La apsarea
butoanelor, ce se afl n frame-ul de sus, n frame-ul de jos vor apare fie documentul
hotsoft.html, fie servicii.html, n functie de butonul apsat.
Sursa documentului menu.html:
<HTML>
<BODY>
<!- <A HREF=menu.html TARGET="_parent">Hide Frame</A> ->
<FORM>
<input type=button name=btn_welcome value="Bun Venit"
onClick="window.open('hotsoft.html','display')">
<input type=button name=btn_servicii value="Servicii"
onClick="window.open('servicii.html','display')">
</FORM>
</BODY></HTML>
OBIECTE JAVASCRIPT
JavaScript nu este un program orientat pe obiecte (OO), cum sunt C++ sau Java, dar este
bazat pe obiecte.
In lumea din jurul nostru obiectele sunt de exemplu: o carte, o masina, un televizor; in
JavaScript obiectele sunt de exemplu: un formular, o fereastra, butoane, imagini ...
Toate elementele dintr-o pagina sunt vazute de JavaScript ca fiind obiecte.
Obiectele au anumite proprietati, de exemplu in lumea reala televizoarele au butoane,
masinile au roti; asa si in JavaScript obiectele au proprietati: formularele au buton,
ferestrele au titluri.
Pe langa obiecte si proprietati, in JavaScript avem si termenul "metode".

257

DESIGNER PAGINI WEB

Metodele reprezinta functiile pe care un obiect poate sa le faca. Ferestrele se deschid cu
metoda "open()", butoanele au metoda "click()". Parantezele rotunde "()" arata ca se face
referire

la

metoda,

nu

la

proprietate.

Astfel, putem rezuma ca un obiect este o colectie de proprietati si functii (metode).

Sintaxa pentru folosirea obiectelor este:

obiect.prorietate

obiect.metoda()

- Punctul (.) se foloseste pentru a specifica detinatorul metodei sau proprietatii.

Obiectele din JavaScript le putem cataloga in trei categorii principale:
- Obiecte pe partea de client
- Obiecte pe partea de server
- Obiecte esentiale
Mai multe astfel de obiecte pot forma o celula (o grupa) numita "clasa", astfel, diferite
obiecte incorporate pentru o executie comuna formeaza un "set de clase" care se mai
numeste si "biblioteca de clase", iar mai exact pentru limbajul JavaScript "biblioteca de
obiecte JavaScript", si pot fi refolosite.
JavaScript are urmatoarele obiecte esentiale, predefinite:
1 - String
2 - Math
3 - Date
4 - Array
5 - Global
1. Obiectul string
String (sau

sir)

se

foloseste

pentru

prelua

Proprietatea acestui obiect este:

length - returneaza numarul de caractere dintr-un sir (string)

Metodele obiectului string sunt urmatoarele:

anchor() - Returneaza un sir ca si "anchor"

big() - Returneaza un sir cu text mare
blink() - Returneaza un sir care clipeste
bold() - Returneaza un sir cu litere ingrosate
charAt() - Returneaza un caracter de la pozitia care este specificata
charCodeAt() - Returneaza codul ASCII al unui caracter de la o pozitie

258

text.

DESIGNER PAGINI WEB

specificata
concat() - Returneaza doua siruri concatenate
fixed() - Returneaza un sir cu caractere tip
fontcolor() - Returneaza un sir cu o culoare specificata
fontsize() - Returneaza un sir cu litere de o anume marime
fromCharCode() - Returneaza valoare Unicode a unui caracater
indexOf() - Returneaza pozitia primei aparitii a unui subsir in un sir, sau daca
subsirul nu e gasit, valoarea -1
italics() - Returneaza un sir in italic (scris aplecat)
lastIndexOf() - Returneaza pozitia primei aparitii a unui subsir in un sir, sau daca
acesta nu e gasit, -1 (Importanr: se incepe din dreapta sirului spre stanga)
link() - Returneaza un sir ca hyperlink
match() - Similar cu indexOf si lastIndexOf, dar aceasta metoda returneaza sirul
specificat sir, sau "null", in locul unor valori numerice
replace() - Inlocuieste intr-un sir unele caractere specificate cu altele noi
specificate.
search() - Returneaza un numar intreg daca sirul contine caracterele specificate,
altfel returneaza -1
slice() - Returneaza un sir incepand de la pozitia index specificata
small() - Returneaza un sir cu caractere mai mici
split() - Imparte un sir in mai multe siruri, in functie de caracterele specificate
strike() - Returneaza un sir taiat cu o linie la mijloc
sub() - Returneaza un sir ca indice
substr() - Returneaza un subsir specificat astfel, exemplu: 12,8 returneaza 8
caractere, incepand de la caracterul al 12-lea (se incepe de la 0)
substring() - Returneaza un subsir specificat astfel, exemplu: 8,12 returneaza
toate caracterele, incepand de la caracterul al 8-lea, pana la al 12-lea
sup() - Returneaza un sir ca putere (superscript)
toFixed(n) - Returneaza sirul numeric rotunjindu-l la o valoare cu 'n' zecimale
toLowerCase() - Converteste un sir in litere mici
toUpperCase() - Converteste un sir in litere mari
In continuare este prezentat un exemplu in care se foloseste proprietatea "length" pentru a

259

DESIGNER PAGINI WEB

afla cate elemente are un sir si metoda "indexOf" prin care verificam daca un sir dat
contine un anumit cuvant specificat. Daca este gasit cuvantul, se returneaza pozitia primei
litere din el, in caz contrar apare mesajul "Cuvantul nu a fost gasit"
<script type="text/javascript">
var str="MarPlo.net - Cursuri, Jocuri si Anime"
document.write(src+"<br />")
document.writeln("Acest sir are "+ str.length + " caractere")
var pos=str.indexOf("Jocuri")
if (pos>=0) {
document.write("Jocuri incepe de la pozitia: ")
document.write(pos + "<br />")
}
else
{
document.write("Cuvantul nu a fost gasit!")
}
</script>
Primului caracter din sir are pozitia 0, al doilea caracter are pozitia 1, si tot asa ....
Dupa ce este adaugat intr-un document HTML, acest script va afisa in pagina urmatorul
rezultat:
MarPlo.net - Cursuri, Jocuri si Anime
Acest sir are 37 caractere Jocuri incepe de la pozitia: 22
2. Obiectul Array (tablou sau matrice)
Obiectul Array (numit si matrice sau tablou de date) se foloseste pentru a stoca mai
multe

valori

intr-un

singur

nume

de

variabila.

Fiecare valoare stocata devine un element al tabloului, acesta are asociat un "numar
index" (sau cheie). Cu ajutorul acestei chei se poate face referire la oricare element din
tablou.
Cu operatorul new se poate crea o "instanta" (incepere) a obiectului Array, ca in
exemplul urmator:

var nume_colegi = new Array(4)

- Unde intre parantezele rotunde este trecut numarul de elemente ale tabloului, aici 4.
Numarul

de

elemente,

cheile,

260

incep

implicit

de

la

0.

DESIGNER PAGINI WEB

Pentru a da valori elementelor din tablou, se scrie numele tabloului urmat de o pereche de
paranteze patrate, in interiorul carora se adauga cheia specifica fiecarui element, apoi
semnul egal si valoarea dorita. Dupa cum puteti vedea in urmatorul exemplu:

nume_colegi[0] = "Cristi"
nume_colegi[1] = "Ion"
nume_colegi[2] = "Simona"
nume_colegi[3] = "Adi"

Sau puteti scrie si astfel:

var nume_colegi = Array('Cristi', 'Ion', 'Simona', 'Adi');

- In cazul acesta cheile se subanteleg si sunt aceleasi ca in prima varianta, incepand cu

0.
Pentru a face referire la un anumit element din tablou si pentru a extrage anumite valori
din Array, se scrie numele tabloului si intre parantezele patrate cheia specifica acelui
element; ca in exemplul urmator:

coleg = nume_colegi[0]
colega = nume_colegi[2]

Astfel, variabila "coleg" va avea valoarea "Cristi" si variabila "colega" valoarea

"Simona".
Pentru a afla numarul de elemente ale unui Array, se foloseste proprietatea "length", ca
in exemplu urmator:

nr_colegi = nume_colegi.length

Obiectul Array are urmatoarele metode:

concat() - Returneaza un tablou rezultat din concatenarea a doua tablouri

join() - Returneaza un tablou format din toate elementele unui tablou concatenat
reverse() slice() -

Returneaza
Returneaza

inversul
parte

specificata

unui
a

tablou
unui

tablou

sort() - Returneaza tabloul ordonat

Urmatorul exemplu foloseste o instructiune "for" care parcurge un tablou (aici tabloul
"nume_colegi"), extrage valoarea fiecarui element si o afiseaza.

261

DESIGNER PAGINI WEB

<script type="text/javascript">
<!-var nume_colegi = new Array();
nume_colegi[0] = "Cristi";
nume_colegi[1] = "Ion";
nume_colegi[2] = "Simona";
nume_colegi[3] = "Adi";
var nr_elemente = nume_colegi.length; // Afla nr. elemente din matrice
document.write("Afiseaza numele fiecarui coleg: <br />");
for (i=0; i<nr_elemente; i++) {
document.write(nume_colegi[i] + "<br />");
}
//-->
</script>
- Am definit variabila "nr_elemente" pentru a afla numarul de elemente din matrice,
pentru a-l folosi cu instructiunea "for". Este utila aceasta metoda deoarece de multe ori
putem lucra cu matrici ale caror nr. de elemente nu-l stim exact. - In pagina HTML va fi
afisat urmatorul rezultat:
Afiseaza numele fiecarui coleg:
Cristi
Ion
Simona
Adi
3. Obiectul Date
Obiectul Date se

foloseste

pentru

lucra

cu

data

zilei

si

timp.

Sunt doua lucruri importante pe care trebuie sa le cunoasteti inainte de a folosi acest
obiect:

1. Data initiala (de referinta) este 1-01-1970, nu puteti sa lucrati cu date anterioare
acesteia.

2. Cand creati un obiect "Date", ora folosita de obiect este aceea de pe calculatorul
client (al vizitatorului).

262

DESIGNER PAGINI WEB

Pentru a crea o instanta a obiectului "Date" se foloseste operatorul new, ca in exemplu
urmator:

var data = new Date();

- Astfel se memoreaza data curenta intr-o variabila, aici cu numele "data".

Dupa

ce

fost

creata

instanta,

se

pot

folosi

metodele

obiectului.

De exemplu, daca se doreste afisat numarul zilei (care e de la 1 la 31) se scrie urmatoarea
comanda (aici e folosita instanta cu numele "data"):

data.getDate()

Se pot crea si altfel obiecte Date, care pot afisa data si ora intr-un mod specificat:

new Date("Month dd, yyyy hh:mm:ss")

new Date("Month dd, yyyy")
new Date(yy,mm,dd,hh,mm,ss)
new Date(yy,mm,dd)
new Date(milliseconds)

- Unde: Month=luna, dd=ziua (cu 2 caractere), y=anul (yy e afisat cu 2 caractere iar yyyy
cu

4),

h=ora,

m=minute,

s=secunde,

milliseconds=milisecunde.

Astfel se pot crea variabile de data pt. fiecare obiect Date de mai sus, ca in exemplu
urmator:

var data=new Date("October 15, 1996 15:16:00")

var data=new Date("October 15, 1996")
var data=new Date(96,10,15,15,16,00)
var data=new Date(96,10,15)
var data=new Date(500)

- Metodele obiectului Date:

Date() - Returneaza un obiect Date

getDate() - Returneaza data (ziua) din luna (intre 1-31)

getDay() - Returneaza ziua dintr-un obiect Date (intre 0-6; 0=Duminica, 1=Luni,
etc.)

getMonth() - Returneaza luna dintr-un obiect Date (intre 0-11. 0=January,

1=February, etc.)

getFullYear() - Returneaza anul dintr-un obiect Date (patru cifre)

getHours() - Returneaza ora dintr-un obiect Date (intre 0-23)

263

DESIGNER PAGINI WEB

getMinutes() - Returneaza minutele dintr-un obiect Date (intre 0-59)

getSeconds() - Returneaza secunda dintr-un obiect Date (intre 0-59)

getMilliseconds() - Returneaza milisecunda dintr-un obiect Date (intre 0-999)

getTime() - Returneaza numarul de milisecunde pana la miezul noptii

getTimezoneOffset() - Returneaza diferenta de timp intre computer si GMT

getUTCDate() - Returneaza data dintr-un obiect Date in (UTC) timp universal

getUTCDay() - Returneaza ziua dintr-un obiect Date in timp universal

getUTCMonth() - Returneaza luna dintr-un obiect Date in timp universal

getUTCFullYear() - Returneaza anul (4 cifre) dintr-un obiect Date in timp

universal

getUTCHours() - Returneaza ora dintr-un obiect Date in timp universal

getUTCMinutes() - Returneaza minutele dintr-un obiect Date in timp universal

getUTCSeconds() - Returneaza secundele dintr-un obiect Date in timp universal

getUTCMilliseconds() - Returneaza millisecundele dintr-un obiect Date in timp

universal

parse() - Returneaza un sir ce are ca valoare numarul de millisecunde pana in

January 01 1970 00:00:00

setDate() - Seteaza luna in un Obiect Date (intre 1-31)

setFullYear() - Seteaza anul in un Obiect Date (four digits)

setHours() - Seteaza ora in un Obiect Date (intre 0-23)

setMilliseconds() - Seteaza millisecundele in un Obiect Date (intre 0-999)

setMinutes() - Seteaza minutele in un Obiect Date (intre 0-59)

setMonth() - Seteaza luna in un Obiect Date (intre 0-11. 0=January, 1=February)

setSeconds() - Seteaza secunda in un Obiect Date (intre 0-59)

setTime() - Seteaza millisecundele dupa 1/1-1970

setUTCDate() - Seteaza data in un Obiect Date, in timp universal (intre 1-31)

setUTCMonth() - Seteaza luna in un Obiect Date, in timp universal (intre 0-11.

0=January, 1=February)

setUTCFullYear() - Seteaza anul in un Obiect Date, in timp universal (four

digits)

setUTCHour() - Seteaza ora in un Obiect Date, in timp universal (intre 0-23)

264

DESIGNER PAGINI WEB

setUTCMinutes() - Seteaza minutele in un Obiect Date, in timp universal (intre

0-59)

setUTCSeconds() - Seteaza secundele in un Obiect Date, in timp universal (intre

0-59)

setUTCMilliseconds() - Seteaza millisecundele in un Obiect Date, in timp

universal (intre 0-999)

toLocaleString() - Converteste un Obiect Date la un sir, ce contine ora curenta

toString() - Converteste un Obiect Date la un sir

Pentru a intelege mai bine obiectul Date si modul de lucru cu metodele lui, studiati si
urmatorul exemplu:
<script type="text/javascript">
<!-var d = new Date()
document.write("Afiseaza data curenta a zilei: <br /> ")
document.write(d.getDate())
document.write(".")
document.write(d.getMonth() + 1)
document.write(".")
document.write(d.getFullYear())
//-->
</script>
Adaugat intr-un document HTML, in sectiunea BODY, acest script va afisa:
Afiseaza

data

curenta

zilei:

24.5.2011
4. Obiectul Math
Acest

obiect

include

constante

matematice

si

functii.

Nu este nevoie sa fie creat (instantat) un obiect Math inainte de a fi folosit.

Daca, de exemplu dorim sa obtinem un numar aleator intre 0 si 1, scriem comanda:

nr_aleator = Math.random()

- Proprietatile obiectului Math (sunt o lista de constante matematice. Atentie! se scriu cu

litera mare):

265

DESIGNER PAGINI WEB

E - Returneaza constanta lui Euler (2.7182.......)

LN2 - Returneaza logaritm natural din 2

LN10 - Returneaza logaritm natural din 10

LOG2E - Returneaza logaritm in baza 2 din E

LOG10E - Returneaza logaritm in baza10 din E

PI - Returneaza PI

SQRT1_2 - Returneaza radical din 0.5

SQRT2 - Returneaza radical din 2

- Metodele obiectului Math:

abs(x) - Returneaza valoarea absoluta din x

acos(x) - Returneaza arccosinus din x

asin(x) - Returneaza arcsinus din x

atan(x) - Returneaza arctangenta din x

atan2(y,x) - Returneaza unghiul dintre axa si un punct (x,y)

ceil(x) - Returneaza cel mai apropiat intreg mai mare sau egal cu x

cos(x) - Returneaza cosinus din x

exp(x) - Returneaza valoarea lui E la puterea x

floor(x) - Returneaza cel mai apropiat intreg mai mic sau egal cu x

log(x) - Returneaza log natural din x

max(x,y) - Returneaza maximul dintre x si y

min(x,y) - Returneaza minimul dintre x si y

pow(x,y) - Returneaza valoare a lui x la puterea y

random() - Returneaza un numar aleator intre 0 si 1

round(x) - Rotunjeste pe x la cel mai apropiat intreg

sin(x) - Returneaza sinus din x

sqrt(x) - Returneaza radical din x

tan(x) - Returneaza tangenta din x

Iata si un exemplu practic, urmatorul script rotunjeste o valoare (aici 8.35) la cel mai
apropiat intreg:

266

DESIGNER PAGINI WEB

<script type="text/javascript">
document.write("8.35 rotunjit este: " + Math.round(8.35));
</script>
Dupa ce este adaugat intr-un document HTML, in sectiunea BODY, acest script va afisa:
8.35 rotunjit este: 8
5. Obiecte de tip Global
Obiectele de tip Global grupeaza proprietatile si metodele de nivel cel mai inalt, fara un
obiect

parinte,

cum

sunt

functiile.

Obiectul Global are trei proprietati:

Infinity - cuvant-cheie care reprezinta plus sau minus infinit

NaN - reprezinta un obiect null, care nu are vreo valoare

undefined - Indica daca o variabila a fost sau nu definita

Metodele acestui obiect (care pot fi considerate si functii JavaScript) sunt:

escape() - Intoarce un obiect sir in care toate caracterele non alfa-numerice sunt
transformate in echivalentele lor numerice

eval() - Accepta un sir de instructiuni Java Script si il evalueaza ca fiind cod sursa

isFinite() - determina daca o variabila are limite finite

isNaN() - determina daca o variabila este sau nu un numar.

Number() - Converteste valoarea unui obiect in numar

parseFloat() - transforma un sir intr-un numar de tip float (cu virgula)

parseInt() - transforma un sir intr-un numar intreg

string() - Converteste valoarea unui obiect in string (de tip sir)

unescape() - ia o valoare hexazecimala si intoarce echivalentul sau in ISOLatin-1

ASCII

Pentru a intelege mai bine, studiati urmatorul exemplu. Aici este folosita de doua ori
metoda "eval()", acesta transforma si interpreteaza argumentul primit in cod JavaScript.
<script type="text/javascript">
function calculeaza(form) {
form.rezultat.value = eval(form.expresie.value);
}
eval("alert('Bine ati venit pe site!')");
</script>
<form>

267

DESIGNER PAGINI WEB

<p>Introduceti o expresie matematica (adunare, scadere, inmultire, impartire), de
exemplu (7*8 sau 3+8/2): </p>
<input type="text" name="expresie" size="35" >
<input type="button" name="calc" value="Calculare" onclick="calculeaza(this.form)">
<br>
Rezultatul este:
<input type="text" name="rezultat" size="18">
</form>
Acest cod afiseaza la inceput o fereastra Alert apoi in browser va fi afisat urmatorul
rezultat:

Dupa apasarea butonului "Calculare", prin "onclick" este accestata functia "calculeaza()".
Scriptul JavaScript din HEAD, transfera in campul cu nmele "rezultat", din FORM,
valoarea obtinuta prin evaluarea expresiei adaugate in campul "expresie", calcularea
expresiei fiind posibila datorita folosirii metodei "eval()".
VALIDAREA FORMULARELOR
Pentru a face validarea formularelor trebuie sa determinam ce tasta a fost apasata in
interiorul obiectului respectiv.
Pentru asta se foloseste keycode care indica codul tastei apasate. Puteti sa vedeti aceste
coduri in exemplul de mai jos.
<script type="text/javascript">
function aratacod(e){
var unicode=e.keyCode? e.keyCode : e.charCode
alert("codul tastei este:" + unicode)
}
</script>
<form>
<input type="text" size="2" maxlength="1"
onkeyup="aratacod(event); this.select()" />
</form>

268

DESIGNER PAGINI WEB

EXEMPLU
Aceste informatii sunt suficiente pentru a da acum niste exemple care pot fi folosite in
aplicatii reale
Validare comentariu in functie de numarul de caractere
<script type="text/javascript">
function limitarelungime(obj, length){
var lungime=length
if (obj.value.length>lungime)
obj.value=obj.value.substring(0, lungime)
}
</script>
introduceti textul aici (lungimea maxima e de 20 de caractere):
<form>
<textarea onkeyup="return limitarelungime(this, 20)"
style="width: 300px; height: 40px"></textarea>
</form>
EXEMPLU
Validare numar de telefon
Vom face aceasta validare folosindu-ne de cea de mai sus. Vom limita numarul maxim de
caractere la 10 si nu vom permite decat apasarea tastelor de la 0 la 9. Pentru a impune
aceasta restrictie ne vom folosi de codurile caracterelor.
<script type="text/javascript">
function numere(e){
var unicode=e.charCode? e.charCode : e.keyCode
if (unicode!=8){ //daca tasta apasata nu e backspace
if (unicode<48||unicode>57) //si nu e nici numar
return false //nu se poate apasa

269

DESIGNER PAGINI WEB

}
}
function limitarelungime(obj, length){
var lungime=length
if (obj.value.length>lungime)
obj.value=obj.value.substring(0, lungime)
}
</script>
introduceti numarul de telefon (lungimea maxima e de 10 de
caractere):
<form>
<textarea onkeypress="return numere(event)"
onkeyup="return limitarelungime(this, 10)" style="width:
300px; height: 25px"></textarea>
</form>

Validare E-mail
Pentru aceasta validare vom folosi doua functii javascript: evalid() si everif().
Prima functie verifica daca s-a scris ceva in campul pentru email si nu cumva a fost lasat
gol.
A doua functie verifica daca textul introdus are formatul tipic unei adrese de email: daca
contine @ , daca are cel putin un punct, daca punctul nu este cumva plasat imediat
inaintea lui @ sau imediat dupa el si daca nu cumva contine mai mult de doua caractere
@.
<script language = "Javascript">
function everif(str) {
var at="@"
var punct="."
var lat=str.indexOf(at)
var lstr=str.length
var lpunct=str.indexOf(punct)
if (str.indexOf(at)==-1){

270

DESIGNER PAGINI WEB

alert("E-mail invalid. Introduceti o adresa reala!!!")
return false
}
if (str.indexOf(at)==-1 || str.indexOf(at)==0 ||
str.indexOf(at)==lstr){
alert("E-mail invalid. Introduceti o adresa reala!!!")
return false
}
if (str.indexOf(punct)==-1 || str.indexOf(punct)==0 ||
str.indexOf(punct)==lstr){
alert("E-mail invalid. Introduceti o adresa reala!!!")
return false
}
if (str.indexOf(at,(lat+1))!=-1){
alert("E-mail invalid. Introduceti o adresa reala!!!")
return false
}
if (str.substring(lat-1,lat)==punct ||
str.substring(lat+1,lat+2)==punct){
alert("E-mail invalid. Introduceti o adresa reala!!!")
return false
}
if (str.indexOf(punct,(lat+2))==-1){
alert("E-mail invalid. Introduceti o adresa reala!!!")
return false
}
if (str.indexOf(" ")!=-1){
alert("E-mail invalid. Introduceti o adresa reala!!!")
return false
}
return true
}

271

DESIGNER PAGINI WEB

function evalid(){
var emailID=document.eFormular.txtEmail
if ((emailID.value==null)||(emailID.value=="")){
alert("Va rog sa introduceti o adresa de email")
emailID.focus()
return false
}
if (everif(emailID.value)==false){
emailID.value=""
emailID.focus()
return false
}
return true
}
</script>
<form name="eFormular" method="post" action="#"
onSubmit="return evalid()">
<p>Enter an Email Address :
<input type="text" name="txtEmail">
</p>
<p>
<input type="submit" name="Submit" value="Submit">
</p>
</form>
EXEMPLU
Validare

Butoane

Radio si Checkbox

In caz ca sunt mai multe variante de raspuns la o intrebare si doriti sa se poata alege doar
una este suficient treceti nume identice butoanelor radio care sunt cuprinse in acea

272

DESIGNER PAGINI WEB

intrebare. Vom folosi javascript pentru a ne asigura ca formularul nu va fi trimis fara sa
fie bifat un raspuns la fiecare intrebare.
Introducem functia check_buttons care va indica spre fisierul care sa preia datele din
formular numai in cazul in care s-a raspuns la fiecare rubrica. Vom verifica asta cu IF,
parcurgand inainte fiecare buton ca pe un array cu FOR.
<script language="Javascript">
function check_buttons()
{
for(i=0; i<4; i++)
for (j=0; j<4; j++)
{
if(document.form1.intr1[i].checked==true) {
if(document.form1.intr2[j].checked==true) {
document.form1.action="rezultat.php"; } } }
return; }
</script>
<form name="form1" method="post"
onSubmit="javascript:check_buttons();" action="">
1. Cate limbaje de programare cunosti?
<p>
<input type="radio" name="intr1" value="a" >
a. Nici unul<br>
<input type="radio" name="intr1" value="b" >
b. 1<br>
<input type="radio" name="intr1" value="c" >
c. 2<br>
<input type="radio" name="intr1" value="d" >
d. 3<br>
</p>
2. De cat timp esti interesat de Web Design?
<p>

273

DESIGNER PAGINI WEB

<input type="radio" name="intr2" value="a">
a. De cand m-am nascut<br>
<input type="radio" name="intr2" value="b">
b. De mai mult de 10 ani<br>
<input type="radio" name="intr2" value="c">
c. De mai putin de 10 ani<br>
<input type="radio" name="intr2" value="d">
d. De Ieri<br>
</p>
<input type="submit" value="Trimite formularul">
</form>

274

DESIGNER PAGINI WEB

PARTEA VII
VALIDAREA DATELOR

275

DESIGNER PAGINI WEB

Prin validare intelegem operatia de verificare a corectitudinii datelor. O data se considera

corecta daca respecta o serie de conditii aritmetice sau logice prestabilite. Validarea
datelor presupune precizarea urmatoarelor elemente:
Conditiile de verificare
Actiunile care trebuie executate cand data este corecta sau incorecta
Modul de semnalare a erorilor si structura mesajelor
Modul de corectie a erorilor
Modul de reintroducere a articolelor dupa corectia acestora
Validarea se poate face la nivel de camp (un camp respecta propriile sale conditii), la
nivel de articol (respectarea unor relatii intre campurile aceluiasi articol), la nivelul mai
multor articole (respectarea unor relatii intre campurile unor articole diferite,
completitudinea pe pachete de documente, corectitudinea unor totaluri pe pachete) sau la
nivel de fisier (completitudine, corectitudinea unor totaluri pe fisier).
Cele mai importante validari la nivel de campuri si la nivel de articol se refera la:

Existenta

Natura

Lungime

Semn

Apartenenta la o multime sau lista de valori

Respectarea unor corelatii aritmetice sau logice intre campuri

Daca o data nu indeplineste toate conditiile stabilite, se considera eroare si se solicita

reintroducerea ei. Introducerea se poate repeta, fie pana se obtine o data corecta, fie pana
cand se depaseste un numar prestabilit de reintroduceri.
Cand un camp este corect, se trece la inroducerea si validarea urmatorului camp. Cand
articolul este corect, se scrie in suportul extern si se trece la urmatorul articol.
Daca esti un programator atunci stii ca una dintre cele mai importante aspecte la un script
facut este validarea datelor introduse de utilizator. Unul dintre principiile pe care eu

276

DESIGNER PAGINI WEB

personal merg este urmatorul: Niciodata sa nu ai incredere in datele introduse de un
vizitator.
In PHP poti sa validezi datele destul de simplu. Urmatoarele functii te vor juta in privinta
aceasta:
Validarea unui link introdus:
<pre>$url

"http://<a

title="dexblog.ro"

1 href="http://www.dexblog.ro/category/diverse/dexblog-ro/">dexblog.ro</a>/";
2 if

(preg_match('/^(http|https|ftp)://([A-Z0-9][A-Z0-9_-]*(?:.[A-Z0-9][A-Z0-9_-]*)+):?

3 (d+)?/?/i', $url)) {
4

echo "Link ok.";

5 } else {
6

echo "link gresit";

}</pre>

Validarea unui email:

01
02
03
04
05
06
07
08
09
10
11

function email_check($field)
{
if(!preg_match('/^[a-z0-9&'.-_+]+@[a-z0-9-]+.([a-z0-9-]+.)*?[az]+$/is', $field))
{
return false;
}
else
{
return true;
}

}
Internetul este o sursa imensa de funcii care te poate ajuta sa gse ti func ii pentru
validare si pentru tot ce doreti tu.
n toate aplicaiile web i nu numai se pune problema validrii datelor introduse de
utilizator. Cu alte cuvinte, trebuie s ne asigurm c utilizatorul site-ului nostru introduce
numai date corecte n csuele de text care i sunt puse la dispoziie. De exemplu, dac pe

277

DESIGNER PAGINI WEB

o pagin web se cere utilizatorului introducerea vrstei sale i pentru asta i punem la
dispoziie o csu de text, va fi obligatoriu s ne asigurm c n acea csu se pot
introduce numai cifre i c numrul rezultat este ncadrat ntr-un anumit interval. Sau, un
alt exemplu, este introducerea unei adrese de email valid din punct de vedere al
formatului.ASP.NET vine cu o serie de controale gata create n scopul validrii
datelor. Aceste controale sunt de fapt clase care provin din aceeai ierarhie, avnd la baz
o clas cu proprieti comune tuturor validatoarelor.

Proprieti comune
ControlToValidate: este proprietatea unui control de validare care arat spre controlul
(csua de text) care trebuie s fie validat.
ErrorMessage: reprezint textul care este afiat n pagina atunci cnd datele din controlul
de validat nu corespund regulii alese.
EnableClientSideScript: este o proprietate boolean care specific locul n carese
execut codul de validare (pe client sau pe server).
Alte proprieti, specifice tipului de validator.

Validatoare
Required

Field

Validator.

Verific

dac

csua

de

text

asociat

prin

proprietateaControlToValidate s-a introdus text. Util pentru formularele n care anumite

datesunt obligatorii.
Range Validator. Verific dac informaia introdus n csua de text asociatface parte
dintr-un anumit interval, specificat prin tipul datei introduse (prorietatea Type) i
Minimum Value respectiv Maximum Value
Regular Expression Validator. Verific dac informaia din csua de text asociateste
conform unei expresii regulate specificate. Este util pentru validarea unor informa ii de
genul adreselor de email, numerelor de telefon, etc n general informaii care trebuie s
respecte un anumit format. Trebuie setat proprietatea ValidationExpression n care se
pot alege cteva expresii uzuale gata definite.
Compare Validator. Compar datele introduse n csua de text asociat cu o valoare
prestabilit (Value To Compare), n funcie de operatorul ales (proprietatea Operator) i
de tipul de date care se ateapt (proprietatea Type).

278

DESIGNER PAGINI WEB

Pe

lng

validatoarele

prezentate

mai

sus,

programatorul

poate

crea

validatoarecustomizate, care s verifice datele introduse de utilizator conform unor reguli

proprii.

279

DESIGNER PAGINI WEB

PARTEA VIII
ASIGURAREA

SECURITATII

DATELOR SI A DOCUMENTELOR

280

DESIGNER PAGINI WEB

SECURITATEA INFORMAIEI AVANTAJELE

SECURIZRII DATELOR
Securitatea datelor devine un element cheie atunci cnd se lucreaz cu date
importante. Pentru ca acestea s nu devin publice, se recomand existena unor proceduri
de raportare.
Politici de securitate:
Restricionarea accesului fizic la calculator;
Adoptarea unei politici de parolare corespunztoare;
Stabilirea drepturile pe care le are fiecare utilizator;
Criptarea fiierelor la care se lucreaz;
Folosirea programelor de securitate tip firewall (sistem de securitate
format dintr-o combinaie hardware i software care protejeaz o reea
mpotriva accesului neautorizat).

Criptarea
sau codificarea datelor este procesul prin care informaia devine greu de citit sau
descifrat. Scopul criptrii este acela de a nu permite persoanelor neautorizate accesul la
anumite date n timpul transmiterii lor sau atunci cnd sunt pstrate pe diverse suporturi
magnetice. Pentru decodificarea datelor este necesar o cheie de decodificare.
Diferite implicaii rezultate n urma pierderii laptop-ului, a dispozitivelor PDA sau a
telefonului mobil. O alt situaie n care se pot pierde date importante este furtul sau
pierderea laptop-ului, Palm-ului sau telefonului mobil.
Astfel se pot pierde numere importante de telefon, agenda sau adresele unor persoane sau
chiar fiiere foarte importante. Se recomand s se fac copii ale acestor informaii i pe
alte suporturi de memorare. Copiile trebuie pstrate n condiii adecvate, astfel nct
suporturile informaiilor s nu fie degradate din punct de vedere fizic sau logic.
Importana realizrii unui back-up (copie de siguran)
Pentru a evita pierderea datelor din anumite motive (tergeri accidentale, pan de
curent, defectarea calculatorului, formatarea hard-disk-lui, virusri etc.) se recomand
efectuarea operaiei de back-up. Aceast operaie se poate realiza periodic i const n

281

DESIGNER PAGINI WEB

copierea datelor de pe un suport de memorare pe alte suporturi de memorie extern. (CD,
DVD, dischet, memory stick, alte calculatoare din reea etc.).

Virui
Viruii informatici un tip de program pentru calculator care este creat cu scopul
declarat de a distruge datele sau echipamentele calculatorului. Viruii sunt programe de
foarte mic dimensiune, de regul invizibili cu mijloace uzuale ale sistemului, care se
gsesc pe calculator fie ca un fiier executabil, fie ataai unor programe, caz n care se
numesc parazii. Ei sunt capabili s se infiltreze n zone ce rmn ascunse
utilizatorului obinuit, s produc modificri distructive asupra datelor ce se afl pe
discuri, asupra altor componente ale calculatorului, i s se reproduc.
n prezent exist un numr foarte mare de virui. Printre cei mai importani amintim:
-

vierme (worm) - nu solicit un program ,,gazd fiind greu de descoperit. El se

reproduce prin autocopiere de la un calculator la altul prin intermediul reelei.

cal troian - nu are nevoie de ,,gazd i nu prolifereaz. Un ,,cal troian se va

ascunde ntr-un program cunoscut permind accesul i controlul deplin la
calculatorul infectat. La instalare, nu creeaz suspiciuni utilizatorului i nici nu
atrage atenia. Acest tip de virus atac i distruge datele de pe hard-disk.

pcleli (hoax) - sunt mesaje trimise prin e-mail care conin avertizri false despre
un virus existent i care cer s fie avertizate toate persoanele cunoscute. Uneori,
aceste avertizri conin fiiere ataate menite, chipurile, s stopeze sau s elimine
virusul. Retrimiterea mesajului la alte destinaii face ca virusul s se multiplice.

macro se va folosi de facilitatea de a crea macrocomenzi oferit de unele

programe cum ar fi Microsoft Office i Lotus Ami Pro. Virui de macro infecteaz
fiierele de tip document i se rspndesc cu ajutorul documentelor transmise ntre
utilizatori.

Modaliti de transmitere a viruilor

Primele computere puteau transfera programe i implicit virui doar prin
intermediul dischetelor; de aceea amploarea fenomenului era restrns din punct de
vedere geografic. Odat cu apariia reelelor locale (LAN), apoi a reelelor regionale
(WAN) i astzi a reelei globale (Internet), rspndirea viruilor se face foarte uor.

282

DESIGNER PAGINI WEB

Viruii pot ptrunde n calculator prin intermediul programelor, imaginilor
descrcate de pe Internet (operaie denumit download), pot fi primii pe mail, sau pot fi
adui cu o dischet sau un CD.

Necesitatea scanrii calculatorului mpotriva viruilor

Pentru a evita anumii virui sau pentru a scpa de acetia va trebui:
s fie instalat un program antivirus;
s se scaneze toate fiierele cu regularitate;
s se actualizeze regulat programul antivirus (la aproximativ 1 lun);
s se scaneze periodic fiierele din calculator i de pe diverse suporturi de
stocare (dischete, CD, DVD-uri ) nainte de a fi folosite;
s nu se foloseasc dischete provenite din surse nesigure;
s se foloseasc funcia ,,macro disable (dezactivare macrocomenzi)
disponibil n cele mai moderne aplicaii.

Arhivarea fiierelor
Arhivarea reprezint operaia prin care dimensiunile unui fiier sunt reduse
pentru a ocupa mai puin spaiu pe un suport de memorare. Cele mai utilizate aplicaii
care permit arhivarea fiierelor sunt Winzip i Winrar.

Arhivarea unui fiier folosind aplicaia Winrar

La deschiderea aplicaiei din Start- Programs va aprea fereastra programului
Winrar. Pentru a arhiva un fiier, acesta trebuie selectat apoi se va selecta butonul Add
(Adugare). Selecia acestui buton va duce la apariia unei ferestre n care se pot stabili
diferite opiuni pentru arhiva care se va crea: numele ei i locul de salvare, metoda de
compresie (normal, rapid, maxim etc.).
Dup selectarea tuturor opiunilor se va apsa butonul OK pentru crearea noii
arhive. Extensia fiierelor create cu ajutorul aplicaiei Winrar este .rar.
Pentru a putea utiliza un fiier arhivat, acesta trebuie dezarhivat. Aceast operaie
se execut tot cu ajutorul aplicaiei de arhivare.
Dup deschiderea aplicaiei Winrar, din fereastr se va selecta fiierul arhiv i se
va folosi butonul Extract to (Extragere) pentru a extrage fiierul din arhiv. n fereastra
care va aprea va trebui s se stabileasc locul unde va fi salvat fiierul care se extrage
din arhiv.

283

DESIGNER PAGINI WEB

Aplicaia Winzip este o alt aplicaie care permite arhivarea fiierelor i care
funcioneaz asemntor cu Winrar.
Extensia fiierelor create cu ajutorul aplicaiei Winrar este .zip.

284

DESIGNER PAGINI WEB

PARTEA IX
UTILIZAREA

DOCUMENTELOR

PERIFERICE SI SPECIFICE

285

DESIGNER PAGINI WEB

ASPECTE GENERALE PRIVIND PRELUCRAREA

AUTOMAT A DATELOR
Orice domeniu de activitate cere o cunoatere rapid i complex a realitii, n scopul
lurii unor decizii operative, oportune i fundamentate pe cerinele legilor obiective ce
acioneaz n societate, se impune folosirea pe scar larg a mijloacelor informatice.
Aceast cerin a izvort din sporirea nsemnat a volumului de informaii, fapt care a
condus la scderea operativitii n luarea deciziilor. Orice decizie are la baz informaii
ce se obin din prelucrarea unor date culese despre obiectul activitii respective.

Date i informaii:
datele privesc evenimente primare, colectate din diverse locuri, nedefinite sau
neorganizate ntr-o form care s stea la baza lurii deciziilor;
informaiile - sunt mesaje obinute prin prelucrarea datelor; aceste mesaje trebuie
s fie concise, actuale completate i clare, astfel nct s rspund cerinelor
informaionale n scopul crora au fost prelucrate datele.
Prelucrarea datelor (numit i procesare)
Prelucrarea datelor se poate realiza manual sau cu ajutorul echipamentelor electronice de
calcul. Prelucrarea automat a datelor presupune att resurse materiale (echipamente
electronice de calcul), ct i umane (operatori, programatori), organizate ntr-o form care
s permit funcionarea acestora ca un ansamblu unitar; aceast form poart denumirea
de sistem de prelucrare automat a datelor (SPAD).
Prelucrarea datelor presupune totalitatea transformrilor, ca form i coninut a datelor.
Dintre transformrile cele mai importante se pot enumera:
1. Generarea: reprezint operaia prin care se obin date primare (sursa);

286

DESIGNER PAGINI WEB

2. Culegerea i pregtirea: Forma iniiala a datelor difer de forma sub care acestea intr
n prelucrare. Pregtirea datelor n vederea prelucrrii lor, presupune etapele:
1. selectarea dintre datele primare se aleg datele care sunt necesare pentru
generarea anumitor informaii;
2. codificarea trecerea datelor ntr-o form adecvat prelucrrii (de
exemplu, utilizarea numerelor pentru a desemna lunile anului);
3. conversia transferarea datelor de pe un suport pe altul ;
4. copierea, multiplicarea reproducerea pe un mediu identic a datelor,
pstrndu-se forma, coninutul i semnificaia acestora;
5. verificarea analiza corectitudinii datelor, ca form i coninut, urmrind
eliminarea posibilelor alterri datorate culegerii, pregtirii sau transmiterii;
3. Prelucrarea datelor n scopul obinerii diferitelor rezultate se face cu ajutorul
funciilor:
sortarea aranjarea datelor ntr-o anumit ordine, conform unor criterii
bine precizate, pentru ca prelucrarea sa fie cat mai eficienta i prezentarea
rezultatelor cat mai atractiv;
clasificarea gruparea datelor dup caracteristici comune, fr stabilirea
unor anumite prioriti n cadrul grupei ;
compararea stabilirea asemnrilor i/sau deosebirilor dintre dou sau
mai multe date;
analiza examinarea unui grup de date, urmrindu-se condiiile
ndeplinirii unei cerine (sau mai multor cerine), de ctre fiecare dat a
grupului, n parte;
sintetizarea stabilirea unor caracteristici eseniale, generale, pe care le au
datele constituente ale unui grup, formndu-se o nou structur ce
cuprinde acele caracteristici comune;
calcularea operaii aritmetice sau logice efectuate asupra uneia sau mai
multor date simultan.
4. Furnizarea datelor. Pe parcursul prelucrrii, forma n care sunt datele, de cele mai
multe ori nu corespunde cerinelor celui care ateapt rezultatele (beneficiarul). Se

287

DESIGNER PAGINI WEB

impune deci necesitatea furnizrii rezultatelor ntr-o form clar, astfel nct s nu existe
probleme de nelegere sau de interpretare eronat a lor.
5. Pstrarea datelor se face n colecii de date alctuite dup reguli bine definite, n
vederea unor prelucrri ulterioare. Asupra unei astfel de colecii se poate aciona prin una
dintre funciile:
validarea datelor precizarea modului n care o dat poate fi introdus n
colecie;
regsire- cutarea i localizarea unei date n cadrul coleciei;
modificare- transformarea unei date existente n colecie prin schimbarea
unor atribute;
distrugere- eliminarea din colecie a unor date, cu precizarea condiiilor n
care se poate face acest lucru.
6. Transmiterea (comunicarea) datelor se refer la modul n care datele trec de la o
etapa la alta pe parcursul prelucrrii. Orice activitate, n orice domeniu, se desfoar pe
baza unui flux informaional.
Totalitatea fluxurilor informaionale, cu o anumit organizare, care asigur legtura dintre
conducere (sistemul decizional) i execuie (sistemul de execuie) se numete sistem
informaional.
Dac desfurarea activitii presupune, n mod special, utilizarea echipamentele
electronice, sistemul informaional se numete sistem informatic.
Este evident ca cele dou sisteme nu se pot identifica, sistemul informatic fiind parte
component a sistemului informaional, ns creterea permanent a nivelului de
automatizare a activitii conduce de la accentuarea importanei sistemului informatic.
n structura unui sistem informatic, al crui element principal este calculatorul
electronic sau sistemul de calcul, se identifica urmtoarele componente:
cadrul organizatoric al societii i datele vehiculate;
resursele umane, pe de o parte analitii sistemului informatic i proiectanii
sistemului informatic, pe de alta parte beneficiarul sistemului informatic i
utilizatorii acestuia;
metodele i tehnicile de proiectare;

288

DESIGNER PAGINI WEB

echipamentele electronice de calcul;
sistemul de programe utilizat pentru realizarea obiectelor sistemului
informatic i pentru utilizarea eficienta i corect a echipamentelor.
Omiterea uneia dintre aceste componente face imposibil funcionarea respectivului
sistem informatic.
Din punct de vedere structural, pornind de la diferenierea modulelor fizice i logice,
calculatorul electronic (el nsui un sistem informatic)are dou componente:
hardware, (pe scurt hard): ansamblul elementelor fizice i tehnice cu ajutorul
crora datele se pot culege, verific, transmite, stoca i prelucra, suporturile de
memorare a datelor precum i echipamentele de redare a rezultatelor reprezint
componentele ce pot fi practic atinse;
software, (pe scurt soft) : ansamblul programelor, procedurilor, rutinelor care
controleaz funcionarea corecta i eficienta a elementelor hard; exist sub forma
de concepte i simboluri, nu are substana.
Tehnologia informaiei (TI) - reprezint normele i procedeele de colectare, memorare,
transmitere i prelucrare a datelor, n vederea obinerii rezultatelor scontate, cu ajutorul
calculatorului electronic.
Structura unui calculator personal

Unitatea Central (UC), alctuit din:

Unitatea de memorie intern (UM)
* memorie ROM;

289

DESIGNER PAGINI WEB

* memorie RAM;
Unitatea Central de Prelucrare (UCP) ce este compus din:
* Unitatea de Comanda i Control (UCC):
* Unitatea Aritmetica i Logica (UAL);
Sistemul de Intrare/Ieire (SI/O), care este alctuit din :
Medii de stocare;
Dispozitive periferice;
Dispozitive pentru accesarea mediilor de stocare;
Dispozitive pentru interfaa cu utilizatorul:
* Dispozitive periferice de intrare (DP/I);
* Dispozitive periferice de ieire out- (DP/O):
Interfee;
Memoria externa (ME);
Magistrale de transmitere a comenzilor de control, informaiilor i instruciunilor.
Unitatea Central (UC) este alctuit din Unitatea Central de Prelucrare i
Unitatea de Memorie Intern.
Unitatea de Memorie (UM) sau memoria intern (principal) este
componenta

sistemului

de

calcul

destinat

pstrrii

datelor

instruciunilor programelor n locaii bine definite prin adrese. Este

format dintr-un numr mare de celule de memorie, fiecare celul fiind un
circuit care poate stoca un bit de informaie.
Din punct de vedere al volatilitii, memoria este de dou tipuri:
ROM (Read Only Memory) nu i pierde coninutul la oprirea
calculatorului, nu poate fi scris de ctre utilizator (este inscripionat de
ctre productor cu ajutorul unei aparaturi speciale) i este folosit pentru
stocarea informaiilor despre hardware.
RAM (Random Access Memory) este o memorie volatil (se pierde la
oprirea calculatorului), poate fi att citit ct i modificat i este folosit

290

DESIGNER PAGINI WEB

pentru stocarea programelor i datelor, fiind considerat principala
memorie de lucru a calculatorului;
Unitatea Centrala de Prelucrare (UCP), este implementat cu ajutorul
microprocesorului, elementul de baz al sistemului de calcul. (La
microcalculatoare este numit procesor).
Unitatea de Comand i Control (UCC) primete instruciunile de la
memorie, le interpreteaz i, corespunztor, emite comenzi ctre UAL i
UM, respectiv comenzi de transfer ctre SI/O i memoria extern.
Unitatea Aritmetic i Logic (UAL) are rolul de a executa operaii
aritmetice i logice cu date furnizate de memorie i de a depune n
memorie rezultatul obinut.
Sistemul de Intrare /Ieire (SI/O), este alctuit din :
mediile de stocare suportul fizic pe care se stocheaz informaia: harddisk, CD, floppy-disk, disc ZIP, DVD, card, memory stick etc. Constituie o
memorie suplimentara.
dispozitive periferice, mprite la rndul lor n:
* dispozitivele periferice pentru accesarea mediilor de stocare: unitatea floppy,
unitatea CD-Rom, unitatea DVD, unitatea ZIP. Dup poziia lor n calculator, acestea pot
fi interne sau externe. Cele mai multe se gsesc n ambele variante, diferena dintre ele
fiind interfaa i preul, cele externe avnd sursa de alimentare i carcasa proprie, deci pre
mai mare.
* dispozitivele de interfa cu utilizatorul - reprezint totalitatea dispozitivelor
cu ajutorul crora este posibil introducerea datelor n prelucrare precum i furnizarea
rezultatelor obinute.
Pot fi:
-

dispozitive periferice de intrare (DP/I) tastatura, mouse, joystick, microfon,

scaner, camera video;

291

DESIGNER PAGINI WEB

-

dispozitive periferice de ieire (DP/O) monitor, imprimanta, boxe;

dispozitive periferice de intrare/ieire (I/O) touch screen, modem.

Interfaa componenta ce asigur o conexiune ntre dou elemente pentru a

putea lucra mpreun. Interfeele pot fi de mai multe tipuri:
* paralele transmit simultan 8 bii (un byte); folosit n special pentru conectarea
imprimantei;
* seriale interfee universale, n care biii unui byte se transmit pe rnd unul cate unul;
la aceasta se pot conecta modemul sau un alt calculator.
* USB (Universal Serial Bus) permit conectarea anumitor echipamente periferice.
Memoria extern (ME) sau memoria secundar este utilizat n cazul n care
prelucrrile depesc capacitatea memoriei interne sau cnd se dorete arhivarea
datelor i programelor. Este strns legat de mediile de stocare din sistemul de
intrare/ieire, referindu-se de fapt la aceleai componente, privite dintr-un punct
de vedere diferit.
Magistrale de transmitere a comenzilor de control, informaiilor i
instruciunilor dispozitive ce asigur funcionarea ntregului ansamblu,
stabilind legtura funcional ntre componente. Sunt sisteme de conductoare de
semnal care transport o anumit cantitate de date mai repede sau mai ncet, n
funcie de limea magistralei.
Tipuri de calculatoare
Sistemele de calcul se difereniaz dup mrime, posibiliti de procesare, pre i viteza
de operare. Se consider astfel c exist patru categorii de sisteme de calcul:

292

DESIGNER PAGINI WEB

Microcalculatoare sunt calculatoare cunoscute sub denumirea de
calculatoare personale (Personal Computer PC). Acestea au
cunoscut cea mai rapid dezvoltare i diversificare odat cu apariia
chipului; (cip)-circuit integrat obinut prin ncapsularea a milioane de
tranzistore ntr-un nveli ceramic, pe o singur pastil de siliciu.
Construcia unui PC se bazeaz pe microprocesor, un cip care conine poriuni din
unitatea

central

de

prelucrare

(UCP).

Acesta

este

considerat

creierul

microcalculatorului.
Sunt de remarcat urmtoarele caracteristici ale PC-urilor:
sunt accesibile din punct de vedere al preului;
au dimensiuni reduse i unele tipuri pot fi portabile;
utilizatorii pot nva foarte uor operarea acestora;
pot fi folosite n orice domeniu;
lucreaz n reea putnd realiza schimburi de date;
Minicalculatoare - au fost create pentru executarea unor funcii specializate aplicaii
multiutilizator, maini cu control numeric, automatizri industriale, transmisii de date
ntre sisteme dispersate geografic. Ele sunt calculatoare de dimensiuni medii, compuse
din module structurale cu funcii precise, sunt uor de instalat i utilizat, se pot conecta la
reeaua electric fr restricii. Au putere i capacitate de stocare mai mare, UCP complex,
sistemul de intrare /ieire foarte dezvoltat n sensul comunicrii prin reea de periferice n
sistem multiutilizator.
Calculatoarele

mainfraime

constituie

categorie

aparte,

situate

ntre

supercalculatoare i minicalculatoare, opernd cu viteze ridicate i

administrnd un volum foarte mare de date. Au procesorul foarte
complex, volum mare de stocare n UM, SI/O complex, orientat pe
gestionare de staii de lucru, permit acces multiutilizator (pot
suporta sute i chiar mii de utilizatori simultan).
Calculatoarele mainframe necesit instalaii speciale i proceduri
de meninere n funciune, neputnd fi cuplate direct la reeaua de
nalt tensiune, de aceea au costuri foarte ridicate. Ele funcioneaz, de regul, fr
ntrerupere, ceea ce presupune accesul controlat la date i un sistem de protecie adecvat.

293

DESIGNER PAGINI WEB

Se utilizeaz n spitale, bnci etc.
Supercalculatoarele sunt cele mai puternice, complexe i scumpe sisteme electronice de
calcul, care pot executa peste 1 bilion de instruciuni pe secund. Au procesorul format
dintr-un numr mare de microprocesoare (de ordinul miilor), sunt proiectate pentru calcul
paralel, au costuri i performane foarte ridicate. Sunt utilizate n domenii care necesit
prelucrarea complex a datelor, cum ar fi: reactoare nucleare, proiectarea aeronavelor,
seismologie, meteo etc.
Lund n considerare particularitile unui calculator personal (PC), din punct de vedere a
mrimii (fizice sau ca i capacitate de memorare), viteza de lucru, costuri, utilizri
specifice, se poate spune ca exist mai multe tipuri de calculatoare i anume: Desktop,
Tower, Laptop, Palm PC.
Desktop calculatorul de tip clasic, la care monitorul este aezat n
general pe carcasa unitii centrale ce se afl pe birou.
Tower acel calculator la care carcasa unitii centrale este mai ngust
dar mai nalt dect la desktop i este aezat lng monitor sau, de cele mai
multe ori, sub mas.
Laptop (notebook) calculator uor de transportat, construit pentru a fi
folosit n afara biroului (de exemplu n tren), avnd o surs independent
de alimentare (baterii sau acumulatoare). Au componente uoare i mici,
de exemplu afiajul cu cristale lichide, tastatur i nlocuitor de mouse.
Cntresc numai 3-5 kg i sunt cele mai costisitoare (aproximativ preul a
doua PC uri).
Palm PC (Palmtop, Handhold sau Organizer) se utilizeaz ca
bloc notes, agend telefonic, calculator de buzunar, calendar etc.
Faciliti: posibilitatea transferului de date prin PC, recunoaterea
scrisului de mn, accesarea Internet-ului. Datorit dimensiunilor
reduse (ct o palm), procesarea textelor este destul de dificil.
PDA (Personal Digital Assistant) asistent digital personal:
dispozitiv de dimensiuni foarte mici, poate fi purtat n mn, combin
facilitatea de calcul, telefon/fax cu cele de reea; sunt penbased -

294

DESIGNER PAGINI WEB

folosesc un stilou special n locul tastaturii, pot deci recunoate scrisul de
mn (unele recunosc i vocea). Au preturi mari i aplicaii limitate.
Performana calculatorului
Structura unui calculator presupune existena componentelor hard i soft, deci
performanele n funcionarea sa, sunt determinate de cele obinute de fiecare dintre
acestea.
Civa factori de ordin tehnic, care pot influenta performantele calculatorului :
Viteza procesorului
Dimensiunea memoriei RAM
Dimensiunea Hard-disk-ului
Dimensiunea memoriei cache
Viteza de transmitere a datelor pe magistrala de date

HARDWARE
Unitatea central de prelucrare
Unitatea central de prelucrare (UCP) mai este numit i Central Processing Unit
(CPU). Se afla n interiorul carcasei calculatorului montat pe placa de baz
(mainboard sau motherboard). Aceasta este placa principal dintr-un calculator.
n mod obinuit, plcile de baz conin: CPU, memoria, interfeele pentru dispozitivele de
stocare a datelor i pentru perifericele standard.
Dintre funciile procesorului pot fi amintite:
Execut instruciuni individuale pentru programe i controleaz operaiile
efectuate de alte componente ale computerului;
Realizeaz calculele i operaiile logice;

295

DESIGNER PAGINI WEB

Fiecare microprocesor este alctuit din mai multe micromodule interconectate prin
intermediul unor ci de comunicaie numite magistrale interne, pe care circul date sau
instruciuni, a cror vitez de deplasare depinde de doi factori:
Limea numrul benzilor de circulaie; deoarece pe fiecare band circul
un bit, se poate vorbi despre limi convenabile (de 8,16,32,64 sau 128 de
bii transmii n paralel)
Frecvena de tact numrul de pai de lucru (tacturi) pe care poate s i
fac procesorul n fiecare secund; se msoar n gigahertzi (GHz) sau
megahertzi (MHz). La ora actual majoritatea depesc 1GHz.

MEMORIA
Memoria intern este zona de stocare temporar a datelor ntr-un calculator. Termenul
memorie este folosit pentru a desemna cipurile reale capabile s pstreze datele.
Deoarece calculatorul recunoate numai dou stri, datele supuse prelucrrii sunt
transformate n iruri de cifre 0 i 1, indiferent n care dintre cele dou tipuri de memorie,
RAM sau ROM se afl.
Bit-ul (binary digit cifra binar) reprezint cea mai mic unitate de date ce poate fi
reprezentat i prelucrat de ctre calculator.
O succesiune de 8 bii se numete byte sau octet, fiind cea mai mic unitate de date ce
poate fi reprezentat i adresat de ctre memoria unui sistem de calcul.
Memoria extern sau suplimentar este aceea care folosete dispozitive speciale pentru
stocarea datelor: hard disk, CD, floppy disk, disc ZIP, card, memory stick etc.
Memoria cache este un mecanism de stocare de mare vitez. Poate fi sau o seciune
rezervat din memoria principal, sau un dispozitiv independent. Uneori este ncorporat
n arhitectura microprocesorului (de exemplu la calculatoarele Pentium).
Dispozitive de intrare
Prin intermediul dispozitivelor de intrare, utilizatorul introduce informaii n calculator.
Printre cele mai cunoscute sunt:
Tastatura este principalul dispozitiv cu ajutorul cruia se introduc datele
n calculator i este inclus n cadrul minim de dotare al unui calculator.
Cuprinde cinci categorii de taste: taste de introducere text (alfanumerice ),
taste numerice, taste de deplasare a cursorului, taste funcionale, taste

296

DESIGNER PAGINI WEB

speciale. Pentru tastaturile mai noi exista chiar i taste de navigare pe
Internet.
Mouse-ul dispozitiv de intrare, parte integrant a interfeei grafice, care
controleaz micarea cursorului (pointer) pe un ecran de afiare.
Este de dimensiune redus, poate fi deplasat pe o suprafa rigid i plat, conine cel
puin un buton cu utilizri diferite, n funcie de programul care trebuie utilizat. n
particular, mouse-ul este important pentru interfaa grafic spre utilizator, deoarece
opiunile i obiectele se pot puncta i apoi se execut un click cu butonul mouse-ului.
Astfel de aplicaii sunt numite point-and-clic. Mouse-ul este de asemenea folositor pentru
programele grafice care permit folosirea lor ca pe stilou, creion sau pensula.
Exista trei tipuri de baz pentru mouse:
Mecanic are o bil metalic sau de cauciuc ce se poate roti n toate direciile mutnd
corespunztor indicatorul pe ecran, sensul de micare fiind detectat prin senzorii
ncorporai;
Optic pentru detectarea micrii se folosete un laser; deplasarea se face utiliznd o
suprafa special, dotat cu o gril. Acest tip de mouse rspunde mai rapid i mai precis
dect cele mecanice, dar sunt i mult mai scumpe;
Optomecanice folosesc o combinaie de tehnologii mecanice i optice, dar nu necesita
suprafee speciale.
Trackball (bila rulant )- dispozitiv de intrare ce poate fi considerat un mouse
aezat pe spate: mutarea cursorului se poate face prin rotirea bilei cu
ajutorul degetelor sau palmelor. De obicei exist de la unul la trei butoane
plasate lng bil. Permite indicarea, selectarea, inserarea i este folosit
ntr-o Interfa Grafic cu Utilizatorul (GUI). Avantajul principal fa de
mouse este acela ca nu necesit o suprafaa de lucru, putnd fi aezat oriunde.
Deseori este folosit n locul unui mouse pe un computer portabil (laptop).
Touchpad este o mic suprafa sensibil la atingere, folosit ca
dispozitiv de punctare pe unele calculatoare portabile. Deplasarea
pointerului pe ecran se face prin mutarea degetului peste pad.

297

DESIGNER PAGINI WEB

Scanner dispozitiv care poate citi textul sau ilustraiile tiprite pe
hrtie i transforma informaiile ntr-o form pe care calculatorul o
poate folosi. Un scanner funcioneaz prin digitizarea unei imagini,
adic prin mprirea sa ntr-o gril de puncte i reprezentarea fiecrui
punct prin 0 sau 1, n raport de culoarea punctului, alb sau negru.
Dup mrime i posibilitatea de a fi utilizate, exist:
-

scanner de birou arat ca un copiator. Materialul ce trebuie copiat se aeaz pe

o suprafa plan, de sticl, capacul trebuind sa fie nchis, ca i la copiator;

scanner de mn are dimensiuni reduse, este mai lent i este util pentru
prelucrarea documentelor mici.

Joystick maneta care se mic n toate direciile controlnd deplasarea

pointerului. Este similar unui mouse, cu deosebirea c la mouse micarea
cursorului nceteaz odat cu deplasarea, pe cnd la joystick cursorul
continu s se deplaseze n direcia n care este ndreptat joystick-ul,
ncetnd cu revenirea n poziia iniial. Este folosit mai ales pentru jocurile pe
calculator.
Ligt pen (creion luminos) dispozitiv asemntor unui mouse, care
folosete un detector sensibil la lumin pentru selectarea obiectelor de pe
un ecran de afiare prin punctarea direct.
Microfon folosit pentru a nregistra diverse sunete pe calculator, conectat la
placa de sunet. Este utilizat n telefonia prin Internet i la introducerea
verbal a comenzilor.
Dispozitive de ieire
Monitor (numit VDU Video Display Unit) este dispozitivul standard de ieire.
Este dispozitivul ce permite vizualizarea rapid a rezultatelor executrii unei
aplicaii. Principalele caracteristici ale unui monitor sunt: claritatea imaginii,
numrul de culori permis pentru afiarea i nivelul radiaiilor. Imaginea este
format din puncte individuale numite pixeli. Calitatea imaginii este dat n
principal de rezoluie, care reprezint numrul de pixeli ai ecranului.

298

DESIGNER PAGINI WEB

Constructiv, exist monitor:

-

cu tub catodic cel mai folosit tip de monitor, dei ocup mult spaiu. Imaginea
se formeaz similar cu aceea de pe ecranul televizorului, i anume pe suprafaa
unui tub cu raze catodice.

cu cristale lichide (LCD Liquid Crystal Display) au ecrane ce

utilizeaz dou straturi de material polarizat, cu o soluie de cristale
lichide ntre ele care, la trecerea unui curent electric, se aeaz astfel nct
s opreasc trecerea luminii.

Calitatea unui monitor este determinate de:

-

mrime dimensiunea diagonalei, msurat n oli (1 inches = 2,54 cm)

rezoluie msurat n pixeli (puncte de imagine); cu ct rezoluia este mai mare,

cu att crete calitatea;

frecvena msurat n Hertz, arat de cte ori pe secund se genereaz pe ecran

o nou imagine, deci o rezoluie crescut nseamn o calitate crescut.

aspectul ergonomic se refer la calitatea de radiaii emise de ctre calculator,

cunoscndu-se faptul c lucrul timp ndelungat la calculator provoac disconfort
ocular;

Display screen (ecran de afiare) reprezint ecranul de afiare al unui monitor,

propriu-zis; cele mai multe funcioneaz folosind un tub catodic;
Imprimanta dispozitiv care afieaz pe hrtie texte sau ilustraii.
n funcie de tehnologia de tiprire utilizat, imprimantele pot fi:
-

cu pini sau matriciale crearea caracterelor se face din alturarea

unor puncte separate, obinute prin lovirea pinilor (ace mici) cu o
band tuat. Este necesar o hrtie special, este ieftin, deosebit
de zgomotoas i pe cale de dispariie;

cu jet de cerneal caracterele sunt formate din puncte obinute prin stropire cu
cerneal prin duze speciale. Se folosete hrtie de scris normal, are cost

299

DESIGNER PAGINI WEB

mediu i este mai puin zgomotoas. Calitatea imaginii depinde, n afar de
calitatea hrtiei, de rezoluie, viteza de lucru i de capacitatea de colorare;
-

laser folosete aceeai tehnologie ca i copiatoarele: pentru imprimare

utilizeaz toner i hrtie normal. Execut cele mai bune lucrri, dar
datorit preului destul de ridicat (mai ales cele color), sunt mai puin
folosite.

Exista diferite caracteristici ale imprimantelor. Cele mai importante sunt:

-

Calitatea imprimrii sau rezoluia imprimantei, exprimat prin numrul de

puncte tiprite pe un inch;

Viteza exprimat prin numrul de caractere tiprite pe secund sau numrul de

pagini tiprite pe minut

Modalitatea de alimentare cu hrtie

Zgomotul din momentul tipririi, se msoar n decibeli.

Plotterul (trasatorul) dispozitiv special pentru trasarea pe hrtie a unor

planuri i desene tehnice, n funcie de comenzile unui calculator,
folosind o peni. Este un dispozitiv asemntor cu o imprimant, dar de
dimensiuni mult mai mari. Este folosit pentru tiprirea graficelor i a
schielor din domenii cum ar fi: ingineria, arhitectura, proiectarea etc.
Boxe (difuzoarele) sunt folosite ca dispozitive de ieire pentru sunet.
Sunt legate la placa de sunet.
Dispozitive de intrare/ieire2
Modem -ul dispozitiv care permite calculatorului s transmit date prin
liniile telefonice. Informaiile prelucrate de calculator sunt stocate digital, n
timp ce informaiile transmise prin liniile telefonice sunt transmise sub forma
de unde analogice. Modem-ul face conversia datelor dintr-o form n alta.
Touch screen tip de ecran de afiare, acoperit de o folie transparent
sensibil la atingere, punctarea elementelor de pe ecran fcndu-se cu
degetele. Acest aspect poate fi considerat ca un avantaj (interfaa natural), dar
i dezavantaj, punctarea cu acuratee fiind imposibil.

300

DESIGNER PAGINI WEB

Dispozitive de stocare a datelor

Hard disk-ul este principalul dispozitiv de stocare a datelor i programelor i dispune
de cea mai mare capacitate de stocare. Este un suport magnetic. Fizic,
este alctuit din mai multe suprafee circulare, plasate n jurul unui ax.
Un cap de citire/scriere multiplu se deplaseaz deasupra lor, permind
astfel accesul direct la informaie. Pe fiecare suprafa se scrie pe
ambele pri. Fiecare suprafa este organizat n piste, iar pistele sunt mprite n
sectoare. Caracteristicile tehnice ale unui hard disk sunt: capacitatea de stocare, timpul de
acces la date i viteza de transmitere a datelor. Capacitatea de stocare a hard-disk-ului se
msoar n MB (Megabytes), respectiv GB (Gigabytes). La ora actual exist hard-diskuri care pot stoca i peste 80 de GB de date.
Discheta (floppy disk) dispozitiv magnetic de stocare portabil. Este
format dintr-o suprafa acoperit cu oxid de fier care memoreaz
informaia prin magnetizare. Ea este protejat de un nveli de plastic.
Dischetele sunt scrise / citite cu ajutorul unitii de dischet. Dispune de
cea mai mic capacitate de stocare a datelor, anume 1.44 MB.
Exist cteva avantaje ale utilizrii dischetelor n comparaie cu alte medii de stocare
externe:
Aproape toate calculatoarele dispun de unitate de dischet;
Sunt ieftine;
Printre dezavantaje se poate semnala faptul c se defecteaz foarte uor.
nainte de a fi folosit, o dischet trebuie formatat (cnd cumprai o dischet ea este
deja formatat). Formatarea este operaia care pregtete discheta n vederea stocrii de
date pe ea, i realizeaz compatibilitatea ntre dischet i sistemul de operare sub care va
fi utilizat.
CD-ul (Compact Disc) este un suport optic de stocare a datelor, ce permite memorarea
unei cantiti mari de date, la viteze apreciabile. Pentru memorare se folosete
tehnologia laser. Pentru citirea CD-urilor se folosete unitatea de CD-ROM
(Compact Disc Read Only Memory), iar pentru inscripionarea CD-urilor se
folosete unitatea de CD-RW (Compact Disc ReWritable). Capacitatea de
stocare a unui CD poate ajunge la 700 800 MB. DVD-ul (Digital Video

301

DESIGNER PAGINI WEB

Disc sau Digital Versatile Disc) suport optic de stocare a datelor, asemntor CD-ului,
dar cu capacitate de memorare mult mai mare, 1 GB.
Memorii flash sunt memorii speciale, portabile, de capacitate cuprins ntre 32 MB i 1
GB, folosite pentru stocarea datelor. Aceste memorii sunt indispensabile pentru
memorarea i transportul imaginilor n cazul camerelor digitale. Au forme i mrimi
diferite (Memory Stick, Compact Flash, Smart Media, etc.) n funcie de productorul
camerei digitale.
Dispozitivul de stocare care poate fi conectat la calculator prin interfaa USB
poart denumirea de Flash Pen Drive USB. Dimensiunile reduse, viteza bun de transfer
i protecia datelor fac din aceast memorie o alegere ideal acolo unde portabilitatea este
o alegere primordial.
Disc ZIP dispozitiv cu o capacitate de memorare de 100 300 MB.
Disc Jaz - dispozitiv cu o capacitate de memorare de pn la 2 GB.
Reprezentarea datelor n memorie
Datele supuse prelucrrii sunt introduse n sistemul de calcul sub form de caractere
(litere, cifre, caractere speciale).
Sistemul de calcul nu recunoate dect datele binare, datorit structurii sale funcionale
bazate pe circuite electronice care nu pot avea la ieire dect dou stri distincte (prezena
sau absena unei tensiuni electrice), asimilate sistemului de numerotaie binar (0 i 1).
Deoarece datele reprezentate n memorie ocup o succesiune de bytes, acestea sunt
exprimate n multiplii unui byte astfel:
1 kilobyte (kB) = 1024 bytes (210 bytes)
1 megabyte (MB) = 1024 kbytes (210 kB);
1 gigabyte (GB)=1024 Mbytes ((210MB);
1 terrabyte (TB)= 1024 Gbytes (210 GB);
1 petabyte (PB)=1024 Tbytes (210 TB);
1 exabyte (EB)=1024 Pbytes (210 PB);
Reprezentarea n memorie a datelor/informaiilor se realizeaz la nivel de:

302

DESIGNER PAGINI WEB

byte (octet);
cuvnt de memorie reprezentat prin doi bytes (16 bii);
dublu cuvnt reprezentat prin patru bytes (32 bii);
cvadruplu cuvnt reprezentat prin opt bytes (64 bii);
Unitatea de comand i control privete memoria ca fiind o colecie de locaii binare,
identificabile printr-o adres unic, specific fiecrui grup de cte 8 bii; la nivelul
programelor, acestor adrese li se asociaz variabilele cu rol de adrese simbolice.

303

DESIGNER PAGINI WEB

PARTEA X
ANALIZAREA SCOPULUI PAGINII
WEB

304

DESIGNER PAGINI WEB

1. OBIECTIVELE SISTEMULUI
Proiectarea general are ca obiectiv elaborarea concepiei logice a sistemului
informatic, definirea acestuia din punct de vedere structural i funcional.
Proiectarea general presupune stabilirea componentelor sistemului informatic.
Totodat proiectarea generala presupune analiza datelor de ieire, a bazei informaionale
de intrare, a documentelor pe care sunt consemnate datele de intrare, a legturilor dintre
ele i a funcionalitii sistemului astfel nct toate elementele sale s formeze un ntreg.
Structura general a sistemului informatic cuprinde un ansamblu de intrri,
prelucrri i ieiri definite n funcie de obiectivele noului sistem.
Exist mai multe variante de abordare a proiectrii unui sistem informatic : fie se
poate pleca de la intrri, fie de la ieiri, fie se poate realiza o variant mixt.
Analiznd modul de obinere a fiecrei informaii se determin baza
informaional de intrare, apoi se realizeaz celelalte faze ale proiectrii.
Fazele proiectrii se parcurg in ordinea:
1. stabilirea obiectivelor;
2. proiectarea ieirilor;
3. proiectarea bazei informaionale de intrare;
4. codificarea;
5. proiectarea documentelor de intrare;
6. proiectarea structural i funcional;
7. elaborarea documentului.
Aceast variant prezint avantajul furnizrii unui coninut complet al bazei
informaionale de intrare pentru obinerea ieirilor solicitate.

2. Etapele dezvoltrii unui site

2.1. Scopul i obiectivele site-ului Web
Identificarea i nelegerea nevoilor vizitatorilor site-ului dorit a fi proiectat au n vedere
stabilirea scopului acestuia. Oricare ar fi specificul site-ului Web, primul pas este acela de
a ne asigura c ne-am definit un set de obiective, adic tim ce dorim s realizm o dat
cu demararea activitilor de construire i dezvoltare a site-ului. Fr o fraz clar -

305

DESIGNER PAGINI WEB

menit a preciza scopul i obiectivele - proiectul nu va avea succes. Contientizarea
scopului dorit a fi materializat i grija planificrii activitilor sunt cruciale, mai ales dac
facem parte dintr-o echip de design a unui site. nainte de a ncepe construirea site-ului
respectiv, trebuie s avem n vedere:

identificarea publicului-int (target audience);

stabilirea scopului site-ului;

cunoaterea obiectivelor principale;

ntocmirea unui plan concis privitor la informaiile disponibile pe site.

In paralel, va trebui demarat activitatea de identificare a tuturor informaiilor textuale,

grafice i multimedia i a resurselor disponibile pe care va fi necesar s le colectm sau s
le crem pentru a atinge obiectivele stabilite.
Stabilirea obiectivelor finale
Principiul de design al site-ului este furnizat de sloganul sub care urmeaz a se desfura
ntreaga activitate: o fraz clar i scurt care expune obiectivele. Trebuie s avem o
motivaie precis n crearea unui site Web, iar pentru aceasta este imperios necesar s
explicitm obiectivele, n funcie de ndeplinirea acestora urmnd a analiza viitorul succes
al site-ului.

Cunoaterea audienei
Identificarea potenialilor vizitatori ai site-ului este crucial. Structurarea designului siteului se va face n concordan cu nevoile i ateptrile audienei. Gradul de instruire,
interesele i dorinele utilizatorilor vor varia de la novicii care au nevoie de o introducere
atent structurat pn la utilizatorii experi - iritai de orice aspect care le ntrzie accesul
la informaie. Un site Web bine proiectat ar trebui s fie capabil s se acomodeze unei
game largi de interese i aptitudini ale utilizatorilor.
Va trebui, aadar, s descoperim ce informaii ar putea avea valoare pentru vizitatori i s
le oferim n cadrul site-ului.

Stabilirea cerinelor
Proiectarea site-ului trebuie s ia n consideraie cerinele impuse de beneficiarul acestuia.
Se impune aadar discutarea cu beneficiarul, n amnunime, a cerinelor, czndu-se de
comun acord asupra unor aspecte generale i/sau particulare ale site-ului respectiv.
Beneficiarul, autorul ori ambii pot decide, printre altele, care vor fi:

306

DESIGNER PAGINI WEB

platforma-int (sistemul hardware, sistemul de operare, serverul Web,

clientul/clienii Web);

limbajul sau limbajele de programare utilizat(e) i modul de procesare a datelor

(dac este cazul);

nivelul programrii Web (pe server, la client sau o abordare mixt);

sistemul de management al bazelor de date i al altor resurse;

cerinele de securitate (e.g.: controlul accesului);

designul general al site-ului;

frecvena actualizrii informaiilor i dinamicitatea lor;

audiena i specificul coninutului.

2.2. Aspecte generale ale proiectrii interfeei Web

Utilizatorii spaiului Web nu sunt doar n cutare de informaii, ci interacioneaz cu ele
ntr-o manier deosebit, fr precedent n designul documentelor scrise. Interfaa grafic
cu utilizatorul a unui sistem computerizat include metafore de interaciune, imagini i
concepte folosite pentru a transmite funcionalitate i neles (semantic) ntr-un mod
vizual.
Caracteristicile fiecrei componente de interfa i secvenele funcionale ale
interaciunilor cu utilizatorul produc aspectul i percepia (look and feet) paginilor Web i
relaiile dintre pagini. Designul grafic nu este folosit numai cu scopul de a nviora
informaia, grafica paginilor Web fiind parte integrant a experienei vizitatorului site-ului
n cauz. n cazul documentelor interactive este imposibil s se separe complet designul
grafic de funciile designului de interfa.
Designul de baz al unei pagini Web
Una dintre regulile n conceperea unei interfee utilizator pentru un produs software este
urmtoarea: O interfa utilizator este bine scris atunci cnd programul se comport
exact aa cum se ateapt utilizatorii si.
Aceast regul trebuie avut n vedere i la conceperea site-urilor Web.
Procesul de design poate fi direcionat fie spre scop, fie spre utilizator. In cazul proiectrii
dirijate de scop {task-centered interface design), primeaz scopurile productorului
(ofertantului) informaiei i nu cele ale consumatorului (utilizatorului). Atenia este

307

DESIGNER PAGINI WEB

focalizat spre tehnologie i uurina implementrii, nu spre eficiena utilizatorului,
nelundu-se n calcul ergonomia aciunilor acestuia. In ceea ce privete proiectarea
dirijat de utilizator (user-centered interface design), interfaa trebuie s mulumeasc, s
menajeze i s ajute utilizatorul. Designul trebuie s se realizeze avnd n vedere cerinele
utilizatorului, nu cele ale autorului site-ului.
Aadar, n conceperea de site-uri Web trebuie s adoptm un design orientat spre
utilizator. Cum interfeele utilizator grafice (precum Windows) au fost proiectate s ofere
utilizatorilor un acces direct, dar facil, la propriile calculatoare, utilizatorii ateapt acelai
nivel sofisticat dar sugestiv al designului i n cazul paginilor Web. Scopul principal este
cel de a satisface nevoile tuturor utilizatorilor poteniali, adaptnd tehnologia Web
ateptrilor lor. Nu trebuie cerut cititorului unui document Web s se conformeze, pur i
simplu, unei interfee care pune obstacole n realizarea scopurilor sale.
Navigarea prin site
Cea mai important problem de interfa n cazul site-urilor Web este absena orientrii
n cadrul organizrii locale a informaiei din acel sit. Pictogramele clare, consistente, o
privire de ansamblu asupra site-ului i o pagin de cuprins pot da utilizatorilor ncrederea
c au posibilitatea de a gsi informaiile dorite ntr-un mod eficient.
Utilizatorii trebuie s aib ntotdeauna posibilitatea de a se ntoarce cu uurin la pagina
de start i la oricare alte puncte importante de navigare prezente n cadrul site-ului. Aceste
legturi fundamentale, care ar trebui s fie prezente n fiecare pagin a site-ului, sunt
butoane grafice sau ancore text, furniznd legturi de navigare de baz i dnd
certitudinea utilizatorului c se afl n continuare n domeniul site-ului nostru
O interfa Web bun trebuie s in cont de context, vizitatorii trebuind s fie contieni
de poziia lor n cadrul organizrii informaiilor de pe sit. n cazul documentelor tiprite,
contextul este dat de o combinaie de indicii organizaionale i grafice puse la dispoziie
de designul grafic al publicaiei i de faptul c acel document (carte, revist, raport tehnic)
este perceput ca obiect fizic.
Prin contrast, documentele electronice nu furnizeaz nici un indiciu fizic pe care s-l lum
n consideraie atunci cnd apreciem informaia oferit - altfel spus, nu sunt palpabile.
ntr-o pagin Web, atunci cnd vizitatorul are posibilitatea de a urma o legtur hipertext
nu poate cunoate cu certitudine unde va fi condus, ct relevan va avea pentru el
informaia disponibil la cellalt capt al legturii i n ce mod informaia spre care este

308

DESIGNER PAGINI WEB

condus se raporteaz la pagina curent. Aadar, proiectantul Web trebuie s furnizeze un
anumit context al navigrii.

Asigurarea simplitii i consistenei

Utilizatorii nu sunt impresionai de complexitatea gratuit a site-ului, n special cei
care doresc de la situl vizitat informaii clare i actuale. Fiecare vizitator are anumite
modele vizuale, procesarea vizual a informaiilor bazndu-se pe capacitatea minii de a
clasifica formele (pattern-urile).
Fiecare obiect de interfa (e.g.: butoanele, sigla organizaiei) are asociat un
simbol. Oriunde este reprezentat ntr-o pagin Web obiectul n cauz trebuie folosit
simbolul care l reprezint. Pentru a fi eficient, interfaa trebuie s posede un numr
redus de simboluri, restrngndu-se pe ct posibil la minim vocabularul de interaciune cu
utilizatorul.

Stabilitatea designului
Pentru a convinge utilizatorii c informaiile disponibile pe Web sunt de ncredere
i clar prezentate, proiectarea site-ului Web se va realiza cu aceeai atenie cu care s-ar
realiza orice alt tip de document informativ al firmei, folosindu-se aceleai standarde de
editare i de design ireproabil. Un site neglijent construit, avnd un design vizual slab,
nu va inspira ncredere vizitatorilor, mai ales n domenii precum comerul electronic.
Stabilitatea funcional n designul Web nseamn asigurarea funcionrii
elementelor interactive ale site-ului n vederea exploatrii eficiente a acestuia. Stabilitatea
funcional presupune dou componente:

realizarea optim a site-ului chiar de la prima versiune a acestuia, din momentul

construirii i implementrii;

meninerea unei bune funcionri a site-ului de-a lungul existenei sale.

Asigurarea accesibilitii
Nu toi utilizatorii site-ului vor putea profita de posibila bogie grafic oferit de paginile
Web. Unii vizitatori ar putea parcurge site-ul folosind un navigator text (precum Lynx sau
Links din mediile Linux) sau ar putea avea diverse handicapuri fizice. Un mare avantaj al
limbajului HTML este abilitatea de a oferi mesaje alternative fiecrui obiect multimedia de exemplu, atributul alt pentru <img>, summary pentru tabele ori title pentru majoritatea
marcatorilor. Utilizatorii care nu au posibilitatea vizualizrii grafice a coninutului site-

309

DESIGNER PAGINI WEB

ului vor putea aadar nelege funcionalitatea elementelor grafice/multimedia din paginile
site-ului.

310

DESIGNER PAGINI WEB

PARTEA XI
PROIECTAREA SITE-ULUI WEB

311

DESIGNER PAGINI WEB

nainte de a ncepe activitatea propriu-zis de proiectare trebuie s inem cont de
faptul c exist motive organizaionale fundamentale pentru a mpri o cantitate mare de
informaii - indiferent dac acestea sunt prezentate pe pagini tiprite sau pe un site Web.
Creierul uman prezint limitri n ceea ce privete memorarea i reamintirea unor
informaii. Scopul majoritii schemelor organizaionale este cel de a menine minim
numrul variabilelor locale pe care cititorul trebuie s le pstreze cu uurin n memoria
de scurt durat. Astfel se folosesc diverse combinaii de design grafic i abloane ale
aranjamentului (layout-ului) informaiei. Pe un site, vizitatorii trebuie s aib acces la
pri discrete de informaie, disponibile n cantiti uor de reinut. Modul n care oamenii
caut i folosesc informaiile sugereaz de asemenea faptul c unitile de informaie
mici, distincte, se dovedesc mai funcionale i mai facil de parcurs dect cele
nedifereniate, de dimensiuni apreciabile.

Organizarea informaiilor
Rareori utilizatorii citesc pasaje lungi i continue de text de pe ecranele calculatoarelor i
majoritatea oamenilor care caut o anumit informaie vor avea dificulti n localizarea
datelor dorite dac vor trebui s parcurg blocuri lungi de text pentru a gsi ceea ce caut.
Fragmentnd informaia dorit a fi prezentat pe Web n pri de dimensiuni reduse, vom
organiza mult mai uor datele n uniti modulare respectnd aceeai schem de
organizare consistent care poate forma baza legturilor hipertext din cadrul sitului.
Cele patru etape de baz n organizarea informaiei de pe site sunt urmtoarele:
divizarea informaiilor n uniti logice,
stabilirea unei ierarhii a modulelor de date n funcie de importan i de generalitate,
utilizarea acestei ierarhii pentru a crea relaii ntre unitile logice,
analizarea rezultatului din punct de vedere estetic i funcional.

Organizarea site-ului
Site-ul trebuie s prezinte vizitatorilor si o organizare judicioas, clar. Dac avem doar
o vag idee despre relaia dintre o seciune a sitului cu alte zone ale acestuia i dac nu
oferim o expunere cuprinztoare i ordonat a informaiilor, atunci utilizatorii vor cuta
un material mai bine organizat pe alte site-uri.

312

DESIGNER PAGINI WEB

Alte elemente ale site-ului Web

Alturi de principalele componente ale unui site Web - pagina de start, paginile
subiectelor intermediare i paginile subsidiare - trebuie s avem n vedere diverse
elemente menite a facilita parcurgerea coninutului i navigarea prin site.
Site-ul trebuie s conin posibiliti de navigare: butoane, hri de imagini, legturi
textuale, eventual cadre (dei utilizarea acestora din urm nu este recomandabil).
ntotdeauna cnd folosim pentru legturi imagini sau hri senzitive, ar trebui s includem
legturile textuale corespunztoare.
Site-ul trebuie s fie consistent. Mrimea i culoarea butoanelor, textului i legturilor,
localizarea pe pagin a legturilor navigaionale trebuie s fie similare n ntregul site.
Vizitatorul trebuie s obin informaia dorit ntr-un mod ergonomie, optim.

2.4. Proiectarea paginilor Web individuale

Cutm coeren, ordine i credibilitate n toate sursele de informare, indiferent dac ele
sunt documente tradiionale, tiprite, informaii radio/tv sau pagini Web.
Organizarea spaial a elementelor grafice i textuale care intr n componena unei pagini
Web poate atrage atenia utilizatorului, punnd n eviden informaiile. Mai mult, acest
lucru conduce la interaciuni mai eficiente i mai plcute ntre vizitatori i site-ul Web n
cauz.
Pentru a mplini acest deziderat va trebui s inem cont de logica vizual a elementelor
care compun paginile Web proiectate.

Designul vizual
Designul grafic trebuie s ofere un echilibru optim ntre senzaia vizual i informaia
grafic sau textual dintr-o pagin. Fr impactul vizual al formei, culorii i contrastului,
paginile sunt plictisitoare i nu vor da motive vizitatorului s le parcurg coninutul.
Documentele text dense, fr contrastul i confortul vizual oferite de grafic i de o atent
aezare n pagin sunt mai dificil de citit, mai ales n cazul monitoarelor avnd o rezoluie
sczut. Similar, documentele Web care utilizeaz intens grafica risc s dezamgeasc
utilizatorul, oferind un slab echilibru ntre senzaia vizual, informaia textual i
legturile hipermedia existente.

2.5. Designul coninutului

Aspecte tipografice ale coninutului text

313

DESIGNER PAGINI WEB

Acelai text (adic aceeai informaie) poate fi vizualizat ntr-o multitudine de forme. O
vizualizare diferit va avea drept consecin un impact diferit asupra cititorului.
Unul dintre aspectele care trebuie luate n consideraie este cel al contrastului vizual
dintre blocurile de text i zonele nconjurtoare ale acestora. Ochiul i mintea vizitatorului
sunt atrase de contrastul ferm i de formele distincte oferite de o pagin Web. O pagin
ocupat exclusiv de informaii text dense nu va fi perceput dect ca o imens pat
cenuie, lipsit de orice urm de contrast vizual. Uniformitatea excesiv nu va atrage
atenia utilizatorilor. La fel, dac toate propoziiile sunt scrise cu caractere italice ori
aldine (ngroate), vizitatorul nu va mai percepe care informaie este cu adevrat
important pentru dnsul.

Elemente de grafic
Pentru realizarea unui design Web atractiv, coninutul grafic este o condiie sine qua non.
De cele mai multe ori cnd discutm despre grafic ne referim la monitorul folosit, la
rezoluia sistemului i la paleta de culori disponibil.
Utilizarea ilustraiilor i fotografiilor
Grafica ofer o palet foarte larg de utilizri, facilitnd transmiterea mesajului
informaiilor, accentuarea unui punct de vedere i oferirea unei identiti recognoscibile
publicaiilor tiprite sau site-urilor Web.

Coninutul multimedia
Multimedia reprezint o combinaie de mai multe medii, precum textul, imaginile statice fotografii, scheme, diagrame -, animaiile, coninutul audio i video. Mediile statice (text,
imagini) se mai numesc i discrete, iar cele dinamice (animaii, audio i video) - continue.

2.6. Ultimii pai

Verificarea integritii i corectitudinii codului-surs
Dup proiectarea i crearea efectiv a site-ului, un prim pas este acela de a verifica
integritatea legturilor i corectitudinea codului-surs al documentelor.
In vederea vizualizrii site-ului n bune condiii, indiferent de platform, se recomand
evitarea oricror extensii particulare i a formatelor grafice proprietare (ca, de exemplu,
BMP). Un alt aspect de care trebuie s se in seama este modul de scriere a numelor de
fiiere. Astfel, sistemul de operare Windows nu face deosebirea ntre minuscule i

314

DESIGNER PAGINI WEB

majuscule i paginile se vor vizualiza fr probleme, ns o dat transferate pe un server
Unix (Linux) trebuie s verificm dac numele resurselor au fost specificate corect,
platformele Unix fcnd deosebirea ntre literele mici i cele mari (case-sensitive).
Publicarea site-ului
Urmtoarea etap o reprezint publicarea site-ului. Soluiile pot fi:
-

Publicarea pe un server dedicat. Dac site-ul este al unei organizaii care poate si permit s aib un server Web propriu sau este al unei persoane avnd acces la
serverul unei astfel de organizaii, atunci acest pas presupune transferul tuturor
fiierelor care compun site-ul pe maina pe care ruleaz serverul Web. In primul
rnd trebuie ales serverul adecvat, innd cont de factori precum performana,
sigurana, fiabilitatea, costul i platforma.

Apelarea la un furnizor de gzduire Web. n acest caz, site-ul va fi localizat la distan, pe

o main pus la dispoziie de gazda site-ului Web. Acest proces se mai numete i
gzduire. In funcie de buget i de cerinele site-ului, putem recurge la un furnizor local
sau unul internaional. Trebuie s avem n vedere, printre altele, sistemul de plat,
suportul tehnic i limea de band oferit. Deseori, rolul de furnizor de servicii de
gzduire Web este asumat chiar de furnizorul de servicii Internet.

315

DESIGNER PAGINI WEB

PARTEA XII
PROCESAREA IMAGINILOR,
CREAREA DE ANIMAII I FLASHURI

316

DESIGNER PAGINI WEB

Procesarea imaginilor este un domeniu al inteligenei artificiale care se ocup cu

reprezentarea, reconstituirea, clasificarea, recunoaterea i analiza imaginilor cu
ajutorul calculatorului.
Introducere
Sursa de provenien a imaginilor poate fi un dispozitiv de achiziie (camer video,
scanner, captor radar), dar poate fi la fel de bine i un text, o ecuaie matematic, un
ansamblu de date statistice etc.
Exist dou motive principale pentru care se apeleaz la procesarea imaginilor:
1. mbuntirea calitii unei imagini avnd drept scop o mai bun vizualizare
pentru un operator uman. Aceasta poate nsemna: reducerea zgomotului i a altor
defecte care pot fi prezente n imagine (datorate, de exemplu, dispozitivului de
achiziie), evidenierea unor zone de interes prin modificarea luminozitii, a
contrastului, accentuarea muchiilor etc.;
2. extragerea de informaii dintr-o imagine, informaii care pot reprezenta intrarea
pentru un sistem automat de recunoatere i clasificare. Aceste informaii pot fi:
diferite distane i relaii dintre obiectele prezente n imagine, momente statistice,
parametri geometrici (arie, perimetru, circularitate etc.)
Exemple clasice de aplicaii pentru procesarea imaginilor (i recunoaterea formelor)
includ: recunoaterea caracterelor, recunoaterea amprentelor, prelucrarea imaginilor
medicale, a imaginilor satelit.
Noiuni de baz
Pentru a putea fi prelucrate digital (cu calculatorul), imaginile grafice trebuie mai nti
digitalizate, adic mprite n multe elemente mici (de exemplu ca o tabl de ah, sau i
dup alte sisteme), i anume att de mrunt, nct fiecare element s aib o singur
culoare, sau mcar o singur culoare clar dominant. Atunci fiecare astfel de element,
numit pixel ((pixelul - este un element component, de obicei foarte mic, al imaginilor
grafice (fotografii, desene etc.) digitale. Cuvntul provine din englez de la PICture

317

DESIGNER PAGINI WEB

ELements (elemente de imagine). Se prescurteaz prin "px", uneori i cu "p".), posed trei
atribute care se pot exprima digital (numeric): culoare, opacitate (transparen) i poziie
n matricea n care se divide imaginea. Dac pixelii sunt destul de mici i numeroi,
atunci prezentarea integral a imaginii din memoria calculatorului pe un ecran sau prin
tiprire poate atinge o calitate sau o fidelitate optic/grafic foarte nalt, cu un grad de
detaliere foarte mare, ct se poate de asemntoare cu calitatea imaginilor tiprite
(analogice). La mprirea imaginii ntr-un numr insuficient de pixeli, i calitatea
prezentrii scade, astfel nct trecerile de culori pot fi grobe, sau pot aprea efecte de
trepte i de neclaritate, acolo unde de fapt ar trebui s se vad o linie subire clar.
Cel mai comun format pentru aceste imagini are la baz reprezentarea pixelilor pe 8 bii.
Astfel, gama de valori posibile este 0255 (n formatul pe 8 bii 00000000 reprezint 0
scris n baza 10 iar 11111111 reprezint 255 scris n baza 10), 0 codificnd culoarea
negru, 255 alb, iar valorile intermediare reprezentnd nuane (niveluri) de gri. n
cazul imaginilor color, pot fi folosite diferite sisteme de culori (RGB, HSI, CMY etc.).
RGB - este un sistem care are ca i culori fundamentale rou (Red), verde (Green)
i albastru (Blue), celelalte culori constituindu-se din anumite procente ale
culorilor de baz. Culoarea alb are prezente toate culorile fundamentale, iar
culoarea negru se caracterizeaz prin absena lor.
HSI - nuanare (Hue), saturaie (Saturation) i intensitate (Intensity). Nuana
reprezint poziia relativ a culorii n spectru i, n sistemul HSI, corespunde
unghiului pe care l face culoarea n cercul de culori. Domeniul de nuanare se
ntinde de la 0 la 360 de grade. Saturaia reprezint puritatea culorii. Valoarea
saturaiei se exprim n procente i variaz de la 0 (fr culoare) pn la 100
(culoare pur, aa cum este definit de valoarea nuanrii). Ultimul parametru
reprezint intensitatea culorii care variaz de la negru la alb.
CMY - are la baz culorile Cyan, Magenta i Yellow, considerate culori secundare
fa de culorile Red, Green, Blue. Potrivit acestui sistem, culoarea alb fiind dat
de absena culorilor CMY, iar culoarea negru fiind caracterizat de prezena
acestora.
Prezentm n cele ce urmeaz principalele aplicaii (programe) de procesare a imaginilor:

318

DESIGNER PAGINI WEB

Adobe

Photoshop este

un software folosit

pentru

editarea imaginilor

digitale pe

calculator, program produs i distribuit de compania american Adobe Systems i care se

adreseaz n special profesionitilor domeniului.
Adobe Photoshop, aa cum este cunoscut astzi, este vrful de lance al gamei de
produse software pentru

editare

de

imagini

digitale,

fotografii,

grafic

pentru tipar, video i Web de pe pia. Photoshop este un program cu o interfa intuitiv
i care permite o multitudine extraordinar de modificri necesare n mod curent
profesionitilor i nu numai: editri de luminozitate i contrast,culoare, focalizare,
aplicare de efecte pe imagine sau pe zone (selecii), retuare de imagini degradate, numr
arbitrar de canale de culoare, suport de canale de culoare pe 8, 16 sau 32 bii, efecte thirdparty etc. Exist situaii specifice pentru un profesionist n domeniu cnd alte pachete duc
la rezultate mai rapide, ns pentru prelucrri generale de imagine, ntruct furnizeaz
instrumente solide, la standard industrial, Photoshop este efectiv indispensabil.
Alturi

de

aplicaia

Photoshop

(ajuns

la

versiunea

CS5),

este

inclus

aplicaia ImageReady, cu un impresionant set de instrumente Web pentru optimizarea i

previzualizarea imaginilor (dinamice sau statice), prelucrarea pachetelor de imagini cu
ajutorul sistemului droplets-uri (mini-programe de tip drag and drop) i realizarea
imaginilor rollover (imagini ce i schimb aspectul la trecerea cu mouse-ul peste ele),
precum i pentru realizarea de GIF-uri animate.
Principalele elemente prin care Photshop se difereniaz de aplicaiile concurente i prin
care stabilete noi standarde n industria prelucrrii de imagini digitale sunt:

Seleciile

Straturile (Layers)

Mtile (Masks)

Canalele (Channels)

Retuarea

Optimizarea imaginilor pentru Web

Photoshop poate citi majoritatea fiierelor raster i vector. (Grafica raster este o
modalitate de reprezentare a imaginilor n aplicaii software sub forma de matrice de
pixeli n timp ce grafica vectorial este o metoda de reprezentare a imaginilor cu ajutorul
unor elemente geometrice (puncte, segmente, poligoane), caracterizate de ecuatii
matematice).

319

DESIGNER PAGINI WEB

De asemenea, are o serie de formate proprii:

PSD (abreviere pentru Photoshop Document). Acest format conine o imagine ca

un set de straturi (Layers), incluznd text, mti (mask), informaii despre
opacitate, moduri de combinare (blend mode), canale de culoare, canale alfa
(alpha), ci de tiere (clipping path), setri duotone precum i alte elemente
specifice Photoshop. Acesta este un format popular i des rspndit n rndul
profesionitilor, astfel c este compatibil i cu unele aplicaii concurente
Photoshop.

PSB (denumit Large Document Format) este o versiune mai nou a formatului
PSD, conceput special pentru fiiere mai mari de 30.000 de pixeli (suport pn la
300.000x300.000 pixeli).

PDD este un format mai puin ntlnit, fiind asociat iniial aplicaiei Adobe
PhotoDeluxe, astzi (dup 2002) compatibil doar cu aplicaiile Adobe Photoshop
sau Adobe Photoshop Elements.

CorelDRAW este un program de grafic vectorial ce a fost creat de ctre Corel

Corporation din Ottawa , Canada pentru a rula pe platforme Microsoft Windows. Pn in
anul 2000 au existat i variante pentru Linux (versiunea 9) i pn in 2001 pentru
Macintosh (versiunea 11). n prezent, CorelDRAW ruleaz doar sub Microsoft
Windows.
CorelDRAW se difereniaz de concurenii si prin mai multe faciliti oferite:
Primul este pozitionarea sa ca o suit grafic, mai degrab dect doar un program de
grafic vectorial. O gam complet de instrumente de editare permit utilizatorului s
regleze contrastul, balansul de culoare, i s modifice formatul de la RGB la CMY , s
aduge efecte speciale, cum ar fi viniete i borduri speciale pentru bitmap-uri (Formatul
de fiier BMP, uneori numit bitmap ("hart de bii") sau formatul de fiier DIB (in
engleza " device independent bitmap "), este un format de fiier imagine utilizat pentru a
stoca imagini digitale, n special pe Microsoft Windows i sisteme de operare OS/2)
Bitmap-urile pot fi editate, de asemenea, mai pe larg cu ajutorul Corel Photopaint (un
editor de grafic raster) , deschiznd bitmap-ul direct din CorelDRAW i revenirea la
program dup salvarea lui.

320

DESIGNER PAGINI WEB

CorelDRAW este capabil de a manipula mai multe pagini, mpreun cu mai multe straturi
master. Documentele mulrtipagin, sunt mai uor de creat i editat, iar modulul (motorul)
de imprimare Corel permite tiprirea de brouri precum i a altor documente cu o
paginaie complex astfel nct i cea mai simpl imprimant poate fi folosit pentru a
listarea acestora.
CorelDRAW este foarte util pentru crearea i editarea de elemente mai mici, cum ar fi
carti de vizita, invitatii, etc, pot fi proiectate la dimensiunea lor final i puse n pagin la
dimensiunea colii de pagin din imprimant, pentru imprimarea la un cost eficient.
Caracteristica suplimentar print-merge (mbinare la tiprire) - folosind o foaie de calcul
sau un fiier text - permite personalizarea complet pentru multe lucruri cum ar fi:
numerotare biletelor de tombol, invitaii individuale, cardurile de membru i altele.
Adobe Flash sau mai pe scurt Flash este o platform multimedia, un produs al companiei
Macromedia care a fost cumprat n 2005 de ctre Adobe Systems.
Cel mai cunoscut i mai rspndit produs al firmei este plugin-ul/player-ul Flash. Este un
program de vizualizare a animaiilor (animaia este afiarea rapid a unei secvene de
sau a unei poziii, n scopul de a crea o iluzie de micare. Efectul este o iluzie optic a
micrii, datorate fenomenului de persisten a vederii - tendina ochiului uman de a
continua s vada o imagine pentru nc un scurt interval de timp dupa ce aceasta a
disprut.), imagini grafice 2D sau 3D, de rulare a coninutului video i a celui
multimedia, de acces la diverse jocuri, inclusiv la cele 3D. Adobe Systems deine i
plugin-ul/player-ul Adobe Shockwave. (Un plugin sau insert este un program care poate
s se integreze ntr-un alt program (de baz) pentru a ndeplini funcii specifice. Exemple
tipice de plugin-uri sunt cele pentru afiarea formatelor grafice (de ex. SVG (SVG
(Scalable Vector Graphics) - expresie englez cu traducerea "grafic vectorial
proporionabil" este un limbaj pentru descrierea de imagini 2D folosind XML)
dac browserul nu include implicit acest format), pentru a executa fiiere multimedia,
pentru a cripta/decripta e-mail-uri - de exemplu PGP (PGP (Pretty Good Privacy) este
un program pentru cripatrea i decriptarea datelor care ofer intimitatea i
autentificarea n transmisiile de date) - sau pentru a filtra imagini n programe grafice.
Un player este un program de calculator / software care creeaz i red nregistrri
(fiiere) audio-vizuale. Este vorba de un aparat virtual, care poate prezenta pe monitorul
calculatorului, printre altele, simbolurile uzuale pentru butoanele de start , stop ,

321

DESIGNER PAGINI WEB

pauz , derulare rapid napoi .a.m.d., care pot fi activate (apsate) cu
ajutorul mouse-ului.)
n informatic, platforma semnific un anumit tip de arhitectur hardware i de mediu
software care asigur execuia aplicaiilor software. Platforma include: arhitectura hard,
sistemul de operare, limbajele de programare i interfaa cu utilizatorul (bibliotecile i
interfaa grafic).
Platforma multimedia se refer la acele platforme care se asigur condiii speciale pentru
gestionarea i folosirea coninutului multimedia.
Adobe Flash ine de platformele multimedia care sunt folosite pentru adugarea
animaiei, video i interactivitii la paginile Web. De curnd, Adobe Flash e
poziionat i ca instrument de creare a aplicaiilor de tip RIA (Rich Internet
Applications) aplicaii care asigur n Internet funciile unui calculator personal.
Termenul Flash are n web design un coninut complex/polisemantic, semnificaia lui
depinznd uneori i de context. Poate avea nelesul de:

platform multimedia;

plugin;

player;

program;

format multimedia;

format de fiier;

tehnologie;

dispozitiv de memorie;

etc.

Ca tehnologie/platform Adobe Flash folosete grafica vectorial i cea raster pentru a

asigura animaia textului i a imaginilor. Folosind fluxurile bidirecionale asigur n
Internet permite transmiterea coninutului audio i video al fiierelor, precum i captarea
interactivitii pentru diversele dispozitive: mouse, tastatur, microfon, camer video.
Adobe Flash este integrat cu ActionScript limbaj de programare orientat pe obiecte.
Avantaje i dezavantaje n Flash
Folosirea obiectelor Flash n paginile web are un anumit numr de avantaje i
dezavantaje. Vom trece n revist cteva dintre acestea:

322

DESIGNER PAGINI WEB

Avantajele folosirii Flash-ului pe web:

Elemente grafice vectoriale: dimensiuni mici i scalabile: Pentru a memora

imaginile un calculator poate recurge la dou metode: prima este reinerea pixel cu
pixel a imaginii, cea de-a doua este memorarea unor puncte critice cu ajutorul
crora imaginea poate fi refcut. Astfel pentru a afia un cerc, acesta poate fi
memorat ntr-o imagine de tip raster (cum ar fi formatul BitMap sau Jpeg[ JPEG
este o metod foarte des utilizat de compresie a imaginilor fotografice]) dac
avem un cerc cu o raz destul de mare vor fi memorai nu numai pixelii de pe
circumferina cercului ci i cei din interiorul acestuia sau care sunt n jurul su.

Independena de platform (browser/sistem de operare): Imaginile vectoriale, dei

mai utile, necesit o aplicaie care s genereze imaginea (pentru formatul SVG de
exemplu exist Adobe SVG Player iar pentru SWF avem Playerul de Flash).
Independena de platform apare din cauz c acest program ce tie s afieze
imaginile a fost construit pentru o gam larg de hardware i sisteme de operare:
Astfel dac vom vizualiza obiectul Flash n Windows se va folosi automat
Playerul de Flash versiunea Windows, dac utilizm un telefon mobil
(SmartPhone), se va folosi playerul disponibil pentru telefoane (Flash Player Lite
1.0), sau dac vom folosi MacOS exist un player separat (evident toate playerele
vor afia aceeai imagine final).

Animaii de lung durat uor de realizat: animaiile sunt punctul forte al Flashului, interfaa aplicaiei d posibilitatea de a sincroniza (n funcie de timp)
diversele obiecte, poziii sau forme ale acestora. Flash-ul nu numai c realizeaz
aceast sincronizare, dar poate i interpola poziia (sau forma) unui obiect pentru a
uura munca utilizatorului.

Se pot aduga interfeei elemente multimedia: n interiorul obiectelor Flash putei

importa i manipula (nainte, inapoi, salt la un anumit moment) MP3-uri sau AVIuri.

Nu necesit cunotine de HTML, XHTML: n cazul n care v hotri s realizai

un ntreg site n Flash, aplicaia v poate furniza odat cu obiectul flash i codul
HTML necesar n acest fel tot ce mai trebuie fcut este doar publicarea sitului
pe un server WEB.

323

DESIGNER PAGINI WEB

Editoare puternice i lucrul facil: (Macromedia) Flash este un editor puternic care
d posibilitatea de atari de comportamente diverselor obiecte fie folosind
interfaa de desenare grafic fie prin ataarea de scripturi obiectelor.

Uurina mbinrii elementelor grafice cu scriptul: ataarea codurilor ActionScript

obiectelor din flash se realizeaz prin selectarea obiectului i introducerea codului
asociat obiectului ntr-o fereastr special.

Transferabil ca flux de date: pentru ca un film Flash s ruleze pe maina clientului

nu este necesar s fie ncrcat n ntregime playerul va afia doar ct va putea
din film ateptnd (eventual) ncrcarea n continuare. Din acest motiv se pot
realiza scripturi speciale care ataate obiectelor Flash pot furniza informaii
privitoare la procentul de fiier care a fost ncrcat.

Dezavantaje ale utilizrii Flash-ului:

Printre dezavantajele folosirii obiectelor flash n paginile web amintim:

Depinde de player: dei acesta vine instalat pe o suit de browsere (i n cazul n

care nu este preinstalat instalarea este destul de rapid dimensiunea Playerului
Flash este destul de mic i descrcarea acestuia n contextul reelelor actuale este
rapid), totui exist cazuri n care obiectele Flash ajung pe maini ce nu au
instalat aplicaia necesar interpretrii obiectelor Flash, ajungndu-se n
imposibilitatea folosirii fiierelor (Pentru a rula aplicaiile Flash pe aceste
calculatoare trebuie exportat obiectul Flash ca un executabil).

Mare amator de resurse: deoarece trebuie s reconstruiasc de fiecare dat

elementele grafice, Playerul Flash (precum i aplicaia de dezvoltare) este mare
consumator de memorie i procesor (n cazul graficii raster este clar unde trebuiau
afiai pixelii ce formeaz cercul n cadrul graficii vectoriale trebuie ca poziiile
pixelilor s fie recalculate).

Motoarele de cutare nu pot indexa textul: Flashul lucreaz cu mai multe tipuri de
texte, majoritatea dintre acestea (textul static) nu poate fi indexat de motoarele de
cutare deoarece obiectul Flash este tratat ca element grafic/obiect i roboii de
cutare nu au cunotinele necesare disecrii obiectelor Flash i extragerii
textului intern.

Uurina utilizrii l face sa fie folosit n cele mai absurde moduri (de exemplu,
flash-urile - sperietoare). Pentru aceste tipuri de Flash-uri, fcute de obicei de
nceptori, n limba englez exist un termen special: "flashturbation".

324

DESIGNER PAGINI WEB

Tehnologie liceniat: fiind o aplicaie dezvoltat de o serie de programatori

(pltii pentru a dezvolta Flashul), instrumentul de dezvoltare cost cel puin 600.
Totui specificaiile formatului obiectului Flash sunt disponibile i din acest motiv
au aprut (i nc apar) destule instrumente care s utilizeze acest format n
scopuri mai mult sau mai puin productive sau legale. Dintre acestea amintim:
Swift3D, Swish, ImperatorFLA, ActionScript Obfuscator.

325

DESIGNER PAGINI WEB

PARTEA XIII
ELABORAREA DE PROTOTIPURI

326

DESIGNER PAGINI WEB

Introducere
n dezvoltarea de software, un prototip este un model rudimentar de lucru al unui
produs sau de sistem de informare, construit de obicei pentru scopuri demonstrative sau
ca parte a procesului de dezvoltare. Un prototip simuleaz, de obicei, doar cteva aspecte
ale soluiei finale, i poate fi complet diferit de produsul final.
nainte de a investi bani, timp i energie n realizarea unui site web propriu dar i pentru a
avea o privire de ansamblu, trebuie rspuns la cteva ntrebari generale :

Care este scopul site-ului ?

Care este audiena? Care este nivelul de pregatire, ce anume o intereseaz, ce fel
de aptitudini i cunotine are?

Ce motive ar avea oamenii s viziteze site-ul?

Ce produse sau servicii vrem s prezentm sau s vindem ?

Ct timp preconizam c va dura realizarea site-ului? Realizm un grafic cu

ealonarea n timp a etapelor pe care trebuie s le parcurgem pentru realizarea
site-ului .

Ct de des dorim s-l actualizm: zilnic, sptmnal, bilunar sau lunar?

Unde dorim s fie gzduit site-ul? La propriul furnizor de servicii Internet, la un

serviciu de gzduire gratuit sau la un serviciu de gzduire comercial (cu plat)?

Ce materiale i informaii sunt necesare pentru a crea site-ul?

Dezvoltarea compoziiei de baz a site-ullui

Procesul de elaborare de prototipuri implic urmtorii pai:
1. Identificarea cerinelelor de baz. Se determina cerinele de baz, inclusiv
informaiile de intrare i de ieire dorite domeniul de activitate al clientului,
vizitatorii int ai site-ului, etc.. Detalii, cum ar fi securitatea site-ului, pot fi de
obicei ignorate.
2. Dezvoltarea de prototipuri iniiale. Prototipul iniial este creat s includ doar
interfee de utilizator.

327

DESIGNER PAGINI WEB

3. Feedback-ul iniial. Clienii, inclusiv utilizatorii finali, examineaz prototipul i
ofer feedback cu privire la completri sau modificri.
4. Revizuirea i consolidarea prototipului. Utiliznd feedback-ul iniial att cerinele
iniiale ale clientului (caietul de sarcini) ct i prototipul pot fi mbuntite.
Discuiile mai detailate cu privire la scopul site-ului sunt necesare. Dac sunt
introduse modificri atunci o repetare a pailor 3 i 4 poate fi necesar.
Colectarea de date de la utilizatori. Audiena reprezint publicul int pentru care am
realizat site-ul. Este un element critic deoarece designul site-ului i coninutul acestuia
sunt n strns legatur cu audiena. De aceea, cautm s realizm profilul standard al
utilizatorului i s strngem ct mai multe informaii legate de obiceiurile, interesele,
aciunile, necesitile i n general de modul de via ale tuturor persoanelor care
alctuiesc publicul int.
Audiena o stabilim ncercnd s rspundem la urmtoarele ntrebri:

site-ul pe care-l realizm este pentru copii sau pentru aduli ?

vizitatorii l vor accesa de la coal, de la serviciu sau de acas ?

ct de rapid este conexiunea lor la Internet ?

ce hardware sau software folosesc ?

Pentru a cunoate ct de vizitat este site-ul pe care l-am realizat i pentru a afla mai multe
date despre numrul i statistica vizitatorilor, informaii care ne vor ajuta n realizarea
unei campanii de marketing online eficiente, este bine s folosim contoare de pagina
(counters).
Acestea sunt capabile s afieze informaii referitoare la:

numrul de accesri totale/ lunare/sptmnale/zilnice;

tipul de browser folosit pentru vizitarea paginilor;

ara/continentul de provenien pentru fiecare vizitator;

sistemul de operare folosit.

Cele mai cunoscute i apreciate contoare de pagina gratuite sunt urmatoarele:

http://www.statistici.ro
http://www.trafic.ro
Interoperabilitatea ntre/cu alte baze de date. n ceea ce privete software-ul,
interoperabilitatea este termenul folosit pentru a descrie capacitatea programelor diferite
de a face schimb de date prin intermediul unui set comun de formate de schimb, s
citeasc i s scrie aceleai formate de fiiere, i s utilizeze acelai protocoale. Lipsa de

328

DESIGNER PAGINI WEB

interoperabilitate poate fi o consecin a lipsei de atenie, vizavi de standardizrile
existente, n timpul fazei de elaborare a prototipului site-ului!
Analiza de cost a volumului de trafic pe internet/vitez de acces. Majoritatea providerilor
de web hosting (gzduire web) ofera trafic nelimitat dar nu specifica viteza real de
acces in Internet. Practic astfel de oferte devin inutile pentru c la viteze mici clientul nu
va reui s foloseasc dect cteva sute de MB trafic lunar iar gradul de folosin al
spatiului de stocare va deveni limitat. Trebuie vzut dac providerul ofer o conexiune de
tip broadband la Internet (O conexiune broadband este un tip de acces la Internet de
viteza mare (minim 128kb/sec). Conexiunile broadband sunt cunoscute i sub numele de
conexiuni permanente, deoarece nu este necesar s apelezi un numr de modem al
providerului de Internet de fiecare dat cnd vrei s ai acces la Internet.). De asemenea un
provider cu care are serverele de web hosting n Romnia va oferi vitez de acces mai
mare dect unul care are serverele n afara rii.
Accesibilitatea reprezint una dintre cerintele de baz atunci cnd se proiecteaz o pagin
web. Aceasta nseamn c orice vizitator trebuie i s poat avea acces la site, indiferent
de browserul pe care-l folosete, rezoluia sau dimensiunile ecranului, setrile
calculatorului sau eventualele disfuncii ale vederii.
Mecanisme de interactivitate. Pentru a crete gradul de interactivitate cu vizitatorii putem
folosi diverse metode (cri de oaspei, list de discuii, chestionare,etc.) care n cele din
urm ne ofer informaii privitoare la feedback-ul site-ului (interaciunea cu vizitatorii).
mbunatatirea metodelor prin care utilizatorii interactioneaz cu un oarecare site este
esenial pentru crearea unui site bun.
Crile de oaspei (questbook). Completarea formularelor este o practic des
ntlnita pe Internet. Acestea permit colectarea de feedback-uri de la
vizitatori ntr-un mod organizat. Un formular web se poate realiza uor
folosind etichetele din HTML sau cu ajutorul unui editor HTML. Un
exemplu este dat de crile de oaspei unde vizitatorul poate s-i scrie
impresiile i comentariile dup vizitarea unui site.
O carte de oaspei gratuit se poate obine vizitnd site-ul:
http://www.guestbooks.net

329

DESIGNER PAGINI WEB

Lista de discuii ( discussion list ). Pentru a crete gradul de interactivitate cu
vizitatorii putem s setm n pagin o list de discuii. Exist multe site-uri,
ca de exemplu Topica sau Yahoo Groups, care ne ofer gratuit aceast
facilitate.
Crearea elementelor de navigare
Internetul, prin chiar natura sa, permite saltul de la o pagina web la alta, printr-o
simpl apsare de buton. Nu este un proces liniar, cum este de exemplu citirea unei carti.
Dei aceast flexibilitate constituie un mare avantaj, realizarea unui sistem de navigare
eficient nu este un lucru usor.
Un coninut interesant i o navigare uoara reprezint cele doua componente
principale ale unui site bine ntocmit. Dar chiar i cel mai atractiv coninut este
nefolositor dac nu este pus n eviden de un sistem de navigare clar i consistent.
Aceasta nseamn c nu trebuie s lsm vizitatorul potenial client s caute mult timp
dup informaii.. Trebuie s-i oferim tot sprijinul posibil, prin realizarea unui meniu de
navigare bine structurat.
Meniul de navigare este o reprezentare grafic sau de tip text a coninutului i este adesea
ncorporat n tema generala a site-ului. Meniul principal trebuie s furnizeze trimiteri
rapide i directe la seciunile i informaiile disponibile dintr-un site web. El va fi realizat
ntr-o form practic i atractiv. Locul obinuit pentru plasarea meniului principal este n
partea stng a ecranului dar el mai poate fi plasat i n partea dreapt sau n partea
superioar a paginii web. Seciunile meniului vor fi denumite astfel nct s ofere o
descriere concis i sugestiv a paginilor web care vor fi accesate.
Cteva dintre schemele de navigare cele mai des ntlnite sunt urmtoarele :

legturi text

hrti grafice ( imagemaps )

butoane de navigare

meniuri tip list derulant ( generate cu Javascript , CGI )

pagini generate dinamic

harta site-ului ( site map )

De multe ori, nceptorii i chiar utilizatorii mai versai se pot ncurca atunci cnd folosesc
un sistem de navigare mai complicat. Din aceast cauz, se recomand a se realiza i o

330

DESIGNER PAGINI WEB

pagin web coninnd o hart a site-ului. Pentru ca harta s poat fi gasit uor e de dorit
de pus o legatur direct ctre aceasta n fiecare meniu de navigare. Aceasta hart este
util i atunci cnd se dorete cutarea rapid a unei informaii sau a unui subiect, fr a fi
nevoie s se navigheze prin tot site-ul. Ea trebuie s fie clara i logica i n acelasi timp s
afiseze corect structura site-ului.
Cheia pentru o navigare uoar este o bun organizare. Cu ct site-ul va fi mai mare i
mai complex, cu att va fi mai dificil sarcina organizrii acestuia i realizrii unui sistem
de navigare consistent.
Crearea zonelor grafice i multimedia
Grafica se folosete, n principal, pentru mbuntirea aspectului unui site i creterea
atractivitii acestuia. Imaginile mai sunt folosite i pentru sublinierea unui text sau al
mesajului transmis de o pagin web. Este recomandat s includem nsa numai imaginile
absolut necesare i care sunt ntr-adevar valoroase.
Nu trebuie ca pagina web s arate ca o niruire de imagini, indiferent ct de remarcabile
ar fi acestea. n aceasta situaie, pagina va arta ca un brad de Crciun, iar mesajul pe care
dorim s-l transmitem va fi mult diluat.
Felul cum vor fi aranjate elementele multimedia ntr-o pagin web depinde numai de
imaginaia i bunul gust al fiecruia. E de dorit s facem o bun impresie cu prima pagin.
Aceasta trebuie s fie deosebit de atractiv i interesant i s arate n mod clar ce conine
restul site-ului.
Studiile au artat c dispunem de aproximativ 15 secunde pentru a capta atenia
vizitatorilor. n general, vizitatorii nu vor s fie bombardai numai cu oferte de vnzare ale
unor produse sau servicii. Trebuie s le oferim ct mai multe informaii i articole
folositoare despre produsul clientului promovat prin site.
Crearea registrelor stilistice
Fiecare site trebuie s aib un stil propriu care s-l deosebeasc de alte site-uri care vnd
produse similar. Vizitatorii trebuie s recunoasca fr dificultate un anumit stil, o anumita
tu pe care trebuie s-o imprimm paginilor web. Ceea ce nseamn c va trebui s gsim
o not deosebit, un aranjament ingenios pentru aceste pagini. Ele trebuie s se
diferenieze net i chiar s ias n eviden, n multimea site-urilor web. Cu toate acestea,
va trebui s pstrm un stil unitar.

331

DESIGNER PAGINI WEB

Folosirea unui design unitar mai are i un alt avantaj major: atunci cnd dorim s
adugm o nou pagin, formatul general l avem deja i nu trebuie dect s adugm
coninutul. n acest caz, nu va trebui dect s urmrim ca machetarea paginii s se nscrie
firesc n modul de prezentare general.
Acest lucru se poate realiza prin :

stilul de scriere

modul de aranjare n pagin

folosirea spaiilor goale

Atunci cnd analizm stilul de scriere pentru pagina web, trebuie s tinem cont de faptul
ca un text pe ecranul monitorului se va citi mai greoi i mai ncet ( n medie cu 20% )
dect textul tiprit. Stilul de scriere ( felul fonturilor, dimensiunea, culorile, etc. ) trebuie
s fie similar pentru toate paginile. n acest fel, cititorul se va familiariza mai uor cu
paginile pe care le-am creat.
E de dorit a nu folosi o varietate prea mare de fonturi pentru aceeai pagin. Fonturile
uzuale sunt ARIAL i TIMES NEW ROMAN. Mai putem folosi i VERDANA sau
COURIER, care dau o not de modernitate paginilor web. Aceste fonturi sunt acceptate
de toate browserele. Putem s folosim i fonturi mai " exotice " dar n acest caz riscm ca
vizitatorii care nu au instalat fontul respectiv s nu poat vizualiza paginile respective.
Nu este recomandabil folosirea textelor exclusiv cu litere mari, a textelor care clipesc
(blink text) i a textelor care defileaz ( scroling marques ). Acestea se citesc mai greu i
dau vizitatorului site-ului senzaia c este agresat vizual.
Pentru a uura construcia site-ului putem apela la CSS-uri (Cascading Style Sheets,
prescurtat CSS, se folosete pentru a personaliza tagurile HTML).Cu ajutorul CSS-ului
putem crea pagini web simple dar i complexe folosind efecte diverse. Cu CSS putem
stabili culoarea, mrimea i fontul textului, de asemenea putem crea un layout (un suport
pentru elementele HTML) personalizat adugnd margine culoare sau imagine de fond i
multe altele. Se pot crea foi de stiluri CSS fiiere externe tip CSS pentru a personaliza
link-urile la care se face trimitere din site-ul nostru.
Crearea elementelor dinamice
Pentru ca toate informaiile s fie prezentate ntr-un mod atractiv i original, o pagin web
poate s fie simpl sau mparit n:

332

DESIGNER PAGINI WEB

cadre

formulare

tabele simple

tabele multiple sau imbricate

combinatie a acestor elemente

Cadrele ne permit s afim doua sau mai multe pagini web, n acelai timp, prin
mpartirea ecranului n mai multe seciuni independente.
Tabelele sunt folosite att pentru o machetare eficient ct i pentru a face mai atractive
diversele elemente componente ale unei pagini web. Ele permit o mpartire a paginii n
seciuni i o poziionare precis a textului sau imaginilor n interiorul paginii.
Formularele sunt folosite pentru ca vizitatorul paginii web s introduc date care apoi
sunt transmise la sever i pe care proprietarul paginii web (clientul nostru) le va procesa.

333

DESIGNER PAGINI WEB

PARTEA XIV
REALIZAREA SITE-ULUI

334

DESIGNER PAGINI WEB

Internetul este in continua expansiune, iar predictiile despre viitorul sau spun ca
acest lucru nu se va opri prea curand. Anul acesta s-a depasit cifra de 2 miliarde de
utilizatori de Internet. Expansiunea interntului are loc pe doua planuri: cresterea
numarului de utilizatori si cresterea numarului de site-uri. Tinand cont de acest al doilea
aspect, crearea unui site web pentru companiile sau firmele mai mici, care inca nu poseda
unul, ar trebui sa devina o necesitate. Trebuie sa nu uitam (ca manageri ai acestor
companii) ca firma are nevoie de o identitate virtuala si ca probabil concurenta este deja
prezenta online.
Crearea unui site web pentru afacerea Dumneavoastra
Inainte de a comanda situl unei firme de web design sau de a va apuca Dumneavoastra de
crearea unui site web, ar trebui sa va ganditi bine la ce doriti sa folositi situl: doriti crearea
unui site web de prezentare a companiei? Doriti prezentarea produselor / serviciile
oferite? Doriti crearea unui site de tip magazin virtual pentru a putea vinde direct de pe
internet produsele firmei? Ar trebui sa va fie destul de clar scopul sitului inainte de va
apuca de realizarea sa.
Cea mai buna tehnologie web pentru crearea sitului meu
In functie de tipul si complexitatea sitului ales trebuie aleasa si tehnologia web folosita.
Facem in continuare o prezentare succinta a tehnologiilor actuale din internet, scopul
scurtei prezentari fiind de a va informa despre avantajele si dezavantajele fiecareia.
Creare site web folosind HTML:
Cel mai vechi limbaj din internet, HTML (HyperText Markup Language) este inca in
actualitate datorita simplitatii si robustetii sale. Avantajele limbajului HTML:
simplitatea si robustetea

indexarea foarte buna in motoarele de cautare

incarcarea rapida in browser

posibilitatea crearii sitului folosind programe, fara a avea cunostinte de webdesign

(nu recomandam).

posibilitatea de a gasi hosting ieftin sau gratuit pentru site

Dezavantajele limbajului HTML:

nu poate accesa baze de date

nu se preteaza folosirii in proiecte de anvergura (sute de pagini)

nu poseda functii avansate de design

335

DESIGNER PAGINI WEB

Creare site web folosind DHTML:

DHTML (Dynamic HTML) este combinatia dintre limbajul HTML si un limbaj de
scripting, de cele mai multe ori JavaScript. Avantajele DHTML:

grafica si efecte speciale spectaculoase

efectuarea unor operatii de verificare a datelor din formularele utilizatorilor local

(fara a trimite pagina la server) se castiga astfel timp

detectarea browserelor utilizatorilor si posibilitatea de tratare diferita a afisarii

sitului (pentru ca un site nu se afiseaza la fel in toate browserele)

Dezavantajele DHTML

daca nu este folosit cu grija poate fi o bariera in calea motoarelor de cautare

poate creste mult timpul de incarcare a paginii

poate sa faca situl de neutilizat in browsere mai vechi (sau in browserele noilor
telefoane mobile care nu recunosc JavaScript)

Creare site web folosind ASP.NET

Asp.Net este tehnologia pe parte de server oferita de Microsoft. Ce inseamna parte de
server? Pe scurt, toate procesele ce se executa in pagina web, sunt executate pe serverul
web pe care este pus situl. Din aceasta cauza, asp poate accesa bazele de date ale sitului,
pe langa multe alte facilitati. Avantajele ASP.NET:

principalul avantaj consider ca este posibilitatea accesarii bazelor de date

contine diferite componente standard care usureaza mult munca de programare si

care infrumuseteaza pagina de internet.

contine de asemenea componente folositoare pentru munca de rutina, care este

mult automatizata.

Dezavantajele ASP.NET
Pentru alegerea tehnologiilor web potrivite pentru proiectele dumneavoastra: HTML:
situri mici, pana la 15 pagini, in general pentru prezentarea firmei sau pentru microsite-uri
(1-2 pagini) care prezinta un singur produs. PHP: pentru proiecte de anvergura: magazine
virtuale, portaluri, prezentari de produse cand numar produselor este mare.
De multe ori odata cu experienta bogata a firmelor vin si rezultatele bune, dar nu este o
regula. Rezultatele in crearea site-urilor web se masoara in traficul de utilizatori pe care il
are acel site si pe tendinta acestui trafic (crestere, stagnare, scadere). Puteti vizita singur

336

DESIGNER PAGINI WEB

cateva situri din portofoliul firmei si puteti analiza traficul singur. Cele mai multe situri au
un contor de trafic pe paginile lor. Au mai facut proiecte similare cu al Dvs.
Acest aspect este mai putin relevant, dar constituie un plus.
Pretul cerut este justificat?
De cele mai multe ori liderii de piata cer preturi colosale pentru un site. Ele sunt
nejustificate, serviciile oferite de ei fiind la acelasi nivel cu serviciile oferite de o firma
mai mica, aceasta din urma avand preturi mult mai decente. Ofera servicii de intretinere
si service?
Dupa crearea sitului, cel mai probabil veti avea nevoie de intretinerea sa. Ne gandim ca
doriti sa il salvati periodic, sa il modificati pentru a aduce continutul la zi Ganditi-va ca
daca dati aceste sarcini altei firme, s-ar putea sa platiti mult mai mult, pentru ca noua
firma pierde timp pretios pentru a analiza ceea ce au facut primii. Sa nu credeti ca nu veti
plati acest timp Asa ca cel mai bine ar fi ca cei care au creat situl sa se ocupe in
continuare de el..
Cand sa astept rezultatele?
Trebuie sa aveti rabdare. Odata activ pe internet, situl nu va incepe sa genereze profit
Va trece ceva timp, in functie de strategia de promovare aleasa pana cand situl va incepe
sa creasca in vizitatori si eventuale vanzari pentru firma Dumneavoastra. Aceasta
perioada este de ordinul saptamanilor sau lunilor, depinzand de promovarea facuta, de
obiectivul site-ului, de concurenta actuala, etc.

337

DESIGNER PAGINI WEB

PARTEA XV
TESTAREA SITE-ULUI

338

DESIGNER PAGINI WEB

Etapa de design a site-ului se desfasoara n strnsa legatura cu cea de
implementare, de scriere a codului HTML pentru paginile care fac parte din site. Totusi,
procesul de creare a site-ului nu se poate considera ncheiat n momentul finalizarii
tuturor documentelor HTML care l formeaza. Urmeaz o etapa adesea tratata oarecum
superficial, desi, ca si celelalte, este esentiala pentru construirea unui site de calitate:
etapa de testare.
1. Corectarea paginilor
Corectarea este unul din cele mai neglijate aspecte al publicisticii Web. Foarte frecvent
puteti ntlni pagini Web cu multiple greseli de ortografie, gramatica, formatare, chiar si
n cazul site-urilor importante. Paginile cu greseli de ortografie, exprimari neglijente,
reflecta cel putin o insuficienta experienta n acest domeniu si, de ce nu, chiar lipsa de
respect pentru vizitator.
Corectarea este neglijata n primul rnd datorita usurintei extraordinare cu care textele pot
fi publicate electronic. Puteti crea o pagina ntr-un editor de text si aceasta poate fi
publicata la doar cteva minute dupa terminarea ei, daca sunteti suficient de rapid. Cei
mai multi nu vor petrece ore n sir verificnd existenta eventualelor greseli gramaticale n
textul editat, asa cum ar face-o, probabil, n cazul unei tiparituri clasice, daca aceste erori
i-ar costa o avere pentru a retipari 10.000 de copii ale documentului. Daca ati facut o
greseala, trebuie doar sa deschideti fisierul, sa efectuati corectura si sa l republicati pe
Web, unde toata lumea l poate vedea. Este aceasta o strategie corecta? Desigur ca nu.
Calitatea muncii pe care ati depus-o la crearea site-ului defineste calitatea acestuia. Mii,
poate milioane de utilizatori ar fi putut deja citi pagina n cauza. Este mult mai simplu sa
petreceti cteva ore corectnd textul, pentru a evita ca ulterior sa va luptati zile, saptamni
sau luni n sir pentru a va recstiga credibilitatea.
Iata cteva metode care va pot ajuta sa corectati mai eficient paginile Web:
Utilizati corectoare automate pentru ortografie si gramatica pentru a descoperi
erorile plictisitoare, facute din graba sau din oboseala.
Nu aveti niciodata ncredere absoluta n acest tip de corectoare pentru a
descoperi erorile mai subtile. Dupa utilizarea lor, ncarcati pagina n browser si
cititi-o de cteva ori.
Pentru site-urile de dimensiuni mari cititi documentele n mod repetat, cautnd
de fiecare data un anumit tip particular de erori

339

DESIGNER PAGINI WEB

La prima lectura concentrati-va atentia pe aspectul general al documentului si
pe descoperirea erorilor de formatare, a itemurilor lipsa sau a erorilor de
plasare a acestora.
La a doua lectura verificati logica si cursivitatea ideilor si a cuvintelor.
La a treia lectura, corectati minutios ntregul text verificnd sintaxa,
ortografia, punctuatia.
ntotdeauna verificati imaginile, figurile si hartile din pagina. Asigurati-va ca
ele au legatura cu textul de referinta, si verificati textul explicativ care
nsoteste imaginea.
Exista si erori ce vor persista uneori chiar dupa toate aceste verificari. Daca le descoperiti
dupa publicarea site-ului, nu mai ramne dect sa le corectati atunci.
2. Testarea paginilor
Odata terminata verificarea corectitudinii textului din pagini din punct de vedere
gramatical si logic, urmeaza etapa de testare a paginilor. n aceasta faza trebuie sa va
concentrati pe testarea corectitudinii etichetelor HTML, a link-urilor, a imaginilor si a
celorlalte elemente incluse n pagini.
Testarea link-urilor
Cea mai simpla cale de testare a link-urilor este de a ncarca pagina n browser si de a da
click pe fiecare link.
Verificati functionarea tuturor ancorelor din pagini care trebuie sa acceseze sectiunea din
pagina corespunzatoare identificatorului ancorei. Atentie la sectiunile multiple ale
aceleiasi pagini etichetate cu acelasi identificator. Aceasta greseala poate produce
rezultate stranii. Daca browserul sare la o alta sectiune a paginii dect cea asteptata,
verificati mai nti identificatorul ancorei n sectiunea pe care browserul o afiseaza.
Verificati apoi modul de functionare a legaturilor catre alte documente, att n cadrul siteului ct si n afara sa, respectiv validitatea lor si daca paginile accesate sunt cele potrivite.
Daca o anumita pagina nu poate fi deschisa, verificati sintaxa link-urilor si anume:
corectitudinea protocolului specificat
extensia fisierului
existenta simbolului ~
Atentie!
n UNIX, simbolul tilda (~) este utilizat pentru a specifica directorul de start (Home
directory) al utilizatorului al carui nume urmeaza dupa acest simbol.

340

DESIGNER PAGINI WEB

Folosind simbolul ~ va puteti referi la o pagina Web astfel:
http://www.server.com/~utilizator/pagina.html
Probleme n functionarea paginilor Web
Este posibil ca paginile Web create sa nu arate n browser asa cum au fost ele proiectate.
Rezolvarea unor astfel de deficiente poate fi dificila, deoarece cnd scrieti codul HTML
aveti doar o imagine mentala a modului cum ar trebui sa arate pagina. O solutie pentru a
face procesul de depanare mai usor ar fi sa vizualizati pagina cu ajutorul browserului pe
masura ce o construiti. Puteti izola diversele sectiuni ale paginii pentru a verifica
functionarea fiecareia dintre ele.
Domeniu pltit
Daca site-ul pe care l-ati creat apartine firmei dumneavoastra sau unei firme client sau
daca doriti sa aveti o prezenta stabila si credibila pe Web cea mai buna optiune este sa
aveti un domeniu platit. nregistrarea unui domeniu nu este foarte costisitoare si va
asigura site-ului dumneavoastra o identitate serioasa si credibila. n plus, odata ce sunteti
proprietarul unui domeniu puteti sa schimbati locatia site-ului (serverul Web pe care este
gazduit) fara ca aceasta sa necesite schimbarea domeniului.
Pretul pentru nregistrarea unui nume de domeniu variaza destul de mult. Una dintre cele
mai convenabile oferte poate fi gasita la adresa http://www.10-domains.com care ofera
nregistrarea unui nume de domeniu pentru 10 USD anual precum si o serie de discounturi pentru nregistrarea pe perioade mai lungi. Daca doriti un domeniu romnesc (.ro)
puteti obtine informatii la adresa http://www.rnc.ro. Pentru nregistrarea unui astfel de
domeniu se percepe o taxa unica de 61 USD (pret valabil la data scrierii acestei carti) fara
alte taxe anuale.
n cazul cnd optati pentru un domeniu platit, adresa URL a site-ului va fi de forma
http://www.dumneavoastra.com
Domeniu gratuit
Obtinerea unui nume de domeniu gratuit este foarte simpla. Exista multe companii online care ofera astfel de domenii si, n plus, si spatiu de gazduire pentru site. Daca sunteti
ncepator si doriti sa va testati cunostintele de Web design nou nvatate, nu este o idee rea
sa construiti un site "de proba" folosind pentru acesta un domeniu si un serviciu de
hosting gratuite. n afara acestei situatii, desi poate parea alegerea ideala, un domeniu
gratuit poate aduce multe dezavantaje site-ului dumneavoastra.

341

DESIGNER PAGINI WEB

Prima judecata de valoare asupra unui site este facuta pe baza numelui sau de domeniu. n
cazul unui domeniu gratuit adresa URL a site-ului va fi:
http://www.numefirmagazda.com/~dumneavoastra sau
http://www.dumneavoastra.numefirmagazda.com
Defectiunea trebuie cautata acolo unde ncepe secventa de cod eronata si nu unde se
sfrseste.
O parte din textul paginii nu este afisat
Textul sau obiectele care lipsesc din pagina pot fi depistate prin urmarirea ghilimelelor " "
si a etichetelor gresit nchise si care contin adrese URL.
Daca pagina contine ghilimele de deschidere n interiorul unei etichete, si cele de
nchidere trebuie sa se regaseasca n aceeasi eticheta. O eticheta din care lipsesc
ghilimelele de nchidere nu este interpretata corect si acest lucru poate produce rezultate
bizare. Daca eticheta careia i lipsesc ghilimelele este o eticheta ancora, ntreg textul de la
primele ghilimele pna la urmatoarele ntlnite ar putea fi interpretat de browser ca parte
dintr-o adresa URL.
O alta eroare care poate provoca acelasi efect este nchiderea gresita a etichetei continnd
o adresa URL. Daca o astfel de eticheta nu este nchisa corespunzator, browserul ar putea
interpreta orice text care urmeaza, pna la eticheta de nchidere corespunzatoare, ca fiind
parte a adresei URL.
Problema se rezolva prin examinarea etichetelor aflate naintea portiunii de text care nu
este afisata. Eroarea ar putea proveni de la orice eticheta care contine ghilimele sau o
adresa URL. Ghilimelele utilizate n editorul de text cu ajutorul caruia scrieti codul
HTML trebuie sa fie ntotdeauna n standard ASCII. Unele editoare de text utilizeaza asanumitele "smart quotes" , n care ghilimele de deschidere arata diferit fata de cele de
nchidere. Daca procesorul de text cu care lucrati are aceasta posibilitate, ea trebuie
dezactivata, deoarece acest tip de ghilimele, nefiind n standardul ASCII, nu vor functiona
corect n HTML.
Afisarea defectuoasa a formatului
n cazul cnd formatul afisat de browser nu este cel asteptat verificati mai nti
compatibilitatea dintre browser si stilul de caractere specificat n codul HTML. Browserul
trebuie sa fie capabil sa afiseze stilul ales. Atunci cnd sunt folosite stiluri logice,
browserul este ultima instanta n decizia privind stilul caracterelor afisate

342

DESIGNER PAGINI WEB

O metoda rapida de verificare a existentei unei probleme de compatibilitate este de a afisa
paginile utiliznd browsere diferite, dintre care unul sa poata afisa n mod sigur stilul de
caracter utilizat. Daca acel browser afiseaza textul incorect, se face verificarea codului
HTML. Daca textul este afisat corect, atunci exista o incompatibilitate cu celelalte
browsere.
n codul HTML, problema poate fi legata de o imbricare defectuoasa a etichetelor.
Verificati modul cum au fost imbricate etichetele de formatare din sectiunea de pagina
asociata cu eroarea respectiva. Astfel o constructie de tipul urmator:
<EM>Va multumim ca ati vizitat <STRONG>Pagina</EM>noastra</STRONG>
nu va functiona corect, deoarece etichetele <EM> si <STRONG> sunt imbricate eronat.

3. Rezumat
Dupa etapele de planificare, design si implementare urmeaza etapa de testare a site-ului.
n aceasta etapa se realizeaza:
Corectarea paginilor din punct de vedere ortografic si gramatical
Testarea legaturilor din cadrul site-ului
Testarea legaturilor externe
Depanarea greselilor care tin de sintaxa codului HTML
Etapa de testare este deosebit de importanta pentru impresia generala lasata de
site-ul dumneavoastra. Un site cu ortografie neglijenta, cu greseli de exprimare, cu
legaturi nefunctionale poate ndeparta vizitatorii, orict de valoroase ar fi informatiile
prezentate n interiorul sau.

343

DESIGNER PAGINI WEB

PARTEA XVI
PUBLICAREA SITE-ULUI

344

DESIGNER PAGINI WEB

n sfrsit, site-ul dumneavoastra este finalizat. Ati parcurs toate etapele, de la
planificare, la design si implementare, v-ati asigurat ca toate elementele functioneaza
corect. A venit momentul publicarii pe Web a site-ului, astfel nct rezultatele muncii
dumneavoastra sa fie cunoscute de toti aceea care va vor vizita paginile. n etapa
publicarii pe Web a site-ului intervin mai multi pasi:
Stabilirea unui nume de domeniu
Stabilirea serverului Web pe care va fi stocat (gazduit) site-ul
Organizarea si denumirea fisierelor n conformitate cu cerintele serverului gazda
Transferul fisierelor

1. Numele de domeniu
Pentru ca site-ul dumneavoastra sa aiba o identitate pe Web aveti nevoie de un nume de
domeniu pentru el. Numele de domeniu al site-ului va face parte din adresa URL a
fiecarei pagini si va oferi site-ului o prezenta distincta pe Web.
Domeniile principale de pe Web pot fi de mai multe tipuri:
comerciale .com
educationale .edu
guvernamentale .gov
furnizorii de servicii de retea .net
institutii non-profit .org
domeniile corespunzatoare tarilor lumii .ro, etc
Pentru a obtine un nume de domeniu pentru site aveti la dispozitie doua posibilitati:
domeniu platit
domeniu gratuit
Recomandat este sa creati pentru fiecare sectiune principala a sa cte un subdirector care
va contine fisierele asociate acelei sectiuni. Subdirectoarele pot contine la rndul lor cte
un fisier index. Atunci cnd veti transfera fisierele de pe computerul dumneavoastra pe
serverul Web veti putea sa transferati ntregul subdirector cu fisierele continute n el. De
asemenea aceasta metoda va face si ntretinerea site-ului mult mai usoara.
O alta problema este locul unde veti stoca imaginile. Practica standard este de a crea un
subdirector special n directorul "radacina" unde sa plasati toate imaginile din site. Daca
procedati astfel este extrem de important sa creati un subdirector similar cu aceeasi
amplasare si pe computerul dumneavoastra. Calea de la pagina care apeleaza o imagine la

345

DESIGNER PAGINI WEB

imaginea respectiva trebuie sa fie aceeasi si pe computerul dumneavoastra si pe server,
altminteri imaginile nu se vor afisa dupa ce site-ul a fost transferat pe server.
O alta varianta de stocare a imaginilor este crearea unui subdirector destinat imaginilor,
plasat n subdirectorul fiecarei pagini. Cu aceleasi precautii legate de calea corecta catre
imagini, aceasta metoda functioneaza bine, ba chiar mbunatateste viteza de ncarcare a
imaginilor n pagini. Dezavantajul consta n faptul ca adesea este necesar sa retineti mai
multe copii ale aceleiasi imagini n diferite subdirectoare, n functie de paginile unde este
folosita.
Verificarea numelor fisierelor
La mutarea fisierelor de pe computerul dumneavoastra pe serverul Web se impune
verificarea numelor fisierelor care trebuie sa fie compatibile cu sistemul pe sunt mutate.
O atentie deosebita trebuie acordata denumirii si extensiei fisierelor. Nu are importanta
daca optati pentru extensia .html sau .htm. Tot ce trebuie este sa fiti consecvent cu
extensia aleasa de-a lungul ntregului site. De asemenea, trebuie sa aveti n vedere ca n
sistemele UNIX, cele mai des folosite ca servere Web, denumirile fisierelor sunt casesensitive. O pagina denumita mypage.html nu este totuna cu pagina MyPage.html. Pentru
a evita confuziile folositi pentru denumirea fisierelor numai litere mici.
4. Transferul fisierelor
Transferul fisierelor care compun site-ul de pe computerul propriu pe serverul Web este o
operatiune relativ simpla, care consta n copierea fisierelor pe server n locatia destinata
site-ului dumneavoastra.
Vizitatorii site-ului vor sti imediat ca nu detineti propriul domeniu si folositi un serviciu
de hosting gratuit ceea ce va va afecta serios credibilitatea. Mai ales daca site-ul este unul
de afaceri, folosirea unui domeniu si serviciu de hosting gratuit este cu totul
contraindicata. n plus, firmele care ofera acest gen de servicii, impun afisarea unor
bannere publicitare care distrag atentia vizitatorilor de la continutul site-ului si maresc
timpul de ncarcare al paginilor.
2. Serviciul de gazduire Web (Web hosting)
nainte de a publica site-ul pe Web este necesara o evaluare a necesitatilor de acces,
pentru a determina ce fel de cont se potriveste site-ului dumneavoastra. Plecnd de la
presupunerea ca detineti deja o conexiune la Internet, nu vom intra n amanunte privind
alegerea unui furnizor de servicii Internet (ISP Internet Service Provider). Totusi, n
cazul cnd nca nu detineti o conexiune sau doriti sa schimbati provider-ul actual, va

346

DESIGNER PAGINI WEB

recomandam sa studiati cu atentie ofertele principalilor furnizori de servicii. Avnd n
vedere ca nu va veti mai limita doar la simpla navigare pe Web sau la schimbul de
emailuri ci veti dori sa transferati si sa ntretineti un site Web necesitatile dumneavoastra
vor creste. Din acest motiv este bine sa va informati asupra unor detalii tehnice cum ar fi
latimea de banda, mediul de transmisie (antena satelit, cablu cu fibre optice, unde radio),
ce tip de server foloseste, asistenta tehnica oferita, daca ofera gazduire pentru pagini Web.
Optiunile pentru gazduire sunt urmatoarele:
Instalarea unui server Web propriu
Utilizarea serverului Web al providerului de servicii Internet
Utilizarea unui server Web apartinnd unei firme care ofera servicii de hosting
Instalarea unui server Web propriu
Instalarea unui server Web propriu este cea mai costisitoare solutie, dar ea ofera n schimb
avantaje semnificative. Dispunnd de o conexiune dedicata se pot furniza servicii Web 24
de ore/zi utilizatorilor din lumea ntreaga. Veti dispune de un control complet asupra
serverului Web si puteti publica orice doriti. Puteti configura serverul si pentru alte
servicii, cum ar fi FTP, Gopher, Telnet, scripturi CGI, etc. Puteti de asemenea avea
propriul domeniu care va stabili o prezenta distincta pe Web. Adresa URL va avea forma
urmatoare:
http://www.firma_dumneavoastra.com/
ntruct costurile necesare echipamentului hardware, conexiunii la Internet, configurarii si
ntretinerii unui server propriu depasesc posibilitatile unui utilizator obisnuit, nu vom
insista asupra acestei solutii.
Utilizarea serverului Web al providerului ISP
Utilizarea serverului Web al providerului dumneavoastra de Internet este o optiune
economica. Multi dintre furnizorii de servicii Internet ofera n cadrul contului de acces si
un anumit spatiu pe serverele proprii pe care va puteti plasa site-ul, fara a percepe taxe
suplimentare. Din pacate, spatiul oferit este de obicei mic, de ordinul 1-3 Mb si nu sunt
oferite facilitati pentru crearea de pagini dinamice. Pentru a obtine facilitati suplimentare
va trebui sa platiti n plus.
Cu toate ca fisierele standard, contul de email si fisierele publicate pe Web utilizeaza
acest spatiu, 2-3 Mb sunt de regula suficienti pentru a mentine un site modest ca
dimensiuni. Contul la ISP este accesibil pe baza unei conexiuni dial-up care permite o
legatura cu o viteza de pna la 56 Kbps.

347

DESIGNER PAGINI WEB

nainte de a deschide un astfel de cont, trebuie verificate detaliile privind spatiul de
stocare, taxele pentru spatiul aditional, n mod curent 2$ pentru 1 Mb, eventualele alte
taxe. Trebuie verificata de asemenea disponibilitatea altor servicii, cum ar fi FTP, Gopher,
Telnet, scripturi CGI, care ar trebui sa poata fi utilizate gratuit, n cazul n care exista.
Un cont la un provider ISP este o optiune economica dar, n acelasi timp, limitata. Nu
exista control al serverului Web, serviciile aditionale ramnnd la latitudinea providerului.
Nu veti avea propriul domeniu, iar adresa URL va arata astfel:
http://www.provider.com/~dumneavoastra
Utilizarea unui serviciu de hosting
Cea mai buna solutie din punctul de vedere al raportului servicii/pret o reprezinta
folosirea unui serviciu de hosting platit. Ofertele de pe piata romneasca sunt numeroase
si variate ca pret. nainte de a face o alegere este bine sa faceti un studiu comparativ al
acestora n privinta spatiului pus la dispozitie, al modului de transfer al fisierelor, al
traficului impus precum si al prezentei diverselor facilitati: scripturi CGI, baze de date,
email personalizat, etc. Nu trebuie sa pierdeti din vedere ca site-ul dumneavoastra se
poate dezvolta astfel nct spatiul de stocare rezervat la nceput poate deveni insuficient.
Utiliznd un serviciu de hosting adresa URL a site-ului va avea forma urmatoare:
http://www.dumneavoastra.com
De asemenea veti beneficia si de una sau mai multe adrese de email personalizate de
tipul:
adresa@dumneavoastra.com
Folosirea serviciilor unei firme de hosting va permite ca, odata ce detineti propriul nume
de domeniu, sa va transferati site-ul pe serverul Web al firmei si sa beneficiati de o
prezenta stabila pe Web. Firmele de hosting ofera uneori si nume de domenii pentru
clientii lor nsa exista riscul ca daca va hotarti sa renuntati la serviciile acelei firme sa
pierdeti domeniul. Din acest motiv este mai bine sa tratati separat cele doua probleme.
3. Organizarea si denumirea fisierelor
Desi aceasta etapa este intrinseca procesului de construire a site-ului, o vom discuta n
acest capitol, deoarece acum este momentul cnd o buna organizare a directoarelor,
subdirectoarelor si fisierelor devine deosebit de importanta
Organizarea directoarelor si fisierelor
Este foarte bine sa organizati fisierele care fac parte din site pe computerul
dumneavoastra exact asa cum ele vor fi organizate pe serverul Web. Serverul Web are un

348

DESIGNER PAGINI WEB

director "radacina" (root) unde vor fi stocate toate fisierele site-ului. Folderul unde veti
stoca aceste fisiere pe computerul personal va juca rolul directorului "radacina" al
serverului. n directorul "radacina" va fi plasat fisierul care va contine pagina "home" a
site-ului, fisier denumit de obicei index.html sau index.htm.
Daca site-ul este de mici dimensiuni (ntre 5 si 10 pagini) puteti plasa toate fisierele n
acelasi director.
Continuati sa nvatati, perfectionati-va continuu si succesul viitor va este asigurat.
Firmele de hosting asigura o aplicatie speciala destinata transferului fisierelor, dar cea mai
utilizata metoda de transfer este prin intermediul unui client FTP.
Un client FTP (File Transfer Protocol) este o aplicatie prin intermediul careia se poate
realiza transferul fisierelor de pe un sistem pe altul. Puteti copia fisiere de pe computerul
personal pe un alt computer (operatie denumita Upload) dupa cum puteti prelua fisiere de
pe un alt computer, pe computerul personal (operatie denumita Download). Cele mai
folosite

programe

FTP

sunt

CuteFTP

(http://www.cuteftp.com)

si

WS_FTP

(http://ipswitch.com). Odata ce ati instalat pe computerul dumneavoastra un client FTP, vati nregistrat numele de domeniu si aveti un cont la un serviciu de gazduire totul este
pregatit pentru transferul fisierelor care compun site-ul pe serverul gazda.
Pentru a realiza transferul fisierelor, n general va trebui sa urmati urmatorii pasi:
Conectarea la Internet
Deschiderea programului FTP. Veti observa o serie de casete de dialog n care trebuie
introduse informatiile necesare programului pentru a realiza conexiunea cu computerul
gazda.
- Pentru a face conexiunea cu serverul trebuie sa furnizati programului adresa FTP a hostului dumneavoastra. Aceasta va este furnizata de firma de hosting la deschiderea contului.
De asemenea, programul va va cere numele de utilizator si parola pe care le-ati stabilit la
deschiderea contului. Nu uitati sa de-bifati optiunea Anonymous din meniul Login. Prin
introducerea numelui de utilizator si a parolei veti capata acces la contul dumneavoastra
si veti putea intra n directorul unde vor fi plasate fisierele site-ului.
O alta informatie care trebuie furnizata programului este tipul fisierelor transferate. n
general pentru fisierele HTML se foloseste optiunea ASCII iar pentru celelalt fisiere,
optiunea binary. Mai simplu, puteti alege optiunea AutoDetect prin care programul
determina singur tipul fisierului si modul cum va face transmiterea lui.
Celelalte casete de dialog pot fi lasate necompletate sau cu setarile preexistente.

349

DESIGNER PAGINI WEB

Dupa furnizarea acestor informatii programul FTP va realiza conexiunea cu serverul
gazda.
Selectarea fisierelor pe care doriti sa le copiati. Veti observa ca fereastra aplicatiei FTP
este mpartita n doua: ntr-o parte aveti directoarele de pe computerul personal, n
cealalta parte directoarele de pe computerul gazda. Selectati directorul care contine
fisierele dumneavoastra si dati comanda de transfer n directorul care va este destinat pe
serverul gazda.
Daca folositi scripturi CGI asociate site-ului trebuie sa le acordati o atentie speciala. Cele
mai multe servere necesita instalarea scripturilor CGI ntr-un subdirector special numit
cgi-bin, aflat n directorul dumneavoastra. Pentru plasarea si setarea corecta a scripturilor
trebuie sa luati legatura cu administratorul serverului gazda care va va oferi indicatiile
necesare.
Pe unele sisteme de operare modul de accesare al fisierelor este strict definit, permitnd
sau restrictionnd citirea, scrierea sau executarea fisierelor de catre diferiti utilizatori.
Aceste facilitati sunt setate de regula prin drepturile de acces atribuite fisierelor. Din acest
motiv, verificarea modului de setare a fisierelor este extrem de importanta. De exemplu,
n sistemele UNIX modul 705 semnifica faptul ca fisierele pot fi citite, modificate sau
executate de proprietarul lor, n vreme ce alti utilizatori nu le pot dect citi sau executa
(dupa caz).
Dupa transferul fisierelor, pot aparea probleme de diverse tipuri. Uneori, paginile
publicate nu pot fi accesate deloc, scripturile nu functioneaza, etc. Primul lucru care
trebuie verificat n acest caz este daca fisierele se afla n directoarele potrivite. Apoi
trebuie verificate permisiunile de acces pentru directoare si fisiere, extensiile fisierelor,
fisierele index. n cazul cnd apar probleme, cea mai sigura cale de rezolvare a lor este sa
luati legatura cu administratorul serverului gazda si sa i cereti informatii ct mai
complete privind drepturile de acces pentru directoare, calea corecta catre scripturile
folosite si, n general, setarile necesare pentru buna functionare a site-ului.
5. Rezumat
n etapa de publicare pe Web a site-ului trebuie parcursi urmatorii pasi:
Stabilirea unui nume de domeniu pentru site: gratuit sau platit.
Gasirea unui serviciu de gazduire convenabil sub raportul servicii/pret.
Organizarea si denumirea directoarelor si fisierelor n conformitate cu cerintele
sistemului serverului gazda.

350

DESIGNER PAGINI WEB

Transferul fisierelor, cea mai folosita metoda de transfer fiind prin FTP.

351

DESIGNER PAGINI WEB

PARTEA XVII
NTREINEREA SIT-ULUI

352

DESIGNER PAGINI WEB

Pentru orice proprietar de site este destul de dificil sa urmreasc zilnic site-ul si cu att
mai dificil este sa fie la curent cu toate tendinele noi de pe internet , cu noile tehnologii si
mai ales sa tina pasul cu noile condiii de securizare a site-urilor.
Un site web care nu este ntreinut va pierde cu sigurana poziiile iniiale in motoarele de
cutare pentru ca n permanenta apar site-uri noi care aduc informaii si tehnologii de
ultima ora si care inevitabil vor ctiga poziiile fruntae. Nu lsai concurenta sa v-o ia
nainte, fii mereu cu un pas naintea acestora cu ajutorul ntreinerii web site!
Internetul este un domeniu ntr-o expansiune continua i cu o dinamica deosebit de
accentuat. Periodic se schimb pe internet regulile de securizare, regulile de clasare a
unui site n clasamente i tehnologiile folosite in spatele unui site.
ntreinerea unui site este o activitate obligatorie n cazul n care se dorete ca un site s
devin din ce in ce mai vizitat i s aduc un surplus progresiv de imagine i venit .
Optimizarea sit-urilor pentru motoarele de cutare reprezint procesele pe care un expert
SEO le realizeaz pentru ca un site s obin o poziie bun n motoarele de cutare.
Apelnd la un expert SEO afacerea ta va fi vizibil pe motoarele de cutare, acest lucru
nseamn poteniali clieni.
Optnd pentru serviciile SEO.ro, vei gsi n permanen soluii de perfecionare a
strategiei online, tehnici de optimizare pentru o mai bun vizibilitate pe motoarele de
cutare, i mai presus de toate vei beneficia de o investiie de viitor.
Servicii SEO: Grup strategic de cuvinte cheie, definirea publicului int.
Elaborarea listei de cuvinte cheie este unul din serviciile de baz de optimizare seo. Orice
strategie de optimizare are la baz elaborarea unei liste de cuvinte i expresii cheie pentru
domeniul respectiv de activitate. Practic, odat cu aceasta lista se definesc i obiectivele,
scopul final acela de a aduce trafic calificat pe site i de a transforma vizitatorii n clieni.
Servicii SEO: Auditul tehnic, consultana, analiza i diagnosticare tehnica website.
n aceast etap site-ul este supus unei analize tehnice avansate, astfel nct, nainte de a
ncepe implementarea tehnic i integrarea strategiei de coninut, s identificam i s
eliminm factorii care blocheaz vizibilitatea site-ului.
Servicii SEO: Planul de optimizare, consiliere, monitorizare, analiz statistic web
Acesta etapa de optimizare reprezint un adevrat plan de aciuni tehnice care vizeaz
optimizarea paginilor site-ului dumneavoastr cu cuvintele cheie alese. Aceasta conine
att recomandri generale, care vizeaz site-ul n ansamblul su, ct i recomandri
specifice anumitor pagini cu importan sporit.

353

DESIGNER PAGINI WEB

Arhitectura site-ului, dispunerea legturilor interne, imaginile i layoutul paginilor vor
ndeplini un standard de optimizare conform exigentelor actuale.
Multe firme considera ca dup realizarea site-ului, munca s-a ncheiat si nu acorda o
importanta prea mare administrrii i ntreinerii site-ului. Aceasta greeala, care din
pcate este destul de frecventa, are ca rezultat existenta multor site-uri cu informaii
neactualizate de luni sau chiar ani de zile.
Pentru ca site-ul dvs. sa fie permanent actualizat si sa prezinte informa ii corecte firme
specializate ofer pe baz de abonament lunar servicii complete de administrare i
ntreinere a site-urilor web:
Verificare zilnica a funcionalitii site-ului
Verificare zilnica a funcionalitii linkurilor si a formularelor din cadrul paginilor
Actualizarea / Modificarea paginilor web (texte, imagini etc.)
Introducerea in site a noilor oferte/servicii/produse
Prelucrarea imaginilor
Modificarea designului site-ului n funcie de noile necesiti
Configurarea conturilor de e-mail
Administrarea bazelor de date
Monitorizare permanenta a site-ului
Monitorizarea pagerank-ului i rezultatelor n motoarele de cutare
Optimizarea vitezei de incarnare a paginilor web
Efectuarea modificrilor se face in maxim 24 de ore de la solicitare
Editarea si trimiterea unui newsletter periodic
Statistici sptmnale privind numrul de vizitatori si cuvintele cheie cele mai cutate
ntreinerea complet a sit-ului const n:
- statistici zilnice seo + trafic
- analiza zilnica securitate
- creare de subdomenii
- reorganizri structurale sit i creare de sit-uri satelit pe subdomenii
- optimizare n vederea creterii numrului de vizitatori si a valorii sit-ului
- numr nelimitat de schimbri i completri in sit
- numr nelimitat de schimbri de design site

354

DESIGNER PAGINI WEB

- ntreinere interactiva n care cei ce ntrein vin cu idei i propuneri noi de
randamentizare i optimizare a sit-ului
- numr nelimitat de prelucrri foto i video pentru postare pe sit.
Firmele specializate ofer abonamente pentru servicii de ntreinere a sit-ului. n
funcie de serviciile pe care le ofer preul acestora variaz. Un abonament complet
ajunge i la 300 euro/ lun

355

DESIGNER PAGINI WEB

BIBLIOGRAFIE
1. Beatley, T. and Manning, K., The Ecology of Place: Planning for Environment,
Economy, and Community, Washington, DC: Island Press, 1997.
2. Bell, C., and Newby, H., The sociology of community: A selection of readings. London:
3. Frank Cass, 1974.
4. Briassoulis, H., Policy integration for complex policy problems: what, why and how,
lucrare prezentat la Conferina de la Berlin, 2004.
5. Brown, B.J. et al., Global Sustainability: Toward Definition, 1987, Environmental
Management.
6. Bugge, H. C., 1987-2007: Our Common Future Revisited, in Sustainable
Development in International and National Law, Groningen: Europa Law Publishing,
2008.
7. Campbell, S., Green Cities, Growing Cities, Just Cities? Urban Planning and the
Contradictions of Sustainable Development, in Campbell, S. and Fainstein, S. (eds.),
Readings in Planning Theory, Blackwell Publishing, 2003.
8. CEC, European Governance. A White Paper, Commission of the European
Communities, Brussels, 2001.
9. Comhar (Sustainable Development Council), European Commission Working
Document Consultation on the Future EU 20 Strategy, Comhar Sustainable
Development Council (Ireland) Comments, 2010.
10. Comisia European Project Cycle Management Guidelines supporting effective
implementation of EC Externl Assistance, Bruxelles, martie 2004
11. Consiliul European Council Regulamentul Nr 1080/2006 al Parlamentului European
si Consiliului privind Fondul European de Dezvoltare Regional, Bruxelles, iulie 2006
12. Consiliul European Council Regulamentul Nr 1081/2006 al Parlamentului European
si Consiliului privind Fondul Social European, Bruxelles, iulie 2006
13. Consiliul European Council Regulamentul Nr 1083/2006 al Parlamentului European
si Consiliului privind prevederile generale ale Fondului European de Dezvoltare
Regionala, Fondului Social European si Fondului de Coeziune, Bruxelles, iulie 2006

356

DESIGNER PAGINI WEB

14. Consiliul European Council Regulamentul No 1084/2006 establishing a Cohesion
Fund Regulamentul Consiliului nr 1084/2006 privind nfiinarea Fondului de coeziune,
Bruxelles, iulie 2006
15. Consiliul European Financial perspective 2007-2013, Bruxelles, decembrie 2005
16. Fox, J.A. and Brown, D.L. (eds.), The Struggle for Accountability: The World Bank,
NGOs, and Grassroots Movement, Cambridge, Mass.: MIT Press, 1998.
17. Gherghinescu Oana, Rinderu Paul, Neagoe-Bcanu Daniel, Managementul
proiectelor finanate din fonduri structurale, Editura Universitaria, Craiova, 2008
18. Goldsmith, E. et al., Blueprint for Survival, Boston: Houghton Mifflin, 1972.
19. Iliescu Victor, Gherghinescu Oana, Managementul Proiectelor, Editura Didactic i
Pedagogic, Bucureti, 2005
20. Kidd, C., The Evolution of Sustainability, 1992, Journal of Agricultural and
Environmental Ethics, 5/1,.
21. Jordan, A. i Schout, A., The Coordination of the European Union, Oxford: Oxford
University Press, 2006.
22. Lafferty, W.M. i Houden, E., Environmental Policy Integration: Towards an
Analytical Framework, 2003, Environmental Politics, 12(3) .
23. Lang, S., Promoting Sustainable Development in Europe through Regional Funds,
WWF European Policy Office, aprilie 2008.
24. Macleod, C., Contingency and Sustainable Development Policy Integration: Lessons
from Scotlands European Structural funds Experience, 58 Political Studies Association
Conference, University of Swansea, aprilie 2008.
25. Meadows, D. et al., The Limits to Growth, New York: Universe Books, 1972.
26. Morand, F. & Barzman, M., European sustainable development policy (1972-2005)
27. OECD, Strategies for Sustainable Development: Practical Guidance for
Development Cooperation, Paris: OECD, 2001.
28. Vatanen, L., EU Sustainable Development Strategy, Vleva-Liaison Agencz Flanders
Europe, decembrie 2009.
29. WCED (The World Commission on Environment and Development), Our Common
Future, Oxford: Oxford University Press, 197.
30. Wheeler, S.M., Planning for Sustainability. Creating Livable, equitable, and
Ecological Communities, New York: Routledge, 2004.

357

DESIGNER PAGINI WEB

31. Zachary, J., Sustainable Community Indicators: Guideposts for Local Planning,
California: Community Environmental Council Inc., 1995.
32. http://www.fonduri-ue.ro/ Autoritatea pentru Coordonarea Instrumentelor Structurale
33. http://www.fseromania.ro/

Fondul Social European n Romnia

34. http://www.inforegio.ro/ Programul Operaional Regional

358