Building an website for fashion shop online computer science

Building an vvebsite for íashion shop Online G d u a tio n T h e s is S u b m itted to Hanoi University fo r the d e g re e of Bachelor of Computer Science By Le Thỉ Thanh Hoa (Computer Science) Supervisor: MSc Tran Huu Tam TH Ư VIẸN OAIVIỌC HA NOI HANOIUNIVERSITVLIBRARY December, 2009 Building an vvebsite for fashion shop Online G d u a tio n T h e s is S u b m itte d to Hanoi University fo r th e d e g re e o f Bachelor of Com puter Science By Le Thi Thanh Hoa (Computer Science) Supervisor: MSc Tran Huu Tam December, 2009 A b s tra c t T he advent o f the Internet led to changes in b usiness th at w e can call revolutionary T he Internet boom m akes E -com m erce be a rapidly expanding secto 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 pping in the global in general and in V ietnam in particular.) V ietnam is on the very íirst step o f developing in th e íìeld o f e-com m erce; how ever, the innovative trend proved th at V ietnam is one o f very potential m arket in the com m erce T his e-co m m erce tren d leads th e appearance and developm ent o f m any O n l i n e shopping vvebsites in V ietnam that buying and selling m any things o v er the Internet So, the dem and o f bu ild in g O nline sh o pping w eb sites in V ietnam that support buying and sellin g cu sto m er’s p ro cess is m uch b igger than th at in th e past T herefore, th is th esis e x p lo re s th e a n a ly sis, d e sig n a n d im p le m e n ta tio n o f Online fash io n vvebsite that buys and sells ciothes over th e Internet T h is O n l i n e fashion shop uses A SP N E T This Online fashion shop guarantees th e entire e-com m erce w eb site’s m ain fu n ctio n ality such as Online- c a ta lo g u e , p r o d u c t’s c o m m e n t, tin g , se arc h in g , Online custom er support, e-shopping cart as vvell as ordering A nd Online paym ent system will be com pleted m ore in th e near íuture because th is required the cooperation o f this w ebsite w ith third side such as e-com m erce business o r banks Acknovvledgments I would like to first and íbrem ost express m y great gratitude to my supervisor M SC Tran Huu Tam from Faculty o f lnform ation Technologv, Hanoi University for his enthusiastic 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 grateíul to all the teachers o f Faculty o f Inform alion Technology, Hanoi U niversity who have taught m e vvith all enthusiasm s, the helpfulness, the caring, gave m e the chance and the possibility to com plete this thesis Especially, I am obliged to thanks Mrs Le Phan M inh Tuan for his assistance in his training and support m e in co m p letin g code and designing database Last, vvords alone cannot express the thanks to m y parent w ho encouraged me m uch in m y study T h eir spiritual encouragem ent and m aterial support helped me overcom e m any difficulties w hen I vvas d oing this G raduation thesis Table of Contents Table o f C o n te n ts iv List o f F ig u res vii Chapter In tro d u ctio n 11 O b je c tiv e s 11 M otivation 12 M ethodology 13 An Overvievv o f the Rest o f the D ocum ent 16 C hapter T he Background 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 SP N E T technology 20 C hapter A nalyzing clo th es Online s h o p 28 W ebsite’s fu n ctio n 28 U ser case speciíĩcatio n 30 Add product to shopping c a rt 31 S earch 32 A dvanced s e a rc h 33 C o m m e n t 34 iv Contact 35 C h e c k o u t 35 M anage c a teg o ry 36 M anage p r o d u c t 38 M anage producer 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 lo r 48 L o g in 50 M anage b i l l 51 M anage bill d e ta il 53 M anage cu sto m e r 54 M anage c ity .56 C hapter D esigning clothes O n lin e shop 58 C lass diagram 58 Use case rea Iiz a tio n 60 S earch 60 A dvanced s e a rc h 61 C o m m en t 63 C o n ta c t 64 M anaae c a teg o ry 65 V 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 co m m en t 81 M anage security u s e r 85 D atabase d e s ig n 88 C hapter Im plem entation p h a s e .97 U se r's in terface 97 A d m in istrato r's in te rĩa c e .105 C hapter Sum m ary and C onclusions 113 C o n c lu sio n 113 Suggestion for future tre n d 114 R eferen ces .115 A ppendix A pplication c o d e 116 Jav a C o d e .116 H TM L F ile s .117 vi List of Figures Pigure ER m o d e l .22 Figure User case m odel 29 Pigure Class d ia g m 59 Fiaure Search sequence d ia g m 60 Figure Search ciass d ia g m 60 Figure A dvanced search sequence d ia g m 61 Figure A dvanced search class d iagram 62 Figure C om m ent sequence d iagram 63 Figure C om m ent class d ia g m 63 Figure 10 Contact sequence d ia g m 64 Figure 11 Contact class d iag ram 64 Figure 12 Add category sequence diagram 65 Figure 13 Add category class seq u en ce .65 Figure 14 Edit category sequence d ia g m 66 Figure 15 Edit category class d iag ram 67 Figure 16 Delete category sequence d ia g m 68 Figure 17 Delete category class d ia g m 68 Figure 18 Add producl sequence d ia g m 69 Figure 19 Add product class d ia g m 69 Figure 20 Edit product sequence d ia g r a m 70 vii Figure 21 Edit product class d ia g m .71 Figure 22 D elete product sequence d iag ram 72 Figure 23 D elete product class diagram 72 Pigure 24 A dd new s sequence d ia g m 73 Pigure 25 Add news class d ia g m 73 Figure 26 Edit new s sequence d ia g m 74 Pigure 27 Edit news class d ia g m 75 Figure 28 D elete news sequence d iag ram 76 Figure 29 D elete news class d iagram 76 Figure 30 Add FAQ sequence d ia g m 77 Figure 31 A dd FAQ class d ia g m 77 Figure 32 Edit FA Q sequence d iagram 78 Figure 33 Edit FAQ class d iagram 79 Figure 34 D elete FAQ sequence d ia g m 80 Pigure 35 D elete FAQ class d iag ram 80 Figure 36 A dd com m ent sequence d iagram .81 Figure 37A dd com m ent class d ia g m 81 Figure 38 Edit com m ent sequence d ia g m 82 Figure 39 E dit com m ent class d iagram 83 Figure 40 D elete com m ent sequence d ia g m 84 Figure 41 D elete com m ent class d ia g m 84 Figure 42 Add security user sequence d ia g m .85 Pigure 43Add security user class d ia g m 85 viii S i-.!'., I*r 'ũ :ix n !, i*f s*tun:j ycup • RsU • Asa.Tl* • PuncBĩA • A3dfwfl0isfl 0đfH |_1 Manage prodnct *33 Pr_Jv f ■ J - ,J fỉ-:3 e P/cducH P f jd x íin jm í Sỉllil :o i 2120900 V it Sm M**J3 120033 V n s :i:2 «ifl C h í* :33M V M iltl >SB y 3t 23.0990 J !ljũ03 ũ ii Ciite ì* 0300 I * i e I ỉ- p » s e lc lỉ Figure 62 M anage product page Manaye pruduct m IU h III P rr to m p * « * * > NEw A R R r.il p.vducr V70MEN !ãằằ 230000 2120000 ,1 đ l > , ị Bro*»ỡ lU i 0- I Maluô r J le O l ã ớllO i' Lcơ- cw«lco»»» w < m t ' - l i r t PhM !J ã ã,ô:ã T " « - n :« s l- K M i[ * í» ii ' » E 'ỉ í - c : » • :e Ctlttt Chon CÃŨá i :.{ |ụ c j ã Eaii J Iô ã C* i'J s íu tí Figure 63 M anage product page 106 -/.ị ị J M anage c a te g o ry lli« i ÌM t c * jn r> » p ũ ĩ AdC Esc $ D*liM C t a r»ng n i :-!]* 0n » * SOI* :JÌA • 'iT lill S :a V 5>lể »11* f::l V p«l 0 • • ĩ i e i V KUBI ACIIcH m MMV X ô*ã P ; i ; ô í >ị i S Q ỉ < « P ijí lo ia Figure 64 M anage category page • I a n x - f 1v • ! t a í r !:» I I O - sd* ‘J S * Ĩ Ì * ẮíJt»adlc* Li C a te g o ry : NEWARAI-.il SALE WCMEN Jean Pigure 65 M anage caíegory page 107 i í.lanage s e c u rity u se r p *33 ì is a * C tk tt 3o: «Í"M1 Fut'r«rr* Phun* tn s irc i K :s s s :* ! P ís - ir i- h ?/ j 3SSSSXCS5 1'V > n r * 35SĨ$:::3Ĩ L ỉ" T«í' '.** •JÌ87*Í S*I Onln* Stitrt A à £ F ig u re 66 M anage security u se r page StCttty -Kf ' - Hs.T> "V Ia «xrtff ỈKL/C; J!CtO • :^5 • °*.*t • »33*3« • Fự\3»sr kUKnato J Manage security U ser Sẵ S i t tnn g p l F*:-t 0988820005 B iríỉ, 8/23/2008 12.0 lịm riù P lu m Ih đ + I tru n g noi Im ngpíểV raievina COQ »n 123213123213213123 B rcw e Figure 67 IManage security u se r page 108 C ira l *H ônxằir, Jfa-B *ã:ằã • Pu-iatsn • *aal.r -: U i ĩ è L'1* ! «1* 1.1«* # v l.a : r E ^ - ; Itc » F ifỉ - » * ,* t J "JU »/ ,1>|t - *~Cí»t ỹ i í i ’ It! S t o p g -ã lD ;< eircri ' t i ĩ / V r tíi' u i i i H S ' ••■'-;* !*■* ■ ■ * ri J < || P i M - ’ ỉl» i ĩ a l n r i i * c < f í f ỡ m " n u ôa* ã , • t •* » !-•" \ n i ' T » ,! i; -r Ỉ|» U '.« * J ‘r i H B * • ; »11 , ' • 1* *n • Lirj»*, Li*»* ! Cui : • ! ! í tu » • » t * 'C i£ « r : :*|* c t ' ! f : l «UI Alt' - a i a l e i - a * »*J t ĩK t iií f I * •• » ** U tằ ' ; ô ã > : : ! » ! * * < -■»»> - f j t IôIM - I ằ u ã t : ì - J | : j < u J < rV I ? t - * ' f ằ ã/ M " ( ô t c f* ír '4 ' *• t :- w t n » - r * * ■;* a| • * *c 1'* *ậ * C c % , « t4*i« £p / f» t-: ỉ' ^ ~ề ỈM " ) • *►%- ế1 ' ' ‘ỈI^ ' • ****1 - J• • •à ♦**♦! (VA1 - ^ - •a I 11, ãã ã^ ^.ô & ô*, * ' ã ằ tô * ằ ã ằ ã ã t -a c - 5iVJ I 9M 'i l Figure 68 IManage news page L J I M anage n ew s It.l >1*i I ■» // uD * a |i | r Parta - Lvrotn BVô ã M r fa r d « » fci a iitta chio in ịm \z 41 B - Ih J •• != -T y 6*4*■1 e»M _ M* » r t i i íl« ( \í« 'd » I sprirtq 7011 í* | < i 11 • f#ij ã*, ã ão m * w n fô% iri«s54 Th« a n * a « n m* d '« cn g v u n dicototé r a c ttỊ í t c c r t i ì V»«-«CA nitlỈM * « m m sB n ii s ũ a n ã t' t í » » ■ « »4 MM 01 B*M VII ■ f n T»» ■ » » « 1 «fca M u o m l O e»* w t» tW ' v í jr fl*ní*w» W«lcu1 C«U *1 s r t t t o fMôfl IdôJã|* Wi" rãôằã ô*owằ fjcurnttatf*U. jsô g a ô> !ã* 'ã M ti I t t Ị fc« 10 "0 " I I ■ * « to r * » » " in đ " V " ím *0 Ĩ » c * r * l I ltvô M0frôiỡ (Iti (urrDunttad t y tV0(Wằn ãndlvuori fsr MDrran* J n jf' ! l « r l«« «n ha» tacoma * thow 01» me InUmitionM ĩ«w«d»! (MracU>9 • * *M -34 r * * * J iw :r< 'Q ;i* s s £ f \ " r j|’ F ig u r e L »11 =-v mtirto ! fữ l'fl M anage com m ent B ÌM ■MO^I IUttl Coai Co«i .*J F ig u r e ỈY Ia n a g e 112 c o m m e n t p a g e ị * Cvc* Chapter Summary and Conclusions C onclusion The fast developm ent o f e-com m erce in global in general and in V ietnam in particular c r e a t e s the m otivation fo r m e to build O nline fashion shop T his Online fashion shop uses one o f the popular technology is A SP.N E T com bining w ith cu program m ing language This Online fashion shop guarantees the entire e-com m erce w ebsite’s m ain íunctionality such as Online- catalogue, product’s com inent, rating, searching, Online custom er support, e-shopping cart as well as ordering faced up w ith som e d iíĩiculties during doing graduation thesis First!y, have never learned c # and A sp.N et th at seem so strange to me ISspecially, m ust practice in a real prọịect, not ju s t som e program m ing exercises Tlìis m ake m e so w orried w hether could íinish the Online shopping w ebsite or not in tim e by a new program m ing language So I have read m uch m aterial reíer som e code on th e internet, and search useful experience from o th er c o d e r c o n s i d e r e d my O n l i n e shopping w ebsite as m y big exercise B ecause I com bined w h at I learned from instructor with w hat I researched from sam ple code in Internet, ĩound easier to code my vvebsite day by day Secondly, I found som e troubles w hen chose the attractive interface for w ebsite and outline the í i i n c t i o n s for \ v e b s i t e Selecting O n l i n e w e b s i t e i n t e r í ầ c e is v e r y i m p o r t a n t because this can attract custom ers to buv goods from w ebsite i d o n 't know how to begin to design or w hat com ponents will be included on the w ebsite I speni time on checking r e f e r r i n g s o m e o t h e r s h o p p i n g O n l i n e \ v e b s i t e t o h a v e g e n e r a l v ie v v a b o u t s h o p p i n g O n l i n e tem plates As a resuli I have nice interíầce vvith enough main functions Thirdly, because m y w ebsite followed by A SP.N E T technology and ! m ust divide code into layers to repeat sim ilar blocks o f code in m y prọịects I felt confused about 113 organizing proper code structure indeed have read m uch m aterial; refer som e code saniple structure o f A SP N E T technology and application fram ew ork on the internel Il took me m uch tim e to divide code into layers that supports encapsulation to rcpeat sim ilar blocks o f code in m y projects Suggestion fo r íuture trend Because this w ebsite is O n l i n e shopping w ebsite that seem s to O n l i n e catalogue d isp la y in g P ro d u c ts to cu sto m e rs th e in te rfa ce m ust be m o d iíìed to becom e m ore attractive D esign and program som e new fiinctions w hich can have m ore attraction to users Add m ore flash for anim ation to the w ebsite Especially, due to lim itation o f tim e, paym ent system are not com pleted, the future trend o f this w ebsite is to cooperate with som e banks to help custom ers to com plete autom atic paym ent system Paym ent w ill be done autom atically by third side that is bank com bined vvith given c u s to m e rs account So Online paym ent o f the system will be im proved in the near future to help custom ers to pay O n lin e T his will raise a problem that is how to secure c u s to m e rs coníìdential inform ation So, it is necessary to enhance security m ode for w ebsite to protect personal inĩorination that can trust custom er to v isit site A s a result, this can support custom ers to p a y Online th r o u g h the legal s y s t e m a u th e n tic a tio n a n d sec u rity 14 Reíerences H oang M inh C uong 2007, C urrent Status o f Vietnarnese E-com m erce, V ietnam , view ed 25 O ctober, 2009, < unpanl.un.or^in trad o c/g ro u p s/p u b lic/d o cu m en ts/A P C IT Y /Ư N P A N 0 p d f > Tuan A nh 2008, Policing for e-com m erce, V ietnam , view ed October, 2009, < http://vistalandtravel.coin/new s/T ravelN ew s/P olicing for ecom m erce/> A ndy 2006, A pplication architecture, London, vievved 25 O ctober, 2009 < http://w w w codersource.net/Program m ing A pplication A rchitecture azam aspx> Dam on A rm strong 2006, N ET application archiíecture: T he data access layer, view ed 25 O ctober, 2009 < http://w w w sim ple-talk.com /content/print.aspx?article=253> 115 Appendix Application code Jav a C ode r * Sample java **/ // e x e c u t e y c u r $(function() { scripts when DOM is ready this is a good nabit // i n i t i a l i s e s c r o l l a b l e $ ( " d i v s c r o l l a b l e " ) s c r o l l a b l e ({ Ìtem s : 1# t h u m b s v, v e r t i c a l :t r u e , // i t e m s a r e a u t o - s c r o l l e d in s e c n o d i n t e r v a l i n t e r v a l : 3000, // w h e n l ó s t l o o p : true, i t e m is e n c o u n t e r e d g o b a c k II m a k e a n i m a t i o n s p e e d : 600, a little slower than // w h e n s e e k s t a r t s m a k e i t e m s l i t t l e o n B e f o r e S e e k : function() { t h i s g e t I t e m s ( ) f a d e T o (300, ) ; to first item the de fa ult transparent )/ // w h e n s e e k e n d s r e s u m e i t e m s t o f u l l onSeek: £unction() { t h i s g e t l t e m s () f a d e T o (300, 1) ; » I); } ); 116 transparency HTML F iles r* C ateg o ry ascx **/ < % @ C o n t r o l L a n g u ã g e = " C # " A u t o E v e n t W i r e u p = Mt r u e " C o d e e h i n d = ”c a t e g o r i e s a s c x c s " I n h e r i r s = ,,A d m i n i s t r a t o r C o n t r o l s c a t e g o r i e s " %> Q u ả n lý c a t e g o r y < / a s p : L a b e l > ru na t = "server" < a s p :L i n k B u t t o n I D = " b t n N e w " r u n a t = " s e r v e r " o n c l i c k = " b t n N e w _ C l i c k M T o o l T i p = " T o m i ,,x i m g a l t = " " s r c = " / I m a g e s / A d đ p n g " w i d t h = " p x " / x b r /> T o m i < / a s p :L i n k B u t t o n > < td > < a s p :L i n k B u t t o n I D = " b t n E d i t " r u n a t = Ms e r v e r " o n c i i c k = "bt n E d i t _ _ C l i c k " T o o i T i p = " C h i n h s a " x i m g a l t = " " s r c = " / I m a g e s / E d i t png" w i d t h = " p x " / X b r /> S a < / a s p :L i n k B u t t o n > < a s p : L i n k B u t t o n 1D = " b t n D e l e t e " r u n ò t = " s e r v e r " o n o l : c k = " b t n D e l e t e _ C l i c k " T o c l T i p = ,,X ó a ,,x i m g a l t = ,,,, s r c = " / I m a g e s / d e l png" w i d t h = " p x M / x b r /> X ó a < / a s p : L i n k B u t t o n > < /d iv > < / d iV > T ì m k i ế m : < ã s p :T e x t B o x ID='ft x t S e a r c h " C.?5Cicã5s=,,t e x t B o x M W i d t h = " 0 p x " > < / â s p : T e x t B o x > < ã f :But tori L ' = " b c n S e a r c h " r u n a t = " s e r v e r " ã^i = " b u t t o n " T'ỉ-:-:,:= "Go" on : r:= ,fb t n S e a r c h _ C l i c k ” /> < a s p :L i s t l t e m V a l u e = " " > S d ụ n g < / a s p :L i s t I t e m > < s p : L i s t I t e m V a i u e = " " > K h ỏ a < / a s p :L i s t I t e m > < H e a d e r S t y l e C s s C l a s s = " h e a d e r " /> < R o w S t y l e C s s C l a s s = " i t e m " /> < A l t e r n a t i n g R o w S t y l e C s s C i a s s = " a l t I t e m " /> < a s p : B o u n d F i e l d D a t a F i e l đ = " a " H e a d e r T e x t - " #"> n a m e = " c h k ,' id < C o n t r o l S t y l e W i đ t h = " p x " /> < H e a d e r S t y l e Hori z o n t a l A l i g n * C e n t e r / > < ă s p : C h e c k B o x I D = " c h k I t e m " r u n a t = " s e r v e r " /> < / 11emT e m p 1ate > < I t e m S t y i e W i d t h = " l C p x " /> < a s p :T e m p l a t e F i e l d > Menu < H e a d e r S t y l e H c r i z o n t a i A l i g n = MC e n t e r " / > < % # D â ta B : r E v a ĩ ( C o n t a i n e r D a t a l t e m , " C a t e g o r y N a m e " )% > < / a > < / 1;e m T e m p a t e > < S f - : B o u n d F i e l đ Lôt-ã Fiei d = " A l i a s " /> HeầerText«"Liẽn k ế tn > CU-siTiStyle H :■r i ^ o n *:ị AIicjn« " L e f t " W i d t h - " % " < / ã s p :b c u n d F i e d> < temTemplate> < a s p :TextBo>: C s s C i a s s = ,,t e x t B o x " r u n a t = " s e r v e r M W i d t h = " )px " - đ = " t x t O r đ e r " t e x t = ' < % # E v a l (" S o r t O d e r ") %>' /> < / 11 e m T e m p 1a te > < / a s p :T e m p l a t e F i e l d > < a s p :T e m p l a t e F i e l d > < H e a d e r T e m p l a t e > S ù dụng < a s p :I m a g e B u t t o n I D = " b t n S t a t u s " r u n â t = " s e r v e r " I m ã g e r l = 15