NGHIÊN cứu và xây DỰNG WEBSITE TIN tức TRÊN nền WEB PORTAL 2 0

Có thể nói ngành công nghệ thông tin đã ứng dụng vào hầu hết các lĩnh vực trong đời sống con người, từ những hỗ trợ trong công nghiệp, nông nghiệp, giao thông, kinh doanh buôn bán…Nó đáp

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

WEB 2.0 PORTAL

Giảng viên hướng dẫn: Ths.Nguyễn Hữu Thương

Sinh viên thực hiện: Nguyễn Hữu Ninh MSSV: 06520340

Dương Châu Vĩnh Phúc MSSV: 06520350

TP Hồ Chí Minh, tháng 03 năm 2011

ABSTRACTS

Science world today tend to grow very fast and highly qualified One of the most

developed sciences is information technology It can be said that information

technology has been applied in most fields of human life, from support in industry,

agriculture, transportation, trading It is going on to satisfy the need of human

Today, information is transmitted quickly and conveniently That is why

many news sites still exist and develop Work on each site and read the information

waste time of users One solution to this problem is to make an electronic portal may

add more items of interest in a site to site was designed by the user's own

preferences The group has built : " News Website 2.0 Portal " to meet the needs of an

electronic portal

LỜI MỞ ĐẦU

Nền khoa học thế giới ngày nay có xu hướng phát triển rất nhanh và có trình độ rất

cao Một trong những ngành khoa học phát triển nhất hiện nay là ngành CNTT Có thể

nói ngành công nghệ thông tin đã ứng dụng vào hầu hết các lĩnh vực trong đời sống

con người, từ những hỗ trợ trong công nghiệp, nông nghiệp, giao thông, kinh doanh

buôn bán…Nó đáp ứng ngày càng nhiều yêu cầu của các lĩnh vực này để phục vụ nhu

cầu của con người

Ngày nay, thông tin được truyền đi nhanh chóng và tiện lợi, và các trang web tin

tức rất nhiều Việc vào từng trang web và đọc những thông tin mình quan tâm gây mất

thời gian cho người dùng Một giải pháp cho vấn đề này là làm một cổng thông tin điện

tử có thể thêm những mục quan tâm của nhiều trang web vào trong một trang web

được thiết kế theo ý thích riêng của người dùng Nhóm đã xây dựng “ Website 2.0

Portal tin tức ” đáp ứng được nhu cầu là một cổng thông tin điện tử

LỜI CÁM ƠN

Chúng em xin chân thành cám ơn khoa Công Nghệ Phần Mềm, trường Đại Học

Công Nghệ Thông Tin TpHCM đã tạo điều kiện tốt cho chúng em thực hiện tốt đề tài

luận văn tốt nghiệp này

Chúng em xin chân thành cám ơn Thầy Phạm Thi Vương, Thầy Nguyễn Hữu

Thương đã tận tình hướng dẫn, chỉ bảo chúng em trong suốt thời gian thực hiện đề tài

Chúng em xin chân thành cám ơn Công ty Việt Bản Đồ, Thầy Nguyễn Minh Nam,

Anh Đinh Hiếu Nghĩa đã tận tình hướng dẫn, giúp đở nhiệt tình, tạo điều kiện cho

chúng em tìm hiểu kiến thức về bản đồ định vị

Chúng em xin chân thành cám ơn quý Thầy Cô đã tận tình giảng dạy, trang bị cho

chúng em những kiến thức quý báu trong những năm học vừa qua

Xin chân thành cám ơn các anh chị và bạn bè đã ủng hộ, giúp đỡ và động viên

chúng em trong thời gian học tập và nghiên cứu

Đặc biệt chúng con xin gởi lòng biết ơn sâu sắc đến Ông Bà, Cha Mẹ những người

đã chăm sóc, nuôi dạy chúng con nên người

Mặc dù đã cố gắng nỗ lực hết mình, song chắc chắn luận văn không tránh khỏi

những thiếu sót Chúng em kính mong nhận được sự thông cảm và chỉ bảo tận tình của

quý Thầy Cô và các bạn

Tp.HCM, 03/2011 Nhóm sinh viên thực hiện Nguyễn Hữu Ninh – Dương Châu Vĩnh Phúc

NHẬN XÉT ( của giảng viên hướng dẫn )

NHẬN XÉT ( của giảng viên phản biện )

MỤC LỤC

CHƯƠNG 1- TỔNG QUAN VỀ ĐỀ TÀI 1

1.1 Giới thiệu đề tài 1

1.2 Giới thiệu Web 2.0 Portal 2

1.2.1 Định nghĩa Web Portal 2

1.2.2 Định nghĩa Web 2.0 Portal 2

1.2.3 Nền tảng công nghệ - ngôn ngữ sử dụng- Công cụ hỗ trợ 2

1.2.4 Công cụ hỗ trợ: 4

1.3 Phạm vi nghiên cứu 4

CHƯƠNG 2:KIẾN TRÚC WEB PORTAL VÀ CÁC WIDGET 5

2.1 Mô hình đối tượng 6

2.2 Các thành phần ứng dụng 6

2.3 Mô hình cơ sở dữ liệu 7

2.4 Web 2.0 Portal Solution Files 10

2.4.1 Dropthings Project 10

2.4.2 DashboardBusiness Project 11

2.4.3 DashboardDataAccess Project 11

2.4.4 CustomDragDrop Project 11

2.5 UpdatePanel 12

2.6 Hành động kéo thả các Widget 14

2.7 Widget Framework 15

2.8 Thiết kế Widget Container 20

2.9 Thêm chức năng cho Widget 23

2.10 Tối ưu hóa cho lần đầu truy cập 25

2.11 Hiển thị các lần truy cập tiếp theo 27

CHƯƠNG 3: XÂY DỰNG CÁC THÀNH PHẦN CỦA WEB 2.0 PORTAL 28

3.1 XÂY DỰNG WEB LAYER SỬ DỤNG ASP.NET AJAX 28

3.1.1 Xây dựng trang chủ cho ứng dụng Web Portal 28

3.1.1.1 Phần Header 29

3.1.1.2 Phần Widget Gallery 29

3.1.1.3 Tab bar 30

3.1.1.4 Phần hiển thị các Widget 32

3.1.1.5 Khởi tạo trang chủ 34

3.1.2 Xây dựng hành động kéo thả các Widget giữa các cột 36

3.1.3 Xây dựng Widget Container 42

3.1.4 Xây dựng Widget 48

3.2 XÂY DỰNG DATA LAYER VÀ BUSINESS LAYER 52

3.2.1 Giới thiệu về LINQ to SQL 52

