Aplicatie Web Responsiva

Cuprins

Introducere

Completeza si capitol !!CAPITOL I. Despre responsivitate și ERP

I.1 Despre responsivitate

I.1.1 Avantajele unui design responsiv

I.2 Enterprise resource planning ( ERP )

I.2.1 Caracteristici

II. Tehnologii utilizate

II. 1 PHP

II.1.1 Tipuri de date interne

II. 2 Zend Framework 2

II. 3 JavaScript

II. 3. 1 Tipuri de date

II. 4 jQuery

II. 4. 1 Caracteristici

II. 5 JSON

II. 5.1 Tipuri de date

II. 5.2 Funcții

II. 6 HTML5

II. 6. 1 Noile funcții HTML5

II. 7 CSS3

II. 8 MySQL

III. Proiectarea și implementare aplicației

III. 1 Proiectarea aplicației

III. 2 Implementarea aplicației

Concluzii

Bibliografie

Bibliografie

[1] Programmer’s Reference Guide of Zend Framework 2, consultat la 12.05.2014

http://framework.zend.com/manual/2.0/en/index.html

[2] Getting started: A skeleton application, consultat la 18.03.2014

https://zf2.readthedocs.org/en/latest/user-guide/skeleton-application.html

[3] Design responsive cu Bootstrap 2.3.2, consultat la 10.12.2013

http://getbootstrap.com/getting-started/

[4] Responsive web design, consultat la 14.11. 2013

http://en.wikipedia.org/wiki/Responsive_web_design/

[5] PHP 5 Tutorial, consultat la 23.05.2014

http://www.w3schools.com/PHP/

[6] HTML5 Introduction, consultat la 11.01.2014

http://www.w3schools.com/html/html5_intro.asp

[7] CSS3, consultat la 12.04.2014

http://www.css3.info/

[8] CSS3 Introduction, consultat la 29.01.2014

http://www.w3schools.com/css/css3_intro.asp

[9] PHP MySQL Introduction, consultat la 13.03.2014

http://www.w3schools.com/php/php_mysql_intro.asp

[10] SQL Tutorial, consultat la 13.03.2014

http://www.w3schools.com/sql/

=== lucare ===

PROIECT DE DIPLOMĂ

Aplicație web responsivă

Cuprins

Introducere

Completeza si capitol !!CAPITOL I. Despre responsivitate și ERP

I.1 Despre responsivitate

I.1.1 Avantajele unui design responsiv

I.2 Enterprise resource planning ( ERP )

I.2.1 Caracteristici

II. Tehnologii utilizate

II. 1 PHP

II.1.1 Tipuri de date interne

II. 2 Zend Framework 2

II. 3 JavaScript

II. 3. 1 Tipuri de date

II. 4 jQuery

II. 4. 1 Caracteristici

II. 5 JSON

II. 5.1 Tipuri de date

II. 5.2 Funcții

II. 6 HTML5

II. 6. 1 Noile funcții HTML5

II. 7 CSS3

II. 8 MySQL

III. Proiectarea și implementare aplicației

III. 1 Proiectarea aplicației

III. 2 Implementarea aplicației

Concluzii

Bibliografie

Introducere

Scopul principal al acestei aplicații este să asigure transparența datelor în cadrul unei companii și să faciliteze accesul la orice tip de informație utilă în desfășurarea activității companiei.

Aplicația este responsivă deoarece are un design responsiv, asta înseamnă că are o experiență optimă de vizionare – conținut ușor de citit, navigare ușoară, cu un minim de derulare a paginii, mai mult în jos, fără nevoia de a derula pagina și în stânga sau dreapta.

Aplicațiile ERP, sunt utilizate la nivel global, deoarece se pot gestiona în mod eficient proiectele, favorizează în mod holistic luarea deciziilor la nivel critic în dezvoltarea și/sau procesul de fabricație, dar și o comunicare mai rapidă și eficientă în cadrul companiilor, reducând anumite costuri.

Am decis să creez această aplicație deoarece o vad folositoare în zilele noastre, cand timpul parcă este insuficient și toată lumea este în continuă mișcare. Fiind responsivă se poate accesa de pe orice dispozitiv, iar fiind un ERP, oferă posibilitatea de a rămâne mereu conectat la noile informații din cadrul companiei care folosește această aplicație.

Am construit aplicația utilizând Zend framework 2, datorita securității, performanței și stabilității lui. Dispune de o gamă largă de module, funcții și librării complexe, facilitând creearea de aplicații web dinamice, puternice, stabile și totodata securizate.

Pe parcursul lucrării voi detalia pașii ce au fost urmați, de la motivarea alegerii temei, până la implementarea propriu-zisă.

În prima parte a lucrării – Capitolul I – sunt prezentate aspectele unei aplicații responsive cât și ce înseamnă un ERP ( Enterprise Resource Planning sau planificarea resurselor întreprinderii ).

În partea a doua – Capitolul II – am descris tehnologiile folosite, exemple de structuri și scheme bloc reprezentative pentru întelegerea simplă și rapidă.

În partea a treia – Capitolul III – am descris proiectarea și implementarea aplicației, am atașat scheme bloc, blocuri de cod importante, dar și capturi de ecran pentru a observa mai ușor designul responsiv din cadrul aplicației ERP.

Capitolul I

Despre responsivitate și ERP

I. 1. Despre responsivitate

O aplicație(pagină web) este responsivă când are un design responsiv. Asta înseamnă ca designul unei pagini web si funcționalitatea acesteia trebuie să se adapteze la mărimea rezoluției, ecranului de pe care este deschis. Acest lucru se obține folosind o combinație de structuri, imagini și folosirea inteligentă a CSS(Cascading Style Sheet).

