Thiết kế website động với Adobe Dreamweaver CS3 (Phan I)

Nội dung trang web trong một website động bao gồm những phần cố định và những phần có thể thay đổi theo yêu cầu của người xem hay theo yêu cầu cập nhật. Vì vậy, hầu hết các website cần có sự cập nhật thường xuyên đều ở dạng động để tiết kiệm công sức thiết kế và điều hành. Đối với website tĩnh, phần mềm thiết kế phổ biến là FrontPage, nhưng để thiết kế website động, người ta thường dùng Dreamweaver của hãng Adobe. Kể từ số này, LBVMVT sẽ khởi đăng loạt bài nhiều kỳ, hướng dẫn từng bước cách thiết kế một website động chuyên về bán hàng trực tuyến bằng Dreamweaver CS3. Kỳ này nói về tạo web server, templates và database.

Adobe Dreamweaver CS3 là một chương trình hỗ trợ thiết kế website được sử dụng rất phổ biến vì với những công cụ mạnh mẽ, được bố trí hợp lý trong một giao diện thân thiện, nó rất thích hợp cho mọi đối tượng, từ những nhà thiết kế website chuyên nghiệp cho đến những ai mới vào nghề. Với Adobe Dreamweaver CS3, bạn sẽ dễ dàng nhận biết được rằng mình nên bắt đầu thiết kế một website ra sao bằng cách sử dụng các template sẵn có của nó hoặc tải về từ Internet rồi từ đó hiệu chỉnh lại cho phù hợp với nhu cầu. Bên cạnh đó, với khả năng can thiệp trực tiếp vào database (cơ sở dữ liệu), Adobe Dreamweaver CS3 sẽ là một trợ thủ đắc lực cho bạn trong việc thiết kế các website động với các ngôn ngữ lập trình mạnh mẽ và phổ biến như: PHP, ASP/ASP.NET, ColdFusion v.v... mà không cần biết nhiều về lập trình web.

Trong phần đầu của của loạt bài hướng dẫn thiết kế website động với Adobe Dreamweaver CS3 này, chúng ta cùng nhau tìm hiểu các tính năng của nó thông qua việc thiết kế một website bán máy tính trực tuyến bằng ngôn ngữ ASP (VB Script). Bạn có thể tìm mua đĩa CD Adobe Dreamweaver CS3 tại các cửa hàng tin học hoặc liên hệ với người viết bài này qua email hoặc số điện thoại 0917488773 để được hỗ trợ.

I. Tạo web server

Web server là một ứng dụng được cài đặt trên máy chủ để xử lý các đoạn mã (script) mà người lập trình web viết ra, sau đó trả về kết quả cho trình duyệt dưới dạng một tập tin HTML. Nếu không có điều kiện thuê một hosting để thực nghiệm, bạn có thể tạo một web server ngay trên máy tính cá nhân để chạy được các ứng dụng web động. Trong chuyên đề này, bạn cần cài đặt một ứng dụng web server có tên gọi là Internet Information Services (IIS). Cách cài đặt như sau:

- Cho đĩa CD chứa Windows XP vào ổ đọc.

- Vào Start > Control Panel > Add or Remove Progams. Tại cửa sổ Add or Remove Progams, chọn Add/Remove Windows Components, đánh dấu chọn vào mục Internet Information Services (IIS), bấm Next rồi làm theo hướng dẫn để hoàn tất quá trình cài đặt.

- Sau khi cài đặt xong, bạn sẽ có thêm một thư mục mới với tên là Inetpub trên phân vùng C (nếu bạn cài Windows XP ở phần vùng này), có thể kiểm tra bằng cách mở trình duyệt Internet Explorer rồi gõ http://localhost, nếu nhận được màn hình chào mừng là bạn đã cài đặt thành công IIS.

Ngoài ra, nếu muốn sử dụng thêm các ngôn ngữ lập trình web như PHP, ColdFusion..., bạn cần tải về và cài đặt một trong các gói (pack) cài đặt đã bao gồm Apache, PHP, mySQL, PHPmyAdmin... như sau:

- FoxServ 3.0 (bản này ổn định hơn bản 3.1 beta): http://sourceforge.net/project/showfiles.php?group_id= 24751

- PHP Triad 2.2: http://sourceforge.net/project/platformdownload.php? group_id=9325

- WampServer 2: http://www.wampserver.com/en/

II. Tạo một dự án website

Công việc này sẽ giúp Adobe Dreamweaver CS3 dễ dàng kiểm soát và quản lý toàn bộ hệ thống website động mà bạn sắp thiết kế.

- Khởi động Adobe Dreamweaver CS3, từ giao diện chính của nó, bạn vào menu Site > New site. Một cửa sổ mới hiện ra, tại đây, bạn nhập tên cho dự án website là ComputerStore vào khung What would you like to name your site. Sau đó, nhập http://localhost vào ô What is the HTTP Address (URL) of your site. Bấm Next để tiếp tục.

