Dezvoltarea Unei Aplicatii Web de Vanzari Online de Carti
Cuprins
Introducere 3
Capitolul I. Tehnologii utilizate 4
1.1 PHP 4
1.2 HTML 5
1.4 JavaScript 6
1.5 SQL 6
1.6 CSS 6
1.7 Bootstrap 6
Capitolul II. Aplicatii utilizate
2.1 OpenCart 8
3.1 WampServer 17
3.2 SublimeText 18
421
4.1 21
4.2 22
4.3 23
4.4 26
5. Descrierea aplicației 28
Introducere
Această lucrare prezintă dezvoltarea unei aplicații web de vânzări online de cărți, fiind bazată pe platforma opencart.
Platforma OpenCart face parte din categoria aplicațiilor e-commerce (comert electronic), iar din acest motiv aplicația oferă utilizatorilor cât și ofertantului o serie de avantaje. Un magazin virtual este la dispoziția utilizatorului 24 din 24 de ore, nu presupune spațiu costisitor, evitandu-se astfel cheltuielile legate de chirie, depozitare și întreținere. Este o aplicație care poate fi folosită cu usurință de către orice utilizator.
Platforma opencart vine cu multe avantaje și elemente în plus în ajutorul programatorilor, din punct de vedere al codului cât și din punct de vedere al interfeței cu utilizatorul. Felul în care aceasta este implementată facilitează în mod direct procesul de mentenanță sau chiar de extindere ulterioară a funcționalității sale.
Am ales să realizez această aplicație deoarece am avut ocazia să cunosc mai multe tipuri de framework-uri la locul de muncă, printre care și opencart.
Acesta mi-a atras atenția în mod special, deoarece folosește limbajul PHP și este o tehnologie nouă și suficient de complexă pentru a stârni interesul oricărui programator doritor să acumuleze cât mai multe cunoștințe în domeniu.
Limbaje de programare utilizate
PHP
Limbajul PHP este un limbaj de programare structuat de uz general cu cod-sursa deschis (Open Source), utilizat în general pentru dezvoltarea aplicațiilor Web. PHP înseamnă Hypertext Preprocessor, sintaxa sa provine din C, Java si Perl, acesta are rolul de a permite realizarea unor pagini web generate dinamic.
Principalele caracteristici ale limbajului sunt:
Simplitate: nu se folosește includerea de biblioteci, codul PHP fiind inclus într-un document executându-se între marcaje speciale.
Cross-Platform: cele mai populare implementări ale limbajului sunt cele de pe sistemele Linux și Windows.
Securitate: limbajul PHP deține un set de măsuri de siguranță puse la dispoziția programatorului.
Flexibilitate: odată cu dezvoltarea noilor tehnologii PHP-ul a fost integrat pentru serverele web deja existente: Zeus, Apache, IIS, etc.
Gratuitate: open source.
Usurință.
Pentru a rula pagini HTML (scripturi), trebuie să programăm calculatorul în calitate de server web și Bază de Date MySQL. Aceste componente de bază esențiale sunt gratuite și pot fi descărcate cu usurință de pe site-ul oficial al producătorului, următorul pas fiind instalarea și configurarea acestora.
In general este des întalnită instalarea unui pachet complet ce conține Apache + PHP + MySQL + PHPMyAdmin care se numește WampServer, XAMPP, PHPTriad, EasyPhp, Base etc. Aplicația PHPMyAdmin inclusă în pachetul WAMP permite administrarea cu usurință a bazei de date MySQL.
In aplicația prezentată am folosit limbajul PHP pentru creearea tuturor funcțiilor începând de la autentificare, logare, delogare, contact, adăugare de produse în coș, finalizare comandă, etc. In principiu limbajul PHP din punct de vedere funcțional, este baza aplicației. Am folosit acest limbaj în cadrul website-ului prezentat deoarece am avut ocazia să mă familiarizez cu el în decursul experienței mele, acesta fiind cel mai popular în rândul realizării website-urilor.
HTML
Prescurtarea Html vine de la HyperText Markup Language. Acesta este un limbaj de marcare folosit pentru creearea paginilor web, care ulterior sunt afișate într-un browser. Paginile html au extensia “.html” sau “.htm” și sunt formate din etichete sau taguri. Etichetele de obicei sunt pereche una de deschidere <html> și cealaltă de închidere </html>. Limbajul HTML nu face deosebire între litere, majuscule și miniscule.
Un document html este compus din:
Secțiunea head care conține etichetele <head> </head>
Secțiunea body cu etichetele <body></body>
Secțiunea head trebuie să conțină titlul paginii inclus între etichetele <title> și <title>, urmat de descrieri de tip <meta> și de legături către fișiere externe (exemplu: Fișiere de tip CSS, script-uri sau favicon). Secțiunea header se referă la prima parte a unui site (care de obicei include meniul) și este recunoscută după eticheta <header></header>, iar secțiunea footer se referă la ultima parte a site-ului recunscută după eticheta <footer></footer>.
Exemplu: <html>
<head>
<title>Licență</title>
</head>
<header></header>
<body> Conținut licență</body>
<footer></footer>
</html>
Conținutul HTML se poate genera în mod direct utilizând tehnologii de codare (exemplu: PHP, ASF sai JSP), astfel multe aplicații ca sistemele de gestinoare a conținutului, e-mail-uri, wiki-uri și formuri web generează pagini HTML.
Evoluția software introduce versiunea HTML5, care vine cu un numar de elemente și atribute noi specifice unui site modern, sintaxa fiind mult mai ușoară. HTML5 oferă o funcție Drag an Drop, care permite mutarea oricărui element în locul dorit. Un alt element nou este Geolocation API, care permite partajarea locației cu site-uri de încredere, confidențialitatea fiind foarte importantă. De aceea browser-ul nu are voie să trimită informații despre locație la site-uri Web, fără permisiunea utilizatorului. In prezent limbajul Html include și fișiere multimedia de tip audio si video, acestea sunt incluse în pagina web folosind diferite plugin-uri.
In aplicația prezentată am folosit limbajul HTML versiunea HTML, deoarece consider că este cel mai bun dezvoltator de aplicații web la momentul actual.
1.3 JavaScript
Java Script este un limbaj orientat pe obiecte bazat pe conceptual prototipurilor. Tehnologia a fost lansată inițial de programatorul american Brendan Eich de la Netscape Communications Corporation sub numele de Mocha, LiveScript și în final JavaScript. Codul Java este o secvență de, declarații, instrucțiuni și comenzi introdus in paginile web și putând fi rulat de către orice browser. O instructțune este o comandă către browser și are rolul de a spune browser-ului ce trebuie să facă, fiecare instructțune se incheie cu punct si virgule (;). Limbajul este folosit pentru construirea site-urilor web, și în alt context pentru acesul la obiecte încastrate (embedded objects) în alte aplicații, sintaxa nu are nici o legatură cu limbajul java, mai degrabă fiind apropiată de sintaxa limbajului C.
Pentu a insera JavaScript într-o pagina HTML se foloseste tagul <script></script>.
Exemplu: <html>
<body>
<h1>Afișare mesaj folosind JavaScript</h1>
<script type =”text/javascript”>
Document.write(“documentație”);
</script>
</body>
</html>
In memoria browserelor este reținută reprezentarea unei pagini sub forma unui arbore de obiecte, obiectele fiind puse la dispoziția script-urilor JavaScript, care le pot citi și manipula. Arborele de obiecte poartă numele de DOM (Document Object Model).
Limbajul JavaScript este cel mai folosit în creearea site-urilor web deoarece:
Este un limbaj ușor de învațat
Poate fi interpretat de către orice browser
Sunt suficiente doar cateva linii de cod pentru a mări iteractivitatea paginilor web.
Fișierele JavaScript pot fi incluse în orice document (X)HTML.
JavaScript este un limbaj puternic dar și limitat de anumite restricții impuse de navigatoarele Web. Din motive de securitate JavaScript nu poate executa operații in rețea, nu poate scrie, citi sau șterge fișiere de pe hard disc.
In proiectul realizat am folosit limbajul JavaScript atât in functionalitate cât și în design.
1.4 SQL
SQL înseamnă Structured Query Language și în prezent este unul dintre cele mai puternice și folosite limbaje structurate pentru interogarea bazelor de date relaționale. Acesta este un limbaj nonprocedural și declarativ, el face parte din categoria limbajelor de aplicații fiind orientat pe mulțimi. De obicei este utilizat în administrarea bazelor de date client/server, generarea instrucțiunilor SQL fiind realizate de către aplicația client.
Datorita faptului că există o standardizare a limbajului SQL, caracteristicile adăugate acestuia se numesc extensii, astfel în standard sunt detaliate 6 tipuri diferite de date pentru o baza de date SQL. Fiecare implementare utilizată în cadrul standardului se numește dialect. Dialectul este conceput pentru crearea interogaăilor de selecție.
Exista 3 metode principale cu privire la implmentarea limbajului SQL:
Apelare directă (Direct Invocation): care permite introducerea instrucțiunilor direct de la prompter.
Modulară (Modul Language): foloseste proceduri apelate de programele aplicație.
Incaplsulată (Embedded SQL): Instrucțiunile sunt încapsulate în codul program.
Instrucțiunile SQL sunt grupate în:
Instrucțiuni de definire și manipulare a datelor: acestea permit descrierea structurii bazei de date precum adăugarea, stergerea sau modificarea unei înregistrări.
Instrucțiuni de selecție a datelor: aceste instrucțiuni permit consultarea bazei de date.
Instrucțiuni de control al cursorului și al bazei de date.
De obicei SGBD (Sistemul de Gestiune al unei Baze de Date) permite crearea acesteia printr-un simplu clic de mouse (exemplu : CREATE DATABASE nume_baza_de_date ). Creearea unei tabele trebuie să conțină și definirea structurii unei înregistrări precum și tipurile de date asociate câmpurilor. Numele tabelei trebuie să fie unic în baza de date, iar clauza NOT_NULL arată că nu se memorează valori de tip NULL în câmpul respectiv.
CREATE TABLE nume_tabelă
(nume1 tip_dată [NOT_NULL],
nume2 tip_dată [NOT_NULL],
nume3 tip_dată [NOT_NULL]..)
In aplicația realizată am folosit apelarea directă pentru executarea instrucțiunilor de creare a bazei de date împreună cu constrângerile definite de către OpenCart pentru aceasta.
1.5 CSS
CSS (Cascading Style Sheets) în traducere “foi de stil în cascada” este un standard, care are rolul de a stiliza elementele unei pagini HTML.
CSS functionează cu limbajul HTML, acesta se ocupă cu aspectul elementelor din pagină, cum ar fi: fonturi, culori, imagini, stiluri și așezarea acestora în cadrul ferestrei paginii. Toate aceste atribute se aplică în general unui singur element din pagină, mai multor elemente individuale, sau întregului document. Codul CSS este editabil dintr-un editor cum ar fi: notepad, notepad++ sau sublime.
CSS3 vine cu multe lucruri noi pentru a îmbunătăți aspectul unui website. Desi multe din atributele noi introduse , nu sunt axate pe funcționalitate, webmasterii au observant că utilizatorii vor un design modern pe langă functionalitate.
Cateva din trucurile interesante aduse de CSS3 sunt:
Box Shadow: pană nu aparuse css3 creearea unei umbre la o pagina era destul de dificila, programatorii trebuiau să folosească un pluggin de JavaScript sau o imagine. Folosind BoxShadow se pot adăuga umbre unei pagini printr-o singură line de cod, dând un aspect de adâncime.
Text-Shadow: prin această opțiune se poate adăuga umbră unui anumit font.
Exemplu: p{
text-shadow: 0px 1px 1px rgba(0,0,0,2);
}
Border images: o imagine poate fi utlizată ca și un border.
Nivelul opacității: pentru a obține efectul dorit, se folosește comanda “opacity:0,5”,sau un alt număr între 0 și 5.
Colțuri rotunjite: Eliminarea colțurilor la o imagine se face folosind border.
In aplicația realizata am folosit CSS pentru o interfață cât mai placută și moderna pentru orice utilizator.
1.6 Bootstrap
Bootstrap este un framework special pentru design HTML/CSS și JavaScript dezvoltat inițial de Twiter, care a ajuns în prezent la verisunea 3. Rolul său este de a realiza site-urile web responsive, acestea adaptându-se la orice rezoluție de dispozitiv: telefon mobil, tablete, desktop, incluzând o compatibiliate bună cu browserele inclusiv cu Internet Explorer 7. In momentul de față bootstrap a devenit standardul în creearea template-urilor pentru sistemele CMS, WordPress și Joomla, fiind cel mai utilizat framework la momentul actual pentru dezvoltarea interfețelor web.
Bootstrap este un instrument care poate gestiona și faza inițială a unui proiect deoarece beneficiază de o serie de componente care pot fi personalizate și reutilizate oferind o bază solidă de pornire a proiectelor pentru a nu începe de la zero. La baza dezvoltării framework-ului a fost ales preprocesorul LESS (stylesheet language) datorită vitezei de compilare a codului, și utlizării codului JavaScript.
LESS nu este singurul pre-procesor de CSS disponibil pe piață, exitând la momentul actual mai multe pre-procesoare printre care s-au remarcat si SAAS ( Syntactically Awesome Style Sheets) și SCSS. Modul lor de funcționare este foarte asemanător, scopul fiecaruia este reproducerea unui cod de calitate. Aceste pre-procesoare ca rezultat oferă dezvoltatorului definirea unui set de variabile sau parametri și recomplilarea surselor LEES, de unde rezultă un nou set de fișiere CSS.
Datorită popularității și succesului câștigat de acest framework au apărut comunități cu scopul de a oferi gratis sau commercial, pachete de interfețe complete și gata de integrat în diverse domenii cum ar fi: administrate și dashboard, pagini de prezentare, galerii foto și pagini de business.
Integrarea jQuery în Bootstrap a existat încă de la primele versiuni împreună cu o varietate de plugin-uri care sunt des folosite și anume: reprezentare pe tab-uri, ferestre modale, carousel, meniu hamburger. O altă facilitate a frameworkului este folosirea unui font care reprezintă icoanele pentru anumite acțiuni, cel mai popular este Font Awesome fiind definit ca și font iconic, dezvoltat pentru a fi folosit împeună cu frameworkul.
FontAwsome este folosit și în aplicația prezentată, precum și o varietate de facilități oferite de framework-ul bootstrap.
OpenCart
OpenCart este o platforma de comerț electronic care poate realiza și gestiona magazine online. Platforma este opensource, fiind soluția ideală pentru a gestiona magazinele online care dispun de un buget limitat. Acesta poate gestiona un magazin online mic, sau mediu, începand de la zeci de produse și ajungandu-se chiar la câteva mii.
Opencart dispunde de un cod bine gândit și structurat in panoul de administrare în comparativ cu alte framework-uri cum ar fi: Magento sau ZenCart. Aceste este un mare avantaj deoarece opencart dispune de o rapiditate mai mare în afișarea conținutului și usurința în dezvoltarea de module speciale.
Pentru a putea instala opencart primul pas realizat în aplicația prezentată a fost creearea bazei de date folosind MYSQL Server.
Avantajele utilizarii OpenCart sunt:
Necesită resursele cele mai puțin costisitoare (hardware-server)
Oferă cele mai multe soluții din punct de vedere al templet-urilor astfel opencart este dotat cu peste 4000 de module și templet-uri.
Dispune de multi-limba și multi-valuta.
Page-Cache: atunci când nu sunt produse în coș, mărește viteza de descărcare a paginii, ceea ce duce la creșterea vânzărilor
Coș de produse dinamic
Checkout (finalizare comanda): datorită faptului că mulți dintre utilizatori renunță la comanda procedurii complicate, noile versiuni include completarea adresei de email și numarului de telefon. A doua modalitate de checkout și cea mai clasică ar fi plata ramburs folosită și în aplicația prezentată.
Posibilitatea de modificare a comenzilor din interfața de administrare, precum și opțiunea de acordare de discount.
Optimizare SEO (Search Engine Optimization): o solutie avantajoasa pentru optimizare seo ar fi implementarea unui modul care cuprinde cantitatea și calitatea paginilor web incluzând linkurile, tagurile , title-uri, și meta descriptions (descrieri).
Interfața de administrare opencart deține statistici referitoare la clienți și comenzi, catalog de produse , panoul de control, extensii, setări principale, utilizatori și localizare.
Panoul administrativ conține urmatorul meniu:
Catalog : categorii, produse, informații, opinii, atribute, producatori, opțiuni.
Extensii : module, transport, plăți, total comenzi
Vanzari : comenzi, cupoane, vouchere, mail
Sistem : setări, localizare, comenzi
Rapoarte
Pași de instalare:
După ce toate fișierele sunt încărcate pe server, din foloderul upload se lansează fișierul instal. Pentru a trece la pasul următor trebuie să fim de acord cu licența opencart folosind butonul “I agree to the license”.
Pre-Instalare : în faza de preinstalare se verifică pas cu pas dacă toate cerințele tehnice ale serverului sunt instalate corect.
Configurare : în faza de configurare trebuie introduse numele și parola bazei de date create anterior, precum și un nou nume și parolă pentru secțiunea de administrare a platformei opencart.
Instalare finalizată: ultima fază include ștergerea fișierului instal din folderul upload.
WampServer
WampServer este un software pentru sistemul de operare Microsoft Windows, creat de Romain Bourdon, acesta constă în serverul web Apache, MySQL și limbajul de programare PHP. Cele mai noi versiuni disponibile în momentul actual sunt: WampServer (32 biți și PHP 5.5) 2.5 și WampServer (64 biți și PHP 5.5) 2.5.
In administrarea aplicatiei de vânzări am folosit pachetul Wamp deoarece am avut ocazia să mă familiarizez cu el în decursul experienței mele acesta fiind cel mai popular în rândul website-urilor
Sublime Text2
SublimeText 2 este un software folosit pe post de editor , cu o interfață de programare a aplicațiilor Python (API). Sublime susține mai multe limbaje de programare și limbaje de marcare, iar funcționalitatea acestuia poate fi extinsă de către utilizatori folosind plugin-uri, de obicei construite de comunitate și menținute sub licențe gratuite de software. Acesta conține 22 de teme diferite care poti fi configurate în funcție de necesitate.
Capitolul III. Proiectarea și implementarea aplicației
III.1 Proiectarea aplicației
III.1.1 Descrierea procedurilor de autentificar si înregistrare.
In urma tehnologiilor utilizate, magazinul de cărți online dispune de o temă responsive, astfel el poate fi accesat de pe orice dispozitiv cum ar fi telefon, tabletă, laptop sau desktop.
Orice utilizator se poate autentifica sau înregistra pe site dacă cerințele aplicației sunt respectate.
Inregistrare.
Pagina de înregistrare și autentificare se poate accesa din meniu, acesta fiind inclus pe toate paginile site-ului, utilizând butonul „Inregistrare”. Acestă pagină conține două secțiuni diferite: autentificare și înregistrare. Orice utilizator își poate crea un cont pe website completând câmpurile care apar la secțiunea înregistrare. Acestă secțiunea este foarte importantă deoarece conține toate datele utilizatorului atât datele persoanle cât și datele necesare pentru a cumpăra un produs. Câmpurile pe care utilizatorul trebuie să le completeze în secțiunea înregistrare sunt:
Detaliile personale: nume, prenume, adresă de email și număr de telefon.
Adresa utilizatorului: adresă (stradă, număr), oraș, tară și județ.
Parolă: parolă și confirmare parolă
După ce contul a fost creat utilizatoul este redirectionat pe pagina de mesaje unde poate vizualiza informații despre contul său. Datele personale, adresa cât și parola sunt confidențiale pentru fiecare utilizator al aplicației.
Autentificare
Pentru ca utilizatorul sa nu fie nevoit să completeze un număr mare de câmpuri secțiunea autentificare conține doar două câmpuri importante, acestea fiind adresa de email si parola. In cazul în care utilizatorul și-a uitat parola, trebuie să acceseze linkul „Am uitat parola” , după care va fi redirecționat pe o altă pagină unde, într-un câmp își va introduce adresa de email pe care va primi informații legate de noua parolă.
Dupa ce utilizatorul s-a autentificat pe site, acesta este redirectionat pe pagina „Contul meu” unde isi poate edita informatiile introduse in momentul inregistrarii. Pagina conține trei opțiuni de editare prima se numește „Editează infomațiile contului”. In cadrul acestei secțiuni utilizatorul își poate schimba numele, prenumele, adresa de e-mail sau numărul de telefon. A doua opțiune pune la dispoziția utilizatorului modificarea parolei vechi cu una nouă. Ultima opțiune numită „Modifică adresa” este legată de adresă, care în cadrul acestui tip de aplicație are un rol important deoarece este strâns legată de livrarea unui produs. Utilizatorul poate adauga o nouă adresă pastrând-o și pe cea veche. In acest caz el trebuie să alegă una din ele ca și adresă implicită folosind radio butonul „Adresă implicită” bifând opțiunea „Da sau Nu.” De asemenea adresa implicită va fi luată în considerare în momentul în care se face o comandă online, la un anumit produs.
Fiecare din aceste adrese pot fi șterse utilizând butonul „sterge” care se află în dreptul fiecărei adrese cu excepția adresei implicite, care nu poate fi stearsă.
III.1.2 Descrierea procedurilor de contact
Contact
Pagina de contact trebuie să creeze un impact în mintea utilizatorului pentru al determina să caute cât mai multe informații despre acea companie. De regulă un utilizator care s-a decis să-și facă cumpăraturile online, fie că este începator sau are deja experiență în domeniu, trebuie să ofere o atenție sporită datelor de contact.
Afișare unor date de contact reale inspiră încredere utilizatorilor astfel, aplicația prezentată pune la dispoziția vizitatorilor un formular care conține trei câmpuri esențiale: nume, adresă de e-mail și întrebare. De asemenea un utilizator poate contacta telefonic sau prin intermediul e-mailului un distribuitor care se află în diferite orașe din Romania. In funcție de orașul selectat utilizatorul va putea vizualiza adresa de e-mail și numarul de telefon al distribuitorului din orașul dorit.
Lipsa unei astfel de pagini în acest tip de aplicație poate induce neîncredere unui utilizator care este obișnuit să cumpere produse online.
III.1.3 Descrierea procedurilor de cumpărare.
http://ciobanu.cich.md/lectii_view.php?id=7 (php)
http://www.marplo.net/php-mysql/introducere.html (php)
http://ciobanu.cich.md/lectii_view.php?id=5 (html5)
http://ro.wikipedia.org/wiki/HyperText_Markup_Language (html)
http://ro.wikipedia.org/wiki/JavaScript (javascript)
http://laurian.ro/wordpress/wp-content/uploads/2013/JavaScript_a5.pdf (JAVASCRIPT)
http://vega.unitbv.ro/~cataron/Courses/BD/BD_Cap_5.pdf (sql)
http://www.marplo.net/curs_css/introducere.html {css|}
http://www.code-it.ro/html-5-si-css3-designul-la-un-nou-nivel/ (css)
http://dana-damoc.eu/blog/introducere-la-bootstrap-3/ (bootstrap)
http://onlinepixel.ro/opencart opnrcart
http://docs.opencart.com/installation/ opencart
http://creatikon.ro/online/ecommerce/magazin-online-in-opencart/
http://en.wikipedia.org/wiki/WampServer
Copyright Notice
© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.
Acest articol: Dezvoltarea Unei Aplicatii Web de Vanzari Online de Carti (ID: 149729)
Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.