Ứng dụng AJAX xây dựng website văn hóa ẩm thực

Một trong những ứng dụng nhỏ nhưng nổi tiếng nhất của Ajax là tính năng “Live Search”, gõ một kí tự vào ô tiềm kiếm và một danh sách các kết quả xuất hiện ngay lập tức bên dưới, gõ thêm

MỞ ĐẦU

Việc cập nhật thông tin là điều không thể thiếu ở mỗi người, thông tin có thể từ nhiều nguồn như báo chí, sách, đài và các phương tiện thông tin đại chúng khác Ngày nay Internet mở ra cho chúng ta một hình thức tiếp cận thông tin mới thông qua các hệ thống website điện tử cung cấp các nội dung báo chí truyền tải nội dung đến người xem một cách nhanh chóng và tiện lợi Hằng ngày trên thế giới có hàng triệu triệu con người đang truy cập vào các website để tìm kiếm thông tin cho mình trong đó có thông tin về báo chí Ở nước ta hiện nay có rất nhiều website cung cấp tin tức và có số lượng người truy cập lớn như:

MỤC LỤC

CHƯƠNG 1 TỔNG QUAN 7

1.1 ĐẶT VẤN ĐỀ 7

1.1.1 Hiện trạng chung 7

1.1.2 Lý do thực hiện đề tài 8

1.2 NHIỆM VỤ CỦA ĐỀ TÀI 9

1.3 CẤU TRÚC CỦA ĐỒ ÁN 10

1.4 YÊU CẦU CÁC CHỨC NĂNG CHÍNH 11

1.4.1 Đối với ban quản trị 11

1.4.2 Đối với Nhà cung cấp 11

1.4.3 Đối với khách hàng 11

1.5 YÊU CẦU PHI CHỨC NĂNG 11

1.6 HẠN CHẾ CỦA HỆ THỐNG 12

1.7 YÊU CẦU KỸ THUẬT 12

1.7.1 Phần cứng 12

1.7.2 Phần mềm 12

1.7.2.1 Đối với người phát triển phần mềm 12

1.7.2.2 Đối với máy chủ triển khai ứng dụng 12

CHƯƠNG 2 TỔNG QUAN VỀ AJAX 13

2.1 LỊCH SỬ AJAX 13

2.2 ỨNG DỤNG CỦA AJAX 14

2.3 KHÁI NIỆM AJAX 15

2.4 MÔ HÌNH HOẠT ĐỘNG CỦA AJAX 17

2.5 CÁC CÔNG NGHỆ TRONG AJAX 19

2.5.1 Công nghệ trong AJAX – Javascript 19

2.5.2 Đặc tính của ngôn ngữ javascript 20

2.5.3 Built-in Object trong javascript 21

2.5.4 Các đối tượng được cung cấp bởi môi trường Netscape 21

2.5.5 Các đối tượng do người lập trình xây dựng 21

2.5.6 Các cú pháp cơ bản của lệnh : 22

2.5.7 Sự kiện trong JavaScript 25

2.5.8 Cascading Style Sheet – CSS 26

2.5.9 Các ưu điểm của CSS trong thiết kế web 27

2.5.10 Tổng quan XML 28

2.5.10.1 Khái niệm 28

2.5.10.2 Lịch sử 28

2.5.10.3 Đặc điểm 28

2.5.10.4 Ứng dụng của XML 30

CHƯƠNG 3 GIẢI QUYẾT BÀI TOÁN 35

3.1 PHÂN TÍCH THIẾT KẾ HỆ THỐNG THÔNG TIN 35

3.1.1 Sơ Đồ Use Case 35

3.1.1.1 Use Case Nhà Cung Cấp 35

3.1.1.2 Sơ Đồ Use Case Thực Khách Và Hệ Thống 36

3.1.1.3 Sơ Đồ Use Case Ban Quản Trị 36

3.1.1.4 Sơ đồ Use Case Khách Hàng Vãng lai 38

3.1.1.5 Sơ đồ Use Case Của Toàn Hệ Thống 39

3.1.2 Đặc tả Use case 39

3.2 SƠ ĐỒ TRÌNH TỰ CÁC CHỨC NĂNG CHÍNH 41

3.2.1 Sequence diagram cho Use Case Login 41

3.2.2 Sequence diagram cho Use Case Đăng ký thành viên 42

3.2.3 Sequence diagram cho Use Case Cập nhật Thông Tin Nhà Cung Cấp 43

3.2.4 Sequence diagram Use Case Đăng Bài Giới Thiệu Món Ăn 44

3.2.5 Sequence diagram cho Use Case Tìm kiếm Món Ăn, Nhà Hàng, Tin tức 45

3.3 SƠ ĐỒ TIẾN TRÌNH 46

3.3.1 Sơ Đồ Tiến Trình Của Nhà Cung Cấp 46

3.3.2 Sơ Đồ Tiến Trình Của Món Ăn 46

3.3.3 Sơ Đồ Tiến Trình Của Thông Tin Phản Hồi 47

3.4 MÔ HÌNH THỰC THỂ KẾT HỢP 48

3.5 MÔ HÌNH DỮ LIỆU QUAN HỆ 48

3.5.1 Bảng PhanLoaiNCC 48

3.5.2 Bảng KhuVucNCC 49

3.5.3 Bảng NhaCungCap 49

3.5.4 Bảng PhanLoaiMonAn 50

3.5.5 Bảng MonAn 50

3.5.6 Bảng PhanLoaiTinTuc 51

3.5.7 Bảng TinTuc 51

3.5.8 Bảng BanQuanTri 52

