Manual de Informatica Intensiv PENTRU CLASA A XII-A Programare

Table of contents :
Anexa 3 - Caractere HTML.pdf......Page 0
1.1.2. Colectarea şi analizarea datelor. Modelul conceptual......Page 8
1.1.3. Entităţi. Instanţe. Atribute. Identificator unic......Page 9
1.1.4. Relaţii între entităţi......Page 11
1.1.4.1. Convenţii de reprezentare a relaţiilor......Page 12
1.1.4.2. Tipuri de relaţii......Page 13
1.1.5. Rezolvarea relaţiilor many-to-many......Page 15
(vezi baremele de notare şi de corectare de la pag. 380)......Page 20
1.2.1. Ce este normalizarea?......Page 22
1.2.2. Prima formă normală (1NF)......Page 23
1.2.3. A doua formă normală (2NF)......Page 24
1.2.4. A treia formă normală (3NF)......Page 26
1.3.5. Operaţii specifice prelucrării bazelor de date......Page 36
1.3.6. Reguli de integritate......Page 37
1.3.7. Programe de validare şi de acţiune......Page 38
(vezi baremele de notare şi de corectare de la pag. 380)......Page 40
2.1. Ce este şi de ce învăţăm MySQL ?......Page 48
Nume......Page 70
font-family:courier, monospace; }......Page 115
......Page 116
background-color:red;}......Page 123
Rhs......Page 130
Problema este următoarea: se dă o imagine şi se cere ca, prin executarea unui clic asupra unei anumite parţi a ei, să se efectueze una dintre operaţiile prezentate în paragraful anterior, prin executarea unui clic în altă parte a ei, să se efectueze o.........Page 140
X......Page 141
Zoom in......Page 143
Modulul valorilor între......Page 223
Semnificaţie......Page 224
6.8.1. Operatori aritmetici......Page 225
6.8.3. Operatori de egalitate......Page 227
6.8.5. Operatori logici......Page 228
6.8.6. Operatori logici pe biţi......Page 229
6.8.7. Operatori de atribuire......Page 230
6.8.8. Operatorul condiţional......Page 232
6.8.10. Prioritatea (precedenţa) operatorilor......Page 233
6.9.4. Instrucţiunea de atribuire......Page 234
6.9.5. Instrucţiunea IF......Page 235
6.9.7. Instrucţiunea DO WHILE......Page 236
6.9.8. Instrucţiunea FOR......Page 237
6.9.11. Instrucţiunea SWITCH......Page 238
6.9.12. Instrucţiunea apel metodă (funcţie)......Page 239
a) int[] V; am declarat o variabilă referinţă către un vector cu componente de tip int. O declaraţie echivalentă poate fi făcută prin: int V[];.......Page 240
V......Page 241
V......Page 242
V......Page 243
Sugestie ! Pentru a vă obişnui cu programarea în Java, puteţi rezolva orice problemă din manualele pentru clasele a X-a şi a XI-a care nu necesită utilizarea fişierelor.......Page 252
Metoda......Page 267
7.8.2.1. Constructorii şi lungimea unui şir de caractere......Page 268
}......Page 273
Constructor 2......Page 277
7.9.1. Un exemplu de extindere a unei clase......Page 279
7.10. Polimorfism......Page 282
Afis din clasa B=7 5......Page 290
A2.2. Identificarea meseriilor de interes......Page 370
A2.3. Evaluarea posibilelor cariere......Page 371
A2.4. Scrierea unui curriculum vitae......Page 372
A2.5. Pregătirea şi susţinerea interviului......Page 374
Exemple de întrebări frecvente la interviurile pentru angajare:......Page 376
Ì......Page 377
↑......Page 378
€......Page 379

Citation preview

---

Ministerul Educaţiei, Cercetării şi Tineretului

Vlad Tudor Huţanu Carmen Popescu

Manual de

PENTRU CLASA A XII-A filiera teoretică, profil real, specializarea: matematică-informatică, intensiv informatică

Aprobat prin ordinul MEdCT nr. 1561/83 din 23.07.2007

L&S Info-mat

Copyright 2007-2016  L&S INFO-MAT Toate drepturile asupra acestei lucrǎri aparţin editurii L&S INFO-MAT. Reproducerea integralǎ sau parţialǎ a textului din aceastǎ carte este posibilǎ doar cu acordul în scris al editurii L&S INFO-MAT. Manualul a fost aprobat prin Ordinul Ministrului Educaţiei, Cercetǎrii şi Tineretului nr. 1561 / 83 din 23.07.2007 în urma evaluǎrii calitative şi este realizat în conformitate cu programa analiticǎ aprobatǎ prin Ordin al ministrului Educaţiei şi Cercetǎrii nr. 5959 din 22.12.2006. Refenţi ştiinţifici: Prof. Gradul I Carmen Mincǎ, Colegiul Naţional “Sf. Sava", Bucureşti Prof .Gradul I, Enciu Magdalena, Colegiul Naţional “Octav Onicescu”, Bucureşti Tiparul executat la S.C. LuminaTipo S.R.L. Str. Luigi Galvani nr. 20 bis, Sector 2, Bucureşti, [email protected]

Editura

L&S INFO-MAT:

Adresa: Str. Stânjeneilor nr. 6, bl. 30, sc. A, et. 1, apt. 11, sector 4, Bucureşti; Mobil: 0722-573701; 027.731.947; E-mail: [email protected]; Web Site: www.ls-infomat.ro.

CUPRINS

Partea I. Baze de date

7

Capitolul 1. Proiectarea bazelor de date

7

1.1. Noţiuni introductive 1.2. Normalizarea datelor 1.3. Implementarea modelului conceptual 1.4. Managementul de proiect

8 22 29 41

Teme de proiect

45

Partea a II-a. Programare WEB

47

Capitolul 2. Limbajul MySQL

47

2.1. Ce este şi de ce învăţăm MySQL ? 2.2. Cum rulăm MySQL pe propriul calculator ? 2.3. Crearea unei baze de date 2.4. Tabele. Noţiuni elementare 2.5. Tipuri de date în MySQL 2.6. Operatori utilizaţi în MySQL 2.7. Funcţii MySQL 2.8. Afişarea coloanelor care rezultă în urma unui calcul 2.9. Valoarea NULL 2.10. Valori implicite 2.11. Cheie primară şi cheie unică 2.12. Autoincrementare 2.13. Sortarea datelor 2.14. Filtrarea datelor 2.15. Actualizări într-un tabel 2.16. Funcţii agregate 2.17. Utilizarea subinterogărilor 2.18. Gruparea datelor 2.19. Uniuni de tabele 2.20. Elemente care privesc securitatea bazelor de date

48 49 50 51 53 57 62 65 66 68 69 71 72 73 74 77 78 80 82 85

Probleme Propuse

86

4

Manual de Informatică pentru clasa a XII-a

Capitolul 3. Primii paşi către construcţia unui site

90

3.1. Ce este Internetul ? 3.2. Protocolul TCP/IP 3.3. Despre site-uri 3.4.Un program care rulează sub FTP 3.5. Cum scriem un fişier HTML ?

91 92 94 97 99

Teste recapitulative

103

Capitolul 4. HTML, CSS – primele noţiuni

104

4.1. Structura de bază a unei pagini HTML+CSS 4.2. Elemente HTML pentru afişarea textelor 4.3. Atribute CSS pentru font-uri 4.4. Atribute CSS pentru texte 4.5. Liste 4.6. Structura unui element HTML 4.7. Atribute de culoare şi fond 4.8. Atribute pentru margini 4.9. Atribute pentru padding 4.10. Atribute pentru bordură 4.11. Elementul IMG 4.12. Tabele 4.13. Hiperlegături (link-uri) 4.14. Hărţi imagine 4.15. Elementele BASE, META şi SCRIPT 4.16. Cadre (FRAMESET, FRAME şi IFRAME) 4.17. Elementul MARQUEE 4.18. Aşezarea implicită în pagină a diverselor elemente 4.19. Alte modalităţi de aşezare în pagină a elementelor 4.20. Atributul z-index 4.21. Atributul display 4.22. Caractere HTML 4.23. Aspecte generale ale proiectării interfeţelor web

105 109 114 115 117 120 122 125 125 125 126 128 133 140 145 147 152 153 155 157 159 160 161

Probleme propuse

165

Capitolul 5. Limbajul PHP

169

5.1. Introducere 5.2. Formulare 5.3. Elementul TEXTAREA 5.4. Elementul SELECT 5.5. Constante. Variabile. Operatori 5.6. Instrucţiunile limbajului PHP

170 172 176 176 177 181

Cuprins

5

5.7. Funcţii în PHP 5.8. Funcţii “matematice” 5.9. Afişarea datelor - echo şi print 5.10. Funcţii pentru prelucrarea şirurilor de caractere 5.11. Masive în PHP 5.12. Variabile cookie 5.13. Utilizarea în comun a limbajelor PHP şi MySQL 5.14. Aplicaţii 5.15. Proiectarea paginilor web

184 187 188 189 192 195 197 203 212

Probleme propuse

213

Teme de proiect

215

Partea a III-a. Programare orientată pe obiecte şi programare vizuală

216

Capitolul 6. Iniţiere în utilizarea limbajului Java

216

6.1. Cum instalăm Java ? 6.2. Primul program 6.3. Conceptul de Maşină Virtuală Java (JVM) 6.4. Tipuri de aplicaţii Java 6.5. Comentarii 6.6. Afişarea şirurilor de caractere 6.7. Tipuri de date 6.8. Operatori 6.9. Instrucţiuni 6.10. Masive 6.11. Citirea datelor de la tastatură

217 219 220 221 222 222 222 225 234 240 244

Probleme rezolvate

246

6.12. Date membru 6.13. Metode 6.14. Exemple de utilizare a metodelor 6.15. Supraîncărcarea metodelor

248 248 251 252

Capitolul 7. Programare orientată pe obiecte

253

7.1. Principiile programării orientate pe obiecte 7.2. Constructori 7.3. Date membru statice şi metode statice 7.4. Cuvântul cheie “this” 7.5. Referinţe către obiecte 7.6. Masive de obiecte 7.7. Aplicaţii ale noţiunilor prezentate. Lucrul cu numere raţionale 7.8. Studiul unor clase din limbajul Java 7.9. Extinderea claselor (moştenirea) 7.10. Polimorfism

254 256 258 259 259 261 263 267 276 282

6

Manual de Informatică pentru clasa a XII-a

7.11. Clase abstracte 7.12. Interfeţe 7.13. Specificatori de acces (modificatori de acces) 7.14. Excepţii (tratarea erorilor)

287 290 293 296

Probleme propuse

305

Capitolul 8. Programare vizuală

311

8.1. Conceptele de bază ale programării vizuale în Java 8.2. Studiul principalelor componente 8.3. Obiecte grafice. Clasa Graphics 8.4. Accesarea şi prelucrarea datelor

312 326 351 356

Probleme propuse

363

Teme de proiect

366

Anexa 1. Instalarea programelor Apache, PHP şi MySQL

367

Anexa 2. Dezvoltarea profesională în domeniul IT

369

Anexa 3. Caractere HTML

377

Indicaţii / Răspunsuri

380

PARTEA I

CAPITOLUL Proiectarea bazelor de date

În acest prim capitol veţi studia principiile generale ale proiectării bazelor de date, vă veţi familiariza cu diversele anomalii care pot invalida bazele de date, precum şi cu modalităţile de evitare ale acestora. De asemenea, se va defini modelul conceptual al unei baze de date. În ultima parte a capitolului, vor fi prezentate etapele realizării unui proiect, avantajele lucrului în echipă şi veţi învăţa cum să pregătiţi şi să susţineţi o prezentare în faţa publicului.



Ce este modelul conceptual şi care este rolul său ? 



Ce este un ERD ?

Ce este o entitate şi cum se reprezintă ea într-un ERD ?  

Ce este o instanţă ?

Ce sunt şi cum se stabilesc atributele unei entităţi ? Cum se stabilesc relaţii între entităţi ?

 

Ce tipuri de relaţii pot exista între entităţi ? 

Cum se reprezintă relaţiile în ERD ? 



Normalizarea datelor

Cum se implementează modelul conceptual ? 

Managementul de proiect

Cuvinte cheie: dată, informaţie, cunoştinţă, analiză, model conceptual, entitate, instanţă, atribut, identificator unic, relaţie, normalizare, mapare, integritate, proiect, echipă, prezentare

8

Manual de Informatică pentru clasa a XII-a

1.1. Noţiuni introductive 1.1.1. Date. Informaţii. Cunoştinţe Auzim adesea vorbindu-se despre “era informaţiilor” sau “societatea informaţională” sau “tehnologia informaţiei”, însă de multe ori cuvântul "informaţie" este folosit fără a-i înţelege clar sensul, diferenţa dintre date, informaţii sau cunoştinţe. În general, conţinutul gândirii umane operează cu următoarele concepte: •

Date – constau în material brut, fapte, simboluri, numere, cuvinte, poze fără un înţeles de sine stătător, neintegrate într-un context, fără relaţii cu alte date sau obiecte. Ele se pot obţine în urma unor experimente, sondaje, etc.

•

Informaţii – prin prelucrarea datelor şi găsirea relaţiilor dintre acestea se obţin informaţii care au un înţeles şi sunt integrate într-un context. Datele, organizate şi prezentate într-un mod sistematic pentru a sublinia sensul acestora, devin informaţii. Pe scurt, informaţiile sunt date prelucrate. Informaţiile se prezintă sub formă de rapoarte, statistici, diagrame, etc.

•

Cunoştinţe – colecţii de date, informaţii, adevăruri şi principii învăţate, acumulate de-a lungul timpului. Informaţiile despre un subiect, reţinute şi înţelese, ce pot fi folosite în luarea de decizii, care pot forma judecăţi şi opinii, devin cunoştinţe. Cu alte cuvinte, cunoştinţele apar în momentul utilizării informaţiei.

1.1.2. Colectarea şi analizarea datelor. Modelul conceptual Primul pas în realizarea unei aplicaţii de baze de date este analiza datelor şi realizarea unei scheme conceptuale (model conceptual) ale acestora. În această etapă sunt analizate natura şi modul de utilizare a datelor. Sunt identificate datele care vor trebui memorate şi procesate, se împart în grupuri logice şi se identifică relaţiile care există între aceste grupuri. Analiza datelor este un proces uneori dificil, care necesită mult timp, însă este o etapă obligatorie. Fără o analiză atentă a datelor şi a modului de utilizare a acestora, vom realiza o bază de date care, putem constata în final, că nu întruneşte cerinţele beneficiarului. Ideea de bază a analizei datelor şi a construirii modelului conceptual este "să măsori de două ori şi să tai o singură dată". Informaţiile necesare realizării modelului conceptual se obţin folosind metode convenţionale precum intervievarea oamenilor din cadrul organizaţiei şi studierea documentelor folosite.

Capitolul 1. Proiectarea bazelor de date

9

Odată obţinute aceste informaţii, ele trebuie reprezentate într-o formă convenţională care să poată fi uşor înţeleasă de toată lumea. O astfel de reprezentare este diagrama entităţi-relaţii, numită şi harta relaţiilor sau ERD-ul (Entity Relationship Diagram). Aceste scheme sunt un instrument util care uşurează comunicarea între specialiştii care proiectează bazele de date şi programatori, pe de o parte şi beneficiari, pe de altă parte. Aceştia din urmă pot înţelege cu uşurinţă o astfel de schemă, chiar dacă nu sunt cunoscători în domeniul IT. În cele ce urmează, vom prezenta principalele elemente care intră în componenţa unui ERD precum şi convenţiile de reprezentare a acestora.

1.1.3. Entităţi. Instanţe. Atribute. Identificator unic O entitate este un lucru, obiect, persoană sau eveniment care are semnificaţie pentru afacerea modelată, despre care trebuie să colectăm şi să memorăm date. O entitate poate fi un lucru real, tangibil precum o clădire, o persoană, poate fi o activitate precum o programare sau o operaţie sau poate fi o noţiune abstractă. O entitate este reprezentată în ERD printr-un dreptunghi cu colţurile rotunjite. Numele entităţii este întotdeauna un substantiv la singular şi se scrie în partea de sus a dreptunghiului cu majuscule, ca în Fig. 1.1: PROFESOR

PACIENT

ELEV

Figura 1.1. Exemple de entităţi şi modul de reprezentare

O entitate este de fapt o clasă de obiecte şi pentru orice entitate există mai multe instanţe ale sale. O instanţă a unei entităţi este un obiect, o persoană, un eveniment particular din clasa de obiecte care formează entitatea. De exemplu, elevul X din clasa a IX-a A de la Liceul de Informatică din localitatea Y este o instanţă a entităţii ELEV. După cum se vede, pentru a preciza o instanţă a unei entităţi, trebuie să specificăm unele caracteristici ale acestui obiect, să-l descriem (să precizăm de exemplu numele, clasa, şcoala, etc.). Aşadar, după ce am identificat entităţile trebuie să descriem aceste entităţi în termeni reali, adică să le stabilim atributele. Un atribut este orice detaliu care serveşte la identificarea, clasificarea, cuantificarea, sau exprimarea stării unei instanţe a unei entităţi. Atributele sunt informaţii specifice ce trebuie cunoscute şi memorate. De exemplu, atributele entităţii ELEV sunt numele, prenumele, adresa, numărul de telefon, adresa de e-mail, data naşterii, etc.

10

Manual de Informatică pentru clasa a XII-a

În cadrul unui ERD, atributele se vor scrie imediat sub numele entităţii, cu litere mici. Un atribut este un substantiv la singular (vezi Fig. 1.2).

Figura 1.2. Exemplu de entitate

ELEV # * * * * ○ ○

cnp nume prenume data_nasterii adresa telefon e-mail

Un atribut poate fi obligatoriu sau opţional. Dacă un atribut este obligatoriu, pentru fiecare instanţă a entităţii respective trebuie să avem o valoare pentru acel atribut: de exemplu, este obligatoriu să cunoaştem numele elevilor. Pentru un atribut opţional putem avea instanţe pentru care nu cunoaştem valoarea atributului respectiv. De exemplu, atributul ”e-mail” al entităţii ELEV este opţional, un elev putând să nu aibă adresă de email. Un atribut obligatoriu este precedat în ERD de un asterisc ”*”, iar un atribut opţional va fi precedat de un cerculeţ ”o”. Atributele care definesc în mod unic instanţele unei entităţi se numesc identificatori unici (UID). UID-ul unei entităţi poate fi compus dintr-un singur atribut, precum codul numeric personal ce poate fi un identificator unic pentru entitatea ELEV. În alte situaţii, identificatorul unic este compus dintr-o combinaţie de două sau mai multe atribute. De exemplu, combinaţia dintre titlu, numele autorului şi data apariţiei poate forma unicul identificator al entităţii CARTE. Oare combinaţia titlu şi nume autor nu era suficientă? Răspunsul este NU, deoarece pot exista mai multe volume scrise de Mihai Eminescu având toate titlul ”Poezii”, dar apărute la date diferite. Atributele care fac parte din identificatorul unic al unei entităţi vor fi precedate de semnul diez ”#” (vezi Fig. 1.2 şi Fig. 1.3).

Figura 1.3. Alt exemplu de entitate

CARTE # # # * *

titlu autor data_aparitiei format numar_pagini

Observaţie ! Atributele din UID sunt întotdeauna obligatorii, însă semnul ”#” este suficient, nu mai trebuie pus şi un semn asterisc în faţa acestor atribute. Valorile unor atribute se pot modifica foarte des, ca de exemplu atributul vârstă. Spunem, în acest caz, că avem de a face cu un atribut volatil. Dacă valoarea unui atribut însă se modifică foarte rar sau deloc (de exemplu data naşterii) acesta este un atribut non-volatil. Evident este de preferat să folosim atribute non-volatile atunci când acest lucru este posibil.

Capitolul 1. Proiectarea bazelor de date

11

Identificaţi entităţile pentru următoarele scenarii. Identificaţi apoi pentru fiecare entitate atributele sale, stabiliţi opţionalitatea acestora şi precizaţi unicul identificator al fiecărei entităţi. Indicaţie. Subliniaţi substantivele care au semnificaţie pentru afacerea descrisă. Un substantiv va fi subliniat doar la prima sa apariţie. Dintre aceste substantive veţi alege apoi entităţile. 1. Pentru a se abona la diverse reviste, persoanele doritoare trebuie să furnizeze numele, adresa şi un număr de telefon. Fiecare revistă este identificată prin titlu, numărul volumului şi data apariţiei. Abonaţii semnează pentru abonare un contract pe o anumită perioadă de timp specificată prin data de început a abonamentului şi data finală. Bineînţeles că o persoană se poate abona la mai multe reviste în acelaşi timp. 2. Despre angajaţii unei firme se cunoaşte numele, titlul, numărul de telefon de la birou. Angajaţii pot fi implicaţi într-o serie de proiecte ce se desfăşoară în cadrul firmei. Despre fiecare proiect se cunoaşte numele, data la care a demarat proiectul şi se poate cunoaşte o dată la care se va finaliza proiectul. La fiecare proiect lucrează un singur angajat, însă un angajat poate fi implicat în mai multe proiecte. Fiecare angajat are un manager, cu excepţia directorului. Managerii pot fi şi ei implicaţi în proiecte.

1.1.4. Relaţii între entităţi În lumea reală, obiectele nu există izolat. Percepem obiectele din lumea reală doar în conexiune cu alte obiecte, de exemplu vom spune 'pământul se învârte în jurul soarelui', 'el este medic', etc. Aşadar, după ce aţi identificat care sunt entităţile şi atributele acestor entităţi, este timpul să punem în evidenţă relaţiile care există între aceste entităţi, modul în care acestea comunică între ele. O relaţie este o asociere, legătură sau conexiune existentă între entităţi şi care are o semnificaţie pentru afacerea modelată. Orice relaţie este bidirecţională, legând două entităţi sau o entitate cu ea însăşi. De exemplu, elevii studiază mai multe materii, o materie e studiată de către elevi. Orice relaţie este caracterizată de următoarele elemente: -

numele relaţiei;

-

opţionalitatea relaţiei;

-

gradul (cardinalitatea) relaţiei.

12

Manual de Informatică pentru clasa a XII-a

Să luăm ca exemplu relaţia existentă între entităţile JUCĂTOR şi ECHIPĂ. Vom spune: Un JUCĂTOR joacă într-o ECHIPĂ. Numele relaţiei este: joacă. Pentru a stabili opţionalitatea relaţiei trebuie să răspundem la următoarele întrebări: un jucător trebuie să joace într-o echipă? Se poate ca un jucător să nu joace în nicio echipă? Dacă acceptăm faptul că toţi jucătorii trebuie să joace într-o echipă, relaţia este obligatorie sau mandatorie şi vom spune că: Un JUCĂTOR trebuie să joace într-o ECHIPĂ. Dacă însă acceptăm că există jucători care nu joacă în nicio echipă (de exemplu, li s-a terminat contractul şi în momentul de faţă nu mai joacă la nicio echipă), atunci relaţia este opţională. În acest caz, vom spune că: Un JUCĂTOR poate juca la o ECHIPĂ. Cardinalitatea relaţiei este dată de numărul de instanţe ale entităţii din partea dreaptă a relaţiei care pot intra în relaţie cu o instanţă a entităţii din partea stângă a relaţiei. Adică va trebui să răspundem la întrebări de genul: la câte echipe poate juca un jucător? Răspunsurile posibile sunt unul şi numai unul sau unul sau mai mulţi. Vom spune: Un JUCĂTOR trebuie/poate să joace la o ECHIPĂ şi numai una. sau Un JUCĂTOR trebuie/poate să joace la una sau mai multe ECHIPE. Cea mai realistă variantă a relaţiei dintre JUCĂTOR şi ECHIPĂ este aşadar: Un JUCĂTOR poate să joace la o ECHIPĂ şi numai una. Am precizat însă mai înainte că orice relaţie este bidirecţională. Relaţia dintre ECHIPĂ şi JUCĂTOR o putem enunţa astfel: La o ECHIPĂ trebuie să joace unul sau mai mulţi JUCĂTORI. 1.1.4.1. Convenţii de reprezentare a relaţiilor În cadrul diagramei entităţi-relaţii, o relaţie va fi reprezentată printr-o linie ce uneşte cele două entităţi. Deoarece o relaţie este bidirecţională, linia ce uneşte cele două entităţi este compusă din două segmente distincte, câte unul pentru fiecare entitate. Tipul segmentului ce pleacă de la o entitate ne va indica opţionalitatea relaţiei dintre această entitate şi entitatea aflată în cealaltă parte a relaţiei. Dacă acest segment este continuu este vorba de o relaţie obligatorie, o linie întreruptă indică o relaţie opţională.

Capitolul 1. Proiectarea bazelor de date

13

De exemplu, în Fig. 1.4 segmentul ce pleacă de la entitatea JUCĂTOR, fiind întrerupt, înseamnă că un jucător poate juca la o echipă, adică relaţia este opţională. Segmentul ce pleacă dinspre entitatea ECHIPĂ este continuu, deci la o echipă trebuie să joace jucători.

Figura 1.4. Reprezentarea relaţiilor

Modul în care o linie se termină spre o entitate este important. Dacă se termină printr-o linie simplă, înseamnă că o instanţă şi numai una a acestei entităţi este în relaţie cu o instanţă a celeilalte entităţi. În exemplul anterior, linia de la JUCATOR la ECHIPA se termină în partea dinspre ECHIPA cu o linie simplă, deci un jucător joacă la o echipă şi numai una. Dacă linia se termină cu trei linii (picior de cioară), înseamnă că mai multe instanţe ale entităţii pot corespunde unei instanţe a celeilalte entităţi. În exemplul anterior, linia de la ECHIPĂ la JUCĂTOR se termină cu piciorul de cioară, înseamnă că unei instanţe a entităţii ECHIPĂ îi corespund mai multe instanţe ale entităţii JUCĂTOR, adică o echipă are unul sau mai mulţi jucători. Caracteristica relaţiei

Valoare

Mod de reprezentare

Numele relaţiei

un verb

se scrie deasupra relaţiei linie continuă

Opţionalitatea

relaţie obligatorie (TREBUIE) relaţie opţională (POATE) una şi numai una

linie întreruptă linie simplă picior de cioară

Cardinalitatea una sau mai multe

Tabelul 1.1. Moduri de reprezentare a unei relaţii

1.1.4.2. Tipuri de relaţii Variantele de relaţii ce pot exista între două entităţi sunt prezentate mai jos: -

relaţii one-to-one – acest tip de relaţie este destul de rar întâlnit – uneori, astfel de relaţii pot fi modelate transformând una dintre entităţi în atribut al celeilalte entităţi.

-

relaţii one-to-many – sunt cele mai întâlnite tipuri de relaţii, însă şi aici, cazurile c) şi d) prezentate în Fig. 1.6, sunt mai puţin uzuale;

14

Manual de Informatică pentru clasa a XII-a

Figura 1.5. Exemple de relaţii one-to-one

Figura 1.6. Exemple de relaţii one-to-many

-

relaţii many-to-many – aceste tipuri de relaţii apar în prima fază a proiectării bazei de date, însă ele trebuie să fie ulterior eliminate. Fig. 1.7 prezintă câteva exemple de astfel de relaţii.

Figura 1.7. Exemple de relaţii many-to-many

Capitolul 1. Proiectarea bazelor de date

15

1.1.5. Rezolvarea relaţiilor many-to-many După cum am precizat anterior, relaţiile many-to-many pot apărea într-o primă fază a proiectării bazei de date, însă ele nu au voie să apară în schema finală. Să considerăm relaţia dintre entităţile STUDENT şi CURS (vezi Fig. 1.8). Se ştie că orice curs se termină în general cu un examen. Unde vom memora nota studentului la fiecare examen?

Figura 1.8. Exemplu de relaţie many-to-many

Dacă încercăm să introducem atributul nota la entitatea STUDENT, nu vom şti cărei materii îi corespunde acea notă, întrucât unei instanţe a entităţii STUDENT îi corespund mai multe instanţe ale entităţii CURS. Invers, dacă încercăm să memorăm nota în cadrul entităţii CURS, nu vom şti cărui student îi aparţine acea notă. Rezolvarea unei relaţii many-to-many constă introducerea unei noi entităţi numită entitate de intersecţie, pe care o legăm de entităţile originale prin câte o relaţie one-to-many. Paşii în rezolvarea unei relaţii many-to-many sunt următorii: 

se găseşte entitatea de intersecţie - pentru exemplul nostru, vom introduce entitatea INSCRIERE:

Figura 1.9. Rezolvarea relaţiilor many-to-many, pasul 1

16



Manual de Informatică pentru clasa a XII-a

crearea noilor relaţii: o

opţionalitatea: relaţiile care pleacă din entitatea de intersecţie sunt întotdeauna obligatorii în această parte. În partea dinspre entităţile originale, relaţiile vor păstra opţionalitatea relaţiilor iniţiale.

o

cardinalitatea: ambele relaţii sunt de tip one-to-many, iar partea cu many va fi întotdeauna înspre entitatea de intersecţie.

o

numele noilor relaţii:

Figura 1.10. Rezolvarea relaţiilor many-to-many, pasul 2



adăugarea de atribute în cadrul entităţii de intersecţie, dacă acestea există. În exemplul nostru ne poate interesa, să spunem, data la care s-a înscris un student la un curs, data la care a finalizat cursul, precum şi nota obţinută la sfârşitul cursului.

Figura 1.11. Rezolvarea relaţiilor many-to-many, pasul 3

Capitolul 1. Proiectarea bazelor de date



17

stabilirea identificatorului unic pentru entitatea de intersecţie: dacă entitatea de intersecţie nu are un identificator unic propriu, atunci acesta se poate forma din identificatorii unici ai entităţilor iniţiale, la care putem adăuga atribute ale entităţii de intersecţie. În exemplul nostru, identificatorul unic al entităţii de intersecţie este format din id-ul studentului, id-ul cursului şi data înscrierii la curs. Faptul că identificatorul unic al unei entităţi preia identificatorul unic din altă entitate cu care este legată este reprezentat grafic prin bararea relaţiei respective, înspre entitatea care preia UID-ul celeilalte entităţi:

Figura 1.12. Rezolvarea relaţiilor many-to-many, pasul 4

1. O bază de date va memora orarul unei universităţi. Fiecare curs este parte a unui modul, iar fiecărui curs îi este asociat exact un profesor. La fiecare curs participă mai mulţi studenţi. Fiecare poziţie din orar corespunde unei zile a săptămânii şi unei anumite ore. Fiecare poziţie din orar durează exact o oră, dar uneori un curs poate dura mai multe ore consecutive, însă nici un curs nu poate apărea în zile diferite sau la ore diferite neconsecutive ale aceleiaşi zile. Fiecare profesor şi fiecare student pot avea mai multe ore de curs la care participă în decursul unei săptămâni.

18

Manual de Informatică pentru clasa a XII-a

Care dintre următoarele variante NU este o soluţie posibilă a acestei probleme ? a) Se stabileşte o relaţie one-to-many între CURS şi POZITIE_ORAR; b) Se stabileşte o relaţie many-to-many între CURS şi POZITIE_ORAR; c) Pentru fiecare curs vom avea un atribut start care reţine ora de începere a cursului şi un atribut durată care memorează numărul de poziţii consecutive din orar "ocupate" de acel curs; d) Pentru fiecare curs vom avea două atribute primul şi ultimul care memorează prima şi respectiv ultima poziţie din orar ocupată de acel curs. 2. Fie următoarea hartă a relaţiilor:

Figura 1.13. Relaţia propusă pentru problema 2

Cum se citeşte corect relaţia dintre CLIENT şi MAŞINA?

a) Fiecare CLIENT poate să închirieze o MAŞINĂ şi numai una.

b) Fiecare CLIENT trebuie să închirieze o MAŞINĂ şi numai una.

c) Fiecare CLIENT poate să închirieze una sau mai multe MAŞINI.

d) Fiecare CLIENT trebuie să închirieze una sau mai multe MAŞINI. 3. Numele unei entitǎţi este de obicei: a) un verb;

b) un substantiv ;

c) un adverb;

d) orice cuvânt.

4. Care dintre următoarele variante NU poate reprezenta un atribut al entităţii PANTOF? a) culoare;

b) mărime;

c) model;

d) clasa.

5. Care dintre următoarele fraze pot fi citite din schema de mai jos?

Figura 1.14. Relaţia propusă pentru problema 5

Capitolul 1. Proiectarea bazelor de date

a) b) c) d)

19

Un student poate să urmeze mai multe cursuri. Un curs poate fi urmat de mai mulţi studenţi. Un student trebuie să urmeze un singur curs. Un curs trebuie să fie urmat de un student.

6. Ce semnificaţie are piciorul de cioară (

) în cadrul unui ERD?

a) relaţia este obligatorie; b) relaţia este opţională; c) pot exista una sau mai multe instanţe ale entităţii lângă care apare semnul în relaţie cu o instanţă a celeilalte entităţi; d) niciuna din variantele anterioare.

1. Completaţi în tabelul următor, în prima coloană, câte un exemplu de entitate a cărui atribut este specificat în coloana a doua: Entitate

Atribut culoare nr_calorii volum Tabelul 1.2.

2. Citiţi, în ambele sensuri, următoarele relaţii. Din ce atribute este compus UID-ul fiecărei entităţi?

Figura 1.15. Relaţiile propuse pentru problema 2

20

Manual de Informatică pentru clasa a XII-a

3. Rezolvaţi următoarele relaţii many-to-many:

Figura 1.16. Relaţiile propuse pentru problema 3

