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

ĐẠ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


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.

GVHD: Th.s Phạm Thi Vương
Th.s Nguyễn Hữu Thương

SVTH: Lê Xuân Tùng
Nguyễn Anh Khoa

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

GVHD: Th.s Phạm Thi Vương
Th.s Nguyễn Hữu Thương

SVTH: Lê Xuân Tùng
Nguyễn Anh Khoa

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)
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................

..............................................................................................................................
..............................................................................................................................

GVHD: Th.s Phạm Thi Vương
Th.s Nguyễn Hữu Thương

SVTH: Lê Xuân Tùng
Nguyễn Anh Khoa


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)
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................

..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................
..............................................................................................................................

GVHD: Th.s Phạm Thi Vương
Th.s Nguyễn Hữu Thương

SVTH: Lê Xuân Tùng
Nguyễn Anh Khoa


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

GVHD: Th.s Phạm Thi Vương
Th.s Nguyễn Hữu Thương

SVTH: Lê Xuân Tùng
Nguyễn Anh Khoa


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

GVHD: Th.s Phạm Thi Vương
Th.s Nguyễn Hữu Thương

SVTH: Lê Xuân Tùng
Nguyễn Anh Khoa


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

GVHD: Th.s Phạm Thi Vương
Th.s Nguyễn Hữu Thương

SVTH: Lê Xuân Tùng
Nguyễn Anh Khoa


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.

4.4.

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

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

GVHD: Th.s Phạm Thi Vương
Th.s Nguyễn Hữu Thương

SVTH: Lê Xuân Tùng
Nguyễn Anh Khoa


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

Từ viết tắt

Diễn tả

Diễn giải
Mô hình lập trình ba lớp Model, View,

MVC

Model View Controller

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

LinQ

IIS

.Net Language Intergrated
Query

Internet Information Server Máy chủ thông tin mạng

DOM

Document Object Model

URL

Uniform Resource Locator

XML

XAML

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

Language
Extensible Application
Markup Language
JavaScript Object Notation

POX

Premature Oxidation

WCF

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

Extensible Markup

JSON

DLL

Ngôn ngữ truy vấn tích hợp .NET

Dynamic Language
Runtime
Windows Commucation
Foundation

GVHD: Th.s Phạm Thi Vương
Th.s Nguyễn Hữu Thương

SVTH: Lê Xuân Tùng
Nguyễn Anh Khoa


X

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

HTTP

SDK

WPF

Hypertext Transper
Protocal
Software Development Kit
Windows Presentation
Foundation

CSS

Cascading Style Sheets

CLR

Common Language
Runtime

AJAX

Asynchronous Javascript
and XML

API

Application Programming
Interface

GVHD: Th.s Phạm Thi Vương
Th.s Nguyễn Hữu Thương

SVTH: Lê Xuân Tùng
Nguyễn Anh Khoa


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

GVHD: Th.s Phạm Thi Vương
Th.s Nguyễn Hữu Thương

SVTH: Lê Xuân Tùng
Nguyễn Anh Khoa

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

GVHD: Th.s Phạm Thi Vương
Th.s Nguyễn Hữu Thương

SVTH: Lê Xuân Tùng

Nguyễn Anh Khoa


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 3D thà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
GVHD: Th.s Phạm Thi Vương
Th.s Nguyễn Hữu Thương

SVTH: Lê Xuân Tùng
Nguyễn Anh Khoa


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

GVHD: Th.s Phạm Thi Vương
Th.s Nguyễn Hữu Thương

SVTH: Lê Xuân Tùng
Nguyễn Anh Khoa

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

GVHD: Th.s Phạm Thi Vương
Th.s Nguyễn Hữu Thương

SVTH: Lê Xuân Tùng
Nguyễn Anh Khoa


1

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

CHƢƠNG 1.
1.1

TỔNG QUAN

Đặ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
GVHD: Th.s Phạm Thi Vương
Th.s Nguyễn Hữu Thương

SVTH: Lê Xuân Tùng
Nguyễn Anh Khoa


2

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

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.
GVHD: Th.s Phạm Thi Vương
Th.s Nguyễn Hữu Thương

SVTH: Lê Xuân Tùng
Nguyễn Anh Khoa


3

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

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.

GVHD: Th.s Phạm Thi Vương
Th.s Nguyễn Hữu Thương

SVTH: Lê Xuân Tùng

Nguyễn Anh Khoa


4

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

Phạm vi đề tài

1.3

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à

GVHD: Th.s Phạm Thi Vương
Th.s Nguyễn Hữu Thương

SVTH: Lê Xuân Tùng
Nguyễn Anh Khoa


5

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

CHƢƠNG 2.
2.1

Công nghệ Silverlight, XNA, ASP.NET MVC3, LinQ

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
GVHD: Th.s Phạm Thi Vương
Th.s Nguyễn Hữu Thương

SVTH: Lê Xuân Tùng

Nguyễn Anh Khoa


6

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

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à
GVHD: Th.s Phạm Thi Vương
Th.s Nguyễn Hữu Thương

SVTH: Lê Xuân Tùng
Nguyễn Anh Khoa


7

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

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.
Silverlight 3 lần đầu tiên đƣợc giới thiệu tại IBC (International
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.

GVHD: Th.s Phạm Thi Vương
Th.s Nguyễn Hữu Thương

SVTH: Lê Xuân Tùng
Nguyễn Anh Khoa


8

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

 Nâng cao khả năng nhận biết
 Hỗ trợ điều khiển từ xa

 Hỗ trợ khởi động ứng dụng nhanh hơn
 Hỗ trợ trình duyệt 64-bit.
 Tự động test giao diện ngƣời dùng của các ứng dụng với Visual Studio
2010
 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

GVHD: Th.s Phạm Thi Vương
Th.s Nguyễn Hữu Thương

SVTH: Lê Xuân Tùng
Nguyễn Anh Khoa


9

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

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.

GVHD: Th.s Phạm Thi Vương
Th.s Nguyễn Hữu Thương

SVTH: Lê Xuân Tùng
Nguyễn Anh Khoa