În momentul în care utilizatorul trece de la vizualizarea pe un laptop, la un smartphone sau tabletă, website-ul ar trebui să adapteze rezoluția, mărimea imaginilor și tehnologiile folosite.

Cu alte cuvinte, website-ul ar trebui să aibe tehnologia necesară pentru a se conforma preferințelor utilizatorului. Acest lucru elimină nevoia pentru un design și o structură nouă pentru fiecare dispozitiv existent pe piață.

În România sunt utilizate aproximativ 5.5 milioane smartphone-uri, număr ce va crește la aproximativ 7.5 milioane până la sfarșitul lui 2014. 91% din utilizatorii de smartphone-uri le au la indemână în orice clipă, verificându-le de peste 100 de ori pe zi, în medie.

Dintre toți utilizatorii de internet, 25% nu folosesc un laptop sau PC pentru a accesa pagini web sau pentru a-și verifica email-ul.

Se estimează ca până la sfârșitul lui 2015, folosirea internetului mobil va depași conexiunile de pe calculatoarele personale.

Un tabel cu procentajul dispozitivelor care s-au conectat la internet pe anul 2013:

I. 1. 1. Avantajele unui design responsiv

Reducerea costurilor, nefiind nevoie de administrarea mai multor pagini.

Eficienta, fiind mai ușor să creezi o aplicație, decât una pentru fiecare platformă.

Adresarea către un segment destul de mare, deoarece fără design responsiv poți să pierzi până la 30% din clienți.

Toate vizualizările vin către același link, fiind foarte bine din punct de vedere SEO(optimizarea poziționării la căutare, din engleză Search Engine Optimization).

I. 2. Enterprise resource planning ( ERP )

În limba română, planificarea resurselor întreprinderii este un instrument software ce facilitează integrarea tuturor informațiilor dintr-o organizație într-o platformă unică.

Scopul acestui tip de aplicație, este sa asigure o transparență a datelor în cadrul unei organizații și să faciliteze accesul la orice tip de informație utilă în desfășurarea activității.

Istoria sistemelor ERP datează din anii 1960 cand acest tip de aplicație software era folosit cu preponderență pentru asistarea procesului de producție. Primul produs de acest tip a fost MRP (Material Resource Planning).

Deși utile in activitatea de producție, aceste aplicații nu iși extindeau functionalitățile și spre alte zone de interes pentru o întreprindere precum contabilitate, resurse umane, vânzări.

Incepand cu anii ’90, sistemele ERP au început să ia forma aplicațiilor actuale. Deși dupa apariția MRP funcționalitățile acestui tip de programe au inceput să se extindă, ERP-ul actual a luat ființă în momentul în care informațiile au putut fi centralizate într-o platformă comună și funcționalitățile sale au fost integrate.

Astăzi, sistemele ERP fac un nou pas in dezvoltarea lor prin utilizarea internetului pentru eficientizarea funcționalităților. Clienții de la mii de kilometri distantă pot avea acces la stadiul propriei comenzi sau la stocurile companiei furnizoare prin integrarea facilităților ERP cu aplicațiile WEB.

I. 2. 1. Caracteristici:

Organizează procesele și activitățile de afaceri punând rapid la dispoziție informații concrete și concise

Interfață modernă de utilizare, fiind mai ușoara operarea, productivitatea va crește

Compania va avea de câștigat prin utilizarea aplicației, scutind resursele și timpul, se reduc costurile

Aspectele problematice, dar și posibilitățile de dezvoltare vor fi mai ușor de identificat și de acționat ascupra lor

CAPITOLUL II

Tehnologii utilizate

II. 1. PHP

PHP este un limbaj de programare utilizat pentru crearea de pagini web dinamice, folosit pe o scară largă în dezvolatarea paginilor și aplicațiilor web.

Poate fi folosit împreună cu codul HTML, dar și în linie de comandă începând cu versiunea 4.3.0, permițând crearea de aplicații independente.

Este unul din cele mai importante limbaje de programare web open-source și server-side, acesta regăsindu-se pentru majoritatea web serverelor. Statistic, PHP este instalat în peste 20 de milioane de pagini web și in peste 1 milion de servere web.

În anul 2004, a fost lansată versiunea PHP 5, cu Zend Engine II, ce aduce o programare orientată pe obiecte mai pronunțată și multe caracteristici acestui tip de programare. Printre noile caracteristici regăsim: supportul îmbunătațit pentru programarea orientată pe obiecte; introduce extensia PDO – PHP Data Objects, care definește o modalitate facilă și consistentă de accesare a diferitelor baze de date; performanță îmbunatățită; MySQL, MSSQL au un suport îmbunătățit; suport nativ pentru SQLite; controlol erorilor prin tratarea de excepții.

PHP, este probabil cel mai folosit limbaj de programare server-side, popularitatea acestuia se datorează următoarelor caracteristici:

Familiaritatea – limbajul are o sintaxă ușoară, combinând alte sintaxe populare din limbajele C sau Perl

Simplitatea – nu ai nevoie să introduci biblioteci sau directive pentru compilare

Eficiența – se folosește de mecanisme de alocare a resurselor, foarte necesare unui mediu multi-utilizator

Securitatea – sunt puse la dispoziția programatorului, un set flexibil de măsuri de siguranță

Gratuitate – probabil cea mai inportantă caracteristică, determinând astfel adaptarea rapidă la nevoile web-ului, eficientizarea și securizarea codului.

