Crearea Unei Aplicații Web Resonsive Folosind Cms

Crearea Unei Aplicații Web Resonsive Folosind Cms

Byadmin ianuarie 1, 2024

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 modifică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 exponențială a mărimii și complexității conținutului, 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ă achiziționeze produse din această arie, într-un mediu plăcut și accesibil, 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 vizitatorului 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, create și menținute 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 cantități de date, găsirea datelor pe baza unor filtre de căutare dar și prelucrarea unor volume mari de date cum ar fi filtrarea, ordonarea sau agregarea. [8]

Cel mai regăsit tip de baze de date este cel relațional, unde datele sunt reținute în tabele. Pe lângă 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 reprezentând 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, astfel 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 reprezintă 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]

Există 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 aplicației de tip anunțuri s-a folosit phpMyAdmin, reprezentând un amplu sistem de gestiune a bazelor de date relaționale MySQL.

I.2. Aplicații Web

Prima pagină web accesibilă a apărut în anul 1990, la Centrul European pentru Cercetări Nucleare (CERN) la Geneva, conținând prezentarea unui proiect care făcea referire la accesul documentelor pe baza a ceea ce numim acum URL (Uniform Resource Locator), în limba română adresă uniformă pentru localizarea resurselor. [10]

Principalul autor al proiectului și totodată cel care a contribuit la apariția primei pagini web a fost Tim Berners-Lee. Acesta a creat un navigator cu interfața grafică folosind mediul de dezvoltare NeXTStep, iar atunci când primul server web a devenit funcțional, prima pagină vizibilă cu ajutorul navigatorului a fost chiar prezentarea proiectului la care a lucrat Tim Berners-Lee împreuna cu o echipă 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 și protocoalele de transmitere a datelor care fac Internetul să funcționeze: modelul client-server și familia de protocoale TCP/IP. [12]

