Sunteți pe pagina 1din 545

HTML (HyperText Markup Language) este un limbaj utilizat pentru crearea paginilor web ce

pot fi afisate intr-un browser (sau navigator).


HTML este folosit pentru prezentarea unui continut (text, imagine) intr-o pagina web,
furnizeaza mijloacele prin care continutul unui document poate fi structurat si adnotat cu
diverse tipuri de metadate si indicatii de redare si afisare. Aceste indicatiile pot varia de la
decoratiuni minore ale textului, cum ar fi culoarea sau sublinierea unui cuvant ori
introducerea unei imagini, pana la adaugarea de elemente sofisticate, tabele, harti de imagini,
formulare si cod CSS sau scripturi JavaScript.
Metadatele pot include informatii despre titlul si autorul documentului, informatii structurale
despre cum este impartit documentul in diferite segmente, paragrafe, liste, titluri etc. si
informatii esentiale care permit ca documentul sa poata fi legat de alte documente pentru a
forma astfel hiperlink-uri.
HTML este un format text proiectat pentru a putea fi citit si editat utilizand un editor de text
simplu, editarea si intelegerea paginilor in acest fel necesita cunostinte de HTML, pe care le
puteti obtine studiind lectiile din acest curs.
Exista si editoare grafice, de tip WYSIWYG (What You See Is What You Get - "ceea ce vezi
este ceea ce obtii"), cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft
FrontPage, care permit ca paginile web sa fie tratate asemanator cu documetele Word si
genereaza ele cod HTML pentru continutul paginii, dar aceste programe genereaza un cod
HTML care este de multe ori prea incarcat si de proasta calitate.
HTML este de asemenea utilizat in e-mail. Majoritatea aplicatiilor de e-mail folosesc un
editor HTML incorporat pentru compunerea e-mail-urilor si un motor de prezentare a e-mailurilor de acest tip.

Acest curs prezinta elementele de baza ale limbajului HTML si modul de lucru cu acesta, va
ajuta sa invatati cum sa creati pagini web folosind aceasta tehnologie.
Tot ce aveti nevoie este un editor de texte simplu, cum ar fi Notepad, si un navigator, de
exemplu Mozilla Firefox, care este gratuit.
Pentru a invata cat mai bine elementele prezentate in aceste lectii, exersati personal fiecare
exemplu prezentat si creati si altele pornind de la acestea.
Retineti ca acest curs reprezinta o baza si un punct de pornire pentru invatarea HTML, ne
fiind prezentate aici toate proprietatile si elementele HTML. Pentru o cunoastere mai
amanuntita a acestora, vizitati site-ul W3C HTML.

Principalele elemente HTML


1. Ce este HTML? (Hypertext Markup Language)
- Este un set de coduri logice care constituie apariia unui document web si a informatiilor pe
care le deine. Codurile sunt scrise intre "<" (paranteza deschisa) si ">" (paranteza
inchisa), cu toate ca nu sunt chiar paranteze, aa se numesc si arata aa: < >.
Exemplu:
<BODY> sau <FONT>

- Cele mai multe elemente (numite si tag-uri) au un element (tag) de deschidere si un element
de nchidere distins prin "/" in interiorul parantezei deschise "<".
Exemplu:
<FONT> ... </FONT>
- Primul cuvnt care apare nuntru "<" se numete element sau eticheta HTML si spune
browser-ului sa fac ceva, precum <FONT>
- Cuvintele care urmeaza dup element in interiorul "< >"se numesc atribute care descriu
proprietile elementului. Cum ar fi : culoarea, mrimea, etc.
- Atributele sunt separate prin spatiu si urmate de semnul egal "=", dupa care sunt scrise, intre
ghilimele (" ") valorile atributelor.
- Astfel, o eticheta HTML poate contine elementul de identificare, atribute si valori.
- In urmatorul exemplu elementul este FONT atributul COLOR si valoarea BLUE:
<FONT COLOR="BLUE">Acest text va fi albastru</FONT>

2. Structura documentului HTML


- Un document (fisier) HTML este alcatuit din mai multe elemente si atributele lor.
- La nceput un element HTML cuprinde (nconjoar ) datele documentului. Acest element
conine doua sub-elemente principale: HEAD si BODY. In HEAD se poate adauga titlul
paginii web si alte elemente numite metatag-uri, precum si scripturi JavaScript si stil-uri CSS.
In BODY se adauga continutul documentului care va fi afisat in pagina web.
Exemplu:
<html>
<head>
<title>Titlu Documentului</title>
</head>
<body>
Continutul paginii
</body>
</html>
Structura generala a unui document HTML
<HTML>
<HEAD> Acesta are si el mai multe sub-elemente:
<TITLE> Aici se scrie titlul documentului, cat mai sugestiv, si se ncheie cu </TITLE>
<BASE> Poate fi folosit pentru a nregistra locaia documentului in forma URL.
(Necesar daca documentul nu este accesat in locaia lui originala). Se ncheie cu </BASE>
<LINK> Indica o relaie dintre document si alte obiecte de pe WEB. Se ncheie cu
</LINK>
<META> Aici sunt scrise informaii cum ar fi tastatura (limbaj) folosita, descrierea si
cuvinte cheie care pot fi gsite de motoarele de cutare. Se ncheie cu </META>
<SCRIPT> Conine oricare din JavaScript sau VB Script. Se ncheie cu </SCRIPT>
<STYLE> Conine informaii privind stilul, grafica informaiilor care vor aprea pe
pagina. Se ncheie cu </STYLE>
Aici se ncheie elementele adaugate in HEAD
</HEAD>

<BODY> Etichetele HTML si continutul documentului care va fi afisat in pagina web sunt
incluse in acest element. Aici pot fi puse si elemente cum ar fi: <SCRIPT> </SCRIPT>
Se ncheie cu
</BODY>
</HTML>

Crearea si editarea paginii HTML


Sunt mai multe programe cu care se pot crea pagini web, chiar fara a cunoaste limbjul
HTML, cum sunt Microsoft FrontPage sau Macromedia Dreamweaver.
Editoarele de text sunt programele de baza, si cele mai folosite, pentru editarea paginii web.
Avantajul folosirii lor este simplitatea, pentru creare paginii web sunt necesare cteva din
codurile invizibile ale limbajului HTML, astfel se creaza documente rapid si usor, in plus
ocupa foarte putin spatiu si resurse de memorie, acestea insa necesita cunoasterea limbajului
HTML.
Dintre editoarele de text cunoscute cel mai folosit este NotePad, care este folosit si pentru
acest curs, dar poate fi utilizat orice editor de text. Pentru ncepatori si pentru usurinta cu care
se lucreaza, eu recomand folosirea aplicatie NotePad sau Notepad++, dar cei avansati pot
folosi si altele cum ar fi Dreamweaver.

1. Crearea bazei de nceput a unui document


Cum ati vazut in Lectia 1, sunt elemente sigure, generale, care sunt necesare pentru crearea
unui document HTML.
Pentru nceput deschideti aplicatia NotePad si scrieti structura de baza a unei pagini web.
Aceasta este:
<html>
<head>
<title> Titlul </title>
</head>
<body>
Continut
</body>
</html>
Acum pagina dv. are HEAD si BODY in interiorul bazei <HTML>.
In interiorul elementului HEAD are elementul TITLE, pe care ar trebui sa-l completati cu un
text reprezentativ ca titlu al documentului dv.; si in BODY un text "Continut".
Ceea ce scrieti la TITLE va apare in linia cea mai de sus a browseru-lui (deasupra
meniurilor). La TITLE puteti pune orice text, dar este bine sa scrieti ceva care sa descrie cat
mai bine obiectul si continutul paginii deoarece este ceea ce cauta si indexeaza multe
portaluri de cautare de pe internet, si indicat, sa nu depaseasca 70 caractere.
Ceea ce adaugati intre tag-urile <body> </body> reprezinta continutul paginii, care va fi
afisat in browser.
Mai jos gasiti un exemplu cum ar putea fi completat tag-ul TITLE si un mic continut in
pagina:
<html>
<head>

<title>MarPlo.net - Cursuri, Jocuri si Anime</title>


</head>
<body>
<h1>Pagina HTML</h1>
Lectii, exemple si explicatii.
</body>
</html>
- <h1> </h1> este o eticheta HTML pentru afisare de text mare (ca un titlu) in pagina.
- Ca sa vedeti rezultatul, copiati acest cod intr-o pagina noua deschisa cu Notepad si apoi
salvati fisierul cu extensia .html. Daca nu stiti deja, pt. a-l salva alegeti la "Save as type" - All
Files, apoi la "File name" ii scrieti numele si extensia (ex.: "pagina.html"). Dupa ce a fost
salvat fisierul, deschideti-l cu un browser (trebuie sa mearga cu dublu-click pe el).

2. Setarea proprietarilor documentului


- Proprietatile documentului pot fi controlate de atributele elementului BODY, de exemplu
cum ar fi culorile pentru fondul paginii, pentru text si diferite faze ale link-urilor.
Culorile sunt setate folosind culorile de baza: rosu, verde si albastru; expresia folosita RGB
(Red, Green, Blue), acestea sunt reprezentate ca valori hexadecimale si sunt scrise intre
ghilimele (" "), la inceput trebuie adaugat caracterul '#'. Fiecare 2 unitati ale codului
reprezinta una din culorile RGB.
De exemplu: #00aa11 reprezinta o culoare care nu are Rosu (00), are Verde (aa) si Albastru
mai putin (11).
Elementul BODY

- Acestui element ii puteti adauga informatii care sa defineasca culoarea sau imaginea
din fondul paginii, textul si culoarea link-urilor.

- Daca elementul BODY nu este completat cu alte atribute atunci browser-ul va


prezenta culorile standard, de obicei fondul este alb.

- Pentru a seta culoare fondului paginii adaugati in eticheta <BODY> atributul


BGCOLOR.

- Urmatorul exemplu va prezenta un document a carui fond este de culoare albastra:


<body bgcolor="#0000ff"></body>

Culoarea textului
o - Atributul TEXT controleaza culoarea textului normal din document.
o - Acesta va afecta tot textul din document care nu este colorat de alte
elemente, cum ar fi link-ul.
o - Culoarea standard pentru text este Negru.

o - Iata un exemplu in care culoarea fondului va fi albastru si culoarea textului


va fi rosu, atributul TEXT va fi adaugat astfel:
<body bgcolor="#0000ff" text="#ff0000"></body>

Link-uri (LINK, VLINK si ALINK)


o - Aceste atribute controleaza culoarea link-ului in diferite stari
1. LINK - culoarea initiala a link-ului. Standard este albastru
2. VLINK - culoarea unui link vizitat. Standard este purpuriu.
3. ALINK - culoarea link-ului in momentul activarii. Standard este rosu.
o - Modul de setare al acestor atribute este urmatorul:
<body bgcolor="#ffffff" text="#ff0000" link="#0000ff" vlink="#ff00ff"
alink="#ffff00"></body>
Rezultatul va fi o pagina cu fondul alb, textul rosu, link-urile albastre, linkurile vizitate vor avea culoarea roz iar culoarea link-urilor in momentul
activarii va fi galben.

Folosirea unei imagini ca fond pentru pagina (background)


o - Elementul body ofera posibilitatea nlocuiri fondului paginii cu o imagine
(Background image). Daca imaginea este mai mica dect dimensiunile paginii
atunci imaginea va fi multiplicata pana va acoperi ntreg cadru documentului.
Este indicat ca imaginea sa fie in format *.gif sau *.jpg. Folosirea unei imagini
va da un aspect placut documentului. Pentru a vedea cum arata un document al
carui fond este o imagine click aici.
o - Un exemplu de cod HTML cu imagine pentru background este urmatorul:
<body background="imagine.gif" bgcolor="#ffffff"></body>
In acest exemplu fondul pagini va fi dat de imaginea fisierului "imagine.gif" si
de asemenea am setat BGCOLOR astfel incat in timpul procesului de
ncarcare a imaginii culoarea fondului va fi alba.

Dupa ce a-ti creat baza de nceput a unui document si a-ti setat proprietatile, trebuie sa salvati
fisierul. Salvarea trebuie facuta intr-un format pe care browser-ul l poate recunoaste.
Extensia standard pentru un fisier care reprezinta o pagina web este ".htm" sau ".html". De
obicei folosesc (".html").
- Pentru a salva documentul ca sa arate ca o pagina web, in NotePad alegeti din meniul File
comanda Save si salvati fisierul cu orice nume doriti dar cu extensia html (sau "htm") - (La
File name: scrieti si numele si extensia ".html", exemplu: index.html). Daca nu scrieti
extensia, NotePad va salva documentul in format "txt".
- Pentru a vedea documentul ca o pagina web, duceti-va in directorul in care a-ti salvat

fisierul si deschideti-l pur si simplu (cu Enter sau dublu-click la mouse), acesta va fi deschis
automat de browser-ul pe care-l folositi (Mozilla Firefox, Internet Explorer, Opera). Sau
deschide-ti browser-ul si din comanda Open deschideti documentul pe care l-ati salvat.
- Pentru a continua munca, a face modificari paginii sau pentru a adauga altceva in
documentul HTML, deschideti documentul cu NotePad. Una din metode este sa deschideti
aplicatia NotePad si din meniul File alegeti Open apoi gasiti fisierul pe care vreti sa-l
modificati si dati clic pe butonul Open. Dupa ce terminati modificarile salvati, astfel daca
redeschideti documentul ca o pagina web acesta va fi deschis cu noul format.

Titluri, Paragrafe, Un nou rnd, Linie


orizontala
1. Titluri <Hx> ... </Hx>

- Pentru titluri din continutul documentului HTML este indicat folosirea etichetelor
<Hx>, (headings) unde 'x' este un numar intre 1 si 6.

- In cadrul elementului BODY, elementele Headings sunt folosite ca titluri sau pentru
o mai buna impartire a continutului paginii.

- Mrimea textului nconjurat de elementul Heading variaz de la foarte mare, in


<H1> pana la foarte mic in <H6>.

Mai jos puteti vedea exemplu:


Cod HTML
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

Cum apare in pagina

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

2. Paragraf <p> ... </p>

- Paragrafele permit sa adaugi text in document astfel incat lungimea de afisare a


textului va fi ajustata de marimea deschiderii browser-ului si fiecare paragraf va
incepe un nou rnd.

- Distanta dintre doua paragrafe succesive este mare deoarece browser-ul le afiseaza
cu un rnd gol intre ele.

Mai jos puteti vedea exemplu:


Cod HTML
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
<p>Paragraf 4</p>
</body>
</html>

Cum apare in pagina

Paragraf 1
Paragraf 2
Paragraf 3
Paragraf 4

3. Un nou rand <br>

- Tag-ul <br> permite sa decizi unde textul va incepe un nou rnd, astfel se forteaza
nceperea unui nou rnd.

- <br> este un Element Gol dar poate sa conin atribut. <br> nu are si nu cere element
de nchidere, nu se foloseste </br>

Mai jos puteti vedea exemplu:


Cod HTML

Cum apare in pagina

<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
Paragraf 1
<h1>Heading 1</h1>
Linie 2
<p>Paragraf 1<br>
Linie 3
Linie 2<br>
...
Linie 3<br>
... </p>
Paragraf 2
<p>Paragraf 2</p>
</body>
</html>
- Elementul <br> folosete un singur atribut CLEAR care poate avea valoarea LEFT,
RIGHT sau ALL, si sunt folosite daca este o imagine pe pagina. Atributul CLEAR foreaz o
linie in jos. Daca o imagine este aezata in partea stanga a paginii, valoarea LEFT va muta
cursorul jos la prima linie din marginea tanga.

Heading 1

4. Linie orizontala <hr>

- Acest element afiseaza o linie orizontala in document

- Acest element nu folosete element de nchidere [</hr>]

- Elementul <hr> foloseste urmatoarele atribute:


o - SIZE = latimea liniei, in pixeli (standard este 2)
o - WIDTH = lungii liniei, in pixeli sau procente din lungimea afisarii paginii
(standard 100%)
o - NOSHADE = afiseaza linia fara a avea un aspect 3D
o - ALIGN = aliniaza linia (Left, Center, Right), adica Stanga, Centru sau
Dreapta paginii ( Standard centru)
o - COLOR = seteaza culoarea liniei

Mai jos puteti vedea exemplu:


Cod HTML
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<h1>Heading 1</h1>
<p>Paragraf 1<br>
Linie 2<br>
Linie 3<br>
... </p>
<hr>
<hr color="#1111fe" size="4" width="50%">
<p>Paragraf 2</p>
</body>
</html>

Cum apare in pagina

Heading 1
Paragraf 1
Linie 2
Linie 3
...

Paragraf 2

Formatul textului
HTML contine mai multe elemente, tag-uri si atribute, pentru afisarea textului in mai multe
formate cu aspecte grafice diferite.

1. Tag-ul <FONT> ... </FONT>


Cu acest element, <FONT>, puteti modifica aspectul textului, cum sunt tipul fontului folosit,
marimea si culoarea textului.

- Marimea textului poate fi modificata cu elementul FONT si atributul SIZE.


Atributul SIZE poate lua valorile numerice de la 1 la 7 si pe langa acestea poate
folosi, ca valoare relativa, semnele "+" sau "-". Textul normal (daca nu este specificat
acest atribut) are valoarea 3.

Exemplu :
<font size="+2">Doua

mrimi mai mare</font>

- Tipul fontului poate fi modificat cu elementul FONT si atributul FACE.

Exemplu :
<font face="Arial Black">Acesta este tipul de font Arial Black</font>

- Culoarea textului poate fi modificata cu elementul FONT si atributul COLOR.

Exemplu :
<font color="#00dd00">Acest text are culoarea verde</font>

2. Bold, Italic, Underline si alte elemente


Elemente des folosite pentru formatul textului sunt:

- Bold (ingrosat) <b> ... </b>

- Italic (inclinat) <i> ... </i>

- Underline (subliniat) <u> ... </u>

Exemple:
<b> Bold </b>
<i> Italic </i>
<u> Underline </u>
Alte elemente folosite pentru formatul textului sunt:

- <pre> Performated </pre> - Textul incadrat de elementul PRE este prezentat intrun singur font, oricare ar fi atributul FACE. Spatiile mai lungi si liniile necesare sunt
prezentate aa cum sunt scrise in NotePad, ne mai fiind nevoie de alte elemente
adiionale, cum ar fi <br> pentru o noua linie si &nbsp; &nbsp; pentru mai mult
spaiu intre cuvinte.

- <em> Accentuare (Emphasis) </em> - Browser-ul de obicei arata aces element ca


italic

- <strong> Strong </strong> - Browser-ul de obicei arata aces element ca bold

- <tt> Teletype </tt> - Ca si PRE, browser-ul prezinta acesta intr-un singur tip de
font, indiferent de fontul ales cu atributul FACE, in interiorul elementului FONT

- <cite> Citatie </cite> - Reprezinta o citatie din document.

Mai jos puteti vedea cteva exemple de coduri si modul lor de afisare in browser.
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<p><font size="+1">O singura marire</font>- normal <font size="-1">O singura micsorare</font><br>
<b>Bold</b>- <i> Italic </i> - <u> Subliniat </u> <font color="#ff0000"> Colorat </font><br>
<em>Accentut</em> - <strong> Strong </strong> <tt>Tele type</tt><br>
<cite> Citatie </cite></p>
</body>
</html>
- In browser va fi afisat asa:
O singura marire- normal - O singura micsorare
Bold- Italic - Subliniat - Colorat
Accentut - Strong - Tele type
Citatie

3. Alinierea
Cteva elemente pot avea atributul (ALIGN) pentru aliniere, cum ar fi Titlurile <Hx> ,
Paragraful <p></p> si Linia orizontala <hr> . Cele trei valori ale atributului ALIGN sunt:
LEFT, RIGHT si CENTER.
Aliniamentul celor mai multe elemente se face cu ajutorul altor elemente:

- <div align="valoare"> ... </div> Poate conine cele mai multe elemente. Tot ce este
poziionat cu elementul DIV poate fi aliniat oriunde-n pagina, indiferent daca in acel
loc se afla si alt ceva (Imagine, Text, ).

- <center> ... </center> Va centra elementele

4. Alte etichete HTML pentru formatul textului

- <strike> Text taiat </strike>

- <big> Prezinta textul intr-un font mare </big>

- <small> Prezinta textul intr-un font mic </small>

- <sub> Afisaza textul in pozitia subscript </sub>

- <sup> Aseaza textul in pozitia superscript </sup>

In continuare puteti vedea un exemplu cu aceste coduri de mai sus si felul cum sunt afisate de
browser.
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<p>
<strike> Text taiat </strike><br>
<big> Prezinta textul intr-un font mare </big><br>
<small> Prezinta textul intr-un font mic </small><br>
<sub> Aseaza textul in pozitia subscript </sub> normal
<sup> Aseaza textul in pozitia superscript </sup><br>
</p>
</body>
</html>
- In browser va fi afisat asa:
Text taiat

Prezinta textul intr-un font mare


Prezinta textul intr-un font mic
Aseaza textul in pozitia subscript

normal Aseaza textul in pozitia superscript

- Urmatoarele elemente pentru format sunt folosite mai rar si sunt pentru documente cu
aplicatii tehnice

- <dfn> Defineste exemplu de termen inchis </dfn>

- <code> Folosit pentru extragerea unui cod de program </code>

- <samp> Folosit pentru simple productii de programe, scripturi , etc. </samp>

- <kbd> Folosit pentru text care va fi scris de utilizator </kbd>

- <var> Folosit pentru variabile sau argumente de comenzi </var>

In continuare puteti vedea un exemplu cu aceste coduri de mai sus si felul cum sunt afisate de
browser.
<html>
<head>
<title>Titlu documentului</title>
</head>

<body>
<p>
<dfn> Definite exemplu de termen inchis </dfn><br>
<code> Folosit pentru extragerea unui cod de program </code><br>
<samp> Folosit pentru simple productii de programe, scripturi , etc. </samp><br>
<kbd> Folosit pentru text care va fi scris de utilizator </kbd><br>
<var> Folosit pentru variabile sau argumente de comenzi </var><br>
</p>
</body>
</html>
- In browser va fi afisat asa:
Definite exemplu de termen inchis
Folosit pentru extragerea unui cod de program

Folosit pentru simple productii de programe, scripturi , etc.


Folosit pentru text care va fi scris de utilizator

Folosit pentru variabile sau argumente de comenzi


- Alte elemente pentru formatul textului:

- <q> ... </q> - Folosit pentru citate scurte.

- <blockquote> ... </blockquote> - Folosit pentru incadrarea de citate mai lungi,


creaza spatiu pentru text. Pentru a crea mai mult spatiu puteti adauga de mai multe ori
acest element.

- <address> ... </address> - Cu acest element se specifica informatii cum ar fi


autorul documentului si detalii pentru contact.

In continuare puteti vedea un exemplu cu aceste coduri de mai sus si felul cum sunt afisate de
browser.
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<p>
<q>Daca vrei si crezi, orice este posibil.</q>
<blockquote>
Bucuriile neimpartasite pot aduce tristete iar suferinta impartasita poate sa aduca bucurie.
<br>
Aceasta este prima zi din restul vietii tale.
</blockquote>
<center>
<address>180 Attwell Dr. Suite 130 <br> Toronto, ON <br> M9W 6A9</address>
</center>
</p>
</body>
</html>
- In browser va fi afisat asa:

Daca vrei si crezi, orice este posibil.


Bucuriile neimpartasite pot aduce tristete iar suferinta impartasita poate sa aduca bucurie.
Aceasta este prima zi din restul vietii tale.
180 Attwell Dr. Suite 130
Toronto, ON
M9W 6A9

Marcatori si numerotare
HTML contine cateva tag-uri utile pentru asezarea continutului in pagina. Prin acestea textul
este mai usor de citit si evidentiat.

1. Elementele pentru marcatori si numerotare


Un element des folosit in formarea listelor (neordonate) este <ul>.

- <ul> este elementul de nceput si dupa scrierea listei se incheie cu </ul>.

- Majoritatea elementelor pentru marcatori si numerotare sunt compuse din unu sau
mai multe elemente <li> ... </li> (list element). Fara atributul "type" specificat in
"<ul>" acestea prezint un marcaj ca un bullet.

Mai jos puteti vedea exemplu.


<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ul>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ul>
</body>
</html>
- In pagina web apare asa:

List item 1 ...

List item 2 ...

List item 3 ...

- Sunt 3 tipuri de marcaje: disc, circle (cerc) si square (patrat)

- Tipul de marcaj care se doreste folosit se introduce prin atributul type in eticheta <ul>
- Exemplu:
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ul type="square">
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ul>
</body>
</html>
- In pagina web apare asa:

List item 1 ...

List item 2 ...

List item 3 ...

Un alt element folosit pentru formarea listelor (ordonate) este <ol>.

- <ol> ... </ol> este un element de numerotare. Elementele din lista sunt numerotate
automat.

- Impreuna cu <ol> se foloseste <li> ... </li>

Iata un exemplu:
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ol>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol>
</body>
</html>
- In pagina web apare asa:
1. List item 1 ...
2. List item 2 ...

3. List item 3 ...


Sunt mai multe tipuri de numerotare care pot fi folosite. Acestea sunt controlate de atributul
"type care este adaugat in elementul <ol>, le puteti vetea mai jos:

- type="1" - stil: 1, 2, 3, ...

- type="a" - stil: a, b, c, ...

- type="i" - stil: i, ii, iii, ...

- type="I" - stil: I, II, III, ...

De asemenea se poate specifica numarul de inceput al numerotarii printr-o valoare data


atributului start.
Exemplu:
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ol type="a">
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol>
- Alta lista:
<ol type="I" start="3">
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol>
</body>
</html>
- In pagina web apare asa:
a. List item 1 ...
b. List item 2 ...
c. List item 3 ...
- Alta lista:
III.

List item 1 ...

IV.

List item 2 ...

V.

List item 3 ...

2. Alte elemente pentru asezarea textului in pagina


Alte elemente pentru asezarea textului sunt: tag-ul <dl>, care cuprinde in el elementele <dt>
si <dd>

- <dl> ... </dl> este folosit (impreuna cu "dt" si "dd") pentru definirea si incadrarea
unei liste de definitii.

- <dt> ... </dt> Defineste elementul din lista. Fiecare tip de astfel de element trebuie
precedad de unul sau mai multe elemente <dd> ... </dd>, folosite pentru descrierea
elementului definit.

Aceste elemente ajuta pentru a da un aspect ordonat si placut textului si a putea face o
separare mai buna a continutului.
In urmatorul exemplu puteti vedea cum se folosesc aceste elemente :
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd> - Hyper Text Markup Language</dd>
<dd> - Limbaj pentru pagini web</dd>
<dt>Dog</dt>
<dd>dog = caine</dd>
<dd>animal de casa</dd>
</dl>
</body>
</html>
- In pagina web apare asa:
HTML
- Hyper Text Markup Language
- Limbaj pentru pagini web
Dog
dog = caine
animal de casa
Pentru o eficienta mai buna se pot combina elementele de marcaj si numerotare, introducand
elementele <ul> si <ol> imbricate (unele in celelalte) impreuna cu elementele <li>
Exemplu:
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ul type="square">
<li> List item 1 ... </li>
<li> List item 2 ...
<ol type="a" start="3">

<li> Alt List item ... </li>


<li> Alt List item ... </li>
</ol></li>
<li> List item 5 ... </li>
</ul>
</body>
</html>
- Observati ca tot ce contine "<ol> ... </ol>" este adaugat in cadrul unui "<li> </li>"
- In pagina web apare asa:

List item 1 ...

List item 2 ...


c. Alt List item ...
d. Alt List item ...

List item 5 ...

Adaugare Imagini
HTML contine si elemente pentru adaugarea de imagini in pagina web.

1. Formatul imaginilor care pot fi folosite


Cele mai folosite formate pentru imaginile adaugate intr-o pagina HTML sun GIF si JPEG
(JPG ; JPE), avantajul acestora este ca imaginile care au aceste extensii au o marime mica (in
bytes), avand maximum 256 de culori.
Alte tipuri de formate (folosite mai rar) sunt:

PNG, BMP, TIFF, PCX

2. Adaugarea unei imagini intr-o pagina web


Pentru a introduce o imagine intr-un format HTML se folosete elementul <img> ... </img>
mpreuna cu urmatoarele atribute :

- src - Valoarea acestui atribut determina locatia fisierului care contine imaginea.

- alt - La acest atribut se scrie textul care va aparea daca imaginea nu e afisata (de
unele browsere) sau cand utilizatorul va pozitiona, in browser, mouse-ul peste
imagine.

- align - Acest atribut permite asezarea imagini in locuri diferite pe pagina. Pot fi
folosite urmatoarele optiuni:

o Bottom , Middle , Top , Left , Right , TextTop , ABSMiddle , Baseline ,


ABSBottom

- width - Valoarea acestui atribut reprezinta lungimea imaginii, in pixeli. Daca nu


este scris imaginea va fi prezentata cu lungimea originala.

- height - Valoarea acestui atribut reprezinta inaltimea (latimea) imaginii, in pixeli.


Daca nu este scris imaginea va fi prezentata cu inaltimea originala.

- border - Prin adaugarea acestui atribut imaginea va aparea nconjurata de un


chenar, valoarea acestui atribut reprezinta grosimea chenarului, in pixeli.

- hspace - Acest atribut este pentru spatiu orizontal pe ambele parti ale imaginii,
specificat in pixeli. De exemplu o valoare de 5 va pune un spatiu invizibil, de 5 pixel,
in prtile orizontale ale imaginii.

- vspace - Acest atribut este pentru spatiu vertical pe ambele parti ale imaginii,
specificat in pixeli. De exemplu o valoare de 5 va pune un spatiu invizibil, de 5 pixel,
in prtile verticale ale imaginii.

In exemplu de mai jos puteti vedea modul de introducere a unei imagini pe o pagina web si
cum pot fi folosite atributele :
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<img src="imagine.jpg" alt="puteti adauga orice text" align="top" width="100"
height="120" border="4" hspace="10" vspace="7"></img>
</body>
</html>

Crearea de link-uri
Link-urile (links) sunt elemente HTML cu ajutorul carora putem deschide alte pagini, sari de
la un document la altul sau la alt site. Sunt foarte importante in crearea de pagini web.
Forma generala pentru crearea unui link este urmatoarea:

<a href="url" title="Titlu link">Nume</a>

- a este elementul specific pentru crearea link-urilor


- href este atributul care marcheaza indicarea adresei link-ului
- url este adresa link-ului (a paginii care va fi deschisa). De exemplu (http://www.marplo.net)
- title este atributul prin care se da un titlu link-ului (un text ascuns, care apare numai cand
este pozitionat mouse-ul deasupra link-ului)
- Titlu link este textul ascuns care apare cand este pozitionat mouse-ul deasupra link-ului
- Nume este textul care va aparea in browser si pe care trebuie dat click cu mouse-ul. In loc

de acest text se poate folosi si o imagine, astfel "Nume" va fi inlocuit cu <img


src="nume_imagine.extensie">
Cand documentul este alcatuit din mai multe cadre se foloseste si atributul target, vezi Lectia
10
Culoarea link-urilor poate fi schimbata de urmtoarele atribute, care trebuie scrise in
interiorul elementului <BODY>

link="#0000ff - reprezinta culoarea link-ului in browser.

vlink="#00ffff - reprezinta culoarea link-ului cnd pagina respectiva a fost / este


vizitata.

alink="#ff0000 - reprezinta culoarea link-ului cnd acesta este activat.

Exemplu:
<body bgcolor="#00ffff" link="#000000" vlink="#ff0000" alink="#00ff00">

Link-urile sunt de doua feluri:


1. Link-uri externe - (sunt cele mai utilizate), care sunt si ele de doua feluri:
a) Link-uri externe ctre pagini ale aceluiasi site. Pentru acestea URL-ul poate sa nu
includa si domeniul site-ului, cum ar fi "http://www.nume.com", ci se poate folosi doar cale
in directoare, numele si extensia documentului la care se face saltul.
De exemplu:

- daca documentul tinta se afla in acelasi director cu fisierul in care se scrie link-ul,
codul va fi scris asa:
o <a href="nume_fisier.extensie" title="Titlu link">Nume</a>

- daca documentul tinta se afla intr-un director anterior celui in care se afla fisierul in
care se scrie link-ul, codul va fi scris asa:
o <a href="../nume_fisier.extensie" title="Titlu link">Nume</a>

- daca documentul tinta se afla intr-un director din cel care se afla fisierul in care se
scrie link-ul, codul va fi scris asa:
o <a href="director/nume_fisier.extensie" title="Titlu link">Nume</a>

b) Link-uri externe ctre alte site-uri. Aici, adresa URL din link trebuie sa contina si
domeniul (numele site-ului) paginii tinta, codul HTML se va scrie, de exemplu, asa:

<a href="http://nume_site/pagina" title="Titlu link">Nume</a>

2. Link-uri interne - sunt link-uri ctre alte texte din aceeasi pagina. Se folosesc cnd pagina
respectiva este lunga si e nevoie sa se sara spre anumite texte din pagina.
- Pentru creare de link-uri interne trebuie urmati urmatorii pasi:

1. Se scrie urmatorul cod la textul tinta, care marcheaza locatia unde se va face saltul
si se afla in aceeasi pagina cu linkul
o <a name="cuvant">Textul tinta</a>

- atributul "name" indica tinta pentru link, e un fel de semn care indica
locatia.

- "cuvant" poate fi orice cuvnt, trebuie sa fie unic pentru fiecare link.

- "Textul tinta" este textul unde se face saltul.

2. In locul unde vrem sa fie link-ul (acolo unde o sa dam click pentru a face saltul
ctre textul ales), se scrie urmatorul cod:
o <a href="#cuvant">Nume</a>
o - aici "cuvant" este acelasi text scris la pasul 1.

Link-urile interne si externe pot fi combinate. Astfel putem face saltul ctre un anumit text
aflat intr-o alta pagina. In pagina respectiva se scrie codul de la pasul 1, la textul ales pentru
tinta link-ului, iar in pagina in care va fi link-ul se scrie:

<a href="adresa_pagina#cuvant">Nume</a>

Harti de imagini
Hartile de imagini sunt parti din aceeasi imagine care este "impartita" in mai multe zone, apoi
in functie de zona pe care se executa click, browserul poate afisea o alta pagina.
De exemplu, pe un site dedicat turismului am putea avea pe pagina principala o imagine care
reprezinta harta tarii (in care definim zonele dupa conturul judetelor); in cazul unui click pe
zona Brasov se incarca o pagina care descrie diverse obiective turistice din judetul Brasov, iar
un click pe o alta zona de judet ar duce la alta pagina care descrie obiectivele turistice din
acel judet.
O harta de imagini ar putea fi folosita si pentru navigarea in cadrul unui site: daca avem mai
multe butoane de navigare grupate, se poate folosi o imagine care reprezinta toate acele
butoane - mai multe imagini se incarca mai incet decat o imagine cu dimensiunea egala cu
suma celorlalte (in kb) deoarece comunicarea cu serverul (cand se cere imaginea) se face o
singura data.
Pana aici am prezentat numai avantaje; dezavantajul major este ca un vizitator care are

browserul setat sa nu incarce imagini pentru a naviga mai repede nu va vedea imaginea si nu
va intelege mai nimic (putem totusi folosi marcajul "alt" de specificare a textului alternativ
pentru imagini). Totusi acest lucru este foarte rar.

Crearea hartii de imagini


Pentru formarea unei harti de imagini, se adauga in interiorul tag-ului "<img>" atributul
"usemap" a carui valoare reprezinta numele hartii, apoi se incepe formarea hartii prin
elementul:

<map name="nume_harta"> </map>

- unde pt. "nume_harta" a atributului "name" se foloseste acelasi cuvant adaugat la


"usemap"
- in cadrul acestuia se adauga elemente

<area atribute>

- acestea definesc zonele hartii imaginii si forma acestora (prin valorile atributelor),
- numarul de elemente "AREA" reprezinta numarul de suprafete (cu link-uri specifice) in care
este "impartita" imaginea.
In urmatorul exemplu puteti vedea forma generala a creari unei "harti de imagini" (cu 2
cadre), URL poate fi orice adresa de site sau pagina a site-ului curent:

<img src="poza.jpg" usemap="#map1">


<map name="map1">
<area shape="rect" coords="9, 120, 56, 149" href="url">
<area shape="rect" coords="100, 200, 156, 249" href="url">
</map>

In tabelul de mai jos puteti vedea atributele care se folosesc si descrierea acestora:
Instructiune

Atribute
-

usemap="nume_harta
specifica harta de imagine la client
"
lowscr = "url"

<map atribute
>
< / map >

marcaj de includere a imaginilor


specifica faptul ca este o harta de imagine pe
server (se foloseste mai rar; de obicei folosim
harti de imagine la client)

ismap
<img atribute >

Descriere

name = "nume_harta"

imaginea de rezolutie scazuta care se incarca


prima (doar pentru Netscape)
specifica regiunile unei harti de imagine la client
numele hartii de imagine (corespunzator
atributului USEMAP al marcajului <IMG>)

shape = "forma"

defineste o regiune a unei harti de imagine


forma regiunii: rect sau rectangle (dreptunghi),
circle sau circ (cerc), point (punct), poly sau
polygon (poligon)

coordonatele unei regiuni (in pixeli); se calculeaza


in functie de coltul din stanga sus al imaginii (care
are coordonatele (0, 0), adica x = 0, y = 0); variaza
in functie de SHAPE = forma regiunii:
- pentru rect (dreptunghi) se dau coordonatele
celor 4 colturi sau a celor din stg. sus si dr. jos ale
coords = "coordonate" regiunii
- pentru circ (cerc) se dau coordonatele centrului
<area atribute >
cercului si raza
- pentru point (punct) se dau coordonatele
punctului
- pentru poly (poligon) se dau coordonatele
colturilor poligonului
href = "=url="

URL - ul asociat regiunii specificate din cadrul


imaginii; in cazul unui clic pe acea regiune se
incarca pagina specificata prin URL

alt = "text"

textul asociat regiunii specificate din cadrul


imaginii; apare plasand mouse-ul deasupra
regiunii respective sau celor cu browserul setat sa
nu incarce imagini

Iata un exemplu practic, avem imaginea de mai jos.


In aceasta imagine avem trei zone distincte: dreptunghi, cerc si romb (poligon); pe care, prin
codurile HTML de creare a hartii de imagini, le-am definit sa fie tratate ca zone diferite,
separate, si cand dam click pe ele, fiecare deschide cate o pagina diferita (sugerata de numele
din zona respectiva).

- Observati ca mouse-ul isi schimba forma numai cand este deasupra zonelor care au fost
definite ca sa fie suprafete a hartii de imagini. Aceasta definire nu este facuta prin desen, ci
prin coordonatele folosite in atributul "coords", coordonate care au fost alese pentru a se
potrivi cu desenul. Reperul cel mai important este lungimea in pixeli din coltul stanga-sus
pana in punctele care formeaza zona dorita.
Codul HTML pentru acest exemplu este urmatorul (studiati cu atentie atributele folosite si
coordonatele scrise; revizuiti si tabelul de mai sus):
<div align="center">
<img src="image_map.gif" alt="Harta de imagini" border="0" width="300" height="300"
usemap="#map1">
<map name="map1">
<area
href="dir/contact.php" alt="Date de contact" title="Date de contact"
shape="rect" coords="6,116,97,184">
<area
href="curs.html" alt="Curs HTML" title="Curs HTML"
shape="circle" coords="251,143,47">
<area
href="../index.html" alt="Pagina principala" title="Pagina principala"
shape="poly" coords="150,217, 190,257, 150,297,110,257">
</map>
</div>

Lucru cu tabele
Tabelele sunt elemente foarte utile pentru asezarea si prezentarea continutului intr-o pagina
web.

1. Crearea de tabele
Pentru a crea tabele in paginile web se foloseste elementul <table> ... </table> , acesta
incadreaza alte patru sub-elemente, care alcatuiesc structura tabelului.

- Linia (randul) Tabelului <tr> ... </tr>

- Titlul Tabelului <th> ... </th>

- Coloanele tabelului (datele) <td> ... </td>

- Sub-titlu tabelului <caption> ... </caption>

Linia tabelului de obicei contine elementul pentru titlurile tabelului si elementul pentru
coloanele tabelului.
In cadrul elementelor pentru titluri si coloanele tabelului se pot adauga si alte elemente

HTML, cum ar fi cele pentru formatul textului, paragrafe, link-uri sau imagini
Mai jos puteti vedea un exemplu de cod HTML pentru crearea unui tabel:
<table border="1">
<tr>
<th>titlu 1</th>
<th>titlu 2</th>
</tr>
<tr>
<td>linia 2- coloana 1</td>
<td>linia 2- coloana 2</td>
</tr>
<tr>
<td>linia 3- coloana 1</td>
<td>linia 3- coloana 2</td>
</tr>
<tr>
<td>linia 4- coloana 1</td>
<td>linia 4- coloana 2</td>
</tr>
</table>
- In pagina web apare asa:
titlu 1
titlu 2
linia 2- coloana 1

linia 2- coloana 2

linia 3- coloana 1

linia 3- coloana 2

linia 4- coloana 1

linia 4- coloana 2

2. Atributele Tabelului

- bgcolor = defineste culoarea tabelului

- width = specifica lungimea tabelului (In pixeli sau procente din lungimea paginii)

- border = grosimea liniei (in pixeli) ce defineste tabelul si nconjoara fiecare celula

- cellspacing = spatiu dintre celule (in pixeli)

- cellpadding = spatiu dintre linia celulei si continutul acesteia (in pixeli)

- align = controleaz poziionarea tabelului in pagina, cu urmtoarele atribute : left,


right, sau center

- background = controleaza culoarea de fond a tabelului, care poate fi si o imagine

- bordercolor = culoarea liniei din jurul tabelului

- bordercolorlight = culoarea luminoasa folosita de doua linii din cele patru care
nconjoara tabelul

- bordercolordark = culoarea ntunecata folosita de doua linii din cele patru care
nconjoara tabelul

Sub-titlu tabelului
- Sub-titlu tabelului "caption" permite specificarea unei linii de text care va aparea
deasupra sau sub tabel, acest lucru este definit de atributul "align" care poate lua valorile: top
(deasupra) bottom (jos)
Exemplu:
<table border="1" cellpadding="2">
<caption align="bottom">acesta este textul</caption>
<tr>
<th>titlu 1</th>
<th>titlu 2</th>
</tr>
<tr>
<td>linia 2- coloana 1</td>
<td>linia 2- coloana 2</td>
</tr>
</table>
- In pagina web apare asa:
titlu 1
linia 2- coloana 1

titlu 2
linia 2- coloana 2
acesta este textul

3. Atributele specifice elementelor pentru titlu si coloane

- colspan = specifica cat de multe coloane ale tabelului aceasta celula va inlocui

- rowspan = specifica cat de multe randuri ale tabelului aceasta celula va inlocui

- align = alinierea datelor celulei pe orizontala (left, right sau center)

- valign = alinierea datelor celulei pe verticala (top, middle sau bottom)

- background = controleaza culoarea de fond a celulei, care poate fi si o imagine

- bgcolor = defineste culoarea celulei (dar nu imagine)

- width = specifica lungimea celulei (In pixeli sau procente din lungimea paginii)

- height = specifica inaltimea celulei (In pixeli sau procente din inaltimea paginii)

in urmatorul exemplu puteti vedea rezultatul folosirii atributelor: "colspan" "rowspan" si


"bgcolor"

<table border="1" cellpadding="2">


<caption align="bottom">acesta este textul</caption>
<tr>
<th>titlu 1</th>
<th>titlu 2</th>
</tr>
<tr>
<td colspan="2">linia 2- coloana 1</td>
</tr>
<tr>
<td rowspan="2">linia 3- coloana 1</td>
<td>linia 3- coloana 2</td>
</tr>
<tr>
<td bgcolor="#adadff">linia 4- coloana 2 - colorat</td>
</tr>
</table>
- In pagina web apare asa:
titlu 1

titlu 2

linia 2- coloana 1
linia 3- coloana 1

linia 3- coloana 2
linia 4- coloana 2 - colorat
acesta este textul

Exersati singuri si alte exemple de tabele, cu mai multe randuri si coloane.

Utilizarea cadrelor
Cadrele, sau frame-uri, sunt folosite pentru impartirea ferestrei browser-ului astfel incat sa fie
afisate mai multe pagini in aceeasi fereastra de browser.
Un frame (cadru) este o parte din suprafata ferestrei browserului.
Fiecare frame prezinta n interior un document propriu (in general un document HTML). De
exemplu puteti creea doua cadre intr-o fereastra, in primul cadru puteti incarca un document
HTML (ex. doc1.htm) iar in al doilea cadru un alt document HTML, de la alta adresa (ex.
doc2.htm)
Dupa cum puteti vedea in imaginea de mai jos.

Pentru crearea de frame-uri se pot folosi urmatoarele etichete HTML:

<frameset> si <frame> sau <iframe>

1. Configurarea cadrelor
Pentru inceput se adauga un element <FRAMESET> ... </FRAMESET> in interiorul
documentului HTML, n sectiunea HEAD.
<FRAMESET> determina cat din spaiul ferestrei este atribuit fiecrui cadru, folosind
atributele ROWS sau COLS care impart ecranul in Linii sau Coloane.
Acesta va conine elemente <FRAME>, cate unul pentru fiecare divizare a ferestrei din
browser.
ROWS

Determina numarul de linii si marimea cadrelor care vor fi asezate in linie, ncepnd
de sus.

Pot fi folosite urmatoarele valori:


o - pixeli absoluti ; ex : "360,120"
- procente din inaltimea ecranului ; ex : "75%,25%"
- valori proportionale, folosind (*). Acesta putnd fi combinat cu procente sau
pixeli. Ex : "120,*" sau "30%,*"
COLS

Determina numarul de coloane si marimea cadrelor care vor fi asezate pe coloane,


ncepnd din stanga.

Pot fi folosite urmatoarele valori:


o - pixeli absoluti ; ex : "380,120"
- procente din lungimea ecranului ; ex : "33%,77%"
- valori proportionale, folosind (*). Acesta putnd fi combinat cu procente sau
pixeli. Ex : "120,*" sau "30%,*"

Alte atribute ale elementului <FRAMESET>

FRAMEBORDER - Stabileste afisarea sau nu a unei borduri in jurul cadrelor.


Posibile valori: 0, 1 sau YES, NO.

FRAMESPACING - Acest atribut este specificat in pixeli. Daca FRAMEBORDER


este 0 atunci si acesta trebuie sa aiba valoarea 0

BORDER - Marginea cadrelor. Valori posibile: 0 sau 1

BORDERCOLOR - Acest atribut permite sa alegi culoarea bordurii.

Elementul <FRAME>

Acest element defineste un singur cadru , este scris in interiorul elementului


<FRAMESET>

Pentru fiecare cadru trebuie scris cate un element <FRAME>

Acesta are urmatoarele atribute:


o SRC - Aici trebuie scrisa adresa si numele paginii folosite pentru cadru
o NAME - Aici trebuie scris numele de identificare al cadrului.
o MARGINWIDTH - Atribut optional, valoare in pixeli. Determina spatiul
orizontal dintre continutul cadrului si marginea acestuia
o MARGINHEIGHT - Atribut optional, valoare in pixeli. Determina spatiul
vertical dintre continutul cadrului si marginea acestuia.
o SCROLLING - Afiseaza un Scroll Bar in cadru. Valori posibile: YES
(permite afisarea Scroll Bar-ului), NO (nu va fi prezentat nici un Scroll Bar) si
AUTO (browser-ul va decide daca este nevoie de Scroll Bar. Aceasta valoare
este cea mai indicata)
o NORESIZE - Optional, impiedica utilizatorul sa modifice marimea cadrului,
prin selectarea marginii acestuia si mutarea in stnga sau dreapta ori sus sau
jos.

Mai jos puteti vedea cum poate fi creata o pagina HTML care sa contina doua cadre, cel din
stnga ocupnd 23% din spatiul paginii iar cel din dreapta 77%
<HTML>
<HEAD>
<TITLE> TITLU PAGINII </TITLE>
</HEAD>
<FRAMESET COLS="23%,77%">
<FRAME SRC="doc1.htm" NAME="left" SROLLING="NO">
<FRAME SRC="doc2.htm" NAME="right" SROLLING="YES">
</FRAMESET>
<BODY>
</BODY>
</HTML>
De asemenea se poate crea un design de cadre cu o combinatie de linii si coloane.

In acest caz, un al doilea element "<FRAMESET>" va fi scris in locul elementului


"<FRAME>" care descrie a doua linie. Al doilea element <FRAMESET> va divide spatiul
ramas in doua coloane. Pentru aceasta, al doilea element "<FRAMESET>" trebuie urmat de
inca doua elemente "<FRAME>"
- Pentru o mai buna intelegere puteti studia exemplu de mai jos, care creaza o pagina ce
contine trei cadre:
<HTML>
<HEAD>
<TITLE> TITLU PAGINII </TITLE>
</HEAD>
<FRAMESET COLS="120,*">
<FRAME SRC="baner.htm">
<FRAMESET COLS="120,*">
<FRAME SRC="Meniu.htm" NAME="meniu">
<FRAME SRC="Continut.htm" NAME="date">
</FRAMESET>
</FRAMESET>
<BODY>
</BODY>
</HTML>

2. Atributul target
Cand sunt create link-uri care sunt folosite pentru a deschide pagini in cadre, este nevoie de
specificarea unui atribut in eticheta de link "<a>" numit target, acesta spune browser-ului in
ce cadru sa deschida pagina.
Atributul target foloseste ca valoare textul din atributul NAME al elementului FRAME in
care se va deschide noua pagina.
De exemplu, daca avem un link in Meniu.htm care vrem sa deschid pagina Doc3.htm in
spaiul in care se afla celalat cadru, de exemplu Continut.htm; codul HTML pentru link va
arata astfel in Meniu.htm:

<a href="Doc3.htm" target="numele cadrului Continut.htm"> Numele link-ului


</a>

- daca nu se specifica atributul TARGET , pagina se va deschide in cadrul curent


- atributul TARGET trebuie sa aiba acelasi nume specificat in codul HTML, ca si atributul
NAME din FRAME-ul in care se doreste afisarea paginii.
Special Target:

Sunt 4 nume speciale de TARGET, care nu pot fi asociate cu atributul NAME. Fiecare
are o functie speciala.

target="_top"
o - acesta va ncarca link-ul in toata fereastra browser-ului, disparnd astfel
cadrele.

target="_blank"
o - acesta va ncarca link-ul intr-o noua fereastra de browser, astfel ramanand
deschisa si vechea fereastra.

target="_self"
o - acesta va ncarca link-ul in aceeasi fereastra de unde a fost actionat.

target="_parent"
o - cadrul "_parent" este cadrul anterior de la care a fost deschis noul cadru, daca
acesta nu exista atunci link-ul se va deschide in actuala fereastra de browser.

3. Adaugarea cadrelor iframe


Pentru crearea unui cadru cu "<iframe>" puteti folosi, ca exemplu, urmatoarea sintaxa
(aceasta se adauca in sectiunea BODY, in locul unde doriti sa apara frame-ul):

<iframe src="url_pagina" width="600" height="200" align="center"


scrolling="yes" frameborder="0" name="nume_frame"> </iframe>

- Unde "iframe" este elementul principal care indica adaugarea unui frame in pagina.
- "url_pagina" e adresa paginii care va fi incarcata in iframe, "width" si "height" reprezinta
lungimea respectiv inaltimea cadrului (exprimata in procente sau pixeli), "scrolling"
reprezinta permisiunea de derulare a paginii din cadru (yes sau no), "frameborder" specifica
daca va fi sau nu afisata o margine (bordura) pentru cadru (1=da, 0=nu), iar "nume_frame"
este numele cadrului (necesar pentru atributul "TARGET" in link-uri sau cand frame-ul este
folosit de JavaScript).

Crearea formularelor
De cele mai multe ori formularele HTML sunt create pentru a fi folosite impreuna cu alte
programe si scripturi web, cum sunt PHP, JavaScript si altele.

1. Tag-ul FORM
Pentru a crea un formular in HTTML se folosete elementul <form> ... </form>, in cadrul
acestuia se vor adauga celelalte elemente specifice.
Elementul <form> ... </form> nu contine atribute pentru format, foloseste insa urmatoarele
atribute:

action - aici se scrie adresa URL a unui script de pe server (de obicei PHP sau CGI),
program care trebuie sa accepte datele din FORM , le proceseaza si trimite napoi
raspunsul la browser.

method - aici putem scrie get , sau post. Aceste valori specifica ce metoda HTTP va
fi folosita pentru a trimite continutul formularului la server.

enctye - determina mecanismul folosit pentru a codifica continutul transmis din


formular.

name - Este numele formularului, folosit de scripturi VB (Visula Basic) sau JavaSript.

target - Este tinta cadrului (frame) unde pagina va fi vizualizata, dupa transmiterea
datelor din form.

2. Elementele de formular
In continuare sunt prezentate restul elementelor de formular care sunt folosite pentru a crea
diferite campuri, casete, butoane in pagina web, necesare pentru a aduna datele care vor fi
trimise la aplicatie pe server.
Cele mai multe se creaza prin atributul type al elementului <input> ... </input>
Proprietatile elementului <input> ... </input>

type - tipul de FORM folosit (caseta text, buton si altele ...)

name - numele elementului respectiv de formular, folosit de scripturile la care sunt


trimise datele

value - datele (valoarea) asociate acelui element de formular si care sunt trimise,
impreuna cu numele, catre scripturi (PHP, CGI, JavaScript)

size - specifica numarul de caractere care dau lungimea zonei de text

maxlength - numarul maxim de caractere acceptate

checked - specifica daca un buton sau alta forma va fi initial selectata (bifata).

readonly - folosit pentru campuri de tip text, impedica modificarea valorii (textului)
din acel camp

disabled - impedica folosirea campului care are aceasta proprietate. Va fi vizibil dar
nu va putea fi folosit, datele acestuia nu vor fi trimise din formular la vreun script.

Casete de text

- este folosit pentru a crea in pagina un camp pentru text (cu o singura linie).

- Codul este <input type="text"></input>

In browser va apare:

- Acest element foloseste urmatoarele atribute:


o type - text
o name - numele casutei de text, folosit de scriptul la care sunt trimise datele
o value - va reprezenta propriul context ca valoare aleasa. Un sir de text care
apare in casuta de text
o size - specifica numarul de caractere care dau lungimea casutei de text (default
20)
o maxlength - numarul maxim de caractere acceptate sa fie adaugate de
utilizator

Camp textarea

- "textarea" este un element ce creaza un camp in pagina, in care utilizatorul poate


adauga mai multe linii de text.

- Codul este <textarea></textarea>


In browser va apare:

- Acest element foloseste urmatoarele atribute:


o name - numele campului de text, folosit de scriptul la care sunt trimise datele
o rows - numarul de linii a zonei de text
o cols - numarul de coloane a zonei de text
o wrap - standard este OFF. Dar poate avea valorile : "VIRTUAL" sau
"PHYSICAL", astfel ca textul wraps in browser sa fie prezentat exact cum
este scris de utilizator.

Casete pentru parole

- "password" este folosit pentru a permite adaugarea de parole. Caracterele adaugate


in aceasta caseta nu sunt afisate cu valoarea lor reala, pentru a nu se vedea parola
scrisa.

- Codul este <input type="password"></input>


In browser va apare:

- Acest element foloseste urmatoarele atribute:


o type - password
o name - numele casutei pentru parole, folosit de scriptul la care sunt trimise
datele
o value - de obicei nu este adaugat. Daca este scris, va reprezenta parola default
din acea caseta.
o size - specifica numarul de caractere care dau lungimea casutei pt. adaugarea
parolei (default 20)
o maxlength - numarul maxim de caractere acceptate sa fie adaugate de
utilizator

Casete de formular ascunse

- "hidden" este folosit pentru a adauga in formular date care sa nu fie vizibile in
browser si care sunt trimise la scripturi impreuna cu celelalte date din formular.

- Codul este <input type="hidden"></input>

- Acest element foloseste urmatoarele atribute:


o type - hidden
o name - numele casutei ascunse, folosit de scriptul la care sunt trimise datele
o value - valoarea care se doreste sa fie transmisa prin acea caseta ascunsa.

Check box

- este folosit pentru adaugarea mai multor optiuni pe care utilizatorul le poate alege
(oricate din ele) prin bifarea lor

- Codul este <input type="checkbox"></input>


In browser va apare:

- Acest element foloseste urmatoarele atribute:


o type - checkbox
o name - numele casutei checkbox, folosit de scriptul la care sunt trimise datele
o value - valoarea casetei checkbox respective, care poate fi selectata (bifata)
o checked - daca este adaugat acest atribut, caseta checkbox respectiva este
selectata (bifata).

Radio button

- este folosit pentru adaugarea mai multor optiuni dintre care utilizatorul poate alege
una singura

- Codul este <input type="radio"></input>


In browser va apare:

- Acest element foloseste urmatoarele atribute:


o type - radio
o name - numele casutei radio, folosit de scriptul la care sunt trimise datele
o value - valoarea casetei radio respective, care poate fi selectata (bifata)
o checked - daca este adaugat acest atribut, caseta radio respectiva este selectata
(bifata).

Casete pentru upload

- "file upload" este folosit pentru a permite utilizatorului sa incarce alte documente pe
serverul web. Aceasta caseta este insotita de un buton "Browse" prin care se alege
documentul care va fi transferat pe server. (upload-ul se face tot prin intermediul unui
script (PHP, CGI)

- Codul este <input type="file"></input>


In browser va apare:

- Acest element foloseste urmatoarele atribute:


o type - file
o name - numele casutei upload, folosit de scriptul la care sunt trimise datele
o size - specifica numarul de caractere care dau lungimea casutei upload.

Buton simplu

- acesta este folosit cu JavaScript sau VBScript pentru a efectua o actiune cnd este
apasat

- Codul este <input type="button" value="Buton"></input>


In browser va apare:

- Acest element foloseste urmatoarele atribute:


o type - button
o name - numele butonului, necesar pentru a fi folosit de script
o value - textul care apare pe buton.

Buton Submit

- acest element face ca prin apasarea lui browser-ul sa trimita numele si valoarea
tuturor celorlalte elemente din formular la scriptul de pe server

- Codul este <input type="submit" value="Trimite"></input>


In browser va apare:

- Acest element foloseste urmatoarele atribute:


o type - submit

o name - numele butonului, poate fi folosit de scriptul la care se trimit datele


o value - textul care apare pe buton.
Imagine pentru buton Submit

- permite aplicarea unei imagine in locul butonului Submit standard

- Codul este <input type="image" src="locatie_imagine"></input>

- Acest element foloseste urmatoarele atribute:


o type - image
o name - numele butonului, poate fi folosit de scriptul la care se trimit datele
o src - locatia imaginii folosite.

Buton Reset

- permite utilizatorului sa stearga toate datele pe care le-a scris in celelalte elemente
din formular

- Codul este <input type="reset" value="Sterge"></input>


In browser va apare:

- Acest element foloseste urmatoarele atribute:


o type - reset
o value - textul care apare pe buton.

Elemente select

- pentru acest element se foloseste tag-ul "<select></select>", care formeaza o lista,


un meniu, cu date ce pot fi selectate.

- Atributete elementului "<select>" sunt:


o name - numele acestui element, necesar pentru a fi folosit de scriptul la care
sunt trimise datele

o size - seteaza inaltimea elementului Select, care reprezinta si numarul de


optiuni din lista care vor fi vizibile initial
o multiple - prezenta acestui atribut specifica faptul ca utilizatorul poate selecta
mai multe optiuni.

- "<select></select>" este folosit impreuna cu elemente "<option> </option>" care


reprezinta lista elementelor ce sunt adaugate si afisate in lista de selectare.

- <option> </option> foloseste doua atribute:


o selected - cand acesta este adaugat, optiunea respectiva este selectata cnd
pagina web este initial incarcat. Cand sunt adaugate mai multe optiuni, este
indicat folosirea acestui atribut doar cu una singura.
o value - specifica valoarea variabilei numita in optiunea respectiva (necesara
pt. scriptul care va primi datele).

- sunt doua tipuri de elemente Select, unde diferenta o face folosirea atributului SIZE

- Cele doua tipuri de elemente Select sunt:

1. Drop Down List (Lista de derulare)


o - Codul este:
<select name="select">
<option>Optiune 1</option>
<option>Optiune 2</option>
</select>
o - unde "name" este atributul care defineste numele acestui tag SELECT, iar
"<option>" impreuna cu "Optiune 1" (si 2) reprezinta elementele din lista de
selectare.
In browser va apare:

2. List Box

- Codul este:
<select name="select" size="4">
<option>Optiune 1</option>
<option>Optiune 2</option>
</select>

- unde "name" este atributul care defineste numele acestui tag SELECT, atributul
"size" determina inaltimea elementului select care determina si numarul de optiuni
vizibile initial, iar "<option>" impreuna cu "Optiune 1" (si 2) reprezinta elementele
din lista de selectare.
In browser va apare:

- Toate aceste elemente trebuie incadrate in tag-ul "<form> ... </form>"!

Elemente speciale meta, embed, marquee,


object
Codul HTML contine si anumite elemente speciale, unele folosite pentru optimizarea paginii
in vederea unei cat mai bune indexari in motoarele de cautare sau altele pentru adaugarea de
aplicatii audio si video ori alte elemente in pagina.

1. Elemente pentru optimizarea indexarii paginii


Aceste elemente de optimizare se adauga in sectiunea HEAD a documentului HTML.
Cel mai important este tag-ul <title></title>
Alte elemente importante pentru motoarele de cautare sunt cele META, (numite si "meta taguri), acestea au 2 atribute: name (care determina tipul meta tag-ului) si content (care
determina continutul meta tag-ului).
In continuare sunt prezentate exemple de meta tag-uri care sunt indicate sa fie adaugate in
fiecare pagina HTML:
<meta content="text/html; charset=UTF-8" http-equiv=Content-Type>

- indica browserului ca este un fisier HTML

- charset stabileste tipul de caractere (in general se foloseste ISO-8859-1 sau UTF-8),
dar exista si altele.

<meta name="description" content="O fraza care descrie pe scurt continutul paginii">

- in cazul unei cautari dupa cuvinte-cheie, motorul de cautare ne da o lista de pagini;


pentru fiecare pagina (site) din lista apare titlul ei (dat cu marcajul TITLE) urmat de o
fraza (cea de la name="description" content="o fraza care descrie ..."); daca nu avem
in marcajul META acea fraza, motorul va indexa dupa prima fraza din pagina; tot ea
va fi data la o eventuala cautare.

- textul adaugat cu acest tag pentru descriere are prioritate inaintea frazelor din
continut. (folositi maxim 40, 50 caractere).

<meta name="keywords" content="lista, de cuvinte, separate, prin, virgula">

- motoarele de cautare tin cont de cuvintele din meta "keywords" in momentul


indexarii site-ului pentru atunci cand sunt afisate rezultate de cautari. (folositi maxim
15-20 cuvinte).

<meta name="author" content="numele dvs., e-mail, etc">

- acesta nu este neaparat necesar, dar nu strica sa-l folositi. Arata autorul
documentului.

Recomandare: Cuvintele din tag-ul <title> ... </title> este bine sa se regaseasca si in meta
tag-urile "keywords", "description" cat si in titlurile din continutul paginii.
Un alt meta tag care este cateodata necesar, dar nu are legatura cu motoarele de cautare, este
"Refresh", acesta are urmatoarea forma:
<meta http-equiv="Refresh" content="4;url=http://www.nume_site/pagina">

- acesta determina browser-ul sa incarce o noua pagina, cea care este adaugata la urlul din acest tag (aici http://www.nume_site/pagina), dupa un anumit numar de secunde
(aici 4). Practic, face un redirect.

2. Adaugarea de sunet la o pagina HTML


Pentru a adauga sunet intr-o pagina web, puteti folosi elementele <embed> sau <bgsound>:
1. <bgsound></bgsound> - introduce un background (fundal) audio in pagina, are
urmatoarele atribute:

src - Defineste locatia fisierului audio folosit (midi .au sau wav)

loop - defineste de cate ori se va repeta sunetul

delay - defineste timpul dintre repetari

title - Textul care va descrie sunetul.

Exemplu:
<bgsound src="sunet.midi" loop="3" title="titlul melodiei" derlay="5">
2. <embed></embed> - afiseaza o consola pentru sunet, are urmatoarele atribute:

src - Defineste locatia fisierului audio folosit (midi .au sau wav)

controls - ofera posibilitatea alegerii mai multor controale care includ: console,
console mici, butoane de play si altele

autostart - cand este TRUE sunetul incepe in timp ce sunetul este descarcat de
browser

hidden - cand este TRUE va ascunde controalele, standard este FALSE

loop - defineste de cate ori se va repeta sunetul

volume - seteaza volumul sunetului (sonorul)

height - inaltimea in pixeli a consolei

width - lungimea in pixeli a consolei.

Exemplu:
<embed src="sunet.midi" width="145"height="60" autostart="truie" volume"100"
controls="console" hidden="false">
- Tag-ul "<embed>" poate fi folosit si pentru afisarea de imagini video, care au extensiile
".movs", ".mpeg" sau ".avi", recomandat este ".movs". Se adauga similar ca si sunetul, la
"src" scriti calea catre fisierul video. Diferenta e ca nu trebuie folosit atributul "hidden" iar
pentru "width" si "height" dimensiunile nu trebuie sa fie mai mici decat dimensiunile in care
este salvat fisierul video.
- Totusi, afisarea de imagini video necesita mai mult timp deoarece fisierele video au
dimensiuni destul de mari.
-- "<embed>" se foloseste si pentru adaugarea de imagini flash (cu extensia ".swf"), pentru
aceasta este incadrat in alt element, <object> </object>
-- Iata un exemplu de cod prin care puteti adauga imagini flash in pagina web:
<object width="580" height="400">
<param name="movie" value="fisier.swf">
<embed src="fisier.swf" width="580" height="400">
</embed>
</object>
Unde "width" si "height" sunt dimensiunile cadrului in care este afisata imaginea flash, iar la
atributele "value" si "src" se scrie calea catre fisierul ".swf" (trebuie scrisa aceeasi cale la
ambele atribute).
- Afisarea in pagina a elementelor cu EMBED necesita folosirea unui plug-in, care de cele
mai multe ori, daca acesta nu este deja instalat, este ceruta automat incarcarea lui de catre
browser.

3. Elemente de animatie text


HTML are un tag special, <marquee> </marquee>, prin care puteti crea un efect de miscare
a unui text (sau imagine) care este incadrat de a cest element.
Are urmatoarele atribute:

loop - defineste de cate ori se va misca textul

height - inaltimea in pixeli a zonei in care se misca textul

width - lungimea in pixeli a zonei in care se misca textul

bgcolor - culoarea zonei in care se misca textul

direction - directia de miscare (left, right, up, down) - (stanga, dreapta, sus, jos)

behavior - defineste cum se va misca textul (scroll, slide, alternate)

scrolldelay - seteaza numarul, in milisecunde, intre refreshuri de miscare.

Exemplu de miscare pe orizontala


<marquee behavior="alternate" bgcolor="#00ffff" direction="right">Marquee
text</marquee>
In pagina va arata asa:

Iata un alt exemplu unde miscarea se face pe verticala:


<marquee behavior="alternate" bgcolor="#00ffff" direction="up" width="100"
height="100">Marquee text</marquee>
In pagina va arata asa:

- In loc de text poate fi folosit si o imagine, inlocuind textul (aici "Marquee text") cu tagul
"<img> pentru imagine.

4. Includerea unei pagini HTML externe


In afara de modalitatea cu folosirea tag-ului <iframe> pentru afisarea in pagina web HTML a
continutului din alta pagina HTML
Ex.: <iframe src="url_pagina.html" width="600" height="200" align="center"
scrolling="yes"> </iframe>
- exista si o alta solutie, data de tag-ul <object> folosit cu atributele "data" si "type".
Urmatorul cod HTML este sintaxa generala de afisare intr-o pagina web a continutului
HTML aflat in alta pagina externa:

<object data="adresa_pagina_externa" type ="text/html" width="600" height="400">


</object>
- Avantajul utilizarii uneia din aceste 2 metode, pentru cei care fac site-uri doar cu HTML,
este faptul ca acelasi continut HTML poate fi inclus in mai multe pagini din site, fiind scris o
singura data. De exemplu, in cazul unui Meniu ce trebuie afisat in toate paginile site-ului;
codul acestuia poate fi scris intr-un fisier special ("meniu.html") apoi, cu una din formulele de
mai sus (tag-ul "<iframe>" sau "<object>") se adauga in fiecare fisier al paginilor, iar la o
eventuala modificare a meniului se va face doar in codul acestuia din "meniu.html".
Stiluri CSS in HTML

Cu HTML 4.0 au aparut specificatiile pentru modele de stiluri, cunoscute ca Modele de


Stiluri in Cascada (Cascading Style Sheets - CSS). Acestea ajuta la afisarea grafica si
incadrarea continutului in pagina.
Pana la acea data, forma, culoarea si marimea textului puteau fi date cu instructiunea "font" si
cu atributele sale: "face", "color", "size".
Modelele de stiluri pot fi aplicate aproape oricarei etichete HTML, folosind proprietati si
valori specifice codului CSS, unele din ele sunt prezentate in tabelul de jos al paginii.
Modelele de stiluri pot fi aplicate in mai multe moduri:

1. Intern - direct in eticheta HTML

- Pentru adaugarea unui STYLE intern la un element se foloseste atributul


style urmat de proprietati si valori, folosind urmatoarea sintaxa:
o

<element style="proprietate:valoare;
proprietate:valoare;"></element>

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

In pagina va apare
Exemplu h4

2. In antetul (header-ul) fisierului

- In acest caz se adauga in sectiunea HEAD a documentului HTML


urmatoarea sintaxa <style type="text/css"> ... </style>. Aceasta
spune browser-ului ca sunt adaugate elemente de stil CSS.

- Aceasta metoda este utila cand se doreste folosirea acelorasi stiluri


pentru mai multe elemente din pagina astfel sunt scrise o singura data si
nu la fiecare element.

- Proprietatile si valorile de sti CSS se introdul in acest element STYLE,


dupa cum puteti vedea in exemplul urmator:
<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 pagina vor avea culoarea
albastra si vor fi subliniate.

- Se foloseste (optional) "<!-- ... -->" pentru browserele care nu recunosc


elementul "<style>" si astfel il ignora.

3. Extern

- Aici proprietatile si valorile pentru diverse stiluri sunt specificate intr-un


fisier extern special, de obicei cu extensia "css" (pe care il putem construi
cu un editor de simplu texte gen Notepad).

- Avantajul folosirii fisierelor externe CSS este faptul ca aceleasi coduri de


stil pot fi folosite de mai multe pagini din site, chiar tot site-ul, fiind scrise
o singura data. In plus ajuta la micsorarea ca marime (in bytes) a
documentului HTML care astfel se incarca mai repede.

- In fisierul extern CSS se scriu direct elementele cu proprietatile si valorile


dorite, NU se mai adauga eticheta "style".

Exemplu de model pentru creare unui fisier ".css" :

Se scrie intr-o pagina noua, deschisa cu NotePad, urmatoarele, si se


salveaza fisierul cu extensia ".css"
a:link {
color:#0000ff;
text-decoration:none;
font-weight:normal;
font-size:15px;
font-family: Arial;
}

a:visited {
color:#008080;
text-decoration:none;
font-weight:normal;
font-size: 15px;
font-family: Arial;
}
a:active {
color:#b54090;
text-decoration:underline;
}
a:hover {
color:#b54090;
text-decoration:underline;
font-weight:normal;
font-size: 15px;
font-family: Arial;
}
p{
font-weight: normal;
font-size: 11pt;
line-height: 12pt;
text-indent: 20px;
font-family: Arial;
}

Pentru a adauga acest stil CSS intr-o pagina web, adaugati in sectiunea
HEAD a documentului HTML care va folosi acel fisier cu stiluri, (intre
<head> ... </head>) urmatoarea comanda:
o

<link href="fisier.css" rel="stylesheet" type="text/css">

- unde la "href" se scrie calea si numele fisierului css folosit.

Se poate face chiar ca un anumit stil sa poata fi aplicat numai unei singure
etichete HTML, iar altul sa poata fi aplicat mai multor etichete HTML de tipuri
diferite. Pentru aceasta se foloseste atributul id sau class in interiorul etichetelor
HTML la care vrem sa aplicam un anumit stil.
Diferenta dintre id si class este faptul ca se poate folosi acelasi atribut "class"
pentru mai multe elemente HTML, pe cand acelasi "id" se foloseste numai pentru
un singur element HTML.
Exemplu pentru "class"

<html>
<head>
<title>Titlul</title>
<style type="text/css">
<!-.cuvant {
color:#1111fe;
dext-decoration:underline;
}
-->
</style>
</head>
<body>
<h2 class="cuvant">Text ...</h2>
<h3 class="cuvant">Alt text ... </h3>
</body>
</html>
- In exemplu de sus, stilul creat poate fi folosit doar de elementele unde vom
adauga comanda class="cuvant", celelalte elemente nefiind afectate.

Important: selectorul (aici "cuvant") in STYLE trebuie sa inceapa


cu punct (.)

Exemplu pentru "id"


<html>
<head>
<title>Titlul</title>
<style type="text/css">
<!-#idh {
color:#fe1111;
dext-decoration:overline;
text-align:center;
}
-->
</style>
</head>
<body>
<h2 id="idh">Text ...</h2>
<h2>Alt text ... </h2>
</body>
</html>
- In acest exemplu, stilul creat pentru "idh" va fi folosit doar pentru primul
element "h2" care contine 'id="idh"'

Important: Pentru stilurile definite de ID, selectorul (aici "idh")


trebuie sa inceapa cu #.

Incercati singuri aceste exemple pentru a vedea rezultatul.


In tabelul de mai jos sunt cateva atribute (sau proprietati) care pot fi modificate
cu STYLE
Atribut

Descriere

Valori

backgroun
imagini sau culori de fundal
d

URL-ul (imaginii) sau culori date


prin nume sau valoare RGB

Color

nume sau valoare RGB

culoarea textului

font-family tipul fontului

Numele fontului sau al familiei de


fonturi

font-size

dimensiunea fontului

data in puncte(pt), inch(in),


centimetri(cm), pixeli(px)

font-style

text cursiv

normal, italic

grosimea fontului

extra-light, light, demi-light,


medium, demi-bold, bold, extrabold

fontweight

data in puncte(pt), inch(in),


distanta dintre liniile de baza ale
line-height
centimetri(cm), pixeli(px),
randurilor
procent(%)
margin-left

distanta fata de marginea din


stanga a paginii

data in puncte(pt), inch(in),


centimetri(cm), pixeli(px)

marginright

distanta fata de marginea din


dreapta a paginii

data in puncte(pt), inch(in),


centimetri(cm), pixeli(px)

distanta fata de textul precedent


data in puncte(pt), inch(in),
margin-top sau fata de marginea de sus a
centimetri(cm), pixeli(px)
paginii
text-align

alinierea textului

left(stanga), center(centru),
right(dreapta), justify

textevidentierea textului
decoration

none(nimic), underline(subliniat),
italic(cursiv), line-through(taiat)

text-indent

distanta primului rand fata de


marginea din stanga

data in puncte(pt), inch(in),


centimetri(cm), pixeli(px)

borderstyle

tipul chenarului

none, groove, dotted, dashed,


solid, double, ridge, inset, outset

borderwidth

grosimea chenarului

data in puncte(pt), inch(in),


centimetri(cm), pixeli(px)

bordercolor

culoarea chenarului

nume sau valoare RGB

72 pt=1 inch = 25,4 mm;


un font de dimensiunea 13pt inseamna ca sunt 13 puncte intre partea
superioara a literei N sau h si partea inferioara a literei y sau j

- Pentru aplicarea unui stil css asupra unei portiuni dintr-un text, se foloseste
eticheta <span> </span>, ca in exemplu urmator:
O fraza <span class="cls"> cu orice text</span> si caractere.
- in acest exemplu se pot aplica elemente de stil css clasei (.cls) care vor afecta
doar portiunea de text inclusa intre tag-ul "<span>".
DIV si SPAN

Tag-urile <div></div> si <span></span> nu au efecte importante daca sunt folosite singure.


- Tag-ul DIV creaza sectiuni de blocuri in pagina, al caror forma si grafica de continut pot fi
manipulate pentru fiecare separat. Are doar un singur atribut HTML, align (pt. aliniere pe
orizontala) care poate avea urmatoarele valori: left (stanga), right (dreapta), center (centru),
justify (distanta textului fata de margini egala).
- Tag-ul SPAN creaza posibilitatea modificarii separate a unei portiunii dintr-un context,
putand fi folosit si ca o "classa" cu CSS. Singur nu are nici un efect vizual poropriu si nu
foloseste nici un atribut HTML special.
Chiar daca folosite singure, DIV si SPAN nu au nici un efect major, in combinatie cu CSS pot
crea aspecte grafice importante. Pentru aceasta, ambele pot folosi atributul style (cu
proprietati CSS) ori atributele id sau class ca identificator pentru stiluri CSS.
1. Tag-ul DIV

Tag-ul <div></div> este unul din cele mai folosite elemente HTML, aceasta deoarece in
combinatie cu proprietati CSS poate crea efecte grafice deosebite, iar in interiorul lui pot fi
incluse oricare elemente HTML: tabele, formulare, marcatori, linii sau alte DIV-uri. Cadrul in
care acestea sunt adaugate poate avea propriul fundal (background), lungime, inaltime si
margini cu diferite linii.
Iata un exemplu in care avem 2 div-uri, unul contine un formular iar celalalt o lista
"<ul></ul>", fiecare DIV cu proria culoare de fundal, dimensiuni stabilite si margini diferite.
<div style="width:250px; background:#aaee88; border:1px solid blue;">
<form action="" method="post">
Nume: <input type="text"></input><br>
E-mail:<input type="text"></input><br>
<input type="submit" value="Trimite"></input>
</form>
</div>
Alt DIV
<div style="width:180px; background:#88aafe; border:5px outset #888888;">
<ul>
<li>Linie 1</li>
<li>Linie 2</li>
<li>Linie 3</li>
</ul>
</div>
- In atributul "style" sunt specificate proprietatile CSS care stabilesc aspectul
grafic al fiecarui DIV (lungime in pixeli, fundal si bordura).
Acest cod va afisa intr-o pagina web urmatorul rezultat:

Nume:

E-mail:

Alt DIV

Linie 1

Linie 2

Linie 3

Un alt aspect important este si faptul ca putem pozitiona continutul din interiorul
tag-ului <div> </div> oriunde in pagina, folosind proprietati CSS precum:

position - care poate lua valorile: static, relative, fixed sau absolute
(pt. mai multe detalii vezi Pozitionare CSS).

margin - care stabileste distanta dintre marginea cadrului sectiunii


(blocul) DIV si elementele din jurul lui (pt. mai multe detalii vezi Margini si
chenare CSS).

Iata un exemplu in care, prin folosirea mai multor DIV-uri pozitionate suprapus,
putem afisa in pagina un titlu cu aspect grafic deosebit. Codul este urmatorul:
<div style="position:relative; font-size:21px;">
<div style="position:absolute; margin-top:-1; margin-left:-2; color:white;">Titlu
- Exemplu</div>
<div style="position:absolute; margin-top:1; margin-left:2; color:black;">Titlu Exemplu</div>
<div style="position:absolute; margin-top:0; margin-left:0; color:silver;">Titlu Exemplu</div>
</div>
In acest exemplu avem un prim DIV cu atributul "style" in care avem o
proprietate de pozitionare relativa (pt. a pozitiona toate celelalte elemente pe
care el le incadreaza dupa contextul scris anterior) si o alta proprietate pentru
marimea textului. In interiorul acestui DIV avem alte 3 div-uri, pozitionate absolut
si care incadreaza fiecare cate un text identic. Prin pozitionarea absoluta div-urile
se suprapun, la o distanta stabilita de proprietatile "margin-top" si "margin-left",
iar prin culoare diferita (cu proprietatea "color") data textului din fiecare "div" va
apare in pagina web urmatorul rezultat:

- Pentru a folosi tag-urile DIV eficient si cu rezultate deosebite este


necesar sa cunoasteti proprietatile CSS de baza (pentru fonturi,
pozitionare, margini, borduri, background) pe care le puteti invata la
Cursul CSS din acest site.
2. Tag-ul SPAN

Cu tag-ul <span></span> puteti adauga stiluri grafice unei anumite portiuni dintr-un context.
Pentru aceasta trebuie folosit impreuna cu proprietati CSS care pot fi adaugate printr-un
atribut "style" in interiorul etichetei "<span>" (sau in foi de stil).
Pentru a intelege mai bine, iata un exemplu in care se scoate in evidenta anumite cuvinte
dintr-un text. Pentru aceasta incadram cuvintele respective intr-un tag SPAN caruia ii
adaugam proprietatile dorite, ca in exemplul urmator.
Aceasta este o lectie din <span style="background:#88fe88; fontweight:bold;">Cursul HTML</span> de pe MarPlo.net.

- Am adaugat portiunea din context (aici textul "Curs HTML") intr-un tag SPAN
pentru a-i putea aplica proprietatile grafice dorite si care nu afecteaza restul
continutului.
- Astfel, prin proprietatile adaugate in "style" (background:#88fe88; si fontweight:bold;), in pagina web va fi afisat textul in felul urmator:
Aceasta este o lectie din Cursul HTML de pe MarPlo.net.
Tag-ul SPAN poate fi folosit si ca o classa pentru CSS. Astfel, proprietatile
adaugate elementului "span" intr-o foaie de stil vor fi transferate tuturor
elementelor din pagina care sunt incadrate in tag-uri "<span></span>".
Iata un exemplu
<html>
<head>
<title>Titlul</title>
<style type="text/css">
span {
border:2px solid red;
padding:1px;
color:#1111fe;
}
</style>
</head>
<body>
<h4>Exemplu de <span>text cu eticheta SPAN</span> in interiorul
frazei.</h4>
<ul>
<li>Linia 1</li>
<li><span> Linie 2, in span </span></li>
<li>Linia 3</li>
<li><span> Linie 4, in span </span></li>
<li>Linia 5</li>
</ul>
</body>
</html>
- Observati cum a fost adaugat elementul "span" in tag-ul "<style> </style>" din
sectiunea HEAD a codului HTML. Acest element face referire la toate tag-urile
"<span></span>" din document si le transmite aceleasi proprietati.
- Acest cod va afisa intr-o pagina web urmatorul rezultat:
Exemplu de text cu eticheta SPAN in interiorul frazei.

Linia 1

Linie 2, in span

Linia 3

Linie 4, in span

Linia 5

3. Diferenta dintre DIV si SPAN

- Diferenta dintre DIV si SPAN este faptul ca DIV incadreaza o sectiune din document sub
forma unui bloc iar SPAN incadreaza o portiune din context sub forma de linii.
Iata un exemplu din care se poate intelege mai bine, atribuim aceeasi proprietate grafica
(bordura rosie) unui tag DIV si 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>
- In pagina web va apare

Fraza pe mai multe linii,


continua cu linia a doua,
se termina cu linia a treia.
- Acum cu SPAN:
Fraza pe mai multe linii,
continua cu linia a doua,
se termina cu linia a treia.
- Observati diferenta, modul in care este afisata bordura. Pentru DIV aceasta
incadreaza exteriorul sectiunii (blocul) div-ului, iar pentru SPAN bordura este
afisata pe fiecare linie.
- De aceea este indicata folosirea tag-ului "<span></span>" pentru continut din
interiorul unei linii.

- Cand aveti mai multe elemente <div></div> si <span></span> in pagina, este indicat
folosirea atributului "id" sau "class". Acestora le acordati proprietati CSS o singura data in
sectiunea HEAD sau intr-un fisier CSS extern. Este mai eficient decat sa scrieti in fiecare
"<div>" si "<span>" cate un atribut "style".
Pentru mai multe detalii despre "ID" si "CLASS" folosite cu CSS, puteti studia prima lectie
de la Cursul CSS, Scriere cod CSS.
Tutorial HTML5

Noile caracteristici adaugate in HTML5 sunt bazate pe HTML, CSS, DOM, si JavaScript; si
reduc necesitatea plugin-urilor externe (precum Flash).
Despre sintaxa HTML5

Sintaxa HTML5 este compatibila cu HTML4 si XHTML.


- Puteti inchide elementele ce au un singur tag (META, BR, HR, INPUT, IMG) cu slash, <tag
/>, precum in XHTML; sau puteti sa le lasati fara sa le adaugati slash, <tag>.
- Puteti folosi litere mici, sau /si litere mari, pentru numele tag-urilor si atribute.
Astfel, toate variantele urmatoare sunt valide HTML5:
<meta charset="utf-8">
Sau, inchis cu slash:
<meta charset="utf-8" />
<img src="image.jpg" alt="Text oarecare">
Sau:
<img src="image.jpg" alt="Text oarecare" />
Sau, cu litere mari:
<IMG src="image.jpg" ALT="Text oarecare">
<br>
Sau:
<BR>
Sau:
<br />

- In HTML5 puteti alege sa specificati sau nu atributul type in elementele


<script>, and <style>, acesta a devenit optional:
<script type="text/javascript"><!-// Cod JavaScript
--></script>
Sau:
<script><!-// Cod JavaScript
--></script>
<style type="text/css">
/* Cod CSS */
</style>
Sau:

<style>
/* Cod CSS */
</style>

Toate aceste variante sunt valide in HTML5, dar, ca o buna practica, este
indicat sa folositi sintaxa XHTML; adica sa folositi litere mici, sa adaugati slash-ul
de inchidere, si sa specificati atributul "type" in tag-urile <script>, si <style>.
Structura HTML5
Doctype in HTML5 e mai simplu:
<!doctype html>

Tag-ul Meta charset e mai simplu:


<meta charset="utf-8">

Div-urile sunt acum folosite petru stil si design, nu mai sunt necesare pentru
structura; HTML5 include mai multe elemente noi pentru structurare, care ajuta
la definirea si organizarea diferitelor parti in document.
Acestea sunt principalele elemente de structura care sunt folosite mai des in
HTML5:

<header> - e folosit pentru a defini titluri (si sub-titluri), sau meniu de


navigare in site. Poate fi adaugat direct in BODY, sau in <article>, ori
<section>.
- De obicei in acest element se adauga tag-uri H1, H2, Hx, sau <nav> cu
principalele link-uri.

<footer> - reprezinta subsolul paginii sau a unui <section>, ori


<article>; poate contine informatii despre autor, copyright, etc.

<section> - representa o sectiune distincta a documentului sau aplicatiei.


Se foloseste pentru a grupa logic structura documentului.
Poate contine header, articles, meniu de navigare si footer.

<nav> - in acest tag se adauga meniul de navigare in paginile site-ului.


Acest element ar trebui folosit doar pentru link-uri grupate intr-un meniu.
Daca aveti un <footer> cu link-uri de navigare in site, nu mai e necesar sa
le adaugati si in <nav>, deoarece <footer> e suficient.

<article> - se foloseste pentru a defini un element independent in pagina


(sau in <section>), si poate contine articole de stiri, postari de blog,
comentarii, sau alt continut cu text si imagini.

<aside> - poate fi folosit ca sa defineasca o zona laterala, sau alt continut


care e considerat intr-un fel separat de continutul din jurul lui. Un exemplu
ar fi, banner sau publicitate.

<hgroup> - se foloseste pentru a grupa un set de doua sau mai multe


elemente H1, H2, H3, ..., cand avem de exemplu un titlu si subtitluri

HTML5 vine si cu alte elemente interesante, precum <video> si <audio>, plus

alte tag-uri si atribute noi si modificate, dar acest tutorial este o descriere scurta
care prezinta principalele elemente de baza, ca sa intelegeti noua structura in
HTML5, si sa treceti rapid de la HTML4 sau XHTML la HTML5.
Toate principalele browsere (Safari, Chrome, Firefox, Opera, Internet Explorer)
continua sa adauge noile caracteristici HTML5 in ultimile lor versiuni, dar multi
utilizatori inca folosesc versiuni de browser web ce nu recunosc noile elemente
HTML5, precum IE7, IE8. In acest caz exista o solutie JavaScript, un script extern,
html5.js (gazduit de un proiect Google) care face browser-ul IE sa recunoasca
noua structura din HTML5.
Este recomandat sa includeti acest script in sectiunea HEAD a documentului
HTML5, folosind acest cod:
<!--[if IE]><script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
Si urmatorul cod CSS, care face ca tag-urile specificate sa fie afisate ca elemente
de tip bloc:
<style>header, footer, section, aside, nav, article {display: block;}</style>
Iata o structura comuna a unei pagin cu HTML5, ce contine un header in partea
de sus a paginii (cu u meniu in el), o sectiune in partea stanga (cu un meniu de
navigare "aside" pt. banner), o alta sectiune (cu Header, 2 articole si footer), si
un footer in subsolul paginii (click pe imagine):

Puteti folosi tag-urile pentru structurare cu atributele "id" si "class", precum si


<div>, <span>, <p>, si alte tag-uri HTML pentru design si organizare /aranjare
continut in documentul HTML.
Mai jos sunt codurile HTML5 si CSS pentru a crea o pagina web bazata pe
structura din imaginea de mai sus:

Document HTML5
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Web Development Cursuri si Tutoriale</title>
<meta name="description" content="Examplu document in HTML5, template,
cursuri si tutoriale" />
<meta name="keywords" content="html5, tutoriale html5, cursuri" />
<!--[if IE]><script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><!
[endif]-->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<header id="page_header">
<h1>Web Development Cursuri si Tutoriale</h1>
<nav>
<ul>
<li><a href="http://www.marplo.net/" title="Home">Home</a></li>
<li><a href="http://www.coursesweb.net/" title="Cursuri Web">Cursuri
Web</a></li>
<li><a href="http://www.marplo.net/forum/">Forum</a></li>
<li><a href="../../coment/contact.php" title="Contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="posts">
<header id="posts_header">
<h2>Tutoriale HTML5</h2>
</header>
<article class="post">
<header>
<h3>Invata rapid HTML5</h3>
</header>
<div class="ctext">
Invata despre noile caracteristici din HTML5.<br />
Tag-uri noi, si elemente pentru structura.
</div>
<aside class="post_baner">Aici poate fi un banner</aside>
<p>
Noile caracteristici din <b>HTML5</b> sunt bazate pe HTML, CSS, DOM, si
JavaScript; si reduc necesitatea plugin-urilor externe (precum
Flash).<br />
Multe alte noi caracteristici HTML5 sunt centrate pe crearea unei mai
bune platforme pentru aplicatiile web, <a
href="http://www.marplonet.net/html/tutorial-html5.html" title="Tutorial
HTML5">Cititi mai mult</a> ...
</p>
</article>
<article class="post">
<header>
<h3>Elemente si attribute noi pentru formular in HTML5</h3>
</header>
<div class="ctext">
Formularele HTML sunt folosite in general ca sa transfere date adaugate
de utilizator la un script de pe server sau JavaScript, ca sa fie procesate
de un limbaj de programare.
</div>

<p>
HTML5 adauga mai multe tipuri de casute input noi, pentru formular
(datetime, datetime-local, date, month, week, time, number, range, email,
url, search, and color), <a href="http://www.marplonet.net/html/html5formular-input-atribute.html" title="Elemente de formular noi">Cititi mai
mult</a> ...
</p>
</article>
<footer id="post_footer">
<p>Mai multe lectii si tutoriale HTML: <a
href="http://www.marplo.net/html/" title="Curs HTML">Curs HTML</a>.</p>
</footer>
</section>
<section id="sidebar">
<nav>
<ul>
<li><a href="http://www.marplo.net/html/" title="Curs HTML">Curs
HTML</a></li>
<li><a href="http://www.marplo.net/curs_css/" title="Curs CSS">Curs
CSS</a></li>
<li><a href="http://www.marplo.net/javascript/"
title="JavaScript">JavaScript</a></li>
<li><a href="http://www.marplo.net/php-mysql/" title="PHP-MySQL">PHPMySQL</a></li>
<li><a href="http://www.marplo.net/flash/" title="Flash-ActionScript
3">Flash-ActionScript 3</a></li>
<li><a href="http://www.marplo.net/jocuri/" title="Jocuri Flash">Jocuri
Flash</a></li>
</ul>
</nav>
<aside class="sidebar_baner">Banner in sidebar</aside>
</section>
<footer id="page_footer">
<p>De la: <a href="http://www.marplo.net/" title="Cursuri gratuite,
Jocuri, Anime">www.marplo.net</a></p>
</footer>
</body>
</html>

Cod CSS, in fisierul style.css


body {
width: 99%;
margin: 2px auto;
font-family: Arial, "MS Trebuchet", sans-serif;
text-align: center;
}
header, footer, section, aside, nav, article { display: block; }
header#page_header {
width: 100%;
margin: 4px auto;
border: 2px solid blue;
}
header#page_header nav ul {
list-style: none;
margin: 0;
padding: 0;
}

#page_header nav ul li {
display:inline;
margin: 0 20px 0 0;
padding: 1px;
}
section#posts {
float: right;
width: 79%;
background-color: #f1f2fe;
border: 1px solid yellow;
}
section#posts header#posts_header {
background-color: #abcdef;
border: 1px solid green;
}
article.post {
margin:10px;
background-color: yellow;
text-align: left;
}
article.post aside {
float: right;
margin-top: -58px;
width: 250px;
height: 120px;
background-color: #fefefe;
}
article.post p { clear: right;}
section#sidebar {
float: left;
width: 18%;
background-color: #d7d8fe;
border: 1px solid green;
padding:5px;
}
section#sidebar nav ul {
margin: 3px auto;
text-align: left;
padding: 0 0 0 15;
}
section#sidebar aside {
width: 160px;
height: 250px;
margin: 10px auto;
background-color: #fefefe;
}
footer#page_footer {
clear: both;
width: 100%;
margin: 4px auto;
border: 2px solid blue;
}

Aceste reguli CSS sunt salvate intr-un fisier extern, denumit "style.css", si este
inclus in pagina HTML cu urmatorul cod adaugat in sectiunea HEAD.
<link rel="stylesheet" type="text/css" href="style.css" />

Pentru a crea pagini web cu HTML5, ar trebui sa cunoasteti si CSS.

- Click pe Examplu structura HTML5, ca sa vedeti cum apare pagina web creata
cu exemplu prezentat mai sus.

HTML5 - Tag-uri Noi

HTML5 video tag

HTML5 embed tag

Tag-ul canvas

HTML5 figure tag

HTML5 hgroup tag

HTML5 mark tag

Tag-ul progress

Tag-ul ruby

Tag-ul WBR

Dupa mai multi ani de experienta cu HTML 4 si XHTML, HTML5 a venit cu tag-uri noi
pentru o mai buna structra a documentului si a formularelor, pentru desen si continut
multimedia.
Multe din noile elemente HTML5 nu sunt inca suportate de principalele navigatoare web, dar
treptat acestea implementeaza noile caracteristici din HTML5.
In acest tutorial sunt prezentate cateva din noile tag-uri HTML5 suportate in principalele
navigatoare web, cu o scurta descriere si exemple de cod.

HTML5 audio tag


Tag-ul <audio> se foloseste pt. a adauga sunet, muzica in pagina web.
Poate folosi aceste atribute:

autoplay (autoplay="autoplay") - Sunetul, muzica va incepe automat.

controls (controls="controls") - Controalele audio (play / pauza, etc.) vor fi afisate.

loop (loop="loop") - Muzica va incepe din nou dupa ce se termina.

preload (preload="auto|metadata|none") - Specifica daca si cum va fi incarcat fisierul


audio cand pagina se incarca. Atributul "preload" este ignorat daca se adauga
"autoplay".

("auto" - incarca tot fisierul audio cand pagina se incarca; "metadata" - incarca numai
metadata cand pagina se incarca; "none" - browser-ul nu ar trebui sa incarce fisierul
audio cand se incarca pagina).

src (src="url") - Adresa URL a fisierului audio.

Elementul <audio> foloseste tag-ul <source> ca sa specifice sursa fisierului audio si fisiere
alternative pentru diferentele dintre navigatoarele web, bazate pe tipul de codec recunoscut.
IE9 si Safari folosesc fisiere MP3; Firefox, Chrome si Opera folosesc tipul OGG (sau OGV).
- Exemplu:
<audio controls="controls">
<source src="audio_file.ogg" type="audio/ogg" />
<source src="audio_file.mp3" type="audio/mp3" />
Browser-ul dv. nu recunoste tag-ul audio, dar puteti <a
href="audio_file.mp3">Descarca fisierul</a>.
</audio>

- Textul dintre <audio> si </audio> va fi afisat in navigatoarele web care nu recunosc tag-ul
audio. In exemplu de mai sus, daca browser-ul nu recunoste tag-ul <audio>, va fi afisat in
acel loc un link de download.
Rezultat:
Browser-ul dv. nu recunoste tag-ul audio, dar puteti .

HTML5 video tag


Tag-ul <video> este un element multimedia folosit pt. a adauga in pagina web video clipuri si
alt continut video.
Tag-ul HTML5 <video> poate folosi aceste atribute:

autoplay (autoplay="autoplay") - Filmul /videoclip-ul va incepe automat.

controls (controls="controls") - Butoanele de control (play / pauza, etc.) vor fi afisate.

height (height="pixeli") - Inaltimea player-ului, in pixeli.

width (width="pixeli") - Lungimea player-ului, in pixeli.

muted (muted="muted") - Sunetul din film va fi pe mut, nu e redat.

poster (poster="URL") - Specifica o imagine care sa fie afisata in timp ce filmul se


incarca, sau pana cand e apasat butonul play. Daca acest atribut nu e adaugat, va fi
afisat primul cadru din film.

loop (loop="loop") - Filmul va porni de la inceput dupa ce se termina.

preload (preload="auto|metadata|none") - Specifica daca si cum va fi incarcat filmul


cand pagina se incarca. Atributul "preload" este ignorat daca se adauga "autoplay".
("auto" - incarca tot fisierul video cand pagina se incarca; "metadata" - incarca numai
metadata cand pagina se incarca; "none" - browser-ul nu ar trebui sa incarce filmul
cand se incarca pagina).

src (src="url") - Adresa URL a fisierului video.

Elementul <video> foloseste tag-ul <source> ca sa specifice sursa fisierului video si fisiere
alternative pentru diferentele dintre navigatoarele web, bazate pe tipul de codec recunoscut.
IE9 si Safari folosesc fisiere MP4; Firefox, Chrome si Opera folosesc tipul OGG (sau OGV)
- Exemplu:
<video controls="controls"width="200" height="150">
<source src="video/video_file.mp4" type="video/mp4" />
<source src="video/video_file.ogg" type="video/ogg" />
Browser-ul dv. nu recunoste tag-ul video, dar puteti <a
href="video/video_file.mp4">Descarca filmul</a>.
</video>

- Textul dintre <video> si </video> va fi afisat in navigatoarele web care nu recunosc tag-ul
video. In exemplu de mai sus, daca browser-ul nu recunoste tag-ul <video>, va fi afisat in
acel loc un link de download.
Rezultat:

HTML5 embed tag


Tag-ul <embed> se foloseste pentru a adauga in pagina aplicatii cu continut interactiv, cum
sunt prezentarile flash SWF, plug-inuri, sau fisiere cu imagini.
Poate sa foloseasca aceste atribute:

height (height="pixeli") - Inaltimea cadrului in care e afisat continutul, in pixeli.

width (width="pixeli") - Lungimea cadrului in care e afisat continutul, in pixeli.

type (type="MIME_type") - Tipul MIME al continutului.

src (src="url") - Adresa URL a fisierului.

Exemplu:

<embed src="flash_game.swf" width="150" height="150" />

Tag-ul canvas
Elementul <canvas> poate fi utilizat ca sa adauge in pagina desene grafice folosind script-uri
(de obicei JavaScript), sau compozitii foto si animatii simple.
Atribute:

height (height="pixeli") - Lungimea cadrului canvas, in pixeli.

width (width="pixeli") - Inaltimea cadrului canvas, in pixeli.

- Exemplu (creaza un patrat albastru):


<canvas id="cvs1" width="88" height="88">
Acest text e afisat daca browser-ul nu recunoste elementul HTML5 Canvas.
</canvas>

<script type="text/javascript">
var canvas=document.getElementById('cvs1');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#0102fe';
ctx.fillRect(0,0,80,80);
</script>

- Textul dintre <canvas> si </canvas> va fi afisat daca navigatorul web nu recunoaste canvas.
Rezultat:

HTML5 figure tag


Tag-ul <figure> se foloseste pentru a adauga in pagina un grup de elemente care au un
contint de sine statator, cum ar fi diagrame, poze, cod, etc. Continutul din elementul <figure>
e atasat la derularea paginii, dar pozitia lui este independenta. Dace e sters nu ar trebui sa
afecteze cursul paginii.
Tag-ul <figure> poate sa contina elementul <figcaption> ca sa adauge o scurta descriere la
ceea ce e adaugat in <figure> .
- Exemplu:
<figure>
<img src="html_course.jpg" alt="Curs HTML" width="200" height="100" />
<figcaption>Curs HTML: www.marplo.net/html/</figcaption>
</figure>

Rezultat:

Curs HTML: www.marplo.net/html/

HTML5 hgroup tag


Tag-ul <hgroup> se foloseste pentru a grupa mai multe tag-uri H1 - H6.
- Exemplu:
<hgroup>
<h2>Bine ai venit pe www,narplo.net</h2>
<h3>Cursuri gratuite, Jocuri, Anime</h3>
</hgroup>
<p>Restul continutului...</p>

HTML5 mark tag


Tag-ul <mark> defineste un text marcat, se foloseste cand doriti sa scoateti in evidenta parti
din text,
- Exemplu:
<p>Cursuri gratuite si tutoriale: <mark>www.marplo.net</mark> pt. Web
Development.</p>

Rezultat:
Cursuri gratuite si tutoriale: www.marplo.net pt. Web Development.

Tag-ul progress

Elementul <progress> adauga in pagina o bara de progres. De obicei e folosit impreuna cu


script-uri JavaScript.
Poate folosi aceste atribute:

max (max="nr") - Specifica totalul de unitati din bara de progres.

value (value="nr") - Specifica numarul de unitati completate din bara de progres.

- Exemplu:
<progress value="33" max="100"></progress>

Rezultat:

Tag-ul ruby
Elementul <ruby> specifica o adnotare rubin. Adnotarile Ruby sunt folosite in scrierile din
Asia de Est, pentru a arata pronuntia caracterelor est-asiatice.
Acest tag se foloseste impreuna cu tag-urile <rt> si <rp>.
- <rt> - defineste o explicatie sau pronuntia caracterelor dintr-o adnotare rubin.
- <rp> - defineste ce sa afiseze daca navigatorul web nu recunoaste elementul <ruby>.
Exemplu:
<ruby>
<rt><rp>(</rp> <rp>)</rp></rt>
</ruby>

Tag-ul WBR
Elementul <wbr> (Word Break Opportunity) specifica unde in text ar putea fi adaugat rand
nou, indica: "Browser-ul poate adauga aici un rand nou daca e necesar". Daca browser-ul nu
considera ca trebuie adaugat un nou rand, nu afecteaza cu nimic.
De exemplu, se poate folosi <wbr> ca sa adauge oportunitatea de rand nou la un cuvant prea
lung, sau ca sa evitati adaugarea de catre browser a unui rand nou intr-un loc nepotrivit.
Exemplu:
<p>Pentru a crea Pagini<wbr>Web profesionale, un Web<wbr>Master ar trebui
sa stie HTML si CSS.</p>

HTML5 - Elemente si atribute noi in formular

Noile caracteristici adaugate in HTML5 nu sunt complet recunoscute de principalele


browsere. Navigatoarele web cu cel mai bun suport pentru noile elemente din HTML5 sunt:
Opera, Chrome si Mozill Firefox.
Noile tipuri de casete input in HTML5
HTML5 adauga mai multe tipuri de casute input pentru formular (datetime,
datetime-local, date, month, week, time, number, range, email, url, search, si
color), care sunt prezentate mai jos:
type="date" - Creaza o caseta de control pentru specificarea datei (an, luna,

zi), precum un calendar. Valoarea initiala (adaugata in atributul "value") trebuie


sa fie furnizata in format data ISO.
<input type="date" name="set_date" value="2011-10-15" />

type="datetime" - Creaza o caseta input pentru data si ora, care poate fi


adaugat in format ISO date/time, si e trimisa ca fiind in fusul orar UTC.
<input type="datetime" name="dt" value="2011-06-14T01:26:32:00Z" />

type="datetime-local" - Creaza o caseta input pentru data si ora, care poate


fi adaugat in format ISO date/time, la fel ca "datetime", dar presupunand ca
timpul este cel din fusul orar local.
<input type="datetime-local" name="dtl" value="2011-06-14T01:26:32:00">

type="month" - Creaza o caseta input in care se poate specifica anul si luna.


<input type="month" value="2012-09" name="mnt" />

type="week" - o caseta input pentru anul si numarul unei anumite saptamani


din an (AN-Wnr , nr e numarul saptamanii).
<input type="week" name="weeks" value="2011-W34" />

type="time" - creaza o casuta de formular pentru ora (ora, minute, secunde).


<input type="time" name="currenttime" value="18:12:00" />

type="tel" - o caseta input pentru numar de telefon.


<input type="tel" name="hometel" value="123-888-2012" />
123-888-20

type="url" - e folosit pentru campuri de formular care trebuie sa contina doar


adresa URL. Valoarea din acest input e automat validata cand datele din formular
sunt trimise (daca nu are un format URL valid, returneaza un mesaj de eroare).
<input type="url" name="site" size="25" value="http://www.marplo.net" />
http://w w w .marplo.net

type="number" - creaza casete de formular care sa contina doar numere. Se


poate restrictiona numerele acceptate, cu atributele "min", "max" si "step".
<input type="number" name="points" min="5" max="80" />

type="range" - Creeaza o zona cu un cursor de control care indica o valoare


dintr-o serie de numere. Numerele acceptate incep de la valoarea specificata in
atributul "min" (0 default), pana la numarul specificat in atributul "max" (100
default).
<input type="range" name="val" min="1" max="10" />

type="email" - e folosit pentru campuri de formular care trebuie sa contina


doar adresa de e-mail. Valoarea din acest input e automat validata cand datele
din formular sunt trimise.
<input type="email" name="email" />

type="search" - Creaza un camp de text special folosit pentru cautare (de


ex. cautare in site, cu un script).
<input type="search" name="srch" size="25" value="Cautare" />
Cautare

type="color" - Creaza un camp de formular special pentru selectarea unei


culori.
<input type="color" name="get_color" />

Atribute noi pentru <form> adaugate in HTML5

autocomplete="on | of" - Permite browser-ului sa completeze automat


datele in formular (on), sau de fiecare data utilizatorul trebuie sa introduca
el insusi datele (off).
- Functioneaza cu <form>, si urmatoarele tipuri <input>: text, search, url,
tel, email, password, date-pickers, range, color.

<form action="script.php" method="post" autocomplete="on" id="idf">


Name:<input type="text" name="fname" />
<input type="submit" value="Send" />
</form>

novalidate - (novalidate="novalidate" in XHTML) - Seteaza ca formularul,


sau campul input unde e adaugat, sa nu valideze automat datele cand
sunt trimise.
- Se poate adauga in <form> si in urmatoarele casete <input>: text,
search, url, tel, email, password, date-pickers, range, color.

<form action="script.php" id="idf" novalidate="novalidate">


E-mail: <input type="email" name="email" />
<input type="submit" value="Send"/>
</form>

Atribute noi pentru input


autofocus - (autofocus="autofocus" in XHTML) - specifica faptul ca un camp
de formular sa primeasca automat focus cand pagina e afisata. Functioneaza in
toate casetele <input>.
Name: <input type="text" name="name1"

autofocus="autofocus" />

form="form_id" - Asociaza campul input cu formularul care are id="form_id".


Cu aceasta metoda, caseta de text nu trebuie adaugata special intr-un element
form. Functioneaza in toate tipurile <input>.
<form action="script.php" method="post" id="idf">
Name:<input type="text" name="fname" />
<input type="submit" value="Send" />
</form>
E-mail: <input type="email" name="email" form="idf" />

formaction="url" - Rescrie valoarea atributului "action" din <form>,


trimitand datele la adresa specificata la "url".
formenctype="content_type" - Rescrie valoarea atributului "enctype" din
<form>.
formmethod="get | post | put | delete" - Rescrie valoarea atributului
"method" din <form>. Valorile "put" si "delete" sunt noi in HTML5.
formnovalidate - (formnovalidate="formnovalidate" in XHTML) - Rescrie
valoarea atributului "novalidate" din <form>.
formtarget="target" - Rescrie valoarea atributului "target" din formular.
- Aceste atribute de recriere sunt folosite doar in buton submit (type "submit"
sau "image").
<form action="script.php" method="post" id="idf">
E-mail: <input type="email" name="email" /><br />
<input type="submit" value="Trimite" /><br />
<input type="submit" formaction="script_2.php" value="Trimite la script_2"
/><br />
<input type="submit" formnovalidate="formnovalidate" value="Trimite fara
validare" />
</form>

height="pixels" - Specifica inaltimea butonului imagine, cand type="image".


width="pixels" - Specifica lungimea butonului imagine, cand type="image".
- Aceste atribute sunt folosite doar in butoane cu type="image":
<input type="image" src="img_submit.gif" width="80" height="23" />

list="id_datalist" - Indica faptul ca exista o list predefinita de optiuni pentru


utilizator, care sunt furnizate de un element datalist. Valoarea atributului list

("id_datalist") este ID-ul adaugat in <datalist>.


- Poate fi utilizat cu urmatoarele tipuri de <input>: text, search, url, tel, email,
datepickers, number, range, color.
Website: <input type="url" list="sites" name="link" />
<datalist id="sites">
<option label="CoursesWeb" value="http://www.coursesweb.net" />
<option label="MarPlo" value="http://www.marplo.net" />
<option label="W3Schools" value="http://www.w3schools.com" />
</datalist>

max="number" - specifica valoarea maxima pentru numere, aceasta trebuie


sa fie mai mare (sau egala) decat valoarea adaugata in atributul "min".
min="number" - specifica o valoarea minima pentru numere.
step="any/number" - specifica intervalul de numere care poate fi folosit
(daca step="3", numerele acceptate sunt: -3,0,3,6, etc).
- Atributele "min", "max", si "step" pot fi utilizate in urmatoarele casete
<input> types: date-pickers, number, range.
Urmatorul cod defineste o caseta care accepta numere de la 1 la 10, cu step 3
(numere ce pot fi adaugate: 3, 6 sau 9):
<input type="number" name="num" min="1" max="10" step="3" />

multiple - (multiple="multiple" in XHTML) - Indica faptul ca utilizatorul poate


specifica mai mult de o valoare.
- Poate fi utilizat in urmatoarele casete <input>: email, file.
<input type="file" name="img" multiple="multiple" />

pattern="regexp" - specifica o expresie regulata folosita la validarea datelor


din caseta input. Puteti adauga un atribut "title" care sa indice pe scurt formatul
datelor ce trebuie adaugate.
- Poate fi utilizat in urmatoarele casete <input>: text, search, url, tel, email,
password.
Codul urmator defineste un camp text in care pot fi adaugate maxim 5 caractere
(doar litere si numere):
<input type="text" name="pass" pattern="[A-z0-9]{5}" title="Cinci
caractere, litere si numere" />

placeholder="text" - Furnizeaza un mic indiciu, sau exemplu care sa ajute


utilizatorul sa adauge datele corecte (pentru o descriere mai lunga, se foloseste
atributul "title").
Indiciul e afisat in caseta input cand e goala, si dispare cand cursorul e in acel
camp.
- Poate fi utilizat in urmatoarele casete <input>: text, search, url, tel, email,
password.
<input type="search" name="src"

placeholder="Search MarPlo" />

required - (required="required" in XHTML) - indica faptul ca respectivul camp

input trebuie sa fie completat inainte de a trimite datele.


- Poate fi adaugat in urmatoarele casete <input>: text, search, url, tel, email,
password, date-pickers, number, checkbox, radio, file.
<input type="text" name="name1" required="required" />

Alte elemente de formular adaugate in HTML5


<datalist> ... </datalist> tag
Elementul datalist trebuie sa contina un "id" si tag-uri <option> ... </option>.
Creaza un meniu cu optiuni (adaugate in elementul "option"), oferind o functie
de "auto-completare" in timp ce utilizatorul tasteaza in caseta input care are un
atribut "list" ce face referire la "id-ul" din datalist.
Tag-ul <option> trebuie sa contina atributul "value".
Exemplu:
Website: <input type="url" list="sites" name="link" />
<datalist id="sites">
<option label="CoursesWeb" value="http://www.coursesweb.net" />
<option label="MarPlo" value="http://www.marplo.net" />
<option label="W3Schools" value="http://www.w3schools.com" />
</datalist>

<keygen /> tag


Elementul keygen e folosit pentru a genera doua chei (una privata, si cealalta
publica) care ofera un mod mai sigur de autentificare a utilizatorului.
Cheia privata este salvata pe calculatorul client, iar cheia publica e trimisa la
server.
Suportul navigatoarelor web pentru acest element nu e inca destul de bun
pentru a fi utilizat ca un standard de securitate.
Exemplu:
<form action="script.php" id="idf" method="post">
Utilizator: <input type="text" name="user" />
Encriptare: <keygen name="security" />
<input type="submit" value="Submit" />
</form>

<output> </output> tag


E folosit pentru a afisa rezultatul unei operatiuni de calcul, cel mai probabil
rezultatul returnat de un script.
Total: <output name="total" onformchange="calc()">0</output>

- Aici, "calc()" poate fi o functie dintr-un script JavaScript.


Tutorial HTM5 canvas

Desenare cu HTML5

Adaugare transparenta

Desenare linii

Desenare arce si cercuri

Canvas - Text

Canvas - Umbre

Canvas - Gradient

Adaugare imagini

<canvas> este unul din cele mai interesante elemente introduse in HTML5.
Tag-ul <canvas> este destul de simplu, defineste lungimea, inaltimea si un ID unic. Dar se
folosesc o serie de instructiuni JavaScript (denumite generic APIs) pentru a desena obiecte in
canvas.
Exemplu de mai jos arata structura de baza pentru implementare canvas intr-o pagina web:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Titlu paginii</title>
<script type="text/javascript">
function draw() {
// preia intr-un obiect tag-ul <canvas>
var canvas = document.getElementById("id_canvas");
// daca browser-ul recunoaste canvas
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// Aplica instructiuni JavaScript (API canvas) pt. desenare
}
}
// apeleaza functia draw() imediat ce pagina s-a incarcat
window.onload = draw;
</script>
</head>
<body>
<canvas id="id_canvas" width="200" height="200"></canvas>
</body>
</html>

- Atributele width si height specifica dimensiunile zonei CANVAS in pagina web.


- Important este ID-ul (aici "id_canvas"), acesta se foloseste in JavaScript ca sa
fie preluat tag-ul <canvas> intr-un obiect (cu document.getElementById('ID')),
apoi se aplica functii si proprietati specifice pentru a crea desene care sunt
afisate in tag-ul CANVAS.
- Metoda getContext('2d') trebuie aplicata la elementul Canvas ca sa se obtina
un obiect la care se aplica instructiuni API pentru crearea continutului din
<canvas>.

<canvas> este un element de tip bloc, poate fi adaugat in oricare alt tag de tip bloc, precum
<p>, <div>, sau in elementele noi de structura introduse in HTML5: <section>, <article>.
Desenare cu HTML5, canvas si JavaScript
Instructiunile JavaScript permit dezvoltatorilor de pagini web sa deseneze diferite
forme, linii, sa aplice culori, transparenta si gradient, sa adauge text si imagini in
Canvas; chiar sa creeze animatie.
- Exemplu urmator deseneaza un patrat albastru.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas patrat albastru</title>
<script type="text/javascript"><!-function draw() {
var canvas = document.getElementById('cav1');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0101fe';
ctx.fillRect (50, 60, 100, 100);
}
}
window.onload = draw;
// acceseaza functia draw() cand pagina s-a
incarcat
--></script>
</head>
<body>
<canvas width="200" height="200" id="cav1"></canvas>
</body>
</html>

Rezultat:

- Sintaxa:

ctx.fillStyle = "Culoare" - reprezinta culoarea din interiorul formei. Se


poate folosi orice metoda de definire a culorii utilizata in CSS (blue,
#0000ff, #00f, sau rgb(0,0,255) ).
- Daca nu se specifica o culoare, va fi aplicat negru.

ctx.fillRect(X-stanga, Y-sus, lungime, inaltime) - Deseneaza


patrulaterul in canvas, folosind cloarea din "fillStyle".

Puteti crea desene mult mai complexe, combinand cercuri, linii, patrulatere,
gradient, transparenta.
- Deoarece multi utilizatori inca folosesc browser care nu recunoaste elementul
CANVAS, puteti adauga un text cu un mesaj de eroare pt. no-canvas, intr-un tag
ascuns (cu style="display:none;"), iar cu JavaScript faceti acest tag vizibil in
cazul cand browser-ul nu recunoaste elementul canvas.
- Daca adaugati codul JavaScript dupa tag-ul <canvas>, nu mai e necesar
window.onload, doar apelati simplu functia cu API-uri pt. canvas. Veti vedea in
exemplele urmatoare.

Adaugare transparenta
Ca sa adaugati transparenta, definiti culoarea folosind formula: rgba(Red,
Green, Blue, Alpha). "Alpha" e o valoare intre 0 si 1 care reprezinta
transparenta.
In urmatorul exemplu adaugam un dreptunghi cu Alpha 0.5. In acest caz definim
culoarea din "fillStyle" pentru dreptunghi folosind rgba() pentru a specifica
valoarea de transparenta ( rgba(220, 223, 0, 0.5) ).
De aseemenea, va fi adaugat un mesaj pt. no-canvas, iar codul JavaScript e scris
sub tag-ul <canvas> (pt. a nu mai folosi window.onload).
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas transparenta</title>
</head>
<body>
<canvas width="200" height="200" id="cav1"></canvas>
<p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas
ca sa vedeti aceasta zona.</p>
<script type="text/javascript"><!-function draw() {
var canvas = document.getElementById('cav1');

if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0101fe';
ctx.fillRect (50, 60, 100, 100);
ctx.fillStyle = "rgba(220,223,0, 0.5);";
ctx.fillRect (90, 105, 100, 80);
}
else {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}

draw();
// apeleaza functia draw()
--></script>
</body>
</html>

Rezultat:

Desenare linii
Ca sa desenati linii se foloseste functia lineTo().
lineTo(x, y)

Aceasta metoda traseaza o linie de la punctul curent pana la coordonatele (x, y).
Pentru a seta sau muta punctul curent de inceput, se foloseste metoda moveTo().
moveTo(x, y)

- Aceasta metoda creaza, sau muta, punctul de inceput al desenarii, la


coordonatele specificate.
Ca sa definiti culoarea liniei, se foloseste:
ctx.strokeStyle = "culoare";
Pentru grosimea liniei (in pixeli), se foloseste:
ctx.lineWidth = valoare;
Urmatorul exemplu creaza trei linii.
<canvas width="200" height="200" id="cav1"></canvas>
<p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas
ca sa vedeti aceasta zona.</p>
<script type="text/javascript"><!-function draw() {
var canvas = document.getElementById('cav1');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// definesste culoarea si grosimea liniei
ctx.strokeStyle = '#01da01';
ctx.lineWidth = 3;
// creaza prima linie
ctx.moveTo(10, 10);
ctx.lineTo(100, 80);

// seteaza punctul de inceput


// defineste linia

// creaza a doua linie


ctx.moveTo(10, 10);
ctx.lineTo(120, 120);

// seteaza punctul de inceput


// defineste linia

// the third line


ctx.moveTo(10, 150);
ctx.lineTo(140, 150);
ctx.stroke();
}
else {

// muta punctul de inceput

// adauga liniile

// face vizibil tag-ul cu text pt. no-canvas


document.getElementById('no_cav').style.display = 'block';
}

draw();
// apeleaza functia
--></script>

Dupa ce a fost definita culoarea liniei (cu strokeStyle), si grosimea (cu lineWidth),
am folosit metoda moveTo() pentru a seta punctul de inceput, apoi cu
lineTo(100, 80) se creaza o linie de la acel punct curent pana la punctul dat de
coordonatele (100, 80).
Acum, ultimul punct devine punctul curent de inceput, pentru a-l muta, se
foloseste iar meoda moveTo().
Codul de mai sus va afisa aceste trei linii (intr-un browser Canvas-compatibil):

Desenare arce si cercuri


Pentru a desena arce de cerc si cercuri, se foloseste functia arc().
arc(x, y, raza, startUnghi, endUnghi, anticlockwise)

- Aceasta metoda deseneaza un arc de cerc intre startUnghi si endUnghi, in sens


invers orelor de ceas daca argumentul anticlockwise e setat true, daca e false
deseneaza in sensul orelor de ceas.
Ca sa desenati un crc, setati: startUnghi=0, endUnghi=Math.pi*2
Dupa ce ati definit arc-ul de cerc (sau cercul) cu metoda arc(), aplicati:
ctx.stroke(); - ca sa desenati linia de margine.
ctx.fill(); - ca sa adaugati culoarea de umplere.
Urmatorul cod deseneaza o fata zambitoare.
<canvas width="200" height="200" id="cav1"></canvas>
<p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas
ca sa vedeti aceasta zona.</p>
<script type="text/javascript"><!-function draw() {
var canvas = document.getElementById('cav1');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.arc(75,75,50,0,Math.PI*2,true);
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false);
ctx.moveTo(65,65);
ctx.arc(60,65,4,0,Math.PI*2,true);

// Fata
// Gura
// Ochiul stang

ctx.moveTo(95,65);
ctx.arc(90,65,4,0,Math.PI*2,true);
ctx.stroke();

// Ochiul drept

}
else {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}
}
draw();
// apeleaza functia
--></script>

Desenul incepe cu desenarea fetei, apoi se muta punctul de inceput pentru


desenare gura, si traseaza alt arc de cerc, si tot asa pentru fiecare ochi. Functia
moveTo() se ocupa de mutarea coordonatelor.
Rezultat:

Canvas - Text
Sunt doua metode pentru adaugare text in canvas:

fillText(text, x, y) - adauga textul la pozitia specificata, avand culoarea


din fillStyle.

strokeText(text, x, y) - adauga textul la pozitia specificata, dar fara


culoare de umplere, doar cu linia de margine a literelor, avand culoarea
din strokeStyle.

Pentru text se pot folosi urmatoarele proprietati la obiectul context:

ctx.font = valoare - Specifica fontul textului, la fel ca proprietatea fontfamily din CSS.

ctx.textAlign = valoare - Specifica alinierea pe orizontala a textului,


valori: "start", "end", "left", "right", "center" (default e "start").

ctx.textBaseline = valoare - Specifica alinierea pe verticala a textului,


valori: "top", "hanging", "middle", "alphabetic", "ideographic", "bottom"
(default e "alphabetic").

Exemplu:
<canvas width="200" height="200" id="cav1"></canvas>
<p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas
ca sa vedeti aceasta zona.</p>
<script type="text/javascript"><!-function draw() {
var canvas = document.getElementById('cav1');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// creaza text cu o culoare de umplere
ctx.fillStyle = '#00f';
ctx.font = 'italic 30px sans-serif';
ctx.textBaseline = 'top';
ctx.fillText('Hy everyone', 2, 5);
// creaza text afisat doar cu linia de margine a literelor
ctx.font = 'bold 30px sans-serif';
ctx.strokeText('Hy everyone', 2, 50);

}
else {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}
}
draw();
// apeleaza functia
--></script>

Rezultat:

Canvas - Umbre
Instrctiunile JavaScript pentru umbre contin proprietati care se aplica la obiectul
context:

ctx.shadowColor = valoare - Seteaza culoarea umbrei.

ctx.shadowBlur = valoare - Seteaza "blur" la umbra, in pixels. Cu cat


valoarea e mai mica, umbra e mai ascutita.

ctx.shadowOffsetX = valoare - Specifica distanta X, in pixeli.

ctx.shadowOffsetY = valoare - Specifica distanta Y, in pixeli.

Urmatorul cod deseneaza o sfera albastra, cu o umbra verde avand transparenta


0.5:
<canvas width="200" height="200" id="cav1"></canvas>

<p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas


ca sa vedeti aceasta zona.</p>
<script type="text/javascript"><!-function draw() {
var canvas = document.getElementById('cav1');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// seteaza proprietatile umbrei
ctx.shadowOffsetX = 8;
ctx.shadowOffsetY = 8;
ctx.shadowBlur = 4;
ctx.shadowColor = 'rgba(0, 200, 1, 0.5)';
// defineste si adauga un cerc
ctx.fillStyle = '#0000fe';
ctx.arc(75,75,50,0,Math.PI*2,true);
ctx.fill();

}
else {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}
}
draw();
// apeleaza functia
--></script>

Rezultat:

Canvas - Gradient
Pentru a crea culoare gradient in Canvas, se aplica un obiect CanvasGradient la
proprietatile fillStyle sau /si strokeStyle.
Se pot crea doua tipuri de obiect CanvasGradient, utilizand una din urmatoarele
metode:

gradient = context.createLinearGradient(x0, y0, x1, y1) Returneaza un obiect CanvasGradient ce reprezinta un gradient liniar, care
incepe de la punctul (x0, y0) si se termina la punctul (x1, y1).

gradient = context.createRadialGradient(x0, y0, r0, x1, y1, r1) Returneaza un obiect CanvasGradient ce reprezinta un gradient radial, ca
un con cu cercul mic dat de (x0, y0, re), iar cercul mare definit de (x1, y1,
r1).

Dupa ce ati creat obiectul pentru gradient, puteti adauga culori in gradient, cu

metoda addColorStop() aplicata acestui obiect. Urmatoarele doua coduri arata


cum puteti crea si folosi gradient.
1) Exempu cu createLinearGradient():
<canvas width="200" height="200" id="cav1"></canvas>
<p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas
ca sa vedeti aceasta zona.</p>
<script type="text/javascript"><!-function draw() {
var canvas = document.getElementById('cav1');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// creaza un obbiect CanvasGradient liniar
// furnizand sursa si coordonatele de inceput si sfarsit (x0, y0, x1,
y1)

var gradient = ctx.createLinearGradient(0, 0, 150, 0);

// Se adauga culori in gradient, primul argument specifica pozitia


culorii
// - se folosesc valori cuprinse intre 0 (gradient start) si 1
(gradient end)
// Al doilea argument specifica culoarea, in orice format folosit si in
CSS
gradient.addColorStop(0,
'#f00');
// rosu
gradient.addColorStop(0.4, '#ff0');
// galben
gradient.addColorStop(0.8, '#0f0');
// verde
gradient.addColorStop(1,
'#00f');
// albastru
// Aplica gradientul la proprietatea fillStyle, si deseneaza un
dreptunghi
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 200, 125);
}
else {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}
}
draw();
--></script>

Rezultat:

2) Exemplu cu createRadialGradient():
<canvas width="200" height="200" id="cav1"></canvas>
<p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas
ca sa vedeti aceasta zona.</p>
<script type="text/javascript"><!--

function draw() {
var canvas = document.getElementById('cav1');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// creaza un obiect CanvasGradient radial
// furnizeaza sursa, coordonatele de inceput, sfarsit si razele
cercurilor (x0, y0, r0, x1, y1, r1)
var gradient = ctx.createRadialGradient(70, 80, 10, 78, 75, 45);
// Adauga culori la gradientul radial, la fel ca la cel liniar
gradient.addColorStop(0, '#0f0');
gradient.addColorStop(0.5, '#fff');
gradient.addColorStop(1,
'#00f');
// Aplica gradientul la proprietatea fillStyle, si deseneaza un cerc
ctx.fillStyle = gradient;
ctx.arc(75,75,50,0,Math.PI*2,true);
ctx.fill();

}
else {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}
}
draw();
--></script>

Rezultat:

Adaugare imagini
Pentru a adauga o imagine in <canvas>, se foloseste metoda drawImage(). E o
functie complexa, care foloseste trei, cinci, sau noua argumente.
Iata sintaxa cu cinci argumente:
drawImage(img_element, dx, dy, dw, dh)

- Primul argument, img_element reprezinta o referinta la imagine (obiectul


JavaScript cu ea), "dx" si "dy" specifica coordonatele de destinatie in contextul
canvas, "dw" si "dh" specifca lungimea si inaltimea imaginii afisate in Canvas (in
caz ca doriti sa o redimensionati).
- Varianta cu noua argumente se foloseste cand doriti sa adaugati o portiune
decupata din imagine. Contine inca patru argumente care definesc suprafata
decupata (x0, y0, x1, y1).

In urmatorul exemplu adaugam aceasta imagine:


<canvas> (redimensionand-o), si un text langa ea.

intr-un

<canvas width="260" height="200" id="cav1"></canvas><br />


<p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas
ca sa vedeti aceasta zona.</p>
<img src="html_course.jpg" alt="HTML course" width="152" height="160"
id="img1" />
<script type="text/javascript"><!-function draw() {
var canvas = document.getElementById('cav1');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// obtine un obiect cu imaginea, o adauga in context canvas (cu
dimensiuni specificate)
var img_elm = document.getElementById('img1');
ctx.drawImage(img_elm, 0, 0, 95, 100);
// adauga un text fara culoare de umplere
ctx.font = 'bold 25px sans-serif';
ctx.textBaseline = 'top';
ctx.strokeText('HTML Course', 98, 38);

}
else {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}
}
draw();
--></script>

Rezultat:

Elementul <canvas> poate fi si interactiv, sa raspunda la actiunile


utilizatorului, efectuate cu mouse-ul sau tastatura.
- In urmatorul exemplu se folosesc evenimentele: "onmouseover", "onmouseout",
si "onclick" pentru a schimba culoarea unui dreptunghi in <canvas>.

<canvas width="121" height="81" id="cav1" onmouseover="draw('#fefe01');"


onmouseout="draw('#01de02');"
onclick="draw('#fe0708');" style="cursor:pointer;"></canvas>
<p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas
ca sa vedeti aceasta zona.</p>
<script type="text/javascript"><!-function draw(clr) {
var canvas = document.getElementById('cav1');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// deseneaza un dreptunghi, cu o culoare preluata din parametru "clr"
ctx.fillStyle = clr;
ctx.fillRect (0, 0, 120, 80);

}
else {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}
}
draw('#0102fe');
--></script>

// apeleaza functia

Proprietatea "fillStyle" foloseste o culoare preluata din parametru "clr", astfel,


cand functia e apelata cu o culoare diferita la argument, afiseaza un dreptunghi
cu alta culoare.
Ca sa vedeti efectul, pozitionati mouse-ul deasupra dreptunghiului si apasati
click pe el.

Caractere speciale - Entitati HTML


In tabelul din aceasta pagina este o lista cu mai multe caractere speciale (simboluri,
diacritice si caractere specifice altor limbi straine) si codurile lor specifice HTML si ISO.
Aceste caractere pot fi adaugate si afisate corespunzator in orice pagina web, putand fi
introduse cu aceste coduri cunosute si cu denumirea de Entitati HTML.
De exemplu:
- ca sa afisati in pagina simbolul (copyright) se adauga codul &copy; (sau codul ISO
&#169;)
- ca sa afisati in pagina simbolul (jumatate) se adauga codul &frac12; (sau codul ISO
&#189;)
- pentru caracterul < (mai mic), ca browser-ul sa nu-l confunde cu inceputul de tag, se
poate folosi codul &lt;

Nume

Sintaxa

Nume ISO Latin1

Descriere

Aacute

&Aacute

&#193

A ascutit ()

aacute

&aacute;

&#225;

a ascutit ()

Acirc

&Acirc;

&#194;

A circumflex ()

acirc

&acirc;

&#226;

a circumflex ()

acute

&acute;

&#180;

accent grav ()

AElig

&AElig;

&#198;

ligatura AE ()

aelig

&aelig;

&#230;

ligatura ae ()

Agrave

&Agrave;

&#192;

A grav ()

agrave

&agrave;

&#224;

a grav ()

amp

&amp;

&#38;

ampersand (&)

Aring

&Aring;

&#197;

A cu inel ()

aring

&aring;

&#229;

a cu inel ()

Atilde

&Atilde;

&#195;

A tilda ()

atilde

&atilde;

&#227;

a tilda ()

Auml

&Auml;

&#196;

A umlaut ()

auml

&auml;

&#228;

a umlaut ()

brvbar

&brvbar;

&#166;

bara intrerupta ()

Ccedil

&Ccedil;

&#199;

C sedila ()

ccedil

&ccedil;

&#231;

c sedila ()

cent

&cent;

&#162;

cent ()

copy

&copy;

&#169;

copyright ()

curren

&curren;

&#164;

valuta generala ()

deg

&deg;

&#176;

grad ()

div

&div;
&divide;

&#247;

impartire ()

Eacute

&Eacute;

&#201;

E ascutit ()

eacute

&eacute;

&#233;

e ascutit ()

Ecirc

&Ecirc;

&#202;

E circumflex ()

ecirc

&ecirc;

&#234;

e circumflex ()

Egrave

&Egrave;

&#200;

E grav ()

egrave

&egrave;

&#232;

e grav ()

emdash

&emdash;

nedefinit

em dash (&emdash)

emsp

&emsp;

nedefinit

em spatiu ()

endash

&endash;

nedefinit

en dash (&endash;)

ensp

&ensp;

nedefinit

en spatiu ()

ETH

&ETH;

&#208;

Eth nordic ()

eth

&eth;

&#240;

eth nordic ()

Euml

&Euml;

&#203;

E umlaut ()

euml

&euml;

&#235;

e umlaut ()

frac12

&frac12;

&#189;

jumatate ()

frac14

&frac14;

&#188;

sfert ()

frac34

&frac34;

&#190;

trei sferturi ()

gt

&gt;

nedefinit

mai mare dect (>)

Iacute

&Iacute;

&#205;

I ascutit ()

iacute

&iacute;

&#237;

i ascutit ()

Icirc

&Icirc;

&#206;

I circumflex ()

icirc

&icirc;

&#238;

i circumflex ()

iexcl

&iexcl;

&#161;

exclamatie inversata ()

Igrave

&Igrave;

&#204;

I grav ()

igrave

&igrave;

&#236;

i grav ()

iquest

&iquest;

&#191;

intrebare inversata ()

Iuml

&Iuml;

&#207;

I umlaut ()

iuml

&iuml;

&#239;

i umlaut ()

laquo

&laquo;

&#171;

paranteza unghiular dubl stng


()

lt

&lt;

&#60;

mai mic dect (<)

macr

&macr;

&#175;

macron ( )

micro

&micro;

&#181;

micro ()

middot

&middot;

&#183;

punct la mijloc ()

nbsp

&nbsp;

&#160;

spatiu nonbreaking

not

&not;

&#172;

negatie ()

Ntilde

&Ntilde;

&#209;

N tilda ()

ntilde

&ntilde;

&#241;

n tilda ()

Oacute

&Oacute;

&#211;

O ascutit ()

oacute

&oacute;

&#243;

o ascutit ()

Ocirc

&Ocirc;

&#212;

O circumflex ()

ocirc

&ocirc;

&#244;

o circumflex ()

Ograve

&Ograve;

&#210;

O grav ()

ograve

&ograve;

&#242;

o grav ()

ordf

&ordf;

&#170;

ordinal feminin ()

ordm

&ordm;

&#186;

ordinal masculin ()

Oslash

&Oslash;

&#216;

O tiat ()

oslash

&oslash;

&#248;

o tiat ()

Otilde

&Otilde;

&#213;

O tilda ()

otilde

&otilde;

&#245;

o tilda ()

Ouml

&Ouml;

&#214;

O umlaut ()

ouml

&ouml;

&#246;

o umlaut ()

para

&para;

&#182;

paragraf ()

plusmn

&plusmn;

&#177;

plus minus ()

pound

&pound;

&#163;

lira sterlina ()

quot

&quot;

&#34;

ghilimele (")

raquo

&raquo;

&#187;

paranteza unghiular dubl dreapta


()

reg

&reg;

&#174;

marca inregistrata ()

sect

&sect;

&#167;

semn sectiune ()

shy

&shy;

&#173;

soft hyphen ()

sup1

&sup1;

&#185;

1 superior ()

sup2

&sup2;

&#178;

2 superior ()

sup3

&sup3;

&#179;

3 superior ()

szlig

&szlig;

&#223;

sharp s ()

THORN

&THORN;

&#222;

Thorn nordic ()

thorn

&thorn;

&#254;

thorn nordic ()

times

&times;

&#215;

inmultire ()

trade

&trade;

nedefinit

trademark ()

Uacute

&Uacute;

&#218;

U ascutit ()

uacute

&uacute;

&#250;

u ascutit ()

Ucirc

&Ucirc;

&#219;

U circumflex ()

ucirc

&ucirc;

&#251;

u circumflex ()

Ugrave

&Ugrave;

&#217;

U grav ()

ugrave

&ugrave;

&#249;

u grav ()

uml

&uml;

&#168;

umlaut ()

Uuml

&Uuml;

&#220;

U umlaut ()

uuml

&uml;

&#252;

u umlaut ()

Yacute

&Yacute;

&#221;

Y ascutit ()

yacute

&yacute;

&#253;

y ascutit ()

yen

&yen;

&#165;

yen ()

yuml

&yuml;

&#255;

y umlaut ()

Introducere
Crearea paginilor HTML este un lucru relativ simplu, invatarea etichetelor HTML si crearea
unor imagini ducand la realizarea de pagini web de o complexitate medie. Odata cu
dezvoltarea internetului, site-urile au devenit din ce in ce mai complexe, cu un numar mai
mare de pagini, cerintele privind grafica si elementele din pagina au devenit mai pretentioase
si astfel proiectarea paginilor web a devenit o sarcina ceva mai dificila.
O problema importanta cand avem un site cu multe pagini este atunci cand dorim sa facem
anumite schimbari in elementele pagini: fondul, grafica sau fontul textelor din pagini.
Prin utilizarea CSS (Cascading Style Sheets), in traducere "foi de stil in cascada", acest lucru

nu mai este o problema, realizandu-se relativ usor, prin schimbarea sau adaugarea unor
elemente in codul CSS, ne fiind nevoi sa lucram la fiecare pagina sau la fiecare element din
pagina.
CSS se ocupa in general cu aspectul si controlul grafic al elementelor din pagina, cum ar fi:
textul, imaginile, fondul, culorile si asezarea acestora in cadrul ferestrei paginii.
CSS foloseste stiluri, acestea inglobeaza, sub un anumit nume, atribute de formatare care se
aplica asupra unui element individual din pagina, asupra unui grup de elemente sau la nivelul
intregului document.
CSS functioneaza cu HTML, insa nu este HTML. El extinde functionalitatile HTML,
permitand redefinirea etichetelor HTML existente.
Prin utilizarea CSS aspectul documentului pe ansamblu, sau a unui element individual din
interiorul sau, poate fi controlat mult mai usor. Stilurile pot fi aplicate asupra unui element, a
unui document sau chiar asupra unui intreg site web.
Un dezavantaj ar fi ca unele navigatoare nu sunt compatibile CSS, astfel ca documentele
HTML sunt afisate ca si cum CSS n-ar exista, dar cele mai cunoscute si utilizate browsere,
cum ar fi: Mozilla Firefox, Internet Explorer, Opera, si altele, sunt compatibile CSS.

Acest curs prezinta elementele de baza CSS si modul de lucru cu "foile de stil", va invata
cum sa adaugati si sa folositi CSS in paginile dv. web.
Tot ce aveti nevoie este un editor de texte simplu, cum ar fi Notepad, si un navigator, de
exemplu Mozilla Firefox, care este gratuit
Pentru a invata cat mai bine elementele prezentate in aceste lectii, exersati personal fiecare
exemplu si proprietate explicata.
Retineti ca acest curs reprezinta un punct de plecare, ne fiind prezentate aici toate
proprietatile si elementele CSS. Pentru o cunoastere mai amanuntita a acestora, vizitati site-ul
www.w3.org, la sectiunile despre CSS.

Scrierea codului CSS


Codurile CSS pot fi scrise in interiorul paginii sau intr-un fisier extern cu extensia".css".
Codul CSS, ca forma generala, este alcatuit din: obiectul care va fi formatat. proprietatile
acestuia si valoarea (sau atributele) fiecarei proprietati.
Cand este adaugat in documentul HTML, trebuie scris in cadrul unui tag <style> in sectiunea
HEAD a documentului HTML, dupa cum se vede in formula generala de cmai jos;
<html>
<head>
<title>Titlul</title>
<style type="text/css">
obiect_css {
proprietate:valoare;
alta_proprietate:valoare;
}
</style>

</head>
<body>
... Continut ...
</body>
</html>
- Observati sintaxa codului CSS. Perechile proprietate:valoare se scriu intre acoladele
obiectului CSS pe care-l definesc, intre "proprietate" si "valoare" trebuie sa fie un caracter
doua-puncte (:) iar la sfarsitul perechii se adauga un caracter punct-si-virgula (;)
- Cand este adaugat intr-un fisier extern ".css", codul CSS se scrie la fel, dar nu se mai adauga
tag-ul <style>.

1. Obiectele (regulile) CSS


Exista trei tipuri principale de obiecte CSS: selector, clasa si identificator.
- Selectorul HTML
Selectorul HTML se foloseste pentru a redefini modul de afisare a continutului etichetei
HTML.
Un selector HTML reprezinta partea etichetei HTML care indica navigatorului tipul de
eticheta.
Iata un exemplu:
h1 { font-family:"Arial"; font-size:15px; }
- Aici selectorul este "h1".
Definirea unui selector HTML folosind CSS are ca rezultat redefinirea etichetei HTML.
Selectorul si eticheta desi par identice, totusi nu sunt.
- Clasa
Clasa este un obiect care poate fi aplicat oricarei etichete HTML.
O clasa trebuie creata in interiorul etichetei HTML inainte de a fi definita intr-un cod CSS.
Crearea clasei in interiorul etichetei se face simplu, prin specificarea cuvantului class si
numele clasei, ca in exemplu de mai jos:

<h1 class="nume_clasa"> Text </h1>

- "nume_clasa", poate fi orice nume dorim.


- Apoi in interiorul codului CSS, clasa trebuie definita prin adaugarea unui caracter punct (.)
inaintea numelui clasei, ca in exemplu urmator:
.nume_clasa { font-family:"Arial"; font-size:15px; }
Numele aceleasi clase poate fi atribuit mai multor etichete HTML din aceeasi pagina, si toate
vor prelua acelasi stil css.
- Identificator
Obiectele de tip identificator (ID) sunt asemanatoare cu clasele. Pot fi aplicate oricarei
etichete HTML, dar spre deosebire de clase, numele unui identificator trebuie atribuit numai
unei singure etichete HTML dintr-o pagina, pentru alta eticheta se adauga un ID cu nume
diferit.

Ca si clasa, identificatoru trebuie intai creat in interiorul etichetei HTML. Modul de creare
este simplu, prin specificarea cuvantului id si numele clasei, ca in exemplu de mai jos:

<h1 id="nume_id"> Text </h1>

- "nume_id", poate fi orice nume dorim.


In interiorul codului CSS, identificatorul este definit prin adaugarea unui caracter diez (#)
inaintea numelui, ca in exemplu urmator:
#nume_id { font-family:"Arial"; font-size:15px; }
In urmatoarea lectie va fi explicat mai amanuntit modul de definire si rolul acestor obiecte
CSS .

2. Componentele unui obiect CSS


Obiectele CSS, indiferent de tipul lor, au in componenta urmatoarele elemente:

Selectorii - identifica un obiect; pot fi selectori de etichete HTML, clase sau


identificatori.

Proprietatile - identifica o proprietate a obiectului; se refera in special la aspect.

Valorile - sunt atributele unei proprietati; pot fi cuvinte cheie, valori numerice sau
procentuale, tipul valorii depinzand de proprietate.

Sintaxa generala a unei reguli CSS este urmatoarea:

selector {proprietate: valoare; }

Proprietatile si valorile constituie definitia regulii (obiectului) CSS. Acestea se regasesc sub
forma de perechi,despartite de caracterul doua puncte :, fiecare pereche se termina cu un
caracter punct si virgula ";".
Etichetele HTML nu sunt sensibile la diferenta intre majuscule si litere mici. Dar odata cu
aparitia limbajului XHTML, acesta face distinctie intre majuscule si minuscule, astfel ca toate
etichetele si toti selectorii trebuie scrisi cu litere mici.

Crearea Foilor de Stil


1. Etichete HTML si stiluri CSS
CSS ofera posibilitatea de a schimba aspectul fiecarei etichete in parte, prin stabilirea unui
anume stil in interiorul ei, cu atributul "style". Acest lucru este util mai ales pentru a anula
alte stiluri ale elementului respectiv sau de a da elemente grafice de stil doar etichetei
respective.
Sintaxa pentru definirea stilurilor in interiorul unei etichete HTML este urmatoarea:

<eticheta style="proprietate:valoare;"> text ... </eticheta>

CSS permite si definirea unor reguli de stil generale intr-o pagina web. Acest set de reguli
trebuie scris in sectiunea de antet (head) a documentului, in cadrul tag-ului <style>.
Sintaxa pentru definirea CSS intr-un document HTML, in interiorul etichetei <head>
</head>, este urmatoarea:

<style type="text/css">
selector_1 {proprietate1:valoare1; proprietate2:valoare2; ... }
...
selector_n {proprietate1:valoare1; proprietate2:valoare2; ... }
</style>

- Definirea tuturor stilurilor intr-o locatie comuna usureaza modificarea mai rapida a unei
pagini.
Iata un exemplu practic de cod css:
<style type="text/css">
h1 { font-family:Arial; font-size:15px; font-weight:bold; color:#1111ff; }
p {font-family:Arial; font-size:12px; color:blue; }
</style>
Foile de stil pot fi utilizate nu doar la nivel de pagina web, ci si la nivel de intreg site. Astfel,
trebuie creata o foaie de stil externa intr-un fisier separat, de preferat cu extensia ".css", care
poate fi inclus in pagina HTML prin doua procedee: legatura sau import.
Crearea unei foaie de stil externe se face scriind codul CSS intr-un fisier text cu ajutorul unui
editor de texte simplu (de exemplu Notepad in Windows), sau specializat in acest sens
(precum Notepad++). In fisierul extern creat se adauga reguli CSS, fara insa ca aceste reguli
sa fie incadrate in etichete STYLE.
Dupa ce a fost creata foaia de stil externa, aceasta poate fi folosita de un document HTML
utilizand urmatoarea sintaxa, in interiorul tag-ului <head> </head>:

<link rel="stylesheet" href="nume_fisier.css" type="text/css">

- Eticheta LINK apare in antetul documentului (sectiunea head), iar atributele folosite
transmit navigatorului tipul de legatura ("rel" legatura cu o foaie de stil, "type" - tipul
codului din fisier) si locatia inspre fisierul ce contine codul CSS ("href" calea si numele
complet al fisierului, inclusiv extensia).
O alta modalitate de utilizare a foilor de stil externe intr-un document HTML o reprezinta
importul acestora folosind comanda @import.
Sintaxa pentru importul unei foi de stil externe este urmatoarea:

<style type="text/css">
@import url(nume_fisier.css);
</style>

Pentru a importa un fisier CSS extern se foloseste in cadrul sectiunii HEAD a documentului
HTML eticheta STYLE. In cadrul acestei etichete este adaugata instructiunea "@import" de
mai sus, unde "nume_fisier.css" reprezinta calea si numele fisierului ce contine regulile CSS
definite.
Alaturi de instructiunea "@import", in cadrul etichetei STYLE, pot fi adaugate definiti si
selectori suplimentari.
Legatura la un fisier CSS extern sau importul acestuia intr-un document HTML are acelasi

efect ca si cum stilurile incluse ar fi fost definire direct in eticheta STYLE din sectiunea
HEAD a documentului HTML.

2. Definirea selectorilor
- Selectorii HTML pot fi definiti prin adaugarea unui numar de definitii compatibilie cu
eticheta HTML la care se refera, avand urmatoarea forma generala:

selector_HTML { proprietate1:valoare1; proprietate2:valoare2; ... }

Dupa redefinirea etichetei HTML, stilurile etichetelor respective din documentul HTML vor
fi modificate automat. Prin redefinirea unei etichete, proprietatile prestabilite existente nu
sunt anulate, ci se adauga altele noi.
Utilizarea selectorilor de tip clasa ofera posibilitatea configurarii unor stiluri care se pot
aplica doar acelor elemente care sunt etichetate cu clasa respectiva. Sintaxa generala de
definire a unei clase CSS este:

.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }

Exista cazul in care o clasa este asociata unui selector HTML, ceea ce inseamna ca acea clasa
poate fi folosita doar cu eticheta HTML respectiva. Pentru a defini o clasa care sa afecteze in
mod direct un anume selector HTML, se foloseste urmatoarea sintaxa:

selector_HTML .nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }

Selectoarele de clasa sunt acceptate de toate navigatoarele. Numele unei clase e recomandat
sa fie diferit de cuvantele rezervate JavaScript.
- Asemanator cu selectorii de clasa se definesc si identificatorii (id-ul). Acestia sunt folositi
pentru crearea de stiluri care pot fi atribuite unei singure etichete HTML dintr-o pagina.
Sintaxa generala de definire a unui identificator este:

#identificator { proprietate1:valoare1; proprietate2:valoare2; ... }

Identificatorii permit definirea unui element sub forma unui obiect, fiind folositi doar o
singura data in cadrul unei pagini web pentru identificarea tag-ului respectiv, astfel poate fi
manipulat si cu ajutorul functiilor JavaScript.
Numele unui identificator e recomandat sa fie diferit de cuvantele rezervate JavaScript.

3. Crearea etichetelor HTML personalizate


Majoritatea etichetelor HTML au unele proprietati prestabilite. Acestea fie raman asa cum
sunt, fie pot fi redefinite. Exista insa cazuri in care se doreste crearea unor etichete
personalizate, pornind de la zero. In acest caz se folosesc etichetele <span> si <div>.
Eticheta <span> nu are proprietati mostenite. Ea reprezinta doar o locatie vida care creaza o
eticheta in linie.
Pentru a configura o eticheta in linie trebuie definita o clasa sau identificator care sa poata fi

aplicat apoi unei etichete <span>. Iata un exemplu cu, forma generala, in care selectori sunt
precedati de eticheta <span> :
...
<span class="nume_clasa"> ... </span>
...
<span id="span1"> ... </span>
...
<span class="clasa_span"> ... </span>
...
Acum iata cum pot fi definiti acestia in interiorul unei foi de stil:
.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }
#span1 { proprietate1:valoare1; proprietate2:valoare2; ... }
span .clasa_span { proprietate1:valoare1; proprietate2:valoare2; ... }
In momentul in care se doreste configurarea unui bloc separat de restul continutului unui
document HTML, solutia este eticheta <div>. Aceasta creaza o zona proprie in pagina, cu
linie noua atat deasupra sa cat si dedesubtul sau.
Pentru crearea etichetelor DIV se procedeaza la fel ca si in cazul etichetelor in linie SPAN,
prin definirea mai intai a unei etichete de tip clasa sau identificator, urmata apoi de aplicarea
ei asupra unei etichete <div>.
Iata forma generala de aplicare a unei etichete <div> intr-o pagina HTML :
...
<div class="nume_clasa"> ... </div>
...
<div id="div1"> ... </div>
...
Definirea acestor etichete <div> intr-un cod CSS se face astfel:
div { proprietate1:valoare1; proprietate2:valoare2; ... }
.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }
#div1 { proprietate1:valoare1; proprietate2:valoare2; ... }
Regulile CSS pentru definirea etichetelor <span> sau <div>, pot fi plasate la fel ca si celelalte
tipuri de selectoare, in sectiunea "head" a documentului in interiorul etichetei "style", sau
intr-un fisier extern carev ulterior este legat sau importat in documentul HTML.
Mai multe lucruri despre DIV si SPAN puteti invata de aici -> DIV si SPAN.

4. Definirea de reguli similare


Daca mai multi selectori folosesc aceleasi definitii css, acestia pot avea aceeasi lista de
elemente, fiind scrisi separat prin virgule. Sintaxa generala pentru definirea unei liste cu mai
multi selectori este urmatoarea:

selector1, selector2, ... { proprietate1:valoare1; proprietate2:valoare2; ... }

Impreuna cu selectorii pot fi de asemenea definiti identificatorii si clasele. Dezavantajul ar fi


ca in momentul in care este modificata o valoare a unei proprietati incluse in definitie,
valoarea respectiva se va modifica in toate etichetele reprezentate de acesti selectori.

5. Definirea etichetelor in context (imbricate)

Cand o eticheta este inconjurata de alte etichete (aflandu-se astfel una in interiorul alteia),
spunem ca aceste etichete sunt imbricate. Eticheta exterioara se numeste, in acest caz,
eticheta parinte, iar cea inferioara se numeste copil. Se pot crea reguli care revin numai
etichetelor copil, sintaxa generala a unei astfel de reguli fiind:

selector1 selector2 ... { proprietate1:valoare1; proprietate2:valoare2; ... }

- Unde "selector1" este selectorul parinte iar "selector2" este selectorul copil.
Lista de selectori imbricati poate fi mai mare de doi, ultimul selector din lista este cel care
primeste toate stilurile incluse in regula si in plus le mosteneste si pe cele ale parintilor.
Ca si selectorii singuri, selectorii imbricati pot include in lista clase, identificatori sau
selectori HTML.
Toate etichetele HTML, cu exceptia etichetei BODY, au cel putin o eticheta parinte care le
inconjoara. De cele mai multe ori stilurile etichetelor din interior preiau stilurile etichetelor
parinte (exista insa cazuri in care proprietatile nu sunt mostenite de etichetele imbricate).
Acest mecanism se numeste mostenirea stilurilor.
Prin redefinirea unui selector, eticheta nu-si pierde proprietatile prestabilite, doar in cazul in
care acestea sunt modificate. Astfel proprietatile mostenite pot fi anulate prin redefinirea
acestora in lista de definitii a etichetei imbricate.

6. Cresterea prioritatii unei definitii


Valoarea !important adaugata unei definitii atribuie maximum de prioritate in determinarea
ordinii unei executii.
Valoarea !important trebuie plasata inaintea caracterului ;, ca in exempul urmator:

selector { proprietate1:valoare1; proprietate2:valoare2 !important; ... }

7. Determinarea ordinii executiei


Deoarece exista mai multe moduri de a aplica stilurile, pot apare situatii in care unei etichete
sa-i fie aplicate mai multe stiluri. Foile de stil din doua sau mai multe surse, folosite simultan,
pot cauza contradictii. De aceea exista cateva reguli care determina ordinea executiei (numita
si cascada), acestea sunt:

1. Regulile CSS scrise in interiorul paginii HTML, in cadrul etichetei "style" din
sectiunea "head" au o prioritate mai mare decat cele scrise intr-un fisier extern, iar
regulile scrise in interiorul etichetelor au o prioritate mai mare decat cele din cadrul
etichetei "style" din sectiunea "head".
2. Existenta atributului !important confera prioritate maxima la afisare definitiei in
care este utilizat.
3. Sursa regulilor exista numeroase navigatoare care permit utilizatorului sa-si
defineasca propriile foi de stil. Totusi, foile de stil ale autorului le anuleaza pe cele ale
vizitatorului daca acestea din urma nu au valoarea "!important".
4. Specificitate cu cat o regula dispune de mai multi selectori HTML, de clasa si de
identificator, cu atat prioritatea ei creste. ID-urile au valoarea 100, clasele au valoarea
10, iar selectorii HTML au valoarea 1.
5. Momentul aparitiei cu cat un stil apare mai tarziu, cu atat importanta lui este

mai mare. Astfel, definitiile unei etichete copil au prioritatea mai mare si anuleaza
toate stilurile precedente cu care intra in conflict.

8. Adaugarea comentariilor la CSS


Este bine ca uneori sa fie adaugate comentarii in codul CSS, mai ales in cazul fisierelor
externe. Comentariile ajuta la intelegerea codului, facandu-se astfel cunoscut, pentru mai
tarziu, rolu anumitor elemente din codul CSS.
Comentariile nu au nici un efect si pot fi plasate in jurul regulilor, fiind utile si in cazul
navigatoarelor care nu suporta CSS.
Pentru a adauga comentarii in regulile de stil avem la dispozitie doua modalitati:

In cazul in care comentariul se intinde pe un singur rand este suficienta folosirea


perechii de caractere // urmata de comentariu.

In cazul in care comentariul contine mai multe linie, trebuie plasat intre /* care
deschide zona de comentariu si */ care indica sfarsitul comentariului.

In cazul folosirii comentariilor cu // se pot adauga oricate slash-uri, minimul fiind de doua.
Iata un exemplu in care puteti vedea cum pot fi adaugate comentariile:
/* Comentariu,
pe mai
multe linii */
.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }
// Comentariu pe o singura linie
#div1 { proprietate1:valoare1; proprietate2:valoare2; ... }

Configurarea fonturilor
Alegerea potrivita a fonturilor si folosirea acestora in cadrul paginilor web este importanta,
poate atrage critici si comentarii din partea vizitatorilor, mai ales daca formatarea clasica prin
scris normal, aldin sau cursiv nu este folosita corespunzator. CSS include facilitati de control
asupra aspectului fonturilor, prin posibilitatea de a stabili familia de fonturi, atributele
ingrosat si inclinat, dimensiunea literelor precum si spatiul dintre linii.
Exista cinci familii de fonturi de baza:

serif au un ornament (serif) plasat la terminatia literei, care ii ofera o distinctie


speciala. Sunt folosite pentru tiparire, chiar daca textele sunt mai mari sau mai mici.
Nu sunt indicate pentru afisarea textelor pe ecran.

sans serif sunt fonturi care nu folosesc serife, fiind indicate pentru continut text
general.

monospace fonturile monospatiate pot avea serife, ele se deosebesc prin faptul ca
fiecare litera ocupa aceeasi cantitate de spatiu. Sunt cele mai indicate pentru textele
care trebuie citite cu exactitate, ca de exemplu liniile de program.

cursive imita scrisul de mana, intr-o maniera stilizata. Sunt indicate in scopuri
decorative, nefiind recomandate pentru scrierea unor texte mai lungi.

fantasy nu se incadreaza in nici una dintre categoriile de mai sus, fiind fonturi care
au un caracter predominant ornamental (reprezentand ilustratii sau pictograme).

1. Stabilirea fontului
Fontul folosit pentru afisarea unui text poate fi stabilit prin proprietatea "font".
Pentru definirea fontului in cadrul unei reguli, trebuie specificata, dupa selectorul din cadrul
foii de stil, proprietatea font-family urmata de numele fontului sau a fonturilor (despartite
prin virgula). Este bine ca numele fonturilor sa fie incadrate intre ghilimele simple sau duble,
mai ales daca numele acestora contine spatii.
Forma generala fiind urmatoarea:

selector { font-family:"nume_font1", "nume_font2", ..., nume_generic }

- Dupa ultima virgula se pot folosi urmatoarele nume generice de fonturi: "serif", "sans-serif",
"cursive", "monospace" sau "fantasy". Includerea unei asemenea valori este optionala, insa
recomandata.
Iata un exemplu practic:
h1 { font-family:"Arial", "Helvetica", sans-serif }
Cand este specificata o lista de fonturi, navigatorul incearca sa foloseasca primul font din
lista, daca nu este gasit parcurge lista pana in momentul in care intalneste un font instalat.
Daca nu exista fonturi echivalente, textul va fi afisat cu fontul prestabilit de browser. Daca
este specificat un nume generic, textul va fi afisat cu un font apartinand aceluiasi stil, in cazul
in care fonturile specificate in lista nu sunt disponibile.
Exista posibilitatea folosirii unei palete largi de fonturi in crearea paginilor web, nu doar a
celor din lista limitata a fonturilor compatibile cu navigatoarele. Solutia consta in inglobarea
fontului in cadrul paginii si trimiterea lui in mod automat in calculatorul vizitatorului, adica,
descarcarea si folosirea lui automata.
Pentru a ingloba un font intr-o pagina si a-l descarca, se foloseste intructiunea @font-face.
Aceasta trebuie sa includa proprietatea font-family, urmata de numele fontului si apoi trebuie
indicata locatia pe server de unde poate fi descarcat fontul respectiv.
Codul CSS este urmatorul:

@font-face { font-family:nume_font src: url(locatie_font); }

Nu poate fi ales orice font pentru a fi descarcat, acesta trebuie sa respecte un anume format.
Totusi, problema este ca nu exista un format valabil pentru toate navigatoarele, de exemplu
Internet Explorer foloseste fonturi in format "eof" (obtinute cu ajutorul unui program numit
WEFT), iar Mozilla foloseste un format "otf".

2. Stabilirea dimensiunii fontului


Cu ajutorul CSS se poate stabili dimensiunea fontului folosind valori absolute (exprimate in
diferite unitati de masura: pixeli, centimetri), procentuale, sau chiar relative.
Pentru a defini dimensiunea fontului in cadrul unei reguli trebuie specificata proprietatea

font-size urmata de o valoare a dimensiunii care poate lua una din urmatoarele tipuri de
valori:

- unitate de masura - exprimata in pixeli, puncte, inci sau centimetri

- expresie absoluta - xx-small, x-small, small, medium, large, x-large si xx-large

- expresiile smaller sau larger, ca raport cu elementul parinte

- procent - un numar exprimat in procente (cu %), care indica marimea textului in
raport cu dimensiunea elementului parinte

Iata forma generala a codului CSS pentru stabilirea dimensiunii fontului:

selector { font-size:valoare }

Este bine ca pentru foile de stil care formateaza iesirea la imprimanta sa se foloseasca ca
unitati de masura punctele, cm sau mm.
Pixelii reprezinta, probabil, cea mai des utilizata unitate de masura pentru stabilirea
dimensiunii fontului. Pixelii nu reprezinta o masura foarte sigura, dar, de obicei, pentru
afisarea pe ecran, constituie o masura mai sigura decat dimensiunea in puncte.
Iata un exemplu practic exprimat in pixeli:
h1 { font-size:15px; }

3. Text inclinat
Atributul "font-style" permite scrierea textelor inclinate in doua moduri: "cursiv" si "oblic".
Notiunile pot fi confundate, insa cursivul se refera la versiunea unui font a carui caractere au
o inclinare spre dreapta, iar oblicul este un font inclinat fortat spre dreapta.
Pentru a crea caractere cursive in cadrul unei reguli trebuie precizata proprietatea font-style,
astfel:

selector { font-style:valoare }

Unde "valoare" poate fi unul din urmatoarele cuvinte: normal, italic sau oblique
Iata un exemplu:
h1 { font-style:italic; }
Valoarea normal se poate folosi pentru a sterge formatarea cu caractere inclinate atunci cand
aceasta este mostenita.

4. Grosimea fontului
Ingrosarea este una dintre metodele utilizate des pentru scoaterea in evidenta a unui text. CSS
confera mai multa flexibilitate in utilizarea textului ingrosat decat elementul HTML <b>, prin
posibilitatea introducerii unei valori proprietatii font-weight, dupa cum urmeaza:

bold scrie fontul folosind caractere ingrosate

bolder - mareste grosimea fontului relativ la grosimea curenta

lighter micsoreaza grosimea fontului fata de grosimea curenta

- o valoare cuprinsa intre 100 si 900 (multiplu de 100) reprezinta valoarea


ingrosarii, bazata pe versiunile alternative disponibile ale fontului

normal elimina formatarea cu caractere aldine (ingrosate)

In cazul folosiri valorii cuprinse intre 100 si 900, 400 reprezinta valoarea corespunzatoare
textului normal, iar 700 valoarea ingrosarii pentru stilul aldin. Majoritatea fonturilor nu
dispun de noua ponderi, astfel ca daca este specificata o valoare care nu este disponibila, va fi
folosita o alta pondere.
Forma generala pentru stabilirea grosimii fontului este urmatoarea:

selector { font-weight:valoare }

Iata un exemplu practic:


h1 { font- weight:bold; }

5. Majuscule mici
Majusculele mici sunt folosite de obicei in cadrul titlurilor, ele fiind obtinute prin convertirea
literelor mici in majuscule cu o dimensiune mai mica decat majusculelor normale. Astfel se
obtin cuvinte in care toate literele sunt scrise cu majuscule insa prima litera este mai inalta
decat celelalte.
Stabilirea unei reguli pentru majuscule mici se realizeaza prin utilizarea proprietatii fontvariant cu valoarea small-caps. Prin folosirea valorii normal, vor fi anulate celelalte valori
mostenite ale proprietatii font-variant.
Forma generala este urmatoarea:

selector { font-variant:valoare }

Iata cum formatam un text dintr-o eticheta "h1" cu valoarea "small-caps":


h1 { font-variant:small-caps; }

6. Valori multiple pentru font


Deseori este util sa fie precizate toate elementele fontului intr-o singura definitie.
Pentru a se realiza acest lucru este folosita proprietatea "font" urmata de valorile pentru
celelalte proprietati, separate prin spatiu.
Sintaxa generala este urmatoarea:

selector { font:val_font-family val_font-style val_font-variant val_font-weight


val_font-size val_height }

Daca o anumita valoare din lista este omisa, navigatorul va folosi valoarea prestabilita.
Iata si un exemplu practic de folosire a mai multor valori in aceeasi definitie:
h1 { font:"Arial",sans-serif italic small-caps bold 14pt; }

Configurarea textului
Textele alcatuiesc o buna parte din paginile web. Metodele de afisare a textelor prin controlul
nu numai a fontului, dimensiunii si culorilor, ci si prin alte elemente, pot imbunatati aspectul
pagini si pot atrage atentia asupra anumitor elemente din text.

1. Spatiul intre litere


Spatierea se refera la cantitatea de spatiu dintre literele unui cuvant. Se poate aduaga sau
reduce spatiul dintre litere folosind proprietatea letter-spacing, urmata de o valoare
exprimata intr-o anumita unitate de masura, ce poate lua si valori negative.
Sintaxa generala este urmatoarea:

selector { letter-spacing:valoare }

Daca valoarea proprietatii este normal sau 0 atunci spatierea va fi fixata la valorile implicite
(fara modificari suplimentare).
Daca se utilizeaza o valoare exprimata in em atunci dimensiunea rezultata va fi calculata in
raport cu cea a elementului parinte.
Exemplu:
h1 { letter-spacing:1,5em; }
- Puteti folosi si pixeli (px)

2. Spatiul dintre cuvinte


CSS da posibilitatea modificarii spatiului intre cuvinte atat prin marire, cat si prin micsorare.
Spatiul dintre cuvinte poate fi modificat folosind proprietatea word-spacing, urmata de o
valoare exprimata intr-o anumita unitate, fiind de obicei stabilita in pixeli.
Pentru anularea spatierii intre cuvinte, valoarea proprietatii trebuie sa fie: normal.
Sintaxa generala este urmatoarea:

selector { word-spacing:valoare }

O valoare pozitiva semnifica un plus de spatiu adaugat la valoarea implicita, iar o valoare
negativa reduce acest spatiu. Daca valoarea este egala cu 0 atunci spatiul dintre cuvinte este
fixat la valoarea prestabilita, neproducand de fapt nici un efect, fiind similar cu valoarea
normal.
Iata un exemplu in care marim spatiul intre cuvintele din eticheta "h2" cu 8 pixeli:
h2 { word-spacing:8px; }

3. Spatiul intre linii


Inaltimea randurilor se refera la spatiul dintre liniile paragrafului.
Modificarea spatiului intre linii poate avea ca efect o mai buna si usoara citire a textului in
cazul in care aceasta este mai mare (creaza o regiune cu spatiu intre liniile de text). Alteori,
daca inaltimea este mai mica (folosita la randurile de titlu), poate conferi un aspect mai stilat.
Pentru a modifiica inaltimea randurilor se foloseste proprietatea line-height, urmata de o
valoare care poate fi exprimata in trei moduri:

- un numar care inseamna multiplicarea dimensiunii fontului cu numarul respectiv


pentru a obtine valoarea spatierii;

- o valoare de tip absolut, exprimata in pixeli, puncte sau orice alta unitate de masura
folosita in CSS, care indiferent de dimensiunea stabilita a fontului, inaltimea liniei va
avea o valoare exacta;

- un procent, care stabileste inaltimea liniei ca fiind egala cu un anumit procent din
dimensiunea fontului folosit pentru scrierea textului.

Sintaxa generala pentru modificarea spatiului intre linii este:

selector { line-height:valoare }

Iata un exemplu in care marim inaltimea liniei cu 50% din dimensiunea fontului:
h1 { line-height:150%; }
Inaltimea liniei poate de asemenea fi definita si in cadrul proprietatii "font-size", prin
introducerea caracterului "/" urmat de valoarea pentru inaltimea randului, imediat dupa
dimensiunea fontului.
Exemplu: h1 { font-size:12px/28px; }

4. Marimea (tipul) literelor


Exista cazuri in care se doreste afisarea textului cu un anume tip de litere. Folosind CSS, se
poate specifica explicit ca textul sa apara cu majuscule initiale, majuscule, minuscule,
combinat sau asa cum a fost el scris.
Cu ajutorul proprietatii text-transform se poate controla marimea literelor din text, indiferent
de modul cum a fost el scris initial.
Pentru a schimba tipul literelor dintr-un text, proprietatea text-transform va fi urmata de o
valoare care poate fi:

capitalize pentru ca primul caracter din fiecare cuvant sa fie scris cu majuscula;

uppercase pentru ca toate caracterele sa fie scrise cu majuscule;

lowercase - pentru ca toate caracterele sa fie scrise cu litere mici;

none pentru ca textul sa fie afisat asa cum este.

Sintaxa generala este:

selector { text-transform:valoare }

Iata un exemplu in care toate literele vor fi afisate cu majuscule:


h1 { text-transform:uppercase; }
Proprietatea "text-transform" este utila atunci cand textele sunt create in mod dinamic (de
exemplu, in cazul in care ele provin dintr-o baza de date sau form HTML).

5. Alinierea textului
Un text poate fi aliniat de la marginea din stanga, din dreapta, centrat sau la ambele margini
(stanga-dreapta).
Proprietatea text-align ofera posibilitatea controlului asupra alinierii textului.
Definirea alinierii se face specificand dupa proprietatea text-align una din valorile: left,
right, centersau justify.
Forma generala este:

selector { text-align:valoare }

Proprietatea poate fi aplicata numai elementelor la nivel de bloc (DIV, UL, Hx, p), valoarea
sa implicita fiind in majoritatea cazurilor stabilita la valoarea "left".
Iata un exemplu in care textul din eticheta "h2" este aliniat "stanga-dreapta":
h2 { text-align:justify; }
- In cazul in care alinierea textului este "stanga-dreapta", spatierea cuvintelor si a literelor se
schimba pentru a se obtine linii de aceeasi lungime.

6. Alinierea pe verticala a textului


Cu ajutorul proprietatii vertical-align se poate preciza pozitia unor elemente (in linie) in
raport cu textul din jurul lor. Asta inseamna ca proprietatea poate fi folosita doar cu etichete
in linie care nu determina un salt la linie noua, de obicei utilizandu-se cu eticheta "span".
Sintaxa pentru utilizarea proprietatii vertical-align este:

selector { vertical-align:valoare }

Pentru definirea alinierii pe verticala a textului se foloseste una din urmatoarele optiuni:

super pentru scrierea textului in stil exponent, deasupra liniei de baza;

sub - pentru scrierea textului in stil indice, sub linia de baza;

baseline pentru scrierea textului pe linia de baza;

- una din valorile: "top", "middle", "bottom", "text-top", "text-bottom" pentru a


alinia textul relativ la alinierea parintelui acestuia;

- valoare procentuala care ridica sau coboara linia de baza a elementului


proportional cu dimensiunea fontului elementului parinte.

Iata un exemplu in care textul din eticheta <span> va aparea ca exponent fata de textul din
stanga-dreapta lui:
span { vertical-align:super; }

7. Formarea paragrafelor
Cu ajutorul proprietatii text-indent se poate stabili ce spatiu suplimentar este inserat la
inceputul primei linii de text dintr-un paragraf. Pentru aceasta, proprietatea text-indent este

urmata de o valoare exprimata intr-o unitate de masura (pixeli sau em) sau in procente
(proportional cu latimea paragrafului).
Sintaxa generala este:

selector { text-indent:valoare }

Valorile pozitive determina o indentare tipica (spre dreapta), in timp ce valorile negative
determina o indentare inspre argine, fiind necesar sau marirea umplerii (padding) sau marirea
marginilor.
Iata un exemplu de cod CSS in care va fi determinat un spatiu de 20 pixeli la inceputul
paragrafului din eticheta <p>:
p { text-indent:20px; }
Daca se utilizeaza o valoare exprimata in unitati "em", atunci rezultatul va fi relativ la
dimensiunea fontului elementului asupra caruia se aplica. Pentru eliminarea decalarii se
utilizeaza valoarea 0.

8. Aplicarea elementelor decorative


CSS permite ornarea textului prin scoaterea lui in evidenta in patru moduri: subliniere,
supraliniere, taierea textului cu o linie sau crearea de texte care clipesc.
Aplicarea de elemente ornamentale unui text se realizeaza prin proprietatea text-decoration,
urmata de una din valorile:

underline pentru a sublinia textul

overline pentru a trasa o linie deasupra textului

line-through pentru a taia textul cu o linie

blink pentru a face textul sa apara si dispara intermitent

Forma generala este :

selector { text-decoration:valoare }

Pentru a elimina decoratiile se foloseste valoarea "none". Prin folosirea acestei valori se
elimina si sublinierile link-urilor, chiar daca navigatorul are prestabilit sa le arate subliniat.
Iata un exemplu de cod in urma caruia link-urile nu vor mai fi afisate subliniat:
a:link { text-decoration:none; }
Elementul decorativ "blink" a prezentat probleme, fiind de curand eliminat de unele
navigatoarelor.

9. Spatiile albe
Intreruperile de linie si spatiile albe dintr-un document HTML sunt tratate ca un singur spatiu
sau sunt ignorate, daca nu este utilizata eticheta <pre>.
CSS permite afisarea acestor spatii, precum si a intreruperilor textului, utilizand proprietatea

white-space, urmata de valoarea "pre".


Forma generala este:

selector { white-space:valoare }

In locul cuvantului "valoare" poate fi adaugat: "pre", "nowrap" sau "normal"


Utilizarea valorii "nowrap" impiedica trecerea la linia urmatoare.
Valoarea "normal" permite navigatorului sa decida asupra modului de tratare a spatiilor. De
obicei, acestea vor fi transformate intr-un singur spatiu.
Iata un exemplu in urma caruia spatiile albe si trecerea la linia noua vor fi afisate asa cum au
fost scrise:
p { white-space:pre; }
Spre deosebire de eticheta <pre> care schimba fontul cu unul monospatiat, valoarea "pre" a
proprietatii white-space nu are nici un efect asupra fontului elementului la care se aplica.

Configurari pentru culori si fundal


Daca HTML permitea configurarea unor culori si elemente grafice de fundal doar pentru
anumite elemente, CSS permite definirea culorii si a fundalului pentru orice element din
pagina web.

1. Configurarea fundalului
Se poate schimba fundalul (background) intregii pagini, sau pentru un anumit element din
pagina, fie el de tip DIV, paragraf, imagine, tabel sau formular.
a) Culoarea fundalului
Pentru a schimba culoarea fundalului se utilizeaza proprietatea background-color, urmata de
o valoare care reprezinta numele culorii sau valoarea RGB, exprimata in cod hexa.
Sintaxa generala este:

selector {background-color:valoare }

Daca se foloseste valoarea "transparent" navigatorul va afisa culoarea prestabilita sau cea a
elementului parinte.
Pentru schimbarea fundalului intregii pagini se aplica aceasta proprietate selectorului "body".
Iata un exemplu in care culoarea de fundal a paginii este schimbata in albastru:
body { background-color:#0000ff; }
b) Imaginea de fundal
Puteti utiliza pentru fundal si o imagine, pentru aceasta se foloseste proprietatea
background-image, urmata de adresa URL a locatiei imaginii.
Sintaxa generala este:

selector { background-image:url('adresa_URL'); }

Unde "adresa_URL" este calea si numele imaginii care va fi folosita


Daca in locul adresei URL se foloseste valoarea "none", navigatorul nu va folosi nici o
imagine.
Iata un exemplu in care pentru fundalul paginii este folosita o imagine:
body { background-image:url('cale/imagine.gif'); }
c) Repetarea imaginii de fundal
Pe langa posibilitatea afisarii unui element grafic ca fundal, CSS ofera si un mod de repetare
a acestuia.
Pentru a repeta imaginea de fundal se foloseste proprietatea background-repeat, urmata de o
valoare care poate avea una din urmatoarele optiuni:

repeat pentru a repeta imaginea pe toata suprafata elementului respectiv;

repeat-x pentru a repeta imaginea numai pe orizontala;

repeat-y pentru a repeta imaginea numai pe verticala;

no-repeat pentru a afisa imaginea o singura data, fara repetare.

Forma generala este:

selector { background-repeat:valoare }

Iata un exemplu de cod in care imaginea folosita pentru fundalul paginii se va repeta pe
verticala pe toata inaltimea documentului:
body { background-repeat:repeat-y; }
d) Controlul imaginii de fundal
CSS poate defini modul de tratare a fundalului la derularea paginii, pentru aceasta se
foloseste proprietatea background-attachment cu optiunea "fixed", pentru a lipi imaginea
de fundal de fereastra navigatorului sau optiunea "scroll", pentru a permite derularea imaginii
de fundal alaturi de elementul corespunzator atunci cand vizitatorul deruleaza pagina.
Sintaxa generala este:

selector { background-attachment:valoare }

Iata un exemplu practic aplicat imaginii folosita pentru fundalul paginii:


body { background-attachment:scroll; }
e) Pozitia imaginii de fundal
Pentru a pozitiona imaginii de fundal in functie de coltul din stanga-sus al elementului se
utilizeaza proprietatea background-position urmata de doua valori (coordonate x si y)
separate prin spatiu, 'x' pentru pozitia orizontala si 'y' pentru cea verticala.
Forma generala a acestei proprietati este:

selector { background-position:valoare }

Coordonatele x si y pot fi exprimate ca valori absolute sau ca procente. Se pot folosi si


cuvintele cheie: "left", "center" sau "right" pentru coordonata x; respectiv "top", "center"
sau "bottom" pentru coordonata y.
Iata un exemplu in care imaginea de fundal a paginii este pozitionata la 10 pixeli (x si y)
relativ la coltul din stanga-sus:
body { background-position:10px 10px; }
f) Stabilirea simultana a proprietatilor fundalului
Toate proprietatile fundalului pot fi configurate cu ajutorul proprietatii background. Se poate
stabili simultan printr-o lista de valori proprietatile fundalului, enumerate in orice ordine si
separate prin spatiu.
Cand se utilizeaza proprietatea background, nu este necesar sa fie specificate toate
proprietatile, cele nespecificate fiind stabilite la valoare lor implicita.
Sintaxa generala este:

selector {background:val_bg-color val_bg-img val_bg-repet val_bg-attach


val_bg-position }

Valoarea implicita a proprietatii background-color este "transparent".


Valoarea implicita a proprietatii background-image este "none".
Valoarea implicita a proprietatii background-attachment este "scroll".
Valoarea implicita a proprietatii background-position este "top left".
Iata si un exemplu in care sunt aplicate mai multe proprietati pentru background, in aceeasi
definitie:
div { background:#e8e8fe url('imagine.jpg') 50% repeat }
- DIV-ul va avea culoarea de fndal "#e8e8fe", cu o imagine pozitionata la jumatatea distantei
X, Y si care se repeta.

2. Stabilirea culorii din prim-plan


Proprietatea color poate schimba culoare oricarui element, fie el text, linie orizontala sau
element de tip formular.
Sintaxa generala pentru utilizarea acestei proprietati este:

selector { color:valoare }

Valoarea culorii poate fi:

numele culorii - una din cele 16 culori predefinite (red, green, blue, white, silver, ...)

valoare in hexa - sub forma #rrggbb

valoare RGB - sub forma rgb(r, g, b), unde r, g, b pot fi reprezentate prin numere
intregi cuprinse intre 0 si 255 sau procente de rosu, verde si albastru cu valori intre
0% si 100%.

Iata un exemplu de cod CSS in care culoarea textului din eticheta "h3" este definita verde:
h3 { color:green; }

Controale pentru chenare si afisarea


elementelor
Indiferent daca o eticheta este de sine statatoare sau imbricata in alte etichete, aceasta poate fi
tratata ca un element distinct pe ecran si poate fi controlata prin intermediul CSS.
Orice element creat intr-o foaie de stil este prezentat in propriul lui cadru.
Notiunea de element se refera la componentele unui document HTML, configurate prin
intermediul etichetelor HTML.
Caseta (cadrul elementului) dispune de numeroase proprietati, intre care se numara:
marginile, chenarul, completarea (umplerea, cunoscuta ca "padding"), latimea si inaltimea,
care pot fi modificate cu ajutorul CSS.
Elementele HTML au patru laturi (sus, dreapta, jos si stanga) la care se pot aplica
proprietatile CSS specifice, restul proprietatilor CSS (font, text, culoare, fundal) se aplica in
continutului casetei. Continutul poate include texte, liste, formulare sau imagini.

1. Latimea si inaltimea unui element


Latimea si inaltimea elementelor pot fi specificate cu ajutorul proprietatilor width si height.
In mod prestabilit acestea sunt determinate automat de catre navigator, fiind egale cu
necesarul afisarii intregului continut. Pentru definirea latimii si inaltimii se folosesc
urmatoarele tipuri de valori:

- o valoare de tip numeric, de obicei in pixeli;

- un procent, care stabileste o valoare proportionala in functie de cea a elementului


parinte;

- valoarea auto, care foloseste latimea si inaltimea calculata de navigator, si care


reprezinta cantitatea de spatiu maxim pe care o poate ocupa elementul pentru afisarea
intregului continut.

Sintaxa generala pentru configurarea latimii si inaltimii este:

selector { width:valoare; height:valoare }

Iata un exemplu in care elementul cu id="un_id" va avea latimea de 300 pixeli si inaltimea de
500 pixeli:
#un_id { width:300px; height:500px; }

2. Marginile unui element


Proprietatea margin permite stabilirea distantei dintre un element si alte elemente alaturate,
prin specificarea unei valor pentru marginea din fiecare latura (sus, dreapta, jos, stanga).

Daca specificati cele 4 valori in aceeasi definitie, acestea reprezinta marginile elementului in
urmatoarea ordine: sus, dreapta, jos, stanga.
Daca specificati doar o valoare, aceasta va fi aplicata tuturor marginilor.
In cazu in care specificati doua sau trei valori, atunci valorile care lipsesc sunt copiate dupa
valorile marginilor opuse.
Sintaxa generala pentru configurarea marginilor unui selector este:

selector { margin:valoare/valori; }

Tipul de valoare folosit poate avea urmatoarele optiuni:

- o valoare de tip lungime (numerica) care poate fi si negativa;

- o valoare procentuala (procent) creaza o margine proportionala cu latimea


elementului parinte;

- valoarea auto lasa controlul marginilor la decizia navigatorului.

Iata un exemplu in care etichetele DIV vor avea distanta pentru marginea de sus 10 pixeli,
dreapta 5 pixeli, jos 8 pixeli si in stanga 15 pixeli:
div { margin:10px 5px 8px 15px; }
Exista posibilitatea de a stabili valoarea marginii doar pentru o singura latura, fara a tine cont
de celelalte margini. Pentru aceasta sunt folosite proprietatile margin-top, margin-bottom,
margin-left si margin-right cu aceleasi valori ca si in cazul proprietatii margin, dupa cum
puteti vedea mai jos.

selector { margin-top:valoare; }
selector { margin-bottom:valoare; }
selector { margin-left:valoare; }
selector { margin-right:valoare; }

3. Chenarul unui element


Proprietatea border permite stabilirea simultana a atributelor chenarului pentru toate cele
patru laturi ale casetei. Aceasta foloseste 3 valori distincte, pentru a configura latimea
(grosimea), stilul si culoarea liniei bordurii.
Sintaxa generala pentru definirea chenarului este:

selector { border:val_grosime val_stil val_culoare; }

Unde

- prima valoare (val_grosime) reprezinta grosimea chenarului si poate fi una din


urmatoarele tipuri:

o - o valoare de tip lungime (valoarea 0 determina anularea afisarii chenarului);


- un cuvant cheie (thin, medium, thick) care caracterizeaza o dimensiune
relativa.

- a doua valoare (val_stil) reprezinta numele stilului atribuit chenarului (valoarea


"none" anuleaza afisarea chenarului);

- ultima valoare (val_culoare) reprezinta culoarea, exprimata in cod hexa sau valoare
RGB.

Iata un exemplu in care div-urile vor avea o bordura groasa de 1 pixel, solid si culoare
albastra:
div { border:1px solid blue; }
- Pot fi folosite si proprietati separate pentru fiecare: "border-width", "border-style" si
"border-color"; prezentate in continuare.
Un atribut care poate fi folosit in configurarea chenarului este border-width, acesta
furnizeaza o metoda rapida pentru stabilirea latimii celor patru laturi din jurul unei casete.
Sintaxa generala este:

selector { border-width:valoare; }

Daca specificati toate cele patru valori, ele sunt aplicate in ordinea: sus, dreapta, jos, stanga.
Daca specificati doar o valoare, ea va fi aplicata tuturor marginilor.
Daca folositi doua sau trei valori, valorile care lipsesc sunt copiate din valorile marginilor
opuse lor in caseta.
Aspectul bordurii poate fi stabilit prin atributul border-style; stilul este aplicat celor patru
margini si este definit astfel:

selector { border-style:valoare; }

Pentru specificarea valorii, pot fi folosite urmatoarele tipuri:

Ultimele patru valori sunt reprezentate tridimensional, iar in cazul in care ele nu sunt

acceptate de catre navigator, in locul lor se va folosi valoarea cu linie plina.


Un alt atribut care poate fi utilizat in configurarea chenarului este border-color, acesta
stabileste culoarea pentru toate cele patru laturi ale chenarului si foloseste pentru valoarea ei
un singur cuvant cheie exprimat in cod hexa, valoare RGB sau numele culorii.
Sintaxa generala este:

selector { border-color:valoare; }

Puteti stabili culoarea fiecarei margini si separat, folosind proprietatile:

border-top-color, border-right-color, border-bottom-color si border-left-color

Fiecare latura a chenarului poate avea valori configurate in mod separat (prin care se stabilesc
stilul si culoarea fiecarei borduri din jurul elementului) dupa cum este prezentat mai jos:

selector { border-top:grosime stil culoare; }


selector { border-bottom:grosime stil culoare; }
selector { border-left:grosime stil culoare; }
selector { border-right:grosime stil culoare; }

4. Adaugarea spatiului in interior, in jurul elementului


Proprietatea padding adauga o cantitate de spatiu suplimentar in jurul continutului
elementului, in interiorul chenarului, intre bordura si continut.
Forma generala pentru utilizarea acestei proprietati este:

selector { padding: valoare/valori; }

Valoarea pentru completarea spatiului poate fi una din urmatoarele:

- o valoare de tip lungime

- o valoare procentuala creaza umplerea in raport cu latimea elementului parinte.

Cand specificati toate cele patru valori, ele sunt aplicate in ordinea: sus, dreapta, jos, stanga.
Daca specificati doar o valoare, aceasta va fi aplicata tuturor celor patru directii.
Daca specificati doua sau trei valori, atunci valorile care lipsesc sunt copiate dupa valorile
laturilor opuse.
Iata un exemplu in care etichetele DIV vor avea distanta padding: sus 4 pixeli, dreapta 2
pixeli, jos 3 pixeli si in stanga 2 pixeli:
div { padding:4px 2px 3px 2px; }
Fiecare latura a chenarului poate avea proprietatea padding configurata separat:

selector { padding-top:valoare; }
selector { padding-bottom:valoare; }

selector { padding-left:valoare; }
selector { pading-right:valoare; }

5. Elemente float
CSS ofera posibilitatea de a "infasura" anumite elemente in jurul altora. Acest lucru se face
prin intermediul proprietatii float, care determina o mutare fortata a elementului in directia
data de valoarea mentionata, lasand loc liber in spatiul opus directiei, care va fi ocupat de
urmatorul element din codul HTML.
Sintaxa generala pentru utilizarea acestei proprietati este:

selector { float:valoare; }

Unde "vaoare" poate fi" left, right si none


Valoarea "none" permite elementului sa fie plasat acolo unde este posibil, iar celelalte valori
forteaza plasarea elementului in stanga sau in dreapta ecranului, textul din exteriorul etichetei
HTML respective va fi plasat in partea opusa, in jurul elementului.
Iata un exemplu in care elementul cu id="un_id" va fi fortat sa fie pozitionat in dreapta
celorlaltor elemente:
#un_id { float:right; }

6. Anularea plasarii unui element in spatiul eliberat de "float"


Asemanator cu actiunea etichetei HTML <br>, care trece pe un nou rand elementele ce o
preced, este si proprietatea clear.
Cu ajutorul acesteia se poate anula ocuparea unui spatiu care a fost lasat liber de un element
care utilizeaza proprietatea "float".
Sintaxa generala pentru utilizarea proprietati clear:

selector { clear:valoare; }

Unde "valoare" specifica latura in jurul careia este interzisa infasurarea textului si poate lua
valoarea: left, right sau both. Se poate folosi si valoarea "none", ceea ce are ca efect anularea
altor atribute ale proprietatii clear.
De exemplu, daca aveti un DIV pozitionat fortat in dreapta, un paragraful care urmeaza dupa
el va fi afisat in stanga DIV-ului respectiv. Pentru a anula acest lucru, ca paragraful sa fie
afisat sub DIV, se foloseste proprietatea "clear", precum in exemplul urmator:
#un_div { float:right; }
p { clear:both; }

7. Afisarea si ascunderea elementelor


Proprietatea display poate stabili daca un element va fi de tip block, incluzand linii noi
deasupra si dedesubtul sau, daca este inclus in linie, daca este tratat sub forma de lista sau
daca elementul este afisat sau nu.
Sintaxa generala pentru aceasta proprietate este:

selector { display:valoare; }

Unde "valoare" poate fi una din urmatoarele optiuni:

list-item plaseaza in prima linie a textului un indicator pentru articole de tip lista,
dar si un salt deasupra si dedesubtul articolului;

block defineste eticheta ca fiind de tip bloc si plaseaza un salt la linie noua deasupra
si dedesubtul ei;

inline defineste eticheta ca o eticheta in linie si elimina caracterele de salt la linie


noua;

none determina ascunderea elementului si neafisarea lui de catre navigator; codul


acestuia este incarcat insa continutul sau nu e afisat in pagina.

Iata un exemplu in care elementele <li> sunt asezate in linie, iar un element cu id="un_id" va
fi ascuns in pagina:
li { display:inline; }
#un_id { display:none; }
Proprietatea display nu trebuie confundata cu visibility. Spre deosebire de visibility care nu
afiseaza elementul dar lasa liber spatiu pentru element, sintaxa display: none elimina
complet elementul din pagina.

Controale de pozitionare
Pozitionarea elementelor folosind CSS este mai precisa decat prin intermediul obiectelor
grafice HTML sau a tabelelor, afisarea facandu-se mult mai rapid.
Prin intermediul CSS este permisa pozitionarea exacta sau relativa a elementelor intr-o
fereastra sau in raport cu alte elemente.
Fereastra navigatorului este suprafata in care sunt afisate toate elementele. Ea poate fi
redimensionata sau pozitionata pe ecran, sau poate fi divizata in alte ferestre prin intermediul
cadrelor.
Toatele elementele amplasate in fereastra sunt pozitionate relativ la coltul din stanga-sus.

1. Stabilirea modului de pozitionare


Prin utilizarea proprietatii position se poate specifica pozitia elementului in pagina web.
Un element poate avea una din urmatoarele valori de pozitionare: static, relative, absolut si
fixed.
Tipul de pozitie indica navigatorului cum sa trateze amplasarea unui element intr-o fereastra.
a) Pozitionarea statica
Valoarea initiala, prestabilita, a pozitionarii elementelor in fereastra este "static".
Cand nu este specificata o pozitionare "relativa", "absoluta" sau "fixa"; elementele sunt
dispuse unul dupa altul in interiorul documentului.
Sintaxa pentru specificarea pozitionarii static este:

selector { position:static }

- Un element static nu poate fi repozitionat in mod explicit.


b) Pozitionarea relativa
Un element cu pozitionare "relativa" este amplasat la locul sau in cadrul ferestrei sau a
elementului parinte, in sensul ca el apare dupa toate elementele dinaintea sa, respectiv
inaintea tuturor elementelor amplasate dupa el.
Sintaxa pentru specificarea pozitionarii relative este:

selector { position:relative }

- Elementele pozitionate relativ pot fi mutate din locatia lor folosind proprietatile "top" si
"left" sau "bottom" si "right".
c) Pozitionarea absoluta
Pozitionarea absoluta are ca efect crearea unui element neafectat de restul documentului,
plasarea lui in fereastra fiind facuta intr-o locatie precisa, definita prin intermediul
coordonatelor x si y, indiferent de pozitiile altor elemente.
Sintaxa pentru specificarea pozitionarii absolute este:

selector { position:absolute }

- Originea (punctul de coordonate 0,0) este coltul din stanga-sus al ferestrei sau al obiectului
in care este inclus elementul pozitionat absolut.
d) Pozitionarea fixa
Pozitionarea fixa a unui element este aproximativ la fel cu cea absoluta, cu diferenta ca la
derularea paginii elementul fixat ramane pe pozitia lui initiala, fara a se derula.
Sintaxa pentru specificarea pozitionarii fixed este:

selector { position:fixed }

2. Pozitionarea in raport cu latura de sus, respectiv stanga


Dupa stabilirea tipului de pozitionare, se poate determina distanta intre punctul de origine si
laturile de sus si din stanga ale elementului sau parinte, folosind proprietatile top si left
Forma generala este:

selector { top:valoare; left:valoare; }

- Unde "valoare" poate fi:

- o valoare de tip numeric, care defineste distanta dintre laturile ferestrei sau a
elementului parinte si laturile elementului;

- o valoare procentuala, care semnifica deplasarea fata de laturile ferestrei sau a


elementului parinte;

- valoarea auto, care permite navigatorului sa calculeze el insusi valoarea.

Pot fi utilizate proprietatile top si left sau bottom si right, de asemenea pot lua si valori
negative.
In cazul in care este vorba despre elemente imbricate, acestea vor fi deplasate solidar cu
elementul parinte daca acesta are position:relative.
Iata un exemplu in care o eticheta <h1> este pozitionata la o distanta de 10 pixeli fata de
marginile sus si stanga ale unui DIV in interiu caruia se afla:
<style type="text/css">
div { position:relative; }
h1 { top:10px; left:10px; }
</style>
<div>
<h1>Text...</h1>
</div>

3. Pozitionarea in raport cu latura de jos, respectiv dreapta


In unele cazuri este necesara pozitionarea in raport cu laturile de jos, respectiv dreapta. In
acest caz originea va fi coltul din dreapta-jos al ferestrei sau al elementului parinte.
Definirea marginilor fata de latura de jos, respectiv din dreapta se face cu ajutorul
proprietatilor bottom si right; ele pot lua aceleasi valori ca si "left" si "top", de asemenea pot
fi combinate cu acestea.
Forma generala este:

selector { bottom:valoare; right:valoare; }

In cazul in care pentru acelasi element sunt stabilite atat marginile "top / left" cat si "bottom /
right", rezultatul afisat depinde de navigator, dar in mod prestabilit se folosesc pozitiile top si
left.

4. Pozitionarea in spatiul 3D
Elementele pot primi o a treia dimensiune, si anume asezarea lor in stiva, unele in raport cu
altele.
Amplasarea se face in mod automat, incepand cu valoarea 0 si continuand prin incrementare
cu o unitate, in ordinea aparitiei lor in documentul HTML si relativ la elementele parinte.
Pentru pozitionarea elementelor in stiva unele peste altele se foloseste proprietatea z-index.
Valoarea acestei proprietati fiind relatia tridimensionala a elementului in raport cu alte
elemente din fereastra.
Sintaxa generala pentru proprietatea z-index este:

selector { z-index:valoare; }

Unde "valoare" este un numar intreg, pozitiv, 0 sau negativ.


In cazul in care continutul elementelor se suprapune, elementul cu numarul de ordine mai
mare apare deasupra elementului cu numar mai mic.
Utilizarea unei valori negative determina amplasarea elementului dedesubtul parintelui sau cu
atatea niveluri cu cate indica indexul z.

5. Includerea unui element absolut intr-un element relativ


Un element poate fi pozitionat exact in cadrul unei ferestre, sau el poate fi inclus intr-un
element cu pozitionare relativa.
In cazul includerii unui element pozitionat absolut intr-un element pozitionat relativ,
elementul absolut este pozitionat folosind ca origine coltul din stanga-sus al elementului
relativ.
Iata un exemplu de cod HTML in care o eticheta <div> (cu class="absolut") este inclusa
(imbricata) in alta eticheta <div> (cu class="relativ"):
<div class=relativ>
...
<div class=absolut> ... </div>
...
</div>
Pentru a face o pozitionare absoluta a elementului inclus (care are class="absolut") in
elementul parinte (care are class="relativ"), caruia ii definim o pozitionare relativa; scriem in
foaia de stil urmatorul cod:
.relativ {position:relative; top:30px; left:50px; }
.absolut {position:absolute; top:15px; left:0px; }

6. Includerea unui element relativ intr-un element absolut


Cand un element pozitionat absolut este inclus intr-un element pozitionat relativ, primul
foloseste ca origine coltul din stanga-sus al parintelui.
In cazul in care un element pozitionat relativ este plasat in interiorul unui element pozitionat
absolut, acesta se va deplasa o data cu elementul absolut.
Iata un exemplu de cod HTML in care o eticheta <div> (cu class="relativ") este inclusa
(imbricata) in alta eticheta <div> (cu class="absolut"):
<div class=absolut>
...
<div class=relativ> ... </div>
...
</div>
Pentru a face o pozitionare relativa a elementului inclus (care are class="relativ") in
elementul parinte (care are class="absolut"), caruia ii definim o pozitionare absoluta;
adaugam in foaia de stil urmatorul cod:
.absolut {position:absolute; top:20px; left:25px; }
.relativ {position:relative; top:10px; left:5px; }

Configurari pentru vizibilitate si mouse

CSS ofera posibilitatea de a afisa sau ascunde unele elemente sau parti ale unor elemente.

1. Stabilirea vizibilitatii unui element


Proprietatea visibility poate controla faptul ca un element sa fie vizibil sau nu. Chiar daca
elementul este invizibil, el va ocupa un spatiu liber in pagina, acolo unde ar fi trebuit sa fie
afisat.
Sintaxa pentru folosirea acestei proprietati este urmatoarea:

selector { visibility:valoare }

Unde "valoare" poate fi:

hidden ascunde elementul de la afisarea pe ecran;

visible afiseaza elementul;

inherit vizibilitatea elementului este mostenita de la elementul parinte.

Iata un exemplu in urma caruia textul din interiorul etichetei <h1> va fi invizibil:
h1 { visibility:hidden; }
Pentru a ascunde complet afisarea unui element in pagina, se poate utiliza formula
display:none;

2. Stabilirea suprafetei vizibile a unui element


Definirea suprafetei vizibile a unui element stabileste portiunea din elementul respectiv care
este vizibila in fereastra navigatorului. Restul continutului acelui element nu dispare, ci este
invizibil pentru vizitator.
Pentru a defini forma regiunii vizibile se foloseste proprietatea clip cu valoarea rect (definita
prin patru valori separate prin spatii si incadrate de paranteze rotunde)
Forma generala este:

selector {clip:rect(val1 val2 val3 val4); }

- Valorile construesc un patrulater, definesc distanta dintre coltul din stanga-sus al


elementului si laturile de sus, dreapta, jos si stanga ale regiunii vizibile.
Iata un exemplu de cod CSS in care suprafata vizibila a unui element cu id="viz" va fi cea
incadrata de valorile atributului rect:
#viz { clip: rect(25 300 125 100); }
Daca se foloseste valoarea "auto", navigatorul calculeaza dimensiunea regiunii vizibile la
100%. Regiunile de vizibilitate pot avea doar forma dreptunghiulara.

3. Definirea pozitiei depasirii


Uneori elementele nu sunt in totalitate continute in casetele lor, caseta nefiind suficient de
mare, astfel ca o parte a continutului nu este afisata sau depaseste marginea stabilita.

Proprietatea overflow permite tratarea continutului in exces, controland astfel modul de


afisare sau nu al acesuia.
Forma generala a proprietatii overflow este:

selector { overflow:valoare; }

- Unde "valoare" stabileste unde va fi plasata depasirea, folosind una din valorile:

visible extinde caseta elementului astfel incat sa incapa tot continutul sau, ignorand
delimitarea suprafetei vizibile. Este optiunea prestabilita.

hidden ascunde continutul care nu incape in caseta elementului, si impiedica


aparitia barei de derulare.

scroll adauga intotdeauna bare de derulare elementului, pentru ca sa se poata accesa


tot continutul elementului.

auto barele de derulare apar doar atunci cand este necesar.

Iata un exemplu in care toate elementele cu class="extradim" vor avea bare de scroll:
.extradim { overflow:scroll; }
Pentru definirea proprietatii "overflow" doar pentru una din directii: orizontala sau verticala;
adica bara de derulare sa fie disponibila sau nu doar pentru una din aceste directii, se poate
folosi o alta varianta a acestei proprietati, si anume:

overflow-x:valoare - pentru orizontala

overflow-y:valoare - pentru verticala

- Unde "valoare" poate fi una din valorile prezentate mai sus.

4. Aspectul indicatorului de mouse


In mod normal, aspectul indicatorului de mouse este determinat de browser. Navigatorul
modifica indicatorul de mouse in functie de continutul deasupra caruia se afla acesta.
Uneori este dorita anularea sau completarea preferintelor navigatorului si configurarea unor
aspecte personalizate.
Proprietatea cursor ajuta la stabilirea aspectului unui indicator de mouse.
Sintaxa este urmatoarea:

selector { cursor:valoare; }

Unde "valoare" poate avea urmatoarele nume pentru indicatoarele de mouse:

- Daca se foloseste valorea "auto", navigatorul decide asupra tipului de indicator folosit.

Pseudo-clase
Pseudo-clasele permit adaugarea de stiluri CSS doar la anumite elemente ale aceluiasi
selector, id sau clasa.
De exemplu, cand definiti un stil pentru un anumit tag HTML sau pentru o clasa, continutul
din toate aceleasi tag-uri sau aceeasi clasa vor avea acel stil, iar daca doriti sa definiti un stil
diferit pentru primul (sau ultimul) din acele tag-uri ori pentru primul continut definit de
aceeasi clasa, puteti realiza asta folosind pseudo-clasele. De asemenea, acestea pot modifica
stilul grafic al elementelor cand mouse-ul actioneaza asupra lor.
Pentru a functiona in Internet Explorer 7+ este necesar declararea <!DOCTYPE>, care se
adauga la inceputul documentului HTML, mai multe detalii (in engleza) gasiti Aici.
Sintaxa pentru utilizarea pseudo-clasei este urmatoarea:
element:pseudo-clasa { proprietate:valoare; }
- unde "element" este un selector, id sau clasa, iar "pseudo-clasa" este una din expresiile
urmatoare:

active - Adauga un stil unui element cand acesta este activat (actionat prin click pe
el)

first-child - Adauga un stil unui element care este primul din acel tip de elemente

focus - Folosit pentru input-urile de formulare, le adauga un stil cand acestea sunt
active (dupa click si cursorul de text in ele)

hover - Adauga un stil unui element cand mouse-ul se afla deasupra lui

lang(cuvant) - Adauga un stil unui element care are atributul lang="cuvant" (nu e
suportat de Safari si IE mai mic de 8)

last-child - Adauga un stil unui element care este ultimul din acel tip de elemente

link - Adauga un stil unui link nevizitat

visited - Adauga un stil unui link vizitat

Ca sa intelegeti mai bine cum functioneaza si ce fac pseudo-clasele, studiati exemplele care
sunt prezentate in continuare.

1. Pseudo-clase cu selector
Selectoarele fac referire la tag-urile HTML pe care le denumesc (de ex.: p pentru <p>, li
pentru <li>, div pentru <div>, etc.).
In exemplul urmator este folosit "first-child" pentru paragraf:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-clase - Ex. 1</title>
<style type="text/css">
p:first-child {
color:blue;
}
</style>
</head>
<body>
<p>Un text din primul paragraf</p>
<p>Continut din al doilea paragraf</p>
<p>Textul din al treilea paragraf</p>
</body>
</html>
- Rezultatul va fi urmatorul, primul paragraf va avea textul albastru.
Un text din primul paragraf
Continut din al doilea paragraf
Textul din al treilea paragraf
Iata si un exemplu cu "hover" pentru <li>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<title>Pseudo-clase - Ex. 2</title>
<style type="text/css">
li:hover {
background-color:#88fe88;
}
</style>
</head>
<body>
<ul>
<li>Text list 1 ...</li>
<li>Text list 2 ...</li>
<li>Text list 3 ...</li>
</ul>
</body>
</html>
- Cand pozitionati mouse-ul deasupra fiecarui LI, acesta va avea background verde, testati
mai jos

Text list 1 ...

Text list 2 ...

Text list 3 ...

2. Pseudo-clase si clase
Trebuie stiut ca pseudo-clasele nu sunt acelasi lucru ca si clasele, acestea fiind cele care fac
referire la valoarea atributului "class" si in CSS se adauga dupa un caracter punct (.).
Iata un exemplu in care sunt folosite pseudo-clasele "lang(cuvant)" (pt. IE incepand cu
versiunea 8) sl "last-child" la o clasa ".test'
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-clase - Ex. 3</title>
<style type="text/css">
.test:last-child {
background-color:#88fe88;
}
.test:lang(da) {
color:blue;
}
</style>
</head>
<body>
<ul>

<li class="test">Text in list cu class 1 ...</li>


<li class="test" lang="da">Text in list cu class 2 ...</li>
<li class="test">Text in list cu class 3 ...</li>
</ul>
</body>
</html>
- Observati ca stilul definit pentru ".test:last-child" va fi aplicat doar ultimului element care
are clasa "test", iar "lang(da)" se aplica numai elementului care pe langa class="test" are si
lang="da".
- Rezultatul este acesta:

Text in list cu class 1 ...

Text in list cu class 2 ...

Text in list cu class 3 ...

Iata un alt exemplu in care sunt combinate o clasa (test), un selector (tag <i>) si "first-child":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-clase - Ex. 4</title>
<style type="text/css">
.test i:first-child {
font-weight:bold
}
</style>
</head>
<body>
<p class="test"><i>Paragraf</i> cu mai multe tag-uri I: <i>text oblic</i>, alt test
<i>oblic</i></p>
<p class="test">Alt paragraf: <i>sir inclinat si bold</i>, alt sir <i>italic</i></p>
</body>
</html>
- Stilul CSS va fi aplicat primelor tag-uri <i> din fiecare clasa ".test", dupa cu puteti vedea
mai jos
Paragraf cu mai multe tag-uri I: text oblic, alt test oblic
Alt paragraf: sir inclinat si bold, alt sir italic
- Daca doriti ca stilul sa fie aplicat tuturor etichetelor <i> din prima clasa, scrieti:
.clasa:first-child i
- Daca vreti sa fie aplicat numai primului <i> din prima clasa, scrieti: .clasa:first-child
i:first-child

3. Pseudo-clase cu id-uri si elemente de formular

In CSS, id-urile fac referire la valoarea atributului ID si se scriu dupa caracterul #.


Iata un exemplu in care este folosita pseudo-clasa "hover" impreuna cu un ID, iar "focus"
impreuna cu o clasa (focus nu functioneaza pe versiuni de IE mai mici de 8)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-clase - Ex. 5</title>
<style type="text/css">
#unid:hover {
background-color:#dadafe;
}
.test:focus {
background-color:#ededfe;
}
</style>
</head>
<body>
<form action="" method="post">
<input type="text" class="test" /><br />
<textarea cols="20" rows="5" class="test"></textarea><br />
<input type="button" value="Buton" id="unid" />
</form>
</body>
</html>
- Stilul CSS definit in acest exemplu face ca atunci cand mouse-ul se afla deasupra butonului
(care are id="unid") acesta sa isi schimbe culoarea de fundal, iar cand se da click pe zonele de
text din formular (care au class="test"), la fel se modifica culoarea background.
- Rezultatul este urmatorul formular.
Pseudo-elemente

Pseudo-elementele permit adaugarea de stiluri CSS anumitor parti din continutul unui
element HTML.
De exemplu, cand definiti un stil pentru un anumit tag HTML (sau pentru o clasa), tot
continutul incadrat de acel tag va avea acelasi stil, iar daca vreti sa adaugati un stil CSS
diferit primei litere sau primului rand dintr-un paragraf, se folosesc pseudo-elemente.
Sintaxa pentru utilizarea pseudo-elementelor este urmatoarea:
obiect_css:pseudo-element { proprietate:valoare; }
- unde "obiect_css" este un selector, id sau clasa, iar "pseudo-element" este una din expresiile
urmatoare:

after - Adauga continut dupa un element HTML (nu e suportat de


versiuni IE mai mici de 8)

before - Adauga continut inaintea unui element HTML (nu e suportat de


versiuni IE mai mici de 8)

first-letter - Adauga un stil css primului caracter dintr-un text

first-line - Adauga un stil primei linii dintr-un text

Ca sa intelegeti mai bine cum functioneaza si ce fac pseudo-elementele, iata


cateva exemple cu fiecare in parte.
1. after

Pentru a adauga un anumit continut (text, imagine, sunet .wav) prin CSS, se foloseste
proprietatea content si valoarea ce reprezinta continutul respectiv: text se adauga intre
ghilimele, iar imagine sau sunet .wav se adauga folosind ca valoare url(adresa_fisier)
In urmatorul exemplu va fi adaugat un continut text dupa fiecare element <h4>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-elemente - Ex. 1</title>
<style type="text/css">
h4:after {
content:"MarPlo";
color:blue;
}
</style>
</head>
<body>
<h4>Continutul din primul tag H4 ... </h4>
<h4>Un alt text din alt element H4</h4>
</body>
</html>
- Rezultatul va fi cel de jos.
- Observati cum este adaugat cuvantul "MarPlo", imediat dupa ultimul caracter al
fiecarui element <h4>, ca si cum ar face parte din textul initial, dar putand avea
stil propriu.
Continutul din primul tag H4 ... MarPlo
Un alt text din alt element H4MarPlo
- In loc de selector puteti folosi si ID sau clasa.
2. before

Before este similar cu "after", continutul se adauga la fel, dar la inceputul elementului.
Pentru o mai mare difersitate, puteti combina pseudo-clasele cu pseudo-elemente folosind
sintaxa:
obiect_css:pseudo-clasa:pseudo-element { proprietate:valoare; }

- Pseudo-clasele sunt explicate in lectia anterioara.


Ca sa vedeti efectul, iata un exemplu aplicat cu "before" acelorasi tag-uri H4 din exemplul
precedent.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-elemente - Ex. 2</title>
<style type="text/css">
h4:first-child:before {
content:"MarPlo- ";
color:blue;
}
</style>
</head>
<body>
<h4>Continutul din primul tag H4 ... </h4>
<h4>Un alt text din alt element H4</h4>
</body>
</html>
- De data aceasta continutul "MarPlo- " este adaugat imediat in fata si doar
primului element <h4> (precizat prin 'first-child'), dupa cum puteti vedea mai
jos:
MarPlo- Continutul din primul tag H4 ...
Un alt text din alt element H4
- Daca vreti sa adaugati in loc de continut text o imagine, de exemplu .gif, scrieti
codul CSS astfel: h4:first-child:before { content:url(imagine.gif); }
3. first-letter

First-letter aplica un stil CSS doar primului caracter dintr-un text.


In urmatorul exemplu este aplicat un stil CSS primului caracter din continutul fiecarui
element definit printr-o clasa "test".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-elemente - Ex. 3</title>
<style type="text/css">
.test:first-letter {
font-size:25px;
color:red;
}

</style>
</head>
<body>
<p class="test">Textul din paragraf ...</p>
<div class="test">Alt continut int-un tag DIV, dar cu aceeasi clasa.</div>
</body>
</html>
- Dupa cum puteti vedea in rezultatul de mai jos, prima litera din continutul
fiecarui tag ce are class="test" este de culoare rosie si marime 25px.

Textul din paragraf ...


Alt continut int-un tag DIV, dar cu aceeasi clasa.
4. first-line

First-line aplica un stil CSS doar primei linii din continutul elementului HTML.
Studiati exemplul urmator:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-elemente - Ex. 4</title>
<style type="text/css">
.test:first-line {
font-weight:bold;
color:blue;
}
</style>
</head>
<body>
<p class="test">Paragraf cu mai multe linii<br />
A doua linie ...<br />
Alta linie din acelasi paragraf.</p>
<div class="test">Continut pe doua linii intr-un tag DIV<br />
A doua linie din DIV.</div>
</body>
</html>
- Rezultatul este urmatorul, comform codului CSS, prima linie din fiecare element
cu class="test" are textul albastru si ingrosat.

Paragraf cu mai multe linii


A doua linie ...
Alta linie din acelasi paragraf.

Continut pe doua linii intr-un tag DIV


A doua linie din DIV.

Creare Meniu Dublu cu CSS

Meniu Orizontal-Vertical

In acest tutorial puteti invata cum sa creati Meniu Dublu cu CSS (orizontal si vertical).
Meniu dublu inseamna ca lista meniului contine inca un Meniu cu alte link-uri (denumit si
Sub-Meniu).
In general, Meniurile sunt create folosind tag-urile <ul> (sau <ol>) si <li> tags.
- Presupunand ca deja stiti CSS si HTML, aplicati /adaptati codurile prezentate mai jos,
personalizandu-le si cu alte elemente CSS, dupa cum doriti sa creati designul (colturi
rotunjite, imagini pt. fundal, etc.).

Meniu Vertical Dublu


Meniul vertical este de obicei adaugat in marginile laterale ale paginii.
Iata un exemplu simplu (mutati cursorul mouse-ului pe el):
Pagina personala
+ Tutorialle CSS
+ Tutoriale HTML
Contact
- Codul HTML si CSS de mai jos creaza acest meniu (Proprietatile CSS trebuie adaugate in
zona <head>, sau intr-un fisier ".css"):
<style><!-#menuv {
width:200px;
border:1px solid blue;
background-color:#daedfe;
padding:2px;
}

/* Proprietati pentru primul nivel din meniul vertical */


#menuv li {
margin:1px 0;
background-color:#f0f1fe;
padding:1px;
list-style-type:none;
font-weight:600;
text-align:left;
}
#menuv li a {
display:block;
margin:0;
font-weight:normal;

}
#menuv li a:hover {
background-color:#fefefe;
text-decoration:none;
font-style:oblique;
}
/* Proprietati pentru nivelul doi din meniul vertical */
#menuv li:hover ul {
display:block;
}
#menuv li ul {
display:none;
position:relative;
margin:-1px 0 -2px 0;
padding:1px 0;
}
#menuv li ul li {
margin:2px 0 0 20px;
background-color:#edfeed;
padding:1px 0;
border:1px dotted yellow;
}
--></style>
<ul id="menuv">
<li><a href="/" title="Pagina personala">Pagina personala</a></li>
<li> + Tutorialle CSS
<ul>
<li><a href="http://www.marplo.net/curs_css/css3-background-proprietatinoi.html" title="CSS3 - Background proprietati">CSS3 - Background
proprietati</a></li>
<li><a href="http://www.marplo.net/curs_css/css3-opacity.html"
title="CSS3 opacity">CSS3 opacity</a></li>
</ul>
</li>
<li> + Tutoriale HTML
<ul>
<li><a href="http://www.marplo.net/html/tutorial-html5.html"
title="Tutorial HTML5">Tutorial HTML5</a></li>
<li><a href="http://www.marplo.net/html/html5-canvas.html" title="HTML5
canvas">HTML5 canvas</a></li>
<li><a href="http://www.marplo.net/html/html5-taguri-noi.html"
title="HTML5 tag-uri noi">HTML5 tag-uri noi</a></li>
</ul>
</li>
<li><a href="http://www.marplo.net/coment/contact.php"
title="Contact">Contact</a></li>
</ul>

- "Smecheria" la acest Meniu este acest cod (ceea ce face a doua lista UL vizibila cand
mouse-ul e deasupra listei LI parinte):
#menuv li:hover ul {
display:block;
}

O alta varianta de meniu vertical dublu:


Pagina personala

+ Tutorialle CSS
+ Tutoriale HTML
Contact
- Codul CSS si HTML pt. acest meniu:
<style><!-#menuv {
position:relative;
width:160px;
border:1px solid blue;
background-color:#daedfe;
padding:2px;
}

/* Proprietati pentru primul nivel din meniul vertical */


#menuv li {
margin:1px 0;
background-color:#f0f1fe;
padding:1px;
list-style-type:none;
font-weight:600;
text-align:left;
}
#menuv li a, #menuv li span {
display:block;
margin:0;
font-weight:normal;
}
#menuv li a:hover {
background-color:#fefefe;
text-decoration:none;
font-style:oblique;
}
/* Proprietati pentru nivelul doi din meniul vertical */
#menuv li:hover ul {
display:block;
}
#menuv li ul {
display:none;
position:absolute;
z-index:9998;
width:100%;
left:151px;
margin:-20px auto 0 auto;
background-color:#daedfe;
border:1px dashed blue;
padding:1px;
}
#menuv li ul li {
margin:1px;
background-color:#edfeed;
padding:1px 0 1px 2px;
}
--></style>

<ul id="menuv">
<li><a href="/" title="Pagina personala">Pagina personala</a></li>
<li><span> + Tutorialle CSS</span>
<ul>
<li><a href="http://www.marplo.net/curs_css/css3-background-proprietatinoi.html" title="CSS3 - Background proprietati">CSS3 - Background
proprietati</a></li>
<li><a href="http://www.marplo.net/curs_css/css3-opacity.html"
title="CSS3 opacity">CSS3 opacity</a></li>
</ul>
</li>
<li><span> + Tutoriale HTML</span>
<ul>
<li><a href="http://www.marplo.net/html/tutorial-html5.html"
title="Tutorial HTML5">Tutorial HTML5</a></li>
<li><a href="http://www.marplo.net/html/html5-canvas.html" title="HTML5
canvas">HTML5 canvas</a></li>
<li><a href="http://www.marplo.net/html/html5-taguri-noi.html"
title="HTML5 tag-uri noi">HTML5 tag-uri noi</a></li>
</ul>
</li>
<li><a href="http://www.marplo.net/coment/contact.php"
title="Contact">Contact</a></li>
</ul>

- Sub-meniul (#menuv li ul) trebuie sa aibe urmatoarele proprietati CSS, ca sa-l ascunda si sa
nu afecteze celelalte liste cand e descoperit (proprietatea z-index:9998; il face sa fie afisat
peste celelalte liste).
display:none;
position:absolute;
z-index:9998;

- In codul CSS al acestui Meniu este important ca selectorul #menu sa aibe definita
proprietatea "position" (relative, absolute). Aceasta e necesar ca sa functioneze z-index:9998;
(in #menuv li ul) in Internet Explorer.

Meniu Orizontal-Vertical
Meniul orizontal-vertical este un meniu cu lista afisata pe o linie orizontala, iar fiecare lista
poate sa contina un alt meniu cu liste verticale, care este initial ascuns, si afisat cand mouseul e pe textul /imaginea din lista orizontala.
- Demonstratie (mutati cursorul mouse-ului peste Menu):

Pagina personala

Tutorialle CSS

Tutoriale HTML

Contact

- Codul sursa:

<style><!-#menuv {
position:relative;
padding:2px;
}
/* Proprietati pentru lista orizontala */
#menuv li {
float:left;
margin:1px 8px;
border:1px solid blue;
background-color:#daedfe;
padding:1px 2px;
list-style-type:none;
font-weight:600;
text-align:left;
text-decoration:nderline;
}
/* Proprietati pentru listele verticale */
#menuv li:hover ul {
display:block;
}
#menuv li ul {
display:none;
position:absolute;
margin:1px auto 1px -8px;
background-color:#f0f1fe;
border:1px dashed blue;
padding:1px;
}
#menuv li ul li {
position:relative;
clear:both;
width:99%;
margin:1px 0;
border:none;
background-color:#edfeed;
padding:1px;
}
/* Link-uri in sub-menu */
#menuv ul li a {
display:block;
margin:0;
font-weight:normal;
padding:1px;
}
#menuv ul li a:hover {
background-color:#fefefe;
text-decoration:none;
font-style:oblique;
}
--></style>
<ul id="menuv">
<li><a href="/" title="Pagina personala">Pagina personala</a></li>
<li>Tutorialle CSS
<ul>

<li><a href="http://www.marplo.net/curs_css/css3-background-proprietatinoi.html" title="CSS3 - Background proprietati">CSS3 - Background


proprietati</a></li>
<li><a href="http://www.marplo.net/curs_css/css3-opacity.html"
title="CSS3 opacity">CSS3 opacity</a></li>
</ul>
</li>
<li>Tutoriale HTML
<ul>
<li><a href="http://www.marplo.net/html/tutorial-html5.html"
title="Tutorial HTML5">Tutorial HTML5</a></li>
<li><a href="http://www.marplo.net/html/html5-canvas.html" title="HTML5
canvas">HTML5 canvas</a></li>
<li><a href="http://www.marplo.net/html/html5-taguri-noi.html"
title="HTML5 tag-uri noi">HTML5 tag-uri noi</a></li>
</ul>
</li>
<li><a href="http://www.marplo.net/coment/contact.php"
title="Contact">Contact</a></li>
</ul>

In codul CSS al acestui Meniu sunt importante urmatoarele proprietati:


- #menuv li trebuie sa contina aceasta proprietate ca sa aseze listele pe linie orizontala:
float:left;

- Sub-meniul (#menuv li ul) trebuie sa aibe aceste proprietati CSS, ca sa-l ascunda si sa nu
afecteze celelalte liste cand e afisat.
display:none;
position:absolute;

- Listele din sub-meniu (#menuv li ul li) trebuie sa aibe aceste proprietati CSS, care anleaza
efectul lui: float:left; mostenit de la lista LI parinte, si sa aibe o lungime corespunzatoare:
position:relative;
clear:both;
width:99%;

Butoane pentru link-uri folosind o singura


imagine si CSS
O singura imagine pt meniu cu mai multe link-uri
Fiecare imagine care trebuie incarcata in pagina necesita o cerere de la browser catre server si
asteptarea raspunsului, astfel, daca aveti un meniu cu 5 link-uri cu imagine, pentru a face ca
pagina sa se incarce mai repede, e bine sa folositi un singur fisier cu imagini /butoane , nu 15
fisiere (5 * 3).
Acest tutorial arata cum se poate utiliza o singura imagine si CSS pentru toate cele trei stari
ale unui buton /link: normal, hover (mouse-ul deasupra), si active (cand se apasa clic). De
asemenea, cum se poate folosi o singura imagine pentru mai multe link-uri intr-un meniu.
Este simplu, ideea este ca desenele butonului pt cele 3 stari sa fie simetric asezate in imagine,
vertical: top, center, bottom (sus, centru, jos); sau orizontal: left, center, right (stanga, centru,
dreapta). Este indicat ca inaltimea imaginii (sau lungimea, in functie de cum sunt pozitionate
butoanele in imagine) sa se imparta exact la 3.

Apoi, in CSS setati proprietatile width si height ale link-ului cu aceeasi valoare ca lungimea
si inaltimea butonului desenat in imagine.
Daca butoanele pt starile link-ului (normal, hover, active) sunt desenate vertical, precum
acestea:

Setati proprietatea CSS background-position cu aceste perechi de valori: 0, 0; 0, 50%; si 0,


100% (sau: top, center, bottom); pt fiecare conditie (normal, hover, active). Folosind valori in
procente, ofera un control mai bun al pozitionarii.
- Iata un exemplu (lungimea imaginii exte 125 pixeli, inaltimea 120 pixeli; cu butoanele
desenate vertical. Inaltimea butonului /link-ului este 40px):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Exemplu link /buton folosind o singura imagine si CSS</title>
<style type="text/css"><!-#addnew {
width: 125px;
height: 40px;
display: block;
background: url('button_img1.gif');
background-position: 0 0;
background-repeat: no-repeat;
border: none;
text-indent: -9999px;
/* Sa nu se afiseze textul din link */
}
/* Cand cursorul de mouse e deasupra butonului */
#addnew:hover {
background-position: 0 50%;
}
/* Cand butonul /link-ul e apasat */
#addnew:active {
background-position: 0 100%;
}
//-->
</style>
</head>
<body>
<a href="http://www.coursesweb.net/" title="Web Programming Courses"
id="addnew">CoursesWeb.net</a>
</body>
</html>

Rezultat (pozitionati cursorul de mouse pe buton, apoi tineti apasat clic ca sa vedeti starea
"active"):
CoursesWeb.net

Daca butoanele pt starile link-ului (normal, hover, active) sunt desenate orizontal, precum
acestea:

- Setati proprietatea CSS background-position cu aceste perechi de valori: 0, 0; 50% 0; si


100% 0 (sau: left, center, right); pt fiecare conditie (normal, hover, active).
- Iata un exemplu cu butoanele desenate orizontal:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Exemplu link /buton folosind o singura imagine si CSS</title>
<style type="text/css"><!-#addnew {
width: 125px;
height: 40px;
display: block;
background: url('button_img2.gif');
background-position: 0 0;
background-repeat: no-repeat;
text-indent: -9999px;
/* Sa nu se afiseze textul din link */
}
/* Cand cursorul de mouse e deasupra butonului */
#addnew:hover {
background-position: 50% 0;
}
/* Cand butonul /link-ul e apasat */
#addnew:active {
background-position: 100% 0;
}
//-->
</style>
</head>
<body>
<a href="http://www.marplo.net/" title="Cursuri Jocuri Anime"
id="addnew">MarPlo.net</a>
</body>
</html>

Rezultat:
MarPlo.net

O singura imagine pt meniu cu mai multe link-uri


In mod similar se poate folosi o singura imagine cu butoane pt un meniu cu mai multe linkuri. Trucul este sa desenati butoanele simetric, apoi definiti proprietatea CSS backgroundposition in functie de pozitia butoanelor in imagine, folosind procente ce reprezinta distanta
fata de coltul stanga-sus, perechea de valori: stanga, sus (poate fi necesar sa testati mai multe
valori pana obtineti afisarea cea mai buna a fiecarui buton).

- Iata un exemplu, Meniu cu 4 link-uri folosind aceasta imagine:

<style type="text/css"><!-/* Seteaza imaginea pt butoanele din link-uri si proprietatile comune in


#menu */
#menu a {
width: 125px;
height: 40px;
display: block;
background: url('buttons.gif');
background-repeat: no-repeat;
text-indent: -9999px;
/* Sa nu se afiseze textul din link */
}
/* Butonul din imagine pt Primul link */
#menu #addnew {
background-position: 0 0;
}
/* Primul link hover */
#menu #addnew:hover {
background-position: 48% 0;
}
/* Primul link cand e apasat */
#menu #addnew:active {
background-position: 100% 0;
}
/* Butonul din imagine pt al Doilea link */
#menu #delete {
background-position: 0 32%;
}
/* al Doilea link hover */
#menu #delete:hover {
background-position: 48% 32%;
}
/* al Doilea link cand e apasat */
#menu #delete:active {
background-position: 100% 32%;
}
/* Butonul din imagine pt al Treilea link */
#menu #accept {
background-position: 0 66%;
}
/* al Treilea link hover */
#menu #accept:hover {
background-position: 48% 66%;
}
/* al Treilea link cand e apasat */

#menu #accept:active {
background-position: 100% 66%;
}
/* Butonul din imagine pt al patrulea link */
#menu #cancel {
background-position: 0 99%;
}
/* al patrulea link hover */
#menu #cancel:hover {
background-position: 48% 99%;
}
/* al patrulea link cand e apasat */
#menu #cancel:active {
background-position: 100% 99%;
}
//-->
</style>
<nav id="menu">
<a href="#" title="Add New" id="addnew">Add New</a>
<a href="#" title="Delete" id="delete">Delete</a>
<a href="#" title="Accept" id="accept">Accept</a>
<a href="#" title="Cancel" id="cancel">Cancel</a>
</nav>

Rezultat (pozitionati cursorul de mouse pe buton, apoi tineti apasat clic ca sa vedeti starea
"active"):
Add New Delete Accept Cancel

CSS3 - Background proprietati noi

Culoare Gradient

background-origin

background-clip

CSS3 Imagini multiple de fundal

CSS3 contine trei proprietati noi pt. background: background-size, background-origin, si


background-clip, de asemenea, puteti adauga mai multe imagini pentru fundalul unui
element, si chiar sa folositi culori gradient, cu linear-gradient.

background-size
Proprietatea background-size permite determinarea marimii imaginii de background. Astfel,
puteti folosi aceeasi imagine in mai multe elemente cu dimensiuni diferite.
- Valori (puteti specifica dimensiunile in pixeli (px) sau in procente (%)):

auto - e valoarea predefinita (default). Redimensioneaza laturile imaginii astfel incat


se mentine aspectul imaginii, daca ambele valori sunt auto, imaginea apare la
dimensiunile ei.

procente - Redimensioneaza lungimea si inaltimea pozei pt. background, in procente


relative la elementul parinte (nu la imagine). Prima valoare reprezinta lungimea, a
doua inaltimea.
Daca se specifica numai o valoare, cealalta e setata "auto".

pixeli - Redimensioneaza lungimea si inaltimea la marimile specificate.


Daca se specifica numai o valoare, cealalta e setata "auto".

cover - Poza pt. background e marita (sau micsorata) astfel incat sa acopere toata
suprafata de fundal.

contain - Poza pt. background e marita (sau micsorata) astfel incat sa fie cuprinsa in
zona de continut.

Proprietatea background-size e recunoscuta in IE9+, Firefox 4+, Opera, Chrome, si Safari 5+.
- Exemplu:

<style type="text/css"><!-#id1 {
width:200px;
height:100px;
border:1px solid blue;
background:url('css3.jpg');
background-size:100px 60px;
background-repeat:no-repeat;
}
#id2 {
width:300px;
height:120px;
border:1px solid #01da02;
background:url('css3.jpg');
background-size:contain;
background-repeat:no-repeat;
}
#id3 {
width:300px;
height:120px;
border:1px solid silver;
background:url('css3.jpg');
background-size:cover;
}
--></style>
<div id="id1">Curs CSS gratuit - dimensiuni in pixeli</div>
<div id="id2">www.coursesweb.net - valoare contain</div>
<div id="id3">www.marplo.net - valoare cover</div>

Rezultat:

Curs CSS gratuit - dimensiuni in pixeli

www.coursesweb.net - valoare contain


www.marplo.net - valoare cover

Culoare Gradient
Proprietatea background poate primi o valoare speciala care defineste o culoare gradient.
Sintaxa pentru codul ce defineste gradient-ul difera de la un browser la altul, de aceea trebuie
specificata pentru fiecare din navigatoarele web majore, dupa cum se vede in exemplul
urmator.
<style type="text/css"><!-#id1 {
width:300px;
height:120px;
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#dafeda',
endColorstr='#0308fe');
/* IE 7, 8 */
background-image: -ms-linear-gradient(top left, #01fe02, #0102fe);
/*
IE10 */
background: -moz-linear-gradient(top left, #1f1, #fff, #11f);
/*
Mozilla Firefox */
/* Safari, Chrome */
background-image: -webkit-gradient(linear, left top, right bottom, colorstop(0, #0f1), color-stop(0.5, #fff), color-stop(1, #01f));
background-image: -o-linear-gradient(top left, #01fe02, #0102fe);
/* Opera 11.1+ */
background: linear-gradient(top left, #1f1, #fff, #11f);
/* W3C
Markup */
}
--></style>
<div id="id1">Curs gratuit CSS<br />
www.marplo.net</div>

Rezultat:
Curs gratuit CSS
www.marplo.net
Directia culori gradient si distanta pe care culorile o iau poate fi controlata.
Daca doriti ca directia gradient-ului sa inceapa de sus, folositi doar top, in loc de "top left";
pentru stanga adaugati doar left. Ca sa setati distanta culorii in gradient, adaugati o valoare de
tip procent dupa culoare (sau o valoare intre 0 si 1 pt. browsere Webkit).
- Exemplu:
<style type="text/css"><!-#id1 {
width:300px;
height:120px;
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#dafeda',
endColorstr='#0308fe');
/* IE 7, 8 */

background-image: -ms-linear-gradient(top, #01fe02 0%, #0102fe


99%);
/* IE10 */
background: -moz-linear-gradient(top, #1f1 0%, #fff 65%, #11f 99%);
/* Mozilla Firefox */
/* Safari, Chrome */
background-image: -webkit-gradient(linear, left top, left bottom, colorstop(0, #0f1), color-stop(0.6, #fff), color-stop(1, #01f));
background-image: -o-linear-gradient(top, #01fe02 0%, #0102fe 99%);
/* Opera 11.1+ */
background: linear-gradient(top, #1f1 0%, #fff 65%, #11f 99%);
/*
W3C Markup */
}
--></style>

background-origin
Proprietatea background-origin specifica zona de pozitionare a imaginii in background. Poate
lua trei valori diferite:

padding-box - pozitia e relativa la coltul din stanga-sus unde incepe padding.

border-box - pozitia e relativa la coltul din stanga-sus a bordurii.

content-box - imaginea pt. background e pozitionata de la coltul stanga-sus unde


incepe continutul.

background-origin e recunoscut in IE9+, Firefox 4+, Opera, Chrome, si Safari 5+.


- Exemplu:
<style type="text/css"><!-#id1 {
width:350px;
height:120px;
padding:20px;
border:3px solid blue;
background:url('css3.jpg');
background-repeat:no-repeat;
background-color:#bcfede;
background-origin:content-box;
}
#id2 {
width:350px;
height:120px;
padding:20px;
border:3px solid blue;
background:url('css3.jpg');
background-repeat:no-repeat;
background-color:#bcfede;
background-origin:border-box;
}
--></style>
<div id="id1">Pozitioneaza imaginea in background incepand de la
continut</div>
<div id="id2">Pozitionare relativa la bordura</div>

Rezultat:

Pozitioneaza imaginea in background incepand de la continut


Pozitionare relativa la bordura

background-clip
Proprietatea background-clip specifica zona de colorare a fundalului, e folosita pentru a
determina daca background-ul se extinde sau nu pana in margini.
Primeste una din aceste trei valori:

border-box - culoarea de fundal se extinde pana in margini.

padding-box - culoarea de fundal e fixata la padding.

content-box - culoarea de fundal e fixata la zona continutului.

background-clip e recunoscut in IE9+, Firefox 4+, Opera, si Chrome.


Exemplu:

<style type="text/css"><!-#id1 {
width:350px;
height:120px;
padding:20px;
border:2px solid blue;
background-color:#cdfeda;
background-clip:padding-box;
-webkit-background-clip:padding-box;
}
#id2 {
width:350px;
height:120px;
padding:20px;
border:2px solid blue;
background-color:#cdfeda;
background-clip:content-box;
-webkit-background-clip:content-box;
}
--></style>

/* Safari */

/* Safari */

<div id="id1">background-clip cu padding-box</div>


<div id="id2">background-clip cu content-box</div>

Rezultat:
background-clip cu padding-box
background-clip cu content-box

CSS3 Imagini multiple de fundal


CSS3 permite aplicarea mai multor imagini de background la un element.
Aceasta caracteristica e suportata in Firefox 3.6+, IE 9, Safari, si WebKit.
Imaginile multiple pentru background se adauga in proprietatea background-image separate
prin virgula (imaginea specificata mai la inceput apare mai in fata).
Valorile din celelalte proprietati legate de poze pt. fundal se adauga in ordinea si numarul
imaginilor din background-image, sau doar o singura valoare pentru toate.

- Exemplu:
<style type="text/css"><!-#id1 {
width:400px;
height:150px;
background-image: url('html_course.jpg'), url('css3.jpg');
background-repeat: no-repeat, repeat-x;
background-position: center top, center bottom;
}
--></style>
<div id="id1">Imagini multiple de background</div>

Rezultat:
Imagini multiple de background

CSS3 - Border proprietati noi

Adaugare umbre la chenare

CSS3 Imagine pentru bordura

CSS3 contine caracteristici noi care permit crearea de colturi rotunjite, umbre la chenare si
folosirea unei imagini pentru aspectul bordurii.

CSS3 Colturi rotunjite


Proprietatea border-radius permite crearea cu usurinta a colturilor rotunjite in designul
elementelor, fara a fi nevoie de imagini sau mai multe tag-uri <div>.
Internet Explorer suporta border-radius incepand cu IE9, dar puteti folosi libraria de functii
JavaScript DD_roundies ca sa afisati colturi rotunjite in navigatoare web care nu recunosc
aceasta proprietate CSS; vedeti tutorialul Colturi rotunjite in Internet Explorer.
Exemplu:

<style type="text/css"><!-#id1 {
width:300px;
height:120px;
border:2px solid blue;
border-radius:28px;
}
--></style>
<div id="id1"> Curs CSS - www.marplo.net</div>

Rezultat:
Curs CSS - www.marplo.net
Colturile rotunjite pot fi create si independent, folosind cele patru proprietati individuale:
border-top-left-radius, border-top-right-radius, border-bottom-right-radius, si border-bottomleft-radius.
Exemplu:

<style type="text/css"><!-#id1 {
width:300px;
height:120px;
background-color:#bbfeda;
border:2px solid blue;
border-top-left-radius:20px;
border-bottom-right-radius:38px;
}
--></style>
<div id="id1"> Curs CSS - www.marplo.net</div>

Rezultat:
Curs CSS - www.marplo.net

Adaugare umbre la chenare


Proprietatea box-shadow se foloseste pentru a adauga umbre la chenare. Este recunoscuta in
IE9+, Firefox 4, Chrome, si Opera.
box-shadow are urmatoarea sintaxa:
elm { box-shadow: X_offset Y_offset blur marime culoare inset; }

- elm - este elementul HTML la care se aplica aceasta proprietate.


- X_offset - este pozitia /distanta umbrei pe latura orizontala. Sunt permise si valori negative.
- Y_offset - este pozitia /distanta umbrei pe latura verticala. Sunt permise si valori negative.
- blur - defineste distanta "blur" (optionala, 0 sau nespecificata inseamna fara "blur").
- marime - marimea umbrei (optionala).
- culoare - culoarea umbrei (optionala, negru daca nu e specificata).
- inset - schimba umbra din exterior sa apara in interior.
Primele doua valori trebuie adaugate, restul sunt optionale. Daca "blur" sau marime nu sunt
specificate, se considera 0.
Exemplu:

<style type="text/css"><!-#id1 {
width:300px;
height:120px;
background-color:#bbfeda;
box-shadow: 11px 11px 5px #7878da;
-webkit-box-shadow: 11px 11px 5px #7878da;
}
--></style>

/* Safari si Chrome */

<div id="id1"> CSS3 box-shadow, www.coursesweb.net/css/</div>

Rezultat:

CSS3 Imagine pentru bordura

Cu proprietatea border-image se poate folosi o imagine pentru aspectul bordurii.


Aceasta se obtine prin impartirea zonei bordurii in noua segmente, reprezentand cele patru
colturi, cele patru laturi si centrul (dupa cum se vede in imaginea de mai jos). Se foloseste un
singur fisier cu imaginea, impartit similar in cele noua segmente care vor reprezenta colturile,
laturile si centrul.

box-shadow are urmatoarea sintaxa:

elm { border-image: url_img slice width outset repeat; }

- url_img - adresa si numele imaginii folosita pt. bordura.


- slice - specifica distanta pentru zona din imagine folosita in cele patru margini.
- width - lungimea bordurii cu imaginea.
- outset - specifica distanta fata de marginea chenarului, de unde incepe bordura cu imagine.
- repeat - specifica daca partea de imagine trebuie repetata, rotunjita ca incadrare, sau intinsa
(poate avea aceste valori: stretch, repeat, round).
border-image nu e recunoscut in Internet Explorer.
Firefox foloseste proprietatea -moz-border-image.
Safari si Chrome suporta -webkit-border-image.
Pentru a afisa cum trebuie border-image, trebuie sa specificati si proprietatea border-width.

In exemplul urmator se foloseste aceasta imagine:

<style type="text/css"><!-#id1 {
width:200px;
height:120px;
border-width:12px;
-moz-border-image:url('border_image.png') 30 30 round;
/* Firefox */
-webkit-border-image:url('border_image.png') 30 30 round; /* Safari and
Chrome */
border-image:url('border_image.png') 30 30 round;
}
#id2 {
width:200px;
height:120px;
border-width:15px;
-moz-border-image:url('border_image.png') 30 30 stretch;
/* Firefox */
-webkit-border-image:url('border_image.png') 30 30 stretch; /* Safari and
Chrome */
border-image:url('border_image.png') 30 30 stretch;
}
--></style>
<div id="id1"> CSS3 border-image, with round</div><br />
<div id="id2"> CSS3 border-image, with stretch</div>

Rezultat:

CSS3 - text-shadow, word-wrap, textoverflow


CSS3 introduce noi proprietati pentru efecte de text, dar multe dintre ele nu sunt inca
recunoscute de principalele navigatoare web. In aceasta lectie sunt prezentate cele care sunt
mai bine acceptate: text-shadow, word-wrap, and text-overflow.

CSS3 text-shadow
Proprietatea text-shadow introdusa in CSS3 permite adaugarea unui efect de umbra care sa
fie aplicat la textul dintr-un element HTML. Umbra apare in jurul literelor.
Sintaxa:
text-shadow: offset_X offset_Y blur culoare;

- offset_X - specifica pozitia umbrei pe orizontala. Sunt permise si valori negative.


- offset_Y - specifica pozitia umbrei pe verticala. Sunt permise si valori negative.
- blur - defineste distanta pentru valoarea "blur" (optional).
- culoare - defineste culoarea umbrei (optional). Daca nu e specificata, se foloseste negru.
text-shadow e recunoscut in principalele browsere, cu exceptia Internet Explore. Dar
incepand cu versiunea 8 a Internet Explorer puteti folosi o proprietate filter pentru a crea
efecte de umbra pt. text si in IE.
Sintaxa:
filter:progid:DXImageTransform.Microsoft.Shadow(color=val, direction=val,
strength=val);

- color - specifica culoarea umbrei.


- direction - poate avea una din aceste valori numerice: 0=top, 45=top right, 90=right,
135=bottom right, 180=bottom, 225=bottom left, 315=top left.
- strength - reprezinta cantitatea de "blur".

Exemplu:
<style type="text/css"><!-h2 {
/* pt. IE8+ */
filter:progid:DXImageTransform.Microsoft.Shadow(color=#a0a1fe,
direction=135, strength=5);
text-shadow: 2px 3px 3px #a0a1fe;
}
--></style>
<h2>Text cu text-shadow</h2>

Rezultat:

Text cu text-shadow
Se pot adauga mai multe umbre la acelasi text, prin adaugarea mai multor liste de umbre in
proprietatea text-shadow, separate prin virgula.
Urmatorul cod amesteca o culoare verde cu una albastra ca sa creeze un efect de umbra cu
aceste culori:
<style type="text/css"><!-h2 {
/* pt. IE8+ */
filter:progid:DXImageTransform.Microsoft.Shadow(color=#a0a0fe,
direction=135, strength=5);
text-shadow: -1px -1px 1px rgba(110,235,155,0.2), 2px 3px
rgba(0,0,181,0.2);
}
--></style>
<h2>Text cu doua culori pt. text-shadow</h2>

- Observati ca s-a folosit formula rgba(Rosu, Verde, Albastru, Alpha) la definirea culorii,
adaugand si transparenta (Alpha) in acelasi timp.
Rezultat:

Text cu doua culori pt. text-shadow


CSS3 word-wrap
Cu word-wrap puteti determina browser-ul sa rupa cuvintele lungi, cand acestea depasesc
lungimea elementului, trecand pe un rand nou.
Sintaxa:
word-wrap: valoare;

"valoare" poate fi:


- normal - Nu rupe cuvintele intregi (valoarea prestabilita).
- break-word - Permite ruperea cuvintelor intregi. Cuvintele sunt rupte la nivel de caracter,
nu in silabe.
Exemplu:
<style type="text/css"><!-#id1 {
width:100px;
border:1px solid blue;
word-wrap:break-word;
}
--></style>

<div id="id1">Curs CSS gratuit - word-wrap un_cuvant_mai_lung.</div>

Rezultat:
Curs CSS gratuit - word-wrap un_cuvant_mai_lung.

CSS3 text-overflow
Cu proprietatea text-overflow puteti determina ce sa se intample cu textul, cand acesta
depaseste lungimea elementului.
text-overflow este suportat in majoritatea navigatoarelor web, in afara de Firefox.
Sintaxa:
text-overflow: valoare;

"valoare" poate fi:


- clip - taie textul (valoarea prestabilita).
- ellipsis - afiseaza trei-puncte ("") in locul textului taiat.
In general, proprietatea text-overflow se foloseste impreuna cu white-space:nowrap; si
overflow:hidden;.
Exemplu:
<style type="text/css"><!-#id1 {
width:230px;
border:1px solid blue;
white-space:nowrap;
overflow:hidden;
/* "overflow" valoarea trebuie sa fie diferita de
"visible" */
text-overflow:ellipsis;
}
#id2 {
width:230px;
border:1px solid green;
white-space:nowrap;
overflow:hidden;
text-overflow:clip;
}
--></style>
<div id="id1">CSS Tutorial - un text lung pe o singura linie, alte
cuvinte.</div>
<div id="id2">Site web www.marplo.net - alt text lung intr-un singur
rand.</div>

Rezultat:
CSS Tutorial - un text lung pe o singura linie, alte cuvinte.
Site web www.marplo.net - alt text lung intr-un

CSS3 opacity
Proprietatea opacity seteaza nivelul de opacitate al unui element HTML, opacity permite
modificarea transparentei elementului.
IE8 si versiuni anterioare folosesc o varianta alternativa, proprietatea filter.
- Sintaxa:

filter: alpha(opacity=X);
opacity: X;

/* pt. IE */

- X - reprezinta o valoare intre 0 (complet transparent) si 1.0 (fara transparenta).


1) Exemplu, un <div> cu o transparenta CSS de 40%:
<style type="text/css"><!-#dv {
background-color:blue;
width:200px;
height:100px;
filter:alpha(opacity=40);
opacity:0.4;
}
--></style>

/* pt. IE */

<div id="dv">Un continut oarecare ...</div>

Rezultat:
Un continut oarecare ...
2) Exemplu, seteaza opacitate 50% la o imagine:
<style type="text/css"><!-#im {
filter:alpha(opacity=50);
opacity:0.5;
}
--></style>

/* pt. IE */

<img src="html_course.jpg" alt="Curs HTML si CSS" width="155" height="160"


id="im" />

Rezultat:

3) Exemplu, efect imagine transparenta 50%, iar la mouseover 100%:


<style type="text/css"><!-#im2 {
filter:alpha(opacity=50);
opacity:0.5;
}
#im2:hover {
filter:alpha(opacity=100);
opacity:1;
}
--></style>

/* pt. IE */

/* pt. IE */

<img src="html_course.jpg" alt="Curs HTML si CSS" width="155" height="160"


id="im2" />

Rezultat (pozitionati mouse-ul peste imaginea de mai jos):

4) Continut intr-un DIV care la mouseover este acoperit cu un alt <div> transparent (DIV-ul
transparent trebuie sa fie gol, adaugat in primul, si setat cu: position:absolute;):
<style type="text/css"><!-#trans {
display:none;
position:absolute;
top:2%;
left:2%;
width:96%;
height:95%;
background-color:#07fe08;
filter:alpha(opacity=50);
/* pt. IE */
opacity:0.5;
}
#cnt {
position:relative;
background:#e7e8fe;
width:300px;
height:200px;
border:1px solid blue;
padding:20px;
}
#cnt:hover #trans { display:block; }
--></style>
<div id="cnt">
<div id="trans"></div>
Plasati mouse-ul peste aceasta caseta pentru a vedea efectul de opacitate.
<img src="css3.jpg" alt="CSS3 opacity" width="160" height="98" />
</div>

Rezultat:
Plasati mouse-ul peste aceasta caseta pentru a vedea efectul de opacitate.

CSS3 transformari 2D

CSS rotate()

Metoda scale()

CSS skew()

Cu proprietatea CSS transform se poate modifica forma, marimea si pozitia elementelor


HTML.
Se pot transforma elementele HTML in plan 2D sau 3D.
- Sintaxa:
transform: metoda(valori);

- Acest tutorial prezinta metodele de transformare in plan 2D: translate(), rotate(),


scale(), skew() .
Internet Explorer 9 foloseste: -ms-transform .
Firefox foloseste: -moz-transform .
Chrome si Safari folosesc: -webkit-transform .
Opera foloseste: -o-transform .

Metoda translate()
Metoda translate() muta elementul de la pozitia initiala, in functie de parametri dati pentru
pozitionare de la Stanga (axa-X) si de Sus (axa-Y) .
- Sintaxa:
transform: translate(X, Y);

Exemplu. Cand utilizatorul plaseaza cursorul mouse-ului pe un anumit Div, ii muta pozitia cu
20 pixeli de la stanga si 15 pixeli din partea de sus.
<style type="text/css">
#idv {
width:90px;
height:90px;
background:#b0b1fe;
font-size:17px;
}

#idv:hover {
transform: translate(20px, 15px);
-ms-transform: translate(20px, 15px); /* IE 9 */
-webkit-transform: translate(20px, 15px); /* Safari si Chrome */
-o-transform: translate(20px, 15px); /* Opera */
-moz-transform: translate(20px, 15px); /* Firefox */
}
</style>
<div id="idv">Pozitionati mouse-ul aici.</div>

Demo:
Pozitionati mouse-ul aici.

CSS rotate()
Metoda rotate() roteste elementul HTML, in sensul orelor de ceas daca valoarea e pozitiva, in
sens invers orelor de ceas daca valoarea e negativa.
- Sintaxa:

transform: rotate(grade);

Exemplu. Roteste element cu 60 grade in sensul orelor de ceas.


<style type="text/css">
#idv2 {
width:90px;
height:90px;
background:#b0b1fe;
font-size:17px;
}

#idv2:hover {
transform: rotate(60deg);
-ms-transform: rotate(60deg); /* IE 9 */
-webkit-transform: rotate(60deg); /* Safari si Chrome */
-o-transform: rotate(60deg); /* Opera */
-moz-transform: rotate(60deg); /* Firefox */
}
</style>
<div id="idv2">Pozitionati mouse-ul aici.</div>

Demo:
Pozitionati mouse-ul aici.

Metoda scale()
Metoda scale() mareste sau micsoreaza marimea elementului HTML (inclusiv continutul din
el), in functie de parametri pentru Lungime (axa-X) si Inaltime (axa-Y).
- Sintaxa:
transform: scale(Lungime, Inaltime);

- Valorile pentru Lungime si Inaltime sunt in procente. De exemplu, 1.5 inseamna 150% din
marimea originala.
Exemplu. Transforma lungimea sa fie de 2 ori marimea originala, si inaltimea 1.5 ori
inaltimea originala.
<style type="text/css">
#idv3 {
width:90px;
height:90px;
background:#b0b1fe;
font-size:17px;
}
#idv3:hover {
transform: scale(2, 1.5);
-ms-transform: scale(2, 1.5); /* IE 9 */
-webkit-transform: scale(2, 1.5); /* Safari si Chrome */
-o-transform: scale(2, 1.5); /* Opera */
-moz-transform: scale(2, 1.5); /* Firefox */
}
</style>
<div id="idv3">Pozitionati mouse-ul aici.</div>

Demo:

Pozitionati mouse-ul aici.

CSS skew()
Metoda skew() distorsioneaza elementul HTML pe orizontala (axa-X) si verticala (axa-Y),
incluzand si continutul din el.
- Sintaxa:
transform: skew(Xdeg, Ydeg);

Exemplu. Distorsioneaza elementul 20 grade pe lungime (axa-X) si 25 grade pe verticala


(axa-Y).
<style type="text/css">
#idv4 {
width:160px;
height:90px;
background:#abcdfe;
font-size:18px;
transform: skew(20deg, 25deg);
-ms-transform: skew(20deg, 25deg); /* IE 9 */
-webkit-transform: skew(20deg, 25deg); /* Safari si Chrome */
-o-transform: skew(20deg, 25deg); /* Opera */
-moz-transform: skew(20deg, 25deg); /* Firefox */
}
</style>
<div id="idv4">www.coursesweb.net</div>

Demo:
www.coursesweb.net
Cele 4 metode de transformare pot fi utilizate si intr-o singura definitie transform, separate
prin spatiu.
- Sintaxa:
transform: translate(X, Y) rotate(grade) scale(Lungime, Inaltime)
skew(Xdeg, Ydeg);

- Puteti adauga doar acele metode pe care doriti sa le folositi in transformare.


Exemplu, muta elementul cu 50 pixeli de la stanga si 25 pixeli din partea de sus, il roteste cu
20 grade in sens invers orelor de ceas, transforma lungimea de 2 ori cea originala si inaltimea
1.5 ori, distorsioneaza elementul cu 15 grade pe orizontala si 20 grade pe verticala.
<style type="text/css">
#idv5 {
width:90px;
height:90px;
background:#00da01;
font-size:17px;
transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg,
20deg);
-ms-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5)
skew(15deg, 20deg); /* IE 9 */

-webkit-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5)


skew(15deg, 20deg); /* Safari si Chrome */
-o-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5)
skew(15deg, 20deg); /* Opera */
-moz-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5)
skew(15deg, 20deg); /* Firefox */
}
</style>
<div id="idv5">Continut oarecare...</div>

Demo:
Continut oarecare...

CSS3 transition
CSS3 transition poate fi utilizat pentru a anima proprietatile CSS, adaugand un efect de
animatie cand se modifica proprietatile CSS ale unui element HTML, schimband gradual de
la un stil la altut.
CSS3 transition are 4 componente:

transition-property - Specifica numele proprietatii (sau proprietatilor) la care


transition trebuie aplicat (precum: width, color, font-size, etc.).
CSS3 transition poate fi utilizat cu proprietatile prezentate aici: Proprietati CSS ce
pot fi animate

transition-duration - Specifica durata tranzitiei (animatiei), in sesunde (s),


milisecunde (ms), (implicit 0).

transition-timing-function - Defineste tipul vitezei efectului in timpul transformarii:


ease (implicit), linear, ease-in, ease-out, ease-in-out

transition-delay - Defineste timpul de asteptare pana cand incepe efectul "transition"


(implicit 0)

Pentru a folosi CSS3 transition, trebuie specificate aceste doua lucruri:


1. Proprietatea CSS la care se aplica efectul ( transition-property ).
2. Durata efectului ( transition-duration ).
- Ultimele doua componente ( transition-timing-function si transition-delay ) sunt optionale.
- Internet Explorer recunoaste "CSS3 transition" incepand cu IE 10.
Exemplu. Cand mouse-ul e deasupra unui anumit Div, se schimba gradual lungimea.
<style type="text/css">
#iddv {
width:80px;
height:80px;
background:#b8b9fe;
font-size:17px;
transition-property: width;
transition-duration: 1.4s;

/* Firefox 4 */
-moz-transition-property: width;
-moz-transition-duration: 1.4s;
/* Safari si Chrome */
-webkit-transition-property: width;
-webkit-transition-duration: 1.4s;
/* Opera */
-o-transition-property: background-color, color;
-o-transition-duration: 1.4s;
}
#iddv:hover {
width:200px;
}
</style>
<div id="iddv">Pozitionati mouse-ul pe acest patrat.</div>

Demo (Cand cursorul mouse-ului iese din zona elementului, revine gradual la stilul initial):
Pozitionati mouse-ul pe acest patrat.

Proprietatea transition prescurtata


Se pot adauga toate cele 4 componente intr-o singura proprietate transition.
Sintaxa:

transition: transition-property transition-duration transition-timingfunction transition-delay;

Exemplu: Schimba gradual "font-size" (in 0.4 secunde, cu viteza "ease-out") cand mouse-ul e
deasupra unui element cu class="clse".
<style type="text/css">
.clse {
width:150px;
font-size:13px;
transition: font-size 0.4s ease-out;
-moz-transition: font-size 0.4s ease-out; /* Firefox 4 */
-webkit-transition: font-size 0.4s ease-out; /* Safari si Chrome */
-o-transition: font-size 0.4s ease-out; /* Opera */
}
.clse:hover {
font-size: 16px;
}
</style>
<ul>
<li class="clse"><a href="http://www.marplo.net/curs_css/" title="Curs CSS
gratuit">Curs CSS gratuit</a></li>
<li class="clse"><a href="http://www.marplo.net/html/" title="Curs
HTML">Curs HTML</a></li>
<li class="clse"><a href="http://www.coursesweb.net/" title="Cursuri
Programare Web">Cursuri Programare Web</a></li>
</ul>

Demo {plasati cursorul deasupra fiecarui link}:

Curs CSS gratuit

Curs HTML

Cursuri Programare Web

Se pot adauga mai multe proprietati pt efect "transition" intr-o singura definitie, separate
prin virgula.
Exemplu. Adaugare efect la: background, opacity si transform:
<style type="text/css">
.dv1 {
width:115px;
height:100px;
position:relative;
font-size:17px;
text-align:center;
padding-top:18px;
}
.clsdv {
width:120px;
height:100px;
position:absolute;
top:0;
left:0;
background:#b8b9fe;
transition: background 1.3s, opacity 1.8s, transform 1.4s;
-moz-transition: background 1.3s, opacity 1.8s, -moz-transform 1.4s; /*
Firefox 4 */
-webkit-transition: background 1.3s, opacity 1.8s, -webkit-transform 1.4s;
/* Safari si Chrome */
-o-transition: background 1.3s, opacity 1.8s, -o-transform 1.4s; /*
Opera */
}
.clsdv:hover {
background: #00da01;
filter:alpha(opacity=50);
/* pt IE */
opacity:0.5;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari si Chrome */
-o-transform:rotate(180deg); /* Opera */
}
</style>
Puneti mouse-ul deasupra acestui dreptunghi.
<div class="dv1">
<div class="clsdv"></div>
Text oarecare, ascuns
</div>

Demo:
Puneti mouse-ul deasupra acestui dreptunghi.
Text oarecare, ascuns

Proprietati CSS ce pot fi animate

Lista cu proprietati CSS care pot fi utilizate in transition:


- Proprietati pt text: color, font-size, font-weight, letter-spacing, line-height, text-indent,
text-shadow, vertical-align, word-spacing.
- Proprietati pt elemente tip bloc: background, background-color, background-image,
background-position, border-left-color etc., border-spacing, border-left-width etc., clip, crop,
height, min-height, max-height, margin-left etc., opacity, outline-width, outline-offset,
outline-color, padding-left etc., width, min-width, max-width.
- Proprietati de pozitionare: bottom, top, left, right, grid-, visibility, z-index, zoom .

Stiluri si Coduri CSS /CSS3


Coduri CSS / CSS3 utile creatorilor de pagini web pentru a crea diferite forme si stiluri la
elemente HTML, pt designul paginii.
1. Forma Trapez
2. Forma de Romb cu CSS
3. Triunghiuri
4. Cerc si Oval
5. Poligoane (Paralelogram, Pentagon, Hexagon, Octogon)
6. Forme Stea (cu 5, 6, 8 si 12 varfuri)
7. Butoane
8. Diamant
9. Ecran TV
10. Clepsidra
11. Ou cu CSS
12. Yin-Yang
13. Inima cu CSS
14. Alte forme complexe cu DIV si CSS (Prezentare Mesaj, Infinit, Insigna Panglica,
Blazon, Vapor)

15.

Forma Trapez cu CSS

16. Forma trapez cu un tag DIV si proprietati CSS. Forma de trapez e creaata folosind
bordurile.
Cod:
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

<style type="text/css">
#trapezoid {
height: 0;
width: 120px;
border-bottom: 80px solid #05ed08;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
padding: 0 8px 0 0;
}
</style>
<div id="trapezoid"><br/>Curs CSS:<br/>
www.MarPlo.net</div>

30. Rezultat:
31.
Curs CSS:
www.MarPlo.net
32.

33.Trapez dreptunghic
34. Cod:
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.

<style type="text/css">
#rtrapezoid {
height: 0;
width: 120px;
border-bottom: 100px solid #05ed08;
border-left: 15px solid #05ed08;
border-right: 45px solid transparent;
padding-right: 20px;
}
</style>
<div id="rtrapezoid"><br/>Curs CSS:<br/>
www.CoursesWeb.net</div>

48. Rezultat:
49.
Curs CSS:
www.CoursesWeb.net

50.

Forma Romb cu CSS

51. Forma de romb cu un tag DIV si proprietati CSS. Forma de romb e creaata folosind
bordurile.
Cod:
52. <style type="text/css">
53. #rhombus {
54.
position: relative;
55.
top: -60px;
56.
width: 0;
57.
height: 0;
58.
border: 60px solid transparent;
59.
border-bottom: 75px solid #05ed08;
60. }

61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.

/* Zona de jos */
#rhombus:after {
position: absolute;
left: -60px;
top: 75px;
width: 0;
height: 0;
border: 60px solid transparent;
border-top: 75px solid #05ed08;
content: '';
}
/* Continut in romb */
#rhombus div {
position: relative;
margin: 63px auto 0 -41px;
font-weight: bold;
z-index: 888;
}
</style>
<div id="rhombus"><div>MarPlo</div></div>

84. Rezultat:
85. MarPlo

86.

Triunghiuri cu CSS

87. Triunghi in jos


Triunghi stanga
Triunghi stanga-sus Triunghi dreapta-sus
Triunghi jos-dreapta

Triunghi dreapta
Triunghi jos-stanga

Mai multe triunghiuri cu CSS, create doar cu un tag DIV si cateva proprietati CSS.

88.Triunghi in sus
89. Cod:
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.

<style type="text/css">
#triangleup {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}
</style>
<div id="triangleup"><br/><br/><br/>>Sus</div>

101.
102.

Rezultat:

Sus

103.
104.
105.
106.
107.
108.
109.

Triunghi in jos
Cod:
<style type="text/css">
#triangledown {
width: 0;
height: 0;
border-left: 50px solid transparent;

110.
111.
112.
113.
114.
115.
116.
117.

border-right: 50px solid transparent;


border-top: 100px solid blue;
}
/* Continut in triunghi */
#triangledown div{ margin:-85px 0 0 -20px; }
</style>
<div id="triangledown"><div>JOS</div></div>

118.
119.

Rezultat:
JOS

120.

Triunghi stanga

121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.

Cod:
<style type="text/css">
#triangleleft {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 100px solid blue;
}
/* Continut in triunghi */
#triangleleft div{ margin:-10px 0 0 25px; }
</style>
<div id="triangleleft"><div>Stanga</div></div>

135.
136.

Rezultat:
Stanga

137.

Triunghi dreapta

138.

139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.

Cod:

<style type="text/css">
#triangleright {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 100px solid blue;
}
/* Continut in triunghi */
#triangleright div{ margin:-10px 0 0 -85px; }
</style>
<div id="triangleright"><div>Dreapta</div></div>

152.
153.

Rezultat:
Dreapta

154.

Triunghi stanga-sus

155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.

166.
167.

Cod:
<style type="text/css">
#triangletopleft {
width: 0;
height: 0;
border-top: 100px solid blue;
border-right: 50px solid transparent;
}
</style>
<div id="triangletopleft">...</div>

Rezultat:
...

168.

169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.

Triunghi dreapta-sus
Cod:
<style type="text/css">
#triangletopright {
width: 0;
height: 0;
border-top: 100px solid blue;
border-left: 50px solid transparent;
}
</style>
<div id="triangletopright">...</div>

181.
182.
183.

Rezultat:
...

184.

Triunghi jos-stanga

185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.

Cod:
<style type="text/css">
#trianglebottomleft {
width: 0;
height: 0;
border-bottom: 100px solid blue;
border-right: 50px solid transparent;
}
</style>
<div id="trianglebottomleft">...</div>

196.
197.

Rezultat:
...

198.

Triunghi jos-dreapta

199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.

210.
211.

Cod:
<style type="text/css">
#trianglebottomright {
width: 0;
height: 0;
border-bottom: 100px solid blue;
border-left: 50px solid transparent;
}
</style>
<div id="trianglebottomright">...</div>

Rezultat:
...

212. Cerc si Oval cu CSS


213.

214.
215.
216.
217.
218.
219.
220.
221.
222.
223.

Cerc si Oval create cu un singur tag HTML (DIV) si cateva proprietati CSS.

Cerc
<style type="text/css">
#circle {
width: 180px;
height: 180px;
background: #abcdef;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
padding:15px;

224. }
225. </style>
226.
227. <div id="circle"><br/><br/>Cursuri online:<br/>MarPlo.net</div>

228.
229.

Rezultat:

Cursuri online:
MarPlo.net

230.

Forma Ovala

231.
- Raza trebuie sa fie jumatate din lungime si inaltime, la care se adauga
valoarea padding-ului (in acest exemplu: (240 / 2) + 15 = 135, si (120 / 2) + 15 = 75).
232. <style type="text/css">
233. #oval {
234. width: 240px;
235. height: 120px;
236. background: #89f899;
237. -moz-border-radius: 135px / 75px;
238. -webkit-border-radius: 135px / 75px;
239. border-radius: 135px / 75px;padding:15px;
240. }
241. </style>
242.
243. <div id="oval"><br/>Cursuri Programare
Web:<br/>http://CoursesWeb.net</div>

244.
Rezultat:
245.
Cursuri Programare Web:
http://CoursesWeb.net

246. Poligoane cu CSS


247.

Pentagon
Hexagon
Octogon

Cateva forme de poligoane, create doar cu un singur tag DIV si proprietati CSS.

248.

Paralelogram

249.
- Continutul din paralelogram e distorsionat in functie de forma
paralelogramului.
Cod:
250. <style type="text/css">
251. #parallelogram{
252. margin:5px 0 5px 20px;
253. width: 150px;
254. height: 100px;
255. -webkit-transform: skew(20deg);
256. -moz-transform: skew(20deg);
257. -o-transform: skew(20deg);
258. background: #abcdef;
259. }
260. </style>
261.
262. <div id="parallelogram">Cursuri Jocuri
Anime<br/>www.MarPlo.net</div>

263.

Rezultat:

264.
Cursuri Jocuri Anime
www.MarPlo.net

265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.

Pentagon
Cod:
<style type="text/css">
#pentagon {
margin:70px 0 5px 20px;
position: relative;
width: 110px;
border-width: 100px 36px 0;
border-style: solid;
border-color: #abefcd transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -170px;
left: -36px;
border-width: 0 90px 70px;
border-style: solid;
border-color: transparent transparent #abefcd;
}
/* Content in pentagon */
#pentagon div{
position:absolute;
top:-50px;
}
</style>
<div id="pentagon"><div>MarPlo.net</div></div>

296.
297.

Rezultat:
MarPlo.net

298.

Hexagon

299.

300.
301.
302.
303.
304.
305.
306.
307.
308.
309.
310.
311.
312.
313.
314.
315.
316.
317.
318.
319.
320.
321.

Cod:

<style type="text/css">
#hexagon {
width: 100px;
height: 55px;
background: #cdabef;
position: relative;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #cdabef;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px; left: 0;

322.
323.
324.
325.
326.
327.
328.
329.
330.

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #cdabef;

}
</style>

<div id="hexagon">MarPlo.net</div>

331.
332.
333.

Rezultat:

334.

Octogon

335.

MarPlo.net
Cod:

336.
337.
338.
339.
340.
341.
342.
343.
344.
345.
346.
347.
348.
349.
350.
351.
352.
353.
354.
355.
356.
357.
358.
359.
360.
361.
362.
363.
364.
365.
366.
367.

<style type="text/css">
#octagon {
width: 100px;
height: 100px;
background: #a0e8a1;
position: relative;
}
#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid #a0e8a1;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid #a0e8a1;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
</style>
<div id="octagon"></div>

368. Forme Stea cu CSS


369.

Stea 6 varfuri
Stea 8 varfuri
Stea 12 varfuri

Forme Stea, 5, 6, 8 si 12 varfuri, create doar cu un tag DIV si proprietati CSS.

370.

Stea 5 varfuri

371.

Cod:

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


373. /* http://css-tricks.com/examples/ShapesOfCSS/ */
374. #star5 {

375.
376.
377.
378.
379.
380.
381.
382.
383.
384.
385.
386.
387.
388.
389.
390.
391.
392.
393.
394.
395.
396.
397.
398.
399.
400.
401.
402.
403.
404.
405.
406.
407.
408.
409.
410.
411.
412.
413.
414.
415.
416.
417.
418.
419.
420.
421.

margin: 50px 0;
position: relative;
display: block;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #05ed08;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star5:before {
border-bottom: 80px solid #05ed08;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content:"";
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star5:after {
position: absolute;
display: block;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #05ed08;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg); content:"";
}
</style>
<div id="star5"></div>

422.

Rezultat:

423.

Stea 6 varfuri

424.

425.
426.
427.
428.
429.
430.
431.
432.
433.
434.

Cod:

<style type="text/css">
#star6 {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #05ed08;
position: relative;
}
#star6:after {

435.
436.
437.
438.
439.
440.
441.
442.
443.
444.
445.
446.
447.

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #05ed08;
position: absolute;
content: "";
top: 30px;
left: -50px;

}
</style>

<div id="star6"></div>

448.

Rezultat:

449.

Stea 8 varfuri

450.

451.
452.
453.
454.
455.
456.
457.
458.
459.
460.
461.
462.
463.
464.
465.
466.
467.
468.
469.
470.
471.
472.
473.
474.
475.
476.

Cod:

<style type="text/css">
#star8 {
background: blue; width: 80px;
height: 80px;
position: relative;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20eg);
}
#star8:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: blue;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
}
</style>
<div id="star8"></div>

477.
478.

Rezultat:

479.

Stea 12 varfuri

480.

481.
482.
483.
484.
485.
486.
487.
488.
489.
490.
491.
492.
493.

Cod:

<style type="text/css">
#star12 {
background: blue;
width: 80px;
height: 80px;
position: relative;
}
#star12:before, #star12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;

494.
495.
496.
497.
498.
499.
500.
501.
502.
503.
504.
505.
506.
507.
508.
509.
510.
511.

width: 80px;
background: blue;
}
#star12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#star12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
</style>
<div id="star12"></div>

512.
513.

Rezultat:

514. Butoane cu CSS


515.

Buton Pulse
Buton Rotunjit Stanga
Buton Inima-Sageata

Buton 3D-Umbra
Buton Rotunjit Dreapta

Butoane cu CSS, create numai cu proprietati CSS / CSS3, fara a folosi fisier cu
imagine.

516.
517.
518.
519.
520.
521.
522.
523.
524.
525.
526.
527.
528.
529.
530.
531.
532.
533.
534.
535.
536.
537.
538.
539.
540.
541.
542.
543.
544.
545.

Buton Simplu
<style type="text/css">
.buttons {
display: inline-block;
background-color: #ddd;
border: 1px solid #444;
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(top, #eee, #ccc);
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
padding: 6px 10px;
font-weight: bold;
}
.buttons:link, .buttons:visited, .buttons:hover, .buttons:active {
text-decoration: none;
color: #00f;
}
.buttons:hover {
background-color:
background-image:
background-image:
background-image:
background-image:
color: yellow;

#BBB;
-webkit-linear-gradient(top, #DDD, #AAA);
-moz-linear-gradient(top, #DDD, #AAA);
-o-linear-gradient(top, #DDD, #AAA);
linear-gradient(top, #DDD, #AAA);

546. }
547.
548. .buttons:active { background: #CCC; }
549. </style>
550.
551. <a href="http://www.coursesweb.net" title="Cursuri Programare Web
Development" class="buttons">www.CoursesWeb.net</a>
552. <a href="http://www.marplo.net/curs_css/" title="Curs CSS"
class="buttons">Curs CSS</a>

553.
554.

555.

556.
557.
558.
559.
560.
561.
562.
563.
564.
565.
566.
567.
568.
569.
570.
571.
572.
573.
574.
575.
576.
577.
578.
579.
580.
581.
582.
583.
584.
585.
586.
587.
588.
589.
590.
591.
592.
593.
594.
595.
596.
597.
598.
599.
600.
601.
602.
603.

Rezultat:
www.CoursesWeb.net Curs CSS

Buton Pulse

<style type="text/css">
.buttons {
display: inline-block;
background-color: #ddd;
border: 1px solid #444;
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(top, #eee, #ccc);
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
padding: 6px 10px;
font-weight: bold;
}
.buttons:link, .buttons:visited, .buttons:hover, .buttons:active {
text-decoration: none;
color: #00f;
-webkit-animation: "pulse" 1s ease-in-out 0 infinite alternate;
-moz-animation: "pulse" 1s ease-in-out 0 infinite alternate;
animation: "pulse" 1s ease-in-out 0 infinite alternate;
box-shadow: 0px 0px 4px #00ACE6;
}
@-webkit-keyframes pulse {
0% { box-shadow: 0px 0px 4px #00ACE6; }
100% { box-shadow: 0px 0px 12px #00ACE6; }
}
@-moz-keyframes pulse {
0% { box-shadow: 0px 0px 4px #00ACE6; }
100% { box-shadow: 0px 0px 12px #00ACE6; }
}
@keyframes pulse {
0% { box-shadow: 0px 0px 4px #00ACE6; }
100% { box-shadow: 0px 0px 12px #00ACE6; }
}
.buttons:hover {
background-color: #BBB;
background-image: -webkit-linear-gradient(top, #DDD, #AAA);
background-image: -moz-linear-gradient(top, #DDD, #AAA);
background-image: -o-linear-gradient(top, #DDD, #AAA);
background-image: linear-gradient(top, #DDD, #AAA);
'box-shadow: 0px 0px 4px #0001E6;'

604. color: yellow;


605. }
606.
607. .buttons:active { background: #CCC; }
608. </style>
609.
610. <a href="http://www.coursesweb.net" title="Cursuri Programare Web
Development" class="buttons">www.CoursesWeb.net</a>
611. <a href="http://www.marplo.net/ajax/" title="Curs Ajax"
class="buttons">Curs Ajax</a>

612.
613.

Rezultat:
www.CoursesWeb.net Curs Ajax

614.

Buton 3D-Umbra

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


616. /* http://www.marplo.net/curs_css/ */
617. .buttons {
618. -moz-text-blink: none;
619. -moz-text-decoration-color: -moz-use-text-color;
620. -moz-text-decoration-line: none;
621. -moz-text-decoration-style: solid;
622. background-color: #FEFEFE;
623. border-bottom-left-radius: 8px;
624. border-bottom-right-radius: 8px;
625. border-top-left-radius: 8px;
626. border-top-right-radius: 8px;
627. box-shadow: 2px 3px 4px #6789DA inset;
628. color: red;
629. margin-bottom: 1px;
630. margin-left: 5px;
631. margin-right: 5px;
632. margin-top: 1px;
633. padding-bottom: 2px;
634. padding-left: 8px;
635. padding-right: 8px;
636. padding-top: 2px;
637. }
638. .buttons:hover {
639. -moz-text-blink: none;
640. -moz-text-decoration-color: -moz-use-text-color;
641. -moz-text-decoration-line: underline;
642. -moz-text-decoration-style: solid;
643. background-attachment: scroll;
644. background-clip: border-box;
645. background-color: yellow;
646. background-image: none;
647. background-origin: padding-box;
648. background-position: 0 0;
649. background-repeat: repeat;
650. background-size: auto auto;
651. box-shadow: 2px 3px 4px #A0A0DA;
652. color: #0408FE;
653. }
654. </style>
655.
656. <a href="http://www.coursesweb.net" title="Cursuri Programare Web
Development" class="buttons">www.CoursesWeb.net</a>
657. <a href="http://www.marplo.net/curs_css/" title="Curs CSS"
class="buttons">Curs CSS</a>

658.
659.

Rezultat:
www.CoursesWeb.net Curs CSS

660.

Buton Rotunjit Stanga

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


662. .buttons {
663. display: inline-block;
664. background-color: #ddd;
665. border: 1px solid #444;
666. background-image: -webkit-linear-gradient(top, #eee, #ccc);
667. background-image: -moz-linear-gradient(top, #eee, #ccc);
668. background-image: -o-linear-gradient(top, #eee, #ccc);
669. background-image: linear-gradient(top, #eee, #ccc);
670. border-radius: 10px;
671. -moz-border-radius: 10px;
672. -webkit-border-radius: 10px;
673. -khtml-border-radius: 10px;
674. padding: 6px 10px;
675. font-weight: bold;
676. }
677.
678. .buttons:link, .buttons:visited, .buttons:hover, .buttons:active {
679. background-color: #007EBD;
680. background-image: -webkit-linear-gradient(top, #00A0F0, #007EBD);
681. background-image: -moz-linear-gradient(top, #00A0F0, #007EBD);
682. background-image: -o-linear-gradient(top, #00A0F0, #007EBD);
683. background-image: linear-gradient(top, #00A0F0, #007EBD);
684. border-color: #0000CC;
685. color: #FFF;
686. border-top-right-radius: 0;
687. border-bottom-right-radius: 0;
688. margin-right: 0;
689. border-right-width: 0;
690. }
691.
692. .buttons:hover {
693. background-color: #08aded;
694. background-image: -webkit-linear-gradient(top, #00A0F0, #08aded);
695. background-image: -moz-linear-gradient(top, #00A0F0, #08aded);
696. background-image: -o-linear-gradient(top, #00A0F0, #08aded);
697. background-image: linear-gradient(top, #00A0F0, #08aded);
698. text-decoration: none;
699. color: #ff1;
700. }
701.
702. .buttons:active { background: #007EBD; }
703. </style>
704.
705. <a href="http://www.marplo.net/html/" title="Curs HTML"
class="buttons">Curs HTML</a>
706. <a href="http://www.marplo.net/curs_css/" title="Curs CSS"
class="buttons">Curs CSS</a>

707.
708.

709.
710.
711.
712.
713.
714.
715.
716.
717.

Rezultat:
Curs HTML Curs CSS

Buton Rotunjit Dreapta


<style type="text/css">
.buttons {
display: inline-block;
background-color: #ddd;
border: 1px solid #444;
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);

718. background-image: linear-gradient(top, #eee, #ccc);


719. border-radius: 10px;
720. -moz-border-radius: 10px;
721. -webkit-border-radius: 10px;
722. -khtml-border-radius: 10px;
723. padding: 6px 10px;
724. font-weight: bold;
725. }
726.
727. .buttons:link, .buttons:visited, .buttons:hover, .buttons:active {
728. background-color: #8cc99e;
729. background-image: -webkit-linear-gradient(top, #66CC33, #8cc99e);
730. background-image: -moz-linear-gradient(top, #66CC33, #8cc99e);
731. background-image: -o-linear-gradient(top, #66CC33, #8cc99e);
732. background-image: linear-gradient(top, #66CC33, #8cc99e);
733. border-color: #0000CC;
734. color: #FFF;
735. border-top-left-radius: 0;
736. border-bottom-left-radius: 0;
737. margin-left: 0;
738. border-left-width: 0;
739. }
740.
741. .buttons:hover {
742. background-color: #08A009;
743. background-image: -webkit-linear-gradient(top, #66CC33, #08A009);
744. background-image: -moz-linear-gradient(top, #66CC33, #08A009);
745. background-image: -o-linear-gradient(top, #66CC33, #08A009);
746. background-image: linear-gradient(top, #66CC33, #08A009);
747. text-decoration: none;
748. color: #ff1;
749. }
750.
751. .buttons:active { background: #08A009; }
752. </style>
753.
754. <a href="http://www.marplo.net/html/" title="Curs HTML"
class="buttons">Curs HTML</a>
755. <a href="http://www.marplo.net/curs_css/" title="Curs CSS"
class="buttons">Curs CSS</a>

756.
757.

758.
759.
760.
761.
762.
763.
764.
765.
766.
767.
768.
769.
770.
771.
772.
773.
774.
775.

Rezultat:
Curs HTML Curs CSS

Buton Inima-Sageata
<style type="text/css">
.buttons {
display: inline-block;
background-color: #ddd;
border: 1px solid #444;
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(top, #eee, #ccc);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
padding: 6px 10px;
font-weight: bold;
}

776. .buttons:link, .buttons:visited, .buttons:hover, .buttons:active {


777. background-color: #007EBD;
778. background-image: -webkit-linear-gradient(top, #00A0F0, #007EBD);
779. background-image: -moz-linear-gradient(top, #00A0F0, #007EBD);
780. background-image: -o-linear-gradient(top, #00A0F0, #007EBD);
781. background-image: linear-gradient(top, #00A0F0, #007EBD);
782. border-color: #0000CC;
783. color: #FFF;
784. border-top-right-radius: 0;
785. border-bottom-right-radius: 0;
786. margin-right: 0;
787. border-right-width: 0;
788. }
789.
790. .buttons:hover {
791. background-color: #08aded;
792. background-image: -webkit-linear-gradient(top, #00A0F0, #08aded);
793. background-image: -moz-linear-gradient(top, #00A0F0, #08aded);
794. background-image: -o-linear-gradient(top, #00A0F0, #08aded);
795. background-image: linear-gradient(top, #00A0F0, #08aded);
796. text-decoration: none;
797. color: #ff1;
798. }
799.
800. .buttons:active { background: #5CB82E; }
801.
802. .buttons:after {
803. content: "\2192";
804. margin-left: 5px;
805. }
806.
807. .buttons:before {
808. content: "\2665";
809. margin-right: 5px;
810. }
811. </style>
812.
813. <a href="http://www.marplo.net/" title="Cursuri Jocuri Anime"
class="buttons">www.MarPlo.net</a>
814. <a href="http://www.coursesweb.net/javascript/" title="JavaScript
Courses" class="buttons">JavaScript Course</a>

815.
816.

Rezultat:
www.MarPlo.net JavaScript Course

Diamant cu CSS
Doua forme tip diamant, create simplu cu un tag DIV si cateva proprietati CSS.
Cod:
<style type="text/css">
#diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 20px solid #05ed08;
position: relative;
top: -50px;
}

#diamond:after {
content: "";
position: absolute;
left: -50px;
top: 20px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid #05ed08;
}
</style>
<div id="diamond"></div>

Rezultat:

Diamant 2
Cod:

<style type="text/css">
#diamond {
border-style: solid;
border-color: transparent transparent #0809fe transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
margin: 10px 0;
}
#diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: #0809fe transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
</style>
<div id="diamond"></div>

Rezultat:

Ecran TV cu CSS
Forma ecran TV creat doar cu un tag DIV si cateva proprietati CSS.
Cod:
<style type="text/css">
#tvscreen {
position: relative;
width: 200px;
height: 150px;
margin: 20px 10px;
background: #0809fe;
border-radius: 50% / 10%;
color: white;

text-align: center;
text-indent: .1em;
}
#tvscreen:before {
content: "";
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
</style>
<div id="tvscreen">MarPlo.net</div>

Rezultat:
MarPlo.net

Forma tip Clepsidra cu CSS


Forma tip Clepsidra creat cu un tag DIV si cateva proprietati CSS.
Cod:
<style type="text/css">
#clepsydra {
height: 0;
width: 120px;
border-bottom: 120px solid #05ed08;
border-top: 120px solid #05ed08;
border-left: 65px solid transparent;
border-right: 65px solid transparent;
border-radius: 25%;
-moz-border-radius: 25%;
-webkit-border-radius: 25%;
-khtml-border-radius: 25%;
}
</style>
<div id="clepsydra">Cursuri Online:<br/>marplo.net</div>

Rezultat:

Forma de Ou cu CSS
Forma de Ou creat cu un tag DIV si cateva proprietati CSS (fara fisier cu imagine).
Cod:

<style type="text/css">
/* http://css-tricks.com/examples/ShapesOfCSS/ */
#egg {
display:block;
width: 180px;
height: 240px;
background-color: #09fb09;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

}
/* Continut in egg */
#eggsp div {
position:absolute;
padding:89px 2px 2px 9px;
}
</style>
<div id="egg"><div>Cursuri Online<br/>www.marplo.net</div></div></div>

Rezultat:

Yin-Yang cu CSS
Cerc Yin-Yang creat cu un tag DIV si proprietati CSS (fara fisier cu imagine).
Cod:
<style type="text/css">
#yinyang {
width: 100px; height: 50px;
background: #fff;
border-color: #000;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yinyang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #fff;
border: 18px solid #000;
border-radius: 100%;
width: 14px;
height: 14px;
}
#yinyang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: #000;
border: 18px solid #fff;
border-radius:100%;
width: 14px;
height: 14px;
}
</style>
<div id="yinyang"></div>

Rezultat:

Forma Inima cu CSS

Forma de Inima creata cu un tag DIV si proprietati CSS (fara fisier cu imagine).
Cod:
<style type="text/css">
#heartsp {
position: relative;
width: 100px;
height: 90px;
}
#heartsp:before, #heartsp:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heartsp:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
</style>
<div id="heartsp"></div>

Alte forme complexe cu DIV si CSS


Prezentare Mesaj
Insigna Panglica
Vapor

Infinit
Blazon

Cateva forme complexe create doar cu un singur DIV si proprietati CSS, fara a folosi
fisier cu imagine.

Forma 1

Cod:
<style type="text/css">
/* http://www.marplo.net/curs_css/ */
#shp1 {
height: 0;
width: 170px;
background: #b1b0fb;
position: relative;
border-bottom: 110px solid #08fb09;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
padding:0 3px;
}
#shp1:before {
content: "";
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-bottom: 28px solid #b1b0fb;
border-left: 14px solid transparent;
position: absolute;
bottom: 0;
left: -14px;
}
#shp1:after {
content: "";
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-bottom: 28px solid #b1b0fb;
border-right: 14px solid transparent;
position: absolute;
bottom: 0;
right: -14px;
}
</style>
<div id="shp1"><br/>Cursuri Online:<br/>http://www.marplo.net/</div>

Rezultat:
Cursuri Online:
http://www.marplo.net

Prezentare Mesaj
Cod:

<style type="text/css">
/* http://css-tricks.com/examples/ShapesOfCSS/ */
#talkbubble {
margin: 10px 25px;
width: 200px;
height: 89px;
background: #05fb08;
position: relative;
-moz-border-radius: 14px;

-webkit-border-radius:
14px; border-radius: 14px;
padding: 2px 5px;

}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 28px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 26px solid #05fb08;
border-bottom: 13px solid transparent;
}
</style>
<div id="talkbubble"><br/>Cursuri Online:<br/>http://www.marplo.net/</div>

Rezultat:
Cursuri Online:
http://www.marplo.net

Insigna Panglica
Cod:
<style type="text/css">
#badgeribbon {
position: relative;
background: #08fb09;
height: 100px;
width: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
padding: 2px;
text-align: center;
}
#badgeribbon:before, #badgeribbon:after {
content: "";
position: absolute;
margin-top: 8px;
border-bottom: 70px solid #01fb02;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
top: 70px; left: -5px;
-webkit-transform: rotate(-140deg);
-moz-transform: rotate(-140deg);
-ms-transform: rotate(-140deg);
-o-transform: rotate(-140deg);
}
#badgeribbon:after {
left: auto;
right: -5px;
-webkit-transform: rotate(140deg);
-moz-transform: rotate(140deg);
-ms-transform: rotate(140deg);
-o-transform: rotate(140deg);
}

</style>
<div id="badgeribbon"><br/>MarPlo</div>

Rezultat:
MarPlo

Infinit
Cod:

<style type="text/css">
#infinity {
position: relative;
width: 212px;
height: 100px;
}
#infinity:before, #infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid blue;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<div id="infinity"></div>

Rezultat:

Blazon
Cod:

<style type="text/css">
#chevron {
position: relative;
text-align: center;
padding: 12px;
margin: 6px auto;

height: 60px;
width: 200px;
}
#chevron:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: #efabcd;
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
}
#chevron:after {
content: "";
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: #efabcd;
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
}
</style>
<div id="chevron"></div>

Rezultat:
CSS polygon

Vapor
Cod:
<style type="text/css">
#ship {
margin:30px 0 5px 20px;
position: relative;
width: 200px;
border-width: 50px 28px 0;
border-style: solid;
border-color: #ccddef transparent;
font-weight: bold;
}
#ship:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -15px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent #bbcdef;

}
/* Content */
#ship div{
position:absolute;
top:-30px;
}
</style>
<div id="ship"><div>www.CoursesWeb.net</div></div>

Demo:
Introducere
(PHP - Hypertext Preprocessor)

Limbajul PHP a fost creat in anul 1994 de catre Rasmus Lerdorf, care incerca sa-si
personalizeze propria pagina Web; din acest motiv limbajul a fost numit initial PHP adica:
Personal Home Page (pagina de baza personala). Ulterior limbajul a fost perfectionat,
utilitatea si caracteristicile sale s-au dezvoltat treptat, ajungand sa aiba semnificatia Hypertext
Preprprocesor (PHP). Preprocesarea consta in aceea ca datele sunt interpretate(preprocesate)
de catre serverul Web inainte ca acesta sa genereze cod HTML.
PHP este una dintre cele mai interesante tehnologii pentru site-uri si programare web, imbina
caracteristici dintre cele mai complexe cu simplitatea n utilizare. PHP a devenit un
instrument de frunte pentru dezvoltarea aplicatiilor Web. Spre deosebire de alte instrumente
pentru aplicatii Web, cum este Perl, PHP este un limbaj de programare comod pentru
ncepatori, chiar si pentru cei care nu au mai desfasurat activitati de programare.
Daca sunteti un cunoscator al limbajului HTML, dar nu aveti experienta n materie de
programare, va puteti pune ntrebarea: care sunt functionalitatile suplimentare pe care le
poate asigura cunoasterea limbajului PHP? Ca si alte limbaje de scripting pentru Web, PHP
va permite sa furnizati un continut Web dinamic, adica un continut Web care se modifica
automat de la o zi la alta sau chiar de la un minut la altul. Continutul Web este un element
important n sustinerea traficului unui sit Web; de regula, vizitatorii nu vor mai reveni la o
pagina Web care contine aceleasi informatii ca si cele prezentate la ultima vizita. Pe de alta
parte, siturile Web frecvent actualizate pot atrage cantitati enorme de trafic.
Mai mult, spre deosebire de limbajele de scripting, precum JavaScript, PHP ruleaza pe
serverul Web, nu n navigatorulul Web. n consecinta, PHP poate obtine accesul la fisiere,
baze de date si alte resurse inaccesibile programului JavaScript. Acestea constituie bogate
surse de continut dinamic, care atrag vizitatorii. In plus, putem folosi limbajul PHP pentru a
generera cod Java Script.
Secventele de cod PHP pot fi incluse intr-un fisier HTML; ulterior serverul Web va identifica
aceasta secventa de cod , va procesa acesta secventa de cod generand cod HTML iar la final
va inlocui secventa de cod PHP cu codul HTML.
Printre caracteristicile cele mai importante ale imbajului enumeram:
- simplicitate : acest limbaj este simplu de folosit, fiind accesibil si ne-programatorilor.

Datorita acestui fapt el a devenit cel mai popular limbaj de script pentru generarea de pagini
HTML dinamice.
- usor de folosit : limbajul are o sintaxa asemanatoare limbajului C, care este foarte
popular in randul programatorilor. De aceea programatorii care au cunostine de C sau Perl
vor face foarte rapid trecerea spre PHP. Pe de alta parte anumite aspecte cum ar fi: declararea
si folosirea variabilelor este mult simplificata in PHP, spre deosebire de C++ sau alte limbaje
de nivel inalt.

- eficienta : specificatiile limbajului includ folositea tehnicilor de POO (Programare


orientata pe obiecte) iar acest lucru contribuie la marirea productivitatii: un programator PHP
poate folosi module scrise de un alt programator fara sa fie nevoit sa cunoasca detalii
specifice de implementare a codului.
- cross-platform : exista implementari ale limbajului pe mai multe sisteme de operare,
cele mai populare fiind cele de pe sistemele Linux si Windows. In acest caz daca scriem cod
PHP care ruleaza pe un sistem Linux, ulterior vom putea folosi acest cod pe un server care
ruleaza Windows si viceversa.
- gratis : PHP reprezinta un program Open Source, oricine poate folosi acest limbaj fara
a fi nevoit sa plateasca ceva. De asemenea utilizatorii au access la sursele PHP (scrise in
limbajul C). Site-ul oficial al limbajului PHP se afla la : www.php.net , datorita popularitatii
acestui limbaj exista numeroase site-uri Web care prezinta informatii despre PHP, exemple de
cod, forum de discutii , etc.
Acest curs de initiere in PHP si MySQL este menit a prezenta elemente introductive de
programare si dezvoltare a paginilor web folosind PHP. Este important sa retineti ca nu
reprezinta decat un punct de plecare cu lectii si tutoriale php introductive. Dezvoltarea Web
este o activitate solicitanta, iar viitorul dezvoltator Web trebuie sa dispuna de multe abilitati,
printre care si pe aceea de programator. Dezvoltatorii Web ncepatori vor gasi n aceast curs
un prim pas util si amical n activitatea de programare n PHP.
Scrierea scripturilor PHP elementare

Invatati sa creati un script PHP cu cele mai simple instructiuni PHP

Invatati sa documentati si sa executati un script PHP

Un script PHP poate fi foarte simplu sau foarte complex. Totusi, scrierea chiar si a unui script
PHP complex este relativ simpla, necesitand doar un editor de texte obisnuit. In aceasta lectie
veti invata modul de creare si de executare a programelor PHP, veti invata sa creati scripturi
PHP simple, care afiseaza in navigatorul web un text simplu. De asemenea, veti invata sa va
documentati scripturile, astfel incat dumneavoastra si alte persoane sa puteti intelege rapid
scopul si structura acestora.
Mai intai trebuie sa instalati un server web (Apache) si modulul pt. limbajul PHP, acestea
sunt gratuite, le puteti gasi pe net si instala pe fiecare, dar pentru incepatori e recomandat un
program care le are deja configurate (si cu MySQL), precum WampServer, sau sa incarcati

scriptul pe un server web unde este instalat PHP.


Daca nu aveti deja instalat PHP, descarcati de aici -> WampServer, dezarhivati si instalati
programul. (cand este pornit, veti observa o iconita specifica in colltul cu ceasul).
Fisierele .php in care veti scrie scripturile trebuie sa le salvati in directorul www din "wamp",
apoi, ca sa le testati scrieti in browser adresa http://localhost/fisier.php
1. Scrierea scripturilor PHP

Pentru a crea scripturi PHP, majoritatea programatorilor PHP folosesc un editor de texte
obisnuit. Puteti folosi orice editor de texte doriti. Sub Microsoft Windows puteti utiliza
programul Windows Notepad. Daca preferati, puteti folosi editoare specializate, gen
Notepad++. Totusi, trebuie sa tineti cont sa fie un editor de text ce salveaza fisierele cu
format text obisnuit simplu.
Daca folositi UNIX sau Linux, puteti crea scripturi PHP folosind un program precum "vi",
"emacs" sau "pico".
Programul in sine nu conteaza, atata vreme cat poate crea fisiere text ASCII.
Nota : - Unele editoare de texte, precum "Notepad++" sau "vi", asigura un suport special
pentru scrierea programelor PHP. De exemplu, au o caracteristica de colorare a elementelor
de sintaxa ce determina scrierea diferitelor elemente ale codului PHP in culori diferite.
Procedeul de colorare a elementelor de sintaxa faciliteaza depistarea erorilor din programele
proprii.
2. Scrierea scheletului programelor PHP

Fiecare program PHP include doua linii speciale, care indica serverului PHP ca textul cuprins
intre cele doua linii este alcatuit din instructiuni PHP. Practic, aceste linii pot fi asimilate
copertelor unei carti, care pastreaza unitatea programului dumneavoastra PHP. Intre aceste
doua linii vor fi scrise instructiunile PHP. Pentru a incepe sa scrieti un program PHP,
deschideti editorul dumneavoastra de texte si introduceti urmatoarele doua linii :
<?php
?>
- Acesta este un cod de inceput si nu afiseaza nimic.

Apoi, salvati scriptul dumneavoastra sub forma de fisier text, in directorul "www" din
"wamp", cu un nume care respecta urmatoarele reguli:

Este recomandat ca numele fisierului sa fie alcatuit numai din caractere


minuscule, cifre si liniute. Utilizarea de spatii, majuscule si alte caractere
ar putea crea probleme pe sisteme de operare diferite.

Extensia numelui fisierelor trebuie sa fie .php.

Asigurati-va ca ati ales un nume semnificativ, care sa descrie functia


scriptului dumneavoastra, astfel incat sa-l puteti identifica rapid dupa

saptamani sau chiar luni de la crearea acestuia. Veti descoperi ca liniutele


sunt utile pentru separarea cuvintelor care alcatuiesc numele fisierului,
marind astfel lizibilitatea acestuia. De exemplu, un fisier care contine un
script PHP ce va permite sa vizualizati salariile angajatilor poate primi
numele "saarii-angajati.php". Chiar si la mult timp dupa crearea fisierului
respectiv, nu veti avea probleme in a determina scopul acestuia.
3. Afisarea datelor de iesire intr-un browser Web

Programele PHP executa trei categorii de operatii elementare:

Obtin date de la un utilizator.

Executa prelucrari ale datelor, respectiv obtine accesul la datele stocate in


fisiere si baze de date si le manipuleaza.

Afiseaza date astfel incat un utilizator sa le poata vizualiza.

Primele doua operatii sunt oarecum mai dificil de realizat decat cea de-a treia. Totusi, afisarea
datelor astfel incat acestea sa fie vizibile utilizatorului este o operatie foarte simpla. Asa cum
paragrafele unui text scris sunt compuse din propozitii, programele PHP sunt alcatuite din
instructiuni. Regulile care controleaza formarea propozitiilor se numesc sintaxa. Acelasi
termen este folosit si pentru a desemna regulile care guverneaza formarea instructiunilor PHP.
Iata un exemplu pentru crearea instructiunii PHP care trimite date de iesire la un browser
Web, astfel incat acestea sa fie vizibile pentru un utilizator:
<?php
echo "scrieti aici un text oarecare";
?>

Observati ca instructiunea incepe cu un cavant "echo" si se incheie cu un caracter punct si


virgula (;).
Constructia echo trimite datele de iesire care vor fi afisate de browser.
Ghilimelele duble se folosesc pentru delimitarea unei expresii de tip text, in cazul nostru
"scrieti aici un text oarecare" (se pot folosi si ghilimele simple).
In locul propozitiei "scrieti aici un text oarecare" puteti plasa aproape orice text, cu exceptia
altor ghilimele. Totusi, pentru moment, trebuie sa includeti numai litere, cifre, spatii si semne
de punctuatie folosite in alfabetul latin, precum virgula, caracterul punct si virgula, punctul,
semnul de intrebare si semnul exclamarii. De asemenea, puteti include caracterele < >,
folosite pentru delimitarea etichetelor HTML, respectiv caracterul /, folosit pentru a indica
membrul de inchidere al unei perechi de etichete HTML.
De exemplu, iata o instructiune PHP care are drept date de iesire un fragment dintr-un vers
din Scrisoarea a III-a de Eminescu:
<?php
echo "<h2> Iata vine-un sol de pace</h2>";
?>

- Ca sa vedeti rezultatul, salvati fisierul cu acest cod in directorul www din


"wamp", de exemplu cu denumirea teste.php si apelati in browser adresa
http://localhost/teste.php (programul WampServer trebuie sa fie pornit).

Perechea de etichete H2 determina formatarea datelor de iesire ca titlu HTML de nivel 2.


Scripturile PHP pot fi incluse si in fisiere cu cod HTML, ca in urmatorul exemplu (dar salvate
cu extensia ".php"):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test PHP</title>
</head>
<body>
<?php
echo "<h4> Exemplu de script PHP inclus in HTML</h4>" ;
?>
</body>
</html>

In browser va aparea :
Exemplu de script PHP inclus in HTML

Pot fi incluse si scripturi mai complicate ce contin zeci sau chiar sute de linii, atata timp cat
acestea sunt incluse intre cele doua linii specifice limbajului PHP:
<?php
?>
4. Documentarea unui script PHP

In afara de a furniza nume descriptive fisierelor ce contin scripturile dumneavoastra PHP, e


necesar sa includeti in interiorul fiecarui script atat comentarii care sa permita unui cititor sa
determine cu usurinta utilitatea scriptului, cat si alte informatii referitoare la script. De
exemplu, puteti include un comentariu care precizeaza numele autorului scriptului si ce face
acesta.
Iata un model sintactic pentru comentariile PHP:
// Scrieti aici comentariul dumneavoastra (pe o singura linie)
Dupa cum se poate vedea, un comentariu incepe cu doua caractere slash, urmate de un spatiu.
n continuare, linia contine comentariul dumneavoastra, care poate include orice caractere
doriti, inclusiv caractere speciale.
Iata un exemplu simplu de script PHP care include comentarii:
<?php
// Script de la MarPlo.net
// Acest script afiseaza un mesaj vizibil pentru utilizator.

echo "Acesta este un script foarte simplu.";


?>

Nota: Fiecare linie a comentariului trebuie sa inceapa cu doua caractere slash //. Totusi, puteti
crea un comentariu din mai multe linii si in alte moduri. Iata un exemplu:
/*
Acesta este un comentariu pe mai multe linii.
Poate fi alcatuit dintr-un numar oricat de mare de linii.
*/
Pentru a adauga un comentariu alcatuit din mai multe linii, scrieti la inceput caracterele /*, iar
la sfarsit trebuie sa se incheie cu caracterele */. Intre cele doua perechi de caractere, puteti
scrie orice text doriti, folosind oricate linii doriti.
5. Executarea unui script PHP

Dupa ce ati creat un script PHP, veti dori sa-l executati.


Sa luam un alt exemplu, ce contine cod HTML si comentarii:
Deschideti editorul dumneavoastra de texte si introduceti urmatoarele linii :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test PHP</title>
</head>
<body>
<?php
// Script test
// Acest script afiseaza un mesaj vizibil pentru utilizator.
echo "Primul meu script PHP.";
?>
</body>
</html>

Salvati fisierul cu numele test-script.php


Daca ati instalat un server de PHP pe calculatorul dumneavoastra, salvati fisierul in directorul
www al serverului.
Deschideti browserul si scrieti adresa URL http://localhost/test-script.php
Daca nu aveti instalat un server de PHP pe calculator, incarcati (prin FTP) fisierul testscript.php pe un server pe web unde este instalat PHP.
Dupa ce v-ati incarcat fisierul cu scriptul, sunteti pregatit pentru a obtine accesul la acesta.
Deschideti browserul Web si apelati adresa URL asociata scriptului dumneavoastra. Adresa
URL trebuie sa fie alcatuita din adresa URL identificata de administratorul serverului unde ati
incarcat scriptul, urmata de un slash (/), urmata de numele fisierului care contine scriptul

dumneavoastra. Daca adresa URL se incheie deja cu un caracter slash, nu trebuie sa mai
inserati inca un asemenea caracter inainte de numele scriptului dumneavoastra.
De exemplu, daca domeniul serverului unde ati incarcat scriptul e http://www.marplo.net/
ca adresa URL a catalogului care contine scripturile dumneavoastra PHP, puteti obtine
accesul la scriptul dumneavoastra prin intermediul adresei URL http://www.marplo.net/testscript.php
Daca ati tastat corect adresa URL a scriptului dumneavoastra, iar scriptul respectiv nu contine
erori, veti vedea datele de iesire ale scriptului dumneavoastra. Felicitari! Ati devenit
programator PHP!
In browser va aparea:
Primul meu script PHP.

Tipuri de siruri si variabile

nvatati tipul variabilelor in PHP

nvatati sa folositi ghilimele si caractere escape pentru a specifica valori de tip sir
speciale

Numere si siruri, tipul variabilelor


Programele de calculator manipuleaza datele, care reprezinta informatii. Programele PHP
folosesc doua categorii principale de date: numere si siruri. Numerele sunt compuse mai ales
din cifre, n timp ce un sir poate contine orice caracter, inclusiv cifre, litere si simboluri
speciale.
Decizia privind modul de stocare a datelor este importanta, n mod caracteristic, datele se
stocheaza sub forma de numere atunci cnd se doreste executarea unor operatii matematice
asupra datelor, deoarece numerele sunt stocate ntr-un mod care permite efectuarea de
calcule. Pe de alta parte, sirurile sunt stocate folosind o modalitate care faciliteaza ntelegerea
lor de catre operatorul uman. Datele trebuie stocate sub forma de siruri daca formatul
acestora nu este numeric sau daca doriti ca operatorul uman sa fie capabil de a introduce sau
de a vizualiza datele. Practic, puteti asimila numerele cu un mod de stocare a datelor n
interiorul calculatorului. Sirurile se pot asimila unui mod de stocare a datelor n afara
calculatorului.
Aceste doua mari categorii de date: numere si siruri, formeaza opt tipuri principale de
variabile :

- Boolean

- Integer

- Float

- String

- Array

- Object

- Resource

- Null

In mod normal tipul variabilelor nu este specificat explicit; acesta va fi evaluat de catre
interpretorul PHP la momentul run-time (in momentul executarii scriptului).

1. Tipul boolean

Variabilelele de tipul boolean pot lua doar doua valori : FALSE sau TRUE
Variabilele de alt tip decat boolean pot fi convertite la tipul boolean prin operatorul cast
(bool) sau (boolean), plasate inaintea valorilor, desi in general nu e nevoie de aceasta
converrire, valoarea fiind automat recunoscuta de PHP.

. Tipul integer

PHP foloseste doua categorii de numere: ntregi (tipul integer) si duble, cu virgula (tipul
float)
Variabilele integer reprezinta numerele intregi, ele pot fi specificate in format zecimal,
hexazecimal sau octal.
Numerele ntregi reprezinta numerele fara parte fractionara folosite la numarare, plus zero si
numerele negative. Cu alte cuvinte, n PHP termenul de ntreg are aceeasi semnificatie ca si
n matematica. De exemplu, numarul 100 poate fi reprezentat n PHP sub forma de ntreg.
Scrierea numerelor PHP este simpla. Un ntreg PHP se obtine prin scrierea cifrelor care i
alcatuiesc valoarea. Daca valoarea este negativa, scrieti un semn minus imediat la stnga
numarului. Evitati sa scrieti spatii sau virgule ca parte a unui ntreg PHP.
Iata cteva exemple de numere PHP ntregi :
215678 - Numar in reprezentare zecimala
0x1A8; - Numar in reprezentare hexazecimala (reprezinta: 1*16*16 + 10*16 + 8
= 424 (in zecimal))
067
- Reprezinta: 6*8 + 7 = 55 (in zecimal)
Valorile minime, respectiv maxime pe care le poate lua o variabila de tip integer depind de
sistemul de operare pe care ruleaza modulul PHP. De exemplu pentru un sistem Windows
valoarea unui integer se memoreaza pe 32 de biti: 31 bit pentru numar si un bit pentru semn.
In acest caz valorile unui intreg se afla in intervalul :-231 repectiv: 231. Daca incercam sa
folosim un integer cu valori care ies din acest inteval vor avea de-a face cu un fenomen de

depasire : integer overflow. In acest caz interpretorul PHP converteste acesta valoare intr-o
valoare de tip float (care are un interval mai extins de valori).
In PHP simpla impartire a doua valori intregi va produce ca rezultat o variabila de tip float.
Pentru a obtine doar partea intreaga acestui rezultat putem folosi operatorul cast (int) in fata
rezultatului.
Ex.: echo (int)8.7; (va returna 8)
Pentru a rotunji rezultatul la intregul cel mai apropiat de valoarea reala se poate folosi functia
round(), unde intre paranteze se adauga valoarea.
Ex.: echo round(8.7); (va returna 9)

3. Tipul float

Reprezinta variabile de tip real [numerele cu virgula], (n lb. engleza se foloseste punctul
zecimal n loc de virgula). De exemplu 2.5
In general, numerele duble (tipul float) sunt stocate folosindu-se formatul standard IEEE-64,
care furnizeaza 64 de biti. Acest format va permite sa stocati valori care pot merge pna la 1,8
x 10 la puterea 308 sub forma de numere duble si furnizeaza aproximativ 14 cifre dupa
punctul zecimal (sau cifre semnificative) de precizie.
Iata cteva exemple de numere duble (tipul float)

123.4567

- Numar de tip float

1.2e3;

- Reprezinta: 1.2 * 103

4. Tipul string

Reprezinta o insiruire de caractere, fiecare caracter este memorat pe 1 byte; setul de caractere
este limitat la 256 valori distincte. Dimensiunea sirurilor poate fi oricat de mare in PHP, nu
exista specificatii care sa limiteze numarul maxim de caractere dintr-un sir.
Spre deosebire de ntregi si de numere float, care contin cifre, sirurile pot contine orice
caracter. Ca atare, sirurile sunt utile pentru stocarea datelor care nu pot fi calculate, precum
nume, fraze si adrese.
In PHP, un sir poate fi declarat in mai multe feluri:
1) Un mod simplu de a declara un sir este prin delimitarea cu ghilimele simple (' ')
Daca dorim ca sirul sa contina caracterul ' va trebui sa inseram inaintea lui caracterul
escape \. Daca dorim ca sirul sa contina caracterul \ va trebui sa dublam acest caracter. Acest
comportament este exemplificat in exemplul urmator:
<?php
$var1 = 'Acesta este un sir de test';
echo 'Curs \'PHP\'';

echo '<br />Vrei sa stergi C:\\*.* ?';


echo '<br />Variabila var1=$var1';
echo "<br />Variabila var1=$var1";
?>
In browser va aparea:
Curs 'PHP'
Vrei sa stergi C:\*.* ?
Variabila var1=$var1
Variabila var1=Acesta este un sir de test
Observati diferenta dintre ultimile doua linii!
In penultima linie, unde s-a folosit gilimele simple pentru delimitarea sirului, variabila $var1
nu este expandata adica nu este afisat valoarea variabilei var1=Acesta este un sir de test ci
exact textul scris (numele ei). Pentru a realiza afisarea valorii variabilei si nu numele acesteia,
se folosesc ghilimelele duble, precum in ultima linie a exemplului de mai sus.

2) O alta metoda pentru a specifica un sir n PHP este prin folosirea ghiimelelor duble
(" ").
Daca intr-un sir delimitat prin ghilimele duble vrem ca acesta sa afiseze numele unei
variabile, nu valoarea acesteia, adaugam un caracter backslash (\) inaintea numelui variabiei.
Exemplu; echo "Numele variabilei este \$var";
Acest cod va afisa Numele variabilei este $var, oricare ar fi valoarea variabilei "$var".
Caracterele care alcatuiesc sirul sunt incluse ntre ghilimele duble (" ");
De exemplu, sirul reprezentnd numele fizicianului care a formulat teoria relativitatii este
"Albert Einstein". Asa cum s-a explicat, un sir poate contine date numerice; de exemplu,
"3.14159".
Daca se doreste adaugarea de ghilimele duble intr-un sir delimitat de ghilimele duble, se
adauga caracterul \ in fata acestora.
Exemplu; echo "Numele programului este \"PHP\".";
Prin delimitarea cu ghilimele duble PHP faciliteaza includerea n siruri a unor caractere
speciale, precum caracterele de salt la linie noua sau retur de car, prin furnizarea de secvente
escape care reprezinta caractere speciale.
Iata secventele escape folosite n PHP:

\n - salt la linie noua

\r - retur de car (rand nou)

\t - caracter de tabulare pe orizontala

\\ - backslash

\$ - simbolul dolarului

\" - ghilimele duble

Ca exemplu, iata un sir care include un retur de car, urmat de un salt la linie noua: "Salut,
lume!\r\n".
Retineti ca fiecare secventa escape ncepe cu un backslash (\). Pentru a include un backslash
ntr-un sir, trebuie sa folositi doua caractere backslash.
Pe langa imbricarea variabilelor in cadrul sirurilor delimitate prin ghilimele duble, PHP pune
la dispozitie operatorul de concatenare a sirurilor: . (punct) . Acest operator adauga un sir la
sfarsitul altui sir. De exemplu:
<?php
$nume = 'Popescu';
$prenume='Costel';
echo 'Numele de familie este '.$nume. 'iar prenumele este '.$prenume;
?>
In browser va aparea:
Numele de familie este Popescu iar prenumele este Costel
In anumite situatii este necesar sa accesam unul dintre caracterele unui sir. Pentru aceasta
putem folosi parantezele{} ca in exemplul de mai jos:
<?php
$var1 = 'Acesta este un sir de test';
echo $var1{0}; // Afisaza A (primul caracter din sir)
echo $var1{2}; // Afisaza e (al treilea caracter din sir)
?>
Rezultatul afisat va fi
Ae
3) Sintaxa heredoc este o alta modalitate de a delimita siruri
In acest caz delimitatorul este ("<<<"); acesta trebuie urmat de un identificator unic, dupa
care urmeaza sirul de caractere, iar secventa se incheie din nou cu identificatorul mentionat.
Identificatorul de incheiere trebuie sa se afle in prima coloana a liniei, acesta poate contine
caractere alfanumerice dar neaparat trebuie sa inceapa cu o litera, nu cu o cifra sau alt semn.
Veti intelege mai bine studiind exemplu de mai jos:
<?php
$var1 = <<< EOT
Exemplu de sir care foloseste delimitatorul heredoc.
EOT;
echo $var1;
?>

Rezultatul afisat va fi:


Exemplu de sir care foloseste delimitatorul heredoc.

5. Tipul array

Reprezinta un vector de valori (care creaza o matrice, vezi Lectia 9 despre matrice), fiecare
element al matricei are asociat o cheie. Aceasta cheie va fi folosita ulterior la identificarea
unui element specific at matricei. In PHP tipul array se mai numeste si tip map ordonat,
deoarece elemente vectorului sunt ordonate dupa campul cheie.
Variabilele de tip array si lucrul cu acestea vor fi prezentate mai detaliat in lectiile urmatoare.
Iata un exemplu simplu de variabile array:
<?php
$fructe[0] = 'mere';
$fructe[1] = 'caise';
$fructe[2] = 'piersici';
?>

6. Tipul object

Reprezinta de fapt instanta unei clase declarate in PHP. O clasa este o structura care contine
variabile membru si functii membru.
Variabilele de tip object si lucrul cu acestea vor fi prezentate detaliat in lectiile urmatoare.

7. Tipul resource

Este un tip special de variabila care pastreaza o legatura spre resurse externe. Exemple de
resurse externe: manipulatori pentru deschidere de fisiere, conectare la baze de date,
compresia fisierelor, resurse COM, etc...

8. Tipul NULL

Reprezinta varibilele care nu au inca atribuita o valoare.


O variabila se considera a avea valoarea Null daca:

- este setata explicit prin atribuirea valorii NULL

- nu a fost asignata inca o valoare acestei variabile

- variabila a fost stearsa prin functia unset();

Putem afla tipul unei variabile folosind functia gettype() care returneaza un string (sir)
continand tipul variabilei cercetate.
Observati si studiati exemplul de mai jos
<?php
$var1 = TRUE;
$var2 = 100;
$var3 = 23.88;
$var4 = "Nume";
$var[5] = "fructe";
echo gettype($var1);
echo '<br />'.gettype($var2);
echo '<br />'.gettype($var3);
echo '<br />'.gettype($var4);
echo '<br />'.gettype($var[5]);
echo '<br />'.gettype($var6);
?>
In browser va aparea:
boolean
integer
double
string
string
NULL
Observati ca utima linie afisata este NULL, asta deoarece $var6 nu are nici o valoare
determinata

Variabile si operatori PHP

Intelegeti diferenta dintre valori si variabile

Invatati modul de utilizare a operatorilor pentru combinarea valorilor n expresii

Invatati modul de utilizare a functiilor pentru executarea operatiilor elementare

1. Valori si variabile
Daca se asociaza o valoare cu un nume, ca si in algebra, este posibila modificarea acelei
valorii prin referire la numele respectiv. O valoare cu nume se numeste variabila, deoarece.
In limbajul PHP variabilele sunt reprezentate prin semnul $ urmat de numele variabilei.
Numele variabilei este case sensitive, adica conteaza daca numele este scris cu litere mari sau
mici. Intotdeuna numele variabilelor trebuie sa inceapa cu o litera sau o liniuta de subliniere
(_) si poate fi urmat de litere sau cifre.
Iata cateva exemple de nume de variabila:

$var

$Numar

$_elemente

Pentru a asocia o valoare unei variabile, veti scrie cu un semn egal, asa:
$temperatura = 33.5;
Semnul egal este urmat de valoarea care urmeaza a fi atribuita variabilei, in acest exemplu,
valoarea este data de valoarea literala dubla (float) 33.5. Caracterul punct si virgula (;)
marcheaza sfarsitul instructiunii.
De asemenea, puteti atribui valoarea unei variabile catre o alta variabila, prin scrierea unei
instructiuni de atribuire astfel:
$castigator = $nume;
In acest caz, valoarea variabilei $nume devine valoarea variabilei $castigator. Acest procedeu
se numeste. Astfel o modificare facuta asupra lui $nume se va propaga automat si asupra
variabilei $castigator.
Iata exemplul de mai sus asa cum va aparea intr-un script PHP simplu :
<?php
$nume = "Cosmin";
$castigator = $nume;
echo $castigator;
?>
Rezultatul afisat va fi:
Cosmin
Exista si un alt tip de atribuire valoare de la o variabila la alta, denumita atribuire prin
referinta (folosind si caracterul "&"), aceasta de fapt leaga cele doua variabile, vedeti
tutorialul: Atribuire valoare prin referinta .
Forma valorii unei variabile se numeste tipul variabilei. Tipul unei variabile se poate modifica
daca atribuiti variabilei o valoare de un tip diferit fata de cel al valorii curente a variabilei.
De exemplu, instructiunea de atribuire
$x = 3;
Atribue variabilei $x tipul integer.
Daca instructiunea de atribuire
$x = 3.5;
va fi executata ulterior, variabila $x devine de tip float.
Desi instructiunile de atribuire din limbajul PHP si ecuatiile matematice folosesc ambele
semnul egal, cele doua notiuni sunt foarte diferite, deoarece atribuirea nu este acelasi lucru cu
egalitatea. Atribuirea este o operatie care inlocuieste o valoare cu o alta. Pe de alta parte,
egalitatea este o relatie intre doua valori. Cand doua valori sunt egale, acestea raman egale
pentru totdeauna. Totusi, puteti atribui o valoare unei variabile si ulterior puteti atribui
aceleiasi variabile o alta valoare. Cu alte cuvinte, egalitatea este permanenta; atribuirea nu
este.

Variabilele declarate mai sus sunt definite de utilizator. In PHP exista si alte variabile numite
"variabile predefinite" care rezida in nucleul PHP, sunt alocate automat de catre modulul PHP,
si sunt accesibile in program.
In continuare enumeram citeva dintre aceste "Variabile Superglobale" (accesibile din toate
scripturile PHP):

$GLOBALS contine referinte la variabilele globale disponibile in scriptul curent.

$_SERVER variabile definite de server sau relative la contextul in care se executa


scriptul curent

$_GET variabile furnizate scriptului prin adresa URL

$_POST variabile furnizate scriptului prin metoda HTTP POST (in general prin
formulare)

$_COOKIE variabile furnizate scriptului prin HTTP cookie

$_FILES furnizeaza scriptului fisierele uploadate

$_SESSION variabile care sunt inregistrate in sesiunea scriptului

2. Operatori
Pentru a va ajuta sa efectuati calcule si prelucrari ale datelor, PHP include o diversitate de
operatori si functii utile. Cand combinati valorile literale si variabilele cu operatori si functii,
construiti ceea ce este cunoscut sub numele de expresii.
Operatorii sunt simboluri specifice care realizeaza o actiune specifica in cadrul unei expresii.
Operatorii actioneaza asupra variabilelor prezente in expresie. De exemplu in cadrul
expresiilor matematice vom folosi operatori aritmetici.

$a + $b

Adunare : a+b

$a - $b

Scadere : a-b

$a * $b

Inmultire: a*b

$a / $b

Impartire: a/b

$a%$a

Moule :restul impartirii lui a la b

$a +=$b

Echivalent cu: $a = $a + $b

$a -=$b

Echivalent cu: $a = $a - $b

$a *=$b

Echivalent cu: $a = $a * $b

$a /=$b

Echivalent cu: $a = $a / $b

$a++

Incrementare ; Ecivalent cu $a = $a +1

$a--

Decrementare; Echivalent cu $a = $a -1

O proprietate interesanta a operatorului de impartire este aceea ca returneaza o valoare


intreaga daca ambii sai operanzi sunt intregi si rezultatul este un intreg; in caz contrar,
returneaza o valoare cu virgula (de tip float). Astfel, instructiunea de atribuire
$x = 10/3;
atribuie valorii $x valoarea cu virgula 3.3333333333333, chiar daca operanzii operatorului de
impartire sunt ambii intregi.
Similar operatorului de impartire, operatorul modulo executa o impartire; cu toate acestea,
operatorul modulo returneaza restul, nu catul impartirii. De exemplu, prin impartirea lui 10 la
3 se obtine catul 3 si restul 1. Deci, instructiunea de atribuire
$x = 10%3;
atribuie variabilei $x valoarea 1.
Operatorii de incrementare $a++ si decrementare $a-- au un efect diferit daca sunt scrisi ++$a
respectiv --$a
In primul caz, daca avem de exemplu
$x= $a++;
i-se atribue lui $x valoarea variabilei $a dupa care se efectueaza operatia de incrementare ($a
= $a + 1)
Dar daca avem
$x = ++$a=
se efectueaza operatia de incrementare ($a = $a + 1) dupa care i-se atribue lui $x noua
valoarea a lui $a

Ca in matematica, PHP evalueaza operatorii de inmultire si de impartire anterior operatorilor


de adunare, respectiv scadere. Aceasta caracteristica se numeste precedenta.
Datorita precedentei, instructiunea
$x=1+2*3;
atribuie variabilei $x valoarea 7, chiar daca operatorul de adunare apare inaintea celui de
inmultire. Se respecta regulile din matematica. Daca doriti sa controlati precedenta unei
expresii, puteti folosi paranteze. De exemplu, instructiunea
$x=(1+2)*3;
atribuie variabilei $x valoarea 9, deoarece partea inclusa intre paranteze a expresiei este
evaluata prima, asa cum se procedeaza in algebra.

In afara de acesti operatori numerici, PHP include un operator de concatenare a sirurilor (.),
denumit uneori operator de unire, deoarece functia sa consta in unirea sirurilor.
Sa observam urmatorul exemplu:
<?php
$var1 = 'Ionescu';
echo 'Numele candidatului este '.$var1;
$var2 = 'Candidat: ';
$var2 .= $var1;

echo "<br />$var2";


?>
Rezutatul afisat va fi:
Numele candidatului este Ionescu
Candidat: Ionescu
In exemplul de mai sus se observa folosirea operatorului de concatenare . (punct)
Acest operator adauga la sfarsitul sirului curent noul sir furnizat ca parametru.
Expresia $a .= 'Sir de test' este echivalenta cu : $a = $a . 'Sir de test'.

3. Functii
In afara de operatori, PHP include functii care executa operatii utile. Iata unele exemple de
functii:

abs(x) - Returneaza valoarea absoluta a lui 'x'

ceil(x) - Returneaza valoarea 'x', rotunjita la intregul imediat superior

floor(x) - Returneaza valoarea 'x', rotunjita la intregul imediat inferior

max(x,y,...) - Returneaza valoarea maxima a unui set de valori

min(x,y,...) - Returneaza valoarea minima a unui set de valori

pow(x,n) - Returneaza numarul 'x', ridicat la puterea specificata 'n'

strftime(f) - Returneaza data curenta, formatata conform continutului parametrului 'f'

sqrt(x) - Returneaza radacina patrata a lui 'x'

- In afara de acestea, PHP include multe alte functii. Consultati site-ul www.php.net.
Majoritatea functiilor necesita una sau mai multe valori de intrare, cunoscute sub numele de
argumente. De exemplu, functia "sqrt" necesita un argument (aici este 'x') care specifica
valoarea a carei radacina patrata trebuie calculata.
Unele functii, precum min() si max(), preiau un numar nedefinit de argumente. Alte functii nu
necesita nici un fel de argumente. Pentru a putea folosi o functie in mod corespunzator,
trebuie sa cunoasteti:

Numele functiei

Actiunea functiei si valoarea returnata de aceasta, daca exista

Numarul argumentelor preluate de functie

Semnificatia fiecarui argument

Iata un exemplu simplu care foloseste o functie pentru calculul lungimii laturilor unui patrat,
daca este cunoscuta aria patratului:

$latura=sqrt($arie);

Retineti modul in care argumentul functiei este inclus intre paranteze, precum si modul in
care functia si argumentul sau sunt folosite intr-un mod asemanator cu o valoare literala sau o
variabila.
Iata un exemplu care prezinta modul de utilizare a functiei "max", care preia mai multe
argumente:

$punctaj_maxim=max($punctaj1, $punctaj2, $punctaj3);

Rezultatul dat variabilei "$punctaj maxim" va fi determinat de functia "max", aceasta


determinand valoarea cea mai mare a argumentelor din paranteza.
Observati ca fiecare argument este separat de vecinul sau printr-o virgula.

Utilizare formulare HTML cu PHP, $_GET


si $_POST

Invatati sa trimiteti date prin formulare HTML

Invatati sa preluati date trimise prin GET si POST

1. Proiectarea unui formular


Principalele sarcini n proiectarea unui formular HTML le constituie alegerea controalelor
HTML care vor fi incluse n formular, selectarea amplasamentului controalelor si alegerea
numelui acestora.
Studiati lectia HTML despre Formulare, aceasta explica modul de realizare a fiecarui obiect
dintr-un formular HTML si va va ajuta sa invatati rolul acestor elemente HTMLL.

2. Crearea unui formular


Un formular HTML trebuie sa contina un buton de expediere, submit, pe care utilizatorul
executa clic pentru a trimite datele din formular la scriptul PHP.
Formularele se creaza folosind etichete specifice incadrate in tag-ul <form> </form> ca in
exemplul de mai jos:
<form action="script.php" method="post">
Nume:<input type="text" name="nume" />
<br /><input type="submit" name="submit" value="Trmite formular" />
</form>
In browser se va vedea:

Nume:

Fiecare element al formularului trebuie introdus intre etichetele <form> si </form>.


Atributul "action" indica fisierul cu scriptul care va primi datele de la formular si reprezinta
una dintre cele mai importante precizari.
Fiecare element, camp dintr-un formular trebuie sa aibe un nume distinct, dat prin atributul
"name"; acest nume este folosit de scriptul PHP la care sunt trimise datele, astfel, scriptul
PHP recunoaste datele din campul respectiv folosind numele acestuia.

3. Utilizarea metodelor GET si POST


Atributul "method" poate avea doua valori : GET si POST. Diferenta intre metodele GET si
POST consta in modul in care informatia din formular este transmisa scriptului care o
prelucreaza.
- Metoda GET trimite toate informatiile adunate ca parte a adresei URL; aceste informatii
sunt vizibile pentru utilizator.
- Metoda POST transmite informatia intr-o maniera invizibila pentru utilizator si poate
transmite o cantitate mai mare de date decat GET.
Folosind exemplul de formular de mai sus, metoda GET va transmite serverului o adresa
URL ca cea de mai jos:

http://www.marplo.net/script.php?nume=Popescu

iar in cazul folosirii metodei POST, in URL va aparea doar:

http://www.marplo.net/script.php

Metoda GET permite transmiterea unui volum limitat de informatii catre server; de asemenea
nu este recomandata folosirea acestei metode in cazul in care dorim sa transmitem date
personale(de exemplu parolele introduse intr-un formular pot fi vizualizate de oricine in
browserul de Web).

4. Receptionarea datelor de la un formular HTML


In general datele din formular sunt preluate de scriptul PHP prin urmatoarea formula:

$_POST['nume'] - daca este folosit method="post"

$_GET['nume'] - daca este folosit method="get"

- unde "nume este valoarea atributului name al elementului din formularul HTML.
Sa luam un exemplu practic de formular HTML care trimite date (prin method="post") la un
script PHP unde acestea vor putea fi vizualizate.
Salvam scriptul de mai jos intr-un fisier pe care-l numim "test-form.php"
<?php
$nume = $_POST['nume'];

$email = $_POST['email'];
$parola = $_POST['parola'];
echo "Nume = $nume";
echo "<br />E-mail = $email";
echo "<br />Parola = $parola";
?>
Scriem urmatorul cod HTML intr-un alt fisier "form.html", pe care-l salvam in acelasi
director cu scriptul PHP de mai sus.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ro" lang="ro">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title> Test-Form </title>
</head>
<body>
<form action="test-form.php" method="POST">
Nume:<input type="text" name="nume" />
<br />Email:<input type="text" name="email" />
<br />Parola:<input type="password" name="parola" />
<br /><input type="submit" name="submit" value="Trmite datele" />
</form>
</body>
</html>
In browser va aparea:
Nume:
Email:
Parola:
Completam datele din formular, de exemplu: la Nume : Popescu, la Email : plomar@uv.ro si
Parola : parola_mea
Dupa ce am competat datele, apasam clic pe butonul "Trimite datele", acestea vor fi trimise la
scriptul PHP "test-form.php", care le va prelucra si va afisa urmatorul rezultat:
Nume = Popescu
E-mail = plomar@uv.ro
Parola = parola_mea
Sa intelegem exemplu de mai sus.
Folosind formularul de mai sus, atributul NAME din fiecare eticheta INPUT atribuie fiecarei
casete cu text un nume, astfel scriptul PHP va putea recunoaste datele scrise in casete. In
scriptul "test-form".php" vom accesa variabilele:

$nume va primi informatia introdusa in campul Nume

$email va primi informatia introdusa in campul Email

$parola va primi informatia introdusa in campul Parola

Deoarece cunoastem metoda prin care trimitem datele catre scriptul PHP, "POST", am folosit
variabila PHP globala _POST pentru a prelua datele din formular:

$_POST['nume']

$_POST['email']

$_POST['parola']

Constructia echo trimite datele de iesire care vor fi afisate de browser


Variabile PHP globale: _GET si _POST reprezinta de fapt variabile de tip array, fiecare
element se poate accesa prin cheia sa; in cazul nostru cheia fiecarui element este data de
atributul : NAME al casetelor din formular

5. Trimiterea de date unui script prin adresa URL


In afara de a expedia unui script datele printr-un formular, puteti expedia date cu ajutorul
adresei URL a paginii. Pentru aceasta, atasati la sfarsitul adresei URL un semn al ntrebarii
(?) si apoi includeti o serie de perechi "nume-valoare" (separate prin &), ca in exemplu
urmator:

http://www.marplo.net/fisier.php?nume1=valoare1&nume2=valoare2

Exemplul include numai doua perechi "nume-valoare"; cu toate acestea, puteti include oricte
asemenea perechi doriti (separate prin caracterul &), in functie de limita impusa de browser.
Pentru a prelua si folosi datele dintr-o astfel de adresa URL, folositi in interiorul scriptului
PHP expresia "$_GET['nume'], ca in exemplu urmator"

$var1 = $_GET['nume1']

$var2 = $_GET['nume2']

Unde "nume1" si "nume2" sunt numele variabilelor din adresa URL, iar "$var1" si "$var2"
sunt variabilele care vor fi folosite in scriptul PHP (din "fisier.php") si a caror valori vor fi
"valoare1" respectiv "valoare2" continute in adresa URL.
Daca doriti sa trimiteti unui script, prin intermediul adresei sale URL, caractere speciale
precum un semn al intrebarii, un semn egal sau un ampersand, se poate crea confuzie.
Pentru a functiona corect, un sir trebuie sa fie codificat URL. Pentru a codifica URL un sir,
caracterele speciale se nlocuiesc cu echivalentele lor hexazecimale, precedate de un simbol
procent (%). Pentru alte detalii, consultati lectia despre Utilizarea caracterelor speciale,
subtitlul 4 ( Conversia adreselor URL).
De exemplu, forma codificata URL a sirului "la multi ani!" este %22la multi ani%21%22.
Adresa URL rezultanta se numeste "sir de interogare" si nu poate contine spatii. Daca doriti
sa trimiteti un spatiu ca parte a unui sir de interogare, trimiteti n locul spatiului un semn plus
(+). Iata un exemplu de sir de interogare care codifica numele autorului acestui site:

http://www.marplo.net/script.php?autor=Mar+Plo

Unele dintre cele mai comune caractere speciale si echivalentele lor codificate URL sunt
prezentate n tabelul de mai jos:
Caracter special
Echivalentul codificat URL
.
*%2e
>
%3e
^
%5e
~
%7e
+
%2b
,
%2c
/
%2f
:
%3a
;
%3b
%3c
=
%3d
>
%3e
[
%5b
\
%5c
]
%5d
_
%5f
{
%7b
|
%7c
}
%7dc
tab
%09
spatiu
%20
!
%21

%22
#
%23
$
%24
%
%25
&
%26
`
%27
(
%28
)
%29
@
%40
`
%60

Variabile de mediu si erori

In aceasta lectie invatati sa obtineti accesul la valorile variabilelor de mediu.

Invatati despre depanarea si tratarea erorilor.

1. Obtinerea si utilizarea datelor de la o variabila de mediu


Variabilele de mediu sunt folosite pentru stocarea optiunilor si a parametrilor care
personalizeaza mediul de aplicatie. Aplicatiile pot obtine accesul la valorile variabilelor de
mediu si in functie de acestea si pot ajusta comportamentul.
De exemplu, calea de cautare a programelor MS-DOS este stocata ntr-o variabila de mediu
denumita PATH. In general, comenzile sistemelor de operare sunt folosite pentru a configura
variabilele de mediu si pentru a stabili valorile acestora. Cu toate acestea, unele aplicatii
manipuleaza valorile variabilelor de mediu.
Att serverul Web Apache, ct si serverul de aplicatie PHP folosesc variabile de mediu pentru
a prezenta informatii de stare. Unele dintre cele mai importante variabile de mediu folosite de
Apache si PHP sunt rezumate n tabelul de mai jos. Numeroase servere Web, altele dect
Apache, furnizeaza o parte din aceste variabile de mediu sau chiar pe toate.
Multe dintre aceste variabile reflecta caracteristicile cererii HTTP care a solicitat executia
PHP. Puteti vizualiza toate variabilele de mediu disponibile pentru programele PHP prin
invocarea functiei phpinfo() si vizualizarea datelor de iesire generate de aceasta.
Vizualizarea datelor unei variabile de mediu se poate face folosind variabila $_SERVER si o
cheie (intre paranteze patrate) ce repreinta numele variabilei de mediu.

De exemplu, pt. afisarea domeniului serverului unde ruleaza scriptul


echo $_SERVER['SERVER_NAME'];

Variabila de mediu

Descriere

CONTENT_LENGTH

- Lungimea, n octeti, a corpului cererii.

CONTENT_TYPE

- Tipul MIME al datelor din corpul cererii.

DOCUMENT_ROOT

- Calea care constituie radacina arborelui catalogului cu


documente al serverului Web.

GATEWAY_INTERFACE

- Returneaza ersiunea protocolului CGI (Common


Gateway Interface) folosit de serverul Web.

HTTP_ACCEPT

- Continutul antetului HTTP Accept.

HTTP_ACCEPT_CHARSET

- Continutul antetului HTTP Accept-Charset:, care


specifica seturile de caractere ntelese de client.

HTTP_ACCEPT_ENCODING

- Continutul antetului HTTP Accept-Encoding:, care


specifica tipurile de continuturi ntelese de client.

HTTP_ACCEPT_LANGUAGE

- Continutul antetului HTTP Accept-Language:, care


specifica limbajele preferate de client.

HTTP_CONNECTION

- Continutul antetului HTTP Connection:, care indica


optiunile solicitate de client.

HTTP_HOST

- Continutul antetului HTTP Host:, care indica numele de


gazda, folosit de client la prezentarea cererii.

HTTP_REFERER

- Adresa URL a paginii Web care a trimis clientul la


pagina curenta.

HTTP_USER_AGENT

- Continutul antetului HTTP user-Agent, care indica tipul


si versiunea browser-ului folosit.

PATH

- Calea de executie asociata cu mediul serverului.

QUERY_STRING

- Sirul de interogare, daca exista, prin care a fost accesata


pagina.

REMOTE_ADDR

- Adresa IP a clientului (vizitatorului).

REMOTE_HOST

- Numele de gazda al clientului.

REMOTE_PORT

- Adresa portului clientului de unde a pornit cererea.

REQUEST_METHOD

- Metoda de cerere HTTP folosita; de exemplu, GET,


POST, PUT sau HEAD.

REQUEST_URI

- URI folosit pentru accesul la pagina curenta. URI este


alcatuit dintr-un URL si un sir optional de interogare.

SCRIPT_FILENAME

- Numele de cale absolut al scriptului curent.

SCRIPT_NAME

- Adresa URL a scriptului curent.

SERVER_ADMIN

- Adresa de e-mail a administratorului serverului Web.

SERVER_HOST

- Numele de gazda asociat serverului Web care


prelucreaza cererea.

SERVER_PORT

- Portul folosit de serverul Web pentru comunicatii.

SERVER_PROTOCOL

- Numele si versiunea protocolului prin intermediul caruia


s-a executat cererea.

SERVER_SIGNATURE

- Sirul care identifica versiunea serverului Web si numele


de gazda folosit pentru prelucrarea cererii.

SERVER_SOFTWARE

- Sirul care identifica programul server Web si versiunea


acestuia.

- O lista completa a acestor variabile de mediu o gasiti la pagina oficiala $_SERVER


Puteti obtine accesul la variabila de mediu folosind variabila $_SERVER care este de fapt un
Array in care cheile elementelor sunt numele variabilelor de mediu
De exemplu, urmatoarea instructiune echo trimite browserului adresa IP a clientului
(vizitatorului):
<?php
$ip = $_SERVER['REMOTE_ADDR'];
echo "Adresa dv. IP este $ip";
?>
Afisarea sau nu a acestor variabile globale depinde de permisiunile facute la configurarea
serverului PHP si de datele transmise.

2. Depanarea unui script

Uneori, n locul datelor de iesire ale scriptului dumneavoastra, puteti vedea unul din
urmatoarele:

Textul scriptului, n loc de datele de iesire ale acestuia

O caseta de dialog, prin care sunteti ntrebat daca doriti sa descarcati fisierul care
contine scriptul

Un mesaj n care se spune ca scriptul nu exista

Un mesaj n care se spune ca browserul dumneavoastra Web nu are permisiunea de a


obtine accesul la script

Un mesaj n care se spune ca scriptul dumneavoastra contine o eroare

La vizualizarea rezultatelor unui script PHP se pot produce numeroase erori, chiar daca
scriptul n sine este corect.
- Daca vedeti textul scriptului dumneavoastra sau o caseta de dialog prin care sunteti ntrebat
daca doriti sa descarcati fisierul care contine scriptul, este posibil ca extensia fisierului script
sa fie incorecta sau ca serverul PHP sa nu functioneze. Desi fisierele script PHP trebuie sa
aiba, n general, extensia .php, este posibil (dar mai rar) ca un administrator de sistem sa
configureze un server PHP astfel nct acesta sa impuna o alta extensie de fisier. Astfel, daca
scriptul dumneavoastra esueaza din unul dintre aceste doua motive, luati legatura cu
administratorul dumneavoastra de sistem.
- Daca vedeti un mesaj n care se spune ca scriptul nu exista, este posibil ca dumneavoastra sa
fi tastat incorect adresa URL. Verificati daca ati tastat corect adresa URL identificata de
administratorul dumneavoastra de sistem, precum si daca ati atasat corect la aceasta numele
fisierului care contine scriptul, folosind un slash numai daca adresa URL identificata de
administratorul dumneavoastra de sistem nu se ncheie cu acest caracter.
- Daca vedeti un mesaj n care se arata ca browserul dumneavoastra Web nu are permisiunea
de a obtine accesul la script, poate ca este necesar sa modificati permisiunile fisierului script.
Pentru a afla cum trebuie procedat, consultati-va cu administratorul de sistem.
- Daca vedeti un mesaj n care se spune ca scriptul dumneavoastra contine o eroare, verificati
daca nu a aparut vreuna din urmatoarele probleme:

O eroare de tastare, cum ar fi scrierea gresita a cuvntului echo

O eroare de punctuatie, cum ar fi paranteze, ghilimele sau punct si virgula, lipsa sau
inserate gresit

Neincluderea sau includerea eronata a liniilor de delimitare a scriptului, n speta <?


php si ?>

Un marcaj de comentariu ( / / ) care lipseste sau care a fost introdus gresit

De exemplu, iata un script care contine un tip de eroare frecvent ntlnit. Puteti identifica
eroarea?
<?php
// Acest script contine o eroare de sintaxa

echo "Salut, World Wide Web!;


?>
Din script lipseste caracterul ghilimele duble de nchidere, care trebuie sa delimiteze expresia
de tip text. Daca ncercati sa executati acest script, puteti vedea doar o pagina goala sau o
eroare similara celei prezentate n continuare.
Parse error. Parse error in /home/bmccarty/public_html/php/module-01/syntax-error.php On
line 7
Mesajul de eroare ncearca sa va indice sursa erorii, indicnd numarul liniei la care s-a produs
eroarea. Totusi, remarcati ca mesajul va ndruma spre linia 7 a unui script care contine numai
4 linii. Din moment ce ghilimelele duble de nchidere lipsesc, serverul PHP cauta dincolo de
sfrsitul scriptului pentru a gasi ghilimelele duble respective. Ca atare, serverul PHP este
oarecum derutat cu privire la sursa erorii.
Morala este aceea ca nu puteti conta n totalitate pe serverul PHP pentru a determina locatia
erorii; folositi numarul de linie furnizat de server numai ca ndrumar pentru a depista locatia
probabila a erorii.

3. Tratarea erorilor
Modulul PHP poate fi configurat astfel incat sa afiseze erorile intilnite in codul PHP. Acest
lucru poate fi foarte util in cazul depanarii programelor. Pentru a activa afisarea erorilor
exista doua metode:

- modificarea parametrului display_errors din fisierul de configurare "php.ini"

- folosirea functiei ini_set(display_errors);

In cazul primei metode trebuie sa avem drepturi de administrator pentru a modifica fisierul
php.ini. Nu se recomanda setarea parametrului display_errors la valoarea 1(TRUE) in cazul
site-urilor de productie; mesajele de eroare afisate nu sint folositoare utilizatorului. Pe de alta
parte aceasta ar contribui la marirea riscului unui atac.
A doua metoda consta in folositrea functiei ini_set, care permite unui script sa redefineasca
temporar un parametru din fisierul de configurare php.ini.
Consideram un exemplu de cod in care intentionat incercam sa citim variabile care nu exista:
<?php
ini_set('display_errors',1);
echo "Valoarea transmisa este ".$var;
?>
In exemplul de mai sus daca variabila cu nume: "var" nu exista PHP va afisa un mesaj de
eroare de genul:
Notice: Undefined variable: var
Putem determina tipurile de erori pe care le semnaleaza PHP folosind functia:
error_reporting(). Aceasta preia o constanta care specifica nivelul la care se afiseaza erorile.

error_reporting(E_ALL) - semnaleaza toate tipurile de erori

error_reporting(E_ALL & ~E_NOTICE) - semnaleaza toate erorile in afara de


anunturi

error_reporting(0) - dezactiveaza acesta caracteristica.

Exemplu:
<?php
ini_set('display_errors',1);
error_reporting(E_ALL & ~E_NOTICE);
echo "Valoarea transmisa este ".$_GET['orase'];
?>
- Testati acest exemplu pentru a vedea rezultatul.

Constante si tipuri de variabile

nvatati sa definiti si sa utilizati constantele

nvatati sa folositi variabilele dinamice

nvatati sa convertiti valorile dintr-un tip n altul

n aceasta lectie vom discuta despre constante si variabile dinamice. Puteti scrie programe
PHP utile si complexe fara a utiliza constante sau variabile dinamice. Daca utilizarea
constantelor poate facilita citirea programelor dumneavoastra, variabilele dinamice au un
efect contrar. Din acest motiv, n general se recomanda evitarea variabilelor dinamice, mai
ales de catre programatorii PHP ncepatori. Totusi, va puteri afla n situatia de a lucra la un
program PHP scris de o persoana care foloseste aceste variabile; prin urmare, trebuie sa aveti
cunostinte despre variabilele dinamice, indiferent daca le folositi sau nu n propriile
dumneavoastra programe.

1. Utilizarea constantelor
O constanta este pur si simplu o valoare care este... constanta, cu alte cuvinte o valoare care
nu se modifica, n acest sens, constantele sunt opusele variabilelor, deoarece valoarea unei
variabile se poate modifica pe durata executiei unui program.
Pentru a defini o constanta, folositi functia define().
Sa consideram urmatorul exemplu:

define("PI", 3.14159);

- Aceasta instructiune defineste constanta "PI", atribuindu-i valoarea 3.14159. Dupa ce a fost
definita, o constanta se poate folosi n cadrul unei expresii.
De exemplu, puteti calcula aria unui cerc dupa cum urmeaza:

$arie = PI * $raza * $raza;

- Observati ca referintele la o constanta nu folosesc simbolul dolarului. Astfel, o constanta


poate fi cu usurinta deosebita de o variabila. Multi programatori scriu numele constantelor
folosind numai majuscule, ceea ce le face si mai simplu de identificat.
O functie conexa, defined(), poate determina daca o anumita constanta a fost definita.
De exemplu, cu ajutorul urmatoarei instructiuni PHP puteri determina daca fost definita
constanta Pi:

echo defined("PI");

- Retineti ca numele care va fi testat este delimitat prin ghilimele duble.


Functia defined() returneaza valoarea 1 (unu) daca respectiva constanta a fost specificata; n
caz contrar, returneaza zero
In acest exemplu, instructiunea echo va afisa valoarea 1.
Pe lnga sporirea lizibilitatii programelor, constantele pot facilita modificarea acestora.
Sa presupunem ca ati scris un program care contine multe calcule ce folosesc valoarea
3,14159, iar ulterior ati descoperit ca trebuia sa folositi valoarea mai exacta
3,1415926535898. Descoperirea si modificarea fiecarei aparitii a valorii originale poate fi o
activitate mare consumatoare de timp. Dar, daca ati definit o constanta pentru reprezentarea
valorii, numarul 3,14159 va aparea o singura data n program si va fi necesara doar o singura
modificare a constantei.
Valoarea "pi" este folosita extrem de frecvent n unele calcule. Pentru comoditate, PHP
furnizeaza o functionalitate mai indicata dect definirea unei constante cu valoarea pi, functia
pi() returneaza valoarea respectiva, cu 14 cifre semnificative (3.1415926535898).
Astfe, puteti calcula aria unui cerc folosind urmatoarea expresie:

$arie= pi() * $raza * $raza;

2. Lucrul cu variabile dinamice


Daca o constanta poate spori lizibilitatea si simplitatea modificarii programelor, variabilele
dinamice ngreuneaza ntelegerea si posibilitatea de a opera schimbari n program.
Iata un exemplu simplu de variabila dinamica, denumita "$$film" :
<?php
$oameni_buni = 12;
$film = "oameni_buni";
echo $$film;
?>
O variabila dinamica este denumita folosind doua simboluri ale dolarului ($$) si este asociata
cu o variabila obisnuita care are un nume similar si include un singur simbol al dolarului.
In exemplul de mai sus, variabila dinamica $$film este asociata cu variabila obisnuita, dar cu
aceasi nume, $film.
Valoarea unei variabile obisnuite da numele (fara un simbol al dolarului) unei a doua

variabile ordinare, n exemplu nostru, a doua variabila obisnuita este $oameni_buni.


Valoarea acestei a doua variabile obisnuite este valoarea variabilei dinamice: n exemplu,
aceasta este valoarea 12. Deci valoarea variabiei dinamice $$film, si care va fi afisata de
functia "echo" este 12.
O variabila dinamica nu contine, practic, propria sa valoare. n schimb, contine
amplasamentul unde se poate gasi valoarea; cu alte cuvinte, numele unei alte variabile.
Daca variabilele dinamice vi se par derutante, asa e, variabilele dinamice sunt derutante. Sunt
rar folosite, uneori este posibila reducerea dimensiunilor unui program folosind una sau mai
multe variabile dinamice.

3. Lucrul cu tipuri de variabile


In lectia 2 ati invatat despre tipul variabilelor: Boolean, Integer, Float, String, Array,
Object, Resource, Null.
. O consecinta a caracterului dinamic al tipurilor de variabile din limbajului PHP este aceea
ca nu trebuie sa specificati tipul variabilelor. PHP determina tipul variabilei n functie de tipul
ultimei valori atribuite variabilei. Cu toate acestea, caracterul dinamic al tipurilor nu va
scuteste de problemele legate de tipuri. Trebuie sa cunoasteti tipurile acceptate si ceea ce se
ntmpla cnd n cadrul expresiilor se folosesc doua sau mai multe tipuri.
Sa luam n considerare urmatorul script PHP scurt:

$x = 1;

$y = 2.5;

$z = $x+$y;

echo $z;

- Instructiunea de atribuire care stocheaza o valoare n variabila $z este interesanta, deoarece


expresia din membrul drept include un operand Integer (ntreg) si un operand de tip float. Ce
valoare va aparea la iesire? Raspunsul corect este 3.5, o valoare de tip float.
Cnd o expresie aritmetica foloseste mai multe tipuri de variabile, PHP executa conversia
automata a tipului. Daca unul dintre operanzi este de tip float, PHP trateaza ceilalti operanzi
ca si cum ar fi de tip float, executa calculele si returneaza rezultatul ca valoare de tip float.
Este important sa ntelegeti faptul ca prin conversia de tip nu se modifica tipurile variabilelor
unei expresii; acestia sunt pur si simplu tratati ca si cum ar fi fost de un alt tip.
In cadrul exemplului, variabila $x ramne de tip nteger, chiar daca PHP o trateaza ca o
valoare de tip float pentru a executa calculele.
Sirurile (variabilele de tip string) pot fi de asemenea supuse unei conversii de tip. Sa
examinam urmatorul exemplu:

$x = 1;

$y = $x+ "inca 1";

echo $y

- Aici cuvntul "inca" din sirul text este ignorat.


Valoarea afisata este 2, adica suma dintre valoarea variabilei $x si valoarea numerica a sirului
text, care este 1. Valoarea numerica si tipurile unui sir sunt determinate prin respectarea
urmatoarelor reguli:

1. Daca sirul ncepe cu o valoare numerica, valoarea sirului este data de valoarea
numerica respectiva; n caz contrar, valoarea sirului este zero.

2. Daca un punct zecimal sau un exponent (e sau E), este asociat cu valoarea
numerica, tipul variabilei rezultante este float; n caz contrar, tipul valorii rezultante
este un ntreg.

4. Conversia manuala a tipului variabilelor


Daca preferati, puteti prelua controlul conversiei tipului variabilei sau puteti modifica tipul
unei variabile. Pentru a prelua controlul conversiei de tip, puteti converti fortat un operand de
la un tip la altul, proces cunoscut sub numele de "conversie fortata de tip" sau pur si simplu
conversie fortata.
n continuare, este dat un exemplu unei astfel de conversie de tip, unde puteti vedea modul de
efectuare a acesteia:

$x = 1;

$y = 2.5;

$z = $x + (int)$y;

echo $z

Conversia fortata de tip, si anume (int), determina tratarea variabilei $y ca pe un ntreg


(integer), iar valoarea acesteia devine 2, n loc de 2.5, care este valoarea reala a variabilei $y.
Astfel valoarea lui $z care va fi afisata de expresia "echo" este 3.
Tabelul urmator indica si alte conversii fortate de tip care se pot folosi si expresiile care
trebuesc utiizate:
Conversie fortata
Rezultat
(int), (integer)
- Conversie fortata la ntreg
(real), (double),
- Conversie fortata la dublu
(float)
(string)
- Conversie fortata la sir
- Conversie fortata la tablou
(array)
(matrice)
(object)
- Conversie fortata la obiect
O alta modalitate de a trata o variabila ca si cum ar fi de un tip specificat este folosirea unor
functii specifice.
Ca exemplu de utilizare a uneia dintre functiile respective, luati n considerare si studiati
urmatorul exemplu:

<?php
$x = 1.5;
$y = intval($x);
echo $x;
echo "<br />$y";
?>
Rezultatul afisat va fi:
1.5
1
Valoarea 1.5 este afisata ca valoare a variabilei $x, iar valoarea l este afisata ca valoare a
variabilei $y.
Tabelul urmator prezinta si alte functii foosite pentru a trata o variabila ca si cum ar fi de alt
tip.
Functie
Operatie
doubleval(),
- Trateaza argumentul ca fiind de tip
floatval()
dublu.
- Trateaza argumentul ca fiind de tip
intval()
ntreg.
- Trateaza argumentul ca fiind de tip
strval()
string
Nici conversia normala si nici cea fortata nu modifica tipul unei variabile. Ambele
mecanisme determina tratarea variabilelor doar in expresia respectiva ca si cum ar fi de un alt
tip.
Totusi, modificarea tipului unei variabile este posibila prin utilizarea functiei settype().
Acest procedeu este ilustrat n urmatorul exemplu:

$x = 1.5;

settype($x,"integer");

echo $x; // Va afisa valoarea 1

- Tipul variabilei $x va fi schimbat in "integer", astfel valoarea afisata a variabilei $x este 1,


deoarece fractia zecimala se pierde atunci cnd functia settype() converteste valoarea float la
o valoare ntreaga.
Valorile posibile pentru al doilea argument al functiei settype(), si anume argumentul care
specifica tipul dorit, sunt:

"integer"

"double"

"string"

"array"

"object"

Sa ne amintim din lectia 2 ca exista o functie conexa, gettype(), care returneaza un sir care
indica tipul variabilei specificate. Scriptul urmator afiseaza "integer", care indica tipul
variabilei $x:
$x = 1;
echo gettype($x);

Functii pentru variabile si valori


In aceasta pagina sunt functii PHP utile in lucru cu variabile si tipurile lor de valori.

1. empty($var)
- Returneaza TRUE daca variabila "$var" e considerata goala sau cu valoare vida, altfel,
FALSE. Functia "empty()" va returna TRUE, daca $var are una din urmatoarele valori: 0, "",
"0", NULL, FALSE, array().
<?php
$var = '0';
if (empty($var)) {
echo '$var are valoare nula sau zero';
}
?>
2. floatval($var)
- Returneaza valoarea float (numar cu zecimale) a lui "$var", care poate fi numar, ecuatie sau
sir. Similara este si functia "doubleval()".
<?php
$var = '123.456';
echo floatval($var);
?>

// 123.456

3. get_defined_vars()
- Returneaza un array multidimensional ce contine o lista cu toate variabilele definite.
<?php
$arr = get_defined_vars();
print_r($arr["_POST"]);
// Returneaza toate variabilele $_POST
?>
4. get_resource_type(resursa)

- Returneaza un sir cu tipul resursei din parametru.


<?php
$c = mysql_connect();
echo get_resource_type($c);

// mysql link

$fp = fopen("marplo.net", "w");


echo get_resource_type($fp);
// file
?>
5. gettype($var)
- Returneaza tipul variabilei "$var". Un sir cu unul din urmatoarele tipuri: boolean, integer,
double, string, array, object, resource, NULL, unknown type.
<?php
$var1 = 8;
echo gettype($var1);

// integer

$var2 = "8";
echo gettype($var2);

// string

$var3 = array(8=>'http://www.marplo.net');
echo gettype($var3);
// array
$var4 = true;
echo gettype($var4);
?>

// boolean

6. intval($var)
- Transforma valoarea variabile "$var" in numar natural.
<?php
$var1 = 8.9;
echo intval($var1);

// 8

$var2 = "08";
echo intval($var2);

// 8

$var3 = -7.8;
echo intval($var3);
?>

// -7

7. is_array($var)
- Returneaza TRUE daca "$var" e o matrice (Array), in caz contrar, FALSE.
<?php
$lectii = array('http://www.marplo.net', 'php', 'html', 'css');

if (is_array($lectii)) {
echo '$lectii e o matrice';
}
?>
8. is_bool($var)
- Returneaza TRUE daca "$var" e de tip "boolean", in caz contrar, FALSE.
<?php
$var = true;
if (is_bool($var)) {
echo '$var e de tip boolean';
}
?>
9. is_float($var)
- Returneaza TRUE daca "$var" e un numar cu virgula (cu zecimale), in caz contrar, FALSE.
Acelasi rezultat il dau si functiile "is_double()" si "is_real()".
<?php
$nr = 78.9;
if (is_float($nr)) {
echo '$nr e un numar cu zecimale';
}
?>
10. is_int($var)
- Returneaza TRUE daca "$var" e un numar natural (fara zecimale), in caz contrar, FALSE.
Acelasi rezultat il dau si functiile "is_integer()" si "is_long()".
<?php
$nr = 78;
if (is_int($nr)) {
echo '$nr e un numar natural';
}
?>
11. is_null($var)
- Returneaza TRUE daca "$var" are valoarea nula, in caz contrar, FALSE.
<?php
$var = null;
if (is_null($var)) {
echo '$var are valoarea NULL';
}
?>

12. is_numeric($var)
- Returneaza TRUE daca "$var" e un numar (cu sau fara zecimale), in caz contrar, FALSE.
<?php
$nr = 078.9;
if (is_numeric($nr)) {
echo '$nr e un numar';
}
?>
13. is_object($var)
- Returneaza TRUE daca "$var" e o variabila de tip obiect, in caz contrar, FALSE.
<?php
// Se creaza o functie de lucru
function get_vars($obj) {
// Daca variabila $obj e un obiect, returneaza tipul de valori din ea
if (is_object($obj)) {
return var_dump($obj->get_vars);
}
else {
return '$obj nu e de tip obiect';
}
}
// Defineste o clasa si-i adaga un eveniment cu apel la functie
$obj = new stdClass();
$obj->get_vars = array('cursuri', 'tutoriale', 'jocuri')
// Afiseaza rezultatul apelarii functiei cu $obj
echo get_vars($obj);
// array(3) { [0]=> string(7) "cursuri" [1]=> string(9) "tutoriale"
[2]=> string(6) "jocuri" }
?>
14. is_string($var)
- Returneaza TRUE daca "$var" e un sir, in caz contrar, FALSE.
<?php
$var = 'sir test';
if (is_string($var)) {
echo '$var e un sir';
}
?>
15. isset($var)

- Returneaza TRUE daca "$var" e setata (exista in domeniul de lucru, indiferent de valoarea
ei), in caz contrar, FALSE.
<?php
$v = '';
if (isset($v)) {
echo 'Variabila exista';
}
?>
16. print_r(array)
- Afiseaza un sir care prezinta cheile si elementele dintr-o matrice (array). Daca parametru
"array" e un sir sau numar, va afisa valoarea lui.
<?php
$aray = array('site'=>'www.marplo.net', 'php'=>'tutoriale');
print_r($aray);
// Array ( [site] => www.marplo.net [php] => tutoriale )
$var = 'Un sir oarecare';
print_r($var);
// Un sir oarecare
?>
17. serialize($var)
- Stocheaza valoarea /valorile variabilei "$var" intr-un sir. Variabila din parametru poate fi si
de tip Array sau Object. Aceasta functie este utila mai ales pentru stocarea ori transmiterea
datelor unei matrice sau obiect, mentinandu-le structura.
- In cazul obiectelor, se face "serialize" la instanta obiectului (vezi exemplul urmator, de la
"unserialize()"), si sunt salvate in sir variabilele si valorile lor dar nu si metodele (functiile),
ci doar numele lor.
<?php
$aray = array('site'=>'www.marplo.net', 'php'=>'tutoriale');
// Transforma si adauga elementele /valorile variabilei $aray intr-un sir specific
$sir_var = serialize($aray);
echo $sir_var;
// a:2:{s:4:"site";s:14:"www.marplo.net";s:3:"php";s:9:"tutoriale";}
// Creaza o variabila cu sirul serialized identic de mai sus
$sir_serialized = 'a:2:{s:4:"site";s:14:"www.marplo.net";s:3:"php";s:9:"tutoriale";}';
// Transforma acest sir in tipul initial de variabila
$get_var = unserialize($sir_serialized);
print_r($get_var);
// Array ( [site] => www.marplo.net [php] => tutoriale )
?>
18. unserialize(sir)

- Creaza (Retransforma) la forma initiala structura unei variabile care a fost transformata in
sir cu "serialize()". Vezi si exemplul de mai sus.
<?php
// Se creaza o clasa simpla
class test {
public $nr = 8;
// O metoda (functie) a clasei (afiseaza valoarea lui $nr)
public function show_nr() {
echo $this->nr;
}
}
// Creaza instanta la aceasta clasa
$use_class = new test;
// Stocheaza clasa (instanta ei), cu serialize, intr-un sir
$sir_class = serialize($use_class);
echo $sir_class;
// O:4:"test":1:{s:2:"nr";i:8;}
// Recreaza instanta la clasa stocata cu serialize in $sir_class
$get_class = unserialize($sir_class);
// Apeleaza metoda clasei, cu instanta stocata acum in $get_class
$get_class->show_nr();
// 8
?>
19. settype($var, 'tip')
- Seteaza tipul variabile "$var" in "tip", acesta poate fi unul din urmatoarele siruri: "boolean",
"integer", "double", "string", "array", "object", "NULL". Returneaza TRUE in caz de succes,
altfel, FALSE.
<?php
$var = 7.8;
echo gettype($var);

// double

// Modifica tipul variabilei, in "string"


settype($var, 'string');
echo gettype($var);
// string
?>
20. strval($var)
- Preia intr-un sir valoarea variabilei "$var".
<?php
$var = 7*8;

echo strval($var);
?>

// 56 (sir)

21. unset($var)
- Distruge variabila "$var".
<?php
$aray = array('key'=>'test', 'php'=>'functii');
print_r($aray);
// Array ( [key] => test [php] => functii )
// Distruge un element din matrice
unset($aray['key']);
print_r($aray);
// Array ( [php] => functii )
?>
22. var_dump($var)
- Afiseaza informatii detaliate despre variabila din parametru, cum ar fi: tipul ei, numarul de
elemente si valoarea (valorile) din ea.
<?php
$aray = array('key'=>'test', 'php'=>'functii');
var_dump($aray);
// array(2) { ["key"]=> string(4) "test" ["php"]=> string(7)
"functii" }
$sir = 'Sir test';
var_dump($sir);
?>

// string(8) "Sir test"

23. var_export($var, true)


- Parametrul "true" e optional, cand acesta este adaugat, functia returneaza un sir cu structura
variabilei "$var", care poate fi exportat sub forma de sir in alta variabila. Daca parametrul
"true" nu e adaugat, afiseaza direct structura completa a lui "$var". E similara cu
"var_dump()", diferenta fiind ca "var_export()" returneaza structura variabilei asa cum e
scrisa, valida cod PHP.
<?php
$aray = array('key'=>'test', 'php'=>'functii');
$get_var = var_export($aray, true); // Exporta structura lui $aray, ca sir, in alta variabila
echo $get_var;
// array ( 'key' => 'test', 'php' => 'functii', )
$sir = 'Sir test';
var_export($sir);
?>

// 'Sir test'

Instructiuni conditionale if() else

Invatati sa definiti si sa folositi valorile de tip adevarat/fals

Invatati sa ntelegeti si sa scrieti instructiunile if si else

1. Utilizarea valorilor de tip adevarat / fals


Majoritatea programelor utile nu se comporta n exact acelasi mod la fiecare rulare a acestora,
n schimb, programele iau decizii, executnd uneori o operatie si alteori alta, n functie de
circumstante.
Programele PHP iau decizii prin evaluarea unor expresii conditionale si executa instructiuni
bazate pe rezultatele acestor evaluari. Expresiile conditionale sunt asimilate ca avnd una din
doua valori: TRUE (adevarat) sau FALSE (fals). Uneori, expresiile conditionale se mai
numesc si expresii booleene, n onoarea matematicianului care le-a studiat, George Boole.
Constanta TRUE are valoarea l, iar FALSE are valoarea 0.
O modalitate utila de a forma o expresie conditionala consta n utilizarea operatorilor logici
pentru compararea a doua valori numerice. Sa luam urmatorul exemplu:
$a < 1;
Aceasta expresie conditionala foloseste operatorul <, care are, n esenta, aceeasi semnificatie
ca n algebra. Expresia are valoarea TRUE daca si numai daca valoarea variabilei $a este mai
mica dect 1; n toate celelalte cazuri, are valoarea FALSE.
Puteti forma expresii conditionale complexe prin unirea a doua expresii conditionale cu
ajutorul unui operator logic. De exemplu, expresia urmatoare este adevarata daca ambele
expresii conditionale care o compun sunt adevarate:
$a < 1 AND $b < 1
Cu alte cuvinte, expresia este adevarata daca att variabila $a, ct si variabila $b au valori mai
mici dect 1.
PHP furnizeaza un set de asemenea operatori relationali, prezentati pe scurt n tabelul de mai
jos.
Puteti folosi operatorii logici pentru compararea sirurilor; cu toate acestea, un sir care apare
ntr-o expresie conditionala este convertit la o valoare numerica nainte de evaluarea
expresiei. Deseori, se ajunge la rezultate neasteptate, n general, valorile sirurilor trebuie sa
fie comparate folosind o functie de comparare a sirurilor; aceste functii vor fi explicate n
lectiile urmatoare.

Operator
$a < $b
$a > $b
$a >= $b
$a <= $b
$a = $b
$a == $b
$a != $b

Operatori logici
Descriere
- TRUE daca valoarea lui $a este mai mica dect valoarea lui $b.
- TRUE daca valoarea lui $a este mai mare dect valoarea lui $b.
- TRUE daca valoarea lui $a este mai mare sau egala cu valoarea lui $b
- TRUE daca valoarea lui $a este mai mica sau egala cu valoarea lui $b
- TRUE daca valoarea lui $a este egala cu valoarea lui $b.
- TRUE daca $a si $b sunt identice; cu alte cuvinte, daca $a si $b au
acelasi tip si aceeasi valoare
- TRUE daca valoarea lui $a este diferita de valoarea lui $b

- TRUE daca $a si $b nu sunt identice; cu alte cuvinte, daca $a si $b nu


sunt de acelasi tip si aceeasi valoare
$x AND $y - TRUE daca att $x, ct si $y sunt adevarate
$x && $y - TRUE daca att $x, ct si $y sunt adevarate.
$x OR $y - TRUE daca minimum una din expresiile $x sau $y este adevarata.
$x || $y - TRUE daca minimum una din expresiile $x sau $y este adevarata.
$x XOR $y - TRUE daca numai una din expresiile $x sau $y este adevarata.
!$x
- TRUE daca $x este FALSE
NOT $x - TRUE daca $x este FALSE
$a !== $b

Retineti ca puteti prefixa o expresie conditionala cu operatorul !, care inverseaza valoarea


"TRUE" sau "FALSE" a operandului sau.

Observati ca PHP foloseste doi operatori logici care executa aceeasi operatie (AND si &&)
respectiv (OR si ||).
Cu toate acestea, operatorii difera din punctul de vedere al precedentei - caracteristica care
determina ordinea n care sunt executate operatiile n timpul evaluarii expresiilor. Operatorii
&& si || au o precedenta relativ ridicata, n timp ce operatorii AND si OR au o precedenta
relativ redusa. Este la fel ca in aritmetica unde, intr-o ecuatie ca aceasta: a + b * c se executa
intai inmultirea si apoi adunarea, chiar daca ordinea lor este alta (daca nu sunt folosite
paranteze). La fel si in PHP, se pot folosi paranteze rotunde pentru a controla ordinea
executarii operatiilor.
Pentru comoditate, puteti forma expresii conditionale fara un operator logic. De exemplu,
daca $a este o variabila numerica, puteti folosi expresia $a ca expresie conditionala. Expresia
este considerata ca avnd valoarea FALSE daca valoarea variabilei $a este zero, respectiv
valoarea TRUE daca valoarea variabilei respective este diferita de zero.
Daca folositi un sir ca expresie conditionala, expresia are valoarea FALSE daca sirul este vid
sau daca are valoarea speciala "\0", care simbolizeaza un octet cu valoarea zero.
Similar, utilizarea unei valori nedefinite ca expresie conditionala determina obtinerea valorii
FALSE. Daca folositi un tablou sau un obiect ca expresie conditionala, aceasta are valoarea
FALSE daca tabloul sau obiectul sunt vide (fara vreo valoare); n caz contrar, expresia are
valoarea TRUE.

2. Scrierea instructiunilor "if"


Expresiile conditionale sunt esentiale pentru scrierea instructiunilor conditionale, prin care se
iau decizii.
Una dintre cele mai simple si folosite instructiuni conditionale este instructiunea : if.
If(conditie) {
Instructiune(1);
Instructiune(2);
..................
}

- Dupa cum se observa dupa if urmeaza o pereche de paranteze rotunde in interiorul carora se
plaseaza conditia, adica o expresie logica a carei rezultat poate fi TRUE sau FALSE. Daca si

numai daca rezultatul expresiei logice (conditia) este TRUE se vor executa instuctiunile :
Instructiune(1), apoi Instructiune(2), etc...
Se observa ca acest set de instructiune se plaseaza intre acolade. Doar intr-un singur caz
aceste acolade nu sunt necesare si anume: in cazul in care este scrisa doar o singura
instructiune.
Daca rezultatul expresiei logice dintre paranteze rotunde este FALSE , setul de instructiuni
dintre acolade nu se va executa, controlul programului va trece mai departe.
Iata inca un exemplu, practic:
<?php
$numar = 12;
if ($numar > 10) {
echo "Acesta este un numar mai mare decat 10";
}
?>

- Atunci cnd este executat scriptul, instructiunea if evalueaza expresia conditionala $numar
> 10, care este adevarata (TRUE) numai daca valoarea variabilei $numar este mai mare dect
10. Daca valoarea variabilei $numar este mai mare decat 10, se va executa instructiunea echo,
in caz contrar programul va trece mai departe.
In general, limbajul PHP ignora spatiile albe. In mod conventional, o instructiune asociata
unei instructiuni "if" este scrisa decalat n raport cu aceasta. Acest procedeu este recomandat
deoarece prin utilizarea sa este facilitata citirea programului.

Utilizarea instructiunii "else"


Sa presupunem ca doriti sa executati o instructiune atunci cnd o conditie este TRUE si o alta
instructiune cnd conditia este FALSE. Instructiunea else va permite sa procedati astfel, dupa
cum urmeaza:
If(conditie) {
Instructiune(1);
Instructiune(2);
..................
}
else {
Instructiune(3);
Instructiune(4);
..................
}

In acest din urma caz daca expresia logica din paranteze: conditie este adevarata se vor
executa instructiunile: Instructiune(1); Instructiune(2); , iar daca valoarea expresiei logice :
conditie are valoarea FALSE se vor executa instructiunile: Instructiune(3); Instructiune(4);
Instructiunea asociata unei instructiuni if sau else poate fi ea nsasi o instructiune if. O
asemenea instructiune if se numeste "instructiune if imbricata".
Iata un exemplu de instructiune if imbricata:
<?php
$numar = 88;
if ($numar > 10) {
if ($numar > 100) {
echo "Acesta este un numar mai mare decat 100";
}
else {

echo "Acesta este un numar mai mic decat 100, dar mai mare decat 10";

}
else {
echo "Acesta este un numar mic";
}
?>

Exemplul afiseaza mesajul "Acesta este un numar mai mare decat 100" daca valoarea
variabilei $numar depaseste 100; n caz contrar, daca valoarea variabilei $numar este mai
mare dect 10 si mai mica decat 100, se afiseaza mesajul "Acesta este un numar mai mic
decat 100, dar mai mare decat 10". Daca valoarea variabilei $numar este mai mica sau egala
cu 10, exemplul afiseaza mesajul "Acesta este un numar mic".
Instructiunile if imbricate pot deveni extrem de dificil de nteles daca numarul de instructiuni
si nivelul de imbricare nu sunt relativ reduse. Deci trebuie sa le folositi cu economie.
O instructiune corelata att cu instructiunea if, ct si cu instructiunea else, este instructiunea
elseif. Cnd este folosita corect, poate fi mai simplu de nteles dect o instructiune if
imbricata, logic echivalenta cu aceasta.
Iata un exemplu de instrutiune else if():
<?php
$numar = 88;
if ($numar > 100 ) {
echo "Acesta este un
}
elseif ($numar > 10) {
echo "Acesta este un
}
elseif ($numar > 1) {
echo "Acesta este un
}
else {
echo "Acesta este un
}
?>

numar mai mare decat 100";


numar mai mic decat 100, dar mai mare decat 10";
numar mic";
numar foarte mic";

Exemplul extinde functionalitatea exemplului anterior, afisnd mesajul "Acesta este un numar
foarte mic" pentru valori ale variabilei $numar mai mici sau egale cu 1.
ntr-un caz general, cu o instructiune if si cu o instructiune else poate fi asociat un numar
mult mai mare de instructiuni elseif. PHP evalueaza expresiile conditionale n mod succesiv,
pornind de la expresia conditionala asociata instructiunii "if". PHP executa instructiunea
asociata primei expresii conditionale care are valoarea TRUE; daca nici o expresie
conditionala nu are valoarea TRUE, PHP executa instructiunea asociata cu instructiunea else.
Este permisa omiterea instructiunii else, caz n care nu este executata nici o instructiune daca
nici una din expresiile conditionale nu are valoarea TRUE.

Instructiuni conditionale switch

Invatati sa ntelegeti si sa scrieti instructiunea switch si instructiunile conexe acesteia:


break, default.

Scrierea instructiunilor switch, break si default

In cazul in care vrem sa comparam valoarea unei singure variabile cu o succesiune de valori,
in locul instructiunii "if" putem folosi instructiunea switch:
De exemplu, sa presupunem ca valoarea variabilei $numar este l, 2 sau 3, reprezentnd
respectiv dimensiunile "mica", "medie" si "mare". Iata un mic script care afiseaza
dimensiunile asociate valorilor variabilei $numar, folosind functia switch alaturi de break si
default care vor fi explicate mai jos:
<?php
switch($numar) {
case(1):
echo "mic";
break;
case(2):
echo "mediu";
break;
case(3):
echo "mare";
break;
default:
echo "Acesta nu este un cod valabil";
}
?>
- Actiunea unei instructiuni switch este determinata de valoarea unei expresii ntregi, nu de
valoarea unei expresii conditionale. Numele variabilei este dat ntre parantezele care urmeaza
dupa cuvntul cheie switch. Acoladele delimiteaza o serie de instructiuni case si o
instructiune default optionala, fiecare dintre instructiunile cuprinse ntre acolade putnd avea
instructiuni asociate.
Cnd este executata, instructiunea switch ncearca sa stabileasca o identitate ntre valoarea
variabilei sale si valoarea asociata unei instructiuni case. Se vor executa instructiunile
asociate primei instructiuni "case" pentru care identitatea respectiva este valabila.
Daca valoarea variabilei din instructiunea switch nu corespunde nici uneia din valorile
asociate instructiunilor case, se vor executa instructiunile asociate instructiunii default, daca
exista o asemenea instructiune (ne este obligatorie).
Un procedeu de programare indicat consta n aceea ca fiecare instructiune case din cadrul
unei instructiuni switch sa se ncheie cu o instructiune break.
; Instructiunea break determina ncheierea executiei instructiunii switch, sare peste "caseurile" ramase si se executa codurile care mai sunt (daca exista) dupa "switch". n absenta
instructiunii "break", executia trece la urmatoarea instructiune "case" sau "default", fapt
nedorit n majoritatea cazurilor.
Nu este necesar sa folositi numere ntregi consecutive n instructiunile case ale unei
instructiuni switch. Daca preferati, puteti folosi numere ntregi non-consecutive, numere cu
virgula sau siruri. Valoarea de la "case" se poate adauga si fara paranteze, separata prin spatiu.
- Exemplu:
<?php
$site = 'marplo';
switch($site) {
case 1:
echo 'php.net';
break;
case 'coursesweb':

echo 'http://coursesweb.net';
break;
case 'marplo':
echo 'www.marplo.net';
break;
default: echo 'google.com';
}
?>

2. Operatorul ? :
Operatorul conditional ?:, denumit uneori "operator ternar" sau "operator ntrebare-doua
puncte", constituie o alta modalitate de a scrie decizii n PHP.
Acest operator formeaza o expresie care se poate folosi n multe contexte PHP. Iata sintaxa de
utilizare a acestuia:
expresie-conditionala ? valoare-TRUE : valoare-FALSE

Observati cum semnul ntrebarii este separat de caracterul doua puncte prin valoarea valoareTRUE.
Operatorul conditional si evalueaza expresia conditionala. Daca expresia este evaluata la
valoarea TRUE, operatorul conditional returneaza valoarea valoare-TRUE; n caz contrar,
returneaza valoarea valoare-FALSE.
De exemplu, sa luam n considerare urmatoarea instructiune de atribuire, care foloseste un
operator conditional:
$a = ($b > $c) ? 10

: 20;

Aceasta instructiune de atribuire compara valorile variabilelor $b si $c. Daca valoarea


variabilei $b este mai mare dect aceea a variabilei $c (adica TRUE), atunci variabilei $a i
este atribuita valoarea 10; n caz contrar, variabilei respective i este atribuita valoarea 20.

Instructiuni repetitive for() si while()

Invatati sa ntelegeti si sa scrieti instructiunile while(), do while si for()

Scrierea instructiunilor "for"


Instructiunea for() este o instructiune bucla sau o instructiune iterativa; cu alte cuvinte, o
instructiune care executa n mod repetat instructiunile asociate.
Sintaxa generala a instructiunii for este urmatoarea:
for(expresie1; conditie; expresie2) {
Instructiune(1);
Instructiune(2);
Instructiune(3);
.............
}
expresie1 se executa o singura data si anume la inceputul instructiunii; conditie este o
expresie logica ; instructiunea for() se executa atita timp cat valoarea expresiei : conditie are
valoarea TRUE.

De fiecare data dupa executia instructiunilor dintre acolade se executa : expresie2.


Iata un exemplu practic de utilizare a unei instructiuni "for":
<?php
$suma = 0;
for ($n=1; $n<=3; $n++) {
$suma += $n;
echo "<br /> Suma intregilor de la 1 la $n este $suma.";
}
?>
Rezultatul afisat va fi:
Suma intregilor de la 1 la 1 este 1
Suma intregilor de la 1 la 2 este 3
Suma intregilor de la 1 la 3 este 6
n exemplu se calculeaza suma ntregilor cuprinsi ntre l si 3. Pentru aceasta, mai nti se
initializeaza variabila $suma la valoarea 0. Apoi se executa o instructiune for() care
incrementeaza n mod repetat valoarea variabilei $suma.
Pentru a vedea cum functioneaza mecanismul acestei instructiuni, sa examinam
componentele instructiunilor for().
Instructiunea "for" include trei expresii, care apar ntre paranteze; fiecare expresie este
separata de vecina sa printr-un caracter punct si virgula(;).

Prima expresie este expresia de initializare. Aceasta se executa atunci cnd PHP
ajunge la instructiunea for(). In exemplu, expresia de initializare atribuie valoarea
variabilei $n, ($n=1) variabila denumita "variabila de ciclare" sau "index".

A doua expresie este expresia de test. Aceasta este o expresie conditionala care indica
daca se executa sau nu corpul instructiunii, n general, face referire la variabila de
ciclare. In cadrul exemplului, expresia de test compara valoarea variabilei $n cu
valoarea 3 ($n <= 3).
Expresia de test este evaluata pentru prima data imediat dupa evaluarea expresiei de
initializare.

Cea de-a treia expresie este expresia pas. n general, aceasta modifica una sau mai
multe variabile la care se face referire n expresia test. n cadrul exemplului, expresia
pas incrementeaza valoarea variabilei $n ($n++).

Dupa care se trece la corpul instructiunii for(), aici, instructiunea $suma += $n si echo "Suma
intregilor de la 1 la $n este $suma."; reprezinta corpul instructiunii for.
Dupa executarea corpului functiei se verifica din nou expresia de test (conditie) dintre
paranteze, daca rezultatul este TRUE se trece mai departe la expresia "pas" (a treia din
paranteze) si mai departe la corpul functiei for(). Dupa aia din nou la expresia de test dintre
paranteze..., pana cand rezultatul este FALSE (in exemplu nostru, $n>3).
Instructiunea for() este utila pentru numarare si executarea n mod repetat a unor actiuni.

Scrierea instructiuni while

O instructiune while() sau do while are o singura conditie. Fara o expresie de initializare sau
o expresie pas; opereaza similar ca o instructiune "for()". n consecinta, urmatoarele doua
instructiuni sunt echivalente:
for ( ; $i<= 3; ) { $suma += $i; }
while ($i <= 3) { $suma ++ $i; }
Instructiunea while() executa un set de instructiuni atita timp cit valoarea expresiei "conditie"
este adevarata:
Forma generala a instructiuni while() este urmatoarea :
while(conditie) {
Instructiune(1);
Instructiune(2);
Instructiune(3);
.............
}
Setul de instructiuni Instructiune(1), Instructiune(2), etc... se vor executa atita timp cit
valoarea expresiei logice "conditie" are valoarea TRUE.
Sa studiem un exemplu practic:
<?php
$n = 0;
$suma = 0;
while ($n <= 3) {
$suma = $suma +$n;
$n++;
}
echo "Suma este $suma";
?>
In scriptul de mai sus avem la inceput (in afara lui "while") $n = 0 si $suma = 0, se verifica
conditia din paranteza a functiei while() ($n<=3), cum aceasta este TRUE (deoarece la
aceasta etapa $n = 0), se trece la executarea corpului functiei unde : $suma = $suma + $n si
$n++ (adica $n = $n + 1), astfel acum $n va fi egal cu 1, se verifica din nou conditia din
paranteze, care este TRUE ($n fiind acum egal cu 1), se executa iar corpul functiei..., si tot
asa se executa aceasta "bucla" pana cand la verificarea conditiei din paranteze rezultatul este
FALSE, in acest moment se incheie executia functiei while() si se trece mai departe la
urmatoarea functie (in cazul nostru: echo "Suma este $suma";, unde dupa executia functiei
while() $suma a devenit egala cu 6).
In browser va aparea urmatorul rezultat:
Suma este 6

Scrierea instructiuni do while


Diferenta dintre instructiunea while() si instructiunea do while este urmatoarea: daca la
instructiunea while() se verifica intai conditia si numai daca rezultatul este TRUE se trece la
executarea corpului functiei, in cazul functiei do while intai se executa corpul functiei si dupa
aceea se verifica conditia. De la do while corpul functiei va fi executat cel putin o singura
data, indiferent de rezultatul conditiei.
Forma generala a instructiuni do while este urmatoarea :

do {
Instructiune(1);
Instructiune(2);
Instructiune(3);
.............
} while(conditie);
Iata exemplul prezentat la functia while(), de data aceasta folosind functia do while :
<?php
$n = 0;
$suma = 0;
do {
$suma = $suma +$n;
$n++;
} while ($n <= 3);
echo "Suma este $suma";
?>
Rezultatul va fi acelasi: "Suma exte 6".
n general, este bine sa fiti prudent si sa folositi instructiunea while(), care evalueaza o
conditie de test nainte, de executarea corpului acesteia. Astfel, se evita executarea eronata a
corpului buclei.

Utilizare matrice - Array

nvatati modul de utilizare a matricelor pentru stocarea mai multor valori

nvatati cum sa accesati datele unei matrice (tablou)

Parcurgerea unui Array secvential

1. Utilizarea matricelor
Deseori este convenabila stocarea mai multor valori ntr-o variabila. O asemenea variabila se
numeste matrice (Array sau "tablou"), iar valorile individuale se numesc elementele
matricei. Aici, "matrice", "Array" sau "tablou" reprezinta acelasi lucru (in varianta engleza:
Array), fapt pentru care vom folosi orcare dintre aceste denumiri.
Fiecare element al unei matrici are doua elemente importante: cheia si valoarea elementului.
Matricele pot fi create folosind doua medode principale:

1 - utilizand direct instructiunile de atribuire

2 - folosind sintaxa array() despre care am vorbit in Lectia 2 despre tipul variabilelor.

1. Crearea de matrice folosind functia de atribuire

Pentru a crea o matrice, atribuiti unui element al matricei o valoare si o cheie. De exemplu,
urmatoarea instructiunea de atribuire:

$clasa[1] = "geometrie";

creeaza un tablou denumit "$clasa" si un element cu valoarea "geometrie" identificat prin


cheia "1".
Pentru a stoca n matrice o a doua valoare, puteti folosi urmatoarea instructiune de atribuire:

$clasa[2] = "algebra";

Pentru a obtine acces la un element al matricei, specificati numele matricei si valoarea cheii.
De exemplu, instructiunea de atribuire

$clasa_mate = $clasa[1];

Atribuie valoarea "geometrie" variabilei $clasa_mate.


Cheile folosite pentru identificarea elementelor unei matrice nu trebuie sa fie obligatoriu
numere consecutive; nici macar nu trebuie sa fie numere. De exemplu, iata instructiuni de
atribuire care creeaza o matrice ce stocheaza preferinte n materie de fructe:

$preferinte[Nelu] = "cirese";
$preferinte[Radu] = "mere";
$preferinte[Gabi] = "pere";

2. Crearea de matrice folosind sintaxa array()


Dincolo de utilizarea instructiunilor de atribuire, cealalta modalitate principala de creare a
unui tablou PHP consta n utilizarea functiei array(). Iata un exemplu simplu, care creeaza un
tablou avnd drept chei valori ntregi consecutive:

$limbaje = array("Perl", "PHP", "Python");

Deoarece valoarea cheilor nu a fost specificata, acestea vor fi automat trecute de program ca
numere intregi consecutive, incepand de la "0" (prima cheie va avea valoarea '0', a doua cheie
va avea valoarea '1', ...)
Aceasta instructiune creeaza o matrice care contine urmatoarele asocieri:

0 => Perl
1 => PHP
2 => Python

Daca doriti sa asociati unei valori o anumita cheie, puteti folosi operatorul =>, astfel:

$limbaje = array(10=>"Perl", "PHP", "Python");

Aceasta instructiune creeaza urmatoarea matrice:

10 => Perl
11 => PHP
12 => Python

Ca si n cazul utilizarii unei instructiuni de atribuire pentru crearea unei matrice valorile
cheilor nu trebuie sa fie consecutive si nici macar ntregi:

$limbaje = array("PHP"=>"Ridicat", "Python"=>"Mediu",


"Perl"=>"Redus");

Aceasta instructiune creeaza urmatoarea matrice:

PHP => Ridicat


Python => Mediu
Perl => Redus

2. Matrici multi-dimensionale
Este posibil ca un element al matricei sa fie de asemenea o matrice. In acest caz avem de-a
face cu o matrice multi-dimensionala.
Sa luam un exemplu practic :
<?php
$multiDimArray[firstLine] = array(1=>10, 2=>20, "a"=>"alpha");
$multiDimArray["nextLine"] = array(1=>20, 2=>40, "b"=>"beta");
echo "<br />".$multiDimArray["firstLine"][1];
echo "<br />".$multiDimArray["nextLine"][1];
echo "<br />".$multiDimArray["firstLine"][2];
echo "<br />".$multiDimArray["firstLine"]["a"];
echo "<br />".$multiDimArray["nextLine"]["b"];
?>
Sau putem scrie acelasi script si astfel (rezultatul e acelasi) :
<?php
$multiDimArray = array("firstLine"=>array(1=>10, 2=>20, "a"=>"alpha"),
"nextLine"=>array(1=>20, 2=>40, "b"=>"beta"));
echo "<br />".$multiDimArray["firstLine"][1];
echo "<br />".$multiDimArray["nextLine"][1];
echo "<br />".$multiDimArray["firstLine"][2];
echo "<br />".$multiDimArray["firstLine"]["a"];
echo "<br />".$multiDimArray["nextLine"]["b"];
?>
Rezultatul afisat va fi urmatorul :

10
20
20
alpha
beta
In exemplul de mai sus am declarat un array cu 2 linii si 3 coloane. Prima linie este
identificata de array-ul cu numele "fisrtLine", iar ce-a de-a doua linie este identificata de
"nextLine".
Observati de asemenea foloasirea in functia "echo" a operatorului de concatenare "."
impreuna cu "<br />" (care este un element din XHTML), pentru ca la afisarea in browser
fiecare rezultat al functiei "echo" sa fie trecut pe o linie noua. In caz contrar rezultatele ar fi
fost pe aceeasi linie : 10 20 20 alfa beta

3. Accesul la datele dintr-un array


Cnd ati stocat date ntr-un tablou, puteti obtine acces la valoarea unui element al tabloului
sau i puteti modifica valoarea prin intermediul cheii asociate elementului.
De exemplu, sa presupunem ca folositi urmatoarele instructiuni pentru a crea un tablou:

$x = array(1=>10, 2=>100, 3=>1000);

Puteti obtine acces la valoarea asociata cheii 2 prin intermediul unei instructiuni ca aceasta:

$y = 3*$x[2];

Similar, puteti modifica valoarea asociata cheii 3 prin intermediul unei instructiunu ca
aceasta:

$x[3] = 101;

4. Parcurgere Array numeric


Un Array ale carui chei sunt valori ntregi consecutive se numeste "Array numeric" (sau
secvential).
n general, valoarea cea mai mica a unei chei dintr-un tablou numeric este zero; totusi, puteti
crea array numeric incepand cu valoarea 1 sau orice alta valoare ntreaga ca valoare minima a
cheii.
n cazul n care cunoasteti valoarea minima a cheii unui tablou secvential, puteti parcurge
tabloul folosind o bucla for. Pentru aceasta, initializati variabila de bucla la valoarea cea mai
redusa a cheii. Folositi functia count() pentru a forma expresia de test (conditia) a buclei.
Functia count() returneaza numarul elementelor dintr-un tablou.
Iata un exemplu simplu
<?php
$limbaje = array(0=>"Perl", 1=>"PHP", 2 =>"Python");
$limita = count($limbaje);
for ($i = 0; $i < $limita; $i++) {

echo "<br />$i => $limbaje[$i]";


}
?>
Prima variabila $imbaje creeaza tabloul.
Cea de-a doua variabila $limita foloseste instructiunea count() pentru a obtine numarul
elementelor din tablou.
Instructiunea for foloseste variabila bucla $i pentru a parcurge iterativ (element cu element)
tabloul; corpul instructiunii include o instructiune echo care afiseaza cheia si valoarea
fiecarui element din tablou.
Datele de iesire vor fi astfel:
0 => Perl
1 => PHP
2 => Python
Sa ne concentram asupra problemei de a determina daca un tablou contine o anumita valoare.
Iata un exemplu:
<?php
$limbaje = array(0=>"Perl", 1=>"PHP", 2 =>"Python");
$cauta = PHP; // se cauta in tabloul $limbaje valoarea $cauta
$limita = count($limbaje);
for ($i = 0; $i < $limita; $i++) {
echo "<br />Determinarea unei identitati cu $limbaje[$i]";
if ($cauta == $limbaje[$i]) {
echo "<br />$cauta este un limbaj excelent.";
}
}
?>
Prima variabila $imbaje creeaza tabloul n care se va cauta.
Cea de-a doua instructiune atribuie valoarea "PHP" variabilei $cauta; (n exemplu, se cauta
n tablou valoarea stocata n variabila $cauta).
Dupa comentariu (care incepe cu //), urmatoarea instructiune obtine numarul elementelor din
tablou si stocheaza aceasta valoare n variabila $limita.
Instructiunea for functioneaza ca mai nainte; de data aceasta nsa, corpul sau contine alte
instructiuni si se executa o alta operatie. O instructiune echo afiseaza valoarea fiecarui
element al tabloului pe masura ce parcurgerea tabloului avanseaza. Instructiunea if testeaza
fiecare element si afiseaza un mesaj daca valoarea elementului este una si aceeasi cu valoarea
variabilei $cauta.
Iata rezultatul rularii exemplului:
Determinarea unei identitati cu Perl
Determinarea unei identitati cu PHP
PHP este un limbaj excelent.
Determinarea unei identitati cu Python
Incepand cu versiunea PHP 5.4 a fost introdus un nou mod de a defini variabile array,
folosind o sintaxa scurta.
Ex.:
$arr = [];

// array gol, in loc de array();

$arr = [1, 2, 3, 4];

// array numeric

$arr = ['eng'=>'courseweb.net', 'ro'=>'marplo.net', 'num'=>8];


array asociativ

//

- Array-ul creat cu aceasta sintaxa poate fi accesat, modificat si parcurs ca orice array.

Instructiunea break
Observati ca parcurgerea continua chiar si dupa gasirea valorii cautate.
Cnd se cauta ntr-un tablou, executia cautarii poate fi oprita dupa gasirea elementului dorit;
continuarea parcurgerii in Array nu face dect sa iroseasca resursele calculatorului, fara a
afecta rezultatele operatiei.
Pentru a opri executia unei parcurgeri, puteti folosi instructiunea break, care determina
ncheierea imediata a buclei care o contine.
Iata cum se poate revizui exemplul anterior, astfel nct sa includa o instructiune break:
<?php
$limbaje = array(0=>"Perl", 1=>"PHP", 2 =>"Python");
$cauta = PHP; // se cauta in tabloul $limbaje valoarea $cauta
$limita = count($limbaje);
for ($i = 0; $i < $limita; $i++) {
echo "<br />Determinarea unei identitati cu $limbaje[$i]";
if ($cauta == $limbaje[$i]) {
echo "<br />$cauta este un limbaj excelent.";
break;
}
}
?>
Acum, dupa stabilirea unei identitati, instructiunea break provoaca sistarea buclei for.
Iata datele de iesire rezultate, care acum omit examinarea inutila a elementului tabloului
asociat cu limbajul "Python":
Determinarea unei identitati cu Perl
Determinarea unei identitati cu PHP
PHP este un limbaj excelent.

Instructiunea continue
O instructiune corelata cu instructiunea break este continue.
Instructiunea continue opreste secventa curenta a buclei, determinnd evaluarea imediata a
expresiilor de incrementare si de test.
Ca un exemplu, sa presupunem ca doriti sa cautati n tabloul $limbaje pentru a determina
numarul limbajelor care au nume scurte, adica nume alcatuite din maximum 4 caractere. Iata
un exemplu care executa aceasta prelucrare a datelor:
<?php
$limbaje = array(0=>"Perl", 1=>"PHP", 2 =>"Python");
$scurt = 0;
$limita = count($limbaje);
for ($i = 0; $i < $limita; $i++) {

$n = strlen($limbaje[$i]);
echo "<br />$limbaje[$i] are $n caractere lungime";
if ($n > 4) continue;
$scurt++;
}
echo "<br />Au fost gasite $scurt limbaje cu nume scurte.";
?>
O instructiune de atribuire stabileste valoarea initiala a variabilei $scurt la zero, folosita
pentru a numara numele scurte gasite.
Instructiunea for se aseamana celor folosite anterior. Corpul acestei instructiuni difera,
desigur, de cele folosite anterior. Valoarea variabilei $n este stabilita ca fiind egala cu
numarul caracterelor care compun numele limbajului, folosind functia strlen(), care
calculeaza lungimea unui sir.
Daca instructiunea if stabileste ca elementul curent al tabloului face referire la un limbaj cu
nume lung, se executa instructiunea continue.
Instructiunea continue determina trecerea parcurgerii la urmatorul element din tablou, fara a
mai executa expresia "$scurt++"; daca nu au mai ramas elemente n tablou, bucla for si
ncheie executia.
La finalizarea parcurgerii, o instructiune echo afiseaza numarul numelor scurte de limbaje
gasite n tablou. Iata rezultatul:
Perl are 4 caractere lungime
PHP are 3 caractere lungime
Python are 6 caractere lungime
Au fost gasite 2 limbaje cu nume scurte.

Functii pentru Array


Aici gasiti cateva din cele mai utile functii PHP pentru Array (matrice).

1. array_change_key_case(array, case)
- Transforma cheile din primul parametru (array) in majuscule sau litere mici, dupa cum e
specificat la "case" (CASE_UPPER sau CASE_LOWER). Default e CASE_LOWER. Daca
"array" nu e o matrice, returneaza FALSE.
<?php
$aray = array("FirSt"=>1, "SecOnd"=>8);
print_r(array_change_key_case($aray, CASE_UPPER));
// Va afisa:
?>

Array ( [FIRST] => 1 [SECOND] => 8 )

2. array_chunk(array, nr)
- Imparte "array" intr-un numar de sub-matrici, precizat la "nr", indexate de la 0. Daca "array"
nu are elemente, returneaza NULL.

<?php
$aray = array('a', 'b', 'c', 'd', 'e');
print_r(array_chunk($aray, 2));
// Va afisa:
Array ( [0]=>Array ( [0]=>a [1]=>b ) [1]=>Array ( [0]=>c [1]=>d )
[2]=>Array ( [0]=>e ) )
?>
3. array_combine(array_k, array_v)
- Creaza un array folosind valorile din "array_k" pentru chei, iar elementele din "array_v"
pentru valorile lor. Numarul de elementele din cele 2 matrici trebuie sa fie egal, in caz contrar
returneaza FALSE.
<?php
$a = array('a', 'b', 'c');
$b = array('x', 'y', 'z');
$c = array_combine($a, $b);
print_r($c);
// Va afisa:
?>

Array ( [a] => x [b] => y [c] => z )

4. array_count_values(array)
- Returneaza o matrice cu numarul de repetari a fiecarui 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 )

5. array_diff(array1, array2)
- Returneaza o matrice cu elementele din "array1" care nu se gasesc in "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 )

6. array_flip(array)
- Schimba valorile si cheile intre ele. Din valorile care se repeta o pastreaza 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 )

7. array_intersect(array1, array2, ...)


- Returneaza o matrice cu toate valorile din "array1" care se gasesc in toati ceilalti "array"
dati ca parametri.
<?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 )

8. array_key_exists(cheie, array)
- Returneaza TRUE daca "cheie" este o cheie (index) in matricea "array", in caz contrar
returneaza FALSE.
<?php
$aray = array("a"=>1, "b"=>'a', "mp"=>'d');
if (array_key_exists('mp', $aray)) {
echo 'Cheia exista';
}
?>
9. array_keys(array, val)
- Returneaza o matrice cu toate cheile din "array". Parametrul "val" e optional, daca 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 )

10. array_map("functie", array)


- Aplica functia pentru fiecare element din "array"
<?php
function f_test($val) {
return $val+2;
}
$aray = array("a"=>1, "b"=>'c', 2);
$aray = array_map("f_test", $aray);
print_r($aray);
// Return:
?>

Array ( [a] => 3 [b] => 2 [0] => 4 )

11. array_merge($array1, $array2, ...)


- Uneste mai multe array in unul singur. Daca au cheie de tip sir identice, va fi pastrata
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 )
?>
12. array_pop(array)
- Elimina ultimul element din "array", care va fi transferat ca valoarea returnata de
"array_pop()". Daca parametru nu e matrice sau e gol, returneaza NULL.
<?php
$aray = array("a"=>1, 3, 4);
$re = array_pop($aray);
// $aray va avea acum:
echo $re;
?>

array("a"=>1, 3);

// 4

13. array_product(array)

- Returneaza produsul elementelor din "array"


<?php
$aray = array(1, 2, 3, 4);
echo array_product($aray);
?>

// 24

14. array_rand(aray, nr)


- Preia aleator un "nr" de chei din "array", respectand ordinea lor. Daca "nr" e 1, va returna o
cheie aleasa aleator. Altfel, returneaza o matrice cu acele chei preluate aleator.
<?php
$aray = array('x'=>'tutorial', 'y'=>8, 'z'=>'php', 'curs');
$ar_keys = array_rand($aray, 3);
// Preia aleator 3 chei, si le aranjaza succesiv in $ar_keys
// Parcurge matricea cu cheile alese si afiseaza valoare corespunzatoare fiecareia
for($i=0; $i<count($ar_keys); $i++) {
$key = $ar_keys[$i];
echo $aray[$key]. ' - ';
}
// Return:
?>

tutorial - 8 - php -

15. array_reverse(array)
- Returneaza "array" cu ordinea elementelor inversata.
<?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 )
?>
16. array_search("val", array)
- Returneaza cheia din "array" care are valoarea "val", sau FALSE daca nu exista. Cautarea e
"case-sensitive"
<?php
$aray = array(1, 2, 3, 'a', 'b'=>'c');
$re = array_search('c', $aray);
echo $re;
?>

17. array_shift(array)

- Elimina primul element din "array", care va fi transferat ca valoarea returnata de


"array_shift()". Cheile vor fi renumerotate de la 0. Daca parametru nu e matrice sau e gol,
returneaza NULL.
<?php
$aray = array("a"=>1, 3, 4);
$re = array_shift($aray);
// $aray va avea acum:
echo $re;
?>

array(3, 4);

// 1

18. array_slice(array, start, nr)


- Returneaza un "nr" din elementele lui "array', incepand de la elementul numarul "start"
(primul e 0), cate elemente arata "nr". Daca "nr" nu e specificat, va fi considerat pana la
ultimul.
<?php
$aray = array("a"=>1, 3, 4, 5, 6, 7);
$re = array_slice($aray, 2, 3);
// $re va avea:
array(4, 5, 6)
$re = array_slice($aray, 3);
// $re va avea:
array(5, 6, 7
?>
19. array_sum(array)
- Returneaza suma elementelor din "array"
<?php
$aray = array(1, 2, 3, 4);
echo array_sum($aray);
?>

// 10

20. array_unique(array)
- Returneaza matricea "array" fara valorile duplicate, acestea fiind luate o singura data.
<?php
$aray = array(1, 2, 1, 4, 3, 4);
$aray = array_unique($aray);
?>

// $aray va avea:

array(1, 2, 4, 3)

21. array_values(array)
- Returneaza o matrice cu toate valorile din "array", ordonate numeric de la 0.
<?php
$aray = array("a"=>1, "b"=>'c', 'd', "mp"=>'d');
$re = array_values($aray);

print_r($re);
// Va afisa:
?>

Array ( [0] => 1 [1] => c [2] => d [3] => d )

22. arsort(array)
- Sorteaza un "array" cu valorile ordonate in ordine inversa alfabetic, pastrand corelatia dintre
chei si valori. In caz de succes returneaza TRUE, altfel, FALSE.
<?php
$aray = array('c', "b"=>'xy', 'pm', "mp"=>'de');
arsort($aray);
// $aray va deveni:
?>

array("b"=>'xy', 'pm', "mp"=>'de', 'c')

23. asort(array)
- Sorteaza un "array" cu valorile ordonate in ordine alfabetica, pastrand corelatia dintre chei si
valori. In caz de succes returneaza TRUE, altfel, FALSE.
<?php
$aray = array('c', "b"=>'xy', 'pm', "mp"=>'de');
arsort($aray);
// $aray va deveni:
?>

array('c', "mp"=>'de', 'pm', "b"=>'xy')

24. count(array)
- Returneaza numarul de elemente din "array"
<?php
$aray = array('c', "b"=>'xy', 'pm', "mp"=>'de');
echo count($aray);
// 4
?>
25. current(array);
- Returneaza valoarea elementului curent din "array", daca nu are elemente returneaza
FALSE. Fiecare matrice are un pointer intern, care prima data e setat la primul element.
<?php
$aray = array('php', "free"=>'tutorial', 'mysql', "mp"=>'curs');
echo current($aray);
// php
?>
26. end(array);

- Muta pointerul din "array" la ultimul element si returneaza valoarea lui, daca nu are
elemente returneaza FALSE.
<?php
$aray = array('php', "free"=>'tutorial', 'mysql', "mp"=>'curs');
echo end($aray);
// curs
?>
27. implode("separator", array);
- Transforma "array" in sir (string), adaugand valorile intr-un sir, separate de ceea ce e
specificat la "separator".
<?php
$aray = array('www', 'marplo', 'net');
$sir = implode('.', $aray);
echo $sir;
?>

// www.marplo.net

28. in_array("val", array)


- Verifica daca o matrice contine o anumita valoare. Returneaza TRUE daca vreunul din
elementele din "array" are valoarea "val", in caz contrar FALSE.
<?php
$aray = array('php', "free"=>'tutorial', 'mysql', "mp"=>'curs');
if (in_array('tutorial', $aray)) {
// Se executa ce se vrea
}
?>
29. key(array)
- Returneaza cheia elementului curent la care se afla pointerul
<?php
$aray = array('php', "free"=>'tutorial', 'mysql', "mp"=>'curs');
end($aray);
// Muta pointerul la ultimul element
echo key($aray);
// mp
?>
30. krsort(array)
- Sorteaza un "array" dupa chei ordonate in ordine inversa alfabetic, pastrand corelatia dintre
chei si valori. In caz de succes returneaza 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')

31. ksort(array)
- Sorteaza un "array" dupa chei ordonate in ordine alfabetica, pastrand corelatia dintre chei si
valori. In caz de succes returneaza 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')

32. natcasesort(array)
- Sorteaza un "array" in ordine alfabetica a valorilor, case-insensitive, folosind ordinea
naturala a numerelor. In caz de succes returneaza TRUE, altfel, FALSE.
<?php
$aray = array('li'=>'Php', "free"=>'tutorial', 'MySQL', "mp"=>'curs');
natcasesort($aray);
// $aray va deveni:
?>

array("mp"=>'curs', 'MySQL', 'li'=>'Php', "free"=>'tutorial')

33. next(array);
- Avanseaza pointerul din "array" inainte cu un element si returneaza valoarea, daca nu are
elemente returneaza FALSE.
<?php
$aray = array('php', "free"=>'tutorial', 'mysql', "mp"=>'curs');
echo next($aray);
// tutorial
?>
34. prev(array);
- Muta pointerul din "array" inapoi cu un element si returneaza valoarea, daca nu are
elemente returneaza FALSE.
<?php
$aray = array('php', "free"=>'tutorial', 'mysql', "mp"=>'curs');
end($aray);
// Duce pointerul la ultimul element
echo prev($aray);
// mysql
?>
35. reset(array);

- Readuce pointerul din "array" la primul element si returneaza valoarea lui, daca nu are
elemente returneaza FALSE.
<?php
$aray = array('php', "free"=>'tutorial', 'mysql', "mp"=>'curs');
next($aray);
// Avanseaza pointerul cu un element
echo reset($aray);
// php
?>
36. rsort(array)
- Sorteaza un "array" in ordine inversa alfabetic a valorilor (literele mici inaintea celor mari),
stergand cheile initiale, devenind un Array asociativ cu chei de la 0. In caz de succes
returneaza TRUE, altfel, FALSE.
<?php
$aray = array('li'=>'Php', "free"=>'tutoriale', 'MySQL', "mp"=>'curs');
rsort($aray);
// $aray va deveni:
?>

array('tutoriale', 'curs', 'Php', 'MySQL')

37. sort(array)
- Sorteaza un "array" in ordine alfabetica a valorilor (literele mari inaintea celor mici),
stergand cheile initiale, devenind un Array asociativ cu chei de la 0. In caz de succes
returneaza TRUE, altfel, FALSE.
<?php
$aray = array('li'=>'Php', "free"=>'tutoriale', 'MySQL', "mp"=>'curs');
rsort($aray);
// $aray va deveni:
?>

array('MySQL', 'Php', 'curs', 'tutoriale')

38. shuffle(array)
- Amesteca aleator elementele din "array". Sterge cheile initiale, devenind un Array asociativ
cu chei de la 0. In caz de succes returneaza TRUE, altfel, FALSE.
<?php
$aray = array('li'=>'Php', "free"=>'tutoriale', 'MySQL', "mp"=>'curs');
shuffle($aray);
// $aray va avea elementele amestecate aleator
?>

Utilizare Array (matrice) - (2)


Part. 2 Creare tabel HTML cu date din Array

Parcurgerea unui Array asociativ

Lucrul cu functii lista

Sortarea matricelor

Transformarea matricelor in siruri si a sirurilor in matrice (array)

1. Parcurgerea unui Array asociativ


In lectia precedenta a fost prezentata modalitatea de citire a elementelor din matrice
secventiala - adica matrice ale caror chei sunt numere intregi consecutive.
Tablourile de date pot avea si elemente ale caror chei pot fi numere aleatoare sau chiar
cuvinte, aceste matrici se numesc "matrici asociative" (non-secventiale).
Pentru citirea datelor dintr-un Array asociativ se poate folosi instructiunea foreach care
simplifica parcurgerile de acest gen.
Instructiunea foreach are urmatoarea forma generala:

foreach (tablou as $cheie => $valoare) {corp}

- Instructiunea parcurge n mod iterativ (element cu element) tabloul denumit "tablou",


stabilind valori adecvate pentru valorile variabilelor "$cheie" si "$valoare" aferente fiecarui
element al tabloului.
Iata un exemplu simplu:
<?php
$limbaje = array(10=>"Perl", 20=>"PHP", 21=>"Python");
foreach ($limbaje as $index => $limbaj) { // parcurge iterativ tabloul
echo "<br />$index =>$limbaj";
}
?>
- Remarcati ca instructiunea echo face pur si simplu referire la valorile variabilelor $index si
$limbaj, carora li se atribuie n mod automat valorile cheii, respectiv elementului curent.
10 =>Perl
20 =>PHP
21 =>Python
Cateodata este nevoie sa parcurgem datele unui tablou multi-dimensional.
Pentru a parcurge matricea, folositi instructiuni foreach imbricate:
Pentru a invata modul de parcurgere a unui Array multi-dimensional, sa studiem urmatorul
exemplu:
<?php
$date = array("PHP"=>array("simplu", "popular"), "Python"=>array("simplu", "nepopular"),
"Pearl"=>array("dificil", "popular"));
foreach ($date as $limbaj => $valoare) {
foreach($valoare as $cheie =>$caracteristica) {
echo "<br />$limbaj : $caracteristica";

}
}
?>
- Instructiunea foreach exterioara obtine cate un Array asociat cu fiecare limbaj; a doua
instructiune foreach, interioara, parcurge fiecare Array obtinut de prima instructiune foreach.
Iata rezultatul:
PHP : simplu
PHP : popular
Python : simplu
Python : nepopular
Pearl : dificil
Pearl : popular

2. Lucrul cu functii lista


n afara de modalitatile de parcurgere a matricelor, PHP ofera numeroase functii care va
permit traversarea tablourilor, deplasndu-va nainte sau napoi prin elementele acestuia.
Prima dintre aceste functii este current(), care returneaza valoarea curenta a tabloului.
Functia current() foloseste un pointer intern de tablou, pe care PHP l creeaza pentru fiecare
tablou. (Cnd creati un tablou, pointerul intern de tablou este configurat astfel nct sa faca
referire la primul element al tabloului).
Functiile next() si prev() modifica pointerul intern al tabloului si se pot folosi alaturi de
functia current() pentru a parcurge un tablou.
Functia next(), asa cum i arata si numele, modifica pointerul intern al tabloului astfel nct
acesta sa faca referire la urmatorul element, n timp ce functia prev() modifica pointerul
intern al tabloului astfel nct acesta sa faca referire la elementul anterior.
Iata un exemplu care prezinta modul de operare al functiilor mentionate:
<?php
$limbaje = array(10=>"Perl", 20=>"PHP", 21=>"Python");
$curent = current($limbaje);
echo "<br />functia current() a returnat $curent";
$urmator = next($limbaje);
echo "<br />functia next() a returnat $urmator";
$urmator = next($limbaje);
echo "<br />functia next() a returnat $urmator";
$anterior = prev($limbaje);
echo "<br />functia prev() a returnat $anterior";
?>
Iata datele de iesire ale exemplului:
functia current() a returnat Perl
functia next() a returnat PHP
functia next() a returnat Python
functia prev() a returnat PHP
Observati modul n care sunt utilizate functiile prev() si next() pentru deplasarea napoi,
respectiv nainte, n interiorul tabloului.

3. Functia key()

Functia key() este corelata cu functia current(). Daca functia current() returneaza valoarea
asociata elementului curent, functia key() returneaza cheia asociata elementului curent.
Iata un exemplu care ilustreaza modul de operare al acestei functii:
<?php
$limbaje = array(10=>"Perl", 20=>"PHP", 21=>"Python");
$curent = current($limbaje);
$cheie = key($limbaje);
echo "<br />functia current() a returnat $curent";
echo "<br />functia key() a returnat $cheie";
?>
Iata datele de iesire ale exemplului:
functia key() a returnat 10

4. Functia each()
O alta functie utila n parcurgerea tablourilor este each().
Functia each() returneaza perechea "cheie-valoare" care se afla la pozitia curenta din tabloul
specificat. Perechea "cheie-valoare" este returnata sub forma unui Array asociativ cu patru
elemente, dupa cum urmeaza:
Cheie

Valoare

- Componenta cheie a perechii cheie-valoare curenta

- Componenta valoare a perechii cheie-valoare curenta

key - Componenta cheie a perechii cheie-valoare curenta


value - Componenta valoare a perechii cheie-valoare curenta
- Observati ca puteti folosi valoarea cheie "0" sau "key" pentru a obtine accesul la
componenta cheie a perechii "cheie-valoare"; similar, puteti folosi valoarea cheie "1" sau
"value" pentru a obtine accesul la componenta valoare a perechii "cheie-valoare".
Pentru a intelege mai bine cum se foloseste functia each(), studiati exemplul urmator:
<?php
$limbaje = array(10=>"Perl", 20=>"PHP", 21=>"Python");
$fiecare = each($limbaje);
$zero = $fiecare[0];
$unu = $fiecare[1];
$cheie = $fiecare['key];
$valoare = $fiecare['value];
echo "<br />zero=$zero";
echo "<br />unu=$unu";
echo "<br />cheie=$cheie";
echo "<br />valoare=$valoare";
?>
Iata datele de iesire ale exemplului:
zero=10
unu=Perl

cheie=10
valoare=Perl

5. Functia list()
O alta functie utila n lucrul cu tablouri este functia list(), aceasta va permite sa atribuiti
valori la numeroase variabile n cadrul unei instructiuni.
Functia list() este deseori folosita cu functia each(), deoarece functia list() faciliteaza accesul
separat la cheia si la valoarea returnate de functia each().
Forma generala de utilizare a functiei list() este urmatoarea:
list($var1, $var2, .., $varn) = valoare_tablou;
Fiecare dintre variabilele specificate, de la $var1 la $varn, primeste o valoare din tabloul
"valoare_tablou".
ntr-un fel, functia list() este opusa functiei array(), deoarece functia list() mparte un tablou
ntr-o serie de valori scalare, n timp ce functia array() construieste un tablou dintr-o serie de
valori scalare.
Iata un exemplu care ilustreaza modul de utilizare a functiei list():
<?php
$limbaje = array(10=>"Perl", 20=>"PHP", 21=>"Python");
list($cheie, $valoare) = each($limbaje);
echo "<br />cheie = $cheie, valoare = $valoare";
$urmator = next($limbaje);
echo "<br />urmator = $urmator";
?>
Iata datele de iesire ale exemplului:
cheie = 10, valoare = Perl
urmator = Python
PHP contine peste 40 de functii pentru lucrul cu tablourile. De exemplu, functia
array_search() faciliteaza cautarea ntr-un tablou.
Pentru informatii despre aceasta functie si despre alte functii utilizate n lucrul cu tablouri,
vizitati site-ul www.php.net.

6. Sortarea tablourilor
Sortarea reprezinta o alta operatie frecvent aplicata tablourilor. PHP furnizeaza o suita de
functii care faciliteaza sortarea unui tablou.
De exemplu, un tablou poate fi creat dupa cum urmeaza:
$limbaje = array(10=>"Perl", 20=>"PHP", 21=>"Python");
Apoi, doriti sa sortati tabloul n ordine alfabetica, in functie de numele limbajului de
programare.
Pentru aceasta, pur si simplu invocati functia sort():
sort($limbaje);
Dupa sortare, continutul tabloului apare in ordinea cum se poate vedea mai jos:

0 => PHP

1 => Perl

2 => Python

Observati ca secventa de sortare sau secventa de aranjare (cum este numita uneori) este
sensibila la diferenta ntre majuscule si minuscule. Deoarece litera "H" mare este sortata
inaintea literei "e" mic, PHP apare nainte de Python n datele de iesire sortate.
Iata un exemplu practic de folosire a functiei sort() :
<?php
$arr = array(0=>'Popescu', 1=>'Avram', 5=>'Cristian',3=>'Dan');
sort($arr);
foreach($arr as $key=>$nume) {
echo "<br />Cheie=$key Valoare=$nume";
}
?>
Rezultatul afisat este urmatorul :
Cheie=0 Valoare=Avram
Cheie=1 Valoare=Cristian
Cheie=2 Valoare=Dan
Cheie=3 Valoare=Popescu
- Se observa ca instructiunea sort($arr) sorteaza matricea $arr dupa campul valoare (oridine
alfabetica).
- Observam de asemenea ca valorile campului cheie a fost alterata, fara sa conteze valoarea
sau ordinea cheilor.
Daca dorim sa sortam in ordine inversa alfabetic, folosim functia rsort()
Iata acelasi exemplu, da cu functia rsort()
<?php
$arr = array(0=>'Popescu', 1=>'Avram', 5=>'Cristian',3=>'Dan');
rsort($arr);
foreach($arr as $key=>$nume) {
echo "<br />Cheie=$key Valoare=$nume";
}
?>
Acum rezultatul afisat este urmatorul :
Cheie=0 Valoare=Popescu
Cheie=1 Valoare=Dan
Cheie=2 Valoare=Cristian
Cheie=3 Valoare=Avram
- Se observa ca si in acest caz au fost alterate valorile initiale ale cheilor.
Pentru a sorta matricea "$arr" pastrand corelarea initiala dintre valori si cheile
corespunzatoare se folosesc functiile asort(), respectiv arsort(). Incercati-le singuri.
In afara de acestea mai sunt si alte functii utile pentru sortarea tablourilor.
Iata un tabel care prezinta functiile folositoare pentru sortarea unui tablou, impreuna cu
rezultatul aplicarii fiecarei functii.
Vom lua ca model pentru exemplificare urmatoarea matrice:

$limbaje = array(10=>"Perl", 20=>"PHP", 21=>"Python");

Functie
sort()

Operatia efectuata
- Sortarea unui tablou n functie de valoare, in ordine alfabetica, fara sa se tina
cont de cheile initiale

- Sortarea unui tablou n functie de valoare, in ordine alfabetica, pastrand


asort()
corelarea initiala dintre valori si cheile corespunzatoare
rsort

- Sortarea unui tablou n functie de valoare, in ordine invers alfabetica, fara sa


se tina cont de cheile initiale

Rezultat
0 => PHP
1 => Perl
2 => Python
20 => PHP
10 => Perl
21 => Python
0 => Python
1 => Perl
2 => PHP

21 => Python
- Sortarea unui tablou n functie de valoare, in ordine invers alfabetica, pastrand
arsort
10 => Perl
corelarea initiala dintre valori si cheile corespunzatoare
20 => PHP
ksort - Sortarea unui tablou n functie de cheie, in ordine ascendenta

10 => Perl
20 => PHP
21 => Python

krsort - Sortarea unui tablou n functie de cheie, in ordine descendenta

21 => Python
20 => PHP
10 => Perl

O modalitate de a executa o cautare fara sensibilitate la diferenta ntre majuscule si minuscule


ar fi utilizarea functiei natcasesort(), care sorteaza un tablou folosind o ordine care nu este
sensibila la diferenta ntre majuscule si minuscule.
O alta modalitate consta n a utiliza functia usort() sau una dintre functiile sale conexe, n
speta uksort() si uasort().
Functia usort() sorteaza valorile din tablou si returneaza un tablou secvential; functia
uksort() sorteaza cheile tabloului, iar functia uasort() sorteaza un tablou asociativ.
De exemplu, urmatoarele instructiuni creeaza un tablou si l sorteaza ntr-o maniera
insensibila la diferenta ntre majuscule si minuscule:

$limbaje = array("Perl", "PHP", "Python");


usort($limbaje, "strcmpcase");
foreach($limbaje as $key=>$nume) {
echo "<br />$key => $nume";
}

Functia strcmpcase() este o functie din biblioteca PHP care compara doua siruri fara a tine
cont de majuscule sau minuscule. Functia returneaza o valoare negativa daca primul sir este
mai mic dect al doilea, zero daca sirurile sunt identice, respectiv o valoare pozitiva daca
primul sir este mai mare dect al doilea.
Rezultatul va fi :

0 => Perl
1 => PHP
2 => Python

Pentru mai multe informatii despre functia usort() si despre functiile sale conexe, examinati
site-ul www.php.net

Transformarea sirurilor in matrice si invers


PHP pune la dispozitia utilizatorilor functii pentru conversia intre siruri si matrice. Acestea
pot fi utile in situatii in care valoarea matricelor trebuie memorate in baza de date.
Pentru a transforma un sir intr-o matrice folosim functia explode(). Sintaxa aceste functii
este:

$matrice = explode(" ", $sir);

- In loc de spatiul dintre (" "), ca indiciu de separare, poate fi scris orice caracter; dupa cum
se doreste impartirea sirului.
Iata un exemplu:
<?php
$sir = "Popescu Avram Cristian Dan";
$matrice = explode(" ",$sir);
foreach($matrice as $key=>$nume) {
echo "<br />Cheie = $key Valoare = $nume";
}
?>
Acest cod va produce urmatorul rezultat:
Cheie = 0 Valoare = Popescu
Cheie = 1 Valoare = Avram
Cheie = 2 Valoare = Cristian
Cheie = 3 Valoare = Dan
Pentru a transforma o matrice intr-un sir, folosim functia implode(). Sintaxa aceste functii
este:

$sir = implode(" ", $matrice);

- In loc de spatiul dintre (" "), ca semn de separare a elementelor in sir, poate fi scris orice
caracter; dupa cum se doreste crearea sirului.
In continuare, pentru exemplificare, folosind exemplul de mai sus, sortam matricea
"$matrice" alfabetic si apoi transferam matricea intr-un alt sir , de aceasta data sortat
(Observati folosirea caracterelor ( \" ) in expresia echo, pentru ca la iesire rezultatul sa
contina ghilimele):
<?php
$matrice = array("Popescu", "Avram", "Cristian", "Dan");
sort($matrice);
$sir = implode(" - ",$matrice);
echo "<br />Sirul rezultat : \"$sir\"";
?>
Acest cod va produce urmatorul rezultat:
Sirul rezultat : "Avram - Cristian - Dan - Popescu"
Creare tabel HTML din Array

Acest tutorial explica cum pot fi create corect tabele HTML cu date stocate intr-un Array sau
care in general sunt parcurse cu instructiuni WHILE, FOR sau FOREACH.
O problema des intalnita in acest caz este afisearea incorecta a randurilor, coloanelor tabelului
sau chiar generarea de mai multe tabele in loc de unul singur cu mai multe randuri.
De cele mai multe ori cauza e ca inceputul (si inchiderea) tabelului HTML sunt in bucla
WHILE sau FOR, iar cand se repeta executia din bucla se creaza iar codul pt. inceputul
tabelului.
Solutia: Scrierea codului de inceput (si sfarsit) de tabel in afara buclei FOR sau WHILE.
In urmatoarele exemple este explicat modul general de creare a unui tabel HTML cu mai
multe coloane, folosind WHILE, FOR si FOREACH.
1. Crearea tabelului cu datele dintr-o matrice secventiala simpla

- Explicatiile necesare sunt in documentatia din cod (Observati cum se lucreaza cu un indice
pentru generarea de randuri noi in functie de cate coloane trebuie pe fiecare rand.).
Exemplu cu WHILE
<?php
// Matricea cu datele ce vor fi afisate in tabel
$aray = array('val1', 'val2', 'val3', '... val_n');
// Afla numarul de elemente din matrice
$nr_elm = count($aray);
// Variabila in care va fi stocat codul HTML cu tabelul
$tabel_html = '';
// Aici se precizeaza numarul de coloane care sa fie pe fiecare rand
$nr_col = 2;
// Daca matricea are cel putin un element
if ($nr_elm > 0) {
// Se creaza codul pt. inceputul tabelului HTML si al primului rand
$tabel_html = '<table border="1"><tr>';
// Se parcurge matricea cu WHILE
$i = 0;
// Indice pt. rand nou si pt. primul element din Array
while($i < $nr_elm) {
// Se adauga in tabel coloanele
$tabel_html .= '<td>' .$aray[$i]. '</td>';
$i++;

// Se incrementeaza valoarea indicelui

// Daca restul impartirii lui $i la numarul de coloane stabilit e 0


// Adauga un nou rand in tabel
if (($i % $nr_col)==0) { $tabel_html .= '</tr><tr>'; }

}
// Se adauga (dupa terminarea lui WHILE) inchiderea randului si tabelului HTML
$tabel_html .= '</tr></table>';
// Se elimina posibil rand gol adaugat, pt. care nu au mai fost elemente pt.
coloane (<tr></tr>)
$tabel_html = str_replace('<tr></tr>', '', $tabel_html);
}
// Se afiseaza tabelul obtinut
echo $tabel_html;
?>
Exemplu cu FOR
<?php
// Matricea cu datele ce vor fi afisate in tabel
$aray = array('val1', 'val2', 'val3', '... val_n');
// Afla numarul de elemente din matrice
$nr_elm = count($aray);
// Variabila in care va fi stocat codul HTML cu tabelul
$tabel_html = '';
// Aici se precizeaza numarul de coloane care sa fie pe fiecare rand
$nr_col = 2;
// Daca matricea are cel putin un element
if ($nr_elm > 0) {
// Se creaza codul pt. inceputul tabelului HTML si al primului rand
$tabel_html = '<table border="1"><tr>';
// Se parcurge matricea cu FOR
for($i=0; $i<$nr_elm; $i++) {
// Se adauga in tabel coloanele
$tabel_html .= '<td>' .$aray[$i]. '</td>';
// Daca restul impartirii lui ($i+1) la numarul de coloane stabilit e 0
// Adauga un nou rand in tabel
if ((($i+1) % $nr_col)==0) { $tabel_html .= '</tr><tr>'; }
}
// Se adauga (dupa terminarea lui WHILE) inchiderea randului si tabelului HTML
$tabel_html .= '</tr></table>';
// Se elimina posibil rand gol adaugat, pt. care nu au mai fost elemente pt.

coloane (<tr></tr>)
$tabel_html = str_replace('<tr></tr>', '', $tabel_html);
}
// Se afiseaza tabelul obtinut
echo $tabel_html;
?>
- La fel se procedeaza cu WHILE si FOR pentru date ce sunt preluate din alta
sursa (nu doar Array), cum ar fi randuri dintr-un fisier.
Exemplu cu FOREACH

- FOREACH e util pentru parcurgerea matricelor non-secventiale (cheile nu sunt numere


consecutive).
<?php
// Matricea cu datele ce vor fi afisate in tabel
$aray = array('a'=>'val1', 'b'=>'val2', 3=>'val3', 'z'=>'... val_n');
// Variabila in care va fi stocat codul HTML cu tabelul
$tabel_html = '';
// Aici se precizeaza numarul de coloane care sa fie pe fiecare rand
$nr_col = 2;
// Daca matricea are cel putin un element
if (count($aray) > 0) {
// Se creaza codul pt. inceputul tabelului HTML si al primului rand
$tabel_html = '<table border="1"><tr>';
// Se parcurge matricea cu FOREACH
$i = 0;
// Indice pt. rand nou
foreach($aray as $key => $val) {
// Se adauga in tabel coloanele
$tabel_html .= '<td>' .$val. '</td>';
$i++;

// Se incrementeaza valoarea indicelui

// Daca restul impartirii lui $i la numarul de coloane stabilit e 0


// Adauga un nou rand in tabel
if (($i % $nr_col)==0) { $tabel_html .= '</tr><tr>'; }
}
// Se adauga (dupa terminarea lui FOREACH) inchiderea randului si tabelului
HTML
$tabel_html .= '</tr></table>';

// Se elimina posibil rand gol adaugat, pt. care nu au mai fost elemente pt.
coloane (<tr></tr>)
$tabel_html = str_replace('<tr></tr>', '', $tabel_html);
}
// Se afiseaza tabelul obtinut
echo $tabel_html;
?>
- Toate aceste exemple vor afisa urmatorul tabel:
val1

val2

val3

... val_n

2. Crearea tabelului HTML cu date dintr-o baza de date

- In general, cel mai des folosit caz este acela cand sunt selectate mai multe randuri dintr-un
tabel MySQL si se doreste afisarea lor intr-un tabel HTML.
Mai jos este un exemplu general simplu pentru afisarea datelor din MySQL sub forma de
tabel.
Pentru lucrul cu MySQL vedeti lectiile mai avansate, de la nr. 22-27, apoi reveniti la acest
tutorial.
<?php
// Variabila in care va fi stocat codul pt. tabelul HTML
$tabel_html = '';
// Se face conectarea la MySQL si selectarea bazei de date
// Selectarea randurilor din tabelul MySQL
$cerereSQL = "SELECT * FROM `nume_tabel` WHERE `coloana`='$val'";
$rezultat = mysql_query($cerereSQL);
// Daca sunt returnate randuri de tabel
if(mysql_num_rows($rezultat) > 0) {
// Se creaza codul pt. inceputul tabelului HTML
$tabel_html = '<table border="1">';
// Se scrie in bucla WHILE codul HTML pt. adaugarea DOAR a randurilor ce vor fi
in tabel
while($rand = mysql_fetch_array($rezultat)) {
$tabel_html .= '<tr><td>' .$rand['col1']. '</td><td>' .$rand['col2'].
'</td></tr>';
}
// Se adauga (dupa terminarea lui WHILE) inchiderea tabelului HTML

$tabel_html .= '</table>';
}
// Se afiseaza codul tabelului HTML obtinut
echo $tabel_html;
?>

Utilizarea functiilor

nvatati sa apelati functiile

nvatati sa atribuiti unei variabile numele unei functii

nvatati sa ascundeti mesajele de eroare generate n timpul executiei unei functii

nvatati sa folositi date si scripturi aflate n fisierele externe

nvatati sa definiti propria functie

Am folosit pana acum de mai multe ori termenul de functii. In cadrul acestei lectii veti nvata
mai multe despre utilizarea functiilor si despre modul de definire a propriilor dumneavoastra
functii.
Functiile reprezinta secvente de cod care sunt apelate foarte frecvent in cadrul codului PHP.
Folosirea intensiva a functiilor contribuie la o structurare mai buna a codului; ideea este ca o
problema complexa sa o divizam in mai multe sub-probleme, fiecare astfel de subproblema sa
fie executata in cadrul unei functii.
Pe de alta parte folosirea frecventa a functiilor duce la micsorarea cantitatii de cod scris; prin
urmare vom avea un cod care se executa mai eficient.

1. Utilizarea unei functii


Pentru a folosi o functie, scrieti numele functiei, urmat de o pereche de paranteze. De
exemplu, functia rand(), care genereaza un numar ntreg aleator, poate fi apelata astfel:

rand()

Majoritatea functiilor preiau argumente, reprezentnd valori, de intrare care influenteaza


operarea si rezultatul functiei.
Pentru a specifica argumente, acestea se insereaza ntre paranteze; daca specificati mai mult
de un argument, fiecare argument trebuie separat de vecinul sau printr-o virgula.
Argumentul unei functii poate fi o valoare literala, o variabila sau o expresie.
Unele functii PHP au argumente optionale, care pot fi specificate sau omise, n conformitate
cu intentiile dumneavoastra. De exemplu, functia rand() are doua argumente optionale.
Primul argument al functiei indica valoarea ntreaga aleatoare cea mai mica pe care o va
returna functia; al doilea argument indica valoarea cea mai mare. Daca omiteti ambele
argumente, functia returneaza o valoare cuprinsa ntre 0 si cel mai mare rezultat posibil.
Puteti folosi valoarea returnata de o functie ntr-o expresie, astfel valoarea va fi accesibila n
mod repetat fara a se invoca functia de mai multe ori

Iata un exemplu in care functia rand() returneaza o valoare aleatoare cuprinsa intre 1 si 500,
atribuind valoarea unnei variabile "$nr" :

$nr = rand(1, 500);

echo $nr;

Cnd se produce o eroare n timpul executiei unei functii, PHP genereaza mesaje de eroare.
Uneori, asemenea mesaje de eroare sunt nedorite. n acest caz, puteti suprima generarea
mesajelor de eroare prin adaugarea in fata numelui functiei a caracterului @.
De exemplu,, pentru a suprima mesajele de eroare care pot aparea n timpul executiei functiei
"f()", scriem aceasta functie dupa cum urmeaza:

y = @f(x);

Totusi, indicat este sa scrieti scripturi care sa nu genereze erori, ascunderea lor nu rezolva
problema ce cauzeaza eroarea.

O functie utila, recomandata a fi folosita in script-uri este functia isset() si este cel mai des
folosita cu "if()".
isset() preia ca argument de obicei o variabila si arata daca aceasta a fost sau nu setata.

De exemplu: isset($nr)

- Functia returneaza TRUE daca variabila "$nr" are setata o valoare (diferita de NULL), in
caz contrar returneaza FALSE.
Aceasta functie este foarte utila in determinarea caror comenzi sa fie executate in functie daca
o anumita variabila a fost setata sau nu. Previne aparitia unor erori care apar in cazuri de
variabile nule si ajuta si la securitate.
De exemplu, sa presupunem ca avem un cod PHP care vrem sa fie executat numai daca prin
adresa URL o fost transmisa o variabila "id", adica o adresa de forma
http://www.domeniu.site/script.php?id=un_id, folosim functia isset() astfel:
<?php
if (isset($_GET['id'])) {
// Se executa codul dorit
}
?>
- $_GET['id'] preia valoarea lui "id" din URL, iar functia isset() verifica daca aceasta valoare
exista (daca in URL este "id=ceva"). Daca aceasta exista, returneaza TRUE iar functia "if",
avand astfel valoarea TRUE, va executa codul dintre acoladele ei.
Functia isset() este utila si pentru situatii de verificarii a inexistentei unei variabile, prin
adaugarea caracterului (!) in fata ei. Astfel daca o anumita variabila rezulta a nu fi setata, ii
atribuim o valoare sau executam un anume cod special pt. asta.
Exemplu:
if (!isset($_GET['id'] {

die('Pagina apelata este inaccesibila.');


}

2. Utilizarea fisierelor incluse


Functiile PHP va permit sa obtineri accesul la programe PHP scrise anterior, create ntr-un alt
fisier extern.
Pentru aceasta puteti folosi functia require(), care are urmatoarea forma:

require("nume_fisier")

Cnd este ncarcat un script PHP care contine o instructiune require, continutul fisierului
specificat este inserat si executat n script, nlocuind instructiunea require.
De exemplu, sa presupunem ca realizam un site in PHP care este alcatuita din mai multe
pagini, iar fiecare pagina contine in partea de sus acelasi cod HTML. In loc sa scriem de
fiecare data, pentru fiecare pagina, acelasi cod HTML, il scriem o singura data intr-un fisier
separat (de exemplu "antet.php") iar in paginile unde vrem sa fie inclus codul HTML folosim
functia require()
Prin insertia instructiunii la nceputul scriptului din fiecare pagina PHP, ca in exemplu
urmator:
<?php
require("antet.php");
?>
- cu aceasta determinati programul PHP sa includa continutul fisierului "antet.php" ca si cum
continutul respectiv ar face parte din acel script.
Acest procedeu poate simplifica ntretinerea site-ului, deoarece informatiile standard pot fi
tinute ntr-un singur fisier, ceea ce le face usor de localizat si de modificat.
O alta functie, similara instructiunii require este functia include(). Spre deosebire de functia
require() care introduce datele din fisierul extern intocmai cum sunt scrise, functia include()
este o instructiune executabila ce determina evaluarea scriptului PHP din fisierul extern si
codul acestuia este executat ca si cum ar fi aparut n textul scriptului unde este inclus.
Sintaxa functiei include() este urmatoarea:

include("nume_fisier.php");

Functia corelata require_once() asigura faptul ca fisierul specificat este inclus o singura data
ntr-un script dat. n cazul n care creati fisiere externe care si ele folosesc instructiunea
require pentru a include continutul altor fisiere externe, puteti gasi instructiunea
require_once utila.

3. Definirea unei functii


n afara de a utiliza functiile din biblioteca de functii a limbajului PHP, va puteti defini si
folosi propriile functii.
Pentru a defini o functie, in PHP functiile incep intotdeauna cu declaratia: function, ca in
exemplul urmator:

function nume_functie(nume_argument) {
Aici se insereaza corpul functiei
}

Cuvntul cheie "function", "numele_functiei" si "nume_argument" alcatuiesc antetul functiei.


Termenul de corp al functiei se refera la instructiunile incluse ntre acolade care urmeaza
dupa antetul functiei. Instructiunile din corpul functiei sunt executate atunci cnd functia este
apelata.
Numele functiilor nu prezinta sensibilitate la diferenta ntre majuscule si minuscule; ca atare,
"f()" si "F()" reprezinta referiri la aceeasi functie.
Daca doriti sa definiti o functie care nu are argumente, puteti omite "nume_argument"; daca
doriti sa definiti o functie cu mai multe argumente, puteti include argumente suplimentare
dupa "nume_argument", fiecare argument fiind separat de vecinul sau printr-o virgula.
Parantezele si numele argumentelor incluse ntre acestea poarta numele de lista cu
argumente.
Ca exemplu, iata o functie care calculeaza aria unui dreptunghi:
<?php
function arie($lungime, $latime) {
return $lungime * $latime;
}
?>
Lista cu argumente a functiei "arie()" include argumentele $latime si $inaltime. Corpul
functiei este alcatuit dintr-o singura instructiune; cu toate acestea, corpul unei functii poate
contine mai multe instructiuni.
Daca doriti ca o functie sa returneze o valoare, trebuie sa determinati functia sa execute o
instructiune return care furnizeaza valoarea respectiva.
Instructiunea return determina sistarea executarii functiei; nu este necesar ca aceasta sa fie
ultima instructiune fizica din corpul functiei. Daca definiti o functie care nu are nici o
instructiune return (sau pentru date de iesire, precum "echo"), functia va returna valoarea
speciala NULL.

4. Apelarea unei functii definite de utilizator


O functie definita de utilizator poate fi apelata ca orice functie.
De exemplu, iata o instructiune care apeleaza functia "arie()" din exemplul anterior:
<?php
function arie($lungime, $latime) {
return $lungime * $latime;
}
$rezultat = arie(5,3);
echo "Aria exte : $rezultat";
?>
Valorile argumentelor 5 si 3 le nlocuiesc pe acelea ale argumentelor din corpul functiei, care
se comporta ca si cum ar fi fost scrisa astfel:

return 5*3

Rezultatul afisat al acestui script va fi :


Aria exte : 15

5. Terminarea executiei unui script


O instructiune return determina sistarea executiei functiei care o contine. In cazul n care
doriti sa sistati prelucrarea unui ntreg script, puteti invoca functia exit().
Iata un exemplu simplu:
<?php
function stop() {
exit();
}
echo "<br />Unu...";
echo "<br />Doi...";
stop();
echo "<br />Trei...";
?>
Dupa executie, scriptul afiseaza:
Unu...
Doi...
Rezultatul acestui script include cuvintele "Unu" si "Doi", dar nu si cuvntul "Trei". Prin
apelarea functiei "stop()" se executa corpul functiei respective; la invocarea functiei, exit(),
executia scriptului se ncheie.

6. Functii recursive
Este posibil ca o functie din PHP sa se auto-apeleze. O functie care procedeaza astfel se
numeste "functie recursiva". Totusi, daca nu aveti experienta de programare, este recomandat
sa nu scrieti functii recursive. Cu toate acestea, puteti scrie accidental sau intalni o asemenea
functie, deci este util sa stiti unele notiuni referitoare la aceasta.
Studiati scriptul urmator care defineste si invoca o functie recursiva simpla:
<?php
function recursor($nr) {
$nr++;
if ($nr<8) {
return recursor($nr);
}
return $nr;
}
$x = recursor(3);
echo $x;
?>
- Daca rulati acest script, rezultatul afisat va fi 8.
- Variabila "$x" primeste ca valoare functia "recursor()" careia ii transmite ca argument
numarul 3.
- Functia "recursor()" incrementeaza cu o unitate valoarea argumentului, prin "$nr++;" care
devine 4, apoi conditia "if ($nr<8)" verifica daca aceasta variabila din functie e mai mica
decat 8, in caz afirmativ se executa comanda "return recursor($nr);" care sisteaza executia
altui cod din functie si auto-apeleaza iar functia (cu noua valoare a lui "$nr" ca argument)

care iar incrementeaza valoarea lui "$nr" si verifica din nou conditia care iar autoapeleaza
functia, ... si tot asa pana cand "$nr" va avea valoarea 8 si la verificare conditiei "if" aceasta
returneaza FALSE si se trece mai departe la executia comenzii "return $nr;" care va returna 8
ca valoare a variabilei "$x".
Functia "echo" va afisa valoarea lui "$x", adica 8.

7. Definirea argumentelor prestabilite


PHP va permite sa definiti functii cu argumente prestabilite. Daca apelati o functie care are un
argument prestabilit, dar nu furnizati nici o valoare pentru argumentul respectiv, argumentul
ia o valoare prestabilita specificata la inceput.
Iata un exemplu simplu, studiati-l cu atentie:
<?php
function impozit_vanzari($cantitate, $rata = 0.0725) {
return $cantitate * $rata;
}
$cumparaturi = 123.45;
echo "<br />cumparaturi = $cumparaturi";
$impozit1 = impozit_vanzari($cumparaturi, 0.09);
echo "<br />impozit1 = $impozit1";
$cumparaturi = 123.45;
echo "<br /><br />cumparaturi = $cumparaturi";
$impozit2 = impozit_vanzari($cumparaturi);
echo "<br />impozit2 = $impozit2";
?>
Rezultatu afisat va fi:
cumparaturi = 123.45
impozit1 = 11.1105
cumparaturi = 123.45
impozit2 = 8.950125
- Functia impozit_vanzari preia doua argumente: un argument obligatoriu, denumit $cantitate,
si un argument prestabilit, denumit $rata.
Daca apelati functia si furnizati un singur argument, valoarea argumentului respectiv se
considera ca fiind valoarea argumentului $cantitate, iar valoarea 0.0725 se foloseste ca
valoare a argumentului $rata. Astfel, la prima invocare a functiei, pentru "impozit1", $rata are
valoarea 0.09, specificata drept al doilea argument al functiei. Cu toate acestea, la a doua
invocare a functiei, pentru "impozit2", $rata are valoarea 0.0725 deoarece este specificata
valoarea unui singur argument, si astfel "$rata" a preluat valoarea prestabilita initial.

Functii PHP matematice


Aici gasiti functii PHP matematice, in special pentru lucrul cu numere.

1. abs(nr)
- Returneaza valoarea absoluta (cu +) a lui "nr".
<?php
echo abs(-7.8);
echo abs(3);
echo abs(-5);
?>

// 7.8 (double /float)


// 3 (integer)
// 5 (integer)

2. base_convert(nr, baza1, baza2)


- Converteste un numar, "nr", din baza1 in baza2. Rezultatul returnat este un sir cu "nr"
convertit in baza2.
<?php
$nr = 18;
// Afiseaza numarul 18 convertit din baza 10 in baza 2 (cod binar)
echo base_convert($nr, 10, 2);
// 10010
?>
3. bindec('sir_binar')
- Returneaza echivalentul numeric (decimal) al sirului binar din parametrul "sir_binar".
<?php
echo bindec('10010');
echo bindec('1000');
?>

// 18
// 8

4. ceil(nr)
- Returneaza valoarea rotunjita a lui "nr" la urmatorul (mai mare) intreg.
<?php
echo ceil(7.8);
echo ceil(5);
echo ceil(-2.3);
echo ceil(1.2);
?>

// 8
// 5
// -2
// 2

5. cos(radian)
- Returneaza valoarea cosinus a gradelor de cerc specificate la "radian".
<?php
echo cos(30);

// 0.15425144988758

echo cos(90);
?>

// -0.44807361612917

6. decbin(nr)
- Returneaza un sir cu valoarea binara a numarului "nr".
<?php
echo decbin(-5);
echo decbin(88);
?>

// 11111111111111111111111111111011
// 1011000

7. dechex(nr)
- Returneaza un sir cu valoarea hexazecimala a numarului "nr".
<?php
echo decbin(-5);
echo decbin(88);
?>

// fffffffb
// 58

8. decoct(nr)
- Returneaza un sir cu valoarea octala a numarului "nr".
<?php
echo decbin(-5);
echo decbin(88);
?>

// 37777777773
// 130

9. floor(nr)
- Returneaza valoarea rotunjita a lui "nr" la anteriorul (mai mic) intreg.
<?php
echo floor(7.8);
echo floor(5);
echo floor(-2.5);
echo floor(1.2);
?>

// 7
// 5
// -3
// 1

10. fmod(x, y)
- Returneaza valoarea ramasa a lui "x" impartit la "y", care nu mai e multiplu de "y".
<?php
$x = 8.5;
$y = 3;
$r = fmod($x, $y);
?>

// $r va avea valoarea 2.5 (2 * 3 + 2.5 = 8.5)

11. hexdec('hex')
- Returneaza valoarea zecimala a sirului hexazecimal "hex".
<?php
echo hexdec('ee');
echo hexdec('3fe');
?>

// 238
// 1022

12. hypot(c1, c2)


- Returneaza lungimea ipotenozei unui triunghi dreptunghic care are lungimea catetelor "c1"
si "c2".
<?php
echo hypot(3, 4);
?>

// 5

13. is_infinite(val)
- Returneaza TRUE daca valoarea lui "val" este un numar infinit (precum log(0)), altfel,
returneaza FALSE.
<?php
$nr = log(0);
if (is_infinite($nr)) echo 'Nr. infinit';
?>
14. lcg_value()
- Returneaza un numar aleator intre 0 si 1.
<?php
echo lcg_value();
?>

// 0.64820835969476

15. log10(nr)
- Returneaza logaritmul in baza 10 a lui "nr"..
<?php
echo log10(1000);
?>

// 3

16. log(nr, baza)


- Returneaza logaritm de "nr" in baza "baza". Daca al doilea parametru nu e specificat, va
returna logaritmul natural (in baza e).

<?php
echo log(9, 3);
?>

// 2

17. max(nr1, nr2, ...)


- Returneaza cel mai mare numar dintre cele date la parametri.
<?php
echo max(9, 3, 8, 78, 55);
?>

// 78

18. min(nr1, nr2, ...)


- Returneaza cel mai mic numar dintre cele date la parametri.
<?php
echo max(9, 3, 8, 78, 55);
?>

// 3

19. mt_rand(min, max)


- Returneaza un numar aleator cuprins intre numerele "min" si "max". Similara este si functia
rand(), dar "mt_rand()" este de 4 ori mai rapida.
<?php
echo mt_rand(9, 55);
?>

// 47

20. octdec('oct')
- Returneaza valoarea zecimala a sirului octal "oct".
<?php
echo octdec('42');
?>

// 34

21. pi()
- Returneaza valoarea aproximativa a lui PI. La fel ca si constanta M_PI.
<?php
echo pi();
echo M_PI;
?>

// 3.1415926535898
// 3.1415926535898

22. pow(nr, putere)


- Returneaza valoarea obtinuta din "nr" la puterea "putere".

<?php
echo pow(4, 3);
?>

// 64

23. round(nr)
- Returneaza valoarea rotunjita a lui numar la intregul ce mai apropiat.
<?php
echo round(7.8);
echo round(5);
echo round(-2.5);
echo round(1.2);
?>

// 8
// 5
// -3
// 1

24. sin(radian)
- Returneaza valoarea sinus a gradelor de cerc specificate la "radian".
<?php
echo sin(30);
echo sin(90);
?>

// -0.98803162409286
// 0.89399666360056

25. sqrt(nr)
- Returneaza radical din "nr".
<?php
echo sqrt(225);
?>

// 15

26. tan(radian)
- Returneaza valoarea tangenta a gradelor de cerc specificate la "radian".
<?php
echo tan(30);
echo tan(90);
?>

// -6.4053311966463
// -1.9952004122082

27. is_numeric(val)
- Returneaza TRUE daca "val" e o valoare numerica, altfel, FALSE.
<?php
$x = 32/3;
if (is_numeric($x)) echo "E un numar si are valoarea: $x";
valoarea: 10.666666666667
?>

// E un numar si are

Functii pentru lucru cu functii


Aici gasiti functii PHP ce pot fi folosite in lucrul cu functii create /definite in script.

1. call_user_func("func", arg)
- Apeleaza functia "func" dandu-i valoarea argumentului "arg". Returneaza rezultatul functiei
apelate, sau FALSE.
<?php
function func($arg1, $arg2) {
return "$arg1 - $arg2";
}
// Apeleaza func()
echo call_user_func("func", 'MarPlo', 'net');

// MarPlo - net

// Sau o metoda mai avansata, prin crearea si apelarea functiei in acelasi timp (PHP 5.3 +)
echo call_user_func(function($arg) { echo "Tutoriale $arg"; }, 'php');
// Tutoriale php
?>
2. call_user_func_array("func", array_arg)
- Apeleaza o functie ("func") dandu-i valoarea argumentelor dintr-un Array (array_arg).
Returneaza rezultatul functiei apelate, sau FALSE.
<?php
// Functie creata standard
function func1($arg1, $arg2) {
return $arg1 + $arg2;
}
// Functie creata in variabila (PHP 5.3 +)
$func2 = function($arg1, $arg2) {
return $arg1 * $arg2;
};
// Matricea pt. parametri
$aray_p = array(7, 8);
// Apeleaza func1()
echo call_user_func_array("func1", $aray_p);
// Apeleaza $func2

// 15

echo call_user_func_array($func2, $aray_p);


?>

// 56

3. create_function("argumente", "cod_functie")
- Creaza dinamic o functie ce va avea argumentele "argumente" si codul ce-l executa
"cod_functie". Returneaza functia creata (poate fi asociata cu un nume de variabila), sau
FALSE. ("argumente" si "cod_functie" trebuie sa fie siruri)
<?php
$var = create_function('$arg', 'return $arg*2;');
echo $var(8);
// 16
?>
4. func_num_args()
- Returneaza numarul de argumente primite de o functie. Se foloseste in interiorul acelei
functii.
<?php
function test() {
// Preia si afiseaza numarul de argumente primite
$nr_args = func_num_args();
echo "Numar argumente primite: $nr_args";
}
// Apeleaza functia
test(1, 2, 'a');
// Numar argumente primite: 3
?>
5. func_get_arg(nr)
- Returneaza argumentul cu index-ul "nr" din cele primite de o functie (primul argument are
index 0). Se foloseste in interiorul acelei functii. Daca numarul de argumente e mai mic decat
"nr", returneaza FALSE.
<?php
function test() {
// Preia numarul de argumente primite
$nr_args = func_num_args();
// Daca nr. argumente e mai mare sau egal cu 2, afiseaza argumentul cu index 2
if ($nr_args>=2) {
echo 'Argumentul cu indice 2 e: '. func_get_arg(2);
}
}
// Apeleaza functia
test(1, 'php', 'www.marplo.net');
?>

// Argumentul cu indice 2 e: www.marplo.net

6. func_get_args()
- Returneaza o matrice cu argumentele primite de o functie. Se foloseste in interiorul acelei
functii..
<?php
function test() {
// Preia argumentele primite
$array_args = func_get_args();
// Afiseaza structura matricei cu argumentele
print_r($array_args);
}
// Apeleaza functia
test(1, 'tutoriale', 'www.marplo.net');
www.marplo.net )
?>

// Array ( [0] => 1 [1] => tutoriale [2] =>

7. function_exists("function")
- Returneaza TRUE daca functia "function" (numele ei intre ghilimele) exista, altfel,
returneaza FALSE.
8. register_shutdown_function("func", param1, param2, ...)
- Inregisteaza functia "func" sa fie executata la terminarea scriptului (dupa executarea
comenzilor din el), sau dupa apelarea lui "exit()". "param1", "param2" sunt optionali si
reprezinta parametri ce vor fi transferati la "func".
<?php
function end_script() {
echo 'Terminare script';
}
// Inregistreaza sa fie executata functia end() la sfarsit de executie a scriptului
register_shutdown_function("end_script");
// Se executa cod oarecare
echo (2+3).' - ';
// Rezultatul functiei va fi afisat ultimul, desi a fost inregistrata pt. executie inaintea echo-ului
de sus
// Scriptul va returna: 5 - Terminare script
?>

Variabile si referinte in functii

nvatati sa folositi variabile globale, locale si statice

nvatati sa folositi referintele

Variabilele functiilor in PHP sunt de doua tipuri principale:

Variabile globale

Variabile locale

Variabilele globale sunt create n exteriorul functiei, n timp ce variabilele locale sunt create
n interiorul unei functii.

1. Utilizarea variabilelor globale


Asa cum s-a explicat anterior, variabilele globale sunt cele declarate n afara oricarei functii.
Totalitatea locurilor unde este accesibila o variabila se numeste "domeniu de existenta al
variabilei". Variabilele globale nu pot fi accesibile din interiorul corpului unei functii; cu alte
cuvinte, domeniul de existenta al unei variabile globale, nu include corpurile functiilor. Daca
doriti sa obtineti accesul la o variabila globala n cadrul unei functii, puteti extinde domeniul
de existenta al variabilei prin specificarea in functie a numelui variabilei, n cadrul unei
instructiuni GLOBAL.
Instructiunea GLOBAL are urmatoarea forma:

GLOBAL variabila1, variabila2, variabila3;

Iata un exemplu concludent :


<?php
$var1 = 135;
$var2 = 250;
function Suma() {
return $var1 + $var2;
}
echo "Suma este ". Suma();
?>
- Functia "Suma()" foloseste variabilele $var1 si $var2 declarate anterior, dar aceste variabile
nu au domeniu de valabilitate in interiorul functiei. Prin urmare rezultatul functiei este
NULL.
Pentru a rezolva aceasta problema vom declara cele doua variabile ca fiind variabile globale,
ca in exempul urmator:
<?php
$var1 = 135;
$var2 = 250;
function Suma() {
GLOBAL $var1, $var2;
return $var1 + $var2;
}

echo "Suma este ". Suma();


?>
- In exemplul de mai sus declaratia: "GLOBAL $var1, $var2" face ca variabilele $var1 si
$var2 sa fie recunoscute si in interiorul functiei.
- Puteti scrie si cu litere mici "global", dar e mai usor de recunoscut cu litere mari.
O alta metoda prin care putem solutiona aceasta problema este prin folosirea variabilei PHP
predefinite $GLOBALS, dupa cum puteti vedea in exemplu urmator:
<?php
$var1 = 135;
$var2 = 250;
function Suma() {
return $GLOBALS['var1'] + $GLOBALS['var2'];
}
echo "Suma este ". Suma();
?>
$GLOBALS este o variabila predefinita, este de fapt un array ; elementele acestei matrice au
cheia egala cu numele variabilelor declarate si valoarea egala cu cea a variabilelor declarate.
$GLOBALS este o variabila superglobala, ea va fi recunoscuta in orice script.
Puteti folosi oricare din cele doua variante prezentate: instrucrtiunea GLOBAL sau variabila
$GLOBALS.
In cele doua exemple prezentate mai sus rezultatul afisat va fi acelasi :
Suma este 385

2. Utilizarea variabilelor locale


Variabilele locale sunt create in interiorul functiei si sunt distruse cand se ncheie apelul la
functia respectiva. n consecinta, variabilele locale sunt disponibile numai pe durata executiei
functiei asociate.
Argumentele functiilor constituie un tip important de variabila locala. Cu toate acestea, puteti
crea o variabila locala prin simpla atribuire a unei valori unei variabile din interiorul unei
functii.
Pentru a ilustra deosebirea dintre variabilele locale si cele globale, iata un script care
defineste o variabila locala denumita "$x" si o variabila globala cu acelasi nume:
<?php
function v_local() {
$x = 5;
echo "<br />In corpul functiei x = $x";
}
$x = 2;
echo "<br />In corpul scriptului x = $x";
v_local();
echo "<br />In corpul scriptului x = $x";
?>
Cand executati acest script, veti primi urmatoarele rezultate:
In corpul scriptului x = 2
In corpul functiei x = 5
In corpul scriptului x = 2

Remarcati diferenta dintre cele doua variabile $x, chiar daca numele variabilelor este acelasi.
Cand este apelata functia v_local(), $x ia valoarea 5, in rest, inainte si dupa, ia valoarea 2.
Domeniul de existenta al variabilei globale $x nu se extinde n interiorul corpului functiei
v_local(), iar domeniul de existenta al variabilei locale $x nu se extinde dincolo de corpul
functiei respective. Cu alte cuvinte, domeniile de existenta ale celor doua variabile sunt
complet distincte.

3. Utilizarea variabilelor statice


Uneori este nevoie ca o variabila locala sa-si pastreze valoarea de la un apel al functie
asociate la altul. Altfel spus, nu doriti ca variabila sa fie distrusa la ncheierea apelului la
functie.
Pentru acest lucru puteti folosi instructiunea STATIC (la fel cu "static").
Forma instructiunii STATIC este similara cu aceea a instructiunii GLOBAL.

STATIC $var1, $var2, $var3;

O variabila afisata ntr-o instructiune STATIC este cunoscuta sub numele de "variabila
statica".
Iata un exemplu care prezinta modul de utilizare a unei variabile statice:
<?php
function v_local() {
$x = $x + 1;
echo "<br /> x = $x";
}
function v_static() {
STATIC $x;
$x = $x + 1;
echo "<br /> x = $x";
}
v_local();
v_local();
v_local();
v_static();
v_static();
v_static();
?>
Daca rulati acest script, veti primi urmatoarele rezultate:
x=1
x=1
x=1
x=1
x=2
x=3
Observati ca variabila locala $x, definita n cadrul functiei v_local(), este creata din nou la
fiecare apelare a functiei, n consecinta, valoarea sa este ntotdeauna afisata ca fiind egala cu
1.
Prin contrast, variabila statica $x, definita n cadrul functiei v_static(), si pastreaza valoarea

de la un apel al functiei la urmatorul; ca atare, valoarea sa creste de fiecare data cnd este
executata functia.

4. Utilizarea referintelor
In mod prestabilit, argumentele transferate unei functii PHP sunt transmise prin valoare, ceea
ce nseamna ca valorile argumentelor sunt copiate si functiile utilizeaza copii ale valorilor
argumentelor lor, nu argumentele n sine. Ca o consecinta, o functie PHP nu poate modifica
valorile argumentelor sale.
Totusi, puteti stabili ca o functie sa aiba posibilitatea de a modifica valoarea unui argument,
specificnd ca argumentul sa fie transferat prin referinta.
Cnd un argument este transferat prin referinta, valoarea sa nu este copiata; functia lucreaza
cu valoarea argumentului si are libertatea de a modifica acea valoare.
Pentru a specifica faptul ca un argument urmeaza a fi transferat prin referinta, inaintea
argumentului va fi adaugat un caracter ampersand (&). Puteti atasa acest caracter la argument
n antetul functiei sau n apelul la functie.
Iata un exemplu care prezinta apelul prin valoare si apelul prin referinta:
<?php
function p_valoare($a) {
$a = 1;
}
function p_referinta(&$a) {
$a = 1;
}
$b = 0;
p_valoare($b);
echo "<br /> \$b = $b";
$b = 0;
p_valoare(&$b);
echo "<br /> \$b = $b";
$b = 0;
p_referinta($b);
echo "<br /> \$b = $b";
?>
Dupa rulati acest script, veti obtine urmatoarele date de iesire:
$b = 0
$b = 1
$b = 1
Retineti ca scriptul contine doua functii, si anume "p_valoare()" si "p_referinta()". Fiecare
functie preia un singur argument, denumit $a. Antetul functiei "p_referinta()" specifica faptul
ca argumentul sau este transferat prin referinta; argumentul functiei "p_valoare()" este
transferat prin valoare.
Primul paragraf al programului invoca functia "p_valoare()", transfernd argumentul prin
valoare. n consecinta, functia lucreaza cu o copie a argumentului sau, iar valoarea variabilei
$b nu se modifica.
Cel de-al doilea paragraf al programului invoca de asemenea functia "p_valoare()"; dar,

foloseste un caracter ampersand (&) pentru a determina transferul prin referinta al valorii
variabilei $b. n consecinta, functia modifica valoarea argumentului sau, care se transforma
din 0 n 1.
Cel de-a treilea paragraf al programului invoca functia "p_referinta()". Antetul functiei
respective foloseste un caracter ampersand (&) pentru a specifica faptul ca valoarea
argumentului sau este transferata prin referinta, n consecinta, functia modifica valoarea
argumentului sau, care se transforma din 0 n l.
Prin utilizarea referintelor se evita suprasarcina de copiere a valorilor argumentelor si implicit
se obtine o viteza mai mare de executie a programului. Cu toate acestea, programele devin
astfel mai dificil de nteles, iar referintele sau apelurile prin referinta pot cauza erori de
program. Cel mai indicat este sa evitati referintele, acolo unde este posibil, si sa definiti
functii care returneaza valori, si nu functii care modifica valorile propriilor argumente.
In versiunile PHP 5+, transmiterea la functiei a unui parametru prin referinta "Call-time passby-reference", p_valoare(&$b), a fost scoasa din uz. Dar poate fi activata din php.ini, daca
aveti acces, prin setarea 'true' la "allow_call_time_pass_reference".

Data si Timpul in PHP


PHP are mai multe functii pentru lucru cu Data zilei si Timpul /Ora. Cele mai utilizate sunt
acestea:

date() - transforma Timestamp (denumit si timpul Unix, numarul de secunde de la 1


Ianuarie 1970) intr-un format de data citet /textual.

time() - Returneaza timpul Unix /Timestamp curent (numarul de secunde de la 1


Ianuarie 1970 pana in prezent).

microtime() Returneaza timpul Unix /timestamp curent in microsecunde.

getdate() - Returneaza un array asociativ ce contine informatii despre data si timp.

- Aceste functii permit sa preiei data si timpul de la server in script-ul PHP; ele depind de
setarile locale ale serverului.

PHP date()
Functia PHP date() e utilizata pt. formatarea Timestamp in data /timp.
- Sintaxa:
date("format", timestamp)
- format - Un sir format din caractere ce reprezinta data returnata. Ex.: "D, d M Y H:i:s"
rezulta => "Mon, 15 Aug 2012 15:42:01 +0000"
- timestamp - numarul de secunde de la 1-01-1970 pana la o anumita data. Este optional,
daca nu e specificat se foloseste Timestamp-ul curent.
Aceasta functie returneaza un sir cu formatul datei, sau False in caz de eroare.
O lista cu mai multe functii si exemple de lucru cu data si timpul la pagina: Functii pentru

Data si Timp.
- Exemplu, preia data curenta, Zi-Luna-An:
$today = date('d-m-Y');
echo $today;
In mod standard, functia date() foloseste timpul zonal al serverului. Ca sa setati un alt timp
zonal, utilizati functia date_default_timezone_set('timezone_identifier'), adaugata inainte de
alte functii pt data si timp.
Parametrul "timezone_identifier" e un sir cu identificatorul zonei de timp (ex.:
'America/New_York' sau 'Europe/Bucharest'). Lista completa de timpuri zonale pt PHP e la
pagina: Lista zone de timp pt PHP.
- Exemplu:
<?php
date_default_timezone_set('Europe/Bucharest');
zonal pt Romania (Bucuresti)

// seteaza timpul

// returneaza ziua curenta din saptamana


echo date('l');
// returneaza data zilei curente (zi-luna-an)
echo '<br />'. date('j-F-Y');
// returneaza Ora:minute:secunde a timpului curent
echo '<br />'. date('H:i:s');
?>

Rezultat:
Sunday
28-October-2012
07:55:18
In acest exemplu nu e specificat un timestamp, astfel, functia date() lucreaza cu timpul actual,
zona Romania /Bucuresti.
Ca sa obtineti timpul Unix /Timestamp-ul curent (numarul de secunde), se utilizeaza functia
time() (ex.: $ts = time(); ).

Alte exemple cu functii pentru Data si Timp


Ca sa lucrati cu Timestamp-ul unei anumite date specifice, utilizati functia mktime().
- Sintaxa:
mktime(ore, minute, secunde, luna, zi, an)
Returneaza timpul Unix corespunzator argumentului.
Se poate utiliza si functia strtotime(). Returneaza timpul Unix a sirului din parametru cu data
textuala in limba engleza.
- Sintaxa:
strtotime("timpul")
- Parametrul "timpul" e un sir /text cu data in limba engleza (ex.: "now", "+1 Day", "15
October 2012", "next Sunday", etc.).
O lista cu formate valabile e la pagina Formate Data si Timp.

Exemplu cu mktime() ai strtotime():


<?php
// preia Timestamp-ul datei October 15, 1976, 20:38:00 (cu mktime)
// returneaza Timestamp-ul si ziua din saptamana a acestei date
$stamp = mktime(20, 38, 0, 10, 15, 1976);
echo 'Timestamp: '. $stamp;
echo '<br /> October 15, 1976 este '. date('l', $stamp);
// Exemplu cu strtotime()
echo '<br /><br />Exemplu cu strtotime():<br />';
echo '<br /> 15 October 1976, 20:38:00 - '. strtotime('15 October 1976,
20:38:00');
// Alte exemple
echo '<br /> 07 July 1996 - '. strtotime('07 July 1996');
echo '<br /> +3 days - '. strtotime('+3 days');
echo '<br /> +1 one week - '. strtotime('+1 week');
echo '<br /> +1 week 2 days 3 hours 30 seconds - '. strtotime('+1 week 2
days 3 hours 30 seconds');
echo '<br /> next Sunday - '. strtotime('next Sunday');
?>

Acest cod va afisa:


Timestamp: 214252680
October 15, 1976 este Friday
Exemplu cu strtotime():
15 October 1976, 20:38:00 - 214252680
07 July 1996 - 836686800
+3 days - 1300950386
+1 one week - 1301292386
+1 week 2 days 3 hours 30 seconds - 1301476016
next Sunday - 1301176800
Ziua 0 dintr-o luna reprezinta ultima zi din luna precedenta.
De exemplu, ziua 0 din Martie 2012 este "29", ultima zi din Februarie 2012:
echo date('d', mktime(0, 0, 0, 03, 0, 2012));
// 29
O alta functie utila pt data si timp e getdate()
- Sintaxa:
getdate(timestamp)
- timestamp - E optional, un numar intreg cu timpul Unix. Daca nu e specificat, foloseste
timestamp-ul curent.
getdate() returneaza un array asociativ cu informatii despre data si timpul din "timestamp",
sau cel curent daca nu e specificat.
- Exemplu:
<?php
$now = getdate();
echo '<pre>';
var_export($now);
echo '</pre>';

?>

Acest cod va afisa un array similar cu acesta:


array (
'seconds' => 48,
'minutes' => 30,
'hours' => 9,
'mday' => 21,
'wday' => 1,
'mon' => 3,
'year' => 2011,
'yday' => 79,
'weekday' => 'Monday',
'month' => 'March',
0 => 1300692648,
)

- Exemplu cu microtime() (returneaza timpul Unix /timestamp curent in microsecunde). E


util, de exemplu in a afla timpul de executie a unui cod PHP.
- Cod:
<?php
$load_time = -microtime(true);
// instructiuni php
$load_time += microtime(true);
echo $load_time. ' seconds';
?>

Lucrul cu siruri (1)

nvatati sa utilizati secvente escape suplimentare pentru a include n siruri caracterele


speciale

nvatati sa utilizati codurile ASCII

nvatati sa creati date de iesire formatate

n Lectia 2 au fost prezentate sirurile, tipul de date PHP care stocheaza texte, n aceasta lectie
veti nvata mai multe despre utilizarea sirurilor.

1. Crearea si afisarea sirurilor


Sa recapitulam notiunile elementare ale sirurilor

Valorile de tip sir sunt secvente de caractere incluse ntre ghilimele duble sau simple

Puteti include un caracter special n cadrul unui sir folosind o secventa escape care
reprezinta caracterul special.

Variabilele pot fi de tip string si li-se poate atribui o valoare de tip sir.

Operatorul de concatenare, punct, ( . ) se poate folosi pentru unirea sirurilor.

PHP poate converti n mod automat o valoare numerica ntr-un sir, respectiv valoarea
unui sir ntr-un numar.

Secventele escape folosite n PHP:

\n - salt la linie noua


\r - retur de car (rand nou)
\t - caracter de tabulare pe orizontala
\\ - backslash
\$ - simbolul dolarului
\" - ghilimele duble
\xxx - caracterul asociat valorii ASCII xxx, exprimata sub forma unui numar in octal
\xnn - caracterul asociat valorii ASCII xxx, exprimata sub forma unui numar n
hexazecimal

2. Secvente escape si cod ASCII


Ultimele doua secvente escape prezentate mai sus folosec un cod ASCII (America Standard
Code for Information Interchange) pentru reprezentarea unui caracter.
Codurile ASCII sunt valori ntregi, care sunt cuprinse ntre 0 si 255; fiecare litera sau simbol
folosit frecvent n limbile vest-europene are asociat un cod ASCII. De exemplu, codul ASCII
asociat literei A este 65, iar codul asociat cifrei l este 49.
Prima secventa escape necunoscuta (\xxx) va permite sa folositi reprezentarea n octal (baza
8) a unui cod ASCII pentru specificarea caracterului corespunzator. De exemplu, valoarea
zecimala 65 (care este codul ASCII al literei A) poate fi reprezentata n octal sub forma 101.
Ca atare, puteti reprezenta litera A folosind secventa escape "\101".
Cea de-a doua secventa escape necunoscuta (\xnn) va permite sa folositi reprezentarea
hexazecimala (n baza 16) a unui cod ASCII pentru specificarea caracterului corespunzator.
De exemplu, valoarea zecimala 65 (care este codul ASCII al literei A) poate fi reprezentat sub
forma hexazecimala 41. Ca atare, puteti reprezenta litera A cu ajutorul secventei escape "\41".
Valoarea unui numar zecimal este suma produselor dintre fiecare cifra care l compune si o
putere a lui 10. De exemplu, numarul zecimal 123 are valoarea l x 10 la puterea 2 + 2 x 10 la
puterea 1 + 3 x 10 la puterea 0 = 1x100 + 2x10 + 3x1.
Puteti determina valoarea unui numar reprezentat folosind o alta baza prin nlocuirea lui 10
cu valoarea bazei respective ntr-o expresie ca aceea prezentata anterior. De exemplu,
valoarea hexazecimala 123 este echivalenta cu valoarea zecimala l x 16 la puterea 2 + 2 x 16
la puterea 1 + 3 x 16 la puterea 0 = l x 156 + 2 x 16 + 3 x l = 291.
Similar, valoarea n octal 123 este echivalenta cu valoarea zecimala 1x8 la puterea 2 + 2x8 la
puterea 1 + 3x8 la puterea 0 = 1x64 + 2x8 + 3xl=83.
Daca vi se pare complicat sa calculam astfel, nu intrati n panica; n continuare veti nvata sa
determinati valoarea n octal sau hexazecimal echivalenta cu orice valoare zecimala, folosind
functii PHP.

3. Utilizarea codurilor ASCII

Numeroase functii PHP sunt deosebit de folositoare la utilizarea codurilor ASCII. Aceste
functii sunt enumerate n tabelul urmator.
Functii folositoare n utilizarea codurilor ASCII
Functie
Descriere
chr(/n) - Returneaza caracterul avnd codul ASCII dat de "n"
- Returneaza valoarea hexazecimala echivalenta cu valoarea
dechex(n)
zecimala data de "n"
- Returneaza valoarea n octal echivalenta cu valoarea zecimala
decoct(n)
data de "n"
- Returneaza valoarea zecimala echivalenta cu valoarea
hexdec(n)
hexazecimala data de "n"
- Returneaza valoarea zecimala echivalenta cu valoarea n octal
octdec(n)
data de "n"
ord(c) - Returneaza codul ASCII echivalent caracterului "c"
Iata un exemplu de utilizare a functiei ord() pentru a determina codul ASCII corespunzator
unui anumit caracter:
<?php
$c = "A";
$n = ord($c);
echo "<br /> Valoarea ASCII a caracterului $c este $n";
?>
Scriptul va afisa urmatorul rezultat:
Valoarea ASCII a caracterului A este 65
Iata un exemplu care afiseaza echivalentele n octal, respectiv hexazecimal al caracterelor
ASCII ale caror coduri sunt cuprinse ntre 33 si 40:
<?php
for ($i=33; $i<40; $i++) {
$c=chr($i);
$octal = decoct($i);
$hex = dechex($i);
echo "<br /> $i (octal $octal, hex $hex): caracter - $c";
}
?>
Scriptul va afisa urmatorul rezultat:
33 (octal 41, hex 21): caracter - !
34 (octal 42, hex 22): caracter - "
35 (octal 43, hex 23): caracter - #
36 (octal 44, hex 24): caracter - $
37 (octal 45, hex 25): caracter - %
38 (octal 46, hex 26): caracter - &
39 (octal 47, hex 27): caracter - '

4. Crearea datelor de iesire formatate


PHP include doua functii utile pentru generarea datelor de iesire formatate, n speta printf()
si sprintf().
Functia printf() afiseaza datele sale de iesire, n timp ce functia sprintf() returneaza datele

sale de iesire sub forma unei valori sir.


n general, fiecare functie preia doua sau mai multe argumente. Primul argument este un sir,
denumit sir de formatate, care specifica formatul datelor de iesire, iar celelalte argumente
specifica valorile care vor constitui datele de iesire.
Iata un exemplu simplu de utilizare a functiei sprintf():
<?php
$num = 8.7;
echo $num;
$num = sprintf("%05.2f", $num);
echo '<br>'. $num;
?>
- Rezultatul afisat va fi:
8.7
08.70
- Cu ajutorul expresiei "%05.2f", sprintf() formateaza numarul din $num astfel incat acesta sa
fie format din 5 caractere dintre care unul punct (.) si 2 zecimale.
Iata si doua exemple de utilizare a functiei printf():
<?php
$n = 8;
printf("Valoarea lui n este: %d", $n);
?>
- Va afisa "Valoarea lui n este: 8".
Al doilea exemplu, putin mai complicat, prezinta modul de utilizare a functiei printf() cu mai
multe argumente pentru datele de iesire:
<?php
$sir = 'Aceasta este lectia %d din cursul %s';
$num = 13;
$tip = 'PHP';
printf($sir, $num, $tip);
?>
- Includerea datelor formatate in sir se face in ordinea adaugarii variabilelor intre parantezele
functiei "sprintf()".
- Va afisa "Aceasta este lectia 13 din cursul PHP".
Sirul de formatare consta dintr-o serie de caractere si directive ordinare. Un caracter ordinar
este orice caracter, n afara caracterului "%". Caracterele ordinare sunt pur si simplu copiate
la iesire.
Directivele reprezinta secvente de caractere care ncep cu simbolul "%"; aceste determina
modul n care va fi formatat argumentul corespunzator.
O directiva simpla, cum este cea din exemplul precedent, poate consta dintr-un caracter "%"
urmat de un specificator de tip, precum "d", care arata ca argumentul trebuie tratat ca numar
zecimal. Cu toate acestea, o directiva mai sofisticata poate include urmatoarele componente,
care trebuie sa apara n ordinea indicata:

Specificator de completare (optional): - Un specificator de completare precizeaza


caracterul care se va folosi pentru a completa rezultatul pna la dimensiunea ceruta a
sirului, n cazul n care caracterul de completare este omis, rezultatul este completat
cu spatii. Specificatorul de completare poate fi un caracter spatiu sau un 0 (zero). Un

specificator de completare de tip spatiu este folosit frecvent cu sirurile, iar un


specificator de completare zero se foloseste mai ales alaturi de numere. Un alt caracter
de completare poate fi specificat prin prefixarea acestuia cu un singur semn al citarii
('). De exemplu, pentru a completa un rezultat cu liniute de subliniere, specificati '_
drept caracter de completare.

Specificator de aliniere (optional): - Un specificator de aliniere indica daca rezultatul


trebuie sa fie aliniat la stnga sau la dreapta. Daca specificatorul de aliniere este omis,
rezultatul va fi aliniat la dreapta; daca se indica o cratima (-) drept specificator de
aliniere, rezultatul va fi aliniat la stnga.

Specificator de latime (optional): - Un specificator de latime este un ntreg care


determina numarul minim de caractere ale rezultatului; sau, daca argumentul este de
tip double, numarul minim de caractere situate la stnga punctului zecimal. Daca
rezultatul contine un numar mai redus de caractere, atunci va contine si caractere de
completare.

Specificator de precizie (optional): - Un specificator de precizie este un punct


zecimal, urmat de un ntreg care determina numarul de cifre dupa punctul zecimal pe
care trebuie sa le contina rezultatul. Specificatorul de precizie nu are nici un efect
pentru alte tipuri dect double (float).

Specificator de tip (obligatoriu): - Specificatorul de tip determina modul de tratare si


afisare a argumentului.

Tabelul urmator prezinta specificatorii de tip disponibili.


Specificatorii de tip PHP folositi la formatarea sirurilor
Specificator de
tip

Descriere

- Trateaza argumentul ca pe un ntreg si l afiseaza ca


valoare binara

- Trateaza argumentul ca pe un ntreg si afiseaza caracterul


cu aceeasi valoare ASCII ca si argumentul

- Trateaza argumentul ca pe un ntreg si l afiseaza ca


valoare zecimala

- Trateaza argumentul ca pe o valoare de tip double si l


afiseaza ca valoare cu virgula mobila

- Trateaza argumentul ca pe un ntreg si l afiseaza ca pe o


valoare scrisa n octal

- Trateaza argumentul ca pe un sir si l afiseaza

- Trateaza argumentul ca pe un ntreg si l afiseaza ca numar


hexazecimal, cu litere scrise cu minuscule

- Trateaza argumentul ca pe un ntreg si l afiseaza ca numar


hexazecimal, cu litere scrise cu majuscule

Daca doriti sa inserati simbolul procentului n datele de iesire ale unui apel la functia printf()
sau sprintf(), inserati doua caractere "%".
Tabelul urmator prezinta rezultatele aplicarii a diferite siruri de formatare valorilor selectate.
Studiati tabelul si verificati daca ati nteles corect modul de operare a specificatorilor din
cadrul fiecarui sir de formatare. Remarcati ca, n cazul omiterii cifrelor zecimale, se produce
automat o rotunjire.
Spatiile au fost nlocuite prin accente circumflexe(^), pentru a facilita determinarea
numarului de spatii si a amplasarii acestora.
Exemple de rezultate ale utilizarii a diferite siruri de formatare
Valoare

Format

Rezultat

100

%d

100

100

%b

1100100

100

%o

144

100

%x

64

100

%f

100.000000

12.345

%^-10f

12.345000^^^^^^^^

12.345

%^10f

^^^^^^^^12 .345000

12.345

%^-10.2f

12.35^^^^^^^^

12.345

%10.2f

^^^^^^^^12.35

test

%^-10s

test^^^^^^

test
%^10s
*^^^^^^test
Daca utilizarea functiilor printf() si sprintf() pentru formatarea numerelor pare cam greoaie,
puteti folosi functia number_format(), care returneaza o valoare de tip sir continnd un
rezultat formatat. Puteti apela functia cu unul, doua sau patru argumente:

number_format(numar)

number_format(numar, zecimale)

number_format(numar, zecimale, punct_zecimal, separator_mii)

- Argumentul "numar" specifica valoarea numerica pe care doriti sa o formatati.


- Argumentul "zecimale" specifica numarul dorit de cifre zecimale.
- Argumentul "punct_zecimal" precizeaza caracterul ce se va folosi drept punct zecimal.
- Argumentul "separator_mii' precizeaza caracterul care se va folosi ca separator al miilor.
n mod prestabilit, rezultatul este formatat fara zecimale, este inserat un punct (.) naintea
cifrelor care compun partea zecimala, respectiv se foloseste o virgula (,) pentru separarea
miilor.
De exemplu, apelul la functia number_format(1.234, 2) returneaza valoarea 1.23
Functia PHP sscanf(), este complementara functiei printf(). Daca functia printf() genereaza
date de iesire formatate, functia sscanf() citeste un sir, l interpreteaza prin referirea la un sir
de formatare si stabileste valorile variabilelor specificate n functie de continutul sirului.
Sa luam n considerare urmatorul exemplu:

<?php
$subiect = "08,25,2008";
$n = sscanf($subiect, "%d,%d,%d", &$luna, &$zi, &$an);
echo "Au fost gasite $n valori";
echo "<br /> luna = $luna";
echo "<br /> zi = $zi";
echo "<br /> an = $an";
?>
Datele de iesire ale acestui script sunt:
Au fost gasite 3 valori
luna = 8
zi = 25
an = 2008

Functii pentru siruri (strings)


Aici gasiti cateva din cele mai utile functii PHP pentru siruri (strings).

1. addslashes("sir")
- Adauga caracterul \ (backslash) inaintea ghilimelelor simple si duble, a lui backslash si
NULL (NULL byte). Ca pretectie, de exemplu cand sirul e adaugat intr-o baza de date.
<?php
$sir = 'Un sir ce contine caractere: " si \ ';
echo addslashes($sir);
?>

// Un sir ce contine caractere: \" si \\

2. bin2hex('sir')
- Returneaza forma hexadecimala a lui 'sir'
<?php
echo bin2hex('M');
?>

// 4d

3. chr(ascii)
- Returneaza caracterul reprezentat de codul ASCII din parametru.
<?php
echo chr(77);
?>

// M

4. chunk_split("sir", nr, 'sep')

- Imparte "sir" in mai multe sub-siruri, avand lungimea de caractere "nr" si separate prin
"sep".
<?php
$sir = 'Sir de test, siruri.';
echo chunk_split($sir, 7, ' | ');
?>

// Sir de | test, s | iruri. |

5. echo 'sir'
- Afiseaza in browser continutul 'sir'.
<?php
echo 'http://www.marplo.net';
?>

// http://www.marplo.net

6. explode('sep', "sir")
- Creaza un Array (matrice) cu partile din "sir" separate prin "sep". Fiecare sub-sir delimitat
de "sep" devine un element in matrice. Este inversul lui "implode()".
<?php
$sir = 'Sir de test, cu subsiruri, separate de, virgula.';
$aray = explode(',', $sir);
print_r($aray);
=> virgula. )
?>

// Array ( [0] => Sir de test [1] => cu subsiruri [2] => separate de [3]

7. html_entity_decode("sir")
- Decodeaza entitatile html din "sir". E opusul lui "htmlentities()"
<?php
$sir = 'Sir de test, cu entitati &copy; &lt;b&gt;html&lt;/b&gt;.';
echo html_entity_decode($sir);
?>

// Sir de test, cu entitati <b>html</b>.

8. htmlentities("sir")
- Converteste toate caracterele specifice din sir in entitati HTML.
<?php
$sir = 'Sir de test, cu entitati " & - <b>html</b>.';
$sir = htmlentities($sir);
// $sir va deveni: Sir de test, cu entitati &quot; &amp; &lt;b&gt;html&lt;/b&gt;.
?>

9. htmlspecialchars_decode("sir")
- Converteste entitatile HTML, ce pot fi codificate cu "htmlspecialchars()", inapoi la forma de
caracter.
10. htmlspecialchars("sir")
- Converteste doar caracterele ghilimele, & < si > din "sir" in entitati HTML.
11. md5("sir")
- Codifica sirul cu algoritmul MD5, returnand un sir codat cu 32 de caractere.
<?php
$sir = 'www.marplo.net';
echo md5($sir);
?>

// 7760a752458ff3168ff1a2d0ded94082

12. rtrim("sir", 'caracters')


- Sterge din partea dreapta a sirului caracterele specificate la "caracters", care poate fi un
singur caracter sau un sir. Daca al doilea parametru nu e specificat, va sterge spatiile libere
din dreappta.
<?php
$sir = 'abc def gh89 ';
echo rtrim($sir, '89 ');
// abc def gh
echo rtrim($sir);
// abc def gh89
?>
13. sha1("sir")
- Similar cu "md5()", aceasta functie codifica sirul cu algoritmul SHA1 (US Secure Hash
Algorithm 1), returnand un sir codat cu 40 de caractere.
14. str_ireplace("old", "new", "sir")
- Inlocuieste in "sir" caracterele specificate la "old" cu cele de la "new", fara a tine cont de
majuscule sau litere mici. "old" si "new" pot fi si de tip Array.
<?php
$sir = 'Test sir, tutorial php, functii pt. siruri.';
echo str_ireplace('Tutorial', 'curs', $sir);

// Test sir, curs php, functii pt. siruri.

echo str_ireplace(array('siruri', 'sir'), 'string', $sir);


string.
?>

// Test string, tutorial php, functii pt.

14. str_replace("old", "new", "sir")


- Similar cu "str_ireplace()", inlocuieste in "sir" caracterele specificate la "old" cu cele de la
"new", dar este case-sensitive (tine cont de majuscule si litere mici). "old" si "new" pot fi si
de tip Array.
15. str_repeat("sir", nr)
- Returneaza un sir in cara parametrul "sir" e repetat de "nr" ori.
<?php
$sir = '=- ';
echo str_repeat($sir, 8);
?>

// =- =- =- =- =- =- =- =-

16. str_shuffle("sir")
- Amesteca aleator caracterele din "sir".
<?php
$sir = 'Site www.marplo.net/php-mysql';
echo str_shuffle($sir);
?>

// o.t-pwywpqewt/lahspmmSri .eln

17. str_split("sir", nr)


- Transforma "sir" in Array, impartind pentru fiecare element sub-siruri cu lungimea de "nr"
caractere. Daca "nr" nu e specifcat, fiecare caracter din sir va deveni un element in matrice.
<?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')
?>
18. str_word_count("sir")
- Returneaza numarul de cuvinte din sir.
<?php
$sir = 'Toate`s vechi si noi sunt toate';
echo str_word_count($sir);

// 7 (`s e considerat un cuvant separat deoarece apostroful nu

e considerat parte dintr-un cuvant)


echo str_word_count($sir, 0, '`');
// 6 (Asa include si apostroful (`) ca facand parte din
cuvant)
?>
19. strcasecmp("sir1", "sir2")
- Compara cele doua siruri date ca parametri, fara diferenta intre majuscule si litere mici.
Returneaza 0 daca sirurile sunt egale, < 0 daca "sir1" e mai mic decat "sir2" sau > 0 daca
"sir1" e mai mare decat "sir2"
<?php
$sir1 = 'Salut';
$sir2 = 'salut';
if (strcasecmp($sir1, $sir2) == 0) {
echo 'Sirurile sunt egale';
}
?>
20. strcmp("sir1", "sir2")
- Similar cu "strcasecmp()", diferenta fiind ca face o comparatie ce tine cont de majuscule si
litere mici.
21. strcspn("sir", 'car')
- Returneaza lungimea primului segment din "sir" ce nu contine nici un caracter specificat la
'car'
<?php
$sir = 'Salut tuturor, tineri si batrani';
echo strcspn($sir, 'tu');
?>

// 3 ('u' fiind gasit al patrule caracter in $sir)

22. strip_tags("sir")
- Sterge tag-urile HTML si PHP din "sir".
<?php
$sir = 'Exemplu cu <b>taguri</b> <h6>html</h6>';
echo strip_tags($sir);
?>

// Exemplu cu taguri html

23. stripslashes("sir")
- Returneaza "sir" fara caracterele backslashes adaugate. Inversul lui "addslashes()"

<?php
$sir = 'Exemplu cu \" stripslashes() \" \n';
echo stripslashes($sir);
?>

// Exemplu cu " stripslashes() " n

24. stripos("sir", "sub-sir")


- Returneaza pozitia de unde incepe "sub-sir" in "sir" (incepand de la 0), fara diferenta intre
litere mici si majuscule. Daca "sub-sir" nu e gasit, returneaza FALSE.
<?php
$sir = 'www.marplo.net';
echo stripos($sir, 'marplo');
?>

// 4

25. strpos("sir", "sub-sir")


- Returneaza pozitia de unde incepe "sub-sir" in "sir" (incepand de la 0), case-sensitive,
tinand cont de litere mici si majuscule. Daca "sub-sir" nu e gasit, returneaza FALSE.
26. stristr("sir", 'car')
- Returneaza tot sub-sirul din "sir", care incepe de la prima aparitie a lui 'car', fara diferenta
intre majuscule si litere mici. Daca nu e gasit 'car', returneaza FALSE.
<?php
$sir = 'www.marplo.net';
echo stristr($sir, 'mar');
?>

// marplo.net

27. strstr("sir", 'car')


- Returneaza tot sub-sirul din "sir", care incepe de la prima aparitie a lui 'car', case-sensitive
(cu deosebire intre majuscule si litere mici). Daca nu e gasit 'car', returneaza FALSE.
28. strlen("sir")
- Returneaza lungimea lui "sir" (numarul de caractere).
<?php
$sir = 'Tutorial PHP';
echo strlen($sir);
?>

// 12

29. strrchr("sir", "sub-sir")

- Returneaza bucata ramasa din "sir" incepand de la ultimul caracter din "sub-sir" gasit in
"sir". Functia e case-sensitive. Daca "sub-sir" nu se gaseste in "sir", returneaza FALSE.
<?php
$sir = 'Tutorial PHP, curs gratuit';
echo strrchr($sir, 'Hp');
diferit de P)
?>

// HP, curs gratuit (incepe de la H, deoarece 'p' nu e in $sir, fiind

30. strrev("sir")
- Inverseaza sir-ul.
<?php
$sir = 'Tutorial PHP, curs gratuit';
echo strrev($sir);
?>

// tiutarg sruc ,PHP lairotuT

31. strtolower("sir")
- Transforma toate literele din sir in litere mici.
<?php
$sir = 'Tutorial PHP, curs ONLINE gratuit';
echo strtolower($sir);
?>

// tutorial php, curs online gratuit

32. strtoupper("sir")
- Transforma toate literele din sir in majuscule (litere mici).
<?php
$sir = 'Tutorial PHP, curs ONLINE gratuit';
echo strtoupper($sir);
?>

// TUTORIAL PHP, CURS ONLINE GRATUIT

33. substr_count("sir", "sub_sir")


- Returneaza numarul de cate ori "sub_sir" se gaseste in "sir". Functia este case-sensitive.
<?php
$sir = 'Un test functii php, test pentru siruri.';
echo substr_count($sir, 'test');
?>

// 2;

34. substr("sir", start, lungime)


- Returneaza portiunea din "sir" care incepe de la "start", cu lungimea de caractere "lungime".
Daca parametrul "lungime" nu e specificat, se considera pana la sfarsitul sirului.
<?php
$sir = 'Tutoriale, cursuri, scripturi php.';
echo substr($sir, 11, 18);
?>

// cursuri, scripturi

35. trim("sir", 'del')


- Sterge din marginile sirului caracter-ul (caracterele) specificate la "del". Daca al doilea
parametru, "del", nu e adaugat, sterge spatiile libere din marginile sirului.
<?php
$sir = '--Tutoriale php--';
echo trim($sir, '-');
?>

// Tutoriale php

36. ucfirst("sir")
- Transforma primul caracter din "sir" in litera mare.
<?php
$sir = 'abc def';
echo ucfirst($sir);
?>

// Abc def

37. ucwords("sir")
- Transforma primul caracter al fiecarui cuvant din "sir" in litera mare.
<?php
$sir = 'marplo.net, web site';
echo ucwords($sir);
?>

// Marplo.net, Web Site

38. nl2br("sir")
- Inlocuieste caracterele de rand nou (\r\n si \n) cu tagul HTML BR. Functie utila cand sirul e
preluat dintr-un textarea.
<?php
$sir = "Sir test \r\n preluat dintr-un \r\n camp textarea.";

$sir = nl2br($sir);
textarea."
?>

// Acum $sir va fi "Sir test <br /> preluat dintr-un <br /> camp

39. wordwrap("sir", lungime, "sep", true)


- Imparte "sir" la numarul de caractere specificat de "lungime", separand prin "sep" partile
astfel obtinute. Functie utila cand se doreste scurtarea liniilor sau cuvintelor prea lungi. Daca
"true" nu e specificat, va imparti doar randurile, lasand cuvintele neafectate.
<?php
$sir = 'Cuvaaaaaaaaaannnnnnnnnnnntttttttt, cam prea llluuuuuuunnnnnnnnggggggg.';
$sir1 = wordwrap($sir, 20, '<br />');
// Acum $sir1 va fi
'Cuvaaaaaaaaaannnnnnnnnnnntttttttt,<br /> cam prea<br />
llluuuuuuunnnnnnnnggggggg.'
$sir2 = wordwrap($sir, 20, '<br />', true);
// Acum $sir2 va fi
'Cuvaaaaaaaaaannnnnnn<br />nnnnntttttttt, cam <br />prea <br
/>llluuuuuuunnnnnnnnggg<br />gggg.'
?>

Lucrul cu siruri (2)

nvatati sa maniupulati sirurile folosind diferite functii

Invatati sa lucrati cu subsiruri

1. Manipularea sirurilor
PHP contine peste 70 de functii care lucreaza cu siruri. Aceasta sectiune descrie cateva functii
pe care este posibil sa le utilizati frecvent. Aceste functii va permit sa obtineti lungimea unui
sir, sa eliminati dintr-un sir caracterele de tip spatiu alb, sa convertiti caracterele unui sir n
majuscule sau minuscule si altele.
- Functia strlen() returneaza lungimea sirului specificat ca argument al functiei.
Iata un exemplu simplu de utilizare a functiei strlen():
<?php
$s = "Acesta este un sir";
$n = strlen($s);
echo "<br /> Lungimea sirului este: $n";
?>
Scriptul de mai sus va afisa:
Lungimea sirului este: 18
- Numeroase functii PHP va permit sa eliminati caracterele de tip spatiu alb de la una sau
ambele extremitati ale unui sir.
Iata un exemplu; care prezinta modul de operare al acestor functii:
<?php
$s = "
Acesta este un sir
";
$n = strlen($s);

echo "<br /> Lungimea sirului este: $n";


$trim =chop($s);
// Elimina spatiile albe din partea dreapta a sirului
$n = strlen($trim);
echo "<br /> Lungimea sirului este: $n";
$trim = ltrim($s);
// Elimina spatiile albe din partea stanga a sirului
$n = strlen($trim);
echo "<br /> Lungimea sirului este: $n";
$trim = rtrim($s);
// Elimina spatiile albe din partea dreapta a sirului
$n = strlen($trim);
echo "<br /> Lungimea sirului este: $n";
$trim = trim($s);
// Elimina spatiile albe din ambele parti a sirului
$n = strlen($trim);
echo "<br /> Lungimea sirului este: $n";
?>
Scriptul de mai sus va afisa:
Lungimea sirului este: 36
Lungimea sirului este: 27
Lungimea sirului este: 27
Lungimea sirului este: 27
Lungimea sirului este: 18
Urmatorul tabel prezinta Functiile PHP de eliminare a caracterelor din siruri:
Functii PHP de eliminare a caracterelor din siruri
Functie

Descriere

chop(s)

- Returneaza valoarea lui 's', eliminnd spatiile albe de la


extremitatea din dreapta a sirului. Similar cu rtrim()

ltrim(s)

- Returneaza valoarea lui 's', eliminnd spatiile albe de la


extremitatea din stnga a sirului

rtrim(s)

- Returneaza valoarea lui 's', eliminnd spatiile albe de la


extremitatea din dreapta a sirului. Similar cu chop()

trim(s)

- Returneaza valoarea lui 's', eliminnd spatiile albe de la ambele


extremitati

- Functia strtoupper() returneaza valoarea argumentului, convertita la majuscule.


- Functia strtolower{) returneaza valoarea argumentului, convertita la minuscule.
- Functia ucfirst{) returneaza valoarea argumentului, cu primul caracter din sir majuscula.
Nici una din functii nu modifica valoarea argumentului, valoarea convertita este cea returnata
ca rezultat al functiei.
Iata un scurt exemplu, care prezinta modul de operare a acestor functii:
<?php
$s = "abcdefg";
$rezultat = strtoupper($s);
$rezultat2 = ucfirst($s);
echo "<br />strtoupper('$s'): $rezultat";

echo "<br />ucfirst('$s'): $rezultat2";


$s = "ABCDE";
$rezultat = strtolower($s);
echo "<br />strtolower('$s'): $rezultat";
?>
Scriptul de mai sus va afisa:
strtoupper(abcdefg): ABCDEFG
ucfirst(abcdefg): Abcdefg
strtolower(ABCDE): abcde

2. Compararea sirurilor
PHP furnizeaza patru functii care sunt deosebit de utile pentru compararea sirurilor. Aceste
functii sunt enumerate n tabelul urmator.
Fiecare functie returneaza o valoare al carei semn determina rezultatul comparatiei; nu
trebuie sa ncercati sa interpretati valoarea returnata efectiva.
Functii PHP de comparatie ntre siruri
Functia

Descriere

strcasecmp(s1, s2)

- Executa o comparatie fara sensibilitate la diferenta ntre majuscule si


minuscule. Returneaza o valoare mai mica dect zero daca 's1' este mai
mic dect 's2', o valoare mai mare dect zero daca 's1' este mai mare
dect 's2', respectiv 0 n celelalte cazuri.

strcmp(s1, s2)

- Executa o comparatie cu sensibilitate la diferenta ntre majuscule si


minuscule. Returneaza o valoare mai mica dect zero daca 's1' este mai
mic dect 's2', o valoare mai mare dect zero daca 's1' este mai mare
dect 's2', respectiv 0 n celelalte cazuri.

- Executa o comparatie fara sensibilitate la diferenta ntre majuscule si


minuscule. La comparatie sunt luate n considerare un numar de 'n'
strncasecmp(s1, s2, n) caractere. Returneaza o valoare mai mica dect zero daca 's1' este mai
mic dect 's2', o valoare mai mare dect zero daca 's1' este mai mare
dect 's2', respectiv 0 n celelalte cazuri.

strncmp(s1,s2, n)

- Executa o comparatie cu sensibilitate la diferenta ntre majuscule si


minuscule. La comparatie sunt luate n considerare un numar de 'n'
caractere. Returneaza o valoare mai mica dect zero daca 's1' este mai
mic dect 's2', o valoare mai mare dect zero daca 's1' este mai mare
dect 's2', respectiv 0 n celelalte cazuri.

Iata un scurt exemplu care prezinta modul de utilizare a acestor functii:


<?php
$s1 = "abcd";
$s2 = "ABCE";
$rezultat = strcasecmp($s1, $s2);
echo "<br /> Functia strcasecmp a returnat $rezultat";
$rezultat = strcmp($s1, $s2);
echo "<br /> Functia strcmp a returnat $rezultat";
$rezultat = strncasecmp($s1, $s2, 3);

echo "<br /> Functia strncasecmp returnat $rezultat";


$rezultat = strncmp($s1, $s2, 3);
echo "<br /> Functia strncmp a returnat $rezultat";
?>
Scriptul de mai sus va afisa:
Functia strcasecmp a returnat -1
Functia strcmp a returnat 1
Functia strncasecmp returnat 0
Functia strncmp a returnat 1
Datele de iesire va arata ca functia strcasecmp() a identificat sirul "abcd" ca fiind mai mic
dect "ABCE", in schimb, functia strcmp(), la fel ca si functia strncmp(), a identificat sirul
"abcd" ca fiind mai mare dect "ABCE". Aceasta s-a ntmplat deoarece literele minuscule au
n secventa ASCII o pozitie superioara literelor scrise cu majuscule; litera 'A' are valoarea
ASCII 65, iar litera 'a' are valoarea ASCII 97.
De asemenea, datele de iesire arata ca functia strncasecmp() a identificat sirul "s1" ca egal
cu "s2", deoarece au fost luate in considerare numai primele 3 caractere.

3. Descoperirea si extragerea sub-sirurilor


PHP include numeroase functii care gasesc si extrag sub-tiruri, adica parti dintr-un sir. Cele
mai importante functii de acest gen sunt rezumate n tabelul urmator:
Functii PHP de extragere si cautare
Functie

Descriere

strchr(s1,s2)

- Returneaza toate sirurile 's1' de la prima aparitie a sirului 's2' si pna la


sfrsit. Daca 's1' nu este gasit, functia returneaza FALSE. Functia
strstr() executa aceeasi operatie

stristr(s1,s2)

- Returneaza toate sirurile 's1' de la prima aparitie a sirului 's2' si pna la


sfrsit. Daca 's1' nu este gasit, functia returneaza FALSE. Sirurile 's1' si
's2' sunt comparate fara a se tine cont daca literele sunt majuscule sau
minuscule

strpos(s1,s2)

- Returneaza pozitia (nr. intreg) a primei aparitii a sirului 's2' n 's1'.Daca


's2' nu este gasit, functia returneaza FALSE

strrchr(s1,s2)

- Returneaza toate sirurile 's1' de la ultima aparitie a sirului 's2' si pna la


sfrsit. Daca 's1' nu este gasit, functia returneaza FALSE. La comparatie
este folosit numai primul caracter al sirului 's2'

strstr(s1,s2)

- Returneaza toate sirurile 's1' de la prima aparitie a sirului 's2' si pna la


sfrsit. Daca 's1' nu este gasit, functia returneaza FALSE. Functia
strchr() executa aceeasi operatie

- Returneaza portiunea sirului 's' specificata de indexul ntreg 'start'


substr(s, starf)
respectiv de indexurile 'start' si 'lung'. Prima pozitie a sirului este pozitia
substr(s, start, lung)
0.
Iata un exemplu simplu, care prezinta modalitatile de utilizare a mai multor functii de
extragere si cautare:

<?php
$s = "the cat on the mat near the bat";
$b = "at";
$n = strpos($s, $b);
echo "<br /> strpos(\"$s\", \"$b\"): $n";
$s = "the cat on the mat near the bat";
$b = "at";
$n = strchr($s, $b);
echo "<br /> strchr(\"$s\", \"$b\"): $n";
$s = "the cat on the mat near the bat";
$b = "at";
$n = strrchr($s, $b);
echo "<br /> strrchr(\"$s\", \"$b\"): $n";
$s = "the cat on the mat near the bat";
$rezultat = substr($s, 4, 3);
echo "<br /> substr(\"$s\", 4, 3): $rezultat";
?>
Studiati cu atentie scriptul si tabelul de mai sus pentru a intelege datele de iesire. Iata si
datele de iesire:
strpos("the cat on the mat near the bat", "at"): 5
strchr("the cat on the mat near the bat", "at"): at on the mat near the bat
strrchr("the cat on the mat near the bat", "at"): at
substr("the cat on the mat near the bat", 4, 3): cat
O potentiala dificultate n utilizarea functiei strpos() consta n aceea ca poate fi greu de
sesizat diferenta dintre valoarea returnata 0, care arata ca sub-sirul a fost gasit n pozitia
initiala a sirului, si valoarea returnata FALSE, care arata ca sub-sirul nu a fost gasit.
Iata un scurt exemplu care indica un mod adecvat de testare a valorii returnate de functia
strpos(), astfel nct sa se poata face diferenta ntre cele doua rezultate:
<?php
$poz = strpos($s1, $s2);
if ($poz == FALSE) {
echo "<br /> sub-sirul nu a fost gasit";
}
?>
Procedeul prezentat foloseste operatorul de identitate (==) pentru a determina daca valoarea
returnata este identica - nu doar aritmetic egala - cu valoarea FALSE.

4. nlocuirea unui sub-sir


O operatie frecvent folosita n programare consta n gasirea unui sub-sir si nlocuirea sa cu o
valoare noua. PHP are doua functii deosebit de utile pentru asemenea operatii, si anume
str_replace() si substr_replace().
Mai jos sunt prezentate pe scurt aceste functii.
Remarcati ca functia str_replace() noteaza sub-sirul prin valoarea sa, n timp ce functia
substr_replace() noteaza sub-sirul prin pozitia sa n interiorul sirului subiect.

str_replace(cauta, nlocuire, subiect) - Se cauta n sirul 'subiect' sub-sirul 'cauta';


daca sub-sirul este gasit, returneaza valoarea 'subiect', nlocuindu-se prima aparitie a
sirului 'cauta' cu 'nlocuire'.

substr_replace(subiect, nlocuire, start, lungime) - Returneaza valoarea 'subiect',


nlocuind sub-siruf care ncepe de la 'start' si avnd lungimea 'lungime' cu sirul
'nlocuire'.

Iata un exemplu care prezinta modul de utilizare a acestor functii:


<?php
$subiect = "the cat on the mat near the bat";
echo "<br /> Subiect : $subiect";
$cauta = "cat";
$inlocuire = "DOG";
$rezultat = str_replace($cauta, $inlocuire, $subiect);
echo "<br /> str_replace : $rezultat";
$inlocuire = "CAT";
$rezultat = substr_replace($subiect, $inlocuire, 4, 3);
echo "<br /> substr_replace : $rezultat";
?>
Iata si rezultatul exemplului :
Subiect : the cat on the mat near the bat
str_replace : the DOG on the mat near the bat
substr_replace : the CAT on the mat near the bat

Expresii regulate, regex

Invatati sa scrieti si sa utilizati expresii regulate

Invatati sa verificati sirurile in functie de expresii regulate

1. Scrierea expresiilor regulate (Regex)


Expresiile regulate (regex) sunt un sir de caractere sablon care descriu multimea cuvintelor
posibile care pot fi formate cu acele caractere, respectand anumite reguli. Aceste expresii
regulate folosesc paranteze (rotunde, patrate, acolade) prin care formeaza regulile de formare
a cuvintelor. Utilitatea cea mai frecventa a unei expresii regulate consta n a recunoaste daca
un sir contine sau nu cuvinte sau sub-sir care pot fi formate prin expresia regulata respectiva.

De ex.: expresia m[ai]r poate forma cuvintele: mar si mir

Sa presupunem ca doriti sa specificati un sir care poate include orice vocala. Puteti face
aceasta folosind expresia regulata [aeiou]. Prin includerea valorilor posibile ntre paranteze,
formati o expresie regulata echivalenta cu formularea "alege oricare din aceste valori". Daca
doriti sa permiteti si utilizarea, majusculelor, puteti scrie [aeiouAEIOU].
Sa presupunem ca doriti sa specificati un sir care poate include orice caracter scris cu

minuscule. Puteti scrie: [abcdefghijklmnopqrstuvwxyz]. Sau puteti folosi o forma mai


compacta [a-z], unde prin cratima se ntelege "o serie de caractere consecutive".
Sa presupunem ca doriti sa specificati intr-o expresie regulata sirurile "sat", "mat" si "lat".
Pentru aceasta, aveti nevoie de expresia regulata [sml]at. Semnificatia acestei expresii
regulate este urmatoarea: "alege oricare din literele 's', 'm' si 'l' si scrie dupa litera respectiva
literele 'at'".
Daca un accent circumflex (^) este primul simbol mentionat ntre parantezele drepte, acesta
are ca efect inversarea semnificatiei expresiei regulate plasate ntre paranteze.

De exemplu, expresia regulata [^a-z] corespunde oricarui caracter care nu este o litera
mica.

Pentru a specifica faptul ca o expresie regulata se poate repeta, expresia regulat va fi urmata
de o pereche de acolade, care includ limitele superioara si inferioara ale repetitiei.

De exemplu, expresia regulata [aeiou]{1,4} corespunde sirurilor care pot contine intre
1 si 4 vocale.

Pentru a specifica repetarea mai multor parti ale unei expresii regulate, includeti partile
respective ntre paranteze rotunde.

De exemplu, expresia regulata ([sml]at){1 ,2} corespunde unui numar de una sau
doua repetari ale oricaruia dintre sirurile "sat", "mat" sau "lat".

Pentru a simplifica scrierea de reguli intr-o expresie regulata se folosesc anumite caractere
"speciale"
Sa presupunem ca doriti sa reprezentati o nmultire intre doua numere, puteti obtine ceva de
genul [0-9]*[0-9]. Totusi, aceasta expresie regulata nu are semnificatia dorita, deoarece '*'
este un factor de repetitie, nu un caracter dintr-un sir. Pentru a dezactiva semnificatia speciala
a caracterului '*', trebuie sa-l prefixati cu un caracter backslash: [0-9]\*[0-9].
Pentru a specifica faptul ca o expresie regulata corespunde numai unui sub-sir care include
anumite caractere la inceput, prefixati expresia regulata cu un accent circumflex "^". De
exemplu, expresia regulata ^[sml]at corespunde sub-sirurilor "sat", "mat" sau "lat" numai
daca acestea apar la nceputul sirului subiect.
Similar, pentru a arata ca o expresie regulata corespunde numai unui sub-sir care include
anumite caractere la sfarsit, anexati la expresia regulata un simbol al dolarului "$". De
exemplu, expresia regulata [sml]at$ corespunde sirurilor "sat", "mat" sau "lat" numai daca
acestea apar la sfrsitul sirului subiect.
Iata o lista cu mai multe caractere speciale si rolul lor in expresiile regulate:

^ - indica inceputul liniei

$ - indica sfarsitul liniei

. - (punct) orice caracter

[] - un caracter dintre cele din paranezele patrate

[^] - orice caracter, in afara celor din paranezele patrate

\ - scoate din contextul formari expresiei caracterul care urmeaza

+ - caracterul (expresia) anterior acestui semn se poate repeta odata si de cate ori e
posibil (de la 1 la infinit)

* - caracterul (expresia) anterior acestui semn se poate repeta de cate ori e posibil
sau niciodate (de la 0 la infinit)

? - caracterul (expresia) anterior acestui semn se poate repeta ce mult odata

<> - un cuvant intreg

(|) - lista de optiuni SAU

{m, n} - repetarea expresiei de la "m" la "n" ori

Iata cateva exemple de expresii regulate:

(.*) - Reprezinta toate caracterele (prin .) repetate de cate ori e posibil (dat de *)

<salut> - Cuvantul "salut"

(ci|co)tim - Reprezinta "citim" si "cotim"

^The .* hack$ - Sirurile care incep cu "the " si se sfarsesc cu " hack"

^www.[a-z0-9]+.ro$ - Reprezinta sirurile "www.---.ro" unde '---' poate fi orice litera


sau cuvant ce contine litere mici si numere

(^-\+[0-9]*) - Orice numar care incepe cu "-" sau "+"

^([a-zA-Z0-9]+[a-zA-Z0-9._%-]*@([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,4})$ - Expresie
regulata pentru adrese de e-mail

2. Utilizarea expresiilor regulate


PHP include numeroase functii care lucreaza cu expresii regulate. Tabelul urmator descrie
unele din aceste functii.
Functii PHP pentru expresii regulate
Functie

Descriere

ereg

- Executa o identificare cu o expresie regulata (anulata incepand cu


versiunea PHP 5.3)

- nlocuieste un sub-sir care corespunde unei expresii regulate (anulata


ereg_replace incepand cu versiunea PHP 5.3 - in locul ei poate fi folosita
preg_replace)
eregi

- Executa o identificare cu o expresie regulata insensibila la diferenta


ntre majuscule si minuscule (anulata incepand cu versiunea PHP 5.3)

- nlocuieste un sub-sir care corespunde unei expresii regulate insensibile


eregi_replace la diferenta ntre majuscule si minuscule (anulata incepand cu
versiunea PHP 5.3 - in locul ei poate fi folosita preg_replace)
preg_replace

- Cauta in sir caracterele sau sablonul care se potriveste cu expresia


regulata din functie si o inlocuieste cu alte valori date

split

- Divide un sir ntr-un tablou folosind o expresie regulata (anulata


incepand cu versiunea PHP 5.3 - in locul ei poate fi folosita
preg_split)

sql_regcase

- Creaza o expresie regulata, insensibila la diferenta ntre majuscule si


minuscule, dintr-un sir care contine o expresie regulata (anulata
incepand cu versiunea PHP 5.3)

In continuare este dat un exemplu cu functia ereg().


Forma simpla a functiei ereg() preia doua argumente: un sir care contine o expresie regulata
si un sir subiect. Functia returneaza TRUE daca expresia regulata corespunde unui sub-sir al
sirului subiect; n caz contrar, returneaza FALSE.
- Iata un exemplu:
<?php
$model = "[sml]at";
$subiect = "La noi in sat";
$rezultat = ereg($model, $subiect);
if ($rezultat) {
echo 'Model inclus in subiect';
}
?>
- In acest script, variabila $rezultat primeste valoarea TRUE, deoarece sirul 'subiect' contine
sub-sirul "sat", care corespunde expresiei regulate.
Pentru verificare, instructiunea "if" verifica daca "$resultat" este TRUE si in caz afirmativ
executa comanda dintre acolade, "echo" care afiseaza 'Model inclus in subiect'.
- Pentru a verifica daca un sir contine numai litere si numere, puteti folosi direct functia
ctype_alnum()
- Deoarece functiile "ereg" au fost anulate incepand cu versiunea PHP 5.3, este indicat sa nu
le mai folositi, cunoasterea lor e necesara daca le intalniti in scripturi mai vechi. Acestea au
fost inlocuite cu functii "preg_" (Perl-Compatible). Mai multe detalii si exemple despre
aceste functii gasiti in manualul Expresii regulate (compatibile Perl.
Expresiile regulate compatigile Perl se adauga intre caractere "/". De exemplu sablonul ([az0-9]+) se foloseste /([a-z0-9]+)/.

Iata un exemplu cu preg_grep(), aceasta returneaza un array compus din elementele unei
matrice care contin sablonul, expresia regulata cautata. Acest exemplu va returna doar acele
elementele dintr-o matrice care contin in ele sub-sirurile "casa" sau "masa".
<?php
$matrice = array('123casa', 'abc masa', '12-xy', '$asa_0/', '123abc casa');
$filtru = preg_grep("/([cm]asa)/", $matrice);
print_r ($filtru);
// Afiseaza elementele matricei
?>
- Variabila "$matrice" contine un Array cu mai multe elemente cu siruri.
- In variabila $filtru e preluat rezultatul functiei "preg_grep()" a carei prim parametru este un
sablon de expresie regulata (adaugata intre ghilimele duble), iar al doilea este matricea in care
e cautat sablonul.
- Cu functia "print_r()" se va afisa elementele matricei obtinute in variabila "$filtru".
Rezultatul afisat e urmatorul:
Array ( [0]=>123casa [1]=>abc masa [4]=>123abc casa )
- Un ultim exemplu util, folosim functia preg_replace() si o expresie regulata pentru a
elimina caracterelor speciale dintr-un sir
<?php
$sir = 'Sir& ce contine*a <caractere: speciale? /in co@nte>xt';
$sir = preg_replace("/([^ A-Za-z0-9_]+)/", "", $sir);
echo $sir;
?>
In acest exemplu avem un sir (stocat in variabila $sir) ce contine diferite caractere mai putin
uzuale.
Functia "preg_replace", impreuna cu expresia regulata "/(^ A-Za-z0-9_]+)/", pastreaza in $sir
numai literele, cifrele, caracterul '_' si spatiu.
Instructiunea "echo" va afisa urmatorul rezultat:
Sir ce continea caractere speciale in context

Utilizarea variabilelor cookie

nvatati care este modul de functionare a variabilelor cookie

nvatati sa creati, sa obtineti accesul la variabilele cookie si sa le stergeti

nvatati sa specificati optiunile dintr-o variabila cookie

1. Accesul la variabilele cookie


Valorile majoritatii variabilelor dispar atunci cnd scriptul PHP care le contine si ncheie
executia. Spre deosebire de acestea, valorile variabilelor cookie se pot pastra un timp
indefinit. Pentru ca valorile lor sa se poata pastra, browserul utilizatorului stocheaza
variabilele cookie n unitatea de hard-disc a utilizatorului.
Majoritatea navigatoarelor de Web au posibilitatea sa activeze/dezactiveze cookie-urile.
Trebuie sa tineti cont de acest lucru cand doriti sa folositi cookie in scripturile dv., totusi,

comform statisticilor, in jur de 1% dintre utilizatori au optiunea cookie dezactivata.


PHP pune la dispozitia utilizatorilor functii pentru transmiterea cookie-urilor de la server la
browser, si modalitati de citire a cookie-urilor.
Pentru a citi cooki-urile puteti utiliza variabila PHP de tip tablou $_COOKIE sau
$_HTTP_COOKIE_VARS, acestea contin numele si valoarea fiecarei variabile cookie
curenta. Daca doriti sa obtineti acces la acest tablou, puteti folosi un program ca urmatorul:

Foreach($_COOKIE as $nume => $valoare)


echo "<br /> $nume => $valoare";

- $_COOKIE['numeCookie'] este o variabila super-globala, putand fi accesata si in functii


fara a mai specifica "global".

2. Crearea unei variabile cookie


Un lucru important de retinut este faptul ca cookie-urile trebuie sa fie transmise la browser
inaintea oricarei alte informatii.
Pentru a evita problemele, asigurati-va ca un script PHP care stabileste o valoare a unei
variabile cookie este plasat n partea superioara a fisierului, fara caractere de tip spatiu alb
care sa-l preceada. De asemenea, stabiliti valoarea variabilei cookie nainte de a executa o
instructiune 'echo' sau o alta instructiune PHP care trimite browserului date de iesire.
Pentru a crea o variabila cookie, folositi functia setcookie(), care are urmatoarea forma:

setcookie(numeCookie, valoare, expirare)

- Argumentul 'numeCookie' specifica numele variabilei cookie, iar argumentul 'valoare'


specifica valoarea variabilei.
- Valoarea variabilei cookie este automat transmisa "urlencode" si cand este primita e
automat decodata.
- Argumentul 'expirare' indica momentul expirarii variabilei cookie; dupa ora specificata,
variabila cookie nu mai este accesibila.
n general, este convenabil sa se specifice momentul expirarii folosind functia time(), care
returneaza intervalul de timp (exprimat n secunde) scurs de la 1 ianuarie 1970. Puteti adauga
o valoare de tip decalaj (offset), care specifica intervalul de timp pe durata caruia variabila
cookie trebuie sa fie accesibila.
Folosind aceasta functie se pot transmite mai multe cookie-uri succesiv; protocoalele Web
limiteaza insa la maximum 20 numarul cookie-urilor ce pot fi trimise aceluiasi utilizator.
De exemplu, sa luam n considerare urmatoarea instructiune:

setcookie("fruct", "banana", time()+3600);

Aceasta instructiune creeaza o variabila cookie denumita 'fruct', care are valoarea 'banana'.
Variabila cookie va fi disponibila timp de o ora (3600 secunde) de la crearea sa.
Daca preferati, puteti specifica momentul expirarii folosind functia mktime(). Aceasta functie
are urmatoarea forma:

mktime(ore, minute, secunde, luna, zi, an)

De exemplu, urmatoarea instructiune creeaza o variabila cookie care expira la o secunda dupa
miezul noptii primei zile a anului 2009:

Setcookie("fruct", "banana", mktime(0, 0, 1, 1, 1, 2009));

3. Stergerea unei variabile cookie


Deoarece o variabila cookie are o data de expirare, aceasta va fi stearsa automat la un
oarecare interval de timp dupa crearea sa. Totusi, puteti sterge o variabila cookie imediat.
Pentru aceasta, fixati momentul expirarii variabilei cookie la un moment de timp in trecut.
De exemplu, pentru a sterge o variabila cookie denumita 'fruct', puteti folosi urmatoarea
instructiune:

setcookie("fruct", "", time()-3600);

Aceasta instructiune stabileste timpul de expirare cu o ora (3600 de secunde) n urma.


Remarcati ca valoarea variabilei cookie este exprimata sub forma unui sir vid (""); din
moment ce variabila cookie nu va mai fi disponibila, valoarea sa nu mai are importanta.

4. Specificarea accesului la o variabila cookie si alte optiuni


Functia setcookie() poate prelua maximum sase argumente.
Iata formatul complet al functiei setcookie():

setcookie(nume, valoare, expirare, cale, domeniu, secure)

Argumentele 'nume', 'valoare' si 'expirare' au fost descrise n sectiunea precedenta.


- Argumentul 'cale' va permite sa specificati calea URL asociata variabilei cookie. n mod
prestabilit, variabila cookie este disponibila pentru scripturile din catalogul care contine
scriptul n care a fost configurata variabila respectiva, precum si pentrul scripturile din subcataloagele aferente catalogului respectiv. n particular, scripturilor din cataloagele parinte ale
catalogului care contine scriptul nu li se permite accesul prestabilit la variabila cookie.
Pentru a pune variabila cookie la dispozitia scripturilor dintr-un anumit catalog si cataloagele
sale, specificati o valoare a argumentului 'cale'. De exemplu, pentru a pune variabila cookie la
dispozitia ntregului arbore de cataloage, specificati " /" ca valoare a argumentului cale;
pentru a face variabila cookie disponibila n catalogul "/test" si n sub-cataloagele sale,
specificati "/test/" ca valoare a argumentului 'cale'.
- Daca nu este specificat nici un argument 'domeniu', o variabila cookie este disponibila
numai pentru scripturile din domeniul Web care a creat variabila respectiva. Argumentul
'domeniu' va permite sa specificati numele de domeniu asociat unei variabile cookie. n
consecinta, variabila cookie va fi disponibila numai pentru siturile Web din cadrul domeniului
specificat. De exemplu, sa presupunem ca un script din serverul Web
http://www.subdomeniu.domeniu.com creeaza o variabila cookie. n mod prestabilit, variabila
cookie este disponibila numai pentru gazda respectiva. Cu toate acestea, puteti face variabila
cookie disponibila pe ntreg domeniul 'subdomeniu.domeniu.com', specificnd
"subdomeniu.domeniu.com" ca valoare a argumentului 'domeniu'.
- Argumentul 'secure' este o valoare ntreaga, care specifica daca variabila cookie trebuie
trimisa prin intermediul unei conexiuni sigure (HTTPS). Specificati valoarea l pentru a

mpiedica transmiterea variabilei cookie n cazul n care conexiunea nu este sigura; pentru a
permite transmiterea variabilei cookie prin conexiuni HTTP obisnuite, specificati valoarea 0.

Lucrul cu fisiere (1)

Invatati sa obtineti atributele unui fisier

Invatati despre privilegiile unui fisier si utilizarea acestora

Invatati sa deschideti si sa inchideti fisiere

1. Obtinerea atributelor unui fisier


Privilegiile asociate unui fisier sau unui catalog determina operatiile pe care le poate executa
un utilizator cu fisierul sau catalogul respectiv.
Pentru a adauga un fisier intr-un director, folosind PHP, trebuie sa aveti permisiunea de
scriere in acel director, de asemenea, pentru a adauga date intr-un fisier, trebuie sa aveti
permisiunea de scriere in fisierul respectiv.
Aceste permisiuni sunt date (configurate) de administratorul sistemului respectiv.
PHP furnizeaza numeroase functii care va permit sa obtineti informatii care descriu un fisier.
Tabelul urmator rezuma cele mai cunoscute dintre aceste functii.
Functii PHP pentru obtinerea atributelor unui fisier
Functie

Descriere

file_exists()

- Returneaza TRUE daca fisierul specificat exista, respectiv FALSE n caz


contrar

fileatime()

- Returneaza timpul de acces la fisier sub forma de amprenta de timp UNIX.

filectime()

- Returneaza timpul de modificare al i-nodului (structura de date care contine


informatii despre fisiere UNIX - N. T.) sub forma de amprenta de timp
UNIX.

filegroup() - Returneaza identificatorul numeric al grupului care detine fisierul


filemtime()

- Returneaza momentul de timp al modificarii fisierului sub forma de


amprenta de timp UNIX

fileowner() - Returneaza identificatorul numeric de utilizator al fisierului


fileperms() - Returneaza permisiunile fisierului
filesize()

- Returneaza dimensiunea fisierului, n octeti

filetype()

- Returneaza tipul fisierului, n speta "fifo", "char", "dir", "block", "link",


"file" sau "unknown"

is_dir()

- Returneaza TRUE daca directorul specificat exista; n caz contrar,


returneaza FALSE

is_file()

- Returneaza TRUE daca fisierul specificat exista; n caz contrar, returneaza


FALSE

is_readable()

- Returneaza TRUE daca fisierul specificat exista si poate fi citit; n caz


contrar, returneaza FALSE

is_writable()

- Returneaza TRUE daca fisierul specificat exista si se poate scrie n acel


fisier; n caz contrar, returneaza FALSE

Functiile fileowner() si filegroup() returneaza fiecare un identificator numeric; puteti


converti identificatorul numeric ntr-un sir prin invocarea functiei posix_getpwuid() cu un
identificator de utilizator, respectiv a functiei posix_getgrgid() cu un identificat de grup.
Acestea returneaza informatii despre identificatorul precizat.
Iata un exemplu in care puteti vedea, si intelege mai bine, cum sunt folosite functiile
rezentate in tabelul anterior (fisierul 'test.txt' care va fi folosit de functii se afla in acelasi
director cu scriptul php):
<?php
$filename = "test.txt";
$result = file_exists($filename);
echo "<br /> file_exists(): $result";
$result = fileowner($filename);
echo "<br /> fileowner(): $result";
$result = filegroup($filename);
echo "<br /> filegroup(): $result";
$result = filetype($filename);
echo "<br /> filetype(): $result";
$result = filesize($filename);
echo "<br /> filesize(): $result";
$result = fileatime($filename);
$result = date("m/d/Y H:i", $result);
echo "<br /> fileatime(): $result";
$result = filectime($filename);
$result = date("m/d/Y H:i", $result);
echo "<br /> filectime(): $result";
$result = filemtime($filename);
$result = date("m/d/Y H:i", $result);
echo "<br /> filemtime(): $result";
$result = fileperms($filename);
$result = decoct($result);
echo "<br /> fileperms(): $result";
$result = is_file($filename);
echo "<br /> is_file(): $result";
$result = is_dir($filename);

echo "<br /> is_dir(): $result";


$result = is_readable($filename);
echo "<br /> is_readable(): $result";
$result = is_writable($filename);
echo "<br /> is_writable(): $result";
?>
Datele de iesire ale exemplului sunt urmatoarele
file_exists(): 1
fileowner(): 0
filegroup(): 0
filetype(): file
filesize(): 5
fileatime(): 08/28/2008 00:00
filectime(): 08/28/2008 10:49
filemtime(): 08/28/2008 11:32
fileperms(): 100666
is_file(): 1
is_dir():
is_readable(): 1
is_writable(): 1
- O lista cu mai multe functii utile in lucrul cu fisiere gasiti la pagina -> Functii pentru
fisiere si directoare.

2. Privilegii de fisier
Privilegiile asociate unui fisier (sau director) determina operatiile pe care utilizatorii le pot
efectua cu fisierul (sau directorul) respectiv. =
Privilegiile sunt date sub forma a trei grupuri alcatuite din cte trei caractere fiecare; cu alte
cuvinte, trei triade. Prima triada indica privilegiile acordate posesorului fisierului. Cea de-a
doua triada indica privilegiile acordate membrilor grupului posesor al fisierului. Cea de-a
treia triada indica privilegiile acordate altor utilizatori.
Cele 3 caractere care alcatuiesc un grup sunt reprezentate, in sistemele UNIX, prin
urmatoarele tri litere: 'r', 'w' si 'x'; acestea reprezinta:

r - fisierul poate fi citit


w - se poate scrie n fisier
x - continutul fisierului poate fi executat

Caracterele unei triade apar ntotdeauna n secventa 'rwx'. Daca o anumita litera este nlocuita
de o cratima (-), privilegiul asociat nu este accesibil.
De exemplu, sa examinam privilegiile specificate in urmatorul exemplu:

rwxr-xr--

Aceste caractere au urmatoarea semnificatie:

"rwx", posesorul fisierului poate citi, scrie sau executa fisierul

"r-x", membrii grupului posesor al fisierului pot citi sau executa fisierul, dar nu pot
scrie n fisier

"r--", alti utilizatori pot citi fisierul, dar nu pot scrie n fisier sau executa continutul
fisierului

Privilegiul 'x' este semnificativ numai pentru fisierele care includ un continut executabil, cum
sunt fisierele binare executabile (.exe) sau anumite categorii de scripturi.
Posesorul unui fisier poate modifica privilegiile asociate fisierului emitnd comanda chmod
(aceasta functioneaza in sistemele de operare UNIX).
Aceasta comanda are doua forme. O forma va permite sa specificati privilegiile folosind cifre
scrise n octal; cealalta va permite sa le specificati folosind litere.
Pentru a specifica privilegiile folosind cifre n octal, calculati valoarea numerica a fiecarei
triade. Pentru aceasta, nsumati numerele corespunzatoare fiecarui privilegiu disponibil din
cadrul triadei. Numerele asociate privilegiilor sunt urmatoarele:

r-4
w-2
x-1

De exemplu, privilegiul "rwx" are valoarea 4 + 2 + 1 = 7. Similar, privilegiul "r-x" are


valoarea 4 + l = 5, iar privilegiul "r--" are valoarea 4.
Dupa ce ati calculat valoarea numerica a fiecarei triade, formati un numar din trei cifre scris
n octal, care este alcatuit din valoarea numerica a privilegiilor utilizatorilor, valoarea
numerica a privilegiilor membrilor grupului, si valoarea numerica a privilegiilor altor
utilizatori. Astfel, privilegiile "rwxr-xr--" corespund valorii n octal 754.

3. Modificarea privilegiilor unui fisier


Pentru a modifica privilegiile unui fisier, folositi functia chmod(), care are urmatoarea forma:

chmod(nume_fisier, mod)

Argumentul 'nume_fisier' specifica numele si calea de acces a fisierului ale carui privilegii
urmeaza a fi modificate, iar argumentul 'mod' specifica privilegiile dorite, n general, se
prefera exprimarea privilegiilor sub forma unui numar scris n octal. Pentru aceasta, prefixati
valoarea folosind cifra 0.
De exemplu, puteti atribui unui fisier "text.txt" privilegiile "rwxr-xr--" specificnd pentru
'mod' valoarea 0754, functia "chmod" va fi chmod("text.txt", 0754)
Pentru ca functia chmod() sa se execute cu succes, PHP trebuie sa ruleze sub contul
utilizatorului posesor al fisierului. Functia returneaza TRUE n caz de reusita, respectiv
FALSE n caz contrar.
Pentru a modifica grupul posesor al unui fisier, invocari functia chgrp(), care are forma:

chgrp("nume_fifier", grup)

- Unde "grup" este un nume sau numar care desemneaza grupul respectiv.

Functiile chmod() si chgrp() nu functioneaza sub Microsoft Windows.

4. Deschiderea unui fisier


Inainte de a putea citi sau scrie ntr-un fisier, trebuie sa deschideti fisierul folosind functia
fopen().

fopen("nume_fisier", "mod")

- unde 'nume_fisier' specifica numele si calea spre fisierul care urmeaza a fi deschis, iar 'mod'
indica tipul de acces dorit.
Modurile de deschidere a unui fisier sunt urmatoarele:

r - Permite doar citirea fisierului


r+ - Citire sau scriere de la inceputul fisierului
w - Creaza fisierul daca nu exista si suprascrie datele existente
w+ - Citire sau scriere; la scriere , creeaza fisierul daca nu exista si suprascrie datele
existente
a - Adaugare; Creaza fisierul daca nu exista si adauga datele noi la sfarsitul fisierului
existent
a+ - Citire sau scriere; la scriere, creaza fisierul daca nu exista si adauga datele noi la
sfarsitul fisierului existent
x - Doar scriere; Creaza fisierul daca nu exista si genereaza un averisment daca acesta
exista
x+ - Citire sau scriere; Creaza fisierul daca nu exista si genereaza un averisment daca
acesta exista
b - Deschide fisierul in mod binar

Functia fopen() returneaza FALSE daca PHP nu a reusit sa deschida fisierul, n caz contrar,
returneaza o valoare care contine un ntreg, numit "identificator de fisier", care se foloseste
pentru identificarea unui fisier de catre functiile care executa operatii cu fisiere.
De exemplu, instructiunea urmatoare deschide fisierul 'carte.txt' pentru citire:

$fh = fopen("carte.txt", "r");

Sub Microsoft Windows, fisierele ASCII si fisierele binare sunt tratate n mod diferit. Cnd
deschideti un fisier binar sub Windows, specificati "b" ca al doilea caracter al modului; de
exemplu, "rb" pentru citire, "wb" pentru scriere, "a+b" pentru citire si adaugare. Daca nu
procedati astfel, citirile din fisier si alte operatii se vor ncheia prematur sau vor esua.

5. Verificarea finalizarii unei operatii cu un fisier


Operatiile cu fisiere (inclusiv cele legate de deschiderea, citirea unui fisier si scrierea ntr-un
fisier) pot esua dintr-o varietate de motive. Deci, este important sa verificati daca fiecare
operatie s-a ncheiat cu succes.
Iata o modalitate n care puteti proceda:
<?php
$fh = fopen("carte.txt", "rb");

if (!$fh) {
echo "Nu a fost deschis fisierul carte.txt.";
}
?>
Functia fopen() returneaza FALSE daca nu reuseste sa deschida fisierul. In acest caz, scriptul
executa instructiunea echo care afisaza un mesaj.
O forma alternativa mai simpla foloseste operatorul OR (SAU):
<?php
($fh = fopen("carte.txt", "rb"))
OR die("Nu a fost deschis fisierul carte.txt.");
?>

6. Inchiderea unui fisier


Un fisier deschis consuma resursele sistemului. Cnd un script a terminat de utilizat un fisier,
scriptul trebuie sa nchida fisierul, elibernd aceste resurse.
La sfrsitul unui script, PHP nchide n mod automat fisierele deschise. Totusi, la programare
se recomanda sa nchideti fisierele mai rapid, ori de cte ori este posibil.
Pentru a nchide un fisier, folositi functia fclose():

fclose(identificator_fisier)

- 'identificator_fisier' este identificatorul fisierului, returnat la deschiderea acestuia cu functia


fopen()
Iata un exemplu caracteristic de deschidere, utilizare si nchidere a unui fisier:
<?php
$fh = fopen("carte.txt", "rb");
if (!$fh) {
echo "Nu a fost deschis fisierul carte.txt.";
}
// Aici se insereaza instructiunile care folosesc fisierul deschis
fclose($fh);
?>
Functia fclose() returneaza valoarea TRUE daca fisierul a fost nchis cu succes. Testarea
acestei valori este rareori necesara, deoarece nu se mai pot face prea multe dupa ce s-a ratat o
ncercare de a nchide un fisier.

Lucrul cu fisiere (2)

nvatati sa cititi datele dintr-un fisier

nvatati sa afisati continutul unui fisier

nvatati sa scrieti date intr-un fisier

1. Citirea dintr-un fisier

PHP furnizeaza o varietate de functii pentru citirea fisierelor. Una dintre acestea este fread(),
care are urmatoarea forma:
fread(identificator_fisier, lungime)
Argumentul 'identificator_fisier' este valoarea returnata de functia fopen(), iar argumentul
'lungime' specifica numarul maxim de octeti care vor fi cititi. Octetii cititi din fisier sunt
returnati sub forma de valoare de tip sir. Daca operatia de citire ntlneste sfrsitul fisierului,
PHP va returna mai putin de lungime octeti data.
Iata un exemplu de citire si de afisare a unui text dintr-un fisier, folosind functia fopen()
(Fisierul "carte.txt" folosit ca test in exemplele de mai jos trebuie sa se afle in acelasi
director in care este si scriptul php):
<?php
$fh = @fopen("carte.txt", "rb");
if (!$fh) {
echo "Nu a fost deschis fisierul carte.txt.";
}
else {
$s = fread($fh, 256);
echo "<br /> Citeste: $s";
fclose($fh);
}
?>
Exemplul citeste maximum 256 de octeti din fisier daca fisierul a fost deschis.
- Am folosit caracterul @ in fata functiei "fopen()" pentru a impedica afisarea erorilor de la
server in cazul cand fisierul nu poate fi deschis. Este deja functia "if()" care verifica si
afiseaza mesaj in caz de nedeschidere a fisierului.
Pentru a citi un numar mai mare sau mai mic de octeti, modificati valoarea argumentului
lungime al functiei fread().
PHP include o functie conexa, denumita fgetc(), care citeste un octet din fisierul specificat.
Pentru a citi si a afisa ntregul continut al fisierului, puteti folosi functia filesize() pentru a
furniza valoarea argumentului lungime, astfel:
<?php
$nume = "carte.txt";
$fh = @fopen($nume, "rb");
if (!$fh) {
echo "Nu a fost deschis fisierul carte.txt.";
}
else {
$l = filesize($nume);
$s = fread($fh, $l);
echo "<br /> Citeste: $s";
fclose($fh);
}
?>

2. Citirea unei linii de text

Se obisnuieste frecvent citirea linie cu linie a unui text dintr-un fisier.


Functia fgets() citeste o linie dintr-un fisier; functia are urmatoarea forma:
fgets(identificator_fisier, lungime)
- Argumentul 'identificator_fisier' este o valoare returnata de functia fopen(); aici, argumentul
'lungime' specifica numarul maxim de octeti dintr-o linie care vor fi cititi, minus o unitate,
pentru a permite includerea caracterului de terminare a liniei (acesta poate fi omis si va citi
toata linia). Octetii cititi din fisier sunt returnati ca valoare de tip sir.
Iata un exemplu care prezinta modul de citire si de afisare a primilor 125 octeti din prima linii
a unui fisier :
<?php
$nume = "carte.txt";
$fh = @fopen($nume, "rb");
if (!$fh) {
echo "Nu a fost deschis fisierul carte.txt.";
}
else {
$s = fgets($fh, 126);
echo "<br /> Citeste: $s";
fclose($fh);
}
?>
- In exemplul de mai sus, daca prima linie din fisierul "carte.txt" are mai mult de 125 de
caractere, va afisa doar primele 125, daca are mai putin de 125 de caractere, va afisa doar
caracterele care sunt incluse in prima linie.

3. Citirea linie cu linie a unui ntreg fisier


n general, dintr-un fisier trebuie citit mai mult dect prima linie a acestuia. Pentru aceasta, un
script trebuie sa dispuna de o modalitate de a determina momentul cnd fisierul a fost citit n
totalitate.
Functia feof() are chiar acest scop, returnnd o valoare care arata daca s-a ajuns sau nu la
sfrsitul fisierului. Functia are urmatoarea forma:
feof(identificator_fisier)
Argumentul 'identificator_fisier' este valoarea returnata de functia fopen().
Functia feof() returneaza TRUE daca fisierul specificat este la sfrsit; n caz contrar,
returneaza FALSE.
Iata cum se poate folosi functia feof() pentru a controla procesul de citire a unui ntreg fisier,
linie cu linie:
<?php
$nume = "carte.txt";
$fh = @fopen($nume, "rb");
if (!$fh) {
echo "Fisieru carte.txt nu a putut fi deschis";
}
while (!feof($fh)) {
$s = fgets($fh, 256);
echo "<br /> Citeste : $s";
}

fclose($fh);
?>
- Instructiunea "while" asigura faptul ca functia fgets() este apelata n mod repetat, pna la
citirea tuturor liniilor.
O alta modalitate simpla de a citi linie cu linie un ntreg fisier consta n a folosi functia file().
Aceasta functie returneaza un tablou n care fiecare element contine o linie a fisierului
specificat.
Iata un exemplu care foloseste functia file() pentru a citi si pentru a afisa continutul unui
fisier:
<?php
$tablou = file("carte.txt");
foreach ($tablou as $s) {
echo "<br /> Citeste : $s";
}
?>
Aceasta metoda nu este adecvata pentru fisiere de foarte mari dimensiuni, deoarece n tablou
este ncarcat ntregul continut al fisierului, ceea ce poate necesita o cantitate de memorie
superioara celei disponibile.

4. Afisarea continutului unui fisier


PHP furnizeaza doua functii care faciliteaza afisarea continutului unui fisier.
- Una dintre functii, fpassthru(), necesita un argument care specifica identificatorul fisierului
care urmeaza sa fie afisat:

$fh = fopen("carte.txt", "rb");


fpassthru($fh);

Dupa ce a afisat fisierul, functia l nchide automat.


- Cealalta functie, readfile(), necesita numai numele sau calea fisierului:

readfile("carte.txt");

5. Navigarea printr-un fisier


Fiecare fisier are un pointer asociat care indica pozitia octetului unde se va produce
urmatoarea operatie.
Puteti folosi functia rewind() pentru a readuce pointerul la nceputul fisierului. Functia are
urmatoarea forma ('identificator_fisier' este identificatorul de fisier returnat de functia
fopen()):
rewind(identificator_fisier)
Nu puteti readuce pointerul unui fisier la nceputul propriu-zis al unui fisier daca fisierul a
fost deschis pentru un acces de tip atasare, adica ntr-unul din modurile 'a' sau 'a+'.
Iata un exemplu care prezinta modul de utilizare a functiei rewind() pentru a afisa de doua
ori continutul unui fisier:

<?php
$nume = "carte.txt";
$fh = @fopen($nume, "rb");
if (!$fh) {
echo "Fisieru carte.txt nu a putut fi deschis";
}
while (!feof($fh)) {
$s = fgets($fh, 256);
echo "<br /> Citeste : $s";
}
// Deruleaza la inceputul fisierului si reia redarea acestuia
rewind($fh);
while (!feof($fh)) {
$s = fgets($fh, 256);
echo "<br /> Citeste \$s : $s";
}
fclose($fh);
?>
Daca se produce vreo eroare, functia rewind() returneaza zero.
Desi functia rewind() este utila n caz de nevoie, necesitatea de a readuce un pointer de fisier
la nceputul fisierului nu este chiar att de frecventa.
Functia fseek() furnizeaza o mai mare flexibilitate, permitndu-va sa pozitionari pointerul de
fisier astfel nct sa puteti citi sau scrie n orice punct al fisierului.
Functia are doua forme, cea mai simpla fiind urmatoarea:
fseek(identificator_fisier, offset)
unde 'identificator_fisier' este identificatorul de fisier returnat de functia fopen(), iar 'offset'
este pozitia dorita a pointerului de fisier, specificata n octeti, n raport cu nceputul fisierului.
In caz de reusita, functia fseek() returneaza 0; n caz contrar, returneaza -l .
O forma alternativa a functiei asigura un grad superior de flexibilitate, avand urmatoarea
forma:
fseek(identificator_fisier, offset, baza)
unde 'identificator_fisier' si 'offset' au semnificatiile definite anterior, iar 'baza' ia una ; dintre
urmatoarele valori:

SEEK_SET, care stabileste pozitia pointerului de fisier n raport cu nceputul


fisierului

SEEK_CUR, care stabileste pozitia pointerului de fisier n raport cu valoarea curenta


a pointerului

SEEK_END, care stabileste pozitia pointerului de fisier relativ la sfrsitul fisierului

Valoarea argumentului 'offset' poate fi pozitiva, negativa sau zero.


De exemplu, pentru a pozitiona pointerul cu 1000 de octeti nainte de sfrsitul fisierului,
emiteti urmatorul apel de functie:

fseek($fh, -1000, SEEK_END)

Pentru a obtine valoarea curenta a pointerului de fisier, folositi functia ftell(), care are
urmatoarea forma:

ftell(identificator_fisier)

Functia returneaza valoarea curenta a identificatorului de fisier, respectiv valoarea zero daca
functia esueaza.

6. Scrierea ntr-un fisier


Pentru a scrie intr-un fisier se foloseste functia fwrite(), aceasta are urmatoarea forma:
fwrite(identificator_fisier, date);
- Unde 'identificator_fisier' este identificatorul de fisier returnat de functia fopen(), iar 'date'
este o valoare sir care determina datele care urmeaza a fi scrise.
Daca executia functiei reuseste, returneaza numarul octetilor scrisi; n caz contrar, returneaza
valoarea l.
Iata un exemplu care prezinta modul de scriere a datelor ntr-un fisier:
<?php
$nume = "carte.txt";
$fh = @fopen($nume, "ab");
if (!$fh) {
echo "Nu a fost deschis fisierul carte.txt.";
}
else {
$ok = fwrite($fh, "Acestea sunt datele adaugate \n");
echo "<br /> Rezultatul scris este: $ok";
fclose($fh);
}
?>
Acest script va avea urmatoarele date de iesire:
Rezultatul scris este: 30
- Programul prezentat n exemplul anterior scrie n fisierul "carte.txt" o linie de text.
Deoarece fisierul a fost deschis folosind modul "a", datele sunt atasate la fisier; cu alte
cuvinte, datele sunt scrise la sfarsit, dupa toate datele existente n fisier.
Observati ca a fost scris si un caracter de terminare a liniei ("\n"), astfel nct fisierul sa poata
fi citit linie cu linie la un moment de timp ulterior. Daca lucrati cu un fisier text, n general e
util sa includeti un caracter de terminare a liniei la sfrsitul fiecarei linii scrise n fisier.
Programul din exemplu scrie n fisier o singura linie de text. Totusi, puteti scrie mai multe
linii, daca doriti. Daca apelati functia fwrite() din interiorul unei bucle, aveti posibilitatea de
a scrie mai multe linii. Dupa ce ati scris toate liniile de care aveti nevoie, nchideti fisierul
prin apelarea functiei fclose().
PHP mai furnizeaza si o forma alternativa a functiei fwrite():

fwrite(identificator_fisier, date, lungime);

Aceasta forma include un al treilea argument, si anume "lungime", care va permite sa


specificati numarul maxim de octeti care vor fi scrisi.

Argumentul "lungime" al functiei fwrite() trebuie utilizat atunci cnd se scrie n fisiere binare
sub Microsoft Windows.
Windows prefera secventa de terminare a liniei "\r\n". Atunci cnd scrieti programe PHP
pentru sisteme Windows, este de preferat sa folositi secventa "\r\n" de terminare a liniei.
- PHP dispune de o alta functie pentru scrierea fisierelor, fputs(). Totusi, n afara de nume,
fputs() este similara cu functia fwrite().

Functii pentru fisiere si directoare


Aici gasiti cateva din cele mai utile functii PHP pentru lucru cu sistemul de fisiere si
directoare.

1. basename(adresa, "sufix")
- Returneaza partea cu numele fisierului dintr-o adresa URL. "sufix" e optional, daca e
specificat, functia elimina si pe acesta de la sfarsitul numelui.
<?php
$url = 'http://www.marplo.net/php-mysql/index.php';
$file = basename($url);
// $file e "index.php"
$file = basename($url, ".php");
// $file e "index"
?>
2. chmod(file, mod)
- Modifica prmisunile CHMOD a lui "file" (cale si nume fiser) cu cele specificate la "mod"
(0777, 0644, ...). Daca modificarea reuseste returneaza TRUE, in caz contrar, FALSE.
<?php
chmod("director/fisier.ext", 0755);
?>
3. copy(sursa, destinatie)
- Copie fisierul specifical la "sursa", in locatia "destinatie" (aici poate fi specificata si
denumirea fisierului la dstinatie). Aca fisierul deja exista, va fi inlocuit de cel copiat. Funtctia
returneaza TRUE in caz de reusita sau FALSE.
"> <?php
$file = 'examplu.txt';
$newfile = 'dir/examplu.txt.bak';
if (!copy($file, $newfile)) {
echo "Fisierul$file nu a putut fi copiat \r\n";
}
?>

4. dirname(adresa)
- Returneaza numele directorului din "adresa", fara numele fisierului sau alte extensii.
<?php
$url = 'marplo.net/php-mysql/index.php';
$dir = dirname($url);
echo $dir;
?>

// marplo.net/php-mysql

5. disk_free_space(cale_dir)
- Returneaza spatiul liber al sistemului in directorul specificat la "cale_dir". Returneaza
numarul de bytes liberi sau FALSE daca functia esueaza.
<?php
$dir = '/';
// Directorul radacina
echo disk_free_space($dir);
// 123456789
?>
6. disk_total_space(cale_dir)
- Returneaza spatiul total al sistemului in directorul specificat la "cale_dir". Returneaza
numarul total de bytes sau FALSE daca functia esueaza.
7. fopen("fisier", "mod")
- Deschide un pointer la "fisier", in modul de lucru "mod". "mod" poate fi ("b" e indicat sa
fie adaugat pentru sistemele windows):

r sau rb - pentru citire.

r+ sau r+b - citire si scriere.

w sau wb - creare si scriere fisier de la 0.

w+ sau w+b - citire si scriere fisier de la 0, il creaza daca nu exista.

a sau ab - scriere, adauga datele dupa cele deja existente. Creaza fisierul daca nu
exista.

a+ sau a+b - citire si scriere, adauga datele dupa cele deja existente. Creaza fisierul
daca nu exista

x sau xb - creare si scriere, daca fisierul exista deja, returneaza eroare.

x sau x+b - creare pentru citire si scriere, daca fisierul exista deja, returneaza eroare.

<?php
$file = 'tutoriale.php';
$fo = fopen($file, "a+b");
// Deschide fisierul, in modul de citire si adaugare date
fclose($fo);
// Inchide pointer-ul, elibereaza memoria folosita
?>
8. fclose(file_pointer)
- Inchide deschiderea unui fisier cu "fopen()" (transmisa la "file_pointer"), eliberand
memoria folosita de acea deschidere. Returneaza TRUE daca functia reuseste, in caz contrar,
FALSE.
<?php
$file = 'tutoriale.php';
$fo = fopen($file, "rb");
// Deschide fisierul, in modul de citire ("rb") si creaza pointer-ul
fisierului
fclose($fo);
// Inchide pointer-ul, elibereaza memoria folosita
?>
9. feof(file_pointer)
- Testeaza sfarsitul unnui fisier cu deschiderea specificata la "file_pointer". Functie utila cand
fisierul e citit linie cu linie. Returneaza TRUE daca pointer-ul e la sfarsitul fisierului, altfel,
returneaza FALSE.
<?php
$file = 'tutoriale.php';
$fo = fopen($file, "rb");

// Deschide fisierul, in modul de citire ("rb")

// Parcurge fisierul pana ajunge la sfarsit (atunci "feof" e TRUE - adica "!feof" e FALSE)
while(!feof) {
}
fclose($fo);
?>

// Inchide pointer-ul, elibereaza memoria folosita

10. fgets("pointer", lungime")


- Citeste numarul de caractere specificat la "lungime" dintr-un fisier deschis si specificat la
"pointer". Citirea se face din locul unde a ajuns pointer-ul in fisier, daca "lungime" nu e
specificat citirea se va face pana la sfarsitul randului curent (daca lungimea liniei e mai mare
de 8 KB, e indicata specificarea ei).
<?php
$file = 'cursuri.php';
$fo = fopen($file, "rb");
$text = fgets($fo, 250);

// Deschide fisierul, in modul de citire ("rb")


// Citeste 250 caractere din primul rand al fisierului

fclose($fo);
?>
11. file_exists("fisier")
- Returneaza TRUE daca "fisier" exista, altfel, returneaza FALSE.
<?php
if (file_exist('dir/file.ext')) echo 'Fisierul exista';
else echo 'Fisierul nu exista';
?>
12. file_get_contents("fisier")
- Returneaza tot continutul din "fisier" intr-un sir. Daca "fisier" nu poate fi citit, returneaza
FALSE.
13. file_put_contents("fisier", "continut")
- Scrie in "fisier" sirul specificat la "continut". Daca fisierul exista, suprascrie datele
existente, daca nu exista, il creaza. Daca nu poate scrie in "fisier", returneaza FALSE.
<?php
$file = 'cursuri.php';
$context = file_get_contents($file);
// Preia continutul fisierului
$context .= 'Sir nou adaugat dupa cel existent';
file_put_contents($file, $context);
?>

// Adauga continutul din $context in $file

14. file("fisier", flag)


- Preia continutul fisierului intr-un array, fiecare linie din "fisier" va fi un element din
matrice. "flag" e optional, in locul lui se poate adauga: FILE_IGNORE_NEW_LINES (nu
va prelua si caracterele de linie noua), FILE_SKIP_EMPTY_LINES (va sari peste randurile
goale).
<?php
$aray_file = file('tutorials.php');
// Sau
$aray_file = file('tutorials.php', FILE_IGNORE_NEW_LINES |
FILE_SKIP_EMPTY_LINES);
// Afiseaza primul rand
echo $aray_file[0];
?>
15. fileatime("file")

- Returneaza timestamp-ul (timpul UNIX) cand a fost accesat ultima data "file", sau in caz de
nereusita, FALSE.
<?php
$file = 'somefile.txt';
if (file_exists($file)) {
echo "$file a fost accesat in data: " . date("F d Y H:i:s", fileatime($file));
}
// Afiseaza ceva de genul:
?>

somefile.txt a fost accesat in data: April 14 2010 22:16:23

16. filectime("file")
- Returneaza timestamp-ul (timpul UNIX) cand a fost modificat ultima data "file", sau in caz
de nereusita, FALSE. Similara cu aceasta e functia filemtime()
17. fileperms("file")
- Returneaza permisiunile CHMOD ale "file", sau FALSE.
18. filesize("file")
- Returneaza marimea lui "file", in bytes, sau FALSE.
19. flock(file_pointer, flag)
- Blocheaza / deblocheaza accesul de citire sau scriere la un fisier deschis cu "fopen()",
specificat la "file_pointer". Returneaza TRUE, sau daca functia esueaza, FALSE. Modul de
blocare, sau deblocarea, se specifica la "flag", acesta putand fi:

LOCK_SH - blocare acces citire.

LOCK_EX - blocare acces scriere.

LOCK_UN - deblocare

<?php
$fo = fopen("fisier.txt", "r+");
if (flock($fo, LOCK_EX)) {
// blocheaza alt acces la fisier pt scriere
fwrite($fo, "Scrie ceva in el.");
flock($fo, LOCK_UN);
// Elibereaza blocarea
} else {
echo "Nu poate bloca fisierul!";
}

fclose($fo);
?>
20. fseek(file_pointer, pozitie)
- Muta pozitia pointer-ului dintr-un fisier deschis cu "fopen()" la numarul de caractere
specificat de "pozitie" (0 e primul caracter). In caz de succes returneaza 0, altfel, -1.
<?php
$fo = fopen('somefile.txt', 'r+b');
fseek($fo, 199);
// Muta pointerul in fisier la al 200-lea caracter
?>
21. ftell(file_pointer)
- Returneaza pozitia curenta a indicatorului (pointer) dintr-un fisier deschis cu "fopen()"
(specificat la "file_pointer"). In caz de esec returneaza FALSE.
<?php
// Deschide un fisier si citeste cateva caractere
$fo = fopen("dir/file.txt", "rb");
$data = fgets($fo, 12);
// Afiseaza locatia unde e acum pointer-ul in fisier
echo ftell($fo);
// 11
fclose($fo);
?>
22. fwrite(file_pointer, 'sir')
- Scrie intr-un fisier deschis cu "fopen()" (specificat la "file_pointer") continutul din "sir".
<?php
// Daca poate deschide fisierul pt. adaugare date
if ($fo = fopen('tutorial.txt', "a+b")) {
$add = 'Textul ce va fi adaugat';
// Daca nu poate adauga datele, returneaza eroare
// Altfel, confirmare
if (fwrite($fo, $add) === FALSE) echo 'Eroare, textul nu a putut fi adaugat';
else echo 'Datele au fost scrise';
fclose($fo);
}
?>
23. is_dir("nume")

- Returneaza TRUE daca "nume" exista si este un director, altfel returneaza FALSE.
<?php
if (is_dir('php')) echo 'php este un director in cel curent';
?>
24. is_file("nume")
- Returneaza TRUE daca "nume" exista si este un fisier, altfel returneaza FALSE.
<?php
if (is_file('php/tutoriale.php')) echo 'tutoriale.php este un fisier in directorul "php" din cel
curent';
?>
25. is_readable("nume")
- Returneaza TRUE daca "nume" (fisier sau director) exista si poate fi citit, altfel returneaza
FALSE.
<?php
// Daca fisierul poate fi citit, il citeste si afiseaza continutul
if (is_readable('php/tutoriale.php')) readfile('php/tutoriale.php');
?>
26. is_uploaded_file("fisier_up")
- Returneaza TRUE daca "fisier_up" a fost incarcat pe server, prin upload si primit prin
$_POST, altfel returneaza FALSE. Parametrul functiei trebuie sa fie de forma
"$_FILES['userfile']['tmp_name']".
<?php
// Daca fisierul poate fi citit, il citeste si afiseaza continutul
if (is_uploaded_file($_FILES['userfile']['tmp_name'])) echo 'Fisierul a fost incarcat';
else echo 'Fisierul nu a putut fi incarcat';
?>
27. is_writable("nume")
- Returneaza TRUE daca "nume" (fisier sau director) exista si poate sa scrie in el, altfel
returneaza FALSE.
<?php
if (is_writable('php/tutoriale.php')) echo 'tutoriale.php poate fi scris';
?>
28. mkdir("dir", chmod)
- Returneaza TRUE daca a putut crea directorul "dir" cu permisiunile specificate la "chmod",
altfel returneaza FALSE.

<?php
if (mkdir('php')) echo 'Directorul a fost creat';
?>
29. pathinfo("adresa_file")
- Returneaza o matrice cu informatiile: ale "adresa_file".
<?php
$path_parts = pathinfo('/www/htdocs/index.php');
echo $path_parts['dirname'];
echo $path_parts['basename'];
echo $path_parts['extension'];
echo $path_parts['filename'];
?>

// /www/htdocs
// index.php
// php
// index (incepand cu PHP 5.2.0)

30. readfile("fisier")
- Citeste si returneaza la browser (afiseaza) continutul din "fisier". In caz de esec returneaza
FALSE.
31. realpath("cale_adresa")
- Returneaza calea reala in sistem a unei adrese din "cale_adresa", rezolvand referinte ca .. / ./
../.
<?php
echo realpath('./../../etc/passwd');
// /etc/passwd
echo realpath('/windows/system32');
// C:\WINDOWS\System32
echo realpath(__FILE__);
// Va returna calea absoluta pe server a fisierului curent
?>
32. rename("nume", "nume_nou"
- Redenumeste un director sau fisier specificat la "nume", cu "nume_nou". In caz de succes
returneaza TRUE, altfel FALSE.
<?php
rename("dir/file.txt", "dir/my_file.txt");
?>
33. rewind(file_pointer)
- Readuce pozitia pointer-ului dintr-un fisier deschis cu "fopen()" (specificat la "file_pointer")
la inceputul fisierului (0, primul caracter). In caz de succes returneaza TRUE, altfel FALSE.
<?php
// Deschide un fisier si citeste cateva caractere

$fo = fopen("tutorial.txt", "rb");


$data = fgets($fo, 12);
// Afiseaza locatia unde e acum pointer-ul in fisier
echo ftell($fo);
// 11
rewind($fo);

// Readuce pointer-ul la inceput

// Afiseaza iar locatia indicatorului


echo ftell($fo);
// 0
fclose($fo);
?>
34. rmdir("dir")
- Sterge directorul specificat la "dir". Acesta trebuie sa fie gol. In caz de succes returneaza
TRUE, altfel FALSE.
35. tempnam("dir", "prefix")
- Creaza un fisier cu nume unic, avand la inceput in nume sirul specificat la "prefix", in
directorul "dir". Ii acorda CHMOD 0600. Daca directorul specificat nu exista, creaza fisierul
in directorul "temp" al sistemului si returneaza numele fisierului. In caz de nereusita
returneaza FALSE.
36. tmpfile()
- Creaza un fisier temporar, cu nume unic. Returneaza un pointer de fisier, ca si "fopen()", cu
modul de deschidere "w+". In caz de nereusita returneaza FALSE. Cu "fclose()" fisierul
temporar va fi sters.
<?php
$temp = tmpfile();
// Creaza fisierul temporar
fwrite($temp, "Text scris in fisierul temporar creat");
// Scrie ceva in el
rewind($temp);
// Readuce pointerul la inceputul fisierului
echo fread($temp, 1024);
// Citeste si afiseaza primii 1024 bytes
fclose($temp);
// Inchide si sterge fisierul temporar creat
?>
37. unlink("fisier")
- Sterge fisierul specificat. In caz de succes returneaza TRUE, altfel FALSE.
<?php
if (unlink("test.txt")) echo 'Fisierul a fost sters.';
else echo "Stergerea fisierului nu a reusit.";
?>

Lucrul cu fisiere (3)

Invatati sa blocati si sa obtineti accesul exclusiv la un fisier

Invatati sa copiati, sa redenumiti si sa stergeti un fisier

Studiati un script PHP util pentru incarcarea de fisiere in server

1. Obtinerea accesului exclusiv la un fisier


Web-ul ridica o problema speciala pentru dezvoltatorii de programe, deoarece mai multi
utilizatori pot avea acces simultan la un singur script PHP. Uneori, accesul simultan poate
avea ca rezultat date incorecte. Pentru a vedea cum se poate produce aceasta, sa luam n
considerare urmatorul script, care reprezinta un contor pentru numarul de deschideri a unei
pagini.
<?php
$contor = "ctr.txt";
$fh = @fopen($contor, "r+b");
if (!$fh) {
echo "Nu a fost deschis fisierul ctr.txt.";
}
else {
$s = fgets($fh, 7);
$count = (int) $s;
$count = $count + 1;
rewind($fh);
fwrite($fh, $count);
echo "<br /> Nr. vizitari: $count";
fclose($fh);
}
?>
Remarcati functiile pe care le foloseste scriptul pentru a executa operatiile cu fisiere.
Programul deschide fisierul "ctr.txt" pentru citire si scriere, preia datele din acesta, care sunt
un numar intreg, mareste acel numar cu o unitate, intoarce pointerul la inceputul fisierului
"rewind" dupa care rescrie noul numar, afiseaza numarul si inchide fisierul.
Secventa de cod descrisa mai sus poate creea probleme in cazul in care, de exemplu doi
utilizatori diferiti acceseaza acelasi fisier, in acelasi timp, cand contoarul este, de exemplu, la
numarul 100. Amandoi vor incrementa numarul 100 cu o unitate si va rescrie in fisierul
"ctr.txt" 101; in final, contoarul va arata 101, in loc de 102 cum ar fi trebuit (deoarece au fost
2 vizitatori).
Pentru a evita astfel de conflicte PHP pune la dispozitia utilizatorilor o metoda prin care se
poate bloca accesul temporar la un fisier. Pe durata blocarii, un alt utilizator nu va mai putea
scrie/citi din acest fisier. De aceea durata blocarii trebuie sa fie limitata.
Functia care realizeaza blocarea este flock(), care are urmatoarea forma:

flock(identificator_fisier, operatie)

- Unde "identificator_fisier" este identificatorul de fisier returnat de functia fopen().


Argumentul "operatie" este o constanta sau o expresie care poate avea urmatoarele valori:

LOCK_SH - Blocare partajata in scopuri de citire


LOCK_EX - Blocare exclusiva in scopuri de scriere
LOCK_NB - Blocare fara fixare
LOCK_UN - Eliminarea blocarii

Iata cum se foloseste procesul de blocare, vom folosi acelasi exemplu, contoarul de mai sus,
de data aceasta imbunatatit.
<?php
$contor = "ctr.txt";
$fh = @fopen($contor, "r+b");
if (!$fh) {
echo "Nu a fost deschis fisierul ctr.txt.";
}
else {
flock($fh, LOCK_EX);
$s = fgets($fh, 7);
$count = (int) $s;
$count = $count + 1;
rewind($fh);
fwrite($fh, $count);
flock($fh, LOCK_UN);
echo "<br /> Nr. vizitari: $count"
fclose($fh);
}
?>
- De data aceasta scriptul blocheaza fisierul "ctr.txt" pe timpul citirii si scrierii acestuia, astfel
nct accesul simultan sa nu cauzeze o numarare eronata.
Blocare se face imediat dupa ce a fost deschis fisierul, cu "LOCK_EX", si se incheie imediat
dupa rescrierea in fisier, prin deblocare acestuia "LOCK_UN".

2. Copierea unui fisier


O functie care faciliteaza copierea fisierelor, este copy(). Functia copy() are urmatoarea
forma:
copy (sursa, destinatiea)
Unde "sursa" este numele si calea fisierului care urmeaza a fi copiat, iar "destinatie" este
numele sau calea copiei.
Functia returneaza TRUE daca operatia de copiere reuseste; n caz contrar, returneaza
FALSE.
Iata un exemplu n care este prezentat modul de utilizare a functiei copy():
<?php
$ok = copy("test.txt", "test.txt.bak");
if (!$ok) {
echo "Copierea nu a reusit.";

}
?>
Exemplul creeaza o copie a fisierului "test.txt", cu numele "test.txt.bak", in acelasi director.
Functia copy() va suprascrie fisierul destinatie, daca acesta exista.

3. Modificarea numelui unui fisier


Functia care va permite sa modificati numele unui fisier este rename(), aceasta care are
urmatoarea forma:
rename(nume_vechi, nume_nou)
Unde "nume_vechi" este numele si calea originala a fisierului, iar "nume_nou" este numele
dorit.
Functia returneaza TRUE daca operatia de modificare a numelui a reusit; n caz contrar,
returneaza FALSE.
Iata un exemplu de utilizare a functiei rename():
<?php
$ok = rename("test.txt", "teste.dat");
if (!$ok) {
echo "Modificarea numelui nu a reusit.";
}
?>
- Exemplu modifica numele fisierului "test.txt" in "teste.dat".

4. Stergerea unui fisier


Functia care va permite sa stergeti un fisier este unlink(), aceasta care are urmatoarea forma:
unlink(nume_fisier)
Unde "nume_fisier" este numele si calea fisierului care va fi sters.
Functia returneaza TRUE daca operatia de stergere a reusit; n caz contrar, returneaza
FALSE.
Iata un exemplu de utilizare a functiei unlink():
<?php
$ok = unlink("test.txt");
if (!$ok) {
echo "Stergerea fisierului nu a reusit.";
}
?>
- Exemplu sterge fisierului "test.txt".
Retineti ca PHP trebuie sa aiba acces de scriere la catalogul n care se vor executa operatiile
de copiere, redenumire sau stergere; n caz contrar, PHP nu va putea executa aceste operatii.

5. Incarcarea unui fisier in server


Pentru incarcarea unui fisier in server, se folosesc formulare HTML impreuna cu un script
PHP de incarcare care foloseste functia move_uploaded_file() pentru operatia de upload.
Pentru a crea un formular de ncarcare, specificati ENCTYPE="multipart/form-data" n

eticheta FORM si includeti un control de introducere a datelor cu atributul TYPE="FILE".


Iata un exemplu de script PHP si formular HTML care incarca fisierele in server:
<?php
if(isset($_POST['submit'])) {
$uploadpath = "upload/";
// Modifica aici directorul de upload
$uploadpath = $uploadpath . basename( $_FILES['fisier']['name']);
if(move_uploaded_file($_FILES['fisier']['tmp_name'], $uploadpath)) {
echo"Fisier: ". basename( $_FILES['fisier']['name']). " a fost incarcat";
}
else {
echo "Eroare la urcarea fisierului pe server, mai incerca o data!";
}
}
?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"
enctype="multipart/form-data">
Alege fisierul:
<input type="file" name="fisier" /> <br />
<input type="submit" name='submit' value="Trimite" />
</form>
- Cnd utilizatorul apasa pe butonul de "Trimite", scriptul PHP preia datele si va incarca
fisierul dorit in server

Utilizarea cataloagelor (Directoare)

Invatati sa obtineti si sa modificati directorul de lucru curent

Invatati sa manipulati caile de acces si privilegiile la un director

Invatati sa cititi continutul unui director, sa-l redenumiti si sa creati noi directoare

Cele mai importante functii pentru utilizarea cataloagelor va permit sa obtineti catalogul de
lucru si sa lucrati cu acesta, sa manipulati cai de acces, sa cititi continutul unui director, sa
vizualizati si sa modificati privilegiile unui director, precum si sa creati si sa stergeti
cataloage.
In acest context, numele "catalog" si "director" reprezinta acelasi lucru.

1. Obtinerea si modificarea directorului de lucru


Functia getcwd() returneaza numele catalogului curent de lucru. Functia nu necesita
argumente si poate fi utilizata astfel:
$cdir = getcwd();
Pentru a schimba catalogul curent de lucru, puteti folosi functia chdir(), care are urmatoarea
forma:
chdir(nume_director)
- Unde "nume_director" este calea sau numele catalogului de lucru dorit.

Functia returneaza TRUE daca operatia reuseste; n caz contrar, returneaza FALSE.
De exemplu, daca in directorul curent se afla alt director "temp", pentru a face din "temp"
catalogul curent de lucru, folositi functia chdir() dupa cum urmeaza:
<?php
$ndir = chdir("temp/");
?>

2. Manipularea cailor de acces


PHP include numeroase functii utile pentru manipularea cailor de acces.
Functia dirname() preia calea de acces la un fisier si returneaza toata calea, mai putin
componenta finala a caii specificate, n cazul n care componenta finala este un fisier, functia
va ajuta sa izolati numele fisierului de restul caii.
De exemplu, daca se da calea "plomar/curs-php/lectii/lectia1.php", functia va returna
"plomar/curs-php/lectii".
Functia are urmatoarea forma:
dirname(cale_fisier)
Functia basename() executa operatia complementara, returnnd numai componenta finala a
caii specificate.
De exemplu, daca este data calea "plomar/curs-php/lectii/lectia1.php", functia "basename()"
va returna "lectia1.php".
Functia are urmatoarea forma:
basename(cale_fisier)
Daca doriti sa executati mai multe operatii cu o cale, functia pathinfo() va poate fi de folos.
Aceasta functie returneaza un tablou care include patru elemente (al patrule incepand de la
versiunea PHP 5.2.0):

1. dirname - rezultatul invocarii functiei dirname() avnd ca argument calea


respectiva

2. basename - rezultatul invocarii functiei basename() avnd ca argument calea


respectiva

3. extension - extensia fisierului (daca exista) dat de rezultatului functiei basename()

4. filename - numele fisierului dat de rezultatului functiei basename(), dar fara


extensie

Iata un exemplu care prezinta modul de utilizare a functiei pathlnfo() :


<?php
$path_parts = pathinfo('plomar/curs-php/lectii/lectia1.php');
foreach ($path_parts as $num => $val) {
echo "<br /> $num => $val";
}
?>
Datele de iesire ale scriptului de mai sunt urmatoarele :
dirname => plomar/curs-php/lectii
basename => lectia1.php

extension => php


filename => lectia1
Un alt mod in care puteti utiliza si afla valorile returnate de functi pathinfo() este urmatorul:
<?php
$path_parts = pathinfo('plomar/curs-php/lectii/lectia1.php');
echo "<br />". $path_parts['dirname'], "\r\n";
echo "<br />". $path_parts['basename'], "\r\n";
echo "<br />". $path_parts['extension'], "\r\n";
echo "<br />". $path_parts['filename'], "\r\n";
?>
Acest exemplu va returna urmatoarele date de iesire :
plomar/curs-php/lectii
lectia1.php
php
lectia1

3. Vizualizarea si modificarea privilegiilor directoarelor


Pentru a vizualiza privilegiile unui director, puteti folosi aceleasi functii utilizate pentru
vizualizarea privilegiilor fisierelor, prezentate in Lectia 17 in tabelul "Functii PHP pentru
obtinerea atributelor unui fisier". folosind ca argument numele sau calea directorului. Aceste
functii va permit sa vizualizati o varietate de caracteristici ale directoarelor, inclusiv
privilegiile de catalog, care sunt returnate de functia fileperms().
Pentru a modifica privilegiile unui director, folositi functia chmod() care a fost descrisa in
Lectia 17 la sectiunea "Modificarea privilegiilor unui fisier". Utilizati aceasta functie exact
asa cum ati folosi-o pentru a stabili privilegiile de fisier, folosind ca argument un director.
Pentru a putea atribui sau schimba privilegiile unui director sau fisier, modulul PHP instalat
trebuie sa aiba drepturi de modificare a directoarelor /fisierelor specificate.

4. Citirea continutului unui director


PHP furnizeaza trei functii care va permit sa cititi continutul unui catalog, ca si cum catalogul
ar fi un fisier. Aceste functii sunt:

1. opendir() - deschide directorul pentru citire


2. readdir () - citeste o intrare dintr-un catalog
3. closedir() - nchide catalogul, elibernd resursele alocate de functia opendir()

Rezultatul apelarii functiei readdir() este un sir care contine numele urmatorului fisier sau
sub-director din catalogul deschis. Functia returneaza FALSE atunci cnd au fost citite toate
intrarile din catalog.
Iata un exemplu care prezinta modul de utilizare a acestor functii pentru citirea continutului
unui catalog:
<?php
$dc = @opendir("home/plomar/curs-php");
if (!$dc) {
echo "Directorul nu a putut fi deschis";
}
else {

while ($ok = readdir($dc)) {


echo "<br /> $ok";
}
closedir($dc);
}
?>
Datele de iesire ale exemplului pot fi similare cu cele prezentate mai jos :
style
imgs
lectia
scripts
index.php
- Sau puteti folosi functia scandir($dir). Aceasta preia intr-un Array numele tuturor
directoarelor si fisierelor din directorul "$dir". In caz de nereusita returneaza False.

5. Crearea unui director


Pentru a crea un director, utilizati functia mkdir(), care are urmatoarea forma:
mkdir(nume_dir, mod)
- Unde "nume_dir" este calea sau numele directorului care va fi creat, iar "mod" reprezinta
privilegiile care trebuie acordate noului catalog.
In mod normal, prima cifra a argumentului mod trebuie sa fie 0, astfel nct PHP sa-l
perceapa ca pe o valoare scrisa n octal. Revizuiti Lectia 17 , sectiunea "Privilegii de fisier"
Functia returneaza TRUE daca creeaza catalogul; n caz contrar, returneaza FALSE.
De exemplu, pentru a crea un catalog denumit "lucru" si pentru a-i atribui privilegiile "rwxrx--x", utilizati functia mkdir() dupa cum urmeaza:
<?php
$cd = mkdir("lucru", 0751);
if ($cd)
echo "Directorul a fost creat";
else
echo "Directorul nu a putut fi creat";
?>
Pentru a modifica numele unui director, puteti folosi functia rename(), care are urmatoarea
forma:
rename(nume_vechi, nume_nou)
Unde "nume_vechi" este numele si calea originala a directorului, iar "nume_nou" este numele
nou dorit.

Utilizarea de sesiuni PHP

Invatati sa creati sesiuni in PHP

Invatati sa lucrati cu variabile din sesiuni si sa stergeti datele sesiunii

1. Despre sesiuni, crearea unei sesiuni PHP

Sesiunea reprezinta o modalitate prin care PHP retine informatii de la o pagina la alta.
Odata cu initializarea unei sesiuni, utilizatorul poate pastra anumite variabile chiar daca in
continuare viziteaza si alte pagini ale site-ului. In principiu informatia se pastreaza pana la
inchiderea browser-ului, sau pana cand utilizatorul distruge in mod intentionat sesiunea
curenta.
Lucrurile se desfasoara ca in felul urmator: in momentul cand un user s-a logat la site, PHP
atribuie acestuia un identificator unic de sesiune : SID. Acest SID este inglobat intr-un
coockie cu numele PHPSESSID si trimis apoi catre browserul utilizatorului. Daca browserul
nu suporta cookie-uri sau acestea sunt dezactivate, atunci acest SID este adaugat la adresa
URL. In acelasi timp se creeaza pe server un fisier cu numele SID. In continuare daca
utilizatorul doreste sa stocheze anumite informatii, acestea vor fi practic scrise in acest fisier
SID de pe server.
Sesiunile au urmatoarele avantaje:

- Pot fi folosite chiar daca browserul utilizatorului nu suporta cookie-uri sau daca
acestea sunt dezactivate.

- Permit stocarea unui volum mare de informatii, spre deosebire de cookie-uri care
sunt limitate in aceasta privinta.

- Sunt mai sigure in raport cu cookie-urile deoarece informatiile nu sunt transmise in


mod repetat intre client si server.

Initializarea unei sesiuni se face cu functia :

session_start()

Aceasta trebuie sa fie printre primele linii de cod dintr-un script PHP, deoarece apelul acestei
functii trebuie facut inainte de trimiterii catre browser-ul Web a vreunui cod HTML sau chiar
a unui spatiu vid.
Daca folosim stocarea iesirii in buffer, instructiunea session_start() nu trebuie inserata
neaparat la inceputul codului.
Instructiunea session_start() nu este necesare daca in fisierul de configurare "php.ini",
variabila "session.auto_start" are valoarea TRUE.
Pentru a intelege mai bine modul de lucru cu sesiuni si functia session_start(), folosim un
exemplu in care avem o pagina principala "a.php" unde cream o variabila cu numele
"userName", atribuindu-i valoarea "MarPlo", pe care o stocam intr-o sesiune PHP, pagina
contine o legatura catre o alta pagina "b.php", aceasta din urma va folosi functia
session_start() pentru a prelua, prin sesiune, valoarea variabilei "user_name" din pagina
"a.php", astfel putem folosi valoarea acestei variabile intr-un script din pagina "b.php".
Continutul fisierului "a.php" este urmatorul:
<?php
//Fisierul a.php
session_start();
if(!isset($_SESSION['userName']))
$_SESSION['userName'] = "MarPlo";
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<html>
<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>
Continutul fisierului "b.php" este urmatorul:
<?php
//Fisierul b.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>
Observati ca atribuirea, respectiv citirea variabilelor se face folosind variabila super-globala :
_SESSION.
Deschizand prima pagina, "a.php", va fi afisat urmatorul rezultat
Aceasta este pagina "a.php"
Variabila de sesiune are valoarea: MarPlo
Legatura spre pagina b.php
Cand apasam click pe link-ul "spre pagina b.php", se va deschide aceasta pagina, afisand
urmatorul continut:
Aceasta este pagina "b.php"
Variabila de sesiune are valoarea: MarPlo
- In acest exemplu se observa ca pagina "b.php" detine informatii despre variabila de sesiune
creata in pagina "a.php".

2. Manipularea variabilelor sesiunii.


In anumite momente ar putea fi util sa aflam identificatorul sesiunii curente. Pentru aceasta
folosim functia session_id(), ca in exemplul urmator:

<?php
echo "<br /> Identificatorul sesiunii curente SID este:". session_id();
//Va afisa un rezultat asemanator cu: "Identificatorul sesiunii curente SID
este:2846240682abf24a09f42664fc03bbf3"
?>
Functia session_id() accepta un parametru. Astfel putem seta un anumit SID pentru sesiunea
curenta. In acest caz trebuie sa apelam functia session_id() inainte de functia :
session_start(), ca in exemplul urmator:
<?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 alti utilizatori neautorizati, nu este indicat sa
pastram aici informatii esentiale cum sint parolele.
Pentru a creea un minimum de securitate putem codifica aceste informatii, folosind functtile
de codare oferite de PHP:

md5() sau crypt()

- Functia md5(sir_de_caractere) codifica sirul de caractere furnizat ca parametru si


returneaza un sir de 32 charactere hexazecimale. Aceasta functie foloseste algoritmul de
criptare: "RSA Data Security, Inc. MD5 Message-Digest Algorithm".
Iata un exemplu de utilizare al acestei codificari:
<?php
$user = "MarPlo";
$codificat = md5($user);
echo "<br /> user codificat = $codificat";
// Va afisa: "user codificat = 0a460e3d95526f05a0064154ad94a378"
?>
Consideram cazul in care avem o variabila de sesiune "$parola" care pastreaza o parola si
dorim sa codificam si sa transmitem acrasta variabila astfel incat utilizatorii neautorizati sa nu
o poata folosi. Pentru aceasta folosim functia md5(), pentru a o cripta. Mai mult initializam o
variabila globala cu numele "$secret", careia ii atribuim ca valoare un sir de caractere
oarecare. In continuare, inainte de a introduce parola intr-o sesiune PHP, concatenam valorile
"$secret" si "$parola" si criptam rezultatul. Astfel, chiar daca cineva reuseste sa decripteze
variabila de sesiune, este putin probabil sa poata separa sirul "$secret" creat de noi.
Este bine sa pastram acest fisier intr-un director pretejat, cum ar fi cu un nivel mai sus decat
directorul pentru pagini de Web.
Iata cum se prezinta exemplul prezentat mai sus. (consideram o variabila "$passtest" care
verifica daca valoarea acesteia este egala cu parola):
<?php
$secret = 'abcgfd43599oopjhfdxcaqq30pmnvcx';
$parola = 'mypass';
$cod = md5($secret. $parola);

session_start();
$_SESSION['parola'] = $cod;
// Consideram variabila "$passtest" pentru a testa daca valoarea acesteia este egala cu parola
if (md5($secret. $passtest) == $_SESSION['parola'])
echo "Parola acceptata";
else
echo "Parola nu este valida";
?>
Astfel, daca valoarea variabilei "$passtest", care poate fi obtinuta de exemplu dintr-un
formular HTML, este identica cu parola pastrata de noi, va fi afisat mesajul "Parola
acceptata".

3. Stergerea unei sesiuni


Pentru a putea sterge o sesiune este necesar sa incepem scriptul PHP cu instructiunea:
session_start(), ca intotdeauna cand folosim sesiuni.
Pentru a sterge toate variabilele memorate in matricea $_SESSION folosim:

unset($_SESSION);

Pentru a sterge doar o variabila memorata in sesiune folosim :

unset($_SESSION['nume_variabila']);

Datele sesiunii sunt memorate in server in fisiere temporare. Pentru a sterge datele sesiunii
din server folositi:

session_destroy()

Iata un exemplu care ilustreaza aceasta procedura:


<?php
// Initializeaza datele sesiunii
session_start();
// Sterge tabloul $_SESSION
unset($_SESSION);
// Sterge datele de sesiune din server
session_destroy();
echo "<br /> Sesiunea curenta a fost inchisa";
?>

Optiuni pentru utilizarea caracterelor


speciale

Invatati rolul optiunilor "magic_quotes"

Invatati sa convertiti caracterele speciale prin schimbarea semnificatiei acestora


utilizand functii PHP

Invatati sa convertiti caracterele speciale specifice HTML si cele din sirurile folosite
pentru adrese URL

1. Ghilimelele magice
Apar situatii cand dorim sa introducem ghilimele in interiorul unui textintr-o baza de date, dar
SQL nu permite nglobarea unor ghilimele simple n interiorul valorii unui sir. Probleme
similare pot aparea la introducerea unui text ce contine caractere speciale precum: \ + * ? ^
( $ ), si care sunt trimise la un script PHP.
PHP include functii si facilitati pentru rezolvarea acestor situatii.
Fisierul de initializare PHP ("php.ini") contine optiuni de configurare care determina modul
n care PHP controleaza datele provenite de la o sursa externa, cum sunt un formular HTML,
un fisier text sau o baza de date.
Optiunea magic_quotes_gpc specifica modul n care PHP manipuleaza operatiile HTTP:
GET si POST, precum si operatiile dintre PHP si MySQL sau cele cu variabile cookie. Daca
optiunea este activata (ON), PHP prefixeaza automat ghilimelele simple, ghilimelele duble,
caracterele backslash si caracterele nule (caracterele a caror valoare ASCII este 0) care apar
ntr-o variabila HTTP, cu un caracter backslash (\).
Optiunea magic_quotes_runtime specifica modul n care PHP manipuleaza datele de origine
externa. Daca aceasta optiune este activata, PHP ignora automat ghilimelele simple si duble
care apar n datele externe, inclusiv datele din formularele HTML, din fisiere si baze de date.
Daca este activata optiunea magic_quotes_sybase, aceasta modifica efectul optiunilor
magic_quotes_gpc si magic_quotes_runtime, astfel nct un caracter de tip ghilimele
simple sa fie prefixat cu un alt caracter de tip ghilimele simple, nu cu un backslas.
Dar, n general, accesul la aceste comenzi din fisierul "php.ini" il are administratorul de
sistem iar utilizatorii obisnuiti nu trebuie sa aiba posibilitatea de a aduce modificari n fisier.
Astfel, pot fi folosite functii PHP care sa seteze aceste optiuni pe durata scriptului respectiv.
Functiile get_magic_quotes_gpc() si get_magic_quotes_runtime() returneaza fiecare
valoarea optiunii PHP corespunzatoare setate in fisierul "php.ini". Mai mult, puteti folosi
functia set_magic_quotes_runtime() pentru a specifica valoarea optiunii
magic_quotes_runtime pentru restul duratei scriptului PHP curent.
De exemplu, pentru a dezactiva optiunea magic_quotes_runtime, invocati functia

set_magic_quotes_runtime(0);

Alternativ, pentru a activa aceasta optiune intr-un script, folositi functia

set_magic_quotes_runtime(1);

2. Conversia caracterelor speciale si anularea acesteia


PHP poate converti ghilimelele simple si duble dintr-un sir, folosind functia addslashes().
Daca PHP nu este configurat astfel nct sa converteasca aceste caractere din sir n mod
automat, atunci trebuie sa executati manual aceasta modificare. Pur si simplu utilizati functia
addslashes(), transferndu-i ca argument sirul text. Aceasta adauga caracterul backslash "\"

pentru conversia caracterelor de tip ghilimele simple, ghilimele duble, backslash si caractere
nule
Aceasta conversie nu trebuie confundata cu o alta, si anume conversia de tip, care foloseste
caracterul backslash (\).
Conversia mentionata n acest capitol consta din modificarea semnificatiei anumitor
caractere, pentru a preveni o interpretare eronata a acestora de catre programele specializate,
precum MySQL. Din acest motiv, toate conversiile mentionate n acest capitol fac referire la
modificarea semnificatiei unor caractere, nu la conversiile de tip.
De exemplu, pentru a converti continutul sirului "$text" si a plasa rezultatul n variabila
"$modificat", invocati functia dupa cum urmeaza:

$modificat = addslashes($text);

Functia stripslashes() executa operatia complementara de anulare a conversiei, elimina


caracterele backslash inserate.
Pentru a anula conversia sirului "$modificat" si a plasa rezultatul n variabila "$nemodificat",
utilizati functia dupa cum urmeaza:

$nemodificat = stripslashes($modificat)

O alta functi utila pentru conversia caracterelor speciale este quotemeta(), aceasta va insera
un backslash nainte de fiecare aparitie a urmatoarelor caractere: . \ + * ? [ ^ ] ( $ ). Ca si
addslashes(), functia quotemeta() se foloseste in mod similar, prelund ca argument sirul text.

3. Conversia textelor HTML


Cnd lucrati cu texte HTML, conversia executata de functia addslashes() nu este suficienta,
deoarece HTML este sensibil si la alte caractere speciale dect cele convertite de functia
addslashes().
In schimb puteti folosi functia htmlspecialchars().
Aceasta converteste caracterele la care HTML este sensibil. Functie este utila cand se doreste
ca un anumit sir sa nu contina marcaje HTML, ceea ce poate fi important in modul de operare
a unei aplicatii, cum ar fi un tabel HTML.
Functia are urmatoarea forma:

htmlspecialchars("text" [,stil_ghilimele])

Unde "text" specifica sirul care contine textul ce urmeaza a fi convertit, iar argumentul
optional "stil_ghilimele" specifica modul de conversie a ghilimelelor simple, respectiv duble.
Valorile permise ale optiunii "stil_ghilimele" sunt:

ENT_COMPAT - precizeaza ca trebuie convertite numai ghilimelele duble

ENT_QUOTES - precizeaza ca trebuie convertite ambele tipuri de ghilimele

ENT_NOQUOTES - precizeaza ca nu trebuie convertit nici un tip de ghilimele

De exemplu, pentru a converti toate caracterele HTML speciale, inclusiv ambele tipuri de
ghilimele, din sirul "$texthtml", utilizati functia dupa cum urmeaza:

$conversie = htmlspecialchars($texthtml);

Functia htmlspecialchars() executa urmatoarele conversii:


Caracter
Rezultatul conversiei
& (ampersand)
"(ghilimele duble)

&amp;
&quot; (numait cnd este specificat opiunea ENT_COMPAT sau
ENT_QUOTES)

'(ghilimele simple)

&#39; (numai cnd este specificat opiunea ENT_QUOTES)

< (mai mic dect)

&lt;

> (mai mare dect)

&gt;

O functie PHP conexa, htmlentities(), converteste toate caracterele cu echivalente n entitati


HTML. Este acceptat setul de caractere ISO-8859-1
Si o alta functie utila pentru conversia textelor HTML este functia n12br(). Aceasta insereaza
tag-ul <br /> anterior fiecarui caracter de tip linie noua care se gaseste in argumentul sau.

4. Conversia pentru adresele URL


Cnd doriti sa codificati in PHP date ca parte a unei adrese URL, puteti folosi functia
urlencode().
Aceasta functie nlocuieste fiecare caracter non-alfanumeric (cu exceptia spatiilor) cu un
simbol al procentului (%), urmat de doua cifre hexazecimale care contin valoarea ASCII a
caracterului. Spatiile sunt codificate sub forma de simboluri ale adunarii (+).
O functie conexa, n speta rawurlencode(), executa o conversie similara; cu deosebirea ca
nlocuieste spatiile cu %20, conform RFC 1738, standardul Internet pentru codificarea
adreselor URL.
Functiile urldecode() si rawurldecode() executa operatii complementare. Aceste functii sunt
utile la crearea adreselor URL care includ perechi 'nume-valoare'.
De exemplu, sa presupunem ca avem un script PHP care trebuie sa creeze o pagina HTML ce
contine o hiperlegatura spre adresa URL a unui motor de cautare. Termenul de cautare trebuie
transmis n forma codificata URL, pentru ca serverul Web si browserul sa nu se "impiedice"
de caracterele speciale. Pentru a codifica datele pentru o adresa URL, puteti folosi o metoda
ca in exemplul urmator:

echo <a href="www.sitecautare.com?cuvantcheie='. urlencode($text). '">;

Ca sa intelegeti mai bine aceste moduri de conversie, puteti studia amanuntit exemplul
urmator:
<?php
// Variabila $a contine textul ca va fi convertit
$a = "abc 123 ' <br /> / < & > ( % ) * , $ . # ^ ! [ \ ] { @ } : ; = ?";

$b = addslashes($a);
$c = stripslashes($b);
$d = quotemeta($a);
$e = htmlentities($a);
$f = urlencode($a);
echo '<br /> Conversie addslashes() = '. $b;
echo '<br /> Anulare conversie addslashes() = '. $c;
echo '<br /> Conversie quotemeta($a) = '. $d;
echo '<br /> Conversie caractere HTML = '. $e;
echo '<br /> Conversie pt. adrese URL = '. $f;
?>
Datele de iesire ale exemplului sunt urmatoarele:
Conversie addslashes() = abc 123 \' / < & > ( % ) * , $ . # ^ ! [ \\ ] { @ } : ; = ?
Anulare conversie addslashes() = abc 123 ' / < & > ( % ) * , $ . # ^ ! [ \ ] { @ } : ; = ?
Conversie quotemeta($a) = abc 123 ' / < & > \( % \) \* , \$ \. # \^ ! \[ \\ \] { @ } : ; = \?
Conversie caractere HTML = abc 123 ' <br /> / < & > ( % ) * , $ . # ^ ! [ \ ] { @ } : ; = ?
Conversie pt. adrese URL = abc+123+%27+%3Cbr+%2F%3E+%2F+%3C+%26+%3E+
%28+%25+%29+
%2A+%2C+%24+.+%23+%5E+%21+%5B+%5C+%5D+%7B+%40+%7D+%3A+%3B+
%3D+%3F

Notiuni fundamentale despre bazele de date


si SQL (1)

nvatati modul in care este structurata o baza de date

nvatati modul de proiectare a unei baze de date

nvatati sa creati baze de date MySQL si tabele

nvatati sa stergeti si sa modificati tabele dintr-o baza de date MySQL

Acesta lectie explica bazele de date relationale si modul de utilizare a acestora.


Spre deosebire de fisiere, bazele de date prezinta multe avantaje, inclusiv o mai mare
protectie a integritatii datelor si asigurarea partajarii datelor.
In aceasta lectie va fi prezentat SQL, limbajul standard pentru crearea, accesul si manipularea
bazelor de date relationale. Detaliile (cu precadere sintaxa SQL sunt cele referitoare la
MySQL, cel mai popular limbaj de baze de date folosit cu PHP.

1. Structura unei baze de date relationale


O baza de date relationale stocheaza datele n tabele, iar fiecare tabel stocheaza in coloane
informatii despre un anumit tip de element.
In continuare puteti vedea un tabel caracteristic dintr-o baza de date relationala care prezinta
personalitati istorice ale Americii.

PersoanaID

Nume

AnNastere

001

George Washington

1732

002

John Adams

1735

003
Thomas Jefferson
1743
Primul rnd al tabelului atribuie nume pentru fiecare coloana.
Fiecare rnd al tabelului, altul dect primul rnd, descrie o singura personalitate. De exemplu,
al doilea rnd descrie o personalitati pe nume George Washington.
Fiecare coloana, descrie un anumit atribut al personalitatii De exemplu, a doua coloana
contine numele personalitatilor, iar a treia coloana contine anii n care s-au nascut acestia.
Pentru a se putea face referire, mai usor, la un anumit rnd al tabelului, se obisnuieste ca
fiecare tabel sa contina o coloana care identifica n mod unic fiecare rnd. Aceasta coloana se
numeste "cheia primara" a tabelului. In exemplul prezentat, coloana numita "PersoanaID"
serveste drept cheie primara.
Daca nici o coloana nu contine o valoare unica pentru fiecare rnd, se pot combina valorile
mai multor coloane pentru a crea o "cheie primara compusa".
O baza de date relationala se numeste astfel datorita capacitatii sale de a stabili relatii ntre
date din mai multe tabele.
Urmatorul exemplu prezinta doua tabele si o relatie ntre acestea.
PersoanaID
Nume
AnNastere
Meserie
PersoanaID
001

George Washington

1732

Arhitect

003

002

John Adams

1735

General

001

003
Thomas Jefferson
1743
Filozof
002
Al doilea tabel contine informatii despre meseriile caracteristice ale persoanelor prezentate in
exemplul anterior. Mai precis, tabelul identifica persoana cu o anumita meserie. Numele
meseriei serveste drept cheie primara a tabelului, care mai contine, n afara de aceasta, o
singura coloana.
Coloana respectiva stocheaza atributul "PersoanaID" din primul tabel, al persoanei care
cunoaste meseria descrisa de un anumit rnd. De exemplu, angajatul cu numarul 003 este
arhitect.
Retineti ca "PersoanaID" este att cheia primara a tabelului original, dar si o coloana din noul
tabel. Coloana "PersoanaID" a noului tabel se numeste "cheie externa"; desi nu este cheia
primara a noului tabel, este cheia primara a unui alt tabel.
Aplicatia software care gazduieste o baza de date se numeste "sistem de gestiune a bazelor de
date" (SGBD). Exista multe sisteme de gestiune a bazelor de date, printre cele mai populare
asemenea sisteme se numara: DB2 , Interbase , MySQL , Oracle , Postgresql , SQL Server ,
Sybase .
MySQL este cel mai popular sistem de gestiune a bazelor de date destinat utilizarii cu PHP, n
mare masura deoarece este gratuit. Totusi, prin intermediul PHP este posibil accesul la
aproape orice SGBD modern.
Bazele de date relationale nteleg SQL (Structured Query Language), un limbaj relativ
simplu, folosit pentru solicitarea datelor. In ciuda simplitatii sale, SQL este un limbaj foarte
puternic, care poate obtine accesul la date stocate n mai multe tabele, poate filtra datele
dorite si poate sorta, rezuma si afisa rezultatele.
n general, bazele de date relationale si stocheaza datele ntr-un singur fisier sau catalog.
Aceasta caracteristica de organizare faciliteaza administrarea datelor, deoarece executarea

copiei de siguranta, respectiv restaurarea unui singur fisier sau catalog se realizeaza mai usor.
Sistemele de gestiune a bazelor de date relationale necesita mai multe cicluri de procesor
pentru a satisface o cerere de date dect cele necesare pentru accesul la un fisier normal, dar
ofera protectie sporita a datelor, iar pentru accesul la distanta usureaza traficul deoarece
majoritatea operatiilor sunt efectuate de programul SQL, astfel singurele date transmise in
retea ar fi rezultatul cerut.

2. Proiectarea unei baze de date


Cand creati un tabel intr-o baza de date, este important sa tineti cont de "cheia primara" si sa
va bazati pe aceasta. Coloanele dintr-un tabel trebuie sa se bazeze pe cheia primara n
totalitatea sa.
O alta operatie importanta este specificarea unui tip de date pentru fiecare coloana.
Majoritatea bazelor de date relationale accepta urmatoarele tipuri de date generale:

Caracter

ntreg

Zecimal

Data si ora

Binar

Tabelul urmator rezuma tipurile de date cele mai frecvent utilizate, acceptate de MySQL si de
majoritatea bazelor de date relationale. MySQL accepta multe alte tipuri de date, dar acestea
sunt cele mai folosite.
Principalele tipuri de date din MySQL
Tip de date
BLOB
CHAR(m)
DATE

Descriere
- Date binare arbitrare, cu o lungime maxima de 65535 octeti
- Un sir de caractere de lungime fixa, cu un maxim de m caractere, unde
m este mai mic dect 256. Pentru obtinerea lungimii dorite, se insereaza
spatii finale
- O data n format an-luna-zi; de exemplu 2008-10-15

DECIMAL
DECIMAL(m,d)

- Un numar zecimal, reprezentat sub forma de sir cu "m" cifre, din care
"d" se afla la dreapta punctului zecimal. Daca "m" si "d" sunt omise, n
mod prestabilit se vor utiliza valorile 10 si 0

DOUBLE
DOUBLE (m, d)

- Un numar cu virgula mobila, cu dubla precizie, avnd o latime de


afisare egala cu "m" si un numar de "d" cifre dupa virgula.

FLOAT(m,d)

- Un numar cu virgula mobila, cu simpla precizie, avnd o latime de


afisare egala cu "m" si un numar de "d" cifre dupa virgula

- Un ntreg pe 32 de biti. Daca se specifica atributul UNSIGNED,


INTEGER
domeniul de valori este cuprins ntre 0 si 4294967295; n caz contrar,
INTEGER UNSIGNED
domeniul este cuprins ntre valorile -2147483648 si 2147483647

NUMERIC
NUMERIC (m, d)

- Similar cu DECIMAL

REAL
REAL(m, d)

- Similar cu DOUBLE

- Un ntreg pe 16 biti. Daca se specifica atributul UNSIGNED,


SMALLINT
domeniul de valori este cuprins ntre 0 si 65535; n caz contrar,
SMALLINT UNSIGNED
domeniul este cuprins ntre valorile 32768 si 32767
TIME
TIMESTAMP
TIMESTAMP(m)

- Ora n format ora-minut-secunda; de exemplu, 08-20-00. O valoare de


tip data si ora, n format an-luna-zi ora-minut-secunda; de exemplu,
1976-01-05 00:00:00. Aceasta reprezentare este similara celei returnate
de functiile UNIX. Pt. stocare valoarea este transformata din timpul
curent in UTC si transformata invers la solicitarea datei.

VARCHAR(m)

- Un sir caracter de lungime variabila, cu un maximum de "m" caractere,


unde m este mai mic dect 256 pentru versiuni MySQL anterioare 5.0.3,
iar pt. cele mai noi limita este 65 535 bytes. Spatiile finale au fost
eliminate

Iata cateva indicatii pentru selectarea tipurilor de date:

- Alegeti BLOB ca tip pentru datele pe care nu trebuie sa le manipulati si la care nu


veti obtine acces prin intermediul limbajului SQL.

- Alegeti un tip data sau ora adecvat pentru coloanele care contin date calendaristice
sau ore.

- Alegeti un tip numeric pentru coloanele folosite pentru numere sau n calcule.

o - Pentru cantitati foarte mari sau foarte mici, alegeti DOUBLE ca tip de date.
o - Pentru coloane care contin numere fara parte zecimala de dimensiuni medii,
alegeti SMALLINT sau INTEGER ca tip de date.
o - Pentru alte coloane care contin date numerice, alegeti DECIMAL ca tip de
date.

- Alegeti CHAR sau VARCHAR ca tip pentru celelalte coloane, chiar si pentru cele
care contin cifre, cum ar fi un cod postal.

3. Crearea unei baze de date MySQL si a unui tabel


Dupa atata teorie, sa trecem la lucruri mai practice.
La nceput, o baza de date nu contine tabele. Pentru a crea o baza de date si apoi un tabel ntro baza de date, folositi un sub-limbaj SQL special, cunoscut sub numele de Data Definition
Language (DDL).
Puteti emite comenzi DDL si alte comenzi SQL prin intermediul unui interpretor SQL sau
prin intermediul PHP. Pentru inceput va fi prezentat modul de emitere a comenzilor SQL

folosind un interpretor SQL. In lectiile urmatoare va fi prezentat modul de emitere a


comenzilor SQL utiliznd PHP.
Dupa ce aveti instalat MySQL, deschideti iterpretorul "MySQL Command Line Client"
(asemanator cu, "Command Promt") in care scrieti comenzile SQL (n general, SQL nu este
sensibil la diferenta ntre majuscule si minuscule. Deci, puteti scrie comensile cum preferati,
cu majuscule sau minuscule).
Ca regula, dupa scrierea comenzilor, la sfarsit trebue sa fie caracterul "punct si virgula" (;)
Pentru a crea o baza de date, folositi urmatoarea comanda:

CREATE DATABASE nume_db;

Unde "nume_db" este numele bazei de date care va fi creata.


Inainte de a crea un tabel sau a lucra cu alte comenzi intr-o baza de date, trebuie sa intrati in
baza de date existenta, acest lucru se face folosind comanda:

USE nume_db;

Unde "nume_db" este numele bazei de date. Cu aceeasi comanda "USE nume_db" se
schimba si baza de date in care vrem sa lucram.
Pentru a crea un tabel ntr-o baza de date, emiteti comanda "CREATE TABLE", care are
urmatoarea forma:

CREATE TABLE tabel (coloana tip, coloana tip, );

Unde "tabel" este numele tabelului, "coloana" este numele unei coloane, "tip" este tipul
datelor incluse n coloana, se poate specifica un numar nedefinit de coloane.
De exemplu, comanda urmatoare creeaza un tabel numit "carte", care contine coloanele
"carteid", "titlu" si "pret":
CREATE TABLE carte (carteid CHAR(10), titlu VARCHAR(255), pret decimal(5,2));
- n afara tipului de date, intre paranteze, puteti specifica si alte atribute optionale ale unei
coloane:

NOT NULL - Fiecare rnd trebuie sa contina o valoare a coloanei asociate; valorile
nule nu sunt permise.

DEFAULT valoare - Daca nu este data o valoare a coloanei asociate, se va presupune


valoarea specificata.

AUTO INCREMENT - MySQL va repartiza n mod automat un numar de serie ca


valoare a coloanei asociate.

PRIMARY KEY - Coloana asociata este cheia primara a tabelului care o contine.

Iata un exemplu ceva mai complicat de creare a unui tabel, care foloseste unele din aceste
atribute optionale:
CREATE TABLE carte (carteid CHAR(10) PRIMARY KEY,
titlu VARCHAR(255) NOT NULL,
pret DECIMAL(5,2) DEFAULT 50.00);

4. Stergerea si modificarea unui tabel


Stergerea unui tabel sau a unei coloane este un act irevocabil, datele fiind definitiv sterse.
Pentru a sterge un tabel, scrieti urmatoarea comanda:

DROP TABLE tabel;

Unde "tabel" este numele tabelului care va fi sters.


Dupa crearea unui tabel, l puteti modifica prin emiterea unei comenzi "ALTER TABLE",
care are mai multe forme.
Urmatoarea forma a comenzii va permite sa stergeti o coloana din tabel:

ALTER TABLE tabel DROP coloana;

Unde "tabel" este numele tabelului care va fi modificat, iar "coloana" este numele coloanei
care va fi stearsa.
O alta forma a comenzii va permite sa adaugati o noua coloana n tabel:

ALTER TABLE tabel ADD coloana tip [optiuni];

Unde "tabel" este numele tabelului care va fi modificat, "coloana" este numele coloanei care
va fi adaugata, "tip" este tipul noii coloane, iar "[optiuni]" constituie toate optiunile dorite,
precum PRIMARY KEY.
De exemplu, pentru a adauga coloana "pretnou" la tabelul "carte", scrieti comanda:
ALTER TABLE carte ADD pretnou DECIMAL(5,2) DEFAULT 50.00;
Pentru a vedea toate bazele de date create in MySQL, folositi urmatoarea comanda:

SHOW DATABASES;

Pentru a vedea toate tabelele dintr-o baza de date din MySQL, folositi urmatoarea comanda:

SHOW TABLES;

Pentru a vedea toate coloanele dintr-un tabel, si atributele acestora, folositi urmatoarea
comanda:

SHOW COLUMNS FROM tabel;

Notiuni fundamentale despre bazele de date


si SQL (2)

Invatati sa acordati si sa revocati privilegii de acces intr-o baza de date SQL

Invatati sa accesati datele stocate intr-o baza de date SQL

Invatati sa modificati datele si tabelul dintr-o baza de date

Invatati sa sortati si sa grupati datele de iesire

1. Acordarea si revocarea privilegiilor de acces


Cnd un utilizator ncearca sa obtina acces la o baza de date relationala, aplicatia care
gazdueste baza de date (in cazul nostru MySQL) verifica daca utilizatorul are permisiunea de
a executa operatia. Administratorul de sistem poate folosi comanda MySQL "GRANT"
pentru a autoriza un utilizator sa obtina accesul la un tabel din baza de date. Comanda are
urmatoarea forma:

GRANT ALL ON tabel TO utilizator IDENTIFIED BY parola;

Unde "tabel" este numele tabelului, "utilizator" este numele contului de utilizator, iar "parola"
este parola pe care o va furniza utilizatorul pentru a-si proba identitatea.
Alternativ, administratorul de sistem poate autoriza un utilizator sa obtina acces la orice tabel
dintr-o baza de date specificata, folosind urmatoarea forma a comenzii "GRANT":

GRANT ALL ON baza_de_date.* TO utilizator IDENTIFIED BY parola;

De exemplu, comanda urmatoare autorizeaza pe utilizatorul "Marius" sa obtina acces la toate


tabelele din baza de date numita "testdb", ori de cte ori utilizatorul furnizeaza parola
"mypassword":
GRANT ALL ON testdb.* TO Marius IDENTIFIED BY mypassword;
Comanda "REVOKE" se poate folosi pentru retragerea privilegiilor acordate anterior,
interzicerea accesului.
Comanda are urmatoarele forme:

REVOKE ALL ON tabel FROM utilizator;

REVOKE ALL ON baza_de_date.* FROM utilizator;

De exemplu, pentru a revoca toate privilegiile (din toate bazele de date) utilizatorului
"tip_rau", scrieti comanda:
REVOKE ALL ON *.* FROM tip_rau;
Comanda "GRANT" are si o forma mai complexa pentru a autoriza accesul numai la anumite
coloane specificate. Forma avansata a acestei comenzi este:

GRANT privilegiu (coloane) ON tabel TO utilizator IDENTIFIED BY 'parola;


sau
GRANT privilegiu (coloane) ON baza_de_date.* TO utilizator IDENTIFIED BY
'parola;

- Unde "privilegiu" este privilegiul care urmeaza a fi extins, "coloane" sunt coloanele carora
li se aplica privilegiul, iar "tabel", "baza_de_date", "utilizator" si "parola" au semnificatiile
cunoscute.
Sunt permise si forme similare ale comenzii REVOKE:

REVOKE privilegiu (coloane) ON tabel FROM utilizator;


sau
REVOKE privilegiu (coloane) ON baza_de_date.* FROM utilizator;

ntre privilegiile posibile se numara urmatoarele:

INSERT - care permite adaugarea de date in coloana specificata

SELECT - care permite accesul de citire la rndurile care contin coloana specificata

UPDATE - care permite actualizarea rndurilor care contin coloana specificata

De exemplu, pentru a permite unui utilizator sa obtina accesul la o coloana, fara a o modifica,
puteti folosi o secventa de comenzi similara cu urmatoarea:
REVOKE ALL ON carte FROM Marius;
GRANT
SELECT(carteid, titlu, pret),
INSERT(carteid, titlu, pret),
UPDATE(carteid, titlu, pret)
ON carte TO php IDENTIFIED BY 'mypassword';
REVOKE INSERT(pret) ON carte FROM Marius;
REVOKE UPDATE(pret) ON carte FROM Marius;
- Prima comanda revoca toate privilegiile de la nivelul tabelului; n caz contrar, aceste
privilegii le vor elimina pe cele situate la nivel de coloana.
Pentru a vedea privilegiile acordate unui anumit utilizator, folositi urmatoarea comanda:

SHOW GRANTS FOR nume_utilizator;

Caracteristica privilegiilor furnizata de MySQL este mai sofisticata si furnizeaza mult mai
multe optiuni. Pentru mai multe informatii, consultati manualul SQL de la adresa
www.mysql.com

2. Accesul la datele dintr-o baza de date, interogarile SQL


n afara de Data Definition Language, SQL include Data Manipulation Language (DML).
DML va permite sa formati interogari, care obtin accesul la datele aflate ntr-o baza de date
relationala si raporteaza aceste date. De asemenea, puteti folosi DML pentru a insera,
actualiza si sterge rndurile dintr-un tabel.
Cea mai elementara forma de interogare este comanda "SELECT" simpla.
Cea mai simpla interogare raporteaza toate coloanele din toate rndurile unui tabel.
Interogarea are urmatoarea forma:

SELECT * FROM tabel;

- Unde "tabel" este numele tabelului la care se va obtine accesul.


Aceasta comanda va afisa un tabel cu fiecare rnd pe o linie separata. Datele de iesire includ
numele coloanelor si linii care separa coloanele.
Daca doriti sa selectati numai anumite coloane sau sa raportati coloanele ntr-o anumita
ordine, puteti folosi urmatoarea forma a comenzii "SELECT":

SELECT coloana1, coloana2 FROM tabel;

- Unde "tabel" este numele tabelului, iar "coloana1" si "coloana2" sunt coloanele la care se va
obtine accesul si al caror continut va fi afisat.
Puteti specifica mai multe coloane, separate prin virgula.
Daca vreti sa fie selectate numai acele rnduri care satisfac un anumit criteriu, clauza
"WHERE" va permite sa specificati o conditie; rndurile care nu satisfac conditia nu sunt
raportate.
De exemplu, iata o interogare care raporteaza un singur rnd:
SELECT titlu, pret FROM carte WHERE carteid=1;
Forma conditiilor folosite n sub-limbajul DML al limbajului SQL este similara cu aceea a
conditiilor PHP. Puteti folosi oricare din urmatorii operatori relationali:

<>

Inegalitate

!=

Inegalitate, diferit de

<

Mai mic decat

>

Mai mare decat

<=

Mai mic sau egal cu

=>

Mai mare sau egal cu

Egalitate

Puteti compara valoarea unei coloane cu aceea a altei coloane, respectiv valoarea unei
coloane cu o valoare string. Valorile string SQL (sirurile) trebuie sa fie incluse ntre ghilimele
simple, nu ntre ghilimelele duble.
Cnd unei coloane nu i-a fost repartizata nici o valoare, SQL i atribuie valoarea speciala
NULL. De asemenea, programatorii pot atribui n mod explicit valoarea NULL unei coloane.
Comparatiile obisnuite cu valori NULL, care folosesc operatorii de (in)egalitate, vor returna
un rezultat fals. Totusi, puteti folosi operatorul special "<=>". care compara valorile tinnd
cont de valoarea NULL. Daca folositi acest operator pentru a compara doua valori NULL, se
obtine un rezultat adevarat.
SQL include si numerosi operatori de comparatie non-algebrici:
Operator

Descriere

x BETWEEN y AND z Adevarat, daca valoarea lui x este cuprinsa ntre valorile lui y si z
x LIKE y
x NOT LIKE y
x IN (y1, y2)

Adevarat daca valoarea lui x este echivalenta cu modelul y


Adevarat daca valoarea lui x nu este echivalenta cu modelul y
Adevarat daca valoarea lui x este un membru al listei y1, y2. Lista
poate contine unul, doi sau mai multi membri

x NOT IN (y1, y2)


x IS NULL

Adevarat daca valoarea lui x nu este un membru al listei y1, y2.


Lista poate contine unul, doi sau mai multi membri
Adevarat daca x are valoarea NULL

x IS NOT NULL
Adevarat daca x nu are valoarea NULL
Sub-limbajul folosit pentru specificarea modelelor asociate operatorului "LIKE" este diferit
de cel folosit de PHP. Meta-caracterul "%" corespunde unui numar de zero sau mai multe
caractere, iar meta-caracterul "_" corespunde unui singur caracter.
Modelele, precum sirurile, sunt incluse ntre ghilimele simple.
- De exemplu, modelul '%ar%' corespunde oricarui sir care contine sub-sirul 'ar', inclusiv
siruri precum 'ar', 'arc' si 'un zar'.
Pentru a plasa un caracter "%" sau "_" ntr-un sir test, folositi secventa "\%" sau "\_"; ca n
PHP.
Ca si PHP, sub-limbajul DML din SQL va permite sa formati expresii logice care combina
expresiile relationale. Puteti folosi oricare din urmatorii operatori logici:

AND , && - SI, adevarat daca ambii operanzi sunt adevarati

OR , || - SAU, adevarat daca un operand este adevarat

NOT , ! - NU, adevarat daca operandul este fals

De exemplu, urmatoarea interogare raporteaza rndurile care au pretul de carte mai mare
dect 11 sau al caror titlu include sub-sirul 'Curs':
SELECT titlu, pret FROM carte
WHERE pret>11 OR titlu LIKE %Curs%;
Pentru a compara o valoare cu o expresie regulata n MySQL, folositi urmatoarea forma:
x REGEXP y, unde "x" este valoarea care va fi testata, iar "y" este o expresie regulata,
delimitata prin ghilimele simple.

3. Modificarea datelor dintr-o baza de date


Sub-limbajul SQL, Data Manipulation Language, include comenzi care va permit sa inserati
rnduri noi ntr-un tabel, sa actualizati una sau mai multe coloane ale rndurilor existente,
respectiv sa stergeri rnduri dintr-un tabel.
Pentru a insera un nou rnd ntr-un tabel, folositi comanda "INSERT", care are urmatoarea
forma:

INSERT INTO tabel VALUES (valoare1, valoare2);

- Unde "tabel" este numele tabelului la care se va adauga rndul.


- "valoare1" este valoarea pentru prima coloana din tabel, iar "valoare2" este valoarea celei
de-a doua coloane din tabel. Se pot da mai mult sau mai putin de doua valori; numarul
valorilor date ar trebui sa fie egal cu acela al coloanelor din tabel.
O coloana poate primi si valoarea "NULL", cu exceptia situatiilor cnd definitia coloanei nu
permite.
O forma mai buna (si recomandata) a comenzii INSERT specifica numele coloanelor carora
le sunt atribuite valorile:

INSERT INTO tabel (coloana1, coloana2) VALUES (valoare1, valoare2);

Unde coloana denumita "coloana1" primeste valoarea "valoare1", iar coloana denumita
"coloana2" primeste valoarea "valoare2".
Pot fi specificate mai mult sau mai putin de doua coloane si valori. Numarul coloanelor
specificate trebuie sa fie egal cu numarul valorilor specificate.
Coloanele care nu sunt denumite n comanda "INSERT" si care nu au o valoare prestabilita
(DEFAULT) primesc valoarea NULL, cu exceptia situatiilor cnd valoarea respectiva nu este
permisa (n acest caz, comanda INSERT esueaza).
Daca doriti sa adaugati mai multe randuri intr-un tabel, intr-o singura inserare, puteti folosi
urmatoarea forma a comenzii INSERT:

INSERT INTO tabel (coloana1, coloana2)


VALUES (valoare1, valoare2),
(valoare3, valoare4),
(valoare5, valoare6);

Pentru a modifica valoarea unui rnd sau mai multor rnduri existente ntr-un tabel, folositi o
comanda "UPDATE", care are urmatoarea forma:

UPDATE tabel SET coloana1=valoare1, coloana2=valoare2


WHERE conditie;

- Unde "tabel" este numele tabelului ale carui rnduri urmeaza sa fie modificate, "coloana1"
este numele primei coloane care urmeaza a fi modificata, "valoare1" este valoarea care va fi
repartizata n "coloana1", "coloana2" este numele celei de-a doua coloane care urmeaza a fi
modificata, "valoare2" este valoarea care va fi repartizata n "coloana2", iar "conditie"
identifica rndul sau rndurile care urmeaza a fi actualizate, dupa o anumita conditie.
Poate fi actualizat un numar mai mare sau mai mic de coloane. Daca se doreste ca toate
randurile coloanei sa fie actualizate, clauza "WHERE" poate fi omisa.
De exemplu, comanda urmatoare modifica din coloana "titlu" numele asociat cartii in
"Curs2", in randul unde coloana "pret" are valoarea 5.
UPDATE carte SET titlu=Curs2
WHERE pret=5;
Pentru a sterge un rnd dintr-un tabel, folositi comanda "DELETE", care are urmatoarea
forma:

DELETE FROM tabel WHERE conditie;

Daca se vrea a fi sterse toate rndurile tabelului, clauza WHERE poate fi omisa.
De exemplu, comanda urmatoare sterge rndul din tabelul "carte" asociat titlului "Curs2":
DELETE FROM carte WHERE titlu='Curs2';

4. Sortarea si gruparea

Deseori, este important ca datele sa fie raportate ntr-o anumita secventa. Puteti specifica
ordinea de raportare a rezultatelor interogarii folosind clauza "ORDER BY", care are
urmatoarea forma:

ORDER BY valoare

Daca se vor folosi mai multe cmpuri de sortare, acestea vor fi separate prin virgula.
Daca doriti sa indicati o sortare descendenta, n locul uneia ascendente, specificati "DESC"
dupa valoare.
De exemplu, pentru a ordona toate cartile n functie de pret, de la cel mai mare la cel mai mic,
respectiv dupa titlu pentru un pret egal, puteti folosi urmatoarea interogare:
SELECT pret, titlu FROM carte
ORDER BY pret DESC, titlu;
Pentru a include numai titlurile care au un pret mai mare de 50, adaugati o clauza WHERE la
comanda SELECT:
SELECT pret, titlu FROM carte
WHERE pret>50
ORDER BY pret DESC, titlu;
SQL include functii care va permit sa raportati valori diferite, valori utile, precum un numar
al rndurilor tabelului. Iata cele mai importante functii in acest sens:
Functie
Descriere
count(*)

- Numarul rndurilor din tabel

count(coloana)

- Numarul rndurilor din tabel care contin o valoare


diferita de NULL n coloana specificata

count(distinct coloana)

- Numarul valorilor distincte diferite de NULL care


apar n coloana specificata

avg(coloana)

- Valoarea mijlocie (medie) a coloanei numerice


specificate

min(coloana)

- Valoarea minima din coloana specificata

max(coloana)

- Valoarea maxima din coloana specificata

sum(coloana)
- Suma valorilor din coloana specificata
De exemplu, interogarea urmatoare raporteaza numarul cartilor si pretul mediu al acestora:
SELECT count(*), avg(pret) FROM carte;
- Datele de iesire vor fi afisate pe o singura linie.
Clauza SQL "AS" specifica un nume nou pentru o coloana sau expresie. Numele specificat
este folosit ca titlu n rapoartele SQL. Clauza "AS" este utila n lucrul cu functiile din tabelul
anterior, va ajuta sa identificati mai usor datele de iesire.
De exemplu, interogarea precedenta poate fi rescrisa pentru a include o clauza "AS", astfel:
SELECT count(*) AS Carte_Numar,
avg(pret) AS Pret_Mediu
FROM carte;
O alta clauza utila este "GROUP BY", aceasta are urmatoarea forma:

GROUP BY coloana-sortare

- Unde "coloana-sortare" este numele sau valoarea unei coloane, specificata ntr-o clauza
"ORDER BY", care trebuie sa urmeze dupa clauza "GROUP BY".
De exemplu, avem un tabel "carte" cu 4 coloane (carteid, titlu, anul si pret), interogarea
urmatoare raporteaza numarul cartilor si pretul mediu pentru fiecare an (anul) n parte:
SELECT count(*), avg(pret) FROM carte
GROUP BY anul
ORDER BY anul;
Pentru a include n datele de iesire numai grupurile selectate, specificati clauza "HAVING"
imediat dupa clauza "GROUP BY". Clauza "HAVING" are urmatoarea forma:

HAVING conditie

De exemplu, pentru a include numai cartile al caror atribut "anul" are valoare mai mare dect
1980, srieti urmatoarea interogare:
SELECT count(*), avg(pret) FROM carte
GROUP BY anul
HAVING anul>1980
ORDER BY anul;
Mai jos sunt afisati operatorii matematici folositi in SQL:

+
*
/
|
&
>>
<<
_

Adunare
Scadere
Inmultire
Impartire
SAU, la nivel de bit
SI la nivel de bit
Deplasare la dreapta
Deplasare la stanga
Complement la nivel de bit

Notiuni fundamentale despre bazele de date


si SQL (3)

Invatati principalele expresii si functii folosite in MySQL

Invatati sa preluati datele, prin "unire", din mai multe tabele

Invatati sa executati instructiuni MySQL scrise intr-un fisier extern

1. Expresii si functii
SQL va permite sa formati expresii folosind valori din coloane, valori literale si functii. Ca si
n PHP, puteti controla ordinea de evaluare a expresiilor SQL folosind paranteze pentru a
delimita sub-expresiile care trebuie evaluate mai intai.
Tabelele urmatoare rezuma functiile MySQL frecvent folosite
Functii matematice frecvent folosite n MySQL

Functie

Descriere

abs(x)

- Valoarea absoluta a lui x

atan(x)

- Arc tangenta lui x, unde x este dat n radiani

atan2(y,x)

- Arc tangenta lui y/x, unde semnele ambelor argumente sunt


folosite pentru a determina cadranul cercului trigonometric

ceiling(x)

- Cel mai mic ntreg care nu este mai mic dect x

cos(x)

- Cosinusul lui x, unde x este exprimat n radiani

exp(x)

- Baza logaritmilor naturali (e) ridicata la puterea x

floor(x)

- Cel mai mare ntreg care nu este mai mare dect x

log (x)

- Logaritmul natural al lui x

mod(x,y)

- Restul mpartirii x/y

power(x,y) - x la puterea y
rand(x)

- Valoare aleatoare cu virgula, mai mare sau egala cu zero si mai


mica dect unu

sign(x)

- Valoarea -1, 0 sau 1, dupa cum valoarea lui x este negativa, zero
sau pozitiva

sin(x)

- Sinusul lui x, unde x este dat n radiani

sqrt(x)

- Radacina patrata a lui x

tan(x)

- Tangenta lui x, unde x este dat n radiani


\Functii sir frecvent folosite n MySQL

Functie

Descriere

ascii(s)

- Codul ASCII al octetului celui mai din stnga al sirului s

char(n)

- Caracter al carui cod ASCII este n

concat(s1, s2) - Concatenarea sirurilor s1 si s2; cu alte cuvinte, s2 atasat la s1


lcase(s)

- Sirul s, unde toate majusculele au fost transformate n


minuscule

left(s,n)

- Primii n octeti ai sirului s, de la stnga la dreapta

length(s)

- Numarul octetilor din sirul s

locate(s1, s2)
ltrim(s)
right(s,n)
rpad(s1,n,s2)

- Pozitia primei aparitii a lui s1 n s2, respectiv zero daca s1 nu se


gaseste n s2
- Sirul s, cu eliminarea spatiilor de nceput
- Primii n octeti din sirul s, de la dreapta la stnga
- Sirul s1, completat la dreapta cu sirul s2 pna cnd rezultatul
are lungimea n

rtrim(s)

- Sirul s, cu spatiile finale eliminate

space(n)

- Un sir alcatuit din n spatii

substring(s,m,n)

- Sub-sir al lui s, care ncepe de la pozitia m si care are lungimea


n

trim(s)

- Sub-sir al lui s, cu spatiile initiale si finale eliminate

ucase(s)

- Sirul s, cu toate minusculele convertite n majuscule


Functii MySQL de data si ora frecvent utilizate

Functie

Descriere

dayofmonth(d) - Ziua din luna a datei specificate (1-31)


dayofweek(d)

- Ziua din saptamna a datei specificate (1 =duminica, 2=luni,,


7=smbata)

dayofyear(d) - Ziua din an a datei specificate (1-366)


hour(t)

- Partea orelor din momentul de timp mentionat (0-23)

minute(t)

- Partea minutelor din momentul de timp mentionat (0-59)

month(d)

- Luna datei specificate (1-12)

now()

- Data si ora curenta

second(t)

- Partea secundelor din momentul de timp mentionat (0-59)

week(d)

- Saptamna din an a datei specificate (0-53)

year(d)

- Partea anilor din momentul de timp mentionat (1000-9999)


Functii specifice MySQL

Functie
database()

Descriere
- Returneaza numele bazei de date deschise

get_lock(s,n) - Obtine o blocare a bazei de date


md5(s)
password(s)

- Returneaza o suma de control a sirului s, calculata dupa


algoritmul MD5
- Returneaza sirul s, criptat folosind algoritmul aplicat de MySQL
parolei

release_lock(s) - Anuleaza blocarea unei baze de date


user()

- Returneaza numele utilizatorului curent

version()

- Returneaza numarul versiunii MySQL

2. Uniri
SQL va permite sa obtineti accesul la mai multe tabele ntr-o singura interogare, n general,
aceasta operatie se executa pentru ca datele dintr-un tabel sa poata fi folosite cu date din alt
tabel.
De exemplu, sa presupunem ca baza de date este asemanatoare celei prezentate mai jos, unde
avem doua tabele, primul numit "persoane" iar cel de-al oilea numit "meserii", si o relatie
cheie externa - cheie primara (persoanaid) asociaza cele doua tabelele.
persoanaid

nume

AnNastere

meserie

persoanaid

001

George Washington

1732

Arhitect

003

002

John Adams

1735

General

001

003
Thomas Jefferson
1743
Filozof
002
Sa examinam urmatoarea interogare:
SELECT nume, meserie FROM persoane, meserii
WHERE persoane.persoanaid=meserii.persoanaid;
- Constructiile "persoane.persoanaid" si "meserii.persoanaid" se numesc "nume definite",
prima se refera la coloana "persoanaid" din tabelul "persoane", iar a doua se refera la coloana
"persoanaid" a tabelului "meserii".
- Clauza WHERE asigura o echivalenta ntre valoarea cheii externe din tabelul "meserii" cu
aceea a cheii primare din tabelul "persoane", (n absenta clauzei WHERE, se va stabili o
corespondenta ntre fiecare rnd din tabelul cu meserii si fiecare rnd din tabelul cu persoane;
un asemenea rezultat, numit "produs cartezian", contine n general multe rnduri - majoritatea
nedorite - si ca atare trebuie evitat).
- Rezultatul interogarii de mai sus este un raport care indica numele si meseria asociata
fiecarui angajat prezentat n tabelul "meserii".
O interogare ca aceasta, care combina date din mai multe tabele, se numeste "unire". Sunt
posibile si uniri mai complexe, care implica trei sau mai multe tabele.
Daca un rnd dat din tabelul principal (aici "persoane") nu are nici un rnd asociat n tabelul
cu detalii (aici "meserii"), rndul respectiv din tabelul principal nu va aparea n datele de
iesire ale unei uniri. In cazul acesta, pentru a determina aparitia acestei nregistrari din tabelul
principal, se poate folosi o categorie speciala de unire, cunoscuta sub numele de "unire la
stnga" sau "unire exterioara la stnga". Iata un exemplu:
SELECT nume, meserie FROM persoane
LEFT JOIN meserii
ON persoane.persoanaid=meserii.persoanaid;
Aceasta interogare va afisa toate persoanele, indiferent daca acestea au sau nu asociata o
meserie. Persoanele fara o meserie au specificatia NULL n coloana corespunzatoare
meseriei.

3. Executarea instructiunilor dintr-un fisier extern


Comenzile MySQL pot fi scrise si intr-un fisier extern (editat de exemplu, in Windows, cu
Notepad), acest fisier se numeste "script de shell".
Scriptul din fisierul extern poate fi executat din fereastra de comanda MySQL (MySQL
Command Line Client), utilizand comanda:

SOURCE nume_fisier

Unde "nume_fisier" este calea si numele fisierului in care se afla scriptul de shell.
De exemplu, scriem urmatoarele comenzi intr-un fisier numit "lucru.txt" pe care-l salvam in
directorul "C:/teste".
CREATE DATABASE lucrudb;
USE lucrudb;
GRANT ALL ON lucrudb.* TO php IDENTIFIED BY 'mypass';
CREATE TABLE angajat (
angajatnr SMALLINT PRIMARY KEY,
nume VARCHAR(50),
ore SMALLINT,
departament CHAR(16),

salariu DECIMAL(8,2),
data_angajare DATE);
INSERT INTO angajat (
angajatnr,
nume,
ore,
departament,
salariu,
data_angajare)
VALUES (
1,
'George Washinton',
40,
'Contabilitate',
500.00,
'2007-10-04'),
( 2,
'John Adams',
35,
'Marketing',
1000.00,
'2007-10-11'),
( 3,
'Thomas Jefferson washinton',
20,
'Vanzari',
1300.00,
'2007-07-02');
- Pentru a executa acest script, scriem in fereastra de comanda MySQL: SOURCE
C:/teste/lucru.txt
MySQL va executa comenzile din script ca si cum acestea ar fi scrise direct in linia de
comanda.
Exemplul de mai sus va crea o baza de date noua, numita "lucrudb", va acorda utilizatorului
"php" toate drepturile in utilizarea acestei baze de date, dupa care va crea tabelul "angajat",
cu 6 coloane ("angajatnr", "nume", "ore", "departament", "salariu", "data_angajare") in care
vor fi adaugate trei linii.

PHP MySQL - Introducere si Tipuri de


Date
MySQL este cea mai populara aplicatie open-source de baze de date folosita cu PHP.
O baza de date de obicei contine una sau mai multe tabele, folosita pentru a stoca informatii
pe categori.
Tabelele contin coloane si inregistrari (randuri) cu date.
Mai jos este un exemplu de tabel folosit pentru a stoca informatiile utilizatorului (nume,
email, parola):

id

name

password

email

Marius

faith

name@domain.net

MarPlo

peace

user@domain.com

I_AM

love

address@domain.net

- Aceasta tabela contine trei inregistrari /randuri (unu pentru fiecare persoana/utilizator) si
patru coloane (id, name, password, email)

Reguli de sintaxa MySQL


Fiecare baza de date si fiecare tabela este indentificata printr-un nume. Regulile de baza
MySQL pentru nume de baze de date, tabele, si coloane sunt:

Numele poate avea maxim 64 de caractere.

Poate contine numai litere, numere, si sublinia (indicat fara spatii).

Numele poate incepe cu un numar, dar nu poate contine numai numere.

O tabela nu poate avea doua coloane cu acelasi nume si o baza de date nu poate avea
doua tabele cu acelasi nume.

Numele tabelelor si coloanelor sunt case-sensitive ("Php" e diferit de "php").

Tipuri de date MySQL


Cand se creaza un tabel in MySQL, trebuie definit tipul de date pe care fiecare coloana il va
contine. Exista trei tipuri principale: Text (strings), Numere, Data si Ora; si doua tipuri
secundare: Liste predefinite si Date binare.
Tipul de date dicteaza ce informatie poate fi stocata si cum, acesta influenteaza si
performanta generala a bazei de date.
Tabelul de mai jos listeaza tipurile de date folosite pentru MySQL, cu o scurta descriere si cat
spatiu ocupa.
Tip
Stocare text

Marime

Descriere

Diferenta dintre "Tipurile de date pentru text" consta in numarul


maxim de caractere ce poate fi stocat intr-un camp individual,
modul de tratare a spatiilor, si daca se poate seta o valoare
initiala.

CHAR(lungime)

lungime
bytes

Un camp cu lungime fixa de la 0 la 255 de caractere.


Accepta o valoare initiala.

VARCHAR(lungime)

lungime +
Camp cu lungime variabila de la 0 la 65,535 caractere.
1 or 2
Accepta o valoare initiala.
bytes

TINYTEXT

lungime +
Un sir cu lungime maxima de 255 characters
1 bytes

Tip

Marime

Descriere

TEXT

lungime + Un sir cu o lungime maxima de 65,535 caractere. Nu


2 bytes
poate defini o valoare initiala.

MEDIUMTEXT

lungime +
Un sir cu o lungime maxima de 16,777,215 caractere
3 bytes

LONGTEXT

lungime +
Un sir cu o lungime maxima de 4,294,967,295 caractere
4 bytes

Stocare numere

Aceste tipuri de date reprezinta numere in diferite forme.

TINYINT(lungime)

1 byte

Interval de la 128 la 127. Sau de la 0 la 255 unsigned

SMALLINT(lungime)

2 bytes

Interval de la 32,768 la 32,767. Sau de la 0 la 65,535


unsigned

MEDIUMINT(lungime) 3 bytes

Interval de la 8,388,608 la 8,388,607. Sau de la 0 la


16,777,215 unsigned

INT(lungime)

4 bytes

Interval de la 2,147,483,648 la 2,147,483,647. Daca


coloana este declarata UNSIGNED, intervalul este de la
0 la 4,294,967,295

BIGINT(lungime)

8 bytes

Interval de la 9,223,372,036,854,775,808 la
9,223,372,036,854,775,807. Sau de la 0 la
18,446,744,073,709,551,615 unsigned

FLOAT(lungime,
decimals)

4 bytes

Numar mic cu virgula (cu zecimale). Deoarece PHP va


formata numerele in functie de calcule, se recomanda sa
folosesti FLOAT fara parametri optionali.

DOUBLE(lungime,
decimals)

8 bytes

Numar mare cu zecimale

DECIMAL(lungime,
decimals)

Un tip DOUBLE care permite un numar fix de


lungime +
zecimale. Inainte de MySQL 5.0.3, tipul de date
1 or 2
DECIMAL a fost stocat ca un sir, ca sa nu poata fi
bytes
folosit cu functii SQL, cum ar fi SUM()

Stocare data si timp

MySQL stocheaza data intr-un singur format: YYYY-MM-DD

DATE

3 bytes

O data stocata ca YYYY-MM-DD. Intervalul este de la


1000-01-01 la 9999-12-31

DATETIME

8 bytes

Data si ora, afisat in format YYYY-MM-DD


HH:MM:SS

TIMESTAMP

4 bytes

Un timestamp (de obicei generat automat de calculator).


Poate contine valori ce reprezinta date de la inceputul
lui 1970 pana in Januarie 2038. Coloanele
TIMESTAMP sunt afisate in acelasi format ca si
coloana DATETIME.

TIME

3 bytes

Ora in format HH:MM:SS

Stocare liste predefite

MySQL te lasa sa stochezi doua tipuri de liste predefinite (pot fi


vazute ca echivalente pentru radio butonul si caseta de verificare).

Tip

Marime

Descriere
Acest tip de coloana stocheaza o singura alegere din
lista predefinita, fiecare coloana poate avea una din mai
multe valori posibile

ENUM

1 or 2
bytes

SET

Aceast tip de coloana stocheaza zero sau mai multe


inregistrari din lista predefinita. Ca si ENUM, cu
1, 2, 3, 4, exceptia ca fiecare coloana poate avea mai mult de o
or 8 bytes valoare din mai multe valori posibile, sau mai multe
inregistrari dintr-o lista predefinita. Lista poate contine
cel mult 64 de inregistrari.

Storing binary data

Stocheaza date binare, ca imaginile.

TINYBLOB

Pana la 255 bytes

BLOB

Pana la 64kB

MEDIUMBLOB

Pana la 16MB

LONGBLOB

Pana la 4GB

- Parametri (lungime, decimal) sunt optionali, dar pentru motive de performanta, ar trebui
specificati pentru a restrictiona cata informatie sa fie stocata in oricare din coloane. Bazele de
date sunt de obicei mai rapide cand lucreaza cu coloane care au marimea fixata.
- Foloseste VARCHAR pentru elemente de text scurte si TEXT pentru cele mai lungi.
- Foloseste DECIMAL pentru a stoca valori pt. bani.
- Pentru data si ora, este indicat sa folositi TIMESTAMP daca doriti sa inregistrati in acel
camp un punct fix in timp (de exemplu data cand o inregistrare a fost introdusa in baza de
date). Folositi DATETIME daca data/ora pot fi setate si schimbate arbitrar.
La tipul TIMESTAMP data si ora este setata automat cu timpul curent cand se face INSERT
sau UPDATE, daca nu se specifica o valoare pentru acel camp.
- Nu este o buna idee sa folosesti date binare. Solicita prea mult baza de date, si nu se pot
afisa imagini direct din baza de date.
Aceasta lectie e doar pentru o scurta introducere, si puteti reveni ca sa verificati tipul de date
care doriti sa fie folosit.
In tutorialul urmator puteti invata cum sa va conectati la serverul MySQL cu PHP, sa creati o
baza de date si tabele, utilizand interfata MySQLi (MySQL Improved).

PHP MySQL - utilizare MySQLi


PHP are trei moduri diferite prin care se poate conecta si interactiona cu baza de date MySQL
: extensia MySQL originala (cu functii), MySQL Improved (MySQLi, obiect-orientat), sau
PHP Data Objects (PDO, obiect-orientat).
Ele nu pot fi amestecate in acelasi script. Extensia originala MySQL nu mai este activ
dezvoltata si nu este recomandat pentru proiecte PHP-MySQL noi.
Documentatia PHP descrie MySQLi ca fiind optiunea preferata recomandata de MySQL
pentru proiecte noi.

Conectare la MySQL
Inainte de a putea accesa informatii din baza de date , trebuie creata o conexiune cu serverul
MySQL.
Pentru a va conecta la un server MySQL cu PHP si MySQLi, se creaza o instanta de obiect
mysqli, cu formula new mysqli(), la care se adauga datele de conectare.
- Sintaxa:
$conn = new mysqli($servername, $username, $password, $database, $port);

- $servername - Specifica serverul la care sa se conecteze. Daca adaugati valoarea NULL sau
un sir gol "", serverul va folosi valoarea standard: "localhost".
- $username - Specifica numele de utilizator la baza de date MySQL.
- $password - Specifica parola utilizatorului pentru conectare.
- $database - Optional. Numele bazei de date care contine tabelele.
- $port - Optional. Specifica port-ul prin care se face conectarea la serverul MySQL, standard
este 3306
- Exemplu:
<?php
// conectare la server
$conn = new mysqli('localhost', 'root', 'pass', 'dbname');
// verifica conexiunea
if (mysqli_connect_errno()) {
exit('Connect failed: '. mysqli_connect_error());
}
?>

- Aceast cod face conectarea la baza de date numita "dbname", si stocheaza conexiunea in
instanta de obiect $conn.
Daca exista erori la conexiune, mysqli_connect_errno() returneaza codul de eroare.

Inchiderea unei conexiuni


Conexiunea va fi inchisa automat cand scriptul se termina. Se recomanda totusi sa inchideti
conexiunea mai devreme, cand scriptul nu o mai foloseste. Acest lucru va elibera memoria
folosita de conexiune. Pentru a inchide o conexiune se foloseste metoda close() din clasa
MySQLi.
- Exemplu:
<?php
// conectare la server
$conn = new mysqli('localhost', 'root', 'pass', 'dbname');
// verifica conexiunea
if (mysqli_connect_errno()) {
exit('Connect failed: '. mysqli_connect_error());
}
// ceva cod
$conn->close();

// termina conectarea

// alt cod PHP


?>

Creare baza de date cu MySQLi

Pentru a stoca informatii in MySQL, este nevoie de o baza de date.


Comanda CREATE DATABASE este folosita pentru a crea o baza de date in MySQL.
- Sintaxa:
CREATE DATABASE database_name

Pentru a face un script PHP sa execute instructiunile SQL, mai intai trebuie sa creati o
instanta de obiect mysqli, care va contine conexiunea la server, apoi folositi metoda query()
din clasa MySQLi.
- Sintaxa:
mysqliObj->query($sql_query)

- mysqliObj - este instanta de obiect mysqli, creata cu new mysqli()


- $sql_query - este un sir cu instructiuni SQL.
Aceasta metoda trimite interogarea sau comanda la serverul MySQL, va returna obiectul
rezultat, sau TRUE la succes, FALSE in caz de eroare.
Exemplul urmator creaza o baza de date numita "tests":
<?php
// conectare la serverul MySQL
$conn = new mysqli('localhost', 'root', 'pass');
// verifica conexiunea
if (mysqli_connect_errno()) {
exit('Conectare nereusita: '. mysqli_connect_error());
}
// interogare sql cu CREATE DATABASE
$sql = "CREATE DATABASE `tests` DEFAULT CHARACTER SET utf8 COLLATE
utf8_general_ci";
// executa interogarea $sql pe server pentru a crea baza de date
if ($conn->query($sql) === TRUE) {
echo 'Baza de date "tests" a fost creata';
}
else {
echo 'Error: '. $conn->error;
}
$conn->close();
?>

- Cand doriti sa creati o noua baza de date, se adauga doar primele trei argumente la obiectul
mysqli (servername, username si password). Dar daca vreti sa folosesti un port specific,
adaugati un sir gol "" pentru argumentul ce reprezinta numele bazei de date :
Exemplu: new mysqli('localhost', 'root', 'pass', '', port)
- Instructiunea suplimentara: DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci
seteaza baza de date sa foloseasca UTF-8 charset pentru codarea caracterelor.
Exemplul de mai sus creaza o baza de date numita "test", afisaza "Baza de date "tests" a fost
creata", sau un mesaj de eroare in caz de esec.
$conn->error (sau poate fi folosit mysqli_error($conn) ) returneaza un sir cu o descriere a
ultimei erori(daca exista).
Comenzile SQL sunt case-insensitive, astfel puteti folosi "CREATE DATABASE" sau "create
database". Dar numele tabelelor si coloanelor sunt case-sensitive.

Creare tabel in MySQL

Dupa ce ati realizat o conexiune la o baza de date, puteti crea tabele in ea. Tabelele sunt
elementele care stocheaza datele in baza de date.
Pentru a crea un tabel in MySQL, se foloseste comanda CREATE TABLE, apoi se apeleaza
metoda query().
- Sintaxa:
CREATE TABLE `table_name`
(
`nume_coloana1` tip_date,
`nume_coloana2` tip_date,
`nume_coloana3` tip_date,
....
)

- tip_date specifica tipul de date pe care o coloana le poate contine. Pentru o lista cu tipurile
de date MySQL, vedeti lectia precedenta: PHP MySQL - Introducere si Tipuri de date.
Dupa "tip_date", se pot specifica si alte atribute optionale pentru fiecare coloana:

NOT NULL - Fiecare rand trebuie sa contina o valoare in acea coloana, valorile null
nu sunt permise.

DEFAULT value - Seteaza o valoare initiala care este adaugata cand nici o alta
valoare nu este transferata

UNSIGNED - Poate fi folosit pentru numere, seteaza sa fie folosite doar numere
pozitive si zero.

AUTO INCREMENT - MySQL va mari automat valoarea din randul urmator cu 1


de fiecare data cand o noua inregistrare este adaugata.

PRIMARY KEY - Este folosit pentru a identifica unic randurile dintr-un tabel.
Coloana cu setarea PRIMARY KEY este de obicei un ID numeric, si in general
folosita cu AUTO_INCREMENT

Fiecare tabel ar trebui sa aiba o coloana primary key. Valoarea ei trebuie sa fie unica pentru
fiecare inregistrare din tabel.
- Exemplu:
<?php
// conectare la serverul MySQL
$conn = new mysqli('localhost', 'root', 'pass', 'tests');
// verifica conexiunea
if (mysqli_connect_errno()) {
exit('Connect failed: '. mysqli_connect_error());
}
// interogare sql pentru CREATE TABLE
$sql = "CREATE TABLE `users` (
`id` INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
`name` VARCHAR(25) NOT NULL,
`pass` VARCHAR(18) NOT NULL,
`email` VARCHAR(45),
`reg_date` TIMESTAMP
) CHARACTER SET utf8 COLLATE utf8_general_ci";

// Executa interogarea $sql query pe server pentru a crea tabelul


if ($conn->query($sql) === TRUE) {
echo 'Table "users" successfully created';
}
else {
echo 'Error: '. $conn->error;
}
$conn->close();
?>

- Acest cod va crea un tabel numic "users" in baza de date "tests", cu cinci coloane (id ,
name , pass , email si reg_date), seteaza coloana 'id' ca campul primary key.
In imaginea de mai jos puteti vedea descrierea tabelului "users".

In comenzile SQL este recomandat ca numele de tabel si coloane sa fie adaugat intre apostrof
` ` (caracterul de langa butonul cu numerul 1 pe tastatura). Aceasta este sintaxa corecta dar nu
este strict necesara.
PHP MySQL - INSERT INTO

Dupa ce o baza de date si tabelele ei au fost create, puteti sa adaugati informatii in ele.
Cateva reguli de sintaxa:

In PHP, interogarea SQL trebuie sa fie scrisa intre ghilimele.

Valorile de tip String (sir), din interogarea SQL, trebuie sa fie intotdeauna
intre ghilimele.

Valorile numerice si NULL nu trebuie adaugate intre ghilimele.

Introducere date in tabel MySQL


Pentru a adauga inregistrari noi intr-un tabel MySQL, se foloseste comanda
INSERT INTO.
Exista doua metode prin care o interogare INSERT poate fi scrisa:
1) Prima metoda nu specifica numele coloanelor unde datele for fi introduse, ci
doar valorile lor.
- Sintaxa:
INSERT INTO nume_tabel
VALUES (valoare1, valoare2, valoare3, ...)

In aceasta metoda, trebuie sa specificati o valoare pentru fiecare coloana, chiar


daca este NULL. Daca sunt cinci coloane in tabel, trebuie sa adaugati cinci valori,
separate prin virgula.

2) Pentru a doua metoda se specifica atat numele coloanei /coloanelor cat si


valorile care vor fi intoduse:
- Sintaxa:
INSERT INTO nume_tabel (coloana1, coloana2, coloana3,...)
VALUES (valoare1, valoare2, valoare3,...)

Aceasta este in general metoda preferata, deoarece puteti adauga doar


coloanele care vor primi valori. Orice coloana caruia nu ii este atribuita o valoare
va fi tratata ca NULL (sau ii va fi data valoarea default, daca aceasta este
definita).
Daca o coloana nu poate avea valoarea NULL (a fost definita ca NOT NULL) si nu
are o valoare default, nespecificand o valoare va genera eroare.
Daca o coloana este AUTO_INCREMENT sau TIMESTAMP, nu este nevoie sa fie
specificata in interogarea SQL, serverul MySQL va seta si adauga valoarea
automat.
Pentru ca PHP sa execute comenzile SQL, trebuie sa folosesti metoda mysqli
query() .
- Urmatorul exemplu adauga o noua inregistrare in tabelul "users" . Acest
exemplu foloseste tabelul "users" creat in lectia anterioara, cu cinci coloane (id ,
name , pass , email si reg_date).
Campul "id" este AUTO_INCREMENT, deci nu trebuie specificat in interogarea
SQL, serverul MySQL va adauga automat valoare pentru el. La fel si pentru
"reg_date", care este setat TIMESTAMP.
<?php
// conectare la baza de date "tests"
$conn = new mysqli('localhost', 'root', 'pass', 'tests');
// verifica conexiunea
if (mysqli_connect_errno()) {
exit('Connect failed: '. mysqli_connect_error());
}
// interogare sql pentru users INSERT INTO
$sql = "INSERT INTO `users` (`name`, `pass`, `email`)
VALUES ('Marius', 'faith', 'name@domain.net')";
// Trimite interogarea $sql la MySQL pentru a introduce valorile
if ($conn->query($sql) === TRUE) {
echo 'Datele au fost adaugate';
}
else {
echo 'Error: '. $conn->error;
}
$conn->close();
?>

- Mai intai se creaza instanta de obiect mysql cu identificatorul de variabila


$conn. Apoi, se defineste sirul cu instructiunea SQL, salvat intr-o variabila numita
$sql. Apoi se apeleaza metoda query() , si in acelasi timp se verifica valoarea
returnata pentru a determina daca datele au fost adaugate.

Exemplul de mai sus adauga un rand in tabelul "users", cu valoarea "Marius" in


coloana "name", valoarea "faith" in campul "pass", si "name@domain.net"
pentru "email". Valorile pentru celelalte coloane ("id" si "reg_date") sunt
adaugate automat de serverul MySQL.
MySQL permite INSERT cu mai multor randuri in acelasi timp, separate prin
virgula.
- Sintaxa:
INSERT INTO nume_tabel (coloana1, coloana2, coloana3,...)
VALUES (valoareA1, valoareA2, valoareA3,...),
(valoareB1, valoareB2, valoareB3,...),
(valoareC1, valoareC2, valoareC3,...)

Exemplu urmator adauga doua noi randuri in tabelul "users", cu o singura


interogare.
<?php
// conectare la baza de date "tests"
$conn = new mysqli('localhost', 'root', '', 'tests');
// verifica conexiunea
if (mysqli_connect_errno()) {
exit('Connect failed: '. mysqli_connect_error());
}
// interogare sql pentru users, INSERT INTO (doua randuri)
$sql = "INSERT INTO `users` (`name`, `pass`, `email`)
VALUES ('MarPlo', 'peace', 'user@domain.net'),
('I_AM', 'love', 'address@domain.net')";
// Trimite interogarea $sql la MySQL pentru a introduce valorile
if ($conn->query($sql) === TRUE) {
echo 'Datele au fost adaugate';
}
else {
echo 'Error: '. $conn->error;
}
$conn->close();
?>

Obtinere ID, auto generat de INSERT


Daca aveti un tabel cu o coloana AUTO_INCREMENT care stocheaza un id
numeric, puteti folosi metoda insert_id() a obiectului mysqli pentru a prelua IDul generat in ultima operatiune INSERT.
- Exemplu:
<?php
// conecteaza la baza de date "tests"
$conn = new mysqli('localhost', 'root', 'pass', 'tests');
// verifica conexiunea
if (mysqli_connect_errno()) {
exit('Connect failed: '. mysqli_connect_error());
}

// interogare sql pentru users, INSERT INTO


$sql = "INSERT INTO `users` (`name`, `pass`, `email`)
VALUES ('PloMar ', 'love_light', 'a_name@domain.net')";
// Executa interogarea $sql pentru a prelua ID auto-generat
if ($conn->query($sql) === TRUE) {
echo 'ID-ul este: '. $conn->insert_id;
}
else {
echo 'Error: '. $conn->error;
}
$conn->close();
?>

Returneaza:
ID-ul este 4

Daca tabelul nu are o coloana cu atributul AUTO_INCREMENT sau daca interogarea nu este
o comanda INSERT sau UPDATE, insert_id() va returna zero.
Adaugare date din formular in baza de date
Formularele HTML sunt de obicei folosite pentru a trimite date la un script pe
server. Aceste date pot fi adaugate si intr-o baza de date.
Pentru a introduce date dintr-un formular intr-o baza de date MySQL, trebuie
creat un formular HTML si un script PHP care receptioneaza date din formular.
Exemplu de formular HTML si un script PHP care poate fi folosit pentru a adauga
valorile din formular in tabelul "users".
Formularul HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Formular HTML pentru insert users</title>
</head>
<body>
<form action="insert.php" method="post">
Name: <input type="text" name="name" /><br />
Password: <input type="text" name="pass" /><br />
E-mail: <input type="text" name="email" /><br />
<input type="submit" valoare="Trimite" />
</form>
</body>
</html>

Cand un utilizator apasa pe butonul "Trimite", datele din formular sunt trimise la
scriptul din fisierul "insert.php".
Fisierul "insert.php":
- preia valorile din formular cu variabila $_POST,
- filtreaza aceste valori cu functii strip_tags() si trim() (pentru a sterge posibile
tag-uri si spatii goale de la inceput si sfarsit),

- foloseste un tipar RegExp si functia preg_match() pentru a verifica daca


valoarea de la "email" e o adresa de email corecta,
- daca toate datele sunt corecte, se face conectarea la o baza de date (cu
instanta mysqli), stocheaza valorile intr-un Array asociativ ($adds), si le filtreaza
cu metoda mysqli_real_escape_string(),
- seteaza comanda INSERT INTO , apoi, metoda query() trimite interogarea SQL
la serverul MySQL si o noua inregistrare va fi adaugata in tabelul "users".
Cod PHP in pagina "insert.php"
<?php
$erors = array();
// seteaza un array gol care va
contine erorile
$regexp_mail = '/^([a-zA-Z0-9]+[a-zA-Z0-9._%-]*@([a-zA-Z0-9-]+\.)+[a-zA-Z]
{2,4})$/';
// RegExp pt adresa de e-mail
// Verifica daca sunt primite date din formular
if (isset($_POST['name']) && isset($_POST['pass']) &&
isset($_POST['email'])) {
// sterge tag-urile si spatiile goale de la inceputul si sfarsitul
valorilor
$_POST = array_map("strip_tags", $_POST);
$_POST = array_map("trim", $_POST);
// verifica daca toate campurile din formular sunt completate corect
// (adresa de email si numarul minim de caractere din "name" si "pass")
if (!preg_match($regexp_mail, $_POST['email'])) $erors[] = 'Adresa de email incorecta';
if (strlen($_POST['name'])<3) $erors[] = 'Numele trebuie sa contina minim
3 caracte';
if (strlen($_POST['pass'])<6) $erors[] = 'Parola trebuie sa contina minim
6 caracte';
// daca nu sunt erori ($error array gol)
if(count($erors)<1) {
// conecteaza la baza de date "tests"
$conn = new mysqli('localhost', 'root', '', 'tests');
// verifica conexiunea
if (mysqli_connect_errno()) {
exit('Connect failed: '. mysqli_connect_error());
}
// stocheaza valorile intr-un Array, filtrand caracterele speciale pt.
a fi folosite in comanda SQL
$adds['name'] = $conn->real_escape_string($_POST['name']);
$adds['pass'] = $conn->real_escape_string($_POST['pass']);
$adds['email'] = $conn->real_escape_string($_POST['email']);
// interogarea SQL pentru userr, INSERT INTO
$sql = "INSERT INTO `users` (`name`, `pass`, `email`) VALUES ('".
$adds['name']. "', '". $adds['pass']. "', '". $adds['email']. "')";
// Trimite interogarea $sql la MySQL pentru a introduce valorile
if ($conn->query($sql) === TRUE) {
echo 'Datele au fost adaugate';
}
else {

echo 'Error: '. $conn->error;

$conn->close();
}
else {
// altfel, daca au aparut erori erori, le adauga intr-un sir si le
printeaza
echo implode('<br />', $erors);
}
}
else {
echo 'Nu sunt date de la formular';
}
?>

PHP MySQL - SELECT, ORDER BY


Cand baza de date are cateva inregistrari in ea, puteti prelua informatia stocata, folosind
comanda SELECT.
O interogare SELECT returneaza randuri selectate de la unul sau mai multe tabele.
- Sintaxa:

SELECT nume_coloana/e FROM nume_tabel

- "nume_coloana/e" - este numele coloanei sau coloanelor care vor fi selectate.


Pentru a selecta mai multe coloane, adaugatile separate prin virgula:
SELECT coloana1, coloana2, coloana3 FROM nume_tabel
Pentru a selecta toate coloanele, punti un asterisc (*):
SELECT * FROM nume_tabel
Ca sa fie trimisa comanda SQL la baza de date MySQL si pentru a prelua datele selectate, se
foloseste metoda query() a obiectului mysqli.
Cand este folosita cu interogari SELECT, aceasta metoda returneaza un obiect care contine
randurile de date, sau False in caz de eroare.
Pentru a parcurge datele returnate si sa obtineti cate un rand din ele, puteti folosi metoda
fetch_assoc.
Metoda fetch_assoc() returneaza un array asociativ ce contine randurile preluate, cheile din
array reprezinta numele coloanelor.
Cu o bucla while() puteti prelua informatiile din fiecare rand stocat in acel array.
Pentru a afla numarul de randuri returnat de o interogare SELECT, se foloseste proprietatea
num_rows, aplicata la obiectul rezultat.
- Urmatorul exemplu selecteza si afiseaza datele stocate in coloanele "id", "name" si"pass"
din tabelul "users".
<?php
// conecteaza la baza de date "tests"
$conn = new mysqli('localhost', 'root', 'pass', 'tests');
// verifica conexiunea
if (mysqli_connect_errno()) {

exit('Connect failed: '. mysqli_connect_error());

// interogare sql SELECT


$sql = "SELECT `id`, `name`, `pass` FROM `users`";
// executa interogarea si retine datele returnate
$result = $conn->query($sql);
// daca $result contine cel putin un rand
if ($result->num_rows > 0) {
// afiseaza datele din fiecare rand din $result
while($row = $result->fetch_assoc()) {
echo '<br /> id: '. $row['id']. ' - name: '. $row['name']. ' - pass: '.
$row['pass'];
}
}
else {
echo '0 rezultate';
}
$conn->close();
?>

- Acest exemplu stocheaza datele (obiectul rezultat) returnate de metoda query() in variabila
$result , foloseste proprietatea "num_rows" sa verifice daca $result contine cel putin un rand.
Apoi, cu bucla while() trece prin toate inregistrarie din obiecul rezultat, folosind metoda
"fetch_assoc()" pentru a retine datele din fiecare rand intr-un Array in variabila $row.
Fiecare apelare a fetch_assoc() returneaza urmatorul rand in setul de rezultate, pana cand nu
mai sunt, si returneaza False.
Pentru a accesa valorile din fiecare rand, se foloseste variabila PHP $row si cheia cu numele
coloanei ($row['id'], ...).
Codul de mai sus va afisa:
id: 1 - name: Marius - pass: faith
id: 2 - name: MarPlo - pass: peace
id: 3 - name: I_AM - pass: love
id: 4 - name: PloMar - pass: love_light
Asterisc (*) poate fi folosit pentru a selecta toate coloanele: "SELECT * FROM nume_tabel",
dar este mai bine sa specificati doar coloanele care vreti sa fie selectate, deoarece procesul de
selectare poate fi mai rapid.

Optiunea LIMIT
Cu optiunea LIMIT puteti sa determinati numarul de inregistrari pe care MySQL le va
returna:
- Sintaxa:
SELECT nume_coloana/e FROM nume_tabel LIMIT skip_nr, ret_nr

"skip_nr" este optional, ii spune bazei de date cate randuri sa sara din rezultate.
"ret_nr" seteaza numarul maxim de inregistrari ce vor fi returnate.
- Exemplu:
<?php
// conecteaza la baza de date "tests"
$conn = new mysqli('localhost', 'root', 'pass', 'tests');

// verifica conexiunea
if (mysqli_connect_errno()) {
exit('Connect failed: '. mysqli_connect_error());
}
// interogare sql SELECT
$sql = "SELECT `id`, `name`, `pass` FROM `users` LIMIT 2";
// executa interogarea si retine datele returnate
$result = $conn->query($sql);
// daca $result contine cel putin un rand
if ($result->num_rows > 0) {
// afiseaza datele din fiecare rand din $result
while($row = $result->fetch_assoc()) {
echo '<br /> id: '. $row['id']. ' - name: '. $row['name']. ' - pass: '.
$row['pass'];
}
}
else {
echo '0 rezultate';
}
$conn->close();
?>

Optiunea "LIMIT 2" spune MySQL sa returneze primele 2 randuri din rezultat.
Acest exemplu va afisa:
id: 1 - name: Marius - pass: faith
id: 2 - name: MarPlo - pass: peace

ORDER BY
ORDER BY specifica ordinea de sortare a resultatelor.
- Sintaxa:

SELECT nume_coloana/e FROM nume_tabel ORDER BY nume_col ASC|DESC

"nume_col" poate fi o singura coloana, o lista de coloane separate prin virgula, sau o expresie
ca RAND(), pentru a obtine o ordine aleatorie.
Cand se ordoneaza dupa mai mult de o coloana, a doua coloana e folosita in sortare doar daca
valorile din prima coloana sunt egale.
Ordinea de sortare standard este ascendenta (ASC) (az, 09), iar optiunea ASC poate fi
omisa. DESC (descrescator) inverseaza ordinea.
- Exemplu:
<?php
// conecteaza la baza de date "tests"
$conn = new mysqli('localhost', 'root', 'pass', 'tests');
// verifica conexiunea
if (mysqli_connect_errno()) {
exit('Connect failed: '. mysqli_connect_error());
}
// interogarea sql SELECT
$sql = "SELECT `id`, `name`, `pass` FROM `users` ORDER BY `name`";
// executa interogarea si retine rezultatul
$result = $conn->query($sql);

// daca $result contine cel putin un rand


if ($result->num_rows > 0) {
// afiseaza datele din fiecare rand din $result
while($row = $result->fetch_assoc()) {
echo '<br /> id: '. $row['id']. ' - name: '. $row['name']. ' - pass: '.
$row['pass'];
}
}
else {
echo '0 results';
}
$conn->close();
?>

- Acest cod selecteaza toate datele stocate in tabelul "users" , si sorteaza rezultatul in ordine
alfabetica dupa coloana "name".
Exemplul de mai sus va afisa:
id: 3 - name: I_AM - pass: love
id: 1 - name: Marius - pass: faith
id: 2 - name: MarPlo - pass: peace
id: 4 - name: PloMar - pass: love_light
Puteti folosi ORDER BY cu optiunea LIMIT.
Exemplu:
"SELECT `id`, `name`, `pass` FROM `users` ORDER BY `name`
LIMIT 2"
Daca vreti sa ignore randurile duplicate (care au aceleasi valori), se foloseste optiunea
DISTINCT:
SELECT DISTINCT nume_coloana/e FROM nume_tabel

Select in doua tabele MySQL


In acest tutorial puteti invata cum se pot selecta coloane din doua tabele MySQL intr-o
singura interogare.
Cand in comanda SQL sunt selectate coloane din tabele diferite, trebuie adaugat numele
tabelului inainte de cel al coloanei (despartite prin punct "."). Sintax este:
SELECT `tabel1`.`coloana`, `tabel2`.`coloana` FROM `tabel1`, `tabel2` WHERE
conditie
Sa vedem cateva exemple,in care se vor folosi urmatoarele doua tabele, denumite
"categories" si "links".
categories
id
1

category
PHP-MySQL

categories
id
2

category
HTML
links

id

link

visits

www.marplo.net/php-mysql/matrice_tablouri.html

12

www.marplo.net/php-mysql/siruri.html

15

www.marplo.net/html/tabele.html

18

1. Selectare toate coloanele din tabelul "categories" unde id=2, si coloanele "link" si "visits"
unde visits>13.
SELECT `categories`.*, `links`.`link`, `links`.`visits` FROM `categories`, `links` WHERE
`categories`.`id`=2 AND `links`.`visits`>13
Rezultat:
| id | category |
link
| visits |
-----------------------------------------------------------------| 2 |
HTML
| www.marplo.net/php-mysql/siruri.html |
15
|
| 2 |
HTML
| www.marplo.net/html/tabele.html
|
18
|

2. Selecteaza randurile din coloanele "category" si "link", unde 'id'-ul din tabelul 'categories'
are valoarea 1, si id-ul din tabelul 'links' este egal cu id-ul din 'categories'.
SELECT `categories`.`category`, `links`.`link` FROM `categories`, `links` WHERE
`categories`.`id`=1 AND `categories`.`id`=`links`.`id`
Rezultat:
| category |
link
|
-------------------------------------------------------------| PHP-MySQL | www.marplo.net/php-mysql/matrice_tablouri.html |
| PHP-MySQL | www.marplo.net/php-mysql/siruri.html
|

Doua SELECT intr-o interogare


Se poate de asemenea executa doua comenzi SELECT in aceeasi interogare SQL.
Exemple:
1. Selectare randuri din coloana "link" (tabel 'links') unde valoarea coloanei "id" corespunde
cu id-ul pentru valoarea HTML (din tabelul 'categories').

SELECT `link` FROM `links` WHERE `id`=(SELECT `id` FROM `categories` WHERE
`category`='HTML')
Rezultat:
|
link
|
--------------------------------------| www.marplo.net/html/tabele.html
|

2. Returneaza numarul total de randuri din tabelul 'links', unde visits>14, si se selecteaza
inregistrarile din coloana "category" (tabelul 'categories') unde id<4.
SELECT (SELECT COUNT(*) FROM `links` WHERE `visits`>14) AS nrl, `category`
FROM `categories` WHERE `id`<4
Rezultat:
| nrl | category |
------------------| 2 | PHP-MySQL |
| 2 |
HTML
|

MySQL INNER JOIN, LEFT JOIN,


RIGHT JOIN

LEFT JOIN

RIGHT JOIN

Comanda JOIN combina inregistrarile din doua tabele, folosind valorile comune din fiecare.
Sunt mai multe tipuri de JOIN: INNER JOIN, LEFT JOIN, RIGHT JOIN; se folosesc cu o
clauza ON ce seteaza conditia de unire.
- In exemplele prezentate in acest tutorial se folosesc urmatoarele doua tabele, denumite
"categories" si "links".
categories
id

category

PHP-MySQL

HTML

JavaScript

links
id

link

www.marplo.net/php-mysql/matrice_tablouri.html

www.marplo.net/php-mysql/siruri.html

www.marplo.net/html/tabele.html

INNER JOIN
INNER JOIN returneaza randurile in care exista o potrivire a conditiei in ambele tabele
(poate fi considerat ca tipul standard de unire).
Sintaxa:
SELECT coloana(e) FROM `tabel1` INNER JOIN `tabel2` ON
`tabel1`.`coloana`=`tabel2`.`coloana`
Daca sunt randuri in "tabel1.coloana" care nu au o potrivire de egalitate in "tabel2.coloana",
acele randuri nu vor fi selectate.
- Exemplu: Selecteaza inregistrarile din coloana "category" (din 'categories'), si din coloana
"link" (din tabelul 'links'), unde valoarea coloanei "id" este aceeasi in ambele tabele; ordonate
dupa "category".
SELECT `categories`.`category`, `links`.`link` FROM `categories` INNER JOIN `links` ON
`categories`.`id`=`links`.`id` ORDER BY `categories`.`category`
Rezultat:
| category |
link
|
-------------------------------------------------------------| HTML
| www.marplo.net/html/tabele.html
|
| PHP-MySQL | www.marplo.net/php-mysql/matrice_tablouri.html |
| PHP-MySQL | www.marplo.net/php-mysql/siruri.html
|

INNER JOIN e la fel ca JOIN, si de asemenea poate fi inlocuit cu o clauza WHERE. Astfel,
urmatoarele doua interogari SQL returneaza acelasi rezultat ca exemplul de sus.
- Fara cuvantul INNER:
SELECT `categories`.`category`, `links`.`link` FROM `categories` JOIN `links` ON
`categories`.`id`=`links`.`id` ORDER BY `categories`.`category`
- Sau, cu WHERE:
SELECT `categories`.`category`, `links`.`link` FROM `categories`, `links` WHERE
`categories`.`id`=`links`.`id` ORDER BY `categories`.`category`

LEFT JOIN
Comanda LEFT JOIN returneaza toate randurile din tabelul din "stanga" (tabel1), indiferent
daca conditia de unire nu se potriveste cu inregistrarile din al doilea tabel, din "dreapta
(tabel2).
Sintaxa:

SELECT coloana(e) FROM `tabel1` LEFT JOIN `tabel2` ON


`tabel1`.`coloana`=`tabel2`.`coloana`
Daca exista randuri din "tabel2" care nu se potrivesc cu conditia de la partea ON, "join" va
adauga acele randuri in rezultat, dar cu valoarea NULL la "tabel2".
Exemplu: Vom selecta din nou inregistrarile din coloana "category" (din 'categories'), si din
coloana "link" (din tabelul 'links'), unde valoarea coloanei "id" este aceeasi in ambele tabele,
dar de data aceasta cu LEFT JOIN.
SELECT `categories`.`category`, `links`.`link` FROM `categories` LEFT JOIN `links` ON
`categories`.`id`=`links`.`id` ORDER BY `categories`.`category`
Rezultat (comparati cu rezultatul din exemplu de mai sus ca sa vedeti diferenta):
| category |
link
|
--------------------------------------------------------------| HTML
| www.marplo.net/html/tabele.html
|
| JavaScript | NULL
|
| PHP-MySQL | www.marplo.net/php-mysql/matrice_tablouri.html |
| PHP-MySQL | www.marplo.net/php-mysql/siruri.html
|

Deoarece LEFT JOIN returneaza toate randurile din primul tabel (categories), indiferent
daca exista potrivire cu randuri din al doilea tabel (links), se poate folosi acest fapt pentru a
gasi randurile dintr-un tabel care nu au un corespondet in alt tabel.
In urmatorul exemplu vom gasi randurile din "categories" cu o valoare a coloanei "id" care nu
e prezenta in tabelul "links":
SELECT `categories`.* FROM `categories` LEFT JOIN `links` ON
`categories`.`id`=`links`.`id` WHERE `links`.`id` IS NULL
Rezultat:
| id | category |
------------------| 3 | JavaScript |

RIGHT JOIN
RIGHT JOIN returneaza toate valorile din al doilea tabel, din "dreapta" (tabel2) si
inregistrarile potrivite din primul tabel (tabel1) (NULL in caz de rand corespondent
nepotrivit).
Sintaxa:
SELECT coloana(e) FROM `tabel1` RIGHT JOIN `tabel2` ON
`tabel1`.`coloana`=`tabel2`.`coloana`
Exemplu: Vom selecta iar inregistrarile din coloana "category" (din 'categories'), si din
coloana "link" (din tabelul 'links'), unde valoarea coloanei "id" este aceeasi in ambele tabele,
dar de data aceasta cu RIGHT JOIN.
SELECT `categories`.`category`, `links`.`link` FROM `categories` RIGHT JOIN `links` ON
`categories`.`id`=`links`.`id` ORDER BY `categories`.`category`
Rezultat (comparati cu rezultatul din exemplu de mai sus ca sa vedeti diferenta):
| category |
link
|
--------------------------------------------------------------| HTML
| www.marplo.net/html/tabele.html
|
| PHP-MySQL | www.marplo.net/php-mysql/matrice_tablouri.html |
| PHP-MySQL | www.marplo.net/php-mysql/siruri.html
|

In practica, RIGHT JOIN se foloseste rar, deoarece poate fi inlocuit cu LEFT JOIN (prin

inversarea ordinii tabelelor). Rezultatul de mai sus poate fi obtinut si cu urmatoarea


interogare SELECT, cu LEFT JOIN:
SELECT `categories`.`category`, `links`.`link` FROM `links` LEFT JOIN `categories` ON
`categories`.`id`=`links`.`id` ORDER BY `categories`.`category`
PHP MySQL - WHERE si LIKE
Utilizare WHERE si operatori pentru a cauta valori specifice
Pentru a cauta valori specifice, pentru a extrage doar acele inregistrari care
respecta anumite criterii, se adauga o clauza WHERE in interogarea SELECT.
Clauza WHERE este folosita pentru a filtra inregistrarile. Se adauga dupa numele
tabelului.
- Sintaxa:
SELECL nume_coloana/e FROM nume_tabel WHERE conditie

"conditie" - poate fi una sau mai multe expresii conditionale care specifica
criteriul de selectare. Aceste expresii conditionale pot folosi operatori de
comparatie, aritmetici si logici.
Tabelul urmator prezinta operatorii cei mai des folositi cu WHERE in instructiunile
MySQL:
Operator

Semnificatie

Exemplu

Egal

WHERE `id`=3

<

Mai mic decat

WHERE `id`<3

>

Mai mare decat

WHERE `id`>3

<=

Mai mic sau egal cu

WHERE `id`<=3

>=

Mai mare sau egal cu

WHERE `id`>=3

!= (also <>)

Nu este egal cu

WHERE `id`!=3

IS NOT NULL

Are valoare

WHERE `id` IS NOT NULL

Nu are valoare

WHERE `email` IS NULL

IS NULL

BETWEEN min AND Intr-un interval specific (min


max
si max)

WHERE `id` BETWEEN 2


AND 4

NOT BETWEEN min Nu este in intervalul (min si


AND max
max)

WHERE `id` NOT BETWEEN


2 AND 4

IN(val1, val2, val3) Se gaseste in lista de valori

WHERE `id` IN(1, 3, 4)

Operator

OR

AND

Semnificatie

Unde una din conditii este


adevarata

Exemplu

WHERE `id`>3 OR
`name`='MarPlo'

Unde amandoua conditii sunt WHERE `id`>3 AND


adevarate
`name`='MarPlo'

- Exemplu (selecteaza toate randurile din tabelul "users" care au


"name=MarPlo" si afiseaza "id" si "email" din ele):
<?php
// conectare la baza de date "tests"
$conn = new mysqli('localhost', 'root', '', 'tests');
// verifica conexiunea
if (mysqli_connect_errno()) {
exit('Connect failed: '. mysqli_connect_error());
}
$name = 'Marplo';

// seteaza numele intr-o variabila

// Interogare sql SELECT


$sql = "SELECT `id`, `email` FROM `users` WHERE `name`='$name'";
// executa interogarea si retine rezultatele
$result = $conn->query($sql);
// daca $result contine cel putin un rand
if ($result->num_rows > 0) {
// afisaza datele pentru fiecare rand din $result
while($row = $result->fetch_assoc()) {
echo '<br /> id: '. $row['id']. ' - email: '. $row['email'];
}
}
else {
echo '0 results';
}
$conn->close();
?>

- Dupa cum observati, nu e necesar sa selectati coloana la care aplicati conditia


WHERE. Coloanele specificate dupa SELECT dicteaza ce coloane sa returneze, iar
coloanele adaugate dupa WHERE determina ce randuri vor fi returnate.
- Nota, in interogarea $sql este folosita variabila ($name) care contine numele,
aceasta variabila este adaugata intre ghilimele simple in interogare pentru ca
MySQL sa preia valoarea ei ca tip sir (string).
Exemplul de mai sus va afisa:
id: 2 - email: user@domain.net

Clauza WHERE poate fi folosita si cu optiunile ORDER BY si LIMIT pentru a


ordona si limita datele selectate.
Exemplu:
$sql = "SELECT `name`, `pass` FROM `users`
WHERE `id`>2 ORDER BY `name` LIMIT 2";
In instructiunile SQL se pot adauga si expresii cu calcule matematice, folosind
caracterele adunare (+), scadere (-), inmultire (*), impartire (/), si procent (%).
Exemplu:
$sql = "SELECT `name`, `pass` FROM `users`
WHERE `id`=($x + $y)";
LIKE, NOT LIKE
LIKE si NOT LIKE sunt termeni folositi pentru identificare valori de tip sir, in
combinatie cu urmatoarele caractere:

% - reprezinta orice secventa de caractere sau niciuna.

_ (o sublinie), reprezinta exact un caracter.

Acesti termeni sunt folositi cu clauza WHERE, iar cautarea este case-insensitive
(fara diferenta intre litere mari si mici).
Exemple de interogari cu LIKE /NOT LIKE
<?php
// ...
#sql = "SELECT * FROM `nume_tabel` WHERE `name` LIKE 'mar%'";
// ...
?>

- Aceasta clauza WHERE se potriveste cu MarPlo, marius, Mars, si asa mai


departe, dar nu Omar.
<?php
// ...
#sql = "SELECT * FROM `nume_tabel` WHERE `name` NOT LIKE '%mar'";
// ...
?>

- Aceasta clauza WHERE se potriveste cu Mar, Omar, Romar, si asa mai departe,
dar nu cu Mars. ('%mar%' se potriveste cu Mars, Marius, Romars, etc.).
<?php
// ...
#sql = "SELECT * FROM `nume_tabel` WHERE `name` NOT LIKE 'mar%'";
// ...
?>

- Aceasta interogare va returna toate randurile ale caror valoare "name" nu


incepe cu Mar.

<?php
// ...
#sql = "SELECT * FROM `nume_tabel` WHERE `name` LIKE 'mar_'";
// ...
?>

- Aceasta interogare va returna toate randurile ale caror valoare "name" incepe
cu Mar si are patru caractere (Mars, Mara, mar8, etc.).

Interogarile cu termeni LIKE sunt in general mai lente deoarece nu pot profita de indexi.
Pentru a cauta un simbol procent (%) sau o sublinie (_) in text, le precedati cu backslash, in
acest mod ( \% sau \_ ).
Sublinia poate fi folosita in combinatie cu ea insasi; (exemplu, LIKE '_ _' va cauta orice
combinatie de doua litere).
Cuvantul cheie LIKE trebuie sa fie intotdeauna urmat de un sir, chiar daca termenul cautat
este limitat la numere.

PHP MySQL - UPDATE


Dupa ce ati adaugat randuri in tabelul MySQL, puteti sa modificati datele inregistrate,
folosind comanda UPDATE.
Instructiunea UPDATE este folosita pentru a modifica sau actualiza informatiile existente
intr-un tabel.
- Sintaxa:
UPDATE nume_tabel
SET coloana1=valoare, coloana2=valoare2, ...
WHERE o_coloana=o_valoare

- Clauza WHERE este importanta intr-o interogare UPDATE , specifica serverului MySQL
care inregistrare sau inregistrari trebuie actualizate. Daca omiteti clauza WHERE, vor fi
afectate toate randurile!
- Comanda UPDATE este trimisa la serverul MySQL cu metoda query() a obiectului mysqli.
- Exemplu
In lectiile anterioare a fost creat un tabel numita "users" si am adaugat cateva randuri in el.
Asa arata primele doua inregistrari.
id name password

email

reg_date

1 Marius faith

name@domain.net

2011-03-24
09:51:46

2 MarPlo peace

user@domain.com

2011-03-24
10:10:27

In acest exemplu vom modifica adresa de email pentru utilizatorul cu "name" MarPlo.
<?php
// conecteaza la baza de date "tests"
$conn = new mysqli('localhost', 'root', 'pass', 'tests');
// verifica conexiunea

if (mysqli_connect_errno()) {
exit('Connect failed: '. mysqli_connect_error());
}
// interogare sql UPDATE
$sql = "UPDATE `users` SET `email`='new_mail@domain.net' WHERE
`name`='MarPlo' AND `id`=2";
// executa interogarea si verifica pentru erori
if (!$conn->query($sql)) {
echo 'Error: '. $conn->error;
}
$conn->close();
?>

Dupa cum observati, clauza WHERE pune doua conditii cu operatorul "AND" (WHERE
`name`='MarPlo' AND `id`=2), ii spune serverului MySQL sa actualizeze numai randurile
care au "name='MarPlo'" si "id=2". Setand aceste doua conditii, putem fi siguri ca numai
acel rand va fi modificat, nu un alt rand cu acelasi nume.
De asemenea, puteti sa aplicati optiunea LIMIT pentru a seta cate randuri sa fie actualizate.
Exemplu:
$sql = "UPDATE `users` SET `email`='new_mail@domain.net' WHERE
`name`='MarPlo' AND `id`=2 LIMIT 1";
Dupa actualizare, primele doua randuri din tabelul "users" vor arata asa:
id name password

email

reg_date

1 Marius faith

name@domain.net

2011-03-24 09:51:46

2 MarPlo peace

new_mail@domain.com

2011-03-27 10:20:58

- Deoarece "reg_date" este o coloana de tip TIMESTAMP (cu atribute: on update


CURRENT_TIMESTAMP ), serverul MySQL a modificat si valuarea ei, actualizand-o cu data
si ora curente (din momentul efectuarii UPDATE).
Daca vreti ca o instructiune UPDATE sa nu schimbe valoare coloanei TIMESTAMP, cand
creati tabelul trebuie sa nu adaugati atributul "on update" , ci doar DEFAULT (
`coloana_data` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ).
- Daca executati o interogare UPDATE care nu modifica nici o valoare (deoarece conditia
WHERE nu se potriveste nici unui rand), nu va returna vreo eroare si nici nu va afecta vreun
rand.
- Este indicat sa nu schimbati valoarea unei coloane de tip PRIMARY KEY (in exemplul de
mai sus, coloana "id").

PHP MySQL - DELETE


Comanda DELETE este folosita pentru a sterge randuri din tabel.
- Sintaxa:

DELETE FROM nume_tabel WHERE conditie

Clauza WHERE conditie este foarte importanta, ea specifica exact care rand sau randuri
trebuie sterse. Este important sa o folositi, deoarece randurile sterse nu mai pot fi recuperate,

decat daca aveti undeva salvata baza de date.


Daca nu adaugati WHERE, serverul MySQL va sterge toate inregistrarile din tabel, lasandu-l
gol.
Instructiunea DELETE este trimisa la serverul MySQL cu metoda query() a obiectului
mysqli.
- Exemplu
In lectiile anterioare a fost creat un tabel "users" si am adaugat cateva date in el. Aici puteti
vedea cum arata primele 3 randuri.
id name password

email

reg_date

1 Marius faith

name@domain.net

2011-03-24 09:51:46

2 MarPlo peace

new_mail@domain.com

2011-03-27 10:20:58

3 I_AM

address@domain.net

2011-03-24 10:10:27

love

In acest exemplu vom sterge inregistrarile din tabel, care au name='MarPlo':


<?php
// Conecteaza la baza de date "tests"
$conn = new mysqli('localhost', 'root', 'pass', 'tests');
// verifica conexiunea
if (mysqli_connect_errno()) {
exit('Connect failed: '. mysqli_connect_error());
}
// interogare DELETE
$sql = "DELETE FROM `users` WHERE `name`='MarPlo'";
// executa interogarea si verifica daca exista erori
if (!$conn->query($sql)) {
echo 'Error: '. $conn->error;
}
$conn->close();
?>

- Acest cod va sterge toate randurile din tabelul "users" care au name='MarPlo', astfel, daca in
acest tabel sunt mai multi useri (inregistrari) cu numele "MarPlo", MySQL le sterge pe toate.
Ca sa fiti sigur care inregistrare va fi stearsa, puteti sa adaugti inca o conditie in clauza
WHERE (cu operatorul AND), care impreuna cu prima specifica mai exact ce rand sa fie
sters.
De asemenea, se poate aplica optiunea LIMIT ca sa specificati cate randuri sa fie sterse, din
cele conform conditiei.
Example:
$sql = "DELETE FROM `users` WHERE `name`='MarPlo' AND `id`=2 LIMIT
1";
Dupa stergere, primele trei randuri din tabelul "users" vor arata asa:
id name

password

email

reg_date

1 Marius faith

name@domain.net

2011-03-24 09:51:46

3 I_AM

address@domain.net

2011-03-24 10:10:27

4 PloMar love_light a_name@domain.net

2011-03-24 14:39:49

love

- Dupa cum se observa, randul cu name='MarPlo' (id=2) a fost sters.


- Daca se executa o interogare DELETE care nu sterge nici o inregistrare (deoarece conditia
WHERE nu se potriveste cu nici un rand), nu veti primi nici o eroare, si nu va fi afectat vreun
rand.
Pentru a sterge complet un tabel, se foloseste DROP TABLE:
DROP TABLE nume_tabel
Pentru a sterge o intreaga baza de date, cu toate tabelele si informatiile din ea, se foloseste
DROP DATABASE:
DROP DATABASE database_name

MySQL Alias si functii


Alias
Un alias este creat folosing termenul AS urmat de un nume case-sensitive. Se foloseste in
interogari SELECT pentru a da unei coloane un nume diferit in rezultatele returnate.
- Exemplu:
In exemplele din aceasta lectie se foloseste urmatorul tabel, denumit "sites":
id

site

nr

reg_date

www.marplo.net

2011-03-28 07:56:53

www.coursesweb.net

2011-03-28 07:57:40

Acest exemplu selecteaza inregistrarile din coloana "site" si le returneaza intr-un alias numit
"st".
// conecteaza la baza de date "tests"
$conn = new mysqli('localhost', 'root', '', 'tests');
// verifica conexiunea
if (mysqli_connect_errno()) {
exit('Connect failed: '. mysqli_connect_error());
}
// interogare sql
$sql = "SELECT `site` AS st FROM `sites`";
// executa interogarea si retine rezultatele
$result = $conn->query($sql);
// daca $result contine cel putin un rand
if ($result->num_rows > 0) {
// afisaza datele din fiecare rand din $result
while($row = $result->fetch_assoc()) {
echo '<br />';
print_r($row);
}
}
else {

echo '0 rezultate';

$conn->close();
?>

In resultatele obtinute, valorile coloanei "site" vor fi returnate intr-un alt nume de coloana,
denumita 'st'.
Afiseaza:
Array ( [st] => www.marplo.net )
Array ( [st] => www.coursesweb.net )
Se pot folosi mai multe aliasuri intr-o interogare SELECT, cate unul pentru fiecare coloana:
SELECT coloana1 AS nume1, coloana2 AS nume2 FROM nume_tabel
Aliasurile sunt de obicei folosite cu functii, pentru a returna rezultatul unei functii asociat cu
un nume (dupa cum vedeti in exemplu de mai jos).
- In mod standard, SQL nu suporta folosirea de aliasuri in interogari care au conditionala
WHERE.

Functii MySQL
Cele mai multe din functiile MySQL sunt folosite cu interogarea SELECT pentru a formata
datele returnate, dar puteti folosi functii MySQL si cu alte tipuri de interogari.
Pentru a aplica o functie intr-o instructiune SELECT, la valoarea unei coloane, interogarea va
arata astfel:
- Sintaxa:

SELECT coloana1, FUNCTIE(coloana2), coloana3 FROM nume_tabel

Nu trebuie sa lasati spatii intre numele functiei si parateza ei.

Functii pentru Text


Functiile pentru text sunt folosite cand se lucreaza cu siruri, pot fi aplicate fie cu numele
coloanelor fie cu valori specifice.
Tabelul de mai jos contine cateva din cele mai utilizate functii MySQL pentru lucru cu text
("t", poate fi text sau numele unei coloane).
Functie

Returneaza

CONCAT(t1, t2, ...)

Un nou sir de forma "t1t2".

CONCAT_WS(S, t1,
t2, ...)

Un nou sir de forma t1St2S... (ignora coloanele care nu au


valori)

LENGTH(t)

Numarul de caractere din "t".

LEFT(t, y)

Caracterul "y" cel mai aproape de partea stanga din "t".

RIGHT(t, x)

Caracterul "x" cel mai aproape de partea deapta din "t".

TRIM(t)

"t" cu spatiile de la capete sterse.

UPPER(t)

"t" cu litere mari.

LOWER(t)

"t" cu litere mici.

Functie

Returneaza

SUBSTRING(t, x, y)

caracterele "y" din "t", incepand de la index "x" (indexat de le 0).

expr REGEXP patern

Executa o cautare in "expr", dupa o expresie regulata specificata


la "patern".

- In urmatorul exemplu vom folosi functia CONCAT() pentru a uni intr-un singur sir valorile
a doua coloane ("site" si "nr"), separate de o liniuta. Acest sir va fi returnat cu un titlu de alias
numit "str":
<?php
// conecteaza la baza de date "tests"
$conn = new mysqli('localhost', 'root', '', 'tests');
// verifica in caz de eroare la conectare
if (mysqli_connect_errno()) {
exit('Connect failed: '. mysqli_connect_error());
}
// interogare sql
$sql = "SELECT CONCAT(`site`, ' - ', `nr`) AS str FROM `sites`";
// executa interogarea si stocheaza rezultatele
$result = $conn->query($sql);
// daca $result contine cel putin un rand
if ($result->num_rows > 0) {
// afisaza datele pentru fiecare rand din $result
while($row = $result->fetch_assoc()) {
echo '<br />'. $row['str'];
}
}
else {
echo '0 rezultate';
}
$conn->close();
?>

Aliasul "str" este cheia in array ce contine valorile returnate.


Codul de mai sus va returna:
www.marplo.net - 5
www.coursesweb.net - 8
Pentru lista completa cu functiile MySQL pt. text, vedeti manualul MySQL: Functii pentru
siruri.

Functii numerice
Functiile numerice sunt folosite in lucrul cu numere, pentru a efectua operatii matematice.
Ca si celelalte functii, ele pot fi utilizate fie cu numele coloanelor fie cu valori specifice.
In tabelul urmator sunt prezentate cateva din functiile numerice MySQL ("n", poate fi un
numar sau numele unei coloane).

Functia

Returneaza

ABS(n)

Valoarea absoluta a lui "n".

AVG(col)

Valoarea mijlocie (medie) a coloanei specificate.

CEILING(n)

Urmatorul cel mai mare numar intreag dupa "n".

FLOOR(n)

Valoarea intreaga a lui "n".

FORMAT(n1,
n2)

"n1" formatat ca un numar cu "n2" zecimale si cu virgula la fiecare 3


spatii.

MIN(col)

Valoarea minima din coloana specificata.

MAX(col)

Valoarea maxima din coloana specificata.

MOD(n1, n2)

Resultatul impartirii lui "n1" la "n2". La fel ca si expresia cu simbolul


procent (n1%n2)

POW(n1, n2)

"n1" la puterea "n2"

RAND()

Un numar aleatoriu intre 0 si 1.0

ROUND(n1, n2) "n1" rotunjit la "n2" zecimale.


SQRT(n)

Radical din "n".

SUM(col)

Suma valorilor din coloana specificata.

- In urmatorul exemplu vom selecta coloana "nr", cu functia POW() aplicata ei, urmata de
un alias care va contine valoarea returnata de functia POW():
<?php
// conecteaza la baza de date "tests"
$conn = new mysqli('localhost', 'root', '', 'tests');
// verifica conexiunea
if (mysqli_connect_errno()) {
exit('Connect failed: '. mysqli_connect_error());
}
// interogare sql
$sql = "SELECT `nr`, POW(`nr`, 3) AS pow3 FROM `sites` ORDER BY pow3";
// executa interogarea si stocheaza rezultatele
$result = $conn->query($sql);
// daca $result contine cel putin un rand
if ($result->num_rows > 0) {
// afiseaza datele din fiecare rand din $result
while($row = $result->fetch_assoc()) {
echo '<br /> POW('. $row['nr']. ', 3) - '. $row['pow3'];
}
}
else {
echo '0 rezultate';
}
$conn->close();
?>

Afiseaza:

POW(5, 3) - 125
POW(8, 3) - 512
- Functia RAND() poate fi folosita pentru a returna randurile intr-o ordine aleatorie:
SELECT * FROM nume_tabel ORDER BY RAND()
Pentru lista completa cu functii numerice MySQL, vedeti manualul MySQL: Functii
numerice si operatori

Functii pentru Data si Ora


Coloanele specifice pt. Data si Ora din MySQL sunt destul de flexibile.
Daca vreti sa faceti calcule bazate pe o anume data sau sa returnati numai numele zilei din
saptamana, MySQL are o functie pentru aproape fiecare scop de lucru cu Data si Ora.
Tabelul urmator contine cateva din cele mai utilizate functii MySQL pt. lucru cu data si ora.
Ele pot fi aplicate fie cu numele coloanelor, fie cu valori specifice ("dt", poate fi o valoare
sau numele unei coloane).
Functie

Returneaza

HOUR(dt)

Ora din "dt".

MINUTE(dt)

Minutul din "dt".

SECOND(dt)

Secundele din "dt".

DAYNAME(dt)

Numele zilei din saptaana a datei din "dt".

DAYOFMONTH(dt)

Numarul zilei din luna a datei din "dt".

MONTHNAME(dt)

Numele lunii din an a datei din "dt".

MONTH(dt)

Valoarea numerica a lunii din an, a datei din "dt".

YEAR(dt)

Anul din "dt".

CURDATE()

Data curenta.

CURTIME()

Ora curent.

NOW()

Data si ora curenta.

Timpul Unix (numarul de secunde trecute de la "1 Ianuarie 1970


UNIX_TIMESTAMP(dt) 00:00:00 GMT" pana la momentul curent sau pana la data
specificata).
- Urmatorul exemplu afiseaza numele zilei din saptamana cand ultimul site a fost inregistrat:
<?php
// conecteaza la baza de date "tests"
$conn = new mysqli('localhost', 'root', '', 'tests');
// verifica conexiunea
if (mysqli_connect_errno()) {
exit('Connect failed: '. mysqli_connect_error());
}
// interogare sql

$sql = "SELECT `id`, `site`, DAYNAME(`reg_date`) AS weekday FROM `sites`


ORDER BY `reg_date` DESC LIMIT 1";
// executa interogarea si stocheaza rezultatele
$result = $conn->query($sql);
// daca $result contine cel putin un rand
if ($result->num_rows > 0) {
// parcurge si afiseaza datele din fiecare rand din $result
while($row = $result->fetch_assoc()) {
echo 'Ultimul site web: '. $row['site']. ' , id: '. $row['id']. ' - a
fost inregistrat intr-o zi de '. $row['weekday'];
}
}
else {
echo '0 results';
}
$conn->close();
?>

Afiseaza:
Ultimul site web: www.coursesweb.net , id: 2 - a fost inregistrata intr-o zi de luni
Daca doriti sa preluati timpul UNIX dintr-o coloana de tip "Data si Timp", folositi urmatoarea
formula:
SELECT UNIX_TIMESTAMP(coloana_data) AS nume_alias FROM
nume_tabel
PHP PDO - Introducere si Conectari la Baze de Date

PDO (PHP Data Objects) este o extensie PHP pentru accesare baze de date in PHP.
PDO foloseste caracteristicile OOP (Programare Orientata pe Obiecte) valabile incepand cu
PHP 5.1.
Deoarece PDO lucreaza cu clase si obiecte, trebuie sa fiti familiarizati cu modul de lucru al
programarii orientate pe obiecte.
PDO poate lucra cu urmatoarele tipuri de baze de date:

MySQL

PostgreSQL

SQLite 2 & 3

Firebird

Informix (IBM Informix Dynamic Server)

ODBC

Oracle

DBLM: FreeTDS / Sybase / MS-SQL

IBM (IBM DB2)

- Unul din avantajele PDO este acela ca se folosesc functii similare pentru
interogarea si prelucrarea bazelor de date, indiferent de tipul lor (din cele
mentionate mai sus).
Script-urile care folosesc interfata PDO pentru conectare la baza de date
efectueaza in general urmatoarele operatii:
1. Conectare la serverul bazei de date, prin apelare new PDO(), obtinand un
obiect pentru lucru cu acea baza de date.
2. Aplicare functii specifice PDO pt. efectuarea interogarilor la baza de date.
3. Retinerea si prelucrarea datelor returnate.
4. Deconectarea de la server.
- Pentru a vedea daca PDO este valabil pentru baza dv. de date, se poate verifica
cu phpinfo(), unde e o sectiune PDO, sau cu metoda
PDO::getAvailableDrivers()
foreach(PDO::getAvailableDrivers() as $driver) {
echo $driver.'
';
}

1. Conectare la baza de date

Orice interactiune cu o baza de date incepe prin conectarea la ea. In functie de tipul bazei de
date se face intai conectarea, prin crearea unei instante de obiect cu new PDO(). Dupa
conectare se aplica metodele PDO pentru retinerea si prelucrarea datelor, care in mare parte
sunt aceleasi, indiferent de baza de date conectata. Iata cum se face conectarea la cateva din
acestea:
Conectare la MySQL
<?php
// Datele
$hostdb =
$namedb =
$userdb =
$passdb =

de conectare (adresa_server, baza_de_date, nume si parola)


'localhost';
'numebd';
'username';
'password';

// Afiseaza mesaj daca s-a reusit conectarea, altfel, retine eventuala


eroare
try {
$dbh = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);
echo 'Connected to database';
}
catch(PDOException $e) {
echo $e->getMessage();
}
?>

- In variabila $dbh se creaza obiectul PDO in care vor fi stocate datele transmise
de la serverul MySQL. La aceasta instanta de obiect vor fi aplicate metodele
pentru prelucrarea datelor.

Observati ca s-a folosit formula try() ... catch(), aceasta pentru a nu expune
datele de conectare in cazul vreunei erori.
- De exemplu, folosind aceasta tehnica, daca numele bazei de date este
incorect, returneaza ceva de genul:
SQLSTATE[42000] [1049] Unknown database 'numebd'
- Daca numele sau parola sunt gresite, afiseaza ceva similar cu:
SQLSTATE[28000] [1045] Access denied for user 'numele'@'localhost' (using
password: YES)
Dar, daca s-ar folosi direct:
<?php
// Datele
$hostdb =
$namedb =
$userdb =
$passdb =

de conectare (adresa_server, baza_de_date, nume si parola)


'localhost';
'numebd';
'username';
'password';

$dbh = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);


?>

- Mesajul de eroare ar expune mai multe date, inclusiv parola, dupa cum se
vede mai jos:
Fatal error: Uncaught exception 'PDOException' with message 'SQLSTATE[28000]
[1045] Access denied for user 'numele'@'localhost' (using password: YES)' in
E:\server\www\zzz.php:14 Stack trace: #0 E:\server\www\zzz.php(14): PDO>__construct('mysql:host=loca...', 'numele', 'parola') #1 {main} thrown in
E:\server\www\zzz.php on line 7
Deci, este indicata aplicarea formulei try() ... catch().
Conectare PostgreSQL
<?php
try {
$dbh = new PDO("pgsql:host=localhost port=5432 dbname=pdo", "username",
"password");
echo "PDO connection object created";
}
catch(PDOException $e) {
echo $e->getMessage();
}
?>

Conectare la SQLite
Cand PDO e folosit cu SQLite, trebuie specificata doar calea catre fisierul cu baza
de date. Daca acesta nu exista, va incerca sa-l creeze.
<?php
try {
// connect to SQLite database
$dbh = new PDO("sqlite:/path/to/database.sdb");
}
catch(PDOException $e) {

echo $e->getMessage();

}
?>

Conectare la Firebird
Firebird este o baza de date folosita pe Windows.
<?php
try {
$dbh = new
PDO("firebird:dbname=localhost:C:\Programs\Firebird\DATABASE.FDB",
"SYSDBA", "masterkey");
}
catch (PDOException $e) {
echo $e->getMessage();
}
?>

Conectare la Informix
<?php
try {
$dbh = new PDO("informix:DSN=InformixDB", "username", "password");
}
catch (PDOException $e) {
echo $e->getMessage();
}
?>

Conectare la Oracle
<?php
try {
$dbh = new PDO("OCI:dbname=accounts;charset=UTF-8", "username",
"password")
}
catch (PDOException $e) {
echo $e->getMessage();
}
?>

Conectare la ODBC
Exista mai multe conexiuni ODBC care pot fi create. Iata conectarea la o baza de
date MS Access, numita "accounts".
<?php
try {
$dbh = new PDO("odbc:Driver={Microsoft Access Driver
(*.mdb)};Dbq=C:\accounts.mdb;Uid=Admin");
}
catch (PDOException $e) {
echo $e->getMessage();
}
?>

Conectare la DBLIB
O alta baza de date specifica Windows.
<?php
$hostdb = "localhost";
$port
= 10060;

$namedb
= "my_database";
$userdb = "username";
$passdb = "password";
try {
$dbh = new PDO ("dblib:host=$hostdb:
$port;dbname=$namedb","$userdb","$passdb");
}
catch (PDOException $e) {
echo $e->getMessage();
}
?>

Conectare la IBM
Urmatorul exemplu arata conectarea la o baza de date IBM DB2 numita
"accounts".
<?php
try {
$db = new PDO("ibm:DRIVER={IBM DB2 ODBC DRIVER};DATABASE=accounts;
HOSTNAME=1.2.3,4;PORT=56789;PROTOCOL=TCPIP;", "username", "password");
}
catch (PDOException $e) {
echo $e->getMessage();
}
?>

2. Inchiderea conexiunii cu baza de date

In mod normal, PHP inchide conexiunea la baza de date dupa ce a fost executat tot scriptul.
Dar deconectarea se poate face si intentionat, atribuind valoare null la obiectul PDO, dupa
cum e prezentat in exemplu de mai jos.
Instanta la acel obiect va fi distrusa, prin urmare, aceasta metoda trebuie adaugata dupa ce au
fost scrise toate instructiunile care trebuie aplicate obiectului PDO.
- Deconectarea prin aceasta metoda este utila deoarece elibereaza memoria folosita.
<?php
// Datele
$hostdb =
$namedb =
$userdb =
$passdb =

de conectare (adresa_server, baza_de_date, nume si parola)


'localhost';
'numebd';
'username';
'password';

// Afiseaza mesaj daca s-a reusit conectarea, altfel, retine eventuala


eroare
try {
$dbh = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);
echo 'Connected to database';
/* Instructiuni de lucru cu $dbh */
$dbh = null;
// Inchidere conexiune
}
catch(PDOException $e) {
echo $e->getMessage();
}
?>

In tutorialul urmator e prezentat modul de creare si adaugare date in tabel


MySQL, INSERT, UPDATE si DELETE folosind metoda PDO exec().

PHP PDO - exec (INSERT, UPDATE,


DELETE) MySQL
Dupa ce se realizeaza cu succes conectarea la baza de date (aici MySQL) si se creaza instanta
de obiect PDO, poate fi utilizata pentru executia de interogari SQL.
Interogarile SQL cu PDO pot fi facute in 2 moduri: direct (cu metodele "exec()" si "query()"),
sau cu declaratiile prepare() ... execute().
Prima varianta e mai simpla si in aceasta lectie va fi prezentata metoda exec.
Comenzile care modifica randuri din tabel, dar nu returneaza un set de rezultate cu randuri
si coloane (INSERT, UPDATE), se transmit cu metoda exec(), aceasta returneaza numarul de
randuri afectate, sau FALSE in caz de eroare.
$count = $dbh->exec("Comanda SQL");
Interogarile care selecteaza randuri (SELECT) si returneaza un set de rezultate cu randuri si
coloane se transmit cu metoda query(). In caz de eroare da FALSE.
$res = $dbh->query("Interogare SQL");
Pentru a lucra cu baze de date in PHP trebuie cunoscute interogarile specifice SQL, precum:
CREATE TABLE, INSERT, SELECT, etc.
Cu PDO, PHP transmite aceste comenzi sub forma de sir la MySQL, daca nu le cunoasteti,
sunt prezentate in lectiile despre baze de date SQL, incepand cu Baze de date SQL.

1. Creare tabel MySQL


Crearea unui tabel MySQL folosind PDO se face prin metoda "exec()" si instructiunea
specifica SQL, "CREATE TABLE ...", sintaxa fiind:
$obiectPDO->exec("CREATE TABLE `nume_tabel` (`coloana1` TIP,
`coloana2` TIP, ...)");
- Toate aceste instructiuni se adauga dupa cea de creare a obiectului PDO si conectare la
MySQL.
In exemplu urmator se creaza in baza de date "teste" un tabel denumit "sites", cu 4 coloane:
"id", "nume", "categorie" si "adresa".
<?php
// Datele
$hostdb =
$namedb =
$userdb =
$passdb =

de conectare (adresa_server, baza_de_date, nume si parola)


'localhost';
'teste';
'username';
'password';

try {
// Conectare si creare obiect PDO
$dbh = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);
$dbh->exec("SET CHARACTER SET utf8");
// Setare encoding caractere
UTF-8

// Creare tabel
$sql = "CREATE TABLE `sites` (`id` int(8) NOT NULL AUTO_INCREMENT PRIMARY
KEY , `nume` varchar(70) NOT NULL DEFAULT '', `categorie` varchar(25),
`adresa` varchar(100)) CHARACTER SET utf8 COLLATE utf8_general_ci";
if($dbh->exec($sql) !== false) echo 'Tabelul sites e creat';
//
Daca rezultatul e diferit de false, afiseaza confirmare
$dbh = null;
// Deconectare
}
catch(PDOException $e) {
echo $e->getMessage();
}
?>

- Daca tabelul e creat, afiseaza:


Tabelul sites e creat
- Prin "exec("SET CHARACTER SET utf8")" seteaza ca transferul de date dintre PHP si
serverul MySQL sa se faca in format de caractere UTF-8. Este indicata adaugarea acestei
instructiuni cand se lucreaza cu date ce contin diacritice si caractere mai putin uzuale, dar in
scriptul PHP trebuie aplicat si header-ul header('Content-type: text/html; charset=utf-8');.

2. INSERT
Dupa ce tabelul MySQL este creat, se pot adauga randuri cu date in el. Acest lucru se face cu
instructiunea INSERT, prin metoda exec(). Sintaxa generala este:
$obiectPDO->exec("INSERT INTO `nume_tabel` (`coloana1`, `coloana2`, ...)
VALUES ('valoare1', 'valoare2', ...));
Iata cum se aplica.
<?php
// Datele
$hostdb =
$namedb =
$userdb =
$passdb =

de conectare (adresa_server, baza_de_date, nume si parola)


'localhost';
'teste';
'username';
'password';

try {
// Conectare si creare obiect PDO
$dbh = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);
$dbh->exec("SET CHARACTER SET utf8");
// Setare encoding caractere
UTF-8
// Adaugare date
$sql = "INSERT INTO `sites` (`nume`, `categorie`, `adresa`)
VALUES
('Cursuri - Tutoriale', 'educatie', 'www.marplo.net'),
('Curs PHP-MySQL', 'programare', 'www.marplo.net/php-mysql'),
('Cursuri Engleza', 'limbi straine', 'www.marplo.net/engleza')";
$count = $dbh->exec($sql);
$dbh = null;
// Deconectare
}
catch(PDOException $e) {
echo $e->getMessage();
}

// Daca datele au fost adaugate ($coun nu e false) afiseaza nr. randuri


adaugate
if($count !== false) echo 'Nr. randuri adaugate: '. $count;
?>

- Acest cod adauga 3 randuri in tabelul "sites". Variabila $count retine numarul de randuri
afectate (adaugate) si script-ul va afisa:
Nr. randuri adaugate: 3
Tabelul "sites" va arata astfel:
| id | | nume
| | categorie
| | adresa
|
----------------------------------------------------------------------------------------------------------| 1 | | Cursuri - Tutoriale
| | educatie
| | www.marplo.net
|
| 2 | | Curs PHP-MySQL
| | programare
| | www.marplo.net/php-mysql
|
| 3 | | Cursuri Engleza
| | limbi straine
| |
www.marplo.net/engleza
|

Pentru a obtine ultimul "id" adaugat cu INSERT intr-o coloana AUTO_INCREMENT


PRIMARY KEY, se foloseste metoda lastInsertId().
- Atentie, cand sunt adaugate mai multe randuri in aceeasi instructiune INSERT, va
returna id-ul primului rand adaugat (ca si cum se adauga un singur rand).
UPDATE si DELETE sunt instructiuni SQL care modifica date din tabel, dar nu returneaza
un set de rezultate cu randuri si coloane, acestea (la fel ca INSERT) pot fi executate in PDO
cu metoda exec().

3. UPDATE
Dupa ce sunt adaugate date in tabelul MySQL, acestea pot fi modificate cu instructiunea
UPDATE. Formula generala aplicata cu PDO este:
$obiectPDO ->exec("UPDATE `nume_tabel` SET `coloana1`='valoare1',
`coloana2`='valoare2' WHERE conditie");
In urmatorul exemplu se modifica datele din coloanele "nume" si "adresa", unde "id" are
valoarea 3, din tabelul "sites", creat mai sus.
<?php
// Datele
$hostdb =
$namedb =
$userdb =
$passdb =

de conectare (adresa_server, baza_de_date, nume si parola)


'localhost';
'teste';
'username';
'password';

try {
// Conectare si creare obiect PDO
$dbh = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);
$dbh->exec("SET CHARACTER SET utf8");
// Setare encoding caractere
UTF-8
// Modificare date din coloanele "nume" si "adresa", unde id=3
$sql = "UPDATE `sites` SET `nume`='Cursuri Spaniola',
`adresa`='www.marplo.net/spaniola' WHERE `id`=3";

$count = $dbh->exec($sql);
$dbh = null;
// Deconectare
}
catch(PDOException $e) {
echo $e->getMessage();
}
// Daca interogarea e facuta cu succes ($count diferit de false)
if($count !== false) echo 'Randuri afectate: '. $count;
// Afiseaza
nr. randuri afectate
?>

- In browser va afisa:
Randuri afectate: 1
In unele situatii se poate ca UPDATE sa nu afecteze vreun rand si va returna 0. De aceea este
indicata verificarea prin conditia if($count !== false).
- E gresit if(!$count)

4. DELETE
Instructiunea DELETE sterge randuri din tabel. Formula generala aplicata cu PDO este:
$obiectPDO ->exec("DELETE FROM `nume_tabel` WHERE conditie");
In urmatorul exemplu se sterg toate randurile din tabelul "sites" care au coloana "categorie"
cu valoarea "educatie" sau "programare".
<?php
// Datele
$hostdb =
$namedb =
$userdb =
$passdb =

de conectare (adresa_server, baza_de_date, nume si parola)


'localhost';
'teste';
'username';
'password';

try {
// Conectare si creare obiect PDO
$dbh = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);
$dbh->exec("SET CHARACTER SET utf8");
// Setare encoding caractere
UTF-8
// Stergere randuri in functie de campul "categorie"
$sql = "DELETE FROM `sites` WHERE `categorie` IN('educatie',
'programare')";
$count = $dbh->exec($sql);
$dbh = null;
// Deconectare
}
catch(PDOException $e) {
echo $e->getMessage();
}
// Daca interogarea e facuta cu succes ($count diferit de false)
if($count !== false) echo 'Randuri afectate: '. $count;
// Afiseaza
nr. randuri afectate
?>

- In browser va afisa:

Randuri afectate: 2
- In lectia urmatoare sunt prezentate modul in care se poate selecta si prelua date din tabelul
MySQL cu metoda PDO query().
PHP PDO - Select, fetch

Pentru selectare date dintr-un tabel MySQL se foloseste instructiunea SELECT, iar prin
metode fetch specifice PDO datele cu randurile selectate primite de la serverul MySQL pot fi
preluate in mai multe moduri, cu metode si constante FETCH.
1. Selectare date din tabel MySQL

Dupa ce tabelul MySQL este creat si are randuri adaugate, se aplica interogarea SELECT
pentru a obtine date din randurile tabelului. Se poate folosi metoda query(), aceasta
returneaza un set de rezultate cu datele obtinute de la MySQL, sau FALSE in caz de eroare.
In exemplele prezentat aici se foloseste tabelul creat in lectia anterioara, care arata astfel:
| id | | nume
| | categorie
| | adresa
|
----------------------------------------------------------------------------------------------------------| 1 | | Cursuri - Tutoriale
| | educatie
| | www.marplo.net
|
| 2 | | Curs PHP-MySQL
| | programare
| | www.marplo.net/php-mysql
|
| 3 | | Cursuri Engleza
| | limbi straine
| |
www.marplo.net/engleza
|

- In urmatorul exemplu vor fi selectate randurile in care "id" este 1 sau 3.


<?php
// Datele
$hostdb =
$namedb =
$userdb =
$passdb =

de conectare (adresa_server, baza_de_date, nume si parola)


'localhost';
'teste';
'username';
'password';

try {
// Conectare si creare obiect PDO
$dbh = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);
$dbh->exec("SET CHARACTER SET utf8");
// Setare encoding caractere
UTF-8
// Selectare date
$sql = "SELECT * FROM `sites` WHERE `id` IN (1, 3)";
$datas = $dbh->query($sql);
// Daca select-ul e facut cu succes ($datas nu e false)
if($datas !== false) {
$cols = $datas->columnCount();
// Numar coloane returnate
echo 'Nr. coloane returnate: '. $cols. '<br />';
// Se parcurg si afiseaza datele selectate
foreach($datas as $row) {

echo $row['id']. ' - '. $row['nume']. ' - '. $row['categorie']. ' '. $row['adresa']. '<br />';
}
}
$dbh = null;
// Deconectare
}
catch(PDOException $e) {
echo $e->getMessage();
}
?>

- Metoda "columnCount()" returneaza numarul de coloane din setul de rezultate.


Observati ca se aplica la instanta in care s-a executat interogarea (aici variabila
$datas).
- Parcurgerea datelor se poate face si cu WHILE, while($row=$datas->fetch()), in
acest caz trebuie aplicata si metoda "fetch()" (este prezentata mai jos).
- Scriptul de mai sus va afisa:
Nr. coloane returnate: 4
1 - Cursuri - Tutoriale - educatie - www.marplo.net
3 - Cursuri Engleza - limbi straine - www.marplo.net/engleza
2. Metoda fetch()

fetch() returneaza fiecare rand, unul dupa altul, sau FALSE cand nu mai sunt randuri. Cu
aceasta metoda se poate determina modul in care sunt preluate datele.
fetch() poate primi optional un argument prin care se determina modul in care valorile sunt
returnate: Array, Obiect, Sir, .... Acest argument este o constanta care se aplica cu sintaxa:
PDO::FETCH_MOD
In continuare sunt prezentate cateva din aceste moduri, cele mai comune:
FETCH_ASSOC
- Returneaza fiecare rand ca un Array in care cheile sunt numele coloanelor
(similar cu mysql_fetch_assoc).
<?php
// Datele
$hostdb =
$namedb =
$userdb =
$passdb =

de conectare (adresa_server, baza_de_date, nume si parola)


'localhost';
'teste';
'username';
'password';

try {
// Conectare si creare obiect PDO
$dbh = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);
$dbh->exec("SET CHARACTER SET utf8");
// Setare encoding caractere
UTF-8
// Selectare date din MySQL
$sql = "SELECT * FROM `sites`";
$datas = $dbh->query($sql);
// Se parcurg datele si le afiseaza
while($row = $datas->fetch(PDO::FETCH_ASSOC)) {

echo $row['id']. ' - '. $row['nume']. ' - '. $row['categorie']. ' '. $row['adresa']. '<br />';
}
$dbh = null;
// Deconectare
}
catch(PDOException $e) {
echo $e->getMessage();
}
?>

- In browser apare:

1 - Cursuri - Tutoriale - educatie - www.marplo.net


2 - Curs PHP-MySQL - programare - www.marplo.net/php-mysql
3 - Cursuri Engleza - limbi straine - www.marplo.net/engleza
FETCH_NUM
- Returneaza fiecare rand ca un Array in care cheile sunt numere consecutive
(incepand de la 0), reprezentand ordinea coloanelor din setul de rezultate
(similar cu mysql_fetch_row).
<?php
// Datele
$hostdb =
$namedb =
$userdb =
$passdb =

de conectare (adresa_server, baza_de_date, nume si parola)


'localhost';
'teste';
'username';
'password';

try {
// Conectare si creare obiect PDO
$dbh = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);
$dbh->exec("SET CHARACTER SET utf8");
// Setare encoding caractere
UTF-8
// Selectare date din MySQL
$sql = "SELECT * FROM `sites`";
$datas = $dbh->query($sql);
// Se parcurg datele
while($row = $datas->fetch(PDO::FETCH_NUM)) {
echo $row[0]. '-'. $row[1]. '<br />';
// Afiseaza datele din prima
si a doua coloana
}
$dbh = null;
// Deconectare
}
catch(PDOException $e) {
echo $e->getMessage();
}
?>

- In browser afiseaza:
1-Cursuri - Tutoriale
2-Curs PHP-MySQL
3-Cursuri Engleza

FETCH_BOTH
- Produce un Array cu ambele tipuri de chei, atat numele coloanelor cat si
numere consecutive reprezentand ordinea coloanelor din setul de rezultate.
<?php
// Datele
$hostdb =
$namedb =
$userdb =
$passdb =

de conectare (adresa_server, baza_de_date, nume si parola)


'localhost';
'teste';
'username';
'password';

try {
// Conectare si creare obiect PDO
$dbh = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);
$dbh->exec("SET CHARACTER SET utf8");
// Setare encoding caractere
UTF-8
// Selectare date din MySQL, unde "id" are valoarea 2
$sql = "SELECT `id`, `nume` FROM `sites` WHERE `id`=2";
$datas = $dbh->query($sql);
// Se parcurg datele
while($row = $datas->fetch(PDO::FETCH_BOTH)) {
echo $row['id']. '-'. $row['nume']. '<br />';
// Afiseaza datele
din coloanele 'id' si 'nume'
echo $row[0]. '-'. $row[1]. '<br />';
// Afiseaza din prima si a
doua coloana (aceleasi)
}
$dbh = null;
// Deconectare
}
catch(PDOException $e) {
echo $e->getMessage();
}
?>

- In browser apare:
2-Curs PHP-MySQL
2-Curs PHP-MySQL

FETCH_OBJ
- Returneaza fiecare rand ca un obiect. Valorile coloanelor se acceseaza ca
proprietati ale obiectului, prin numele lor.
<?php
// Datele
$hostdb =
$namedb =
$userdb =
$passdb =

de conectare (adresa_server, baza_de_date, nume si parola)


'localhost';
'teste';
'username';
'password';

try {
// Conectare si creare obiect PDO
$dbh = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);
$dbh->exec("SET CHARACTER SET utf8");
// Setare encoding caractere
UTF-8
// Selectare date din MySQL, randuri cu "id" mai mic decat 3
$sql = "SELECT `id`, `nume` FROM `sites` WHERE `id`<3";

$datas = $dbh->query($sql);
// Se parcurg datele
while($row = $datas->fetch(PDO::FETCH_OBJ)) {
echo $row->id. '-'. $row->nume. '<br />';
coloanele 'id' si 'nume'
}

// Afiseaza datele din

$dbh = null;
// Deconectare
}
catch(PDOException $e) {
echo $e->getMessage();
}
?>

- Va afisa:

1-Cursuri - Tutoriale
2-Curs PHP-MySQL
FETCH_CLASS
- Permite ca datele sa fie preluate intr-o clasa, creand o instanta de obiect la
acea clasa. Numele campurilor sunt folosite ca proprietati in acea clasa. Se
aplica cu metoda fetchALL().
<?php
// Datele
$hostdb =
$namedb =
$userdb =
$passdb =

de conectare (adresa_server, baza_de_date, nume si parola)


'localhost';
'teste';
'username';
'password';

// Definire clasa
class Sites {
// Definire proprietati
public $id;
public $categorie;
// Metoda a clasei
function makeString() {
// Returneaza un sir cu valorile proprietatilor, cu primul caracter din
cuvinte majuscula
return ucwords($this->id. ' - '. $this->categorie). '<br />';
}
}
try {
// Conectare si creare obiect PDO
$dbh = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);
$dbh->exec("SET CHARACTER SET utf8");
// Setare encoding caractere
UTF-8
// Selectare date din MySQL, coloanele "id" si "categorie"
$sql = "SELECT `id`, `categorie` FROM `sites`";
$datas = $dbh->query($sql);
$obj = $datas->fetchALL(PDO::FETCH_CLASS, 'Sites');
// Aplicare
FETCH_CLASS la clasa Sites
// Parcurge datele din setul de rezultate, creaza instanta de clasa
$insSites

foreach($obj as $insSites) {
echo $insSites->makeString();
instanta clasei
}

// Apeleaza metoda makeString() la

$dbh = null;
// Deconectare
}
catch(PDOException $e) {
echo $e->getMessage();
}
?>

- Observati cum e aplicat FETCH_CLASS, la metoda "fetchALL()" si cu un


argument tip sir ce reprezinta numele clasei (aici "Sites").
- Acesta metoda e utila in cazul unor proiecte mai mari, definind intr-o clasa
instructiunile ce trebuie aplicate datelor primite de la baza de date se poate
reduce cantitatea de cod si se imbunatateste flexibilitatea scriptului.
- Script-ul va afisa:
1 - Educatie
2 - Programare
3 - Limbi Straine
O alternativa la FETCH_CLASS este metoda fetchObject(). Similar, si cu
aceasta datele din coloanele fiecarui rand din cele obtinute la "query()" sunt
preluate printr-o clasa care este adaugata ca argument la metoda.
Exemplu:
<?php
// Datele
$hostdb =
$namedb =
$userdb =
$passdb =

de conectare (adresa_server, baza_de_date, nume si parola)


'localhost';
'teste';
'username';
'password';

// Definire clasa
class Sites {
// Definire proprietati
public $id;
public $categorie;
// Metoda a clasei
function makeString() {
// Returneaza un sir cu valorile proprietatilor, primul caracter al
cuvintelor majuscula
return ucwords($this->id. ' - '. $this->categorie). '<br />';
}
}
try {
// Conectare si creare obiect PDO
$dbh = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);
$dbh->exec("SET CHARACTER SET utf8");
// Setare encoding caractere
UTF-8
// Selectare date din MySQL, coloanele "id" si "categorie"
$sql = "SELECT `id`, `categorie` FROM `sites`";

$datas = $dbh->query($sql);
// Parcurgere instanta de obiect creata cu fetchObject() la clasa Sites
while($obj = $datas->fetchObject('Sites')) {
echo $obj->makeString();
// Afiseaza rezultatul apelarii metodei
makeString()
}
$dbh = null;
// Deconectare
}
catch(PDOException $e) {
echo $e->getMessage();
}
?>

- Numele coloanelor din fiecare rand sunt folosite ca proprietati ale clasei apelate
(aici Sites)
- In browser apare:
1 - Educatie
2 - Programare
3 - Limbi Straine
FETCH_FUNC
- O alta constanta FETCH_ care se aplica la metoda fetchALL() este
FETCH_FUNC. Returneaza un Array cu rezultatul apelarii unei functii, folosind ca
argumente coloanele fiecarui rand din setul de rezultate. Cheile din Array sunt
numere consecutive (de la 0), iar valoarea lor e rezultatul dat de functie pt.
fiecare rand.
<?php
// Datele
$hostdb =
$namedb =
$userdb =
$passdb =

de conectare (adresa_server, baza_de_date, nume si parola)


'localhost';
'teste';
'username';
'password';

// Definire functie
function test($id, $nume) {
// Returneaza un sir cu datele din parametri, cu majuscule
return strtoupper($id.'-'.$nume);
}
try {
// Conectare si creare obiect PDO
$dbh = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);
$dbh->exec("SET CHARACTER SET utf8");
// Setare encoding caractere
UTF-8
// Selectare date din MySQL
$sql = "SELECT `id`, `nume` FROM `sites`";
$datas = $dbh->query($sql);
$ar_row = $datas->fetchALL(PDO::FETCH_FUNC, 'test');
FETCH_FUNC la functia test()
var_export($ar_row);
$dbh = null;
}

// Aplicare

// Afiseaza structura Array-ului


// Deconectare

catch(PDOException $e) {
echo $e->getMessage();
}
?>

- Acest mod este util cand se doreste aplicarea acelorasi instructiuni la mai multe
seturi de date obtinute din tabel MySQL, astfel, pot fi toate definite intr-o functie.
- Rezultatul afisat este:
array ( 0 => '1-CURSURI - TUTORIALE', 1 => '2-CURS PHP-MYSQL', 2 => '3CURSURI ENGLEZA', )
Metoda query() accepta, dupa interogarea SQL, si un argument optional ce
reprezinta modul-fetch.
Exemplu:
<?php
// Datele
$hostdb =
$namedb =
$userdb =
$passdb =

de conectare (adresa_server, baza_de_date, nume si parola)


'localhost';
'teste';
'username';
'password';

try {
// Conectare si creare obiect PDO
$dbh = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);
$dbh->exec("SET CHARACTER SET utf8");
// Setare encoding caractere
UTF-8
// Selectare date din MySQL, unde "id" este 3
$sql = "SELECT `id`, `adresa` FROM `sites` WHERE `id`=3";
$datas = $dbh->query($sql, PDO::FETCH_OBJ);
// Aplicare query() cu
un mod-fetch
// Se parcurg datele
while($row = $datas->fetch()) {
echo $row->id. '-'. $row->adresa. '<br />';
coloanele "id" si "adresa"
}

// Afiseaza datele din

$dbh = null;
// Deconectare
}
catch(PDOException $e) {
echo $e->getMessage();
}
?>

- In browser apare:

3-www.marplo.net/engleza

Daca metoda fetch() este apelata fara argumente si la "query()" nu e specificat vreun tip
FETCH_, modul implicit (default) este PDO::FETCH_BOTH.
- O alta metoda prin care se poate seta modul FETCH_ default este setFetchMode().
Ex.:

$datas = $dbh->query($sql);
$datas->setFetchMode (PDO::FETCH_OBJ);
while($row = $datas->fetch()) { // ... }
- Mai multe detalii la pagina oficiala setFetchMode

In tutorialul urmator este prezentat modul de utilizare al metodelor prepare() si


execute().

PHP PDO - prepare si execute


Cu metodele exec() si query() se executa imediat comenzile SQL adaugate in ele. Cu PDO e
posibil sa fie pregatita o interogare SQL pentru executie fara ca sa fie transmisa imediat,
pentru aceasta se foloseste metoda prepare().
prepare() preia ca argument o declaratie SQL si returneaza un obiect PDOStatement. Acest
obiect are o metoda execute() prin care se executa declaratia SQL cand se doreste acest lucru,
returneaza TRUE sau FALSE in caz de eroare. Sintaxa generala de aplicare este:
$obj = $obiectPDO->prepare("Interogare SQL");
$obj->execute(Array);
- La "Interogare SQL" se poate aplica orice instructiune pt. SQL: INSERT, SELECT,
UPDATE, DELETE.
- Argumentul Array de la execute() e optional, acesta reprezinta un Array cu parametri ce
corespund declaratiei SQL de la prepare(), si valorile care vor fi transmise la MySQL.
In exemplele prezentate in aceasta lectie se foloseste tabelul "sites", creat si utilizat in
lectiile anterioare, care arata astfel:
| id | | nume
| | categorie
| | adresa
|
----------------------------------------------------------------------------------------------------------| 1 | | Cursuri - Tutoriale
| | educatie
| | www.marplo.net
|
| 2 | | Curs PHP-MySQL
| | programare
| | www.marplo.net/php-mysql
|
| 3 | | Cursuri Engleza
| | limbi straine
| |
www.marplo.net/engleza
|

Iata explicat mai bine printr-un exemplu cum se aplica sintaxa de mai sus intr-un script PHP
cu PDO. Acesta va defini cu "prepare()" o comanda SQL prin care va selecta din tabel
randurile in functie de valorile adaugate prin "execute()".
<?php
// Datele
$hostdb =
$namedb =
$userdb =
$passdb =

de conectare (adresa_server, baza_de_date, nume si parola)


'localhost';
'teste';
'username';
'password';

try {
// Conectare si creare obiect PDO
$dbh = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);

$dbh->exec("SET CHARACTER SET utf8");


UTF-8

// Setare encoding caractere

// Definire comanda SQL care va fi aplicata in metoda prepare()


$sql = "SELECT `nume`, `adresa` FROM `sites` WHERE `id`= :id OR
`categorie`= :categorie";
$prep = $dbh->prepare($sql);
// Interogarea e pregatita si stocata
in $prep
// Variabila Array cu valori ce trebuie adaugate in interogarea SQL
pregatita (pt. ':id' si ':categorie')
$ar_val = array('id'=>2, 'categorie'=>'educatie');
// Daca se executa cu succes interogarea, folosind execute() si valorile
din $ar_val
if($prep->execute($ar_val)) {
// Parcurge si afiseaza randurile obtinute
while($row = $prep->fetch()) echo $row['nume'].' - '.
$row['adresa'].'<br />';
}
/* Se executa inca o selectare, cu alte valori, aplicata aceleiasi
declaratii SQL */
echo 'Select-ul 2<br />';
// Variabila Array cu valori ce trebuie adaugate in interogarea SQL
pregatita (pt. ':id' si ':categorie')
$ar_val = array('id'=>8, 'categorie'=>'limbi straine');
// Daca se executa interogarea, folosind execute() si valorile din
$ar_val
if($prep->execute($ar_val)) {
// Parcurge si afiseaza randurile obtinute
while($row = $prep->fetch()) echo $row['nume'].' - '.
$row['adresa'].'<br />';
}
$dbh = null;
// Deconectare
}
catch(PDOException $e) {
echo $e->getMessage();
}
?>

- In expresia $sql = "SELECT `nume`, `adresa` FROM `sites` WHERE `id`= :id OR
`categorie`= :categorie";, ":id" si ":categorie" sunt parametri pentru valorile care vor fi
preluate din Array, de la elementele cu aceeasi denumire la chei ('id' si 'categorie'). Datorita
acestei notatii se poate folosi aceeasi comanda SQL pregatita, cu valori diferite.
- Observati cat de usor se pot efectua mai multe interogari la baza de date, folosind aceeasi
declaratie SQL, doar prin apelarea lui "execute()" cu valorile dorite.
Script-ul va afisa:
Cursuri - Tutoriale - www.marplo.net
Curs PHP-MySQL - www.marplo.net/php-mysql
Select-ul 2
Cursuri Engleza - www.marplo.net/engleza
In declaratia SQL pregatita, in loc de sintaxa :nume pentru locul valorilor se poate folosi
caracterul ?, dar in acest caz, Array-ul cu valorile trebuie sa fie secvential (adica cu chei
numere incepand de la 0), valorile vor fi preluate si adaugate la SQL in ordinea lor.

De exemplu:
$sql = "SELECT `nume`, `adresa` FROM `sites` WHERE `id`=? OR
`categorie`=?";
$prep = $dbh->prepare($sql);
$prep->execute(array(2, 'programare'));

bindValue si bindParam
Un alt mod de a transmite valori la o interogare SQL pregatita cu "prepare()" este utilizarea
metodei bindValue() sau bindParam().
Utilizarea acestor metode in loc de Array are avantajul ca ofera un control mai bun asupra
valorilor transmise, putand fi specificate prin atributele lor tipul de date si chiar numarul de
caractere ce-l va avea valoarea transmisa. Ele se aplica la obiectul PDOStatement obtinut cu
"prepare()".
Diferenta dintre bindValue si bindParam este:
La bindValue se adauga direct valoarea si optional se poate specifica numarul de
caractere ce vor fi transmise. Sintaxa generala este:
bindValue(paramSQL, valoare, tip, nr_caractere)
- paramSQL este parametrul din declaratia SQL, specificat cu :nume, intre ghilimele. Daca e
folosit semnul-intrebarii ?, la paramSQL se adauga numarul de ordine (incepand cu 1) al
acelui parametru.
- tip e optional, la el se precifica o constanta prin care se defineste tipul de date care trebuie
transmis: PDO::PARAM_INT pt. numere intregi, PDO::PARAM_STR pentru siruri.
- La nr_caractere se adauga, optional, numarul de caractere ce va fi transmis.
De exemplu:
$sql = "SELECT `nume`, `adresa` FROM `sites` WHERE `id`= :id OR
`categorie`= :categorie";
$prep = $dbh->prepare($sql);
$prep->bindValue(':id', 2, PDO::PARAM_INT);
// Transmite valoarea
2 la coloana "id"
$prep->bindValue(':categorie', 'programare', PDO::PARAM_STR, 10);
// Transmite valoarea "programare" la coloana "categorie"
$prep->execute();

La bindParam se adauga valoarea prin variabile. Sintaxa generala este:


bindParam(paramSQL, $var_val, tip)
- paramSQL este parametrul din declaratia SQL, specificat cu :nume, intre ghilimele. Daca e
folosit semnul-intrebarii ?, la paramSQL se adauga numarul de ordine (incepand cu 1) al
acelui parametru.
- $var_val e o variabila in care e stocata valoarea.
- tip e optional, la el se precifica o constanta prin care se defineste tipul de date care trebuie
transmis: PDO::PARAM_INT pt. numere intregi, PDO::PARAM_STR pentru siruri.
De exemplu:
$sql = "SELECT `nume`, `adresa` FROM `sites` WHERE `id`=? OR
`categorie`=?";
$prep = $dbh->prepare($sql);
$id = 2;

$cat = 'programare';
$prep->bindParam(1, $id, PDO::PARAM_INT);
// Transmite valoarea din
variabila $id la coloana de la primul ? (adica "id")
$prep->bindParam(2, $cat, PDO::PARAM_STR);
// Transmite valoarea din
variabila $cat la coloana de la al doilea ? (categorie)
$prep->execute();

Iata si un exemplu practic cu aceste doua metode, aplicat la tabelul "sites". Se adauga doua
randuri in tabel, unul dupa altul; primul folosind bindValue(), iar al doilea cu bindParam()
<?php
// Datele
$hostdb =
$namedb =
$userdb =
$passdb =

de conectare (adresa_server, baza_de_date, nume si parola)


'localhost';
'teste';
'username';
'password';

try {
// Conectare si creare obiect PDO
$dbh = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);
$dbh->exec("SET CHARACTER SET utf8");
// Setare encoding caractere
UTF-8
// Definire comanda SQL care va fi aplicata in metoda prepare()
$sql = "INSERT INTO `sites` (`nume`, `categorie`, `adresa`) VALUES
(:nume, :categorie, :adresa)";
$prep = $dbh->prepare($sql);
// Interogarea e pregatita si stocata
in $prep
// Se adauga valori cu bindValue
$prep->bindValue(':nume', 'Curs Ajax', PDO::PARAM_STR);
$prep->bindValue(':categorie', 'programare', PDO::PARAM_STR);
$prep->bindValue(':adresa', 'www.marplo.net/ajax', PDO::PARAM_STR);
// Daca datele sunt adaugate cu succes, afiseaza confirmare cu id-ul
randului
if($prep->execute()) echo 'A fost adaugat randul cu id='. $dbh>lastInsertId();
// Se definesc variabile cu valori ce vor fi incluse cu bindParam
$nume = 'Jocuri Flash';
$categorie = 'jocuri';
$adresa = 'www.marplo.net/jocuri';
// Se includ variabilele
$prep->bindParam(':nume', $nume, PDO::PARAM_STR);
$prep->bindParam(':categorie', $categorie, PDO::PARAM_STR);
$prep->bindParam(':adresa', $adresa, PDO::PARAM_STR);
// Daca datele sunt adaugate cu succes, afiseaza confirmare cu id-ul
randului
if($prep->execute()) echo '<br />A fost adaugat randul cu id='. $dbh>lastInsertId();
$dbh = null;
// Deconectare
}
catch(PDOException $e) {
echo $e->getMessage();
}

?>

- In browser va afisa:
A fost adaugat randul cu id=4
A fost adaugat randul cu id=5
Utilizarea combinatiei prepare() ... execute() este adesea mai rapida decat query() /
execute(). In plus, aceasta formula este utila cand trebuie folosita de mai multe ori aceeasi
declaratie SQL, cu parametri diferiti.
Un alt avantaj e acela ca datele ce trebuie transmise la serverul MySQL sunt mai clar separate
de comanda SQL, in plus sunt si filtrate. De exemplu, daca se transmite cu o metoda "bind"
sirul "a' b' c", PDO include sirul "a\' b\' c".
Daca interogarea SQL contine instructiunea LIKE cu un parametru, caracterul '%' trebuie
adaugat la valoarea transmisa.
De exemplu:

// incorect
$prep = $dbh->prepare("SELECT `coloana` FROM `tabel` WHERE `coloana` LIKE
%:cuvant%");
$prep->bindValue(':cuvant', 'valoare');
// E CORECT
$prep = $dbh->prepare("SELECT `coloana` FROM `tabel` WHERE `coloana`
LIKE :cuvant");
$prep->bindValue(':cuvant', '%valoare%');

- In lectia urmatoare va fi prezentat lucru cu metodele: setAttribute(), beginTransaction() si


commit().

PHP PDO - setAttribute si


beginTransaction
Cand se creaza un obiect PDO cu o conexiune la o baza de date, daca apare vreo eroare in
transmiterea de comenzi la baza de date determina lansarea PDOException. Daca eroarea nu
e preluata cu try ... catch() PHP va opri executia scriptului.
PDOException este o extensie a clasei PHP Exception, prin care pot fi "prinse" erorile.
Cu formula try ... catch(), pe langa faptul ca eroarea e preluata iar scriptul isi continua
executia, se poate de asemenea si personaliza mesajul ce va fi afisat. Sintaxa generala este:

try {
// ... Instructiuni PHP-PDO
}
catch(PDOException $e) {
echo 'Mesaj de eroare personalizat';
echo $e->getCode(). '-'. $e->getMessage();
erorii dat de PHP
}

// Afiseaza codul si mesajul

- Variabila $e reprezinta obiectul in care e stocata eroare detectata de PHP.


- Metoda getCode() returneaza codul erorii, iar getMessage() mesajul acelei erori. Daca
acestea nu sunt adaugate, apare doar mesajul personalizat.

1. setAttribute
Cu metoda PDO setAttribute() se pot seta diferite atribute la obiectul PDO prin care se face
conexiunea la baza de date, printre care si modul de raportare a erorilor retinute cu "try ...
catch()".
Formula generala de aplicare a acestei metode este:
$obiectPDO->setAttribute(ATRIBUT, OPTIUNE)
- ATTRIBUT reprezinta tipul atributului care va fi aplicat, iar OPTIUNE este optiunea lui,
cum ar fi:

PDO::ATTR_CASE - forteaza ca numele coloanelor sa fie returnate intr-un mod


specific, determinat cu una din urmatoarele optiuni:
o PDO::CASE_LOWER - denumirea coloanelor va fi returnata cu litere mici.
o PDO::CASE_UPPER - numele coloanelor e retinut cu litere mari.
o PDO::CASE_NATURAL - lasa numele coloanelor asa cum sunt returnate de
baza de date

PDO::ATTR_ERRMODE - atribut folosit pentru specificarea modului de raportare


a erorillor, prin urmatoarele constante:
o PDO::ERRMODE_SILENT - determina ignorarea erorii, scriptul trece mai
departe fara sa returneze ceva legat de eroarea respectiva.
o PDO::ERRMODE_WARNING - emite eroarea ca avertisment PHP
standard.
o PDO::ERRMODE_EXCEPTION - returneaza informatia despre eroare,
data de PDOException.

Iata cum se aplica si ce rezultate da metoda setAttribute(), va fi utilizat acelasi tabel MySQL
din lectiile precedente (denumit "sites").
- In urmatorul exemplu se foloseste atributul PDO::ATTR_CASE cu optiunea
PDO::CASE_UPPER.
<?php
// Datele
$hostdb =
$namedb =
$userdb =
$passdb =

de conectare (adresa_server, baza_de_date, nume si parola)


'localhost';
'teste';
'username';
'password';

try {
// Conectare si creare obiect PDO

$dbh = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);


$dbh->exec("SET CHARACTER SET utf8");
// Setare encoding caractere
UTF-8
// Seteaza ca numele coloanelor sa fie returnat cu majuscule
$dbh->setAttribute(PDO::ATTR_CASE, PDO::CASE_UPPER);
// Selecteaza primul rand
$sql = "SELECT * FROM `sites` LIMIT 1";
$datas = $dbh->query($sql)->fetch(PDO::FETCH_ASSOC);
interogarea si preia in modul FETCH_ASSOC

// Executa

// Daca select-ul e facut cu succes ($datas nu e false)


if($datas !== false) {
// Se parcurg datele si afiseaza numele coloanelor
foreach($datas as $col=>$row) {
echo ' - '. $col;
}
}
$dbh = null;
// Deconectare
}
catch(PDOException $e) {
echo $e->getMessage();
}

- Script-ul va afisa in browser numele coloanelor, cu majuscule:


- ID - NUME - CATEGORIE - ADRESA
- In exemplu urmator se foloseste metoda setAttribute() pentru a afisa in caz de eroare
modul standard returnat de PHP. Se aplica atributul PDO::ATTR_ERRMODE cu optiunea
PDO::ERRMODE_WARNING. Pentru a forta generarea erorii, se face un SELECT la o
coloana ce nu exista in tabelul "sites".
<?php
// Datele
$hostdb =
$namedb =
$userdb =
$passdb =

de conectare (adresa_server, baza_de_date, nume si parola)


'localhost';
'teste';
'username';
'password';

try {
// Conectare si creare obiect PDO
$dbh = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);
// Seteaza ca mod pt. erori cel standard PHP
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING);
$dbh->exec("SET CHARACTER SET utf8");
// Setare encoding caractere
UTF-8
// Selecteaza primul rand
$sql = "SELECT `zzz` FROM `sites` LIMIT 1";
$datas = $dbh->query($sql);
// Executa interogarea
// Se parcurg datele si afiseaza ce e in coloana 'zzz'
foreach($datas as $row) {
echo $row['zzz'];
}
}

$dbh = null;

// Deconectare

catch(PDOException $e) {
echo $e->getMessage();
}

- Deoarece coloana "zzz" nu exista, va emite urmatoarea eroare:


Warning: PDO::query() [pdo.query]: SQLSTATE[42S22]: Column not found: 1054 Unknown
column 'zzz' in 'field list' in E:\server\www\test.php on line 19
Warning: Invalid argument supplied for foreach() in E:\server\www\test.php on line 22
- Daca la setAttribute, in loc de ERRMODE_WARNING se adauga
ERRMODE_EXCEPTION, informatia afisata despre eroare va fi:
SQLSTATE[42S22]: Column not found: 1054 Unknown column 'zzz' in 'field list'

2. beginTransaction
Metoda beginTransaction() se foloseste impreuna cu commit().
beginTransaction() opreste executia oricarei interogari la baza de date, pana cand e apelata
metoda commit(), in acel moment vor fi executate declaratiile SQL adaugate intre aceste 2
metode.
Avantajul acestei tehnici consta in faptul ca pot fi scrise mai multe seturi de interogari SQL,
care "stau in asteptare", iar cand e apelata metoda commit() sunt executate toate deodata.
In exemplu urmator se aplica beginTransaction() care permite scrierea de instructiuni SQL
fara ca acestea sa fie transmise la serverul MySQL. Se adauga 3 comenzi: prima modifica
datele din randul unde id=3 (cu UPDATE), a doua (cu INSERT) adauga un nou rand, iar a
treia comanda efectueaza un SELECT, dar in functie de ultimul "id" creat prin INSERT-ul
precedent. Toate aceste instructiuni sunt executate cand e apelata metoda commit() (vedeti si
explicatiile din cod).
<?php
// Datele
$hostdb =
$namedb =
$userdb =
$passdb =

de conectare (adresa_server, baza_de_date, nume si parola)


'localhost';
'teste';
'username';
'password';

try {
// Conectare si creare obiect PDO
$dbh = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
//
Seteaza mod exception pt. erori
$dbh->exec