XÂY DỰNG WEBSITE THIẾT kế NHÀ ở 3d BẰNG CÔNG NGHỆ SILVERLIGHT và ASP NET MVC 3

I Xây Dựng Website Thiết Kế Nhà Ở 3D Bằng Công Nghệ Silverlight Và Asp.Net Mvc 3 LỜI MỞ ĐẦU Trong kỉ nguyên công nghệ số hiện nay, con người đã và đang sống trong mạng thế giới ảo – int

Trang 1

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

Khoa Công Nghệ Thông Tin

- -

LUẬN VĂN TỐT NGHIỆP

XÂY DỰNG WEBSITE THIẾT KẾ NHÀ Ở 3D BẰNG CÔNG NGHỆ SILVERLIGHT VÀ

ASP.NET MVC 3

Giảng viên hướng dẫn: Th.S Phạm Thi Vương

Th.S Nguyễn Hữu Thương

Sinh Viên: Lê Xuân Tùng Mssv: 07520405 Nguyễn Anh Khoa Mssv: 07520180

Lớp : CNPM02

TP Hồ Chí Minh – 2012

Trang 2

I Xây Dựng Website Thiết Kế Nhà Ở 3D Bằng Công Nghệ Silverlight Và Asp.Net Mvc 3

LỜI MỞ ĐẦU

Trong kỉ nguyên công nghệ số hiện nay, con người đã và đang sống trong

mạng thế giới ảo – internet, với số lượng người dùng internet hiện nay trên thế

giới đã tạo ra tính chất cạnh tranh khốc liệt trong thị trường sản phẩm công

nghệ số, nhằm đáp ứng nhu cầu và thị yếu của người sử dụng mạng internet

nên đã tạo ra một xu hướng internet hoá các sản phẩm phần mềm Theo đó

chất lượng sản phẩm phần mềm ngày càng có nhiều tiêu chuẩn đánh giá hơn,

ngoài khả năng đáp ứng các yêu cầu nghiệp vụ, tốc độ xử lý, giao diện trực

quan… mà còn phải thoã mãn tính chất linh hoạt, tiện ích, hữu hiệu cho người

dùng càng ngày khó tính như hiện nay Trong đó yêu cầu về dễ sử dụng, trực

quan, tiết kiệm bộ nhớ, dung lượng và cả thời gian của người sử dụng đối với

phần mềm là một yêu cầu khá quan trọng đòi hỏi nhà phát triển phần mềm đặc

biệt lưu ý

Silverlight là một trong những công nghệ ra đời nhằm hỗ trợ xây dựng

ứng dụng đa phương tiện tương thích trên mọi trình duyệt và hệ điều hành

Với tính năng mới của mình, Siverlight có thể cạnh tranh hoặc thay thế các

công nghệ trước đó Asp.net MVC là một framework phát triển ứng dụng web

mới do Microsoft cung cấp, nó kết hợp giữa tính hiệu quả và nhỏ gọn của mô

hình MVC, những ý tưởng và công nghệ hiện đại nhất, cùng với những thành

phần tốt nhất của nền tảng Asp.net hiện thời Và sự kết hợp giữa 2 công nghệ

Silverlight và Asp.net MVC 3 là một sự kết hợp mới và độc đáo, nó hỗ trợ lẫn

nhau giữa hạ tầng quản lý code và giao diện

Một trang web xây dựng và thiết kế nhà ở 3D là một ứng dụng ít phổ biến

hiện nay đối với những người sử dụng internet ở nước ta hiện nay Với mục

đích xây dựng một trang web thiết kế nhà ở nhằm mang đến tính đa phương

tiện, đa dạng hoá các tiện ích mạng và để cho mọi người có thể dễ dang sử

dụng, thiết kế những ý tưởng của riêng mình về một ngôi nhà mơ ước của

mình Chính vì lý do đó mà chúng em chọn đề tài “Xây dựng và thiết kế nhà ở

3D bằng Siverlight và Asp.net MVC 3” để làm khoá luận tốt nghiệp với mục

tiêu tạo ra sự khác biệt so với các sản phẩm phần mềm trên thị trường

Trang 3

II Xây Dựng Website Thiết Kế Nhà Ở 3D Bằng Công Nghệ Silverlight Và Asp.Net Mvc 3

LỜI CẢM ƠN

Lời đầu tiên, chúng em xin chân thành cảm ơn Ban giám hiệu, quý

Thầy Cô của trường Đại Học Công Nghệ Thông Tin, đặc biệt là các thầy cô

trong Khoa Công Nghệ Phần Mềm đã tận tình giảng dạy, hết lòng truyền đạt

kiến thức, kinh nghiệm quý báo cho chúng em trong suốt thời gian qua

Trong suốt quá trình thực hiện và hoàn thành luận văn, chúng em luôn

được sự quan tâm giúp đỡ tận tình của các thầy hướng dẫn Chúng em xin

chân thành bày tỏ sự biết ơn sâu sắc đến thầy Thạc sĩ Phạm Thi Vương và thầy

Nguyễn Hữu Thương – Khoa công nghệ phần mềm đã tận tình và giúp đỡ

chúng em trong quá trình thực hiện đề tài

Lời cảm ơn sau cùng, chúng em xin dành cho gia đình, bạn bè đã động

viên và tạo mọi điều kiện thuận lợi nhất để chúng em có thể thực hiện tốt đề

tài này

Chúng em xin chân thành cảm ơn!

TP HCM, ngày 20 tháng 06 năm 2012

Nhóm thực hiện Nguyễn Anh Khoa - Lê Xuân Tùng

Trang 4

III Xây Dựng Website Thiết Kế Nhà Ở 3D Bằng Công Nghệ Silverlight Và Asp.Net Mvc 3

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

Trang 5

IV Xây Dựng Website Thiết Kế Nhà Ở 3D Bằng Công Nghệ Silverlight Và Asp.Net Mvc 3

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

Trang 6

V Xây Dựng Website Thiết Kế Nhà Ở 3D Bằng Công Nghệ Silverlight Và Asp.Net Mvc 3

MỤC LỤC LỜI MỞ ĐẦU I LỜI CẢM ƠN II NHẬN XÉT III (Của giảng viên hướng dẫn) III NHẬN XÉT IV (Của giảng viên phản biện) IV MỤC LỤC V DANH MỤC BẢNG BIỂU XI DANH MỤC HÌNH VẼ XIII CHƯƠNG 1 TỔNG QUAN 1

1.1 Đặt vấn đề 1

1.2 Mục tiêu đề tài 3

1.3 Phạm vi đề tài 4

1.4 Nội dung thực hiện 4

CHƯƠNG 2 Công nghệ Silverlight, XNA, ASP.NET MVC3, LinQ 5

2.1 Công nghệ Silverlight 5

2.1.1 Giới thiệu: 5

2.1.2 Các phiên bản Silverlight 6

2.1.3 Những tính năng trong Silverlight 8

2.1.4 Kiến trúc 10

2.1.5 Giới thiệu các thành phần silverlight được sử dụng trong đề tài 11 2.2 Tổng quan về XNA Game Studio 13

2.2.1 Giới thiệu 13

2.2.2 Các phiên bản XNAGame Studio 13

2.2.3 Đặc điểm 14

Trang 7

VI Xây Dựng Website Thiết Kế Nhà Ở 3D Bằng Công Nghệ Silverlight Và Asp.Net Mvc 3

2.3 Công nghệ ASP.NET MVC 15

2.3.1 Mô hình MVC cơ bản 15

2.3.2 Một vài đặc tính của ASP.NET MVC 17

2.3.3 Sự khác biệt so với Web Form 18

2.3.4 Những điểm mới trong MVC 3 20

2.3.4.1 Công cụ xem Razor (The Razor View Engine) 20

2.3.4.2 Hỗ trợ đa View Engines (Support for Multiple View Engines) 21

2.3.4.3 Những cải tiến Controller 22

2.3.4.4 JavaScript và Ajax 23

2.3.4.5 Model Validation Imporvements 25