O pagină web este de obicei în format HTML sau XHTML și reprezintă o resursă care se află în WWW (World Wide Web), având hiperlink-uri (hiperlegături) pentru a naviga de pe o pagină pe alta sau de la o secțiune de pagină la alta. Un link (legătura) reprezintă o comandă rapidă, fie în interiorul unei pagini web, fie pentru descărcarea de fișiere. Pentru a furniza texte, sunete dar și imagini, paginile web utilizează deseori fișiere grafice sau sonore integrate către alte resurse neintegrate în pagina respectivă. [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 numite browser web.

Pentru publicarea unei aplicații web aceasta trebuie să ruleze pe un server web și poate fi accesată de către un număr nelimitat de vizitatori. Aplicațiile web pot fi folosite cu ușurință și de către persoane fără pregătire tehnică de specialitate în domeniul tehnologiilor web.

Orice aplicație web este compusă din unul sau mai multe limbaje de programare, care împreună îndeplinesc buna funcționalitate a acesteia. Într-o aplicație online au loc mai multe operații de dinamizare a acesteia, se pot trimite și primii informații datorită conectivității Internetului, folosind mai mulți utilizatori, mai multe stații de lucru și mai multe procese în același timp. Deoarecere aplicația este bazată pe Internet, nu exista incompatibilități hardware, aplicația fiind stocată 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 că 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ă în 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 finală 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, delimitând anumite secțiuni precum: titluri, paragrafe, liste, legături cu alte documente și suplimentându-le cu formulare interactive, imagini și alte tipuri de obiecte dinamice (ex: Adobe Flash, Java Applets). [5]

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țin informații de identificare a paginii și o parte delimitată de <body> și <//body> ce conține informațiile de prezentat efectiv în pagină. Titlul de asemenea vă fi încadrat între tag-urile <title> și </title >, iar acestea vor fi încorporate între <head> și </head>.

HTML este un limbaj pentru structurarea și prezentarea conținutului World Wide Web, fiind la a cincea revizuire, limbajul HTML, a fost creat în 1990 și standardizat în 1997 ca HTML4, fiind în prezent în curs de dezvoltare încă din octombrie 2011. HTML5 este următorul standard propus pentru a înlocui HTML4 și XHTML1, acesta aducând mai multe elemente noi: semantice, formulare, elemente grafice și multimedia. [5]

Poate cea mai importantă noutate adnoutate adusă limbajului HTML5 este faptul că poate fi 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 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 în cadrul aplicației realizare a pitogramelor prezente, am folosit fontul Awesome, prin intermediul apelării unor clase personalizate, sunt generate pitograme care pot fi ușor personalizate după dimensiune, culoare și umbră, este necesar doar să se apeleze clasa respectivă în fișierul de stilizare și să i se atribuie proprietăți.

La realizarea aplicației web, am utilizat numeroase elemente HTML cu scopul de a realiza o interfață cât mai aspectuoasă, 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 dispozitivului. 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. [5]

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

fișierul 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 același 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 siguri că elementul 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 adăugate se regăsesc: selectorii, transformările 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 proprietăți 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.

În cazul aplicației realizate, am folosit un fișier inclus extern cu extensia .css, acest lucru a reprezentat un element important în facilitatea muncii, folosind proprietăți pentru toate elementele din cadrul aplicației într-un singur fișier. Am folosit elemente CSS pentru stilizarea conținutului, cum ar fi: width (determinarea lungimii elementelor HTML), heigth (determinarea lățimii elementelor HTML), margin: 0 auto (pentru centrarea elementelor în 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 în em (unitate de măsură recomandată de W3C, pentru realizarea de conținut fluid, mărime necesară pentru a implementa o aplicație responsive).

O problemă care intervine atunci când utilizăm CSS3, este legată de incompatibilitatea între browsere. De exemplu, pentru realizarea tranziției de pe pagina principală din bara producătorilor de echipamente foto-video, am ținut cont de faptul că este necesară adăugarea unor prefixe, pentru compatibilitate deplină a aplicației cu cele mai populare browsere. Așadar pentru acest lucru am apelat la următoarele prefixe: -webkit- specific browser-elor Google Chrome și 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> al 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 plugin-urilor în browser sau putem redirecționa utilizatorul spre o pagină diferită. [5]

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 fișiere 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 închide o fereastră de browser care nu a fost deschisă de el

nu poate citi informații dintr-un browser care conține o pagină web de pe un alt server, astfel se evită situația de a se închide toate ferestrele active ale browserului.

Arborele de obiecte, numit Document Object Model sau prescurtat DOM, în limba română 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 browser-ului Internet Explorer, dezvoltat de compania Microsoft, care recent a anunțat apariția unui nou browser care respectă standardele impuse de W3C. [15]

Pentru realizarea slideshow-ului prezent pe pagina principală a aplicației, sub meniul principal, dar și pentru validarea formularelor de pe paginile: Autentificare, Înregistrare și 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, într-o extensie .js, după care se include în secțiunea <head> a documentului HTML/PHP.

Codul jQuery este compatibil cu toate browserele, în acest fel nu este nevoie să 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 oferă 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, reducând riscul de incompatibilitate. [17]

jQuery, a reprezentat o tehnologie des utilizată în realizarea aplicației de tip anunțuri. De exemplu, pe pagina principală, am expus primele patru categorii principale care se regăsesc în aplicație, utilizatorul are însă posibilitatea de a desfășura această secțiune, astfel se afișează toate cele doisprezece categorii principale.

Alte acțiuni datorate bibliotecii JavaScript au fost posibile și pe pagina Termeni și Condiții, unde la acțiunea unui click pe unul din meniuri, conținutul acelui meniu se va desfășura, acțiunea fiind reversibilă. Tot o acțiune reversibilă am realizat pe pagina de detalii a anunțurilor, unde adresa de e-mail și numărul de telefon al vânzătorului sunt ascunse în faza inițială, cu scopul de a nu fi indexate de către motoarele de căutare.

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 de 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 folosită 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 online. Este foarte simplu chiar și pentru un utilizator neexperimentat, să adauge conținut, să actualizeze imagini și să administreze date care ajută la funcționarea optimă a unei aplicații.

Posibilitatea de a dezvolta anumite produse finite, permițâ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 personalizat î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 încetinirea 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 platformă.

Facilități oferite la utilizarea platformei WordPress:

Permite gestionarea informației în timp real;

Posibilitatea de a adăuga 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 componentele de administrare a aplicației. 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ă după conectare este Panoul de control, ilustrat în figura II.1, care este proiectat pentru a oferi administratorilor rapoarte care cuprind un sumar al informațiilor importante despre aplicație.

Fig. II.1. Panoul de control

II.6. PHP

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 într-un document și se execută între marcaje speciale;

Securitate – limbajul pune la dispoziția programatorului seturi flexibile și 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. [19]

Când PHP-ul parcurge un fișier, el de fapt „citește” textul până când întâlnește 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 adăuga cod PHP în interiorul HTML-ului. PHP fiind limbaj de scripting, oferă avantaje programatorilor, de exemplu codul nu trebuie compilat, acest lucru îl face ușor de testat și editat. Multe dintre limbajele de programare existente necesită compilarea fișierelor î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 să 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 început în 1988, iar prima versiune a programului s-a lansat în 1990, fiind dezvoltat de frații Thomas și John Knoll. Thomas era doctorand la Universitatea din Michigan, unde crea un soft care transforma imaginile color în alb-negru, iar John, lucra la o companie unde crea efecte speciale pentru filme. [20]

Photoshop poate citi majoritatea fișierelor media, de asemenea, are doua formate proprii:

PSD (Photoshop Document) – acest format conține un set de straturi (Layers), incluzând text, măști (mask), informații diverse despre opacitate, moduri de combinare, canale de culoare;

PSB (Large Document Format) – versiune mai nouă a formatului PSD, conceput în special pentru fișierele 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 și optimizarea imaginilor pentru Web. [20]

Pentru prelucrarea imaginilor în cadrul aplicației realizate am folosit versiunea Photoshop CS6, penultima aparută până la ora actuală, precedentă versiunii CC. Prelucrarea imaginilor din slideshow-ul prezent pe pagina principală, a fost realizată folosind instrumente nou aparute în versiunea CS6 dar și instrumente mai vechi, spre exemplu: Shadow/Highlight (îmbunătățește contrastul imaginilor subexpuse sau supraexpuse), Image Warp (oferă capacitatea de a deforma imaginile plane), Polygonal Lasso (decuparea elementelor), Brush (desenare elemente) sau Gradient (crează 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 sistemele de operare 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 conectarea utilizând protocolul client FTP (File Transfer Protocol). Instalarea XAMPP ocupă 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 web-ului, fiind cel mai folosit server pentru 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 într-o mulțime de aplicații, relații logice între aceste informații și tehnicile de prelucrare corespunzătoare.

MySQL este un server de baze de date SQL (Structured Query Language) fiind foarte rapid. O bază de date reprezintă o colecție de date organizate după anumite criterii. Pentru a accesa, adăuga sau procesa date conținute în 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, înseamnă că 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. Prezentarea 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 experimentați în 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.

Baza de date a aplicației este relaționala, aceasta a fost creată cu ajutorul sistemului de gestiune phpMyAdmin, iar tabelele au fost generate de platforma WordPress.

Structura aplicației este simplă, există două module de utilizatori: vizitatori și vânzători în interfața utilizator, iar interfața de administrare oferă posibilitatea administratorului cu drepturi depline să gestioneze tot conținutul site-ului.

De asemenea toți utilizatorii au acces la cele două meniuri prezentate în subcapitolul III.1.1.

Aplicația oferă facilități pentru ambele module de utilizatori, astfel vizitatorii reprezintă categoria de utilizatori care nu au un cont creat în cadrul aplicației, printre facilități enumăr accesul la toate paginile, posibilitatea de a căuta anunțuri folosind formulare sau acces la datele de contact și paginile vânzătorilor. Cealaltă categorie de utilizatori sunt vânzătorii, aceștia trebuie să parcurgă anumiți pași pentru publicarea unui anunț, trebuie să se înregistreze și să se autentifice. În momentul în care sunt autentificați au posibilitatea de a publica un anunț, care înainte de a fi publicat pe site necesită aprobarea administratorului, după ce este aprobat anunțul este valabil timp de 30 de zile, după această perioadă exista posibilitatea de a reactualiza anunțul respectiv.

III.1. Structura aplicației

Aplicația este structurată pe două interfețe după cum se observă în figura III.1, având o interfață de administrare numită back-end (cap. III.4) și o interfață utilizator numită front-end (cap. III.3), aceasta din urmă fiind împărțită în două module, modulul vizitator (cap. III.3.1) și modul vânzător (cap. III.3.2).

Fig. III.1. Structura aplicației

III.1.1. Harta site-ului

Exemplificat in figura III.2 este harta site-ului, după cum se poate observa în cadrul aplicației există două meniuri, unul fiind meniul principal care se află în antentul acesteia, iar al doilea este meniul secundar aflat în subsolul aplicației.

Pagina principală este afișată prima dată la accesarea aplicației, din această pagină se permite accesul către toate paginile din meniuri, de asemenea accesul către cele două meniuri se poate face de pe orice pagină a aplicației.

Meniul principal

Meniul secundar

Fig. III.2. Harta site-ului

III.1.2. Baza de date a aplicației

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 în figura III.3, care au fost generate automat de către platforma WordPress.

În momentul în care baza de date este selectată există posibilitatea de vizualizare a structurii cât și a înregistrării tabelelor conținute și se poate efectua diverse operații asupra acestora.

Fig. III.3. Baza de date a aplicației

Deoarece platforma Wodpress generează în mod automat la instalare tabelele, acestea fiind într-un număr mare în cadrul aplicației realizate, am optat să exemplific structura bazei de date prin cele mai importante tabele așa cum se poate observa în figura III.4. Aceste tabele sunt exemplificate prin legăturile și câmpurile aferente acestora.

Fig. III.4. Structura bazei de date

În cele ce urmează voi ilustra prin imagini și voi prezenta conținutul celor mai importante tabele cu câmpurile aferente așa cum au fost generate de platforma Wodpress.

Ilustrat în figura III.5 sunt afișate câmpuri 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 că toate anunțurile sunt publice pe site.

Fig. III.5. 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ă în figura III.6.

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 când adaugă anunț, adresa de e-mail și data când s-a înregistrat pe site.

Fig. III.6. Tabela utilizatori înregistrați

Tabela wp_newslatter în figura III.7, reprezintă un instrument esențial în strategia de marketing a aplicației realizate. Formularul prezent în secțiunea de subsol (footer) a aplicației, oferă posibilitatea utilizatorilor de a se abona la aplicație prin simpla introducere a unei adrese de e-mail. Ulterior administratorul aplicației gestionează aceste adrese de e-mail trimițând săptă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 clienți

.

Fig. III.7. Tabela utilizatori abonați

În conținutul tabelei wp_ratings ilustrată în figura III.8, sunt centralizate notele acordate de toți utilizatorii anunțurilor publicate în cadrul aplicației.

Această tabelă conține câmpuri pentru identificarea notei, cod unic al anunțului, numele anunțului căruia i s-a acordat note și media notelor acordate.

În această tabelă sunt afișate toate informațiile legate de anunțuri după acordarea a cel puțin unei note.

Fig. III.8. Tabela cu notele acordate la anunțuri

III.3. Interfața 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 aplicației web, în funcție de drepturile de acces aferente care au fost stabilite în partea de administrare.

Interfață este compusă din două 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 două module constă în faptul că utilizatorii care doresc să vândă au posibilități extinse asupra aplicației după înregistrare și 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 vizitatori potențiali clienți sau de vânzători. În figura III.9, se prezintă o ilustrație a aplicației accesată pe diferite dispozitive, în diverse ipostaze, atât ca utilizator autentificat cât și ca vizitator.

Fig. III.9. Diverse pagini a interfeței utilizator pe diferite dispozive

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

În cele două 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ărului de telefon sau online prin intermediul adresei de e-mail, au acces la filtrele de căutare, 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 să-și creeze cont.

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

La accesarea aplicației, prima pagină care se deschide este pagina principală, ilustrată în figura III.10.

Fig. III.10. Pagina principală a aplicației

Pagina principală expune elemente dinamice ale aplicației, reușind astfel să atragă prin elemente cheie cum ar fi meniul principal, slideshow cu imagini sau desfășurarea categoriilor principale.

Meniul principal se află în antetul aplicației (header) la fel ca și logo-ul acesteia, acestea fiind prezente pe toate paginile. Atât meniul principal cât și 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 rezoluției mai mare de 990 pixeli, fundalul meniului principal devine transparent în faza în care nu se efectuează nici o operație de navigare, iar atunci când utilizatorii încep să navigheze pe aplicație, fundalul meniului devine color și fix, adică va fi prezent în partea superioară a paginilor oricât am derula pagina facilitând astfel accesul la meniu vizitatorului oriunde s-ar afla pe pagină.

Pe dispozitivele cu lățimea rezoluției mai mică de 990 pixeli, meniul păstrează culoarea pe toată durata acțiunilor utilizatorilor, meniul fiind poziționat relativ, acest lucru însemnând că pe durata de derulare în jos a paginilor, meniul nu va mai fi prezent în partea superioară, păstrându-și poziția inițială.

Î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.

Desfășurarea 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ă. Desfășurarea categoriilor se face prin simpla apăsare a butonului „Vezi categoriile principale” care este extins pe toată lățimea paginii.

In faza inițială înaintea apăsării butonul pentru desfășurare se vor afișa patru categorii principale. După apăsarea butonului pentru desfășurare, vor fi afișate toate cele doisprezece categorii principale, exemplificate în figura III.11, iar restrângerea categoriilor se face prin apăsarea butonului „Restrânge categoriile”.

La dispozitivele cu lățimea rezoluției mai mică de 767 pixeli, secțiunea aceasta nu va mai fi afișată, principalul motiv fiind acela de a păstra o interfață cât mai curată. Alternativa acestei secțiuni este formularul de căutare, unde se poate alege o anumită categorie dorită.

Fig. III.11. Secțiunea categorii principale în modul desfășurat pe pagina principală

O altă secțiune ce o regăsim pe pagina principală sunt ultimele anunțuri adăugate. În această secțiune sunt afișate ultimele opt anunțuri adăugate, fiecare anunț având imagine, titlu, preț, ora la care a fost adăugat respectivul anunț și localitate. Anunțurile de pe această pagină sunt dispuse pe linii și coloane. Utilizatorii au posibilitatea de a vizualiza toate anunțurile prin apăsarea butonului „Vezi toate anunțurile” care se află în partea de jos a acestei secțiuni.

Secțiunea producători este afișată doar la dispozitivele cu lățimea rezoluției mai mare de 767 pixeli, astfel la fel ca în cazul secțiunii categorii principale, pentru rezoluțiile mai mici păstrându-se o interfață cât mai simplă.

Pe pagina principală se mai găsește formularul de căutare după cum se observă în figura III.12, toți utilizatorii având posibilitatea să caute după cele trei criterii: categorii, județe sau cuvinte cheie.

Fig. III.12. Formular de căutare pe pagina principală

După selectarea criteriilor din filtrul de căutare, utilizatorul va fi trimis către o nouă pagină în funcție de rezultatele găsite.

În cazul în care criteriile selectate nu au generat rezultate, utilizatorul va fi trimis către pagina rezultate negăsite, și va fi înștiințat printr-un mesaj de faptul că nu s-a găsit niciun anunț după criteriile selectate. Totodată sub mesaj utilizatorii au posibilitatea de a căuta după alte criterii folosind formularul prezent, ilustrat în figura III.13, care include aceleași filtre de căutare la fel ca cel prezent pe pagina principală.

Fig. III.13. Mesaj rezultate negăsite și formularul de căutare

În momentul în care criteriile selectate generează rezultate, anunțurile vor fi afișate în pagina rezultate găsite după cum se poate observa în figura III.14.

În continuare rezultatele găsite pot fi filtrate printr-un formular mai complex, astfel se pot face filtrări după rezultate în funcție de categorie, județ, producător, garanție, starea produsului său cuvinte cheie.

Anunțurile de pe pagina rezultate găsite, sunt prezentate sub formă de listă, iar informațiile sunt mai complexe față de anunțurile de pe pagina principală. Astfel fiecare câmp al anunțurilor au informații referitoare la poză, titlu, preț, categoria din care face parte produsul, localitatea și județul vânzătorului. În plus se găsesc informații despre producătorul produsului, garanția, starea dar și data la care a fost adăugat anunțul.

Există posibilitatea ca utilizatorul să găsească în această pagină un anunț expirat, acest lucru însemnând că au trecut 30 de zile de la adăugarea lui. Astfel de anunțuri vor apărea în pagina rezultate găsite, dar utilizatorii vor fi notificați de acest lucru, în dreptul prețului fiind afișat mesajul „ANUNȚ EXPIRAT”, în acest caz anunțul respectiv nu se poate accesa.

Dacă anunțul este memorat în browser de către utilizator și este accesat, utilizatorul va fi informat dacă anunțul respectiv a expirat, astfel nu va putea să vizualizeze pagina de detalii a produsul vândut.

Fig. III.14. Pagina rezultate găsite

Pe toate paginile aplicației se va găsi secțiunea de subsol sau footer cum mai este numit, exemplificat în figura III.15. În secțiunea prezenta se găsesc informații despre aplicație, top 5 vizualizări anunțuri, meniul cu paginile utile și formularul pentru abonare la noutăți. De asemenea în partea de jos a secțiunii se mai găsesc legături către rețelele de socializare în care aplicația este prezentă.

Exemplificat în figura de mai jos, în partea dreaptă se găsește butonul care are ca scop să trimită utilizatorul în antetul paginii, la fel ca secțiunea footer, acesta se va găsi pe toate paginile aplicației.

.

Fig. III.15. Secțiunea footer a aplicației

Pagina Anunțuri ilustrată în figura III.16, este pagina unde sunt afișate toate anunțurile disponibile publicate în cadrul aplicației.

Accesul pe această pagină se face atât din meniul principal, selectând meniul Anunțuri, cât și de pe pagina principală, apăsând butonul „Vezi toate anunțurile”.

Formularul de căutare prezent pe această pagină este structurat la fel ca cel de pe pagina rezultate găsite, astfel utilizatorii au posibilitatea de a filtra anunțurile și pe această pagină, după categorie, județ, producător, garanție, starea produsului său prin cuvinte cheie de căutare.

Pe pagina Anunțuri se vor afișa doar anunțurile disponibile, astfel anunțurile care au expirat nu se vor regăsi. Toate anunțurile sunt dispuse la fel ca în pagina principală, sub forma tabelara, pe patru coloane.

În momentul în care vor fi afișate mai mult de 12 anunțuri, se va putea trece pe următoarea pagină, prin folosirea secțiunii de paginație care se afla în partea de subsol a anunțurilor publicate.

Fig. III.16. Pagina Anunțuri

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.17. Toate elemente prezente în această pagină au fost păstrate pe toate dispozitivele, indiferent de rezoluția lor.

Fig. III.17. 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 toți utilizatorii 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 anunțurilor, folosind săgețile de direcționare pentru navigare la anunțul precedent se va folosi săgeata <, iar pentru navigare la anunțul următor săgeata >. Exista însă și posibilitatea de a merge pe pagina de Anunțuri prezentată în figura III.16., unde utilizatorii au acces la formularul prezent.

Pe pagina de detalii este prezentat titlul produsului vândut, categoria din care face parte, imaginea produsului, data ultimei modificări dar și codul unic al anunțului, acesta fiind necesar de exemplu în cazul unor reclamații ale utilizatorilor referitoare la incorectitudinea datelor afișate în anunțul respectiv.

De asemenea în această pagină sunt prezente secțiuni cum ar fi descrierea produsului, detalii ale produsului și detalii vânzător.

În secțiunea detalii produs, utilizatorul este informat de starea produsului, dacă produsul se afla în garanție sau nu, numele producătorului și modelul produsului, numărul de vizualizări, de asemenea se pot informa cu referire la nota acordată de alți utilizatori și la rândul lor pot acorda o notă produsului.

În aceeași secțiune utilizatorii pot observa dată la care a fost adăugat anunțului, dar și dată la care acesta expiră, orice anunț expirând după o perioadă de 30 de zile.

Secțiunea de detalii vânzător prezintă datele de contact ale acestuia, prețul produsului vândut dar și modalitățile prin care acesta dorește să livreze produsul, astfel existând trei metode: Personal, Poștă sau Curier rapid.

Utilizatorii care doresc să trimită reclamații administratorului cu privire la neregularități găsite în cadrul aplicației sau au o nelămurire, pot completa formularul de contact sau pot apela la numărul de telefon aflat pe pagina Contact ilustrată în figura III.18, care se găsește în meniul secundar aflat în footer-ul aplicației, prezent pe toate paginile.

De asemenea pagina Contact mai conține o hartă Google Maps, marcat pe aceasta fiind sediul central al firmei.

.

Fig. III.18. Pagina de Contact din cadrul aplicației

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 anunț este înregistrarea, în cazul în care utilizatorul are un cont creat acesta va trebui să se autentifice.

Utilizatorul va trebui să acceseze pagina Înregistrare din meniul principal, dacă dorește să-și creeze cont. În momentul în care a ajuns pe această pagină este necesară completarea formularului de înregistrare care se poate observa în figura III.19.

Toate câmpurile prezente sunt obligatorii, utilizatorii trebuie să completeze formularul alegând nume de utilizare, e-mail, parolă și să confirme parola aleasă. De asemenea este necesar ca utilizatorii să citească în prealabil pagina Termeni și Condiții, dacă sunt de acord cu aceștia vor selecta căsuța respectivă din formularul de înregistrare.

De exemplu există posibilitatea de a alege un nume de utilizator existent, dacă acest lucru se întâmplă, utilizatorul va primi un mesaj de avertizare și va fi rugat să aleagă un alt nume după cum se poate observa în figura de mai jos.

După crearea contului, utilizatorul va fi menținut că autentificat și va putea parcurge operațiile de adăugare a anunțului dorit.

.

Fig. III.19. Formular de înregistrare

În cazul în care utilizatorul și-a creat cont și a terminat sesiunea, acesta se poate autentifica folosind formularul de autentificare ilustrat în figura III.20, din pagina Autentificare a meniului principal.

Autentificare utilizatorilor se face completând două câmpuri, utilizator și parola. Spre exemplu dacă se introduc date eronate, utilizatorul va fi avertizat de acest fapt printr-un mesaj că cel din imaginea de mai jos. Revenirea la formularul inițial făcându-se accesând link-ul sugerat pentru continuare.

În cazul în care un utilizator a uitat parola de autentificare în cadrul aplicației, are posibilitatea de o reseta urmând link-ul „Ai uitat parola?”. Utilizatorul va fi redirecționat către un alt formular unde va fi necesară completarea numelui de utilizator și a adresei de e-mail.

Există posibilitatea ca utilizatorul să fie direcționat către formularul de întregistrare, în cazul în care ajunge accidental pe pagina Autentificare sau nu are un cont creat.

Fig. III.20. Formular autentificare

După ce autentificarea a avut succes, paginile Autentificare și Înregistrare din meniul principal nu vor mai fi afișate, iar în partea superioară a noului meniu va fi afișată bară de administrare a contului utilizatorului autentificat, după cum se poate observa în figura III.21.

Fig. III.21. Bara administrare cont și noul meniu

În momentul în care utilizatorul este autentificat, acesta poate avea acces la mai multe facilități. Una dintre acestea este posibilitatea de a-și edita profilul, spre exemplu acesta poate să schimbe parola curentă sau să schimbe interfața de administrare a contului.

O altă operație posibilă este adăugarea anunțului dorit, acest lucru este posibil accesând pagina „Adaugă anunț” din meniul principal.

Pentru publicarea anunțului este nevoie ca utilizatorul să fie la curent cu termenii și condițiile site-ului prezenți în pagina Termeni și Condiții din meniul secundar al aplicației, prezentați și la crearea contului.

Publicarea anunțului se face completând formularul de adăugare anunț, existând câmpuri obligatorii care necesită completate, acestea sunt: titlu, descrierea produsului în maxim 500 de caractere, preț, adresa de e-mail pentru contact, număr telefon, de asemenea mai este necesar și completarea câmpurilor localitate, județ, modalitate de livrare, stare produs și garanție.

După completarea formularului și trimiterea acestuia, utilizatorul va fi notificat printr-un element grafic în meniul interfeței de administrare, ca cel din figura III.22, de faptul că anunțul urmează să fie aprobat de administratori.

Fig. III.22. Element grafic pentru notificare

A treia operație posibilă pentru utilizatorul înregistrat și autentificat este posibilitatea de a edita, șterge sau reactualiza anunțurile adăugate. Acest proces este posibil accesând link-ul „Anunțurile mele” din bară de administrare a contului. Mai jos este exemplificata în figura III.23, interfața utilizatorului și tabelul anunțurilor adăugate.

În prima coloană din tabel, este afișată dată la care anunțul urmează să expire, în următoarele coloane sunt afișate titlurile anunțurilor, dată la care a fost adăugat, nota obținută la anunț de la toți utilizatorii și numărul de vizualizări a anunțului

.

Fig. III.23. Interfața utilizatorului și tabelul anunțurilor adăugate

După publicarea a cel puțin unui anunț de către un vânzător, utilizatorii pot accesa pagina vânzătorului, acest lucru fiind posibil din pagina de detalii a anunțului.

Un vânzător poate să reprezinte un interes pentru toți utilizatorii datorită produselor vândute sau datorită localității în care se afla, din această cauză persoanele care doresc pot accesa pagina utilizatorului ilustrată în figura III.24, și pot vizualiza toate produsele adăugate de acesta.

După cum se poate observa în figură, pe această pagină sunt afișate inclusiv produsele care au expirat, acestea reprezentând produse care nu au fost șterse de vânzător sau nu au fost reactualizate de acesta.

Fig. III.24. Pagina anunțurile utilizatorului

III.4. Interfața de administrare

Interfața de administrare sau back-end-ul aplicației este accesibil administratorului prin intermediul căruia se realizează 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 interfața de administrare se face printr-un formular de autentificare, pe baza numelui de utilizator și pe baza unei parole. Administratorul se poate autentifica fie folosind formularul prezent pe interfața utilizator fie accesând adresa www.numesite.ro/wp-admin, astfel având acces la formularul de autentificare a platformei WordPress.

Administrarea aplicației FrameCiS, este realizată în prezent de un administrator cu drepturi depline, care are posibilitatea de a atribui drepturi oricărui utilizator înregistrat. Astfel, pentru a putea gestiona o aplicație complexă precum un site de anunțuri, există posibilitatea de a adăuga noi roluri și atribuții utilizatorilor care vor face parte din echipa de administrare.

La fel ca interfața utilizator, interfața de administrare este responsive după cum se poate observa în figura III.25, astfel adminstrarea aplicației este posibilă într-un mod intuitiv de pe orice dispozitiv, fie că vorbim de tablete sau de telefoane mobile inteligente.

Fig. III.25. Diverse pagini a interfeței de administrare pe diferite dispozitive

O dată ce administratorul este autentificat, acesta are posibilitate de a naviga în meniul prezent în partea stângă, unde se găsesc componentele pentru administrarea aplicației. Componentele prezente în meniul interfeței de administrare a aplicației FrameCiS sunt prezentate în partea stângă din figura III.26, și reprezintă o parte esențială în gestionarea aplicației.

Meniul este complex, astfel fiecare componentă aparținând meniului are mai multe subcomponente ce fac posibilă administrarea tuturor elementelor cheie ce aparțin aplicației.

Fig. III.26. Interfața de administrare și meniul aferent

În cele ce urmează voi descrie componentele importante care alcătuiesc meniul interfeței de administrare.

Panoul de control (Dashboard) – pagina de rapoarte și prima componentă care este afișată când se accesează interfața, administratorul are acces la informațiile anunțurilor publicate, este informat cu privire la numărul paginilor create și la numărul total de anunțuri adăugate;

Media – pagina de administrare a imaginilor, administratorul are posibilitatea să editeze sau să șteargă anumite imagini care au fost publicate de vânzători;

Pagini (Pages) – este componenta care afișează toate paginile create, administratorul având acces deplin asupra lor, putând crea pagini noi, edita sau șterge;

Anunțuri – componeta de administrare a anuțurilor ilustrată în figura III.27, este componenta care conține anunțurile adăugate de utilizatori. Administratorul este notificat cu privire la faptul că un anunț a fost adăugat, printr-un element grafic și așteaptă aprobare.

Înainte de a fi aprobat, anunțul poate fi vizualizat, în cazul în care nu corespunde cerințelor specificate în termenii și condițiile site-ului acesta poate fi șters, astfel nu va fi publicat.

De asemenea administratorul are acces deplin asupra tuturor anunțurilor, acestea putând fi editate, previzualizate sau șterse.

În subcomponenta Categorii anunțuri, administratorul poate adăuga, edita sau șterge anumite categorii, care vor fi publice utilizatorilor

.

Fig. III.27. Componenta de administrare a anunțurilor

Aspect (Appearance) – componentă esențială pentru editarea elementelor care pot fi vizualizate în interfața utilizator. De exemplu se poate seta imaginea sau culoarea de fundal a aplicației, se pot adăuga, edita sau șterge pagini din cele două meniuri;

Module (Plugins) – în această componentă administratorul poate adăuga, activa și dezactiva modulele necesare;

Utilizatori (Users) – componentă care cuprinde toți utilizatorii care au cont pe site, administratorul poate edita orice utilizator care și-a creat cont, astfel în viitor se poate crea și atribui anumite roluri unor anumiți utilizatori care vor face parte din echipa de administrare;

Setări (Settings) – administratorul poate acționa asupra foarte multor setări, spre exemplu setarea numelui aplicației, rolul implicit a membrilor înregistrați sau formatul de data afișat în interfața utilizator.

Concluzii

Aplicația prezentată în această lucrare, constituie o soluție actuală și viabilă pentru implementarea unui site de anunțuri, ce are ca obiectiv comercializarea de produse foto-video, adresându-se tuturor persoanelor, indiferent de nivelul de cunoștințe în navigarea pe Internet, totul fiind intuitiv.

De asemenea, aplicația este web responsive, iar acest lucru reprezintă o caracteristică importantă, astfel aplicația se adaptează la rezoluția dispozitivului de pe care este accesată, oferind astfel utilizatorilor o navigare plăcută, o altă caracteristică ce definește aplicația este compatibilatea acesteia cu toate browserele populare.

Privind partea de administrare, gestionarea conținutului se realizează într-un mod foarte simplu, aplicația fiind dezvoltată pe platforma WordPress, oferă acces la toate componentele din meniul de administrare, astfel se pot face operații de editare, ștergere, adăugare a diferitelor elemente.

Prin faptul că utilizatorii pot adăuga anunțuri foarte ușor de pe orice dispozitiv conectat la o rețea de Internet sau prin posibilitățile multiple de acționare a utilizatorilor asupra conținutului aplicației dar și prin caracteristicile descrise mai sus fac ca aplicația dezvoltată să fie utilă.

Scopul aplicației prezentate a fost atins, acela de a oferi utilizatorilor un mediu plăcut și accesibil pentru comercializarea de produse foto-video.

Aplicației realizate i se pot aduce posibile dezvoltări precum implementarea unui sistem de promovare a anunțurilor contra cost, aceasta extindere fiind sustenabilă din punct de vedere financiar pe termen lung și posibilitatea de a contacta vânzătorul prin mesaje interne în cadrul aplicație. Această ultimă dezvoltare fiind în primul rând benefică pentru utilizatorii care doresc de exemplu să afle detalii legate de produsul vândut, fiind o alternativă de contact pe lângă numărul de telefon și adresa de e-mail.

Alte dezvoltări posibile ar cuprinde adăugarea de galerie foto în cadrul anunțurilor, astfel fiecare vânzător având posibilitatea de a adăuga mai multe fotografii ale produsul vândut și implementarea unui blog, ceea ce presupune că utilizatorii se pot informa cu privire la recenziile anumitor produse spre exemplu.

O aplicație complexă de tip anunțuri, necesită o dezvoltare continuă din punct de vedere al promovării online, un instrument puternic în zilele noastre sunt rețelele de socializare, iar o astfel de aplicație lansată online corelat cu dezvoltările posibile, poate să genereze anumite venituri.

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] J. Osborn, J. Smith & AGI Creative Team, Web Desigh with HTML and CSS, Digital Classroom, Wiley Publishing Inc., Indianapois, Indiana, 2011

[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, consultat la 2.06.2015

[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, consultat la 9.06.2015