Aplicație Web Pentru Desfășurarea Concursurilor de Fotografii

UNIVERSITATEA TEHNICĂ „Gheorghe Asachi” din IAȘI

FACULTATEA DE AUTOMATICĂ ȘI CALCULATOARE

DOMENIUL: Calculatoare și Tehnologia Informației

SPECIALIZAREA: Tehnologia Informației

Aplicație web pentru desfășurarea concursurilor de fotografii

LUCRARE DE LICENȚĂ

Coordonator științific Student

Conf. dr. ing. Mihai Horia Zaharia Aioanei Alexandru Andrei

DECLARAȚIE DE ASUMARE A AUTENTICITĂȚII

LUCRĂRII DE LICENȚĂ

Subsemnatul(a) ,

legitimat(ă) cu seria nr. , CNP

autorul lucrării

elaborată în vederea susținerii examenului de finalizare a studiilor de licență
organizat de către Facultatea de Automatică și Calculatoare din cadrul Universității Tehnice „Gheorghe Asachi” din Iași, sesiunea a anului universitar , luând în considerare conținutul Art. 34 din Codul de etică universitară al Universității Tehnice „Gheorghe Asachi” din Iași (Manualul Procedurilor, UTI.POM.02 – Funcționarea Comisiei de etică universitară), declar pe proprie răspundere, că această lucrare este rezultatul propriei activități intelectuale, nu conține porțiuni plagiate, iar sursele bibliografice au fost folosite cu respectarea legislației române (legea 8/1996) și a convențiilor internaționale privind drepturile de autor.

Data Semnătura

Cuprins

REZUMAT

Proiectul descris în această lucrare propune o aplicație dedicata susținerii concursurilor de fotografii online. Aplicația oferă o alternativă rapidă atât pentru exprimarea votului vizitatorilor cât și pentru înscrierea și participarea la concursuri.

Pentru realizarea acestor lucruri s-a început de la definirea a 4 tipuri de utilizatori cu roluri diferite:

Administratorul de sistem (DBA) – se ocupă de operațiile de mentenanță asupra bazei de date și anume operațiile de backup și restore;

Administratorul (Admin) – se ocupă de gestionarea concursurilor, raportărilor de fișiere și a conturilor de administratori și useri.

Utilizatorul (User) – are posibilitatea de a încărcare a fotografiile pe server, de a le înscrie în concursuri și de a raporta fotografiile înscrise necorespunzător de către ceilalți participanti. De asemenea acesta își poate modifica datele proprii cât și parola asociata contului.

Vizitatorul(Guest) – poate vizualiza fotografiile prezente în concursuri și de a aprecia pe cele preferate.

În realizarea aplicației am folosit pentru implementare și debug la nivel de server IDE-ul IntelliJ IDEA, ca limbaj de programare am folosit Java, tehnologiile folosite pe parea de server sunt Spring Framework, Apache Tomcat, Apache Maven, Oracle RDBMS, pentru configurare am folosit XML, pentru interfață am folosit JSP (Java Server Pages), iar pentru design și funcționalitate pe partea de client am folosit Bootstraps și Javascript. Versionarea a fost realizata cu Git.

Introducere

Proiectul descris în această lucrare propune o aplicație web ce are ca scop organizarea și desfășurarea concursurilor de fotografii. Aplicația simplifică aceste procese mai ales prin faptul că toată activitatea se va desfășura în mediul online. Marele avantaj în acest caz ar fi accesul unui număr mai mare de vizitatori și mai ales de participanți. Acest sistem a fost dezvoltat pentru a simplifica și eficientiza procesele de baza prin care trece un concurs de fotografii.

Primul pas în dezvoltarea aplicației a fost definirea a 4 tipuri de utilizatori cu roluri diferite: guest, user, admin și dba și definirea acțiunilor specifice fiecărui rol, după cum urmează:

Guest-ul sau vizitatorul este tipul de utilizator care decide cine este câștigătorul deoarece acesta are rolul de a vota fotografiile preferate. Pe lângă aceasta, mai poate vizualiza lista cu toate concursurile și lista cu utilizatorii înscriși pe website.

User-ul sau utilizatorul poate adăuga și șterge fotografii din contul sau, le poate înscrie în concursuri pentru a participa la acestea. De asemenea poate să-și modifice informațiile despre propriul cont sau îl poate șterge. La fel ca și vizitatorii, poate vedea lista concursurilor și a celorlalți utilizatori înscriși dar are și posibilitatea de a raporta imagini, dacă el considera ca acestea nu corespund temei concursului respectiv.

Admin-ul poate adăuga și șterge conturi de administratori și concursuri, poate activa/dezactiva sau șterge conturile utilizatorilor, poate lua decizii în legătura cu raporturile primite din partea utilizatorilor, pe care, de asemenea, le poate șterge.

DBA-ul este administratorul care se ocupa cu mentenanța bazei de date prin efectuarea operațiilor de backup și restore.

În pasul următor am stabilit tehnologiile ce vor fi folosite în dezvoltarea aplicației. Am decis sa folosesc Java Enterprise Edition, Spring Framework, Spring Web MVC, Java Persistence, Hibernate, Apache Tomcat, Apache Maven, SQL, Git, JSP, HTML5, CSS3 și Bootstrap. Ca instrumente de lucru am folosit IntelliJ IDEA, SQL Developer, StarUML, Sublime Text 2, Google Chrome.

