PREZENTAREA ŞI IMPLEMENTAREA APLICAŢIEI

INFORMATICE

1. Interfaţa cu utilizatorul – prezentare generală

Interfaţa cu utilizatorul se va implementa în limbajul HTML, utilizând

limbajele CSS pentru a defini elementele grafice, stabilirea standardelor de

layout pentru un conţinut unitar şi JavaScript pentru a-i îmbogăţi

funcţionalitatea.

Pentru elementele dinamice ale interfeţei, porţiuni din codul HTML

vor fi generate cu ajutorul limbajului PHP.

Una din regulile în conceperea unei interfeţe utilizator pentru un

produs software este următoarea: o interfaţă utilizator este bine scrisă atunci

când programul se comportă exact aşa cum se aşteaptă utilizatorii săi.

Pentru a asigura un design orientat către utilizator au fost luate în

calcul posibilităţile de navigare prin site, accesul direct şi rapid la informaţii,

asigurarea simplităţii, stabilitatea design-ului şi nu în ultimul rând crearea

unui conţinut accesibil.

Site-ul web dezvoltat este un magazin virtual care se ocupă cu

vânzarea produselor electonice. În (figura 1) este prezentată prima pagină a

site-ului (homepage). Este foarte important ca utilizatorul să aibă acces

direct în cât mai multe locuri din site încă din prima pagină.

Secţiunile din această pagină sunt: Prima pagină, Categorii, Căutare,

Noutăţi, Login. Aranjarea informaţiilor pe site a fost făcută cu ajutorul unor

69

module care se îşi adaptează automat dimensiunile în funcţie de informaţiile

pe care le conţin.

Figura 1

70

Trecerea de la o pagină la alta se face prin transmiterea denumirii

paginii ca variabilă prin GET sau POST paginii şablon index.php.

Modificările se vor observa doar în componenta conţinut.

Componentele interfeţei

În continuare sunt detaliate componentele interfeţei cu utilizatorul.

Antet

Antetul conţine un element şi anume sigla site-ului.

Conţinut

În secţiunea conţinut a interfeţei vor fi afişate informaţiile modulelor

portalului, în funcţie de selecţia făcută de utilizator cu ajutorul meniului.

Sidebar

Reprezintă o zonă în care sunt încărcate diferite module esenţiale, ce

îmbogăţesc funcţionalitatea aplicaţiei, cum sunt:

- Zona de căutare -conţine 2 câmpuri, o listă cu valorile „Firma", „Produse"

şi un câmp de căutare produse.

- Zona de log-in/înscriere

- Zona de ştiri

Subsol

Conţine un meniu destinat în special pentru Administratori, cu link-uri către

diverse rubrici ale site-ului, iar în partea inferoară cu informaţii legate de

copyright, ş.a.

71

2. Subsistemul de meniuri

Paginile site-ului pot fi accesate cu ajutorul meniurilor, prezentate sub

forma unor bare orizontale, deasupra modulelor de conţinut.

Prin intermediul butoanelor de meniu, utilizatorul poate vizita diverse

secţiuni ale site-ului.

Setul de butoane al Meniului principal, este următorul:

NR. Buton Actiune

1. Prima Pagină Trimitere către prima pagină

2. Canon Trimitere la produsele Canon

3. HP Trimitere la produsele HP

4. Contact Contactul cu firma Stil Company

3. Subsistemul membership

Interfaţa portalului conţine legături către toate componentele acestui

subsistem, lucru care se poate observa în (figura 1)

Componentele subsistemului sunt:

Modulul de înscriere :

• înscriere utilizator

Modulul de autentificare :

•autentificare utilizator

72

4. Subsistemul de creare cont utilizator

Pentru a crea un cont nou, utilizatorul trebuie să acceseze link-ul

„crează-ti cont pentru comenzi", şi se încarcă formularul aferent. (figura 2)

Figura 2

Caracteristici

-Câmpul "Parola" trebuie să fie mascat cu un character de înlocuire (*), iar

textul introdus este criptat la stocarea în baza de date

-Câmpul "verificare parola" trebuie să fie mascat cu un character de

înlocuire (*)

-Câmupul “email” trebuie să fie completat cu o adresă valabilă

73

Comportament

În cazul în care datele sunt introduse corect, se apasă butonul

“adaugă” care lanseză modulul de prelucrare care stochează toate datele în

baza de date.

Reguli de validare

-Nu pot exista două nume de utilizator identice

-Câmpurile „Parola" şi "verificare parola" trebuie sa coincidă.

-Adresa de email trebuie să aibă format standard

-Toate câmpurile marcate cu asterisc (*), trebuie să fie completate înainte de