2.3.4.6 Dependency Injection Imporvements 26

2.3.4.7 Các tính năng mới khác (Other New Features) 27

2.3.5 Quá trình thực thi một ứng dụng nền web ASP.NET MVC 29

2.3.6 Kết luận 31

2.4 LINQ TO SQL 31

2.4.1 Linq to SQL là gì? 31

2.4.2 Mô hình hóa CSDL dùng Linq to SQL 31

2.4.3 Tìm hiểu lớp DataContext 33

2.4.4 Các ví dụ Linq to SQL 34

2.4.5 Tổng kết 37

CHƯƠNG 3 Tổng quan về đồ họa 3D 38

3.1 Silverlight và đồ họa 3D 38

3.1.1 Tổng quan 38

3.1.2 Hệ trục tọa độ 3D 40

3.1.3 Ma trận 41

3.1.4 Tạo một lớp Camera 42

3.1.6 Primitives 45

Trang 8

VII Xây Dựng Website Thiết Kế Nhà Ở 3D Bằng Công Nghệ Silverlight Và Asp.Net Mvc 3

3.1.5 Vẽ Texture 49

3.1.7 Giới thiệu HLSL 52

3.1.7.1 Vector Shader 52

3.1.7.2 Pixel Shader 52

3.1.8 DrawingSurface và Draw 53

3.1.9 Các bước cơ bản để kết xuất đồ họa 3D 55

3.2 Kiến thức toán học áp dụng 56

3.2.1 Khoảng cách giữa 2 điểm trong không gian 56

3.2.2 Khoảng cách từ một điểm tới mặt phẳng 57

3.2.3 Điểm nằm trong hình Bình Hình Hành 57

3.2.4 Hai Vector cùng hướng 57

3.2.5 Phương trình đường thẳng cắt mặt phẳng 58

3.3 Click chọn đối tượng trong không gian 3D 59

CHƯƠNG 4 PHÂN TÍCH THIẾT KẾ ỨNG DỤNG HỆ THỐNG 61

4.1 Mô hình hoá yêu cầu chức năng 61

4.1.1 Danh sách các Actor 61

4.1.2 Sơ đồ Usecase: 62

4.1.3 Danh sách các Usecase chính của hệ thống 63

4.1.4 Phân loại usecase của từng chức năng tương ứng với Actor 64

4.2 Phân tích dữ liệu hệ thống 67

4.2.1 Thiết kế dữ liệu trong website 67

4.2.2 Thiết kế dữ liệu trong Silverligh 71

4.3 Thiết kế nhà ở 3D 78

4.3.1 Xây dựng đối tượng 3D trong không gian 78

4.3.2 Click và di chuyển đối tượng trong không gian 78

4.3.2.1 Ray Object 79

4.3.2.2 Đối tượng nào sẽ được chọn? 81

Trang 9

VIII Xây Dựng Website Thiết Kế Nhà Ở 3D Bằng Công Nghệ Silverlight Và Asp.Net Mvc 3

4.3.2.3 Di chuyển đối tượng trong không gian? 82

4.4 Giao diện chương trình 83

CHƯƠNG 5 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 91

PHỤ LỤC 93

Trang 10

IX Xây Dựng Website Thiết Kế Nhà Ở 3D Bằng Công Nghệ Silverlight Và Asp.Net Mvc 3

KÝ HIỆU CÁC CỤM TỪ VIẾT TẮT

MVC Model View Controller

Mô hình lập trình ba lớp Model, View, Controller đƣợc sử dụng trong nhiều framework lập trình web trong đó có ASP.NET MVC, ZEND , J2EE…

LinQ .Net Language Intergrated

Query Ngôn ngữ truy vấn tích hợp NET IIS Internet Information Server Máy chủ thông tin mạng

DOM Document Object Model Định nghĩa tập các đối tƣợng chuẩn cho

tất cả tài liệu có cấu trúc URL Uniform Resource Locator Địa chỉ website

XML Extensible Markup

Language

XAML Extensible Application

Markup Language JSON JavaScript Object Notation

POX Premature Oxidation

DLL Dynamic Language

Runtime

WCF Windows Commucation

Foundation

Trang 11

X Xây Dựng Website Thiết Kế Nhà Ở 3D Bằng Công Nghệ Silverlight Và Asp.Net Mvc 3

HTTP Hypertext Transper

Protocal SDK Software Development Kit

WPF Windows Presentation

Foundation CSS Cascading Style Sheets

CLR Common Language

Runtime

AJAX Asynchronous Javascript

and XML API Application Programming

Interface

Trang 12

XI Xây Dựng Website Thiết Kế Nhà Ở 3D Bằng Công Nghệ Silverlight Và Asp.Net Mvc 3

DANH MỤC BẢNG BIỂU Bảng 2.1.4 Bảng mô tả nền tảng Silverlight 10

Bảng 2.3.3 So sánh giữa Asp.Net 2.0 và Asp.Net Mvc 20

Bảng 2.3.5 Bảng liệt kê giai đoạn thực thi của Asp.Net Mvc 31

Bảng 3.1.1 Thư viện đồ hoạ XNA 39

Bảng 3.1.4 Các tham số của Matrix.CreateLookAt 43

Bảng 3.1.5 Các tham số trong Matrix.CreatePerspectiveFieldOfView 44

Bảng 3.1.6 Định nghĩa các thuộc tính của XNA 46

Bảng 3.1.7 Silverlight 3D graphics 48

Bảng 4.1.1 Bảng mô tả các Actor 61

Bảng 4.1.2 Bảng mô tả các chức năng chính 61

Bảng 4.1.3 Danh sách usecase chính của hệ thống 63

Bảng 4.1.4 Phân loại usecase của từng chức năng tương ứng với Actor 65

Bảng 4.2.1.2 Bảng mô tả dữ liệu Account 68

Bảng 4.2.1.3 Bảng mô tả dữ liệu của Design 69

Bảng 4.2.1.4 Bảng mô tả dữ liệu của DesginChanged 69

Bảng 4.2.1.5 Bảng mô tả dữ liệu của Comment 70

Bảng 4.2.1.6 Bảng mô tả dữ liệu của DetailComment 70

Bảng 4.2.1.2 Bảng mô tả dữ liệu của House 71

Bảng 4.2.1.3 Bảng mô tả dữ liệu của DetailSizeHouse 72

Bảng 4.2.1.4 Bảng mô tả dữ liệu của DetailHouse 72

Trang 13

XII Xây Dựng Website Thiết Kế Nhà Ở 3D Bằng Công Nghệ Silverlight Và Asp.Net Mvc 3

Bảng 4.2.1.5 Bảng mô tả dữ liệu của DetailWindow 73

Bảng 4.2.1.6 Bảng mô tả dữ liệu của WindowColor 73

Bảng 4.2.1.7 Bảng mô tả dữ liệu của Window 74

Bảng 4.2.1.8 Bảng mô tả dữ liệu của DetailDoor 74

Bảng 4.2.1.9 Bảng mô tả dữ liệu của WindowsColor 75

Bảng 4.2.1.10 Bảng mô tả dữ liệu của Door 75

Bảng 4.2.1.11 Bảng mô tả dữ liệu của WallInHouse 76

Bảng 4.2.1.12 Bảng mô tả dữ liệu của Wall 76

Bảng 4.2.1.12 Bảng mô tả dữ liệu của BrickColor 77

Bảng 4.2.1.13 Bảng mô tả dữ liệu của Brick 77

Trang 14

XIII Xây Dựng Website Thiết Kế Nhà Ở 3D Bằng Công Nghệ Silverlight Và Asp.Net Mvc 3

DANH MỤC HÌNH VẼ Hình 2.1.4 Kiến trúc Silverlight 11

Hình 2.1.5 Các Control trong Silverlight 12

Hình 2.3.1 Mô hình MVC cơ bản 17

Hình 2.3.4 Asp.Net MVC 3 20

Hình 2.4.2 Mô hình LINQ to SQL 32

Hình 2.4.3 Mô hình NorthwindDataContext 34