- Trong cửa sổ tiếp theo, bạn đánh dấu chọn vào mục Yes, I want to use a server technology, rồi chọn ASP VBScript trong khung Which server technology?. Bấm Next để tiếp tục. Bấm Next cho đến khi xuất hiện cửa sổ có nút Done, bấm nút Done để bắt đầu quá trình tạo dự án website mới.

- Lúc này, bạn sẽ thấy tên của thư mục ComputerStore nằm trong khung File bên phải của Adobe Dreamweaver CS3. Thư mục này sẽ được lưu trữ tại C:\Inetpub\wwwroot\ComputerStore và hiện thời thư mục này trống rỗng vì bạn chưa tạo ra bất kỳ tập tin nào trong này cả.

III. Tạo template cho website

Theo mặc định, Adobe Dreamweaver CS3 cung cấp cho bạn một vài web template (khuôn mẫu web), tuy nhiên chúng không được bắt mắt cho lắm vì vậy bạn có thể tải về bộ template mà tác giả dùng để minh họa cho loạt bài này tại địa chỉ
http://rapidshare.com/files/91363672/ComputerStore_Temp.rar.

Sau khi tải về, bạn tiến hành giải nén rồi chép 3 tập tin Index.html, Index2.html, style.css cùng với thư mục Images vào thư mục C:\Inetpub\wwwroot\ComputerStore.

- Khởi động Adobe Dreamweaver CS3, bấm đôi vào tập tin index.htm trong khung File nằm phía bên phải để mở nội dung của tập tin này trong cửa sổ chính của Adobe Dreamweaver CS3. Tại đây, bạn vào menu File > Save as Template..., đặt tên cho template sắp tạo là MainTemp trong ô Save as, bấm Save để lưu lại. Lúc này, bạn sẽ thấy tên của tập tin index.html đã trở thành MainTemp.dwt. Và lúc này Adobe Dreamweaver CS3 sẽ tự động tạo thêm một thư mục có tên là Templates trong thư mục ComputerStore, thư mục Templates sẽ chứa tập tin MainTemp.dwt. Tương tự bạn tiếp tục chọn File > Save as Template... rồi đặt tên là admin_temp để sử dụng template này cho các trang web thuộc phần Quản trị mà bạn sẽ tạo ở các phần sau.

- Ưu điểm của việc sử dụng template là cho phép bạn dễ dàng thay đổi nhanh nội dung cho toàn bộ hệ thống website mà không phải tốn nhiều thời gian để sửa đổi trên từng trang web, bạn chỉ cần thay đổi nội dung trên template thì lập tức các trang web được áp đặt template này sẽ tự động thay đổi theo. Thông thường những nội dung cố định, ít bị thay đổi là các menu, banner...nhưng mỗi trang web lại hiển thị những nội dung khác nhau tùy theo mục đích mà bạn tạo ra nó, vì vậy bạn cần phải tạo ra những vùng không chịu ảnh hưởng của template để nhập những nội dung khác nhau cho nó. Adobe Dreamweaver CS3 gọi những vùng này là Editable Region.
- Quay lại với giao diện chính của Adobe Dreamweaver CS3, bạn hãy chọn table (bảng biểu) có chứa dòng chữ Sản phẩm mới bằng cách rê con trỏ vào cho đến khi thấy xuất hiện một khung viền màu đỏ thì bấm trái, sao cho thấy xuất hiện một đường viền đen bao quanh table là bạn đã có được một vùng chọn. Tiếp tục, vào menu Insert > Template Objects > Editable Region (hoặc bấm tổ hợp phím Ctrl+Alt+V). Một cửa sổ hiện ra, tại đây bạn đặt tên cho Editable Region này là Title1. Bấm OK để xác nhận. Lúc này, bạn sẽ thấy vùng chọn có viền màu xanh xuất hiện. Tương tự, bạn hãy chọn vùng chọn bên dưới dòng chữ Sản phẩm mới rồi đặt tên là Content 1, chọn vùng chọn bên dưới dòng chữ COMPONENTS rồi đặt tên là Menu1. Trước mắt, chúng ta cứ đặt 3 vùng chọn này, nếu cần bạn vẫn có thể tạo thêm các vùng chọn khác.

IV. Áp dụng template cho một trang web

Sau khi đã tạo xong một template (có tên là MainTemp.dwt), bạn có thể tiến hành áp dụng nó cho một trang web bằng cách:

- Từ giao diện chính của Adobe Dreamweaver CS3, bạn bấm phải vào thư mục ComputerStore trong khung File rồi chọn New File, đặt tên cho file mới tạo này là default.asp. Bấm Enter để xác nhận.

- Bấm đôi vào file default.asp vừa tạo để xem nội dung của nó trong cửa sổ chính của Adobe Dreamweaver CS3.

- Vào menu Modify > Templates > Apply Templates to page...

- Một cửa sổ hiện ra, bạn chọn MainTemp rồi bấm nút Select để xác nhận.

