TRUNG TM O TO LP TRNH VIN QUC T FPT-APTECH

HNG DN XY DNG NG DNG WEB VI MACROMEDIA DREAMWEAVER MX

(Ti liu b sung thc hin project)

09/2003

Xy dng trang web ng vi cng c Dreamweaver MX

HNG DN XY DNG NG DNG WEB VI MACROMEDIA DREAMWEAVER MX

I. Gii thiu 1. Cc bc cn thc hin a. Cu hnh h thng v Mi trng lm vic ca Dreamweaver MX b. To Database c. Thit lp web site v to kt ni vo Database. nh ngha web site Ch lm vic i vi server To lin kt vi database Publish web site va to ln PWS Xem trang web trong trnh duyt. d. To cc dng trang web thao tc c kt ni Database. 2. Web site minh ha a. Ni dung: Trong phn ny chng ta minh ha vic to mt web site gii thiu mt hng in thoi. Ch lm vic vi Server thng qua cc trang Active Server Page (asp). b. Chc nng thao tc: - Trang login - Trang logout - Hin th d liu theo danh sch theo dng bng - Hin th d liu theo danh sch dng Master-Detail - Nhp mi d liu - Cp nht d liu dng Master-Detail (Search Update) - Cp nht d liu trn cng mt form (Search Update) - Xo d liu (Search Delete) c. B tr cc trang: Trang ch Trang Login Trang chn ni dung Danh sch dng bng (Index_Login) Danh sch dng Master-Detail Nhp mi Cp nht dng Master-Detail Cp nht trn cng mt form Xo d liu Trang logout (default.htm) (Login.asp) (Index_Login.htm d. Ni dung tng trang Trang ch: gm 3 frame Contents Login <Banner> <Ni dung>

Page 1 of 33

Xy dng trang web ng vi cng c Dreamweaver MX Hnh 1: trang Index.htm Trang Login.asp LOGIN FORM User name: Password: Submit

Hnh 2: Trang Login.htm Trang Login khi c gi s chim trn mn hnh hin ti. Trang Index_Login.htm Contents <Banner> Display Dipslay Mas_Detail Insert Update Two Form Update One Form Delete Logout Hnh 3: Trang Index_Login.htm Trang Index_Login khi c gi s chim trn mn hnh hin ti. Trang Logout.asp y l trang trng, ch cha cc on m JavaScript ng li vic login. Ch i km vi vic login. Trang Logout.asp khi c gi s lin kt n trang default.htm, khi trang default.htm s chim trn mn hnh hin ti. Cc trang cn li s c cp khi xy dng tng trang. <Ni dung>

Page 2 of 33

Xy dng trang web ng vi cng c Dreamweaver MX II. Cu hnh h thng v Mi trng lm vic 2. Cu hnh h thng - H iu hnh: Windows 2000, c ci t thm cc cng c Internet Information Server v Personal Web Server. - H qun tr d liu: Ms Access 2000. - Trnh duyt web: Internet Explorer 5.0 v Netscape Nevigator 4.7 - Dreamweaver MX. Ci t IIS v PWS: (Khi Windows cha c ci t) a. Trong Windows 2000 vo Control Panels, chn Add / Remove Programs Hin th hp thoi chn tab Add / Remove Windows Components xut hin hp thoi k tip nh hnh 4.

Hnh 4. b. nh du chn vo Checkbox Internet Information Sevices (IIS), sau bm vo nt lnh Next v thc hin cc cng vic theo yu cu (PWS l mt component trong IIS, bm vo nt lnh Detail xem chi tit). c. Sau khi khi ng li my tnh, ta s c mt th mc web site mc nh l D:\\Interpub\wwwroot nh hnh 5 (gi s ci windows 2000 trn a D:)

Hnh 5 Page 3 of 33

Xy dng trang web ng vi cng c Dreamweaver MX 2. Mi trng lm vic ca Dreamweaver MX a. Chn giao din lm vic ging Dreamweaver 4.0 - Vo menu Edit / Preferences hin th hp thoi Preferences - Trong mc Category chn General chn nt lnh Change workspace.. hin th hp thoi nh hnh 6, sau chn Dreamwevaer 4 Workspace (thay i ch c hiu qu cho s dng Dreamweaver MX ln sau)

Hnh 6. b. Hin th Object Panels - Trong Dreamweaver MX, hin th Object Panels ta vo menu Windows / Insert Object Panel s xut hin bn tri mn hnh. Xem hnh 7.

Hnh 7. Page 4 of 33

Xy dng trang web ng vi cng c Dreamweaver MX I. To Database - Database c to trong Ms.Access2000 (Data_Project.mdb). - Bng d liu Login Name UName PWord Mobile Name Mcode SCode MName DNotice Price Image Supplier Name SCode SName S quan h nh sau: Data Type Text Text Data Type Text Text Text Date / Time Number OLE Object Data Type Text Text Decription User name Password Decription Mobile code Supplier code (Distributor) Mobile Name Date of notice Price of mobile Mobiles photographic or movie Decription Supplier code (Distributor) Suppliers Name

Hnh 8.

Page 5 of 33

Xy dng trang web ng vi cng c Dreamweaver MX II. Thit lp web site v kt ni Database 3. nh ngha site: Vic nh ngha site tng t trong Dreamweaver 4.0, gi s ta tin hnh khai bo cc thng s nh hnh 9. Trong : - Site name: tn ca web site (Project) - Local Root Folder: a ch lu tr web site trn my local (D:\Internetpub\wwwroot\project (c th lu bt c th mc no tu ). - Default Images Folder: th mc cha nh ca trang (nu c) - HTTP Address: a ch ca web site trn my local, s khai bo phn Testing Server.

Hnh 9 4. Ch lm vic i vi server Ta phi chn ch lm vic i vi server, y ta chn l ASP JavaScript a. M panel Application: Trong web site Project, t Laucher bar (hoc t menu Windows) chn Database, xut hin panel Application nh hnh 10a.

Page 6 of 33

Xy dng trang web ng vi cng c Dreamweaver MX

Hnh 10a Hnh 10b b. Click chut vo testing server m hp thoi Site Definition for Project xut hin nh hnh 11.

Hnh 11

Page 7 of 33

Xy dng trang web ng vi cng c Dreamweaver MX c. in cc thng s nh hnh 11. Trong : Server Model: chn cng ngh server (ASP JavaScript) Access: giao thc giao tip vi server (Local / Network). Testing Server Folder: th mc cha web site. URL Prefix: a ch ca web site trn my local, gi s chng ta t cho web site mt alias l myproject (hoc l tn ca th mc hin hnh: project), th a ch s l: http://localhost/myproject (xem phn to alias cho web site mc publish web site ln PWS) Chn OK kt thc ta c hnh 10b.

5. To lin kt vi database Trong project ny ta dng c ch kt ni ODBC connection string. C 2 hnh thc kt ni: Cch 1. Kt ni dng DSN - To kt ni DSN vo Database - Trong Dreamweaver MX, to kt ni gia ng dng vi kt ni DSN. Khi sao chp Site n mt my khc th phi nh ngha li DSN tng ng th chng trnh mi thi hnh. Cch 2. Kt ni do ngi dng vit code. - Trong Dreamweaver MX, to kt ni gia ng dng vi Database do ngi dng vit code. C 2 dng ng dn tuyt i v ng dn tng i Nn dng ng dn tng i sao chp v thi hnh Web Site trn cc my khc nhau c d dng. Kt ni DSN vo Database a. Kch Start Settings Addministrative Tools Data Sources, hp thoi ODBC Data Source Administrator xut hin nh hnh 12.

Hnh 12.

Page 8 of 33

Xy dng trang web ng vi cng c Dreamweaver MX b. Click vo nt lnh Add, xut hin hp thoi nh hnh 13.

Hnh 13 c. Chn driver l Microsoft Access Driver nh nh hnh 13, sau bm Finish, mt hp thoi s xut hin nh hnh 14. Tin hnh in Data Source Name, sau click vo nt Select chn Database (Gi s ta ang lu th mc D:\\Interpub\wwwroot\Project), sau cng click vo nt lnh OK quay li hp thoi nh hnh 12 nhng c thm data source MyDatabase va to. Click vo nt OK hon tt.

Hnh 14

Page 9 of 33

Xy dng trang web ng vi cng c Dreamweaver MX d. Trong site Project, vo panel Application.

Hnh 15
e. Chn tab Database, nhn chut vo du + v chn Data Source Name (DSN), mt hp thoi Data Source Name xut hin. in cc thng s vo nh hnh 16.

Hnh 16
f. Bm Test kim tra s kt ni, nu thnh cng s xut hin thng bo Connection was made successfully. g. Sau khi kt ni thnh cng, ca s Application s thay i nh sau:

Hnh 17

Page 10of 33

Xy dng trang web ng vi cng c Dreamweaver MX Kt ni ng dng vi Database do ngi dng vit code. a. Trong panel Application, nhn chut vo du + v chn Custom Connection String, mt hp thoi Custom Connection String xut hin. in cc thng s vo nh hnh 18.

Hnh 18 Trong : - Connection name: tn ca kt ni vo Database - Connection String: dng lnh to kt ni vo Database: * Dang ng dn tuyt i: "Driver={Microsoft Access Driver (*.mdb)}; DBQ=D:\\Inetpub\\wwwroot\\Project\\Data_Project.mdb" * Dang ng dn tng i: "Driver={Microsoft Access Driver (*.mdb)}; DBQ=+Server.MapPath(Data_Project.mdb) a. Bm Test kim tra s kt ni, nu thnh cng s xut hin thng bo Connection was made successfully. Hoc i vi hnh thc ng dn tng i, th s c th c cu sau The simple Recordset Dialog box, can not be open. Nhng v tip tc lm tp. b. Sau khi kt ni thnh cng, ca s Application s thay i nh sau

Hnh 19 Sau ny nu mun hiu chnh ch cn Double click chut vo MyConnect th mt hp thoi tng ng xut hin hiu chnh. Tng t cho cc trng hp hiu chnh khc.

Page 11of 33

Xy dng trang web ng vi cng c Dreamweaver MX 6. Publish web site va to ln PWS a. Kch Start Settings Taskbar & Start Menu Advanced. Trong mc Menu Start Setting kim tra xem checkbox Display Addministrative Tools c chn cha, nu cha th nh du chn. b. Kch Start Programs Addministrative Tools Personal Web Server hin th hp thoi nh hnh 20.

Hnh 20 c. Chn vo tab Advanced click vo nt Add, mt hp thoi Add Directory s hin ra. Chn cc thng s nh hnh 21, trong Directory l th mc ang cha trang web; alias l mt th mc o (Vitual Directory) ca trang web, alias ny s c dng truy xut trang web sau ny. (ch cc thuc tnh: write, execute)

Hnh 21 Page 12of 33

Xy dng trang web ng vi cng c Dreamweaver MX d. hnh 20, trong textbox Default Documents g vo tn trang ch ca web site (v d trang ch l Index.htm). Khi truy cp vo web site ny, trang Index.htm s t ng c ti ra u tin. 7. Xem trang web trong trnh duyt. a. M trnh duyt IE b. Ti hp address g vo dng a ch: http://localhost/myproject, trang web va to s xut hin.

Hnh 22 trang ch (Index.htm)

Page 13of 33

Xy dng trang web ng vi cng c Dreamweaver MX II. To cc trang web c kt ni Database - Cc trang ny c kt ni Database dng cng ngh kt ni l JavaScript - Phn m rng ca tn file l asp (*.asp) 2. To form login a. Trong site Project, vo menu File / New Hp thoi New Document xut hin, chn Category Dynamic Page trong Dynamic page chn ASP Javascript bm nt Create.

Hnh 23
b. Thit k giao din vo lu file (Login.asp)

Hnh 24
Page 14of 33

Xy dng trang web ng vi cng c Dreamweaver MX c. T panel Application chn tab Server Behaviors click chut vo du + xung menu chn User Authentication / Log In User xut hin hp thoi,

Hnh 25 d. Tin hnh khai bo nh hnh 26

Hnh 26
e. Click vo nt lnh OK kt thc. Page 15of 33

Xy dng trang web ng vi cng c Dreamweaver MX 3. To form logout (Logout.asp) Logout form l mt trang rng ch cha cc m JavaScript ng li kt ni khi login. a. T panel Application chn tab Server Behaviors click chut vo du + xung menu chn User Authentication / Log Out User (hnh 25) xut hin hp thoi, tin hnh khai bo nh hnh 27

Hnh 27
b. Click vo nt lnh OK kt thc. 4. To form hin th danh sch theo dng bng a. Thit k giao din vo lu file (Display.asp)

Hnh 28
b. T panel Application chn Server Behaviors click chut vo du + xut hin menu chn Recordset xut hin hp thoi, tin hnh khai bo nh hnh 29.

Hnh 29
Page 16of 33

Xy dng trang web ng vi cng c Dreamweaver MX c. Trn trang Display, t con tr ti v tr m ta mun xut hin d liu vo menu Insert / Application Objects / Dynamic Table hp thoi Dynamic table xut hin, tin hnh chn cc thng s, sau nhn OK. Trang Web s c dng nh sau:

Hnh 30
d. Thm v hiu chnh cc tnh nng khi hin th d liu: i vi nh ca sn phm, nu ta khng hiu chnh th Dreamweaver MX s a ra v tr ca file ta phi to mt PlaceHolder cha nh Chn v xo b bin hin th nh {display.Image} t con tr ti hin th nh. Chn menu Insert / Image PlaceHolder t tn cho vng hin th nh T panel Application chn tab Bindings sau click chut vo Image ko v th vo PlaceHolder va to. xut ra thng bo thch hp khi khng c d liu: t con tr di vng table g vo thng bo Record Not Found Chn ton b cu thng bo T panel Application chn tab Server Behaviors sau click chut vo du + xung menu chn Show Region / Show Region If Recordset Is Empty. Ch xut hin phn bng d liu trn khi c d liu trong Database Chn ton b vng table. T panel Application chn tab Server Behaviors sau click chut vo du + xung menu chn Show Region / Show Region If Recordset Is Not Empty. Sau khi thao tc xong chng ta c cu trc trang Display.asp nh sau:

Page 17of 33

Xy dng trang web ng vi cng c Dreamweaver MX

Hnh 31
5. To form Hin th d liu theo danh sch dng Master-Detail (form Search) - Trang Master dng lit k cc mu tin v cha mt lin kt n trang detail. Khi click vo lin kt, trang Detail s m ra th hin nhiu hn cc chi tit ca mu tin. - Cc bc thc hin: To trang Master To recordset Hiu chnh trang Detail (t sinh) Hiu chnh trang Master a. To giao din v lu trang Master (DisplayMaster.asp)

Hnh 32
b. T panel Application chn tab Server Behaviors click chut vo du + xung menu chn Recordset xut hin hp thoi, tin hnh khai bo nh hnh 33. C th kim tra kt ni bng cch nhn vo phm Test. Page 18of 33

Xy dng trang web ng vi cng c Dreamweaver MX

Hnh 33
c. Trn trang Display, t con tr ti v tr m ta mun xut hin d liu vo menu Insert / Application Objects / Master Detail Page Set hp thoi Insert Master_Detail Page Set xut hin, tin hnh chn cc thng s nh hnh 34 sau.

Page 19of 33

Xy dng trang web ng vi cng c Dreamweaver MX

Hnh 34
Trong : Master Page Fields cha nhng ct m ta mun th hin trn trang Master. Detail Page Fields cha nhng ct m ta mun th hin trn trang Detail. Detail Page Name l trang Detail, trang ny s c to t ng do ch cn nhp vo mt tn file m ta d nh lm trang detail. b. Sau nhn OK. S c 2 trang Web c to l trang Master v trang Detail. Trong trang Detail s c dng nh sau

Hnh 35
a. Tin hnh hiu chnh theo mong mun (xem thm phn to form hin th dng bng). Sau khi to xong ta c cu trc nh hnh 36:

Page 20of 33

Xy dng trang web ng vi cng c Dreamweaver MX

Hnh 36
6. To trang Insert (Insert.asp) - Trang Insert c dng mt list box lit k cc nh cung cp (lit k tn, lu bng m). nh ca in thoi l mt file c ly t mt ca s file. - Cc bc thc hin: To recordset nh cung cp (supplier) To Insertion Form Hiu chnh a. To Danh sch lit k nh cung cp (supplier) - hnh 37.

Hnh 37
b. Trn trang Insert, t con tr ti v tr m ta mun to form nhp liu vo menu Insert / Application Objects / Record Insertion Form hp thoi Record Insertion Form xut hin. Tin hnh khai bo cc thuc tnh nh trong hnh 38 Trong : After Inserting, go to l trang m chng ta s cho hin th thng bo sau khi insert thnh cng.

Page 21of 33

Xy dng trang web ng vi cng c Dreamweaver MX

Hnh 38
Trong phn Form fields tin hnh chn cc thuc tnh: Column Label Display As Ghi ch Mcode Mobile Code Text Field Scode Suplier menu * Mname Name Text Field DNotice Date of Notice Text Field Price Price Text Field Image Photograph Text Field (chnh tag HTML input type=file) * Cch thc hin menu Scode nh sau: Trong hnh 40, Chn Display As cho Scode l menu, sau click vo Menu Properties ca s Menu Properties xut hin, tin hnh khai bo nh hnh 39 sau:

Hnh 39
c. Click vo nt lnh OK tr v ca s hnh 38. d. Tin hnh hiu chnh ta c mn hnh Insert nh hnh 40.

Hnh 40

Page 22of 33

Xy dng trang web ng vi cng c Dreamweaver MX

Note: Khi insert nh, nn s dng ng dn tng i bng cch xo th mc gc. VD: D:\Inetpub\wwwroot\Project\Images\6110.gif Images\6110.gif
7. To form cp nht dng Master-Detail (Search Update) Gm 2 bc: To trang search To trang hin th kt qu To trang Search a. To giao din vo lu file (Update.asp) b. To Recordset mcode dng truy xut tn v code ca Mobile cn cp nht

Hnh 42
form c cc thuc tnh sau:

Hnh 43
t tn cho menu l MobileCode, gi tr c ly t Recordset mcode nh sau: Chn vo menu va to Properties ca menu hin th nh hnh sau:

Hnh 44
Chn Dynamic hp thoi xut hin

Page 23of 33

Xy dng trang web ng vi cng c Dreamweaver MX

Hnh 45
Chn cc thuc tnh nh hnh 45 OK hon tt. 2. To trang hin th kt qu (Update_detail.asp)

Hnh 46
a. To Recordset update t bng Mobile, khai bo cc thuc tnh nh hnh sau:

Page 24of 33

Xy dng trang web ng vi cng c Dreamweaver MX

Hnh 47
b. Trn trang Update_Detail, t con tr ti v tr m ta mun to form nhp liu vo menu Insert / Application Objects / Record Update Form hp thoi Record Update Form xut hin

Hnh 48

Page 25of 33

Xy dng trang web ng vi cng c Dreamweaver MX c. Tin hnh chn la cc thuc tnh nh form Insert Click vo nt lnh OK kt thc. d. Sau hiu chnh c giao din nh hnh sau:

Hnh 49
8. To form cp nht trn cng mt trang (Search Update) Gm 2 bc: To trang cha (trang HTML) gm 2 frame: masterFrame, detailFrame. To trang search, hin th trong frame masterFrame To trang HTML hin th khi cha c kt qu tm To trang chi tit, hin th trong frame detailFrame khi tm thy d liu. Thc cht l ta vn to mt form tm kim v mt form hin th chi tit, nhng khc ch l c 2 form ny u c hin th trn cng mt trang cha gm 2 frame. To trang cha (Update.htm)

Hnh 50

Page 26of 33

Xy dng trang web ng vi cng c Dreamweaver MX

To trang Search (UpdateMaster.asp)

Hnh 51
form c cc thuc tnh sau: Ch : thuc tnh target: l detailFrame (phi t nhp vo v khng c trn list box)

Hnh 52
t tn cho menu l MobileCode, gi tr c ly t Recordset mcode (xem phn To form cp nht dng Master-Detail) To trang hin th khi cha c d liu (UpdateDetail.htm)

Hnh 53
To trang hin th chi tit (UpdateDetail.asp) Trang ny c to trong phn to trang Update dang Master-Detail trn (hnh 49) Sau khi thc hin xong ta c trang cha (Update.htm) nh hnh 54. Khi chn vo menu, v click vo nt Submit form Update_Detail.asp s hin th vo frame detailFrame ph di.

Page 27of 33

Xy dng trang web ng vi cng c Dreamweaver MX

Hnh 54
9. To form Delete dng Master-Detail (tng t nh cc to form Update) Gm 2 bc: To trang search To trang hin th kt qu c cha nt Xo To trang Search a. To giao din vo lu file (Delete.asp) b. To Recordset mcode dng truy xut tn v code ca Mobile cn delete.

Hnh 55
t tn cho menu l MobileCode, gi tr c ly t Recordset mcode form c cc thuc tnh sau:

Hnh 58
Page 28of 33

Xy dng trang web ng vi cng c Dreamweaver MX

2. To trang hin th kt qu (Delete_detail.asp) a. to resordset DelMobile t bng Mobile nh sau:

Hnh 59
b. To giao din trang hin th trc khi xa nh hnh sau. (Hoc n gin l copy file Update_Detail.asp v lu li thnh tn Delete_detail.asp)

Hnh 60
Page 29of 33

Xy dng trang web ng vi cng c Dreamweaver MX

c. Chn form sau vo Server Behaviors t du + chn Delete Record mt hp thoi hin th v tin hnh khai bo nh sau:

Hnh 61
d. Vo Bindings, tin hnh ko th cc field vo cc form object tng ng, sau lu file kt thc.

Page 30of 33

Xy dng trang web ng vi cng c Dreamweaver MX III. MT S IM CH 1. Cc li thng gp: Error 80004005-Couldnt use (unknown); file already in use 80004005Microsoft Jet database engine cannot open the file (unknown). 80040e10Too few parameters Nguyn nhn Do khng c quyn trn Database hoc th X l - Vo Internet Services Manager chn th mc hoc virtual directory cha trang web mc cha Database - chn properties chn tt c cc quyn: read, write, script osurce access, v directory brousing Do khng timeout - Vo ODBC Microsoft Access Setup - Chn Options tng Page timeout ln (khi kt ni DSN) 5000 Khi cu SQL truy vn n Vo code view chnh cu SQL mt trng khng tn ti hoc l Vng hin th gi tr ca To mt PlaceHolder cha nh thay trng cha hp l th cho vng text do Dreamweaver MX (thng l khi ta cho hin t to th nh i vi form masdet) View page khi ang thit ng cc chng trnh lin quan (i khi k hoc l c mt trang phi logoff my sau login tr li) ang truy xut vo recordset Truy xut vo recordset Xem li cc thnh phn Server rng m khng by li behaviors. Nu c du ! mu double click edit cho chnh xc.

800a0bcdEither BOF or EOF is true

tm hiu su hn v Dreamweaver MX v cc tnh hung x l ta c th vo menu Help / Tutorials xem chi tit. C th xem trang web mu ti a ch http://faculty04/fptaptech/myproject (hoc chp ton b web site t th mc Server1\share\dungchung\xuangiap\myproject). Trang web ny ch l minh ha cho nhng chnh ca Dreamweaver MX cc bn phi t tm ti v sng to cho ring mnh. Dreamweaver MX cn c rt nhiu tnh nng to web ng kh mnh, xin dnh cho cc bn t khm ph trang web ca mnh tr nn professtional hn.

Hoc c th xem v download ton b trang web ny t web site: www12.brinkster.com/ktvaptech Chc cc bn thnh cng.

- -

Page 31of 33