3.5.9 Bảng PhanHoiTuThucKhach 52

3.6 QUAN HỆ GIỮA CÁC BẢNG 54

3.7 Ràng buộc toàn vẹn 54

3.7.1 Ràng buộc toàn vẹn trên một bảng 54

3.7.2 Ràng buộc toàn vẹn về miền giá trị 57

3.7.3 Ràng buộc liên bộ 59

3.7.4 Ràng buộc toàn vẹn có bối cảnh gồm nhiều quan hệ 61

3.7.4.1 Ràng buộc toàn vẹn về phụ thuộc tồn tại 61

3.7.4.2 Ràng buộc liên thuộc tính , liên quan hệ 63

3.8 DẠNG CHUẨN 65

3.9 SƠ ĐỒ WEBSITE 69

3.9.1 Sơ Đồ Cho Người Dùng 69

3.9.2 Sơ Đồ Cho Ban Quản Trị 70

CHƯƠNG 4 KẾT QUẢ THỰC HIỆN 71

4.1 NHỮNG TRANG ỨNG DỤNG AJAX 71

4.1.1 Trang của ban quản trị 71

4.1.2 Trang khi xác lập lại mật khẩu cho quản trị khác 71

4.1.3 Trang đăng kí 72

4.1.4 Trang đổi mật khẩu của Nhà cung cấp 73

4.1.5 Trang quy định khi đăng ki 74

4.1.6 Xác lập lại mật khẩu cho nhà cung cấp 75

4.2 GIAO DIỆN CỦA CHƯƠNG TRÌNH 75

4.2.1 Trang chủ 75

4.2.2 Chi tiết món ăn 77

4.2.3 Trang admin 78

4.2.4 Góp ý tới nhà cung cấp 78

4.2.5 Giới thiệu thông tin nhà cung cấp 79

4.2.6 Trang đổi mật khẩu của Nhà cung cấp 79

4.3 CÀI ĐẶT VÀ THỬ NGHIỆM 81

4.3.1 Chuẩn bị 81

4.3.2 Thực hiện 81

CHƯƠNG 5 ĐÁNH GIÁ VÀ KẾT LUẬN 82

5.1 ĐÁNH GIÁ 82

5.2 HƯỚNG PHÁT TRIỂN 82

TÀI LIỆU THAM KHẢO 83

CHƯƠNG 1 TỔNG QUAN 1.1 ĐẶT VẤN ĐỀ

và giúp họ tiến hành quảng cáo theo đúng với sở thích và thị hiếu của người tiêu dùng Các phương tiện thông tin đại chúng khác cũng có khả năng nhắm chọn, nhưng chỉ có mạng Internet mới có khả năng tuyệt vời như thế

Mục tiêu của nhà quảng cáo là gắn khách hàng triển vọng với nhãn hiệu hoặc sản phẩm của họ Điều này có thể thực hiện hiệu quả trên mạng, vì khách hàng có thể tương tác với sản phẩm, kiểm tra sản phẩm và nếu thoả mãn thì có thể mua Đưa Internet vào chiến lược tiếp thị không còn mới mẻ đối với các doanh nghiệp trong thời đại mà nền kinh tế mạng đang giữ vai trò thống soái

Internet - điểm đến để tìm kiếm thông tin Có lẽ lý do quan trọng nhất để các công ty cần có một chiến lược tiếp thị trên Internet là sự thay đổi ở cách thức các khách hàng tìm kiếm thông tin Mặc dù số lượng khách hàng thăm viếng các cơ sở kinh doanh truyền thống vẫn chiếm số đông nhưng số người sử dụng Internet như một kênh thông tin quan trọng nhất, tiện lợi nhất, đang càng ngày càng tăng với tốc độ chóng mặt Các chuyên gia tiếp thị cần phải nhận ra rằng Internet bây giờ đã và đang

trở thành sân chơi hữu ích, thiết thực của đông đảo người tiêu dùng Internet - điều kỳ

vọng của khách hàng

Qua Internet, các doanh nghiệp có thể nắm bắt được nhiều thông tin về khách hàng Là một công cụ thu thập thông tin, đóng vai trò vô cùng hiệu quả trong việc cung cấp thông tin về hoạt động của khách hàng Giúp bạn dễ dàng tiếp thị đến đúng

đối tượng mục tiêu Internet là công cụ tiện lợi nhất để truyền tải thông tin với tốc độ nhanh nhất đến không chỉ một vài chục người, vài trăm người, mà là hàng triệu triệu người trong thế giới rộng mở không còn cách biệt bởi biên giới địa lý này

Internet cho phép nhà sản xuất chào bán các sản phẩm và dịch vụ theo yêu cầu

cá nhân của khách hàng Trong thời đại bùng nổ của Internet, các nhà sản xuất hay cung cấp dịch vụ có thể phát triển lượng khách hàng trung thành khi chất lượng sản phẩm và dịch vụ đưa ra thỏa mãn được nhu cầu cá nhân của từng khách hàng

Internet mở ra cơ hội giao dịch trực tuyến tiện lợi nhất, linh động nhất cho khách hàng Nó là một đại lộ thông tin, một siêu thị khổng lồ, nơi mà người tiêu dùng

có thể ghé thăm hay mua sắm tuỳ thích Internet cho phép khách hàng xem sản phẩm mẫu trên mạng, từ cây kim sợi chỉ cho đến xe hơi, biệt thự… Nhờ đó, khách hàng có thể đưa ra quyết định ngay lập tức sau khi xem quảng cáo

Internet hiện diện khắp nơi trên thế giới Internet là kênh truyền thông và phân phối cho phép khách hàng tiềm năng trên toàn cầu truy cập tới các sản phẩm và dịch