3.2.2 Xây dựng DataAccess layer sử dụng LINQ to SQL 52

3.2.2.1 Xây dựng mô hình cơ sở dữ liệu sử dụng Visual Studio 2008 Designer 52 3.2.2.2 Thao tác dữ liệu với class DatabaseHelper 53

3.2.3 Giới thiệu Windows Workflow Foundation 56

3.2.3.1 Khái niệm Workflow 56

3.2.3.2 Windows Workflow Foundation 56

3.2.3.3 Lý do nên sử dụng WF 57

3.2.4 Xây dựng Business layer sử dụng WF 58

3.2.4.1 Mapping User Actions to a Workflow 58

3.2.4.2 Xử lý cho người dùng truy cập lần đầu tiên 59

3.2.4.3 Xử lý cho người dùng truy cập các lần tiếp theo 62

3.2.4.4 Thêm Tab mới 65

3.2.4.5 Di chuyển các Widget 66

3.2.4.6 Thêm Widget vào trang 69

3.2.4.7 Hủy WidgetInstance ở trên trang 70

3.2.4.8 Thay đổi tên của trang 70

3.2.4.9 Thay đổi giao diện của trang 71

3.2.4.10 Xóa trang 72

3.2.5 Thi hành class DashboardFacade 73

3.2.6 Thi hành class WorkflowHelper 73

CHƯƠNG 4 – XÂY DỰNG WEBSITE TIN TỨC 78

4.1 Thiết kế kiến trúc hệ thống 78

4.2 Xác định các yêu cầu của trang web 80

4.2.1 Danh sách các yêu cầu chức năng 80

4.2.2 Danh sách các yêu cầu phi chức năng 82

4.3 Mô hình Use-Case 85

4.3.1 Xác định Actor và Use-Case 85

4.3.2 Mô hình Use-Case 87

4.3.3 Đặc tả Use-Case 88

4.4 Thiết kế giao diện 95

4.4.1 Màn hình chính 95

4.4.2 Màn hình cài đặt 96

4.4.3 Màn hình chức năng thêm chuyên mục 97

4.4.4 Màn hình kéo thả các Widget 98

4.4.5 Màn hình cài đặt số lượng tin hiển thị 99

4.4.6 Màn hình xóa chuyên mục 100

4.4.7 Màn hình thêm trang mới cho người dùng cài đặt 101

CHƯƠNG 5 - KẾT LUẬN 103

5.1 Kết quả đạt được 103

5.2 So sánh với trang igoogle.com 103

5.3 So sánh với trang http://tuoitre.com.vn, http://protopage.com 105

5.4 Hướng phát triển 106

TÀI LIỆU THAM KHẢO 107

DANH MỤC CÁC HÌNH

Hình 2.1: Mô hình đối tượng của Web Portal 6

Hình 2.2:Các thành phần ứng dụng của Web 2.0 Portal 7

Hình 2.3: Lược đồ một số table chính của ứng dụng Web Portal 8

Hình 2.4: Cấu trúc của Web 2.0 Portal Solution 11

Hình 2.5:Các thẻ UpdatePanel được sử dụng trong Dropthings Project 12

Hình 2.6: Sử dụng 3 thẻ UpdatePanel cho 3 cột Khi một Widget được thêm hoặc xóa từ một cột nào đó thì chỉ duy nhất UpdatePanel chứa cột đó được cập nhật lại 13

Hình 2.7: Mô tả kéo thả các Widget trên trang chủ của Dropthings Project 15

Hình 2.8: Widget Framework tự động authentication, authorization, profile, personalization Chúng nhận được các thư viện lưu trữ và các thư viện tiện ích từ server, cho phép chúng ta dễ dàng bổ sung thêm nhiều chức năng vào Web Portal 16

Hình 2.9: Mối liên hệ giữa Page, Widget Container, và Widget 17

Hình 2.10:Cấu trúc của Widget container 19

Hình 2.11: Widget Container bao gồm 2 UpdatePanel, một cho phần header và một cho phần Body 20

Hình 2.12: Thiết kế tối ưu nhất của Widget Container 21

Hình 2.13: Các công việc mà Server và Client thi hành đối với người dùng truy cập lần đầu tiên 25

Hình 2.14: Các công việc mà Server và Client thi hành đối với lần truy cập kế tiếp 27

Hình 3.1: Cấu trúc trang chủ của Dropthings Project 28

Hình 3.2: Phần “Thêm chuyên mục” chứa tất cả các Widget có sẵn trong database 29

Hình 3.3:Hình minh họa chỉnh sửa title của một Widget 31

Hình 3.4: Minh họa ba cột hiển thị các Widget 33

Hình 3.5: Giao diện của WidgetContainer 43

Hình 3.6 Rss đọc tin tức địa ốc từ trang http://tuoitre.vn 49

Hình 3.7: Hiển thị mô hình cơ sở dữ liệu bằng LINQ to SQL class 53

Hình 3.8: Ví dụ về một quy trình công việc 56

Hình 3.9: Map User action vào Workflow 58

Hình 3.10:Thiết kế luồng công việc cho hoạt động người dùng mới truy cập vào trang

lần đầu tiên 59

Hình 3.11: Thiết kế luồng công việc cho hoạt động người dùng truy cập 62

Hình 3.12: Thiết kế luồng công việc cho hoạt động tạo mới tab 65

Hình 3.13: Thiết kế luồng công việc cho hoạt động di chuyển một Widget 66

Hình 3.14 - Thiết kế luồng công việc cho hoạt động thêm một Widget 69

Hình 3.15 - Thiết kế luồng công việc cho hoạt động hủy một WidgetInstance 70

Hình 3.16 - Thiết kế luồng công việc cho hoạt động thay đổi tên trang 71

Hình 3.17 - Thiết kế luồng công việc cho hoạt động thay đổi giao diện trang 71

Hình 3.18 - Thiết kế luồng công việc cho hoạt động xóa trang 72

Hình 4.1: Kiến trúc hệ thống Web tin tức Portal 2.0 78

Hình 4.2: Sơ đồ hệ thống web tin tức Portal 2.0 79

Hình 4.3: Trang chủ của website tin tức 80

Hình 4.4: Mô hình UseCase của Website tin tức 87

Hình 4.5: Giao diện trang chủ của Website tin tức 95

Hình 4.6: Giao diện cài đặt trang của Website tin tức 96

Hình 4.7: Giao diện chức năng thêm chuyên mục của Website tin tức 97

Hình 4.8: Giao diện chức năng kéo thả các Widget của Website tin tức 98

