Odată cu instaurarea erei digitale au apărut noi provocări pe care societatea a trebuit să le soluționeze cu succes pentru a putea evolua către o… [302686]

Arhitecturi Serverless

Proiect de diplomă

INTRODUCERE

Contextul problemei

Odată cu instaurarea erei digitale au apărut noi provocări pe care societatea a trebuit să le soluționeze cu succes pentru a putea evolua către o nouă eră a vitezei. Odată cu creșterea volumului de de date și dezvoltarea noilor tehnologii a apărut necesitatea creșterii puterii de calcul precum și gestionarea volumului de date.

La începuturile industriei software aplicațiile trebuiau găzduite undeva pentru a putea fi executate. [anonimizat]. [anonimizat] (subalocare, supraalocare) cât și la nivel de buget ([anonimizat], achiziționarea în regim de urgență a unor componente). Infrastructura de mentenanță s-a dezvoltat de-a lungul timpului datorită cererii și nevoii de a avea servicii disponibile 24/7, precum și pentru a [anonimizat], industria generat noi departamente și posturi pentru a putea facilita aceste nevoi. [anonimizat] a firmelor.

Încă de la „concepție”, calculul „în nori” – [anonimizat]/Web – promitea un număr de avantaje semnificative față de abordările tradiționale. Probabil cea mai importantă trăsătură este aceea a iluziei existenței unor resurse computaționale hardware și/sau software „infinite”, [anonimizat]/[anonimizat]. [anonimizat] „în nori” [anonimizat], simplificarea procedurilor de exploatare în practică și mentenanța.[1]

Tehnologia de Cloud Computing a venit in ajutorul vechilor probleme oferite de infrastructurile clasice aducând odată cu aceasta o serie de beneficii recunoscute atât la nivel financiar cât și la nivel tehnic. Cloud Computing a cunoscut în ultimele două decenii o [anonimizat], dar și a numeroase altor persoane din diferite domenii de activitate. [anonimizat], [anonimizat], independent de poziția geografică a beneficiarului sau a furnizorului de servicii Cloud. [anonimizat] o urmează.

// you can add smth here

Motivația

Considerând că domeniul încă nu a fost suficient de aprofundat în contextul actual la nivel teoretic am luat decizia de a mă angaja și lucra la acest proiect.

[anonimizat]l alteia. Cunoașterea arhitecturilor serverless implică efort atât din partea personalului calificat cât și din perspectiva consumatorului de servicii. Motivația lucrării a fost de a analiza și dea integra cele mai noi tendințe de tehnologie și arhitectură în dezvoltarea aplicațiilor software. Această cercetare a luat în calcul temele emergente, care vin în sprijinul cercetării realizate, dintre acestea se menționează:

Diferențele de abordare a proceselor ale marilor furnizori de servicii cloud în materie de arhitecturi serverless;

Automatizarea infrastructurii la nivelul fizic, de platformă și software;

Automatizarea fluxului de date în aplicații, pentru a asigura elasticitatea și reutilizarea serviciilor având la bază nevoile și cerințele specifice afacerii;

Mijloace de verificare și de implementarea de tehnologie nouă, care poate face față unor medii distribuite, asigurând un grad ridicat de elasticitate a serviciilor;

Nevoia de control și securitate precum și impedimentele pe care le întâmpină consumatorii de Servicii Cloud;

Integrarea diverselor tool-uri, precum și tool-urile de bază pe care furnizorii de cloud le pun la dispoziția consumatorilor;

Un alt aspect care a stat la baza motivației realizării prezentei lucrări îl reprezintă dorința personală de a cunoaște tehnologiile de cloud la nivel arhitectural, precum și modul în care acestea pot să fie integrate în afacerile mici și mijlocii.

Obiectivul și structura lucrării de disertație

Obiectivul principal al prezentei lucrări îl reprezintă studiul arhitecturilor serverless în contextul dezvoltării actuale a tehnologiei. Studiul are la bază conceptele generale ce vizează arhitecturile serverless atât la modul general, cât și particular, având aplicabilitate directă pe trei dintre cele mai cunoscute și concurente tehnologii din domeniu (Amazon Web Servicess, Google Cloud, Microsoft Azure). La nivel general, studiul prezintă noțiunile caracteristice sistemelor, tipurile de cloud, clasificări ale serviciilor, caracteristicile arhitecturilor serverless, tiparele de arhitectură pe care se proiectează, arhitectura de referință precum și avantajele oferite în contextul situației actuale. La nivel particular sunt analizate în detaliu Amazon Web Servicess, Google Cloud și Microsoft Azure. La final, pentru conturarea unei perspective generale asupra celor trei servicii, s-a realizat o paralelă între acestea pentru a putea determina calitatea serviciilor oferite, configurările necesare, nivelul de stocare, prețul cerut pe servicii, nivelul de securitate, puterea computațională oferită, transpareța serviciilor oferite. //de actualizat ulterior

Lucrarea de față este structurată pe 5 capitole, conținând x pagini, care cuprind x figuri, x tabele si y referințe bobliografice.

Capitolul I prezintă introducerea in domeniu, ce cuprinde aspecte generale despre tehnoligiile clou, cum și importanța utilizării tehnologiilor în contextul actual. În acest capitol este realizată o paralelă cu structura IT tradiționalp, având ca scop principal evidențierea avantajelor aduse de această nouă tehnologie.

Capitolul II intitulat Fundamentare teoretică, vizează noțiunile teoretice cu aplicabilitate directă în domeniu. Temele abordate sunt noțiunile de bază despre cloud computing, caracteristicile specifice tehnologiei cloud, precum și o clasificare a serviciilor de cloud. De asemenea, sunt evidențiate tipurile de cloud din perspectiva serviciilor, în funcție de modul în care acestea sunt implementate, fiind sintetizate detalii despre cloud-ul privat, cel public și cel hibrid.

Capitolul III, Analiza arhitecturilor serverless abordează un studiu detaliat cu privire la caracteristicile arhitecturilor serverless, precum și tiparele de arhitectură și proiectare. Tot în cadrul acestui capitol este prezentată arhitectura de referință cloud structurată pe nivele. Ulterior sunt puse in discuție beneficiile oferite de arhitecturile serverless, aceste beneficii find prezentate din mai multe perspective pentru a se putea contura o idee mai clara asupra acestora. În cadrul acestei analize sunt analizate în detaliu arhitecturile oferite de marii furnizori de tehnologii cloud, tenhologiile abordate fiind Amazon Web Servicess, Google Cloud și Microsoft Azure.

Capitolul IV, Studiu comparativ vizează comparațiile dintre cele trei tehnologii anterior menționate, acest studiu fiind realizat din mai multe puncte de vedere: stocare, putere computațională, tool-uri, preț, adaptabilitate în funcție de nevoile afacerii. //de actualizat ulterior

Capitolul V, Concluzii și perspective rezumă lucrarea într-o serie de concluzii cu privire la alegerea unei tehnologii în funcție de nevoile afacerii. În acest capitol sunt prezentate perspectivele de viitor asupra tehnologiilor de cloud la nivel abstract, având la bază promisiunile pe care dezvoltatorii acestor tehnologii le prezintă.

s

ASPECTE TEORETICE

HTML 5

Atunci când discutăm de HTML prezent în figura 2.1.1, vorbim de cel mai cunoscut limbaj de marcare în materie de pagini web. Principalul scop al limbajului este afișarea datelor pe ecran. Abrevierea cuvântului HTML vine de la Hyper Text Mark-up Language, acesta fiind codul care se află la baza paginilor web.

HTML (HyperText Markup Language) este practic un meta-limbaj folosit de toate motoarele de navigare pentru a determina modul de afișare a paginilor web, având ca elemente de bază niște câmpuri speciale, numite tag-uri sau etichete, reprezentând esența limbajului[2].

Separând aceste aspecte am scoate în evidență întreaga funcționalitate per ansamblu a limbajului. HyperText este metoda cu ajutorul căreia se realizează navigarea pe web, apăsând pe hyperlink-uri, care te direcționează către pagina următoare. Partea de Markup reprezintă felul în care etichetele acționează în interiorul textelor în timp ce Language definește ceea ce reprezintă în sine limbajul.

Limbajul HTML este folosit încă din anul 1990, acesta cunoscând de-a lungul timpului o serie de îmbunătățiri periodice. HTML a fost dezvoltat la origini de Tim Berners-Lee la CERN, și ulterior utilizat de motorul de căutare Mosaic dezvoltat în cadrul NCSA. În timp, HTML a fost extins în mai diferite moduri. În această perioadă formatul și tehnologiile ulterioare folosite depindeau de autorii paginii web însă ulterior a fost mult mai puternic scandalizat. HTML2.0 lansat în noiembrie 1995, a fost dezvoltat sub egida IETF (Internet Engineering Task Force). HTML 3 însă vine cu o versiune mult mai amplă a HTML. O versiune mult mai standardizata a apărut odată cu versiunea de HTML 3.2, lansată în 1997, versiune ce a rezolvat câteva probleme în materie de compatibilitate și utilizare a acestuia pe motoarele de căutare. Fiecare versiune lansată a avut un rol important în apariția unor versiuni mult mai complexe și ușor de utilizat. Viziunea asupra HTML de dezvoltare a fost îndreptată către ideea utilizării informației din web de pe cât mai multe dispozitive. Versiunea de HTML 4 extinde HTML-ul prin style sheets, scripturi, chenare, obiecte embed-uite, îmbunătățiri la nivel de direcție a textului, tabele mai complexe, etc.

Ultima versiune actualizată nu este încă disponibilă pe toate navigatoarele web, însă acestea oferă suport de dezvoltare în acest sens. HTML5 aduce cu sine “o schimbare de paradigmă”, întregul concept concentrându-se pe CSS3 și JavaScript.

Orice pagină HTML folosește etichete introductive care specifică tipul și versiunea de HTML folosită. De regulă aceste etichete apar la începutul unui fișier HTML. Structura clasică și general valabilă a unui document HTML este formată din: versiunea HTML a documentului, zona head (marcată de regulă prin etichetele <head> </head>) și zona body (marcată prin etichetele <body> </body>). În funcție de versiunea folosită de HMTL, eticheta ce determină versiunea poate avea diferite forme cum ar fi:

Pentru versiunea 4.01 Strict aceasta este: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Pentru versiunea 4.01 Transitional aceasta este: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Petru versiunea 4.01 Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Pentru versiunea 5: <!DOCTYPE HTML>[3]

Etichetele <html> </html> sunt întâlnite la fiecare pagină fiind rădăcina de bază a unui document HTML, însă nu sunt văzute de către utilizatorul comun. În interiorul acestora, se găsesc etichetele <head> </head> și <body></body>, acestea separând structura fișierului încât delimitarea administrării paginii este mult mai ușoară. În interiorul etichetelor <head> </head> se găsesc descrierile de tip <meta>, precum și titlul paginii între etichetele <title> </title>, de asemenea, în zona head pot fi adăugate scripturi și stiluri ale paginii (atât în mod direct cât și sub formă de legătură). Etichetele de tip meta conțin cuvinte cheie precum și informații relevante și utile motoarelor de căutare. Etichetele de tip meta sunt de forma <meta name=”nume” content=”conținut”>.

Zona body conține etichete ce sunt vizibile pentru utilizator sub forma de elemente vizuale, cum ar fi text, elemente grafice, videoclipuri.

Îmbunătățirile aduse în HTML5:

Semantica – permite programatorului să descrie mult mai precis conținutul paginii

Conectivitatea – permite comunicarea cu serverul într-o modalitate nouă

Offline și depozitare – permite paginilor web să stocheze datele utilizatorului în partea de client și să opereze cu acestea offline într-un mod cu mult mai eficient chiar și în cazul pierderii conexiunii la internet

