Proiectarea Si Implementarea Unei Aplicatii Web Magazin Online
I Introducere
În această lucrare am realizat un magazin online cu ajutorul platformei nopCommerce, bazat pe ASP.NET MVC 5. Scopul acestei lucrări este de a avea un magazin online ușor de utilizat și totuși destul de complex.
Clientul care a solicitat acest site este un designer de pantofi care dorește să își dezvolte afacerea și în domeniul internetului. Acesta nu are deloc cunoștințe de cum se administrează un site și nici nu dorește să angajeze o echipă care să facă acest lucru deoarece dorește sa aibe costuri minime.
Având în vedere că el este designer-ul propriului magazin, nici nu dorește să piardă prea mult timp in fața calculatorului din cauza site-ului.
Așadar, din punctul meu de vedere, nopCommerce este soluția ideala pentru acest client. Este o platforma ușor de utilizat și de întreținut și nu ai nevoie de cunoștințe bogate în adminstrarea unui site.
Un alt avantaj pe care ni-l dă nopCommerce este faptul că avem atât parte de front-end, interfața fiind destul de prietenoasă, dar și partea de back-end care ține de administrarea site-ului.
Structura lucrării conține următoarele capitole:
Introducere
Noțiuni de bază referitoare la tehnologiile utilizate
Proiectarea și implementarea aplicației web
Concluzii.
II Noțiuni de bază referitoare la tehnologiile utilizate
II.1 Protocolul HTTP
Protocolul HTTP este un protocol de tip text și este utilizat pentru a transmite informații între un browser(program de navigare Web) și un Server Web. Prescurtarea HTTP vine de la Hypertext Transfer Protocol și acceseaza informațiile de pe serverele World Wide Web(WWW). Fișierul accesat poate fi atât un fișier HTML(HyperText Markup Language), o animație, un video, un fișier grafic sau de sunet, cât și un editor de text sau un executabil pe acel server.
Modul de funcționare al acestui protocol este că acesta comunică între un calculator aflat la distanța și propriul calculator. Această acțiune se desfășoară în modul cerere și răspuns, iar tipul utilizat este descris in specificațiile HTTP. Așadar clientul ii trimite o cerere, iar serverul ii răspunde cu resursa cerută, utilizându-se portul 80. Răspunsul va fi un fișier de tip text cu link-uri către imagini sau alte obiecte, iar browser-ul este cel care hotărăște cum vor fi afișate. Pentru a se putea realiza acest lucru se folosesc niște metode. Cel mai des utilizate metode sunt GET și POST.
II.1 Comunicarea dintre două calculatoare cu ajutorul protocolului HTTP[1]
Metoda GET trimite informațiile către server direct în URL separate prin semnul „?”. Aceasta metoda are o restricție foarte importantă de știut în cazul în care este utilizata deoarece dispune doar de 1024 de caractere. De asemenea nu este indicat să folosim această metoda pentru transmiterea de parole sau alte informații importante. Această metodă nu poate trimite alte tipuri de date cum ar fi imagini, documente sau alte tipuri informații. Pentru a putea a putea trimite mai multe informații se va folosi metoda POST. Aici informația se va transmite prin headerele HTTP si nu avem limita de marime.[2]
II.2 HTML
Limbajul HTML este utilizat pentru descrierea hipertextelor, așa cum ii spune și numele HyperText Markup Language. Cu ajutorul său putem construi pagini Web, dar nu este considerat un limbaj de programare ci mai mult un limbaj descriptiv. Caracteristicile specifice ale acestui limbaj sunt:
Pot fi create cu orice editor de texte (ex. NOTEPAD), deoarece documentele HTML sunt de tip text;
Sunt independente de platforma de lucru, așadar pot fi vizualizate cu diferite browser-e;
Utilizeaza așa-zisele tag-uri (etichete) care stabilesc structura documentului și aspectul acestuia.
Un tag(eticheta) este incadrat intre paranteze unghiulare < >, astfel avem <tag> pentru a specifica începutul acelui tip de eticheta și </tag> pentru a specifica sfarsitul său.
Un document HTML va incepe cu eticheta <HTML> și se va incheia cu </HTML>, iar in interiorul acestora vom avea urmatoarea structura:
Antetul documentului care este delimitat de etichetele <HEAD> și </HEAD> unde vom avea titlul documentului care va fi afișat in bara de titlu a browser-ului delimitat de <TITLE>, </TITLE> și de asemenea putem avea și alte informații suplimentare utilizând eticheta <META>;
Corpul documentului care este delimitat de etichetele <BODY> și </BODY> unde incepe practic descrierea documentului, adică ceea ce dorim sa afișăm în interiorul paginii cu ajutorul elementelor de formatare a acestuia.
Așadar structura unui document HTML va fi:
<HTML>
<HEAD>
<TITLE> Titlul </TITLE>
</HEAD>
<BODY>
Conținutul
</BODY>
</HTML>
Pentru formatarea textului vom folosi etichetele <DIV> și </DIV> la nivel de bloc și <SPAN> respectiv </SPAN> la nivel de caracter. În interiorul DIV-urilor putem folosi paragrafe delimitate cu ajutorul tag-ului <P> și </P>, iar pentru a putea insera o linie vidă vom folosi eticheta <BR>.
Pentru a marca titlurile si subtitlurile avem mai multe tipuri de header numerotate de la 1 la 6, astfel <H1> va fi cel mai mare, iar <H6> cel mai mic. Pentru a evidenția anumite cuvinte din text putem folosi tag-urile <strong>, <b> și <i>, iar pentru a alege culoarea textului putem folosi <FONT COLOR=cod> unde codul va fi ales din paleta de culori disponibile, iar pentru culoarea fundalului, tag-ul BODY accepta atributul BGCOLOR.[3]
Tabelele se creaza cu ajutorul etichetelor <TABLE> și </TABLE> care accepta urmatoarele atribute:
ALIGN = LEFT | RIGHT | CENTER –acestea fac alinierea tabelului in document;
WIDTH = valoare – pentru a specifica lățimea tabelului;
HEIGHT = valoare – pentru a specifica înălțimea tabelului;
BORDER = valoare – pentru a specifica grosimea liniei tabelului;
COLS = valoare – pentru a specifica numarul de coloane.
Tabelul este alcătuit din linii care sunt delimitate cu ajutorul etichetelor <TR> și </TR>, eticheta de final fiind opțională.
Pentru comutarea paginilor vom folosi eticheta <a href=”pagina.php”>, unde „a” creează hyperlink-ul catre pagina declarată in „href”.
In aplicație am folosit HTML 5 deoarece acesta este mai avansat ca și clasicul HTML. Ce aduce nou HTML 5 este faptul ca nu mai avem nevoie de aplicații care utilizeaza plug-in-uri cum sunt Adobe Flash, Apache Pivot sau Sun JavaFX deoarece acesta dispune de elemente noi: audio, video, article, command, details și multe altele. [4]
II.3 Microsoft .NET Framework
Cu ajutorul .NET-lui putem realiza, distribui și rula aplicații-desktop Windows și aplicații WEB. Aceasta tehnologie pune laolalta mai multe tehnologii cum ar fi ASP, XML, OOP, SOAP etc și limbaje de programare C++, C#, J#, astfel codul compilat putând fi utilizat pe diferite calculatoare cu sistem Windows, câtsi utilizarea codului în programe indiferent de limbajul de programare utilizat. Componenta .NET Framework este livrată împreuna cu sistemul de operare Windows.
Pentru a putea dezvolta aplicații utilizând platforma .NET Framework avem nevoi de 3 lucruri esențiale:[5]
Limbaje de programare (Pascal, Perl, C#, Visual Basic .NET, Managed C++ etc);
Medii de dezvoltare (Visio, Visual Studio .NET);
O bibliotecă de clase pentru crearea aplicațiilor WEB, serviciilor WEB și aplicațiilor desktop Windows.
De asemenea pentru a dezvolta aplicații .NET putem utiliza servere specializate unde putem stoca baza de date, servicii WEB pentru aplicațiile care necesită identificarea utilizatorilor și servicii incluse pentru utilizatori non-PC cum ar fi Smartphone, X-Box etc.
II.2 Arhitectura .NET Framework[6]
Componenta .NET Framework stă la baza tehnologiei .NET, fiind ultima interfață intre aplicațiile .NET și sistemul de operare. Acesta conține:
Limbaje bazate pe OOP cum ar fi C#, C++ și J#;
Common Language Runtime care este platforma comuna de executare a programelor;
Framework Class Library(FCL), adică bibliotecile necesare pentru realizarea aplicațiilor desktop sau WEB.
Compilarea programelor scrise in unul din limbajele .NET se face cu ajutorul Microsoft Intermediate Language(MSIL sau IL), care va crea un fisier cu extensia .exe, dar nu este un executabil ci va respecta formatul unic MSIL.
CLR conține o mașină virtuală asemănătoare cu o mașină virtuală JAVA, care va executa instrucțiunile IL in urma compilării. Compilatorul folosit de mașina virtuală este Just In Time(JIT), acesta analizează codul IL prin care se apelează o metodă și va produce codul mașină adecvat și eficient. El va recunoaste secvențele de cod pentru care s-a creat deja codul mașină adecvat și vor putea fi utilizate fara a le recompila, astfel pe parcursul rulării aplicațiile .NET vor fi mai rapide.[7]
II.4 ASP.NET
Cu ajutorul infrastructurii ASP.NET se pot dezvolta atât aplicatii Web cât și servicii Web XML. ASP.NET prezinta următoarele caracteristici:
Aplicațiile sunt compilate in două faze: în primă fază codul C# este compilat într-un cod intermediar IL, iar in cea de a doua fază cu ajutorul mașinii virtuale JIT, codul IL se va compila în cod nativ optimizat.
Este un multi-limbaj deoarece se poate folosi orice limbaj CLI care ulterior va fi compilat in cod IL.
ASP.NET este orientat pe obiect și este ușor de instalat și configurat. Instalarea constă în copierea fișierelor intr-o cale pe disc configurată de IIS (Internet Information Services) ca director virtual.
Odată cu apariția noului ASP.NET 2.0 avem parte de lucruri noi in urmatoarele categorii:[8]
Administrarea și dezvoltarea aplicațiilor Web;
Controalele server-side;
Legarea datelor în controalele Web;
Securitatea.
Un alt avantaj la ASP.NET 2.0 este ca site-urile Web pot fi precompilate înainte de a fi instalate pe server, astfel se îmbunatațește timpul de raspuns pentru prima cerere a paginii și avem posibilitatea de a instala numai codul executabil fără a mai instala si codul sursă.
II.5 ASP.NET MVC
ASP.NET MVC este un framework care este dezvoltat de către Microsoft si combină arhitectura model-view-controller cu componentele platformei ASP.NET și tehnici de dezvoltare de tip Agile. ASP.NET MCV este open source.
II.3 Structura unui MVC[9]
După cum se observă în imaginea anterioară avem 3 componente importante:
MVC Model implementează logica pentru domeniul de date al aplicației și memoreaza starea modelului într-o baza de date.
MCV Controller gestionează relațiile dintre View și Model. De asemenea alege ce vizualizare va afișa în cazul în care avem mai multe.
MCV View reprezintă interfața cu utilizatorul, iar pentru un model pot exista mai multe views.
II.6 SQL Server
SQL Server este produs de compania americană Microsoft Corp. și este folosită pentru crearea de baze de date. Este un sistem din clasa Enterprise, oferind caracteristici și performanțe pentru a dezvolta aplicații la scara mare, extensibile și performante.
Este utilizat in comunicarea cu baza de date, iar propozițiile SQL sunt utilizate pentru a efectua actualizări sau ștergeri ale bazei de date. Un sistem de baze de date conține tabele unde se stochează informațiile sau datele bazei de date. Tabele au nume unic și conțin mai multe linii și coloane. Coloanele conțin numele, tipul de date si alte atribute, iar liniile reprezintă datele stocate in baza de date.
Cea mai importantă operație în SQL este maparea prin construcția SELECT – FROM – WHERE. In acest fel vom selecta informația de care avem nevoie sa fie transmisă într-un anumit moment, fiind cerută de catre aplicație. Sintaxa clasică a acestei construcții este:[10]
SELECT nume_coloană
FROM nume_tabelă
WHERE condiție_de_căutare.
În cazul în care dorim să selectăm toate coloanele, vom pune * în loc de nume_coloană. De asemenea putem folosi și alte condiții decât WHERE cum ar fi: GROUP BY, HAVING, ORDER BY.
Pe langa operațiile de căutare mai avem și operații de ștergere, inserare și actualizare. Pentru a putea șterge din baza de date se va folosi operatorul DELETE. Acest operator nu este indicat sa fie folosit decât de către admin deoarece odata sterse informațiile din baza de date nu se mai pot recupera. Inserarea se face cu ajutorul operatorului INSERT și putem avea o inserare simplă sau o inserare multiplă, iar pentru actualizare se folosește operatorul UPDATE.
Pentru evitarea pierderii bazei de date sau a modificării greșite a acesteia, putem utiliza restricții la accesul datelor gestionate de Microsoft SQL Server. Astfel se pot impune limitări utilizatorilor bazei de date cu ajutorul aplicațiilor client, unde se va specifica la care date pot avea acces și ce tipuri de operații vor putea utiliza. [11]
II.7 nopCommerce
nopCommerce este un software open source care conține atât un catalog frontend cât și partea de administrare backend. Este un magazin online complet personalizabil, fiind ușor de utilizat de către utilizatori neexperimentați. Este o platforma sigură, scalabilă și extensibilă.
Frontend-ul nopCommerce este accesibil cu ajutorul browser-ului, fiind un .net open source bazat pe soluții e-commerce care conține un coș de cumparături complet personalizat. Tehnologia folosită este ASP.NET 4.5 (MVC 5) utilizand baza de date MS SQL 2008 sau mai nouă. Reprezintă o solutie bună pentru comercianții care au depasit limitele existente și pot utiliza un web gazdă sau pot apela la partenerii de hosting. Are tot ce ai nevoie pentru a te ajuta sa îți incepi propria afacere în domeniul vânzarilor pe internet.
Cu ajutorul lui nopCommerce iți poți crea propriul magazin online în doar câteva minute, se descarca aplicația si se urmează instrucțiunile. Avantajul acestui portal este că ai parte de ultimele tehnologii utilizate pe piață. Ce mai este foarte eficient la nopCommerce este faptul că va include automat cuvintele cheie pentru ca motoarele de cautare gen GOOGLE să gaseasca ușor magazinul dumneavoastră.
Ca orice alt program, are câteva cerințe de sistem ca să poată rula pe calculator sau server. Acestea sunt:[12]
Sistem de operare:Windows 8, Windows 7;
Servere web suportate: Internet Information Service(IIS) 7.0 sau mai noi;
ASP.NET 4.5 (MVC 5.0)
Microsoft .NET Framework 4.5.1 sau mai nou;
Baza de date: MS SQL Server 2008 sau mai nou și MS SQL Server Compact 4.0 saumai nou;
Browser: Microsoft Internet Explorer 8, Mozilla Firefox 2.0, Google Chrome 1.x, Apple Safari 2.x;
MS Visual Studio 2012 sau mai nou pentru dezvoltatorii care doresc sa modifice codul sursă.
III Proiectarea și implemetarea aplicației web
III.1 Structura website-ului
Aplicația web pe care am realizat-o este un magazin on-line de pantofi, dar dispune și de o gestionare a plaților furnizorilor. Scopul principal al acestui portal este de a putea face cumparaturi online, astfel economisind timp, care este destul de esențial in zilele noastre. Așadar in loc să pierdem timp umblând dintr-un magazin în altul, cu un singur click ne putem găsi incălțamintea dorită.
Magazinul online este usor de utilizat de catre orice persoana cu cunoștințe minime de PC. Astfel pentru a putea comanda trebuie sa te loghezi pe site, iar în cazul în care înca nu ai cont, îți poți crea ușor apăsând pe butonul de sign up.
III.1 Structura paginilor website-ului
Doar utilizatorii înregistrați u acces la pagina Wish list și Shopping cart. Prin pagina Wish List utilizatorii pot solicita un produs care nu mai este în stoc, iar pe pagina Shopping Cart finalizeaza comanda dorită.
III.2 Baza de date
Aplicația web folosește o bază de date Microsoft SQL Server 2014. Numele bazei de date este demonop și are următoarea structură:
III.2 Structura tabelelor si legatura dintre acestea.
Așadar tabela principală este Category unde avem create categoriile. În fiecare categorie putem avea una sau mai multe produse(tabela Products). Tabela Produtcs Category Mapping se află între tabela Category și Products pentru ca există posibilitatea ca un produs sa fie în mai multe categorii.
De asemenea fiecărui produs ii putem asocia o poză din tabela Pictures. Asocierea se face cu ajutorul tabelei Product Picture Mapping. În tabela Order avem comenzile efectuate de către clienți, iar tabela Order item face legatura între client si produsul comandat.
Tabela Manufacturer conține furnizorii, iar tabela Product Manufacturer Mapping conține legătura dintre furnizor și produsul acestuia.
III.3 Înregistrare client inexistent
Pentru a putea intra ca și client trebuie in primul rând sa te înregistrezi. Astfel în partea dreaptă sus avem butonul Register.
III.3 Lista de butoane din partea dreapta sus
Dupa apăsarea butonului Register se va deschide un formular unde trebuie completat cu datele personale așa cum este ilustrat in imaginea următoare. Câmpurile marcate cu asterix roșu sunt obligatorii.
III.4 Formularul de inscriere a datelor personale
De asemenea mai avem nevoie de o parolă care se va completa de două ori ca nu cumva sa fie greșită.
III.5 Formularul cu scrierea parolei
După ce toate câmpurile obligatorii au fost complectate putem valida formularul apasând butonul register.
Acum suntem un client înregistrat și astfel putem face cumpărături pe acest site nu doar sa vizualizăm produsele.
III.4 Logare ca și client existent
Daca suntem client existent inseamnă ca deja am trecut prin pașii prezentați anterior si deja avem o adresă de email validă și o parolă. Pentru a ne loga pe pagină trebuie să apăsăm butonul de Log prezentat în imaginea III.3.
Dupa ce dăm click pe buton ni se va deschide o pagină pe care vom introduce adresa de email si parola. În cazul în care totuși nu ai cont pe acest site, poți apasa butonul Register și de pe această pagină.
III.6 Pagina de Log in
În urma logării, în partea dreaptă sus in loc de imaginea III.3 va apărea adresa noastră de email si butonul de Log out, așa cum se poate observa in imaginea III.7
III.7 Lista de butoane din dreapta sus după logare
Acum suntem logați așa că nu ne mai ramane nimic altceva decât sa facem cumpărături. De exemplu facem click pe butonul Adidasi/Tenisi. Aici vom putea vedea toate produsele din acea categorie.
De asemenea putem alege și modul în care să fie afișate produsele. În figura III.8 putem observa ca avem selectatla sort by position. Alte opțiuni pe care le avem sunt in ordine alfabetică atât cresător cât și descrescător, în funcție de preț (crescător sau desrescător) sau în funcție de data apariției produsului pe site.
III.8 Apariția produselor ditr-o categorie
La partea de display se poate alege câte produse dorim să apară pe pagină. Putem avea 3, 6 sau 9 produse afișate pe o pagină. Mai avem o modalitate de a alege modul de afișare in pagină. Pot fi atât în formă pătratică așa cum este afișat în imaginea III.8, câtși sub formă de listă, fiecare fiind asezataă una sub alta, în dreapta lor având scris atât numele și prețul cât și o mică descriere.
În momentul în care ne place un anumit produs putem da click pe acel produs pentru a vedea mai multe detalii despre el. În pagina care se va deschide vom avea o mică descriere a produsului, de asemenea vom putea selecta mărimea dorită, culoarea (după caz) și nr de obiecte dorite, așa cum se poate observa în imaginea III.9.
III.9 Pagina de descriere a produsului.
După ce am ales detaliile dorite despre ael produs, il putem adăuga in coș doar apasând pe butonul Add to cart, iar acesta se va adauga automat în coșul meu de cumpărături. Toți acști pași ii pot repeta pentru oricâte produse doresc.
Dacă am terminat cumpărăturile vom apăsa pe butonul Shopping cart din imaginea III.7 pentru a vizualiza produsele adăugate în coș.
III.10 Pagina de Shopping cart
Odată ajunși pe această pagină putem verifica produsele adăugate în coș. În cazul în care am adăugat un produs de care nu aveam nevoie sau m-am răzgândit în cumpărarea unui anumit produs, acel produs poate fi șters din coșul meu de cumpărături doar cu un singur click pe casuța cu remove.
De asemenea, se mai poate observa in figura III.10 că se poate modifca si numărul de bucăți dorite. În cazul în care în figura III.9 ai dat direct să adaugi produsul in coș fără a selecta numarul de bucăți dorite, acum încă mai poți modifica acest lucru înainte să finalizezi comanda.
O altă facilitate foarte draguță pe care o ofera magazinul nostru este Gift wrapping. Dacă ai o onomastică, sau esti in apropierea sărbătorilor și nu poți ajunge la toți în vizită, noi te ajutăm. Putem împacheta produsul, fiind cadoul perfect pentru persoana respectivă, iar lucrul cel mai plăcut este ca îl livrăm direct la persoana respectivă, astfel te scutim de un drum.
În partea stângă a paginii putem observa că putem beneficia și de discount-uri. Așadar în cazul în care dispunem de un card cadou sau un cod de discount, îl introducem în chenarul respectiv. Aceste lucru este foarte util de exemplu vara, fiind perioda concediilor, lumea nu prea mai cumpără așa mulți pantofi, astfel vânzările putând să scadă semnificativ. Soluția este foarte bună deoarece oferind un discount cât de mic lumea nu ezită sa profite de acest lucru.
Un alt lucru foarte eficient este calculul estimativ al transportului. Așa cum putem observa in figura III.10, selectând țara(statul), orașul și introducând codul poștal ni se va calcula costul transportului. Acest lucru este foarte avantajos deoarece, în acest fel vom știi prețul exact al coletului.
III.11 Adresa de livrare
Dacă toate câmpurile sunt completate putem da checkout pentru a plasa comanda.În acest moment mai avem câțiva pași de urmat până la finalizarea comenzii. Primul pas este verificarea adresei de livrare, sau in cazul în care nu avem introdusă, o putem scrie acum.
Câmpurile marcate cu asterix roșu sunt obligatorii. Prima adresă este cea din cartea de identitate, iar cea de a doua adresa poate fi de la locul de muncă, sau dacă suntem plecați putem scrie adresa la care ne poate găsi pentru ridicarea coletului. După completarea câmpurilor din figura III.11 putem da click pe butonul continue.
III.12 Adresa de livrare a produsului
Următorul pas este modalitatea de primire a coletului. Putem alege să il ridicăm personal din magazin, bifând căsuța In-Store Pickup din imaginea III.12 sau putem alege adresa de livrare a acestuia.
Daca am ales cu livrare la domiciliu, în urmatorul pas putem alege cum dorim sa fie livrat. Așa că avem 3 modalități:
Terestru
Livrare cu avionul următoarea zi
Livrare cu avionul peste 2 zile.
III. 13 Modalități de livrare
Urmatorul pas este modalitatea de plată. Și aici avem 3 modalități de plată:
La destinație
Cu cardul
Cec
III.14 Modalități de plată
În funcție de modalitatea de plată selectată următorul pas diferă. Daca alegem prima metodă, să trimitem banii, atunci coletul va fi reținut pana la verificarea plății. Va apărea și un mesaj in are vă anunță acest lucru.
Daca alegem modalitatea de a plati cu cardul, ni se vor cere datele personale ale cardului, cum ar fi:
Tipul de card
Numele proprietarului
Numarul cardului
Data expirării
Codul cardului afisat pe spatele acestuia
În cazul în care alegem cea de a treia modalitate de plată, trebuie sa întroducem numarul ordinului de plată cu care s-a facut plata.
III.15 Pasul final al comenzii
Ultimul pas în finalizarea comezii il putem vedea in figura III.15. Aici avem scrise toae detaliile adăugate anterior. După cum putem observa în partea stângă sus avem adresa de facturare și modalitatea de plată. În partea dreaptă sus avem adresa de livrare și modalitatea de livrare. Dupa cum am specificat și anterior, putem introduce și doua adrese, una cea de domiciliu, iar cealaltă cea la care vom fi găsiți la momentul respectiv.
În partea din mijloc a paginii avem coșul nostru de cumpărături, adică produsele p care le-am selectat si dorim sa le cumpărăm. În dreptul fiecărui produs aem prețul unitar, numărul de bucăți solicitate si costul total(Preț unitar X Nr bucăți).
În partea dreaptă jos avem totalul de plată al întregului colet, acesta fiind constituit din: costul produselor + costuri de livrare + taxe.
După verificarea datelor, dacă acestea sunt corecte, putem confirma comanda apăsând pe butonul Confirm. Astfel comanda a fost plasată, urmând sa fie livrată.
III.16 Mesaj de confirmare plasare comandă
După apăsarea butonului Confirm ne va apărea un mesaj de mulțumire ca să știm că a fost inregistrata comanda noastră. Avem și un număr al comenzii in cazul in care dorim sa sunăm sa vedem in ce stadiu e, dacă a fost livrată sau urmează sa fie.
Dacă am terminat cumpărăturile putem să dăm Log Out pentru ca să nu intre din greșală cineva cu user-ul dumneavoastră.
III.5 Logare ca și administrator
Pentru a te putea loga ca și administrator, în capătul link-ului principal se va adăuga „/admin”. Va trebui să ne autentificăm, exact ca și cum am fi un client. Avem exemplu in imaginea III.6, iar datele de autentificare sunt:
Email: [anonimizat]
Parola: 123!@#qweQWE
După autentificare pagina va arăta ca și unui client, singura diferență e ca in partea de sus avem panoul de administrare, iar dând click pe el vom fi trimiși la partea de back-end a site-ului.
III.17 Home Page ca administrator
Cu ajutorul lui nopCommerce partea de administrare este foarte ușoară. Pe prima pagină avem statisticile. Astfel putem vedea și gestiunea comenzilor,vânzările,stocul etc. În momentul de față avem doar comanda creată anterior la punctul III.4.
III.18 Tabel comenzi totale
Primul tabel reprezintă o statistica a tuturor comenzilor și este exemplificată in imaginea III.18. Aici putem vedea stadiul comenzilor, astfel:
Pending – o comandă se află aici in momentul în care clientul a efectuat-o pe site
Processing – comanda ajunge in stadiul de processing când administratorul a preluat-o și urmeaza să o livreze.
Complete – comanda ajunge in stadiul complete în momentul în care ea a ajuns la destinație, iar tranzacția a fost efectuată.
Cancelled – o comandă poate ajunge în stadiul cancelled în cazul în care s-a făcut comanda pe site dar din păcate acel produs nu mai există in stoc.
III.19 Tabel comenzi incomplete
Următorul tabel reprezintă comenzile incomplete. Aici putem observa mai bine în ce stadiu se află comada. Astfel avem 3 stadii:
Pending payment status – adică nu s-a efectuata încă plata de către client
Not yes shipped orders – comenzile care încă nu s-au livrat
Total incomplete orders – comnezi totale incomplete.
În acest tabel avem și costurile comenzilor pentru a putea fi mai ușor de urmărit sumele de bani care trebuie să intre in casă, iar in cea de a treia coloana avem numarul de comenzi incomplete pentru fiecare linie. Pentru a putea vizualiza fiecare comandă in parte se va da click pe view all.
III.20 Tabelul clienților înregistrați
Urmatorul tabel nu ține de gestiune, dar este destul de important și el de altfel, deoarece ține evidența numărului de clienți. Acest lucru este de mare ajutor pentru designer-ul nostru. Atfel el poate vedea dacă afacerea lui prosperă in rândul unor clienți noi.
După cum se poate observa în imaginea III.20, putem vedea câți clienți s-au înregistrat in ultima săptămână, ultimele două săptămâni, în ultima lună sau ultimul an. Așa putem face o comparație, iar în cazul în care nu mai apar prea mulți clienți noi, să observe acest lucru și eventual sa înceapa să iși facă puțin marketing pentru creșterea clienților.
Pe bază de cantitate
Pe bază de valoare
III.21 Tabele cu cele mai vândute produse
Tabelele III.21 a) și b) ne ajută să vedem care sunt cele mai vândute produse atât cantitativ cât și valoric. În acest fel vom știi care sunt cele mai căutate produse de pe site și vom putea evita sa rămânem fără ele pe stoc.
Aceasta a fost prima pagină din back-end-ul destinat administratorului. Putem considera că este gestiunea magazinului nostru, iar cu aceste statistici putem să ținem evidența comenzilor atât pentru a nu avea comenzi care nu au fost îndeplinite cât și pentru a vedea rulajul comenzilor.
În următoarele rânduri voi descrie cum putem introduce atât o categorie nouă cât și produse noi intrate pe stoc sau produse deja existente.
III.22 Accesarea categoriilor
Pentru a putea vedea ce categorii avem și pentru a adăuga categorii noi vom accesa butonul Catalog-> Categories -> List sau Tree view așa cum este ilustrat în imaginea III.22. Astfel ni se va deschide pagina cu toate categoriile existente ilustrată in imaginea III.23.
III.23 Lista de categorii
Aici putem atât să edităm categoriile deja existente cât și să adaugăm alte categorii. Dacă apasăm pe butonul Edit, putem sa modificam la Published dacă dorim să apară o anumită categorie pe site sau nu. În momentul de față apar toate categoriile, deorece avem bifă la toate în coloana Published. În cazul în care o categorie nu ar apărea și pe pagina principală atunci în loc de bifa albatră vom avea un x roșu.
În coloana Display order se va trece rangul în care să apară pe site. Dacă sunt de același rang vor apărea în ordinea în care sunt trecute în tabel. Cu cât e mai mic rangul cu atât va apărea mai în față.
Pentru a adăuga o categorie nouă se va da click pe butonul Add new și se vor completa rândurile care ne interesează pentru categoria respectivă.
De asemenea dacă avem foarte multe categorii putem face o căutare după o anumită categorie completând numele acelei categorii în chenarul Category Name și se va apăsa pe butonul Search.
Pentru adăugarea de produse noi se va intra tot ca și în imaginea III.22 doar că de data asta vom alege Catalog -> Products -> Manage Products.
III.24 Pagina de produse din panoul de administrare
În această pagină vom avea afișate toate produsele existente pe site. Putem face o căutare după un anumit produs în funcție de anumite criterii cum ar fi: nume,categorie, furnizor etc. Dacă dorim să stergem un anumit produs îl selectăm și apăsăm butonul Delete. Dacă nu dorim să ștergem produsul ci doar să nu mai apară pe site atunci apăsăm butonul Edit iar la Published in loc de bifa albastră punem un x roșu.
Tot la Edit putem modifica și stocul în cazul în care a mai intrat marfă pe stoc dintr-un anumit produs, prețul acestuia și dacă produsul se vinde la bucată sau la calup.
Dupa cum se poate observ în bara de meniu, putem face export la produse în diferite programe XML sau EXCEL, lucru care ne poate ajuta la contabilitatea firmei. Acest lucru îl putem face pentru toate produsele sau numai pentru produsele selectate. De asemenea ne putem crea automat propriul catalog în format pdf.
Pentru a adăuga un produs nou vom da click pe butonul Add new, unde ni se va deschide o pagină nouă unde vom putea introduce detalii despre noul produs.
III.25 Meniul adăugării unui produs nou
Cel mai important de făcut este ca după completarea rubricilor de pe pagina respectivă să se apese butonul Save în cazul în care nu mai dorim să facem alte mofidicări și Save and Continue Edit în cazul în care dorim să edităm produsul în continuare dar la altă rubrică din meniu.
La Product Info avem date despre acel produs cum ar fi:
Numele produsului;
Tipul de vânzare al acestuia, dacă se vinde la bucată sau nu;
O scurtă descriere care va apărea pe pagina tuturor produselor;
O descriere mai amănunțită care va apărea pe pagina produsului respectiv;
Putem selecta dacă dorim să ne lase clienții o revizuire a produsului;
Tag-uri ale produsului pentru a ajuta clienții să gasească acel produs mai repede când face o căutare automată;
Prețul;
De asemenea se poate selecta ca acel produs să fie la promoție și se va trece perioada promoției;
Dacă dorim sa nu mai apară butonul de cumpărare(în cazul în care nu îl mai avem pe stoc), sau butonul de cerere(WishList);
Dacă dorim să se faca precomandă;
Costurile de livrare în funcție de dimensiuni și greutate ș.a.m.d.
Obligatoriu trebuie salvat înainte de a selecta alta categorie din meniu să nu riscăm sa pierdem tot ce am scris. Dacă nu dorim să ieșim din editarea acestui produs, vom da Save and Continue Edit, deoarece încă nu am selectat categoria din are face parte acest produs.
Pentru a selecta categoria vom accesa Category mappings din bara de meniu.
III.26 Alegerea categoriei pentru un produs
După cum avem ilustrat în imaginea III.26, pentru a putea adăuga o categorie vom da click pe butonul Add new record. Astfel ni se va face un rand now unde vom putea alege una dintre categoriile existente.
De ținut minte este că aici nu putem adăuga o categorie nouă care să nu fie în listă, așa că înainte să adăugăm un produs nou ar fi bine să verificăm dacă există categoria în care dorim să il punem. În caz contrar lasăm categoria necompletată până creem acea categorie, dar să nu uităm să revenim să selectăm categoria pentru că altfel riscăm sa nu apară produsul pe site.
III.27 Rubrica clienților din meniul principal
O altă rubrica interesantă din meniul principal este cea a clienților. Dacă accesăm butonul Customers ca și în imaginea III.27 putem afla o serie de informații despre aceștia. Descriem pe scurt fiecare rubrică în parte:
Customers – avem toți clienții înregistrați pe site și vom putea vedea toate detaliile despre aceștia.
Customer Roles – selectăm ce anume pot face sau vedea diferite persoane pe site cum ar fi: clienții, vizitatorii neînregistrați, administratorii etc;
Online Customers – așa cum ii spune și numele de altfel, putem vedea care utilizatori sunt online.
Customer Reports – aici vedem cumparaturile clienților și tot aici modificam statusul comenzii, dacă este livrată sau în curs de livrare
Vendors – aici avem furnizorii.
IV Concluzii
În concluzie eu consider că acest magazin online este de foarte mare folos pentru designer-ul de pantofi. Deși este destul de complex, este ușor de utilizat și este exact pe placul său deoarece nu mai are nevoie de o echipă de întreținere a site-ului, acesta putând sa se descur e și singur.
Foarte important de reținut este faptul că nopCommerce este open source, așadar îl putem modifica dupa bunul plac atât pe platformă cât și direct în cod. Acest lucru este un avantaj foarte mare deoarece nu riscăm să ne intâlnim cu un alt site care să aibe aceeași interfață.
Ce s-ar mai putea dezvolta la aplicația mea pe viitor ar fi în cazul în care designer-ul de pantofi ar avea vânzări foarte multe, și-ar putea deschide mai multe magazine, iar pe platforma si-ar putea face magazin online pe fiecare punct de lucru.
Un alt lucru care s-ar mai putea dezvolta la aplicație ar fi să mutăm baza de date de pe server-ul local pe un server virtual, de exemplu Cloud. Astfel am evita supraîncărcarea server-ului în cazul în care acesta va avea mai multe magazine și implicitit un rulaj al stocului mai mare.
Bibliografie
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: Proiectarea Si Implementarea Unei Aplicatii Web Magazin Online (ID: 150211)
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.