Download - PW-note de curs v1 (1)

Transcript

SERGIU CHILAT

PROGRAMARE WEB

NOTE DE CURS

Bălți -2013

~ 2 ~

CUPRINS

1. NOȚIUNEA DE SITE. PROTOCOALE. WEB SERVERE.

DOMENII ................................................................................................ 6

1.1. World Wide Web ......................................................................... 6 1.1.1. Web 1.0 – consumatori de conținut ..................................... 7 1.1.2. Web 2.0 – interacțiunea cu conținutul ................................. 8 1.1.3. Web 3.0 (Web semantic) – creatori de conținut .................. 8

1.2. Noțiunea de site web ................................................................... 8 1.3. Protocolul Internet ..................................................................... 10 1.4. Servere web ............................................................................... 10 1.5. Domenii ..................................................................................... 11

2. LIMBAJUL HTML ........................................................................... 14

2.1. Standarde HTML ....................................................................... 14 2.2. Noțiuni de bază .......................................................................... 15 2.3. Structura unui fișier HTML ....................................................... 16

2.3.1. Elementul doctype ............................................................. 17 2.3.2. Elementul html .................................................................. 18 2.3.3. Elementul head .................................................................. 18 2.3.4. Elementul title ................................................................... 18 2.3.5. Elementul body.................................................................. 18

2.4. Atribute ...................................................................................... 18 2.4.1. Atributele de bază .............................................................. 18 2.4.2. Atribute de internaţionalizare ............................................ 19 2.4.3. Atribute generice ............................................................... 20

2.5. Elemente de marcare ................................................................. 21 2.5.1. Taguri de formatare și structurare a textului ..................... 21 2.5.2. Tagurile div și span ........................................................... 21 2.5.3. Imagini .............................................................................. 23 2.5.4. Hiperlincuri ....................................................................... 24 2.5.5. Tabele ................................................................................ 25 2.5.6. Liste ................................................................................... 30

2.6. Meta taguri ................................................................................ 31 2.7. Caractere speciale și entități ...................................................... 31

~ 3 ~

2.8. Comentarii ................................................................................. 32 2.9. Formulare .................................................................................. 33

2.9.1. Containerul form ............................................................... 33 2.9.2. Elementul input ................................................................. 34 2.9.3. Elementul select ................................................................ 37 2.9.4. Elementul textarea ............................................................. 38

Însărcinări ......................................................................................... 40

3. STILURI CSS .................................................................................... 44

3.1. Sintaxa CSS ............................................................................... 45 3.2. Valorile proprietăților ................................................................ 45

3.2.1. Numere .............................................................................. 45 3.2.2. Procente ............................................................................. 45 3.2.3. Dimensiunea elementelor .................................................. 46 3.2.4. Culoarea elementelor ......................................................... 47 3.2.5. Adrese ............................................................................... 48

3.3. Metode de conectare a stilurilor CSS în pagină ........................ 48 3.3.1. CSS intern - direct în eticheta HTML (in-line) ................. 48 3.3.2. Încapsulate în antetul fișierului HTML (embedded) ......... 48 3.3.3. Fișiere CSS externe (linked) ............................................. 49

3.4. Aplicarea stilurilor CSS unuia sau mai multor elemente .......... 50 3.4.1. Aplicarea stilurilor CSS unui singur element prin style .... 51 3.4.2. Aplicarea stilurilor CSS unui singur element prin id ........ 51 3.4.3. Aplicarea stilurilor CSS mai multor elemente prin class .. 52 3.4.4. Aplicarea stilurilor CSS la nivel de tag ............................. 53 3.4.5. Selectorul universal ........................................................... 53 3.4.6. Prioritatea aplicării proprietăților CSS .............................. 54

3.5. Proprietăți CSS .......................................................................... 54 3.6. Standarde CSS ........................................................................... 59 3.7. Avantajele utilizării stilurilor CSS ............................................ 60 3.8. Validarea codului CSS .............................................................. 61 Însărcinări ......................................................................................... 62

4. LIMBAJUL SERVER PHP ............................................................... 66

4.1. Sintaxa limbajului PHP ............................................................. 68 4.2. Variabile în PHP ........................................................................ 69 4.3. Constante ................................................................................... 71 4.4. Șiruri de caractere ...................................................................... 72

~ 4 ~

4.4.1. Metode de definire a șirurilor ............................................ 72 4.4.2. Funcții de prelucrare a șirurilor de caractere ..................... 74

4.5. Variabile numerice .................................................................... 80 4.6. Variabile logice ......................................................................... 81 4.7. Operatori PHP ........................................................................... 82 4.8. Masive ....................................................................................... 84

4.8.1. Definirea unui masiv ......................................................... 84 4.8.2. Funcții de prelucrare a masivelor ...................................... 86

4.9. Variabile superglobale ............................................................... 91 4.9.1. Masivele superglobale GET și POST ................................ 91 4.9.2. Masivul superglobal SERVER .......................................... 92 4.9.3. Masivul superglobal COOKIE .......................................... 93 4.9.4. Masivul superglobal SESSION ......................................... 96

4.10. SGBD MySQL ...................................................................... 100 4.10.1. Conectarea la serverul MySQL ..................................... 101 4.10.2. Selectarea informației din tabelă ................................... 101 4.10.3. Introducerea informației în tabelă ................................. 102 4.10.4. Modificarea informației din tabelă ................................ 103 4.10.5. Ștergerea informației din tabelă..................................... 103 4.10.6. Lista de funcții PHP pentru lucrul cu MySQL .............. 103

4.11. Lucrul cu fișierele .................................................................. 112 4.12. Încărcarea fișierelor pe server................................................ 115 4.13. Prelucrarea fișierelor grafice. Biblioteca GD ....................... 116

4.13.1. Crearea dinamica a imaginilor....................................... 117 4.13.2. Redimensionarea imaginilor .......................................... 119

4.14. Lucrul cu data și timpul în PHP ............................................ 122 4.15. Funcția mail ........................................................................... 126 4.16. Securitatea scripturilor PHP .................................................. 126

4.16.1. Variabile globale ........................................................... 127 4.16.2. Ghilimele magice și SQL injection ............................... 127 4.16.3. Criptarea parolelor ......................................................... 129 4.16.4. Fișierul .htaccess ........................................................... 129

Însărcinări ....................................................................................... 130

5. LIMBAJUL CLIENT JAVASCRIPT.............................................. 134

5.1. Sintaxa JavaScript ................................................................... 134 5.1.1. Ascunderea codului in browserele vechi ......................... 135 5.1.2. Convenții de sintaxă ........................................................ 136

~ 5 ~

5.2. Variabile și tipuri de date ........................................................ 137 5.3. Operatori .................................................................................. 138

5.3.1. Operatori aritmetici ......................................................... 138 5.3.2. Operatori de atribuire ...................................................... 139 5.3.3. Operatori de comparare ................................................... 139 5.3.4. Operatori logici (booleeni) .............................................. 140 5.3.5. Operator pentru șiruri de caractare .................................. 141 5.3.6. Operatorul typeof ............................................................ 141 5.3.7. Operatori pentru structuri de date (obiecte) .................... 141 5.3.8. Operatorul conditional "?" ............................................... 142 5.3.9. Ordinea operatorilor ........................................................ 142

5.4. Funcții ...................................................................................... 143 5.5. Ferestre de dialog .................................................................... 145

5.5.1. Fereastra Alert ................................................................. 145 5.5.2. Fereastra Prompt ............................................................. 145 5.5.3. Fereastra Confirm ............................................................ 146

5.6. Obiecte..................................................................................... 147 5.6.1. Obiectul String ................................................................ 147 5.6.2. Obiectul Array ................................................................. 148 5.6.3. Obiectul Date................................................................... 150 5.6.4. Obiectul Math .................................................................. 152

5.7. Ierarhia JavaScript ................................................................... 153 5.7.1. Obiectul document ........................................................... 154 5.7.2. Obiectul form................................................................... 156 5.7.3. Lucrul cu getElementById .............................................. 158

5.8. Prelucrarea evenimentelor ....................................................... 160 Însărcinări ....................................................................................... 163

LITERATURĂ RECOMANDATĂ .................................................... 165

~ 6 ~

1. NOȚIUNEA DE SITE. PROTOCOALE. WEB SERVERE.

DOMENII

1.1. World Wide Web

Termenul World Wide Web, abreviat WWW sau www, numit

scurt și web, care în engleză înseamnă „rețea mondială” respectiv

„rețea”. WWW este un sistem de documente și informații de

tip hipertext legate între ele care pot fi accesate prin rețeaua mondială

de Internet. Documentele, care se păstrează în diferite locații, pe diverse

calculatoare server, pot fi regăsite cu ajutorul unui identificator univoc

numit URI. Hipertextul inclusiv imagini etc. este afișat cu un ajutorul

unui program de navigare în web numit browser, care descarcă paginile

web de pe un server web și le afișează pe un terminal „client” la

utilizator(PC, telefon mobil, etc.).

WWW este numai unul din numeroasele servicii și aplicații

informatice disponibile în Internet. Mai există și alte servicii, ca de

exemplu: poșta electronică - e-mail, transferul de fișiere de date și

informații - FTP, chat, aplicații video, servicii de telefonie și telefonie cu

imagine prin Internet de tip VoIP, posturi de radio și televiziune prin

Internet, e-commerce, sisteme de jocuri interactive ș.a.

Browserele actuale pot nu numai să afișeze pagini web, ci oferă

și interfețe pentru o mare parte din celelalte servicii Internet, având

astfel un efect integrator (pentru toate serviciile e suficient un singur

browser). De aceea granițele dintre serviciul WWW și celelalte servicii

din Internet nu sunt întotdeauna clare.

Webul a fost inventat în 1989 la Centrul European de Cercetări

Nucleare (CERN) din Geneva, Elveția. Propunerea inițială de creare a

unei colecții de documente având legături între ele a fost făcută de Tim

Berners-Lee în martie 1989. Propunerea a apărut în urma problemelor de

comunicare pe care le întâmpinau echipele de cercetători ce foloseau

centrul, chiar și folosind poșta electronică.

Primul prototip al acestei colecții (mai întâi în format de text

simplu) a apărut nu mult înainte de decembrie 1991, când s-a făcut

prima lui demonstrație publică. Studiul a fost continuat prin apariția

primei aplicații grafice Mosaic, în februarie 1993, realizată de

cercetătorul Marc Andreessen de la centrul universitar National Center

~ 7 ~

for Supercomputing Applications (NCSA) din orașul Urbana-

Champaign din statul federal Illinois, SUA.

În 1994 CERN și M.I.T. au format Consortiul World Wide Web,

care are drept obiectiv dezvoltarea webului, standardizarea protocoalelor

și încurajarea legăturilor dintre situri. Berners-Lee a devenit directorul

acestui consortiu. M.I.T. coordonează partea americană a consorțiului,

iar partea europeană este coordonată de INRIA, centrul de cercetari

francez.

În 1995 Andreessen părăsește NCSA și înființează o noua

companie, Netscape Communications Corp., care se ocupă cu

dezvoltarea de software pentru web.

Apoi webul a evoluat până la ceea ce este astăzi, un serviciu

multimedia integrativ, având ca suport fizic Internetul.

Berners-Lee și echipa sa au realizat primele versiuni pentru

patru componente cheie necesare serviciului web, și anume:

protocolul de intercomunicație HTTP;

limbajul de descriere a hipertextului HTML, pentru a

putea fi afișat de browser;

serverul de web;

browserul.

La baza funcționării webului stau 3 standarde, și anume:

(HTTP) - Hypertext Transfer Protocol, stiva de

protocoale OSI prin care serverul web și browserul clientului

(utilizatorului) comunică între ele;

(HTML) - Hypertext Markup Language, standard de

definire și prezentare a paginilor web.

(URI) - Uniform Resource Identifier, sistem universal de

identificare a resurselor din web, folosit pentru a identifica și

regăsi paginile web.

Următoarele standarde sunt definite mai târziu:

Cascading Style Sheets (CSS);

JavaScript;

Hypertext Transfer Protocol Secure - HTTPS.

1.1.1. Web 1.0 – consumatori de conținut

Conținut resurselor on-line este format de un grup relativ mic de

profesioniști, iar marea majoritatea utilizatorilor de internet sunt doar

~ 8 ~

simpli "cititori." În primul deceniu al rețelei Internet, sau Web 1.0, a fost

dezvoltată baza Internetului, care a permis deschiderea accesului la

cantități uriașe de informații pentru o gamă largă de utilizatori ai rețelei.

1.1.2. Web 2.0 – interacțiunea cu conținutul

Utilizatorii rețelei sunt participanți activi la crearea conținutului

resurselor web. Web 2.0 a apărut în 2005, și pînă în prezent s-au

dezvoltat diferite interfețe care permit utilizatorilor să gestioneze

conținutul rețelei Internet și comunice unul cu celălalt.

1.1.3. Web 3.0 (Web semantic) – creatori de conținut

Web 3.0 este un web al filtrării datelor în funcție de sensul și

noțiunea acestora. Pentru prima dată, noțiunea de Web 3.0 apare în

2007. Așteptat de mulți, web 3.0 a dat startul unei noi epoci a

internetului începînd cu luna ianuarie a anului 2012. Implementarea sa

vine făcuta pas cu pas, astfel încît nici azi nu se poate vorbi despre un

internet web 3.0 care să ruleze la capacitate maximă. Motivul pentru

care implementarea web 3.0 este destul de greoaie(spre deosebire de

web 2.0) se datorează în principal capacității de calcul insuficiente.

1.2. Noțiunea de site web

Noțiunea site web provine din expresia engleză web site și

desemnează o grupă de pagini web multimedia (conținând texte, imagini

fixe, animații ș.a.), accesibile în Internet în principiu orișicui, de obicei

pe o temă anumită, și care sunt conectate între ele prin așa-numite

hiperlinkuri. Diversele site-uri web pot fi create de către o organizație, o

persoană particulară, instituții publice etc.

De obicei un site web este administrat (creat, întreținut și

actualizat) de către un așa-numit webmaster, dar există și alte

posibilități:

site-ul web se actualizează automat și permanent pe baza

unei baze de date;

paginile sale se creează în mod dinamic și automat în

funcție de acțiunea utilizatorului în cadrul unei aplicații web;

site-ul web se creează și e administrat chiar de către

utilizatorii săi(Web 2.0).

La începuturile Internetului fiecare site web se accesa prin

indicarea adresei sale numerice specifice (adresa IP), de ex.

~ 9 ~

155.284.317.027. Ulterior pentru site-urile web s-au introdus și numele

de domenii, care permit indicarea adresei respective în mod mult mai

comod, prin cuvinte sau nume ușor de reținut, ca de exemplu

'www.wikipedia.org'. Adresele de site-uri web trebuie să fie clar

stabilite, unice în lume și chiar garantate pentru posesorul respectiv.

Un site web este alcătuit de regulă din mai multe pagini web. O

pagină web este un document creat cu ajutorul limbajului de marcare

HTML și (opțional) limbaje de programare cum ar fi PHP, ASP ș.a. fiind

accesibil vizitatorilor prin intermediul protocolului HTTP, care transferă

informația de la server la browser. Pagina web se numește așa deoarece,

afișată pe un monitor, ea se aseamănă cu o pagină de ziar: de obicei

paginile web au o lățime care încape în întregime pe ecran. În schimb,

pagina poate fi chiar mult mai înaltă (adâncă) decât înălțimea ecranului,

ea putând fi totuși ușor afișată cu ajutorul funcțiilor normale ale

mausului și browserului folosite, prin "tragere" în sus și în jos. De

asemenea, un site web poate fi vizualizat pe orice dispozitiv conectat la

Internet capabil să afișeze informații prin intermediul protocolului HTTP

(unele telefoane mobile, PDA-uri, etc.).

Un site alcătuit din mai multe pagini are de obicei o pagină

inițială sau principală numită homepage, de la care pleacă legături către

paginile interioare, secundare. Structurile și schemele de "navigare" din

interiorul site-urilor web sunt foarte diferite, în funcție de scopurile,

dorințele și posibilitățile ofertantului de informații. De obicei această

homepage este chiar pagina de start a site-ului, pe care ofertantul de

informații în web o face cunoscută la public drept punct de plecare

pentru întregul site web al său.

Site-urile web se pot clasifica după o mulțime de factori, dar

principalul factor rămâne subiectul de activitate (sau conținutul) sitului.

Din punct de vedere tehnologic un site web poate fi alcătuit din orice

tipuri de date și informații statice, camere de discuții, produse și servicii

de vânzare, anunțuri, formulare de completat online, sunete digitalizate,

clipuri video, imagini statice și animate, efecte speciale, meniuri

dinamice și multe, multe altele. Vorbind la un nivel mai înalt, subiectul

(tema) unui site web poate fi: un așa-numit blog, portal web, catalog

web, magazin virtual, bancă, universitate virtuală, bibliotecă,

enciclopedie virtuală, revistă web, ziar web și aproape orice altceva.

Dacă la început nu s-a pus accent prea mare pe latura estetică, în

zilele de azi se acordă o importanță din ce în ce mai mare nu numai

~ 10 ~

conținutului de informații al unui site web, dar și esteticii, dinamicii și

atractivității lui.

La ora actuală Internetul conține sute de milioane de pagini web,

pe cele mai variate subiecte și limbi.

1.3. Protocolul Internet

Protocolul Internet (sau IP din engl. Internet Protocol) este o

metodă sau un protocol prin care datele sunt trimise de la un calculator

la altul prin intermediu Internetului. Fiecare calculator (cunoscut sub

denumirea de „gazdă”), are pe Internet cel puțin o adresă IP unică, care

îl identifică între toate computerele din rețea. Când cineva trimite sau

primește informații (de ex.: poștă electronică, pagini web) mesajul este

împărțit în blocuri de mici dimensiuni denumite pachete. Fiecare pachet

cuprinde adresa expeditorului și pe cea a destinatarului. Fiecare pachet

este trimis, prima dată la un calculator-pasarelă, care înțelege o mică

parte din internet.

Calculatorul pasarelă citește destinația pachetelor și trimite

pachetele către o altă pasarelă, și așa mai departe, până ce pachetul

ajunge la pasarela vecină cu computerul destinatar.

Adresa IP este utilizată la nivelul programelor de prelucrare în

rețea. În schimb, la nivelul utilizatorilor cu acces la Internet,

identificarea calculatoarelor se face printr-un nume de gazdă gestionat

de sistemul DNS.

1.4. Servere web

Aproape toată structura Internetului se bazează pe modelul de

client-server. Multe milioane de servere din toată lumea sunt conectate

la Internet și rulează continuu. Majoritatea serviciilor oferite pe Internet

rulează pe servere: Web; Domain Name System; e-mail sau poștă

electronică; FTP sau transfer de fișiere; instant messaging sau mesagerie

instantă; fișiere audio și video; jocuri ș.a.m.d. Pentru orice acțiune care

este inițiată de un utilizator al Internetului, unul sau mai multe servere

interacționează cu utilizatorul precum și între ele.

Server web - un server care primește cereri HTTP de la clienţi,

în general browsere web, apoi le expediază răspunsuri prin intermediul

aceluiași HTTP, de obicei, în formă de pagină HTML, un flux de media

sau alt tip de date. Serverele web sunt baza World Wide Web.

~ 11 ~

Serverul web este numit atît software-ul, care îndeplineşte

funcţiile unui server web cît şi calculatorul pe care software-ul respectiv

se execută.

Clientul, de obicei, un browser Web, trimite către serverul web

cereri pentru primirea resurselor, desemnate de adrese URL. Resurse

sunt pagini HTML, imagini, fişiere, fluxuri media sau alte date necesare

pentru client. Ca răspuns serverul web trimite datele solicitate de client.

Acest schimb are loc prin intermediul protocolului HTTP.

Web Hosting

Serviciul de web hosting sau mai simplu găzduire web, este

serviciul prin care un utilizator poate închiria spațiu și trafic pe un server

putînd astfel să găzduiască propria pagină online (pe internet).

Hosting Provider - este compania care pune la dispoziție acest

spațiu pe server fără de care existența unui website nu ar fi posibilă.

1.5. Domenii

Domeniul este adresa la care se găsește un website în Internet.

Numele domeniului este legat cu o adresă fizică (un server web) pe care

pot fi găsite fișierele sitului respectiv.

Tipuri de domenii

Tipul domeniului se referă la extensia care urmează imediat

după numele domeniului, și anume:

.com - folosit de companiile comerciale la început. Cu

timpul extensia .com a început sa fie folosită pe scară largă pe orice site;

.net - vine de la network și se folosește în general pentru

situri avînd ca domeniu de activitate internetul și/sau nișele aferente;

.org - prescurtare pentru organizație și se presupune ca îl

folosesc doar organizațiile non-profit, însă, aceasta regulă nu este deloc

respectată;

.md, .ro, .es, .us, .uk (ș.a.m.d.) - sunt extensii de domenii

folosite de anumite țări ca și domenii naționale adresate populației țării

respective.

.biz, .info .name .pro (ș.a.m.d.) - sunt extensii de domeniu

adăugate ulterior datorită faptului că au rămas puține nume de domenii

libere.

Selectarea numelui domeniului

Numele domeniului trebuie să fie ușor de reținut pentru

utilizatorii care îl vizitează. Să luăm drept exemplu:

~ 12 ~

www.gbxfbgb5.com. Acest nume de domeniu nu-l va reține nimeni, în

schimb www.universitati.md este ceva mai simplu de reținut.

Reguli pentru selectarea unui nume de domeniu:

În primul rînd trebuie să cunoaștem care va fi domeniul

de activitate al sitului pe care îl vom crea. Vom încerca să alegem un

nume de domeniu care va reflecta acest lucru;

Folosirea cuvintelor cheie în numele domeniului

facilitează de multe ori găsirea paginii atunci cînd se fac căutări în

motoarele de căutare (google, yahoo, altavista ș.a.m.d.);

Lungimea numelui domeniului este de asemenea foarte

importantă. Să ne imaginăm ca vom realiza un site despre universitățile

din Moldova. Faptul de a pune toate aceste cuvinte cheie în numele

domeniului (www.universitatiledinmoldova.md) ajută la căutarea în

motoarele de căutare, dar va fi mai greu de reținut de un vizitator. De

asemenea accesarea un nume de domeniu atît de lung poate genera de

multe ori greșeli de ortografie, ceea ce ar putea duce vizitatorul pe o altă

pagină decît cea dorită. Este recomandat ca numele domeniului să

conțină un cuvînt sau cel mult două cît mai scurte;

De asemenea alegerea unei extensii potrivite și în

concordanță cu domeniul de activitate sau nișa este foarte importantă

.com și .net fiind cele mai populare iar .md fiind adresată populației din

Republica Moldova.

~ 13 ~

UNITATEA DIDACTICĂ

LIMBAJUL HTML

Finalități:

După studierea unității didactice și realizarea sarcinilor propuse,

studentul va fi capabili să:

elaboreze structura unui document HTML;

utilizeze taguri HTML pentru crearea machetelor

paginilor web statice;

elaboreze formulare

~ 14 ~

2. LIMBAJUL HTML

HTML a fost elaborat de cercetătorul britanic Tim Berners-Lee

în perioada 1986-1991, în cadrul Consiliului European pentru Cercetare

Nucleară de la Geneva (Elveţia). HTML a fost creat ca un limbaj

destinat pentru schimbul de documente ştiinţifice şi tehnice, adecvat

pentru utilizarea de către persoane care nu sunt specialişti în domeniul

machetării.

Iniţial, HTML a fost conceput şi creat ca un mijloc de

structurare şi de formatare a documentelor, fără a crea o dependență față

de mijloacele de reproducere (cartografiere). În mod ideal, HTML

trebuia să fie reprodus fără nici o denaturare stilistică şi structurală pe

diferite echipamente (ecran color al calculatorului modern, ecran

monocrom, telefon mobil limitat în dimensiuni sau un dispozitiv de

reproducere a vocii și textului). Cu toate acestea, utilizarea actuală a

HTML este foarte departe de obiectivele sale iniţiale.

2.1. Standarde HTML

RFC 1866 - HTML 2.0, a fost aprobat ca standard pe 22

septembrie 1995;

HTML 3.2 [1] - 14 ianuarie, 1997;

HTML 4.0 [2] - 18 decembrie, 1997;

HTML 4.01 [3] (modificări considerabile) - 24

decembrie, 1999;

ISO / IEC 15445:2000 [4] (aşa numitul ISO HTML,

bazat pe HTML 4.01 Strict) - 15 mai 2000;

HTML 5 [5] - în dezvoltare. Oficializarea standardului

este planificată pentru 2014.

Un standard oficial HTML 1.0 nu a existat niciodată. Până în

1995, au existat mai multe standarde informale pentru HTML. Pentru ca

versiunea standard oficială să se deosebească de acestea, ei i s-a atribuit

imediat numărul 2.

Versiunea 3 a fost propusă de către Consorțiul World Wide Web

(W3C), în martie 1995 şi oferea multe posibilități noi, cum ar fi crearea

de tabele, afişarea imaginilor și textelor concomitent, formule

matematice complexe. Chiar dacă acest standard a fost compatibil cu a

doua versiune, punerea în aplicare a fost dificilă pentru browserele din

~ 15 ~

acea perioadă. Versiunea 3.1 nu a fost utilizată oficial, fiind propusă

următoarea versiune - HTML 3.2, în care au fost omise multe inovaţii

ale versiunii 3.0, dar au fost adăugate elemente ne standarde, care sunt

acceptate de browserele Netscape Navigator și Mozaic.

În versiunea HTML 4.0 a fost făcută o oarecare filtrare a

standardului. Multe elemente au fost marcate ca fiind învechite şi

nerecomandate. În particular, tagul font, folosit pentru a schimba

proprietăţile fontului, a fost marcat ca învechit (ca alternativă fiind

recomandată utilizarea stilurilor CSS).

În 1998, Consorțiul World Wide Web a început elaborarea unui

limbaj de marcare nou, bazat pe HTML 4, dar sintaxa adecvată pentru

XML. Ulterior, noul limbaj a fost denumit XHTML. Prima versiune a

XHTML 1.0, a fost aprobată de World Wide Web Consortium la 26

ianuarie 2000.

La moment World Wide Web Consortium dezvoltă versiunea

HTML 5. O versiune beta a acestui limbaj a apărut pe Internet la 20

noiembrie 2007.

Comunitatea WHATWG (eng. Web Hypertext Application

Technology Working Group), începînd cu 2004, a dezvoltat aplicații

Web 1.0, numită de multe ori neformal "HTML 5", care extinde HTML

(existînd compatibilitate de sintaxă cu XHTML 1.0 XML), pentru o mai

bună reprezentare semantică a diferitor pagini tipice, cum ar fi forumuri,

site-uri web, licitaţii, motoare de căutare, magazine online, etc., care nu

se încadrează foarte bine în XHTML 2.

2.2. Noțiuni de bază

Cuvinte de reținut:

Tag - folosit pentru a specifica regiuni ale documentului

HTML, pe care le va interpreta ulterior browserul. Tag-urile vor avea

această formă: <tag>;

Element - este un tag complet, avînd un <tag> de

deschidere și unul de închidere </tag>;

Atribut - este folosit pentru a modifica valoarea unui

element în HTML. De obicei un element are mai multe atribute.

Deocamdată trebuie de reținut că un tag este o comandă pe care

browserul o interpretează, că un element este un tag complet iar un

atribut personalizează și modifică un element în HTML.

~ 16 ~

Tagurile au trei părți după cum s-a menționat mai sus:

deschiderea, conținutul și închiderea. După cum se va putea observa în

continuare există sute de taguri HTML. Absolut toate elementele care

vor fi redate de un browser au nevoie de un tag sau două.

Ordinea tag-urilor - Foarte important

Ordinea deschiderii și a închiderii tag-urilor este foarte

importantă. Dacă un tag este deschis interiorul altui tag, de exemplu

body este deschis în html atunci acel tag (body) este cel care trebuie

închis înaintea celui de-al doilea tag(html).

S-a închis mai întîi body pentru că a fost cel care s-a deschis cel

mai recent. Această regulă și anume deschiderea și închiderea tag-urilor

se aplică la toate celelalte taguri ale documentelor HTML.

Excepții: Tag-uri care nu au nevoie de închidere.

Există cîteva tag-uri care nu îndeplinesc modelul expus anterior.

Motivul este că în realitate aceste tag-uri nu au nevoie de nici un

conținut. Cel mai simplu exemplu este <br/>, care efectuează trecerea

din rînd nou.

2.3. Structura unui fișier HTML

Limbajul HTML este compus din coduri speciale numite

marcaje (sau tag-uri) care se înserează într-un document text pentru a

specifica modul de formatare a acestuia. Orice marcaj este inclus între

două paranteze unghiulare, ex: <nume_marcaj>, cu ajutorul căreia

browserul detectează și recunoaște acest simbol drept marcaj.

Un document HTML întotdeauna va începe și se va termina cu

un tag <html> și respectiv </html>. Aceasta este structura standard a

unui document HTML.

Mai jos este expusă structura unui document HTML:

<!DOCTYPE…>

<html>

<head>

<title> Prima mea pagina web!</title>

</head>

<body>

Aici se va include conținutul ce va fi afișat în browser

</body>

</html>

~ 17 ~

După cum se observă, există două taguri asemănătoare la

sfîrșitul documentului, </body> și </html>. Acestea sunt tag-urile de

închidere. </body>, dă de știre browserului, că sa încheiat conținutul

paginii, iar </html> că s-a încheiat documentul HTML.

Slesh "/" este pus înaintea numelui tag-ului și spune browserului

că ar dori să încheie respectivul tag. Deci <tag> este folosit pentru a

începe o funcție, iar </tag> pentru a o încheia.

2.3.1. Elementul doctype

Fiecare document HTML, care îndeplineşte specificaţiile unui

standard HTML ar trebui să înceapă cu specificarea versiunii după

modelul:

! <DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / /

EN" "Http://www.w3.org/TR/html4/strict.dtd">

Dacă acest şir nu este specificat, afişarea corectă a documentului

în browser devine mai dificilă.

Opțiuni DOCTYPE pentru HTML 4.01:

Strict(strict): nu conţine nici un element marcat ca

învechite sau care nu este aprobat de standard.

! <DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 /

/ EN"

"Http :/ / www.w3.org/TR/html4/strict.dtd">

De tranziţie (transitional): conţine etichete învechite

pentru a asigura compatibilitatea şi a facilita tranziţia de la versiunile

HTML mai vechi.

! <DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01

Transitional / / EN"

"Http :/ / www.w3.org/TR/html4/loose.dtd">

Cu frame-uri (frameset): similar cu cel de tranziţie, dar

conţine, de asemenea tag-uri pentru crearea frame-urilor.

! <DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01

Frameset / / EN"

"Http :/ / www.w3.org/TR/html4/frameset.dtd">

DOCTYPE pentru HTML 5

În HTML 5 este doar o versiune a DOCTYPE:

<DOCTYPE HTML!>

~ 18 ~

2.3.2. Elementul html

Acest element marchează începutul și sfîrșitul unui document

HTML, toate elementele care urmează să fie incluse în pagină trebuie să

fie între <html> și </html>.

2.3.3. Elementul head

head nu are nici o funcție vizibilă, dar poate oferi browserului

informații foarte utile. Aici se includ titlul documentului, codificarea,

meta-tagurile și se efectuează conectarea scripturilor externe JavaScript

și a fișierelor de stiluri CSS.

2.3.4. Elementul title

După standardele HTML tag-ul title trebuie să fie amplasat în

interiorul tagului head. Ceea ce va fi înscris între cele doua tag-uri title

(<title> și </title>) va putea fi vizualizat ca și numele browserului, de

obicei în partea din stînga sus, adică titlul ferestrei browserului.

2.3.5. Elementul body

Elementul body este cel care definește începerea conținutului

paginii propriu-zise (titluri, paragrafe, fotografii, muzică și orice

altceva). Toate elementele incluse în interiorul acestui tag vor fi afișate

în pagină, putînd fi vizualizate de utilizator.

2.4. Atribute

Atributele sunt o altă parte importantă a HTML. Un atribut este

utilizat pentru a defini caracteristicile unui element şi este plasat în

interiorul tag-ului de deschidere a elementului. Toate atributele sunt

alcătuite din două părţi: un nume şi o valoare:

nume = “valoare”

Valoarea atributului ar trebui să fie inclusă în ghilimele, şi este

separată de numele atributului prin semnul egal.

2.4.1. Atributele de bază

Există 4 atribute de bază care pot fi utilizate practic la toate

tagurile HTML:

id;

title;

class;

style.

~ 19 ~

Atributul id poate fi utilizat pentru a identifica orice element

unic într-o pagină. Există două motive principale pentru care este

necesară utilizarea acestui atribut:

dacă un element are atributul id ca un identificator unic,

este ușor de accesat elementul în pagină, de exemplu de către JavaScript;

dacă există două elemente cu acelaşi nume, într-o pagină

Web, se poate utiliza atributul id pentru a le distinge.

Utilizarea acestui atribut trebuie să îndeplinească următoarele

reguli:

începe cu o literă (AZ sau az) şi poate fi apoi urmat de

orice număr de litere, cifre (0,9), cratime, subliniere și două puncte;

rămâne unic în cadrul documentului, nu există două

atribute cu aceeași valoare în documentul HTML.

Atributul title oferă un titlu în formă de hint pentru element.

Are sintaxa similară atributului id.

Comportamentul acestui atribut va depinde de elementul care-l

