Cererea Unei Aplicatii Web Responsive Folosind Cms

CUPRINS

Introducere

Creativitatea și imaginația reprezintă unele dintre cele mai importante criterii în realizarea unei aplicații, iar posibilitatea de a lucra cu ultimele tehnologii în dezvoltarea aplicațiilor Web înseamnă o mare provocare pentru orice programator.

În societatea actuală producerea și consumul de informație este principalul tip de activitate, informația este recunoscută drept principala resursă. Evoluția aplicațiilor Web în zilele noastre reprezintă o nouă etapă a civilizației umane, un nou mod de viață din pricina accesului la informații din toate sferele de activitate.

Aplicațiile Web sunt populare datorită faptului că pot fi accesate într-un browser și oferă comoditatea de a putea fi consultate fără a instala software dedicat, necesitând doar o conexiune la Internet.

O aplicație Web responsive se referă la capacitatea acesteia de a se adapta în funcție de mediul de vizualizare, fără a suferi degradări care afectează aspectul conținutului, toate acestea pentru a oferi o experiență excelentă de navigare utilizatorului. O aplicație responsive poate fi vizualizată optim indiferent de dispozitivul de pe care este accesată, aici incluzând rezoluții diferite a ecranelor cum ar fi cele de: desktop, laptop, tableta sau a telefoanelor inteligente.

Pentru a menține o evoluție dinamică permanentă observată și prin creșterea exponentială a mărimii și complexității conținutului aplicației care sunt furnizate utilizatorilor, aplicațiile Web necesită o administrare dinamică pluridisciplinară, necesitând instrumente prin care se poate realiza acest lucru.

La realizarea aplicațiilor medii și mari, se pune problema managementului conținutului lor. În acest scop a fost creat așa numitul sistem de management al conținutului sau CMS (în engleză Content Management System), reprezentând un sistem software care facilitează ușurința în gestionarea conținutului unei aplicații Web. Sistemul de management al conținutului reprezintă procesul de achiziționare sistematică și structurală, de gestionare a conținutului și de publicare a acestuia.

Am ales să realizez o aplicație Web de tip anunțuri, pentru comercializarea de produse foto-video și accesorii care se adresează tuturor persoanelor care doresc să vândă sau să cumpere produse din această arie, într-un mediu plăcut și simplu de utilizat, astfel încât să respecte termenii din titlul lucrării, fiind responsive și realizată pe platforma WordPress.

Lucrarea de față are ca scop prezentarea aplicației menționate din punct de vedere al clientului dar și al vânzătorului și a prezentării tehnologiilor utilizate la realizarea acesteia.

Capitolul I. Fundamentare teoretică

I.1. Baze de date

O bază de date este o colecție de date centralizate, creată și menținută computerizat, în scopul prelucrării datelor în contextul unui set de aplicații. Prelucrarea datelor se referă la operațiile de introducere, ștergere, actualizare și interogare a datelor. [1]

Bazele de date sunt utile, deoarece permit memorarea unor mari cantitati de date, gasirea datelor pe baza unor filtre de cautare dar si prelucrarea unor volume mari de date cum ar fi: filtrarea, ordonarea sau agregarea. [8]

Cel mai regasit tip de baze de date este cel relațional, unde datele sunt retinute în tabele. Pe lânga tabele, o bază de date relațională mai poate conține: indecși, proceduri stocate, declanșatori, utilizatori și grupuri de utilizatori, tipuri de date, mecanisme de securitate și de gestiune a tranzacțiilor. [9]

Bazele de date relaționale sunt un tip de baze de date în care datele, văzute ca și atribute ale entităților reale, sunt socate în tabele și sunt legate între ele prin relații., acestea reprezentand o asociere între două entități. [2]

Acest mod de structurare a datelor, bazat pe legături între date, permite eliminarea redundanței, astfel încât stocarea și, mai ales, modificarea unei informații se face într-un singur loc, iar, din punct de vedere funcțional, această structură permite regăsirea, filtrarea, ordonarea și agregarea datelor, în mod natural. [2]

„Sistemele de gestiune a bazelor de date (SGBD) reprezintă totalitatea programelor utilizate pentru crearea, interogarea și întreținerea unei baze de date. Include două categorii de module: module care sunt comune cu cele ale calculatoarelor și module cu funcții specifice bazei de date. Apariția și răspândirea rețelelor de calculatoare au dus la dezvoltarea SGBD-urilor în direcția multi-user: mai mulți utilizatori folosesc simultan aceeași bază de date.” [8]

„Baza de date poate fi privită ca o colecție de fișiere interconectate care conțin nucleul de date necesare unui sistem informatic. Datele reprezinta orice mesaj primit de un receptor, sub o anumită formă. Informațiile reprezintă cantitatea de noutate adusă de un mesaj din exterior (realitate). Un fișier este un ansamblu de înregistrări fizice, omogene din punct de vedere al conținutului și al prelucrării. O înregistrare fizică este o unitate de transfer între memoria internă și cea externă a calculatorului, iar o înregistrare logică este unitatea de prelucrare din punct de vedere al programului utilizator.” [3]

“Exista mai multe tipuri de baze de date după modul de organizare, modul de dispunere pe suport magnetic a informației și a elementelor componente:

modele primitive –organizate la nivel logic în fișiere, structura de bază este înregistrarea, sunt grupate în structuri de tip fișier mai multe înregistrări;

baze de date ierarhice – legăturile dintre date sunt ordonate unic, accesul se face numai prin vârful ierarhiei, un subordonat nu poate avea decât un singur superior direct și nu se poate ajunge la el decât pe o singură cale;

baze de date în rețea – datele sunt reprezentate ca într-o mulțime de ierarhii, în care un membru al ei poate avea oricâți superiori, iar la un subordonat se poate ajunge pe mai multe căi;

baze de date distribuite – sunt rezultatul integrării tehnologiei bazelor de date cu cea a rețelelor de calculatoare. Sunt baze de date logic integrate, dar fizic distribuite pe mai multe sisteme de calcul.

baze de date relaționale – structura de bază a datelor este aceea de relație-tabel, limbajul SQL (Structured Query Language) este specializat în comenzi de manipulare la nivel de tabel. Termenul relațional a fost introdus de un cercetător al firmei IBM, dr. E. F. Codd în 1969, fiind cel care a enunțat cele 13 reguli de bază necesare pentru definirea unei baze de date relaționale. Baza de date relațională reprezintă o mulțime structurată de date, accesibile prin calculator, care pot satisface în timp minim și într-o manieră selectivă mai mulți utilizatori. Această mulțime de date modelează un sistem sau un proces din lumea reală și servește ca suport unei aplicații informatice.” [3]

La realizarea aplicatiei de tip anunturi s-a folosit phpMyAdmin, reprezentand un amplu sistem de gestiune a bazelor de date relationale MySQL.

I.2. Aplicații Web

Prima pagina Web accesibila a aparut in anul 1990, la Centrul European pentru Cercetari Nucleare (CERN) la Geneva, continand prezentarea unui proiect care facea referire la accesul documentelor pe baza a ceea ce numim acum URL (Uniform Resource Locator), in romana adresă uniformă pentru localizarea resurselor. [10]

Principalul autor al proiectului si totodata cel care a pus umarul la aparitia primei pagini web a fost Tim Berners-Lee. Acesta a creat un navigator cu interfata grafica folosind mediul de dezvoltare NeXTStep, iar atunci când primul server Web a devenit functional, prima pagina vizibila cu ajutorul navigatorului a fost chiar prezentarea proiectului la care a lucrat Tim Berners-Lee împreuna cu o echipa de studenți. [10]

„Web-ul nu trebuie confundat cu Internetul. Web-ul este doar o colecție uriașă de informație interdependentă, distribuită în calculatoare gazdă din întreaga lume, care formează un sistem standardizat global de distribuție a informațiilor hipermedia. Web-ul beneficiază de infrastructura rețelei Internet, de conceptele si protocoalele de transmitere a datelor care fac Internetul să funcționeze: modelul client-server și familia de protocoale TCP/IP. “ [12]

