Cuprins 1 Bazele unei pagini web 1.1 1.1 HTML.. TML..... ...... ...... ....... ....... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ....... ......... .......... .......... .......... ..... 1.1.1 Bazele pro prog gramării rii in HTML 1.1.2 .1.2 Pre Prelucr lucrar area ea text textel elor or... ...... ....... ....... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ....... ....... ... 1.1.3 .1.3 Tabe Tabele le... ....... ....... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ....... ......... .......... ........ ... 1.1.4 Legături............. ................... ............ ............ ............ ............ ............ ................... ................................ ................... 1.1.5 .1.5 Imag Imagin ini.. i..... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ....... ....... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ....... 1.2 1.2 My MySQ SQL.... L.......... ............ ............ ............ ............ ............ ............ ............ ............ ............ ............ ............ ............ ............. ............. ......... ... 1.2.1 .2.1 Cre Crearea area unei unei tabe tabele. le.... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ....... ......... .......... .......... ..... 1.2.2 Inserarea elemtentelor in tabele 1.2.3 .2.3 Inte Intero roggarea area tabe tabele lei... i...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ....... ......... .......... .......... ......... 1.2. 1.2.44 Mo Modi dific ficar area ea date datelo lorr din din tabe tabele. le....... ............. ............. ............ ............ ............ ............ ............ .......... 1.2.5 .2.5 ¸te ¸terger rgerea ea elem elemeentel ntelor. or.... ...... ...... ...... ...... ...... ....... ....... ...... ...... ...... ...... ...... ...... ...... ....... ......... .......... ......... .... 1.2.6 .2.6 Func Func¸i ¸iii de man manip ipul ular aree a siru siruri rilo lor.. r..... ...... ...... ...... ...... ...... ...... ...... ....... ......... .......... .......... ........ ... 1.2.7 Func¸ii folosite pentru date calendaristice si ore 1.3 1.3 PHP.. PHP..... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ....... ....... ...... ...... ...... ...... ...... ...... ...... ...... ...... ....... ......... .......... ......... ........ .... 1.3.1 Bazele pro prog gramării rii in PHP 1.3.2 Functiile in PHP 1.3.3 .3.3 Sesi Sesiun unii de utili utiliza zato tor... r...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ....... ....... ....... ......... ......... ......... ........ ... 1.3.4 .3.4 Fisi Fisieere si dire direct ctoa oare re... ...... ...... ...... ...... ...... ...... ...... ....... ....... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ....... .... 1.3.5 .3.5 Form Formul ular are.. e...... ....... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ....... ......... .......... .......... .......... .......... .......
5 5 5 6 9 12 13 15 15 16 16 16 16 16 17 17 17 18 18 19 19
2 Scripturi adi¸ionale 2.1 2.1 CSS... SS...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ....... ......... .......... .......... .......... .......... ......... 2.1 2.1.1 Intr Introd oduc uceere... re...... ...... ...... ....... ....... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ....... ......... ......... .... 2.1 2.1.2 Stil Stilur urii pent pentru ru elem elemeente.. nte..... ...... ...... ...... ....... ....... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ....... ........ 2.1 2.1.3 Pse Pseud udoo-cl clas ase.. e..... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ........ .......... .......... .......... .......... .......... ..... 2.1 2.1.4 Atri Atribu bute te.... ....... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ........ ......... .... 2.2 2.2 JavaS avaScr crip ipt... t...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ....... ......... .......... .......... .......... .......... ......... 2.2. 2.2.11 Cu Cuti tiii de dialo dialog.. g..... ...... ...... ...... ...... ...... ....... ....... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ........ .......... ......... 2.2. 2.2.22 Tipu Tipuri ri de date date... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ....... ....... ...... ...... ........ .......... .......... ........ ...
20 20 20 20 20 21 24 24 25
2
2.2. 2.2.33 2.2. 2.2.44 2.2. 2.2.55 2.2. 2.2.66 2.2. 2.2.77
Opera perato tori. ri.... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ....... ....... ...... ...... ...... ....... ......... .......... ....... Inst Instru rucc¸iun ¸iuni.. i..... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ....... ....... ...... ........ .......... ......... .... Func Functi tii.. i..... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ....... ....... ...... ...... ...... ........ ......... .... Obie biecte.. cte..... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ....... ....... ...... ...... ...... ...... ........ ..... Eve Evenime niment nte.. e..... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ....... ....... ...... ...... ...... ........ .......... .......... .......... .........
25 25 25 25 26
3 Aplica¸ia 3.1 3.1 Intr Introd oduc ucer ere..... e........... ............ ............ ............ ............ ............. ............. ............ ............ ............ ............ ............ ..................... ............... 3.2 3.2 Serv Server erul.. ul........ ............ ............ ............. ............. ............ ............ ............ ............ ............ ............ ............ ............ ............ ............ ........... ..... 3.3 3.3 Baza Baza de date. date....... ............ ............ ............ ............ ............ ............ ............ ............ ............ ............. ............. ....................... ................. 3.4 3.4 Schele heletu tul.. l..... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ....... ....... ...... ...... ........ .......... .......... .......... ......... .... 3.5 3.5 Algor lgorit itmi mi... ...... ...... ...... ...... ...... ...... ....... ....... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ....... ......... .......... .......... .......... ......... .... 3.5. 3.5.11 Co Cone nect ctar aree la baz baza de date date... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ........ .......... .......... .........
27 27 27 27 28 28 28
3.5.2 Logare si ˆınregistrare
3.5. 3.5.33 3.5. 3.5.44
28
Spa¸i pa¸iul ul util utiliz izat ator orul ului ui... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ........ .......... .......... .......... .......... ......... 30 Spa¸ Spa¸iu iull admi admini nist stra rato toru rulu lui...... i............ ............ ............. ............. ............ ............ ............ ................. ........... 31
3
Introducere Am ales ales acea aceast stă tem tema de a demo demons nstr tra a cuno cunost stin in¸a ¸a mea ce am acumu acumulat lat sub anii anii de facult facultă. mbină elem elemen ente te de progr program amar are, e, Acest proiect este un studiu de caz care i mbin astfel e nevoie nevoie să-mi demonstre demonstrez z talentul talentul de a adapt adapta, a, a proiecta proiecta si de a progr program amaa in in mai mai mult multee limb limbaj ajee de prog progra rama mare re.. Proiect Proiectul ul promov promoveaz ează arta, arta, literatu literatura ra mai mai precis. precis. Dă posibilit posibilitate atea a unor
oameni necunoscu¸ de a-si promova operele literare, fie poezie sau proza. Acest studiu de caz con¸ine o bază de date cu utilizatorii si operele lor. Doar cei ınregistra¸i pot viziona si ıncărca. Informa¸iile sunt salvate ˆın baza de date MySQL. Pagina este realizată ˆ ın HTML, CSS, PHP si JavaScript.
4
Capitolul 1 Bazele unei pagini web 1.1 1.1.1
HTML Bazele programării ˆ ın HTML
În limbajul HTML comenzile descriptive, pe care le vom numi tag-uri sau etichete, se scriu ˆı ntre semnele <, >. Majoritate comenzilor au pereche pentru
TML, cre creăm un un semnalarea sfârsitului unei segmente de cod. Pentru a crea un fisier HTML fisi fisie er nou nou gol cu exte exten nsia sia .htm .htmll sau sau .htm .htm,, Dup După care des deschidem fisierul fisierul ˆıntr-un ˆıntr-un editor editor de texte texte simplu simplu oarecare oarecare.. După ce am deschis deschis fisierul fisierul intro introduc ducem em urm următorul torul cod: cod:
Figura 1.1: Prima pagina HTML Astfe stfell am cre creat prim rima pagin ă HTML. Tag Tag-uri -urile le tml> si define finesc sc pagi pagina na,, ˆınt ˆıntre re aces aceste te dou două com comenzi enzi se intr intro oduc duc toat toate e com comenzi enzile le,, text texte, e, imag imagin ini, i, scri script ptur uri, i, leg legături turi,, etc. etc. pent pentru ru a personaliza pagina.
Între tag-urile si este antetul paginei. Aici se definesc 5
titlul paginei paginei pe care care browserul browserul ne afiseaz afisează. Aici se introduc introduc elemente elemente ca etic etiche hete te pagi pagine neii pent pentru ru a usur usura a găsire sirea a pagi pagine neii de moto motori ri de căutar utare, e, def defin inir irea ea limbii limbii ˆın care pagin pagina a este scris scrisă, definire definirea a fontulu fontuluii etc.. Pentru introducerea titlului folosim tag-urile
, . este un un tag tag fără pere perech che. e. El El este este tag tagul ul cu cu care care De exemplu <meta> este definim etichetele, autorul, etc., ˆın câmpul name definim informa¸ia pe ca dorim să descriem, iar ˆ ın câmpul content scriem cuvintele cheie. Între tag-urile tag-urile si vine vine cea mai mai importan importană parte a pa-
ginei, pagina insusi. insusi. Tag-ul body admite admite trei etichete importante: importante: bgcolor, bgcolor, cu care care definim culoare fondalului, sau cu numele englezesc al culorii, sau cu un cod hexadecimal; cale exa exact ctă, sau sau cu o back backgro ground und,, cu care care defini definim m o poza poza pentr pentruu funda fundall sau cu o cale cale cale rela relati tiv vă.
1.1.2
Prelucrarea textelor
În acea aceast st ă parte parte a lucr lucr ării voi voi desc descrie rie cele cele mai mai uza uzate te tag-u tag-uri ri pentru
prelucrarea textelor, mărime, stil, font, font, culori, culori, paragrafe, paragrafe, etc.. etc.. Pentru mărimea literelor putem folosi etichetele
si
, literele
textului scris ˆıntre aceste etichete vor fi majorate, h1 fiind cel mai mare si h7 cel mai mai mic, mic, fără etiche etichete te text textul ul este este interpre interpretat tat ca fiind fiind h3. În plus
avem avem etic etiche hete tele le
, >, , >, care care micso micsore reaz ază liter literel ele e si etichetele , >, , >, care care mărest reste e lite litere rele le.. Ultim ltimel ele e dou două pere perech che e de tag-uri nu sunt sunt suport suportate ate de toate toate browsere browserele. le. Ei micsor micsoresc esc sau măresc resc litere literele le cu 1. Pent Pentru ru a scri scriee text textel elee cu ital italic ic,, bold bold sau sau unde underl rlin ine, e, avem avem mai multe ulte modalit modalită¸i, voi voi enum enumera era doar câteva. câteva.
Figura 1.2: Stiluri de texte cu etichete Cu stilul stilul italic putem putem scrie scrie cu urm ătoare toarele le tag-uri tag-uri perec pereche he:: , ; , ; , . 6
Stilul bold putem să introducem ˆın pagini cu etichetele: , ; , . , ; , . Putem sublinia textele cu etichetele:
Pentr Pentru u a tăia textel textele e ave avem m urm următoare toarele le tag-u tag-uri: ri:
,
; ,
. Următoarele toarele elemente elemente sunt sunt rar folosite. folosite. Elemen Elementele tele sup si sub. sub. Etichetele
, , pun litere la l a putere, iar i ar , la indice. Elementul font este unul dintre cele mai mai importanti. Admite atributele face, face, size size si color, Astfelputem personaliza oricand formatul textului.
Figura 1.3: Stiluri de texte cu elementul font
Aranjarea textului ˆın pagina este simplu: se s e foloseste elementul p. pagină alig align. n. Valo Valori riii Aceast Aceastăă etiche etichetă tă admite admite atribu atributul tul ajustări ajustăriii textul textului ui ˆın pag centru si ˆın atributului sunt left, right, center si justify. Adică stânga, dreapta, ˆ ın centru ambele margini.
Figura 1.4: Texte aliniate Elemente importante ˆın programarea paginilor web sunt si spa¸iul sau 7
caract caracter er gol: gol: & nbsp; nbsp; si linia linia nou nouă:
.
.
În continuare voi scrie despre liste. Sunt trei tipuri de liste: ordonate,
neordonate si de tip defini¸ie. Listele de tip ordonate au tag-ur -urile ,
. Atribu ibutul lis liste teii ordonate este type, si poate s ă ia valorile: a, A, i, II, 1. Elementele listei vor definite cu tag-ul . Cu atributul start definim cu ce număr să ˆ ınceapă lista.
Figura Figura 1.5: 1.5: List Listă ordona ordonattă
Liste istele le
neordo ordon nate
sunt
ˆın ˆıntre tre
etich tiche etele tele
/ul>..
Atributele sunt: circle, square, disc.
Figura Figura 1.6: 1.6: List Listă neord neordon onat ată
Cele două tipuri de liste se pot combina ˆ ıntre ele foarte simplu. Ultimu Ultimull tip de listă este de cea cea defini¸ie defini¸ie.. El este este ˆıntre etichetele ,
.. Term Termen enul ul listei listei sunt sunt dup ăetiche eticheta ta ;; iar descrier descrierea ea lui dup ă eticheta . 8
Figura Figura 1.7 1.7:: List Listă de defi defini ni¸ii ¸ii
1.1.3
Tabele
Tabelele sunt unul dintre cele mai importante elemente ale unui pagini web. Cu ei Tabelele se putem putem aranja aranja pagi pagina na,, textur texturi,i, stilur stiluri.i. Sunt Sunt sche schele letel telee une uneii pagin pagini.i. Tabelele introsuc introsuc ˆın pagin pagină cu tag-urile tag-urile , rândurile rândurile cu ,
, iar coloanele cu td>, | /td>. Pent Pentru ru a crea crea tabele tabele apel apel m ă etichetele table, după care ˆ ıncepe ıncepem m să constr construim uim tabelu tabelull pe rându rânduri ri cu etich etichet etele ele tr. tr.
Dup După ce avem avem rând rânduri urile, le, intro introdu duce cem m coloa coloane nele le cu
etichet etichetele ele td. td. Treb Trebui uie e să avem avem grij grijă ca pe pe fiec fiecare are lini linie e să avem avem la fel fel de de multe coloane, sau vom ob¸ine un tabel distorsionat.
Figura 1.8: Tabele Pentru a avea mai pu¸ine sau mai multe coloane pe linie ne apelăm la 9
atributul colspan a etichetei td. Iar pentru mai multe sau mai pu¸ine linii pe coloa coloane ne folosim atributul rowspan.
Figura 1.9: Tabele În cont contin inua uare re vo vom m disc discut utaa desp despre re atrib atribut utur urii impo import rtan ante te ale ale etic etiche hete teii tatable. ble. Una Una dint dintre re ele ele este este bord border er,, care care defi define nest ste e gro grosimea simea lini liniil ilor or ˆın ˆınconj conjur urătoar toare e a tabelu tabelului. lui. Atribut Atributul ul width width si height height specifi specifică că lă¸imea lă¸imea,, respec respectiv tiv ˆınăl¸imea tabe tabelu lulu lui, i, acest acest atrib atribut ut acce accept ptă nume numere re natu natura rale le care care repre reprezi zint ntă pixelii, sau ˆın ˆın pro procent cente e care are rep reprezi rezin nă mărim rimea tabel abelu ului lui rela relati tiv v la fere fereas astr tra a browserului.
Figura 1.10: Tabele Atrib tribu uturi turile le alig lign si valig lign aran ranjea jeaz ă tex textul tul din celule lulele le zontal respectiv respectiv vertical. vertical. Astfel Astfel avem avem urm următoarele valori tabelului ori zontal pent pentru ru align align:: left, left, righ, righ, cent center; er; adic adică stân stânga ga,, dreap dreapta ta si cent centru ru.. Dacă avem vem si text text pe pe lân lângă tabel, tabelul se pozi¸ionează relativ la text ˆ ın func¸ie de valorile introduse. Pentru valign: top, middle, bottom; sus, centrat
vertical si jos.
10
Figura 1.11: Alinierea textelor ˆın tabele
Alte atributuri sunt: cellspacing si cellpading; cellpading; care determină determină ˆın pixeli dintre celule celule respec respectiv tiv spa¸ spa¸iul iul lăsat ın fiec fiecare are celul celulă a tabe tabelul lului ui ıntre spa¸iul dintre text si marginile celulei.
Figura 1.12: Tabele Pentru fundalul tabelului putem folosi culori cu atributul bgcolor sau imagini cu background. Putem colora si liniile tabelului cu bordercolor. Pute Putem m per perso sona naliza liza tabe tabelul lul celu celull ăcu celu celull ăad ăugân ugând d atri atribu bute te la eti-chetele eti-chetele tr si td. Atributuri ale lui tr: align, valign, bgcolor. Cu acesta person personaliz alizămun mun rând. rând. Atribu Atributel tele e elementului td sunt: width, height, align, valign, colspan, rowspan. Astfel putem manipula tot tabelul prin celule individual individuale e si să concepem concepem forme forme cât mai mai diferite diferite si colorate. colorate.
11
Figura 1.13: Tabele
1.1.4
Leg ături
Legăturile sunt de trei trei tipuri: tipuri: externe, externe, interne interne
(relative) (relative) si pentru pentru
trimiterea e-mail-urilor. Elementul ancoră este cea etichetă cu care se creează hiperle hiperleg găturile. turile. Are Are atrib atributu utull href href cu care care ape apellăm destin destina¸i a¸ia. a. Navigarea Navigarea ˆıntre ˆıntre paginile paginile site-ului site-ului sau leg legăturile cu cu alte site-uri site-uri este foarte
sim simplu, plu, ˆın ˆın elem eleme entu ntul a cu atrib tribu utul tul href href spec specifi ific c ăm dest destin ina a¸ia ¸ia după care avem textul pe care facem click si ın final ˆınchidem cu etichetul . Cu aces acestt tip de legături turi putem putem orien orienta ta utili utiliza zato toru rull c ătre pagi pagini, ni, poze poze,, sunete, videoclipur videoclipurii sau chiar chiar fisiere fisiere arhivat arhivate e pentru pentru a le le desc descărca.
Figur Figura a 1.14 1.14:: Leg Legături turi Pentru o leg legătură int internă treb rebuie să specificăm o ancoră ˆ ın pagina la
care care sunt sunteem la care care să pute putem m arăt arăta. a. Ac Aceesta sta se face face tot tot cu eleme lement ntul ul a, dar dar ca atrib atribut ut are are id. id. Iar Iar la cale cale vo vom m apel apelaa ca [die [diez] z]nu nume meid id.. Ac Aces esta ta va pozi pozi¸i ¸ion onaa codull sur surs să, ast astfe fell dac dacă avem avem pe prima pe pagină pagină unde unde se află află anc ancora ora ˆ ın codu 12
linie atunci pagina va sări sus, dacă jos atunci jos, iar dacă se află ˆ ın mijloc atunci acolo. Trimi Trimite terea rea unui unui e-mail e-mail se face face asem asemănător tor cu cu o legătur tură exter extern nă, dar dar ın
atrib atributu utull href href are are elem elemen ente te spec specific ificee ca mailt mailto, o, subje subject ct si bo body dy.. mailto mailto este este separat separat de la celelal celelalte te element elemente e de ? body sunt
Elem Elemen entul tul
iar subject subject si
sepa separat rate e unul unul de de cel celălalt lalt de către semnul semnul & . Elementele Elementele subject subject si body body
sunt op¸ionale. Dup După ce am ap apăsat sat pe link, link, clie client ntul ul e-am e-amil il va porn pornii cu datel datele e deja deja trecute automat.
Figura 1.15: Trimiterea unui e-mail cu programul Evolution Mail
1.1.5
Imagini
Figura 1.16: Imagini 13
Imagin Imaginile ile se itroduc cu etiche eticheta ta , , atributu atributull cu care ar ă t ă calea către ele, ele, este este src, src, cu cu care care pute putem m defin definii căi exact exacte e sau relat relative ive.. Imagini au atribute ca width, height, align, alt, title, ti tle, border, hspace, vspace si usemap. Cele cunoscu cunoscute te deja se comport comportă ca cei de de la tabele. tabele. caz c ă dint dintr-u r-un n moti motiv v anume anume poza poza Atributul alt ne dă oportunitatea ˆ ın caz locull ei se afis afisea eaz ză text textul ul intr intro odus ˆın eticheta alt. nu se ıncarcă, ın locu Tag-ul Tag-ul tit title le afis afisea eaz ză text textul ul int intro rodu dus s când când sunt suntem em pest peste e poz poză cu mous mousee-
ul. ul. jurull pozei. Iar Iar Atrib Atribut utul ul bo borde rderr dete determ rmină ină mărim mărimea ea chen chenar arul ului ui ˆın juru atributu atributurile rile hspa hspace ce si vspa vspace ce dete determi rmin nă distan¸ distan¸a a minim minimă care separ separă celelalte obiecte din jurul ei.
Figura 1.17: Imagini Harta de imagini imagini este este o unelt uneltă foarte folositoare. folositoare. Putem selecta selecta mai multe păr¸i dintr-o imagine si să le transformăm ˆ ın hiperlinkuri. La eticheta
v >vom om folos folosii atrib atribut utul ul usem usemap ap.. Atrib Atribtu tull este este pred predef efini initt de progr program amat ator or cu tagtag-ul ul