- Lúc này, bạn sẽ thấy trang default.asp đã được bổ sung giao diện giống như giao diện của trang MainTemp.dwt mà bạn đã tạo ra ở các bước trên, chỉ khác ở chỗ là bạn chỉ được thao tác trong phạm vi các ô có viền màu xanh, các ô viền màu xanh này là các vùng chọn không bị ảnh hưởng mỗi khi bạn sửa đổi nội dung của tập tin MainTemp.dwt, các vùng khác bạn sẽ không thể thao tác được.

V. Tạo database

Adobe Dreamweaver CS3 hỗ trợ rất nhiều loại database (SQLserver, MySQL, Microsoft Access, v.v...). Trong chuyên đề này, chúng ta sẽ bắt đầu tạo một database bằng Microsoft Access 2003 để tiện cho việc lưu trữ và di chuyển. Cách thực hiện như sau:

- Tạo thêm một thư mục có tên là Database trong thư mục ComputerStore. Khởi động Microsoft Access 2003.

- Vào menu File > New, bấm vào liên kết Blank database trong khung bên phải.

- Chọn nơi lưu trữ tập tin database sắp tạo tại C:\Inetpub\wwwroot\ ComputerStore\database, đặt tên tập tin này là data.

Sau khi đã có được tập tin database (có tên và phần mở rộng là data.mdb), bạn sẽ tiến hành tạo ra các bảng biểu để phục vụ cho quá trình ghi / xóa dữ liệu:

- Mở tập tin data.mdb bằng Microsoft Access 2003.

- Bấm đôi vào mục Create table in Design view. Tại đây, bạn tiến hành nhập vào các Field name và Data type rồi lưu lại theo các tên gọi (tblUser, tblCategory và tblProduct) theo mẫu sau:

1. Bảng tblUser

- Bảng này sẽ chứa thông tin của người quản trị và chỉ những ai nhập đúng Username, Password có trong bảng này thì mới vào được quyền quản trị website. Sau khi nhập xong phần Field name và Data type, bạn lưu lại bảng này với tên gọi tblUser. Nội dung bảng này như sau:
- Sau khi nhập dữ liệu xong. Bạn trở lại giao diện chính của Microsoft Access 2003, bấm đôi vào bảng tblUser vừa tạo rồi nhập giá trị là admin vào 2 ô txtUsername và txtPassword.

2. Bảng tblCategory

- Bảng này sẽ chứa danh mục các sản phẩm mà bạn tạo ra. Sau khi nhập xong phần Field name và Data type, bạn lưu lại bảng này với tên gọi tblCategory. Nội dung bảng này như sau:


- Trong đó, Catname là tên gọi của danh mục sản phẩm (category) và CatSort là thứ tự sắp xếp của danh mục sản phẩm.

3. Bảng tblProduct

- Bảng này sẽ chứa các thông tin có liên quan đến các sản phẩm mà bạn đang muốn kinh doanh. Sau khi nhập xong phần Field name và Data type, bạn lưu lại bảng này với tên gọi tblProduct. Nội dung bảng này như sau:
- Trong đó, TitleProduct là tiêu đề tên của sản phẩm, DatePost là ngày bạn thêm sản phẩm vào database, intcatID là ID của Category, mo_ta là phần miêu tả sơ lược về sản phẩm và chi_tiet là phần miêu tả chi tiết về sản phẩm.

4. Mối tương quan giữa các bảng (Relationships)

Nếu xem xét kỹ, bạn sẽ thấy rằng mỗi intcatID của 1 sản phẩm lại được gắn kết vào một intcatID của category nếu nó thuộc category đó. Như vậy, mỗi khi bạn tiến hành sửa / xóa một sản phẩm nào đó thì bắt buộc phần intcatID trong bảng biểu tblCategory sẽ phải thay đổi theo. Muốn vậy bạn cần phải sử dụng thêm lệnh Relationships trong Microsoft Access 2003 để khai báo chúng. Cách làm như sau:

- Mở tập tin data.mdb bằng Microsoft Access 2003.

- Vào menu Tool > Relationships.

- Một cửa sổ có tên là Show table hiện ra. Tại đây, bạn chọn bảng tblProduct rồi bấm nút Add, tiếp tục chọn bảng tblCategory rồi bấm Add. Thao tác này sẽ giúp bạn đưa 2 bảng trên vào cửa sổ Relationships. Sau cùng bấm Close để đóng cửa sổ Show table lại.

- Từ cửa sổ Relationships, bạn bấm trái chuột vào mục intcatID trong bảng tblProduct rồi kéo rê nó vào mục intcatID trong bảng tblCategory. Lúc này bạn sẽ thấy một đường thẳng màu đen nối liền 2 mục này. Thoát khỏi cửa sổ Relationships và chọn Yes để lưu lại.

- Sau cùng, vào menu Tool > Database Utilities > Compact and Repair Database... để Microsoft Access 2003 xác lập lại các thông tin cho tập tin data.mdb. Nếu không có thời gian để làm theo hướng dẫn, bạn có thể tải về tập tin data.mdb từ địa chỉ http://rapidshare.com/files/91701837/ComputerStore_database.rar.

Kỳ tới: Quản trị website - Kết nối database và đăng nhập hệ thống