Hướng dẫn xây dựng ứng dụng web với Macromedia Dreamweaver

Trang 1

TRUNG TÂM DAO TAO QUAN TRI & AN NINH MẠNG

ATHENA

HƯỚNG DẪN XÂY DỰNG ỨNG DỤNG WEB

VƠI

MACROMEDIA DREAMWEAVER MX

(Tài liệu bổ sung thực hiện project)

09/2009

Trang 3

Xây dựng trang web động với công cụ Dreamweaver MX

HƯỚNG DẪN XÂY DỰNG ỨNG DỤNG WEB VỚI

MACROMEDIA DREAMWEAVER MX

I Giéi thiéu

1 Các bước cần thực hiện

a Cấu hình hệ thống và Môi trường làm việc của Dreamweaver MX

b Tạo Database

c Thiết lập web site và tạo kết nối vào Database

> Dinh nghia web site

> Ché độ làm việc đối với server > Tao lién két vGi database

> Publish web site vừa tạo lên PWS

> Xem trang web trong trình duyỆt

T

d Tạo các dạng trang web thao tác có kết nối Database

2 Web site minh hoa

a NOi dung: Trong phần này chúng ta minh họa việc tạo mỘt web site giới thiệu mặt

hàng điện thoại Chế đỘ làm việc với Server thông qua các trang Active Server Page

(asp)

b Chức năng thao tác: - Trang login - Trang logout

- _ Hiển thị dữ liệu theo danh sách theo dạng bảng

- _ Hiển thị dữ liệu theo danh sách dạng Master-Detail - Nhập mới dữ liệu

- _ Cập nhật dỮ liệu dạng Master-Detail (Search Update) - _ Cập nhật dỮ liệu trên cùng một form (Search Update) - Xod df liéu (Search> Delete)

c B6 tri các trang:

Trang chU > Trang Login > Trang chọn nội dung => Danh sách dạng bang

(Index_Login) > Danh sách dạng Master-Detail > Nhập mới > Cập nhật dạng Master-Detail > Cập nhật trên cùng một form >> Xoá dữ liệu > Trang logout

