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.
- 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>
<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>
- Acestui element ii puteti adauga informatii care sa defineasca culoarea sau imaginea
din fondul paginii, textul si culoarea link-urilor.
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.
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.
- 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.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
- Distanta dintre doua paragrafe succesive este mare deoarece browser-ul le afiseaza
cu un rnd gol intre ele.
Paragraf 1
Paragraf 2
Paragraf 3
Paragraf 4
- 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>
<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
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.
Exemplu :
<font size="+2">Doua
Exemplu :
<font face="Arial Black">Acesta este tipul de font Arial Black</font>
Exemplu :
<font color="#00dd00">Acest text are culoarea verde</font>
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 pentru mai mult
spaiu intre cuvinte.
- <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
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, ).
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
- Urmatoarele elemente pentru format sunt folosite mai rar si sunt pentru documente cu
aplicatii tehnice
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
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:
Marcatori si numerotare
HTML contine cateva tag-uri utile pentru asezarea continutului in pagina. Prin acestea textul
este mai usor de citit si evidentiat.
- 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.
- 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:
- <ol> ... </ol> este un element de numerotare. Elementele din lista sunt numerotate
automat.
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 ...
IV.
V.
- <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">
Adaugare Imagini
HTML contine si elemente pentru adaugarea de imagini in pagina web.
- 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:
- 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:
Exemplu:
<body bgcolor="#00ffff" link="#000000" vlink="#ff0000" alink="#00ff00">
- 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:
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.
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.
<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:
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 >
ismap
<img atribute >
Descriere
name = "nume_harta"
shape = "forma"
alt = "text"
- 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 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
- width = specifica lungimea tabelului (In pixeli sau procente din lungimea paginii)
- border = grosimea liniei (in pixeli) ce defineste tabelul si nconjoara fiecare celula
- 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
- colspan = specifica cat de multe coloane ale tabelului aceasta celula va inlocui
- rowspan = specifica cat de multe randuri ale tabelului aceasta celula va inlocui
- width = specifica lungimea celulei (In pixeli sau procente din lungimea paginii)
- height = specifica inaltimea celulei (In pixeli sau procente din inaltimea paginii)
titlu 2
linia 2- coloana 1
linia 3- coloana 1
linia 3- coloana 2
linia 4- coloana 2 - colorat
acesta este textul
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.
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.
Elementul <FRAME>
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.
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:
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.
- 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.
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>
value - datele (valoarea) asociate acelui element de formular si care sunt trimise,
impreuna cu numele, catre scripturi (PHP, CGI, JavaScript)
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).
In browser va apare:
Camp textarea
- "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.
Check box
- este folosit pentru adaugarea mai multor optiuni pe care utilizatorul le poate alege
(oricate din ele) prin bifarea lor
Radio button
- este folosit pentru adaugarea mai multor optiuni dintre care utilizatorul poate alege
una singura
- "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)
Buton simplu
- acesta este folosit cu JavaScript sau VBScript pentru a efectua o actiune cnd este
apasat
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
Buton Reset
- permite utilizatorului sa stearga toate datele pe care le-a scris in celelalte elemente
din formular
Elemente select
- sunt doua tipuri de elemente Select, unde diferenta o face folosirea atributului SIZE
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:
- charset stabileste tipul de caractere (in general se foloseste ISO-8859-1 sau UTF-8),
dar exista si altele.
- textul adaugat cu acest tag pentru descriere are prioritate inaintea frazelor din
continut. (folositi maxim 40, 50 caractere).
- 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.
src - Defineste locatia fisierului audio folosit (midi .au sau wav)
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
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.
direction - directia de miscare (left, right, up, down) - (stanga, dreapta, sus, jos)
- In loc de text poate fi folosit si o imagine, inlocuind textul (aici "Marquee text") cu tagul
"<img> pentru imagine.
<element style="proprietate:valoare;
proprietate:valoare;"></element>
- Exemplu:
<h4 style="color:#ff1111;">Exemplu h4</h4>
In pagina va apare
Exemplu h4
- Conform acestui cod, toate textele "h2" din pagina vor avea culoarea
albastra si vor fi subliniate.
3. Extern
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
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.
Descriere
Valori
backgroun
imagini sau culori de fundal
d
Color
culoarea textului
font-size
dimensiunea fontului
font-style
text cursiv
normal, italic
grosimea fontului
fontweight
marginright
alinierea textului
left(stanga), center(centru),
right(dreapta), justify
textevidentierea textului
decoration
none(nimic), underline(subliniat),
italic(cursiv), line-through(taiat)
text-indent
borderstyle
tipul chenarului
borderwidth
grosimea chenarului
bordercolor
culoarea chenarului
- 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-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).
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:
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
- 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
- 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
<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>
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:
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):
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>
#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" />
- Click pe Examplu structura HTML5, ca sa vedeti cum apare pagina web creata
cu exemplu prezentat mai sus.
Tag-ul canvas
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.
("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).
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 .
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:
Exemplu:
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:
<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:
Rezultat:
Rezultat:
Cursuri gratuite si tutoriale: www.marplo.net pt. Web Development.
Tag-ul progress
- 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>
autofocus="autofocus" />
Desenare cu HTML5
Adaugare transparenta
Desenare linii
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>
<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:
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)
// adauga liniile
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):
// 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>
Canvas - Text
Sunt doua metode pentru adaugare text in canvas:
ctx.font = valoare - Specifica fontul textului, la fel ca proprietatea fontfamily din CSS.
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:
}
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
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)
intr-un
}
else {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}
}
draw();
--></script>
Rezultat:
}
else {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}
}
draw('#0102fe');
--></script>
// apeleaza functia
Nume
Sintaxa
Descriere
Aacute
Á
Á
A ascutit ()
aacute
á
á
a ascutit ()
Acirc
Â
Â
A circumflex ()
acirc
â
â
a circumflex ()
acute
´
´
accent grav ()
AElig
Æ
Æ
ligatura AE ()
aelig
æ
æ
ligatura ae ()
Agrave
À
À
A grav ()
agrave
à
à
a grav ()
amp
&
&
ampersand (&)
Aring
Å
Å
A cu inel ()
aring
å
å
a cu inel ()
Atilde
Ã
Ã
A tilda ()
atilde
ã
ã
a tilda ()
Auml
Ä
Ä
A umlaut ()
auml
ä
ä
a umlaut ()
brvbar
¦
¦
bara intrerupta ()
Ccedil
Ç
Ç
C sedila ()
ccedil
ç
ç
c sedila ()
cent
¢
¢
cent ()
copy
©
©
copyright ()
curren
¤
¤
valuta generala ()
deg
°
°
grad ()
div
÷
÷
÷
impartire ()
Eacute
É
É
E ascutit ()
eacute
é
é
e ascutit ()
Ecirc
Ê
Ê
E circumflex ()
ecirc
ê
ê
e circumflex ()
Egrave
È
È
E grav ()
egrave
è
è
e grav ()
emdash
&emdash;
nedefinit
em dash (&emdash)
emsp
 
