Building an website for fashion shop online computer science

For business, this w ebsite m akes organizations decrease costs in displaying a collects and m anages inform ation related to custom er behavior, w hich in tum helps... The fast grow th

Supervisor: MSc Tran Huu Tam

TH Ư VIẸN OAIVIỌC HA NOI

HANOIUNIVERSITV LIBRARY

In ternet boom m akes E -com m erce be a rapidly exp an d in g se c to r all o v er the w orld

O n lin e shopping is soon becom ing the m ain av en u e o f sh o p p in g in the global in general

an d in V ietnam in particular.) V ietnam is on the very íirst step o f d ev elo p in g in th e íìeld

o f e-com m erce; h ow ever, the innovative tren d p rov ed th a t V ietnam is one o f very

p o tential m arket in the com m erce T h is e -co m m erce tren d lead s th e ap p earan ce and

th in g s o v er the Internet So, the d em an d o f b u ild in g O nline sh o p p in g w eb sites in V ietnam that su pport buying and sellin g c u sto m e r’s p ro cess is m u ch b ig g er th an th a t in th e past

T h erefore, th is th e sis e x p lo re s th e a n a ly s is, d e s ig n a n d im p le m e n ta tio n o f Online fash io n

A S P N E T This Online fashion shop guarantees th e en tire e-co m m erce w eb site’s m ain

fu n c tio n a lity su c h a s O nline- c a ta lo g u e , p r o d u c t’s c o m m e n t, ra tin g , se a rc h in g , Online

cu sto m er support, e-sh o p p in g cart as vvell as o rd ering A n d Online pay m en t system will

be com pleted m ore in th e n ear íuture because th is required the co o p eratio n o f this w ebsite

w ith third side such as e-co m m erce busin ess o r banks

en thu siastic guidance He helped stim ulated suggestions and encouraged m e a lot in all the tim e o f w riting o f this thesis.

I am particular g rateíu l to all the teach ers o f Faculty o f Inform alion T echnology,

H anoi U niversity w ho have taug ht m e vvith all enthusiasm s, the helpfulness, the caring,

g av e m e the chance and the p o ssib ility to com plete this thesis

Especially, I am o b lig ed to thank s M rs Le Phan M inh Tuan for his assistance in his train in g and support m e in co m p letin g co d e and designing database

Last, vvords alone cann ot ex p ress the thanks to m y parent w ho encouraged me

m uch in m y study T h eir spiritual enco urag em ent and m aterial support helped me overcom e m any d ifficu lties w hen I vvas d o in g this G raduation thesis

Table o f C o n te n ts iv

List o f F ig u re s vii

C hapter 1 In tro d u ctio n 11

O b je c tiv e s 11

M o tiv atio n 12

M eth o d o lo g y 13

An Overvievv o f the Rest o f the D o cum en t 16

C hapter 2 T he B ackground Knovvledge 17

C urrent e-com m erce status in g lo b a l 17

C urrent e-com m erce status in V ie tn a m 18

A S P N E T tech n o lo g y 20

C hapter 3 A nalyzing c lo th e s Online s h o p 28

W eb site’s fu n c tio n 28

U ser case sp eciíĩca tio n 30

A dd product to shopping c a rt 31

S e a rc h 32

A dvanced s e a r c h 33

C o m m e n t 34

M anage p r o d u c t 38

M anage p ro d u cer 40

M anage n e w s 41

M anage F A Q 43

M anage security u s e r 45

M anage s i z e 46

M anage c o l o r 48

L o g in 50

M anage b i l l 51

M anage bill d e t a il 53

M anage c u s to m e r 54

M anage c ity 56

C h ap ter 4 D esigning clo thes O n lin e shop 58

C lass d iag ram 58

U se case re a Iiz a tio n 60

S earch 60

A dvanced s e a r c h 61

C o m m en t 63

C o n ta c t 64

M anaae c a te g o ry 65

M anage p r o d u c t 69

M anage n e w s : 73

M anage F A Q 77

M anage c o m m e n t 81

M anag e security u s e r 85

D atabase d e s ig n 88

C h ap ter 5 Im plem entation p h a s e 97

U se r's in te rfa c e 97

A d m in istrato r's in te rĩa c e 105