Fundamentarea teoretică și documentarea bibliografică

Problema principală a website-urilor ce găzduiesc concursuri cu fotografii este numărul mare de pași pe care un utilizator trebuie sa îi urmeze pentru crearea contului și pentru validarea informațiilor personale. Proiectul dezvoltat în aceasta lucrare se va axa pe simplificarea tuturor proceselor pe care utilizatorul și administratorul sunt nevoiți să le efectueze.

Tehnologii folosite

În dezvoltarea aplicației am decis sa folosesc un număr mare de tehnologii ce nu au fost studiate pe parcursul facultății, îmbinat cu unele deja studiate. Principalul motiv pentru această alegere a fost dorința de a studia tehnologiile folosite de către majoritatea companiilor de IT ce activează pe domeniul web. Am considerat ca în modul acesta ma voi putea hotărâ în privința direcției pe care o poate lua cariera mea în viitor.

Java 2 Enterprise Edition

J2EE sau Java 2 Enterprise Edition este o platformă proiectată pentru dezvoltarea proiectelor de dimensiuni mari. Aceasta simplifică dezvoltarea de aplicații și scade nevoia de programare și de training-uri necesare programatorilor, prin crearea unor componente modulare standardizate și reutilizabile.

În platforma Java 2, componentele web furnizează extensia dinamică a capabilităților pentru un server web. Componentele web sunt servlet-uri java, pagini JSP, sau obiective de servicii web. Interacțiunea între un web client și o aplicație web este ilustrată în figura de mai jos. Clientul trimite o cerere(request) HTTP serverului web. Serverul ce implementează tehnologiile Java Servlet și JSP convertește cererea într-un obiect de tip HTTPServletRequest. Acest obiect este livrat unei componente web, care poate interacționa cu componentele JavaBeans sau cu o baza de date pentru a genera conținut dinamic. Componenta web poate genera mai apoi un obiect HTTPServletResponse sau poate reda cererea unei alte componente web. Eventual, o componentă web generează obiectul HTTPServletResponse care mai apoi este convertit de către serverul web într-un răspuns(response) de tip HTTP care este returnat clientului.

Servlet-urile sunt clase ale limbajului de programare Java ce procesează cereri și creează răspunsuri într-un mod dinamic. Paginile JSP sunt documente text-based care se execută la fel ca un servlet însă permite o abordare mai naturala în crearea de conținut static. Deși servleturile și paginile JSP pot fi folosite interschimbabil, fiecare are propriile puncte forte. Servlet-urile sunt cel mai potrivite pentru aplicațiile de tip service-oriented, cum ar fi prelucrarea rapidă a cererilor și manipularea datelor nontextuale. În schimb, paginile JSP sunt mai utile în generarea de markup de tip text cum ar fi HTML, XML sau WML.

Spring Framework

Spring framework este o platforma Java, open source, ce a fost creată cu un singur scop: pentru a face dezvoltarea de aplicații Java EE mai ușoară. O serie de avantaje pe care Spring le oferă în comparație cu standardul JEE ar fi urmatoarele:

Permite developerilor să dezvolte aplicații enterprise utilizând POJO-uri sau Plain Old Java Objects. Aceste obiecte conțin doar atributele și metodele get și set corespunzătoare acestora. Beneficiul utilizării lor este acela că nu mai ești nevoit sa deții un container EJB precum un server de aplicație ci ai opțiunea de a utilliza un servlet container robust precum Tomcat.

Spring este organizat într-un stil modular. Chiar dacă numărul de package-uri și clase este substanțial, nu trebuie să-ți faci griji decât în privința celor de care ai nevoie, iar pe restul le poți ignora.

De asemenea, Spring nu urmarește reinventarea unor tehnologii deja bine implementate, ceea ce înseamnă ca se folosește și de tehnologiile deja existente precum framework-uri de logare sau de tip ORM și timere JDK și Quartz.

Testarea unei aplicații scrise cu Spring este simpla deoarece codul environment-dependent este mutat în acest framework. De asemenea utilizarea POJO-urilor face injectarea datelor de testare mai ușoară.

Spring deține de asemenea un framework web de tip MVC foarte bine proiectat, acesta fiind o alternativă foarte buna pentru alte framework-uri web cum ar fi Struts sau alte framework-uri supra-dezvoltate.

Tehnologia cu care Spring este cel mai des asociat este DI sau Dependency Injection. Atunci când dezvoltam o aplicație Java complexa, clasele acesteia ar trebui să fie pe cât de independente una de alta posibil atunci când este realizat un unit testing. Dependency Injection ajuta la „lipirea” acestor clase însă, în același timp, le ține independente una de cealaltă. Functionalitatea este foarte simplă:clasele sunt configurate într-un fișier de tip XML, iar la runtime, obiectele ce sunt injectate în alte obiecte, sunt initializate prin intermediul seterelor sau a constructorilor. În imaginea de mai jos se pot observa pașii în care decurge un injection.

Spring Web MVC Framework

