Evidentiem nevoile sociale din educatie - Referate profesionale unice

Acasa » scoala » informatica
Proiectarea si implementarea aplicatiei web

Proiectarea si implementarea aplicatiei web

Proiectarea si implementarea aplicatiei web

1 Metode utilizate pentru modelarea paginilor web dinamice

Realizarea unui website ce contine pagini web dinamice difera de unul ce contine numai pagini statice. În continuare se vor prezenta cateva metode utilizate pentru a construi paginile web dinamice:

Preluarea informatiilor de la utilizator (client) prin intermediul formularelor HTML, utilizand metoda POST. Astfel, informatiile sensibile (parole) sunt pastrate ascunse. De asemenea, se pot trimite fisiere de dimensiuni mai mari (poze, melodii).
Prelucrarea pe partea de server a cererilor provenite de la client prin intermediul scripturilor PHP.
Pastrarea informatiilor utilizate in construirea paginilor web dinamice intr-o baza de date MySQL.
Modificarea continutului paginilor dinamice se realizeaza chiar de catre utilizator, primind rezultatul in timp real.
Trecerea dintr-o pagina dinamica in alta se realizeaza cu ajutorul pastrarii user-ului si parolei utilizatorului in campuri ascunse in fiecare pagina dinamica. Acest lucru faciliteaza trimiterea la server a acestor informatii de identificare atunci cand se produce trecerea dintr-o pagina in alta.
Reutilizarea unor scripturi PHP. Deoarece s-a pastrat un standard in ce priveste informatiile de identificare a utilizatorului, se pot refolosi unele scripturi prin apelarea acestora in cadrul altor scripturi PHP.
Crearea prototipului paginii web dinamice ca o pagina statica scris in HTML si JavaScript. Astfel, se realizeaza un sablon care poate fi modificat pentru a ajunge la forma dorita din punct de vedere grafic si al organizarii. Apoi acest sablon este copiat in scriptul PHP si i se adauga informatii ale utilizatorilor in campurile lasate goale.

2 Schema logica a aplicatiei

Aplicatia trebuie sa se materializeze printr-o pagina web dinamica, care sa gestioneze mai multe subpagini ale utilizatorilor. Fiecare utilizator isi poate crea un cont pe website si isi poate personaliza pagina proprie prin adaugarea de poze si informatii personale, precum si imaginea de fundal si melodia de fundal.

Aplicatia este creata in urmatoarele limbaje: HTML, JavaScrip, PHP si MySQL. Paginile web sunt create in HTML si JavaScript, iar limbajul PHP este folosit pentru a prelucra informatiile clientului si pentru a se conecta la baza de date MySQL. Transmisia de informatii de la paginile care ruleaza in browser-ul utilizatorului, la server se realizeaza prin intermediul perechii formular HTML si script PHP. Raspunsul serverului se compune dintr-o pagina web dinamica.

Aplicatia este compusa din urmatoarele pagini:

Ø Pagina principala in care exista formaularul de logare a utilizatorului si un link catre pagina de creare a unui nou cont;

Ø Pagina de creare a unui nou cont in care utilizatorul isi introduce; informatiile personale si o poza cu el;

Ø Pagina de confirmare a crearii contului;

Ø Pagini cu semnalare a unor greseli la introducerea de informatii la crearea noului cont;

Ø Pagina cu avertizarea la introducerea gresita a user-ului si/sau a parolei

Ø Pagina personala a utilizatorului in care se prezinta informatii, poza utilizatorului;

Ø Galeria foto a utilizatorului in care se pot vizualiza, adauga si sterge pozele personale ale utilizatorului;

Ø Pagina in care se poate personaliza contul cu imagine de fundal si melodie la alegere;

Ø Pagina in care se pot modifica informatiile si imaginea utilizatorului, dar si unde se poate sterge contul;

Schema logica a aplicatie este prezentata mai jos:

Figura 1 Schema logica a aplicatiei

Algoritmului prezentat mai sus reprezinta modul in care un utilizator interactioneaza cu aplicatia si poate fi descris in urmatorii pasi:

Utilizatorul acceseaza pagina principala in care are doua optiuni:
Poate sa isi creeze un cont nou in cazul in care nu are cont sau poate sa se logheze la contul detinut prin introducerea user-ului si a parolei;
Daca alege sa isi creeze un cont nou este trimis intr-o fereastra in care trebuie sa completeze un formular cu urmatoarele informatii:

Nume
Prenume
Varsta
Data nasterii
Sex
Descriere
O poza aleasa de utilizator
Numele de utilizator pentru logare
Parola
Repetarea parolei