Hình 4.9 – Giao diện cài đặt số lượng tin hiển thị trong 1 Widget 99

Hình 4.10: Giao diện xóa 1 Widget của Website tin tức 100

Hình 4.11: Giao diện thêm trang mới của Website tin tức 101

Hình 5.1: Giao diện trang www.igoogle.com 104

Hình 5.2: Giao diện thêm chuyên mục trang www.igoogle.com 105

DANH MỤC CÁC BẢNG

Bảng 2.1: Chi tiết các thuộc tính của bảng aspnet_Users 8

Bảng 2.2: Chi tiết các thuộc tính của bảng Page 9

Bảng 2.3: Chi tiết các thuộc tính của bảng UserSetting 9

Bảng 2.4: Chi tiết các thuộc tính của bảng Widget 10

Bảng 2.5: Chi tiết các thuộc tính của bảng WidgetInstance 10

Bảng 4.1: Bảng các yêu cầu chức năng 81

Bảng 4.2: Bảng các yêu cầu phi chức năng 83

Bảng 4.3: Bảng các Actor và UseCase 87

CÁC TỪ VIẾT TẮT

LINQ Language-Integrated Query

AJAX Asynchronous JavaScript and XML

API Application Programming Interface

HTTP Hypertext Transfer Protocol

CHƯƠNG 1- TỔNG QUAN VỀ ĐỀ TÀI

1.1 Giới thiệu đề tài

Trong sự phát triển mạnh mẽ của Internet, thì các Website giữ một vai trò đặc biệt

quan trọng trong mọi lĩnh vực của đời sống nhân loại Với đam mê sáng tạo và chinh

phục thế giới, công nghệ thông tin đã và đang thay đổi từng ngày Các thế hệ website ra

đời, cải tiến liên tục, cùng với Web Service, sự trợ giúp của công nghệ Mobile Agent -

một chương trình thay mặt người dùng thực hiện công việc tìm kiếm và xử lý thông tin

trên Internet - khái niệm Website truyền thống được chuyển thành “Website thông minh”

với sự trợ giúp của dịch vụ Search Engine, một công cụ cho phép tìm kiếm và lọc thông

tin trên cơ sở các từ khoá được xác lập bởi người dùng và dịch vụ phân loại thông tin –

Category Từ đó, thuật ngữ “Website thông minh” hay “Cổng điện tử” - Portal được hình

thành

Chúng ta thường sử dụng khá nhiều các trang web về nhiều vấn đề lớn để tra cứu,

tìm kiếm thông tin điển hình như http://www.igoogle.com trong mỗi website như vậy

chứa đựng một lượng thông tin khổng lồ nhưng không phải hoàn toàn các thông tin đó

nều nằm trên server của họ mà thực tế các thông tin này nằm ở rất nhiều website khác

nhau nhưng họ đãcó một cơ chế liên kết tất cả các thông tin này Những website như vậy

coi là một cổng thông tin về một hay nhiều lĩnh vực nào đó hay nói cách khác đó là

những Webportal

Bạn từng nghe người ta nói rất nhiều về cụm từ web 2.0 kể từ thời điểm cuối

2006 Web 2.0 là một xu hướng của kỹ nghệ World Wide Web (WWW), thiết kế web,

thế thệ thứ hai cộng đồng trên nền web và các dịch vụ hosted (lưu trữ & phục vụ trên

mạng) như là mạng xã hội, blog, wiki, các danh bạ web mở mục đích là tạo sự dễ dàng để

tạo lập và chia sẻ thông tin, cộng tác với nhau giữa các người dùng Cách thức này được

nhiều người xem như là kỷ nguyên mới của WWW Thuật ngữ web 2.0 thông dụng, gây

chú ý sau hội thảo lần đầu về Web 2.0 của O’Reilly Media Web 2.0 năm 2004 Mặc dù

thuật ngữ đề cập như là phiên bản mới của WWW, nhưng nó không ngụ ý về việc cập

nhật kỹ thuật đặc biệt nào, mà nó tập trung vào cách thức mà các nhà phát triển phần

mềm và người dùng web tương tác Web 2.0 nguồn thông tin được phân tán khắp nơi trên

Internet, và các website 2.0 kết nối chằng chịt với nhau, tương tác qua lại, nội dung được

cập nhật từ các nguồn phân tán và hầu như không giới hạn Web 2.0 là sử dụng cho rất

nhiều người, có khi lên hàng triệu thành viên và mọi người luôn được khuyến khích tham

gia

Trong thời đại ngày nay với số lượng hàng tỷ trang web thì lượng thông tin ngày

càng đa dạng và phong phú Con người ngày càng bận rộn trong công việc với quỹ thời

gian eo hẹp Nên vấn đề đặt ra là làm sao nâng cao năng suất thu nhận thông tin là một

việc rất cần thiết.Việc liên kết thông tin của những website mình quan tâm vào một

website duy nhất giúp tiết kiệm thời gian và tiện dụng Vì vậy, nhóm đã nghiên cứu về

công nghệ web 2.0 portal để xây dựng một website tổng hợp tin tức từ nhiều trang web

khác và được thiết kế tùy theo ý thích cá nhân của từng người

1.2 Giới thiệu Web 2.0 Portal

1.2.1 Định nghĩa Web Portal

Một Web Portal là một trang cho phép người dùng có thể tùy chỉnh trang đó bằng

cách kéo thả các Widget đến vị trí mình thích Điều này mang lại cho người dùng có thể

điều khiển được nội dung mà mình muốn hiển thị

1.2.2 Định nghĩa Web 2.0 Portal

Thuật ngữ “Web 2.0” định nghĩa một tập hợp các nguyên tắc và thực hiện cho các

ứng dụng Web trong đó một Website có thể được gọi là Web 2.0 nếu nó có các tính năng

sau:

- Cho phép người dùng điều khiển nội dung hiển thị trên website

- Web có vai trò nền tảng, có thể chạy mọi ứng dụng

- Khai thác trí thông minh của cộng đồng

- Nâng cao tính tương tác trên Web bằng cách sử dụng các công nghệ như:

Đề tài “Web Portal” được xây dựng theo kiến trúc “N-tier application” điển hình

Và với cách xây dựng ứng dụng theo kiểu này thì có sự tách biệt chức năng rõ ràng giữa

các tầng của ứng dụng

 Web layer:Bao gồm web pages, web services, resources ( graphics, CSS,

JavaScript… ), và các file cài đặt cấu hình

 Business layer: Bao gồm các lớp thực thể ( entity class ), các quy tắc nghiệp vụ (

business rules ), và bộ nhớ đệm trung cấp (midle – tier caching) của dữ liệu để

