MAGAZIN ONLINE PENTRU COMERȚ ELECTRONIC CU PHP ȘI MYSQL Lect. Dr. Mihail Cherciu ABSOLVENT Andreea-Elena Nicu BUCUREȘTI 2017 CUPRINS noțiuni… [307493]

UNIVERSITATEA DIN BUCUREȘTI

FACULTATEA DE MATEMATICĂ ȘI INFORMATICĂ

LUCRARE DE LICENȚĂ

MAGAZIN ONLINE PENTRU COMERȚ ELECTRONIC

CU PHP ȘI MYSQL

Lect. Dr. Mihail Cherciu

ABSOLVENT: [anonimizat]-Elena Nicu

BUCUREȘTI

2017

CUPRINS

noțiuni introductive 4

1.1 Introducere 4

1.2 Istoria comertului electronic 4

1.3 Comerț Electronic 5

1.4 [anonimizat] 5

1.5 Comportament online 6

1.6 Dezvoltarea unui site responsive 7

Fundamentele teoretice ale tehnologiilor folosite 10

2.1 Generalități despre HTML standard 10

2.1.1 Istoria Interetului 10

2.1.2 Despre HTML 12

2.1.3 Stuctura unui document HTML 12

2.1.4 Paragrafe 14

2.1.5 Atribuite ale unui tag 15

2.1.6 Culorile in HTML 18

2.1.7 Legături 18

2.1.8 Adăugarea imaginilor 20

2.1.9 Crearea tabelelor 21

2.2 Extinderi ale HTML standard 22

2.2.1 Cascading Style Sheets 22

2.2.2 Javascript 24

2.3 Limbajul PHP 25

2.3.1 Scurt istoric al limbajului PHP 26

2.3.2 Structura unui fisier PHP 26

2.3.3 Variabilele, constantele si operatorii in PHP 26

2.3.4 Instructiuni in limbajul PHP 27

2.3.4.1 Instructiunea if 28

2.3.4.2 Instructiunea while 28

2.3.4.3 Instructiunea for 28

2.4 Baza de date cu MySQL 29

2.4.1 Introducere in MySQL 29

2.4.2 Crearea bazei de date 29

2.4.3 Tipurile de date 30

2.4.4 Sortarea datelor 31

2.4.5 Filtrarea datelor 32

2.4.6 Actualizarea datelor 32

Descrierea aplicației 32

3.1 Descrierea aplicației 32

3.2 Scopul aplicatiei 32

3.3 Aria de acoperire 33

3.4 Raport de analiza 33

3.4.1 Grupurile de interese 34

3.4.2 Colectarea cerintelor 34

3.4.3 [anonimizat] 34

3.4.4 [anonimizat] 36

3.4.5 Interpretarea cerintelor 38

3.5 Baza de date 43

3.5.1 Structura bazei de date 43

3.5.2 Diagrama conceptuală 47

3.5.3 Conectarea bazei la PHP 47

3.6 Structura aplicației 50

3.6.1 Pagina principala 50

3.6.2 Creare cont si formularul de logare 53

3.6.3 Pagina – ofertele zilei 54

3.6.4 Pagina produselor 56

3.6.5 Cosul de cumparaturi 59

3.6.6 Formularul de contact 62

Bibliografie 63

1. noțiuni introductive

1.1 [anonimizat], să începi un business este o provocare, din cauza competiției acerbe și a brand-[anonimizat].

Personal, consider că un astfel de proiect reprezintă o motivație de a îmi depăși limitele și de a reuși să îmi demonstrez mie că pot sa dezvolt o aplicație care să concureze cu celelalte existente astăzi.

1.2 [anonimizat] o [anonimizat], înregistrându-se o creștere uriașă. Puțini știu însă că totul a început cu o bunicuță care a făcut o [anonimizat].

[anonimizat] 1984, [anonimizat], [anonimizat], momentul istoric în care se află. Ea a folosit o [anonimizat], [anonimizat]. Totul se întâmplă prin intermediul linii telefonice.

Experimentul de cumpărături online a [anonimizat], în special în turism. Plata se făcea numerar, în momentul în care produsele erau livrate la ușa cumpărătorului.

De remarcat constuie faptul că acest lucru se întâmpla cu mai mulți ani înainte ca World Wide Web să ajungă la public. Acest lucru s-a întâmplat abia în 1990, de către Tim Berners-Lee, iar în 1992, deja apăruse Netscape, care mai târziu a introdus și Secure Sockets Layer(SSL) encryption, pentru a securiza tranzacțiile.

Amazon.com a început în 1995 să vândă totul online, iar ebay a lansat primele licitații.

1.3 Comerț ElectronicPartea inferioară a formularului

Comerțul electronic reprezintă activitatea de cumpărare sau de vânzare, prin internmediul căreia datele sunt transmise la distanță. Activitatea este specifică în anii actuali politicii de expansiune a marketing-ului, cea mai mare parte dintre activitățile comerciale desfășurându-se în mediul online, în pofida activităților întreprinse în magazine. Tot mai multe centre comerciale aleg să își închidă locațiile fizice, păstrându-și doar un depozit în care stochează marfa, toate activitățile de vânzare având loc pe Internet.

Numărul site-urilor de e-commerce este într-o continuă creștere, crescând astfel și concurența, dar și exigențele cumpărătorilor, ei având în acest moment șansa să comparare produsele și să aleagă prețurile care le sunt cele mai la îndemână, la doar un click distanță.

Răbdarea utilizatorilor a scăzut astfel, iar dacă site-ul nu este construit corespunzător și nu este intuitiv, renunțarea se produce în mod imediat.

Pe de altă parte, experiența utilizatorului este cu atât mai importantă într-un site de e-commerce, pentru ca, față de un simplu site de prezentare, încrederea inspirată este mult mai importantă, pentru că trebuie să se realizeze și tranzacția, utilizatorii fiind susceptibili să își ofere datele.

1.3 Promovarea site-ului

Uneori, in special cu concurenta acerba din piata, este necesara promovarea site-ului prin diverse procese ce au ca scop atragerea atentiei si pastrarea vie in memorie a site-ului, pentru a ii face pe utilizatori sa revina si sa realizeze conversia.

Forma de promovare a site-ului prin intermediul careia ne putem adresa acelorasi persoane care ne-au accesat deja site-ul, dar nu au cumparat, poarta numele de „Remarketing”.

Pentru a rula totusi o astfel de campanie, trebuie creata o lista de remarketing a utilizatorilor site-ului, lista care sa se updateze in mod automat, si sa adauge utilizatorul la lista, in momentul in care acceseaza site-ul.

Totusi, este de retinut ca nici una dintre datele personale ale utilizatorilor nu sunt retinute in aceste liste, ci cand se acceseaza site-ul utilizatorului i se asigneaza un cookie. Sistemele de stocare detinute de Google au avansat atat de mult, incat se reuseste identificarea aceluiasi utilizator pe mai multe device-uri – pentru ca stim ca utilizatorii nu mai detin doar un device, ci chiar 3 sau mai multe – laptop, tableta, mobile, s.a.m.d.

SCHEMA OAMENI CU MAI MULTE DEVICE-URI.

Totusi, in Septembrie 2016, Google a lasat in spate cookie-urile, si a schimbat complet fata marketing-ului, imbratisand login-ul. In aceasta directie, avand date din produsele Google, precum Play, Chrome, Maps, Youtube, Gmail.

1.4 Comportament online

Pentru dezvoltarea corecta a aplicatiei, trebuie sa mergem si mai departe in studiu si sa verificam unde fac oamenii cumparaturile. Observam, deci, ca cel mai mare procent dintre ei merg in magazin sa faca cumparatura, dar procentul care este in crestere este cel online, deci sa facem un magazin de acest gen, nu poate fi decat o idee buna.

Mai departe in analiza, trebuie verificat unde fac oamenii research, si am descoperit ca oamenii aleg online-ul, citind review-uri si comentand pe retele de socializare.

1.5 Dezvoltarea unui site responsive

In procesul de cumparare, un utilizator trece prin mai multe faze, iar importanta dezvoltarii corecte a site-ului, isi spune cuvantul, mai ales cand se descopera ca foarte multi useri sunt pierduti in prima faza, din cauza incarcarii greoaie a site-ului, sau din cauza ca acesta nu e intuitiv si userii ies din site.

Pentru a analiza cele mentionate mai sus, am gandit site-ul sa se incarce rapid, pentru ca un alt studiu realizat de Think wih Google chiar in 2017, arata ca bounce rate-ul, adica rata de abandon a site-ului creste cu fiecare secunda in care utilizatorul asteapta ca site-ul sa se incarce site-ul. In constructia din punct de vedere al mobile-ului, am luat in considerare studii Google, pentru a intelege importanta si impactul pe care l-ar avea dezvoltarea incorecta a a acestei componente.

Source: academy.exceedlms.com

Problema cea mai mare o consituie faptul ca daca utilizatorii intampina o problema pe mobile, cea mai are parte dintre ei aleg un alt site.

Astfel, daca consideram Google Consumer Barometer, si doar utilizatorii din Romania, vom observa ca device-ul cel mai uzitat de catre useri este mobile-ul.

Pe de alta parte, desi mobile-ul este cel mai folosit, el nu prezinta incredere inca pentru utilizatori, cumpararea efectiva realizandu-se tot pe computer.