Daca informatiile contin greseli (parola nu corespunde cu parola repetata sau poza nu este un fisier de tip imagine) se va deschide o pagina in care utilizatorului i se specifica greseala realizata;
Din aceasta pagina utilizatorul se poate reintoarce in pagina de creare a contului pentru a corecta greseala;
Cand informatiile introduse sunt corecte, se va deschide o pagina ce confirma crearea contului;
Din aceasta pagina, utilizatorul este trimis la pagina principala pentru logare;
Daca utilizatorul introduce gresit parola si/sau user-ul, este trimis intr-o pagina in care i se specifica acest lucru si de unde se poate intoarce in pagina principala;
La introducerea corecta a user-ului si a parolei se deschide pagina utilizatorului intitulata "Pagina mea";
Aceasta pagina dispune de un meniu prin intermediul caruia utilizatorul poate accesa: galeria foto, pagina de personalizare a contului sau pagina in care se pot modifica informatiile contului. Tot din meniu se poate alege optiunea de a iesi din cont in pagina principala;
Galeria foto prezinta imaginile utilizatorului, dispunand si de doua formulare prin care se pot adauga sau sterge imagini;
Pagina de personalizare a contului dispune de doua formulare prin care se poate fie modifica imaginea de fundal, fie se poate modifica melodia de fundal;
Modificarea imaginii de fundal se poate realiza fie prin alegerea unei imagini prestabilite, fie prin specificarea unei poze personale;
Pagina de modificare a informatiilor utilizatorului cuprinde un formular prin care se pot modifica diferite informatii personale;
Tot aici se poate sterge contul cu toate pozele si melodiile atasate;
Daca se sterge contul, utilizatorul va reveni in pagina principala de unde isi poate crea un nou cont.

3 Structura bazei de date MySQL

Informatiile despre fiecare utilizator sunt stocate in baza de date MySQL de pe server. Baza de date este formata din doua tabele: tbUtilizator si tbGalerieFoto.

În tbUtilizator se vor stoca informatiile utilizatorului. Campurile din acest tabel sunt urmatoarele:

Ø ID - cheie primara

Ø Utilizator

Ø Parola

Ø Nume

Ø Prenume

Ø Varsta

Ø Sex

Ø DataNastere

Ø Poza

Ø Descriere

Ø Fundal - imaginea de fundal

Ø Melodie -melodia de fundal

Tabelul tbGalerieFoto va contine denumirile imaginilor fiecarui utilizator, imagini insotite de un comentariu. Între cele doua tabele se realizeaza o legatura 1- n, pe baza unei chei straine. Campurile din tbGalerieFoto sunt urmatoarele:

Ø ID - cheie primara

Ø IDUtilizator - cheie straina care face referinta la cheia primara a unui utilizator

Ø Poza - denumirea unei imagini din galeria foto a unui utilizator

Ø Comentariu - scurta descriere a imaginii

Structura baze de date este prezentata mai jos:

Figura 2 Tabelele bazei de date si modul in care acestea se interconecteaza

Codul SQL responsabil cu crearea celor doua tabele este urmatorul:

CREATE TABLE tbUtilizator

ID int NOT NULL AUTO_INCREMENT,

PRIMARY KEY(ID),

Utilizator varchar(30),

Parola varchar(30),

Nume varchar(30),

Prenume varchar(30),

Varsta int,

Sex varchar(30),

DataNastere date,

Poza varchar(255),

Descriere text,

Fundal varchar(255),

Melodie varchar(255)

CREATE TABLE tbGalerieFoto

ID int NOT NULL AUTO_INCREMENT,

PRIMARY KEY(ID),

IDUtilizator int,

Poza varchar(255),

Comentariu varchar(255)

4 Proiectarea si implementarea paginilor web

4.1 Pagina principala

Pagina principala cuprinde un formular de logare a utilizatorului, o legatura catre pagina responsabila cu crearea unui nou cont si un mesaj in care este prezentat numele autorului, mesaj in care un numar de caractere isi schimba culoarea si se deplaseaza la dreapta.

Figura 3 Prezentarea primei pagini

Dupa cum se poate observa in imaginea de mai sus, aceasta pagina prezinta un formular prin care utilizatorul poate accesa pagina personala.

Figura 4 formular de logare a utilizatorului la pagina personala

Formularul HTML va trimite informatiile prin metoda post la un script PHP aflat pe server. Daca informatiile sunt corecte, scriptul PHP va prelua din baza de date informatiile utilizatorului si va genera o pagina web dinamica, paginaa care va fi prezentata utilizatorului ca pagina personala.

Urmatoarea secventa de cod prezinta modul de realizare a formularului:

Utilizator: <input type='text' name='utilizator' id='utilizator'

style='position: top: 6px; left: 20px;' size /><br />

Parola:<input type='password' name='parola' id='parola'

style='position: top: 7px; left: 44px;' size='20'/><br />

</form>

Link-ul catre pagina in care sunt create conturi noi este stilizat sub forma unui dreptunghi al carui text se mareste in mod constant:

