Tìm hiểu mô hình 3 lớp và ajax vào xây dựng website

Hầu hết trong tất cả các ứng dụng Web hiện nay đềulàm việc dựa trên mô hình 3 lớp và sử dụng công nghệ Ajax.. PresentationLớp này làm nhiệm vụ giao tiếp với người dùng để thu thập dữ liệ

Trờng đại học vinh Khoa công nghệ thông tin

Mở ĐầU

Có thể nói sự phát triển vợt bậc của Công nghệ thông tin đã giúp con ngờihoá giải đợc rất nhiều bài toán nhng một điều quan trọng ở đây là không chỉ đơnthuần là giải đợc bài toán đó mà là phơng pháp để giải bài toán đó nh thế nàosao cho có hiệu quả nhất Hầu hết trong tất cả các ứng dụng Web hiện nay đềulàm việc dựa trên mô hình 3 lớp và sử dụng công nghệ Ajax Việc ứng dụng mụhỡnh này đã làm cho các phần của chơng trình trở nờn độc lập hơn, đáng tin cậy

và do đó tính bảo mật cao hơn Điều đặc biệt hơn là khi sử dụng Ajax thì ngờidùng cảm thấy kết quả trả về ngay lập tức mà không cần nạp lại trang Nhữngứng dụng cú tớnh thay đổi thường xuyờn như ứng dụng Web giờ đõy sẽ trở nờnlinh động hơn khi có nhiều ngời truy cập hoặc trở nên dễ dàng hơn trong việcthay thế và nâng cấp

Đề tài “tỡm hiểu mụ hỡnh 3 lớp và ajax vào xõy dựng website” là một vớ

dụ minh họa cho việc ứng dụng mụ hỡnh 3 lớp và cụng nghệ Ajax

Nội dung của đề tài gồm cú 3 chương:

 Chương I : Tổng quan về đề tài

 Chương II : Tỡm hiểu về mụ hỡnh 3 lớp và cụng nghệ Ajax

 Chương III: Xõy dựng Website kinh doanh mỏy tớnh

Em xin chõn thành cảm ơn sự giỳp đỡ của Thầy giỏo Th.s NguyễnQuang Ninh, cỏc thầy cụ giỏo trong Khoa cụng nghệ thụng tin và cỏc bạn bố

đó giỳp đỡ em trong quỏ trỡnh thực hiện đồ ỏn

Mặc dự đó cố gắng hoàn thành đồ ỏn trong phạm vi và khả năng chophộp nhưng chắc chắn sẽ khụng trỏnh khỏi những thiếu sút Em rất mong nhậnđược sự thụng cảm, gúp ý của cỏc Thầy, Cụ và cỏc bạn

Sinh viờn thực hiện

Nguyễn Mạnh Hựng

CHƯƠNG I:Tổng quan đề tài

sự đáp ứng nhanh chóng của hệ thống để đem lại nhiều cảm tình nhất của ngờidùng web

Ngoài ra kinh tế thị trường đang phỏt triển nờn nhu cầu mua sắm củamọi người cũng được nõng cao Cựng với sự phỏt triển của Cụng Nghệ ThụngTin, Internet đang trở thành một người bạn thõn thiết của mọi người dõn nờnviệc thiết kế một Website mua bỏn qua mạng là để nhằm đỏp ứng một phầnnhu cầu mua sắm của mọi người tiết kiệm thời gian và chi phớ đi xem sảnphẩm trực tiếp, do đú WebSite bỏn hàng qua mạng sẽ là một người bạn hữuớch đối với những người hay lướt web

1.2 Phạm vi đề tài

Xây dựng ứng dụng ứng dụng thực tế áp dụng phơng pháp mô hình 3 lớp

và công nghệ Ajax vào ứng dụng

Shop Online nhằm phục vụ cho việc mua bán của một siêu thị máy tínhqua mạng Ngoài ra, hệ thống cần đợc thiết kế để có thể đợc áp dụng cho bất kỳmột Siêu thị trực tuyến mua bán các loại sản phẩm nào

1.3 Nhiệm vụ đề tài

Để hoàn thành tốt đề tài thỡ bản thõn tụi cần phải tiến hành cỏc cụngviệc sau:

Trước hết cần phải tỡm hiểu cỏch xõy dựng một trang web như thế nào