Multimedia – permite adăugarea de videoclipuri și sunete pe pagină fără a mai fi nevoie de folosirea unor plug-in-uri ajutătoare

Grafica 2D/3D și efecte – pune la dispoziție o varietate largă de noi elemente și opțiuni cum ar fi Canvas și importarea de elemente vectoriale în format .svg

Performanță și integrare – viteza optimizată și folosirea dispozitivelor hardware într-un mod mai eficient

Accesul dispozitivelor – permite utilizatorilor folosirea pentru diverse operații de scriere și citire

Stilizare – permite autorilor să scrie template-uri mult mai sofisticate

Recent apărută, versiunea de HTML 5.1, aduce o serie de îmbunătățiri considerabile:

Meniuri contextualizate în navigatorul web folosind elementele menu și menuitems, acestea din urmă oferind în combinație cu type="context" facilități de deselectare a unei opțiuni, de executare a unei acțiuni în momentul unu click, sau de selectare a mai multor opțiuni dintr-un grup. Etichetele <menuitems> pot avea 3 tipuri diferite asociate checkbox, command și ratio.

Etichetele <details> și <summary>, aduc cu acestea opțiunea dezvoltatorului de a ascunde sau a arăta informații adiționale folosind un singur click. Această opțiune era posibilă numai cu ajutorul unui script[4].

Tipuri noi de etichete la introducere a datelor, mounth, week și datetime-local, primele două fiind deja utilizate de navigatorul web Google Chrome. Datetime-local utilizează data de pe fusul orar a utilizatorului, in timp ce datetime permitea alegerea altor fusuri orare.

Imagini responsive –fiind de regulă ajustate de dezvoltator cu ajutorul CSS-ului, HTML 5 aduce în plan principal atributul srcset care permite ajustare dimensiunii imaginii pe ecran în funcție de densitatea pixelilor. Acest atribut permite motorului de căutare alegerea dimensiunii potrivite a imaginii în funcție de dispozitivul pe care utilizatorul este conectat, în același timp permite schimbare rezoluției și în funcție de calitatea semnalului la internet sau a capacității de procesare scăzută a dispozitivului.

Elementul picture – permite utilizarea de imagini diferite în funcție de mărimea ecranului. Această implementare conduce la eficientizare procesului de transformare a paginii în format „responsive”.

Validarea formularelor – cu form.reportValidity() – HTML 5 introduce funcția de form.chechValidity() care permite verificare concordanței conținutului cu a validatorilor, returnând o valoare booleană ca rezultat. raportValidity() este similară, însă aduce în plus afișarea erorii în timp real pe pagină.

Elementul <dialog> – Permite implementarea de ferestre de tip pop-up. Acest lucru ajută din punct de vedere al completării formularelor, datorită faptului că previne trimiterea automată către server.

Crearea de opțiuni fără conținut – Etichetele <option> pot să aparțină unor etichete cum ar fi <select>,<optgroup> sau <detalist>.

Prevenirea atacurilor de tip phishing – Printr-o metodă de securizare a legăturilor. Vulnerabilitatea cunoscută sub forma target=”_blank” a fost rezolvată prin introducerea atributului rel=”noopener”.

Adăugarea de numere generate în mod aleator care pot fi folosite o singură dată – Cu ajutorul atributului nonce=”crypted text”, atribut valabil o singură dată cu posibilitatea de a fi generat ulterior, de câte ori este nevoie să fie efectuată o cerere către pagină. Acest atribut poate fi folosit în interiorul etichetelor <script> și <style>.

În ceea ce privește dezvoltarea unor pagini web adaptate pe nevoile utilizatorului și pe transmiterea informației într-un mod cât mai rapid și ușor de înțeles, HTML prezintă limitări majore din punct de vedere al design-ului, însă scopul acestuia nu este să specifice stilul, ci structura unui document.

CSS

Cascading Style Sheets (CSS) a fost proiectat pentru a separa partea de prezentare a unui website de partea de conținut, incluzând aspecte cum ar fi culori, font-uri, așezare. Această separare dezvoltă astfel accesibilitatea conținutului, flexibilitatea și controlul în ceea ce privește caracteristicile paginilor. Logo-ul CSS este prezent în figura 2.2.1.

CSS-ul a cunoscut și el o serie de versiuni lansate, acestea încercând să se muleze pe versiunile lansate de HTML. CSS1 a fost oficial lansat în anul 1996, și includea proprietăți precum culori adăugate textului, diferitelor elemente, fundal, alinierea textului imaginilor și a tabelelor precum și proprietăți ale font-urilor precum typeface și emphasis, de asemenea includea margini, borduri, padding și poziționarea marii majorități a elementelor, precum și identificatori unici și clasificarea atributelor. CSS publicat ca recomandare în 1998 și a fost dezvoltat de W3C. Un lucru notabil adăugat acestei versiuni a fost proprietățile pentru poziționare care precum absolute, relative, fixed position, z-index, dar și proprietăți noi în ceea ce privește textul. CSS3 a fost publicat în anul 1999 și aducea cu el conținut media mai standardizat precum și layout pe coloane și color profiles. CSS3 era divizat în documente separate numite module, acestea având diferite funcționalități. Ulterior CSS3 a primit recomandarea SVG și XML, acest fapt a dus la dezvoltarea mult mai complexă.

În ceea ce privește sintaxa limbajului, aceasta folosește un număr mare de cuvinte în limba engleză pentru a specifica numele unor proprietăți. Navigatoarele web aplică regulile CSS-ului pe un document și astfel modifică felul în care acestea sunt afișare. O instrucțiune de tip CSS este formată din: un set de proprietăți și un selector. Setul de proprietăți, are valorile actualizate în funcție de modul în care este afișat conținutul. CSS-ul include mai mult de 300 de proprietăți diferite și bineînțeles un număr infinit de valori asignate acestora. Selectorul așa cum îi spune și numele, selectează elementul asupra căruia i se aplică proprietățile. Selectorii pot fi destul de complecși, aceștia având posibilitatea de a fi combinați și de a impune anumite condiții. Există mai multe tipuri de selectori: selectori simpli, selectori atributivi, pseudo-clase, pseudo-elemente, combinați, selectori multipli.

Clasele CSS se utilizează pentru stilizarea în mod diferențiat a unor mulțimi de tag-uri HTML (distribuite în una sau mai multe pagini WEB). Acest mod de lucru este similar cu utilizarea stilurilor în linie, avantajul major fiind acela că atunci când se dorește efectuarea unei modificări de stil pe mai multe elemente/pagini, aceasta nu trebuie efectuată individual la nivelul fiecărui element. Astfel, este suficientă o modificare în cadrul clasei CSS care definește stilurile respective, efectul acesteia răsfrângându-se asupra tuturor elementelor asupra cărora acționează clasa respectivă[2].

În momentul în care motorul de navigare afișează un document, acesta trebuie să combine conținutul documentului cu stilul informației. Astfel, motorul de navigare procesează documentul în două etape așa cum se prezintă în figura 2.2.2.

Prima etapă, motorul de navigare convertește fișierele HTML și CSS în DOM (Document Object Model). DOM reprezintă documentul din memoria calculatorului. Acesta combină conținutul documentului cu stilul. A doua etapă: Motorul de navigare afișează conținutul DOM-ului.

DOM-ul are o structură de tip arbore. Fiecare element, atribut sau bucată de text din limbajul de marcare devine un nod DOM în structura arborescentă. Nodurile sunt definite în funcție de relația cu alte noduri DOM. Unele elemente sunt părinți ale unor noduri copii, și nodurile copii au frați.

CSS aduce în lumină o serie de avantaje considerabile. Un prim avantaj ar fi eficiența datorită lucrului cu clase, întrucât utilizarea acestora reduce numărul de linii de cod scrise având același rezultat ca în cazul scrierii de cod în HTML. Un alt avantaj este timpul de încărcare al paginii care se reduce, datorită dimensiunii codului descărcat și ulterior încărcat, în același timp, mai puțin cod este mai ușor de menținut și de gestionat. Capacitatea de mentenabilitate reprezintă un atu al CSS-ului, structura fiind una logică și ușor de asociat cu elementele din HTML. În același timp, CSS-ul oferă posibilitatea de a dezvolta pagina web pe mai multe platforme, având la bază același cod HTML, însă modalitățile de vizualizare pot să difere. Un alt avantaj al CSS-ului îl reprezintă posibilitatea păstrării consistenței stilului, întrucât toate proprietățile elementelor se află în același fișier și pot fi ușor de preluat și ajustat. În același timp, cu cât codul este mai ușor de gestionat și de citit de către motoarele de navigare, cu atât șanale de optimizare SEO cresc, bineînțeles, odată cu crearea de conținut.

Cu toate că aduce foarte multe avantaje, CSS-ul are și dezavantaje, unul dintre ele fiind compatibilitatea cu motoarele de navigare. Acest fapt se datorează varietății cu care motoarele de navigare compilează codul, în același timp, nu toate îmbunătățirile aduse CSS-ului sunt disponibile pe acesta. Un alt dezavantaj este fragmentarea, datorită faptului că fiecare motor de navigare compilează în felul lui, elementele din CSS pot avea dimensiuni diferite, acest fapt pune în dificultate dezvoltatorul, întrucât acesta trebuie să testeze pe mai mute motoare de navigare.

Altfel, CSS3 a venit cu îmbunătățiri noi pe parcurs precum: animații și efecte de tranziție, funcția calc(), selectori avansați, conținut generat, gradiente, flexibilitatea font-urilor, media queries, precum si multe altele[5]. Această implementare este disponibilă pe aproape toate motoarele de navigare. Calcularea automata a valorilor cu ajutorul funcției calc() efectuează calculele simple aritmetice precum adunarea, scăderea, înmulțirea și împărțirea pot fi făcute direct în CSS.

Selectori avansați pot fi folosiți pentru a selecta elemente într-o anumită proporție sau într-un anumit mod. Aceștia sunt împărțiți în pseudo selectori de clase și pseudo selectori de elemente (pseudo-classes și pseudo-elemente). Pseudo-clasele permit selecția pe baza unor infamații din afara documentului și pot fi folosite în combinații cu clase definite anterior.

Exemple de pseudo-clase, pentru legături: :link/:visited/:hover/:active, :checked, :first-child, :focus, :last-child, :first-of-type, :enabled, :not(selector), :nth-child(n), :valid, :only-of-type, :only-child, precum și multe altele. Pseudo-elementele sunt folosite pentru modificarea unor elemente specifice dintr-un anumit obiect/element. Acestea sunt mult mai restrânse ca diversitate, în momentul de față fiind disponibile doar 5 dintre ele: ::after, ::before, ::first-letter, ::first-line, ::selection. Atât pseudo-clasele cât și pseudo-elementele nu apar sau modifică documentul sursă sau arborele DOM. Datorită pseudo-elementelor ::before și ::after acest lucru poate fi dezvoltat, evitând scrierea de cod HTML și ulterior conținutul poate fi generat.

Gradientele au un rol important în crearea unui mediu vizual adecvat utilizatorului. Acestea marchează trecerea treptată de la o culoare la alta, fiind posibilă sub diferite forme cum ar fi liniar și circular.

Dacă în trecut existau limitări precum existența font-urilor web-safe, în prezent această barieră a fost eliminată cu ajutorul site-urilor care oferă font-uri în format specific web (Google Fonts și Typekit), de asemenea există și font-uri ce oferă iconițe in format vectorial, acest fapt duce creștere calității imaginilor dar și la flexibilitate întrucât calitatea vectorilor nu se pierde.