Figura 5 Modul in care este creat efectul de marirea a textului la link-ul

catre pagina de creare conturi noi

Acest efect a fost obtinut prin urmatoare functie scrisa in limbajul JavaScript, functie care la un interval de timp creste dimensiunea textului pana la o valoare maxima, apoi dimensiunea reducandu-se la zero s.a.m.d.

txtsize=0;

maxsize=25;

function MaresteMesaj()

else

function stoptimer()

MaresteMesaj();

</script>

Mesajul in care este prezentat autorul aplicatiei prezinta urmatorul efect grafic:

Figura 6 Prezentarea efectului grafic la numele

autorului aplicatiei

Acest efect este obtinut prin afisarea fiecarui caracter ca un element <span>, iar la un interval de timp, unui numar de caractere i se schimba culoarea, dand impresia ca portiunea colorata se deplaseaza la dreapta.

Atunci cand utilizatorul se logheaza, user-ul si parola sunt trimise la fisierul IntraInCont.php aflat pe server, care va decide ce masuri sa ia in functie de corectitudinea informatiilor furnizate.

În fisierul IntraInCont.php se va realiza conexiunea la baza de date, si se va verifica daca exista vreo inregistrare. Daca da, inseamna ca utilizatorul si parola sunt corecte si se extrag informatiile utilizatorului din tabelul tbUtilizator, impreuna cu denumirea pozelor din tbGalerieFoto. Toate aceste informatii sunt utilizate pentru a compune o pagina web dinamica specifica utilizatorului. Pagina creata va fi afisata ca pagina personala a utilizatorului. Mai multe delalii despre aceasta pagina vor fi prezentate in capitolul 4.

Daca nu se gaseste nicio inregistrare, se va deschide o pagina web in care utilizatorului i se va comunica faptul ca a gresit user-ul si/sau parola. Daca utilizatorul a introdus gresit user-ul si/sau parola, acesta va fi trimis intr-o pagina in care este avertizat de greseala realizata.

Figura 7 Pagina de avertizare a introducerii eronate a user-ului

si/sau a parolei

Structura algoritmului utilizat in fisierul IntraInCont.php este prezentat mai jos:

Figura 8 Algoritmul utilizat la accesul in cont a utilizatorului

4.2 Crearea unui nou cont

Aplicatia poate gestiona conturile mai multor utilizatori. Aplicatia da dovada de flexibilitate, deoarece se pot crea si sterge conturi. Din prima pagina se poate accesa pagina in care se poate crea un cont nou.

Figura 9 Pagina cu formularul de creare a unui nou cont

La apasarea butonului Creaza cont se trimit informatiile la un script PHP de pe server intitulat Creaza_Cont.php. În acest script se verifica daca datele sunt valide si se trimite mesaj inapoi la utilizator in cazul in care nu sunt valide.

De exemplu pentru a se asigura ca utilizatorul nu a tastat gresit parola aleasa (caracterele parolei nu sunt vizibile cand le tasteaza), aplicatia cere si reintroducerea parolei. În cazul in care continutul celor doua casute nu corespunde, atunci se afiseaza un mesaj de eroare sub forma unei pagini web.

Acelasi lucru se intampla si daca poza aleasa de utilizator nu este de tip imagine (sunt permise doar fisierel JPEG, PNG, BMP si GIF).

Imaginile preluate de la client sunt stocate intr-un director intitulat "galerieFoto".

Figura 10 Pagina cu mesajul de eroare la reintroduce

gresita a parolei

Figura 11 Pagina cu mesajul de eroare la selectarea unui fisier

care nu este o imagine

Dupa cum se poate observa din imaginile de mai sus, doar mesajul de eroare difera, restul elementelor paginii se pastreaza. Pentru a obtine acest rezultat, se creaza un sablon in scriptul PHP, sablon format din doua variabile: una pentru inceputul paginii si cealalta pentru sfarsitul paginii. Codul sursa corespunzator este urmatorul:

//deoarece pagina poate semnala multe erori se va folosi //un format standard de mesaj intre care vom insera dupa caz mesajul de eroare

$inceputMesajEroare='<html><head></head>

<p align='center' style='font-size: x-large; color: #FF0000;'><img src='imaginiSite/ligne.gif'/><br /><br />' ;

$sfarsitMesajEroare='<br /><img src='imaginiSite/ligne.gif'/>

</body>

</html>' ;

În momentul in care se doreste sa se afiseze un mesaj de eroare, se trimite la client un sir de caractere format din cele doua variabile, inserand intre ele mesajul propriu-zis. De exemplu:

echo $inceputMesajEroare . 'Nu ati reintrodus corect parola!<br /> Va rog sa reincercati!' . $sfarsitMesajEroare;

Structura algoritmului utilizat in fisierul Creaza_Cont.php este prezentat mai jos:

Figura 12 Algoritmul utilizat pentru a crea un nou cont

Verificarea integritatii informatiilor si introducerea acestora in baza de date in tabelul tbUtilizator este realizata prin urmatoarea secventa de cod PHP:

if ($_POST['Parola']<>$_POST['RepetareParola']) //daca nu s-a repetat cum trebuie parola se afiseaza o pagina web cu un mesaj de eroare

else

}

else

În urma crearii contului, utilizatorul este anuntat printr-o pagina web. Aceasta pagina contine un mesaj care se deplaseaza de la dreapta la stanga si un buton care trimite utilizatorul la pagina principala pentru a se loga in contul nou creat.

Figura 13 Pagina in care se confirma crearea cu succes a

profilului utilizatorului

4.3 Pagina cu profilul utilizatorului

La autentificarea unui utilizator cu nume utilizator si parola, se incarca din baza de date informatiile profilului utilizatorului si se creaza in mod dinamic o pagina web care este prezentata utilizatorului.

Daca pana acum paginile web prezentau acelasi continut pentru toti utilizatorii, urmatoarele pagini sunt individualizate pentru fiecare utilizator. În consecinta, aceste pagini sunt pagini web dinamice. Continutul acestor pagini este creat prin inserarea informatiilor utilizatorului intr-un sablon al paginii web. Astfel, fiecare utilizator va accesa o pagina in care se afla informatiile lui, galerie foto proprie, fundalul si melodia aleasa de el.

Pentru a da senzatia utilizatorului ca aceasta pagina este cu adevarat a lui, pagina cu profilul utilizatorului a fost intitulata "Pagina mea".

Figura 14 Paginile cu profilul mai multor utilizatori

Dupa cum se observa si in imaginea de mai sus, fiecare utilizator are acces la o pagina individuala, cu imagini si informatii proprii. Astfel, se pot crea o multime de pagini unice.

Figura 15 Pagina cu profilul unui utilizator

Aceasta pagina a fost generata de scriptul IntraInCont.php. În partea de sus a paginii se pot observa pictograme ale imaginilor din galeria foto. Ele au fost generate prin extragerea din tabelul tbGalerieFoto a tuturor inregistrarilor care au cheia straina IDUtilizator identica cu campul ID din tabelul tbUtilizator, unde ID este corespunzator utilizatorului cu Utilizator si Parola introduse.

$row1 = mysql_fetch_array($result);

//daca exista utilizatorul se va accesa imaginile din galerie lui foto, utilizand ID-ul pentru a filtra informatiile

$sql = 'SELECT tbGalerieFoto.* FROM tbGalerieFoto WHERE tbGalerieFoto.IDUtilizator='' . $row1['ID'] .''';

Se va crea un sir de caractere constituind pagina care se va trimite la server, inserandu-se imaginile si informatiile utilizatorului.

De exemplu, urmatoarea secventa de cod PHP este responsabila cu generarea pictogramelor din partea superioara a paginii.

<MARQUEE DIRECTION=RIGHT SCROLLDELAY=30>';

for($i=0;$i<mysql_num_rows($result2);$i++)

$pagina=$pagina .' </MARQUEE>

Se poate observa ca intr-o bucla for se alipeste la sirul de caractere stocat in variabila $pagina cate o imagine din galeria foto a utilizatorului curent. Deoarece imaginile sunt puse intr-un bloc MARQUEE ele se vor deplasa de la stanga la dreapta.

In pagina web primita de utilizator, codul de mai sus genereaza urmatoarea secventa HTML:

</MARQUEE>

Figura 16 Pictogramele din partea superioara a paginii cu

profilul utilizatorului

Informatiile utilizatorului, precum si fundalul, melodia de fundal si fundalul sunt preluate din tabelul tbUtilizator.

Figura 17 Panou cu informatiile unui utilizator

Pentru a se genera acest panou, in scriptul IntraInCod.php, aflat pe server, a fost necesara introducerea urmatoarei secvente de cod:

<div >

<tr>

Nume :

</td>

' . $row1['Nume']. '

</td>

</tr>

<tr>

Prenume:

</td>

' . $row1['Prenume']. '

</td>

</tr>

<tr>

Varsta :

</td>

' . $row1['Varsta']. '

</td>

</tr>

<tr>

Data nasterii :

</td>

' .date('d-m-Y', strtotime($row1['DataNastere'])).'

</td>

</tr>

<tr>

Sex :

</td>

' . $row1['Sex']. '

</td>

</tr>

<tr>

</td>

<p >' . $row1['Descriere']. '</p>

</td>

</tr>

</table>

</div>

S-a generat un tabel avand pe o coloana etichetele (nume, prenume, data nastere etc.), iar pe cealalta au fost introduse informatiile despre utilizator, informatii extrase din baza de date.

