Aplicatie Web de Management al Cheltuielilor Unui Bloc

APLICAȚIE WEB DE MANAGEMENT AL CHELTUIELILOR UNUI BLOC

Cuprins

I. STADIUL ACTUAL

În general managementul și menținerea evidenței cheltuielilor locatarilor dintr-un bloc de locuințe se realizează cu ajutorul programului Microsoft Office Excel dar si cu aplicații special create pentru acest scop. Acestea din urmă sunt realizate ca aplicații care sunt folosite de administratorii blocurilor pentru adăugarea de consumuri de apă caldă, apă rece, energie termică sau consumul comun de energie electrică fară ca locatarii imobilului să poată interacționa sau să poată să aibe acces la informațile din aplicație. Acestea trebuie să fie introduse manual de către administrator pentru fiecare apartament în parte astfel făcând treaba administratorului mai anevoioasă.

În prezent există aplicații care pot genera și în același timp pot lista tabelul de cheltuieli pentru asociațiile de locatari. Pe lângă aceste facilități de bază, unele aplicații ca de exemplu programul Bloc Manager include și calculul salariilor administrațiilor de blocuri, registrul de casă și bancă, evidența fondurilor sau situația soldurilor. Deși aplicațile destinate managementului cheltuielilor unei asociații de locatari au interfețe ergonomice și intuitive pentru a ușura munca administratorului, acestea sunt destinate exclusiv acestora din urmă, astfel locatarii unui bloc nu simt beneficiile achiziționării unui astfel de program, administratorii putând să își facă treaba și fără aceste tipuri de programe. În momentul de față nu există astfel de aplicații care să interacționeze și cu locatarii nu doar cu administratorii, acest lucru putând ușura munca administratorilor de bloc.

Aplicațiile web ar putea permite locatarului interacționarea cu aplicația în cauză în special pentru introducerea consumului afișat pe contoarele de apă caldă sau apă rece. Cu ajutorul aplicațiilor web locatarii pot să verifice tabloul cheltuielilor din orice punct cu conexiune la internet astfel crescând gradul de confort al locatarului. Aplicația web permite interacționare mai ușoară a locatarului cu administratorul blocului, permite accesul la informații legate de imobilul de locuit al acestuia ca de exemplu afișarea pe paginile web al aplicației știri, galerii foto cu lucrările relizate în cadrul blocului sau chiar tabelul de cheltuieli.

Există un număr scăzut de astfel de tipuri de aplicații, în general cele gratuite nu ajută în totalitate administratorul iar cele care au un set mai mare de facilități sunt destul de costisitoare și ar putea să nu își aibe rostul achiziționarea acestora.

În general aplicațiile de management au ca scop evidența colectării și repartizării cheltuielilor pe apartamente și realizarea tabelului de cheltuieli, evidența încasărilor, al restanțelor sau al penalizărilor, evidența modului de utilizare al fondurilor de reparații sau al fondurilor speciale. Unele programe au secțiuni de situații și rapoarte ca fișa de apartament care centralizează operațiunile per apartament, registre de apartament cu fondul de rulment, penalizări sau fondul de reparații, registru de inventar unde gasim soldurile care sunt comparate cu valorile actuale, situația apartamentelor, registru jurnal contabil (operațiile de contabilitate efectuate) sau balanță de conturi.

II. FUNDAMENTAREA TEORETICĂ

2.1.Generalități ale limbajului HTML

Limbajul HTML sau Hyper Text Markup Language este un limbaj standard de marcare folosit pentru realizarea paginilor web care pot fi văzute cu ajutorul browser-elor (Firefox, Google Chrome, Internet Explorer, etc.). Elementele principale ale acestui limbaj sunt tag-urile care sunt reprezentate prin două paranteze în unghi (exemplu: <html>).

Tag-urile sunt reprezentate în cele mai multe cazuri în perechi, un tag pentru deschidere (<p>) iar altul pentru închidere (</p>) dar exista și tag-uri care nu au pereche ca de exemplu tag-ul pentru inserarea unei imagini <img> sau tag-ul break <br> care ne duce la o linie nouă. Cu ajutorul tag-urilor browser-ele reușesc să interpreteze informația din pagină iar tag-ul <html> indică tipul documentului și tot odată este containerul elementelor HTML.

Elementele HTML stau la baza oricărui website, HTML permite înglobarea imaginilor sau al obiectelor în pagini astfel pot fi folosite la crearea unor pagini interactive.

Exemplu de fișier HTML:

<HTML>

<HEAD>

<TITLE>Titlul paginii</TITLE>

</HEAD>

<BODY>

<H1>Titlul unei secțiuni</H1>

<P>

Primul rând<BR>

Al doilea rând<BR>

Al treilea rând <BR>

Al patrulea rând <BR>

</P>

<IMG src=”ruta spre imagine” alt=”textul alternativ”>

</BODY>

</HTML>

În exemplul de mai sus <HTML>…</HTML>, <HEAD>…</HEAD>, <BODY>…</BODY> și asa mai departe sunt tag-uri sau marcaje HTML. Se observă că informația propriu-zisă este încadrată între marcaje <H1>…</H1> și <P>…</P>. Marcajul <H1>…</H1> încadrează un titlu iar <P>…</P> încadrează un paragraf. Conținutul fișierului conține și marcajul <BR> care indică trecerea la linie nouă sau marcajul pentru inserarea unei imagini <IMG> aceste două marcaje neavând pereche.

Unele marcaje pot avea și atribute care sunt poziționate in interiorul marcajului de deschidere. În exemplul anterior marcajul <IMG> conține două atribute, src=”ruta spre imagine” care identifică locația imaginii pe care vrem să o folosim iar celălalt atribut este alt==”textul alternativ” cu ajutorul căreia se poate face o descriere al imaginii în cazul în care imaginea nu poate fi afișată sau dacă pagina este folosită de o persoană cu dezabilități de vedere astfel cu ajutorul programului JAWS (aplicație screen reader) aceasta poate să înțeleagă cuprinsul imaginii.

2.2. Generalități ale limbajului CSS

Limbajul CSS sau Cascading Style Sheets este un limbaj de stilizare și formatare al înfățișării paginilor web scrise într-un document cu un limbaj markup (exemplu HTML). Deși cel mai des folosit pentru schimbarea stilului unei pagini web scrise în limbajul HTML sau XHTML, limbajul poate fi folosit pentru orice tip de document XML.

Limbajul CSS este conceput pentru a separa conținutul documentului de cum acesta va fi prezentat sau afișat, incluzând elemente ca culoare, font sau încadrarea în pagină al conținutului. Această separare poate să înbunătățească accesabilitatea la conținut, aduce mai multă flexibilitate și control, permite mai multe pagini web să folosească aceleași caracteristici prin intermediul unui fișier .css astfel reducând complexitatea și repetarea structurii în conținut. CSS permite separarea instrucțiunilor de prezentare față de conținutul HTML printr-un fișier separat sau printr-o secțiune separată în interiorul conținutului HTML.