Proprietatea box sizing este o altă implementare nouă care pleacă de la modelul standard (box model) și de la problemele pe care acest standard le impune, box-sizing ajută la setarea mult mai concretă a padding-ului și a border-ului în interiorul elementului utilizat. Această îmbunătățire contribuie la așezarea armonioasă a elementelor. Cu ajutorul box-sizing: border-box, elementele se comportă în mod predictibil. Proprietatea border-images – Permite adăugarea de chenare personalizate, inclusiv folosirea imaginilor sau a iconițelor în conceperea acestora.

Media Queries – ajută la ajustarea elementelor pentru a fi responsive având posibilitatea setării dimensiunii la care acestea se activează. În interiorul acestora se pot accesa clase cu scopul modificării dimensiunilor și a felului în care se ajustează. Funcționează dependent de conținut și însă permit modificarea conținutului în funcție de nevoile paginii. Sintaxa standard:

De asemene, este permisă utilizarea și îmbinarea mai multor fundaluri, acestea oferind posibilitatea de a fi mutate sau animate independent. Această îmbunătățire contribuie la crearea de noi compoziții ce permit dezvoltatorului să evite folosirea altor programe adiționale.

Atât HTML-ul cât și CSS-ul au caracteristici definitorii, fiecare având puncte forte, însă diferența pe care o fac cu adevărat este cea în care sunt folosite împreună partea de structură aparținând paginilor HTML și partea de stil fiind asociată cu fișierele în CSS.

Bootstrap

Bootstrap reprezintă un framework utilizat pentru site-uri și aplicații web, având la bază componente bazate pe HTML și CSS. Ajuns unul dintre cele mai cunoscute framework-uri, Bootstrap este disponibil in mod gratuit pe site-ul oficial. Componentele acestuia sunt exclusiv pentru dezvoltarea front-end-ului și se remarcă prin rezultatul obținut în ceea ce privește eficiența și efortul consumat de dezvoltator. De-a lungul timpului au fost lansate 4 versiuni. Bootstrap folosește elemente in HTML, elemente direct personalizate, acestea oferind însă flexibilitatea utilizării mai multor variante de culoare ale aceluiași element. Logo-ul este prezent în figura 2.3.1.

Marele avantaj al Bootstrap este faptul că vine cu un set de elemente gratuite pentru crearea paginilor flexibile și responsive. Avantajul major însă îl reprezintă, printre altele eficiența de care acesta dă dovadă prin faptul că elementele sunt deja predefinite și schimbă focusul pe partea de funcționalitate directă a aplicației. Bootstrap este compatibil cu toate motoarele de navigare, cum ar fi Google Chrome, Mozilla Firefox, Safari, Opera și chiar și Microsoft Edge. Una dintre inovațiile aduse de Bootstrap o reprezintă sistemul de grid-uri. Acesta folosește rânduri și coloane cu scopul alinierii conținutului. Sistemul de grid este construit în întregime pe modelul flexbox fiind 100% responsive. În funcție de dispozitivul folosit, aceste coloane pot fi în format: extra mică, mică, medie, mare și extra mare, acestea sunt setate sub formă de clase col-format. Cu ajutorul container se realizează alinierea centrată. Rândurile au rol de container pentru coloane, fiecare coloană având propriul ei padding pe orizontală (numit gutter) cu scopul de a controla spațiul dintre acestea. Acest padding este apoi anulat în rând cu valori negative la margini. În acest fel conținutul din coloane este așezat în partea stângă de jos conform figurii 2.3.2.

In cadrul așezării conținutul trebuie așezat în mod expres în interiorul etichetelor ce indică coloane, în același timp este obligatoriu ca după eticheta ce indică rândul să urmeze eticheta coloanei. De regulă, după construcția col-sm este adăugat un număr, acest număr indică numărul de coloane utilizate din 12, unde valoarea cu 12 va ocupa întregul rând, în timp ce valoarea cu 1 va ocupa doar 8,3% din rând, iar construcția col-sm-6 va ocupa jumătate din acesta. Pentru a face pagina responsive, există cinci breakpoinți, unul pentru fiecare media query: extra mic (i), mic (small), mediu (medium), mare (large) și extra mare (extra-large). Valorile aproximative se regăsesc în Tabelul 2.3.1.

Tabel 2.3.1 Dimensiuni ale grid-ului Bootstrap

Deși în mod general Bootstrap folosește unități de măsură cum ar fi em sau rem pentru definirea dimensiunii elementelor, grid breakpoints folosește pixelii, acest fapt se datorează faptului că mărimea font-ului nu se schimbă[6].

În cazul standardului de grid pe 12, în cazul în care suma numerelor de pe coloană depășește 12 acestea se ajustează automat pe rândul următor. De asemenea, în cazul în care se dorește o aliniere strictă fără ajustarea automată a grid-ului, se inserează o etichetă între coloanele respective și i se dă proprietatea width: 100% sau se inserează clasa w-100.

În ceea ce privește standardizarea din punct de vedere tipografic Bootstrap folosește link-uri externe pentru stabilirea font-ului, aceasta se aplică în funcție de dimensiunea textului. Dimensiunea inițială web pe o pagină ce utilizează Bootstrap 4 este de aproximativ 16 px. În figura 2.3.3 sunt prezentate etichetele de heading, precum și raportarea lor la dimensiunea standard.

Bootstrap a fost creat ca o soluție internă în cadrul companiei Twitter, cu scopul de a rezolva inconsistența din cadrul echipei de dezvoltatori, inconsistență manifestată prin lipsa unui set de structuri a codului sursă precum și a direcției de dezvoltare. Acest fapt conduce de regulă la probleme și bug-uri precum și la îngreunarea procesului de debugging. Bootstrap a fost dezvoltat de către inginerii Mark Otto și Jacob Thorton ca o încercare de a încuraja echipa de dezvoltatori ingineri să folosească același framework pentru a minimiza efectele neplăcute ale inconsistenței. Încercarea a avut succes, eficientizând timpul de lucru și minimizând eventualele probleme din trecut. În august 2011 framework-ul a fost lansat ca proiect gratuit cu drepturi de îmbunătățire (open-source), proiectul fiind disponibil pe Github. În primele câteva luni framework-ul a fost accesat și îmbunătățit de sute de dezvoltatori din toată lumea, devenind în timp cel mai popular framework pentru dezvoltarea proiectelor web responsive. Ultima variantă stabilă lansată în iulie 2016 a fost Bootstrap v3.3.7, și reprezintă doar o mică parte din ceea ce a urmat să fie Bootstrap 4.0.0, versiunea Beta, lansată în mod oficial în luna august 2017.

Îmbunătățirile aduse de Bootstrap 4, aflat în versiune Beta. În Bootstrap 4, componenta barei de navigare a fost puternic simplificată și în același timp îmbunătățită, necesitând crearea unei liste neordonate de elemente ce se află în interiorul etichetelor <nav></nav>. Deși nu pare a fi o modificare drastică din punct de vedere al designului sau al stilului, sunt totuși câteva modificări cum ar fi culoarea primară folosită, background-ul de bază, mai mult de atât iconițele Glyphicons, nu mai sunt disponibile automat, ci trebuie importate separat. Tot în versiunea 4 paginația a fost schimbată, dacă până acum pentru a aplica componenta de paginație trebuia să se aplice fiecărui element component clasa, în Bootstrap 4 e nevoie doar de indicarea paginației și de introducerea link-urilor în interiorul link-items. Îmbunătățirea la nivel de grid vine din introducerea unei noi dimensiuni extra-small, ce permite așezarea elementelor pentru ecrane mobile de dimensiuni reduse. O altă îmbunătățire se referă la clasa dropdown-item, ce necesită să fie aplicată pe fiecare element. Un alt lucru nou adăugat îl reprezintă clasele ajutătoare, cum ar fi clase pentru alinierea textului în mod responsive. Din punct de vedere al plug-in-urilor, ca și la Bootstrap 3, acestea sunt împărțite pe 2 categorii, cele ce includ instrucțiuni ce țin de stil și cele ce aparțin de funcționalități, de regulă fișiere JavaScript. Din punct de vedere al compilării și procesării nu există diferențe între Bootstrap 3 și 4. În ultima versiune plug-in-urile ce țin de stil fiind create folosind SASS.

În ceea ce privește compatibilitatea cu motoarele de navigare, Bootstrap 4 este compatibil cu toate motoarele de navigare. Din punct de vedere al flexibilității Bootstrap 4 oferă o gamă variantă de elemente noi mult mai eficientizate și mai ușor de utilizat, precum și compatibilitatea cu motoarele de navigare.

PHP

Reprezintă un limbaj de scripting, de uz general, cu cod sursă deschis (open-source), utilizat pe scară largă, și care este potrivit în special pentru dezvoltarea aplicațiilor web și poate fi integrat în HTML. [7]

Limbajul se remarcă printr-o serie de calități reprezentând unul dintre cele mai utilizate limbaje pe internet. Logo-ul acestuia se regăsește în figura 2.4.1.

Un script se referă la un set de instrucțiuni programate care este interpretat în timpul rulării. Un limbaj de scripting reprezintă un limbaj care interpretează scripturile în timpul rulării. Scopul scripturilor este de obicei de a crește performanța aplicației sau de a efectua scripturi repetitive cu scopul creșterii vitezei de lucru.

Ca software open-source și având o robustețe confirmată în cei aproape 20 de ani de utilizare, PHP-ul prezintă un cert avantaj în puternica competiție pe care o are cu alte limbaje și tehnologii de programare Web server-side, cum ar fi ASP, ASP.Net, Java Server Pages (JSP) etc. Evident, fiind un limbaj rulând pe partea de server (de aceea se face o comparație a acestuia doar cu acest tip de limbaje de programare Web), scripturile PHP sunt rulate pe un server Web (folosind motorul interpretor PHP), iar utilizatorul (clientul browser) nu poate vedea codul sursă PHP al programului, ci doar codul paginii HTML returnată spre browser-ul client[2].

Fișierele în care este scris codul în limbajul PHP au extensia .php la final, acestea putând fi accesate și interpretate numai dacă este instalat pe server care are PHP (inclusiv local)

PHP cum este cunoscut astăzi este, de fapt succesorul unui produs numit PHP/FI. Creat în 1994 de către Rasmus Lerdorf, prima încarnare a PHP a fost un simplu set de binare Common Gateway Interface (CGI) scrise în limbajul de programare C. De-a lungul timpului, a apărut dorința de a avea mai multe funcționalități, și Rasmus a rescris Uneltele PHP, producând o implementare mult mai mare și mai bogată. Acest nou model a fost capabil de interacțiune cu baze de date și mai mult, oferind un framework cu ajutorul cărora utilizatorii puteau dezvolta aplicații web simple și dinamice, cum ar fi cărțile de oaspeți. În luna iunie a anului 1995, Rasmus » a lansat codul sursă pentru Uneltele PHP către public, ceea ce a permis dezvoltatorilor să-l folosească după cum considerau de cuviință[7].

După această perioadă PHP-ul de atunci a fost extins, ba mai mult a suferit și o modificare de nume devenind astfel Forms Interpreter, această implementare avea la bază o parte din funcționalitatea PHP-ului din zilele noastre. Problema majoră a aceste implementări era inconsistența, ba mai mult pentru introducerea codului în HTML, dezvoltatorii erau nevoiți să utilizeze comentarii HTML. Implementarea a revenit ulterior la denumirea inițială în luna următoare, însă codul a fost rescris. În anul 1996 codul a fost rescris complet, din această implementare a început apoi dezvoltarea PHP-ului din prezent, totul plecând de la o suită de instrumente și ulterior ajungânduse la un limbaj de programare, un an mai târziu a fost lansat în mod oficial PHP 2.0.