C hapter 6 S um m ary and C on clusion s 113

C o n c lu s io n 113

Suggestion for future tr e n d 114

R efe re n c e s 115

A ppendix 1 A pplication c o d e 116

Jav a C o d e 116

H TM L F ile s 117

List of Figures

Pigure 1 ER m o d e l 22

Figure 2 U ser case m od el 29

Pigure 3 C lass d ia g ra m 59

Fiaure 4 Search sequence d ia g ra m 60

Figure 5 Search ciass d ia g ra m 60

Figure 6 A dvanced search sequence d ia g ra m 61

Figure 7 A dvanced search class d iag ram 62

Figure 8 C om m ent sequence d iag ram 63

Figure 9 C om m ent class d ia g ra m 63

Figure 10 C ontact sequence d ia g ra m 64

Figure 11 C ontact class d ia g ra m 64

Figure 12 Add category sequence diag ram 65

Figure 13 Add category class se q u en ce 65

Figure 14 Edit category sequence d ia g ra m 66

Figure 15 Edit category class d ia g ra m 67

Figure 16 D elete category sequence d ia g ra m 68

Figure 17 D elete category class d ia g ra m 68

Figure 18 Add producl sequence d ia g ra m 69

Figure 19 Add product class d ia g ra m 69

Figure 22 D elete product sequence d ia g ra m 72

Figure 23 D elete product class diagram 72

Pigure 2 4 A dd new s sequence d ia g ra m 73

Pigure 25 A dd new s class d ia g ra m 73

Figure 2 6 Edit new s sequence d ia g ra m 74

Pigure 27 Edit new s class d ia g ra m 75

Figure 28 D elete new s sequence d ia g ra m 76

Figure 29 D elete new s class d iag ram 76

Figure 30 A dd FAQ sequence d ia g ra m 77

Figure 31 A dd FAQ class d ia g ra m 77

Figure 32 Edit FA Q sequence d iag ram 78

Figure 33 Edit FAQ class d iag ram 79

Figure 34 D elete FAQ sequence d ia g ra m 80

Pigure 35 D elete FAQ class d ia g ra m 80

Figure 3 6 A dd com m ent sequence d iag ram 81

Figure 37A dd com m ent class d ia g ra m 81

Figure 38 Edit com m ent sequence d ia g ra m 82

Figure 39 E dit com m ent class d iag ram 83

Figure 4 0 D elete com m ent sequence d ia g ra m 84

Figure 41 D elete com m ent class d ia g ra m 84

Figure 42 A dd security user sequence d ia g ra m 85

Figure 21 Edit product class d ia g r a m 71

Pigure 43A dd security user class d ia g r a m 85

Pigure 45 Edit security user class d ia g ra m 87

Figure 4 6 D elete securitv user sequence d ia g ra m 88

Figure 4 7 D elete security user class d ia g ra m 88

Figure 4 8 ER m o d e l 89

Figure 4 9 H om epage p a g e 97

Figure 50 C ategory p a g e 98

Figure 51 C ateg ory ’s p ro d u c ts 98

Figure 52 Product detail p a g e 99

Figure 53 S hopping cart p a g e 100

Figure 54 Print o rd er p a g e 100

Figure 55 C heckout p a g e 101

Figure 5 6 N ew s p a g e 102

Figure 57 N ew s’s detail p a g e 102

Figure 58 C o n tact’s inform ation p a g e 103

Figure 59 FAQ p a g e 103

Figure 6 0 Search result p a g e 104

Figure 61 Login p a g e 105

Figure 62 M anage product p a g e 106

Figure 63 M anage product p a g e 106

Figure 64 M anage category p a g e 107

Figure 65 M anaiỉe category p a g e 107

Figure 4 4 Edit security user sequence d ia g ra in 86

Figure 66 M anage security user p a g e 108

Figure 67 M anage security user page Figure 68 M anage new s page

Pigure 69 M anage new s page Pigure 70 M anage FAQ page Pigure 71 M anage FAQ page Pigure 72 M anage custom er page Figure 73 M anage custom er page Figure 74 M anage com m ent page

Figure 75M anage com m en t page

Chapter 1 Introduction

O bjectives