poartă, fiind de obicei afişat ca un hint (tooltip) sau în timp ce elementul

se încarcă.

Atributul class este utilizat pentru a asocia un element HTML

cu o foaie de stil, şi specifică clasa CSS elementului.

Elementului i se pot atașa concomitent mai multe clase. De

exemplu:

class = "className1 className2 className3"

Atributul style permite să specificarea regulilor CSS direct în

cadrul elementului. De exemplu:

<p style="font-family:arial; color:#FF0000;">Text...</p>

2.4.2. Atribute de internaţionalizare

Există trei atribute de internaţionalizare, care sunt disponibile

pentru majoritatea elementelor XHTML.

dir;

lang;

xml: lang.

Atributul dir permite de a indica browserului direcţia în care

textul ar trebui să fie afișat. Atributul dir poate lua una din două valori:

ltr – de la stînga la dreapta;

rtl – de la dreapta la stînga.

~ 20 ~

Atributul lang permite indicarea limbii utilizate într-un

document, dar acest atribut a fost păstrat în HTML doar pentru

compatibilitate cu versiunile anterioare de HTML. Acest atribut a fost

înlocuită cu xml: lang.

Exemplu de utilizare:

<html lang=en>

Atributul xml: lang este o variantă de alternativă pentru lang și

ar trebui să fie un cod al țării ISO-639, după cum este ilustrat în

exemplul pentru atributul lang.

2.4.3. Atribute generice

În tabelul 2.1 sunt expuse cele mai utilizate atribute HTML.

Tabelul 2.1. Cele mai utilizate atribute HTML

Atributul Opțiuni Funcții

align right, left, center Alinierea orizontală

valign top, middle, bottom Alinierea verticală în interiorul

elementului HTML.

bgcolor numeric, hexazecimal,

valori RGB

Culoarea fundalului

elementului

background URL Imaginea de fundal a

documentului

id Definit de utilizator Identificatorul unic al

elementului

class Definit de utilizator Atașarea unei clase CSS

elementului

width Valoare numerică Lățimea elementului

height Valoare numerică Înălțimea elementului

title Definit de utilizator Un hint cu titlul elementului

~ 21 ~

2.5. Elemente de marcare

2.5.1. Taguri de formatare și structurare a textului

Mai jos este expusă lista tagurilor utilizate pentru formatarea și

structurarea textului în pagină:

<p></p> –crearea unui paragraf în text;

<b></b>, <strong> </strong> - text îngroșat;

<i></i>, <em></em> – text înclinat;

<u></u> – text subliniat;

<br /> - adaugă o linie noua după el.

<font></font> - formatarea textului, oferind posibilitatea

modificării culorii, mărimii, stilului etc.

<q></q> - în acest tag se adaugă de obicei fraze scurte,

citate, ce vor fi afișate între ghilimele.

<code> </code> - poate fi folosit pentru a prezenta

coduri de program, textul fiind afișat distinct pt. acest tip.

<h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4>,

<h5> </h5> si <h6> </h6> - folosit în general pentru titluri și sub-titluri

în pagina web. Textul apare îngroșat și mare pt. "<h1>", descrescînd

treptat pînă la "<h6>";

<sup></sup> - afișează textul în partea de sus a liniei

rîndului, și mai mic.

<sub></sub> - afișează textul în partea de jos a liniei

rîndului, si mai mic.

2.5.2. Tagurile div și span

Tag-urile <div></div> și <span></span> nu au efecte

importante dacă sunt folosite singure.

Tag-ul div creează secțiuni de blocuri în pagină, al căror formă

și grafică de conținut pot fi manipulate pentru fiecare separat. Are doar

un singur atribut HTML, align (pentru aliniere pe orizontală) care poate

avea următoarele valori: left (stînga), right (dreapta), center (centru),

justify (distanța textului față de margini egală).

Tag-ul span creează posibilitatea modificării separate a unei

porțiunii dintr-un context, putînd fi folosit și ca o clasă cu CSS. Singur

nu are nici un efect vizual și nu folosește nici un atribut HTML special.

Chiar dacă folosite singure, div și span nu au nici un efect major,

în combinație cu CSS pot crea aspecte grafice importante. Pentru

~ 22 ~

aceasta, ambele pot folosi atributul style (cu proprietăți CSS) ori

atributele id sau class ca identificator pentru stiluri CSS.

Atît div cît și span, de obicei servesc drept containere pentru alte

obiecte HTML, fiind utilizate în majoritatea cazurilor pentru machetarea

paginii, amplasarea elementelor în pagină, setarea dimensiunilor și

aplicarea stilurilor CSS.

Tag-ul <div></div> este unul din cele mai folosite elemente

HTML, aceasta deoarece în combinație cu proprietăți CSS poate crea

efecte grafice deosebite, iar în interiorul lui pot fi incluse oricare

elemente HTML: tabele, formulare, marcatori, linii sau alte div-uri.

Cadrul în care acestea sunt adăugate poate avea propriul fundal

(background), lungime, înălțime și margini cu diferite tipuri de linii.

Diferența dintre div și span este faptul că div încadrează o

secțiune din document sub forma unui bloc iar SPAN încadrează o

porțiune din context sub formă de linii.

Iată un exemplu din care se poate înțelege mai bine, atribuim

aceeași proprietate grafica (bordura roșie) unui tag div și unui tag span:

<div style="border:1px solid #fe1111;">

Fraza pe mai multe linii, <br>

continua cu linia a doua, <br>

se termina cu linia a treia.

</div>

<br>

- Acum cu SPAN:<br><br>

<span style="border:1px solid #fe1111;">

Fraza pe mai multe linii, <br>

continua cu linia a doua, <br>

se termina cu linia a treia.

</span>

În pagina web va apare:

~ 23 ~

Fig. 2.1. Diferența dintre div și span

2.5.3. Imagini

Tag-ul <img> este destinat pentru afişarea pe o pagină Web a

unei imagini într-un format grafic GIF, JPEG sau PNG. Această etichetă

are un atribut src necesar, care specifică adresa de pe care se încarcă

imaginea. Dacă este necesar, imaginea poate fi o referinţă la un alt fişier,

prin plasarea <img> într-un container <a>. În jurul imaginii este afişată

bordura, care poate fi eliminată prin adăugarea atributului border = "0"

la tag-ul <img>.

Sintaxa:

<img src="URL" alt="text alternativ"/>

Atribute:

align(bottom | left | middle | right | top) - defineşte

modul de aliniere a imaginii şi modalitatea de a se încadra text;

alt - text alternativ pentru imagini(este afișat dacă

imaginea nu poate fi încărcată);

border - grosimea bordurii din jurul imaginii(px);

height - înălţimea imaginii;

hspace - indentarea orizontală a imaginii la conţinutul

din jur;

ismap - spune browserului că imaginea este utilizată la

crearea unei hărți;

longdesc - specifică adresa documentului, care conţine

un rezumat al imaginii;

src - calea către un fişier grafic;

vspace - indentarea verticală a imaginii la conţinutul din

jur;

width - lăţimea imaginii;

~ 24 ~

usemap – indică harta pentru care va fi utilizată

imaginea.

2.5.4. Hiperlincuri

Tag-ul <a> este unul dintre elementele cele mai importante ale

HTML și este proiectat pentru a crea link-uri. În funcţie de prezenţa

atributelor name sau href se stabileşte o legătură externă sau o ancoră.

Ancora într-o pagină este prevăzută, pentru a specifica un loc în pagină

la care se referă hiperlincul.

Pentru a crea un link, trebuie să fie indicat atributul href,

valoarea căruia este adresa documentului (URL - Universal Resource

Locator), la care utilizatorul va fi redirecționat atunci cînd accesează

respectivul link. Adresa poate fi absolută sau relativă. Adresele absolute

vor fi funcționabile indiferent de numele site-ului sau pagina web pe

care sunt plasate. Link-urile relative, după cum se vede din denumire,

sunt construite relativ la documentul în care sunt plasate.

Sintaxa:

<a href="URL">...</a>

sau

<a name="ancora">...</a> și pentru adresare se utilizează <a

href="#ancora">...</a>

Atribute:

accesskey - activarea legăturii cu ajutorul unei

combinații te taste;

charset - codificarea textului la care indică hiperlinkul;

coords – setează coordonatele zonei active;

href – indică adresa URL la care se va trece;

hreflang – identifică limba textului de la adresa

respectivă;

media – indică tipul informației la care se face referință;

name – setează numele ancorei în interiorul paginii;

rel – relația dintre documentul la care se face adresarea

și documentul curent.

rev – relația dintre documentul curent și documentul la

care se face adresarea;

shape – setează forma zonei active;

tabindex – indică numărul de ordine al elementului

pentru activarea cu ajutorul tastei TAB;

~ 25 ~

target - indică modul de deschidere a adresei:

- blank - încarcă pagina într-o fereastră nouă;

- _self - încarcă pagina în fereastra curentă;

- _parent - încarcă o pagină în fereastra părinte(fereastra

din care a fost deschisă fereastra curentă), iar în cazul în care

părintele nu există, atunci această valoare funcţionează ca

_self;

- _top – anulează toate frame-urile și încarcă pagina pe

toată suprafața de lucru a browserului.

title - adaugă un hint cu text la hiperlink;

type – tipul MIME al documentului la care indică linkul.

2.5.5. Tabele

Elementul <table> este un container pentru elementele care

definesc conţinutul tabelului. Fiecare tabel este format din rânduri şi

celule, care sunt definite de etichetele <tr> și respectiv <td>. În

interiorul <table> este permis să se folosească următoarele elemente:

<caption>, <tbody>, <td>, <tfoot>, <th>, <thead> şi <tr>.

Tabelele cu bordură invizibilă au fost mult timp utilizate pentru

machetarea paginilor web, permiţând împărţirea documentului în unităţi

modulare. O astfel de metodă a fost utilizată pe foarte multe situri, pînă a

apărea posibilitatea machetării pe straturi.

Elementele tabelei:

<table></table> - definește un tabel în care pot fi

adăugate rînduri, coloane, titluri, celule de tabel;

<thead></thead> - definește zona de Header (Antet) a

tabelului, unde se pot include linii și coloane;

<tfoot></tfoot> - definește zona de subsol a tabelului,

unde se pot include linii și coloane;

<tbody></tbody> - definește corpul tabelului, unde se

pot include linii și coloane;

<tr></tr> - creează o linie nouă în tabel, în care se

includ coloane;

<th></th> - se folosește pentru celule cu titlu, pentru

coloane. Afișează un scris mai îngroșat;

<td></td> - Se folosește pentru a crea celule în rîndurile

tabelului. Trebuie adăugat în cadrul tag-ului <tr>.

~ 26 ~

<caption></caption> - definește un titlu pentru tabel.

Acest tag trebuie adăugat imediat după eticheta <table> și poate fi

adăugat doar o singură dată.

Sintaxa

<table width="200" border="1">

<tr>

<td>1</td>

<td>2</td>

</tr>

<tr>

<td>3</td>

<td>4</td>

</tr>

</table>

Codul de mai sus va avea următorul efect(fig. 2.2):

1 2

3 4

Fig. 2.2. Crearea unei tabele.

Atribute

align – setează alinierea tabelei;

background – setează imaginea de fundal pentru tabelă;

bgcolor – setează culoarea fundalului;

border – grosimea bordurii în pixeli;

bordercolor - culoarea bordurii;

cellpadding – indentarea de la bordura celulei pînă la

conținutul ei;

cellspacing – spațiul dintre celule;

height – înălțimea;

summary – descrierea scurtă a tabelei;

width – lățimea(în pixeli sau procente);

colspan - setează numărul de celule care trebuie să fie

concatenate orizontal;

rowspan - setează numărul de celule care trebuie să fie

concatenate vertical;

Observații:

~ 27 ~

colspan și rowspan se utilizează doar pentru elementul

<td>(celulă);

proprietatea height aplicată la tabele nu funcționează

corect în toate browserele;

dacă alinierea nu este setată, implicit este activată

alinierea la stînga;

dacă nu este setată lățimea tabelei, atunci aceasta tinde

să ocupe spațiul necesar afișării conținutului său.

Exemple de tabele:

1. Tabelă simplă cu bordură

Codul utilizat:

<table border="1">

<tr>

<td>1</td>

<td>2</td>

</tr>

<tr>

<td>3</td>

<td>4</td>

</tr>

</table>

Rezultatul:

1 2

3 4

Fig. 2.3. Crearea unei tabele simple cu bordură.

2. Tabelă simplă fără bordură

Codul utilizat:

<table border="0">

<tr>

<td>1</td>

<td>2</td>

</tr>

<tr>

<td>3</td>

<td>4</td>

</tr>

</table>

~ 28 ~

Rezultatul:

1 2

3 4

Fig. 2.4. Crearea unei tabele simple fără bordură.

3. Setarea lățimii tabelei

Codul utilizat:

<table width="100%”>

<tr>

<td>1</td>

<td>2</td>

</tr>

<tr>

<td>3</td>

<td>4</td>

</tr>

</table>

Rezultatul:

1 2

3 4

Fig. 2.5. Crearea unei tabele cu lățimea 100%.

4. Alinierea tabelei

Codul utilizat:

<table align="right">

<tr>

<td>1</td>

<td>2</td>

</tr>

<tr>

<td>3</td>

<td>4</td>

</tr>

</table>

Rezultatul:

1 2

3 4

Fig. 2.6. Crearea unei tabele aliniate la dreapta.

5. Alinierea conținutului în tabelă

Codul utilizat:

~ 29 ~

<table width="200" border="1">

<tr align="right">

<td>1</td>

<td>2</td>

</tr>

<tr>

<td align="center">3</td>

<td>4</td>

</tr>

</table>

Rezultatul:

1 2

3 4

Fig. 2.7. Alinierea conținutului tabelei.

6. Utilizarea colspan

Codul utilizat:

<table width="200" border="1">

<tr align="right">

<td colspan="2">12</td>

</tr>

<tr>

<td align="center">3</td>

<td>4</td>

</tr>

</table>

Rezultatul:

12

3 4

Fig. 2.8. Concatenarea celulelor pe orizontală.

7. Utilizarea rowspan

Codul utilizat:

<table width="200" border="1">

<tr align="right">

<td rowspan="2">13</td>

<td>2</td>

</tr>

<tr>

<td>4</td>

~ 30 ~

</tr>

</table>

Rezultatul:

13 2

4

Fig. 2.9. Concatenarea celulelor pe verticală.

2.5.6. Liste

Tagurile <ul> și <ol> creează o listă cu marcatori, respectiv

numerotată. Fiecare element din listă trebuie să înceapă cu tag-ul <li>.

În cazul în care la <ul> se aplică stiluri sau proprietăți, toate elementele

<li> moştenesc aceste proprietăți.

<ol></ol> - tag folosit pentru afișarea unei liste

ordonate, numerotate;

<ul></ul> - tag utilizat pentru afișarea unei liste

neordonate numeric, ci cu simboluri gen: disc, cerc, pătrat;

<li></li> - definește un element în lista <ol> sau <ul>,

fiind adăugat în cadrul acestora;

<dl></dl> - creează o listă de definiții. Trebuie să

conțină tag-urile <dt> și <dd>.

<dt></dt> - definește un termen pentru lista de definiții.

<dd></dd> - se adaugă în cadrul tag-ului <dt> și

prezintă lista de definiții pentru termenul definit de acel tag.

Sintaxa

Lista nenumerotată:

<ul>

<li>element 1</li>

<li>element 2</li>

</ul>

Lista numerotată:

<ol>

<li>element 1</li>

<li>element 2</li>

</ol>

Atribute

type - setează tipul marcatorului pentru lista

nenumerotată(disc | circle | square) sau numerotată(A | a | I | i | 1);

~ 31 ~

reversed – inversează ordinea numerotării în lista

numerotată;

start – indică valoarea de la care începe numerotarea.

2.6. Meta taguri

Tag-ul <meta> conține metadatele despre document HTML.

Metadatele nu vor fi afişate pe pagină, dar vor fi accesibile pentru

browser și ceea ce este mai important, pentru motoarele de căutare.

Elemente <meta> sunt de obicei folosite pentru a specifica

descrierea paginii, cuvintele cheie, autorul documentului, ultima

modificare, şi alte metadate. De asemenea, cu ajutorul <meta>se indică

codificarea(setul de caractere) utilizată în document.

Tag-ul <meta> întotdeauna se înscrie în interiorul elementului

<head>.

Descrierea documentului:

<meta name="description" content="Aceasta este o pagina

web" />

Cuvintele cheie:

<meta name="keywords" content="programare, web, site" />

Autorul documentului:

<meta name="author" content="Nume Prenume" />

Codificarea documentului:

<meta http-equiv="content-type"

content="text/html;charset=UTF-8" />

Observație: utilizarea metatagurilor este foarte importantă

pentru promovarea sitului, ele facilitînd indexarea sitului de către

motoarele de căutare.

2.7. Caractere speciale și entități

Unele caractere, cum ar fi caracterul "<", au un înțeles special în

limbajul HTML, de aceea ele nu pot fi folosite în text (mai bine spus nu

este indicat să se folosească, deoarece pot duce la apariția unor erori sau

la afișarea incorectă a elementelor HTML).

Pentru a afișa caracterul "<" în limbajul HTML trebuie să se

utilizeze entități caracter. Dacă se dorește ca un navigator să afișeze

acest caracter va trebui să se însereze o entitate caracter în codul sursă a

documentului HTML.

O entitate caracter este compusă din:

~ 32 ~

- caracterul "ampersand" (&);

- un nume de entitate sau caracterul "#" urmat de un număr;

- caracterul (;).

Entitatea utilizată pentru a afișa "<" este: &lt; sau &#60

Avantajul utilizării unui nume în locul unui număr constă în

faptul că un nume este mai ușor de amintit decît un număr. Numele "lt"

exemplificat anterior semnifică "less than".

Cea mai comună entitate în HTML este "non-breaking space"

(&nbsp), adică un spațiu liber.

În tabelul 2.2 sunt prezentate cele mai utilizate entități caracter.

Tabelul 2.2. Cele mai utilizate entități caracter

Caracter Descriere Nume entitate Număr entitate

non-breaking space &nbsp; &#160;

< less then &lt; &#60;

> greater then &gt; &#62;

& ampersand &amp; &#38;

© copyright &copy; &#169;

® registered trademark &reg; &#174;

Observație: entitățile depind de registru, literele mari și mici

sunt diferite.

2.8. Comentarii

Tag-ul comentariu este folosit pentru a introduce comentarii în

codul sursă. Comentariile nu sunt afişate în browsere. Comentariile pot

fi utilizate pentru a explica codul, care pot fi utile atunci cînd se editează

codul sursă, la o dată ulterioară. Acest lucru este util mai ales dacă se

lucrează cu un volum mare de cod.

Comentariile se vor înscrie între <!-- și -->.

Exemplu:

<!—Acesta este un comentariu. El nu va fi afișat în browser-->

De asemenea, este o practică bună de a utiliza eticheta

comentariu pentru a "ascunde" script-urile pentru browserele care nu le

suportă (astfel încât acestea să nu fie arătate ca text simplu):

<script type="text/javascript">

<!--

function displayMsg(){

alert("Hello World!")

~ 33 ~

}

//-->

</script>

2.9. Formulare

Pentru a crea interactivitate în pagini și a permite utilizatorului

introducerea informațiilor, se utilizează formularele.

2.9.1. Containerul form

Tag-ul <form> instalează un formular pe pagina web.

Formularul este proiectat pentru a face schimb de date între utilizator şi

server. Domeniul de utilizare a formularelor nu se limitează doar la

trimiterea de date la server, fiind posibilă accesarea oricărui element al

formularului cu ajutorul unui limbaj de tip client (ex. JavaScript),

modificarea și utilizarea în diferite scopuri.

Un document poate conține un număr practic infinit de

formulare, dar în acelaşi timp, la server poate fi trimis un singur

formular. Din acest motiv, formularele ar trebui să fie independente unul

de celălalt.

Pentru a trimite formularul la server se utilizează butonul special

Submit, acelaşi lucru poate fi făcut, dacă se apasă tasta Enter în formular.

Dacă butonul Submit nu este în formular, tasta Enter imită utilizarea sa,

dar numai în cazul în care formularul este doar un element <input>.

Dacă există două sau mai multe elemente, apăsarea tastei <Enter> nu

produce nici un rezultat.

În cazul în care formularul este trimis la server, controlul este

transmis scriptului de pe adresa indicată în atributul action al tagului

<form>. În prealabil, browserul pregăteşte informația din formular, în

formă de pereche "nume = valoare", unde numele este determinat de

atributul name al tagului <input> şi valoarea este cea introdusă de către

utilizator sau setată în mod implicit cu ajutorul atributului value. Dacă

formularul este expediat folosind metoda GET, caseta de adrese va primi

o valoare de tipul:

http://site.com?cimp1=valoare1&cimp2=valoare2

Parametrii transmiși sunt listați după semnul de întrebare ”?” şi

sunt separați prin ampersand ”&”. Caractere non-latine sunt convertite în

reprezentare hexazecimală (în forma % HH, în cazul în care HH - codul

hexazecimal al caracterului ASCII), spaţiul este înlocuit cu un plus (+).

~ 34 ~

În cazul transmiterii informației prin metoda POST, datele sunt

trimise ascuns și nu vor fi vizibile în URL.

Atribute

accept-charset – indică codificarea în care serverul poate

primi datele;

action – adresa la care vor fi transmise datele;

autocomplete – activează sau dezactivează

autocompletarea cîmpurilor formularului;

enctype – metoda de codare a datelor formularului

(application/x-www-form-urlencoded | multipart/form-data | text/plain);

method – metoda de transmitere a datelor(GET sau

POST);

name – numele formularului;

novalidate – deconectează validarea;

target – metoda de încărcare a rezultatului(_blank | _self

| _parent | _top).

Observații:

tag-ul form nu are nici un efect vizual, el fiind utilizat

doar pentru reuniunea mai multor elemente <input>;

în cazul transmiterii fișierelor cu ajutorul formularului,

este necesar de setat enctype=” multipart/form-data”;

dacă action=””, formularul va expedia datele la aceeași

pagină pe care se află.

2.9.2. Elementul input

Tag-ul <input> este unul dintre cele mai des utilizate elemente

ale formularului, permite crearea diferitor elemente care oferă

posibilitatea interacţiunii cu utilizatorul. De obicei <input> se utilizează

pentru a crea casete de text, diferite butoane, butoane radio și casete de

selectare (checkbox).

Principalul atribut al tag-ului <input> este type, care determină

tipul elementului. Acesta permite crearea următoarelor tipuri de

elemente: casetă de text (text), cîmp pentru parola (password),

comutator (radio), selectare (checkbox), cîmp ascuns (hidden), pentru a

trimite formularul (submit), butonul pentru a şterge (reseta) datele

formularului (reset), element pentru încărcarea fișierului (file). Fiecare

element are propria listă de atribute care definesc aspectul şi

performanţele sale.

~ 35 ~

Atribute

type – tipul cîmpului;

value - valoarea casetei, se utilizează pentru inițializare

cu un text;

accept - setează filtrul pentru tipurile de fişiere care pot

fi încărcate. Tipul de fişier este specificat ca MIME-tip, mai multe valori

sunt separate prin virgulă. Dacă fişierul nu se potriveşte filtru specificat,

acesta nu este afişat în fereastra pentru selectarea fişierelor;

accesskey - permite trecerea la element, utilizând o

combinație de taste;

autocomplete – activează sau dezactivează

autocompletarea cîmpului;

checked - acest atribut determină dacă vor fi bifate o

casetă de selectare sau un buton radio. În cazul radiobutton, poate fi

marcat un singur element al grupului, pentru casetele de selectare

(checkbox) este admisă selectarea mai multor elemente;

disabled – blochează accesul și posibilitatea de

modificare a elementului;

maxlength - numărul maxim de caractere care pot fi

introduse;

name – numele cîmpului;

id – identificatorul DOM al cîmpului;

readonly – cîmpul nu poate fi modificat;

required – indică că completarea cîmpului este

obligatorie;

size – mărimea cîmpului (în caractere).

Tipuri de elemente input:

1. Cîmp textual <input type="text" /> - defineşte o casetă

de text (fig. 2.10) în care utilizatorul poate introduce o singură linie de

text

Fig. 2.10. Cîmp textual.

2. Cîmp pentru parolă <input type="password" /> -

defineşte o casetă în care utilizatorul poate introduce o linie de text,

acest text fiind mascat (în locul caracterelor sunt afișate simboluri

speciale *)

~ 36 ~

Fig. 2.11. Cîmp pentru parolă.

3. Butoane radio <input type="radio" /> - defineşte un

buton radio. Butoane radio permit utilizatorului de a selecta doar o

singură valoare dintr-un un număr limitat de opțiuni predefinite

Fig. 2.12. Radio butoane.

4. Bife <input type="checkbox" /> - defineşte o bifă.

Bifele permit utilizatorului selectarea uneia sau mai multor opțiuni

Fig. 2.13. Bife

5. Buton de expediere a formularului <input

type="submit" /> - defineşte un buton la apăsarea căruia formularul

este expediat. Textul de pe buton poate fi modificat cu ajutorul

atributului value

Fig. 2.14. Buton de expediere a formularului

6. Buton de anulare a formularului <input type="reset"

/> - defineşte un buton la apăsarea căruia formularul va fi anulat(golit).

Textul de pe buton poate fi modificat cu ajutorul atributului value

Fig. 2.15. Buton de anulare a formularului

7. Element pentru încărcarea fișierului <input type="file"

/> - defineşte un element la apăsarea căruia se deschide fereastra de

dialog care permite utilizatorului selectarea fișierului care va fi încărcat.

Fig. 2.16. Element pentru încărcarea fișierului

Observație: Pentru a putea încărca fișiere, formularul trebuie să

aibă proprietatea enctype = multipart/form-data.

~ 37 ~

8. Cîmp textual ascuns <input type="hidden" /> - are

aceleași funcții ca și un cîmp textual, fiind invizibil pentru utilizator. Se

utilizează pentru transmiterea valorilor ascunse.

2.9.3. Elementul select

Tagul <select> este utilizat pentru crearea listelor (drop-down

lists). Cu ajutorul tagului <option> din interiorul elementului <select> se

definesc opțiunile disponibile în listă.

Exemplu:

Limba maternă:

<select>

<option>Romana</option>

<option>Engleza</option>

<option>Franceza</option>

</select>

Fig. 2.17. Elementul select

Implicit meniul va afișa primul element din listă(fig. 2.17).

Pentru a afișa un alt element decît cel implicit (fig. 2.18), se va specifica

atributul selected="yes" opțiunii care dorim să fie afișată prima în listă.

Limba maternă:

<select>

<option>Romana</option>

<option selected="yes">Engleza</option>

<option>Franceza</option>

</select>

Fig. 2.18. Elementul select cu modificarea elementului implicit

Select - atributul "size"

Implicit doar un singur element din listă este vizibil (fig. 2.17 și

fig. 2.18), însă acest lucru se poate schimba cu ajutorul atributului size

adăugat marcajului <select> (fig. 2.19):

Limba materna:

<select size="3">

<option>Romana</option>

<option>Engleza</option>

<option>Franceza</option>

~ 38 ~

</select>

Fig. 2.19. Afișarea mai multor valori ale elementului select

Select - selectare multiplă

Implicit se permite selectarea unui singur element din listă (fig.

2.20),

Fig. 2.20. Selectarea elementului din listă

însă este posibil ca mai mult de 1 element din listă să poată fi

selectat (fig. 2.21). Pentru aceasta se va specifica atributul

multiple="yes":

Limba materna:

<select size="3" multiple="yes">

<option>Romana</option>

<option>Engleza</option>

<option>Franceza</option>

</select>

Fig. 2.21. Selectarea concomitentă a mai multor valori din listă

Observație: pentru selecția multiplă se va utiliza CTRL+click.

2.9.4. Elementul textarea

Un element de tip textarea definește un control de text cu mai

multe linii. Cîmpurile de acest fel sunt folosite de obicei pentru

introducerea unor comentarii, scrierea unui mesaj sau în general atunci

cînd utilizatorul are nevoie de mai mult spațiu de exprimare.

~ 39 ~

Definirea controlului are loc prin intermediul marcajelor

<textarea> </textarea>.

Dimensiunile controlului textarea se determină prin numărul de

coloane și rînduri specificate cu ajutorul atributelor cols și respectiv

rows. În cazul în care textul înscris nu va încăpea, vor fi activate barele

de derulare(scroolbars).

<textarea rows="5" cols="20"> Hello World! </textarea>

Fig. 2.22. Elementul textarea

TextArea - atributul "wrap"

Atributul "wrap" specifică felul în care va reacționa textul atunci

cînd acesta va atinge sfîrșitul liniei. Există 3 valori pe care le poate lua

acest atribut:

1. soft - va plasa un enter la sfîrșitul fiecărei linii, dar nu va

trimite la server caracterul Enter (carriage return);

2. hard - arată exact așa ca și "soft", însă spre deosebire de

acesta, caracterul Enter este trimis la server;

3. off - textul este afișat și trimis la server exact așa cum

este scris.

TextArea - Readonly si Disabled

1. readonly - acest atribut poate lua valorile "yes" sau "no".

Cu ajutorul acestui atribut se specifică dacă conținutul cîmpului de text

va putea sau nu, fi modificat;

2. disabled - atributul disabled este asemănător lui

readonly, de asemenea nu permite modificarea textului, însă spre

deosebire de acesta, textul va fi afișat cu fon gri. În așa fel utilizatorul va

percepe vizual că cîmpul respectiv nu poate fi modificat.

Observație: De menționat că textul dintr-un textarea definit cu

"readonly" poate fi selectat cu mouse-ul, și ulterior copiat, pe cînd

"disabled" nu oferă această posibilitate.

~ 40 ~

Însărcinări

1. Ce este un site web? Ce este o pagină web?

2. Cîte standarde HTML există? Care este standardul oficial

utilizat în prezent?

3. Descrieți structura unui document HTML.

4. Expuneți sintaxa utilizată la crearea unui tag HTML. Cîte tipuri

de taguri există?

5. Prezența căror taguri HTML este obligatorie în orice document

HTML? Argumentați.

6. Care este scopul utilizării tagului head?

7. Unde trebuie să fie scris un text care trebuie să fie afișat în

browser?

8. Pentru ce se utilizează tagul doctype?

9. Este obligatorie utilizarea tagului title? Argumentați răspunsul.

10. Care este diferența dintre tagul title și atributul title?

11. Enumerați atributele de bază ale documentului HTML și

explicați pentru ce se utilizează acestea.

12. Care este diferența dintre tag și atribut?

13. Explicați diferența dintre tagurile div și span, în baza unui

exemplu.

14. Care este diferența dintre tagurile strong și b?

15. Poate fi utilizat tagul em în interiorul tagului head?

Argumentați.

16. Care este diferența dintre tagurile br și p?

17. Detectați eroarea din următoarea secvență de cod, și explicați

cum poate fi corectată:

<div><strong></div></strong>

18. Detectați eroarea(erorile) din următoarea secvență de cod, și

explicați cum poate fi corectată:

</div></strong><strong><div>

19. Cum se înserează o imagine în pagină?

20. Care atribut se utilizează pentru a afișa în browser un text, în

cazul în care imaginea nu a putut fi încărcată?

21. Ce atribute pot fi utilizate la toate tagurile HTML?

22. Pentru ce se utilizează hiperlinkurile? Cum se adaugă un

hiperlink în pagină?

~ 41 ~

23. Enumerați modurile de deschidere a unei adrese prin intermediul

unui hiperlink. Argumentați utilizarea unei metode concrete într-

o siuație concretă, pe baza unui exemplu.

24. Poate fi utilizată o imagine ca hiperlink? Dacă da, expuneți

secvența de cod care face posibil acest lucru.

25. Care este scopul utilizării tabelelor?

26. Care tag este utilizat pentru a crea o tabelă?

27. Din ce este compusă o tabelă?

28. Pentru ce este utilizat tagul tr?

29. Cum se crează o celulă a tabelei?

30. Explicați cum lucrează colspan, în baza unui exemplu.

31. Explicați cum lucrează rowspan, în baza unui exemplu.

32. Este posibilă utilizarea concomitentă a artibutelor colspan și

rowspan? Argumentați.

33. Care este unitatea(unitățile) de măsură pentru lățimea tabelei și a

celulei?

34. Care este diferența dintre unitațile de măsură ”pixel” și ”%”?

35. Care atribut este utilizat pentru a indica grosimea bordurii unei

tabele?

36. Scrieți codul HTML care a generat următoarea tabelă:

1 2

3 4

37. Scrieți codul HTML care a generat următoarea tabelă:

12

3 4

38. Scrieți codul HTML care a generat următoarea tabelă:

13 2

4

39. Cîte tipuri de liste pot fi create în documentele HTML?

40. Cum se crează o listă numerotată?

41. Care ste diferența dintre o listă numerotată și o listă

nenumerotată?

42. Care tag este utilizat pentru a crea un element al listei?

43. Se dă umătorul cod:

~ 42 ~

<ul>

<li>element 1</il>

<li>element 2</il>

</ol>

Care va fi rezultatul executării?

44. Creați o listă ordonată din 4 elemente.

45. Cum se marchează un bloc de comentarii HTML?

46. Care tag este utilizat pentru a crea un formular? Descrieți

parametrii formularului.

47. Enumerați tipurile de elemente ale formularului pe care le

cunoașteți.

48. Ce tip de element poate fi utilizat pentru a înscrie o singură linie

de text?

49. Este nevoie ca dintr-o listă de valori să poată fi selectată doar