Un sondaj Netcraft din luna mai, 1998, a indicat că aproape 60.000 de domenii au raportat prezența antetelor care conțin PHP, indicând faptul că serverul gazdă într-adevăr îl avea instalat. Acest număr echivala cu aproximativ 1% din toate domeniile pe Internet existente la momentul respectiv[8].

Cea mai apropiată versiunea de PHP-ul actual este versiunea 3, aceasta având puternice facilități de extindere, pe lângă acestea, oferea o interfață mult mai complexă pentru bazele de date, protocoale și API-uri. Datorită acestei facilități de extindere limbajul a atras zeci de dezvoltatori care au pus bazele programării orientate pe obiecte aducând de asemenea o consistență mult mai solidă în sintaxa limbajului. Nucleul PHP-ului a fost ulterior rescris, copul reproiectări a fost îmbunătățirea preformației asupra aplicațiilor complexe, precum și modularizarea codului-sursă. Noul nucleu a fost lansat sub denumirea de PHP 4, acesta aducea în prim-plan susținerea mai multor servere Web, sesiuni HTTP, metode mai securizate de gestionarea a datelor introduse de utilizatori și câteva adăugări noi la nivel de limbaj. Varianta de PHP 5 a fost lansată după o perioadă îndelungată de dezvoltare, aducând ulterior un nou model de obiecte împreună cu facilități noi[9]. După varianta a 5-a a urmat o variantă experimentală a PHP 6, însă aceasta nu a fost lansată în mod oficial. Pentru a exista eventuale confuzii la nivel de public și de dezvoltatori, noua versiune lansată s-a numit PHP 7.

Varianta de PHP 7 aduce îmbunătățiri la nivel de optimizare a memoriei folosite, acest fapt având ca rezultat creșterea numărului de dezvoltatori precum și execuția mult mai rapidă a codului și implicit gestionarea mult mai eficientă a resurselor din server. Acest lucru se poate observa în statisticile ulterioare, devenind una dintre cele mai utilizate tehnologii de către content manageri precum Word Press, Drupal, Laravel sau Magento, datorită performanței obținute în comparație cu versiunea precedentă sau cu alte tehnologii[10]. Astfel varianta 7 a avut o performanță față de restul tehnologiilor precedente sau concurente, așa cum sugerează și figura 2.4.2.

Pe lângă eficiența de care dă dovadă, PHP este open-source și gratuit. În același timp, majoritatea serverelor gazdă utilizează PHP în mod implicit, spre deosebire de ASP. NET care necesită IIS. Acest lucru afectează drastic costurile impuse găzduirii aplicației. Un alt beneficiu este acela că reprezintă un limbaj de programare server-side ce presupune doar instalarea pe server și efectuarea de cereri din partea utilizatorului care nu e nevoie să aibă instalat PHP fiind suficient un motor de navigare. După cum se observă în figura 2.4.3 procesarea unui fișier PHP nu impune căi complexe prin care acesta să ajungă la server. În ceea ce privește compatibilitatea cu tehnologii de management a bazelor de date, PHP funcționează în combinație cu MySQL, însă acest lucru nu exclude folosirea altor sisteme de management al bazelor de date, PHP-ul funcționând în parametrii optimi în combinație cu Oracle, MS SQL Server sau Postgres. Un alt avantaj al tehnologiei PHP este independentă de platformă, acesta funcționând atât pe Windows, cât și pe Linux sau Mac OSX.

Astfel, cel mai simplu mod de a opera cu PHP-ul, în tandem cu MySQL și Apache, este de a folosi pachetul WAMP, integrând perfect această tripletă PHP+MySQL+Apache și disponibil pe site-ul oficial[2].

Un fișier în format PHP poate să conțină etichete din HTML, și de asemenea în partea de client pot exista și scripturi în JavaScript.

Sintaxa elementelor din PHP este similară cu cea a altor limbaje structurate cum ar fi C, JavaScript, C#, având similitudini ale limbajului Pearl la nivel de operare cu string-uri de date. Afișarea unui mesaj pe ecran se face cu ajutorul următoarei sintaxe, în exemplul de mai jos este integrat și cod HTML însă folosirea acestuia este opțională. Ca și în cazul fișierelor HTML, există etichete de început și sfârșit ce indică tipul fișierului, acestea sunt <? php … ?>. Funcția echo asigură afișarea pe ecran a șirului specificat ca parametru al funcției. O altă similitudine de sintaxă este cea a terminatorului de linie ;, acesta fiind prezent în limbajele precum C sau Java.

Fișierul sursă are extensia .php, extensie ce este recunoscută de serverul Apache. Tipurile de date suportate de PHP sunt: integer, string, float, Boolean, object, array și null. Limbajul este case-senzitive, iar numele variabilelor sunt precedate de caracterul $.

În ceea ce privește protocoalele de comunicare, pașii pe care îi urmează datele de la web browser-ul până la client înapoi reprezintă o variantă simplificată așa cu sugerează figura 2.4.4, însă ineficientă din punct de vedere al gestionării resurselor.

Astfel, în pasul 1 utilizatorul (client) accesează pagina în motorul de navigare. În pasul 2 motorul de navigare trimite mesajul pe interne cerând prima pagina a cleanup.com. În Serverul Apache un program care rulează cleanup.com, primește mesajul și citește fișierul index.html (sau fișierul de pe prima pagină), fișier de pe spațiul de stocare (Disk Drive) – pasul 3. Serverul Apache trimite conținutul fișierului înapoi pe internet și ulterior în motorul de navigare în pasul 4. În final, motorul de navigare afișează pe ecran conținutul în funcție de structura fișierului HTML. De fiecare dată când motorul de căutare trimite modificări, serverul răspunde în același mod. Singura dată când apar modificări este atunci când cineva modifică fișierul de pe server[8].

Atunci când PHP-ul este inclus, serverul serverul lucrează la jumătate din comunicarea implicită, după cu se observă în figura 2.4.5, procesele se împart la jumătate.

Astfel, pașii urmați sunt aproape identici in ceea ce privește transmiterea cererii către domeniul de internet, însă diferența majoră apare în momentul ajungerii informației la server. În primul pas utilizatorul scrie în bara navigatorului legătura către pagină, urmând ca în pasul 2 motorul de căutare să trimită mesajul pe internet cerând pagina specifică. În pasul al 3-lea Serverul, Apache mai exact programul care rulează aplicația, primește mesajul și cere mecanismului PHP, un alt program care pe aplicația respectivă, fișierul php necesar. În etapa următoare PHP-ul citește fișierul din memorie urmând ca mai apoi în pasul 5 să ruleze instrucțiunile din fișierul respectiv și în cazul în care este nevoie să schimbe date cu baza de date MySQL. În etapa 6 PHP-ul trimite răspunsul cu fișierul cerut înapoi la Serverul HTTP Apache, urmând ca mai apoi (în etapa a 7-a) Serverul HTTP Apache să trimită conținutul paginii primite înapoi la motorul de navigare ca răspuns la cererea efectuată. În final (8) motorul de navigare afișează informația cerută pe ecranul utilizatorului în funcție de instrucțiunile și structura fișierului HTML[8].

Principalele criterii pe baza cărora cele două tehnologii sunt comparate sunt: mentenanță și scalabilitate, performanță și viteză, cost, și sprijinul din partea comunității care a introdus tehnologia. Din punct de vedere al scalabilității și performanței, ambele tehnologii sunt similare, însă factorii care determină alegerea depind de experiența dezvoltatorilor, folosirea unui framework solid, sau urmărirea standardelor de calitate și a diferitelor standarde de programare. Cele mai relevante criterii de determinare a performanței sunt de regulă cât de eficient interacționează cu baza de date, scripturile și serverul pe care este instalat. Un alt factor determinant al performanței este serverul pe care rulează împreună cu sistemul de operare. Sistemele de operare ce conțin Linux și fișierul ext4 se presupune că ar oferi o performanță mai mare în ceea ce privește intrarea și ieșirea datelor, în comparație cu Windows și fișierul de sistem NTFS.

Astfel concluzia ar fi că aplicațiile PHP care rulează pe sisteme de operare Linux are mai multe șanse de a face performanță mult mai bună decât o aplicație care utilizează ASP.Net și este găzduită de un server cu sistemul de operare Windows[11].

Din punct de vedere al costului PHP este disponibil în mod gratuit, în timp ce dezvoltarea ASP.NET pe produse Microsoft poate impune costuri ulterioare ale dezvoltării. În rândul dezvoltatorilor există părerea conform căreia găzduirea oferită de Microsoft este mai scumpă, însă în momentul actual există destul de multe oferte ce pot reduce costul în apropierea unui server Linux. Un alt cost ce trebuie menționat este cel impus de mediul de dezvoltare, Microsoft Visual Studio nefiind disponibil în mod gratuit pe o perioadă lungă de timp.

Conform BuiltWith figura 2.4.6, PHP se află în centrul clasamentului atunci când vine vorba de popularitatea limbajului utilizat, având aprox. 67%, în timp ce ASP.NET doar 30%, fapt ce marchează o creștere față de ultimii ani.

În concluzie PHP-ul reprezintă o alternativă utilă pentru website-urile afacerilor mici și a start-up-urilor, management de tip CRM, precum și ISVs (Independent Software Vendors), în timp ce ASP.NET este potrivit pentru site-urile de tip enterprise, module pentru managementul resurselor umane (ERP), utilizarea în Intranet, și management de tip CRM (Customer relationship management)[12]. PHP-ul este utilizat de peste 20 de milioane de site-uri web și aplicații de pe internet. Domeniile folosite sunt diverse, de la site-uri de socializare cum ar fi Facebook, la content manageri cum ar fi Word Press sau Joomla, dar și comerț sau alte domenii cum ar fi Yahoo! sau Wikipedia.

MySQL

Un server de baze de date (în cazul de față MySQL) este un mediu software (un pachet de programe) care permite stocarea unei cantități mari de informații într-un format organizat (într-o structură organizată), ușor de accesat prin intermediul unor interfețe grafice sau text de tip client–server, realizate cu ajutorul unor limbaje (de script, cum ar fi PHP, Perl sau alte limbaje de nivel înalt gen C, C++, Delphi, etc). Organizarea și administrarea informației în cadrul serverului de baze de date este asigurată printr-un limbaj SQL, mai precis un dialect SQL specific serverului de baze de date[2].

MySQL reprezintă o alternativă open-source fiind un manager al bazelor de date, ce oferă puterea unei baze de date relaționare, fiind puse într-o într-un mediu de administrare simplu și ușor de utilizat.

O serie avantaje pe care le oferă reprezintă performanța, scalabilitatea, fiabilitatea și timpul de disponibilitate, administrarea și ușurința utilizării, adaptabilitatea în funcție de SaaS și Cloud, adaptarea pe Web, ediția enterprise disponibilă, MySQL & NoSQL. În ceea ce privește arhitectură făcută pentru Web, această arhitectură a fost construită pentru optimizarea aplicațiilor ce rulează în server. În același timp, performața și scalabilitatea acestuia au dus la clasarea acestuia pe primul loc atunci când vine vorba de alegerea pentru aplicații web. Un alt factor determinat al performanței îl reprezintă numărul de conexiuni multiple indiferent de volumul de date procesat. Disponibilitatea reprezintă un avantaj important întrucât aplicațiile web au de regulă nevoie de disponibilitate constantă 24/7. Perioada în care baza de date dacă nu este disponibilă fiind o perioadă critică pentru aplicația în cauză și pentru clienții sau vizitatori. O caracteristică a MySQL-ului este robustețea, având o perioadă de timp îndelungată în ceea ce privește testare, milioanele de utilizatori utilizându-l în aplicații diverse. MySQL Server este foarte important pentru administrarea bazelor de date cu volum mare. În ceea ce privește flexibilitatea, acesta se poate adapta cu ușurință mediului în care este amplasat, fie că este instalat pe un server sau un laptop, acesta va funcționa în parametrii optimi.

