COORDONATOR ȘTIINȚIFIC ABSOLVENT Lect. univ. dr. Cucu Ciprian Ioan BUTA NICOLAE ALBA IULIA 2019 2 MINISTERUL EDUCAȚIEI NAȚIONALE UNIVERSITATEA „1… [623414]

1
MINISTERUL EDUCAȚIEI NAȚIONALE
UNIVERSITATEA „1 DECEMBRIE 1918” DIN ALBA IULIA
SPECIALIZAREA INFORMATICĂ
FORMA DE ÎNVĂȚĂMÂNT ZI

LUCRARE DE LICENȚĂ

COORDONATOR ȘTIINȚIFIC ABSOLVENT: [anonimizat]. univ. dr. Cucu Ciprian Ioan BUTA NICOLAE

ALBA IULIA
2019

2
MINISTERUL EDUCAȚIEI NAȚIONALE
UNIVERSITATEA „1 DECEMBRIE 1918” DIN ALBA IULIA
SPECIALIZAREA INFORMATICĂ
FORMA DE ÎNVĂȚĂMÂNT ZI

SISTEM DE GESTIUNE AL COMENZILOR

COORDONATOR ȘTIINȚIFIC ABSOLVENT: [anonimizat]. univ. dr. Cucu Ciprian Ioan BUTA NICOLAE

ALBA IULIA
2019

3

Cuprins
Introducere ………………………….. ………………………….. ………………………….. ………………………….. ………… 4
Scurt istoric logistică ………………………….. ………………………….. ………………………….. ……………………. 4
Descrierea problemei ………………………….. ………………………….. ………………………….. …………………… 4
Google Api ………………………….. ………………………….. ………………………….. ………………………….. ……… 5
SuperSmartOMS ………………………….. ………………………….. ………………………….. ………………………… 5
1. Studiul științific ………………………….. ………………………….. ………………………….. ………………………… 6
2. Analiza si proiectarea aplicației ………………………….. ………………………….. ………………………….. …..8
2.1. Scopul si obiectivele aplicației ………………………….. ………………………….. …………………………. 8
2.2. Proiectarea entităților ………………………….. ………………………….. ………………………….. ………… 9
2.3. Proiectarea interfeței ………………………….. ………………………….. ………………………….. ………… 10
3. Tehnologiile utilizate la realizarea aplicatiei de gestiune ………………………….. ………………………. 15
3.1. HTML, CSS, JavaScript ………………………….. ………………………….. ………………………….. ……. 15
3.2. PHP, MySql, Apache ………………………….. ………………………….. ………………………….. ………… 16
3.3. Larav el, Node JS ………………………….. ………………………….. ………………………….. ………………. 18
3.4. Bootstrap, Vue,js ………………………….. ………………………….. ………………………….. ……………… 20
4. Prezentarea aplicatiei ………………………….. ………………………….. ………………………….. ………………. 21
4.1. Utilizarea aplicației ………………………….. ………………………….. ………………………….. ………………. 21
4.2. Pagina Produselor ………………………….. ………………………….. ………………………….. ……………. 21
4.3. Pagina Clienților ………………………….. ………………………….. ………………………….. ………………. 22
4.4. Pagina Transporturilor ………………………….. ………………………….. ………………………….. …….. 23
4.5. Pagina Custodiilor ………………………….. ………………………….. ………………………….. ……………. 27
4.6. Pagina Dashboard(Calendarului) ………………………….. ………………………….. …………………… 28
Concluzii ………………………….. ………………………….. ………………………….. ………………………….. ………….. 32
Bibliografie ………………………….. ………………………….. ………………………….. ………………………….. ……….. 33

4
Introducere

Scurt istoric logistică

Logistica este de origine militară, aceasta a fost utilizată pentru prima oară in domeniul
militar . Termenul de logistică a luat naștere in timpul imperiilor grecești si romane. Unii ofițeri
militari aveau responsabilitatea de furnizare si distribuire a re surselor pentru deplasarea efcientă a
soldaților de la poziția de bază la o nou poziție. Logistica militară a avut un rol foarte important in
rezultatele multor războaie. În cel de -al doilea război mondial logistica armatei Statelor Unite, dar
și a aliațil or ei a evoluat considerabil, fiind peste cea a armatei Germaniei.
Datorită acestei diferenț e de evoluție a logisticii, locurile de aprovizionare ale armatei
Germaniei au suferit pagube serioase și nu au putut cauza același dezastru înapoi inamicului. [11]
Logistica este ca un cadru ce cuprinde planificarea depozitului/întreprinderii pentru
gestiunea materialelor, informațiilor, serviciilor si a flluxului capital, aceasta este esențială în
afaceri in ziua de azi. Încă de la logistica din trecut, cea militara, aceasta a fost definita ca, având
tipul corect de produs, sau serviciu, in locul potrivit, la momentul potrivit.
Loistica a evoluat foarte mult de la începuturile ei, până in ziua de azi, acum aceasta a
evoluat ca un concept de afaceri, datorit ă complexitații tot mai amplă întâlnită in afacerile
moderne. Principalul scop al logisticii este managementul eficient a ciclului de viață al unui proiect
si o eficiență cât mai mare posibilă rezultată. O întreprindere axată pe creștere si profitabilitate nu
poate neglija importanța uriașă a logisticii, lațului de aprovizionare.
Logistica într -o întreprindere nu se ocupă doar cu o activitate de lucru, ci se referă la un
lanț/un grup de activități ce se realizează pentru a atinge scopul măririi profitabili tății. Aceste
activități pot implica etape, cum ar fi, depozitarea, cumpărarea, planificarea, coordonarea,
transportul, distribu ția și serviciul pentru clienți. [12]

Descrierea problemei