4. Daţi două exemple de relaţii one-to-many. (vezi baremele de notare şi de corectare de la pag. 380)

1. Reluaţi aplicaţiile de la pagina 11 şi stabiliţi relaţiile dintre entităţile de la fiecare exerciţiu. Rezolvaţi apoi eventualele relaţii many-to-many. Verificaţi să nu existe relaţii redundante în schemele obţinute. Pentru scenariile de la punctele 2-5, determinaţi entităţile, atributele acestora şi relaţiile dintre entităţi. Desenaţi harta relaţiilor pentru fiecare exerciţiu în parte. 2. O firmă produce mai multe tipuri de maşini, un model fiind caracterizat printr-un nume, mărimea motorului şi un sufix care indică gradul de lux al acesteia (de exemplu XL, GL). Fiecare model este construit din mai multe părţi, fiecare parte putând fi folosită pentru construirea mai multor modele de maşini. Fiecare parte are o descriere şi un cod. Fiecare model de maşină este produs de exact o fabrică a firmei, fabrică ce se poate găsi în una din ţările UE. O fabrică poate produce mai multe modele de maşini şi mai multe tipuri de părţi componente. De asemenea, fiecare tip de parte componentă poate fi produsă de o singură fabrică a firmei.

Capitolul 1. Proiectarea bazelor de date

21

3. O universitate are în componenţa sa mai multe facultăţi, fiecare facultate având mai multe departamente. Fiecare departament oferă studenţilor mai multe cursuri. Un profesor poate lucra la un singur departament al unei singure facultăţi. Fiecare curs are mai multe secţiuni, iar o secţiune poate să facă parte din mai multe cursuri. Un profesor poate preda mai multe secţiuni, din acelaşi curs sau din cursuri diferite, dar o secţiune poate fi predată de mai mulţi profesori. 4. La o facultate este nevoie să se memoreze date despre studenţi, cursuri şi secţiunile fiecărui curs. Fiecare student are un nume, un număr de identificare, adresa de acasă, adresa temporară, pentru cei care nu fac facultatea în localitatea lor. Un student poate opta să urmeze un curs întreg sau doar anumite secţiuni ale unui curs. De asemenea, el poate urma mai multe cursuri şi/sau secţiuni de curs simultan. Un curs poate avea mai multe secţiuni, dar o secţiune poate fi parte a mai multor cursuri. 5. Angajaţii unei firme sunt redistribuiţi la diferitele departamente din cadrul firmei. Dorim ca în baza de date să memorăm, pentru fiecare angajat, departamentul la care lucrează acum, dar şi departamentul la care a lucrat prima dată, la angajarea în firmă.

22

Manual de Informatică pentru clasa a XII-a

1.2. Normalizarea datelor 1.2.1. Ce este normalizarea? Normalizarea este o tehnică de proiectare a bazelor de date prin care se elimină (sau se evită) anumite anomalii şi inconsistenţe ale datelor. O bază de date bine proiectată nu permite ca datele să fie redundante, adică aceeaşi informaţie să se găsească în locuri diferite sau să se memoreze în baza de date informaţii care se pot deduce pe baza altor informaţii memorate în baza de date. Anomaliile care pot să apară la o bază de date nenormalizată sunt următoarele: -

anomalii la actualizarea datelor – închipuiţi-vă că la secretariatul şcolii voastre sunt memorate într-o tabelă informaţiile despre toţi elevii şcolii: nume, adresă, telefon, etc. De asemenea, la biblioteca şcolii există fişele voastre tot într-o tabelă. Aceste fişe conţin numele, prenumele, adresa, telefonul, data înscrierii la bibliotecă, etc. Acum câteva zile v-aţi schimbat domiciliul. Noua adresă trebuie modificată atât la secretariat cât şi în fişa de la bibliotecă şi în toate locurile în care această informaţie apare. Dacă modificarea nu se produce în unul dintre aceste locuri (fie că aţi uitat să anunţaţi, fie din alte motive), datele devin inconsistente. Alt scenariu: la o bibliotecă se înregistrează într-o tabelă următoarele date despre cărţi: ISBN, titlu, autor, preţ, subiect, editură şi adresa editurii. La un moment dat, o editură îşi schimbă adresa. Bibliotecara va trebui să modifice adresa editurii respective în înregistrările corespunzătoare tuturor cărţilor din bibliotecă apărute la respectiva editură. Dacă această modificare nu se face cu succes, unele dintre înregistrări rămânând cu vechea adresă, apare din nou o inconsistenţă a datelor.

-

anomalii de inserare – în exemplul anterior, nu vom putea memora adresa unei edituri, lucru inacceptabil dacă dorim să avem informaţii şi despre edituri a căror cărţi nu le avem în bibliotecă, eventual de la care dorim să facem comenzi.

-

anomalii de ştergere – să presupunem că într-o tabelă memorăm următoarele informaţii: codul studentului, codul cursului şi codul profesorului. La un moment dat, niciun student nu mai doreşte să participe la un anume curs. Ştergând toate înregistrările corespunzătoare cursului, nu vom mai putea şti niciodată cine preda acel curs.

Conceptul de normalizare a bazelor de date a fost pentru prima dată introdus de 1 către Edgar Frank Codd . Formele normale oferă indicaţii pe baza cărora puteţi decide dacă un anumit ERD este bine proiectat, neexpus anomaliilor şi inconsistenţelor. În principiu, normalizarea implică descompunerea unei entităţi în două sau mai multe entităţi, prin compunerea cărora se pot obţine exact aceleaşi informaţii. 1

http://www.acm.org/classics/nov95/toc.html

Capitolul 1. Proiectarea bazelor de date

23

Formele normale se aplică fiecărei entităţi în parte. O bază de date (sau un ERD) se găseşte într-o anumită formă normală doar dacă toate entităţile se găsesc în acea formă normală. Edgar Codd a definit primele trei forme normale 1NF, 2NF şi 3NF. Ulterior, s-au mai definit formele normale 4NF, 5NF şi 6NF care însă sunt rar folosite în proiectarea bazelor de date.

1.2.2. Prima formă normală (1NF) O entitate se găseşte în prima formă normală dacă şi numai dacă: - nu există atribute cu valori multiple; - nu există atribute sau grupuri de atribute care se repetă. Cu alte cuvinte, toate atributele trebuie să fie atomice, adică să conţină o singură informaţie. Dacă un atribut are valori multiple, sau un grup de atribute se repetă, atunci trebuie să creaţi o entitate suplimentară pe care să o legaţi de entitatea originală printr-o relaţie de 1:m. În noua entitate vor fi introduse atributele sau grupurile de atribute care se repetă. Să considerăm entitatea din Fig. 1.17, referitoare la notele elevilor unei clase. Câteva observaţii referitoare la această entitate: câte discipline studiazǎ un elev? Câte perechi (disciplina, nota) va trebui să aibă entitatea ELEV? Să spunem că ştim exact numărul maxim de discipline pe care le poate studia un elev. Ce se întâmplă dacă în anul şcolar viitor acest număr de discipline va fi mai mare? În plus, la o materie un elev poate avea mai multe note. Câte note? Cum memorăm aceste note? Le punem în câmpul corespunzător disciplinei cu virgulă între ele? Cum rezolvăm această problemă? Vom crea o nouă entitate în care vom introduce disciplina şi nota la disciplina respectivă (vezi Fig. 1.18). În acest fel, fiecărui elev îi pot corespunde oricâte note, iar la o disciplină poate avea oricâte note, singura restricţie conform acestui model fiind că un elev nu va putea primi în aceeaşi zi, la aceeaşi materie, mai multe note. Să considerăm un alt exemplu. Pentru managementul unui proiect este important să ştim pentru fiecare membru al echipei care sunt abilităţile de care dispune, pentru a cunoaşte modul în care să atribuim sarcinile în cadrul grupului. Într-o primă etapă, am proiectat o entitate ANGAJAT, care are un atribut abilităţi, ca în Fig. 1.19. Însă se ştie că fiecare angajat are mai multe abilităţi pe care dorim să le memorăm. Aşadar, atributul abilităţi nu respectă prima formă normală. În consecinţă, vom crea o nouă entitate ABILITATE în care vom memora toate abilităţile fiecărui angajat (vezi Fig. 1.20).

24

Manual de Informatică pentru clasa a XII-a

Figura 1.18

Figura 1.17

Figura 1.19

Figura 1.20

1.2.3. A doua formă normală (2NF) O entitate se găseşte în a doua formă normală dacă şi numai dacă se găseşte în prima formă normală şi în plus, orice atribut care nu face parte din UID (Unique IDentifier) va depinde de întregul UID, nu doar de o parte a acestuia. De exemplu, dacă memorăm angajaţii unui departament într-o entitate ca mai jos:

Figura 1.21. Exemplu de entitate

Se observă că data_nasterii şi adresa sunt două atribute care depind doar de id-ul angajatului, nu de întregul UID care este combinaţia dintre atributele id_dep şi id_angajat. Această situaţie se rezolvă prin crearea unei noi entităţi ANGAJAT, pe care o legăm de entitatea DEPARTAMENT printr-o relaţie 1:m.

Capitolul 1. Proiectarea bazelor de date

25

Figura 1.22. Relaţia între cele două entităţi

O situaţie mai specială este în cazul relaţiilor barate, când trebuie ţinut seama că UID-ul unei entităţi este compus din atribute din entitatea respectivă, plus un atribut sau mai multe provenite din relaţia barată. Să considerăm următorul exemplu:

Figura 1.23. Exemplu de relaţie barată

Se observă că UID-ul entităţii APARTAMENT este compus din combinaţia a trei atribute: numărul apartamentului, numărul blocului şi strada. Deci, toate atributele din entitatea APARTAMENT care nu fac parte din UID, trebuie să depindă de întregul UID. Dar se ştie că atributul cod_postal depinde doar de strada şi de numărul blocului, nu şi de numărul apartamentului. Acest lucru ne spune că atributul nu este memorat la locul potrivit. Deoarece depinde doar de combinaţia (strada, nr_bloc), înseamnă că de fapt depinde de UID-ul entităţii bloc. Aşadar, vom muta atributul cod_postal în entitatea BLOC.

Figura 1.24. Rezultatul modificării efectuate

Observaţie ! Dacă o entitate se găseşte în prima formă normală şi UID-ul său este format dintr-un singur atribut, atunci ea se găseşte automat în a doua formă normală.

26

Manual de Informatică pentru clasa a XII-a

1.2.4. A treia formă normală (3NF) O entitate se găseşte în a treia formă normală dacă şi numai dacă se găseşte în a doua formă normală şi în plus niciun atribut care nu este parte a UID-ului nu depinde de un alt atribut non-UID. Cu alte cuvinte, nu se acceptă dependenţe tranzitive, adică un atribut să depindă de UID în mod indirect. Luăm ca exemplu entitatea CARTE din Fig. 1.25. Atributul biografie_autor nu depinde de ISBN ci de atributul autor. Nerezolvarea acestei situaţii duce la memorarea de date redundante, deoarece biografia unui autor va fi memorată pentru fiecare carte scrisă de autorul respectiv. Rezolvarea acestei situaţii constǎ în crearea unei noi entităţi, să-i zicem AUTOR, pe care o legăm de entitatea CARTE printr-o relaţie 1:m (vezi Fig. 1.26).

Figura 1.25. Entitate Iniţială

Figura 1.26. Introducerea unei noi entităţi

Atenţie! Acest model este corect doar dacă se acceptă că o carte are un singur autor. Lăsăm ca temă rezolvarea situaţiei în care o carte poate avea mai mulţi autori. În această situaţie, apare o relaţie many-to-many pe care trebuie să o rezolvaţi.

1. Care dintre următoarele enunţuri NU este un exemplu de redundanţă? a) O relaţie între două entităţi care poate fi dedusă din altă relaţie. b) O valoare dintr-o bază de date care poate fi obţinută direct pe baza altei valori. c) Două atribute din baza de date care au aceeaşi valoare. d) O valoare din baza de date care poate fi obţinută efectuând diferite calcule asupra altor valori. e) Niciuna dintre variantele anterioare.

Capitolul 1. Proiectarea bazelor de date

27

2. Care dintre următoarele cerinţe NU sunt necesare pentru ca o entitate să se găsească în a treia formă normală? a) Trebuie să se găsească în a doua formă normală. b) Fiecare atribut care nu face parte din UID trebuie să depindă de întregul UID. c) Nu trebuie să existe dependenţe tranzitive. d) Niciuna dintre variantele anterioare. 3. Care este cea mai avansată formă normală în care se găseşte entitatea alăturată? a) 1NF; c) 3NF;

b) 2NF; d) ERD-ul nu este normalizat. Figura 1.27. Entitatea propusă

4. În ce formă normală se găseşte fiecare dintre următoarele entităţi? a)

b)

c)

5. Un magazin vinde o gamă variată de pantofi de diferite mărimi şi modele. Un model este identificat printr-un cod. Fiecare model are o descriere şi aceeaşi descriere se poate aplica mai multor modele. Atributul vanzare_saptamanala va memora numărul de pantofi de un anumit model şi o anumită mărime vânduţi săptămâna anterioară (de exemplu, 25 de perechi, model 17, mărimea 39). Atributul valoare_lunara_model reprezintă valoarea totală a pantofilor vânduţi pentru fiecare model în parte, indiferent de model. Desenaţi un ERD în forma normală 3NF, conţinând toate aceste informaţii. 6. Se dă următoarea schemă a unei baze de date existente într-o videotecă. Presupunând că videoteca dispune de un singur exemplar din fiecare film video, stabiliţi în ce formă normală se găseşte acest ERD. Dacă el nu se găseşte în forma normală 3NF, faceţi modificările necesare pentru aducerea sa la forma normală 3NF.

Figura 1.28. Schema propusă

28

Manual de Informatică pentru clasa a XII-a

7. Plecând de la următoarea entitate, desenaţi un ERD în forma normală 3NF:

Figura 1.29. Entitatea propusă pentru problema 7 8. Desenaţi ERD-ul pentru următorul scenariu şi aduceţi-l în forma normală 3NF: într-o clădire se găsesc mai multe birouri. Fiecare birou este identificat unic printr-un număr. În fiecare birou se găseşte un singur telefon. Un telefon poate fi de două tipuri: telefon interior (cu care nu se pot face apeluri în afara clădirii) şi telefon exterior, cu care se pot face apeluri atât în interiorul clădirii cât şi cu exteriorul. Fiecare telefon are un număr unic. Într-un birou pot lucra mai mulţi angajaţi, pentru fiecare cunoscându-se numele, prenumele, adresa, e-mail-ul, data naşterii şi data angajării. Se ştie că un angajat poate lucra într-un singur birou. 9. Modificaţi ERD-ul de la problema anterioară în ipoteza că într-un birou pot exista mai multe telefoane, folosite în comun de către toţi angajaţii care lucrează în acel birou. 10. Aduceţi modificările necesare entităţii alăturate astfel încât să obţineţi un ERD în forma normală 3NF. Entitatea reţine informaţii despre angajaţii unei agenţii de plasare a forţei de muncă, care oferă personal cu normă întreagă sau cu program redus, pentru diferite hoteluri din întreaga ţară. Se memorează numărul de ore lucrate de fiecare angajat în diferite hoteluri. Se ştie că numărul de contract este întotdeauna dependent de codul hotelului dar nu şi invers. Figura 1.30. Entitatea propusă pentru problema 10

Capitolul 1. Proiectarea bazelor de date

29

1.3. Implementarea modelului conceptual 1.3.1. Modele de baze de date Bazele de date au fost concepute pentru stocarea volumelor mari de informaţii relativ omogene între care se pot stabili anumite relaţii. O bază de date este deci o colecţie structurată de date aflate în interdependenţă, date care pot fi consultate pentru a răspunde diferitelor interogări. Înregistrările returnate ca răspuns la o interogare devin informaţii care pot fi utilizate în luarea unor decizii ulterioare. Sistemul complex de programe care permite descrierea, organizarea, memorarea, regăsirea, administrarea şi securizarea informaţiilor dintr-o bază de date se numeşte sistemul de gestiune a bazelor de date (SGBD). Memorarea datelor conţinute de bazele de date se face pe suporturile de memorie internă sau externă folosite de calculatoare. SGBD este un software special asociat bazelor de date care asigură interfaţa între o bază de date şi utilizatorii ei, rezolvând toate cererile de acces la datele memorate. Pentru orice bază de date poate fi compusă o descriere a datelor şi obiectelor memorate, precum şi relaţiile existente între aceste obiecte. O astfel de descriere se numeşte schema bazei de date. Există mai multe modele de baze de date, acestea diferenţiindu-se în funcţie de modul de organizare a schemei bazei de date. Un model de bază de date nu este doar un mod de structurare a datelor, el defineşte de asemenea un set de operaţii care pot fi realizate cu datele respective. Cele mai cunoscute modele de baze de date sunt următoarele: •

•

Modelul tabelar – toate datele sunt memorate sub forma unui singur tabel, un tablou bidimensional de date. Modelul ierarhic – datele sunt organizate sub forma unor structuri arborescente, există deci o rădăcină cu mai mulţi dependenţi, care la rândul lor pot avea alţi dependenţi. IMS (Information Management System) produs de IBM este un exemplu de SGBD bazat pe acest tip de model.

•

Modelul reţea este un model performant, dar complicat. O bază de date de tip reţea reprezintă o colecţie de noduri şi legături, fiecare nod putând fi legat de oricare altul. Legăturile trebuie stabilite având tot timpul în minte interogările posibile şi acţiunile viitoare probabile.

•

Modelul relaţional reprezintă cel mai utilizat model de stocare a datelor, în care datele sunt organizate sub formă de tabele între care există diverse legături.

30

Manual de Informatică pentru clasa a XII-a

•

Modelul obiectual, destinat să suporte modele de obiecte complexe (organizare de tip heap cu referinţe între componente) este oarecum asemănător reţelei, iar prin faptul că pentru accesare directă, stochează o hartă a ierarhiilor şi relaţiilor claselor de obiecte, are ascendent şi în modelul ierarhic. Modelul obiectual se pretează pentru înmagazinarea informaţiilor complexe: atribute descriptive asociate datelor multimedia, documentelor, desenelor, arhivelor, etc.

•

Modelele hibride sunt mixturi ale modelelor prezentate anterior, din care cel mai semnificativ este modelul relaţional-obiectual, obţinut prin extensii ale modelului de organizare tabelar şi izvorât din tendinţa spre universalitate a bazei de date (entităţi complexe şi de naturi diferite, evoluând în condiţii eterogene).

1.3.2. Baze de date relaţionale Bazele de date relaţionale au fost dezvoltate având în vedere în primul rând utilizatorii finali. Acest model are la bază teoria matematică a relaţiilor, ceea ce a făcut posibilă tratarea algoritmică a proiectării bazelor de date şi problema normalizării datelor. Modelul relaţional este un model simplu, bazat pe algebra relaţională, care a făcut posibilă dezvoltarea limbajelor relaţionale sub forma unui software specializat ce asistă procesul de implementare a bazelor de date. Astfel de limbaje sunt SQL-ul (Structured Query Language) şi QBE (Query By Example). În momentul de faţă, există multe sisteme performante de gestiune a bazelor de date relaţionale precum Oracle, DB2, MySQL, Informix, etc. În cazul bazelor de date relaţionale mari şi foarte mari, s-au impus SGBD-uri precum Oracle, DB2 şi Informix. Acestea au la bază tehnologia client-server. Transformarea modelului conceptual, a ERD-ului, în modelul fizic, adică în baza de date propriu-zisă, se numeşte mapare. Acest proces implică transformarea fiecărui element al ERD-ului. Prima etapă a acestui proces constă în crearea tabelelor bazei de date. Astfel: 

fiecărei entităţi îi va corespunde câte un tabel. Spre deosebire de entitate, un tabel va avea numele un substantiv la plural. De exemplu, entitatea ANGAJAT se va transforma în tabela ANGAJAŢI, entitatea ELEV, în tabela ELEVI, etc.



Fiecare atribut al unei entităţi va deveni o coloană a tabelei. Fiecare coloană va memora date de acelaşi tip.



Fiecare instanţă a unei entităţi se va transforma într-un rând (sau înregistrare) al tabelului corespunzător.



Unicul identificator al entităţii devine cheia primară a tabelei. Coloana sau combinaţia de coloane care identifică în mod unic toate liniile unui tabel se numeşte cheie primară.

Capitolul 1. Proiectarea bazelor de date

31

Deci, orice tabelă are linii şi coloane şi conţine datele organizate conform anumitor structuri. În limbajul bazelor de date, coloanele se numesc câmpuri. Fiecare coloană reprezintă un câmp cu o denumire unică, de un anumit tip (şir de caractere, numeric, dată calendaristică, etc.), având o dimensiune prestabilită. Rândurile tabelei se numesc înregistrări. Vom vedea pe parcursul următorului paragraf cum mapăm relaţiile dintre entităţi. numele entităţii la plural  numele tabelei atributul  coloana

instanţa  linia

Figura 1.31. Maparea entităţilor

Informaţiile despre o tabelă a bazei de date vor fi prezentate folosind diagramele de tabelă care sunt nişte tabele de forma celui din Tabelul 1.3, în care vom nota numele coloanelor pe care le va avea tabela bazei de date, notăm dacă o coloană face parte din cheia primară, caz în care vom scrie un pk (primary key) în coloana a treia, sau dacă face parte din cheia străină, caz în care vom scrie în coloana a doua un fk (foreign key), iar în ultima coloană vom nota dacă atributul este opţional sau obligatoriu. Pentru aceasta vom folosi aceleaşi simboluri ca şi în cazul ERD-ului. Asupra cheilor străine vom reveni în paragraful următor. În tabelul 1.3 vedeţi diagrama tabelei CĂRŢI corespunzǎtoare entitǎţii CARTE: Numele coloanei

Tip cheie

Opţionalitatea

titlu

Pk

*

autor

Pk

*

data_apariţiei

*

format

*

nr_pagini

*

Tabelul 1.3. Exemplu de diagramă de tabel

Se observă că deocamdată nu avem nicio cheie străină, deoarece cheia străină provine din relaţiile în care entitatea este implicată. Cum deocamdată această entitate nu are nici o relaţie cu nicio altă entitate, nu vom avea nicio cheie străină.

32

Manual de Informatică pentru clasa a XII-a

Completaţi diagramele de tabelă pentru entităţile de mai jos:

Figura 1.32. Entităţi propuse ca exerciţiu

1.3.3. Maparea relaţiilor 1.3.3.1. Maparea relaţiilor one-to-many Să începem cu un exemplu. Vom considera ERD-ul din Fig. 1.33:

Figura 1.33. Exemplu de ERD

Să ne reamintim cum se citeşte relaţia dintre cele două entităţi: Fiecare JUCĂTOR poate juca într-o ECHIPĂ şi numai una. La fiecare ECHIPĂ trebuie sǎ joace unul sau mai mulţi JUCĂTORI. Observăm că nu putem memora toţi jucătorii care joacă la o echipă în cadrul tabelei ECHIPA, deoarece ar trebui să introducem o coloană cu valori multiple. Invers însă, putem cu uşurinţă să memorăm, pentru fiecare jucător, echipa la care joacă, deoarece acesta nu poate juca decât la o singură echipă.

Capitolul 1. Proiectarea bazelor de date

33

Oare cum putem memora echipa la care joacă un jucător? Răspunsul este destul de simplu. Vom memora pentru fiecare jucător codul echipei la care joacă. Adică diagrama de tabel corespunzătoare entităţii JUCĂTOR va fi următoarea: Numele coloanei Nr_legitimatie Nume Prenume Data_nasterii Adresa Telefon Email cod_echipa

Tip cheie Pk

Fk

Opţionalitatea * * * * * o o o

Tabelul 1.4. Diagrama de tabel corespunzătoare entităţii JUCĂTOR

De pe tabela anterioară puteţi deduce încă un element important al mapării relaţiilor: dacă relaţia pe partea many este opţională atunci şi coloanele cheii străine vor fi opţionale. Ce înseamnă acest lucru? Cum un jucător poate la un moment dat să nu joace la nici o echipă, câmpul cod_echipă va rămâne necompletat în dreptul lui (va avea valoarea NULL). Dacă însă relaţia este obligatorie pe partea many, atunci coloanele ce fac parte din cheia străină vor fi obligatorii. În general, la maparea unei relaţii de tip one-to-many vom introduce, în tabela corespunzătoare entităţii de pe partea many a relaţiei, cheia primară a entităţii de pe partea one a relaţiei. Câmpurile astfel introduse se vor numi chei străine (în engleză, foreign key). Aşadar: -

cheia străină a unei tabele este cheia primară din tabela referinţă;

-

cheia străină este întotdeauna introdusă în tabela corespunzătoare entităţii din partea many a relaţiei. 1.3.3.2. Maparea relaţiilor one-to-one

Dându-se două entităţi A şi B legate între ele printr-o relaţie one-to-one, este evident că putem include cheia primară a lui A în cadrul tabelei B, dar putem proceda la fel de bine şi invers, incluzând cheia primară a tabelei B în cadrul tabelei A, deoarece fiecărei instanţe a entităţii A îi corespunde cel mult o instanţă a entităţii B, dar şi invers, oricărei instanţe a entităţii B îi corespunde cel mult o instanţă a entităţii A. Pentru relaţia din Fig. 1.34, de exemplu, putem memora - pentru fiecare persoană, seria de paşaport, dar şi invers - pentru fiecare paşaport, putem memora cnp-ul deţinătorului.

34

Manual de Informatică pentru clasa a XII-a

Decizia depinde de specificul afacerii modelate. Dacă, de exemplu, ne interesează în primul rând persoanele şi abia apoi datele de pe paşapoarte, atunci vom adopta probabil prima variantă, a memorării seriei de paşaport în cadrul tabelei PERSOANE, iar dacă însă baza de date este destinată evidenţei paşapoartelor, atunci probabil vom adopta varianta a doua.

Figura 1.34. Exemplu de ERD

Uneori este convenabil să memorăm cheia străină în ambele părţi ale relaţiei, în exemplul nostru, pentru fiecare paşaport să memorăm cnp-ul persoanei care îl deţine, dar şi pentru fiecare persoană să memorăm seria de paşaport.

1.3.4. Maparea relaţiilor barate Relaţiile barate se transformǎ în urma mapǎrii în cheie străină în tabela aflată în partea many a relaţiei, la fel ca la maparea oricărei relaţii one-to-many. Bara de pe relaţie exprimă faptul că acele coloane ce fac parte din cheia străină vor deveni parte a cheii primare a tabelei din partea many a relaţiei barate. Pentru exemplul din Fig. 1.35, cheia primară a tabelei ATRIBUTE va fi formată din coloanele denumire_atribut şi denumire_entitate, aceasta din urmă fiind de fapt cheie străină în tabela ATRIBUTE:

Figura 1.35. Maparea relaţiilor barate

Vom avea diagramele de tabel: Numele coloanei denumire

Tip cheie Pk

Opţionalitatea *

Tabelul 1.5. Diagrama de tabel ENTITĂŢI

Capitolul 1. Proiectarea bazelor de date

Numele coloanei denumire_atribut denumire_entitate opţionalitate

Tip cheie Pk Pk, Fk

35

Opţionalitatea * * *

Tabelul 1.6. Diagrama de tabel ATRIBUTE

Să considerăm acum un exemplu în care există mai multe relaţii barate, în cascadă:

Figura 1.36. Relaţii barate în cascadă

Vom avea tabelele de mai jos: Numele coloanei idA C1

Tip cheie Pk

Opţionalitatea * *

Tabelul 1.7. Diagrama de tabel pentru entitatea A

Numele coloanei idB C2 idA

Tip cheie Pk Pk, Fk

Opţionalitatea * * *

Tabelul 1.8. Diagrama de tabel pentru entitatea B

Numele coloanei idC C3 idA idB

Tip cheie Pk Pk, Fk Pk, Fk

Opţionalitatea * * * *

Tabelul 1.9. Diagrama de tabel pentru entitatea C

Numele coloanei idD C4 idA

Tip cheie Pk Fk

Opţionalitatea * * *

Tabelul 1.10. Diagrama de tabel pentru entitatea D

36

Manual de Informatică pentru clasa a XII-a

1. Reluaţi exerciţiile propuse pe parcursul paragrafelor anterioare şi realizaţi maparea ERD-urilor obţinute. 2. Realizaţi maparea următoarei hărţi a relaţiilor.

Figura 1.37. Harta relaţiilor propusă ca aplicaţie

1.3.5. Operaţii specifice prelucrării bazelor de date Orice sistem de gestiune a bazelor de date (SGBD) trebuie să asigure următoarele funcţii: •

definirea structurii bazei de date;

•

încărcarea datelor în baza de date (adăugarea de noi înregistrări la baza de date);

•

accesul la date pentru: o

interogare (afişarea datelor, sortarea lor, calcule statistice, etc.);

o

ştergere;

o

modificare;

Capitolul 1. Proiectarea bazelor de date

•

•

•

37

întreţinerea bazei de date: o

refacerea bazei de date prin existenţa unor copii de siguranţă;

o

repararea în caz de incident;

o

colectarea şi refolosirea spaţiilor goale;

posibilitatea de reorganizare a bazei de date prin: o

restructurarea datelor;

o

modificarea accesului la date;

securitatea datelor.

O parte din aceste operaţii pot fi realizate cu ajutorul limbajului SQL, altele cu ajutorul unor programe specializate, care sunt puse la dispoziţia administratorului bazei de date de către sistemul de gestiune al bazelor de date.

1.3.6. Reguli de integritate Detalierea caracteristicilor pe care trebuie să le prezinte un SGBD pentru a fi considerat relaţional a fost realizată de către E. F. Codd în 1985 sub forma a 13 reguli. Una dintre aceste reguli precizează că restricţiile de integritate trebuie să poată fi definite în limbajul utilizat de SGBD pentru definirea datelor. Regulile de integritate garantează că datele introduse în baza de date sunt corecte şi valide. Aceasta înseamnă că dacă există orice regulă sau restricţie asupra unei entităţi, atunci datele introduse în baza de date respectă aceste restricţii. Tipurile de reguli de integritate sunt următoarele: 

Integritatea entităţilor – indică faptul că nici o coloană ce face parte din cheia primară nu poate avea valoarea NULL. În plus, pentru fiecare înregistrare, cheia primară trebuie să fie unică.



Integritatea de domeniu – acest tip de reguli permite ca într-o anumită coloană să se introducă doar valori dintr-un anumit domeniu. De exemplu, putem impune ca salariul unui angajat să fie cuprins între 4500 şi 5000 RON.



Integritatea referenţială – este o protecţie care asigură ca fiecare valoare a cheii străine să corespundă unei valori a cheii primare din tabela referită. De exemplu, referindu-ne la tabelele JUCĂTORI şi ECHIPE, corespunzătoare ERD-ului din Fig. 1.33, cod este cheie primară în tabela ECHIPE, iar în tabela JUCĂTORI, cod devine cheie străină. Astfel, valoarea câmpului cod din cadrul tabelei JUCĂTORI corespunzătoare unui anumit jucător trebuie să se regăsească printre valorile câmpului cod din tabela ECHIPE, altfel ar însemna că jucătorul respectiv joacă la o echipă inexistentă (vezi Fig. 1.38).

38

Manual de Informatică pentru clasa a XII-a

Figura 1.38. Exemplu de încălcare a integrităţii referenţiale

Situaţii de încălcare a integrităţii referenţiale pot apărea: 

la adăugarea unei noi înregistrări în baza de date, se poate încerca introducerea unor valori invalide pentru câmpurile cheii străine;



la actualizarea bazei de date;



la ştergerea unei înregistrări. De exemplu, se şterge înregistrarea corespunzătoare unei anumite echipe (echipa se desfiinţează). Înregistrările jucătorilor care au jucat la acea echipă vor încălca integritatea referenţială, deoarece se vor referi la o echipă care nu mai există. Soluţiile posibile sunt ca la ştergerea unei echipe, toţi jucătorii care au activat la acea echipă să fie şi ei şterşi din baza de date (ştergere în cascadă), sau valoarea câmpului cod_echipă pentru acei jucători să fie setată la NULL, ceea ce înseamnă că acei jucători nu activează la nicio echipă.

1.3.7. Programe de validare şi de acţiune În realizarea modelului conceptual al unei baze de date se ţine cont de modul în care funcţionează afacerea modelată, datele care trebuie să fie memorate, relaţiile dintre acestea, etc. Modul de utilizare a diferitelor date, modul în care acestea sunt relaţionate pot diferi de la o afacere la alta. Regulile afacerii unei organizaţii se referă în esenţă la procesele şi fluxurile tuturor datelor şi activităţilor zilnice din cadrul organizaţiei. Cum funcţionează organizaţia? Care sunt activităţile sale?

Capitolul 1. Proiectarea bazelor de date

39

Regulile afacerii acoperă următoarele aspecte ale unei organizaţii: 

Orice tip de politici organizaţionale de orice tip şi de la orice nivel al organizaţiei.



Orice tip de formule de calcul (ca, de exemplu, modul de calcul al ratelor pentru diverse împrumuturi, modul de calcul al salariilor, etc.).



Orice tip de reguli impuse de lege sau reguli interne ale organizaţiei.

Regulile simple ale afacerii pot fi implementate în modelul bazei de date prin intermediul relaţiilor dintre entităţi. Acest tip de reguli se numesc reguli structurale. Alte reguli ale afacerii pot fi implementate folosind regulile de integritate despre care am discutat în paragraful anterior. Există totuşi reguli pentru implementarea cărora va trebui să scriem programe speciale folosind limbaje specializate specifice SGBD-ului utilizat. Acest tip de reguli se numesc reguli procedurale.

