Tìm hiểu công silverlight và phát triển ứng dụng thể hiện siêu thị ảo trên web

, BO GIAO DVC vA DAo T ~O TRUONG DHDL NGO~I NGU - TIN HQC TP.HCM KHOA CONG NGHt THONG TIN , J: KHOA LUAN TOT NGHIEP • • TIM HIEU CONG NGHE• SIL VERLIGHT vA PHAT TRIEN UNG DUNG THE HIEN SIEU • • THI• Ao TREN WEB GIANG V[EN HUaNG DAN: SINH V[EN THVC HltN: THAY NGUYEN MINH NAM NGUYEN B~CH NHUNG LU'ONG MY NGQC "- "t ; •• , _ ' ' / , _// •'_ ' ,., t :.: .-,' ~.••\ \)0 ~ \ TP.HO CHi MINH - 2010 LOICAMON Trang su6t qua trinh thlJc hi~n d6 an thvc t~p t6t nghi~p, ngoai sv n6 Ivc cua ban than, chung em nh~n dm;rc nhi~u sv giup dO'va dQng vien tu thcly co, gia dinh va b,:m be Vi v~y chung em xin bay to long cam an chan dSn: • Thcly NguySn Minh Nam -la giao vien huang dfrn nhi~t tam chi bao, da huang dfrn, dinh huang va truy~n d?t cho chung em nhung kiSn th(rc chuyen mon cung vai nhfrng tai li~u quy bao d~ chung em hoan d6 an thvc t~p t6t nghi~p va co kSt qua nhu hom • Cac quy thcly co truOng D?i hQc Ngo?i ngfr - Tin hQc TP.H6 Chi Minh, d~c bi~t la cac thcly co khoa cong ngh~ thong tin da nhi~t tam d?y d6 truy~n d?t kiSn thuc cho chung em su6t nam qua M~c du da r~t c6 g~ng nhung v6n kiSn thuc chua sau cung vai thai gian nghien cuu chua lau nen khong th~ tranh khoi nhu'ng thiSu sot Chung em r~t mong nh~n duQ'c sv dong gop cua thcly va cac b?n d~ d~ tai duQ'c hoan thi~n han TP H6 Chi Minh, thang nam 2010 NguySn B?ch Nhung Luang My NgQc •• MUCLUC • • CHU ON G : , TO NG Q~U A~ :: 1.1 Ten de tal 1 1.2 Ly chQn d~ tai 1.3 Ml,lc tieu d~ tai CHU ON G : CON G N G Ht SILVERLIGHT 2.1 Giai thi~u 2.2 Khai ni~m 2.3 Y nghla 2.4 Cac phien ban 2.5 Cac d~e tinh eua Silverlight 2.5.1 SlJ k~t hgp cua WPF va XAML 2.5.2 M& rQng eho ngan ngu kich ban 2.5.3 SlJ tich hQ'pvai cae (mg dl,lng off co 2.5.4 SU dl,lng rna hinh ngan ngu' l~p trinh 2.5.5 tra mang 2.5.6 H6 H6 trQ'ngan ngu tich hQ'ptruy van (LINQ) : t'rue va, cae , th'an h p h an ~ K.len 2.5.8 Thu vi~n lap NET Framework eho Silverlight 13 2.5.9 Cac rna hinh l~p trinh cua silverlight 14 2.5.9.1 L~p trinh Managed va rna hinh ung dl,lng 15 2.5.9.2 Managed API 15 2.5.9.3 JavaScript API 15 2.5.10 H6 16 2.5.11 Cac eang ngh~ va eang cl,llien quan cua Silverlight trq cua h~ di~u hanh va trinh duy~t 16 2.5.12 Cac file mQt project Silverlight 18 2.5.12.1 T~o mQt Project ung d\mg Silverlight 18 2.5.12.2 Cac file mQt dll an Silverlight 19 2.5.12.3 Cac file ung d\mg Website Silverlight 21 2.5 13 Ng6n n gu 22 2.5.13.1 Ng6n ngu thi€t k€ 22 2.5.13.2 Ng6n ngu l~p trinh 23 2.6 XAML _ Extensible Application Markup Language 24 2.6.1 Khai ni~m XAML 24 2.6.2 Cach khai bao d6i tuqng XAML 24 2.6.3 Thi€t l~p cac thuQc tinh cho d6i tuqng 25 2.6.3.1 Slf d\mg Cllphap theo thuQc tinh 25 2.6.3.2 Slf dVng Cllphap theo d~c tinh cua phc1ntil 25 2.6.3.3 SUodVng Cllphap theo nQi dung 26 2.6.3.4 Sil dVng Cllphap theo mQt t~p hqp 26 2.6.4 Sv ki~n va Code-behind 28 2.6.5 Root element 29 2.7 Cac Control va UserControl ph6 bi€n Silverlight : 30 2.7.1 Cac Control ph6 bi€n Silverlight 30 2.7.2 User Control 35 2.8 Layout, Input va Printing 39 2.8.1 Layout Controls 39 2.8.2 Lap Canvas: 40 2.8.2.1 Lap StackPanel: 41 2.8.2.2 Lap Grid 42 2.8.3 H6 trq toan 2.8.3.1 Ch€ dQ nhllng va ch€ dQ toan man hinh: 43 2.8.3.2 Thi€t l~p ch€ dQ to an man hinh 43 man hinh (Full screen support) 43 _.- 2.8.3.3 Tn] v€ ch~ dQ nhling 45 2.8.4 Input 46 2.8.4.1 H6 trQ' chuQt 46 2.8.4.2 H6 trQ' ban phim 47 Graphics, Animation va Media 48 2.9 2.9.1 Graphics 48 2.9.1.1 Shape va Drawing 48 2.9.1.2 Geometries 53 2.9.1.3 Cli phap djnh d?ng Path 60 2.9.1.4 Brushes 62 2.9.1.5 Stransforms 67 2.9.1 I-Ii~u (fng 3D 72 2.9 1.7 Anh 2.9.1.8 Hi~u (rng de, bong di~m anh (Pixel shader effects) 78 2.9.2 SU dt,mg Deep Zoom Silverlight 82 2.9.2.1 T?o mQt anh Deep Zoom 82 2.9.2.2 Load mQt anh Deep Zoom 83 2.9.2.3 Them tuO'ng tac tai mQt anh Deep Zoom 84 2.9.3 Animation 85 2.9.3.1 Vi d1,1djnh d?ng mQt UIElement 2.9.3.2 Start, Stop, Pause va Resume cua mQt animation 88 2.9.3.3 Cac lo?i animation 88 2.9.3 Key-frame animation 90 2.9.3.5 Animating Transforms 92 2.9.4 Audio va Video 93 2.9.4.1 D6i tUQ'ng MediaElement 93 2.9.4.2 Cac thuQc tinh cua MediaElement 94 2.9.4.3 Di€u khi~n tuang tac Media Playback 94 , 76 rna dftn va hi~n len 85 _ a 2.9.4.4 2.10 Timeline Markers 96 Gi6i thi~u chung v~ truy c~p dfr li~u Silverlight 98 2.10.1 Gi6i thi~u ve truy c~p dfr li~u : 98 2.10.1.1 Data Binding 98 2.10.1.2 Isolated Storage 2.10.1.3 Truy c~p cO' 2.11 100 sa dfr li~u So sanh Silverlight 102 : 2.11.1 Silverlight 2.11.1.1 Kha nang cua Flash: 2.11.1.2 So sanh Silverlight 2.11.2 Silverlight 102 v6i Flash : 102 102 v6i Flash 102 va cong ngh~ AJAX co b6 sung cho 103 2.12 M(>t s6 ung d\Ing : 104 2.13 K€t lu~n : 109 CHU ON G : UNG DVNG SIEU THI AO 110 110 , A? 3.1 Gi6i thi~u ung d\Ing : 110 3.2 N ~n tang : 110 3.3 Quy trinh h~ th6ng : III 3.3.1 86i v6i quy~n nguai dung la khach hang : III - ') j D ,( , ~ , d' : VO'!quyen nguO'! ung I'a Ad mIn 14 3.4 vOl Cac ky thu~t xu Iy ung dVng : 115 3.4.1 CO' sO' di:i' li~u khong gian _ Spatial Database: 115 3.4.1.1 CO' so' duoli~u (CSDL) khong gian la gi? 115 3.4.1.2 Cac d6i tUQ'ng khong gian 115 3.4.2 CO' sO'dfr li~u theo rna hinh diy nhi philn : 118 3.4.3 Hi~n thi sO'd6 ill ki~u dfr li~u Spatial (SqIGeoraphy) 3.4.4 Ky thu~t t~o hi~u ung carousel 3D : [1] 3.5 T6 Chll'CcO' so' dfr li~u : : 119 124 128 So' dfr li~u : 3.5.1 Lugc d6 ca 3.5.2 Thong tin cac bang : 128 128 3.6 Chi ti€t cac bang dCi'li~u : 129 3.7 Use case Model 130 3.7.1 Sa d6 Use-case 130 3.7.2 Danh sach cac Actor 13 3.7.3 Danh sach cac Use-case 131 3.7.4 Mo ta Use-case 132 3.8 Sa d6 tufrn tl! h~ th6ng : 143 3.8.1 SSDOI Tim Ki€m 143 3.8.2 SSD02_Hi~n Thj Sa 86 144 3.8.3 SSD03 Xem Chi Ti€t San Ph~m 145 3.8.4 SSD04_Xem Danh Sach San Ph~m Thea Khu Vl!c 145 3.8.5 SSD05 _8ang Nh~p 146 3.8.6 SSD06 _Them Khu Vl!C 146 3.8.7 SSD07 _X6a Khu Vl!c 147 3.8.8 SSD08 Them San Ph~m 147 3.8.9 SSD09 X6a San Ph~m 148 3.8.10 SSD10 Sua San Ph~m 148 CHITON G : :;l: : 149 ;1," TON G KET DE TAl 4.1 Cac k€t qua d~t dugc : 149 149 4.2 H~n ch€ _ Giai h~n d~ tid: 149 4.3 Huang phat tri~n : 150 ,- ? TAl LI~U THAM KHA : Tai li~u tieng Vi~t : 151 151 : Tai li~u ti€ng Anh : 151 : Tai li~u Internet : 151 CHUaNG : TONG QUAN CHUONG 1: TONG QUAN 1.1 Ten d~ tai : Tim hieu cang ngh~ Silverlight va phat trien (rng dl,mg the hi~n Sieu Thi Ao tren web 1.2 Ly chQn d~ tai : Ngay nay, v6i tinh hinh kinh t€ phM trien , nhip s6ng cang t~t b~t, oo'i s6ng v~t ch~t dng tang cao Do 06, nhu du rnua s5rn hang ngay, nguai ta rnong rnu6n c6 the ti€p c~n san ph~rn v6i cach thuc thu~n ti~n, thi€t thl}'Cva ti€t ki~rn thai gian nh~t Vi th€ , rna hinh Sieu Thi Ao oai o~ oap ung nhu c~u 06 Thong qua Sieu Thi Ao ougc rna ph6ng theo thlJc t€, chung ta a b~t cu' nai oau: t~i nha, t~i truang hQc, t~i cang sa v~n c6 the xern dugc rna hinh cac sieu thi va san ph~rn 06, giup ti€t ki~rn thai gian , cang suc va rftt thu~n ti~n Ngoai ra, 06i v6i cac doanh nghi~p , rna hinh giup ti€t ki~rn r~t nhieu chi phi quang ba san ph~rn, chi phi 06 se ougc chuyen o€n rn\lC tieu ph\lc V\l khach hang t6t han Ben c~nh vi~c oap ung nhu c~u su d\lng thi vi~c thu hut nguo'i dung b~ng giao di~n, cach thuc the hi~n cling 06ng vai tro quan trQng SlJ cang Clla u'ng d\lng Sieu thi ao oai v6i tieu chi Ia trang web ao nhung rnang tinh ch~t th\l'c cho nguai dung, su d\lng cang ngh~ Silverlight cua Microsoft hi vQng se rnang o€n rnQt cai nhin rn6i cach the hi~n hinh anh tren nhung trang Web CHUONG : TONG QUAN 1.3 Mue tieu d~ tai : Ml;lCtieu chinh clla o~ tai la phM tri€n ung dl;lng th€ hi~n sieu thi ao tren web co su dl;lng c6ng ngh~ Silverlight Clla Microsoft Vng d\lOg se o~t ougc cac yeu c5u va tieu chufin Clla mOt trang web sieu thi ao hoan chinh, o6ng thai co tinh tuang tac cao v6i nguai dung, th€ hi~n kha nang trinh bay san phfirn cho nguai dung xern Nguaj dung co th€ t~j nhfl rna cling bi€t cac san phfirn ougc bay ban sieu thi CHUaNG : CONG NGHE SILVERLIGHT CHUONG2 : CONG NGHE• SILVERLIGHT 2.1 Gio'i thieu : [I] Th€ giai Internet va web da tra cong C\ltruy~n thong g~n ch~t vai dui s6ng kinh te xa hQi Vi the xay dt,rng chien luqc phat trien web la nhi~m V\l rat quan tr9ng Tuy nhien vi~c tht,rc hi~n chien luqc d6 khong d~ dang, l?i cang kh6 khan han vi~c phil hqp vai xu huang nQi dung web tuang tac th~ h~ mai dang cang thinh hanh M\lc tieu hang dau qua trinh xay dt,rng web th~ h~ mai la cac ung d\lng da tuang tac chat luqng cao va nhfrng hi~u ung da phuang ti~n Microsoft da dau tu rat Ian vao m\lC tieu thong qua cong ngh~ Silverlight Sau han thang thfr nghi~m vao 5/9/2007, Microsoft da chinh thtl'c giai thi~u Silverlight nhu cau tn\ lui cho xu huang web tuang taco 2.2 Khai Diem: Silverlight la mQt san ph~m ph an m~m ung d\lng nhung da phuang ti~n, duqc plug-in vao trinh duy~t Phan m~m h6 trq xay dt,rng nhfi'ng ung d\lng d6 h9a k€t hqp hinh anh, mang suc m?nh am va video cai ti€n den vai cac u'ng d\lng web, h6 trq cho cong ngh~ Ajax Ben c?nh nhfrng ung d\lng video, Silverlight c6 rat nhi~u nhfrng ung d\lng khac nhu Silverlight Map la mQt phien bim clla phan m~ill MidManager clla Mindjet ho~c gi6ng nhu illQt phien ban clla giao di~n ribbon clla Office 2007 1-137 CHUONG : UNG D1JNG SIEU THl Ao 3.7.4.6 UC06: Them Khu Vl}'C THEM KHU vlfc I Them khu vile j Ten Mau Hinh 3.23 : UC06 Them Khu • • • • V~l'C Scope (Ph(,lmvi) : Website Sieu Thi Ao Level (C~p oQ) : Use goal Primary actor (Nguai Slr d~mg) : Qmln trio StakeHolders and Interest (Ben lien quan va mong mu6n) : Quan tri mu6n vi~c them khu vgc ougc ti~n hanh mQt cach nhanh ch6ng, khong bi l6i • Preconditions (£)i~u ki~n ti~n t6) : Quan tri oang nh~p cong va vao trang quan tri • Postconditions (£)i~u ki~n h~u t6) : Quim tri them khu VllCthanh congo • Main Success Scenario (Dong sg ki~n chinh) : o Nguai dung chtcach nhanh chong, khong bj 16i Preconditions (Di~u ki~n ti~n t6) : Quan trj oang nh~p cong va vao trang quan trj ~ Postconditions (Di~u ki~n h~u t6): Quan trj them san phfim congo Main Success Scenario (Dong sv ki~n chfnh ): o Nguai dung chcon Them san phfim hi~n thj o Nguai dung nh~p ofty ou thong tin: Ten san phfim, Mo ta, Gia ti~n, Nha san xufrt, Dan vj tfnh, ChQn hinh, Ngay nh~p (m?c ojnh la h~ th6ng) va chQn nUt Luu o San phfim m6i oUQ'cluu xu6ng CSDL, xufrt thong bao "San phfim off oUQ'cthem!" va website tv o(>ngc~p nh~t l~i v6i san phfim m6i them oUQ'chi~n thj tren So' 06 cay Extensions (Ngo~i l~ _ Kjch ban thay th~): o N~u nguai dung chua chQn khu Vl,TC dn them san phfim tren So' 06: CHLJdNG : UNG DlJNG SlED THl Ao 140 • Website xu~t thong baa: "B~n chua chon khu Y\fCdn them san phfrm tren sa d6" • Ngm:ri dung chon khu Y\fCtren sa d6 sieu thj o N~u nguai dung chua nh~p Ten, Gia, Nhft san xu~t, Hinh cua san phfrm • Website xu~t thong baa: "Ten, Gia, Nhft san xu~t, Hinh cua san phfrm khong duQ'c b6 trf>ng!" • Nguai dung nh~p l~i d~y duo o N~u nguai dung nh~p Gia Clla san phfrm khong phai 1ftsf> • Website xu~t thong baa: "Gia ti~n phai 1ftsf>nguyen duang!" • Nguai dung nh~p l~i Gia ti~n o N~u nguai dung nh~p Gia cua san phfrm sf>am • Website xu~t thong baa: "Gia ti~n phai 1ftsf>nguyen duang!" • Nguai dung nh~p l~i Gia ti~n 3.7.4.9 UC09: Xoa San Ph~m • Chi tiel San pham Ten san pham : I Dau QQi Rejoice trai cay 200ml Cho toc Nhcon Chi ti€t san phfrm hi~n thi o Nguai dung chQn nut Xoa o San phfrm chQn dugc xoa CSDL, xu~t thong bao:" San phfrm dfi dugc xoa!" va website tv dQng c~p nh~t l~i vai san phfrm chQn dfi dugc xoa tren sa d6 cay 3.7.4.10vel0 : Sim San Ph~m Chi ti€~t San pham Ten san pham : I Dau gQi Rejoice trai cay 200m I I Cho toe sieu Im/qt, hvong trai cay I Nha san xuat: [ cong ty P&G Viet Nam Gia: [25000 I Don vi tinh: I I ehai I Hinh eu: Hinh mai: I i 44.jpg Browse LUll Xoa I Hinh 3.27: UClD Su'a Scm Phdm Dong CHUdNG : UNG Dl)NG SIEU THl Ao • • • • 142 Scope (Pht kh6i lugng cO'sa dfr li~u Ian cua m(>th~ th6ng sieu thi, va dung dfr li~u d~ng Geometry d~ th~ hi~n 4.2 Han ch~ Gi6i han d~ tai : Do v~n d~ v~ thai gian nen nhom chung em chi th~ hi~n Sieu Thi Ao tren cO' sa cho phep nguai dung xem sO' d6 toan b(>sieu thi , cac khu VlJC, san • ph~m , thong tin san ph~m Ky thu~t load cO'sa dfr li~u spatial len can ch~m Mo hinh sieu thi chi th~ hi~n a mu'c v~t Iy, chua th~t SlJr5 rang CHUONG : UNG Dl)NG SlED THl Ao 150 Chua t~n d1,mgh~t cac uu th~ cua Silverlight a~ lam giao di~n th~t a~p mat • 4.3 Hlfo'ng phat tri~n : (J'ng dvng c6ng ngh~ Silverlight cho phep nguai dung co th~ ti~p xuc vai Sieu Thi Ao mOt cach thlJc han, co th~ mua hang trlJc ti~p tren m~ng PhM tri~n giao di~n nguai dung than thi~n va a~p m~t han •• CHUONG : UNG Dl)NG SIEU THI Ao 151 TAl LIEU THAM KHAo • [1] Nguy~n Ulm Huy, Kh6a lu~n t6t nghi~p: Xdy d{mg website Thuong mqi ai~n tlr Ling d~mg c6ng ngh~ WPF, tru'cyngD~i HQc Ngo~i NgCi'Tin HQc, nam 2009 [2] Le Thanh Hai va 06i tac chuang trinh h6 trQ'phfrn mem Vi~t Nam, Silverlight cho m9i n~l'iJi , http://blogs.msdn.com/, nam 2009 : Tai li~u ti~ng Anh : [3] Matthew MacDonald, Pro Silverlight in C#, nam 2009 •: Tai lieu Internet: [4] http://silverlight.net/:Trang web chfnh thuc ve Silverlight cua Microsoft [5] http://blogs.msdn.com/:Di~n oan chfnh thuc ve Silverlight cua Microsoft [6] http://msdn.microsoft.com/ [7] http://ngoctuct.spaces.live.com/: Slog huang d~n dung Silverlight o~ hi~n thj ban 06 tu ki~u dfr li~u spatial [8] http://en.wikipedia,org/wiki/Spatial database [9] http://www.codeproject.com/KB/silverlight/ : Huang d~n k~t n6i ca So' dfr li~u [10] http://www.vietbando.com/sieuthibinhtrung ~.4