Giáo trình Thiết kế Web - Trường CĐN Cơ Điện

Trong những năm gần đây, cùng với sự phát triển của Công nghệ thông tin, mạng máy tính đang được phát triển rộng rãi, một trong những ứng dụng phổ biến trên mạng máy tính là Internet và các dịch vụ trở nên không thể thiếu trong cuộc sống hiện đạ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 5 chương, mỗi chương đều có phần kiến thức lý thuyết và câu hỏi nghiên cứu cụ thể. Mời các bạn cùng tham khảo.

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 2.7.7 Lưu mã snippet Lµm viƯc víi đoạn mà có sẵn dễ dàng Chúng ta dễ dàng tạo đoạn mà riêng Ví dụ, giả sử muốn tái sử dụng đoạn mà mà đà cập nhật tài liệu mà vừa tạo HÃy l-u snippet định h-ớng nh- snippet 1) Trong panel Snippets chän th- mơc Navigation, sau ®ã chän th- mơc Tab 2) Trong cưa sỉ Document, click vµo ô điều hướng có nội dung Lorem 3) Trong phần lựa chọn thẻ, vị trí phía d-ới bên trái cửa sổ tài liệu, click vào thẻ Trong cửa sổ Document, bảng đà đ-ợc lựa chọn 4) Thực cách sau để l-u phần lựa chọn nh- mà snippet: Click phải chuột ®Ĩ chän b¶ng, sau ®ã chän Create New Snippet ▪ Trong panel Snippets, click vµo nót céng (+) nót cã vị trí phía d-ới panel Một hộp thoại Snippet xuất 5) Trong ô textbox Name, nhập tên để mô tả snippet 6) Trong Description, Nhập mô tả cho snippet 7) Chúng ta xem mô tả snippet panel Snippets để lựa chọn tên snippet cách xác 8) Trong Snippet Type, chọn Insert Block Điều có nghĩa chèn snippet khối mà snippet mà văn đ-ợc áp dụng vào 9) Click OK 10) Trong panel Snippets, m· snippet míi đà đ-ợc thêm vào th- mục Tab 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 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 mÊt rÊt 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 - 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ạng sử dụng nội 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õ ci thËp kû 60 tõ mét thÝ nghiƯm cđa 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 giao thøc TCP/IP (Transmission Control Protocol/Internet Protocol) Bài tập 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 mét b¶n ghi b¶ng MONHOC csdl qlsv Với record lấy Mamh làm tham sè Xãa mét b¶n ghi b¶ng MONHOC cđa csdl qlsv Với record lấy Mamh làm tham số Chương Thiết kế Web động 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 Form Xây dựng trang Master-Detail Page Set Master-Detail Page set ứ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 vµ th-êng cung cÊp thêm chi tiết cụ thể mục đà chän trang chđ Chóng ta cã thĨ 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, sÏ 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 thc vµo kinh nghiƯm cđa chóng ta, vµ sÏ 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 Tạo master-detail page set Mét ®iĨm xt 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 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 sÏ tõng phÇn trang đà hoàn thành 1.2 To mt bn ghi (recordset) sở liệu B©y giê chóng ta sÏ 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 mét recordset Dreamweaver Chóng ta sÏ 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 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 (+) 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ập nhật Nó bao gồm bảng danh sách chi tiết cho ghi trang master 1.4 Hiển thị trang TiÕp theo, chóng ta l-u trang lại, sau mở chúng để thấy ứng dụng phát triển hoạt ®éng nh- thÕ nµo 1) Trong cưa sỉ Document, chän tài liệu locationDetail, chọn File > Save để l-u lại công việc 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 bé tíi server cđa chóng ta 3) Trong cưa sỉ Document, chän tµi liƯu locationMaster, vµ 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 bé 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 qua khãa chÝnh ®Õn server, server xư lý truy vÊn trang detail mở 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 duyệt 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 mét 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, vµ 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 Insert Record server behavior KiÓm tra trang 2.1 Tạo trang Insert Trang web mà 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 tng 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 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 c¸c 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, 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 nµy 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 hiƯn mét c¸c c¸ch sau ®Ĩ chÌn mét 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 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, Char Width nhập 30 9) Trong tài liệu, đặt điểm chèn ô bảng 10) Thêm nút submit cho Form b»ng mét c¸c c¸ch sau: ▪ Trong mục Form Insert, click vào nút Button kéo từ Insert tới ô 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 đà hoàn thành vµ nã sÏ gièng nh- thÕ nµy: 14) L-u tµi liƯu l¹i 2.3 Định nghĩa trường form List/Menu Giờ 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ở d÷ 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 hành vi phục vụ để tạo kịch server cần thiết cho ứng dụng Chúng ta tạo kết nối liệu tr-ờng Form liệu sở liệu để hoµn thµnh Form vµ click vµo nót Submit sÏ 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 (+) 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 xt hiƯn 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 vµ panel Server Behaviors chØ 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 c¸c file phơ thc 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 xt hiƯn chØ 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á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 cđa 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 xt hiƯn, b¶n ghi míi ë phÝa d-íi cïng sở liệu Thc hnh Sử dụng CSDL qlsv 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 míi” nh­ sau: Tài liệu tham kho Nguyễn Hữu Tuấn 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 ... 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 1 Mng mỏy tớnh 1.1 nh ngha Trong trình. .. siêu liên kết phần văn (hay hình ảnh) trang Web, mà kích vào tự động thực thao tác sau đây: - Đa đến phần khác trang - Đa đến trang web khác Web site - Đa đến trang web khác Web site khác - Cho phép... kỳ website dù ? ?-? ??c viết ngôn ngữ cuối ? ?-? ??c xử lý đ-a thẻ định dạng HTML Mục tiêu Sau học xong ch-ơng này, sẽ: Trình bày ? ?-? ??c cấu trúc website đơn giản Biết cách khởi tạo, l-u trữ hiển thị website