PHP este simplu de utilizat, fiind un limbaj de programare structurat, ca și C-ul, Perl-ul sau începând de la versiunea 5 chiar Java, sintaxa limbajului fiind o combinație a celor trei.

Posibilitatea de a dezvolta o aplicație de sine stătătoare este realizabilă datorită modularității sale, de exemplu alături de PHP-GTK sau în linie de comandă la fel ca Perl sau Python. O facilitate importantă a acestui limbaj este conlucrarea cu majoritatea bazelor de date relaționale(MySQL, Oracle, DB2, PostgreSQL etc.)

PHP poate rula pe majoritatea sistemelor de operare, poate interacționa cu majoritatea serverelor web, unde codul este interpretat de către serverul web și generează cod HTML care la rândul lui este interpretat de browser.

II. 1. 1. Tipuri de date interne

Boolean – valori logice tip adevărat sau false, similare cu cele din C++ sau Perl

Integer – numere întregi (în baza 10, 2 sau 16). Valoarea maximă depinde de sistem și de tipul de integer. Tipul poate fi "signed" sau "unsigned", adica dependent de semnul + sau – sau independent de acestea. Valorile pentru integer unsigned sunt mai mari decât cele pentru signed. Sistemele pe 32 bits pot crea numere întregi între -2147483648 și 2147483647( 2^31-1 ). Maximul pentru sisteme pe 64 bits este 9223372036854775807

Float – cunoscute ca numere reale. Valorile maxime sunt de asemenea dependete de platform, in general cu un maxim de ~1.8e308 cu o precizie de 14 zecimale dupa virgula (formatul 64 bits IEEE)

String – șiruri de caractere. Înainte de PHP6, un caracter era echivalent cu un byte. Nu există limitări pentru lungimea unui șir, în afara memoriei alocate PHP

Array – în PHP un array este un tip de data care conține un grup de elemente. Fiecare element are un indice intern în grup, iar fiecărui indice îi corespunde o valoare – elementul în sine. Un astfel de grup poate fi folosit ca o simulare pentru diverse situații matematice precum vectori, serii, dicționare de elemente, liste ordonate, matrici sau matrici de matrici. Indicii și valorile unui grup pot fi orice tip de data interna PHP (cu excepții: obiectele, resursele și NULL nu pot fi indici)

Obiectele – O clasa este o colecție de proprietăți și funcții având o logică comună. Obiectele sunt instanțe ale unei clase, în care proprietățile obiectului primesc valori specifice POO – programarea orientată pe obiecte

Resursele – aceastea sunt variabile speciale care conțin legături cu resurse externe PHP. De exemplu, conexiunea cu o bază de date este o resursa deschisă și menținută cu ajutorul unor funcții special definite pentru aceasta muncă

NULL – este un tip special de dată, care semnifică că variabila respectivă nu a fost definită și că nu are valoare sau valoarea e necunoscută

Aplicața compilată are trei componente( fig. II.1 ):

Browser-ul ( internal browser )

Spațiul intern de depozitare ( internal storage )

Motorul PHP ( PHP engine )

Browser-ul intern lasă utilizatorul să navigheze pe pagina web gata compilată, motorul de interpretare HTML este ori Chromium ori Trident. Orice pagina HTML care este compatibilă cu Google Chrome sau Microsoft Internet Explorer ar trebui să fie interpretată cu succes de către browser și sa funcționeze normal.

Spațiul intern de depozitare conține fișiere care au fost comprimate și codificate de către ExeOutput pentru PHP. Acesta mai gestionează o depozit virtual în memorie, unde fișierele pot și despachetate.

Spațiul intern de depozitare poate fi accesat doar de către browser și motorul PHP.

Aplicația este contruită în PHP, Zend Framework 2 fiind o librărie complexă, stabilă cu funcții PHP și folosește programarea orientată pe obiecte. Cod sursă de la funcții importante se găsesc în Capitolul III la implementarea aplicației.

II. 2. Zend Framework 2

Zend Framework 2 este o arhitectură( framework ) open source pentru dezvoltarea de aplicații web și servicii, folosind PHP 5.3+. Zend Framework 2 folosește codul programării orientate pe obiecte 100% și utilizează majoritatea caracterisicilor PHP5.3, namespace, late static binding, funcții lambda.

Zend Framework 2 a evoluat de la Zend Framework 1, o arhitectură PHP de succes cu peste 15 milioane de descărcări.

Componenta structurală Zend Framework 2 este unică, fiecare componentă este concepută cu cateva dependențe pe alte componente. Zend Framework 2 urmează solida programare orientată pe obiecte și principiile ei. Această arhitectură lasă dezvoltatorii să folosească ce componente vor, se numește ”use-at-will” ( folosește după nevoi ).

Zend Framework 2 oferă o mare performanță în implementarea MVC ( Model View Controller ), o captare a bazei de date ușor de folosit, componente pentru formularele de înregistrare care implică HTML5 form rendering, validări și filtre astfel încât dezvoltatorii pot să le folosească toate acestea într-o singura componentă orientată pe obiecte.

O altă componentă, cum ar fi Zend\Authentication si Zend\Acl, oferă autentificarea utilizatorilor împotriva autorizării comune de acreditare( common credential ).

Model-View-Controller, este din ce în ce mai mult un standard în dezvoltarea paginilor web moderne, și pentru un motiv bun, codul majorității aplicațiilor web intră în cele trei categorii:

Prezentare

Logica de afaceri

Acces la date

Tiparul MVC ( Model-View-Controller ) de care vorbește toată lumea, de ce este atât de important? Pentru că modelează aceste referințe foarte bine.

