Adrian Runceanu, Mihaela Runceanu Tehnologii web, Editura Academica Brâncuși, 2009, Tg-Jiu 4 [615746]

CUPRINS Pagina Introducere……………………………………………………………………………………………………..2 Capitolul I. Noțiuni generale despre aplicații ……………..3 …………………………………………………………….Capitolul II. Aplicațiile web Introducere ……………..5 ……………………………………………………………………II.1. Avantajele și dezavantajele aplicațiilor web …………….5 ……………………………………II.2. Principiul unei aplicații web …………….6 ……………………………………………………………..Capitolul III. Tehnologii folosite pentru dezvoltarea unei aplicații web………………………7 III.1. HTML 5……………………………………………….……….…….……….9 III.2. CSS 3…………………………………………………………………..……10 III.3. Bootstrap.……………………………………………………………………………13 III.4. JavaScript……………………………………………………………………………15 III.4. Php……………………………………………………………………………………18 Capitolul IV . Aplicația Budget………………………………………..……………………..21 IV .1. Planificarea aplicației..…………………………….……….…….………………..21 IV .2. Dezvoltarea aplicației..…………………………….……….…….………………..25 Capitolul V . Concluzii și recomandări………………………………..……………………..30 Bibliografie ……………31 …………………………………………………………………………………………………………………..Anexe…….…………………………………………………………………………………..32
$1

INTRODUCERE Online-ul a devenit o mare parte din viața de zi cu zi, fie că ne informăm cu privire la o curiozitate care o avem, fie că navigăm pe rețelele sociale sau facem cumpărături, vedem mediul online ca o necesitate fără de care nu ne putem lipsi. Datorită faptului că tehnologia a avansat atât de mult și continuă să avanseze pe zi ce trece tot mai mult, ne permite să găsim soluții și variante pentru a ne face treba mai ușor. Nu mai stăm la coadă ca să ne platim utilitățiile, le plătim online, când vrem să cumpărăm ceva primă oară căutam pe internet pentru a ne informa in legătură cu prețul și așa mai departe. Făcând toate aceste lucruri inevitabil folosim aplicații web. Aplicațiile web sunt acele programe care rulează în browser, nu cele care le descărcăm și instalăm în calculatoarele personale și nici cele care le descărcăm și le folosim pe dispozitivele noastre mobile. Temă acestei lucrări de licență este despre dezvoltarea aplicațiile web și despre câteva din tehnologiile care stau la baza acestor aplicații. Obiectivul este de a dezvolta o aplicație web folosindu-ne de nenumăratele resurse pe care le avem online, limbajele de programare open-source și comunitatea de development de pretutindeni. În primul capitol se vor prezenta câteva noțiuni generale despre aplicații in sine urmând ca în capitolul trei să vorbim despre câteva din cele mai importante limbaje pentru a dezvolta atât aplicații web cât și aplicații mobile. În cele din urmă se va prezenta o aplicație web dezvoltată cu ajutorul tehnologiilor prezentate în capitolul precedent. 

$2

Capitolul I NOȚIUNI GENERALE DESPRE APLICAȚII Aplicațiile sunt foarte populare în zilele noastre datorită faptului că tehnologia a evoluat atât de mult încat mai mult din jumatatea timpului nostru disponibil într-o zi îl petre-cem în fată unui calculator sau cu telefonul în mână. Când zicem aplicații ne referim și la jocuri nu doar la programe care le folosim în scopuri de diverstiment sau necesitate. Aplicațiile sunt de mai multe feluri: Avem aplicații mobile, care sunt gândite și dezvoltate doar pentru a fi folosite de pe un dispozitiv mobil, telefon sau tabletă. Ele la rândul lor sunt concepute fie pentru toate sis-temele de operare mobile fie doar pentru anumite sisteme. Aplicațiile web sunt programe executate în browserul utilizatorului, fără a fi nevoie de download în calculatorul personal. Acest tip de aplicații merg pe toate modelele de sisteme de operare deoarece este nevoie doar de conexiune la internet pentru a le accesa. Și mai sunt și aplicațiile care sunt dezvoltate special pentru a fi descărcate și instalate pe mobil sau pe desktop, ele nu pot fi rulate din browser. Scopul aplicațiilor este de a fi cât mai folosite de către utilizatori deacea ele cuprind în mare măsură toate domeniile de activitate: •Ecomonic •Educativ •Sănatate •Divertisment •Social O altă diverență între aplicații o contituie și faptul că ele sunt concepute pentru anu-mite sisteme de operare, atât mobile cât și Desktop: •Mac OS •IOS •Windows •Android Aceste sunt cele mai utilizate siteme de operare pentru aplicații. $3

