Documente Academic
Documente Profesional
Documente Cultură
Manual - Designer Pagini Web AM PDF
Manual - Designer Pagini Web AM PDF
Anca Mehedinu
Irina Ciocrlan
1
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
2
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
3
DESIGNER PAGINI WEB
PARTEA I
DEZVOLTAREA PROFESIONAL.
COMUNICAREA INTERACTIV LA
LOCUL DE MUNC. LUCRUL N ECHIP
4
DESIGNER PAGINI WEB
Aspecte generale
5
DESIGNER PAGINI WEB
Exemplu
Domeniu de Pai De ce suport am Perioada
competen nevoie? de timp
Recomandari:
6
DESIGNER PAGINI WEB
Gama de variabile
7
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.
Gama de variabile
8
DESIGNER PAGINI WEB
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.
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:
9
DESIGNER PAGINI WEB
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:
10
DESIGNER PAGINI WEB
11
DESIGNER PAGINI WEB
PARTEA II
APLICAREA PROCEDURILOR DE
CALITATE
12
DESIGNER PAGINI WEB
13
DESIGNER PAGINI WEB
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
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 N FORMAT ELECTRONIC
19
DESIGNER PAGINI WEB
I.Data i informaia
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.).
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.
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
1. Introducerea datelor;
2. Prelucrarea datelor;
3. Extragerea informaiilor;
4. Arhivarea(stocarea)datelor.
Este procesul prin care datele sunt prelucrate de calculator i convertite ntr-un format pe
care-l poate prelucra.
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:
23
DESIGNER PAGINI WEB
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:
25
DESIGNER PAGINI WEB
26
DESIGNER PAGINI WEB
27
DESIGNER PAGINI WEB
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
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.
30
DESIGNER PAGINI WEB
31
DESIGNER PAGINI WEB
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.
32
DESIGNER PAGINI WEB
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
33
DESIGNER PAGINI WEB
Opus funciei de Anulare Tastare este funcia Repetare Tastare care reface ultima
negru ex:
Pentru deselectarea textului se realizeaz un clic n orice parte a documentului.
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
34
DESIGNER PAGINI WEB
. 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.
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
35
DESIGNER PAGINI WEB
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);
Aldin Cursiv
Culoare text
(ngroare) (nclinare)
Subliniere
36
DESIGNER PAGINI WEB
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
stnga dreapta - pentru alinierea paragrafului la stnga-dreapta se selecteaz
37
DESIGNER PAGINI WEB
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
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.
38
DESIGNER PAGINI WEB
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.
39
DESIGNER PAGINI WEB
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
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
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
40
DESIGNER PAGINI WEB
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
imaginea gsit trebuie s facei clic pe ea sau pe bara gri care apare n
dreapta pozei i s alegei comanda Insert.
41
DESIGNER PAGINI WEB
, dreptunghiuri sau ptrate dac inei tasta Shift apsat cu , elipse sau cercuri cu
42
DESIGNER PAGINI WEB
43
DESIGNER PAGINI WEB
PARTEA VI
LIMBAJUL HTML, BAZE DE DATE
MYSQL, LIMBAJUL JAVASCRIPT,
CADRUL DE SOFTWARE,
FRAMEWORK.NET
44
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
45
DESIGNER PAGINI WEB
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,
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).
46
DESIGNER PAGINI WEB
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.
47
DESIGNER PAGINI WEB
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
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.
48
DESIGNER PAGINI WEB
Fundamental, este un fiier text cu extensia .html sau htm. Aa arat o pagin
web simpla atunci cand este deschisa cu un browser web.
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. Tag-
urile 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 <sub></sub>.
<sub>n ora mea cea mai ntunecat</sub> 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 <sup></sup>.
<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).
51
DESIGNER PAGINI WEB
52
DESIGNER PAGINI WEB
∈</font>A
Tag-urile HTML
Un document HTML ncepe cu un element HTML care conine HEAD i BODY
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.
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>
54
DESIGNER PAGINI WEB
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
pagina web!
</FONT>
<HR>
55
DESIGNER PAGINI WEB
</BODY>
</HTML>
Crearea unei pagini web folosind cod HTML cu exemple de formatare a textului
56
DESIGNER PAGINI WEB
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 <sup>sus</sup> este superscript iar <sub>jos</sub> 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.
<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>
57
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>
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 >
58
DESIGNER PAGINI WEB
</CENTER></BODY></HTML>
Crearea unei pagini web folosind cod HTML cu exemple de imagini i background
59
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>
60
DESIGNER PAGINI WEB
posibilitatea s introduci orice fel de coninut doreti n aceste celule: text, imagini, i
chiar
alte tabele.
<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.
61
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.
62
DESIGNER PAGINI WEB
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.
63
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>.
64
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>
65
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>
66
DESIGNER PAGINI WEB
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>
67
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 ).
68
DESIGNER PAGINI WEB
69
DESIGNER PAGINI WEB
70
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>
71
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>
72
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
73
DESIGNER PAGINI WEB
74
DESIGNER PAGINI WEB
MULTIMEDIA
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".
75
DESIGNER PAGINI WEB
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.
76
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 client-
server, 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.
Deservirea paginilor
77
DESIGNER PAGINI WEB
78
DESIGNER PAGINI WEB
Deservirea paginilor
79
DESIGNER PAGINI WEB
Static si dinamic
80
DESIGNER PAGINI WEB
81
DESIGNER PAGINI WEB
82
DESIGNER PAGINI WEB
<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>';
?>
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
83
DESIGNER PAGINI WEB
84
DESIGNER PAGINI WEB
print "Salut";
print"\n"; # acum se afiseaza caracterul care determina
trecerea la un rand nou
# randul nou va fi afisat in textul primit de browser
(vizibil in sursa HTML)
print"<br>"; # se afiseaza tagul BR ce va fi interpretat de
browser ca 'linie noua'
# 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
85
DESIGNER PAGINI WEB
123
S-a afisat doar ce s-a indicat, 3 caractere, pe o singura linie, fara
spatii.
<script language="php">
/* forma disponibila oricand, putin folosita */
</script>
<?
/* taguri scurte, acceptarea lor de catre web-server depinde
de configurare */
?>
<%
/* taguri in stilul asp, acceptarea lor de catre web-server
depinde de configurare */
%>
86
DESIGNER PAGINI WEB
87
DESIGNER PAGINI WEB
echo "Text";
Instructiuni de atribuire
Instructiunea if
88
DESIGNER PAGINI WEB
<?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";
print "3 este mai mic decat 2";
?>
Codul de mai sus va afisa:
<?php
89
DESIGNER PAGINI WEB
Instructiunea if - else
Siruri de caractere
90
DESIGNER PAGINI WEB
toate astea, PHP trateaza in mod diferit aceste caractere. Mai multe
explicatii si exemple sunt prezentate in pagina "Variabile.Constante".
<?php
print"Ma numesc \"Alex\"!"; // sir ce contine ghilimele, se
foloseste \"
print'Porecla ta e Kelu\' ?'; // sir delimitat de ghilimele
simple ce contine un apostrof
print <<<TXT
Text pe mai multe linii.
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;
91
DESIGNER PAGINI WEB
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 */
/* afiseaza
Salut!
*/
?>
Nota: comentariile /* */ nu pot fi imbricate (unele in altele). Exemplul
urmator nu este un cod valid.
<?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.
92
DESIGNER PAGINI WEB
Terminarea executiei
<?php
exit( "Script terminat" );
die( "Script terminat" );
Variabile in PHP
Ce sunt variabilele?
Declararea variabilelor
93
DESIGNER PAGINI WEB
$text = "Salut";
$text2 = 'Ce faci?';
// vector
$vectorGol = array();
$vectorS = array( 10,11,12,13 ); // vector simplu
// vector asociativ
$vector = array(
'luni' => 'Monday',
'marti' => 'Tuesday',
'miercuri' => 'Wednesday'
);
94
DESIGNER PAGINI WEB
$vaRiabila = "alb";
$Variabila = 1;
Atribuirea de valori
Stergerea variabilelor
$variabila = null;
95
DESIGNER PAGINI WEB
Afisarea variabilelor
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";
$var = 0;
96
DESIGNER PAGINI WEB
// $var2 = 1;
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'
);
97
DESIGNER PAGINI WEB
Dublu-dolar ($$nume)
$obiect = 'masina';
$masina = "Chevrolet";
$avion = "Boeing";
$tren = "TGV";
Constante
98
DESIGNER PAGINI WEB
if ( !defined( 'VARSTA' ) ) {
define( 'VARSTA' , 2 );
}
print " Am " . VARSTA . " ani";
99
DESIGNER PAGINI WEB
$_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.
$_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 );
100
DESIGNER PAGINI WEB
101
DESIGNER PAGINI WEB
$_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
Constante magice
102
DESIGNER PAGINI WEB
?>
FUNCTION
Returneaza numele functie din interiorul careia se foloseste constanta.
<?php
# declar o functie care contine o constanta magica
function spuneNumele() {
echo __FUNCTION__;
}
103
DESIGNER PAGINI WEB
Operatori de comparare
$a == $b // egal
$a === $b // identic (aceeasi valoare si acelasi tip)
$a != $b // diferit
$a <> $b // diferit
$a !== $b // ne-identic
<?php
$a = 4; # initializam $a cu numarul 4
$b = "4"; # initializam $b cu string-ul "4"
104
DESIGNER PAGINI WEB
# corect
print $a == 1; # se afiseaza rezultatul comparatiei
105
DESIGNER PAGINI WEB
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.
Operatori de incrementare/decrementare
106
DESIGNER PAGINI WEB
$a = 1;
print$a++; // afiseaza 1 - mai intai se afiseaza valoarea
curenta, dupa care $a devine 2;
print$a; // afiseaza 2 - $a are valoarea 2 dupa
incrementare;
$a = 1
print++$a; // afiseaza 2 - mai intai $a creste cu o unitate,
apoi este afisata noua valoare
print $a; // afiseaza 2 - $a are valoarea 2;
Nota: aceleasi observatii (legate de pozitie) se aplica si pentru
operatorul de decrementare.
$a = 2;
print$a--; // afiseaza 2 - mai intai se afiseaza valoarea
curenta, dupa care $a devine 1;
print$a; // afiseaza 1 - $a are valoarea 1 dupa
decrementare;
$a = 2
print--$a; // afiseaza 1 - mai intai $a scade cu o unitate,
apoi este afisata noua valoare
print $a; // afiseaza 1 - $a are valoarea 1;
Operatori de atribuire
$a = 1; // atribuire simpla
107
DESIGNER PAGINI WEB
$a = "Eu am";
print $a . " mere"; // afiseaza Eu am mere;
108
DESIGNER PAGINI WEB
Operatorul de executie ` `
Alti operatori
109
DESIGNER PAGINI WEB
(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.
// script.php
include( 'config.php' );
echo 'Sunt in script.php <br />';
?>
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' ); // genereaza un warning
si merge mai departe
echo 'Acest mesaj va fi afisat';
110
DESIGNER PAGINI WEB
?>
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()
111
DESIGNER PAGINI WEB
Functii matematice
Functia set_time_limit()
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
112
DESIGNER PAGINI WEB
?>
Functia phpinfo()
113
DESIGNER PAGINI WEB
114
DESIGNER PAGINI WEB
115
DESIGNER PAGINI WEB
$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';
116
DESIGNER PAGINI WEB
/* afiseaza
Am gasit 0 pe pozitia 11
*/
117
DESIGNER PAGINI WEB
Iterarea cu foreach()
// 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
118
DESIGNER PAGINI WEB
/* afiseaza
Mo inseamna luni
Tu inseamna marti
We inseamna miercuri
Th inseamna joi
Fr inseamna vineri
Sa inseamna sambata
Su inseamna duminica
*/
<?php
119
DESIGNER PAGINI WEB
);
?>
Rezultat:
Romania
France
Bulgaria
United Kingdom
<?php
$countries = array(
'AF'=>'Afghanistan',
'AL'=>'Albania',
'DZ'=>'Algeria',
'AS'=>'American Samoa',
120
DESIGNER PAGINI WEB
'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'
);
?>
<?php
121
DESIGNER PAGINI WEB
# preiau nr de email-uri
$n = count( $emails );
122
DESIGNER PAGINI WEB
?>
Rezultat:
Operatii cu vectori
123
DESIGNER PAGINI WEB
// sorteaza un vector
sort( $vector ); // 1, 2, 3, 4, 5, 6
rsort( $vector ); // 6, 5, 4, 3, 2, 1
asort($vectAs ); // sorteaza valorile si mentine asocierea
cheilor
124
DESIGNER PAGINI WEB
<?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!
125
DESIGNER PAGINI WEB
Depanare
print_r( $vectAs );
/* afiseaza
Array
(
[unu] => one
[doi] => two
[trei] => 3
)
*/
var_dump( $vectAs );
/* afiseaza
array(3) {
["unu"]=>
string(3) "one"
["doi"]=>
string(3) "two"
["trei"]=>
int(3)
}
*/
126
DESIGNER PAGINI WEB
Lungimea
127
DESIGNER PAGINI WEB
Transformarea sirului
128
DESIGNER PAGINI WEB
Interpretarea sirului
parse_str($str, $output);
print $output['first']; // value
print $output['arr'][0]; // foo bar
print $output['arr'][1]; // baz
Masuri de siguranta
129
DESIGNER PAGINI WEB
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.
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
130
DESIGNER PAGINI WEB
?>
131
DESIGNER PAGINI WEB
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
# se preia data/ora curenta
$acum = time(); // $acum este o data in format Unix:
1333952692
132
DESIGNER PAGINI WEB
?>
$acum = time();
$maiTarziu = 480 /*ore*/ * 60 /*minute*/ * 60 /*secunde*/;
133
DESIGNER PAGINI WEB
?>
<?php
$t = localtime( time(), true ); // returneaza un vector cu
elementele datei si orei locale
$h = $t[ 'tm_hour' ]; // iau doar ora
134
DESIGNER PAGINI WEB
// Buna dimineata!
?>
January
February
March
April
135
DESIGNER PAGINI WEB
May
June
July
August
September
October
November
December
<?php
$time_start = microtime(true); # la inceputul codului PHP
Functii in PHP
136
DESIGNER PAGINI WEB
137
DESIGNER PAGINI WEB
?>
Am scris, asadar, o singura data codul care afiseaza lunile anului si l-
am 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' );
<?php
function alta() {
print 'Azi e o zi obisnuita<br />';
}
138
DESIGNER PAGINI WEB
# declar o variabila
$a = "Afara e frumos";
# definesc o functie
function afisMesaj() {
echo $a;
}
139
DESIGNER PAGINI WEB
# 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.
# 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 $a;
echo $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:
140
DESIGNER PAGINI WEB
modularizare
Odata cu aparitia functiilor (a subprogramelor, in general) s-a introdus
si conceptul de modularizare care presupune impartirea (spargerea)
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.
141
DESIGNER PAGINI WEB
function formatareData() {
$rezultat = date( 'd-m-Y' );
return $rezultat;
}
?>
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
142
DESIGNER PAGINI WEB
$x = 1; $y = 4;
print minim( $x, $y ); // parametrii sunt 2 variabile
$x = 4; $a = 3; $b = 5;
printminim( $x, minim( $a, $b ) ); // parametrii primului
apel sunt: variabila $x
// si rezultatul unui alt apel cu 2 parametrii diferiti
?>
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 );
?>
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;
143
DESIGNER PAGINI WEB
?>
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
?>
144
DESIGNER PAGINI WEB
Formulare
145
DESIGNER PAGINI WEB
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
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
146
DESIGNER PAGINI WEB
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".
pagina.php?element1=valoare1&element2=valoare2
Astfel, acelasi efect ca si folosirea formularului s-ar obtine daca s-ar
accesa direct pagina cu parametrul
147
DESIGNER PAGINI WEB
<?php
# mai intai verificam daca a fost trimis formularul
if( isset( $_POST ) && !empty( $_POST )) {
# da, a fost trimis; verificam fiecare componenta
148
DESIGNER PAGINI WEB
149
DESIGNER PAGINI WEB
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)
5. In PHP, elementele formularului sunt disponibile prin intermediul
variabilei globale $_GET (sau prin $_REQUEST)
POST
1. Cantitatea de date ce poate fi transmisa prin POST poate fi
restrictionata doar de catre serverul web, desi nu exista o limitare
reala
2. Datele transmise prin POST nu apar in URL si nu pot fi alterate
usor, ceea ce ofera un oarecare grad de securitate
3. In mod implicit, datele preluate prin POST nu sunt puse in cache-
ul de la browser sau proxy-server; astfel folosind aceasta metoda vor fi
afisate intotdeauna datele reale
4. Codificarea caracterelor speciale se poate realiza ca si la GET
folosind atributul enc-type al formularului (application/x-www-form-
urlencoded); avantajul este ca nu exista limitari de cantitate a datelor
5. 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.
150
DESIGNER PAGINI WEB
151
DESIGNER PAGINI WEB
152
DESIGNER PAGINI WEB
$parola_corecta = 'ghiceste-Ma';
$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;
}
153
DESIGNER PAGINI WEB
<html>
<head>
<title>Aplicatie formular: pagina de login - Invata
PHP</title>
</head>
<body style="font-family: verdana,sans-serif; font-size:
small;">
<fieldset>
<legend>Actiuni</legend>
<input type="submit" value="Login" name="trimite"
value="1" />
<input type="reset" value="Curata formular" />
</fieldset>
154
DESIGNER PAGINI WEB
</form>
<?php
# aici afisam mesajul de eroare, daca avem
if( strlen( $mesaj ) > 0 ) {
echo '<p style="color: red">', $mesaj, '</p>';
}
?>
</body>
</html>
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
155
DESIGNER PAGINI WEB
<?php
// anunturi.php - prima parte
$anunturi = citireDate();
} else {
156
DESIGNER PAGINI WEB
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.
Fisierul anunturi-post.php
157
DESIGNER PAGINI WEB
} else {
158
DESIGNER PAGINI WEB
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.
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).
159
DESIGNER PAGINI WEB
<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>
<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"/>
160
DESIGNER PAGINI WEB
<tr>
<td valign="middle" style="padding-left: 3px;">
<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>
161
DESIGNER PAGINI WEB
</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>
</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)
162
DESIGNER PAGINI WEB
163
DESIGNER PAGINI WEB
164
DESIGNER PAGINI WEB
if
(move_uploaded_file($_FILES['fisier']['tmp_name'],
$uploadfile)) {
print "Fisier incarcat cu succes!";
} else {
print "Nu s-a putut incarca fisierul";
}
}
}
?>
165
DESIGNER PAGINI WEB
Headere
Request headers
166
DESIGNER PAGINI WEB
Response headers
167
DESIGNER PAGINI WEB
....
</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
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' ); // spune browserului sa
afiseze un mesaj de eroare
header('HTTP/1.0 200 OK' ); // anunta ca pagina exista si
va fi trimisa catre browser
<?php
# daca este definit un site, fac redirectarea
if( isset( $_GET[ 'site' ] ) ) {
168
DESIGNER PAGINI WEB
<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
169
DESIGNER PAGINI WEB
?>
170
DESIGNER PAGINI WEB
<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>";
171
DESIGNER PAGINI WEB
172
DESIGNER PAGINI WEB
} else {
# 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 - link direct
Imagine jpeg - link de download
Document PDF - link direct
Document PDF - 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>
173
DESIGNER PAGINI WEB
174
DESIGNER PAGINI WEB
}
if(!get_magic_quotes_gpc())
{
$tipcautare=addlashes($tipcautare);
$termencautat=addlashes($termencautat);
}
@ $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>
175
DESIGNER PAGINI WEB
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;
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.
176
DESIGNER PAGINI WEB
<html>
<head>
<title>Book-O-Rama Catalog Search</title>
</head>
<body>
<h1>Book-O-Rama Catalog Search</h1>
177
DESIGNER PAGINI WEB
</body>
</html>
<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'];
178
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');
// rularea interogarii
$result = $db->query($query);
/* 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: ';
179
DESIGNER PAGINI WEB
echo htmlspecialchars(stripslashes($row['title']));
echo '</strong><br />Author: ';
echo stripslashes($row['author']);
echo '<br />ISBN: ';
echo stripslashes($row['isbn']);
echo '<br />Price: ';
echo stripslashes($row['price']);
echo '</p>';
}
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>
180
DESIGNER PAGINI WEB
<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>
181
DESIGNER PAGINI WEB
182
DESIGNER PAGINI WEB
183
DESIGNER PAGINI WEB
Ce sunt Cookies?
184
DESIGNER PAGINI WEB
# vizualizarea cookie-urilor
if( isset( $_COOKIE[ 'Test' ] ) ) {
echo 'Test: ', $_COOKIE[ 'Test' ], '<br>';
}
?>
185
DESIGNER PAGINI WEB
function testCookie() {
} else {
# se va executa asta atunci cand exista
parametrul GET, deci dupa
186
DESIGNER PAGINI WEB
?>
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
<?php
187
DESIGNER PAGINI WEB
Sesiuni in PHP
188
DESIGNER PAGINI WEB
Sesiuni in PHP
189
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();
190
DESIGNER PAGINI WEB
?>
Accesarea datelor
191
DESIGNER PAGINI WEB
// a.php
session_start(); // pornesc sesiunea pentru a putea stoca o
variabila
?>
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() // continuam o sesiune existenta
?>
Fisiere in PHP
192
DESIGNER PAGINI WEB
193
DESIGNER PAGINI WEB
?>
Asa cum s-a observat, un mod de deschidere pentru citire ('r') si 2
moduri de deschidere pentru scriere: cu stergere a continutului vechi
194
DESIGNER PAGINI WEB
195
DESIGNER PAGINI WEB
?>
// copiere fisier
copy( 'sursa.txt', 'destinatie.txt' );
196
DESIGNER PAGINI WEB
// stergere fisier
unlink( 'fisier.txt' );
?>
197
DESIGNER PAGINI WEB
Directoare in PHP
?>
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
198
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
199
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.
200
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:
201
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). Intr-
o 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.
202
DESIGNER PAGINI WEB
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
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();
?>
203
DESIGNER PAGINI WEB
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.
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.).
204
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:
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.
205
DESIGNER PAGINI WEB
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:
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.
<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>
206
DESIGNER PAGINI WEB
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.
<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.
207
DESIGNER PAGINI WEB
<html>
<head>
<title>Exemplu 3_1</title>
<style type="text/css">
<!-- 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>
<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>.
208
DESIGNER PAGINI WEB
<html>
<head>
<title>Exemplu 3_3</title>
<style type="text/css">
<!-- p{font-size: 20px;}-->
</style>
</head>
<body>
<p>Text scris cu font de 20px</p>
Text negru
</body>
</html>
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.
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%.
209
DESIGNER PAGINI WEB
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>
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>
<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>
210
DESIGNER PAGINI WEB
<body>
<p>Text scris cu Arial, 20px, italic, 800</p>
Text negru
</body>
</html>
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.
<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>
211
DESIGNER PAGINI WEB
</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
<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.
<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>
212
DESIGNER PAGINI WEB
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;}
-->
</style>
4.3 Decorare
text-decoration adauga sublinierea sau taierea blocului text asociat si poate avea valorile
underline, line-through sau none.
<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.
213
DESIGNER PAGINI WEB
<html>
<head>
<title>Exemplu 4_4</title>
<style type="text/css">
<!--
p{color: #0000FF;}
-->
</style>
</head>
<body>
Text normal
<p>Text albastru</p>
</body>
</html>
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;}
214
DESIGNER PAGINI WEB
-->
</style>
</head>
<body>
Text normal
<a href="exemplu4_4.html">link</a> catre exemplul 4_4
</body>
</html>
Background culoare sau imagine poate fi definita pentru intreaga pagina, o celula a
tabelului sau pentru text.
<html>
<head>
<title>Exemplu 5_1</title>
<style type="text/css">
<!--
body {background-color: #FFFF00;}
p {background-color: #FF0000;}
-->
</style>
</head>
<body>
Text normal
215
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
216
DESIGNER PAGINI WEB
<html>
<head>
<title>Exemplu 5_3</title>
<style type="text/css">
<!--
p {background-image: url(poza.jpg);
background-repeat: no-repeat;}
-->
</style>
</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;}
217
DESIGNER PAGINI WEB
-->
</style>
</head>
<body>
Text normal
</body>
</html>
6.1 list-style-type
Folosind eticheta ol din HTML cream liste ordonate sau numerotate. Adaugand comenzi
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>
valoare disc
disc disc
circle cerc
square patrat
decimal numere intregi
lower-roman numere romane, caractere mici (i, ii, iii, iv)
upper-roman 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
218
DESIGNER PAGINI WEB
<html>
<head>
<title>Exemplu 6_1</title>
<style type="text/css">
<!--
li {list-style-type: lower-alpha;}
-->
</style>
</head>
<body>
Necesar materiale:
<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().
<html>
<head>
<title>Exemplu 6_2</title>
<style type="text/css">
<!--
li {list-style-image: url(punct.gif);}
-->
</style>
</head>
219
DESIGNER PAGINI WEB
<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:
Originea elementului este considerat coltul din dreapta sus fata de care se vor raporta
toate dimensiunile prezentate in continuare.
220
DESIGNER PAGINI WEB
<html>
<head>
<title>Exemplu 7_1</title>
<style type="text/css">
<!--
img {width: 50px; height: 100px;}
-->
</style>
</head>
<body>
<img src="margini.gif">
</body>
</html>
margin stabileste distanta dintre chenar si celelalte obiecte din pagina simultan pentru
toate laturile. Distantele pot fi stabilite si individual folosind margin-top, margin-
bottom, 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;}
221
DESIGNER PAGINI WEB
-->
</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
siguri ca aceste proprietati functioneaza atat in Internet Explorer cat si in Netscape trebuie
sa declaram pentru border cel putin width si style.
border-style stabileste tipul chenarului si poate fi dotted, dashed, solid, double, groove,
ridge, inset si outset.
<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;}
222
DESIGNER PAGINI WEB
Pozitionarea permite asezarea unui obiect intr-un anume loc folosind coordonatele.
Totodata obiectele pot fi pozitionate pe straturi diferite, unul deasupra celuilalt.
223
DESIGNER PAGINI WEB
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.
<html>
<head>
<title>Exemplu 8_1</title>
</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.
<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>
224
DESIGNER PAGINI WEB
</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>
<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>
225
DESIGNER PAGINI WEB
226
DESIGNER PAGINI WEB
227
DESIGNER PAGINI WEB
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>
</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> <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>
228
DESIGNER PAGINI WEB
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.
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
229
DESIGNER PAGINI WEB
230
DESIGNER PAGINI WEB
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?
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);
}
}
231
DESIGNER PAGINI WEB
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
232
DESIGNER PAGINI WEB
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.
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.
233
DESIGNER PAGINI WEB
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).
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.
234
DESIGNER PAGINI WEB
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.
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.
235
DESIGNER PAGINI WEB
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.
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
236
DESIGNER PAGINI WEB
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.
237
DESIGNER PAGINI WEB
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?Rele
aseId=4004. Fiierul descrcat va fi unul de tip *.msi care trebuie lansat pentru a instala
baza de date pe server/calculator.
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.
238
DESIGNER PAGINI WEB
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> :
<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>
239
DESIGNER PAGINI WEB
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 */
</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>
240
DESIGNER PAGINI WEB
Exemplu
</title>
</script>
</head>
<body>
Continut
</body>
</html>
Exemplul 1
<html>
<head>
<title>
exemplu
</title>
</head>
<body>
<h1>
Text HTML
</h1>
<h1>
<script type="text/javascript">
document.write("Text JAVASCRIPT");
</script>
</h1>
241
DESIGNER PAGINI WEB
</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 Tag-ul HTML Coresp. JavaScript
Pagina <body> .... </body> document
Web
Formular <form document.formular
HTML name="formular">
... </form>
Buton <INPUT document.formular.buton
TYPE="button"
name="buton">
242
DESIGNER PAGINI WEB
<html>
<head>
<title>exemplu2</title>
<script type="text/javascript" src="exemplu2.js">
</script>
</head>
<body>
</body>
</html>
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;)
243
DESIGNER PAGINI WEB
- 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 1
comentariu 2
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>
244
DESIGNER PAGINI WEB
</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):
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:
{
/*Aici trebuie introdus codul care sa fie executat daca conditia
din if intoarce valoarea true */
245
DESIGNER PAGINI WEB
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) {
else {
}
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:
246
DESIGNER PAGINI WEB
else {
}
Exemplu
else {
}
Exemplu
247
DESIGNER PAGINI WEB
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 {
};
function
NumeFunctie(var1,var2,...,varX)
{
ceva cod
}
In caz ca nu are parametrii numele functiei va trebui urmat de paranteze ( ).
function
NumeFunctie()
{
ceva cod
248
DESIGNER PAGINI WEB
<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>
</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
249
DESIGNER PAGINI WEB
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.
<html>
<head> <title> exemplu </title>
<script type="text/javascript" src="script.js">
</script>
250
DESIGNER PAGINI WEB
</head>
<body>
<h2 align="center">
</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:
function functieI() {
document.getElementById("redirect").onclick =
controlClick; /* cauta in document elementul care are id-
ul redirect, actiunea este onclick (cand se face click pe
elementul respectiv) si trimite la functia controlClick */
251
DESIGNER PAGINI WEB
function controlClick() {
}
Exemplu cu return false Exemplu cu return true
window.onload = functieI;
function functieI() {
document.getElementById("redirect").onclick =
controlClick;}
function controlClick() {
window.location = "paginajs.html";
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
252
DESIGNER PAGINI WEB
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>
<h2 align="center">
</h2>
</body>
</html>
Fisierul JavaScript:
window.onload = functieI;
function functieI() {
253
DESIGNER PAGINI WEB
document.getElementById("redirect").onclick =
controlClick;}
function controlClick() {
if(this.toString().indexOf("etutoriale") < 0) {
}
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
onClick="alert(this.checked)">
apasati pe butonul de langa sa vedeti ce efect are
254
DESIGNER PAGINI WEB
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>
<A HREF=servicii.htm TARGET="display">Servicii /A>
</NOFRAMES>
<FRAME SRC=menu.html>
<FRAME SRC=hotsoft.html NAME="display">
</FRAMESET>
</HTML>
255
DESIGNER PAGINI WEB
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".
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 o metoda, nu la o proprietate.
Astfel, putem rezuma ca un obiect este o colectie de proprietati si functii (metode).
Sintaxa pentru folosirea obiectelor este:
obiect.prorietate
obiect.metoda()
256
DESIGNER PAGINI WEB
257
DESIGNER PAGINI WEB
258
DESIGNER PAGINI WEB
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, incep implicit de la 0.
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"
259
DESIGNER PAGINI WEB
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
260
DESIGNER PAGINI WEB
261
DESIGNER PAGINI WEB
262
DESIGNER PAGINI WEB
263
DESIGNER PAGINI WEB
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 a 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()
264
DESIGNER PAGINI WEB
Iata si un exemplu practic, urmatorul script rotunjeste o valoare (aici 8.35) la cel mai
apropiat intreg:
<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
265
DESIGNER PAGINI WEB
266
DESIGNER PAGINI WEB
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>
EXEMPLU
Aceste informatii sunt suficiente pentru a da acum niste exemple care pot fi folosite in
aplicatii reale
267
DESIGNER PAGINI WEB
var lungime=length
if (obj.value.length>lungime)
obj.value=obj.value.substring(0, lungime)
}
</script>
268
DESIGNER PAGINI WEB
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){
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
269
DESIGNER PAGINI WEB
}
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
}
function evalid(){
var emailID=document.eFormular.txtEmail
if ((emailID.value==null)||(emailID.value=="")){
alert("Va rog sa introduceti o adresa de email")
emailID.focus()
270
DESIGNER PAGINI WEB
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
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
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">
271
DESIGNER PAGINI WEB
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>
272
DESIGNER PAGINI WEB
d. De Ieri<br>
</p>
273
DESIGNER PAGINI WEB
PARTEA VII
VALIDAREA DATELOR
274
DESIGNER PAGINI WEB
275
DESIGNER PAGINI WEB
function email_check($field)
01
{
02
if(!preg_match('/^[a-z0-9&'.-_+]+@[a-z0-9-]+.([a-z0-9-]+.)*?[a-
03
z]+$/is', $field))
04
{
05
return false;
06
}
07
else
08
{
09
return true;
10
}
11
}
Internetul este o sursa imensa de funcii care te poate ajuta sa gseti funcii 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
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
276
DESIGNER PAGINI WEB
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 n 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 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.
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).
Pe lng validatoarele prezentate mai sus, programatorul poate crea
validatoarecustomizate, care s verifice datele introduse de utilizator conform unor reguli
proprii.
277
DESIGNER PAGINI WEB
PARTEA VIII
ASIGURAREA SECURITATII DATELOR
SI A DOCUMENTELOR
278
DESIGNER PAGINI WEB
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
copierea datelor de pe un suport de memorare pe alte suporturi de memorie extern. (CD,
DVD, dischet, memory stick, alte calculatoare din reea etc.).
279
DESIGNER PAGINI WEB
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.
280
DESIGNER PAGINI WEB
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.
281
DESIGNER PAGINI WEB
PARTEA IX
UTILIZAREA DOCUMENTELOR
PERIFERICE SI SPECIFICE
282
DESIGNER PAGINI WEB
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)
283
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;
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
284
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.
285
DESIGNER PAGINI WEB
286
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);
287
DESIGNER PAGINI WEB
288
DESIGNER PAGINI WEB
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.
289
DESIGNER PAGINI WEB
290
DESIGNER PAGINI WEB
291
DESIGNER PAGINI WEB
Performana 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;
292
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
293
DESIGNER PAGINI WEB
294
DESIGNER PAGINI WEB
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.
295
DESIGNER PAGINI WEB
296
DESIGNER PAGINI WEB
Dispozitive de intrare/ieire2
297
DESIGNER PAGINI WEB
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
298
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.
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);
299
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);
300
DESIGNER PAGINI WEB
PARTEA X
ANALIZAREA SCOPULUI PAGINII WEB
301
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.
302
DESIGNER PAGINI WEB
Cunoaterea audienei
Identificarea potenialilor vizitatori ai site-ului este crucial. Structurarea designului site-
ului 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:
303
DESIGNER PAGINI WEB
304
DESIGNER PAGINI WEB
305
DESIGNER PAGINI WEB
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-
ului vor putea aadar nelege funcionalitatea elementelor grafice/multimedia din paginile
site-ului.
306
DESIGNER PAGINI WEB
PARTEA XI
PROIECTAREA SITE-ULUI WEB
307
DESIGNER PAGINI WEB
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.
308
DESIGNER PAGINI WEB
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.
309
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.
310
DESIGNER PAGINI WEB
311
DESIGNER PAGINI WEB
PARTEA XII
PROCESAREA IMAGINILOR,
CREAREA DE ANIMAII I FLASH-URI
312
DESIGNER PAGINI WEB
Introducere
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
313
DESIGNER PAGINI WEB
314
DESIGNER PAGINI WEB
315
DESIGNER PAGINI WEB
316
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 ,
317
DESIGNER PAGINI WEB
318
DESIGNER PAGINI WEB
319
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".
320
DESIGNER PAGINI WEB
321
DESIGNER PAGINI WEB
PARTEA XIII
ELABORAREA DE PROTOTIPURI
322
DESIGNER PAGINI WEB
Introducere
323
DESIGNER PAGINI WEB
324
DESIGNER PAGINI WEB
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.
325
DESIGNER PAGINI WEB
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
326
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.
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.
327
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.
Pentru ca toate informaiile s fie prezentate ntr-un mod atractiv i original, o pagin web
poate s fie simpl sau mparit n:
328
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.
329
DESIGNER PAGINI WEB
PARTEA XIV
REALIZAREA SITE-ULUI
330
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
331
DESIGNER PAGINI WEB
332
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.
333
DESIGNER PAGINI WEB
PARTEA XV
TESTAREA SITE-ULUI
334
DESIGNER PAGINI WEB
335
DESIGNER PAGINI WEB
336
DESIGNER PAGINI WEB
337
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 asa-
numitele "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
338
DESIGNER PAGINI WEB
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.
339
DESIGNER PAGINI WEB
PARTEA XVI
PUBLICAREA SITE-ULUI
340
DESIGNER PAGINI WEB
341
DESIGNER PAGINI WEB
342
DESIGNER PAGINI WEB
343
DESIGNER PAGINI WEB
344
DESIGNER PAGINI WEB
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
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,
v-ati 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 host-
ului 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,
345
DESIGNER PAGINI WEB
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.
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.
346
DESIGNER PAGINI WEB
347
DESIGNER PAGINI WEB
PARTEA XVII
NTREINEREA SIT-ULUI
348
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.
349
DESIGNER PAGINI WEB
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 informaii 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
350
DESIGNER PAGINI WEB
351
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
352
DESIGNER PAGINI WEB
353
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
354