Giao Trinh Dream Weaver MX 2004

Giao trinh Dreamweaver MX 2004

Table Of Contents

Table Of ContentsBai tap co ban.......................................................................................................1

CÀI ĐẶT PWS TRÊN WINDOWS 98.................................................................1SỬ DỤNG PWS.................................................................................................6CẤU HÌNH IIS....................................................................................................8Bai tap so 1......................................................................................................13

CẤU HÌNH WEBSITE TRONG DREAMWEAVER MX 2004........................22XUẤT DỮ LIỆU TỪ DATABASE TRONG DREAMWEAVER MX 2004.......30KIỂM TRA VÀ UPLOAD LÊN WEB SERVER..............................................37TẠO EMAIL LINK VÀ SỬ DỤNG EXTENSION AUTO HYPERLINK...........39

Bai tap so 2......................................................................................................42GIỚI THIỆU..................................................................................................42TẠO DATABASE VÀ CẤU HÌNH DSN.........................................................43CẤU HÌNH WEBSITE TRONG DREAMWEAVER MX 2004........................52XÂY DỰNG CATALOGUE TRỰC TUYẾN CHO NGƯỜI ĐUA THUYỀN....60TẠO TRANG CHI TIẾT................................................................................68TẠO TRANG THÊM MẪU TIN.....................................................................77TẠO TRANG QUẢN TRỊ ( ADMIN PAGES).................................................94TẠO TRANG XÓA (DELETE PAGE).........................................................102TẠO TRANG SỬA MẪU TIN (EDIT PAGE)...............................................107PHÂN TRANG (PAGING RECORDSETS)................................................118TẠO TRANG TÌM KIẾM(SEARCH PAGE).................................................127XÂY DỰNG TRANG KẾT QUẢ TÌM KIẾM (THE SEARCH RESULTS PAGE)...................................................................................................................135VIẾT SQL CHO TRANG KẾT QUẢ (SEARCH RESULTS SQL)................144PHÂN QUYỀN QUẢN TRỊ (ADMIN ACCESS LEVEL)...............................148TẠO TABLE LOGIN...................................................................................149TẠO LOGIN (LOG IN ADMIN USERS)......................................................152TẠO NGƯỜI DÙNG MỚI (NEW USER)....................................................162XÓA NGƯỜI DÙNG (DELETE USER)......................................................170BẢO VỆ TRANG WEB NHIỀU CẤP ĐỘ (PROTECT PAGES FOR MULTI LEVELS)....................................................................................................180GỞI MAIL (SEND MAIL)............................................................................182TẠO NEWSLETTER (THE REGISTER FOR NEWS LETTER FORM)......190SỬ DỤNG THÀNH PHẦN TẠO BANNER ĐẢO (THE AD ROTATOR COMPONENT)...........................................................................................200TẠO THÀNH PHẦN NỘI DUNG ĐỘNG (THE CONTENT ROTATOR COMPONENT)...........................................................................................208

Bai tap nang cao...............................................................................................213ĐẾM SỐ LẦN DOWNLOAD(COUNT DOWNLOAD).....................................213XÓA NHIỀU MẪU TIN TRÊN TABLE CÓ QUAN HỆ BẰNG CÁCH DÙNG CHECKBOX (DELETING MULTIPLE LINKED RECORDS USING CHECKBOXES).............................................................................................218TẠO VÙNG LẶP LẠI THEO CHIỀU NGANG (HORIZONTAL LOOPER REPEAT REGION)........................................................................................228

iii

Hiển thị số trang Recordset (Recordset Page Numbers) cho một miền lặp lại (Repeat Region)............................................................................................231SỬ DỤNG EXTENSION REMEMBER ME CỦA BASIC-ULTRADEV...........249QUÊN MẬT KHẨU (FORGOTTEN PASSWORD).........................................252TẠO MENU ĐỊNH HƯỚNG TỪ A->Z (BUILDING AN ALPHABETICAL A TO Z MENU)...........................................................................................................258SẮP XẾP DỮ LIỆU (SORT RECORD)..........................................................266Simple Shopping Cart....................................................................................274

TẠO FOLDERS VÀ FILES.........................................................................274TẠO DATABASE, CẤU HÌNH DWMX 2004 & TẠO THƯ MỤC ẢO...........275TẠO TRANG QUẢN TRỊ (THE ADMIN CONTROL PANEL)......................281TẠO TRANG THÊM SẢN PHẨM (THE ADMIN ADD PRODUCTS PAGE)282TẠO TRANG XEM SẢN PHẨM(THE ADMIN VIEW PRODUCTS PAGE)..286TẠO CÁC TRANG XÓA SẢN PHẨM (ADMIN DELETE PRODUCTS PAGES)......................................................................................................289TẠO CÁC TRANG CẬP NHẬT SẢN PHẨM (ADMIN EDIT PRODUCTS PAGE)........................................................................................................297TẠO CÁC QUẦY HÀNG (THE SHOP DEPARTMENTS)...........................304THÊM SẢN PHẨM VÀO XE HÀNG (THE ADD TO CART PAGE).............310TẠO TRANG XE HÀNG (THE SHOPPING CART)....................................315TẠO TRANG THANH TOÁN TIỀN (THE CHECKOUT PAGE)..................323TẠO TRANG THẺ TÍN DỤNG(THE CREDIT CARDS PAGE)...................332TẠO TRANG GỞI MAIL ĐẾN KHÁCH HÀNG(THE EMAIL ORDERS PAGE)...................................................................................................................338

Build a Poll.....................................................................................................341TẠO BẢNG THĂM DÒ Ý KIẾN (POLL / VOTE).........................................341TẠO TRANG BÌNH CHỌN (THE VOTING PAGE).....................................344TẠO TRANG KẾT QUẢ (THE RESULTS PAGE).......................................349

Sach tham khao................................................................................................357Glossary............................................................................................................361

iv

Bai tap co ban

GIỚI THIỆUMacromedia's Dreamweaver MX 2004 là một chương trình phát triển ứng dụng Web rất mạnh. Trong phần học này bạn sẽ được hướng dẫn cách tạo trang Web ASP (Active Server Page ) trong Dreamweaver MX 2004 để kết nối với CSDL Microsoft's Access.

MÁY CỦA BẠN CẦN CÀI PHẦN MỀM NÀO ?

Để phát triễn và chạy được các trang ASP máy của bạn phải cài đặt một Web Server Tùy thuộc máy bạn đang chạy hệ điều hành nào mà bạn sẽ cài đặt các Web Server thích hợp theo hướng dẫn bên dưới đây:

"Windows 95 - 98 - 98SE": Bạn phải cài đặt Personal Web Server (PWS). Bạn sẽ tìm thấy thư mục Add-Ons trong đĩa CDROM cài đặt Windows . Hãy vào thư mục PWS sau đó chạy tập tin setup.exe . Bạn có thể tìm thấy các bước cài đặt PWS trên Windows 98 bằng cách click vào đây Installing PWS on Windows 98

"Windows ME": Bạn sẽ phải cài đặt PWS trên Windows ME mặt dù Microsoft không cung cấp chương trình này kèm theo đĩa CDROM. Bạn sẽ phải copy các tập tin PWS từ đĩa 95 , 98 hoặc 98SE . Bạn sẽ phải truy cập vào website của Microsoft để download chương trình sữa lỗi Patch thì mới có thể cài đặt được Bạn có thể tìm thấy các bước cài đặt PWS trên Windows ME bằng cách click vào đây :Installing PWS on ME

"NT 4": bạn sẽ tìm thấy bản copy của PWS trên đĩa NT 4 Option Pack. Bạn cứ theo các hướng dẫn cài đặt trợ giúp mà thực hiện.

"Windows 2000": Bạn phải cài đặt Microsoft Internet Information Server (IIS). Click vào đây để xem hướng dẫn cài đặt IIS trên Windows 2000 Installing IIS on 2000

"Windows XP Professional": Bạn phải cài đặt IIS. Click vào đây để xem hướng dẫn cài đặt IIS . Installing IIS on XP Pro

"Windows XP Home Edition": Microsoft kh ô ng cung cấp bất kỳ kỹ thuật server nào trên XP Home. Bạn sẽ phải cập nhật lên XP Pro.

TÓM LẠI BẠN CẦN CÁC PHẦN MỀM SAU ĐÂY :

• Macromedia Dreamweaver MX 2004 / MX / UltraDev 4.

• Microsoft PWS hoặc IIS trên máy của bạn.

• Một máy chủ Web server hổ trợ ASP. (Khi bạn Upload lên Internet)

• Microsoft Access .

CÀI ĐẶT PWS TRÊN WINDOWS 98

Bạn phải cài đặt PWS hoặc IIS trên máy trước khi sử dụng Dreamweaver MX 2004 / MX/ UltraDev để tạo trang ASP.

1


1. Chèn đĩa cài đặt Windows 98 vào ổ đĩa CD-ROM của bạn.

2. Click nút Start và sau đó click Run.

3. Trong hộp thoại đánh lệnh D:\add-ons\pws\setup.exe (với D: là ổ đĩa CDROM của bạn) sau đó click OK.

4. Cửa sổ cài đặt PWS sẽ xuất hiện như (hình 1)

Hình 1

5. Click Next.

6. Click nút Custom để mở menu cấu hình (hình 2).

Hình 2

7. Double Click vào Microsoft Data Access Components (hình 3) và đánh

2

Bai tap co ban

dấu chọn MDAC: ADO, ODBC, and OLE DB (hình 4). Sau đó chọn mục cài đặt tài liệu ADO (hình 5).

Hình 3

Hình 4

Hình 5

3


8. Click OK để đóng cửa sổ .

9. Double click PWS (hình 6) và sau đó double click Documentation and Checkmark Active Server Pages trong cửa sổ xuất hiện (Hình 7).

Hình 7

4

Bai tap co ban

10. Đóng cả 2 cửa sổ bằng cách click OK.

11. Click "NEXT" trong cửa sổ cài đặt PWS.

12. Chú ý là thư mục gốc mặc định của local web server là x:\Inetpub\wwwroot với X là ổ đĩa. Click Next để chấp nhận thông số mặc định (hình 8).

Hình 8

13. Chọn cài MTS (Microsoft Transaction Server) theo đường dẫn mặc định và click nút Next(hình 9).

Hình 9

5


14. Tiếp tục cài ,click nút Finish để kết thúc.

15. Khởi động lại máy tính.

Về đầu trang

SỬ DỤNG PWS

1/ Khi cài đặt xong Persional Web Server bạn có thể mở trình duyệt Web lên và gõ vào hộp Location địa chỉ URL như sau: http://127.0.0.1 hoặc http://localhost và nhấn Enter bạn sẽ thấy xuất hiện một trang Web Microsofl Personal Web Server hoặc