1. Când mapaţi un ERD, care dintre următoarele afirmaţii NU este adevărată? a) Fiecare entitate este mapată într-o tabelă. b) Fiecare atribut este mapat într-o coloană a tabelei corespunzătoare. c) Fiecare entitate în parte este mapată într-o linie din tabelul corespunzător. d) Fiecare relaţie one-to-many se transformă într-o cheie străină. 2. Într-o tabelă, o instanţă a unei entităţi este mapată ca: a) o relaţie many-to-many;

b) o linie din tabel;

c) o coloană din tabel;

d) un atribut;

e) un index.

3. Două entităţi A şi B se găsesc într-o relaţie one-to-one care este opţională la ambele capete. Care dintre următoarele variante este o soluţie corectă de mapare ? a) Combinarea celor două entităţi A şi B într-o singură relaţie. b) Crearea a două tabele separate şi includerea unei chei străine atât în tabela A cât şi în tabela B. c) Combinarea celor două entităţi A şi B într-o singură tabelă. d) Utilizarea unei chei primare care să fie o combinaţie a cheilor primare din A şi B. 4. Referitor la ERD-ul din Fig. 1.39, care dintre afirmaţiile de mai jos corespund unei variante corecte de mapare? a) Se preia cheia primară din tabela PERSOANE şi se adaugă ca şi cheie străină la tabela MASINI.

40

Manual de Informatică pentru clasa a XII-a

Figura 1.39. ERD propus pentru problema 4

b) Se preia cheia primară din tabela MASINI şi se adaugă ca şi cheie străină la tabela PERSOANE. c) Se creează o singură tabelă cu informaţiile din ambele entităţi. d) Se preiau cheile primare din ambele tabele şi se introduc într-o nouă tabelă numită PROPRIETARI. e) Oricare dintre variantele de mai sus este corectă. 5. O bază de date conţine următoarele tabele: Tabela DEPARTAMENTE DepNo Departament 1 IT 2 Electric 3 Geografie 4 Istorie 5 Business

Tabela ANGAJATI IdAngajat NumeAngajat 1 Ionescu 2 Georgescu 3 Vasilescu 4 Marinescu 5 Andreescu

Tabela ANGAJARI IdAngajat DepNo 1 1 3 2 4 1 3 3 1 2 2 5

Desenaţi ERD-ul din care s-au obţinut prin mapare aceste tabele. (vezi baremele de notare şi de corectare de la pag. 380)

Capitolul 1. Proiectarea bazelor de date

41

1.4. Managementul de proiect 1.4.1. Ce este un proiect ? Un proiect este o secvenţă de acţiuni intercorelate, care se derulează într-o perioadă de timp clar definită şi delimitată, orientate către îndeplinirea unor obiective cu caracter unic şi precis. Putem defini managementul de proiect ca fiind efortul planificării, organizării şi mobilizării resurselor pentru un scop dat. Managementul de proiect este de fapt un instrument, un set de metode şi tehnici care ne ajută să atingem cu eficacitate scopurile şi obiectivele propuse.

1.4.2. Etape în realizarea unui proiect Orice proiect trece printr-o serie întreagă de etape. Ceea ce este important de reţinut este faptul că orice proiect este un proces iterativ, în sensul că orice etapă poate fi repetată de mai multe ori, în funcţie de necesităţile de redefinire a anumitor cerinţe. Etapele principale pe care le parcurgem pentru realizarea unui proiect sunt următoarele: 



Definirea proiectului o

Validarea proiectului – în această etapă vor fi analizate toate documentele prezente în propunerea de proiect. Această analiză va duce fie la confirmarea şi acceptarea proiectului, fie va duce la respingerea, sau eventual regândirea acestuia, în cazul în care propunerea de proiect nu a fost bine realizată, şi resursele au fost subestimate.

o

Definirea proiectului – constă în enunţarea problemei, stabilirea scopului proiectului, stabilirea unei liste a posibilelor soluţii etc. Orice proiect propus poate avea elemente pe care cel care l-a propus nu a considerat necesar să le detalieze, însă echipa de proiect poate avea nevoie de informaţii suplimentare pentru a înţelege corect enunţul proiectului.

Organizarea proiectului o

Stabilirea obiectivelor

o

Stabilirea grupului ţintă - când încercaţi să stabiliţi care este grupul ţintă al unui proiect trebuie să răspundeţi la următoarele întrebări: Cine trebuie să ştie despre proiect? Cine va folosi acest proiect? Asupra cui vor avea impact rezultatele proiectului? Cine finanţează acest proiect? Cine aprobă acest proiect? Cine livrează proiectul? Cine va trebui să fie instruit?

42

Manual de Informatică pentru clasa a XII-a

o

Stabilirea cerinţelor proiectului – este un proces iterativ care poate implica negocierea. Fiind conducătorul proiectului, ştiţi ce este posibil şi ce nu în ceea ce priveşte scopul proiectului, timpul alocat, costurile, cerinţele de calitate etc. Un proiect care nu îndeplineşte cerinţele utilizatorului este din start un eşec.

o

Stabilirea infrastructurii proiectului – infrastructura se referă la elemente precum instrumente de comunicare în cadrul echipei (telefoane mobile, PDA, laptop, etc.), spaţiu de lucru pentru membrii echipei (birou), echipamente de birou, laboratoare, etc.

o

Stabilirea sistemului de calitate a proiectului

o

Formarea echipei de proiect



Planificarea proiectului – planul proiectului prezintă desfăşurarea normală, ideală a unui proiect. Acesta oferă reperele necesare evaluării situaţiei proiectului. Fără existenţa unui plan dinainte stabilit, exercitarea controlului este practic imposibilă.



Elaborarea proiectului – în această etapă se stabilesc detaliile tehnice şi de design, se revizuiesc schemele tehnice, se revizuiesc criteriile de cost şi performanţă. Această etapă vizează conturarea unui model al aplicaţiei. Se proiectează bazele de date, se realizează interfeţele aplicaţiei (rapoarte, ecrane, meniuri etc), se proiectează prelucrările automate, etc.



Dezvoltarea proiectului



Implementarea proiectului – constă în instalarea produsului şi testarea sa, instruirea viitorilor utilizatori. Se testează produsul în condiţii reale, şi se înlătură eventualele erori depistate în funcţionare. Tot în această fază personalul implicat în proiect este redus. Se încep activităţile de publicitate.



Finalizarea proiectului – se elaborează rapoartele finale, se eliberează personalul angajat în derularea proiectului.

1.4.3. Principiile lucrului în echipă Colaborarea înseamnă mai ales implicarea oamenilor în crearea propriilor soluţii la problemele cu care se confruntă. În cadrul unui proces colaborativ, oamenii au ocazia să afle punctul de vedere şi perspectiva celorlalţi şi să gândească împreună soluţii la problemele comune. Colaborarea este o artă ! Sunteţi uneori puşi în situaţia de a vorbi şi colabora cu persoane pe care nu le cunoaşteţi, cu care nu sunteţi de acord sau pe care nu le agreaţi. Mărimea echipei de proiect este un factor important care poate influenţa modul de conducere al acesteia. Într-o echipă prea mare pot apărea probleme de comunicare, dificultăţi în luarea deciziilor. În general, se acceptă că o echipă pentru a putea fi eficientă nu trebuie să depăşească un număr de 10 persoane.

Capitolul 1. Proiectarea bazelor de date

43

În cazul proiectelor cu număr mare de persoane implicate, participanţii la proiect trebuie organizaţi în mai multe echipe satelit intercorelate, coordonate de o echipă principală al cărei rol principal este să asigure o comunicare facilă şi eficientă între toate echipele satelit. Fiecare membru al unei echipe de proiect trebuie să cunoască ceea ce se aşteaptă de la el. Trebuie stabilite de la început rezultatele aşteptate de la fiecare membru al echipei în parte, acţiunile ce trebuie executate pentru obţinerea rezultatului, relaţiile de subordonare în cadrul echipei, metodele de măsurare a performanţei fiecărui membru al echipei. Liderul echipei are în primul rând rolul de a stabili, menţine şi proteja un proces colaborativ care permite tuturor să participe neîngrădit la munca grupului.

1.4.4. Pregătirea şi susţinerea unei prezentări În momentul finalizării unui proiect va trebui să prezentaţi rezultatul muncii voastre în faţa clientului. Susţinerea unei prezentări în public este pentru oricine o sursă de stres. Mulţi oameni ar prefera să evite complet această problemă, dar de multe ori este imposibil de evitat. Indiferent că lucrăm singuri sau în echipă, vom putea fi puşi în situaţia de a face o prezentare publică. Adevărul este că susţinerea unei prezentări publice nu trebuie să fie un motiv de stres. Atât timp cât aveţi în minte câteva principii de bază, vorbitul în public va deveni o experienţă plăcută pentru voi. Iată câteva principii de care trebuie să ţineţi seama pentru a depăşi dificultăţile legate de vorbitul în public: •

Vorbitul în public NU este un motiv real de stres. Mulţi oameni erau la început îngroziţi de ideea de a vorbi în public. Le tremurau genunchii, vocea, gândurile o luau razna. Totuşi, ei au învăţat să elimine definitiv teama de a vorbi în public.

•

Nu îţi propune să fi genial sau perfect, chiar dacă aşa ţi se pare că ar trebui. Ţi se poate întâmpla să greşeşti, ţi se poate întâmpla să uiţi porţiuni întregi din ceea ce vroiai să spui, poţi să nu glumeşti deloc şi totuşi prezentarea ta să aibă succes. Totul depinde de cum defineşti tu şi auditorul tău succesul. Auditorul tău nu aşteaptă de la tine să fi perfect. Cu cât încerci mai tare să fi perfect cu atât mai mult vei adânci anxietatea pe care o ai şi efectul va fi contrar celui scontat. Ceea ce este important atunci când faci o prezentare în faţa unui public este să oferi ceva auditorului. Atâta timp cât auditorul rămâne cu ceva de pe urma prezentării, ei o vor considera un succes.

•

Nu încerca să transmiţi prea multe informaţii într-o prezentare. Nu trebuie să transmiţi “tone” de informaţii şi detalii, oferă publicului doar ceea ce el doreşte cu adevărat. Studiile arată că oamenii îşi amintesc doar foarte puţine elemente din ceea ce vorbitorii prezintă.

44

Manual de Informatică pentru clasa a XII-a

•

Nu încerca să mulţumeşti pe toată lumea, acesta este un punct de vedere nerealist.

•

Nu încerca să imiţi alţi prezentatori, e un lucru foarte dificil. Încearcă să fi tu însuţi, e mult mai uşor.

•

Nu încerca să controlezi comportamentul auditorului. Dacă oamenii sunt agitaţi, nu încerca să le controlezi comportamentul. Dacă cineva vorbeşte cu vecinul, citeşte ziarul sau chiar a adormit în timpul prezentării tale, ignoră-l!

•

Nu te scuza. Auditorul nu are de unde să ştie că ai uitat să spui ceva. Vorbeşte cu încredere, fi convins de ceea ce spui.

•

Organizează logic conţinutul prezentării. Orice prezentare va avea o introducere, conţinutul propriu-zis şi o concluzie.

•

Utilizează materiale audio-vizuale ajutătoare, dacă acestea sunt necesare. O prezentare în PowerPoint, bine realizată, poate fi de un real folos. o

Asigură-te din timp că întregul echipament (calculator, video-proiector, etc) funcţionează.

o

Nu bombarda auditorul cu efecte sonore sau cu animaţii exagerate şi utilizează în mod echilibrat culorile.

o

Include în prezentarea electronică doar cele mai importante idei.

o

Nu încărca slide-urile cu prea multe texte. În general, se admit 7-10 cuvinte pe linie şi maximum 10 linii de text pe un slide.

o

Preferă un grafic în locul textelor, dar nu exagera cu mai mult de două grafice pe un slide.

•

Păstrează contactul vizual cu auditorul. Încearcă în acest fel să faci fiecare persoană din public să se simtă implicată.

•

Fă scurte pauze. Nu alerga prin prezentare, dă-ţi răgazul să respiri. Dă timp audienţei să reflecte la ceea ce ai spus.

•

Adaugă puţin umor prezentării tale, dacă acest lucru este posibil. Păstrează treaz interesul auditorului pe parcursul întregii prezentări.

•

Nu ţine mâinile în buzunar în timpul prezentării !

•

Adoptă o ţinută adecvată în ziua prezentării. Atrage atenţia auditorului asupra a ceea ce spui, nu a mesajelor de pe tricou sau asupra bijuteriilor pe care le porţi !

În acest moment v-aţi însuşit elementele de bază ale modelării bazelor de date. Aţi văzut diverse situaţii ce pot apărea pe parcursul creării modelului conceptual şi cum să rezolvaţi anumite situaţii problemă.

Capitolul 1. Proiectarea bazelor de date

45

În acest subcapitol aţi aflat cum se organizează un proiect, care sunt etapele de realizare ale lui şi cum să organizaţi munca într-o echipă. De asemenea, ştiţi cum să pregătiţi şi să faceţi o prezentare în faţa unui public. Este momentul să aplicaţi toate aceste cunoştinţe!

Formaţi echipe de 2 - 4 elevi, alegeţi-vă o temă de proiect, fie din temele propuse în această secţiune, fie una propusă chiar de voi. Realizaţi modelul conceptual al afacerii modelate. Atenţie! Repartizaţi sarcinile în mod echitabil în cadrul echipei de proiect. Pregătiţi o prezentare a proiectului realizat, materialele vizuale (postere, pliante, prezentarea PowerPoint), care să vă ajute la susţinerea prezentării. Puteţi chiar organiza împreună cu cadrul didactic, un concurs la nivelul clasei sau al şcolii, la care să invitaţi şi alţi profesori din şcoală. Nu uitaţi să documentaţi fiecare presupunere pe care aţi făcut-o în realizarea proiectului! Tema 1: „Campionatul Naţional de Fotbal”. O bază de date memorează informaţii despre jucătorii şi cluburile din cele patru divizii din campionatul naţional de fotbal. Fiecare club de fotbal are un nume unic în întregul campionat. Un club de fotbal poate avea mai multe echipe în campionat. Pentru fiecare echipă se cunoaşte căpitanul său, care este unul dintre jucători. Jucătorii au asociat un identificator unic, un nume, nu neapărat unic şi sunt angajaţi la diferitele echipe. În baza de date se păstrează şi detalii privind nivelul abilităţilor (notă cuprinsă între 1 şi 10) fiecărui jucător pentru fiecare dintre poziţii de joc (portar, apărător, mijlocaş, etc). De exemplu, jucătorul Ionescu poate avea nivelul 10 pe postul de portar, 7 pentru poziţia de apărător, etc. Este important ca în baza de date să se memoreze un istoric al tuturor jucătorilor, la ce echipe au jucat, în ce perioadă, etc. Se va memora şi un istoric al golurilor marcate de fiecare jucător de-a lungul carierei. Pentru fiecare gol se va şti data, meciul în care a fost marcat, minutul, etc. Tema 2: „Firmă de închirieri de maşini”. Trebuie să proiectaţi baza de date a unei firme care oferă spre închiriere maşini de diferite tipuri. Trebuie să păstraţi informaţii despre maşinile firmei, firmele cu care firma are contracte de colaborare (de exemplu, garaje), maşinile închiriate, veniturile firmei şi bineînţeles date despre clienţii firmei. Maşinile sunt descrise prin date precum: producătorul, modelul, anul de fabricaţie, mărimea motorului, tipul de combustibil, numărul de pasageri, numărul de înmatriculare, preţul de cumpărare, data cumpărării, preţul de închiriere şi detalii privind asigurarea maşinii.

46

Manual de Informatică pentru clasa a XII-a

Toate reparaţiile importante asupra maşinilor firmei sunt făcute de firme cu care colaborează. Unele firme solicită plata serviciilor de service imediat după ce reparaţia a fost făcută, altele acceptă plata în rate a serviciilor. Trebuie ţinută evidenţa clară a fiecărei maşini, a celor închiriate, a celor aflate în reparaţii, etc. Se păstrează de asemenea evidenţa tuturor veniturilor şi cheltuielilor firmei: cumpărarea de noi maşini, închirierea de maşini, cheltuieli de reparaţii, vânzarea unor maşini mai vechi din parcul auto (firma preferă să nu păstreze în parcul auto o maşină mai mult de un an), taxe de asigurare a maşinilor etc. Firma deţine un portofoliu de clienţi destul de stabil. Pentru clienţii privilegiaţi oferă reduceri la închirierea de maşini. Aceşti clienţi au de asemenea posibilitatea de a rezerva o maşină din timp. O maşină poate fi închiriată pentru o perioadă de timp de la o zi la un an. Plata pentru închirierea unei maşini se poate face cash sau cu credit card. Se acceptă orice tip de card. Datele importante despre clienţi precum numele, adresa, numărul de telefon, seria permisului de conducere, etc. vor fi şi ele memorate în baza de date. Tema 3: „Firmă IT”. Trebuie să proiectaţi baza de date a unei companii de dimensiune medie din domeniul IT. Firma livrează diferite produse clienţilor săi, de la simple aplicaţii create la cerere, până la instalări de echipamente hardware şi software particularizat. Firma are ca angajaţi diverşi experţi, consultanţi şi personal auxiliar. Întregul personal este angajat pe termen nelimitat, nu există angajaţi temporari sau colaboratori. Compania este împărţită în mai multe departamente, fiecare departament fiind condus de către un angajat din cadrul departamentului respectiv. Pentru un proiect care trebuie dezvoltat în cadrul firmei, se formează o echipă de persoane selectate din mai multe departamente. Managerul de proiect este pe deplin şi exclusiv responsabil de conducerea proiectului, independent de ierarhia de conducere din cadrul firmei. Tema 4: „Spital”. Un spital este format din mai multe secţii, precum Pediatrie, Oncologie, Dermatologie etc. În fiecare secţie sunt internaţi mai mulţi pacienţi, pe baza recomandării medicului de familie şi a confirmării făcute de către un specialist al spitalului. La internare, sunt înregistrate datele personale ale pacienţilor. O fişă separată ţine evidenţa investigaţiilor făcute pacientului pe toată perioada internării, rezultatele acestor investigaţii, tratamentul aplicat pacientului şi rezultatele obţinute în urma tratamentelor efectuate. Un pacient este repartizat unui anumit medic care coordonează toate investigaţiile şi tratamentele aplicate pacientului, însă acesta poate solicita şi altor colegi să examineze pacientul său. Medicii sunt specialişti în diverse ramuri ale medicinii, şi pot avea în supraveghere mai mulţi pacienţi, nu neapărat toţi din aceeaşi secţie. Tema 5: „Editură”. O editură editează cărţi ştiinţifice din diferite domenii. Cărţile sunt scrise de autori specializaţi într-un anumit domeniu. Firma are angajaţi mai mulţi editori care nu sunt neapărat specialişti în diferitele domenii, fiecare editor fiind responsabil pentru mai multe publicaţii. O carte acoperă unul din domeniile în care este specialist autorul, fiecare autor lucrează cu un editor, dar poate avea spre publicare o altă carte de care este responsabil un alt editor.

PARTEA A II-A

CAPITOLUL Limbajul MySQL

În acest capitol veţi învăţa MySQL, limbaj de programare specializat pentru gestiunea bazelor de date relaţionale pe Internet. Cu ajutorul programului EasyPHP, veţi putea lucra uşor pe calculatorul dvs. Ce este şi de ce învăţăm MySQL ?

 

Cum rulăm MySQL pe propriul calculator ? Cum creăm o bază de date ?



Tabele – noţiuni elementare



Tipuri de date, operatori şi funcţii

 

Afişarea c oloanelor care rezultă în urma unui calcul  

Valoarea NULL. Valori implicite

Ce sunt cheile primare şi cheile unice ?  



Autoincrementare

Cum sortăm şi cum filtrăm datele ?

Cum actualizăm datele dintr-un tabel ? 

Funcţii agregate



Utilizarea subinterogărilor



Cum putem grupa datele ?



Ce sunt uniunile de tabele ?

Cuvinte cheie: tipuri de date, operatori, funcţii, valoare implicită, cheie primară, cheie unică, autoincrementare, sortare, filtrare, actualizare, funcţii agregate, subinterogări, grupare, uniune

48

Manual de Informatică pentru clasa a XII-a

2.1. Ce este şi de ce învăţăm MySQL ? În ultimii ani, utilizarea bazelor de date pe Internet a luat o amploare deosebită. Există o mulţime de aplicaţii, extrem de utile (care le utilizează), cum ar fi: -

Aplicaţii de contorizare, aplicaţii prin care cei care au creat un site au posibilitatea să-şi contorizeze numărul de vizitatori ai site-ului respectiv sau, mai mult, contorizarea se poate extinde la nivel de pagină afişată. Pentru a evita cu un vizitator, care a deschis de mai multe ori pagina respectivă, să nu fie contorizat de mai multe ori, se va reţine adresa IP a acestuia.

-

Comerţ electronic, aplicaţii prin care anumite firme îşi promovează şi vând produsele de care dispun. În acest caz, bazele date vor reţine, pe de o parte, informaţii despre produse, iar pe de altă parte, comenzile clienţilor. Avantajele comerţului electronic sunt uriaşe pentru că nu implică cheltuieli pentru spaţiile de desfacere (magazine) şi, teoretic, oferta se adresează clienţilor din toată lumea.

-

Votul electronic, aplicaţii prin care se poate afla părerea vizitatorilor site-ului respectiv referitoare la tema supusă votului. Şi aici este important ca un vizitator să nu voteze de mai multe ori, motiv pentru care baza de date reţine adresa IP a vizitatorului.

-

Aplicaţii de comunicare - aplicaţii prin care diverşi vizitatori ai site-ului respectiv dezbat o anumită problemă, supusă discuţiei. În astfel de cazuri, bazele de date vor reţine informaţii despre cei care scriu (de multe ori, aceştia, mai întâi, trebuie să se înscrie în baza de date a site-ului) şi mesajele acestora.

Există o mulţime de alte aplicaţii ale bazelor de date: site-urile diverselor ziare, posturi de televiziune, bazele de date create şi exploatate de motoarele de căutare, etc. Şirul acestora este practic infinit. Iată motivul pentru care ne vom iniţia în crearea şi exploatarea bazelor de date pe Internet. Ce este SQL ? În practica creării şi utilizării bazelor de date relaţionale s-a impus necesitatea existenţei unui limbaj standard care permite efectuarea acestor operaţii. Astfel, a apărut SQL - Structured Query Language. Limbajul este supervizat de comisia de standardizare ANSI (American National Standards Institute), motiv pentru care se mai numeşte şi ANSI SQL. SQL nu este un limbaj de firmă, el este implementat de o mulţime de SGBD-uri, de această dată consacrate, cum ar fi: Microsoft Access, Oracle, Microsoft SQL Server şi, bineînţeles, MySQL. 1

Ce este MySQL ? MySQL este un limbaj specializat pentru gestiunea bazelor de date relaţionale pe Internet. Aşa cum s-a mai spus, are la bază limbajul SQL. MySQL gestionează baze de date care se găsesc pe server, iar comenzile pot fi date cu ajutorul limbajului PHP, dar şi cu alte limbaje, de exemplu Java. Revedeţi “Capitolul 1. Proiectarea bazelor de date” deoarece stă la baza tuturor noţiunilor prezentate aici! 1

Capitolul 2. Limbajul MySQL

⇒

49

Prin utilizarea pachetului EasyPHP putem să instalăm MySQL pe calculatorul nostru. Vedeţi Anexa 1! Exact în acest mod vom proceda pentru studiul limbajului MySQL, adică vom crea baze de date pe calculatorul nostru.

2.2. Cum rulăm MySQL pe propriul calculator ? Mai întâi, instalaţi pachetul EasyPHP, urmând paşii prezentaţi în Anexa 1. Există două modalităţi prin care se pot da comenzi MySQL pe calculatorul nostru. A) Prin utilizarea unei ferestre MS-DOS. Pentru aceasta va trebui să identificaţi programul ”cmd.exe” care simulează sistemul de operare amintit şi să creaţi un shortcut către acesta. Pentru comoditatea apelului, este indicat ca shortcut-ul să se găsească pe Desktop. În cazul nostru, va trebui ca fereastra CMD să fie deschisă în subfolder-ul bin, al folder-ului care conţine MySQL. Executaţi clic cu butonul drept al mouse-ului şi selectaţi Properties. În edit-ul Start in, al ferestrei care apare, introduceţi calea către subfolder-ul bin al folder-ului mysql. De exemplu, pe calculatorul pe care experimentăm utilizarea MySQL-ului, această cale este: "C:\Program Files\EasyPHP1-8\mysql\bin" Lansaţi în executare programul EasyPHP din meniu: Start, Programs, EasyPHP şi executaţi dublu-clic pe shortcut-ul către CMD. Daţi comanda: mysql -u root -p şi introduceţi parola aleasă. Să observăm că MySQL afişează prompter-ul ”mysql>” (vedeţi în figura de mai jos fereastra CMD):

Figura 2.1. Prompter-ul MySQL din fereastra CMD

De acum putem da comenzi MySQL! Această modalitate de lucru prezintă avantajul că orice eveniment are loc numai ca urmare a unei comenzi date de la tastatură şi pentru început, din considerente pedagogice, este bine să procedăm aşa. Desigur, există şi numeroase dezavantaje, cum ar fi faptul că de multe ori se pierde timpul tastând, pentru că în cazul unei comenzi greşite aceasta trebuie reluată, ş.a.m.d.

50

Manual de Informatică pentru clasa a XII-a

B) Se poate utiliza şi un ansamblu de script-uri PHP aflate în fişierul ”index.php” din folder-ul de phpmyadmin. Daţi browser-ului pe care-l utilizaţi comanda: http://localhost/phpmyadmin/. Va fi afişată o fereastră în care vi se va cere parola (vezi Fig. 2.2.). De acum puteţi lucra cu MySQL prin utilizarea unui mediu vizual.

Figura 2.2. Fereastra de autentificare

Observaţie ! Din considerente pedagogice şi pentru generalitatea prezentării, în această carte vom folosi prima formă, cea în care se lucrează prin utilizarea unei ferestre MS-DOS.

2.3. Crearea unei baze de date ⇒

În MySQL, pentru a crea o bază de date se dă comanda: CREATE DATABASE nume_baza;

În urma acestei comenzi, teoretic, se creează baza de date cu numele indicat. În fapt, se creează un folder cu numele bazei de date în subfolder-ul data al folder-ului MySQL: C:\Program Files\EasyPHP1-8\mysql\data. Dacă există deja o bază de date cu acest nume, se refuză crearea uneia noi. ⇒

În cazul în care, după deschiderea aplicaţiei sau în timpul sesiunii de lucru, se doreşte lucrul cu o anumită bază de date, se dă comada de mai jos: USE nume_baza;

⇒

Pentru ştergerea unei baze de date se utilizează comanda: DROP DATABASE nume_baza

⇒

Uneori, din anumite motive, dorim o listă a bazelor de date existente. În acest caz, se utilizează comanda de mai jos: SHOW DATABASES

Capitolul 2. Limbajul MySQL

51

2.4. Tabele. Noţiuni elementare Într-un tabel coloanele sunt identificabile prin nume, iar rândurile, prin valorile pe care le memorează. Toate datele dintr-o coloană au acelaşi tip. Un tabel are un număr specificat de coloane, dar are un număr nespecificat de rânduri. Uneori, când ne referim la un rând, folosim şi termenul de înregistrare, iar atunci când ne referim la data din rând, situată într-o anumită coloană, folosim 1 şi termenul de câmp . ⇒

O instrucţiune prin care se poate crea un tabel este prezentată mai jos, unde 2 ceea ce este trecut între paranteze drepte este considerat facultativ :

CREATE TABLE nume_tabel ( nume_coloana1 tip_data nume_coloana2 tip_data ... nume_coloanan tip_data );

[specificatori], [specificatori], [specificatori]

Specificatorii se referă la cheia primară, valori distincte, valori implicite, autoincrementare, dacă printre valorile reţinute se poate găsi sau nu valoarea NULL. Toate acestea sunt tratate separat. Exemplul 2.1. Se creează un tabel cu 3 coloane: prima conţine codul materialului şi poate reţine cel mult 5 caractere, a doua conţine denumirea materialului şi poate reţine până la 20 de caractere, iar ultima reţine cantitatea din fiecare material (în bucăţi) şi poate reţine un număr natural cu maximum 3 cifre: CREATE TABLE materiale (cod char(5), denumire char(20), cantitate_buc INT(3) );

⇒

Pentru introducerea rândurilor în tabel se utilizează comanda de mai jos, unde se introduc, pe rând, toate câmpurile unei linii, în ordinea în care au fost declarate coloanele: INSERT INTO nume_tabel VALUES (data1, data2...datan);

Exemplul 2.2. Se inserează în tabel două linii: INSERT IMTO materiale VALUES(‘001’, ‘panouri’,78); INSERT IMTO materiale VALUES(‘007’, ‘placi’,0); Noţiunea de tabel este prezentată pe scurt. O prezentare amănunţită se găseşte în capitolul anterior, “Proiectarea bazelor de date”.

1

Specificatorii vor fi trataţi separat. Tabelul astfel creat nu conţine nicio înregistrare. Pentru adăugarea înregistrărilor utilizăm altă instrucţiune MySQL.

2

52

Manual de Informatică pentru clasa a XII-a

În practica utilizării bazelor de date, instrucţiunea anterioară este considerată ca generatoare de erori, prin faptul că se poate greşi ordinea de introducere a datelor, iar efectul este acela că tabelul va conţine date eronate. Din acest motiv, se preferă forma de mai jos a instrucţiunii, deşi este necesar să scriem mai mult… ⇒

Se inserează în tabel valori pentru coloanele indicate în ordinea în care au fost declarate coloanele: INSERT INTO nume_tabel (nume_coloana1,... nume_coloanak) VALUES (data1,...datak);

⇒

Pentru a afişa întreg tabelul se utilizează comanda: SELECT * FROM nume_tabel

Exemplul 2.3. Pentru tabelul creat anterior se dă comanda: SELECT * FROM materiale

Figura 2.3. Exemplu de tabel

Există posibilitatea să afişăm numai anumite coloane ale tabelului, în ordinea pe care o dorim, dacă folosim instrucţiunea de mai jos: SELECT nume_coloana1,... nume_coloanak FROM nume_tabel 

Să observăm faptul că, atunci când afişăm un tabel, în capul său se trece numele coloanelor din tabel. Dacă dorim ca în capul de tabel să figureze alt nume pentru o coloană, atunci, în instrucţiunea de mai sus, în loc de a scrie numai numele coloanei, vom scrie numele coloanei urmat de cuvântul cheie AS şi de numele care dorim să fie afişat în capul de tabel. Astfel, utilizăm alias-uri pentru numele coloanelor.

Exemplul 2.4. Pentru tabelul de mai sus vom scrie: SELECT cod AS codul, denumire AS nume, cantitate_buc AS cantitate FROM materiale;

⇒

Putem vizualiza numele tabelelor existente în baza de date prin utilizarea instrucţiunii următoare: SHOW TABLES [FROM nume_baza]

⇒

În caz că am uitat care sunt coloanele dintr-un anumit tabel al bazei de date şi tipul acestora, putem utiliza instrucţiunea: SHOW COLUMNS FROM nume_tabel

Capitolul 2. Limbajul MySQL

53

2.5. Tipuri de date în MySQL Aşa cum am văzut, coloanele au un anumit tip. Până în prezent, am utilizat câteva tipuri fără a oferi o prezentare unitară a acestora. Este momentul s-o facem acum. În linii mari, tipurile de date din MySQL se împart în: a) tipuri care reţin şiruri de caractere; b) tipuri numerice; c) tipuri care reţin data, ora. În continuare, vom prezenta detaliat pe fiecare în parte.

2.5.1. Tipuri de date care reţin şiruri de caractere Tipurile care reţin şiruri de caractere sunt prezentate mai jos: Tip

Descriere

CHAR[(n)]

VARCHAR TINYTEXT TEXT

MEDIUMTEXT

LONGTEXT

ENUM

SET

Un câmp de acest tip reţine un şir de caractere de lungime n (fixă). În caz că n nu este precizat, reţine un caracter. Ocupă n octeţi. Un câmp de acest tip reţine şiruri de cel mult 255 de caractere. Un octet reţine lungimea efectivă a şirului. Ocupă n+1 octeţi. La fel ca mai sus. Un câmp de acest tip reţine şiruri de cel mult 65535 de caractere. Doi octeţi reţin lungimea efectivă a şirului. Ocupă n+2 octeţi, unde n este numărul de caractere al şirului. Un câmp de acest tip reţine şiruri de cel mult 16.777.215 caractere. Trei octeţi reţin lungimea efectivă a şirului. Ocupă n+3 octeţi. Un câmp de acest tip reţine şiruri de cel mult 4.294.967.295 de caractere. Patru octeţi reţin lungimea efectivă a şirului. Ocupă n+4 octeţi. Baza va reţine un vector de şiruri de caractere. Un câmp de acest tip poate reţine un singur şir de caractere din vector. De altfel, coloana reţine indicele din şir. Vedeţi exemplul 2.5! Baza va reţine un vector de şiruri de caractere.. Un câmp de acest tip poate reţine unul sau mai multe şiruri de caractere din vector. De altfel, se reţine vectorul caracteristic al şirurilor. Vedeţi exemplul 2.6!

Tabelul 2.1. Tipuri de date care reţin şiruri de caractere