làm giảm bớt chu trình của cơ sở dữ liệu

 Data access layer: Truy cập dữ liệu đóng gói và cung cấp một interface mà cơ sở

dữ liệu và nguồn dữ liệu độc lập với nhau.Ngoài ra, Data access layer còn cung

cấp các đối tượng để tạo ra các lớp thực thể của hàng cơ sở dữ liệu và ngược lại

ASP.NET AJAX được sử dụng để thực hiện ở tầng giao diện người dùng của ứng

dụng Web Portal bao gồm trang chủ, giao diện của các widget

ASP.NET AJAX cung cấp framework cho việc cập nhật các widget mà không làm

bất kỳ postback nào, và thay đổi giao diện của trang bằng cách kéo thả các widget

ASP.NET AJAX cung cấp một tập hợp các Control Extender nhằm tăng tính thẩm

mỹ cho phần hiệu ứng như: fade in / fade out, smooth transition, và client – side

animations

ASP.NET AJAX runtime cung cấp framework để có thể sử dụng giúp XMLHTTP

gọi từ bên trong các widget Nó cũng cung cấp framework đễ xây dựng hiệu ứng cho

client-side bằng cách sử dụng Custom Extender Các hành động kéo thả các widget ở trên

trang web được xây dựng như một Extender Và chúng ta cũng có thể sử dụng lại một số

Extender có sẵn từ Ajax Control Tookit để làm phong phú thêm trải nghiệm cho người sử

dụng trong các widget

ASP.NET AJAX cung cấp một API rất tiện dụng là ASP.NET Membership

Provider Nó giúp chúng ta có thể sử dụng để xác thực đối với các công việc như đăng

nhập, đăng ký, thay đổi thông tin cá nhân…

1.2.3.2 C# 3.0 và NET 3.5

Business layer của đề tài được xây dựng bằng Windows Workflow Foundation là

một thành phần nền tảng của NET 3.5 Các hoạt động chính của Web Portal như thêm

vào hay xóa đi một widget, thay đổi giao diện của trang, thay đổi tên của trang, thêm hay

xóa trang… đều sử dụng Workflow Workflow chứa các quy tắc và các hành động cần

thiết để hoàn thành từng hoạt động

Data Access layer được xây dựng bằng NET 3.5, sử dụng LINQ to SQL làm đơn

giản hóa truy vấn cơ sở dữ liệu bên trong phần code ứng dụng của đề tài

Web layer được xây dựng bằng NET 3.5, LINQ to SQL, LINQ to XML.Ngôn ngữ

lập trình C# 3.0 được sử dụng ở tất cả các tầng của ứng dụng

- Tìm hiểu về khái niệm Web 2.0 Portal và các ứng dụng liên quan

- Tìm hiểu quy trình xây dựng ứng dụng theo kiểu “N-tier”

- Ngôn ngữ lập trình C# 3.0, ASP.NET 3.5, LINQ to SQL, LINQ to XML

- Tìm hiểu về Windows Workflow Foundation và xây dựng các quy tắc nghiệp

vụ

- Tìm hiểu công nghệ AJAX

CHƯƠNG 2:KIẾN TRÚC WEB PORTAL VÀ CÁC WIDGET

Một Web Portal cố gắng cung cấp các chức năng của nó chỉ trên một trang và Ajax

Web Portal được xem như là một kiệt tác của công nghệ Ajax Đó là một kiến trúc thật

tuyệt vời để cung cấp nhiều thứ trên một trang mà không ảnh hưởng đến khả năng thi

hành của server và client Một số trong những thách thức chỉ nhìn thấy duy nhất trong

Web Portal bao gồm nhiều tính năng kết hợp vào trong một ứng dụng Web và tổng hợp

nội dung từ nhiều nguồn Web khác nhau

Ở chương này sẽ giải thích về kiến trúc của Ajax Web Portal mà bất cứ ai cũng có

thể sử dụng để thiết kế cho riêng mình một Web Portal Và sẽ giải thích những thách thức

của kiến trúc của Ajax Web Portal bao gồm: làm thế nào để chạy nhiều Widget trên một

trang, hiển thị một Web Portal nhanh hơn, và xử lý các mối đe dọa về bảo mật như denial

– of – service (DoS) tấn công

“ Trái tim ” của bất kỳ Web Portal nào là sự hỗ trợ cho các Widget, là cơ chế mà

người dùng có thể tùy chỉnh trang chủ bằng cách sử dụng các Widget Trang chủ hiển thị

các Widget và cho phép người dùng có thể thêm, xóa, di chuyển tùy ý

Ứng dụng Web Portal ghi nhớ hành động và tùy chỉnh của người dùng để khi người

dùng truy cập lần tiếp theo thì thấy các Widget vẫn nằm ở vị trí mà người dùng nhìn thấy

ngay lúc rời khỏi Web Portal Điều này có nghĩa là tất cả cài đặt về giao diện và nội dung

hiển thị của Web Portal đều được lưu lại cho lần truy cập tiếp theo của người dùng

Đặc trưng của Web Portal là cho phép người dùng ẩn danh sử dụng nhiều tính năng

mà không cần đăng ký bao gồm:

- Thêm, xóa, chỉnh sửa, di chuyển các Widget

- Tạo trang mới, thay đổi giao diện

Các Widget về cơ bản là một ASP.NET Web Control Nó có thể là User Control

hay là Server Control Widget hỗ trợ Postback, ViewState, Session, và Cache Ajax

Control Extender cung cấp các tính năng để xây dựng việc kéo thả cho Widget

Một Widget được chứa bên trong một Frame hoặc một Container Container cung

cấp header bar chứa tiêu đề của Widget, edit link giúp chỉnh sửa nội dung của Widget,

minimize / maximize buttons có chức năng thu nhỏ và mở rộng các Widget, và close

button để tắt các Widget ở trên trang Nội dung của Widget được load ở bên dưới header

bar và nằm trong phần body

2.1 Mô hình đối tượng

Đối với một Web Portal thì người dùng có một hay nhiều trang, mỗi trang có một

hay nhiều Widget instance Sự khác biệt của Widget và Widget instace đó là Widget

được giống như một class trong khi Widget instance là một thể hiện của class đó Ví dụ

như: “ Địa ốc - Tuổi trẻ online ” Widget là một Widget có chức năng hiển thị thông tin

