Tìm hiểu ASP NET xây dựng website tin tức đa ngôn ngữ luận văn tốt nghiệp đại học

TÌM HIỂU ASP.NET XÂY DỰNG WEBSITE TIN TỨC ĐA NGƠN NG

Trờng đại học vinh

Khoa công nghệ thông tin
--------------

đồ án tốt nghiệp đại học
Ngành: kỹ s công nghệ thông tin

Tìm hiểu asp.net xây dựng website
tin tức đa ngôn ngữ
gvhd: ths. Cao thanh sơn
svth : nguyễn hoàng hòa
lớp : 47k cntt cntt

NghÖ An - 05/2011
MỤC LỤC
MỤC LỤC.................................................................................................................3
DANH MỤC TỪ VIẾT TẮT, THUẬT NGỮ...........................................................6
DANH MỤC HÌNH VẼ, ĐỒ THỊ.............................................................................7

Trang 3


TÌM HIỂU ASP.NET XÂY DỰNG WEBSITE TIN TỨC ĐA NGƠN NGỮ

LỜI NÓI ĐẦU..........................................................................................................8
CHƯƠNG 1. KHẢO SÁT HỆ THỐNG............................................................10
1.1

Tổng quan về ASP.NET...........................................................................10

1.1.1

Giới thiệu ngôn ngữ ASP.NET.............................................................10

1.1.2

Ưu điểm của ASP.NET.......................................................................11

1.2

Tổng quan về ngơn ngữ lập trình C# .....................................................16

1.3

Thư viện Jquery .......................................................................................16

1.4

Ajax ...........................................................................................................19

1.5

Khảo sát hiện trạng của Website tin tức.................................................23

1.5.1 Mục đích yêu cầu của trang web............................................................23
1.5.2
1.6

Yêu cầu của hệ thống ...........................................................................24

Tổng kết ....................................................................................................24

1.6.1

Chức năng User...................................................................................24

1.6.2

Đối với người quản trị.........................................................................25

1.6.3

Yêu cầu của hệ thống mới...................................................................25

CHƯƠNG 2. PHÂN TÍCH HỆ THỐNG............................................................26
2.1

Yêu cầu chi tiết về Website .....................................................................26

2.1.1

Đối với người truy cập Website với chức năng User..........................26

2.1.2

Đối với người quản trị.........................................................................26

2.2

Biểu đồ phân cấp chức năng, biểu đồ luồng dữ liệu .............................26

2.2.1

Mô tả các chức năng ...........................................................................26

2.2.2

Biểu đồ phân cấp chức năng ................................................................29

Trang 4


TÌM HIỂU ASP.NET XÂY DỰNG WEBSITE TIN TỨC ĐA NGƠN NGỮ

2.2.3

Biểu đồ luồng dữ liệu ..........................................................................31

CHƯƠNG 3. THIẾT KẾ CƠ SỞ DỮ LIỆU......................................................34
3.1

Thiết kế cơ sở dữ liệu ..............................................................................34

3.2

Lựa chọn cài đặt CSDL ..........................................................................34

3.3

Xác định các thực thể .............................................................................35

CHƯƠNG 4. ĐẶC TẢ GIAO DIỆN...................................................................40
4.1

Phần dành cho người sử dụng ................................................................40

4.1.1

Trang chủ..............................................................................................40

4.1.2

Trang chủ của từng lĩnh vực ................................................................41

4.1.3

Trang đăng nhập ..................................................................................41

4.1.4

Trang đăng ký ......................................................................................42

4.2

Phần quản trị website ..............................................................................43

4.2.1

Trang xem, nhập, sửa, xóa các bài viết theo lĩnh vực ........................43

4.2.2

Trang quản lý thành viên của website .................................................44

4.2.3

Trang gửi bài viết .................................................................................45

CHƯƠNG 5. GIAO DIỆN CHƯƠNG TRÌNH..................................................46
5.1

Dành cho người sử dụng ..........................................................................46

5.1.1

Trang chủ .............................................................................................46

5.1.2

Trang chủ từng lĩnh vực.......................................................................48

5.2

Dành cho người quản trị .........................................................................49