CSS are o sintaxă simplă și se folosește de cuvinte cheie din limba engleză pentru a specifica numele diferitelor proprietăți de stil. Un fișier .css conține o listă de reguli, fiecare regulă conține unul sau mai mulți selectori și un bloc în care se fac declarațile de stil.

Avantajul acestei soluții constă din faptul că aspectul paginilor site-ului în care este inclus fișierul .css poate fi ușor modificat, prin simpla editare a regulilor conținute de acesta.

Exemplu de fișier CSS:

#dreptunghi{

width:900px;

height:400px;

border: 2px solid black;

}

h1{

color: green;

font-weight:bold;

}

În exemplul de mai sus sau folosit selectorii de tip atribut #dreptunghi și de tip element h1. Astfel folosirea atributului dreptunghi creează un chenar cu dimensiunile de 900×400 pixeli iar selectorul de tip element h1 schimbă orice text aflat între marcajele <H1>…</H1>, schimbarea constând în modificarea culorii textului în verde și îngrosarea textului prin declarația font-weight:bold.

Limbajul CSS folosește id ca și identificator unic într-un document si class ca și identificator care grupează mai multe elemente dintr-un document. Clasele și id-urile sunt case-sensitive, încep cu o literă și includ caractere speciale si alfanumerice.

2.3. Generalități ale limbajului PHP

Limbajul PHP sau Hypertext Preprocessor este un limbaj server-side creat pentru development-ul website-urilor dar poate fi folosit și ca limbaj de programare general. Codul PHP poate fi amestecat cu usurință în conținutul codului HTML, acesta este de obicei procesat de un așa numit PHP interpreter.

Exemplu de fișier PHP:

<HTML>

<HEAD>

<TITLE>Titlul paginii</TITLE>

</HEAD>

<BODY>

<?php

echo ‘<p>Hello World!</p>’;

?>

</BODY>

</HTML>

În exemplul de mai sus Hello World! Este scris în cod PHP înglobat într-un document scris în limbajul HTML. Interpretorul PHP execută numai codul PHP aflat între marcajele <?php… ?> , orice se află în afara acestor marcaje nu va fi procesat de PHP.

Familiaritatea : sintaxa limbajului este foarte ușoară combinând sintaxele unora din cele mai populare limbaje Perl sau C;

Simplitatea : sintaxa limbajului este destul de liberă. Nu este nevoie de includere de biblioteci sau de directive de compilare, codul PHP inclus într-un document executându-se între marcajele speciale;

Eficiența : PHP-ul se folosește de mecanisme de alocare a resurselor, foarte necesare unui mediu multiutilizator, așa cum este web-ul;

Securitate : PHP-ul pune la dispoziția programatorului un set flexibil și eficient de măsuri de siguranță;

Flexibilitate : fiind apărut din necesitatea dezvoltării web-ului, PHP a fost modularizat pentru a ține pasul cu dezvoltarea diferitelor tehnologii. Nefiind legat de un anumit server web, PHP-ul a fost integrat pentru numeroasele servere web existente: Apache, IIS,  etc.;

Gratuitate : este probabil cea mai importantă caracteristică a PHP-ului. Dezvoltarea PHP-ului sub licența open-source a determinat adaptarea rapidă a PHP-ului la nevoile web-ului, eficientizarea și securizarea codului.

PHP poate rula pe majoritatea sistemelor de operare, de la UNIX, Windows, sau Mac OS X și poate interacționa cu majoritatea serverelor web. Codul PHP este interpretat de serverul WEB și generează un cod HTML care va fi văzut de utilizator (clientului -browserului- fiindu-i transmis numai cod HTML).(ro.wikipedia.org/wiki/PHP)

2.4. Generalități ale limbajului SQL

Limbajul SQL sau Structured Query Language este un limbaj de programare special conceput pentru interogarea si manipularea datelor iar la origine este un limbaj bazat pe algebra relaționară.

SQL are ca scop interogarea datelor (query), inserarea datelor (insert), ștergerea datelor (delete) sau modificarea datelor (update), modificarea și schimbarea tabelelor.

Elementele limbajului SQL:

Limbajul SQL este divizat în următoarele elemente:

Clauze, care sunt componente ale instrucțiunilor și interogărilor.

Expresii, al căror efect este producerea de valori scalare sau tabele.

Predicates, pot specifica condiții care sunt evaluate de SQL conform logicii ternare sau logicii boolean, în scopul limitării efectelor instrucțiunilor, sau pentru a influența cursul programului.

Interogările, au ca scop regăsirea datelor după criterii specifice.

Instrucțiunile, pot avea un efect persistent asupra datelor sau structurii datelor, sau pot controla tranzacțiile, conexiunile sau cursul programului. În general, instrucțiunile SQL se termină cu caracterul punct-virgulă (";"), deși acest lucru nu este obligatoriu în toate platformele SQL. Spațiile albe suplimentare sunt ignorate, dar ele pot fi folosite pentru lizibilitatea codului SQL.

Exemplu de interogare folosind SQL:

SELECT coloana1 FROM tabel2 WHERE date>’21-AUG-2010’;

Query-ul de mai sus selecteaza din tabel2 rândurile din coloana1 care au coloana date > 21-AUG-2010.

Tipuri de date in SQL:

Oricărei coloane (sau câmp) dintr-un tabel SQL îi este asignat un tip de dată, la fel ca în toate celelalte limbaje de programare. Tipurile de date sunt următoarele:

CHARACTER (sau CHAR) – șir de caractere

INTEGER (sau SMALLINT) – număr întreg

FLOAT, REAL sau DOUBLE PRECISION – număr real

NUMERIC(precision, scale) sau DECIMAL(precision, scale) – număr zecimal , unde “precision” înseamnă numărul de cifre din partea întreagă, “scale” înseamnă numărul de zecimale.

DATE – data zilei.

TIME – ora. (ro.wikipedia.org/wiki/SQL)

2.4.1 Comenzi SQL

CREATE DATABASE – “Nume_DB”

SHOW DATABASES –arată toate bazele de date existente

DROP DATABASE “Nume” –șterge baza de date Nume

SELECT coloana1 FROM tabel1 –selectează coloana1 din tabelul1

SELECT coloana1,coloana2 FROM tabel1 WHERE coloana2=”20” ORDER BY coloana1

CREATE TABLE tabel1 (

id_tabel1 SERIAL,

nume VARCHAR(25) NOT NULL,

prenume VARCHAR(15) NOT NULL,

descriere VARCHAR(255) NOT NULL)

Comanda INSERT INTO

INSERT INTO tabel1(id_tabel1, nume, prenume, descriere) VALUES (valoare1, valoare2, valoare3, valoare4)

Valorile trebuie să fie scrise în acceași ordine în care numele coloanelor sunt ordonate. Prima valoare este inserată în coloana care este numită prima în lista de coloane, valoarea a doua este inserată în coloana numită a doua în lista de coloane și așa mai departe. În cazul în care nu se dau valori la toate coloanele, acele coloane care nu au valori vor rămâne goale dacă nu au altă valoare implicită definită.

