TEHNOLOGII WEB - Indrumar laborator FINAL.pdf

8/10/2019 TEHNOLOGII WEB - Indrumar laborator FINAL.pdf

http://slidepdf.com/reader/full/tehnologii-web-indrumar-laborator-finalpdf 1/136

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 şioperatori ......................................................................................................................... 40

LUCRAREA NR. 7 : Limbajul JAVASCRIPT – Instrucţiuni, funcţii predefinite şi funcţiidefinite 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 definitede utilizator, sesiuni PHP ................................................................................................ 83

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

LUCRAREA NR. 12 : Limbajul PHP – Prelucrarea datelor dintr-o bază de date MYSQLcu ajutorul limbajului PHP ............................................................................................ 109

LUCRAREA NR. 13 : Crearea de conţinut dinamic animat utilizând Adobe FLASH şilimbajul 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 tehnologiiweb din ce în ce mai avansate, pornind de la simplul limbaj HTML şimergâ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ţiiweb, cu ajutorul cărora studenţii vor putea accesa piaţa de muncă pe acestdomeniu cu o cerere din ce în ce mai mare din partea marilor companiisoftware.

Lucrările de laborator sunt prezentate într -o lumină modernă şi uşoraccesibilă 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, deunde studenţii pot accesa şi alte resurse din domeniu, care să-i îndrume spreo cunoaştere tot mai îmbunătăţită a tehnologiilor web, mai ales cu asaltul decurând al conceptului de cloud computing , prin care majoritatea aplicaţiilorde desktop sunt transferate către lumea we b.

Avantajul major al acestei noi tehnologii constă în accesareadocumentelor 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>, încare 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 elementconţine o etichetă de deschidere şi una de închidere. Cea de închidere semarchează cu caracterul ‘ / ’ înaintea numelui etichetei.

HTML conţine o serie de elemente pentru generarea conţinutului text. Întabelul 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 ”>fontCourier</font>

font Courier

<font size=„6”>font size=6</font>

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

text aliniat pe centru

<div align=„left”>text aliniat lastanga</div>

text aliniat la stanga

<div align=„right”>text aliniat ladreapta</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 or donate ş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 dineticheta <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 peInternet. Î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 eti cheta <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ândatributele „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 saucoloane 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 elementeHTML:

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 multecoloane 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 deconţ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 decadre (<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ăţiiHyperion.

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 deintroducere 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:



- 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 multeelemente.

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



- 21 -

Datele dintr-un formular se trimit spre procesare prin apăsarea butonuluireferit de elementul HTML „submit”. Acestea sunt preluate de o funcţiespecificată î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 înlucrarea de laborator.



- 22 -


LUCRAREA NR. 4 :

Limbajul CSS – Introducere, tipuri de formatare CSS, formatăride 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 destil în cascadă)

Stilurile definesc cum sunt afişate elementele HTML