Hình 2.4.4 Hình minh họa lấy sản phẩm từ CSDL với LINQ 34

Hình 2.4.5 Hình minh họa cập nhật sản phẩm từ CSDL với LINQ 35

Hình 2.4.6 Chèn sản phẩm mới vào CSDL 35

Hình 2.4.7 Xóa một sản phẩm 36

Hình 2.4.8 Gọi một thủ tục 36

Hình 2.4.9 Lấy các sản phẩm và phân trang 37

Hình 3.1.2 Hệ thống tọa độ bàn tay phải 40

Hình 3.1.3 Vật thể trong không gian 41

Hình 3.1.5 Vùng Camera có thể nhìn thấy 45

Hình 3.1.6 Một khối hộp đƣợc tạo thành từ nhiều tam giác 47

Hình 3.1.7 Đối tƣợng 3D đƣợc tạo ra từ nhiều tam giác nhỏ ghép lại 49

Hình 3.1.6 Tọa độ của Texture 50

Hình 3.1.7.2 Shader chuyển đối tƣợng trong không gian 3Dthành không gian màn hình 53

Hình 3.2.3 Hình bình hành chứa 1 điểm M 57

Trang 15

XIV Xây Dựng Website Thiết Kế Nhà Ở 3D Bằng Công Nghệ Silverlight Và Asp.Net Mvc 3

Hình 4.1.1 Danh sách các actor 61

Hình 4.1.2 Sơ đồ usecase tổng quát 62

Hình 4.1.4.1 Sơ đồ usecase của User Management 65

Hình 4.1.4.2 Sơ đồ usecase của Customers 66

Hình 4.1.4.3 Sơ đồ usecase của Guests 66

Hình 4.2.1.1 Sơ đồ dữ liệu của Asp.Net Mvc 67

Hình 4.2.2.1 Sơ đồ dữ liệu của Silverlight 71

Hình 4.3.1 Đối tượng 3D trong không gian 78

Hình 4.3.2 Hình đối tượng 3D trong không gian nhà ở 79

Hình 4.3.2.1 a) Hình ảnh được hiển thị bởi camera2 79

Hình 4.3.2.2 b) Hình ảnh đường thẳng cắt mặt phẳng 80

Hình 4.3.2.2 Hình ảnh 2 đối tượng trước và sau 81

Hình 4.3.2.3 a) Di chuyển đối tượng trong không gian 82

Hình 4.3.2.3 b) Di chuyển đối tượng đồng hồ trong không gian 82

Hình 4.4.1 Màn hình thiết kế căn nhà 83

Hình 4.4.2 Màn hình nhìn vào bên trong ngôi nhà 84

Hình 4.4.3 Màn hình kéo thả items 84

Hình 4.4.4 Màn hình giao diện chính website (phía trên) 85

Hình 4.4.5 Màn hình giao diện chính website(phía dưới) 86

Hình 4.4.6 Màn hình đăng kí thành viên 87

Hình 4.4.7 Màn hình đăng nhập 87

Trang 16

XV Xây Dựng Website Thiết Kế Nhà Ở 3D Bằng Công Nghệ Silverlight Và Asp.Net Mvc 3

Hình 4.4.8 Màn hình thiết kế cấu trúc phòng ốc bên trong ngôi nhà 88

Hình 4.4.9 Màn hình giao diện thiết kế nhà ở trên website 89

Hình 4.4.10 Màn hình giao diện thiết kế bên trong trên website 89

Hình 4.4.11 Màn hình giao diện thiết kế bên ngoài trên website 90

Hình 4.4.12 Màn hình giao diện thiết kế bên ngoài trên website 90

Trang 17

1 Xây Dựng Website Thiết Kế Nhà Ở 3D Bằng Công Nghệ Silverlight Và Asp.Net Mvc 3

1.1 Đặt vấn đề

Con người và xã hội đã trải qua quá trình hình thành và phát triển qua 5

thời kì từ thời kì đồ đá -> thời kì đồ đồng -> thời kì đồ sắt -> thời kì cách

mạng công nghiệp -> thời kì công nghệ kĩ thuật (hiện nay) Các thời kì này

đều dựa vào phương tiện sản xuất để nói lên đặc điểm nổi bật của từng thời kì

và thời kì hiện nay là thời kì công nghệ kĩ thuật khoa học với phương tiện sản

xuất là máy móc cơ khí, máy tính, internet…Vào ngày 19/11/1997, là ngày

đầu Việt Nam được hoà mạng internet toàn cầu, với sự phát triển bùng nổ của

cuộc cách mạng internet đã và đang làm thay đổi quá trình hoạt động sản xuất

và phát triển kinh tế Việt Nam Từ sau ngày gia nhập WTO (11-1-2007), nền

kinh tế nước ta phát triển trên mọi lĩnh vực, trong đó ngành công nghệ thông

tin được nước ta ưu tiên mũi nhọn hàng đầu trong công cuộc phát triển đưa đất

nước ta thành đất nước công nghiệp vào năm 2020, với mục tiêu tin học hoá

trong tất cả mọi lĩnh vực

Có thể nói sự ra đời của máy tính điện tử và mạng internet đã đánh dấu

một bước phát triển vượt bậc trong kỷ nguyên phát triển của xã hội loài người

Với sự trợ giúp đắc lực của công nghệ cao, con người có thể làm nên những

điều kì diệu mà xưa kia chỉ tồn tại trong tưởng tượng, mà giờ đây con người

có thể thoã sức sáng tạo và phát minh những điều kì diệu hơn nữa Hiện nay,

bình quân mỗi gia đình đều có một chiếc máy vi tính có kết nối mạng internet

để phục vụ cho học tập, giải trí và cả thương mại là điều quá đỗi bình thường

chứ không phải là cái gì xa xỉ nữa; nắm bắt được xu thế tất yếu đó, các nhà

phát triển phần mềm cũng không ngừng làm việc và sáng tạo để cho ra đời các

ứng dụng phần mềm phục vụ ngày càng đắc lực, hiệu quả hơn nhằm giúp mọi

người có thể tiếp thu và từ đó sáng tạo ra những ý tưởng của riêng mình Hầu

hết các phần mêm ứng dụng destop – Desktop Apps hiện nay có nhược điểm

là kén chọn cấu hình và hệ điều hành, trong khi đó xu thế internet hoá như

hiện nay thì đa số các nhà phát triển phần mềm đều phát triển theo xu hướng

internet hoá các sản phẩm phần mềm – Web Apps; vì với một ứng dụng online

Trang 18

thì dù bạn ở nơi đâu, dùng máy tính nào đi nữa, chỉ cần máy tính bạn có kết

nối internet và cài đặt trước các plugin thì bạn có thể yên tâm sử dụng mà

không cần bận tâm về bất cứ vấn đề gì

Công nghệ khoa học phát triển dẫn đến kinh tế đất nước phát triển và

dẫn đến đời sống con người cũng phát triển theo Cái ăn, cái mặc luôn là nhu

cầu tất yếu của đời sống con người, con người luôn cố gắng tìm tòi phát minh

cốt yếu để nâng cao giá trị, chất lượng đời sống của xã hội con người và không

thể không nhắc đến một nhu cầu tất yếu, hết sức quan trọng đó là nhu cầu về

nhà ở Từ xưa ông bà ta đã dạy cho con cháu câu thành ngữ “An cư lạc

nghiệp” ý nói là ổn định nơi ăn chốn ở rồi mới có thể làm việc thành công

được và ý thức này đã tồn tại trong tâm thức qua bao thế hệ con người Việt

Nam Và mỗi người luôn có cái tôi, cái cá tính của mình; vì thế yêu cầu về tính

thẩm mỹ, mỹ quan, kiến trúc về nhà ở của họ cũng độc đáo, đa dạng, phong

phú hơn Để đáp ứng nhu cầu đó, nhóm chúng em đi đến quyết định chọn và

thực hiện đề tài: “Xây Dựng Website Thiết Kế Nhà Ở 3D Bằng Silverlight