Foarte mulți dezvoltatori au găsit aceste referințe bine definite, indispensabile pentru organizarea codului, în special când lucrează unul sau mai mulți dezvoltatori la o aplicație.

Figura nr. II.2. – Principiul MVC

Model – Această parte a aplicației se ocupă de rutinele accesului la date și logica de afaceri. Mai exact interacțiunea cu baza de date

View – definește ceea ce este prezentat utilizatorului. De obicei controller-ul transmite date fiecărui view pentru ca acesta să fie interpretat într-un anume format. View-urile vor colecta date de la user, aici se va regăsi cod HTML într-o aplicație MVC

Controller – Acesta leagă întregul tipar MVC, adunându-l. Manipulează modelele, decide care view este folosit, bazat pe interogările utilizatorului și alți factori, transmite date de care este nevoie in view sau predă controlul altui controller.

Zend framework 2 folosește MVC pentru o mai bună gestionare a fișierelor și un lucru în echipă mai eficient. În figura nr. II.2. este prezentată o schemă bloc, a principiului de funcționare MVC.

II. 3. JavaScript

JavaScript este un limbaj de programare orientat pe obiecte, fiind bazat pe un ocncept al prototipurilor.

Este folosit mai ales pentru introducerea unor funcționalități în paginile web, codul Javascript din aceste pagini fiind rulat de către browser. Limbajul este binecunoscut pentru folosirea sa în construirea siturilor web, dar este folosit și pentru acesul la obiecte încastrate (embedded objects) în alte aplicații.

A fost dezvoltat inițial de către Brendan Eich de la Netscape Communications Corporation sub numele de Mocha, apoi LiveScript, și denumit în final JavaScript.

Cea mai des întâlnită utilizare a JavaScript este în scriptarea paginilor web. Programatorii web pot îngloba în paginile HTML script-uri pentru diverse activități cum ar fi verificarea datelor introduse de utilizatori sau crearea de meniuri și alte efecte animate.

Browserele țin în memoria lor, o pagină web sub forma unui arbore de obiecte și pun la dispoziție aceste obiecte script-urilor JavaScript, care le pot citi și manipula. Arborele de obiecte poartă numele de Document Object Model sau DOM.

Una dintre tehnicile de construire a paginilor web tot mai întâlnite în ultimul timp este AJAX, abreviere de la „Asynchronous JavaScript and XML”. Această tehnică constă în executarea de cereri HTTP în fundal, fără a reîncărca toată pagina web, actualizarea doar anumitor porțiuni ale paginii, manipulând DOM-ului paginii. Tehnica AJAX permite construirea unor interfețe web cu timp de răspuns mic, întrucît operația (costisitoare ca timp) de încărcare a unei pagini HTML complete este în mare parte eliminată. Această funcționalitate am folosit-o la transmiterea pachetelor mici de date către un fițier php care la rândul său comunică cu baza de date.

În aplicația mea, JavaScript am folosit pentru încărcarea porțiunilor dintr-o paginiă fără ca utilizatorul săfie nevoit să reîncarce o pagina pentru observarea schimbărilor sau modificărilor care le execută, în pagina respectivă.

II. 3. 1. Tipuri de date

Undefined – aceasta valoare este atribuită variabilelor neinițializate și în context boolean, este considerată o valoare de fals

NULL – față de „undefined” acesta indică faptul că ceva a fost declarat, dar a fost definit pentru a fi gol

String – șir de caractere, se definește intre ghilimele simple sau duble

Boolean – se folosesc termenii „true” și „false” pentru a descrie valorile

Array – un tablou, o matrice, este folosit pentru a stoca valori de date indexate pe chei întregi. Ex: var myArray = [ ]; //Variabila myArray este o matrice

Date calendaristice – este un obiect Data, ce stochează numărul de milisecunde începănd cu data de 1970-01-01 00:00:00 UT, se mai spune și „timestamp”. Ex: new Date() // creează o instanță reprezentând data curentă

Variabile – in JavaScript variabilele nu au un tip standard, orice valoare poate fi stocata în variabilă. Ex: var x = 0; // x este o variabilă

Mesaje de eroare – acestea pot fi personalizate folosind clasa Error. Ex: throw new Error(” mesaj ”);

Obiectul Math – conține diverse constante și funcții matematice. Toate unghiurile sunt exprimate in radiani, nu în grade

Concatenarea – se face cu operatorul ” + ”, iar pentru variabile numerice este adunare

II. 4. jQuery

jQuery este un soft gratis, open source.

Această platformă de dezvoltare JavaScript, a fost concepută pentru a ușura și îmbunătăți procesele precum traversarea arborelui DOM în HTML

jQuery a fost gândit să fie cât mai mic posibil, disponibil în toate versiunile de browsere importante existente.

II. 4. 1. Caracteristici

selecții de elemente în arborele DOM folosind propriul motor de selecții open source Sizzle, un proiect născut din jQuery

parcurgere și modificarea arborelui DOM

înregistrarea și modificarea evenimentelor din browser

manipularea elementelor CSS

efecte și animații

cereri tip AJAX

II. 5. JSON

JSON (JavaScript Object Notation) este un standard bazat pe text, ușor de utilizat proiectat pentru a facilita schimbul de date între diferite limbaje de programare. Formatul JSON este independent de limbaj, fiind existente interpretoare pentru mai multe limbaje de programare.

JSON este derivat din limbajul JavaScript pentru a reprezenta structuri de date simple și tablouri asociative, numite obiecte. Este adesea folosit pentru serializarea și transmiterea datelor structurate pe o conexiune de rețea, precum și pentru a transmite date între un server și aplicații web, servind ca o alternativă la XML.