Problem a comis voiajorului, sau traveling salesman problem(TSP), f ace parte dintr -o
categorie mai mare de probleme cunoscute cu numele de probleme de optimizare combinatorică.
Vânzătorul primește o hartă a orașelor, iar acesta trebuie să viziteze toate orașele o singură dată și
să se întoarcă înapoi la punctul de plecare pentru finalizarea unui tur , astfel încât dintre toate
turneele posibile pentru respectiva hartă, durata turului să fie cea mai scurtă.

5
Chiar dacă s -au făcut progrese foarte mari în capacitatea noastră de a rezolva problema
comis voiajorului prin algorit mi exacți, încă există cazuri ale problemei care trebuie rezolvate.
Timpul de funcționare poate fi extrem de mare pentru anumite aplicații, daca o instanță
este rezolvată cu ajutorul unui algoritm exact, iar in anumite cazuri, datele de problemă ale
insta nței în cauză pot sa nu fie exacte din diferite motive, prin urmare, rezolvarea unei astfel de
instanțe la optimitate maximă, ar putea sa nu fie și corectă, mai ales atunci cand timpul de rezolvare
a instanței este semnificativ .

Google Api

În aplicație a fost folosit de la google api, harta statică pentru a afișa locațiile si pe hartă
după adăugarea lor pentru a fi optimizat traseul, dar și pentru matricea de distanțe , pentru a obține
distanța exactă dintre adresele introduse.
Matricea de distanțe este un serviciu de la google ce oferă distanța si durata/ timpul de
deplasare pentru o matrice de origini și una de destinații. Ace asta returnează informațiile bazate
pe traseul recomandat între punctele de început si cele de sfârșit.
Aceast serviciu google a fost folosit doar pentru obținere distanței exacte dintre adrese, ca
mai apoi aceaste distanțe sa fie comparate de către algoritm în toate posibilitățile posibile pentru a
obține cel mai optim traseu.

SuperSmartOMS

Această lucrare își propune sa contribuie la dezvoltarea și implementarea unui sistem
informatic, referitor la gestiunea mai ușoară a unui depozit de materiale de construcții , dar și la
opținerea celui mai optim traseu de urmat al șoferilor pentru toate transporturile din ziua curentă ,
adică gestiiunea logisticii depozitului .
Problema gestiunii unui depozit este una cât se poate de reală și aceasta este motivația
principală pentru alegere a acestei temei de licenț ă.
Acuratețea invetarului este una dintre cele mai mari probleme întalnit e în gestiunea unui
depozit, de materiale, de construcții in cazul acestei lucrari. Menținerea unui număr exact de
articole de inventar este una dintre cele mai dificile probleme în gestionarea sistemelor de
depozitare. În general, problema cea mai frecvent ă in ceea ce privește numărul de inventare
inexacte este eroarea umană. Multe dintre aceste probleme pot fi atribuite factorilor temporali, în
timp ce alte aspecte pot fi în domeniul instruirii insuficiente a sistemului de management al

6
inventarului. Pe pa rcursul perioadei de șase luni până la un an, aceste erori se pot acumul, lăsând
îndoieli în inventar.
Amenajarea eficientă a depozitului este de asemenea o problemă mare într -un depozit.
Aranjamentul depozitului poate ajuta, poate afecta operațiunile din depozit. Fiecare industrie poate
decide propriile nevoi în ceea ce privește accesibilitatea produsului în sistemul de depozitare.
Costurile de transport sunt in topul listei celor mai mari probleme in gestiunea logisticii.
Costurile de combustibil, es te unul dintre cele mai mari costuri care contribuie la reducerea
costului de transport. Prețurile mai ridicate ale combustibililor vor crește probabil costurile de
transport pentru expeditori datorită suprataxelor de combustibil.

1. Studiul științific

Această lucrare își propune să rezolve problema comis voiajorului(traveling salesman
problems). În cercetarea/ studiul pentru găsirea unei soluții adecvate rezolvării acestei probleme,
au fost găsite mai multe metode ce pot fi implementate.
Aceasta este un a dintre cele mai cunoscute probleme și este adesea numită ca o problemă
dificilă. Un vânzător trebuie să viziteze orașe n, trecând prin fiecare oraș doar o singură dată,
începând de la unul dintre ele, care este considerat a fi baza lui și revenind la ea. costul transportului
între orașe (oricare ar fi o combinație posibilă). Este cerut programul călătoriei, adică ordinea
vizitării orașelor în așa fel încât costul să fie minim. [16]

Metodele de rezolvare a acestei probleme găsite sunt următoarele:
1. Soluție euristică, propusă de Karp [14]
1.1. Termenul euristic este folosit pentru algoritmi care găsesc soluții printre toate cele
posibile, dar nu garantează că cele mai bune vor fi găsite, prin urmare ele pot fi
considerate algoritmi apropiați și nu exacți. Acești algoritmi găsesc, de obicei, o
soluție apropiată de cele mai bune unul și îl găsesc rapid și ușor. Uneori acești
algoritmi pot fi corecți, adică găsesc cea mai bună soluție, dar algoritmul este
numit în continuare euristic până când această soluție este do vedită a fi cea mai
bună. Metoda utilizată dintr -un algoritm euristic este una dintre metodele
cunoscute, cum ar fi lăcomia, dar pentru a fi ușor și rapid algoritmul ignoră sau
chiar suprimă unele dintre cerințele problemei. [15]

