Tạo ứng dụng Web ASP có kết nối cơ sở dữ liệu bằng Dreamweaver MX

DUY THÔNG

Hiện nay, đa số các Website đều có kết nối đến cơ sở dữ liệu (CSDL, database) dựa trên các ngôn ngữ phía chủ (server side) như ASP, PHP, JSP... Điều này làm tăng khả năng tương tác giữa trang Web với người dùng, đồng thời cho phép Webmaster (người quản trị trang Web) cập nhật thông tin một cách dễ dàng. Tuy nhiên, để thiết kế những Website như thế đòi hỏi bạn phải có những kiến thức nhất định về lập trình Web và CSDL. May mắn thay, với Dreamweaver MX (DW MX), những người thiết kế Web nghiệp dư chỉ biết HTML thuần túy vẫn có thể tự tạo cho mình những Website tương tác dễ dàng thông qua các thao tác trực quan và dễ hiểu.

Bài này sẽ hướng dẫn bạn từng bước tạo một Website ASP đơn giản có tích hợp CSDL bằng DW MX. Qua đó bạn có thể áp dụng vào Website của mình để nó ngày càng chuyên nghiệp hơn.

Chuẩn bị trước khi thiết kế

Bạn phải “sắm sửa” các thứ như sau:

- Một ứng dụng Web Server (trình chủ Web) để thử nghiệm trang Web như PWS (Personel Web Server) hay IIS (Internet Information Server).

- Hệ CSDL như MS Access, SQL Server, Oracle...Ở đây, ta sẽ chọn hệ CSDL MS Access cho đơn giản.

- Hệ CSDL như MS Access, SQL Server, Oracle...Ở đây, ta sẽ chọn hệ CSDL MS Access cho đơn giản.

- Cuối cùng, dĩ nhiên là DW MX.

Cấu hình hệ thống thành máy chủ

Web Trước hết, bạn cần cấu hình máy của mình thành máy chủ Web (Web server). Việc này khá đơn giản, bạn kiểm tra xem máy của mình đã cài đặt trình chủ Web hay chưa bằng cách xem trong ổ C có thư mục Inetpub không. Nếu không thấy, bạn phải cài đặt trình chủ Web tùy theo hệ điều hành (HĐH) mà mình đang dùng. Nếu giới hạn ở các HĐH Windows, ta có hai trường hợp đáng chú ý:

- HĐH cho máy chủ (Win 2K, NT Server, XP Pro): Khi cài đặt Windows, IIS sẽ được cài đặt sẵn theo mặc định như là một thành phần (component) của Windows. Nếu chưa có, bạn hãy vào Add/Remove Windows Components trong Control Panel để cài đặt thêm IIS.

- HĐH cho máy trạm (Win 98, Win NT Workstation) : Bạn có thể cài đặt PWS từ đĩa Win 98. Bạn cũng có thể tải xuống PWS từ Website của Microsoft. (Xin tham khảo thêm trong cuốn “PHP và Web tiếng Việt, dễ ợt!” do e-CHÍP ấn hành).

Trình chủ Web sẽ chuyển một thư mục trên ổ cứng của bạn thành thư mục gốc của Website, theo mặc định là thư mục C:\Inetpub\wwwroot\. Sau khi có những thứ cần thiết, bạn nên sao chép thư mục GettingStarted có sẵn trong DW MX (thư mục này nằm trong\Macromedia\DreamweaverMX\Samples\) vào thư mục làm việc của mình, chẳng hạn C:\MyWebsite.

Tạo Dreamweaver Site

Sau khi khởi động DW MX, bạn cần xác lập Dreamweaver Site, tương tự như tạo Project trong Visual Basic. Việc này giúp bạn tiết kiệm thời gian và công sức trong quá trình thiết kế. Bạn vào Site\New Site để mở cửa sổ Site Definition và chọn thẻ Advanced.

XÁC LẬP LOCAL INFO

