intTypePromotion=1
zunia.vn Tuyển sinh 2024 dành cho Gen-Z zunia.vn zunia.vn
ADSENSE
 » 
 » 

Cách hướng dẫn xây dựng ứng dụng Web về Macromedia dreamweaver MX

Chia sẻ: Le_kimhung Hung | Ngày: | Loại File: PDF | Số trang:31

Thêm vào BST
Báo xấu
287
lượt xem 129
download
 
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Tài liệu bổ sung thực hiện project và Hướng dẫn xây dựng ứng dụng Web với Macromedia dreamweaver MX

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Cách hướng dẫn xây dựng ứng dụng Web về Macromedia dreamweaver MX

  1. TRUNG TÂM ðÀO T O L P TRÌNH VIÊN QU C T FPT-APTECH HƯ NG D N XÂY D NG NG D NG WEB V I MACROMEDIA DREAMWEAVER MX (Tài li u b sung th c hi n project) 09/2003
  2. Xây d ng trang web ñ ng v i công c Dreamweaver MX HƯ NG D N XÂY D NG NG D NG WEB V I MACROMEDIA DREAMWEAVER MX I. Gi i thi u 1. Các bư c c n th c hi n a. C u hình h th ng và Môi trư ng làm vi c c a Dreamweaver MX b. T o Database c. Thi t l p web site và t o k t n i vào Database. ð nh nghĩa web site Ch ñ làm vi c ñ i v i server T o liên k t v i database Publish web site v a t o lên PWS Xem trang web trong trình duy t. d. T o các d ng trang web thao tác có k t n i Database. 2. Web site minh h a a. N i dung: Trong ph n này chúng ta minh h a vi c t o m t web site gi i thi u m t hàng ñi n tho i. Ch ñ làm vi c v i Server thông qua các trang Active Server Page (asp). b. Ch c năng thao tác: - Trang login - Trang logout - Hi n th d li u theo danh sách theo d ng b ng - Hi n th d li u theo danh sách d ng Master-Detail - Nh p m i d li u - C p nh t d li u d ng Master-Detail (Search Update) - C p nh t d li u trên cùng m t form (Search Update) - Xoá d li u (Search Delete) c. B trí các trang: Trang ch Trang Login Trang ch n n i dung Danh sách d ng b ng (Index_Login) Danh sách d ng Master-Detail Nh p m i C p nh t d ng Master-Detail C p nh t trên cùng m t form Xoá d li u Trang logout (default.htm) (Login.asp) (Index_Login.htm d. N i dung t ng trang Trang ch : g m 3 frame Contents Login Hình 1: trang Index.htm Page 1 of 31
  3. Xây d ng trang web ñ ng v i công c Dreamweaver MX Trang Login.asp LOGIN FORM User name: Password: Submit Hình 2: Trang Login.htm Trang Login khi ñư c g i s chi m tr n màn hình hi n t i. Trang Index_Login.htm Contents Display Dipslay Mas_Detail Insert Update Two Form Update One Form Delete Logout Hình 3: Trang Index_Login.htm Trang Index_Login khi ñư c g i s chi m tr n màn hình hi n t i. Trang Logout.asp • ðây là trang tr ng, ch ch a các ño n mã JavaScript ñ ñóng l i vi c login. • Ch ñi kèm v i vi c ñã login. • Trang Logout.asp khi ñư c g i s liên k t ñ n trang default.htm, khi ñó trang default.htm s chi m tr n màn hình hi n t i. Các trang còn l i s ñư c ñ c p khi xây d ng t ng trang. Page 2 of 31
  4. Xây d ng trang web ñ ng v i công c Dreamweaver MX II. C u hình h th ng và Môi trư ng làm vi c 2. C u hính h th ng - H ñi u hành: Windows 2000, có cài ñ t thêm các công c “Internet Information Server” và “Personal Web Server”. - H qu n tr d li u: Ms Access 2000. - Trình duy t web: Internet Explorer 5.0 và Netscape Nevigator 4.7 - Dreamweaver MX. Cài ñ t IIS và PWS: (Khi Windows chưa ñư c cài ñ t) a. Trong Windows 2000 vào Control Panels, ch n “Add / Remove Programs” Hi n th h p tho i ch n tab “Add / Remove Windows Components” xu t hi n h p tho i k ti p như hình 4. Hình 4. b. ðánh d u ch n vào Checkbox “Internet Information Sevices (IIS), sau ñó b m vào nút l nh Next và th c hi n các công vi c theo yêu c u (PWS là m t component trong IIS, b m vào nút l nh Detail… ñ xem chi ti t). c. Sau khi kh i ñ ng l i máy tính, ta s có m t thư m c web site m c ñ nh là D:\\Interpub\wwwroot như hình 5 (gi s cài windows 2000 trên ñĩa D:) Hình 5 Page 3 of 31
  5. Xây d ng trang web ñ ng v i công c Dreamweaver MX 2. Môi trư ng làm vi c c a Dreamweaver MX a. Ch n giao di n làm vi c gi ng Dreamweaver 4.0 - Vào menu Edit / Preferences hi n th h p tho i Preferences - Trong m c Category ch n General ch n nút l nh “Change workspace..” hi n th h p tho i như hình 6, sau ñó ch n “Dreamwevaer 4 Workspace” (thay ñ i ch có hi u qu cho s d ng Dreamweaver MX l n sau) Hình 6. b. Hi n th Object Panels - Trong Dreamweaver MX, ñ hi n th Object Panels ta vào menu Windows / Insert Object Panel s xu t hi n bên trái màn hình. Xem hình 7. Hình 7. Page 4 of 31
  6. Xây d ng trang web ñ ng v i công c Dreamweaver MX II. T o Database - Database ñư c t o trong Ms.Access2000 (Data_Project.mdb). - B ng d l i u Login Name Data Type Decription UName Text User name PWord Text Password Mobile Name Data Type Decription Mcode Text Mobile code SCode Text Supplier code (Distributor) MName Text Mobile Name DNotice Date / Time Date of notice Price Number Price of mobile Image OLE Object Mobile’s photographic or movie Supplier Name Data Type Decription SCode Text Supplier code (Distributor) SName Text Supplier’s Name Sơ ñ quan h như sau: - Hình 8. Page 5 of 31
  7. Xây d ng trang web ñ ng v i công c Dreamweaver MX III. Thi t l p web site và k t n i Database 1. ð nh nghĩa site: Vi c ñ nh nghĩa site tương t trong Dreamweaver 4.0, gi s ta ti n hành khai báo các thông s như hình 9. Trong ñó: - Site name: tên c a web site (Project) - Local Root Folder: ñ a ch lưu tr web site trên máy local (D:\Internetpub\wwwroot\project (có th lưu b t c thư m c nào tuỳ ý). - Default Images Folder: thư m c ch a nh c a trang (n u có) - HTTP Address: ð a ch c a web site trên máy local, s khai báo ph n “Testing Server”. Hình 9 2. Ch ñ làm vi c ñ i v i server Ta ph i ch n ch ñ làm vi c ñ i v i server, ñây ta ch n là ASP JavaScript a. M panel “Application”: Trong web site “Project”, t Laucher bar (ho c t menu Windows) ch n “Database”, xu t hi n panel “Application” như hình 10a. Page 6 of 31
  8. Xây d ng trang web ñ ng v i công c Dreamweaver MX Hình 10a Hình 10b b. Click chu t vào “testing server” ñ m h p tho i “Site Definition for Project” xu t hi n như hình 11. Hình 11 Page 7 of 31
  9. Xây d ng trang web ñ ng v i công c Dreamweaver MX c. ði n các thông s như hình 11. Trong ñó: - Server Model: ch n công ngh server (ASP JavaScript) - Access: giao th c giao ti p v i server (Local / Network). Testing Server Folder: thư m c ch a web site. - URL Prefix: ð a ch c a web site trên máy local, gi s chúng ta ñ t cho web site m t - alias là “myproject” (ho c là tên c a thư m c hi n hành: project), thì ñ a ch s là: http://localhost/myproject (xem ph n t o alias cho web site m c publish web site lên PWS) Ch n OK ñ k t thúc ta ñư c hình 10b. - 3. T o liên k t v i database Trong project này ta dùng cơ ch k t n i ODBC connection string. Có 2 hình th c k t n i: Cách 1. K t n i dùng DSN - T o k t n i DSN vào Database - Trong Dreamweaver MX, t o k t n i gi a ng d ng v i k t n i DSN. Khi sao chép Site ñ n m t máy khác thì ph i ñ nh nghĩa l i DSN tương ng thì chương trình m i thi hành. Cách 2. K t n i do ngư i dùng vi t code. - Trong Dreamweaver MX, t o k t n i gi a ng d ng v i Database do ngư i dùng vi t code. Có 2 d ng ðư ng d n tuy t ñ i và ñư ng d n tương ñ i Nên dùng ñư ng d n tương ñ i ñ sao chép và thi hành Web Site trên các máy khác nhau ñư c d dàng. K t n i DSN vào Database a. Kích Start Settings Addministrative Tools Data Sources, h p tho i ODBC Data Source Administrator xu t hi n như hình 12. Hình 12. Page 8 of 31
  10. Xây d ng trang web ñ ng v i công c Dreamweaver MX b. Click vào nút l nh “Add”, xu t hi n h p tho i như hình 13. Hình 13 c. Ch n driver là “Microsoft Access Driver” như như hình 13, sau ñó b m “Finish”, m t h p tho i s xu t hi n như hình 14. Ti n hành ñi n Data Source Name, sau ñó click vào nút “Select” ñ ch n Database (Gi s ta ñang lưu thư m c D:\\Interpub\wwwroot\Project), sau cùng click vào nút l nh “OK” quay l i h p tho i như hình 12 nhưng có thêm data source “MyDatabase” v a t o. Click vào nút “OK” ñ hoàn t t. Hình 14 Page 9 of 31
  11. Xây d ng trang web ñ ng v i công c Dreamweaver MX d. Trong site Project, vào panel Application. Hình 15 e. Ch n tab Database, nh n chu t vào d u + và ch n “Data Source Name (DSN)”, m t h p tho i “Data Source Name” xu t hi n. ði n các thông s vào như hình 16. Hình 16 f. B m “Test” ñ ki m tra s k t n i, n u thành công s xu t hi n thông báo “Connection was made successfully”. g. Sau khi k t n i thành công, c a s Application s thay ñ i như sau: Hình 17 Page 10of 31
  12. Xây d ng trang web ñ ng v i công c Dreamweaver MX K t n i ng d ng v i Database do ngư i dùng vi t code. a. Trong panel Application, nh n chu t vào d u + và ch n “Custom Connection String”, m t h p tho i “Custom Connection String” xu t hi n. ði n các thông s vào như hình 18. Hình 18 Trong ñó: - Connection name: tên c a k t n i vào Database - Connection String: dòng l nh t o k t n i vào Database: * Dang ñư ng d n tuy t ñ i: "Driver={Microsoft Access Driver (*.mdb)}; DBQ=D:\\Inetpub\\wwwroot\\Project\\Data_Project.mdb" * Dang ñư ng d n tương ñ i: "Driver={Microsoft Access Driver (*.mdb)}; DBQ=”+Server.MapPath(“Data_Project.mdb”) a. B m “Test” ñ ki m tra s k t n i, n u thành công s xu t hi n thông báo “Connection was made successfully”. Ho c ñ i v i hình th c ñư ng d n tương ñ i, thì s có th có câu sau “The simple Recordset Dialog box, can not be open….” Nhưng v ti p t c làm tí p. b. Sau khi k t n i thành công, c a s Application s thay ñ i như sau Hình 19 Sau này n u mu n hi u ch nh ch c n Double click chu t vào “MyConnect” thì m t h p tho i tương ng xu t hi n ñ hi u ch nh. Tương t cho các trư ng h p hi u ch nh khác. Page 11of 31
  13. Xây d ng trang web ñ ng v i công c Dreamweaver MX 4. Publish web site v a t o lên PWS a. Kích Start Settings Taskbar & Start Menu… Advanced. Trong m c “Menu Start Setting” ki m tra xem checkbox “Display Addministrative Tools” ñã ñư c ch n chưa, n u chưa thì ñánh d u ch n. b. Kích Start Programs Addministrative Tools Personal Web Server hi n th h p tho i như hình 20. Hình 20 c. Ch n vào tab Advanced click vào nút Add, m t h p tho i Add Directory s hi n ra. Ch n các thông s như hình 21, trong ñó Directory là thư m c ñang ch a trang web; alias là m t thư m c o (Vitual Directory) c a trang web, alias này s ñư c dùng ñ truy xu t trang web sau này. (chú ý các thu c tính: write, execute…) Hình 21 Page 12of 31
  14. Xây d ng trang web ñ ng v i công c Dreamweaver MX d. hình 20, trong textbox “Default Documents” gõ vào tên trang ch c a web site (ví d trang ch là Index.htm). Khi truy c p vào web site này, trang Index.htm s t ñ ng ñư c t i ra ñ u tiên. 5. Xem trang web trong trình duy t. a. M trình duy t IE b. T i h p address gõ vào dòng ñ a ch : http://localhost/myproject, trang web v a t o s xu t hi n. Hình 22 – trang ch (Index.htm) Page 13of 31
  15. Xây d ng trang web ñ ng v i công c Dreamweaver MX IV. T o các trang web có k t n i Database - Các trang này có k t n i Database dùng công ngh k t n i là JavaScript - Ph n m r ng c a tên file là asp (*.asp) 2. T o form login a. Trong site Project, vào menu File / New H p tho i New Document xu t hi n, ch n Category “Dynamic Page” trong Dynamic page ch n “ASP Javascript” b m nút “Create”. Hình 23 b. Thi t k giao di n vào lưu file (Login.asp) Hình 24 Page 14of 31
  16. Xây d ng trang web ñ ng v i công c Dreamweaver MX c. T panel “Application” ch n tab “Server Behaviors” click chu t vào d u + ñ ñ xu ng menu ch n User Authentication / Log In User xu t hi n h p tho i, Hình 25 Ti n hành khai báo như hình 26 d. Hình 26 e. Click vào nút l nh “OK” ñ k t thúc. Page 15of 31
  17. Xây d ng trang web ñ ng v i công c Dreamweaver MX 3. T o form logout (Logout.asp) Logout form là m t trang ‘r ng’ ch ch a các mã JavaScript ñ ñóng l i k t n i khi login. a. T panel “Application” ch n tab “Server Behaviors” click chu t vào d u + ñ ñ xu ng menu ch n User Authentication / Log Out User (hình 25) xu t hi n h p tho i, ti n hành khai báo như hình 27 Hình 27 b. Click vào nút l nh “OK” ñ k t thúc. 4. T o form hi n th danh sách theo d ng b ng a. Thi t k giao di n vào lưu file (Display.asp) Hình 28 b. T panel “Application” ch n “Server Behaviors” click chu t vào d u + xu t hi n menu ch n Recordset xu t hi n h p tho i, ti n hành khai báo như hình 29. Hình 29 Page 16of 31
  18. Xây d ng trang web ñ ng v i công c Dreamweaver MX c. Trên trang Display, ñ t con tr t i ví trí mà ta mu n xu t hi n d li u vào menu Insert / Application Objects / Dynamic Table h p tho i Dynamic table xu t hi n, ti n hành ch n các thông s , sau ñó nh n OK. Trang Web s có d ng như sau: Hình 30 d. Thêm và hi u ch nh các tính năng khi hi n th d li u: ð i v i nh c a s n ph m, n u ta không hi u ch nh thì Dreamweaver MX s ñưa ra v trí c a file ta ph i t o m t PlaceHolder ñ ch a nh • Ch n và xoá b bi n hi n th nh {display.Image} • ð t con tr t i ô hi n th nh. • Ch n menu Insert / Image PlaceHolder ñ t tên cho vùng hi n th nh • T panel “Application” ch n tab “Bindings” sau ñó click chu t vào Image kéo và th vào PlaceHolder v a t o. xu t ra thông báo thích h p khi không có d li u: • ð t con tr dư i vùng table gõ vào thông báo “Record Not Found” • Ch n toàn b câu thông báo • T panel “Application” ch n tab “Server Behaviors” sau ñó click chu t vào d u + ñ ñ xu ng menu ch n Show Region / Show Region If Recordset Is Empty. Ch xu t hi n ph n b ng d li u trên khi có d li u trong Database • Ch n toàn b vùng table. • T panel “Application” ch n tab “Server Behaviors” sau ñó click chu t vào d u + ñ ñ xu ng menu ch n Show Region / Show Region If Recordset Is Not Empty. Sau khi thao tác xong chúng ta có c u trúc trang Display.asp như sau: Page 17of 31
  19. Xây d ng trang web ñ ng v i công c Dreamweaver MX Hình 31 5. T o form Hi n th d li u theo danh sách d ng Master-Detail (form Search) - Trang Master dùng ñ li t kê các m u tin và ch a m t liên k t ñ n trang detail. Khi click vào liên k t, trang Detail s m ra ñ th hi n nhi u hơn các chi ti t c a m u tin. - Các bư c th c hi n: T o trang Master T o recordset Hi u ch nh trang Detail (t sinh) Hi u ch nh trang Master a. T o giao di n và lưu trang Master (DisplayMaster.asp) Hình 32 b. T panel “Application” ch n tab “Server Behaviors” click chu t vào d u + ñ ñ xu ng menu ch n Recordset xu t hi n h p tho i, ti n hành khai báo như hình 33. Có th ki m tra k t n i b ng cách nh n vào phím “Test”. Page 18of 31
  20. Xây d ng trang web ñ ng v i công c Dreamweaver MX Hình 33 c. Trên trang Display, ñ t con tr t i v trí mà ta mu n xu t hi n d li u vào menu Insert / Application Objects / Master Detail Page Set h p tho i “Insert Master_Detail Page Set” xu t hi n, ti n hành ch n các thông s như hình 34 sau. Hình 34 Page 19of 31
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

THÔNG TIN
TRỢ GIÚP
HỖ TRỢ KHÁCH HÀNG
Theo dõi chúng tôi

Chịu trách nhiệm nội dung:

Nguyễn Công Hà - Giám đốc Công ty TNHH TÀI LIỆU TRỰC TUYẾN VI NA

LIÊN HỆ

Địa chỉ: P402, 54A Nơ Trang Long, Phường 14, Q.Bình Thạnh, TP.HCM

Hotline: 093 303 0098

Email: support@tailieu.vn

Giấy phép Mạng Xã Hội số: 670/GP-BTTTT cấp ngày 30/11/2015 Copyright © 2022-2032 TaiLieu.VN. All rights reserved.

 

Đồng bộ tài khoản
2=>2