II. 5. 1. Tipuri de date

Number – număr decimal, poate conține parte fracționară și exponențială

String – șir de caractere, o reprezentare de zero sau mai multe caractere Unicode

Boolean – valorile true sau false

Array – o listă ordonată de zero sau mai multe valori, se definesc intre paranteze drepte și elementele se despart cu virgulă

Obiect – o listă neordonată, o matrice asociativă. Sunt delimitate de acolade și se definesc între ele cu ” : ”, reprezentând cheile, în stânga, valorile în dreapta

II. 5. 2. Funcții

json_decode – Convertește într-o variabilă un șir reprezentat JSON

json_encode – Întoarce o reprezentare JSON pentru valoarea dată

json_last_error_msg – Întoarce șirul de eroare a ultimului apel json_encode() sau json_decode()

json_last_error – Întoarce ultima eroare ce a survenit

Am utilizat aceste funcții la trimiterea și primirea datelor, respectiv matricilor de date(array), de la o pagină altă PHP, care la rândul său interoghează baza de date, furnizându-mi informațiile cerute.

Funcția json_decode, decodează datele transmise cu JSON în PHP furnizând exact aceeași matrice, iar json_encode transformă datele pentru a putea fi preluate și prelucrate de JSON.

Am utilizat aceste funcții în mai multe părți, la input-urile de tip dropdown pentru(select) pentru a popula persoanele în funcție de proiectul selectat fară a fi nevoie de reîncărcarea paginii și la popularea cu date din urma unui click pe calendar.

În figura nr. II.3 este prezentată o funcție care transmite o matrice JSON cu informații , din baza de date.

Figura nr. II.3 – Returnarea unei matrici JSON

II. 6. HTML5

HTML5 este ultima versiune a limbajului HTML. Versiunea precedentă este HTML 4.01, aparută in 1999, dar internetul s-a modificat mult de atunci. Acesta a fost conceput pentru a înlocui HTML4, XHTML și HTML DOM Level 2.

Afost creat special să aducă conținut mare de informație fără necesitatea unui plugin adițional. Versiunea curentă aduce absolut tot, de la animații la grafice, de la muzică la filme și poate totodata să fie folosit la creearea de aplicații web complexe.

HTML5 este și cross-platform, adică este conceput să funcționeze fie de pe un calculator ( PC ), o tableta, un telefon inteligent sau un televizor inteligent.

Reguli care au fost luate în seamă pentru creearea noului HTML5:

Noi funcții bazate pe HTML, CSS, DOM și JavaScript

Nevoia de plugin-uri ( Flash ) externe trebuia redusă

Manipularea erorilor trebuia să fie mai ușoară decât în versiunea precedentă

HTML5 trebuia să fie dispozitivo-independent

Dezvoltarea lui trebuia să fie fie transparentă, vazută de public

II. 6. 1. Noile funcții HTML5

Cateva caracteristici interesante:

Elementul <canvas>, pentru desenare 2D

Elementele <video> și <audio> pentru redare media

Elemente specifice de conținut, cum ar fi <article>, <footer>, <header>, <nav>, <section>

Elemente de formular, cum ar fi calendar, date, time, email, url, search

Majoritatea browserelor suporta HTML5 și continuă să adauge noi acualizări ultimelor versiuni apărute.

Dintre noile fucnții HTML5, am folosit elementele de formular, deoarece la accesarea pagnii de pe dispozitive de tip smartphone, browserele acestora sunt capabile să recunoască aceast tip de element și să deschidă din telefon aplicații specifice elementului.

De exemplu, pentru un element de tip calendar, deschis de pe smartphone, se deschide o aplicație din telefon prin care selectăm mult mai ușor data dorită.

II. 7. CSS3

CSS3 reprezintă un upgrade ce aduce câteva atribute noi și ajută la dezvoltarea noilor concepte in webdesign. Unele dintre cele mai importante segmente (module) noi adăugate acestui standard pentru formatarea elementelor HTML aduc un plus considerabil in dezvoltarea activități webdesign.

Listă cu cele mai importante modulele adăugate in CSS3:

Selectors

Box Model

Fundaluri și borduri ( rotunjite )

Image Values and Replaced Content

Efecte de text

Transformări 2D/3D

Animații

Interfață de utilizator

Deși au apărut unele deficiente de compatibilitate intre browsere, majoritatea proprietăților CSS3 au fost implementate cu succes in variantele browserelor noi.

Dintre aceste noi elemente CSS3, bordurile rotunjite ( radius ) le-am folosit pentru un aspect plăcut ferestrelor de tip dialog, dar și pentru butoane sau tabele. Împreună cu bordurile rotunjite am folosit și fundalurile de tip gradient pentru a înfrumuseța aplicația. Printre aceste noi elemente am folosit si efectele de text, animațiile și box model.

II. 8 . MySQL

MySQL este un sitem de management a bazelor de date. O bază de date reprezintă o colecție de date structurate. Pot să fie de la o listă simpla de cumpărături până la o galerie de poze sau vastă informație într-o rețea corporativă. Pentru a adăuga, accesa și procesa date depozitate intr-o bază de date localizată pe un calculator, ai nevoie de un sistem de gestiune a bazelor de date cum ar fi MySQL Server, XAMPP, WAMP, acestea din urmă fiind locale, folosite pentru dezvoltare fără nevoia unei conexiuni la internet.

Eu am folosit pentru testarea aplicației XAMPP, care este un software open source. Acesta conține Apache HTTP Server, baze de date MySQL și interpretori de script-uri scrise în limbaje de programare, cum ar fi PHP.