Tìm hiểu việc ứng dụng mô hình 3 lớp, công nghệ Ajax vào việc xâydựng website.

Tích cực tìm kiếm, khai thác thông tin

Tìm hiểu các hệ quản trị cơ sở dữ liệu hiện nay

Nắm được cơ sở lý thuyết chung về thương mại điện tử và các vấn đềtrong thương mại điện tử

Tiến hành xây chương trình: Phân tích, thiết kế và lập trình chươngtrình

1.4 Ph¬ng ph¸p nghiªn cøu

Để thực hiện các công việc, mục tiêu trên, tôi đã sử dụng các phươngphát nghiên cứu:

Phương pháp phân tích và tổng hợp lý thuyết

Phương pháp nghiên cứu tài liệu

Tham khảo các website về bán hàng quan mạng trên internet

Chơng II Tìm hiểu về mô hình 3 lớp và công nghệ ajax

bài toán lớn mà là cách thức giải bài toán

ứng dụng đầu tiên của mô hình Client/Server là ứng dụng chia sẻ file (do các tổchức có nhu cầu chia sẻ thông tin giữa các bộ phận trong tổ chức đợc dễ dàng vànhanh chóng hơn) Trong ứng dụng này, thông tin đợc chứa trong các file và đợc

đặt tại một máy chủ (Server) của một phòng ban Khi một phòng ban khác cónhu cầu trao đổi thông tin với phòng ban này thì sẽ sử dụng một máy khách(Client) kết nối với máy chủ (Server) và tải nhứng file thông tin cần thiết về

2.1.2 Mô hình hai lớp

Mô hình hai lớp là một sự phát triển từ ứng dụng chia sẻ file ở trên Trongứng dụng chia sẻ file, ta thay thế file Server bằng một hệ thống quản trị cơ sở dữliệu (DBMS) Khi Client cần thông tin từ cơ sở dữ liệu (CSDL) nó sẽ yêu cầuDBMS thông qua mạng máy tính giữa các phòng ban DBMS xử lý yêu cầu vàsau đó trả về cho Client những thông tin mà Client yêu cầu

Ưu điểm của mô hình 2 lớp so với ứng dụng chia sẻ file là làm giảm bớt

đ-ợc lu thông trên mạng Ở ứng dụng chia sẻ file, đơn vị truyền nhận giữa Client

và Server là 1 file do đó khi Client yêu cầu thông tin từ Server thì Server sẽ trả vềcho Client toàn bộ một file có chứa thông tin đó

Trong khi ở mô hình hai lớp thì Server có thể trả về cho Client những gì màClient yêu cầu với đơn vị truyền nhận có thể tính bằng byte.

Ngoài ra, hiện nay các DBMS còn cung cấp nhiều khả năng khác nh hỗ trợgiao dịch, cho phép nhiều ngời dùng thao tác trên cơ sở dữ liệu cùng lúc mà vẫn

đảm bảo đợc tính toàn vẹn của dữ liệu

Mô hình hai lớp đợc chia làm 2 loại

a Tính toán tập trung ở Client

ở loại này, phía Client phải đảm nhận cả 2 lớp là giao diện và chức năng, còn

Server chỉ làm nhiệm vụ lớp CSDL

Ưu điểm của loại này là đơn giản, thích hợp cho các ứng dụng nhỏ và vừa.Tuy nhiên nó cũng có một số nhợc điểm: Do phần tính toán nghiêng về phíaClient nên đòi hỏi Client phải có cấu hình đủ mạnh Cũng do phần chức năngcủa chơng trình nằm ở phía Client nên khi chơng trình cần nâng cấp thì sẽ rấtkhó khăn vì phải cập nhật lại chơng trình nằm ở toàn bộ các Client Do mọi thaotác trên CSDL đều thông qua mạng giữa Client và Server nên tốc độ của chơngtrình sẽ chậm đi

b Tính toán tập trung ở Server

Database ServerDBMS

 Data access logic

 Data access logic

P resentation Business logic

 business logic

P resentation Business logic

 business logic