O pagina Web este de obicei in format HTML sau XHTML și reprezintă o resursa care se afla in WWW (World Wide Web), avand hiperlink-uri (hiperlegaturi) pentru a naviga de pe o pagina pe alta sau de la o sectiune de pagina la alta. Un link (legatura) reprezinta o comanda rapida, fie in interiorul unei pagini Web, fie pentru descarcarea de fisiere. Pentru a furniza texte, sunete dar si imagini, paginile Web utilizeaza deseori fisiere grafice sau sonore integrate catre alte resurse neintegrate in pagina respectiva. [11]

O colecție de pagini Web formează o aplicație Web, care reprezintă un sistem software bazat pe tehnologiile și standardele consorțiului World Wide Web Consortium (W3C), oferind resurse Web specifice cum ar fi conținut și servicii prin intermediul unei interfețe numită browser Web.

Pentru publicarea unei aplicații Web aceasta trebuie sa ruleze pe un server Web si poate fi accesata de catre un numar nelimitat de vizitatori. Aplicatiile Web pot fi folosite cu usurinta si de catre persoane fara pregatire tehnica de specialitate in domeniul tehnologiilor Web.

Orice aplicatie Web este compusa din unul sau mai multe limbaje de programare Web, care impreuna indeplinesc buna functionalitate a acesteia. Într-o aplicație online au loc mai multe operații de dinamizare a acesteia, se pot trimite și primii informatii datorită conectivității Internetului, folosind mai multi utilizatori, mai multe statii de lucru si mai multe procese in acelasi timp. Deoarecere aplicatia este bazata pe Internet, nu exista incompatibilitati hardware, aplicatia fiind stocata pe un server securizat. [11]

Capitolul II. Tehnologii utilizate

II.1. HTML 5

O pagină web poate fi afișată într-un browser (navigator), doar dacă utilizează un limbaj de marcare, care are ca scop structurarea și prezentarea documentului.

Datorită dezvoltării rapide a Internetului, este important să existe un format comun pentru toate site-urile web, deoarece orice sistem de operare actual să poată citi orice site web. După acest principiu a apărut SGML (Standard Generalized Markup Language), datorită acestui standard Internetul a fost neutralizat, acest lucru însemnând ca indiferent de țara în care locuim, indiferent de sistemul de operare pe care îl folosim sau de limba pe care o vorbim avem acces la toate informațiile publicate pe Internet. [4]

World Wide Web Consortium (W3C) reprezintă o asociație non-guvernamentală, fondată in anul 1994, având principal scop menținerea și publicarea tuturor limbajelor folosite în Internet cu scopul de a ajuta dezvoltatorii de Web și nu numai să asigure compatibilitate finala produselor. [13]

“Unul dintre cele mai importante limbaje de marcare dezolvat este HTML (HyperText Markup Language), care a apărut ca un răspuns la necesitatea de a descrie un set de informații într-un document, delimintând anumite secțiuni precum: titluri, paragrafe, liste, legaturi cu alte documente și suplimentându-le cu formulare interactive, imagini și alte tipuri de obiecte dinamice (ex: Adobe Flash, Java Applets etc).” [PIU]

Conținutul oricărui fișier HTML trebuie inclus între tag-urile <html> și </html>. Ca structură, pagina are două părți: <head> și </head>, care conține informații de identificare a paginii și o parte delimitată de <body> și <//body> ce conține informațiile de prezentat efectiv in pagină. Titlul de asemenea va fi încadrat între tag-urile <title> și </title >, iar acestea vor fi incorporate între <head> și </head>.

HTML este un limbaj pentru structurarea și prezentarea conținutului pentru World Wide Web, fiind cea de-a 5-a revizuire a limbajului HTML (creat in 1990 și standardizat în 1997 ca HTML4) fiind in prezent în curs de dezvoltare încă din octombrie 2011. HTML5 este urmatorul standard propus pentru a inlocui HTML 4.01 si XHTML 1.0, acesta aducând mai multe elemente noi: semantice, formulare, elemente grafice si multimedia. [PIU]

Poate cea mai importantă noutate adusă este ca HTML 5 este suportat în ultimele versiuni a tuturor navigatoarelor existente în acest moment. Ultima versiune a HTML, încearcă să devină un singur limbaj de marcare, care poate fi scris în HTML sau/și XHTML. Acesta include modele detaliate de prelucrare pentru a încuraja mai multe implementări interoperabile; extinde, îmbunătățește și raționalizează disponibilitățile pentru documentele web și introduce marcarea și aplicații API (application programming interfaces) pentru aplicații web complexe. Din aceste motive, HTML5 este un posibil candidat pentru aplicațiile de platforme mobile. Multe caracteristici ale HTML5 au fost create din considerentul că va trebui să devină capabil să ruleze pe dispozitive mobile. [13]

Pentru implementarea in cadrul aplicației realizare a pitogramelor prezente, am folosit fontul Awesome, prin intermediul apelarii unor clase personalizate ne sunt generate pitograme care pot fi usor personalizate după dimensiune, culoare și umbra, este necesar doar sa apelam clasa respectiva in fisierul de stilizare.

La realizarea aplicației web, am utilizat numeroase elemente HTML cu scopul de a realiza o interfață cât mai aspectuoasa, elemente pentru editarea și structurarea formei, mărimii și culorilor de text. Pentru marcarea unor titluri și subtitluri, existente în codul HTML, am utilizat etichetele <h1>,<h2>, …, <h6>, grosimea fontului am stabilit-o utilizând eticheta <strong>, însă pentru a da textului culoare, mărime, sau un tip de font, am folosit stiluri CSS pentru etichetele respective.

II.2. CSS 3

CSS (Cascading Style Sheets) sau foi de stil în cascadă, reprezintă un mecanism cu ajutorul căruia stilizăm și formatăm elementele unui fișier de marcare. [14]

Stilizarea sau formatarea codul HTML, se realizează prin intermediul unor fișiere externe care se adaugă în elementul <style> al codului de marcare și/sau în cadrul documentului de lucru prin atributul style.

Inserarea standardului CSS ca fișier extern oferă programatorilor Web posibilitatea de a folosi același fișier CSS, astfel putând fi aplicate aceleași stiluri la mai multe pagini, putându-se face schimbări globale dintr-un singur loc sau să ofere diferite moduri de prezentare a site-ului, a conținutului, în funcție de rezoluția ecranului sau de dispozitiv. Această metodă are însă prioritatea cea mai scăzută, adică va fi suprascris de un stil definit în <head> sau în interiorul unui elemen HTML. [PIU]

Așadar, ordinea priorităților în CSS de la cel mai puțin prioritar la cel mai prioritar este urmatoarea:

fisierul CSS inclus extern,

CSS intern (în <head>),

CSS inline (în interiorul unui element HTML). [14]

Pentru a stiliza un document este nevoie să apelăm la atribute, care ne ajută să diferențiem anumite elemente de acelasi tip. Atributele id și class sunt identificatori de element. Atributul class se referă întotdeauna la “o clasă de taguri”, ce pot avea de exemplu același stil. Atributul id se referă la un tag unic. Deși browserele tolerează acest aspect în afișarea paginilor web, este considerat eronat a avea două taguri html cu același id. Așadar, este recomandat să folosim class; id îl putem folosi doar atunci când suntem sigur că elemental respectiv va fi unic. [14]

Ultima versiune a limbajului de stilizare este CSS3, care reprezintă o actualizare și a adus noi atribute care ajută la dezvoltarea noilor concepte în web design. Printre cele mai importante module adaugate se regăsesc: selectorii, transformarile 2D/3D, tranzițiile, animațiile, fundalurile și bordurile dar și modulul Interogari Media (Media Queries) folosit la realizarea aplicației responsive. Acest ultim modul reprezintă o cale eficientă de a adăuga diverse stiluri CSS, cu scopul de a dezvolta aplicații adaptabile oricărei rezoluții astfel încât să ofere vizitatorului o experiență cât mai bună de navigare.

In cazul aplicatiei realizate, am folosit un fișier inclus extern cu extensia .css, acest lucru a reprezentat un element important in facilitatea muncii, folosind proprietati pentru toate elementele din cadrul aplicației intr-un singur fisier. Am folosit elemente CSS pentru stilizarea continutului, cum ar fi: width (determinarea lungimii elementelor HTML), heigth (determinarea latimii elementelor HTML), margin: 0 auto (pentru centrarea elementelor in mijlocul div-ului din care fac parte acestea) dar și margin-left/right, margin-top/bottom, padding-left/right, padding-top/bottom la toate acestea atribuindu-le valori in em (unitate de masura recomandata de W3C, pentru realizarea de continut fluid, necesară pentru a implementa o aplicație responsive).