Am folosit MySQL ( Structured Query Language ), deoarece este cel mai popular software open-source, pentru gestionarea bazei de date, din lume. Cu peste 100 de milioane de descărcări, stabilitatea, viteza și modul simplu de lucru, MySQL a devenit alegerea preferată pentru Web, Web 2.0, SaaS, ISV și alte corporative IT, deoarece elimină problemele asociate timpilor de nefuncționare, mentenanță și administrare.

MySQL este folosit deobicei pentru a salva timp si bani, oferind în același timp un sistem de gestionare a bazei de date foarte performant. Printre firmele mari care folosesc MySQL se regăsesc și Yahoo!, Google, Nokia, Youtube, Wikipedia și Booking.com.

Bazele de date MySQL sunt relaționale. O bază de date relațională depozitează informații in tabele separate mai de grabă decât depozitarea într-o cameră mare de informații. Structura bazei de date este organizată în fișiere fizice optimizate pentru viteză. Modelul logic împreună cu obiectele, cum ar fi bazele de date, tabelele, rândurile și coloanele, oferă o flexibilitate în mediul de programare. Definești reguli relaționale pentru între anumite câmpui de date, cum ar fi metodele: one-to-one, one-to-many, unique, required sau optional, atât și pointeri între diferite tabele.

Capitolul III

Proiectarea și implementare aplicației

III. 1. Proiectarea aplicației

Așa cum am dicutat și in introducere despre inportanța unei aplicații de tip ERP, această aplicație se referă la gestiunea si coordonarea diferitelor proiecte în cadrul unei companii, în vederea realizării obiectivelor de afaceri. Aplicația reprezintă o îmbinare a practicilor de management cu tehnologia informației, proiectele companiei care folosește această aplicație vor fi mult mai ușor de administrat și urmărit de toți utilizatorii înscriși în proiectele respective.

Figura nr. III.1. – schema bloc a aplicației

În pagina de ansamblu, găsim informații rapide despre noile modificări în cadrul proiectelor, un calendar pe întreaga săptămână în care ne sunt prezentate evenimentele și scurtături către proiectele active.

În pagina cu sarcinile așa cum îi spune și numele găsim toate sarcinile și listele cu sarcini de pe toate proiectele active ale utilizatorului, din cadrul acestei aplicații. Desigur pot fi văzute și sarcinile altor persoane care sunt în proiectele comune, cu ajutorul filtrului găsit tot în această pagină, în dreapta.

În pagina cu timpii, găsim timpii pe care persoanele i-au trecut în cadrul acestei aplicații. Aici se poate crea și un raport dacă dorim, pe un interval de timp selectat de noi.

În pagina calendar se află un calendar mare, reprezentând luna în curs și evenimentele sale.

Managerul de fișiere afișează fișierele, informații asociate lor, cum ar fi numele persoanei care l-a adăugat, pe ce proiect l-a adăugat, dar și data la care a fost adăugat. Managerul de fișiere permite și descărcarea lor.

Aplicația oferă în acest fel multe avantaje companiei care o implementează. Reducerea costurilor operaționale este unul dintre avantajele acestei aplicații, deoarece informația este operată o singură dată și este accesibilă oricui îi este necesară, econimisește timp și resurse, diminuând posibilitățile erorilor de operare.

O particularitate uzuală a acestei aplicații este stocarea tuturor informațiilor intr-o singura bază de date.

Figura nr. III.2 – Reprezentarea bazei de date

Tabela calendar cuprinde evenimentele adăugate din aplicație, cu un eveniment se pot adăuga și fișiere așadar poate conține și un ID cu referire în tabela files unde se află informațiile despre fișierul adăugat.

Așa cum am precizat anterior, în tabela files se găsesc informațiile cu privire la fișierele încărcate în cadrul aplicației. Numele original, numele generat la încărcare, extensia, și descrierea fișierului(ce reprezintă).

În tabela tasks se găsesc toate sarcinile, informațiile asociate sarcinii, cum ar fi: data limită în care sarcina trebuie încheiată, data la care a fost adăugată sarcina, descrierea sarcinii. Aceasta conține și un ID care face referire la tabela todos în care se găsesc listele sarcinilor.

Tabela actions conține acțiunile aplicației, la fel și tabela controllers care conține controlerele aplicației.

Tabela projects conține proiectele aplicației, iar tabela project_access conține asocierile dintre persoane și proiecte.

Tabela menu este de fapt meniul apliației, el se generează din această tablelă, care conține adresa elementului de meniu, numele și icoana sa.

Tabela log conține date cu privire la ultimele comentarii, fișiere, evenimente, sarcini, adăugate în cadrul aplicației.

În users avem informațiile despre utilizatori, numele, numerele de telefon, ocupația acestuia și alte informații.

Tabela messages conține mesajele adăugate pe proiect, în cadrul unui mesaj încărcat se poate adăuga și fișier, la fel ca și în cazul comentariilor(tabela comments) și evenimentelor.

Tabela time conține timpii adăugați pe o anumită sarcină, adică conține și id-ul sarcinii respective.

Datorită faptului ca această aplicație este și responsivă, ea se poate accesa de pe mai multe dispozitive cu un browser și o conexiune la internet, putând fi la fel de ușor de folosit de pe orice rezoluție.

Versiunea desktop, de rezoluție mare, în figura nr. III.5. În figurile III.3 și III.4 se potate observa cum aplicația își schimbă puțin design-ul si meniurile în funcțtie de rezoluție.Butoanele din bara de navigare apar la apăsarea butonului din dreapta, pătrat cu trei linii albe orizontale.

Figura nr. III.3 – Rezoluție până în 979px lățime