của chuyên mục địa ốc của báo tuổi trẻ online ( http://tuoitre.vn/ ) Khi người dùng thêm

Widget “ Địa ốc - Tuổi trẻ online ” vào trang chủ thì nó sẽ trở thành một Widget instance

Web Portal Object Model bắt đầu từ User và trong đó có thể có một số cài đặt của

người dùng (UserSetting ) và một hay nhiều trang ( Pages ) Một trang có thể không có

hoặc có nhiều Widget instance

Hình 2.1: Mô hình đối tượng của Web Portal

2.2 Các thành phần ứng dụng

Web 2.0 Portal Project sử dụng Facade pattern để cung cấp “ single entry point ”

cho Bussiness layer

Sử dụng Facade pattern để xây dựng một class có tên là DashboardFacade nhằm

mục đích xử lý với các hành động của users, pages, widgets, etc

Hình 2.2:Các thành phần ứng dụng của Web 2.0 Portal

Ở Web layer, Default.aspx là trang chủ Nó sử dụng DashboardFacade để thực hiện

các hành động như thêm Tab mới và Widget hay lưu trữ trạng thái của Widget

DashboardFacade gọi đến các Workflow khác nhau cho các hành động khác nhau

Các Workflow thực hiện các công việc thực tế và được phát triển bằng cách sử dụng

Windows Workflow Foundation Mỗi Workflow bao gồm một hay nhiều Activity Mỗi

Activity giống như một class có chức năng thực hiện một số công việc Các Activity sử

dụng hai class là DatabaseHelper và DashboardDataContext để làm việc với cơ sở dữ

liệu DatabaseHelper là class được sử dụng để thi hành các hoạt động của chung của cơ

sở dữ liệu như: Update, UpdateAll, Insert, Delete DashboardDataContext là class được

tạo ra bởi LINQ to SQL và sẽ có các thuộc tính để biểu diễn mỗi bảng được mô hình hóa

từ cơ sở dữ liệu

2.3 Mô hình cơ sở dữ liệu

Để thực hiện các mô hình dữ liệu được sử dụng trong ứng dụng Web Portal thì

chúng ta sẽ sử dụng các table được cung cấp mặc định bởi ASP.NET Membership

Provider Dưới đây là lược đồthông tin của các table

Hình 2.3: Lược đồ một số table chính của ứng dụng Web Portal aspnet_Users là table chỉ chứa thông tin của các tài khoản của người dùng ẩn danh

và được mô tả bằng bảng dưới đây:

thường

ẩn danh (cho phép null)

Page là table có khóa ngoại tham chiếu đến cột UserId của aspnet_Users table và

chứa thông tin của trang và được mô tả chi tiết bằng bảng dưới đây

cùng

Bảng 2.2: Chi tiết các thuộc tính của bảng Page UserSetting là table có khóa ngoại tham chiếu đến cột UserId của aspnet_Users

table và chứa thông tin cài đặt trang của người dùng và được mô tả bằng bảng dưới đây:

Bảng 2.3: Chi tiết các thuộc tính của bảng UserSetting Widget là table chứa thông tin của các Widget được mô tả chi tiết bằng bảng dưới:

nhất

0 thì ẩn

Widget(cho phép null)

từ trên xuống) của Widget trên trang

Bảng 2.4: Chi tiết các thuộc tính của bảng Widget WidgetInstance là table có khóa ngoại tham chiếu đến cột PageId và cột WidgetId

của Page table và Widget table.Ngoài raWidgetInstance table còn chứa thông tin của

Widget đã được Add vào các trang và được mô tả chi tiết bằng bảng dưới đây:

WidgetInstance

(Xếp theo cột) của Widget lên trang

từ trên xuống) của Widget trên trang

Widget, 0 thì ẩn body của Widget

WidgetInstance(giống tên của Widget)

củaWidgetInstance

WidgetInstance lên trang

WidgetInstance

WidgetInstance(giống phiên bản của Widget)

Bảng 2.5: Chi tiết các thuộc tính của bảng WidgetInstance

2.4 Web 2.0 Portal Solution Files

Web 2.0 Portal solution bao gồm một ASP.NET Web Project và bốn C# Project

2.4.1 Dropthings Project

Được xây dựng bằng ASP.NET Web Project và có các file chính sau:

 Default.aspx: Trang chủ hiển thị các Widget và các thao tác đối với Widget

đều được thực hiện ở trang này

 WidgetService.asmx: Chứa đựng các Web Service Method sử dụng để thao tác

đối với các Widget ở trên trang Default.aspx

 Proxy.asmx: Chứa các phương thức cho phép các Widget có thể lấy nội dung

từ các nguồn bên ngoài làm phong phú nội dung của Web Portal

 WidgetContainer.ascx: Kiến trúc chung của các Widget bao gồm:

o Phần Header chứa title và các button như: edit, minimize / maximize, close

o Phần Body chứa nội dung của các Widget

Tất cả các Widget được chứa trong folder Widgets.Một Widget là một Web

Control, và tất cả các tài nguyên liên quan như: graphics, CSS, JavaScript đều được đặt

bên trong các folder con của folder Widgets

2.4.2 DashboardBusiness Project

Được xây dựng bằng C# Project chứa các Workflow thực hiện các hành động của

Widget, Page, UserVisit

2.4.3 DashboardDataAccess Project

Được xây dựng bằng C# Project Các thao tác đối với database đều được gọi xuống

Project này xử lý

2.4.4 CustomDragDrop Project

Được xây dựng bằng C# Project bao gồm các class kế thừa từ các class Extender

của Ajax Control Toolkit và các file script Có chức năng hỗ trợ cho thao tác kéo và thả

các Widget

Hình 2.4: Cấu trúc của Web 2.0 Portal Solution

2.5 UpdatePanel

UpdatePanel cho phép chúng ta cập nhật không đồng bộ bất kỳ phần nào trang chủ

của Web Portal

Toàn bộ các Widget của Dropthings Project đều sử dụng UpdatePanel bởi vì các

Widget cần reload khi người dùng chuyển đổi giữa các tab Ngoài ra, chính các tab (nơi

thêm và xóa các tab mới) cũng sử dụng các thẻ UpdatePanel bởi vì các tab có thể hoạt

động mà không ảnh hưởng đến phần còn lại của trang

Toàn bộ các Widget được chứa bên trong một UpdatePanel vì vậy nó có thể tồn tại

rồi xuất hiện không đồng bộ

Hình 2.5:Các thẻ UpdatePanel được sử dụng trong Dropthings Project

Khi đưa toàn bộ các Widget vào trong một UpdatePanel thì sẽ làm cho Web hoạt

động kém hiệu quả khi người dùng thêm hay xóa đi các Widget bởi vì lúc đó

UpdatePanel cần phải cập nhật mới để hiển thị lại các Widget ở trên trang Điều này đòi

