UNIVERSITATEA HYPERION DIN BUCUREŞTI FACULTATEA DE …

UNIVERSITATEA HYPERION DIN BUCUREŞTI

FACULTATEA DE ŞTIINŢE EXACTE ŞI INGINEREŞTI

Dr.ing. Eugen CORNEL

2012

- 1 -

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, legături, liste, tabele............................. 9

LUCRAREA NR. 3 : Limbajul HTML – Cadre, formulare ............................................. 14

LUCRAREA NR. 4 : Limbajul CSS – Introducere, tipuri de formatare CSS, formatări de

bază ................................................................................................................................ 22

LUCRAREA NR. 5 : Limbajul CSS – Formatări avansate CSS ...................................... 32

LUCRAREA NR. 6 : Limbajul JAVASCRIPT – Introducere, variabile, tipuri de date şi

operatori ......................................................................................................................... 40

LUCRAREA NR. 7 : Limbajul JAVASCRIPT – Instrucţiuni, funcţii predefinite şi funcţii

definite de utilizator ........................................................................................................ 50

LUCRAREA NR. 8 : Limbajul JAVASCRIPT şi modelul DOM – Crearea paginilor

dinamice utilizând limbajul JavaScript şi DOM ............................................................... 66

LUCRAREA NR. 9 : Limbajul PHP – Introducere, variabile, tipuri de date. Exemple

primare ........................................................................................................................... 72

LUCRAREA NR. 10 : Limbajul PHP – Instrucţiuni, funcţii predefinite şi funcţii definite

de utilizator, sesiuni PHP ................................................................................................ 83

LUCRAREA NR. 11 : Limbajul PHP – Prelucrarea datelor dintr-un formular utilizând

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 conţinut dinamic animat utilizând Adobe FLASH şi

limbajul ActionScript .................................................................................................... 124

LUCRAREA NR. 14 : Tehnologii web avansate. Biblioteca JavaScript jQuery, CMS, web

framework-uri............................................................................................................... 131

BIBLIOGRAFIE .......................................................................................................... 135

- 2 -

INTRODUCERE

Odată cu dezvoltarea Internet-ului au apărut o serie de tehnologii

web din ce în ce mai avansate, pornind de la simplul limbaj HTML şi

mergând până 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 către dezvoltatorii de website-uri şi aplicaţii

web, cu ajutorul cărora studenţii vor putea accesa piaţa de muncă pe acest

domeniu cu o cerere din ce în ce mai mare din partea marilor companii

software.

Lucrările de laborator sunt prezentate într-o lumină modernă şi uşor

accesibilă pentru studenţi, 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 fiecărei lucrări.

La finalul îndrumarului este prezentată şi o scurtă bibliografie, de

unde studenţii pot accesa şi alte resurse din domeniu, care să-i îndrume spre

o cunoaştere tot mai îmbunătăţită a tehnologiilor web, mai ales cu asaltul de

curând al conceptului de cloud computing, prin care majoritatea aplicaţiilor

de desktop sunt transferate către lumea web.

Avantajul major al acestei noi tehnologii constă în accesarea

documentelor create din orice locaţie 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.

- 3 -

TEHNOLOGÎÎ WEB - Î ndrumar de laborator

LUCRAREA NR. 1 :

Limbajul HTML – Introducere, structura unui document HTML,

formatarea textului

I. Tematica lucrării

Ce este HTML?

Structura unui document HTML.

Etichete HTML pentru generarea textelor.

Exemple primare.

II. Teoria lucrării de laborator

Ce este HTML?

HTML (Hyper Text Markup Language) reprezintă un limbaj de marcare,

alcătuit dintr-un set de etichete de marcare, prin care este descris conţinutul

unui document. Documentele HTML se mai numesc şi pagini web.

Structura unui document HTML

Structura de bază a unui document HTML este compusă din:

- Declaraţie tip document:

Ex. <!DOCTYPE html> este declaraţia pentru standardul HTML5.

- Secţiunea <HEAD> … </HEAD>, în care sunt trecute informaţii ce

se execută odată cu încărcarea paginii web.

- Corpul documentului, setat de eticheta <BODY> … </BODY>, în

care se introduc elementele ce vor fi afişate în pagina web.

- Orice pagină web se încheie cu eticheta </HTML>

Codul HTML de bază pentru un document arată astfel:

- 4 -

Limbajul HTML nu este case-sensitive, elementele scriindu-se cu litere mari

sau mici.

Elemente (etichete) HTML

Elementele HTML reprezintă etichete de inserare şi formatare a conţinutului

într-o pagină web. Ele pot defini paragrafe, tabele, liste, imagini, formulare,

clipuri multimedia etc.

Structura unui element este următoarea:

<nume_element> conţinut </nume_element>

Spre exemplu, în codul HTML

<p>Acesta este un paragraf</p>,

elementul utilizat este <p>, care defineşte un paragraf. Fiecare element

conţine o etichetă de deschidere şi una de închidere. Cea de închidere se

marchează cu caracterul ‘ / ’ înaintea numelui etichetei.

HTML conţine o serie de elemente pentru generarea conţinutului text. În

tabelul 1 sunt descrise principalele astfel de elemente.

Tabelul 1. Elemente HTML pentru generarea de text

Element HTML Afişare

text normal text normal

<b>text bold</b> text bold

- 5 -

<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

<code>text continand cod de

computer</code>

text continand cod de computer

<strong>text ingrosat</strong> text ingrosat

<big>mare</big> mare

<small>mic</small> mic

<font color=„red”>font rosu</font> font roşu

<font face=„Courier”>font

Courier</font>

font Courier

<font size=„6”>font size=6</font> font size=6 <div align=„center”>text aliniat pe

centru</div>

text aliniat pe centru

<div align=„left”>text aliniat la

stanga</div>

text aliniat la stanga

<div align=„right”>text aliniat la

dreapta</div>

text aliniat la dreapta

<h1>Titlu 1</h1> Titlu 1 <h2>Titlu 2</h2> Titlu 2 <h3>Titlu 3</h3> Titlu 3

<h4>Titlu 4</h4> Titlu 4

- 6 -



Exemplu de pagină web cu text formatat:

Rezultatul afişat în browser-ul web este cel din figura 1.

- 7 -

Figura 1. Exemplu de pagină web cu formatare de text.

III. Modul de lucru

1. Să se creeze o pagină web, care să afişeze următoarele:

3 tipuri de titluri (heading);

- 8 -

3 paragrafe de dimensiuni diferite;

paragrafele de mai sus să se formateze cu text îngroşat,

subliniat, italic, tăiat, superscript şi subscript;

separaţi paragrafele prin linii orizontale.

- 9 -


LUCRAREA NR. 2 :

Limbajul HTML – Imagini, legături, liste, tabele


1. Afişarea imaginilor în paginile web

2. Crearea legăturilor web (hyperlink-uri)

3. Generarea listelor ordonate şi neordonate

4. Crearea şi formatarea tabelelor în HTML


1. Afişarea imaginilor în paginile web

Elementul de setare a unei imagini într-o pagină web este format din

eticheta <IMG>.

Exemplu de cod HTML pentru inserarea unei imagini:

sau

Rezultatul afişat în browser va fi cel din figura 2.1. de mai jos.

- 10 -

2. Crearea legăturilor web (hyperlink-uri)

Legăturile web reprezintă direcţii de acces către alte adrese web de pe

Internet. În HTML hyperlink-urile se creează cu eticheta tip ancoră,

<A>…</A>.

Exemplu de 3 legături web către 3 universităţi din ţara noastră:

Rezultatul afişat va fi:

Adresele direcţionate de hyperlink se pot deschide în fereastra părinte sau

într-una nouă, utilizând atributul „_target”, care poate lua valorile:

_blank | _parent | _self | _top

Exemplu de utilizare a atributului „_target”:

- 11 -

3. Generarea listelor ordonate şi neordonate

Listele ordonate (numerotate) se inserează utilizând setul de etichete:

<OL> <LI> … </LI> </OL>, (OL = Ordered List).

Exemplu de listă ordonată generată în HTML:

Listele neordonate (nenumerotate) sunt create de setul de etichete:

<UL> <LI> … </LI> </UL>, (UL = Unordered List).

Exemplu de listă ordonată generată în HTML:

În cadrul listelor se pot introduce texte, imagini, legături web etc.

4. Crearea şi formatarea tabelelor în HTML

Tabelul este un element HTML foarte utilizat, atât pentru structurarea unei

pagini web, cât şi pentru gruparea informaţiilor.

Structura unui tabel HTML este:

- 12 -

<tr> - defineşte o linie (un rând) de tabel

<td> - defineşte o celulă de tabel

Fiecărui tabel i se poate insera şi un cap de tabel, utilizând eticheta <TH>

(table heading).

Evidenţierea conturului unui tabel se setează prin atributul „border”. De

asemenea, celule pot fi spaţiate atât în interior, cât şi în exterior, utilizând

atributele „cellpadding” şi „cellspacing”.

Exemplu de tabel generat în HTML:

Atunci când se doreşte ca o celulă să se întindă pe mai multe linii sau

coloane se utilizează atributul „colspan” (pentru coloane) şi „rowspan”

(pentru linii).

- 13 -

Exemplu de tabel cu o celulă extinsă pe 2 coloane:

III. Modul de lucru

1. Creaţi o pagină web în care să inseraţi următoarele elemente

HTML:

un titlu de pagină <H1> şi un paragraf.

3 imagini oarecare, cu titlu.

3 legăturilor web care să utilizeze valori diferite pentru

atributul „target”.

o listă ordonată cu principalele monezi de schimb valutar

o listă neordonată cu hobby-urile dvs.

un tabel în care să apară şi celule care se întind pe mai multe

coloane sau linii.

- 14 -


LUCRAREA NR. 3 :

Limbajul HTML – Cadre, formulare


1. Lucrul cu cadre în paginile web

2. Generarea formularelor HTML


1. Lucrul cu cadre în paginile web

Cadrul (frame) reprezintă o secţiune din pagina web, un container de

conţinut, separat de restul site-ului. Cadrele sunt utilizate pentru separarea

de conţinut, ajutând la structurarea mai bună a site-ului.

Standardul HTML 4.01 include 2 tipuri de cadre <FRAME> şi <IFRAME>.

a) Cadrul <FRAME> defineşte o fereastră (un cadru) într-un set de

cadre (<FRAMESET>).

Exemplu de pagină web cu un set de 3 cadre, fiecare cadru reprezentând o

pagină web separată.

Rezultatul afişat în navigatorul web este cel din figura 3.1 de mai jos.

- 15 -

Figura 3.1. Setarea cadrelor în HTML

Notă

Elementele <FRAMESET> şi <FRAME> nu mai sunt suportate în

standardul HTML5.

b) Dacă se doreşte inserarea unei pagini web într-un cadru în interiorul

paginii principale, se foloseşte eticheta <IFRAME>.

Exemplu de mai jos încarcă într-un cadru IFRAME site-ul universităţii

Hyperion.

Rezultatul afişat este cel din figura 3.2 de mai jos:

- 16 -

Figura 3.2. Cadru IFRAME încărcat cu conţinut din alt site.

Notă

Elementul IFRAME este suportat şi în standardul HTML5.

2. Generarea formularelor HTML

Aproape orice portal web existent la ora actuală conţine cel puţin o pagină

cu un formular de procesare date: formular de autentificare, formular de

contact, formular de întrebări, formular de sondaj de opinie, formular de

introducere date diverse etc.

În HTML formularele se creează cu elementul FORM.

În cadrul unui formular pot fi definite următoarele câmpuri de introducere a

datelor utilizator:

- 17 -

a) câmp introducere text : <input type=„text”>

Exemplu:

b) câmp introducere parolă : <input type=„password”>

