-
Notifications
You must be signed in to change notification settings - Fork 1
/
raport_frontend-backend.html
354 lines (336 loc) · 21.9 KB
/
raport_frontend-backend.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="scholarly.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>raport-TraST</title>
<script src="js/scholarly.min.js"></script>
</head>
<body prefix="schema: http://schema.or">
<header>
<div class="titlu">
<h1> Raport - TraST</h1>
</div>
</header>
<section typeof="sa:AuthorsList">
<h2>Autorii lucrarii</h2>
<div class="autor">
<ul>
<li typeof="sa:ContributorRole" property="schema:author">
<span typeof="schema:Person">
<meta property="schema:givenName" content="Catalin">
<meta property="schema:additionalName" content="Florin">
<meta property="schema:familyName" content="Senegeac">
<span property="schema:name">Senegeac Catalin-Florin</span>
</span>
<ul>
<li property="schema:roleContactPoint" typeof="schema:ContactPoint">
<a href="mailto:[email protected]"
property="schema:email">[email protected]</a>
</li>
<li property="schema:roleContactPoint" typeof="schema:ContactPoint">
<a href="https://www.facebook.com/catalin.senegeac" property="schema:facebook">Facebook</a>
</li>
<li>
<a>tel: 0744649207</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="autor">
<ul>
<li typeof="sa:ContributorRole" property="schema:author">
<span typeof="schema:Person">
<meta property="schema:givenName" content="Radu">
<meta property="schema:additionalName" content="Vasile">
<meta property="schema:familyName" content="Poleuca">
<span property="schema:name">Poleuca Radu-Vasile</span>
</span>
<ul>
<li property="schema:roleContactPoint" typeof="schema:ContactPoint">
<a href="mailto:[email protected]"
property="schema:email">[email protected]</a>
</li>
<li property="schema:roleContactPoint" typeof="schema:ContactPoint">
<a href="https://www.facebook.com/profile.php?id=100006076397894" property="schema:facebook">Facebook</a>
</li>
<li>
<a>tel: 0749390524</a>
</li>
</ul>
</li>
</ul>
</div>
</section>
<section typeof="sa:Affiliations">
<div class="afiliere">
<h2>Afiliere</h2>
<ul>
<li id="sa">
<span typeof="schema:Organization" resource="https://science.ai/">
<span property="schema:name">Universitatea Alexandru Ioan Cuza</span>,
<span property="schema:parentOrganization">
<span typeof="schema:Organization">
<span property="schema:name">Facultatea de informatica</span>
—
<span property="schema:location" typeof="schema:Place">
<span property="schema:address" typeof="schema:PostalAddress">
<span property="schema:addressLocality">Satrada Generala Henri Mathias Berthelot</span>,
<span property="schema:addressRegion">Iasi</span>,
<span property="schema:addressCountry">Roamania</span>
</span>
</span>
</span>
</span>
</span>
</li>
</ul>
</div>
</section>
<h2>1.Aplicatia TraST</h2>
<p>
TraST este o aplicatie construita si bazata pe concepte teoretice ce tin de semnele rutiere. Aplicatia este construita de catre 2 studenti de la informatica din anul II.
Ca si toate aplicatiile web si aceasta are o parte de frontend si un backend. Frontend-ul aplicatiei este lucrat fara niciun fel de framework si se bazeaza pe elemente de
HTML 5. Backend-ul se bazeaza in mare parte pe cod PHP lipsit de librarii ajutatoare dar si de bucati de cod javascript (in putine locuri).
</p>
<h2>2.Functionalitatile esentiale ale aplicatiei</h2>
<p>
TraST este un site functional iar aceste functionalitati pe care le ofera site-ul sunt prezentate mai jos pe capitole. Toate aceste functionalitati se unesc pentru a oferi
utilizatorilor, fie acestia autentificati sau nu, placerea de a naviga pe site. In cele ce urmeaza va voi prezenta aceste functionalitati dupa catogorii.
</p>
<h3>2.1 Modul de autentificare</h3>
<p class="subcapitol">
Pentru a beneficia pe deplin de toate facilitatile pe care le ofera site-ul nostru este necesar sa iti creezi un cont sau in cazul in care detii un cont sa te autentifici cu el. Odata ce esti
inregistrat pe site iti poti monitoriza permanent activitatea. Vei putea vedea constant ce progres ai pe site-ul nostru si totodata vei putea vedea care capitole le-ai parcurs pana in momentul actual.
Site-ul ofera aceasta functionalitate de a te inregistra. In primul rand este nevoie sa apesi pe butonul "AUTENTIFICARE" iar mai apoi pe butonul "Register" in cazul in care nu aveti un cont deja.
Pentru a a-ti face un cont trebuie doar sa introduci cateva date despre tine cum ar fi numele tau, un mail si parola, iar toate acestea se salveaza pe server in baza noastra de date. Atunci cand esti conectat la cont
site-ul va stii acest lucru si iti va monitoriza actiunile pe site. Daca iti faci griji de siguranta parolei pe care o introduci, ei bine, poti sa stai linistit deoarece parola la momentul inregistrarii este criptata cu functia hash md5. Cei care au acces
la baza de date pot accesa parola criptata ceea ce va ofera siguranta datelor.
</p>
<p class="subcapitol">
Pe pagina principala a site-ului in partea de jos se poate observa si numarul de utilizatori online in momentul de fata si totodata numarul total de utilizatori inregistrati. Este o functionalitate placuta adusa de catre site deoarece vei stii mereu cati utilizatori
sunteti online in momentul de fata, practic vei stii cati oameni navigheaza pe pagina in acelasi timp cu tine.
</p>
<h3>2.2 Monitorizarea progresului</h3>
<p class="subcapitol">
Odata ce esti inregistrat doresti sa stii la orice pas progresul tau. Ei bine site-ul nostru ofera o astfel de functionalitate asadar daca accesezi pagina noastra dupa o perioada indelungata de timp
vei vedea capitolele parcurse in trecut si vei stii care dintre acestea ti-au mai ramas. Aceasta functionalitate este utila in cazul in care esti inregistrat pe site, in caz negativ site-ul nu va retine
aspectele despre progres. Vei fi atentionat la fiecare capitol ca pentru a inregistra un progres este nevoie de autentificare asadar cel mai bine este sa faci acest lucru. Aveti pe pagina principala o vara care se incarca
si se coloreaza cu verde, oferind astfel o senzatie placuta utilizatorilor, atunci cand parcurgeti cate un capitol. De asemenea aveti cate o astfel de bara si la indicatoarele rutiere. Pentru codul rutier, in schimb, la finalizarea capitolelor
in dreptul numelui capitolului va aparea semnul bifat.
</p>
<p class="subcapitol">
In spatele acestor functionalitati care ofera senzatia de animatie, de fapt, dupa terminarea unui capitol se salveaza in baza de date procentajul capitolului din totalul stabilit. In cazul acesta odata ce ai parcurs un capitol se poate spune ca ai parcurs x% din total.
Se actualizeaza acest procentaj si se adauga de fiecare data la acea bara de pe pagina principala care atentioneaza utilizatorul cat la suta mai are pana sa termine de parcus tot site-ul nostru.
</p>
<p class="subcapitol">
TraST ofera si un clasament a utilizatorilor. Deci odata ce parcurgi mai mult vei putea aparea in clasamentul site-ului. Acest lucru se face interogand baza de date si afland numele utilizatorilor care au cel mai mare punctaj. Clasamentul se poate schimba in functie de
progresul inregistrat. Oricand se pot schimba persoanele aflate pe primele locuri in clasament. Totodata se poate descarca oricand un fisier csv cu clasamentul actualizat.
</p>
<h3>2.3 Sistemul de comentarii</h3>
<p class="subcapitol">
Daca accesati paginile dedicate semneleor rutiere la finalul fiecarui capitol de semne veti putea observa o sectiune dedicata persoanelor care doresc sa lase un comentariu pentru categoria respectiva. Acest lucru este util in cazul in care aveti o intrebare referitoare la un semn anume.
Toti utilizatorii nostrii au dreptul la aceasta functionalitate. Cei care nu sunt inregistrati/conectati pe site pot lasa un comentariu doar ca numele lor vor fi "Anonimul" in timp ce un utilizator conectat la contul sau TraSt va avea drept nume la comentarii numele din baza de date a contului sau. Pe langa nume si comentariile lasate,
site-ul afiseaza si ora si data in care utilizatorul a lasat comentariul.
</p>
<p class="subcapitol">
Acest sitem de comentarii este creat astfel incat de fiecare data cand un utilizator trimite un comentariu acesta sa fie salvat in baza noastra de date. Pe langa comentariul propriu zis se va stoca in baza de date numele, ora, data si categoria de semne unde respectivul a lasat comentariul. Comentariile pot fi sterse doar de catre administrator asa ca aveti grija
la ce spuneti pe site, uneori poate o sa regretati mai tarziu.
</p>
<h3>2.4 Sistemul de chestionare</h3>
<p class="subcapitol">
La final dupa ce ati parcurs toata materia important ar fi sa apelati si la chestionarul special conceput pentru aprofundarea aspectelor teoretice prezentate pe site. Am spus la final deoarece este important sa nu va apucati de acesta pana nu sunteti siguri ca ati inteles partea teoretica.
Este usor de inteles cum functioneaza, aveti 37 de intrebari cu trei variante de raspuns dar cu raspuns unic. Pentru a raspunde la o intrebare este suficient sa alegi una din variante (care crezi tu ca e corecta) iar imediat dupa o sa va apara in dreptul raspunsului daca acesta este sau nu raspunsul corect.
Poti sa te intorci la o intrebare anterioara daca doresti sa mai vizualizezi o data variantele de raspuns si corectitudinea acestora. Acest chestionar nu este unul clasic pentru scolile de soferi ci este unul dedicat aprofundarii si recapitularii materialelor teoretice prezentate.
</p>
<p class="subcapitol">
In spatele acestui chestionar de afla de fapt o baza de date in care sunt stocate 37 de intrebari. De fiecare data ordinea intrebarilor este aceasi pentru fiecare utilizator in parte. Cand se apasa pe butonul de "Trimite raspuns" se va incarca prin intermediul unor scripturi php urmatoarea intrebare din baza de date. Atunci cand vom apasa pe unul din raspunsurile A, B sau C se va apela baza de date sa ne ofere
raspunsul corect pentru intrebarea corecta iar in functie de acest raspuns in dreptul raspunsului ales va aparea corectitudinea acestuia.
</p>
<h3>2.5 Managementul paginii </h3>
<p class="subcapitol">
Administratorul paginii are drepturi suplimentare fata de utilizatorii obisnuiti. Acesta are dreptul sa editeze site-ul, sa adauge continut nou sua sa stearga comentariile din baza de date.
</p>
<h2>3.Progresul proiectului</h2>
<p>
Proiectul a progresat treptat. Ambii participati ce s-au ocupat cu dezvoltarea acestuia au contribuit atat la partea de front-end cat si la partea de back-end in mod egal. Proiectul a fost realizat prin munca in echipa, comunicare clara si suport moral la intalnirea dificultatilor.
In cele ce urmeaza voi prezenta contributiile fiecarui membru atat pe partea de front-end cat si pe partea de back-end
</p>
<h3>1.Front-end</h3>
<h3>a)Poleuca Radu-Vasile</h3>
<p class="subcapitol">
Pe partea de front-end s-a ocupat de pagina principala, de paginile specifice codului rutier si de pagina specifica chestionarului. In special a lucrat si la partea ce face site-ul responsive pe fiecare dintre paginile web a site-ului.
</p>
<h3>b)Senegeac Catalin-Florin</h3>
<p class="subcapitol">
Pe partea de front-end s-a ocupat de paginile ce tin de semnele rutiere, de pagina pentru autentificare si pagina pentru inregistrare. A schimbat amanunte si din elementele paginii dedicate chestionarului si a realizat interfata de lasat comentarii. A realizat si cele 2 rapoarte (cel cu ghidul aplicatiei si acesta).
</p>
<h3>2.Back-end</h3>
<h3>a)Poleuca Radu-Vasile</h3>
<p class="subcapitol">
Pe partea de back-end a lucrat la sistemul de login/register, la monitorizarea continua a progresului, la clasament si utilizatori online din numarul de utilizatori inregistrati.
</p>
<h3>b)Senegeac Catalin-Florin</h3>
<p class="subcapitol">
Pe partea de back-end a lucrat la sistemul de comentarii si la sistemul de chestionare.
</p>
<p>
Dupa cm spuneam, proiectul a progresat treptat. Fiecare problema intalnita a fost rezolvata fie de cel responsabil pentru acel task, fie impreuna in cazul in care problema era una mai serioasa.
Proiectul a progresat mai repede in ultimele saptamani mai ales de cand am simtit ca se apropie data de predare.
</p>
<h2>4.Motivatie</h2>
<h3>4.1 De ce am ales acest proiect?</h3>
<p class="subcapitol">
TraST la prima vedere pare a fi un site dedicat adolescentilor care doresc sa urmeze un curs/tutorial cu si despre semnele rutiere. Nu doar ca pare ci chiar asta si este (dar evident, daca in mare parte sunt adolescenti asta nu inseamna ca persoanele adulte nu vor fi interesate de acest site). Avand in vedere ca am trecut, atat eu cat si colegul meu prin
perioada aceasta de adolescenta, in care umblam pentru a obtine permisul auto. Am fost de comun acord ca acest proiect ne va starni amintiri ale acelor timpuri si totodata avem informatii actuale ale codului rutier si de ce nu sa vedem in atat de putin timp cate
reguli s-au schimbat. Pe scurt, eram convinsi ca acest proiect (aceasta tematica) ne va motiva sa muncim sa-l finalizam.
</p>
<h3>4.2 De ce acest aspect al site-ului?</h3>
<p class="subcapitol">
Dupa cum am spus-o de-a lungul raportului sau in ghidul aplicatiei noi am dorit ca site-ul nostru sa fie usor de inteles de catre orice utilizator care acceseaza pagina. Structura este una simpla iar site-ul se poate parcurge cap coada usor si repede. Avand in vedere ca nu cere inregistrarea obligatorie pe site asta face site-ul sa fie usor de navigat chiar si de catre o persoana in
varsta pe care nu-l intereseaza sa aibe un cont pe site ci doreste doar sa se informeze ce e nou in raport cu semnele rutiere si codul rutier.
</p>
<p class="subcapitol">
Culorile folosite sunt calde si placute. Nuantele nu sunt unele care sa "sara in ochi" iar modul prin care comunica acestea este unul pasnic si relaxant nu dauneaza ochiului sau provoaca discomfort.
Pe scurt TraST doreste a fi un site in favoarea utilizatorului prin acest aspect. Nu am folosit prea multe culori iar cele alese se potrivesc tematicii.
</p>
<h2>
5.Sistemul de management
</h2>
<p>
Administratorul site-ului va avea un cont special recunoscut de catre aplicatia noastra. Acesta va fi capabil sa acceseze o noua pagina numita "Admin". Accesul la aceasta pagina se poate face doar de catre detinatorul acelui cont de administrator. Odata accesata pagina pune la dispozitia administratorului o serie de informatii despre utilizatorii inregistrati pe site.
Totodata pune la indemana administratorului si o varietate de functionalitati. Administratorul poate vedea ce utilizatori sunt online dintre cei care sunt inregistrati, de asemenea poate sa stearga un utilizator intoducand id-ul acestuia si confirmand apasand butonul stergere, poate sa trimita un email unuia dintre utiliatori si totodata poate vizualiza comentariile pe capitole lasate de
catre utilizatorii inregistrati dar si de cei care nu sunt inregistrati pentru a sterge aceste comentarii in cazul in care acestea nu sunt potrivite sau provoaca discomfort.
</p>
<div class="endNotes">
<section role="doc-endnotes">
<h2>Referinte</h2>
<ol>
<li typeof="schema:WebPage" role="doc-biblioentry"
resource="https://developer.mozilla.org/en-US/docs/Web/CSS"
property="schema:citation" class="some-id">
<cite property="schema:name">
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS">Cascading Style Sheets (CSS)</a>
</cite>,
de <span property="schema:author" typeof="schema:Person">
<span property="schema:site">Mozilla</span>
</span>; publicat in
<time property="schema:datePublished" datatype="xsd:gYear"
datetime="2014">2005</time>
<span property="schema:potentialAction" typeof="schema:ReadAction">
<meta property="schema:actionStatus" content="CompletedActionStatus">
</span>.
</li>
<li typeof="schema:WebPage" role="doc-biblioentry"
resource="http://semver.org/"
property="schema:citation" class="some-id">
<cite property="schema:name">
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS">Personal Home Page(PHP)</a>
</cite>,
de <span property="schema:author" typeof="schema:Person">
<span property="schema:site">Wikipedia</span>
</span>; ultima actulizare in
<time property="schema:datePublished" datatype="xsd:gYear"
datetime="2014">2020</time>
<span property="schema:potentialAction" typeof="schema:ReadAction">
<meta property="schema:actionStatus" content="CompletedActionStatus">
<time property="schema:endTime" datatype="xsd:date"
datetime="2020-06-02">02 Jun 2020</time>
</span>.
</li>
<li typeof="schema:WebPage" role="doc-biblioentry"
resource="https://www.w3schools.com/howto/howto_js_slideshow.asp"
property="schema:citation" class="some-id">
<cite property="schema:name">
<a href="https://www.w3schools.com/howto/howto_js_slideshow.asp">Slideshow</a>
</cite>,
de <span property="schema:author" typeof="schema:Person">
<span property="schema:site">W3schools</span>
</li>
<li typeof="schema:WebPage" role="doc-biblioentry"
resource="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav"
property="schema:citation" class="some-id">
<cite property="schema:name">
<a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav">Topnav</a>
</cite>,
de <span property="schema:author" typeof="schema:Person">
<span property="schema:site">Topnav</span>
</li>
<li typeof="schema:WebPage" role="doc-biblioentry"
resource="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav"
property="schema:citation" class="some-id">
<cite property="schema:name">
<a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav">Topnav</a>
</cite>,
de <span property="schema:author" typeof="schema:Person">
<span property="schema:site">W3schools</span>
</li>
<li typeof="schema:WebPage" role="doc-biblioentry"
resource="https://www.youtube.com/watch?v=LXQfEFEfFcM&t=626s"
property="schema:citation" class="some-id">
<cite property="schema:name">
<a href="https://www.youtube.com/watch?v=LXQfEFEfFcM&t=626s">Email verification</a>
</cite>,
de <span property="schema:author" typeof="schema:Youtube">
<span property="schema:site">Youtube</span>
</li>
<li typeof="schema:WebPage" role="doc-biblioentry"
resource="https://www.youtube.com/watch?v=wUkKCMEYj9M&t=1957s"
property="schema:citation" class="some-id">
<cite property="schema:name">
<a href="https://www.youtube.com/watch?v=wUkKCMEYj9M&t=1957s">Forgot password</a>
</cite>,
de <span property="schema:author" typeof="schema:Youtube">
<span property="schema:site">Youtube</span>
</li>
<li typeof="schema:WebPage" role="doc-biblioentry"
resource="https://www.fdmdigital.co.uk/formidable-forms-front-end-csv/"
property="schema:citation" class="some-id">
<cite property="schema:name">
<a href="https://www.fdmdigital.co.uk/formidable-forms-front-end-csv/">CSV</a>
</cite>,
de <span property="schema:author" typeof="schema:Person">
<span property="schema:site">fdmdigital.co.uk</span>
</li>
<li typeof="schema:WebPage" role="doc-biblioentry"
resource="https://www.php.net/manual/en/functions.arguments.php#functions.arguments.type-declaration.strict"
property="schema:citation" class="some-id">
<cite property="schema:name">
<a href="https://www.php.net/manual/en/functions.arguments.php#functions.arguments.type-declaration.strict">Function arguments (in PHP)</a>
</cite>.
</li>
<li typeof="schema:WebPage" role="doc-biblioentry"
resource="http://toykeeper.net/soapbox/php_problems/"
property="schema:citation" class="some-id">
<cite property="schema:name">
<a href="http://toykeeper.net/soapbox/php_problems/">Problems with PHP</a>
</cite>, retrived
<time property="schema:datePublished" datatype="xsd:gYear"
datetime="2014">2010</time>
<span property="schema:potentialAction" typeof="schema:ReadAction">
<meta property="schema:actionStatus" content="CompletedActionStatus">
<time property="schema:endTime" datatype="xsd:date"
datetime="2010-12-20">12 Dec 2010</time>
</span>.
</li>
</ol>
</section>
<section role="doc-endnotes">
<h2>Note finale</h2>
<ol>
<li role="doc-endnote">
Site-ul este un proiect realizat de catre doi studenti de la Facultatea de Informatica din Iasi.
</li>
<li role="doc-endnote">
Toate cunostintele necesare realizarii site-ului sunt luate din cursuri, laboratoare si surse de pe internet. Cateva dintre referinte sunt atasate chiar mai sus.
</li>
<li role="doc-endnote">
Ultima actualizare: duminica 07.06.2020.
</li>
</ol>
</section>
</div>
</body>
</html>