vụ của công ty Thông qua trang web, các nhà kinh doanh ở khắp nơi trên thế giới có thể mở rộng thị trường mục tiêu ra gấp nhiều lần

Website là bộ mặt của doanh nghiệp, là bộ mặt của thương hiệu trên internet, thể hiện những gì mà doanh nghiệp muốn người tiêu dùng nhận thức về thương hiệu của mình và khắc sâu vào tâm trí khách hàng Tạo dựng (thiết kế) Website là một phần quan trọng trong tạo dựng và phát triển thương hiệu Xây dựng và phát triển Website cho doanh nghiêp đối tác khách hàng thật sự ấn tượng và hiệu quả nhằm tạo kênh thông tin chất lượng, hiệu quả nhất trên Internet

Internet đang ngày càng minh chứng uy lực của mình, là một bệ phóng đẩy ngành kinh doanh lên một tầm mới, là “nỏ thần” giúp các công ty nhỏ vừa có thể kinh doanh và cạnh tranh với những người khổng lồ trên thị trường

1.1.2 Lý do thực hiện đề tài

Đất nước và con người Việt Nam từ lâu đã được biết đến là một đất nước giàu truyền thống văn hóa dân tộc và một trong những bản sắc truyền thống nổi bật nhất của Việt Nam chính là văn hóa ẩm thực Văn hóa ẩm thực Việt Nam được biết đến bởi

rất nhiều món ăn ngon, hấp dẫn và nổi tiếng được lưu truyền qua nhiều thế hệ và mang đậm hương vị quê hương

Việc tạo ra hệ thống Website cung cấp một kênh riêng, giúp các nhà hàng giới thiệu các món ăn của mình Mang lại các thông tin văn hóa ẩm thực tới thực khách là rất cần thiết Nhằm đem đến cho người dân Việt Nam các thông tin về các món ăn ngon, các món ăn ẩm thực truyền thống của dân tộc Hơn thế nữa, nó còn giúp quảng

bá, giới thiệu ra thế giới, với du khách đến Việt Nam các món ăn độc đáo mang đậm phong cách riêng của người Việt Nam

Mục đích: Giúp tạo ra một kênh trực tuyến, một sân chơi chung cho các nhà hàng và thực khách Nhà hàng có nơi để giới thiệu quảng cáo về các món ăn của mình Thực khách có thể xem hoặc tìm kiếm thông tin về các món ăn, nhà hàng, tin tức về

ẩm thực

1.2 NHIỆM VỤ CỦA ĐỀ TÀI

Ứng dụng AJAX xây dựng Website trực tuyến thông tin về văn hoá ẩm thực

Yêu cầu gồm:

- Phân tích tổ chức hệ thống thông tin về cơ sở dữ liệu nhằm mục đích lưu trữ thông tin về lĩnh vực văn hoá, ẩm thực

- Xây dựng ứng dụng nhằm mục đích nhập , kiểm tra dữ liệu trước khi hiển thị

Thông tin cần xây dựng:

- Thông tin về ẩm thực : Món ăn,Quán ăn , nhà hàng , khách sạn…

- Thông tin về văn hoá gồm: Rạp chiếu phim , Nhà hát, Sân khấu , Nhà văn hoá, Câu lạc bộ, Công viên- công viên nước, Quán cà phê, Quán Bar, Karaoke, Vũ trường, Phòng Game, Internet…

Người sử dụng

- Có thể tìm kiếm , xem thông tin chi tiết về văn hoá ẩm thực

- Mỗi một User đều có thể đăng ký một tài khoản(đăng ký thành viên) trong website

- Có thể đăng, chỉnh sửa , xoá thông tin của họ trên website (bắt buộc phải là thành viên của website)

Giao diện

- Màu sắc phải hài hoà , phù hợp với lĩnh vực về văn hoá ẩm thực

- Bố trí phải hợp lý , tiện ích cho người sử dụng

- Trình bày rõ ràng, nhằm mục đích nâng cao chất lượng website

Cơ sở dữ liệu

