Aplicatie Web Care Genereaza Lista de Plata Pentru Asociatiile de Propietaridocx

=== Aplicatie Web care genereaza lista de plata pentru asociatiile de propietari ===

UNIVERSITATEA DIN ORADEA

FACULTATEA DE INGINERIE ELECTRICĂ ȘI TEHNOLOGIA INFORMAȚIEI DEPARTAMENTUL CALCULATOARE ȘI TEHNOLOGIA INFORMAȚIEI

TEMA – APLICAȚIE WEB CARE GENEREAZĂ LISTA DE PLATĂ PENTRU ASOCIAȚIILE DE PROPRIETARI

Lucrare de Finalizare a studiilor a studentului: Șerban Sergiu Florin

1). Tema lucrării de finalizare a studiilor: Aplicație web care generează lista de plată pentru asociațiile de proprietari

2). Termenul pentru predarea lucrării: 27.06.2014

3). Elemente inițiale pentru elaborarea lucrării de finalizare a studiilor: Tehnologii –

Apache, MSQL, PHP, jQuery, Bootstrap

4). Conținutul lucrării de finalizare a studiilor : Introducere – Descrierea și scopul proiectului, Înțelegerea noțiunilor, Reguli de calcul; Tehnologii folosite – Apache, MySQL, PHP, jQuery, Bootstrap, Unelte pentru dezvoltare – EasyPHP, phpMy Admin, Sublime Text, Design Responsive, Ajax ; Partea aplicativă – Proiectarea aplicației, Analiză, Baze de date, Implementare ; Concluzii; Bilbiografie

5). Material grafic: Schema bloc a aplicației

6). Locul de documentare pentru elaborarea lucrării: Biblioteca universității, laboratorul de calculatoare, internet

7). Data emiterii temei: 01.10.2013

Coordonator științific

conf. dr. ing. GABOR GIANINA

UNIVERSITATEA DIN ORADEA FACULTATEA DE INGINERIE ELECTRICĂ ȘI TEHNOLOGIA INFORMAȚIEI

PROGRAMUL DE STUDIU: CALCULATOARE

FORMA DE ÎNVĂȚĂMÂNT: ZI

APLICAȚIE WEB CARE GENEREAZĂ LISTA DE PLATĂ PENTRU ASOCIAȚIILE DE PROPRIETARI

COORDONATOR ȘTIINȚIFIC

conf. dr. ing. GABOR GIANINA

ABSOLVENT

ȘERBAN SERGIU FLORIN

ORADEA

2014

Cuprins

Capitolul I.Introducere……………………………….……………………….……….………..3

I.1 Descrierea și scopul proiectului…………………………..…………………..….3

I.2 Înțelegerea noțiunilor…………………………………………………………………………………3

I.3 Reguli de calcul…………………………………………………………………………………………5

Capitolul II. Tehnologii folosite ……………………………….…………………………………..6

II.1. Apache……………………………………………………………………………..6

II.2 MySQL………..…………………………………………………………………….7

II.3 PHP……………………………………………………………………………………7

II.4 jQuery……………………………………………………………………………….8

II.5 Bootstrap………..…………………………………………………..…….……..9

II.6 Unelte pentru dezvoltare………………………………………………….………………..11

II.6.1 EasyPHP…………………………………………….…………………………….11

II.6.2 phpMyAdmin… ……………………………………………………………….11

II.6.3 Sublime text……………………………………………………………………..12

II.6.4 Design Responsive……………………………………………………………12

II.6.5 AJAX…………………………………………………………………………14

Capitolul III. Partea aplicativă…………..…………..………………………………………..15

III.1 Proiectarea aplicației…..….……………..…………………………………….…………15

III.1.1 Analiză………………………………………………………………………………16

III.1.2 Baze de date…………..……………………………………….………………..18

III.2 Implementare…….…….………..…………………………………………………………….23

Capitolul IV. Concluzii……………………………………….………………………………………32

Bibliografie…….….…..……………………………………………………………………….34

Capitolul I. Introducere

I.1 Descrierea și scopul proiectului

Proiectul reprezintă implementarea unei aplicații care generează lista de plată pentru asociațiile de proprietari. Aplicația în sine este destinată asociațiilor de proprietari, aceasta aplicându-se în orice asociație de proprietari din țara noastră, respectând bineîntețes prevederile legale de calcul și de evidenta aflate în vigoare. Această aplicație e concepută să respecte anumite legi, cum ar fi legea nr. 230/2007 privind înființarea, organizarea și funcționarea asociațiilor de proprietari și normele metodologice de aplicare a acestei legi unde se specifică modalitățile de calcul.

În acest caz se urmărește automatizarea procesului de calcul și evidență a cheltuielilor pe care le au de plătit în fiecare lună locatarii / proprietarii unei asociații de proprietari. Calculele pe care administratorul unui bloc sau asociație de proprietari le face manual sunt anevoioase și predispuse greșelilor, în orice clipă existând posibilitatea ca acesta să introducă erori de calcul sau de evidență, prin urmare o aplicație care să-i ușureze și să îi organizeze activitatea este un ajutor binevenit în orice moment.

În principiu, aplicația trebuie să permită introducerea datelor necesare calculului cumulativ, să efectueze acest calcul pe baza datelor introduse sau care există deja într-o formă de evidență și nu în ultimul rând să genereze o listă de plată pe care administratorul asociației o va afișa pe panou. De asemenea, fiecare utilizator care dorește să-și vizualizeze factura și eventualele restanțele pe care le are, o poate face accesând aplicația și autentificându-se prin intermediul unui user și a unei parole.

I.2 Înțelegerea noțiunilor

În urma discuțiilor purtate cu administratorul unei asociații de proprietari precum și în urma analizării unor prevederi legale(legi, ordonanțe) cu privire la asociațiile de proprietari, au avut drept rezultat o înșiruire de noțiuni specifice acestui domeniu, ce vor fi folosite în faza de implementare ca și elemente de proiectare. Pentru a avea o imagine de ansamblu asupra acestor noțiuni și a semnificației lor, sunt prezentate pe scurt în cele ce urmează.

Conceptul de asociație de proprietari constituie asocierea tuturor proprietarilor sau locatarilor care locuiesc și posedă unul sau mai multe apartamente într-un imobil de locuințe, aflat într-o formă cu personalitate juridică, numită Asociație de Proprietari, cu scopul de a gestiona în comun resursele legate de serviciile oferite de către regiile autonome și a altor chestiuni legate de gestionarea în comun a unor resurse, spații , fonduri.

Prin conceptul de apartament se percepe ca fiind o locuință separată, indivizibilă, aflată într-un imobil sau bloc de locuințe. Rezultă că un imobil deține unul sau mai multe apartamente și un apartament aparține doar unui singur imobil, iar în cadrul imobilului apartamentul este identificat printr-un număr de apartament. De asemenea apartamentul este definit prin proprietar, numărul de camere aferent, numărul de persoane care locuiesc în acesta precum și suprafața totală. Aceste caracteristici pot fi variabile datorită modificării lor de la o lună la cealaltă.

Ideea de furnizor denumește o societate comercială, o regie autonomă, care furnizează anumite servicii asociației de proprietari. Furnizorul este definit prin denumire, adresa și cod fiscal. Echivalentul acestor servicii fac obiectul unei facturi emise de furnizor pentru asociația de proprietari.

În acest fel avem conceptul de factură care reprezintă documentul ce include cuantumul de consum al serviciului oferit precum și contravaloarea acestuia, exprimat în lei. Factura are ca și caracteristici numărul de document, furnizorul, consumul, tipul de serviciu furnizat, suma care reprezintă echivalentul în bani a serviciului și lună pentru care se face facturarea . Factura este emisă de către furnizor pentru luna precedentă. Prin ideea de lună se înțelege intervalul de timp egal cu o lună calendaristică în care furnizorul a realizat facturarea. Luna se caracterizează prin indexul sau numele acesteia(ianuarie – decembrie) și nu în ultimul rând prin anul din care aceasta face parte.