În partea din stanga exista un meniu. Acest meniu este prezent in toate paginile dinamice din contul unui utilizator. Acest meniu are rol de a ghida utilizatorul prin pagina sa.

Meniul are urmatoarele campuri:

Pagina mea - link catre pagina cu profilul utilizatorului

Galerie foto - link catre pagina in care se pot vizualiza/adauga/sterge poze personale

Personalizare pagina - link catre pagina in care se poate modifica imaginea si melodia de fundal

Modificare cont - link catre pagina in care se pot modifica informatiile despre utilizator sau se poate sterge contul

Sign out - link care scoate utilizatorul din contul propriu si il aduce in pagina principala a website-ului.

Figura 18 Meniul de navigare in paginile din contul unui

utilizator

Cu toate ca la prima vedere par a fi simple link-uri, nu este ata. Trebuie sa tinem cont ca toate paginile utilizatorului sunt pagini dinamice. Cu alte cuvinte, nu exista pagini fizice spre care sa pointeze aceste linkuri. În plus, pentru a se genera o pagina dinamica, sunt necesare informatiile utilizator si parola, pentru a se determina ce informatii sa se preia din baza de date.

Din aceste motive meniul este insotit si de patru formulare ascunse. Fiecare dintre aceste formulare contin doua campuri ascunse cu numele si parola utilizatorului. Fiecare dintre aceste formulare va accesa cate un script PHP corespunzator celor patru pagini (Sign out nu are formular ascuns, ea fiind un simplu link catre prima pagina). Cand se da click pe un element din meniu, acesta va genera un eveniment de click care va determina la randul sau evenimentul de submit al formularului corespunzator elementului din meniu. Numele utilizatorului si parola vor fi trimise automat la un script PHP care va returna o pagina ceruta.

Meniul de navigare si formularele ascunse sunt generate astfel in scriptul PHP:

<a class='elementMeniu' href='#P1' onclick =document.getElementById('paginaMea').submit() >Pagina Mea</a>

<a class='elementMeniu' href='#P1' onclick =document.getElementById('galerieFoto').submit() >Galerie Foto</a>

<a class='elementMeniu' href='#P1' onclick =document.getElementById('personalizarePagina').submit() >Personalizare pagina</a>

<a class='elementMeniu' href='#P1' onclick =document.getElementById('modificaCont').submit() >Modificare cont</a>

</div>

</form>

</form>

</form>

</form>

Pentru a crea elementele de grafica a meniului, se creaza o clasa speciala, care produce schimbarea culorii la trecerea mouse-ului deasupra elementului care utilizeaza aceasta clasa.

4.4 Galerie Foto

Aceasta pagina este lansata in urma alegerii din meniu a optiunii "Galerie foto". Pagina "Galerie foto" este o pagina dinamica generata de scriptul galerieFoto.php. Pentru a genera pagina web, sunt extrase denumirea pozelor si comentariile din tabelul tbGalerieFoto corespunzatoare utilizatorului curent. Acest script primeste numele si parola utilizatorului curent, dar nu introduse de utilizator, ci direct din pagina anterioara (numele si parola utilizatorului sunt stocate in campuri ascunse in fiecare pagina dinamica)

Figura 19 Pagina cu galeria foto a unui utilizator

În aceasta pagina, pe langa vizualizarea imaginilor, se poate adauga si sterge o imagine. Acest lucru se realizeaza cu ajutorul celor doua formulare aflate in josul paginii.

Pentru a putea vizualiza imagini se pot alege doua metode:

Se duce cursorul deasupra unei imagini, si aceasta va incepe sa creasca pana la dimensiunea ei reala;

Se da click pe o imagine si se va vizualiza pagina la dimensiunea ei normala.

Pasii algoritmului utilizat la generarea paginii dinamice cu galeria foto a utilizatorului sunt urmatorii:

Se conecteaza la baza de date;
Se selecteaza baza de date dorita;
Se primeste de la client prin metoda POST numele si parola utilizatorului, acestea fiind stocate in campuri ascunse in pagina care a trimis cererea de dechidere a paginii cu galeria foto;
Sunt preluate din tabelul tbUtilizator informatiile utilizatorului (imaginea si melodia de fundal) caruia ii corespund user-ul si parola primite;
Sunt preluate din tabelul tbGalerieFoto denumirile pozelor si comentariile lor. Acestea corespund utilizatorului curent;
Se construieste pagina cu galeria Foto cu ajutorul unui sir de caractere ce contine codul HTML si JavaScript al acestei pagini. În acest sir se insereaza pozele si comentariile utilizatorului, imaginea de fundal si melodia;
Se trimite pagina dinamica generata la utilizator;
Se inchide conexiunea la baza de date.