a trimite cererea, în caz contrar, se afişează mesaj de eroare şi se impune

corectarea greşelii.

Comportament

La apăsarea butonului "adaugă", modulul de înscriere este executat şi toate

datele colectate sunt prelucrate şi apoi stocate în baza de date, în tabelele

corespunzătoare.

Înscrierea presupune o activitate mai laborioasă pentru modulul de înscriere:

- Se deschide tabela utilizatori

- Se generează un "id" unic noului utilizator care este ales drept cheie

primară

- Se stochează numele utilizatorului

- Parola se criptează utilizând algoritmul de criptare MD5

-Se afişează mesaj de succes dacă operaţiile s-au desfăşurat în parametrii

normali sau un mesaj ce descrie eroarea survenită.

74

În procesul de înscriere, datorită normalizării, toate datele introduse

respectă regulile de integritate.

Autentificare Utilizator

Pentru a se putea autentifica în sistem, utilizatorul trebuie să

folosească formularul de „Login Box". (figura 3)

Acesta se află în prima pagină a site-ului şi conţine următoarele

elemente:

-două câmpuri text (adresă de email, respectiv parola);

-un buton de login care la apăsare directionează datele către server;

Figura 3

Caracteristici

-Câmpul "Parola" trebuie să fie mascat cu un character de înlocuire (*).

Comportament

La apăsarea butonului „Login", modulul de autentificare este executat şi

toate datele colectate sunt comparate cu datele existente în baza de date, în

tabelele corespunzătoare.

75

Reguli de validare

-Câmpul "email" trebuie să conţină caractere alfanumerice şi numerice;

-Conţinutul câmpului „Parola" este criptat înainte de a fi comparat cu parola

reţinută în baza de date, aferentă numelui de utilizator oferit.

După ce autentificarea s-a realizat cu succes, în bara de meniu apare

un mesaj de întâmpinare şi butonul de Log-out.(figura 4)

Figura 4

76

5. Subsistemul de căutare a produselor

Formularul se află sub bara de meniu şi este compus din următoarele

elemente: (figurile 5, 6, 7)

- o lista din care utizatorii vor putea selecta zona de unde acceptă

rezultatele.

- sunt trei obţiuni: Marcă, Model, Preţ Maxim ;

- un buton de lansare în execuţie a căutării

Figura 5

Figura 6

77

Figura 7

La apăsarea butonului căutare, se execută modulul de căutare şi se

afişează rezultatele în funcţie de opţiunea aleasă din listă. Rezultatele pot

apoi fi ajustate folosind filtrele. (figura 8)

Figura 8

78

6. Sibsistemul de adăugare s produselor în coşul de cumpărături

La găsirea unui produs asupra căruia utilizatorul doreşte detalii, tot

ceea ce trebuie să facă este să execute click pe link-ul „Detalii", sau dacă

doreşte să adăuge un produs în coşul de cumpărături, click pe butonul

"ADD" sau "adaugă în coş". (figura 9)

Figura 9

79

7. Subsistemul cos de cumpărături

La adăugarea unui produs în coş trebuie specificată cantitatea de

produse pe care utilizatorul doreşte să o cumpere. (figura 10)

Dacă utilizatorul doreşte sa modifice cantitatea, se apăsă butonului

"editează".

Dacă se doreste renunţarea produsului se apasă butonul "şterge".

Figura 10

80

8. Subsistemul de trimitere comandă

În momentul în care utilizatorul este hotărât asupra produsului pe care

doreşte să-l comande, apasă butonul "Trimite comanda" şi se afişează

formularul de contact. (figura 11)

Figura 11

81

Toate câmpurile marcate cu asterisc (*), trebuie să fie completate

înainte de a trimite cererea, în caz contrar, se afişează mesaj de eroare şi se

impune corectarea greşelii.

După completarea formularului se apasă pe butonul "trimite",

comanda ajunge la unul dintre reprezentanţii de vânzări a firmei Stil

Company. (figura 11)

Factura proformă este genrată automat la adăugarea produsului în coşul de

cumpărături şi are ca scop informarea utilizatorului despre preţul produselor.

(figura 12)

Figura 12

82

9. Subsistemul calculator rate

Acest sistem oferă utilizatorilor să-şi cumpere produse în rate.

Dacă se doreşte achitarea unui avans, se selectează din listă valoarea dorită.

Ratele calculate includ toate taxele Raiffeisen Bank şi se achită la orice

filiala Raiffeisen Bank. (figura 13)

Figura 13

83

10. Subsistemul Noutăţi

Este situat în partea de jos a conţinutului în pagina principala.

Rolul acestui subsistem este de a transmite utilizatorilor ultimule ştiri

din domenui. (figura 14)

Figura 14

84