that buys and sells clo th es over the Internet T his w ebsite follow s B2C m ethod that exchanges stuffs betw een business and custom ers The \vebsrte íìinctionality includes

O n l i n e - c a t a l o g u e , s e a r c h i n g , p r o d u c t ’s c o m m e n t a s v v e ll a s r a t i n g , O n l i n e c u s t o m e r

support, shopping cart

F or custom er, this w ebsite allow s him to choose exactly w hat type clothes or accessory they w ant from variety o f choices o f brands T his w ebsite also provides custom ers vvith a p la tfo n n to search clo th es iníbrm ation based on a w ider range o f categories C ustom er can also evaluate each clo th es o r accessory that later w ill becom e

p ro d u ct’s revievv to o th er custom ers M oreover, custom er can find easier to do buying

ju s t by som e clicks and lastly they can order product from enterprises

For business, this w ebsite m akes organizations decrease costs in displaying a

collects and m anages inform ation related to custom er behavior, w hich in tum helps

M otivation

T he Internet boom m akes e-com m erce be a rapidly exp and in g sector all over the vvorld T o be sp eciíic ecom m erce vvould be buying and selling o f goods and services and tran sfer o f funds through digital C om m unications O nline sh o p p in g is soon b e c o m in g the

m ain avenue o f shopping in the global in general and in V ietnam in particular.) Ít can be

s e e n c l e a r l y s o m e a d v a n t a g e s o f b u y i n g a n d s e l l i n g s t u í T s O n l i n e : Being a b l e to conduct

b u s in e s s 24 X 7 X 3 6 5 , a c c e ss the global m a rk e tp la c e , red u c tio n in b u y e r s so rtin g out

discrepancies, increased opportunities for buying altem ative P ro d u cts The fast grow th

o f internet technology e-com m erce technologies created a great opportunity for business and retailers also to invest in this íìeld So, m ore e-com m erce w ebsites are bom and successful such as A m azon.com , E -b ay w h ich sells m any things such as clothes, accessories, electronic devices, e tc Som e o f them connect w ith Online paym ent e-

system s that bring m ost convenience to custom ers

V ietnam is on the very íirst step o f developing in the íìeld o f e-com m erce; how ever, the innovative trend proved that V ietnam is one o f very potential m arket in the com m erce N ow adays, V iet N am has better in ử astru ctu re o f inform ation technology, that

is w idespread internet connection and m ore and m ore V ietnam ese people have technical

m ost o f the transactions are paid directly by cash M ore and m ore V ietnam ese people

v isit a n d b u y s tu ffs t lir o u g h Online s h o p p i n g w e b s i t e in s te a d o f g o i n g t o p h y s ic a l s to r e s as

b eío re because they are little w orried about p ro d u c t's quantity; inform ation security So,

m any enterprises open Online shopping w ebsites that follow s m any types such as B2B,

C 2C and B2C to shovv and sel) stuffs to custom er A nd som e typical Online shopping vvebsites in Viet N am such as enbac.com , raovat.com are successful to apply iníòrm ation technology to do Online transactions as vvell as attract custom ers Eventually, in V ietnam , according to H oang C uong, paym ent system is being im proved by gradual transition from physical transactions to m achine-to-m achine Som e o f shopping vvebsites cooperates with third side such as banks o r e-com m erce business such as N ganluong.vn, O nePay to help

c u s to m e rs to pay th ro u g h Online p a y m e n t s y ste m F o r e x a m p le , c h o d ie n tu co m ,

theories and then connect all the íìndings Then I analyzed from all the íindings what

m ain íunctionality an Online shopping w ebsite needs to bring the m ost convenience to custom ers A lso, 1 studied in com bination w ith applying A SP N E T technology and application fram ew ork for this w eb site's code structure

In term o f deploym ent environm ent, this w ebsite has som e requirem ent o f

w orking environm ent to both sides: server side and Client side

Side

• V ideo RA M 32M B • V ideo RAM 64M B

•Net Fram ew ork

B o o k s and re fe re n c e s Online

Som e languages such as lava X M L are em bedded into code

An Overvievv o f the R est o f the D ocum ent

Structure o f the rest o f G radưation thesis

C hapter 2: Background know ledge

1 E-com m erce status

2 A SP N E T technology

C hapter 3: A nalyzing phase