KẾT LUẬN............................................................................................................50
1.

Kết quả tự đánh giá ..................................................................................50

Trang 5


TÌM HIỂU ASP.NET XÂY DỰNG WEBSITE TIN TỨC ĐA NGƠN NGỮ

2.

Kết luận ......................................................................................................50

TÀI LIỆU THAM KHẢO.....................................................................................52

DANH MỤC TỪ VIẾT TẮT, THUẬT NGỮ
STT

Từ viết tắt, thuật ngữ

1

CSDL

2

ASP

Giải nghĩa
Cơ sở dữ liệu
Active Server Page

Trang 6


TÌM HIỂU ASP.NET XÂY DỰNG WEBSITE TIN TỨC ĐA NGƠN NGỮ

3

ASP.NET

Active Server Page Dot NET

4

SQL

Structured Query Language

5

JQUERY

Một thư viện mã Javascript

6

AJAX

Asynchronous JavaScript and XML

7

COM

Component Object Model

8

DCOM

9

DLL

10

ADO.NET

11

VS.NET

12

XML

eXtensible Markup Language

13

CSS

Cascading Style Sheet

14

URL

Uniform Resource Locator

15

HTML

HyperText Markup Language

16

CLR

Common Language Runtime

17

IDE

Integrated Development Environment

18

XHTML

19

W3C

World Wide Web Consortium

20

HTTP

Hyper Text Transfer Protocol

21

DHTML

Dynamic HyperText Markup Language

22

XAML

eXtensible Application Markup Language

Distributed Component Object Model
Dynamic Link Library
ActiveX Data Object Dot NET
Visual Studio.NET

eXtensible HyperText Markup Language

DANH MỤC HÌNH VẼ, ĐỒ THỊ
Hình 1.1
Hình 1.2
Hình 1.3
Hình 1.4
Hình 1.5

Quá trình xử lý tập tin ASPX…………………………..…….....…...13
Cấu trúc trang ASP.NET…………………………….…………...….14
Cấu trúc trang ASP.NET……………………………….……………15
Cấu trúc một webform………………………………………....…....15
Sơ đồ thể hiện tính đồng bộ của Ajax………………………….…....22
Trang 7


TÌM HIỂU ASP.NET XÂY DỰNG WEBSITE TIN TỨC ĐA NGƠN NGỮ

Hình 2.1
Hình 2.2
Hình 2.3
Hình 2.4
Hình 2.5
Hình 2.6
Hình 2.7
Hình 2.8
Hình 3.1
Hình 3.2
Hình 3.3

Hình 3.4
Hình 3.5
Hình 3.6
Hình 3.7
Hình 4.1
Hình 4.2
Hình 4.3
Hình 4.4
Hình 4.5
Hình 5.1
Hình 5.2
Hình 5.3
Hình 5.4

Biểu đồ phân cấp chức năng : Hệ thống Website………………..….29
Biểu đồ phân cấp chức năng : Người quản trị…………………..…...30
Biểu đồ phân cấp chức năng : Thành viên Website………….……...30
Biểu đồ luồng dữ liệu : Mức ngữ cảnh………………………….…..31
Biểu đồ luồng dữ liệu : Mức đỉnh………………….………………..31
Biểu đồ luồng dữ liệu mức dưới đỉnh : Chức năng cập nhật…….….32
Biểu đồ luồng dữ liệu mức dưới đỉnh : Chức năng tìm kiếm……….32
Biểu đồ luồng dữ liệu mức dưới đỉnh : Chức năng đăng ký
thành viên……………………………………………………….…...33
Bảng tbuser………………………………………………………….36
Bảng admin………………………………………………….………36
Bảng BANTIN…………………………………………………........37
Bảng LINHVUC………………………………………….………....37
Bảng lang………………………………………………….………...38
Bảng COMMENT………………………………………….…....…..38
Mô hình RelationShip của CSDL……………………………….…..39