Scopul oricarui site de ecommerce ar trebui sa fie din punctul meu de vedere, ca utilizatorii sai in final sa devina “Brand Advocates”. Cu aceasta denumire ma refer la persoane cu puternica prezenta in online, care sunt capabile sa influenteze cresterea sau caderea unui brand. Un studiu recent arata ca 1 din 3 useri worldwide sunt Brand Advocate, ei comentand, share-uind content sau construind review-uri despre produsele achizitionate. Fiind niste persoane comunicative, si interactionand in mediul online cu foarte multi alti utilizatori pe care ii influenteaza, acest lucru ne arata cat de importanti sunt. In definitiv, acesta este modul in care putem dezvolta o relatie cu consumatorii nostri, investind intr-un grup potential si pastrand atat legatura cat si oferindu-le informatiile, prin intermediul unor voci din fata brand-ului, care sa rezoneze cu ei. In mediul online, aceste voci se numesc „Influenceri”, si sunt ascultate in special de „Millennials”.

„Millennails”, nu sunt doar o audienta din online, cat si o generatie. Consider ca pentru aplicatia dezvoltata de mine, acestia sunt cei mai relevanti, pentru ca sunt tineri, sunt dorinci de cele mai noi gadget-uri si activi pe internet.

Astfel, pentru magazinul online pe care l-am dezvoltat, am considerat foarte importanta constructia mobile responsive – pentru ca majoritatea utilizatorilor care o vor accesa o vor face de pe mobile.

2. Fundamentele teoretice ale tehnologiilor folosite

2.1 Generalități despre HTML standard

2.1.1 Istoria Internetului

Necesitatea creării unui concept precum este cel de astăzi a Internetului, a survenit din dorința Guverului american de a conecta între ele departamentele militare, cât și universitățile. În urmă acestui demers, a apărut Advanced Research Project Agency (acronim ARPA).

O altă necesitate care stă la baza Internetului pe care îl cunoaștem astăzi, este că stocarea unor informații cu un caracter special, cum erau cele deținute în cadrul departamentelor militare, ar fi însemnat o vulnerabilitate, ele fiind astfel o țintă vulnerabilă, care o dată eliminată, ar fi adus cu șine dispariția unor informații prețioase, ce nu pot fi recuperate. Pe de altă parte, s-au avut în vedere și defecțiunile tehnice ce ar fi putut să apăra, și astfel pierderea unor informații valoroase, fiind din nou un pericol. O metodă care a fost gândită, deci, a fost aceea de creare a unei rețele, ce copia și distribuia informațiile pe mai multe calculatoare.

În anul 1980, deja existau colegii și universități mari care erau conectate la Internet, și care își puteau împărții astfel informații despre cercetări. 10 ani mai târziu, Internetul a deschis porțile spațiului comercial, iar mai multe firme având viziune expansionistă, au luat în considerare faptul că acesta este modul perfect în care se pot dezvolta.

Principiul care a stat la baza crearii Internetului, l-a constituit astfel, faptul ca doua sau chiar mai multe calculatoare pot comunica intre ele. Astazi, in mai putin de o secunda, orice mesaj poate fi trimis, oriunde se doreste pe glob.

Evident, a fost necesara si standardizarea Internetului, astfel incat aceste calculatoare sa “comunice” intr-un mod unitar. Au aparut familii de protocoale standardizate, precum TCP/IP, in cadrul caruia fiecarui calculator I se asigna o adresa, numita adresa IP (Internet Protocol Address).

Versiunea de standard folosita de catre adresele IP este IPv4, dar o data cu expansiunea fulgeratoare, in prezent se migreaza catre versiunea urmatoare, denumita IPv6.

O adresa IPv4, are o lungime de 32 de biti (adica 4 octeti), fiecare octet fiind scris urmat de un punct. Atat adresele IPv4, dar si cele IPv6, folosesc subnetarea, o metoda prin care se imparte o adresa in doua parti – network address si broadcast address, dar si range-ul de adrese asignabile statiilor. Daca nu este facuta corect, subnetarea poate aduce dupa sine costuri suplimentare.

Pentru a merge mai departe in intelegerea conceptelor enuntate in lucrarea prezenta, trebuie sa ne aplecam atentia asupra unui prim concept – WWW- World Wide Web – idee aparuta la CERN- ce enunta integrarea unor sisteme informationale disparate intr-un mod unitar, fara diferente intre sursele de date.

Practic, WWW este un sistem de documente si de informatii scrise in hypertext, si legate intre ele astfel incat sa fie accesate prin reteaua mondiala de Internet. Acest hypertext este interpretat de aplicatii special create, numite “browsere”. Conceptul de hyperlink a fost introdus de Ted Nelson si Douglas Engelbart, inainte de existent CERN, fapt ce a dus la aparitia primului browser grafic, folosit chiar si pentru Microsoft Windows. Totusi, pentru ca piata se dezvolta rapid, in 1994 a aparut Netscape Navigator, care a devenit in curand cel mai popula browser din lume, ajungand sa fie folosit in proportie de 90% dintre utilizatori.

Cativa ani mai tarziu, Netscape a lansat Fundatia Mozilla, in efortul de a aduce un produs open-source.

Ca reactie, Microsoft a lansat bine cunoscutul Internet Explorer, pe care l-au inclus implicit in sistemul de operare dezvoltat de ei. Microsoft a ajuns in 2002 sa detina un procent enorm din piata browserelor – 95%.

2.1.2 Despre HTML

In primul rand, HTML este un acronim, care provine de la HyperText Markup Language, ceea ce inseama ca este un limbaj care ajuta la crearea unor documente, formatate astfel incat ele sa poata fi publicate in WWW- World Wide Web.

Aplicatia web pe de alta parte, devine o colectie interconectate de pagini web, dar care ruleaza de aceasta data sub o arhitectura de tip client-server, folosindu-se de tehologiile WWW, enuntate anterior. Pentru ca mententanta aplicatiilor pe parte de client era mult prea complexa, costisitoare si susceptibila unor erori, acest tip inlocuieste modelele in care atat serverul cat si clientul ruleaza tehnologii proprietar. Pentru crearea lor se folosesc tehnologii precum: PHP, PEARL, PYTHON, HTML, CSS, JAVASCRIPT.

Printre avantajele crearii unei aplicatii web, as enumera faptul ca ele se construiesc independent de un sistem de operare, nu necesita instalarea in prealabil a nici unui soft, pentru utilizare, ele ruland doar pe browserul pe care utilizatorul il are instalat in calculator, iar unul dintre cele mai importante, il reprezinta faptul ca orice modificare este realizata, se propaga pentru toti utilizatorii in real time.

Revenind, la HTML, el a inceput sa fie utilizat din 1990 , ulterior el capatand forme mai avansate prin versiuni ce au fost lansate, dar la baza ramanand acelasi concept de integrare a unui material sub forma de text si imagine, intr-un browser web, ceea ce face facila navigarea.

Scrierea unui astfel de fisier HTML, este foarte simpla, si va fi prezentata in cele ce urmeaza. Pentru redactare se poate folosi un editor de text, pentru a fi sigur ca textul scris este corect – in special un editor care foloseste identari si elemente de marcare – cum este Notepad++.

2.1.2 Stuctura unui document HTML

Un document HTML este structurat logic in doua sectiuni: antent si corpul codului, lucru care face usoara intelegerea limbajului acesta si implementarea. De avut in vedere este faptul ca prin conventie, toate informatiile scrise in limbajul HTML incep cu o paranteza unghiulara deschisa(<), terminandu-se cu o paranteza unghiulara inchisa(>). Limbajul este gandit astfel incat sa gaseasca aceste semne, multe dintre ele fiind construite ca perechi cu inceput si sfarsit, iar interpretorul HTML sa ia decizii in consecinta. Controalele de inceput poarta denumirea de „control de deschidere”, iar cele de final, se numesc „controlae de inchidere”.

Controlul esential in scrierea unei pagini HTMl, este chiar marcajul <html>, care este de asemenea de tip pereche, fiind necesara mentionarea inchiderii acestui marcaj cu urmatoarea scriere: </html>, adica o bara inclinata. Aceasta bara inclinata are ca scop inchiderea unui marcaj.

Astfel, o pagina simpla in HTML se scrie asa:

<html>

<head>

<title> Pagina web exemplu Nicu Andreea

</title>

</head>

<body>

<p>

Exemplu de paragraf scris pentru o pagina HTML simpla

</p>

</body>

</html>

La simpla rulare, in browser vom avea afisata urmatoarea:

Dupa cum putem observa, ce a fost scris intre „title”, a ajuns in titlul paginii web, iar ce a fost scris in „body”, la nivel de paragraf, apare in corpul paginii create.

Tragem urmatoarele concluzii:

Pagina web incepe cu tag-ul <html> si se termina cu acest tag, exact cum am mentionat anterior

pagina HTML contine antet si subsol, adica head si body

Optional, intre tag-urile „head”, putem defini si un titlu pentru pagina dezvoltata, titlu ce se noteaza intre <title>, inchizandu-se cu </title>

Comentariile vor fi trecute intre tag-urile „<! – -„ si „- – >”.

2.1.4 Paragrafe

Pentru ca am mentionat anterior despre paragrafe, trebuie ca acest aspect sa fie detaliat. Astfel, exact cum spuneam, pentru introducerea unui paragraf se scriu tag-urile <p> … </p>.

De mentionat este ca fata de tag-ul <html>, sau alte tag-uri unde este neaparat necesara inchiderea, pentru tag-ul paragraf nu este obligatoriu, deoarece finalul unui paragraf poate fi detectat si in momentul in care se identifica, din nou, inceputul altui paragraf cu <p>.

La afisare, doua paragrafe unul dupa celalalt, vor fi separate printr-o linie goala intre ele.

Foarte important este faptul ca fiecare tag din limbajul HTML, detine niste atribute specifice. Este evident astfel, ca si tag-ul paragraf are cateva atribute, care merita mentionate in prezenta lucrare.

Astfel, atributul „align”, controleaza alinerea textului dintr-un paragraf. Cand nu mentionam alinierea textului, acesta este aliniat, in mod implicit la stanga.

Atributul „align”, poate avea urmatoarele valori „center”, „left”, „right” si „justify”.