O problemă care intervine atunci când utilizăm CSS3, este legată de incompatibilitatea intre browsere. De exemplu, pentru realizarea tranzitiei de pe pagina principala din bara producatorilor de echipamente foto-video, am tinut cont de faptul ca este necesară adaugarea unor prefixe, pentru compatibilitate deplina intre browsere. Asadar pentru acest lucru am apelat la urmatoarele prefixe: -webkit- specific browsere-lor Google Chrome si Safari, -moz- pentru Mozilla Firefox, -o- specific pentru browser-ul Opera.

II.3. JavaScript

JavaScript este un limbaj de programare orientat pe obiecte de tip script, folosit pentru a defini comportamentul elementelor dintr-o pagină web. Nu este același lucru cu Java, care este un limbaj de programare complex, oferind medii sofisticate și robuste pentru crearea unei multitudini de aplicații. [15]

Limbajul de tip script a fost dezvoltat și lansat de firma Netscape, inițial sub numele de Mocha, apoi LiveScript, iar pentru rularea scripturilor este necesar un browser web, care să fie capabil să ruleze codul. A fost dezvoltat pentru a deservi în scopuri diverse, dar este folosit în mare parte pentru scriptarea paginilor web, pentru accesul la obiecte încastrate în alte aplicații, la dezvoltarea jocurilor sau aplicațiilor mobile. [15]

Pentru scriptarea paginilor web, programatorii pot include în interiorul paginilor HTML sau printr-un fișier extern inclus în interiorul tag-ului <head> a limbajului de marcare, diverse evenimemte precum validarea de formulare, schimbarea conținutului HTML, schimbarea stilurilor CSS, crearea de efecte animate, evenimente la apăsarea unei taste sau buton și multe altele. În acest mod, JavaScript permite crearea de aplicații interactive și lasă impresii plăcute în timpul navigării prin paginile aplicației, astfel prin această cale putem afișa mesaje de avertizare respectiv mesaje de confirmare, se pot verifica prezența plug-in-urilor în navigator sau putem redirecționa utilizatorul spre o pagina diferită. [PIU]

“Programele care rulează pe calculatorul utilizatorului sunt numite aplicații client-side (aflate pe partea de client), și programele care rulează pe server sunt numite aplicații server-side (aflate pe partea de server).” [16]

Datorită faptului ca JavaScript rulează pe calculatorul personal, i s-au impus o serie de limitări, multe dintre ele din rațiuni de securitate, acestea sunt:

citirea sau scrierea de fisiere pe calculatorul utilizatorului, o permisiune ar fi scrierea în directorul de cookie-uri al browserului

citirea sau scrierea de fișiere pe server

un script JavaScript nu poate inchide o fereastra de browser care nu a fost deschisă de el

nu poate citi informații dintr-un browser care cpontine o pagina Web de pe un alt server, astfel se evită situația de a se închide toate ferestrele active alte browserului.

Arborele de obiecte, numit Document Object Model sau prescurtat DOM, în romana modelul obiectului document, pune la dispoziție script-urile JavaScript, care pot citi și manipula, astfel încât browserele să rețină în memorie o reprezentare a unei pagini web.

Standardul existent W3C (World Wide Web Consortium) pentru DOM-ul trebuie să ofere premize scrierii de scripturi, astfel încât acestea să funcționeze pe toate browserele. Din nefericire, însă, standardul W3C pentru DOM nu este optimizat pentru toate browserele, chiar dacă există tendința de a se respecta standardul W3C, unele dintre acestea prezintă incompatibilități majore, așa cum este cazul navigatorului Internet Explorer, dezvoltat de compania Microsoft, care anunța apariția unui nou browser care respectă standardele impuse de W3C. [15]

Pentru realizarea slideshow-ului prezent pe pagina principala a aplicației, sub meniul principal, dar si pentru validarea formularelor de pe paginile: Autentificare, Inregistrare si Contact, am folosit tehnologia JavaScript.

II.4. jQuery

jQuery este o bibliotecă de funcții JavaScript care oferă posibilitatea dezvoltatorilor de a lucra în anumite procese ce implică managementul inter-browser al evenimentelor sau cum ar fi crearea de animații de tip AJAX, traversarea arborelui DOM în HTML și altele. [18]

Librăria jQuery a fost concepută în anul 2006 de către John Resig, cu scopul de a simplifica și a realiza diverse lucruri noi. Este folosită de regulă în programarea web pentru a rezolva probleme de tip dinamic care nu pot fi rezolvate doar prin utilizarea unui limbaj de marcare de genul HTML. [17]

Pentru includerea librăriei jQuery într-o aplicație este necesară descărcarea acestuia de pe pagina oficială. Biblioteca se va salva pe server, intr-o extensie .js, după care se include in sectiunea <head> a documentului HTML/PHP.

Codul jQuery este compatibil cu toate browserele, în acest fel nu este nevoie sa scriem cod separat pentru fiecare browser în parte. jQuery este folosit adesea de dezvoltatorii Web și fiind o platformă de tip open-source, permite accesul utilizatorilor să acționeze liber asupra procesului de dezvoltare, în acest moment existând o multitudine de module și alte resurse disponibile dezvoltatorilor.

Modulele sunt aspecte importante, arhitectura bibliotecii permite dezvoltarea de subaplicații care extind funcțiile de baza jQuery cu funcții specifice plugin-ului. Există un set de extensii principal numit jQuery UI ( jQuery User Interface). jQuery UI ofera un set de extensii pentru interactivitate de bază, efecte mai complexe decât cele din biblioteca de bază și teme de culori. Avantajul jQuery UI față de alte extensii este că dezvoltarea și testarea acestor componente se face în paralel cu dezvoltarea bibliotecii principale, reducand riscul de incomptibilitate. [17]

jQuery, a reprezentat o tehnologie des utilizată în realizarea aplicației de tip anunțuri. De exemplu, pe pagina principala, am expus primele 4 categorii principale care se regasesc în aplicație, utilizatorul are însă posibilitatea de a desfășura aceasta sectiune, astfel se afișează toate cele 12 categorii principale.

Alte actiuni datorate bibliotecii JavaScript au fost posibile si pe pagina termeni si conditii, unde la actiunea unui click pe unul din meniuri, continutul acelui meniu se va desfasura, actiunea fiind reversibila. Tot o actiune reversibila am realizat pe pagina de detalii a anunturilor, unde adresa de email si numarul de telefon al vanzatorului sunt ascunse in faza initiala, cu scopul de a nu fi indexate de catre motoarele de cautare.

II.5. WordPress

WordPress este o platformă de tip sursă deschisă și un sistem de management al conținutului (CMS), scrisă în limbajul PHP, folosind pentru gestionarea bazelor de date sistemul MySQL. Dispune un sistem de șabloane scrise în limbajele HTML și CSS. WordPress este o platformă versatilă, care le permite utilizatorilor să controleze și să personalizeze funcționalitatea și designul site-ului lor. [18]

Platforma WordPress a fost dezvoltată inițiat pentru crearea și administrarea de blog-uri personale, dar în prezent poate fi folistă pentru a administra cu ușurință orice componentă a unei aplicații, de la adăugarea de conținut și imagini, la actualizarea unui catalog de produse sau sondaje on-line. Este foarte simplu chiar și pentru un utilizator neexperimentat, să adauge conținut, sa actualizeze imagini și să administreze date care ajută la funcționarea optimă a unei aplicații.

Posibilitatea de a dezvolta anumite produse finite, permitând utilizatorilor să acționeze liber asupra produsului dezvoltat reprezintă conceptul de sursă deschisă (open source). Acest concept reprezintă libertatea utilizatorilor să administreze sau să dezvolte, fără a fi nevoiți să achizitioneze licență software sau să achite periodic taxe. Pe termen lung, avantajul constă în alte doua caracteristici:

Codul este accesibil, acesta putând fi personaliza în funcție de nevoile clientului;

Independența față de furnizori.

Atuurile unui CMS sunt multiple, printre acestea sunt cateva:

Costuri reduse – inițial este gratuit, clientul plătește doar personalizarea și implementarea

Înbunătățire continuă – fiind folosit de oameni din întreaga lume, erorile și problemele de funcționare sunt imediat corectate, în urma cererilor utilizatorilor

Întreținere ușoară – administrarea este ușoară pentru site-uri mai puțin complexe

Extensibilitate – produsul ofera o gamă largă de funcționalitate suplimentara datorită modulelor dezvoltate de comunitate. [7]

Fiind un sistem de management al conținutului, WordPress este un produs software implementat ca o aplicație web și este folosit la crearea și utilizarea unui conținut HTML. Se utilizează pentru a putea controla o gamă largă și dinamică de materiale Web (documente HTML precum și imaginile asociate acestora). Un CMS facilitează crearea conținutului, controlarea lui, editarea și multe alte funcții web de întreținere.

“Managementul conținutului reprezintă procesul de colectare, gestionare și publicare a conținutului.

Colectarea reprezintă crearea sau dobândirea de informații de la surse existente și conversia acestora în formate standardizate;

Gestionarea presupune realizarea unei baze de date ce stochează înregistrări și/sau fișiere cu elemente de conținut sau date administrative.

Publicarea reprezintă disponibilitatea conținutului prin extragerea componentelor acestuia din baza de date și afișarea coținutului preluat într-o interfață.” [7]

Avantajele majore prezentate de WordPress sunt simplitatea și numeroasele module create de către comunitate care pot modifica funcționalitatea WordPress-ului tranformându-l în aproape orice tip de site web.  WordPress este o platformă versatilă, care le permite utilizatorilor să controleze și să personalizeze funcționalitatea și designul site-ului lor. [18]

Cu ajutorul modulelor putem extine funcționalitatea de bază a platformei WordPress, însă instalarea prea multor module poate dăuna performanței site-ului sau poate duce chiar la incetinirea vitezei de încărcare a paginilor.

Modulele pe care dorim să le instalăm trebuie sa fie compatibile cu versiunea curentă a platformei WordPress, acest lucru fiind recomandat pentru a nu genera erori pe platforma.

Facilități oferite la utilizarea platformei WordPress:

Permite gestionarea informației în timp real;

Posibilitatea de a adauga module noi în administrarea paginilor web;

Este flexibil;

Se poate întreține cu ușurință;

Interfață cu design simplu de utilizat;

Se pot identifica utilizatorii cheie și se pot atribui roluri pentru a facilita gestionarea conținutului;

Este gratuit [7]

Administrarea platformei WordPress se face printr-o interfață grafică (back-end) în care sunt afișate toate component de administrare a unei aplicații. Accesul la acest sistem de administrare se face pe baza unui formular de autentificare ce funcționează pe baza numelui de utilizator și a unei parole alese la instalarea platformei. Prima pagină afișată dupa conectare este Panoul de control (vezi fig. II.5.1.) care este proiectat pentru a oferi administratorilor rapoarte care cuprind un sumar al informațiilor importante despre aplicație.

Fig. II.5.1. Panoul de control (wordpress.org)

II.6. PHP 5

PHP (Hypertext PreProcessor) este un limbaj de programare folosit pe scară largă în dezvoltarea paginilor și a aplicațiilor Web. Spre deosebire de paginile HTML care pot fi verificate și pe calculatorul local, paginile PHP nu pot fi verificate decât dacă sunt găzduite pe un server Web care are instalat PHP.

Limbajul de programare a fost creat de Rasmus Lerdof în anul 1994, numit inițial Personal Home Page, din dorința acestuia de a crea un script pentru a urmări numărul de vizitatori ai site-ului său. [19]

Pentru a perfecționa limbajul de-a lungul timpului până în prezent au contribuit mai multi dezvoltatori. PHP poartă numele din prezent încă din anul 1997, reprezentând unul dintre cel mai importante și populare limbaje de programare web. [19]

Reprezintă un limbaj de programare Web popular și din pricina următoarelor caracteristici:

Familiaritate – sintaxă ușoară de reținut, combină sintaxe ale limbajelor C sau Perl.

Simplitate – nu este nevoie să includem biblioteci sau directive de compilare, codul PHP se include intr-un document și se execută între marcaje speciale.

Securitate – limbajul pune la dispoziția programatorului seturi flexibile si eficiente de măsuri de siguranță.

Eficiență – PHP se folosește de mecanisme de alocare a resurselor, necesare unui mediu multiutilizator.

Flexibilitate – a fost modularizat pentru a ține pasul cu dezvoltarea diferitelor tehnologii.

Gratuitate – una dintre cele mai importante caracteristici a PHP-ului, fiind dezvoltat sub licență open-source a dus la dezvoltarea rapidă a limbajului la nevoile web-ului. [19]

O caracteristică importantă a PHP-ului este suportul pentru o gamă cât mai largă de baze de date. Cu PHP este foarte simplu de citit din baze de date și de scris în baze de date. PHP suportă următoarele tipuri de baze de date: AdabasD, dBase, Empress, FilePro, HyperWave, IBM DB2, Informix, Ingres, InterBase, Frontbase, mSQl, Direct MS-SQL, MySQL, ODBC, Oracle, Ovrimos, PostgreSQL, Solid, Sysbase, Velocis, UNIX dbm. De asemenea, PHP prezintă suport și pentru alte servicii de rețea folosind protocoale cum ar fi: IMAP, SNMP, NNTP, POP3, HTTP și altele mai puțin importante. Se pot deschide noduri brute de comunicație în rețea care interacționează folosind alte protocoale de comunicație.[25]

Când PHP-ul parcurge un fișier, el de fapt "citește" textul până când întalneste una din etichetele speciale care-i spun să înceapă să interpreteze textul ca pe cod PHP și se execută codul până când este întâlnită eticheta de închidere, apoi se "citește" din nou textul mai departe. Acesta este motivul pentru care se poate adauga cod PHP in interiorul HTML-ului.PHP fiind limbaj de scripting, oferă avantaje programatorilor, de exemplu codul nu trebuie compilat, acest lucru il face usor de testat și editat. Multe dintre limbajele de programare existente necesită compilarea fisierelor în cod mașină, acest proces necesitând mai mult timp. [6]

Dacă este rulat din linia de comandă, PHP oferă posibilitatea de a crea aplicații independente, dar principalul obiectiv al PHP-ului este crearea de scipt-uri pentru a fi rulate pe un server Web, astfel permițându-se modificarea paginilor Web înainte ca acestea sa fie transmise de server către browserele utilizatorului. [6]

II.7. Adobe Photoshop CS6

Photoshop este un program cu o interfață intuitivă și care permite o multitudine extraordinară de modificări necesare în mod curent profesioniștilor și nu numai: editări de luminozitate și contrast, culoare, focalizare, aplicare de efecte pe imagine sau pe zone (selecții), retușare de imagini degradate, număr arbitrar de canale de culoare, suport de canale de culoare pe 8, 16 sau 32 biți. [20]

Dezvoltarea Photoshop a inceput in 1988, iar prima versiune a programului s-a lansat in 1990, fiind dezvoltat de fratii Thomas si John Knoll. Thomas era doctorand la Universitatea din Michigan, unde crea un soft care transforma imaginile color in alb-negru, iar John, lucra la o compania unde facea efecte speciale pentru filme. [20]

Photoshop poate citi majoritatea fisierelor media, de asemenea, are doua formate proprii:

PSD (Photoshop Document) – acest format contine un set de straturi (Layers), incluzand text, masti (mask), informatii diverse despre opacitate, moduri de combinare, canale de culoare

PSB (Large Document Format) – versiune mai noua a formatului PSD, conceput in special pentru fisierele mai mari [20]

Principalele elemente prin care Photoshop se diferențiază de aplicațiile concurente și prin care stabilește noi standarde în industria prelucrării de imagini digitale sunt: selecțiile, straturile (Layers), măștile (Masks), canalele (Channels), retușarea si optimizarea imaginilor pentru Web. [20]