- Site Name - Tên Site: Tương tự như Project Name trong VB6, chỉ có ý nghĩa định danh đối với người thiết kế. Bạn có thể đặt bất cứ tên gì mình thích.

- Local Root Folder – Thư mục gốc cục bộ: Đây là đường dẫn (path) của thư mục dùng để lưu trữ các trang Web của bạn trên ổ cứng. Vì ta sẽ thiết kế bằng ngôn ngữ ASP, bạn hãy chọn đường dẫn C:\MyWebsite\GettingStarted\Develop\asp\ bằng cách nhấp vào biểu tượng thư mục kế bên.

- Refresh Local File List Automatically – Làm tươi danh sách tập tin cục bộ một cách tự động: Đánh dấu vào hộp kiểm ở mục này để DW MX tự động cập nhật danh sách các tập tin khi ta thực hiện các thao tác chỉnh sửa bên ngoài DW MX.

- Default Images Folder – Thư mục chứa hình ảnh mặc định: Đây là đường dẫn của thư mục chứa các tập tin hình ảnh mà ta sẽ chèn (insert) vào trang Web. Sau này, nếu bạn chèn một hình ảnh nào đó vào trang Web thì DW MX sẽ tự động sao chép hình ảnh đó vào thư mục này. Bạn hãy chọn đường dẫn C:\MyWebsite\GettingStarted\Develop \asp\Assets\images\.

XÁC LẬP REMOTE INFO

- Access – Truy nhập: Chọn phương thức truy nhập để DW MX truy nhập đến thư mục chứa Website của bạn trên máy chủ Web. Ở đây ta sẽ chọn Local/Network vì máy chủ Web chính là máy của bạn.

- Remote Folder – Thư mục xa: Đây là đường dẫn của thư mục trên máy chủ Web mà ta sẽ tải Website của mình lên. Đường dẫn mặc định của thư mục này là C:\Inetpub\wwwroot\..

- Refresh Remote File List Automatically – Làm tươi danh sách tập tin từ xa một cách tự động: Chức năng này tương tự như Refresh Local File List Automatically nhưng thực hiện trên Remote Folder.

- Automatically upload files to server on save - Tự động tải tập tin lên máy chủ khi lưu: Khi bạn lưu trang Web, DW MX sẽ tự động đưa tập tin ấy vào Remote Folder.

XÁC LẬP TESTING SERVER

- Server Model - Loại trình chủ: Xác định loại ngôn ngữ (công nghệ) phía chủ mà DW MX tự động triển khai khi thiết kế. Bạn sẽ thực hiện phần lớn công việc thông qua các thao tác trực quan, còn DW MX sẽ viết mã (operate code) hộ bạn. Ở đây ta sẽ chọn ngôn ngữ phía chủ là ASP và ký mã (script) là VBScript.

Ở phần này, bạn nên chú ý mục URL Prefix - Tiền tố URL. Theo mặc định đó là http://localhost/mywebsite/. Khi xem thử Website của mình bằng trình duyệt, bạn phải nhập đường dẫn nêu trên vào ô địa chỉ của trình duyệt. Xác lập xong, bạn nhấn OK để hoàn tất.

Kết nối trang Web với cơ sở dữ liệu

Ta hãy thử dùng một CSDL mẫu của DW MX mang tên GlobalCar (CSDL về các dịch vụ cho thuê ô-tô). Sau này, để kết nối với CSDL khác, bạn nhấn nút Define và chọn CSDL cần thiết.

Cụ thể, bạn nhấn vào tiêu đề cửa sổ Application để mở rộng cửa sổ ấy rồi thực hiện các bước sau:

Nhấn vào nút cộng (+), chọn Data Source Name (DSN) từ trình đơn để mở cửa sổ Data Source Name (DSN).

Nhập Connection Name là myConn.

Chọn CSDL GlobalCar trong danh sách Data Source Name (DSN).

Chọn Using Local DSN ở mục Dreamweaver Should Connect.