Consideram exemplul oferit anterior. Astfel:

<html>

<head>

<title> Alinere paragrafe Nicu Andreea

</title>

</head>

<body>

<P align="center"> Paragraf aliniat in centru</P>

<P align="right"> Paragraf aliniat la dreapta</P>

<P align="left"> Paragraf aliniat la stanga</P>

<P align="justify">Paragraful aliniat justify – egal la ambele margini </P>

</body>

</html>

Astfel, la rulare, vedem alinierile in pagina si cum interpreteaza browserul, Chrome in acest caz, codul HTML scris.

2.1.5 Atribuite ale unui tag

In continuare, daca dorim sa folosim si alte atribute de formatare a textului in interiorul unui paragrafe, de mentionat si necesare, as considera urmatoarele:

<s>…</s> – acest tag are rolul de a afisa textul completat intre cele doua tag-uri, dar taiat cu o linie orizontala

Exemplu:

<html>

<head>

<title> Licenta Nicu Andreea

</title>

</head>

<body>

<P > <s> Text taiat </s> </P>

</body>

</html>

Iar in browser cum se va afisa codul HTML:

<u>..</u> – acest tag afiseaza textul cuprins intre aceste doua, dar il subliniaza

Exemplu:

<html>

<head>

<title> Licenta Nicu Andreea

</title>

</head>

<body>

<P > <u> Text subliniat </u> </P>

</body>

</html>

Iata cum se va afisa acesta in browser:

<i>..</i> – acest tag afiseaza textul cuprins intre tag-uri, dar il afiseaza in format „italic”, adica inclinat la dreapta.

Exemplu:

<html>

<head>

<title> Licenta Nicu Andreea

</title>

</head>

<body>

<P > <i> Text italic </i> </P>

</body>

</html>

Iata cum arata in browser:

<b>..</b> – tag-ul va afisa textul cuprins intre identificatorul de inceput si cel de final, dar o va face in format boldat

Exemplu:

<html>

<head>

<title> Licenta Nicu Andreea

</title>

</head>

<body>

<P > <b> Text boldat </b> </P>

</body>

</html>

Iata cum arata in browser acest cod:

<br> – se incepe un nou rand

Exemplu:

<html>

<head>

<title> Licenta Nicu Andreea

</title>

</head>

<body>

<P > Prima propozitie din paragraf.<br>

A doua propozitie din paragraf </P>

</body>

</html>

Iata cum arata in browser:

2.1.6 Culorile in HTML

In HTML exista o intreaga paleta de culori care pot fi utilizate. Pentru a specifica o anumita culoare, se pot utiliza doua moduri:

se specifica constanta de tip RGB(Rosu, Verde, Albastru)

prin constanta HTML ce reprezinta numele culorii (scrise in engleza). De exemplu, se poate folosi „blue’, „red”, „black”, etc.

Principiul de baza al crearii acestei palete pe care limbajul HTML o foloseste este combinatia intre culorile mai sus mentionate, Rosu, Verde, Albastru, in diverse combinatii, mentionandu-se cat de mult din acea culoare a fost folosita de la 0 la 255 – 0 inseamna ca nu s-a folosit in compozitia culorii rezultate absolut deloc acea componenta, iar 255, ca s-a folosit la intensitate maxima respectiva, pentru a crea culoarea finala.

2.1.6 Legaturi

Limbajul HTML foloseste hiperlink-uri, pentru a realiza conexiune cu alte documente de pe Internet, sau pentru a isi apela propriile documente din interiorul paginii.

Astfel, putem clasifica legaturile din limbajul HTML, in trei mari categorii astfel:

Interne- legaturi realizate exact cum spuneam mai sus in interiorul pagini web – ancore

Locale – legaturi realizate cu alte pagini HTML, localizate pe acelasi server

Externe – legaturi la pagini HTML aflate pe alte servere Web

HTML-ul foloseste pentru definirea legaturilor o ancora „<a>”.

Sintaxa necesara, deci, pentru a crea o legatura, fie ca este una interna, sau care redirectioneaza catre o imagine, un film, un text, etc, este urmatoarea:

<a href=”URL”> Textul pe care se da click </a>

Exemplu:

<html>

<head>

<title> Licenta Nicu Andreea

</title>

</head>

<body>

<a href=”http://prometheusprogrammatic.ro”> Textul pe care se da click </a>

</body>

</html>

Pentru exemplificare, am inlocuit URL-ul unde directionam utilizatorii cu o pagina web cunoscuta. Astfel, data utilizatorii vor da click pe „Textul pe care se da click”, ei vor fi trimisi catre http://prometheusprogrammatic.ro.

Culoarea link-urilor poate fi modificata introducand in „body” atributele urmatoare:

Link – legatura nevizitata anterior

Vlink – legatura vizitata

Alink – legatura activa

In mod implicit, legatura link are culoarea albastru, cea vlink are culoarea rosu, iar alink are culoarea portocaliu; tot in „body”, se pot defini culori specifice, dorite de catre dezvoltator.

Pe de alta parte, cum spuneam anterior, se pot defini legaturi interne, intr-o singura pagina. Daca de exemplu, un client are o pagina de produs, si nu doreste creerea mai multor pagini, incluzand inclusiv formarul de contact in partea de jos a paginii, pentru redirectionarea utilizatorilor direct catre fomularul aflat in partea de jos, se pot folosi aceste ancore.

O ancora arata astfel:

<a name=”#ancora”> Ancora </a>

Uneori, ne este necesara folosirea unei ancore care sa directioneze catre o alta pagina. Putem face astfel:

<a name=”paginatest.html#ancora”> Ancora in pagina diferita a aceluiasi site </a>

2.1.6 Adăugarea imaginilor

Pentru inserarea imaginilor, se va folosi tag-ul <img>. Fata de ce scriam anterior, acest tag nu are forma de inchidere. In schimb, are o serie de atribute:

Src- unul dintre cele mai importante atribute, pentru ca mentioneaza sursa de unde provine imaginea, el fiind prescurtarea de la „source”. Se foloseste src=”imagine.jpg”, adica fotografia este situata in acelasi folder cu fisierul .html, src=”../imagine.jpg”, daca fotografia este situata pe un nivel anterior folderului unde se afla fisierul .html, iar daca vrem sa mentionam un anumit server de unde se va apela imaginea, putem face astfel, src=http://google.ro/img.jpg(presupunand ca imaginea este apelata direct de pe serverul Google).

Align/ Valign – exact ca si in cazul paragrafelor, acest atribut specifica tipul de alinere, dar de aceasta data, pentru imagine. In aceasta directie, se vor folosi align si valign, cu urmatoarele optiuni:

Align

Center

Left

Right

Valign

Top

Bottom

Center

Alt=”text” – prin acest atribut se specifica un text ce va fi afisat in cazul in care exista o problema de conexiune si imaginea nu poate fi afisata corespunzator.

Hspace – permite stabilirea spatiului alb din stanga si dreapta unei imagini.

Sintaxa:

<img hspace="pixels">

Vspace – permite stabilirea spatiului alb de sus si de jos in raport cu imaginea

Sintaxa:

<img hspace="pixels">

2.1.6 Crearea tabelelor

Tabelele reprezinta un subiect foarte important, cand vorbim despre constructia unei pagini HTML. Ele ne ajuta, de fapt, sa controlam paginarea, si astfel cum sunt pozitionate elementele intr-o pagina dezvoltata astfel.

Tag-urile pe care le putem utiliza, sunt <table> si </table>. Tot ce este scris intre aceste doua tag-uri, va forma un tabel. Totusi, pentru ca nu dorim dar sa creem un chenar in jurul respectivului text declara intre aceste doua tag-uri, trebuie sa separam si celulele tabelului acestuia. Folosit deci, <TD> si </TD>.

Pentru a introduce un rand in tabel, folosim <TR>, acronim provenit de la „Table Row”, adica in romana, rand in tabel. Si acest tag, are nevoie de un tag de inchidere; astfel, folosim </TR>.

Iata un exemplu simplu de tabel creat cu tag-urile mentionate mai sus:

<table border="1">

<tr>

<td>Nota 1</td>

<td>10</td>

</tr>

<tr>

<td>Nota 2</td>

<td>7</td>

</tr>

</table>

El arata astfel in momentul in care este rulat in browser:

Exact cum am vorbit si la tag-urile anterioare, si tabelele au niste proprietati specifice.

In exemplul de mai sus, am folosit „Border”, ceea ce inseamna ca am declarat o bordura pentru tabelul pe care l-am creat. Acest atribut nu poate lua o valoare mai mica de 1. Eu am pastrat in configuratie si liniile duble, dar puteam renunta la ele, introducand atributul CELLSPACING, de valoare „0” – atribut care specifica distanta intre celulele unui tabel. Pentru ca am vorbit de culori, si in interiorul unui tabel se pot schimba culorile – folosind BGCOLOR. In plus, se pot folosi si atributele „width” si „height”.

2.2 Extinderi ale HTML standard

Pentru a trece mai departe, trebuie intai sa facem clar diferentierea intre HTML-ul standard, si extinderea sa – HTML-ul dynamic. HTML-ul standard presupune ca datele sunt puse direct in fisierul HTML, in timp ce la cel dinamic, exista un cod care se apeleaza fie dintr-un JQuery, fie dintr-un Javascript. Acest lucru se realizeaza in special prin apeluri ajax/api, unde raspunsul este ulterior pus in .html.

Un lucru de mentionat, este ca daca se verifica manual o pagina oarecare, si se da click dreapta, apoi „view page source”, ceea ce va putea fi vazut este doar HTML-ul static; cel dynamic nu va fi acolo. Aceasta este din punctul meu de vedere, cea mai clara distinctie intre cele doua.

2.2.1 Cascading Style Sheets