Exemplu:

c) butoane radio : <input type=„radio”>

Exemplu:

d) căsuţe de validare (checkbox) : <input type=„checkbox”>

Exemplu:

- 18 -

e) arie de text : <textarea> ... </textarea>

Într-o arie de text se poate introduce text de dimensiuni mai mari.

Exemplu:

f) listă drop-down : <select>

Pentru selectarea unei opţiuni dintr-o listă se utilizează elementul SELECT.

Acesta conţine pentru fiecare opţiune câte un element OPTION.

Exemplu:

g) selecţie fişier : <input type=„file”>

Exemplu>

h) câmp introducere adresă de e-mail : <input type=„email”>

- 19 -

Dacă adresa nu este validă sintactic, navigatorul web va da un mesaj de

eroare:

Exemplu:

i) buton : <input type=„button”> (HTML 4.01) sau <button type=„button”>

(HTML 5)

Butoanele reprezintă elemente de formular prin care utilizatorul declanşează

execuţia unei acţiuni (funcţie script, procesare date formular etc.)

Exemplu:

j) buton trimitere date formular spre procesare :

<input type=„submit”>

Exemplu:

k) buton ştergere date din formular : <input type=„reset”>

Exemplu:

- 20 -

În continuare se prezintă un exemplu de formular ce conţine mai multe

elemente.

În navigatorul web se va afişa formularul de mai jos.

- 21 -

Datele dintr-un formular se trimit spre procesare prin apăsarea butonului

referit de elementul HTML „submit”. Acestea sunt preluate de o funcţie

specificată în eticheta <FORM> şi care poate fi definită într-un limbaj tip

scripting (PHP, JavaScript, VBScript, ASP etc.), iar metoda de prelucrare a

datelor se defineşte prin atributul METHOD, luând valorile „GET” sau

„POST”.

III. Modul de lucru

1. Să se creeze un document HTML care să conţină 2 cadre (frame-

uri), unul la stânga cu o lăţime de 25% şi unul la dreapta (75%).

2. Să se creeze un alt document HTML care să conţină:

un titlu, 2 paragrafe, o imagine şi un tabel.

3. Să se creeze o altă pagină web care să conţină un formular HTML,

în care să fie prezente toate elementele de formular prezente în

lucrarea de laborator.

- 22 -


LUCRAREA NR. 4 :

Limbajul CSS – Introducere, tipuri de formatare CSS, formatări

de bază


1. Ce reprezintă CSS? Sintaxa CSS

2. Formatarea elementelor de fundal, text, font, legături web, liste,

tabele şi imagini utilizând limbajul CSS.


1. Ce reprezintă CSS?

CSS este acronimul pentru Cascading Style Sheets (Foi de

stil în cascadă)

Stilurile definesc cum sunt afişate elementele HTML

Stilurile au fost introduse în standardul HTML 4.0 pentru a

rezolva problema formatării elementelor

Se pot utiliza foi de stil externe pentru uşurinţa utilizării lor

Sintaxa CSS

O regulă CSS este alcătuită din două părţi:

SELECTOR. Selectorul este de obicei elementul HTML care se

doreşte a fi formatat şi poate fi definit prin:

o numele elementului HTML,

o clasa elementului HTML (definită prin caracterul ’.’ –

punct). În acest caz toate elementele care au setată clasa

„centrat” vor fi aliniate pe centrul elementului părinte.

- 23 -

o identificatorul elementului HTML (ID-ul), definit prin

caracterul #, astfel că orice element cu ID-ul „citat” va fi

formatat cu font italic.

Exemplu de utilizare a selectorului CSS, în cele trei moduri:

una sau mai multe DECLARAŢII. O declaraţie este compusă dintr-o

proprietate a elementului (caracteristică) şi valoarea dată de utilizator

pentru acea proprietate.

Figura 4.1 descrie sintaxa unei reguli CSS.

Figura 4.1. Sintaxa unei reguli de formatare CSS.

Regulile CSS se scriu în 3 locaţii, la latitudinea utilizatorului:

între etichetele <HEAD> şi </HEAD> unde se introduce elementul

<STYLE> în care se adaugă regulile CSS dorite, ca în exemplul:

într-un fişier extern, salvat cu extensia .css, fişier referit în

documentul HTML în interiorul elementului <HEAD>, printr-o

sintaxă de forma:

în interiorul elementului HTML prin utilizarea atributului STYLE,

cum ar fi exemplul următor:

- 24 -

Comentariile în limbajul CSS se declară prin setul de caractere:

Exemplu:

Exemplu primar în care sunt formatate prin CSS câteva elemente HTML:

În figura 4.2 este prezentat rezultatul afişării documentului HTML de mai

sus, în care s-au formatat un titlu H1, unul H2 şi un paragraf.

Figura 4.2. Exemplu de formatare prin CSS a unor elemente HTML.

- 25 -

2. Formatarea elementelor de fundal, text, font, legături web, liste,

tabele şi imagini utilizând limbajul CSS.

a) Proprietăţile CSS de fundal (background) sunt utilizate pentru a

defini efectele de fundal ale unui element. Aceste proprietăţi sunt

următoarele:

background-color

background-image

background-repeat

background-attachment

background-position

În CSS, o culoare se poate specifica în trei moduri:

o valoare HEXA, ca şi „#ff0000”

o valoare RGB, ca şi „rgb(255,0,0)”

un nume de culoare, ca şi „red”

Exemplu de setare culoare de fundal pentru elemente de tip H2, DIV şi P:

Rezultatul afişat în browser arată ca cel din figura 4.3 de mai jos:

Figura 4.3. Formatarea prin CSS a culorii de fundal.

- 26 -

b) Proprietăţile CSS de text definesc valori pentru culoarea, direcţia,

spaţierea între litere, înălţimea, alinierea, decorarea, transformarea,

indentarea etc. a textelor, acestea fiind:

color

direction

letter-spacing

line-height

text-align

text-decoration

text-indent

text-shadow

text-transform

vertical-align

word-spacing

c) Proprietăţile CSS de font stabilesc familia, dimensiunea, stilul şi

formatul fontului, acestea fiind următoarele:

font

font-family

font-size

font-style

font-variant

font-weight

d) Proprietăţile CSS de formatare a legăturilor web (hyperlink-uri) pot

fi de orice fel (culoare, font, fundal etc.) şi se aplică pentru cele patru

stări ale hyperlink-urilor:

a:link – un link normal, nevizitat

a:visited - un link vizitat de către utilizator

a:hover - un link peste care utilizatorul culisează mouse-ul

a:active - un link pe care utilizatorul a dat cel puţin un click.

Exemplu de formatare a legăturilor web prin CSS:

- 27 -

Codul CSS Cele 4 stări

Un link

Un link

Un link

Un link

e) Proprietăţile CSS pentru liste formatează tipul marcajului, imaginea

acestuia şi poziţionarea, acestea fiind:

list-style

list-style-image

list-style-position

list-style-type

Exemplu de liste formatate cu diverse tipuri de marcaje, de la simboluri la

litere din alte limbi.

Rezultatul afişat în broweser-ul web este prezentat în figura 4.3:

- 28 -

Figura 4.3. Liste formatate prin CSS.

f) Proprietăţile CSS pentru tabele sunt cele utilizate în mod regulat

pentru text, borduri, spaţiere etc., conducând la tabele cu aspect mult

îmbunătăţit faţă de cel normal.

Prezentăm un exemplu de cod CSS care formatează elementele unui tabel

(TR, TD, TH) aplicând mai multe proprietăţi.

Codul HTML Codul CSS

- 29 -

Tabelul afişat în browser-ul web generat şi formatat de codul HTML şi CSS

de mai sus este prezentat în figura 4.4.

- 30 -

Figura 4.4. Tabel formatat prin reguli CSS.

g) Proprietăţile CSS pentru imagini sunt cele utilizate pentru setarea

parametrilor de contur, spaţiere, aliniere şi altele.

Exemplu de formatare prin CSS a unei imagini având atributul

id=„hypimg” în interiorul unui paragraf:

Rezultatul afişat în browser este cel din figura 4.5 de mai jos. Paragraful

este unul oarecare.

- 31 -

Figura 4.5. Formatarea unei imagini utilizând reguli CSS

Pentru studierea şi a altor proprietăţi CSS de formatare a elementelor

HTML, se pot accesa o serie de website-uri dedicate, cum sunt cele

prezentate la bibliografia de la sfârşit.

III. Modul de lucru

1. Să se creeze una sau mai multe pagini web, eventual conectate

între ele prin legături web (hyperlink-uri), în care să inseraţi

diverse elemente HTML (paragrafe, imagini, tabele, liste, căsuţe

DIV etc.) şi să formataţi aceste elemente utilizând limbajul CSS.

- 32 -


LUCRAREA NR. 5 :

Limbajul CSS – Formatări avansate CSS


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, fără a utiliza tabele sau cadre tip „frameset”

3. Imagini sprite


1. Crearea unei bare de navigare (meniu orizontal) în HTML şi

formatarea acesteia prin CSS

Astăzi aproape orice website conţine cel puţin o bară de navigare prin

paginile sale. Bara de navigare, denumită şi meniu, poate fi structurată

orizontal sau vertical.

Un meniu este alcătuit 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 Afişare

- 33 -

Vom proceda la formatarea acestui meniu pentru a-l transforma într-unul

orizontal, oferindu-i un aspect mult îmbunătăţit. Elementele HTML

formatate vor fi:

<ul> - eliminăm bulina elementelor din listă, precum şi marginile

interioare şi exterioare;

<li> - setăm elementele listei să se poziţioneze una după alta

orizontal;

<a> - formatăm hyperlink-urile să se afişeze sub formă de căsuţă

(bloc) cu borduri stânga/dreapta formatate, cu o culoare pentru

fundal, cu anumiţi parametri pentru font şi text aliniat centrat

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:

Figura 5.1. Un meniu orizontal formatat doar prin cod CSS

- 34 -

Aici se poate observa avantajul major al limbajului CSS, care transformă o

pagină HTML obişnuită într-o experienţă de navigare plăcută utilizatorului,

prin modificarea proprietăţilor elementelor.

2. Crearea şi formatarea structurii unei pagini tip „homepage” prin

CSS, fără a utiliza tabele în HTML

Pentru uşurarea procesului de navigare de către utilizatori pe un website,

prima pagină, denumită „homepage”, trebuie structurată pe secţiuni, în

interiorul cărora să se pună conţinutul website-ului. De obicei, una din

secţiuni conţine meniul principal de navigare, iar o altă secţiune, de

dimensiuni mai mari, afişează conţinut în funcţie de opţiunile alese din

meniu.

Structurarea (secţionarea) unui site se poate realiza în cel puţin trei moduri:

utilizând un tabel HTML, secţionarea făcându-se cu ajutorul

celulelor:

Conform recomandărilor World Wide Web Consortium (W3C), tabelele ar

trebui utilizate numai pentru afişarea datelor în mod tabular şi nu pentru

schema structurală a unui site sau pentru poziţionare.

folosind cadre cu elementul <FRAMESET>, într-un cadru se pune

meniul, iar în alt cadru conţinutul afişat:

Deşi metoda secţionării unui site prin cadre a fost larg utilizată, iată câteva

dezavantaje ale utilizării ei:

o indexarea slabă a site-ului în majoritatea motoarelor de

căutare, deoarece se indexează doar un frame la un moment

dat;

o frame-urile nu sunt prietenoase URL, deoarece toate paginile

împărtăşesc acelaşi URL;

o lipsa de suport pentru cadre la unele navigatoare web şi

eliminarea elementelor <FRAMESET> şi <FRAME> din

standardul HTML5/CSS3.

- 35 -

utilizând secţiuni cu elemente <DIV> şi formatându-le poziţionarea