Lista de coloane și lista de valori trebuie să fie egală, lista de coloane nu e întotdeauna necesară. Dacă se inserează valori pentru toate coloanele nu mai este nevoie listarea coloanelor dar trebuie să se respecte ordinea valorilor introduse în tabel.

Clauza WHERE

WHERE expresie AND/OR expresie AND/OR expresie…

Comanda ALTER

Table 1 – Comanda ALTER

Comanda UPDATE

UPDATE nume_tabel SET coloana1=valoare1,coloana2=valoare2,…

WHERE clauză

Comanda DELETE

DELETE FROM nume_tabel WHERE clauză

2.5. Generalități Notepad++

Notepad++ este un editor de text si editor de cod sursă gratuit conceput pentru sistemul de operare Windows. Permite si conține drag and drop, deschiderea a mai multor ferestre în taburi spre deosebire de Notepad, spell checker, find and replace, zoom in și zoom out, auto completare, semn de carte, semnalizarea marcajelor și indentarea lor. Notepad++ suportă peste 50 de limbaje, încearcă să detecteze automat limbajul folosit de fișier.

2.6. Generalități MySQL

MySQL sau My Sequel este al doilea cel mai folosit sistem de management al bazelor de date relaționare și cel mai folosit open-source RDBMS (rational database management system). Proiectul de development al MySQL și-a făcut codul sursă accesibil tuturor datorită lui Oracle Corporation care au cumpărat My SQL de la o firmă din Suedia numită MYSQL AB.

MySQL este o alegere populară de bază de date pentru aplicații web și e componenta centrală pentru XAMPP o aplicație open-source care conține HTTP Server, bază de date MySQL și interpretează scripturi scrise în limbajul PHP și limbajul de programare Perl.

Există și câteva ediții de MySQL care sunt disponibile prin plată și care au funcționalități în plus. Aplicații care folosesc baza de date MySQL sunt următoarele: WordPress, TYPO3, MyBB, MODx, Drupal, Joomla, phpBB și alte programe software. MySQL este folosit și de site-uri web mari și de renume ca Google, Twitter, Facebook, YouTube sau Flickr. MySQL este primit fără unelte GUI (Graphical User Interface) cu care să poți administra baza de date MySQL sau datele ce le conține baza de date. Userii pot să folosească uneltele de command line incluse sau pot să folosească MySQL front-ends, software desktop și aplicații web care creează și manageriază baze de date MySQL, care construiesc structuri de baze de date, face back up la date sau inspectează status.

MySQL este oferit în două ediții diferite, MySQL Community Server care e de tip open-source deci gratuit și Enterprise Server care nu e gratuit. Cel din urmă este diferențiat printr-o serie de extensii pe care cel gratuit nu le deține dar în principiu sunt construite din același cod sursă.

MySQL funcționează pe multe platforme ca de exemplu BSDi, AIX, HP-UX, i5/OS, IRIX, eComStation, Microsoft Windows, Linux, NetBSD, OS x, Novell NetWare, OpenSolaris, OS/2 Warp, SCO, UnixWare, QNX, Symbian, Sanos, OpenServer .Este scris în C și C++.

Această aplicație are și limitări, spre deosebire de alte baze de date SQL, MySQL nu respectă standardul SQL în totalitae pentru unele din funcționalitățile implementate, incluzând chei străine atunci când se folosește motorul de stocare (storage engine) InnoDB. Până la versiunea MySQL 5.7, trigger-urile sunt limitate la una per acțiune, însemnând că cel mult un trigger poate fi folosit la executarea unei operații INSERT. Ca multe alte baze de date tranzacționale, MySQL este foarte limitat de performanța hard disk-ului, mai ales în cazul scrierii. Poate fi construit și instalat manual având acces la codul sursă dar se preferă varianta de a instala MySQL în cazul în care nu e nevoie de customizarea acestuia.

Deși MySQL a început ca o alternativă low-end sau slabă în comparație cu alte baze de date mai puternice, a evoluat gradual să suporte mai multe funcționalități.

2.7. Generalități XAMPP

Numele XAMPP este un acronim pentru:

X – menit a fi citit ca și cross , însemnând cross-platform

Apache HTTP Server

MySQL

PHP

Perl

XAMPP poate fi descărcat prin intermediul unui singur fișier zip, tar, 7z sau exe, are nevoie minimă de configurare al componentelor sau chiar deloc. XAMPP este de regulă modificat să încorporeze cele mai noi release-uri ale Apache, MySQL, PHP și Perl. Conține și alte module ca OpenSSL și phpMyAdmin. Mai multe istanțe ale XAMPP pot exista în același timp pe un computer și acestea pot fi copiate de pe un computer pe altul cu ușurință, este disponibil în versiunea standard și în versiunea cu dimensiuni mai scăzute.

XAMPP a fost creat pentru a pune la dispoziția dezvoltatorilor un instrument eficient de testare. Odată instalat pe calculatorul propriu, pachetul de aplicații va face ca acesta să aibă comportamentul unui server, permițând testarea aplicațiilor scrise fără a intra în conflict cu firma care va găzdui în final produsul software realizat. Acesta are și o variantă lite, XAMPP lite , care poate fi utilizată după descărcare și dezarhivare fără a fi necesară instalarea.

După instalare, prezența pe calculator a pachetului de aplicații se manifestă prin aplicația XAMPP Control Panel Application.(Fig 2.7)

Fig 2.7 – Panoul de control XAMPP

După lansarea în execuție a acestei aplicații se vor apăsa butoanele Start din dreptul celor două aplicații esențiale testării saiturilor : Apache și MySQL. Dacă se utilizează varianta XAMPP Lite, se dezarhivează arhiva descărcată de pe internet în rădăcina discului care va fi folosit pentru testarea site-urilor.

2.7.1. Apache HTTP Server

Serverul Apache este cel mai folosit server web pe scară mondială, a fost înființat în 1995 și a jucat un rol important în creșterea inițială a World Wide Web. Acesta este o aplicație de tip server folosit de aplicațiile web. Numele de Apache a fost ales în semn de respect pentru tribul de americani nativi Apache.

Ca aplicație, serverul pentru web accesează un ansamblu de fișiere dispuse pe discul calculatorului pe care acesta este instalat. Dacă o aplicație client solicită un fișier existent, serverul pentru web îl va furniza respectând regulile unui protocol precizat în cererea clientului (http).

Apache server se află în continuă schimbare și este menținut de o comunitate deschisă sub numele de Apache Software Foundation. Acesta este o component software open-source asta însemnând că este gratuită. Din Iunie 2013 serverul Apache este estimat să servească 54% din toate website-urile active și 53% din serverele de top din toate domenile.(curs RAW)

2.7.2. PHPMyAdmin