Când vorbim de aplicații mobile ne gândim la tot ce avem în AppStore sau Magazin-Play pe care le utilizăm zilnic (probabil mai mult decât ar fi nevoie), aplicații de social media, jocuri și multe altele. Când vorbim despre aplicații web ne referim în special la: •Formulare de înscriere •Magazine virtuale •Forum-uri •Licitații online •Portaluri •Torenturi În prezent, datorită dezvoltării soluțiilor open-source, realizarea aplicațiile web a devenit tot mai accesibilă față de perioadele când doar companiile mari iși puteau permite dezvoltarea aplicațiilor datorită costurilor ridicate. În concluzie există o serie de alte medii pentru proiectarea aplicațiilor web, fiecare cu avantajele și dezavantajele sale, dar cu un singur scop crearea unor aplicații web: •Interactive •Securizate •Cu timp de răspuns cât mai redus •Care să oferă o interfață cât mai plăcută

Adrian Runceanu, Mihaela Runceanu – Tehnologii web, Editura Academica Brâncuși, 2009, Tg-Jiu
$4

Capitolul II APLICAȚIILE WEB – INTRODUCERE Aplicațiile web sunt programe web-based, executate in web browsere si dezvoltate cu ajutorul technologiilor precum: HTML, CSS, JavaScript, PHP , Python, ASP, NodeJS si asa mai departe. La aceste tehnologi folosite pentru dezvoltarea aplicațiilor web mai adaugăm și framework-urile si librăriile care fac viața dezvoltatorilor de aplicații mult mai ușoara. Printre acestea enumerăm: Bootstrap, jQuery, React, Angular, Ionic, Yii2. II.1. Avantajele și dezavantajele aplicațiilor web Popularitatea aplicațiilor web se află intr-o continuă creștere datorită avantajelor multiple pe care le are comparativ cu aplicațiile (programele) instalate si rulate local, dat fiind faptul că pot fi rulate pe aprope orice sistem de operare doar cu ajutorul unui browser web. Printre avantajele oferite enumerăm: •Pot fi accesate de pe tablete si telefoane deoarece rulează in browser de pe un server web. •Sunt ușor de actualizat (update) doarece modificările se fac pe un server urmând a fi distrubuite către toți utilizatorii aplicației. •Pot rula și pe PC-uri mai slabe doar cu ajutorul unui browser web și o conexiune la internet. •Datorită faptului că rulează pe server, intrega bază de date este disponibilă si poate fi accesată din orice parte a lumii fără a fi nevoie sa o accesezi de pe propriul calculator. •Nu necesită instalare și întreținere de către utilizator. •Nu ocupă spațiu pe calculatorul personal. •Pot rula pe multiple sisteme de operare •Costurile unei aplicații web sunt mai mici decât cel al aplicațiilor desktop deoarece nu necesită dezvoltare unui soft desktop. $5

Dezavantaje nu ar fi multe, dar totuși există: •Datorită faptului că rulează prin browser de pe un server web se stabilește foarte greu sau deloc o conexiune cu hradware-ul local al clientului. •Din cauza unei conexiuni slabe la internet se pot accesa greu, alteori deloc. II.2. Principiul unei aplicații web Principiul de funcționare este același ca în cazul unui website: Utilizatorul prin browser trimite o cerere http / https către serverul aplicației web iar acesta trimite clientului un răspuns cod de HTML, CSS, JavaScript etc. Răspunsul cod al serverului insemnșând aplicația in sine. Ca developer de aplicații trebuie să ți cont de câteva principii atunci când dezvolți o aplicație. •Viteza de execuție a aplicației. Un cod optimizat și tehnici de cache-ing asigură o rulare rapidă a aplicației. •Interfață cât mai prietenoasă. O interfață simplă si intuitivă, cu fonturi alese cu grijă, spații suficiente, asigură o experientă plăcută utilizatorului. •Media. Elementele media (video si audio ) ajută si ele la o experiența creată utilizatorului. •Instrumente utile. Afișarea cât mai vizibilă a instrumentelor de operare folositoare utilizatorului (în funcție de aplicație). •Personalizare. Oferirea posibilității utilizatorului de a-și personaliza contul, duce la un feedback pozitiv aplicației din partea acestuia.
Ce este o aplicție web – https://bursasite.ro/ce-este-o-aplicatie-web/ https://www.webdesign-galati.ro/blog/ce-este-aplicatia-web
$6

