Upgrade to Pro — share decks privately, control downloads, hide ads and more …

FloriX

 FloriX

project, infoiasi, tw2013 , web

andreea0101

June 05, 2013
Tweet

Other Decks in Science

Transcript

  1. FloriX
    Pică Andreea,Corduneanu Riana
    Facultatea de Informatica,Universitatea Alexandru Ioan Cuza,Iasi
    [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

    View full-size slide

  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-

    View full-size slide

  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

    View full-size slide

  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 += "onclick=\"loadProductXML ('flori.xml','" + img_den +
    "');\">" + img_den +
    "";
    } }

    View full-size slide

  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

    View full-size slide

  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;iden=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 += "" + den + "" + dimens + "
    fire" + pret + " RON" + cant + "
    buchet(e)";
    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);

    View full-size slide

  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.

    View full-size slide

  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
    />';
    }
    $string_exp = "/^[A-Za-z .'-]+$/";
    if(!preg_match($string_exp,$name)) {
    $error_message .= 'Numele nu este valid
    ';
    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

    View full-size slide

  9. $headers = 'From: '.$email_from."\r\n".'Reply-To:
    '.$email_from."\r\n" .'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:

    type="button">Login


    type="button">Register

    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

    View full-size slide

  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

    View full-size slide

  11. 3 Tehnologii utilizate .............................................................................................. 3
    4 Detalii de implementare ....................................................................................... 4
    4.1 Home ........................................................................................................... 4
    4.2 Produse ........................................................................................................ 4
    4.3 Cosul Meu ................................................................................................... 5
    4.4 Informatii .................................................................................................... 7
    4.5 Contact ........................................................................................................ 8
    4.6 Contul Meu ................................................................................................. 9
    5 Concluzii ............................................................................................................ 10
    6 Bibliografie ........................................................................................................ 10
    7 Cuprins ............................................................................................................... 10

    View full-size slide