hỏi một số lượng lớn Html và JavaScript cho tất cả các Widget trên trang này được phân

phối trong quá trình cập nhật không đồng bộ Vì vậy, để tốt hơn hết chúng ta sẽ đặt mỗi

cột bên trong một UpdatePanel Bất kỳ sự thay đổi được thực hiện trên cột nào sẽ yêu cầu

cập nhật không đồng bộ đối với chỉ UpdatePanel chứa cột đó mà không phải là cập nhật

lại toàn bộ vùng chứa các Widget

Hình 2.6: Sử dụng 3 thẻ UpdatePanel cho 3 cột Khi một Widget được thêm hoặc xóa từ

một cột nào đó thì chỉ duy nhất UpdatePanel chứa cột đó được cập nhật lại

Khi người dùng kéo thả một Widget từ cột này đến cột khác thì không cần

UpdatePanel cập nhật mới bởi vì UI đã sẵn sàng sử dụng JavaScript để cập nhật lại Bạn

chỉ cần thông báo đến Server rằng Widget đã được di chuyển Lúc đó Server sẽ tính toán

lại vị trí mới cho toàn bộ Widget

2.6 Hành động kéo thả các Widget

Có hai cách để thực hiện hành động kéo thả các Widget trên trang chủ của Web

Portal đó là: Free - form và Column – Wise

