Sunteți pe pagina 1din 25

Lucrare de laborator Nr.

5
Tema: Utilizarea tehnologiilor HTML, XHTML, CSS, limbaje Client Side Script
(JavaScript), limbaje Server Side Script (PHP), aplicații RIA, tehnologia AJAX la
realizarea de aplicații Web multimedia

Scopul lucrării: familiarizarea cu limbajele HTML, XHTML, CSS.

Rețeaua de resurse globale de informare Web are la bază noțiunea de hipertext. Prin hipertext se
întelege un document care conține, pe lîngă text, grafică, imagini, animație, înregistrări audio
și legături (referințe) către alte documente. Ulterior acesta a fost extins la termenul de
hipermedia, acesta avînd un sens mai larg. Conotația este însă aceiași și anume semnifică
resurse care conțin legături la alte resurse media.

4.1. HTML

Limbajul HTML (HyperText Markup Language), a fost proiectat să poată opera cu


functionalitățile multimedia ale rețelei Web. El este un limbaj de marcare care permite
editarea sau transformarea oricărui text sub formă de hipertext prin introducerea unor
marcaje, care vor indica pe lîngă modul cum se efectuează legăturile documentului cu alte
resurse externe și modul cum vor apărea formatate paginile documentului. Un document
HTML poate fi făcut public prin instalarea lui pe un server Web. Marcajele introduse de
HTML poartă numele de tag-uri HTML.

Versiunile cele mai importante de HTML:

 HTML 1.0 (~1991) - draft CERN, 20 de taguri


 HTML 2.0 (~1995) - standard, 49 taguri
 HTML 3.2 (~1997) - standard, adoptă mare parte din tagurile propuse de Netscape, asigură
suport pentru tabele, a fost propusă extinderea prin MathML pentru a permite includerea de
formule matematice
 HTML 4.0 (~1998) - standard, primul conform International Standard ISO 8879, suport CSS,
obiecte multimedia, limbaj script extins, facilități pentru tipărirea paginilor etc.
 HTML 5.0 (~2008) - draft, include MathML si SVG în documente HTML, adaugă tag-uri
pentru dialog,video, audio, embed, progress, canvas etc.

Exemplu de document HTML:

<!doctype html>
<html>
<head>
<title>Exemplul1 HTML</title>
</head>
<body>
<p>Textul meu!</p>
</body>
</html>

Tipuri de taguri HTML:

1. Taguri pentru descrierea structurii:


 document: <html><head><title></title></head> <body></body></html>
 text: paragrafe (<p></p>), rînd nou (<br>), text preformatat (<pre></pre>), subscript
(<sub></sub), superscript (<sup></sup>), citate (<blockquote
cite="adresa_citat"></blockquote>)
 liste: neordonate (<ul> <li></li>... </ul>), ordonate (<ol> <li></li>... </ol>), listă definiții (<dl>
<dt></dt><dd></dd> ... </dl>)
 tabele: <table><caption></caption><tr> <th></th> ... </tr><tr> <td></td> ... </tr></table>
Exemplu:
<table border="1">
<caption>
<em>Iepuri de casa (merged cells)</em>
</caption>
<tbody>
<tr>
<th rowspan="2">
<th colspan="2">Media
<th rowspan="2">Blana<br>maro
<tr>
<th>lungime
<th>greutate
<tr>
<th>Masculi
<td>0.93
<td>4.5
<td>80%
<tr>
<th>Femele
<td>0.91
<td>4.2
<td>67%
</tr>
</tbody>
</table>
Iepuri de casa (merged cells)
Media Blana
m
lungime greutate ar
o
Masculi 0.93 4.5 80%
Femele 0.91 4.2 67%

 legături: <a href="adresa">text</a>, adresa poate fi un URL sau o ancoră "#numeAncora",


definită cu ajutorul tagului <a name = "numeAncora"></a>. Numele ancorelor nu este case-
sensitive.
 imagini: <img src="adresaImg" alt="text alternativ">
 appleturi: <applet code="numeFisier.class" width="dx" height="dy">Titlu applet.</applet> sau
<object codetype="application/java" classid="java:numeFisier.class" width="dx"
height="dy"> Titlu applet.</object>
2. Taguri pentru descrierea prezentării:
 style sheets:<tag class="numeClasaCSS" ...>, poate fi defint cu <style type="text/css">
tag.numeClasaCSS {atribute}</style>
 fonturi, culori, alinieri : <b>bold</b>,
<i>italic</i>, <b><i>bold italic</i></b>, <tt>teletype text</tt>, and
<big>big</big> and <small>small</small>, <font size="2" color="#ff0000"
face="Verdana">... </font>
 frame-uri:
<frameset cols="20%, 80%">
<frameset rows="100, 200">
<frame src="frame1.html">
<frame src="frame2.gif">
</frameset>
<frame src="frame3.html">
<noframes>
<p>Documentul contine:
<ul>
<li><a href="frame1.html"> pag1</a></li>
<li><img src="frame2.gif" alt="img2"></li>
<li><a href="frame3.html">pag3</a></li>
</ul>
</noframes>
</frameset>

3. Taguri pentru implementarea interactivității:


 formulare (HTML forms):
<form action="URL(php, asp ...)" method="post">
<p>
<label for="prenume">Prenume: </label>
<input type="text" id="prenume"><br>
<label for="nume">Nume: </label>
<input type="text" id="nume"><br>
<label for="email">email: </label>
<input type="text" id="email"><br>
<input type="radio" name="tip" value="barbat"> Barbat<br>
<input type="radio" name="tip" value="femeie"> Femeie<br>
<input type="submit" value="Trimite">
<input type="reset" value="Initializeaza">
</p>
</form>

scripturi: <script type="text/vbscript" src="URLVBScript"> sau <script type="text/javascript">