7
Dacă, de exemplu, a r exista 21 de orașe, pașii necesari sunt (n -1)! = (21 -1)!
= 20! pași. În cazul în care fiecare pas este necesar ar fi nevoie de aproximativ 770
de secole de calcule. Apparent, examinarea exhaustivă a tuturor soluțiilor posibile
este în afara întrebării , deoarece nu se știe de nici un alt algoritm rapid care găsește
cea mai bună soluție se va folosi un algoritm euristic. [16]
”
(* starting values *)
C=0
cost=0
visits=0
e=1 (*e=pointer of the visited city)
(* determination of round and cost)
for r=1 to n -1 do
choose of pointer j with
minimum=c(e,j)=min{c(e,k);visits(k)=0 and k=1,..,n}
cost=cost+minimum
e=j
C(r)=j
end r -loop
C(n)=1
cost=cost+c(e,1)
” [16]
Se pot întâlnii situații în care algoritmul TSP nu dă cea mai bună soluție. De
asemenea, algoritmul se poate îmbunatății. De exemplu, se poate aplica algoritmul
t ori pentru t diferite orașe și sp păstrăm cea mai bună rută de fiecare dată.
Dezbinând nașterile astfel încât să se reducă problema algoritmului nu există loc
pentru alegerea laturilor înclinate la sfâr șitul algoritmului, deoarece părțile cele mai
ieftine au fost epuizate. [16]
2. Programarea dinamică
2.1. Programarea dinamică tinde să împartă problema inițială la sub -probleme și alege
cea mai bună soluție, începând de la cea mai mică dimensiune . Cea mai bună
soluție în sub -problemele mai mari se găsește utilizând cele mai bune soluții dintre
cele mai mici sub -probleme printr -o formulă retroactivă care leagă soluțiile. Până
la acest punct este pur și simplu metoda „Divice and Conquer”. În plus, infomațiile

8
despre alegerile care au încă o posibilitate de a conduce la o soluție optimă sunt
stocate și pot fi folosite.
În găsirea acestei formulări, se folosește foarte mult ceea ce se numește „principiul
celor mai bune”, care este definit aproximativ, spune că, dacă soluțiile posibile ale
unei probleme reprezintă o combinație de soluții posibile de sub -probleme, atunci
trebuie sa se aștepte ca cea mai bună soluție a problemei să vină prin combinarea
celor mai bune soluții de sub -probleme. Un exemplu tipic de a aplica principiul
celor mai bune este dat de problema rutelor minime. [17]
3. Algoritm f orța brută (Brute Force)
3.1. Algoritmii Brute Force se referă la un stil de programare care nu include comenzi
rapide pentru a îmbunătăți performanța, ci se bazează pe puterea computer izată
pentru a încerca toate posibilitățile până când se găsește soluția la o problemă.
Un exemplu comun al algoritmului forței brute este o amenințare la adresa
securității care încearcă să ghicească o parolă utilizând parole comune cunoscute.
Un astfel d e algoritm ar putea încerca, de asemenea, cuvinte ale dicționarului sau
chiar orice combinație de șiruri ASCII de o anumită lungime. [18]
Acest algoritm parcurge fiecare poziție din șir plecând de la prima si
intorcându -se tot la prima poziție, în momentul în care a ajuns înapoi la poziția
bază s -a parcurs o rută cu un cost total. Acest proces se reproduce până când sunt
realizate toate posibilitățile, permutările posibile între poziția de bază si toate
celelalte poziții, apoi sortează rezultatele, fiind pe prima poziția, ruta cea mai
scurtă, cu costul cel mai mic.
Acesta este și algoritmul ales pentru implementarea optimizării traseului
unui șofer a tuturor transporturilor dintr -o zi, deoarece în momentul alegerii a părut
cel mai eficient și mai sigur dintre toți, însă la un numar mare de locații acesta nu
mai este capabil să optimizeze traseul datorită multitudinii extrem de mare de
parcurgeri ce trebuie sa le realizeze.

2. Analiza si proiectarea aplicației
2.1. Scopul si obiectivele aplicației

Aplicația își propune să ajute cât mai mult la gestiunea logisticii a unui depozit mic de
materiale de construcții pentru a reduce cât mai mult costurile de transport. Aplicația este destinată

9
utilizării la capacitate maximă de către administratorul depozitului, acesta având acces la toate
înregistrarile, produsele, facturile, detaliile despre clienți, la tot din panoul de administrare.
Aplicația se dorește a fi folosită în doua părți, prima parte unde utilizatorul are acces complet
la toate funcționalitațile si informaț iile din aplicație, din baza de date, în acest caz, utilizatorul fiind
administratorul depozitului. O altă parte ce se dorește a folosi aplicația este aceea în care
utilizatorul are acces la o pagină unde îi este afișat un calendar cu toate luniile anului. Pe acest
calendar apar și transporturile pe fiecare zi din luna respectivă, iar utilizatorii, în acest caz fiind
șoferii, au acces limitat la funcționalitățile de pe această pagină.
Șoferii v -or avea acces doar la vizualizarea calendarului cu transportur ile si la funcționalitatea
unui buton cu posibilitatea de a calcula traseul optim de urmat plecând din locația curentă spre
toate locațiile unde urmează sa livreze și înapoi in locația curentă.

2.2. Proiectarea entităților

Figura 1. 2 – Structura bazei de d ate

10
2.3. Proiectarea interfeței

Figura 1. 3 – Diagrama Control Flow

Figura 1 .4 – Diagrama procesului de autentificare .

După ce aplicația pornește este afișat in browser panoul destinat logării cu, câmpurile
necesare completării. User (emailul utilizatorului/adminului) și parola. După ce butonul de login
este apăsat urmeaza următorul pas, se verifică in baza de date dacă utilizatorul există și credențalele
sunt corecte, iar dacă acest aspect este afirmativ, accesul este permis și se realizază re direcționarea
pe o pagină goală pentru a evita fluxul mare de date și blocarea/încetinirea browserului web. Daca
credențialele introduce sunt incorecte va fi afișat un mesaj de eroare specific și se va face
redirecționarea îmapoi către panoul de logare.

11

Figura 1.5 – Arhitectura web – MVC