54

Manual de Informatică pentru clasa a XII-a

Exemplul 2.5. Se creează tabelul ”tstA” care are două coloane: prima reţine un şir de cel mult 65.535 de caractere şi a doua, un şir din mulţimea şirurilor ”luni”, ”marti”, ”miercuri”. În tabel se inserează 3 linii şi, la sfârşit, tabelul este afişat. Să observăm că în cazul coloanelor de tip SET, dacă se încearcă memorarea unui şir inexistent în definiţia coloanei (în exemplu, şirul ”joi”), atunci acea coloană va reţine şirul vid. Figura 2.4. Tabelul “tstA”

CREATE TABLE tstA ( v1 TEXT, v2 ENUM (‘luni’,‘marti’,‘miercuri’) ); INSERT INTO tstA VALUES (‘un sir’,’miercuri’); INSERT INTO tstA VALUES (‘un sir’,’joi’); INSERT INTO tstA VALUES (‘alt sir’,’luni’); SELECT * FROM tstA; Exemplul 2.6. Se creează tabelul ”tstB” care conţine două coloane c1, de lungime fixă de 3 caractere şi c2 de tip SET. Un element al coloanei poate reţine o submulţime a mulţimii {”dimineata”, ”pranz”, ”seara”}. Pentru a vedea cum se introduce submulţimea, analizaţi cele trei instrucţiuni INSERT. În figura alăturată puteţi observa tabelul rezultat în urma introducerii datelor. Observaţi faptul că, la ultima inserare, se încearcă introducerea unui şir, ”noaptea”, care nu este prezent în definiţia tipului coloanei. Nu se semnalează eroare, dar şirul nu este introdus.

Figura 2.5. Tabelul “tstB”

CREATE TABLE tstB (c1 char(3), c2 SET (‘dimineata’, ‘pranz’, ‘seara’) ); INSERT INSERT INSERT INSERT

INTO INTO INTO INTO

tstB tstB tstB tstB

VALUES VALUES VALUES VALUES

SELECT c1,c2 FROM tstB;

(‘abc’,‘dimineata,seara’); (‘abc’,‘seara,pranz’); (‘abc’,‘seara’); (‘abc’,‘seara,noaptea’);

Capitolul 2. Limbajul MySQL

55

2.5.2. Tipuri de date numerice Tipurile numerice se împart la rândul lor în tipuri întregi şi tipuri reale. Tipurile întregi se găsesc în tabelul de mai jos: Tip TINYINT

SMALLINT

MEDIUMINT

INT

BIGINT

Descriere Un câmp de acest tip ocupă 1 octet. Reţine numere întregi cuprinse în intervalul [-128,127], iar dacă este urmat de UNSIGNED reţine numere naturale cuprinse în intervalul [0,255]. Un câmp de acest tip ocupă 2 octeţi. Reţine numere întregi cuprinse în intervalul [-32768,32767], iar dacă este urmat de UNSIGNED, reţine numere naturale cuprinse în intervalul [0,65535]. Un câmp de acest tip ocupă 3 octeti. Reţine numere întregi cuprinse în intervalul [-8.388.608, 8.388.607], iar dacă este urmat de UNSIGNED, reţine numere naturale cuprinse în intervalul [0, 16.777.215]. Un câmp de acest tip ocupă 4 octet.i Reţine numere întregi cuprinse în intervalul [-2.147.483.648, 2.147.483.647], iar dacă este urmat de UNSIGNED, reţine numere naturale cuprinse în intervalul [0, 4294967295]. Un câmp de acest tip ocupă 8 octet.i Reţine numere întregi cuprinse în intervalul [-9.223.372.036.854.775.808, 9.223.372.036.854.775.807], iar dacă este urmat de UNSIGNED, reţine numere naturale cuprinse în intervalul [0, 18.446.744.073.709.551.615]. Tabelul 2.2. Tipuri de date numerice întregi

Observaţie ! Uneori veţi folosi declaraţii de tip de genul int(4). Aceasta înseamnă că în coloană se rezervă automat o lăţime de 4 caractere pentru afişarea numerelor. De exemplu, dacă numărul reţinut este 1, atunci el este afişat ca bbb1, unde prin b am notat blank-ul. Aceasta nu afectează valorile care pot fi memorate. De exemplu, dacă dorim să memorăm numărul 12345, acesta va fi memorat şi se va afişa 12345. Dar, astfel este afectată lăţimea întregii coloane. Tipurile reale se găsesc în tabelul de mai jos: Tip FLOAT DOUBLE

Descriere Ocupă 4 octeţi. Ocupă 8 octeţi.

56

Manual de Informatică pentru clasa a XII-a

DECIMAL(n,d)

Numărul este stocat ca şir de caractere. Parametrul n reprezintă numărul de cifre nenule aflate înaintea virgulei, plus, dacă este cazul, 1, pentru semnul -, iar d reprezintă numărul de zecimale. Dacă numărul introdus are înaintea virgulei un număr de cifre +1 (pentru semn) mai mare decât n, acesta este trunchiat, iar dacă numărul de zecimale este mai mare ca d, atunci se reţin exact d zecimale. În acest din urmă caz, numărul se rotunjeşte la exact d zecimale. Tabelul 2.3. Tipuri de date numerice reale

Exemplul 2.7. O coloană are tipul decimal(2,3): Se introduce 1.1 23.4567 1 -5 -15

Se memorează şi afişează 1.100 23.457 1.000 -5.000 -9.999

Tabelul 2.4. Cum se memorează şi se afişează diverse valori cu zecimale

2.5.3. Tipuri de date care reţin anul, data şi ora În tabelul următor aveţi tipurile care reţin anul, data şi ora: Tip YEAR

TIME DATE DATETIME

Descriere Un câmp de acest tip reţine ani. O dată se introduce ca şir de caractere. De exemplu, pentru anul 2001 se poate introduce ‘2001’ sau ‘1’, iar pentru anul 1989 se poate introduce ‘1989’ sau ‘89’. Un câmp de acest tip reţine ora din zi - se introduce ca şir de caractere sub forma ‘hh:mm:ss’. Un câmp de acest tip reţine data. Aceasta se introduce sub forma ‘yyyy-mm-dd’. De exemplu, ‘1999-11-24’. Un câmp de acest tip reţine date de forma dată şi oră. O dată se introduce ca şir de forma: ‘yyyy-mm-dd hh:mm:ss’ Tabelul 2.5. Tipuri de date care reţin anul, data şi ora

Capitolul 2. Limbajul MySQL

57

2.6. Operatori utilizaţi în MySQL Începem prin a prezenta principalii operatori în ordinea crescătoare a priorităţii lor. Utilitatea operatorilor va fi evidenţiată în paragrafele următoare, deocamdată doar îi prezentăm: 1. ||, OR, XOR 2. &&, AND 3. BETWEEN, CASE WHEN, THEN, ELSE 4. ==,>=,= =

sau !=

mai mic. mai mic sau egal mai mare mai mare sau egal egalitate

diferit

Rezultat 2 < 1 ⇒ 0; 1 =7 ⇒ 1; 7 XOR 8 ⇒ 0; 7=7⇒1 ‘un’=’UN’⇒1 12⇒1; 1!=2⇒1; 11⇒0’ 1!=1⇒0;

Tabelul 2.7. Operatori de comparare

Observaţie ! Se pot compara şi date de tipul TIME, DATE, etc. În fapt, o astfel de comparare este lexicografică. Vedeţi exemplul 2.9!

Capitolul 2. Limbajul MySQL

59

Exemplul 2.9. Analizaţi operaţiile de comparare de mai jos: ‘1:12:3’=8 ORDER BY nume;

Figura 2.29. Exemplu de filtrare

74

Manual de Informatică pentru clasa a XII-a

3. Se cere să se afişeze numele elevilor care au promovat la fiecare materie şi media generală pe care aceştia o au.

SELECT nume, (matematica+engleza+informatica)/3 AS media FROM elevi WHERE matematica>4 AND engleza>4 AND informatica>4;

Figura 2.30. Exemplu de filtrare

Observaţie ! Filtrarea datelor este un caz considerat particular al unui concept cu mult mai general, interogarea! De obicei, interogăm o bază de date cu ajutorul instrucţiunii SELECT.

2.15. Actualizări într-un tabel În general, prin actualizarea unui tabel înţelegem modificarea datelor reţinute de acesta şi/sau modificarea structurii sau numelui tabelului. A) Prin actualizarea datelor dintr-un tabel înţelegem operaţii precum inserarea unor linii, modificarea valorilor unor câmpuri şi ştergerea unor rânduri. A1) Pentru inserare, putem utiliza instrucţiunile de mai jos: 1. INSERT INTO nume_tabel [(nume_col1, nume_col2..) VALUES(expresie1, expresie2...) Această instrucţiune a fost deja prezentată, nu vom mai reveni asupra ei. 2. INSERT INTO [DISTINCT} nume_tabel [(nume_col1, nume_col2..) SELECT .... Într-un tabel se pot insera linii dintr-un alt tabel. Pentru aceasta se foloseşte instrucţiunea de mai sus (vezi Exemplul 2.38, pct. 1). Dacă se doreşte inserarea numai a liniilor distincte din tabelul sursă, utilizaţi specificatorul DISTINCT. A2) Pentru a modifica valorile reţinute de un câmp sau mai multe, se utilizează instrucţiunea de mai jos (vezi Exemplul 2.38, pct. 2): UPDATE nume_tabel SET coloana1=expresie1, ... coloanak=expresiek [WHERE conditie];

Capitolul 2. Limbajul MySQL

75

În urma executării acestei comenzi, pentru fiecare rând din tabel care îndeplineşte condiţia din WHERE, se actualizează coloanele indicate de SET cu expresiile corespunzătoare. Observaţie ! În absenţa clauzei WHERE sunt afectate toate rândurile din tabel. A3) Ştergerea unui rând sau a mai multor rânduri se face cu instrucţiunea de mai jos (vezi Exemplul 2.38, pct. 3 şi pct. 4): DELETE FROM nume_tabel [WHERE conditie] Observaţie ! În absenţa clauzei WHERE sunt şterse toate rândurile din tabel. B) Modificări ale numelui tabelului sau a structurii acestuia. B1) Pentru a modifica numele unui tabel se utilizează instrucţiunea: RENAME TABLE nume_vechi TO nume_nou B2) Pentru ştergerea unei coloane, chiar dacă conţine date, se utilizează instrucţiunea: ALTER TABLE nume_tabel DROP COLUMN nume_coloana B3) Pentru adăugarea unei coloane cu un tip de date, se utilizează instrucţiunea: ALTER TABLE nume_tabel ADD nume_col tip; Exemplul 2.38. Fie tabelele de mai jos, ambele cu aceleaşi coloane, de acelaşi tip:

Figura 2.31. Tabelul “prs”

Figura 2.32. Tabelul “prs1”

1. Se cere să se insereze în tabelul ”prs”, acele persoane din ”prs1” care sunt din ”Craiova”. Alăturat, vedeţi tabelul ”prs” actualizat. INSERT INTO prs (nume, oras) SELECT nume, oras FROM prs1 WHERE oras=’craiova’;

Figura 2.33. Tabelul “prs” actualizat

76

Manual de Informatică pentru clasa a XII-a

2. S-a observat că Ioana şi Florin sunt de fapt din braila. Corectaţi datele din tabel! Alăturat aveţi afişat tabelul cu datele actualizate. UPDATE prs SET oras=’braila’ WHERE nume IN (‘ioana’, ‘florin’);

Figura 2.34. Tabelul actualizat

3. Ştergeţi din tabelul ”prs” înregistrarea în care numele este Mirela (vezi figura alăturată): DELETE FROM prs WHERE nume=’Mirela’;

Figura 2.35.

4. Creaţi un nou tabel ”prs2”, cu aceeaşi structură ca şi ”prs”, care să conţină numai persoanele din ”prs” care sunt din Braila şi Ploiesti. CREATE TABLE prs2 AS SELECT nume, oras FROM prs WHERE nume IN (‘braila’, ‘ploiesti’);

Figura 2.36. Tabelul nou “prs2”

Exemplul 2.39. În tabelul alăturat, ”prs”, există mai multe înregistrări identice. Se cere să se elimine duplicatele. a) Creăm un alt tabel, de manevră, numit ”mand”, care conţine aceleaşi înregistrări cu ”prs”, doar că au fost eliminate duplicatele: CREATE mand AS SELECT distinct nume, oras FROM prs; b) Ştergem tabelul ”prs”: DROP TABLE prs;

Figura 2.37. Tabelul “prs”

c) Redenumim tabelul ”mand” ca ”prs” şi-l afişăm pe ”prs”: RENAME TABLE mans TO PRD; SELECT * FROM prs;

Figura 2.38. Tabelul rezultat

Observaţie! Mare atenţie când efectuaţi astfel de operaţii. În cazurile reale, în care tabelele au mii de rânduri, se pot produce pierderi de date. Din acest motiv, înainte de a actualiza un tabel, este bine să-i creaţi o copie de siguranţă pe care, după ce aţi rezolvat problema, s-o ştergeţi.

Capitolul 2. Limbajul MySQL

77

2.16. Funcţii agregate Toate calculele făcute până în prezent au avut ca operanzi doar câmpurile unui aceluiaşi rând. Întrebarea este: se pot efectua calcule cu valorile reţinute de o coloană? Răspunsul este afirmativ. Pentru astfel de calcule se utilizează aşa-numitele “funcţii agregate”. În cele ce urmează, prezentăm aceste funcţii, iar pentru exemplificare utilizăm tabelul ”elevi”, tabel pe care l-am creat în paragraful 2.14. Funcţiile agregate sunt prezentate în tabelul de mai jos: Nume funcţie COUNT() MIN() MAX() SUM() AVG()

Ce realizează Sub forma COUNT(*), afişează numărul de linii ale tabelului. Sub forma COUNT(nume_coloana), numără valorile, din coloana de nume dat, care nu sunt NULL. Sub forma MIN(nume_coloana), calculează cea mai mică valoare din coloană. Valorile NULL sunt ignorate. Sub forma MAX(nume_coloana), calculează cea mai mare valoare din coloană. Valorile NULL sunt ignorate. Sub forma SUM(nume_coloana), calculează suma valorilor dintr-o coloană. Valorile NULL sunt ignorate. Sub forma AVG(nume_coloana), calculează media aritmetică a valorilor dintr-o coloană. Valorile NULL sunt ignorate. Tabelul 2.14. Funcţii agregate

Exemplul 2.40. Câţi elevi sunt în tabel? SELECT COUNT(*) AS numar_elevi FROM elevi;

Figura 2.39.

Exemplul 2.41. Care este numărul de note la engleză? Se afişează 4, pentru că un elev nu are notă la această disciplină (NULL). SELECT COUNT(engleza) AS numar_note_engleza FROM elevi;

Figura 2.40.

Exemplul 2.42. Care este media notelor la informatică? SELECT AVG(informatica) AS media_note_informatica FROM elevi; Figura 2.41.

Exemplul 2.43. Câţi elevi au nota 10 la engleză? SELECT COUNT(engleza) AS elevi_de_zece FROM elevi WHERE engleza=10; Figura 2.42.

78

Manual de Informatică pentru clasa a XII-a

Exemplul 2.44. Câţi elevi au media generală peste 8? SELECT COUNT(nume) AS elevi_peste_8 WHERE (matematica+engleza+informatica)/3>8; Figura 2.43. Rezultat

2.17. Utilizarea subinterogărilor Aşa cum am arătat, filtrările sunt cazuri particulare de interogări. În general, orice rezultat care este obţinut cu ajutorul unei instrucţiuni SELECT este o interogare. La modul general, o interogare poate returna: A) o coloană, eventual cu un singur rând; B) mai multe coloane - în acest caz se poate spune că interogarea returnează un tabel. Problema care se pune în continuare este următoarea: pot fi utilizate datele returnate de o interogare pentru a efectua o nouă interogare? Răspunsul este, în general afirmativ şi este valabil începând cu versiunea MySQL incorporată în versiunea EasyPHP 1.8. În aceste cazuri, prima interogare care se efectuează este interogarea subordonată. Rezultatul ei este utilizat pentru a efectua o nouă interogare. Vom considera, pe rând, cazurile în care interogarea subordonată returnează o valoare, o coloană şi un tabel (mai multe coloane). Toate exemplele care urmează vor avea ca bază de plecare tabelul elevi, utilizat şi în paragrafele anterioare. A) Interogarea subordonată returnează o coloană cu un singur rând Exemplul 2.45. Se cere să se determine numele elevilor care au cea mai mare notă la matematică. Figura 2.44. Rezultatul dorit

Practic, ar trebui să vedem care este cea mai mare notă la matematică, o primă interogare, problemă pe care o rezolvăm utilizând funcţia agregată MAX(), apoi într-o nouă interogare, aflăm numele elevilor care au această notă. În acest caz, interogarea subordonată returnează o valoare, cea maximă. SELECT nume, matematica FROM elevi WHERE matematica=(SELECT MAX(matematica) FROM elevi); Mai întâi, se execută interogarea subordonată, apoi cea care o subordonează. În acest caz, interogarea subordonată calculează nota maximă obţinută la matematică (să observăm că aceasta nu este în mod obligatoriu 10), iar cealaltă interogare returnează numele elevilor cu această notă.

Capitolul 2. Limbajul MySQL

79

Exemplul 2.46. Se cer numele elevilor care au cea mai mare medie la obiectele matematică şi informatică. Vom proceda în acelaşi mod. În primul rând, selectăm media maximă la obiectele amintite, apoi numele elevilor cu această medie. SELECT nume, (matematica+informatica)/2 AS media FROM elevi WHERE (matematica+informatica)/2= (SELECT MAX((matematica+informatica)/2) FROM elevi);

Figura 2.45. Rezultatul obţinut

Exemplul 2.47. Se cer numele elevilor şi media generală, unde media generală a lor este strict mai mare decât media elevilor din tabel. Se cere, de asemenea, ca elevii să fie ordonaţi în ordinea crescătoare a mediilor. Interogarea subordonată calculează media generală a elevilor, iar prima interogare afişează elevii care au media generală peste aceasta. SELECT nume, (matematica+informatica+engleza)/3 AS media FROM elevi where (matematica+engleza+informatica)/3> (SELECT AVG((matematica+engleza+informatica)/3) FROM elevi) ORDER BY media DESC;

Figura 2.46. Rezultatul obţinut

Exemplul 2.48. Care este numele elevilor care au aceeaşi notă la matematică ca şi elevul Popescu Marius? În acest caz, interogarea subordonată returnează nota la matematică a elevului Popescu Marius, iar interogarea care o subordonează returnează numele elevilor care au această notă: SELECT nume FROM elevi WHERE matematica= (SELECT matematica FROM elevi WHERE nume=’Popescu Marius’); Figura 2.47.

Rezultatul obţinut

B) Interogarea subordonată returnează un tabel În acest caz, tabelul returnat de interogarea subordonată trebuie să aibă un nume. Acesta se dă cu ajutorul clauzei AS. De asemenea, interogarea care subordonează adresează câmpurile tabelului, pornind de la numele său, urmat de ‘.’ şi de numele coloanei. Exemplul 2.49. Care este media generală la matematică şi la informatică a elevilor care au cel puţin 8 la una dintre discipline?

80

Manual de Informatică pentru clasa a XII-a

Tabelul returnat de interogarea subordonată conţine notele la matematică şi la informatică ale elevilor care au cel puţin 8 la una dintre aceste discipline. Acest tabel se numeşte virtual. Interogarea principală calculează mediile la matematică şi informatică ale acestor elevi. SELECT AVG(virtual.matematica) AS medie_mate, AVG(virtual.informatica) AS medie_info FROM (SELECT matematica, informatica FROM elevi WHERE matematica>=8 OR informatica>=8) AS virtual;

Figura 2.48. Rezultatul obţinut

2.18. Gruparea datelor Datele dintr-un tabel pot fi grupate în funcţie de valorile dintr-o anumită coloană. De exemplu, datele din tabelul din Fig. 2.49 pot fi grupate după valorile din coloana ”data”. Astfel, un grup este alcătuit din rândurile de tabel corespunzătoare datei ‘2006-03-15‘, altul, corespunzătoare datei ‘2006-03-16‘, ..., altul corespunzător unei date necunoscute (NULL). Prelucrările datelor din fiecare grup se fac cu ajutorul funcţiilor agregate, aşa cum suntem deja obişnuiţi. Pentru a grupa datele din tabel după valorile unei coloane se utilizează clauza GROUP BY nume_coloana, adăugată după numele tabelului. Exemplele care urmează vă vor lămuri! Exemplul 2.50. Se consideră tabelul “vanzari” cu structura de mai jos care conţine data vânzării, numele produsului vândut şi valoarea vânzării din produsul respectiv: CREATE TABLE vanzari ( data DATE, produs CHAR(15), valoare INT); Figura 2.49. Tabelul “vanzari”

Întrebări: 1. Care este numărul de vânzări din fiecare zi? Grupăm datele după dată şi numărăm vânzările pentru fiecare grup.

Capitolul 2. Limbajul MySQL

81

SELECT data, COUNT(*) AS numar_vanzari FROM vanzari GROUP BY data;

Figura 2.50. Numărul de vânzări din fiecare zi

2. Care este suma vânzărilor zilnice? Grupăm datele după dată şi însumăm vânzările pentru fiecare dată în parte: SELECT data, SUM(valoare) AS suma_vanzari FROM vanzari GROUP BY data; Figura 2.51. Suma vânzărilor zilnice

3. Care este numărul de vânzări şi suma vânzărilor în fiecare zi (se va afişa un singur tabel)? SELECT data, COUNT(*) AS nr_vanzari, SUM(valoare) AS suma_incasata FROM vanzari GROUP BY data;

Figura 2.52. Numărul de vânzări şi suma încasată din fiecare zi

4. Care este data în care am am vânzări în valoare maximă, câte vânzări au fost şi care este suma încasată? Ar trebui să obţinem un tabel care să conţină data şi suma vânzărilor zilnice, apoi, din aceasta să selectăm vănzarea maximă şi, apoi, data la care s-a efectuat vânzarea zilnică. În MySQL, în varianta de care dispunem, nu este permisă mai mult de o interogare cu subordonata sa. Din acest motiv, vom crea un tabel de manevră (“manevra“) care conţine data şi suma vânzărilor zilnice (ca la punctul 2). Apoi din acesta, utilizând o interogare cu subinterogare, vom extrage datele cerute. În final, vom şterge tabelul “manevra“. CREATE TABLE manevra AS SELECT data, SUM(valoare) AS vanzare FROM vanzari GROUP BY data; Pentru probă, afişăm tabelul manevra. SELECT * FROM manevra; Figura 2.53. Tabelul “manevra”

82

Manual de Informatică pentru clasa a XII-a

Pornind de la “manevra”, obţinem datele cerute. SELECT data, vanzare FROM manevra WHERE vanzare= (SELECT MAX(vanzare) FROM manevra); Ştergem tabelul ”manevra”:

Figura 2.54. Rezultatul final

DROP TABLE manevra;

2.19. Uniuni de tabele Un punct de maximă importanţă şi eficienţă în utilizarea bazelor de date este dat de uniunea de tabele. Uniunea este alcătuită din două sau mai multe tabele între care există o legătură. De cele mai multe ori, legătura este dată de valorile existente în câte o coloană a fiecărui tabel din uniune. Pentru tabelele care alcătuiesc uniunea se pot utiliza alias-uri de nume, sub forma nume_tabel AS alias_nume, introduse în clauza FROM. Alias-urile pot fi utilizate în orice parte a instrucţiunii select. În aceste cazuri, adresarea unei coloane a tabelului se face sub forma: alias_nume.nume_col. Avantajele utilizării alias-urilor sunt: - se pot asigura nume scurte pentru tabele, gen A, B,..., etc. - în cazul auto-uniunilor, caz care este prezentat în actualul paragraf, un singur tabel poate avea alias-uri diferite, fapt care permite anumite interogări speciale ca şi cum am avea mai multe tabele: A, B, etc. În astfel de cazuri, atunci când ne referim la o coloană, pentru a nu se crea confuzie, trebuie precizat tabelul, cum ar fi de exemplu: A.nume_col, B.nume_col, etc. 1) O primă formă de realizare a unei uniuni este utilizarea instrucţiunii SELECT în care la clauza FROM se trec, pe rând, toate tabelele care o alcătuiesc, iar legătura este precizată cu ajutorul clauzei WHERE. Vezi exemplele 2.51, pct. 1.a), 4, 5. 2) Atunci când uniunea este alcătuită din două tabele, se poate preciza o legătură de tip INNER sub forma de mai jos. În astfel de cazuri, se afişează datele din tabel1 şi din tabel2, pentru care este îndeplinită condiţia din ON. O astfel de uniune se mai numeşte şi uniune interioară. Vezi exemplul 2.51, pct. 1.b)! nume_tabel1 [AS...]INNER JOIN nume_tabel2 [AS...] ON conditia de uniune 3) Atunci când uniunea este alcătuită din două tabele, se poate preciza o legătură de tip LEFT OUTER sub forma de mai jos. În astfel de cazuri, se afişează toate datele din tabel1, iar datele din tabel2 se afişează numai dacă este

Capitolul 2. Limbajul MySQL

83

îndeplinită condiţia din ON, altfel, în locul lor se afişează valoarea implicită (NULL, de cele mai multe ori). O astfel de uniune se mai numeşte şi uniune exterioară stânga. Vezi exemplul 2.51, pct. 2. nume_tabel1 [AS...]LEFT JOIN nume_tabel2 [AS...] ON conditia de uniune 4) Atunci când uniunea este alcătuită din două tabele, se poate preciza o legătură de tip RIGHT OUTER sub forma de mai jos. În astfel de cazuri, se afişează toate datele din tabel2, iar datele din tabel1 se afişează numai dacă este îndeplinită condiţia din ON, altfel, în locul lor se afişează valoarea implicită (NULL, de cele mai multe ori). O astfel de uniune se mai numeşte şi uniune exterioară dreapta. Vezi exemplul 2.51, pct. 3. nume_tabel1 [AS...]LEFT JOIN nume_tabel2 [AS...] ON conditia de uniune Exemplul 2.51. Priviţi tabelele de mai jos, numite "produse" (cel din stânga) şi "date_produse" (cel din dreapta). Logic, legătura dintre ele este dată de coloanele "cod", din fiecare tabel. Astfel, pentru un cod dat, din tabelul "produse" se poate extrage cantitatea existentă într-un magazin dintr-un anumit produs şi denumirea produsului, producătorul său din tabelul "date_produse".

Figura 2.55. Cele două tabele propuse ca exemplu

1. Pentru fiecare produs existent în magazin, care este trecut în tabelul "date_produse", să se afişeze denumirea şi cantitatea. Pentru a rezolva această problemă, vom utiliza două forme de interogare şi ambele dau acelaşi rezultat. a) SELECT B.denumire, A.cantitate FROM produse AS A, date_produse AS B WHERE A.cod=B.cod; b)

SELECT B.denumire, A.cantitate FROM produse AS A INNER JOIN date_produse AS B ON A.cod=B.cod;

Figura 2.56. Rezultatul interogărilor

84

Manual de Informatică pentru clasa a XII-a

2. La fel ca la punctul anterior, numai că se vor trece datele existente pentru toate produsele din tabelul ”produse”: SELECT B.denumire, A.cantitate FROM produse AS A LEFT OUTER JOIN date_produse AS B ON A.cod=B.cod;

Figura 2.57. Rezultat

3. La fel ca mai sus, numai că se vor trece datele existente pentru toate produsele din tabelul ”date_produse”:

SELECT B.denumire, A.cantitate FROM produse AS A RIGHT OUTER JOIN date_produse AS B ON A.cod=B.cod;

Figura 2.58. Rezultat

4. O problemă serioasă care apare în cerinţele de acest tip este dată de faptul că nu întotdeauna, orice cod din primul tabel, în exemplu ”produse”, se află printre codurile din al doilea tabel, în exemplu, ”date_produse”. Se cere să afişăm codurile din tabelul ”produse” care nu se regăsesc între codurile din tabelul ”date_produse”. Analizaţi interogarea de mai jos, este şi un exemplu de utilizare a operatorului NOT IN: SELECT cod FROM produse WHERE cod NOT IN (SELECT cod FROM date_produse);

Figura 2.59.

5. Selectaţi codurile de produse din tabelul ”date_produse” care nu 1 se regăsesc printre codurile din tabelul ”produse” .

SELECT cod FROM date_produse WHERE cod NOT IN (SELECT cod FROM produse);

Figura 2.60.

Auto-uniuni. Se pot obţine rezultate interesante dacă cele două tabele sunt, de fapt, unul şi acelaşi, dar au aliasuri diferite şi se consideră unite printr-o coloană. Exemplul 2.52. În tabelul alăturat, numit “st_or“ (referitor la localităţile din care provin studenţii unei grupe dintr-o facultate), care sunt persoanele care locuiesc în acelaşi oraş cu Ioana?

Figura 2.61. Tabelul “st_or”

În cazul în care considerăm tabelul ”produse” drept tabel tată şi tabelul ”date_produse” drept tabel fiu, pentru a fi respectată integritatea referenţială, ar trebui ca mulţimea acestor coduri să fie vidă. 1

Capitolul 2. Limbajul MySQL

85

Privim acelaşi tabel ca pe două tabele diferite legate prin câmpul oras. Unul dintre tabele are numele A şi al doilea are numele B. Interogarea constă în afişarea tuturor numelor din B care au aceeaşi valoare în câmpul oras cu înregistrarea din A care, pentru câmpul nume, reţine ‘Ioana’. SELECT B.nume FROM st_or AS A INNER JOIN st_or AS B ON A.oras=B.oras AND A.nume=’Ioana’;

Figura 2.62. Rezultatul interogării

Observaţie ! Evident, aceeaşi problemă poate fi rezolvată prin utilizarea mecanismului subinterogărilor. Exerciţiu!

2.20. Elemente care privesc securitatea bazelor de date Asigurarea securităţii bazelor de date este o problemă extrem de serioasă. Paragraful are numai rolul de a vă iniţia în această activitate. În realitate, problema este cu mult mai complexă. Sistemul de privilegii MySQL. O primă problemă care apare este de a securiza, pe cât posibil, bazele de date. Din acest punct de vedere, în afara administratorului, există posibilitatea ca la bazele de date să aibă acces şi alte persoane, identificabile prin nume şi parole. Totuşi, aceste persoane au acces numai la anumite operaţii cu bazele de date. Pentru ca o astfel de persoană (care nu este utilizator) să acceseze baza de date este necesar ca administratorul să introducă numele ei, parola şi operaţiile pe care le poate efectua. Astfel, administratorul va utiliza instrucţiunea MySQL numită GRANT, a cărei formă simplificată o prezentăm mai jos: GRANT operaţii ON nume_bază TO nume_utilizator IDENTIFIED BY ‘parola’; Operaţiile permise sunt: SELECT, UPDATE, INSERT, INDEX, ALTER, CREATE, DROP şi trebuie să fie separate prin virgule. Atunci când accesul utilizatorului este permis pentru orice bază de date, se utilizează *.*. Exemplul 5.70. De acum, utilizatorul lavinia cu parola puful are acces la operaţii de tip SELECT şi INSERT pentru orice bază de date. GRANT SELECT, INSERT ON *.* TO lavinia IDENTIFIED BY ‘puful’

86

Manual de Informatică pentru clasa a XII-a

Pentru a revoca unele drepturi ale unui utilizator sau chiar toate, administratorul foloseşte instrucţiunea REVOKE. Pentru a revoca toate operaţiile permise, se utilizează ALL. REVOKE operaţii ON nume_bază FROM nume_utilizator Exerciţiu. Acordaţi drepturi unor utilizatori, verificaţi dacă le au, revocaţi anumite drepturi şi verificaţi apoi dacă le mai au.

1. ”Materiale”. O firmă dispune de mai multe depozite. În fiecare depozit există mai multe materiale. Pentru fiecare material se cunoaşte preţul şi cantitatea. Se cere să se răspundă la întrebările de mai jos. Tabelul se numeşte ”materiale”.

Figura 2.63. Tabelul “materiale”