- Cơ sở dữ liệu phải linh động Netframework để thực thi ( sử dụng ngôn ngữ lập trình ASP.net, C#.net, VB.nét, javscript,AJAX, DOM, XML… có thể sử dụng tất cả các công nghệ mới nhưng phải phù hợp và thích ứng nếu có sự thay đổi)

- Sử dụng hệ cơ sở dữ liệu MS Sqlserver 2005

1.3 CẤU TRÚC CỦA ĐỒ ÁN

Nội dung của luận văn gồm 5 chương:

1 Tổng quan về đề tài: Giới thiệu vai trò của Internet và nêu lên nhu cầu thực tế và lý

do thực hiện đề tài, đồng thời giới thiệu sơ lược về đề tài và mục tiêu phải thực hiện

2 Giới thiệu về Ajax: Trình bày tổng quan về Ajax

3 Phân tích thiết kế ứng dụng: Trình bày các sơ đồ tuần tự của một số chức năng nổi

bật, mô tả về cơ sở dữ liệu của ứng dụng và trình bày sơ đồ màn hình trong ứng dụng

4 Kết quả thực hiện: Mô tả giao diện chương trình và hoạt động của trang web, nêu

lên các bước thực hiện chương trình

5 Đánh giá và kết luận: Nêu ra các đánh giá và kết luận, đưa ra hướng phát triển của

trang web

1.4 YÊU CẦU CÁC CHỨC NĂNG CHÍNH

1.4.1 Đối với ban quản trị

- Quản lý nhà cung cấp

- Quản lý các món ăn (của tất cả các nhà cung cấp)

- Quản lý phản hồi

- Quản lý danh mục (Cập nhật danh mục món ăn, thông tin )

1.4.2 Đối với Nhà cung cấp

- Xem và tìm kiếm các món ăn

- Xem và tìm kiếm các nhà cung cấp

- Xem tin tức về văn hóa ẩm thực

- Viết phản hồi (Tới nhà hàng hoặc tới ban quản trị)

1.5 YÊU CẦU PHI CHỨC NĂNG

- Công việc đưa thông tin lên website phải đảm bảo chính xác, không chấp nhận sai sót

- Sử dụng mã hoá các thông tin nhạy cảm của khách hàng

- Đảm bảo an toàn dữ liệu khi chạy website trực tuyến

1.6 HẠN CHẾ CỦA HỆ THỐNG

Website là một kênh nghiêng về khía cạnh giới thiệu văn hóa ẩm thực chứ không thiên v

-

ề kinh doanh vì vậy không có chức năng đặt hàng qua mạng cũng

như thanh toán trực tuyến

- Không hỗ trợ chức năng diễn đàn

1.7 YÊU CẦU KỸ THUẬT

1.7.1 Phần cứng

Intel Pentium 4,2.0 Ghz, Harddisk 40Gb, Ram 512 Mb, AGP 32 Mb

1.7.2 Phần mềm

1.7.2.1 Đối với người phát triển phần mềm

- Hệ điều hành: Windows Xp SP2, Windows Server 2003 SP1-2

- Phần mềm: IIS 5.1, Net Framework 2.0, MSSQL Server 2005, Atlas

Framework, Visual Studio 2005, FrontPage 2003

1.7.2.2 Đối với máy chủ triển khai ứng dụng

- Hệ điều hành: Windows Server 2003 SP1-2

- Phần mềm: IIS 5.1, Net Framework 2.0, MSSQL Server 2005

CHƯƠNG 2 TỔNG QUAN VỀ AJAX 2.1 LỊCH SỬ AJAX

Thuật ngữ AJAX được xuất hiện vào ngày 18/2/2005 trong một bài báo có tên AJAX Ngay sau đó thuật ngữ AJAX được phổ biến cực kỳ nhanh chóng trong cộng đồng phát triển Web và cho đến nay nó là một trong những từ khóa được tìm kiếm nhiều nhất trên Internet

Thế hệ Web 2.0 chỉ vừa bắt đầu và sẽ phải trải qua cả một chặng đường dài phía trước để có thể thay đổi những gì quen thuộc với mọi người hiện nay Đóng vai trò then chốt trong giai đoạn thứ hai của web là tổ hợp công nghệ Ajax Khái niệm Ajax xuất hiện từ khi Microsoft phát triển công nghệ Remote Scripting vào năm 1998 Tuy nhiên, phương pháp tải không đồng bộ nội dung trên một trang web đã xuất hiện trong thành phần IFRAME của Internet Explorer 3 (1996) và thành phần LAYER của Nestcape 4.0 năm 1997 Khi giới thiệu Internet Explorer 4.0, Microsoft đã sử dụng

mô hình đối tượng tài liệu DOM Đến năm 2000, Netscape hoàn toàn đánh mất thị trường trình duyệt vào tay hãng phần mềm của Bill Gates và thành phần LAYER cũng không còn được các chuyên gia phát triển web chú ý tới

Phải vài năm sau, Ajax mới lại lôi kéo được sự quan tâm của giới công nghệ và trở thành công cụ cải tiến giao diện người dùng cho ứng dung web Ajax trở thành trung tâm trong mọi câu chuyện liên quan đến thế hệ web 2.0

Hình 2.1 WEB 2.0

phần mềm ở máy mình vậy

Hình 2.2 Ứng dụng của Ajax

Một trong những ứng dụng nhỏ nhưng nổi tiếng nhất của Ajax là tính năng

“Live Search”, gõ một kí tự vào ô tiềm kiếm và một danh sách các kết quả xuất hiện ngay lập tức bên dưới, gõ thêm một kí tự nữa và danh sách đó tự động rút gắn lại,…Một số ứng dụng khác cũng khá phổ biến như:

- Tính năng “Auto save”: Ajax có những tính năng của các phần mềm soạn thảo khác tự động lưu những người dùng đã gõ được sau một khoảng thời gian nhất định

- Kiểm tra trùng lặp: Bạn tạo ra một mẫu đơn đăng kí, và nhập hết thông tin rồi gửi form đăng kí lên máy chủ để kiểm tra Ajax sẽ giúp kiểm tra từng dòng lệnh mà bạn nhập vào form đăng kí xem có trùng lặp với thông tin trong cơ sở dữ liệu

- Dịch trực tuyến: Ajax tạo ra tính năng cho phép người dùng chỉ cần chọn một từ trên trang web và hiển thị tương ứng của các ngôn ngữ khác

- Các trang bán hàng trưc tuyến: Cập nhật theo thời gian thực danh sách người mua chọn và giá cả mà không cần phải tải lại trang web

- Hệ thống đánh giá ở các trang web: Người dùng nhấn nút đánh giá và ngay lập tức nó sẽ được cập nhật vào hệ thống

2.3 KHÁI NIỆM AJAX

Ajax là viết tắt của Asynchronous JavaScript and XML (JavaScript và XML không đồng bộ), kỹ thuật kết hợp hai tính năng mạnh của JavaScript được các nhà phát triển đánh giá rất cao Ajax là sự kết hợp một nhóm công nghệ với nhau:

- XHTML +CSS với vai trò hiển thị thông tin Các chuẩn của W3C, được Firefox (Mozilla), Safari (Apple), Opera, Netscape 8.0 (nhân Firefox) hỗ trợ rất tốt

- Mô hình tương tác và hiển thị động DOM (Document Object Model), chuẩn của W3C

- Trao đổi và truy cập lên thông tin sử dụng XML và XSLT, chuẩn của W3C

- Thu hồi dữ liệu bất đối xứng dùng XMLHttpRequest

- Javaxscrip với vai trò kết hợp 4 công nghệ trên lại với nhau JavaScript ở đây là ECMAScript, chuẩn của ECMA, không phải là JScript của Microsoft AJAX không là một ngôn ngữ lập trình mới, nhưng mà một kỹ thuật được tạo

ra tốt hơn, nhanh hơn, và những ứng dụng mạng tương tác hơn Với AJAX, JavaScript của bạn có thể trực tiếp liên lạc với server, việc dùng đối tượng JavaScript XMLHttpRequest Với đối tượng này, JavaScript của bạn có thể trao đổi dữ liệu với web server, không có nạp lại trang

AJAX sử dụng việc truyền dữ liệu không đồng bộ (những yêu cầu HTTP) giữa trình duyệt và web server, cho phép trang web yêu cầu những mẫu nhỏ thông tin từ server thay vì toàn bộ trang

Kỹ thuật AJAX làm cho ứng dụng Internet nhỏ hơn, nhanh hơn và dể sử dụng hơn.AJAX là một kỹ thuật của trình duyệt độc lập với phần mềm web server

Ở các ứng dụng web truyền thống, client sẽ gửi HTTP Request đến web server

và web server sẽ gửi trả response chứa các thông tin dưới dạng HTML và CSS Ajax cho phép tạo ra một Ajax Engine nằm giữa giao tiếp này Khi đó, các yêu cầu gửi resquest và nhận response do Ajax Engine thực hiện Thay vì trả dữ liệu dưới dạng HTML và CSS trực tiếp cho trình duyệt, web server có thể gửi trả dữ liệu dạng XML

và Ajax Engine sẽ tiếp nhận, phân tách và chuyển hóa thành XHTML+CSS cho trình duyệt hiển thị Việc này được thực hiện trên client nên giảm tải rất nhiều cho server, đồng thời người sử dụng cảm thấy kết quả xử lý được hiển thị tức thì mà không cần nạp lại trang Mặt khác, sự kết hợp của các công nghệ web như CSS và XHTML làm cho việc trình bày giao diện trang web tốt hơn nhiều và giảm đáng kể dung lượng trang phải nạp Đây là lợi ích của Ajax

Ajax dựa trên những tiêu chuẩn web sau đây :

- JavaScript

- XML

- HTML

- CSS

Những tiêu chuẩn web được dùng trong Ajax thì được định nghĩa tốt, và được

hổ trợ cẩn thận bởi tất cả các bộ trình duyệt chính Những ứng dụng Ajax là bộ trình duyệt và nền tản độc lập

AJAX tốt hơn những ứng dụng Internet Những ứng dụng web có nhiều lợi ích qua những ứng dụng desktop, chúng có thể đến được với độc giả nhiều hơn, dể dàng hơn cho việc cài đặc, hổ trợ và phát triển

2.4 MÔ HÌNH HOẠT ĐỘNG CỦA AJAX

Từ lâu mọi người đã sử dụng mô hình web truyền thống với những khuyến điểm khá bất tiện và mất thời gian Để khắc phục hạn chế của nguyên lý hoạt động của web truyền thống, người ta phát triển thêm hình thức trung gian “cơ chế xử lý AJAX”

Hình 2.3 Ứng dụng web truyền thống(trái) và ứng dụng AJAX (Adaptive Path)

- Ajax thực hiện tương tác với máy chủ bằng cách sử dụng đối tượng XMLHttpRequest, nhận kết quả về dưới dạng XML và phân tích kết quả bằng công nghệ DOM

- Tương tác giữa Ajax và giao diện người dùng được thực hiện thông qua các

mã Javascript và XHTML + CSS

Mô hình sau thể hiện những gì diễn ra giữa giao diện ứng dụng web- Ajax- và máy chủ

Hình 2 ương tác đồng bộ trong ứng dụng web truyền thống (trên) và dị bộ trong

ứng dụng AJAX (Adaptive Path)

.4 T

p trình đa năng, nó tương đối giống C JavaScript

u tự do, thông dịch, ngôn ngữ kịch bản

bằng cách dùng JavaScript để điều khiển Docum

diễn d liệu cho người dùng, đồng thời xử lí các tương tác trên chuột và bàn phím Cascading Style Sheets (CSS) cung cấp một sự nhất quán trên cảm quan “look and feel” cho ứng dụng và khả năng thao tác mạnh mẽ với DOM Đối tượ

cách b t đồng bộ với server, đảm bảo việc gửi yêu cầu người dùng và tái nạp dữ liệu trong khi người dùng vẫn làm việc

2.5.1 Công nghệ trong AJAX – Javascript

- JavaScript là một ngôn ngữ lậ

được biết dưới dạng một ngôn ngữ có kiể

Kiểu tự do nghĩa là các biến không được khai báo cụ thể như string, integer, hay objec

ƒ Đơn giản

tượng (Object Oriented)

c tính quan trọng của ngôn ngữ JavaScript là khả năng

t) Các Object này cho phép người lập