(default.htm) (Login.asp) (Index_Login.htm

d Nội dung từng trang

> Trang chu: g6m 3 frame

Contents <Banner>

Login <N6i dung>

Trang 4

Hình 1: trang Index.htm > Trang Login.asp LOGIN FORM User name: [ Password: | ˆ

Hinh 2: Trang Login.htm

Trang Login khi được gọi sẽ chiếm trọn màn hình hiện tại

> Trang Index_Login.htm Contents <Banner> Display Dipslay Mas_Detail Insert Ạ <Nội dung>

Update Two Form Update One Form

Delete

Logout

Hinh 3: Trang Index_Login.htm

Trang Index_Login khi được gọi sẽ chiểm trọn màn hình hiện tại

> Trang Logout.asp

e Đây là trang trống, chỉ chứa các đoạn mã JavaScript để đóng lại việc

login

e _ Chỉ đi kèm với việc da login

e _ Trang Logout.asp khi được gọi sẽ liên kết đến trang default.htm, khi đó trang default.htm sẽ chiếm trọn màn hình hiện tại

»> Các trang còn lại sẽ được đề cập khi xây dựng từng trang

Trung tâm đào tạo quản trị & an ninh mạng ATHENA www.athena.edu.vn Hotline :

Trang 5

Xây dựng trang web động với công cụ Dreamweaver MX Il — Cấu hình hệ thống và Môi trường làm việc

2 Cấu hính hệ thống

- _ Hệ điều hành: Windows 2000, có cài đặt thêm các công cụ “Internet Information Server” và “Personal Web Server”

- - HỆ quản trị dỮ liệu: Ms Access 2000

- _ Trình duyệt web: Internet Explorer 5.0 va Netscape Nevigator 4.7 - Dreamweaver MX

>> Cài đặt IIS và PWS: (Khi Windows chưa được cai dat)

a Trong Windows 2000 vao Control Panels, chon “Add / Remove Programs” > Hién

thị hộp thoai > chon tab “Add / Remove Windows Components” > xuất hiện hộp

thoai ké tiép nhu hinh 4

Windows Components Wizard x

Windows Components

‘You can add or remove components of Windows 2000,

To add of remove a component click the checkbox 4 shaded box means that only

part of the component will be installed To see what's included in a component click

Details Components:

(| SP |ndexing Service ññMB + ea Internet Explorer 0.0 MB

M5 n6 0 nu sa eo 18 3 MB a a4 Management and Monitoring Tools 0.9 MB [_] m#Ÿ Messane Queuing Services > AMA =i

Description: IIS services [Web and FTP support] slong with support for FrontPage, transactions 45P's database connections and recerving of posts Total disk space required: 0.0 MB Details |

Space available on disk: 119.9 MB — _

< Back | Next > Cancel |

Hình 4

b Đánh dấu chon vao Checkbox “Internet Information Sevices (IIS), sau d6 bam vao

nút lệnh Next và thực hiện các công việc theo yêu cầu (PWS là một component trong IIS, bấm vào nút lệnh Detail để xem chỉ tiết)

c Sau khi khởi động lại máy tính, ta sẽ có một thư mục web site mặc định là

DWnterpub\wwwroot nhƯ hình 5 (giả sử cài windows 2000 trên Ổổ đĩa D:)

Falders (4-24 My Documents E 1+3 My Computer m củ 344 Floppy (4:3 #l-cã8 FAT32_BOOT (C:} —l-SJ \Mindnws5erver (D:} :-{] ASFRoot

[+] mm Documents and Settings

{2 ] Inetpub : wf J) AdminScripts EH] Ftproot )-{_) iissamples #i-{~] mailroot {J nntpfile #]-{ ~] issamples {J mailroot Hinh 5

Trung tâm dao tao quan tri & an ninh mang ATHENA www.athena.edu.vn Hotline :

Trang 6

2 Môi trường làm việc của Dreamweaver MX

a Chon giao diện làm việc giống Dreamweaver 4.0

- _ Vào menu Edit / Preferences > hiển thị hộp thoại Preferences

- Trong mUc Category chon General > chọn nút lệnh “Change workspace ”> hiển thị hộp thoại như hình 6, sau đó chọn “Dreamwevaer 4 Workspace” (thay d6i chi cé

hiệu quả cho sử dụng Dreamweaver MX lần sau)

Workspace Setup Please choose the workspace layout you're most comfortable with You can svutch

layouts later in Preferences

LÍ 11 = œ ¿PP sO — ae ao of — „1 ao ——— ao so —————————— af of ”_jJQ_P_2Qa~-—> ef 2Ð ———— ao oo of oo o ee ee ee ee ee so —_—T ta EEE) af CC Wc + F———t.E— 11.L +

Dreamweaver Mx Workspace ( Dreamweaver 4 workspace [E H7 7ẽ5i2/215::51/]5 Hình 6

b Hién thi Object Panels

- Trong Dreamweaver MX, dé hién thi Object Panels ta vao menu Windows / Insert >

Object Panel sẽ xuất hiện bên trái màn hình Xem hình 7

mã xI -¿ LIntitled Document (Untitled-23 “t =in| xi _AEPllc3i9" ammon Edit Wiew Insert Modify Text Commands

Bỏ (ay Text Window Help

4 ee 4 Cede Frames ate ee Title: Untitled Document =

~~ | Oty i) Templates Characters Media Head Script 45P ® Application ise Oo 7 Se De „ Hinh 7

Trung tâm dao tao quan tri & an ninh mang ATHENA www.athena.edu.vn Hotline : 4

Trang 7

I Tao Database

- Database duQc tao trong Ms.Access2000 (Data_Project.mdb)

- Bang di liéu Login

Name Data Type Decription

UName Text User name

PWord Text Password

Mobile

Name Data Type Decription Mcode Text Mobile code

SCode Text Supplier code (Distributor) MName Text Mobile Name

DNotice Date/Time | Date of notice Price Number Price of mobile

Image OLE Object | Mobile’s photographic or movie Supplier

Name Data Type Decription

SCode Text Supplier code (Distributor) SName Text Supplier’s Name

- _ SƠ đỒ quan hệ nhu sau:

SP n ) - Hình 8

Trung tâm đào tạo quản trị & an ninh mạng ATHENA www.athena.edu.vn Hotline : 1900 54 54 56

Trang 8

II Thiết lập web site và kết nối Database

3 Định nghĩa site:

Việc định nghĩa site tương tự trong Dreamweaver 4.0, giả sử ta tiến hành khai báo các thơng số như hình 9 Trong đó:

- _ Site name: tên cUa web site (Project)

- _ Local Root Folder: địa chỉ lưu trỮ web site trên máy local

(D:Mnternetpub\wwwroot\project (có thể lưu ở bất cứ thư mục nào tuỳ ý)

- Default Images Folder: thử mục chứa ảnh cUa trang (nếu có)

- _ HTTP Address: Địa chỉ của web site trên máy local, sẽ khai báo Ở phần “Testing

Server”

Site Definition for Project x| Basic 9 Sdvanced

Category Local Into

Local Info

Tecting Serve Site Name: [Project

Cloaki

Desian Note: Local not Elder: |D:*|netprib+wwwgothPioject = Site Map Layout :

File View Columns IM Refresh Local File List Automatically

Default Images Folder: ID ‘lnetpub\ wuewroothProject’| mages i)

HTTP Address: |http://

This address enables the Link Checker to detect HTTP links that refer to your own

site

Cache: [¥ Enable Cache

The cache maintains file and asset information in the site This speeds up the Asset panel, link management, and Site Map

features, Cancel Help Hinh 9

4 Ché d6 lam việc đối với server

Ta phải chọn chế độ làm việc đối với server, Ở đây ta chọn là ASP JavaScript a _ Mở panel “Application”: Trong web site “Project”, từ Laucher bar (hoặc từ menu

Windows) chọn “Database”, xuất hiện panel “Application” như hình 10a

Trang 9

* ñpplication

lùi

d~|

To use dynamic data on this page: # 1, Create a site For this file

w 2, Choose adocument type,

3 Set up the site's testing server 4 Create 4 Connection by clicking

on + button above

Layers

Hình 10a

Site Definition for Project

Local Info Remote |nfa

Testing Server

Closking Design Notes Site Map Layout File View Colurnns

aie lacey

a,

To use dynamic data on this page: ¥ 1, Create a site for this file

¥ 2, Choose a document type,

~ 3, Set up the site's testing 4, Create a Connection by clicking

on + button above » Layers Hinh 10b

b Click chudt vao “testing server” dé m6 hp thoai “Site Definition for Project” xuat

hién nhu hinh 11

[Dresnweaver Mx Pages Only =]

LoeaNawok = http: /“localhost/myproyect’ Hinh 11

Trang 10

c Điền các thông số như hình 11 Trong đó:

- _ Server Model: chọn công nghé server (ASP JavaScript)

- _ Access: giao thỨc giao tiếp với server (Local / Network)

- Testing Server Folder: thu’ muc chUa web site

- URL Prefix: Dia chi cUa web site trên máy local, giả sử chúng ta đặt cho web site mỘt

alias là “mmyproject” (hoặc là tên của thư mục hiện hành: project), thi dia chi sé 1a: http:// localhost/myproject (xem phần tạo alias cho web site Ở mỤc publish web site lên PWS)

- _ Chọn OK để kết thúc> ta được hình 10b 5 Tạo liên kết với database

Trong project này ta dùng cơ chế kết nối ODBC connection string Có 2 hình thức kết nối:

Cách 1 Kết nối dùng DSN

- Tao kết nối DSN vào Database

- _ Trong Dreamweaver MX, tạo kết nối giỮa ứng dụng với kết nối DSN

>> Khi sao chép Site đến một máy khác thì phải định nghĩa lại DSN tương ứng thì chương trình mới thi hành

Cách 2 Kết nối do người dùng viết code

- Trong Dreamweaver MX, tao két n6i gitfa ứng dụng với Database do người dùng viết code Có 2 dạng > Đường dẫn tuyệt đối và đường dẫn tương đối

> Nén dùng đường dẫn tương đối > để sao chép và thi hành Web Site trên các máy khác nhau được dễ dàng

Kết nối DSN vào Database

a Kích Start > Settings > Addministrative Tools > Data Sources, hộp thoại ODBC

Data Source Administrator xuất hiện như hình 12

“ODBC Data Source Administrator |x|

System Data Sources:

Name — | Driver Add

‘Lonnect: Microsoft Access Diver (*.mdb]

myConnect Microsoft Access Driver (* mdb] Remuve

LE

SonhGure

4n ODBC System data source stores information about how to connect to the indicated data provider A System data source is visible to all users on this machine, including NT services

OK Cancel Anil Help

Hinh 12

Trung tâm dao tao quan tri & an ninh mang ATHENA www.athena.edu.vn Hotline : 8

Trang 11

b._ Click vào nút lệnh “Add”, xuất hiện hộp thoại như hình 13

Lreate New DaLa 5Source x|

Select a driver for which you want to set up a data source

Name | v=

Driver da Microsoft para arquivos texta [*txt:* csv] 4 Driver da Microsoft Access [* mdb]

Driver do Microsoft dB ase (* dbf] Driver da Microsoft Excell* xls] Driver do Microsoft Paradox [*.db | Driver para o Microsoft Visual FoxPro EMicrosott Access Driver [* mdb]

Microsoft 4ccess-T reiber (* mdb]

Microsoft dBase Driver [* dbf] Aho

ee Katoroemtt dE oo WER 4 rinsor IX AFI hn 4

_ Hì Alek | Finish Cancel

Hinh 13

c Chon driver 1a “Microsoft Access Driver” như như hình 13, sau d6 bam “Finish”,

một hộp thoại sẽ xuất hiện như hình 14 Tiến hành điền Data Source Name, sau d6 click vào nút “Select” để chọn Database (Giả sử ta đang lưu ở thư mục

D:\Mnterpub\wwwroot\Project), sau cùng click vào nút lệnh “OK”> quay lại hộp

thoại như hình 12 nhưng có thêm data source “MyDatabase” vừỪa tạo Click vào nút

“OK” dé hoan tat

ODBC Microsoft Access Setup

Data Source Name: |MyDatabasd l lx

Description: | = Database

Datahase D:% xwwwurantXPrnlertXData Prniect.rnrlh Select | Create | Repair

Cancel Help Compact | Advanced Ik - System Database @ None Database: Sustem Database Options» > | Hinh 14

Trung tâm đào tạo quản trị & an ninh mạng ATHENA

Trang 12

d Trong site Project, vào panel Application

xw ñpnlication (Gd Databases

To use dynamic data on this page:

¥ 1, Create a site for this File

¥ 2 Choose a document type ¥ 3 Set up the site's testing server

4, Create a Connection by clicking on + button above

Hinh 15

e Chọn tab Database, nhấn chuột vào dấu + va chon “Data Source Name (DSN)”, m6t

h6p thoai “Data Source Name” xuat hién Dién céc thong s6 vao nhu hinh 16

Data Saurcec Name (D5R} x|

User Name: | Advanced | IK

Password: | [tet Ì

Dreamweaver Should Connect; € Using DSM On Testing Server

Hel

Using Local DSM B

Hình 16

f Bấm “Test” để kiểm tra sự kết nối, nếu thành công sẽ xuất hiện thông báo

“Connection was made successfully”

g Sau khi kết nối thành công, cửa sổ Application sẽ thay đổi nhƯ sau:

xw ñpnliratinn LÙJ Database=| ý II si 1c ni Tables FR Login fA Mobile FER Supplier Views ~ fF] Mobile_Display Stored Procedures Hinh 17 0) * aS EI-z1-El- Trung tâm đào tạo quản trị & an ninh mạng ATHENA www.athena.edu.vn Hotline: 10

Trang 13

Kết nối ứng dụng với Database do người dùng viết code

a Trong panel Application, nhấn chuỘt vào dấu + va chon “Custom Connection String”,

một hộp thoai “Custom Connection String” xuất hiện Điền các thông sỐ vào như hình

18

Custom Connection String

Connection Name: | MyConnect

Connection String: |"Driver={Microsoft Access Driver (*.mdb}}; DBQ=D: \Inetpublwy Dreamweaver Should Connect: (~ Using Driver On Testing Server

@ Using Driver On This Machine

x! OK | =m Cancel Advanced | Help geceeee sss=sel : : $ 3

ecenes le» s==ee)

Hình 18 Trong đó:

- _ Connection name: tên của kết nối vào Database

- Connection String: déng 1énh tạo kết nối vào Database:

* Dang đường dẫn tuyệt đối: "Driver={Microsoft Access Driver (*.mdb)};

DBQ=D:\\Inetpub\\wwwroot\\Project\\Data_Project.mdb"

* Dang đường dẫn tương đối: "Driver={Microsoft Access Driver (*.mdb)}; DBQ=”+Server.MapPath(“Data_Project.mdb”)

a Bam “Test” dé kiém tra sự kết nối, nếu thành công sẽ xuất hiện thông báo

“Connection was made successfully” Hoặc đối với hình thức đường dẫn tương đối,

thì sẽ có thể có câu sau “The simple Recordset Dialog box, can not be open ”

Nhung vã tiếp tục làm tiếp

b Sau khi kết nối thành công, cửa sổ Application sẽ thay đổi nhƯ sau

- w ñpnliratian (fj Databases] <7 Bindi +| —Í ASP JavaScript [+] — a ee Tables FE Lanin Mobile Supplier Views Mebile_Display Stored Procedures 05 a Hinh 19

> Sau nay néu mu6n hiéu chinh chi can Double click chudt vao “MyConnect” thi một

hộp thoại tương ứng xuất hiện để hiệu chỉnh > Tương tỰ cho các trường hợp hiệu chỉnh khác

Trung tâm đào tạo quản trị & an ninh mạng ATHENA www.athena.edu.vn Hotline: 11

Trang 14

Trang 15

6 Publish web site vừa tạo lên PWS

a Kích Start > Settings > Taskbar & Start Menu > Advanced Trong mUc “Menu

Start Setting” kiém tra xem checkbox “Display Addministrative Tools” da duoc

chọn chưa, nếu chưa thì đánh dấu chon

b Kich Start > Programs > Addministrative Tools > Personal Web Server > hiển thị hộp thoại như hình 20

personal Web Manager = |i XỊ

Properties ‘View Help

3@ | Advanced Options

Mai ain — Virtual Directories

= a <Home> | Add

Ca ‘XuanGiap

dh AllS Admin Edit Properties

-3 /IISHalp _EđtPopsdie |

Ca zIIS5ample+

Tour Ca /Ilacalstart asp Hemove |

-3 /Printers

1-4 75eript: oe

Advanced = |

-— i Enable Default Document

Default Document(s): |dafault.him, dafault html, index.htm, index.html, Index jsp, default jsp

I¥ Allow Directory Browsing

IY Save Web Site Activity Log

Hinh 20

c Chọn vào tab Advanced > click vào nút Add, một hộp thoại Add Directory sẽ hiện

ra Chọn các thông số như hình 21, trong đó Directory là thư mục đang chứa trang web; alias là một thư mục ảo (Vitual Directory) của trang web, alias này sẽ được dùng để truy xuất trang web sau này (chú ý các thuộc tính: write, execute )

xí

Directory: |D:\Inetpub\wumnoatsProject Browse |

Alias:

Access permissions

I~ Read I wirite lM Script Source Access

— Application permissions

tT None ™ Scripts

f Execute [including scripts]

| OK | Cancel

Hinh 21

Trung tâm dao tao quan tri & an ninh mang ATHENA www.athena.edu.vn Hotline: 13

Trang 16

d O hinh 20, trong textbox “Default Documents” gé vao tên trang ch! cla web site (vi du trang chu 14 Index.htm) Khi truy cap vao web site nay, trang Index.htm sé tu động được tải ra đầu tiên

7 Xem trang web trong trình duyệt a MỞ trình duyệt IE

b Tại hộp address gõ vào dòng địa chỉ: http:/1ocalhost/myproject, trang web vừa tạo

sẽ xuất hiện

~lz| xị

| File Edit view Favorites Tools Help |

sa Back ~ »-@ at Qsearch [š|Favmitss (Abistory l»* ib » | Address le] http: //localhost/rnyproject/ =| Go |Links _

Home Fage

\] Done [ [ i Local intranet ⁄Z

Hình 22 — trang chu (Index.htm)

Trang 17

I Tạo các trang web có kết nối Database

- Cac trang nay có kết nối Database dùng công nghệ kết nối là JavaScript - _ Phần mở rộng của tên file là asp (*.asp)

2 Tao form login

a Trong site Project, vào menu File / New > Hộp thoại New Document xuất hiện,

chon Category “Dynamic Page” > trong Dynamic page chon “ASP Javascript” bấm nut “Create” xi General Templates |

Category: Dynamic Page: Preview: Basic Page PR ASP JavaScript

Dynamic Page @ ASP vB5rrinE Template Page @ ASP.NET C# Other ia ASP.NET VB

CSS Style Sheets i ColdFusion

Framesets @ ‘ColdFusion Component <No Pieviewa>

Page Designs ‘a J5P

Page Designs (Accessible) @_ PHP

Description:

Active Server Pages (45P) document with ECMAScript,

[Make Document SHTML Compliant Help | Preferences | Get More Content | Create | Cancel

Hinh 23

b Thiết kế giao diện vào lưu file (Login.asp)

=#LIntitled Document (Project/Loginf] - *acromedia Drea rl =lnl x

File Edit View Insert Modify Text Commands ‘Site Window Help

| 4| đề|| sš | 2 “Ti: Untitled Document đi}, &_

CG 4® () FEL Login form pO (Tsername: | (admin) : Password: | (admin) : Mm _Sem[Cn| -

<body> <forme JSM+208„ 4k/lzee ch DOB 7 Me „

Hinh 24

Trung tâm đào tạo quản trị & an ninh mang ATHENA www.athena.edu.vn Hotline: 15

Trang 18

c TỪ panel “Application” chọn tab “Server Behaviors” > click chuột vào dấu + để

đổ xuống menu > chọn User Authentication / Log In User > xuất hiện hộp thoại,

- w ñpplication

tiệc n Seruer Eiehauiarz | 5 | 1= | Document Type: 45P JavaScript

Recordset (Query) r Command Repeat Region Recordset Paging ' Show Region Dynamic Text Go To Detail Page : Go To Related Page Insert Record Update Record Delete Record Dynamic Form Elements Log In User User Guthentication

Restrict Access To Page v

Edit Server Behaviors

New Server Behavior Get More Server Behaviors

Hinh 25

Log Out User

Check New Usernarne

d Tiến hành khai báo như hình 26

Log In User

Get Input From Form: |Fornnd

Username Field: |adname

Let

Le

Password Field: |adpa=z

Validate Using Connection: |MyConnect

Table: Login

Username Column: |UMarne

Le}

Let

Le

Password Column: |Pword

If Login Succeeds, Go To: | Index _Login htm Browse [~ GoTo Previous URL (iF it exists)

lỊ

Tf Login Fails, Go To: | Lagin.asp Browse

Restrict Access Based On: ( Username and Password

( Username, Password, and Access Level

Get Level From: JUName 2

Hinh 26

e Click vào nút lệnh “OK” để kết thúc

Trang 19

3 Tao form logout (Logout.asp)

Logout form là một trang “rỗng? chỉ chứa các mã JavaScript để đóng lại kết nối khi

login

a TU panel “Application” chon tab “Server Behaviors” > click chudt vao dau + để

d6 xuOng menu > chon User Authentication / Log Out User (hinh 25) > xuat hién

hộp thoại, tiến hành khai báo như hình 27

Log Out User

Log Out When: Link Clicked: | create New Link: "Log Out” E

(@ Page Loads Cancel

when Done, Go To: | default.htm Help ce

Hinh 27

b Click vào nút lệnh “OK” để kết thúc

4 Tao form hién thị danh sách theo dạng bảng

a Thiết kế giao diện vào lưu file (Display.asp)

=} Untitled Document (Project/Display*) - Macr - || x|

File Edit View Insert Modify Text Commands Site Window Help

| &| ee] 22 22% | Title: | Untitled Document i @

LIST OF PRODUCT

oo

chody <dive |389w121„|3K!Ises gia [Ỹ GC) #} 2 7 oy WG |

Hinh 28

b TU panel “Application” chon “Server Behaviors” > click chuột vào dấu + > xuất hién menu > chon Recordset > xuất hiện hộp thoại, tiến hành khai báo như hình

29 x Name: | display

Connection: |MyConnect =i Define | Cancel Table: || ml Test |

CnlLumns: f“ All £Ế” selzrted: An |

Sort: |hane 7| JAscending A

Trung tam dao tao quan tri & an ninh mang ATHENA www.athena.edu.vn Hotline: 17

Trang 20

Hình 29

c Trén trang Display, đặt con trỏ tại ví trí mà ta muốn xuất hiện dữ liệu > vào menu

Insert / Application Objects / Dynamic Table > hộp thoại Dynamic table xuất hiện,

tiến hành chọn các thông sỐ, sau đó nhấn OK Trang Web sẽ có dạng nhu sau:

Đồ( Untitled Document (Project/Display} _ lo | >|

LIST OF PRODUCT

(display Mcode} [display.SName} |{display MName} | {display DNeotice} |{displa ile's Code |Supher Mobile's Name (Date of Notice [Price

4Í

<body> <div> <p> «strong: <forts 517 #276 „ ?K!?2Zseœ mu [[ÿ OD & 2 7 th Mp -

Record not founa |

| +

Hinh 30

d Thêm và hiệu chỉnh các tính năng khi hiển thị dỮ liệu:

> Đối với ảnh của sản phẩm, nếu ta không hiệu chỉnh thì Dreamweaver MX sẽ đưa

ra vị trí của file > ta phải tạo một PlaceHolder để chứa ảnh

Chọn và xoá bỏ biến hiển thị ảnh {display.Image} Đặt con trỏ tại ô hiển thị ảnh

Chọn menu Insert / Image PlaceHolder > đặt tên cho vùng hiển thị ảnh

TU panel “Application” chọn tab “Bindings” > sau đó click chuỘt vào Image > kéo và tha vao PlaceHolder vUa tao

> xuất ra thơng báo thích hợp khi khơng có dữ liệu:

Đặt con trỏ dưới vùng table gõ vào thông báo “Record Not Found”

Chọn toàn bộ câu thông báo

TỪ panel “Application” chọn tab “Server Behaviors” sau đó click chuỘt vào

dấu + để đổ xuống menu > chon Show Region / Show Region If Recordset Is

Empty

> Chỉ xuất hiện phần bảng dữ liệu trên khi có dỮ liệu trong Database

Chọn toàn bộ vùng table

TU panel “Application” chon tab “Server Behaviors” > sau đó click chuỘt vào

dau + dé d6 xu6ng menu > chon Show Region / Show Region If Recordset Is

Not Empty

> Sau khi thao tác xong chúng ta có cấu trúc trang Display.asp nhƯ sau:

Trang 21

Xây dựng trang web động với công cụ Dreamweaver MX -Š LIntitled Dncument (Project¿/Disnlay*} - Hiacrnnaedia DreaniMeavet F1X _ |E ||

File Edit View Insert Modify Text Commands ‘Site Window Help

| 5) Zề|| z!: | 24 Title Untitled Document fgr Ge |G eb Th FEL

LIST OF PRODUCT

BE

shile s Code Supher ‘Mobile's Name Date of Notice Price Image

{display Mcode} | {display SName} | {display MN ame} | {display DN otice} | {display Price} | a!

Record not found

| | 2

body> <div> cmm_hiddenregion> cmmedecorations <p> <font> <em> 61? *283 , [7K #2 sec st, fe G2) ce 4 ⁄Z oe 3u i ve

Hinh 31

5 Tao form Hiển thị dữ liệu theo danh sách dạng Master-Detail (form Search)

Trang Master dùng để liệt kê các mẫu tin và chứa một liên kết đến trang detail Khi click vào liên kết, trang Detail sẽ mở ra để thể hiện nhiều hơn các chỉ tiết của mẫu tin

- - Các bước thực hiện:

> Tao trang Master

> Tao recordset

> Hiéu chinh trang Detail (tu sinh) > Hiéu chinh trang Master

a Tao giao dién va luu trang Master (DisplayMaster.asp)

~Š LIntitled Document (Prpjert/Disnlaylaster] - *iarrafienid F - | |x| File Edit view Insert Modify Text Commands Site Window Help

Lesa Title: Untitled Document Lay L2 § GC <> th :

DISPLAY PRODUCT

<body: <div> <p> 483219~/iKiisee oa, ip C7) &) G4 ⁄7 =e: My iG z

Hình 32

b TU panel “Application” chon tab “Server Behaviors” > click chuột vào dấu + để

đổ xuống menu > chọn Recordset > xuất hiện hộp thoại, tiến hành khai báo như

hình 33 Có thể kiểm tra kết nối bằng cách nhấn vào phím “Test”

Trang 22

Name: | display

Connection: [MyConnect M Define |

Table:

Columns: f all ( Selected:

Meode Fllaine DNotice Cancel Test Advanced Help LÍ , Filter: |None =F JURL Parameter =I Sark; None Price - | fe El M Ascending Hinh 33

c Trên trang Display, đặt con trỏ tai vi trí mà ta muốn xuất hiện dữ liệu > vào menu

Insert / Application Objects / Master Detail Page Set > hOp thoai “Insert

Master_Detail Page Set” xuất hiện, tiến hành chọn các thông số nhƯ hình 34 sau

Insert Master-Detail Page Set

Recordset: |display M

Master Page Fields: +|-| =&

Elcarde Fllarmnz

Link To Detail From: |MMame M

Pass Unique Key: |Mcode |

Show: fio Records at 4 Time

fall Records

Browse |

iE

Detail Page Name: | DisplayDetail, asp

Detail Page Fields: +| -|

Mecode SCode MName Dhiatice Price Image Cancel Help rE

Trang 23

Hình 34

Trong đó:

- _ “Master Page Fields” chứa nhỮng cột mà ta muốn thể hiện trên trang Master - “Detail Page Fields” chứa những cột mà ta muốn thể hiện trên trang Detail

- “Detail Page Name” là trang Detail, trang này sẽ được tạo tự động do đó chỉ cần nhập

vào một tên file mà ta dự định làm trang detail

b Sau dé nhan OK Sé có 2 trang Web được tạo là trang Master và trang Detail Trong

đó trang Detail sẽ có dạng như sau

= Untitled Document (Project/DisplayDetail*) - Macromedi - |n| x| File Edit Yiew Insert Modify Text Commands Site Window Help

| >) Se || SE | [2 “Tithe: Untitled Document i BD | GQ 27> {}

Mcode (display Mcode}

SGCode (display.SCode}

Name {display.MName} DNotice (display DNotice) Price | { display Price} Image | {display Image}

¢ brody> |4B8 x 180 „ |5IK!2sec sty fe SS) =} 6) 47 oe Sp Tt =|

Hinh 35

a Tiến hành hiệu chỉnh theo mong muốn (xem thêm ở phần tạo form hiển thị dạng

bảng) Sau khi tạo xong ta có cấu trúc nhƯ hình 36:

~¿LIntitHlced Documaent (ProjecEDisplayDetail) - Flacromiedia Dưea = |m| |

File Edit Yiew Insert Modify Text Commands Site Window Help

|

DISPLAY PRODUCT'S DETAILS

Mobile Code: | {display Mcode} Suppher: {display.SCode}

om | Mfobile Name: || { display hOName} is

Date of Notice: |{display DNotice} Price {display Price}

i

bea dy> <p> S091 402 x EK¿2z+ee 3a lẾ C52 ‡} 4) 7 Se Me GI -

Trang 24

Hình 36

6 Tao trang Insert (Insert.asp)

- Trang Insert cé dùng một list box để liệt kê các nhà cung cấp (liệt kê tên, lưu bằng mã) Ảnh của điện thoại là một file được lấy từ một cửa sổ file

- - Các bước thực hiện:

> Tao recordset nha cung cap (supplier) > Tao Insertion Form

> Hiệu chỉnh

a Tao Danh sách liệt kê nhà cung cấp (supplier) - hình 37

Name: [ET

Columns: @ All Selected: Advanced

5Ñ me Help PEPER

Filter: |None =| |= =|

JURL Parameter a |

Sort: | Nore >| Jascending =]

Hinh 37

b Trén trang Insert, dat con tré tai vi tri ma ta muGn tao form nhap liéu > vao menu

Insert / Application Objects / Record Insertion Forn> h6p thoai Record Insertion

Form xuất hiện Tiến hành khai báo các thuộc tính như trong hình 38

> Trong do: “After Inserting, go to” là trang mà chúng ta sẽ cho hiển thị thông báo

sau khi insert thành công

Record Insertion Form x|

Connection: |MyConnect xị Define OK |

Insert Inta Table: | Mobile xị Cancel |

4fter Inserting, Go To: |Message.asp

Form Fields: + ¬| “| 7|

Column |Label |Display As |5ubmktảs |

Mcode Mcode: Text Field Text 5Code S5Code: Text Field Text F1hlarne MMame: Text Field Text DNotice DNatice: Text Field Date Price Price: Text Field Numeric

Image Image: Text Field Text

Label: | Mcode:

Display As: [Text Field | Submit As: [Text Mi

Default Value: | Z|

Trang 25

Xây dựng trang web động với công cụ Dreamweaver MX Hình 38

Trong phần Form fields > tiến hành chọn các thuộc tính:

Column | Label Display As | Ghỉ chú Mcode Mobile Code Text Field

Scode Suplier menu * Mname | Name Text Field DNotice | Date of Notice | Text Field Price Price Text Field

Image Photograph Text Field | (chỉnh tag HTML > input type="file”)

* Cách thực hiện menu Scode như sau:

Trong hình 40, Chọn “Display As” cho Scode là menu, sau đó click vào “Menu

Properties” > cửa sổ “Menu Properties” xuất hiện, tiến hành khai báo như hình 39 sau:

Menu Properties

Populate Menu Items: { Manually

x| ( (From Database _ — Caneel | Recordset: |supplier

Get Labels From: |SMame

LY

Ld

Get Values From: |sCode

Select Yalue Equal To: | #

Hinh 39

c Click vào nút lệnh “OK” để trở về cửa sổ hình 38

d Tiến hành hiệu chỉnh ta được màn hình Insert nhƯ hình 40

“¿ Untitled Document (ProjecE/Insert}) - Kiacromedia DFes - ln| xị Eile Edit View Insert Modify Text Commands Site Window Help

| Ee Title: = Untitked Document i; @ | Co 4? (

INSERT PRODUCT

sdụ> <div> <p> <strong> <font> 46422894 15K /Ssec go, fp D «3 64 7 2 @ GG „

Hinh 40

Trang 26

Note: Khi insert ảnh, nên sử dụng đường dẫn tương đối bằng cách xoá đ thư mục

gốc

VD: D:\Inetpub\wwwroot\Project\Images\6110.gif » Images\6110.gif 7 Tao form cap nhat dang Master-Detail (Search> Update)

Gồm 2 bước:

> Tao trang search

> Tao trang hién thi két qua

Tao trang Search

a Tao giao dién vao luu file (Update.asp) -

b Tao Recordset “mcode” ding để truy xuất tên và code của Mobile cần cập nhật

>*LIntitl=d Dnrument (Pranjert/LIindate} - Flarrnmiedia I - | | «| File Edit View Insert Modify Text Commands ‘Site Window Help

| | E2 224 | Title: Untitled Document fie @ | Co <p i

UPDATE PRODUCT

pee eee ee ee ee Hee Ke ee ee ee ee ee ee eee ee ee ee ee eee ee ee ee ee eee

“——=—=—=—=—=————=——-¬¬ kmjả——==—=—=—=~~~—=—=~——~~—=—=—~~———=—=————=————~—

<body> |d&2+142 „ |3kHlzee si [Íj (ÏÀ 43 44 7 Sa Sw -

Hinh 42 > form có các thuỘc tính sau:

| Form Name Action Update detailasp Cà Target [seve] 2) tarml Mathod [Post | Enetupe | x] =

Hình 43

> Đặt tên cho menu là MobileCode, giá trị được lấy từ Recordset “mcode” nhƯ sau:

e Chọn vào menu vừa tạo > Properties của menu hiển thị như hình sau:

=:[aIE ListMenu Type (2) Menu Height (tay ] Œ

BỊ =) MobileCode C List Selections [IE Allow multiple = Hinh 44

se Chon “Dynamic” > hdp thoai xuat hién

Trung tâm dao tao quan tri & an ninh mang ATHENA www.athena.edu.vn Hotline: 24

Trang 27

Dynamic List/“lenu

Hình 45

se Chon cac thuộc tính như hình 45 > OK để hoàn tất

2 Tạo trang hiển thị kết quả (Update_ detail.asp)

/ Untitled Document (Project/Update detail*) - Macromedia brea (oO! x]

Hinh 46

a Tạo Recordset “update” từ bảng Mobile, khai báo các thuộc tinh nhu hình sau:

Trang 28

Recordset = éẻ ~5 FormVariable Y|[Hoblcab — —~ mmmm=aẽắ(.- Hình 47

b Trên trang Update_Detail, đặt con trỏ tại ví trí mà ta muốn tạo form nhập liệu >

vào menu Insert / Application Objects / Record Update Form> hộp thoại Record

Update Form xuat hién

Record Update Form

MName: Text Field Text DNotice: Text Field Dake

Price: Text Field Numeric

Image: Text Field Text

Hinh 48

Trung tam dao tao quan tri & an ninh mang ATHENA Hotline: 26

Trang 29

c Tiến hành chọn lựa các thuộc tính như ở form Insert > Click vào nút lệnh “OK” để kết thúc

d Sau đó hiệu chỉnh để có giao diện như hình sau:

~*LIntitlzd Dacument (Praject/LIndate _Detail) - Hacrameedia Dfeaw = |m | | File Edit View Insert Modify Text Commands Site Window Help

| Or Ee Title: Untithked Document Lie 6, Œ a2 ƒ Z|

UPDATE PRODUCT'S DETAILS

Mobile Code: {(update.Meode} ¿ :

wa Suppliers on TỈ 1225622

Mobile Name: HupdteMNHÌ.A I Ss

Date of Notice: _:{{update.DNotice}

TT :[{update.Price]

Image: Ee OO [update Image} twee ee ee wwe ee OE | EE | hH

| Update Record

<body> <div> cfont> <strong> B2änw#ð7 v TK l3 se god 8 ay) 3 Sea “7 nse Su Ga “b

Hinh 49

8 Tạo form cập nhật trên cùng một trang (Search Update) Gồm 2 bước:

> Tạo trang chứa (trang HTML) gồm 2 frame: masterFrame, detailFrame > Tao trang search, hién thi trong frame masterFrame

> Tao trang HTML dé hiển thị khi chưa có kết quả tìm

> Tạo trang chỉ tiết, hiển thị trong frame detailFrame khi tìm thấy dữ liệu

=> Thực chất là ta vẫn tạo một form tìm kiếm và một form để hiển thi chi tiết, nhưng khác ở chỗ là cả 2 form này đều được hiển thị trên cùng một trang chứa gồm 2 frame

Tạo trang chứa (Update.htm)

~ŠLIntitled Dorunnent (PrpjerctLipdate”) - Macromedia Dreamy - || x| File Edit view Insert Modify Text Commands Site Window Help

| >| BI Ze 23% | Title: Untitled Document i @= CC wm it

<frameset> 496443 ~ IK i 1 sec cau im ) > €2 +7 Sh Sy Gi -

Hinh 50

Trung tam dao tao quan tri & an ninh mang ATHENA www.athena.edu.vn Hotline: 27

Trang 30

Tao trang Search (UpdateMaster.asp)

=) Untitled Document (Project/UpdateMaster) - Macromedia — |n| x| File Edit view Insert Modify Text Commands Site window Help

| 4| z2 ||: | 33 “Title: Untitled Document iy Gà | œ 4# {} :

UPDATE PRODUCT

<body> <p> <strong> «Fonts 4964W6~ 3Kilseo goa mM Oe 6) 7 oe Qi -

Hinh 51

> form cé cdc thu6c tinh sau:

Chú ý: thuộc tính target: là “detailFrame” (phải tự nhập vào vì khơng có trên list box)

Form Name Action UpdateDetailasp tà Target [setailFrame| = | Œ)

et masterForm Method [Post x Enctype | | số Hình 52

> Đặt tên cho menu là MobileCode, giá trị được lấy từ Recordset “mcode” (xem phần

Tạo form cập nhật dạng Master-Detail)

Tạo trang hiển thị khi chưa có dữ liệu (UpdateDetail.htm)

>) Untitled Document (Project/UpdateDetail) - Macromedia Dr = lÌm |x| File Edit View Insert Modify Text Commands Site Window Help

| >) SSE 223 | Title: | Untitled Document i @ | Cc em {) 3]

DETAIL FORM

<body> <div> <p> <em> <strong> ston |439#81„ 1Kilzee gt, go D 3 64 7 Se Me „

Hinh 53

Tạo trang hiển thị chỉ tiết (UpdateDetail.asp)

Trang này đã được tao trong phan tao trang Update dang Master-Detail 6 trén (hinh 49)

> Sau khi thực hiện xong ta có trang chứa (Update.htm) như hình 54 Khi chọn vào

menu, và click vào nút Submit > form Update_Detail.asp sẽ hiển thị vào frame

detailFrame phí dưới

Trang 31

-¿Untitled Document (Project/UpdaEe)} - *1acromedia Df6äí = |đ | x| File Edit View Insert Modify Text Commands Site ‘Window Help

=2 Title: | Untitled Document lige oO Cg th

UPDATE PRODUCT

bo Select Mobile's name to update :| |R|EEWWSN -

DETAIL FORM

<frameset> 4720298 ~|\2Kilsee ga, BD = 2 7 te Me Ge -

Hinh 54

9 "Tạo form Delete dạng Master-Detail (tương tự như các tạo form Update)

Gồm 2 bước:

> Tao trang search

> Tạo trang hiển thị kết quả có chứa nút “Xoá”

Tạo trang Search

a Tao giao dién vào lưu file (Delete.asp)

b Tạo Recordset “mcode” dùng để truy xuất tên và code của Mobile cần delete

-¿ LIntitled Document (Project/Delete} - *Iacromedia DFeaiiie = |n| x|

DELETE PRODUCT C a> th

<body> <p> <strong> ¢fonts 496244~ 3Kilsec „¡3 | C2 È2 €4 7 Se Sy i -

Hinh 55

- _ Đặt tên cho menu là MobileCode, giá trị được lấy từ Recordset “mcode” - _ form có các thuộc tính sau:

1900 54 54 56

Form Mame Action (Dalate_ detail.xsp Bà Target Lz *

tormli Method [Post > | Enctype | =

Hinh 58

Trang 32

2 Tạo trang hiển thị kết quả (Delete_ detail.asp)

a tao resordset “DelMobile” tu’ bang Mobile nhu sau:

Mame: | DelMobile

Connection: |MyConnect >| Define |

Table: | Mobile |

Cnlumns: í“ All ” selected:

Hinh 59

b Tao giao diện trang hiển thị trước khi xóa như hình sau (Hoặc đơn giản là copy

file Update_ Detail.asp và lưu lại thành tên Delete_ detail.asp) =) Untitled Document (Project /‘Delete_detail) - Macromedia Drea

File Edit view Insert Modify Text Commands Site ‘Window Help =|5] x!

| %°| Ge] Zz | sa “Tile: Untitled Document fi @ | C ar fh, i, DELETE PRODUCT : Mobile Code:] ee ee ee ee ' ‘Date of Notice::{ ị i ị Delete Record | ébady> ¢divs Image (156x279) | |505u371 „ |402see s8 lÍj 2Q ở} 42 Z7 S2 SD 3 - Hình 60

Trang 33

c Chọn form sau đó vào Server Behaviors > từ dấu + chọn Delete Record > một hộp thoại hiển thị và tiến hành khai báo như sau:

Delete Record

Connection: |MyConnect M Define

vr

Delete From Table: [Mobile | Select Record From: |DelMobile |

Unique Key Colurnm: |Mrade M [Numeric

Delete By Submitting: |tarmi

After Deleting, Go Ta: |Message.asp

Cancel Help ele

Hinh 61

d Vao Bindings, tién hanh kéo tha cdc field vao cdc form object tương Ứng, sau đó lưu file để kết thúc

Trang 34

Ill MOT SỐ ĐIỂM CHÚ Ý

1 Các lỗi thường gặp:

Error Nguyên nhân Xử lý

> 80004005-Couldn’t

use ‘(unknown)’; file already in use

> 80004005- Microsoft Jet

database engine cannot open the file

Do khơng có đủ quyền trén Database hoac thu mục chứa Database

Vào “Internet Services Manager” chọn

thư mục hoặc virtual directory chứa

trang web

- chOn properties > chon tat ca cac

quyén: read, write, script osurce access, va directory brousing

Do khéng du timeout Vao “ODBC Microsoft Access Setup”

(unknown) (khi kết nối DSN) - _ Chọn Options > tăng Page timeout

lên 5000

80040e10—Too few |Khi cau SQL truy vấn > Vao code view > chinh cau SQL

parameters đến một trường không tồn tại hoặc là

Vùng hiển thị giá trị của |> Tạo một PlaceHolder chứa ảnh để

trường chưa hợp lý thay thế cho vùng text do Dreamweaver

(thường là khi ta cho MX tu tao

hiển thị ảnh đối với form 7

mas-det)

800a0bcd——Either View page khi đang thiết |Đóng các chương trình liên quan (đơi khi

BOF or EOF istrue |kế hoặc là có một trang |phai logoff mdy sau do login tré lai) đang truy xuất vào

recordset

Truy xuất vào recordset

rong ma không bây lôi Xem lại các thành phần Ở “Server behaviors” Nếu có dấu ! màu đỏ >

double click để edit cho chính xác

ể Để tìm hiểu sâu hơn về Dreamweaver MX và các tình huống xử lý ta có thể vào menu Help / Tutorials để xem chỉ tiết

ế Chúc các bạn thành công

Định dạng
Số trang	34
Dung lượng	3,49 MB