Automatizarea sistemului de evidență „Career levels” utilizind tehnologii Web Informatica Aplicată Teză de licență Șef departament: ______________… [302196]
Ministerul Educației al Republicii Moldova
Universitatea de Stat din Moldova
Facultatea Matematică și Informatică
Departamentul de Informatică
Rotari Alexandru
Automatizarea sistemului de evidență "Career levels"
utilizind tehnologii Web
Informatica Aplicată
Teză de licență
Șef departament: ______________ Arnăut Vsevolod
Conducător științific: _____________ Pașa Tatiana
Autorul: ______________ Rotari Alexandru
Chișinău 2017
[anonimizat] – [anonimizat] – [anonimizat] – [anonimizat] – [anonimizat] – [anonimizat] – [anonimizat] – Portable Document Format
Adnotare
la teza de licență “Automatizarea sistemului de evidență ‘Career levels’ utilizând tehnologii Web” a student: [anonimizat], grupa IA-31, specialitatea Informatică Aplicată.
Teza de licență cuprinde 73 de pagini în format A4, introducere, [anonimizat], bibliografie cu 18 titluri, 4 anexe, 58 de figuri și 2 tabele.
Prima parte din primul capitol reprezintă o descriere a [anonimizat] a obține rezultate pozitive la locul de muncă. În a doua parte sunt descrise tehnologiile utilizate pentru elaborarea proiectului. [anonimizat].
În al doilea capitol este descrisă pe larg aplicația realizată și cum au fost implementate tehnologiile descrise în primul capitol. Sunt prezentate succint și rezultatele care sunt afișate de browser utilizatorului.
Pentru realizarea acestei aplicații au fost alese următoarele tehnologii: Java, [anonimizat], [anonimizat], Maven, Bootstrap, CSS, HTML, JavaScript. S-a ales limbajul Java ca fiind de bază deoarece compania pentru care a fost creată aplicația folosește în procesul de realizare a proiectelor sale anume acest limbaj. [anonimizat], acesta este unul dintre cele mai folosite limbaje pentru realizarea de aplicații atât desktop cât și web. [anonimizat].
Annotation
for graduation thesis “Automating the ‘Career levels’ accounting system using Web technologies” of the student: [anonimizat], group IA-31, Applied Informatics.
The graduation thesis consists of 73 pages in A4 format, introduction, two chapters, a conclusion, a bibliography with 18 titles, 4 annexes, 58 figures and 2 tables.
The first part of the first chapter is a description of the career advancement process specifying some ways to get positive results at work. In the second part are described the technologies used for the elaboration of the project. Both the theoretical part and implementation examples are given together with the display of the result that appears on the screen.
The second chapter describes the application and how the technologies described in the first chapter have been implemented. The results that are displayed by the user's browser are briefly presented.
The following technologies were chosen for this application: Java, Spring Boot, MySQL, Java Persistence API, Thymeleaf, Maven, Bootstrap, CSS, HTML, JavaScript.
Java language has been chosen as the basic language because the company for which the application was created uses this language in the process of implementing its projects. Also, this is currently one of the most used languages for desktop and web applications. In addition to Java, other technologies have been used to create web pages and achieve different functionalities.
Introducere
Avansarea în carieră este un factor foarte important care preocupă pe fiecare angajat după o anumită perioadă în care își dezvoltă aptitudinile și calitățile unui bun specialist. Progresul și răsplata sunt lucrurile care motivează pe un om să continue să invețe, să se perfecționeze.
Scopul lucrarii este implementarea unui sistem informatic de evidență ce permite înregistrarea progresului angajaților unei firme pe baza căruia sunt promovați în carieră.
Obiectivele urmărite sunt:
Definirea procesului de avansare în carieră și importanța progresului la locul de muncă.
Demonstrarea necesității elaborării unui sistem informatic de evidență a progresului angajaților.
Studiul asupra tehnologiilor celor mai performante care sunt folosite la ora actuală pe larg și care oferă o gamă largă de posibilități pentru crearea celor mai complexe proiecte. Se urmărește atât studierea funcțiilor oferite de aceste limbaje cât și a metodelor de implementare astfel incât să se obțină rezultatul dorit.
Studierea următoarelor tehnologii și limbaje de programare: Java, Spring Boot, MySQL, Java Persistence API, Thymeleaf, Maven, Bootstrap, CSS, HTML, JavaScript.
Realizarea unei aplicații care poate fi utilizată cu scopul de a urmări creșterea în carieră a angajaților unei firme furnizând o interfață plăcută și funcționalitățile necesare pentru a înregistra, adăuga, modifica sau șterge sarcinile care reprezintă treptele către success. De asemenea aceleași operații să se poată efectua și asupra beneficiilor care sunt oferite fiecărui angajat contribuind astfel la îmbunătațirea condițiilor de muncă.
Valoarea aplicativă a lucrării constă în primul rând în faptul că reprezintă un îndrumar în carieră pentru autorul ei. Experiența acumulată și cunoștințele dobândite îl vor ajuta în viitor la efectuarea lucrului calitativ și eficient. La fel ar putea prezenta interes pentru doritorii de a face cunoștință cu tehnologiile descrise în lucrare și cu posibilitățile oferite de acestea.
În primul capitol sunt descrise noțiunile teoretice despre procesul de avansare în carieră și tehnologiile utilizate.
În capitolul al doilea este prezentată aplicația realizată și modul în care au fost implementate tehnologiile alese pentru realizarea ei.
Capitolu I Noțiuni teoretice
1.1 Procesul de avansare în carieră
Orice persoană care activează într-un anumit domeniu, la un moment dat își dorește să avanseze în carieră. Acest lucru își are și beneficiile sale de altfel. Un salariu mai bun poate fi un beneficiu, construirea unor relații noi poate fi un alt beneficiu care, în momente potrivite, poate contribui la rezolvarea unor întrebări care necesită sprijin și ajutor din partea celorlalți colegi de serviciu. Deși, de cele mai multe ori avansarea în carieră presupune și asumarea de noi responsabilități, acest lucru nu e o piedică pentru cei care doresc să progreseze și să scape de o viață monotonă din cadrul locului de muncă.
Pentru a reuși acest lucru este necesar ca să se ia în considerare unele sfaturi care vor fi prezentate în continuare:
Demonstrarea unei atitudini serioase
De cele mai multe ori, persoanele care nu dau dovadă de seriozitate la serviciu, nu se pot bucura prea mult de suportul celor de la conducere și nici din partea colegilor. Demonstrarea unui comportament și a unei atitudini serioase va contribui la creșterea importanței unei persoane în ochii șefilor. Atunci când va fi nevoie de cineva care să facă un lucru important pentru companie sau întreprindere neapărat va fi selectată persoana care respectă acest principiu.
Devenind indispensabil
Uneori se spune că”nimeni nu este de neînlocuit”, însă cu cât un angajat a devenit mai bun în lucrul său, cu atât mai greu este ca sa fie schimbat cu un altul. Uneori mulți oameni se trezesc că companiile sau firmele nu mai au nevoie de ei și se întreabă dacă nu cumva au făcut ceva greșit. Cel mai des cu acest lucru se confruntă acei pentru care serviciu a devenit o rutină și nu mai prezintă interes, motiv pentru care și calitatea serviciilor oferite de ei este în declin.
Pentru siguranța faptului că un angajat nu va suferi o concediere, este necesar ca acesta să iasă din zona sa de confort și să depună efort pentru a-și înbunătăți calitatea serviciilor în fiecare zi. Acest lucru nu doar că îi va asigura un termen lung la locul de muncă, ci îl va ajuta ca să capete încrederea superiorilor săi care îl vor trata cu respect și când va fi momentul potrivit, îl vor avansa și în carieră.
Evitarea leneviei
De cele mai multe ori, lenea este o piedică foarte mare în procesul de obținere a succesului. Orice angajat trebuie să lupte cu această slăbiciune a firii umane pentru a reuși realizarea sarcinilor propuse de către angajator. Nimănui nu-i place ca să trăiască alături de o persoană leneșă, pentru că de cele mai multe ori aceasta nu doar că nu face nimic, ci ajunge mereu să se plângă pe toate lucrurile.
Pe de altă parte, o persoană harnică și stăruitoare mereu va căuta soluții pentru dezvoltarea personală și va încerca să-I ajute și pe cei din jurul său. Aplicarea acestui principiu poate deschide uși către noi posibilități și cu siguranță că șefii nu vor rămâne indiferenți față de o persoană care depune efortul necesar pentru atingerea scopurilor celor mai mărețe.
Prezentarea interesului față de colegi
În zilele de astăzi s-ar putea să găsești mai rar persoane care sunt interesate de cei din jurul lor. Construirea unor relații bune cu semenii, este de un mare ajutor în orice domeniu din viață. Atunci când cineva prezintă interes față de cei din jur, devine o persoană de încredere pe care cineva se poate baza. De cele mai multe ori oamenii s-au confruntat cu situații când au fost trădați, lăsați la momente de nevoie, abandonați, aceste experiențe creându-le un zid în inima lor împotriva celorlalți. Nimeni nu dorește ca să fie ținta atacurilor emoționale și psihologice a celorlați.
De cele mai multe ori e necesar un efort considerabil pentru a câștiga încrederea apropiaților, dar odată ce acest lucru a fost realizat, poate produce rezultate positive și benefice pentru ambele părți.
Demonstrarea de entuziasm
Uneori unii angajați se trezesc cu gândul că trebuie să meargă la serviciu nu mai produce acea bucurie ca la început. Totul a devenit o rutină și a dispărut și dorința de a se mai trezi dimineața pentru a fi la timp la serviciu. Deja nu mai e plăcere în ceea ce fac ci doar datorie. Evident că repetarea acelorași lucruri în fiecare zi produce plictiseală, din fericire există posibilitatea de a nu sfârși în această stare. Pentru aceasta trebuie de urmat câțiva pași:
Participarea la diferite cursuri pentru acumularea de noi cunoștințe
Consultarea profesioniștilor din domeniu pentru aflarea unor noi metode și tactici de dezvoltare în domeniul dat
Asumarea de noi responsabilități la locul de muncă
Participarea la diferite activități organizate de companie sau organizație
Implicarea în diferite proiecte
Dezvoltarea abilităților de management și relaționare cu oamenii
Participarea la diferite activități sportive
1.2 Necesitatea elaborării unui sistem de urmărire a progresului în carieră
Unele companii au anumite criterii după care un angajat poate fi promovat în carieră. Spre exemplu, pot fi anumite sarcini care trebuie îndeplinite într-o anumită perioadă de timp, sau pe baza abilităților de a relaționa cu oamenii și a celor de management. Fiecare organizație își cunoaște lucrătorii și este la curent cu progresul înregistrat de aceștia în decursul anilor. De obicei acest progres este înregistrat undeva pe hârtie în dosare personale. Întrucât dezvoltarea tehnologiilor și-a lăsat amprenta în fiecare domeniu din viața oamenilor și tot mai multe procese care au necesitat resurse și timp au fost automatizate, acest process poate fi și el la rândul său automatizat.
Beneficiind de această posibilitate avantajoasă, compania ISD din Chișinău a decis să fie elaborată o aplicție web unde fiecare angajat își va crea un cont în care vor fi trecute toate datele privind nivelul la care se află și pașii pe care trebuie de urmat pentru promovare la nivelul următor.
În cadrul acestei companii, angajații își puteau vedea progresul realizat în decursul anilor reprezentat sub forma unui panou informațional. Acel panou conținea informația despre fiacare nivel al carierei la care poate ajunge un angajat. Informația descria sarcinile ce trebuie îndeplinite la fiecare nivel în parte astfel încât atunci când acestea sunt realizate, persoana respectivă poate fi promovată la o nouă etapă în procesul de avansare în carieră. Pentru începători, cât și pentru cei care au deja mai mulți ani lucrați în această companie, este stabilit un anumit număr de beneficii caracteristice pentru nivelul la care se află. Între listele de beneficii și de sarcini se afla informația anjaților care reprezenta numele, prenumele și poza angajatului. Această aplicație însă, va contribui la schimbarea modului de înregistrare și vizualizare a progresului în carieră.
Acest sistem este foarte comod de utilizat deoarece poate fi accesat de oricine și de oriunde dacă există conexiune la internet. Astfel este redus costul resurselor pentru evidența reușitei fiecărui lucrător. Pentru a verifica anumite detalii despre angajați, nu mai e nevoie de consumarea unei perioade lungi de timp, apoi nu e necesar ca să fie deranjate alte persoane întrucât tot ce trebuie să facă utilizatorul este să acceseze aplicația și să verifice informația dorită oricând și la orice oră.
1.3 Tehnologii utilizate
Pentru dezvoltarea acestui sistem, a fost folosit limbajul Java în combinație cu alte tehnologii. Cele mai importante dintre ele sunt de altfel și cele cu care lucrează compania respectivă, de aceea s-a optat pentru folosirea lor. În continuare va avea loc descrierea lor.
Java
Java este un limbaj de programare orientat-obiect, puternic tipizat, conceput de către James Gosling la Sun Microsystems (acum filială Oracle) la începutul anilor ʼ90, fiind lansat în 1995. Cele mai multe aplicații distribuite sunt scrise în Java, iar noile evoluții tehnologice permit utilizarea sa și pe dispozitive mobile gen telefon, agenda electronică, palmtop etc. În felul acesta se creează o platformă unică, la nivelul programatorului, deasupra unui mediu eterogen extrem de diversificat. Acesta este utilizat în prezent cu succes și pentru programarea aplicațiilor destinate intranet-urilor [1].
Limbajul Java este legat de limbajul C++ care este un descendent direct al limbajului C. De la acest limbaj derivă sintaxa pentru limbajul Java. Multe dintre caracteristicile obiect-orientate a limbajului descris au fost influențate de C++ [2]. Un program Java compilat, corect scris, poate fi rulat fără modificări pe orice platformă care e instalată o mașină virtuală Java (engleză Java Virtual Machine, prescurtat JVM). Acest nivel de portabilitate (inexistent pentru limbaje mai vechi cum ar fi C) este posibil deoarece sursele Java sunt compilate într-un format standard numit cod de octeți (engleză byte-code) care este intermediar între codul mașină (dependent de tipul calculatorului) și codul sursă.
Mașina virtuală Java este mediul în care se execută programele Java. În prezent, există mai mulți furnizori de JVM, printre care Oracle, IBM, Bea, FSF. În 2006, Sun a anunțat că face disponibilă varianta sa de JVM ca open-source.
Există 4 platforme Java furnizate de Oracle:
Java Card – pentru smartcard-uri (carduri cu cip)
Java Platform, Micro Edition (Java ME) — pentru hardware cu resurse limitate, gen PDA sau telefoane mobile,
Java Platform, Standard Edition (Java SE) — pentru sisteme gen workstation, este ceea ce se găsește pe PC-uri,
Java Platform, Enterprise Edition (Java EE) — pentru sisteme de calcul mari, eventual distribuite [1].
Spring Boot
Framework-ul Spring oferă un model cuprinzător de programare și configurare pentru aplicațiile moderne bazate pe Java pentru întreprinderi, pe orice platformă de implementare. Un element cheie al acestui framework este sprijinul infrastructurii la nivel de aplicație: se concentrează pe "instalarea" aplicațiilor pentru întreprinderi, astfel încât echipele să se poată concentra pe logica de afaceri la nivel de aplicație, fără legături inutile cu mediile specifice de implementare [3].
Spring Boot facilitează crearea aplicațiilor autonome bazate pe Spring care pot fi rulate necesitând foarte puține configurări.
Scopurile utilizării acestui framework:
Furnizarea unei experiențe de pornire rapidă și accesibilă pentru toată dezvoltarea pe bază de Spring.
Oferirea unei serii de caracteristici non-funcționale care sunt comune unor clase mari de proiecte.
Absolut nici o generare de cod și nici o cerință pentru configurarea fișierului XML [4].
Cerințele față de sistem pe care le are acest framework sunt: Java 8 și Spring Framework 5.0.0.BUILD-SNAPSHOT sau versiune mai nouă. Spring Boot poate fi utilizat cu instrumentele clasice de dezvoltare Java sau poate fi instalat ca și instrument în linia de comandă. Indiferent de alegerea programatorului, este necesară versiunea 1.8 sau mai nouă pentru Java Software Development Kit (SDK).
În procesul de dezvoltare a unui proiect, poate fi folosit orice mediu de dezvoltare integrat (IDE) sau editor de text. Prin urmare, orice aplicație realizată utilizând acest framework poate fi rulată la fel precum sunt rulate oricare alte programe Java.
Spring Boot este compatibil cu serverul de tip open source Apache Maven versiunea 3.2 sau altele mai recente. De asemenea un alt instrument util în dezvoltarea aplicațiilor cu care este compatibil tehnologia descrisă poartă denumirea Gradle. Acesta este un sistem open source care compilează codul sursă al calculatorului în cod binar. Versiunea necesară este 3.4 sau alta mai nouă.
Tehnologia descrisă oferă o gamă largă de posibilități pentru dezvoltarea a celor mai complexe aplicații. În continuare vor fi enumerate unele dintre ele:
Prelucrarea datelor introduse de utilizator
Încărcarea fișierelor
Sporirea securității folosind funcții hash asupra datelor
Schimbul de mesaje dintre utilizatori
Accesarea datelor din baze de date utilizând tehnologia MySQL
Crearea paginilor WEB
Obținerea informației, prelucrarea ei și scrierea într-un fișier aparte
etc.
Privind la posibilitățile oferite de acest framework, se ajunge la concluzia că este o tehnologie
foarte dezvoltată care oferă programatorului un set mare de posibilități pentru crearea diferitor proiecte care satisfac cerințele clienților.
MySQL
MySQL este un sistem de gestiune a bazelor de date relaționale, produs de compania suedeza MySQL AB și distribuit sub Licența Publică Generală GNU. Este cel mai popular SGBD open-source la ora actuală, fiind o componentă cheie a stivei LAMP (Linux, Apache, MySQL, PHP).
Există multe scheme API disponibile pentru MySQL ce permit scrierea aplicațiilor în numeroase limbaje de programare pentru accesarea bazelor de date MySQL, cum ar fi: C, C++, C#, Java, Perl, PHP, Python, FreeBasic, etc., fiecare dintre acestea folosind un tip specific API. O interfață de tip ODBC denumită MyODBC permite altor limbaje de programare ce folosesc această interfață, să interacționeze cu bazele de date MySQL cum ar fi ASP sau Visual Basic.
În sprijinul acestor limbaje de programare, unele companii produc componente de tip COM/COM+ sau .NET (pentru Windows) prin intermediul cărora respectivele limbaje să poată folosi acest SGBD mult mai ușor decât prin intermediul sistemului ODBC. Aceste componente pot fi gratuite (ca de exemplu MyVBQL) sau comerciale [5].
Cele mai importante comenzi SQL utilizate sunt:
SELECT – extrage informația din baza de date
UPDATE – modifică informația din baza de date
DELETE – șterge informația din baza de date
CREATE INDEX – crează un index
DROP INDEX – șterge un index
CREATE DATABASE – crearea unei noi baze de date
DROP DATABASE – modifică o bază de date
CREATE TABLE – crearea unui tabel
INSERT INTO – inserarea informației în baza de date
ALTER TABLE – modifică un tabel
DROP TABLE – șterge un tabel
În continuare va fi prezentată sintaxa acestor comenzi.
Instrucțiunea SELECT
SELECT * FROM nume_tabel;
Dacă este necesară selectarea informației numai din anumite coloane, codul va arăta în felul următor:
SELECT coloana1, coloana2, … FROM nume_tabel;
Instrucțiunea UPDATE
UPDATE nume_tabel SET coloana1 = valoare1 WHERE condition;
Instrucțiunea DELETE
DELETE FROM nume_tabel WHERE condition;
Instrucțiunea CREATE INDEX
CREATE INDEX index_nume ON nume_tabel(coloana1, coloana2, …);
Instrucțiunea DROP INDEX
DROP INDEX index_nume ON nume_tabel;
Instrucțiunea CREATE DATABASE
CREATE DATABASE nume_baza_de_date;
Instrucțiunea DROP DATABASE
DROP DATABASE nume_baza_de_date;
Instrucțiunea CREATE TABLE
CREATE TABLE nume_tabel (coloană1 tip_de_date,
coloană2 tip_de_date,
coloană3 tip_de_date,…);
Instrucțiunea INSERT INTO
INSERT INTO nume_tabel (coloană1, coloană2, …)
VALUES (valoare1, valoare2, valoare3, …);
În cazul în care se dorește adăugarea informației în toate câmpurile, nu e necesar de
specificat denumirea lor, ci doar valorile introduse în ordinea în care se află câmpurile în tabel:
INSERT INTO nume_tabel VALUES (valoare1, valoare2,…);
Instrucțiunea ALTER TABLE
Pentru a adăuga o coloană:
ALTER TABLE nume_tabel ADD nume_coloană tip_de_date;
Pentru a șterge o coloană:
ALTER TABLE nume_tabel DROP COLUMN nume_coloana;
Instrucțiunea DROP TABLE
DROP TABLE nume_tabel;
Java Persistence API
Java Persistence API (JPA) este specificația unei interfețe de programare a aplicațiilor (API) care descrie managementul datelor relaționale în aplicații ce folosesc platformele Java Standard Edition (SE) și Java Enterprise Edition (JEE).
În acest context Persistence acoperă trei domenii:
API-ul propriu zis, definit în pachetul javax.persistence
limbajul Java Persistence Query Language (JPQL)
metadate obiect/relațional
[6]
În Fig 1.1. este reprezentată arhitectura la nivel de clasă unde sunt arătate clasele și interfețele care sunt folosite pentru păstrarea entităților ca și înregistrări în baza de date. Acestea facilitează lucrul programatorilor în procesul de stocare a informației în bazele de date.
Figura 1.1 Class Level Architecture
Sursa: https://www.tutorialspoint.com/jpa/jpa_architecture.htm
Tabelul 1.1 conține informația care descrie elementele arătate în structura de mai sus.
Tabel 1.1 Clasele interfeței [7]
Relațiile dintre clasele descrise mai sus sunt reprezentate în diagrama data in Fig. 1.2.
Figura 1.2 JPA Class Relationship
Sursa: https://www.tutorialspoint.com/jpa/jpa_architecture.htm
Relația dintre EntityManagerFactory și EntityManager este una-la-multe. Este o clasă de fabrică pentru instanțele EntityManager.
Relația dintre EntityManager și EntityTransaction este unu la unu. Pentru fiecare operațiune EntityManager, există o instanță EntityTransaction.
Relația dintre EntityManager și interogare este una-la-multe. Multe interogări pot fi executate utilizând o instanță EntityManager.
Relația dintre EntityManager și entitate este una-la-multe. O instanță EntityManager poate gestiona mai multe entități [7].
Thymeleaf
Thymeleaf este un mecanism modern de șablon Java de tip server atât pentru medii web cât și pentru medii independente. Scopul principal este de a aduce șabloane naturale elegante fluxului de lucru pentru dezvoltare – HTML care poate fi afișat corect în browsere și poate funcționa și ca prototipuri statice permițând o colaborare mai puternică în cadrul echipelor de dezvoltare.
Cu modulele pentru Spring Framework, o mulțime de integrări cu instrumentele alese de programatori și posibilitatea de a conecta propriile funcționalități, Thymeleaf este ideal pentru dezvoltarea web-ului HTML5 JVM modern – cu toate că există mult mai mult ce poate face [8].
Acest mecanism oferă posibilitatea de a prelucra șase tipuri de șabloane:
XML
Valid XML
XHTML
Valid XHTML
HTML5
Legacy HTML5
Acest mecanism este util programatorilor pentru a defini nodurile pentru interfața de programare pentru HTML, XML și a fișierelor SVG ce poartă denumirea Document Object Model (DOM) care vor fi prelucrate în șabloanele utilizate în realizarea proiectului. De asemenea oferă posibilitatea de a alege modul în care aceste noduri vor fi prelucrate.
Potrivit informației prezentate intr-un tutorial care descrie acest mecanism și care se află pe adresa [9], ambele pachete oficiale de integrare thymeleaf-spring3 și thymeleaf-spring4 definesc un dialect ce poartă denumirea de “SpringStandard Dialect”. În mare măsură, acest dialect este echivalent cu cel standard, dar care conține unele adaptări pentru a îmbunătăți utilizarea unor caracteristici în framework-ul Spring.
Nucleul mecanismului Thymeleaf este un motor de procesare DOM. Mai exact, utilizează propria implementare DOM de înaltă performanță și nu API standard DOM pentru a construi în memorie o reprezentare sub formă de arbori a șabloanelor pe care mai târziu operează prin traversarea nodurilor lor și executând procesoare pe ele care modifică DOM conform configurației curente și setul de date care este transmis șablonului pentru reprezentarea sa – cunoscut ca context.
Sintaxă standard pentru expresii:
Expresii simple:
Expresii pentru variabile: ${…}
Expresii pentru variabile de selecție: *{…}
Expresii pentru mesaje: #{…}
Expresii pentru adresă: @{…}
Literali
Literali de text: 'one text', 'Another one!',…
Literali numerici: 0, 34, 3.0, 12.3,…
Literali Boolean: true, false
Literalul NULL: null
Literal de semn: one, sometext, main,…
Operații asupra textului:
Concatenarea șirurilor: +
Substituție literală: |The name is ${name}|
Operații aritmetice:
Operatori binari: +, -, *, /, %
Semnul minus (operator unar): –
Operații booleene:
Operatori binari: and, or
Negație booleană (operator unar): !, no
Comparație și egalitate:
Comparatori: >, <, >=, <= (gt, lt, ge, le)
Operatori de egalitate: ==, != (eq, ne)
Operatori condiționali:
If-then: (if) ? (then)
If-then-else: (if) ? (then) : (else)
Default: (value) ?: (defaultvalue)
Thymeleaf oferă un set de obiecte utilitare care ajută la realizarea sarcinilor comune în diferite expresii:
#dates: metode de utilitate pentru obiectele java.util.Date: formatare, extragerea componentelor, etc.
#calendars: similar cu #dates, dar pentru obiectele java.util.calendar.
#numbers: metode de utilitate pentru formatarea obiectelor numerice.
#strings: metode de utilitate pentru obiecte String: conține, startsWith, prepending / appending, etc.
#objects: metode de utilitate pentru obiecte în general.
#bools: metode de utilitate pentru evaluarea booleană.
#arrays: metode de utilitate pentru tablouri.
#lists: metode de utilitate pentru liste.
#sets: metode de utilitate pentru seturi.
#maps: metode de utilitate pentru hărți.
#aggregates: metode de utilitate pentru crearea de agregate pe matrici sau colecții.
#messages: metodele de utilitate pentru obținerea mesajelor externalizate în expresiile variabilelor, la fel cum s-ar obține folosind sintaxa # {…}.
#ids: metodele de utilitate pentru tratarea atributelor id care ar putea fi repetate (de exemplu, ca urmare a unei iterații).
Maven
Maven este un sistem de build și management al proiectelor, scris în Java. Face parte din proiectele găzduite de Apache Software Foundation. Funcționalitățile sale principale sunt descrierea procesului de build a softwareului și descrierea dependențelor acestuia. Un fișier XML descrie proiectul care urmează să fie build-uit, dependențele acestuia sau ale module și componente de care depinde, ordinea în care se execută build-ul, directoarele și plug-in-urile necesare. Maven descarcă dinamic bibliotecile Java si plug-in-uri necesare, din unul sau mai multe repository-uri [10].
Potrivit sursei [11], Maven este un cuvânt idiș care însemna acumulator de cunoștințe, a fost inițial inițiat ca o încercare de a simplifica procesele de construire în proiectul turbinei Jakarta. Au existat mai multe proiecte, fiecare având propriile fișiere de construcție Ant care au fost ușor diferite și JAR-urile au fost verificate în CVS. S-a dorit o modalitate standard de a construi proiectele, o definiție clară care explică din ce constă un proiect, o modalitate ușoară de a publica informații despre proiecte și o modalitate de a împărtăși JAR-urile în mai multe proiecte. Rezultatul este un instrument care poate fi acum utilizat pentru construirea și gestionarea oricărui proiect bazat pe Java.
Obiectivele Maven:
Obiectivul principal al Maven este de a permite unui dezvoltator să înțeleagă starea completă a unui efort de dezvoltare în cel mai scurt timp. Pentru a atinge acest obiectiv, există mai multe domenii de preocupare pe care Maven încearcă să le facă:
Eficientizarea procesului de construire
Furnizarea unui sistem uniform de construcție
Furnizarea de informații de proiect de calitate
Furnizarea de linii directoare pentru dezvoltarea celor mai bune practici
Permite migrarea transparentă la noi caracteristici
În continuare va fi prezentat un rezumat al caracteristicilor pentru acest sistem [12]:
Configurarea simplă a proiectului care urmează cele mai bune practici – obținerea unui nou proiect sau unui modul în câteva secunde.
Utilizarea consecventă în toate proiectele înseamnă că nu există timp de rampă pentru noii dezvoltatori care intră pe un proiect.
Gestionarea superioară a dependenței, inclusiv actualizarea automată, închiderile de dependență (cunoscute și ca dependențe tranzitive).
Poate lucra cu mai multe proiecte în același timp.
Un depozit mare și în creștere al bibliotecilor și metadatelor care trebuie utilizate afară din cutie și aranjamentelor în vigoare cu cele mai mari proiecte Open Source pentru disponibilitatea în timp real a ultimelor lor versiuni.
Extensibil, cu abilitatea de a scrie cu ușurință plugin-uri în limbajele Java sau cele scriptuale.
Acces instantaneu la caracteristici noi cu puțină sau fără configurație suplimentară.
Construcții bazate pe modele: Maven este capabil să construiască orice număr de proiecte în tipuri predefinite de ieșiri, cum ar fi JAR, WAR sau distribuție, bazate pe metadate despre proiect, fără a fi nevoie de a face scripturi în majoritatea cazurilor.
Site-ul coerent al informațiilor despre proiect: utilizând aceleași metadate ca și pentru procesul de construire, Maven este capabil să genereze un site web sau un document PDF care include orice documentație pe care este necesar de adăugat și adaugă rapoartele standard despre stadiul de dezvoltare a proiectului.
Fără multă configurație suplimentară, Maven se va integra cu sistemul de control al sursei și va gestiona lansarea unui proiect bazat pe o anumită etichetă. De asemenea, poate publica acest lucru într-o locație de distribuție pentru a fi utilizată de alte proiecte.
Maven poate publica rezultate individuale, cum ar fi un JAR, o arhivă care include alte dependențe și documentație sau ca o distribuție sursă.
Analizând informația din sursa [11], este evident că sistemul Maven este foarte avansat și util ce
furnizează pentru programatori un set mare de opțiuni și instrumente pentru elaborarea cu ușurință a unor proiecte destul de avansate.
Bootstrap
Este unul dintre cele mai complete framework-uri ce acoperă o dezvoltare liniară în HTML și Javascript și pe lângă acestea arată și bine direct „scos din cutie”, fără a pretrece prea mult timp modificând lucruri, care sunt deja făcute. Oferă o mulțime de funcționalități din punct de vedere CSS și Javascript, drept urmare este folosit în forte multe proiecte comerciale, de la pagini de sosire, pagini personale, blog-uri până la proiecte ce implică mai mult de 10 pagini.
Bootstrap oferă din punct de vedere CSS și Javascript:
Web Design Responsive ( PC, Tabletă, Telefon )
Sistem Grid
Meniu-uri ( Orizontale, Verticale )
Formulare
Butoane
Meniu-uri Dropdown in Javascript [13]
Bootstrap are o gamă largă de componente reutilizabile care pot fi folosite de orice programator pentru a realiza proiectul web. Printre aceste componente se află și un grup mare de iconițe prezentate în Fig.1.3 care sunt folosite deseori pentru a înlocui cuvinte de descriere.
Figura 1.3 Glyphicons
Sursa: https://getbootstrap.com/components/
Exemple de utilizare:
Codu sursă pentru un buton de căutare arată în felul următor:
<p>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
Rezultat:
Figura 1.4 Buton de căutare
Pentru a reprezenta o iconiță pentru muzică, e necesar codul următor:
<p>Iconita pentru muzica: <span class="glyphicon glyphicon-music"></span></p>
Rezultat:
Figura 1.5 Iconiță pentru mizică
Diferite tipuri de butoane reprezintă o altă categorie de elemente din gama largă de componente. Spre exemplu se va reprezenta butonul dropdown.
Codul sursă:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Exemplu dropdown
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Java</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">HTML</a></li>
</ul>
</div>
Rezultat:
Figura 1.6 “Dropdown menu”
Ușor de utilizat și foarte bine realizat, acest framework facilitează foarte mult crearea paginilor web și este o unealtă des folosită pentru crearea unor site-uri complexe.
Javascript
JavaScript (JS) este un limbaj de programare obiect orientat bazat pe conceptul prototipurilor. Este folosit mai ales pentru introducerea unor funcționalități în paginile web, codul Javascript din aceste pagini fiind rulat de către browser. Limbajul este binecunoscut pentru folosirea sa în construirea site-urilor web, dar este folosit și pentru acesul la obiecte încorporate (embedded objects) în alte aplicații. A fost dezvoltat inițial de către Brendan Eich de la Netscape Communications Corporation sub numele de Mocha, apoi LiveScript, și denumit în final JavaScript.
În ciuda numelui și a unor similarități în sintaxă, între JavaScript și limbajul Java nu există nici-o legătură. Ca și Java, JavaScript are o sintaxă apropiată de cea a limbajului C, dar are mai multe în comun cu limbajul Self decât cu Java.
Cea mai des întâlnită utilizare a JavaScript este în scriptarea paginilor web. Programatorii web pot îngloba în paginile HTML script-uri pentru diverse activități cum ar fi verificarea datelor introduse de utilizatori sau crearea de meniuri și alte efecte animate.Browserele rețin în memorie o reprezentare a unei pagini web sub forma unui arbore de obiecte și pun la dispoziție aceste obiecte script-urilor JavaScript, care le pot citi și manipula. Arborele de obiecte poartă numele de Document Object Model sau DOM. Există un standard W3C pentru DOM-ul pe care trebuie să îl pună la dispoziție un browser, ceea ce oferă premiza scrierii de script-uri portabile, care să funcționeze pe toate browserele. În practică, însă, standardul W3C pentru DOM este incomplet implementat. Deși tendința browserelor este de a se alinia standardului W3C, unele din acestea încă prezintă incompatibilități majore, cum este cazul Internet Explorer.
O tehnică de construire a paginilor web tot mai întâlnită în ultimul timp este AJAX, abreviere de la „Asynchronous JavaScript and XML”. Această tehnică constă în executarea de cereri HTTP în fundal, fără a reîncărca toată pagina web, și actualizarea numai anumitor porțiuni ale paginii prin manipularea DOM-ului paginii. Tehnica AJAX permite construirea unor interfețe web cu timp de răspuns mic, întrucît operația (costisitoare ca timp) de încărcare a unei pagini HTML complete este în mare parte eliminată [15].
Printre elementele acestui limbaj se enumeră:
Comentarii
Tipuri de date
Funcții
Variabile
Operatori
Instrucțiuni iterative
Obiecte
etc.
În continuare se va prezenta pe scurt obiectul Math.
Obiectul Math [15]
Obiectul Math conține diverse constante (de exemplu, π) și funcții (de exemplu, cosinuus) legate de matematică.
Obiectul Math nu are nici un constructor, spre deosebire de Array sau Data. Toate metodele sale sunt statice. Toate funcțiile trigonometrice folosesc unghiuri exprimate în radiani, nu în grade. Un șir de exemple sunt prezentate în Tab 1.2.
Tabelul 1.2 Obiectul Math
HTML
HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru crearea paginilor web ce pot fi afișate într-un browser (sau navigator). Scopul HTML este mai degrabă prezentarea informațiilor – paragrafe, fonturi, tabele ș.a.m.d. – decât descrierea semanticii documentului.
HTML este o formă de marcare orientată către prezentarea documentelor text pe o singura pagină, utilizând un software de redare specializat, numit agent utilizator HTML, cel mai bun exemplu de astfel de software fiind browserul web. HTML furnizează mijloacele prin care conținutul unui document poate fi adnotat cu diverse tipuri de metadate și indicații de redare. Indicațiile de redare pot varia de la decorațiuni minore ale textului, cum ar fi specificarea faptului că un anumit cuvânt trebuie subliniat sau că o imagine trebuie introdusă, până la scripturi sofisticate, hărți de imagini și formulare. Metadatele pot include informații despre titlul și autorul documentului, informații structurale despre cum este împărțit documentul în diferite segmente, paragrafe, liste, titluri etc. și informații cruciale care permit ca documentul să poată fi legat de alte documente pentru a forma astfel hiperlink-uri (sau web-ul).
HTML este un format text proiectat pentru a putea fi citit și editat de oameni utilizând un editor de text simplu. Totuși scrierea și modificarea paginilor în acest fel solicită cunoștințe solide de HTML și este consumatoare de timp. Editoarele grafice (de tip WYSIWYG) cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft FrontPage permit ca paginile web sa fie tratate asemănător cu documetele Word, dar cu observația că aceste programe generează un cod HTML care este de multe ori de proastă calitate.
HTML se poate genera direct utilizând tehnologii de codare din partea serverului cum ar fi PHP, JSP sau ASP. Multe aplicații ca sistemele de gestionare a conținutului, wiki-uri și forumuri web generează pagini HTML.
HTML este de asemenea utilizat în e-mail. Majoritatea aplicațiilor de e-mail folosesc un editor HTML încorporat pentru compunerea e-mail-urilor și un motor de prezentare a e-mail-urilor de acest tip. Folosirea e-mail-urilor HTML este un subiect controversat și multe liste de mail le blochează intenționat [16].
Instrucțiuni HTML și noțiuni de bază
HTML-document, (HTML-cod, sau cod-sursă, al documentului HTML) – document scris în limbajul de marcare a hipertextului (HTML). Se conține între marcajele <html> și </html>.Instrucțiunile HTML (numite și marcaje sau tag-uri) încep cu o paranteză unghiulară deschisă <urmată imediat de numele instrucțiunii, unul sau mai multe atribute ale instrucțiunii (opțional), apoi de o paranteză unghiulară închisă>. Între parantezele unghiulare și numele instrucțiunilor nu se admit spații. Atributele au forma „nume atribut” = “valoare atribut”.
Majoritatea instrucțiunilor sunt perechi. Cea de început se numește marcaj de deschidere, iar cea de sfârșit – marcaj de închidere. Marcajul de închidere, spre deosebire de cel de deschidere, nu conține atribute sau spații.
Mai mute spații între cuvinte în codul HTML, și/sau între atributele marcajelor, se convertesc de navigator într-un singur spațiu, cu excepția preformatării [17].
Pentru a face cunoștință cu forma recomandată a unui HTML document, a se vedea Anexa 1.
CSS
CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui document HTML. Stilurile se pot atașa elementelor HTML prin intermediul unor fișiere externe sau în cadrul documentului, prin elementul <style> și/sau atributul style. CSS se poate utiliza și pentru formatarea elementelor XHTML, XML și SVGL [15].
CSS3 reprezintă un upgrade ce aduce câteva atribute noi și ajută la dezvoltarea noilor concepte in webdesign.
Unele dintre cele mai importante segmente (module) noi adăugate acestui standard pentru formatarea elementelor HTML aduc un plus considerabil în dezvoltarea activității webdesign.
Mai jos sunt prezente in listă cele mai importante modulele adăugate in CSS3:
Selectors
Box Model
Backgrounds and Borders
Image Values and Replaced Content
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface
Deși au apărut unele deficiențe de compatibilitate între browsere, majoritatea proprietăților CSS3 au fost implementate cu succes in variantele browserelor noi [18].
Utilizând acest standard, programatorul poate să efectueze diferite manipulări cu elementele unei pagini, începând de la formatarea textului, pâna la crearea celor mai sofisticate elemente.
Codul sursă pentru formatarea textului cu culoarea verde:
<head>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>Exemplu de formatare!</h1>
</body>
Rezultat:
Figura 1.7 “Formatare text”
Exemplu de creare a tabelelor:
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Nume</th>
<th>Prenume</th>
</tr>
<tr>
<td>Rotari</td>
<td>Alexandru</td>
</tr>
<tr>
<td>Rotari</td>
<td>Serghei</td>
</tr>
</table>
Rezultat:
Figura 1.8 “Tabel CSS”
Utilizate împreună, tehnologiile descrise mai sus reprezintă un set de instrumente foarte utile pentru crearea diferitor aplicații sau site-uri web de ultimă oră. Folosirea lor pe larg, oferă un sentiment plăcut atât specialistului care se ocupă de proiecte în procesul realizării produsului cât și beneficiarului atunci când primește produsul final care arată frumos și conține funcționalitățile necesare.
Capitolul II Descrierea aplicației
2.1 Realizarea bazei de date
Pentru păstrarea informației cu care se lucrează în acest proiect a fost necesară crearea unei baze de date utlilizând sistemul de gestiune al bazelor de date MySQL.
Inițial a avut loc o analiză a datelor și a fost realizată o schemă conceptuală a lor. La această etapă au fost identificate datele cu care se lucrează și au fost clasificate în grupuri logice ca mai apoi să se poată stabili relațiile care există între aceste grupuri.
După ce au fost realizați acești pași, pentru o mai bună înțelegere a structurii bazei de date, aceste informații au fost reprezentate cu ajutorul diagramei EER, care se descifrează ca entitatea-relației extinsă. Această diagramă este un instrument util pentru colaborarea dintre specialiștii care proiectează baza de date pe de o parte și programatorii sau beneficiarii pe de altă parte. În diagrama din Fig. 2.1 se poate observa atât numărul de entități care alcătuiesc baza de date a proiectului, cât și legăturile dintre acestea.
Figura 2.1 ”Diagrama EER”
În continuare vor fi afișate detaliile despre fiecare tabel care se află în baza de date. Primul tabel poartă denumirea de ”benefit_types”. Are două câmpuri:
id
name.
În tabelul, prezentat în Fig. 2.2, sunt introduse datele care reprezintă tipurile de beneficii.
Figura 2.2 ”Tabelul benefit_types”
Următorul tabel din Fig. 2.3 cu titlul ”career_levels” cu câmpurile:
id
name,
păstrează informația despre denumirea fiecărui nivel.
Figura 2.3 ”Tabelul career_levels”
Tabelul cu titlul ”career_levels_benefits” conține trei câmpuri:
career_level_id
benefit_type_id
quantity
În tabelul, prezentat în Fig. 2.4, se păstrează informația despre beneficiile pentru fiecare nivel aparte.
Figura 2.4 ”Tabelul career_levels_benefits”
Tabelul cu titlul ”career_levels_todos” conține trei câmpuri:
career_level_id
todo_type_id
quantity
În tabelul prezentat în Fig. 2.5 se păstrează informația despre sarcinile care trebuie realizate de fiecare angajat pentru fiecare nivel în parte.
Figura 2.5 ”Tabelul career_levels_todos”
Tabelul cu titlul ”groups” conține două câmpuri:
id
role
În tabelul din Fig. 2.6 se păstrează informația despre nivelul de acces al fiecărui utilizator. Astfel persoanele înregistrate pot avea rol de administrator, sau pot fi simpli utilizatori.
Figura 2.6 ”Tabelul groups”
Tabelul cu titlul ”todo_types” conține două câmpuri:
id
name
În tabelul din Fig. 2.7 sunt introduse datele care reprezintă tipurile de sarcini.
Figura 2.7 ”Tabelul todo_types”
Tabelul cu titlul ”todos” conține șase câmpuri:
user_id
career_level_id
todo_id
todo_type_id
date_of_completion
description
Tabelul din Fig. 2.8 conține informația despre sarcinile efectuate de fiecare utilizator printer care și data când acestea au fost realizate.
Figura 2.8 ”Tabelul todos”
Ulltimul tabel cu titlul ”users” conține opt câmpuri:
id
last_name
first_name
username
password_hash
career_level_id
group_id
În tabelul prezentat în Fig. 2.9 se păstrează informația despre fiecare utilizator care a fost înregistrat cu success în baza de date.
Figura 2.9 ”Tabelul users”
Prezentarea paginilor web
Componentele paginii principale
Bara de navigare
În cazul când aplicația este accesată de un utilizator neînregistrat în baza de date, bara de navigare conține link-uri de navigare spre pagina de înregistrare și către pagina de logare.
Figura 2.10 ”Bara de navigare”
Însă dacă aplicația este accesată de administrator, bara de navigare conține meniul ce permite accesarea paginilor:
All users
All tasks
All benefits
All todo types
All benefit types
De asemenea, lângă link-ul către pagina Log Out, apare un mesaj de salut. Atunci când aplicația este accesată de administrator, mesajul este ”Welcome, admin”.
Figura 2.11 ”Bara de navigare pentru administrator”
În momentul când este accesată de alt utilizator mesajul este ”Welcome, + username”. În cazul următor, numele de utilizator este ”john123”.
Figura 2.12 ”Bara de navigare pentru utilizatori obișnuiți”
Panoul unde sunt reprezentate beneficiile pentru fiecare nivel
În acest panou este prezentată mai întâi denumirea panoului care se traduce ca ”Nivelurile Carierei”. Apoi urmează fiecare nivel cu denumirea proprie și cu lista de beneficii pe care le conține.
Figura 2.13 ”Panoul cu beneficii”
Panoul cu lista angajaților
Acest panou conține listele de utilizatori pentru fiecare nivel.
Figura 2.14 ”Lista angajaților”
Atunci când cursorul este mișcat asupra numele unui angajat, se poate observa progresul său curent.
Figura 2.15 ”Afișare progres”
Panoul cu sarcinile ce trebuie îndeplinite pentru fiecare nivel
Acest panou conține listele cu sarcini pentru fiecare nivel care trebuie îndeplinite de fiecare angajat pentru a avansa în carieră.
Figura 2.16 ”Lista sarcinilor”
Panoul de subsol cu detalii despre companie
Panoul de subsol conține informații despre companie printre care și datele de contact.
Figura 2.17 ”Panoul de subsol
Pagina de înregistrare
Pentru a putea urmări progresul altor persoane și pentru a înregistra progresul personal, fiecare angajat trebuie să fie înregistrat în baza de date, lucru care se întâmplă atunci când își creează un cont personal. Pentru acest lucru, este necesar ca să navigheze la pagina de înregistrare și să introducă datele cerute.
Figura 2.18 ”Pagina de înregistrare”
Introducerea datelor trebuie să fie corectă și este necesară completarea fiecărui câmp, în cazul nerespectării cerințelor, utilizatorului i se afișează mesaje de avertizare.
Figura 2.19 ”Pagina de înregistrare cu validări
Pagina de logare
Pentru utilizatorii care s-au înregistrat, pentru a vedea progresul este necesar doar ca să se autentifice.
Figura 2.20 ”Pagina de logare”
Dacă utilizatorul introduce datele greșit, apare mesajul de avertizare ”invalid username or password”. Astfel, pentru a accesa datele cu caracter personal, este necesară introducerea corectă a datelor.
Figura 2.21 ”Pagina de logare cu mesajul de avertizare”
În continuare se vor prezenta paginile care pot fi accesate de administrator și operațiile care pot fi effectuate de el asupra datelor.
Pagina All users
Pe această pagină se află un tabel în care se conține informația despre toți utilizatorii din baza de date.
Figura 2.22 ”Tabelul utilizatorilor”
Administratorul poate adăuga utilizatori noi apăsând butonul ”Add”. După ce a fost apăsat butonul, apare o fereastră popup unde se introduce datele noului utilizator.
Figura 2.23 ”Formularul pentru utilizator nou”
Formularul respectiv conține la rândul său validările necesare astfel încât să fie împiedicată introducerea eronată a datelor. Astfel datele nu sunt acceptate până nu au fost introduse corect.
Figura 2.24 ”Formularul pentru utilizator nou cu validarea datelor”
În cazul când este necesară modificarea datelor, administratorul apasă butonul ce se află în dreptul utilizatorului căruia este necesară schimbarea datelor care are ca iconiță un creion. În formularul care apare la ecran, datele pot fi modificate potrivit necesităților.
Figura 2.25 ”Formularul pentru modificarea datelor utilizatorului”
Butonul următor care se află lângă cel de editare, permite administratorului să vadă pagina de progres a angajatului. Butonul ”Promote user” realizează funcția de promovare a utilizatorului și este accesibil doar pentru administrator.
Figura 2.26 ”Pagina de progress a utilizatorului Ivanov”
Iar ultimul buton, ofera posibilitatea de a șterge orice utilizator dorit din sistem.
Pagina All tasks
Pe această pagină se află un tabel în care sunt prezentate toate sarcinile pentru fiecare nivel.
Figura 2.27 ”Tabelul cu sarcini”
Administratorul poate să adauge unele noi apăsând butonul ”Add”. Astfel în formularul apărut la ecran se pot introduce date care descriu nivelul carierei, tipul de sarcină și cantitatea.
Figura 2.28 ”Adăugarea unui nou tip de sarcină”
Orice tip de darcină poate fi editat
Figura 2.29 ”Editarea unui nou tip de sarcină”
De asemenea se poate de șters tipul de sarcină dorit.
Pagina All benefits
Orice angajat se bucură de anumite beneficii pe care le are la nivelul la care se află. Această pagină prezintă toate beneficiile pentru toate nivelurile.
Figura 2.30 ”Tabelul cu beneficii”
Administratorul poate adăuga un beneficiu nou.
Figura 2.31 ”Adăugarea beneficiilor”
Poate edita sau șterge.
Figura 2.32 ”Editarea beneficiilor”
Pagina All todo types
Această pagină conține un tabel în care sunt prezentate tipurile de sarcini.
Figura 2.33 ”All todo types”
Administratorul poate introduce un nou tip de sarcină.
Figura 2.34 ”All todo types”
Poate edita pe cele existente sau șterge.
Figura 2.35 ”All todo types”
Pagina All benefit types
Această pagină ne oferă informația despre tipurile de beneficii care sunt oferite pentru fiecare nivel.
Figura 2.36”All benefit types”
Administratorul poate sa adauge un nou tip de beneficiu.
Figura 2.37 ”Add benefit types”
Dacă e cazul, orice tip de beneficiu poate fi editat sau șters.
Figura 2.38 ”Edit benefit types”
Progress page
Pe pagina personală de progres a fiecărui utilizator, pe lângă faptul că se poate de văzut progresul în carieră, se pot de asemenea adăuga sarcini finisate, se pot edita sau șterge. Astfel, fiecare angajat este responsabil ca atunci când a realizat o sarcină să o adauge în tabelul cu sarcini finisate. Cu cât mai rapid finisează toate sarcinile, cu atât mai rapid avansează la următorul nivel.
Figura 2.39 ”Editarea sarcinilor finisate”
Utilizatorii fără drept de administrator au dreptul doar să vadă progresul altor colegi de serviciu. Ei pot să efectueze operații de adăugare, editare, ștergere doar la pagina personală de progres. Acolo pot produce modificări asupra sarcinilor finisate.
Figura 2.40 ”Editarea sarcinilor finisate”
Chiar dacă au finisat toate sarcinile, ei trebuie să fie promovați de administrator după ce acesta verifică dacă datele de pe pagina utilizatorului sunt corecte.
Figura 2.41 ”Editarea sarcinilor finisate”
2.3 Implementarea tehnologiilor
Java
Limbajul principal pentru elaborarea aplicației este Java. Cu ajutorul lui au fost create clasele necesare astfel încât să se poată crea toate obiectele acestor clase care au fost necesare pentru obținerea funcționalității aplicației. De asemenea, acest limbaj oferă posibilitatea de a combina mai multe tehnologii astfel incât să se poată obține un produs cât mai complex și după standardele cele mai înalte.
Spring Boot
Utilizând acest framework în proiectul dat, nu a fost necesară scrierea multor clase și metode care au fost generate automat de către sistem. Toate aceste clase descrise în folderul Beans au fost generate automat facilitând astfel lucrul dezvoltatorului software.
Figura 2.42 ”Clasele bean”
Figura 2.43 ”Codul generat”
MySQL
Acest sistem de gestiune a bazelor de date a fost folosit pentru crearea bazei de date a aplicației în care se află informația despre utilizatori, beneficii și sarcini. Pentru a obține informația în mod corect, este necesar de proiectat corect baza de date astfel încât să nu apară date eronate.
Figura 2.44 ”Tabelele bazei de date”
Java Persistence API
Această interfață de programare a aplicațiilor a jucat un rol esențial în crearea entităților pentru proiectul dat. Mai jos este prezentat un exemplu de utilizare pentru tipurile de beneficii:
Figura 2.45 ”Crearea entităților”
Codul acestei clase se poate vedea în Anexa 2.
Thymeleaf
Acest mecanism a fost utilizat pentru includerea link-urilor:
<div class="dropdown-content">
<li><a th:href="@{/users/all-users}">All users</a></li>
<li><a th:href="@{/todos/all-tasks}">All tasks</a></li>
<li><a th:href="@{/benefits/all-benefits}">All benefits</a></li>
<li><a th:href="@{/todos/todo-type}">All todo types</a></li>
<li><a th:href="@{/benefits/benefit-type}">All benefit types</a></li>
</div>
De asemenea pentru extragerea datelor din baza de date:
<li th:each="b : ${benefits[clStat.index]}" th:text="${b[0] + ' ' + b[1]}"></li>
A mai fost folost și la includerea imaginilor:
<img th:src="@{/images/info.png}" alt="Info" height="48" width="48" />
Maven
În cadrul acestui proiect acest sistem a fost folosit pentru a descrie dependențele necesare funcționării sistemului.
Figura 2.46 ”Pom.xml”
Codul în întregime se poate vedea în Anexa 3.
Bootstrap
Acest framework a fost folosit la crearea elementelor din paginile web și de asemenea joacă un rol crucial în procesul de adaptare a paginilor conform dimensiunii ferestrei în care sunt afișate.
Spre exemplu, pentru afișarea sarcinilor ce trebuie îndeplinite de user, s-a folosit bootstrap pentru crearea tabelelor. Codul sursă arată în felul următor:
Figura 2.47 ”Codul pentru tabelul cu sarcini”
Figura 2.48 ”Tabelul cu sarcini”
Javascript
Limbajul JavaScript a fost folosit pentru preluarea datelor din ferestrele popup pentru ca să fie prelucrate. De asemenea pentru ca calendarul inclus în formular să funcționeze a fost necesar folosirea limbajului dat. Un exemplu de utilizare se poate vedea mai jos:
<script type="text/javascript">
function changeFormValues(currentId) {
document.getElementById('userIdUpdate').setAttribute('value',
document.getElementById("userId-" + currentId).innerHTML);
document.getElementById('firstNameUpdate').setAttribute('value',
document.getElementById("firstName-" + currentId).innerHTML);
document.getElementById('lastNameUpdate').setAttribute('value',
document.getElementById("lastName-" + currentId).innerHTML);
document.getElementById('usernameUpdate').setAttribute('value',
document.getElementById("username-" + currentId).innerHTML);
document.getElementById('emailUpdate').setAttribute('value',
document.getElementById("email-" + currentId).innerHTML);
}
</script>
HTML
În proiectul dat, s-a folost HTML pentru crearea paginilor web. Un exemplu concret ar fi crearea blocurilor cu informație despre companie:
Figura 2.49 ”Codul pentru afișarea informației despre companie ”
Figura 2.49 ”Afișarea informației despre companie”
Codul în întregime a se vedea în Anexa 4.
CSS
Unele elemente incluse în proiect pentru a fi afișate corect, au fost formatate utilizând anume CSS cum e spre exemplu titlul titlului de pe pagina principală:
.img{
margin-top:10%;
width: 50%;
margin-left:25%;
height: 200px;
background-image: url('/images/Header.svg');
background-size: 100% 100%;
margin-bottom:5%; }
Figura 2.50 ”Afișarea titlului”
Toate aceste tehnologii utilizate au jucat un rol esențial în dezvoltarea aplicației. Funcționalitățile și posibilitățile oferite de fiecare în parte au contribuit foarte mult pentru a ajunge să se obțină produsul final.
Concluzie
În urma realizării acestei lucrări s-a ajuns la următoarele concluzii:
Folosirea limbajului Java la baza aplicației și a tehnologiei Spring Boot a fost o alegere bună intrucât au fost ușor implementate, iar funcționalitățile de care dispun au jucat un rol esențial în structura aplicației și în prelucrarea datelor.
Utilizarea framework-ului Bootstrap facilitează nespus de mult procesul de creare a paginilor web, deoarece dispune de o mulțime de elemente deja gata create care pot fi folosite cu ușurință de către programator.
Fiecare dintre tehnologiile utilizate dispun de o gamă largă de funcții și opțiuni de implementare astfel incât atunci când sunt folosite împreună pot servi drept instrumente foarte avansate pentru crearea celor mai complexe aplicații.
După finalizarea realizării aplicației, compania a rămas mulțumită de calitatea produsului creat și a declarat că este util pentru a urmări progresul angajaților săi.
Angajații au fost entuziasmați de acest sistem informatic care le-a trezit interesul pentru a progresa și a depune efortul necesar pentru a ajunge la nivelul cel mai avansat în carieră care este reprezentat pe pagina de start a aplicației.
Bibliografie
https://ro.wikipedia.org/wiki/Java_(limbaj_de_programare)
The Complete Reference, Java Seventh Edition, p. 3
https://projects.spring.io/spring-framework/
http://docs.spring.io/spring-boot/docs/current-SNAPSHOT/reference/htmlsingle/#boot-documentation-about
https://ro.wikipedia.org/wiki/MySQL
https://ro.wikipedia.org/wiki/Java_Persistence_API
https://www.tutorialspoint.com/jpa/jpa_architecture.html
http://www.thymeleaf.org/
http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html
https://ro.wikipedia.org/wiki/Apache_Maven
https://maven.apache.org/what-is-maven.html
https://maven.apache.org/maven-features.html
http://perdevelopment.org/bootstrap-framework-html-css-si-javascript/
https://getbootstrap.com/components/#btn-dropdowns
https://ro.wikipedia.org/wiki/JavaScript
https://ro.wikipedia.org/wiki/HyperText_Markup_Language
Bragaru T, Sibirschi T, Sibirschi V. Explorarea HTML. – Chișinău: USM, 2002. p.28-29
https://ro.wikipedia.org/wiki/Cascading_Style_Sheets
Anexe
Anexa 1
Forma recomandată a unui HTML document
Anexa 2
BenefitType.java
package com.inthergroup.internship.models;
import java.util.HashSet;
import java.util.Set;
import javax.persistence.CascadeType;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.OneToMany;
import javax.persistence.Table;
/**
* An entity Benefit composed by two fields (id, name). The Entity
* annotation indicates that this class is a JPA entity. The Table annotation
* specifies the name for the table in the db.
*
* @author interns
*/
@Entity
@Table(name = "benefit_types")
public class BenefitType {
// ––––––––
// PRIVATE FIELDS
// ––––––––
/**
* An autogenerated id
*/
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
@Column(length = 20)
private long id;
@Column(nullable = false, unique = true)
private String name;
/**
* Benefits for a specific level
*/
@OneToMany(mappedBy = "primaryKey.benefitType", orphanRemoval = true,
cascade = CascadeType.ALL)
private Set<CareerLevelBenefit> careerLevelBenefits = new HashSet<CareerLevelBenefit>();
// ––––––––
// PUBLIC METHODS
// ––––––––
public BenefitType() {
}
public BenefitType(long id) {
this.id = id;
}
public BenefitType(String name) {
this.name = name;
}
public BenefitType(long id, String name) {
this.id = id;
this.name = name;
}
// Getter and setter methods
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Set<CareerLevelBenefit> getCareerLevelBenefits() {
return careerLevelBenefits;
}
public void setCareerLevelBenefits(Set<CareerLevelBenefit> careerLevelBenefits) {
this.careerLevelBenefits = careerLevelBenefits;
}
}
Anexa 3
Pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns=”http://maven.apache.org/POM/4.0.0”
xmlns:xsi="http://www.w3.org/2001/XMLSchema instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.
http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.inthergroup.internship</groupId>
<artifactId>CareerLevels</artifactId>
<version>0.5.0</version>
<packaging>war</packaging>
<name>CareerLevels</name>
<description>Project for Spring Boot</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.5.2.RELEASE</version>
<relativePath/> <!– lookup parent from repository –>
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>net.sourceforge.html5valdialect</groupId>
<artifactId>html5valdialect</artifactId>
<version>2.0.0</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>net.sourceforge.nekohtml</groupId>
<artifactId>nekohtml</artifactId>
<!– <version>1.9.21</version> –>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-springsecurity4</artifactId>
<!– <version>2.1.2.RELEASE</version> –>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
Anexa 4
Index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial -scale =1" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Home</title>
<link rel="stylesheet"
th:href="@{http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css}" />
<link rel="stylesheet" type="text/css"
href="../static/css/bootstrap.min.css"
th:href="@{/css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" href="../static/css/style.css"
th:href="@{/css/style.css}" />
<link rel="stylesheet" type="text/css"
href="../static/css/footer-distributed-with-address-and-phones.css"
th:href="@{/css/footer-distributed-with-address-and-phones.css}" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" th:href="@{/index}"><img class="logo" th:src="@{/images/logo.png}" height="50" width="50" /></a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a th:href="@{/index}">Home</a></li>
<div sec:authorize="hasAuthority('ADMIN')" class="dropdown">
<button class="dropbtn">
<li>Administration<span class="caret"></span></li>
</button>
<div class="dropdown-content">
<li><a th:href="@{/users/all-users}">All users</a></li>
<li><a th:href="@{/todos/all-tasks}">All tasks</a></li>
<li><a th:href="@{/benefits/all-benefits}">All benefits</a></li>
<li><a th:href="@{/todos/todo-type}">All todo types</a></li>
<li><a th:href="@{/benefits/benefit-type}">All benefit types</a></li>
</div>
</div>
</ul>
<ul class="nav navbar-nav navbar-right">
<li th:if="${#httpServletRequest.remoteUser != null}"><a class="welcome" th:text="'Welcome, ' + ${#httpServletRequest.remoteUser}"></a></li>
<li th:if="${#httpServletRequest.remoteUser == null}"><a th:href="@{/signup}">
<span class="glyphicon glyphicon-user"></span> Sign Up </a></li>
<li th:if="${#httpServletRequest.remoteUser == null}"><a th:href="@{/login}">
<span class="glyphicon glyphicon-log-in"></span> Login </a></li>
<li><a th:if="${#httpServletRequest.remoteUser != null}">
<form th:action="@{/logout}" method="post" id="logoutForm">
<button type="submit" form="logoutForm" class="btn btn-link">
<span class="glyphicon glyphicon-log-out"></span> Log Out
</button>
</form>
</a></li>
</ul>
</div>
</nav>
<div class="img"></div>
<div class="row">
<div th:class="'col-sm-6 col-md-4 col-xs-7 col-lg-3 panel panel-default panel-body careerLevel careerLevel' + ${clStat.count}" th:each="cl : ${careerLevels}">
<div th:class="'benefits benefits' + ${clStat.count}" valign="top">
<div th:class="'top top' + ${clStat.count}"></div>
<div th:class="'cl_Name cl_Name' + ${clStat.count}" th:text="${cl.name}"></div>
<br />
<div class="ben_title">Benefits</div>
<br />
<div>
<ul class="benefitName flexcroll">
<li th:each="b : ${benefits[clStat.index]}" th:text="${b[0] + ' ' + b[1]}"></li>
</ul>
<div th:class="'guys guys' + ${clStat.count}"></div>
</div>
</div>
<div th:class="'users flexcroll users' + ${clStat.count}" valign="top">
<ul class="usersName" th:each="u : ${users[clStat.index]}">
<a class="t" th:href="@{users/progress-page/{id}/(id=${u.id})}">
<li class="user" th:text="${u.firstName} + ' ' + ${u.lastName}"></li>
<span class="c i"> <img th:src="@{/images/info.png}" alt="Info" height="48" width="48" /> <em>Information</em>
<div th:text="'Current progress is: ' + ${usersPercentProgress['__${u.id}__']} + '%'">
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria valuenow="45" aria-valuemin="0" aria-valuemax="100" th:attr="style='width: ' + ${usersPercentProgress['__${u.id}__']} + '%'">
<span class="sr-only">45% Complete</span>
</div>
</div>
</span>
</a>
</ul>
</div>
<div th:class="'todos todos' + ${clStat.count}" valign="top">
<div class="tod-title">
<b>To do:</b>
</div>
<br />
<ul class="todosName flexcroll1">
<li class="task" th:each="t : ${todos[clStat.index]}" th:text="${t[0] + ' ' + t[1]}"></li>
</ul>
</div>
</div>
</div>
<div>
<footer class="footer-distributed">
<div class="footer-left">
<a href="#"><img class="logo" th:src="@{/images/logo.png}" height="100" width="100" /></a>
<p class="footer-links footer-company-about">
<a th:href="@{/index.html}">Home</a> · <a th:href="@{http://isd-soft.com/tech_blog/}">Blog</a>
</p>
<p class="footer-company-about">Copyright © 2017, ISD. All rights reserved.</p>
</div>
<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p class="footer-company-about">
Str. Fierarilor 2 <br />Chisinau 2001MD, Moldova
</p>
</div>
<div>
<i class="fa fa-phone"></i>
<p class="footer-company-about">+373 22 996 170</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p class="footer-company-about">
<a href="mailto:isd@inthergroup.com">isd@inthergroup.com</a>
</p>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<br /> About the company<br /> ISD executes Java projects. For a very reasonable price customer gains access to our team of skilled professionals. </p>
<div class="footer-icons">
<a th:href="@{https://www.facebook.com/isdmoldova}"> <i class="fa fa-facebook"></i>
</a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</footer>
</div>
</body>
</html>
Copyright Notice
© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.
Acest articol: Automatizarea sistemului de evidență „Career levels” utilizind tehnologii Web Informatica Aplicată Teză de licență Șef departament: ______________… [302196] (ID: 302196)
Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.