Đặc tả giao diện trang chủ (Index.aspx)…………………………….40
Đặc tả giao diện trang đăng ký…………………………….……..….42
Đặc tả giao diện trang xem, nhập, sửa bài viết…………………...…43
Đặc tả giao diện trang quản lý thành viên……………………….….44
Đặc tả giao diện trang gửi bài viết…………………………….…….45
Giao diện tiếng Việt của Website……………………………….…..46
Giao diện tiếng Anh của Website……………………………….…..47
Giao diện trang chủ từng lĩnh vực…………………………….…….48
Giao diện trang quản trị………………………………………….….49

LỜI NĨI ĐẦU
Cơng nghệ thơng tin thực sự đã trở thành một phần không thể thiếu trong đời
sống của con người. Đặc biệt trong thời gian gần đây là sự phát triển chóng mặt
các mặt cơng nghệ. Những cơng nghệ mới ra đời một cách nhanh chóng và liên

Trang 8


TÌM HIỂU ASP.NET XÂY DỰNG WEBSITE TIN TỨC ĐA NGƠN NGỮ

tục. Để khơng bị lạc hậu trong q trình phát triển của thời đại mới, việc nắm bắt
các thông tin về công nghệ mới của mọi người trở nên cần thiết hơn bao giờ hết.
Đồ án “Tìm hiểu ASP.NET xây dựng Website tin tức đa ngôn ngữ” phần
nào giúp mọi người có thể có một cái nhìn tổng quan về sự biến đổi của thế giới
công nghệ hàng ngày. Website được xây dựng trên hệ quản trị SQL server 2005 và
bộ phát triển .NET MS Visual studio 2008, bên cạnh đó đề tài cịn tìm hiểu thêm
về cơng nghệ website ASP.NET và thư viện Jquery, công nghệ Ajax.
Cấu trúc đồ án như sau :
Chương 1. Khảo sát hệ thống
Trong chương này, chủ yếu giới thiệu bài toán xây dựng website tin tức

công nghệ một cách tổng quát, mô tả cơ cấu tổ chức, tìm hiểu quy trình hoạt động
của hệ thống, qua đó đánh giá về hệ thống hiện tại. Đồng thời trong phần này cũng
tìm hiểu về cơng nghệ ASP.NET, ngơn ngữ lập trình C# và Microsoft.NET, thư
viện jquery, công nghệ ajax được sử dụng để triển khai bài tốn.
Chương 2, 3. Phân tích hệ thống, thiết kế cơ sở dữ liệu Website tin tức công
nghệ
Trong chương này thực hiện q trình phân tích, thiết kế hệ thống và triển
khai xây dựng Website tin tức công nghệ.
Chương 4, 5. Đặc tả giao diện và giao diện chính của Website tin tức công
nghệ
Chương này giới thiệu qua về giao diện và một số tính năng của website.
Và cuối cùng là kết luận của đồ án.

Trang 9


TÌM HIỂU ASP.NET XÂY DỰNG WEBSITE TIN TỨC ĐA NGƠN NGỮ

Đồ án này được hoàn thành nhờ sự giúp đỡ tận tình, chu đáo của ThS. Cao
Thanh Sơn. Em xin bày tỏ lòng biết ơn sâu sắc tới thầy Cao Thanh Sơn cùng các
thầy cô trong tổ Các Hệ Thống Thơng Tin đã góp ý giúp em thực hiện đồ án này.
Do nhiều yếu tố khách quan và do tầm hiểu biết chưa sâu sắc, đồ án tốt
nghiệp chắc chắn cịn nhiều sai sót và hạn chế. Em rất mong được sự góp ý chân
thành của thầy cơ và các bạn.
Em xin chân thành cảm ơn !
Sinh viên thực hiện:
Nguyễn Hồng Hịa

CHƯƠNG 1. KHẢO SÁT HỆ THỐNG
1.1 Tổng quan về ASP.NET

1.1.1 Giới thiệu ngôn ngữ ASP.NET
Hiện tại ASP 3.0 đã và đang trở thành kịch bản được nhiều người sử
dụng để thiết kế ứng dụng thương mại điện tử dưới nhiều hình thức khác
nhau. Chúng được sự hỗ trợ mạnh của ngơn ngữ lập trình C#, VB.NET… và
cơ sở dữ liệu SQL Server 2005 cùng với sự ra đời của công nghệ COM và
Trang 10