Componenta Model constiutuie reprezentarea bazei de date. View reprezintă componenta
vedere, ceea ce este afișat utilizatorului. Acestea conțin cod Html și Css. Ele au rolul de a interpreta
un model ca un element de interfața, astfel încât să se realizeze interacțiunea. Unui model îi poate
corespunde în funcție de scopul pe care îl au, mai multe vederi. Componenta Controller(control)
este aceea compnentă prin intermediul căreia se realizează comunicarea între model și vedere.
Cotrollerele sunt clase care procesează acțiunile din interfață realizate de utilizator și răspunde la
acestea. [13]
Etapele specifice arhitecturii MVC :
 Cererea trimisă de client (navigatorul Web)
 Routingul –dirijarea cererii către un anumit Controller
 Recurgerea la un model
 Furnizarea datelor dorite
 Apelarea unui view
 Transmiterea conținutului către client

12

Figura 1.6 – Diagrama gestionării datelor

În figura 1.5 sunt prezentate

Figura 1. 7 – Diagrama comunicării componentelor VUEX.

Modurile prin care Vue.js permite componentelor sa comunice sunt următoarele :
1. Comunicare de la componenta părinte la componenta copil, folosind props:

Figura 1.8 – Comunicarea Vue.js p ărinte –> copil

13
În acest tip de comunicare, o componentă părinte transmite datele către componenta copil
prin adăugarea unui argument (props) în declarația componentei.

Figura 1.9 – Secvență din cod la comunicarea p ărinte –> copil

Figura 2.0 – Secvență din cod la comunicare a părinte –> copil

Figura 2.1 – Secvență din cod la comunicarea p ărinte –> copil

2. Comunicarea de la component copil la component părinte folosind evenimentele:

Figura 2.2 – Comunicarea Vue.js copil –>părinte

14

În acest tip de comunicare, evenimen tele ($emit) sunt cele care asigură comunicarea datelor
de la componenta copil la componenta părinte.

Figura 2.3 – Secvență din cod la comunicarea copil –> părinte

