universitatea hyperion din bucureŞti facultatea de …
Post on 28-Oct-2021
7 Views
Preview:
TRANSCRIPT
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 -
<h5>Titlu 5</h5> Titlu 5
<h6>Titlu 6</h6> Titlu 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 -
TEHNOLOGÎÎ WEB - Î ndrumar de laborator
LUCRAREA NR. 2 :
Limbajul HTML – Imagini, legături, liste, tabele
I. Tematica lucrării
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
II. Teoria lucrării de laborator
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 -
TEHNOLOGÎÎ WEB - Î ndrumar de laborator
LUCRAREA NR. 3 :
Limbajul HTML – Cadre, formulare
I. Tematica lucrării
1. Lucrul cu cadre în paginile web
2. Generarea formularelor HTML
II. Teoria lucrării de laborator
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 -
TEHNOLOGÎÎ WEB - Î ndrumar de laborator
LUCRAREA NR. 4 :
Limbajul CSS – Introducere, tipuri de formatare CSS, formatări
de bază
I. Tematica lucrării
1. Ce reprezintă CSS? Sintaxa CSS
2. Formatarea elementelor de fundal, text, font, legături web, liste,
tabele şi imagini utilizând limbajul CSS.
II. Teoria lucrării de laborator
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 -
TEHNOLOGÎÎ WEB - Î ndrumar de laborator
LUCRAREA NR. 5 :
Limbajul CSS – Formatări avansate CSS
I. Tematica lucrării
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
II. Teoria lucrării de laborator
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 -
TEHNOLOGÎÎ WEB - Î ndrumar de laborator
LUCRAREA NR. 6 :
Limbajul JAVASCRIPT – Introducere, variabile, tipuri de date şi
operatori
I. Tematica lucrării
1. Ce este JAVASCRIPT?
2. Variabile şi tipuri de date în JavaScript
3. Operatori în JavaScript
4. Exemplu de program JavaScript
II. Teoria lucrării de laborator
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 -
TEHNOLOGÎÎ WEB - Î ndrumar de laborator
LUCRAREA NR. 7 :
Limbajul JAVASCRIPT – Instrucţiuni, funcţii predefinite şi
funcţii definite de utilizator
I. Tematica lucrării
1. Instrucţiuni în JavaScript
2. Funcţii predefinite ale limbajului JavaScript
3. Funcţii definite de utilizator
II. Teoria lucrării de laborator
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:
Afişare în browser:
- 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 -
Afişare în browser:
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 -
Afişare în browser:
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 -
TEHNOLOGÎÎ WEB - Î ndrumar de laborator
LUCRAREA NR. 8 :
Limbajul JAVASCRIPT şi modelul DOM – Crearea paginilor
dinamice utilizând limbajul JavaScript şi DOM
I. Tematica lucrării
1. Modelul DOM (Document Object Model)
2. Formatarea elementelor HTML utilizând limbajul JavaScript şi
modelul DOM
II. Teoria lucrării de laborator
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 -
Prima afişare A doua afişare
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:
Prima afişare A doua afişare
- 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 -
TEHNOLOGÎÎ WEB - Î ndrumar de laborator
LUCRAREA NR. 9 :
Limbajul PHP – Introducere, variabile, tipuri de date. Exemple
primare
I. Tematica lucrării
1. Ce este PHP?
2. Instalarea PHP
3. Variabile PHP
4. Operatori PHP
II. Teoria lucrării de laborator
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
- 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
- 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 -
TEHNOLOGÎÎ WEB - Î ndrumar de laborator
LUCRAREA NR. 10 :
Limbajul PHP – Instrucţiuni, funcţii predefinite şi funcţii definite
de utilizator, sesiuni PHP
I. Tematica lucrării
1. Instrucţiuni PHP
2. Funcţii predefinite ale limbajului PHP
3. Funcţii definite de utilizator în PHP
4. Sesiuni PHP
II. Teoria lucrării de laborator
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:
- 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 -
TEHNOLOGÎÎ WEB - Î ndrumar de laborator
LUCRAREA NR. 11 :
Limbajul PHP – Prelucrarea datelor dintr-un formular utilizând
limbajul PHP
I. Tematica lucrării
1. Variabilele superglobals
2. Validarea formularelor cu scripturi PHP utilizând variabilele vector
$_GET şi $_POST
II. Teoria lucrării de laborator
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:
Formularul HTML Rezultatul execuţiei
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:
Formularul HTML Rezultatul execuţiei
- 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 -
TEHNOLOGÎÎ WEB - Î ndrumar de laborator
LUCRAREA NR. 12 :
Limbajul PHP – Prelucrarea datelor dintr-o bază de date MYSQL
cu ajutorul limbajului PHP
I. Tematica lucrării
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.
II. Teoria lucrării de laborator
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 -
TEHNOLOGÎÎ WEB - Î ndrumar de laborator
LUCRAREA NR. 13 :
Crearea de conţinut dinamic animat utilizând Adobe FLASH şi
limbajul ActionScript
I. Tematica lucrării
Crearea unui meniu orizontal în programul Adobe FLASH
II. Teoria lucrării de laborator
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.
- 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 -
TEHNOLOGÎÎ WEB - Î ndrumar de laborator
LUCRAREA NR. 14 :
Tehnologii web avansate. Biblioteca JavaScript jQuery, CMS,
web framework-uri
I. Tematica lucrării
Prezentarea succintă a unor tehnologii web avansate:
a) jQuery
b) web CMS
II. Teoria lucrării de laborator
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/ .
- 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
top related