• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Flori x
 

Flori x

on

  • 394 views

 

Statistics

Views

Total Views
394
Views on SlideShare
217
Embed Views
177

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 177

http://alternoriana.blogspot.ro 177

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Flori x Flori x Document Transcript

    • FloriXPică Andreea,Corduneanu RianaFacultatea de Informatica,Universitatea Alexandru Ioan Cuza,Iasiroxana.pica@students.info.uaic.roriana.corduneanu@students.info.uaic.roAbstract. Aplicatie Web de management al resurselor dintr-o florarie care oferautilizatorilor 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 multebuchete pe care sa le comande. Aplicatia va simula expedierea buchetelor la oadresa stabilita.Cuvinte-cheie: florarie, buchete, comanda.1 IntroducereFloriX 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 contrartrebuie sa-si creeze un cont.Dupa autentificare utilizatorul are posibilitatea de a alege produsele dorite , avandoptiunea de a selecta dimensiunea si cantitatea dorite .Ulterior userul poate accesapagina “Cosul Meu” in care vor fi afisate produsele alese si un formular in caretrebuie sa completeze adresa si modalitatea de livrare a comenzii. Aici utilizatorul areoptiunea de a trimite sau anula comanda.Pe pagina “Informatii” se afla toate detaliile cu privire la modalitatea de cumpararesi livrare, intrebari frecvente ,termini si conditii. In cazul in care userul are nelamuriripoate accesa pagina “Contact” in care va completa un formular prin care poate adresaorice 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 “Logout” din bara de navigare.2 Arhitectura aplicatieiAplicatia noastra este impartita in mai mult module: /CSS3/JS
    • /IMGPrimul nivel-PHP & HTML52.1 /CSS3Cascading Style Sheets (CSS) este un limbaj pentru stiluri folosit pentru a descrieprezentarea (aspectul si formatarea) unui document scris într-un limbaj de marcare.Aplicatia sa cea mai cunoscuta este realizarea stilului paginilor web scrise în HTMLsi XHTML, dar limbajul poate fi aplicat oricarui tip de document XML.CSS specifica o schema prioritara pentru a determina care reguli de stil se aplicadaca 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 /JSJavascript este un limbaj de programare care face posibil ca paginile web sa fiemai interactive. Scripturile Javascript sunt introduse in pagina HTML si sunt inter-pretate si executate de browser. Javascript poate fi considerat o unealta foarte bunadaca doriti sa controlati continutul paginilor in functie de data, ora, sistemul deoperare sau browserul utilizatorilor, sa faceti site-uri interactive, care sa comunice cuvizitatorii, site-uri dinamice, sa validati datele primite din formulare, dar nu numaiatat, 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 /IMGToate imaginile folosite au fost salvate in acest modul.2.4 Primul nivel-PHP & HTML5HTML este acronimul de la HyperText Markup Language şi reprezintă un limbajpentru crearea şi marcarea (formatare, aranjare) unui document astfel încât să poată fipublicat 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 textcare semnalează o legătură la o altă informaţie web, de obicei un alt document web, şieste identificat prin subliniere sau culoare, pentru a-l deosebi de textul simplu.Hypermedia este un termen aproape sinonim celui de hypertext, singura deosebirefiind faptul că subliniază prezenţa şi a unor elemente care nu sunt de tip text, cum ar fianimaţ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-
    • manţele limbajului. Ultima variantă (la data elaborării acestui ghid) este HTML 5 ceinclude facilităţile versiunilor anterioare (tag-uri de marcare, tag-uri pentruhiperlegături, antete, paragrafe, liste, elemente de meniu, formatare caractere, imaginiin-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 deinvatat, open-source, poate fi rulat pe mai multe platforme si se poate conecta la maimulte 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 locin 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 constuireaacestui sit Web.3 Tehnologii utilizatePentru partea de client am ales: HTML5 (HyperText Markup Language)- pentru structurarea și prezentareaconținutului paginilor CSS3 (Cascading Style Sheets) - pentru formatarea elementelor unuidocument 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 incluseintr-o pagina web, dar cel mai folosit este pentru navigare de la un continut laaltul al site-ului. Aceasta navigare se face de obicei prin link-uri, acesteacontin o adresa URL catre pagina/continutul respectiv. Metoda standard detransmitere a datelor asresei URL din link-uri la server este GET.Pentru partea de server: PHP (Php: Hypertext Preprocessor) - limbaj de programare pe partea deserver folosit la dezvoltarea aplicatiilor Web XML (Extensible Markup Language)- limbaj de marcare folosit pentrustocarea produselor si a comenzilor utilizatorilor SESSION- reprezinta o modalitate prin care PHP retine informatii de la opagina la alta. Odata cu initializarea unei sesiuni, utilizatorul poate pastraanumite variabile chiar daca in continuare viziteaza si alte pagini ale site-ului. In principiu informatia se pastreaza pana la inchiderea browser-ului, saupana 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 memoratoate datele necesare autentificarii utilizatorilor
    • 4 Detalii de implementareAplicatia noastra are diverse functionalitati. Le voi prezenta modul de functionaresi design-ul lor in functie de pagina pe care ne aflam:4.1 HomePe pagina principala avem o descriere generala a florariei. Cu ajutorul barei denavigatie putem alege foarte usor si intuitiv pagina pe care dorim sa mergem. Tot inbara de navigatie va aparea in partea dreapta numele userului logat si butonul de “Logout”.4.2 ProduseAici avem in partea stanga un meniu cu toate categoriile de flori disponibile . Inpartea dreapta avem o galerie de poze cu categoriile de flori existente.Daca alegem o categorie si un anumit tip din partea stanga (de exemplu Trandafirialbi), 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 careutilizatorul alege ce tip de flori doreste sa vada, cu ajutorul “functionloadXMLDoc(url,categorie,tip)” vom cauta in XML-ul in care avem produsele toateelementele de tipul si categoria dorita si le vom pune in taguri HTML(ex: daca vomselecta Garoafe rosii, vor aparea toate speciile de garoafe rosii). Codul de mai jos esteo 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><aonclick="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>";} }
    • 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 taguriHTML cu ajutorul AJAX un singur produs(cel selectat de client).Aici va aprea categoria, tipul poza,specia si descriera produsului ales. Utilizatorulare optiunea de a-si alege dimensiunea buchetului si cantitatea dorita pentru fiecareprodus.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 momentnoi 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 XMLcu numele utilizatorului respectiv care contine doar tagul radacina; in acest XML vomface 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 produselorpentru a-si alege alte produse daca doreste.Pe pagina fiecarui produs userul are posibilitatea de a introduce comentarii despreacel produs. Aceasta functionalitate am implementat-o tot cu ajutorul AJAX. Cand unuser scrie un comentariu, mesajul va fi salvat intr-un XML (cu ajutorul unui scriptphp in aceeasi maiera ca si la Cosul Meu-append) alaturi de numele produsului sinumele userului conectat. La o viitoare o vizualizare a unui produs verificam daca inacest XML exista un comentariu pentru acest produs si il afisam cu ajutorul unui ja-vascript in elemntul HTML corespunzator.4.3 Cosul MeuPe aceasta pagina un utilizator poate vizualiza/trimite/anula comanda lui. Pentru avedea continutul cosului utilizatorul trebuie sa apese butonul “Afiseaza continutulcosului meu”. Dupa apasarea butonului va fi afisat in partea dreapta un tabel care
    • 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 obucata 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].childNodes[0].nodeValue;dimens=arr_prod[i].getElementsByTagName("dimensiune")[0].childNodes[0].nodeValue;pret=arr_prod[i].getElementsByTagName("pret")[0].childNodes[0].nodeValue;cant=arr_prod[i].getElementsByTagName("cantitate")[0].childNodes[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 completezeadresa,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 pecare si-a facut contul) cu “Comanda procesata”,iar administratorul florariei va primiun mail cu comanda utilizatorului(denumire,cantitate,dimensiune,pret si total). Aceas-ta functionalitate a fost implementata cu ajutorul unui script php,unde cu POST vomlua datele completate de user in formular si vom lua tot din formular(dintr-un inputinvizibil si comanda utilizatorului). Mai jos voi pune o bucata din codul de php pentrutrimiterea 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);
    • @mail($email_from, $email_subject, $email_message2,$headers2);Dupa trimiterea E-mail-urilor ,tot in scriptul de php,vom sterge XML-ul cucomanda trimisa si vom genera unul nou(doar cu tagul de radacina) in cazul in careutilizatorul mai doreste sa trimita alta comanda.Daca dupa introducerea in cos a mai multor produse utilizatorul nu mai dorestesa trimita comanda are optiunea de a anula comanda, in acel moment noi stergemXML-ul cu functia “unlink ($file);”, apoi facem alt XML doar cu elemental de radac-ina.4.4 InformatiiPe aceasta pagina se gasesc informatii suplimentare despre sit-ul nostru ,in cazul incare un utilizator are nelamuriri. Exista informatii suplimentare despre modalitatea decumparare 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 dece pagina doreste utilizatorul sa vada.
    • 4.5 ContactPe aceasta pagina avem un formular care trebuie completat cu nume, prenume tele-fon si mesajul care doreste sa-l trimita administratorului florariei. Aici verificam cuajutorul 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
    • $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 MeuPe aceasta pagina vor aparea butoanele de Login si de Register in cazul in care nueste nici un user logat, sau nimic in caz contrar. Butoanele le-am facut initialinvizibile:<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,apelandun 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 deLogin.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 POSTdatele 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
    • pentru a avea un nivel crescut de securitate. Inainte de introducerea in baza de dateam 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 dinformular datele introduse de user si vom verifica daca corespund cu cele din baza dedate. Am folosit mysql_real_escape_string pentru a ne proteja de SQL injection. Insesiune vom memora username-ul si E-mail-ul utilizatorului pentru a putea sti tottimpul ce user este autentificat. Tot la autentificare vom creea un XML cu numeleutilizatorului pentru a putea adauga in el produsele comandate.5 ConcluziiAplicatia prezentata are ca scop managementul unei florarii online. Sit-ul webimbina utilul cu placutul, oferind in acelasi timp o interfata intuitiva, precum sidiferite facilitate pentru utilizatori, cum ar fi creearea unui cont, autentificarea, cau-tarea unui produs si comandarea de produse.6 BibliografieBuraga, 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 PublishingHouse.7 Cuprins1 Introducere...........................................................................................................12 Arhitectura aplicatiei............................................................................................12.1 /CSS3 ..........................................................................................................22.2 /JS................................................................................................................22.3 /IMG............................................................................................................22.4 Primul nivel-PHP & HTML5......................................................................2
    • 3 Tehnologii utilizate ..............................................................................................34 Detalii de implementare.......................................................................................44.1 Home...........................................................................................................44.2 Produse........................................................................................................44.3 Cosul Meu...................................................................................................54.4 Informatii ....................................................................................................74.5 Contact ........................................................................................................84.6 Contul Meu .................................................................................................95 Concluzii............................................................................................................106 Bibliografie ........................................................................................................107 Cuprins...............................................................................................................10