Capitolul III TEHNOLOGI FOLOSITE PENTRU DEZVOLTAREA UNEI APLICAȚII WEB Aplicațiile web pot fi scrise intr-o varietate foarte mare de limbaje de programare, desigur preferințele diferă în funcție de developer și de experiența pe care o are cu limba-jele respective. Dintre cele mai utilizate limbaje si framework-uri de programare în dez-voltarea aplicațiilor web enumerăm: •JavaScript. Am început cu el deoarece este cel mai folosit limbaj de progra-mare al web-ului. Îl găsim atât in aplicații cât și în website-uri. În orice site in-teractiv sau aplicație web avem de aface cu JavaScript. •React. Avănd la bază JavaScript, React este un framework foarte utilizat in dezvoltarea aplicațiilor web. •Angular. Un alt framework foarte utilizat de catre developeri web având la baza JavaScript și folosind TypeScript (un superset de JavaScript creat de către Microsoft). •NodeJS. Un limbaj de programare ce îți permite să rulezi JavaScript pe server. •ExpressJS. Un alt framework de JavaScript. •Ionic. Un framework foarte util în construirea aplicațiilor. •PHP . Este un limbaj de programare back-end foarte folosit ce permite modifi-carea paginilor web înainte ca acestea să fie trimise de către server către browser-ul utilizatorului. •Python. Desigur că toate aceste limbaje de programare ar fi inutile fără limbajul de marcare HTML care crează strutura paginii / aplicației și CSS cu ajutorul căruia stilizăm pagina sau aplicația respectivă.
$7

Trebuie amintit și faptul că toate informațiile și datele unei aplicații web sau a unui website sunt stocate intr-o bază de date. Câteva dintre cele mai des folosite in ziua de azi sunt: •MySQL •MongoDB Pentru dezvoltarea aplicației Budget s-au folosit urmatoarele tehnologii: •HTML5 •CSS3 •JavaScript
Titus Slavici, Ioan Groza, Gabriela Victoria Mnerie, Dinu Gubencu – Aplicații client/server, pag. 227 Dan Pescariu, Gabriela Victoria Mnerie – Baze de date
$8

III.1. HTML 5 HTML sau Hypertext Markup Language este limbajul de marcare al tuturor paginilor web existente. Împreună cu CSS si JavaScript formează ”echipa” perfectă de tehnologii pentru crearea paginilor și a aplicațiilor web.
 Serverele web trimit documente HTML către browsere care la rândul lor le percep ca și pagini web. Elementele de HTML sunt niște blocuri cu ajutorul cărora construim liste, formulare, inputs si alte obiecte in paginile web. HTML creză un sens în strucurarea documentelor text din pagină cum ar fi titlurile, paragrafele, link-urile etc. Aceste elemente de HTML se numesc tags și cu ajutorul lor introducem conținut in pagină: <img /> pentru a introduce imagini, <ul> … </ul> pentru a crea o listă neordonată, <h1>… </h1> pentru a adăuga un titlu și așa mai departe. Structura de bază HTML a oricărei pagini sau aplicații web este următoarea: <html> <head> <title>. . .</title> </head>
<body> … </body> </html>
Titus Slavici, Ioan Groza, Gabriela Victoria Mnerie, Dinu Gubencu – Crearea propriilor pagini web, pag 216
$9

III.2. CSS3 După crearea structurii HTML urmează stilizarea acesteia pentru a crea un aspect cât mai frumos al aplicației și a asigura o navigare ușoară utilizatorului. CSS sau Cascading Style Sheet folosim pentru stilizarea aplicațiilor si paginilor web. CSS3 a adus in domeniul web o grămadă de îmbunătățiri pentru a putea stiliza cât mai ușor paginile și aplicațiile: •Noi selectori •Noi proprietăți •Coloane •Animații •Media Queries Desigur că și pentru CSS avem pre-procesoare și framework-uri (SASS, Bootstrap) care ne vin în ajutor pentru a putea stiliza cât mai ușor orice aplicație web. Luăm un exemplu o structură banală cu care începem dezvoltarea unei aplicații web. Pentru acest exemplu s-a folosit text-editorul VS Code dezvoltat de către Microsoft. Am creat 2 fișiere de bază: index.html si style.css Fișierul index.html conține structura de marcare a aplicației. Între tag-urile <head></head> am apelat fișierul style.css ( <link rel=“stylesheet” href=“style.css”> ) pentru a putea stiliza structura creată. Tot în <head></head> am apelat și Bootstrap CDN (Content Delivery Net-work) pentru a putea folosi Bootstrap direct de pe server-ul unde se află fără a fi nevoit să îl descărcăm pe local. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/boot-strap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIh-Oegiu1FwO5qRGvFXOdJZ4" crossorigin=“anonymous"> Între tag-urile <body></body> construim ”scheletul” pagini. V om adăuga un titlu și un for – mular de login. Înainte de a închide </body> tag-ul vom include un tag care face referire la fișierul extern de javascript: main.js. (fig 1.1) $10