În ceea ce privește utilizarea MySQL este utilizat de foarte multe companii de it și de mari platforme cum ar fi Facebook, Google, Adobe, Alcatel, scopul fiind acela de a salva timp și bani.

MySQL conține și o interfață grafică ce evită codul în SQL, folosind opțiuni ce se pot realiza cu ajutorul câtorva click-uri[13].

PREZENTAREA PROIECTULUI

Analiza și specificațiile cerințelor

În categoria utilizatorilor normali ai aplicației se încadrează publicul țintă al companiei de curățenie, fiind vorba mai exact de publicul cu vârsta peste 20 de ani cu domiciliul în mediul urban, aceștia fiind acomodați cu tipul de servicii pe care firma le prestează. Aplicația web poate fi folosită însă de oricine dorește să beneficieze de serviciile oferite de firmă sau să afle mai multe detalii despre domeniul de activitate al întreprinderii. În același timp, aplicația poate fi utilizată de către personalul angajat din cadrul companiei, personal ce nu are nevoie de competențe tehnice pentru a putea administra sistemul.

Principalul use-case este efectuarea unei cereri cu scopul returnării unor servicii, în vederea eficientizării comunicării dintre client și companie în așa fel încât să nu existe probleme în ceea ce privește calcularea unui preț real aproximativ sau a stabilirii unei date. Alte use-case ale aplicației web sunt: autentificarea, adăugarea unui testimonial scurt, ce vizează părerea utilizatorilor despre servicii, ofertă sau prețuri, schimbarea parolei de la cont precum și actualizarea datelor personale din profil. Aceste use-case-uri sunt prezente în figura 3.1.1.

În ceea ce privește admiratorul ce gestionează sistemul, acesta are mai multe use-case-uri: actualizarea listei de prețuri, vizualizarea datelor utilizatorilor înregistrați pe site, vizualizarea și marcarea mesajelor private primite prin formularul de contact, actualizarea anumitor pagini, ștergerea abonaților la newsletter, aprobarea cererilor de curățenie precum și aprobarea testimonialelor ce apar pe prima pagină.

Pentru a putea utiliza platforma, și implicit contul aplicației, este necesară autentificarea cu ajutorul numelui de utilizator și a parolei. Autentificarea se va face într-o fereastră ce apare pe prima pagină. Aplicația primește în momentul validării datelor un identificator al utilizatorului, pe care îl memorează în vederea unei utilizări ulterioare.

Utilizarea aplicației este permanent dependentă de internet, fiecare operație putând fi realizată doar cu ajutorul unei conexiuni stabile. Pentru utilizatorii neînregistrați este necesară înregistrarea prin completarea unui formular cu datele necesare. Odată ce s-a produs autentificarea, utilizatorul are acces la opțiunile necesare efectuării unei cereri.

Interfața cu utilizatorul

Structura site-ului a fost realizată pentru utilizatori neexperimentați, având o structură simplă, cu denumiri cât mai sugestive pentru utilizator. Structura a fost realizată pe secțiuni în funcție de informația transmisă, în acest timp, pentru o prezentarea anumitor secțiuni s-a folosit elemente grafice sub formă de iconițe pentru a exemplifica mult mai bine informația transmisă. Informația de pe prima pagină a fost ierarhizată în funcție de importanța acesteia, numărul de categorii nu a depășit 7 elemente, acest lucru ajutând utilizatorul la o mai bună navigare. În același timp, ierarhia a fost stabilită și din punct de vedere logic, categoriile fiind unice și distincte. Proiectarea barei de meniu s-a realizat conform figuri 3.2.1.

Pe prima pagină, figura 3.2.2, nu exista subcategorii, acest lucru ajutând utilizatorul să aleagă o cale în funcție de misiunea pe care o are. Un principiu solid folosit este acela al accesibilității informației, necesitând mai puțin de 3 click-uri pentru a ajunge la informația dorită. Stabilirea unei structuri a informației reprezintă un avantaj din punct de vedere al optimizării SEO, o arhitectură corectă ajutând la afișarea link-urilor din site sub link-ul principal în motorul de căutare utilizat. Astfel, pagina principală are în subordine secțiunile principale: Despre companie, Cere un preț, FAQ, Contactează-ne precum și Autentificarea. Platforma a fost realizată în limba engleză, deoarece reprezintă o limbă de circulație internațională.

Pe prima pagină, utilizatorul are contact cu o serie de imagini incluse într-un carusel, acestea fiind sugestive domeniului de activitate al firmei însă nepersonalizate. Pentru realizarea meniului s-a utilizat bara de navigare din Bootstrap, aceasta rămânând în partea de sus și după ce utilizatorul s-a deplasat în josul paginii. Elementele grafice utilizate sunt preluate de pe website-uri de resurse gratuite în format vectorial(.svg), acestea având avantajul păstrării lizibilității la cele mai mici dimensiuni, precum și păstrarea calității la supradimensionare elementelor. O mare parte din iconițe au fost preluate de pe site-ul flaticon.com. În cadrul secțiunii How it works, utilizatorilor neautentificați li se pune la dispoziție un buton de acțiune, buton ce îl redirecționează către pagina de autentificare, în același timp explicând într-un mod succint vizual cum funcționează procesul și rapiditatea ajungerii la un rezultat cât mai rapid , așa cum este sugerat în figura 3.2.3.Pagina imediat următoare are ca scop convingerea utilizatorului prin creșterea încrederii acestuia în firmă, motiv pentru care sunt prezentate statistici atractive cu scopul atragerii clientului. In spatele statisticilor din figura 3.2.4 se află o poză normală, însă asupra este aplicat un efect de întunecare a acestei a cu scopul evidențierii informației relevante din contextul actual. Datele prezentate nu sunt însă puse la dispoziție spre modificarea din panoul de administrator, acest lucru reprezentând o posibilă îmbunătățire în viitor. Rubrica următoare figura 3.2.5 cuprinde recenziile oferite de utilizator, sau testimonialele, acestea fiind scrise de utilizatorii autentificați și ulterior aprobate de administratorii platformei.

În partea de subsol din figura 3.2.6 se află un meniu de secțiuni în care se găsesc link-urile utile care nu sunt incluse în meniu sau care sunt incluse și necesită poziționarea lor în mai multe locuri atât pentru optimizarea SEO cât și pentru nevoia de accesibilitate a utilizatorului. Subsolul paginii include de asemenea și abonarea la newsletter ce se realizează prin intermediul e-mail-ului și niște butoane de contact ce conduc către paginile oficiale din social media (Facebook, Instagram, Twitter, LinkedIn, Google+). Rubrica meniului adițional ajută utilizatorul odată ajuns la sfârșitul paginii pentru a putea fi redirecționat către un o altă pagină.

Opțiunea de schimbare a culorilor pune la dispoziție modificarea culorilor butoanelor de acțiune, având posibilitatea în funcție de culoarea preferată să fie alese din 4 culori așa cum se poate observa și în figura 3.2.7. Necesitatea opțiunii pleacă de la raționamentul ideii conform căreia culorile preferate ale utilizatorilor sunt observate cu mult mai mult mai ușor și implicit ajung la acțiunea dorită mult mai repede.

În cadrul în secțiunii de About us așa cum se observă în figura 3.2.8 se găsesc informații relevante despre companie și valorile acesteia, având un header specific ce informează utilizatorul cu privire la starea în care se află și la locul de pe site în care se află. Secțiunea este modificabilă în materie de conținut de către administrator având posibilitatea de a fi actualizată periodic. Pe același design este construită secțiunea de FAQ fiind în același timp modificabilă de către administrator. În cadrul formularului de contact există același stil, utilizatorul fiind nevoie să își introducă datele de contact, nume, e-mail, număr de telefon și mesajul propriu zis. Tot în secțiunea respectivă se află datele de contact de e site, adresă, e-mail și număr de telefon, acestea având posibilitatea de a fi actualizate de către administratorul portalului.

Formularul de autentificare apare sub formă de pop-up în figura 3.2.9 , în momentul accesării butonului de autentificare. În același timp, în cazul în care utilizatorul nu are cont, i se pune la dispoziție opțiunea de înregistrare. O altă opțiune pusă la dispoziție o reprezintă parola uitată, pentru aceasta fiind necesare datele introduse în câmpul de înregistrare pentru a putea verifica autenticitatea. Formularul de înregistrare cuprinde câmpuri minimale ce sunt necesare unei bune administrări. Odată completat, utilizatorul își dă acordul cu privire la respectarea angajamentelor cu privire la politica de confidențialitate așa cum este reprezentat în figura 3.2.10.

Odată conectat, utilizatorul se poate bucura de toate facilitățile pe care platforma le pune la dispoziție apărând opțiunea de Make a request, precum și numele utilizatorului împreună cu panoul adițional asignat acestuia prezent în figura 3.2.11. Panoul conține setările de profil puse la dispoziție, precum și opțiuni precum schimbare parolei, scrierea unui testimonial, vizualizarea testimonialelor publicate precum și opțiunea de deconectare a contului.

Odată accesat profilul utilizatorului, acesta are posibilitatea de a actualizare a datelor adăugate în meniul de înregistrare precum și vizualizarea datei ultimei actualizări. În același timp, în cadrul meniului are posibilitatea de a schimba parola contului, postarea unui testimonial, vizualizarea testimonialelor scrise precum și statusul acestora. Deconectarea reprezintă un aspect important fiind inclusă și în acest sub meniu.

Utilizatorilor autentificați le este pusă la dispoziție opțiunea realizării unei cereri online către firma de curățenie, în urma cererii primind un preț estimativ în raport cu suprafețele introduse spre curățare. Astfel utilizatorul autentificat va trebui să completeze un formular ce presupune atât date personale cât și date referitoare la zona care se dorește a fi curățată. Reintroducerea datelor personale prezente în figura 3.2.12 oferă posibilitatea utilizatorilor să facă o cerere pentru alte persoane ce nu au contact cu mediul digital. Simplitatea utilizării vine din faptul că formularul nu necesită foarte multe date și implicit poate să fie completat în maxim 4 minute așa cum se poate observa în figura 3.2.13 și ulterior în figura 3.2.14, acest lucru este posibil în cazul în care datele despre suprafețele aproximative sunt cunoscute de către utilizator. Odată completate datele în mod corespunzător utilizatorului îi va apărea o fereastră de tip pop-up ce va include sumele totale afișate pentru fiecare serviciu precum și prețul total estimativ pe care utilizatorul l-ar avea de plătit în cazul confirmării cererii de prestare servicii, așa cum este sugerat în figura 3.2.15.

Astfel, utilizatorul este informat cu privire la eventualele costuri, urmând ca ulterior să stabilească detaliile cu firma de curățenie în ceea ce privește ora, disponibilitatea firmei în data respectivă și alte eventuale servicii ce pot influența prețul oferit. În zona panoului de administrare are acces doar administratorul site-ului, însă în cazul în care utilizatorul accesează ruta acesta va trebui să se autentifice folosind numele de utilizator de administrator și parola. Astfel, ruta este protejată de o eventuală accesare neautorizată așa cum apare și în figura 3.2.16. Odată autentificat, administratorul este redirecționat către panoul de bază de administrare, numit Dashboard admin așa cum așa cum apare și în figura 3.2.17.