và ASP.NET MVC 3”

Sự ra đời của công cụ thiết kế nhà ở 3D hoạt động trên nền web với khả năng trực quan 3D mạnh mẽ, ưu việt, có lẽ là điều mà người dùng

mong muốn tự bản thân mình thiết kế và dựng lên hình ảnh sinh động ngôi

nhà của mình Người dùng cũng không còn lo lắng, đắn đo suy nghĩ là mình

nên chọn phần mềm thiết kế nhà nào đó để cài đặt vào máy, chỉ cần kết nối

internet là xong và người dùng có thể vọc, tìm hiểu chức năng về trang

website thiết kế nhà ở tiện dụng này Thêm nữa, ứng dụng được xây dựng dữa

trên công nghệ Silverlight là một trong những công nghệ hiện đại nhất hiện

nay, đã hỗ trợ 3D và công nghệ Asp.net Mvc 3 là một framework phát triển

ứng dụng web mới do Microsoft cung cấp, nó kết hợp giữa tính hiệu quả và

nhỏ gọn của mô hình MVC Và sự kết hợp giữa 2 công nghệ Silverlight và

Asp.net MVC 3 là một sự kết hợp mới và độc đáo, nó hỗ trợ lẫn nhau giữa hạ

tầng quản lý code và giao diện và đó cũng là điểm khác biệt nổi bật so với các

sản phẩm phần mềm khác

Trang 19

1.2 Mục tiêu đề tài

Hiện nay công nghệ thông tin đã len lỏi vào từng ngôi nhà ngỏ ngách,

chỉ cần ngồi một nơi chúng ta vào web là có thể tới bất cứ nơi đâu Đồng thời

với sự ra đời của công nghệ silverlight, cho phép chúng ta thiết kế xây dựng

đồ họa 3D Điều này đã tạo ra một cơ hội cho nhóm chúng em chọn đề tài Xây

dựng nhà 3D mà mọi người dân có thể truy cập dễ dàng mọi nơi để người dân

dễ dàng xây dựng cho mình ngôi nhà ưng ý hơn, có cái hình dung về ngôi nhà

trong tương lai như thế nào

Mục tiêu đề tài là xây dựng trang web mà ở đó người dùng có thể đăng

kí thành viên trang web để có thể sử dụng các chức năng trong trang web,

chẳng hạn như đăng kí làm thành viên của trang web, chỉnh sữa trang cá

nhân(bao gồm thông tin về bản thân), thành viên có quyền thiết kế căn nhà ở

của riêng mình Bên cạnh đó người dùng còn có thể thao tác và chỉnh sửa bản

thiết kế mà mình đã làm, để tạo ra tác phẩm cuối cùng ưng ý nhất của minh

Về phần thiết kế nhà ở 3D thì thành viên có thể tuỳ chọn kích thước ngôi nhà,

màu sắc ngôi nhà và có thể tuỳ chọn những items chẳng hạn như cửa chính,

cửa sổ, bàn, ghế, đèn… để trang trí cho ngôi nhà của mình và chỉ cần kéo thả

là có thể thiết kế một cách dễ dàng

Nhìn chung, tất cả những tính năng thiết kế nhà ở trên có thể tìm thấy ở

tất cả các ứng dụng phần mềm hỗ trợ thiết kế nhà ở hiện nay – như Sweet

Home 3D, CyberMotion 3D Designer, My Home Designer, 3D Home

Architect Design Deluxe, và Autodesk Chính vì vậy mục tiêu quan trọng

trong việc thực hiện đồ án mà nhóm hướng đến là ứng dụng phải được triển

khai trên nền web Để từ đó mà mọi người có thể chia sè và học hỏi những ý

tưởng sáng tạo thiết kế kiến trúc nhà ở lẫn nhau, tạo một môi trường năng

động và sáng tạo cùng chia sẻ ý tưởng giúp mọi người hoàn thiện hơn kiến

thức thẩm mỹ và khoa học kiến trúc nhà cửa; bên cạnh đó cũng tạo một môi

trường mang tính thương mại sản phẩm đối với các kiến trúc sư có nhu cầu

marketing sản phẩm của mình

Trang 20

1.3 Phạm vi đề tài

Hệ thống ứng dụng được xây dựng nhằm tạo một môi trường thiết kế

nhà của ở mức cơ bản cho người sử dụng

1.4 Nội dung thực hiện

Mục tiêu của đề tài nhằm nghiên cứu, tìm hiểu công nghệ Silverlight

3D, kết hợp với ASP.NET MVC3 và xây dựng chương trình thiết kế nhà 3D

Nội dung chính của đề tài bao gồm:

 Nghiên cứu công nghệ và các kỹ thuật để phát triển ứng dụng

 Xây dựng kiến trúc chương trình theo mô hình Model – View -

Controller

 Tầng hiển thị giao diện cho người dùng (View)

 Tầng thao tác với cơ sở dữ liệu (Model)

 Tầng điều chuyển các request từ client (Controller)

 Asp.net Mvc 3

 Quản lý việc đăng kí/đăng nhập thành viên của website

 Quản lý hồ sơ thông tin của thành viên

 Quản lý các bản thiết kế của các thành viên

 Silverlight

 Chọn kích thước căn nhà(có thể chọn tỉ lệ độ dài, rộng hoặc có

thể rê chuột vẽ kích thước căn nhà)

 Có thể xoay căn nhà theo nhiều hướng (hướng Đông, Tây, Nam,

Bắc)

 Vẽ những bức tường trong căn nhà (vách ngăn từng phòng)

 Thêm/xoá các items như cửa sổ, cửa chính, bàn, ghế…

 Tuỳ chọn màu sắc bức tường cho ngôi nhà

Trang 21

CHƯƠNG 2 Công nghệ Silverlight, XNA, ASP.NET MVC3, LinQ

2.1 Công nghệ Silverlight

2.1.1 Giới thiệu:

Silverlight là một dạng plug-in dựa trên công nghệ của Microsoft.Net,

nó độc lập với đa nền tảng, đa trình duyệt để xây dựng và cung cấp các thế hệ

trải nghiệm truyền thông tiếp theo và các ứng dụng tương tác phong phú cho

web (RIA – Rich Interactive applications) Silverlight chạy trên tất cả trình

duyệt phổ biến nhất bao gồm IE, Firefox, Safari, Opera và trên trên nhiều hệ

điều hành khách nhau như Window, Linux, Mac OS X, Symbian OS, Window

Phone 7 Plugin cần thiết để chạy Silverlight rất nhỏ dễ dàng cài đặt thành

công

Tạo ra các ứng dụng Silverlight chạy bên ngoài trình duyệt trên máy

tính để bàn Sử dụng Framework Silverlight để tạo ứng dụng cho Windows

Phone Silverlight cung cấp một nền tảng giao diện đồ họa giống như WPF

(Windows Presentation Foundation) Silverlight thực sự là một tập hợp con

của WPF Silverlight sử dụng ứng dụng Extensible Markup Language (XML)

để dễ dàng phát triển giao diện người dùng (ví dụ như điều khiển, hình ảnh

động, đồ họa, layout…) trong khi sử dụng mã quản lý hoặc các ngôn ngữ động

cho các ứng dụng logic Bên cạnh đó Silverlight cung cấp một mô hình lập

trình mềm dẻo và đồng nhất, nó hỗ trợ Ajax, Python, Ruby và các ngôn ngữ

lập trình Net như Visual Basic, C#

Windows Presentation Foundation (WPF) là một hệ thống phụ đồ họa

sử dụng DirectX để vẽ giao diện người dùng trong ứng dụng trên nền

Windows Mặt khác, Silverlight thực sự là một tập con của WPF, và trước đây

là Silverlight có tên mã là WPF / E (WPF / Everywhere) bởi vì nó được coi là

phiên bản nền tảng của WPF Và trong khi WPF tập trung vào phát triển máy

tính để bàn, Silverlight tập trung vào phát triển Web

Silverlight có thể tạo ra được những ứng dụng có tính năng linh hoạt