Framework-ul Spring Web MVC furnizează o arhitectură de tip model-view-controller și componente care pot fi folosite pentru a ajuta la o dezvoltare de aplicații web mai flexibile și mai slab cuplate. Pattern-ul MVC are ca scop separarea aspectelor diferite ale aplicației cum ar fi logica de input, logica de business și logica de interfață cu utilizatorul. Acesta, după cum denotă și denumirea, are urmatoarele componente:

Model-ul este partea responsabilă de încapsularea datelor aplicației și în general este conpuss din POJO-uri.

View-ul este responsabil cu randarea datelor și expunerea acestora în format HTML pentru ca acestea să ajungă la client.

Controller-ul este responsabil de procesarea cererilor userului și construirea unui model adecvat ce urmează a fi pasat view-ului pentru randare.

DispatcherServlet este unitatea centrala a acestei arhitecturi, un controller principal, prin acesta trecând toate cererile și răspunsurile HTTP. În următoarea imagine poate fi văzut cum funcționează toate componentele framework-ului.La primirea unei cereri, procesarea se realizează în următoarea ordine:

După primirea unei cereri de tip HTTP, DispatcherServlet-ul consulta HandlerMapping-ul pentru a afla care este controller-ul responsabil cu prelucrarea datelor din cererea respectivă.

Controller-ul mai apoi preia cererea și apelează metodele serviciilor corespunzătoare pe baza metodelor GET sau POST. Metodele serviciilor vor seta data modelului pe baza logicei de business și returnează numele view-ului ce este responsabil de afișarea datelor.

DispatcherServlet-ul se va folosi de ajutorul ViewResolver-ului pentru a decide care view va randa răspunsul.

În final, view-ul returneaza o pagina care va fi trimisă de către DispatcherServlet către client.

Toate componentele acestea sunt părți ale WebApplicationContext care este o extensie a AplicationContext cu unele îmbunătățiri necesare pentru aplicațiile web.

Avantajele folosirii Spring Web MVC sunt:

Separarea clară a rolurilor – fiecare rol: controlor, validator, model, view resolver, poate fi realizat de către un obiect specializat.

Reutilizabilitate a codului.

Flexibilitatea transferului de modele.

O blibliotecă de tag-uri JSP cunoscută drept Spring tag library, aceasta oferind suport pentru legarea datelor și a temelor.

XML

XML sau Extensible Markup Language este un limbaj de tip markup derivat din Standard Generalized Markup Language(SGML). Tag-urile XML identifică datele și sunt folosite pentru stocarea și organizarea lor. Caracteristicile cele mai importante ale XML sunt:

Datele sunt structurate, ceea ce îl face mai ușor de citit.

Este extensibil deoarece îți permite crearea propriilor tag-uri sau limbajului propriu, după necesitățile aplicației.

Transportă datele fără a fi nevoie sa cunoască tipul acestora sau cum vor fi reprezentate.

Este un standard public.

Poate simplifica crearea de documente HTML pentru website-uri de dimensiuni mari.

Poate fi folosit pentru a schimba informația intre organizații și sisteme.

Virtual, orice tip de dată poate fi expusă cu ajutorul unui document XML.

Principalul motiv pentru care am utilizat XML în acest proiect este pentru a-l folosi în definirea structurii și funcționalității aplicației deoarece componentele framework-ului Spring pot fi setate prin intermediul unor astfel de fișiere, citirea și înțelegerea acestor date fiind cu mult ușurată datorită unei structuri mai inteligibile.

Java Persistence API

Pentru interacțiunea cu baza de date am folosit Java Persistence API(JPA). Acesta este un ORM (Object Relational Mapper) ce permite dezvoltatorilor de aplicații web Java să stabilească o legătură între modele și baza de date. În general, developerii de Java utilizează cantități mari de cod pentru lucrul cu baza de date, însă utilizarea acestui API reduce într-un mod semnificant această povară.

Pentru stabilirea legăturii cu baza de date, JPA necesită definirea unor clase Entity. O asfel de clasa reprezintă un tabel într-o baza de date, iar fiecare instanță a acesteia reprezintă un rând în acel tabel. Starea de persistență a unui entity este reprezentată prin câmpuri sau proprietăți persistente.

O clasă entity trebuie sa îndeplinească următoarele cerinte:

Clasa trebuie să conțină anotația de tipul javax.persistence.Entity

Clasa trebuie sa conțină un constructor public sau protected, fară argumente. Aceasta poate conține și alți constructori.

Clasa nu poate fi declarată ca final. La fel și metodele sau variabilele de instanță.

Clasele entity pot extinde la rândul lor alte clase entity sau non-entity, iar clasele non-entity pot extinde clase entity.

Variabilele de instanță persistente trebuie să fie declarate private, protected sau package-private și pot fi accesate direct doar de către metodele clasei entity.

Pentru a reduce scrierea de cantități mari de cod, este indicat ca un programator sa urmeze framework-ul JPA Provider, care permite interacțiunea ușoara cu instanțele bazelor de date. Acesta poate fi observat în Figura 2.4.

Arhitectura JPA este alcătuită din următoarele unități:

EntityManagerFactory este o clasă de tip factory care se ocupă cu management-ul instanțelor EntityManager.

EntityManager este o interfață ce se ocupă cu operațiile de persistență asupra obiectelor. Poate funcționa pe post de factory de instanțe de tip Query.