C hapter 4: D esigning phase

Chapter 2 The Background Knovvledge

C urrent e-com m erce status in global

In the recent years, the w orldw ide developm ent o f the Internet perm its the interconnection o f new and existing iníbrm ation and com m unication technologies People early realize that Internet can m ake business and consum ers approach together in an innovative and pow erfuI inform ation system instead o f traditional w ays E-com m erce is deíin ed as the conduct o f “the buying and selling o f P roducts o r services over electronic system s such as the internet and other C o m p u te r netvvorks”

It can be seen clearly that e-com m erce vvebsite brings m any ben eíìts for both custom er and business E lectronic com m erce gives the cu stom ers th e opportunity to look for cheap er and quality Products With the help o f e-com m erce, consum ers can easily

*research on a sp eciíìc product and som etim es even find out the original m anufacturer to purchase a product at a m uch cheaper price than that charged by the w holesaler

S hopping Online is usually m ore convenient and tim e saving than conventional shopping

B esides these, people also com e across revievvs posted by o th e r custom ers, about the

d e c isio n s

For business con cem s, e-com m erce sig niíĩcan tly cuts dow n the cost associated with

m anagem ent Electronic com m erce reduces the burden o f inĩrastructure to conduct businesses and thereby raises the am ount o f ĩu n d s available for proíitable investm ent On

th e o th er hand, it collects and m anages iníòrm ation related to custom er behavior, vvhich

in tum helps d evelop and adopt an efficient m arketing and prom otional strategy

T he fast grovvth o f internet technology e-com m erce tech no log ies created a great

o p po rtu nity for business and retailers also to invest in this fìeld So, m ore e-com m erce vvebsites are b o m and successful such as A m azon.com , E -b a y w h ic h sells many things

su c h a s c lo th e s, a c c e sso rie s, e le c tro n ic d e v ic e s, e t c S o m e o f th em co n n e ct vvith Online paym ent e-com m erce business such as PayPal o r som e intem ationa! banks to m ake Online paym ent system s that bring m ost convenience to custom ers

C urrent e -com m erce status in V ietnam

E-com m erce is rapidly boom ing all over the vvorld, and V ietnam is no exception

W ith a population o f 80 m illion, V ietnam is truly a potential m arket in term o f E- com m erce In the w ay step by step applying to the vvorld co m m erce trend, V ietnam has reaped som e success; hovvever, w e have m et som e unavoidable diíĩiculties and lim ita tio n s T ak in g part into WTO organization gave V ietnam m ore chances to participate

in intem ational trad in g m arket M oreover, e-co m m erce policy m ust be foIlowed WTO

V ietnam has better in írastructures for telecom s and Internet A ccording to M inh

C uong(2006), it estim ated the num ber o f w ebsites o f businesses operating in V ietnam at 17,500 in the end o f year 2004 T his figure virtually reílected considerable im provem ent

o f telecom s and Internet inírastructures in y ear 2004 over y ear 2003 A nd the num ber o f personnel specializing in inform ation technology rose sharply increases sharply

H ow ever, there w as neither co nsensus nor an agreed-upon com m on platíorm for discussing and understanding e-com m erce issues am ong policy-m akers, researchers, and entrepreneurs A lthough, V ietnam has participated in W TO organization, the policy environm ent in V ietnam created to support e-com m erce technologies and transactions is still w eak A lso, one o f the top challenges o f V ietnam regarding to developing e-

transition from p h y sic a l transactions to m achine-to-m achine transactions allow s banking and íìnance industry open m ore services E-com m erce application prọịect in banking and íìnance industry have step by step been applied in V ietnam and harvested satisfactory results Y et, in com parison vvith regional coun tries, V ietnam is still in the íìrst phase o f e- com m erce A lthough e-com m erce w ebsite in V ietnam is facing m any obstacles com pared

w ith advantages, m ore and m ore V ietnam enterprises try to apply inform ation technology

to buy and sell stu íĩs o v er the Internet S om e o f them are g aining success, attraction as well as trust from cu stom ers such as chodientu.com , enbac.com , m uare.com , raovat.com Som e o f them cooperate vvith third side such as N ganluong.com as e-com m erce business