Protopage (http://www.protopage.com/) là Web Portal sử dụng hành động kéo thả

các Widget theo cách Free – from Bạn có thể kéo thả các Widget đến bất cứ vị trí nào

trên trang nhưng vị trí các Widget là vị trí chính xác tuyệt đối

iGoogle (http://www.google.com.vn/ig) và Pageflakes (http://www.pageflakes.com)

là Web Portal sử dụng hành động kéo thả các Widget theo cách Column – Wise Với

cách kéo thả này cho phép người dùng có thể sắp xếp lại vị trí của các Widget theo chiều

dọc trong một cột hoặc kéo thả các Widget từ cột này sang cột khác Column – Wise tổ

chức duy trì việc làm sạch các cài đặt của trang tại mọi thời điểm vì vậy các Widget được

sắp xếp thẩm mỹ hơn trong mỗi cột Và hầu hết các Web Portal đều sử dụng cách kéo thả

này cho các Widget

Để thực hiện hành động kéo thả các Widget giữa nhiều cột thì trang chủ của Web

Portal được phân chia thành ba cột và mỗi cột chính là một ASP.NET Panel control

Widget có thể được thêm vào ở bất kỳ Panel nào

Có hai loại hành động kéo thả cần được hỗ trợ đó là:

- Sắp xếp lại vị trí các Widget ở trên cùng một cột

- Di chuyển Widget từ cột này đến cột khác

Nếu người dùngdi chuyển một Widget đi xuống thì Widget nằm bên dưới Widget

được di chuyển sẽ nhảy lên đúng vào vị trí trống mà Widget di chuyển để lại

Nếu người dùng di chuyển một Widget từ cột này sang cột khác thì Widget ngay vị

trí mà người dùng muốn di chuyển đến sẽ di chuyển xuống bên dưới để nhường đủ

không gian cho Widget người dùng muốn di chuyển đến

Hình 2.7: Mô tả kéo thả các Widget trên trang chủ của Dropthings Project

2.7 Widget Framework

Dropthings Project sử dụng Widget Framework cho phép chúng ta tập trung vào

việc cung cấp các tính năng có liên quan đến các Widget mà không cần lo lắng về

authentication, authorization, profile, personalization, hay storage Widget nhận những

chức năng nêu trên từ Widget Framework hoặc Core

Hình 2.8: Widget Framework tự động authentication, authorization, profile,

personalization Chúng nhận được các thư viện lưu trữ và các thư viện tiện ích từ server,

cho phép chúng ta dễ dàng bổ sung thêm nhiều chức năng vào Web Portal

Core của Widget Framework là authentication và authorization được sử dụng do

ASP.NET Membership Provider cung cấp Điều này cho phép Widget nhận biết được

thông tin của người dùng hiện tại khi load Ngoài ra, Core cũng cung cấp cho các Widget

với một service lưu trữ dữ liệu để biết trạng thái của các Widget khi người dùng thực hiện

các hành động như mở rộng hoặc thu gọn, di chuyển hoặc xóa

Thông tin giữa các Widget và Core được thực hiện thông qua Widget Container và

Widget Container chứa các Widget và làm việc như một trung gian

Một trang có thể có một hoặc nhiều Widget Container nhưng một Widget Container

chỉ có thể chứa bên trong nó một Widget

Hình 2.9: Mối liên hệ giữa Page, Widget Container, và Widget

Code một Widget rất đơn giản và cũng giống như một Web Control thông thường

chúng ta viết code vào trong phương thức Page_Load Chúng ta có thể nhận được các

event nêu ra từ ASP.NET user controls

Widget cũng tương tự như SharePoint Web Parts nhưng có một lợi thế hơn

SharePoint Web Parts đó là chúng ta có thể sử dụng ASP.NET User Controls thay vì

Custom Controls

Chúng ta có thể xây dựng một Widget ở trong một file ascx mà không cần biên

dịch thành DLL hay triển khai thành DLL đến server Chỉ cần sao chép file ascx vào

Web Folder và sử dụng chúng

Ví dụ chúng ta xây dựng Widget hiển thị hình ảnh từ Flick( http://flick.com ) bằng

cách sử dụng User Control Phần code để hiển thị hình ảnh được viết bên trong phương

thức Page_Load như sau:

Để tạo ra hai LinkButton cho Widget để di chuyển giữa các hình ảnh thì chúng ta sẽ

viết sự kiện cho LinkButton nhƣ sau:

protected void Page_Load( object sender, EventArgs e)

Chu trình làm việc của một trang ASP.NET làm việc cũng giống như một trang bình

thường Bên trong Widget, chúng ta có thể sử dụng bất kỳ ASP.NET control nào và chỉ

cần viết code cho sự kiện để chúng ta có thể có một Widget như mong muốn

Container cung cấp Widget container và Frame và định nghĩa cho phần header và

phần body Widget thực tế được load ở trong phần body trong thời gian chạy của Widget

container Đối với mỗi Widget trên trang, Core tạo ra một Widget container và sau đó

Widget container tự động load Widget thực ở bên trong phần body

Hình 2.10:Cấu trúc của Widget container

Các Widget container là một phần của Framework và chúng ta chỉ viết một lần

Widget container là một User Control và được tự động tạo ra ở trên trang cho mỗi Widget

instance trong khi load trang Widget cũng là một User Control và được load tự động

thông qua Widget container bằng cách gọi phương thức Page.LoadControl(“…”)

Các Widget thực tế được lưu trữ bên trong container và được load bên trong

UpdatePanel vì vậy sẽ không xãy ra thực hiện Postback nhiều lần bởi vì Widget container

không cho phép thực hiện Postback

2.8 Thiết kế Widget Container

Thiết kế một Widget container tối ưu là vấn đề của việc tìm kiếm sự kết hợp giữa

các UpdatePanel Khó khăn lớn nhất là làm sao để phân phối tốt nhất các ASP.NET

Control bên trong UpdatePanel Đặt toàn bộ Wiget container bên trong một UpdatePanel

thì vẫn hoạt động và chỉ có duy nhất một UpdatePanel cho mỗi Widget container nên chi

phí là rất nhỏ nhưng vấn đề gặp phải là toàn bộ Extender gắn vào các phần tử HTML bên

trong UpdatePanel Khi UpdatePanel refresh thì nó loại bỏ các phần tử HTML được trình

diễn bởi ASP.NET control và tạo mới lại Kết quả là toàn bộ Extender gắn vào các phần

tử HTML đều bị phá hủy trừ khi Extender được để bên trong UpdatePanel Nhưng nếu

Extender được để bên trong UpdatePanel thì khi UpdatePanel refresh thì sẽ tạo và khởi

động lại Extender điều này làm chậm tốc độ thi hành của trang sau khi Postback

Chúng ta nên để tách biệt phần Header và phần Body ở các UpdatePanel khác nhau

Một UpdatePanel sẽ chứa phần Header và UpdatePanel khác chứa phần Widget thực

Điều này cho phép chúng ta có thể thay đổi một vài thứ trên Widget và refresh lại phần

Body nhưng không refresh lại phần Header Do đó các Extender được gắn vào phần

Header không bị mất đi Nhưng điều này có nghĩa là toàn bộ Extender gắn vào phần

Header đều phải đặt vào bên trong Header UpdatePanel mà không ảnh hưởng đến hiệu

suất thi hành

Hình 2.11: Widget Container bao gồm 2 UpdatePanel, một cho phần header và một cho

phần Body

Tuy nhiên để cho khả năng thi hành tốt hơn thì Header UpdatePanel sẽ không chứa

toàn bộ Header mà chỉ chứa title và các button Khi Header UpdatePanel refresh thì toàn

bộ Header không tạo lại và chỉ tile và các button bên trong UpdatePanel đƣợc refresh

Hình 2.12: Thiết kế tối ƣu nhất của Widget Container

Xây dựng một Widget container khá đơn giản Phần Header chứa title, expand /

collapse / close button và phần Body chứa Widget Ở trong Dropthings Project thì

Widget container là file WidgetContainer.ascx

Dưới đây là phần code của file WidgetContainer.ascx

<asp:Panel ID="Widget" CssClass="widget" runat="server">

<asp:Panel id="WidgetHeader" CssClass="widget_header" runat="server">

<asp:UpdatePanel ID="WidgetHeaderUpdatePanel" runat="server"

<asp:LinkButton ID="ExpandWidget" runat="Server" Text=""

CssClass="widget_max widget_box" OnClick="ExpandWidget_Click"/>

2.9 Thêm chức năng cho Widget

Widget được tạo thành từ các thiết lập và phần body Phần body của Widget luôn

luôn được hiển thị ngoại trừ khi người dùng click vào button “-” Widget Phần thiết lập

cho các Widget chỉ được hiển thị khi người dùng click vào button “chọn” nằm ở trên

Header của Widget Phần thiết lập lưu trữ các tùy chọn cho Widget Ví dụ như đối với

Widget “Địa ốc - Tuổi trẻ online” là một Widget đọc tin tức địa ốc của trang

http://tuoitre.vn phần thiết lập cho phép người dùng chỉnh sửa số lượng tin hiển thị mà

mình muốn thay vì mặc định lượng tin do Web cung cấp Phần thiết lập được xây dựng

bằng ASP.NET Panel thông thường và chứa tất cả các tùy chọn cho việc thiết lập Widget

Trạng thái mặc định của Panel là invisible nhưng khi người dùng click vào link

button“chọn” thì trạng thái của Panel là visible

Widget được tạo ra bằng Web User Control và để kết hợp các chức năng của

Widget thì tất cả các Widget đều implement Iwidget interface

Iwidget interface định nghĩa cách thức để thông báo cho Widget khi khởi tạo và

khôi phục lại trạng thái của Widget Khi người dùng click vào link button“chọn” thì

phương thức ShowSettings sẽ báo cho Widget hiển thị các tùy chỉnh cài đặt cho người

dùng sử dụng Khi người dùng click vào button “+” hay button “-” thì Widget sẽ mở rộng

hay thu nhỏ và phương thức Maximized và phương thức Minimized sẽ được được gọi

Điều tương tự cũng xảy ra khi người dùng click vào button “x” Lúc này phương thức

Closed sẽ được gọi và tất cả các thông tin của Widget được lưu trữ ở database sẽ được

Dưới đây là một số phương thức của IwidgetHost

Các chức năng của các method của interface IwidgetHost được sử dụng như sau:

- SaveState(string tate): Lưu trữ dữ liệu dưới dạng XML( hoặc bất kỳ định dạng

khác ), nhưng bởi vì dữ liệu cần phải tuần tự trên định dạng chuỗi nên XML là

một sự lựa chọn tối ưu Những gì trạng thái được lưu giữ có thể được lấy bằng

GetState method vào lần load thứ hai

- GetState(): Lấy trạng thái lưu lại ở SaveState method

- Maximize(): Hiển thị phần Body của Widget khi người dùng click vào “+”

button ở trên phần Header của Widget

- Minimize(): Thu nhỏ phần Body của Widget khi người dùng click vào “-”

button ở trên phần Header của Widget

- Close(): Loại bỏ Widget ở trên trang khi người dùng click vào “x” button ở

trên phần Header của Widget

- IsFirstLoad(): Xác định xem đó là lần load đầu tiên của Widget ở trên trang

hoặc nếu không đồng bộ thì Postback sẽ xảy ra trên Widget hoặc một vài

Widget khác

Phương thức IsFirstLoad rất quan trọng Hãy suy nghĩ xem chuyện gì sẽ xảy ra khi

người dùng click vào một vài button ở trên Widget và Widget trải qua Postback.Về cơ

bản thì toàn bộ trang khởi tạo thêm một lần nữa và toàn bộ Widget sẽ được load ở phía

Server Bởi vì các Widget là các User Control nên ASP.NET sẽ thực hiện phương thức

Page_Load của tất cả các Widget trên trang Ngay lập tức,Widget cần phải biết nếu nó là

một Postback load hoặc là load lần đầu tiên bởi vì nội dung được load từ các nguồn khác

Ví dụ: Ở lần load đầu tiền thì Flick photo Widget load hình ảnh trực tiếp từ trang

http://www.flick.com nhưng nếu ở Postback thì nó có thể nhận được các hình ảnh đó từ

ViewState hoặc từ các bộ đệm khác Phương thức IwidgetHost.IsFirstLoad thông báo cho

các Widget biết xem đó là load lần đầu tiên hay là Postback load

2.10 Tối ưu hóa cho lần đầu truy cập

Một trong những thách thức của hầu hết Web Portal đó là tối ưu hóa cho lần đầu

truy cập Ở lần truy cập đầu tiên thì người dùng sẽ nhận được một trang với các Widget

đã được thiết lập và xác định từ trước và đã sẵn sàng cho người dùng tùy chỉnh

Hình 2.13: Các công việc mà Server và Client thi hành đối với người dùng truy cập lần

đầu tiên

Trong lần truy cập đầu tiên thì Web Portal sẽ thực hiện các công việc dưới đây

trước khi hiển thị lên trình duyệt:

- Tạo mới một user account sử dụng ASP.NET Membership provider

- Tạo mới một profile sử dụng ASP.NET Profile provider

- Tạo trang mới cho người dùng

- Tạo các Widget mặc định trên trang đầu tiên

- Thiết lập Widget với dữ liệu mặc định

- Hiển thị Widget và một số client script liên quan

- Cung cấp toàn bộ client framework để hỗ trợ các chức năng của Web Portal

Thách thức ở đây là để thực thi các nhiệm vụ ở phía Server ngay tức thì để Server

không có sự chậm trễ đáng kể trước khi nó bắt đầu cung cấp nội dung trang cho trình

duyệt Một khi đáp ứng được giao thì trình duyệt cần phải download toàn bộ Ajax

Framework, Widget Script, graphics, CSS … mà phải mất một thời gian dài Để cho

người dùng cảm nhận được tốc độ nhanh, Server cần phải cung cấp nội dung gần như

ngay lập tức và dần dần tải về phần còn lại trong khi người dùng đang tìm kiếm các nội

dung của trang

Về cơ bản, trong lần truy cập đầu tiên, ứng dụng cần phải cung cấp hầu hết mọi khía

cạnh của Web Portal Với Web 2.0 Portal Project người dùng có thể sử dụng tất cả các

chức năng của ứng dụng trong lần truy cập đầu tiên như: người dùng có thể kéo thả các

Widget, thêm trang mới, và tổ chức nội dung trang, và sau đó quay trở lại vẫn có thể tùy

chỉnh trang Người dùng làm tất cả các điều này chỉ trên một trang duy nhất hoàn toàn

không Postback và không chuyển hướng đến trang khác Nếu Postback được cho phép

trên trang hoặc trang bị chia thành nhiều trang, sau đó chúng ta cung cấp nội dung cơ bản

và những đặc tính của phía client như kéo thả các Widget Phần còn lại của chức năng sẽ

được gửi đến Server hoặc chuyển đến một trang khác khi người dùng làm một cái gì đó

mà xảy ra Postback Bởi vì, Postback và chuyển hướng đến trang khác không cho phép

nếu toàn bộ client framework chưa sẵn sàng tại thời điểm người dùng tương tác với trang,

điều này sẽ làm cho lỗi JavaScript và hành động sẽ không thực hiện được

Đồng thời, chúng ta cần đảm bảo cung cấp toàn bộ những tính năng trong lần truy

cập đầu tiên mà không làm chậm thời gian load lần đầu tiên của trang Nếu không thì

người dùng sẽ mất hứng thú đối với trang Web Đó là một thách thức lớn để làm cho lần

truy cập đầu tiên nhanh nhất có thể cho người dùng có thể sử dụng trang Web mà không

phải chán nản khi nhìn vào thanh progress bar của trình duyệt

Dưới đây là một số ý tưởng để tránh sự chậm chạp trong lần truy cập đầu tiên:

- Gửi HTML của trang và script song song để người dùng thấy một vài thứ xuất

hiện trên trang trong khi script và hình ảnh được tải về phía sau Điều này làm

tăng tốc độ cảm nhận của trang Web

- Tải các script trong nhiều bước.Đầu tiên tải Core Ajax runtime và sau đó hiển

thị giao diện Điều này giúp người dùng không mất kiên nhẫn khi sử dụng

trang Web

- Bắt đầu tải các script khác để thêm vào các tính năng bổ sung cho các Widget

được hiển thị ở trên giao diện Ví dụ, extender có thể tải ngay sau khi hiển thị

nội dung của Widget

- Làm trễ tải về những script mà không nhất thiết phải sử dụng ngay lập tức và

tải chúng về ở những giai đoạn sau

- Kết hợp nhiều script nhỏ vào trong một script lớn

2.11 Hiển thị các lần truy cập tiếp theo

Ở lần truy cập kế tiếp thì user account đã được lưu ở cookie của trình duyệt mà

chúng ta có thể có được thông qua ASP.NET Membership provider và toàn bộ Ajax

script đều đã có sẵn trong bộ nhớ cache của trình duyệt Vì vậy chúng ta chỉ cần load

trang đã tồn tại và toàn bộ các Widget ở trên trang sau đó hiển thị trang lên trình duyệt

Hình 2.14: Các công việc mà Server và Client thi hành đối với lần truy cập kế tiếp

Dưới đây là các bước mà Web Portal làm cho lần truy cập kế tiếp:

- Lấy User từ mã hóa Cookie của trình duyệt thông qua ASP.NET Membership

provider

- Load trang người dùng và tạo tab cho mỗi trang

- Tìm trang hiện tại

- Load toàn bộ Widget của trang hiện tại

- Cho phép load trạng thái trước của chúng

- Hiển thị Widget và Script

- Cung cấp client-side framework

Bởi vì client-side framework, Widget script, và extender script đã được lưu trữ trên

trình duyệt nên thời gian truy cập kế tiếp về cơ bản là thời gian để Server và trình duyệt

khởi tạo lại các script Tuy nhiên trong thời gian chờ đợi bộ nhớ Cache của trình duyệt có

thể hết hiệu lực và Javascript lưu trữ có thể bị mất Nếu điều này xảy ra thì trình duyệt sẻ

tải các script thêm một lần nữa và người dùng sẽ thấy chậm trễ hơn trong lần truy cập kế

tiếp