Giáo trình Thiết kế Web

Mục lục Mục lục Lời nói đầu Chương Giới thiệu chung Mạng máy tính 1.1 Định nghĩa 1.2 Phân loại Internet 10 Các giao thức Internet 11 3.1 Giao thức điều khiển phiên truyền 11 3.2 Giao thức Internet 12 3.3 Giao thức gam liệu người dùng 12 3.4 Giao thức phân giải địa 13 3.5 Giao thức hệ thống tên miền 13 3.6 Giao thức chuyển thư đơn giản 13 3.7 Giao thức truyền tập tin 13 3.8 HTTP - HyperText Transfer Protocol 14 Địa IP 14 Các khái niệm khác 15 5.1 URL 15 5.2 Hyperlink (siêu liên kết) 16 5.3 Web Browser (trình duyệt web) 17 5.4 Web Server (máy chủ Web) 17 5.5 Web Site 18 5.6 World Wide Web 18 5.7 Phân biệt Inetrnet WWW 18 5.8 Web page 18 Cách thức để tổ chức xây dựng Web Site 19 Phân loại Web 20 7.1 Static pages (Web tĩnh ): 20 7.2 Dynamic Web (Web động) 20 Câu hỏi tập 20 Chương 21 Các thành phần HTML 21 Giới thiệu 22 1.1 HTML gì? 22 1.2 Tags 22 1.3 World Wide Web Consortium (W3C) 22 1.4 HTML làm việc nào? 23 1.5 Tạo trang web 23 Tổng quan HTML 25 2.1 Các thẻ định dạng tài liệu 26 2.3 Các thẻ định dạng danh sách 29 2.4 Các thẻ định dạng ký tự 30 2.5 Các thẻ chèn âm thanh, hình ảnh 37 2.6 Các thẻ định dạng bảng biểu 40 2.7 FORM 42 Thực hành 44 3.1 Tạo trang web cho nhóm 44 3.2 Đăng ký website miễn phí Internet 46 3.3 Thiết kế số website mẫu 48 Chương 52 Thao tác với phần mềm tạo web 52 Giới thiệu IIS- Internet Information Services 53 1.1 IIS gì? 53 1.2 IIS làm gì? 53 1.3 IIS hoạt động nào? 54 1.4 Cài đặt IIS 54 Xây dựng Web Site phần mềm Macromedia Dreamweaver MX 59 2.1 Chuẩn bị cài đặt 60 2.2 Bắt đầu trang 61 2.3 Làm việc với cửa sổ tài liệu 63 2.4 Làm việc với Document 68 2.5 Sử dụng bảng (table) để thiết kế bố cục trang (Page Layout) 70 2.6 Căn chỉnh ảnh đồ hình ảnh 80 2.7 Làm việc với file thiết kế Dreamweaver 87 2.8 Thực hành 94 Chương 95 Những kiến thức VBSCRIPT 95 Khái niệm ngôn ngữ VB Script 96 1.1 Tại học VBScript 96 1.2 Câu hỏi trắc nghiệm 96 Đưa đoạn Script vào trang Web 97 2.1 Cú pháp VBScript 97 2.2 Các vị trí đặt mã VBScript 98 2.3 Xây dựng lập trình 99 2.4 Các câu lệnh điều kiện VBScript 104 2.4 Vòng lặp VBScript 107 Thiết lập thư viện procedure, function cho ứng dụng WEB 120 3.1 Thủ tục VBScript 120 3.2 Hàm VBScript 120 Một số tập ứng dụng mẫu 123 Bài tập cuối chương 127 Chương 128 Liên kết trang Web đến hệ CSDL – xây dựng trang Web động 128 Nhắc lại số khái niệm CSDL 129 1.1 Các khái niệm 129 1.2 SQL - Structure Query Language 130 Sơ lược ASP 136 2.1 Giới thiệu ASP 136 2.2 ASP file gì? 137 2.3 ASP làm việc 137 2.4 Tạo xem file ASP 138 Các lệnh liên kết CSDL ASP 142 3.1 ADO gì? 142 3.2 Cách truy xuất database ADO ASP 142 3.3 Tạo kết nối ADO (ADO Connection) 142 Một số tập ứng dụng mẫu 144 4.1 Hiển thị tên Field giá trị Field 144 4.2 Truy vấn 149 Bài tập cuối chương 152 Chương 153 Thiết kế Web động Macromedia Dreamweaver 153 Xây dựng trang Master-Detail Page Set 154 1.1 Tạo master-detail page set 154 1.2 Tạo ghi (recordset) sở liệu 155 1.4 Hiển thị trang 157 Xây dựng chèn trang Record 158 2.1 Tạo trang Insert 159 2.2 Thêm đối tượng Form 160 2.3 Định nghĩa trường form List/Menu 162 2.4 Định nghĩa InsertRecord server behavior 163 2.5 Test trang 164 Thực hành 165 Tài liệu tham khảo 166 Lời nói đầu Trong năm gần đây, với phát triển Công nghệ thông tin, mạng máy tính đợc phát triĨn réng r·i, mét nh÷ng øng dơng phỉ biÕn mạng máy tính Internet dịch vụ trở nên thiếu sống đại §Ĩ phơc vơ viƯc häc tËp nghiªn cøu cđa sinh viên cao đẳng CNTT, tác giả biên soạn giáo trình Thiết kế Web Giáo trình bao gồm chơng, chơng có phần kiến thức lý thuyết câu hỏi nghiên cứu cụ thể Chơng 1: Giới thiệu chung Giới thiệu khái niệm mạng máy tính, Internet, địa IP, giao thức truyền thông khái niệm khác Chơng 2: Các thành phần HTML Trình bày khái niệm ngôn ngữ đánh dấu siêu văn bản, thành phần cÊu tróc cđa mét tËp tin HTML Giíi thiƯu c¸c vấn đề liên quan đến việc sử dụng cú pháp hiệu ứng ngôn ngữ đánh dấu siêu văn bản, để lập trình Web Ch- ơng 3: Thao tác với phần mềm tạo Web Giới thiệu việc ứng dụng phần mềm Macromedia Dreamweaver MX để thiết kế trang web tĩnh Chơng 4: Những kiến thức VBScript Giới thiệu ngôn ngữ kịch phổ biến VBScript Hớng dẫn bớc tiến hành khai báo, lập trình sử dụng ngôn ngữ kịch HTML Chơng 5: Liên kết trang web đến hệ sở liệu Xây dựng trang web động Giới thiệu lập trình Web động với công nghệ ASP (Active Server Page) Các khái niệm bản, đối tợng ASP, ứng dụng vào lập trình trang Web động cụ thể Giới thiệu ADO (ActiveX Data Object), đối tợng ADO, cách thức kết nối với sở liệu Ch- ơng 6: Thiết kế web động Macromedia Dreamweaver H- ớng dẫn cách xây dựng trang Master Detail Dreamweaver để xây dựng trang web động Giáo trình Thiết kế Web hớng dẫn cách xây dựng ứng dụng Web từ đến nâng cao công nghệ HTML ASP Đợc biên soạn với phơng châm đảm bảo tính logic, khoa häc, thiÕt thùc, dƠ hiĨu nh»m trang bÞ cho sinh viên kiến thức bản, phục vụ cho nghiên cứu, thiết kế, lập trình ứng dụng Web hoàn chỉnh Tài liệu đợc tham khảo từ số tài liệu tác giả nớc, tổng hợp lợc dịch từ số tài liệu chuyên ngành nớc ngoài, nên số thuật ngữ Tin học thay tiếng Việt Để tiện cho việc trình bày ý tởng xuyên suốt tài liệu, tác giả để nguyên thuật ngữ tiếng Anh giải thích thuật ngữ tiếng Việt có cụm từ tơng đơng Trong giáo trình có kèm theo số file phục vụ cho trình học tập, sinh viên cần liên hệ với giáo viên giảng dạy để lấy file phục vụ trình học tập liên hệ với tác giả theo địa hieulv68@yahoo.com Tuy có nhiều cố gắng công tác biên soạn, nhng không tránh khỏi thiếu sót Trong phạm vi hạn hẹp tài liệu này, đề cập đợc tất vấn đề nóng hổi lĩnh vực thiết kế lập trình Web đòi hỏi Rất mong đóng góp phê bình từ bạn đọc, để tài liệu đợc hoàn chỉnh Mäi ý kiÕn gãp ý, xin gưi vỊ Tr−êng cao đằng nghề điện Khoa CNTT Tác giả Chng Gii thiu chung Ch- ơng nhắc lại số khái niệm mạng máy tính Nh- đà biết, website đ- ợc phát triẻn môi tr- ờng mạng cụ thể môi tr- ờng internet NÕu øng dơng website cđa chóng ta kh«ng cã m«i tr- ờng mạng ứng dụng web không khác phần mềm desktop Mục tiêu Sau học xong ch- ơng này, sẽ: Phân loại đ- ợc giao thức sử dụng mạng máy tính Phân loại đ- ợc loại đỉa IP Phân tích đ- ợc b- ớc trình phát triển website Phân biệt đ- ợc khái niệm URL, Hyperlink, Web Server Phân biệt đ- ợc loại website Mng mỏy tớnh 1.1 nh ngha Trong trình khai thác, sử dụng máy tính cá nhân (Personal Computer-PC), việc trao đổi, sử dụng thông tin xà hội phát triển có nhu cầu to lớn Khi máy vi tính cha có liên kết với nhau, việc trao đổi thông tin nhiều thời gian để chép, gây nhiều phiền phức Để giải vấn đề với đà phát triển công nghiệp máy tính, thiết bị đặc biệt mạng máy tính đời tất yếu Vì vậy, mạng (network) tập hợp hệ thống máy tính thiết bị mạng, chia sẻ liệu, chơng trình, tài nguyên thông qua đờng truyền kết nối truyền thông dùng chung, sở hệ điều hành mạng Hình 1.1: Mạng máy tính điển hình Đờng truyền hệ thống thiết bị truyền dẫn vật lý để chuyển tải tín hiệu sóng điện từ Đờng truyền vật lý phân làm loại: - Hữu tuyến: cáp đồng trục, cáp đôi dây xoắn, cáp quang, cáp điện thoại, công nghệ cáp điện thông thờng - Vô tuyến: sóng cực ngắn (viba), tia hồng ngoại 1.2 Phõn loi Hiện nay, thông thờng mạng máy tính đợc phân loại nh sau: a Mạng cơc bé - LAN (Local Area Network) C¸c m¸y tÝnh cá nhân máy tính khác phạm vi khu vực hạn chế đợc nối với dây cáp chất lợng tốt, cho ngời sử dụng trao đổi thông tin, dùng chung thiết bị ngoại vi, sử dụng chơng trình nh liệu đà đợc lu trữ máy tính dành riêng gọi máy dịch vơ tƯp b M¹ng diƯn réng - WAN (Wide Area Network) Các mạng lớn hơn, gọi mạng diện rộng (Wide Area Network), dùng đờng dây điện thoại phơng tiện liên lạc khác để liên kết lạc khác để liên kết máy tính với phạm vi từ vài chục đến vài ngàn dặm Sự khác LAN WAN: khác nhiều quy mô mức độ phức tạp, mạng cục liên kết vài ba máy tính cá nhân thiết bị ngoại vi dùng chung đắt tiền, nh máy in laser chẳng hạn Các hệ thống phức tạp có máy tính trung tâm (máy dịch vụ tệp) cho phép ngời dùng tiến hành thông tin với thông qua th điện tử để phân phối chơng trình nhiều ngời sử dụng, để thâm nhập vào sở liệu dùng chung c Mạng đô thị - MAN (Metropolitan Area Network) Là mạng trải dài không gian địa lý lớn LAN nhng nhỏ WAN MAN thờng đợc sử dụng nh mạng thành phố, khu công nghiệp d Mạng Intranet Là mét m¹ng sư dơng néi bé nh− LAN hay WAN thực đợc ứng dụng, nói cách khác dịch vụ INTERNET, chủ yếu dịch vụ WEB với giao thức truyền tệp siêu văn -HTTP e Mạng Internet Một hệ thống gồm mạng máy tính đợc liên kết với phạm vi toàn giới, tạo điều kiện thuận lợi cho dịch vụ truyền thông liệu, nh đăng nhập từ xa, truyền tệp tin, th tín điện tử, nhóm thông tin Internet phơng pháp ghép nối mạng máy tính hành, phát triển cách rộng rÃi tầm hoạt động hệ thống thành viên Internet Mạng Internet ngày mạng toàn cầu, bao gồm hàng chục triệu ngời sử dụng, đợc hình thành từ cuối thập kỷ 60 từ thí nghiệm Bộ quốc phòng Mỹ Tại thời điểm ban đầu mạng ARPAnet Ban quản lý dự án nghiên cứu Quốc phòng ARPAnet mạng thử nghiệm phục vụ nghiên cứu quốc phòng, mục đích xây dựng mạng máy tính có khả chịu đựng cố (ví dụ số nút mạng bị công phá huỷ mạng tiếp tục hoạt động) Mạng cho phép máy tính mạng liên lạc với máy tính khác Khả kết nối hệ thống máy tính khác đà hấp dẫn ngời, phơng pháp thực tế để kết nối máy tính hÃng khác Mạng Internet nguyên thuỷ đợc thiÕt kÕ nh»m mơc ®Ých phơc vơ viƯc cung cÊp thông tin cho giới khoa học, nên công nghệ cho phép hệ thống liên kết với thông qua cổng điện tử Theo cách đó, có hàng ngàn hệ máy tính hợp tác, nh nhiều hệ thống dịch vụ th điện tử có thu phí, nh MCI Compuserve chẳng hạn, đà trở nên thành viên Internet Với hai triệu máy chủ phục vụ chừng 20 triệu ngời dùng, mạng Internet phát triển với tốc độ bùng nổ, tháng có thêm khoảng triệu ngời tham gia Ngày Internet cho phép hàng trăm triệu ngời khắp giới liên lạc trao đổi thông tin với thông qua tập giao thức gọi chung lµ bé giao thøc TCP/IP (Transmission Control Protocol/Internet Protocol) Bi cui chng Hiển thị thông tin bảng DIEM, LOP, MONHOC, THOIKHOABIEU csdl qlsv Sắp xếp bảng DIEM csdl qlsv theo thứ tự tăng dần điểm Cập nhật ghi bảng MONHOC csdl qlsv Với record lấy Mamh làm tham số Xóa ghi bảng MONHOC csdl qlsv Với record lấy Mamh lµm tham sè Chương Thiết kế Web động bng Macromedia Dreamweaver Trong ch- ơng đà đ- ợc tìm hiểu ASP, đà thiết kế đ- ợc trang web động Ch- ơng giúp tạo đ- ợc trang web động đơn giản nhanh nhờ vào chức trực quan Dreamweaver Mục tiêu Vận dụng đ- ợc chức Master – Detail Page Set ®Ĩ thiÕt kÕ mét trang web động Tạo đ- ợc kết nối CSDL Dreamweaver Tạo đ- ợc trang Insert, đối t- îng cña Form Xây dựng trang Master-Detail Page Set Master-Detail Page set lµ mét øng dơng web cã trình bày thông tin đ- ợc trích xuất từ sở liệu hai định dạng Trang chủ (master)sẽ hiển thị danh sách tất ghi truy xuất nh- kết tìm kiếm sở liệu Một trang chi tiết (Detail) liên kết từ trang chủ trang web th- ờng cung cấp thêm chi tiết cụ thể vỊ mét mơc ®· chän trang chđ Chóng ta hoàn tất phần h- ớng dẫn mô hình máy chủ sau ColdFusion, ASP, JSP Trong phần h- ớng dẫn này, xây dựng mét master and detail page set Nh÷ng h- íng dÉn khoảng 20 phút để hoàn thành, tùy thuộc vào kinh nghiệm chúng ta, dạy cho cách làm nhiệm vụ sau: Tạo master-detail page set trang 144 Tạo database recordset trang 145 Chèn đối t- ơng ứng dụng vào Master-Detail Page Set trang 148 Hiển thị trang trang 150 1.1 To mt master-detail page set Một điểm xuất phát tốt để phát triển ứng dụng sở liệu để hiển thị danh sách ghi đ- ợc l- u trữ sở liƯu Trang master-detail page set chóng ta ph¸t triĨn sÏ liệt kê vị trí cho thuê ô tô công ty,cũng nhthông tin chi tiết vị trí, nh- số điện thoại địa Tất thông tin địa điểm toàn cầu đ- ợc l- u giữ tập tin sở liệu Microsoft Access global.mdb Chúng ta nên chắn có kết nối vào sở liệu ứng dụng trang web không đ- ợc cập nhật mà kết nối vào sở liệu HÃy bắt đầu việc lựa chọn trang để làm việc 1) Thực cách sau để mở panel Site: Trong nhóm panel Files, click vào mũi tên mở rộng, sau ®ã chän tab Site nÕu nã ch- a ®- îc më ▪ Chän Window -> Site ▪ Ên F8 Panel Site đ- ợc mở 2) Trong trình đơn pop-up Site, lựa chọn site GlobalCar mà đà định nghĩa 3) Trong panel Site, click đúp vào file locationMaster để mở Tài liệu mở cửa sổ Document Chúng ta phần trang đà hoàn thµnh 1.2 Tạo ghi (recordset) sở liu Bây tạo recordset để hiển thị liệu đà đ- ợc l- u trữ sở liệu Một recordset nhóm thông tin trích xuất từ sở liệu việc truy vấn sở liệu (Trong ASP.NET, recordset đ- ợc biết đến nh- DataSet.) Một truy vấn sở liệu bao gồm tiêu chí tìm kiếm, xác định đ- ợc bao gồm recordset Chúng ta hÃy sử dụng thông tin đ- ợc trích xuất nh- nguồn liệu cho trang web ®«ng cđa chóng ta Dreamweaver MX cung cÊp mét giao diện đơn giản - dễ sử dụng để tạo truy vấn SQL không cần phải biết SQL để tạo recordset Dreamweaver Chúng ta tạo recordset để lựa chọn tất giá trị từ bảng Location 1) Trong Dreamweaver, mở hộp thoại Recordset DataSet (ASP.NET) cách thực mét c¸c b- íc sau: ▪ Trong Insert chọn Tab Application, click vào nút Recordset DataSet (ASP.NET) ▪ Chän Window -> Bindings ®Ĩ më panel Binding, sau dó click vào nút (+) lựa chọn Recordset DataSet ▪ Trong nhãm panel Application, chän panel Binding, sau ®ã click vµo nót céng (+) vµ lùa chän Recordset DataSet Hộp thoại Recordset DataSet xuất Những hình d- ới cho thấy hộp thoại recordset ColdFusion (Trong ASP.NET hộp thoại DataSet, hầu hết tùy chọn recordset có mô hình cho tất loại máy chủ.) 2) Trong ô textbox Name, nhập rsLocations Đây tên recordset mà định nghĩa 3) Trong trình đơn pop-up Data Source (ColdFusion) trình đơn pop-up Connection (Các loại trang phục vụ khác), lựa chọn connGlobal Hộp thoại Recordset DataSet cập nhật hiển thị thông tin cho bảng sở liệu Global Chú ý: Nếu kết nôi connGlobal không xuát trình đơn, click vào nút Define để tạo Chọn REGION_ID, sau click vào nút trừ (-) 1) Click OK Dreamweaver cập nhật trang master detail, thêm vào tất kịch mà phía máy chủ cần truy vấn trang danh sách trang detail Trang master đ- ợc cập nhật Nó bao gồm bảng cho sở liệu, bảng cho định h- ớng trang recordset, ghi thiÕt lËp ®Õm Trang detail cịng cËp nhËt Nã bao gồm bảng danh sách chi tiết cho ghi trang master 1.4 Hin th cỏc trang TiÕp theo, chóng ta sÏ l- u c¸c trang lại, sau mở chúng để thấy ứng dụng phát triển hoạt động nh- 1) Trong cưa sỉ Document, chän tµi liƯu locationDetail, vµ chọn File > Save để l- u lại công việc cđa chóng ta 2) Trong panel Site, chän tµi liƯu locationDetail, sau click vào nút Put Files (mũi tên quay lên màu xanh) để copy file cục tới server cđa chóng ta 3) Trong cưa sỉ Document, chän tài liệu locationMaster, chọn File > Save để l- u lại 4) Trong panel Site, chọn tài liệu locationMaster, sau click vào nút Put Files (mũi tên quay lên màu xanh) để copy file cục tới server cđa chóng ta 5) Víi tµi liƯu locationMaster đ- ợc lựa chọn, ấn F12 để xem trang trình duyệt Kiểm tra liên kết từ trang Master tới trang Detail 6) Phía d- ới bảng liệu, click Next để thiết lập 10 ghi Bảng liệu, định h- ớng đếm ghi đ- ợc cập nhật 7) Click số tên vị trí để thấy trang detail Trang master ®i qua khãa chÝnh ®Õn server, server xư lý truy vÊn vµ trang detail më vµ hiĨn thi liệu cho vị trí đ- ợc lựa chọn 8) ấn nút Locations vị trí phía trang để quay lại danh sách locations 9) Đóng cửa sổ trình dut chóng ta xem xong trang web 10) Trong Dreamweaver, đóng trang web lại Xõy dng v chốn trang Record Phần h- ớng dẫn qua b- ớc xây dựng Form để chèn thông tin vào sở liệu Chúng ta tìm hiểu làm để chèn định nghĩa tr- ờng Form Chúng ta tìm hiểu cách để tạo tr- ờng form cho phép ng- ời sử dụng chèn thêm thông tin tự động đ- ợc tạo cách sử dụng trình đơn Chúng ta hoàn thành phần h- ớng dẫn tất mô hình server đ- ợc hỗ trợ Dreamweaver MX - Cold F usion, ASP, AS P NE T, JSP, PHP Trong phần hoàn thành nhiệm vụ sau: Tạo trang Insert Thêm đối t- ợng vaog Form Định nghĩa mét Insert Record server behavior KiÓm tra trang 2.1 Tạo trang Insert Trang web mµ chóng ta sÏ tạo trang web cho phép quản trị viên chèn xe cho thuê địa điểm thông tin sở liệu Global Car Rental Chúng ta bắt đầu phần hoàn thành trang web Dọc theo đ- ờng thêm hình thức đối t- ợng động nội dung cho trang web HÃy bắt đầu việc lựa chọn trang web để làm việc: 2) Thực cách sau để mở panel Site Trong nhóm panel Files, click vào mũi tên mở rộng, sau lựa chọn tab Site ch- a đ- ợc lùa chän ▪ Chän Window -> Site ▪ Ên F8 Panel Site đ- ợc mở 3) Trong trình đơn pop-up, lựa chọn site Global Car mà đà định nghĩa 4) Trong panel Site, click đúp chuột vào tài liệu insertLocation để mở Tài liệu đ- ợc mở cưa sỉ Document 2.2 Thêm đối tượng Form Một bảng số tr- ờng Form đà đ- ợc thêm vào trang Một màu đỏ hình chữ nhật xuất tài liệu, ranh giới Form Dreamweaver tự động chèn mét ranh giíi Form mét tµi liƯu chóng ta chèn thêm đối t- ợng Form Bây thêm vào tr- ờng lại cđa Form : Mét tr- êng list/menu, mét nót submit, vµ mét nót reset Chóng ta cịng sÏ cung cÊp nhÃn cho tr- ờng Form Việc tạo tên tr- ờnglà đơn giản để nhận dạng tr- ờng mà làm việc sau kết nối Form Fields tới tr- ờng sở liệu Chúng ta bắt đầu cách xem form fields có sẵn 1) Mở phần giám sát Property (Window > Properties),nếu ch- a đ- ợc mở 2) Di chuyển trỏ tới ô bên phải, click vào tr- ờng Form để lựa chọn Phần giám sát Property cËp nhËt c¸c thc tÝnh tr- êng cđa Form Tr- ờng Name bao gồm tên đối t- ợng Form, vµ tr- êng Char Width thiÕt lËp chiỊu réng cđa tr- êng ®Õn 30 ký tù Chóng ta sÏ cập nhật hai tr- ờng tr- ờng text đà thêm vào Form 3) Trong tài liệu, đặt điểm chèn ô phía phải nhÃn State Country , sau thực cách sau để chèn text field: Trong Inssert, click vào tab Forms, sau click vào nút Text Field kéo từ Insert tới ô bảng Chọn Insert > Form Objects > Text Field Đối t- ợng text field Form đà đ- ợc chèn tài liệu 4) Text field đ- ợc lựa chọn, phần giám sát Property, nhập state_contrry ô TextField nhập 30 ô Char Width 5) Trong tài liệu, đặt điểm cần chèn ô phía phải nhÃn Region, sau làm cách sau để chèn List/Menu: ▪ Trong mơc Form cđa Insert, click vµo nút List/Menu kéo từ Insert tới ô cđa b¶ng ▪ Chän Insert > Form Objects > Text Field Đối t- ợng Form List/Menu đ- ợc chèn vào tài liệu 6) Trong bảng giám sát Property, nhập region_id « List/Menu 7) ChÌn mét Text Field cho Telephone, sau mục TextField phần giám sát Property ®iỊn lµ telephone, vµ tr- êng Char Width nhËp 30 8) ChÌn mét Text Field cho Fax, sau ®ã mục TextField bảng giám sát Property điền fax, vµ Char Width nhËp 30 9) Trong tµi liệu, đặt điểm chèn ô bảng 10) Thêm mét nót submit cho Form b»ng mét c¸c c¸ch sau: ▪ Trong mơc Form cđa Insert, click vµo nút Button kéo từ Insert tới ô cđa b¶ng ▪ Chän Insert > Form Objects > Button Một nút Submit đ- ợc chèn vào tài liệu Trong phần giám sát Property, Submit nhÃn Action để thiết lập tới Form Submit 11) Lặp b- ớc 10 để thêm nút khác cho Form Chúng ta thêm nút resest để ng- ời dùng xác lập lại Form họ cần 12) Trong phần giám sát Property, phần Action chọn Reset form 13) Trong « textbox Button Name, nhËp Reset Form cđa chóng ta đà hoàn thành giống nh- này: 14) L- u tài liệu lại 2.3 Định nghĩa trường form List/Menu Giê chóng ta cập nhật thêm thông tin cho tr- ờng list/menu mà ng- ời sử dụng lựa chọn phần region Và cập nhật sở liệu với giá trị số Bằng cách ng- ời sử dụng không cần phải kiểm tra xác minh số phù hợp với tên 1) Trong tài liệu, click vào tr- ờng Region_Id list/menu để lựa chọn Phần giám sát Poperty cập nhật thông tin đối t- ợng 2) Trong phần giám sát Property, click vào nút List Values Hộp thoại List/Menu xuất 3) Trong hộp thoại List Values, thêm Item Labels Values để phù hợp với liệu bảng sở liệu REGIONS 4) Trong Item Label, nhập North America, Ên Tab vµ Value nhËp 5) Click vào nút cộng (+) để thêm mục nhập khác, sau nhập South/Central America, ấnTab, sau nhập 6) Lặp b- ớc b- ớc nhập tất vùng nh- bảng hộp thoại sau 7) Click OK để ®ãng hép tho¹i 2.4 Định nghĩa InsertRecord server behavior Chóng ta sÏ sư dơng mét hµnh vi phơc vơ để tạo kịch server cần thiết cho øng dơng Chóng ta sÏ t¹o mét kÕt nèi liệu tr- ờng Form liệu sở liệu để hoàn thành Form click vào nút Submit chèn thông tin vào sở liệu 1) Trong panel Server Behaviors (Window > Server Behaviors), click vµo nót céng (+) vµ chän Insert Record từ trình đơn pop-up Bảng hộp thoại Insert Record xuất 2) Trong Data Source (ColdFusion) trình đơn pop-up Connection (các mô hình server khác), chọn connGlobal 3) Trong trình đơn pop-up Insert Into Table, chọn LOCATIONS Danh sách Columns cập nhật thông tin tr- ờng Form liên quan đến tr- ờng sở liệu nh- 4) HÃy chắn giá trị REGION_ID đ- ợc thiết lập Number Integer (ASP.NET), Region ID giá trị số giá trị text 5) Trong After Inserting, Go To hc On Success, Go To (ASP.NET), click Browse bảng hộp thoại xuất lùa chän file LocationOK, sau ®ã click OK ®Ĩ ®ãng bảng hộp thoại 6) Click OK để đóng bảng hộp thoại Insert Record Trong cửa sổ Document, form updates panel Server Behaviors hành vi Insert Record đà đ- ợc thêm vào 7) L- u tài liệu lại 2.5 Test trang TiÕp theo, chóng ta sÏ hoµn thµnh trang vào server, sau mở trình duyệt chèn thêm số thông tin 1) Trong panel Site, lựa chọn insertLocation, sau click vào nút Put Files (mũi tên quay lên màu xanh) để copy file cục tới server Chọn Yes đ- ợc hỏi để copy file phụ thuộc 2) Sau lùa chän InsertLocation, cưa sỉ Document, chän File > Preview in Browser ấn F12 (Windows) để xem tài liƯu 3) NhËp test data form, sau ®ã click vào nút Submit Trang locationOK xuất thông tin đà đ- ợc chèn thành công sở liệu Global 4) Để xem mục mà đà thêm vào sở liệu làm theo c¸c c¸ch sau: Trong nhãm panel Application, lùa chän panel Databases Xác định vị trí sở liệu connGlobal, sau bấm vào dấu cộng (+) phía tr- ớc nó, để mở rộng Nhấp vào cộng (+) phía tr- ớc Tables để xem sở liệu bảng Right-click (Windows) vào bảng LOCATIONS sau chọn View Data Các ghi Cơ sở liệu xuất hiện, ghi phía d- ới sở liệu Thực hành Sư dơng CSDL qlsv vµ Dreamweaver thực yêu cầu sau: Thiết kế Form dăng nhập để đăng nhập vào hệ thống giống hình sau: Tạo trang master có liên kết đến trang detail giống hình sau: Hiển thị chức trang detail ta click vào liên kết nào, chẳng hạn ta click vào liên kết Thêm sinh viên chương trình cho ta trang Thêm sinh viên nh­ sau: Tài liệu tham khảo Ngun H÷u Tn – Giáo trình thiết kế Web Hồ Thuần, Hồ Cẩm Hà - Các hệ sở liệu lý thuyết thùc hµnh Trainingtool.com – Learning VBScript Matt Childs, Paul Lomax, Ron Petrusha - VBScript in a Nutshell, 2nd Edition Macromedia Dreamweaver MX tutorials W3schools.com ... xây dựng website 3.3 Thiết kế số website mẫu Thiết kế website theo mẫu sau (http://greetings.yahoo.com) Thiết kế website theo mẫu sau (http://www.flowers.com) Thiết kế website theo mẫu sau (http://shopping.yahoo.com)... (http://shopping.yahoo.com) Thiết kế website theo mẫu sau (http://www.is-edu.hcmuns.edu.vn) Thiết kế website theo mẫu sau (http://vnexpress.net) Thiết kế website theo mẫu sau (http://www.codeproject.com) Thiết kế website... Hyperlink (siªu liªn kÕt) 5.3 Web Browser (trình duyệt web) Web Browser công cụ hay chơng trình cho phép truy xuất xem thông tin Web Có nhiều Web Browser để truy xuất Web, trình duyệt có đặc điểm khác