system such as V ietC om B ank, T echC om B ank .b y using d eb it card and credit card, vvhich show s the optim istic sign for the developm ent o f e-conim erce in V ietnam , especially for e-com m erce vvebsites

A S P N E T technology

T h is Online tầshion shop uses o n e o f the p o pu lar technology is A S P N E T co m b in in g vvith

m arketed by M icro soít to allovv program m ers to build dynam ic w eb sites, web

ap plicatio ns and w eb services An A SP net page is an H TM L page that contains server- sid e scripts that are processed by a vveb serv er beío re being sent to the users N ET pages, knovvn o fílcially as "w eb form s" that are contained in íìles w ith an ".aspx" extension; in pro gram m ing ja rg o n , these files typically contain static (X )H T M L m arkup, as well as

m arkup defining server-side W eb C ontrols and U ser C ontrols w h ere the developers place all the required static and d ynam ic content for the w eb page T here also has code-behind

m odel, w hich p laces this co d e in a separate file or in a specially designated script tag

A nd the program m ing language for N ET fram ew ork is c # that is a m ulti-paradigm program m ing language encom passing im perative, íunctional, generic, object-oriented (class-based), and com ponent-oriented p rogram m ing disciplines It w as developed by

M icrosoft w ithin the N ET initiative and later approved as a Standard by Ecm a (EC M A - 334) and ISO (IS O /IE C 23270) M icroso íì designed c # as its ílagship program m ing language for the N ET environm ent

interíace tier the business logic tier, and the database access tier T h is architecture vvill support encapsulation to repeat, better re-use sim ilar blocks o f code in prọịects This arch itecture also im proved data integrity, security, and av ailability o f the system And

presentation layer m ust be developed in such a way that it can be changed w ithout doing any changes to the business o r the database layer This m eans that the presentation layer

m ust be independent o f the database and the business layers

A ccording to D am on (2006), in this type o f system , the user interface tier com m unicates only w ith the business logic tier, never directly w ith the database access tier The business logic tier com m unicates both vvith the user interface tie r and the database access tier

1) D atabase layer:

T he d atabase layer contains the tables, vievvs and stored procedures w hich deal vvith the database U sually this layer is created before m aking the other layers D atabase iayer is also the m ost im portant layer in the application architecture that's w hy m ost o f the tim e is spenl m aking the database layer solid so, the pillars o f the application are strong and scalable

In the design o f m y w ebsite, database layer is database nam ed “shopping”, stored procedures in program m ability

1 Category Ị

Figure 1 ER model

T a b le n am e Deíĩnition

custom er put into e-shopping cart and will

buy

2) B usiness logic layer:

B usin ess logic layer contains the logic o f the application Like the database layer this layer is not exposed to the users directly but a user in teríace is provided to do so Some users tend to keep all the business logic in the presentation layer This approach is very dan gero us since user has a direct interaction w ith the business logic and it becom es easily hack able That's vvhy business logic is alw ays kept in the class libraries this approach

m akes the separation o f the user interaction w ith busin ess logic and also m akes the libraries portable so, it can be used by som e o th er sam e type o f application They

no rm ally involve tw o sub layers: business obịects and th e D ata A ccess L ayer (also knoxvn as the DAL) D am on (2006) said that your business tier contains logic for retriev in g persistent data from the data-tier and placing it into business o bjects and, conversely, logic that p ersists data from business obịects into the data tier This is called data access logic

In the design o f my w ebsite, business logic layer involves tw o sub layers: Bus and Dal

B usPA Q FA Q D TO

3) Presentation layer:

The presentation layer is w hat the user actually sees T he htm l pages w ith some anim ation the textb ox es to take input and m essage boxes to alarm the user o f the operation o f his action Presentation iayer m ust be developed in such a w ay that it can be changed w ithout d o in g any changes to the business o r the database layer T his m eans that thc presentation layer m ust be independent o f the database and the business layers Also the presentation la>er shouid be m ade in such a w ay that changing the presentation to the user vvill take less tim e and effort In the presentation layer, the code-behind m echanism for A S P N E T pages and user Controls is a prom inent e x a m p le o f a layered design

D esigners don't h av e to w orry about m essing up code to m ake user interface changes, and developers don't have to vvorry about siítin g through the user-interface to update code