...program Javascript...
</script>

4.2. XHTML

XHTML = EXtensible HyperText Markup Language

Este o versiune strictă și "curată" de HTML 4.01. Este un standard W3C. Se bazează pe XML.
Nu acceptă marcaje incorecte. Tagurile sunt scrise cu litere mici și nu se acceptă lipsa marcajelor
de închidere. Nu se acceptă imbricarea incorectă a tagurilor (ex. <b><i>Acest text este bold-
italic</b></i>). Tagurile singulare trebuie de asemenea închise (ex. <br /> sau <img
src="img.gif" alt="My image" />).

Documentul trebuie să fie inclus într-o structură fixă (trebuie să existe un "root element")
<html>
<head> ... </head>
<body> ... </body>
</html>

Nu este permisă minimizarea atributelor (ex. <input disabled> se va scrie <input


disabled="disabled" />).

Sprijină specificarea limbajului în care sunt scrise datele (ex. <div lang="it" xml:lang="it">Ciao
bella!</div>).

Documentul trebuie să aibă precizat tipul prin specificarea unui DTD (Document Type
Definition). Există 3 DTD-uri specifice pentru XHTML și anume:
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Un document XHTML poate fi validat la adresa:


http://validator.w3.org/ .

4.3. CSS

Tehnologia CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui
document HTML. Ea a apărut în primul rînd din dorința de a putea formata unitar toate
paginile unei aplicații într-o manieră ușoară și flexibilă.

Menirea pricipală este aceea de a specifica cum vor fi afișate diversele entitati HTML. CSS a
apărut odata cu HTML 4.0. Stilurile CSS pot fi definite în pagina sau într-un fișier separat
(de obicei cu extensia .css). Exemplu de CSS utilizat în pagina:

<head>
...
<style type="text/css">
ol.roman { list-style-type: lower-roman }
</style>
</head>
<body>
<ol class="roman">
<li> Step one ...
<li> Step two ...
</ol>
...

Prin utilizarea unor fișiere .css se poate schimba foarte usor modul de afișare a informației în
aceiași pagină: exemplu CSS.

Din punct de vedere sintactic CSS este formată din trei părti: un selector, o proprietate și o
valoare: selector {property:value}. Pentru a crește lizibilitatea mai multe proprietăți pot fi
grupate pentru același element:

p
{
text-align:center;
color:black;
font-family:arial
}

De asemenea se permite și gruparea mai multor selectori pentru aceleași proprietăți:

h1,h2,h3,h4,h5,h6
{
color:green
}

Pentru a putea varia definiția pentru un selector a fost introdusă noțiunea de clasă. În felul acesta
două entități HTML de același tip pot fi formatate diferit dacă se va preciza o clasă diferită
pentru fiecare.

În fișierul css:
p.right {text-align:right}
p.center {text-align:center}
În fișierul html:
<p class="right">Acest paragraf va fi aliniat la dreapta.</p>
<p class="center">Acest paragraf va fi aliniat central.</p>
Dacă la definiția unei clase este omis selectorul atunci clasa se va putea aplica la orice
entitate html care suportă acea proprietate:

.center {text-align:center}
.green {color:green}
Dacă se dorește, unei entități html i se pot aplica simultan mai multe clase:
<p class="center green">Textul paragrafului.</p>

Există 3 moduri diferite de a adăuga elemente css la un document:

 Internal Style Sheet


Se definește cu ajutorul tagului <style> în interiorul secțiunii <head> din document.
 Inline Style
Se definește ca atribut în interiorul unui tag:
<p style="color:sienna;margin-left:20px">Text paragraf.</p>
Nu se recomandă utilizarea acestui stil pentru că se pierde din lizibilitate.
 Extenal Style Sheet
Se definește în fișiere externe paginii html și are avantajul că este aplicabil mai multor pagini
prin simpla incluziune a unelui fișierului prin intermediul unui tag <link>. Ex:
Fișierul stil1.css
hr {color:green}
p {text-align:center}
Fișierul p.html
<html><head>
<link rel="stylesheet" type="text/css" href="stil1.css" />
</head> ...
Dacă mai multe stiluri sunt definite pentru același element html ordinea priorităților este
următoarea:

1. Inline style
2. Internal style sheet
3. External style sheet
4. Browser default

Sarcina: realizarea unei aplicații web multimedia utilizînd noțiunile din HTML, XHTML,
CSS.

Tema: Limbaje Client Side Script

Aplicațiile de tip Client Side Script se referă în general la acele programe Web care rulează pe
client (browser), după sau în timpul încărcării paginii Web de cătrea acesta. Limbajele de
programare Client Side Script sunt acele limbaje care permit scrierea unor astfel de aplicații.
Aceste limbaje fie sunt integrate în limbajul HTML și suportate direct de către browser (ex.
JavaScript), fie necesită un plug-in extern (ex. ActionScript - Flash). În afară de utilizarea de
limbaje de tip script, pentru implementarea aplicațiilor Client Side se pot utiliza și limbaje de
programare (ex. Java prin Java Applet). Acest capitol se va concentra pe două limbaje foarte
răspîndite și anume JavaScript și ActionScript.

5.1. Limbajul JavaScript

Limbajul JavaScript (sau ECMAScript) este un limbaj de tip script suportat de browserele Web
care poate fi integrat direct într-o pagină HTML. Față de alte limbaje el are cîteva avantaje
importante, cum ar fi:

 nu necesită instalarea unor aplicații suplimentare pentru a rula.


 este simplu de învățat (sintaxa este asemănătoare cu cea a limbajelor C și Java)
 permite implementarea unor aplicații complexe într-o manieră simplă
 din el se poate accesa și controla direct toate elementele unei pagini HTML (text, imagini,
formulare, frame-uri etc)
 sprijină validarea datelor din formularele HTML
 permite programarea bazată pe evenimente
