[email protected][email protected] 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
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-
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
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>"; } }
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
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 \n\n\n\n"; 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."\r\n".'Reply-To: '.$email_from."\r\n" .'X-Mailer: PHP/' . phpversion(); $headers2 = 'From: '.$email_to."\r\n".'Reply-To: '.$email_to."\r\n" .'X-Mailer: PHP/' . phpversion(); @mail($email_to, $email_subject, $email_message1, $headers1);
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.
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
$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
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
cardososampaio
gkazunii
tlyu0419
jamashita
bob3bob3
tagtag
sshimizu2006
vrstudiolab
s1ok69oo
shoryuuken
signer
yamahiro
robhawkes
hannesfritz
bkeepers
sonatard
addyosmani
bluesmoon
yeseniaperezcruz
notwaldorf
akmur
pauljervisheath
stephaniewalter
zakiwarfel