Atunci cand cursorul este pe una dintre imagini, dimensiunea ei creste treptat pana ajunge la dimensiunea ei normala. Deoarece pozele sunt plasate intr-un tabel, prin cresterea dimensiunii unei imagini, toate celelalte imagini se vor deplasa.

Figura 20 Efectul de marirea al unei imagini la dimensiunea reala atunci

cand cursorul este deasupra ei

Efectul de marire al imaginilor atunci cand cursorul este deasupra ei s-a realizat cu ajutorul unei clase "expando". Aceasta clasa a fost implementata intr-un fisier JavaScript: expando.js. La aparitia evenimentului de mouse hover, se incrementeaza dimensiunile imaginii pana cand aceasta ajunge la dimensiunea ei originala.

Adaugarea unei noi imagini la galeria foto se realizeaza prin completarea campului cu comentariu si alegerea unei imagini din calculatorul personal.

Figura 21 Formularul prin care se adauga o imagine la galeria foto

La adaugarea unei imagini, imaginea este mai intai verificata daca este intradevar un fitier imagine, iar apoi mutata in directorul galeriFoto aflat pe server. Se adauga in baza de date o noua inregistrare in care se trece ID-ul utilizatorului curent (proprietarul imaginii), denumirea si comentariul poze. La sfarsit se va apela din nou scriptul galerieFoto.php pentru a reafisa pagina dinamica cu galeria foto cu noile actualizari.

Stergerea unei imagini din galeria foto se realizeaza prin selectarea, din lista formularului de stergere poze, a unei imagini. În aceasta lista, imaginile sunt identificate prin comentariul lor si denumirea lor. S-a adoptat si adaugarea comentariului in aceasta lista deoarece, uneori, denumirea imagimilor nu este sugestiva. Ca si formularul de adaugare poza, formularul de stergere a pozei are doua campuri ascunse in care sunt stocate utilizatorul si parola pentru autentificare.

Figura 22 Formularul prin care se sterge o imagine din galeria foto

Pe server, in scriptul StergePoza.php se sterge din directorul galerieFoto poza cu denumirea aleasa de utilizator in scopul stergerii,. Apoi este stearsa si din tabelul tbGalerieFotoiinregistrarea corespunzatoare acestei fotografii. La sfarsit se va apela din nou scriptul galerieFoto.php pentru a reafisa pagina dinamica cu galeria foto cu noile actualizari.

4.5 Personalizare pagina

În aceasta pagina utilizatorul isi poate individualiza pagina prin alegerea unei imagini de fundal sau a unei melodii care ruleaza in fundal.

La alegerea obtiunii "Personalizare pagina" din meniul de navigare, se trimite o cerere la server, impreuna cu numele utilizatorului si parola (care sunt stocate in campuri ascunse). Serverul va construi dinamic pagina in functie de profilul utilizatorului si o va trimite browserului spre a fi afisata.

Figura 23 Interfata prin care se poate personaliza pagina utilizatorului

Titlul acestei pagini este realizat cu ajutorul unui script JavaScript. Efectul este urmatorul: literele titlului se ridica una cate una dand impresia de unduire a unui val care se deplaseaza de la stanga la dreapta.

Figura 24 Efectul de unduire a unui val

Pentru a realiza acest efect, fiecare litera este pusa intr-un container de tip <span>. La un anumit interval de timp unui grup de litere i se modifica pozitia pe verticala cu cativa pixeli mai sus, pentru a da impresia de unduire.

Scriptul JavaScript responsabil pentru acest efect este urmatorul:

//mesaj

message='Personalizeaza-ti pagina cu imagine de fundal si melodie'

//text animat in NS6? (0 = off)

ns6switch=1

var ns6=document.getElementById&&!document.all

mes=new Array();

mes[0]=-1;

mes[1]=-4;

mes[2]=-7;mes[3]=-10;

mes[4]=-7;

mes[5]=-4;

mes[6]=-1;

num=0;

num2=0;

txt='';

function jump0()

if(message.length > 6);

jump.innerHTML=txt;

txt='';

jump1a()

else

function jump1a()

else

function jump1b()

else

function jump2()

else

jump.innerHTML=txt;

txt='';

if(num != (-message.length))

else

</script>

Modificarea imaginii de fundal se poate realiza prin doua metode:

Alegerea unei imagini prestabilite dintr-o lista cu 15 imagini;

Alegerea unei imagini personale de pe computerul propriu.

Utilizatorul poate opta din 15 imagini prestabilite, iar daca acestea nu ii sunt pe plac poate alege o imagine personala, care va fi copiata automat in directorul "galerieFoto". Daca se apasa pe butonul Anuleaza se va afisa pagina cu profilul utilizatorului.

Figura 25 Formularul de modificare a fundalului

Algoritmul utilizat la modificarea imaginii de fundal este urmatorul:

Se conecteaza la baza de date
Se selecteaza baza de date dorita
Se primeste de la client prin metoda POST numele si parola utilizatorului, daca s-a ales poza prestabilita sau personala si numele, respectiv calea pozei.
Daca utilizatorul a ales o poza prestabilita:

Se acualizeaza in tabelul tbUtilizator denumirea imaginii de fundal prestabilite;
Se apeleaza scriptul IntraInCont.php care va produce trimiterea la utilizator a paginii cu profilul utilizatorului ("Pagina mea");

Daca utilizatorul a ales o poza personala:

Se verifica daca fisierul este de tip imagine (JPEG, GIF, BMP, PNG);
Se muta poza in directorul galerieFoto;
Se acualizeaza in tabelul tbUtilizator denumirea imaginii de fundal personala;
Se apeleaza scriptul IntraInCont.php care va produce trimiterea la utilizator a paginii cu profilul utilizatorului ("Pagina mea");

Se inchide conexiunea la baza de date.

Figura 26 Efectul modificarii imaginii de fundal al paginii unui utilizator.

La prima captura de ecran s-a utilizat o poza personala, iar la celelalte

doua s-au utilizat poze prestabilite

Pentru a adauga o melodie de fundal se alege o melodie de pe calculatorul personal. La crearea unui nou cont se atribuie o melodie prestabilita. Dar utilizatorul poate sa schimbe melodia oricand prin intermediul formularului de modificare a melodiei.

Întai se verifica daca fisierul are marimea mai mare de 1MB. Acest lucru este necesar deoarece multe melodii au dimensiuni mult mai mari, iar serverul nu poate sa uploadeze un fisier mai mare de 1MB (setarea defaul). Urmeaza verificarea corectitudinii melodiei. Daca fisierul audio este de tipul MPEG ( MP3, MP4 etc.), MIDI sau WAV, atunci melodia este considerata ca fiind un fisier audio si este uploadat pe server si stocat in directorul "muzica". Se modifica si campul Melodie din tabelul tbUtilizator, memorandu-se denumirea noii melodii. Determinarea inregistrarii care necesita modificare se realizeaza cu ajutorul numelui si parolei utilizatorului, informatii furnizate in mod automat de catre formularul de modificare a melodiei.

Figura 27 Formularul utilizat pentru a modifica melodia

Verificarea compatibilitatii fisierului audio si actualizarea vechii valori se realizeaza prin urmatoarea secventa de cod:

//verificam daca fisierul cu melodia este un fisier melodie si daca este il copiem in directorul : muzica

if (($_FILES['Melodie']['type'] == 'audio/mid')

|| ($_FILES['Melodie']['type'] == 'audio/mpeg')

|| ($_FILES['Melodie']['type'] == 'audio/x-wav'))

else

}

else

4.6 Modificarea informatiilor contului

Uneori, utilizatorul doreste sa actualizeze informatiile adaugate la crearea contului (nume, prenume, varsta, data nasterii, sex, descriere sau imaginea sa). Din acest motiv este necesara o pagina care sa ofere posibilitatea unui utilizator sa modifice informatiile contului, fara a crea contul din nou.

În cazul in care utilizatorul nu mai doreste sa aiba cont pe acest website, i se ofera optiunea de a-l sterge, impreuna cu toate imaginile din galeria foto personala, imaginea utilizatorului si melodia de fundal (daca s-a ales o melodie, alta decat cea prestabilita).

Figura 28 Pagina in care se pot modifica informatiile contului sau se

poate sterge contul

Pentru a nu obliga utilizatorul sa caute din nou imaginea sa de fiecare data cand modifica o informatie a contului. Din acest motiv, daca campul Poza nu este completat atunci se va pastra vechea imagine.

Generarea acestei pagini se realizeaza la selectarea optiunii "Modificare cont" din meniul de navigare, prin care se acceseaza scriptul PHP modificaCont.php.

Ca si celelalte pagini web dinamice ale aplicatiei, generarea acestei pagini se realizeaza prin crearea unui sir de caractere, sir ce cuprinde codul HTML al pagini. Informatiile extrase din tabelul tbUtilizator sunt intercalate in acest sir de caractere. Astfel, cand sirul este trimis la utilizator, va contine informatiile utilizatorului, fundalul si melodia stabilita de utilizator.

Informatiile existente ale utilizatorului sunt deja afisate in formular, utilizatorul trebuie doar sa modifice campurile pe care le doreste.

De exemplu, o parte a formularului prin care se modifica informatiile, este generat prin urmatoarea secventa de cod:

$pagina=' <table style=' 100%; text-align: left; font-size: medium; text-indent: 20px;' align='center'>

<tr>

<td>

Nume :

</td>

</td>

</tr>

<tr>

<td>

Prenume :

</td>

</td>

</tr>

<tr>

<td>

Varsta :

</td>