tương tác cao trên môi trường web Được hơn 100.000 doanh nghiệp trên toàn

Trang 22

thế giời sử dụng và hơn 4.000.000 phát triển ứng dụng web tin dùng và phát

triển tích hợp vào những ứng dụng của họ Cộng thêm môi trường phát triển

cực kỳ mạnh mẽ

2.1.2 Các phiên bản Silverlight

Hiện tại cho tới giờ Silverlight đã được phát hành với 5 phiên bản chính thức:

Silverlight 1.0 được phát hành vào năm 2007, dưới tên mã là Windows

Presentation Foundation / Everywhere (WPF/E), bao gồm core presentation

framework Chịu trách nhiệm điều khiển giao diện người dùng, tương tác với

dữ liệu đầu vào, đồ họa, hiệu ứng hoạt ảnh, khả năng đa phương tiện

Ở phiên bản Silverlight 1.0 cung cấp cho ta duy nhất một mô hình lập trình là

Javascript API Trong một chương trình silverlight nhúng theo kiểu Javascript

API, nó tải chỉ một trang XAML đơn lẻ thay vì tải một gói ứng dụng Trang

XAML này có thể bao gồm các tham chiều URI từ những nguồn bên máy chủ

khác như là các đoạn video và hình ảnh Silverlight sử dụng XAML để tạo

một cây đối tượng mà ta có thể thao tác lập trình với javascript lưu trữ bên

trong một trang HTML Không có ngôn ngữ quản lí nào được hỗ trợ trong

Silverlight 1.0, điều này cũng có nghĩa là không có Base Class Library nào

cho Silverlight 1.0

Silverlight 2.0 - Ngày 13 tháng 10 năm 2008, Microsoft đã giới thiệu

phiên bản thứ 2 của Silverlight – một trong những giải pháp toàn diện nhất để

trải nghiệm sức mạnh của truyền thông đa phương tiện và phát triển các ứng

dụng dành cho web Đây là phiên bản hỗ trợ quản lí code, hỗ trợ ngôn ngữ lập

trình NET như C#, VB.NET để viết các hàm xử lý dữ liệu hoặc thao tác trên

các thành phần giao diện người dùng Silverlight 2 dựa trên nền tảng NET

Framework 3.5

Bên cạnh đó Silverligh 2.0 sử dụng mô hình lập trình code-behind thân

thuộc đã được sử dụng trong Windows Forms, ASP.NET, và WPF Ngôn ngữ

đánh dấu XAML cũng như code được biên dịnh vào các assemblies Net mà

Trang 23

sau đó dược nén bằng cách sử dụng ZIP và được lưu trữ trong trong một tập

tin xap Trong phiên bản này, Silverlight có thư viện riêng như là 1 tập con

trong các lớp cơ bản của Net Framework, bao gồm control, các thành phần,

hỗ trợ cho Web Services và các tính năng LINQ API Phiên bản này cũng

cung cấp bảo mật không thể truy cập nền tảng Silverlight API từ bên ngoài

Broadcasting Convention) 2008, Amsterdam, Hà Lan, vào ngày 12/09/2008

Nhưng nó chỉ thực sự được công bố vào ngày 18/03/2009 tại MIX09, Las

Vegas, Hoa Kỳ Đây là phần mở rộng cho Silverlight 2.0, chủ yếu là cung cấp

các cải tiến trong khả năng đồ họa, quản lý phương tiện truyền thông, các

vùng phát triển ứng dụng, và được tính hợp trong công cụ Expression Blend 3

Silverlight 4.0 - Ngày 18/11/2009, tại hội nghị các nhà lập trình chuyên

nghiệp (Professional Developers Conference) Los Angeles, Hoa Kỳ;

Microsoft đã công bố bản Beta của Silverlight 4 Phiên bản chính thức được

phát hành vào ngày 15/04/2010, cùng với công cụ phát triển Silverlight 4 cho

các nhà phát triển Phiên bản này bổ sung thêm những dịch vụ RIA mới đã

được thực thi cũng như những tính năng đầy mạnh mẽ như truy xuất file cục

bộ, các tài nguyên COM, tính năng chạy các ứng dụng Silverlight trên desktop

mà không cần trình duyệt (out-of-browser)

Silverlight 5.0 – Ngày 02/12/2010 tại sự kiện Silverlight Firestarter,

Silverlight 5 beta được công bố sẽ phát hành vào ngày 1 giữa năm 2011 Phiên

bản chính thức được lên kế hoạch vào cuối năm 2011

Các tính năng mới trong Silverlight 5 bao gồm:

 Hỗ trợ GPU tăng tốc giải mã video

 Hỗ trợ đồ họa 3D (không nên nhầm lẫn với 3D nổi)

 Tốc độ biến playback của nội dung phương tiện truyền thông với tự

động điều chỉnh cường độ âm thanh

Trang 24

 Nâng cao khả năng nhận biết

 Hiển thị văn bản cải thiện rõ nét

Các nhà phát triển có thể debug biểu liên kết dữ liệu, đặt điểm ngắt vào

các liên kết

2.1.3 Những tính năng trong Silverlight

Silverlight kết hợp nhiều công nghệ vào một nền tảng phát triển, nó cho

phép bạn được lựa chọn nhiều công cụ và ngôn ngữ lập trình thích hợp để giải

quết bài toán của bạn Silverlight cung cấp các tính năng sau:

Sự kết hợp của WPF và XAML cho phép bạn tạo ra đồ họa 3 chiều, hình

ảnh động, đa phương tiện và nhiều tính năng phong phú khác trên máy khách

XAML (Extensible Application Markup Language) cung cấp các cú pháp

đánh dấu đăc trưng cho việc tạo ra các element

Mở rộng cho ngôn ngữ kịch bản (Javascript) ở một số trình duyệt phổ

biến để thực hiện việc trình bày giao diện và thao tác người dùng một cách

phong phú hơn

Sự tích hợp với các ứng dụng đã có Silverlight tích hợp liền mạch với

ngôn ngữ javascript và mã Ajax của ASP.Net để tương tác với tài nguyên trên

nền máy chủ đó mà không làm gián đoạn người dùng

Sử dụng mô hình ngôn ngữ lập trình trên nền tảng Net Framework và

các công cụ để kết hợp để tạo các ứng dụng trên nền tảng Silverlight

Trang 25

Hỗ trợ mạng: Silverlight bao gồm các hỗ trợ cho HTTP qua TCP có thể

kết nối với các dịch vụ của WCF, SOAP, hoặc là ASP.Net Ajax và nhận về

các định dạng theo cấu trúc XML, JSON, hay dữ liệu RSS

Hỗ trợ ngôn ngữ tích hợp truy vấn (LINQ) cho phép truy cập dữ liệu

bằng cách sử dụng cú pháp trực quan tự nhiên và mạnh mẽ, được gõ bởi các

đối tượng có trong các ngôn ngữ Net Framework

 Bên cạnh đó còn có tính năng đặc biệt hơn:

Hỗ trợ 3D Graphics, Silverlight 3 cho phép các nhà phát triển và thiết

kế áp dụng nội dung tới một mặt phẳng 3D Người dùng có thể xoay hoặc kéo

giãn nội dung trực tiếp trong không gian mà không cần viết bất kỳ mã bổ

sung Silverlight 5 cho phép sử dụng 3D bằng cách tích hợp XNA API có trên

Windows Đây là một trong những tính năng mới nhất trong Silverlight 5 GPU

đầy đủ đồ họa 3D được đẩy mạnh bằng cách sử dụng framework XNA Sự kết

hợp của Silverlight và XNA sẽ cho phép một lớp hoàn toàn mới của ứng dụng

3D chạy trực tiếp từ web, bao gồm các ứng dụng trong các lĩnh vực như khoa

học, kỹ thuật, tiếp thị sản phẩm, kinh doanh và các lĩnh vực không gian

Trang 26

2.1.4 Kiến trúc

Nền tảng Silverlight như một tổng thể bao gồm hai phần chính, thêm bộ