Nhấn nút OK để hoàn tất.

Kể từ đây, bạn có thể lấy dữ liệu từ CSDL GlobalCar để đưa vào trang Web của mình. Để làm quen, ta thử dùng một trang ASP có sẵn, ràng buộc nó với CSDL GlobalCar. Bạn thực hiện các bước như sau:

Bấm kép vào tập tin locationMaster.asp trong cửa sổ Files để mở tập tin này. Giao diện của trang ASP này đã được thiết kế sẵn, ta chỉ việc hiển thị các dòng dữ liệu của CSDL GlobalCar mà thôi.

Chọn thẻ Binding trong cửa sổ Application. Sau đó nhấn vào nút cộng (+) và chọn Recordset (Query) để mở cửa sổ Recordset. Hiểu nôm na thì record set là tập hợp các cột trong bảng nào đó của CSDL. Tập hợp các cột này có thể trích từ nhiều bảng (Table hoặc Query/View) khác nhau.

Đặt tên (Name) cho Recordset là rsLocation.

Chọn myConn ở mục Connection.

Chọn thử bảng Locations ở mục Table.

Ở mục Columns, ta để chế độ hiển thị mặc định là All để hiển thị tất cả các cột trong bảng Locations. Tuy nhiên, bạn cũng có thể hiển thị các cột có chọn lọc bằng cách chuyển sang chế độ Selected và chọn những cột mà mình muốn (ấn giữ phím Shift hoặc Ctrl khi nhấn).

Nhấn OK để hoàn tất.

Nhấn vào dấu + phía trước Recordset(rsLocations) để “xổ” các nhánh con của nó. Mỗi nhánh chính là một cột trong bảng Locations.

Tạo bảng để chứa dữ liệu trên trang Web bằng cách chọn Insert\Table trên thanh trình đơn, nhập Row: 1, Columns: 1 rồi nhấn OK.

Kéo và thả nhánh CODE từ thẻ Bindings vào bảng mà bạn vừa tạo ra để hiển thị dữ liệu của cột CODE trong bảng đó.

Tùy biến cách hiển thị dữ liệu

Đến đây, ta chỉ hiển thị được dòng đầu tiên trong cột CODE. Nếu muốn hiển thị toàn bộ cột CODE, bạn phải dùng vòng lặp hiển thị từng dòng trong cột. Bạn làm như sau:

Nhấn vào thẻ <table> (nơi có các thẻ <body> <table> <tr> <td>) trong thanh trạng thái dưới cửa sổ thiết kế rồi chọn Insert\Application Objects\Repeated Region trên thanh trình đơn để mở cửa sổ Repeat Region.

Theo mặc định, Repeat Region hiển thị mỗi lần 10 dòng (Show 10 Records at a Time). Nếu bạn muốn hiển thị toàn bộ cột thì chọn Show All Records.

Nhấn OK để hoàn tất.

Tiếp theo, bạn cần thêm vào một thanh điều hướng dữ liệu (Navigation Bar) để hiển thị các dòng kế tiếp trong cột. Bạn di chuyển con trỏ xuống vị trí phía dưới bảng rồi chọn Insert\Application Objects\Recordset Navigation Bar trên thanh trình đơn để mở cửa sổ Recordset Navigation Bar. Bạn có thể giữ nguyên lựa chọn mặc định, nhấn luôn OK để chèn ngay thanh điều hướng vào trang. Bạn có thể chuyển các chuỗi “First”, “Previous”, “Next”, “Last” sang tiếng Việt, thành “Đầu - Trước - Sau - Cuối”.

Thế là xong! Ta đã có một trang Web có khả năng hiển thị thông tin một cách linh hoạt từ CSDL đã chọn. Bạn hãy nhấn F12 để xem nó chạy như thế nào trên trình duyệt. Bạn thấy đó, nhờ thanh điều hướng dữ liệu, người dùng có thể duyệt qua dữ liệu trong cột CODE của CSDL GlobalCar.