Fig.1.1 – marcarea formularului de login în html Fișierul style.css conține stilizarea structurii fișierului index.html. Titlul principal (h1) și formularul de login au fost distanțate față de partea de sus a browser-ului cu câte 50px fiecare, aliniere centrală pentru titluri, containerul care conține formularul a fost centrat și a primit specificații referitoare la direcția lui (flex-direction: column) iar formu-larului i sa specificat lațimea, culoarea, conturul și rotunjirea conturului (border-radius: 10px). Rezultatul final al celor două fișiere ( index.html, style.css ) este prezentat in figura 1.2
Fig.1.2 – formularul de login in browser $11

Acest exemplu a prezentat etapele de început ale dezvoltării unui website sau a unei aplicații web, făcând referire strict la marcare si stilizare. Pentru a adaugă interacțiune în partea de UI ( User Interface ) a unui website / apli-cații folosim limbajul cel mai utilizat în domeniul web, respectiv JavaScript. Chiar și atunci când utilizăm cele mai folosite framework-uri pentru partea de front-end: Re-act, Angular, VueJS, ExpressJS știm că ele au la bază JavaScript.
$12

III.3. Bootstrap Cel mai folosit framework pentru CSS și HTML, construcția paginilor și aplicațiilor web este mult mai rapidă datorită acestui framework și tot odată abordarea lui esențială este mobile first, adică aplicația sau site-ul să arate bine pe orice dispozitiv mobil, tabletă cât și desktop. Bootstrap conține module CSS și HTML pentru: •Tipografie (titluri, paragrafuri etc.) •Formulare •Caruseluri •Grupuri de inputuri •Butoane •Grupuri de liste •Navigații •Paginații Multe alte componente UI (User Interface) cât și extensii de JavaScript. Folosirea framework-ului Bootstrap in dezvoltarea website-urilor și a aplicațiilor este es – ențială deoarece nu doar te va ajută să construiești mai repede dar vei și avea o aplicație care arată bine pe orice dispozitiv. Sunt mai multe modalități de a folosi Bootstrap. Îl poți descărca local pe calculatorul personal, îl poți folosi prin CDN (Content Delivery Network), adică el este pe un server și nu este nevoie să îl ai fizic în calculator, el va rula de pe serverul pe care se află. Mai este o modalitate de a folosi Bootstrap instalândul prin npm (Node Package Manager), Compozer sau Meteor. Pentru a folosi Boostrap de pe CDN este nevoie doar de următoarea linie de cod în <head></ head>: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/boot-strap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIh-Oegiu1FwO5qRGvFXOdJZ4" crossorigin=“anonymous"> $13

Să îl instalezi prin npm, Compozer sau Meteor este nevoie de terminal sau command line: $ npm install bootstrap Principiul de utilizare Bootstrap este foarte simplu, framework-ul vine cu module și clase predefinite iar developeri când dezvoltă o aplicație sau un website apelează clasele re-spective. În exemplul de mai jos vom adăuga cu Boostrap două imagini cu descriere în div-uri diferite aliniate perfect una lângă cealaltă fară float sau alte proprietăți CSS, folosindu-ne doar de clasele puse la dispozitie în Boostrap.( fig.2.1 )
Fig.2.1 – structura de marcare a două imagini în două coloane Rezultatul acestor lini de cod afișează două imagini în două coloane diferite aliniate perfect una langă cealaltă fără a scrie vreo linie de css, folosind doar clasele predefinite puse la dispoziție în Bootstrap. Bootstrap – https://getbootstrap.com/docs/4.1/components/card/ $14