Tipul de consum este definit de unitate de măsură, furnizor precum și tipul de calcul. Unui tip de consum poate să-i reveni în felul acesta una sau mai multe facturi. Conceptul de tip de calcul redă modalitatea în care se face socotelile pentru cuantumului cuvenit fiecărui apartament în parte din imobil pentru un anume tip de consum. Un tip de calcul este hotărâtor pentru unul sau mai multe categorii de consum.

Prin conceptul de încasare reiese acțiunea prin care administratorul asociației de proprietari încasează de la proprietarul apartamentului o sumă de bani cuvenită cuantumului provenit de pe urma cheltuielilor lunare. De regulă proprietarul plătește exact suma ce a rezultat din factură dar totodată poate să plătească doar o parte din aceasta, sau chiar să nu plătească deloc suma datorată, suma respectivă devenind în acest caz restantă. În urma achitării unei sume, administratorul va emite o chitanță, care să dovedească faptul că proprietarul a plătit suma respectivă.

I.3 Reguli de calcul

Cuantumul cheltuielilor cuvenite pentru fiecare apartament din imobil se socotește pe baza facturilor lunare pe care administratorul asociației de proprietari le încasează de la furnizorii de servicii(societățile comerciale care asigura livrarea apei reci și calde, curentul electric, agentului termic, serviciile de salubrizare, etc.) și din informațiile specifice fiecărui apartament în parte(număr de persoane, suprafață, etc). Calcul se face pe baza prevederilor legale în vigoare.

Cheltuielile aferente fiecărui apartament sunt repartizate respectând legile și reglementările aflate în vigoare, în felul următor:

● Repartizarea cheltuielilor pe număr de persoane – reprezintă cheltuielile pe care le are asociația pentru: apă rece, caldă și canalizare, energia electrică, colectarea deșeurilor menajere.

● Repartizarea cheltuielilor pe consumuri individuale – reprezintă cheltuielile asociației pentru: apă rece și canalizare, gaze natural, apă caldă menajeră, energia termică,, încălzirea apartamentului sau a spațiului cu altă destinație decât aceea de locuință. .

● Repartizarea cheltuielilor pe cota-parte indiviză de proprietate – aceste cheltuieli sunt efectuate pentru administrarea, întreținerea, repararea, exploatarea și, în anumite cazuri pentru consolidarea părților de construcții și instalații din condominiu aflate în proprietate comună.

● Repartizarea cheltuielilor pe beneficiari – sunt cheltuielile aferente serviciilor de care beneficiază în mod individual proprietarii, toți sau în parte, gestionate financiar prin intermediul asociației de proprietari.

● Repartizarea cheltuielilor pe consumatori tehnici – reprezintă cheltuielile asociației de proprietari pentru: încălzirea proprietăților individuale – apartamente sau spații cu altă destinație decât aceea de locuință.

● Repartizarea cheltuielilor de altă natură – aceste cheltuieli sunt destinate pentru efectuarea

lucrărilor de întreținere și reparații. ([1] HOTĂRÂRE Nr. 1588 din 19 decembrie 2007)

Capitolul II. Tehnologii folosite

Aplicația web a fost implementată și testată pe o platformă de tip WAMP: Windows, Apache, MySQL și PHP. Motivul pentru care am utilizat Windows ca sistem de operare pentru celelalte componente WAMP l-a constituit posibilitatea de a testa întreg sistemul pe același calculator. O alegere reprezentativă în cazul aplicațiilor web este LAMP, cu aceleași componente înșiruite mai sus, dar având Linux ca suport. Utilizarea LAMP ar fi însemnat, în acest caz, existența unui server dedicat sau rularea unei mașini virtuale.

II.1. Apache

Serverul web folosit pentru dezvoltarea aplicației este Apache HTTP server. Rolul prinicipal al lui Apache este acela de a asculta cererile de resurse care ajung din rețea și de a răspunde acestora în conformitate cu cele prevăzute de protocolul HTTP. Un motiv pentru care am ales Apache a fost datorită faptului că este un server web multi-platformă, stabil, bogat în funcționalități, răspândit, precum și gratuit([12] Apache.).

Apache rulează pe o sumedenie de sisteme de operare, fiind distribuit pe internet atât în variantă cod sursă pentru compilarere, cât și binar, pre-compilat pentru majoritatea sistemelor de operare aflate în folosință. Astfel, se poate migra ușor de pe un sistem de operare pe altul, fiind un al doilea motiv pentru care am ales Apache în dezvoltarea acestei aplicații.

De asemenea, Apache este un server web cu care sunt familiar, fiind un al treilea motiv pentru care am ales această tehnologie, nefiind necesară învățarea unui număr mare de directive de configurare și a unei noi sintaxe în vederea configurării serverul-ui web. Configurarea serverului web este un element fundamental în dezvoltarea aplicației web, chiar dacă rolul acestuia nu pare atât de important comparativ cu a tehnologiei server-side cu care a fost construită aplicația. Înainte ca orice componentă a aplicației să preia controlul, serverul web procesează cererea HTTP, creează mediul corespunzător și invocă resursa care a fost solicitată. Pentru a putea duce operația la bun sfârșit, este nevoie să fe posibilă comunicarea cu serverul web și acesta să poată servi cererea, chestiuni care țin de configurarea sa.

În acest caz, era nevoie ca serverul web să ruleze sub sistemul de operare Windows, deoarece dezvoltarea aplicației nu a fost făcută într-o mașină virtuală. Apache este disponibil atât pe Windows cât și pe Unix, precum și pe alte sisteme de operare. În acest sens, Microsoft IIS, nu ar fi fost o alegere convenabilă deoarece rulează doar sub Windows, iar o portare ulterioară a aplicației pe un sistem care nu rulează Windows nu ar fi putut fi făcută fără configurarea și utilizarea unui alt server web, ceea ce am încercat să evit de la bun început, utilizând un server web multi-platformă.

II.2. MySQL

Durabilitatea informației în această aplicație este realizată de către sistemul de baze de date relațional MySQL. Acesta reprezintă o bază de date open-source scalabilă, eficientă și este o alegere preferată de dezvoltatorii de aplicații web.

În cadrul aplicației am ales MySQL în primul rând datorită familiarității cu acest sistem de baze de date. Deși toate sistemele de baze de date pun la dispoziție o interfață SQL, acestea sunt mereu dialecte specifice, astfel că este nevoie de învățarea unui limbaj ușor diferit pentru fiecare în parte. De asemenea, doar setul de bază de instrucțiuni SQL este comun, funcționalitatea avansată fiind diferită în fiecare caz.

MySQL oferă un sistem de securitate bazat pe utilizatori și permisii ale acestora asupra bazelor de date existente în sistem. Sistemul de privilegii MySQL autentifică un utilizator bazat pe numele său și calculatorul gazdă de unde încearcă să acceseze sistemul([5] MySQL). Ulterior conectării, sistemul acordă privilegii în funcție de identitate și acțiunea dorită. Controlul accesului se realizează, așadar, în 2 pași:

1. Serverul acceptă sau respinge conexiunea în funcție de identitate și de parolă (care trebuie să corespundă contului respectiv);

2. Odată conectat, serverul verifică fiecare declarație SQL pentru a determina dacă

utilizatorul are suficiente privilegii pentru a o executa.

Informațiile privind privilegiile utilizatorilor sunt stocate intern în baza de date mysql în tabele de granturi, care sunt încărcate în memorie la inițializarea sistemului și utilizate în stabilirea deciziilor de control al accesului.( [5] MSQL).

II.3. PHP

Ca tehnologie server-side, aplicația este construită folosind PHP. PHP este un limbaj de programare (scripting) care este corespunzător în mod special aplicațiilor web( [3] PHP), mediul web fiind scopul pentru care inițial a fost creat acest limbaj.