Pentru prelucrarea imaginilor in cadrul aplicatiei realizate am folosit versiunea Photoshop CS6, penultima aparuta pana la ora actuala, precedentă versiunii CC. Prelucrarea imaginilor din slideshow-ul prezent pe pagina principala, a fost realizat folosind instrumente nou aparute in versiunea CS6 dar si instrumente mai vechi, spre exemplu: Shadow/Highlight (imbunatateste contrastul imaginilor subexpuse sau supraexpuse), Image Warp (ofera capacitatea de a deforma imaginile plane), Polygonal Lasso (decuparea elementelor), Brush (desenare elemente) sau Gradient (creaza diferite amestecuri de culori).

II.8. XAMPP

XAMPP este un pachet de programe gratuit, de tip open source care constituie infrastructura software necesară pentru setarea unui server Web și mentenanța acestuia. Numele este un acronim, X – reprezintă numărul mare de sisteme pentru care oferă suport), A – Apache, M – MySQL, P – PHP, P – Perl. XAMPP este disponibil pentru Microsoft Windows, Linux, Solaris, și Mac OS X, și este utilizat în principal pentru dezvoltarea proiectelor Web. [21]

Odată ce XAMPP este instalat, se poate trata adresa de localhost a serverului, ca pe un server la distanță, prin connectarea utilizând protocolul client FTP (File Transfer Protocol). Instalarea XAMPP ocupa un timp relativ scurt pentru instalare, decât atunci când dorim instalarea fiecărei componente în parte. Pot exista mai multe instanțe de XAMPP pe un singur computer, și fiecare instanță poate fi copiată pe alt computer. [21]

Programul XAMPP poate fi descărcat în unul din formatele .zip, .tar, .7z sau .exe și nu necesită modificarea configurărilor componentelor instalate. XAMPP conține următoarele componente: Apache, MySQL, PHP și Perl. Toate componentele existente sunt actualizate cu regularitate. De asemenea vine cu alte module, inclusiv: OpenSSL, phpMyAdmin, MediaWiki, WordPress și Joomla

II.8.1. Serverul Web Apache

Apache este un server HTTP (Hypertext Transfer Protocol) de tip open source. Apache a jucat și joacă un rol important în dezvoltarea webului, fiind cel mai folosit server din paginile web. Serverul web Apache fiind de tip open source este dezvoltat de o comunitate deschisă de programatori sub emblema Apache Software Foundation. Aplicația fiind disponibilă și gratuită pe majoritatea sistemelor de operare. [22]

Chiar dacă este un software gratuit acesta se dovedește a fi un server Web foarte complex datorită facilităților pe care le oferă, printre acestea sunt:

Configurare rapidă

Consum mic de resurse hardware

Posibilitate de a crea virtual host

Fiabilitate (fiind program open-source este testat și îmbunătățit în permanență)

Rapiditate

Securitate sporită

Rulează pe diferite platforme [23]

II.8.2. MySQL

Pentru stocarea eficientă a informațiilor este nevoie de un sistem de gestiune a bazelor de date relaționale (SGBD). MySQL este unul dintre cele mai populare SGDB-uri open source în prezent și este foarte des întâlnit împreună cu PHP. [24]

O colecție de date organizată astfel încât să poată fi ușor de găsit și actualizat reprezintă o bază de date. Aceasta conține informații necesare despre obiectele ce intervin intr-o mulțime de aplicații, relații logice între aceste informații și tehnicile de prelucrare corespunzatoare.

MySQL este un server de baze de date SQL (Structured Query Language) fiind foarte rapid. O baza de date reprezinta o colectie de date organizate dupa anumite criterii. Pentru a accesa, adauga sau procesa date continute in baza de date este nevoie de un sistem de administrare a bazelor de date precum MySQL. [6]

MySQL este componentă integrată a platformelor XAMPP. A fost lansat inițial în anul 1996, iar denumirea este dată după numele fiicei autorului și co-fondatorului Michael Widenius, My și SQL (Structured Query Language). MySQL poate fi rulat pe multe dintre platformele software existente: AIX, FreeBSD, GNU/Linux, Mac OS X, NetBSD, Solaris, SunOS, Windows 9x/NT/2000/XP/Vista. [6]

Pentru crearea unei baze de date este nevoie de MySQL, PHP (acesta necesită instalare pe server) și un server Web, în acest caz Apache, toate acestea se pot instala folosind software-ul gratuit XAMPP.

Pentru conectarea la mediul MySQL, se introduce adresa, localhost/phpmyadmin, în browser, iar aici se pot crea, edita și șterge baze de date, tabele și interogări diverse. MySQL oferă permisiuni dezvoltatorilor să stocheze datele în tabele structurate pe linii și coloane astfel încât accesul la informație să fie mai facil. Fiind un server de baze de date SQL multi-user, inseamna ca poate controla accesul la date mai multor utilizatori simultan.

Dintre operațiile cu baze de date amintesc: CREATE (creează o bază de date sau un tabel), DROP (șterge o bază de date sau un tabel), INSERT (adaugă înregistrări în tabel), DELETE (șterge înregistrări din tabel), UPDATE (updatează înregistrările dintr-un tabel), SELECT (selectează un tabel).

Capitolul III. Descrierea aplicației

Aplicația dezvoltată FrameCiS, reprezintă implementarea unei soluții Web pentru un site de anunțuri cu scopul de a comercializa produse foto-video și accesorii. Această aplicație a fost concepută pentru a oferi utilizatorilor săi un mediu atrăgător pentru comercializare, indiferent de disponzivele de pe care este accesată, astfel am optat să realizez o interfață minimalistă, cu scopul de a rămâne cu o experiență bună toți vizitatorii, inclusiv cei mai puțin experimentati in navigarea pe Internet.

Interfața minimalistă se regăsește și pe dispozivele mobile, fiind aplicație web responsive, aceasta se adaptează la orice mediu în care e vizualizată, indiferent de rezoluția ecranelor.

Aplicația a fost dezvoltată pe platforma WordPress și a reprezenat o metodă elegantă în dezvoltarea dar mai ales în administrarea conținutului aplicației. WordPress a reprezentat un criteriu esențial în dezvoltarea aplicației, fiind un sistem de management al conținutului (CMS) a adus diverse atuuri (vezi cap. II.5.) pe parcursul dezvoltării aplicației FrameCiS.

La realizarea aplicației am ales să folosesc o paletă de culori deschise, care să nu obosească și astfel să ofere un mediu propice utilizatorilor ei, punând accent cu colori aprinse pe secțiunile cheie a acesteia.

III.1. Structura aplicației

Aplicația este structurată pe două interfețe după cum se observă in figura III.1, având o interfață de administrare (vezi cap. III. 4) și o interfață utilizator (vezi cap. III. 3), care este impărțită în doua module, modulul vizitator (vezi cap. III.3.1) și modul vânzător (vezi cap. III.3.2).

Fig. III.1. – Structura aplicației

Aplicația ruleaza pe serverul Web Apache (vezi cap. II.8.1.) și utilizeaza o bază de date relațională de tip MySQL creată cu ajutorul sistemului de gestiune phpMyAdmin.

III.1.1 Harta site-ului

––––

Aici voi adauga HARTA SITE-ULUI + STRUCTURA PAGINILOR DISPONIBILE vizitatorilor si vanzatorilor

––––-

III.1.2 Baza de date a aplicatiei Web

Aplicația utilizează o bază de date creată cu ajutorul sistemului de gestiune phpMyAdmin și conține 36 de tabele așa cum se poate observa in fig. III.1.2.1, care au fost generate automat de catre platforma WordPress.

Fig. III.1.2.1 – Baza de date a aplicației

––––-

Aici voi adauga STRUCTURA TABELELOR SI LEGATURILE DINTRE ACESTEA

–––––

Ilustrat in figura III.1.2.2 de mai jos sunt afișate date care fac referire la anunțurile publicate. În tabela wp_posts este afișat câmpul cod unic al anunțului, cod unic vânzător, data la care a fost adăugat anunțul, titlul anunțului și starea anuțului. Exemplificat în câmpul post_status se observă faptul ca toate anunțurile sunt publice pe site.

Fig. III.1.2.2 – Tabela anunțuri

În tabela wp_users sunt afișate datele tuturor persoanelor care s-au înregistrat în cadrul aplicației așa cum se observă in figura III.1.2.3.