III.4. JavaScript JavaScript este cunoscut in lumea web developmentului ca fiind limbajul de progra-mare al web-ului. El ruleajă în browser (client side) și este responsabil de comportamentul dinamic al paginilor și aplicațiilor web. Continuând exemplul de mai sus putem cu doar cateva lini de JavaScript sa validăm formula-rul de login urmând ca acesta să ne redirecționeze catre o altă pagină: let attempt = 3; function validate() { let email = document.querySelector("#exampleInputEmail1").value; let password = document.querySelector("#exampleInputPassword1").value; if (email === "hello@gmail.com" && password === "hello123") { alert("Autentificare cu succes"); window.location = "http://127.0.0.1:5500/hello.html"; return false; } else { attempt–; alert(`Mai ai ${attempt} încercari`); i f ( a t t e m p t = = = 0 ) { document.querySelector(“.btn”).disabled=true; return false; } } } Cu Javascript putem face multe în structura unei pagini web, cateva exemple ar fi: •Customizarea apariției pagini web •Manipulare DOM (Document Object Model) •Colectarea și folosirea valorilor input-urilor $15

•Crearea animațiilor simple •Creare de evenimente dinamice Adesea când dezvoltăm o aplicație ne aflăm in situația în care avem nevoie să declanșăm un eveniment dinamic fără ca utilizatorul (clientul) să facă ceva. JavaScript ne pune la dispozitie două funcții pentru astfel de situații, să programăm de-clanșarea unui eveniment la un anumit timp: •setTimeout ( ) ne permite să programăm o funcție pentru a declanșa la un anumit timp în funcție de timpul actual: setTimeout(function, time); •setInterval ( ) ne vine în ajutor atunci când avem nevoie ca o anumită funcție să se declanșeze în mod repetat la un anumit interval de timp: setInterval(function, time); În lumea web se folosesc foarte multe framework-uri atât pe partea de front-end (client side) cât și pe partea de back-end (server side), deoarece ele ne ajută în procesul de dezvoltare. Probabil cea mai cunoscută și utilizată librarie de JavaScript este jQuery. jQuery a reușit să simplifice foarte mult JavaScript și când zicem simplificat ne refer-im la numărul liniilor de code necesare pentru a obține o acțiune. Iată câteva dintre avantajele cu care a venit jQuery: •O mulțime de funcții predefinite pentru diferite acțiuni •Selectarea mai ușoară a claselor sau id-urilor •Sintaxele de selecție sunt aceleași ca și în CSS •Este gratis, open source •Simplifică AJAX •Se găsesc multe plugin-uri pentru jQuery Deși este foarte îndrăgit și foarte folosit în comunitatea web development încet încet își cam pierde din popularitate datorită faptului că JavaScript sa actulizat și a devenit mai puternic și mai ușor de scris. În versiunea curentă ES6 JavaScript a venit cu o mulțime de schimbări și îmbunătățiri care caștigă respectul developerilor web. Emanuel Baran – De ce să înveți Javascript? – https://medium.com/@emanuelbaran $16

Câteva din schimbările și îmbunătățirile ES6 sunt: •Constants (const) – sunt variabile care nu pot fi rescrise (re-alocate). •Arrow functions – sintaxe mai simple cănd scri o funcție. •Extended Parameter Handling – valori atribuite direct parametrilor unei funcți. •Template Literals – un mod elegant și mai simplu de a concatena pe una sau mai multe linii de cod. •Enhanced Object Properties – scrierea mai simplă a proprietăților unui obiect. •Modules – suport pentru import și export valori dintr-un modul în altul. •Classes – Marcarea unei valori ca valoare exportată implicită și a unei mase mixte de valori. •Promises – Reprezentarea a unei valori care poate fi făcută în mod asincron și care va fi disponibilă în viitor. Deși ES6 este de ceva timp printre noi a durat o perioadă bună până când noile modificări au devenit suportate de către browsere. Totuși mai sunt si browsere care nu suportă ES6 fără aju-tor, aici ne referim la celebrul Internet Explorer sau Edge cum ii se spune mai nou. Multă vreme a fost o piedică pentru developeri să implementeze cod care să îl poata interpreta și IE. Pentru ca îmbunătățirile și schimbările noi din ES6 să poată rula și pe IE, se folosește Babel (un compilator de JavaScript). Versiune ES6 a limbajului JavaScript este cu adevărat utilă developerilor web și mer-ită învățată și folosită deoarece te ajută să înțelegi framework-urile populare de JavaScript cum ar fi React sau Angular cu ajutorul cărora poți dezvolta aplicații foarte complexe. (fig.3.1)
Fig.3.1 – Cele mai populare framework-uri de Javascript ECMAScript 6: New Features: Overview and Comparison – http://es6-features.org/ $17

