1. FloriX
Pică Andreea,Corduneanu Riana
Facultatea de Informatica,Universitatea Alexandru Ioan Cuza,Iasi
roxana.pica@students.info.uaic.ro
riana.corduneanu@students.info.uaic.ro
Abstract. Aplicatie Web de management al resurselor dintr-o florarie care ofera
utilizatorilor N tipuri de buchete. Fiecarui buchet i se vor atasa proprietati pre-
cum: sortiment de flori, numar de fire, pret, comentarii etc. Dupa autentificare,
utilizatorul va putea alege -- eventual, in urma cautarii -- unul sau mai multe
buchete pe care sa le comande. Aplicatia va simula expedierea buchetelor la o
adresa stabilita.
Cuvinte-cheie: florarie, buchete, comanda.
1 Introducere
FloriX este o aplicatie Web pentru managementul unei florarii online. Un utiliza-
tor poate sa vizulaizeze produsele disponibile. In cazul in care doreste sa comande,
trebuie sa se autentifice (in cazul in care are deja un cont creat) sau in caz contrar
trebuie sa-si creeze un cont.
Dupa autentificare utilizatorul are posibilitatea de a alege produsele dorite , avand
optiunea de a selecta dimensiunea si cantitatea dorite .Ulterior userul poate accesa
pagina “Cosul Meu” in care vor fi afisate produsele alese si un formular in care
trebuie sa completeze adresa si modalitatea de livrare a comenzii. Aici utilizatorul are
optiunea de a trimite sau anula comanda.
Pe pagina “Informatii” se afla toate detaliile cu privire la modalitatea de cumparare
si livrare, intrebari frecvente ,termini si conditii. In cazul in care userul are nelamuriri
poate accesa pagina “Contact” in care va completa un formular prin care poate adresa
orice intrebare. Informatiile completate de user in formular vor fi trimise administra-
torului florariei pe E-mail.
Dupa ce a trimis comanda, utilizatorul se poate deconecta apasand butonul “Log
out” din bara de navigare.
2 Arhitectura aplicatiei
Aplicatia noastra este impartita in mai mult module:
/CSS3
/JS
2. /IMG
Primul nivel-PHP & HTML5
2.1 /CSS3
Cascading Style Sheets (CSS) este un limbaj pentru stiluri folosit pentru a descrie
prezentarea (aspectul si formatarea) unui document scris într-un limbaj de marcare.
Aplicatia sa cea mai cunoscuta este realizarea stilului paginilor web scrise în HTML
si XHTML, dar limbajul poate fi aplicat oricarui tip de document XML.
CSS specifica o schema prioritara pentru a determina care reguli de stil se aplica
daca doua sau mai multe reguli se suprapun pentru un element particular. În acest asa-
numit cascade, prioritatile sau greutatea sunt determinate si atribuite regulilor, astfel
încât rezultatele sunt predictibile.
In acest modul am stocat toate fiserele de tip .css aferente proiectului.
2.2 /JS
Javascript este un limbaj de programare care face posibil ca paginile web sa fie
mai interactive. Scripturile Javascript sunt introduse in pagina HTML si sunt inter-
pretate si executate de browser. Javascript poate fi considerat o unealta foarte buna
daca doriti sa controlati continutul paginilor in functie de data, ora, sistemul de
operare sau browserul utilizatorilor, sa faceti site-uri interactive, care sa comunice cu
vizitatorii, site-uri dinamice, sa validati datele primite din formulare, dar nu numai
atat, acestea fiind doar cateva din posibilitatile pe care le ofera acest limbaj.
In acest modul am stocat toate fisierele de tip .js aferente proiectului.
2.3 /IMG
Toate imaginile folosite au fost salvate in acest modul.
2.4 Primul nivel-PHP & HTML5
HTML este acronimul de la HyperText Markup Language şi reprezintă un limbaj
pentru crearea şi marcarea (formatare, aranjare) unui document astfel încât să poată fi
publicat pe World Wide Web şi vizualizat cu ajutorul unui browser.
Termenul de hypertext desemnează un material sub formă de text şi imagine, inter-
conectat într-o manieră complexă, nesecvenţială, în care utilizatorul poate naviga,
căuta informaţii referitoare la un obiect. Hypertext-ul trebuie interpretat ca un text
care semnalează o legătură la o altă informaţie web, de obicei un alt document web, şi
este identificat prin subliniere sau culoare, pentru a-l deosebi de textul simplu.
Hypermedia este un termen aproape sinonim celui de hypertext, singura deosebire
fiind faptul că subliniază prezenţa şi a unor elemente care nu sunt de tip text, cum ar fi
animaţii, secvenţe sonore sau secvenţe video. HTML se utilizează din 1990, cu-
noscând câteva versiuni de dezvoltare, fiecare dintre acestea îmbunătăţind perfor-
3. manţele limbajului. Ultima variantă (la data elaborării acestui ghid) este HTML 5 ce
include facilităţile versiunilor anterioare (tag-uri de marcare, tag-uri pentru
hiperlegături, antete, paragrafe, liste, elemente de meniu, formatare caractere, imagini
in-line şi tag-uri pentru schimbul de date dinamic între utilizatori), adăugând facilităţi
şi extensii pentru numere, tabele şi elemente de control.
PHP este limbajul ideal pentru construirea de pagini web dinamice. Este usor de
invatat, open-source, poate fi rulat pe mai multe platforme si se poate conecta la mai
multe tipuri de baze de date. Cel mai important aspect al limbajului este insa posibili-
tatea de a fi imbricat cu cod HTML. Putem astfel crea pagini HTML statice si din loc
in loc, acolo unde este nevoie, sa introducem dinamism cu ajutorul PHP.
In acest modul am stocat toate fisierele de tip .html si .php folosite la constuirea
acestui sit Web.
3 Tehnologii utilizate
Pentru partea de client am ales:
HTML5 (HyperText Markup Language)- pentru structurarea și prezentarea
conținutului paginilor
CSS3 (Cascading Style Sheets) - pentru formatarea elementelor unui
document HTML
JavaScript – limbaj pentru introducerea unor funcționalități în paginile web,
codul Javascript din fiind rulat de către browser.
AJAX poate fi utilizat in mai multe tipuri de aplicatii care pot fi incluse
intr-o pagina web, dar cel mai folosit este pentru navigare de la un continut la
altul al site-ului. Aceasta navigare se face de obicei prin link-uri, acestea
contin o adresa URL catre pagina/continutul respectiv. Metoda standard de
transmitere a datelor asresei URL din link-uri la server este GET.
Pentru partea de server:
PHP (Php: Hypertext Preprocessor) - limbaj de programare pe partea de
server folosit la dezvoltarea aplicatiilor Web
XML (Extensible Markup Language)- limbaj de marcare folosit pentru
stocarea produselor si a comenzilor utilizatorilor
SESSION- reprezinta o modalitate prin care PHP retine informatii de la o
pagina la alta. Odata cu initializarea unei sesiuni, utilizatorul poate pastra
anumite variabile chiar daca in continuare viziteaza si alte pagini ale site-
ului. In principiu informatia se pastreaza pana la inchiderea browser-ului, sau
pana cand utilizatorul distruge in mod intentionat sesiunea curenta.
Pentru memorarea datelor:
vom avea o baza de date SQL pe serverul fenrir al facultatii ,care va memora
toate datele necesare autentificarii utilizatorilor
4. 4 Detalii de implementare
Aplicatia noastra are diverse functionalitati. Le voi prezenta modul de functionare
si design-ul lor in functie de pagina pe care ne aflam:
4.1 Home
Pe pagina principala avem o descriere generala a florariei. Cu ajutorul barei de
navigatie putem alege foarte usor si intuitiv pagina pe care dorim sa mergem. Tot in
bara de navigatie va aparea in partea dreapta numele userului logat si butonul de “Log
out”.
4.2 Produse
Aici avem in partea stanga un meniu cu toate categoriile de flori disponibile . In
partea dreapta avem o galerie de poze cu categoriile de flori existente.
Daca alegem o categorie si un anumit tip din partea stanga (de exemplu Trandafiri
albi), ne va afisa toate produsele din categoria si de tipul respectiv existente in XML.
Aceasta functionalitate a fost implementata cu ajutorul AJAX. In momentul in care
utilizatorul alege ce tip de flori doreste sa vada, cu ajutorul “function
loadXMLDoc(url,categorie,tip)” vom cauta in XML-ul in care avem produsele toate
elementele de tipul si categoria dorita si le vom pune in taguri HTML(ex: daca vom
selecta Garoafe rosii, vor aparea toate speciile de garoafe rosii). Codul de mai jos este
o parte din javascriptul care verifica in XML-ul cu produse, cele care sunt din catego-
ria si tipul cerut :
if (arr_flori[i].getAttribute("categorie") === categorie
&& arr_flori[i].getAttribute("tip") ===tip) {
var img_den=
arr_flori[i].getElementsByTagName("specie")[0].childNodes
[0].nodeValue;
html_img += "<div class='imgwrap'><a
onclick="loadProductXML ('flori.xml','" + img_den +
"');"><img class='imgdinam' src='";
var img_url =
arr_flori[i].getElementsByTagName("image")[0].childNodes[
0].nodeValue;
html_img += img_url + "' /></a><p>" + img_den +
"</p></div>";
} }
5. Tot cu ajutorul AJAX, daca selectam o poza din galeria de poze de pe pagina ini-
tiala de produse, se vor afisa toate tipurile de flori din acea categorie(ex: daca selec-
tam Trandafiri, vor aparea toate tipurile de trandafiri si la fiecare toate speciile).
Cu ajutorul functiei “function loadProductXML(url,den)” vom afisa in taguri
HTML cu ajutorul AJAX un singur produs(cel selectat de client).
Aici va aprea categoria, tipul poza,specia si descriera produsului ales. Utilizatorul
are optiunea de a-si alege dimensiunea buchetului si cantitatea dorita pentru fiecare
produs.
Alta functionalitate este aceea de trimitere a comenzii. Daca produsul vizualizat es-
te cel dorit, utilizatorul trebuie sa adauge butonul “Adauga in cos”. In acel moment
noi facem append intr-un XML(cu ajutorul unui script php) la denumirea, pretul
,dimensiunea si cantitatea dorita din acel produs (la autentificare va fi creat un XML
cu numele utilizatorului respectiv care contine doar tagul radacina; in acest XML vom
face append pentru fiecare produs comandat; la log out XML-ul va fi sters automat).
Dupa apasarea acestui buton userul va fi redirectionat la pagina initaial a produselor
pentru a-si alege alte produse daca doreste.
Pe pagina fiecarui produs userul are posibilitatea de a introduce comentarii despre
acel produs. Aceasta functionalitate am implementat-o tot cu ajutorul AJAX. Cand un
user scrie un comentariu, mesajul va fi salvat intr-un XML (cu ajutorul unui script
php in aceeasi maiera ca si la Cosul Meu-append) alaturi de numele produsului si
numele userului conectat. La o viitoare o vizualizare a unui produs verificam daca in
acest XML exista un comentariu pentru acest produs si il afisam cu ajutorul unui ja-
vascript in elemntul HTML corespunzator.
4.3 Cosul Meu
Pe aceasta pagina un utilizator poate vizualiza/trimite/anula comanda lui. Pentru a
vedea continutul cosului utilizatorul trebuie sa apese butonul “Afiseaza continutul
cosului meu”. Dupa apasarea butonului va fi afisat in partea dreapta un tabel care
6. contine toate produsele comandate. Cu ajutorul AJAX vom lua din XML-ul cu co-
manda user-ului curent denumirea,dimensiunea,pretul si cantitatea.Mai jos voi pune o
bucata de cod care sa exemplifice cum am facut acest lucru:
for (var i=0;i<arr_prod.length;i++) {
den=arr_prod[i].getElementsByTagName("denumire")[0].child
Nodes[0].nodeValue;
dimens=arr_prod[i].getElementsByTagName("dimensiune")[0].
childNodes[0].nodeValue;
pret=arr_prod[i].getElementsByTagName("pret")[0].childNod
es[0].nodeValue;
cant=arr_prod[i].getElementsByTagName("cantitate")[0].chi
ldNodes[0].nodeValue;
html_prod += "<tr><td>" + den + "</td><td>" + dimens + "
fire</td><td>" + pret + " RON</td><td>" + cant + "
buchet(e)</td></tr>";
total += parseInt(pret)*parseInt(cant);
emailv +="Denumire "+den+" Dimensiune "+dimens+" Pret
"+pret+" Cantitate "+cant;
}
document.getElementById("produse").innerHTML +=html_prod;
document.getElementById("total").innerHTML = "Total: " +
total + "RON nnnn";
emailv += " Total " + total;
document.getElementById("dateemail").value += emailv;
In partea dreapta aveam un form in care utilizatorul trebuie sa completeze
adresa,localitatea , judetul si modul de plata(prin Posta Romana, sau Curier rapid )
unde doreste sa fie livrata comanda.
La apasarea butonului trimite comanda utilizatorul va primi un mail(pe cel pe
care si-a facut contul) cu “Comanda procesata”,iar administratorul florariei va primi
un mail cu comanda utilizatorului(denumire,cantitate,dimensiune,pret si total). Aceas-
ta functionalitate a fost implementata cu ajutorul unui script php,unde cu POST vom
lua datele completate de user in formular si vom lua tot din formular(dintr-un input
invizibil si comanda utilizatorului). Mai jos voi pune o bucata din codul de php pentru
trimiterea E-mail-urilor:
$headers1 = 'From: '.$email_from."rn".'Reply-To:
'.$email_from."rn" .'X-Mailer: PHP/' . phpversion();
$headers2 = 'From: '.$email_to."rn".'Reply-To:
'.$email_to."rn" .'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message1,
$headers1);
7. @mail($email_from, $email_subject, $email_message2,
$headers2);
Dupa trimiterea E-mail-urilor ,tot in scriptul de php,vom sterge XML-ul cu
comanda trimisa si vom genera unul nou(doar cu tagul de radacina) in cazul in care
utilizatorul mai doreste sa trimita alta comanda.
Daca dupa introducerea in cos a mai multor produse utilizatorul nu mai doreste
sa trimita comanda are optiunea de a anula comanda, in acel moment noi stergem
XML-ul cu functia “unlink ($file);”, apoi facem alt XML doar cu elemental de radac-
ina.
4.4 Informatii
Pe aceasta pagina se gasesc informatii suplimentare despre sit-ul nostru ,in cazul in
care un utilizator are nelamuriri. Exista informatii suplimentare despre modalitatea de
cumparare a unui produs,modalitatea de plata,intrebari frecvente si termini si con-
ditii.
Aceasta pagina am implementat-o redirectand de la un HTML la altul, in functie de
ce pagina doreste utilizatorul sa vada.
8. 4.5 Contact
Pe aceasta pagina avem un formular care trebuie completat cu nume, prenume tele-
fon si mesajul care doreste sa-l trimita administratorului florariei. Aici verificam cu
ajutorul expresiilor regulate daca E-mail-ul si numele sunt valide.
$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+.[A-
Za-z]{2,4}$/';
if(!preg_match($email_exp,$email_from)) {
$error_message .= 'Adresa de Email nu este valida<br
/>';
}
$string_exp = "/^[A-Za-z .'-]+$/";
if(!preg_match($string_exp,$name)) {
$error_message .= 'Numele nu este valid<br />';
E-mail-ul va fi trimis tot prin php ca si la trimiterea comenzii:
$email_message .= "Name: ".clean_string($name)."n";
$email_message .= "Email:
".clean_string($email_from)."n";
$email_message .= "Telephone:
".clean_string($telephone)."n";
$email_message .= "Comments:
".clean_string($comments)."n";
// create email headers
9. $headers = 'From: '.$email_from."rn".'Reply-To:
'.$email_from."rn" .'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message,
$headers);
header("Location: contact.html");
4.6 Contul Meu
Pe aceasta pagina vor aparea butoanele de Login si de Register in cazul in care nu
este nici un user logat, sau nimic in caz contrar. Butoanele le-am facut initial
invizibile:
<a href="login.html">
<button id="b1" class="but"
type="button">Login</button>
</a>
<a href="register.html">
<button id="b2" class="but"
type="button">Register</button>
</a>
Butoanele devin vizibile verificand intr-un javascipt daca user-ul este logat,apeland
un php care afiseaza user-ul din sesiunea curenta:
function hideB(exista) {
if (exista != '') {
document.getElementById("username").innerHTML=exista;
document.getElementById("b1").style.display='none';
document.getElementById("b2").style.display='none';
document.getElementById("bl").style.display='inline';
document.getElementById("bine").style.display='inline';
} else {
trimiteSeteazaUsername('seteazaUsername.php');
document.getElementById("b1").style.display='inline';
document.getElementById("b2").style.display='inline';
}
Cand un user doreste sa isi creeze un cont nou el va apsa butonul de “Register”,
acolo el completeaza un formular cu datele lui,apoi el fiind redirectionat la pagina de
Login.
Pentru a adauga un nou utilizator in baza de date ne vom conecta la baza de date(
care este facuta pe fenrir.info.uaic.ro) ,apoi vom prelua din formular cu metoda POST
datele introse de user. Pentru a ne proteja de SQL Injection am folosit
“mysql_real_escape_string” pentru toate campurile, iar parola am criptat-o cu md5
10. pentru a avea un nivel crescut de securitate. Inainte de introducerea in baza de date
am facut o intergoare a bazei de date pentru a verifica daca username-ul mai exista .
La autentificare utilizatorul va introduce username-ul si parola folosite la inregis-
trare. Mai intai ne vom conecta la baza de date, apoi cu metoda POST vom lua din
formular datele introduse de user si vom verifica daca corespund cu cele din baza de
date. Am folosit mysql_real_escape_string pentru a ne proteja de SQL injection. In
sesiune vom memora username-ul si E-mail-ul utilizatorului pentru a putea sti tot
timpul ce user este autentificat. Tot la autentificare vom creea un XML cu numele
utilizatorului pentru a putea adauga in el produsele comandate.
5 Concluzii
Aplicatia prezentata are ca scop managementul unei florarii online. Sit-ul web
imbina utilul cu placutul, oferind in acelasi timp o interfata intuitiva, precum si
diferite facilitate pentru utilizatori, cum ar fi creearea unui cont, autentificarea, cau-
tarea unui produs si comandarea de produse.
6 Bibliografie
Buraga, D. S.-C. (2001). "Web Technologies". Bucharest: MATRIX ROM Publishing.
Buraga, D. S.-C. (2002). "Web Site Design". Iasi: Polirom Publishing House.
Buraga, D. S.-C. (2006). "XML Technolgies"(in Romanian). Iasi: Polirom Publishing
House.
7 Cuprins
1 Introducere...........................................................................................................1
2 Arhitectura aplicatiei............................................................................................1
2.1 /CSS3 ..........................................................................................................2
2.2 /JS................................................................................................................2
2.3 /IMG............................................................................................................2
2.4 Primul nivel-PHP & HTML5......................................................................2