Entity sunt obiectele persistente, stocate ca regiștri în baza de date.

EntityTransaction are o relație de tip unul-la-unul cu EntityManager-ul. Pentru fiecare Entity manager, operațiile sunt susținute de către clasa EntityTransaction.

Persistence este o clasa ce conține metode statice pentru obținerea de instanțe de tip EntityManagerFactory.

Query aceasta interfață este implementată de fiecare vendor JPA pentru a obține obiecte relaționale care îndeplinesc criteriile.Avantajele utilizării JPA:

Este suportat de către majoritatea framework-urilor ORM.

Furnizează un API independent.

Este ușor de utilizat și poate fi legat de POJO-uri.

Furnizează o specificare standard.

Pe piață exista mai multe implementări disponibile.

Suportă configurații XML sau pe baza de anotații.

Hibernate

Framework-ul Hibernate este o implementare a specificațiilor date de către JPA. Din diagrama arhitecturii hibernate (Figura 2.6), se poate observa ca hibernate creează un strat intre baza de date și aplicație. Acesta încarcă detalii ale configurațiilor precum string-urile de conectare la baza de date, clasele entitate sau mapări. De asemenea, creează obiecte persistente care au rolul de a sincroniza datele intre aplicație și baza de date.

Avantajele cu care vine acesta sunt:Hibernate este open source

Are o performanță rapidă deoarece cache este folosit intern de către acest framework.

Query independent de baza de date. HQL (Hibernate Query Language) este versiunea de SQL orientată obiect. Aceasta generează query-uri independente de baza de date ceea ce înseamnă că nu mai ești nevoit sa scrii query-uri specifice bazelor de date folosite.

Crearea automată a tabelelor.

Simplificarea join-urilor complexe prin lucrul cu anotații.

JDBC

JDBC sau Java Database Conectivity este standardul industrial pentru conectivitatea între limbajul de programare Java și o gama larga de baze de date. Am ales sa folosesc această tehnologie deoarece pe parcursul facultății am interactionat cu bazele de date implementate de Oracle, astfel pentru testarea separata a codului SQL m-am putut folosi de tool-ul SQLDeveloper cu care am mai lucrat în trecut.

Javascript

Javascript este un limbaj de programare dinamic ce lucrează pe partea de client, utilizat pentru a adăuga interactivitate dinamica unei pagini web. Fiind compact și foarte flexibil, dezvoltatorii de aplicații au proiectat instrumente ce derivă de la baza acestui limbaj, făcând posibile funcționalități nenumărate cu un efort minim.

Am utilizat acest limbaj în proiectul meu pentru a dezvolta o navigație rapidă și pentru verificarea datelor introduse la submiterea de formulare.

AJAX

Una din extensiile Javascript este AJAX sau Asynchronous JavaScript and XML. Utilizând AJAX, o pagina HTML poate realiza apeluri asincrone către serverul din care a fost încărcat și poate aduce conținut ce poate fi formatat precum documentele XML, continut HTML, text sau JavaScript Object Notation(JSON). Tehnologia JavaScript poate mai apoi, utiliza continut pentru a actualiza sau modifica Document Object Model (DOM) al paginii HTML În figura 2.7 poate fi observată diferența dintre un o cerere clasică și una realizată cu AJAX.

Bootstrap

Pentru o mare parte din parte de front-end a aplicației am hotărât sa folosesc Bootstrap. Acesta este o colecție de tool-uri utilizate pentru crearea de conținut web cu un aspect deosebit prin o manieră foarte simplă. În paleta de posibilități sunt incluse template-uri pentru tipografie, form-uri, butoane și navigație.

Git

Git este un sistem de management al codului sursă de asemenea cunoscut sub numele de controlul versiunii(Version Control System). Acest tip de sisteme este folosit pentru a ține în evidență istoria fiecărei versiuni a unui produs software și pentru a permite mai multor dezvoltatori să lucreze în același timp asupra aceluiași proiect fără a-și putea suprascrie schimbările unul altuia.

Avantajele folosirii Git:

Este disponibil gratuit pe internet și de asemenea este open source, deci poate fi modificat după propriile necesități.

Din moment ce majoritatea operațiilor sunt executate local, viteza este un punct forte al acestuia. Partea de baza este scrisă în limbaj C, ceea ce face rularea mult mai rapidă față de aplicațiile dezvoltate în limbaje high-level.

Pentru securitate Git folosește o funcție hash criptografică securizată (SHA1), pentru a denumi și identifica obiecte în propria baza de date.

Nu necesită un hardware puternic deoarece Git nu este dependent de un server, totul se intâmplă local.

Crearea, ștergerea și îmbinarea ramurilor este simplă și rapidă spre deosebire de celelalte produse utilizate pentru controlul versiunii.

Fluxul de lucru al Git poate fi observat în figura 2.8.

Aplicații similare

În tabelul următor am realizat o scurtă analiză a aplicațiilor similare celei dezvoltate în acest proiect prin compararea avantajelor și dezavantajelor.

Proiectarea aplicației

Modulele aplicației

Aplicația a fost proiectată pe 3 module principale: partea de client care reprezintă interfața grafică pe care o vede utilizatorul, cu o logică redusă axată pe verificări ale datelor introduse, partea de server care reprezintă logica aplicației și baza de date.