1.1. Care sunt materialele existente într-un anumit depozit (în exemplu, ‘Depozit 2’) ? 1.2. Care sunt depozitele în care există un anumit material (în exemplu, ‘material 3’? Se presupune că numele materialului poate fi precedat de blank-uri. 1.3. Care este valoarea totală a tuturor materialelor din depozite? 1.4. Care este valoarea totală a materialelor din fiecare depozit? 1.5. Presupunem că ‘material 1’ se scumpeşte cu 10%. Actualizaţi datele din tabel. 1.6. Să se şteargă un anumit material (‘material 2’) din tabel. 2. “Împrumuturi”. Există persoane care au credite, în acelaşi timp, la mai multe bănci. O astfel de situaţie este prezentată în tabelul de mai jos, numit ”imprumuturi”. Se cere să se răspundă la următoarele întrebări:

Capitolul 2. Limbajul MySQL

87

Figura 2.64. Tabelul “imprumuturi”

2.1. Care sunt persoanele care au împrumutat de la ‘Banca 1’? 2.2. Care este suma împrumutată de fiecare bancă populaţiei? 2.3. Afişaţi, pentru fiecare persoană, numărul împrumuturilor pe care le-a efectuat. 2.4. Care sunt persoanele care au împrumutat o sumă maximă şi care este această sumă? 2.5. Care sunt persoanele care au împrumutat bani cel puţin de la o bancă la care a împrumutat şi ‘Ionescu Grigore’? 3. “Proprietari, proprietăţi”. Se dă un tabel (“proprietari“), în care pentru fiecare persoană se cunoaşte codul (cod) şi numele (nume). Se dă şi un alt tabel (“proprietati“) în care se cunoaşte codul proprietarului (cod_proprietar), tipul proprietăţii (tip_p) şi valoarea proprietăţii (valoare):

Figura 2.65. Tabelul “proprietari” Figura 2.66. Tabelul “proprietati”

3.1. Afişaţi, pentru fiecare proprietar care are cel puţin o proprietate, numărul proprietăţilor. 3.2. Afişaţi numele proprietarilor care nu au proprietăţi. 3.3. Afişaţi codurile proprietarilor din tabelul “proprietati“ care nu au corespondent în tabelul “proprietari“. 3.4. Afişaţi valoarea proprietăţilor pe care le are fiecare proprietar. Datele vor fi afişate în ordinea descrescătoare a proprietăţilor. 4. “Prietenii”. Se dau două tabele (“baieti” şi “fete”) în care pentru fiecare persoană se cunoaşte codul (cod), numele (nume) şi vârsta (varsta). De asemenea, mai există un tabel, numit “prietenii”, în care sunt reţinute relaţiile dintre băieţi şi fete.

88

Manual de Informatică pentru clasa a XII-a

Figura 2.67. Tabelul ” baieti”

Figura 2.68. Tabelul ” fete”

4.1 Care sunt prietenele lui Mihai, cel care are 18 ani? Observaţie ! Se presupune că există un singur băiat Mihai care are 18 ani. 4.2 Afişaţi numele fetelor care nu au prieten. 4.3 Pentru fiecare băiat care are cel puţin o prietenă, afişaţi numele prietenelor pe care acesta le are. 4.4 Afişaţi numele unei fete cu un număr maxim de prieteni şi numărul prietenilor ei. 4.5 Afişaţi media de vârstă a băieţilor şi a fetelor. Figura 2.69. Tabelul ” prietenii”

5. ”Angajaţi”. O firmă doreşte să reţină într-o bază de date un tabel referitor la angajaţi. Motivul este dat de faptul că se vrea obţinerea rapidă a răspunsurilor la întrebările de mai jos. Ce date va reţine tabelul? Cum obţinem răspunsul la întrebări? 5.1 Care sunt numele angajaţilor (în ordine alfabetică)? 5.2 Care sunt angajaţii cu vârsta sub 30 de ani? 5.3 Realizaţi o listă a femeilor angajate şi o alta a bărbaţilor angajaţi. 5.4 Realizaţi o listă a angajaţilor care au studii superioare. 5.5 Care sunt angajatele care sunt în concediu de maternitate? 5.6 Care sunt angajaţii cu o vechime în meseria pe care o practică la firmă de sub trei ani? 5.7 Care sunt angajaţii care au salariul minim pe economie? 5.8 Care sunt angajaţii care au salariul brut mai mare decât cel minim, dar mai mic decât 1000 de lei? 5.9 Care sunt angajaţii care ies la pensie anul următor? 5.10 Care sunt angajaţii care au copii şi câţi copii au? 5.11 Mâine este Sfânta Maria. Care este lista sărbatoritelor? 5.12 Găsiţi angajaţii care îşi sărbătoresc mâine ziua de naştere! 6. ”Cheltuieli / Venituri”. George este o persoană căreia îi place să-şi ţină evidenţa veniturilor şi cheltuielilor. El are un tabel cu următoarele câmpuri: Data, Cheltuiala/Venit, Suma cheltuită sau încasată, Explicaţii (Text). Să presupunem că George şi-a completat tabelul câteva luni, în fiecare zi. Fiecare sumă cheltuită sau încasată este înregistrată pe o linie a tabelului. Se cere: 6.1 Care sunt veniturile totale ale lui George şi care sunt cheltuielile sale pe toată perioada cât a ţinut evidenţa?

Capitolul 2. Limbajul MySQL

89

6.2 A reuşit George să economisească o sumă de bani în această perioadă sau a fost nevoit să se împrumute? Care este suma economisită sau împrumutată? 6.3 În care lună George a cheltuit cea mai mare sumă? 6.4 În care lună George a avut cele mai mari încasări? 6.5 Care este luna în care George a economisit cea mai mare sumă? 6.6 Creaţi un tabel care să conţină toate veniturile lui George pe întreaga perioadă şi un altul care să conţină toate cheltuieliule în aceeaşi perioadă. 6.7 Creaţi un tabel care să conţină, pentru fiecare lună în parte, suma încasărilor şi suma cheltuielilor. 7. ”Biblioteca”. Ioana s-a angajat la o bibliotecă şi doreşte să ţină evidenţa cărţilor pe calculator. 7.1 Ioana doreşte, în primul rând, să ţină evidenţa titlurilor pe care le are la bibliotecă. Pentru aceasta, Ioana codifică toate titlurile şi reţine pentru fiecare titlul, editura şi autorul. 7.2 Pentru a ţine evidenţa numărului de exemplare din fiecare titlu, existente în gestiune, este nevoie de un alt tabel, numit Nr Exemplare. Creaţi-l!. 7.3 Care este legătura între cele două tabele? 7.4 În continuare, trebuie creat un tabel, numit Cititori, care conţine persoanele care împrumută cărţi de la bibliotecă (Nume, Adresa, Nr. telefon) Înainte de a împrumuta o carte, cititorul este înscris în acest tabel. Creaţi-l!. 7.5 De asemenea, trebuie creat un tabel (Imprumuturi) în care, pentru fiecare carte împrumutată, este scrisă o înregistrare care conţine numele cititorului şi codul cărţii (o înregistrare conţine un singur exemplar dintr-un titlu). Creaţi-l! 7.6 Se cere o situaţie în care sunt afişaţi cititorii care au împrumutat o carte de mai mult de două săptămâni. 7.7 Câte exemplare sunt împrumutate din fiecare carte? 7.8 Câte exemplare sunt împrumutate din cartea care are codul x? 7.9 Pentru fiecare carte împrumutată, se cere codul cărţii, tilul şi numărul exemplarelor aflate la cititori. 7.10 Un cititor solicită un anumit titlu. Ioana vrea să vadă dacă există exemplare neîmprumutate din acesta. 8. Problemă pentru lucrul în colectiv! “Grilă“. Scrieţi o grilă cu 18 itemi (18 întrebări la care răspunsul corect este unul singur, ales dintre 4 răspunsuri). În final se va afişa nota obţinută de cel care este testat prin utilizarea acestei grile. Fiecare răspuns corect este punctat cu 0.5 puncte şi un punct se acordă din oficiu. Desigur, dacă este necesar, itemii vor fi însoţiţi de imagini. Problema va fi rezolvată de echipe diferite, pe diverse domenii: informatică, matematică, biologie, limbi străine, chimie, istorie, ş.a.m.d. Un set de astfel de probleme va fi util elevilor din toată ţara! 9. Problemă pentru lucrul în colectiv! “Magazin“. Creaţi un site prin care o firmă vinde calculatoare şi diverese componente de calculatoare. Comenzile se pot face prin intermediul site-ului şi ele sunt stocate în baza de date. Se cere să se efectueze validarea datelor de intrare. De asemenea, reprezentanţii firmelor pot extrage din baza de date comenzile dintr-o anumită zi şi pot memora date referitoare la expedierea produselor. (pentru verificare, rezolvările se găsesc la pag. 381)

CAPITOLUL Primii paşi către construcţia unui site

În acest capitol recapitulăm noţiunile referitoare la Internet care au fost studiate la ”Tehnologia Informaţiei şi a Comunicaţiilor”. De asemenea, vom învăţa să instalăm şi să utilizăm un program FTP prin intermediul căruia vom putea transfera fişiere între calculatorul personal şi server.



Ce este Internet-ul ?

 

Protocolul TCP / IP

Ce trebuie să ştim despre site-uri ?  

Un program FTP

Cum scriem un fişier HTML?

Cuvinte cheie: pagină web, site web, host, ISP, protocol, TCP/IP, DNS, URL, FTP, SMTP, client, server, proxy, HTML, browser

Capitolul 3. Primi paşi către construcţia unui site

91

3.1. Ce este Internet-ul ? ⇒

Prin Internet înţelegem totalitatea calculatoarelor, aflate oriunde în lume, care comunică între ele.



Spunem că două calculatoare comunică dacă între ele are loc un schimb de date. Convenim să numim “host“ (în română, gazdă) un calculator care participă la schimbul de date.

Reţeaua Internet conţine calculatoare de mare viteză, care comunică prin fibră optică şi/sau prin satelit şi au rolul de a transmite rapid informaţia, oriunde în lume. Anumite firme, numite ISP (Internet Service Provider, pe scurt “provider“), dispun de calculatoare performante, numite “server“-e, legate la unul dintre calculatoarele cu rol de transmitere a informaţiei. Provider-ul oferă, contra cost sau din alte raţiuni, diverşilor clienţi posibilitatea cuplării propriilor PC-uri la server, adică accesul la Internet. Provider-ul oferă şi alte servicii, cum ar fi “webhosting“-ul (spaţiu pe hard-disc pentru găzduirea paginilor web, conturi pentru e-mail, precum şi soft specializat pentru manipularea acestora). ⇒

Pentru a accesa Internet-ul de la un oarecare calculator, acesta trebuie să fie conectat la server-ul unui provider. Există mai multe variante de conectare. Precizăm faptul că modalităţile de conectare sunt prezentate în ordinea crescătoare a vitezei de transmisie a datelor. Nu vom prezenta vitezele de transmisie, deoarece acestea sunt într-o continuă creştere, mărginindu-ne numai la a preciza faptul că rata (viteza) de transfer (“Transfer Rate“) a datelor se exprimă în “Mbps“ (mega biţi pe secundă).

Principalele tipuri de conexiuni la Internet 1) Conectare prin intermediul cablului telefonic. Practic, calculatorul se conectează temporar la un server, prin intermediul unui dispozitiv numit “modem“. Prin formarea unui număr de telefon de acces, se obţine conexiunea cu acesta. Cât timp calculatorul este conectat, nu se mai poate utiliza telefonul. 2) Conectare prin ISDN (“Integrated Services Digital Network“) este un serviciu pus la dispoziţie de firma de telefonie fixă. Şi aici, conexiunea este temporară, deci se plăteşte în funcţie de timpul în care suntem conectaţi. Faţă de modalitatea anterioară, în afara vitezei mai mari pentru schimbul de date, aceasta prezintă avantajul că se poate utiliza în acelaşi timp şi telefonul. 3) Conectare prin intermediul liniilor telefonice închiriate. În acest caz, conexiunea este permanentă. Practic, utilizatorul face un contract cu furnizorul de telefonie fixă, care montează o linie telefonică între calculatoarele utilizatorului şi server-ul provider-ului. 4) Conectare prin cablu TV (coaxial). Conectarea permite transmisia datelor şi recepţia programelor TV în acelaşi timp.

92

Manual de Informatică pentru clasa a XII-a

5) Conectare prin fibră optică. Mediul fizic prin care sunt transferate datele este fibra optică, obţinând o rată de transfer mult mai ridicată decât cele anterioare. 6) Conectare prin cablu UTP (Unshielded Twisted Pair) - una dintre cele mai frecvente conexiuni la Internet. Principiul de bază este simplu: mai multe PC-uri se interconectează prin intermediul unui hub/switch, formând o reţea locală. Această reţea de calculatoare se conectează, la rândul ei, printr-o conexiune rapidă (de exemplu, prin fibră optică), cu provider-ul de Internet. 7) Conectare prin unde electro-magnetice terestre sau prin satelit. Aceste tehnologii sunt numite “wireless“ (fără fir). În acest caz, echipamentele sunt mult mai costisitoare şi necesită operaţii complexe de instalare. ⇒

În linii mari, putem considera că Internet-ul oferă următoarele servicii: • World Wide Web (www) - putem crea şi vizita diverse pagini web; • E-mail - serviciu de poştă electronică; • Chat - modalitate prin care doi sau mai mulţi utilizatori pot discuta în acelaşi timp.

Bineînţeles, acestea trei sunt doar baza de la care pornesc o multitudine de alte servicii, cum ar fi: e-commerce (comerţ pe Internet), e-banking (management financiar, plăţi on-line), diverse tipuri de liste de discuţii (forum, newsgroup), etc.

3.2. Protocolul TCP/IP Pentru ca două sau mai multe calculatoare să poată comunica este necesar să existe un “protocol“, adică un ansamblu de norme care trebuie respectate de calculatoare (de programale care rulează pe ele) pentru ca schimbul de date să aibă loc. Normele se referă la: • găsirea calculatorului destinatar al transferului de date; • transmiterea efectivă a datelor; • modalităţi prin care expeditorul comunică faptul că au fost transmise toate datele, iar destinatarul că le-a recepţionat; • compresia datelor - prin aplicarea anumitor algoritmi matematici, datele care urmează să fie expediate sunt prelucrate, de aşa natură, încât să fie memorate prin utilizarea unui spaţiu mai mic de memorie. Prin urmare, transmiterea lor durează mai puţin. Invers, la destinaţie sunt decompresate prin utilizarea aceloraşi algoritmi matematici.

Capitolul 3. Primi paşi către construcţia unui site

93

• identificarea erorilor care pot interveni în transmiterea datelor. Problema este următoarea: de unde “ştie” calculatorul care a recepţionat date dacă acestea sunt corecte? Şi aici există mai mulţi algoritmi care permit identificarea şi corectarea erorilor. ⇒

Pe Internet se foloseşte protocolul TCP/IP (Transmission Control Protocol/Internet Protocol). Protocolul este, de fapt, numele comun al unei familii de protocoale utilizate pentru transferul datelor în reţea. În continuare vom prezenta pe scurt câteva dintre protocoalele din familia TCP/IP.

Orice calculator conectat la Internet are o adresă, numită adresă IP (Internet Protocol Adress). O adresă IP este alcătuită din 4 numere între 0 şi 255. Prin urmare, o astfel de adresă ocupă 4 octeţi. Cum transmisia datelor se face între două calculatoare, datele se transmit de la o adresă IP la alta. 

Protocolul IP (Internet Protocol) reglementează transmiterea datelelor de la o adresă IP la alta. Datele sunt transmise divizate în pachete (packets). Fiecare pachet conţine IP-ul expeditorului şi IP-ul destinatarului.



Prin protocolul TCP (Transmission Control Protocol) se verifică corectitudinea transmisiei.

În Internet se pot accesa anumite resurse, fişiere de orice tip (html, imagine, date, etc). Orice resursă are, aşa cum ştim, o anumită adresă, numită adresa URL (Uniform Resource Locator). De exemplu, dacă adresa unui site este “http://www.exemplu.ro“, ea este o adresă URL. De fapt, este adresa fişierului index, care are adresa completă “http://www.exemplu.ro/index.html“, în cazul în care fişierul index are extensia html. De asemenea, un fişier imagine, să spunem “iepure.jpg“, aflat în folder-ul “img“ al site-ului din exemplu, are adresa URL: “http://www.exemplu.ro/img/iepure.jpg“. 

DNS (Domain Name System) asigură legătura dintre adresa URL a unui site şi adresa IP a acestuia. Practic, în edit-ul browser-ului se tastează adresa URL, acesta o transmite, dar prin algoritmul impus de acest protocol se găseşte adresa IP asociată. Transferul datelor se efectuează, aşa cum s-a arătat, utilizând adresa IP găsită.



FTP (File Transfer Protocol) are rolul de a reglementa transferul fişierelor între două calculatoare. Există programe specializate care, prin utilizarea acestui protocol, transferă fişiere. De regulă, utilizarea lor se face în situaţia în care o persoană gestionează un site web aflat pe un alt calculator (server). Atunci când aceasta actualizează site-ul, transferă fişiere către server.

94



Manual de Informatică pentru clasa a XII-a

SMTP (Simple Mail Transfer Protocol) are rolul de a reglementa transferul e-mail-urilor.

Din cele prezentate până în acest moment, rezultă că fiecare calculator care participă la schimbul de date pe Internet are o adresă IP permanentă. În realitate nu este chiar aşa… Unele calculatoare au într-adevăr o adresă IP permanentă, însă altele nu. Să prezentăm două cazuri: 1) Ne conectăm de la PC-ul de acasă, prin linie telefonică, la Internet. În acest caz, calculatorul nostru se numeşte client, iar cel al provider-ului server. Provider-ul dispune de o mulţime de adrese IP care urmează să fie alocate. Calculatorului nostru i se alocă, automat, o adresă IP care este disponibilă în acel moment. Un astfel de server rulează un soft special, care utilizează protocolul DHCP (Dynamic Host Configuration Protocol). După închiderea conexiunii, acea adresă IP se va putea aloca altui client. 2) Dispunem de o reţea de calculatoare şi dorim ca de pe fiecare calculator din reţea să putem accesa Internet-ul. În acest caz, se obişnuieşte ca un calculator al reţelei, numit “server proxy“, să fie cuplat la Internet printr-o linie închiriată (aceasta asigură o viteză de transfer suficient de mare). Toate celelalte calculatoare ale reţelei accesează Internet-ul prin intermediul său. Evident, pe server-ul proxy trebuie să existe un soft specializat. Toate calculatoarele din reţea au şi ele adrese IP, dar interne, nerecunoscute decât în reţeaua locală, nu şi pe Internet, dar server-ul proxy utilizează o adresă IP recunoscută pe Internet.

3.3. Despre site-uri ⇒

⇒

Dacă o persoană (sau societate comercială), care are acces la Internet, doreşte să aibă un site, va apela la serviciile unei firme specializate (numită “provider“). Provider-ul dispune (sau a închiriat la rândul lui) de unul sau mai multe calculatoare extrem de performante, cuplate la Internet prin linii care permit transferul rapid al datelor şi care rulează programe specializate, numite “server“-e şi pune la dispoziţie: •

spaţiu pe hard-disc-ul server-ului de cel puţin 10Mb;

•

o adresă de Internet (de exemplu, www.adresa.ro ). 1

În spaţiul rezervat, persoana (firma) pune mai multe fişiere care conţin, de regulă, fişiere HTML (Hyper Text Markup Language), dar şi alte fişiere (gif, jpeg, doc). Prin aceste fişiere se poate descrie activitatea firmei, se poate face comerţ electronic, se poate prezenta o anumită temă, etc).

Aveţi posibilitatea ca site-ul să aibă asociată o adresa URL oferită gratuit de provider sau să cumpăraţi o astfel de adresă.

1

Capitolul 3. Primi paşi către construcţia unui site ⇒

95

Pentru a putea vizita o pagină, este necesar un program specializat, numit generic “browser“. Acesta trebuie să se găsească pe calculatorul celui care doreşte să viziteze pagina respectivă şi, în linii mari, are funcţiile: 1. permite utilizatorului să introducă adresa URL a paginii respective şi transmite cererea către server, pentru ca acesta să-i furnizeze fişierul HTML care conţine codul respectivei pagini, dar şi fişierele care reţin imaginile din pagină (cu extensia jpeg, gif, etc). 2. după ce primeşte codul HTML al paginii respective, interpretează comenzile pe care le conţine şi îl afişează.

Evident, conţinutul site-ului poate fi accesat de pe orice alt calculator conectat la Internet. Terminologie. Calculatorul pe care se găseşte site-ul se numeşte, aşa cum am precizat, “server“, iar calculatoarele care accesează conţinutul site-ului se numesc, în acest caz, “client“. Un astfel de model de transmisie a datelor poartă denumirea de “client-server“ (vezi Fig. 3.1).

Server

Cerere

Răspuns

Răspuns

Cerere

Cerere Răspuns

Client 3

Client 1

Client 2 Figura 3.1. Exemplu de model de tip client-server

Întrebările fireşti în acest moment sunt este: ce software este necesar să existe pe calculatorul client şi ce software trebuie să existe pe server?

96

Manual de Informatică pentru clasa a XII-a

3.3.1. Software-ul necesar pentru calculatorul “client” Orice calculator client trebuie să dispună de un browser, cu ajutorul căruia să se poată vizualiza fişierele HTML. Există mai multe programe de tip browser, cum ar fi: Internet Explorer, Firefox, Mozilla, Opera, Netscape, fiecare dintre acestea având mai multe versiuni. Din păcate, între acestea există anumite diferenţe atunci când afişează fişierele HTML. Evident, există multe puncte comune. Este recomandabil, ca atunci când scriem codul necesar unei pagini web, să utilizăm specificaţiile de HTML standard şi, mai ales, să testăm pagina utilizând cât mai multe tipuri de browser-e. Pentru a gestiona un site web, aflat evident pe server, utilizatorul are nevoie de un program FTP prin care să poată efectua mai multe operaţii asupra spaţiului rezervat pe server: transfer sau ştergere de fişiere şi creare, modificare sau ştergere de folder-e.

3.3.2. Software-ul necesar pentru calculatorul “server” În primul rând, pe server trebuie să se găsească un program care răspunde cererilor browser-rui aflat, aşa cum s-a spus, pe calculatorul client. Un astfel de program se numeşte program de tip server. Atunci când, de exemplu, dorim să vizualizăm o anumită pagină, tastăm adresa URL în edit-ul browser-ului şi apăsăm tasta Enter sau efectuăm clic pe butonul GO. Browser-ul emite o cerere către server pentru ca acesta să-i trimită fişierul respectv. Evident, dacă este posibil, server-ul va furniza browser-ului fişierul solicitat. Cererea efectuată de browser şi răspunsul server-ului se fac prin respectarea unui anumit protocol. Acest proticol se numeşte HTTP (Hyper Text Transfer Protocol). Prin urmare, un program de tip server răspunde cererilor care se conformează protocolului HTTP. Există mai multe programe de tip server, cel mai popular fiind Apache, care lucrează pe server-e cu sistemul de operare Linux, dar şi pentru cele cu sistemul de operare Windows. El este dezvoltat de Apache Software Foundation şi 1 este de tip “open source“ . Un alt program de tip server este Microsoft IIS (Microsoft Internet Information Services), destinat sistemelor de operare de tip Windows. Facultativ, pe server se găsesc programele PHP şi MySQL. Bineînţeles, închirierea unui spaţiu pe un server care deţine aceste programe este mai scumpă. PHP-ul permite ca paginile web sa fie personalizate, iar cu ajutorul MySQL-ului se pot crea baze de date pe Internet. De asemenea, cu ajutorul PHP-ului se pot da comenzi MySQL-ului pentru crearea şi actualizarea bazelor de date. Termenul descrie accesul gratuit la codul sursă al unui produs software, care este disponibil spre a fi copiat, modificat şi personalizat de către oricine, fără a fi impuse drepturi intelectuale restrictive asupra programului.

1

Capitolul 3. Primi paşi către construcţia unui site

97

Observaţie. Puteţi să obţineţi gratuit spaţiu pe server şi adresa URL pentru site-ul dvs., pentru că există firme care oferă aceasta utilizatorilor. Căutaţi cu Google! Din păcate, este puţin probabil să găsiţi gratuit un server care are PHP şi MySQL. Oricum, chiar şi în aceste condiţii, se pot crea site-uri reuşite utilizând doar limbajul HTML. Dacă doriţi un site care să conţină PHP şi MySQL, limbaje care vor fi prezentate în această carte, atunci trebuie să plătiţi acest serviciu suplimentar. Modalitatea de instalare a programelor Apache, PHP şi MySQL este detaliată în Anexa 1, care se găseşte la pag. 370.

3.4. Un program care lucrează sub FTP Să presupunem că am obţinut un anumit spaţiu pe un server, avem o adresă URL pentru site şi acum vrem să-l construim şi să-l putem întreţine. Problema care se pune în continuare este transferul fişierelor de pe calculatorul personal (client) către server şi invers. În această carte vom utiliza un program care lucrează sub protocolul FTP şi anume “WS_FTP95“. Acest program poate fi descărcat de pe pagina web “www.uottawa.ca/help/ws_ftpe.html“, iar dacă această adresă nu mai este actuală, identificaţi o nouă locaţie de unde poate fi download-at (cu Google, textul “ws_ftp95 download“). După ce aţi instalat programul, va apărea o cutie de dialog în care trebuie să introduceţi datele de identificare. Am presupus că adresa URL a site-ului este: “www.invatare.b0x.com“ (vezi Fig. 3.2).

Figura 3.2. Fereastra de introducere a datelor de identificare

Dacă introducerea datelor de identificare s-a făcut în mod corect, automat programul va afişa conţinutul fişierelor din site în cadrul din partea dreaptă şi a unui folder de pe propriul calculator în stânga. De aici şi modalitatea de lucru: vom avea pe hard-disc un folder care reţine fişierele care trebuie să fie transferate pe site. Acesta este folder-ul (în exemplu, “PTest“) care este afişat de programul FTP (vezi Fig. 3.3). Pe server avem două fişiere, iar cel care ne interesează iniţial este “index.html“.

98

Manual de Informatică pentru clasa a XII-a

Trecerea unui fişier de pe propriul calculator pe site se face prin operaţia Drag and Drop (se mută cursorul grafic asupra sa, apăsăm butonul stâng şi-l “tragem” către panoul din dreapta) sau selectăm fişierul şi-l transferăm cu ajutorul butonului săgeată. Analog, se poate muta un fişier de pe site pe calculatorul nostru.

Figura 3.3. Fereastra programului WS_FTP95 ⇒

Ştergerea unui fişier sau folder se face cu butonul Delete.

⇒

Crearea unui folder (director) se face prin apăsarea butonului MkDir.

⇒

Apăsarea săgeţii are ca efect trecerea în folder-ul părinte.

⇒

Schimbarea unităţii de disc pe propriul calculator se face prin executarea unui clic asupra numelui ei (vezi fig. alăturată). Figura 3.4. Lista unităţilor de disc de pe calculatorul client



După cum observaţi, este foarte simplu să lucrăm cu un program FTP. Pentru transfer, bifaţi butonul ASCII. Veţi fi scutiţi astfel de anumite erori care pot apărea la executare.

Capitolul 3. Primi paşi către construcţia unui site

99

3.5. Cum scriem un fişier HTML ? Presupunem că avem un site web şi putem să transferăm fişiere de la calculatorul nostru către el şi invers. Ştim că, pentru a scrie o pagină web, trebuie să cunoaştem limbajul HTML (HyperText Markup Language). Acesta este prezentat detaliat în Capitolul 4. Întrebarea la care răspundem în acest moment este următoarea: cum se scrie codul HTML? ⇒

Browser-ul poate afişa un fişier HTML aflat pe calculatorul nostru. Un astfel de fişier are una dintre extensiile: htm sau html. Puteţi căuta cu Find un astfel de fişier şi executaţi dublu clic pe icon-ul său. Imediat va fi apelat browser-ul, iar acesta va afişa fişierul.

⇒

Mai ştim că, atunci când browser-ul afişează un astfel de fişier, putem vedea codul său sursă (din meniul View, apelăm comanda Source). Automat, se va lansa programul NOTEPAD care realizează aceasta.

De aici rezultă şi modul în care vom scrie astfel de fişiere: a)

Vizualizăm cu My Computer folder-ul unde dorim să se găsească fişierul.

b)

Apelăm la meniul flotant (clic cu butonul drept al mouse-ului) şi alegem New şi Text Document. Programul NOTEPAD va crea un fişier fără conţinut, cu extensia txt.

c)

Modificăm numele şi extensia fişierului. La fel, atunci când cursorul grafic se găseşte deasupra icon-ului său, apăsăm butonul drept al mouse-ului şi alegem Rename. Vom scrie un nume dorit de noi, iar extensia va fi html. Fie numele său ”primul.html”. Întrucât extensia html este asociată browser-ului (Internet Explorer, la noi), fişierul va avea de această dată icon-ul browser-ului (vezi Fig. 3.4).

Figura 3.4. Exemplu de fişier HTML

d)

Executarea unui dublu clic asupra icon-ului are ca efect lansarea browser-ului care va afişa fişierul. Evident, în această fază, conţinutul său este vid.

e)

Apelaţi din meniu View şi Source. Programul NOTEPAD va încărca codul HTML al fişierului (conţinutul este vid), deschizând-ul astfel pentru editare.

100

Manual de Informatică pentru clasa a XII-a

f)

Scrieţi un text la alegerea dvs. Exemplu: “Acesta este primul text”. Salvaţi-l!

g)

În fereastra browser-ului apăsaţi butonul Refresh. Prin această operaţie am comandat reîncărcarea fişierului, întrucât i-am schimbat conţinutul. Textul va fi afişat de browser:

Figura 3.5. Vizualizarea fişierului prin browser

Observaţii 

Procedând astfel, putem scrie uşor cod HTML. Din când în când, vizualizăm efectul modificărilor şi identificăm eventualele erori.



După cum vă puteţi da seama, operaţia de scriere a codului nu presupune accesul la Internet.

Validatoare HTML Am văzut cum se scrie, în mod clasic, codul HTML. Dacă dorim, în scrierea codului se pot utiliza diverse validatoare (programe specializate) HTML. Care este rostul lor? •

Validatoarele HTML lucrează la fel de uşor ca NOTEPAD-ul. Ele scriu direct fişiere cu una din extensiile htm sau html.

•

Apăsarea unui buton al validatorului are ca efect lansarea browser-ului care afişează fişierul (procedând astfel, lucrăm mai eficient).

•

Putem valida fişierele HTML (adică verificăm corectitudinea din punct de vedere sintactic - la identificarea unei erori, ne este indicată locaţia sa).

Capitolul 3. Primi paşi către construcţia unui site

101

De ce este utilă operaţia de validare a fişierelor HTML? Trebuie urmărit modul în care procedează browser-ul atunci când codul HTML nu este corect. Browser-ul va afişa ceea ce “distinge” din cod, deci nu va semnala eroarea. Uneori, o eroare poate trece neobservată deoarece browser-ul de care dispunem trece peste ea. Dar, cum nu există un singur program de tip browser, un alt tip ar putea afişa informaţia incorect. 

Un exemplu de astfel de validator, gratuit, este CSE HTML Validator Lite, care poate fi descărcat de pe pagina: “www.htmlvalidator.com/lite“.



Nimeni nu vă opreşte să căutaţi şi alte validatoare HTML. Folosiţi motorul de căutare GOOGLE!

Comentarii în documentul HTML Un document HTML poate conţine comentarii. Un comentariu arată ca mai jos şi poate fi aşezat oriunde în document. Evident, comentariile nu sunt afişate de către browser.



În cazul unor pagini complexe, cu multe elemente, comentariile sunt extrem de utile pentru realizatorul site-ului. Indicând printr-un comentariu o anumită porţiune din fişier, el va şti mult mai uşor locaţia codului respectiv pentru a efectua modificarea.

Prin Internet înţelegem totalitatea calculatoarelor, aflate oriunde în lume, care comunică între ele. Pentru a comunica ele pot fi conectate printr-una dintre formele de mai jos:       

cablul telefonic; ISDN (Integrated Services Digital Network); linii telefonice închiriate; cablu TV (coaxial); cablu UTP (Unshielded Twisted Pair); fibră optică; unde electro-magnetice terestre sau prin satelit.

102

Manual de Informatică pentru clasa a XII-a

Pentru ca două sau mai multe calculatoare să poată comunica este necesar să existe un ”protocol”, adică un ansamblu de norme care trebuie respectate de către calculatoare (de programale care rulează pe ele) pentru ca schimbul de date să aibă loc. Protocolul TCP/IP (Transmission Control Protocol/Internet Protocol) este numele comun al unei familii de protocoale utilizate pentru transferul datelor în reţeaua Internet. Dintre acestea, cele mai importante sunt: 

Orice calculator conectat la Internet are o adresă, numită IP, alcătuită din 4 numere între 0 şi 255. Protocolul IP (Internet Protocol) este răspunzător de transmiterea datelor de la o adresă IP la alta. Datele sunt transmise divizate în pachete (packets). Fiecare pachet conţine IP-ul expeditorului şi IP-ul destinatarului.



Prin protocolul TCP (Transmission Control Protocol) se verifică corectitudinea transmisiei.



DNS (Domain Name System) asigură legătura dintre adresa URL a unui site şi adresa IP a acestuia.



FTP (File Transfer Protocol) are rolul de a reglementa transferul fişierelor între două calculatoare.



SMTP (Simple Mail Transfer Protocol) are rolul de a reglementa transferul e-mail-urilor.

În cazul site-urilor web folosim următoarea terminologie: calculatorul pe care se găseşte site-ul se numeşte ”server”, iar calculatoarele care accesează conţinutul site-ului se numesc ”clienţi”. Acest model de transmisie a datelor se numeşte “client-server”. 1. Pe calculatorul client trebuie să avem instalat un browser, program cu ajutorul căruia să putem vizualiza fişiere HTML. Există mai multe programe de tip browser, cum ar fi: Internet Explorer, Firefox, Mozilla, Opera sau Netscape. În cazul în care o persoană gestionează un site, aflat evident, pe sever, atunci aceasta trebuie să dispună pe calculatorul său de un program FTP prin care să transfere fişiere pe server, şă steargă fişiere aflate pe acesta, să creeze şi să şteargă folder-e de pe server. În această carte folosim programul ws_ftp95. 2. Pe server trebuie să avem instalat un program specializat care să răspundă cererilor browser-rului. Un astfel de program se numeşte program de tip server. Cel mai des utilizat este Apache. Conversaţia între browser şi programul de tip server respectă protocolul HTTP (Hyper Text Transfer Protocol). De asemenea, pentru a studia materia din această carte trebuie să avem instalate PHP şi MySQL. Toate acestea se găsesc în pachetul EasyPHP care trebuie descărcat şi instalat pe calculatorul nostru. 