una. Ce tag va fi utilizat?

50. Ce element al formularului va fi utilizat, cînd este nevoie de

selectat două sau mai multe valori dintr-o listă de valori

predefinită?

51. Se poate utiliza elementul textarea pentru a înscrie o singură

linie de text? Argumentați.

52. Pentru ce este utilizat tagul input?

53. La care elemente ale formularului poate fi utilizat artibutul

selected și pentru ce?

54. Care sunt diferențele dintre metodele GET și POST de

expediere a datelor din formular.

55. Care atribut HTML se utilizează pentru dezactivarea unui

element al formularului?

56. Ce valoare trebuiă să primească atributul enctype al

formularului pentru a putea transmite fișiere?

57. Unde sunt expediate datele din formular la apăsarea butonului

de expediere a formularului?

58. Care este diferența dintre <input type=”reset”/> și <input

type=”submit”/>?

59. Pentru ce se utilizează metatagurile? Ce metataguri cunoașteți?

60. Care este scopul utilizării atributelor h1, h2, h3?

~ 43 ~

UNITATEA DIDACTICĂ

STILURI CSS

Finalități:

După studierea unității didactice și realizarea sarcinilor propuse,

studentul va fi capabili să:

cunoască sintaxa CSS;

poată utiliza stiluri inline, clase CSS și fișiere CSS

externe;

aplice stilurile CSS la formatarea unei pagini HTML.

~ 44 ~

3. STILURI CSS

CSS (Cascading Style Sheets) este un standard pentru

formatarea elementelor unui document HTML. Stilurile se pot atașa

elementelor HTML prin intermediul unor fișiere externe sau în cadrul

documentului, prin elementul <style> și/sau atributul style. CSS se poate

utiliza și pentru formatarea elementelor XHTML, XML și SVGL.

Modelele de stiluri pot fi aplicate aproape oricărei etichete

HTML, folosind proprietăți și valori specifice codului CSS.

Un stil reprezintă o colecție de atribute ale textului și ale

modului de aranjare a documentului care pot fi aplicate în mod selectiv

unui document sau doar unei părți din acesta. Aceste atribute pot fi tipul

de font, mărimea și grosimea acestuia, marginile, paragrafele și orice

altceva ce poate influența aspectul textului în pagină. Gruparea lor în

stiluri permite autorului să aplice aceeași colecție de atribute la diferite

părți ale unui document.

Stilurile aplicate unui document HTML au multe avantaje pentru

creatorii de pagini Web:

Oferă control crescut asupra aspectului și plasării

textului în pagină;

Reduc "învălmășeala" produsă de multitudinea de

deschideri și închideri ale etichetelor care descriu elementele individuale

ale textului;

Procesul de modificare a diferitelor elemente din pagină

se simplifică.

De exemplu, dacă se dorește ca titlurile să aibă un alt tip de font

decât textul obișnuit, să fie de dimensiune mai mare și scrise cu

caractere îngroșate și italice, ar trebui să se definească aceste atribute de

formatare pentru fiecare titlu în parte. Folosind stilurile nu este nevoie

decît de creat o singură definiție de stil care să conțină atributele de

formatare dorite, care o să fie aplicate la fiecare titlu.

În plus, folosirea stilurilor reduce considerabil efortul depus

atunci cînd se dorește modificarea aspectului și aranjării elementelor din

pagini. În locul parcurgerii fiecărui document în parte și modificarea

fiecărui element, este necesar să se opereze modificări doar asupra foii

de stiluri care controlează aceste elemente.

~ 45 ~

3.1. Sintaxa CSS

Definirea stilului se face conform sintaxei:

selector{proprietate1:valoare1; proprietate2:valoare2, ...}

unde selector este eticheta HTML (neîncadrată între acolade)

căreia i se aplică stilul.

Daca stilul se aplică la mai multe etichete HTML, acestea se

enumeră prin virgulă: selector1, selector2, ... :

selector1, selector2, ... {proprietate1: valoare1;

proprietate2:valoare2; ...}

Comentarii. Se pot introduce comentarii în codul CSS, cu rol de

explicație. Textul comentariului se încadrează între /* și */ - de exemplu:

/* acesta este un comentariu */ - și nu este vizibil în browser.

3.2. Valorile proprietăților

Toate valorile care pot fi setate pentru proprietățile CSS pot fi

atribuite unuia dintre următoarele grupuri: număr, procent, dimensiune,

culoare sau adresă.

3.2.1. Numere

Valoarea poate fi un număr întreg sau real, în calitate de

separator al părții întregi și celei zecimale fiind utilizat punctul:

p {

font-weight: 600; /* îngroșarea textului */

line-height: 1.2; /* spațiul dintre rînduri */

}

În cazul în care partea întreagă este zero, ea poate fi omisă.

Astfel notațiile 0.5 și .5 vor fi echivalente.

3.2.2. Procente

Procentele se utilizează atunci cînd trebuie să se modifice o

valoare în dependență de elementul părinte sau de alți factori externi

(browser de exemplu). Astfel, dacă vom seta lățimea unui element

100%, acest element va ocupa toată lățimea părintelui și se va modifica

odată cu aceasta. Un exemplu ar fi redimensionarea ferestrei

browserului, în acest caz elementele ale căror lățime este indicată în %

își modifică dimensiunea în dependență de dimensiunea ferestrei

browserului.

~ 46 ~

3.2.3. Dimensiunea elementelor

Pentru a specifica dimensiunile diferitelor elemente, în CSS se

utilizează unități absolute și relative. Unitățile absolute nu depind de

dispozitivul de ieșire (monitor, telefon mobil etc), iar cele relative

definesc dimensiunile în dependență de valorile altor dimensiuni.

Dimensiuni relative

Unități relative, sunt de obicei utilizate pentru text, sau atunci

când este nevoie de calculat raportul procentual între diferite elemente.

Mai jos sunt expuse principalele unități relative:

em - dimensiunea fontului elementului curent;

ex - înălțimea simbolului x;

px – pixeli;

% - procent.

em este o unitate variabilă care depinde de dimensiunea fontului

elementului curent (setată de proprietatea font-size). În fiecare browser

este setată o dimensiune implicită a textului, în cazul în care aceasta nu

este indicată explicit. Deci, dimensiunea fontului de 1em egală cu

dimensiunea fontului implicit al browserului, sau al elementului părinte.

Cu alte cuvinte 1em și 100% sunt egale.

ex se definește ca înălțimea simbolului x (minuscul). Aici sunt

valabile aceleași reguli ca și pentru em.

px este punctul elementar afișat de un monitor sau alt dispozitiv.

Dimensiunea pixelului depinde de rezoluția dispozitivului și a

parametrilor săi.

% definește valoarea unei anumite proprietăți în dependență de

aceeași proprietate a elementului părinte în care este amplasat.

Dimensiuni absolute

Dimensiunile absolute se utilizează mai rar, fiind aplicate cel

mai des pentru lucrul cu textul. Mai jos sunt enumerate dimensiunile

absolute:

in - 1 inch este egal cu 2,54 cm;

cm – centimetri;

mm – milimetri;

pt - 1 punct este egal cu 1/72 inch.

~ 47 ~

3.2.4. Culoarea elementelor

În CSS culoarea unui element poate fi setată în 3 moduri: codul

hexazecimal , denumirea în engleză, și în format RGB.

Codul hexazecimal

Pentru a seta culoarea se utilizează numere hexazecimale

precedate de semnul special ”#” (diez). Fiecare dintre cele trei culori –

roșu, verde și albastru - poate varia de la 00 la FF. Astfel, desemnarea

culorii este împărțit în trei componente #RRGGBB, adică cîte 2 caractere

hexazecimale pentru fiecare culoare. Se permite utilizarea formei scurte:

# RGB, astfel încît #fe0 este echivalentă cu ffee00.

Denumirea în engleză

Browserele suportă următoarele culori după denumire(tabelul

3.1).

Tabelul 3.1. Culorile recunoscute după denumire

white #ffffff sau #ff, alb

silver #c0c0c0 gri

gray #808080 gri întunecat

black #000000 sau #000 negru

maroon #800000 maro

red #ff0000 sau #f00 roșu

orange #ffa500 orange

yellow #ffff00 sau #ff0 galben

olive #808000 olive

lime #00ff00 sau #0f0 verde deschis

green #008000 verde

aqua #00ffff sau #0ff albastru deschis

blue #0000ff sau #00f albastru

navy #000080 albastru întunecat

teal #008080 albastru verzui

fuchsia #ff00ff sau #f0f roz

purple #800080 violet

Formatul RGB

Puteți defini o culoare utilizând componentele roșu, verde și

albastru în zecimal. Valoarea fiecăruia dintre cele trei culori poate varia

de la 0 la 255. Puteți seta, de asemenea, culoarea în procente. Modul de

utilizare: RGB (255, 0, 0) sau RGB (100%, 20%, 20%).

~ 48 ~

3.2.5. Adrese

Adresele (Uniform Resource Identifiers) sunt utilizate pentru a

specifica calea către un fișier, de exemplu, pentru a seta imaginea de

fundal a paginii sau a unui element. Puteți face acest lucru folosind

cuvîntul cheie url (), între paranteze fiind indicată adresa către fișier:

background: url(http://site.md/images/imagine.jpg);

3.3. Metode de conectare a stilurilor CSS în pagină

Modelele de stiluri pot fi aplicate în mai multe moduri: CSS

intern (inline), în antetul fișierului, extern.

3.3.1. CSS intern - direct în eticheta HTML (in-line)

Pentru adăugarea unui STYLE intern la un element se folosește

atributul style urmat de proprietăți și valori, folosind următoarea sintaxă:

<element style="proprietate:valoare;

proprietate:valoare;"></element>

Exemplu:

<h4 style="color:#ff1111;">Exemplu h4</h4>

Stilul respectiv va fi aplicat doar la elementul curent și nu

afectează nici într-un fel stilurile CSS ale altor elemente.

Definițiile de stil in-line se aplică numai asupra elementelor

incluse între etichetele care au asociat atributul style. Din acest motiv,

dacă dorim să repetăm în alt loc din cuprinsul documentului aceleași

definiții de stil, ele vor trebui repetate, încărcînd astfel documentul

HTML. Totuși, utilitatea stilurilor in-line este aceea că fiind definite

chiar în cuprinsul documentului, definițiile lor sunt mai puternice decît

cele din stilurile încapsulate sau externe. Dacă, de exemplu, am creat o

foaie de stiluri pe care dorim să o aplicăm unui document, și dacă în

cadrul acestui document avem un anumit element particular căruia dorim

să-i dăm un alt aspect decât cel prevăzut în foaia externă, putem aplica

acelui element un stil in-line care se va referi strict la el.

Observație: Se recomandă utilizarea stilurilor inline doar în

cazul cînd elementul are proprietăți unice, care nu se mai aplică altor

elemente.

3.3.2. Încapsulate în antetul fișierului HTML (embedded)

În acest caz se adaugă în secțiunea HEAD a documentului

HTML următoarea construcție:

~ 49 ~

<style type="text/css"> ... </style>.

Aceasta spune browserului că sunt adăugate elemente de stil

CSS.

Această metodă este utilă cînd se dorește folosirea acelorași

stiluri pentru mai multe elemente din pagină, astfel sunt scrise o singură

dată și nu la fiecare element.

Proprietățile și valorile stilurilor CSS se introduc în acest

element STYLE, după cum este expus în următorul exemplu:

<html>

<head>

<title>titlu</title>

<style type="text/css">

<!--

h2 {color:blue; text-decoration:underline;}

-->

</style>

</head>

<body>

</body>

</html>

Conform acestui cod, toate textele "h2" din pagină vor avea

culoarea albastră și vor fi subliniate.

Se folosește (opțional) "<!-- ... -->" pentru browserele care nu

recunosc elementul "<style>" și astfel îl ignoră.

3.3.3. Fișiere CSS externe (linked)

Aici proprietățile și valorile pentru diverse stiluri sunt

specificate într-un fișier extern special, de obicei cu extensia .css (pe

care îl putem construi cu un simplu editor de texte cum ar fi Notepad).

Avantajul folosirii fișierelor externe CSS este faptul că aceleași

coduri de stil pot fi folosite de mai multe pagini din site, sau chiar tot

site-ul, fiind scrise o singură dată. În plus ajută la micșorarea ca mărime

(în bytes) a documentului HTML care astfel se încarcă mai repede.

În fișierul extern CSS se scriu direct elementele cu proprietățile

și valorile dorite, nu se mai adaugă eticheta style.

Exemplu de model pentru creare unui fișier .css:

setarea proprietăților CSS pentru hiperlinkuri

a:link {

~ 50 ~

color:#0000ff;

text-decoration:none;

font-weight:normal;

font-size:15px;

font-family: Arial;

}

setarea proprietăților CSS pentru hiperlinkurile vizitate

a:visited {

color:#008080;

text-decoration:none;

font-weight:normal;

font-size: 15px;

font-family: Arial;

}

setarea proprietăților CSS pentru hiperlinkuri, atunci cînd

cursorul se află deasupra

a:hover {

color:#b54090;

text-decoration:underline;

font-weight:normal;

font-size: 15px;

font-family: Arial;

}

Pentru a adăuga acest stil CSS într-o pagină web, adăugați în

secțiunea HEAD a documentului HTML care va folosi acel fișier cu

stiluri, (între <head> ... </head>) următoarea construcție:

<link href="fișier_de_stiluri.css" rel="stylesheet"

type="text/css">

unde la "href" se scrie calea și numele fișierului css folosit.

3.4. Aplicarea stilurilor CSS unuia sau mai multor elemente

Este posibil ca un anumit stil să poată fi aplicat numai unei

singure etichete HTML, iar altul să poată fi aplicat mai multor etichete

HTML de diferite tipuri. Pentru aceasta se folosește atributul id sau class

în interiorul etichetelor HTML la care vrem să aplicăm un anumit stil.

Diferența dintre id și class este faptul că se poate folosi același

atribut class pentru mai multe elemente HTML, pe cînd același id se

folosește numai pentru un singur element HTML.

~ 51 ~

3.4.1. Aplicarea stilurilor CSS unui singur element prin style

Utilizarea stilurilor CSS în acest mod este recomandată în cazul

în care este nevoie de setat proprietățile unui singur element și aceste

proprietăți comune nu vor fi utilizate de către alte elemente. De

exemplu, atunci cînd este nevoie ca un anumit element să fie amplasat

pe o anumită poziție, este binevenită utilizarea stilurilor CSS in-line:

<div style=”top:20px; left:50px”></div>

Alte elemente care se vor afla pe aceleași coordonate în pagină

nu există, de aceea este inutilă crearea unei clase de stiluri separate în

acest scop. Cu toate acestea, elementul respectiv, de asemenea, poate sa

fie legat de o careva clasă CSS de unde va utiliza proprietăți comune, ca

de exemplu culoarea fundalului, lățimea, înălțimea, etc.

3.4.2. Aplicarea stilurilor CSS unui singur element prin id

Utilizarea acestei metode este foarte asemănătoare cu metoda

expusă anterior (style), doar că toate proprietățile sunt descrise nu direct

în interiorul tagului, dar într-un fișier extern .css, sau încapsulat în

secțiunea head. De asemenea, și aici, obiectul poate fi legat și cu o clasă

CSS de la care poate moșteni careva proprietăți comune, altele decît cele

date de id.

Pentru a lega un element HTML cu un id din CSS se procedează

în modul următor:

În fișierul CSS sau în <style> se enumeră proprietățile

identificatorului respectiv

#identificator{

color: red;

width:50%;

}

iar în fișierul HTML se face legătura elementului HTML cu

stilul respectiv în modul următor

<div id=”identificator”></div>

Astfel, elementul HTML va primi acele proprietăți CSS care

sunt specificate pentru #identificator. După cum se poate observa,

numele identificatorului în CSS începe cu caracterul special ”#” (diez)

iar în HTML acesta nu este necesar.

~ 52 ~

3.4.3. Aplicarea stilurilor CSS mai multor elemente prin

class

Utilizarea acestei metode este, într-o careva măsură,

asemănătoare cu metoda expusă anterior(id), doar că proprietățile CSS

se vor aplica nu unui singur element dar mai multor elemente din aceeași

clasă.

Pentru a lega un element HTML cu o clasă din CSS se

procedează în modul următor:

În fișierul CSS sau în <style> se enumeră proprietățile clasei

CSS respective

.nume_clasa{

color: blue;

text-align:center;

}

iar în fișierul HTML se face legătura elementului (elementelor)

HTML cu clasa de stiluri respectivă, în modul următor

<div class=”nume_clasa”></div>

Astfel, elementul (elementele) HTML vor primi acele proprietăți

CSS care sunt specificate pentru .nume_clasa. După cum se poate

observa, numele clasei în CSS începe cu caracterul special .(punct) iar în

HTML acesta nu este necesar.

De asemenea este posibilă conectarea a mai multor clase CSS la

un singur element. În CSS se vor declara 2 clase:

.c1{

color: blue;

text-align:center;

}

.c2{

color: red;

text-align:center;

}

iar în fișierul HTML se face legătura elementului (elementelor)

HTML cu clasele de stiluri respective, în modul următor:

<div class=”c1 c2”></div>

Astfel, elementul (elementele) HTML vor primi acele proprietăți

CSS care sunt specificate pentru .c1 și .c2, iar în cazul în care unele

proprietăți sunt comune, prioritate vor avea valorile date în clasa care a

fost definită ultima:

~ 53 ~

.c1{

color: blue;

text-align:center;

}

.c2{

color: red;

text-align:center;

}

Culoarea textului va fi red, deoarece ea este dată în clasa c2 care

a fost creată mai tîrziu decît clasa c1.

3.4.4. Aplicarea stilurilor CSS la nivel de tag

În CSS de asemenea este posibilă aplicarea anumitor proprietăți

elementelor fără a utiliza style, id sau class, și anume aplicarea stilurilor

la nivel de tag.

De exemplu, pentru a face ca toate hiperlinkurile în pagină să

primească culoarea roșie (implicit acestea au culoarea albastră) și textul

îngroșat, este necesar ca în fișierul CSS sau în <style> să fie înscris

următorul cod:

a{

color: red;

font-weight: bold;

}

La utilizarea acestei metode nu mai este nevoie ca la fiecare tag

a să fie atașată o clasă sau un identificator CSS, tuturor acestor taguri

automat fiindu-le aplicate proprietățile specificate.

3.4.5. Selectorul universal

Uneori trebuie să se seteze anumite proprietăți CSS pentru toate

elementele paginii, de exemplu, setarea fontului pentru text, culoarea

fundalului, alinierea etc. În acest caz, se va utiliza selectorul universal,

care este legat cu oricare element din pagină.

Pentru crearea selectorului universal este utilizat un asterisc (*)

iar sintaxa este următoarea:

* {reguli CSS}

Observație: selectorul universal are prioritatea cea mai mică, iar

rescrierea anumitor proprietăți ale sale prin alte metode anulează valorile

setate în selector.

~ 54 ~

3.4.6. Prioritatea aplicării proprietăților CSS

Dacă pentru un element HTML, proprietatea CSS este

specificată de 2 sau mai multe ori, prioritate are valoarea care a fost

setată ultima.

De exemplu:

p { color: green; }

p { color: red; }

În acest caz, va fi aplicată proprietatea color: red;.

De asemenea, prioritatea aplicării unei proprietăți depinde și de

modul în care ea este atribuită elementului. Astfel stilurile inline au cea

mai mare prioritate, iar stilurile aplicate la nivel de tag, au prioritatea cea

mai mică. Mai jos este dată ordinea aplicării pentru fiecare metodă:

1- Stil inline;

2- legare prin id;

3- legare prin class;

4- legare prin tag;

5- stil universal *.

Exemplu:

Se dă culoarea textului pentru tagul p.

p { color: green; }

următoarea construcție va anula regula de mai sus, deoarece are

o prioritate mai mare

.class_p { color: red; }

iar construcția

#id_p { color: red; }

anulează ambele reguli care au fost descrise anterior.

Iar construcția

<p class=”class_p” id=”id_p” style=”color:blue”>TEXT</p>

va anula toate regulile, deoarece, stilurile inline au prioritate

maximă.

3.5. Proprietăți CSS

Alinierea elementelor

text-align - poziționează pe orizontală obiecte (de

exemplu text sau imagini) și admite valorile left, right și center ca și

eticheta align din HTML;

~ 55 ~

vertical-align- este folosit pentru alinierea pe verticală a

obiectelor dintr-un tabel și poate lua valorile: top, middle și bottom;

float- este utilizat pentru alinierea forțată a unui element

față de celelalte elemente, iar restul elementelor vor ocupa locul rămas.

Poate avea valorile: none, left și right.

Cu proprietatea CSS float, un element poate fi împins către

dreapta sau către stânga, permiţând celorlalte elemente să se organizeze

în jurul lui. Proprietatea este folosită frecvent pentru imagini, dar este

foarte utilă şi când lucraţi cu aspectul paginii.

Elementele se deplasează numai orizontal, către stânga sau către

dreapta. Un element deplasabil va împins spre dreapta sau spre stânga

cât de mult se poate. Asta înseamnă că elementele care urmează

elementului deplasabil se vor aranja în jurul lui. Elementele dinaintea

elementului deplasabil nu vor fi afectate.

În continuare vor fi expuse 3 exemple:

- float: none

pentru codul HTML:

<img src="images.jpg"/>

Acesta este un exemplu de utilizare float:none

rezultatul va fi următorul:

Fig. 3.1. Element fără float

- float: right

pentru codul HTML:

<img src="images.jpg" style="float:right" />

Acesta este un exemplu de utilizare float:right

~ 56 ~

rezultatul va fi următorul:

Fig. 3.2. Element cu float:right

- float: left

pentru codul HTML:

<img src="images.jpg" style="float:left" />

Acesta este un exemplu de utilizare float:left

rezultatul va fi următorul:

Fig. 3.1. Element cu float: left

z-index - orice element poziţionate pe o pagină web

poate fi suprapus pe alt element într-o anumită ordine, simulînd astfel o

a treia dimensiune a ecranului. Fiecare element poate fi atât sub, cât şi

~ 57 ~

deasupra altor elemente ale paginii. Această proprietate funcţionează

numai pentru elementele a căror proprietate position este stabilită ca

absolute, fixed sau relative.

Fig. 3.4. Proprietatea z-index

Formatarea textului

text-decoration - adaugă sublinierea sau tăierea blocului

text asociat și poate avea valorile underline, line-through sau none;

color - definește culoarea textului dintr-o zonă sau

întreaga pagină;

font-family - setează tipul de font;

font-size - setează dimensiunea fonturilor. Valorile pot fi

exprimate în pixeli (px) sau puncte (pt);

font-weight - setează grosimea fonturilor. Valorile

posibile pot fi: normal, bold, bolder, lighter;

font-style - setează stilul de font. Valorile pot fi: normal,

italic, oblique;

letter-spacing - setează spațierea literelor. Valorile pot fi

în: pixeli (px), puncte (pt), inci (in), centimetri (cm) sau milimetri (mm);

word-spacing - setează spațierea cuvintelor. Valorile pot

fi în: pixeli (px), puncte (pt), inci (in), centimetri (cm) sau milimetri;

text-transform - transformă textul. Valorile posibile pot

fi: capitalize, uppercase, lowercase, none;

first-letter - schimbă aspectul primei litere dintr-un

cuvânt;

first-line - schimbă aspectul primei linii dintr-un text

Personalizarea fundalului elementelor

background-color definește culoarea de fond și poate fi

asociat oricărei etichete HTML;

background-image asociază o imagine ca fundal unui

obiect. În funcție de dimensiunile obiectului căruia îi sunt asociate,

~ 58 ~

imaginile de fond se repetă pe orizontală și verticală. Repetarea poate fi

controlată prin parametrul care poate lua valorile:

o repeat-x imaginea se repetă pe orizontală;

o repeat-y imaginea se repeta pe verticală;

o no-repeat imaginea nu se repetă.

În mod normal imaginea de fundal începe din colțul stînga sus al

obiectului asociat, dar acest lucru poate fi controlat prin comanda CSS

background-position. Sunt acceptate valorile: top, center, bottom,

percentage sau pixel;

background permite modificarea tuturor proprietăților

legate de fundal(culoare, imagine, aliniere), fiecare proprietate este dată

prin spațiu liber;

Personalizarea bordurii(chenarului)

Netscape și Internet Explorer afișează diferit chenarele.

Comanda CSS pentru definirea chenarului este border avînd

proprietățile asociate width, style și color. Pentru a fi siguri că aceste

proprietăți funcționează atît în Internet Explorer cît și în Netscape

trebuie să declarăm pentru border cel puțin width și style.

border-width stabilește grosimea chenarului și poate fi

exprimată în px (pixeli), pt (puncte), cm (centimetri) sau in (inci).

border-style stabilește tipul chenarului și poate fi dotted,

dashed, solid, double, groove, ridge, inset și outset.

border-color stabilește culoarea chenarului și poate fi

exprimată prin valoare hexazecimală sau în cuvinte.

border permite modificarea tuturor proprietăților legate

de chenar (culoare, stil, grosime), fiecare proprietate este dată prin spațiu

liber. Exemplu: border: 3px solid red;

Setarea dimensiunilor elementelor

Lățimea și înălțimea unui element sunt stabilite în HTML prin

atributele width și height. Aceste atribute pot fi adăugate sau suprascrise

prin comenzi CSS. Dimensiunile pot fi indicate în pixeli:

width: 15px

sau în procente

height:50%

Dacă dimensiunea se indică în procente, procentul se calculează

în raport cu containerul în care se află obiectul.

Proprietățile padding și margin

~ 59 ~

padding - stabilește distanța dintre obiect și chenar

simultan pentru toate laturile. Distanțele pot fi stabilite și individual

folosind padding-top, padding-bottom, padding-left sau padding-right.

margin - stabilește distanța dintre chenar și celelalte

obiecte din pagină simultan pentru toate laturile. Distanțele pot fi

stabilite și individual folosind margin-top, margin-bottom, margin-left

sau margin-right.

Valorile pentru padding și margin pot fi exprimate în: px

(pixeli), in (inci), pt (puncte) sau cm (centimetri).

Poziționarea elementelor

Poziționarea elementelor este dată de proprietatea position și

poate fi făcută în cîteva moduri: absolute, relative, fixed, static, inherit

absolute – indică faptul că elementul este poziționat

absolut, fără a influența sau a fi influențat de alte elemente din pagină.

Poziţia a elementului este dată de proprietăţile left, top, right și bottom,

de asemenea, poziţia elementului este afectată de poziţia elementului

părinte. De exemplu, dacă elementul părinte nu există sau este poziționat

ca static, calculele se fac începînd de la marginea ferestrei browserului.

Dacă poziționarea elementului părinte este setată ca fixed, relative sau

absolute, atunci coordonatele se calculează în raport cu elementul

părinte;

relative – poziția elementului se setează relativ la poziția

sa inițială. Adăugarea proprietăților left, top, right sau bottom deplasează

elementul în direcția indicată, față de poziția sa inițială;

fixed - prin acţiunea sa, această modalitate este aproape

de absolute, dar spre deosebire de aceasta, poziția elementului nu se

modifică la derularea paginii.

static – poziționarea statică este valoarea standard în

browser atribuită unui element cînd vine vorba de poziționare;

inherit – moștenește poziționarea de la părinte.

3.6. Standarde CSS

Pe parcursul anilor CSS a evoluat, deoarece a crescut cererea

pentru documentele HTML stilizate, îmbunătățite. Acest lucru a dus la

apariția mai multor versiuni CSS: CSS1, CSS2, CSS2.1, şi, în final,

CSS3. Fiecare versiune nouă a CSS acceptă mai multe caracteristici

decît cea precedentă. Şi dacă versiunile de CSS1 și CSS2 au apărut la un

interval de doar doi ani, versiunea CSS2.1 a apărut cu 11 ani mai tîrziu

~ 60 ~

decît CSS2. În acelaşi timp, nu a adus nimic nou, doar a corectat erorile

versiunii anterioare. CSS3 încă nu a apărut în mod formal, deşi aceasta

este susţinută de versiunile recente ale celor mai populare browsere -

Firefox 4, Chrome 9, Internet Explorer 9, Opera.

În CSS1, a fost pusă baza pentru toate inovaţiile ulterioare.

Machetarea paginilor era făcută pe baza tabelelor. Apariția CSS2 a

permis renunţarea la tabele pentru machetarea paginilor. A apărut

posibilitatea indicării fișierului CSS care va fi conectat, în funcţie de

dispozitivul pe care este afişată pagina. CSS3 adaugă următoarele

posibilități: afișarea animației în pagină, utilizarea gradientului,

utilizarea variabilelor şi multe altele.

3.7. Avantajele utilizării stilurilor CSS

Utilizarea stilurilor CSS oferă un șir de avantaje:

Diferențierea de cod și designului

În mod ideal, o pagină web trebuie să conțină numai etichetele

HMTL iar aspectul elementelor să fie specificat prin stiluri CSS. Astfel,

elaborarea designului și machetarea pot fi executate în paralel.

Design diferit pentru diferite dispozitive

Puteți utiliza stiluri pentru a determina aspectul paginii Web

pentru dispozitive de ieșire diferite: monitoare, imprimante, telefoane,

PDA-uri, etc. Se vor crea diferite fișiere de stiluri, cîte unul pentru

fiecare dispozitiv.

Posibilități mai avansate în comparație cu HTML

Spre deosebire de HTML, stilurile oferă mai multe posibilități

pentru modificarea aspectului elementelor paginii web.

Creșterea vitezei de încărcare a paginilor

La păstrarea stilurilor într-un fișier separat, el este memorat în

cache-ul browser-ului, iar la o deschidere repetată a paginii nu mai este

nevoie ca fișierul să fie încărcat din nou .

Stilizare unică și stocare centralizată

Un site poate conține un număr foarte mare de pagini. Dacă se

utilizează stilurile CSS externe, la modificarea anumitor proprietăți, este

nevoie modificarea lor într-un singur loc – fișierul de stiluri, modificările

fiind aplicate pentru toate paginile, fără a fi nevoie modificarea fiecărei

pagini în parte.

~ 61 ~

3.8. Validarea codului CSS

Necesitatea validării

Subiectul validării fișierelor HTML sau CSS a fost, și este încă,

dezbătut pe multe forumuri de specialitate și probabil va mai fi mult

timp de acum înainte. Întotdeauna vor fi păreri pro validare și păreri

contra.

Validarea unei pagini

Indiferent că vorbim de cod HTML sau CSS: validarea unei

pagini ne asigură că sintaxa codului scris este corectă, conform

specificațiilor "W3 Consortium". (organizație al cărei scop este acela de

a emite specificații ce asigură promovarea unui web "curat" și

standardizat).

Trebuie de menționat însă, că dacă avem o pagina validă, asta nu

înseamnă neapărat că ea va fi afișată corect pe toate browserele.

Motivele validării codului

1. Asigurarea compatibilității pe cît mai multe browsere

Chiar dacă situl e realizat în așa manieră încît se vede perfect pe

un browser, este posibil să nu fie afișat corect în toate celelalte browsere.

Asta pentru că nu toate au același sistem de prelucrare a paginii, unele

sunt mai permisive cu erorile, altele mai stricte, etc.

2. Vizibilitate în motoarele de căutare

Cînd există erori (de cod, de sintaxă) pe o pagină, unele

browsere compensează aceste erori, și afișează totuși corect pagina. Nu

la fel stă situația însă, cînd vorbim de motoarele de căutare. Avînd o

pagină invalidă, există riscul ca ea să nu fie indexată, sau să fie indexată

parțial.

3. Profesionalism

Pînă la urmă, modul în care realizați paginile web, reflectă

profesionalismul și aptitudinile dvs. Un portofoliu de site-uri valide va

cîntări mai greu în fața viitorilor clienți decît un portofoliu plin de pagini

invalide, chiar dacă ele se afișează corect în browser.

Pentru validarea fișierelor CSS folosiți unealta pusă la dispoziție

de W3C la adresa http://jigsaw.w3.org/css-validator/.

~ 62 ~

Însărcinări

1. Care sunt avantajele utilizării CSS?

2. Care este sintaxa pentru crearea unei clase CSS?

3. Cum este sintaxa definirii unei proprietăți CSS?

4. Pentru ce este utilizată proprietatea z-index?

5. Scrieți codul CSS care setează în roșu culoarea tuturor

hiperlinkurilor din pagină.

6. Care este diferența dintre id și class, atunci cînd se face

conectarea unui stil CSS?

7. Scrieți secvența de cod care conectează fișierul de stiluri

machet.css.

8. Care proprietate CSS este utilizată pentru a seta culoarea

fundalului? Exemplu.

9. Care este diferența dintre poziționarea absolută și cea

fixată?

10. Care este diferența dintre padding și margin?

11. Care sunt avantajele utilizării fișierelor de stiluri CSS

externe?

12. Care este diferența dintre unitățile de măsură % și px?

13. Scrieți codul CSS care setează bordură albastră tuturor

imaginilor din pagină.

14. Care proprietate CSS este utilizată pentru a seta alinierea

textului? Exemplu.

15. Care este diferența dintre poziționarea absolută și cea

relativă?

16. Este obligatorie validarea codului CSS? Argumentați.

17. Scrieți codul CSS care setează pentru o clasă de

elemente următoarele proprietăți: bordură albastră cu grosimea de 2

pixeli și lățimea elementului 30%.

18. Scrieți codul CSS care setează pentru o clasă de