Trong môi trường trình duyệt web, các chức năng cơ bản của trình duyệt, gồm CSS, DOM, và các đối tượng XMLHttpRequest, được c

của JavaScript, cho phép các nhà phát triển điều khiển các trang ở các mức độ khác nhau

Trong chồng công nghệ (tức là các công nghệ sử dụng liệt kê từ trên xuống dưới) của A

.2 Đặc tính của ngôn ngữ javascript

Javascript là một ngôn ngữ thông dịch (interpreter), chương trình nguồn

được nhúng (embedded) hoặc tích hợp (inte

oad trong Browser (có support cho JavaScript), Browser sẽ thông dịch các Script

và thực hiện các công việc xác định Chương trình nguồn JavaScript được thông dịch trong trang HTML sau khi toàn bộ trang được load nhưng trước khi trang được hiển thị

Các Object đã tồn tại chia làm 2 kiểu:

ƒ Các Object của JavaScript (JavaScript Built-in Object)

Các O c

uilt-in Object để cung cấp các thông tin về sự hiện h

được cung cấp bởi môi trường Netscape

avaScript tương tác với file HT

ƒ Các đối tượng được cung cấp bởi môi trường Netscape

bje t do người lập trình xây dựng

2.5.3 Built-in Object trong javascript

JavaScript cung cấp 1 bộ các B

ành của các đối tượng được load trong trang Web và nội dung của nó.Các đối tượng này bao gồm các phương pháp (Method) làm việc với các thuộc tính (Properties) của nó

2.5.4 Các đối tượng

Netscape Navigator cung cấp các đối tượng cho phép J

ML, các đối tượng này cho phép chúng ta điều khiển việc hiển thị thông tin và đáp ứng các sự kiện trong môi trường Navigator (điều hướng)

Ví dụ : Đối tượng mô tả

ƒ Window: Cung cấp các phương pháp và các tính chất cho cửa sổ hiện hành

ƒ tory cung cấp thông tin về các danh sách cũ và có

2.5.5 Cá

Properties)