PHPMyAdmin este o unealtă sofware gratuită scrisă în limbajul PHP și are ca scop administrarea MySQL pe internet. Acesta poate efectua o serie largă de operații ca managementul bazelor de date, al tabelelor, coloanelor, indecșilor, utilizatorilor, relațiilor, permisiunilor, etc. Toate aceste operațiuni sunt realizate prin intermediul interfeței pe care PHPMyAdmin o oferă astfel folosirea acestia este mult mai ușoară decat folosirea prin command line.

2.8. Testarea aplicațiilor web

O aplicație web sau de orice alt tip care să nu aibe nici un singur defect nu există, dar asta nu ne împiedică să testăm aplicația astfel încât aceasta să funcționeze la parametrii maximi. Testarea se efectuează înainte ca aplicația să fie oferită publicului astfel împiedicând nemulțumirea acestuia sau al clientului în cazul în care aplicația nu e gratuită.

Scopul principal al testării este identificarea defectelor și repararea acestora, nu toate defectele sunt cauzate de erori care la rândul lor sunt cauzate de scrierea incorectă a codului de către developer și nu toate defectele duc la eșuarea aplicației. Se testează pentru a se verifica dacă componenta software întrunește cererile care au ghidat design-ul și creaea acesteia, dacă răspunde cum este menită cu diferiți parametrii, dacă își rezolvă funcțiunile într-un timp acceptabil, dacă este user friendly (ușor de folosit, de învățat, intuitivă, ușor de reținut), poate fi instalată și rulată în mediurile dorite și se mai verifică dacă întrunește rezultatele dorite de clienți.

III IMPLEMENTAREA SOLUȚIEI ADOPTATE ȘI REZULTATE EXPERIMENTALE

3.1 Generalități implementare

Pentru realizarea aplicației s-au folosit limbajele HTML, CSS, PHP, SQL și s-au folosit aplicațiile Xampp, serverul Apache, PHPMyAdmin și Notepad++. Aplicația este de tip web astfel aceasta a fost testată pe browser-ele Google Chrome și Mozila Firefox.

Aplicația noastră conține 16 fișiere cu cod sursă din care 3 sunt de tip .html, 12 de tip .php iar una de tip .css. Paginile care conțin limbajul php au acces la baza de date iar fișierul .css este folosit pentru formatarea și poziționarea paginilor web. Aplicația conține pagini web ca Home, Contact, Noutăți, Galerie, Cheltuieli, Citire contoare și pagina administratorului.

Pentru introducerea imaginilor în conținutul paginilor web s-a folosit următorul cod sursă:

<img src="imagini/home.png">

Pentru crearea link-urilor s-a utilizat:

<a href="index.html">Link</a>

Pentru titluri s-a folosit:

<h1 class="scris_logo1">Asociatie</h1>

<h2 class="scris_logo2">LOCATARI</h2>

Pentru formulare s-a folosit:

<form class="form3" action="contoare.php" method='POST'>

</form>

Pentru tabele s-a folosit:

<table border=1>

<tr>

<td>Selectati imaginea : </td>

<td><input type="file" name="imagine" /></td>

</tr>

</table>

3.1.1 Schemă bloc aplicație web

3.2 Pagina Home

Pagina Home conține codul sursă în fișierul index.html și este pagina principală al aplicației, de aici se poate naviga în interiorul întregului program cu ajutorul link-urilor Home, Contact, Noutăți, Galerie, Cheltuieli și Citire contoare care redirecționează utilizatorul spre pagina selectată. Aceste link-uri sunt situate în meniul principal numit și main navigation bar. (Fig 3.2.1)

Fig 3.2.1 – Meniul principal

Pentru implementarea meniului principal s-a folosit următorul cod sursă:

Cod HTML

<div id="menu">

<ul>

<li><a href="index.html">Home</a></li><img src="imagini/li.jpg">

<li><a href="contact.html">Contact</a></li><img src="imagini/li.jpg">

<li><a href="noutati.php">Noutati</a></li><img src="imagini/li.jpg">

<li><a href="galerie.php">Galerie</a></li></a></li><img src="imagini/li.jpg">

<li><a href="cheltuieli.php">Cheltuieli</a></li></a></li><img src="imagini/li.jpg">

<li><a href="signin.php">Citire contoare</a></li><img src="imagini/li.jpg">

</ul>

</div>

Cod CSS

#menu{

background:url("imagini/menu.jpg");

height:60px;

padding-bottom:10px;

}

#menu li{

float:left;

font-size: 24px;

font-family: Blagovest;

font-weight: bold;

padding-left:15px;

padding-right:15px;

padding-top:20px;

}

Link-urile se pot găsi și în piciorul paginii astfel facilitând interacțiunea dintre aplicație și utilizator. (Fig 3.2.2)

Fig 3.2.2- Meniul din piciorul paginii

Pentru implementarea meniului din piciorul paginii s-a folosit următorul cod sursă:

<footer>

<div id="footer1">

<a href="galerie.php"><img id="footer3" src="imagini/footer1.jpg"></a>

<div id="footer4">

<ul>

<li><a href="index.html">HOME</a></li>

<li><a href="noutati.php">NOUTATI</a></li>

<li><a href="contact.html">CONTACT</a></li>

<li><a href="galerie.php">GALERIE</a></li>

<li><a href="cheltuieli.php">CHELTUIELI</a></li>

</ul>

</div>

</div>

<div id="footer2">

</br></br>

<p>ASOCIATIE LOCATARI © 2015 | DESIGN BY: Alexandru Ungur</p>

</div></footer>

Cod CSS

#footer1 {

height: 250px;

width: 1000px;

background:#1c1c1c;

}

#footer2 {

height: 100px;

width: 1000px;

background:url("imagini/banner.png");

font-size:15px;

font-family:Blagovest;

text-align:center;

color:#1c1c1c;

}

#footer3{

position:absolute;

margin-left:55px;

margin-top:20px;

height:200px;

width:600px;

border: 2px solid #E5E4E2;

}

#footer4 ul{

list-style-type: none;

padding-left:770px;

padding-top:6px;

}

#footer4 li{

font-size: 21px;

font-family: Arial;

padding-top:20px;

}

#footer4 a{

text-decoration:none;

color:#FEFCFF;

}

#footer4 a:hover{ color: #38ACEC; }

Pagina pringipală mai conține și trei secțiuni link ca Noutăți, Cheltuieli și Contact care descriu scurt și la obiect ce se poate găsi în paginile cu acelși nume.(Fig 3.2.3)

Fig 3.2.3- Secțiunile principale

Pentru implementarea secțiunilor principale s-a folosit următorul cod sursă:

Cod HTML

<div id="continut">

<div class="continut1">

<h1>Contact</h1></br>

<a href="contact.html"><img src="imagini/plic.png" id="dim1"/></a></br></br></br>

<p>Tel: 0752 454 322</br>

Email: [anonimizat]</br>

Administrator: Alex Ungur</br>

Orar: Luni-Vineri intre 18-21</p>

</div>

</div>

Cod CSS

#continut{

width:996px;

height:400px;

}

.continut1{

width:300px;

height:390px;

border: 4px solid #E5E4E2;

float: left;

margin-left:20px;

font: 20px Blagovest ;

text-align:center;

border-radius:20px;

}