Deși inițial PHP a fost proiectat ca un limbaj șablon (templating language) pentru generarea paginilor web dinamice, mai târziu a trecut printr-o serie de transfomări, încorporând atât elemente de sintaxă noi cât și funcționalitate sporită prin intermediul extensiilor care au fost integrate. PHP începând cu versiunea majoră 5 este un limbaj modern multi-paradigmă, prezentând anumite facilități pentru programare procedurală, funcțională sau orientată pe obiecte precum și un vast nucleu de funcții și clase pentru a realiza operații tipice necesare în programarea web, cum ar fi de exemplu comunicarea cu un sistem de baze de date.

Sintaxa orientată pe obiecte este utilă în mod special în cazul aplicațiilor precum aceasta, fiind o metodă mai potrivită de a exprima conceptele cu care se operează și funcționalitatea pe care acestea o furnizează. Această sintaxă stă la baza majorității framework-urilor realizate pentru PHP.

II.4. jQuery

Aplicația utilizează biblioteca jQuery, aceasta find o librărie Javascript destinată să simplifice traversarea DOM-ului documentului HTML, manipularea evenimentelor, animații precum și apeluri AJAX( [2] jQuery). În același timp, jQuery este o librărie extensibilă, oferind un API bogat. În acest caz aplicația folosește intens jQuery cu scopul de a manipula interfața utilizator și de a trimite datele în back-end prin AJAX.

Aplicația face uz de instrucțiunile jQuery în multe locuri din proiect, aceste instrucțiuni fiind folositoare pentru interacțiunea cu utilizatorul. De exemplu, în partea de introducere a datelor în administrare, există un tabel mare cu elemente HTML de tip input unde se introduc date, iar pentru ușurința introducerii, se poate naviga printre aceste input-uri folosind săgețile de la tastatură. Pentru acest lucru se folosește jQuery folosind instrucțiunea de mai jos pe care o voi explica în continuare.