elemente următoarele proprietăți: lățimea elementului 300 pixeli și

înălțimea 25%.

19. Scrieți codul CSS care setează pentru un singur element

următoarele proprietăți: fundal de culoare verde și bordura roșie cu

grosimea de 3 pixeli și linie punctată.

20. Cum se marchează în CSS un bloc de comentarii?

~ 63 ~

21. Care este diferența dintre stilurile CSS incapsulate și

cele externe?

22. Enumerați și descrieți cele 4 modalități de atașare a

stilurilor CSS unui element.

23. În baza unui exemplu, explicați prioritățile celor 4 tipuri

de atașare a stilurilor CSS unui element.

24. Fie că avem elementul:

<div class=”bloc” style=”background:red”>BLOC DE

TEXT</div>

și codul CSS:

.bloc{

background: green;

}

Care va fi culoarea fundalului elementului respectiv?

Argumentați răspunsul.

25. Fie că avem elementul:

<div id=”bloc1” style=”background:red”>BLOC DE

TEXT</div>

și codul CSS:

#bloc1{

background: blue;

}

Care va fi culoarea fundalului elementului respectiv?

Argumentați răspunsul.

26. Fie că avem elementul:

<div id=”bloc1” class=”bloc”>BLOC DE TEXT</div>

și codul CSS:

.bloc{

background: green;

}

#bloc1{

background: blue;

}

Care va fi culoarea fundalului elementului respectiv?

Argumentați răspunsul.

27. Fie că avem elementul:

~ 64 ~

<div class=”bloc”>BLOC DE TEXT</div>

și codul CSS:

div{

background: yellow;

}

.bloc{

background: green;

}

stilurile pentru ID:

#bloc1{

background: blue;

}

Care va fi culoarea fundalului elementului respectiv?

Argumentați răspunsul.

28. Se dă următorul cod CSS:

a{

color: green;

}

a:hover{

color: red;

}

Care va fi efectul lui asupra paginii HTML?

29. Se dă următorul cod CSS:

element#{

color = green;

text-color = white;

}

Corectați erorile comise.

30. Se dă următorul cod CSS:

#Clasa_de_elemente{

text-align:left;

}

Corectați erorile comise.

~ 65 ~

UNITATEA DIDACTICĂ

LIMBAJUL SERVER PHP

Finalități:

După studierea unității didactice și realizarea sarcinilor propuse,

studentul va fi capabili să:

poată elabora pagini dinamice PHP;

utilizeze tipurile de date, variabile superglobale și

operatori PHP;

elaboreze pagini dinamice pentru gestionarea bazelor de

date MySQL.

~ 66 ~

4. LIMBAJUL SERVER PHP

PHP este un limbaj de programare. Numele PHP provine din

limba engleză și este un acronim recursiv: Php: Hypertext Preprocessor.

Folosit inițial pentru a produce pagini web dinamice, este folosit pe

scară largă în dezvoltarea paginilor și aplicațiilor web. Se folosește în

principal înglobat în codul HTML, dar începând de la versiunea 4.3.0 se

poate folosi și în mod „linie de comandă” (CLI), permițând crearea de

aplicații independente. Este unul din cele mai importante limbaje de

programare web open-source și server-side, existând versiuni disponibile

pentru majoritatea web serverelor și pentru toate sistemele de operare.

Conform statisticilor este instalat pe 20 de milioane de situri web și pe 1

milion de servere web. Este disponibil sub Licenṭa PHP ṣi Free Software

Foundation îl consideră a fi un software liber.

Inițial, limbajul a fost dezvoltat de inventatorul său, Rasmus

Lerdorf. Odată cu creșterea numărului de utilizatori, dezvoltarea a fost

preluată de o nouă entitate, numită The PHP Group (Grupul PHP).

PHP însemna inițial Personal Home Page. PHP a fost început în

1994 ca o extensie a limbajului server-side Perl, și apoi ca o serie de

CGI-uri compilate de către Rasmus Lerdorf, pentru a genera un

curriculum vitae și pentru a urmări numărul de vizitatori ai unui site.

Apoi a evoluat în PHP/FI 2.0, dar proiectul open-source a început să ia

amploare după ce Zeev Suraski și Andi Gutmans, de la Technion au

lansat o nouă versiune a interpretorului PHP în vara anului 1998, această

versiune primind numele de PHP 3.0. Tot ei au schimbat și numele în

acronimul recursiv de acum, până atunci PHP fiind cunoscut ca Personal

Home Page Tools. Apoi Suraski și Gutmans au rescris baza limbajului,

producând astfel și Zend Engine în 1999. În mai 2000 a fost lansat PHP

4.0, având la bază Zend Engine 1.0.

PHP 5

Pe 13 iulie 2004 a fost lansat PHP 5, cu Zend Engine II, ce a

adus și o orientare obiect mai pronunțată și suportând mai multe

caracteristici ale acestui tip de programare.

PHP 5 aduce mai multe noutăți față de versiunea 4:

Suport îmbunătățit pentru OOP;

~ 67 ~

Introduce extensia PDO - PHP Data Objects, care

definește o modalitate facilă și consistentă de accesare a diferitelor baze

de date;

Îmbunătățiri de performanță;

Suport îmbunătățit pentru MySQL și MSSQL;

Suport nativ pentru SQLite;

Suport SOAP integrat;

Iteratori pentru date;

Controlul erorilor prin tratarea de excepții.

La sfârșitul anului 2007 doar versiunea 5.x mai era întreținută,

deoarece în data de 13 iulie 2007 (exact la 3 ani după lansarea PHP5),

PHP Group a anunțat că PHP4 va fi scos din uz pe 31 decembrie 2007,

deși prognozează că anumite upgrade-uri de securitate se vor oferi până

pe 8 august 2008. Dezvoltarea la PHP 6 începuse deja în decembrie

2007 și urmează să fie oferit odată cu scoaterea din uz a PHP4.

PHP 6

PHP 6 are următoarea agendă de îmbunătățiri și modificări:

îmbunătățirea suportului pentru Unicode;

retragerea definitivă a unor funcții ca register_globals și

magic_quotes, și a variabilelor tip $HTTP_*_VARS;

var va fi un alias pentru public, și folosirea lui va ridica

o atenționare E_STRICT;

suport pentru int pe 64 biți;

taguri de tipul ASP sunt retrase definitiv;

XMLReader, XMLWriter, Fileinfo vor face parte din

distribuția principală;

Au fost scoase din distribuția principală pachetele:

Freetype1, GD1, mime_magic;

funcția ereg() nu mai este disponibilă;

instanțierea obiectelor prin referină (& new Obiect())

generează o eroare E_STRICT;

erorile tip E_STRICT sunt incluse în E_ALL;

adăugarea instrucțiunii goto permite salturi la un alt bloc

de comenzi;

namespace, import, și goto devin cuvinte rezervate;

~ 68 ~

accesarea caracterelor într-un șir (string) se face prin

operatorul []. {} se scoate din uz ( ex: $str[42] funcționează, $str{42} nu

funcționează);

constantele FILE_BINARY și FILE_TEXT devin

disponibile pentru folosirea în funcții de citire/scriere fișiere;

foreach va suporta array multidimensional: foreach($a

as $b => list($c, $d));

pentru operatorul ternar expresia pentru valoarea true nu

mai este obligatorie ($a = $s ?: ‘b’; // return $a = $s;);

opțiunea safe_mode a fost înlăturată;

operatorul and a fost înlăturat;

funcția microtime() returnează un float;

zend.ze1_compatibility_mode a fost înlăturat.

Observație: Scripturile PHP incluse în codul HTML sunt

executate pe server. Aceasta are ca efect faptul că dacă încercați să

vizualizați codul sursă al unei pagini web dinamice o să observați că el

conține doar tag-uri HTML, acestea fiind rezultatul obținut în urma

interpretării codului PHP.

Fișierele care conțin cod PHP trebuie salvate cu extensia .php

pentru ca severul web să transmită fișierul interpretorului PHP.

4.1. Sintaxa limbajului PHP

Sintaxa limbajului PHP este foarte asemănătoare cu ce a

limbajului C. Un fișier PHP poate conține tag-uri HTML și cod PHP.

Marcarea începutului codului PHP se face cu

<?PHP

iar sfîrșitul blocului de cod PHP cu

?>

De asemenea, pentru deschiderea blocului de cod se poate utiliza

forma scurtă (short tags)

<?

Exemplu de bloc PHP, combinat cu cod HTML:

<html>

<body>

<?php echo "Hello world"; ?>

</body>

</html>

~ 69 ~

Rezultatul va fi afișarea în pagină a mesajului “Hello world”,

fără a fi vizibile comenzile și construcțiile utilizate în cod, iar codul

sursă al paginii va fi:

<html>

<body>

Hello world

</body>

</html>

Un bloc de script PHP poate fi înserat în orice loc a unui

document HTML. Fiecare instrucțiune PHP trebuie separată de o altă

instrucțiune prin caracterul special “;”.

Comentarii în PHP

În PHP sunt trei metode prin care se poate adăuga un

comentariu, evident neafișat în browser, cu scopul de a adăuga

informații necesare programatorului.

Tot ce urmează după caracterele // sau # este considerat

comentariu. De exemplu:

// Urmeaza un comentariu in PHP

# Urmeaza un comentariu in PHP

Utilizare:

echo "test"; // browser-ul va afisa test

echo "proba"; # browser-ul va afisa proba

Un comentariu format din mai multe linii este încadrat în /* și

*/. De exemplu:

/* Comentariul in PHP

scris pe doua linii */

Acest tip de comentariu poate fi folosit și pentru ignorarea unor

blocuri PHP. În exemplul următor browserul va afișa doar test

/* echo "Tutorial";

echo "PHP"; */

echo "test";

4.2. Variabile în PHP

Declararea variabilelor

Toate variabilele încep cu semnul dolarului $ urmat de “_” sau o

literă. Variabilele sunt case-sensitive astfel încît $ID nu este aceeași

variabilă ca $Id.

Atribuirea de valori unei variabile

~ 70 ~

Atribuirea unei valori (indiferent că este vorba de string, integer,

float, sau bool) se face cu operatorul de atribuire “=”.

Tipul de date al unei variabile

La declararea unei variabile în PHP nu este necesar să fie

specificat tipul ei de date, acesta fiind setat automat în dependență de

valoarea pe care o primește variabila. Pe parcursul unei execuții a

scriptului PHP o variabilă își poate modifica tipul de date.

Exemplu:

<?php

$v = "Buna ziua!";

//variabilei îi este setat tipul de date string

$v = 9.26;

//variabilei îi este setat tipul de date float

?>

Domeniul de vizibilitate al variabilelor

Variabilele definite în PHP se consideră globale, cu excepția

variabilelor care sunt definite în interiorul funcțiilor și claselor.

Exemplu:

<?php

$i = 5;

function afiare(){

echo $i;

}

afisare();

?>

Funcția nu va afișa nimic, deoarece scriptul se adresează la

variabila $i locală, din interiorul funcției. Pentru a face ca variabila să fie

vizibilă, se utilizează cuvîntul cheie global:

<?php

$i = 5;

function afiare(){

global $i;

echo $i;

}

afisare();

?>

Pentru a verifica existența unei variabile se utilizează funcția

isset, care returnează true dacă variabila există și false în caz contrar:

~ 71 ~

if(isset($i))

echo $i;

else

echo “Variabila i nu există”;

4.3. Constante

Constantele sunt entități care nu își schimbă valoarea pe

parcursul execuției. Sunt utile pentru a recunoaște ușor valorile folosite

în cod. De exemplu, e mai ușor de înțeles următorul cod, cînd se

folosește o constantă decît dacă s-ar folosi cifra 5

define( 'ZILE_LUCRATOARE', 5);

$zile = array( 'luni', 'marti', 'miercuri', 'joi', 'vineri', 'sambata',

'duminica' );

print 'Zilele lucratoare sunt: ';

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

print $zile[ $i ] . ' ';

}

Așadar, constantele se definesc folosind DEFINE:

define( 'NUME', "Nume" );

define( 'VARSTA', 10 );

define( "ADEVARAT", true );

Este recomandat ca numele constantelor să fie scris cu

majuscule (pentru a fi mai ușor identificate) deși nu este obligatoriu.

Atunci cînd se folosesc, se specifică doar numele, fără ghilimele sau $:

print "Ma numesc " . NUME;

print " si am " . VARSTA . " ani";

Pentru a verifica dacă o constantă este definită, se folosește

funcția DEFINED:

if( defined( 'NUME' ) ) {

print "Ma numesc " . NUME;

}

if ( !defined( 'VARSTA2' ) ) {

define( 'VARSTA2' , 20 );

}

print " Am " . VARSTA . " ani";

Observație: definirea repetată e unei constante, care a fost deja

definită, va genera un mesaj de eroare.

~ 72 ~

4.4. Șiruri de caractere

Exemplu:

<?php

$v1 = "Buna ziua!";

$_v2 = "Studenti";

?>

În ambele cazuri variabilelor $v1 si $_v2 li se atribuie cîte un

string. Acesta poate fi ulterior afișat cu echo.

Pentru a uni doua șiruri de caractere se utilizează operatorul “.”

(punct).

Exemplu:

<?php

$variabla = "Buna"." ziua!";

echo $variabla;

// va afisa "Buna ziua!"

echo "Salutare"."studenti";

// va afisa "Salutarestudenti"

?>

Se pot uni inclusiv o variabilă de tip string cu un string sau două

variabile de tip string.

Exemplu:

<?php

$v1 = "Limbajul";

$name = $v1." PHP"; // va uni conținutul lui $v1 + " PHP" (cu

spațiu)

echo $name;

// va afisa "Limbajul PHP"

echo $name." Versiunea 5.0";// va afișa "Limbajul PHP

Versiunea 5.0"

?>

Într-o expresie se pot utiliza mai mulți operatori de concatenare.

4.4.1. Metode de definire a șirurilor

Șiruri de caractere delimitate de ghilimele duble

Șirurile delimitate prin ghilimele duble au particularitatea că pot

interpreta variabilele și caracterele speciale din interiorul lor. Astfel, la

evaluarea textului, variabilele existente în interiorul lui sunt înlocuite cu

valoarea lor iar rezultatul final este returnat.

~ 73 ~

<?php

$a = "valoarea variabilei"; // definesc o variabila

print "Textul definit cu ghilimele contine $a";

// va afisa

// Textul definit cu ghilimele contine valoarea variabilei

?>

Șiruri de caractere delimitate de ghilimele simple

Șirurile delimitate prin ghilimele simple nu permit interpretarea

variabilelor conținute și nici a caracterelor speciale cu excepția \' și \\.

<?php

$a = 'valoarea variabilei'; // definesc o variabila

print 'Textul definit cu ghilimele contine $a'; // Textul definit cu

ghilimele contine $a

?>

Șiruri de caractere delimitate cu notația specială <<<

Aceste șiruri de caractere au avantajul că nu necesită marcarea

(escaparea) delimitatorilor prin \' sau \". În rest, aceste string-uri sunt

tratate în același mod ca cele delimitate de ghilimele duble, în sensul că

permit interpretarea variabilelor și a altor caractere speciale.

<?php

$a = 'valorii lor'; // definesc o variabila

print <<<TXT

Text pe mai multe linii. <br />

Delimitatorii pot avea orice nume: TXT, START, etc, cu

urmatoarele conditii: <br />

- ambii delimitatori (de inceput si sfarsit) trebuie sa aiba acelasi

nume

- inainte de primul delimitator se foloseste <<<

- delimitatorul de inceput nu trebuie sa fie urmat de spatiu sau

alt caracter (important!)

- delimitatorul de final sa fie la inceputul liniei (fara spatii

inainte)

- dupa delimitatorul final se pune punct si virgula ;

- pot contine ghilimele " sau apostrof ' fara nevoia de a le

escapa

- permit interpretarea variabilelor si afisarea $a

TXT;

?>

~ 74 ~

4.4.2. Funcții de prelucrare a șirurilor de caractere

Mai jos sunt prezentate operațiile uzuale cu șiruri de caractere și

funcțiile oferite de limbajul PHP pentru realizarea lor.

addslashes("sir")

Adaugă caracterul \ (backslash) înaintea ghilimelelor simple și

duble, a lui backslash și NULL (NULL byte). Ca protecție, de exemplu

cînd șirul e adăugat într-o bază de date.

<?php

$sir = 'Un sir ce contine caractere: " si \ ';

echo addslashes($sir); // Un sir ce contine caractere: \" si \\

?>

chr(ascii)

Returnează caracterul reprezentat de codul ASCII din parametru.

<?php

echo chr(77); // M

?>

chunk_split("sir", nr, 'sep')

Împarte "sir" în subșiruri, avînd lungimea de caractere "nr" și

separate prin "sep".

<?php

$sir = 'Sir de test, siruri.';

echo chunk_split($sir, 7, ' | '); // Sir de | test, s | iruri. |

?>

explode('sep', "sir")

Creează un masiv cu părțile din "sir" separate prin "sep". Fiecare

subșir delimitat de "sep" devine un element al masivului. Este inversul

lui "implode()".

<?php

$sir = 'Sir de test, cu subsiruri, separate de, virgula.';

$aray = explode(',', $sir);

print_r($aray); // Array ( [0] => Sir de test [1] => cu

subsiruri [2] => separate de [3] => virgula. )

?>

html_entity_decode("sir")

Decodează entitățile HTML din "sir". E opusul lui

"htmlentities()"

<?php

$sir = 'Sir de test, cu entitati &copy; &lt;b&gt;html&lt;/b&gt;.';

~ 75 ~

echo html_entity_decode($sir); // Sir de test, cu entitati ©

<b>html</b>.

?>

htmlentities("sir")

Convertește toate caracterele specifice din șir în entități HTML.

<?php

$sir = 'Sir de test, cu entitati " & - <b>html</b>.';

$sir = htmlentities($sir); // $sir va deveni: Sir de test, cu

entitati &quot; &amp; - &lt;b&gt;html&lt;/b&gt;.

?>

htmlspecialchars_decode("sir")

Convertește entitățile HTML, ce pot fi codificate cu

"htmlspecialchars()", înapoi la forma de caracter.

htmlspecialchars("sir")

Convertește doar caracterele ghilimele, & < si > din "sir" în

entități HTML.

md5("sir")

Codifică șirul cu algoritmul MD5, returnînd un șir codat cu 32

de caractere.

<?php

$sir = 'programare web';

echo md5($sir); // 6e0514ac3505d906158c8b376f7911b5

?>

rtrim("sir", 'caracters')

Șterge din partea dreapta a șirului caracterele specificate la

"caracters", care poate fi un singur caracter sau un șir. Dacă al doilea

parametru nu e specificat, va șterge spațiile libere din dreapta.

<?php

$sir = 'abc def gh89 ';

echo rtrim($sir, '89 '); // abc def gh

echo rtrim($sir); // abc def gh89

?>

sha1("sir")

Similar cu "md5()", această funcție codifică șirul cu algoritmul

SHA1 (US Secure Hash Algorithm 1), returnînd un șir codat cu 40 de

caractere.

str_ireplace("old", "new", "sir")

~ 76 ~

Înlocuiește în "sir" caracterele specificate la "old" cu cele de la

"new", fără a ține cont de majuscule sau litere mici. "old" și "new" pot fi

și de tip Array.

<?php

$sir = 'Astazi este marti.';

echo str_ireplace('marti', 'miercuri', $sir); // Astazi este

miercuri.

?>

str_replace("old", "new", "sir")

Similar cu "str_ireplace()", înlocuiește în "sir" caracterele

specificate la "old" cu cele de la "new", dar este case-sensitive (ține cont

de majuscule și litere mici). "old" și "new" pot fi și de tip Array.

str_repeat("sir", nr)

Returnează un șir în care parametrul "sir" e repetat de "nr" ori.

<?php

$sir = '=- ';

echo str_repeat($sir, 8); // =- =- =- =- =- =- =- =-

?>

str_shuffle("sir")

Amestecă aleator caracterele din "sir".

<?php

$sir = 'programare web';

echo str_shuffle($sir); // wprobrragae me

?>

str_split("sir", nr)

Transformă "sir" în Array, împărțind pentru fiecare element

subșiruri cu lungimea de "nr" caractere. Daca "nr" nu e specificat,

fiecare caracter din șir va deveni un element în masiv.

<?php

$sir = 'Test sir';

$ar1 = str_split($sir); // $ar1 va avea valoarea array('T', 'e',

's', 't', ' ', 's', 'i', 'r')

$ar2 = str_split($sir, 3); // $ar2 va avea valoarea

array('Tes', 't s', 'ir')

?>

str_word_count("sir")

Returnează numărul de cuvinte din șir.

<?php

~ 77 ~

$sir = Unu doi trei patru cinci';

echo str_word_count($sir); // 5 apostroful nu e considerat

parte dintr-un cuvînt)

?>

strcasecmp("sir1", "sir2")

Compară cele două șiruri date ca parametri, fără diferență între

majuscule și litere mici. Returnează 0 dacă șirurile sunt egale, < 0 dacă

"sir1" e mai mic decît "sir2" sau > 0 dacă "sir1" e mai mare decît "sir2".

<?php

$sir1 = 'Salut';

$sir2 = 'salut';

if (strcasecmp($sir1, $sir2) == 0) {

echo 'Sirurile sunt egale';

}

?>

strcmp("sir1", "sir2")

Similar cu "strcasecmp()", diferența fiind că face o comparație

ce ține cont de majuscule și litere mici.

strip_tags("sir")

Șterge tag-urile HTML și PHP din "sir".

<?php

$sir = 'Exemplu cu <b>taguri</b> <h6>html</h6>';

echo strip_tags($sir); // Exemplu cu taguri html

?>

stripslashes("sir")

Returnează "sir" fără caracterele backslashes adăugate. Inversul

lui "addslashes()"

<?php

$sir = 'Exemplu cu \" stripslashes() \" \n';

echo stripslashes($sir); // Exemplu cu " stripslashes() " n

?>

stripos("sir", "sub-sir")

Returnează poziția de unde începe "sub-sir" în "sir" (începînd de

la 0), fără diferența între litere mici și majuscule. Dacă "sub-sir" nu e

găsit, returnează FALSE.

<?php

$sir = 'programare web';

echo stripos($sir, 'web'); // 11

~ 78 ~

?>

strpos("sir", "sub-sir")

Returnează poziția de unde începe "sub-sir" în "sir" (începînd de

la 0), case-sensitive, ținînd cont de litere mici și majuscule. Daca "sub-

sir" nu e găsit, returnează FALSE.

stristr("sir", 'car')

Returnează tot subșirul din "sir", care începe de la prima apariție

a lui 'car', fără diferența între majuscule și litere mici. Dacă nu e găsit

'car', returnează FALSE.

<?php

$sir = invatam 'limbajul php';

echo stristr($sir, ',limb'); // limbajul php

?>

strstr("sir", 'car')

Returnează tot subșirul din "sir", care începe de la prima apariție

a lui 'car', case-sensitive (cu deosebire între majuscule și litere mici).

Dacă nu e găsit 'car', returnează FALSE.

strlen("sir")

Returnează lungimea lui "sir" (numărul de caractere).

<?php

$sir = 'Tutorial PHP';

echo strlen($sir); // 12

?>

strrchr("sir", "sub-sir")

Returnează bucata rămasă din "sir" începînd de la ultimul

caracter din "sub-sir" găsit în "sir". Funcția e case-sensitive. Dacă "sub-

sir" nu se găsește în "sir", returnează FALSE.

<?php

$sir = 'Tutorial PHP, curs gratuit';

echo strrchr($sir, 'Hp'); // HP, curs gratuit (incepe de la H,

deoarece 'p' nu e in $sir, fiind diferit de P)

?>

strrev("sir")

Inversează șirul.

<?php

$sir = 'Tutorial PHP, curs gratuit';

echo strrev($sir); // tiutarg sruc ,PHP lairotuT

?>

~ 79 ~

strtolower("sir")

Transformă toate literele din șir în litere mici.

<?php

$sir = 'Limbajul PHP';

echo strtolower($sir); // limbajul php

?>

strtoupper("sir")

Transformă toate literele din șir în majuscule (litere mari).

<?php

$sir = 'Limbajul PHP';

echo strtoupper($sir); // LIMBAJUL PHP

?>

substr_count("sir", "sub_sir")

Returnează numărul de cîte ori "sub_sir" se găsește în "sir".

Funcția este case-sensitive.

<?php

$sir = 'Un test functii php, test pentru siruri.';

echo substr_count($sir, 'test'); // 2;

?>

substr("sir", start, lungime)

Returnează porțiunea din "sir" care începe de la "start", cu

lungimea de caractere "lungime". Dacă parametrul "lungime" nu e

specificat, se consideră pînă la sfîrșitul șirului.

<?php

$sir = 'Tutoriale, cursuri, scripturi php.';

echo substr($sir, 11, 18); // cursuri, scripturi

?>

trim("sir", 'del')

Șterge de la extremitățile șirului caracterul (caracterele)

specificate la "del". Daca al doilea parametru, "del", nu e adăugat, șterge

spațiile libere din marginile șirului.

<?php

$sir = '--Limbajul php--';

echo trim($sir, '-'); // Limbajul php

?>

ucfirst("sir")

Transformă primul caracter din "sir" în literă mare.

<?php

~ 80 ~

$sir = 'abc def';

echo ucfirst($sir); // Abc def

?>

ucwords("sir")

Transformă primul caracter al fiecărui cuvînt din "sir" în literă

mare.

<?php

$sir = 'limbajul de programare php';

echo ucwords($sir); // Limbajul De Programare Php

?>

nl2br("sir")

Înlocuiește caracterele de rînd nou (\r\n și \n) cu tagul HTML

<br/>. Funcție utilă cînd șirul e preluat dintr-un textarea.

<?php

$sir = "Sir test \r\n preluat dintr-un \r\n camp textarea.";

$sir = nl2br($sir); // Acum $sir va fi "Sir test <br /> preluat

dintr-un <br /> camp textarea."

?>

wordwrap("sir", lungime, "sep", true)

Împarte "sir" la numărul de caractere specificat de "lungime",

separînd prin "sep" părțile astfel obținute. Funcție utilă cînd se dorește

scurtarea liniilor sau cuvintelor prea lungi. Dacă "true" nu e specificat,

va împarți doar rîndurile, lăsînd cuvintele neafectate.

<?php

$sir = 'Cuviiiiiiiiiiiiiiiiinnnnnnnnnnnntttttttt, cam prea

llluuuuuuunnnnnnnnggggggg.';

$sir1 = wordwrap($sir, 20, '<br />'); // Acum $sir1 va fi

'Cuviiiiiiiiiiiinnnnnnnnnnnntttttttt,<br /> cam prea<br />

llluuuuuuunnnnnnnnggggggg.'

$sir2 = wordwrap($sir, 20, '<br />', true); // Acum $sir2 va

fi 'Cuviiiiiiiiiiiiiiiinnnnnnn<br />nnnnntttttttt, cam <br />prea <br

/>llluuuuuuunnnnnnnnggg<br />gggg.'

?>

4.5. Variabile numerice

În PHP se cunosc două tipuri de date numerice: întregi (int) și în

virgulă flotantă (float sau double) .

Numere întregi

~ 81 ~

La atribuirea valorii unei variabile se stabilește automat tipul

variabilei. Dacă dorim să definim o variabilă int atunci îi atribuim direct

o valoare întreagă.

Exemplu:

<?php

$valoare = 3;

echo "Numarul ales este ".$valoare;

?>

Numere reale

Numerele care conțin parte zecimală sunt de tip float

<?php

$g = 9.81;

echo "Constanta gravitationala g= ".$g;

?>

La acest tip de numere este important să reținem că separatorul

zecimal este semnul punct, semnul virgulă se utilizează pentru separarea

parametrilor unei funcții.

Observație: Punctul este și operatorul de concatenare. Daca am

dori să unim două numere avem următoarele posibilități:

1. Atribuim mai întîi numerele unor variabile și apoi unim

acestea cu operatorul punct.

<?php

$unitati = 4;

$zeci = 5;

echo $zeci.$unitati;

?>

2. Dacă dorim sa unim două valori întregi cu ajutorul

operatorului punct atunci trebuie sa înserăm cîte un spațiu înainte și după

operator.

<?php

echo 4 . 5; // Afiseaza 45

echo 4.5; // Afiseaza 4.5

?>

4.6. Variabile logice

boolean- cel mai simplu tip de date în PHP și exprimă valoarea

de adevăr a unei expresii. Poate primi una din cele 2 valori – true sau

false.

~ 82 ~

Variabilele de alt tip decît boolean pot fi convertite la tipul

boolean prin operatorul cast (bool) sau (boolean), plasate înaintea

valorilor, deși în general nu e nevoie de această convertire, valoarea

fiind automat recunoscută de PHP.

La transformarea în boolean, următoarele valori se consideră ca

FALSE:

însăși valoarea false;

valoarea întreagă 0;

valoarea reală 0.0;

șir de caractere vid sau șirul “0”;

masivul fără elemente;

valoarea NULL.

Toate celelalte valori se consideră ca TRUE.

4.7. Operatori PHP

În tabelele 4.1, 4.2, 4.3 și 4.4 sunt descriși operatorii PHP,

grupați după scop:

Tabelul 4.1. Operatori aritmetici

Operator Descriere Exemplu Rezultat

+ Adunare x=2

x+2

4

- Scădere x=2

5-x

3

* Înmulțire x=4

x*5

20

/ Împărțire 15/5

5/2

3

2.5

% Modul (rest) 5%2

10%8

10%2

1

2

0

++ Incrementare x=5

x++

x=6

-- Decrementare x=5

x--

x=4

~ 83 ~

Tabelul 4.2. Operatori de atribuire

Operator Exemplu Corespunde

= x=y x=y

+= x+=y x=x+y

-= x-=y x=x-y

*= x*=y x=x*y

/= x/=y x=x/y

%= x%=y x=x%y

Tabelul 4.3. Operatori de comparare

Operator Descriere Rezultat Exemplu

== egal cu true dacă $a este egal cu

$b după conversia

tipurilor

5==”5” - true

6 == “5” -

false

=== identic egal

cu

true dacă $a este egal cu

$b și au același tip

5 === “5” –

false

5 === 5 –

true

!= nu este egal

cu

true dacă $a nu este egal

cu $b după conversia

tipurilor

5!=3 – true

5!=”5” – false

!== identic nu

este egal

true dacă $a nu este egal

cu $b și au același tip

5!==”5” -

true

5!==5 - true

> este mai

mare ca

true dacă $a este mai

mare ca $b

5>3 – true

3>5 – false

< este mai mic

ca

true dacă $a este mai

mic ca $b

5<3 – false

3<5 – true

>= este mai

mare sau

egal ca

true dacă $a este mai

mare sau egal ca $b

5>=3 – true

5>=6 – false

<= este mai mic

sau egal ca

true dacă $a este mai

mic sau egal ca $b

5<=3 – false

5<=6 – true

Tabelul 4.4. Operatori logici

Operator Descriere Exemplu

&& și x=6, y=3, (x>y)&&(x<y) – false,

~ 84 ~

(x>y)&&(y<x) - true

and și x=6, y=3, (x>y)and(x<y) – false,

(x>y)and(y<x) - true

|| sau x=6, y=3, (x>y)||(x<y) – true, (x<y)||(y>x) –

false

or sau x=6, y=3, (x>y)or(x<y) – true, (x<y)or(y>x)

- false

! Negare x=true, !x returnează false

4.8. Masive

De fapt, un masiv în PHP este o hartă ordonată, care mapează

valoarea și cheia. Acest tip este optimizat în mai multe moduri, astfel

încât poate fi folosit pentru a crea o matrice, listă (vector), stivă, coadă,

și, probabil, altceva. Deoarece elementul unui masiv PHP poate fi la

rîndul său masiv, pot fi creați, de asemenea, arbori și rețelele

multidimensionale.

Există două tipuri de tablouri, care diferă prin metoda de

identificare a elementelor.

1. În primul tip de masiv elementele sunt definite de

indecși (key) care primesc valori numerice consecutive care se încep de

la 0. Aceste masive se mai numesc simple;

2. Masivele de tipul al doilea sunt de natură asociativă, și

pentru accesarea elementelor sunt utilizate chei (key), care în mod logic

sunt asociate cu valorile. Aceste tablouri sunt numite tablouri asociative.

O caracteristică importantă a PHP este faptul că PHP, spre

deosebire de alte limbaje, oferă posibilitatea de a crea masive de orice

complexitate direct în corpul programului (script).

Matricele pot fi unidimensionale sau multidimensionale.

4.8.1. Definirea unui masiv

Un masiv poate fi creat cu ajutorul construcției array(). Ca

parametri, este poate primi un număr oarecare de perechi (parametri) de

tipul key => value (cheie => valoare), separate prin virgulă:

array (

key1 => valoare1,

key2 => valoare2,

key3 => value3,

~ 85 ~

...

)

Începînd cu PHP 5.4 se poate utiliza o sintaxă prescurtată pentru

crearea tablourilor:

$array = [

key1 => valoare1,

key2 => valoare2,

key3 => valoare3,

...

];

Cheia unui masiv poate fi de tip întreg sau șir de caractere.

Valoarea poate fi de orice tip. Dacă cheile nu sunt specificate, implicit

acestea vor fi setate automat începînd de la 0 în ordine crescătoare.

Pentru a accesa un element al masivului se va utiliza construcția:

$array[key]

unde key poate fi de tip întreg sau șir de caractere.

Masivul existent poate fi schimbat prin setarea valorilor noi în