cài đặt và thành phần cập nhật như được mô tả trong bảng sau:

Cài đặt và cập nhật Là thành phần để xử lý các tiến trình cài đặt làm sao để

đơn giản hóa cho lần cài đặt đầu tiên, tiếp sau đó chỉ cung cấp cơ chế tự động cập nhật và tương tác ở mức thấp

Bảng 2.1.4 Bảng mô tả nền tảng Silverlight

Dưới đây là hình ảnh mô tả những thành phần trong kiến trúc của

Silverlight cùng với các thành phần và dịch vụ liên quan khác

Trang 27

Hình 2.1.4 Kiến trúc Silverlight

2.1.5 Giới thiệu các thành phần silverlight được sử dụng trong đề tài

Layout: Khi bạn xây dựng ứng dụng Silverlight, một trong những điều bạn

cần làm đầu tiên là sẽ bố trí giao diện đồ họa của bạn như thế nào Silverlight

cung cấp cho bạn 3 kiểu bố trí khác nhau, đó là: Canvas, StackPanel và Grid

 Canvas Panel: là loại layout panel cơ bản hỗ trợ việc đặt vị trí các

control dùng tọa độ cụ thể Đặt các vị trí các thành phần trong một

Canvas dùng một đặc tính có trong XAML cho phép bạn chỉ ra một vị

trí tương đối của nó so với các thuộc tính Left, Top, Right hay Bottom

của đối tượng Canvas chứa nó

 StackPanel: là một dạng panel đơn giản cho phép đặt các thành phần

bên trong theo dòng hay cột, StackPanel hay được dùng khi bạn muốn

sắp xếp chỉ trong một phần của toàn bộ trang

 GridPanel: là layout mềm dẻo nhất, nó cho phép sắp xếp các control

theo dạng bảng bao gồm nhiều dòng và nhiều cột Về tính năng, nó

Trang 28

tương tự như thẻ Table trong HTML Không như table trong HTML,

bạn sẽ không đặt các control trực tiếp trong cột hay dòng, thay vào đó

bạn sẽ chỉ định vị trí dòng hoặc cột bằng cách khai báo ngay bên trong

control <Grid> các thuộc tính <Grid.RowDefinitions> và

<Grid.ColumnDefinitions>

Control

Các Control trong Silverlight cho phép lưu trữ nội dung hoặc các control khác,

bạn có thể tạo hoặc tự thiết kế được các control này để chúng hiển thị được

những thay đổi trạng thái tới người dùng

Trong thanh công cụ phát triển của Expression Blend Preview 5có rất nhiều

các control có sẵn để bạn tạo, thay đổi hoặc xử lý các sự kiện theo chúng

Dưới đây là hình ảnh danh sách các control Silverlight trong thanh công cụ

Hình 2.1.5 Các Control trong Silverlight

Trang 29

Control DrawingSurface là 1 control mới trong Silverlight 5 DrawingSurface

xác định nơi mà đối tượng 3D có thể được compose và render ra Thực hiện

hành động render thông qua sự kiện Draw

2.1.6 Kết luận

Sử dụng Silverlight để xây dựng ứng dụng chạy trên nền trình duyệt với

giao diện xuất sắc, khả năng hỗ trợ video chất lượng cao,cái tùy biến tuyệt vời

và hỗ trợ 3D graphic, kết hợp các công nghệ NET khác điều này giúp cho các

nhà phát triển sáng tạo tốt hơn, xây dựng ứng dụng nhanh hơn, trực quan sinh

động hơn và dễ dàng kiểm thử, bảo trì tốt hơn

2.2 Tổng quan về XNA Game Studio

2.2.1 Giới thiệu

XNA Game Studio là một môi trường lập trình cho phép sử dụng

Visual Studio để tạo ra các game cho Windows Phone, Xbox 360 và máy tính

trên nền Windows XNA Game Studio bao gồm Framework XNA là tập các

thư viện quản lí được thiết kế để phát triển game dựa trên Microsoft Net

Framework 2.0

2.2.2 Các phiên bản XNAGame Studio

XNA Game Studio Express hướng tới những người mới bắt đầu, những

người yêu thích trò chơi và sinh viên Môi trường phát triển ứng dụng trò chơi

trên nền tảng Windows và Xbox 360 một cách nhanh chóng Các phiên bản

beta đầu tiên của XNA Game Studio Express được phát hành và cho tải về

ngày 30/08/2006, theo sau là một phiên bản thứ hai vào ngày 01/11/2006

Microsoft phát hành phiên bản cuối cùng vào ngày 11/12/2006.Ngày

24/04/2007, Microsoft phát hành một bản cập nhật được gọi là XNA Game

Studio Express 1.0 Refresh

XNA Game Studio 2.0 được phát hành vào ngày 13/12/2007 XNA

Game Studio 2.0 tương thích với tất cả các phiên bản của Visual Studio 2005

Trang 30