Fişierele HTML pot fi scrise cu ajutorul programului NOTEPAD, dar se pot folosi şi validatoare HTML. Acestea din urmă pot fi descărcate de pe Internet.

Capitolul 3. Primi paşi către construcţia unui site

103

1. Stabiliţi legăturile logice dintre protocoale (stânga) şi ce reglementează ele (dreapta): 1. DNS

a) transfer de fişiere

2. HTTP

b) controlul transmisiei

3. TCP

c) legătura dintre URL şi IP

4. FTP

d) dialogul între client şi server

2. Stabiliţi legătura dintre coloanele din stânga şi cele din dreapta: 1. server

a) program FTP

2. client

b) Apache

3. Stabiliţi legătura dintre coloanele din stânga şi cele din dreapta: 1. server

a) MySQL

2. client

b) browser

4. Vizualizaţi codul HTML al unei pagini web aleasă de dvs. Multe puteţi învăţa privind modul în care au făcut alţii... 5. Creaţi-vă un site gratuit. Reţineţi adresa, numele de autentificare (user ID) şi parola. Acest site îl veţi utiliza pentru teste. 6. Creaţi un fişier pe hard-disc-ul dvs. un director numit ”PTest”. Folder-ul va conţine un fişier numit ”index.html”, iar în interiorul fişierului, textul: ”Asteptati sa invat in capitolul urmator HTML”. 7. Upload-aţi fişierul pe site (adică treceţi fişierul de pe calculatorul dvs. pe server). Verificaţi operaţia prin afişarea fişierului de către browser. 8. Creaţi pe site-ul dvs. două folder-e: ”Images” şi ”Personal”. În viitor, primul va reţine fişierele imagine, iar al doilea, fişierele HTML auxiliare. 9. Lucrare de tip referat. Întocmiţi un referat despre un validator HTML. 10. Lucrare de tip referat. Întocmiţi un referat despre un program FTP. (pentru verificare, rezolvările exerciţiilor 1-3 se găsesc la pag. 383)

CAPITOLUL HTML, CSS – primele noţiuni

În acest capitol vom învăţa să creăm pagini Web utilizând limbajele HTML şi CSS, esenţiale în dezvoltarea oricărei aplicaţii hipermedia.



Care este structura de bază a unei pagini HTML+CSS ? 

Elemente HTML pentru afişarea textelor 

Atribute CSS pentru font-uri şi texte 



Care este structura unui element HTML ? 



Cum realizăm o listă ?

Atribute de culoare şi fond

Atribute pentru margini, padding şi bordură 

Cum introducem o imagine ?  

Dar un tabel ?

Hiperlegături (link-uri) 



Ce rol au elementele BASE, META, SCRIPT ? 



Hărţi imagine

Ce sunt cadrele ? La ce folosesc ?

Care sunt modalităţile de aşezare în pagină a elementelor ?  

Caractere HTML

Aspecte generale ale proiectării interfeţelor web

Cuvinte cheie: HTML, CSS, element, tag, atribut, id, class, stil, listă, tabel, hiperlegătură, download, hartă imagine, cadru, bordură, margine, ţesătură, etichetă, proiectare

Capitolul 4 – HTML, CSS - primele noţiuni

105

În cele ce urmează vom învăţa să creăm pagini web utilizând limbajul HTML. Pentru aceasta, vom recapitula cunoştinţele dobândite la orele de “Tehnologia Informaţiei şi a Comunicării”, dar vom învăţa si multe lucruri noi. Desigur, o pagină astfel creată, poate arăta foarte bine, dar, din păcate, lucrând numai cu HTML-ul, textele şi imaginile nu pot fi personalizate pe cât am dori, iar tehnicile prin care putem crea animaţie aproape că lipsesc. De asemenea, server-ul oferă vizitatorului o pagină care nu ţine cont şi de preferinţele acestuia şi nu-i oferă posibilitatea să “scrie” date pe site. Cu toate acestea, pentru a crea pagini web, studiul limbajului HTML este indispensabil, iar neajunsurile arătate pot fi eliminate studiind acest capitol.

4.1. Structura de bază a unei pagini HTML+CSS Mai jos, puteţi observa o pagină aşa cum este scrisă în Notepad şi aşa cum este afişată de browser-ul Internet Explorer:

a) În Notepad

b) În Internet Explorer Figura 4.1. Exemplu de pagină web

Din analiza exemplului de mai sus, observăm că:



•

pagina începe cu tag -ul şi se termină cu tag-ul ;

•

pagina conţine un antet (HEAD) şi corpul propriu-zis (BODY);

•

antetul este cuprins între etichetele şi ;

•

corpul este conţinut între etichetele şi .

1

Opţional, antetul poate conţine titlul paginii cuprins între tag-urile şi . Titlul apare pe bara de titlu a ferestrei afişată de Explorer (pentru noi, acesta este "Exemplul 1").

Termenul tag provine din limba engleză şi semnifică “etichetă”. În acest manual vom folosi ambii termeni: element si tag.

1

106

Manual de Informatică pentru clasa a XII-a

Dvs. aţi studiat câteva noţiuni despre HTML în clasa a-IX-a. Acum trebuie să le recapitulăm, dar şi să le prezentăm într-o formă nouă, utilizând limbajul CSS (Cascading Style Sheets), limbaj recunoscut de către browser. Conform CSS, vom imagina elementele HTML ca având formă dreptungiulară. Pentru fiecare element HTML se poate selecta dimensiunea lui, culoarea, mărimea şi stilul de scriere a font-ului, culoarea de fond, culorile marginilor... şi, după cum vom vedea, chiar poziţia în document. A stabili toate acestea pentru un element sau pentru toate elementele de acelaşi tip (de exemplu, toate paragrafele) înseamnă a stabili un stil. Un fişier HTML + CSS poate conţine mai multe stiluri. Modul în care se stabilesc stilurile va fi tratat în amănunt, deocamdată ne mărginim să exemplificăm modul în care se pot preciza stilurile într-un fişier HTML. A) Prin utilizarea elementului , care va fi conţinut de antet. În interiorul său se pot descrie stiluri pentru un grup de elemente, de exemplu P, pentru paragrafe sau pentru un singur element de un tip oarecare. A1. Toate elementele de un anumit tip au acelaşi stil. Exemplul 4.1. Paragraful are înălţimea de 4 cm, lăţimea de 3 cm, font-ul cu mărimea de 20 de puncte, culoarea de fond - galben, culoarea textului - roşu, iar scrisul italic. Oricâte paragrafe ar conţine documentul, toate vor avea acelaşi stil.

Acesta este primul exemplu de pagina...

Figura 2.2. Pagina rezultată pentru Exemplul 4.1.

A2. Stilul este aplicat unui element, care este identificat prin intermediul atributului id al acestuia. Exemplul 4.2. Formăm un stil cu numele ”P1”. Elementul care va avea acest stil va trebui să conţină atributul id care să aibă valoarea ”P1”. Observaţi că, în exemplu, sunt două paragrafe. Numai unul dintre ele are asociat un stil, celalat se scrie aşa cum am văzut deja…

Capitolul 4 – HTML, CSS - primele noţiuni

107

Un paragraf care are atasat un stil

alt paragraf

Figura 4.3. Pagina rezultată

pentru Exemplul 4.2.

A3. Stilul este aplicat unui element sau mai multor elemente, care sunt identificate prin intermediul atributului class. Exemplul 4.3. Se descrie clasa ”Stil”, iar efectul este cel din exemplul anterior:

Un paragraf care are atasat un stil

alt paragraf

Important ! Există posibilitatea ca stilurile să fie memorate într-un fişier text (creat, de exemplu, cu programul Notepad), cu extensia ”.css”. Codul HTML îl va apela utilizând tag-ul LINK. Elementul LINK reprezintă o modalitate prin care definim legătura între cele două fişiere (css şi html). Acesta are următoarele atribute: rel - defineşte tipul de fişier css; type - indică browser-ului în ce limbaj este scris codul; href - se specifică locaţia fişierului (dacă fişierul css nu se găseşte în aceiaşi locaţie cu cel html, se scrie adresa completă a sa).

108

Manual de Informatică pentru clasa a XII-a

Exemplul 4.4. Reluând exemplul anterior, formăm un fişier text cu numele ”unstil.css”, care va conţine definiţia stilului: .Stil {font-size:20pt; color:red; background:yellow; font-style:italic; width=3cm; height:4 cm;} În aceste condiţii, fişierul HTML devine:

Un paragraf care are atasat un stil

alt paragraf

B) Există posibilitatea să scriem un stil pentru un anumit element, prin utilizarea atributului style. Cu ajutorul acestui atribut, putem defini ad-hoc orice stil. Exemplul 4.5. Testaţi codul sursă de mai jos:

Un paragraf care are atasat un stil

alt paragraf

Din cele prezentate, rezultă că un element HTML are atributele: id, class şi style, iar acestea pot fi utilizate în funcţie de necesitate.

Capitolul 4 – HTML, CSS - primele noţiuni

109

4.2. Elemente HTML pentru afişarea textelor Elementul P – are rolul de a permite introducerea unui paragraf. Pentru a-l folosi, utilizăm tag-urile:

conţinut paragraf

Observaţii ! 

Atunci când sunt afişate, paragrafele sunt separate printr-o linie vidă.



Tag-ul

poate să lipsească, nu este obligatoriu! Un nou paragraf poate fi depistat prin tag-ul

.



În Notepad, WordPad sau Word, paragrafele se separă prin tastarea unui Enter. În schimb, în HTML, Enter-ul nu are nici un efect. Vedeţi în exemplul anterior, al doilea paragraf (aşa cum a fost tastat în Notepad). El conţine un Enter (de fapt, în Notepad, sunt două paragrafe). Acesta a fost ignorat de Explorer.



Fără o altă comandă, un rând al unui paragraf are lăţimea ferestrei afişată de browser. De exemplu, dacă micşorăm fereastra browser-ului, acelaşi paragraf va ocupa mai multe rânduri.



Dacă două cuvinte ale unui paragraf sunt separate prin mai multe spaţii, browser-ul afişează doar un singur spaţiu.

Elementul   Câteodată, avem nevoie să prevenim trecerea unui cuvânt pe linia următoare. Folosim elementul   pentru a evita acest lucru, prin scrierea sa înaintea cuvântului de interes. În cazul în care nu încape pe linie, se coboară şi cuvântul precedent pe linia următoare. Exemplul 4.6. Testaţi forma de mai jos:

Acest paragraf a fost afisat de Internet Explorer.

În figura alăturată se observă faptul că browser-ul a fost forţat să treacă cuvântul ”Internet” pe rândul următor. Figura 4.4. Exemplu de utilizare a elementului  

110

Manual de Informatică pentru clasa a XII-a

În continuare, vom prezenta cele mai importante elemente de formatare ale textului.

Elementul BR - are ca efect forţarea afişării a ceea ce urmează pe rândul următor. Pentru a-l utiliza, se foloseşte un singur tag:
. Exemplul 4.7. Paragraful următor este afişat pe două rânduri:

Mama merge
la piata

Figura 4.5. Exemplu de utilizare a elementului




Tag-ul
nu creează un alt paragraf. Nu uitaţi, între două paragrafe se lasă o linie vidă. În cazul etichetei
, rândul următor nu este separat de rândul curent prin linie vidă.

Elementul B - are rolul de a determina browser-ul să afişeze îngroşat (bold) textul cuprins între cele două tag-uri ale sale: şi . Exemplul 4.8. Cuvintele ”trebuie” şi ”ai” sunt afişate îngroşat:

Ceea ce-ti trebuie vei gasi in ceea ce ai!

Figura 4.6. Exemplu de utilizare a elementului

Elementul I - are rolul de a determina browser-ul să afişeze înclinat (italic) textul cuprins între cele două tag-uri ale sale: şi . Exemplul 4.9. Cuvintele ”trebuie” şi ”ai” sunt afişate înclinat:

Ceea ce-ti trebuie vei gasi in ceea ce ai!

Figura 4.7. Exemplu de utilizare a elementului

Capitolul 4 – HTML, CSS - primele noţiuni

111

Elementul U - are rolul de a determina browser-ul să afişeze subliniat textul cuprins între cele două tag-uri ale sale: şi .

Exemplul 4.10. Cuvintele ”trebuie” şi ”ai” sunt afişate subliniat:

Ceea ce-ti trebuie vei gasi in ceea ce ai!

Figura 4.8. Exemplu de utilizare a elementului

Elementul S - are rolul de a determina browser-ul să afişeze tăiat textul cuprins între cele două tag-uri ale sale: şi . Exemplul 4.11. Cuvintele ”trebuie” şi ”ai” sunt afişate tăiat:

Ceea ce-ti trebuie vei gasi in ceea ce ai!

Figura 4.9. Exemplu de utilizare a elementului

Elementul BIG - are rolul de a comanda browser-ului ca textul cuprins între tag-urile şi să fie scris mai mare decât restul textului. Exemplul 4.12. Textul ”elementul BIG” este scris mărit:

Un paragraf care foloseste elementul BIG !

Figura 4.10. Exemplu de utilizare a elementului

Atenţie ! Elementul BIG nu este suportat de toate browser-ele, deci este de preferat utilizarea tag-ului FONT. De exemplu:

Exemplu de text marit !

112

Manual de Informatică pentru clasa a XII-a

Elementul SMALL - are rolul de a comanda browser-ului ca textul cuprins între tag-urile şi să fie scris mai mic decât restul textului. Exemplul 4.13. Textul ”elementul SMALL” este scris micşorat:

Un paragraf care foloseste elementul SMALL !

Figura 4.11. Exemplu de utilizare a elementului

Elementul TT - are rolul de a comanda browser-ului ca textul cuprins între tag-urile şi să fie scris monospaţiat (adică toate caracterele ocupă aceeaşi lungime de spaţiu, precum font-ul ”Courier New”). Exemplul 4.14. Textul ”elementul TT” este scris monospaţiat:

Un paragraf care foloseste elementul TT !

Figura 4.12. Exemplu de utilizare a elementului

Elementul DEL - are rolul de a comanda browser-ului ca textul cuprins între tag-urile şi să fie scris tăiat, pentru a arăta că a fost şters (păstrându-l, totuşi, în document pentru a nu mai antrena şi alte modificări ale acestuia). Exemplul 4.15. Textul ”elementul DEL” este scris tăiat:

Un paragraf care foloseste elementul DEL !

Figura 4.13. Exemplu de utilizare a elementului

Elementul SUP - are rolul de a comanda browser-ului ca textul cuprins între tag-urile şi să fie scris mai sus (ca o putere, exponent).

Capitolul 4 – HTML, CSS - primele noţiuni

113

Exemplul 4.16. Textul ”x*ln(x)” este scris ca o putere:

3x*ln(x)

Figura 4.14. Exemplu de utilizare a elementului

Elementul SUB - are rolul de a comanda browser-ului ca textul cuprins între tag-urile şi să fie scris mai jos (ca un indice). Exemplul 4.17. Textul ”i,j” este scris ca un indice:

ai,j

Figura 4.15. Exemplu de utilizare a elementului

Elementele H1, H2, ..., H6 Pentru scrierea titlurilor se utilizează elementele H1, H2, ..., H6. Fiecare titlu este scris între tag-urile: , , …, . Mărimea diferă: pentru titlul este scris utilizând font-ul de dimensiune maximă, iar pentru dimensiunea este minimă. Exemplul 4.18. Mai jos, observaţi cum este scris un titlu: Despre lenesi...

Lenesul gaseste in orice sarbatoare un prilej sa nu munceasca !

Figura 4.16. Exemplu de utilizare a elementului

Atenţie ! 

Titlurile trebuie să fie folosite în ordine ierarhică.



În general, un document HTML trebuie să aibă exact un element H1, pentru a indica titlul principal al paginii.



Motoarele de căutare pot utiliza informaţiile din aceste titluri, deci ele trebuie să sintetizeze cât mai bine conţinutul textului.

114

Manual de Informatică pentru clasa a XII-a

4.3. Atribute CSS pentru font-uri În continuare vor fi prezentate principalele atribute CSS care pot fi utilizate, în cadrul unui stil, pentru a personaliza fontul cu care se va afişa textul. A) font-style – poate lua valorile:

normal

italic

B) font-variant – poate lua valorile:

normal

small-caps

C) font-weight – poate lua valorile:

normal

bold

900

100

D) font-size – mărimea. Există mai multe modalităţi de a indica dimensiunea font-ului. Cea mai simplă este de a o indica în puncte:

10pt

15pt

20pt

E) font – grupează primele patru atribute, deci dacă îl folosim putem renunţa la acestea. Nu contează ordinea în care sunt scrise... Exemplul 4.19. Mai jos, am descris un stil pentru paragrafe care are ca rezultat pagina din Figura 4.17:

Un exemplu...

Figura 4.17. Exemplu de paragraf personalizat cu ajutorul atributului font

Capitolul 4 – HTML, CSS - primele noţiuni

115

F) font-family – are rolul de a stabili o familie de font-uri cu care vor fi afişate textele. Vă daţi seama că nu se poate şti dacă cel care vizitează pagina are pe calculatorul său instalat sau nu un anumit font. Din acest motiv se trec, în ordine, familiile de font-uri care vor fi utilizate. La vizualizarea documentului, se verifică dacă există un font din prima familie. În caz afirmativ, se afişează textul cu un font din prima familie. Dacă un astfel de font nu există, se caută dacă există un font din a doua familie, ş.a.m.d. Exemple de valori: times, courier, arial, etc. Este recomandabil ca ultima valoare din listă să fie una dintre valorile de mai jos. Ele nu specifică o familie de font-uri, ci mai degrabă un stil de scriere. El va fi folosit atunci când nici una din familiile de font-uri nu a fost găsită, caz în care browser-ul caută un font apropiat de ultima valoare:

serif

sans-serif

cursive

monospace

Exemplul 4.20. Analizaţi stilul de mai jos: P { font-size:20pt; font-family:courier, monospace; }

4.4. Atribute CSS pentru texte Limbajul CSS permite stilizarea la nivel de text prin intermediul unor atribute care sunt detaliate în cele ce urmează. A) text-decoration – poate lua valorile: underline (cu o linie sub el), overline (cu o linie peste el), line-through (taiat în interior) şi none (fără nicio linie, clasic).

underline

overline

line-through

none

116

Manual de Informatică pentru clasa a XII-a

Exemplul 4.21. Putem să folosim şi combinaţii între aceste variante, precum cea de mai jos. Efectul poate fi observat în Figura 4.18.

Un exemplu ...

Figura 4.18. Exemplu de paragraf personalizat cu atributul text-decoration

B) text-align – alinierea textului – poate lua valorile de mai jos:

left

right

center

justify Figura 4.19. Exemple de aliniere a textului

C) text-indent – este folosit pentru indentarea textelor. Primul rând al textului va începe mai în dreapta cu o valoare precizată. Exemplul 4.22. Pentru a obţine indentarea din figura alăturată, am folosit stilul de mai jos: P {text-indent:1cm;}

Figura 4.20. Exemplu de indentare aplicată unui paragraf

Capitolul 4 – HTML, CSS - primele noţiuni

117

D) line-height - înălţimea liniei – atributul este folosit pentru a stabili distanţa dintre rândurile unui paragraf. Exemplul 4.23. Am format două stiluri pe care le-am aplicat apoi celor două paragrafe (vezi Figura 4.21):

Acest text a fost scris spatierea intre randuri.

Acest text a fost scris spatierea intre randuri.

0.5cm;} 1cm;}

pentru a exemplifica pentru a exemplifica

Figura 4.21. Exemple de paragrafe cu linii de înălţime diferită

4.5. Liste În HTML, există posibilitatea ca anumite enunţuri să fie numerotate sau marcate într-un anumit fel. O astfel de organizare poartă denumirea de listă. Astfel, în HTML se pot descrie trei tipuri de liste:  liste ordonate, în care elementele sunt numerotate;  liste neordonate, în care elementele sunt marcate de aşa natură încât nu se sugerează o anumită ordine a lor;  liste de tip definiţie. În continuare, puteţi observa un exemplu pentru fiecare tip de listă:

118 1. 2. 3.

Manual de Informatică pentru clasa a XII-a • • •

Bloc Vila Casa

Bloc Vila Casa

Bloc Multe etaje, zeci de familii Vila Unu sau doua etaje, cel mult 5 familii Casa N-are etaje, o familie

a) Listă ordonată;

b) Listă neordonată;

c) Listă de tip definiţie.

Pentru a forma astfel de liste, avem nevoie de câteva elemente HTML care vor fi detaliate în cele ce urmează.

Elementul OL (Ordered Lists) - creează o listă ordonată. Elementele listei sunt trecute între tag-urile şi .

Elementul LI (List Item) - descrie un element al listei. Tag-ul obligatoriu este cel de început

, cel de sfârşit fiind facultativ:

. Exemplul 4.24. Priviţi lista ordonată de mai jos:

Cine nu ... nu castiga!

pierde

risca

ajunge

Figura 4.22. Exemplu de listă ordonată

⇒

Elementul OL are atributul ”type”. Valorile pe care le poate lua acest atribut, precum şi modul în care arată lista, se pot observa în continuare:

a. pierde b. risca c. ajunge

i. pierde ii. risca iii. ajunge

1. pierde 2. risca 3. ajunge





A. pierde B. risca C. ajunge

I. pierde II. risca III. ajunge



Capitolul 4 – HTML, CSS - primele noţiuni

119

Elementul UL (Unordered Lists) - descrie o listă neordonată. Elementele listei sunt cuprinse între tag-urile

şi

. Exemplul 4.25. Priviţi lista neordonată de mai jos:

Periferice esentiale:

• monitor
• tastatura
• mouse

Figura 4.23. Exemplu de listă neordonată

⇒ Elementul UL are atributul type. Valorile pe care le poate lua acest atribut, precum şi modul în care arată lista se observă în continuare:

Observaţii ! 

Desigur, putem construi liste imbricate, aşa cum se poate observa cu uşurinţă din exemplul următor:

Exemplul 4.26. Analizaţi lista de mai jos:

Echipa castigatoare:

• Jucatori:
  
  
• George
• Lavinia
• Mihai
  
  
• Rezerve:
  
  
• Cristian
• Flavius
  
  


Figura 4.24. Exemplu de liste imbricate

Pentru a lăsa un rând liber, putem marca un paragraf prin
sau... numai prin

.

120

Manual de Informatică pentru clasa a XII-a

Elementul DL (Definition Lists) - are rolul de a descrie o listă de definiţii, delimitată de tag-urile şi .

Elementul DT (Definition Term) - defineşte termenul din listă care trebuie

descris. Se utilizează tag-ul .

Elementul DD (Definition Description) - are rolul de a reţine descrierea

termenului. Se utilizează tag-ul .

Exemplul 4.27. Priviţi lista de definiţii de mai jos:

to elapse a trece, a se scurge I've never seen n-am (mai) vazut (niciodata)

Figura 4.25. Exemplu de listă de definiţii

4.6. Structura unui element HTML În general, un element HTML, P, OL, H6, etc. este alcătuit sub formă de cutie (box), cu structura următoare:

Conţinut Ţesătură (padding) Bordură (border) Margine (margin) Figura 4.26. Structura unui element HTML

Capitolul 4 – HTML, CSS - primele noţiuni

121



Marginea (margin) – nu este vizibilă de vizitatorul paginii. Rostul ei este de a păstra distanţa dintre cutie şi celelalte elemente.



Bordura (border) – în cazul în care creatorul paginii doreşte, aceasta poate fi făcută vizibilă (de exemplu i se stabileşte o altă culoare).



“Ţesătura” (padding) poate fi dimensionată, dar nu poate fi făcută vizibilă printr-o culoare distinctă. Vom prefera termenul de padding.



Conţinutul este dat de text şi/sau imagine.

Observaţii ! 

În ansamblu, părţile unor elemente de acelaşi tip pot fi dimensionate. Vedeţi paragrafele următoare!



În general, pentru majoritatea elementelor se poate trece spaţiul ocupat de acestea: lăţimea (width) şi înălţimea (height). Înălţimea şi lăţimea cutiei include bordura, dar nu include marginile. În cazul în care conţinutul nu încape în cutie, nu se respectă înălţimea şi lăţimea dată de aceste atribute.

În continuare, vom da exemple de elemente pentru care a fost scris un stil. În acest mod, vă puteţi face de la început o idee despre puterea limbajului CSS. De multe ori, putem face ca un element să arate cu totul altfel decât arată în forma implicită. În paragrafele următoare vor fi prezentate toate atributele, dar acum, vă prezentăm câteva elemente HTML cu înfăţişare “neobişnuită”. Exemplul 4.28. Am creat un stil pentru un element H1. Bordura are culoare distinctă, iar textul este aliniat la stânga. Faptul că există un spaţiu între bordură şi text confirmă existenţa padding-ului (de 0.5 cm). H1 {border:solid 10pt red; background-color:green; padding:0.5cm 0.5cm 0.5cm 0.5cm; text-align:left; width:3cm;} ... Un element H1 Figura 4.27. Exemplu de element H1 stilizat

Exemplul 4.29. Am creat un stil pentru paragrafe. În acest caz, bordura are o formă specială. Fontul utilizat este din famila "Arial", scris îngroşat (bold) şi înclinat (italic). Textul este aliniat la centru (center): Figura 4.28. Exemplu de paragraf stilizat

122

Manual de Informatică pentru clasa a XII-a

P {border:groove 1cm red; background-color:yellow; padding: 1cm 1cm 1cm 1cm; width:5cm; height:5cm; text-align:right; font-family:arial; font-weight:bold; font-style:italic;} ...

Un exemplu de paragraf

Exemplul 4.30. O listă pentru care s-a stabilit dimensiunea font-ului, culoarea de fond, culoarea, etc.: OL {font-size:20pt; font-weight:bold; color:black; background-color:blue;} ...