Figura nr. III.4 – Rezoluție de 480px lățime

III. 2. Implementarea aplicației

Baza de date de tip MySQL, are 14 tabele, între ele se pot creea liber legături la interogarea bazei de date prin query, pentru legături am adăugat după caz un câmp de tip INT cu ID-ul la tabela de legătură. De exemplu, un utilizator are un ID unic, acesta putând fi asociat în cazul unui query, în care dorim să îi vedem sarcinile și avem nevoie de mai multe date despre utilizatorul respectiv împreună cu sarcinile lui.

În figura de jos am agăugat structura bazei de date.

Figura nr. III.5 – Tabelele bazei de date

Cât despre interfața aplicației, în partea de sus a paginii, rămane mereu o bară de navigare( fig. III.3 ) în care găsim numele utilizatorului, butoane de navigare: care se schimbă în funcție de contextul paginii pe care este utilizatorul, dar și numele companiei care utilizează aplicația. Dând click pe numele utilizatorului se va deschide un panou mic de unde utilizatorul poate să se deconecteze sau să își modifice anumite setări.

În schimb, utilizatorii sunt de două feluri:

utilizator simplu sau user

administrator

Utilizatorul simplu poate să își vadă sarcinile, timpii alocați pe sarcina respectivă, să adauge și el la rândul său sarcini sau liste de sarcini. Poate aloca o sarcina altui coleg din proiectul respectiv, să îi schimbe timpul limită la care sarcina trebuie îndeplinită, să adauge comentarii la o sarcină, să încarce fișiere și multe alte drepturi.

În schimb ce nu poate utilizatorul simplu și poate administratorul este: să steargă un proiect, să îl închidă, să șteargă sau să adauge persoane pe proiecte, să șteargă sau să adauge oameni în aplicație.

Aplicația conține în partea stângă un meniu cu 5 elemente( fig. III.6 ) cu referire la: Pagina de ansamblu, pagina cu listele sarcinilor, pagina cu timpii, pagina de calendar, pagina cu managerul de fișiere. Acest meniu este persistent pe oricare pagină vizitată împreună cu bara statică de sus despre care vorbeam mai devreme.

Figura nr. III.6 – Pagina de ansamblu a aplicației

În pagina de ansamblu, găsim un calendar cu o privire de ansamblu asupra intregii săptămâni a evenimentelor. Desigur pentru rapiditate, calendarul poate fi modificat cu un singur click într-o vedere asupra întregii luni în curs sau în modul agenda, detaliat, care este doar pe ziua selectată de utilizator.

Tot în prima pagină regăsim și o coloană cu proiectele active pe care utilizatorul este înscris, prin intermediu căreia poate ajunge repede și ușor la un anumit proiect fără să fie nevoit să mai caute în meniul proiectelor. O coloană importantă tot în această pagină de ansamblu, o formează activitățile ce au fost derulate de alte persoane care sunt și ele înregistrate în proiectele comune. Activități cum ar fi, comentarii, sarcini, evenimente sau fișiere noi adăugate.

În pagina cu listele sarcinilor sau pagina Sarcini , se găsesc sarcinile în desfășurare ale utilizatorului autentificat, de pe toate proiectele în care el este înscris, dar dacă utilizatorul selectează un proiect, în această pagină vor apărea doar listele cu sarcinile de pe acel proiect.

În această pagină se pot vedea și alte sarcini ale altor persoane din cadrul aplicației, cu ajutorul unui filtru( fig. III.7 ).

Figura nr. III.7 – Pagina sarcinilor

Tot în această figură putem observa panoul cu listele sarcinilor complete. Dacă utilizatorul vrea să vadă o sarcină închisă, îndeplinită, trebuie doar să dea un click pe numele listei de sarcini și va fi redirecționat la o pagină în care poate sa vadă și sarcinile în curs, dar și cele închise, din lista respectivă de sarcini. Aici are posibilitatea de a adăuga timp pe sarcină, comentarii sau să o modifice(editeze).

Adăugarea comentariilor pe o sarcină, se face dând click pe icoana de comentarii, după care utilizatorul este redirecționat către pagina de comentarii( fig. III.8 ).

Adăugarea timpului lucrat pe o sarcină se face simplu si rapid printr-o fereastră care se deschide la apasarea butonului in formă de ceas situat în dreapta sarcinii( fig. III.9 ).

În cazul în care se folosește aplicația de pe o tabletă sau un dispozitiv inteligent, nu pot să apară feresterele pentru adăugare rapidă și în acest caz, utilizator este redirecționat către o pagină în care poate să completeze formularele respective.

Figura nr. III.8 – Adăugarea de comentarii pe o sarcină

Pentru alocarea unei sarcini utilizatorul are două optiuni:

editarea sarcinii – aici utilizatorul poate să schimbe textul sarcinii, data până la care sarcina ar trebuii să fie îndeplinită, persoana care va îndeplinii sarcina, să o facă importantă, iar dacă face acest lucru sarcina va fi automat adaugată și în calendar.

Panoul scurtătură – acesta apare dacă se dă click pe data sarcinii de unde se poate modifica rapid, ori data până la care trebuie finalizată sarcina, ori persoana căreia îi este alocată sarcina.

În aceste două condiții persoana căreia i se alocă sarcina, va fi înștiințată prin e-mail automat, acest lucru fiind foarte ușor de realizat cu ajutorul funcției de mail, Zend framework 2( fig. III.10 ).

E-mail-ul este codat HTML, fiind posibilă adăugarea de poze în interiorul său, dar și schimbarea fontului sau culorilor de fundal, ori text, cu ajutorul CSS.