mod explicit. Acest lucru se face prin atribuirea de valori, specificând

cheie în paranteze pătrate. De asemenea, se poate omite cheia. În acest

caz, se folosește numele masivului cu o pereche de paranteze patrate fără

cheie [].

$arr [key] = valoare;

$arr [] = valoare;

Dacă $arr nu există, el este creat. Astfel, aceasta este o altă

modalitate de a defini un masiv. Cu toate acestea, această metodă nu este

recomandată, deoarece în cazul în care variabila $arr conține deja o

valoare, această valoare se păstrează, și [] poate însemna, de fapt accesul

la un element al șirului.

Pentru eliminarea unui element din masiv se utilizează:

unset($arr) – va distruge întregul masiv

sau

unset($arr[key]) – va distruge elementul masivului cu cheia key.

Adăugarea unui element la sfîrșitul masivului, fără a specifica

cheia, poate fi făcută cu ajutorul construcției:

array(1, 2, 3)

$array[] = 4;

În rezultat se va obține următorul masiv:

array(1, 2, 3, 4)

~ 86 ~

această construcție este echivalentă cu

$array[3] = 4;

4.8.2. Funcții de prelucrare a masivelor

În continuare sunt descrise cele mai des utilizate funcții utilizate

în lucrul cu masivele:

array_count_values(array)

Returnează o matrice cu numărul de repetări a fiecărui element

din "array".

<?php

$aray = array('a', 8, 'a', 'b', 'a', 8, 'c');

$re = array_count_values($aray);

print_r($re);

// Return: Array ( [a] => 3 [8] => 2 [b] => 1 [c] => 1 )

?>

array_diff(array1, array2)

Returnează o matrice cu elementele din "array1" care nu se

găsesc în "array2".

<?php

$aray1 = array("a"=>"green", "blue", "red");

$aray2 = array("b"=>"green", "yellow", "red");

$re = array_diff($aray1, $aray2);

print_r($re);

// Va afisa: Array ( [1] => blue )

?>

array_flip(array)

Schimbă valorile și cheile între ele. Din valorile care se repetă o

păstrează pe ultima.

<?php

$aray = array("a"=>1, "b"=>2, "c"=>2);

$re = array_flip($aray);

print_r($re);

// Va afisa: Array ( [1] => a [2] => c )

?>

array_intersect(array1, array2, ...)

Returnează o matrice cu toate valorile din "array1" care se

găsesc în toate celelalte masive transmise ca parametri.

~ 87 ~

<?php

$aray1 = array("a"=>1, "b"=>'a', "c"=>'d', 'e');

$aray2 = array(8, 'a', 'd');

$aray3 = array(1, 'a', 'c', 'd');

$re = array_intersect($aray1, $aray2, $aray3);

print_r($re);

// Return: Array ( [b] => a [c] => d )

?>

array_key_exists(cheie, array)

Returnează TRUE dacă "cheie" este o cheie (index) în matricea

"array", în caz contrar returnează FALSE.

<?php

$aray = array("a"=>1, "b"=>'a', "mp"=>'d');

if (array_key_exists('mp', $aray)) {

echo 'Cheia exista';

}

?>

array_keys(array, val)

Returnează o matrice cu toate cheile din "array". Parametrul

"val" e opțional, dacă e specificat, va returna doar cheile cu valoarea

"val".

<?php

$aray = array("a"=>1, "b"=>'c', 'd', "mp"=>'d');

$re = array_keys($aray);

print_r($re);

// Va afisa: Array ( [0] => a [1] => b [2] => 0 [3] => mp )

?>

array_merge($array1, $array2, ...)

Unește mai mulți array în unul singur. Dacă au cheie de tip șir

identice, va fi păstrată valoarea ultimei chei.

<?php

$aray1 = array("a"=>1, 3, 4);

$aray2 = array("a"=>2, 8);

$re = array_merge($aray1, $aray2);

print_r($re);

// Va afisa: Array ( [a] => 2 [0] => 3 [1] => 4 [2] => 8 )

?>

array_reverse(array)

~ 88 ~

Returnează "array" cu ordinea elementelor inversată.

<?php

$aray = array(1, 2, 3, 'a', 'b'=>'c');

$re = array_reverse($aray);

print_r($re);

// Return: Array ( [b] => c [0] => a [1] => 3 [2] => 2 [3]

=> 1 )

?>

array_search("val", array)

Returnează cheia din "array" care are valoarea "val", sau FALSE

daca nu exista. Căutarea e "case-sensitive"

<?php

$aray = array(1, 2, 3, 'a', 'b'=>'c');

$re = array_search('c', $aray);

echo $re;

?>

array_sum(array)

Returnează suma elementelor din "array"

<?php

$aray = array(1, 2, 3, 4);

echo array_sum($aray); // 10

?>

array_unique(array)

Returnează matricea "array" fără valorile duplicate, acestea fiind

luate o singură dată.

<?php

$aray = array(1, 2, 1, 4, 3, 4);

$aray = array_unique($aray); // $aray va avea: array(1,

2, 4, 3)

?>

arsort(array)

Sortează un "array" cu valorile ordonate în ordine inversă

alfabetic, păstrînd corelația dintre chei și valori. În caz de succes

returnează TRUE, altfel, FALSE.

<?php

$aray = array('c', "b"=>'xy', 'pm', "mp"=>'de');

arsort($aray);

~ 89 ~

// $aray va deveni: array("b"=>'xy', 'pm', "mp"=>'de', 'c')

?>

asort(array)

Sortează un "array" cu valorile ordonate în ordine alfabetică,

păstrînd corelația dintre chei și valori. În caz de succes returnează

TRUE, altfel, FALSE.

<?php

$aray = array('c', "b"=>'xy', 'pm', "mp"=>'de');

arsort($aray);

// $aray va deveni: array('c', "mp"=>'de', 'pm', "b"=>'xy')

?>

count(array)

Returnează numărul de elemente din "array"

<?php

$aray = array('c', "b"=>'xy', 'pm', "mp"=>'de');

echo count($aray); // 4

?>

implode("separator", array)

Transformă "array" în șir (string), adăugînd valorile într-un șir,

separate de ceea ce e specificat la "separator".

<?php

$aray = array('acesta', ‘este', 'un', 'masiv');

$sir = implode('.', $aray);

echo $sir; // acesta.este.un.masiv

?>

in_array("val", array)

Verifică dacă o matrice conține o anumită valoare. Returnează

TRUE dacă vreunul din elementele din "array" are valoarea "val", în caz

contrar FALSE.

<?php

$aray = array('php', "free"=>'tutorial', 'mysql', "mp"=>'curs');

if (in_array('tutorial', $aray)) {

// Se executa careva comenzi

}

?>

key(array)

Returnează cheia elementului curent la care se află pointerul

~ 90 ~

<?php

$aray = array('php', "free"=>'tutorial', 'mysql', "mp"=>'curs');

end($aray); // Muta pointerul la ultimul element

echo key($aray); // mp

?>

krsort(array)

Sortează un "array" după chei ordonate în ordine inversă

alfabetic, păstrînd corelația dintre chei și valori. În caz de succes

returnează TRUE, altfel, FALSE.

<?php

$aray = array('li'=>'php', "free"=>'tutorial', 'mysql',

"mp"=>'curs');

krsort($aray);

// $aray va deveni: array("mp"=>'curs', 'li'=>'php',

"free"=>'tutorial', 'mysql')

?>

ksort(array)

Sortează un "array" după chei ordonate în ordine alfabetică,

păstrînd corelația dintre chei și valori. În caz de succes returnează

TRUE, altfel, FALSE.

<?php

$aray = array('li'=>'php', "free"=>'tutorial', 'mysql',

"mp"=>'curs');

ksort($aray);

// $aray va deveni: array('mysql', "free"=>'tutorial',

'li'=>'php', "mp"=>'curs')

?>

rsort(array)

Sortează un "array" în ordine inversă alfabetică a valorilor

(literele mici înaintea celor mari), ștergînd cheile inițiale, devenind un

Array asociativ cu chei de la 0. În caz de succes returnează TRUE, altfel,

FALSE.

<?php

$aray = array('li'=>'Php', "free"=>'tutoriale', 'MySQL',

"mp"=>'curs');

rsort($aray);

// $aray va deveni: array('tutoriale', 'curs', 'Php', 'MySQL')

?>

~ 91 ~

sort(array)

Sortează un "array" în ordine alfabetică a valorilor (literele mari

înaintea celor mici), ștergînd cheile inițiale, devenind un Array asociativ

cu chei de la 0. În caz de succes returnează TRUE, altfel, FALSE.

<?php

$aray = array('li'=>'Php', "free"=>'tutoriale', 'MySQL',

"mp"=>'curs');

rsort($aray);

// $aray va deveni: array('MySQL', 'Php', 'curs', 'tutoriale')

?>

shuffle(array)

Amestecă aleator elementele din "array". Șterge cheile inițiale,

devenind un Array asociativ cu chei de la 0. În caz de succes returnează

TRUE, altfel, FALSE.

<?php

$aray = array('li'=>'Php', "free"=>'tutoriale', 'MySQL',

"mp"=>'curs');

shuffle($aray); // $aray va avea elementele amestecate

aleator

?>

4.9. Variabile superglobale

PHP dispune de cîteva variabile implicite. Acestea sunt pre-

populate de PHP în momentul execuției, deci nu trebuie definite sau

inițializate. Sunt disponibile în orice porțiune a codului și în orice script

PHP și pot fi folosite fără să fie nevoie de alte pregătiri. Anumite

variabile (ca de exemplu $_POST) au valori doar în anumite situații

(spre exemplu, doar atunci cînd sunt folosite formulare).

4.9.1. Masivele superglobale GET și POST

$_GET

Vector asociativ ce conține parametrii transmiși prin URL. De

exemplu, dacă pagina noastră PHP se numește test.php, un URL de

genul

http://localhost/test.php?x=1&y=2&z=3

ar completa variabila $_GET cu următoarele valori:

Array

(

~ 92 ~

[nume] => Alex

[varsta] => 12

[ocupatie] => elev

)

Vectorul $_GET este de asemenea populat la folosirea

formularelor la care atributul metod=”get”.

Variabilele transmise prin URL sunt separate de caracterul

special &, iar enumerarea lor începe după adresa fișierului urmat de

caracterul ?.

Este cea mai uzuală metodă, folosită implicit de browsere pentru

a trimite cereri către servere. Majoritatea paginilor pe care le vizualizăm

pe internet sunt obținute în urma unei cereri GET. De exemplu, scrierea

unui URL în bara de adrese a browserului sau accesarea unui link, sau a

unei imagini, toate sunt cereri de tip GET.

Observație: numele parametrilor au rol de cheie în vectorul

$_GET.

$_POST

Opus metodei GET, POST este folosită pentru a transmite

informații către server (în engleză "post data"). Spre deosebire de GET

care permite doar o cantitate limitată de date să fie transmisă de la client

(browser) la serverul web, POST dispune de limite mai generoase (de

ordinul gigaoctetilor), fiind standardul de transmitere a datelor. Astfel,

upload-ul unui fișier pe server, salvarea unui post pe blog, etc - toate

sunt requesturi de tip POST.

4.9.2. Masivul superglobal SERVER

$ _SERVER este un masiv care conţine informaţii, cum ar fi

anteturile, adresele şi locaţiile scriptului. Informația în acest masiv este

înscrisă de către serverul web. Nu există nici o garanţie că fiecare server

web va oferi toate aceste informații; serverul poate omite ceva, sau să

ofere altele informații.

Mai jos sunt expuse cîmpurile informaționale prezente de obicei

în masivul $ _SERVER:

PHP_SELF – numele fișierului scriptului curent, relativ

la documentul rădăcină. De exemplu, $_SERVER['PHP_SELF'] pentru

scriptul de pe adresa http://localhost.com/test.php ar fi /test.php;

SERVER_ADDR - adresa IP a serverului pe care se

execută scriptul curent;

~ 93 ~

REQUEST_METHOD - indică metoda prin care a fost

transmisă cererea pentru a accesa pagina, adică GET, HEAD, POST sau

PUT;

QUERY_STRING - șirul de parametri transmiși paginii

prin metoda GET. De exemplu pentru adresa

http://localhost.com/test.php?x=1&y=2, QUERY_STRING va returna

x=1&y=2;

DOCUMENT_ROOT - dosarul rădăcină pentru

documentele, în care script-ul actual este rulat, exact ceea ce este

specificat în fișierul de configurare al serverului;

HTTP_REFERER - adresa paginii de pe care utilizatorul

a venit la pagina curentă. Acest antet este stabilit de către browserul

utilizatorului, și nu de fiecare dată este transmisă.

HTTP_USER_AGENT - acest şir conţine informație

despre browserul utilizatorului care a solicitat pagina. Un exemplu tipic

este: Mozilla/4.5 [en] (X11; U; Linux 2.2.9 i586);

HTTPS - are o valoare nevidă în cazul în care cererea a

fost făcută prin protocolul HTTPS;

REMOTE_ADDR - adresa IP a utilizatorului;

REMOTE_PORT - portul care este utilizat pentru

conectarea la serverul web;

SCRIPT_FILENAME - calea absolută la script-ul, care

este în curs de execuţie;

SERVER_PORT – portul prin care serverul oferă

conexiune utilizatorilor;

REQUEST_URI - adresa URI, care a fost accesată cu

scopul deschiderii paginii curente. De exemplu, "/ index.html".

4.9.3. Masivul superglobal COOKIE

Accesul la variabilele cookie

Valorile majorității variabilelor dispar atunci când scriptul PHP

care le conține își încheie execuția. Spre deosebire de acestea, valorile

variabilelor cookie se pot păstra un timp îndelungat, chiar și după

finisarea execuției scriptului. Pentru ca valorile lor să se poată păstra,

browserul stochează variabilele cookie pe calculatorul utilizatorului.

Majoritatea browserelor au posibilitatea să activeze/dezactiveze

cookie-urile. Trebuie să țineți cont de acest lucru cînd doriți să folosiți

~ 94 ~

cookie, totuși, conform statisticilor, doar aproximativ 1% dintre

utilizatori au opțiunea cookie dezactivată.

PHP pune la dispoziția utilizatorilor funcții pentru transmiterea

cookie-urilor de la server la browser, și modalități de citire a cookie-

urilor.

Pentru a citi cooki-urile puteți utiliza variabila PHP de tip tablou

$_COOKIE sau $_HTTP_COOKIE_VARS, acestea conțin numele și

valoarea fiecărei variabile cookie curentă. Dacă doriți să obțineți acces la

acest tablou, puteți folosi următoarea construcție:

foreach($_COOKIE as $nume => $valoare)

echo "<br /> $nume => $valoare";

$_COOKIE['numeCookie'] este o variabilă super-globală, putînd

fi accesată și în funcții fără a mai specifica "global".

Crearea unei variabile cookie

Un lucru important de reținut este faptul că cookie-urile trebuie

să fie transmise către browser înaintea oricărei alte informații.

Pentru a evita problemele, asigurați-vă că un script PHP care

stabilește o valoare a unei variabile cookie este plasat în partea

superioară a fișierului, fără caractere de tip spațiu alb care sa-l preceadă.

De asemenea, stabiliți valoarea variabilei cookie înainte de a executa o

instrucțiune 'echo' sau o altă instrucțiune PHP care trimite browserului

date de ieșire.

Pentru a crea o variabila cookie, folosiți funcția setcookie(), care

are următoarea sintaxă:

setcookie(numeCookie, valoare, expirare)

Argumentul 'numeCookie' specifică numele variabilei

cookie, iar argumentul 'valoare' specifică valoarea variabilei;

Valoarea variabilei cookie este automat transmisă

"urlencode" și cînd este primită e automat decodată;

Argumentul 'expirare' indică momentul expirării

variabilei cookie; după ora specificată, variabila cookie nu mai este

accesibilă.

În general, este convenabil să se specifice momentul expirării

folosind funcția time(), care returnează intervalul de timp (exprimat în

secunde) scurs de la 1 ianuarie 1970. Puteți adăuga o valoare de tip

decalaj (offset), care specifică intervalul de timp pe durata căruia

variabila cookie trebuie sa fie accesibilă.

~ 95 ~

Folosind această funcție se pot transmite mai multe cookie-uri

succesiv; protocolul HTTP limitează însă la 20, numărul maximal de

cookie-uri ce pot fi trimise aceluiași utilizator.

De exemplu, să luăm în considerare următoarea instrucțiune:

setcookie("curs", "PW", time()+3600);

Această instrucțiune creează o variabilă cookie denumită 'curs',

care are valoarea 'PW'. Variabila cookie va fi disponibilă timp de o oră

(3600 secunde) de la crearea sa.

Dacă preferați, puteți specifica momentul expirării folosind

functia mktime(). Aceasta functie are urmatoarea forma:

mktime(ore, minute, secunde, luna, zi, an)

De exemplu, următoarea instrucțiune creează o variabilă cookie

care expiră la o secundă după miezul nopții primei zile a anului 2013:

setcookie("obiect", "PW", mktime(0, 0, 1, 1, 1, 2013));

Ștergerea unei variabile cookie

Deoarece o variabilă cookie are o dată de expirare, aceasta va fi

ștearsă automat la un oarecare interval de timp după crearea sa. Totuși,

puteți șterge o variabila cookie imediat. Pentru aceasta, fixați momentul

expirării variabilei cookie la un moment de timp din trecut.

De exemplu, pentru a șterge o variabilă cookie denumită 'obiect',

puteți folosi următoarea instrucțiune:

setcookie("obiect", "", time()-3600);

Aceasta instrucțiune stabilește timpul de expirare cu o ora (3600

de secunde) în urmă.

Remarcați că valoarea variabilei cookie este exprimată sub

forma unui șir vid (""); din moment ce variabila cookie nu va mai fi

disponibilă, valoarea sa nu mai are importanță.

Specificarea accesului la o variabila cookie și alte opțiuni Funcția setcookie() poate prelua maximum șase argumente.

Iată formatul complet al funcției setcookie():

setcookie(nume, valoare, expirare, cale, domeniu, secure)

Argumentele 'nume', 'valoare' și 'expirare' au fost descrise în

secțiunea precedentă.

Argumentul 'cale' vă permite să specificați calea URL

asociată variabilei cookie. În mod prestabilit, variabila cookie este

disponibilă pentru scripturile din catalogul care conține scriptul în care a

fost configurată variabila respectivă, precum și pentru scripturile din

sub-cataloagele aferente catalogului respectiv. În particular, scripturilor

~ 96 ~

din cataloagele părinte ale catalogului care conține scriptul nu li se

permite accesul prestabilit la variabila cookie.

Pentru a pune variabila cookie la dispoziția scripturilor dintr-un

anumit catalog și cataloagele sale, specificați o valoare a argumentului

'cale'. De exemplu, pentru a pune variabila cookie la dispoziția întregului

arbore de cataloage, specificați " /" ca valoare a argumentului cale;

pentru a face variabila cookie disponibilă în catalogul "/test" și în sub-

cataloagele sale, specificați "/test/" ca valoare a argumentului 'cale'.

Dacă nu este specificat nici un argument 'domeniu', o

variabilă cookie este disponibilă numai pentru scripturile din domeniul

Web care a creat variabila respectivă. Argumentul 'domeniu' va permite

sa specificați numele de domeniu asociat unei variabile cookie. În

consecință, variabila cookie va fi disponibilă numai pentru siturile Web

din cadrul domeniului specificat. De exemplu, să presupunem că un

script din serverul Web http://www.subdomeniu.domeniu.com creează o

variabila cookie. În mod prestabilit, variabila cookie este disponibilă

numai pentru gazda respectivă. Cu toate acestea, puteți face variabila

cookie disponibilă pe întreg domeniul 'subdomeniu.domeniu.com',

specificînd "subdomeniu.domeniu.com" ca valoare a argumentului

'domeniu';

Argumentul 'secure' este o valoare întreagă, care

specifică dacă variabila cookie trebuie trimisă prin intermediul unei

conexiuni sigure (HTTPS). Specificați valoarea l pentru a împiedica

transmiterea variabilei cookie în cazul în care conexiunea nu este sigură;

pentru a permite transmiterea variabilei cookie prin conexiuni HTTP

obișnuite, specificați valoarea 0.

4.9.4. Masivul superglobal SESSION

Crearea unei sesiuni PHP

Sesiunea reprezintă o modalitate prin care PHP reține informații

de la o pagină la alta.

Odată cu inițializarea unei sesiuni, utilizatorul poate păstra

anumite variabile chiar dacă în continuare vizitează și alte pagini ale

site-ului. În principiu informația se păstrează pînă la închiderea browser-

ului, sau pînă cînd utilizatorul distruge în mod intenționat sesiunea

curentă.

Lucrurile se desfășoară în modul următor: în momentul cînd un

utilizator s-a logat pe site, PHP atribuie acestuia un identificator unic de

~ 97 ~

sesiune : SID. Acest SID este înglobat într-un coockie cu numele

PHPSESSID și trimis apoi către browserul utilizatorului. Dacă

browserul nu suportă cookie-uri sau acestea sunt dezactivate, atunci

acest SID este adăugat la adresa URL. În același timp se creează pe

server un fișier cu numele SID. În continuare dacă utilizatorul dorește să

stocheze anumite informații, acestea vor fi practic scrise în acest fișier

SID de pe server.

Sesiunile au următoarele avantaje:

Pot fi folosite chiar dacă browserul utilizatorului nu

suportă cookie-uri sau dacă acestea sunt dezactivate;

Permit stocarea unui volum mare de informații, spre

deosebire de cookie-uri care sunt limitate în această privință;

Sunt mai sigure în raport cu cookie-urile deoarece

informațiile nu sunt transmise în mod repetat între client și server.

Inițializarea unei sesiuni se face cu funcția :

session_start()

Aceasta trebuie să fie printre primele linii de cod dintr-un script

PHP, deoarece apelul acestei funcții trebuie făcut înaintea trimiterii către

browser a măcar unui cod HTML sau chiar a unui spațiu vid.

Instrucțiunea session_start() nu este necesară dacă în fișierul de

configurare "php.ini", variabila "session.auto_start" are valoarea TRUE.

Pentru a înțelege mai bine modul de lucru cu sesiuni și funcția

session_start(), folosim un exemplu în care avem o pagină principală

"a.php" unde creăm o variabilă cu numele "userName", atribuindu-i

valoarea "Student", pe care o stocăm într-o sesiune PHP, pagina conține

o legătură către o altă pagină "b.php", aceasta din urmă va folosi funcția

session_start() pentru a prelua, prin sesiune, valoarea variabilei

"user_name" din pagina "a.php", astfel putem folosi valoarea acestei

variabile într-un script din pagina "b.php".

Conținutul fișierului "a.php" este următorul:

<?php

session_start();

if(!isset($_SESSION['userName']))

$_SESSION['userName'] = "Student";

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN">

<html>

~ 98 ~

<body>

Aceasta este pagina "a.php"

<?php echo "<br />Variabila de sesiune are valoarea: ".

$_SESSION['userName'];?>

<br />Legatura <a href="b.php">spre pagina b.php</a>

</body>

</html>

Conținutul fișierului "b.php" este următorul:

<?php

session_start();

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN">

<html>

<head>

<title>Pagina b.php</title>

</head>

<body>

Aceasta este pagina b.php

<?php echo "<br />Variabila de sesiune are valoarea: ".

$_SESSION['userName'];?>

</body>

</html>

Observați că atribuirea, respectiv citirea variabilelor se face

folosind variabila super-globală $_SESSION.

Deschizînd prima pagină, "a.php", va fi afișat următorul rezultat:

Aceasta este pagina "a.php"

Variabila de sesiune are valoarea: Student

Legătura spre pagina b.php

Cînd facem click pe link-ul "spre pagina b.php", se va deschide

această pagină, afișînd următorul conținut:

Aceasta este pagina "b.php"

Variabila de sesiune are valoarea: Student

În acest exemplu se observă că pagina "b.php" deține informații

despre variabila de sesiune creată în pagina "a.php".

Manipularea variabilelor sesiunii

~ 99 ~

În anumite momente ar putea fi util să aflăm identificatorul

sesiunii curente. Pentru aceasta folosim funcția session_id(), că în

exemplul următor:

<?php

echo "<br /> Identificatorul sesiunii curente SID este:".

session_id();

//Va afisa un rezultat asemanator cu: "Identificatorul sesiunii

curente SID este:2846240682abf24a09f42664fc03bbf3"

?>

Funcția session_id() acceptă un parametru. Astfel putem seta un

anumit SID pentru sesiunea curentă. În acest caz trebuie să apelăm

funcția session_id() înainte de funcția : session_start(), ca în exemplul

următor:

<?php

session_id('123abc');

session_start();

echo "<br /> Identificatorul sesiunii curente SID = ".

session_id();

//Va afisa rezultatul: "Identificatorul sesiunii curente SID =

123abc" ?>

Deoarece variabilele de sesiune pot fi citite de alți utilizatori

neautorizați, nu este indicat să păstrăm aici informații esențiale cum sunt

parolele.

Pentru a crea un minimum de securitate putem codifica aceste

informații, folosind funcțiile de codare oferite de PHP:

md5(), sha1() sau crypt()

Ștergerea unei sesiuni Pentru a putea șterge o sesiune este necesar să începem scriptul

PHP cu instrucțiunea: session_start(), ca întotdeauna cînd folosim

sesiuni.

Pentru a șterge toate variabilele memorate în matricea

$_SESSION folosim:

unset($_SESSION);

Pentru a șterge doar o variabilă memorată în sesiune folosim:

unset($_SESSION['nume_variabila']);

Datele sesiunii sunt memorate în fișiere temporare de pe server.

Pentru a șterge datele sesiunii de pe server folosiți:

session_destroy()

~ 100 ~

4.10. SGBD MySQL

MySQL (se pronunță mai-es-chiu-el) este un sistem de gestiune

a bazelor de date, foarte rapid și robust.

O bază de date vă permite să stocați, să căutați, să sortați și să vă

regăsiți datele în mod eficient.

Serverul MySQL controlează accesul la date, pentru a garanta că

mai mulți utilizatori pot lucra simultan cu acestea.

Deci, MySQL este un server multi-user (mai mulți utilizatori) și

multi-thread (mai multe fire de execuție).

Utilizează SQL (Structured Query Language), limbajul standard

de interogare a bazelor de date din întreaga lume.

MySQL este disponibil în mod public din 1996, dar istoria

dezvoltării sale începe în 1979.

MySQL este disponibil sub o licență Open Source, dar dacă este

nevoie sunt disponibile și licențe comerciale.

Versiunea actuala a MySQL este 5.0.11.

Pagina oficială pentru MySQL este: http://www.mysql.com

Fig. 4.1. Lucrul cu baza de date MySQL

Pentru gestiunea bazelor de date poate fi utilizată utilita

phpMyAdmin, care în pachetul denwer (denwer.ru) poate fi lansată pe

adresa:

http://localhost/tools/phpmyadmin

pentru calculatorul local.

O bază de date este una din cele mai importante componente ale

unui site dinamic. Ea este alcătuită din tabele care, la rîndul lor, sunt

formate din înregistrări dispuse în cîmpuri.

~ 101 ~

4.10.1. Conectarea la serverul MySQL

Primul pas în lucrul cu bazele de date este conectarea la serverul

MySQL:

$connection =

mysql_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD);

unde

DB_SERVER – adresa serverului MySQL;

DB_USERNAME – numele utilizatorului;

DB_PASSWORD – parola

Dacă conexiunea nu este reușită se afișează mesajul

corespunzător și se întrerupe execuția aplicației:

if (!$connection)

die(“Serverul MySQL nu este accesibil”);

Dacă conexiunea cu serverul a reușit, dar nu poate fi accesată

baza de date DB_NAME se afișează mesajul corespunzător și se

întrerupe execuția aplicației:

if(!mysql_select_db(DB_NAME))

die(”Baza de date nu este accesibila”);

Dacă conectarea la server și selectarea bazei de date au reușit, în

continuare, scriptul poate interacționa cu baza de date prin intermediul

funcțiilor de care dispune PHP.

Observații:

implicit numele utilizatorului este root iar parola este

vidă;

înainte de efectuarea oricărei operații asupra bazei de

date, este necesară realizarea conexiunii la server;

conectarea la server se realizează de fiecare dată cînd

scriptul este executat;

orice comandă executată nu trebuie să se finiseze cu

”;”(punct și virgulă).

4.10.2. Selectarea informației din tabelă

Pentru a executa o comandă MySQL, în particular comanda

SELECT, în PHP se utilizează funcția mysql_query, care primește ca

parametru comanda care urmează a fi executată și returnează o valoare

de tip resource.

~ 102 ~

În cazul executării comenzii SELECT, funcția va returna

pointerul la rezultatul cererii:

<?php

$result = mysql_query("SELECT * FROM table WHERE 1=1")

or die("Invalid query: " . mysql_error());

?>

În $result va fi returnat pointerul la datele primite, care au forma

unei matrici, unde denumirile de cîmpuri reprezintă coloanele iar

înregistrările rîndurile matricii.

Pentru a extrage un rînd din matrice, poate fi utilizată una din

funcțiile: mysql_fetch_array, mysql_fetch_assoc, mysql_fetch_row ,

mysql_fetch_object sintaxa și modul de utilizare al cărora este descris

mai jos (Lista de funcții PHP pentru lucrul cu MySQL).

Informația obținută din tabelă poate fi prelucrată sau afișată în

pagină.

4.10.3. Introducerea informației în tabelă

Pentru a executa comanda INSERT, de asemenea, se utilizează

funcția mysql_query, care primește ca parametru comanda care urmează

a fi executată și returnează TRUE, dacă înregistrarea a fost adăugată și

FALSE în caz contrar.

<?php

$result = mysql_query("INSERT INTO table(cimp1,

cimp2)VALUES(‘valoare cimp 1’, ‘valoare cimp2’)")

or die("Invalid query: " . mysql_error());

?>

Dacă tabela conține o coloană ID de tip AUTO_INCREMENT,

se poate obține valoarea ID pentru ultima înregistrare adăugată cu

ajutorul funcției mysql_insert_id:

<?php

$result = mysql_query("INSERT INTO table(cimp1,

cimp2)VALUES(‘valoare cimp 1’, ‘valoare cimp2’)")

echo ”Ultima inregistrare adaugata are ID=”.

mysql_insert_id();

?>

~ 103 ~

4.10.4. Modificarea informației din tabelă

În cazul comenzii UPDATE, funcția mysql_query, primește ca

parametru comanda care urmează a fi executată și returnează TRUE,

dacă înregistrarea a fost adăugată și FALSE în caz contrar:

<?php

if(mysql_query("UPDATE table SET cimp1=‘valoare cimp 1’,

cimp2 = ‘valoare cimp2 WHERE conditie)"))

echo ”Modificare reusita”;

else

echo ”Eroare”;

?>

Deoarece nu de fiecare dată va fi modificată doar o singură

înregistrare, este posibil de obținut numărul înregistrărilor afectate de

ultima modificare cu ajutorul funcției mysql_affected_rows:

echo ”Au fost modificate rinduri”.mysql_affected_rows();

4.10.5. Ștergerea informației din tabelă

În cazul comenzii DELETE, funcția mysql_query, primește ca

parametru comanda care urmează a fi executată și returnează TRUE,

dacă înregistrarea a fost adăugată și FALSE în caz contrar:

<?php

if(mysql_query("DELETE FROM table WHERE conditie)"))

echo ”Stergere reusita”;

else

echo ”Eroare”;

?>

Deoarece nu de fiecare dată va fi ștearsă doar o singură

înregistrare, este posibil de obținut numărul înregistrărilor afectate de

ultima ștergere cu ajutorul funcției mysql_affected_rows:

echo ”Au fost sterse rinduri”.mysql_affected_rows();

4.10.6. Lista de funcții PHP pentru lucrul cu MySQL

În continuare vor fi descrise funcțiile pe care PHP le utilizează

pentru a lucra cu SGBD MySQL.

mysql_affected_rows($conn)

Returnează numărul de linii afectate în ultima operație PHP-

MySQL (INSERT, UPDATE, REPLACE ori DELETE) sau -1 dacă acel

~ 104 ~

"query" eșuează. "$conn" este opțional și reprezintă conexiunea de lucru

la MySQL.

Specificație: Cînd se folosește REPLACE, aceasta întîi șterge

înregistrările cu aceeași cheie primară și după aia adaugă noile

înregistrări. Funcția "mysql_affected_rows()" va returna numărul de

inregistrări șterse plus cele adăugate.

<?php

$conn = mysql_connect('localhost', 'user', 'pass');

mysql_select_db('baza_date');

mysql_query("DELETE FROM `mytable` WHERE `id` < 10");

echo mysql_affected_rows(); // 10

?>

mysql_client_encoding($conn)

Returnează tipul de codare a formatului de caractere folosit în

conexiunea curentă ($conn).

<?php

$conn = mysql_connect('localhost', 'mysql_user', 'mysql_pass');

$charset = mysql_client_encoding($conn);

echo 'Formatul de caractere curent este: '. $charset; //

Formatul de caractere curent este: latin1

?>

mysql_connect('server_mysql', 'nume_utilizator',

'parola_myswql')

Deschide o conexiune la MySQL. La argumentul

"server_mysql" se poate adăuga și portul de conectare, sintaxa devine

astfel: 'server_mysql:port'.

<?php

$conn = mysql_connect('localhost', 'mysql_user',

'mysql_password');

if (!$conn) { echo 'Conectare nereusita, cauza: '.

mysql_error()); }

else echo 'Conectare reusita';

?>

