Digital Box Report

1.Introduction
Inainte de epoca digitala, amintirile personale se stocau in diverse cutii sau cufere in vederea
pastrarii peste ani. Aplicatia Web cu rol de prezervare a acestor informatii sentimentale. In
special, anumite scrisori vechi, fotografii, filme, acte, relatii de rudenie si alte artefacte de
interes.

Utilizator fara cont

Utilizatori ce nu sunt conectati nu vor avea acces la aplicatie, vor avea acces doar la interfata
aplicatiei. Vizitatorul trebuie sa isi creeze un cont folosind butonul de inregistrare din bara de
sus(header).

Utilizatori nregistrat
Odata inregistrat, utilizator va avea propria cutie cu amintiri digitalizata si va putea beneficia de
toate serviciile aplicatiei.
Desigur utilizatori vor putea sa se conecteze si cu contu de pe retele de socializare :
Facebook,Twitter,Google+

Administratorul
Administratorul poate vedea toti utilizatori, poate elimina anumite informati neadecvate si poate
suspenda un utilizator in cazul ca face un abuz.

2.Project Identity
Digital Box este o aplicatie web care conserva aminintiri digitalizate. Utilizatorul poate incarca
diverse documente digitalizate(ex.photos,videos,word,pdf). De asemenea, aplicatia dispune de un
design responsive pentru toate dispozitive

Typography
Aplicaia va utiliza setul de caractere FreeUniversal , n primul rnd , deoarece ofer un aspect i
simplist aspect frumos neutru i n al doilea rnd , pentru c este liceniat sub SIL-OFL. .

2. Etapele dezvoltarii proiectului

1. Schite/Design/Arhitectura
2. Modelare baza de date
3. Creare pagini frontend
4. Design backend
5. Design clase php
6. Design proceduri My SQL
7. Design & implementare arhitectura MVC, links rewrite
8. Implementare proceduri oracle
9. Implementare clase php
10. Implementarea view-urilor pe baza html&css&javascript
11. Adaugare functionalitati ajax (optional)
12. Testing
13. Deployment

2.1 Progresul inregistrat

Am implementat toate paginile necesare userului si adminului pentru a naviga/interactiona si
folosi aplicatia web.

2.2 Tehnologi utilizate in momentul de fata

-HTML
-CSS
-jQuery
-Bootstrap

3.Tehnologi utilizate
Proiectul utilizeaza urmatoarele tehnologii:

HTML5 - este un limbaj pentru structurarea i prezentarea coninutului pentru World Wide
Web, o tehnologie nucleu pentru Internet propus iniial pentru software-ul Opera.

CSS - (Cascading Style Sheets) este un standard pentru formatarea elementelor unui document
HTML. Stilurile se pot ataa elementelor HTML prin intermediul unor fiiere externe sau n
cadrul documentului, prin elementul <style> i/sau atributul style. CSS se poate utiliza i pentru
formatarea elementelor XHTML, XML i SVGL

Bootstrap - Bootstrap este o colectie gratis, open-source de tool-uri folosita pentru a crea
website-uri si aplicatii web. Contine template-uri de design HTML si CSS pentru tipografie,
formulare, butoane, navigatie si alte componente de interfata, precum si extensii optionale de
JavaScript. Framework-ul Bootstrap isi pune ca scop usurarea dezvoltarii web.
Bootstrap se afla pe partea de front end, asta insemnand ca este o interfata intre utilizator si codul
de pe partea de server sau back end. Este si un framework de aplicatie web, un software
framework care este creat sa suporte dezvoltarea website-urilor si aplicatiilor web.

Bootstrap ajuta la layout si design usor si totodata responsive pe orice platforma folosindu-se de
clase si functii predeclarate in fisiere externe cum ar fi booststrap.js bostrap.css. Bootstrapul
poate la randul lui sa fie formatat de fiserele css care prin cascading va da overwrite la anumite
atribute si functii facand aplicatia web pe placul tau dar fara sa mai fie nevoie sa scri tot codul de
la 0 cand te apuci de o noua aplicatie

Javascript - este un limbaj de programare orientat obiect bazat pe conceptul prototipurilor.Este

folosit mai ales pentru introducerea unor funcionaliti n paginile web, codul Javascript din
aceste pagini fiind rulat de ctre browser. Limbajul este binecunoscut pentru folosirea sa n
construirea siturilor web, dar este folosit i pentru acesul la obiecte ncastrate (embedded objects)
n alte aplicaii. A fost dezvoltat iniial de ctre Brendan Eich de la Netscape Communications
Corporation sub numele de Mocha, apoi LiveScript, i denumit n final JavaScript.

jQuery - este o platform de dezvoltare JavaScript, conceput pentru a uura i mbunti

procese precum traversarea arborelui DOM n HTML, managementul inter-browser al
evenimentelor, animaii i cereri tip AJAX. jQuery a fost gndit s fie ct mai mic posibil,
disponibil n toate versiunile de browsere importante existente, i s respecte filosofia
Unobtrusive JavaScript.

PHP - Hypertext Preprocessor. Folosit iniial pentru a produce pagini web dinamice, este folosit
pe scar larg n dezvoltarea paginilor i aplicaiilor web. Se folosete n principal nglobat n
codul HTML, dar ncepnd de la versiunea 4.3.0 se poate folosi i n mod linie de comand
(CLI), permind crearea de aplicaii independente. Este unul din cele mai importante limbaje de
programare web open-source i server-side, existnd versiuni disponibile pentru majoritatea web
serverelor i pentru toate sistemele de operare. Conform statisticilor este instalat pe 20 de
milioane de situri web i pe 1 milion de servere web. Este disponibil sub Licent a PHP s i Free
Software Foundation l consider a fi un software liber.