Client În acest modul s-a realizat interfața cu utilizatorul, afișarea datelor trimise de server către interfață, validarea câmpurilor pe partea de client cu ajutorul script-urilor și afișarea mesajelor de eroare, precum și logica de comunicare asincronă cu serverul.

Server

Acest modul conține implementarea logicei aplicației, a modelului și legarea lui de baza de date, a controalelor responsabile cu prelucrarea datelor, a operațiilor cu baza de date și a utilităților necesare pentru validarea pe partea de server precum și a generatorului de nume pentru fișierele ce urmează a fi salvate.

Baza de date Oracle

Baza de date a aplicației este creată cu ajutorul SQL Developer înaintea rulării aplicației. Tabelele au fost create prin intermediul Java Persistence API la rularea aplicației.

Operațiile fiecărui utilizator

Proiectul a fost conceput pentru a putea fi utilizat de 4 tipuri de utilizatori: vizitator(guest), utilizator(user), administrator(admin) și administrator al bazei de date(dba), fiecare având funcționalități diferite.

Aceste funcționalități pot fi observate în diagrama use-case din Figura 3.2.

Baza de date

Baza de date SQL a fost concepută cu ajutorul aplicației Toad Data Modeler. Ea constă din 6 tabele, iar fiecărui tabel îi corespunde un model. Acestea sunt generate automat cu ajutorul Java Persistence API. În Figura 3.3 este prezentată structura bazei de date.

Legăturile dintre tabele sunt realizate cu ajutorul prin definirea unor anotații definite de Hibernate, specializate în astfel de operații.Arhitectura aplicației

Deoarece structura aplicației se bazează pe șablonul Model-View-Controller, aceasta este împărțită pe layere ce au ca scop decuplarea responsabilităților, după cum se poate vedea în Figura 3.4. În aceasta sunt reprezentate layerele și cum se încadreaza pachetele aplicației în ele.

DAO Layer (Data Access Object) Acest layer se ocupă de comunicarea cu baza de date și face conexiunea intre aceasta și restul aplicației cu ajutorul Java Persistence API. Aici sunt definite query-urile, operațiile ce vor extrage datele din baza de date pe baza modelului. În acest proiect metodele din Data Access Layer sunt apelate de către serviciile din Service layer. În figura poate fi observat diagrama pachetului dao din proiect.

În dezvoltarea acestui layer am folosit o interfață generică în care am cuprins funcțiile de bază ale oricărui obiect de tip DAO. Astfel am economisit din timpul necesar implementării acestor funcții pentru fiecare model în parte.Domain Layer

În acest layer sunt definite entitățile ce sunt legate de baza de date prin intermediul layer-ului DAO. În Figura 3.6 este reprezentată diagrama claselor incluse în acest layer cât și a claselor utilitare ce ajuta în lucrul cu modelele definite (cele din urma fiind incluse în pachetul „utils”). Clasa Admin este modelul utilizat pentru reprezentarea adminilor, clasa Contest este modelul utilizat pentru reprezentarea concursurilor, clasa File este modelul utilizat pentru reprezentarea imaginilor, clasa Voter este modelul utilizat pentru fiecare vizitator ce a votat o fotografie, iar clasa User este modelul ce reprezintă userii. O clasa mai specială este FileVoter ce reprezintă relația de mulți-la-mulți dintre modelele File și Voter. Clasa Report reprezintă modelul utilizat pentru reprezentarea raporturilor pe care adminul le primește de la useri.

Service layer

Acest layer definește serviciile atribuite fiecărui model, realizând legătura între controalere și DAO. În Figura 3.7 este reprezentarea diagramei claselor Service pentru fiecare model. Acest layer ajută la distincția dintre activitățile de tip web ce au loc în controalere și logica de business generica, care nu are legături cu partea de web. Aici poți specifica comportamentul tranzacțiilor ce necesita mai multe apelări ale metodelor DAO. Serviciile pot fi îmbricate, astfel dacă unul are un comportament tranzactional diferit și necesită propria tranzacție, acest lucru poate fi forțat asupra lui.

Pentru a îmbunătați depanarea aplicației am definit un set de excepții după cum se poate vedea în Figura 3.8.

Web layer

Acest layer conține partea de funcționalitate a proiectului și anume controalerele, și de asemenea interfața ce va fi expusă pe partea de client.

În Figura 3.9 poate fi observată diagrama packetului controaler. Aceasta conține controalerele care se ocupă cu prelucrarea informațiilor primite de la client și care, în funciție de rezultat, redirecționează controlul către unul din controalerele ce se ocupă de returnarea view-urilor specifice.

Am decis să folosesc clase separate pentru crearea view-urilor deoarece în acest mod nu voi supra-popula un singur controaler ce se ocupă de prelucrarea datelor unui tip de user. Pentru utilizatorii guest și user am creat controalerele GuestLinkNavigation și UserLinkNavigation. Aceste două controalere contin doar funcții ce populeaza și returnează paginile de tip .jsp ce reprezintă interfata cu utilizatorul. controaler-ul ce se ocupă cu prelucrarea datelor administratorului nu necesită o astfel de implementare deoarece navigația acestuia este mult mai redusa și a fost dezvoltată într-un singur view. Prelucrarea datelor trimise de guest și user este realizată de controalerul UserController. Aici se găsesc implementările tuturor cererilor ce țin de verificarea și modificarea datelor proprii. Clasele AdminController și DbaController se ocupă cu prelucrarea datelor pentru admin și DBA.