mysql_close($conn)

Închide conexiunea la MySQL "$conn", dacă nu e precizat

"$conn", va închide conexiunea curentă.

<?php

~ 105 ~

$conn = mysql_connect('localhost', 'mysql_user',

'mysql_password');

if (!$conn) { echo 'Conectare nereusita, cauza: '.

mysql_error()); }

else echo 'Conectare reusita';

mysql_close($conn);

?>

mysql_errno($conn)

Returnează numărul erorii de la ultima funcție MySQL, sau 0

(zero) daca nu e vreo eroare.

<?php

$conn = mysql_connect('localhost', 'user', 'pass');

if (!mysql_select_db("none_tdb", $conn)) { echo

mysql_errno($conn); }

?>

mysql_error($conn)

Returnează mesajul de eroare (șir text) dat de MySQL la ultima

funcție executată, sau un șir gol dacă nu sunt erori.

<?php

$conn = mysql_connect('localhost', 'user', 'pass');

if (!mysql_select_db("none_tdb", $conn))

echo mysql_error($conn);

?>

mysql_query("Comanda_mysql", $conn)

Trimite o interogare SQL scrisă în "Comanda_mysql" la

serverul MySQL. Returnează un identificator în care e stocat răspunsul

de la server, în funcție de comanda SQL trimisă, sau în caz de eșec

(eroare), FALSE.

<?php

$conn = mysql_connect('localhost', 'user', 'pass');

mysql_select_db('baza_date');