.dim{

width:250px;

height:150px;

margin-left:auto;

margin-right:auto;

border: 3px solid #E5E4E2;

}

Toate paginile acestei aplicații web au la baza codului sursă pagina Home din fișierul index.html. În general toate aplicațiile web respectă această regulă dorindu-se să se păstreze aceeași temă în toate paginiile aplicației pentru a facilita navigarea aplicației de către utilizatori.

3.3 Pagina Galerie

Link-ul Galerie deschide pagina ce conține codul sursă din fișierul galerie.php, această pagină este destinată afișării imaginilor cu lucrările efectuate în cadrul blocului de locuit. Pagina Galerie este o pagină dinamică aceasta având o legătură cu baza de date prin intermediul căreia se pot afișa imaginele conținute în baza de date.

Fig 3.3- Pagina Galerie

La bază această pagină conține codul sursă din pagina Home (fișierul index.html) mai puțin codul pentru secțiunile principale (Fig 3.2.3), acesta fiind înlocuit de următorul cod PHP:

<?php

mysql_connect("localhost", "root", "") or die ("Nu ma pot conecta la server");

mysql_select_db("asociatie") or die ("Nu pot selecta baza de date");

$comanda = "SELECT * FROM galerie ORDER BY `id_galerie` DESC";

$rezultat = mysql_query ($comanda) or die(mysql_error());

// Parcurg multimea de selectie

while ($linie = mysql_fetch_array($rezultat))

{

echo "<tr>";

// Afisez continutul primei celule din tabelul care se afiseaza

$img = $linie["img_galerie"];

$id = $linie["id_galerie"];

echo "<td><img src=\"imagini/$img\" alt=\"\" style=\"width:280px; height:280px; border: 6px solid #B6B6B4; margin-left:27px;\" /><br /></td>";

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

{

if($linie = mysql_fetch_array($rezultat))

{

$img = $linie["img_galerie"];

$id = $linie["id_galerie"];

echo "<td><img src=\"imagini/$img\" alt=\"\" style=\"width:280px; height:280px; border: 6px solid #B6B6B4; margin-left:27px;\"/><br /></td>";

}

else

break;

}

echo "</tr>";

}

?>

Explicarea codului PHP:

Se face conexiunea la server iar dacă aceasta nu e posibilă se va afișa mesajul ”Nu mă pot conecta la server”.

Se alege baza de date cu numele asociatie iar dacă acest lucru nu e posibil se va afișa mesajul ”Nu pot selecta baza de date”.

Se selectează toate datele din tabelul galerie și se ordonează în funcție de id_galerie descrescător.

Se parcurge mulțimea de selecție cu ajutorul buclei while.

Se afișează conținutul primei celule adică prima imagine.

Cu ajutorul funcției for adaugăm alte două imagini în aceeași linie atât timp cât avem imagini în baza de date.

3.4 Pagina Citire contoare

Link-ul Citire contoare deschide pagina ce conține codul sursă din fișierul signin.php, această pagină ne întâmpină cu un formular clasic de log in cu două text field-uri Username și Parola iar pentru submiterea formularului pentru a fi verificat de către server s-a folosit butonul Sign in.

Avem trei scenarii posibile la acționarea butonului Sign in:

În cazul în care utilizatorul introduce date invalide și acționează butonul Sign in, acesta va fi întâmpinat cu un mesaj de eroare “Introduceți user-ul și parola corectă”.

În cazul în care utilizatorul se loghează cu credențialele primite de la administrator iar submiterea are loc cu success, acesta va fi întâmpinat cu un mesaj de bun venit, “Bine ați venit! Click aici pentru a introduce valorile contoarelor!”.La acționarea link-ului Click aici acesta ne va redirecționa spre pagina Contoare unde putem completa formularul cu valorile afișate pe ceasurile de contor din apartament.

În cazul în care utilizatorul se loghează pentru a doua oară în aceeași lună, acesta va fi întâmpinat cu mesajul “Ați introdus deja datele pe luna aceasta, click aici pentru a ajunge la Home page”

Fig 3.4.1 – Scenarii login

Acționând link-ul Click aici din scenariul 2 figura 3.3.1 ne va duce pe pagina Contoare unde putem sa inserăm valorile contoarelor din apartament și tot odată numărul de persoane care au locuit în respectivul apartament în acea lună.

Text field-ul Apartament este populat cu numle utilizatorului (nume locatar și număr apartament), acesta nu poate fi editat. Celelalte date vor fi introduse de către utilizator iar acestea vor fi trimise către baza de date.

Pentru validarea text fieldurilor s-a folosit următorul cod sursă:

if($submit)

{

if($ap&&$ct1&&$ct1&&$ct3&&$pers)

{

echo"Datele au fost trimise cu succes!";

$query=mysql_query("INSERT INTO contoare VALUES (' ','$ct1','$ct2', '$ct3','$pers', '$ap','$acum','$a')");

session_destroy();

}

else

echo"Completati toate casutele!";

}

Codul de mai sus poate fi tradus astfel, dacă condiția butonul Submit numit $submit este acționat atunci se va executa codul dintre acolade adică dacă text field-urile apartament, CT1, CT2, CT3 și Nr. pers. sunt completate atunci se execută codul din următoarele acolade, adică se trimite mesajul “Datele au fost trimise!” iar datele sunt inserate in tabelul contoare și sesiunea este distrusă echivalentul unui log out. În cazul în care nu toate text field-urile au fost completate se va afișa mesajul “Completați toate căsuțele!”.

La acționarea butonului Submit nu doar datele introduse în text field-uri sunt stocate ci și data curentă $acum= date(‘Y-m’) care stochează doar anul și luna curentă. Data curentă este luată de la server și nu de la computerul utilizatorului. Se mai stochează și totalul contoarelor cu ajutorul unuei variabile $a=$ct1+$ct2+$ct3.

La acționarea butonului Submit există trei scenarii:

În cazul în care se acționează butonul Submit iar căsuțele sau text field-rile CT1, CT2, CT3 și Nr. pers. sunt goale, utilizatorul va fi întâmpinat cu un mesaj de eroare “Completați toate căsuțele”.

Dacă la acționarea butonului Submit doar o parte din text field-uri sunt completate atunci vom primi același mesaj “Completați toate căsuțele”.

Dacă la acționarea butonului Submit toate text field-urile sunt completate corect cu date valide atunci utilizatorul va fi întâmpinat cu mesajul “Datele au fost trimise cu success!” iar datele vor fi inserate în baza de date asociatie în tabelul contoare.

Fig 3.4.2 – Formularul contoare

3.5 Pagina Noutăți

Link-ul Noutăți deschide pagina ce conține codul sursă din fișierul noutati.php, această pagină are un format de blog unde sunt afișate ultimele știri, schimbările, noutățile ce vor avea loc sau data și ora la care se vor face ședințe la care se cere participarea locatarilor. Pagina poate fi accesată prin intermediul link-ului din meniul principal, link-ul din pagina piciorului și link-ul imagine din conținutul paginii Home (coloana 1 Noutăți).