În același pachet a mai fost introdus un alt pachet de controalere utilizat în procesările de tip asincron, realizate prin intermediul limbajului AJAX. În Figura 3.10 poate fi observată diagrama pachetului ajax. În acesta se găsesc controalerele ce se ocupă de request-uri primite din partea adminilor (AdminAjaxController), vizitatorilor (GuestAjaxController), userilor (UserAjaxController). Funcțiile definite în aceste controalere sunt utilizate, în principal, pentru stergerea de conturi și manipulare a fisierelor. De asemenea în același pachet am inclus și un servlet (ImageServlet) cu o funcție deosebit de importantă și anume cea de a realiza o punte între utilizator și imaginile care se află stocate pe server.

Web layer-ul mai deține, pe lângă controalere și view-urile responsabile cu afișarea datelor către utilizator. Pentru reutilizarea unei structuri comune paginilor am decis să folosesc fișiere de tip .tag în relație cu fișierele JSP . În Figura 3.11 este prezentată structura folderului tags ce conține fișierele de tip .tag care definesc layout-ul interfeței cu utilizatorul. Fișierul general-layout.tag definește layout-ul pentru vizitatori, user-general-layout.tag definește layout-ul pentru utilizatori, iar admin-layout.tag definește layout-ul pentru administratori.

În definirea fiecarei pagini am extins layout-ul corespunzător fiecarui tip de utilizator. La acesarea paginilor, interfața expusa utilizatorului va fi diferită în funcție de valorile setate de către controalere.

Pentru extinderea interfeței au fost definite stiluri separate pentru fiecare tip de utilizator. În Figura 3.12 pot fi observate fișierele styles.css utilizat pentru stilizarea interfeței pentru guest și user, admin_styles.css utilizat pentru paginile administratorilor și bootstrap.min.css ce reprezintă sursa pentru Twitter Bootstraps.

De asemenea, am utilizat butoanele speciale și texturi salvate sub forma de imagini. Acestea pot fi observate în Figura 3.13.

Pentru extinderea funcționalității pe partea de client, după cum se vede în Figura 3.15, am definit main-script.js care conține funcții utilizate de guest și user, admin-script.js utilizat pentru dinamica interfetei administratorilor, account-script.js utilizat pentru dinamica interfetei userilor, form-script.js utilizate pentru validarea form-urilor, bootstrap.min.js necesar pentru a utiliza partea dinamică a tehnologiei bootstrap și scriptul jquery-2.1.4.js cu ajutorul caruia putem utiliza Bootstrap, Fancybox și AJAX, tehnologie ce permite comunicarea cu serverul fără reîncărcarea paginii.

Pentru afisarea imaginilor pe întreg ecranul, în urma unui click, am utilizat Fancybox, un instrument codat în Javascript și CSS. De asemenea, acesta ofera utilizatorului posibilitatea de a trece de la o poză afișată la următoarea prin intermediul unor săgeți ce apar atunci când pointer-ul este deasupra părții din stânga sau din dreapta fotografiei.

Implementarea aplicației

Implementarea unei aplicații software reprezintă etapa în care se realizeaza scrierea codului. Deși codul reprezintă un limbaj de comunicare intre programator și calculator, acesta trebuie sa respecte anumite norme de scriere și organizare pentru a putea fi înțeles de către oricare alt programator care ulterior va dori sa citească sau chiar sa continue dezvoltarea acestuia. În acest sens, o contribuție deosebită o au și comentariile JavaDoc. De asemenea, o bună organizare a codului permite corectarea bug-urilor cu usurință fără a crea alte erori. În plus, realizarea de noi versiuni devine mult mai ușoară deoarece codul nu va avea nevoie de modificari majore.

Proiectul descris în aceasta lucrare este de tip web și poate fi utilizat de orice persoana care dorește sa sustină concursuri cu fotografii sau să participe la acestea, în mediul online. Pe parcursul rulării aplicației, toate informațiile, în afară de imaginile în sine, sunt salvate într-o baza de date SQL pentru a putea fi utilizate ulterior. Imaginile sunt salvate într-o locatie de pe server, iar detaliile despre acestea se vor afla tot în baza de date. Legătura către imagini va fi realizată prin intermediul detaliilor corespunzătoare din baza de date.

Aplicația

Structura aplicației este descrisa în diagrama de dezvoltare din Figura 4.1.

Am ales această structură deoarece se potrivește cerințelor pe care aplicația trebuie sa le indeplinească. Conform acesteia, utilizatorul interacționează cu aplicația prin intermediul unui browser web, aceasta însemnând că validarea datelor ce urmează să fie trimise spre server poate fi făcută aici, în primă fază, prin intermediul unor script-uri. Desigur, acele validări vor exista și pe partea de server însă numărul de cereri eronate ce vor ajunge la server este redus considerabil. Pe parte de server, aplicația web gestioneaza cererile venite din partea clientului și, în funcție de acestea, se folosește de baza de date pentru a efectua operațiile necesare satisfacerii lor. Într-un final, acesta returneaza un răspuns clientului.

