Documentatie site web

Aplicatia creata este un site alcatuit dintr-o selectie de seriale ce detin, de asemenea, un
link catre o pagina care indica data urmatoarei aparitii a unui nou episode, de aici si numele:

„OME! One more episode!”. Site-ul contine 5 pagini web: pagina de Home (home.html), pagina
„Seriale.html”, o pagina de login („login.php”), o pagina de creeare de cont („register.php”) si
inca o pagina „index.php” in care utilizatorul este redirectionat spre crearea unui cont sau catre

autentificarea in acesta. Prima pagina care trebuie accesata este cea de home, de acolo

utilizatorul poate naviga si prin restul ferestrelor.

Analiza si specificatia cerintelor si a modului de functionare a aplicatiei proiectate:

 CSS:

Stilizarea paginilor este facuta in fisiere separate. Pentru pagina de Home si cea cu seriale
am folosit acelasi fisier CSS si anume „styles.css” . Pentru pagina de login, de creare de

cont si „index.php” am folosit fisierul „style.css”.

Layout-ul partii de main este realizat cu ajutorul tabelelor pentru o mai buna asezare in

pagina si cu div-uri. Pentru a face site-ul responsive am folosit regula din css
denumita box-sizing cu valoarea border-box pentru a sti exact cat ocupa din pagina

fiecare element si folosirea marimilor cu indicatorul “%” . Paginile „Seriale.html” si

„Home.html” sunt impartite in: Header, meniu si partea de main-view care este organizat

cu ajutorul tabelelor.

Header include titlul paginii si are o pozitie „sticky”, pentru a nu-si schimba pozitia, .
Acesta are un z-index mai mare decat al celorlalte elemente din pagina, dar mai mic decat
al meniului pentru a ma asigura ca acestea raman in topul paginii si nu sunt acoperite de

celelalte obiecte.
 Meniul este de tipul drop-down. Fiecare pagina, cu ajutorul meniului, contine o legatura
catre celelalte pagini. Stilizarea este facuta cu ajutorul claselor: “dropbtn” pentru
infrumusetarea butonului de meniu, “dropdown” pentru a seta pozitia si forma pe care o
ia lista de elemente din meniu si anume: inline-block, “dropdown-content” pentru a
imbunatatii modalitatea de expunere a continutului meniului: culoarea blocurilor,
marimea, z-index pentru a face ca meniul sa fie afisat peste alte elemente ale paginii; am
folosit atributul “hover” pentru a seta atributele pe care le ia meniul atunci cand mouse ul

se afla deasupra lui.

Am utilizat o transformare css pentru a roti titlul cu atributul rotate3d (x,y,z,unghi) pentru

a rasuci eticheta <h1> in jurul unei axe fixate in spatiul 3D fara a-l deforma.
Folosind acelasi fisier de stilizare si in home cat si in pagina cu seriale m-am asigurat ca

amandoua sunt responsive si layout-ul principal este acelasi.

 JavaScript:
Functiile din pagina de home se afla in „fct.js”, iar cele pentru sectiunea de seriale se afla

in „bnv.js”.
In pagina de home am modificat stilul unui element prin crearea unor butoane care odata
apasate pot face meniul vizibil sau sa il ascunda pentru asigurarea unui aspect cat mai

compact si simplu.
Pentru folosirea functiilor in formulare am aplicat un imput de tip text in care utilizatorul
trebuie sa introduca numele, iar la apasarea butonului „go” site-ul afiseaza in partea de
main, chiar langa formular, un text care contine numele utilizatorului adaugat in caseta

text. Aceasta caseta text foloseste evenimente de tastatura: cand o tasta este apasata
pentru a introduce o litera caseta text isi schimba culoarea de la coral, cand tasta este

apasata, la roz cand tasta nu mai este apasata cu ajutorul „onkeydown” si „onkeyup” .
Pentru evenimentul de mouse am întrebuintat „onmouseover” si “onmouseout” asupra