nedefinit
em spatiu ()
endash
&endash;
nedefinit
en dash (&endash;)
ensp
 
nedefinit
en spatiu ()
ETH
Ð
Ð
Eth nordic ()
eth
ð
ð
eth nordic ()
Euml
Ë
Ë
E umlaut ()
euml
ë
ë
e umlaut ()
frac12
½
½
jumatate ()
frac14
¼
¼
sfert ()
frac34
¾
¾
trei sferturi ()
gt
>
nedefinit
Iacute
Í
Í
I ascutit ()
iacute
í
í
i ascutit ()
Icirc
Î
Î
I circumflex ()
icirc
î
î
i circumflex ()
iexcl
¡
¡
exclamatie inversata ()
Igrave
Ì
Ì
I grav ()
igrave
ì
ì
i grav ()
iquest
¿
¿
intrebare inversata ()
Iuml
Ï
Ï
I umlaut ()
iuml
ï
ï
i umlaut ()
laquo
«
«
lt
<
<
macr
¯
¯
macron ( )
micro
µ
µ
micro ()
middot
·
·
punct la mijloc ()
nbsp
 
spatiu nonbreaking
not
¬
¬
negatie ()
Ntilde
Ñ
Ñ
N tilda ()
ntilde
ñ
ñ
n tilda ()
Oacute
Ó
Ó
O ascutit ()
oacute
ó
ó
o ascutit ()
Ocirc
Ô
Ô
O circumflex ()
ocirc
ô
ô
o circumflex ()
Ograve
Ò
Ò
O grav ()
ograve
ò
ò
o grav ()
ordf
ª
ª
ordinal feminin ()
ordm
º
º
ordinal masculin ()
Oslash
Ø
Ø
O tiat ()
oslash
ø
ø
o tiat ()
Otilde
Õ
Õ
O tilda ()
otilde
õ
õ
o tilda ()
Ouml
Ö
Ö
O umlaut ()
ouml
ö
ö
o umlaut ()
para
¶
¶
paragraf ()
plusmn
±
±
plus minus ()
pound
£
£
lira sterlina ()
quot
"
"
ghilimele (")
raquo
»
»
reg
®
®
marca inregistrata ()
sect
§
§
semn sectiune ()
shy
­
­
soft hyphen ()
sup1
¹
¹
1 superior ()
sup2
²
²
2 superior ()
sup3
³
³
3 superior ()
szlig
ß
ß
sharp s ()
THORN
Þ
Þ
Thorn nordic ()
thorn
þ
þ
thorn nordic ()
times
×
×
inmultire ()
trade
™
nedefinit
trademark ()
Uacute
Ú
Ú
U ascutit ()
uacute
ú
ú
u ascutit ()
Ucirc
Û
Û
U circumflex ()
ucirc
û
û
u circumflex ()
Ugrave
Ù
Ù
U grav ()
ugrave
ù
ù
u grav ()
uml
¨
¨
umlaut ()
Uuml
Ü
Ü
U umlaut ()
uuml
¨
ü
u umlaut ()
Yacute
Ý
Ý
Y ascutit ()
yacute
ý
ý
y ascutit ()
yen
¥
¥
yen ()
yuml
ÿ
ÿ
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.
</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>.
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:
Valorile - sunt atributele unei proprietati; pot fi cuvinte cheie, valori numerice sau
procentuale, tipul valorii depinzand de proprietate.
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.
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>:
- 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:
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:
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:
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:
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.
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.
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:
- 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.
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.
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:
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:
- 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:
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".
font-size urmata de o valoare a dimensiunii care poate lua una din urmatoarele tipuri de
valori:
- procent - un numar exprimat in procente (cu %), care indica marimea textului in
raport cu dimensiunea elementului parinte
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:
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 }
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 }
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.
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)
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; }
- 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.
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; }
capitalize pentru ca primul caracter din fiecare cuvant sa fie scris cu majuscula;
selector { text-transform:valoare }
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.
selector { vertical-align:valoare }
Pentru definirea alinierii pe verticala a textului se foloseste una din urmatoarele optiuni:
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.
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
selector { white-space:valoare }
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'); }
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 }
selector { background-position:valoare }
selector { color:valoare }
numele culorii - una din cele 16 culori predefinite (red, green, blue, white, silver, ...)
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; }
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; }
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; }
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; }
Unde
- 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; }
Ultimele patru valori sunt reprezentate tridimensional, iar in cazul in care ele nu sunt
selector { border-color:valoare; }
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:
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; }
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; }
selector { display:valoare; }
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;
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.
selector { position:static }
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 }
- o valoare de tip numeric, care defineste distanta dintre laturile ferestrei sau a
elementului parinte si laturile elementului;
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>
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; }
CSS ofera posibilitatea de a afisa sau ascunde unele elemente sau parti ale unor elemente.
selector { visibility:valoare }
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;
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.
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:
selector { cursor:valoare; }
- 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
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
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>
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
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:
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; }
</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.
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.
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.).
}
#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;
}
+ 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;
}
<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>
- 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%;
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:
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:
Rezultat:
MarPlo.net
#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
Culoare Gradient
background-origin
background-clip
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 (%)):
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:
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-origin
Proprietatea background-origin specifica zona de pozitionare a imaginii in background. Poate
lua trei valori diferite:
Rezultat:
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:
<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 */
Rezultat:
background-clip cu padding-box
background-clip cu content-box
- 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 contine caracteristici noi care permit crearea de colturi rotunjite, umbre la chenare si
folosirea unei imagini pentru aspectul bordurii.
<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
<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 */
Rezultat:
<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
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;
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:
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;
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 */
/* pt. IE */
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 */
Rezultat:
/* pt. IE */
/* pt. IE */
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()
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);
#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:
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);
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);
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:
/* 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.
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>
Curs HTML
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
15.
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.
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
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.
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:
...
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
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>
Stea 6 varfuri
Stea 8 varfuri
Stea 12 varfuri
370.
Stea 5 varfuri
371.
Cod:
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:
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;'
612.
613.
Rezultat:
www.CoursesWeb.net Curs Ajax
614.
Buton 3D-Umbra
658.
659.
Rezultat:
www.CoursesWeb.net Curs CSS
660.
707.
708.
709.
710.
711.
712.
713.
714.
715.
716.
717.
Rezultat:
Curs HTML Curs CSS
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;
}
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
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 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>
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.
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
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:
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";
?>
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
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
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.
nvatati sa folositi ghilimele si caractere escape pentru a specifica valori de tip sir
speciale
- 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
1.2e3;
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\'';
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:
\\ - backslash
\$ - simbolul dolarului
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;
?>
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
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
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):
$_POST variabile furnizate scriptului prin metoda HTTP POST (in general prin
formulare)
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
$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
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;
3. Functii
In afara de operatori, PHP include functii care executa operatii utile. Iata unele exemple de
functii:
- 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
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:
Nume:
http://www.marplo.net/script.php?nume=Popescu
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).
- 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:
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']
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
Variabila de mediu
Descriere
CONTENT_LENGTH
CONTENT_TYPE
DOCUMENT_ROOT
GATEWAY_INTERFACE
HTTP_ACCEPT
HTTP_ACCEPT_CHARSET
HTTP_ACCEPT_ENCODING
HTTP_ACCEPT_LANGUAGE
HTTP_CONNECTION
HTTP_HOST
HTTP_REFERER
HTTP_USER_AGENT
PATH
QUERY_STRING
REMOTE_ADDR
REMOTE_HOST
REMOTE_PORT
REQUEST_METHOD
REQUEST_URI
SCRIPT_FILENAME
SCRIPT_NAME
SERVER_ADMIN
SERVER_HOST
SERVER_PORT
SERVER_PROTOCOL
SERVER_SIGNATURE
SERVER_SOFTWARE
Uneori, n locul datelor de iesire ale scriptului dumneavoastra, puteti vedea unul din
urmatoarele:
O caseta de dialog, prin care sunteti ntrebat daca doriti sa descarcati fisierul care
contine scriptul
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 punctuatie, cum ar fi paranteze, ghilimele sau punct si virgula, lipsa sau
inserate 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
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:
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.
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.
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:
echo defined("PI");
$x = 1;
$y = 2.5;
$z = $x+$y;
echo $z;
$x = 1;
echo $y
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.
$x = 1;
$y = 2.5;
$z = $x + (int)$y;
echo $z
<?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");
"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);
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)
// mysql link
// 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
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);
?>
// 'Sir test'
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
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.
- 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.
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
}
?>
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.
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;
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.
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
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.
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:
2 - folosind sintaxa array() despre care am vorbit in Lectia 2 despre tipul variabilelor.
Pentru a crea o matrice, atribuiti unui element al matricei o valoare si o cheie. De exemplu,
urmatoarea instructiunea de atribuire:
$clasa[1] = "geometrie";
$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];
$preferinte[Nelu] = "cirese";
$preferinte[Radu] = "mere";
$preferinte[Gabi] = "pere";
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:
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:
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
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;
// array numeric
//
- 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.
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:
?>
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:
?>
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:
?>
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:
?>
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:
?>
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("a"=>1, 3);
// 4
13. array_product(array)
// 24
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)
array(3, 4);
// 1
// 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:
?>
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:
?>
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:
?>
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
// $aray va deveni:
?>
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:
?>
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:
?>
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:
?>
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:
?>
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
?>
Sortarea matricelor
}
}
?>
- 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
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
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:
Functie
sort()
Operatia efectuata
- Sortarea unui tablou n functie de valoare, in ordine 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
21 => Python
20 => PHP
10 => Perl
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
- 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:
- 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 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
// 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
- 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
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.
rand()
Iata un exemplu in care functia rand() returneaza o valoare aleatoare cuprinsa intre 1 si 500,
atribuind valoarea unnei variabile "$nr" :
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'] {
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.
function nume_functie(nume_argument) {
Aici se insereaza corpul functiei
}
return 5*3
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.
1. abs(nr)
- Returneaza valoarea absoluta (cu +) a lui "nr".
<?php
echo abs(-7.8);
echo abs(3);
echo abs(-5);
?>
// 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);
?>
11. hexdec('hex')
- Returneaza valoarea zecimala a sirului hexazecimal "hex".
<?php
echo hexdec('ee');
echo hexdec('3fe');
?>
// 238
// 1022
// 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
<?php
echo log(9, 3);
?>
// 2
// 78
// 3
// 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
<?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
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
// 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');
?>
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 )
?>
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 globale
Variabile locale
Variabilele globale sunt create n exteriorul functiei, n timp ce variabilele locale sunt create
n interiorul unei functii.
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.
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".
- 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
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(); ).
?>
n Lectia 2 au fost prezentate sirurile, tipul de date PHP care stocheaza texte, n aceasta lectie
veti nvata mai multe despre utilizarea 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.
PHP poate converti n mod automat o valoare numerica ntr-un sir, respectiv valoarea
unui sir ntr-un numar.
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 - '
Descriere
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)
<?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
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);
?>
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
- 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, ' | ');
?>
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 © <b>html</b>.';
echo html_entity_decode($sir);
?>
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 " & <b>html</b>.
?>
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
// =- =- =- =- =- =- =- =-
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
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);
?>
23. stripslashes("sir")
- Returneaza "sir" fara caracterele backslashes adaugate. Inversul lui "addslashes()"
<?php
$sir = 'Exemplu cu \" stripslashes() \" \n';
echo stripslashes($sir);
?>
// 4
// marplo.net
// 12
- 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)
?>
30. strrev("sir")
- Inverseaza sir-ul.
<?php
$sir = 'Tutorial PHP, curs gratuit';
echo strrev($sir);
?>
31. strtolower("sir")
- Transforma toate literele din sir in litere mici.
<?php
$sir = 'Tutorial PHP, curs ONLINE gratuit';
echo strtolower($sir);
?>
32. strtoupper("sir")
- Transforma toate literele din sir in majuscule (litere mici).
<?php
$sir = 'Tutorial PHP, curs ONLINE gratuit';
echo strtoupper($sir);
?>
// 2;
// cursuri, scripturi
// 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);
?>
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
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);
Descriere
chop(s)
ltrim(s)
rtrim(s)
trim(s)
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)
strcmp(s1, s2)
strncmp(s1,s2, n)
Descriere
strchr(s1,s2)
stristr(s1,s2)
strpos(s1,s2)
strrchr(s1,s2)
strstr(s1,s2)
<?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.
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
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:
+ - 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)
(.*) - Reprezinta toate caracterele (prin .) repetate de cate ori e posibil (dat de *)
^The .* hack$ - Sirurile care incep cu "the " si se sfarsesc cu " hack"
^([a-zA-Z0-9]+[a-zA-Z0-9._%-]*@([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,4})$ - Expresie
regulata pentru adrese de e-mail
Descriere
ereg
split
sql_regcase
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
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:
De exemplu, urmatoarea instructiune creeaza o variabila cookie care expira la o secunda dupa
miezul noptii primei zile a anului 2009:
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.
Descriere
file_exists()
fileatime()
filectime()
filetype()
is_dir()
is_file()
is_readable()
is_writable()
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:
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--
"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
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.
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:
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:
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.
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.");
?>
fclose(identificator_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);
}
?>
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.
readfile("carte.txt");
<?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:
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.
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().
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):
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 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");
// Parcurge fisierul pana ajunge la sfarsit (atunci "feof" e TRUE - adica "!feof" e FALSE)
while(!feof) {
}
fclose($fo);
?>
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);
?>
- 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:
?>
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_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
flock(identificator_fisier, operatie)
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".
}
?>
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.
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.
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/");
?>
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 {
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.
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";
?>
<?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:
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".
unset($_SESSION);
unset($_SESSION['nume_variabila']);
Datele sesiunii sunt memorate in server in fisiere temporare. Pentru a sterge datele sesiunii
din server folositi:
session_destroy()
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);
set_magic_quotes_runtime(1);
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);
$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.
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:
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);
&
" (numait cnd este specificat opiunea ENT_COMPAT sau
ENT_QUOTES)
'(ghilimele simple)
<
>
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
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.
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)
FLOAT(m,d)
NUMERIC
NUMERIC (m, d)
- Similar cu DECIMAL
REAL
REAL(m, d)
- Similar cu DOUBLE
VARCHAR(m)
- 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.
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:
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.
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);
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:
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:
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":
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:
- 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:
SELECT - care permite accesul de citire la rndurile 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:
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
- 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
<
>
<=
=>
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)
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:
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.
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:
Pentru a modifica valoarea unui rnd sau mai multor rnduri existente ntr-un tabel, folositi o
comanda "UPDATE", care are urmatoarea forma:
- 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:
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(*)
count(coloana)
count(distinct coloana)
avg(coloana)
min(coloana)
max(coloana)
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
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)
atan(x)
atan2(y,x)
ceiling(x)
cos(x)
exp(x)
floor(x)
log (x)
mod(x,y)
power(x,y) - x la puterea y
rand(x)
sign(x)
- Valoarea -1, 0 sau 1, dupa cum valoarea lui x este negativa, zero
sau pozitiva
sin(x)
sqrt(x)
tan(x)
Functie
Descriere
ascii(s)
char(n)
left(s,n)
length(s)
locate(s1, s2)
ltrim(s)
right(s,n)
rpad(s1,n,s2)
rtrim(s)
space(n)
substring(s,m,n)
trim(s)
ucase(s)
Functie
Descriere
minute(t)
month(d)
now()
second(t)
week(d)
year(d)
Functie
database()
Descriere
- Returneaza numele bazei de date deschise
version()
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.
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.
id
name
password
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)
O tabela nu poate avea doua coloane cu acelasi nume si o baza de date nu poate avea
doua tabele cu acelasi nume.
Marime
Descriere
CHAR(lungime)
lungime
bytes
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
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
TINYINT(lungime)
1 byte
SMALLINT(lungime)
2 bytes
MEDIUMINT(lungime) 3 bytes
INT(lungime)
4 bytes
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
DOUBLE(lungime,
decimals)
8 bytes
DECIMAL(lungime,
decimals)
DATE
3 bytes
DATETIME
8 bytes
TIMESTAMP
4 bytes
TIME
3 bytes
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
TINYBLOB
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).
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.
// termina conectarea
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)
- 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.
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.
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";
- 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 dat