În cadru acestui panou sunt prezentate statistici în mod succint despre numărul de utilizatori înregistrați, numărul de cereri de curățare depuse, numărul de abonați la canalul de mail, precum și numărul de oameni care au scris pe adresa de Contact Us din site și recenziile oferite. Bara din meniul lateral conține mult mai multe elemente decât cele prezentate în principal întrucât nu toate sunt necesare fiind vorba de operații ce se întâmplă cu o frecvență mai redusă (cum ar fi actualizarea prețurilor sau a conținutului paginilor). Secțiunea de management a testimonialelor din figura 3.2.18 include un tip de tabele ce permit căutare, filtrarea, afișarea, parcurgerea și selectarea anumitor date, astfel informația este manipulată cu ușurință de către administrator, ba mai mul acesta are posibilitatea de sortare în funcție de criterii alfabetice sau cronologice, după caz. Butonul de acțiune din dreapta reprezintă 2 stări, starea de Inactive ce face referire la un testimonial neafișat pe prima pagină și starea de Active ce face referire la testimonialul vizibil în pagină. Acest fapt duce la evitarea situațiilor în care ar putea apărea pe pagină anumite recenzii negative sau neadevărate. Administratorii își asumă responsabilitatea cazului în care recenziile negative și adevărate nu apar pe pagină, soluția utilizatorilor nemulțumiți ar fi oferirea recenziilor de acest fel pe platformele de socializare unde impactul poate să fie mult mai mare.

Interfața în cadrul rubricii de Contact Us este asemănătoare cu cea din cadrul recenziilor diferența fiind aceea că Acțiunea pe care administratorul o poate face este diferită, având posibilitatea marcării mesajelor ca fiind citite așa cum este prezent și în figura 3.2.19. Această îmbunătățire este utilă în cazul în care există mai mulți administratori ai platformei ce se ocupă de partea administrativă și astfel se evită timpul inutil petrecut pe citirea sau formularea unui răspuns concret utilizatorilor. O posibilă îmbunătățire în acest câmp ar fi marcarea cu Replyed pentru cazul în care i s-a răspuns deja precum și opțiunea de Delete pentru a nu supraîncărca memoria alocată cu mesaje te tip spam sau mesaje ce nu sunt utile administratorilor.

Secțiunea de management a cererilor din cadrul figurii 3.2.20 permite vizualizarea datelor oferite de utilizatori precum și fișarea statusului în care se află solicitarea acestora. Această acțiune poate fi întreprinsă după ce utilizatorul a confirmat în mod telefonic cererea și a convenit împreună cu acesta cu privire la data și intervalul orar dorit pentru efectuarea serviciilor.

Zona de administrare a utilizatorilor înregistrați este similară cu cea de Manage Requests însă nu există un buton de acțiune în dreptul utilizatorilor. Această măsură este pentru a preveni eventuale daune provocate de angajați sau eventuale greșeli ce pot apărea.

Secțiunea de Update Contact Info vizează actualizarea informațiilor din cadrul pagini referitoare la datele de contact ale companiei. Această secțiune pune la dispoziție adăugarea mai multor adrese de e-mail în așa fel încât în cazul divizării responsabilităților să se poată administra mult mai ușor felul în care este primită informația. În cadrul secțiunii de Manage Prices din figura 3.2.21 administratorul are posibilitatea de a actualiza prețurile din site în așa fel încât să poată să adauge o eventuală ofertă temporară sau permanentă, în același timp având posibilitatea să vizualizeze prețul precedent. Odată actualizat, odată propagat către toți utilizatorii, totalul împreună cu prețurile intermediare se vor calcula conform noului preț.

În secțiunea de Manage Subscribers din figura 3.2.22 administratorul are posibilitatea de vedea utilizatorii abonați la mail-ul cu noutăți. Pentru un management activ, administratorul are la dispoziție acțiunea de ștergere în cazul e-mailurilor ce nu sunt valide sau nu doresc să primească diferite oferte prin intermediul e-mailului.

În cadrul interfeței cu administratorul s-au folosit iconițe descriptive pentru a facilita recunoașterea în detrimentul memorării căilor de acces. Proiectarea interfeței utilizatorului a fost făcută în manieră minimalistă, având elementele esențiale puse la dispoziția utilizatorului în timp ce restul elementelor sunt incluse în categorii speciale, nefiind puse în zone de interes pentru utilizator.

Schema bloc a sistemului

În ceea ce privește interacțiunea utilizatorului cu sistemul sugerată în figura 3.3.1, utilizatorul efectuează o cerere prin apăsarea unui buton în interfață, interfața este accesată prin intermediul motorului de navigare, acesta având rolul atât de afișare a informației cât și de a transmite mesajele mai departe prin intermediul internetului în Serverul Web Apache. În cadrul serverului fișierele ajung în zona alocată PHP-ului, zonă în care procesele sunt administrate în funcție cerere. Fișierul PHP poate să conțină doar elemente de HTML/CSS/JavaScript, în acest caz, acestea sunt preluate direct de pe spațiul de stocare. În cazul în care fișierul PHP necesită diverse date acesta apelează baza de date numită cleanup și primește informațiile din tabelele necesare. După acest proces, fișierul PHP este trimis către Apache, care ulterior îl trimite prin intermediul internetului înapoi motorului de navigare, în cadrul căruia sunt afișate informațiile pe ecranul utilizatorului.

În același mod este procesată și cerea utilizatorului cu privire la afișare prețului pe ecran, dar și finalizarea acesteia. În momentul completării formularului, datele sunt trimise la server și stocate în baza de date, urmând ca acestea să fie procesate și ulterior după calcularea sumelor acestea să fie trimise înapoi utilizatorului. Odată primite datele, utilizatorul decide dacă dorește să continue operația, în cazul în care dorește este trimis din nou către baza de date o cere în care sunt stocate valorile terminale.

PROIECTAREA ÎN DETALIU

Comunicarea dintre componente

Componentele aplicație au fost secționate în așa fel încât să îndeplinească sarcini preponderent singulare, evitând confuzia, ajutând la creșterea calității codului ce poate fi îmbunătățit. În același timp, componentele pot fi testate singular iar în cazul unor eventuale probleme acestea se pot rezolva mult mai repede. În ceea ce privește organizarea componentelor, acestea necesită de regulă diferite informații ce se regăsesc în baza de date, astfel, componenta ce include conectarea la baza de date este una dintre cele mai utilizate din cadrul întregii aplicații. În figura 4.1.1 sunt prezentate componentele ce aparțin de zona utilizatorului și de nivelul de accesibilitate al acestuia.

Componenta ce vizează prima pagină numită index include o serie de alte componente cum ar fi elemente ce țin de interfață, bara de meniu și subsolul, dar și cele ce țin de elementele de bază cum ar fi conectarea la baza de date, formularul de înregistrare sau autentificare precum și elemente vizuale suplimentare cum ar fi componenta de schimbare a paletei de culori principale din cadrul paginii.

Funcția de conectare la baza de date se numește în mod fizic config, iar în figură Db connect și este formată din instrucțiuni scurte ce vizează autentificarea precum și stabilirea conexiunii la baza de date dorită. Această funcție este independentă iar în cazul nefuncționării acesteia efectele pot fi dezastruoase iar paginile afișate pot conține informații trunchiate sau diferite erori de conexiune.

Întrucât componenta de header cuprinde bara de link-uri, aceasta nu necesită conectarea la baza de date datorită faptului că este inclusă în pagini în care baza de date este deja conectată, însă oferă legături externe către alte componente ce vizează elemente din meniul principal. Componenta ascunde sau afișează informația în funcție de utilizatorul care este sau nu conectat. În cadrul componentei de subsol footer, la fel ca în cazul celei de header, nu este nevoie de conexiune directă, motivul fiind același. Ambele componente utilizează însă în mod direct informații din baza de date.

În ceea ce privește componenta de page, componentă ce vizează preluarea datelor referitoare la conținutul paginilor informative cum ar fi About us, FAQ, Terms&Conditions și Privacy Policy.

Componenta de autentificare login, are în vedere autentificarea utilizatorului prin intermediul unei adrese de e-mail și a unei parole. Aceasta se realizează într-o fereastră de tip pop-up, punând în același timp la dispoziție redirecționarea utilizatorului către un formular de înregistrare în cazul în care nu are cont sau către un formular de parola uitată. În cazul redirecționării către componenta de parolă uitată, utilizatorului i se cer niște date ale contului, urmând ca ulterior să poată să updateze noua parolă a contului în baza de date. Acest proces se realizează într-o fereastră de tip pop-up. Formularul de înregistrare are în cadrul ei componenta ce realizează înregistrarea utilizatorului pe platformă și implicit adăugarea acestuia în baza de date. Componenta apelează o funcție ce realizează căutarea în baza de date a e-mailului verificând dacă acesta a mai fost utilizată sau nu de către alt utilizator, dacă această verificare este negativă utilizatorul își poate crea contul dacă întrunește și restul cerințelor de înregistrare.

Pe lângă componentele de header, footer și conectarea la baza de date, o altă componentă permanent prezentă în cadrul proiectului o reprezintă componenta de schimbare a paletei principale de culori, colorswitcher. Funcționalitatea componentei vine din faptul că aceasta utilizează mai multe fișiere .css pe care le interschimbă între ele în momentul în care utilizatorul schimbă culoarea. În același timp, fișierele .css conțin clase din elementele ce se doresc a fi schimbate precum și codurile culorilor aferente paletei de culori. Componenta a fost preluată de pe internet motivul fiind acela al versatilității componentei.

Componenta Contact Us include formularul transmis administratorilor. Conexiunea componentei este ca și în cazul celorlalte componente cu header, footer, Db Connect și colorswitcher, acestea fiind necesare pentru o bună funcționare. În cadrul Update password sunt importate aceleași componente, rolul acesteia fiind de a updata în baza de date parola nou modificată de utilizator. Această opțiune este însă posibilă numai în cazul în care utilizatorul este autentificat cu succes.

Componenta Profile pune la dispoziție utilizatorului schimbarea datelor pe care acesta le-a introdus la înregistrare precum și adăugarea altor date ajutătoare. Componenta comunică la fel ca în cazul Contact us, având în plus componenta de sidebar. Componenta de sidebar conține link-urile din sub meniul Profilului de utilizator. În ceea ce privește restricțiile, numai un utilizator autentificat poate accesa această pagină împreună cu sub meniul acesteia

Componenta Post a testimonial, respectiv My testimonials, are în vedere scrierea unei recenzii de către utilizatorul autentificat, precum și vizualizarea testimonialelor publicate sau statusul acestora. Aceste două componente comunică în același fel ca și în cazul Profile.

O componentă esențială în cadrul aplicației o reprezintă cea numită Request, această componentă are ca scop înregistrarea unor valori pe care utilizatorul le oferă, urmând ca după trimiterea formularului în care au fost completate, să se apeleze componenta Total, componentă ce oferă rezultatul final sub forma unui preț estimativ. În același timp, în momentul primirii prețului, la un click distanță se află trimiterea formularului în baza de date cu valorile corespunzătoare. Componenta Total practic extrage din baza de date valorile necesare din tabela de prețuri precum și valorile utilizatorului efectuând un calcul pe care îl notează într-o altă tabelă ce ulterior este însumată și se obține astfel prețul final. Componenta Total comunică separat de Request cu baza de date întrucât aceasta are nevoie de anumite id-uri. Componenta Request însă comunică în același mod în care comunică majoritatea.

În ceea ce privește componentele din zona panoului de administrare, acestea sunt organizate separat de cele ce țin de utilizator având până și fișierul de conectare la baza de date separat. Interdependența componentelor din cadrul zonei de administrare sunt prezente în figura 4.1.2. Componenta Db Connect vizează autentificarea în cadrul bazei de date, fiind o componentă esențială în zona panoului de administrație întrucât este utilizată în fiecare altă componentă.

O altă componentă utilizată aproape la fel de des precum cea de conectare la baza de date o reprezintă componenta leftbar, în cadrul acestei componente se află legăturile ce redirecționează către restul componentelor ce vizează administrarea. Componenta conține și elemente ce țin de deconectare sau de schimbare a parolei acestea reprezentând submeniul administratorului ce are legătură directă cu contul acestuia.