Pentru dezvoltarea aplicației web am folosit platforma J2EE împreuna cu framework-ul Spring MVC. Avantajele utilizării acestora sunt:

arhitectură și dezvoltare a aplicației simplificată

divizibilitate clară între controalere, modele și view-uri

flexibilitate dată de faptul că Sping MVC este bazat in totalitate pe interfețe

utilizarea paginilor de tip JSP ce oferă o interfață mai simplă care îmbină codul HTML sau XML cu cod ce generează conținut dinamic. Acestea permit modificarea usoară a conținutului paginilor fără a afecta logica aplicației.

Baza de date

În realizarea legăturii cu baza de date am utilizat JPA Entity Manager. Prin intermediul acesteia am setat entitățile aplicației: User, Admin, File, Voter, Contest, Report și de asemenea, am definit operațiile de creare, actualizare, ștergere și căutare a obiectelor în tabele.

Sistemul folosit pentru gestiunea bazei de date este SQL Developer dezvoltat de Oracle. Am utilizat acest sistem deoarece are o interfață ușor de utilizat si sunt familiar cu el.Securitate

Pentru implementarea modulului de securitate am creeat clasele CustomAdminDetails și CustomUserDetails care sunt extensii ale modelelor Admin și User și implementeaza UserDetails, o interfață definită în framework-ul Spring Security. Această interfață ajută la adaptarea claselor utilizator din proiect, nemaifiind nevoie să implementăm modelele în funcție de cerințele cerute de framework. Obținerea informațiilor din baza de date, necesare pentru logarea unui utilizator, este realizata prin funcția loadUserByUsername definită în clasele CustomAdminDetailsService și CustomUserDetailsService ce implementează interfața UserDetailsService.Setari la rularea aplicației

Pentru a avea mereu un cont de administrator al aplicației și unul de administrator al bazei de date, am decis ca acestea să fie adaugate programatic, la fiecare rulare a aplicației, în caz că ele nu există deja. În realizarea acestui lucru am creat o clasă denumită OnApplicationLoadBean a cărei metodă load, să fie rulată la începutul încărcării aplicației. Aceasta inserează datele celor doi administratori în baza de date. De asemenea, în această metodă se actualizează topul celor trei concursuri care este afisat pe fiecare dintre paginile aplicației și pe care le voi explica în următorul subcapitol.

Interfața cu utilizatorul

Problema cu majoritatea website-urilor în acest domeniu este dificultatea în accesarea paginilor de interes pentru utilizatori. În acest sens, pentru o mai ușoară navigare a aplicației, am definit un meniu simplu și am oferit posibilitatea de a accesa ultimele trei concursuri, de pe orice pagină. Meniul principal conține legăturile către paginile legate de concursuri în partea stângă și paginile dedicate utilizatorului, în partea dreaptă. Am folosit partea de footer a paginilor pentru a afișa ultimile trei concursuri. Pentru a nu face cereri repetate la baza de date, pentru fiecare pagină, am definit o clasă utilitară numită TopThreeContests, în care sunt stocate acele concursuri. La fiecare rulare a aplicației, ștergere, adăugare sau încheiere a unui concurs, lista cu cele trei concursuri este repopulată.

La accesarea aplicației, utilizatorul va fi direcționat pe pagina de acasă pentru vizitatori a cărei interfață poate fi observată în Figura 4.4. Din acest punct, el poate alege sa acceseze oricare din celelalte pagini disponibile în meniul principal, să voteze fotografii sau să se logheze. Pentru concursurile ce apar pe pagina de acasă, utilizatorul poate selecta dintr-un meniu secundar, ordinea în care să fie afișate fotografiile: aleatoriu, după numărul de voturi sau după data adăugării. Sortarea fotografiilor a fost realizată prin definirea unor clase comparatoare, ce implementează interfața Comparator.

Fotografiile vor fi afișate fără detalii într-o ordine care sa permită omplerea uniformă a ferestrei. Pentru a vedea detaliile unei fotografii împreună cu butonul de votare, utilizatorul nu trebuie decât să pointeze cursorul deasupra acesteia. În Figura 4.5 poate fi observată o fotografie împreună cu detaliile acesteia: numele acesteia în partea de sus și numele autorului împreună cu butonul de votare în partea de jos. Numele autorului este de asemenea un link către pagina acestuia în care pot fi găsite datele sale impreună cu toate fotografiile incărcate de acesta. În plus, pentru a vizualiza fotografiile mai în detaliu, utilizatorul poate mări imaginea printr-un clic. În Figura 4.7 este prezentată o imagine mărită.

Pentru ca un utilizator să-și poată creea propriul cont acesta va trebui să acceseze link-ul Sign Up din meniul principal și să-și introducă datele personale obligatorii precum numele și prenumele, o pagina web personală, o adresă de email și o parolă validă. În plus, acesta își poate defini, dacă dorește, și o scurtă descriere. În cazul în care unul sau mai multe câmpuri sunt completate incorect, utilizatorul va fi informat printr-un mesaj de eroare așa cum se poate vedea în Figura 4.8. Logarea se realizează prin accesarea link-ului Login din meniul principal. Utilizatorul va trebui să își introducă adresa de email și parola corespunzătoare contului său.