Fig 3.5- PaginaNoutăți

Postările sunt făcute de către administrator prin intermediul paginii ce conține Panou Administrator, acestea conțin o imagine care poate să descrie natura articolului, titlul articolului și conținutul propriu-zis al articolului.

Titlul, imaginea (featured image) și descrierea sunt colectate din baza de date din tabelul noutati, fiecare postare este afișată în stilul LIFO (Last in, first out) adică se vor afișa ultimele articole introduse ca primele articole în pagina Noutăți. Acest lucru s-a făcut cu ajutorul următorului query:

SELECT * FROM noutati ORDER BY `id_noutati` DESC;

Codul PHP folosit pentru implementarea postărilor în pagina Noutăți:

<?php

mysql_connect("localhost", "root", "") or die ("Nu ma pot conecta la server");

mysql_select_db("asociatie") or die ("Nu pot selecta baza de date");

$comanda = "SELECT * FROM noutati ORDER BY `id_noutati` DESC";

$rezultat = mysql_query ($comanda) or die(mysql_error());

while ($linie = mysql_fetch_array($rezultat))

{

$imagine = $linie["imagine"];

$titlu = $linie["titlu"];

$descriere = $linie["descriere"];

echo "<table><tr>";

echo '<td><img src="imagini/'.$linie["imagine"].'" alt="" /></td></tr>';

echo "<tr><td><h1>$titlu</h1></td></tr>";

echo "<tr><td><p>$descriere</p></td>";

echo "</tr></table>";

echo "<hr>";

echo"</br></br></br>";

}

?>

Explicarea codului PHP:

Se face conexiunea la server iar dacă aceasta nu e posibilă se va afișa mesajul ”Nu mă pot conecta la server”.

Se alege baza de date cu numele asociatie iar dacă acest lucru nu e posibil se va afișa mesajul ”Nu pot selecta baza de date”.

Se selectează toate datele din tabelul noutati și se ordonează în funcție de coloana id_noutati în mod descendent.

Se parcurge mulțimea de selecție cu ajutorul buclei while

Se afișează imaginea, titlul și descrierea

3.6 Pagina Contact

Link-ul Contact deschide pagina ce conține codul sursă din fișierul contact.php, această pagină este destinată facilitării legăturii dintre utilizatori (locatarii blocului) și administratorul blocului. Aici se poate contacta administratorul prin intermediul unui formular simplu care necesită numele, email-ul și mesajul utilizatorului. Toate aceste date sunt introduse în baza de date asociatie în tabelul mesaje.

Fig 3.6 – Pagina Contact

Pagina Contact are la bază codul sursă al paginii Home din fișierul index.html. La acționarea butonului Trimite se va face legătura la baza de date iar informațiile introduse în text field-uri vor fi inserate în tabelul mesaje. În cazul în care un text field nu e completat atunci vom primi un mesaj de eroare care ne atenționează că toate căsuțele (text field-urile) trebuie completate. La acționarea butonului Reset se va șterge conținutul existent din toate căsuțele astfel facilitând editarea mai rapidă al mesajului.

3.7 Pagina Cheltuieli

Link-ul Cheltuieli deschide pagina ce conține codul sursă din fișierul cheltuieli.php, această pagină conține tabelul cu cheltuielile locatarilor din bloc, acest tabel este calculat de administratorul blocului în funcție de informațiile (număr persoane, contor apă 1, contor apă 2, contor apă 3) trimise de locatari în formularul din pagina Citire contoare.

Pagina Cheltuieli este o pagină dinamică în care sunt afișate din baza de date fiecare fișier introdus de administrator. Fișierul afișat trebuie să fie o imagine, s-a ales această variantă după multe încercări eșuate de a afișa un fișier PDF, dar pentru că un fișier imagine își face treaba la fel de bine și pentru că s-a știut implementarea afișării acestuia s-a mers pe calea aceasta.

3.8 Pagina Panou

Pagina Panou este pagina principală al administratorului, aici acesta poate introduce informații pentru fiecare pagina, aceste date sunt inserate în baza de date iar apoi preluate și afișate în paginile în care s-au făcut schimbările.

Pentru a ajunge la această pagină administratorul trebuie să scrie în bara de la browser http://localhost/asociatielocatari/admin.html, acesta va fi întâmpinat de un formular pentru log in unde administratorul trebuie să introducă credențiale (nume și parolă) valide pentru a putea sa acceseze panoul administratorului și pentru a avea drepturi de a edita paginile dinamice.

Fig 3.8- Panou administrator

Panoul administratorului conține următoarele secțiuni:

Link-ul Mesaje

Secțiunea Noutăți

Secțiunea Galerie

Secțiunea Cheltuieli

Secțiunea Afișare Cheltuieli

Secțiunea Cheltuieli bloc

Secțiunea Citire contoare

3.8.1. Link-ul Mesaje

Link-ul Mesaje face legătura cu pagina Mesaje unde administratorul blocului poate verifica ultimele mesaje primite de la locatari prin intermediul formularui din pagina Contact. Aici vor fi afișate mesajele primite din baza de date și se vor afișa în stil LIFO adică ultimul mesaj introdus va fi afișat primul în pagină.

Structura mesajelor afișate în pagină va fi:

Nume

Email

Mesaj

3.8.2. Secțiunea Noutăți

În secțiunea Noutăți administratorul poate să introducă un articol nou care va fi afișat în pagina cu același nume Noutăți. Aici se introduce imaginea dorită, titlul articolului și descrierea. Datele introduse vor fi inserate în baza de date asociatie în tabelul noutati iar apoi preluate și afișate de pagina Noutăți.

Fig 3.8.2 – Secțiunea Noutăți

Pentru crearea acestei secțiuni sa recurs la un formular (form) cu metoda post și la actionarea butonului Adaugă se deschide fișierul panou1.php (“action=panou1.php”). Butonul Reset șterge toate câmpurile din formular.

<form enctype="multipart/form-data" name="administrare" method="post" action="panou1.php">

</form>

Pentru legătura secțiunii Noutăți la baza de date s-a realizat următorul cod PHP:

<?php

$imagine = $_FILES["imagine"]["name"];

$poz = strrpos($imagine, ".");

$extensie = substr ($imagine, $poz);

$nmtmp = $_FILES["imagine"]["tmp_name"];

$nume = $_REQUEST["nume"];

$descriere = $_REQUEST["descriere"];

if($imagine&&$nume&&$descriere)

{

mysql_connect("localhost", "root", "") or die ("Nu ma pot conecta la server");

mysql_select_db("asociatie") or die ("Nu pot selecta baza de date");

$interogare1 = "INSERT INTO noutati VALUES ('','$nume','$imagine', '$descriere')";

$rezultat1 = mysql_query($interogare1) or die (mysql_error());

$id = mysql_insert_id();

$imagine = 'imagine'.$id.$extensie;

$interogare2 = "UPDATE noutati SET imagine='$imagine' WHERE id_noutati = '$id'";

$rezultat2 = mysql_query($interogare2) or die (mysql_error());

$cale = "imagini/$imagine";

$rezultat2 = move_uploaded_file($nmtmp, $cale);

echo"<p><font size='4pt' color=#6AA121>Datele au fost trimise cu succes!</font></p>";

}