şi dimensiunile cu ajutorul regulilor CSS:

Aceasta este cea mai des utilizată metodă de structurare a unei scheme de

website, având multe avantaje în plus faţă de metodele descrise anterior,

printre care flexibilitatea ridicată privind repoziţionarea şi redimensionarea

elementelor din site.

Secţionarea 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

Structura HTML a schemei de website descrisă în figura 5.2 este

următoarea:

Pentru exemplificare vom utiliza această structură pentru a genera schema

unei pagini web având ca elemente: un header, un meniu vertical, o zonă de

conţinut şi un footer.

Codul HTML care generează această pagină este următorul:

- 36 -

Iar codul CSS prin care se formatează elementele paginii pentru afişarea

acesteia în mod îmbunătăţit din punct de vedere structural este următorul:

- 37 -

Rezultatul afişat în browser este prezentat în figura 5.3, evidenţiindu-se clar

structura paginii web.

Figura 5.3. Exemplu de pagină web structurată prin secţiuni DIV formatate

cu reguli CSS

3. Imagini sprite

O imagine sprite este o colecţie de imagini asamblate într-o singură

imagine. O pagină web cu multe imagini se poate încărca în browser într-un

timp îndelungat şi generează cereri multiple către server.

- 38 -

Folosind imagini sprite se va reduce numărul de cereri către server şi se va

salva şi din banda de Internet utilizată.

Pentru exemplificare vom utiliza imaginea multiplă din figura 5.4, care este

compusă din 2 imagini.

Figura 5.4. O imagine compusă din 2 imagini

componente

Utilizând limbajul CSS putem afişa doar partea de imagine care ne

interesează. În exemplul de mai jos (fig. 5.5) se afişează separat fiecare

imagine componentă, separarea realizându-se prin CSS.

Codul HTML

Codul CSS Afişare în browser

După cum se poate observa din codul CSS, pentru a selecta imaginea din

partea de jos, s-a ales valoarea de -50px pentru poziţia TOP a imaginii cu

- 39 -

clasa „next2”, browser-ul afişând imaginea a doua începând cu această

poziţie către partea de jos.

III. Modul de lucru

1. Să se creeze o pagină web care să conţină următoarele elemente

şi formatări:

a. O schemă a site-ului (layout) cu secţiunile: header,

coloană stânga (lungime 20% din totalul paginii),

coloană mijloc (60%), coloană dreapta (20%), footer. Să

se utilizeze doar secţiuni DIV formatate cu CSS.

b. Un meniu vertical în coloana din stânga site-ului

asemănător celui din figura 5.3 în ceea ce priveşte

formatarea CSS.

c. 4 imagini una sub alta, provenite dintr-o singură imagine

ce le conţine pe toate 4, în coloana din dreapta paginii

web. Extragerea fiecărei imagini se va realiza utilizând

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 proprietăţi CSS neutilizate în lucrarea de

laborator. Utilizaţi ca sursă de informare Internet-ul.

- 40 -


LUCRAREA NR. 6 :

Limbajul JAVASCRIPT – Introducere, variabile, tipuri de date şi

operatori


1. Ce este JAVASCRIPT?

2. Variabile şi tipuri de date în JavaScript

3. Operatori în JavaScript

4. Exemplu de program JavaScript


1. Ce este JAVASCRIPT?

JAVASCRIPT reprezintă cel mai utilizat limbaj de scripting pe

partea de client din reţeaua Web.

Un limbaj de scripting este caracterizat prin simplitate în sintaxă şi

descriere, fiind un limbaj de categorie uşoară.

Limbajul JavaScript este utilizat în miliarde de pagini web,

adăugând dinamică în funcţionalitate, validarea formularelor,

comunicarea cu servere şi multe altele.

JavaScript este un limbaj uşor de învăţat, programele fiind inserate

în interiorul paginilor HTML şi sunt interpretate şi executate de către

navigatorul web (browser).

Un simplu exemplu constă în afişarea unui mesaj de alertă într-o fereastră

de dialog, utilizând funcţia alert( ).

Codul programului:

Afişarea în browser:

- 41 -

2. Variabile şi tipuri de date în JavaScript

În limbajul JavaScript, variabilele se declară simplu, utilizând cuvântul

rezervat „var”. Pentru a iniţializa o variabilă, aceasta trebuie urmată de

simbolul ’=’ şi valoarea dorită pentru iniţializare.

Exemplu:

De obicei, atât variabilele cât şi instrucţiunile programului sunt urmate de

simbolul ’;’ . Dacă o variabilă nu este iniţializată, aceasta va primi valoarea

undefined (nedefinit).

Tipuri de date

Principalele tipuri de date definite de JavaScript sunt:

STRING, şir de caractere;

NUMBER, număr;

BOOLEAN, bolean (valori adevărat sau fals);

ARRAY, vector de elemente de orice tip;

OBJECT, obiect cu proprietăţi de orice tip;

NULL, tipul de date nul;

UNDEFINED, tipul de date nedefinit.

În tabelul 6. 1 sunt descrise aceste tipuri de date, alături de exemple

corespunzătoare.

Tabelul 6.1. Tipuri de date definite implicit în JavaScript, cu exemple.

- 42 -

Tipul de date Exemple

STRING

NUMBER

BOOLEAN

ARRAY

OBJECT

NULL

UNDEFINED

În limbajul JavaScript se poate declara tipul unei variabile o dată cu

declararea acesteia, utilizând cuvântul rezervat „new”, ca în exemplul

următor:

- 43 -

Toate variabilele JavaScript reprezintă obiecte. Când se declară o variabilă,

în fapt se creează un nou obiect.

OBIECTELE limbajului JavaScript

Obiectul este o structură de date având proprietăţi şi metode. Proprietăţile

sunt trăsături ale obiectului, asociindu-li-se valori, iar metodele reprezintă

acţiuni ale obiectului.

Exemplu, pentru obiectul persoana se pot defini următoarele proprietăţi şi

metode:

Proprietăţi Metode

Accesul la proprietăţile şi metodele unui obiect JavaScript se realizează prin

operatorul de referinţă, simbolul punct ’ . ’, astfel:

numeObiect . numeProprietate

numeObiect . numeMetoda( )

Exemplu de folosire şi afişare în browser:

Obiectul DOCUMENT

Este unul din cele mai importante obiecte utilizate în JavaScript.

- 44 -

Orice pagină web HTML încărcată într-un navigator web devine un obiect

de tip document. Proprietăţile ş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 conţinute

în pagina web respectivă, utilizând un script.

Tabelul 6.2. Proprietăţile obiectului DOCUMENT

Proprietatea Descrierea

anchors Returnează o listă cu toate ancorele din document

applets Returnează o colecţie cu toate applet-urile

body Returnează elementul body al documentului

cookie Returnează toate perechile nume/valoare ale cookie-

urilor din document

domain Returnează numele de domeniu al serverului care a

încărcat documentul

forms Returnează lista cu toate formularele din document

images Returnează o colecţie cu toate imaginile din document

links Returnează lista tuturor link-urilor din document

referrer Returnează adresa URL a documentului care a încărcat

pagina curentă

title Setează sau returnează titlul documentului

URL Returnează adresa întreagă URL a documentului

Tabelul 6.3. Metodele obiectului DOCUMENT

Metoda Descrierea

open() Deschide un flux de ieşire (output stream)

pentru a culege ieşirea generată de metodele document.write() sau document.writeln()

close() Închide fluxul de ieşire deschis anterior prin

metoda document.open()

- 45 -

getElementsByName() Accesează toate elementele cu un nume

specificat în atributul „name”

write() Afişează într-un document expresii HTML

sau cod Javascript executat

writeln() La fel ca la metoda write(), în plus

adăugându-se un caracter de linie nouă după fiecare instrucţiune

Limbajul JavaScript deţine o colecţie mare de obiecte implicite, descrierea

lor putând fi accesată prin consultarea referinţelor bibliografice de la finalul

îndrumarului de laborator.

3. Operatori în JavaScript

În limbajul JavaScript, operatorii se împart în următoarele categorii:

aritmetici, de atribuire, de comparaţie, logici şi condiţionali.

operatori aritmetici:

Tabelul 6.3. Operatorii aritmitici în JavaScript.

Operator Descriere

+ adunare

- scădere

* înmulţire

/ împărţire

% modulo (restul împărţirii)

++ incrementare

-- decrementare

operatori de atribuire, combinaţi cu cei aritmiteci:

Tabelul 6.4. Operatorii de atribuire în JavaScript.

- 46 -

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 funcţia de

concatenare. Adunarea între un număr şi un şir de caractere are ca rezultat

tot un şir de caractere.

operatori de comparaţie:

Tabelul 6.5. Operatorii de comparaţie în Javascript.

Operator Descriere

== egalitate

=== egalitate exactă (valoare şi tip de date)

!= inegalitate

!== inegalitate (valoare şi tip de date)

> mai mare

< mai mic

>= mai mare sau egal

<= mai mic sau egal

operatori logici:

Tabelul 6.6. Operatorii logici în JavaScript

- 47 -

Operator Descriere Example

&& ŞI logic (x<10 && y>1)

|| SAU logic (x==5 || y==5)

! NEGAŢIE logică !(x==y)

operatorul condiţional (operatorul ternar):

Limbajul JavaScript conţine, de asemenea, un operator condiţional, numit şi

ternar, care atribuie o valoare unei variabile în baza îndeplinirii unei

condiţii.

Sintaxă:

Exemplu:

4. Exemplu de program JavaScript

Inserarea de coduri JavaScript în interiorul documentelor HTML se

realizează prin utilizarea elementului <SCRIPT>, astfel:

Ca şi la limbajul CSS, scripturile JavaScript se pot încărca şi din exterior,

prin fişiere cu extensia „.js”, precizându-se sursa fişierului în atributul

„src”, în modul următor:

În exemplul următor se foloseşte JavaScript pentru:

setarea culorii textului unui paragraf şi a fundalului unei căsuţe DIV;

afişarea ceasului calculatorului, utilizând un obiect de tip Date().

Codul HTML şi JavaScript:

- 48 -

Afişarea documentului în browser:

III. Modul de lucru

1. Să se creeze o pagină HTML care să conţină elementele următoare:

2 paragrafe, o imagine şi un tabel de 3x3.

2. Să se creeze un script JavaScript care să realizeze următoarele:

să interschimbe textele din cele două paragrafe;

să poziţioneze imaginea la dreapta paginii;

să seteze bordura tabelului cu grosimea de 1px, culoare verde

şi fundalul celulelor de culoare portocalie;

să afişeze ziua, data şi ora curentă.

3. Creaţi un script care să execute următoarele operaţii aritmetice:

adunare, scădere, înmulţire, împărţire, modulo, incrementare

şi decrementare;

- 49 -

calculul minimului dintre 3 numere oarecare. Numerele pot fi

introduse în căsuţe text.

- 50 -


LUCRAREA NR. 7 :

Limbajul JAVASCRIPT – Instrucţiuni, funcţii predefinite şi

funcţii definite de utilizator


1. Instrucţiuni în JavaScript

2. Funcţii predefinite ale limbajului JavaScript

3. Funcţii definite de utilizator


1. Instrucţiuni în JavaScript

Categoriile de instrucţiuni ale limbajului JavaScript sunt: condiţionale, de

ciclare şi de salt.

a) instrucţiuni condiţionale:

Instrucţiunile condiţionale JavaScript sunt:

instrucţiunea IF – se execută un set de instrucţiuni numai dacă este

îndeplinită (adevărată) o condiţie:

instrucţiunea IF...ELSE – se execută un prim set de instrucţiuni

dacă condiţia este adevărată şi un al doilea set de instrucţiuni dacă

condiţia este falsă.

- 51 -