Tabela utilizatorilor înregistrați conține date necesare în gestionarea și supravegherea utilizatorilor. După cum se observă în figura de mai jos, tabela conține diferite date legate de utilizatori, cod unic pentru indentificare, nume utilizator, parola codificată a utilizatorului, numele care este afișat public cand adaugă anunț, adresa de e-mail și data cand s-a înregistrat pe site.

Fig. III.1.2.3 – Tabela utilizatori înregistrați

Tabela wp_newslatter în figura III.1.2.4, reprezintă un instrument esențial în strategia de marketing a aplicației realizate. Formularul prezent în secțiunea de subsol a aplicației, oferă posibilitatea utilizatorilor de a se abona la aplicație prin simpla introducere a unei adrese de e-mail. Ulterior administratorul site-ului gestionează aceste adrese de e-mail trimitând saptămânal noutăți legate de ultimele anunțuri adăugate, acest lucru având ca scop posibilitatea de găsire a unor potențiali clienti.

Fig. III.1.2.4 – Tabela utilizatori abonați

III.3. Interfata utilizator

Interfața utilizator sau front-end-ul reprezintă partea vizibilă a aplicației, aceasta este partea în care vizitatorii și vânzătorii au acces la conținutul și funcționalitatea site-ului Web, în funcție de drepturile de acces aferente care au fost stabilite în partea de administrare.

Interfață este compusă din doua module, primul modul face referire la utilizatorii care vizitează site-ul, aceștia sunt considerați potențiali clienți și al doilea modul se referă la utilizatorii care doresc să vândă produse prin intermediul aplicației.

Diferența dintre cele doua module constă în faptul că utilizatorii care doresc să vândă au posibilități extinse asupra aplicației dupa înregistrare si autentificare.

Deoarece aplicația realizată este web responsive, aceasta oferă o serie de avantaje tuturor utilizatorilor săi, indiferent că vorbim de utilizatori cu statutul de vizitator potențial client sau de vânzător. În figura III.3.1 se prezintă o ilustrație a aplicației accesată pe diferite dispozite, în diverse ipostaze, atât ca utilizator autentificat cât și ca vizitator.

Fig. III.3.1 – Diverse pagini a interfetei utilizator pe diferite dispozive.

Unele elemente în funcție de lățimea rezoluțiilor dispozitivelor au proprietăți diferite, acest lucru fiind posibil prin folosirea interogărilor media din CSS3.

În cele doua subcapitolele ce urmează vor fi prezentate informații detaliate despre funcționalitățile aplicației și despre interfața acesteia, atât ca utilizator vizitator cât și ca vânzător

.

III.3.1. Modulul vizitator

Utilizatorii care vizitează site-ul au acces la tot conținutul acestuia, aceștia nefiind limitați în privința acestui fapt. Au acces la paginile aplicației, au posibilitatea de a lua contact cu vânzătorii prin intermediul numărul de telefon sau online prin intermediul adresei de e-mail, au acces la filtrele de cautare, putând astfel să sorteze anunțurile după criteriile alese.

De asemenea pot să vizualizeze paginile vânzătorilor, au posibilitatea să completeze formularul din pagina Contact sau pot să se aboneze la noutățile oferite de aplicația FrameCiS, toate aceste lucruri fiind posibile fără a fi nevoiți sa-si creeze cont.

În cele ce urmează voi prezenta interfața aplicației ce aparține modulului vizitator și voi detalia aspectele importante din aceasta.

Fig. III.3.1.1 – Pagina principală a aplicatiei

Pagina principală expune elemente dinamice ale aplicației, reusind astfel să atragă prin elemente cheie cum ar fi meniul principal, slideshow cu imagini sau desfasurarea categoriilor principale.

Meniul principal se află în antetul aplicației la fel ca și logo-ul acesteia, acestea fiind prezente pe toate paginile. Atât meniul principal cât si logo-ul au proprietăți diferite în funcție de rezoluția dispozitivelor.

Astfel, dacă aplicația este accesată de pe un dispozitiv cu lățimea rezolutiei mai mare de 990 pixeli, fundalul meniului principal devine transparent în faza în care nu se efectueaza nici o operație de derulare a paginii, iar atunci cand pagina este derulată în jos fundalul meniului devine color și fix, adică va fi prezent in partea superioara a paginilor oricât am derula pagina facilitând astfel accesul la meniu vizitatorului oriunde s-ar afla pe pagină.

Pe dispozitivele cu latimea rezolutiei mai mica de 990 pixeli, meniul pastreaza culoarea pe toata durata actiunilor utilizatorilor, meniul fiind pozitionat relativ, acest lucru insemnand ca pe durata de derulare in jos a paginilor, meniul nu va mai fi prezent in partea superioara, pastrandu-si pozitia initiala.

În slideshow sunt prezente 3 imagini prelucrate în editorul grafic Photoshop, astfel încât să reprezinte un instrument de promovare a aplicației, având ca scop expunerea avantajelor folosirii acesteia.

Desfasurarea categoriilor principale este o secțiune unde utilizatorii pot selecta o categorie, astfel anunțul/anunțurile aparținând categoriei respective vor fi afișate în funcție de categoria selectată. Desfasurarea categoriilor se face prin simpla apăsare a butonului “Vezi categoriile principale” care este extins pe toată lățimea paginii.

In faza initială inaintea apăsării butonul pentru desfasurare se vor afisa 4 categorii principale. După apăsarea butonului pentru expandare, vor fi afisate toate cele 12 categorii principale, exemplificat in figura III.3.1.3, iar restrangerea categoriilor se face prin apăsarea butonului “Restrange categoriile”.

La dispozitivele cu latime mai mica de 767 pixeli, sectiunea aceasta nu va mai fi afisata, principalul motiv fiind acela de a pastra o interfata cat mai curata. Alternativa acestei sectiuni este filtrul de cautare, unde se poate alege o anumită categorie dorită.

Fig. III.3.1.3 – Sectiunea categorii principale în modul desfasurat pe pagina principala

O altă sectiune ce o regasim pe pagina principala sunt ultimele anunturi adaugate. In această sectiune sunt afisate ultimele opt anunturi adaugate, fiecare anunt avand imagine, titlu, pret, ora la care a fost adaugat respectivul anunt si localitate. Utilizatorii au posibilitatea de a vizualiza toate anunturile prin apasarea butonului “Vezi toate anunturile” care se afla in partea de jos a acestei sectiuni.

Sectiunea producatori este afisata doar la dispozivitele cu latime mai mare de 767 pixeli, astfel la fel ca in cazul sectiunii, categorii principale, pentru rezolutiile mai mici pastrandu-se o interfata cat mai simpla.

Pe pagina principală se mai gasește filtrul de cautare după cum se observă in figura III.3.1.2, toti utilizatorii având posibilitatea să caute dupa cele trei criterii: categorii, județe sau cuvinte cheie.

Fig. III.3.1.2 – Filtru de cautare pe pagina principală

Dupa selectarea criteriilor din filtrul de cautare, utilizatorul va fi trimis catre o noua pagina in functie de rezultatele gasite.

In cazul in care criteriile selectate nu au generat rezultate, utilizatorul va fi trimis catre pagina rezultate gasite, si va fi instiintat printr-un mesaj de faptul ca nu s-a gasit niciun anunt dupa criteriile selectate. Totodata sub mesaj utilizatorii au posibilitatea de a cauta dupa alte criterii folosind formularul prezent, la fel ca cel din figura III.3.1.3.

Fig.3.1.3 – Mesaj rezultate negasite cu formular de cautare

In momentul in care criteriile selectate genereaza rezultate, anunturile vor fi afisate in pagina rezultate gasite dupa cum se poate observa in figura III.3.1.4.

In continuare rezultatele gasite pot fi filtrate printr-un formular mai complex, astfel se pot face filtrari dupa rezultate in functie de categorie, judet, producator, garantie, starea produsului sau cuvinte cheie.

Anunturile de pe pagina rezultate gasite, sunt prezentate sub forma de lista, iar informatiile sunt mai complexe fata de anunturile de pe Pagina principala. Astfel fiecare camp al anunturilor au informatii referitoare la poza, titlu, pret, categoria din care face parte produsul, localitatea si judetul vanzatorului. In plus se gasesc informatii despre producatorul produsului, garantia, starea dar si data la care a fost adaugat anuntul.