In th e design o f m y w ebsite, the presentation tier fo r the O nline S hopping w ebsite is

A SP N E T W eb Form s w ith M aster Pages The presentation tier takes care o f the user interaction and the visual part o f the website

A S P N E T W e b

F o rm s

D e íĩn itio n

displays d iíĩe re n t hot P roducts, hot new s and offers available

and p ro d u ct’s each category

keyvvord, category

product d etails and quantity that custom er choose to buy

product

Chapter 3 Analyzing clothes Online shop

W e b s ite ’s íunction

D isplayand

m anageproductinform ation

M odule a!low business to divide into m ay product categories such as new arrival, top product, product m en, product vvomen, shoes, sale D isp Iay product iníorm ation, im age, price in e-catalog com bined w ith e-shopping cart that serves cu sto m er’s shopping requirem ent Each product m ust have enough in íbrm ation follow ed: N am e, Price, Type, Product type,

Im age, A ttribute, C om m ent, C oncem ed Product, C om pared product and

O rder product

into e-sh ơ pp in g carl and print ord ers for cu stom ers when they w ant to buy products

b u sin ess’s answ er that m ake a professional look to custom er as w ell as

b u sin ess’s services T h is m odule help cu sto m ers to send conveniently requests, sug gestion , co m m en t to business

S earch: allo w s custom ers to find goods by inputting keyw ord

A dvanced search: allow cu stom ers to lim it search area to get

m orc exact results such as search by categories

O nlinecontacl

Allovv custom ers to contact vvith business T his function perm its

cu sto m ers to chat vvith business

F igure 2 User case model

U ser case speciíication

M anage bill detai! UC17

quantity from drop dow n list

the total o f m oney

A lternativeFlow

m ove from this box lo another

instead o f using m ouse to subm it save and so on

Pre C onditions

quantity to put it into shopping cart

Post

C onditions

quantity that are selected are put into shopping cart

A nd total o f m oney are show n to custom ers

B asic Flow

retrieve the P roducts m atching its query

A lternativeFlow

Finding no m atching Products, th e error m essage will

be íorm ulated "N o results found”

Special R cquirem ents

instead o f using m ouse to subm it

Post

C onditions to custom ers.

It w ill allow the user to search Products based on type

o f p roducts T h e system will retu m the search results

B asic Flow

search

retrieve the Products m atch in g its query

A lternativeFlow

F ind ing no m atching p roducts, the error m essage vvill

be ío rm u lated ‘*No results fou nd ”

Special R eq uirem ents

instead o f using m ouse to subm it

Pre C o nd itio nsPost

C onditions

to custom ers

A lternativeFIow

Invalid input iníbrm ation

I f the user enters w rong inform ation, the system will response label to rem ind user “ Please try again”

Special R equirem ents

instead o f using m ouse to subm it

m ove from th is box to another

Pre C onditionsPost

C onditions

into database

A lternativeFlow

Invalid input inform ation

l f the user enters vvrong inform ation, the system will response label to rem ind user “ Please try ag ain ”

Special R equirem ents

instead o f using m ouse to subm it

m ove from th is box to another

Pre C onditionsPost

C onditions

database as well as sent to enterprises

C heckout

A ltem ativeFlow

Special

R equirem ents

key to m ove from th is box to another

en ter instead o f using m ouse to subm it, save and so on

d elete th e unsu itab le category.

B asic Flow

T h is use case starts vvhen adm in w ish es to vievv, add , edit or

d elete th e category

category, h e can d o so m e action:

o A dd category:

> A d m in ch o o ses add category

> S y stem w ill disp lay th e form for adm in to vvrite in íò rm atio n about

th e category

> A d m in click A dd button

> S y stem vvill ch eck data, then, store

n ew categ o ry vvith its iníorm ation

to notice user th a t the action is successfu l

o E dit catego ry :

w an ts to edit

the selected category

> A d m in edits inform ation abo ut the categ o ry ( i f necessary)

no tice user that the action is

su ccessíu l

th e categ o ries that he vvants to delete

> A dm in click s button D elete

> D ata will be deleted

key to m ove from this b ox to another

enter instead o f using m ouse to subm it, save and so on

use case begins

Post

C on dition s

iníòrm ation is displayed