bạn có thể Double click vào biểu tượng PWS trên thanh Task bar (gốc phải

6

Bai tap co ban

của màn hình gần đồng hồ hệ thống bạn sẽ thấy xuất hiện cửa sổ Personal Web Manager.

2/ Đây là một số thư mục và tập tin mặc định lưu trong C:\Inetpub\wwwroot.

Mở cửa sổ trình duyệt và nhập vào địa chỉ http://localhost/default.asp bạn sẽ thấy xuất hiện trang chủ mặc định của Local Web Server.

Hãy tạo một thư mục tên tutorial để sử dụng cho các bài học sau này.

2/ Bạn click vào biểu tượng Advancer ở phía dưới góc bên trái cửa sổ Personal Web Manager. Khi đó ở frame bên phải của cửa sổ Personal Web Manager sẽ xuất hiện như hình vẽ sau:

7


Mặc nhiên thư mục Home (thư mục gốc của Webserver) là <ổ đĩa:>\

inetpub\wwwroot. Bạn hãy Check mục Enable Default Document để cho phép hiện trang chủ

mặc định khi truy cập vào Website. Tại hộp thoại Default Document(s) bạn hãy nhập vào tên trang chủ Default. Nếu bạn muốn hiện các trang web ở dạng danh sách liệt kê bạn hãy Check

vào mục Allow Directory Browsing. Tại mục Virtual Directories đưa vệt sáng về thư mục Home như hình vẽ. Nhấn nút Add sẽ mở ra hộp thoại như sau:

Trong đó thư mục DETAI là thư mục đang chứa các trang web ASP của bạn. Tại mục Directories click vào nút Browse để tìm thư mục đang chứa các

trang Web mà bạn muốn truy cập. Tại mục Alias đánh vào bí danh hay còn gọi là thư mục ảo của đường dẫn

trên. Bạn có thể cấp thêm quyền Excute để có thể thi hành được các Script ASP. Nhấn vào nút OK.

Về đầu trang

CẤU HÌNH IIS

8

Bai tap co ban

Để cấu hình Internet Information Server bạn hãy khởi động chương trình này bằng cách click nút Start -> Control Panel -> Adminstrative Tool. Dbclick vào Internet Services Manager

Click nút + vào tên máy chủ , click nút + vào mục Default Web Site. Để tạo thư mục ảo bạn hãy click phải chuột vào mục Default Web Site

- > New -> Virtual Directory

Click nút Next để tiếp tục

9


Đặt tên bí danh (Alias) là dwmx1 và click Next để tiếp tục

Click nút Browse tới thư mục dwmx1 trong thư mục wwwroot sau đó click nút Next để tiếp tục.

10

Bai tap co ban

Hãy đặt quyền Read, Run script, Excute,Browse và click nút Next để tiếp tục.

Click nút Finish để hoàn thành

11


Hãy click phải chuột vào tên thư mục ảo và chọn Properties để định thêm một số thông tin.

Bạn hãy check chọn mục Script source access nếu bạn muốn người sử dụng có thể xem được dạng danh sách liệt kê , click nút OK để đóng hộp thoại lại.

12

Bai tap co ban

Về đầu trang

Bai tap so 1

TẠO DATABASE VÀ CẤU HÌNH DSN

DOWNLOADS

Bạn có thể Download database và files cho bài thực hành này bằng cách click vào đây.

THE DATABASE & DSN:

Trong phần này chúng ta sẽl .....1. Tạo "Folders" để lưu trữ các tập tin web trong Website của bạn. 2. Tạo "Database" để sử dụng cho Website của bạn. 3. Tạo "DSN" (Data Source Name). Sẽ được sử dụng sau để giúp trang web của bạn kết

nối với .

FOLDERS:

1/ Click phải chuột vào Desktop. Chọn "New > Folder" từ menu và đặt tên cho thư mục là "dwmx1".

13


Bây giờ bạn hãy mở thư mục "wwwroot" trên đĩa cứng của bạn trong thư mục "Inetpub". Tạo một thư mục có tên là "dwmx1" (trùng tên với thư mục trên Desktop của bạn).

Thư mục "Inetpub" và "wwwroot" được tạo khi bạn cài đặt IIS vào máy của bạn nếu bạn chưa thấy có thư mục này bạn hãy thực hiện bước cài đặt IIS Server.

Sau này khi chúng ta cấu hình Dreamweaver MX 2004 sẽ xem thư mục "dwmx1" trên desktop là "Local Files" và thư mục "dwmx1" trong thư mục "wwwroot" là "Remote Site". Chúng ta sẽ xây dựng trang ASP trong Local Files. Sau này chúng ta sẽ truyền chúng tới Remote Site và chạy kiểm tra chúng. Vì khi Dreamweaver tạo các trang ASP nó sử dụng "VBScript" và "SQL" (Structured Query Language) và các trang ASP này phải chạy trên máy chủ chứ bạn không xem trực tiếp các trang ASP được.

DATABASE:

2/ Mở Microsoft Access.Click nút New sau đó click chọn mục Blank Database...

3/ Trong mục "Save in" hãy chọn thư mục "dwmx1" trong thư mục "wwwroot" trên máy chủ củ bạn. Trong hộp "File name" đánh vào tên Database mới là "dwmx1.mdb". Click nút "Create".

14

Bai tap co ban

Nếu bạn mở thư mục "wwwroot\dwmx1" bạn sẽ nhìn thấy tập tin database đã được tạo ra.

4/ Chọn "Tables" , double click vào "Create table in design view" .

15


5/ Nhập ID trong cột đầu tiên dưới "Field Name". Click vào vùng trống dưới "Data Type" chọn "AutoNumber" từ drop down menu xuất hiện. Access sẽ tự tạo ra số tự động khi bạn thêm vào trong Database một mẫu tin mới.

6/ Click phải chuột vào trường "ID" và chọn "Primary Key" từ menu. Một khóa chính là một trường duy nhất phân biệt cho mỗi mẫu tin trong table. Chúng ta sẽ sử dụng số ID để định nghĩa duy nhất cho mỗi mẫu tin trong bảng.

16

Bai tap co ban

7/ Sau khi bạn định nghĩa Primary key bạn sẽ nhìn thấy một biểu tượng chìa khóa xuất hiện trước "ID" như sau.

8/ Lặp lại cho các trường sau đây:

9/ Trong những bài học sau chúng ta sẽ xây dựng một biểu mẫu cho phép người sử dụng có thể thêm thông tin vào database. Nếu người sử dụng để trống các vùng này và nhấn nút submit thì có thể gây ra lỗi khi chạy chương trình. Để hạn chế lỗi này , click chọn trường "Name" và trong Tab "General" click vào mục "Allow Zero Length" hãy chuyển giá trị "Yes" thành "No" . Hãy lặp lại tương tự cho các trường Address, Email và Job.

17


Trong Tab "General" bạn sẽ thấy mục "Field Size" mặc định là 50. Do đó nếu bạn muốn người sử dụng nhập vào bao nhiêu kí tự bạn có thể đặt lại giá trị này. Mặc định trường Text chỉ cho phép lưu trữ 250 ký tự , nếu muốn vượt quá 250 ký tự bạn hãy chọn kiểu dữ liệu là "Memo".

10/ Vào menu "File" chọn "Save As" .

11/ Đánh tên mytable và click "OK".

Hãy click chọn mytable và chọn "Design View" từ menu như sau:

12/ Double vào biểu tượng mytable để mở Table.

Bạn sẽ thấy xuất hiện cửa sổ sau:

18

Bai tap co ban

13/ Hãy nhập liệu vào như sau :

CẤU HÌNH DSN (Data Source Name)

14/ Để cấu hình "DSN". Hãy mở "Control Panel" và double click vào biểu tượng "ODBC Data Sources" (bạn đang sử dụng Windows 98) . Nếu bạn xử dụng Windows XP Profesional khi bạn đang ở trong cửa sổ "Control Panel" hãy dbclick để mở Administrative Tool sau đó mới dbclick vào "ODBC Data Sources"

15/ Hãy chọn Tab "System DSN" và click nút "Add".

19


16/ Hãy chọn "Microsoft Access Driver [*.mdb]" từ danh sách . Click nút "Finish".

17/ Cửa sổ "ODBC Microsoft Access Setup" sẽ mở ra.

Trong hộp "Data Source Name" nhập dwmx1. Đây là tên mà chúng ta sẽ sử dụng sau này khi tạo kết nối DSN.

Click nút "Select" cửa sổ "Select Database" sẽ mở ra.

20

Bai tap co ban

Double click vào "c:\" và browse tới thư mục "dwmx1" trong thư mục "wwwroot". (Tùy khi bạn cài thư mục này vào ổ C: hay D:)

Click chọn "dwmx.mdb" và click nút "OK" .

Trong cửa sổ "ODBC Microsoft Access Setup" click nút "OK" .

18/ Trong Tab "System Data Sources" bạn sẽ thấy dwmx1. Click nút "OK" để đóng cửa sổ.

21


Bây giờ chúng ta sẽ tiếp tục cấu hình Dreamweaver MX 2004 để có thể làm việc với Database

Về đầu trang

1 | 2 | 3 | 4 | 5

CẤU HÌNH WEBSITE TRONG DREAMWEAVER MX 2004

Trước khi muốn làm việc với các trang web động bạn phải cấu hình Dreamweaver MX 2004 theo một mô hình lập trình web động nào đó ví dụ như: ASP/VBScript , ASP.NET, PHP, JSP, COLD FUSION. Trong phần này bạn sẽ được hướng dẫn mô hình ASP/VBScript trong Dreamweaver MX 2004. Các mô hình khác sẽ được bàn luận sau trong một tài liệu khác

1/ Từ menu "Site" chọn Manage Site... , sau đó click nút New chọn Site .

22

Bai tap co ban

2/ Click chọn Tab "Advanced" và chọn mục "Local Info" từ menu Category list. Local Info xác lập các thông tin cho DW biết nơi làm việc của Site.

Trong hộp "Site Name" nhập dwmx1' Trong hộp "Local Root Folder" click nút Browse (màu vàng ) và chọn thư

mục dwmx1 trên "desktop" của bạn. ĐỪNG CLICK NÚT OK VỘI.

23


3/ Chọn "Remote Info" từ Category list. Đây là nơi mà DMX hiểu là PWS hay IIS server được cài đặt nơi mà thư mục dwmx1 được đặt ở đó.

Chọn "Local / Network" từ menu "Access" .

4/ Trong hộp "Remote Folder" , click nút browse tới thư mục dwmx1 trong thư mục "wwwroot" trên máy chủ Local Web Server. (Đừng chọn thư mục dwmx1 trên màn hình.

ĐỪNG CLICK NÚT OK VỘI.

24

Bai tap co ban

5/ Chọn "Testing Server" từ "Category" .

Trong hộp "Server Model" hãy chọn "ASP VBScript".

Trong hộp "Access" chọn "Local / Network"

6/ Bạn sẽ nhìn thấy "Testing Server Folder" xuất hiện . Click Browse đến thư mục dwmx1 trong thư mục "wwwroot" trên Local Web Server (không phải thư mục "dwmx1" trên desktop.

7/ Trong mục URL Prefix nhập vào địa chỉ web để kiểm tra (nếu bạn đặt thư mục dwmx1 khác thư mục wwwroot thì bạn phải tạo một thư mục ảo (Virtual Direcrtory) với bí danh là dwmx1. Xin vui lòng xem cách tạo thư mục ảo trong IIS.

BÂY GIỜ BẠN CÓ THỂ CLICK NÚT OK

25


7/ Mở "Files" panel bằng cách click "Files".

8/ Hãy click nút Expand/Collapse để phóng to cửa sổ Site

26

Bai tap co ban

Cửa sổ bên trái là Remote Site và cửa sổ bên phải là Local site. Click nút Expand/Collapse để thu nhỏ cửa sổ lại.

Bạn có thể chọn menu Local View để hiện các tập tin trong Local Site

Bạn có thể chọn menu Remote View để hiện các tập tin trong Remote Site

9/ Hãy chọn menu Local View sau đó click phải chuột vào site dwmx1 và từ popup menu chọn New File , đặt tên tập tin là view.asp và bạn hãy dbclick vào nó để mở tập tin này lên.

10/ Chọn Panel Application , Click mục document type

27


Chọn mô hình ASP VBScript và click nút OK bạn sẽ thấy một dấu check được chọn.

Click mục Testing Server chọn OK bạn sẽ thấy dấu check xuất hiện trước số 3 (Nếu dấu check không xuất hiện thì có nghĩa là bạn chưa tạo ra được thư mục ảo ánh xạ đến thư mục d:\inetpub\wwwroot\dwmx1 ) . Xin vui lòng xem cách tạo thư mục ảo.

11/ Trong tab "Database" của "Application" panel, click vào nút "+" và chọn "Data Source Name [DSN]".

28

Bai tap co ban

12/ Bạn sẽ thấy xuất hiện cửa sổ "Data Source Name [DSN]" như sau:

Trong hộp "Connection Name" nhập conDwmx1

Từ menu "Data Source Name [DSN]" , chọn dwmx1

Hãy chắc chắn rằng nút Radio "Using Local DSN" được chọn .

13/ Click nút "Test" nếu bạn thấy xuất hiện hộp thoại báo thành công là bạn đã thành công rồi đó. Click "OK" để lưu kết nối của bạn lại.

14/ Bạn sẽ nhìn thấy một biểu tượng hình cái trống màu vàng trong Tab Database trong menu Application Panel điều này có nghĩa là đã có sự kết nối giữa Website và cơ sở dữ liệu.

Hãy chọn menu Files bạn sẽ thấy có một thư mục Connections được tạo ra chứa một tập tin conDwmx1.asp. Trong tập tin này chứa một chuổi kết nối (Connection String) đến Database của bạn.

29


Về đầu trang

1 | 2 | 3 | 4 | 5

XUẤT DỮ LIỆU TỪ DATABASE TRONG DREAMWEAVER MX 2004

1/ Mở trang "view.asp" trong DMX2004 và chèn vào một Table có 6 dòng 2 cột như sau:

30

Bai tap co ban

2/ Chọn Tab "Bindings" trong "Application" panel và click nút "+" .

3/ Chọn "Recordset[Query]" từ menu Popup. Một "Recordset" là một mẫu vấn tin cơ sở dữ liệu (Database Query) là một lệnh được cung cấp cho một cơ sở dữ liệu đòi hỏi thông tin cụ thể. Nó là trung tâm của nhiều hạot động cơ sở dữ liệu mà bạn sẽ thực hiện trong Dreamweaver. Các Recordset cho phép bạn truy tìm các cột để xác định trong một cơ sở dữ liệu. Chúng có thể phân loại các Record theo thứ tự bảng chữ cái hoặc theo thứ tự số, như khi bạn xem một danh sách các sản phẩm có giá từ rẽ tiền nhất đến đắt tiền nhất. Ngoài ra, một Recordset có thể tập trung vào một Record cụ thể dựa vào thông tin được gởi đến một site bởi một khách hàng, hoặc dựa vào thông tin được cung cấp trong một URL. Về cơ bản các Recordset cho phép bạn hiển thị các lượng thông tin cơ sở dữ liệu lớn chỉ trong một phần nhỏ của một giây - một ưu điểm mạnh mẽ. Xin xem thêm bài giảng về cách tạo và sử dụng các Recordset.

31


4/ Cửa sổ Recordset sẽ xuất hiện ....... Trong hộp "Name" nhập rsView. Trong hộp "Connection" chọn conDwmx1 từ menu. Chọn bảng mytable trong hộp Table. Chọn nút Radio "All" . Hãy để mặc định các mục khác. Click nút Test để kiểm tra.

5/ Khi bạn click nút "Test" bạn sẽ nhìn thấy xuất hiện cử sổ "Test SQL Statement" như bên dưới và bạn sẽ nhìn thấy dữ liệu trong Database củ bạn đã được hiện ra.Click nút "OK" để đóng cửa sổ "Test SQL Statement" và click nút "OK" lần nữa để đóng cửa sổ "Recordset".

32

Bai tap co ban

6/ Bạn hãy nhìn xem trong cửa sổ Bindings panel bạn sẽ thấy một Recordset được tạo ra. Click nút + kế biể tượng recordset và bạn sẽ nhìn thấy tất cả các trường (Field) trong Database của bạn (Đây là các trường Text động.

7/ Hãy đặt cursor trong Table tại nhãn "Name" và click. Bây giờ bạn hãy chuyển sang "Bindings" panel và chọn Name từ danh sách sau đó click nút Insert.

8/ Bạn sẽ nhìn thấy {rsView.Name} trong Cell tương ứng. Trường Text động này sẽ hiển thị thông tin của cột Name trong database của bạn.

9/ Lặp lại bước 7 cho Cell "Address" , "Email" , "Job" để đựoc như sau:

33


Bạn có thể chọn các trường Text động này và làm các định dạng thông thừơng như tô màu , định Font chữ hay làm đậm ....

Hãy click nút Live Data để kiểm tra thử dữ liệu bạn sẽ thấy chỉ có mẫu tin đầu tiên được xuất hiện do đó bước kế tiếp là bạn sẽ tạo ra một miền lặp lại (Repeat Region). Click nút Live Data lần nữa để chuyển sang chế độ design

10/ Hãy đặt cursor trong cell "Name" và chọn các cell như hình vẽ.Chọn Tab "Server Behaviors" trong "Application" panel. Click nút "+" và chọn "Repeat Region" từ .

11/ Cửa sổ "Repeat Region" sẽ xuất hiệnr. hãy chọn "rsView" trong hộp "Recordset" và click chọn nút Radio "All Records". Clcik nút "OK". Điều này có nghĩa là tất cả các mẫu tin sẽ được hiển thị trong trang "view.asp".

34

Bai tap co ban

12/ Click nút "Live Data View" lần nữa và lần này bạn sẽ nhìn thấy tất cả các mẫu tin torng Database sẽ xuất hiện. Click nút "Live Data View" lần nữa để chuyển sang chế độ "Design View" bạn sẽ nhìn thấy một vùng được lặp lại (Repeat)

35


13/ Vào menu File chọn Save .

14/ Tất cả các tập tin tạo ra trong Dreamweaver MX 2004 nãy giờ được lưu trong "Local Folder". Bây giờ chúng ta sẽ copy chúng đến server...Hãy chọn "Connections" sau đó click nút "Put Files".

36

Bai tap co ban

15/ Chọn "Remote View". bạn sẽ nhìn thấy tất cả các tập tin đã được chép vào Server. Bạn đừng lo lắng vì thấy một tập tin tên "dwmx1.ldb" trong thư mục. Đây là tập tin tạm mà DMX2004 sử dụng khi Test với nút Live Data View và tập tin này sẽ mất khi sau này bạn đóng DMX2004 lại.

Về đầu trang

1 | 2 | 3 | 4 | 5

KIỂM TRA VÀ UPLOAD LÊN WEB SERVER

KIỂM TRA

1/ Mở trình duyệt Internet Explore tại hộp Address nhập vào địa chỉ http://localhost/dwmx1/view.asp và Enter bạn sẽ nhìn thấy kết quả sau:

37


UPLOADING ĐẾN MÁY CHỦ WEB SERVER

Bạn hãy chắc chắn rằng mọi thứ đã chạy được 100% trước khi bạn Upload vào máy chủ Web Server.

2/ Bạn phải tìm một nhà cung cấp Hosting trên Internet và máy chủ của họ phải hổ trợ ASP.

3/ Mở tập tin conDwmx1.asp trong thư mục Connections và hãy sửa chuỗi kết nối đến Database như sau:

Trứoc khi sửa đổi

<%' FileName="Connection_odbc_conn_dsn.htm"' Type="ADO" ' DesigntimeType="ADO"' HTTP="false"' Catalog=""' Schema=""Dim MM_conDwmx1_STRINGMM_conDwmx1_STRING = "dsn=dwmx1;"%>

Sau khi sửa đổi

<%' FileName="Connection_odbc_conn_dsn.htm"' Type="ADO"

38

Bai tap co ban

' DesigntimeType="ADO"' HTTP="false"' Catalog=""' Schema=""Dim MM_conDwmx1_STRINGMM_conDwmx1_STRING = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("dwmx1.mdb")%>

Về đầu trang

1 | 2 | 3 | 4 | 5

TẠO EMAIL LINK VÀ SỬ DỤNG EXTENSION AUTO HYPERLINK

1/ Mở trang "view.asp" và chuyển sang chế độ "Show code and Design View" (bạn có thể click nút Split). Màn hình của bạn sẽ bị tách làm hai vùng nữa trên là vùng Code và nữa dưới là vùng Design.

2/ Trong "Design View" click chọn {rsView.Email} bạn sẽ nhìn thấy trong vùng Code View sẽ đánh dấu đoạn Code ASP dùng để in địa chỉ Email ra trang web.

3/ Hãy kẹp thẻ A vào đoạn Code được đánh dấu như sau:

<a href="mailto:<%=(rsView.Fields.Item("Email").Value)%>"><%=(rsView.Fields.Item("Email").Value)%></a>

4/ Nhấn "F12" để kiểm tra chương trình sẽ đòi hỏi bạn phải Upload lên Web Server thì bạn chọn Yes và bạn sẽ thấy kết quả sau:

39


5/ Bạn có thể làm điều này bằng cách sử dụng Extension Auto Hyperlink. Hãy click vào đây để Download.

Sau khi Download xong bạn hãy chọn menu Commands->Manage Extensions

6/ Bạn hãy click nút Install sau đó chỉ đường dẫn tới tập tin vừa mới Download. Xin vui lòng xem bài giảng về cách sử dụng Extension.

Sau khi cài đặt thành công bạn sẽ thấy Server Behavior Auto Hyperlink xuất hiện trong danh sách các Extension.

7/ Chọn {rsView.Email} sau đó chọn "Auto Hyperlink" từ "Server Behaviors" .

40

Bai tap co ban

8/ Khi cửa sổ "Auto Hyperlink" xuất hiện hãy chọn Recordset rsView và chọn trường "Email" . Click nút OK và bạn sẽ nhình thấy bây giờ địa chỉ Email đã có link. Nhấn F12 để kiểm tra kết quả.

Vậy là bây giờ bạn không cần phải viết Code nữa thật là tiện lợi phải không bạn.

Tóm lại trong bài tập 1 này bạn đã học được những nội dung sau:

Cài đặt một Web Server trên máy của bạn. Xây dựng một database đơn giản dùng Access. Cấu hình một DSN. Cấu hình Web Site trong DMX2004. Xây dựng trang web động dùng để xuất dữ liệu từ Database. Tập viết Code bằng tay trong chế độ Code View. Download, cài đặt và sử dụng Dreamweaver extensions. Thay đổi chuỗi kết nối cơ sở dữ liệu trước khi uploading trang Web lên máy

chủ.

Về đầu trang

1 | 2 | 3 | 4 | 5

41


Bai tap so 2

GIỚI THIỆU

DOWNLOADS

Bạn có thể Download database và files cho bài thực hành này bằng cách click vào đây.

Trong bài tập số 2 này bạn sẽ được hướng dẫn xây dựng một Database Website cho công ty thương mại Yacht Broker với tên gọi là "The Yot Shop". Bài học này sẽ chứa tất cả các kỹ thuật cơ bản trong Dreamweaver MX 2004. Khi bạn đã làm quen với các kỹ thuật trong "Yot Shop" site, sau này bạn có thể tự xây dựng các Site khác tương tự như car dealerships, estate agents (Bất động sản) vv....

Trong phần này chúng ta sẽ xây dựng một trang "Stock List". Trang này sẽliệt kê tất cả các yachts trong kho và hiển thị hình ảnh ở dạng thumbnail. Mỗi mục trong stock list sẽ có một link "more details" để cho người sử dụng có thể xem chi tiết các thuyền, mô tả và hình ảnh của chúng.

Ngoài ra chúng ta còn xây dựng trang cho phép người quản trị có thể thêm thông tin vào cơ sở dữ liệu (Add Record) .

Chúng ta sẽ xây dựng một trang điều khiển cho Admin (Admin Control Panel) trước khi tạo một trang "Admin View" và một trang dùng để xóa mẫu tin (Delete Record).

Xây dựng trang cho phép sửa mẫu tin trong database. Xây dựng trang tìm kiếm cho site. Xây dựng biểu mẫu liên lạc "Contact" cho site để các Client có thể liên lạc.

Xây dựng trang cập nhật bản tin "News" với các banner ads động ngẫu nhiên.

Xây dựng trang "Admin" để bảo mật cho Web site.

1/ Hãy tạo một thư mục trên Desktop tên YotShop.

2/ Hãy giải nén tập tin final_Yotshop.zip vừa mới Download sau đó chép 2 thư mục chứa hình "artwork" và "stock" vào thư mục "YotShop" vừa mới tạo. Bạn cụng có thể copy tập tin "YotShopText.txt" để xem thông tin về các thuyền.

42

Bai tap co ban

Về đầu trang

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 1920 | 21 | 22 | 23

TẠO DATABASE VÀ CẤU HÌNH DSN

DATABASE:

1/ Mở Microsoft Access.Click nút New sau đó click chọn mục Blank Database...

2/ Trong mục "Save in" hãy chọn thư mục "YotShop" trên Desktop của bạn. Trong hộp "File name" đánh vào tên Database mới là "YotShop.mdb". Click nút "Create".

43


3/ Chọn "Tables" , double click vào "Create table in design view" .

4/ Tạo các Field trong Database như sau:

ysID = AutoNumber (primary key)

design = Text

year = Text

price = Number

construction = Text

laying = Text

44

Bai tap co ban

brief_description = Memo

full_description = Memo

int_description = Memo

pic_thumb = Text

pic_ext = Text

pic_int = Text

5/ Mặc định trường Text cho phép 50 ký tự.Bạn có thể đặt trường Text tối đa lưu trữ 255 ký tự. Click chọn Field design và thay đổi "50" thành "100" trong Field Size của "General" panel.

Tại mục Allow Zero Length hãy chọn là Yes từ menu.

Hạy lập lại mục Allow Zero Length cho tất cả các trường "Text" và "Memo" trong database của bạn.

45


Trường Text có thể lưu giữ 255 ký tự. Trường Memo có thể lưu trữ đến 32,000 ký tự .

6/ Chọn trường price và chọn Long Integer trong Field size của General .

Long Integer cho phép lưu trữ số từ -2,147,438,648 đến 2,147,438,647 .Integer cho phép lưu trữ số từ -32,768 và 32,767. Byte cho phép lưu trữ số từ 0 và 255.

46

Bai tap co ban

7/ Vào menu "File" chọn "Save As" .

8/ Đánh tên YotStock và click "OK".

Hãy click chọn YotStock và chọn "Design View" từ menu như sau:

47


9/ Mở tập tin YotShopText.txt trong thư mục YotShop trên Desktop. Bạn sẽ thấy các văn bản cho thuyền "YACHT 1". Hãy Copy và paste các thông tin này vào các trường tương ứng.

Copy Design và dán vào trường design

Copy Year và dán vào trường year

Copy Price và dán vào trường price

Copy Construction và dán vào trường construction

Copy Laying và dán vào trường laying

Copy Brief Description và dán vào trường brief_description

Copy Full Descriptionvà dán vào trường full_description

Copy Interior Description và dán vào trường int_description

Copy Thumbnail và dán vào trường pic_thumb

Copy Exterior và dán vào trường pic_ext

48

Bai tap co ban

Copy Interior và dán vào trường pic_int

YACHT 1...

Design: Roberts 43

------

Brief Description:

The Roberts 43 is an ocean-going cruising yacht, this particular example being professionally built to a high standard, with extensive use of stainless steel in areas where wear and tear is expected. She has internal watertight collision bulkheads.

---------------------

Full Description:

She is constructed of 6mm steel below the waterline, 5mm on the topsides, and 3mm on deck, with extensive use of stainless steel in way of attachments for fittings, wear points, etc. She was surveyed for insurance purposes on completion, the survey report stating that "the steel plating had been expertly faired and filled, welds ground smooth, and well coated." The open-backed pilot house is fabricated entirely of stainless steel, and is arranged so that sheet winches can be handled from within the shelter. The entire foredeck around the anchor windlass is also stainless. Internally, she has two full watertight collision bulkheads.

--------------------

Interior Description:

The accommodation consists of a large double berth cabin aft, accessed via an internal walk-through passageway from the saloon, with an en-suite heads compartment with WC, basin and shower. In the saloon the chart table and U-shaped saloon table and seating are to port, with galley and another settee and pilot berth to starboard. Forward of this is a second heads, also with basin and shower, extensive locker and hanging space, and a forecabin with vee-berth.

-------------------

Year: 1996/7

Laying: Devon

Construction: Steel

Price: 85,000

------------------

Picture Paths ...

Thumbnail: stock/01roberts_thmb.jpg

Exterior: stock/01roberts_ext.jpg

Interior: stock/01roberts_int.jpg

10/ Database sẽ như sau:

49


11/ Copy thư mục "YotShop" trên Desktop vào thư mục "wwwroot" trên máy chủ của bạn.

CẤU HÌNH DSN (Data Source Name)

12/ Để cấu hình "DSN". Hãy mở "Control Panel" và double click vào biểu tượng "ODBC Data Sources" (bạn đang sử dụng Windows 98) . Nếu bạn xử dụng Windows XP Profesional khi bạn đang ở trong cửa sổ "Control Panel" hãy dbclick để mở Administrative Tool sau đó mới dbclick vào "ODBC Data Sources"

13/ Hãy chọn Tab "System DSN" và click nút "Add".

50

Bai tap co ban

13/ Hãy chọn "Microsoft Access Driver [*.mdb]" từ danh sách . Click nút "Finish".

14/ Cửa sổ "ODBC Microsoft Access Setup" sẽ mở ra.

Trong hộp "Data Source Name" nhập YotShop. Đây là tên mà chúng ta sẽ sử dụng sau này khi tạo kết nối DSN.

Click nút "Select" cửa sổ "Select Database" sẽ mở ra.

51


Double click vào "D:\" và browse tới thư mục "YotShop" trong thư mục "wwwroot".

Click chọn "YotShop.mdb" và click nút "OK" .

Trong cửa sổ "ODBC Microsoft Access Setup" click nút "OK" .

15/ Browse đến tập tin "YotShop.mdb" trong D:\inetpub\wwwroot\YotShop. Click OK.

16/ Click "OK" để đóng cửa sổ này lại.

Về đầu trang

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 1920 | 21 | 22 | 23

CẤU HÌNH WEBSITE TRONG DREAMWEAVER MX 2004

Trước khi muốn làm việc với các trang web động bạn phải cấu hình Dreamweaver MX 2004 theo một mô hình lập trình web động nào đó ví dụ như: ASP/VBScript , ASP.NET, PHP, JSP, COLD FUSION. Trong phần này bạn sẽ được hướng dẫn mô hình ASP/VBScript trong Dreamweaver MX 2004. Các mô hình khác sẽ được bàn luận sau trong một tài liệu khác

1/ Từ menu "Site" chọn Manage Site... , sau đó click nút New chọn Site .

52

Bai tap co ban

2/ Click chọn Tab "Advanced" và chọn mục "Local Info" từ menu Category list. Local Info xác lập các thông tin cho DW biết nơi làm việc của Site.

Trong hộp "Site Name" nhập YotShop' Trong hộp "Local Root Folder" click nút Browse (màu vàng ) và chọn thư

mục YotShop trên "desktop" của bạn. ĐỪNG CLICK NÚT OK VỘI.

53


3/ Chọn "Remote Info" từ Category list. Đây là nơi mà DMX hiểu là PWS hay IIS server được cài đặt nơi mà thư mục YotShop được đặt ở đó.

Chọn "Local / Network" từ menu "Access" .

4/ Trong hộp "Remote Folder" , click nút browse tới thư mục YotShop trong thư mục "wwwroot" trên máy chủ Local Web Server. (Đừng chọn thư mục YotShop trên màn hình.

ĐỪNG CLICK NÚT OK VỘI.

5/ Chọn "Testing Server" từ "Category" .

Trong hộp "Server Model" hãy chọn "ASP VBScript".

54

Bai tap co ban

Trong hộp "Access" chọn "Local / Network"

6/ Bạn sẽ nhìn thấy "Testing Server Folder" xuất hiện . Click Browse đến thư mục YotShop trong thư mục "wwwroot" trên Local Web Server (không phải thư mục "YotShop" trên desktop.

7/ Trong mục URL Prefix nhập vào địa chỉ web để kiểm tra (nếu bạn đặt thư mục YotShop khác thư mục wwwroot thì bạn phải tạo một thư mục ảo (Virtual Direcrtory) với bí danh là YotShop. Xin vui lòng xem cách tạo thư mục ảo trong IIS.

BÂY GIỜ BẠN CÓ THỂ CLICK NÚT OK

7/ Mở "Files" panel bằng cách click "Files".

55


8/ Hãy click nút Expand/Collapse để phóng to cửa sổ Site

Cửa sổ bên trái là Remote Site và cửa sổ bên phải là Local site. Click nút Expand/Collapse để thu nhỏ cửa sổ lại.

Bạn có thể chọn menu Local View để hiện các tập tin trong Local Site

Bạn có thể chọn menu Remote View để hiện các tập tin trong Remote Site

9/ Hãy chọn menu Local View sau đó click phải chuột vào site YotShop và từ popup menu chọn New File , đặt tên tập tin là view.asp và bạn hãy dbclick vào nó để mở tập tin này lên.

56

Bai tap co ban

10/ Chọn Panel Application , Click mục document type

Chọn mô hình ASP VBScript và click nút OK bạn sẽ thấy một dấu check được chọn.

Click mục Testing Server chọn OK bạn sẽ thấy dấu check xuất hiện trước số 3 (Nếu dấu check không xuất hiện thì có nghĩa là bạn chưa tạo ra được thư mục ảo ánh xạ

57


đến thư mục d:\inetpub\wwwroot\YotShop ) . Xin vui lòng xem cách tạo thư mục ảo.

11/ Trong tab "Database" của "Application" panel, click vào nút "+" và chọn "Data Source Name [DSN]".

12/ Bạn sẽ thấy xuất hiện cửa sổ "Data Source Name [DSN]" như sau:

Trong hộp "Connection Name" nhập YotShop

Từ menu "Data Source Name [DSN]" , chọn YotShop

Hãy chắc chắn rằng nút Radio "Using Local DSN" được chọn .

13/ Click nút "Test" nếu bạn thấy xuất hiện hộp thoại báo thành công là bạn đã thành công rồi đó. Click "OK" để lưu kết nối của bạn lại.

58

Bai tap co ban

14/ Bạn sẽ nhìn thấy một biểu tượng hình cái trống màu vàng trong Tab Database trong menu Application Panel điều này có nghĩa là đã có sự kết nối giữa Website và cơ sở dữ liệu.

Hãy chọn menu Files bạn sẽ thấy có một thư mục Connections được tạo ra chứa một tập tin YotShop.asp. Trong tập tin này chứa một chuổi kết nối (Connection String) đến Database của bạn.

Về đầu trang

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 1920 | 21 | 22 | 23

59


XÂY DỰNG CATALOGUE TRỰC TUYẾN CHO NGƯỜI ĐUA THUYỀN

TẠO TRANG STOCK LIST

1/ Hãy mở trang view.asp trong chế độ Design View , vào menu Modify chọn Page Properties.

60

Bai tap co ban

2/ Chèn một table có độ rộng 500 pixels với 2 dòng và 4 cột.

61


3/ Sử dụng công cụ Merge cell để tạo thành Table như sau :

4/ Chèn một ngắt dòng (Shift+Enter) phía dưới Table đầu tiên sau đó chèn thêm một Table nữa với 5 dòng 4 cột như sau:

Hãy Trộn hay tách Cell để có được dạng sau:

5/ Chèn Logo và các nhãn như sau:

62

Bai tap co ban

6/ Chọn Tab "Bindings" trong "Application" và click nút "+". Chọn "Recordset (Query)" từ menu.

7/ Đặt tên Recordset là YotShop. Chọn YotShop từ menu Connection và chọn Table YotStock từ Table. Chọn Radio All. Đặt Filter là None. Chọn ysID và Descending từ menu Sort.

63


8/ Click nút Test để kiểm tra.

9/ Chọn "Bindings" panel. Click nút + để mở rộng .

64

Bai tap co ban

10/ Đặt con trỏ kế nhãn Design: trong "Bindings" panel chọn design sau đó click nút "Insert" .

11/ Bạn sẽ nhì thấy {YotShop.design} bạn có thể chọn trường Text động này sau đó có thể định Font,Size,hay Color vv...

12/ Tương tự bạn có thể làm cho các trường còn lại như hình sau:

13/ Đặt con trỏ trong cell bên trên More Details vào Insert->Image.

65


14/ Trong cửa sổ Select Image Source chọn "Data sources" .Chọn "pic_thumb" và click nút "OK".

15/ Nhấn F12 để kiểm tra. Chọn Yes để cập nhật file trên Server kiểm tra.

66

Bai tap co ban

16/ Bây giờ chúng ta sẽ tạo một miền lặp lại "Repeat Region" để hiển thị tất cả các mẫu tin trong database . Hãy đánh dấu chọn các cell cần lặp lại như sau:

17/ Mở "Server Behaviors" panel, Click nút + chọn "Repeat Region".

18/ Từ hộp thoại "Repeat Region" Click chọn "All" và click OK.

67


19/ Bạn sẽ trông thấy một Table Lặp lại như sau:

20/ File -> Save. Nhấn F12 để kiểm tra thử kết quả.

Về đầu trang

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 1920 | 21 | 22 | 23

TẠO TRANG CHI TIẾT

1/ Mở trang "view.asp" đánh dấu chọn mục more details .

2/ Trong Tab "Server Behaviors" click nút "+" chọn "Go To Detail Page".

68

Bai tap co ban

3/ Trong hộp thoại "Go To Detail Page" bạn sẽ nhìn thấy tại mục Link là Selection:"more details" . Click nút Browse tới trang detail.asp trong mục Detail Page. Tại Pass URL Parameter đặt ysID. Chọn Recordset là YotShop và Column là ysID. Hãy chắc rằng checkbox URL Parameters được chọn. Click OK.

4/ Bây giờ bạn sẽ thấy mục more details đã bị link.

5/ Bây giờ hãy tạo trang detail.asp sau đó mở trang này lên và định thuộc tính cho trang tương tự như trong trang view.asp.Hãy chèn một Table 2 dòng 1 cột để chèn Logo và mục << Back

69


Sau đó chèn một Table 7 dòng 4 cột sau Table phía trên như sau:

7/ Từ Panel "Bindings" Click nút + chọn Recordset(Query)" từ menu.

8/ Trong cửa sổ "Recordset" điền các thông tin sau....Name = rsDetail Connection = YotShop Table = YotStock Columns = All Filter = ysID = URL Parameter ysID Sort = None

70

Bai tap co ban

Click nút "test" để kiểm tra. bạn sẽ được hỏi là phải nhập vào một giá trị. Nhập 1 là số ysID được lưu trữ trong database của bạn. Bạn sẽ nhìn thấy đúng Record mà bạn vừa mới nhập vào. Click OK -> OK lần nữa.

9/ Chuyển sang chế độ "Design" . Chọn nhãn "design" . Trong "Bindings" panel chọn design và click nút "Insert" để chèn trường Text động này ra.

10/ Lặp lại cho các trường còn lại như sau:

71


11/ Hãy chèn hình vào những chỗ đặt chữ pic như sau:

12/ Vào Insert-> Image chọn "Data Sources" . Chọn "pic_ext" click OK.

72

Bai tap co ban

13/ Lặp lại cho "pic_int" tại mục pic ở dòng sau:

73


14/ Hãy chọn mục Back sau đó tạo link tới trang "view.asp" . Hoặc bạn có thể nhập như sau vào hộp link javascript:history.go(-1)

15/ Hãy chọn trang "view.asp" và "detail.asp" và thư mục "Connections" click nút "Put Files" để Upload các thư mục và tập tin này vào thư mục "wwwroot/yotshop" trên local server.

16/ Mở trang view.asp nhấn F12 và click vào mục More Details để xem chi tiết về chiếc thuyền bạn sẽ thấy như sau:

74

Bai tap co ban

75


76

Bai tap co ban

Về đầu trang

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 1920 | 21 | 22 | 23

TẠO TRANG THÊM MẪU TIN

Trong trang này sẽ hướng dẫn cách bạn thêm các chiếc thuyền vào Database.

1/ Hãy tạo một trang mới...

2/ .... đặt tên là add.asp

3/ Mở trang add.asp . Hãy chọn Tab Form trên thanh tool bar sau đó click nút Form bạn sẽ thấy xuất hiện một dòng chấm có màu đỏ .

77


Chú ý rằng nếu bạn không thấy đường màu đỏ này thì hãy vào Edit > Preferences > Invisible Elements và check chọn Form Delimiter như hình dưới.

Trong lúc đang design nếu bạn cảm thấy khó chịu bạn có thể không cho hiện lên bằng cách click nút View Options chọn Hide All Visual Aids

4/ Chuyển sang Tab Common trên thanh tool bar , chọn chế độ Standard , click nút Table chèn vào một bảng 12 dòng 2 cột .

78

Bai tap co ban

5/ Hãy thiết kế như sau:

79


6/ Chuyển sang Tab Form click nút TextField để chèn vào một hộp Textbox kế nhãn "Design". (Xin vui lòng xem lại bài giảng sử dụng Form trong giáo trình thiết kế Web cơ bản với Dreamweaver MX 2004)

7/ Chọn "TextField" trong hộp thuộc tính hãy đặt tên cho Text Field là design có chiều dài CharWidth là 50.

80

Bai tap co ban

Chú ý quan trọng : Tên của Text Feild bạn đặt phải giống với tên của trường trong Database khi bạn thiết kế trong Access và bạn không đặt tên có khoảng trắng.

8/ Hãy chèn thêm 6 trường TextFields như sau: Year = year và 50 characters Laying = laying và 50 characters Price = price và 50 characters Pic Thumbnail = pic_thumb và 50 characters Pic Exterior = pic_ext và 50 characters Pic Interior = pic_int và 50 characters

9/ Trong Cell Construction hãy chèn một List/Menu từ "Forms" tool bar.

81


10/ Chọn "List/Menu" trong hộp thuộc tính đặt tên là construction sau đó click nút List Values để đặt các giá trị cho List menu.

11/ Hãy đặt nhãn Item Lable và Values bằng cách click nút "+" như sau:

Item Label ValueGRP GRPWood WoodSteel SteelAluminium AluminiumFerro Cement Ferro CementComposite Composite

82

Bai tap co ban

12/ Click nút Text Area để chèn một vùng nhập liệu dạng Scrolling Text Box vào Cell kế Brief Description

13/ Chọn Textarea trong hộp Properties hãy đặt các thuộc tính như sau: TextField = brief_description CharWidth = 43 Num Lines = 4 Wrap = Default Multi line = checked

14/ Tiếp tục chèn Textarea cho ô Full Description và Interior Description. Bạn hãy đặt tên cho các "Textarea" như sau :

Full Description = full_description Interior Description = int_description

83


15/ Đặt con trỏ trong cell cuối click nút Button trong Tab Form và hãy đặt nhãn cho nút là ADD RECORD và nhớ chọn kiểu nút là Submit Form.

84

Bai tap co ban

16/ Hãy chọn thẻ <form> trong vùng tag trước hộp Properties hãy đặt tên cho biểu mẫu là add_form và chọn phương pháp là POST . Hãy để trống Actions.

17/ Cuối cùng bạn có một Form nhập liệu như sau:

85


18/ Chúng ta sẽ dử dụng Insert Record behavior. Hãy click nút "+" trong "Server Behaviors" panel và chọn Insert Record.

19/ Trong hộp thoại Insert Record hãy đặt như sau: Từ menu Connection chọn YotShop Từ Insert Into Table chọn YotStock Trong After inserting Go To browse tới tập tin view.asp.

86

Bai tap co ban

Từ menu Get Values From chọn add_form

Chú ý: Nếu bạn đặt tên Field khác với tên field trong Database bạn sẽ thấy chữ "<ignore>" xuất hiện bây giờ bạn phải sửa lại tên của Text Filed trong Dreaweaver cho giống với tên Field trong Access.

20/ OK, File->Save sau đó chọn tập tin "add.asp" click nút "Put Files" để upload lên máy chủ.

21/ Nhấn F12 để kiểm tra .Bạn có thể mở tập tin YotShop Text.txt và copy các thông tin này để nhập thử dữ liệu vào Form ví dụ như sau:

87


Hãy kiểm tra xem thông tin bạn nhập vào đã được xuất ra trong trang View hay chưa ?

Bạn có thể thêm phần kiểm tra nhập liệu vào Form bằng cách sử dụng Behavior Validate Form ( Xin vui lòng xem bài 10 trong giáo trình thiết kế web cơ bản)

22/ Hãy chọn Form cần kiểm tra hợp lệ bằng cách đặt con trỏ trong Form , click chọn thẻ <form>như hình vẽ

23/ Vào Window->Behaviors bạn sẽ thấy xuất hiện Tab Behavior bên phải như bên dưới

88

Bai tap co ban

24/ Click + chọn Show Even For -> IE5.0

24/ Click + chọn Validate Form

89


25/ Trong hộp Name fields hãy chọn các field cần kiểm tra tính hợp lệ. Các bước như sau: chọn Field sau đó check chọn mục Required nếu muốn người dùng Web phải bắt buộc nhập vào trường này mới cho qua. Trong phần Access bạn có thể cho User nhập bất kỳ chuỗi nào bằng cách chọn Anything hay chỉ được phép nhập số Number. Nếu Field cần nhập phải là một địa chỉ Email thì bạn chọn kiểu Email address hoặc bạn có thể chỉ cho User nhập một số từ khoảng nào đến khoảng nào thôi Number From ? to ?

90

Bai tap co ban

91


92

Bai tap co ban

26/ Click OK để đóng hộp thoại Validate Form bạn sẽ thấy xuất hiện một menu như sau:

93


Trong đây bạn thấy xuất hiện một sự kiện onSubmit có nghĩa là khi User click nút xác nhận Form thì hành động Validate Form sẽ được gọi để kiểm tra tính hợp lệ trên Form. Bạn có thể click dấu " - " để bỏ sự kiện này đi nếu không thích kiểm tra.

Về đầu trang

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 1920 | 21 | 22 | 23

TẠO TRANG QUẢN TRỊ ( ADMIN PAGES)

1/ Tạo 4 tập tin mới với tên như sau trong Local Site: admin_view.asp delete1.asp confirm.asp admin_control.asp

2/ Mở trang admin_control.asp sau đó tạo 6 liên kết tới các trang web tương ứng như sau:

Add Record links to "add.asp" Delete Record links to "admin_view.asp" Edit Record links to "admin_view.asp" View Records links to "admin_view.asp" Home Stock List links to "view.asp

3/ Bây giờ hãy xây dựng nội dung cho trang xác nhận confirm.asp như sau :

94

Bai tap co ban

Đây là trang sẽ được hiện khi chúng ta Delete hay Edit thành công Record. Hãy tạo một Hyperlink cho quay về trang điều khiển "admin_control.asp"

4/ Nếu bạn muốn sau khi Xóa hay Sửa thành công thì sẽ tự động quay về trang điều khiển trong vòng bao nhiêu giây bạn hãy vào menu Insert->HTML->Head Tags->Refresh.

Trong cửa sổ Refresh nhập Delay là 3 sau đó click nút Browse tới trang admin_control.asp và click nút OK. File->Save để lưu trang lại.

5/ Mở trang admin_view.asp tạo một tiêu đề là ADMIN VIEW. Hãy tạo một Hyperlink phía dưới tiêu đề để quay về trang điều khiển admin_control.asp. Sau đó chèn một Table 4 dòng và 4 cột.

95


6/ Hãy tạo nhãn và trộn các cell để được như sau:

7/ Trong trang này hãy tạo một Recordset để hiển thị lại các thông tin trong Database bằng cách vào Panel Application chọn Bindding , Click + chọn Recordset (Query)

96

Bai tap co ban

8/ Hãy đặt các thông số cho Recordset như sau:Name = srAdViewConnection = YotShop Table = YotStock Columns = All Filter = None Sort = ysID Ascending

9/ Click nút "Test" bạn sẽ thấy tất cả các mẫu tin trong Database được liệt kê tăng dần (Ascending) theo ysID. Click OK để đóng cửa sổ test. File->Save để lưu trang.

97


10/ Bước kế tiếp bạn sẽ Bind các Field động vào các Cell tương ứng như sau:

11/ Chọn cell kế cuối vào Insert->Image. Chọn Data Sources. Chọn pic_thumb từ danh sách , click OK.

12/ Cuối cùng trang Admin View sẽ có giao diện giống như sau:

98

Bai tap co ban

13 / Hãy click nút Live Data View để xem thử dữ liệu

14/ Bây giờ chúng ta phải sử dụng một Behavior "Go To detail Page" để gởi thông tin của mẫu tin này qua trang xóa. Hãy đánh dấu chọn từ Delete, mở "Server Behaviors" panel, click nút "+" và chọn "Go To Detail Page" từ menu.

99


15/ Hãy đặt các thông số trong cửa sổ "Go To Detail Page" như sau: Link ...... cho biết Text được chọn là Delete?. Detail Page ..... click browse tới trang delete1.asp Pass URL Parameter ..... ysID Recordset ..... srAdView Column ....... ysID Pass Existing Parameters ...... chọn URL Parameters.

Click OK .

16/ Bạn sẽ thấy mục Delete? được đánh dấu màu xanh. Bạn đừng để ý đến mục Edit? (bạn sẽ được học cách sửa mẫu tin trong phần bài học kế).

100

Bai tap co ban

17/ Bây giờ ta phải tạo ra một vùng lập lại bằng cách đánh dấu chọn các cell như hình minh họa bên dưới . Sau đó chọn "Repeat Region" behavior từ "Sever Behaviors" panel.

18/ Trong cửa sổ Repeat Region chọn Recordset srAdView và chọn "All Records" . Hit OK.

19/ Bạn sẽ thấy một vùng Repeat như sau:

20/ Bạn có thể click nút Live Data View để xem thử vùng lặp lại . File->Save .

Về đầu trang

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 1920 | 21 | 22 | 23

TẠO TRANG XÓA (DELETE PAGE)

101


1/ Mở trang delete1.asp chèn một Form vào trang từ Tab Form như sau:

2/ Đặt con trỏ bên trong vùng màu đỏ (form delimiter) chèn một Table 4 dòng 4 cột như sau:

3/ Nhập các nhãn và trộn các cell sau đó chèn một nút "Submit" có nhãn là "DELETE NOW". như sau:

102

Bai tap co ban

4/ Trong trang này hãy tạo một Recordset để hiển thị lại các thông tin trong Database bằng cách vào Panel Application chọn Bindding , Click + chọn Recordset (Query)

5/ Hãy đặt các thông số cho Recordset như sau:Name = rsDeleteConnection = YotShop Table = YotStock Columns = All Filter ..... ysID = URL Parameter ysIDSort = ysID Ascending

103


5/ Bước kế tiếp bạn sẽ Bind các Field động vào các Cell tương ứng như sau:

7/ Bây giờ chúng ta phải sử dụng một "Delete Record" behavior bằng cách mở "Server Behaviors" panel, click nút "+" chọn "Delete Record" từ menu.

104

Bai tap co ban

8/ Trong cửa sổ "Delete Record" hãy đặt các thông số sau: Connection ........ YotShop Delete From Table ...... YotStock Select Record From .....rsDelete Unique Key Column ...... ysID .... Numeric Delete By Submitting .....form1 After Deleting Go To ........ browse tới trang confirm.asp

Click OK.

9/ Trang delete1.asp trông giống như sau:

105


10/ File->Save sau đó Upload trang admin_view.asp .... delete1.asp .... confirm.asp và admin_control.asp vào local server bằng cách click nút Put Files.

11/ Mở trang admin_control.asp , nhấn F12 sau đó click vào mục Delete Record để kiểm tra thử xem.

12 / Mở trang YotShop.asp trong thư mục Connections sau đó sửa chuổi kết nối đến Database như sau:

Nội dung cũ :

<%' FileName="Connection_odbc_conn_dsn.htm"' Type="ADO" ' DesigntimeType="ADO"' HTTP="false"' Catalog=""' Schema=""Dim MM_YotShop_STRINGMM_YotShop_STRING = "dsn=YotShop;"%>

Hãy sửa thành

<%' FileName="Connection_odbc_conn_dsn.htm"' Type="ADO"' DesigntimeType="ADO"' HTTP="false"' Catalog=""' Schema=""Dim MM_YotShop_STRINGMM_YotShop_STRING = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("YotShop.mdb")%>

Về đầu trang

106

Bai tap co ban

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 1920 | 21 | 22 | 23

TẠO TRANG SỬA MẪU TIN (EDIT PAGE)

Xây dựng trang "Edit" cũng gần giống như xây dựng trang "Delete" , một khác biệt lới là dữ liệu trong trang "Edit" là dữ liệu trong Database sẽ hiện ra trong các Field của Form và người sử dụng sẽ cập nhật (update) dữ liệu trực tiếp trên Form này. Trong phần này bạn cũng được hướng dẫn cách tạo một danh sách menu động (dynamic list menu) từ dữ liệu "Construction" .

1/ hãy tạo trang edit1.asp trong site.

2/ Mở trang edit1.asp , tạo một tiêu đề và Click nút Form từ Tab Form trên thanh Common

107


3/ Đặt con trỏ trong vùng đỏ vào tab Common click nút Table để chèn một Table 12 dòng 2 cột vào như sau:

3/ Hãy nhập các nhãn và trộn cell để được Table như sau:

108

Bai tap co ban

4 / Chuyển sang Tab Form click nút TextField để chèn vào một hộp Textbox kế nhãn "Design". (Xin vui lòng xem lại bài giảng sử dụng Form trong giáo trình thiết kế Web cơ bản với Dreamweaver MX 2004)

5/ Chọn "TextField" trong hộp thuộc tính hãy đặt tên cho Text Field là design có chiều dài CharWidth là 50.

109


Chú ý quan trọng : Tên của Text Feild bạn đặt phải giống với tên của trường trong Database khi bạn thiết kế trong Access và bạn không đặt tên có khoảng trắng. Nếu bạn không nhớ tên Field hãy vào Tab Database trong Panel Application để xem.

6/ Hãy chèn thêm 6 trường TextFields như sau: Year = year và 50 characters Laying = laying và 50 characters Price = price và 50 characters Pic Thumbnail = pic_thumb và 50 characters Pic Exterior = pic_ext và 50 characters Pic Interior = pic_int và 50 characters

7/ Click nút Text Area để chèn một vùng nhập liệu dạng Scrolling Text Box vào Cell kế Brief Description

110

Bai tap co ban

8/ Chọn Textarea trong hộp Properties hãy đặt các thuộc tính như sau: TextField = brief_description CharWidth = 43 Num Lines = 4 Wrap = Default Multi line = checked

9/ Tiếp tục chèn Textarea cho ô Full Description và Interior Description. Bạn hãy đặt tên cho các "Textarea" như sau :

Full Description = full_description Interior Description = int_description

111


10/ Hãy chèn một nút submit ở dòng cuối bằng cách click nút Button trên Tab Form sau đó chọn nút trên hộp Properties đặt Label cho nút là "Edit Now" .

112

Bai tap co ban

11/ Hãy tách cell kế Cell chứa nãhn Construction ra làm 2 như sau:

12 / Trong Cell kế nhãn Construction hãy chèn một List/Menu từ "Forms" tool bar.

13/ Chọn "List/Menu" trong hộp thuộc tính đặt tên là construction sau đó click nút List Values để đặt các giá trị cho List menu.

14/ Hãy đặt nhãn Item Lable và Values bằng cách click nút "+" như sau:

113


Bây giờ Form của bạn trông giống như sau:

15/ Hãy tạo một "Recordset" cho trang bằng cách chọn "Recordset" từ "Applications / Bindings" panel.

16/ Đặt các thông số cho recordset như sau:

Name = rsEditConnection = YotShopTable = YotStockColumns = ALLFilter = ysID = URL Parameter ysIDSort = NoneHit OK.

114

Bai tap co ban

17/ Bây giờ hãy "Bind" dữ liệu từ Database vào các Field. Click chọn trường "Design" , click vào "design" trong "Bindings" panel và click nút "Bind".

Hãy Bind các trường như sau:

Sau khi Bind xong bạn sẽ thấy trang như sau:

115


18/ Bây giờ hãy thêm "Update Record" behavior vào form. Trong "Applications" panel, click vào "Server Behaviors" tab, click nút "+" chọn "Update Record" từ menu.

116

Bai tap co ban

19/ Hãy cấu hình "Update Record" như cửa sổ bên dướiConnection = YotShop [tên của kết nối đến Database]Table To Update = YotStock [table cần cập nhật dữ liệu]Select Record From = rsEdit [Recordset dùng để cập nhật dữ liệu]Unique Key column = ysID [là khóa chính của bạn nó là giá trị số]After Updating Go To = confirm.asp [click nút Browse để chọn]Get Values From = form1 [là tên Form của bạn]

20/ File->Save để lưu trang này lại

21/ Bây giờ bạn hãy mở trang "admin_view.asp" , trong trang này hãy đánh dấu chọn text "Edit?". Trong "Server Behaviors" panel, click nút "+" và chọn "Go To Detail Page". Khi cửa sổ "Go To Detail Page" hiện ra hãy cấu hình như sau:

117


Link = Selection, "Edit?" [là giá trị mặc nhiên được xuất hiện cho biết Text đang bị Link]Detail Page = edit1.asp [gọi trang sữa dữ liệu]Pass URL Parameter = ysID [chuyển mã số của các thuyền qua trang edit1.asp]Recordset = srAdView [recordset hiện dữ liệu trong trang admin_view.asp]Pass Existing Parameters = URL Parameters tức checkbox phải được chọn. [Nếu truyền thông số từ Form thì chúng ta sẽ chọn hộp Form parameters ]

Click OK .

22/ Hãy File->Save để lưu trang này lại. Sau đó hãy Upload trang "edit1.asp" và trang "admin_view.asp" đến máy chủ bằng cách chọn "Files / Site" panel và click nút "Put Files" .

23/ Hãy mở trang admin_control.asp nhấn F12 để kiểm tra click mục Edit? để xem có cập nhật dữ liệu được không.

Vế đầu trang

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 1920 | 21 | 22 | 23

PHÂN TRANG (PAGING RECORDSETS)

1/ Mở trang view.asp trong Dreamweaver MX 2004. Click phải chuột vào table tại dòng đang chứa từ "Home". Chọn menu "Table" từ pop up menu và chọn "Insert Rows or Columns"

118

Bai tap co ban

2/ Hãy chèn vào 2 dòng bên dưới dòng menu ngang. Hit OK.

3/ Bạn sẽ nhìn thấy 2 dòng xuất hiện bên dưới table. Hãy trộn dòng đầu thành 1 cell bằng cách sử dụng nút "Merge Cells" trên hộp Properties panel.

4/ Nhập vào showing records x to x of x , <<Previous và Next>> như hình bên dưới.

5/ Mở "Server Behaviors" panel và double click vào dòng "Repeat Region (YotShop)".

119


6/ Trong cửa sổ "Repeat Region" tại mục"Show" bạn hãy nhập vào 2 (mỗi lần chỉ cho hiện 2 mẫu tin) . Hit OK.

7/ Mở "Bindings" panel. Chọn "x" sau mục "showing records" và sau đó click vào "[first record index]" . Click nút "Insert" .

120

Bai tap co ban

8/ Kết quả sẽ như sau:

9/ Chọn "x" sau "to" và click vào "[last record index]" . Click nút "Insert".

10/ Kết quả sẽ như sau:

11/ Chọn "x" sau "of" và sau đó click vào"[total records]" . Click nút "Insert".

121


12/ Click nút "Live Data View" để xem thử kết quả.

13/ Đánh dấu chọn <<Previous , hãy chọn "Recordset Paging" từ "Server Behaviors" panel và click "Move To Previous Record".

14/ Trong cửa sổ Move To Previous Record tại Link bạn sẽ thấy "<<Previous" được chọn và bạn hãy sử dụng "YotShop" recordset. Hit OK.

122

Bai tap co ban

15/ Đánh dấu chọn mục "Next>>", chọn "Recordset Paging" từ "Server Behaviors" panel và chọn "Move To NextRecord".

16/ Trong cửa sổ Move To Next Record tại Link bạn sẽ thấy "Next>>" được chọn và bạn hãy sử dụng "YotShop" recordset. Hit OK.

17/ Cuối cùng bạn sẽ thấy Table như sau:

18/ Tất cả đều tốt. Tuy nhiên bạn không muốn mục "<<Previous" xuất hiện khi mà không có Recordset để quay về (ví dụ bạn đang đứng ở trang đầu tiên thì chỉ cần có mục Next chứ không cần có Previous. Hãy đánh dấu chọn mục "<<Previous" . Từ "Server Behaviors" panel hãy chọn "Show Region" và chọn mục "Show Region If Not First Record".

123


19/ Một cửa sổ xuất hiện bạn hãy chọn Recordset "YotShop" . Hit OK.

20/ Mục "<<Previous" trong giống như sau:

21/ Tương tự cho mục Next nếu bạn đứng ở trang cuối cùng thì không cần xuất hiện Next mà chỉ cần có Previous. Hãy đánh dấu chọn mục "Next>>" . Từ "Server Behaviors" panel chọn "Show Region" và click vào "Show Region If Not Last Record".

124

Bai tap co ban

22/ Một cửa sổ xuất hiện bạn hãy chọn Recordset "YotShop" . Hit OK.

23/ Cuối cùng table của bạn trong giống như sau:

24/ File-> Save .Click nút "Put Files" để Upload trang view.asp lên máy chủ. Nhấn F12 để kiểm tra thử

125


Trong Dreamweaver MX 2004 bạn có thể chèn một thanh định hướng Recordset (Recordset navigation bar) và bộ đếm tình trạng của Recordset (Record counter) một cách tự động bằng cách sử dụng Recordset Navigation Bar và Recordset Navigation Status trong Tab "Application" từ "Insert" menu.

Về đầu trang

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 1920 | 21 | 22 | 23

TẠO TRANG TÌM KIẾM(SEARCH PAGE)

Trong phần này ta sẽ xây dựng trang tìm kiếm cho phép người dùng Web có thể chọn tìm theo chất liệu sản xuất thuyền (tìm theo Construction) và giá cả của thuyền (tìm theo giá cả Price trong khoảng từ đâu tới đâu)

126

Bai tap co ban

1/ Tạo một trang mới tên default.asp

2/ Mở trang default.asp và chèn một Table 4 dòng 3 cột và hãy trộn cell và tách cell để có được tạo giao diện như sau:

Home = No link Stock List = view.asp [đã tạo rồi] News = news.asp [sẽ tạo sau] Contact = contact.asp [sẽ tạo sau]

127


3/ Hãy đặt con trỏ trong cell dưới hình 1 bên trái sau đó chọn Tab Form và click nút Form để chèn vào một Form như hình bên dưới :

4/ Chọn Form sau đó đặt thuộc tính cho Form trên hộp Properties như sau: tên form là "search1", đặt thuộc tính "Action" là "results.asp" và phương pháp method là "POST".

5/ Click vào bên trong vùng màu đỏ (form delimiter) và chèn một Table "5 dòng x 1 cột width 100%, border 0, cell padding 2, cell spacing 2".

128

Bai tap co ban

6/ Table của bạn sẽ trông giống như sau:

7/ Nhập vào dữ liệu trong Cell như hình bên dưới :

8/ Tạo một "Recordset(Query)" từ "Server Behaviors" panel hoặc "Bindings" panel .

129


9/ Đặt thông số cho "Recordset" như sau: Name = rsHome Connection = YotShop Table = YotStock Columns = All Filter = None Sort = None

Hit OK. Recordset này sẽ sử dụng cho phần "Yacht Of The Week" sau.

10/ Click vào bên trong cell dưới mục search chọn Tab Form click nút "List/Menu" trong Forms toolbar.

130

Bai tap co ban

11/ Trong "Properties" panel, đặt tên cho "List/Menu" là "ysCon" và chắc chắn rằng radio "Menu" được chọn.

12/ Chọn "List/Menu" , trên hộp properties click nút "List Values" và nhập vào các giá trị như bên dưới :

Hit OK

131


13/ Trong "Properties Panel" chọn "GRP" trong hộp "Initially Selected" .

14/ Hãy chèn tiếp một "List/Menu" sau hộp search. Chọn "List/Menu" và đặt tên là "ysPrice" và chọn Radio "Menu" .

15/ Chọn List/Menu "ysPrice" và click nút "List Values" trên hộp Properties và nhập chính xác các giá trị sau như bên dưới:

Item Label Value

132

Bai tap co ban

Any Price BETWEEN 1 AND 2000000Up To £20000 BETWEEN 1 AND 19999£20000 TO £50000 BETWEEN 20000 AND 50000Over £50000 BETWEEN 50000 AND 2000000

Chú ý: BETWEEN và AND là 2 toán tử trong ngôn ngữ Truy vấn SQL (SQL query) mà nó sẽ được chuyển qua trang "results.asp". Trong trang kết quả chúng ta sẽ xây dựng một Recordset tìm kiếm các kết quả trả về trong một khoảng giá thích hợp .

16/ Trong "Properties Panel" chọn giá trị mặc định là "Any Price" trong "Initially Selected" .

17/ Cuối cùng chèn một nút "Submit" có nhãn là "Search" từ Tab Form.

133


18/ Trang của bạn trong giống như sau........

19/ File->Save . Nhấn F12 để kiểm tra thử giao diện.

Về đầu trang

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 1920 | 21 | 22 | 23

XÂY DỰNG TRANG KẾT QUẢ TÌM KIẾM (THE SEARCH RESULTS PAGE)

1/ Tạo trang results.asp.

2/ Mở trang results.asp. Chèn một Table 5 dòng 1 cột với độ rộng 500 pixels .

3/ Hãy tạo giao diện cho trang như sau:

134

Bai tap co ban

4/ Chèn thêm một table nữa bên dưới 5 dòng rows 4 cột với độ rộng 500 như sau:

5/ Cấu hình table như sau:

6/ Phía dưới Table này chèn một text "There are no results that match your search"

7/ Cuối cùng trang của bạn trong giống như sau:

135


8/ Tạo một recordset cho trang này.

9/ Cấu hình recordset theo các thông số như bên dưới: Name = rsResults Connection = YotShop Table = YotStock Columns = All Filter = price = Form Variable ysPrice Sort = price Ascending

ĐỪNG NHẤN NÚT TEST!

Hit OK

136

Bai tap co ban

10/ Mở "Bindings" panel và chèn dữ liệu vào như sau:

137


11/ Đặt con trỏ trong Cell trước More Details vào Insert-> Image . Chọn "Data Sources" và chọn "pic_thumb" từ danh sách. Hit OK.

12/ Highlight the text "more details" and select "Go To Detail Page" from the "Server Behaviors" menu.

138

Bai tap co ban

13/ Cấu hình "Go To Detail Page" như sau:

Link = Selection: "more details" [là thông số mặc nhiên] Detail Page = detail.asp [link tới trang chi tiết được tạo trong phần 2] Pass URL Parameter = ysIDRecordset = rsResults Column = ysID Pass Existing parameters = check URL Parameters box.

Hit OK.

14/ Chọn tất cả các cell trong Table kết quả. Vào "Server Behaviors" panel và chọn "Repeat Region".

139


15/ Trong hộp "Repeat Region" chọn show 10 records at a time và hit OK.

16/ Click chọn Table kết quả chọn "Server Behaviors" panel và chọn "Show Region" và chọn "Show Region If Recordset Is Not Empty".

17/ Trong cửa sổ hãy chọn recordset đang sử dụng. Hit OKTiến trình này sẽ dấu bảng kết quả nếu tìm trong Datbase không có Recordset.

18/ Đánh dấu chọn mục "There are no results that match your search" và từ "Server Behaviors" panel chọn "Show Region" và chọn "Show Region If Recordset Is Empty".

140

Bai tap co ban

Hãy chọn recordset đang sử dụng. Hit OK.Mục "There are no results that match your search" sẽ chỉ xuất hiện khi không có mẫu tin trong recordset.

19/ Chọn mục "Next>>" vào "Server Behaviors > Recordset Paging > Move To Next Record"

20/ Chọn Recordset và click OK

21/ Chọn "<<Previous" vào "Server Behaviors > Recordset Paging > Move To Previous Record"

141



23/ Chọn "<<Previous" vào "Server Behaviors > Show Region > Show Region If Not First Record"


25/ Chọn "Next>>" vào "Server Behaviors > Show Region > Show Region If Not Last Record"


142

Bai tap co ban

26/ Trang của bạn bây giờ trông giống như sau:

TA KHÔNG NÊN KIỂM TRA TRANG NÀY ... VẪN CÒN NHIỀU VIỆC ĐỂ LÀM TRONG TRANG NÀY

27/ File->Save.

Về đầu trang

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 1920 | 21 | 22 | 23

VIẾT SQL CHO TRANG KẾT QUẢ (SEARCH RESULTS SQL)

SQL (Structured Query Language) là ngôn ngữ truy vấn dữ liệu chuẩn trong các hệ thống cơ sở dữ liệu (Database management systems - DBMS) .

Xin vui lòng xem thêm giáo trình SQL

1/ Mở trang "results.asp" . Vào "Server Behaviors" panel và double vào "Recordset(rsResults)" để mở Recordset.

143


2/ Trong cửa sổ "Recordset" click vào nút "Advanced..." để chuyển sang chế độ Recordset nâng cao.

3/ Trong cửa sổ Advanced Recordset bạn sẽ thấy như sau:

MMCollParam là một biến (Variable) do Dreamweaver MX 2004 tự động tạo ra được sử dụng trong truy vấn tìm giá (price) khi chúng ta cài đặt mục lọc Filter parameters trong chế độ Recordset đơn giản (Simple View).

Default Value là 1 là giá trị do Dreamweaver MX 2004 gán cho mục đích kiểm tra biến "Variable".

144

Bai tap co ban

Request.Form("ysPrice") dùng để lấy giá trị từ trường Form drop down menu "ysPrice" và nó được gán vào truy vấn tìm giá của chúng ta.

4/ Để thêm một biến của chúng ta hãy click nút + trong phần Variables . Một hộp xuất hiện và trong cột Name hãy nhập vào tên biến mới là ysCon . Trong mục Default Value nhập GRP.Cuối cùng , click vào Run-Time Value và nhập Request.Form("ysCon")

145


5/ Bây giờ chúng ta sẽ viết lại định nghĩa SQL trong Dreamweaver MX 2004. Hãy nhớ lại trong trang 4 chúng ta đã cài đặt một khoảng giá trong menu tìm kiếm bằng định nghĩa BETWEEN và AND ? Bởi vì chúng ta có 4 khoảng giá tìm kiếm,

SELECT * [* chọn tất cả các cột]FROM YotStock [YotStock là tên của bảng trong database]WHERE price = BETWEEN 1 AND 19999 [khoảng giá cần tìm]

Thật không may là bạn không thể gán dấu "=" trước toán tử BETWEEN. Và vì thế chúng ta phải xóa dấu bằng và viết lại như sau:

SELECT * [* chọn tất cả các cột]FROM YotStock [YotStock là tên của bảng trong database]WHERE price MMColParam [khoảng giá cần tìm]

SELECT* FROM YotStock WHERE price MMColParam AND construction = 'ysCon'

ĐỪNG CLICK NÚT TEST .

Click nút OK và save trang lại.

6/ Click nút "Put Files" để Upload trang results.asp và trang default.asp vào máy chủ.Mở trang default.asp, nhấn F12 để kiểm tra thử kết quả tìm kiếm xem sao.

Về trang chủ

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 1920 | 21 | 22 | 23

146

Bai tap co ban

PHÂN QUYỀN QUẢN TRỊ (ADMIN ACCESS LEVEL)

Trong các phần học trước chúng ta đã xây dựng các trang trong phần quản trị bao gồm các trang như sau:

admin_control.asp : Đây là trang điều khiển chính (control pane) với đầy đủ chức năng của người quản trị.

add.asp : Đây là trang cho phép thêm các thuyền vào Database.

admin_view.asp : Trong trang này chúng ta có thể xem tất cả các thuyền trong Database. Cũng trong trang này chúng ta có thể chọn các thuyền trong Database để cập nhật hay xóa chúng.

admin_delete1.asp : Đây là trang cho phép chúng ta xóa thuyền trong Database.

admin_edit1.asp : Đây là trang cho phép chúng ta cập nhật thông tin của thuyền trong database.

confirm.asp : Đây là trang xác nhận thành công khi chúng ta thêm,cập nhật hay xóa một chiếc thuyền.

Trong phần học này chúng ta sẽ xây dựng thêm một số trang như sau:

admin_login.asp: Nơi chứng nhận user log in vào trang quản trị.

admin_login_fail.asp : Khi một người nào đó cố gắng login vào phần quản trị không được thì họ sẽ gặp thông báo lỗi trong trang này.

admin_view_users.asp : Cho phép người quản trị có thể xem thông tin về usernames và passwords của tất cả các thành viên đã đăng ký. Cũng từ trang này người quản trị có thể chọn để xóa các thành viên.

admin_register_user.asp : Đây là trang cho phép đăng ký thành viên quản trị mới và gán cho họ quyền truy cập thích hợp dựa vào bộ phận họ đang làm việc.

admin_username_exists.asp : Đây là trang thông báo lỗi khi có một user đăng ký trùng với tên của một user đã đăng ký rồi.

admin_delete_user.asp : Cho phép chúng ta xóa user đã đăng ký ra khỏi Database.

admin_access_denied.asp : Đây là trang thông báo lỗi khi một người nào đó cố gắng truy cập vào bất kỳ trang quản trị nào mà không logging vào.

admin_control_2.asp : Đây là trang điều khiển thứ 2 (Level 2) cho phép đăng ký user quản trị (người không có quyền ở mức 1 (level 1) ).

add2.asp : Trang cho phép thêm thuyền cho các user ở mức độ bảo mật thứ 2 (level 2) .Bạn có thể tạo trang từ bằng cách Copy từ trang "add.asp" và thay đổi một số liên kết quay về trang điều khiển.

Tóm lại trong phần này chúng ta sẽ tạo ra 2 mức độ truy cập cho phần quản trị.

Level 1 users (ví dụ IT Manager) có quyền truy cập tới bất kỳ chức năng quản trị nào của admin.

Level 2 users (ví dụ Sales Manager) chỉ được phép truy cập vào phần quản trị thêm thuyền vào Database.

147


Tất cả các trang trong phần Admin đều được bảo vệ mật khẩu và chỉ có những người có quyền quản trị thích hợp (Access Level) mới vào được.

Phòng bán hàng có thể cắt giảm bớt các mẫu tin mà họ đã thêm vào và họ có thể xem tình trạng tồn kho.

Trong phần học này chúng ta chỉ xây dụng 2 mức độ bảo mật , sau này bạn có thể xây dựng thêm nhiều cấp độ bảo mật tùy theo nhu cầu của công ty của bạn.

Về đầu trang

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 1920 | 21 | 22 | 23

TẠO TABLE LOGIN

1/ Đầu tiên chúng ta sẽ tạo một Table mới trong tập tin "YotShop.mdb" database. Mở database và double click vào chọn chế độ "Create table in design view".

2/ Set up a new table as shown below.

userID --- AutoNumber --- primary key. username --- text --- Field Size 50 password --- text --- Field Size 50 security --- Number ---Long Integer

3/ File > Save As và đặt tên bảng là login

148

Bai tap co ban

4/ Database của bạn trông giống như sau:

5/ Dbclick vào bảng login để mở lên nhập liệu vào

6/ Nhập vào 2 user như sau ... File -> Save để lưu Database lại.

7/ Click phải chuột vào Site Files folder và chọn New File từ menu. Đặt tên tập tin là admin_access_denied.asp.

8/ Tiếp tục tạo các trang như sau ...

admin_access_denied.asp

admin_control_2.asp

admin_delete_user.asp

admin_login.asp

admin_login_fail.asp

admin_register_user.asp

149


admin_username_exists.asp

admin_view_users.asp

Về đầu trang

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 1920 | 21 | 22 | 23

TẠO LOGIN (LOG IN ADMIN USERS)

1/ Mở trang admin_login.asp tạo một tiêu đề thích hợp (ví dụ Yot Shop Admin Log In). Chèn một Form Delimiters như sau:

150

Bai tap co ban

2/ Click vào bên trong "Form Delimiter" và chèn một Table như sau:

3/ Trong cell kế Username, chèn một "Text Field" có độ rộng 40 characters và đặt tên là username (chính xác với tên trong database).

4/ Trong cell kế Passwordl, chèn một "Text Field" có độ rộng 40 characters và đặt tên là password (chính xác với tên trong database).

151


5/ Chèn một nút có nhãn tên Log In.

6/ Mở "Applications" panel và click vào "Server Behaviors" tab. Click "+" và chọn "User Authentication > Log In User"

152

Bai tap co ban

7/ Trong cửa sổ "Log In User" cấu hình các thông số sau:

Get Input From Form = form1 (Đây là tên của Form) Username Field = username (tên trường của Form) Password Field = password (tên trường của Form) Validate Using Connection = YotShop Table = login Username Column = username (tên Field trong Database) Password Column = password (tên Field trong Database) If Login Succeeds, Go To = admin_control_2.asp If Login Fails, Go To = admin_login_fail.asp Restrict Access Based On = Username Password và Access Level Get Level From = security

153


Sau khi OK bạn sẽ thấy xuất hiện một Server Behavior tên là Log In User , bạn có thể dbclick vào đây để mở lên hộp thuộc tính bên trên để chỉnh sữa nếu muốn.

8/ Mở trang admin_login_fail.asp nhập vào nội dung như bên dưới. Trong trang này chúng ta cũng tạo một Hyperlink quay về trang admin_login.asp.

154

Bai tap co ban

9/ Bây giờ chúng ta sẽ chèn "Refresh" tag để tự động hướng user (Redirect) đến trang admin_login.asp. Vào Insert->HTML->Head Tags-> Refresh

10/ Trong cửa sổ "Refresh" đặt "Delay" là 5 seconds và đặt "Go To URL" đến trang "admin_login.asp". Click OK. Người sử dụng sẽ được hướng tới trang admin_login.asp sau 5 giây.

File->Save

11/ Mở trang "admin_control_2.asp". Thiết kế trang như bên dưới.Trong trang có 2 Hyperlink đến trang "add2.asp" (Add New Yacht To Stock) và "view.asp" (View Stock List).

155


12/ Chọn Add New Yacht To Stock tạo link tới trang add2.asp (sẽ tạo trang này sau)

13/ Chọn View Stock List tạo link tới trang view.asp (sẽ tạo trang này sau) , đặt "Target" là "_Blank" để mở trang này trong cửa sổ mới.

14/ Bây giờ chúng ta sẽ giới hạn quyền truy cập vào trang admin_control_2.asp. Vào "Server Behaviors" panel chọn "User Authentication > Restrict Access To Page".

15/ Chọn "Username, Password, and Access Level" radio button. Sau đó chọn 2 trong hộp "Select Levels" . Nếu trong hộp Select Level(s) chưa có thì bạn hãy click nút Define để định nghĩa ra các mức độ truy cập bằng cách click nút + sau đó nhập vào mức độ truy cập tại hộp Name. Trong "If Access Denied, Go To" browse tới trang admin_control.asp.

156

Bai tap co ban

Sau khi OK bạn sẽ thấy xuất hiện một Server Behavior tên Restrict Access To Page để giới hạn quyền truy cập vào trang admin_control_2.asp

Nhắc lại là : Một user khi Login vào sẽ bị gán một trong hai mức độ truy cập. "1" (full

access) hoặc "2" (restricted access). Các user được hướng tới trang "admin_control_2.asp" có mức truy cập thấp

nhất (mức 2). Nếu họ có mức truy cập là "2", thì trang "admin_control_2.asp" sẽ vào

được trang này. Nếu họ có mức truy cập là "1" thì họ không vào trang

"admin_control_2.asp" . mà vào trang "admin_control.asp (là trang điều khiển chính vì chỉ có user admin mới có quyền vào trang này mà thôi - chú ý :user admin có mức độ truy cập cao nhất Level 1).

Thực chất là ở đây chúng ta sử dụng một phát biểu rất cơ bản đó là "If - Then - Else" . NẾU mức độ bảo mật là 2 THÌ chọn trang admin_control_2.asp NGƯỢC LẠI thì chọn trang admin_control.asp.

Nếu bạn có 10 mức độ bảo mật, bạn có thể cho người sử dụng đi đến trang tương ứng với mức độ bảo mật của họ.

Bạn hãy dành thêm một ít thời gian để suy nghĩ thêm về điều này.

157


16/ Trong bước này chúng ta sẽ tạo trang "add2.asp" . Đơn giản nhất là bạn hãy mở trang "add.asp" và thay đổi Link của mục "Admin Control" sang trang "admin_control_2.asp".

17/ Sau đó bạn hãy đặt mức độ bảo mật truy cập vào trang add2.asp bằng cách vào "Server Behaviors" panel chọn "User Authentication > Restrict Access To Page". Chọn nút Radio "Username, Password, and Access Level". Sau đó chọn "2" trong hộp "Select Levels" . Trong mục "If Access Denied, Go To" hãy browse tới trang "admin_access_denied.asp". Click OK.

Bạn sẽ thấy xuất hiện Restrict Access To Page trong trang này

18/ vào "File" chọn "Save As".

158

Bai tap co ban

19/ Đặt tên là "add2.asp".

20/ Mở trang "admin_access_denied.asp" thiết kế giao diện như bên dưới.

21/ bây giờ chúng ta sẽ chèn "Refresh" tag để tự động hướng user (Redirect) đến trang admin_login.asp. Vào Insert->HTML->Head Tags-> Refresh

22/ Trong cửa sổ "Refresh" đặt "Delay" là 5 seconds và đặt "Go To URL" đến trang "admin_login.asp". Click OK. Người sử dụng sẽ được hướng tới trang admin_login.asp sau 5 giây.

159


File->Save.

Bây giờ hãy Upload tất cả các trang lên máy chủ.

Mở trang admin_login.asp lên nhấn F12 để kiểm tra thử cho nhận xétMở trang add2.asp lên nhấn F12 để kiểm tra thử cho nhận xét

Về đầu trang

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 1920 | 21 | 22 | 23

TẠO NGƯỜI DÙNG MỚI (NEW USER)

1/ Mở trang admin_register_user.asp chèn vào trang một tiêu đề thích hợp sau đó chèn một "Form Delimiter" bằng cách vào Tab Form click nút Form như hình bên dưới.

2/ Click vào bên trong dòng "Form Delimiter" và chèn vào một table. Cấu hình table như bên dưới.

160

Bai tap co ban

3/ Trong cell "Username", chèn một "Text Field" có độ rộng 40 characters từ Tab Form. Đặt tên Text Field là username (hãy đặt tên giống với tên trường trong Database Access).

4/ Trong cell "Password", chèn một "Text Field" có độ rộng 40 characters. Đặt tên Text Field là password (hãy đặt tên giống với tên trường trong Database Access).

161


5/ Trong cell "Security Clearance" chèn một "List / Menu" như bên dưới và đặt tên là "security" (hãy đặt tên giống với tên trường trong Database Access).

6/ Chọn "List / Menu" , click nút "List Variables" trong "Properties" panel. Nhập Select Level trong cột Item Label Click "+" Nhập IT Admin trong cột Item Label và cho giá trị là 1 trong cột Value. Click "+" Nhập Sales trong cột Item Label và cho giá trị là 2 trong cột Value Hit OK

162

Bai tap co ban

7/ Trong hộp "Properties" panel , trong hộp "Initially Selected" , chọn "Select Level"

8/ Chèn một nút Submit vào bằng cách click nút Button trên Tab Form như sau:

163


Sau cùng bạn sẽ có giao diện như sau:

9/ Trong Panel "Server Behaviors" Click + chọn "Insert Record".

10/ Cửa sổ "Insert Record" xuất hiện. Hãy cấu hình như bên dưới:

Connection = YotShop. Insert Into table = login (là Table trong database) After Inserting Go To = admin_control.asp Get Values From = form1 (tên của Form bạn phải đặt chính xác)

Trong hộp "Form Elements" nếu bạn thấy từ "<ignore>" có nghĩa là bạn đã đặt sai tên của Field trong Form với tên trường trong Database của bạn.Hãy quay lại sửa lỗi này cho đúng tên. Click OK

164

Bai tap co ban

11/ Trong "Server Behaviors" chọn "User Authentication > Check New Username"

12/ Trong "Username Field" chọn "username". Trong "If Already Exists Go To" click nút browse tới trang "admin_username_exists.asp". Click OK.

165


13/ TRong "Server Behaviors" menu chọn "User Authentication > Restrict Access To Page"

14/ Chọn nút Radio "Username, Password, and Access Level" . Chọn "1" trong hộp "Select Level" . Click Browse tới trang "admin_access_denied.asp" trong hộp "If Access Denied Go To" .

15/ Form của bạn trông giống như sau:

16/ Panel "Server Behaviors" của bạn trông giống như sau:

166

Bai tap co ban

File->Save. Nhấn F12 kiểm tra thử.

17/ Mở trang "admin_username_exists.asp" thiết kế như sau:

19/ Vào menu "Insert" chọn "HTML->Head Tags > Refresh".

20/ Set the "Delay" at 5 seconds and the URL as "admin_register_user.asp".

167


21/ TRong "Server Behaviors" menu chọn "User Authentication > Restrict Access To Page"

22/ Chọn nút Radio "Username, Password, and Access Level" . Chọn "1" trong hộp "Select Level" . Click Browse tới trang "admin_access_denied.asp" trong hộp "If Access Denied Go To" .

23/ Panel "Server Behaviors" của bạn trông giống như sau:

File->Save. Nhấn F12 kiểm tra thử.

Về đầu trang

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 1920 | 21 | 22 | 23

XÓA NGƯỜI DÙNG (DELETE USER)

1/ Mở trang "admin_view_users.asp" .

168

Bai tap co ban

2/ Tạo một tiêu đề thích hợp sau đó chèn một siêu liên kết cho quay về trang điều khiển Admin "admin_control.asp" . Hãy chèn một Table và cấu hình như bên dưới.

3/ Vào menu Server Behaviors hoặc Bindings panel , Chọn "Recordset (Query)".

4/ Cấu hình Recordset như sau....

Name = rsUserView

Connection = Yotshop

Table = login

Columns = All

Filter = None

Sort = None

Click OK

169


5/ Mở "Bindings" panel. Click vào bên trong cell "Username", click vào "username" trong panel và click nút "Insert".

6/ Lặp lại tiến trình trên cho cell "Password" và cell "Security Level" .

7/ Click nút "Live Data View" để kiểm tra thử dữ liệu bạn sẽ thấy như sau:

170

Bai tap co ban

8/ Chọn mục "delete?" sau đó chọn "Go to Detail Page" từ menu "Server Behaviors".

9/ Trong cửa sổ "Go To Detail Page" hãy đặt các thông số sau:

Link = Selection: "delete?" (văn bản bạn đang chọn)

Detail Page = admin_delete_user.asp (click nút browse để chọn)

Pass URL Parameter = userID (Khóa chính trong bảng)

Recordset = rsUserView (recordset)

Column = userID

Pass Existing Parameters = check "URL Parameters"

Hit OK

171


10/ Bây giờ hãy cẩn thận drag chuột đánh dấu chọn tất cả các cells của table . Sau đó chọn "Repeat Region" từ "Server Behaviors" panel.

11/ Trong hộp "Repeat Region" chọn "All records" . Hit OK.

12/ Từ menu "Server Behaviors" chọn "User Authentication > Restrict Access To Page"

172

Bai tap co ban

13/ Chọn nút Radio "Username, Password, and Access Level". Chọn "1" trong hộp "Select Level" . Browse tới trang "admin_access_denied.asp" trong trường "If Access Denied Go To".

14/ Table của bạn trong giống như sau:

15/ "Server Behaviors" panel của bạn trông giống như sau:

173


File->Save. Bạn có thể nhấn F12 để kiểm tra thử.

16/ Mở trang "admin_delete_user.asp" .

17/ Tạo một tiêu đề thích hợp. Sau đó chèn một "Form Delimiter" như bên dưới.

18/ Click vào trong dòng "Form Delimiter" và chèn vào một table. Hãy cấu hình Table như hình vẽ bên dưới

174

Bai tap co ban

19/ Từ menu "Bindings" chọn "Recordset (Query)".

20/ Đặt các thông số cho recordset như sau:

Name = rsDelAdmin

Connection = YotShop

Table = login

Columns = All

Filter = userID = URL Parameter userID (thông số được chuyển từ trang admin_view_users.asp)

Sort = None

Hit OK

175


21/ Bây giờ hãy chèn dữ liệu vào các cell thích hợp (click vào cell > click vào mục trong Bindings panel > Click Insert)

22/ Chọn Tab Form , Click nút Button để chèn vào một nút. Chọn nút sau đó đặt nhãn cho nút là "DELETE NOW?" và chọn Action cho nút là Submit Form

23/ Chọn "Delete Record" từ menu "Server Behaviors" .

176

Bai tap co ban

24/ Trong cửa sổ "Delete Record" đặt các thông số như sau:

Connection = YotShop

Delete from Table = login

Select Record From = rsDelAdmin

Unique Key Column = userID

Delete By Submitting = form1

After Deleting go to = admin_control.asp

Hit OK

Bạn sẽ thấy trang của bạn như sau:

177


Trong Tab Server Behavior của bạn như sau:

25/ Từ menu "Server Behaviors" chọn "User Authentication > Restrict Access To Page" trong cửa sổ xuất hiện chọn nút Radio "Username, Password, and Access Level" . Chọn "1" trong hộp "Select Level". Click nút Browse tới trang "admin_access_denied.asp" trong vùng "If Access Denied Go To".

File->Save. Nhấn F12 để kiểm tra thử.

Về đầu trang

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 1920 | 21 | 22 | 23

BẢO VỆ TRANG WEB NHIỀU CẤP ĐỘ (PROTECT PAGES FOR MULTI LEVELS)

178

Bai tap co ban

1/ Trong suốt phần học này chúng ta đã đặt mật khẩu bảo vệ cho trang web theo mức độ truy cập của User (User level) bằng cách chọn "User Authentication > Restrict Access to Page" từ menu "Server Behaviors" ...

2/ và cài đặt mức độ truy cập thích hợp như sau:

3/ Bây giờ bạn hãy đặt mức truy cập cho tất cả các trang trong phần Admin theo như yêu cầu bên dưới (một vài trang chúng ta đã làm rồi bạn hãy thực hiện cho các trang chưa làm)

add.asp = level 1 add2.asp = level 2 admin_access_denied.asp = no protection admin_control.asp = level 1 admin_control_2.asp = level 2 admin_delete_user = level1 admin_login.asp = no protection admin_login_fail.asp = no protection admin_register_user = level 1 admin_username_exists = level 1 admin_view.asp = level 1 admin_view_users.asp = level 1 confirm.asp = level 1 delete1.asp = level 1 edit1.asp = level 1

4/ Cuối cùng bạn hãy mở trang "admin_control.asp" và thêm một số liên kết sau:

View All Admin users = admin_view_users.asp

Register New Admin User = admin_register_user

Delete Admin User = admin_view_users.asp (từ đây chúng ta sẽ chọn mục xóa)

179


5/ Save tất cả các trang sau đó Upload chúng lên máy chủ và mở trang admin_control.asp để kiểm tra thử.

Về đầu trang

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 1920 | 21 | 22 | 23

GỞI MAIL (SEND MAIL)

Trong phần này chúng ta sẽ học các vấn đề sau.... Gởi mail (Sending email) trực tiếp đến máy chủ của bạn sử dụng ASP và

CDONTS (Collaboration Data Objects for NT Server) Gởi mail từ máy chủ của bạn và cập nhật database vào cùng một thời gian. Sử dụng thành phần có sẳn của ASP (Ad Rotator Component) để tạo Banner

quảng cáo động . Sử dụng Content Rotator Component để hiển thị chú thích từ một tập tin

văn bản.

Chú ý:

Bạn không thể kiểm tra tiến trình gởi mail trực tiếp trên PWS!

CDOmail sử dụng SMTP (Simple Mail Transfer Protocol) để gởi mail từ máy chủ. Đây là một thành phần chuẩn của Microsoft Internet Information Server (IIS).

Ở đây có một vài điều cần chú ý mà bạn nên kiểm tra với máy chủ của bạn trước khi bạn cố gắng sử dụng CDOmail.

Máy chủ của bạn có cung cấp CDONTS ? Một vài hãng thứ ba sử dụng ASP mailers chẳng hạn như JMAIL, ASPmail hoặc Abmailer. Thật may mắn là tất cả đều tương tự nhau.

Bạn phải kiểm tra xem SMTP đã có cài đặt trên máy chủ hay chưa ?. Nếu không bạn không thể giởi mail tới bất kỳ nơi đâu!

Nếu bạn gặp một báo lỗi như sau:Microsoft VBScript runtime error '800a01ad'

ActiveX component can't create object: 'CDONTS.NewMail' Điều này có nghĩa là CDONTS chưa cài đặt trên máy chủ của bạn.

180

Bai tap co ban

Chú ý:

Nếu bạn đang sử dụng PWS như là một máy chủ cục bộ thì bạn sẽ không kiểm tra được phần tạo Banner AD. Bạn sẽ gặp một báo lỗi như sau:

Server object error 'ASP 0177 : 800401f3'Server.CreateObject Failed

/content.asp, line 5800401f3

Nếu bạn sử dụng IIS thì bạn có thể kiểm tra được Banner AD.

TẠO BIỂU MẪU LIÊN LẠC (THE CONTACT FORM)

1/ Tạo 4 tập tin ASP trống và đặt tên như sau: contact_form.asp contact_newsletter.asp contact_thanks.asp contact_post1.asp

2/ Mở trang "contact_form.asp" vào Modify->Page Properties để cấu hình ảnh nền.Sau đó chèn một bảng 4 dòng 3 cột, độ rộng 750 pixels , border=0, cell padding= 2, cell spacing = 2.

3/ Hãy tạo giao diện cho trang như bên dưới.

181


4/ Hãy chèn một Form trong Cell ở giữa như sau:

5/ Click vào bên trong dòng form delimiter và chèn một table gồm 5 dòng và 2 cột. Hãy cấu hình như bên dưới

182

Bai tap co ban

6/ Chèn một Text fields, độ rộng 40 characters vào trong cell Name và E mail. Hãy đặt tên cho text field Name là name và text field E-Mail là email.

7/ Trong Cell Message chèn một Multi Line Textarea có độ rộng 36 characters và 5 dòng với tên là message.

8/ Chèn một submit button vào dòng cuối với nhãn là "Send".

183


9/ Click vào bất kỳ nơi nào trong form delimiter. Bạn sẽ nhìn thấy tag <form> xuất hiện trên thanh chọn tag (tag selector bar) . Click chọn tag <form> ....

10/ Trong hộp thuộc tính cấu hình như sau: Đặt tên form là contact Chọn phương pháp là POST Trong truờng action browse tới tập tin contact_post1.asp

184

Bai tap co ban

11/ Trang của bạn sẽ trông giống như sau. Bạn có thể nhập vào địa chỉ bất cứ nơ nào mà bạn thích.

File->Save. Nhấn F12 kiểm tra thử kết quả của bạn

12/ Tạo đối tượng mail

TẠO ĐỐI TƯỢNG MAIL MỚI (CDONTS. NEWMAIL)

CDONTS.NEWMAIL là một đối tượng của IIS dùng để gởi mail.Trong phần này chúng ta sẽ học các cú pháp khi sử dụng đối tượng CDONTS.NEWMAIL .

Dreamweaver MX 2004 không tự tạo được code gởi mail sử dụng CDONTS , do đó muốn làm được điều này bạn phải viết script bằng tay mà thôi.

Đây là một số ví dụ sử dụng CDONTS mailing script ....

Example 1: test1.asp

<% @language="VBSCRIPT" %><%Dim myMailSet myMail = Server.CreateObject ("CDONTS.NewMail")myMail.From = "[email protected]"myMail.To = "[email protected]"myMail.Subject = "My first CDONTS email"myMail.Body = "This is a test email message" & vbcrlf & "sent with CDONTS"myMail.Sendset myMail=nothing%>

<% @language="VBSCRIPT" %> Báo cho Server biết ngôn ngữ sử dụng là VBScript

185


<% Bắt đầu ASP ScriptDim myMail Định nghĩa một

biến tên là myMailSet myMail = Server.CreateObject("CDONTS.NewMail") Tạo biến myMail

bằng cách tạo thể hiện của đối tượng CDONTS.NewMail

myMail.From = "[email protected]" Địa chỉ Email của người gởi

myMail.To = "[email protected]" Địa chỉ Email của người nhận

myMail.Subject = "My first CDONTS email" Chủ đề thưmyMail.Body = "This is a test email message" Tạo nội dung thưmyMail.Send Phương thức dùng

để gởi mailset myMail=nothing Đóng thể hiện của

đối tượng CDONTS.NewMail

%> Kết thúc Script ASP

Sau này bạn có thể sử dụng thêm

myMail.Cc = "[email protected]" // Đồng gởimyMail.Bcc = "[email protected]" // Gởi ẩn

TIẾN TRÌNH GỞI MAIL TRONG TRANG

contact_post1.asp

Đoạn Code trong trang test1.asp là một cách để kiểm tra xem máy chủ của bạn có hổ trợ sử dụng đối tượng CDONTS hay không. Tuy nhiên trong thực tế thông tin sẽ được điền vào Form từ người dùng Web trong trang "contact_form.asp" và chuyển thông tin này qua trang "contact_post1.asp" . Điều gì sẽ xảy ra :

1. Người dùng sẽ điền thông tin vào form trong trang "contact_form.asp" và clicks vào nút send .

2. Thông tin được gởi đến trang "contact_post1.asp" sử dụng phương thức "POST" .

3. Thông tin sẽ được chèn vào nơi thích hợp trong đoạn code CDONTS bằng phát biểu Request.Form( ) ( dùng để lấy thông tin từ các trường của Form)

4. Email được gởi đi.

5. Kết thúc tiến trình gởi mail.

6. Người sử dụng được hướng tới trang "Thanks For Mailing Us" .

OK, bây giờ chúng ta sẽ viết code cho trang contact_post1.asp .

<% @language="VBSCRIPT" %>

<%

Dim myMail, myBody

186

Bai tap co ban

myBody ="Name: "& request.form("name") & vbcrlf & "E-Mail: " & request.form("email") & vbcrlf & "Message: "& vbcrlf & request.form ("message")

Set myMail = Server.CreateObject ("CDONTS.NewMail")

myMail.From = request.form("email")

myMail.To = "[email protected]"

myMail.Subject = "Customer Contact"

myMail.Body = myBody

myMail.Send

set myMail=nothing

Response.Redirect("contact_thanks.asp")

%>

13 / Mở trang contact_thanks.asp thiết kế giao diện như sau:

vào Insert > HTML>Head Tags > Refresh để gởi người dùng về trang "default.asp" .

File->Save. Upload tất cả các File lên máy chủ. Mở trang contact_form.asp lên để kiểm tra xem có gởi mail được không ?

187


Mở Outlook Express. Click nút Send & Receive để kiểm tra xem có nhận được mail từ khách hàng hay không ?

Về đầu trang

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 1920 | 21 | 22 | 23

TẠO NEWSLETTER (THE REGISTER FOR NEWS LETTER FORM)

News letter có lẽ là một thành phần không thể thiếu khi thiết kế Website. Thông thường bạn ghé thăm một website nào đó, nếu bạn quan tâm đến thông tin về website như: tin tức, giá cả,... Bạn có thể nhập địa chỉ Email hay đăng ký là thành viên của Site. Lúc đó hàng ngày bạn sẽ nhận được thông tin cập nhật từ site. Site có thể cung cấp thông tin cho khách viếng thăm site (visitor) như thông tin về mặt hàng mới (đối với các site bán hàng) hay các chủ đề, chương trình mới (các website về giáo dục),...Với một textbox dùng để nhập địa chỉ Email. Visistor có thể nhập địa chỉ Email vào, các địa chỉ này sẽ được lưu vào co sở dữ liệu. Khi Admin muốn gởi thông tin đến cho các Visistor họ chỉ cần nhập thông tin cần gởi thông qua một trang ASP nào đó. Lúc đó nội dung sẽ gởi đến cho tất cả các Visistor.

Bây giờ chúng ta sẽ tạo một trang hiển thị mục thông tin cuối cùng của chúng ta, một vào quảng cáo và tạo một form mà khách viếng thăm có thể đăng ký để nhận tin tức hàng tháng của chúng ta.

Đầu tiên chúng ta sẽ xây dựng một trang cơ bản với một Form. Khi Form được xác nhận , có 3 việc sẽ xảy ra...

188

Bai tap co ban

1. Các chi tiết về khách viếng thăm sẽ được thêm vào Database của chúng ta. 2. Khách viếng thăm sẽ nhận được một thư gởi từ chúng ta báo cho họ biết là họ

đã đăng ký thành công. 3. Khách viếng thăm sẽ được hướng tới trang cám ơn "Thank You" trước khi được

đưa về trang chủ ( home page )

1/ Mở trang contact_newsletter.asp.

2/ Tạo giao diện cho trang contact_newsletter.asp gần giống với trang contact_form.asp như sau:

3/ Chèn một Form vào cột bên tay phải. Đặt tên cho Form là news nhưng không đặt bất kỳ thông số nào nữa cho nó.

189


4/ Đặt con trỏ trong Form Delimeter sau đó chèn vào một bảng 6 dòng 1 cột, Border=0, width=100 px , Padding = Spacing=2.

5/ Chèn một TextField tên news_name dưới cell Name có độ rộng 25

190

Bai tap co ban

6/ Chèn một TextField tên news_mail dưới cell Email có độ rộng 25.

7/ Trong cell cuối chèn một nút submit có tên Register. File->Save.

8/ Mở database và double click vào "Create table in Design View".

191


9/ Tạo 3 field như sau...

10/ Vào "File>Save" và đặt tên Table là NewsReg.

11/ Mở trang contact_newsletter.asp vào Application panel và chọn tab Server Behaviors. Click "+" và chọn Insert Record từ menu.

12/ Trong cửa sổ Insert Record , đặt các thông số sau: Connection = YotShop Insert Into Table = NewsReg

192

Bai tap co ban

After Inserting Go To = contact_thanks.asp Get Values From = news (đặt chính xác tên Form của bạn)

Hit OK.

13/ Trang của bạn trông giống như sau:

14/ File->Save.

Bây giờ chúng ta sẽ tạo một đoạn mã gởi thư cho chúng ta bất cứ khi nào khách viếng thăm đăng ký một newsletter.

15/ Đoạn code sau đây gần giống với đoạn code mà chúng ta đã sử dụng trong trang contact_post1.asp

' SEND EMAIL

Dim NewsMail, NewsBody

Set NewsMail = CreateObject("CDONTS.NewMail")

193


NewsBody="Name: "& request.form("news_name") & vbcrlfNewsBody=NewsBody & "Email Address: " & request.form("news_mail")

NewsMail.From=request.form("news_mail")NewsMail.To="[email protected]"NewsMail.Subject="Please Add Me To Mailing List"NewsMail.Body=NewsBodyNewsMail.Send

set NewsMail=nothing

Trong đoạn code này bạn hãy thay thế địa chỉ Email của bạn vào tại NewsMail.To="[email protected]"

16/ Mở trang contact_newsletter.asp và chuyển sang chế độ "Code View"

17/ Nếu bạn không thấy số dòng Line Numbers và Word Wrap được mở hãy click nút View Options và chọn chúng

18/ Hãy cuộn tới dòng 117". hãy chú ý rằng có thể số này sẽ khác đối với trang của bạn (khi bạn tự thiết kế giao diện khác với bài tập này).

194

Bai tap co ban

Nhưng bạn nói chung sẽ gặp đoạn code như sau:

19/ Bây giờ hãy copy đoạn mã gởi mail ở trên và dán vào vị trí dòng 118 như trên

20/ File->Save. Sau đó Upload trang này lên máy chủ. F12 kiểm tra

195


' SEND EMAIL Chú thích bắt đầu đoạn mã gởi thư

Dim NewsMail, NewsBody Định nghĩa 2 biến tên NewsMail và NewsBody

Set NewsMail = CreateObject("CDONTS.NewMail") Tạo biến NewsMail bằng cách tạo thể hiện của đối tượng CDONTS.NewMail

NewsBody="Name: "& request.form("news_name") & vbcrlfNewsBody=NewsBody & "Email Address: " & request.form("news_mail")

Cài đặt cách thức mà nội dung của Email sẽ được hiện ra.

NewsMail.From=request.form("news_mail") Dòng này sẽ lấy địa chỉ Email của khách viếng thăm nhập vào và chèn nó vào dòng "From" khi gởi mail

NewsMail.To="[email protected]" Địa chỉ Email của người nhận

NewsMail.Subject="Please Add Me To Mailing List"

Chủ đề thư

NewsMail.Body=NewsBody Phần nội dung của email (là nội dung của biến NewsBody ở dòng 4.

NewsMail.Send Phương thức dùng để gởi mail

set NewsMail=nothing Đóng thể hiện của đối tượng CDONTS.NewMail

Khi khách viếng thăm đăng ký NewsLetter bạn sẽ nhận được một Email báo là khách muốn thêm Email của họ vào News Letter của bạn

GỞI HƠN MỘT EMAIL:

Khi khách viếng thăm đăng ký NewsLetter xong bạn có thể gởi một Email cho họ để cám ơn và báo cho họ biết là họ đã đăng ký thành công .

Đoạn code trông giống như sau:

196

Bai tap co ban

' SEND EMAIL 2Dim ThanksMail, ThanksBodySet ThanksMail = CreateObject("CDONTS.NewMail")

ThanksBody="Dear "& request.form("news_name") & vbcrlfThanksBody=ThanksBody & "Thank you for registering for the YotShop Newsletter."

ThanksMail.From="[email protected]" ThanksMail.To=request.form("news_mail")ThanksMail.Subject="Thank You"ThanksMail.Body=ThanksBodyThanksMail.Sendset ThanksMail=nothing

Bây giờ bạn hã copy và dán đoạn code này vào dòng 131 sau đoạn gởi mail vừ rồi

197


File->Save. Upload trang này lên máy chủ . Nhấn F12 để kiểm tra kết quả

Về đầu trang

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 1920 | 21 | 22 | 23

SỬ DỤNG THÀNH PHẦN TẠO BANNER ĐẢO (THE AD ROTATOR COMPONENT)

IIS ASP Components

Microsoft Internet Information Server bao gồm nhiều thành phần ASP chuẩn được cài trên web server. Chúng ta đã làm quen với đối tượng "NewMail" trong bài học trước. Bây giờ chúng ta sẽ học cách sử dụng đối tượng "Ad Rotator" .

Đối tượng "Ad Rotator" cơ bản là tạo một banner ảnh đảo dùng để quảng cáo , mỗi ảnh được hiển thị trong bao nhiêu giây (được định trước) và khánh viếng thăm Web có thể click vào ảnh này để đi đến trang web mà bạn chỉ định trước.

Để sử dụng được thành phần "Ad Rotator" , chúng ta cần làm theo các bước sau:

Bạn phải viết thêm một số dòng code và dán vào trang contact_newsletter.asp

Tạo một trang redirect.asp chứa chính xác một dòng code.

Tạo một trang văn bản ads.txt. Trong trang này chứa đựng chi tiết của các ảnh mà chúng ta muốn hiển thị và địa chỉ URLs mà chúng ta muốn khách viếng thăm đi đến.

198

Bai tap co ban

Cần một vài hình ảnh quảng cáo. Trong ví dụ minh họa này có sử dụng 3 ảnh (bạn có thể tự tạo) hoặc bạn có thể Download hình bên dưới .

1/ Tạo trang redirect.asp có nội dung như sau:

<%Response.Redirect(request.querystring("url"))%>

2/ Vào File->New >General>Other>Text>Create

199


File->Save. Trong mục Save in chọn thư mục Yotshop, đặt tên tập tin là ads.txt và bạn nhớ phải chọn Save As type là Text Files (*.txt). Click nút Save để lưu tập tin này lại.

200

Bai tap co ban

3/ Nhập nội dung cho tập tin ads.txt. Đánh vào 5 dòng đầu tiên như sau:

REDIRECT redirect.asp

Width 100

Height 100

Border 0

*

4/ Bây giờ đánh tiếp một số dòng cho mẫu quảng cáo đầu tiên....

banks.gif

http://www.banks.co.uk

Yacht Sails

33

Trong đó banks.gif là tập tin ảnh cần hiện, kế đến là địa chỉ web cần link tới, kế đến là chú thích của ảnh và thời gian hiển thị của ảnh

Bây giờ nhập tiếp cho hình quảng cáo 2 và 3.....

temix.gif

http://www.temix.mksat.net/yacht_en/winches.html

Yacht Winches

33

furuno.gif

http://www.ttdtmt.edu.vn

Trung Tam Dien Tu May Tinh - DHKHTN

34

Cuối cùng tập tin ads.txt có nội dung trông giống như sau:

201


5/ Save tập tin ads.txt và sau đó Upload tập tin này và tập tin redirect.asp và các ảnh quảng cáo lên máy chủ Web Server.

6/ Mở trang contact_newsletter.asp trong Dreamweaver MX 2004 và nhập thêm một số code

7/ Chuyển sang chế độ Code và nhập sau dòng

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>

202

Bai tap co ban

<%

Dim Ads, AdsHTML

Set Ads = Server.CreateObject("MSWC.AdRotator")

Ads.clickable = True

Ads.TargetFrame = "target=_blank"

AdsHTML = Ads.GetAdvertisement("ads.txt")

%>

<% Bắt đầu đoạn code ASPDim Ads, AdsHTML Định nghĩa 2 biến Ads và

AdsHTMLSet Ads = Server.CreateObject("MSWC.AdRotator")

Tạo thể hiện cho đối tượng "MSWC.AdRotator" và gán cho biến Ads

Ads.clickable = True Cho phép các ảnh quảng cáo có thể link được.

Ads.TargetFrame = "target=_blank" Mở nội dung trang web ra cửa sổ trình duyệt mới.

AdsHTML = Ads.GetAdvertisement("ads.txt") Đối tượng AdRotator sẽ lấy thông tin quảng cáo trong tập tin "ads.txt" và gán cho biến "AdsHTML"

%> Kết thúc trang ASP

Trang của bạn sẽ trông giống như sau:

203


8/ Chuyển sang chế độ Design và đặt con trỏ tại vị trí muốn chèn ảnh quảng cáo như sau:

9/ Chuyển sang chế độ Code bạn nhìn thấy con trỏ nhấp nháy tại vị trí này.

204

Bai tap co ban

10/ Nhập vào đoạn mã sau:

<%=AdsHTML%>

11/ Chuyển sang chế độ "Design" bạn sẽ nhìn thấy một biểu tượing ASP màu vàng như bên dưới.

12/ File->Save .Upload trang "contact_newsletter.asp" lên máy chủ. Nhấn F12 để kiểm tra thử.

Về đầu trang

205


1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 1920 | 21 | 22 | 23

TẠO THÀNH PHẦN NỘI DUNG ĐỘNG (THE CONTENT ROTATOR COMPONENT)

Thành phần "Content Rotator" hoạt động tương tự cũng giống như thành phần Ad Rotator nhưng linh hoạt hơn. Nó đọc bất kỳ văn bản nào đang được giữ trong một tập tin văn bản và hiện nội dung này ra trang web ASP của bạn. Trong ví dụ này chúng ta có 3 đoạn tin ngắn được lưu trữ bên trong 1 tập tin văn bản. Thành phần Content rotator sẽ đọc nội dung tập tin văn bản này và hiển thị mỗi lần một tin tức khác nhau khi khách viếng thăm trang web hay mỗi lần trang web được refresh. Một điều hay là thành phần "Content Rotator" cho phép chúng ta được phép sử dụng thẻ HTML bên trong tập tin văn bản. Vì thế chúng ta có thể định dạng văn bản , chèn ảnh hay tạo siêu liên kết trong tập tin văn bản này...

Cũng như thành phần Ad Rotator Dreamweaver MX 2004 cũng không chèn trực tiếp được vào do đó bạn phải tự viết thêm đoạn mã ASP để làm được công việc này.

Để sử dụng thành phần "Content Rotator" , chúng ta cần theo các bước sau...

Viết một số dòng code ASP torng trang "contact_newsletter.asp".

Tạo một tập tin văn bản tên "content1.txt". Tập tin này sẽ chứa đựng nội dung 3 bản tin mà chúng ta cần hiển thị ngẫu nhiên. Chúng ta sẽ sử dụng thẻ HTML để định dạng cho tập tin này.

1/ Mở tập tin "contact_newsletter.asp" trong Dreamweaver MX 2004.

2/ Chuyển sang chế độ "Code" và cuộn tới đầu trang. Đặt con trỏ sau đoạn code chèn "Ad Rotator" nhấn Enter để tạo một vài dòng trống.

Nhập vào đoạn mã sau:

<%

Dim ContRot, ContShow

set ContRot=Server.CreateObject("MSWC.ContentRotator")

ContShow= ContRot.ChooseContent("content1.txt")

%>

206

Bai tap co ban

<% Bắt đầu đoạn mã ASP

Dim ContRot, ContShow Định nghĩa 2 biến "ContRot" và "ContShow"

Set ContRot= Server.CreateObject("MSWC.ContentRotator") Tạo thể hiện của đối tượng "ContentRotator" và gán nó vào biến "ContRot" .

ContShow= ContRot.ChooseContent("content1.txt") Bảo đối tượng Content Rotator đọc nội dung trong tập tin "content1.txt" và gán nó vào biến "ContShow" .

%> Kết thúc mã ASP

Sau khi viết xong trong chế độ Code bạn sẽ nhìn thấy đoạn mã sau:

3/ Chuyển sang chế độ "Design" và đặt con trỏ trong cell muốn hiển thị bản tin như bên dưới:

207


4/ Chuyển sang chế độ Code bạn sẽ thấy con trỏ nhấp nháy tại vị trí tương ứng.

5/ Nhập vào đoạn mã sau giữa 2 thẻ <td> và </td> ....

<%=ContShow%>

Sau khi chèn xong bạn sẽ thấy như sau:

6/ Chuyển sang chế độ "Design" bạn sẽ nhìn thấy một biểu tượng ASP như sau:

208

Bai tap co ban

7/ File->Save .

8/ Tạo tập tin văn bản "content1.txt" có cú pháp như sau (Xin vui lòng xem lại cách tạo tập tin văn bản trong Dreamweaver MX 2004 ở bài học trước) :

%% 33Nội dung bản tin thứ 1%% 33Nội dung bản tin thứ 2%% 34Nội dung bản tin thứ 3

9/ Ví dụ tập tin "content1.txt" có nội dung như sau:

%% 33 Around Alone In the last few days Emma Richards and Thierry Dubois have been vying constantly for 2nd place in the "Around Alone" race. First one captures that place, then the other. But sailing isn't all they have on their minds. This report was sent yesterday by Emma after another busy night: 'Not the most restful night I've had. Tried to cook dinner and the stove fuel ran out. No problem, this is the first time I've topped it up and still have four bottles on board so no worries there! Thought that I'd better top up the water container before I charge the batteries, so got most of that full before the batteries needed to be charged and while doing that the engine just cut out.%% 33America's Cup Swiss syndicate Alinghi, leader of the America's Cup yachting challenger series after the round robin stage, has chosen defending challengers' champions Prada of Italy as its quarter-final opponent. Complicated regatta rules allow the top syndicate after the two round robins to choose which of the next three leading teams it will race

209


in the best-of-seven seeded quarterfinals. By selecting to race Prada beginning November 12, Alinghi forces U.S. rivals Oracle and OneWorld against one another. %% 34404 Juniors Despite the horrendous weather forecast ten 405 Junior and Youth crews arrived at Pitsford for the End of Season Open. On Saturday all was fine for sailing, with the sun shining and the wind ranging from a force 4 to a 1 for the last race of the day.Race 1 saw Fiona Reid and Leanne Hibberd take an early lead but the shifty wind produced place changes on both the up and down wind legs. At the finish it was Rosie White & Tom Peel who took the gun with Dylan Fletcher & Nick Hollis 2nd, Holly & Sophie Tuckwood 3rd and Huw Humphries and Max Todd in 4th place. Race 2 started with a force 4, which was enjoyed by Sophie White and Helen Lasco as they picked their way through the fleet to take first place. Dylan & Nick again sailed well in race 3 to take 1st with Holly & Sophie sneaking into 2nd after passing Rosie & Tom and Sophie & Helen in the last few meters. The final race of the day was played out in dying wind. Dylan & Nick were once again first over the finish line with Rosie & Tom 2nd and William and Andrew 3rd. 

11/ Save tất cả các trang này lại sau đó Upload lên máy chủ. Mở trang contact_newsletter.asp lên nhấn F12 để kiểm tra thử kết quả của bạn.

Chú ý: Nếu bạn đang sử dụng PWS sẽ sẽ gặp báo lỗi vì PWS không hổ trợ thành phần content rotator . Bạn sẽ gặp thông báo lỗi sau :

Server object error 'ASP 0177 : 800401f3'Server.CreateObject Failed

/content.asp, line 5800401f3

Về đầu trang

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 1920 | 21 | 22 | 23

210

Bai tap nang cao

ĐẾM SỐ LẦN DOWNLOAD(COUNT DOWNLOAD)

Tải mã nguồn chương trình Download

1/ Trong Access hãy tạo bảng tblDownload có các trường như hình bên dưới và lưu thành tập tin database Download.mdb trong C:\Download

tblDownload

- DownloadID (Primary Key, Autonumber)

- Title (Text, Size: 80)

- Description (Text, Size: 255)

- URL (Text, Size: 255)

- Downloads (Number)

- Active (Text, Size: 3, Default value: Yes)

2/ Nhập liệu cho Table như sau:

------> dữ liệu tiếp tục của bảng tblDownload

211

3/ Trong Dreamweaver MX 2004 hãy cấu hình website theo mô hình ASP VBScript

Cấu hình các thông số cho Local Site như hình bên dưới

Cấu hình các thông số cho Remote Site như hình bên dưới

cấu hình các thông số cho Server kiểm tra như hình bên dưới

212

Bai tap nang cao

4/ Trong Local site tạo một trang web tên download.asp. Bạn có thể chép thêm một số tập tin cần cho dùng dùng Download đặt bên trong website để chút nữa kiểm tra thử chương trình.

5/ Mở trang Download.asp lên sau đó chèn vào một bảng 4 dòng 1 cột như hình bên dưới

213


6/ Vào Panel Application khai báo Database tới tập tin CSDL download.mdb như sau:

Xin vui lòng xem lại cách khai báo Data Source name (DSN)

7/ Sau khi khai báo thành công bạn sẽ thấy xuất hiện Database conn_download

8/ Chọn Tab Binddings tạo một Recordset như sau:

214

Bai tap nang cao

9/ Hãy chèn các trường vào Table và sau đó tạo một vùng lặp lại cho Table như hình bên dưới

10/ Chọn Text Download sau đó tạo Link tới trang download.asp sau đó trong hộp Link truyền biến download như sau:

download.asp?download=<%=Rs_download("DownloadID")%>

11/ Chuyển qua chế độ Code sau dòng



hãy viết một đoạn Code như sau:

<%If Request.QueryString("download")<>"" ThenDim fileID, downloadURLfileID = fFormatText(Request.QueryString("download"))downloadURL = fFile(fileID)'Call function and goto download url if id is validIf downloadURL<>false Then 'Update the count of the downloadCall sRunSQL("UPDATE tblDownload SET Downloads = Downloads + 1 WHERE DownloadID=" & fileID)'Redirect to the download fileResponse.Redirect(downloadURL)Else'File not available for downloadResponse.Write "Tập tin hiện tại không có để Download! "End If End If

215


Function fFormatText(vText)'Check for 'fFormatText = Replace(vText, "'", "''")End FunctionFunction fFile(vDownloadID)Dim rsFileSet rsFile = Server.CreateObject("ADODB.Recordset")With rsFile.ActiveConnection = MM_conn_download_STRING.Source = "SELECT * FROM tblDownload WHERE Active='Yes' AND DownloadID=" & vDownloadID.CursorType = 0.CursorLocation = 2.LockType = 1.Open()'Check if file is available, if so, return location in function nameIf Not .Eof ThenfFile = rsFile("URL")Else'Return false if notfFile = falseEnd If.Close()Set rsFile = nothingEnd WithEnd Function

Sub sRunSQL(vSQL)set sSQL = Server.CreateObject("ADODB.Command")With sSQL

.ActiveConnection = MM_conn_download_STRING

.CommandText = vSQL

.CommandType = 1

.CommandTimeout = 0

.Prepared = true

.Execute()End With

End Sub

%>

12/ File->Save . Nhấn F12 để kiểm tra thử chương trình

Về đầu trang

XÓA NHIỀU MẪU TIN TRÊN TABLE CÓ QUAN HỆ BẰNG CÁCH DÙNG CHECKBOX (DELETING MULTIPLE LINKED RECORDS USING CHECKBOXES)

216

Bai tap nang cao

Click vào đây để Download ví dụ minh họa.

1/ Trong Access tạo một tập tin Database tên delete.mdb lưu vào thư mục Delete trên Desktop (hoặc bất kỳ nơi nào bạn thích) chứa 2 bảng tblMovie và tblMovieCast có các trường như bên dưới

2/ Hãy nhập liệu cho bảng tblMovie như sau

3/ Hãy nhập liệu cho bảng tblMovieCast như sau:

217


4/ Tạo quan hệ cho hai bảng như sau:

5/ Hãy chép thư mục Delete trên Desktop vào thư mục wwwroot trên Local Web Server (D:\InetPub\wwwroot\Delete)

6/ Cấu hình Dreamweaver MX 2004 như sau:

Vào Site->Manage Site->Click New->Site để tạo một Site mới. Chọn tab Advanced, trong mục Local Info tại Site Name nhập vào tên Website, tại Local Root Folder click nút Browse đến thư mục Delete trên Desktop.

218

Bai tap nang cao

Trong mục Remote Info chọn phương pháp truy cập tại Access, tại Remote Folder click nút Browse tới thư mục delete trên máy chủ

Trong mục Testing Server hãy khai báo Server kiểm tra như sau: chọn Server Mode là ASP VBScript, phương pháp truy cập là Local/Network, Testing Server Folder là thư mục Delete trên máy chủ Local Webserver, URL Prefix là địa chỉ dùng để kiểm tra chương trình (chú ý bạn phải khai báo thư mục ảo tên delete trong IIS)

219


7/ Trong Local Site bạn hãy tạo một trang movies.asp như sau:

8/ Mở trang movies.asp sau đó hãy chọn tab Form sau đó click nút Form để chèn vào một biểu mẫu. Trong biểu mẫu này hãy chèn một bảng 2 dòng 2 cột và chèn một nút Submit để xác nhận xóa như bên dưới

9/ Trong panel Application chọn tab Database , click nút + chọn Data Source Name (DSN) , tại Connection name nhập vào tên kết nối, tại Data source name (DSN) chọn delete từ danh sách (nếu bạn chưa khai báo DSN delete trong ODBC thì hãy click nút Define để định nghĩa DSN đến tập tin delete.mdb trong D:\inetpub\wwwroot\delete\delete.mdb)

220

Bai tap nang cao

Click nút Test để kiểm tra nếu gặp thông báo thành công là đã khai báo thành công. Click OK để đóng cửa sổ bạn sẽ thấy một Database tên delRecord, hãy click nút + sau đó click phải chuột vào Table tblMovie chọn View Data để xem thử dữ liệu

10/ Chọn tab Bindings , click + chọn Recordset(Query) để xuất dữ liệu vào table như sau:

Bạn có thể chuyển sang chế độ Recordset nâng cao để xem các lệng truy vấn

221


Sau khi tạo xong Recordset trong tab Bindings bạn sẽ thấy xuất hiện như sau:

11/ Hãy Bind trường dữ liệu Movie trong Recordset vào Cell 2 dòng 2 như sau:

12/ Hãy chèn một Checkbox tại cell 1 dòng 2 sau đó chọn checkbox trên hộp Properties định nghĩa như sau:

222

Bai tap nang cao

Đây là đoạn code của cell 1 dòng 2 và cell 2 dòng 2 như sau:

13/ Tạo một vùng lặp lại (Repeat Region) để xuất dữ liệu như sau: hãy đánh dấu chọn dòng 2 (dòng chứa checkbox và trường dữ liệu động) sau đó vào tab Server Behaviors , click + chọn Repeat Region, trong cửa sổ Repeat Region hãy chọn All records

14/ Hãy chèn một trường ẩn (Hidden Field) kế nút Submit như sau:

223


15/ Chuyển sang chế độ Code sau đó Copy đoạn code sau đây vào sau dòng

 như sau:

<%

If Request.Form("Process")="True" Then

'First check for a selection

If Request.Form("cSelect")="" Then

Response.Redirect "movies.asp"

End If

'Proceed with delete

Dim sDelete

sDelete = Replace(Request.Form, "&cSelect=", ",")

sDelete = Replace(sDelete, "cSelect=", "")

sDelete = Left(sDelete, Len(sDelete)-13)

'First delete records from cast table

Call sDeleteRecords("DELETE FROM tblMovieCast WHERE MovieID IN (" & sDelete & ")")

'Finally, delete records from main movie table

Call sDeleteRecords("DELETE FROM tblMovie WHERE MovieID IN (" & sDelete & ")")

Response.Redirect("movies.asp")

End If

224

Bai tap nang cao

%>

<%

Sub sDeleteRecords(vSql)

set cDelete = Server.CreateObject("ADODB.Command")

cDelete.ActiveConnection = MM_delRecord_STRING

cDelete.CommandText=vSql

cDelete.CommandType = 1

cDelete.CommandTimeout = 0

cDelete.Prepared = true

cDelete.Execute()

End Sub

%>

Bạn phải thay thế MM_delRecord_STRING theo đúng tên chuổi kết nối đến Database của bạn trong tập tin kết nối.

Chú ý là chúng ta gọi hàm xóa dữ liệu trong table tblMovieCast trước sau đó mới xóa dữ liệu trong table chính tblMovie. Nếu sau này bạn muốn xóa các table khách thì bạn phải xửa lại tên của các table này và điều kiện khóa chính MovieID trong mệnh đề WHERE.

Đầu tiên chúng ta dùng mệnh đề If để kiểm tra xem Form có được Submit hay không với cú pháp như sau

<%If Request.Form("Process")="True" Then

.......

End If%>

Nếu Form được xác nhận thì sau đó chúng ta kiểm tra tiếp

If Request.Form("Process")="True" Then

....xem checkbox xác nhận xóa có được chọn hay không

'First check for a selectionIf Request.Form("cSelect")="" ThenResponse.Redirect "movies.asp"End If

Giả sử người sử dụng chọn một vài checkbox để xóa, bây giờ chúng ta sẽ xây dựng một hàm chính dùng để làm công việc xóa các mẫu tin trong các table . Đầu tiên chúng ta cần một biến để sử dụng trong câu truy vấn SQL, bạn hãy nhập đoạn code sau đây…

'Proceed with delete

Dim sDelete

225


sDelete = Replace(Request.Form, "&cSelect=", ",")

sDelete = Replace(sDelete, "cSelect=", "")

sDelete = Left(sDelete, Len(sDelete)-13)

Chúng ta sẽ tạo ra một biến tên sDelete bằng chức năng của hàm Replace Chúng ta sẽ chộp lấy các checkboxes được chọn và đặt chúng vào trong biến này sau đó bỏ thông số tên chỉ để lại các giá trị.

Chú ý là chúng ta có một biến ẩn tên Process sẽ được chuyển qua địa chỉ URL như sau ?Process=True . Tổng chiều dài của chuổi này là 13 ký tự do đó chúng ta sẽ dùng hàm Left để loại bỏ 13 ký tự này ra.

Bây giờ chúng ta sẽ sử dụng đối tượng Command để xóa các Record đã chọn. Để làm được điều này đơn giản là chúng ta sẽ sử dụng lệnh IN trong truy vấn SQL.

15/ File -> Save. Sau đó Upload trang này lên máy chủ. Nhấn F12 để kiểm tra xem thử có xóa được các mẫu tin hay không ?

Bạn cũng có thể sử dụng chức năng phân trang để giới hạn số mẫu tin mỗi lần xuất như sau:

Về đầu trang

TẠO VÙNG LẶP LẠI THEO CHIỀU NGANG (HORIZONTAL LOOPER REPEAT REGION)

Download Extension cho mô hình ASP/VBScript. Download Extension cho mô hình PHP.

1. Tạo một trang tên display.asp. Mở trang này lên sau đó tạo một kết nối Database. Hãy tạo một Recordset để xuất dữ liệu như sau:

226

Bai tap nang cao

Bạn sẽ thấy xuất hiện các trường động trong Recordset như hình bên dưới

2. Hãy Drag các trường động này vào vị trí thích hợp trong trang như sau:

3. Đánh dấu chọn dữ liệu muốn tạo vùng lặp lại theo chiều ngang như sau:

4. Vào Panel Application -> Click " + ", Chọn Tom-Muck.com> Horizontal Looper 2

227


Hãy chọn Recordset1 , tại Show bạn hãy chọn số dòng và số cột muốn hiện ra. Nếu muốn hiện tất cả các Record thì chọn All. Ví dụ trong Database của bạn có tổng cộng 15 Record , nếu bạn chọn 2 dòng và 2 cột thì sẽ hiện các mẫu tin theo dạng sau: 1 2 34 5

Như vậy bạn có thể dùng thêm Recordset Navigation như :Pages List , Links List , và Navigation Links để hiện các Record còn lại trong Database (Nên xem lại bài kỹ thuật phân trang)

Hãy click nút Live Data để kiểm tra thử kết quả của bạn

228

Bai tap nang cao

Về đầu trang

Hiển thị số trang Recordset (Recordset Page Numbers) cho một miền lặp lại (Repeat Region)

Trình độ: Trung cấp Yêu cầu phần mềm: Dreamweaver MX 2004 / MX & Microsoft Access Kiến thức cần có: Có kinh nghiệm xây dựng Website động ASP/VBScript bằng

Dreamweaver.

Click vào đây để xem Demo Click vào đây để Download

Mở Microsoft Access và tạo một Database tên test50.mdb lưu vào trong Website của bạn có các trường như bên dưới và lưu Table này với tên là WtNames

numID = Autonumber - Primary KeynumFirstName = TextnumLastName = Text

229


Hãy mở Table này lên và nhập liệu vào ví dụ khoảng 50 Users như sau:

230

Bai tap nang cao

231


1. Mở Dreamweaver MX 2004 sau đó tạo một Website mới theo mô hình ASP/VBScript (Xin vui lòng xem lại giáo trình cách tạo Site động). Hãy tạo một trang tên default.asp

2. Mở trang default.asp sau đó vào menu Application chọn Tab Database , click + chọn Data Source Name để khai báo một kết nối Database ( Xin vui lòng xem giáo trình cách khai báo Database)

- Tại Connection Name nhập tên kết nối ví dụ : sinhvien- Click nút Define để định nghĩa DSN ( Xin vui lòng xem lại cách định nghĩa DSN)

232

Bai tap nang cao

- Chọn Tab System DSN , click nút Add- Chọn Microsoft Access Driver (*.mdb) sau đó click nút Finish

- Tại Data Source Name nhập tên ví dụ là sinhvien

233


- Click nút Select sau đó chọn tập tin test50.mdb trong Website của bạn như hình vẽ

Click OK , OK để đóng hộp thoại định nghĩa DSN lại- Tại hộp định nghĩa Data Source Name (DSN) hãy chọn DSN là sinhvien vừa mới tạo sau đó click nút Test để kiểm tra xem kết nối có thành công hay không.

234

Bai tap nang cao

Click nút OK để đóng hộp thoại này lại.

Trong Tab Database bạn sẽ thấy xuất hiện Database sinhvien và table trong database này, bạn có thể click phải chuột vào Table WtNames chọn View Data để xem thử dữ liệu bên trong Table này.

3. Trong trang default.asp hãy tạo một Table có hai cột là First Name và Last Name như sau:

4. Vào Tab Bindings , click dấu + chọn Recordset để tạo một Recordset xuất dữ liệu

235


Hãy đặt các thông số như sau cho Recordset

Name = rs1 Connection = sinhvienTable = WtNamesColumns = All Filter = None Sort = None

Bạn sẽ thấy xuất hiện các rtường text động trong Tab Bindings như bên dưới

5. Mở Panel Bindings sau đó Drag các trường tương ứng vào các cell như hình minh họa sau:

236

Bai tap nang cao

6. Đánh dấu chọn dòng chứa trường động sau đó chọn Tab Server Behaviors , click + chọn Repeat Region để tạo một vùng lập lại.

237


Chọn recordset rs1 và chỉ cho hiện 5 mẫu tin đầu tiên, au khi tạo xong một miền lặp lại bạn sẽ

thấy xuất hiện vùng Repeat như minh họa bên dưới. Hãy click nút Live Data để xem thử dữ liệu xuất hiện trên trang web như thế nào.

7. Bước kế tiếp bạn hãy tạo trạng thái định hướng của Recordset bằng cách nhập vào Table các dòng như minh hoạ bên dưới

8. Hãy chọn chữ xx sau đó vào Panel Bindings chọn mục [first record index] sau đó click nút Insert để chèn vào hoặc bạn có thể Drag mục [first record index] thả vào chữ xx

9. Bạn sẽ nhìn thấy xx được thay thế bằng {rs1_first} hiển thị số Record đầu tiên trong Recordset

10. Lập lại cho mục [last record index] và [total records] như minh họa bên dưới

238

Bai tap nang cao

11. Hãy đánh dấu chọn <<Prev và chọn mục Recordset Paging > Move To Previous Record từ Server Behaviors panel.

12. Click OK để đóng hộp Move To Previous Record.

13. Hãy đánh dấu chọn Next >> và chọn mục Recordset Paging > Move To Next Record từ Server Behaviors panel.

239


14. Click OK để đóng hộp Move To Next Record.

Bạn sẽ nhìn thấy Table như dạng sau:

và trong Tab Server Behaviors xuất hiện như sau:

15. Click nút Live Data View để nhìn thấy 5 Record đầu tiên trong Database được hiển thị

240

Bai tap nang cao

16. Đánh dấu chọn mục <<Prev sau đó vào Tab Server Behavior của menu Application , click nút + chọn Show Region -> Show Region If Not First Record

17. Trong cửa sổ xuất hiện hãy chọn Recordset rs1 , chọn OK

18. Đánh dấu chọn mục Next>> sau đó vào Tab Server Behavior của menu Application , click nút + chọn Show Region -> Show Region If Not Last Record

241


19. Trong cửa sổ xuất hiện hãy chọn Recordset rs1, chọn OK

20. Bước kế tiếp là bạn sẽ tạo phần phân trang bằng cách viết thêm một đoạn code nhỏ (minh họa bên dưới) dùng để phân trang hoặc nếu bạn không muốn viết code thì cũng có thể sử dụng Server Behavior Extension của hãng Basic Ultradev. Hãy click vào đây để Download Extension. Sau khi Download thành công bạn hãy cài đặt Extension này vào máy rồi thực hiện theo hướng dẫn từ bước 27 ( Xin vui lòng xem minh họa từ bước 27 )

Hãy đặt Cursor tại giữa hai mục <<Prev và Next>> .

21. Hãy chuyển sang chế chế độ Code View sau đó nhấn Enter khoảng 3 lần để tạo vài dòng trống để chuẩn bị chèn đoạn mã tạo số trang

242

Bai tap nang cao

22. Hãy copy đoạn code bên dưới đây vào Clipboard sau đó dán vào vị trí dòng trống đã chuẩn bị trước hồi nãy .......

<%Pnum_counter = 0For i = 1 to rs1_total Step MM_sizePnum_counter = Pnum_counter + 1Pnum_PageEndCount = i + MM_size - 1if Pnum_PageEndCount > rs1_total Then Pnum_PageEndCount = rs1_totalif i <> MM_offset + 1 thenResponse.Write("<a href=""" & Request.ServerVariables("URL") & "?" & MM_keepMove & "offset=" & i-1 & """>")Response.Write(Pnum_counter & "</a>")elseResponse.Write("" & Pnum_counter & "")End ifif(Pnum_PageEndCount <> rs1_total) then Response.Write(" | ")next%>

Hãy chú ý rằng trong đoạn code này những chữ rs1 là tên của Recordset mà bạn đã tạo trong bước tạo Recordset. Nếu bạn đặt tên gì thì hãy sữa lại cho giống như vậy.

Cuối cùng đoạn Code của bạn trông giống như sau:

243


23. Bạn sẽ thấy xuất hiện một biểu tượng ASP (Bạn chỉ thấy được khi bạn Config cho hiện invisible elements trong menu Edit->References.... )

24. Click nút Live Data View lần nữa để thấy số trang hiển thị như sau:

25. File->Save. Nhấn F12 để kiểm tra thử kết quả của bạn.

26. Mở tập tin sinhvien.mdb trong thư mục Connections sữa lại chuỗi kết nối đến tập tin CSDL để chuẩn bị Upload Website lên máy chủ Web Server (Chú ý nếu bạn làm bước này thì sau này bạn không cần phải khai báo DSN trên máy chủ Webserver)

27. Phần dưới đây minh họa cách sử dụng Server Behavior phân trang của UltraDev. Sau khi làm xong tới bước tạo vùng lặp lại (Repeat Region) bạn hãy đặt con trỏ tại vị trí bên dưới Table như hình bên dưới

244

Bai tap nang cao

28. Hãy vào tab Server Behavior, click nút + , chọn Basic Ultradev , chọn Links List

29. Trong cửa sổ Links List hãy chọn Recordset rs1, tại hộp phân cách Delimiter hãy nhập vào dấu phân cách hoặc bạn có thể click biểu tượng image để chọn hình ảnh phân cách giữa các số.

Phân trang của bạn sẽ như hình bên dưới

245


Hãy nhấn F12 để kiểm tra thư ra trình duyệt sau đó click vào thử các link xem sao

30. Bạn hãy đặt con trỏ sau phần phân trang phía trên sau đó vào tab Server Behavior, click nút + , chọn Basic Ultradev , chọn Pages List để tạo một dạng phân trang khác nếu muốn.

31. Bạn hãy đặt con trỏ sau phần phân trang phía trên sau đó vào tab Server Behavior, click nút + , chọn Basic Ultradev , chọn Navigation Links để tạo thanh định hướng Recordset

246

Bai tap nang cao

Hãy nhấn F12 để kiểm tra thư ra trình duyệt bạn sẽ thấy phân trang của bạn như sau

Về đầu trang

SỬ DỤNG EXTENSION REMEMBER ME CỦA BASIC-ULTRADEV

Thông thường khi vào một Site bạn thường phải nhập vào 2 trường username, password, và nhấn nút submit. Nếu bạn muốn người sử dụng có một tùy chọn để họ nhớ những thông tin mà họ đã nhập vào bạn có thể tạo thêm một checkbox Remember Me trên trang, và đặt một vài đoạn code thích hợp vào Cookies.

247


Extension Basic-Ultradev "Remember Me" sẽ tự động giúp bạn làm được điều này mà không cần phải viết một đoạn code nào cả. (Chú ý extension này chỉ làm việc trong mô hình ASP VBScript và ASP JScript).

1. Trước tiên bạn hãy Download Extension Remerber Me vào máy sau đó dbclick vào tập tin RememberMe.mxp vừa mới Download để cài đặt.Chú ý là máy của bạn phải có cài đặt Macromedia Extension Manager (Xin vui lòng xem lại giáo trình cơ bản về cách sử dụng Extension). Nếu cài đặt thành công bạn sẽ thấy xuất hiện Extension Remember Me trong Dreamweaver MX 2004 như hình minh họa bên dưới.

2. Để sử dụng được Extension này trên trên của bạn cần có các thành phần sau đây: Một Form cho phép người dùng Login Một trường username Một trường password Một checkbox Remember Me Một nút Submit để Login vào Site

3. Vào Server Behavior Panel -> Basic-Ultradev -> Remember Me

248

Bai tap nang cao

4. Trong hộp thoại Remember Me bạn hãy nhập và chọn các thông số như bên dưới

5. Trong Tab Server Behavior bạn sẽ thấy xuất hiện Remember Me như sau:

249


6. File->Save. Nhấn F12 để kiểm tra thử.

QUÊN MẬT KHẨU (FORGOTTEN PASSWORD)

Trong bài học này chúng ta sẽ xây dựng một trang để người sử dụng có thể tìm lại mật mã của học khi họ đã lỡ quên. Để gởi mật mã lại về cho người sử dụng họ phải nhập vào tên username của họ. Nếu đúng tên username thì chúng ta sẽ gởi cho họ một Email thông báo mật khẩu cũ của học qua địa chỉ Email khi họ đăng ký website của chúng ta.

Đối tượng email sử dụng trong bài học này là CDONTS và Jmail. Tuy nhiên bạn nên đọc thêm bài viết về cách sử dụng chi tiết các đối tượng này và các đối tượng email khác nữa (Gởi mail với CDONTS - CDOSYS - Jmail & AspMail) .

1/ Tạo Table:

Trong bài học này chúng ta sử dụng Table members trong các phần bài học trước để minh họa còn nếu bạn chưa có table này thì hãy tạo mới nó với cấu trúc như sau:

250

Bai tap nang cao

2/ Tạo Trang forgot.asp trong Dreamweaver MX 2004

Trong trang này bạn hãy chèn một Form (click nút Form từ Tab Form) , chèn một nhãn thích hợp , chèn vào một TextField tên username (bằng cách click nút TextField trong tab Form) , chèn một button kiểu Submit và một trường ẩn (Hidden) tên process có giá trị khởi đầu là true như bên dưới. (Nếu bạn không thấy biểu tượng trường ẩn xuất hiện hãy vào menu Edit->Preferences->Invisible Elements và chọn ô Hidden Form Field

251


3/ Tạo một Recordset rsUser

Vào Tab Bindding trong panel Application, click + chọn Recordset (Query)

252

Bai tap nang cao

Hãy đặt thông số cho Recordset như sau:

Hãy click nút Advanced... để mở chế độ Recordset nâng cao -> OK

4/ Chuyển sang chế độ Code nhập vào đoạn mã sau đọa mã tạo Recordset:

<%

253


'Check if the form has been processedIf Request.Form("process")="true" Then'Check the recordset for a valid recordIf Not rsUser.Eof Then'Valid record, so proceed with the emailCall sSendReminder(rsUser("email"), rsUser("password"))Response.Write "Your password has been sent to your inbox."Else'Not a valid recordResponse.Write "Sorry, no user details were found for that username."End IfEnd If

Hãy viết tiếp một hàm dùng để gởi mail có cấu trúc như như bên dưới tiếp theo sau đoạn code vừa rồi:

Sub sSendReminder(vEmail, vPassword)………End Sub%>

Nếu bạn đang sử dụng thành phần email là CDONTS bạn có thể sử dụng đoạn mã sau đây:

Sub sSendReminder(vEmail, vPassword)Dim myMailSet myMail = Server.CreateObject ("CDONTS.NewMail")myMail.From = "[email protected]"

254

Bai tap nang cao

myMail.To = vEmailmyMail.Subject = "Requested password."myMail.Body = "Your password is: " & vPasswordmyMail.Sendset myMail=nothingEnd Sub%>

Nếu bạn đang sử dụng thành phần email là JMAIL bạn có thể sử dụng đoạn mã sau đây:

Sub sSendReminder(vEmail, vPassword)Dim MyMailSet MyMail = Server.CreateObject("JMail.SMTPMail")With MyMail .ServerAddress = "mail.ttdtmt.edu.vn" .Sender = "[email protected]" .AddRecipient vEmail .Subject = "Requested password." .Body = "Your password is: " & vPassword .ExecuteEnd WithSet myMail=nothingEnd Sub%>

File->Save để lưu lại trang này

255


5/ Mở trang products.asp tạo một siêu liên kết tới trang forgot.asp như sau:

File->Save sau đó nhấn F12 để kiểm tra thử xem kết quả của bạn.

6/ Sau khi nhấn vào siêu liên kết Forgot ypur Password bạn hãy nhập vào tên username của mình và nhấn nút Submit. Sau đó hãy kiểm tra hộp thư của mình để xem có nhận lại được mật khẩu đã quên hay không ?

Về đầu trang

TẠO MENU ĐỊNH HƯỚNG TỪ A->Z (BUILDING AN ALPHABETICAL A TO Z MENU)

1/ Trong Access hãy tạo một database dùng để lưu trữ đĩa CD trực tuyến. Tạo một database tên musicStore.mdb Tạo một bảng tên artists có các trường như bên dưới.

msid = AutoNumber (primary key). msband = Text msbandinfo = Memo

256

Bai tap nang cao

msalbums = Memo

2/ Nhập liệu cho database theo như ý của bạn. Bạn có thể Download Database của ví dụ này bằng cách click vào đây

3/ Tạo một thư mục trên desktop tên là musicStore. Copy thư mục này vào thư mục wwwroot trong máy chủ cục bộ của bạn.

4/ Copy tập tin database musicStore.mdb vào thư mục musicStore trong thư mục wwwroot trên máy chủ cục bộ.

5/ Tạo một DSN tên musicStore tới tập tin database trên máy chủ.

6/ Tạo một web site trong Dreamweaver tên musicStore và cấu hình Local Info chỉ đường dẫn tới thư mục musicStore trên desktop, mục Remote Info chỉ đường dẫn tới thư mục musicStore trong thư mục wwwroot trên máy chủ Local Host. Chọn kiểu kết nối là Local/Network và máy chủ kiểm tra Testing Server là ASP VB Script.

7/ Trong Local Site tạo một trang tên default.asp

257


8/ Tạo một kết nối DSN Connection tên conMusicStore và hãy kiểm tra chúng.

9/ Upload tập tin default.asp và thư mục Connections lên máy chủ.

10/ Mở trang default.asp và thiết kế chúng như sau:

11/ Click chọn mục A và trong hộp Link nhập default.asp?sort=a

12/ Bây giờ bạn đã có được một link cho mục A

258

Bai tap nang cao

13/ Hãy tiếp tục tạo Link cho các chủ đề còn lại như sau:

B - default.asp?sort=b

C - default.asp?sort=c

D - default.asp?sort=d

........

cứ thế cho đến mục Z

Menu của bạn bây giờ trông giống như sau:

14/ Mở trang default.asp trong chế độ Design. Vào Bindings panel click nút + và chọn Recordset(Query) .

15/ Trong cửa sổ Recordset chọn Simple Mode, cấu hình Recordset như sau ....

Name = rsSort

Connection = conMusicStore

Table = artists

Columns = All

Filter = msband - begins with - URL Parameter - sort

Sort = msband - Ascending

259


16/ Click nút Test , nhập vào giá trị a trong hộp Test value . Click OK.

17/ Kết quả sẽ hiện tất cả các mẫu tin bắt đầu bằng chữ A của trường msband

18/ Click nút Advanced trong cửa sổ Recordset để xem định nghĩa SQL.

260

Bai tap nang cao

19/ Hãy thay đổi giá trị Default Value là a

20/ Trong tab Bindings panel hãy mở rộng Recordset như sau.

21/ Click vào bên trong cell dưới Artist chọn msband từ Bindings panel. Click vào nút Insert để chèn dữ liệu vào.

261


22/ Tiếp tục chèn các trường msbandinfo và msalbums như sau:

23/ File-> Save. Click nút Live Data View. để kiểm tra thử .Click Live Data View lần nữa để trở về chế độ Design View.

24/ Bây giờ chúng ta sẽ tạo một vùng lặp lại bằng cách chọn dòng đang chứa các trường động sau đó vào Server Behaviors chọn Repeat Region.

262

Bai tap nang cao

25/ CHọn nút Radio Check the All Records và click OK.

26/ Tuy nhiên nếu Database của chúng ta không có dữ liệu thì khách viếng thăm sẽ gặp một thông báo lỗi EOF/BOF error. Để ngăn chặn báo lỗi này bạn hãy dùng Show Region bằng cách chọn dòng đang chứa các trường động vào Server Behaviors chọn Show Region > Show Region If Recordset Is Not Empty.

27/ Trong hộp The Show Region If Recordset Is Not Empty chọn Recordset rsSort ,click OK.

263


28/ Bây giờ hãy chọn text "There Are No Results For Your Search". Vào Server Behaviors chọn Show Region > Show Region If Recordset Is Empty .

Nếu không có mẫu tin được hiển thị thì khách viếng thăm sẽ nhìn thấy dòng thông báo này. Click OK lần nữa khi hộp Show Region If Recordset Is Not Empty xuất hiện.

29/ Trang của bạn bây giờ trông như sau:

21/ File -> Save. Chọn trang default.asp và thư mục Connection sau đó click nút Put Files để Upload chúng vào thư mục musicStore trong thư mục wwwroot. Nhấn F12 để kiểm tra kết quả của bạn hoặc mở trình duyệt nhập http://localhost/musicStore .

Về đầu trang

SẮP XẾP DỮ LIỆU (SORT RECORD)

Download mã nguồn ví dụ

1/ Trong Access hãy tạo một Database tên films.mdb lưu trong C:\SortRecord có các trường như sau:

2/ Lưu lại thành Table film. Mở Table này lên và nhập liệu cho Table như sau:

264

Bai tap nang cao

3/ Trong Dreamweaver tạo một Site mới có cấu hình như sau:

Khai báo các thông số cho Local Info như hình bên dưới

Khai báo các thông số cho Remote Info như hình bên dưới

265


Khai báo Server kiểm tra như hình bên dưới (chú ý bạn phải tạo thêm một thư mục ảo tên sortrecord trong IIS)

4/ Trong Local Site hãy tạo một trang web có tên films.asp như sau:

266

Bai tap nang cao

5/ Mở trang films.asp lên , chèn vào một bảng 3 dòng 4 cột sau đó sử dụng công cụ Merge cell để tạo sau cho Table được như hình bên duới:

6/ Chèn một 4 Form vào Cell 1 dòng 2 , Cell 2 dòng 2, Cell 3 dòng 2 và Cell 4 dòng 2 như hình bên dưới

7/ Chọn từng Form sau đó đặt thuộc tính cho Form như sau:

Tương tự làm cho Form2,Form 3 và Form4

267


8/ Trong Form1, Form2, Form3, Form4 chèn các nút có nhãn tương ứng như hình bên trên.

9/ Trong mỗi Form chèn một trường ẩn (Hidden Field) với các thuộc tính và giá trị như sau:

268

Bai tap nang cao

10/ Khai báo một kết nối Database tới tập tin film.mdb như sau:

Xin vui lòng xem lại cách khai báo DSN ở những phần bài học trước

269


11/ Tạo một Recordset chính xác như sau:

Bạn sẽ thấy xuất hiện 1 Recordset Rs_sort trong tab Binddings

12/ Drag 2 trường động title và category vào 2 cell cuối trong Table như sau:

270

Bai tap nang cao

13/ Chọn dòng cuối sau đó hãy tạo một vùng lặp lại cho dữ liệu động này bằng cách vào tab Server Behavior > click + > Repeat Region > chọn All Records

14/ File->Save. Sau đó nhấn F12 để kiểm tra thử xem.

Về đầu trang

271


Simple Shopping Cart

TẠO FOLDERS VÀ FILES

1/ Tạo một thư mục mới trên Desktop (hoặc bất cứ nơi nào bạn thích trên đĩa cứng của bạn) và đặt tên Folder là ecom (hoặc bất cứ tên nào mà bạn thích).

2/ Mở thư mục ecom và tạo 2 thư mục con bên trong tên buttons và pix.

3/ Download các hình ảnh cho bài tập này bằng cách click vào đây. Sau đó hãy copy và paste các hình ảnh trong thư mục buttons vào thư mục buttons và các hình ảnh trong thư mục wine_pix vào thư mục pix.

4/ Thư mục buttons và pix của bạn trông giống như sau:

5/ Hãy copy thư mục ecom trên Desktop vào thư mục D:\inetpub\wwwroot trong local server của bạn. (Bạn hãy kiểm xem thư mục wwwroot bạn cài đặt trên ổ đĩa nào của bạn mà copy vào cho đúng)

6/ Bạn hãy tham khảo Site Map sau đây để hình dung được các tập tin mà bạn phải tạo trong phần bài tập này. Phần admin cho phép bạn xem, thêm, xóa, sữa các món hàng bên trong Database của bạn. Phần shop_french_red, shop_french_white và trang shop_detail sẽ liên kết tới database dùng để hiện các loại rượu mà bạn bán.Trang xe mua hàng (shopping cart),trang hóa đơn và thẻ tín dụng (checkout & credit card).

272

Bai tap nang cao

Về đầu trang

TẠO DATABASE, CẤU HÌNH DWMX 2004 & TẠO THƯ MỤC ẢO

1/ Tạo một database trống bằng Access (Xin vui lòng xem lại cách tạo Database torng phần cơ bản). Tên của database là products.mdb và lưu nó trong thư mục ecom trên Desktop và thư mục trong thư mục wwwroot.

273


2/ Double click vào "Create Table in Design View" và tạo một Table có các cột như hình bên dưới và lưu Table với tên products

3/ Hãy nhập liệu cho Table như hình bên dưới. Nếu bạn lười thì bạn có thể Download tập tin ecom.zip này sau đó giải nén ra và chép tập tin mẫu products.mdb đã nhập liệu rồi vào thư mục eCom hoặc bạn có thể tìm thấy thông tin nhập liệu này trong tập tin wine_data.txt

4/ Cấu hình DSN:

Vào Start->Settings->Control Panel->Administrative Tools->Data Sources (ODBC)->Tab System DSN->Add->Microsoft Access Driver (*.mdb) -> Finish->Nhập Data Source Name là ecom -> click nút Select chọn tập tin products.mdb như hình bên dưới -> OK->OK .

5/ Cấu hình Dreamweaver MX 2004

Hãy tạo một Site mới như sau Site->Manage Site->New->Site

274

Bai tap nang cao

Chọn Tab Advances , tại mục Local Info hãy nhập tên Site name là ecom và tại mục Local Root Folder hãy click nút Browse tới thư mục eCom trên Desktop như sau:

Tại mục Remote Info chọn kiểu truy cập là Local/Network, tại mục Remote Folder chỉ đường dẫn tới thư mục eCom trên máy chủ như sau:

Tại mục Testing Server chọn Server Mode là ASP VBScript, tại URL Prefix bạn sẽ thấy địa chỉ kiểm tra website của bạn chú ý là bạn thấy có tên thư mục ảo là ecom và bạn phải tạo tên thư mục ảo này trong Internet Infomation Server.

275


Click OK sau đó click nút Done bạn sẽ thấy Site xuất hiện như sau:

Click nút Expand /Collapse bạn sẽ thấy như sau:

6/ Cấu hình Internet Information Server

276

Bai tap nang cao

Start->Settings->Control Panel->Administrative Tools->Internet Servive Manager.

Click vào dấu + tại tên máy tính của bạn , sau đó click phải chuột vào mục Default Web site chọn menu New -> Vitual Directory.

Click nút Next để tiếp tục.Nhập vào bí danh (Alias) là ecom, click Next để tiếp tục, click nút Browse tới thư mục eCom trên máy chủ web server D:\Inetpub\wwwroot\eCom , click nút Next để tiếp tục sau đó chọn các quyền truy cập vào thư mục ảo như hình bên dưới. Click Next để tiếp tục và click Finish để hoàn thành.

Bạn sẽ thấy xuất hiện một thư mục ảo tên ecom hãy click phải chuột vào thư mục này và chọn Properties.

277


Bạn hãy chọn thêm mục Script Source Access như hình bên dưới và Ok để đóng hộp thoại này lại.

Mở trình duyệt Internet Explore nhập vào địa chỉ sau: http://localhost/ecom nếu bạn thấy xuất hiện được các tập tin trên máy chủ là được rồi đấy.

278

Bai tap nang cao

Về đầu trang

TẠO TRANG QUẢN TRỊ (THE ADMIN CONTROL PANEL)

1/ Trong Local Folder hãy click phải chuột vào ecom chọn New File để tạo trang web mới. Bạn hãy tạo các trang web như sau:

2/ Mở trang admin_control.asp và nhập vào nội dung như sau:

279


3/ Tạo Hyperlink cho các mục như sau:

"ADMIN VIEW PRODUCTS" links to "admin_view.asp"

"ADMIN ADD PRODUCTS" links to "admin_add.asp"

"ADMIN UPDATE PRODUCTS" links to "admin_update1.asp"

"ADMIN DELETE PRODUCTS" links to "admin_delete1.asp"

"GO TO MAIN SHOP PAGE" links to "default.asp"

Riêng trang default.asp ta chưa tạo do đó trong lúc tạo Hyperlink tạo hộp link bạn phải tự nhập địa chỉ trang default.asp vào.

File->Save sau đó chọn tất cả các trang click nút Upload để đưa các trang này lên máy chủ.

TẠO TRANG THÊM SẢN PHẨM (THE ADMIN ADD PRODUCTS PAGE)

1/ Mở trang "admin_add.asp" trong chế độ "Design" . Trong Panel Application chọn tab Databases. Click nút + Chọn Data Source Name (DSN)

2/ Tại Connection Name nhập tên kết nối là con_ecom. Trong menu Data Source Name (DSN) chọn ecom từ danh sách DSN. Chọn mục radio Using Local DSN.

280

Bai tap nang cao

Click nút Test để kiểm tra nếu bạn gặp thông báo kết nối thành công là được rồi đấy. Bạn sẽ thấy được Database con_ecom trong Tab Database và bạn có thể click phải chuột vào Table Products chọn View Data để xem thử dữ liệu.

3/ Trong trang "admin_add.asp" hãy tạo một tiêu đề thích hợp sau đó chọn Tab Form và click nút Form để chèn vào một biểu mẫu. Hãy đặt tên cho Form là add_form và chọn phương pháp là POST , hãy để trống mục Action. Nếu bạn không thấy xuất hiện đường chấm màu đỏ hãy vào "Edit > Preferences > Invisible Elements" và chọn checkbox Form Delimiter" .

4/ Hãy chèn một Table 7 dòng 2 cột sau đó chèn vào các nhãn và các trường như sau: ( Xin vui lòng xem lại cách tạo các thành phần của Form ở các bài học trước)

281


5/ Hãy chèn 4 TextField và 2 TextArea như sau:

PRODUCT CATEGORY có tên "product_category" độ rộng 50

PRODUCT NAME có tên "product_name" độ rộng 50

PRODUCT PRICE có tên "product_price" độ rộng 50

PRODUCT SHORT DESCRIPTION có tên "product_briefdesc" độ rộng 50 số dòng 5

PRODUCT FULL DESCRIPTION có tên "product_fulldesc" độ rộng 50 số dòng 8

PRODUCT IMAGE FILE NAME có tên "product_picture" độ rộng 50

6/ Chèn một nút kiểu "Submit" có nhãn là "Add To Shop" và một nút kiểu Reset Form

7/ Trong Panel Application chọn Tab Server Behaviors. Bạn hãy click chọn mục Testing Server và OK để khai báo Server kiểm tra nếu bạn thấy mục số 3 được đánh

282

Bai tap nang cao

dấu check là được rồi đấy. Sau đó bạn hãy click nút + và chọn "Insert Record" .

8/ Trong hộp thoại "Insert Record" hãy chọn các thông số như hình bên dưới.

9/ Click "OK" bạn sẽ thấy trong tab "Server Behaviors" xuất hiện Insert Record

10/ Bây giờ bạn sẽ thấy xuất hiện <%=MM_editAction%> trong hộp Action.

11/ Hãy tạo thêm một số link (liên kết đến các trang giống như trong trang admin_control.asp) trong trang này như sau:

283


12/ File->Save sau đó Upload thư mục Connections và tập tin admin_add.asp lên máy chủ bằng cách click nút Put Files. Sau đó bạn có thể nhấn F12 để kiểm tra thử.

Về đầu trang

TẠO TRANG XEM SẢN PHẨM(THE ADMIN VIEW PRODUCTS PAGE)

1/ Mở trang "admin_view.asp" trong chế độ Design và tạo một tiêu đề thích hợp. Hãy chèn một table như hình bên dưới :

2/ Mở "Data Bindings" click nút + và chọn "Recordset (Query)" từ Panel Application.

3/ Trong cửa sổ "Recordset" nhập tên Recordset là "rs_view". Trong hộp Connection chọn kết nối "con_ecom" và chọn table "products" trong trường Table. Trong trường Columns chọn radio "All"

284

Bai tap nang cao

4/ Click "Test" để kiểm tra. Click "OK" 2 lần để đóng cửa sổ .

5/ Lần lượt chèn dữ liệu vào trong table. Click vào bên trong cell mà bạn muốn dữ liệu xuất hiện, sau đó chọn các trường động trong tab "Data Bindings" .Click nút "Insert" để chèn dữ liệu vào table như hình bên dưới.

6/ Đặt con trỏ trong cell lớn vào Insert->Image -> chọn Radio Data Sources sau đó chọn trường product_picture , click OK .

285


7/ Drag chọn tất cả cá cell sau đó trong tab "Server Behaviors" click nút + và chọn "Repeat Region" để tạo một vùng lặp lại.

8/ Trong cửa sổ "Repeat Region" chọn Recordset "rs_view", chọn radio "All Records" và hit "OK". Sau đó bạn có thể click nút Live Data View để kiểm tra thử.

286

Bai tap nang cao

9/ Hãy thêm một số link tới các trang quản trị như hình sau:

File -> Save. Sau đó hãy Upload trang này lên máy chủ . Nhấn F12 để kiểm tra.

Về đầu trang

TẠO CÁC TRANG XÓA SẢN PHẨM (ADMIN DELETE PRODUCTS PAGES)

1/ Mở trang "admin_delete1.asp" trong chế độ Design. tạo một tiêu đề thích hợp tạo một Table và các link như hình bên dưới.

2/ Trong tab "Data Bindings" click nút + và chọn "Recordset (Query)" . Trong cửa sổ Recordset tại hộp name nhập tên Recordset là rs_delete1 . Trong hộp Connection chọn con_ecom. Chọn table "products" trong database như hình minh họa bên dưới :

287



4/ Chọn mục DELETE? sau đó chọn tab Server Behaviors , click nút + chọn Go To Detail Page

288

Bai tap nang cao

5/ Trong mục "Link" bạn sẽ thấy mục "DELETE?" đang được chọn . Trong hộp Detail Page click nút browse tới trang admin_delete2.asp. Hãy chọn checkbox "URL Parameters" như hình bên dưới.

6/ Đánh dấu chọn tất cả các cell trong table sau đó chọn tab Server Behaviors , click + chọn Repeat Region để tạo vùng lặp lại.

289


7/ Trong cửa sổ "Repeat Region" chọn nút radio "All Records". Chọn Recordset "rs_delete1" Recordset,. Hit "OK".

8/ Trang "admin_delete1.asp" của bạn trông giống như sau:

File->Save (nhớ đừng nhấn F12 vì bạn còn phải thiết kế tiếp nữa)

9/ Mở trang "admin_delete2.asp" trong chế độ Design, tạo một tiêu đề thích hợp và tạo các link như sau:

10/ Trong tab Form click nút Forms để chèn vào một biểu mẫu như bên dưới

290

Bai tap nang cao

11/ Chèn một Table trong Form như hình bên dưới

12/ Trong Tab Form click nút Button để chèn vào mộ nút tên DELETE kiểu "Submit Button"

291


13/ Trong tab "Data Bindings" click nút + và chọn "Recordset (Query)" . Trong mục Name nhập rs_delete2 . Trong trường Connection chọn con_ecom. Trong trường Table chọn products. Trong mục Filter chọn product_id.


292

Bai tap nang cao

15/ Chọn tab "Server Behaviors", click nút + chọn "Delete Record".

16/ Trong cửa sổ "Delete Record", chọn Connection = con_ecom, "Delete From Table = products" , "Select Record From = rs_delete2" , "Unique Key Column = product_id" .Browse tới trang "admin_delete3.asp" trong mục "After Deleting, Go To". Hit "OK".

293


17/ Trang của bạn trông giống như sau:

File->Save .

18/ Mở trang "admin_delete3.asp" và thiết kế như sau:

19/ Upload tất cả các trang admin_delete1.asp, admin_delete2.asp, admin_delete3.asp lên Server bằng cách click nút Put File.

294

Bai tap nang cao

20/ Mở trang admin_control.asp nhấn F12 sau đó click vào Hyperlink dùng để xóa sản phẩm thử kiểm tra xem thử kết quả.

Về đầu trang

TẠO CÁC TRANG CẬP NHẬT SẢN PHẨM (ADMIN EDIT PRODUCTS PAGE)

1/ Mở trang "admin_update1.asp" trong chế độ Design. Tạo một tiêu đề thích hợp, tạo các link tới các trang quản trị khác và chèn vào table như hình bên dưới

2/ Chọn Panel Application,chọn tab Data Bindings click nút + và chọn Recordset (Query) . Trong cửa sổ Recordset tại hộp Name nhập tên Recordset là rs_update1. Trong trường Connection chọn con_ecom. Tại Table chọn bảng cần cập nhật là products.

295



4/ Chọn từ "UPDATE?" trong cell đầu ở góc phải. Trong tab "Server Behaviors" click + chọn "Go To Detail Page"

296

Bai tap nang cao

5/ Trong mục "Link" bạn sẽ thấy từ "Update?" đang được chọn. Trong trường "Detail Page" hãy click nút browse tới trang "admin_update2.asp". Nhớ là phải chọn chexkbox "URL Parameters".

6/ Đánh dấu chọn tất cả các cell trong table sau đó chọn tab Server Behaviors , click + chọn Repeat Region để tạo vùng lặp lại.

7/ Trong cửa sổ "Repeat Region" chọn nút radio "All Records". Chọn Recordset "rs_update1" Recordset,. Hit "OK".

297


8/ Trang "admin_update1.asp" của bạn trông giống như sau:

9/ Mở trang "admin_update2.asp" trong chế độ Design, tạo một tiêu đề thích hợp và tạo các link , mở tab Forms click nút Form để chèn vào một biểu mẫu như sau:

10/ Hãy đặt con trỏ trong dòng màu chấm đỏ (form delimiter). Chèn mộ table và các field như hình bên dưới và bạn phải chú ý là các TextField và các Textarea này phải có tên giống với các trường trong Database của bạn.

PRODUCT CATEGORY có tên "product_category"

PRODUCT NAME có tên "product_name"

PRODUCT PRICE có tên "product_price"

PRODUCT SHORT DESCRIPTION có tên "product_briefdesc"

PRODUCT FULL DESCRIPTION có tên "product_fulldesc"

298

Bai tap nang cao

PRODUCT IMAGE FILE NAME có tên "product_picture" Chú ý: trong phần cập nhật này bạn không chèn vào trường mã số sản phẩm product ID (PID) trong form vì bạn không thể cập nhật khóa của bảng được.

11/ Trong tab Data Bindings click nút + và chọn Recordset (Query). Trong hộp Name nhập rs_update2. Trong hộp Connection chọn con_ecom. Trong vùng Table chọn bảng cần cập nhật là "products" . Trong vùng lọc chọn Filter là trường product_id.

299


12/ Chọn từng trường trong table sau đó vào tab Bindding chọn trường động cần chèn vào và click nút Bind.

13/ Vào tab "Server Behaviors" click nút + chọn "Update Record".

300

Bai tap nang cao

14/ Trong cửa sổ Update Record chọn Connection là con_ecom, tại Table to Update chọn bảng products. Tại Select Record From bạn sẽ nhìn thấy rs_update2 và tại Unique Key Column bạn sẽ thấy product_id. Trong mục After Updating, Go To , click nút browse tới trang admin_update3.asp.

Trong vùng Form Elements bạn sẽ thấy chương trình tự động cập nhật các trường Form vào đúng các cột trong Database. Nếu bạn đặt tên các trường trong Form bị sai tên thì bạn sẽ gặp chữ <Ignore> lúc bấy giờ bạn phải quay lại sữa lại tên các trường Form cho giống với tên các cột trong Database.

15/ Vào File->Save . Bây giờ trang của bạn trông giống như sau:

301


16/ Mở trang "admin_update3.asp" và thiết kế như sau:

17/ Hãy upload các trang admin_update1.asp, admin_update2.asp, admin_update3.asp vào máy chủ. Sau đó hãy mở trang admin_control.asp và click vào Hyperlink dùng để cập nhật sản phẩm để kiểm tra.

Về đầu trang

TẠO CÁC QUẦY HÀNG (THE SHOP DEPARTMENTS)

302

Bai tap nang cao

1/ Mở trang shop_french_red.asp trong chế độ Design và thiết kế giao diện như bên dưới. Tạo một tiêu đề và một số link như sau:

Home liên kết tới trang default.asp

Shopping Cart liên kết tới trang shop_cart.asp

Checkout liên kết tới trang shop_check.asp

2/ Tạo một bảng như bên dưới và chèn thêm vào một hyperlink More Info - Add to Shopping Cart

3/ Bây giờ chúng ta sẽ chèn vào một Recordset dùng để lọc ra các loại rượu màu đỏ (Red). Trong phần này bạn sẽ được học cách sử dụng chế độ Recordset nâng cao. Hãy chọn tab Binddings , click vào mục Testing Server để khai báo Server kiểm tra. Trong tab Bindings click nút + và chọn Recordset (Query). Hãy click nút Advanced để chuyển sang chế độ Recordset nâng cao.

4/ Trong cửa số "Advanced" hãy nhập các thông số sau:

Name : rs_frenchred.

Connection : con_ecom.

Trong mục Database Items click vào dấu + kế Tables bạn sẽ thấy xuất hiện bảng products.

Đặt vệt sáng ngay bảng products , Click nút Select để chọn bảng.

Bạn sẽ nhìn thấy định nghĩa SQL (SQL Statement) xuất hiện như sau:

SELECT *

FROM products

303


5/ Bây giờ hãy click dấu + để để mở bảng products. Đặt vệt sáng tại trường product_category và click nút WHERE để tạo điều kiện lọc bạn sẽ thấy định nghĩa SQL như sau:

SELECT *

FROM products

WHERE product_category

304

Bai tap nang cao

6/ Bây giờ hãy đặt con trỏ trong vùng SQL sau WHERE product_category , hãy nhập vào ='red' như minh họa bên dưới

SELECT *

FROM products

WHERE product_category='red'

Chú ý: hãy sử dụng dấu nháy đơn không sử dụng dấu nháy kép.

7/ Dòng định nghĩa SQL này có nghĩa là chọn tất cả các trường trong bảng sản phẩm và chỉ chọn với điều kiện là thể loại sản phẩm là rượu màu đỏ. Bạn click nút Test để kiểm tra thử.

305


8/ Bạn thấy chỉ những mẫu tin nào mà loại sản phẩm (product_category) là màu đỏ (red) thì mới được hiện ra. Click OK để đóng cửa sổ Test.

9/ Hãy chọn tab Bindings sau đó chèn dữ liệu thích hợp vào các cell tương ứng trong table như hình minh họa bên dưới. Trong phần Bind này bạn chỉ cần Bind các trường product_name , product_briefdesc,product_price và vào Insert-> Image -> sau đó chọn nút Radio Data Sources và chọn trường product_picture. Click OK.

10/ Chọn mục More info - Add to Shopping Cart, vào tab Server Behaviors click nút + và chọn Go To Detail Page.

11/ Trong cửa sổ Go To Detail Page bạn sẽ thấy mục More info - Add to Shopping Cart được Link. Trong hộp Detail Page click nút Browse tới trang

306

Bai tap nang cao

shop_detail.asp. Bạn sẽ thấy product_id xuất hiện trong Pass URL Parameter. Recordset= rs_frenchred và Column là product_id. Bạn phải chọn checkbox URL Parameters. Hit "OK.

12/ Đánh dấu hết tất cả các cells trong table và chọn "Repeat Region" từ tab "Server Behaviors" . Chọn Radio "All Records" và click "OK".

13/ File->Save . Trang của bạn bây giờ trông giống như sau:

14/ Mở trang shop_french_white.asp trong chế độ Design. Bạn hãy tạo trang này giống như các bước tạo trang shop_french_red.asp chỉ có khác một chút là trong định nghĩa SQL bạn phải lọc ra các loại rượu màu trắng.

SELECT *

FROM products

WHERE product_category='white'

307


Trang shop_french_white.asp cuối cùng trông giống như sau:

15/ File- >Save . Sau đó hãy Upload 2 trang shop_french_white.asp, shop_french_red.asp lên máy chủ.

16/ Bây giờ bạn hãy mở trang default.asp lên và nhấn F12 để kiểm tra thử (chú ý là trang shop_detail.asp bạn chưa làm nên khi bạn click vào mục More Info - Add to Shopping Cart thì chỉ sẽ thấy báo lỗi. Bạn đừng lo lắng chúng ta sẽ xây dựng trang này sau).

Về đầu trang

THÊM SẢN PHẨM VÀO XE HÀNG (THE ADD TO CART PAGE)

Trang shop_detail.asp chứa đựng một biểu mẫu mà biểu mẫu này sẽ chuyển các thông tin về sản phẩm mà khách viếng thăm muốn mua sang trang xe hàng (shop_cart.asp). Thông tin sản phẩm được lưu trong các trường ẩn (Hidden Fields). Khi khách nhấn nút "Add To Cart" , các giá trị này được gán vào các trường ẩn và chuyển sang cho trang "shop_cart.asp". Trong trang này chúng ta sẽ đưa các giá trị này vào các biến tác vụ (Session Variable).

1/ Mở trang shop_detail.asp trong chế độ Design. Hãy thiết kế giao diện cho trang như bên dưới.

308

Bai tap nang cao

2/ Đánh dấu chọn mục <<<Back và trong hộp Link trên hộp Properties hãy nhập vào một Script để cho khách viếng thăm có thể quay về trang trước đó ....

javascript:history.go(-1)

3/ Chọn tab Bindings trong Panel Application, click nút + sau đó chọn Recordset (Query). Tạo một recordset với các thông tin sau:

Name = rs_shopdetail Connection = con_ecom Table = products Columns = All Filter = product_id Hãy để các mục khác mặc định.

309


4/ Hãy chọn tab Bindings sau đó chèn dữ liệu thích hợp vào các cell tương ứng trong table như hình minh họa bên dưới. Trong phần Bind này bạn chỉ cần Bind các trường product_name , product_fulldesc, product_price và vào Insert-> Image -> sau đó chọn nút Radio Data Sources và chọn trường product_picture. Click OK.

5/ Đặt con trỏ trong cell ở dòng cuối vào tab Form click nút Form để chèn một biểu mẫu như sau:

310

Bai tap nang cao

6/ Đặt con trỏ trong vùng chấm màu đỏ , Click nút Hidden trên tab Form để chèn trường ẩn , bạn hãy nhấn 3 lần để chèn 3 trường ẩn.

7/ Hãy chọn từng trường ẩn sau đó đặt tên chính xác cho nó như sau:

Trường ẩn đầu tên pid.

Trường ẩn thứ 2 tên productName.

Trường ẩn thứ 3 tên productPrice.

Những tên này sẽ sử dụng trong phần shopping cart. Do đó bạn hãy đặt tên cho thật chính xác nếu không site của bạn sẽ không làm việc được.

8/ Hãy chèn một nút kiểu "Submit" vào kế bên với nhãn là Add To Cart.

9/ Click chọn nút Add To Cart sau đó click vào biểu tượng cây bút trên hộp Properties (Quick Tag Editor). Bạn sẽ thấy xuất hiện thẻ <input>. (Xin vui lòng xem lại bài FORM trong phần căn bản)

311


10/ Hãy thay đổi kiểu của nút từ Submit sang image và thêm thuộc tính src dùng để chỉ đường dẫn tới hình ảnh của nút như sau:

<input type=image src="buttons/addtocart.gif">

11/ Bây giờ chúng ta sẽ Bind dữ liệu vào trường ẩn . Chọn trường ẩn đầu tiên pid, sau đó chọn trường product_id trong tab Bindings ,click vào nút Bind . Bạn hãy chắc rằng dữ liệu được Bind chính xác vào các trường ẩn.

12/ Chọn trường ẩn thứ 2 productName, sau đó chọn trường product_name" trong tab Bindings click vào nút Bind.

13/ Chọn trường ẩn thứ 3 productPrice, sau đó chọn trường product_price trong tab Bindings click vào nút Bind.

312

Bai tap nang cao

14/ Cuối cùng hãy chọn Form (bằng cách click vào đường chấm màu đỏ) và đặt tên cho Form là add_form , tại Action hãy nhập vào địa chỉ của trang shop_cart.asp và chọn phương pháp Method là POST.

15/ Cuối cùng table và form của bạn trông giống nhưs sau......

16/ File->Save. Sau đó hãy Upload trang shop_detail.asp này lên máy chủ. Hãy mở trang default.asp lên sau đó nhấn F12 để kiểm tra thử xem sao.

Về đầu trang

TẠO TRANG XE HÀNG (THE SHOPPING CART)

1/ Mở trang shop_cart.asp trong chế độ Design và thiết kế giao diện như hình bên dưới. Hãy tạo một Form và chèn một table bên trong Form này.

313


2/ Trong cell ở dòng cuối chèn 1 bảng 1 dòng 3 cột. Chèn một nút Back to Shop (buttons/backtoshop.gif) trong cell bên trái và

link tới trang default.asp. Chèn một nút Checkout (buttons/checkout.gif) nằm ngay giữa và link tới

trang shop_check.asp. Chèn một nút Submit trong cell cuối tên Update Cart Tạo nề cho cell tùy theo ý thích của bạn.

3/ Click chọn nút Update Cart sau đó click nút biểu tượng cây bút nhỏ trên hộp Properties(Quick Tag Editor). Hãy đổi thẻ <input> thành <input type=image src="buttons/update.gif"> để đổi thành button ảnh.

4/ Hãy chèn một trường ẩn (Hidden Field) trước mục Your Shopping Cart , hãy đặt tên cho trường ẩn là updateQ và đặt giá trị mặc định là 1.

314

Bai tap nang cao

5/ Trong cell bên dưới từ Quantity hãy chèn một Text Field. Chọn Text Field sau đó trong hộp thuộc tính Properties tại TextField nhập vào pq<%=localCart(CARTPID, i )%> , trong Char Width nhập vào 4, trong mục Init Val nhập giá trị <%=localCart(CARTPQUANTITY,i )%>

6/ Click vào vùng chấm màu đỏ (form delimiter) để chọn form và trong hộp thuộc tính của Form (Form Properties) tại Action click biểu tượng màu vàng và chọn trang shop_cart.asp và chọn phương pháp (Method) là POST.

7/ Trang của bạn bây giờ trông giống như sau:

315


8/ Copy mọi thứ bên dưới từ <% đến %> sau đó dán vào trang shop_cart.asp trước thẻ <HTML>. Đoạn code này bạn có thể tìm thấy trong tập tin cart.txt khi bạn download mã nguồn của chương trình này về.

<%' Define ConstantsCONST CARTPID = 0CONST CARTPNAME = 1CONST CARTPPRICE = 2CONST CARTPQUANTITY = 3 '------------------------------------------------' GET THE SHOPPING CART AND OR SET UP SESSION VARIABLEIF NOT isArray( Session( "cart" ) ) THENDIM localCart( 4, 20 )ELSElocalCart = Session( "cart" )END IF'------------------------------------------------' GET THE PRODUCT INFORMATIONproductID = TRIM( Request( "pid" ) )productName = TRIM( Request( "productName" ) )productPrice = TRIM( Request( "productPrice" ) )'---------------------------------------------------' ADD ITEM TO SHOPPING CARTIF productID <> "" THENfoundIT = FALSE

316

Bai tap nang cao

FOR i = 0 TO UBOUND( localCart )IF localCart( CARTPID, i ) = productID THENlocalCart( CARTPQUANTITY, i ) = localCart( CARTPQUANTITY, i ) + 1foundIT = TRUEEXIT FOREND IFNEXTIF NOT foundIT THENFOR i = 0 TO UBOUND( localCart, 2 )IF localCart( CARTPID, i ) = "" THENlocalCart( CARTPID, i ) = productIDlocalCart( CARTPNAME, i ) = productNamelocalCart( CARTPPRICE, i ) = productPricelocalCart( CARTPQUANTITY, i ) = 1EXIT FOREND IFNEXTEND IFEND IF'------------------------------------------------' UPDATE THE QUANTITIES IN THE SHOPPING CARTIF Request( "updateQ" ) <> "" THENFOR i = 0 TO UBOUND( localCart, 2 )newQ = TRIM( Request( "pq" & localCart( CARTPID, i ) ) )IF newQ = "" or newQ = "0" THENlocalCart( CARTPID, i ) = ""ELSEIF isNumeric( newQ ) THENlocalCart( CARTPQUANTITY, i ) = newQEND IFEND IFNEXTEND IF'-------------------------------------------------------' UPDATE SESSION VARIABLE WITH ARRAYSession( "cart" ) = localCart'-------------------------------------------------------%>

10/ Bây giờ chúng ta sẽ dán 6 đoạn code nhỏ ASP vào trong phần HTML của trang. Chúng ta tạn gọi các đoạn code nhỏ này là "paste 1, paste 2 , paste 3, paste 4 , paste 5, paste 6" . Hãy xem hình minh họa bên dưới để bạn có ý tưởng dán code như thế nào vào trang .(Chú ý là bạn phải đứng ở chế độ Code).

"Paste 1" được dán sau thẻ <BODY>.

"Paste 2" được dán vào trong table giữa thẻ kết thúc </tr> của dòng đầu và bắt đầu thẻ <tr> của dòng thứ 2.

"Paste 3" được dán vào trong table tại ô đầu của dòng 2.

"Paste 4" được dán vào trong table tại dòng 2 ô 2.

"Paste 5" được dán vào trong table giữa thẻ kết thúc </tr> của dòng 2 và thẻ bắt đầu <tr> của dòng 3.

"Paste 6" được dán vào trong table tại ô 3 của dòng 3.

317


11/ Đây là đoạn code mẫu của 6 phần mà bạn sẽ copy dán vào trong phần <HTML>.

Paste 1:<%orderTotal = 0%>Paste 2:<% FOR i = 0 TO UBOUND( localCart, 2 )IF localCart( CARTPID, i ) <> "" THENorderTotal = orderTotal + ( localCart( CARTPPRICE, i ) * localCart( CARTPQUANTITY, i ) )%>Paste 3:<%=Server.HTMLEncode( localCart( CARTPNAME, i ) )%>Paste 4:<%=formatCurrency( localCart( CARTPPRICE, i ) )%>Paste 5:<% END IFNEXT%>Paste 6:<%=formatCurrency( orderTotal )%>

12/ Mẫu "Paste 1" trông giống như sau.....(Chú ý: bạn sẽ không thấy dòng màu đỏ ***paste 1 here*** trong đoạn code của bạn, đây là chú thích để cho bạn biết là sẽ dán vào đây.

<body bgcolor="#FEFEFE" text="#CC3366" link="#CC3366" vlink="#CC3366" alink="#CC3366" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

***Paste 1 here***

và đã được đổi thành như sau......

<body bgcolor="#FEFEFE" text="#CC3366" link="#CC3366" vlink="#CC3366" alink="#CC3366" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

318

Bai tap nang cao

<%orderTotal = 0%>

13/ Mẫu "Paste 2" trông giống như sau.....

Quantity</td></tr>***Paste 2 here***<tr valign="top" bgcolor="#F0F0F0">


Quantity</td></tr><% FOR i = 0 TO UBOUND( localCart, 2 )IF localCart( CARTPID, i ) <> "" THENorderTotal = orderTotal + ( localCart( CARTPPRICE, i ) * localCart( CARTPQUANTITY, i ) )%><tr valign="top" bgcolor="#F0F0F0">


<td width="55" bgcolor="#F1E2F1">Quantity</td></tr><tr valign="top" bgcolor="#F0F0F0"> <td width="353" bgcolor="#F0F0F0" height="22">**Paste 3 here**</td>


<td width="55" bgcolor="#F1E2F1">Quantity</td></tr><tr valign="top" bgcolor="#F0F0F0"> <td width="353" bgcolor="#F0F0F0" height="22"><%=Server.HTMLEncode( localCart( CARTPNAME, i ) )%></td>


<td width="55" bgcolor="#F1E2F1">Quantity</td></tr><tr valign="top" bgcolor="#F0F0F0"> <td width="353" bgcolor="#F0F0F0" height="22"><%=Server.HTMLEncode( localCart( CARTPNAME, i ) )%></td><td width="97" height="22">**Paste 4 here**</td>


319


<td width="55" bgcolor="#F1E2F1">Quantity</td></tr><tr valign="top" bgcolor="#F0F0F0"> <td width="353" bgcolor="#F0F0F0" height="22"><%=Server.HTMLEncode( localCart( CARTPNAME, i ) )%></td><td width="97" height="22"><%=formatCurrency( localCart( CARTPPRICE, i ) )%></td>


<td width="55" height="22"> <input type="text" name="pq<%=localCart(CARTPID, i )%>" size="4" value="<%=localCart(CARTPQUANTITY, i )%>"></td></tr>****Paste 5 here****<tr valign="top" bgcolor="#F0F0F0">


<td width="55" height="22"> <input type="text" name="pq<%=localCart(CARTPID, i )%>" size="4" value="<%=localCart(CARTPQUANTITY, i )%>"></td></tr> <% END IFNEXT%><tr valign="top" bgcolor="#F0F0F0">


<td width="97">Order Total:</td><td width="55">**paste 6 here**</td></tr>


<td width="97">Order Total:</td><td width="55"><%=formatCurrency( orderTotal )%></td></tr>

18/ Vào file chọn save sau đó upload trang shop_cart.asp vào thư mục wwwroot/ecom.

Về đầu trang

320

Bai tap nang cao

TẠO TRANG THANH TOÁN TIỀN (THE CHECKOUT PAGE)

Một khi người mua hàng đã chọn xong các mặt hàng bỏ vào trong xe hàng thì họ sẽ click vào nút Checkout để đi đến trang thanh toán tiền. Tất cả các thông tin chi tiết trong xe hàng (ngoại trừ phần mô tả sản phẩm) sẽ được hiện trong hóa đơn thanh toán. Trong trang thanh toán tiền này cũng bao gồm một biểu mẫu cho phép người mua hàng điền vào các thông tin về địa chỉ của mình để dễ dàng cho việc phân phát sản phẩm tới họ.

Ở đây chúng ta sẽ sử dụng biến "Session Variable" một lần nữa để hiển thị các thông tin trong xe hàng lên biểu mẫu. Các thông tin từ forms sau này sẽ được gởi đến cho trang thanh toán bằng thẻ tín dụng (Credit Card) bằng các trường ẩn (Hidden Fields) và từ trang Credit Card các thông tin chi tiết sẽ được email đến khách hàng để khách hàng xác nhận thông tin (Confirmation) yêu cầu (Order) mua hàng.

1/ Mở trang shop_check.asp trong chế độ Design và thiết kế giao diện như biên dưới. Sau đó hãy chèn một Form vào trang với tên Form là checkout. Tại Action chỉ đường dẫn đến trang shop_ccard.asp và chọn phương pháp (Method) là POST.

2/ Hãy chèn một table vào trong form và cấu hình như sau:

321


3/ Chèn một Textarea tên message có độ rông 50 characters và chiều cao 5 dòng để hiển thị chi tiết các yêu cầu.

4/ Bây giờ bạn hãy chèn các Textfield vào các cell còn lại như hình bên dưới. Sau đó chèn một nút "Submit" tên "Next" trong dòng cuối.

322

Bai tap nang cao

5/ bây giờ hãy đặt tên chính xác cho các TextFiled như minh họa bên dưới. Chú ý là giá trị của các TextField này sẽ được chuyển qua cho trang "Credit Card" và được gởi mail đến cho khách hàng.

"First Name" = firstname

"Last Name" = lastname

"Address line 1" = address1

"Address line 2" = address2

"Town / City" = town

"Postcode / Zip" = code

"County / State" = county

"Country" = country

"Telephone" = phone

"Email" = email

323


6/ Bây giờ chèn một trường ẩn như bên dưới. Đặt tên cho nó là total và giá trị mặc định là total.

7/ Chèn tiếp một trường ẩn tên contents và giá trị mặc định là contents

(Chú ý: Chúng ta sẽ dùng các trường ẩn này để thu thập thông tin từ xe hàng và chuyển qua trang thanh toán. Tôi muốn sử dụng một số trường ẩn trong phần này để sau này có thể mở rộng hệ thống chương trình (tạo phần tax &shipping).

8/ Chúng ta không muốn khách hàng thay đổi thông tin yêu cầu trong hộp "message" được tạo trong bước 3 do đó bạn hãy chọn TextArea sau đó viết thêm một đoạn JavaScript. Hãy click chọn TextArea sau đó chuyển qua chế độ "Code View". Bạn sẽ nhìn thấy đoạn ãm HTML sau...

9/ Hãy thêm một đoạn JavaScript như sau:

value=onfocus="window.document.checkout.txtReadonly.blur()" READONLY=true

10/ Bây giờ hãy chọn nút Next sau đó sử dụng chức năng Quick Tag Editor để thay đổi lại thẻ <input> thành nút ảnh <input type=image src="buttons/next.gif>

324

Bai tap nang cao

11/ Bây giờ form của bạn trông giống như sau:

12/ Bây giờ bạn hãy mở trang "checkout.txt" trong phần code bạn đã download

325


hãy copy đoạn mã từ <% đến %> sau đó dán vào trước thẻ <HTML> .

<%' THIS BIT DEFINES THE CONSTANTS USED IN OUR SCRIPT CONST CARTPID = 0CONST CARTPNAME = 1CONST CARTPPRICE = 2CONST CARTPQUANTITY = 3'------------------------------------------------' THIS BIT GETS THE SHOPPING CART SESSION VARIABLEIF NOT isArray( Session( "cart" ) ) THENDIM localCart( 4, 20 )ELSElocalCart = Session( "cart" )END IF'-------------------------------------------------------%>

13/ Trong chế độ "Code View" bạn sử dụng như sau...

<%

Đoạn Code ASP phía trên sẽ nằm trước thẻ HTML

%>

<HTML>

Đây là nội dung trang web của bạn

</HTML>

14/ Bây giờ chúng ta sẽ copy và dán thêm 3 đoạn code nữa. Chúng ta tạm thời gọi 3 đoạn code nhỏ này là paste contents, paste total và paste contents hidden. Hãy xem hình minh hoạ bên dưới để có ý tưởng dán vào đâu. Chú ý:Bạn phải sử dụng chế độ CODE không sử dụng chế độ design view.

15/ Bạn hãy copy đoạn code này và dán vào đúng nơi đã chỉ bên trên'paste contents:<%FOR x = 0 TO UBOUND( localCart, 2 )IF localCart( CARTPID, x ) <> "" THENorderTotal = orderTotal + ( localCart( CARTPPRICE, x ) * localCart( CARTPQUANTITY, x ) ) DIM chId,chProduct,chPrice,chQuantitychId=(localCart( CARTPID, x) )

326

Bai tap nang cao

chProduct=Server.HTMLEncode( localCart( CARTPNAME, x ) )chPrice=formatCurrency( localCart( CARTPPRICE, x ) )chQuantity=localCart( CARTPQUANTITY, x )%><%="ID#: " & chId & vbcrlf & "Wine: " & chProduct & vbcrlf &"Unit Price: " & chPrice & vbcrlf &"Quatity: " & chQuantity & " Bottles" & vbcrlf & "_________" & vbcrlf%><%END IFNEXT%>'paste total:<%=formatCurrency( orderTotal )%>'paste contents hidden:<%FOR x = 0 TO UBOUND( localCart, 2 )IF localCart( CARTPID, x ) <> "" THENorderTotal = orderTotal + ( localCart( CARTPPRICE, x ) * localCart( CARTPQUANTITY, x ) )chId=(localCart( CARTPID, x) )chProduct=Server.HTMLEncode( localCart( CARTPNAME, x ) )chPrice=formatCurrency( localCart( CARTPPRICE, x ) )chQuantity=localCart( CARTPQUANTITY, x )%><%="ID#: " & chId & vbcrlf & "Wine: " & chProduct & vbcrlf &"Unit Price: " & chPrice & vbcrlf &"Quatity: " & chQuantity & " Bottles" & vbcrlf & "_________" & vbcrlf%><%END IFNEXT%>

16/ Mẫu "paste contents" trông giống như sau.....(Chú ý: bạn sẽ không thấy dòng màu đỏ ***paste contents here*** trong đoạn code của bạn, đây là chú thích để cho bạn biết là sẽ dán vào đây.

<textarea name="message" value=onfocus="window.document.form1.txtReadonly.blur()"READONLY=true cols="50" rows="5">***paste contents here***</textarea>

được thay đổi thành ......

<textarea name="message" value=onfocus="window.document.form1.txtReadonly.blur()"READONLY=true cols="50" rows="5"><%FOR x = 0 TO UBOUND( localCart, 2 )IF localCart( CARTPID, x ) <> "" THENorderTotal = orderTotal + ( localCart( CARTPPRICE, x ) * localCart( CARTPQUANTITY, x ) ) DIM chId,chProduct,chPrice,chQuantitychId=(localCart( CARTPID, x) )chProduct=Server.HTMLEncode( localCart( CARTPNAME, x ) )chPrice=formatCurrency( localCart( CARTPPRICE, x ) )chQuantity=localCart( CARTPQUANTITY, x )%><%="ID#: " & chId & vbcrlf & "Wine: " & chProduct & vbcrlf &"Unit Price: " & chPrice & vbcrlf &"Quatity: " & chQuantity & " Bottles" & vbcrlf &

327


"_________" & vbcrlf%><%END IFNEXT%></textarea>

17/ Mẫu "paste total" trông giống như sau.....(Chú ý: bạn sẽ không thấy dòng màu đỏ ***paste total here*** trong đoạn code của bạn, đây là chú thích để cho bạn biết là sẽ dán vào đây.

<div align="center">Total Order Value ***paste total here*** 


<div align="center">Total Order Value <%=formatCurrency( orderTotal )%> 

18/ Mẫu "paste total" cũng được dán vào trong trường ẩn "Hidden Field", Hãy nhìn đoạn code sau....

<input type="hidden" name="total" value="total">


<input type="hidden" name="total" value="<%=formatCurrency( orderTotal )%>">

19/ Mẫu "paste contents hidden" trông giống như sau .....

<input type="hidden" name="contents" value="contents">


<input type="hidden" name="contents" value="<%FOR x = 0 TO UBOUND( localCart, 2 )IF localCart( CARTPID, x ) <> "" THENorderTotal = orderTotal + ( localCart( CARTPPRICE, x ) * localCart( CARTPQUANTITY, x ) )chId=(localCart( CARTPID, x) )chProduct=Server.HTMLEncode( localCart( CARTPNAME, x ) )chPrice=formatCurrency( localCart( CARTPPRICE, x ) )chQuantity=localCart( CARTPQUANTITY, x )%><%="ID#: " & chId & vbcrlf & "Wine: " & chProduct & vbcrlf &"Unit Price: " & chPrice & vbcrlf &"Quatity: " & chQuantity & " Bottles" & vbcrlf & "_________" & vbcrlf%><%END IFNEXT%>">

20/ Vào file chọn save sau đó upload trang shop_check.asp vào thư mục wwwroot/ecom.

328

Bai tap nang cao

Về đầu trang

TẠO TRANG THẺ TÍN DỤNG(THE CREDIT CARDS PAGE)

Trang thẻ tín dụng này là nơi sẽ hỏi khách hàng các chi tiết về cách thanh toán tiền. Bởi vì cách thanh toán liên quan đến thông tin nhạy cảm như thẻ tín dụng do đó trang này bạn nên đặt trên một máy chủ bảo mật (secure server).

Trang này cũng bao gồm một form mà khách hàng sẽ nhập vào các thông tin chi tiết của họ. Form cũng chứa đựng nhiều trường ẩn "Hidden Fields". Những trường ẩn này thu thập tất cả các thông tin đã được chuyển qua từ trang "Checkout" .

Một khi form được điền vào , hãy nhấn nút "Submit Order" để gởi tất cả các thông tin đến trang "post.asp". Trang "post.asp" sẽ email những thông tin này đến khách hàng để khách hàng xác nhận các món hàng đã mua và khách hàng cũng nhận được thông báo cám ơn.

1/ Mở trang "shop_ccard.asp" trong chế độ Design và thiết kế nó như giao diện bên dưới. Hãy chèn vào một Form. Trong Form hãy chèn vào một Table và cấu hình Table như bên dưới.

2/ Đặt tên biểu mẫu là ccardform. Đặt Action đến trang post.asp và chọn phương pháp là POST.

3/ Trong tab Form chèn một "List/Menu" như hình bên dưới đặt tên cho nó là card_type và đặt chiều cao là 1.

329


4/ Click chọn "List Box". Sau đó click nút List Values. Trong cột Item Label nhập Visa. Click vào khoảng trống bên cột Value và nhập Visa. Click nút "+" để nhập các Item và giá trị như hình bên dưới. Bạn có thể nhập tất cả các loại credit card mà bạn muốn chấp nhận. Hit "OK".

5/ Trong hộp thuộc tính tại hộp "Initially Selected" chọn Visa.

6/ Bây giờ bạn hãy chèn tất cả các textfields khác như hình bên dưới và đặt tên cho các textfields như sau:

Credit / Debit Card = "card_type"

Credit Card Number = "cardnumber"

Name On Card = "cardholder"

Expiry Date = "expires"

Issue Number = "issue"

330

Bai tap nang cao

Billing Address = "billing_addr"

Chèn một nút "Submit Button" với nhãn tên là "Submit Order".

Form của bạn trông giống như sau this....

7/ Bây giờ bạn hãy chèn vào 12 trường ẩn "Hidden Fields" như sau:

8/ Từ trái sang phải tên các trường ẩn như sau.....

firstname lastname address1 address2 town code county country phone email total contents

331


9/ Mở tab Bindings trong panel Application , click vào nút "+" và chọn Request Variable.

10/ Chọn Request.Form từ hộp Type. Nhập vào firstname trong hộp Name. Hit "OK".

11/ Trong tab Bindings bạn sẽ nhìn thấy một biểu tượng tên Request và phía dưới nó có một biểu tượng sấm chớp tên Form.firstname.

12/ Click nút "+" lần nữa và trong cửa sổ Request Variable bạn cũng chọn Request.Form và lần này nhập là lastname trong hộp Name. Click "OK".

332

Bai tap nang cao

13/ Tiếp tục định nghĩa Request.Form và đặt tên tại hộp Names như hình minh họa bên dưới.

firstname lastname address1 address2 town code county country phone email total contents

14/ Bây giờ chúng ta sẽ "Bind" dữ liệu "Request.Form" đến các trường ẩn Hidden Fields liên quan như sau...

Click vào trường ẩn tên firstname.

Click vào Form.firstname trong tab Bindings để chọn nó.

Click vào nút Bind.

Hãy lặp lại cho các trường ẩn còn lại tương ứng với các biến Request.Form

333


15/ Chọn nút Submit Order sau đó sử dụng chức năng "Quick Tag Editor" để thay đổi thẻ <input> thành <input type=image src="buttons/submit.gif">

16/ Bây giờ Form của bạn trông giống như sau....

334

Bai tap nang cao

17/ Vào file chọn save sau đó upload trang shop_ccard.asp vào thư mục wwwroot/ecom. Mở trang default.asp lên nhấn F12 để kiểm tra thử xem sau.

Về đầu trang

TẠO TRANG GỞI MAIL ĐẾN KHÁCH HÀNG(THE EMAIL ORDERS PAGE)

Trong trang này chúng ta sẽ thu thập tất cả các thông tin từ các trang "Shopping Cart" , "Checkout" và trang "Credit Card", chúng ta sẽ định dạng thông tin và email các thông tin này đến người chủ cửa hàng (shop owner) và yêu cầu người mua hàng (shopper) xác nhận các thông tin yêu cầu.

Trong trang này chúng ta sẽ sử dụng đối tượng mail CDONTS chuẩn của Microsoft Internet Information Server. (Xin vui lòng xem lại cách sử dụng đối tượng CDONTS trong các bài học trước)

1/ Mở trang post.asp. Hãy nhập vào đoạn code bên dưới trước thẻ <HTML>

<% @language="VBSCRIPT" %>

<%

' SEND EMAIL TO THE SHOP OWNERDim shopMail, shopBody

Set shopMail = CreateObject("CDONTS.NewMail")

shopBody="First Name: "& request.form("firstname") & vbcrlf

shopBody=shopBody & "Last Name: " & request.form("lastname") & vbcrlf

335


shopBody=shopBody & "Address 1: "& request.form ("address1") & vbcrlfshopBody=shopBody & "Address 2: "& request.form ("address2") & vbcrlfshopBody=shopBody & "City / Town: " & request.form ("town") & vbcrlfshopBody=shopBody & "Post Code / Zip: " & request.form ("code") & vbcrlfshopBody=shopBody & "County / State: " & request.form ("county") & vbcrlfshopBody=shopBody & "Country: " & request.form ("country") & vbcrlfshopBody=shopBody & "Phone: " & request.form ("phone") & vbcrlfshopBody=shopBody & "Email: " & request.form ("email") & vbcrlf & vbcrlfshopBody=shopBody & "Card Type: " & request.form ("card_type") & vbcrlfshopBody=shopBody & "Card Number: " & request.form ("cardnumber") & vbcrlfshopBody=shopBody & "Card Holder: " & request.form ("cardholder") & vbcrlfshopBody=shopBody & "Expire Date: " & request.form ("expires") & vbcrlfshopBody=shopBody & "Switch Issue: " & request.form ("issue") & vbcrlfshopBody=shopBody & "Billing Address: " & vbcrlf & request.form ("billing_addr") & vbcrlfshopBody=shopBody & "Order Contents: " & vbcrlf & request.form ("contents") & vbcrlfshopBody=shopBody & "Total Order Value: " & request.form ("total")

shopMail.From="[email protected]"shopMail.To="[email protected]"shopMail.Subject="NEW ORDER"shopMail.Body=shopBodyshopMail.Sendset shopMail=nothing

' SET UP MAIL FOR CUSTOMER

DIM custMail, custBodySet custMail = CreateObject("CDONTS.NewMail")

custBody="First Name: "& request.form("firstname") & vbcrlfcustBody=custBody & "Last Name: " & request.form("lastname") & vbcrlfcustBody=custBody & "Address 1: "& request.form ("address1") & vbcrlfcustBody=custBody & "Address 2: "& request.form ("address2") & vbcrlfcustBody=custBody & "City / Town: " & request.form ("town") & vbcrlfcustBody=custBody & "Post Code / Zip: " & request.form ("code") & vbcrlfcustBody=custBody & "County / State: " & request.form ("county") & vbcrlfcustBody=custBody & "Country: " & request.form ("country") & vbcrlfcustBody=custBody & "Phone: " & request.form ("phone") & vbcrlfcustBody=custBody & "Email: " & request.form ("email") & vbcrlf & vbcrlfcustBody=custBody & "Card Type: " & request.form ("card_type") & vbcrlfcustBody=custBody & "Card Number: *** As Supplied***" & vbcrlfcustBody=custBody & "Card Holder: " & request.form ("cardholder") & vbcrlfcustBody=custBody & "Expire Date: " & request.form ("expires") & vbcrlfcustBody=custBody & "Switch Issue: " & request.form ("issue") & vbcrlfcustBody=custBody & "Billing Address: " & vbcrlf & request.form ("billing_addr") & vbcrlfcustBody=custBody & "Order Contents: " & vbcrlf & request.form ("contents")custBody=custBody & "Total Order Value: " & request.form ("total")

custMail.From="[email protected]"custMail.To=request.form ("email")

336

Bai tap nang cao

custMail.Subject="THANK YOU FOR YOUR ORDER "& request.form ("firstname") & " " & request.form ("lastname")custMail.Body=custBodycustMail.Sendset custMail=nothing%>

<html><head><title> Thank You</title><META HTTP-EQUIV="refresh" CONTENT=12;URL="http://www.ttdtmt.edu.vn/ecom"></head><body bgcolor="#FEFEFE" text="#CC3366" link="#CC3366" vlink="#CC3366" alink="#CC3366"><div align="center"> THANK YOU FOR YOUR ORDERYOU WILL SHORTLY RECEIVE A CONFIRMATION E-MAIL****IF YOU ARE NOT AUTOMATICALLY RETURNED TO THE HOME PAGE IN10 SECONDS<a href="default.asp">CLICK HERE</a></div></body></html>

2/ File->Save sau đó Upload trang này lên máy chủ vào thư mục wwwroot\ecom

3/ Vào thư mục Connections , mở trang con_ecom.asp sửa lại chuỗi kết nối đến tập tin cơ sở dữ liệu để sau này khi Upload Website lên máy chủ thi chúng ta không cần khai báo DSN trên máy chủ.

Nội dung cũ của tập tin con_ecom.asp

<%

' FileName="Connection_odbc_conn_dsn.htm"

' Type="ADO"

' HTTP="false"

' Catalog=""

' Schema=""

MM_con_ecom_STRING = "dsn=ecom;"

%>

Bạn sẽ thay đổi tập tin này lại như sau...

<%

337


' FileName="Connection_odbc_conn_dsn.htm"

' Type="ADO"

' HTTP="false"

' Catalog=""

' Schema=""

MM_con_ecom_STRING = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("products.mdb")

%>

Về đầu trang

Build a Poll

TẠO BẢNG THĂM DÒ Ý KIẾN (POLL / VOTE)

Bạn có thể Download ví dụ bằng cách click vào đây

Một hệ thống bình chọn thường bao gồm 2 phần.

Trang bình chọn. Trang kết quả bình chọn.

Bảng bình chọn của bạn có thể thiết kế như sau:

1/ Tạo một thư mục trên desktop tên poll. Sau đó copy thư mục này vào thư mục wwwroot trên máy chủ webser nội bộ của bạn.

2/ Tạo một Database trong Access và lưu với tên poll.mdb. Save nó vào thư mục poll trên Destop và wwwroot.

Trong Access tạo một Table tên mxpoll. Tạo một trường tên ID là khóa chính (Primary Key) của bảng, trường này có kiểu dữ liệu (Data Type) là AutoNumber.

Một trường thứ 2 tên là Choice có kiểu dữ liệu (Data Type) là số Number .

338

Bai tap nang cao

Table của bạn trông giống như sau:

3/ Mở "ODBC Data Source Administrator" từ control panel và tạo một "DSN" tới tập tin database của bạn tên là mxpoll. Sau này chúng ta sẽ tạo một chuỗi kết nối bằng cách sử dụng phương pháp Server.MapPath. (Xin vui lòng xem thêm giáo trình ASP)

4/ Bước kế kiếp bạn sẽ cấu hình DWMX2004 như sau:

Từ menu Site->Manage Site..., click nút New->Site.

Trong cử sổ cấu hình chọn tab Advanced. Sau đó chọn tiếp mục Local Info từ Category.

Trong hộp Site Name nhập tên site là poll.

Trong hộp Local Root Folder click nút browse tới thư mục poll trên desktop (hoặt bất cứ nơi nào nơ mà bạn lưu trữ root folder).

Bạn đừng nhấn nút OK !

Chọn tiếp mục Remote Info từ Category.

Từ menu Access chọn Local/Network.

Trong hộp Remote Folder, click nút browse tới thư mục poll lưu trong thư mục wwwroot trên máy chủ.

Bạn đừng click OK.

339


Chọn tiếp mục Testing Server từ Category.

Từ menu Server Model chọn ASP VBScript.

Từ menu Access, chọn Local/Network.

Bạn sẽ nhìn thấy trong hộp Testing Server Folder sẽ xuất hiện đường dẫn tới thư mục poll trên máy chủ.

Bạn cũng sẽ thấy địa chỉ dùng để kiểm tra chương trình. Chú ý là bạn phải tạo một thư mục ảo tên poll ánh xạ đến thư mục poll trong wwwroot trên máy chủ trong IIS Server. (Xin xem lại cách tạo thư mục ảo trong IIS)

Click OK để đóng hộp thoại.

Click nút Done để hoàn thành.

340

Bai tap nang cao

5/ Trong Local website hãy click phải chuột vào thư mục poll sau đó vào menu File chọn New File. Hãy tạo 2 tập tin tên là vote.asp và result.asp.

Về đầu trang

TẠO TRANG BÌNH CHỌN (THE VOTING PAGE)

1/ Mở trang vote.asp sau đó nhập vào một tiêu đề thích hợp ví dụ Vote For Your Favourite Drink . Chọn tab Forms, click nút Form để chèn một biểu mẫu (nếu bạn không thấy đường chấm màu đỏ (Form Delimiter) hãy vào Edit > Preferences > Invisible Elements và chọn check box Form Delimiter

2/ Click vào bên trong Form Delimiter chèn vào một table 6 dòng 2 cột

3/ Sử dụng chức năng trộn ô (Merge Cells) hãy cấu hình table như bên dưới

341


4/ Chọn tab Forms , click nút Radio Button để chèn vào 4 Radio button và click nút Button để chèn vào một nút kiểu Submit như hình bên dưới...

5/ Click chọn Radio Button đầu tiên tại mục Beer. Trong hộp Properties, đặt tên cho nút là vote và đặt giá trị là 1. Bạn có thể chọn giá trị khởi đầu (Initial State) là dạng Checked.

342

Bai tap nang cao

6/ Click chọn Radio Button thứ 2 tại mục Wine. Trong hộp Properties cũng đặt tên cho nút là vote và đặt giá trị là 2. Hãy chọn giá trị khởi đầu là Unchecked.

7/ Click chọn Radio Button thứ 3 tại mục Whiskey. Trong hộp Properties cũng đặt tên cho nút là vote và đặt giá trị là 3. Hãy chọn giá trị khởi đầu là Unchecked.

8/ Click chọn Radio Button thứ 4 tại mục Tea. Trong hộp Properties cũng đặt tên cho nút là vote và đặt giá trị là 4. Hãy chọn giá trị khởi đầu là Unchecked.

9/ Click chọn nút Submit Button trong hộp Properties đặt tên cho nút là VOTE và chọn kiểu nút là Submit form.

10/ Bước kế tiếp là bạn hãy khai báo Database. Trong Application, trong tab Database click nút + , chọn Data Source Name [DSN].

343


11/ Trong cửa sổ DSN nhập vào mxpoll tại hộp Connection Name. Từ danh sách Data Source Name [DSN] hãy chọn mxpoll. Bạn có thể click nút Test để kiểm tra. Nếu gặp thông báo The connection was made successfully. Hãy click OK.

12/ Trong tab Database bạn sẽ nhìn thấy Databases tên mxpoll.

13/ Click vào tab Server Behaviors,click vào nút "+" chọn Insert Record.

344

Bai tap nang cao

14/ Trong cửa sổ Insert Record hãy cấu hình các thông số sau: Trong hộp Connection chọn mxpoll Trong hộp Insert Into Table chọn table mxpoll. Trong hộp After Inserting, Go To click nút Browse chọn trang result.asp. Trong hộp Get Values From bạn sẽ thấy xuất hiện tên biểu mẫu của bạn là

form1 Trong mục Form Elements bạn sẽ nhìn thấy dòng "vote inserts into

column <ignore>". Hãy chọn dòng này sau đó tại mục Column chọn Choice. Dòng Form Elements sẽ đổi thành "vote inserts into column "Choice" [Numeric] như hình minh họa bên dưới. Click OK.

15/ Form của bạn bây giờ trông giống như sau:

345


16/ File-> Save. Click nút Put Files để Upload trang này lên máy chủ vào thư mục poll

Về đầu trang

TẠO TRANG KẾT QUẢ (THE RESULTS PAGE)

1/ Mở trang result.asp trong Dreamweaver MX 2004, hãy tạo giao diện cho trang theo ý thích của bạn. Tạo một tiêu đề thích hợp sau đó chèn vào một table để hiển thị kết quả bình chọn như bên dưới. Nếu cần thiết bạn có thể tạo một link để quay về trang vote.asp.

346

Bai tap nang cao

2/ Mở Panel Application -> chọn tab Bindings , click nút "+" và chọn Recordset (Query).

3/ Khi cửa sổ Recordset xuất hiện bạn hãy chọn chế độ Recordset đơn giản (Simple) Trong hộp Name nhập rs_poll. (hãy nhớ tên này vì sau này nó sẽ liên quan

đến đoạn code viết thêm của chúng ta). Từ menu Connection chọn mxpoll. Từ menu Table chọn mxpoll. Hãy để các trường khác mặc định như hình bên dưới. Click OK.

4/ Hãy đặt con trỏ sau từ of và people. Trong tab Bindings hãy click dấu + để mở rộng Recordset. Hãy chọn [total records] sau đó click nút Insert.

347


5/ Bạn sẽ nhìn thấy Dreamweaver chèn vào một code {rs_poll_total} trong khoảng hở.

6/ Hãy nhập dấu % vào các cell trống như hình bên dưới .

7/ Trong trang result.asp hãy chuyển sang chế độ Code sau đó dán đoạn code sau đây vào trước thẻ HTML

<%'Get Poll Results using FilterDim arrCount(1000)For i = 1 to 4FilterParam = irs_poll.Filter = "Choice = " & FilterParam 'Count resultsWhile NOT rs_poll.EOF

348

Bai tap nang cao

arrCount(i) = arrCount(i) + 1rs_poll.MoveNext()WendNext%>

Đây là hình minh họa đoạn code được dán vào như thế nào

8/ GIẢI THÍCH (Bỏ qua bước 8 và 9 nếu bạn chỉ muốn cut và paste mà không cần hiểu đoạn code này hoạt động như thế nào)

Tất cả các đoạn script bên trên làm việc bằng cách kiểm tra xem có bao nhiêu lần các con số từ 1 đến 4 được chèn vào bên trong database (hãy nhớ lại là bạn có 4 nút radio cho phần bình chọn và mỗi bình chọn được gán giá trị từ 1 đến 4. Ví dụ là có 10 số 4 và 24 số 3 được chọn vv...) Mỗi con số của mục bình chọn sẽ được lưu trong biến mảng arrCount với arrCount(1) lưu giữ tổng số cho mục chọn 1 ........ arrCount(2) lưu giữ tổng số cho mục chọn 2 ........ và cứ thế tiếp tục.

349


Bạn sẽ làm gì nếu bạn có nhiều hoặc ít hơn 4 mục bình chọn ? Đơn giản là bạn sẽ sữa lại số lần lặp của vòng lặp For i = 1 to 4 . Ví dụ nếu bạn có 3 mục bình chọn thì vòng lặp của bạn như sau For i = 1 to 3, nếu bạn có 6 mục bình chọn thì vòng lặp của bạn như sau For i = 1 to 6

9/ Bây giờ chúng ta sẽ sử dụng một công thức toán nhỏ như sau:

Ví dụ có 50 người bình chọn cho mục Beer trên tổng số 200 người đã bầu chọn thì công thức của bạn như sau...

50 / 200 x 100 = 25%

50 (là số người đã bầu chọn mục beer) chia 200 (tổng số người đã bầu chọn) nhân 100 . Kết quả là bằng 25%. (25% của tất cả các người đã bình chọn mục beer).

Hãy áp dụng vào công thức của chúng ta như sau ....

arrCount(1) lưu trữ con số bình chọn cho mục 1

và

rs_poll_total lưu trữ tổng số bình chọn

(chú ý là rs_poll là tên recordset mà bạn vừa mới tạo ra ở phần trên)

Vì thế ........ arrCount(1)/rs_poll_total*100 sẽ cho chúng ta số phần trăm của mục chọn đầu tiên.

Điều gì xảy ra nếu kết quả của bạn ra ví dụ như sau 24.3367747%

Hãy dùng hàm bên dưới để định dạng lại kết quả như sau .....

FormatNumber((your number goes here), 2,-2,-2,-2)

cuối cùng công thức của bạn như sau .....

<%=FormatNumber((arrCount(1)/rs_poll_total*100), 2, -2, -2, -2)%>

10/ BACK TO COPY AND PASTING!

Chúng ta có 4 mục bình chọn do đó bạn sẽ có 4 đoạn code sau .......





Trong đó arrCount(1) lưu tổng giá trị số 1 (của mục bình chọn 1).




350

Bai tap nang cao

11/ Hãy chuyển sang chế độ Code sau đó copy các đoạn script trên dán vào đúng vị trí theo như minh họa bên dưới đây (dán trước %)

<table width="500" border="4" cellspacing="4" cellpadding="4"><tr> <td colspan="2"><div align="center">Here are the results of our poll</div></td></tr><tr> <td width="109">Beer</td><td width="351"><%=FormatNumber((arrCount(1)/rs_poll_total*100), 2, -2, -2, -2)%>%</td></tr><tr> <td>Wine</td><td><%=FormatNumber((arrCount(2)/rs_poll_total*100), 2, -2, -2, -2)%>%</td></tr><tr> <td>Whiskey</td><td><%=FormatNumber((arrCount(3)/rs_poll_total*100), 2, -2, -2, -2)%>%</td></tr><tr> <td>Tea</td><td><%=FormatNumber((arrCount(4)/rs_poll_total*100), 2, -2, -2, -2)%>%</td></tr><tr> <td colspan="2"><div align="center">A total of <%=(rs_poll_total)%> people voted</div></td></tr></table>

12/ Trong chế độ Design bạn sẽ thấy như sau:

351


13/ File -> Save . Upload trang result.asp lên máy chủ. Mở trang poll.asp lên nhấn F12 để kiểm tra lại thử xem sao

Về đầu trang

352

Sach tham khao

353

354

Sach tham khao

355


356

Glossary

AASP: Active Server Page la giai phap cua hang Microsoft cho viec phat trien cac

ung dung web dong

DDSN: Data Source Name

IIIS: Microsoft Internet Information Server la may chu web server cua hang

Microsoft chay tren Windows 2000 /2003 Server / XP/ NT 4.0

JJSP: Java Server Page

PPHP: Profesional Home Page

PWS: Persional Web Server la may chu Web Server chay tren nen Windows 98

SSQL: Structured Query Language la ngon ngu chuan dung de truy van du lieu

UURL: Uniform Resource Location la dia chi cac trang web

357

Documents

Giao Trinh Dream Weaver MX 2004