TÌM HIỂU ASP.NET XÂY DỰNG WEBSITE TIN TỨC ĐA NGƠN NGỮ

DCOM, ứng dụng trở nên hoàn hảo và ưu việt hơn trong q trình trao đổi
thơng tin trên mạng Internet và Intranet.
Tuy nhiên, Microsoft đã và đang nổ lực cho một cơng nghệ Web xử lý
phía máy chủ hồn tồn mới đó là ASP.NET độc lập với mọi trình duyệt.
Điều này có nghĩa là trình duyệt khơng cần phải cài đặt bất kỳ công cụ hỗ trợ
nào để duyệt trang Web dạng ASP.NET(.aspx). Với kỹ thuật cho phép mọi
thực thi đều nằm trên trình chủ (Server), có nghĩa là trình duyệt xử lý nhiều
vấn đề cùng một lúc cho nhiều người dùng, chính vì vậy địi hỏi cấu hình máy
chủ có cấu hình mạnh và địi hỏi băng thơng có khả năng truyền dữ liệu với
khối lượng lớn và tốc độ truy cập nhanh.
ASP.NET được thiết kế tương thích với các phiên bản ASP trước đó.
Bạn có thể triển khai ứng dụng phát triển bằng ASP.NET chung với ứng dụng
phát triển bằng ASP trên cùng một máy chủ mà không cần thay đổi cấu hình
của ứng dụng ASP.
Những ngơn ngữ được dùng để viết ASP.NET là VBScript, Jscript, C#.
Tùy thuộc vào khai báo chỉ mục trong đối tượng chỉ dẫn đầu trang ASP.NET,
bạn có thể chỉ rõ ngơn ngữ lập trình bạn sử dụng để xây dựng trang
ASP.NET.
Cơng nghệ ASP.NET sẽ hướng các lập trình viên Web vào quỹ đạo của
chúng bằng các lý do sau :

- Độc lập ngôn ngữ cho phép bạn không biên dịch ngôn ngữ, thực hiện
tối ưu các ngôn ngữ kết hợp.
- Dễ phát triển: ASP.NET cho phép bạn khai báo, viết mã và đơn giản
hóa vấn đề.
- Tách mã và nội dung ra hai phần khác nhau: Trong mở Webform bạn
có thể khai báo một số thủ tục trên tập tin với các tên mở rộng.
- Tính mềm dẻo và khả năng nâng cấp: Cho phép chúng ta quản lý trạng
thái của các Sesion và tạo form trên một ứng dụng sử dụng hệ thống Server.

Trang 11


TÌM HIỂU ASP.NET XÂY DỰNG WEBSITE TIN TỨC ĐA NGƠN NGỮ

- Hỗ trợ nhiều trình khách có thể tự động nhận dạng trình khách để hiện
thị cho phù hợp.
- Thay vì sử dụng mơ hình DLL, COM, DCOM trước đây, trong trường
hợp ứng dụng sử dụng công nghệ ASP.NET bạn có thể sử dụng dịch vụ tương
tự có tên là Web Services. [1]
1.1.2

Ưu điểm của ASP.NET

ASP.NET có nhiều ưu điểm hơn các nền tảng khác khi dùng nó để tạo
ứng dụng Web. Có thể phần lớn những ưu điểm quan trọng của nó đi kèm với
các máy chủ Windows và các cơng cụ lập trình Windows. Ứng dụng web
được tạo bởi ASP.NET được tạo ra, bắt lỗi và triển khai rất dễ dàng thơng qua
các tác vụ có thể thực thi trọn vẹn trong một môi trường phát triển duy nhất Visual Studio. NET.
Với những nhà phát triển ứng dụng Web, ASP.NET bộc lộ những ưu
điểm sau đây :