III.5. PHP Php: Hypertext Preprocessor este un limbaj de programare (server-side) cu ajutorul căreia putem conecta partea de client-side cu baza de date. Cateva avantaje ale limbajului Php sunt: •Este open-source. •Nu este foarte greu de învățat dacă cunoști vreun alt limbaj de programare deoarece principile sunt cam aceleași, doar anumite sintaxe diferă. •Este ideal pentru a dezvolta un CMS (Content Management System). •Este ideal pentru a dezvoltarea de magazine online. Una dintre cele mai mari platforme de social media din lume (Facebook) are la bază limbajul Php. Cel mai cunoscut CMS din lume (WordPress) este construit tot în Php. Toate acestea ne încurajează în a folosi Php în site-uri și aplicații web deoarece fiind folosit de unele dintre cele mai mari nume in domeniul web demonstrează puterea acestui limbaj de programare. Ce poate limbajul PHP să facă: •Să preia informația unui formular web și să stocheze informați într-o bază de date, să trmită email-uri, să îți scrie de ziua ta etc. •Să autentifice și să urmarească utilizatori •Afișeze pagini diferite pentru utilizatorii care utilizează browsere sau dispozitive diferite •Servească pagini XML Acestea sunt doar câteva din task-urile ce le poate întrebuința PHP și multe altele care nu in-trăm in detali despre ele. HTTP POST. Această metodă foarte des folosită trece transparent prin toate informațiile pe care le adună în pagină. $18

Creem un fișier index.php, in el avem următoarea structură: <html> <head></head> <body> <form action="great.php" method=“post"> Name: <input type="text" name=“name"><br> E-mail: <input type="text" name=“email"><br> <input type=“submit"> </form> </body> </html> După ce utilizatorul vă complecta aceste input-uri și va apăsa buttonul submit datele sunt trimise și procesate în fișierul great.php prin metoda HTTP POST. Fișierul great.php va arăta astfel: <html> <body> <h2>Hello <?php echo $_POST[“name”]; ?> </h2> <h3>Your email is: <?php echo $_POST[“email”]; ?> </h3> </body> </html> PHP – Form submission after javascript validation – https://stackoverflow.com/questions/ 32410590/form-submission-after-javascript-validation PHP 5 Form Handling – https://www.w3schools.com/php/php_forms.asp $19

PHP este un limbaj flexibil, dinamic și suportă o mulțime de tehnici de programare cum ar fi: •Programare orientară pe obiecte •Programare funcțională •Meta Programare PHP are un complet set de funcționalități orientate pe obiect incluzând suport pentru clase, clase abstracte, interfețe, moștenire, constructori, clonare, excepții, și multe altele. PHP are nevoie de o bază de date pentru a putea stoca informații strânse și pentru a le putea refolosi la momentul potrivit. O astfel de bază de date care merge mână-n mână cu PHP este MySQL. (fig. 4.1)
Fig.4.1 – Logo Php MySQL
PHP The Right Way – https://bgui.github.io/php-the-right-way/
$20

Capitolul IV APLICAȚIA BUDGET Introducere Aplicația a pornit de la o idee simplă pentru un mai bun control asupra bugetului unei famili sau a unei singure persoane astfel încât având in față banii ce intră și ce se cheltuie să se ia în calcul o strategie pentru a face economii. Aplicația se numește simplu… Budget și este încă în faza de testare urmând că pe viitor să se adauge funcționalițăți noi și complexitatea ei să crească. IV .1. Planificarea aplicației Pentru ca totul să iasă ca la carte s-a făcut o planificare despre cum ar trebui să arate și ce ar trebui să facă aplicația 1.Prima etapă •Adăugarea unui event handler •Obține valoarea inputurilor •Adăugarea elementului obținut în structura de date •Adăugarea elementului obținut în UI (User Interface) •Calcularea bugetului •Updatarea UI
$21

1.1 Prima etapă a arhitecturii (fig. 5.1)
Fig.5.1 – Prima etapă a arhitecturii aplicației Budget 2.A doua etapă •Adăugarea unui event handler •Ștergerea elementului din structura de date •Ștergerea elementului din UI •Recalculare buget •Updatare UI
$22

2.1 A doua etapă a arhitecturii (fig. 5.2)
Fig.5.2 – A 2-a etapă a arhitecturii aplicației Budget 3.A treia etapă •Calcularea în procente •Updatarea procentelor în UI •Afișarea luni și anului curent •Formatarea valori procentuale •UX (User Experience) pentru inputuri Arhitectura de la a treia etapă cuprinde toate cele trei etape într-o singură schemă intensi-ficând complexitatea întregi arhitecturi.
$23

3.1 A treia etapă a arhitecturii (fig.5.3)
Fig.5.3 – A 3-a etapă a arhitecturii aplicației Budget
$24