(bao gồm cả các Visual C# 2005 Express Edition), một network API sử dụng

XboxLive trên cả Windows và Xbox 360 và xử lý thiết bị tốt hơn

XNA Game Studio 3.0 (dành cho Visual Studio 2008 hoặc phiên bản Visual

C# 2008 Express Edition) cho phép các nhà sản xuất game nhắm đến nền tảng

Zune và thêm vào hỗ trợ cộng đồng Xbox Live Bản beta được phát hành vào

tháng 09/2008 Các phiên bản cuối cùng được phát hành vào ngày 30/10/2008

XNA Game Studio 3.1 được phát hành vào ngày 11/06/2009 API bao

gồm hỗ trợ phát lại video, một API chỉnh sửa âm thanh, hệ thống Xbox LIVE

Party vàhỗ trợ cho các trò chơi sử dụng Xbox 360 Avatar

XNA Game Studio 4 được công bố và ban đầu phát hành bản Preview

tại GDC ngày 09/03/2010, và hoàn chỉnh vào ngày 16/09/2010 Bao gồm thêm

hỗ trợ cho nền tảng Windows Phone 7 (như tăng tốc phần cứng 3D), cấu hình

phần cứng, cấu hình hiệu ứng, tích hợp các trạng thái đối tượng, đa nền tảng

và đa cảm ứng, bộ đệm cho microphone và audio playback, và tích hợp trong

Visual Studio 2010

2.2.3 Đặc điểm

Framework XNA là mới nhất trong các thư viện đồ họa được đề cập,

được phát hành đầu tiên vào năm 2007 XNA là một giao diện được xây dựng

dựa trên DirectX SDK do đó XNAcó các chức năng được cung cấp bởi thư

viện này và cung cấp chức năng hướng đối tượng ở mức cao cho trò chơi

Thư viện trong XNA xử dụng khá đơn giản vì XNA là một nền của

.Net được thực hiện theo các lớp và namespace XNA cũng bao gồm các hàm

hỗ trợ và thư viện hoàn toàn tương thích với NET.XNA hỗ trợ trên nền tảng

của Microsoft, nó có thể chạy trên nền NET được cài đặt trên các hệ điều

hành Microsoft Windows XP, Windows Vista và Xbox360, XNA cho phép

lập trình game chạy trên PC + Windows, XBOX360, ZUNE

Trang 31

XNA là rất phổ biến với những người yêu thích lập trình cũng như học

các khái niệm lập trình 2D và 3D, nên rất được nhiều sự hỗ trợ cộng đồng và

hỗ trợ chuyên nghiệp

Kết luận

Lấy ứng dụng từ môi trường học tập, và dựa vào sự đơn giản, lựa chọn

XNA là một sự lụa chọn sáng suốt cho bất cứ ai cần học hoặc dạy Ngôn ngữ

lập trình C# Không chỉ đề cập riêng gì về phát triển game, nó còn là một nền

tảng tuyệt vời cho những sinh viên tin học về việc viêc kết hợp những kiến

thức khác như âm nhạc, nghệ thuật, thiết kế và v.v…

2.3 Công nghệ ASP.NET MVC

2.3.1 Mô hình MVC cơ bản

MVC viết tắt của các chữ cái đầu của Models, Views, Controllers

Mẫu kiến trúc Model – View – Controller được sử dụng nhằm chi ứng

dụng thành ba thành phần chính: model, view và controller Nền tảng

ASP.NET MVC giúp cho chúng ta có thể tạo được các ứng dụng web áp dụng

mô hình MVC thay vì tạo ứng dụng theo mẫu ASP.NET Web Forsm Nền

tảng ASP.NET MVC có đặc điểm nổi bật là nhẹ (lighweigt), dễ kiểm thử phần

giao diện (so với ứng dụng Web Forms), tích hợp các tính năng có sẵn của

ASP.NET Nền tảng ASP.NET MVC được định nghĩa trong namespace

System.Web.Mvc và là một phần của name space System.Web

MVC là một mẫu thiết kế (design pattern) chuẩn mà nhiều lập trình

viên đã quen thuộc Một số loại ứng dụng web sẽ thích hợp với kiến trúc

MVC Một số khác vẫn thích hợp với ASP.NET Web Forms và cơ chế

postbacks Đôi khi có những ứng dụng kết hợp cả hai kiến trúc trên

Models: Các đối tượng Models là một phần của ứng dụng, các đối

tượng này thiết lập logic của phần dữ liệu của ứng dụng Thông thường, các

đối tượng model lấy và lưu trạng thái của model trong CSDL Ví dụ như, một

Trang 32

đối tượng Product (sản phẩm) sẽ lấy dữ liệu từ CSDL, thao tác trên dữ liệu và

sẽ cập nhật dữ liệu trở lại vào bảng Products ở SQL Server

Trong các ứng dụng nhỏ, model thường là chỉ là một khái niệm nhằm

phân biệt hơn là được cài đặt thực thụ, ví dụ, nếu ứng dụng chỉ đọc dữ liệu từ

CSDL và gởi chúng đến view, ứng dụng khong cần phải có tầng model và các

lớp lien quan Trong trường hợp này, dữ liệu được lấy như là một đối tượng

model (hơn là tầng model)

Views: Views là các thành phần dùng để hiển thị giao diện người dùng

(UI) Thông thường, view được tạo dựa vào thông tin dữ liệu model Ví dụ

như, view dùng để cập nhật bảng Products sẽ hiển thị các hộp văn bản,

drop-down list, và các check box dựa trên trạng thái hiện tại của một đối tượng

Product

Controllers: Controller là các thành phần dùng để quản lý tương tác

người dùng, làm việc với model và chọn view để hiển thị giao diện người

dùng Trong một ứng dụng MVC, view chỉ được dùng để hiển thị thông tin,

controller chịu trách nhiệm quản lý và đáp trả nội dung người dùng nhập và

tương tác với người dùng Ví dụ, controller sẽ quản lý các dữ liệu người dùng

gởi lên (query-string values) và gởi các giá trị đó đến model, model sẽ lấy dữ

liệu từ CSDL nhờ vào các giá trị này

Lợi ích của ứng dụng web dựa trên mô hình MVC Nền tảng ASP.NET

MVC mang lại những lợi ích sau:

 Dễ dàng quản lý sự phức tạp của ứng dụng bằng cách chia ứng dụng

thành ba thành phần model, view, controller

 Nó không sử dụng view state hoặc server-based form Điều này tốt cho

những lập trình viên muốn quản lý hết các khía cạnh của một ứng dụng

 Nó sử dụng mẫu Front Controller, mẫu này giúp quản lý các requests

(yêu cầu) chỉ thông qua một Controller Nhờ đó bạn có thể thiết kế một

hạ tầng quản lý định tuyến Để có nhiều thông tin hơn, bạn nên xem

phần Front Controller trên web site MSDN

Trang 33

 Hỗ trợ tốt hơn cho mô hình phát triển ứng dụng hướng kiểm thử

(TDD)

 Nó hỗ trợ tốt cho các ứng dụng được xây dựng bởi những đội có nhiều

lập trình viên và thiết kế mà vẫn quản lý được tính năng của ứng dụng

Hình 2.3.1 Mô hình MVC cơ bản

2.3.2 Một vài đặc tính của ASP.NET MVC

Tách rõ ràng các mối liên quan, mở khả năng test TDD (test driven

developer) Có thể test unit trong ứng dụng mà không cần phải chạy

Controllers cùng với tiến trình của ASP.NET và có thể dùng bất kỳ một unit

testing framework nào như NUnit, MBUnit, MS Test, v.v…

Có khả năng mở rộng, mọi thứ trong MVC được thiết kế cho phép dễ

dàng thay thế/tùy biến ( ví dụ: có thể lựa chọn sử dụng engine view riêng,

routing policy, parameter serialization, v.v…)

Trang 34

Bao gồm một ánh xạ URL mạnh mẽ cho phép xây dựng ứng dụng với

những URL sạch, các URL không cần cs phần mở rộng ( ví dụ: có thể ánh xạ

địa chỉ /Products/Edit/4 để thực hiện hành động “Edit” của lớp điều khiển

ProductControllers hoặc ánh xạ địa chỉ /Blog/SomeTopic để thực hiện hành

động “Display Topic” của lớp điều khiển BlogEngineController )

ASP.NET MVC Framework cũng hỗ trợ những file ASP.NET như

.ASPX ASCX và Master, đánh dấu các tập tin này như một “view template”

(có thể dễ dàng dùng các tính năng của ASP.NET như lồng các trang Master,

<%= %> snippets, mô tả server controls, template, data-binding, localization,

v.v… ) Tuy nhiên sẽ không còn postback và interactive back server và thay

vào đó là interactive end-user tới một Controller class ( không còn viewstate,

page lifecycle )

ASP.NET MVC Framework hỗ trợ đầy đủ các tính năng bảo mật của

ASP.NET như forms/windows authenticate, URL authorization,

membership/roles, output và data caching, session/profile state, configuration

system, provider architecture v.v…

2.3.3 Sự khác biệt so với Web Form

ASP.NET WebForm sử dụng ViewState để quản lý, các trang

ASP.NET đều có lifecycle, postback và dùng các web controls, các events để

thực hiện các hành động cho UI khi có sự tương tác với người dùng nên hầu

hết ASP.NET WebForm xử lý chậm

ASP.NET MVC Framework chia ra thành 3 phần: Models, Views,

Controllers Mọi tương tác của người dùng với Views sẽ thực hiện hành động

trong Controllers, không còn postback, không còn lifecycle hay events nữa

Việc kiểm tra (test ), gỡ lỗi (debug ) với ASP.NET đều phải chạy tất cả

các tiến trình của ASP.NET và mọi sự thay đổi ID của bất kỳ controls nào

cũng ảnh hưởng đến ứng dụng Đối với ASP.NET MVC Framework thì việc

Trang 35

có thể sử dụng các unit test có thể kiểm định khá dễ dàng hoạt động của các

controller

Kiến trúc chương trình Kiến trúc mô hình

WebForrm  Bussiness

 Database

Kiến trúc sử dụng việc phân chia chương trình thành Controllers, Models, Views

Cú pháp chương trình

Sử dụng cú pháp của webform Tất cả các sự kiện và controls đều do server quản lí

Các sự kiện được điều khiển bởi Controllers, các controls không do server quản lí

Truy cập dữ liệu

Sử dụng hầu hết các công cụ truy cập dữ liệu trong ứng dụng

Phần lớn dùng LINQ to SQL class để tạo mô hình truy cập đối tượng

Debug

Debug chương trình phải thực hiện tất cả bao gồm các lớp truy cập dữ liệu , sự hiển thị, điều khiển các controls

Debug có thể sử dụng các unit test kiểm tra các phương thức trong controller

Tốc độ phân tải

Tốc độ phân tải chậm trong khi trang có quá nhiều controls vì ViewState quá lớn

Phân tải nhanh hơn do không phải quản lý ViewState để quản lý các control trong trang

Tương tác với javascript

Tương tác với javascript khó khăn vì các controls

bị quản lí bởi server

Tương tác với javascript

dễ dàng vì các đối tượng không do server quản lí dẫn tới điều khiển không khó khăn

URL address

Cấu trúc địa chỉ URL có dạng

Cấu trúc địa chỉ URL rành mạch theo dạng Controllers /Action/ Id

Trang 36

Bảng 2.3.3 So sánh giữa Asp.Net 2.0 và Asp.Net Mvc 2.3.4 Những điểm mới trong MVC 3

ASP.Net MVC 3 là một phiên bản khá hấp dẫn, có thêm nhiều tính năng và cải

tiến mới rất tuyệt vời, giúp đơn giản hóa mã (code) của bạn ASP.Net MVC 3

cũng tương thích ngược với ASP.Net MVC 1 và ASP.Net MVC 2, khiến việc

nâng cấp các ứng dụng hiện có rất dễ dàng Bài viết này sẽ trình bày về những

tính năng mới như: Razor, multi view engine, những cài tiến trong: controller,

JavaScript và Ajax, Model Validation, Dependency Injection, và các tính năng

mới khác

Hình 2.3.4 Asp.Net MVC 3

2.3.4.1 Công cụ xem Razor (The Razor View Engine)

 ASP.net MVC 3 đi kèm với một công cụ xem mới có tên là Razor với

Trang 37

 Razor views có thể kiểm tra từng đơn vị mà không đòi hỏi bạn phải

chạy các ứng dụng hoặc phải chạy web server

 Một số tính năng mới của Razor:

 Cú pháp @model để xác định các loại sẽ được truyền vào view

 Razor cũng bao gồm những công cụ hỗ trợ HTML mới, chẳng hạn như:

 Chart – biểu diễn một biểu đồ, cung cấp các tính năng như control

chart trong ÁP.NET 4

 WebGrid – biểu diễn một lưới dữ liệu (data grid), hoàn chỉnh với

chức năng phần trang và phân loại

 Crypto – Sử dụng các thuật toán băm (hashing algorithms) để tạo

thuộc tính thông thạo và băm các mật khẩu

 WebImage – biểu diễn một hình ảnh

 WebMail – gởi tin nhắn email

2.3.4.2 Hỗ trợ đa View Engines (Support for Multiple View

Engines)

Thêm hộp thoại View trong ASP.NET MVC 3 cho phép bạn chọn các

view engine mà bạn muốn làm việc với nó, và hộp thoại New Project cho phép

Trang 38

bạn xác định view engine mặc định cho một project Bạn có thể chọn view

engine Web Forms (ASPX), Razor, hay một view engine nguồn mở như

Spark, NHaml, hay NDjango

2.3.4.3 Những cải tiến Controller

a Global Action Filter

Đôi khi bạn muốn thực hiện một logic hoặc trước khi một phương thức

thực hiện hoặc sau một một phương thức hành động được thực hiện Để hỗ trợ

điều này, ASP.NET MVC 2 đã cung cấp bộ lọc hành động (Action Filters)

Action Filter là các thuộc tính tùy chỉnh cung cấp khai báo một phương tiện để

thêm trước hành động và sau hành động một hành vi để xác định phương thức

controller hành động cụ thể MVC 3 cho phép bnaj chỉ định các bộ lọc chung

bằng cách thêm chúng vào bộ sưu tập GlobalFilters Để biết thêm thông tin có

thể tham khảo ở những nguồn dưới đây:

Scott Guthrie’s blog on the MVC 3 Preview

Filtering in ASP.NET MVC

b Thuộc tính mới “ViewBag”

MVC 2 hỗ trợ điều điều khiển một thuộc tính ViewData để cho phép

bạn chuyển dữ liệu đến một view template bằng cách sử dụng một API Trong

MVC 3, bạn có thể sử dụng cú pháp đơn giản hơn một chút với thuộc tính

ViewBag để thwucj hiện cùng một mục đích trên Ví dụ, thay vì viết

ViewData[“Message”] = “text”, bạn có thể viết ViewBag.Message = “text”

Bạn không cần phải xác định lớp mạnh bất kỳ để sử dụng thuộc tính ViewBag

Bởi vì nó là một thuộc tính năng động (dynamic property), bạn có thể thay vì

chỉ nhận hay thiết lập các thuộc tính và nó sẽ giải quyết các ván đề còn lại tự

động khi chạy Bên trong thuộc tính ViewBag được lưu trữ như cặp

name/value trong từ điển ViewData (Lưu ý: trong hầu hết các phiên bản trước

của MVC3, thuộc tính ViewBag có tên là ViewModel)

Trang 39

c Các kiểu “ActionResult” mới

 Dưới đây là các kiểu ActionResult và phương pháp trợ giúp mới và nâng

cao trong MVC 3:

 HttpNotFoundResult Trả về trạng thái mã HTTP 404 cho khách

hàng

 RedirectResult Trả về một chuyển hướng tạm thời (mã trạng thái

HTTP 302) hoặc một chuyển hướng vĩnh viễn (mã trạng thái HTTP

301), phụ thuộc vào một tham số Boolean Kết hợp với thay đổi này,

các lớp control hiện nay có ba phương pháp để thực hiện thường

xuyên đổi hướng: RedirectPermanent ,RedirectToRoutePermanent ,

và RedirectToActionPermanent Những phương pháp này trả về một

dữ liệu của RedirectResult với Permanent sở hữu thiết lập đúng

 HttpStatusCodeResult Trả về một mã trạng thái người dùng được xác

định

2.3.4.4 JavaScript và Ajax

Theo mặc định, Ajax và các công cụ hỗ trợ hợp lệ trong MVC 3 sử

dụng một cách tiếp cận unobtrusive JavaScript Unobtrusive JavaScript nội

tuyến tránh tiêm tín hiệu từ JavaScript vào HTML Điều này làm cho HTML

của bạn nhỏ hơn và ít lộn xộn hơn, và làm cho nó chuyển đổi ra ngoài dễ dàng

hơn hay tùy chỉnh các thư viện JavaScript Validation helpers trong MVC 3

cũng sử dụng plugin jQueryValidate theo mặc định Nếu bạn muốn MVC 2

thực hiện, bạn có thể vô hiệu hóa unobtrusive JavaScript bawgnf cách thiết lập

lại file web.config

a Client-Side Validation Enabled by Default

Trong các phiên bản trước đó của MVC, bạn cần phải gọi rõ phương

thức Html.EnableClientValidation từ một view để cho phép phía máy khác

Trang 40

xác nhận Điều này trong MVC 3 là không cần thiết vì phía khách hàng xác

nhận là kích hoạt mặc định (Bạn có thể vô hiệu hóa điều này bằng cách sử

dụng một thiết lập trong file web.config)

Để cho phía máy khách xác nhận để làm việc, bạn vẫn cần phải tham

khảo thích hợp thư viện jQuery và jQuery Validation trong trang web của

bạn Bạn có thể lưu trữ các thư viện trên máy chủ của chính bạn hoặc tham

chiếu cho chúng từ một mạng lưới phân bố nội dung(CDN – Content Delivery

Network) như CDNs từ Microsoft hay Google

b Remote Validator

ASP.NET MVC 3 hỗ trợ lớp RemoteAttribute cho phép bạn tận dụng

lợi thể của plugin jQuery Validation để hỗ trợ xác nhận từ xa Điều này cho

phép các bên các nhận thư viện client-side validation để tự động gọi một

phương thức tùy chỉnh mà bạn xác định trên máy chủ để thực hiện xác nhận

logic chỉ có thể được xác nhận phía máy chủ

Trong ví dụ sau đây, thuộc tính Remote xác định rừng xác nhận máy

khác sẽ gọi một hành động tên là UserNameAvailable trên lớp UsersController

Ví dụ sau đây minh họa các điều khiển tương ứng:

public class UsersController {

public bool UserNameAvailable(string username) {

if(MyRepository.UserNameExists(username)) {

return "false";

}

Định dạng
Số trang	109
Dung lượng	8,67 MB