ở loại này, Client chỉ đảm nhiệm phần giao diện còn Server thực hiện chức năngcủa lớp chức năng lớp CSDL Ngợc lại với loại thứ nhất thì loại này có u điểm làgiảm sự lu thông trên mạng và tốc độ nhanh hơn do lớp chức năng của chơngtrình nằm ở Server, do đó mọi thao tác với CSDL của chơng trình đều đợc thựchiện ngay trên Server và thông tin lu thông trên mạng chỉ là những kết quả đợctrả về cho ngời dùng sau khi đợc tính toán Mặt khác, do phần lõi của chơngtrình đợc đặt tập trung tại Server nên việc cập nhật chơng trình sẽ dễ dàng hơn.Tuy nhiên, do công việc đợc tập trung quá nhiều tại Server nên đòi hỏi cấu hìnhServer phải đủ mạnh, đặc biệt là khi có nhiều Client truy xuất tới Server cùnglúc.

Presentation (Lớp giao diện)

Business Logic (Lớp chứa cỏc hàm)

Data Access (Lớp truy xuất đến cơ sở dữ liệu)

Mụ hỡnh 3 lớp mà Microsoft phỏt triển dựng cho cỏc hệ thống dựa trờn nền.NET như sau:

Presentation

Lớp này làm nhiệm vụ giao tiếp với người dùng để thu thập dữ liệu và hiển thịkết quả dữ liệu thông qua các thành phần trong giao diện người sử dụng Lớpnày sẽ sử dụng các dịch vụ do lớp Business Logic cung cấp

Trong lớp này có 2 thành phần chính là User Interface Components và User Interface Process Components

UI Components là những phần tử chịu trách nhiệm thu thập và hiển thị thôngtin cho người dùng Trong ASP.NET thì những thành phần này có thể là cácTextBox, các Button, DataGrid

UI Process Components: Là thành phần chịu trách nhiệm quản lý các quy trìnhchuyển đổi giữa các UI Components

Nhận xét: Lớp này không nên sử dụng trực tiếp các dịch vụ của lớp Data Access mà nên sử dụng thông qua các dịch vụ của lớp Business vì khi sử dụng trực tiếp như vậy có thể bỏ qua các ràng buộc, các logic nghiệp vụ mà ứng dụng cần phải có.

Business Logic

Lớp này thực hiện các nghiệp vụ chính của hệ thống, sử dụng các dịch vụ dolớp Data Access cung cấp, và cung cấp các dịch vụ cho lớp Presentation.Trong lớp này có các thành phần chính là Business Components, BusinessEntities, Business Workflows và Service Interface

Service Interface là giao diện lập trình mà lớp này cung cấp cho lớpPresentation sử dụng Lớp Presentation chỉ cần biết các dịch vụ thông qua giaodiện này mà không cần phải quan tâm đến bên trong lớp này được thực hiệnnhư thế nào

Business Entities là những thực thể mô tả những đối tượng thông tin mà hệthống xử lý Trong ứng dụng chúng ta các đối tượng này là các nhóm sảnphẩm (CategoryInfo), sản phẩm (ProductInfo), tài khoản (AccountInfo) Business Components là những thành phần chính thực hiện các dịch vụ màService Interface cung cấp Trong ứng dụng của chúng ta, lớp này sẽ chứa cácthành phần là CategoryManager, ProductManager, AccountManager, làmnhiệm vụ cung cấp các dịch vụ quản lý nhóm sản phẩm, sản phẩm, tài khoản(thêm, xóa, cập nhật, xem chi tiết, lấy danh sách )

Data Access

Lớp này thực hiện các nghiệp vụ liên quan đến lưu trữ và truy xuất dữ liệu củaứng dụng Thường lớp này sẽ sử dụng các dịch vụ của các hệ quản trị cơ sở dữliệu như SQL Server, Oracle, để thực hiện nhiệm vụ của mình Trong lớpnày có các thành phần chính là Data Access Logic, Data Sources, và ServiceAgents

Data Access Logic Components (DALC) là thành phần chính chịu tráchnhiệm lưu trữ vào và truy xuất dữ liệu từ các nguồn dữ liệu Trong NET CácDALC này thường được hiện thực bằng cách sử dụng thư viện ADO.NET đểgiao tiếp với các hệ cơ sở dữ liệu

Service Agents là những thành phần trợ giúp việc truy xuất các dịch vụ bênngòai một cách dễ dàng và đơn giản như truy xuất các dịch vụ nội tại

Các lớp này giao tiếp với nhau như thế nào? Ví dụ trong ứng dụng của

chúng ta có thao tác đăng nhập tài khoản thì các lớp sẽ tương tác với nhau nhưsau:

Lớp Presentation: Trình bày một web form, có các Textbox cho phép người sử dụng nhập tên tài khoản và mật khẩu

Khi người dùng nhấn nút Đăng nhập trên form này, ứng dụng sẽ thực hiện chức năng đăng nhập tài khoản như đoạn code sau minh họa:

protected void Login(object sender, EventArgs e) {

{

Lớp Data Access có thành phần là AccountContext sẽ cung cấp hàm để kiểm tra tài khoản và mật khẩu trong cơ sở dữ liệu.

public int Login(string _AccountName, string

cmd.Parameters.Add( new

SqlParameter("@Result",SqlDbType.Int));

Trong đó Store Procedure [uspLogin] như sau:

ALTER PROCEDURE [dbo].[uspLogin]

) IF(@Result IS NULL)

Như vậy chúng ta có thể thấy rõ những ưu điểm của mô hình 3 lớp so với các

mô hình trước như sau:

Tính bảo mật cao hơn do có nhiều lớp (3 lớp)

Các phần của chương trình độc lập nên chương trình trở nên linh động hơn khi

có nhiều người truy cập hoặc trở nên dễ dàng hơn trong việc thay thế và nângcấp

Việc sử dụng các Stored Procedure trong SQL Server 2008 đã làm giảm việclưu thông trên mạng rất nhiều

Do đó mô hình này rất thích hợp với những ứng dụng có yêu cầu thay đổi thờngxuyên nh ứng dụng Web.

2.1.4 Minh họa tạo một ứng dụng 3 lớp

Chỳng ta cú thể nhỡn thấy rất rừ mụ hỡnh 3 lớp trong ứng dụng vừa tạo ra nhưsau:

2.2 Giới thiệu về công nghệ Ajax

2.2.1 Định nghĩa Ajax

Ajax là từ viết tắt của Asynchronous Javascript và XML: là bộ công cụ cho phépthăng tốc ứng dụng Web bằng cách cắt nhỏ dữ liệu hiển thị và hiển thị những gìcần thiết thay vì tảI đi tải lại toàn bộ trang web

2.2.2 So sánh web truyền thống và ứng dụng web có ajax

Rõ ràng điểm khác biệt là thay vì phải tải cả trang Web thì với Ajax chỉcần tải về phần của trang Web mà muốn thay đổi Điều này giúp cho ứng dụngWeb phản hồi nhanh hơn, thông minh hơn

ở 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êucầ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ànhXHTML + CSS cho trình duyệt hiển thị Việc này đợc thực hiện trên Client nêngiả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ý đợchiể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ôngnghệ web nh CSS và XHTML làm cho việc trình bày giao diện trang web tốt hơnnhiều và giảm đáng kể dung lợng trang phải nạp Đây là những lợi ích hết sứcthiết thực mà Ajax đem lại

2.2.3 Một số ứng dụng phổ biến của Ajax

Tớnh năng "Auto save" (lưu tự động): Sử dụng Ajax cú thể bắt chước tớnhnăng của cỏc phần mềm soạn thảo tự động lưu những gỡ người dựng đó gừđược sau một khoảng thời gian nhất định

Dịch trực tuyến: Cú thể sử dụng Ajax để tạo ra tớnh năng cho phộp người dựngchỉ cần chọn một từ trờn trang web và hiển thị từ tương ứng của cỏc ngụn ngữkhỏc (sử dụng cỏc dịch vụ của cỏc trang từ điển)

Cập nhật theo thời gian thực danh sỏch những gỡ người mua chọn và giỏ cả

mà khụng cần phải tải lại trang web Vớ dụ người dựng nhấn chọn thờm mộtmặt hàng, ngay lập tức nú xuất hiện trong danh sỏch bờn cạnh và tổng giỏ tiềncũng sẽ được cập nhật tương ứng

Kiểm tra trùng lặp: bạn tạo ra một mẫu đơn đăng ký với yêu cầu là tên đăngnhập phải không bị trùng lặp với bất kỳ ai trong cơ sở dữ liệu Thông thường,bạn sẽ bắt người dùng nhập hết thông tin và gửi đơn đăng ký lên máy chủ vàrồi mới kiểm tra Ajax sÏ kiểm tra ngay sau khi người dùng vừa mới chọnxong tên.

2.2.4 Ví dụ về ứng dụng AJAX vào trang web ShopOnline

Khi người dùng sử dụng chức năng đăng nhập tài khoản:

Khi người dùng thực hiện thao tác click vào nút đăng nhập:

Nếu hợp lệ thì website sẽ cho phép người dùng đăng nhập tài khoản áp dụngvào phiên giao dịch

Nếu không hợp lệ thì sẽ trả về kết quả sai tên đăng nhập hoặc mật khẩu màkhông cần phải request lại toàn bộ trang web

Quá trình được thực hiện như sau:

<%@ Master Language="C#" AutoEventWireup="true"

Tên chức năng

Ch¬ng III: X©y dùng website kinh doanh m¸y tÝnh 3.1 Ph©n tÝch thiÕt kÕ c¬ së d÷ liÖu

3.1.1 Ph©n tÝch hÖ thèng vÒ mÆt chøc n¨ng

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

b Biểu đồ luồng dữ liệu

Biểu đồ luồng dữ liệu là phương tiện diễn tả chức năng xử lý và việc traođổi thông tin giữa các chức năng

Các ký hiệu được dùng trong biểu đồ

+ Luồng dữ liệu: Là một tuyến truyền dẫn thông tin vào hay ra một

+ Tác nhân ngoài: Một tác nhân ngoài là một thực thể ngoài hệ thống,

có trao đổi thông tin với hệ thống

Kí hiệu:

Tên luồng dữ liệu

Tên kho dữ liệu

Tên tác nhân ngo ià

Ph©n quyÒn qu¶n trÞ

CËp nhËt sản phẩm

Quản lý đơn đặt hàngQuản lý th«ng tin kh¸ch hµng

Xem đơn hàng đã mua

Biểu đồ luồng dữ liệu mức khung cảnh

Kết quả tìm kiếm

Th«ng tin kh¸ch hµngTh«ng tin t×m kiÕm

Th«ng tin s¶n phÈm,nhãm sp

Th«ng tin yêu cầu Đáp ứng th«ng tin yêu cầu

ểu đồ dữ liệu mức đỉnh

Chú thích:

1 Thông tin về sản phẩm, nhóm sản phẩm,tài khoản

2.Thông tin về khách hàng, thông tin mua hàng

3 Thông tin yêu cầu xem, xóa đơn hàng.Thông tin giao hàng

4 Đáp ứng yêu cầu xem, xóa đơn hàng, giao hàng

Tỡm kiếm sp

Khỏch hàng

Kho dữ liệu

Giỏ hàng

Cập nhật Thụng tin Khỏch hàng

Biểu đồ dữ liệu mức dưới đỉnh

Chức năng cập nhật thông tin

Cập nhật Nhóm sp

Cập nhật tài khoản

Cập nhật khách hàng

Cập nhật đơn hàng

4 5

Chức năng tìm kiếm sản phẩm

Chức năng quản lý đơn hàng

Chức năng xem đơn hàng cũ

Người quản trị

Quản lý đơn hàng

Kho dữ liệu

Thông tin tìm kiếm

Kết quả tìm kiếm

Chức năng giỏ hàng

3.1.2 Phân tích hệ thống về mặt dữ liệu

Chú thích: (K:khóa)

- Bảng Account: chứa thông tin về tài khoản hệ thống :

Tên Trờng Kiểu dữ liệu Null Diễn giải

AccountID (K) INT Không Mã tài khoản

AccountName NVARCHAR(50) Không Tên tài khoản

FullName NVARCHAR(50) Có Họ tên tài khoản

Email NVARCHAR(50) Có Email tài khoản

Mobile NVARCHAR(20 Có Số điện thoại tài khoảnAddress NVARCHAR(1000) Có Địa chỉ tài khoản

Role TINYINT Không Phân quyền tài khoảnBirthday Date Có Ngày tháng năm sinhCreateDate Date Không Ngày tạo tài khoản

ModifyDate Date Không Ngày chỉnh sửa tài khoảnPassword NVARCHAR(100) Không Mật khẩu tài khoản

Sex BIT Không Giới tính tài khoản

Status BIT Không Trạng thái hoạt động

- Bảng Category:chứa các thông tin về nhóm sản phẩm :

Khỏch hàng

Đưa vào giỏ hàng

Kho dữ liệu

Lựa chọn sản phẩm

Kết quả giỏ hàng