Exista posibilitatea ca utilizatorul sa gaseasca in aceasta pagina un anunt expirat, acest lucru insemnand ca au trecut 30 de zile de la adaugarea lui. Astfel de anunturi vor aparea in pagina rezultate gasite, dar utilizatorii vor fi notificati de acest lucru, in dreptul pretului fiind afisat mesajul „ANUNT EXPIRAT”, in acest caz anuntul respectiv nu se poate accesa.

Daca anuntul este memorat in browser de catre utilizator si este accesat, utilizatorul va fi informat daca anuntul respectiv a expirat, astfel nu va putea sa vizualizeze pagina de detalii a produsul vandut.

Fig. III.3.1.4 – Pagina rezultate gasite

Pe toate paginile aplicatiei se va gasi sectiunea de subsol sau footer cum mai este numit, exemplificat in figura III.3.1.4. În sectiunea prezenta se gasesc infomatii despre aplicatie, top 5 vizualizari anunturi, meniul cu paginile utile si formularul pentru abonare la noutăți. De asemena în partea de jos a sectiunii se mai gasesc legaturi catre retelele de socializare pe care aplicația este prezenta.

Exemplificat în figura de mai jos, in partea dreapta se gaseste butonul care are ca scop sa trimită utilizatorul in antetul paginii, la fel ca secțiunea footer, acesta se va gasi pe toate paginile aplicației.

Fig. III.3.1.4 – Sectiunea footer a aplicatiei

După ce anunțurile au fost filtrate, utilizatorii aplicației au posibilitatea să acceseze anunțul care reprezintă interes. Această pagină este numită pagina de detalii și se poate observa în figura III.3.1.7. Toate elemente prezente in aceasta pagina au fost pastrate pe toate dispozitivele, indiferent de rezolutia lor.

Fig. III.3.1.7 – Pagina de detalii a anunțului

Pagina de detalii a anunțului cuprinde informații referitoare la produsul vândut dar și detalii referitoare la vânzător, astfel toti vizitatorii au posibilitatea de a lua contact cu vânzătorul.

După cum se observă în figura de mai sus, utilizatorii au posibilitatea să navigheze pe paginile de detalii a anunturilor, folosind săgețile de directionare pentru navigare la anuntul precedent se va folosi săgeata <, iar pentru navigare la anunțul urmator sageata >. Exista însă și posibilitatea de a merge pe pagina de cautare, unde utilizatorii au acces la același formular de cautare din pagina rezultate găsite, prezentat în figura III.3.14.

Pe pagina de detalii este prezentat titlul produsului vandut, categoria din care face parte, imaginea produsului, data ultimei modificări dar si codul unic al anuntului, acesta fiind necesar de exemplu în cazul unor reclamatii ale utilizatorilor referitoare la incorectitudinea datelor afișate în anuntul respectiv.

De asemenea in aceasta pagina sunt prezente sectiuni cum ar fi descrierea produsului, detalii ale produsului și detalii vanzator.

In sectiunea detalii produs, utilizatorul este informat de starea produsului, dacă produsul se afla in garantie sau nu, numele producatorului si modelul produsului, numarul de vizualizari, de asemenea se pot informa cu referire la nota acordata de alti utilizatori și la randul lor pot acorda o nota produsului.

In aceasi sectiune utilizatorii pot observa data la care a fost adaugat anuntulul, dar si data la care acesta expira. Orice anunț expira dupa o perioada de 30 de zile.

Sectiunea de detalii vanzator prezintă datele de contact ale acestuia, pretul produsului vandut dar si modalitatile prin care acesta doreste să livreze produsul, astfel existand trei metode: Personal, Posta sau Curier rapid

Utilizatorii care doresc sa trimita reclamatii administratorului cu privire la neregularitati gasite in cadrul aplicatiei sau au o nelamurire, pot completa formularul de contact sau pot apela la numarul de telefon aflat pe pagina Contact ilustrata in figura III.3.1.9, care se gaseste in meniul secundar aflat in footer-ul aplicatiei, prezent pe toate paginile.

De asemenea pagina Contact mai contine o harta Google Maps, marcat pe aceasta fiind sediul central al firmei.

Fig. III.3.1.9 – Pagina de Contact din cadrul aplicatiei

III.3.2. Modulul vânzător

Toți utilizatorii care doresc să vândă produse, au posibilitatea de a face această operație doar dacă se vor înregistra și se vor autentifica în cadrul aplicației. Aceștia devin vânzători o dată cu publicarea unui anunț.

Primul pas necesar pentru publicarea unui anunt este inregistrarea, in cazul in care utilizatorul are un cont creat acesta va trebui sa se autentifice.

Utilizatorul va trebui sa acceseze pagina Intregistrare din meniul principal, daca doreste sa-si creeze cont. In momentul in care a ajuns pe acea pagina este necesara completarea formularului de inregistrare care se poate observa in figura III.3.2.1.

Toate campurile prezente sunt obligatorii, utilizatorii trebuie complecteze formularul alegand nume de utilizare, e-mail, parola si sa confirme parola aleasa. De asemenea este necesar ca utilizatorii sa citeasca in prealabil termenii si conditiile site-ului, daca sunt de acord cu acestea vor selecta casuta respectiva din formularul de inregistrare.

De exemplu exista posibilitatea de a alege un nume de utilizator existent, daca acest lucru se intampla, utilizatorul va primi un mesaj de avertizare si va fi rugat sa aleaga un alt nume dupa cum se poate observa in figura de mai jos.

Dupa crearea contului utilizatorul va fi mentinut ca autentificat si va putea parcurge operatiile de adaugare a anuntului dorit.

Fig. III.3.2.1 – Formular de inregistrare

In cazul in care utilizatorul si-a creat cont si a terminat sesiunea, acesta se poate autentifica folosind formularul de autentificare ilustrat in figura III.3.2.2 , din pagina Autentificare a meniului principal.

Autentificare utilizatorilor se face completand doua campuri, utilizator si parola. Spre exemplu daca se introduc date eronate, utilizatorul va fi avertizat de acest fapt printr-un mesaj ca cel din imaginea de mai jos. Revenirea la formularul initial facandu-se accesand link-ul sugerat pentru continuare.

In cazul in care un utilizator a uitat parola de autentificare in cadrul aplicatiei, are posibilitatea de o reseta urmand link-ul „Ai uitat parola?”. Acesta va fi redirectionat catre un alt formular unde va fi necesara complectarea numelui de utilizator si a adresei de e-mail.

Exista posibilitatea ca utilizatorul sa fie directionat catre formularul de intregistrare, in cazul in care ajunge accidental pe pagina Autentificare sau nu are un cont creat.

Fig. III.3.2.2 – Formular autentificare

Dupa ce autentificarea a avut succes, paginile Autentificare si Inregistrare din meniul principal nu vor mai fi afisate, iar in partea superioara a noului meniu va fi afisata bara de administrare a contului utilizatorului autentificat, dupa cum se poate observa in figura III3.2.3.

Fig. III.3.2.3 – Bara administrare cont si noul meniu

In momentul in care utilizatorul este autentificat, acesta poate avea acces la mai multe facilitati. Una dintre acestea este posibilitatea de a-si edita profilul, spre exemplu acesta poate sa schimbe parola curenta sau sa schimbe interfata de administrare a contului.

O alta operatie posibilita este adaugarea anuntului dorit, acest lucru este posibil accesand pagina “Adauga anunt” din meniul principal.

Pentru publicarea anuntului este nevoie ca utilizatorul sa fie la curent cu termenii si conditiile site-ului prezenti in pagina Termeni si Conditii din meniul secundar al aplicatiei, prezentati si la crearea contului.

Publicarea anuntului se face complectand formularul de adaugare anunt, existand campuri obligatorii care necesita complectate, acestea sunt: titlu, descrierea produsului in maxim 500 de caractere, pret, adresa de e-mail pentru contact, numar telefon, de asemenea mai este necesar si complectarea campurilor localitate, judet, modalitate de livrare, stare produs si garantie.

Dupa complectarea formularului si trimiterea acestuia, utilizatorul va fi notificat printr-un element grafic in meniul interfetei de administrare, ca cel din figura de mai jos, de faptul ca anuntul urmeaza sa fie aprobat de administratori.

Fig. III.3.2.4 – Element grafic pentru notificare