$('#tabel_principal input').keyup(function(e){

if(e.which==39)

{$(this).closest('td').next().find('input').focus();$(this).closest('td').next().find('input').select();}

else if(e.which==37)

{$(this).closest('td').prev().find('input').focus();$(this).closest('td').prev().find('input').select();

}

else if(e.which==40)

{$(this).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find('input').focus();$(t his).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find('input').select();}

else if(e.which==38)

{$(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input').focus();$(t his).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input').select();}

Toate instrucțiunile jQuery sunt legate (din engleză „bind”) de elementele DOM-ului la încărcarea documentului și sunt incluse în instrucțiunea $(document).ready(function() { … }); care la rândul ei e inclusă într-un tag <script>. Semnul dolarului este defapt un alias pentru funcția jQuery. Puterea jQuery constă în selectorii și funcțiile care fac mult mai ușoară

manipularea DOM-ului decât cu instrucțiuni Javascript. În codul de mai sus putem observa cum se face un bind sau mai putem spune o legătură pentru fiecare element de tip INPUT al elementului cu id-ul tabel_principal. Textul #tabel_principal reprezintă selectarea elementului cu acel id, dacă se pune simplu input reprezintă elementul HTML de acel tip, iar dacă se pune punct, de exemplu .restante, reprezintă selectarea elementului cu acea clasă. Astfel, în selectorul descris în bucata de cod de mai sus se selectează colecția de elemente HTML de tip INPUT care sunt în interiorul elementului cu id-ul #tabel_principal. Pentru fiecare input se execută funcția keyup, iar apoi se verifică evenimentul keyup care reprezintă tasta apăsată de utilizator. Dacă acea tastă are codul ASCII a săgeților (sus, jos, stânga, dreapta) atunci se execută funcții de căutare a celui mai apropiat input și se face focus pe acesta. Tot pentru input-urile acestui tabel folosim jQuery la modificarea valorii unui input pentru a salva datele în baza de date.

După cum se poate observa, folosind jQuery pentru traversarea input-urilor tabelului principal se folosesc mai puține linii de cod decât dacă am folosi instrucțiuni Javascript. Există tot felul de alte posibilități de selectarea a unor elemente folosind jQuery, aceste modalități precum și alte funcții jQuery se pot găsi pe site-ul dedicat api.jquery.com. Se mai folosește mult jQuery în fișierul index.php al administrării, ce reprezintă defapt introducerea datelor de către administrator. Pe lângă tabelul cu introduceri de date se folosește jQuery pentru afișarea ferestrei modale la click pe un buton din pagină, de exemplu pentru afișarea ferestrei modale la click pe butonul „setări generale” avem următorul cod:

$('#generale').click(function(){

$('#generale_div').modal();

});

unde se folosește funcția modal() prezentă în framework-ul Bootstrap prezentat în subcapitolul următor.

II.5. Bootstrap

Aplicația web folosește Bootstrap pentru interfața grafică folosită. Bootstrap reprezintă colecție de instrumente (framework) pentru crearea de site-uri web și aplicații web([4] Bootstrap). Acesta conține HTML și design bazat pe CSS pentru tipografie, forme, butoane de navigare și alte componente de interfață, precum și extensii JavaScript opționale ([4]Bootstrap).

Bootstrap a fost dezvoltat de către Mark Otto și Jacob Thornton ca un framework pentru încurajarea consistenței instrumentelor interne. Înainte de Bootstrap au fost folosite diverse

librării pentru dezvoltarea interfeței, ceea ce a condus la neconcordanțe și o întreținere dificilă([4] Bootstrap).

Bootstrap este compatibil cu cele mai recente versiuni de browsere. Are opțiuni pentru

degradarea design-ului când este utilizat în browserele mai vechi cum ar fi Internet Explorer

8. Începând cu versiunea 2.0 acesta suportă web design-ul receptiv (responsive). Acest lucru înseamnă că aspectul de pagini web se ajustează dinamic, în funcție de caracteristicile dispozitivului utilizat (desktop, tabletă, telefon mobil).

Aplicația web folosește Bootstrap 2.0 standard precompilat gata de folosit, având în arhiva descărcată de pe site-ul oficial Bootstrap (http://getbootstrap.com/) toate fișierele necesare. Bootstrap conține definiții de stil de bază pentru toate componentele cheie HTML. Acestea alcătuiesc un aspect uniform și modern pentru formatarea textului, tabelelor și elementelor unui formular. Bootstrap conține și alte elemente de interfață utilizate în mod obișnuit, cum ar fi: butoane cu funcții avansate (de exemplu, gruparea de butoane sau butoane cu opțiuni care se derulează, tab-uri orizontale și verticale, navigare – breadcrumbs -, paginație, etc.), etichete, capabilități avansate de tipografice, miniaturi (thumbnails), mesaje de avertizare și bare de progres.

Bootstrap vine și cu mai multe componente JavaScript sub formă de plugin-uri jQuery. Ele oferă alte elemente de interfață de utilizator, cum ar fi: casete de dialog, tooltips sau carusele. Acestea extind și funcționalitatea unor elemente de interfață existente, inclusiv, de exemplu, o funcție de auto-complete pentru câmpurile de introducere. În versiunea 2.0, următoarele plugin-uri JavaScript sunt acceptate: Modal, Dropdown, Scrollspy, Tab, Tooltip, popover, Alert, Button, colaps, carousel.

Pentru generarea butoanelor aplicației s-au folosit componentele existente în Bootstrap, de exemplu pentru generarea butonului Lista de afișat s-a folosit următoarea linie de cod

<button id='lista' class='btn btn-small btn-inverse' ><i class='icon-list icon-white'></i>

Lista de afișat</button>.

Aici putem observa cum elementul html de tip BUTTON conține clasele btn btn-small btn-inverse ce sunt elemente css integrate in Bootstrap și fac ca butonul să primească următorul aspect . Clasa btn face că elementul să capete un aspect de buton, btn-small face ca butonul să aibe mărime nu foarte mare iar btn-inverse să coloreze butonul în culoarea neagră. Aici mai putem observa și iconița sub formă de listă care este afișată folosind elementul <i> cu clasele icon-list și icon-white. Pentru o listă completă a butoanelor, icoanelor și alte elemente incluse în bootstrap se poate vizita link-ul http://getbootstrap.com/2.3.2/.

II.6. Unelte pentru dezvoltare

II.6.1. EasyPHP

EasyPHP este un instrument de dezvoltare și nu este destinat pentru a găzdui site-uri web sau aplicații, fiind un mediu complet și gata de utilizare pentru dezvoltatorii PHP, un pachet WAMP, ce conține limbajul de scripting PHP server-side, serverul web Apache, MySQL SQL server, precum și instrumente de dezvoltare, cum ar fi managerul de baze de date phpMyAdmin, debugger Xdebug și multe altele. Nu necesită configurări inițiale, trebuie doar descărcat de pe pagina oficială http://www.easyphp.org și instalat. Pagina de administrare permite schimbarea portului Apache, timpul maxim de execuție a scriptului, raportarea erorilor, dimensiunea maximă a fișierului încărcat, gestionarea modulelor([9] EasyPHP) și altele, aceste aspecte fiind motivul pentru care am ales să lucrez cu această unealtă în această aplicație. Un alt motiv pentru care am ales EasyPHP a fost datorită faptului că se poate instala pe un sistem PC, pe o unitate flash USB, pe un card de memorie, pe un hard disk portabil pentru dezvoltarea locală a diverselor proiecte, site-uri, script-uri, aplicații([3] EasyPHP).

EasyPHP poate conține anumite module care trebuiesc descărcate. Astfel, se pot instala rapid aplicații, cum ar fi WordPress (blog), Drupal, Joomla! (Content Management System – CMS), Prestashop (eCommerce / Magazin Online), phpBB (Forum / Bulletin Board)( [9] EasyPHP). Toate erorile, avertizările și anunțurile, inclusiv cele mai bune practici de codare și recomandările standard de codificare în PHP sunt afișate([9] EasyPHP). Configurația este optimizată pentru codificare și depănare (debug), având rolul de a forța începătorii și chiar unii programatori cu experiență să dezvolte obiceiuri bune și să scrie cod curat și consistent([9] EasyPHP). În aceast caz, pentru implementare s-au folosit modulele default prezente la instalare.

II.6.2. phpMyAdmin

Pentru crearea bazei de date și a tabelelor, am folosit aplicația phpMyAdmin. Aceasta este o unealtă free software scrisă ea însăși în PHP, utilizată în administrarea bazelor de date MySQL, având o interfață web([8] phpMyAdmin). PhpMyAdmin reduce semnificativ manipularea structurii tabelelor și a conținutului acestora prin intermediul interfeței grafice, dar permite totodată și executarea de SQL arbitrar, aceste două aspecte fiind motivul pentru care am ales să lucrez cu acest unealtă în cadrul aplicației. Printre facilitățile phpMyAdminputem enumera următoarele: interfață user-friendly, suport pentru majoritatea funcțiilor mysql, import și export de date ([10] phpMyAdmin).

Schema tabelelor este următoarea:

Figura II.2.2 -1 Schema tabelelor

II.6.3. Sublime Text

Sublime Text este un editor de text și cod sursă multi-platformă, acesta fiind disponibil pe OS X, Windows și Linux([7] Sublime Text). Motivul pentru care am ales să lucrez cu această unealtă a fost datorită faptului că suportă și este capabil să evidențieze sintaxa pentru un număr foarte mare de limbaje de programare cum ar fi: PHP, HTML, Javascript, SQL([7] Sublime Text) și multe altele, exact de ce aveam nevoie în realizarea aplicației. În plus față de cele care sunt incluse în pachetul inițial, utilizatorii au posibilitatea de a descărca suplimente(add-ons) pentru a suporta alte limbaje / sintaxe.

II.6.4. Design Responsive

Pe măsură ce utilizarea internetului pe telefonul mobil sau tabletă devine din ce în ce mai populară și site-urile web trebuie să se adapteze la diferite dispozitive și rezoluții. Fie că folosesc un telefon mobil cu sistem de operare Android sau Windows Mobile , un dispozitiv

BlackBerry sau iPhone([6] Responsive Design), sau o tabletă sau un monitor , fiecare utilizator merită cea mai bună experiență posibilă. Procesul de aranjare a aspectului într-un mod în care toate informațiile importante sunt prezentate într-un mod lizibil pe orice tip de dispozitiv sau dimensiune a ecranului se numește design responsive. Tehnica design responsive-ului este o abordare inovatoare în dezvoltarea site-urilor web mulându-se pe fiecare dimensiune a ecranului , indiferent cât ar fi de mică , oferind o experiență plăcută și intuitivă pentru toți utilizatorii. Paginile design responsive folosesc coordonatele x și y a unei grile pentru aspectul general al unei pagini și procente matematice pentru imagini , creându-se astfel un aspect mai fluid care se va redimensiona la dimensiunea ecranului.

Tehnica design responsive-ului este defalcată în 3 componente principale: gridurile

fluide, imagini flexibile, media queries([6] Responsive Design).

Oamenii preferă în activitatea lor personală dispozitivele mobile. Acestea devin din ce în ce mai mici , în schimb monitoarele desktop devin din ce în ce mai late și cu rezoluții tot mai mari. Așadar nu putem elabora pagini doar pentru dispozitivele mici. Avantajul gridurilor fluide este că putem ajusta lățimea pentru dispozitivele mici pe baza calculelor procentuale([6] Responsive Design) lucrând în continuare pe ecrane mari,asigurându-ne că toate elementele din pagină sunt redimensionate unul față de celălat.

Există o serie de tehnici pentru redimensionarea proporțională a imaginilor pentru a da un aspect fluid paginilor . Cea mai ușoară modalitate este de a folosi CSS-ul cu ajutorul următoarei declarații

img {

max-width: 100%;

}

Lățimea maximă a imaginii este setată la 100% din lățimea browserului , astfel încât dacă lățimea browserului devine mai îngustă și imaginea se va redimensiona.

În proiectarea unui site sau al unei pagini cu tehnica design responsive trebuie să luăm în considerare dimensiunea ecranului și implicit al rezoluției pentru a oferi o experiență plăcută utilizatorului . Media queries sunt instrumentele care pot fi setate să detecteze caracteristici cum ar fi lățimea, înălțimea, orientarea și rezoluția ecranului([6] Responsive Design) .

Avantajele utilizării tehnicii design responsive în această aplicație sunt următoarele :

– utilizatorii obțin aceeași experiență plăcută cu browsere diferite pe dispozitive diferite;

– folosind tehnica design responsive avem o singură versiune a unei pagini , chiar și Google recomandând folosirea acestei tehnici pentru a gestiona mai ușor strategia de SEO([6] Responsive Design).

II.6.5. AJAX

Ajax este un acronim de la Asynchronous Javascript And XML și reprezintă un grup de tehnologii care fac posibilă încărcarea sau modificarea anumitor părți dintr-o pagină, prelucrate și generate de un server , fără a fi necesară reîncărcarea totală a acelei pagini([11] Ajax). Astfel conținutul unei pagini se încarcă mult mai rapid .

Tehnologiile din care este alcătuit Ajax-ul sunt următoarele :

– XHTML și CSS pentru prezentarea informațiilor;

– Document Object Model (DOM) pentru interacționarea și afișarea dinamică a informațiilor

prezentate;

– Obiectul XMLHttpRequest pentru manipularea datelor asincron cu serverul web. Toate scripturile folosesc obiectul XMLHttpRequest care este folosit pentru a schimba date asincron cu serverul web. Acesta formulează cereri HTML comunicând astfel cu serverul și afișând datele primite fără a fi necesară reîncărcarea paginii , de asemenea putând fi procesate mai multe conexiune paralele cu serverul;

– XML, HTML și XSLT pentru manipularea și schimbul de date;

– JavaScript pentru cererile de date și afișarea informațiilor obligatorii( [11] Ajax).

Ajax încorporează toate aceste tehnologii pentru a crea o nouă abordare în dezvoltarea aplicațiilor web.

III.1. Proiectare aplicație

Capitolul III. Partea aplicativă

În urma discuțiilor purtate cu administratorul unei asociații de proprietari precum și în urma studierii unor prevederi legale cu privire la asociațiile de proprietari, au avut drept rezultat o serie de informații care au fost utilizate în proiectarea aplicației. Acestea sunt

evidențiate în schema bloc a aplicației, după cum se poate vedea mai jos:

Figura III.1 – 1 Schema bloc a aplicației

Aplicația este împărțită în 2 părți:

● partea de administrare, unde administratorul realizează anumite anumite operații cum ar fi

introducerea de date, precum si generarea listei de plată care va fi afișată la panou

● partea de utilizare, unde proprietarii pot să-și vizualizeze datele legate de cosum, etc.

Partea de administrare este alcătuită din:

● secțiunea de introducere date, unde se pot vizualiza detalii despre apartamente, cheltuieli generale, valorile și numărul de metri cubi de apă. Totodată aici se pot introduce și modifica datele fiecărui apartament și valorile cheltuielilor generale care se împart.

● listele de plată și vizualizare valori și consum apă, unde se generează listele pe baza datelor

introduse în secțiunea precedentă.

Partea de utilizare afișează datele introduse în partea de administrare pentru apartamentul al cărui proprietar s-a înregistrat în sistem.

De precizat că aceste secțiuni, partea de administrare și cea de utilizare, sunt legate între

ele și folosesc aceeași bază de date.

III.1.1 Analiză

Aplicația e concepută să respecte anumite legi, cum ar fi legea nr. 230/2007 privind înființarea, organizarea și funcționarea asociațiilor de proprietari și normele metodologice de aplicare a acestei legi unde se specifică modalitățile de calcul pentru diferite situații.

Pentru a executa aplicația este necesar ca serverul apache și cel mysql să fie pornite, iar apoi se accesează url-ul aplicției ce conține portul pe care ascultă serverul apache și denumirea aplicației. Ca exemplu acest url poate avea forma http://127.0.0.1:8080/asociație/.

La pornirea aplicației în mod administrare se fac la începutul scriptului mai multe verificări. Se verifică dacă pentru data curentă (adică data setată în calculator în momentul execuției aplicației), compusă din luna și anul curent, există date în baza de date: adică dacă există valori setate pentru apartamente mai precis în tabela 'detalii_apartament'. Dacă pentru combinația luna+an curent nu există date în acea tabelă, se execută niște instrucțiuni sql care constau în copierea datelor precedente, adică a datelor din luna precedentă, în luna și anul curent. Dacă luna curentă este ianuarie se copiază datele din decembrie anul trecut. Se copiază următoarele: denumirea apartamentului (a familiei sau persoanei care este trecută ca proprietar), suprafețele, numărul de persoane, restul valorilor se trec pe zero, respectiv consumurile de apă, încălzirea, restantele. De asemenea se copiază excepțiile, excluderile și cheltuielile generale setate pe zero. Această verificare se poate numi 'trecere la lună nouă'. Astfel, pe scurt, la pornirea aplicației se verifică data curentă, și se trece la lună nouă dacă este

cazul.

După această verificare va apărea o fereastră modală unde utilizatorul poate alege luna și anul pe care dorește să introducă sau să vizualizeze date, precum și scara blocului. Fereastra se deschide în urma verificării unor cookie-uri. Aplicația folosește cookie-uri pentru stocarea

datelor curente cum ar fi: luna, anul, informații despre suprafețele totale, numărul total de persoane sau numărul total de apartamente. Aceste informații stocate în cookie-uri sunt necesare la calculul listei de plată. După alegerea valorilor se va putea utiliza formularul de date. La închiderea browserului și repornirea aplicației, se va putea alege din nou din fereastră modală datele necesare.

Odată pornită aplicația și fiind alese opțiunile necesare la pornire (an, luna, bloc) administratorul care realizează listele de plată va putea introduce date. În partea de sus pe prima linie există opțiunea de modificare a combinației luna+an de lucru (în caz că se dorește sau nu s-a ales bine de la început). Tot aici se va afișa blocul, luna și anul curent, opțiunile de lucru. În continuare, există opțiunea de modificare a numărului apartamentelor. În general această valoare este fixă, însă e posibil ca să se modifice de exemplu prin apariția unei garsoniere modificare din uscătorie să zicem sau a unei noi firme la parterul blocului.

Butonul 'cheltuieli generale' este folosit pentru a introduce cheltuielile de natură generalistă cum ar fi salariile personalului angajat al asociației de proprietari, a valorii facturii de salubritate sau a altor cheltuieli gospodărești. Acestea se pot introduse simplu în fereastra modală care apare la apăsarea butonului 'cheltuieli generale', se pot adăuga, șterge și modifica și se pot seta în ce fel se împart fiecare valoare a cheltuielilor introduse: pe număr de persoane, pe apartament sau pe cotă parte (metri pătrați – suprafața apartamentului). Modul de împărțire a acestor cheltuieli este reglementat de normele de aplicare a legii 230/2007. Aceste cheltuieli sunt stocate în tabelul cheltuieli_generale având valorile stocate pentru fiecare luna- an-scara în parte.

Tot pe acest rând se află alte butoane cum ar fi butonul 'exceptii', care ajută la adăugarea unor scutiri la plată pentru anumite apartamente din motive diverse. Deasemenea butonul

'excluderi pierderi' va exclude de la plata eventualelor pierderi de apă anumite apartamente (de exemplu, poate fi exclusă de la plata pierderilor de apă caldă anumită firmă de la parterul scării care nu e racordată fizic la conductă de apă caldă a scării). Mai avem 2 butoane importante, 'lista ape' și 'lista de afișat' care vor afișa calculul listei cu consumul și valoarea apelor precum și lista de afișat la avizier.

Administratorul poate modifica cu ușurință valorile câmpurilor, fiecare valoare fiind introdusă în căsuța (input box) corespunzătoare. Salvarea datelor se face prin AJAX la modificarea input-ului (evenimentul 'on change'). De asemenea, pentru o introducere facilă a datelor, se poate trece la input-ul următor folosind săgețile tastaturii. Aceste acțiuni se realizează cu ușurință folosind jQuery. În partea dreaptă se pot introduce valorile pentru 1 metru cub de apă rece, canal și caldă, în lei, conform facturii de la compania de apă din

municipiu. Mai jos avem posibilitatea de a introduse numărul de metri cubi de apă consumați pe întreaga scară conform facturii de la compania de apă. După ce administratorul va introduce valorile efective consumate de fiecare apartament în parte (în urma citirii contoarelor de apă a fiecărui apartament) programul va calcula eventualele diferențe între consumul citit la subsol de compania de apă și suma consumurilor individuale. Eventualele diferențe vor fi redistribuite către fiecare apartament în parte chiar și valorile negative. De notat că aplicația se bazează în general pe combinația luna-an-scara, acestea fiind un fel de chei primare după care se ghidează programul. Acestea sunt utile pentru a păstra în baza de date un istoric care poate fi accesat oricând.

Prin accesarea butonului Lista ape din pagina principală de administrare, se deschide o nouă pagină unde este afișat un tabel ce conține valorile apelor. Astfel, se vor afișa pe fiecare rând, ce reprezintă apartamentul, următoarele: numărul apartamentului, numărul de persoane pe lună și anul în curs, consumul de apă realizat (consumul declarat prin citirea contoarelor pentru luna în curs) pe fiecare tip de apă (rece, caldă, canal), valoarea pe fiecare tip de apă precum și valorile eventualelor pierderi. Această pagină este utilă deoarece în pagina lista de afișat nu sunt defalcate calculele referitoare la apă, iar prin imprimarea acestei pagini, proprietarul nelămurit poate vedea mai ușor calculele efectuate la sumele de achitat.

Prin accesarea butonului Lista de afișat se va deschide lista ce conține toate datele pentru afișarea la avizierul scării. Aici se vor afla toate detaliile și sumele totale pe care proprietarii apartamentelor trebuie să le plătească. Se vor afișa mai multe coloane cum ar fi: consumul de apă, cheltuielile pe tip de cheltuială (pe apartament, cotă parte sau număr de persoane), încălzirea, eventualele reparații, total plată, restanțe. În partea de jos se va afla un tabel generat dinamic în funcție de cheltuielile generale introduse de administrator, unde se vor afișa cheltuielile cu valorile unitare cât și totale și tipul acelei cheltuieli (cheltuială pe apartament, cotă parte sau număr persoane).

III.1.2 Baze de date

Structura tabelelor din baza de date folosită în realizarea aplicației este următoarea: Tabela cheltuieli_generale stochează datele referitoare la cheltuieli, valoarea acestor cheltuieli, descrierea cheltuielii, tipul acesteia (cheltuială pe număr de persoane, apartament sau cotă parte) și avem de asemenea luna, anul și scara curent selectată.

Figura III.1.2 – 1 Tabela cheltuieli

Tabela detalii_apartament este tabelul principal al aplicației unde se stochează datele apartamentelor cum ar fi: numărul apartamentului, denumirea, numărul de persoane, suprafața, consumul de ape, încălzirea. Toate datele sunt stocate folosind luna, anul și scara

curent selectate. Câmpul ‘special’ se referă la faptul că este o firmă.

Figura III.1.2 – 2 Tabela detalii apartament

Tabela exceptii stochează date referitoare la excepțiile apartamentelor, de exemplu un

apartament este exceptat de la plata unei anumite cheltuieli. În tabel se trec numărul apartamentului, luna, anul, scara precum și ID-ul cheltuielii pentru care este exceptat.

Figura III.1.2 – 3 Tabela exceptii

Tabela excluderi_pierderi_apa conține date referitoare la apartamentele care sunt exceptate de la plata unor cheltuieli privitoare la apă. De exemplu, în cazul firmelor există posibilitatea ca una sau mai multe dintre acestea să nu fie conectate la rețeaua de apă caldă a blocului. Prin

urmare, acestea sunt exceptate de la împărțeala eventualelor pierderi de apă caldă.

Figura III.1.2 – 4 Tabela excluderi pierderi apă

Tabela facturi_apa conține date privind factura de apă, adică metri cubi de apă consumați de întreaga scară, precum și eventualele pierderi. Valorile sunt exprimate în metri cubi și se calculează pe baza valorilor din tabelul generale_apa prezentat mai jos. Toate valorile sunt

înregistrate pe baza lunii și anului.

Figura III.1.2 – 5 Tabela facturi apa

Tabela generale_apa stochează date referitoare la prețul unui metru cub de apă caldă, rece și

canal. Datele sunt înregistrate lunar.

Figura III.1.2 – 6 Tabela generale apa

Tabela userdata conține detaliile sumare ale apartamentului, detalii ce se completează în această tabelă la generarea listei. Aici avem datele fiecărui apartament pe fiecare lună, detalii precum: consumul de apă, totalul de plată, restanțele sau numărul de persoane.

Figura III.1.2 – 7 Tabela userdata

Mai există încă 3 tabele mai mici, după cum se poate vedea mai jos, și anume tabela care stochează parola pentru proprietarul unui apartament, tabela ce conține scările disponibile și tabela ce conține tipul de cheltuieli disponibile (cheltuieli pe număr de persoane, pe apartament sau pe cotă parte).

III.2 Implementare

Pentru a calcula valorile necesare, trebuie ca să se înțeleagă cum se pot realiza acestea și de ce date avem nevoie. Astfel, pentru calculul valorilor pe tip de cheltuială avem nevoie să cunoaștem valorile totale pentru fiecare tip de cheltuială, și anume: se va reține într-un cookie valorile totale a numărului de persoane pe lună și anul curent, numărul total de metri pătrați ai apartamentelor și numărul total de apartamente. Calculele se fac luând sumele totale introduse de administrator pe fiecare tip de cheltuială și împărțindu-le la numărul total al numărului de persoane, metri pătrați (cotă parte) sau apartamente în funcție de tipul de cheltuială.

De exemplu, dacă avem cheltuieli gospodărești și cheltuieli cu liftul, ambele fiind împărțite pe cotă parte deci metri pătrați, se vor însuma valorile acestor două. În continuare, vom avea totalul de metri pătrați ai apartamentelor scării pe care se face calculul, însumând fiecare suprafață a fiecărui apartament în parte de unde vom afla totalul metrilor pătrați. În final se împarte suma valorii cheltuielilor la totalul de metri pătrați și va rezulta o valoare pe 1 metru pătrat, unitate indivizibilă. În concluzie, pentru aflarea valorii de plată a unui apartament, se ia valoarea calculată pe 1 metru pătrat și se înmulțește cu metri pătrați ai apartamentului.

Calculele se bazează pe luna, anul și scara selectate în momentul introducerii sau vizualizării datelor. În pagina de administrare se introduc datele care sunt salvate în tabelele corespunzătoare iar la deschiderea paginii cu lista de ape sau de afișat pentru anumite coloane ale fiecărui rând se fac calcule pentru a determina ceea te trebuie afișat.

Proprietarii pot să verifice la rândul lor la o altă adresă url detaliile apartamentului în care locuiesc. Fiind web based aplicația poate fi pusă pe un server web și printr-un url proprietarii să acceseze detaliile personale după ce administratorul introduce datele pe baza facturilor de la furnizorii de apă sau încălzire.

Astfel, proprietarii pot să intre în sistem prin alegerea apartamentului corespunzător și introducerea parolei comunicate de administrator. În urma autentificării, se pot vedea detalii precum consumul de apă declarat, detalii despre apartament precum și alte valori, totodată se poate vedea istoricul totalului de plată pe lunile anterioare. Tema folosită pentru afișarea datelor în pagină pentru proprietari este bazată, la fel ca și partea de administrare, pe Bootstrap și se numește SB Admin (http://startbootstrap.com/sb-admin). Totuși, tema SB Admin folosește o versiune mai nouă de Bootstrap decât partea de administrare. Evident, această secțiune pentru proprietari interoghează aceeași bază de date ca și cea pentru partea de administrare.

Aplicația folosește intens jQuery pentru manipularea interfeței utilizator și trimiterea datelor

în backend prin AJAX. În backend PHP este folosit pentru efectuarea celor necesare iar baza de

date MySQL este folosită pentru stocarea datelor. La pornirea aplicației în mod administrare, se efectuează în PHP conectarea la baza de date, iar apoi se execută un query pe tabela detalii_apartament pentru a extrage ultima lună și ultimul an, combinate, existente în tabela. Practic va fi un select max(concat(an,luna)) from detalii_apartament. De notat că peste tot în aplicație, combinația luna+an va fi sub forma “ANLUNA” de exemplu 201312 va reprezenta anul

2013 lună DECEMBRIE. Dacă combinația luna+an găsită în tabela detalii_apartament este mai mică decât combinația luna+an a datei curente a sistemului, atunci se va intra în secțiunea “lună nouă” unde se vor executa query-urile pentru trecerea la lună nouă, respectiv inserturi de date bazate pe cele precedente. Aceste instrucțiuni insert pot să dureze un anumit timp de execuție PHP, astfel că pentru siguranță, înainte de execuția insert-urilor s-a executat instrucțiunea set_time_limit(300); care face ca durata scriptului să fie de 300 secunde (5 minute) față de 30 secunde cât este implicit limita unui script PHP (când se atinge limita serverul oprește automat scriptul, ceea ce poate duce la întreruperea trecerii de lună și astfel la date corupte în baza de date).

După această introducere de date se verifică dacă sunt setate cookie-urile scării. Dacă sunt setate înseamnă că s-a ales deja scara și restul detaliilor pentru lucrul cu aplicația în momentul de față, în caz contrar, se presupune că s-a pornit aplicația și se execută scriptul init.php ce extrage ultimele date din baza de date și le setează implicit în cookie-uri: se selectează descrescător ultimele date din tabela detalii_apartament adică luna, anul, scara, numărul total de apartamente pentru scară curentă, totalul de persoane și metri pătrați. La finalul scriptului init.php se revine la index.php cu parametrul tip GET ‘init’ ce este verificat în index.php iar dacă există se scrie din PHP un input ascuns cu o anumită valoare, care este verificat la pornirea scriptului index. Dacă input-ul ascuns pentru inițializare există, atunci la rularea index.php se execută automat o fereastră modală folosind jQuery care oferă utilizatorului posibilitatea de a alege luna, anul și blocul pentru lucrul curent.

Figura III.2 – 1 Fereastră modală

În fereastra modală, după ce utilizatorul a apăsat butonul ‘Salvează modificările’ se execută scriptul ‘data.php’. Aici se primesc datele selectate de utilizator prin GET și se interoghează baza de date folosind aceste date, iar rezultatul este introdus în cookie-uri. De notat că interacțiunea cu butoanele se realizează prin JavaScript / jQuery. După setarea acestor date, fereastra modală se închide, dar poate fi accesată oricând cu ajutorul butonului

‘Schimba’ din partea de sus în dreptul lunii și anului curent.

După ce datele principale, luna, an, scara sunt alese, se generează tabelul cu datele disponibile pentru fiecare apartament. Există definite multiple funcționalități jQuery pentru interacțiunea utilizatorului cu datele prezentate în pagina, printre primele definiții jQuery se află cea de funcționalitate privind tastele săgeților care sunt verificate la evenimentul ‘keyup’: dacă utilizatorul se află într-un input din tabelul cu date și apasă o săgeată să zicem la dreapta atunci se caută folosind jQuery următorul input disponibil și se face focus pe acesta. Acest

comportament este similar unei aplicații desktop și ușurează navigarea prin tabelă.

Figura III.2 – 2 Fereastra principală

Datele din tabela principală se generează din PHP executând o interogare select pe tabela detalii_apartament unde sunt stocate datele referitoare la apartamente pe fiecare lună,an,scara în parte. În bucla while, pe fiecare rând este afișat input-ul cu valoarea din tabelă, fiecare input având un atribut class specific (de exemplu input-urile denumire au clasa

‘denumire’). Orice modificare a valorii unui input este captată de jQuery care la încărcarea paginii mapează evenimentul ‘change’ pe fiecare input în parte, iar la modificare se trimite prin AJAX valoarea către scriptul date.php. În date.php se face un UPDATE în baza de date

cu parametri necesari primiți de la input: valoarea, numărul apartamentului aflat în atributul ID al input-ului, scara, anul și luna curentă selectate aflate în cookie. În acest mod datele se salvează foarte ușor în baza de date și în mod instantaneu fără a se pierde vreo valoare la închiderea din greșeală a ferestrei browserului de exemplu.

Coloana a 2-a conține o listă de checkbox-uri și dacă în dreptul ‘apartamentului’ este bifată această căsuță specifică faptul că apartamentul respectiv este defapt o firmă. Fiind firmă, este exclusă de la plata anumitor cheltuieli cum ar fi de exemplu cheltuielile de

curățenie pe casa scării.

Figura III.2 – 3 Detalii generale apă

În partea dreaptă a acestei pagini avem câteva detalii generale referitoare la apă. Diferența dintre căsuțele (input-urile) pentru introducerea acestor valori și cele din tabelul principal este că în partea dreaptă la o modificare a vreunei valori se reîncarcă pagina. Acest lucru este necesar pentru recalcularea tuturor valorilor implicate în proces, de exemplu la introducerea metrilor cubi pentru un anumit tip de apă în partea dreaptă (aici se introduc valorile ce se află pe factura companiei de apă ce a citit valoarea contorului general aflat la subsolul blocului) trebuiesc însumate toate valorile consumurilor individuale și afișate eventualele pierderi. În această secțiune de introducere în partea dreaptă a valorilor metrilor cubi de apă, sistemul va calcula automat după introducere diferența de metri cubi dintre ceea ce s-a introdus și suma a ceea ce s-a declarat individual. Dacă apare diferență, se înregistrează ca metri cubi de apă pierdere (poate fi și valoare negativă!) și valoarea metrilor cubi este calculată și adăugată ca și cheltuieli pentru a putea fi împărțită din nou către toate apartamentele.

Figura III.2 – 4 Secțiune cheltuieli

Butonul din partea de sus numit ‘Cheltuieli generale’ va deschide o fereastră modală unde se vor putea introduce, modifica sau șterge cheltuielile generale. Aici se vor adăuga rânduri la click pe butonul ‘Adaugă’ prin AJAX, se va alege o descriere, se va introduce valoarea, tipul de cheltuială și pentru ce bloc este și va fi disponibil și un buton de ștergere. La final se poate da click pe butonul ‘Salvează modificările’ iar ceea ce s-a adăugat sau modificat va fi salvat în tabela cheltuieli_generale. Aceste cheltuieli generale vor apărea pe lista de plată în partea de jos sub forma unui tabel. Apar doar cheltuielile efectiv introduse pe lună și anul

curent care au valori mai mari decât zero.

Figura III.2 – 5 Generare lista de plată

Lista de plată reprezintă pagina care generează lista de afișat la avizierul blocului. În partea de sus dreapta este generată data scadenței automat bazată pe data sistemului. Titlul foii de plată se generează din cookie-ul ce stochează datele referitoare la luna anul și scara curent selectate de administrator. Pentru fiecare apartament se afișează detaliile acestuia precum consumurile de apă și valorile acestor consumuri, încălzirea, cheltuielile de persoane, apartament, cotă parte, precum și restanțele și totalul de plată. Pe ultimul rând al tabelului cu apartamentele se află totalul general iar în partea de jos, dedesubtul tabelului principal se află un alt tabel ce reprezintă cheltuielile generale defalcate (cheltuieli gospodărești, curentul pe scară, salarii, etc) precum și valorile unui metru cub de apă. În acest mod proprietarii vor avea informații complete referitoare la cheltuielile asociației. Se ține cont și de excepțiile sau excluderile introduse de administrator iar, dacă este cazul, acestea se aplică pentru cazul respectiv.

Se generează separat și o altă foaie numită ‘lista ape’(mai multe detalii la secțiunea ‘lista ape’) ce conține detalii referitoare la calcului apei și eventualele pierderi avute pe scară și împărțite pe fiecare apartament în parte.

După cum am menționat anterior, aplicația este disponibilă și pentru proprietari. Aceștia pot să-și verifice datele cum ar fi consumul de apă, restanțele sau totalul de plată prin accesarea unui link și autentificarea în sistem. Pentru autentificare este necesară generarea de către administrator a unei parole și comunicarea către proprietar a acestei parole. Generarea

unei parole se face în pagina de administrare.

Figura III.2 – 6 Generare parole proprietari

Administratorul poate genera o parolă alegând un apartament din listă. După selecție se trimite prin AJAX numărul apartamentului și scara curent selectată și se generează o parolă folosind o mică funcție PHP. Practic este un string random care se generează apăsând butonul generează parola, iar răspunsul va veni prin AJAX într-un html element html. Parolele se stochează într-un tabel numit parola. Funcția ce generează parola este următoarea:

function dopass()

{

$randomstring = "";

$cifre = "0123456789";$literemici = "abcdefghijklmnopqrstuvwxyz";$literemari="ABCDEFGHIJKLMNOPQRSTUVWXYZ";

$lc = strlen($cifre);$ll= strlen($literemici);

$nrcaractere = 10;

$i=0;

for($i=0;$i<$nrcaractere;$i++)

{

$tip = rand(0,2);

if($tip == 0) $randomstring .= substr($cifre,rand(0,$lc – 1),1); if($tip == 1) $randomstring .= substr($literemici,rand(0,$lc – 1),1); if($tip == 2) $randomstring .= substr($literemari,rand(0,$lc – 1),1);

}

return $randomstring;

}

Se poate seta numărul de caractere a parolei în funcție, dar în cazul nostru și în tabelă câmpul de parolă are 10 caractere. Practic în funcție avem o înșiruire de litere și cifre iar apoi se aplică funcția internă PHP rand() care alege aleator cifre și litere. Odată generată o parolă,

proprietarul se poate autentifica.

Figura III.2 – 7 Autentificare

Figura III.2 – 8 Autentificare

În formularul de autentificare precum și în pagina de generare a parolei se folosește jQuery pentru a trimite și recepționa date prin AJAX. În cazul formularului de autentificare, întâi este necesar ca userul să selecteze scara. După selecția scării se trimite această selecție prin ajax, iar apoi se primește răspunsul care va consta în umplerea apartamentelor în lista de apartamente potrivit scării alese. Aceste operațiuni se realizează folosind codul următor:

$('#scari').change(function(){

$('#loader').show();

$.ajax({

url: "executor.php?ajaxdo=apartamente&idscara="+$('#scari').val()

}).done(function(data){

$('#apartamente').html(data);

$('#loader').hide();

});

});

Practic la change-ul (schimbarea valorii) combo-ului scări se afișează o mică imagine animată GIF iar apoi se trimit datele prin ajax către EXECUTOR.PHP cu anumiți parametri, iar la final se pune răspunsul în combo-ul apartamentelor și se ascunde animația. În momentul autentificării se trimit datele folosind HTML POST și se verifică baza de date respectiv tabela cu parole, iar dacă interogarea tabelei a avut succes atunci se introduc în COOKIE-uri datele proprietarului și se deschide pagina cu informații.

Pagina de utilizare ce îi revine proprietarului afișează date din tabela userdata, tabela care se actualizează la generarea listei. Practic la generarea listei de afișat se face o copie sumară a datelor în tabela userdata, cum ar fi: totalul de plată, totalul consumului de apă, restanțele sau numărul de persoane la întreținere. Am considerat că trebuie o tabelă separată pentru aceste detalii deoarece la generarea listei de plată sunt calcule mai complexe care nu își au rostul să fie executate la afișarea unor date sumare pentru proprietar. Datele sunt salvate pentru fiecare apartament în parte și pentru fiecare lună.

Capitolul IV. Concluzii

Aplicația în sine, destinată asociațiilor de proprietari respectiv administratorilor, are menirea de a ușura și de a sistematiza munca acestora din urmă. În prezent în țara noastră există un anumit număr de administratori de asociații care folosesc metode neinformatizate de calcul, acest lucru fiind un procedeu anevoios, care necesita multă muncă și atenție în același timp, etapele de calcul fiind destul de greu de urmărit. În orice clipă există posibilitatea de a introduce una sau mai multe erori de calcul, care pot avea implicații grave, având în vedere că în fond este vorba de sume de bani și orice inexactitate are o influență directă asupra locatarilor și implicit asupra administratorului responsabil de asociație. Deci automatizarea acestei munci este mai mult decât oportună. Prin realizarea acestei aplicații, consider că se simplifică destul de mult munca administratorului, cu o economie de timp estimată de cel puțin 50%.

Totodată, aplicația este disponibilă și pentru proprietari, care pot să-și verifice datele cum ar consumul de apă, totalul de plată sau restanțele pe care le au în acel moment. Acest lucru se realizează prin accesarea unui link și autentificarea în sistem a proprietarilor, în acest sens fiind necesară genererea de către administratorul asociației de proprietari a unei parole și comunicarea către proprietar a acesteia. Astfel proprietarii pot să intre în sistem prin alegerea apartamentului corespunzător și introducerea parole comunicate de administrator.

În plus, pentru a îmbunătăți experiența utilizatorilor, aplicația web este responsivă, acesta putând fi accesată de pe orice dispozitiv mobil. Acest lucru este un avantaj major datorită faptului că din ce în ce mai mulți oameni navighează pe internet folosind dispozitive mobile.

Realizarea acestei aplicației este flexibilă, deoarece, spre deosebire de alte aplicații care doresc să soluționeze această problemă, consider că am găsit un model foarte flexibil pentru a implementa contorizarea apartamentelor care fac parte din asociațiile de propriatari. Alte aplicații, de exemplu, au câmpuri de informație specializate pentru contoarele de apă, de căldură și altele, iar în momentul în care se include un nou tip de contorizare trebuie scris din nou codul aplicației. În schimb, aplicația clarifică această problemă prin introducerea unui termen generic numit consum, cu sprijinul căruia oricare tip de consum indicat la nomenclatorul de tipuri de consum poate fi practic contorizat. În mod concomitent, dacă un apartament este debranșat de la un anumit tip de serviciu, este destul ca pentru apartamentul în cauză să se introducă la consumuri un consum cu valoare egală cu zero.

De asemenea consider că am gestionat într-un mod elegant problema modificărilor care intervin de la o lună la alta cu privire la apartamente(numărul de persoane, proprietar, suprafață, etc.) prin legarea structurii apartamentelor de lună de prelucrare, astfel încât orice modificare care intevine la nivel de apartament este recunoscută numai pentru luna curentă de prelucrare. Acest mod de abordare permite în același timp și o evidență exactă a situației, pentru oricare din lunile precedente.

Nu în ultimul rând, proiectul are și o valoare academică, implementarea sa fiind o oportunitate perfectă de a dobândi cunoștințe noi și aptitudini tehnice, de a învăța cele mai recente tehnologii web și mobile folosite în prezent la scară largă.

Bibliografie

[1] HOTARÂRE Nr. 1588 din 19 decembrie 2007. Norme metodologice de aplicare a Legii nr. 230/2007 privind înființarea, organizarea și funcționarea asociațiilor de proprietari, http://www.mmuncii.ro/pub/imagemanager/images/file/Legislatie/HOTARARI-DE- GUVERN/HG1588-2007.pdf, (consultat la 18.05.2014)

[2] jQuery, http://jquery.com/, (consultat la 16.04.2014)

[3] PHP, http://en.wikipedia.org/wiki/PHP , (consultat la 20.04.2014)

[4] Bootstrap, http://www.scs.ubbcluj.ro/~oisd0802/Prezentare/PrezentareBootstrap.htm, (consultat la 10.04.2014)

[5] MSQL.The MySQL Access Privilege System, http://dev.mysql.com/doc/refman/5.1/en/privilege-system.html, (consultat la 8.04.2014) [6] Responsive Design , http://ctrl-d.ro/design/resurse-design/o-scurta-introducere-in- responsive-web-design/, (consultat la 12.05.2014)

[7] Sublime Text, http://en.wikipedia.org/wiki/Sublime_Text,(consultat la 12.03.2014)

[8] phpMyAdmin. About phpMyAdmin, http://www.phpmyadmin.net/home_page/index.php, (consultat la 14.05.2014)

[9] EasyPHP. Introduction, http://www.easyphp.org/introduction.php, (consultat la

20.05.2014)

[10] phpMyAdmin. Features, http://www.phpmyadmin.net/home_page/index.php, (consultat la 14.05.2014)

[11] Ajax. Ajax(programare), http://ro.wikipedia.org/wiki/Ajax_(programare), (consultat la

15.05.2014)

[12] Apache. About Apache, http://httpd.apache.org/ABOUT_APACHE.html (consultat la

13.05.2014)

DECLARAȚIE DE AUTENTICITATE

A

LUCRĂRII DE FINALIZARE A STUDIILOR

Titlul lucrării: Aplicație web care generează lista de plată pentru asociațiile

de proprietari

Autorul lucrării: Șerban Sergiu Florin

Lucrarea de finalizare a studiilor este elaborată în vederea susținerii examenului de finalizare a studiilor organizat de către Facultatea de Inginerie Electrică și Tehnologia Informației din cadrul Universității din Oradea, sesiunea iulie a anului universitar 2013-2014.

Prin prezenta, subsemnatul Șerban Sergiu Florin, [anonimizat], declar pe proprie răspundere că această lucrare a fost scrisă de către mine, fără nici un ajutor neautorizat și că nici o parte a lucrării nu conține aplicații sau studii de caz publicate de alți autori.

Declar, de asemenea, că în lucrare nu există idei, tabele, grafice, hărți sau alte surse folosite fără respectarea legii române și a convențiilor internaționale privind drepturile de autor.

Oradea,

Data: 26.06.2014 Semnătura