Componenta index numită și register mai intuitiv vizează autentificarea administratorului, autentificare realizată prin intermediul unui username și a unei parole. Această componentă este legată doar la componenta ce vizează conectare la baza de date și ulterior după autentificare redirecționează utilizatorul către componenta de Dashboard.

Odată autentificat, utilizatorului îi este afișată componenta Dashboard, în cadrul căreia poate să vizualizeze statistici minimale cu privire la anumite date relevante. Afișarea acestor date se realizează prin diferite cereri la baza de date precum și însumări ulterioare pentru oferirea unui singur număr la aproape fiecare secțiune. Această componentă este conectată la componenta Db Connect și Index, precum și Leftbar.

Componenta de Manage Pages reprezintă una dintre cele mai versatile componente întrucât scopul acesteia este punerea la dispoziție a unui cadru în care administratorul să poată actualiza informația din cadrul paginilor ce vizează conținut preponderent sub formă de text. Prin intermediul acestei componente se pot actualiza informațiile din secțiunile de About Us, FAQ, Privacy&Policy precum și Terms and Conditions. Activitatea în baza de date a componentei este de a actualiza textul în celulele corespunzătoare fiecărei secțiuni. Această componentă comunică cu cele 3 componente de bază, Leftbar, Index și Db Connect.

Manage Contact Us se referă la managementul mesajelor trimise pe formularul din secțiunea de Contact Us, acestea apar sub formă de tabel și există posibilitatea de a fi marcate ca citite sau nu. Componenta comunică la fel ca și Manage Pages.

În cadrul Manage Prices, administratorul are posibilitatea de a modifica prețurile pe suprafață, având și posibilitatea vizualizării prețurilor actuale. Componenta face update în baza de date a noilor prețuri. Pe partea de comunicare, această componentă importă aceleași componente precum Manage Pages.

Componenta de Manage Requests vizează administrarea cererilor din partea utilizatorilor, aceste cereri vizează datele despre serviciile dorite de curățare. În această zonă se află și datele relevante contactării viitorului client, număr de telefon, adresă de e-mail precum și numele complet. În zona de Manage Request există posibilitatea marcării de către administrator sub o anumită formă. Comunicarea este identică cu cea de a Manage Pages.

Manage Subscribers face referire la canalul de mail la care utilizatorii sunt abonați, în cadrul acestei componente sunt afișați toți utilizatorii abonați administratorul având posibilitatea de ștergere a acestora din tabelul cu abonați.

Componenta de Manage users administratorul are posibilitatea de a vizualiza datele utilizatorilor, fiind exclusă parola întrucât aceasta este criptată pentru a fi introdusă în baza de date.

În cadrul componentei de Manage Testimonials administratorul poate permite afișarea unei recenzii pe prima pagină. Pentru fiecare recenzie este nevoie de aprobarea administratorului întrucât acesta să poată evita conținutul inutil pe pagină sau eventuale acuzații neadevărate la adresa firmei. Astfel, administratorul poate să decidă un număr dorit de testimoniale, în funcție de cât de mult își dorește să convingă eventualii clienți și în funcție de ce informații consideră că sunt relevante pentru utilizatori.

Informațiile despre sediul firmei precum și datele de contact pot suferi modificări în timp, astfel administratorul neavizat are posibilitatea să modifice aceste dată fără a fi nevoie de o persoană cu competențe tehnice avansate. Este ceea ce Manage Contact Info realizează ca și componentă, în același timp există posibilitatea adăugării mai multor adrese de mail în cazul în funcție de nevoile utilizatorului. Astfel, în cazul divizării responsabilității anumitor sarcini unor persoane care se ocupă de anumite arii poate să ducă la un răspuns cât mai precis și oferit în cel mai scurt timp. Cazuri precum un mail pentru o cerere online complexă sau o ofertă pentru curățarea unui spațiu industrial să se poată trimite pe o anumită adresă de mail, pentru posibile parteneriate de promovare pe alt mail, pentru managerul general și probleme administrative să existe o adresă specială șmd.

În cadrul componentelor ce implică tabele și procesare mai complexă a datelor s-a utilizat o componentă externă de afișare a datelor numită Data Tables, datorită ușurinței de manipulare a datelor precum și ușurința de importare în proiect. Componenta a fost preluată de pe site-ul oficial datatables.net, fiind la bază un plug-in bazat pe jQuery și JavaScript. Această componentă oferă posibilitatea de căutare, paginare și filtrare pe oricare dintre coloanele tabelelor, având în același timp o varietate de extensii cu care poate să colaboreze.

Data Tables conține două module diferite de procesare a datelor:

Procesarea pe partea de client – datele sunt încărcate și procesate de motorul de navigare

Procesarea pe partea de server – o cerere de tip Ajax este făcută pentru fiecare tabel, doar pentru datele necesare în fiecare zonă în care apar. Procesarea datelor este realizată de către Server[14].

Structura de baza de date și fișiere

Proiectul a fost structurat în 2 mari secțiuni așa cum se observă în figura 4.2.1, cu scopul divizării responsabilității proceselor interne. Astfel partea ce se referă la utilizator și la informația la care acesta are acces se află în directorul principal, împreună cu resursele necesare, iar partea de administrare se află într-un folder cu numele de admin. Fiecare folder conține un sub folder numit includes, folder ce conține fișierele incluse în structura de bază, ce conțin elemente singulare cum ar fi bara de navigare, subsolul sau diferite procese ajutătoare. În același timp, în directorul de bază s e află un folder numit assets ce conține un folder css (ce conține fișierele aferente stilurilor), un folder de resurse images, pentru resursele grafice, un folder numit .js (ce conține fișierele script), un alt folder este switcher ce conține fișierele aferente schimbării paletei de culori din pagină. Folderul aferent panoului de administrare este organizat în mod asemănător. În cadrul fișierelor .php, fiecare dintre acestea au asignată câte o funcționalitate majoră a sistemului. Primul fișier deschis la accesarea pagini este index.php, fișier ce conține toate elementele de pe prima pagină atât în formă directă cât și sub formă de link. Fișierele importate în aproape toate paginile se află în assets, acestea sunt proiectate în așa fel încât să conțină un singur element esențial scopul fiind divizarea componentelor și evitarea supraîncărcării sistemului.

În directorul assets se află fișierul header.php acesta având în interiorul său bara de meniu împreună cu link-urile pentru utilizatorii neautentificați, în cadrul fișierului sunt importate în funcție de caz și formularul de autentificare (login.php), precum și subcategoriile din cadrul profilului în cazul autentificării. Un alt element ce aparține directorului este formularul de autentificare din cadrul login.php, acesta având ca singur scop autentificarea utilizatorului, încă include căi și spre înregistrare sau parolă uitată. Tot în cadrul assets se găsește formularul de înregistrare în fișierul registration.php precum și formularul de parolă uitată identificat în fișierul forgotpassword.php. Un alt fișier important este cel care oferă conectarea la baza de date și la server, config.php, acesta fiind de cele mai multe ori inclus în marea majoritate a fișierelor ce necesită scrierea, citirea, actualizarea sau ștergerea elementelor din baza de date sau din tabelele aferente acesteia. Fișierul footer.php conține subsolul pagini, acesta fiind apelat de cel puțin 8 ori în cadrul fișierelor externe. Fișierul colorswitcher.php conține link-urile către fișierele .css care schimbă temele.

În cadrul directorului de bază se găsesc și fișiere aparțin link-urilor din cadrul meniului, cum ar fi contact-us.php fișier ce conține formularul ce este trimis administratorilor site-ului, acesta poate fi trimis fără a fi nevoie de deschiderea e-mailului. Pentru informații adiționale, utilizatorul neautentificat poate să vizualizeze date despre companie, întrebări frecvente, aceste informații ce apar pe pagină sub formă de link-uri către paginile About us, FAQ, Terms and conditions precum și Privacy and policy sunt încadrate într-un singur fișier numit page.php. Fișierul check-availability.php testează dacă mail-ul este deja folosit de către alt utilizator în momentul înregistrării.

Odată autentificat, utilizatorul are pe lângă alte opțiuni puse la dispoziție, și opțiunea de deconectare, realizat prin fișierul logout.php. În ceea ce privește opțiunile puse la dispoziția utilizatorului, acesta poate face o cerere prin intermediul fișierului request.php, fișier ce apelează un alt fișier pentru calcularea sumelor implicate total.php și trimite mai departe datele în tabela aferentă. Odată autentificat, utilizatorul are pusă la dispoziție modificarea datelor din cadrul profilului în fișierul numit profile.php. O altă opțiune pusă la dispoziție utilizatorilor autentificați este opțiunea de schimbare a parolei, opțiune regăsită în fișierul update-password.php. În același timp, utilizatorul poate să scrie un testimonial sau o scurtă recenzie despre companie care apară pe prima pagină, după aprobarea administratorului, acest modul se află în post-testimonial.php , având opțiunea de a vedea testimonialele scrise deja precum și posibilitatea vizualizării stării în care acestea se află.

Folderul css conține fișierele necesare personalizării în detaliu a paginii, style.css împreună cu style2.css conțin clasele împreună cu atributele necesare design-ului de bază în format desktop, în timp ce fișierul mobile.css conține ajustări ale interfeței pe dispozitive mobile. Folderul images conține toate imaginile ce sunt folosite în scopul prezentării site-ului, majoritatea dintre acestea fiind în format .jpg. În același timp în directorul din interior numit icons se găsesc iconițele utilizate în cadrul interfeței. Iconițele sunt în format vectorial .svg, acest format ajutând la păstrarea consistenței în redimensionare precum și a calității. În cadrul directorului switcher se regăsește componenta de schimbare a culorilor din pagină, această componentă având atât fișiere .css cât și fișiere .js.

În zona de administrare a paginii, mai exact în directorul de admin, se găsesc funcționalitățile de bază ale administratorului, atât pentru contul propriu cât și pentru administrarea întregului sistem de comenzi asignate acestuia. Funcționalitățile pentru contul administratorului includ schimbarea parolei din cadrul fișierului change-password.php și deconectarea din cadrul logout.php.

În cadrul includes se găsesc fișierele pentru bara laterală leftbar.php împreună cu link-urle acesteia, dar și conectarea la baza de date în config.php.

Odată accesat panoul de administrație, prima pagină numită sugestiv index.php necesită autentificarea, urmând ca după să redirecționeze către pagina de dashboard, pagină ce conține statistici minimale utile administratorului și bara laterală ce este importată. Administratorul are la dispoziție o suită întreagă de management, cum ar fi management-ul utilizatorilor în reg-users.php, al prețurilor în funcție de care se calculează manage-prices.php, al utilizatorilor abonați la mail-uri manage-subscribers, al cererilor efectuate de către utilizatori manage-requests.php, al mesajelor private de pe formularul de contact manage-contactusquery.php, al recenziilor în testimonials.php, precum și modificarea conținutului din anumite pagini în manage-pages.php și actualizarea datelor de contact de pe site în fișierul update-contactinfo.php.

Restul dosarelor includ fișiere .css sau .js, precum și dosarul img ce include imaginile utilizate ca sursă în design-ul paginii.

În ceea ce privește structura bazei de date, aceasta este de tip SQL, organizată pe tabele având o divizare specifică datelor pe care trebuie să le afișeze așa cum este specifica în figura 4.2.2. Fiecare tabel conține o cheie primară, în unele cazuri aceasta fiind cheie secundară pentru alte tabele. Tabela users vizează datele oferite de utilizator în formularul de înregistrare, câmpul FullName fiind de aproximativ 120 de caractere, dimensiune suficientă pentru orice nume complex apărut. E-mail-ul este tot de tip varchar, având limita de 100 de caractere, în același timp parola prezintă aceleași caracteristici. Numărul de telefon are maxim 11 caractere. RegDate este de tip timestamp și înregistrează data la care utilizatorul își creează contul. UpdationDate reprezintă ultima data la care utilizatorul a făcut o modificare în cadrul contului. Cheia primară a tabelului este UserId.