A treia operatie posibila pentru utilizatorul inregistrat si autentificat este posibilitatea de a edita, sterge sau reactualiza anunturile adaugate. Acest proces este posibil accesand link-ul „Anunturile mele” din bara de administrare a contului. Mai jos este exemplificat in figura III.3.2.5. interfata utilizatorului si tabelul anunturilor adaugate.

In prima coloana din tabel, este afisata data la care anuntul urmeaza sa expire, in urmatoarele coloane sunt afisate titlurile anunturilor, data la care a fost adaugat, nota obtinuta la anunt de la toti utilizatorii si numarul de vizualizari a anuntului.

Fig. III.3.2.5 – Interfata de administrare a contului si tabelul anunturilor

Dupa publicarea a cel putin unui anunt de catre un vanzator, utilizatorii pot accesa pagina vanzatorului, acest lucru fiind posibil din pagina de detalii a anuntului.

Un vanzator poate sa reprezinte un interes pentru toti utilizatorii datorita produselor vandute sau datorita localitatii in care se afla, din aceasta cauza persoanele care doresc pot accesa pagina utilizatorului ilustrata in figura III.3.2.6 si pot vizualiza toate produsele adaugate.

Dupa cum se poate observa in figura, pe aceasta pagina sunt afisate inclusiv produsele care au expirat, acestea reprezentand produse care nu au fost sterse de vanzator sau nu au fost reactualizate de acesta.

Fig. 3.2.6 – Anunturile utilizatorului

III.4. Interfata de administrare

Interfața de administrare sau back-end-ul aplicatiei este accesibil administratorului prin intermediul căruia se realizeaza gestionarea funcționalităților, a mediului de stocare și a opțiunilor de publicare. Administratorul are drepturi depline asupra aplicației, putând astfel administra orice conținut din aplicație.

Accesul pe interfata de administrare se face printr-un formular de autentificare, pe baza numelui de utilizator si pe baza unei parole. Administratorul se poate autentifica fie folosind formularul prezent pe interfata utilizator fie accesand adresa www.numesite.ro/wp-admin, astfel avand acces la formularul de autentificare a platformei WordPress.

Administrarea aplicatiei FrameCiS, este realizata in prezent de un administrator cu drepturi depline, care are posibilitatea de a atribui drepturi oricarui utilizator inregistrat. Astfel, pentru a putea gestiona o aplicatie complexa precum un site de anunturi, exista posibilitatea de a adauga noi roluri si atributii utilizatorilor care vor face parte din echipa de administrare.

La fel ca interfata utilizator, interfata de administrare este responsive dupa cum se poate observa in figura III.4.1, astfel adminstrarea aplicatiei este posibila intr-un mod intuitiv de pe orice dispozitiv, fie ca vorbim de tablete sau de telefoane mobile inteligente.

Fig. III.4.1 – Diverse pagini a interfetei de administrare pe diferite dispozitive

O data ce administratorul este autentificat, acesta are posibilitate de a naviga in meniul prezent in partea stanga, unde se gasesc componentele pentru administrarea aplicatiei. Componentele prezente in meniul interfetei de administrare a aplicatiei FrameCiS sunt prezentate in partea stanga din figura III.4.2, reprezinta o parte esentiala in gestionarea aplicatiei.

Meniul este complex, astfel fiecare componenta apartinand meniului are mai multe subcomponente ce fac posibila administrarea tuturor elementelor cheie ce apartin aplicatiei.

Fig. III.4.2 – Interfata de administrare si meniul aferent

In cele ce urmeaza voi descrie componentele importante care alcatuiesc meniul interfetei de administrare.

Panoul de control (Dashboard) – pagina de rapoarte si prima componenta care este afisata cand se acceaza interfata, administratorul are acces la informatiile anunturilor publicate, este informat cu privire la numarul paginilor create si la numarul total de anunturi adaugate.

Media – pagina de administrare a imaginilor, administratorul are posibilitatea sa editeze sau sa stearga anumite imagini care au fost publicate de vanzatori

Pagini (Pages) – este componenta care afiseaza toate paginile create, administratorul avand acces deplin asupra lor, putand crea pagini noi, edita sau sterge.

Anunturi – componeta de administrare a anuturilor ilustrata in figura III.4.3, este componenta care contine anunturile adaugate de utilizatori. Administratorul este notificat cu privire la faptul ca un anunt a fost adaugat printr-un element grafic si asteapta aprobarea.

Inainte de a fi aprobat, anuntul poate fi vizualizat, in cazul in care nu corespunde cerintelor specificate in termenii si conditiile site-ului acesta poate fi sters, astfel nu va fi publicat.

De asemenea administratorul are acces deplin asupra tuturor anunturilor, acestea putand fi editate, previzualizate sau sterse.

In subcomponenta Categorii anunturi, administratorul poate adauga, edita sau sterge anumite categorii, care vor

Fig. III.4.3 – Componenta de administrare a anunturilor

Aspect (Appearance) – componenta esentiala pentru editarea elementelor care pot fi vizualizate in interfata utilizator. De exemplu se poate seta imaginea sau culoarea de fundal a aplicatiei, se pot adauga, edita sau sterge pagini din cele doua meniuri.

Module (Plugins) – in aceasta componenta administratorul poate adauga, activa si dezactiva modulele necesare.

Utilizatori (Users) – componenta care cuprinde toti utilizatorii care au cont pe site, administratorul poate edita orice user, astfel in viitor se poate crea si atribui anumite roluri unor anumiti utilizatori care vor face parte din echipa de administrare.

Setari (Settings) – administratorul poate actiona asupra foarte multor setari, spre exemplu setarea numelui aplicatiei, rolul implicit a membrilor inregistrati sau formatul de data afisat in interfata utilizator.

Concluzii

Bibliografie

[1] Adrian Olteanu, Radu Nicolae Pietraru, Magdalena Anghel. Baze de date și utilizarea acestora. Editura Didactică și Pedagogică, București, 2005.

[2] Cornelia Gyorodi. Baze de date relaționale, teorie și aplicații. Editura TREIRA, Oradea, 2000.

[3] Romică Trandafir, Mihai Ștefan Nistorescu. Bazele informaticii și limbaje de programare. Editura Universității din București, București, 2006.

[4] Traian Anghel. Tot ce trebuie să știi despre Internet. Editura Polirom, București, 2011.

[5] PIU

[6] Cristian Darie, Mihai Bucică. PHP5 și MySQL pentru comerț electronic. Editura Teora, București, 2006.

[7] Ion Alexandru Marinescu, Cohal Antonio, Răduț Valentin: Revista Română de Informatică și Automatică; Vol. 20, nr. 4, 2010, pp. 53-56

[8] http://www.techit.ro/baza-de-date-relationala.php, consultat la 21.05.2015

[9] https://ro.wikipedia.org/wiki/Baz%C4%83_de_date consultat la 21.05.2015

[10] http://usatoday30.usatoday.com/life/cyber/tech/2001/12/11/ebrief.htm consultat la 21.05.2015

[11] https://en.wikipedia.org/wiki/Web_page consultat la 22.05.2015 și 24.05.2015

[12] http://www.rasfoiesc.com/educatie/informatica/html/Spatiul-World-Wide-Web-si-noti14.php consultat la 27.05.2015

[13] https://ro.wikipedia.org/wiki/HTML5 consultat la 31.05.2015

[14] http://www.w3schools.com/css/css_howto.asp

[15] https://en.wikipedia.org/wiki/JavaScript consultat la 29.05.2015

[16] http://fivecodes.com/blog/ consultat la 29.05.2015

[17] http://www.marplo.net/javascript/jquery-elemente-baza-js consultat la 31.05.2015

[18] https://codex.wordpress.org/WordPress consultat la 24.05.2015

[19] https://en.wikipedia.org/wiki/PHP consultat la 5.06.2015

[20] https://en.wikipedia.org/wiki/Adobe_Photoshop consultat la 8.06.2015

[21] https://en.wikipedia.org/wiki/XAMPP consultat la 9.06.2015

[22] http://w3techs.com/technologies/overview/web_server/all consultat la 9.06.2015

[23] https://en.wikipedia.org/wiki/Apache_HTTP_Server consultat la 9.06.2015

[24] http://db-engines.com/en/ranking consultat la 9.06.2015