IV .2. Dezvoltarea aplicației Structura fișierelor pentru această aplicație a fost urmatoarea: -index.html -style.css -app.js Fișierul index.html care curpinde structura vizibilă in browser a aplicației, în <head></head> se apelează fișierul style.css, Bootstrap CDN ș i Google fonts, în <body></body> se află așezarea componentelor folosite în aplicație (div, input, headings, buttons) iar înainte de închiderea tag-ului </body> se apelează un script al fișierului app.js. Fișierul style.css cuprinde comenzile de stilizare ale întregi aplicații (fonturi, culori, dimensi-uni titluri și paragrafe, dimensiuni input-uri etc.) Fișierul app.js este creierul aplicației. Folosind module fișierul s-a împarțit în trei parți, fiecare parte va avea funcții și variabile private (care sunt accesibile doar în interiorul modul-ului) și funcții și variabile publice care se pot accesa din afara modulului din care se află. Primul Modul – Budget Controller gestionează datele bugetului (adaugare venituri, adaugare cheltuieli, calcularea bugetului total). (fig 5.4) (fig.5.5) (fig.5.6)
$25

Fig.5.4 – gestionarea datelor
Fig.5.5 – crearea unui ID nou în baza ultimului folosit
$26

Fig. 5.6 – crează un ID nou pentru tipurile exp (expence) și inc (income) Al doilea Modul – UI Controller conține datele din UI (valorile din inputuri).(fig.5.7)
Fig. 5.7 – colectarea valorilor din input-uri $27

Al treilea Modul – Global App Controller este locul unde dictăm celorlalte două module ce și cum să facă. Scriem funcții în cele două module să colecteze date sau să calculeze bugetul iar apoi în Global App Controller apelăm aceste funcții.(fig.5.8)
Fig. 5.8 – modulul global care controlează celelalte două module Toate cele trei module aflate în fișierul app.js alcătuiesc “creierul” aplicației și demonstreză flexibilitatea și puterea limbajului JavaScript, iar împreună cu partea de marcare html și stilizarea acesteia (style.css) formează o aplicație plăcută, ușor de folosit și foarte utilă celor care vor să își gestioneze mai ușor finanțele. $28

În partea de client-side (partea care utilizatorul o vede și cu care interacționează) apli-cația Budget se prezintă cu un UI prietenos și interactiv. (fig.6.1) (fig.6.2)
Fig. 6.1 – interfața aplicației Budget
Fig. 6.2 – interfața aplicației Budget $29

Capitolul V CONCLUZII ȘI RECOMANDĂRI În această aplicație s-a pus accentul pe JavaScript ES6 deoarece este un limbaj atât de util și esențial în dezvoltarea paginilor și aplicațiilor web. Legată la o bază de date și cu aju – torul limbajului Php, vom îmbunătății aplicația cu funcționalități noi cum ar fi un raport lunar trimis automat pe email. În procesul de dezvoltare al aplicațiilor web putem crea o astfel de aplicație cu tehnologiile de bază din domeniul web: •HTML5 •CSS3 •JavaScript Desigur când vrem să facem pasul spre ceva mai mare, cum ar fi o aplicație mobilă complexă cu fel și fel de funcționalități putem apela la ajutorul unor framework-uri foarte folosite în domeniul dezvoltări aplicațiilor web (React Native, Ionic).
$30

BIBLIOGRAFIE 1.Titus Slavici, Ioan Groza, Gabriela Victoria Mnerie, Dinu Gubencu – Introducere în informatică: Editura Fundația pentru Cultură și Învățământ „Ioan Slavici”, 2008 2.Adrian Runceanu, Mihaela Runceanu – Tehnologii web: Editura Academica Brâncuși, 2009, Tg-Jiu 3.Dan Pescariu, Gabriela Victoria Mnerie – Baze de date 4.Tehnologii web – http://www.runceanu.ro/adrian/wp-content/cursuri/tw2014/C1-Web.pdf 5.Ce este o aplicație web – https://bursasite.ro/ce-este-o-aplicatie-web/ 6.De ce să înveți JavaScript – https://medium.com/tutoreel-articole-%C8%99i-g%C3%A2n-duri/de-ce-s%C4%83-%C3%AEnve%C8%9Bi-javascript-3f9ba82ac0af 7.JavaScript login form validation – https://www.formget.com/javascript-login-form/ 8.PHP – Form submission after javascript validation – https://stackoverflow.com/questions/ 32410590/form-submission-after-javascript-validation 9.Ce este o aplicație web – https://www.webdesign-galati.ro/blog/ce-este-aplicatia-web 10.Bootstrap – https://getbootstrap.com/ 11.W3School – https://www.w3schools.com/
$31