instrucţiunea IF...ELSE IF...ELSE – dacă condiţia este adevărată

se execută un set de instrucţiuni din mai multe posibile.

instrucţiunea SWITCH – dacă condiţia este adevărată se execută

un set de instrucţiuni din mai multe posibile. Diferenţa faţă de

instrucţiunea de mai sus constă în sintaxa de scriere.

Exemplu de script care afişează în pagina web ziua curentă:

- 52 -

b) instrucţiuni de ciclare:

Instrucţiunile de ciclare prezente în JavaScript sunt:

instrucţiunea FOR – ciclează un bloc de instrucţiuni de un număr

de ori specificat atât timp cât o condiţie este adevărată:

- instrucţiunea 1 se execută înaintea blocului de instrucţiuni.

- conditie defineşte condiţia de rulare a blocului de instrucţiuni.

- instrucţiunea 2 se execută după fiecare rulare a blocului de

instrucţiuni.

Exemplu:

- 53 -

Rezultatul afişat în navigatorul web este:

instrucţiunea FOR/IN – ciclează prin proprietăţile unui obiect:

Exemplu:

Afişare în browser:

instrucţiunea WHILE – ciclează (executând) un set de instrucţiuni

atât timp cât o condiţie este adevărată:

Exemplu:

- 54 -

Afişare în navigatorul web este aceeaşi ca şi la ciclul FOR.

instrucţiunea DO/WHILE – la fel ca şi la instrucţiunea WHILE,

diferenţa constând în faptul că la instrucţiunea DO/WHILE blocul de

instrucţiuni se execută cel puţin o dată:

Exemplu:

Afişare în navigatorul web este aceeaşi ca şi la ciclul FOR sau WHILE.

c) instrucţiuni de salt:

Instrucţiunile de salt utilizate în limbajul JavaScript sunt:

instrucţiunea BREAK – întrerupe o buclă (ciclu) în execuţie,

transferând execuţia către prima instrucţiune de după buclă:

Exemplu:

- 55 -

Afişarea se va opri la pasul în care i=2, astfel rezultând:

instrucţiunea CONTINUE – întrerupe o singură iteraţie din ciclu,

pentru o condiţie specificată şi continuă execuţia buclei cu

următoarea iteraţie:

Exemplu:

Se vor afişa toate valorile cu excepţia pasului pentru care i=3, rezultând:

Notă:

instrucţiunea CONTINUE (cu sau fără referinţă la o etichetă) poate

fi utilizată numai în cadrul unei bucle condiţionale.

instrucţiunea BREAK, fără referinţă la o etichetă, poate fi utilizată

numai într-un ciclu condiţional sau SWITCH. Cu referinţă la o

etichetă, instrucţiunea BREAK poate fi folosită pentru a ieşi din

execuţia oricărui bloc de instrucţiuni JavaScript.

- 56 -

Exemplu:

Din tot vectorul „zile” se vor afişa numai primele trei, deoarece

instrucţiunea break lista va întrerupe blocul reprezentat de eticheta lista ,

după pasul în care i=2, rezultând:

Comentarii în JavaScript

Comentariile pot fi adăugate pentru a explica codul JavaScript, sau pentru a-

l face mai lizibil. Comentariile se pot defini în două moduri:

comentariu pe o linie, utilizând setul de caractere // (dublu slash):

Acesta va ignora linia de cod comentată, în procesul de execuţie. Exemplu:

comentariu pe mai multe linii, utilizând perechea /* , */ :

În acest caz, se vor ignora la execuţie toate liniile de cod din interiorul

grupului de caractere /*, */. Exemplu:

În editoarele moderne, care permit colorarea codului, de obicei, comentariile

sunt de culoare verde.

- 57 -

Cel mai des, comentariile sunt utilizate pentru explicarea codului scris.

Exemplu:

2. Proprietăţi şi funcţii (metode) predefinite ale limbajului JavaScript

Proprietăţile şi funcţiile predefinite din JavaScript sunt cele conţinute de

obiectele predefinite ale limbajului. Aceste obiecte sunt încadrate în trei

categorii:

a) obiectele JavaScript

b) obiectele navigatorului (browser-ului)

a) Obiectele JavaScript sunt următoarele:

obiectul Array

Proprietăţi: constructor, length, prototype

Metode: concat, indexOf, join, lastIndexOf, pop, push, reverse, shift, slice,

sort, splice, toString, unshift, valueOf

Exemplu de utilizare a funcţiilor concat(), push(), sort() şi a proprietăţii

length:


- 58 -

obiectul Date

Proprietăţi: constructor, prototype

Metode: getDate, getDay, getFullYear, getHours, getMilliseconds,

getMinutes, getMonth, getSeconds, getTime, getTimezoneOffset,

getUTCDate, getUTCDay, getUTCFullYear, getUTCHours,

getUTCMilliseconds, getUTCMinutes, getUTCMonth, getUTCSeconds,

parse, setDate, setFullYear, setHours, setMilliseconds, setMinutes,

setMonth, setSeconds, setTime, setUTCDate, setUTCFullYear,

setUTCHours, setUTCMilliseconds, setUTCMinutes, setUTCMonth,

setUTCSeconds, toDateString, toISOString, toJSON, toLocaleDateString,

toLocaleTimeString, toLocaleString, toString, toTimeString,

toUTCString, UTC, valueOf

Exemplu de afisare a datei curente si a ceasului calculatorului în timp real:

- 59 -


obiectul Math

Proprietăţi: E, LN2, LN10, LOG2E, LOG10E, PI, SQRT1_2, SQRT2

Metode: abs, acos, asin, atan, atan2, ceil, cos, exp, floor, log, max, min,

pow, random, round, sin, sqrt, tan

Exemplu de calculare a valorilor funcţiei Sinus pentru unghiurile 0, 300, 45

0,

600 şi 90

0:

- 60 -


obiectul Number

Proprietăţi: constructor, MAX_VALUE, MIN_VALUE,

NEGATIVE_INFINITY, NaN, POSITIVE_INFINITY, prototype

Metode: toExponential, toFixed, toPrecision, toString, valueOf

Un exemplu în care un număr este convertit în notaţie exponenţială:

- 61 -

Rezultatul afişat în browser:

obiectul String

Proprietăţi: constructor, length, prototype

Metode: charAt, charCodeAt, concat, fromCharCode, indexOf,

lastIndexOf, match, replace, search, slice, split, substr, substring,

toLowerCase, toUpperCase, valueOf

Alte metode ce returnează string-uri formatate din diverse elemente HTML:

anchor, big, blink, bold, fixed, fontcolor, fontsize, italics, link, small,

strike, sub, sup

În exemplul următor aplicăm prin cod JavaScript diverse formatări asupra

unui text:

Rezultatul afişat în navigatorul web:

- 62 -

obiectul RegExp

O expresie regulată este un obiect care descrie un şablon (pattern) de

caractere. Expresiile regulate sunt utilizate la efectuarea de funcţii cum ar fi

pattern-matching (potrivire pe şablon) şi search-and-replace (căutare şi

înlocuire).

Sintaxa:

şablonul (pattern) indică modelul, tiparul unei expresii

modificatorii (modifiers) specifică dacă o căutare trebuie făcută

global, case-sensitive, etc.

Proprietăţi: global, ignoreCase, lastIndex, multiline, source

Metode: compile, exec, test

Exemplul următor caută mai întâi litere majuscule şi le înlocuieşte cu litera

Y, iar apoi caută cifrele şi le înlocuieşte cu caracterul #:

- 63 -

Rezultatul afişat în browser:

Pe lângă acestea, mai există proprietăţi şi metode JavaScript globale.

Proprietăţi globale: Infinity, NaN, undefined

Metode globale: decodeURI, decodeURIComponent, encodeURI,

encodeURIComponent, escape, eval, isFinite, isNaN, Number,

parseFloat, parseInt, String, unescape

În exemplul care urmează, testăm funcţia EVAL:

Iar rezultatul execuţiei codului în browser-ul web este:

În afară de toate aceste obiecte, JavaScript mai conţine:

b) obiectele navigatorului (browser-ului) sunt următoarele:

- 64 -

Window

Navigator

Screen

History

Location

3. Funcţii definite de utilizator

Pentru definirea unei funcţii de către utilizator, sintaxa este următoarea:

Apelul se poate face fie în cadrul codului JavaScript, fie utilizând

evenimente de tipul onclick , onmouseover etc.

Exemplu de funcţie care afişează un mesaj de alertă într-o fereastră:

Rezultatul afişat în browser este următorul:

- 65 -

III. Modul de lucru

Utilizând cele învăţate în lucrarea de laborator, să se creeze următoarele

script-uri.

1. Calculul sumei numerelor de la 1 la 100.

2. Calculul primelor 10 numere prime.

3. Calculul primelor 10 puteri ale lui 2 .

4. Calculul vârstei dvs., aproape exacte scăzând din data curentă data

naşterii.

5. Afişarea denumirii zilei curente.

6. Afişarea unui text în deplasare orizontală sau verticală utilizând

strict metode ale obiectelor STRING sau ARRAY.

7. Căutarea în cadrul unui text a literelor d, f şi t.

- 66 -


LUCRAREA NR. 8 :

Limbajul JAVASCRIPT şi modelul DOM – Crearea paginilor

dinamice utilizând limbajul JavaScript şi DOM


1. Modelul DOM (Document Object Model)

2. Formatarea elementelor HTML utilizând limbajul JavaScript şi

modelul DOM


1. Modelul DOM (Document Object Model)

Conform World Wide Web Consortium (W3C), Document Object Model

reprezintă un model orientat obiect, cross-platfrom şi independent de limbaj,

o interfaţă gen API care permite scripturilor să realizeze în mod dinamic

accesarea şi actualizarea conţinutului, structurii şi stilului documentelor.

Astfel, rezultatul unui document procesat cu modelul DOM poate fi

incorporat înapoi în pagina curentă.

Utilizând modelul DOM, JavaScript poate accesa toate elementele dintr-un

document HTML.

Atunci când o pagină web este încărcată, browser-ul crează o structură

DOM a paginii respective. Structura DOM este construită ca un arbore de

obiecte, ca în figura 8.1:

- 67 -

Figura 8.1. Arborele DOM al unui document HTML

Având acest model obiect programabil, JavaScript are tot ce-i trebuie pentru

a crea pagini HTML dinamice:

JavaScript poate modifica toate elementele HTML dintr-o pagină

JavaScript poate modifica toate atributele HTML dintr-o pagină

JavaScript poate modifica toate stilurile CSS dintr-o pagină

JavaScript poate reacţiona la toate evenimentele din pagina web.

Accesarea elementelor HTML

Se poate realiza în trei moduri:

după ID-ul unui element

după numele etichetei unui element

după numele clasei unui element (fără efect în IE 5, 6, 7 şi 8).

2. Formatarea elementelor HTML utilizând limbajul JavaScript şi

modelul DOM

a) Modificarea conţinutului unui element HTML

- 68 -

Sintaxa:

Exemplu:

Rezultatul execuţiei în browser arată astfel:

Prima afişare A doua afişare

b) Modificarea atributelor unui element HTML

Sintaxa:

Exemplu, în care se modifică sursa unei imagini:

Iar execuţia codului este următoarea:

- 69 -


c) Modificarea stilului CSS al unui element HTML

Sintaxa:

În exemplul următor se vor schimba proprietăţile CSS ale unui paragraf

pentru culoarea, familia şi dimensiunea fontului:

Iar rezultatul afişat în browser-ul web este:


- 70 -

d) Evenimente HTML DOM - JavaScript

HTML DOM permite limbajului JavaScript să reacţioneze la evenimentele

HTML. Astfel, la declanşarea unui eveniment, cum ar fi un clic de mouse,

se poate executa un cod JavaScript.