Cascading Style Sheets, sau acronimul CSS se foloseste pentru a stiliza tag-urile HTML. Acest lucru presupune ca de la culoarea textului, pana la culoarea meniurilor si a elementelor definitivate din pagina, se foloseste CSS pentru a le stiliza.

Un avantaj al CSS il consituie faptul ca toate browserele de la ora actuala il suporta.Pe de alta parte, stilul poate fi definit intr-un singur fisier, iar in pagini doar se apeleaza respectivul fisier, el constiuind o revolutie la momentul la care a aparut, pentru ca automatiza foarte multe procese – modificarile realizandu-se doar in fisierul cu formatare si propagandu-se catre toate paginile care il apelau.

Anterior, am vorbit despre limbajul HTML. Trebuie avut in vedere ca limbajul CSS nu poate fi scris, fara cateva cunostinte de HTML enuntate anterior. Ca sa diferientem deci cele doua limbaje, putem spune ca in HTML structuram continutul paginilor web, iar in CSS le conferim o formatare.

Pentru a face legatura intre HTML si CSS, se foloseste tag-ul <style>..</style>, care va fi scris in head-ul paginilor. De exemplu, pentru ca aminteam anterior de automatizare, putem defini in syle un anume font, o anume dimensiune a caracterelor si definind acesi parametrii mai departe, se vor comporta ca niste variabile globale, nemai fiind nevoie sa modificam in tot documentul astfel de atribute, ci doar in “style”.

Un exemplu de cod scris ar arata astfel:

<STYLE>

P {

background:red;

color:yellow;

font-family:"Comic Sans MS";

font-size:14pt;

}

</STYLE>

Cum spuneam, pentru a lega HTML-ul, de CSS, va fi necesar sa rescriem pagina simpla HTML, enuntata in capitolul anterior.

Astfel, codul scris va arata asa:

<html>

<head>

<title>  Licenta Nicu Andreea

</title>

<STYLE>

P {

background:red;

color:yellow;

font-family:"Comic Sans MS";

font-size:14pt;

}

</STYLE>

</head>

<body>

<P> Paragraf cu atribute definite in CSS</P>

</body>

</html>

La rulare, codul va arata astfel:

Asadar, puterea CSS-ului consta in faptul ca se pot stiliza pagini intregi, foarte rapid, doar prin scrierea unor simple linii de cod. Cand vorbim de mai putin cod, evident ca ne referim si la incarcarea mai rapida a paginilor, lucru despre care aminteam mai sus – incarcarea greoaie a unei pagini poate face ca utilizatorii sa paraseasca site-ul si sa se indrepte, din pacate, catre concurenta.

2.2.2 Javascript

Javascript este un limbaj de programare care este orientat pe obiecte. El a fost dezvoltat de catre Brendan Eich, purtand initial numele de Mocha, apoi LiveScript, si in final a fost denumit cu numele pe care il poarta si astazi.

Daca dorim integrarea JavaScript, intr-un document HTML care este scris deja, folosim tag-ul <script>, care trebuie si inchis cu </script>.

La fel ca la codul HTML, avem nevoie de un editor simplu – precum este Notepad++.

Cum se insereaza Javascript intr-o pagina HTML

Pentru a insera JavaScript intr-o pagina HTML, exact cum am spus mai sus se utilizeaza tag-ul <script>.

Iata un exemplu de utilizare a acestui tag, cu HTML pentru o pagina simpla.

<html>

<body>

Inserare Javascript in HTML

<br>

<script type="text/javascript">

document.write("Acesta este textul");

</script>

</body>

</html>

Elemente de baza ale limbajului

Comentariile

Sintaxa comentariilor in Javascrip este aceeasi folosita si in C++, dar si in alte limbaje. Astfel, pentru a comenta o portiune de text, sau de cod, vom folosi urmatoarele:

pentru o linie simpla de comentariu se folosesc “//”

pentru un comentariu pe doua linii, vom folosi “/*”, urmand sa inchidem comentariul “*/”

Variabilele

In JavaScript variabilele se folosesc pentru a pastra valori sau expresii. Fata de alta limbaje, JavaScript are niste reguli pentru numele variabilelor. Astfel, numele acestora este case senzitive – adica daca declaram variabila „x’, dar ulterior in cod folosim „X”, cele doua variabile sunt interpretate in mod diferit, separat una de cealalta.

Dupa ce declaram o variabila, ea nu contine valori, dar poate fi initializata chiar in momentul declararii. De mentionat, este ca daca vrem sa atribuim text, el trebuie scris intre ghilimele, pentru a fi recunoscut.

Functii

O functie in JavaScript poate fi redactata si apelata in orice punct al paginii realizate, fie ca vorbim de sectiunea de head, sau de cea de body. Este recomandat totusi, sa fie scrisa in <head>, pentru a fi siguri ca pagina apuca sa se incarce intr-un timp util, in care utilizatorul sa nu dea refresh acesteia.

2.3 Limbajul PHP

PHP este un acronim pentru Hypertext Preprocessor, desemnand un limbaj utilizat la scara larga, un limbaj de programare ce permite modificarea paginilor web inainte de a le transmite de la server, catre browserele utilizatorilor.

Avantajul PHP este ca poate consulta baze de date, trimite email-uri, in cazul in care ne este necesara si aceasta integrare sau chiar executa comenzi ale sistemului de operare.

Astfel, este de la sine inteles ca acesta este un limbaj server-side, fata de limbajele prezentate anterior, care erau client-side, pentru formatarea si dezvoltarea User Interface-ului.

Este deci evident ca trebuie sa realizam o distinctive intre cele doua componente. La inceputul dezvoltarii web, nu existau limbaje server-side. Limbajele orientate pe server, ruleaza codul pe server.

In prezenta lucrare, cat si in proiect am ales sa folosesc PHP ca limbaj server-side, dar mai exista si altele: PHP, Python, ASP.NET in C#, C++ sau Visual Basic.

2.3.1 Scurt istoric al limbajului PHP

Putini stiu ca PHP-ul cunoscut astazi este de fapt succesorul unui produs care se numea la vremea respectiva PHP/FI, si care a fost creat in 1994 de catre Rasmus Lerdorf. El a gandit initial limbajul ca unul care urmarea vizitele din propriul CV din pagina web pe care o avea, iar cu timpul si cu modificari aduse, a reusit sa creeze un produs care este astazi cunoscut si utilizat la nivel global. Pe de alta parte, tot el a creat si niste tag-uri numite FI – „Form Interpreters” – care preluau date din niste formulare scrise in HTML, si formau variabile utilizate ulterior in interogarea bazei de date. In urmatorii ani dupa ce cele doua componente erau separate, acesta a decis ca este momentul sa le uneasca, creand PHP/FI.

Cresterea acestui limbaj a fost una organica, pentru ca s-a raspandit fiind open-source.

2.3.2 Structura unui fisier PHP

Orice fisier PHP scris, trebuie sa fie salvat cu extensia .php. Daca ne referim la continutul acestui fisier, el incepe cu <?php si se inchieie cu tag-ul de sfarsit ?>.

Instructiunile sunt cele care deservesc limbajul PHP, toate instructiunile inchiendu-se cu punct si virgula, caci in lipsa acestuia, se va returna eroare.

Fata de HTML, PHP-ul necesita si cateva cunostinte minime de programare, pentru ca preia de exemplu functia de afisare „print” din C. Mai sunt si alte instructiuni, precum este „echo”, care se foloseste deobicei in footer-ul site-ului, pentru diverse mentiuni, precum dezvoltatorul, sau detalii de contact – „echo” pune deci intre ghilimele textul care i-a fost specificat.

Pentru a genera primul script in PHP, este necesar sa instalam pachetul XAMPP. Astfel, toate scripturile generate, vor fi adaugate in fisierul htdocs, unde a fost instalat XAMPP.

2.3.3 Variabilele, constantele si operatorii in PHP

Inainte de a vorbi despre declararea variabilelor, operatorilor si constantelor, trebuie amintite care sunt cele mai folosite tipuri de date din PHP. Astfel, exista urmatoarele tipuri de date: boolean, array, string, integer, null.

Tipul Boolean este unul dintre cele mai simpliste tipuri, pentru ca permite doar doua valori. Aceste doua valori sunt „TRUE” si „FALSE”. Tipul Array, exact ca in limbajul C, reprezinta un vector de lungime data; el poate fi chiar si un vector de litere sau cuvinte, nu neaparat cifre si numere. Tipul String reprezinta sirurile de caractere. Tipul integer pe de alta parte reprezinta, exact cum ii spune si numele, multimea de numere intregi. Nu in ultimul rand, unul dintre cele mai uzitate tipuri de date este cel NULL, reprezentand o variabila fara valoare.

In continuare, vom discuta despre Variabile si utilizarea acestora. In PHP, variabilele sunt intotdeauna precedate de semnul dolar, $. Daca vorbim de denumirea variabilelor, mentionam faptul ca este case-sensitive, adica se tine cont de litere mari sau mici. O variabila definita cu litera mare, nu va aceeasi, deci, cu o variabila definita cu litera mica. Referintele sunt permise in acest limbaj, astfel ca trebuie avut in vedere ca daca folosim o variabila noua care face referinta spre o variabila originala, in momentul modificarii cele noi, o vom modifica in mod automat si pe cea initiala. Exact ca in C, exista variabile locale si variabile globale, adica variabile care sunt vizibile doar intr-o bucata de cod si variabile care pot fi acccesate in tot codul.

Pe de alta parte, constantele sunt valori fixe, care nu suporta modificari in momentul in care codul este executat, dar trebuie avut in vedere ca, la fel ca la variabile, ele sunt case-sensitive. Totusi, pentru ele s-a stabilit o conventie – scrierea implicita cu litere mari.

