TEHNOLOGII WEB - Indrumar Laborator FINAL PDF
TEHNOLOGII WEB - Indrumar Laborator FINAL PDF
TEHNOLOGII WEB - Indrumar Laborator FINAL PDF
2012
TEHNOLOGII WEB
NDRUMAR DE LABORATOR
CUPRINS:
INTRODUCERE .............................................................................................................. 2
LUCRAREA NR. 1 : Limbajul HTML Introducere, structura unui document HTML,
formatarea textului ............................................................................................................ 3
LUCRAREA NR. 2 : Limbajul HTML Imagini, legturi, liste, tabele............................. 9
LUCRAREA NR. 3 : Limbajul HTML Cadre, formulare ............................................. 14
LUCRAREA NR. 4 : Limbajul CSS Introducere, tipuri de formatare CSS, formatri de
baz ................................................................................................................................ 22
LUCRAREA NR. 5 : Limbajul CSS Formatri avansate CSS ...................................... 32
LUCRAREA NR. 6 : Limbajul JAVASCRIPT Introducere, variabile, tipuri de date i
operatori ......................................................................................................................... 40
LUCRAREA NR. 7 : Limbajul JAVASCRIPT Instruciuni, funcii predefinite i funcii
definite de utilizator ........................................................................................................ 50
LUCRAREA NR. 8 : Limbajul JAVASCRIPT i modelul DOM Crearea paginilor
dinamice utiliznd limbajul JavaScript i DOM ............................................................... 66
LUCRAREA NR. 9 : Limbajul PHP Introducere, variabile, tipuri de date. Exemple
primare ........................................................................................................................... 72
LUCRAREA NR. 10 : Limbajul PHP Instruciuni, funcii predefinite i funcii definite
de utilizator, sesiuni PHP ................................................................................................ 83
LUCRAREA NR. 11 : Limbajul PHP Prelucrarea datelor dintr-un formular utiliznd
limbajul PHP ................................................................................................................ 101
LUCRAREA NR. 12 : Limbajul PHP Prelucrarea datelor dintr-o baz de date MYSQL
cu ajutorul limbajului PHP ............................................................................................ 109
LUCRAREA NR. 13 : Crearea de coninut dinamic animat utiliznd Adobe FLASH i
limbajul ActionScript .................................................................................................... 124
LUCRAREA NR. 14 : Tehnologii web avansate. Biblioteca JavaScript jQuery, CMS, web
framework-uri............................................................................................................... 131
BIBLIOGRAFIE .......................................................................................................... 135
-1-
INTRODUCERE
Odat cu dezvoltarea Internet-ului au aprut o serie de tehnologii
web din ce n ce mai avansate, pornind de la simplul limbaj HTML i
mergnd pn la o serie de limbaje de scripting (client sau server), dintre
care cele mai utilizate sunt JavaScript, PHP, ActionScript.
n acest ndrumar de laborator se vor prezenta mai multe tehnologii
web actuale, larg utilizate de ctre dezvoltatorii de website-uri i aplicaii
web, cu ajutorul crora studenii vor putea accesa piaa de munc pe acest
domeniu cu o cerere din ce n ce mai mare din partea marilor companii
software.
Lucrrile de laborator sunt prezentate ntr-o lumin modern i uor
accesibil pentru studeni, recomandarea fiind ca oricine acceseaz acest
ndrumar de laborator s testeze personal toate exemplele prezentate i s
efectueze teme originale pentru problemele propuse la Modul de lucru de la
finele fiecrei lucrri.
La finalul ndrumarului este prezentat i o scurt bibliografie, de
unde studenii pot accesa i alte resurse din domeniu, care s-i ndrume spre
o cunoatere tot mai mbuntit a tehnologiilor web, mai ales cu asaltul de
curnd al conceptului de cloud computing, prin care majoritatea aplicaiilor
de desktop sunt transferate ctre lumea web.
Avantajul major al acestei noi tehnologii const n accesarea
documentelor create din orice locaie de pe glob, deoarece tehnologia cloud
computing permite stocarea documentelor n marile centre de date ale unor
companii IT cu un renume mondial, precum Microsoft, IBM, Google,
Adobe etc.
-2-
I.
II.
Ce este HTML?
Structura unui document HTML.
Etichete HTML pentru generarea textelor.
Exemple primare.
Ce este HTML?
-3-
Element HTML
text normal
text normal
<b>text bold</b>
text bold
-4-
<i>text cursiv</i>
text cursiv
<u>text subliniat</u>
text subliniat
<del>text taiat</del>
text taiat
<sup>exponent</sup>
textexponent
<sub>indice</sub>
textindice
<cite>Citat</cite>
Citat
<em>evidentiat</em>
evidentiat
<strong>text ingrosat</strong>
text ingrosat
<big>mare</big>
mare
<small>mic</small>
mic
font rou
<font face=Courier>font
Courier</font>
font Courier
font size=6
<h1>Titlu 1</h1>
Titlu 1
<h2>Titlu 2</h2>
Titlu 2
<h3>Titlu 3</h3>
Titlu 3
<h4>Titlu 4</h4>
Titlu 4
-5-
<h5>Titlu 5</h5>
Titlu 5
<h6>Titlu 6</h6>
Titlu 6
III.
Modul de lucru
1.
-8-
Tematica lucrrii
I.
1.
2.
3.
4.
II.
Elementul de setare a unei imagini ntr-o pagin web este format din
eticheta <IMG>.
Exemplu de cod HTML pentru inserarea unei imagini:
sau
-9-
III.
Modul de lucru
1. Creai o pagin web n care s inserai urmtoarele elemente
HTML:
- 13 -
Tematica lucrrii
1. Lucrul cu cadre n paginile web
2. Generarea formularelor HTML
II.
Rezultatul afiat n navigatorul web este cel din figura 3.1 de mai jos.
- 14 -
- 15 -
- 17 -
Exemplu:
- 20 -
III.
Modul de lucru
1. S se creeze un document HTML care s conin 2 cadre (frameuri), unul la stnga cu o lime de 25% i unul la dreapta (75%).
2. S se creeze un alt document HTML care s conin:
un titlu, 2 paragrafe, o imagine i un tabel.
3. S se creeze o alt pagin web care s conin un formular HTML,
n care s fie prezente toate elementele de formular prezente n
lucrarea de laborator.
- 21 -
I.
II.
1. Ce reprezint CSS?
Sintaxa CSS
O regul CSS este alctuit din dou pri:
- 22 -
- 24 -
Rezultatul afiat n browser arat ca cel din figura 4.3 de mai jos:
- 25 -
Codul CSS
Cele 4 stri
Un link
Un link
Un link
Un link
- 27 -
Codul CSS
- 28 -
- 29 -
Rezultatul afiat n browser este cel din figura 4.5 de mai jos. Paragraful
este unul oarecare.
- 30 -
Modul de lucru
1.
- 31 -
Tematica lucrrii
1. Crearea unei bare de navigare (meniu orizontal) n HTML i
formatarea acesteia prin CSS
2. Crearea i formatarea structurii unei pagini tip homepage prin
CSS, fr a utiliza tabele sau cadre tip frameset
3. Imagini sprite
II.
Astzi aproape orice website conine cel puin o bar de navigare prin
paginile sale. Bara de navigare, denumit i meniu, poate fi structurat
orizontal sau vertical.
Un meniu este alctuit dintr-o list neordonat de elemente tip link-uri
(ancore), prin care se pot accesa toate paginile ce compun un website.
Spre exemplu, un meniu vertical neformatat prin CSS arat astfel:
Codul HTML
- 32 -
Afiare
Astfel, codul CSS care realizeaz formatarea noului meniu orizontal este
prezentat n continuare:
Iar drept rezultat avem meniul formatat orizontal prezentat n figura 5.1 de
mai jos:
- 33 -
Dei metoda secionrii unui site prin cadre a fost larg utilizat, iat cteva
dezavantaje ale utilizrii ei:
o indexarea slab a site-ului n majoritatea motoarelor de
cutare, deoarece se indexeaz doar un frame la un moment
dat;
o frame-urile nu sunt prietenoase URL, deoarece toate paginile
mprtesc acelai URL;
o lipsa de suport pentru cadre la unele navigatoare web i
eliminarea elementelor <FRAMESET> i <FRAME> din
standardul HTML5/CSS3.
- 34 -
Aceasta este cea mai des utilizat metod de structurare a unei scheme de
website, avnd multe avantaje n plus fa de metodele descrise anterior,
printre care flexibilitatea ridicat privind repoziionarea i redimensionarea
elementelor din site.
Secionarea se face conform unei structuri ierarhice ca cea din figura 5.2 de
mai jos, n care este prezentat un exemplu de structur.
CONTAINER
HEADER
MENU
CONTENT
FOOTER
Figura 5.2. Schema unui website
- 35 -
Iar codul CSS prin care se formateaz elementele paginii pentru afiarea
acesteia n mod mbuntit din punct de vedere structural este urmtorul:
- 36 -
Figura 5.3. Exemplu de pagin web structurat prin seciuni DIV formatate
cu reguli CSS
3. Imagini sprite
O imagine sprite este o colecie de imagini asamblate ntr-o singur
imagine. O pagin web cu multe imagini se poate ncrca n browser ntr-un
timp ndelungat i genereaz cereri multiple ctre server.
- 37 -
Afiare n browser
Codul CSS
Dup cum se poate observa din codul CSS, pentru a selecta imaginea din
partea de jos, s-a ales valoarea de -50px pentru poziia TOP a imaginii cu
- 38 -
III.
Modul de lucru
1. S se creeze o pagin web care s conin urmtoarele elemente
i formatri:
a. O schem a site-ului (layout) cu seciunile: header,
coloan stnga (lungime 20% din totalul paginii),
coloan mijloc (60%), coloan dreapta (20%), footer. S
se utilizeze doar seciuni DIV formatate cu CSS.
b. Un meniu vertical n coloana din stnga site-ului
asemntor celui din figura 5.3 n ceea ce privete
formatarea CSS.
c. 4 imagini una sub alta, provenite dintr-o singur imagine
ce le conine pe toate 4, n coloana din dreapta paginii
web. Extragerea fiecrei imagini se va realiza utiliznd
tehnica imaginilor sprite.
2. Pentru coloana din mijlocul paginii create la punctul 1 s se
insereze diverse elemente HTML i s se formateze aceste
elemente cu alte proprieti CSS neutilizate n lucrarea de
laborator. Utilizai ca surs de informare Internet-ul.
- 39 -
I.
1.
2.
3.
4.
Ce este JAVASCRIPT?
Variabile i tipuri de date n JavaScript
Operatori n JavaScript
Exemplu de program JavaScript
II.
1. Ce este JAVASCRIPT?
Afiarea n browser:
- 40 -
Tipuri de date
Principalele tipuri de date definite de JavaScript sunt:
STRING, ir de caractere;
NUMBER, numr;
BOOLEAN, bolean (valori adevrat sau fals);
ARRAY, vector de elemente de orice tip;
OBJECT, obiect cu proprieti de orice tip;
NULL, tipul de date nul;
UNDEFINED, tipul de date nedefinit.
Tipul de date
Exemple
STRING
NUMBER
BOOLEAN
ARRAY
OBJECT
NULL
UNDEFINED
- 42 -
Metode
numeObiect . numeProprietate
numeObiect . numeMetoda( )
Obiectul DOCUMENT
Este unul din cele mai importante obiecte utilizate n JavaScript.
- 43 -
Orice pagin web HTML ncrcat ntr-un navigator web devine un obiect
de tip document. Proprietile i metodele obiectului document sunt listate n
tabelul 6.2 i 6.3, respectiv, de mai jos.
Obiectul de tip document ofer accesul la toate elementele HTML coninute
n pagina web respectiv, utiliznd un script.
Tabelul 6.2. Proprietile obiectului DOCUMENT
Proprietatea
Descrierea
anchors
applets
body
cookie
domain
forms
images
links
referrer
title
URL
Descrierea
open()
close()
getElementsByName()
write()
writeln()
3. Operatori n JavaScript
n limbajul JavaScript, operatorii se mpart n urmtoarele categorii:
aritmetici, de atribuire, de comparaie, logici i condiionali.
operatori aritmetici:
Tabelul 6.3. Operatorii aritmitici n JavaScript.
Operator
Descriere
adunare
scdere
nmulire
mprire
++
incrementare
--
decrementare
Operator
Exemplu
Efect
x=y
+=
x+=y
x=x+y
-=
x-=y
x=x-y
*=
x*=y
x=x*y
/=
x/=y
x=x/y
%=
x%=y
x=x%y
Not
Operatorul + aplicat asupra irurilor de caractere (string) are funcia de
concatenare. Adunarea ntre un numr i un ir de caractere are ca rezultat
tot un ir de caractere.
operatori de comparaie:
Tabelul 6.5. Operatorii de comparaie n Javascript.
Operator
Descriere
==
egalitate
===
!=
inegalitate
!==
>
mai mare
<
mai mic
>=
<=
operatori logici:
Tabelul 6.6. Operatorii logici n JavaScript
- 46 -
Operator
Descriere
Example
&&
I logic
||
SAU logic
(x==5 || y==5)
NEGAIE logic
!(x==y)
- 47 -
III.
Modul de lucru
1. S se creeze o pagin HTML care s conin elementele urmtoare:
2 paragrafe, o imagine i un tabel de 3x3.
2. S se creeze un script JavaScript care s realizeze urmtoarele:
s interschimbe textele din cele dou paragrafe;
s poziioneze imaginea la dreapta paginii;
s seteze bordura tabelului cu grosimea de 1px, culoare verde
i fundalul celulelor de culoare portocalie;
s afieze ziua, data i ora curent.
3. Creai un script care s execute urmtoarele operaii aritmetice:
adunare, scdere, nmulire, mprire, modulo, incrementare
i decrementare;
- 48 -
- 49 -
I.
1. Instruciuni n JavaScript
2. Funcii predefinite ale limbajului JavaScript
3. Funcii definite de utilizator
II.
1. Instruciuni n JavaScript
Categoriile de instruciuni ale limbajului JavaScript sunt: condiionale, de
ciclare i de salt.
a) instruciuni condiionale:
Instruciunile condiionale JavaScript sunt:
- 50 -
b) instruciuni de ciclare:
Instruciunile de ciclare prezente n JavaScript sunt:
Exemplu:
- 52 -
Exemplu:
Afiare n browser:
Exemplu:
- 53 -
Exemplu:
Exemplu:
- 54 -
Exemplu:
Se vor afia toate valorile cu excepia pasului pentru care i=3, rezultnd:
Not:
Exemplu:
Din tot vectorul zile se vor afia numai primele trei, deoarece
instruciunea break lista va ntrerupe blocul reprezentat de eticheta lista ,
dup pasul n care i=2, rezultnd:
Comentarii n JavaScript
Comentariile pot fi adugate pentru a explica codul JavaScript, sau pentru al face mai lizibil. Comentariile se pot defini n dou moduri:
n acest caz, se vor ignora la execuie toate liniile de cod din interiorul
grupului de caractere /*, */. Exemplu:
Cel mai des, comentariile sunt utilizate pentru explicarea codului scris.
Exemplu:
obiectul Array
Afiare n browser:
- 57 -
obiectul Date
- 58 -
Afiare n browser:
obiectul Math
Afiare n browser:
obiectul Number
- 60 -
obiectul String
anchor, big, blink, bold, fixed, fontcolor, fontsize, italics, link, small,
strike, sub, sup
n exemplul urmtor aplicm prin cod JavaScript diverse formatri asupra
unui text:
- 61 -
obiectul RegExp
- 62 -
globale:
Window
Navigator
Screen
History
Location
- 64 -
III.
Modul de lucru
- 65 -
Tematica lucrrii
1. Modelul DOM (Document Object Model)
2. Formatarea elementelor HTML utiliznd limbajul JavaScript i
modelul DOM
II.
- 66 -
Avnd acest model obiect programabil, JavaScript are tot ce-i trebuie pentru
a crea pagini HTML dinamice:
Sintaxa:
Exemplu:
A doua afiare
Prima afiare
A doua afiare
A doua afiare
- 69 -
Spre exemplificare prezentm un script prin care se verific dac cookieurile navigatorului sunt activate sau nu, la ncrcarea paginii, prin tratarea
evenimentului onload:
- 70 -
III.
Modul de lucru
1. S se creeze un document HTML cu elementele: paragraf, imagine,
tabel, list.
2. S se modifice utiliznd limbajul JavaScript i modelul DOM
atributele elementelor din pagina creat la punctul 1.
3. S se creeze un script prin care, atunci cnd se gliseaz mouse-ul
deasupra unei celule din tabel, culoarea de fundal a acesteia s se
modifice automat.
4. S se creeze un script care s trateze ct mai multe evenimente
HTML.
- 71 -
Tematica lucrrii
1.
2.
3.
4.
II.
Ce este PHP?
Instalarea PHP
Variabile PHP
Operatori PHP
Fiiere PHP
- 72 -
2. Instalarea PHP
PHP este gratuit i se poate descrca de pe site-ul oficial de resurse PHP:
www.php.net .
Pentru instalarea extensiei PHP este necesar existena n prealabil a unui
server web (Apache, IIS etc.) instalat. De asemenea, pentru a putea accesa
baze de date, este obligatorie instalarea i a unui server de baze de date
(DBMS Database Management System, Sistem de gestiune a bazelor de
date) cum ar fi MySQL, MS SQL Server, PostgreSQL etc.
Pentru uurina utilizatorului care dorete s nvee ct mai repede limbajul
PHP, fr s se ncurce n detaliile instalrii pas cu pas a serverului web i a
extensiilor sale, s-au pus la dispoziia publicului pachete complete care
- 73 -
sau
- 75 -
Iar rezultatul parial al execuiei scriptului arat n browser astfel (fig. 9.2):
3. Variabile PHP
Variabilele reprezint containere de stocat informaii.
Reguli de scriere a variabilelor PHP:
local
global
static
parametru (argument)
- 77 -
4. Operatori PHP
Ca n majoritatea limbajelor de programare i PHP deine o gam
diversificat de operatori, n mare parte asemntori cu cei din limbajele
adiacente (C/C++, JAVA, JavaScript etc.).
Tabelul 9.1. Operatori aritmetici n PHP
Operator
Descriere
x+y
Adunare
x-y
Scdere
x*y
nmulire
x/y
mprire
x%y
Modulo
-x
Negaie
a.b
Concatenare string-uri
Efect
x=y
x=y
x += y
x=x+y
x -= y
x=x-y
x *= y
x=x*y
x /= y
x=x/y
x %= y
x=x%y
a .= b
a=a.b
Pre-incrementare
Description
Incrementeaz pe x cu 1, apoi
- 78 -
l returneaz
x ++
Post-incrementare
Returneaz pe x, apoi l
incrementeaz cu 1
-- x
Pre-decrementare
Decrementeaz pe x cu 1, apoi
l returneaz
x --
Post-decrementare
Returneaz pe x, apoi l
decrementeaz cu 1
Descriere
x == y
Egalitate
x === y
x != y
Inegalitate. x diferit de y
x <> y
Inegalitate. x diferit de y
x !== y
x>y
Mai mare
x<y
Mai mic
x >= y
x <= y
Descriere
I logic
x or y
SAU logic
x xor y
SAU exclusiv
x && y
I logic
- 79 -
x || y
!x
SAU logic
NOT (negaie)
logic
Name
x+y
Uniune (union)
x == y
Egalitate n perechi
cheie/valoare
x === y
Identitate n perechi
cheie/valoare i tip date
x != y
Inegalitate n perechi
cheie/valoare
x <> y
Inegalitate n perechi
cheie/valoare
x !== y
Inegalitate n perechi
cheie/valoare i tip date
- 80 -
III.
Modul de lucru
1. S se descarce i s se instaleze un pachet WAMP, la preferina
fiecruia.
2. S se creeze un folder myphp n care s inserai un fiier index.php
care s conin urmtoarele:
a. un header H2 cu textul Invatam PHP!, o linie orizontal,
un paragraf oarecare.
b. 3 variabile: a=Mihai, b=Soare, c=student.
c. Afiarea mesajului Mihai Soare este student la
Automatica.
- 81 -
- 82 -
I.
1.
2.
3.
4.
Instruciuni PHP
Funcii predefinite ale limbajului PHP
Funcii definite de utilizator n PHP
Sesiuni PHP
II.
1. Instruciuni PHP
a) INSTRUCIUNI CONDIIONALE
n limbajul PHP exist urmtoarele instruciuni condiionale:
Sintax:
Exemplu:
- 83 -
Exemplu:
Sintaxa:
- 84 -
Exemplu:
Sintaxa:
- 85 -
Exemplu:
b) INSTRUCIUNI DE CICLARE
Limbajul PHP conine urmtoarele instruciuni de ciclare:
Sintax:
- 86 -
Exemplu:
Sintaxa:
Exemplu:
- 87 -
Sintaxa:
Parametri:
-
Parametrii init i conditie pot s lipseasc din instruciune sau pot avea
expresii multiple, separate prin virgul.
Exemplu:
Sintaxa:
- 88 -
Exemplu:
Afiare
Cod PHP
funcii Array
funcii Calendar
funcii Date
funcii Directory
funcii Error
funcii Filesystem
funcii Filter
funcii FTP
funcii HTTP
funcii LibXML
funcii Mail
funcii Math
funcii Misc
funcii MySQLi
funcii SimpleXML
- 89 -
funcii String
funcii XML Parser
funcii Zip
Limbajul PHP este larg utilizat datorit competitudinii sale privind
dezvoltarea de aplicaii web pentru orice domeniu de cercetare i dezvoltare.
Pentru a mplini acest deziderat, dezvoltatorii limbajului au conceput un
numr foarte mare de funcii, care s rezolve problemele utilizatorilor i
dezvoltatorilor de aplicaii web.
Spre exemplu, numai n categoria Array exist 77 de funcii (sursa:
www.php.net ).
Deoarece nu pot fi aprofundate toate funciile limbajului, se vor prezenta
exemple pentru funcii larg utilizate n aplicaiile web.
Funcii ARRAY
Vom folosi pentru afiarea tablourilor (uni/multi-dimensionale) o funcie
print_r() puin modificat, pentru un aspect mbuntit al rezultatelor
afiate n fereastra navigatorului web. Funcia o vom numi print_r2() i are
definiia urmtoare:
De asemenea, pentru afiarea sub form de list a unui vector, vom defini o
funcie utilizator, denumit echo_r(), avnd forma:
- 90 -
Cod PHP
- 91 -
- 92 -
Cod PHP
Funcii DATE
- 93 -
Un alt exemplu n care aflm cte zile au trecut de la o anumit dat (de
exemplu, de la nceputul anului):
Funcii DIRECTORY
Aceste funcii permit preluarea de informaii privitoare la directoare i
coninutul acestora.
- 94 -
Cod PHP
Funcii FILESYSTEM
Aceste funcii permit gestionarea sistemului de fiiere. Se pot crea fiiere,
terge, deschide, actualiza, nchide etc.
n exemplul urmtor, deschidem un fisier existent i adugm un mesaj la
sfritul lui:
- 95 -
Funcii MATH
Funciile matematice pot prelucra att valori ntregi, ct i valori reale.
Pentru exemplificare prezentm un script care returneaz valorile funciilor
Sinus i Cosinus pentru unghiurile 0, 30, 45, 60 i 90:
- 96 -
Funcii STRING
Funciile STRING sunt unele din cele mai utilizate funcii PHP. Ele permit
prelucrarea irurilor de caractere (strings) n mai multe feluri.
Exemplu de funcie care caut un subir ntr-un ir dat, specificnd
delimitatoare de nceput i sfrit:
- 97 -
4. Sesiuni PHP
O sesiune reprezint o modalitate prin care PHP reine informaii de la o
pagin la alta.
Odat cu iniializarea unei sesiuni, utilizatorul poate pstra anumite
variabile, chiar dac n continuare viziteaz i alte pagini ale website-ului. n
principiu informaia se pstreaz pn la nchiderea browser-ului, sau pn
cnd utilizatorul distruge n mod intenionat sesiunea PHP curent.
Sesiunile PHP genereaz un id unic (UID) pentru fiecare vizitator i
memoreaz variabile pe baza acestui UID. ID-ul unic fie se salveaz ntr-un
cookie, fie se propag n adresa URL.
nainte de a memora viariabilele n sesiunea PHP, aceasta trebuie pornit,
proces realizat de funcia session_start(), care obligatoriu trebuie s fie
poziionat naintea etichetei <HTML>.
Un exemplu de script PHP care pstreaz ntr-o sesiune o variabil n care
se contorizeaz de cte ori este vizualizat pagina curent. Funcia isset()
este larg utilizat n PHP, folosindu-se la testarea dac o variabil este
setat. la afiare, variabila views poate avea o valoare diferit de cea de mai
jos, n funcie de cte ori s-a accesat pagina web.
Afiare
Cod PHP
III.
Modul de lucru
1. Creai un script PHP n care s nmulii dou matrici (3x3), utiliznd
tablou (array) 3-dimensional.
2. S se scrie un script PHP care s calculeze vrsta dvs. n luni,
sptmni, zile i ore.
3. S se creeze un script PHP care s calculeze primele 10 puteri ale lui
2 i s le converteasc n HEXA.
4. Creai un script PHP n care s folosii ct mai multe funcii
STRING (concatenare, split, explode, implode, join, substr etc...).
5. S se scrie un script n care s ordonai un ir dezordonat. Memorai
variabilele temporare ntr-o sesiune PHP.
6. Utilizai pentru toate scripturile ct mai multe funcii definite de
utilizator.
- 100 -
I.
1. Variabilele superglobals
2. Validarea formularelor cu scripturi PHP utiliznd variabilele vector
$_GET i $_POST
II.
1. Variabilele superglobals
Variabilele $_GET, $_POST i $_REQUEST utilizate la validarea
formularelor fac parte din setul de variabile predefinite ale limbajului PHP
denumite superglobals, deoarece sunt disponibile i accesibile n toate
domeniile de vizibilitate pe parcursul execuiei unui script.
Variabilele superglobals sunt:
- 101 -
Formularul HTML
- 102 -
a) Metoda GET
Utilizeaz variabila superglobal $_GET, care reprezint un vector
asociativ cu variabilele (datele) pasate ctre scriptul curent prin parametrii
adresei URL.
Variabila $_GET colecteaz datele dintr-un formular utiliznd expresia
method=get n cadrul etichetei <FORM>.
Sintax:
Informaiile transmise de la un formular prin metoda GET sunt vizibile
tuturor (vor fi afiate n bara de adrese URL a browser-ului web) i sunt
limitate ca volum de date ce pot fi trimise.
Prezentm exemplul anterior, dar de data aceasta datele sunt trimise prin
metoda GET.
Codul HTML al formularului este:
- 103 -
Scriptul PHP care proceseaz formularul de mai sus este prezentat mai jos,
n care numele cmpurilor din formular devin automat chei pentru vectorul
asociativ $_GET:
Formularul HTML
Deoarece prin metoda GET datele transmise sunt vizibile oricui, este de
preferat ca aceast metod s nu fie utilizat la transmiterea parolelor de
autentificare sau a altor date sensibile.
Totui, metoda GET este util la salvarea paginilor web ca semne de carte.
De asemenea metoda este limitat n sensul c nu se pot transmite valori
mari (peste 2000 de caractere) prin metoda GET.
b) Metoda POST
Utilizeaz vectorul asociativ $_POST, care colecteaz datele transmise
dintr-un formular prin metoda POST.
Sintaxa:
Datele trimise prin metoda POST nu sunt vizibile nimnui i nu au limite
referitor la volumul de informaii transmise.
- 104 -
Not
Referitor la volumul de date transmis, exist totui o limitare (implicit de
8MB) pentru metoda POST, valoare ce poate fi modificat prin setarea
parametrului post_max_size din fiierul php.ini, fiierul de configurare
PHP).
Exemplu, codul HTML:
Formularul HTML
- 105 -
c) Variabila $ _COOKIE
COOKIE-ul reprezint un mic fiier pe care un server l salveaz n
calculatorul utilizatorului. Este utilizat deseori pentru identificarea unui
utilizator. Ori de cte ori pagina web este apelat de pe acelai PC, sunt
trimise i cookie-urile. Acestea expir dup o perioad setat la crearea lor.
Prin script PHP se pot att crea ct i primi valori cookie.
Crearea cookie-urilor
Pentru a crea un cookie se folosete funcia setcookie() sau setrawcookie()
(fr codificare URL), care trebuie s apar nainte de eticheta <HTML>.
Sintaxa:
n exemplul urmtor crem un cookie denumit user, cruia i atribuim
valoarea Alex Vovu i un timp de expirare de o or:
folosim scriptul de mai jos pentru a obine valorile cookie i avem rezultatul
urmtor:
Rezultatul execuiei
Scriptul PHP
Distrugerea cookie-urilor
Pentru eliminarea unui cookie, se procedeaz la modificarea datei de
expirare a acestuia.
Spre exemplu, vom elimina cookie-ul user i vom obine:
Rezultatul execuiei
Scriptul PHP
- 107 -
III.
Modul de lucru
1. S se creeze o pagin web care s conin un formular de contact cu
urmtoarele cmpuri:
nume i prenume
adres e-mail
telefon
ntrebare
buton de validare
2. S se creeze urmtoarele scripturi PHP:
un script procesareGet.php care s prelucreze datele din
formular obinute prin metoda GET.
un script procesarePost.php prin care datele din formular
s fie procesate prin metoda POST.
un script procesareCookie.phpcare s prelucreze datele din
formular utiliznd cookie-uri.
- 108 -
Tematica lucrrii
1. Baze de date MySQL
2. Funcii PHP pentru baze de date MySQL
3. Operaii clasice cu nregistrrile dintr-o baz de date (adugare,
modificare, tergere) utiliznd scripturi PHP i formulare HTML.
Studiu de caz.
II.
- 110 -
Datele sunt preluate din baza de date baza_date creat n MySQL, din
tabelul cars, codul paginii principale (prezentare autoturisme) fiind
urmtorul:
- 113 -
- 114 -
Afiarea n navigatorul web este prezentat n fig. 12.4, ntr-o form foarte
simpl i usor de gestionat datele.
- 115 -
funcia mysql_query()
funcia mysql_fetch_assoc()
ii.
- 117 -
- 118 -
iii.
- 119 -
- 120 -
Sunt preluate datele direct din baza de date, din tabelul cars pentru
nregistrarea cu ID-ul corect transmis la apsarea butonului Edit. n
aceast pagin de modificare informaii autoturisme, la apsarea butonului
Modifica masina datele din formular vor fi transmise scriptului
save_cars2.php, prezentat n continuare i n urma crei execuii datele se
vor salva n baza de date MySQL.
De asemenea, la apsarea butonului Sterge masina se va apela acelai
script save_cars2.php, n care, printr-o interogare SQL de tergere
(DELETE), se va terge nregistrarea din baza de date.
- 121 -
Dac scripturile sunt scrise corect, la execuia oricrei operaii din cele
prezentate mai sus se vor semnala mesaje de succes i se vor realiza
modificri asupra bazei de date MySQL.
Limbajul PHP mai conine o gam foarte extins de funcii pentru lucrul cu
bazele de date MySQL, iar cei care doresc aprofundarea acestor aspecte sunt
ndemnai s consulte bibliografia de la finele ndrumarului de laborator.
- 122 -
III.
Modul de lucru
1. S se realizeze dezvoltarea aplicaiei de prezentare autoturisme
descris n aceast lucrare de laborator.
2. S se dezvolte o aplicaie asemntoare, avnd ca subiect orice
domeniu la alegere (legume, fructe, orae, magazine etc.)
- 123 -
I.
II.
- 124 -
Figura 13.1 prezint fereastra aplicaiei Adobe Flash CS3, n care se pot
evidenia unele din componentele programului (linia de timp, bara de
instrumente, fereastra de lucru, meniul principal).
Printre animaiile cel mai des ntlnite se afl i meniurile create n Flash,
datorit aspectului mult mbuntit al prezentrii acestuia.
Pentru crearea unui meniu orizontal n Flash, trebuie urmai paii urmtori:
a) Se creeaz tipul de buton pentru opiunile meniului i se genereaz
cte un astfel de buton pentru fiecare opiune, asociindu-se un text
drept nume al opiunii de meniu.
Un buton web poate avea urmtoarele stri:
UP buton neapsat
OVER cnd mouse-ul gliseaz deasupra butonului
DOWN buton apsat, dar neridicat
HIT specific zona n care butonul este activ
- 125 -
OVER
DOWN
- 127 -
- 128 -
Se pot observa diveri parametri Flash (dimensiune, calitate etc.) i, cel mai
important, parametrul movie i embed care conin animaia noastr (meniul
orizontal) meniu.swf. Orice animaie are extensia implicit .SWF.
La ncrcarea fiierului meniu.html n fereastra browser-ului web se va
ncrca automat i animaia, meniul orizontal, ca n figura 13.5. Se poate
observa c la glisarea mouse-ului deasupra unui buton, acesta i schimb
culoarea de fundal.
- 129 -
III.
Modul de lucru
1. S se creeze un meniu vertical, asemntor celui din lucrarea de
laborator, crendu-se alte efecte pentru strile butoanelor meniului
dect cele utilizate.
2. S se creeze urmtoarele obiecte:
a. un baner web, coninnd o imagine n fundal i un text titlu n
micare;
b. un logo rotitor, coninnd o imagine de dimensiuni reduse
(50x50 pixeli).
3. S se ncadreze toate aceste obiecte Flash ntr-o singur pagin web,
poziionndu-le n diverse locuri dup preferine.
- 130 -
I.
II.
a) jQuery
jQuery reprezint o librrie scris n limbajul JavaScript, de dimensiuni
foarte mici. Scopul acestei librrii este acela de a uura scrierea i utilizarea
codurilor JavaScript n paginile web.
jQuery preia majoritatea sarcinilor obinuite pentru care n JavaScript ar
trebui scrise multe linii de cod pentru a le ndeplini, i apoi le mpacheteaz
n metode (funcii) apelabile chiar i printr-o singur linie de cod.
De asemenea, jQuery simplific multe din lucrurile complicate obinute cu
JavaScript, cum ar fi apelurile AJAX (Asynchronous JavaScript and XML)
i manipularea obiectelor DOM.
Caracteristicile librriei jQuery sunt urmtoarele:
manipularea HTML/DOM
manipularea CSS
metode pentru evenimentele HTML
efecte i animaii
AJAX (Asynchronous JavaScript and XML)
diverse utilitare.
- 131 -
Cod jQuery
- 132 -
b) web CMS
Un web CMS (Content Management System pentru web, Sistem de gestiune
a coninutului web) reprezint o aplicaie web care permite publicarea,
editarea i modificarea de coninut, ct i mentenana unui website sau
aplicaie dintr-o interfa central.
Prezentm pe scurt cele mai larg utilizate CMS-uri web actuale i gratuite:
WordPress este cel mai popular CMS. Iniial a fost dezvoltat drept
un CMS pentru crearea i editarea blog-urilor, dar a fost adaptat
astfel nct a devenit un web CMS pe deplin dezvoltat. WordPress
are i suport pentru limba romn i se poate obine de la adresa:
http://wordpress.org/ sau http://ro.wordpress.org/
Drupal este al doilea cel mai popular CMS pentru web i a fost
dezvoltat naintea lui WordPress i Joomla. Este mult mai dificil de
nvat i neles dect celelalte dou CMS-uri, dar este cel mai
securizat. Spre exemplu, Drupal gestioneaz site-ul White House.
Drupal este disponibil la adresa: http://drupal.org/ .
- 133 -
III.
Modul de lucru
- 134 -
BIBLIOGRAFIE
[1]. David, M. - HTML5: designing rich Internet applications, Elsevier:
Focal Press, USA 2010.
[2]. Tudor Sorin, Vlad Hutanu - Crearea si programarea paginilor WEB,
ed. L&S SOFT, 2006.
[3]. Sabin Corneliu Buraga Tehnologii Web, Editura Matrix Rom,
Bucureti, 2001.
[4]. Internet: http://www.w3schools.com
[5]. Internet: http://www.php.net
[6]. Internet: http://www.javascriptkit.com
- 135 -