Example de evenimente HTML:

Când un utilizator apasă un buton al mouse-ului

Când s-a încărcat pagina web

Când s-a încărcat o imagine

Când mouse-ul glisează deasupra unui element

Când se modifică un câmp de introducere date

Când este trimis un formular spre procesare

Când utilizatorul apasă o tastă de la tastatură

Spre exemplificare prezentăm un script prin care se verifică dacă cookie-

urile navigatorului sunt activate sau nu, la încărcarea paginii, prin tratarea

evenimentului onload:

Afişarea constă într-un mesaj alertă, ca cel de mai jos:

- 71 -

III. Modul de lucru

1. Să se creeze un document HTML cu elementele: paragraf, imagine,

tabel, listă.

2. Să se modifice utilizând limbajul JavaScript şi modelul DOM

atributele elementelor din pagina creată la punctul 1.

3. Să se creeze un script prin care, atunci când 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 cât mai multe evenimente

HTML.

- 72 -


LUCRAREA NR. 9 :

Limbajul PHP – Introducere, variabile, tipuri de date. Exemple

primare


1. Ce este PHP?

2. Instalarea PHP

3. Variabile PHP

4. Operatori PHP


1. Ce este PHP?

PHP este prescurtarea de la „PHP: Hypertext Preprocessor”. La

începutul dezvoltării limbajului acronimul venea de la Personal

Home Page.

PHP este un limbaj de scripting open source foarte răspândit

Scripturile PHP rulează pe server, faţă de cele JavaScript care

sunt executate de către navigatoarelel web

PHP se descarcă şi se utilizează în mod gratuit

Fişiere PHP

Fişierele PHP pot conţine text, elemente HTML, cod JavaScript

şi cod PHP

Codul PHP este executat pe server, iar rezutatul este returnat

către browser sub formă de HTML

Fişierele PHP au extensia implicită „.php”

- 73 -

Avantajele limbajului PHP

PHP rulează pe o varietate de platforme (Windows, Linux, Unix,

Mac OS X, etc.)

PHP este compatibil cu aproape toate serverele web de astăzi

(Apache, IIS, etc.)

PHP poate genera conţinut dinamic în paginile web

PHP poate crea, deschide, citi, scrie şi închide orice fişier de pe

server

PHP poate colecta date din formularele HTML

PHP poate trimite şi primi cookie-uri

PHP are suport pentru pentru o gamă largă de baze de date,

putând adăuga, şterge sau modifica datele dintr-o bază de date

PHP poate restricţiona accesul unor utilizatori la anumite pagini

dintr-un website

PHP poate cripta date

PHP is free. Download it from the official PHP resource:

www.php.net

PHP is easy to learn and runs efficiently on the server side

2. Instalarea PHP

PHP este gratuit şi se poate descărca de pe site-ul oficial de resurse PHP:

www.php.net .

Pentru instalarea extensiei PHP este necesară existenţa î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 uşurinţa utilizatorului care doreşte să înveţe cât mai repede limbajul

PHP, fără să se încurce în detaliile instalării pas cu pas a serverului web şi a

extensiilor sale, s-au pus la dispoziţia publicului pachete complete care

http://www.php.net/

- 74 -

instalează automat toate cele 3 componente: Apache, MySQL şi PHP; de

unde şi acronimul des utilizat, AMP.

Exemple de astfel de pachete sunt:

XAMPP: http://www.apachefriends.org/en/xampp.html . Pachetul

are versiuni pentru orice sistem de operare şi, pe lângă setul AMP,

mai vine şi cu extensia Perl, de aici şi ultimul P din denumire.

WampServer: http://www.wampserver.com/en/ . Pachet AMP

dedicat platformei Windows (de aici şi acronimul WAMP).

EasyPHP WebServer: http://www.easyphp.org/ . Pachet AMP

dedicat instalării unui server web complet pe platforma Windows.

Unele dintre aceste pachete conţin şi alte instrumente software foarte

utilizate (server mail - hMailServer, client/server FTP – FileZilla, etc.), iar

toate aceste pachete au inclus un instrument web-based larg utilizat pentru

gestiunea bazelor de date MySQL, denumit PhpMyAdmin

(http://www.phpmyadmin.net/ ).

După ce se instalează serverul AMP preferat, utilizând fişierul de instalare

inclus în fiecare pachet, fişierele website-urilor sunt puse pe directoare în

folderul numit HTDOCS sau WWW al serverului web.

Spre exemplu, în cazul instalării WampServer-ului, structura de directoare

este cea din figura 9.1.

Fig. 9.1. Structura de directoare a pachetului WampServer

http://www.apachefriends.org/en/xampp.html

http://www.wampserver.com/en/

http://www.easyphp.org/

http://www.phpmyadmin.net/

- 75 -

Pentru a putea fi afişat corespunzător în browser, orice website trebuie să

conţină un fişier de lansare, denumit INDEX, cu extensia „.html” sau

„.php”, fişier care trebuie să conţină structura paginii de start a website-ului.

Se lansează serverul web instalat pe PC-ul local, iar pentru accesarea paginii

de start a serverului se scrie în bara de adrese URL a browser-ului cuvântul

localhost. Aceasta deoarece PC-ul local are adresa IP 127.0.0.1, căruia îi

este alocat numele localhost.

Exemplu: sau

La lansare se va afişa rezultatul execuţiei scriptului index.php din rădăcina

serverului web instalat.

Pentru execuţia unui singur script, spre exemplu test.php se scrie în bara de

adrese: .

Structura unui fişier (script) PHP

Fişierele PHP pot conţine text, elemente HTML, cod JavaScript şi cod PHP.

Un script PHP începe cu <?php şi se termină cu ?>, astfel:

Comentariile sunt definite asemănător ca în JavaScript, pentru o linie se

foloseşte // (dublu-slash), iar pentru mai multe linii se foloseşte setul de

caractere /* … */ .

Un exemplu de fişier PHP este prezentat mai jos, în care apar comentarii şi

funcţia phpinfo():

- 76 -

Iar rezultatul parţial al execuţiei scriptului arată în browser astfel (fig. 9.2):

Figura 9.2. Afişare parţială a funcţiei phpinfo()

3. Variabile PHP

Variabilele reprezintă containere de stocat informaţii.

Reguli de scriere a variabilelor PHP:

o variabilă începe cu simbolul $, urmat de numele variabilei.

numele unei variabile începe obligatoriu cu o literă sau cu caracterul

underscore, _ .

- 77 -

numele variabilelor pot conţine doar caractere alfa-numerice şi

underscore (A-z, 0-9, şi _ ) şi nu va conţine spaţii goale.

numele de variabile sunt case-sensitive ($y şi $Y sunt două variabile

diferite).

Exemple de declarare a două variabile PHP, un string (şir de caractere) şi un

număr.

Din exemplu se poate observa, ca şi la JavaScript, că limbajul PHP nu are

definire explicită a tipurilor de date, ci converteşte automat o variabilă în

tipul corect de date în funcţie de valoarea asignată.

Domeniile de vizibilitate (accesibilitate) ale variabilelor PHP sunt:

local

global

static

parametru (argument)

Exemplu în care sunt prezentate toate domeniile de vizibilitate:

- 78 -

4. Operatori PHP

Ca în majoritatea limbajelor de programare şi PHP deţine o gamă

diversificată de operatori, în mare parte asemănători cu cei din limbajele

adiacente (C/C++, JAVA, JavaScript etc.).

Tabelul 9.1. Operatori aritmetici în PHP

Operator Descriere

x + y Adunare

x - y Scădere

x * y Înmulţire

x / y Împărţire

x % y Modulo

- x Negaţie

a . b Concatenare string-uri

Tabelul 9.2. Operatori de atribuire în PHP

Atribuire 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

Tabelul 9.3. Operatori de incrementare/decrementare în PHP

Operator Name Description

++ x Pre-incrementare Incrementează pe x cu 1, apoi

- 79 -

î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

Tabelul 9.4. Operatori de comparaţie în PHP

Operator Descriere

x == y Egalitate

x === y Egalitate (valoare şi tip

de date). Identitate

x != y Inegalitate. x diferit de y

x <> y Inegalitate. x diferit de y

x !== y Inegalitate (valoare şi tip

de date)

x > y Mai mare

x < y Mai mic

x >= y Mai mare sau egal

x <= y Mai mic sau egal

Tabelul 9.5. Operatori logici în PHP

Operator Descriere

x and y ŞI logic

x or y SAU logic

x xor y SAU exclusiv

x && y ŞI logic

- 80 -

x || y SAU logic

! x NOT (negaţie)

logică

Tabelul 9.6. Operatori pentru vectori (array) în PHP

Operator 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

În exemplul următor se definesc două variabile $x şi $y, asupra cărora se

aplică operatorii: +, -, *, /, ++, --. Pentru afişare s-a utilizat instrucţiunea

echo, care tipăreşte în fereastra navigatorului un anume conţinut.

- 81 -

Rezultatul execuţiei scriptului fiind următorul:

III. Modul de lucru

1. Să se descarce şi să se instaleze un pachet WAMP, la preferinţa

fiecăruia.

2. Să se creeze un folder myphp în care să inseraţi un fişier index.php

care să conţină următoarele:

a. un header H2 cu textul „Invatam PHP!”, o linie orizontală,

un paragraf oarecare.

b. 3 variabile: a=“Mihai”, b=”Soare”, c=”student”.

c. Afişarea mesajului „Mihai Soare este student la

Automatica.”

- 82 -

d. 2 variabile: m=40, n=20. Aplicaţi diverşi operatori asupra

celor 2 variabile m şi n.

3. Plasaţi folder-ul myphp în rădăcina directoarei de documente a

serverului web, htdocs sau www şi lansaţi website-ul, scriind în bara

de adrese a browser-ului web următorul text, apoi apăsaţi tasta Enter:

- 83 -


LUCRAREA NR. 10 :

Limbajul PHP – Instrucţiuni, funcţii predefinite şi funcţii definite

de utilizator, sesiuni PHP


1. Instrucţiuni PHP

2. Funcţii predefinite ale limbajului PHP

3. Funcţii definite de utilizator în PHP

4. Sesiuni PHP


1. Instrucţiuni PHP

a) INSTRUCŢIUNI CONDIŢIONALE

În limbajul PHP există următoarele instrucţiuni condiţionale:

instrucţiunea if – execută un cod numai dacă o condiţie este

îndeplinită (adevărată)

Sintaxă:

Exemplu:

- 84 -

instrucţiunea if...else - execută un cod o condiţie este adevărată şi

un alt set de instrucţiuni dacă condiţia este falsă

Exemplu:

instrucţiunea if...else if....else – selectează unul din mai multe seturi

de instrucţiuni pentru a fi executat

Sintaxa:

- 85 -

Exemplu:

instrucţiunea switch - selectează unul din mai multe seturi de

instrucţiuni pentru a fi executat

Sintaxa:

- 86 -

Exemplu:

b) INSTRUCŢIUNI DE CICLARE

Limbajul PHP conţine următoarele instrucţiuni de ciclare:

instrucţiunea while – ciclează executând un set de instrucţiunii cât

timp o condiţie este adevărată

Sintaxă:

- 87 -

Exemplu:

Afişarea în fereastra navigatorului este:

instrucţiunea do...while – execută o dată un set de instrucţiuni, apoi

repetă execuţia cât timp o condiţie este adevărată

Sintaxa:

Exemplu:

- 88 -

instrucţiunea for – ciclează executând un set de instrucţiuni timp de

un număr de ori specificat

Sintaxa:

Parametri:

- init: de obicei, iniţializarea unui contor (dar poate fi orice cod de

executat înaintea începerii buclei).

- conditie: se evaluează la fiecare iteraţie. Dacă este addevărată, bucla