MySQL pentru baza de date

Baza de date
Baza de date este formata din 12 tabele:

4. Structura
Header

Header-ul o sa aiba o pozitie fixa:

-link catre pagina de home

-link catre pagina de info
-link catre pagina de contact
-paginile noastre de socializare
-buton cu de login

Footer
Se va impati cu informati utile pentru utilizator.
Footerul va mai contine link-uri externe catre paginile sociale: Facebook, Twitter, Google+

Pagina de inregistrare utilizator

Pentru inregistrare sunt cerute:

-Numele
-Data nasterii
-Adresa
-Orasu
-Stat/Region
-Zipcode
-Adresa de e-mail
-Username
-Password

Pagina login

Butonu din header va avea un modal fade ca va afisa o pagina de log in. Unde utilizatoru poate
sa isi introduca contu si parola de pe DigiX sau sa se conecteze prin intermediul retelelor de
socializare Facebook, Twitter, Google+.

Pagina principala
Pagina va contine header-ul si footer-ul. Va avea Numele si logo-ul aplicatiei web , si va avea
doua butoane Read More si Get Started.
Unde Read More un buton cu functionalitate de modal fade va avea informati referitoare
despre aplicatia web.
Get started este un buton drop-down in care un utilizator isi poate crea cont pe aplicatie, va
mai contine blog-ul si news leater.
Mai jos va contine poze si un slide show in legatura cu aplicatia.

Pagina Info
Pagina va contine header-ul si footer-ul. Va avea Numele si logo-ul aplicatiei web , si va avea
doua butoane Read More si Get Started.
Unde Read More va avea informati referitoare despre aplicatia web.
Get started este un buton drop-down in care un utilizator isi poate crea cont pe aplicatie, va
mai contine blog-ul si news leater.
Si va contine informati despre aplicatie web si despre autorii aplicatie

Pagina de contact
Pagina va contine header-ul si footer-ul. Va avea Numele si logo-ul aplicatiei web , si va avea
doua butoane Read More si Get Started.
Unde Read More va avea informati referitoare despre aplicatia web.
Get started este un buton drop-down in care un utilizator isi poate crea cont pe aplicatie, va
mai contine blog-ul si news leater.
Va contine toate metodele ca o persoana sa ia contact cu noi prin numer de telefon, G-mail,
Facebook, etc.

Pagina de confirmare
Dupa completarea inregistrati, la apasarea butonului Register utilizatorul va fi trimis pe
confirmarea contului. Si i se va trimite un e-mail de confirmare cu codul respectiv.

Pagina principala a utilizatorului Home

Pagina va contine header-ul si footer-ul. Va avea Numele si logo-ul aplicatiei web
Va avea in meniu:
-link catre Home
-link catre My account
-link catre Photos
-link catre Videos
-link catre Documents
-link catre Letter
-link catre Recent Files
-camp pentru cautarea documentelor/ pozelor
-meniu dropdown pentru filtrarea categoriilor
-buton de cautare (cu filtrele selectate)
-campuri de autentificare utilizator
-buton de incheiere sesiune (logout)
-chenar drag-and-drop pentru stocarea resurselor
-buton pentru selectare resurse uploadabile

Pagina My account
Pagina va contine header-ul si footer-ul. Va avea Numele si logo-ul aplicatiei web

Utilizatorul va avea obtiunea la modificarea contului personal:

-Editarea profilului-Va putea sa isi modifice poza contului
-Va mai putea edita unele obtiuni in regatura cu contu
-Activity Jurnal- Utilizatorul va putea vedea toate actiunile facute de pe contul sau.
-Settings- Utilizatorul va putea sa isi faca schimbari pe contul personal(ex. Setri de securitate,
Setri i instrumente pentru confidenialitate, Setri pentru notificri, etc.)

Pagina de Photos
Pagina va contine header-ul si footer-ul. Va avea Numele si logo-ul aplicatiei web
Pagina va contine o bara de search pentru cautarea unor albume foto sau poze mai usor.
Prin butonu de upload, utilizatorul va putea sa isi incarce un album nou sau sa introduca poze noi
in albumele foto deja existente

Pagina de Videos
Pagina va contine header-ul si footer-ul. Va avea Numele si logo-ul aplicatiei web.
Pagina va contine o bara de search pentru cautarea unor albume video sau videoclipuri mai usor.
Prin butonu de upload, utilizatorul va putea sa isi incarce un album video nou sau sa introduca
videoclipuri noi in albumele deja existente

Pagina de Documente
Pagina va contine header-ul si footer-ul. Va avea Numele si logo-ul aplicatiei web.
Pagina va contine o bara de search pentru cautarea documentelor mai repede.
Prin butonu de upload, utilizatorul va putea sa isi incarce un nou document, si fiecare document
va fi specificat cand a fost modificat si in ce fel de format va fi.

Pagina de Letter
Pagina va contine header-ul si footer-ul. Va avea Numele si logo-ul aplicatiei web.

Pagina va contine o bara de search pentru cautarea scrisorilor mai repede.

Prin butonu de upload, utilizatorul va putea sa isi incarce o noua scrisoare, si fiecare scrisoare va
fi specificat cand a fost modificat si in ce fel de format va fi.

Pagina de Recent files

Pagina va contine header-ul si footer-ul. Va avea Numele si logo-ul aplicatiei web.
Utilizatorul va avea obtiune a de a vedea ultimele intrari in documente.

Servicii
1. Github
GitHub este un serviciu de gazduire web pentru proiecte de dezvoltare a software-ului care
utilizeaza sistemul de control al versiunilor Git. GitHub ofera planuri tarifare pentru depozite
private, si conturi gratuite pentru proiecte open source.
Github repository