ANEXE Aplicația Budget – index.html (cod sursă) <div class="top"> <div class="budget"> <div class="budget__title"> Available Budget in <span class="budget__title–month">%Month%</span>: </div> <div class="budget__value">+ 2,345.64</div> <div class="budget__income clearfix"> <div class="budget__income–text">Income</div> <div class="right"> <div class="budget__income–value">+ 4,300.00</div> <div class="budget__income–percentage">&nbsp;</div> </div> </div> <div class="budget__expenses clearfix"> <div class="budget__expenses–text">Expenses</div> <div class="right clearfix"> <div class="budget__expenses–value">- 1,954.36</div> <div class="budget__expenses–percentage">45%</div> </div> </div> </div> </div> <div class="bottom"> <div class="add"> <div class="add__container"> <select class="add__type"> <option value="inc" selected>+</option> <option value="exp">-</option> </select> <input type="text" class="add__description" placeholder="Add description"> <input type="number" class="add__value" placeholder="Value"> <button class="add__btn"> <i class="ion-ios-checkmark-outline"></i> </button> </div> </div>
$32

Aplicația Budget – style.css (cod sursă) * { margin: 0; padding: 0; box-sizing: border-box; } .clearfix::after { content: ""; display: table; clear: both; } body { color: #555; font-family: Open Sans; font-size: 16px; position: relative; height: 100vh; font-weight: 400; } .right { float: right; } .red { color: #FF5049 !important; } .red-focus:focus { border: 1px solid #FF5049 !important; } .top { height: 40vh; background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url(back.png); background-size: cover; background-position: center; position: relative; }
$33

Aplicația Budget – app.js (cod sursă) var budgetController = (function() { var Expense = function(id, description, value) { this.id = id; this.description = description; this.value = value; this.percentage = -1; }; Expense.prototype.calcPercentage = function(totalIncome) { if (totalIncome > 0) { this.percentage = Math.round((this.value / totalIncome) * 100); } else { this.percentage = -1; } }; Expense.prototype.getPercentage = function() { return this.percentage; }; var Income = function(id, description, value) { this.id = id; this.description = description; this.value = value; }; var calculateTotal = function(type) { var sum = 0; data.allItems[type].forEach(function(cur) { sum += cur.value; }); data.totals[type] = sum; $34

}; var data = { allItems: { exp: [], inc: [] }, totals: { exp: 0, inc: 0 }, budget: 0, percentage: -1 }; return { addItem: function(type, des, val) { var newItem, ID; //[1 2 3 4 5], next ID = 6 //[1 2 4 6 8], next ID = 9 // ID = last ID + 1 // Create new ID if (data.allItems[type].length > 0) { ID = data.allItems[type][data.allItems[type].length – 1].id + 1; } else { ID = 0; } // Create new item based on 'inc' or 'exp' type if (type === 'exp') { newItem = new Expense(ID, des, val); } else if (type === 'inc') { newItem = new Income(ID, des, val); } // Push it into our data structure $35

data.allItems[type].push(newItem); // Return the new element return newItem; }, deleteItem: function(type, id) { var ids, index; // id = 6 //data.allItems[type][id]; // ids = [1 2 4 8] //index = 3 ids = data.allItems[type].map(function(current) { return current.id; }); index = ids.indexOf(id); if (index !== -1) { data.allItems[type].splice(index, 1); } }, calculateBudget: function() { // calculate total income and expenses calculateTotal('exp'); calculateTotal('inc'); // Calculate the budget: income – expenses data.budget = data.totals.inc – data.totals.exp; // calculate the percentage of income that we spent if (data.totals.inc > 0) { data.percentage = Math.round((data.totals.exp / data.totals.inc) * 100); $36

} else { data.percentage = -1; } // Expense = 100 and income 300, spent 33.333% = 100/300 = 0.3333 * 100 }, calculatePercentages: function() { data.allItems.exp.forEach(function(cur) { cur.calcPercentage(data.totals.inc); }); }, getPercentages: function() { var allPerc = data.allItems.exp.map(function(cur) { return cur.getPercentage(); }); return allPerc; }, getBudget: function() { return { budget: data.budget, totalInc: data.totals.inc, totalExp: data.totals.exp, percentage: data.percentage }; }, testing: function() { console.log(data); } }; })();$37