continuă, iar dacă este falsă ciclul execuţiei se opreşte.

- increment: de obicei, incrementarea unui contor (dar poate fi orice

cod de executat la sfârşitul fiecărei iteraţii).

Parametrii init şi conditie pot să lipsească din instrucţiune sau pot avea

expresii multiple, separate prin virgulă.

Exemplu:

instrucţiunea foreach – ciclează execuţia unui set de instrucţiuni

pentru fiecare element dintr-un vector (array)

Sintaxa:

- 89 -

Exemplu:

Cod PHP Afişare

2. Funcţii predefinite ale limbajului PHP

Principalele categorii de funcţii predefinite (built-in) ale limbajului PHP

sunt:

funcţii Array

funcţii Calendar

funcţii Date

funcţii Directory

funcţii Error

funcţii Filesystem

funcţii Filter

funcţii FTP

funcţii HTTP

funcţii LibXML

funcţii Mail

funcţii Math

funcţii Misc

funcţii MySQLi

funcţii SimpleXML

- 90 -

funcţii String

funcţii XML Parser

funcţii Zip

Limbajul PHP este larg utilizat datorită competitudinii sale privind

dezvoltarea de aplicaţii web pentru orice domeniu de cercetare şi dezvoltare.

Pentru a împlini acest deziderat, dezvoltatorii limbajului au conceput un

număr foarte mare de funcţii, care să rezolve problemele utilizatorilor şi

dezvoltatorilor de aplicaţii web.

Spre exemplu, numai în categoria Array există 77 de funcţii (sursa:

www.php.net ).

Deoarece nu pot fi aprofundate toate funcţiile limbajului, se vor prezenta

exemple pentru funcţii larg utilizate în aplicaţiile web.

Funcţii ARRAY

Vom folosi pentru afişarea tablourilor (uni/multi-dimensionale) o funcţie

print_r() puţin modificată, pentru un aspect îmbunătăţit al rezultatelor

afişate în fereastra navigatorului web. Funcţia o vom numi print_r2() şi are

definiţia următoare:

De asemenea, pentru afişarea sub formă de listă a unui vector, vom defini o

funcţie utilizator, denumită echo_r(), având forma:

http://www.php.net/

- 91 -

Exemplu de sortare a unui vector (tablou unidimensional, array) de

elemente în ordine ascendentă (alfabetic sau numeric):

Cod PHP Afişare

Exemplu pentru definirea unui tablou multidimensional, cu 3 coloane.

Elementele tabloului sunt numere generate aleator cu funcţia rand():

- 92 -

În browser se va afişa un tabel de 3 coloane şi mai multe linii, celulele fiind

completate cu valori generate aleator:

- 93 -

Exemplu de utilizare a funcţiilor array_push() şi array_pop(), prima

inserează elemente noi automat în tablou, cealaltă elimină doar ultimul

element din tablou:

Cod PHP Afişare

Funcţii DATE

- 94 -

În această categorie sunt funcţiile de prelucrare a datelor calendaristice şi a

timpilor de ceas.

O funcţie des utilizată este date(). Exemplu multiplu pentru funcţia date():

În fereastra browser-ului se va afişa:

Un alt exemplu în care aflăm câte zile au trecut de la o anumită dată (de

exemplu, de la începutul anului):

Iar rezultatul afişat în browser este:

Funcţii DIRECTORY

Aceste funcţii permit preluarea de informaţii privitoare la directoare şi

conţinutul acestora.

- 95 -

Spre exemplificare, citim conţinutul unui director de imagini, images şi îl

afişăm pe ecran:

Cod PHP Afişare

Funcţii FILESYSTEM

Aceste funcţii permit gestionarea sistemului de fişiere. Se pot crea fişiere,

şterge, deschide, actualiza, închide etc.

În exemplul următor, deschidem un fisier existent şi adăugăm un mesaj la

sfârşitul lui:

- 96 -

Funcţii MATH

Funcţiile matematice pot prelucra atât valori întregi, cât şi valori reale.

Pentru exemplificare prezentăm un script care returnează valorile funcţiilor

Sinus şi Cosinus pentru unghiurile 0, 30, 45, 60 şi 90:

- 97 -

Rezultatul afişat în fereastra browser-ului va arăta astfel:

Funcţii STRING

Funcţiile STRING sunt unele din cele mai utilizate funcţii PHP. Ele permit

prelucrarea şirurilor de caractere (strings) în mai multe feluri.

Exemplu de funcţie care caută un subşir într-un şir dat, specificând

delimitatoare de început şi sfârşit:

- 98 -

Vom mai prezenta în altă lucrare de laborator funcţii MySQL, foarte

utilizate şi utile în prelucrarea informaţiilor dintr-o bază de date.

3. Funcţii definite de utilizator în PHP

Pe lângă funcţiile predefinite ale PHP, dezvoltatorii de aplicaţii îşi pot defini

propriile funcţii utilizator, care uşurează mult organizarea codului PHP.

Sintaxa:

Spre exemplificare, prezentăm o funcţie recursiv():

Rezultatul afişat în browser este: 5 6 7 8 9.

- 99 -

4. Sesiuni PHP

O sesiune reprezintă o modalitate prin care PHP reţine informaţii de la o

pagină la alta.

Odată cu iniţializarea unei sesiuni, utilizatorul poate păstra anumite

variabile, chiar dacă în continuare vizitează şi alte pagini ale website-ului. În

principiu informaţia se păstrează până la închiderea browser-ului, sau până

când utilizatorul distruge în mod intenţionat sesiunea 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 funcţia session_start(), care obligatoriu trebuie să fie

poziţionată înaintea etichetei <HTML>.

Un exemplu de script PHP care păstrează într-o sesiune o variabilă în care

se contorizează de câte ori este vizualizată pagina curentă. Funcţia isset()

este larg utilizată în PHP, folosindu-se la testarea dacă o variabilă este

setată. la afişare, variabila views poate avea o valoare diferită de cea de mai

jos, în funcţie de câte ori s-a accesat pagina web.

Cod PHP Afişare

Terminarea unei sesiuni se realizează în două moduri:

utilizând funcţia unset(), care iniţializează (goleşte) o variabilă

memorată în sesiune:

- 100 -

apelând funcţia session_destroy(), care distruge complet sesiunea:

III. Modul de lucru

1. Creaţi un script PHP în care să înmulţiţi două matrici (3x3), utilizând

tablou (array) 3-dimensional.

2. Să se scrie un script PHP care să calculeze vârsta dvs. în luni,

săptămâni, 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. Creaţi un script PHP în care să folosiţi cât mai multe funcţii

STRING (concatenare, split, explode, implode, join, substr etc...).

5. Să se scrie un script în care să ordonaţi un şir dezordonat. Memoraţi

variabilele temporare într-o sesiune PHP.

6. Utilizaţi pentru toate scripturile cât mai multe funcţii definite de

utilizator.

- 101 -


LUCRAREA NR. 11 :

Limbajul PHP – Prelucrarea datelor dintr-un formular utilizând

limbajul PHP


1. Variabilele superglobals

2. Validarea formularelor cu scripturi PHP utilizând variabilele vector

$_GET şi $_POST


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 execuţiei unui script.

Variabilele superglobals sunt:

$GLOBALS: permite acces la toate variabilele declarate global

$_SERVER: oferă informaţii despre server şi mediul de execuţie

$_GET: un vector asociativ cu variabilele pasate către scriptul

curent prin parametri URL

$_POST: un vector asociativ cu variabilele pasate către scriptul

curent prin metoda HTTP POST

$_FILES: un vector asociativ cu fişierele încărcate (prin upload) în

scriptul curent prin metoda HTTP POST

$_COOKIE: un vector asociativ cu variabilele pasate către scriptul

curent cu ajutorul Cookie-urilor HTTP

- 102 -

$_SESSION: un vector asociativ cu variabilele de sesiune

disponibile în scriptul curent

$_REQUEST: un vector asociativ care implicit conţine variabilele

din $_GET, $_POST şi $_COOKIE

$_ENV: un vector asociativ cu variabilele de mediu (HOSTNAME,

COMPUTERNAME, USER etc...)

2. Validarea formularelor cu scripturi PHP utilizând variabilele vector

$_GET şi $_POST

Un lucru important în prelucrarea formularelor HTML prin cod PHP constă

în faptul că orice element al formularului va fi în mod automat disponibil şi

accesibil în scripturile PHP.

Exemplu de formular HTML care conţine două câmpuri de introducere text

şi un buton de validare, formular prelucrat prin scriptul „validare.php”.

Codul HTML este:

Scriptul PHP care procesează formularul de mai sus este:

În funcţie de ce date sunt introduse în formular, rezultatul procesării datelor

este afişat în fereastra browser-ului astfel, spre exemplu:

Formularul HTML Rezultatul execuţiei

- 103 -

a) Metoda GET

Utilizează variabila superglobală $_GET, care reprezintă un vector

asociativ cu variabilele (datele) pasate către scriptul curent prin parametrii

adresei URL.

Variabila $_GET colectează datele dintr-un formular utilizând expresia

method=”get” în cadrul etichetei <FORM>.

Sintaxă:

Informaţiile transmise de la un formular prin metoda GET sunt vizibile

tuturor (vor fi afişate în bara de adrese URL a browser-ului web) şi sunt

limitate ca volum de date ce pot fi trimise.

Prezentăm exemplul anterior, dar de data aceasta datele sunt trimise prin

metoda GET.

Codul HTML al formularului este:

La apăsarea butonului de validare denumit „Trimite cu GET”, în bara de

adrese URL a navigatorului va apare ceva de genul:

- 104 -

Scriptul PHP care procesează formularul de mai sus este prezentat mai jos,

în care numele câmpurilor din formular devin automat chei pentru vectorul

asociativ $_GET:

În funcţie de ce date sunt introduse în formular, rezultatul procesării datelor

este afişat în fereastra browser-ului astfel, spre exemplu:


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.

Totuşi, 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 nimănui şi nu au limite

referitor la volumul de informaţii transmise.

- 105 -

Notă

Referitor la volumul de date transmis, există totuşi o limitare (implicită de

8MB) pentru metoda POST, valoare ce poate fi modificată prin setarea

parametrului post_max_size din fişierul php.ini, fişierul de configurare

PHP).

Exemplu, codul HTML:

Bara de adrese URL va arăta astfel:

Scriptul validare.php pentru procesarea datelor prin POST este următorul:

Rezultatul procesării datelor este următorul, spre exemplu:


- 106 -

Pe lângă variabilele $_GET şi $_POST, limbajul PHP mai conţine şi

variabila vector asociativ $_REQUEST, care poate colecta datele trimise

atât prin metoda GET cât şi prin metoda POST.

Exemplu:

c) Variabila $ _COOKIE

COOKIE-ul reprezintă un mic fişier pe care un server îl salvează în

calculatorul utilizatorului. Este utilizat deseori pentru identificarea unui

utilizator. Ori de câte ori pagina web este apelată de pe acelaşi PC, sunt

trimise şi cookie-urile. Acestea expiră după o perioadă setată la crearea lor.

Prin script PHP se pot atât crea cât şi primi valori cookie.

Crearea cookie-urilor

Pentru a crea un cookie se foloseşte funcţia setcookie() sau setrawcookie()

(fără codificare URL), care trebuie să apară înainte de eticheta <HTML>.

Sintaxa:

În exemplul următor creăm un cookie denumit „user”, căruia îi atribuim

valoarea „Alex Vovu” şi un timp de expirare de o oră:

Perioada de expirare este în secunde, dar poate fi modificată prin calcule

matematice pentru a obţine zile, săptămâni, luni etc.

Un alt exemplu, în care setăm perioada de expirare sub altă formă, mai

lizibilă, spre exemplu pentru o lună (60sec*60min*24ore*30zile) avem:

Obţinerea valorilor cookie

- 107 -

Pentru a primi o valoare cookie se foloseşte variabila $_COOKIE, care şi ea

este un vector asociativ (cheie valoare).

Spre exemplu pentru cookie-urile următoare:

folosim scriptul de mai jos pentru a obţine valorile cookie şi avem rezultatul

următor:

Scriptul PHP Rezultatul execuţiei

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 obţine:

Scriptul PHP Rezultatul execuţiei

- 108 -

Dacă dorim obţinerea valorii pentru cookie-ul „user” serverul ca returna o

eroare de forma:

În cazul în care un browser nu suportă COOKIE-uri, pentru transmiterea

informaţiilor se vor utiliza formularele HTML şi metodele GET şi POST.

III. Modul de lucru

1. Să se creeze o pagină web care să conţină un formular de contact cu

următoarele câmpuri:

nume şi prenume

adresă e-mail

telefon

întrebare

buton de validare

2. Să se creeze următoarele scripturi PHP:

un script „procesareGet.php” care să prelucreze datele din

formular obţinute prin metoda GET.

un script „procesarePost.php” prin care datele din formular

să fie procesate prin metoda POST.

un script „procesareCookie.php”care să prelucreze datele din

formular utilizând cookie-uri.

- 109 -


LUCRAREA NR. 12 :

Limbajul PHP – Prelucrarea datelor dintr-o bază de date MYSQL

cu ajutorul limbajului PHP


1. Baze de date MySQL

2. Funcţii PHP pentru baze de date MySQL

3. Operaţii clasice cu înregistrările dintr-o bază de date (adăugare,

modificare, ştergere) utilizând scripturi PHP şi formulare HTML.

Studiu de caz.


1. Baze de date MySQL

MySQL este un sistem de gestiune a bazelor de date relaţionale (SGBDR,

eng.- Relational DataBase Management System, RDBMS) foarte avansat şi

larg utilizat în milioane de aplicaţii web şi nu numai.

Sistemul are la bază limbajul SQL (Structured Query Language), dedicat

manipulării datelor dintr-o bază de date relaţională.

O bază de date relaţională lucrează cu entităţi şi relaţii între entităţi.

Entităţile sunt date de tabele, iar relaţiile se construiesc pe baza

identificatorilor unici din fiecare tabel.

Pentru a putea rula aplicaţii cu baze de date MySQL, este necesară

instalarea serverului de baze de date MySQL şi a extensiei sale pentru

limbajul PHP. Pachetele AMP (Apache-MySQL-PHP) instalează automat

atât serverul MySQL, cât şi extensia sa pentru PHP.

Mai mult, pentru gestionarea uşoară a bazelor de date, pachetele AMP oferă

şi utilitarul phpMyAdmin, fiind o aplicaţie web-based la îndemâna oricărui

dezvoltator, creată utilizând chiar limbajul PHP.

- 110 -

Pentru lucrarea de faţă s-a instalat pachetul WampServer cu toate

componentele sale necesare dezvoltării de website-uri şi aplicaţii web care

lucrează şi cu baze de date MySQL.

Pentru studiul nostru de caz, s-a creat în MySQL, utilizând phpMyAdmin o

bază de date denumită baza_date în care s-au creat 2 tabele, cars şi fructe,

fig. 12.1.

Figura 12.1. Interfaţa phpMyAdmin

Vom proceda la prezentarea doar a tabelului cars. Structura acestuia este

prezentată în fig. 12.2, utilizând tot phpMyAdmin. Cheia primară, unică

(primary key), care identifică în mod unic orice înregistrare este car_ID, ale

cărei valori sunt automat incrementate, pentru uşurinţa de lucru.

Figura 12.2. Structura tabelului cars

- 111 -

Prin interfaţa phpMyAdmin se pot, de asemenea, crea, modifica şi şterge

înregistrări din tabele. În fig. 12.3 se prezintă tabelul cars în modul Browse,

adică de vizualizare a înregistrărilor.

Figura 12.3. Vizualizarea conţinutului unui tabel în phpMyAdmin

Toate elementele bazei de date prezentate sunt create şi modificate de

serverul MySQL, utilitarul phpMyAdmin fiind doar o interfaţă PHP care

uşurează mult munca dezvoltatorilor, aducând într-un singur loc toate

operaţiunile necesare şi oferind un mediu vizual bine construit pentru

accesul la orice operaţiune de baze de date.

Prin simpla apăsare de butoane, phpMyAdmin este capabil, pe lângă

execuţia imediată a unei operaţiuni, să genereze cod SQL şi chiar cod PHP,

care ulterior poate fi inserat în codul unui script dintr-o pagină web.

Aceste avantaje, pe lângă securitatea pe care o oferă, au făcut ca

phpMyAdmin să fie utilizat de majoritatea furnizorilor de servicii de

găzduire web în întreaga lume pentru gestiunea bazelor de date MySQL.

Începând cu MySQL versiunea 4.1.13 şi cu PHP versiunea 5.0.0, s-a lansat

extensia MySQLi, adică MySQL Improved (MySQL Îmbunătăţit), care

adaugă la vechea extensie îmbunătăţiri precum interfaţă orientată obiect,

tranzacţii sau debugging (depanare) îmbunătăţit.

Funcţiile MySQLi diferă faţă de cele MySQL standard prin adăugarea

caracterului ’i’.

Exemplu: mysql_connect() faţă de mysqli_connect().

- 112 -

2. Funcţii PHP pentru baze de date MySQL

Se prezintă în continuare principalele funcţii PHP de lucru cu MySQL.

funcţiile mysql_connect(), mysql_close(), mysql_error() şi

mysql_select_db():

Oferă conectarea unui utilizator la o bază de date MySQL.

Sintaxă de bază:

Pentru a putea depana uşor erorile la conectare, se foloseşte un script puţin

mai complex, ca de exemplu cel de mai jos:

Acest script se va include în toate celelalte scripturi, prin funcţia

require_once(), funcţie ce permite inserarea unui script extern în interiorul

altui script. Este echivalentă cu funcţiile require(), include() şi

include_once().

Paşii sunt următorii:

a) se execută funcţia mysql_connect(). La apariţia vreunei erori,

aceasta este semnalată cu ajutorul funcţiei die() care termină

execuţia scriptului şi a funcţiei mysql_error() care va specifica

cauza erorii. Dacă nu sunt erori, conexiunea la server MySQL va

fi realizată cu succes.

b) După conectare se selectează baza de date necesară pentru lucrul

curent, prin funcţia mysql_select_db(), pentru care iarăşi se

- 113 -

folosesc funcţiile die() şi mysql_error() în caz de erori la selecţie

bază de date.

Pentru a nu întâmpina erori, e necesar ca parametrii de conectare (serverul,

utilizatorul şi parola) să fie configuraţi corect şi accesibili.

Este foarte recomandat, din motive de securitate, ca la finalul oricărui script

ce a deschis conexiunea la serverul MySQL, aceasta să fie încheiată prin

funcţia mysql_close(), pentru a nu permite vreunui intrus neinvitat să

compromită bazele de date existente.

După realizarea cu succes a conexiunii la server şi selectarea bazei de date

de lucru, se procedează la prelucrarea datelor din tabelele bazei de date.

funcţiile celelalte de lucru cu informaţiile din baza de date se vor

descrie în prezentarea studiului de caz de la punctul 3.

3. Operaţii clasice cu înregistrările dintr-o bază de date (adăugare,

modificare, ştergere) utilizând scripturi PHP şi formulare HTML.

Studiu de caz: Aplicaţie prezentare AUTOTURISME.

Pentru studiul de caz, s-a ales prezentarea informaţiilor legate de

autoturisme. Aceste informaţii pot fi modificate, şterse sau adăugate unele

noi.

i. Pagina de prezentare autoturisme

Datele sunt preluate din baza de date baza_date creată în MySQL, din

tabelul cars, codul paginii principale (prezentare autoturisme) fiind

următorul:

- 114 -

- 115 -

Afişarea în navigatorul web este prezentată în fig. 12.4, într-o formă foarte

simplă şi usor de gestionat datele.

- 116 -

Figura 12.4. Aplicaţia de prezentare autoturisme, pagina prezentare

Din codul primei pagini (index.php) a aplicaţiei se observă utilizarea

următoarelor funcţii noi:

funcţia mysql_query()

Această funcţie realizează o interogare (execuţie a unui cod SQL) asupra

unei bazei de date MySQL. Interogarea (query) trebuie specificată fie direct

în funcţie (între ghilimele simple sau duble), fie anterior într-o variabilă

oarecare, variabilă ce trebuie trimisă apoi ca argument funcţiei

mysql_query(), ca în exemplul nostru:

funcţia mysql_fetch_assoc()

Această funcţie primeşte ca parametru rezultatul execuţiei unei interogări şi

returnează un rând din tabelul cu înregistrări sub formă de vector asociativ.

După execuţia cu succes, se pot accesa imediat elementele vectorului (datele

din tabelul cars), ca în exemplul nostru:

- 117 -

ii. Pagina de inserare autoturism nou

Pentru operaţiunea de introducere a unui autoturism nou s-a creat formularul

următor:

Valorile introduse în câmpurile formularului vor fi transmise (la apăsarea

butonului „Salveaza”) către scriptul save_cars.php, care va salva datele noi

în tabelul cars. Fig. 12.5 prezintă formularul din exemplul nostru.

- 118 -

Figura 12.5. Pagina de introducere a unui autoturism nou

Conţinutul scriptului save_cars.php este prezentat mai jos. Se poate observa

că s-a utilizat numai funcţia mysql_query(), însă interogarea SQL nu mai

este de tip selecţie, ci de inserare a unei înregistrări într-un tabel.

- 119 -

iii. Pagina de modificare date autoturism

A treia operaţiune des întâlnită în prelucrarea datelor dintr-o bază de date

este cea de modificare sau ştergere a unei înregistrări dintr-un tabel. Pentru

aceasta se va folosi neapărat o interogare SQL de tip actualizare tabel

(UPDATE) sau de tip ştergere (DELETE) specificând înregistrarea

respectivă.

Pentru studiul nostru de caz, pagina de modificare constă dintr-un formular

în ale cărui câmpuri sunt trecute automat valorile transmise la apăsarea

butonului „Edit” din pagina de prezentare autoturisme.

- 120 -

Figura 12.6 prezintă interfaţa de modificare a datelor unui autoturism.

- 121 -

Figura 12.6. Pagina de editare informaţii autoturism

Sunt preluate datele direct din baza de date, din tabelul cars pentru

înregistrarea cu ID-ul corect transmis la apăsarea butonului „Edit”. În

această pagină de modificare informaţii autoturisme, la apăsarea butonului

„Modifica masina” datele din formular vor fi transmise scriptului

save_cars2.php, prezentat în continuare şi în urma cărei execuţii datele se

vor salva în baza de date MySQL.

De asemenea, la apăsarea butonului „Sterge masina” se va apela acelaşi

script save_cars2.php, în care, printr-o interogare SQL de ştergere

(DELETE), se va şterge înregistrarea din baza de date.

- 122 -

Dacă scripturile sunt scrise corect, la execuţia oricărei operaţii din cele

prezentate mai sus se vor semnala mesaje de succes şi se vor realiza

modificări asupra bazei de date MySQL.

Limbajul PHP mai conţine o gamă foarte extinsă de funcţii pentru lucrul cu

bazele de date MySQL, iar cei care doresc aprofundarea acestor aspecte sunt

îndemnaţi să consulte bibliografia de la finele îndrumarului de laborator.

- 123 -

III. Modul de lucru

1. Să se realizeze dezvoltarea aplicaţiei de prezentare autoturisme

descrisă în această lucrare de laborator.