else

echo"<p><font size='4pt' color=#C11B17>Completati toate liniile!</font></p>";

?>

Explicarea codului PHP:

Se preia imaginea în $imagine

Strrpos ne ajută să găsim poziția punctului din numele fișierului, de la coadă spre început.

Se decupează extensia din numele imaginii și estocată în $extensie

$nmtmp este numele temporarului

Se preiau celelalte valori $nume și $descriere

Se pune o condiție cu ajutorul unui if

Dacă toate câmpurile sunt completate se va face legătura la server și apoi la baza de date

Se inserează numele, imaginea și descrierea în tabelul noutati

Se citește al câtelea element este introdus in tabel în funcție de id

Se formează noul nume al imaginii, $imagine = 'imagine'.$id.$extensie;

Se face un update și se înlocuiește numele imaginii anterioare cu numele nou în funcție de id

Se definește o cale unde sa fie amplasată imaginea

Se mută imaginea în locul dorit și definit anterior

Se transmite un mesaj care ne informează că datele au fost trimise cu succes

În cazul în care nu au fost completate toate câmpurile vom primii un mesaj care ne spune sa completăm toate câmpurile.

3.8.3. Secțiunea Galerie

În secțiunea Galerie administratorul poate să introducă imagini care vor fi afișate în pagina cu același nume Galerie. Aici se introduc imagini cu lucrările efectuate în cadrul imobilului de locuit. Datele introduse vor fi inserate în baza de date asociatie în tabelul galerie iar apoi preluate și afișate de pagina dinamică Galerie.

Fig 3.8.3- Secțiunea Galerie

Pentru crearea acestei secțiuni s-a folosit un formular cu metoda post, la acționarea butonului Adaugă se deschide pagina cu codul sursă de la fișierul panou2.php. Butonul Reset șterge imaginea selectată din formular.

<form enctype="multipart/form-data" name="galerie" method="post" action="panou2.php">

</form>

Pentru legătura cu baza de date s-a folosit aproximativ același cod PHP de la secțiunea Noutăți, exceptând câmpurile titlu și descriere.

3.8.4. Secțiunea Cheltuieli

În secțiunea Cheltuieli administratorul poate să introducă factura la curentul electric pe întregul bloc, această factură va fi împărțită la toate apartamentele din imobil. La acționarea butonului Adaugă se deschide pagina cu codul sursă de la fișierul panou3.php și se vor introduce valori fixe pentru celelalte cheltuieli ca salubritate, curățenie, mentenanță ascensor, mentenanță instalații, reparații și salariile. Aceste valori vor fi inserate automat cu ajutorul codului PHP, s-a ales această variantă pentru că valorile se modifică rar odata la un an sau doi astfel administratorul nu mai trebuie să piardă timp cu introducerea acestor date.

Fig 3.8.4 – Secțiunea Cheltuieli

3.8.5. Secțiunea Afișare cheltuieli

În secțiunea Afișare cheltuieli administratorul poate să introducă tabelul cu cheltuieli pe luna curentă sub formă de imagine, acesta va fi afișată în pagina Cheltuieli. Datele introduse vor fi inserate în baza de date asociatie în tabelul fisier iar apoi preluate și afișate de pagina dinamică Cheltuieli.

Fig 3.8.5- Secțiunea Afișare cheltuieli

Pentru crearea acestei secțiuni s-a folosit un formular cu metoda post, la acționarea butonului Adaugă se deschide pagina cu codul sursă de la fișierul panou4.php. Butonul Reset șterge imaginea selectată din formular.

<form enctype="multipart/form-data" name="afisare" method="post" action="panou4.php">

</form>

Pentru legătura cu baza de date s-a folosit același cod PHP de la secțiunea Galerie, desigur făcându-se modificările necesare în concordanță cu tabelul folosit.

3.8.6. Secțiunea Cheltuieli bloc

În secțiunea Cheltuieli bloc se afișează datele din tabelul cheltuieli, aceleași date care sunt inserate prin intermediul secțiunii Afișare cheltuieli. Pentru afișarea informațiilor s-a apelat la realizarea unui tabel care are aceleași coloane ca și tabelul din baza de date, mai puțin coloana id_cheltuieli.

Fig 3.8.6- Secțiunea Cheltuieli bloc

Pentru realizarea tabelului s-a folosit următorul cod sursă:

echo "<table border 2px center>";

echo "<tr><td>Electricitate</td>

<td>Salubritate</td>

<td>Curatenie</td>

<td>Ascensor</td>

<td>Instalatii</td>

<td>Reparatii</td>

<td>Salarii</td>

<td>Data</td></tr>";

echo "</table>";

Pentru realizarea conexiunii și afișării cheltuielilor din baza de date s-a folosit următorul cod PHP:

<?php

$connection = mysql_connect('localhost', 'root', '');

mysql_select_db('asociatie');

$query = "SELECT * FROM cheltuieli ORDER BY id_cheltuieli DESC";

$result = mysql_query($query);

while($row = mysql_fetch_array($result)){

echo "<tr><td>" . $row['electricitate'] . "</td>

<td>" . $row['salubritate'] . "</td>

<td>" . $row['curatenie'] . "</td>

<td>" . $row['ascensor'] . "</td>

<td>" . $row['instalatii'] . "</td>

<td>" . $row['reparatii'] . "</td>

<td>" . $row['salarii'] . "</td>

<td>" . $row['data_chelt'] . "</td></tr>";

}

echo "</table>";

mysql_close();

?>

Explicarea codului PHP folosit:

Se face conexiunea la baza server

Se face legătura la baza de date

Se selectează tot tabelul cheltuieli și se ordonează datele în funcție de id_cheltuieli descrescător

Atât timp cât există date sau rânduri acestea vor fi afișate corespunzător în coloanele definite între tag-uri <td></td>

Se închide tabelul și conexiunea la server

3.8.7. Secțiunea Citire contoare

În secțiunea Citire contoare se afișează datele din tabelul contoare, aceleași date care sunt inserate prin intermediul paginii Citire contoare (apartament, număr persoane, CT1, CT2, Ct3, Total, Data). Pentru afișarea informațiilor s-a apelat la realizarea unui tabel care are aceleași coloane ca și tabelul din baza de date, mai puțin coloana id_contoare.

Fig 3.8.7- Secțiunea Citire contoare

Pentru realizarea conexiunii la baza de date și pentru afișarea acestei secțiuni s-a folosit același cod PHP ca și la secțiunea Cheltuieli bloc, schimbându-se numele tabelului și al coloanelor.

3.9 Implementare baza de date

Pentru realizarea bazei de date s-a folosit baza de date MySQL și aplicația web PHPMyAdmin pentru interfața acesteia. Numele dat bazei de date este Asociatie iar aceasta conține 8 tabele:

Admin

Cheltuieli

Contoare

Fisier

Galerie

Noutati

Mesaje

Users

Aceste tabele ajută la buna funcționare al aplicației prin stocarea informațiilor folosite de aceasta. Aplicația se conectează la baza de date și preia datele sau inserează date noi în tabelele bazei de date, fără această componentă aplicația nu ar mai putea funcționa, nu ar mai putea sa își îndeplinească scopul.

Fig 3.9- Baza de date asociatie

3.9.1. Schemă bloc baza de date

3.9.2. Tabelul admin

În tabelul admin găsim username-ul și parola folosite de administrator pentru a se autentifica și a avea acces la pagina cu panoul administratorului. Tabelul admin conține trei coloane:

id_admin

admin

parola

Structura tabelului admin:

Fig 3.9.2.1- Structura tabelului admin

S-a creat coloana id_admin ca și cheie primară cu autoincrementare de tip întreg (integer), la fiecare inserare de date noi în tabel valoarea coloanei id_admin se va aduna cu 1.

Coloanele admin și parola sunt de tip varchar adică caractere diverse, în paranteză este specificat numărul maxim de caractere pe care coloana le acceptă, 35 de caractere pentru coloana admin respectiv 20 de caractere pentru coloana parola.

Datele conținute de tabelul admin:

Fig 3.9.2.2 – Date tabel admin

3.9.3. Tabelul cheltuieli

În tabelul cheltuieli sunt datele inserate de administrator din panou secțiunea Cheltuieli. Acest tabel conține nouă coloane:

id_cheltuieli

electricitate

salubritate

curatenie

ascensor

instalatii

reparatii

salarii

data_chelt

Structura tabelului cheltuieli:

Fig 3.9.3.1 – Structura tabelului cheltuieli

După cum se poate vedea și în fig 3.9.3.1 coloana id_cheltuieli este de tip integer, cheie primară și se autoincrementează, coloana data_chelt este de tip text, iar celelalte coloane sunt de tip float.

Datele conținute de tabelul cheltuieli:

Fig 3.9.3.2- Date tabel cheltuieli

3.9.4. Tabelul galerie

În tabelul galerie se găsesc datele inserate din panoul administratorului secțiunea Galerie. Acest tabel conține două coloane:

id_galerie

img_galerie

Structura tabelului galerie:

Fig 3.9.4.1 – Structura tabelului galerie

Acest tabel conține două coloane, id_galerie ca cheie primară de tip integer care se autoincrementează și coloana img_galerie de tip varchar de maxim 50 caractere.

Datele conținute de tabelul galerie:

Figure 1 – Date tabelul galerie

3.9.5. Tabelul contoare

În tabelul contoare putem găsi datele trimise de către locatarii blocului prin intermediul formularului din pagina contoare. Tabelul contoare conține 8 coloane:

id_contoare

ct1

ct2

ct3

nr_pers

ap_nume

dataa

total_ct

Structura tabelului contoare:

Fig 3.9.5.1 – Structura tabelului contoare

După cum se poate vedea în fig 3.9.5.1 tabelul contoare este format din coloanele id_contoare cheie primară de tip integer care se autoincrementează, coloana ap_nume de tip varchar, coloana dataa de tip text și restul coloanelor de tip integer.

Date conținute de tabelul contoare:

Fig 3.9.5.2 – Date contoare

3.9.6. Tabelul noutati

În tabelul noutati se găsesc datele inserate din panoul administratorului secțiunea Noutăți. Acest tabel conține patru coloane:

id_noutati

titlu

imagine

descriere

Structura tabelului noutati:

Fig 3.9.6.1 – Structura tabelului noutati

Acest tabel conține coloanele id_noutăți ca cheie primară de tip integer care se autoincrementează iar restul coloanelor sunt de tip varchar.

Date conținute de tabelul noutăți:

Fig 3.9.6.2 – Date noutati

3.9.7. Tabelul users

În tabelul users se află toate conturile locatarilor din imobil în număr de 20, acestea sunt folosite pentru autentificarea acestora și pentru permiterea locatarilor de a insera consumul de apă. Tabelul conține trei coloane:

id_user

user

parola

Structura tabelului users:

Fig 3.9.7.1 – Structura tabelului users

Tabelul users conține coloana id_users ca cheie primară de tip integer care se autoincrementează iar restul coloanelor sunt de tip varchar.

Date conținute de tabelul users, aici se găsesc toate apartamentele blocului:

Fig 3.9.7.2 – Date users

3.9.8. Tabelul fisier

În tabelul fisier se găsesc datele inserate din panoul administratorului secțiunea Afișare cheltuieli. Acest tabel conține două coloane:

id_fisier

fisier

Structura tabelului fisier:

Fig 3.9.8 – Structura tabelului fisier

Din câte se poate observa în fig 3.9.8 tabelul fisier conține coloana id_fisier ca cheie primară de tip integer care se autoincrementează și coloana fisierul de tip varchar.

3.10 Testarea aplicației

Pentru testarea aplicației sa recurs la testarea manuală de tip exploratory testing. S-a luat fiecare formular în parte și s-a testat pentru a vedea dacă:

datele trimise spre baza de date ajung în tabelul care trebuie

datele de tip int sunt inserate doar în coloanele de tip integer

datele de tip varchar sunt inserate doar în coloanele de tip varchar

mesajele de eroare sunt afișate atunci când inroducem date invalide

utilizatorul se poate autentifica cu credențialele valide

utilizatorul nu se poate autentifica cu credențiale invalide

datele trimise spre baza de date ajung în coloanele care trebuie

datele sunt trimise cu toate câmpurile goale

datele sunt trimise cu unele câmpuri goale

utilizatorul nu se poate autentifica cu câmpurile goale

acționare butonului Reset sterge toate câmpurile

acționarea butonului Adaugă sau Submit trimite datele la baza de date

așezarea în pagină e cea dorită

datele de tip text sunt inserate în coloanele de tip text

datele din baza de date sunt returnate și afișate în câmpul apartament pentru formularul citire contoare

Pentru testarea formularelor de log in s-a apelat la tehnica decision table:

Fig 3.10 – Decision table

IV. CONCLUZII

Aplicațiile web sunt foarte convenabile utilizatorilor pentru că acestea nu necesită o instalare, sunt accesibile cu orice device din orice locație cu conexiune la internet.

V. BIBLIOGRAFIE

[1] SQL Essentials 2009 , Mark Mcllroy

[2] HTML&CSS Design and Build Websites , Jon Duckett

[3] Suport de curs Realizarea Aplicațiilor Web

[4] Suport de curs video – http://infonet.utcluj.ro/

[5] http://www.w3schools.com/html/default.asp

[6] http://www.w3schools.com/sql/default.asp

[7] http://www.w3schools.com/css/

[8] https://en.wikipedia.org/wiki/PHP

[9] http://ro.wikipedia.org/wiki/SQL

VI. ANEXE

Anexa1-

Similar Posts