• masina
• bicicleta
  
  Figura 4.29. Exemplu de listă stilizată
  
  4.7. Atribute de culoare şi fond În general, o culoare poate fi recunoscută prin numele ei ("red", "green", "gray", ...) sau prin valorile RGB (Red, Green, Blue). Puteţi alege culoarea în Paint (opţiunea Edit Colors), după care treceţi valorile în HTML. Este de preferat a doua variantă, pentru că prima este depreciată conform noilor standarde HTML. A) color – specifică culoarea textului. Exemplul 4.31. Mai jos, am setat o culoare pentru textul paragrafelor: P {font-size:40pt; color:RGB(12,56,23);} Observaţie ! Background-ul acoperă suprafaţa conţinutului şi a padding-ului. B) background-image – pentru fundal se poate folosi chiar şi o imagine. Dacă imaginea este mai mică decât suprafaţa care trebuie afişată, atunci ea este multiplicată astfel încât să acopere întreaga suprafaţă.
  
  Capitolul 4 – HTML, CSS - primele noţiuni
  
  123
  
  Exemplul 4.32. Se stabileşte imaginea ca fundal pentru întreg documentul (body). De asemenea, paragrafele vor avea textul de culoare albă, de 40 de puncte.
  
  
  
  

  Un exemplu de catelus

  
  
  Figura 4.30. Exemplu de pagină cu o imagine pe fundal
  
  C) background-color – stabileşte culoarea fundalului. Uneori este trecut şi în cazul în care pe fundal avem o imagine, pentru că este posibil ca, dintr-un motiv sau altul, imaginea să nu apară. Exemplul 4.33. Paragrafele se scriu cu alb, pe fond roşu: P {font-size:12pt; color:RGB(255,255,255); background-color:RGB(255,0,0);} sau P {font-size:12pt; color:white; background-color:red;} Figura 4.31. Un paragraf cu fundalul roşu şi textul alb
  
  Exemplul 4.34. Pentru body se alege o imagine pentru fundal, iar dacă aceasta nu apare, ca măsură de siguranţă, s-a ales culoarea neagră: body {background-image:url(c:\Catelus\1.jpg); background-color:black;} D) background-repeat – am văzut faptul că, dacă o imagine este mai mică decât spaţiul necesar pentru un element, atunci aceasta se repetă atât pe orizontală cât şi pe verticală până când se umple acest spaţiu. Există posibilitatea să controlăm această repetare prin valorile pe care le ataşăm acestui atribut:    
  
  repeat – repetarea se face atât pe orizontală cât şi pe verticală; repeat-x – repetarea se face numai pe orizontală; repeat-y – repetarea se face numai pe verticală; no-repeat – imaginea nu se repetă.
  
  124
  
  Manual de Informatică pentru clasa a XII-a
  
  E) background-attachment – poate lua două valori: fixed şi scroll (valoare implicită). În cazul în care pe fundal se găseşte o imagine, efectul este deosebit. Dacă valoarea este fixed, atunci defilează numai obiectele care se găsesc pe fundal (imaginea rămânând fixă), iar dacă valoarea este scroll, atunci defilează şi imaginea. Exemplul 4.35. Analizaţi paginile de mai jos:
  
  body {background-repeat:fixed;}
  
  body {background-repeat:scroll;} Figura 4.32. Exemple de pagini cu fundal fix sau mobil
  
  F) background-position – dacă pe fundal se afişează o imagine, atunci i se poate preciza poziţia în raport cu fereastra. Există mai multe posibilităţi de precizare a poziţiei:     
  
  procentual: de exemplu, 33% 50% (la 1/3 de partea stângă a ferestrei şi la 1/2 din înălţimea ei); în valori absolute: de exemplu, 2cm 3cm (la 2 cm de partea stângă a ferestrei şi la 3 cm de partea de sus); mixt: de exemplu, 2cm 50% (la 2 cm de partea stângă a ferestrei şi la jumătate raportat la înălţime); numai o valoare – caz în care se referă numai la alinierea pe orizontală în raport cu marginea din stânga a ferestrei; prin cuvinte cheie: left (stânga), right (dreapta), top (sus) şi bottom (jos) – de exemplu: body {background-position: left bottom;} (în stânga-jos).
  
  Exemplul 2.36. Mai jos, a fost creat un stil care defineşte o singură imagine pe fundal, la mijlocul ferestrei, care nu defilează (rămâne fixă): body {background-image: url(c:\Catelus\1.jpg); background-repeat: no-repeat; background-position: 50% 50%; background-attachment: fixed;} G) background – o singură caracteristică pentru toate celelalte. Se trec, în ordine, toate valorile pentru background-image, background-repeat, ...
  
  Capitolul 4 – HTML, CSS - primele noţiuni
  
  125
  
  4.8. Atribute pentru margini Fiecare element poate avea margini. Rolul lor este de a o separa de alte elemente. Iată cum se pot stabili marginile: A) Margin-left – mărimea marginii din stânga; B) Margin-right – mărimea marginii din dreapta; C) Margin-top – mărimea marginii de deasupra; D) Margin-bottom – mărimea marginii de dedesupt; E) Margin – toate marginile în ordinea: sus, drepta, jos şi stânga. Exemplul 4.37. Pentru elementele de tip paragraf, a fost realizat un stil care defineşte marginile acestuia (fereastra este micşrată, pentru a evidenţia marginile): P {font-size:15pt; margin-left:1cm; margin-right:2cm; margin-top:3cm;}
  
  Figura 4.33. Un paragraf cu margini modificate
  
  top
  
  left
  
  right
  
  4.9. Atribute pentru padding Padding-ul poate fi doar dimensionat, dar nu i se poate aplica o culoare distinctă: Padding-top – partea de sus; Padding-left – partea din stânga; Padding-bottom – partea de jos; Padding-right – partea din dreapta; Padding - toate marginile, în ordinea: sus, dreapta, jos şi stânga.
  
  4.10. Atribute pentru bordură Mai întâi, putem stabili dimensiunile bordurii: Border-top-width – partea de sus, Border-left-width – partea din stânga, Border-bottom-width – partea de jos şi Border-right-width – partea din dreapta. Border-width – le înlocuieşte pe primele 4. Se trec valorile în ordinea: sus, dreapta, jos şi stânga. Dacă se trece o singură valoare, aceasta va fi ataşată tuturor marginilor.
  
  126
  
  Manual de Informatică pentru clasa a XII-a
  
  Observaţie ! Pentru grosimea bordurii se mai pot folosi valorile: thin (subţire), medium (medie) sau thick (groasă). Border-color – culoarea bordurii. Se pot folosi maximum 4 culori, în ordinea: sus, dreapta, jos şi stânga. Dacă se trece o singură culoare, aceasta va fi ataşată tuturor marginilor. Border-style – se trece în mod obligatoriu. Contrar, bordura nu este vizibilă. Valorile mai importante pe care le poate lua acest parametru se pot observa în figura de mai jos:
  
  solid
  
  ridge
  
  double
  
  groove
  
  inset
  
  outset
  
  Figura 4.34. Diverse tipuri de borduri
  
  Border-top-style – stilul bordurii în partea de sus; Border-right-style – stilul bordurii în partea dreaptă; Border-bottom-style – stilul bordurii în partea de jos; Border-left-style – stilul bordurii în partea stângă.
  
  4.11. Elementul IMG Ce farmec are o pagină dacă nu conţine una sau mai multe imagini?
  
  Elementul IMG - se utilizează pentru a ataşa unei pagini o imagine. Vom folosi tag-ul . Forma generală a acestui element este: . Atributele lui sunt: ⇒
  
  src - identifică fişierul care conţine imaginea respectivă (poate fi de tipul: jpg, gif, etc.).
  
  Capitolul 4 – HTML, CSS - primele noţiuni
  
  127
  
  Observaţie ! În această etapă învăţăm să creăm paginile pe propriul calculator, fără a fi conectaţi la Internet. Prin urmare, fişierul care conţine imaginea se va găsi într-un folder oarecare (în exemplul următor, el se găseşte în acelaşi folder în care găsim şi fişierul cu extensia htm (cel care conţine pagina). Din acest motiv, sursa nu conţine şi calea, dar, dacă este cazul, calea poate fi introdusă. ⇒
  
  ALT="nume" – există posibilitatea ca imaginea să nu se poată încărca. Pentru astfel de situaţii este folosit parametrul ALT, unde nume conţine un text (alternativ) care va fi afişat în locul imaginii.
  
  Exemplul 4.38. Fie tag-ul IMG următor:
  
  Dacă imaginea este găsită, se face afişarea ca în figura din dreapta, altfel se afişează ce se vede mai jos: Figura 4.35 Figura 4.36. Exemplu de pagină care conţine o imagine
  
  Exerciţiu ! Luaţi o imagine oarecare şi faceţi diverse exerciţii de afişare a ei, utilizând cunoştinţele de CSS prezentate în paragrafele 4.7, 4.8 şi 4.9. Spre exemplu, analizaţi codul de mai jos (vezi şi Figura 4.37):
  
  
  
  

  Acest paragraf este scris pentru a verifica modul de aliniere pe orizontala in cazul unui element IMG, care este de tip INLINE , deci se insereaza exact ca un cuvant intr-un paragraf

  Paragraful este un element de tip BLOC, asa ca se insereaza pe o linie noua!
  
  Figura 4.37. Exemplu de pagină web
  
  128
  
  Manual de Informatică pentru clasa a XII-a
  
  4.12. Tabele În cadrul unei pagini web se pot introduce şi tabele, extrem de utile pentru evidenţierea unor date sau, pur şi simplu, pentru a delimita spaţiul paginii. Desigur, tabelul rezultat poate fi privit în mod clasic, cu linii şi coloane, aşa cum suntem obişnuiţi, dar poate fi folosit şi în alte scopuri, cum ar fi: aliniarea imaginilor (elemente de tip IMG în raport cu textul) sau scrierea în coloane. Din acest motiv, în sens larg, prin tabel vom înţelege o grupare în linii şi coloane a mai multor elemente HTML.
  
  Elementul TABLE - descrie un tabel, utilizând etichetele:

  şi .
  
  Elementul TR - descrie o linie a tabelului, care începe cu şi se termină atunci când este întâlnit un nou . Opţional, se poate folosi şi tag-ul pentru a închide linia curentă. Elemenul TD - descrie o celulă a tabelului. Se utilizează tag-urile şi, opţional, . Exemplul 4.39. Mai jos, puteţi observa un prim tabel, cu două linii, aşa cum este descris şi aşa cum apare afişat (vezi Fig. 4.38):

  Un text	Un text cu mult mai lung!
  Text	Text

  Figura 4.38. Exemplu de tabel
  
  În continuare, prezentăm câteva atribute ale elementului TABLE. ⇒
  
  Border defineşte grosimea liniilor (în pixeli) care înconjoară tabelul. Pe pagina următoare (în Fig. 4.39), puteţi observa cum arată acelaşi tabel, în care atributul Border lipseşte. Simpla trecere a acestui atribut, fără a preciza numărul de pixeli, are ca efect crearea unui chenar standard.
  
  Capitolul 4 – HTML, CSS - primele noţiuni
  
  129
  
  Iată tabelul, fără atributul Border:
  
  Figura 4.39. Exemplu de tabel fără chenar
  
  Observaţii ! 
  
  În absenţa altor formatări, toate celulele unei coloane au lăţimea impusă de cel mai lung conţinut al uneia dintre ele! În situaţia în care reducem dimensiunile ferestrei browser-ului, textul va fi dispus modificat, pentru ca tabelul să încapă în totalitate. Dincolo de această limită, fereastra nu mai poate fi micşorată. Figura 4.40. Efectul redimensionării ferestrei browser-ului
  
  
  
  În cazul în care o linie conţine mai multe celule decât restul liniilor, automat toate liniile vor avea acelaşi număr maxim de celule:
  
  

  O noua celula	Un text	Un text cu mult mai lung!
  Text	Text

  
  
  Figura 4.41. Exemplu de tabel în care două linii au un număr diferit de celule
  
  Un tabel poate conţine şi una sau mai multe imagini, aşa cum se vede mai jos, unde imaginea este conţinută de o celulă a tabelului:
  
  

  	Un text cu mult mai lung!
  Text	Txt

  
  
  Figura 4.42. Exemplu de tabel care conţine o imagine
  
  130
  
  ⇒
  
  Manual de Informatică pentru clasa a XII-a
  
  cellspacing - determină spaţiul, în pixeli, dintre celule.
  
  Exemplul 4.40. În figura alăturată, este prezentat un tabel cu cellspacing="10". Figura 4.43. Exemplu de tabel
  
  ⇒
  
  cellpadding determină, în pixeli, spaţiul lăsat tabelului între text (imagine) şi marginile celulei.
  
  în fiecare celulă a
  
  Exemplul 4.41. Acelaşi tabel, din exemplul anterior, cu cellpadding = "15".
  
  Figura 4.44. Exemplu de tabel
  
  Atenţie! Pentru ultimele două atribute, se poate alege o valoare procentuală, astfel încât marginile să aibă dimensiunea procentual, în raport cu dimensiunea disponibilă totală (lăţime şi înălţime). ⇒
  
  rules – defineşte modul în care vor fi trasate liniile care separă celulele tabelului. Poate lua valorile:
  
  None
  
  Rows
  
  Cols
  
  All
  
  Figura 4.45. Exemple de trasare a liniilor separatoare
  
  ⇒
  
  frame - defineşte părţile care vor fi trasate din chenarul care înconjoară tabelul. Atributul poate lua valorile:
  
  Above
  
  Vsides
  
  Below
  
  Lhs
  
  Hsides
  
  Rhs
  
  Figura 4.46. Exemple de variante de trasare a chenarului unui tabel
  
  Capitolul 4 – HTML, CSS - primele noţiuni
  
  131
  
  Iată şi câteva atribute ale elementului TD: ⇒
  
  colspan="nr" - inserează în dreapta celulei, nr-1 celule al căror conţinut este vid, dar pot fi folosite pentru afişarea valorii reţinute de celula care are acest parametru. Efect secundar: pentru păstrarea formei dreptunghiulare, toate celelalte linii vor avea, în dreapta, câte o celulă al cărei conţinut este vid.
  
  Exemplul 4.42. Considerăm tabelul de mai jos:

  T11	T13
  T21	T23
  T31	T33

  
  
  T12 T22 T32 Figura 4.47. Tabelul iniţial
  
  care arată ca în Fig. 4.47. A doua celulă din linia 1 va conţine parametrul colspan: T12 . În figura alăturată, puteţi observa efectul! Figura 4.48. Efectul obţinut
  
  Pentru a evita o astfel de situaţie, neplăcută, linia respectivă va conţine o celulă în minus, ca în exemplul următor. În plus, textul conţinut de celula cu acest parametru va fi aliniat în centru, pentru a vedea cum se poate folosi spaţiul astfel obţinut:

  T11	T12
  T21	T22	T23
  T31	T32	T33

  Figura 4.49. Ajustarea tabelului
  
  ⇒
  
  rowspan="nr" - inserează pe următoarele nr-1 linii, în aceeaşi coloană, câte o celulă al cărei conţinut este vid. Efect secundar: pentru păstrarea formei dreptunghiulare, toate liniile vor conţine câte o celulă în plus.
  
  132
  
  Manual de Informatică pentru clasa a XII-a
  
  Exemplul 4.43. Considerăm tabelul de mai jos:

  T11	T12	T13
  T21		T22	T23
  T31	T32	T33

  
  
  Figura 4.50. Exemplu de tabel
  
  Pentru a corecta acest dezavantaj, următoarele nr-1 linii vor conţine câte o celulă mai puţin. Reluăm exemplul:

  T11	T12	T13
  T21		T22
  T31	T32	T33

  Figura 4.51. Ajustarea tabelului
  
  Exemplul 4.44. Vom extinde celula T12 şi în dreapta şi în jos (cei doi parametri pot fi folosiţi şi simultan). Textul va fi scris în centrul pătratului astfel format (vezi Fig. 4.52):

  T11	T12
  T21
  T31	T32	T33

  Figura 4.52. Extinderea unei celule
  
  Elementul CAPTION - are rolul de a permite scrierea titlului unui tabel. Titlul se scrie între cele două tag-uri, şi . Cele două etichete trebuie să se găsească imediat după . Exemplul 4.45. Mai jos am introdus un titlu pentru un tabel oarecare: Un titlu ...
  
  Capitolul 4 – HTML, CSS - primele noţiuni
  
  ⇒
  
  133
  
  Elementul CAPTION are atributul align. Cele patru valori pe care le poate lua şi efectul lor, le puteţi observa mai jos:
  
  top
  
  bottom
  
  left
  
  right
  
  Figura 4.53. Exemple de tipuri de aliniere a titlului unui tabel
  
  1. Să se realizeze tabelul de mai jos. Acesta este un caz clasic de tabel. În afara tabelului propriu-zis, trebuie să utilizăm limbajul CSS pentru capul de tabel şi alinierea din coloana a doua.
  
  Figura 4.54. Tabelul propus pentru exerciţiul 1
  
  Rezolvare. Mai jos este prezentat codul sursă:
  
  
  
  
  
  134
  
  Manual de Informatică pentru clasa a XII-a
  
  

  Nume tip	Numar octeti	Valoare
  float	4	3.4*10 -38 si 3.4*10 38
  double	8	1.7*10 -308 si 1.7*10 308
  long double	10	3.4*10-4932 si 3.4*104932

  
  
  2. Formaţi o pagină web care să conţină un text oarecare, scris în stânga unei imagini (vezi Fig. 4.55). Rezolvare. Aparent, ar fi o problemă de aliniere în dreapta a unei imagini. În realitate, mascat, avem un tablel cu o singură linie şi două coloane. În prima se găseste un text, în a doua o imagine. Evident, dacă se inverează conţinutul celor două coloane, obţinem efectul alinierii la stânga a imaginii.
  
  
  
  

  Un text; Un text; Un text; Un text; Un text; Un text; Un text; Un text; Un text; Un text; Un text; Un text; Un text; Un text; Un text;

  
  
  Capitolul 4 – HTML, CSS - primele noţiuni
  
  135
  
  3. Se cere să se scrie un text în două coloane, precum în imaginea de mai jos:
  
  Figura 4.56. Pagina web pentru exerciţiul 3
  
  Rezolvare. În fapt, vom construi un tabel cu două linii şi două coloane. Cele două elemente de pe prima linie sunt unite şi conţin titlul. În cele două coloane se scriu mai multe paragrafe. După cum ştiţi deja, lăţimea coloanelor depinde de mărimea ferestrei browser-ului, dar, mai ales, de conţinutul lor. Din acest motiv, s-a forţat prin CSS ca paragrafele să aibă lăţimea de 4 cm. În rest, analizaţi modul în care s-a realizat pagina respectivă:
  
  
  
  

  Scrierea pe coloane
  Un text scris pe doua coloane. Formam un tabel cu o singura linie si doua celule de date.	Trebuie sa ne asiguram ca textul este impartit de asa natura astfel incat sa ocupe aproximativ acelasi spatiu in cele doua coloane.

  
  
  136
  
  Manual de Informatică pentru clasa a XII-a
  
  4.13. Hiperlegături 1 (link-uri) Elementul A (ancoră) - începutul unei ancore este marcat prin , iar sfârşitul său prin . O ancoră conţine adresa URL a unei resurse oarecare aflată pe un server şi un text lămuritor (sau o imagine) asupra legăturii. Practic, se afişează, subliniat, doar textul lămuritor. Ideea de bază este următoarea: dacă se execută clic pe acest text lămuritor, resursa indicată este adusă pe calculatorul vizitatorului, opţional sau nu şi este lansat programul care prelucrează resursa respectivă. ⇒
  
  Cel mai important atribut al unei ancore este href 2 (calea către legătură, referinţa). Numeroasele exemple care vor fi date în acest paragraf vă vor lămuri asupra modului de utilizare a acestui atribut.
  
  4.13.1. Legături către alte pagini O legătură către un fişier HTML este afişată de browser cu o altă culoare şi este subliniată. Când este deasupra ei, cursorul grafic ia forma unei mâini, indicându-ne astfel că este o legătură pe care o putem utiliza. Exemplul 4.47. Mai jos, puteţi observa modul în care am scris un paragraf care conţine o legătură. Dacă se execută dublu-clic asupra ei, de pe server este adus fişierul index care va fi afişat de browser.

  Pentru mai multe informatii,
  vizitati site-ul NASA !

  
  
  Figura 4.57. Exemplu de paragraf care conţine o hiperlegătură
  
  
  
  De asemenea, o legătură poate fi creată şi cu ajutorul unei imagini (nu numai cu ajutorul unui text).
  
  Exemplul 4.48. Analizaţi codul de mai jos: Termenul este o traducere a celui din limba engleză, “hyperlink”. Din comoditate, este utilizată forma prescurtată a acestuia: “legătură” (“link”).
  
  1
  
  2
  
  Denumirea atributului este un acronim pentru Hypertext REFerence.
  
  Capitolul 4 – HTML, CSS - primele noţiuni
  
  137
  
  4.13.2. Operaţia download Uneori, este necesar ca utilizatorul paginii noastre să poată descărca, dacă doreşte, anumite fişiere. Descărcarea fişierelor poartă numele de download-are, termen care provine din limba engleză. Exemplul 4.49. Considerăm o pagină care va conţine legătura către fişierul care trebuie download-at (”bpro2003.zip”). Iată cum am construit ancora:
  
  Programa la informatica După ce vizitatorul execută un clic pe legătură, va apărea o cutie de dialog precum cea de mai jos:
  
  Figura 4.58. Cutia de dialog File Download
  
  Prin ea, vizitatorul poate comanda ca după descărcare, fişierul să fie automat deschis (Open) cu un program care are asociată respectiva extensie (în exemplu WinRAR, pentru a-l dezarhiva) sau să fie salvat pe hard, urmând a fi utilizat mai târziu, prin comanda Save. Exemplul 4.50. Presupunem că utilizatorul are pe calculatorul de pe care accesează pagina, placă de sunet şi boxe, iar placa de suet este instalată. De asemenea, presupunem că acesta are instalat un program de redare a sunetelor, cum ar fi celebrul Winamp şi că site-ul conţine fişierul ”Trumpet1.wav”. Se pune problema ca, atunci când vizitează pagina noastră, să poată asculta, la propria comandă, anumite mesaje audio.
  
  Sunetul unei trompete
  
  138
  
  Manual de Informatică pentru clasa a XII-a
  
  La executarea unui clic pe legătură, se download-ează fişierul ”Trompet1.wav” şi este lansat în executare programul Winamp care realizează redarea sunetelor (în particular, sunetul unei trompete).
  
  Figura 4.59. Legătură către un fişier audio
  
  Exemplul 4.51. Similar exemplului anterior, presupunem că avem în ”C:\” fişierul video ”Party-1.avi”. Considerăm că pentru extensia “.avi” avem asociat programul implicit, adică Windows Media Player. Pentru a apela fişierul, vom utiliza ancora de mai jos:
  
  Imagini si sunete (fisier avi)
  
  Figura 4.60. Legătură către un fişier video
  
  Efectul este că se lansează programul amintit şi redă fişierul.
  
  4.13.3. Legături relative la document Uneori, documentele HTML sunt lungi şi pot fi greu parcurse de vizitator. Desigur, utilizatorul le poate parcurge cu ajutorul barelor de defilare. Există posibilitatea ca, în anumite cazuri, să-l scutim de acest efort. Pentru aceasta, vom proceda astfel: ⇒
  
  În punctele de unde dorim să fie vizualizat documentul, creăm ancore cu nume. Numele unei ancore îl vom da prin atributul id.
  
  Exemple:
  
  (am “aşezat-o” în partea de sus a documentului).
  
  (am "aşezat-o” la mijlocul documentului). ⇒
  
  În punctele de unde dorim ca utilizatorul să poată vizualiza imediat documentul începând de la o anumită ancoră definită anterior creăm, tot cu ajutorul unei ancore, o hiperlegătură.
  
  Exemple: in top
  (salt în partea de sus a documentului). la mijloc
  (salt la mijlocul documentului).
  
  Capitolul 4 – HTML, CSS - primele noţiuni
  
  
  
  139
  
  Pentru a vedea “pe viu” cum funcţionează acest mecanism, este necesar ca fişierul să fie suficient de mare, astfel încât zona care conţine ancora destinaţie să nu fie vizibilă în momentul “trimiterii”.
  
  Există posibilitatea ca alte pagini către care se face trimitere să fie vizualizate începând dintr-un anumit punct, care conţine o anume ancoră. Exemplul 4.52. Un alt fişier HTML conţine o ancoră către fişierul anterior (numit “lung.html”): Salt la fisierul HTML "lung.html", la mijloc
  
  Figura 4.61. Exemplu de hiperlegatură spre o pagină cu ancoră relativă
  
  Observaţie ! Există cărţi sau documentaţii scrise utilizând HTML-ul. În loc să avem un cost ridicat al tipăririi ei pe hârtie, se preferă scrierea ei în format HTML şi livrarea ei către cititor pe un CD. Acesta va citi cartea direct pe calculator. Vă daţi seama. că, în astfel de cazuri, referinţele relative la document devin extrem de importante. Acest procedeu este des utilizat şi în cazul documentaţiilor on-line, oferite pe Internet.
  
  4.13.4. Trimiterea automată a unui e-mail Dorim ca o persoană să ne poată trimite un e-mail, direct din pagina noastră. Ea nu va avea decât să execute un clic pe respectiva legătură şi, imediat, se va lansa programul de trimitere a e-mail-ului, iar adresa noastră va fi trecută automat în câmpul destinatarului (To). Exemplul 4.53. Pentru a obţine acest efect, pentru atributul href se va completa ”mailto”, urmat de “:” şi de adresa de e-mail:
  
  Puteti sa-mi scrieti
  
  Puteti sa-mi scrieti
  
  Observaţie ! În ultimul timp, acest procedeu este mai puţin folosit. Anumite motoare de căutare, identifică cuvântul cheie ”mailto” şi extrag adresa de e-mail. Ulterior, această adresă este utilizată pentru a trimite mesaje publicitare nedorite (spam). Din acest motiv, este bine să scrieţi adresa fără acest atribut, iar cei interesaţi, cu un efort suplimentar, o copiază şi vă trimit e-mailul.
  
  140
  
  Manual de Informatică pentru clasa a XII-a
  
  4.14. Hărţi imagine Poate aţi întâlnit pe anumite site-uri o hartă. Dacă se execută click pe o anumită regiune a ei, se afişează anumite informaţii, specifice regiunii respectve, dacă se ewxecută click pe altă porţiune se afişează alte informaţii, ş.a.m.d. În acest caz s-a folosit procedeul hartă-imagine. Un alt exemplu de folosire a aceluiaşi procedeu: a pagină web în care se prezintă un anumit tip de mobilă. Dacă se dă click pe imaginea ce reprezintă un scaun, se afişează preţul scaunui, dacă se dă click pe imaginea ce reprezintă masa se afişează preţiul mesei, etc. Cum s-au obţinut aceste efecte?. Problema este următoarea: se dă o imagine şi se cere ca, prin executarea unui clic asupra unei anumite parţi a ei, să se efectueze una dintre operaţiile prezentate în paragraful anterior, prin executarea unui clic în altă parte a ei, să se efectueze o altă operaţie de acelaşi tip, ş.a.m.d. Cu alte cuvinte, trebuie să se creeze un meniu care să se prezinte sub formă de imagine. Priviţi imaginea alăturată. Ea cuprinde 4 regiuni marcate. Una sub formă de dreptunghi, alta sub formă de cerc şi două sub formă de poligoane. Dorim ca atunci când executăm clic pe una din aceste regiuni, să se execute o anumită operaţie. Browser-ul va afişa poza fără a evidenţia aceste zone, dar atunci când cursorul grafic trece deasupra unei astfel de zone, el va lua forma unei mâini şi, aşa cum am spus, executarea unui clic determină efectuarea unei operaţii specifice zonei, de exemplu vizualizarea unei pagini.
  
  Figura 4.62. Exemplu de imagine care cuprinde patru zone marcate
  
  4.14.1. Cum se introduce în HTML o hartă imagine ? Mai jos, puteţi observa modul în care au fost scrise zonele din imaginea anterioară (câinele):
  
  
  
  Capitolul 4 – HTML, CSS - primele noţiuni
  
  141
  
  
  
  
  
  Din analiza exemplului de mai sus, observăm că trebuie să utilizăm următoarele elemente:
  
  Elementul MAP - cu acesta descriem o hartă, utilizând două tag-uri: şi . Între ele se găseşte descrierea diverselor zone care alcătuiesc harta. Elementul are următorul atribut: ⇒
  
  name - numele hărţii. El trebuie trecut în atributul usemap al elementului IMG care descrie imaginea folosită ca o hartă:
  
  Elementul AREA - are rolul de a descrie o zonă din hartă pentru care, la executarea unui clic, se produce un anumit efect. Acest element utilizează tag-ul . Principalele atribute ale elementului AREA sunt:
  
  ⇒
  
  shape – descrie tipul regiunii respective;
  
  ⇒
  
  href – adresa fişierului html sau a unei alte resurse (la fel ca la ancore).
  
  După cum ştim, fiecare imagine este alcătuită din pixeli. Fiecare pixel este caracterizat de două coordonate (x,y), în sistemul de axe de mai jos:
  
  0,0
  
  Figura 4.63. Sistemul de coordonate asociat unei imagini
  
  Y
  
  X
  
  142
  
  Manual de Informatică pentru clasa a XII-a
  
  Atributul SHAPE poate lua valorile: 
  
  RECT COORDS="X1,Y1,X2,Y2" – dreptunghi, unde X1,Y1 reprezintă coordonatele colţului din stânga-sus şi X2,Y2 sunt coordonatele colţului din dreapta-jos.
  
  
  
  CIRCLE COORDS="X1,Y1,R" – cerc, coordonatele centrului, iar R raza cercului.
  
  
  
  POLY COORDS="X1,Y1, X2,Y2, ..., Xn,Yn" – poligon, unde X1,Y1, X2,Y2, ... reprezintă coordonatele vârfurilor.
  
  unde
  
  X1,Y1
  
  reprezintă
  
  x2,y2 x1,y1 x4,y4
  
  x1,y1 x1,y1 x3,y3
  
  R x2,y2
  
  xn,yn
  
  RECT
  
  CIRCLE
  
  POLY
  
  Figura 4.64. Coordonatele celor trei forme ale atributului SHAPE
  
  Totuşi, cum au fost obţinute coordonatele punctelor? Dacă pentru dreptunghi sau cerc aceste coordonate pot fi găsite relativ uşor (de exemplu, Paint-ul afişează coordonatele cursorului), în cazul poligoanelor închise, problema devine serioasă! Din acest motiv, s-au realizat mai multe programe prin care coordonatele se obţin automat.
  
  4.14.2. Programul Map This! Programul Map This! este destinat obţinerii automate a coordonatelor punctelor care definesc regiunile, pentru o imagine cu extensia .gif sau .jpeg. Practic, se încarcă o imagine într-unul dintre formatele enumerate anterior şi se trasează, cu mouse-ul, regiunile pe ea. Imaginea arată precum cea din Fig. 4.62 (câinele). După ce regiunile au fost trasate, se salvează sub formă de fişier HTML coordonatele astfel obţinute. 
  
  Programul este freeware şi poate fi obţinut de pe Internet. Căutaţi-l cu GOOGLE!
  
  
  
  El “ştie” mai multe decât ce este prezentat în acest paragraf, dar noi ne vom limita doar la ceea ce este strict necesar! Figura 4.65. Programul Map This!
  
  Capitolul 4 – HTML, CSS - primele noţiuni
  
  143
  
  1)
  
  După apelul programului, se încarcă imaginea. Apelaţi File şi New. Va apărea o cutie de tip Open, cu ajutorul căreia puteţi selecta fişierul dorit (.jpeg sau .gif).
  
  2)
  
  Pentru a putea lucra uşor cu imaginea, puteţi folosi Zoom in (măreşte imaginea) sau Zoom out (o micşorează).
  
  Figura 4.66. Butoane de marire şi micşorare a imaginii
  
  Zoom in 3)
  
  Zoom out
  
  Pentru a trasa un dreptunghi, selectaţi butonul alăturat. Apoi, selectaţi dreptunghiul dorit (ca în Paint), de la colţul din stânga-sus, către colţul din dreapta-jos.
  
  În exemplu, am selectat un dreptunghi care include cuvântul PETS.
  
  Figura 4.67. Selectarea unei forme dreptunghiulare
  
  4)
  
  Pentru a trasa un cerc, apăsaţi butonul alăturat. Apoi, selectaţi cercul dorit. În exemplu, încadrăm în cercuri capetele celor doi:
  
  Figura 4.68. Trasarea unor forme circulare
  
  5)
  
  Pentru a trasa un poligon oarecare, apăsaţi butonul alăturat şi trasaţi poligonul. Executaţi un clic în punctul de unde doriţi să începeţi trasarea. Apoi deplasaţi cursorul pe prima latură, apoi executaţi un click, deplasaţi cursorul pe a doua latură, executaţi un clic, ş.a.m.d. În final, executaţi un dublu-clic şi figura se va închide.
  
  În exemplu, am încadrat în poligon căţelul. Atenţie: pentru a obţine o cât mai fină încadrare, trasaţi laturi mici pentru poligon. Figura 4.69. Trasarea unei forme poligonale
  
  144
  
  6)
  
  Manual de Informatică pentru clasa a XII-a
  
  După ce am încadrat toate regiunile care ne interesează, putem trece la scrierea referinţei (link-ului) pentru fiecare dintre ele. Din meniu, apelaţi View şi Area List. Va apărea o listă, aşa cum este cea de mai jos. Întrucât am selectat 4 regiuni, lista are 4 elemente. Selectarea unui element al ei (în exemplul 1) are ca efect faptul că zona care îi corespunde va apărea în imagine cu o culoare diferită, pentru a le putea distinge. Figura 4.70. Lista Area List
  
  Un dublu-clic în listă, pe reprezentarea unei anumite regiuni, are ca efect scrierea link-ului respectiv. În exemplul următor, comandăm browser-ului încărcarea unui anumit fişier HTML (o pagină). Procedaţi la fel pentru fiecare regiune în parte. După ce aţi terminat această operaţie, treceţi la pasul următor. Spre exemplu, pentru zona 3 (Area #3), avem: Figura 4.71. Fereastra de setări a une zone
  
  7)
  
  Urmează salvarea hărţii. Apelaţi File şi Save As. Selectaţi CSIM. Salvaţi sub formă de fişier HTML.
  
  Există posibilitatea să salvaţi într-un fişier HTML deja scris (acesta va conţine src-ul cu imaginea). Dacă salvaţi într-un fişier diferit, puteţi apoi să-l deschideţi, să selectaţi descrierea (între şi ) şi să o includeţi în fişierul dvs. De acum, puteţi folosi fără probleme hărţi imagine. În final, câteva amănunte “de lucru”: Ştergerea unei regiuni. Apăsaţi butonul alăturat şi aşezaţi cursorul grafic deasupra ei. Apoi, apăsaţi butonul drept al mouse-ului. Din meniul flotant care va apărea, selectaţi Delete Area. Ştergerea unui punct al liniei poligonale. Atunci când cursorul grafic staţionează asupra sa, cursorul ia formă de cruce. Dacă se apasă butonul drept şi se selectează Delete Point, punctul va fi şters şi, deci, ignorat pentru poligon.
  
  punct şters
  
  Figura 4.72
  
  Exerciţiu de tip referat! Întocniţi un referat despre programul Map This! sau un altul cu acelaşi rol. Este foarte important să învăţaţi să vă autoducumentaţi. Nu întotdeauna, pentru orice temă, veţi găsi o carte care s-o trateze!
  
  Capitolul 4. HTML, CSS – primele noţiuni
  
  145
  
  4.15. Elementele BASE, META şi SCRIPT Vom prezenta în continuare câteva elemente esenţiale care pot fi scrise în cadrul antetului (HEAD), extrem de utile în foarte multe situaţii.
  
  Elementul BASE - are forma generală şi are rolul de a preciza o adresă de bază pentru resurse, iar celelalte adrese se obţin adăugând după adresa de bază o adresă specifică. Tag-ul se va scrie în antetul paginii, adică în HEAD. Exemplul 4.54. Pe calculatorul meu, am câteva imagini în folder-ul ”C:\LaMare” (1.jpg, 2.jpg, etc.). Valoarea folder-ului va fi trecută în BASE (href). De acum, pot scrie adresa pe scurt (”1.jpg”).
  
  ...
  
  ...
  
  Observaţii ! 
  
  Practic, se formează C:/LaMare/1.jpg.
  
  
  
  Vă daţi seama că în acest mod pot scrie şi o adresă de internet: , etc.
  
  Elementul META - este folosit pentru a furniza informaţii motoarelor de căutare. Unele dintre ele vizitează doar antetul pentru a obţine informaţii. Informaţiile conţinute de acest element nu sunt afişate de browser, dar este important să-l folosim pentru ca informaţiile conţinute în site-ul nostru să fie accesibile. Tag-ul se găseşte în antet (HEAD). Observaţie ! În antet se pot găsi mai multe elemente META. Atributele elementului META sunt: ⇒
  
  Atributul NAME – pentru el se pot utiliza câteva cuvinte cheie care vor fi prezentate în cele ce urmează.
  
  ⇒
  
  Atributul CONTENT – are un conţinut variabil în funcţie de valoarea trecută pentru NAME.
  
  Cum utilizăm cele două atribute ? 
  
  Pentru a specifica autorul unui document:
  
  146
  
  
  
  Manual de Informatică pentru clasa a XII-a
  
  Pentru a specifica titlul unui document:
  
  
  
  Pentru a specifica cuvintele cheie după care să fie regăsit site-ul dvs. Vă daţi seama de importanţa acestora...
  
  Important ! Trebuie să treceţi forma scurtă a unui cuvânt. De exemplu, dacă trec "stup", motoarele vor furniza adresa site-ului, chiar dacă o persoană caută după cuvântul cheie "stupi".
  
  
  
  Pentru a specifica limba în care este scris site-ul (este utilă în cazul căutărilor avansate). În exemplu, site-ul este scris în limba română:
  
  
  
  Pentru a specifica textul pe care îl va afişa un motor de căutare, la listarea paginilor. Dacă acesta nu este trecut, motorul va afişa primele linii din pagină, ceea ce nu e foarte relevant.
  
  Observaţii importante ! 
  
  Există şi alte atribute ale elementului META, dar aceştia doi sunt suficienţi. Majoritatea motoarelor de căutare se bazează în principal pe aceştia: Description şi Keywords.
  
  
  
  Optimizarea site-urilor pentru motoarele de căutare (SEO – Search Engine Optimization) reprezintă o unealtă indispensabilă pentru a fi eficient pe Internet. Există firme specializate care se ocupă strict de această problemă, iar preţurile sunt mari…
  
  
  
  La început, cei care au realizat motoarele de căutare au vrut să ajute programatorii web prin utilizarea tag-urilor META, pentru a evidenţia mai uşor şi mai bine conţinutul paginilor. Apoi, anumite persoane au folosit acest lucru pentru a obţine un avantaj şi au introdus cuvinte care nu aveau nici o legătură directă cu paginile respective, ci doar pentru a fi listaţi “mai bine”. Aşadar, tag-urile META nu mai erau utile, ci doar o unealtă pentru spam (informaţie nedorită). De aceea, unele motoare au renunţat definitiv la ele, iar altele, dimpotrivă, pun paginile la sfârşitul listei dacă elementele cheie din META nu se regăsesc în conţinutul paginii. În concluzie, reţineţi: Folosiţi tag-urile META cu grijă şi nu introduceţi cuvinte ce nu sunt incluse şi în fişierul HTML. Nu repetaţi cuvintele!
  
  Capitolul 4. HTML, CSS – primele noţiuni
  
  147
  
  Elementul SCRIPT - este folosit pentru introducerea anumitor secvenţe de
  
  program în cadrul paginilor web. Există mai multe limbaje (numite de scriptare) care permit scrierea acestor secvenţe, cum ar fi JavaScript sau VBScript. Programa nu include studiul acestor limbaje.
  
  4.16. Cadre (FRAMESET, FRAME şi IFRAME) Există oare posibilitatea ca aceeaşi fereastră a browser-ului să afişeze mai multe fişiere HTML (sau alte resurse) simultan? Răspunsul este afirmativ. Exemplul 4.55. Priviţi imaginea din Fig.4.73: fereastra este împărţită în 4 părţi: două dintre ele afişează două fişiere HTML, iar celelalte două afişează două imagini. Blocurile în care a fost împărţită fereastra poartă denumirea de cadre (frame-uri).
  
  Figura 4.73. Exemplu de pagină web împărţită în cadre
  
  Cum s-a obţinut acest efect? Înainte de a prezenta sistematic noţiunile, ca să vă faceţi o idee, priviţi fişierul HTML de mai jos:
  
  
  
  
  
  
  
  
  
  148
  
  Manual de Informatică pentru clasa a XII-a
  
  Elementul FRAMESET - are rolul de a împărţi fereastra în mai multe cadre. În fişierul HTML el înlocuieşte . Pentru a-l folosi, vom utiliza două etichetele: şi . Vom studia câteva atribute ale acestui element: ⇒
  
  Rows – descrie liniile în care este împărţită fereastra;
  
  ⇒
  
  Cols – descrie coloanele în care este împărţită fereastra.
  
  Observaţie ! În exemplul dat iniţial, fereastra este împărţită în două linii. Apoi, a doua linie este împărţită în trei coloane. Probabil că vă veţi întreba: de ce a fost împărţită a doua linie în trei coloane şi nu prima? Observaţi cum se închid tag-urile şi . Iniţial, avem două linii. Prima linie conţine un element FRAME şi a doua un element FRAMESET. Acesta din urmă declară 3 coloane, deci între tag-urile lui se vor găsi 3 elemente FRAME:
  
  
  
  
  
  Figura 4.74. Schema paginii obţinute
  
  Exemplul 4.56. Două linii, iar prima linie este împărţită în trei coloane. Prima linie conţine un FRAMESET, a doua un FRAME:
  
  -
  
  -
  
  Figura 4.75. Schema paginii obţinute
  
  Pentru a stabili dimensiunile liniilor (coloanelor), există mai multe modalităţi: 1) Procentual, ca în exemplele date: Avem 2 linii. Prima linie ocupă 30% din înălţimea ferestrei, iar a doua, 70%. Avem 3 coloane. Prima coloană ocupă 30% din lăţimea ferestrei, a doua 30%, iar a treia 40%.
  
  Capitolul 4. HTML, CSS – primele noţiuni
  
  149
  
  2) Proporţional: . 1+2+3=6. Prima coloană ocupă 1/6 din lăţime, a doua 2/6=1/3 din lăţime, iar a treia 3/6=1/2 din lăţime. 3) Mixt: Prima coloană ocupă 50% din lăţime, iar ultima 200 de pixeli. Ce a rămas se împarte proporţional între coloanele 2 şi 3, deci coloana 2 ocupă 1/3 şi coloana 3, 2/3. Observaţie ! În cazul în care valorile sunt incoerente, nu s-au dat norme privind modul în care trebuie procedat. Prin urmare, fiecare tip de browser va proceda în modul său specific. Încercaţi...
  
  Elementul FRAME - este utilizat pentru a preciza conţinutul unui anumit cadru. Se utilizează un singur tag: . Iată principalele proprietăţi:
  
  ⇒
  
  src – adresa fişierului HTML sau a imaginii utilizate. 
  
  de exemplu, cadrul afişează un fişier HTML:
  
  
  
  sau cadrul afişează o imagine:
  
  ⇒
  
  marginheight – marginile, în pixeli sau procent %, faţă de partea de sus (top) şi cea de jos (bottom);
  
  ⇒
  
  marginwidth – marginile, în pixeli sau procent %, faţă de partea din stânga (left) şi cea din dreapta (right). 
  
  Sus şi jos marginea este de 100 pixeli, iar în stânga şi dreapta este de 150 pixeli:
  
  ⇒
  
  frameborder - poate lua două valori: 1 (valoare implicită) sau 0. Dacă valoarea luată de acest atribut este 0, atunci cadrul nu mai este separat de celelalte printr-un chenar.
  
  Observaţie ! Dacă vrem să nu se traseze chenarul separator între două cadre, trebuie ca amândouă să aibă valoarea 0 pentru acest atribut. E logic, nu? ⇒
  
  scrolling – tratează prezenţa barei de scroll (defilare). Atributul poate lua una dintre cele trei valori:
  
  150
  
  Manual de Informatică pentru clasa a XII-a
  
  1) auto – valoarea implicită. Bara de scroll este prezentă numai dacă este cazul (ce trebuie afişat în cadru ocupă o suprafaţă mai mare decât cea a cadrului); 2) yes - bara de scroll este întotdeauna prezentă; 3) no – bara de scroll nu este în nici un caz afişată. ⇒
  
  noresize – prezenţa sa cere browser-ului să nu permită vizitatorului paginii respective să redimensioneze cadrul. Dacă este prezent pentru un cadru, atunci nu pot fi redimensionate nici cadrele învecinate.
  
  ⇒
  
  name – are rolul de a atribui un nume elementului FRAME.
  
  ?
  
  Probabil că vă veţi întreba: la ce foloseşte numele unui cadru? Ei bine, rolul este uriaş. Mai precis, dintr-un cadru, se poate comanda conţinutul oricărui cadru (inclusiv al cadrului curent).
  
  Exemplul 4.57. Browser-ul afişează două cadre. Primul dintre ele conţine link-urile pentru capitolele unei cărţi. Al doilea, iniţial, afişează paragrafele primului capitol. La comanda vizitatorului paginii respective, se pot afişa, în al doilea cadru, paragrafele oricărui alt capitol.
  
  Figura 4.76. Pagina propusă pentru Exemplul 4.57
  
  Iată fişierul HTML iniţial, cel care creează cadrele şi în care unul dintre ele este numit “cpt”:
  
  
  
  
  
  Primul cadru afişează următorul fişier HTML:
  
  Capitolul 4. HTML, CSS – primele noţiuni
  
  151
  
  
  
  Capitolul 1
  Capitolul 2
  Capitolul 3
  
  Fişierul de mai sus conţine trei ancore. Pentru fiecare ancoră s-a folosit un atribut nou, numit target. Acesta are rolul de a preciza “ţinta”, adică numele cadrului care va afişa fişierul HTML cerut. Observaţie ! În absenţa atributului target, fişierul va fi afişat în cadrul care conţine ancora!
  
  Elementul IFRAME - permite crearea unui cadru în corpul (BODY) documentului. Cu alte cuvinte, cadrele se pot folosi şi în mod clasic. Pentru a-l descrie, se folosesc etichetele şi . Exemplul 4.58. Mai jos, un cadru conţinut de un document afişează un fişier HTML:
  
  

  Acesta este un paragraf

  
  
  
  
  Figura 4.77. Exemplu de pagină cu un cadru în interiorul corpului documentului
  
  Atributele elementului sunt: ⇒
  
  name – numele, am văzut care este rolul lui;
  
  ⇒
  
  frameborder – poate lua valoarea 0 sau 1, la fel ca pentru elementul FRAME;
  
  ⇒
  
  src – adresa fişierului HTML sau a imaginii utilizate;
  
  ⇒
  
  scrolling – la fel ca orice cadru.
  
  Elementul NOFRAMES - este cuprins între tag-urile şi . În cazul în care browser-ul vizitatorului x nu poate afişa cadre, se utilizează pentru a scrie tag-urile HTML alternative. Ce-i drept, acest lucru se întâmplă din ce în ce mai rar (fabricanţii de soft s-au adaptat cerinţelor). De regulă, în acest caz, se vor utiliza şi câteva ancore (câte una pentru fiecare cadru).
  
  152
  
  Manual de Informatică pentru clasa a XII-a
  
  4.17. Elementul MARQUEE Acesta creează un bloc în care elementele introduse între etichetele şi se mişcă într-o anumită direcţie. Acest efect se numeşte Scrolling Display şi poate fi util la afişarea anunţurilor (publicitare):
  
  Figura 4.78. Efect obţinut cu ajutorul elementului MARQUEE
  
  Codul pentru a obţine animaţia de mai sus este: Salut! Uite masina mea!
  
  Se observă că elementul este la nivel de text, imaginea fiind aliniată cu textul introdus. Oricum, trebuie folosit cu grijă şi cu gust pentru că poate obosi vizitatorul cu prea multă mişcare... Cele mai importante atribute ale acestui element sunt: ⇒
  
  Direction – direcţia de mişcare a blocului ("Left" sau "Right"). Valuarea implicită este dinspre stânga ("Left").
  
  ⇒
  
  Behavior – tipul de scroll aplicat. Poate lua valorile:
  
  ⇒
  
  
  
  Scroll – valoare implicită - conţinutul se mişcă de la o margine la alta şi apoi reapare;
  
  
  
  Slide – când se atinge marginea opusă (cea indicată de atributul Direction), mişcarea se opreşte;
  
  
  
  Alternate – conţinutul se mişcă alternativ între cele două margini şi este întotdeauna vizibil.
  
  Scrolldelay – timpul de tranziţie al elementelor de la o poziţie la alta (în milisecunde, valoarea implicită este de "85"). Astfel, stabilim viteza cu care se derulează “animaţia”: cu cât această valoare este mai mare, cu atât vom avea o tranziţie mai lentă a conţinutului. De exemplu: (jumătate de secundă).
  
  Capitolul 4. HTML, CSS – primele noţiuni ⇒
  
  153
  
  Scrollamount – se setează numărul de pixeli cu care se mută conţinutul blocului, la fiecare pas. O valoare mai mare implică o viteză mărită de mişcare. Valoarea implicită este "6". De exemplu: .
  
  ⇒
  
  Loop – numărul de cicluri pe care să le efectueze conţinutul. Implicit, valoarea este "INFINITE" (la nesfârşit). O problemă ar fi faptul că după terminarea ultimului ciclu, conţinutul dispare. Se poate rezolva însă cu atributul Behavior, specificând ca la ultimul ciclu să se oprească atunci când atinge marginea respectivă (cu "Slide"): De exemplu: Salutare!.
  
  4.18. Aşezarea implicită în pagină a diverselor elemente
  
  O întrebare foarte importantă: cum aranjează browser-ul în pagină diversele elemente (imagini, paragrafe, tabele, etc.)? Vă daţi seama de importanţa ei: orice creator de pagini web doreşte să amplaseze elementele care alcătuiesc o pagina într-un anumit fel... În HTML, există două tipuri de elemente: elemente la nivel de bloc şi elemente la nivel de text (inline). A)
  
  Elementele la nivel de bloc sunt aşezate pe rând nou. Exemple de elemente la nivel de bloc: P (paragraf), TABLE (tabel), TR (linie de tabel) H1..H6, OL, LI, UL (liste), DL, DT, DD (itemi din liste).
  
  B)
  
  Elemente la nivel de text (inline). Acestea se scriu pe linia curentă, în continuare. Exemple de elemente la nivel de text: B (bold), I (italic), IMG (imagini), DEL, DFN, etc.
  
  Exemplul 4.59. Analizaţi codul sursă de mai jos:
  
  
  
  154
  
  Manual de Informatică pentru clasa a XII-a
  
  

  Acest paragraf este scris pentru a verifica modul de aliniere pe orizontala in cazul unui element IMG, care este de tip INLINE , deci se insereaza exact ca un cuvant intr-un paragraf

  Paragraful este un element de tip BLOC, asa ca se insereaza pe o linie noua!

  
  
  Figura 4.79. Pagina web obţinută
  
  Capitolul 4. HTML, CSS – primele noţiuni
  
  155
  
  4.19. Alte modalităţi de aşezare în pagină a elementelor
  
  În CSS există posibilitatea să se aşeze elementele în poziţiile dorite (alta decât cea în cazul fluxului normal). Această posibilitate este dorită de mult timp de către creatorii de pagini WEB. O astfel de aşezare se poate face prin utilizarea atributului position, care poate lua mai multe valori: 
  
  static – implicit – aşezarea se face în flux normal;
  
  
  
  absolute – aşezare în poziţii absolute – există, totuşi, anumite nuanţe, motiv pentru care vom da mai multe exemple pentru a vă lămuri.
  
  Exemplul 4.60. Un paragraf şi un tabel sunt aşezate în flux normal. O celulă a tabelului conţine o imagine:

  Un text oarecare

  Figura 4.80. Pagina web

  A11
  A21	A22

  Exemplul 4.61. Adăugăm componentei IMG un stil, prin care-i precizăm poziţia. Poziţia este dată în pixeli prin atributele top şi left. În acest caz, deplasarea este dată faţă de colţul din stânga-sus al ferestrei:
  
  ...

  Un text oarecare

  Figura 4.81. Pagina web

  A11
  A21	A22

  Pare simplu, nu-i aşa? În realitate, lucrurile sunt puţin mai complicate. Aceasta se întâmplă atunci când elementul părinte este poziţionat în flux normal.
  
  156
  
  Manual de Informatică pentru clasa a XII-a
  
  Exemplul 4.62. Elementul părinte al lui IMG este elementul TD (nu TABLE). Poziţionăm absolut şi elementul TD. Observăm că, în acest caz, elementul apare în afara tabelului, iar IMG este poziţionat relativ faţă de TD (vezi Fig. 4.82).
  
  ...

  Un text oarecare

  Figura 4.82. Pagina web

  A11	A21
  A21	A22

  ... Ideea de bază este următoarea: dacă un element este poziţionat absolut şi dacă părintele său, părintele părintelui, .... sunt poziţionate în flux normal, atunci elementul este poziţionat în raport de colţul din stânga-sus al ferestrei. Dacă parintele este poziţionat absolut, atunci elementul este poziţionat relativ faţă de părinte. Exemplul 4.63. De această dată, poziţionăm absolut tabelul şi imaginea. Aşa cum era de aşteptat, imaginea se aliniază în raport de colţul tabelului.
  
  

  Un text oarecare

  ...
  
  Figura 4.83. Pagina web
  
  Observaţie ! Pentru poziţionarea absolută, orice element poziţionat în flux normal se consideră că se află la coordonatele (0,0) faţă de părintele său. Cu această constatare, un element este poziţionat, de fapt, relativ faţă de părinte.
  
  Capitolul 4. HTML, CSS – primele noţiuni
  
  
  
  157
  
  relative – spre deosebire de poziţionarea absolută, în cazul poziţionării relative, un element este poziţionat în raport de elementul părinte, chiar şi în cazul în care acesta din urmă este pozionat în flux normal.
  
  Exemplul 4.64. Mai jos, elementul IMG este poziţionat relativ faţă de elementul părinte (TD):
  
  
  
  

  Un text oarecare

  Figura 4.84. Pagina web

  A11	A21
  A21	A22

  
  
  Observaţie ! Atributele pot lua şi valori negative.
  
  4.20. Atributul z-index Din studiul mecanismului de poziţionare a elementelor s-a putut distinge faptul că există posibilitatea ca anumite elemente să fie afişate suprapus. Pe de o parte, dacă nu dorim ca acest lucru să se întâmple, trebuie să fim atenţi la scrierea coordonatelor, dar, pe de altă parte, putem face ca această posibilitate să lucreze în interesul nostru. Mai mult, prin intermediul atributului z-index, putem controla ordinea de afişare a elementelor suprapuse. Exemplul 4.65. Un tabel are culoarea de fond galbenă, un altul are culoarea albastră, iar în rest sunt identice. Primul tabel reţine pentru z-index, 1, iar al doilea, 2. Cele două tabele sunt afişate parţial suprapus, dar deasupra se găseşte cel care pentru z-index reţine 2 (vezi Fig. 4.85.a). Dacă se inversează valorile reţinute de z-index pentru cele două tabele, atunci tabelele sunt afişate în ordine inversă (vezi Fig. 4.85.b).
  
  158
  
  Manual de Informatică pentru clasa a XII-a
  
  a)
  
  b)
  
  Figura 4.85. Ordinea tabelelor în funcţie de atributul z-index
  
  
  
  

  A11	A21
  A21	A22

  A11	A21
  A21	A22

  
  
  Capitolul 4. HTML, CSS – primele noţiuni
  
  159
  
  4.21. Atributul display Am învăţat faptul că în HTML există elemente de tip bloc (block), care se afişează la început de rând şi singure pe linie şi elemente de tip text (inline) care se afişează în continuarea rândului curent. Există posibilitatea de a schimba modul implicit de afişare, prin utilizarea atributului diplay. Acesta poate lua următoarele valori: 
  
  Block – elementele se afişează la început de rând.
  
  Exemplul 4.66. Un element de tip bold va fi afişat block, deşi, implicit, se afişează inline:
  
  
  
  

  Un text oarecare

  
  
  
  
  Figura 4.86. Element de tip bold afişat la început de rând
  
  Inline – elementele se afişează în continuarea rândului curent.
  
  Exemplul 4.67. Implicit, paragrafele se afişează la început de rând (block). De această dată, se afişează inline:
  
  
  
  

  Un text oarecare

  Alt text oarecare

  
  
  
  
  Figura 4.87. Element de tip paragraf afişat în continuarea randului curent
  
  none – elementul (elementele) nu se va afişa.
  
  160
  
  Manual de Informatică pentru clasa a XII-a
  
  4.22. Caractere HTML În HTML există posibilitatea de introducere a caracterelor prin codul lor. Astfel, putem folosi şi caractere care nu se obţin direct de la tastatură, cum ar fi: semne matematice, litere greceşti, litere specifice limbii române, etc. Exemplul 4.68. Pentru texte în limba română, putem introduce diacritice: "Mama merge la piaţă"  Mama merge la piaţă "Ţara mea este România"  Ţara mea este România "O şopârlă"  O şopârlă Exemplul 4.69. Pentru texte (formule) “matematice”: "Aria cercului este πR "  Aria cercului este πR;2 2
  
  "sin(ωt) "  sin(ωt) Exemplul 4.70. Pentru semne speciale (se pot lăsa mai multe spaţii între cuvinte): " Nu mai copiaţi..."  © Nu mai copiaţi... "Mama merge!" 
  
  mama   merge
  
  Observaţie ! Prin folosirea spaţiului, browser-ul nu va pune cele două cuvinte pe linii diferite! Exemplul 4.71. Evitarea confuziei de caractere pe care o poate face browser-ul (caracterul "
  
  Figura 5.13. Rezultatul
  
  Figura 5.14. Formularul
  
  5.4. Elementul SELECT Elementul SELECT se utilizează pentru ca browser-ul să afişeze o listă. Fiecare opţiune din listă este marcata de un element OPTION. Dacă este introdusă într-un formular, către server se va transmite opţiunea selectată.
  
  Figura 5.15.
  
  Exemplul 5.11. Mai jos este prezentat formularul care afişează lista din figura de mai sus şi script-ul PHP care afişează opţinea selectată din formular:
  
  Optiunea 1 Optiunea 2
  
  Capitolul 5. Limbajul PHP
  
  177
  
  Optiunea 3
  
  
  Scriptul PHP este:
  
  5.5. Constante. Variabile. Operatori 5.5.1. Constante În PHP se pot defini constante cu ajutorul funcţiei define. Forma generală a acesteia este: define("nume_constanta", valoare). Exemplul 5.12. În script-ul următor se defineşte constanta e şi se probează dacă este recunoscută. La apel, se afişează 5.42:
  
  5.5.2. Variabile În PHP numele unei variabile începe cu $. În continuare, trebuie să fie o literă sau o liniuţă de subliniere. În rest, puteţi folosi şi cifre. ⇒
  
  Nu este necesar ca variabilele să fie declarate de la început. Ele se definesc atunci când sunt folosite. Mai mult, îşi schimbă tipul în funcţie de valoarea reţinută.
  
  Exemplul 5.13. Analizaţi script-ul următor: iniţial, variabila $x reţine 1. Apoi, i se atribuie un şir de caractere. Operaţia este posibilă şi în urma ei se reţine şirul, aşa cum rezultă din valoarea afişată:
  
  178 ⇒
  
  Manual de Informatică pentru clasa a XII-a
  
  În PHP este posibilă şi adresarea indirectă, aşa cum rezultă din exemplele următoare.
  
  Exemplul 5.14. Se afişează 3. Didactic, putem stabili ceea ce se afişează, astfel: $$x = $($x) = $y = 3.
  
  Exemplul 5.15. Se afişează "Un sir". Astfel, avem: $$$z = $$($z) = $$y= $($y) = $x = "Un sir".
  
  5.5.3. Operatori Mulţi dintre operatorii limbajului PHP sunt cunoscuţi din C++. Acesta este motivul pentru care vom prezenta doar anumite particularităţi specifice limbajului. Pentru început, prezentăm, în ordine descrescătoare, prioritatea operatorilor: 1. !, ++, --, (int), (double), (string); 2. *, %, /; 3. =; 4. ==, !=, ===, !=== ; 5. &; 6. ^; 7
  
  &&;
  
  8. ?:; 9. =, +=, -=, /=. *=, %=, &=, |=, ^=; 10. And; 11. Xor; 12. Or; 13 ,.
  
  Capitolul 5. Limbajul PHP ⇒
  
  179
  
  În PHP se pot folosi operatori de conversie explicită, cunoscuţi din C++. Ca şi în C++, ei se aplică prefixat. Astfel, există: (int) - conversie către o valoare întreagă, (string) - conversie către şir, iar (double) - conversie către real.
  
  Exemplul 5.16. Conversia unui număr real către un întreg are ca efect eliminarea zecimalelor. Script-ul următor afişează valoarea 7:
  
  Exemplul 5.17. Conversia unui şir către un întreg reuşeşte chiar dacă şirul conţine şi caractere nenumerice! Caracterele numerice trebuie să ocupe primele poziţii! În exemplul următor, în urma conversiei, x va reţine 2 şi y va reţine 3. Se afişează suma, adică 5.
  
  Observaţie ! Uneori, conversiile se realizează implicit (fără utilizarea operatorului de conversie explicită). Exemplul 5.18. Script-ul următor afişează -1.76:
  
  Exemplul 5.19. Se afişează -1:
  
  Exemplul 5.20. Se afişează ... tot –1:
  
  180
  
  Manual de Informatică pentru clasa a XII-a
  
  ⇒
  
  După efectuarea unei operaţii cu un operator din grupele 3 sau 4, se obţine o valoare logică: true (1) sau false (0).
  
  ⇒
  
  Operatorul === se referă la egalitate ca valoare şi ca tip, spre deosebire de == care se referă la egalitate doar ca valoare. Exemplele următoare vă vor convinge.
  
  Exemplul 5.21. Script-ul următor afişează “egali ca valoare”:
  
  Înlocuiţi în script-ul anterior primele două atribuiri cu atribuirile de mai jos. Veţi observa că se afişează numai “egali ca valoare”. Aceasta demonstrează că, deşi valorile logice au reţin 1 sau 0, ele rămân, de fapt, valori logice! $x=2>1; $y=1; Observaţie ! Se poate deduce cu uşurinţă rolul operatorului !==. Operaţia pe care o efectuează returnează true, dacă este diferenţă între tip sau valoare şi false, în caz contrar. ⇒
  
  Este permisă atribuirea multiplă.
  
  Exemplul 5.22. Script-ul următor afişează “un sir”:
  
  ⇒
  
  Diferenţa dintre || şi Or, && şi And, ^ şi Xor este doar de prioritate!
  
  Capitolul 5. Limbajul PHP
  
  181
  
  5.6. Instrucţiunile limbajului PHP Instrucţiunile PHP sunt asemănătoare celor din C/C++. Din acest motiv, ne vom limita la o scurtă prezentare a lor şi la câteva exemple de utilizare. Pentru exemplificare, vom folosi următorul document HTML care trimite o valoare x către server. Pe server se va găsi un script, numit ”index.php”, care răspunde trimiţând o valoare către browser.
  
  
  
  
  
  
  
  
  
  5.6.1. Instrucţiunea expresie Se foloseşte pentru diverse calcule sau atribuiri. Exemplul 5.23. Analizaţi instrucţiunea: $x=$y*$y+1;.
  
  5.6.2. Instrucţiunea IF Această instrucţiune are forma generală: if (expresie) instructiune1 else instructiune2 Dacă expresie produce la evaluare o valoare diferită de 0 (true), se execută instructiune1, altfel se execută instructiune2. Exemplul 5.24. Dacă valoarea este în intervalul [1,2], se transmite către browser valoarea (x+1)/2, altfel se transmite valoarea (x-1)/2:
  
  182
  
  Manual de Informatică pentru clasa a XII-a
  
  5.6.3. Instrucţiunea compusă Atunci când dorim ca mai multe instrucţiuni să fie interpretate ca una singură, instrucţiunile se trec între "{" şi "}". Instrucţiunea switch are forma generală: switch (expresie) { case exp1: secventa instructiuni1; break; case exp2: secventa instructiuni2; break; ...
  
  case expn: secventa instructiunin; break; [default: secventa instructiunin+1]; } unde expresie are semnificaţia: expresie de tip întreg, expi sunt expresii constante de tip întreg, iar instrucţiunii, o secvenţă oarecare de instrucţiuni. Principiul de executare este: •
  
  se evaluează expresia;
  
  •
  
  dacă aceasta produce o valoare egală cu cea produsă de expi, se execută, în ordine, instrucţiunii şi se trece la instrucţiunea următoare, altfel se execută numai secvenţa instrucţiunin+1.
  
  Observaţie ! Alternativa default este facultativă. În absenţă, în cazul în care nu există coincidenţă de valori, se trece la instrucţiunea următoare. Exemplul 5.25. Dacă valoarea transmisă pentru x este 1, 2, 3, 4, atunci valoarea respectivă este retransmisă către utilizator alfabetic, altfel, se va transmite un mesaj oarecare.
  
  echo(“unu”); break; echo(“doi”); break; echo(“trei”); break; echo(“patru”); break; echo (“Nu este 1, 2, 3 sau 4”);
  
  5.6.4. Instrucţiunea FOR Instrucţiunea for are forma generală: for(expresieiniţializare;expresietest;expresieincrementare) instrucţiune
  
  Capitolul 5. Limbajul PHP
  
  183
  
  După cum se vede, între paranteze se găsesc 3 expresii: • •
  
  •
  
  Expresieinitializare se foloseşte, de regulă, pentru iniţializarea variabilei de ciclare. Expresietest se foloseşte pentru a testa dacă se execută instrucţiunea subordonată - dacă expresia produce la evaluare o valoare diferită de 0 (true), instrucţiunea subordonată for se execută. Expresieincrementare se foloseşte pentru incrementarea variabilei de ciclare.
  
  Principiul de executare este: P1. Se evaluează expresieiniţializare. P2. Se evaluează expresiatest. În cazul în care aceasta produce o valoare diferită de 0, se execută instrucţiunea subordonată for; apoi se trece la P3, altfel se trece la instrucţiunea următoare (se termină executarea instrucţiunii for). P3. Se evaluează expresia de incrementare şi se revine la P2. Exemplul 5.26. Se calculează suma pătratelor primelor x numere naturale (x este număr natural):
  
  5.6.5. Instrucţiunea WHILE Instrucţiunea while are forma generală: while (expresie) instructiune Principiul de executare este următorul: P1. Se evaluează expresia; P2. Dacă valoarea produsă de aceasta este diferită de 0, se execută instrucţiunea subordonată, apoi se revine la P1, altfel se trece la instrucţiunea următoare. Exemplul 5.27. Se calculează suma de la exemplul anterior:
  
  Observaţie ! Script-ul oferă şi un exemplu de instrucţiune compusă.
  
  184
  
  Manual de Informatică pentru clasa a XII-a
  
  5.6.6. Instrucţiunea DO WHILE Forma generală a acestei instrucţiuni este următoarea: do instructiune while(expresie); Principiul de executare este următorul: P1. Se execută instrucţiunea subordonată; P2. Se evaluează expresia. În cazul în care valoarea produsă la evaluare este 0 (false), executarea instrucţiunii do se termină, altfel se trece la P1. Exemplul 5.28. Se calculează suma pătratelor primelor x numere naturale (x este natural):
  
  5.7. Funcţii în PHP În PHP se pot crea funcţii fără prea mari diferenţe faţă de ce ştim din C/C++. Exemplul 5.29. Mai jos este prezentat un script care utilizează o funcţie pentru a calcula aria unui triunghi, pe care apoi o afişează:
  
  ⇒
  
  Pentru a întoarce rezultate se utilizează, aşa cum suntem deja obişnuiţi, return. Forma generală este: return expresie.
  
  ⇒
  
  Transmiterea parametrilor se face prin valoare şi prin referinţă.
  
  Capitolul 5. Limbajul PHP
  
  185
  
  A) Dacă un parametru este transmis prin valoare, atunci valoarea sa rămâne neschimbată după executarea funcţiei. Prin valoare se pot transmite atât valori, cât şi conţinutul unor variabile. Exemplul 5.30. Script-ul următor afişează 5, chiar dacă în funcţie s-a încercat modificarea valorii transmise:
  
  Exemplul 5.31. Script-ul următor exemplifică faptul că o funcţie poate fi apelată atât printr-o valoare care este conţinutul unei variabile, cât şi printr-o valoare oarecare. Se afişează 3 şi 7, deci 37.
  
  B) Dacă un parametru este transmis prin referinţă atunci, în corpul funcţiei, se poate modifica valoarea sa. Evident, un parametru transmis prin valoare trebuie să fie o variabilă. Pentru a transmite un parametru prin referinţă, el trebuie precedat de caracterul &. Exemplul 5.32. În script-ul următor, se modifică valoarea parametrului transmis prin referinţă. Se va afişa 6, nu 5, cât era valoarea iniţială a variabilei $x:
  
  ⇒
  
  O variabilă se numeşte globală dacă a fost definită în afara oricărei funcţii. Implicit, ea nu poate fi adresată din corpul unei funcţii. Totuşi, există o posibilitate de a face acest lucru: ataşăm cuvântul global înaintea acestei variabile!
  
  Exemplul 5.33. Funcţia din script-ul următor returnează 3. Aceasta arată că a fost recunoscută variabila globală $x. În absenţa cuvântului global, această valoare nu ar fi putut fi returnată:
  
  186
  
  Manual de Informatică pentru clasa a XII-a
  
  ⇒
  
  Variabilele locale sunt variabile create în corpul unei funcţii sau cele create prin transmiterea parametrilor formali (din antetul funcţiilor). Ele nu sunt recunoscute în afara funcţiilor. Nimic nou...
  
  ⇒
  
  În PHP, funcţiile pot fi şi recursive.
  
  Exemplul 5.34. Script-ul de mai jos calculează n! prin utilizarea unei funcţii recursive:
  
  Desigur, atunci când scriem un script mai complicat, cu multe funcţii, este necesar să dispunem de un mecanism prin care să putem include funcţii pe care le-am scris mai demult, sau pe care le-am primit de undeva... ⇒
  
  Includerea unor funcţii, dar nu numai, se realizează prin funcţia require("nume_fisier"). Funcţiile trebuie să se găsească pe site, într-un fişier text. Observaţi faptul că textul funcţiei (funcţiilor inserate) trebuie să fie încadrat între .
  
  Exemplul 5.35. Funcţia afis() se găseşte în fişierul functia.ex, aflat pe site. Script-ul care o utilizează conţine require():
  
  Pe lângă faptul că putem să scriem diverse funcţii, limbajul PHP este înzestrat cu numeroase alte funcţii. Cele mai importante vor fi tratate pe parcurs.
  
  Capitolul 5. Limbajul PHP
  
  187
  
  5.8. Funcţii “matematice” Multe dintre funcţiile prezentate le-aţi întâlnit dacă aţi studiat limbajul C/C++. Tabelul următor le prezintă succint: Funcţia
  
  Ce realizează
  
  Exemple
  
  abs(numar)
  
  Returnează modulul numărului.
  
  abs(-7)=7; abs(-2.23)=2.23; abs(2.3)=2.3
  
  sin(x), cos(x), tan(x)
  
  Sinusul, cosinusul şi tangenta unui unghi. Argumentul x este dat în radiani
  
  exp(x)
  
  Returnează ex .
  
  pow(x,y)
  
  Returnează xy.
  
  log10(x), log(x) max(x1, x2,... xn), min(x1, x2,... xn) ceil(x)
  
  round(x)
  
  floor(x)
  
  rand(min,max)
  
  .
  
  Returnează
  
  log10 ( x) , respectiv log 2 ( x) .
  
  Returnează maximul, minimul dintr-un şir de argumente numerice. Returnează cel mai mic întreg mai mare sau egal cu x. Returnează întregul rezultat prin rotunjirea lui x. Returnează cel mai mare întreg mai mic sau egal cu x. Returnează o valoare întreagă aleatoare între valorile întregi min şi max (inclusiv).
  
  pi()
  
  Returnează numărul π.
  
  sqrt(x)
  
  Returnează rădăcina pătrată a lui x. Tabelul 5.1. Funcţii “matematice”
  
  ceil(4.3)=5, ceil(-4.3)=-4 round(4.3)=4, round(4.7)=5. floor(4.3)=4, floor(-4.3)=-5 rand(1,10) poate returna orice valoare întreagă din [1,10].
  
  sqrt(4)=2;
  
  188
  
  Manual de Informatică pentru clasa a XII-a
  
  5.9. Afişarea datelor - echo şi print Pentru a afişa datele pe browser se folosesc echo şi print. Acestea nu sunt funcţii în accepţiunea clasică a cuvântului, deşi pot fi utilizate asemenea funcţiilor. Ele sunt construcţii speciale PHP. Ambele afişează şiruri de caractere. A) echo – datorită simplităţii, a fost utilizată de multe ori până acum. Pentru că poate fi utilizată în multe feluri, o vom prezenta prin exemple şi vom renunţa la prezentarea formei generale. Exemplul 5.36. Afişăm un şir de caractere folosind parantezele rotunde (apel ca în cazul funcţiilor): echo("Un mesaj"); Exemplul 5.37. Afişăm un şir de caractere fără să utilizăm parantezele rotunde. Pentru că este permisă o astfel de utilizare, spunem că echo nu este funcţie, ci construcţie specială. echo "Un mesaj"; Exemplul 5.38. În cazul în care nu se folosesc paranteze, se pot afişa mai multe şiruri de caractere: echo "Un mesaj ", "Alt mesaj"; Exemplul 5.39. Putem afişa şi conţinutul unor variabile, aşa cum rezultă din exemplul următor:
  
  B) print – se utilizează la fel ca echo, dar, dacă utilizăm paranteze, se poate folosi valoarea întoarsă: true, dacă şirul a fost expediat sau false, în caz contrar. Exemplul 5.40. Priviţi exemplul de mai jos: print ("Un exemplu");