- Những phần thực thi được của ứng dụng Web được biên dịch, vì vậy
chúng thực thi nhanh hơn là các kịch bản thông dịch.
- Các cập nhập ngay lập tức giúp cho việc triển khai các ứng dụng Web
mà không phải khởi động lại máy chủ.
- Truy cập tới .NET Framework, có thể đơn giản hóa nhiều khía cạnh
trong lập trình Windows.
- Sử dụng nhiều những hiểu biết về ngôn ngữ lập trình C#, VB, vốn đã
được tăng cường để hỗ trợ lập trình hướng đối tượng.
- Giới thiệu ngơn ngữ lập trình mới mà nó cung cấp khả năng an tồn
kiểu, hướng đối tượng, so với ngơn ngữ lập trình C.
- Tự động quản lý trạng thái để điều khiển trang Web (được gọi là
Server Controls) vì vậy chúng có gì đó giống với các Windows Controls.
- Các tính năng bảo mật được xây dựng sẵn thông qua máy chủ
Windows hoặc thông qua các phương thực xác nhận/phân quyền khác.

Trang 12


TÌM HIỂU ASP.NET XÂY DỰNG WEBSITE TIN TỨC ĐA NGƠN NGỮ

- Tích hợp chặt chẽ với ADO.NET để cung cấp các truy xuất CSDL và
các công cụ thiết kế CSDL trực quan trong bộ VS.NET.
- Hỗ trợ đầy đủ XML, CSS và các chuẩn Web đã được thiết lập hoặc mới
khác.
- Các tính năng sẵn có để đệm các trang web thường xuyên được yêu cầu
trên máy chủ, các nội dung bản địa hóa cho các ngơn ngữ và trao đổi, nhận ra
khả năng tương thích trình duyệt. [7]
Cơ chế hoạt động
Khi Web server nhận được yêu cầu từ phía client, nó sẽ tìm kiếm tập
tin được u cầu thơng qua chuỗi URL được gởi về, sau đó, tiến hành xử lý

theo sơ đồ sau:

Trang 13


TÌM HIỂU ASP.NET XÂY DỰNG WEBSITE TIN TỨC ĐA NGƠN NGỮ

Hình 1.1
Webform trong ASP.NET
Để xây dựng ứng dụng web, ASP.NET cung cấp sẵn cho các nhà lập
trình rất nhiều lớp ngay khi cài đặt .NET framework. Trong số này có một lớp
đặc biệt quan trọng là Page. Mỗi lớp Page sẽ trình bày một trang tài liệu –
tương ứng với một window – và được gọi là một webform. Webform là một
công nghệ cho phép xây dựng các trang web trong đó có thể lập trình được.
Các trang này gọi là ASP.NET web form pages hay ngắn gọn là webform.
Các trang web xây dựng bằng ASP.NET sẽ không phụ thuộc vào trình duyệt
(tức là trình duyệt nào cũng cho kết quả như nhau và hiển thị giống nhau).
Cấu trúc trang ASP.NET
Một trang ASP.NET bao gồm cả phần giao diện người dùng và phần
xử lý logic bên trong. Giao diện người dùng chịu trách nhiệm hiển thị các
thông tin và tiếp nhận dữ liệu từ người dùng, trong khi đó phần xử lý (lập
trình) đảm nhiệm việc điều khiển sự tương tác của người dùng với trang web.
Phần giao diện người dùng bao gồm một file chứa ngôn ngữ đánh dấu như
HTML hoặc XML và server controls chẳng hạn. File này được gọi là một
trang (Page) và có đi mở rộng là aspx. Phần đáp ứng các tương tác của
người dùng với trang web được thực hiện bởi một ngôn ngữ lập trình chẳng
hạn như Visual Basic.NET và C#. Chúng ta có thể thực hiện việc viết code
bằng bất kỳ ngơn ngữ lập trình nào được hỗ trợ bởi CLR ở ngay trong trang
ASPX hoặc tách ra một file riêng. File tách riêng này được gọi là file Code
Behind hay mới đây gọi là Code file. Đuôi mở rộng của Code file là .VB