Figura nr. III.9 – Adăugare rapidă a timpului lucrat pe o sarcină

Figura nr. III.10 – Funcția \Zend\Mail

Dacă utilizatorul dorește de exemplu să mute o sarcină dintr-o listă de sarcini în alta, poate foarte ușor pe această pagină de sarcini, doar selectând sarcina și mutând-o în altă listă. Această funcționalitate am implementat-o cu ajutorul funcțiilor dragable și dropable ale bibliotecii jQuery.

În pagina cu timpii, avem acei timpii înscriși pe sarcini, care reprezintă orele sau minutele lucrate pe o sarcini, de persoanele din proiect daca suntem pe un animit proiect respectiv de pe toate proiectele.

În această pagină avem posibilitatea de a căuta o anumită persoană sau o anumită descriere adăugată împreună cu timpul alocat și posibilitatea de a creea un raport în funcție de o persoană pe un anumit interval de timp, cu libertatea de selectare a acestui timp( fig. III.11 ).

Figura nr. III.11 – Pagina cu timpi

Pagina calendar oferă posibilitatea de a vedea evenimentele pe o lună întreagă fiind mare și afișând toate evenimentele. Acesta este un calendar jQuery, în el se pot adăuga evenimente pe toată ziua, pe anumite ore dintr-o zi sau un eveniment ce se întinde pe mai multe ore, dar chiar și un eveniment care se întinde pe mai multe zile. Adăugarea evenimentului se face selectând doar data.

În figurile III.12 și III.14 se poate observa calendarul în versiune de rezoluție desktop și tabletă/smartphone. În cazul în care rezoluția este mai micăde 480px, acest calendar devine o listă care afișează doar evenimentele apropiate/urmatoare datei actuale( fig. III.13 ).

Figura nr. III.12 – Pagina calendar în format desktop/rezoluție mare

Figura nr.III.14 – Pagina calendar pentru

rezoluție până în 480px

Ultima pagină prezentată din meniu, este managerul de fișiere. În cazul în care persoanele doresc să încarce un fișier(poză, document, tabel), pot să o facă simplu și rapid prin intermediul acesei pagini.

Oricine are dreptul și dorește vizualizarea/descărcarea fișierelor, poate să o facă în această pagină.

Încărcarea fișierelor se poate realiza doar daca este selectat un proiect. Validarea încărcării fișierului se face folosind Zend framework 2, foarte eficient și sigur din acest punct de vedere( fig. III.15). În aplicație este permisă adăugarea fișierelor de tip text, poza( .jpg/.jpeg/.gif/.png/.tiff), documente(word, excel, powerpoint, pdf).

Nu este permisă adăugarea unor fișiere mai mari de 10mb. La încărcare fișierelor li se va adăuga alături de numele lor inițial și un cod autogenerat, pentru a nu exista problema de duplicare a fișierelor.

Figura nr. III.15 – validarea încărcării unui fișier folosind Zend framework 2

Concluzii

În acest proiect de diplomă am prezentat metodele de contruire a aplicației, bazate pe Zend Framework 2, care folosește structura MVC și programarea orientată pe obiecte. Aplicația fiind responsivă am discutat despre ce înseamnă responsiv și cum se comportă o aplicație responsivă, la fel și cât este de necesar ca ea să fie responsivă.

Capitolul I prezintă pe larg obiectivele și caracteristicile unui sistem ERP împreună cu cele ale design-ului responsiv.

Capitolul II prezintă tehnologiile folosite pentru proiectarea și implementarea acestei aplicații web responsive, rolol capitolului constă în introducerea tehnologiilor folosite și în descrierea lor exactă la ce anume le-am folosit.

Capitolul III prezintă proiectarea și implementarea aplicației în sine. Am vorbit despre modul de funcționare al aplicației, cum s-a făcut implementarea și proiectarea cu ajutorul tehnologiilor. Prezentarea tabelelor bazei de date din cadrul aplicației, coduri cu funcțiile importante pentru prezentarea exactă a subiectelor, dar și capturi de ecran pentru înțelegerea design-ului responsiv.

Motivul pentru care am ales să constuiesc această aplicație folosind Zend framework 2, se datorează stabilității, complexității și securității acestui framework. Faptul că este open source este și acesta un motiv pentru care am ales să contruiesc în Zend framework 2 această aplicație, găsind cu ușurință informații, referințe și exemple cu privire la implementarea unei aplicații în el.

Bibliografie

[1] Programmer’s Reference Guide of Zend Framework 2, consultat la 12.05.2014

http://framework.zend.com/manual/2.0/en/index.html

[2] Getting started: A skeleton application, consultat la 18.03.2014

https://zf2.readthedocs.org/en/latest/user-guide/skeleton-application.html

[3] Design responsive cu Bootstrap 2.3.2, consultat la 10.12.2013

http://getbootstrap.com/getting-started/

[4] Responsive web design, consultat la 14.11. 2013

http://en.wikipedia.org/wiki/Responsive_web_design/

[5] PHP 5 Tutorial, consultat la 23.05.2014

http://www.w3schools.com/PHP/

[6] HTML5 Introduction, consultat la 11.01.2014

http://www.w3schools.com/html/html5_intro.asp

[7] CSS3, consultat la 12.04.2014

http://www.css3.info/

[8] CSS3 Introduction, consultat la 29.01.2014

http://www.w3schools.com/css/css3_intro.asp

[9] PHP MySQL Introduction, consultat la 13.03.2014

http://www.w3schools.com/php/php_mysql_intro.asp

[10] SQL Tutorial, consultat la 13.03.2014

http://www.w3schools.com/sql/