După ce utilizatorul s-a logat cu succes, acesta va dispune de aceeași interfață ca și înaintea logării, cu unele deosebiri. Fotografiile nu vor mai putea fi votate ci doar raportate în cazul în care utilizatorui consideră că acestea nu respectă anumite norme. Aceste raporturi vor ajunge într-o coadă la care vor avea acces toți administratorii pentru a lua o decizie în privința acelor imagini. Ele vor conține și un mesaj ce reprezintă motivul raportării. O altă deosebire pe care o prezintă un utilizator logat este meniul. În partea din dreapta a acestu vor fi afisate numele utilizatorului ce va duce către detaliile propriului cont și link-ul SignOut, folosit pentru ieșirea din cont.

În pagina contului propriu, utilizatorul va avea un alt meniu cu ajutorul căruia va putea accesa rapid propriile fotografii, formularele de schimbare a detaliilor proprii și butonul de ștergere a contului, după cum se poate observa în Figura 4.8.

Pentru a adăuga noi fotografii, utilizatorul trebuie să acceseze formularul de încărcare a fotografiilor situat în secțiunea My Photos. Acesta va putea adăuga doar imagini cu dimensiunea mai mică de 5MB. Pentru ștergerea sau inscrierea imaginilor într-un concurs, utilizatorul poate folosi butoanele corespunzătoare ce apar la mutarea cursorului deasupra fotografiei.

Logarea administratorilor se face prin accesarea paginii /guest/admin în care se găsește un formular ce conține câmpurile pentru adresa de email și parola. Odată logat, administratorul poate accesa din meniu lista cu conturile utilizatorilor, lista cu conturile administratorilor, lista concursurilor și lista rapoartelor. În Figura 4.10 poate fi observată lista utilizatorilor. Conturile acestora pot fi dezactivate sau sterse prin simpla apasare a butoanelor corespunzătoare.

Pentru rapoarte sunt afișate detaliile necesare pentru a putea analiza fotografia și pentru a putea lua o decizie în privința acesteia. În Figura 4.11 se poate observa cum este afișat un raport în lista.

În cazul în care se loghează un administrator al bazei de date, acesta va putea realiza operațiile de Backup și Recovery prin intermediul celor două butoane afișate pe pagina acestuia.

Probleme întampinate

Utilizarea fișierelor de tip .tag

Datorită faptului că am dorit să folosesc trei secțiuni pentru paginile aplicației, fișierele .tag mi-au îngreunat munca deoarece, la extinderea acestor template-uri, nu poți adăuga elemente într-o secțiune în orice poziție dorită. Acest lucru m-a forțat să definesc meniul secundar în template, iar pe paginile în care acesta nu trebuia să apară, l-am dezactivat cu ajutorul Javascript.

Adăugarea dependinței OJDBC

Problema întâlnită în acest caz apare deoarece driverul OJDBC nu există într-un repository public precum Maven Central. Acesta este considerat un JAR de tip 3rd party și trebuie instalat manual în repository-ul local pentru a putea fi recunoscut de către Apache Maven. Pentru instalare am folosit următoarea comandă:

mvn install:install-file -DgroupId=com.oracle -DartifactId=ojdbc14 -Dversion=10.2.0.4.0 -Dpackaging=jar -Dfile=ojdbc14.jar -DgeneratePom=true

Ștergerea orfanilor din baza de date

Problema care mi-a îngreunat cel mai mult dezvoltarea acestei aplicații a fost ștergerea unor obiecte din baza de date împreună cu cele dependente de acestea. Deși am utilizat anotațiile corespunzătoare pentru ștergerea fișierelor de tip orfan pe toate modelele definite, faptul că existau dependințe multiple către un anumit model, împiedica ștergerea acestuia. De exemplu, la ștergerea unui utilizator din baza de date, ștergerea raporturilor și a voturilor corespunzătoare fișierelor acestuia nu se realiza. Astfel am fost nevoit să șterg toate aceste dependințe prin comenzi adiționale.

Cerințe minime de rulare a aplicației

Pentru rularea aplicației este nevoie de un calculator cu sistem de operare Windows XP/7/8/10 sau Linux cu Apache Tomcat 7 instalat, 20MB spațiu de stocare și 256Mb de memorie RAM.

Concluzii

Dezvoltarea acestei aplicații mi-a oferit ocazia de a interactiona cu o arhitectură mai complexă care este utilizată mai des în producerea unor aplicații de dimensiuni mari și care necesită o securitatea mai bună. De asemenea, am putut lucra cu tehnologii noi ce nu au fost studiate pe parcursul celor patru ani de studiu și care sunt folosite de către o mare parte din companiile de software ce produc astfel de aplicații.

Aplicația își îndeplinește scopul propus și anume de a simplifica atat navigarea și procesele necesare unui utilizator pentru a participa la un concurs cu fotografii online cât și a acțiunilor pe care administratorii sunt nevoiți să le execute pentru întreținerea acesteia.

Această aplicație poate fi extinsă cu ușurință pentru a oferi posibilitatea de organizare a unor competiții cu clipuri video sau cu orice alt tip de conținut media. De asemenea, pe baza datelor provenite din aprecierile pozelor se pot realiza statistici pentru preferințele utilizatorilor.

Bibliografie