Cea mai importantă facilitate oferită de JavaScript este aceea de a adăuga dinamism și
interactivitate în paginile Web clasice. Un exemplu elocvent este oferit de Dave Tau în
pagina de prezentare a cărtii JavaScript 3nd Ed.:

 Exemplu de pagină animată folosind JavaScript

Elemente de limbaj JavaScript

Limbajul JavaScript este case sensitive. Declarațiile vor fi (opțional) despărțite de ";". La fel ca
și în limbajul C secvențele de cod pot forma instrucțiuni compuse dacă sunt plasate între
acolade. Pentru comentarii poate fi utilizată sintaxa Java pentru comentarii pe o singură linie
(//) sau pe mai multe linii (/*...*/). Pentru a include o secvență JavaScript într-o pagină
HTML se va folosi tagul (>>> Ex 4.1 <<<):

<script type = "text/javascript">


// cod JavaScript
</script>
Deși majoritatea browserelor acceptă și forma mai veche (<script language = "JavaScript">)
nu se recomandă folosirea acesteia.

Plasarea codului în pagină se poate face în funcție de momentul în care dorim ca acesta să
ruleze. În secțiunea <head> se vor scrie funcțiile apelabile la nevoie și cele declanșate de
evenimente. Codul scris în secțiunea <body> se va executa în timpul încărcării paginii în
browser. Pot exista oricîte secțiuni de cod JavaScript atît în <head> cît și în <body>. Pentru
secvențe lungi de cod sau pentru cod reutilizabil se poate folosi includerea unui fișier
JavaScript extern:
<script type="text/javascript" src="fisierCod.js">
</script>

Variabile: variabilele JavaScript sunt case sensitive. Varibilele nu au asociat un tip de date de la
declarare ci pot să-și schimbe tipul funcție de valoarea stocată. Numele poate începe cu o
literă sau cu caracterul "_". Pentru declararea unor variabile se va folosi construcția var.
Ex: var x=2, y;

Operatori:

Operator
Descriere Examplu Rezultat
matematic
+ adunare x=y+2 x=7
- scadere x=y-2 x=3
* multiplicare x=y*2 x=10
/ impartire x=y/2 x=2.5
% modul (rest) x=y%2 x=1
++ incrementare x=++y x=6
-- decrementare x=--y x=4

Oparatorii de asignare (=, +=, -=, *=, /=, %=).


Operatorul de concatenare șiruri (+). Dacă se concatenează un șir cu un număr rezultă un șir.

Operator
Descriere Examplu
logic
== egal ca valoare x==8 fals
=== egal si ca tip x===5 adevarat
x==="5" fals
!= diferit x!=8 adevarat
> mai mare x>8 fals
< mai mic x<8 adevarat
>= mai mare sau egal x>=8 fals
<= mai mic sau egal x<=8 adevarat

Operatorii logici (&&, ||, !).


Operatorul condițional (var=condition?val1:val2).

Instrucțiuni

1. Instrucțiunea if
if (conditie) {
cod executat pentru conditie adevarata
}
else {
cod executat pentru conditie falsa
}
(>>> Ex 4.2 <<<):
<script type="text/javascript">
var d = new Date();
var time = d.getHours();
if (time < 10) {
document.write("Buna Dimineata!");
}
else
{
document.write("Buna Ziua!");
}
</script>
2. Instrucțiunea switch
switch(n)
{
case 1:
cod executat daca n==1
break;
case 2:
cod executat daca n==2
break;
default:
cod executat daca n!=1 si n!=2
}
Ex:
<script type="text/javascript">
var d=new Date();
theDay=d.getDay();
switch (theDay)
{
case 0:
document.write("duminica");
break;
case 1:
document.write("luni");
...
case 6:
document.write("sambata");
default:
document.write("zi gresita!");
}
</script>
3. Instrucțiunea for
for (var=start;var<=end;var=var+pas)
{
cod de executat
}
Ex:
<script type="text/javascript">
var n=1,i;
document.write("<h2>n factorial </h2><br>");
for(i=1;i<=10;i++) {
n=n*i;
document.write(i"! = "+n+"<br>");
}
</script>
4. Instrucțiunea while/do while
while (var<=endval)
{
code de executat
}
do
{
code de executat
}
while (var<=endval);
Ex:
<script type="text/javascript">
var n=1, i=1;
document.write("<h2>numere impare </h2><br>");
while(i<=10) {
document.write(n,", ");
n+=2;
}
</script>
5. Instrucțiunea for in
for (variable in object)
{
code de executat
}

Ferestre de avertizare

1. Alert box
alert("mesaj");
2. Confirm box
confirm("mesaj");
3. Prompt box (>>> ex4_3 <<<)
prompt("mesaj","valoare implicita");

Funcții

Funcțiile sunt secvențe de cod care se execută fie prin apelarea explicită fie prin legarea de
un eveniment. De obicei funcțiile sunt plasate în secțiunea <head>.
Funcțiile au un nume, o listă de parametrii de apel și un bloc de cod. Dacă codul funcției
calculează o valoare atunci aceasta poate fi returnată prin aplelul return val;.

function numeFunctie(var1,var2,...,varN)
{
codul functiei
}

Evenimente

Evenimentele sunt acțiuni care sunt detectate de către browser și pot declanșa execuția unor
funcții.
Evenimentele captate de JavaScript: onLoad, onUnload, onFocus, onBlur, onChange,
onSubmit, onMouseOver, onMouseOut.
Ex:
function verificSuma() {
if(document.getElementById("suma").value<0) {
alert("Suma nu poate fi negativa!");
document.getElementById("suma").value=0;
}
}
...
<input type="text" size="30" id="suma" onchange="verificSuma()">

O listă cu evenimentele specifice entităților javascript se găsește laElated.

Mecanisme de tratare a erorilor

Pentru tratarea erorilor se pot folosi contrucțiile try..cartch pentru captarea lor, respectiv
throw pentru generarea lor.
Obiecte JavaScript

JavaScript este un limbaj orientat pe obiecte. Obiectele au proprietăți și metode. Pentru


crearea obiectelor se va folosi operatorul new. Proprietățile obiectului pot fi create dinamic
prin atribuirea unor valori:
p=new Object();
p.nume = "Ion";
p.varsta = 25;

5.2. Modelul DOM

(sursa: Wikymedia)

Exemplu de DOM:

Fiecare obiect definit de modelul DOM are o serie de proprietăți și metode prin care poate fi
controlat:

 window – proprietăți: screen.height, screen.width, metode: addEventListener(eventType,


listener, useCapture)/IE:attachEvent(eventType, function), resizeBy(dx, dy), resizeTo(x y),
scrollByLines(lines), sizeToContent()
 document - proprietăti: ownerDocument, title, URL, metode: createAttribute("attrname"),
createDocumentFragment(), createElement(tagName), createTextNode(text),
getElementById(id), getElementsByName(name), getElementsByTagName(tagname)
 dom element – proprietăți: attributes[], childNodes[], className, id, innerHTML, nodeType,
nodeValue, parentNode, style, metode: appendChild(node), blur(), focus(),
getAttribute(attrname), hasChildNodes(), removeAttribute(attrname), removeChild(child)
 dom table – proprietăți: bgColor, border, caption, cells[], width, metode: createCaption(),
InsertRow(index), moveRow(fromIndex, toIndex)

5.3. Action Script


ActionScript este un limbaj asemănător cu JavaScript, folosit în principal pentru dezvoltarea
de functionalități în cadrul animațiilor Adobe Flash prin generarea fișierelor cu extensia .swf
ce rulează în Adobe Flash Player. A fost dezvoltat inițial de compania Macromedia, iar acum
aparține Adobe, care a achiziționat Macromedia în 2005. Limbajul de programare are la bază
standardul ECMA. El a fost creat pentru desenarea și controlarea animațiilor vectoriale 2D
dar de-a lungul vremii s-a dezvoltat pentru a realiza aplicații WEB complexe sau chiar jocuri.
ActionScript este case-sensitive.(wikipedia). Versiunea actuală: Actionscript 3.0.


Tipuri de date: Boolean, Int, Uint, Object, Number, String, Null, Void.

Variabile:
var a:int = 10, b:int = 20;
var numArray:Array = ["zero", "one", "two"];

Constante predefinite: null, undefined, true, false.


Declararea constantelor: const MIN:int = 0;

Obiecte:
declarare: var someObj:Object;
instantiere: var myBirthday:Date = new Date();
var someArray:Array = new Array(1,2,3);
Clase dinamice:
dynamic class Persoana
{
private var adresa:String;
public var nume:String = "Ion";
function Persoana()
{
this.adresa="nu are";
}
}
var pers:Persoana = new Persoana();
pers.inaltime = 180;

Instrucțiuni condiționale: if..then..else, switch la fel ca și la JavaScript


Instrucțiuni ciclice:
- for
var i:int;
for (i=0; i<5; i++) { trace(i); }
- for..in
var myObj:Object = {x:20, y:30};
for (var i:String in myObj)
{
trace(i + ": " + myObj[i]);
}
// output: x: 20 y: 30
- for each..in
var myObj:Object = {x:20, y:30};
for each (var num in myObj)
{
trace(num);
}
// output: 20 30
- while
var i:int = 0;
while (i < 5)
{
trace(i);
i++;
}
- do while
var i:int = 5;
do
{
trace(i);
i++;
} while (i < 5);
// output: 5

Sarcina: realizarea unei aplicații web multimedia utilizînd noțiuni din limbajele JavaScript.

Întrebări de control:

1. Care sunt avantajele limbajului JavaScript?

2. Variabile JavaScript, operatori, instrucțiuni.


3. Tipuri de ferestre de avertizare.

4. Care este sintaxa de declarare a funcțiilor. Care sunt evenimentele captate de JavaScript?

5. Ce mecanisme JavaScript se utilizează pentru tratarea erorilor, captarea lor?

6. Ce operator se utilizează pentru crearea obiectelor?

7. Dați exemplu de model DOM.

8. Ce reprezintă Action Script, care este versiunea actuală?

9. Elemente utilizate în Action Script.

Tema: Limbaje Server Side Script

Scopul lucrării: familiarizarea cu limbajul PHP.

Tehnologiile Server Side Scripting permit crearea de aplicații Web complexe prin procesarea
datelor pe server și generarea unor pagini în mod dinamic. În felul acesta se pot interfața
aplicațiile Web cu servere de baze de date sau servere de poștă electronică. Limbajele
Server Side Script au posibilitatea de a accesa datele citite în formulare HTML și
implementează biblioteci de acces la resurse externe cum ar fi o bază de date. Spre
deosebire de tehnologii mai vechi care realizau același deziderat (Ex. CGI) server side
scripting asigură o viteză și o securiatate sporite. În general interpretoarele limbajelor SSS
sunt integrate sub formă de module chiar în serverul de Web. Exemple de limbaje SSS: ASP,
ColdFusion Markup Language, JSP, PHP, Perl, Phyton, Rubi etc.

6.1. Limbajul PHP

Limbajul PHP este un un limbaj de tip server side script creat special pentru Web. Liniile de cod
PHP trebuie incluse în interiorul unei pagini Web scrisă în HTML. Utilizînd PHP pot fi
construite ușor:

o mecanisme de autentificatre utilizatori


o sisteme de gestiune a conținutului
o sisteme de tip "web based e-mail"
o gestionare de liste de mesaje
o forumuri Web
o generarea automată de documente pdf

Serverul Web încarcă pagina din sistemul de fișiere propriu si, constatînd că este vorba de o
pagină PHP o trimite interpretorului PHP. Interpretorul PHP parcurge pagina și execută
instrucțiunile PHP întîlnite. Instrucțiunile PHP au ca și scop principal acela de a genera cod
HTML. De asemenea, codul HTML din fișierul original este copiat pur și simplu la ieșire.
Interpretorul PHP transmite înapoi către server fișierul transformat prin interpretarea codul
PHP. Acest fișier va conține doar cod HTML (eventual și Client Side Script etc.) dar nu și
cod PHP.
Față de aceste limbaje SSS, PHP are cîteva avantaje importante:

o performanță bună
o interfețe cu o mare varietate de sisteme de gestiune a bazelor de date
o biblioteci puternice care acoperă toate operațiile Web uzuale
o gratuit (http://www.php.net) /cost scazut (http://www.zend.com)
o ușor de învățat și utilizat
o portabil
o disponibil ca și cod sursă
Pentru includerea codului PHP într-o pagină HTML se preferă de obicei stilul XML:
<?php ... ?>
Tipuri de date PHP
Integer - utilizat pentru numere întregi
Double - utilizat pentru numere reale
String - utilizat pentru șiruri de caractere
Array - utilizat pentru a stoca serii de date
Object - utilizat pentru a reține obiecte
Pdfdoc, Pdfinfo - vezi secțiunea 5.2
Specific: numele variabilelor PHP sunt prefixate de semnul $ ( $var1 = "sirul 1"; ).
Ca și în C, identificatorii PHP sunt "case sensitive".
Pentru definirea constantelor se poate folosi instrucțiunea define (define("PI",3.14); $alfa =
2*PI;).
La PHP domeniul de vizibilitate pentru variabile poate fi:

o Global - varibilele globale, definite în afara funcțiilor sunt vizibile în tot fișierul curent, mai
puțin în interiorul funcțiilor.
o Local unei functii - variabilele create în funcții sunt vizibile doar în interiorul acestora.
o Global în interiorul unei funcții - acest tip de varibile sunt folosite pentru a accesa
variabilele globale cu același nume.

Accesarea datelor din formularele HTML

Accesarea varibilelor din formularele HTML se face prin intermediul tablourilor predefinite
$_POST si $_GET (dependent de metoda declarata de formular). Exemplul 5.1: citire din
formular.

Operatori PHP
Operatorii PHP sunt în general identici cu cei din limbajul C cu cîteva exceptii:
Operatorul de concatenare șiruri "." ($sir1." abc").
Substituția de variabile în șir "" ("$var" fata de '$var').
Operatorul de referire "&" ($b = &$a;).
Operatorul de testare a identitatii "===" ($a===123).
Operatorul de suprimare a erorilor "@" ($a = @($b / 0 );).
Operatorul de executie "`" (`dir c:\`).

Instrucțiuni PHP
Instrucțiunea if:
if (expr)
instructiuneAdevarat;
else
instructiuneFals;
Instrucțiunea elseif:
if (expr1)
instructiune1
elseif (expr2)
instructiune2
...
else
instructiuneN
Instrucțiunea switch:
switch (expr) {
case valoare_1:
instructiune_1;
break;
case valoare_2:
instructiune_2;
break;
...
case valoare_n:
instructiune_n;
break;
defaut:
instructiune_default;
}
Instrucțiunea while:
while (expr)
instructiune;
Instrucțiunea do-while:
do
instructiune
while (expr);
Instrucțiunea for:
for (expr1; expr2; expr3)
instructiune;
Instrucțiunea foreach:
$tablou = array (el0, el1, ... el_n);
foreach (tablou as val_el_crt)
instructiune;
$tablou = array( "cheie1" => el1, "cheie2" => el2, ... "cheie_n" => el_n);
foreach (tablou as cheie=>val_el_crt)
instructiune;
Exemplul 5.2: utilizare tablouri.
Instrucțiuni control repetiții: continue, break sireturn.

Funcții PHP
Funcțiile sunt utilizate pentru a grupa instrucțiunile care execută un anumit algoritm. Ele
permit refolosirea codului ori de cîte ori este nevoie.
O funcție este un modul de cod care oferă o interfață de apel, rezolvă un anumit algoritm și
opțional, returnează o valoare.
Declararea unei funcții se face în felul următor:
function nume_functie(lista_par) {
// secventa instructiuni
// (corpul functiei)
// daca este cazul: return exp;
}
Exemplu:
function afis_tablou( $t, $nume)
{
echo "Continut tablou $nume<BR>";
echo "<UL>";
foreach ( $t as $ind => $el )
echo "<LI> $ind - $el</LI>";
echo "</UL>";
}
// apel functie
$tPers = array( "Ionescu" => 1962, "Popescu" => 1967, "Vasilescu" => 1978);
afis_tablou("anul nasterii", $tPers);
Se pot declara si functii cu parametrii de apel optionali:
function afiseaza_titlu( $titlu, $marime = "H1", $culoare = "#000000")
{
echo "<$marime> <FONT color=\" $culoare\">".$titlu."</FONT></$marime><P>";
}
Implicit parametrii sunt transmiși prin valoare. Dacă se dorește transmiterea prin adresă se va
utiliza referințe:
function schimba( &$a, &$b )
{
echo "Apel schimba(a=$a, b=$b)";
$c = $b;
$b = $a;
$a = $c;
}
Limbajul PHP suportă și funcții recursive:
function afis_inversat($sir)
{
if (strlen($sir)>0)
afis_inversat(substr($sir,1));
echo substr($sir, 0, 1);
}

Reutilizarea codului
Pentru a crește eficiența dezvoltării aplicațiilor se preferă reutilizarea codului gata scris.
O primă modalitate o reprezintă crearea și utilizarea de biblioteci de funcții.
Aceste bibilioteci sunt scrise în fișiere externe care pot fi incluse in aplicatia curenta prin
instructiunile include sau require. Spre deosebire de include, instructiunea require este
inlocuita cu fisierul referit la incarcarea paginii, indiferent daca executia codului va ajunge
sau nu la aceasta instructiune.
O a doua modalitate este reprezentata de posibilitatea crearii ierarhiilor de clase (incepand cu
PHP 5.0). Pentru mai multe informatii accesatiPHP: Classes and Objects.

Controlul Sesiunilor
Protocolul HTTP este un protocol lipsit de informatii de stare. Acest lucru se traduce prin
faptul ca acest protocol nu are nici un mecanism propriu prin care sa trasmita datele intre
doua tranzactii (pagini). La cererea succesiva a doua pagini de catre un utilizator catre un
server de Web, nu exista nici o posibilitate de a transmite spre cea de a doua pagina faptul ca
este vorba de catre acelasi utilizator. Ideea de la care pleaca controlul sesiunilor este tocmai
acela de a permite urmarirea actiunilor unui utilizator pe parcursul unei sesiuni de accese
catre respectivul server de Web.
Sesiunile PHP sunt gestionate prin intermediul unui numar unic (session ID) generat aleator
pe baza unui algoritm criptografic. Acest numar este generat de catre PHP si mentinut de
catre clientul de Web care a acceseaza pagini pe tot parcursul sesiunii de lucru.
Pasii care se fac la utilizarea unei sesiuni sunt urmatorii:

o crearea unei sesiuni (session_start();)


o inregistrarea variabilelor sesiune (session_register( "var");)
o utilizarea variabilelor sesiune pentru controlul accesului sau personalizarea paginii
($_SESSION["var"];)
o stergerea variabilelor sesiune si distrugerea sesiunii (session_destroy();).

O alternativa la utilizarea sesiunilor o reprezinta tehnologia coockies, caz in care datele


specifice utilizatorului sunt pastrate pe calculatorul acestuia (in fisiere cookies gestionate de
browser).

6.2. GD

Biblioteca GD este folosite pentru crearea dinamica a imaginilor (GIF, JPG, PNG). Este
disponibila pe mai multe platforme (http://www.libgd.org/) dar in continuare ne vom referi la
implementarea PHP.
Pentru instalarea bibliotecii modulul PHP trebuie compilat cu optiunea --with-gd. La
versiunea de Windows se poate folosi biblioteca php_gd2.dll (se va modifica corespunzator
php.ini). In php.ini trebuie facuta si modificarea:
gd.jpeg_ignore_warning PHP_INI_ALL
Includerea unei imagini GD in pagina se va face prin:
<img src="img.php" alt="Imagine prin PHP GD ">
Pentru a crea imaginea fisierul img.php va contine:
<?php
header ("Content-type: image/jpeg");
$img = ImageCreate (250,150);
$fond = ImageColorAllocate ($img, 0, 0, 240);
$col = ImageColorAllocate ($img, 255, 255, 255);
ImageEllipse($img, 125, 75, 220, 100, $col);
ImageJPEG ($img, '', 100);
?>
Acest exemplu va crea o elipsa pe un fundal albastru.

Functii GD
> array gd_info(void);
array(9) {
["GD Version"]=>
string(24) "bundled (2.0 compatible)"
["FreeType Support"]=> bool(false)
["T1Lib Support"]=> bool(false)
["GIF Read Support"]=> bool(true)
["GIF Create Support"]=> bool(false)
["JPEG Support"]=> bool(false)
["PNG Support"]=> bool(true)
["WBMP Support"]=> bool(true)
["XBM Support"]=> bool(false)
}
> list($width,$height,$type,$attr) = getimagesize("img/flag.jpg");
> int imagecolorallocate($image, $red, $green, $blue);
Obs: primul apel va modifica culoarea de background.
> int imagecolorat($image, $x, $y);
Obs: Returneaza indexul culorii din punctul (x,y).
void imagecolorset($image, $index, $red, $green, $blue);
Obs: seteaza culoarea pentru indexul respectiv.
> array imagecolorsforindex($image, $index);
Obs: obtine culoarea (RGBA) de la indexul specificat.
> bool imagecopy($dst_im, $src_im, $dst_x, $dst_y, $src_x, $src_y, $src_w, $src_h);
> bool imagecopyresampled($dst_image, $src_image, $dst_x, $dst_y, $src_x, $src_y,
$dst_w, $dst_h, $src_w, $src_h);
> resource imagecreate($width, $height);
> resource imagecreatefromjpeg($filename);
Obs: creaza o imagine pornind de la fisierul specificat.
> bool imageellipse($image, $cx, $cy, $width, $height, $color);
> bool imagefill($image, $x, $y, $color)
> bool imagejpeg( $image [, $filename [,$quality]]);
Obs: Insereaza imaginea in pagina HTML.
> bool imageline($image, $x1, $y1, $x2, $y2, $color);
> bool imagerectangle($image, $x1, $y1, $x2, $y2, $color);
> bool imagesetpixel($image, $x, $y, $color);
> bool imagestring($image, $font, $x, $y, $string, $color);
> int imagesx($image);
> int imagesy($image);

6.3. PDFLib

Biblioteca PDFLib ajuta la crearea dinamica (din PHP) a documentelor PDF.


Crearea unui document PDF se face folosind fucntia PDF_new(); Un exemplu de utilizare se
gaseste pe http://www.php.net/.

Functii PDFLib

> int PDF_add_textflow(resource $pdfdoc, int $textflow, string $text, string $optlist);
> bool PDF_begin_page_ext(resource $pdfdoc, float $width, float $height, string $optlist);
Obs: Dimensiuni standard: A4 595 x 842, A3 842 x 1190.
> bool PDF_circle(resource $pdfdoc , float $x , float $y , float $r);
> bool PDF_continue_text(resource $p, string $text);
> bool PDF_end_document(resource $pdfdoc, string $optlist);
> bool PDF_end_page(resource $p);
> bool PDF_fit_image(resource $pdfdoc, int $image, float $x, float $y, string $optlist);
> bool PDF_lineto(resource $p, float $x, float $y);
> int PDF_load_font(resource $pdfdoc, string $fontname, string $encoding, string $optlist);
> int PDF_load_image(resource $pdfdoc, string $imagetype, string $filename, string
$optlist);
> bool PDF_moveto(resource $p, float $x, float $y);
> resource PDF_new(void);
> bool PDF_save(resource $p);
> bool PDF_setcolor(resource $p, string $fstype, string $colorspace, float $c1, float $c2, float
$c3, float $c4);
> bool PDF_show(resource $pdfdoc, string $text);
> bool PDF_show_xy(resource $p, string $text, float $x, float $y);

Exemplu:
$pdf = pdf_new();
if (!pdf_open_file($pdf, ""))
die("Error: Fail to open output file.");
pdf_set_info($pdf, "Author", $nume." <". $email.">");
pdf_set_info($pdf, "Title", "CV -".$nume);
pdf_set_info($pdf, "Subject", "The CV of ".$nume.".");
define("PAGE_HEIGHT", 842); /* A4 */
define("PAGE_WIDTH", 595);
define("VERT_SPACING", 14);
pdf_begin_page($pdf, PAGE_WIDTH, PAGE_HEIGHT);
// Print name
$font = pdf_findfont($pdf, "Times-Bold", "winansi", 0);
pdf_setfont($pdf, $font, 14.0);
$stringwidth = pdf_stringwidth($pdf, $nume, $font, 14.0);
$xpos = (PAGE_WIDTH / 2) - ($stringwidth / 2);
pdf_show_xy($pdf, $nume, $xpos, 700);
$xpos = pdf_get_value($pdf, "textx", 0);
$ypos = pdf_get_value($pdf, "texty", 0) - VERT_SPACING;
// Print personal information.
$font = pdf_findfont($pdf, "Times-Roman", "winansi", 0);
pdf_setfont($pdf, $font, 12.0);
$headerdata = array($adresa, $oras, $tara, $codPostal, $tel, $email);
pdf_end_page($pdf);
pdf_close($pdf);
$buf = pdf_get_buffer($pdf);
$len = strlen($buf);
header("Content-type: application/pdf");
header("Content-Length: $len");
header("Content-Disposition: inline; filename=resume.pdf");
print $buf;

Tehnologiile RIA permit crearea de aplicatii Web complexe. Scopul este acela de a estompa
diferentele referitoare la interfete si timp de raspuns fata de aplicatiile desktop clasice.

7.1. Ajax

Tehnologia AJAX (Asynchronous JavaScript and XML) nu propune un limbaj nou ci un model
nou de abordare a implementarii aplicatiilor Web. Intr-adevar, nu se propune nici un limbaj
nou ci o modalitate noua de a combina tehnologiile existente.
Idea de baza pe care se sprijina Ajax este acea de a utiliza obiecte JavaScript de tip
XMLHttpRequest pentru a face apeluri asincrone catre serverul de Web. In acest fel se va
evita reincarcarea paginii Web ori de cate ori sunt necesare date de la server.
Aplicatiile Web care folosesc Ajax devin astfel mai mici, mai rapide si mai prietenoase.
Tehnologia Ajax este un standard actual, majoritatea navigatoarelor suportand
XMLHttpRequest (Internet Explorer, Firefox, Chrome, Opera, Safari). In continuare se va
prezenta o scurta functie care detecteaza tipul de browser si instantiaza obiectul XMLHttp in
mod corespunzator:
function ajaxFunction()
{
var xmlhttp;
if (window.XMLHttpRequest) {
// for IE7+, Firefox, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// for IE6, IE5
xmlhttp=new ActiveXObject
("Microsoft.XMLHTTP");
}
else
{
alert("Your browser does not
support XMLHTTP!");
}
}

Proprietatile obiectului XMLHttpRequest sunt:


- onreadystatechange Permite implemenatrea unei functii care sa prelucreaze datele primite
de la server. Aceasta functie va fi apelata automat de catre browser in momentul cand apar
evenimente asociate unei cereri XMLHttp. Pentru crearea acestei functii poate fi utilizat
codul:
xmlhttp.onreadystatechange=function()
{
// prelucrarea datelor de la server
}
- readyState Aceasta proprietate pastreaza codul starii in care se afla raspunsul la ultima
cerere efectuata. Valorile posibile sunt:
0 Cererea nu a fost initializata
1 Cererea este pregatita
2 Cererea a fost trimisa
3 Cererea este in procesare
4 Cererea este completa
La fiecare modificare a valorii variabilei readyState browserul va executa automat functia
asociata proprietatii onreadystatechange. Aceasta va testa incheierea cererii si apoi va
prelucra datele primite:
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
// Prelucreaza datele primite
}
}
- responseText/responseXML Permite accesarea datelor din raspunsul serverului. Acestea
sunt de obicei impachetate in format text sau XML.
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.myForm.afisaj.value =
xmlhttp.responseText;
}
}
Pentru a trimite cererea catre server, programul va apela functiile open() si send() ale
obiectului XMLHttpRequest. Functia open() primeste trei parametrii. Primul specifica
metoda de transmitere a datelor (GET sau POST), cel de al doilea specfica care pagina de pe
server (PHP, ASP etc.) va prelucra cererea, iar ultimul parametru trebuie sa fie true pentru
apeluri asincrone. In cazul functiei send, parametrul va fi null in cazul apelurilor GET la
pagini din acelasi director de pe server.
Pentru a modifica o portiune a paginii curente, aceasta portiune poate fi inclusa intr-un
tag<div>. Exemplu:
// fisierul ajax1.html
<html>
<head>
<title>Exemplu Ajax </title>
<script type="text/javascript">
function ajax()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox ...
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject
("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4) {
document.getElementById
('panou').innerHTML=
xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajaxRepl.php",
true);
xmlhttp.send(null);
}
</script>
</head>
<body>
<div id='panou'>
<h2>Text HTML</h2><br>
Textul este continut in fisierul HTML.
</div>

<form name="f1">
<input type="button" name="Schimba" value="Schimba" onClick="ajax();">
</form>
</body>
</html>

// fisierul ajaxRepl.php
<?php
echo '<h2>Text PHP</h2><br>Text
generat din PHP';
?>

Pentru mai multe informatii consultati tutoriale Ajax la w3Schools, ajaxtutorials si tizag.

Pentru a crea aplicatii complexe se poate apela si la biblioteci ajax cum ar fi Google
code, jQuerysau Dojo.

7.2. Adobe Flex

Adobe Flex a fost creat de Adobe Systems si este destinat crearii de aplicatii interactive RIA. El
imbina formatul MXML (Macromedia XML) cu limbajul de tip script Actionscript.
Rezultatul final este un fisier Flash (SWF) care cuprinde elemente de interfata interactive.
Framework-ul Flash este oferit de Adobe in regim open source. Pentru dezvoltarea eficienta
a aplicatiilor se poate utiliza Adobe Flex Builder, oferit in regim comercial.
Pentru utilizare in domeniul educatiei firma Adobe ofera licente gratuite de Adobe Flex
Builder Professional.
Avantajul tehnologiei Flex consta si in posibilitatea de a rula aplicatiile atat intr-un navigator
Web cat si ca aplicatii desktop (prin intermediul Adobe AIR).
Un exemplu de utilizare a tehnologiei Flex poate fi vizualizata la urmatoarea adresa Web -
Design-Contact-Form-Flex.

7. 3. SVG

SVG (Scalable Vector Graphics) este un limbaj de tip XML care permite definirea imaginilor
vectoriale pentru Web. Avantajul unui format vectorial in fata unui format bitmap (gif, jpg,
png) consta in posibilitatea de a o apropria/departa sau redimensiona fara a pierde calitatea.
De asemenea formatul SVG permite animarea oricarui atribut utilizat la definirea imaginii. In
plus fisierul care descrie o imagine este mai mic decat fisierul echivalent bitmap, este editabil
si cu editoare de text obisnuite si poate fi tiparit la orice rezolutie de imprimare cu
rezultate asemanatoare.
O serie de companii precum Sun Microsystems, Adobe, Apple, IBM si
Kodak au fost implicate activ in dezvoltarea acestui standard.
Acest standard W3C este suportat la ora actuala de multe navigatoare. In plus se poate utiliza
un plug-in de la Adobe (Adobe SVG Viewer) pentru navigatoarele care nu suporta direct
standardul (ex. Internet Explorer).
Exemplu de imagine SVG:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/
Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns= "http://


www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40"


stroke="black" stroke-width="2"
fill="red"/>

</svg>

In plus se poate iclude o imagine SVG intr-un fisier HTML cu ajutorul tagului iframe:
<iframe src="rect.svg" width="300" height="100">
</iframe>

Principalele taguri definite de SVG pentru forme grafice sunt:

o Rectangle <rect>
o Circle <circle>
o Ellipse <ellipse>
o Line <line>
o Polyline <polyline>
o Polygon <polygon>
o Path <path>

In plus exista o serie de taguri pentru a defini diverse efecte:

o feBlend
o feColorMatrix
o feComponentTransfer
o feComposite
o feConvolveMatrix
o feDiffuseLighting
o feDisplacementMap
o feFlood
o feGaussianBlur
o feImage
o feMerge
o feMorphology
o feOffset
o feSpecularLighting
o feTile
o feTurbulence
o feDistantLight
o fePointLight
o feSpotLight
o
Sarcina: realizarea unei aplicații web multimedia utilizînd limbajul PHP.

Întrebări de control:

1. Descifrarea limbajului SSS. Exemple de limbaje SSS.


2. Care sunt avantajele limbajului PHP față de alte limbaje Server Side Scripting?

3. Care este sintaxa de a include cod PHP într-o pagină HTML?

4. Ce tipuri de date sunt specifice limbajului PHP?

5. Numiți cîteva excepții ale operatorilor PHP față de operatorii altor limbaje.

6. Tipuri de instrucțiuni.

7. Sintaxa de declarare a funcțiilor PHP.

8. La ce este recomandat reutilizarea codului?

9. Cum are loc controlul sesiunilor PHP?

10. Care este destinația bibliotecilor GD, PDFlib?

Sarcina: realizarea unei aplicații web multimedia utilizînd noțiunile limbajelor Adobe Flex și
SVG.

Întrebări de control:

1. Ce reprezintă tehnologia AJAX, descifrare?

2. Care sunt proprietățile obiectului XMLHttpRequest?

3. Exemple de funcții ale obiectului XMLHttpRequest.

4. Care este destinația limbajului Adobe Flex? Numiți avantajul tehnologiei Flex.

5. Descifrarea limbajului SVG. Care este destinația și avantajul?

6. Care este modalitatea de includere a unei imagini SVG într-un fișier HTML?

7. Numiți tagurile definite de SVG pentru forme grafice, diverse efecte.

S-ar putea să vă placă și