$rezult = mysql_query("SELECT * FROM `tabel` WHERE

`id`<8", $conn);

if (!$rezult) echo 'Interogare nevalida '. mysql_error();

?>

mysql_fetch_array(sql_rezult, tip)

~ 106 ~

Returnează un Array ce conține rezultatul dat de MySQL în

urma unei interogări făcute cu "mysql_query()" și transmis în

"sql_rezult". În caz de eșec, FALSE.

Dacă "tip" are valoarea MYSQL_ASSOC, va returna un Array

asociativ în care cheile sunt numele coloanelor din tabelul MySQL (ca și

"mysql_fetch_assoc()"). Dacă "tip" are valoarea MYSQL_NUM se va

obține o matrice secvențială, cu cheile numere consecutive (ca și

"mysql_fetch_row()"). Iar dacă "tip" are valoarea MYSQL_BOTH (care

e implicită, dacă tipul nu e precizat) se va obține un Array cu ambele

tipuri.

<?php

$conn = mysql_connect('localhost', 'user', 'pass');

mysql_select_db('baza_date');

$rezult = mysql_query("SELECT `id`, `nume` FROM `tabel`");

// Cu MYSQL_ASSOC

while ($rows = mysql_fetch_array($rezult, MYSQL_ASSOC)) {

echo '<br />ID: '. $rows['id']. ' - Nume: '. $rows['nume'];

}

// Sau cu MYSQL_NUM

while ($rows = mysql_fetch_array($rezult, MYSQL_NUM)) {

echo '<br />'. $rows[0]. ' - '. $rows[1];

}

?>

mysql_fetch_assoc(sql_rezult)

Returnează un Array asociativ (în care cheile sunt numele

coloanelor din tabelul MySQL) cu rezultatul dat de MySQL în urma

unei interogări făcute cu "mysql_query()" și conținut în "sql_rezult". În

caz de eșec, FALSE.

<?php

$conn = mysql_connect('localhost', 'user', 'pass');

mysql_select_db('baza_date');

$rezult = mysql_query("SELECT `id`, `nume` FROM `tabel`

WERE `id`=1");

while ($rows = mysql_fetch_assoc($rezult) {

echo '<br />ID: '. $rows['id']. ' - Nume: '. $rows['nume'];

}

?>

mysql_fetch_row(sql_rezult)

~ 107 ~

Returnează un Array secvențial (în care cheile sunt numere

consecutive, de la 0) cu rezultatul dat de MySQL în urma unei interogări

făcute cu "mysql_query()" și conținut în "sql_rezult". În caz de eșec,

FALSE.

<?php

$conn = mysql_connect('localhost', 'user', 'pass');

mysql_select_db('baza_date');

$rezult = mysql_query("SELECT `id`, `nume` FROM `tabel`

WERE `id`=1");

while ($rows = mysql_fetch_row($rezult) {

echo '<br />ID: '. $rows[0]. ' - Nume: '. $rows[1];

}

?>

mysql_fetch_object(sql_rezult)

Returnează un obiect cu rezultatul dat de MySQL în urma unei

interogări făcute cu "mysql_query()" și conținut în "sql_rezult".

Proprietățile acestui obiect sunt numele coloanelor. În caz de eșec,

FALSE.

<?php

$conn = mysql_connect('localhost', 'user', 'pass');

mysql_select_db('baza_date');

$rezult = mysql_query("SELECT `id`, `nume` FROM `tabel`");

while ($rows = mysql_fetch_object($rezult) {

echo '<br />ID: '. $rows->id;

echo '<br />Nume: '. $rows->nume;

}

?>

mysql_fetch_fields(sql_rezult)

Obține un obiect cu o listă de informații despre coloanele dintr-o

interogare cu "mysql_query()".

Proprietățile acestui obiect sunt listate în exemplul de mai jos,

împreună cu modul de aplicare.

<?php

$conn = mysql_connect('localhost', 'user', 'pass');

mysql_select_db('baza_date');

$rezult = mysql_query("SELECT `id`, `user` FROM `tabel`");

// Obtine datele coloanelor

$i = 0;

~ 108 ~

while($i<mysql_num_fields($rezult)) {

echo "Informatii despre coloana $i:<br />\n";

$meta = mysql_fetch_field($rezult, $i);

if (!$meta) { echo 'Nu sunt informatii valabile<br />'; }

echo "<pre>

blob: $meta->blob

max_length: $meta->max_length

multiple_key: $meta->multiple_key

name: $meta->name

not_null: $meta->not_null

numeric: $meta->numeric

primary_key: $meta->primary_key

table: $meta->table

type: $meta->type

default: $meta->def

unique_key: $meta->unique_key

unsigned: $meta->unsigned

zerofill: $meta->zerofill

</pre>";

$i++;

}

?>

mysql_field_len(sql_rezult, nr_camp)

Returnează lungimea cîmpului de la "nr_camp", acest parametru

este numărul de ordine al coloanelor dintr-o interogare cu

"mysql_query()" (a cărui răspuns e conținut în "sql_rezult"). Prima

coloana are numărul 0. În caz de eșec, FALSE.

<?php

$conn = mysql_connect('localhost', 'user', 'pass');

mysql_select_db('baza_date');

$rezult = mysql_query("SELECT `id`, `nume` FROM `tabel`");

$length = mysql_field_len($rezult, 0);

echo $length;

?>

mysql_field_name(sql_rezult, nr_camp)

Obține numele cîmpului de la "nr_camp", acest parametru este

numărul de ordine al coloanelor dintr-o interogare cu "mysql_query()" (a

~ 109 ~

cărui răspuns e conținut în "sql_rezult"). Prima coloană are numărul 0.

În caz de eșec, FALSE.

<?php

$conn = mysql_connect('localhost', 'user', 'pass');

mysql_select_db('baza_date');

$rezult = mysql_query("SELECT `id`, `nume` FROM `tabel`");

$nume_c = mysql_field_name($rezult, 0);

echo $nume_c;

?>

mysql_field_type(sql_rezult, nr_camp)

Obține tipul cîmpului de la "nr_camp" ("string", "int", "blob",

sau altele ...), acest parametru este numărul de ordine al coloanelor dintr-

o interogare cu "mysql_query()" (a cărui răspuns e conținut în

"sql_rezult"). Prima coloană are numărul 0.

<?php

$conn = mysql_connect('localhost', 'user', 'pass');

mysql_select_db('baza_date');

$rezult = mysql_query("SELECT `id`, `nume` FROM `tabel`");

$tip_c = mysql_field_type($rezult, 0);

echo $tip_c;

?>

mysql_free_result(sql_rezult)

Eliberează memoria serverului după prelucrarea informațiilor

obținute cu o interogare "mysql_query()" (stocată în "sql_rezult").

<?php

$conn = mysql_connect('localhost', 'user', 'pass');

mysql_select_db('baza_date');

$rezult = mysql_query("SELECT `id`, `nume` FROM `tabel`");

while ($rows = mysql_fetch_array($rezult, MYSQL_ASSOC)) {

echo '<br />ID: '. $rows['id']. ' - Nume: '. $rows['nume'];

}

mysql_free_result($rezult);

?>

mysql_get_client_info()

Returnează un șir cu date despre versiunea MySQL activă pe

server. Nu necesită conectare la MySQL.

<?php

echo mysql_get_client_info();

~ 110 ~

?>

mysql_get_host_info($conn)

Dă informații despre gazda serverului MySQL din conexiunea

$conn.

<?php

$conn = mysql_connect('localhost', 'user', 'pass');

echo mysql_get_host_info($conn);

?>

mysql_insert_id($conn)

Obține ultimul ID generat de o coloana "AUTO_INCREMENT"

în ultima interogare, de obicei INSERT. Returnează 0 dacă nu a fost

generat automat vreun ID, sau FALSE în caz de eșec.

<?php

$conn = mysql_connect('localhost', 'user', 'pass');

mysql_select_db('baza_date');

$sql = mysql_query("INSERT INTO `tabel` ( `col1` , `col2` )

VALUES ('val1', 'val2')");

echo mysql_insert_id($conn);

?>

mysql_num_fields(sql_rezult)

Returnează numărul de coloane din rezultatul unei interogări

"mysql_query()" (stocata în "sql_rezult"). În caz de eșec, FALSE.

<?php

$conn = mysql_connect('localhost', 'user', 'pass');

mysql_select_db('baza_date');

$rezult = mysql_query("SELECT * FROM `tabel`");

echo mysql_num_fields($rezult);

?>

mysql_num_rows(sql_rezult)

Returnează numărul de rînduri din rezultatul unei interogări

"mysql_query()" (SELECT ori SHOW, stocată în "sql_rezult"). În caz

de eșec, FALSE.

<?php

$conn = mysql_connect('localhost', 'user', 'pass');

mysql_select_db('baza_date');

$rezult = mysql_query("SELECT * FROM `tabel`");

echo mysql_num_rows($rezult);

?>

~ 111 ~

mysql_real_escape_string(sir, $conn)

Filtrează șirul din parametru "sir" și adaugă slash-uri (\) la

caracterele tip: \x00, \n, \r, \, ', " și \x1a pentru ca datele sa fie adăugate

în siguranță în MySQL. Returnează șir-ul filtrat sau FALSE în caz de

eroare.

Funcția trebuie apelată după ce s-a stabilit o conexiune la

MySQL, ce poate fi specificată la "$conn" (e opțional).

Daca "get_magic_quotes_gpc()" e activat, trebuie mai întîi

aplicată șirului din "sir" funcția "stripslashes()", ca să nu adauge de două

ori caracterele slash "\" de filtrare.

<?php

$sir = 'Sir pt. a fi adaugat in "Tabel Mysql".';

$conn = mysql_connect('localhost', 'user', 'pass');

mysql_select_db('baza_date');

if(get_magic_quotes_gpc()) $sir = stripslashes($sir);

$sir = mysql_real_escape_string($sir, $conn);

echo $sir; // Sir pt. a fi adaugat in \"Tabel Mysql\".

?>

mysql_select_db('nume_bd', $conn)

Selectează baza de date (specificată la "nume_bd") din MySQL

în care se va lucra. În caz de succes returnează TRUE, altfel FALSE.

<?php

$conn = mysql_connect('localhost', 'user', 'pass');

if(mysql_select_db('baza_date')) echo 'Baza de date a fost

selectata';

else 'Selectare nereusita a bazei de date '. mysql_error();

?>

mysql_set_charset('charset', $con)

Setează formatul de codare (specificat la "charset") a

caracterelor pentru conexiunea curentă "$conn". Returnează TRUE în

caz de succes, altfel, FALSE.

<?php

$conn = mysql_connect('localhost', 'user', 'pass');

mysql_select_db('baza_date');

mysql_set_charset('utf8', $conn);

?>

mysql_stat($conn)

~ 112 ~

Returnează un șir cu date despre starea curentă a conexiunii la

MySQL. Date precum: uptime, threads, queries, open tables, flush tables

și queries per second.

<?php

$conn = mysql_connect('localhost', 'mysql_user', 'mysql_pass');

$status = explode(' ', mysql_stat($conn));

print_r($status);

?>

4.11. Lucrul cu fișierele

Folosind PHP se pot executa anumite operații asupra fișierelor

aflate pe server cum ar fi:

fopen() - deschide fișierul indicat

fclose() - închide fișierul

fread() – citește conținutul fișierului

fwrite() - scrie în fișier

filesize() - indică dimensiunea fișierului

Deschiderea fișierelor

Sintaxa funcției fopen() este:

fopen(param1, param2)

param1 – fișierul, calea către fișier sau adresa fișierului care va

fi deschis;

param2 - modul în care va fi deschis fișierul, și poate avea

valorile:

r – fișier deschis doar pentru citire

r+ - fișier deschis doar pentru citire si scriere

w - fișier deschis doar pentru scriere

w+ - fișier deschis pentru citire și scriere iar dacă nu

există fișierul îl creează

a - fișier deschis pentru adăugare la sfârșit

a+ - fișier deschis adăugare la sfârșit iar dacă nu există

fișierul îl creează

t - fișier deschis în mod text

b - fișier deschis în mod binar sau combinații ale

acestora.

Citirea fișierelor

~ 113 ~

Sintaxa funcției fread() este:

$filename="test.txt";

$handle=fopen($filename, "r");

$contents=fread($handle, filesize($filename));

variabila $handle va fi folosită ulterior și în alte funcții.

Scrierea in fișiere

Sintaxa funcției fwrite() este:

fwrite($handle, "continut ce va fi scris in fișier");

Verificarea drepturilor de acces asupra fișierului se face cu

ajutorul:

is_writable($filename);

returnează TRUE dacă se poate și FALSE dacă nu se poate scrie

în fișier.

Închiderea fișierului

Sintaxa funcției fclose() este:

fclose($handle);

De asemenea pentru citirea și înscrierea în fișiere pot fi utilizate

funcțiile file_get_contents și file_put_contents, file.

file_get_contents – citește conținutul unui fișier și returnează un

șir de caractere. Utilizarea file_get_contents este recomandată pentru a

obține conținutul întregului fișier, deoarece pentru îmbunătățirea

performanței, funcția utilizează algoritmul ”memory mapping”. Funcția

poate accesa fișiere de pe domenii străine. Sintaxa funcției este

următoarea:

string file_get_contents ( string filename [, bool

use_include_path [, resource context [, int offset [, int maxlen]]]] )

Primul parametru, numele fișierului, este parametrul obligatoriu,

ceilalți parametri fiind opționali și pot să nu fie indicați.

file_put_contents – înscrie un șir de caractere sau un masiv

unidimensional într-un fișier și returnează numărul de octeți (bytes)

înscriși în fișier. Funcția poate accesa fișiere de pe domenii străine.

Sintaxa funcției este următoarea:

int file_put_contents ( string filename, mixed data [, int flags [,

resource context]] )

~ 114 ~

Primii 2 parametri, numele fișierului și informația care urmează

a fi înscrisă, sunt parametri obligatorii, ceilalți parametri fiind opționali

și pot să nu fie indicați.

file – citește informația dintr-un fișier și o înscrie într-un masiv.

Fiecare linie a fișierului va fi înscris într-un element separat al

masivului. Se recomandă de utilizat cînd este necesară prelucrarea pe

linii a fișierului.

Observație: Spre deosebire de fread și fwrite, funcțiile

file_get_contents și file_put_contents, file, deschid automat fișierul

înainte de a citi sau înscrie și îl închid imediat după utilizare.

Funcții utile pentru prelucrarea fișierelor

basename - returnează numele fișierului din calea specificată;

chmod – modifică drepturile de acces la fișier;

chown - modifică posesorul fișierului;

clearstatcache - golește memoria cache pentru fișiere;

copy – copie fișierul dintr-o locație în alta

dirname - întoarce numele directorului de cale;

feof – verifică dacă s-a ajuns la sfîrșit de fișier;

fgetc - citește un caracter dintr-un fișier;

fgets – citește o linie din fișier;

file_exists – verifică existența unui fișier sau dosar;

fileatime – timpul ultimei accesări a fișierului;

filemtime - timpul ultimei modificări a fișierului;

fileowner – returnează ID-ul posesorului fișierului;

filesize - dimensiunea fișierului;

filetype - tipul fișierului;

fseek – indică deplasamentul cursorului în fișier;

s_dir - determină dacă fișierul este un dosar;

is_executable - stabilește dacă fișierul este executabil;

is_file - stabilește dacă fișierul este un fișier simplu;

is_readable - stabilește dacă fișierul poate fi citit;

is_uploaded_file - stabilește dacă fișierul a fost încărcat prin

HTTP POST;

is_writable sau is_writeable - stabilește dacă fișierul este

disponibil pentru înscriere;

mkdir – creează un dosar;

move_uploaded_file - mută fișierul încărcat prin HTTP POST

într-o locație nouă;

~ 115 ~

rename- redenumește un fișier sau director;

rmdir - șterge un director;

unlink - șterge un fișier.

Observație: descrierea detaliată a funcțiilor cu exemplificări

poate fi găsită pe adresa:

http://www.php.su/functions/?cat=filesystem

4.12. Încărcarea fișierelor pe server

Încărcarea unui fișier pe server se face prin intermediul

formularelor. Pentru această facilitate se folosește un formular puțin

diferit: are un atribut special (enctype) și metoda POST. De asemenea,

trebuie să conțină un element input de tip file pentru fiecare fișier

încărcat (spre exemplu, dacă se încarcă 2 fișiere, va fi nevoie de 2

elemente input).

Pentru ca funcționalitatea de upload să funcționeze, trebuie

îndeplinite următoarele condiții:

directiva file_uploads din fișierul de configurări al PHP

(php.ini) trebuie sa fie 'on';

directiva upload_tmp_dir din php.ini trebuie să se refere

la o cale existentă pe server și cu permisiuni suficiente pentru ca web-

serverul să poată crea fișiere;

directivele upload_max_filesize și post_max_size din

php.ini specifică mărimea maximă a fișierului și respectiv a datelor ce

pot fi transmise prin intermediul formularului; este recomandat ca aceste

valori sa fie revizuite;

atributul enctype="multipart/form-data" nu trebuie

omis, altfel uploadul nu va funcționa;

Observație: de obicei, interpretorul PHP este configurat deja

pentru upload de fișiere, deci primele 3 condiții de mai sus sunt aproape

întotdeauna îndeplinite fără a fi nevoie de alte configurări.

În continuare este expus un exemplu de formular pentru upload

de fișiere:

<form enctype="multipart/form-data" action="upload.php"

method="POST">

Încarcă un fisier: <input name="fisier" type="file" />

<input type="submit" value="Trimite fisier" />

</form>

Mecanismului de upload este următorul:

~ 116 ~

atunci cînd se face submit la formular, browser-ul web

transmite către server conținutul fișierului;

serverul web copiază fișierul transmis într-o locație

temporară (specificată de directiva upload_tmp_dir);

interpretorul PHP este invocat, avînd variabila $_FILES

setată cu informații despre upload;

programatorul este responsabil cu prelucrarea fișierului

încărcat pe server (mutare într-o alta locație, citire, copiere, etc).

Prelucrarea ce se face cu ajutorul funcțiilor puse la dispoziție de PHP.

Dacă fișierul încărcat nu este mutat (sau redenumit) din locația

temporară, acesta va fi șters automat la terminarea execuției scriptului.

Fișierul PHP (upload.php) ce va prelucra uploadul conține

următoarea secvență de cod:

<?php

if($_FILES["fisier "]["size"] > 2*1024*1024)

{

echo ("Dimensiunea fișierului depășește 2MB");

exit;

}

// Verificăm dacă fișierul a fost încărcat

if(is_uploaded_file($_FILES["fisier "]["tmp_name"]))

{

// daca fișierul a fost încărcat îl mutăm

// din dosarul temporar într-un dosar permanent

move_uploaded_file($_FILES["fisier "]["tmp_name"],

"/dosar/".$_FILES["fisier "]["name"]);

} else {

echo("Eroare de încărcare a fișierului");

}

?>

4.13. Prelucrarea fișierelor grafice. Biblioteca GD

PHP poate fi utilizat la crearea și manipularea fișierelor de tip

imagine cunoscînd o varietate de formate: jpg, png, gif, wbmp și xpm.

Pentru aceasta este nevoie de biblioteca GD disponibilă la adresa:

http://www.boutell.com/gd/

~ 117 ~

În unele versiuni de PHP biblioteca GD este integrată (de

exemplul în pachetul denwer). De asemenea formatul în care este

exportată imaginea depinde de versiunea bibliotecii GD instalate.

Observație: Verificați folosind phpinfo(), dacă serverul de

găzduire suportă aceste funcții, înainte de a le utiliza.

Lista de funcții disponibile în biblioteca GD o puteți găsi la

adresa: http://php.net/manual/ro/ref.image.php

4.13.1. Crearea dinamica a imaginilor

Exista două moduri în care se poate realiza crearea dinamică a

imaginilor în PHP:

1. imagini pe o anumită paletă de culori - se folosește funcția

imagecreate( int $width , int $height ) care creează o imagine goală de

anumite dimensiuni specificate prin cei doi parametri $width, $height și

returnează o variabilă de tipul resource care reprezintă identificatorul de

acces al imaginii create. În acest caz se pot folosi 256 de culori.

2. imagini cu un număr neprecizat de culori (true color) - se

folosește funcția imagecreatetruecolor( int $width , int $height ) care

creează o imagine care are fundal negru și dimensiunea specificată de

cei doi parametri $width, $height și returnează o variabilă de tipul

resource care reprezintă identificatorul de acces al imaginii create.

Pentru a însera în paginile web o imagine creată dinamic cu GD

PHP, se utilizează următorul cod:

<img src="imagine.php" alt="Imagine creata cu GD Library">

În următorul exemplu vom genera o imagine în format JPEG, cu

dimensiunile 200px x 100px, fond verde.

header ("Content-type: image/jpeg");

$img = ImageCreate (200,100);

$fond = ImageColorAllocate($img,0,200,0);

ImageJPEG ($img, '', 100);

header - declară tipul imaginii;

Content-type poate avea valorile:

- image/jpeg - pentru JPEG

- image/gif - pentru GIF

- image/png - pentru PNG

Cu ImageCreate sunt declarate dimensiunile imaginii.

Culoarea fondului imaginii este data în ImageColorAllocate, prin cele 3

culori de bază R-G-B, în format zecimal (0-255).

~ 118 ~

ImageJPEG – afișează imaginea în browser (pentru GIF se

folosește ImageGIF, iar pentru PNG ImagePNG). Calitatea imaginii

generate va fi "best quality" (100).

Adăugam exemplului anterior text alb - "Proba text".

header ("Content-type: image/jpeg");

$img = ImageCreate (200,100);

fond = ImageColorAllocate ($img,0,200,0);

$text = ImageColorAllocate

($img,255,255,255);

ImageString ($img,5,10,10,"Proba text",$text);

ImageJPEG ($img, '', 100);

Culoarea fontului este declarată tot cu ImageColorAllocate,

similar culorii fondului. ImageString conține 3 valori numerice și textul

conținut de imagine. Prima este mărimea fontului, următoarele 2 sunt

distanțele în pixeli (coordonatele pe X și pe Y) față de colțul stînga sus,

stabilind poziția textului în interiorul imaginii.

Creăm o linie din punctul (10,90) în punctul (190,90). Referința

coordonatelor este colțul stînga sus.

header ("Content-type: image/jpeg");

$img = ImageCreate (200,100);

$fond = ImageColorAllocate ($img,0,200,0);

$col = ImageColorAllocate($img,255,255,255);

ImageLine ($img,10,90,190,90,$col);

ImageJPEG ($img, '', 100);

Cu ImageLine creăm linia. Cele 4 valori numerice conținute

reprezintă coordonatele x și y pentru punctul de început și de sfîrșit al

liniei, iar ultima este declarată culoarea.

În continuareva fi desenat un triunghi.

header ("Content-type: image/jpeg");

$img = ImageCreate (200,100);

$fond = ImageColorAllocate ($img,0,200,0);

$col = ImageColorAllocate($img,255,255,255);

ImageLine ($img,10,90,190,90,$col);

ImageLine ($img,10,90,100,10,$col);

ImageLine ($img,100,10,190,90,$col);

ImageJPEG ($img, '', 100);

Creăm o elipsă în centrul imaginii (100,50), avînd lățimea 180 și

înălțimea 80.

~ 119 ~

header ("Content-type: image/jpeg");

$img = ImageCreate (200,100);

$fond = ImageColorAllocate ($img,0,200,0);

$col = ImageColorAllocate

($img,255,255,255);

ImageEllipse ($img,100,50,180,80,$col);

ImageJPEG ($img, '', 100);

Creăm un trapez.

header ("Content-type: image/jpeg");

$img = ImageCreate (200,100);

$fond = ImageColorAllocate ($img,0,200,0);

$col = ImageColorAllocate ($img,255,255,255);

ImagePolygon

($img,array(60,10,140,10,190,90,10,90),4,$col);

ImageJPEG ($img, '', 100);

ImagePolygon conține o matrice, care indică coordonatele

pentru fiecare colț în parte, și numărul de colțuri.

Vom genera o imagine care va avea ca fundal un fișier JPG

(fond.jpg), peste care aplicăm textul "Text proba", de culoarea neagră

(0,0,0), folosind fontul "verdana.ttf", mărimea 18. Textul va fi amplasat,

față de colțul stînga sus, la 30px pe orizontală și 40px pe verticală, și va

avea o înclinare de 10 grade. Calitatea imaginii generate va fi "best

quality" (100).

header("Content-Type: image/jpeg");

$im = ImageCreateFromJpeg("fond.jpg");

$text="Text proba";

$black = ImageColorAllocate($im, 0, 0, 0);

$start_x = 30;

$start_y = 60;

Imagettftext($im, 18, 10, $start_x, $start_y,

$black, 'verdana.ttf', $text);

Imagejpeg($im, '', 100);

ImageDestroy($im);

4.13.2. Redimensionarea imaginilor

Redimensionarea imaginilor folosind PHP și GD este foarte utilă

din două motive:

~ 120 ~

1. dimensiunea imaginilor este chiar dimensiunea

așteptată, adică imaginile nu trebuie redimensionate forțat de către

browser și la calitatea la care browserul poate să o facă;

2. imaginea ocupă mai puțin spațiu pe disk și implicit la

transfer, rezultînd în pagini mai rapide.

De obicei redimensionarea se face în două moduri,

redimensionare și afișare pe ecran sau redimensionare și salvare pe disk.

Metoda de a redimensiona și afișa pe ecran nu este foarte

populară și există motive pentru aceasta.

Redimensionarea se face în 4 pași:

1. încărcarea imaginii de redimensionat;

2. calcularea dimensiunii finale;

3. redimensionarea propriu zisă;

4. afișarea/salvarea pe disk a imaginii.

Încărcarea imaginii de redimensionat: // locatia unde se afla imaginea

$url = 'picture.jpg';

// extragem informatile legate de imagine

$img_info = getimagesize($url);

// in functie de tipul imaginii se va incarca imaginea

switch($img_info[2]) {

// tipul jpeg

case IMAGETYPE_JPEG:

$imagine = imagecreatefromjpeg($url);

break;

// tipul gif

case IMAGETYPE_GIF:

$imagine = imagecreatefromgif($url);

break;

// tipul png

case IMAGETYPE_PNG:

$imagine = imagecreatefrompng($url);

break;

// tipul bmp

case IMAGETYPE_BMP:

$imagine = imagecreatefromwbmp($url);

break;

}

~ 121 ~

Practic, în codul de mai sus se vor extrage informațiile despre

imagine apoi se va încărca imaginea în memorie.

În funcție de tipul imaginii aceasta se va încărca în memorie

folosind funcția corespunzătoare, în cazul de mai sus va fi

imagecreatefromjpeg();

Calcularea dimensiunii finale: Calculul dimensiunii finale se rezumă de cele mai multe ori la

geometrie. Mai jos voi prezenta calculul cînd imaginea este

redimensionată în funcție de latura maximă:

// latura maxima a imaginii finale

$max = 200;

// latimea

$x = $img_info[0];

// inaltimea

$y = $img_info[1];

// aflarea laturei cu dimensiunea maxima

$latMax = max($x, $y);

if($latMax == $x) { // cazul cand latimea este maxima

// se calculeaza proportional inaltimea si se rotunjeste

$y2 = round($y*$max/$x);

// latimea va fi latura maxima

$x2 = $max;

} elseif($latMax == $y) { // cazul cand inaltimea este maxima

// se calculeaza proportional latimea si se rotunjeste

$x2 = round($x*$max/$y);

// inaltimea va fi latura maxima

$y2 = $max;

}

Acum în $x și $y sunt dimensiunile originale ale imaginii, iar în

$x2 și $y2 dimensiunile pentru imaginea redimensionată.

Redimensionarea propriuzisă: // construim imaginea care va rezulta

$img_finala = imagecreatetruecolor($x2, $y2);

// redimensionam imaginea

imagecopyresampled($img_finala, $imagine, 0, 0, 0, 0, $x2,

$y2, $x, $y);

// dezalocam imaginea initiala

imagedestroy($imagine);

~ 122 ~

Afișarea/salvarea pe disk a imaginii

În cazul în care se dorește salvarea imaginii pe disk:

// locatia unde va fi salvata

$destinatie = 'new-picture.jpg';

// salvarea imaginii pe disk la noua destinatie

imagejpeg($img_finala, $destinatie);

În cazul în care se dorește doar afișarea pe ecran a imaginii:

// se afisaza headerul corespunzator pentru tipul imaginii

header('Content-Type: image/jpeg');

// se afisaza continutul imaginii in browser

imagejpeg($img_finala);

În funcție de tipul imaginii salvate se pot folosi și alte funcții sau

headere.

Observație: Trebuie sa aveți drepturi de scriere în dosarul unde

salvați imaginea.

4.14. Lucrul cu data și timpul în PHP

Pentru lucrul cu data și timpul în PHP se utilizează funcția date

care are următoarea sintaxă:

string date ( string $format [, int $timestamp = time() ] )

Întoarce un string formatat în conformitate cu string-ul de

formatare dat, utilizând timestamp-ul întreg dat, sau data și ora curentă

dacă nu este furnizat nici un timestamp. Cu alte cuvinte, timestamp este

opțional și implicit are valoarea întoarsă de time().

În tabelul 4.1sunt descrise caractrele care pot fi utilizate pentru

generarea informației de tip datetime cu ajutorul funcției date.

Tabelul 4.1. Caractere utilizate în formatarea datei și timpului.

Caracter Descriere Exemple de valori

întoarse

Ziua --- ---

d Ziua lunii, 2 cifre cu zero la început De la 01 până la 31

D Reprezentarea textuală a zilei în

limba engleză, trei litere De la Mon până laSun

j Ziua lunii fără zero la început De la 1 până la 31

l (litera Reprezentarea textuală deplină a zilei De la Sunday până la

~ 123 ~

Caracter Descriere Exemple de valori

întoarse

minusculă

'L')

săptămânii în limba engleză Saturday

N

Reprezentarea numerică a zilei

săptămânii conform standardului

ISO-8601 (adăugat în PHP 5.1.0)

De la 1 (pentru Luni)

până la 7(pentru

Duminică)

S Sufixul ordinal al zilei din lună în

limba engleză, 2 caractere

st, nd, rd sau th.

Funcționează bine cu j

w Reprezentarea numerică a zilei

săptămânii

De la 0 (pentru

Duminică) până la6

(pentru Sâmbătă)

z Ziua anului (începând de la 0) De la 0 până la 365

Săptămâna --- ---

W

Numărul săptămânii în an conform

standardului ISO-8601, săptămânile

încep Luni (adăugat în PHP 4.1.0)

Exemplu: 42 (a 42-a

săptămână a anului)

Luna --- ---

F Reprezentarea textuală deplină a lunii

în limba engleză

De la January până la

December

m Reprezentarea numerică a lunii, cu

zero la început De la 01 până la 12

M Reprezentarea textuală prescurtată a

lunii în limba engleză, trei litere De la Jan până laDec

n Reprezentarea numerică a lunii, fără

zero la început De la 1 până la 12

t Numărul de zile în luna dată De la 28 până la 31

Anul --- ---

L Indică dacă anul este bisect

1 dacă anul este

bisect, 0 în caz

contrar.

Y Reprezentarea numerică deplină a

anului, 4 cifre

Exemple: 1999

sau2003

~ 124 ~

Caracter Descriere Exemple de valori

întoarse

y Reprezentarea din două cifre a anului Exemple: 99 sau 03

Ora --- ---

a Ante meridiem sau Post meridiem cu

litere minuscule am sau pm

A Ante meridiem sau Post meridiem cu

litere majuscule AM sau PM

B Ora Swatch Internet De la 000 până la999

g Reprezentarea orei în format de 12

ore, fără zero la început De la 1 până la 12

G Reprezentarea orei în format de 24

ore, fără zero la început De la 0 până la 23

h Reprezentarea orei în format de 12

ore, cu zero la început De la 01 până la 12

H Reprezentarea orei în format de 24

ore, cu zero la început De la 00 până la 23

i Minutele cu zero la început De la 00 până la 59

s Secundele cu zero la început De la 00 până la 59

u Microsecundele (adăugat în PHP

5.2.2) Exemplu: 654321

Fusul orar --- ---

e Identificatorul fusului orar (adăugat

în PHP 5.1.0)

Exemple:

UTC,GMT,Atlantic/Az

ores

I (litera

majusculă i)

Determină dacă este activ timpul de

vară

1 dacă este activ

timpul de vară, 0 în

caz contrar.

O Diferența față de ora Greenwich

(GMT) în ore Exemplu: +0200

P

Diferența față de ora Greenwich

(GMT) cu două puncte între ore și

minute (adăugat în PHP 5.1.3)

Exemplu: +02:00

~ 125 ~

Caracter Descriere Exemple de valori

întoarse

T Abreviatura fusului orar Exemple: EST, MDT...

Z Deplasamentul în secunde a fusului

orar.

De la -43200 până la

50400

Data/Ora

deplină --- ---

c Data în reprezentare ISO 8601

(adăugată în PHP 5)

2004-02-

12T15:19:21+00:00

r Data formatată conform » RFC 2822 Exemplu: Thu, 21 Dec

2000 16:01:07 +0200

U Secunde de la Epoca Unix (1 Ianuarie

1970 00:00:00 GMT)

Observație: Caracterele nerecunoscute din string-ul de

formatare vor fi afișate așa cum sunt.

Funcția mktime() - Obține timestamp-ul Unix pentru o dată și

oră indicate ca parametri:

int mktime (

[ int $hour = date("H") [, int $minute = date("i")

[, int $second = date("s") [, int $month = date("n")

[, int $day = date("j") [,int $year = date("Y") [, int $is_dst = -1

]]]]]]] )

Întoarce timestamp-ul Unix ce corespunde argumentelor

furnizate. Acest timestamp este un longint conținând numărul de

secunde între Epoca Unix (1 Ianuarie 1970 00:00:00 GMT) și timpul

specificat.

Argumentele pot fi omise unul după altul de la dreapta spre

stînga; orice argument omis va fi stabilit la valoarea curentă în

corespundere cu data și ora locală.

De asemenea, pentru lucrul cu data și timpul în PHP sunt

disponibile următoarele funcții:

gmdate() - Formatează o dată/oră GMT/UTC;

idate() - Format a local time/date as integer;

getdate() - Obține informația despre dată/oră;

time() - Întoarce timpul curent Unix;

~ 126 ~

strtotime() - Translează aproape orice descriere textuală

în limba engleză a datei și orei într-un timestamp Unix;

4.15. Funcția mail

Pentru expedierea mesajelor de e-mail, în PHP este utilizată

funcția mail care are următoarea sintaxă:

bool mail ( string $to , string $subject , string $message [, string

$additional_headers [, string $additional_parameters ]] )

unde:

to - destinatarul sau destinatarii mesajului, formatul căruia

trebuie să respecte standardul RFC 2822.

Unele exemple:

[email protected]

[email protected], [email protected]

User <[email protected]>

User <[email protected]>, Another User

[email protected]

subject - subiectul mesajului care va fi trimis.

Message - mesajul spre a fi trimis. Fiecare rând trebuie să fie

încheiat cu LF (\n). Lungimea rândurilor nu trebuie să depășească 70 de

caractere.

additional_headers (opțional) - un string spre a fi înserat la

sfârșitul antetelor mesajului. Acesta este utilizat de obicei pentru a

adăuga antete suplimentare (From, Cc, și Bcc). Antetele suplimentare

multiple trebuie separate cu CRLF (\r\n).

Funcția mail întoarce TRUE dacă mesajul a fost acceptat cu

succes pentru trimitere, FALSE în caz contrar.

Exemplu:

mail('[email protected]', 'Acesta e subiectul', ‘Textul mesajului’);

Observație: Este important să știți că cu toate că mesajul a fost

acceptat spre trimitere, aceasta NU înseamnă că mesajul într-adevăr va

ajunge la destinație.

4.16. Securitatea scripturilor PHP

Regula numărul unu a securității online este: nu va încredeți

niciodată în utilizator.

~ 127 ~

Întotdeauna verificați datele trimise către server și "curățați-le"

înainte de a le utiliza. Pentru aceasta trebuie să luați în considerare cîteva

posibile "găuri":

4.16.1. Variabile globale

Avînd variabilele globale ON, puteți accesa datele trimise prin

formulare mai simplu: $variabila în loc de $_GET['variabila'], la fel și

pentru POST sau FILES. Dacă scriptul nu este foarte bine gîndit,

variabilele globale pot prezenta un risc major de securitate. Din acest

motiv, php.ini este distribuit cu globals=Off în ultimele versiuni.

Ca să fiți siguri că variabilele globale sunt OFF, deschideți

fișierul de configurare php.ini, căutați linia register_globals și în cazul

în care este setată On, setați-o register_globals = Off.

Salvați și reporniți serverul apache.

4.16.2. Ghilimele magice și SQL injection

Pentru a înțelege materialul de mai jos este nevoie de a cunoaște

cel puțin bazele limbajului de interogare SQL și realizarea lucrului cu

bazele de date în PHP. Să presupunem ca avem o bază de date ce conține

tabelul users cu următoarea structură:

id – int(10)

user – varchar(32)

parola – varchar (32)

Presupunem că avem un script de autorizare, care verifică dacă

în tabelă există perechea user – parola introdusă de utilizator.

Mai jos este expus un exemplu de atac, care permite autorizarea

fără a cunoaşte parola (se utilizează SQL injection):

$result = mysql_db_query ($ db, "SELECT * FROM $table

WHERE user = '$login' AND parola = '$ pass ' ");

$num_rows= mysql_num_rows ($ rezultat);

if ($ num_rows! = 0) {

//Autentificare Ok

}else{

/ / Eroare de autentificare

}

De exemplu în forma de logare am introdus datele :

$user=’utilizator’

$parola=’parola’

~ 128 ~

Interogarea va arăta astfel:

SELECT * FROM login_admin WHERE user=’utilizator’ AND

parola = 'parola'

Aceasta înseamnă ceva de genul: returnează toate înregistrările

de la utilizatori în baza de date care au login "utilizator", şi parola

"parola". Dacă există astfel de înregistrări, atunci se consideră că

utilizatorul este autorizat, în mod contrar autorizarea a suferit eşec.

Însă, datele pot fi transmise în aşa mod încît să formăm o

construcţie de tipul:

SELECT * FROM login_admin

WHERE user='user' AND password='31337' OR ’1’=’1’

Această interogare de fiecare dată va întoarce un rezultat pozitiv,

deoarece, 1=1 în orice caz, ceea ce face ca condiţia să fie de fiecare dată

adevărată.

Adică, în cazul în care în caseta pentru parolă am introdus

parola‘ OR 1 =‘1 autorizarea va avea loc de fiecare dată, deoarece vom avea

condiția

WHERE user='user' AND password='31337' OR ’1’=’1’

De asemenea mai sunt posibile următoarele opţiuni pentru

parolă:

OR 1=1--

" OR 1=--

OR 1=1--

' OR 'a'='a

" OR "a"="a

') OR ('a'='a

OR '1'='1'

Pentru înlăturarea acestui neajuns poate fi folosită următoarea

funcţie:

function quote_smart($value)

{

// daca magic_quotes_gpc este setata true - utilizam

stripslashes

if (get_magic_quotes_gpc()) {

$value = stripslashes($value);

}

// daca variabila este numar, nu este nevoie sa fie ecranata

~ 129 ~

// in caz contrar, o ecranam cu '

if (!is_numeric($value)) {

$value = "'" . mysql_real_escape_string($value) . "'";

}

return $value;

}

4.16.3. Criptarea parolelor

Parolele care sunt salvate în baza de date este recomandat să le

țineți criptate, astfel dacă cineva încearcă să citească parolele le va vedea

criptate.

$SQL = "INSERT INTO àdmin` (ùser` , `parola`)

VALUES ('admin', '".md5($_POST['parola'])."')";

Criptarea folosind md5, teoretic, nu este reversibilă (și astfel

nici dvs., nici altcineva nu o va putea afla chiar daca are acces la baza de

date), fiind păstrată ca o consecutivitate de 32 de caractere, indiferent de

ce parolă ați selectat, de aceea cîmpul pentru parolă trebuie să poată

păstra 32 de caractere.

4.16.4. Fișierul .htaccess

Pentru a bloca accesul la un anumit dosar (sau chiar la tot site-

ul), puteți crea un fișier numit .htaccess (cu punct înainte), în care să

introduceți ip-ul care doriți să îl blocați (sau care să aibă acces)

Order Deny,Allow

Deny from all #interzis la toți

Allow from all #acces la toti

Dacă de exemplu trebuie să fie blocată IP adresa 192.168.1.1 se

va scrie:

Deny from 192.168.1.1

Atenție, să nu va blocați singuri ip-ul la site, că altfel trebuie să

luați legătura cu administratorul serverului să șteargă fișierul ca să puteți

intra din nou pe site. În cazul în care după ce ați pus fișierul pe server nu

îl vedeți, el este acolo dar serverul setează acest nume de fișier ca hiden.

~ 130 ~

Însărcinări

1. Care este principala diferență dintre PHP și JavaScript?

2. Cum se marchează începutul și sfîrșitul unui bloc de cod

PHP? De expus ambele modalități posibile.

3. Care este sintaxa pentru declararea unei variabile în

PHP? Ce tipuri de date există în PHP?

4. Care este sintaxa pentru declararea unei constante?

5. Care este sintaxa pentru definirea unei funcții cu

parametri?

6. Pentru ce este utilizată comanda echo?

7. Expuneți 3 modalități de declarare a unui masiv

unidimensional.

8. Se dă masivul de numere întregi M. este posibil de

înscris în acest masiv un element de tip caracter? Argumentați.

9. Cu ajutorul cărei funcții se calculează numărul de

elemente a unui masiv?

10. Care este efectul utlizării funcției print_r?

11. Scrieți secvența de cod care parcurge toate elementele

masivului și le afișează.

12. Se dă următorul cod:

<?PHP

echo “1”;

?>

<br/>

<?PHP

echo “23”;

?>

Ce va fi afișat în pagină după execuție?

13. Se dă următorul cod:

<?PHP

$x = 2; echo $x;

?>

<br/>

<?PHP

$y = 3; echo $y;

?>

<br/>

~ 131 ~

<?PHP

echo $x+$y;

?>

Ce va fi afișat în pagină după execuție?

14. Pentru ce este utilizat operatorul „.” (punct)?

15. Se dă următorul cod:

<?PHP

$m = array(1, 2, 3, 4, 5);

echo $m[1]+ $m[3]+ $m[5];

?>

Ce va fi afișat în pagină după execuție?

16. Se dă următorul cod:

<?PHP

$a = “a”;

$b = “2”;

$c = “3.14”;

echo $a+ $b+ $c;

echo $a. $b. $c;

?>

Ce va fi afișat în pagină după execuție?

17. De scris codul de conectare la baza de date decanat care

se află pe serverul cu adresa 192.168.1.1 și este accesibilă pentru

utilizatorul admin cu parola 1234. În cazul apariției erorilor, de afișat

mesajele corespunzător.

18. Care funcție este utilizată pentru executarea cererilor

SQL în PHP?

19. Cum poate fi determinat numărul înregistrarilor returnat

de ultima inregistrare?

20. Cum poate fi determinat identificatorul(valoarea

cîmpului ID - autoincrement) a ultimei înregistrări adăugate în tabelă?

21. Pentru ce este utilizată funcția mysql_affected_rows?

22. Care este diferența dintre funcțiile mysql_fetch_array,

mysql_fetch_assoc și mysql_fetch_row?

23. Pentru ce este utilizată funcția

mysql_real_escape_string?

24. Pentru ce este utilizată funcția mysql_fetch_fields?

~ 132 ~

25. Pentru ce se utilizează funcția move_uploaded_file? De

descris parametrii utilizați în funcție. De dat un exemplu.

26. Ce funcție trebuie executată înainte de începerea lucrului

cu masivul superglobal SESSION?

27. Cum poate fi obținută IP adresa utilizatorului care

vizitează pagina?

28. De generat data curentă în formatul următor: data de 21,

luna a 3-a, anul 2012, ora 15 și 25 de minute.

29. De descris funcția require. Care sunt diferențele dintre

include și require?

30. De scris secvența de cod care expediază un mesaj la

adresa de email [email protected], cu tema “Test” și mesajul “Buna ziua”.

31. Pentru ce se utilizează COOKIE?

32. În tabelă a fost adăugată o înregistrare. Cum poate fi

obținut ID-ul acestei înregistrări?

33. Care funcție se utilizează pentru îndeplinirea comenzilor

MySQL?

34. Pentru ce se utilizează SESSION?

35. Cum se face inițializarea unei sesiuni în PHP?

36. Care sunt diferențele principale dintre Cookie și sesiuni?

37. De citit informația din fișierul informatie.txt și de afișat

în pagină.

38. Care funcție este utilizată pentru ștergerea unui fișier?

39. Care funcție se utilizează pentru mutarea unui fișier?

Dați un exemplu de utilizare.

40. Pentru ce este utilizată funcția file_get_contents? Dați

un exemplu de utilizare.

41. Expunei 2 modalități diferite de înscriere a informației

într-un fișier textual.

42. Pentru ce este utilizată biblioteca GD PHP?

43. Cum se crează o imagine vidă?

44. Pentru ce se utilizează funcția imagecreatefromjpeg?

45. Care funcție este utilizată pentru determinarea

dimensiunilor unei imagini?

~ 133 ~

UNITATEA DIDACTICĂ

LIMBAJUL CLIENT JAVASCRIPT

Finalități:

După studierea unității didactice și realizarea sarcinilor propuse,

studentul va fi capabili să:

poată integra JavaScript în pagina web;

poată prelucra evenimentele paginii web;

poată gestiona ierarhia DOM a documentului HTML.

~ 134 ~

5. LIMBAJUL CLIENT JAVASCRIPT

5.1. Sintaxa JavaScript

Pentru a însera JavaScript într-un document HTML deja

existent, este necesară introducerea în fisier a etichetei <script> și

</script>. Această etichetă necesită atributul "type", sau atributul

"language" (acesta din urmă este depreciat în standardul XHTML) care

va specifica browser-ului limbajul folosit pentru interpretarea codului

inclus.

În interiorul etichetei <script> ... </script> se va înscrie codul

JavaScript.

Pentru scrierea și executarea scripturilor JavaScript avem nevoie

de un editor textual și un browser.

Atributul language (care însă nu este folosit în XHTML, ci doar

în paginile web standard HTML) – va avea următoarea sintaxă:

language="JavaScript",

aceasta indică browser-ului ce limbaj este folosit.

Atributul type – înlocuitorul lui "language" – va avea

următoarea sintaxă:

type="text/javascript",

aceasta spune browser-ului ca scriptul este scris în format

plaintext și limbajul JavaScript.

Putem, de asemenea, să introducem instrucțiunile JavaScript

într-un alt fișier, extern, care va avea extensia .js, pentru editarea acestui

fișier este nevoie la fel de un editor textual. Avantajul principal este

posibilitatea utilizării aceluiași cod în mai multe pagini HTML și în

cazul necesității unei modificări în codul JavaScript, modificăm doar

datele dintr-un singur fișier (cel cu extensia ".js").

În cazul în care codul JavaScript se află într-un fișier extern,

eticheta <script> din pagina HTML va trebui sa conțină atributul "src" a

cărui valoare determină locația fișierului în care se află codul JavaScript.

În fișierul extern cu extensia "js" nu trebuie să scriem eticheta

"<script>", aici se scriu doar comenzile JavaScript.

Iată un exemplu de script JavaScript scris in interiorul unei

pagini web (XHTML):

<html>

~ 135 ~

<head>

<title>Cod JavaScript</title>

</head>

<body>

<script type="text/javascript">

document.write("Textul care va fi afisat pe ecran");

</script>

</body>

</html>

Comanda document.write este folosită pentru a tipări ceva în

pagină.

Pentru a încărca scriptul dintr-un fișier extern (de exemplu

"script.js"), se va utiliza construcția:

<html>

<head>

<title>Cod JavaScript</title>

</head>

<body>

<script src="cod.js" type="text/javascript"> </script>

</body>

</html>

Iar fișierul "cod.js" va conține :

document.write("Textul care va fi afisat pe ecran")

Rezultatul afișat în pagină va fi același ca în exemplul anterior.

5.1.1. Ascunderea codului in browserele vechi

Unele browsere nu recunosc scripturile și le afișează în pagina

web ca text. Pentru a evita acest lucru putem folosi eticheta HTML

pentru comentarii <!-- ... //--> delimitînd cu aceasta instrucțiunile

JavaScript, astfel evităm apariția codului scriptului în pagina web:

<script type="text/javascript">

<!--

Codul scriptului

//-->

</script>

~ 136 ~

5.1.2. Convenții de sintaxă

1. Case-sensitive - se face diferența între literele mari și

mici, astfel cuvinte precum "exemple, Exemple" vor fi tratate diferit;

2. Punct și virgulă (;) - Toate declarațiile trebuie să se

termine cu un caracter "punct și virgulă" (;) (Exemplu" var1 = 3; var2 =

8;);

3. Spațiile libere - JavaScript ignoră spațiile libere, tab-

urile și liniile libere care apar în instrucțiuni, acestea sunt utile pentru a

face codul mai bine structurat și ușor de citit. Recunoaște doar spațiile

care apar în șirurile de caractere. Exemplu: "var1 = 2 ;" este echivalent

cu "var1=2;".

4. Ghilimelele - Ghilimelele simple ('') și duble ("") sunt

folosite pentru a delimita șirurile de caractere (string). (Exemplu:

"JavaScript" sau 'JavaScript').

5. Caractere speciale - cînd scriem scripturi, apare necesitatea de

a folosi în cod sau în datele de ieșire, un caracter special sau o apăsare

de tastă , cum ar fi tasta TAB , sau o linie nouă. Pentru aceasta folosim

caracterul backslash "\" în fața unuia din codurile Escape, astfel :

\b – backspace;

\f - indică o pagină nouă;

\n - indică o linie noua;

\r - indică un retur de car;

\t - indică o apăsare a tastei TAB;

\\ - indică un caracter backslash;

\' - indică un apostrof (ghilimele simple);

\" – indică ghilimele duble.

5. Comentarii - comentariile în interiorul codului sunt

necesare cînd dorim să specificăm rolul anumitor funcții și variabile,

pentru o mai ușoară înțelegere ulterioară a scriptului. Pentru a adăuga un

comentariu, pe o singură linie, în interiorul codului, începem scrierea

acestuia cu succesiunea //:

// Comentariu

Dacă dorim să scriem comentarii pe mai multe rînduri, se

folosește /* la începutul comentariului și */ la sfîrșitul acestuia:

/*

Comentarii rînd 1

...

~ 137 ~

comentariu pe mai multe rînduri

...

Ultimul rînd de comentarii

*/

6. Numele variabilelor și funcțiilor - numele dat

variabilelor și funcțiilor trebuie sa respecte următoarele reguli:

primul caracter trebuie să fie o literă, un caracter de

subliniere (_) sau semnul $;

primul caracter nu poate fi un număr;

numele nu trebuie să conțină spații libere;

nu se folosesc cuvinte rezervate, care fac parte din

limbajul JavaScript (cum sunt "array", "status", "alert", etc), deoarece

interpretorul programului nu va face diferența între aceste nume și

comenzile JavaScript cu aceleași nume.

5.2. Variabile și tipuri de date

În JavaScript, se poate crea o variabilă și să-i atribuim o valoare

prin doua metode:

Cu declaratia var

var nume = valoare

Fără declarația var

nume = valoare

Unde 'nume' este numele variabilei iar 'valoare' este valoarea pe

care i-o atribuim.

Tipuri de variabile - spre deosebire de alte limbaje (cum sunt

Pascal sau C), JavaScript nu are tipuri fixe de date, adică permite

schimbarea tipului unei variabile în cadrul scriptului, acesta poate

recunoaște singur cînd datele sunt de tip "șir", numerice sau alt tip.

De exemplu:

var x = "xyz";

x = 8;

Observați că valorile de tip 'sir' (formate din litere) se scriu între

ghilimele, iar cele 'numerice' pot fi scrise și fără ghilimele.

Durata de viață a unei variabile O variabilă scrisă în cadrul unei funcții este o variabilă locală,

valoarea ei fiind recunoscută numai în cadrul acelei funcții, cînd se iese

din funcție variabila este distrusă. Astfel, o altă funcție poate declara și

~ 138 ~

folosi o variabilă cu același nume, JS (Java Script) tratează cele două

variabile ca fiind diferite.

Se pot declara și variabile, în afara oricărei funcții, care să fie

folosite de toate funcțiile, acestea se numesc variabile globale și sunt

valabile de la încărcarea paginii web pînă la închidere, în orice script JS.

5.3. Operatori

Pentru a lucra cu datele introduse într-un script și a manipula

valorile variabilelor se folosesc operatori.

Operatorii sunt simboluri și identificatori care determină felul în

care sunt modificate datele și modul în care este evaluată o combinație

de expresii și variabile.

În JavaScript există:

operatori binari - care necesită existența a doi operanzi

în expresie;

operatori unari - care au nevoie doar de un operand.

Operatori sunt de mai multe tipuri:

Operatori aritmetici;

Operatori de atribuire;

Operatori de comparare;

Operatori logici sau booleeni;

Operatori pentru șiruri;

Operatori typeof;

Operator condițional „?”;

Operatori pentru funcții;

Operatori pentru structuri de date.

5.3.1. Operatori aritmetici

Putem spune că operatorii aritmetici sunt principalii operatori

folosiți cu numere, aceștia efectuează operațiile aritmetice cunoscute:

adunare (+), scadere (-), înmulțire (*), impartire (/). Pe lîngă acești patru

operatori, în JavaScript sunt folosiți încă trei operatori aritmetici:

Modulul (%) - acesta determină restul împărțirii a două numere

Exemplu:

8%3 =2

10%2=0

Incrementare (++) - acest operator crește valoarea cu o unitate.

~ 139 ~

De exemplu, dacă avem variabila 'i', putem folosi operatorul de

incrementare astfel: i++ care este echivalent cu i=i+1.

Exemplu:

x = 7;

x++;

rezultatul va fi x = 8

Decrementare (--) - acest operator scade valoarea cu o unitate.

Cei doi operatori de incrementare (++) respectiv decrementare (-

-) pot fi folosiți atît ca prefix (în fața variabilei) ++i respectiv --i cît și ca

sufix (după numele variabilei) i++ respectiv i--. Valoarea obținută este

aceeași, însă ordinea operației și rezultatul atribuirii valorii sunt diferite.

Folosirea operatorului ca prefix determină în primul rînd

modificarea valorii și apoi are loc atribuirea acesteia.

În cazul folosirii operatorului ca sufix, întîi este atribuită

valoarea variabilei și apoi variabila este incrementată (sau

decrementată).

5.3.2. Operatori de atribuire

În cazul acestui operator JavaScript acționează mereu de la

dreapta la stînga ; se evaluează operandul din dreapta iar valoarea se

atribuie variabilei din stînga semnului "=".

Mai jos puteți vedea un tabel din care puteți înțelege modul de

lucru și acțiune al operatorilor de atribuire(tabelul 5.1):

Tabelul 5.1. Operatori de atribuire

Operator Exemple Echivalent cu

= x = y x = y

+= x += y x = x+y

-= x -= y x = x-y

*= x *= y x = x*y

/= x /= y x = x/y

%= x %= y x = x%y

5.3.3. Operatori de comparare

Expresiile care folosesc acești operatori pun o întrebare despre

două valori pe care le compară. Răspunsul poate fi TRUE sau FALSE.

Un operator de comparație des folosit este operatorul de identitate

(egalitate), reprezentat prin două semne egal "==". Este diferit de

~ 140 ~

simplul "=", operatorul '==' compară două valori determinînd dacă

acestea sunt identice, adică egale atît ca valoare cît și ca tip.

Operatori de comparație sunt prezentați în tabelul 5.2.

Tabelul 5.2. Operatori de comparație

Operator Semnificatie Exemple

== Egal 3 == 8 returnează FALSE

!= Diferit 3 != 8 returnează TRUE

> Mai mare 3 > 8 returnează FALSE

< Mai mic 3 < 8 returnează TRUE

>= Mai mare sau egal 3 >= 8 returnează FALSE

<= Mai mic sau egal 3 <= 8 returnează TRUE

5.3.4. Operatori logici (booleeni)

Similar cu operatori de comparație, operatorii logici compară

două expresii și returnează TRUE sau FALSE.

Acești operatori sunt:

&& - și (and) - compară două expresii și returnează TRUE dacă

ambele sunt adevărate, în caz contrar returnează FALSE.

Exemplu:

x = 5

y = 8

x<7 && y>3

(returnează TRUE)

|| - sau (or) - compara doua expresii și returnează TRUE dacă

cel puțin una din ele este adevărată, în caz contrar returnează FALSE.

Exemplu:

x = 5

y = 8

x>7 || y<3

(returnează FALSE)

! - not - este operator unar, folosește o singură expresie și

returnează TRUE daca expresia este falsă, iar daca expresia este

adevărată returnează FALSE.

Exemplu:

x = 5

y = 8

~ 141 ~

!(x==y)

(returneaza TRUE deoarece 'x' nu este egal cu'y')

5.3.5. Operator pentru șiruri de caractare

Pentru a alătura (concatena) doua variabile string împreună se

folosește operatorul de concatenare a șirurilor + .

Exemplu:

t1 = "programare "

t2 = "web"

t3 = t1+t2

Variabila 't3' va conține șirul "programare web".

5.3.6. Operatorul typeof

Acest operator returnează tipul de date conținut la momentul

respectiv de operandul său. Este util în special pentru a determina dacă o

variabilă a fost definită cu un anumit tip de date.

Studiind tabelul 5.3, puteți înțelege modul de operare al acestui

operator:

Tabelul 5.3. Operatorul typeoff

Operator Descriere

typeof parseFloat returnează șirul 'function'

typeof 33 returnează șirul 'number'

typeof "un anume text" returnează șirul 'string'

typeof true returnează șirul 'boolean'

typeof window returnează șirul 'object'

5.3.7. Operatori pentru structuri de date (obiecte)

Acești operatori sunt necesari atunci cînd lucrăm cu structuri de

date, sau obiecte. În JavaScript obiectele sunt folosite la gruparea

informațiilor pentru a servi unui scop specific.

1. Un operator care ar trebui cunoscut bine este punctul "."

, numit operator pentru membrul unei structuri. Acesta ne permite să ne

referim la un membru (variabilă ,funcție sau obiect) care aparține

obiectului specificat.

Sintaxa este următoarea:

~ 142 ~

numeObiect.nume_Variabila

numeObiect.nume_Functie()

numeObiect.alt_Obiect

Această modalitate de referire la o informație, numită notație cu

punct, returnează valoarea variabilei, funcției sau obiectului aflat cel mai

în dreapta.

2. Operatorul pentru element din matrice, numit și

operator indice al tabloului, se folosește pentru a accesa o dată specifică,

o cheie, dintr-un tablou de date. Acesta este simbolizat printr-o pereche

de paranteze pătrate [ ] , și permite să ne referim la orice membru al unui

tablou. Tablourile sunt obiecte JavaScript. Sintaxa de folosire a

operatorului pentru tablou este :

nume_tablou[cheie]

5.3.8. Operatorul conditional "?"

JavaScript conține și un operator condițional ? : care atribuie o

valoare unei variabile pe baza unei condiții.

Sintaxa de folosire a acestui operator este următoarea:

variabila = (conditie)?val1:val2

Modul de operare este următorul - se evaluează condiția, dacă

este adevărata atunci variabila ia valoarea 'val1', altfel ia valoarea 'val2'.

Exemplu:

<script type="text/javascript">

vizitator= "barbat"

mesaj = (vizitator=="barbat")?"Domnule":"Doamna"

document.write(mesaj);

</script>

Dacă variabila "vizitator" este egală cu 'barbat', variabila

"mesaj" primește valoarea 'Domnule", altfel primește valoarea

"Doamnă".

5.3.9. Ordinea operatorilor

Cînd în expresii se folosesc mai mulți operatori, JavaScript ține

cont de ordinea (importanța) predefinită a fiecărui operator. Precum în

aritmetică, într-o ecuație cu adunare și înmulțire ( 2+3*4 ), dacă nu sunt

paranteze, se execută întîi înmulțirea, aceasta avînd prioritate față de

adunare. La fel e și cu operatorii în programare. Dacă apar mai mulți

~ 143 ~

operatori cu aceeași prioritate, JavaScript îi va evalua de la stînga spre

dreapta.

În tabelul 5.4, următor sunt prezentați operatorii în ordinea

importanței lor, unde operatorii din partea de sus a tabelului au

prioritatea maximă:

Tabelul 5.4. Importanța operatorilor

Operator Nume operator

() [] . de apelare, pt. structuri de date

! ++ -- de negare, incrementare

* / % de înmulțire, împărțire

+ - de adunare, scădere

< <= > >= de comparație

== != de egalitate

&& SI logic

|| SAU logic

? : condițional

= += -= *= /= %= de atribuire

, virgula

5.4. Funcții

Funcțiile se utilizează pentru divizarea mai multor sarcini pe

care trebuie să le execute un script.

O funcție poate conține mai multe instrucțiuni și comenzi care

ulterior pot fi utilizate ușor și repetat prin apelarea funcției care le

conține.

Dacă un script are un volum mare, utilizînd funcțiile codul

poate fi divizat în părți mai mici pe care le putem utiliza separat acolo

unde este nevoie.

În JavaScript există două tipuri de funcții:

predefinite - cum sunt de exemplu: "parseInt(string)",

"parseFloat(string)", ...

și funcții utilizator:

- care returnează o valoare

- care nu returnează o valoare

Crearea (definirea) funcțiilor

Pentru crearea unei funcții se folosește cuvîntul cheie function

urmat de numele funcției și paranteze rotunde () în care putem adăuga

~ 144 ~

parametrii funcției (separați prin virgulă dacă sunt mai mulți) și între

paranteze figurate {} corpul funcției care conține codul care trebuie

executat.

Forma generală a unei funcții este următoarea:

function nume_functie(argument1, argument, ...) {

codul care va fi executat

}

Argumentele sunt variabile folosite de funcție, valoarea cărora

este preluată la apelarea funcției.

Atributele nu sunt obligatorii, o funcție poate fi definită și fără

argumente, dar se păstrează parantezele rotunde, astfel sintaxa unei

funcții fără argumente este următoarea:

function nume_functie() {

codul care va fi executat

}

Instrucțiunea return

O funcție care returnează un rezultat folosește pentru aceasta

instrucțiunea return. Aceasta specifică valoarea pe care o returnează

funcția cînd este apelată.

Iată un exemplu din care puteți înțelege modul de aplicare a

instrucțiunii return:

function suma(x, y) {

z = x+y;

return z;

}

"suma" reprezintă numele funcției (regulile de generare a

numelui sunt aceleași ca și la variabile), "x, y" reprezintă argumentele

funcției a căror valoare este dată cînd funcția este apelată. Între acolade

avem codul care trebuie executat și care, prin instrucțiunea return va

returna valoarea lui "z" care reprezintă suma lui "x" și "y". Astfel

valoarea returnată de funcția "suma()" va fi valoarea pe care o are "z".

Apelarea funcțiilor

După ce am creat o funcție, pentru a fi folosită, funcția trebuie

apelată.

O funcție care conține argumente se apelează în felul următor:

nume_functie(argument1, argument, ...)

O funcție fără argumente se apelează în felul următor:

nume_functie()

~ 145 ~

Observați că la apelul funcției nu se mai folosește cuvîntul

function și acoladele. În locul în care am apelat astfel o funcție va fi

executat corpul acelei funcții.

5.5. Ferestre de dialog

5.5.1. Fereastra Alert

Crearea ferestrelor alert se face prin apelarea codului:

window.alert("mesaj")

unde "mesaj" este textul care va apare în fereastra alert.

Următorul exemplu deschide o fereastra cu mesajul "Bine ai venit".

<script type="text/javascript">

<!--

window.alert("Bine ai venit");

//-->

</script>

În browser va apărea o fereastră ca în figura următoare:

Fig. 5.1. Fereastra alert.

5.5.2. Fereastra Prompt

Fereastra Prompt se creează prin executarea codului:

window.prompt("mesaj", "default")

unde "mesaj" este un text care va apărea în fereastră, deasupra

unei căsuțe de text input; iar "default" este textul care va apare în căsuța

input.

Următorul exemplu deschide o fereastră "Prompt".

<script type="text/javascript">

<!--

window.prompt("Cum va numiti?", "Nume");

~ 146 ~

//-->

</script>

În browser va apărea o fereastră ca în figura următoare:

Fig. 5.2. Fereastra Prompt

Textul pe care utilizatorul îl adaugă în cîmpul din fereastra

prompt poate fi preluat într-o variabilă și folosit apoi în script.

Iată un exemplu în care atribuim deschiderea ferestrei Prompt variabilei

"nume", care va prelua șirul adăugat în caseta de text, apoi valoarea

acestei variabile o introducem în mesajul unei ferestre Alert:

<script type="text/javascript">

<!--

var nume = window.prompt("Scrieti numele", "Nume");

alert("Salut "+nume+"\n Bine ai venit.");

//-->

</script>

După ce utilizatorul scrie numele în fereastra Prompt și apasă

OK se va deschide o fereastră Alert care conține în mesaj numele

adăugat de utilizator.

Am folosit "\n" pentru a adăuga o linie nouă, după "nume", în

textul care apare în fereastra Alert.

5.5.3. Fereastra Confirm

Fereastra de confirmare se creează prin executarea codului:

window.confirm("intrebare")

În fereastra de confirmare va apărea textul "intrebare" și două

butoane "OK" și "Cancel".

Aceasta fereastră este folosită pentru a fi executată o comandă

cînd este apăsat butonul "OK" (returnează TRUE) și altă comandă cînd

este apăsat butonul "Cancel" (returnează FALSE).

Următorul exemplu deschide o fereastră "Confirm" în care apare

întrebarea "Rezultatul lui1+1 este 2?". Dacă este apăsat butonul "OK"

~ 147 ~

apare o fereastră Alert cu mesajul "Corect", iar dacă este apăsat butonul

"Cancel" apare o fereastră Alert cu mesajul "Incorect":

<script type="text/javascript">

<!--

intrebare = window.confirm("Rezultatul lui 1+1 este 2?");

if (intrebare) alert("Corect");

else alert("Incorect");

//-->

</script>

În browser va apărea o fereastră ca în imaginea următoare:

Fig. 5.3. Fereastra Confirm

5.6. Obiecte

5.6.1. Obiectul String

String (sau șir) se folosește pentru a lucra cu informația textuală.

Proprietatea acestui obiect este:

length - returnează numărul de caractere dintr-un șir (string).

Metodele obiectului string sunt următoarele:

bold() - returnează un șir cu litere îngroșate;

charAt() - returnează un caracter de la poziția specificată;

charCodeAt() - codul ASCII al caracterului de pe o poziție;

concat() - returnează două șiruri concatenate;

fontcolor() - returnează un șir cu o culoare specificată;

fontsize() - returnează un șir cu litere de o anume mărime;

fromCharCode() - returnează valoare Unicode a unui caracter;

indexOf() – poziția primei apariții a unui subșir în șir, sau dacă

subșirul nu e găsit, valoarea -1;

italics() - returnează un șir de text înclinat;

~ 148 ~

lastIndexOf() - returnează poziția primei apariții a unui subșir în

șir, sau dacă acesta nu e găsit, -1(de la dreapta șirului spre stînga);

replace() – înlocuiește într-un șir unele caractere cu altele noi;

search() - returnează un număr întreg dacă șirul conține

caracterele specificate, sau -1 dacă nu îl conține;

slice() - returnează un șir începînd de la poziția specificată;

split() - împarte un șir în mai multe șiruri, separate de

caracterele indicate, rezultatul fiind un vector;

substr() - returnează un subșir specificat astfel, exemplu: 12,8

returnează 8 caractere, începînd de la caracterul al 12-lea (începe cu 0);

substring() - returnează toate caracterele de la m pînă la n;

toFixed(n) - returnează șirul numeric rotunjit la 'n' zecimale;

toLowerCase() – convertește un șir în litere mici;

toUpperCase() – convertește un șir în litere mari.

În continuare este prezentat un exemplu în care se folosește

proprietatea "length" pentru a afla cîte elemente are un șir:

<script type="text/javascript">

var str="Programare web"

document.write(src+"<br />")

document.writeln("Acest sir are "+ str.length + " caractere")

</script>

5.6.2. Obiectul Array

Obiectul Array se folosește pentru a stoca mai multe valori într-

un singur nume de variabilă.

Fiecare valoare stocată devine un element al tabloului, acesta are

asociată o cheie. Cu ajutorul acestei chei se poate face referire la oricare

element din tablou.

Cu operatorul new se poate crea obiectul Array:

var note = new Array(4)

unde între parantezele rotunde este indicat numărul de elemente

ale tabloului, aici 4.

Cheile unui tablou încep implicit de la 0.

Pentru a da valori elementelor din tablou, se scrie numele

tabloului urmat de o pereche de paranteze pătrate, în interiorul cărora se

adaugă cheia specifică fiecărui element, apoi semnul egal și valoarea

dorită:

note[0] = 9;

~ 149 ~

note[1] = 8;

note[2] = 10;

note[3] = 7;

sau puteți scrie și astfel:

var note = Array(9, 8, 10, 7);

În cazul acesta cheile se subînțeleg și sunt aceleași ca în prima

varianta, începînd cu 0.

Pentru a face referire la un anumit element din tablou și pentru a

extrage anumite valori din Array, se scrie numele tabloului și între

parantezele pătrate cheia specifică acelui element:

nota1 = note[0];

nota2 = note[2];

Astfel, variabila "nota1" va avea valoarea 9 și variabila "nota2"

valoarea 10.

Pentru a afla numărul de elemente ale unui Array, se folosește

proprietatea length:

nr_note = note.length

Obiectul Array are următoarele metode:

concat() - un tablou rezultat din concatenarea a două tablouri;

reverse() – inversează un tablou;

slice() - returnează o parte specificată a unui tablou;

sort() - returnează tabloul ordonat;

Următorul exemplu folosește o construcție "for" care parcurge

un tablou, extrage valoarea fiecărui element și o afișează:

<script type="text/javascript">

<!--

var note = new Array();

note[0] = 10;

note[1] = 8;

note[2] = 9;

note[3] = 7;

var nr_note = note.length; // Afla nr. elemente din matrice

document.write("Notele sunt: <br />");

for (i=0; i<nr_note; i++) {

document.write(note[i] + "<br />");

}

//-->

</script>

~ 150 ~

5.6.3. Obiectul Date

Obiectul Date se folosește pentru a lucra cu data și timpul.

Sunt două lucruri importante pe care trebuie să le cunoașteți înainte de a

folosi acest obiect:

1. Data inițiala (de referință) este 1-01-1970, nu puteți să lucrați

cu date anterioare acesteia.

2. Cînd creați un obiect "Date", ora folosită de obiect este cea de

pe calculatorul client (al vizitatorului).

Pentru a crea o instanța a obiectului "Date" se folosește

operatorul new:

var data = new Date();

Astfel se memorează data curentă într-o variabilă, cu numele

data.

După ce a fost creată instanța, se pot folosi metodele obiectului.

De exemplu, dacă se dorește de afișat numărul zilei (care e de la

1 la 31) se scrie următoarea comandă:

data.getDate()

Obiecte Date pot fi inițializate cu o dată la creare:

new Date("Month dd, yyyy hh:mm:ss")

new Date("Month dd, yyyy")

new Date(yy,mm,dd,hh,mm,ss)

new Date(yy,mm,dd)

new Date(milliseconds)

Unde: Month=luna, dd=ziua (cu 2 caractere), y=anul (yy e afișat

cu 2 caractere iar yyyy cu 4), h=ora, m=minute, s=secunde,

milliseconds=milisecunde.

Astfel se pot crea variabile pentru fiecare obiect Date de mai

sus, ca în exemplu următor:

var data=new Date("July 23, 1984 14:10:00")

var data=new Date("October 15, 1996")

var data=new Date(96,10,15,15,16,00)

var data=new Date(96,10,15)

var data=new Date(500)

Metodele obiectului Date:

Date() - creează un obiect Date;

getDate() - returnează data (ziua) lunii (între 1-31);

getDay() - ziua săptămînii (între 0-6; 0=Duminica, 1=Luni, etc.)

~ 151 ~

getMonth() - luna (între 0-11. 0=January, 1=February, etc.)

getFullYear() - returnează anul din patru cifre;

getHours() - returnează ora dintr-un obiect Date (între 0-23);

getMinutes() - returnează minutele (între 0-59);

getSeconds() - returnează secunda (între 0-59);

getMilliseconds() - returnează milisecunda (între 0-999);

getTime() - returnează numărul de milisecunde de la

01.01.1970;

getTimezoneOffset() – diferența de timp între calculatorul

utilizatorului și GMT;

getUTCDate() - returnează data dintr-un obiect Date în (UTC)

timp universal;

getUTCDay() - returnează ziua dintr-un obiect Date în timp

universal;

getUTCMonth() - returnează luna dintr-un obiect Date în timp

universal;

getUTCFullYear() - returnează anul (4 cifre) dintr-un obiect

Date în timp universal;

getUTCHours() - returnează ora dintr-un obiect Date în timp

universal;

getUTCMinutes() - returnează minutele dintr-un obiect Date în

timp universal;

getUTCSeconds() - returnează secundele dintr-un obiect Date în

timp universal;

getUTCMilliseconds() - returnează millisecundele dintr-un

obiect Date în timp universal;

parse() – primește ca parametru un șir de tipul Jan 05, 2012 și

returnează numărul de milisecunde de la January 01 1970 00:00:00 pînă

la data indicată;

setDate() - setează luna într-un Obiect Date (între 1-31);

setFullYear() - setează anul (4 cifre);

setHours() - setează ora (între 0-23);

setMilliseconds() - setează milisecundele (între 0-999);

setMinutes() – setează minutele (între 0-59);

setMonth() - setează luna (între 0-11. 0=January, 1=February);

setSeconds() - seteaza secunda (între 0-59);

setTime() - setează milisecundele după 1/1-1970;

setUTCDate() - setează data, în timp universal (între 1-31);

~ 152 ~

setUTCMonth() - setează luna, în timp universal (intre 0-11);

setUTCFullYear() - setează anul, în timp universal (4 cifre);

setUTCHour() - setează ora, în timp universal (între 0-23);

setUTCMinutes() - setează minutele, în timp universal (0-59);

setUTCSeconds() - setează secundele, în timp universal (0-59);

setUTCMilliseconds() - setează milisecundele (între 0-999);

toLocaleString() – convertește un Obiect Date într-un șir, ce

conține data și ora curentă;

toString() – convertește un Obiect Date într-un șir.

Pentru a înțelege mai bine obiectul Date și modul de lucru cu

metodele lui, studiați și următorul 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>

Adăugat într-un document HTML, în secțiunea BODY, acest

script va afișa:

Afiseaza data curenta a zilei: 23.9.2012

5.6.4. Obiectul Math

Acest obiect include constante matematice și funcții. Nu este

nevoie să fie creat un obiect Math înainte de a fi folosit.

Daca, de exemplu dorim să obținem un număr aleator între 0 și

1, utilizăm comanda:

nr_aleator = Math.random()

Proprietățile obiectului Math (Atentie! se scriu cu litera mare):

E - returnează constanta lui Euler (2.7182.......);

LN2 - returnează logaritm natural din 2;

LN10 - returnează logaritm natural din 10;

LOG2E - returnează logaritm în baza 2 din E;

LOG10E - returnează logaritm în baza10 din E;

~ 153 ~

PI - returnează PI;

SQRT1_2 - returnează radical din 0.5;

SQRT2 - returnează radical din 2.

Metodele obiectului Math:

abs(x) - returnează valoarea absoluta din x;

acos(x) - returnează arccosinus din x;

asin(x) - returnează arcsinus din x;

atan(x) - returnează arctangenta din x;

atan2(y,x) - returnează unghiul dintre axa și un punct (x,y);

ceil(x) - cel mai apropiat întreg, mai mare sau egal cu x;

cos(x) - returnează cosinus din x;

exp(x) - returnează valoarea lui E la puterea x;

floor(x) - cel mai apropiat întreg, mai mic sau egal cu x;

log(x) - returnează log natural din x;

max(x,y) - returnează maximul dintre x și y;

min(x,y) - returnează minimul dintre x și y;

pow(x,y) - returnează valoare a lui x la puterea y;

random() - returnează un număr aleator între 0 și 1;

round(x) – îl rotunjește pe x la cel mai apropiat întreg;

sin(x) - returnează sinus din x;

sqrt(x) - returnează radical din x;

tan(x) - returnează tangenta din x.

Iată și un exemplu practic, următorul script rotunjește o valoare

(aici 8.25) la cel mai apropiat întreg:

<script type="text/javascript">

document.write("8.25 rotunjit este: " + Math.round(8.25));

</script>

După ce este adăugat într-un document HTML, în secțiunea

BODY, acest script va afișa:

8.35 rotunjit este: 8

5.7. Ierarhia JavaScript

JavaScript organizează toate elementele unei pagini web într-o

ierarhie. Toate elementele sunt văzute ca obiecte și fiecare obiect are

anumite proprietăți și metode sau alte obiecte.

Cu JavaScript putem manipula ușor obiectele. Pentru aceasta

este importantă înțelegerea ierarhiei obiectelor HTML.

~ 154 ~

JavaScript înțelege fereastra browser-ului ca pe un obiect

window, acesta conține anumite elemente, cum ar fi de exemplu bară de

stare (status bar).

În fereastra browser-ului putem încărca un document HTML,

care reprezintă un obiect document.

5.7.1. Obiectul document

Acesta este unul din obiectele cele mai importante în JavaScript,

și este folosit foarte des.

Obiectul document conține mai multe proprietăți, cum ar fi

culoarea de fundal a paginii (bgcolor) sau alte obiecte, cum sunt tag-

urile HTML. De reținut că toate elementele HTML sunt proprietăți ale

obiectului document, și la rîndul lor acestea sunt obiecte. Un obiect

HTML este de exemplu un formular, o etichetă DIV sau un link.

Pentru a desemna obiectul sau proprietatea curentă pe care

dorim să o folosim, adăugăm cuvîntul this urmat de caracterul punct (.)

și numele proprietății:

this.nume_proprietate

Astfel această expresie se adresează proprietății

"nume_proprietate" din obiectul curent.

Obiectul document are următoarele proprietăți:

alinkColor - culoarea unei legături active;

all - tabloul tuturor etichetelor HTML din document;

anchors - tabloul de obiecte "Anchor";

applets - tabloul de obiecte "Applet";

bgcolor - culoarea de fundal a documentului;

classes - tabloul claselor paginilor cu stiluri;

cookie – fișier cookie asociat cu documentul;

domain - domenil documentului;

embeds - tablou de obiecte înglobate(flash);

fgcolor - culoarea textului în document;

forms[] - tablou de obiecte "Form" (formular);

formName - specifică instanța "Form" care este accesată prin

folosirea valorii atributului "name" din eticheta <form>;

height - specifică înălțimea documentului în pixeli;

ids - tabloul identificatorilor paginii cu stiluri;

images - tablou de obiecte "Image";

~ 155 ~

lastModified - data cînd a fost modificat ultima oară

documentul;

layers - tablou de obiecte "Layer";

linkColor - culoarea legăturilor;

links - tablou de obiecte "Link", ce corespund tuturor link-urilor

HREF din document, în ordinea specificată în sursă;

referrer - adresa URL (externă) a documentului la care a fost

legat documentul curent;

tags - tabloul etichetelor paginii cu stiluri;

title - titlul documentului;

URL - adresa URL a documentului curent;

vlinkColor - culoarea legăturilor vizitate;

width - specifica lățimea documentului în pixeli;

lastModified - URL-ul documentului;

Obiectul document are următoarele metode:

captureEvents() - capturează evenimentele care vor fi tratate de

document;

close() - închide fluxul datelor de ieșire spre document;

contextual() - permite sa aplicăm în mod selectiv un stil unui

element HTML care apare într-un anumit context specific;

getSelection() - întoarce textul selectat;

handleEvent() - apelează handlerul pentru evenimentul

specificat;

open() - deschide fluxul datelor de ieșire spre document;

releaseEvents() - eliberează evenimentele capturate de

document;

routeEvent() - dirijează evenimentele capturate spre alte

obiecte;

write() - adaugă text în document;

writeln() - adaugă text și un caracter linie nouă în document.

În următorul exemplu puteți vedea cum au fost folosite

proprietățile obiectului document pentru stabilirea culorii de fundal, a

textului, link-urilor și titlul unei pagini web:

<script type="text/javascript">

<!--

document.bgColor = '#eaeafe'

document.fgColor = '#fe1111'

document.linkColor = '#01ff01'

~ 156 ~

document.title = "Lectie JavaScript"

//-->

</script>

Acest script setează culoarea de fundal a pagini "#eaeafe"

(albastru deschis), culoarea textului roșu, a legăturilor verde și titlul

"Lectie Java Script".

5.7.2. Obiectul form

Formularele de asemenea pot fi considerate și tratate ca obiecte

dintr-un document HTML, acestea fiind sub-obiecte ale obiectului

"document", astfel se apelează împreună cu acesta.

Pentru a înțelege mai bine lucrul cu obiectul document și cum se

lucrează cu ierarhia obiectelor, studiați următorul exemplu:

<html>

<head>

<script type="text/javascript">

<!--

function afisare(){

nume = document.nume_form.nume_camp.value;

return nume

}

//-->

</script>

</head>

<body >

<form name="nume_form">

Name: <input type="text" name="nume_camp"

value=""><br>

<input type="button" value="Apasa" name="Buton"

onClick="alert('Salut ' +afisare())">

</form>

</body>

</html>

Acest cod va afișa în pagină următorul formular:

Fig. 5.4. Formular HTML

~ 157 ~

După ce scrieți în cîmpul "Name" un nume și apăsați butonul

"Apasa" va apare o fereastră Alert cu mesajul "Salut "nume" ".

Ierarhia obiectelor din pagina afișată de acest exemplu este

următoarea:

document (pagina HTML) -> Forms[0] (sau numele

formularului din "name" - intregul formular) -> {Element[0] (primul

camp din formular), Element[1] (butonul din formular)}

Dacă de exemplu doriți să aflați ce se introduce în primul

element din formular, trebuie sa vă gîndiți cum să accesați acest obiect.

Pornim din vârful ierarhiei "document", urmărim calea către

primul formular "forms[0]" pînă la obiectul numit "elements[0]" (se

adaugă toate numele obiectului pe măsură ce le depășim). Astfel putem

accesa primul element prin :

document.forms[0].elements[0]

Pentru a afla ce text a fost introdus, accesăm valoarea acelui

element. Pentru elemente din formular (tip "input") se folosește

proprietatea "value". Acesta arată valoarea casetei "input" respective

(aici textul introdus în cîmpul de text). Acum putem afla valoarea cu

ajutorul următorului cod:

name = document.forms[0].elements[0].value;

Dacă avem formulare de dimensiuni mari, poate deveni dificilă

apelarea obiectelor după ordinea lor, prin numere între paranteze pătrate.

Daca am avea trei formulare și vrem sa apelăm al cincisprezecelea

element (cîmp) din al treilea formular, ar trebui sa scriem

"document.forms[2].elements[14]". Pentru a facilita astfel de apelări, se

pot da nume unice diferitelor obiecte, folosind atributul "name", după

cum puteți vedea în exemplu următor:

<form name="nume_form">

Nume: <input type="text" name="nume_element" value="">

Astfel "forms[0]" este de asemenea "nume_form" și în loc de

"elements[0]" puteți utiliza "nume_element".

Prin urmare, în loc de a scrie

name = document.forms[0].elements[0].value;"

se poate scrie

name = document.nume_form.nume_element.value;

Proprietățile obiectului "Form" sunt următoarele:

~ 158 ~

action – conține atributul "action" din eticheta <form>, specifică

adresa URL unde este trimis formularul;

elements - matricea care conține toate elementele din <form>;

encoding – conține atributul "enctype" din <form>, specifică o

codificare MIME a formularului;

length - numărul de elemente conținute în formular;

method – conține atributul "method" din <form>, definește felul

în care formularul este trimis serverului (get sau post);

name – conține atributul "name" al unei etichetei <form>;

target – conține atributul "target" al etichetei <form>, specifică

fereastra în care serverul ar trebui să returneze informațiile. Dacă nu este

specificată, serverul afișează rezultatele în fereastra care a expediat

formularul.

Obiectul "Form" are următoarele metode:

handleEvent() - apelează handlerul de eveniment specificat;

reset() - readuce elementele formularului la valorile prestabilite;

submit() – declanșează un eveniment "submit" care expediază

formularul.

5.7.3. Lucrul cu getElementById

ID-ul este un atribut care poate fi adăugat în etichetele (sau tag-

urile) HTML. Prin valoarea dată acestui atribut se atribuie un nume unic

etichetei respective. Acest "id" poate fi folosit în stilurile CSS pentru a

defini aspectul grafic și aranjarea în pagină a tag-ului respectiv, dar

poate fi folosit și în scripturi JavaScript pentru a lucra cu elementele și

conținutul etichetei HTML. Astfel, id-ul poate face o legătură între

JavaScript și orice etichetă HTML din document.

Pentru a face referire într-un script JS la o etichetă HTML, prin

intermediul id-ului acesteia, se folosește următoarea sintaxă:

document.getElementById("id")

- getElementById("id") este o proprietate a obiectului

"document", aceasta, după cum sugerează și denumirea, obține

elementul care are id-ul dintre paranteze.

- Puteți folosi și ghilimele simple (' ') pentru numele id-ului din

paranteze.

Această sintaxă "document.getElementById("id")" returnează o

referință la întreg elementul HTML care are acest "id", va defini un

obiect conținînd atributele și conținutul acestuia. Pentru a face referire la

~ 159 ~

anumite părți din acest obiect (element HTML), de exemplu la conținut

sau la un atribut "style", se folosesc proprietăți specifice acestui obiect

de nivel 2.

Proprietăți folosite cu "document.getElementById("id")":

attributes[] - conține într-o matrice (cu index de la 0) toate

atributele etichetei HTML apelate. Acestea se adaugă în matrice

începînd de la dreapta spre stînga. Are 2 proprietăți:

name - returnează numele atributului apelat

value - returnează valoarea atributului apelat

childNodes - conține o ierarhie de obiecte care sunt adăugate

în matrice. Aceste obiecte sunt formate din elemente ale întreg

conținutului tag-ului respectiv. Pentru a apela obiectele din fiecare nivel

ierarhic se folosesc proprietăți specifice.

De exemplu, dacă doriți să obțineți conținutul de tip text dintr-un

tag, puteți folosi expresia :

document.getElementById("id").childNodes[0].nodeValue

className - preia sau modifică valoarea atributului "class"

Exemplu: pentru preluare :

var cls=obiect.className;

ș pentru atribuire

obiect.className='nume';

getAttribute("atribut") - obține valoarea atributului specificat

între paranteze.

setAttribute("atribut", "valoare") - modifică valoarea

atributului specificat cu valoarea dată.

removeAttribute("atribut") - elimină existența atributului

specificat între paranteze.

href - definește sau obține valoarea atributului "href" (adresa

URL) din etichetele pentru link-uri.

innerHTML - returnează sau schimbă conținutul, inclusiv cod

HTML, încadrat de o etichetă HTML.

src - definește sau obține valoarea atributului "src" din

etichetele <img>.

style - definește valori ale atributului "style", folosit pentru

elemente de stil CSS. Această proprietate este urmată de o proprietate de

tip CSS.

value - se folosește pentru elemente de formular (din <form>),

obține sau definește valoarea unei casete (cu un anume id) din formular.

~ 160 ~

5.8. Prelucrarea evenimentelor

Evenimentele sunt elemente foarte importante în programarea

JavaScript. Acestea sunt acțiuni provocate de cele mai multe ori de

vizitatorul paginii.

Dacă vizitatorul apasă un buton din pagină se provoacă

evenimentul "Click". Dacă mouse-ul este deasupra unui link, se

declanșează un eveniment "MouseOver".

De exemplu, dacă dorim să apelam o funcție "nume_functie()"

de fiecare data cînd s-a modificat un anumit obiect Text, procedăm

astfel: atribuim funcția "nume_functie()" handlerului de eveniment

"onChange" al obiectului Text respectiv, ca în exemplul de mai jos:

<input type="text" size="25" name="nume"

onChange="nume_functie(this)">

"onChange" este atribut al etichetei <input>, a cărui valoare,

între ghilimele, este funcția "nume_functie()". In locul funcției dintre

ghilimele putem sa scriem direct tot codul din funcție, separînd prin

caracterul ; comenzile JavaScript (acest lucru nu este recomandat în

cazul unui volum de cod mare).

În continuare este prezentată o lista cu evenimentele care pot fi

folosite în programarea JavaScript:

onClick - se execută la apăsarea unui click pe un obiect

(document, link, buton, checkbox, buton radio, buton reset sau submit);

onDblClick - execută acțiunea la efectuarea a doua clickuri

consecutive;

onMouseOver – acționează cînd se poziționează mouse-ul

deasupra unui obiect;

onMouseOut – acționează cînd mouse-ul părăsește suprafața

unui obiect;

onMouseMove – acționează la mișcarea mouse-ului;

onMouseDown – acționează cînd ținem apăsat unul din

butoanele mouse-ului;

onMouseUp – acțiunea se execută atunci cînd este eliberat unul

din butoanele mouse-ului

onFocus – acțiunea apare cînd este activat un obiect: casetă

password, cîmp text, bloc de text, cîmp FileUpload dintr-un formular

HTML;

~ 161 ~

onChange – acțiunea apare cînd se modifică conținutul unui

cîmp dintr-un formular HTML (o parolă, text, bloc de text, sau

FileUpload) și cînd acesta pierde focalizarea;

onBlur - este inversul lui "onFocus()", este declanșat atunci cînd

un obiect nu mai este activ, prin trecerea la o alta resursă;

onLoad – acționează cînd browserul a terminat de încărcat un

document, imagine sau toate Frame-urile dintr-un <FRAMESET>;

onUnload – acțiunea apare cînd se închide un document;

onKeydown – acțiunea apare cînd se apasă o tastă;

onKeyUp –apare după ce am terminat de apăsat o tastă;

onKeyPress - apare la apăsarea unei taste și menținerea ei în

această stare;

onSubmit – acțiunea apare la trimiterea unui formular cu

ajutorul butonului submit;

onReset – acțiunea apare la reinițializarea unui formular;

onSelect – acțiunea apare cînd utilizatorul selectează text dintr-

un obiect Text sau Textarea;

onAbort – acțiunea se execută în momentul în care se renunță la

încărcarea unui obiect;

onError – acțiunea apare cînd acțiunea de încărcare a unei

imagini sau document eșuează;

onMove – acțiunea se declanșează cînd se deplasează fereastra

sau cadrul;

onResize – acțiunea se declanșează atunci cînd se

redimensionează fereastra sau cadrul.

În continuare sunt prezentate obiectele împreună cu

evenimentele pe care le pot folosi:

Evenimente ale ferestrelor

Onload – încărcarea paginii;

Onunload – închiderea ferestrei;

Onresize - redimensiunare;

Onmove- mutare;

Onabort - anulare;

Onerror – apariția erorii;

Onfocus - focusare;

Onblur – pierderea focusului.

Evenimente ale mouse-lui:

~ 162 ~

Onmousedown – apăsarea butonului mouse-lui;

Onmouseup – eliberarea butonului mouse-ului;

Onmousemove – mișcarea mouse-ului;

Onmouseover – trecerea mouse-ului deasupra;

Onmouseout – părăsirea suprafeței de către mouse;

Ondblclick - dublu click;

Onclick - click.

Evenimente ale formularelor și elementelor acestora:

Onsubmit – la inițializarea procesului de expediere a

formularului;

Onreset – la resetarea formularului;

Onchange – la modificarea valorii în cîmpul select;

Onselect - la selectare;

Onclick - la click;

Onblur – la pierderea focusului;

Onfocus - la primirea focusului.

Evenimente ale tastelor

Onkeydown – tasta apăsată;

Onkeyup – tastă eliberată;

Onkeypress – apăsarea tastei cu eliberare.

~ 163 ~

Însărcinări

1. Care tag HTML este utilizat pentru a însera în document o

secvență de cod JavaScript?

2. Pentru ce este utilizat următorul codul type="text/javascript"?

3. Car este extensia fișierelor JavaScript externe?

4. Cum se marchează comentariile codului în JavaScript?

5. Cum se declară o variabilă în JS?

6. Care este forma generală a unei funcții?

7. Ce ferestre standarde de dialog există în JavaScript?

8. Pentru ce se utilizează alert? Dați un exemplu.

9. Pentru ce se utilizează confirm? Dați un exemplu.

10. Pentru ce se utilizează prompt? Dați un exemplu.

11. Care proprietate a obiectului din clasa String va returna

lungimea șirului de caractere?

12. Pentru ce este utilizată funcția indexOf?

13. Pentru ce este utilizată funcția split?

14. Cum poate fi creat un masiv în JS? De expus cel puțin 2 metode.

15. Care funcție este utilizată pentru concatenarea a două masive?

16. Care funcție este utilizată pentru sortarea unui masiv?

17. Care este efectul executării codului var data = new Date()?

18. Ce va returna funcția getDay?

19. Care funcție este utilizată pentru determinarea lunii curente?

20. Care va fi rezultatul executării codului

document.write(Math.round(8.25));

21. Ce reprezintă obiectul document?

22. Ce reprezintă obiectul window?

23. Care va fi rezultatul executării codului document.title = "Lectie

JavaScript"?

24. Pentru ce se utilizează funcția getElementById?

25. Care va fi rezultatul executării codului

getElementById(“element”). innerHTML = “Test”?

~ 164 ~

26. Cum poate fi modificată sau citită valoarea elementelor input ale

unui formular?

27. Care eveniment va fi provocat la apăsarea nu buton de către

utilizator?

28. Pentru ce este utilizat onFocus?

29. Care este diferența dintre onFocus și onBlur?

30. Cum poate fi prelucrat evenimentul de expediere a unui formular

la apăsarea butonului submit?

~ 165 ~

LITERATURĂ RECOMANDATĂ

1. BURAGA, Sabin. Aplicaţii Web la cheie. Studii de caz

implementate în PHP. Bucureşti: Ed. Polirom, 2003. 272 p. ISBN 973-

681-456-4.

2. ANGHEL, Traian. Programarea în PHP. Ghid practic.

Bucureşti: Ed. Tehnică, 2005. 152 p. ISBN 9734601393.

3. BURAGA, Sabin. Programarea în Web 2.0. Bucureşti:

Ed. Polirom, 2007. 264 p

4. BURAGA, Sabin. Servicii Web. Concepte de baza şi

implementări. Bucureşti: Ed. Polirom, 2006. 320 p.

5. BURAGA, Sabin. Proiectarea siturilor Web. Design şi

funcţionalitate (ediţia a II-a). Bucureşti: Ed. Teora, 2005. 344 p.

6. GUGOIU, Teodoru. HTML, XHTML, CSS şi XML

prin exemple - ghid practic. Bucureşti: Ed. Teora, 2005. 350 p.

7. BOIAN, F. Aplicații Web la cheie. Studii de caz

implementate in PHP. Bucureşti, Polirom, 2007. 272 p.

8. КУХАРЧИК, А. PHP: обучение на примерах.

Moscova:Ed.Новое знание,2004. 240p.

9. ОЛИЩУК А.В., ЧАПЛЫГИН А.Н. Разработка

WEB приложений на РНР 5. Профессиональная работа: Вильямс.

2006. 352p.

10. ГЛУШАКОВ С. В., БАБЕНКО М. И.,

ТЕСЛЕНКО Н. С. Секреты хакера. Защита и атака. Серия:

Учебный курс. АСТ Москва, 2008. 544 p.

11. СУЭРИНГ С, КОНВЕРС Т, ПАРК Д. PHP и

MySQL. Библия программиста. Диалектика, 2010. 912 стр.

12. ШВАРЦ Б., ЗАЙЦЕВ П., ТКАЧЕНКО В. и др..

MySQL. Оптимизация производительности. Символ-Плюс, 2010.

832 стр.

13. КУЗНЕЦОВ М., СИМДЯНОВ И. MySQL 5 в

подлиннике. БХВ-Петербург, 2010. 1024 стр.

14. РЕЙЧЕЛ ЭНДРЮ. CSS. 100 и 1 совет. Символ-

Плюс, 2010. 336 стр.

~ 166 ~

15. РЕЙЧЕЛ ЭНДРЮ. HTML, javascript, PHP и

MySQL. Джентльменский набор Web-мастер. БХВ-Петербург,

2011. 912 стр.

16. КОТЕРОВ Д. В., КОСТАРЕВ А. Ф.. PHP 5 В

Подлиннике. БХВ-Петербург, 2006. 1120 стр.

17. ЛЮК ВЕЛЛИНГ, ЛОРА ТОМСОН.. Разработка

веб-приложений с помощью PHP и MySQL. Вильямс, 2010. 848 стр.

18. Справочник по HTML [online]. Disponibil pe Internet:

http://htmlbook.ru/html

19. Справочник по CSS [online]. Disponibil pe Internet:

http://htmlbook.ru/css

20. Tutoriale CSS [online]. Disponibil pe Internet:

http://www.cssplaza.com/

21. Все о PHP, MySQL и не только [online]. Disponibil pe

Internet: http://php.su

22. Funcții PHP - MySQL [online]. Disponibil pe Internet:

http://www.marplo.net/php-mysql/functii_php_mysql.html

23. MySQL Functions [online]. Disponibil pe Internet:

http://www.php.net/manual/en/ref.mysql.php

24. Ghidul Securității PHP [online]. Disponibil pe Internet:

http://www.phpromania.net/articol/40/Ghidul_Securitatii_PHP.html#Lu

cruri de baza

25. JavaScript [online]. Disponibil pe Internet:

http://www.marplo.net/javascript/

26. Современный учебник JavaScript [online]. Disponibil

pe Internet: http://javascript.ru/

27. Tutoriale HTML [online]. Disponibil pe Internet:

http://www.tutorialehtml.com/

28. HTML Tutorial [online]. Disponibil pe Internet:

http://www.w3schools.com/html/

29. Учебник HTML [online]. Disponibil pe Internet:

http://ru.html.net/tutorials/html/

30. Учебник PHP [online]. Disponibil pe Internet:

http://ru.html.net/tutorials/php/

31. Учебник CSS [online]. Disponibil pe Internet:

http://ru.html.net/tutorials/css/