Stilurile au fost introduse în standardul HTML 4.0 pentru arezolva 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 fiformatat 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-osintaxă 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 f igura 4.2 este prezentat rezultatul afişării documentului HTML de maisus, î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 sunturmă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 şiformatul 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 patrustă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, imagineaacestuia ş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 CSSde 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 atributulid=„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 bibliogr afia 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ţidiverse elemente HTML (paragrafe, imagini, tabele, liste, căsuţeDIV 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 şiformatarea 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 şiformatarea 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 HTMLformatate vor fi:

<ul> - eliminăm bulina elementelor din listă, precum şi marginileinterioare şi exterioare;

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

<a> - formatăm hyperlink -urile să se afişeze sub formă de căsuţă(bloc) cu borduri stânga/dreapta formatate, cu o culoare pentrufundal, 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, îninteriorul 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, dedimensiuni mai mari, afişează conţinut în funcţie de opţiunile alese dinmeniu.

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âtevadezavantaje ale utilizării ei:

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

căutare, deoarece se indexează doar un frame la un momentdat;

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 dewebsite, având multe avantaje în plus faţă de metodele descrise anterior,

printre care flexibilitatea ridicată privind repoziţionarea şi redimensionareaelementelor din site.

Secţionarea se face conform unei structuri ierarhice ca cea din figura 5.2 demai 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 esteurmătoarea:

Pentru exemplificare vom utiliza această structură pentru a genera schemaunei pagini web având ca elemente: un header , un meniu vertical , o zonă deconţ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şareaacesteia î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 formatatecu 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 exem plificare vom utiliza imaginea multiplă din figura 5.4, care estecompusă din 2 imagini.

Figura 5.4. O imagine compusă din 2 imaginicomponente

Utilizând limbajul CSS putem afişa doar partea de imagine care neinteresează. În exemplul de mai jos (fig. 5.5) se afişează separat fiecareimagine 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şteformatarea CSS.

c.

4 imagini una sub alta, provenite dintr-o singură imaginece le conţine pe toate 4, în coloana din dreapta paginiiweb. Extragerea fiecărei imagini se va realiza utilizândtehnica imaginilor sprite.

2.

Pentru coloana din mijlocul paginii create la punctul 1 să seinsereze diverse elemente HTML şi să se formateze acesteelemente cu alte proprietăţi CSS neutilizate în lucrarea delaborator. Utilizaţi ca sursă de informare Internet-ul.



- 40 -


LUCRAREA NR. 6 :

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


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ă şidescriere, 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ătrenavigatorul 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ântulrezervat „var ”. Pentru a iniţializa o variabilă, aceasta trebuie urmată desimbolul ’=’ şi valoarea dorită pentru iniţializare.

Exemplu:

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

simbolul ’;’ . Dacă o variabilă nu este iniţializată, aceasta va primi valoareaundefined (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ă cudeclararea acesteia, utilizând cuvântul rezervat „new”, ca în exemplulurmă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ăţilesunt 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 şimetode:

Proprietăţi Metode

Accesul la proprietăţile şi metodele unui obiect JavaScript se realizează prinoperatorul 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 întabelul 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 o biectului DOCUMENT

Proprietatea Descrierea

anchors Returnează o listă cu toate ancorele din document

applets Returnează o colecţie cu toate applet-urilebody 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 documentreferrer Returnează adresa URL a documentului care a încărcat

pagina curentă

title Setează sau r eturnează 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 metodeledocument.write() sau document.writeln()

close() Închide fluxul de ieşire deschis anterior prinmetoda document.open()



- 45 -

getElementsByName() Accesează toate elementele cu un nume

specificat în atributul „name”

write() Afişează într -un document expresii HTMLsau cod Javascript executat

writeln() La fel ca la metoda write(), în plusadă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 deconcatenare. Adunarea între un număr şi un şir de caractere are ca rezultattot 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 şiternar, 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 serealizează 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 şifuncţii definite de utilizator


1. Instrucţiuni în JavaScript

2.

Funcţii predefinite ale limbajului JavaScript3. Funcţii definite de utilizator


1. Instrucţiuni în JavaScript

Categoriile de instrucţiuni ale limbajului JavaScript sunt: condiţionale, deciclare ş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ţiunidacă 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ţă deinstrucţ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ărde 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 deinstrucţ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ţiuniatâ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 deinstrucţ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ă) poatefi 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 oetichetă, instrucţiunea BREAK poate fi folosită pentru a ieşi dinexecuţia oricărui bloc de instrucţiuni JavaScript.



- 56 -

Exemplu:

Din tot vectorul „zile” se vor afişa numai primele trei, deoareceinstrucţ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, comentariilesunt 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 f uncţiile predefinite din JavaScript sunt cele conţinute deobiectele predefinite ale limbajului. Aceste obiecte sunt încadrate în treicategorii:

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ăţiilength:




- 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, 450,

600 şi 900:



- 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 asupraunui 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 literaY, 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ândevenimente 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ătoarelescript-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ă datanaş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 şimodelul 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 deobiecte, 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 şimodelul 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 evenimenteleHTML. 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 tratareaevenimentului 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 DOMatributele 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ă semodifice automat.

4. Să se creeze un script care să trateze cât mai multe evenimenteHTML.



- 72 -


LUCRAREA NR. 9 :

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

primare


1. Ce este PHP?

2.

Instalarea PHP3. 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 caresunt executate de către navigatoarelel web

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

Fişier e 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 paginidintr-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 unuiserver 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 aextensiilor sale, s-au pus la dispoziţia publicului pachete complete care

http://www.php.net/

http://www.php.net/

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 instalareinclus î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ântullocalhost. Aceasta deoarece PC-ul local are adresa IP 127.0.0.1, căruia îieste alocat numele localhost.

Exemplu: sau

La lansare se va afişa rezultatul execuţiei scriptului index.php din rădăcinaserverului 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 unnumă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ă întipul 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 limbajeleadiacente (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-incrementareReturnează pe x, apoi îlincrementează cu 1

-- x

Pre-decrementareDecrementează pe x cu 1, apoiîl returnează

x --

Post-decrementareReturnează pe x, apoi îldecrementează cu 1

Tabelul 9.4. Operatori de comparaţie în PHP

Operator Descriere

x == y

Egalitate

x === y

Egalitate (valoare şi tipde date). Identitate

x = y

Inegalitate. x diferit de y

x <> y

Inegalitate. x diferit de y

x == y

Inegalitate (valoare şi tipde 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 perechicheie/valoare şi tip date

x = y

Inegalitate în perechicheie/valoare

x <> y

Inegalitate în perechicheie/valoare

x == y

Inegalitate în perechicheie/valoare şi tip date

În exemplul următor se definesc două variabile $x şi $y, asupra cărora seaplică operatorii: +, -, *, /, ++, --. Pentru afişare s-a utilizat instrucţiuneaecho, 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ţafiecă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 barade 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 definitede 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ă şiun alt set de instrucţiuni dacă condiţia este falsă

Exemplu:

instrucţiunea if...else if....else – selectează unul din mai multe seturide instrucţiuni pentru a fi executat

Sintaxa:



- 85 -

Exemplu:

instrucţiunea switch - selectează unul din mai multe seturi deinstrucţ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, apoirepetă 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 deun număr de ori specificat

Sintaxa:

Parametri:

- in it : 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 in it şi conditie pot să lipsească din instrucţiune sau pot aveaexpresii 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 privinddezvoltarea de aplicaţii web pentru orice domeniu de cercetare şi dezvoltare.Pentru a împlini acest deziderat, dezvoltatorii limbajului au conceput unnumăr foarte mare de funcţii, care să rezolve problemele utilizatorilor şidezvoltatorilor 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 prezentaexemple 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 rezultatelorafiş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/

http://www.php.net/

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 fiindcompletate 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 ultimulelement 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 şiconţ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ânddelimitatoare de început şi sfârşit:



- 98 -

Vom mai prezenta în altă lucrare de laborator funcţii MySQL, foarteutilizate ş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 carese 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ândtablou (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 lui2 şi să le convertească în HEXA.

4. Creaţi un script PHP în care să folosiţi cât mai multe funcţiiSTRING (concatenare, split, explode, implode, join, substr etc...).

5. Să se scrie un script în care să ordonaţi un şir dezordonat. Memoraţivariabilele temporare într -o sesiune PHP.

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



- 101 -


LUCRAREA NR. 11 :

Limbajul PHP – Prelucrarea datelor dintr-un formular utilizândlimbajul 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 toatedomeniile 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 scriptulcurent prin parametri URL

$_POST: un vector asociativ cu variabilele pasate către scriptulcurent prin metoda HTTP POST

$_FILES: un vector asociativ cu fişierele încărcate (prin upload) înscriptul curent prin metoda HTTP POST

$_COOKIE: un vector asociativ cu variabilele pasate către scriptulcurent 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 şiaccesibil î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 parametriiadresei URL.

Variabila $_GET colectează datele dintr -un formular utilizând expresiamethod=”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 suntlimitate 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 deadrese 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 vectorulasociativ $_GET:

În funcţie de ce date sunt introduse în formular, rezultatul procesării dateloreste 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 deautentificare 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 transmisedintr-un formular prin metoda POST.

Sintaxa:

Datele trimise prin metoda POST nu sunt vizibile nimănui şi nu au limitereferitor la volumul de informaţii transmise.



- 105 -

Notă

Referitor la volumul de date transmis, există totuşi o limitare (implicită de8MB) pentru metoda POST, valoare ce poate fi modificată prin setarea

parametrului post_max_size din fişierul php.ini, fişierul de configurarePHP).

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 trimiseatâ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ă încalculatorul utilizatorului. Este utilizat deseori pentru identificarea unui

utilizator. Ori de câte ori pagina web este apelată de pe acelaşi PC, sunttrimise ş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 atribuimvaloarea „Alex Vovu” şi un timp de expirare de o oră:

Perioada de expirare este în secunde, dar poate fi modificată prin calculematematice pentru a obţine zile, săptămâni, luni etc.

Un alt exemplu, în care setăm perioada de expirare sub altă formă, mailizibilă, 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 rezultatulurmător :

Scriptul PHP Rezultatul execuţiei

Distrugerea cookie-urilor

Pentru eliminarea unui cookie, se procedează la modificarea datei deexpirare 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 cuurmă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 MYSQLcu ajutorul limbajului PHP


1. Baze de date MySQL

2.

Funcţii PHP pentru baze de date MySQL3. 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 şilarg 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 bazaidentificatorilor 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 pentrulimbajul PHP. Pachetele AMP (Apache-MySQL-PHP) instalează automatatâ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ăruidezvoltator , 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 carelucrează ş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 deserverul MySQL, utilitarul phpMyAdmin fiind doar o interfaţă PHP careuşurează mult munca dezvoltatorilor, aducând într -un singur loc toate

operaţiunile necesare şi oferind un mediu vizual bine construit pentruaccesul 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 degă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ăugareacaracterului ’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ţinmai complex, ca de exemplu cel de mai jos:

Acest script se va include în toate celelalte scripturi, prin funcţiarequire_once(), funcţie ce permite inserarea unui script extern în interiorulaltui 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 vafi 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 scriptce a deschis conexiunea la serverul MySQL, aceasta să fie încheiată prinfuncţ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 unelenoi.

i. Pagina de prezentare autoturisme

Datele sunt preluate din baza de date baza_date creată în MySQL, dintabelul 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ă foartesimplă ş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ă utilizareaurmă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ţieimysql_query(), ca în exemplul nostru:

funcţia mysql_fetch_assoc()

Această funcţie primeşte ca parametru rezultatul execuţiei unei interogări şireturnează un rând din tabelul cu înregistrări sub formă de vector asociativ.După execuţia cu succes, se pot accesa imediat elementele vectorului (dateledin 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 observacă 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 dateeste 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 înregistrarearespectivă.

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”. Înaceastă 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 sevor salva în baza de date MySQL.

De asemenea, la apăsarea butonului „Sterge masina” se va apela acelaşiscript 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 realizamodifică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 la borator.



- 123 -

III. Modul de lucru

1. Să se realizeze dezvoltarea aplicaţiei de prezentare autoturismedescrisă în această lucrare de laborator.

2. Să se dezvolte o aplicaţie asemănătoare, având ca subiect oricedomeniu la alegere (legume, fructe, oraşe, magazine etc.)



- 124 -


LUCRAREA NR. 13 :

Crearea de conţinut dinamic animat utilizând Adobe FLASH şilimbajul 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. Domeniulanimaţ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 estenecesară achiziţia unei licenţe contra cost. Pentru detalii vizitaţihttp://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 ajutorulcadrelor (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 deinstrumente, 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 desenatestările UP, OVER şi DOWN, având forme dreptunghiulare cu colţurile puţinrotunjite ş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 esterelevant; 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 descripting al programului Flash). Cu ActionScript, utilizatorul unei aplicaţii

Flash poate manipula mult mai dinamic elementele din aplicaţie, limbajulajutând la automatizarea diverselor operaţiuni des utilizate în cadrulaplicaţiilor web de tip Flash.

Pentru meniul nostru, după ce am aliniat butoanele în poziţiile dorite, câteun 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 fiexecutat în momentul rulării cadrului respectiv.

Fiecărui buton din meniul nostru i s-a înscris codul următor, fig. 13.4, încare, 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ândopţ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 principalconstă dintr -un element HTML <OBJECT>, ca cel de mai jos:



- 129 -

Se pot observa diverşi parametri Flash (dimensiune, calitate etc.) şi, cel maiimportant, parametrul movie şi embed care conţin animaţia noastră (meniulorizontal) 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 suntdefiniţ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 deanimaţie Flash, s-a obţinut un meniu orizontal într -un timp foarte scurt şiavând un aspect plăcut.

Cu ajutorul programului Adobe Flash se pot crea animaţii mult maiavansate, banere, logo-uri, reclame, filme de desene animate, obiecte înmiş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 delaborator, creându-se alte efecte pentru stările butoanelor meniuluidecâ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 dimensiunifoarte mici. Scopul acestei librării este acela de a uşura scrierea şi utilizareacodurilor JavaScript în paginile web.

jQuery preia majoritatea sarcinilor obişnuite pentru care în JavaScript artrebui 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 cuJavaScript, cum ar fi apelurile AJAX ( Asynchronous JavaScript and XML)

şi manipularea obiectelor DOM.

Caracteristicile li bră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 aproapetoate browser-ele web. jQuery va rula exact la fel în majoritateanavigatoarelor 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ătreaceasta î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 fiutilizat pentru crearea şi editarea uşoară a paginilor web, însă estemult mai complex decât WordPress. Joomla se poate descărca de laadresa 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/

http://drupal.org/

http://drupal.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 companiiguvernamentale sau private din întreaga lume.

III. Modul de lucru

Să se încerce personal ca temă de casă, descărcarea şi instalarea unuia dincele 3 CMS-uri descrise în lucrare şi să se creeze un website explicit prinCMS-ul instalat.



BIBLIOGRAFIE

[1]. David, M. - HTML5: designing ri ch I nternet applications , Elsevier:

Focal Press, USA 2010.

[2]. Tudor Sorin, Vlad Hutanu - Crearea si programarea pagini lor 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.php.net/

http://www.php.net/

http://www.javascriptkit.com/




http://www.php.net/


TEHNOLOGII WEB - Indrumar laborator FINAL.pdf

Documents

Transcript of TEHNOLOGII WEB - Indrumar laborator FINAL.pdf