3. Comunicarea intre orice componente folosind evenimentele (Event Bus/ (eventHub ).

Figura 2.4 – Secvență din cod la comunicarea copil –> părinte

În acest tip de comunicare, $eventBus ($eventHub) nu se limiteaza la o relație strict părinte –
copil, sau copil -părinte. Informațiile pot fi distribuite intre orice componente.

Figura 2.5 – Secvență din cod la comunicarea copil –> părinte

15
3. Tehnologiile utilizate la realizarea aplicatiei de gestiune
3.1. HTML , CSS, JavaScript

Html:

HTML este un limbaj care acceptă etichete de marcare pentru formatare și are
abilitatea de a trece la alte pagini web.
Cele mai multe, dar nu toate, etichetele HTML vin în perechi cu o etichetă de
început și o etichetă de sfârșit. De exemplu, următorul cod utilizează o etichetă de început
<h1> și o etichetă de sfârșit </ h1>:
<h1> Hello World! </ h1>
Standardul / specificația HTML oficială nu specifică deseori caracteristicile de
afișare precise. Deci, nu toate browserele afișează etichete în același mod.

<!DOCTYPE html>
<html lang="en">
<head>
.
</head>
<body>
.
</body>
</html
FIGUR A 1.0 Cod schelet folosind do ar doctype și elementele structural e

Prima construcție, <! DOCTYPE html>, indică browserului ce tip de document este
pagina web. Valoarea sa html (în <! DOCTYPE html>) indică faptul că documentul este
un document HTML, și mai precis că documentul utilizează standardul HTML5 pentru
sintaxa sa. [3],[4]
Css:

16
CSS (Cascading Style Sheets) este folosit pentru a înfrumusețarea și aranja rea
pagini web. De exemplu, pentru a modifica fontul, culoarea, dimensiunea ș au spațierea
conținutului dvs .[3],[4]
O regulă CSS este formată dintr -un set de proprietăți, care au valori setate să
actualizeze afișarea conținutul HTML, de exemplu, vreau ca înălțimea elementului meu să
fie de 50% din elementul părinte și fundalul să fie verde , selector care selectează elemen tele
pe care doriți să le aplicați valorile actualizate ale proprietăților. De exemplu, doresc să
aplic regulă CSS tuturor paragrafelor din documentul HTML :[8]
p {
color: red;
}

JavaScript:

JavaScript oferă posibilitatea de a actualiza conținutul paginii web atunci când
apare un eveniment, cum ar fi atunci când un utilizator face clic pe un buton. Acesta oferă,
de asemenea, posibilitatea de a prelua intrările utilizatorului și de a procesa acea intrare .
O funcție în JavaScript este similară unei funcții matematice. O funcție
matematică primește argumente, efectuează un calcul și returnează un răspuns. De
exemplu, funcția matematică sin (x) primește argumentul x, calculează sinusul unghiului x
dat și r eturnează sinusul calculat al lui x. De asemenea, o funcție JavaScript ar putea primi
argumente, va efectua un calcul și ar putea returna un răspuns. Iată sintaxa pentru a apela
o funcție:

function -name(zero -or-more -arguments -separated -by-commas)
[4]

3.2. PHP , MySql, Apache

Php:

PHP este un limbaj popular de scripting, de uz general care se potrivește în special
dezvoltării web. Rapidă și flexibilă. PHP extinde totul de la blogul dvs. la cele mai populare
site-uri web din lume.

17
PHP este un limbaj open source. Ca atare, fiecare versiune a limbajului este creată
utilizând contribuția utilizatorilor individuali care îl folosesc – programatorii înșiși. Acest
lucru permite ca limbajul, în timp, să evolueze și să plutească în direcția care este condusă
de uti lizatori.
Funcția „print” PHP va returna orice cod HTML (sau JavaScript) care a fost plasat
între "". Browserul va interpreta orice cod returnat de serverul web.
Dacă scriem codul următor, browserul va afișa Hello ca antet HTML (h1):
<?php
Print "<h1> Hello</h1>";
?>
PHP poate accesa informații din mai multe tipuri de sisteme DBMS, inclusiv Oracle
și SQL Server. Cu toate acestea, cea mai populară combinație este de a asocia PHP cu
MySQL. [3]
Apache :

Apache, ca și PHP, este un produs open source. Toate modificările aduse serverului
web Apache sunt coordonate de Apache Software Foundation.
ASP menține site -ul web apache.org pentru a oferi utilizatorilor și dezvoltatorilor
posibilitatea de a descoperi proiecte în curs de dezvoltare și abilitatea de a de scărca cele
mai recente versiuni ale Apache.
Apache Software Foundation încurajează, de asemenea, toți utilizatorii produselor
lor să țină la curent și să se implice în dezvoltarea produselor viitoare. Există un grup de
contribuabili de bază, format iniți al de fondatorii proiectului și care au fost suplimentați
din când în când de alți contribuabili.
MySQL :

SQL -Structured Query Language este o limbă specială utilizată pentru actualizarea,
inserarea sau ștergerea datelor dintr -un DBMS (Database Management System).
Un DBMS este o aplicație care interacționează cu un limbaj de program și o bază
de date pentru actualizarea, inserarea sau ștergerea datelor. DBMS utilizează SQL pentru
a interpreta modificările necesare ale datelor din baza de date.
Serverul Apache va descoperi mai întâi că, codul PHP trebuie interpretat. Codul
PHP va fi trimis apoi procesorului PHP. Procesorul PHP interpretează codul (linie cu linie).
În timp ce face acest lucru, va descoperi că instrucțiunile SQL trebuie să fie exec utate de o

18
baze de date. Instrucțiunile SQL sunt apoi transferate în sistemul de gestionare a bazelor
de date adecvate (DBMS) pentru prelucrare. DBMS va returna rezultatele execuției
instrucțiunilor SQL procesorului PHP. Serverul Apache va combina apoi rez ultatele
returnate de procesorul PHP cu orice alt cod HTML (și / sau JavaScript) care ar putea fi
localizat pe pagina originală solicitată și va returna toate ieșirile către browser -ul de pe
aparatul utilizatorului. Browserul va interpreta HTML și JavaScri pt pentru a afișa
rezultatele paginii solicitate. [3]
3.3. Laravel , Node JS
Laravel :

Laravel este un cadru de dezvoltare web MVC scris în PHP. Acesta a fost conceput
pentru a îmbunătăți calitatea software -ului dvs., reducând atât costul dezvoltării inițiale, cât și
costurile continue de întreținere și îmbunătățind experiența de lucru cu aplicațiile dvs., oferind
o sintaxă expresivă clară și un set de funcții de bază, care vă vor economisi ore din timpul de
implementare .[2]
Laravel furnizează , o serie de instrumente de interacțiune cu bazele de date. Migrarea
bazelor de date vă permite să proiectați și să modificați cu ușurință o bază de date într -un mod
independent de platformă. Migrațiile pot fi apoi executate împotriva oricăror tipuri de ba ze de
date pe care Laravel le suportă (MySQL, PostgreSQL, MSSQL și SQLite) și nu veți avea
probleme de compatibilitate.
Laravel vine cu un instrument de interfață de comandă numit „Artisan”.
Cu acest instrument, un dezvoltator poate interacționa cu aplic ația pentru a declanșa
acțiuni cum ar fi rularea migrărilor unei baze de date, testarea u nităților de rulare ș i executarea
sarcinilor programate.
Laravel are un sistem de rutare ușor de gestionat ce permite gestionarea cu ușurință a
adreselor URL ale site -ului.
Se pot crea legături in cadrul site -ului, care se vor actualiza automat, dacă sunt modificare
adresele URL care fac munca de întreținere a site -ului mult mai ușoară. [10]

Instalare Laravel:

19
Pentru instalare Laravel si rulare acesta are necesită un mediu de server web, cum ar fi
Apache, IIS, etc. Cel mai simplu mod de a configura un server web pentru dezvoltare este prin
XAMPP.
Versiunea necesară de PHP a serverului difera cu versiunea Laravel , de exemplu o
versiune mai veche Laravel v.3.x necesită minim PHP v5.x pentru a rula, iar o versiune Laravel
mai noua, Laravel v.5.7 necesită minim PHP v.7.x pentru a rula.
Dupa ce serverul Apache sau alt tip de server PHP cu versiunea minim necesara ve rsiunii
de Laravel este instalat si MySQL sau orice alt sistem de gestiune al bazelor de date, urmează
descărcarea Laravel.
XAMPP o versiune mai noua, vine la pachet cu serverul Aache PHP v.7.x ș i MariaDB.
Pentru a rula laravel mai este nevoie și de Composer, care este foarte ușor de descărcat
si instalat de pe site -ul oficial: https://getcomposer.org/download/ . Acolo sunt mai multe
metode diferite prin care poate fi instalat, cea mai simpla metoda pe Windows este descărcarea
fișierului .exe.
Cea mai simplă metodă instala Laravel eu cred ca este prin comanda : „ composer global
require laravel/installer ”
Dupa asta, prin simpla comandă „ laravel new ” va crea un proiect inițial Laravel în
directorul specificat de dvs. Sau „ laravel new site ” se creaza un director numit „ site ” iar în
interiorul lui va fi proiectul inițial Laravel cu toate dependințele necesare instalate.
Prin comanda „ php artisan serve ” se pornește serverul de dez voltare:
„http://localhost:8000 ”.

Node.js:

Node.js este un mediu open -source, utilizat pentru dezboltarea aplicațiilor web de pe
server.Aplicațiile Node.js sunt scrise în JavaScript si pot fi executate pe o gamă largă de sisteme
de operare.
Cu node.js există o modalitate pentru aplicațiile web de a avea o conexiune în timp real,
în ambele sensuri, unde atât clientul cât și serverul pot iniția comunicarea, permițându -le să facă
schim b de date liber.

20

Figura 1.1 – Node.js server thread

Cu aplicațiile node.js se poate lucra în timp real și există o comunicare bidirecțională,
state-ul este menținut, iar clientul sau serverul poate porni comunicarea. Node.js folosește motorul
JavaScript v8 Runtime, cel care este utilizat de Google Chrome, acesta are si un wrapper peste
motorul JavaScript care face motorul mult mai rapid și procesarea cererilor în cadrul Node.js , de
asemenea, o să devină mult mai rapidă.
Node.js mai are, de ase menea posibilitatea de a utiliza funcșionalități externe sau o
funcșionalitate extinsă, prin utilizarea modulelor personalizate. Aceste module necesită instalarea
lor separată. [5]

3.4. Bootstrap, Vue,js

„Vue.js este un framework reactiv pentru construirea de aplicații web uimitoare. Vue.js
este o bibliotecă JavaScript pentru crearea interfețelor web. Vue.js este un instrument care
utilizează arhitectura MVVM ”.[1]
Una dintre caracteristicile cele mai distinctive ale lui Vue este sistemul discret de
reactivitate. Modelele sunt simple obiecte JavaScript. Când le modificați, vizualizarea este
actualizată .[6]
Programarea reactivă este o paradigmă de programare orientată în jurul fluxurilor de date
și propagarea schimbării. Acea sta înseamnă că ar trebui să fie posibilă exprimarea cu ușurință
a fluxurilor de date statice sau dinamice în limbile de programare utilizate și că modelul de
execuție va propaga automat modificările prin fluxul de date. [7]

21

4. Prezentarea aplicatiei
4.1. Utilizarea aplicației

Aplicația este folosită pentru gestionarea unui depozit de materiale de construcții, gestionarea
logisticii acestuia, pentru a diminua cât mai mult costurile de transport si aferente ale firmei in
cauză.
Este folosită in special de administratorul de depozit. O parte mică din aplicație este folosită și
de către șoferii depozitului, mai exact o mica parte de vizualizare a unei pagini pe un ecran mare
ce conține un calendar al lunii curente pe care sunt afișate transporturile din fieca re zi a lunii cu
numele clientului si localitatea lui, astfel fiindui mai ușor șoferului sa livreze marfa spre clienți
mai efficient, dar și un buton la acțiunea căruia se deschide un modal pe care este afișată o hartă
utilizând unele servicii de la google maps api, cu zoom -ul pe harta Romaniei, iar in partea de jos,
sub hartă un buton cu acțiunea de a încărca in si afișa pe hartă locațiile transporturilor din ziua
curentă. Un alt buton cu acțiunea de a șterge adresele cu locațiile de pe hartă a transportur ilor. Iar
ultimul buton din acest modal are funcționalitatea de a calcula cea mai optimă rută de urmat a
șoferului în funcție de distanță pentru a putea reduce cu cât mai mult costurile de transport.

4.2. Pagina Produselor

Figura 2.6 – interfață grafică pagina administrarea produselor

22
După ce aplicația redirecționează utilizatorul de pe pagina de autentificare, daca
autentificarea a fost cu succes, este afișat doar meniul din stangă ce se poate observa in imagine si
o pagina cu, conținut gol, albă.
În imaginea de mai sus utilizatorul a accesat administrarea produselor unde sunt toate
detaliile legate de produsele din stoc, id -ul produsului, codul, numele, unitatea de masură,
cantitatea, prețul de intrare si prețul(prețul de vânzare),etc.
În acest tabe l de administrare se mai pot observa două câmpuri foarte importante legat de
produse, adica, coloana cu acțiunile ce pot fi realizate pe un produs, respectiv vizualizare, editare,
sau stergere, dar si coloana cu procentaje, care reprezintă procentajul pe f iecare produs in parte in
funcție de prețul de intrare comparat cu prețul de vânzare. Procentajul respectiv semnifică profitul,
sau pierderea in procente a firmei/depozitului pe fiecare produs.
Deasupra tabelului cu produsele din stoc mai sunt două butoane a căror acțiuni sunt la fel
de descriptive, ca cele din coloana cu acțiunile pe produse. Prin activarea butonului verde (Add
new), utilizatorul poate adăuga un produs nou în tabel, adică în baza de date.

4.3. Pagina Clienților

Figura 2.7 – interfață grafică pagina administrarea clienților

În imaginea de mai sus utilizatorul a accesat administrarea clienților. Aici sunt detaliile
despre clienți . Aici nu sunt prea multe acțiuni de făcut, doar editare, ștergere, vizualizare, adăgare
a clienților, sau reîmprospătarea paginii. Clienții mai pot fi adăgați și din administrarea
transporturilor.

23
4.4. Pagina Transporturilor

Figura 2.8 – interfață grafică pagina administrarea transporturilor

Pagina de administrare a transporturilor este puțin mai complexă . La fel ca pe toate paginile
există coloana din tabel cu acțiunile de vizualizare, editare, ștergere inregistrare, si butonul verde
de adaugare. Pe această pagină de administrare mai sunt câteva butoane pentru funcționalități
diferite. Butonul de afișare filtr e (Show filters) este, cum spune si numele lui, un buton cu
funcționalități de filtrare al conținutului din tabel, deoarece sunt foarte multe informații si
îngreuneaza încărcarea si vizualizarea datelor.

Figura 2.9 – modal deschis pagina transporturilor, filtre afișare

În această imagine este un modal deschis pe pagina de transporturi la activarea butonului de filtre,
de aici utilizatorul/administratorul poate alege ce să îi fie afișat sau nu in tabelul transporturilor.
Un alt buton cu funționalitate de filtrare este si butonul de afișare in funcție de data de
livrare a transportului (Show date filters).

24

Figura 3.0 – modal deschis pagina transporturilor, filtre afișare

Figura 3.1 – modal deschis pagina transporturilor, filtre afișare

Și acest buton de filtrare este deschis tot intr -un modal, fiind mult mai ușsor de folosit, mai
rapid, si mult mai estetic, decât schimbarea continuă la pagini pentru orice modificare. Acest buton
are funcționalitate de a filtra înregistrările/transporturile(datele) din tabel in functie de data lunii si
a anului ce sunt introdu -se daca este bifată căsuța respectivă, sau toate inregistrările.
Funcționalitatea de exportare a unei date/înregistrări, sau mai multe într -un fișier
CSV/Excel este realizată printr -un alt buton cu nume la fel de descriptiv (Export selected data to
CSV). Dacă nu este selectată nici -o înregirstrare utilizatorul o sa fie atenționat că nu este nimic
selectat pentru a putea fi exportat.

Figura 3.2 – eroare export csv

25

După selectarea mai multor, s au a unei date/înregistrări din tabel la activarea butonului de
exportare se va deschide căsuța browserului(navigatorului web) de descărcare a fișierului
CSV/Excel.

Figura 3.3 –export csv cu succes

Ultimul buton, dar nu cel mai puțin important de pe această pagină este butonul cu
funcționalitatea de a afișa in tabel transporturile/înregistrările problematice(Get problematic
transports). Adică cele care au fost livrate către clienți pe baza unu aviz existent, dar nu au fost
facturate încă.
Pe această pagină funcționalitatea butonului de adăugare înregistrare nouă este puțin mai
diversificată față de cele de pe paginili cu clienți sau produse. La activarea butonului se deschide
o nouă pagină cu un formular de adăugare înregistrare nouă deoarece sunt mul te informații de
afișat într -un modal.

26

Figura 3.4 – pagina adăugare transport

În prima căsuță este o lisa cu, clienții din baza de date, iar daca este inexistent, sub această
căsuță există un buton cu funcționalitatea de adăugare un client nou direct de aici prin acțiunea lui
deschizându -se un modal cu formularul de adăgare client nou, iar dupa salvarea lui, apariția
instantanee/dinamică in lista cu clienții din baza de date.

Figura 3.5 – modal deschis adăugare client nou

Restul câmpurilor nu sunt aduse de nicăieri sunt doar șiruri de caractere , date de tip numar
sau date de tip Date, acest câmp de introducere al datei de livrare are pusă restricție pentru
selectarea unei date mai vechi decât cea curentă. Datele privind factura sunt aduse dintr -un alt
tabel cu facturile emise, și este intr odusă pe transport doar dacă are factură emisă.

27
Produsele pe un transport sunt adăugate prin acțiunea unui buton (Alege produsele). La
acțiunea acestui buton se deschide un modal în interiorul căruia sunt două tabe le.

Figura 3.6 – modal deschis alegere produse pe transport

În partea stângă este tabelul cu produsele disponibile in stoc, iar in partea dreaptă este un
tabel identic, dar gol, unde apar produsele ce sunt selectate din tabelul cu produsele disponibile ,
dar pe coloane cu, cantitatea produsului este o căsuță goală unde trebuie enumerată cantitatea
produselor ce urmează a fi livrate. Introducerea produselor pe transport/inregistrare se face prin
acțiunea butonului de salvare de sub tabelul din dreapta, da că sunt îndeplinite anumite condiții,
respectiv cantitatea introdusă să nu depașească cantitatea disponibilă .

4.5. Pagina Custodiilor

Figura 3.7 – interfață grafică pagina administrarea custodiilor

Pe această pagină de administrare al custodiilor, la fel ca pe celelalte pagini este afișat un tabel
în care sunt datele din baza de date. Adăugare unei înregistrări/custodie noua se face ca la
transporturi, prin deschiderea altei pagini datorită volumului mare de informații afișat.

28
Și pe această pagină este po sibilă adăugarea de client nou direct de aici si afișarea lui imediată
în lista cu, clienți. Pe această pagină factura nu este adusă din alte tabele, iar data nu are restricții
deoarece este data intrării produsuli/produselor in custodie, însă aici sunt do uă câmpuri pentru
adăugare de produse, unul este pentru adaugarea produselor în custodie, iar celălalt câmp este
pentru a adăuga produsele livrate din respectiva custodie, dacă exista produse în custodie.

Figura 3.8 – pagina adăgare custodie nouă

4.6. Pagin a Dashboard(Calendarului)
La acțiunea butonului din meniu(Dashboard) se va face redirecționarea instantanee către o
pagină cu un calendar inițial cu afișarea pe luna în curs. În interiorul căsuțelor din calendar ce
reprezintă zilele lunii, sunt afișate tra nsporturile pe ziua respectivă.

Figura 3.9 – interfață grafică pagina calendarului

29
Prin acțiunea de clic pe o înregistrare se deschide un modal cu funcționalitatea de editare a
transportului, dacă nu este deja livrat, altfel, dacă este livrat se va deschide un modal cu
vizualizarea transportului/înregistrării.

Figura 4.0 – Modale vizualizare și editare transport din calendar

Pe această pagină aplicația oferă acces aproape complet la administrarea trasporturilor, aproape
complet, deoarece funcționalitatea de ștergere nu exista, si acțiunile referitoare la tabel. Se pot
adăuga transporturi noi prin activarea butonului (Adaugare Transport).
Pentru ca navigarea pe calendar de la o luna la alta mai îndepărtată să fie cât mai rapidă,
comodă si s implă butonul de afișare luni are o astfel de funcționalitate. Prin activarea/clic a
butonului respectiv se deschide un modal cu toate lunile ale anului, iar la selectarea unei luni din
an, calendarul se va muta automat pe luna respectivă. Înregistrarile d in fiecare lună se fac doar la
accesarea unei luni, nu se aduc toate datele de la început pentru a nu îngreuna încărcarea paginii.

Figura 4.1 – modal cu lunile calendarului din anul curent

Alte două butoane foarte importante de pe această pagină sunt ce l de afișare al transporturilor
în funcție de un anumit client si butonul de afișare a unei hărți.

30
La acțiunea butonului de afișare a transporturilo în funcție de un anumit client se deschide un
modal unde trebuie introdus numele clientului. La clic pe but onul (Afiseaza transporturile
aferente clientului) din interiorul modalului se va afișa tot in modal o lista cu lunile anului in care
clientul a avut vreo comanda. Transporturile/ comenzile către clientul respectiv sunt colorate cu
roșu, sau verde. Culoare a roșie simbolizând faptul că transportul/ comanda către client din data
respectivă nu a fost livrată, iar culoarea verde simbolizând faptul că, transportul/comanda a fost
livrată către client. Dacă nu se afișeaza nimic, înseamnă că, clientul nu a avut nic i o comandă.

Figura 4.2 – modal filtru transporturi pe client

La activarea/clic a butonului(Harta drum optim) se deschide un modal pe care este afișată o
hartă utilizând unele servicii de la google maps api, cu zoom -ul pe harta Romaniei, iar in partea
de jos, sub hartă un buton cu acțiunea de a încărca in si afișa pe hartă locațiile transporturilor din
ziua curentă. Un alt buton cu acțiunea de a șterge adresele cu locațiile de pe hartă a transporturilor.

Figura 4.3 – modal cu harta pentru traseul opti m

31
Iar ultimul buton din acest modal are funcționalitatea de a calcula cea mai optimă rută de urmat
a șoferului în funcție de distanță pentru a putea reduce cu cât mai mult costurile de transport.

4.4 – mesaj după acționarea optimizării traseului

Bineînț eles că adresele adăgate sunt și afișate imediat dupa adăgarea lor pe harta, dar și cu
denumirile lor sub harta in secțiunea adreselor alese. După acțiunea butonului de calculare al
rutei/traseului optim, se va afișa un mesaj pe ecran intr -o boxa de alertă , apoi sub hartă in secțiunea
celui mai optim drum iar distanța este afișata sub traseu/rută in kilometri.

Figura 4.5 – modal cu harta dupa acționarea optimizării traseului

32

Concluzii

Aplicația SuperSmartOMS , pe lângă utilitatea ei semnificativă într-un depozit, mai deține
si o soluție foarte bună pentru a obține costuri cât mai mici ale transportului.
La implementare optimizării traseului nu a fost folosit cel întocmai cel mai eficient
algoritm la un volum foarte mare de date, deoarece inițial a fost gândită aplicația pentru o firmă
mică, un depozit mic.
Cu algoritmul curent poate fi optimizat traseul transporturilor din ziua curentă până la 10
adrese , locații, însă pentru o firmă mică este destul de eficient deoarece optimizarea nu durează,
in doar câteva secunde este opținut traseul optim de urmat al transporturilor.
În căutarea rezolvării problemei comis voiajorului (Traveling salesman problem) am
descoperit mai multi algoritmi utili, colonia de furnici, prin algoritmi genetici, si mulți alt ții, la
optmizarea traseului a fost folosit un algoritm forță brută, merge perfect până la zece adrese.
Ceea ce părea în regulă la momentul alegerii, deoarece o face foarte rapid, însă firma mică crește
și bineînteles ca pe viitor aplicația mai poate fi ex tinsă, în special la optimizarea traseului.
Poate fi implementat un algoritm eficient și cu mai mult de 10 adrese, dar și in funcție de
mai multe condiții. În momentul de față traseul optim este calculat în funcție de distanța dintre
adrese. Pe viitor aplicația mai poate fi înbunătățită cu schimbarea algoritmului si adăugarea
optimizării pe lângă distanță și în funcție de durată, de volumul autovehiculului, capacitatea de
transport, de condițiile din trafic, în cazul unui accident sau blocaj rutier, in funcție de meteo,
dacă plouă foarte tare, șoferul trebuie să conducă automat mult mai încet decât normal, sau
poate chiar nu poate pleca la drum, în funcție de condițiile traselui, a carosabilului, ș i asa se tot
găsesc o multitudine de condiții pentru opt imizarea traseului la maxim.
În momentul de față aplicația obține traseul optim doar in funcție de, distanța dintr e
adrese.

33
Bibliografie

1. Olga Filipova – Learning Vue.js 2 -Packt Publishing (2016)
2. Shawn McCool – Laravel Starter -Packt Publishing (2012 )
3. Steve Prettyman – Learn PHP 7_ Object Oriented Modular Programming using HTML5,
CSS3, JavaScript, XML, JSON, and MySQL -Apress (2016)
4. John Dean – Web Programming with HTML5, CSS, and JavaScript -Jones & Bartlett
Publishers (2019)
5. Krishna Rungta – Learn NodeJS in 1 Day_ Complete Node JS Guide with Examples –
Independently published (2016)
6. https://vuejs.org/v2/guide/reactivity.html/
7. https://medium.com/@kevalpatel2106/what -is-reactive -programming –
da37c1611382/
8. https://developer.mozilla.org/en -US/docs/Learn/CSS/Introduction_to_CSS/
9. https://httpd.apache.org/ABOUT_APACHE.html/
10. https://laravel.com/docs/5.7/
11. http://bestlogisticsguide.com/basics/logistics -history/
12. http://bestlogisticsguide.com/basics/what -is-logistics/
13. https://www.artima.com/articles/dci_vision.html/
14. Valenzuela I. Christine, Jones J. Antonia “Estimating the Held -Karp lower bound for the
geometric TSP , European Journal of Operational Research 102(1997) 157 -175
15. http://students.ceid.upatras.gr/~papagel/project/kef5_5.htm/
16. http://students.ceid .upatras.gr/~papagel/project/tspprobl.htm
17. http://students.ceid.upatras.gr/~papagel/project/kef5_6.htm/
18. https://simplicable.com/new/brute -force/