În cadrul tabelei requests sunt înregistrate cererile de a curățenie împreună cu datele adiționale necesare. Cheia primară este denumită id. Numele sub formă de șir de caractere varchar și are dimensiunea de 120 de caractere, în timp ce e-mail-ul are 100 având același tip, necesitatea adăugării acestor date încă odată după ce utilizatorul a fost autentificat, pleacă de la ideea unei cereri pe care o poate face utilizatorul pentru o terță persoană. Numărul de telefon este ca în cazul tabelei users de 10 caractere. Urmează datele specifice cererii efectuate, cum ar fi suprafața, declarată în int, maximul fiind 11, reqdate ce reprezintă data la care clientul dorește să se efectueze curățarea locuinței fiind de tip datetime, și postingdate fiind data la care se efectuează cererea, aceasta fiind de tip timestamp pentru a putea fi mai ușor înregistrată în tabelă. Coloana de status este dedicate administratorilor, pentru a putea bifa după contactarea clientului dacă cererea a fost confirmată telefonic. Câmpurile walls, doors si window, sunt de același tip, int având limita 11.

Tabela requestinfo înregistrează valorile finale după calcularea în funcție de suprafață și preț. Tabela are cheia primară numită id și este legată prin Foreign key de tabela requests și de tabela users pentru a știi cine face cerea precum și detaliile brute ale cererii (adresă). Astfel, requestid-ul reprezintă de fapt id-ul din tabela requests, iar userid-ul reprezintă userid-ul din tabela de users, relația fiind de tip unul la mai multe. Restul valorilor înregistrate în cadrul tabelei reprezintă prețurile rezultate în urma înmulțirii suprafeței cu prețul pe suprafață, precum și totalul ce reprezintă suma coloanelor totalurilor intermediare.

În tabela admin se întâlnesc date minimale ale administratorului, username și parolă, ambele fiind de 100 de caractere de tip varchar precum și updationDate, câmp ce indică ultimul update realizat la profil, implicit data modificării parolei. Cheia primară a tabelei se numește id și este de tip întreg.

Tabela contactupinfo face referire la datele de contact oferite în dreapta formularului de contact. Acestea apar pe site sub formă de text și conțin adresă, e-mail, număr de telefon. Adresa este de tip tinytext, nefiind necesară o adresă complexă, ci doar strada, numărul și orașul, în timp ce e-mail-ul are 255 de caractere datorită faptului că există posibilitatea ca odată cu creșterea numărului de angajați să apară mai mult de o adresă de e-mail pe site. Numărul de telefon are o lungime standard de 11 fiind de tip char.

Tabela contactusquery se stochează datele din formularul de contact de pe site, pe lângă valorile standard ale numelui, adresei și numărului de telefon, există câmpul Message, care este de tip longtext pentru a permite utilizatorului să scrie cât mai mult text. PostingDate reprezintă data la care mesajul a fost transmis fiind de tip timestamp. Variabila status apare și în acest caz, fiind utilă în panoul de administrare pentru a fi marcată ca și citită sau marcat răspunsul trimis înapoi inițiatorului.

Tabela pages modifică la nivel de conținut textele și stilurile aferente în 4 pagini, fiind suficient de general construită în așa fel încât să poată să se muleze pe cerințele administratorului și pe nevoile utilizatorului. Tabela conține pagename-ul și type-ul declarate ca fiind varchar de 255, și detail fiind de tip longtext.

În tabela prices se află prețurile produselor, prețurile fiind de tip int, cu maximul 11. Câmpurile au ca prefix p_, acestea indicând apartenența la tabelă și evitând eventuale confuzii atunci când se lucrează cu mai multe tabele ce pot avea numele variabilelor asemănătoare. Subscribers se referă la abonații la știri, aceștia fiind nevoiți să introducă doar e-mail-ul pentru a se putea abona, adițional se înregistrează în câmpul PostingDate, data la care utilizatorul se abonează. Cheia primară are numele id.

Tabela testimonials, vizează recenziile acordate de utilizatori, având posibilitatea de a fi afișate pe prima pagină. Pentru acestea sunt necesare useremail-ul de tip varchar cu maxim 100 de caractere și texul propriu-zis de tip mediumtext. În același timp apar PostingDate de tip timespam și status de tip int 100. Din cadrul panoului de administrare, dacă statusul este activ atunci testimonialul apare pe site.

CONCLUZII ȘI PERSPECTIVE

Aplicația realizată oferă posibilitatea utilizatorilor de a efectua o cerere online cu privire șa o serie de servicii, primind în același timp un răspuns instant cu privire la tariful pe care utilizatorul îl are de achitat. În același timp administratorul este informat cu privire la cererea făcută de acesta. Astfel se rezolvă problema eventualelor fraude realizate de către firmă sau a eventualelor neînțelegeri în materie de prețul impus raportat la munca și eforul depuse. În același timp aplicația oferă o suită solidă de informații despre companie, procesul realizării cererii precum și alte informații relevante. Prin aceste două mijloace utilizatorul ajunge să fie informat cu privire la servicii și ulterior să poată avea acces la acestea. În același timp aplicația permite utilizatorului să își exprime părerea cu privire la calitatea serviciilor oferite de către firmă.

Prin implementarea soluției s-au folosit tehnologii moderne ce sunt utilizate în marea majoritate a internetului, HTML 5/5.1, CSS 3, Bootstrap, PHP, MySQL, phpMyAdmin. Arhitectura platformei este una simplă, bazată pe mai multe tipuri de cereri emise de client în funcție de use case-ul corespunzător. Aceste cereri sunt stocate în aplicația server și ulterior verificate și confirmate de către administratorii paginii.

Aplicația presupune de asemenea o zonă dedicată administrării platformei, această zonă nu necesită utilizatori experimentați în domeniul calculatoarelor, ci doar utilizatori ce înțeleg compania și posibilitățile oferite de panoul de administrare. Acest panou de administrare vizează modificării ce au impact asupra prețurilor, a conținutului paginii precum vizualizarea datelor relevante pentru o bună desfășurare.

Pe viitor, aplicația poate fi modificată pentru orice firmă de curățenie, datorită faptului că este compusă din date cu caracter general. În același timp poate fi extinsă pentru spațiile comerciale și în zona obiectelor de mobilier sau obiecte sanitare, precum și pentru sfera de servicii ecologice. Un sistem de facturare online ar putea încuraja mai multe întreprinderi sau companii să apeleze la serviciile firmei crescând în același timp credibilitatea serviciilor. O altă îmbunătățire majoră ar putea să fie transformarea întregului portal într-unul de cere – oferta, prin includerea mai multor firme de curățenie și calcularea celei mai avantajoase oferte.

LISTĂ TABELE ȘI FIGURI

Figura 2.1.1 Logo-ul HTML 7

Figura 2.2.1 Logo-ul CSS 11

Figura 2.2.2 Procesarea fișierelor CSS 12

Figura 2.3.1 Logo-ul Bootstrap 15

Figura 2.3.2 Grid-ul Bootstrap 15

Figura 2.3.3 Aplicarea etichetelor de tip heading [6] 17

Figura 2.4.1 Logo-ul PHP 18

Figura 2.4.2 Statistici ale performanței PHP 20

Figura 2.4.3 Procesarea unui fișier PHP 21

Figura 2.4.4 Comunicarea Client-Server fără PHP 22

Figura 2.4.5 Comunicarea Client-Server cu PHP 23

Figura 2.4.6 Statistica preferințelor dezvoltatorilor [7] 24

Figura 3.1.1 Diagrama Use-Case a aplicației 26

Figura 3.2.2 Prima pagină 28

Figura 3.2.1 Structura meniului pentru utilizatorul conectat 28

Figura 3.2.3 Secțiunile „Who are we?” și „How it works” 29

Figura 3.2.4 Secțiunea statisticilor 29

Figura 3.2.5 Rubrica testimonialelor 30

Figura 3.2.6 Subsolul paginii 30

Figura 3.2.7 Opțiunea de schimbare a culorilor 31

Figura 3.2.8 Pagina "About us" 31

Figura 3.2.10 Formular de înregistrare 32

Figura 3.2.9 Formularul de autentificare 32

Figura 3.2.11 Setările profilului 33

Figura 3.2.12 Submeniu pentru utilizatori 33

Figura 3.2.15 Fereastra cu prețuri estimative 34

Figura 3.2.14 Prima parte a formularului de cerere 34

Figura 3.2.13 Partea a 2-a a formularului de cerere 34

Figura 3.2.16 Autentificarea în panoul de administrare 35

Figura 3.2.17 Prima pagină a panoului de administrare 35

Figura 3.2.19 Acțiunea din Contact Us 36

Figura 3.2.18 Secțiunea de management a testimonialelor 36

Figura 3.2.20 Secțiunea de management a cererilor 37

Figura 3.2.21 Secțiunea de management a prețului 38

Figura 3.2.22 Secțiunea de management a abonaților 38

Figura 3.3.1 Schema bloc a sistemului 39

Figura 4.1.1 Structura componentelor principale ce interacționează cu utilizatorul 40

Figura 4.1.2 Comunicarea componentelor din cadrul zonei de administrare 42

Figura 4.2.1 Structura fișierelor din proiect 45

Figura 4.2.2 Structura tabelelor din baza de date 48

REFERINȚE BIBLIOGRAFICE

[1] S. Buraga, „Aspecte arhitecturale vizând dezvoltarea de aplicații serverless | iTransfer”. http://itransfer.space/aspecte-arhitecturale-vizand-dezvoltarea-de-aplicatii-serverless/ (data accesării mai 21, 2020).

[2] Iosif SZEIDERT-ȘUBERT, Programare Web. 2012.

[3] „What’s in the head? Metadata in HTML”, MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML.

[4] J. Duckett, HTML & CSS: design and build websites. Indianapolis, Indiana: John Wiley & Sons Inc, 2014.

[5] „HTML 5 and CSS 3: The Techniques You’ll Soon Be Using”. https://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using–net-5708.

[6] Mark Otto Jacob Thornton, and Bootstrap, „Grid system”, 2017. https://getbootstrap.com/docs/4.0/layout/grid/.

[7] Mehdi Achour, „PHP: Manualul PHP – Manual”, 1997. http://php.net/manual/ro/index.php.

[8] David Sklar, Learning PHP. 2017.

[9] „Beginning PHP 5.3 by Matt Doyle.pdf”. Data accesării: iun. 20, 2018. [Online]. Disponibil la: http://cs.petrsu.ru/~musen/php/2013/Books/Beginning%20PHP%205.3%20by%20Matt%20Doyle.pdf.

[10] „What are the major difference between PHP 5 and PHP 7? – Quora”. https://www.quora.com/What-are-the-major-difference-between-PHP-5-and-PHP-7.

[11] „15 Top reasons to choose PHP over ASP.Net”, Web Solutions Blog, apr. 24, 2017. https://acodez.in/choose-php-over-asp-net/.

[12] „ASP.NET vs PHP: The Deciding Factor”, Rishabh Software – An Enterprise Application Development Company, mai 03, 2017. https://www.rishabhsoft.com/blog/php-vs-asp.net (data accesării iun. 20, 2018).

[13] „MySQL in a Nutshell, 2nd Edition [Book]”. https://www.safaribooksonline.com/library/view/mysql-in-a/9780596514334/.

[14] „Data”. https://datatables.net/manual/data/.