2. Să se dezvolte o aplicaţie asemănătoare, având ca subiect orice

domeniu la alegere (legume, fructe, oraşe, magazine etc.)

- 124 -


LUCRAREA NR. 13 :

Crearea de conţinut dinamic animat utilizând Adobe FLASH şi

limbajul ActionScript


Crearea unui meniu orizontal în programul Adobe FLASH


Crearea unui meniu orizontal în programul Adobe FLASH

Programul Flash dezvoltat iniţial de compania Macromedia iar apoi de

Adobe este extrem de utilă în dezvoltarea animaţiilor web. Domeniul

animaţiilor pe internet a cunoscut un mare progres în ultimii ani, datorită

cererii tot mai mari a jocurilor online şi a conţinutului dinamic tip animaţie

în majoritatea website-urilor.

Adobe Flash este un program proprietar, adică pentru utilizarea sa este

necesară achiziţia unei licenţe contra cost. Pentru detalii vizitaţi

http://www.adobe.com .

Componetele aplicaţiei Flash sunt:

o fereastră de lucru (scenă) în care se plasează obiectele animaţiei;

o linie de timp (timeline) pentru controlul animaţiilor cu ajutorul

cadrelor (frames);

O bară de instrumente în partea stângă, conţinând elementele de

lucru de bază (forme, instrumente de decupat etc.);

O gamă largă de panouri pentru diverse operaţiuni aplicate animaţiei

(transformare, aliniere, librărie cu simboluri, culori etc.);

un meniu principal de unde se pot executa operaţiunile necesare.

http://www.adobe.com/

- 125 -

Figura 13.1 prezintă fereastra aplicaţiei Adobe Flash CS3, în care se pot

evidenţia unele din componentele programului (linia de timp, bara de

instrumente, fereastra de lucru, meniul principal).

Figura 13.1. Fereastra programului Adobe Flash CS3 Professional

Printre animaţiile cel mai des întâlnite se află şi meniurile create în Flash,

datorită aspectului mult îmbunătăţit al prezentării acestuia.

Pentru crearea unui meniu orizontal în Flash, trebuie urmaţi paşii următori:

a) Se creează tipul de buton pentru opţiunile meniului şi se generează

câte un astfel de buton pentru fiecare opţiune, asociindu-se un text

drept nume al opţiunii de meniu.

Un buton web poate avea următoarele stări:

UP – buton neapăsat

OVER – când mouse-ul glisează deasupra butonului

DOWN – buton apăsat, dar neridicat

HIT – specifică zona în care butonul este activ

- 126 -

În exemplul nostru dorim să modificăm aspectul butoanelor meniului,

funcţie de fiecare stare a lor. În figura 13.2 se observă cum au fost desenate

stările UP, OVER şi DOWN, având forme dreptunghiulare cu colţurile puţin

rotunjite şi de culori diferite.

UP OVER DOWN

Figura 13.2. Proiectarea stărilor unui buton web în Flash

b) În fereastra de bază a programului Flash se plasează orizontal (sau

vertical în cazul meniului vertical), unul după altul butoanele create,

câte un buton pe layer.

Pentru uşurinţa aşezării aliniate se poate utiliza panoul Align, care permite

alinierea elementelor în scenă relativ fie la alte elemente, fie la scenă. În fig.

13.3 se prezintă meniul orizontal alcătuit din cele 3 butoane.

Figura 13.3. Meniu orizontal proiectat în Flash

- 127 -

c) Pasul următor constă în asignarea fiecărui buton câte o adresă URL,

către care să navigheze utilizatorul prin apăsarea lui.

Pentru acest scop s-au creat 3 pagini web simple: produse.html,

downloads.html şi suport.html. Conţinutul acestor pagini web nu este

relevant; scopul nostru este ca cele 3 butoane să direcţioneze către cele 3

pagini web.

Ca să realizăm lucrul acesta se apelează la cod ActionScript (limbajul de

scripting al programului Flash). Cu ActionScript, utilizatorul unei aplicaţii

Flash poate manipula mult mai dinamic elementele din aplicaţie, limbajul

ajutând la automatizarea diverselor operaţiuni des utilizate în cadrul

aplicaţiilor web de tip Flash.

Pentru meniul nostru, după ce am aliniat butoanele în poziţiile dorite, câte

un buton pe layer, se selectează cadrul (frame-ul) fiecărui buton şi se aplică

o acţiune ActionScript, adică se adaugă un cod ActionScript care va fi

executat în momentul rulării cadrului respectiv.

Fiecărui buton din meniul nostru i s-a înscris codul următor, fig. 13.4, în

care, la eliberarea butonului apăsat se va apela funcţia getURL() primind ca

parametru pagina web corespunzătoare.

- 128 -

Figura 13.4. Aplicarea unui cod ActionScript pentru fiecare buton

d) După proiectarea butoanelor meniului şi a acţiunilor acestora, se

procedează la publicarea (publish) meniului Flash, accesând

opţiunea de meniu File Publish. Setările de publicare (frame rate,

calitatea JPEG a imaginilor create etc.) pot fi modificate după

preferinţele utilizatorului accesând opţiunea File Publish

Settings...

În urma publicării, se generează următoarele fişiere:

un fişier html, meniu.html (în cazul nostru), al cărui cod principal

constă dintr-un element HTML <OBJECT>, ca cel de mai jos:

- 129 -

Se pot observa diverşi parametri Flash (dimensiune, calitate etc.) şi, cel mai

important, parametrul movie şi embed care conţin animaţia noastră (meniul

orizontal) meniu.swf. Orice animaţie are extensia implicită “.SWF”.

La încărcarea fişierului meniu.html în fereastra browser-ului web se va

încărca automat şi animaţia, meniul orizontal, ca în figura 13.5. Se poate

observa că la glisarea mouse-ului deasupra unui buton, acesta îşi schimbă

culoarea de fundal.

Figura 13.5. Afişarea meniului Flash în fereastra navigatorului web;

butonul “Downloads” este în starea în care mouse-ul glisează deasupra lui

- 130 -

al doilea fişier este animaţia însăşi (filmul), meniu.swf, care conţine

meniul orizontal compilat cu tehnologia Flash, în urma publicării.

iar al treilea fişier este un script JavaScript, generat pentru orice

animaţie Flash, denumit AC_RunActiveContent.js, în care sunt

definiţi parametrii Flash apelaţi în elementul <OBJECT>.

La apăsarea oricărui buton din meniul Flash, browser-ul va încărca pagina

web corespunzătoare opţiunii de meniu. Astfel, utilizând tehnologia de

animaţie Flash, s-a obţinut un meniu orizontal într-un timp foarte scurt şi

având un aspect plăcut.

Cu ajutorul programului Adobe Flash se pot crea animaţii mult mai

avansate, banere, logo-uri, reclame, filme de desene animate, obiecte în

mişcare acţionate de utilizator etc., toate acestea conducând la o experienţă

web dinamică şi neplictisitoare.

III. Modul de lucru

1. Să se creeze un meniu vertical, asemănător celui din lucrarea de

laborator, creându-se alte efecte pentru stările butoanelor meniului

decât cele utilizate.

2. Să se creeze următoarele obiecte:

a. un baner web, conţinând o imagine în fundal şi un text titlu în

mişcare;

b. un logo rotitor, conţinând o imagine de dimensiuni reduse

(50x50 pixeli).

3. Să se încadreze toate aceste obiecte Flash într-o singură pagină web,

poziţionându-le în diverse locuri după preferinţe.

- 131 -


LUCRAREA NR. 14 :

Tehnologii web avansate. Biblioteca JavaScript jQuery, CMS,

web framework-uri


Prezentarea succintă a unor tehnologii web avansate:

a) jQuery

b) web CMS


a) jQuery

jQuery reprezintă o librărie scrisă în limbajul JavaScript, de dimensiuni

foarte mici. Scopul acestei librării este acela de a uşura scrierea şi utilizarea

codurilor JavaScript în paginile web.

jQuery preia majoritatea sarcinilor obişnuite pentru care în JavaScript ar

trebui scrise multe linii de cod pentru a le îndeplini, şi apoi le împachetează

în metode (funcţii) apelabile chiar şi printr-o singură linie de cod.

De asemenea, jQuery simplifică multe din lucrurile complicate obţinute cu

JavaScript, cum ar fi apelurile AJAX (Asynchronous JavaScript and XML)

şi manipularea obiectelor DOM.

Caracteristicile librăriei jQuery sunt următoarele:

manipularea HTML/DOM

manipularea CSS

metode pentru evenimentele HTML

efecte şi animaţii

AJAX (Asynchronous JavaScript and XML)

diverse utilitare.

- 132 -

Un avantaj major constă în faptul că dezvoltatorii acestei librării (sau

framework) JavaScript au ţinut neapărat ca ea să fie compatibilă cu aproape

toate browser-ele web. jQuery va rula exact la fel în majoritatea

navigatoarelor web principale, inclusiv Internet Explorer 6.

Instalarea jQuery

Librăria poate fi inclusă într-o pagină web în două moduri:

descărcând librăria de pe site-ul jQuery.com, şi adăugând-o manual

atât în structura de directoare a website-ului, cât şi referirea către

aceasta în secţiunea <HEAD> a paginii cu elementul <SCRIPT>:

incluzând librăria printr-o reţea CDN (Content Distribution

Network), cum ar fi cea de la Google, tot în secţiunea HEAD:

Deoarece jQuery conţine multe funcţii, ne limităm la a prezenta un exemplu

de utilizare a acestui minunat framework JavaScript.

Animaţii tip apare/dispare.

Cod jQuery Efect în browser

Iniţial şi după apăsare „Arată”:

- 133 -

După apăsare „Ascunde”:

b) web CMS

Un web CMS (Content Management System pentru web, Sistem de gestiune

a conţinutului web) reprezintă o aplicaţie web care permite publicarea,

editarea şi modificarea de conţinut, cât şi mentenanţa unui website sau

aplicaţie dintr-o interfaţă centrală.

Prezentăm pe scurt cele mai larg utilizate CMS-uri web actuale şi gratuite:

WordPress este cel mai popular CMS. Iniţial a fost dezvoltat drept

un CMS pentru crearea şi editarea blog-urilor, dar a fost adaptat

astfel încât a devenit un web CMS pe deplin dezvoltat. WordPress

are şi suport pentru limba română şi se poate obţine de la adresa:

http://wordpress.org/ sau http://ro.wordpress.org/

Joomla! reprezintă un alt web CMS foarte răspândit, care poate fi

utilizat pentru crearea şi editarea uşoară a paginilor web, însă este

mult mai complex decât WordPress. Joomla se poate descărca de la

adresa URL: http://www.joomla.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

învăţat şi înţeles decât 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/ .

http://wordpress.org/

http://ro.wordpress.org/

http://www.joomla.org/

http://drupal.org/

- 134 -

Pe lângă aceste 3 CMS-uri larg răspândite şi distribuite în mod gratuit, mai

există multe altele, free sau proprietare, utilizate chiar şi de marile companii

guvernamentale sau private din întreaga lume.

III. Modul de lucru

Să se încerce personal ca temă de casă, descărcarea şi instalarea unuia din

cele 3 CMS-uri descrise în lucrare şi să se creeze un website explicit prin

CMS-ul instalat.

- 135 -

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,

Bucureşti, 2001.

[4]. Internet: http://www.w3schools.com

[5]. Internet: http://www.php.net

[6]. Internet: http://www.javascriptkit.com

http://www.w3schools.com/

http://www.php.net/

http://www.javascriptkit.com/

Date post:	28-Oct-2021
Category:	Documents
Upload:	others
View:	7 times
Download:	0 times

UNIVERSITATEA HYPERION DIN BUCUREŞTI FACULTATEA DE …

Documents