<td>

</td>

</tr>

<tr>

<td>

Data nasterii :

</td>

<td>

//data nasterii este specificata prin cele trei campuri

<input type='text' name='Data_zi' id='Data_zi' value=''.date('d', strtotime($row1['DataNastere'])).''

style=' width: 26px; ' /> 

<select id='Data_luna' name='Data_luna'

style=' width: 82px; '>

<option '.$sirLuni[0].' value='01'> ianuarie </option>

<option '.$sirLuni[1].' value='02'> februarie </option>

<option '.$sirLuni[2].' value='03'> martie </option>

<option '.$sirLuni[3].' value='04'> aprilie </option>

<option '.$sirLuni[5].' value='06'> iunie </option>

<option '.$sirLuni[6].' value='07'> iulie </option>

<option '.$sirLuni[7].' value='08'> august </option>

<option '.$sirLuni[8].' value='09'> septembrie </option>

<option '.$sirLuni[9].' value='10'> octombrie </option>

<option '.$sirLuni[10].' value='11'> noiembrie </option>

<option '.$sirLuni[11].' value='12'> ianuarie </option>

</select>

</tr>

<tr>

<td>

Sex :

</td>

<td>

<select id='Sex' name='Sex' style=' width: 159px; '> ';

//selectam sexul

if($row1['Sex']=='feminin')

else

Se poate observa urmatoarele aspecte:

În cazul campurilor aflate in controala de tip text (nume, prenume, varsta etc.) informatia utilizatorului este pur si simplu concatenata dupa campul value;

În cazul controalelor de tip lista cu optiuni (select), este necesara completarea optiunilor acestui control. Problema apare atunci cand trebuie sa specifici care dintre optiunile controlului este selectata initial. De exemplu, cand se specifica sexul utilizatorului, trebuie ca optiunea corespunzatoare sa fie aleasa. În acest caz, deoarece exista doar doua posibilitati, s-a optat pentru o instructiune if in care sa concateneze, in dreptul controlului prin care se selecteaza sexul, optiunile masculin si feminin. Una dintre aceste optiuni e selectata in functie de informatia extrasa din baza de date despre sexul utilizatorui.

Dar o procedura mai complexa trebuie aplicata cazului controlului prin care este specificata data de nastere a utilizatorului. De fapt, luna ridica probleme deoarece ea este selectata dintr-un control cu 12 posibilitati. Deoarece inlantuirea a 12 instructiuni de tip if, fiecare concatenand cate un set de 12 posibilitati, dintre care doar un este posibilitatea selectat, nu este luata in calcul datorita cresterii inutile a codului programului.

În schimb s-a adoptat o alta metoda mai eleganta. S-a declarat la inceputul scriptului un sir cu 12 elemente goale.

$sirLuni=array('','','','','','','','','','','','');

$sirLuni[date('n', strtotime($row1['DataNastere']))-1] ='selected='selected''; //luna in care s-a nascut utilizatorul va fi selectata

Se va extrage luna si se modifica doar elementul corepunzator acelei luni. Modificarea consta in atribuirea unui string care produce selectarea unei optiuni. Atunci cand se compune controlul corespunzator datei, se introduce in fiecare optiune cate un element al sirului mai sus dclarat. Cum numai unu contine informatii care sa duca la selectarea acelei optiuni, optiunea cu luna nasterii va fi completata corespunzator.

Schema logica a modului in care se modifica informatiile contului este urmatoarea:

Figura 29 Algoritmul de actualizare a informatiilor contului

În figura de mai jos se va prezenta rezultatul unei operatii de actualizare de cont. Se poate observa cum de la niste informatii initiale se trece la alte informatii prin actualizarea lor in formularul de modificare informatii cont.

Figura 30 Actiunea de modificare a informatiilor contului

Daca utilizatorul doreste sa stearga contul cu toate imaginile si melodia de fundal, va utiliza formularul de stergere a contului. Formularul va trimite (in mod automat) numele utilizatorului si parola la server pentru a identifica contul care va fi sters. Operatia de stergere a contului consta in stergerea melodiei de fundal (daca nu este cea prestabilita), stergerea imaginii utilizatorului, stergerea imaginilor din galeria foto si apoi stergerea din baza de date a inregistrarilor din tbGalerieFoto si a infomatiilor utilizatorului din tbUtilizator. La sfarsit se va afisa o pagina in care se confirma stergerea contului, pagina cu un link catre pagina principala a website-ului.

Figura 31 Algoritmul utilizat pentru stergerea contului utilizatorului

Politica de confidentialitate

.com	Copyright © 2024 - Toate drepturile rezervate. Toate documentele au caracter informativ cu scop educational.

Proiectarea si implementarea aplicatiei web

Comentarii literare

Personaje din literatura

Tehnica si mecanica

Economie

Geografie