primului video din cadrul slideshow-ului paginii de home . Atunci cand mouse-ul este
 deasupra videoului acesta isi mareste dimensiunile, iar cand mouse-ul nu mai este

deasupra acesta revine la dimensiunile initiale.

Pentru modificarea dinamica a pozitiei unui element am creat pe pagina de Home un

slideshow care contine 3 videouri legate de anumite seriale prezente pe site . Prin
slideshow se poate naviga cu ajutorul punctelor prezente in josul videoului sau cu

butoanele de inainte si inapoi. De asemenea videourile prezinta si optiunea de „picture in

picture” care face ca videoul sa poata rula in partea de jos a paginii si sa fie fixat acolo

indifferent de actiunile dumneavoastra.

Am folosit setTimeout in functia „writemsg()” care face ca textul „One more episode!” sa

fie afisat in cadrul header-ului, sub titlu, litera cu litera in 70 de milisecunde . Pentu a nu
se executa la nesfarsit, atunci cand pagina se termina de incarcat functia “stoptimer()”

intervine.

SetInterval() este folosit in fisierul „bnv.js” pentru pagina „Seriale.html” . Pentru fiecare
serial la apasarea unui buton incepe numaratoarea care se opreste la numarul de oameni
care au apreciat serialul respectiv in functie de nota serialului pe IMDb . Functia numara

intr-un interval de 100 de milisecunde. Fiecare buton are o functie separata.

 PHP+ MySQL:
Formularul de inregistrare si cel de login se afla in fisierele „register.php”, respectiv

„login.php”.
Cu ajutorul fisierului „rg.php” am creat un tabel cu numele „users” in cadrul bazei de

date „registration”. Fisierul este introdus doar in cadrul „register.php” pentru ca tabelul
sa se creeze, daca nu exista deja, atunci cand apare primul utilizator, nefiind nevoie de

crearea acestuia in cazul login-ului. Paginile „register.php” si „login.php” contin layout-

ul, partea de front-end a paginilor de login si creere de cont.

In pagina „register.php”, in partea de „attribute” a formularului am specificat tot
„register.php”, adica atunci cand butonul de submit este apasat, toate datele din formular
sunt transmise tot in aceeasi pagina („register.php”) . Partea din formular care primeste
aceste date este scrisa in fisierul „server.php”, de aceea l-am inclus la inceputul fisierului

de inregistrare impreuna cu cel de „errors.php” care afiseaza erorile din formular. Fisierul
„server.php” primeste informatiile transmise de formulare si stocheaza datele in baza de

date. Codul verifica daca formularul este corect completat (daca vreunul din campuri
este liber, daca utilizatorul sau mail-ul exista deja in baza de date, daca parolele introduse

sunt identice), iar daca nu este acesta pune erorile intr-un array care va fi afisat la sfarsit.
La sfarsit, daca nu este nicio eroare in formular se inregistreaza utilizatorul in baza de
date. Am inclus „session_start()” la inceputul fisierului pentru a urmari utilizatorii logati.
Cand un utilizator este inregistrat in baza de date, acesta este imediat redirectionati catre

pagina „index.php”. Codul pentru pagina de login este scris tot in fisierul „server.php” .
Acesta verifica daca utilizatorul a completat corect formularul, verifica daca datele

introduse se potrivesc cu cele din sistem si le inregistreaza . Dupa conectare utilizatorul

este redirectionat catre pagina „index.php” cu un mesaj de succes.

In pagina „index.php” primul „if” verifica daca un utilizator este deja logat . Daca nu este
logat acestia vor fi redirectionati catre pagina „login.php” . Al doilea „if” verifica daca un

utilizator a apasat butonul de logout. Daca da, sistemul il deconecteaza si il

regirectioneaza catre pagina de login. Baza de date poate fi vizualizata in „users.sql” si in

„baza_de_date.png”.