~ 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: < sau <
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"
( ), 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  
< less then < <
> greater then > >
& ampersand & &
© copyright © ©
® registered trademark ® ®
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 © <b>html</b>.';
~ 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 " & - <b>html</b>.
?>
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]
User <[email protected]>
User <[email protected]>, Another User
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/