Nu in ultimul rand, operatorii sunt simboluri ce precizeaza operatia asupra opreanzilor. Operanzii de aceasta data, sunt reprezentati de constantele amintite anterior, de variabilele, de asemenea, amintite anterior, sau chiar de expresii si nume de functii. Iata cativa operatori, cei mai importanti si mai folositi: „!”, „++”, „- -„ , „*”, „/”, „<”, „>”, „&&”, „==”, „=”, s.a.m.d.

2.3.4 Instructiuni in limbajul PHP

O instructiune, este o comanda, sau o serie de comenzi pe care programatorul le da caulcatorului, spre executie. Astfel incat, exact cum aminteam anterior, instructiunile sunt cele care deservesc limbajul PHP. In general, dar nu neaparat obligatoriu, instructiunile sunt scrise separat pe cate o linie, exact ca in C, pentru ca codul sa fie lizibil.

O instructiune devine deci, o expresie dupa care se scrie un punct si virgula, „;”, delimitator dupa care calculatorul stie ca instructiunea s-a incheiat.

Exact ca in C, in PHP, se pot scrie instructiuni expresie, sau bloc (instructiuni delimitate de alocade. Trebuie avut in vedere ca la instructiunile bloc, declararea se face in afara blocului respectiv, daca este necesara.

2.3.4.1 Instructiunea if

Instructiunea “if”, folosita in C, are aceeasi utilizare si in PHP. Mai sus mentionam exact acest lucru – faptul ca pentru a intelege mai usor limbajul PHP, este necesara si cunoasterea C-ului.

Astfel, daca o anume expresie nu respecta conditia, se poate executa o instructiune, in caz contrar executandu-se o alta.

Un exemplu este chiar din licenta, pentru verificarea logarii.

2.3.4.2 Instructiunea while

Exact ca si la “if”, instructiunea “while” pastreaza functionalitatea si forma consacrata deja in C.

Astfel, ca intai se evalueaza o anume expresie, iar daca e adevarata sau diferita de valoarea 0, se executa o instructiune care este subordonata si se revine la evaluarea expresiei. Evaluarea expresiei se face pana la atingerea conditiei de terminare.

2.3.4.3 Instructiunea for

Instructiunea “for”, se foloseste pentru cicluri, in care conditia de final poata fi data in interiorul loop-ului.

Un exemplu ar putea fi de exemplu

<?php

for ($n= 0;$n<= 10;$n++) {

echo "Numarul n este: $n ";

}

?>

La o rulare a codului am obtinut:

Cu alte cuvinte pentru fiecare valoare a lui n de la 0 la 10, inclusiv, pentru ca am folosit operatorul mentionat mai sus de „<=”, adica mai mic sau egal, a fost afisat mesajul „Numarul n este”, precedat de valoarea de la pasul respectiv.

2.4 Baza de date cu MySQL

Pentru a detalia despre bazele de date MySQL, trebuie in primul rand sa intelegem ce inseamna o baza de date. Astfel, o baza de date este o colectie ordonata a unor informatii. Deci, daca se doreste strangerea unor informatii, dar si aranjarea lor intr-un mod logic, baza de date reprezinta cea mai buna solutie. Tot prin intermediul ei pot fi create legaturi logice intre elementele acesteia, astfel ca intelegerea poate fi simplificata.

2.4.1 Introducere in MySQL

MySQL a venit ca un sistem versatil pentru bazele de date mai sus enuntate, astfel incat acest limbaj, folosit alaturi de PHP, mai sus mentionat, sa permita constructia unor aplicatii complexe.

Trebuie deci, daca se foloseste impreuna cu PHP, prin intermediul pachetului XAMPP, pentru rularea pe hostul local, ca MYSQL sa fie in directorul aferent „\MYSQL”.

2.4.2 Crearea bazei de date

In MySQL, pentru crearea unei baze de date, sa presupunem, sub numele de “student”, se foloseste urmatoarea comanda:

CREATE DATABASE studenti;

In momentul creeari, baza de date va putea fi accesata, cu:

USE studenti;

Iar daca se doreste stergerea bazei de date deja create anterior, se procedeaza astfel:

DROP DATABASE studenti;

Odata baza de date creata, ea are nevoie, pentru a functiona, de tabele. De fapt, informatiile sunt stocate generic la nivelul bazei de date, dar in fapt, ele sunt granulate si impartite in tabele. In tabele, coloanele sunt notate cu nume, iar randurile, sunt de fapt valorile pe care le au coloanele, adica denumirile acestora.

Intr-o tabela, vom vedea ca exista deci, pentru ca functioneaza pe principiul unei matrici, un anumit numar de coloane, iar randurile au un numar nedefinit, ele urmand sa fie specificate, odata cu intrarile in tabela respectiva.

Pentru a crea deci, tabelele, vom folosi urmatoarea instructiune:

CREATE TABLE nume ( coloana1 tipdedate, coloana2 tipdedate,etc);

Totusi, valorile dintr-o tabela, cele de la nivel de rand, despre care aminteam anterior, trebuie adaugate si ele cu o comanda. Aceasta este:

INSERT INTO nume(coloana1, coloana2, …, coloanan) values(val1, val2, val3, …, valn);

unde, „nume” reprezinta numele tabelei in care dorim sa inseram valoarile, iar val1, val2, val3, sunt valorile efective care vor fi inserate, iar coloana1, coloana2, coloana3, coloanele aferente.

Pentru a selecta, dintr-o tabela anterior creata, un anumit set de valori, folosim:

SELECT * from nume;

Unde nume, reprezinta numele tabelei de unde dorim sa extragem respectivele date, iar „*”, este folosit pentru a extrage absolut toate datele existente in respectiva tabela. De sigur ca se pot extrage doar anumite campuri din tabela, care indeplinesc anumite conditii, in fuctie de operatiile pe care dorim sa le facem pe respectiva tabela, sau intreaga baza de date.

Foarte important este ca se pot folosi alias-uri, pentru ca in momentul in care tabela este returnata, prin folosirea „SELECT”-ului, sa nu se returneze denumirea initiala a coloanei, ci o alta denumire dorita. Acest lucru este foarte util cand facem operatii intre doua coloane. De exemplu, se poate calcula, pentru un magazin online, care este stocul disponibil la momentul respectiv, deci va fi necesara o diferenta intre ceea ce exista anterior in depozit, si ceea ce a fost vandut si a fost inregistrat in acest sens in baza de date. Astfel, diferenta celor doua campuri, poate fi trecuta prin intermediul unui alias – stoc disponibil.

2.4.3 Tipurile de date

In MYSQL, exista cateva tipuri de date principale: numere, text, data si ora. Mai exista si tipul liste, dar este mai putin folosit.

De mentionat, pentru tipul numere, ar fi urmatoarele, care sunt uzitate destul de frecvent:

Int

Smallint

Tinyint

Mediumint

Bigint

Float

Double

Pentru tipul text, se folosesc:

Text

Char

Varchar

Tinytext

Mediumtext

Longtext

In cele din urma, vorbim despre ora si despre data. Exista deci:

Date

DateTime

TimeStamp – generata automat de catre calculator

2.4.4 Sortarea datelor

Sortarea, reprezinta procesul prin care datele stocate, sunt ordonate cu anumite interogari, intr-o ordine dorita de catre noi. Comanda care face aceasta sortare, este in MySQL, “Order by”. Aceasta comanda se foloseste impreuna cu Select, de tipul SELECT * from table order by conditie. De reamintit si in acest punct al lucrarii ca “*”, returneaza toate elementele tabelei, fara sa existe vreo alta conditie.

Se poate folosi, alaturi de “Order by”, si clauza “limit”, care afiseaza datele, cu o anumita limita; de exemplu toate datele incepand cu linia a X-a, unde X este linia dorita.

2.4.5 Filtrarea datelor

Filtrarea datelor in MySQL se face folosind “where”, dar niciodata fara sa se foloseasca si “SELECT”, impreuna cu clauza aceasta.

“Where”, se scrie, de altfel, precedat de o conditie, afisandu-se doar liniile tabelei pentru care conditia conferita este adevarat. Exista anumite notatii, care ar fi de mentionat. De exemplu, daca se doresc toate cartile care incep cu litera a, se foloseste where numecoloana like „a%”.

Am vorbit la punctul precedent de „Order By”. El poate fi folosit impreuna cu where, pentru diverse opreatii necesare.

2.4.6 Actualizarea datelor

Actualizarea datelor se face folosind clauza „UPDATE”. Pentru redenumire inca, folosim „RENAME”.

Stergerea unei linii se realizeaza cu „DELETE”, iar stergerea unei intregi coloane cu „ALTER TABLE”, pentru ca o astfel de modificare, modifica intreaga structura a aplicatiei.

3. Descrierea aplICatiei

3.1 Descrierea aplicației

Aplicatia Sales Bug, este un magazin de e-commerce, dezvoltat cu PHP si MySQL, care urmareste sa atinga un public tanar. Astfel, constructia magazinului si produsele pe care utilizatorii le pot accesa, au fost alese in acest scop.

SalesBug, comercializeaza produse electronice si carti si isi propune sa atinga un numar de cel putin 100.000 de utilizatori lunari, in primul an.

3.2. Scopul aplicatiei Sales Bug

Scopul aplicatiei dezvoltate este sa pot oferi o platforma care sa raspunda nevoilor utilizatorilor de a isi gasi produse electronice si carti. Voi verifica permanent cu ajutorul tool-urilor instalate in pagina, daca produsele propuse spre vanzare sunt de interes pentru acestia, verificand metrici precum „engagement”, dar si „time on site” – adica timpul pe care un utilizator il petrece pe o anumita pagina de produs si ce vizualizeaza.

Cand am gandit structura acestui magazin online, baza de date a fost necesara pentru depozitarea tuturor informatiilor despre utilizatori, lucru care ne ajuta si sa le sugeram produse similare si sa ii retargetam. Avantajul unui magazin online, fata de unul offline, constituie faptul ca este deschis 24/7, si poate fi accesat de oriunde utilizatorul se afla.

3.3 Aria de acoperire

Aria de acoperire a aplicatiei o constituie persoane pasionate de gadget-uri, precum este target-ul Millennials, dar din punct demografic, persoane cu varste de pana in 40 de ani, pasionate de IT si de ultimele tendinte, cu un venit mediu spre mare.

De asemenea, aplicatia se adreseaza si pasionatilor de lectura, care pot gasi pe site o varietate de carti; de asemenea, aplicatia se directioneaza si catre tinerii studenti si elevi care au nevoie de carti pentru cursurile la care iau parte.

3.4 Raport de analiza

3.4.1 Grupurile de interese

Putem remarca trei mari categori de target pe care aplicatia urmeaza sa le atinga:

Gadget Oriented Avid Readers Students Millennials

3.4.2 Colectarea cerintelor

Generarea continutului este din punctul meu de vedere, la fel de important precum este si dezvoltarea in sine a aplicatiei, deoarece o aplicatie nu poate exista fara persoanele care sa o acceseze, iar continutul atrage si creste „engagement-ul”.

Pentru colectarea cerintelor, am ales si metoda indirecta si directa, astfel incat rezultatele sa fie cat mai concludente. Pentru metoda directa am realizat un interviu in care am adresat o serie de intrebari relevante, iar pentru metoda indirecta am ales research-ul.

3.4.3 Colectarea cerintelor – metoda directa

Avand deci in vedere acest aspect, si pozitia de dezvoltatori, este necesar sa tinem deci cont de  parerea posibililor utilizatori. Asadar, am creat un set de intrebari si am considerat ca target-ul potrivit de respondenti il consitutie chiar colegii nostri din facultate si cateva persoane din afara ei, care se aflau in target-ul demografic mentionat mai sus. Am ales tipul de sondaj-fata in fata-deoarece avantajul cel mai mare este clarificarea raspunsurilor si mai putine erori, oamenii avand tendinta sa raspunda la intamplare, dupa cateva raspunsuri corect. Persoanele chesionate au trebuit sa aleaga o varianta de raspuns, care corespunea cel mai bine situatiei lor, fara a fi nevoie sa formuleze un raspuns cu propriile cuvinte.

Culegerea datelor s-a facut deci pe un esantion de 50 de persoane. Am considerat esationul ca fiind unul potivit populatiei careia ne adresam. Am chestionat deopotriva 25 femei si 25 barbati, de la fiecare din cele trei specializari, dar si din ani diferiti, dar si oameni cu job-uri, care terminasera facultatea, sau oameni fara studii.

De asemenea, am considerat si metoda indirecta, prin care am realizat o documentare si am cautat studii de la Google si de la alti furnizori de tehnologie, astfel incat dezvoltarea sa fie cat mai corect posibil.

Care sunt obiectivele sondajului?

Identificarea interesului pe care l-ar avea respondetii fata de o astfel de aplicatie

Identificarea frecventei de utilizare a aplicatiei web

Identificarea preferintelor utilizatorilor in privinta produselor vandute prin intermediul aplicatiei

Identificarea motivelor pentru care utilizatorii ar folosi aplicatia pe termen lung

Întrebările pe care le-am adresat sunt:

Ați achiziționat vreodată un produs prin intermediul

Da

Nu

În ce măsură vă influențează publicitatea în achiziția produselor?

În mare măsură

Într-o mică măsură

Deloc

Cât de des mergeți la shopping?

De mai multe ori pe săptămână

dată pe săptămână

De câteva ori pe lună

dată pe lună

Care sunt categoriile de magazine pe care le frecventati cel mai des?

Magazine cu articole vestimentare

Magazine cu electrocasnice si gadget-uri

Magazine cu produse alimentare

Magazine de ingrijire personala si cosmetice

Librarii si magazine de birotica

Altele

Pe care dintre site-urile de e-commerce le accesati cel mai des?

Altex

Emag

PCGarage

Evomag

Altele

Aveti cont de client pe site-uri de e-commerce?

*este vorba de Altex, Emag, PCGarage, Evomag sau altele

Da

Nu

Cat de des folositi site-uri de e-commerce?

Zilnic

Saptamanal

Lunar

Mai rar de o data pe luna

Prin ce mod ati aflat de aceste site-uri?

*este vorba de Altex, Emag, PCGarage, Evomag

Retele sociale – Facebook, Twitter

Forum-uri

Blog-uri

Print – ziare, reviste

Radio

Reclame TV

Cunostinte

Prin alt mijloc

Ce va determina sau v-ar determina sa vizitati si sa achizitionati produsele de la oricare dintre aceste site-uri?*

*este vorba de Altex, Emag, PCGarage, Evomag

Promotii foarte bune

Gama variata de produse

Posibilitatea de achizitiona produse printr-un simplu click

Preturi mai mici ca in magazine

Renumele site-ului

Parerile pozitive ale clientilor site-urilor

Care este device-ul pe care folositi cel mai des un astfel de site?

Desktop – laptop, computer

Mobile

Tableta

Dacă intrați pe un site care se încarcă greu, așteptați să se încarce, să alegeți un altul?

Aleg alt site

Astept sa se incarce

Cât de interesat ați putea fi de o aplicație care vinde produse electronice și cărți?

Foarte interesat

Interesat

Puțin interesat

Deloc interesat

3.4.4 Colectarea cerințelor – metoda indirectă

Această metodă presupune colectarea de informații din surse documentare publicate; astfel, noi am luat în considerare studiul publicat de Google-Google Barometer, studiu realizat în România pe un eșantion de 1000 de persoane reprezetative pentru populație.

O mare parte din Millennials, categoria unde regăsim cea mai mare parte din target, petrec mult timp online, ceea ce consistuie un avantaj pentru aplicație, pentru că sunt cei mai des online – 90% dintre ei intră în fiecare zi pe Internet – deci zilnic pot fi potențiali cumpărători.

Este evident că device-ul pe care aplicația ar trebui să se focuseze este mobile-ul, pentru că conform studiului realizat de Google, 75% din targetul preponderent – Millennials – aleg să acceseze Internetul mai des de pe telefon, decât de pe computer.

Atenția aplicației ar trebui să se obțină un rank cât mai bun la Google pentru a fi pe primele paginile în căutările utilizatorilor, deci aplicația trebuie să fie construită în așa fel încât să țină cont și de acest aspect, cât mai simplă și mai intuitivă posibil. 55% din Millennials folosesc motoarele de căutare, precum Google Search, conform Google Barometer, să afle despre un produs pe care doresc să îl achiziționeze.

3.4.4 Interpretarea cerințelor

Care au fost rezultatele cercetarii desfasurate?

Ati achizitionat vreodata un produs prin intermediul Internetului?

Cea mai mare parte a respondentilor folosisera in prealabil achitizionasera in prealabil un produs prin intermediul Internetului. Din punctul meu de vedere 88% este un procent foarte mare, tinand cont ca acestia faceau parte atat din clase sociale diferite, cat si din punct de vedere demografic puteau fi clasificati in alte grupuri.

In ce masura va influenteaza publicitatea in achizitia produselor?

Scopul acestei intrebari a fost de a intelege daca publicitatea va ajuta la vanzarea produselor ce sunt prezentate pe aplicatia dezvoltata. De remarcat este ca un procent mic dintre respondeti au considerat ca nu sunt deloc influentati de publicitate.

Cat de des mergeti la shopping?

Cea mai mare parte din grupul de referinta considerat a mentionat ca alege sa iti faca cumparaturile o singura data pe saptamana, in weekend, cand reusesc sa ajunga la un supermarket, ei spunand ca de cele mai multe ori castiga online-ul in detrimentul locatiilor fizice, tocmai din punctul acesta de vedere – pot fi accesate de oriunde, indiferent de ora. Acest lucru il consider un plus, si un motiv in plus pentru crearea acestui magazine online.

Care sunt categoriile de magazine pe care le frecventati cel mai des?

Aceasta intrebare a avut scop descoperirea produselor ce ar trebuie sa fie comercializate prin intermediul magazinului online a carui dezvoltare se doreste, astfel incat sa raspunda nevoilor utilizatorilor si dorintelor acestora. Astfel, din studiul realizat s-a descoperit ca respondentii sunt interesati de noile tehnologii si gadget-uri in detrimentul produselor alimentare pe care mentionam la intrebarea anterioara, prefera sa si le cumpere din locatiile fizice, o data pe saptamana, in timpul weekend-ului, neavand inca incredere in magazinele online care comercializeaza astfel de produse.

Pe de alta parte, un aspect care este de sesizat este ca oamenii sunt interesati si de librarii, iar aplicatia va fi dezvoltata in aceasta directie, urmand sa prezinte carti si electrocasnice/gadget-uri, conform analizei efectuate.

Pe care dintre site-urile de e-commerce le accesati cel mai des?

Aceasta intrebare a avut scopul de a intelege mai bine utilizatorii care vor interactiona cu magazinul online. Cei mai multi sunt interesati de site-ul EMag. Un aspect esential ce trebuie remarcat cu privire la acest site este ca site-ul acesta este construit intr-un mod intuitiv, fiind printre primele locuri in SEO- Search Engine optimization – adica optimizarea pentru motoarele de cautare. In acelasi timp, navigarea si cautarea in site le aduce un plus consistent. Trebuie deci avut in vedere acest aspect foarte important in dezvoltarea site-ului. Un alt plus pe care site-ul il are este personalizarea in functie de utilizator si nevoile acestuia.

Aveti cont de client pe site-uri de e-commerce?

*este vorba de Altex, Emag, PCGarage, Evomag sau altele

Cu siguranta un alt aspect important de discutat este contul pe care utilizatorii de cele mai multe ori nu sunt interesati sa il faca. Observam totusi din analiza realizata ca pe un site de e-commerce oamenii sunt mult mai interesati sa isi faca cont, si au mai multa incredere sa isi lase datele.

Este impedios necesara o astfel de implementare deci, in care utilizatorii care vor da comanda de produse prin intermediul site-ului, sa isi poata face un cont.

Cat de des folositi site-uri de e-commerce?

66% dintre respondentii acestei intrebari au spus ca folosesc zilnic un site de e-commerce. Foarte important este deci, ca in constructia acestui site trebuie sa avem in vedere acest aspect, iar site-ul sa fie updatat zilnic cu produse, pentru a ii convinge sa converteasca. Astfel, zilnic, vor fi adaugate produse noi, pentru a creste engagement-ul site-ului si pentru a ii face pe acestia sa revina si sa vada cele mai noi oferte.

Prin ce mod ati aflat de aceste site-uri?

*este vorba de Altex, Emag, PCGarage, Evomag

De remarcat ca avem de-a face si am indentificat ca target „Millennails”, pentru ca aceasta generatie simte ca este necesar sa detina controlul pentru a se bucura avantajele libertatii. Astfel, cum pot face mai bine acest lucru, decat prin intermediul retelelor sociale, unde isi pot manifesta liber parerile. Pe de alta parte, remarcam reclamele TV. Desi s-ar crede ca TV-ul pierde teren in fata online-ului, odata cu integrarea si digitalizarea care are loc inca din 2016 si introducerea programmatic-ului TV de catre Google-publicitate cumparata direct din platforma Doubleclick, fara a mai trece pe la furnizorii de tehnologie pentru negocierea preturilor, el a fost reinventat. In plus, observam ca oamenii sunt in continuare influentati de parerea persoanelor din jurul lor, lucru care se face si prin intermediul retelelor sociale, exact ce mentionasem anterior.

Ce va determina sau v-ar determina sa vizitati si sa achizitionati produsele de la oricare dintre aceste site-uri?*

*este vorba de Altex, Emag, PCGarage, Evomag

In dezvoltarea aplicatiei este evident ca trebuie avuta in vederea posibilor utilizatori, astfel, intrebarea aceasta are rolul de a intelege la ce se asteapta acestia. Cum descoperisem si la o intrebare anterioara, site-ul trebuie sa contina cu siguranta produse dintr-o gama cat mai variata si promotii zilnice. Voi introduce asadar promotii zilnice, astfel incat site-ul sa fie updatat permanent cu cele mai noi produse care apar pe piata.

Care este device-ul pe care folositi cel mai des un astfel de site?

O

Optimizarea site-ului pentru mobile ar trebui sa fie unul dintre aspectele cele mai importante care ar trebui avute in vedere in constructia site-ului, pentru ca coform analizelor facute de Google sau chiar si din acest chestionar, observam ca cel mai mare procent dintre utilizatori aleg sa acceseze de pe mobile, „on the go”.

Daca intrati pe un site care se incarca greu, asteptati sa se incarce, sa alegeti un altul?

Observam din procentul mare de persoane care au raspuns ca aleg un alt site, ca oamenii nu mai au rabdarea in zilele noastre, mai ales din cauza pietei dezvoltate si a numeroaselor optiuni pe care le au. Asadar, daca „load time”-ul site-ului este unul mare, atunci utilizatorii vor alege sa paraseasca site-ul. Trebuie avut in vedere acest lucru in momentul in care se dezvolta site-ul, pentru ca indiferent de cate produse cu preturi atractive sunt pe site, daca utilizatorul nu apuca sa le vada.

Cat de interesat ati putea fi de o aplicatie care vinde produse electronice si carti?

Un procent foarte mare dintre respondenti s-au declarat interesati de o noua aplicatie care sa vanda electronice si carti, lucru pozitiv si care incurajeaza in dezvoltarea acesteia.

Baza de date

Structura bazei de date

Cum am mentionat anterior, baza de date poata fi creata direct din cod. Pentru a simplifica insa, ea poata fi creata folosind aplicatia XAMPP- phpmyAdmin.

Pentru deschiderea aplicatiei phpMyAdmin, in caseta text a browserului am introdus o adresa locala, pe portul 81. Adresa introdusa a fost http://localhost:81/phpmyadmin.

In fereastra care a aparut, am introdus numele bazei de date pe care doream sa o creez si am apasat pe butonul “Create”. Astfel, phpMyAdmin a creat comanda SQL de creare a unei baze de date, trimitand-o serverului MYSQL.

Urmatorul pas este cel de creare a tabelelor:

Users- tabelul users va stoca informatii despre utilizatorii aplicatiei pe care o construim

Acest tabel are 8 campuri. In vederea crearii acestui tabel, phpMyAdmin ne va cere. Introducerea numelui si tipului fiecaruia dintre aceste campuri ale tabelului.

CREATE TABLE `users` (

`id` int(11) NOT NULL,

`username` varchar(40) NOT NULL,

`password` varchar(40) NOT NULL,

`firstname` varchar(40) NOT NULL,

`surname` varchar(40) NOT NULL,

`address` varchar(50) NOT NULL,

`email` varchar(40) NOT NULL,

`telephone` bigint(20) NOT NULL);

ALTER TABLE `users`

ADD PRIMARY KEY (`id`);

AUTO_INCREMENT for table `users`;

ALTER TABLE `users`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;

Product – tabelul in care vor fi stocate produsele aflate in stoc, dar si informatii relevante despre acestea.

CREATE TABLE `product` (

`prod_id` int(11) NOT NULL,

`name` varchar(40) NOT NULL,

`category` varchar(40) NOT NULL,

`brand` varchar(40) NOT NULL,

`price` int(11) NOT NULL,

`image` varchar(50) NOT NULL,

`description` text NOT NULL,

`images` longblob NOT NULL);

ALTER TABLE `product`

ADD PRIMARY KEY (`prod_id`);

AUTO_INCREMENT for table `product`

ALTER TABLE `product`

MODIFY `prod_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=12;

Buyer – Tabelul folosit pentru maparea tabelului product, cu users

CREATE TABLE `buyer` (

id` int(11) NOT NULL,

prod_id` int(11) NOT NULL);

Delivery- informatii despre tranzactie si cel care va face livrarea.

CREATE TABLE `delivery` (

`transaction_id` int(11) NOT NULL,

`emp_id` int(11) NOT NULL,

`emp_name` varchar(40) NOT NULL,

`username` varchar(40) NOT NULL,

`total` int(11) NOT NULL);

ALTER TABLE `delivery`

ADD PRIMARY KEY (`transaction_id`);

AUTO_INCREMENT for table `delivery`

ALTER TABLE `delivery`

MODIFY `transaction_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=16;

Service -serviciul de livrare

CREATE TABLE `service` (

`emp_id` int(11) NOT NULL,

`emp_name` varchar(40) NOT NULL,

`cour_ser_comp` varchar(40) NOT NULL,

`mobile` bigint(20) NOT NULL

Diagrama conceptuală

3.5.3 Conectarea bazei la PHP

Pentru a conecta aplicatia la baza de date, am creat un fisier special PHP, care face acest lucru. Numele bazei mele de date era b_database, astfel incat, codul se conecta la aceasta baza, fara nici o parola in cazul acesta, fiind local.

Apoi, pentru fiecare dintre paginile aplicatiei dezvoltate, am creat cate un fisier in care am realizat conectarea cu baza de date, si diverse operatii pe aceasta.

Spre exemplu, pentru ca aplicatia este un magazin de e-commerce, am creat operatii pe tabela „product”, adica tabela care stocheaza produsele magazinului detinut, si am selectat doar pe acelea care erau din categoria „carti” si „electronice”.

Am creat pentru fiecare dintre categorii, cate un fisier separat, si o interogare separata, pentru corectudinea scrierii codului.

De asemenea, pentru ca securitatea reprezinta un subiect foarte important si care trebuie luat in serios, toate inregistrarile user-ilor se tin in baza de date. De notat este ca parola nu se stocheaza sub forma de text, lasand astfel prada pentru atacatori sa fure baza de date si sa foloseasca conturile user-ilor in scopuri personale.

Astfel, parola se stocheaza cu $password_hash, acest lucru insemnand ca se stocheaza in forma criptata. Aceasta criptare, face ca serverul sa stocheze doar hash-ul, adica sirul de caractere care inlocuieste parola reala aleasa de utilizator. Exista mai multe varianta de genera astfel de hash-uri, dar printre cele mai cunoscute sunt MD5 si SHA1. Pentru proiectul meu, am ales sa folosesc MD5, pentru ca majoritatea site-urilor folosesc aceasta metoda de hashing.

Parola criptata, pentru un utilizator creat cu ajutorul inregistrarii, a devenit astfel:

Evident ca utilizarea unui system de criptare, nu este o solutie 100% sigura ca parola nu poate fi sparta.

Verificarea informatiilor oferite de useri in momentul in care se logheaza, trebuie si ele verificate. Deci, intai se verifica daca datele furnizate apartin tabelelor, daca nu, se verifica, pe rand, care dintre elementele oferite, sunt completate in mod eronat, astfel incat utilizatorul sa stie si sa revina la ele, spre a le completa.

Plasarea comenzii se realizeaza, de asemenea, din cod, prin verificarea mai intai daca respectivul utilizator este logat, ca mai apoi sa se realizez o asociere intre cont si produsele din tabela „produs”. El va primi de asemenea si un mesaj prin care este anuntat ca produsele sale au fost adaugate in cos.

In plus, in momentul in care utilizatorul se logheaza, in baza de date ii sunt retinute, numele si prenumele, iar lui ii este afisat pe tot parcursul sesiunii, in bara, numele. Astfel ca meniul se personalizeaza in functie de numele utilizatorului, ceea ce face experienta personala, iar eu cred ca o astfel de aplicatie ar atrage mai tare.

In cazul meu, eu am completat cu elena, si astfel bara s-a schimbat in consecinta.

Acest lucru s-a realizat, deci, tot cu ajutorul bazei de date.

Dupa ce se realizeaza conectarea la baza de date, se realizeaza o functie numita „echo”, care apeleaza primul nume declarat la utilizator in campul din formularul de inregistrare, aflat in sectiunea nelogata.

Structura aplicației

Aplicatia, pentru un utilizator nelogat, are disponibile doar pagina principala, cu mesajul de bun venit, o pagina cu ofertele zilei, pentru a il face engage cu continutul si a ii demonstra ca trebuie sa se logheze si sa devina client pentru a beneficia de cele mai noi oferte, dar si pagina de inregistrare, unde efectiv isi face contul. Evident, exista si o pagina de contact, pentru ca utilizatorul, in cazul in care intampina vreo problema in contextul logarii, sau are alte intrebari, trebuie sa stie cui sa se adreseze.

3.6.1 Pagina principala

Pe prima pagina a aplicatiei este un mesaj de bun venit pentru utilizatorii nelogati. In acest fel ei sunt redirectionati catre etapa de inregistrare.

Am ales o tema aerisita pentru momentul cand utilizatorul ia pentru prima oara contact cu aplicatia, pentru ca mi-am dorit ca acestuia sa ii fie usor si sa nu fie impiedicat de design sa nu intre in site.

In momentul in care se logheaza, interfata devine prietenoasa si chiar personalizata.

Astfel, pentru un utilizator logat, pagina principala nu mai arata ca in captura de mai sus, ci va arata, astfel:

Am generat un script care ii permite utilizatorului, sa schimbe culoarea acestei prime pagini, dupa ce se logheaza. Vedeti in captura de mai jos ca am oferit o multitudine de culori, astfel ca posibilitatile sunt nelimitate.

In dreapta sus, exista acest button „Change color”, facut special cu rosu, pentru a fi remarcat de catre utilizator.

Observam ca am schimbat si font-ul meniului, pentru ca am dorit ca utilizatorul sa remarce diferenta dintre modul logat si cel nelogat.

La o noua apasare pe butonul „Change color”, se schimbat din nou culoarea cu care este intampinat utilizatorul. Iar acest lucru poate fi facut de mai multe ori, mai ales ca am mentionat mai sus faptul ca i se pune la dispozitie o gama larga de culori.

In plus, trebuie observat faptul ca in momentul in care am facut contul, aplicatia a retinut prenumele si imi ureaza bun venit, urmat de prenume. Din analizele facute de Google, ceea ce am demonstrat la inceputul documentatiei, reiesea si faptul ca utilizatorii sunt din ce in ce mai preocupati de faptul ca isi doresc aplicatii care sa fie cat mai personalizate. De aceea, am gandit aplicatia in acest mod.

Cum am spus in analiza anterioara, trebuie avuta in vedere si interfata de pe mobile. Pentru ca mesajul ales este unul simplu, el a fost construit, inclusiv logo-ul, astfel incat sa se poata mula usor peste diversele device-uri mobile de pe care ar putea fi accesate.

Iata deci, mai jos, o captura de cum se adapteaza aplicatia creata, pe device-ul mobile.

3.6.2 Creare cont si formularul de logare

Formularul de logare a fost gandit curat, simplu, astfel incat utilizatorii sa poata completa fara probleme campurile si sa poata trece mai usor la etapa de logare.

Dupa cum se poate observa, formularul de logare este in partea dreapta, sus, este vizibil si usor de accesat.

Pe de alta parte, pe mobile am introdus un „hamburger menu”. Am facut acest lucru, pentru ca acest tip de meniu pe fundal, este cunoscut la nivel global, iar utilizator isi poate da usor seama despre ce este vorba si cum poate naviga prin respectivul site.

3.6.3. Pagina – Ofertele zilei

Pagina „Ofertele zilei” – permite ca utilizatorii nelogati sa vizualizeze cea mai buna oferta din ziua respectiva.

Daca dau click pe Description, ei pot vedea si o descriere a produsului. Pot apasa chiar si add to card, dar vor fi redirectionati, in acel moment, catre formularul de inregistrare.

Dar, pagina cu „Ofertele zilei”, este disponibila si utilizatorilor logati.

Observam ca butonul „Schimba culoarea este construit sa fie valabil doar pentru prima pagina. In acest moment, utilizatorul vede ca bara de meniu este schimbata – coloarata neagra- cum am mentionat anterior, pentru a face vizibil diferenta intre etapa logata, si cea nelogata.

3.6.4 Pagina produselor

Pagina cu produsele disponibile, exista doar in momentul in care utilizatorul s-a logat.

Astfel, ea arata asa:

Inclusiv mesajul „Sa citim impreuna”, are rolul de a tine utilizatorul engaged, el vazand implicarea si apropierea pe care site-ul i-o pune la dispozitie.

Daca scrollam, in jos, vom gasi si zona de electronice – pentru ca am spus ca aplicatia aceasta, este compusa din doua mari parti – carile pe care le vinde, si electronicele pe care le vinde- am demonstrat mai sus, in analiza, ca oamenii sunt interesati de astfel de produse, si ca sunt cele mai bine de comercializat, in contextul pietei actuale.

Revenind, cele doua mari categorii de produse, se despart, mai departe, in pagini de produs, pe care utilizatorul le poate accesa si sa-si continue cumparaturile.

Astfel, daca accesam prima ramura, ajugem pe o pagina, unde sunt listate mai multe carti. Scrollam si putem adauga in cos, pe oricare dintre acestea.

Sub mesajul de intampinare, este si o lista cu cartile disponibile in acest moment in stoc. Am folosit „ancore”, pentru ca la click, utilizatorul sa fie redirectionat, in aceeasi pagina, dar mai jos sau mai sus, exact la pozitia la care se afla respectiva carte, si astfel sa nu fie nevoit sa scrolleze mai mult decat este necesar, pentru a gasi ceea ce cauta.

De exemplu, am dat click pe unde dintre carti, si am fost redirectionata catre pozitia din pagina aceasta, unde se afla cartea:

Pasul urmator ar fi sa ii citesc descrierea, exact cum am facut cu fata din tren, iar daca sunt multumita, sa o adaug in cos, si sa o cumpar.

Revenind la zona de produse, ne orientam, de aceasta data, catre Electronice.

In acest caz, ca si mai sus, la carti, exista o lista de carti disponibile, si ancore catre ele.

De asemenea, aceste carti pot fi adaugate in cos si cumparate.

3.6.5 Cosul de cumparaturi

Pentru Cosul de cumparaturi, au fost create in PHP, folosind baza mai sus mentionata in MYSQL, mai multe conditii si apeluri.

Mai jos, iata implementarea, urmata de cateva explicatii, despre cum a fost gandit cosul de cumparaturi, luandu-se in considerare si engagement-ul pe care acesta l-ar putea avea catre utilizatori, dar si alte aspecte ce tin de procesul de achizitie.

In primul rand, trebuie mentionat ca utilizatorul nelogat nu poate avea cos de cumparaturi. El trebuie sa iti faca un cont, daca doreste acest lucru.

Asadar, prima conditie care trebuie respectata si mentionata, este ca utilizatorul sa fie logat.

Daca nu exista absolut nici un produs in cos, dar se acceseaza din meniu „COS”, utilizatorul este trimis inapoi catre pagina produselor, pentru a achizitiona un produs, urmand ulterior sa se intoarca la cos si sa finalizeze cumparaturile.

Acest warning nu permite incheierea tranzactiei, dupa cum se poate observa, in acest moment, butonul de finalizeaza tranzactie, disparand.

In momentul cand un produs este adaugat in cos, utilizatorul este avertizat de acest lucru.

Daca cumva utilizatorul a adaugat din greseala un anumit produs, el il poate elimina in orice moment, prin simpla apasare a butonului „Remove”.

El primeste un mesaj pop-up cu acest warning. Am implementat asa, pentru ca am vrut sa fiu sigura ca utilizatorul observa ca a eliminat din cos unul dintre produsele adaugate.

La final, dupa ce exista cel putin un produs in cos, iar utilizatorul s-a decis asupra unor produse pe care doreste sa le achizitioneze, el mai primeste o avertizare – daca este sigur ca a finalizat cumparaturile.

Am introdus acest ultim warning, nu ca sa blochez utilizatorul din a cumpara, ci poate din contra, din a il convinge sa mai adauge si alt produs la cos, dar si pentru ca doream sa fiu sigura ca el nu a apasat din greseala acest buton, si totusi mai avea de achizitionat produse.

3.6.6 Formularul de contact

Pagina de contact arata la fel indiferent daca utilizatorul este logat, sau nu -diferenta constand, exact cum am mentionat si la pagina de „Oferta zilei”, faptul ca meniul are o culoare diferita- in modul nelogat are culoarea alba, iar in modul logat, culoarea neagra. Pe de alta parte, am folosit o conexiune API la Goolge Maps, pentru a integra in pagina adresa exacta, la care magazinul poate fi gasit, pentru ca poate vor exista cumparatori care vor dori sa ridice produsul direct de la locatie.

BIBLIOGRAFIE

Lucrari Consultate

„Internet pentru începători”, Bogdan Pătruț, București, Teora, 1998;

„Învață singur PHP, MySQL și APACHE”, Julie C. Meloni, București, Corint, 2005;

„Crearea și programarea paginilor WEB”, Tudor Sorin și Vlad Huțanu, București, L&S Infomat, 2004;

Site-uri consultate

wikipedia.org

https://developers.google.com

php.net

w3schools.com

Marketingland.com

Techcrunch.com