của trình duyệt,bao gồm các đối tượng cho mỗi frame

Location: Cung cấp các tính chất và phương pháp làm

URL hiện hành được mở

History: Các đối tượng his

thể giới hạn sự tương tác với danh sách

Document: Đây là một đối tượng được

các đối tượng,tính chất và các phương pháp làm việc với các thành phần của tài liệu như các: form, link, anchor, applet

c đối tượng do người lập trình xây dựng

Định nghĩa thuộc tính của đối tượng: (Object

áp : Object-name.Property-name (tên đối tượng.tên đặc tín

Ví dụ : Một đối tượng airplane có các thuộc tính như sau:

Sau khi đã có các thông tin về airplane ta tiếp tục x

hông tin này Ví dụ bạn muốn in ra mô tả của airplane hoặc tính toán khoảng cách tối đa của cuộc hành trình với nhiên liệu đã có:

} Xuất dữ liệu ra cửa sổ trình duyệt:

te() và document.writeln()

; Xuất c

Ví dụ riteln("It work!\n");

dụng hàm alert() để hiển thị thông báo trong

- với người sử dụng: Sử dụng phương pháp promt() để tương tác với

Ta có te(example); để xuất nội dung của biến

Nhúng JavaScript vào trong tập tin HTML:

Dữ liệu kiểu Boolean: Kết

Dữ liệu kiểu null: Trả về giá trị rỗng

Dữ liệu kiểu văn bản (giống như kiểu

nh của thẻ SC

+ SRC :Địa chỉ URL c

+ LANGUAGE: Chỉ định ngôn ngữ được sử dụng trong Script và c

g (ví dụ như :JavaScript ,JavaScript 1.2 vv… ,VBScript)

2.5.7 Sự kiện trong JavaScript

Các sự kiện cung cấp các tươ

ược load trong trang web, các hành động của user khi nhập dữ liệu vào form và khi click vào các button trong form

Khi sử dụng bộ quản lý sự ki

ộng dựa vào các sự kiện đựoc chọn Bảng sự kiện trong Javascript Tên sự kiện

mô tả:

- b

phần của Form (Khi user click ra ngoài một trường)

click : Khi user Click vào 1 link hoặc thành phần của

- change : Xãy ra khi giá trị của Form Field bị thay đổi bởi use

- focus : Xãy ra khi ngõ vào tập trung vào thành phần của Form

- load : Xãy ra khi một trang được Load vào trong bộ duyệt

- mouseover : Xãy ra khi User di chuyển mouse qua một Hyp

- select : Xãy ra khi User chọn 1 trường của thành phần Form

- submit : Xãy ra khi User xác nhận đã nhập xong dữ liệu

- unload : Xãy ra khi User rời khỏi trang Web

2.5.8 Cascading Style Sheet – CSS

CSS là từ viết tắt của Cascading Style Sheets : công dụng dùng để trang trí trang web của bạn, và thông thường được gắn với các ngôn ngữ như là HTML, PHP, dùng làm nổi bậc trang web và hình ảnh trang web của bạn

Mỗi khi bạn bắt đầu một Style Sheets, thì bắt buộc mở bằng <HEAD> và kết thúc bằng </HEAD> và tiếp theo sau đó là khai báo <STYLE TYPE="text/css"> và kết thúc bằng </STYLE>

Cascading Style Sheet – tạm dịch là bảng kiểu xếp chồng - là một phần không thể thiếu trong thiết kế Web, nó được dùng rất nhiều trong các ứng dụng Web truyền thống cũng như trong Ajax Một stylesheet đưa ra cách kiểm soát các loại định dạng trực quan, nó có thể được áp dụng cho các thành phần riêng lẻ trên các trang

Hơn nữa, cho các thành phần định dạng trực quan như màu sắc, lề, hình nền, tính trong suốt, kích cỡ, stylesheet có thể xác định cách mà các phần tử được bố trí quan hệ với các phần tử khác và tương tác với người dùng, cho phép các hiệu ứng khá mạnh mẽ

Trong ứng dụng Web truyền thống, stylesheet cung cấp một cách hiệu quả để xác định cách thể hiện vị trí và có thể được dùng lại trong nhiều trang web khác nữa.Với AJAX, stylesheet cung cấp một “kho chứa” các giao diện xác định trước có thể áp dụng cho các phần tử động với độ dài các đoạn mã nguồn là nhỏ nhất

CSS định dạng một trang web theo ba cách :

- Sử dụng trực tiếp kèm với các thẻ HTML (Inline Style Sheet)

- Định nghĩa trong một trang web (Internal Style Sheet)

- Định nghĩa thành một file CSS riêng (External Style Sheet) Trang web của chúng ta sẽ tham chiếu đến file CSS này

Một quy tắc định dạng và bố trí gồm có hai phần: thành phần lựa chọn - selector

và phần khai báo - style declaration Selector đặc tả các phần tử được định dạng và bố trí, và style declaration khai báo các thuộc tính định dạng sẽ được áp dụng Giả sử

muốn tạo ra các dòng text trong level-1 heading trong tài liệu (đó là đoạn nằm trong thẻ <H1>) có màu đỏ

Có thể khai báo thuộc tính CSS như sau:

h1 {color: red}

2.5.9 Các ưu điểm của CSS trong thiết kế web

CSS giúp tiết kiệm được rất nhiều thời gian và công sức cho việc thiết kế web Style trong phiên bản HTML 4.0 qui định cách thức thể hiện các thẻ Style thường được lưu trong các file nằm ngoài trang web Chúng giúp thay đổi cách thức định dạng

và cách bố trí các trang web chỉ bằng cách thay đổi riêng file CSS

CSS cho phép điều khiển cách định dạng và cách bố trí của cùng lúc nhiều trang web với chỉ duy nhất một lần thay đổi tại một vị trí Có thể định nghĩa nhiều style vào một thẻ HTML

CSS cho phép đưa các thông tin định nghĩa thẻ thông qua nhiều con đường khác nhau Style có thể được qui định ở trong chỉ một thẻ HTML, được qui định trong một trang web hoặc ở trong một file CSS bên ngoài

Property2: Value2;

}

Selector có thể là các thẻ/nhóm thẻ HTML, các lớp khai báo, hay bằng định danh duy nhất của phần tử

2.5.10 Tổng quan XML

2.5.10.1 Khái niệm

XML viết tắt từ tiếng Anh Extensible Markup Language, "Ngôn ngữ Đánh dấu

Mở rộng".XML là ngôn ngữ đánh dấu với mục đích chung do W3C đề nghị, để tạo ra các ngôn ngữ đánh dấu khác Đây là một tập con đơn giản của SGML, có khả năng mô

tả nhiều loại dữ liệu khác nhau Mục đích chính của XML là đơn giản hóa việc chia sẻ

dữ liệu giữa các hệ thống khác nhau, đặc biệt là các hệ thống được kết nối với Internet Các ngôn ngữ dựa trên XML (thí dụ: RDF, RSS, MathML, XHTML, SVG, và cXML) được định nghĩa theo cách thông thường, cho phép các chương trình sửa đổi và kiểm tra hợp lệ bằng các ngôn ngữ này mà không cần có hiểu biết trước về hình thức của chúng

2.5.10.2 Lịch sử

Vào giữa những năm 1990, các chuyên gia SGML đã có kinh nghiệm với World Wide Web (vẫn còn khá mới vào thời đó) Họ tin tưởng rằng SGML có thể cung cấp giải pháp cho các vấn đề mà Web đang gặp phải Jon Bosak đưa ra ý kiến W3C nên tài trợ một chương trình mang tên "SGML trên Web"

2.5.10.3 Đặc điểm

XML cung cấp một phương tiện dùng văn bản (text) để mô tả thông tin và áp dụng một cấu trúc kiểu cây cho thông tin đó Tại mức căn bản, mọi thông tin đều thể hiện dưới dạng text, chen giữa là các thẻ đánh dấu (markup) với nhiệm vụ ký hiệu sự phân chia thông tin thành một cấu trúc có thứ bậc của các dữ liệu ký tự, các phần tử dùng để chứa dữ liệu, và các thuộc tính của các phần tử đó Về mặt đó, XML tương tự với các biểu thức S (S-expression) của ngôn ngữ lập trình LISP ở chỗ chúng đều mô tả các cấu trúc cây mà trong đó mỗi nút có thể có một danh sách tính chất của riêng mình

Đơn vị cơ sở của XML là các ký tự theo định nghĩa của Universal Character Set (Bộ ký tự toàn cầu) Các ký tự được kết hợp theo các tổ hợp chuỗi hợp lệ để tạo thành một tài liệu XML Tài liệu này gồm một hoặc nhiều thực thể, mỗi thực thể thường là một phần nào đó của các ký tự thuộc tài liệu, được mã hóa dưới dạng một chuỗi các bit

và lưu trữ trong một tệp văn bản (text file)

Các tệp XML có thể dùng cho nhiều loại dữ liệu đa phương tiện RFC3023 định nghĩa các loại "application/xml" và "text/xml", với ý rằng dữ liệu được biểu diễn bằng XML mà không nói gì đến ngữ nghĩa của dữ liệu

Sự phổ biến của các phần mềm soạn thảo văn bản (word processor) đã hỗ trợ việc soạn thảo và bảo trì tài liệu XML một cách nhanh chóng Trước XML, có rất ít ngôn ngữ mô tả dữ liệu với các đặc điểm đa năng, thân thiện với giao thức Internet, dễ học và dễ tạo Thực tế, đa số các định dạng trao đổi dữ liệu thời đó đều chuyện dụng,

có tính độc quyền, và có định dạng nhị phân (chuỗi bit thay vì chuỗi ký tự) khó dùng chung giữa các ứng dụng phần mềm khác nhau hay giữa các hệ nền (platform) khác nhau Việc tạo và bảo trì trên các trình soạn thảo thông dụng lại càng khó khăn

Bằng cách cho phép các tên dữ liệu, cấu trúc thứ bậc được phép, và ý nghĩa của các phần tử và thuộc tính có tính chất mở và có thể được định nghĩa bởi một giản đồ tùy biến được, XML cung cấp một cơ sở cú pháp cho việc tạo lập các ngôn ngữ đánh dấu dựa XML theo yêu cầu Cú pháp chung của các ngôn ngữ đó là cố định — các tài liệu phải tuân theo các quy tắc chung của XML, bảo đảm rằng tất cả các phần mềm hiểu XML ít ra cũng phải có khả năng đọc (phân tích cú pháp - parse) và hiểu bố cục tương đối của thông tin trong các tài liệu đó Giản đồ chỉ bổ sung một tập các ràng buộc cho các quy tắc cú pháp Các giản đồ thường hạn chế tên của phần tử và thuộc tính và các cấu trúc thứ bậc được phép, ví dụ, chỉ cho phép một phần tử tên 'ngày sinh' chứa một phần tử tên 'ngày' và một phần tử có tên 'tháng', mỗi phần tử phải chứa đúng một ký tự Đây là điểm khác biệt giữa XML và HTML HTML có một bộ các phần tử

và thuộc tính không mềm dẻo, chỉ có một tác dụng và nói chung là không thể dùng cho mục đích khác

XML không hạn chế về việc nó được sử dụng như thế nào Mặc dù XML về cơ bản là dạng text, các phần mềm với chức năng trừu tượng hóa nó thành các định dạng khác giàu thông tin hơn đã nhanh chóng xuất hiện, quá trình trừu tượng hóa này được thực hiện chủ yếu qua việc sử dụng các giản đồ định hướng kiểu dữ liệu (datatype-oriented schema) và khuôn mẫu lập trình hướng đối tượng (mà trong đó, mỗi tài liệu XML được thao tác như là một đối tượng) Những phần mềm như vậy có thể coi XML như là dạng text đã được tuần tự hóa chỉ khi nó cần truyền dữ liệu qua mạng

- CML –Ngôn ngữ định dang hóa học

- MathMl – Ngôn ngữ định dạng toán học

- CDF – Khuôn dạng định nghĩa kênh

- SMIL – Ngôn ngữ tích hợp multimedia đồng bộ

- HTML+TIME

- XHTML

Chương trình XML đơn giản:

Ví dụ 1:

Hình 2.5 Đoạn mã của hình 2.5

</BUTTON>

<BUTTON ONCLICK=”if(!dsoCustomer.recordset.BOF) dsoCustomer recordset.movePrevious()”>&lt;

</BUTTON>

<BUTTON ONCLICK=”if(!dsoCustomer.recordset.EOF) dsoCustomer recordset.moveNext()”>&gt;

CHƯƠNG 3 GIẢI QUYẾT BÀI TOÁN 3.1 PHÂN TÍCH THIẾT KẾ HỆ THỐNG THÔNG TIN

3.1.1 Sơ Đồ Use Case

3.1.1.1 Use Case Nhà Cung Cấp

Các chức năng của nhà cung cấp:

3.1.1.2 Sơ Đồ Use Case Thực Khách Và Hệ Thống

ƒ Quản lý danh mục: tin tức, loại nhà cung cấp, khu vực nhà cung cấp

Hình 3.3 Sơ đồ Use Case Ban Quản Trị

3.1.1.4 Sơ đồ Use Case Khách Hàng Vãng lai

Các chức năng của khách hàng vãng lai

3.1.1.5 Sơ đồ Use Case Của Toàn Hệ Thống

Use case này bắt đầu khi hệ thống yêu cầu người dùng đăng nhập

Luồng sự kiện chính:

- Hệ thống hiển thị một màn hình yêu cầu người sử dụng nhập tên và mật khẩu

- Người dùng nhập tên và mật khẩu

- Sau khi nhập xong nhấn đồng ý

- Hệ thống sẽ chuyển thông tin lên server để xử lý

- Hệ thống sẽ kiểm tra tên và mật khẩu có trong cơ sở dữ liệu hay không

- Hệ thống sẽ dựa vào quyền của người đăng nhập để cấp cho những chức năng tương ứng

- Sau đó hệ thống sẽ thông báo cho người dùng biết là đã đăng nhập thành công Luồng sự kiện phụ

- Nếu trong luông sự kiện chính, người dùng nhập sai tên hoặc mật khẩu thì hệ thống sẽ thông báo là nhập tên và mật khẩu sai Hệ thống sẽ hiển thị lại màn hình đăng nhập yêu cầu người dùng đăng nhập lại

- Người dùng có thể đăng nhập lại hoặc là hủy bỏ việc đăng nhập

- Điều kiện tiên quyết

- Hệ thống phải kết nối thành công với server

Kết quả

Nếu đăng nhập thành công sẽ xuất hiện màn hình quản lý chính và tùy theo từng quyền của người dùng sẽ xuất hiện những chức năng tương ứng