Bài giảng - Giáo án: Bài giảng dreamwearver với cách xây dựng website giành cho người lập trình Web

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 Xây dựng trang web ñộng với công cụ Dreamweaver MX Page of 31 1 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 (Index_Login)  Danh sách dạng bảng  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 <Banner> <Nội dung> Hình 1: trang Index.htm Xây dựng trang web ñộng với công cụ Dreamweaver MX Page of 31 2  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 <Banner> <Nội dung> 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. Xây dựng trang web ñộng với công cụ Dreamweaver MX Page of 31 3 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 Xây dựng trang web ñộng với công cụ Dreamweaver MX Page of 31 4 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. Xây dựng trang web ñộng với công cụ Dreamweaver MX Page of 31 5 II. Tạo Database - Database ñược tạo trong Ms.Access2000 (Data_Project.mdb). - Bảng dữ liệ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. Xây dựng trang web ñộng với công cụ Dreamweaver MX Page of 31 6 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. Xây dựng trang web ñộng với công cụ Dreamweaver MX Page of 31 7 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 Xây dựng trang web ñộng với công cụ Dreamweaver MX Page of 31 8 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. Xây dựng trang web ñộng với công cụ Dreamweaver MX Page of 31 9 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 [...]... 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 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à... 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 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... các b n ph i t tìm tòi và sáng t o cho riêng mình Dreamweaver MX còn có r t nhi u tính năng t o web ñ ng khá m nh, xin dành cho các b n t khám phá ñ trang web c a mình tr nên ‘professtional’ hơn Ho c có th xem và download toàn b trang web này t web site: www12.brinkster.com/ktvaptech Chúc các b n thành công - - Page 30of 31 ... click ñ edit cho chính xác ð tìm hi u sâu hơn v Dreamweaver MX và các tình hu ng x lý ta có th vào menu Help / Tutorials ñ xem chi ti t Có th xem trang web m u t i ñ a ch http://faculty04/fptaptech/myproject (ho c chép toàn b web site t thư m c Server1\share\dungchung\xuangiap\myproject) Trang web này ch là minh h a cho nh ng ý chính c a Dreamweaver MX các b n ph i t tìm tòi và sáng t o cho riêng mình... ng cách nh n vào phím “Test” Page 18of 31 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 Xây d ng trang web ñ ng v i công c Dreamweaver MX -. .. trên list box) Hình 52 ð t tên cho menu là MobileCode, giá tr ñư c l y t Recordset “mcode” (xem ph n T o form c p nh t d ng Master-Detail) Page 26of 31 Xây d ng trang web ñ ng v i công c Dreamweaver MX T o trang hi n th khi chưa có d li u (UpdateDetail.htm) Hình 53 T o trang hi n th chi ti t (UpdateDetail.asp) Trang này ñã ñư c t o trong ph n t o trang Update dang Master-Detail trên (hình 49) Sau khi... Hình 54 9 T o form Delete d ng Master-Detail (tương t như các t o form Update) G m 2 bư c: T o trang search T o trang hi n th k t qu có ch a nút “Xoá” T o trang Search a T o giao di n vào lưu file (Delete.asp) b T o Recordset “mcode” dùng ñ truy xu t tên và code c a Mobile c n delete Page 27of 31 Xây d ng trang web ñ ng v i công c Dreamweaver MX Hình 55 - ð t tên cho menu là MobileCode, giá tr ñư c... directory brousing - Vào “ODBC Microsoft Access Setup” - Ch n Options tăng Page timeout lên 5000 Khi câu SQL truy v n ñ n Vào code view ch nh câu SQL m t trư ng không t n t i ho c là Vùng hi n th giá tr c a T o m t PlaceHolder ch a nh ñ thay trư ng chưa h p lý th cho vùng text do Dreamweaver MX (thư ng là khi ta cho hi n t t o th nh ñ i v i form masdet) View page khi ñang thi t ðóng các chương trình liên quan... có c u trúc trang Display.asp như sau: Page 17of 31 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... u ch nh Tương t cho các trư ng h p hi u ch nh khác Page 11of 31 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 . Delete) c. Bố trí các trang: Trang chủ  Trang Login  Trang chọn nội dung (Index_Login)  Danh sách dạng bảng  Danh sách dạng Master-Detail  Nh ập mới  C ập nhật. 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. (default.htm) (Login.asp) (Index_Login.htm d. Nội dung từng trang  Trang chủ: gồm 3 frame Contents Login <Banner> <Nội dung& gt; Hình 1: trang Index.htm Xây dựng trang