(Nếu dùng ngôn ngữ Visual Basic) hoặc .CS (nếu dùng ngôn ngữ C#).

Trang 14


TÌM HIỂU ASP.NET XÂY DỰNG WEBSITE TIN TỨC ĐA NGƠN NGỮ

Hình 1.2

Cách lưu trữ này được minh họa qua một ứng dụng cụ thể dưới đây.

Hình 1.3
Trong đó, trang web thứ nhất Default2.aspx chứa cả code (C#) và giao
Trang 15


TÌM HIỂU ASP.NET XÂY DỰNG WEBSITE TIN TỨC ĐA NGƠN NGỮ

diện (HTML) còn trang web thứ hai đặt code và giao diện ra 2 file riêng biệt.
default.aspx và default.cs.

Hình 1.4
Một webform bao gồm 2 thành phần:
- Thành phần giao diện (trang thisfile.aspx).
- Thành phần xử lý (lập trình) thisfile.cs.
1.2 Tổng quan về ngơn ngữ lập trình C#
Ngơn ngữ C# có khoảng 80 từ khóa và hơn mười kiểu dữ liệu được xây
dựng sẵn. Tuy nhiên, ngơn ngữ C# có ý nghĩa cao khi thực thi những khái
niệm lập trình hiện đại. C# bao gồm tất cả những hỗ trợ cho cấu trúc, thành
phần component, lập trình hướng đối tượng. Những tính chất đó hiện diện

trong một ngơn ngữ lập trình hiện đại.
Ngôn ngữ C# được xây dựng trên nền tảng của hai ngôn ngữ mạnh
nhất là C++ và Java.
Ngôn ngữ C# được phát triển bởi Microsoft, trong đó người dẫn đầu

Trang 16


TÌM HIỂU ASP.NET XÂY DỰNG WEBSITE TIN TỨC ĐA NGƠN NGỮ

là Anders Hejlsberg và Scott Wiltamuth. Cả hai người này điều là những
người nổi tiếng, trong đó Anders Hejlsberg được biết đến là tác giả của Turbo
Pascal, một ngôn ngữ lập trình PC phổ biến. Ơng đứng đầu nhóm thiết kế
Borland Delphi, một trong những thành công đầu tiên của việc xây dựng mơi
trường phát triển tích hợp (IDE) cho lập trình client/server. Phần cốt lõi hay
của bất cứ ngơn ngữ lập trình hướng đối tượng là sự hỗ trợ của nó cho việc
định nghĩa và làm việc với những lớp (class). Những lớp định nghĩa những
kiểu dữ liệu mới, cho phép người phát triển mở rộng ngôn ngữ để tạo mơ hình
tốt hơn để giải quyết vấn đề. [3]
1.3 Thư viện Jquery
Jquery là một thư viện Javascript kiểu mới, giúp chúng ta đơn giản hóa
cách viết Javascript và tăng tốc độ xử lý các sự kiện trên trang web. Để thực
hiện một chức năng nào đó, thay vì viết vài chục dòng lệnh JavaScript chán
ngắt, với Jquery chỉ cần vài dòng lệnh ngắn gọn.
o Tác dụng của Jquery :
 Truy cập (access) các phần tử (elements) trong nội dung trang web
(document)
 Thay đổi hình thức/giao diện (appearance) của trang web: Thay đổi
class hoặc style riêng lẻ..
 Thay đổi nội dung (content) trang web.

 Tương tác với người dùng.
 Hiệu ứng động: fades, wipes, ...
 Lấy thông tin từ Server mà không cần load lại trang web (AJAX)
 Đơn giản hoá tác vụ của JavaScript
o Cách dùng :

Trang 17


TÌM HIỂU ASP.NET XÂY DỰNG WEBSITE TIN TỨC ĐA NGƠN NGỮ

Cần có file thư viện của jquery : jquery.js down ở trang chủ
jquery.com cần attach file js trên vào file (htm,php,aspx...) muốn sử dụng.
Sửa thuộc tính src trong thẻ script để trỏ tới jquery.js. Ví dụ, nếu jquery.js ở
cùng thư mục với tệp HTML, có thể dùng:
<script type="text/javascript"src="jquery.js"></script>
Chạy mã lúc Document Ready (trang đã sẵn sàng). Có thể thấy rằng hầu hết
các lập trình viên Javascript kết thúc mã thực thi bằng cách thêm các dòng mã
vào script, tương tự như sau:
window.onload = function(){ ... }
Các mã bên trong đó sẽ được thực thi khi trang được tải xong. Không cịn gì
phải bàn, tuy nhiên, mã Javascript khơng chạy cho đến khi tất cả các hình ảnh
trong trang được tải xong (kể cả banner quảng cáo). Lý do cho việc sử dụng
window.onload là để chắc chắn rằng HTML 'document' phải được tải xuống
hết, sau đó mới chạy mã kia. Để giải quyết, jQuery có câu lệnh đơn giản,
được biết như ready event:
$(document).ready(function(){
// Mã javascrips
});
Mã này kiểm tra document và đợi cho đến khi nó sẵn sàng để sử dụng - theo ý

muốn. Hãy lấy đoạn mã mẫu ở trên và cho vào tài liệu HTML . Các ví dụ cịn
lại của jQuery sẽ được đặt bên trong phần callback của hàm này, chúng sẽ
được thực thi khi tài liệu sẵn sàng.
Trong hầu hết các ví dụ được sử dụng trong loạt bài này thì có 3 thành
phần được sử dụng nhiều nhất đó chính là tài liệu HTML, Stylesheet CSS và
một tài liệu JavaScript để thực hiện lệnh trên đó. Trong ví dụ đầu tiên chúng ta
sẽ sử dụng một tài liệu HTML đơn giản với một header, sidebar, content và
Trang 18


TÌM HIỂU ASP.NET XÂY DỰNG WEBSITE TIN TỨC ĐA NGƠN NGỮ

footer. Trong phần content sẽ có 3 đoạn văn bản và một số class có sẵn. Tất
nhiên phải sử dụng CSS để định dạng cho tài liệu HTML này. Thấy rằng, thư
viện jQuery được đặt ở dưới Stylesheet. Đây là một điểm rất quan trọng mà
cần lưu ý là thứ tự của các file khi gọi. Ban đầu phải là CSS load trước, khi
trang web đã load xong phần CSS thì chúng ta mới thêm vào phần thư iện
jQuery cuối cùng mới là code jQuery chúng ta tự viết ra. Nếu không khi code
jQuery sẽ không làm việc đúng như mong đợi nếu thư viện jQuery chưa được
load. Bây giờ mở trình soạn thảo code lên và tạo một file tên là first-jquery.js
và file này đã được chúng ta chèn vào trong dòng code:
<script src=”first-jquery.js” type=”text/javascript”></script>
Gõ vào file vừa tạo 3 dòng code như sau:
$(document).ready(function() {
$('.text').addClass('important');
});
Thao tác cơ bản nhất của jQuery là chọn một phần nào đó của tài liệu
HTML. tiến hành nó bằng cách sử dụng hàm $(). Thường thì nằm giữa dấu
ngoặc () là một chuỗi dưới dạng tham số, nó có thể là những CSS Selectors.
Trong ví dụ này chúng ta muốn tìm tất cả những thành phần nào có

class=”text”, cú pháp giống như khi viết code CSS vậy. Tất nhiên ở những bài
sau chúng ta sẽ tham khảo thêm nhiều những lựa chọn khác hay hơn nữa. [4]

Trang 19


TÌM HIỂU ASP.NET XÂY DỰNG WEBSITE TIN TỨC ĐA NGƠN NGỮ

1.4 Ajax
Ajax là viết tắt của Asynchronous JavaScript and XML - kỹ thuật kết
hợp hai tính năng mạnh của JavaScript được các nhà phát trển đánh giá rất
cao :
o Gửi yêu cầu (request) đến máy chủ mà không cần nạp lại trang
o Phân tách và làm việc với XML
Các ứng dụng Ajax xoay quanh một tính năng có tên là
XMLHttpRequest. Ajax là sự phối hợp một loạt các công nghệ đang thu hút
sự quan tâm của giới công nghiệp trong thời gian gần đây. Đó chính là :
o Trình bày trang Web dựa trên XHTML và CSS, 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.
o Biểu diễn động và tương tác sử dụng Document Object Model.
o Trao đổi và xử lý dữ liệu dùng XML.
o Thu hồi dữ liệu bất đối xứng dùng dùng XMLHttpRequest.
Hoạt động của ajax :
Thông thường ứng dụng máy tính rồi sẽ được lưu và chạy hồn tồn trên
web thay vì trong ổ cứng. Dù vậy, viễn cảnh đó vẫn chưa thể xảy ra do ứng
dụng web bị hạn chế bởi nguyên lý rằng tất cả các thao tác phải được thực
hiện thông qua HTTP (HyperText Transfer Protocol - Giao thức truyền tải
qua siêu liên kết). Những hoạt động của người sử dụng trên trang web sẽ tạo

Trang 20


TÌM HIỂU ASP.NET XÂY DỰNG WEBSITE TIN TỨC ĐA NGƠN NGỮ

ra một yêu cầu HTTP tới server. Máy chủ thực hiện một số khâu xử lý như
lấy lại dữ liệu, tính tốn, kiểm tra sự hợp lệ của thơng tin, sửa đổi bộ nhớ, sau
đó gửi lại một trang HTML hoàn chỉnh tới máy khách. Về mặt kỹ thuật,
phương pháp này nghe có vẻ hợp lý nhưng cũng khá bất tiện và mất thời gian,
bởi khi server đang thực hiện vai trị của nó thì người phải chờ đợi. Để khắc
phục hạn chế trên, các chuyên gia phát triển giới thiệu hình thức trung gian cơ chế xử lý AJAX - giữa máy khách và máy chủ. Ajax cho phép tạo ra một
Ajax Engine nằm giữa giao tiếp này. Điều này giống như việc tăng thêm một
lớp giữa cho ứng dụng để giảm q trình "đi lại" của thơng tin và giảm thời
gian phản ứng. 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. Và thay vì tải lại (refresh) tồn bộ
một trang, nó chỉ nạp những thơng tin được thay đổi, cịn giữ ngun các phần
khác. Vì thế, khi duyệt một trang hỗ trợ AJAX, người sử dụng khơng bao giờ
nhìn thấy một cửa sổ trắng (blank) và biểu tượng đồng hồ cát - dấu hiệu cho
thấy máy chủ đang thực hiện nhiệm vụ. Ví dụ, trong một website ảnh, với ứng
dụng truyền thống, toàn bộ trang chứa các ảnh sẽ phải mở lại từ đầu nếu có
một thay đổi nào đó trên trang. Cịn khi áp dụng AJAX, DHTML chỉ thay thế
đoạn tiêu đề và phần vừa chỉnh sửa, do vậy tạo nên các giao dịch nhanh

chóng. "Mọi thao tác của người sử dụng sẽ gửi lệnh JavaScript tới bộ xử lý

Trang 21


TÌM HIỂU ASP.NET XÂY DỰNG WEBSITE TIN TỨC ĐA NGƠN NGỮ

AJAX, thay vì tạo ra một yêu cầu HTTP (HTTP request) và truy vấn tới máy
chủ", Jesse James Garrett đã ghi trong bài viết đầu tiên định nghĩa về thuật
ngữ này. "Nếu cần gì từ server, như tải về bổ sung mã giao diện hay nhận dữ
liệu mới, AJAX sẽ truyền yêu cầu tới máy chủ một cách không đồng bộ,
thông thường sử dụng XML, mà không làm gián đoạn sự tương tác của người
dùng với ứng dụng web". Tính không đồng bộ của các ứng dụng Ajax được
thể hiện trong hình dưới đây.

Hình 1.5 Sơ đồ thể hiện tính khơng đồng bộ của Ajax

Điển hình của ứng dụng AJAX bao gồm những trích dẫn chứng khốn
được cập nhật liên tục mỗi giây, với màu xanh và đỏ nhấp nháy khi giá dao
động. Microsoft cũng ứng dụng Ajax trong bản cập nhật Hotmail và đang xây
dựng chương trình mới hỗ trợ sự phát triển Ajax. Công nghệ thay thế XAML
sẽ cho phép nhiều ứng dụng phong phú hơn hoạt động trên trình duyệt. Tuy
vậy, Ajax chưa thể thực hiện tất cả mọi thứ. Những ứng dụng phụ thuộc nhiều
vào máy tính cố định như Photoshop của Adobe sẽ khơng xuất hiện sớm trên
Trang 22