Tìm hiều về mô hình mvc trong net và ứng dụng xây dựng website bán hàng trẻ em kutiesshop

ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

TRƢỜNG ĐẠI HỌC VINH

KHOA CÔNG NGHỆ THÔNG TIN
--------------------------

NGUYEN DUY THĂNG

BÁO CÁO
ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC
Tên đồ án:
TÌM HIỀU VỀ MƠ HÌNH MVC TRONG .NET VÀ ỨNG DỤNG XÂY
DỰNG WEBSITE BÁN HÀNG TRẺ EM KUTIESSHOP

Nghệ An, tháng 01 năm 2016

Nguyễn Duy Thắng – Lớp 52K2 – Khoa CNTT

1


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

TRƢỜNG ĐẠI HỌC VINH

KHOA CÔNG NGHỆ THÔNG TIN
--------------------------

BÁO CÁO
ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

Tên đồ án: TÌM HIỀU VỀ MƠ HÌNH MVC TRONG .NET VÀ ỨNG
DỤNG XÂY DỰNG WEBSITE BÁN HÀNG TRẺ EM KUTIESSHOP

Sinh viên thực hiện: Nguyễn Duy Thắng
Mã sinh viên:
Lớp:

1151073688
52K2 - CNTT

Giáo viên hướng dẫn:ThS. Nguyễn Thị Hồng Anh

Nguyễn Duy Thắng – Lớp 52K2 – Khoa CNTT

2


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

Nghệ An, tháng 01 năm 2016
LỜI CẢM ƠN
Để hoàn thành đồ án này ngoài sự cố gắng của bản thân em xin gửi lời cảm ơn
chân thành đến Khoa Công nghệ Thông tin trong những năm qua đã tạo cơ hội giúp
em đƣợc tham gia học tập, rèn luyện các kỹ năng cần thiết cho đợt làm báo cáo đồ án
tốt nghiệp. Đặc biệt em xin gửi lời cảm ơn đến cô giáo giảng viên Th.S Nguyễn Thị
Hồng Anh đã quan tâm giúp đỡ, góp ý cho bài báo cáo đồ án tốt nghiệp và sẵn sàng
trả lời những thắc mắc khi cần thiết giúp em hồn thành tốt bài làm của mình.
Mặc dù đã có nhiều cố gắng nhƣng do kiến thức cịn hạn chế cùng với kinh
nghiệm chƣa có nhiều nên khơng tránh khỏi thiếu sót.Vì vậy em rất mong nhận đƣợc
những ý kiến đóng góp bổ sung của thầy cơ giáo và các bạn để bài làm báo cáo đồ án

tốt nghiệp của em đƣợc hoàn thiện hơn.

Sinhviên: Nguyễn Duy Thắng

Nguyễn Duy Thắng – Lớp 52K2 – Khoa CNTT

3


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC
MỤC LỤC
Trang
LỜI CẢM ƠN ...................................................................................................................
CHƢƠNG 1. TỔNG QUAN VỀ ĐỀ TÀI ...................................................................... 1
1.1. Đặt vấn đề ................................................................................................................ 1
1.2. Lý do chọn đề tài ..................................................................................................... 1
1.3. Đối tƣợng, mục tiêu nghiên cứu đề tài .................................................................... 1
1.4. Phƣơng pháp nghiên cứu ......................................................................................... 2
1.5. Ý nghĩa lý luận và thực tiễn .................................................................................... 2
CHƢƠNG 2. TÌM HIỂU MƠ HÌNH MVC TRONG ASP.NET ................................... 3
2.1. Giới thiệu mơ hình MVC......................................................................................... 3
2.2. Mơ hình MVC 5 trong ASP.NET ............................................................................ 5
2.2.1. Giới thiệu tổng quan ............................................................................................. 5
2.2.2. Lịch sử phát triển .................................................................................................. 5
2.2.3. Khái quát các thành phần chính trong MVC 5 ..................................................... 6
2.2.4. Lợi ích của việc phát triển Web theo mơ hình MVC 5 ........................................ 7
2.2.5. So sánh MVC 5 với các mơ hình khác ................................................................. 8
2.3. Tìm hiểu cách xây dựng 1 ứng dụng WEB theo mơ hình MVC 5 .......................... 8
2.3.1. Tạo mới 1 project với ASP.NET MVC 5 ............................................................. 8
2.3.2. Tìm hiểu định tuyến trong mơ hình MVC 5 ....................................................... 11

2.3.3. Xây dựng Model ................................................................................................. 12
2.3.4. Các mơ hình lập trình ......................................................................................... 12
2.3.5. Tìm hiểu Entity Framework Code First ............................................................. 13
2.3.6. Xây dựng View ................................................................................................... 15
2.3.7. Xây dựng Controllers ......................................................................................... 19
2.3.8. Truy cập dữ liệu với LINQ ................................................................................. 21
CHƢƠNG 3. PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG.................................................. 25
3.1.Khảo sát hệ thống. .................................................................................................. 25
3.1.1. Mục đích của xây dựng trang Web..................................................................... 25
3.2. Phân tích hệ thống ................................................................................................. 25
3.2.1. Yêu cầu chi tiết về Website ................................................................................ 26

Nguyễn Duy Thắng – Lớp 52K2 – Khoa CNTT

4


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC
3.2.2. Biều đồ, sơ đồ chức năng ................................................................................... 26
3.3. Thiết kế hệ thống ................................................................................................... 33
3.3.1. Lựa chọn công cụ cài đặt CSDL......................................................................... 33
3.3.2. Thiết kế CSDL .................................................................................................... 34
3.3.3. Lựa chọn ngôn ngữ, công cụ lập trình ................................................................ 39
CHƢƠNG 4. GIAO DIỆN CHƢƠNG TRÌNH ............................................................ 40
4.1. Phần dành cho ngƣời sử dụng ............................................................................... 40
4.2. Phần quản trị .......................................................................................................... 43
4.3 Publish Wesite ,upload lên host miễn phí somee.com và đăng ký tên miền thành
công cho dự án là .......................................................... 47
KẾT LUẬN .................................................................................................................. 49
TÀI LIỆU THAM KHẢO ............................................................................................ 50

Nguyễn Duy Thắng – Lớp 52K2 – Khoa CNTT

5


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC
CHƢƠNG 1. TỔNG QUAN VỀ ĐỀ TÀI
1.1. Đặt vấn đề
Ngày nay, công nghệ thông tin ngày càng phát triển và tỏ rõ tầm quan trọng
trong tất cả các lĩnh vực, có thể nói cơng nghệ thông tin đã trở thành thƣớc đo để đánh
giá sự phát triển của xã hội hiện đại. Nơi mà con ngƣời đang dần thốt khỏi cách làm
việc thủ cơng, thơ sơ và dần tiến đến tin học hóa trong tất cả các lĩnh vực. Cùng với đó
là sự phát triển mạnh mẽ của việc mua bán online. Thƣơng mại điện tử phát triển phát
triển kéo theo đó là sự xuất hiện các trang web đáp ứng mọi nhu cầu mua bán đặt hàng
của ngƣời dùng chỉ cần một cái nhấp chuột. Các trang web ngày càng bảo mật cao,
giao diện sinh động, bắt mắt hỗ trợ trên mọi thiết bị sử dụng internet. Một trong những
nền tảng giúp cho chúng ta làm đƣợc việc này là phát triển web theo mơ hình MVC
của Microsoft. Asp.Net MVC1 đƣợc phát hành 13-3-2009 cho đến nay thì Microsoft
đã cập nhật lên Asp.Net MVC 5.Vì vậy việc phát triển website trở nên dễ dàng hơn
với tất cả mọi ngƣời đam mê lập trình.
ASP.NET MVC 5 là một nền tảng framework để phát triển ứng dụng web theo
mơ hình MVC đƣợc định nghĩa bởi Model-View-Controller. Nền tảng Framework
khuyến khích lập trình viên lập trình những ứng dụng web với quy mơ lớn. Mơ hình
MVC có đặc điểm nổi bật là nhẹ, dễ kiểm thử phần giao diện, tích hợp các tính năng
có sẵn của ASP.NET. Việc phát triển website theo mơ hình MVC có rất nhiều thuận
lợi, đƣợc cộng đồng lập trình hỗ trợ mạnh mẽ. Bài báo cáo đồ án này sẽ giúp cho
chúng ta hiểu rõ đƣợc cách xây dựng một dự án website theo mơ hình MVC 5.
1.2. Lý do chọn đề tài
- Rèn luyện kỹ năng lập trình.

- Phù hợp với nhu cầu việc làm của thị trƣờng hiện nay.
- Nghiên cứu mơ hình MVC chuẩn bị hành trang cho việc phỏng vấn và xin
việc sau khi ra trƣờng.
1.3. Đối tƣợng, mục tiêu nghiên cứu đề tài
- Đối tƣợng nghiên cứu là lý thuyết về mơ hình MVC 5.
- Mục tiêu là sau khi tìm hiểu xong mơ hình MVC 5 là xây dựng Website bán
hàng shop trẻ em kutiesshop.

Nguyễn Duy Thắng – Lớp 52K2 – Khoa CNTT

1


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC
1.4. Phƣơng pháp nghiên cứu
Đọc tài liệu trên mạng, phân tích, tổng hợp tài liệu sau đó áp dụng vào thực tiễn
là xây dựng Website bán hàng shop trẻ em kutiesshop.
1.5. Ý nghĩa lý luận và thực tiễn
- Website bán hàng shop trẻ em kutiesshop sẽ đáp ứng, cung cấp đa dạng các
sản phẩm về hàng tiêu dùng chăm sóc cho trẻ em từ độ tuổi 3 tháng tuổi đến 10 năm
tuổi theo yêu cầu của khách hàng.
- Đặt mua hàng nhanh chỉ một cái nhấp chuột.
- Khách hàng có thể tìm kiếm tất cả các sản phẩm của cửa hàng một cách nhanh
chóng.
- Với ứng dụng Google Maps cung cấp đƣờng đi thuận tiện nhất cho khách
hàng đến mua bánh tại cửa hàng.
- Đăng ký tài khoản nhanh chóng bằng tài khoản Facebook.
- Hỗ trợ giao diện mọi loại thiết bị truy cập internet: điện thoại, máy tính bảng,
laptop…

Nguyễn Duy Thắng – Lớp 52K2 – Khoa CNTT

2


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC
CHƢƠNG 2. TÌM HIỂU MƠ HÌNH MVC TRONG ASP.NET
2.1. Giới thiệu mơ hình MVC
Trong mơ hình MVC bao gồm 3 thành phần cơ bản: Model, View và Controller
(Hình 1.1):
 Model: là thành phần chứa tất cả các nghiệp vụ logic, phƣơng thức xử lý,
truy xuất dữ liệu , đối tƣợng mô tả dữ liệu nhƣ các lớp, hàm ...
 View: là thành phần chứa tất cả các nghiệp vụ hiển thị thông tin, tƣơng tác với
ngƣời dùng, nơi chứa tất cả các đối tƣợng giao diện nhƣ Textbox, Images... Hiểu một
cách đơn giản nó là tập hợp các form hoặc các file HTML.
 Controller: là thành phần giữ nhiệm vụ nhận điều hƣớng các yêu cầu từ ngƣời
dùng và gọi đúng những phƣơng thức xử lý chúng... Chẳng hạn thành phần này sẽ
nhận yêu cầu từ URL và Form để thao tác trực tiếp với Model

Hình 1.1: Các thành phần chính của mơ hình MVC.
Hoạt động của mơ hình MVC:
Ngƣời dùng tƣơng tác với bằng cách nhấp chuột vào nút gửi yêu cầu đi.
Controller nhận yêu cầu của ngƣời dùng, điều hƣớng, xử lý xây dựng

Model

phù hợp, chuyển Model cho View.
View tiếp nhận Model sinh giao diện phù hợp với Model vừa tiếp nhận.

Nguyễn Duy Thắng – Lớp 52K2 – Khoa CNTT

3


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC
Model chứa dữ liệu chia sẻ chung giữu Controller và View.
Hoạt động của MVC đƣợc mơ tả nhƣ hình 1.2

Hình 1.2: Tƣơng tác của ngƣời dùng với MVC
2.1.1. Đặc điểm của mơ hình MVC.
Dƣới đây là các đặc điểm của mơ hình MVC:
- Cái lợi ích quan trọng nhất của mơ hình MVC là nó giúp cho ứng dụng dễ
bảo trì, module hóa các chức năng, và đƣợc xây dựng nhanh chóng.
- MVC tách các tác vụ của ứng dụng thành các phần riêng lẽ model, view,
controller giúp cho việc xây dựng ứng dụng nhẹ nhàng hơn.
- Dễ dàng thêm các tính năng mới, và các tính năng cũ có thể dễ dàng thay đổi,
thay thế.
- MVC cho phép thay đổi trong 1 phần của ứng dụng mà không ảnh hƣởng đến
các phần khác.
- Tự động nhận diện thiết bị: tự lựa chọn View phù hợp
- Razor: sinh giao diện.
- Dễ test: dễ dàng test các Action của các Controller
- NuGet: quản lý các gói mở rộng.

Nguyễn Duy Thắng – Lớp 52K2 – Khoa CNTT

4


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

2.2. Mơ hình MVC 5 trong ASP.NET
2.2.1. Giới thiệu tổng quan
Nhƣ đã nói ở phần trên, mơ hình MVC 5 với những ƣu điểm đã đƣợc ứng dụng
nhiều trên các nền tảng framework khác nhau, trong đó có một nền tảng framework
nổi tiếng đƣợc nhiều ngƣời biết đến và sử dụng đó là nền tảng framework ASP.NET
MVC 5. ASP.NET MVC 5 là một nền tảng framework phát triển ứng dụng web mới
của Microsoft, nó kết hợp giữa tính hiệu quả và nhỏ gọn của mơ hình Model-ViewController (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. Là một lựa chọn khác bên cạnh nền
tảng WebForm khi phát triển 1 ứng dụng web sử dụng ASP.NET.
2.2.2. Lịch sử phát triển
Asp.Net MVC1 : Phiên bản đầu tiên đƣợc phát hành vào tháng 3 năm 2009 trên
nền tảng bộ .Net Framework 3.5 bộ Visual Studio 2008.
Asp.Net MVC2 : Phiên bản này đƣợc phát hành vào tháng 3 năm 2010 trên bộ
.Net Framework 3.5 và .Net Framework 4.0 bộ Visual Studio 2010.
Asp.Net MVC 3 : Phiên bản này đƣợc phát hành vào tháng 1 năm 2011 trên nền
tảng bộ .Net Framework 4.0, các đặc điểm chính của phiển bản này :


So với phiên bản ASP.NET MVC2 thì tính năng mới đƣợc hỗ trợ thêm

HTML5 và CSS3; tính năng này chỉ hỗ trợ cho những trình duyệt mới;


Cải thiện về Model validation;



Hỗ trợ 2 View Engine: RAZOR, ASPX, kể cả Open source trong khi

ASP.NET MVC2 chỉ có ASPX;



Controller đƣợc cải tiến hơn nhƣ thuộc tính ViewBag và kiểu ActionResult;



Cải thiện Dependency Injection với IDpendencyResolver (có 2 phần:

DependencyResolver và interface IDpendencyResolver)trong ASP.NET MVC3; đây
là lớp thực thi mô hình Service Locator, cho phép framework gọi DIContainer khi cần
làm việc với 1 lớp thực thi từ 1 kiểu cụ thể


Cách tiếp cận với JavaScript đƣợc hạn chế;



Hỗ trợ caching trong Partial page;

Nguyễn Duy Thắng – Lớp 52K2 – Khoa CNTT

5


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC
Asp.Net MVC4 : Phiên bản này đƣợc phát hành vào tháng 8 năm 2012 trên nền
tảng bộ .Net Framework 4.0 và .Net Framework 4.5 trên phiên bản Visual Studio 2010
SP1 and Visual Studio 2012. Phiên bản này có các đặc điểm chính nhƣ sau:


ASP.NET Web API ra đời, nhằm đơn giản hố việc lập trình với HTML hiện

đại và đây là một cải tiến mới thay cho WCF Web API;


Mặc định của dự án đƣợc cải thiện hơn về hình thức bố trí, giúp dễ nhìn hơn;



Mẫu Empty Project là project trống, phù hợp cho những tín đồ developer

muốn nâng cao khả năng lập trình với ASP.NET MVC4;


Giới thiệu jQuery Mobile, và mẫu Mobile Project cho dự án;



Hỗ trợ Asynchrnous Controller;



Kiểm soát Bundling và Minification thông qua web.config



Hỗ trợ cho việc đăng nhập OAuth và OpenID bằng cách sử dụng thƣ viện

DotNetOpenAuth;


Phiên bản mới Windows Azure SDK 1.6 đƣợc phát hành;

Asp.Net MVC 5 : Phiên bản này đƣợc phát hành vào tháng 10 năm 2013 trên
nền tảng bộ .Net Framework 4.5 và .Net Framework 4.5.1 trên phiên bản Visual
Studio 2013. Các đặc điểm chính của phiên bản này nhƣ sau :


Với MVC5 thì cải tiến hơn so với ASP.NET MVC4, Bootstrap đƣợc thay thế

mẫu MVC mặc định;


Chứng thực ngƣời dùng Authentication Filter đƣợc tuỳ chỉnh hoặc chứng

thực từ hãng thứ 3 cung cấp;


Với Filter overrides, chúng ta có thể Filter override trên Method hoặc

Controller;


Thuộc tính Routing đƣợc tích hợp vào MVC5;

Asp.NET MVC6: Mới đây Sự kiện Visual Studio 2015 vừa ra mắt bản chính
thức vào ngày 29/07/2015 và đi kèm theo đó là phiên bản ASP.NET 5 và MVC 6.
2.2.3. Khái quát các thành phần chính trong MVC 5
Nhƣ đã giới thiệu ở phần trên, ASP.NET MVC 5 có 3 phần: Model, View, và
Controller (Hình 1.3)

Nguyễn Duy Thắng – Lớp 52K2 – Khoa CNTT

6


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

Hình 1.3: Các thành phẩn chính trong mơ hình MVC 5
 Model: Đây là thành phần chứa tất cả các nghiệp vụ logic, phƣơng thức xử
lý, truy xuất database, đối tƣợng mô tả dữ liệu nhƣ các Class, hàm xử lý...
 View: Đảm nhận việc hiển thị thông tin, tƣơng tác với ngƣời dùng, nơi chứa
tất cả các đối tƣợng GUI nhƣ textbox, images...Hiểu một cách đơn giản, nó là tập hợp
các form hoặc các file HTML.
 Controller: Giữ nhiệm vụ nhận điều hƣớng các yêu cầu từ ngƣời dùng và gọi
đúng những phƣơng thức xử lý chúng... Chẳng hạn thành phần này sẽ nhận request từ
URL và Form để thao tác trực tiếp với Model
2.2.4. Lợi ích của việc phát triển Web theo mơ hình MVC 5
Có nhiều nền tảng để lập trình viên có thể lựa chọn để xây dựng và phát triển web.
Dƣới đây là những lợi ích của việc phát triển web theo mơ hình MVC 5:
- Lập trình đơn giản với C#.
- Ứng dụng tạo ra chạy ổn định trên Windows
- Dễ quản lý nâng cấp
- Đáp ứng nhiều loại thiết bị truy cập
- An tồn
- Dễ tích hợp

Nguyễn Duy Thắng – Lớp 52K2 – Khoa CNTT

7

ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC
2.2.5. So sánh MVC 5 với các mơ hình khác
Bảng 1.1: So sánh MVC 5 với các mơ hình làm web Form truyền thống.
Các tính năng
Kiến trúc
chƣơng trình

ASP.NET Web Form

ASP.NET MVC 5

Kiến trúc mơ hình: Kiến
trúc
phân
chia
WebForm->Bussiness
thành:Models,Controllers,Views.
->Database

Sử dụng cú pháp của Các sự kiện đƣợc điều khiển bởi
Cú pháp chƣơng WebForm ,tất cả các điều Controller .
trình
khiển ,sự kiện đƣợc xử lý
trên server.
Sử dụng hầu hêt các công Phần lớn sử dụng LINQ,SQL
Truy cập dữ liệu nghệ truy cập dữ liệu class để tạo mơ hình đối tƣợng.
trong ứng dụng.

Debug

Phải thực hiện tất cả Debug dễ dàng theo modul,
nghiệp vụ bao gồm: các theo Controllers.
truy cập dữ liệu, sự hiện
thị.
Tốc độ phân tải trang

Tốc độ phân tải

Phân tải trang nhanh hơn do

chậm, trong trang có nhiều khơng phải quản lý các
điều khiển vì ViewState ViewState để quản lý các điều
quá lớn.
khiển trong trang.

Tƣơng tác với
JavaScript

Tƣơng tác khó do các Tƣơng tác dễ hơn do các đối
Controls đƣợc điều khiển tƣợng không do Server quản lý
bởi Server.

URL Address

<filename>.aspx?&tham số>

Controllers/Action/ID

2.3. Tìm hiểu cách xây dựng 1 ứng dụng WEB theo mơ hình MVC 5
2.3.1. Tạo mới 1 project với ASP.NET MVC 5
Khởi động visual studio 2015 lên và bắt đầu thực hiện theo các bƣớc sau:
Bƣớc 1: Nhấp chuột vào File tiếp đến chọn New màn hình sẽ hiện thị lên danh
sách rồi nhấp chuột tiếp vào Project (Xem hình 1.4)

Nguyễn Duy Thắng – Lớp 52K2 – Khoa CNTT

8


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

Hình 1.4: Màn hình khởi động của dự án.
Bƣớc 2: Tiếp tục lựa chọn ngôn ngữ là Visual C# rồi chọn web và nhấp vào
ASP.NET Web Application. Sau đó tiếp tục chọn tên cho dự án, chọn nơi lƣu trữ dự
án rồi nhấn OK (Xem hình 1.5).

Hình 1.5: Màn hình ASP.NET Web Aplication.

Nguyễn Duy Thắng – Lớp 52K2 – Khoa CNTT

9


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

Bƣớc 3: Tiếp tục chọn MVC rồi nhấn Ok (Xem hình 1.6)

Hình 1.6: Màn hình chọn mơ hình MVC.
Bƣớc 4: Bạn có thể đăng nhập vào tài khoản Microsoft để lƣu trữ dự án trên
internet. Nếu khơng thì nhấn Cancel (Xem hình 1.7)

Hình 1.7: Màn hình chọn nơi lƣu trữ.
Nguyễn Duy Thắng – Lớp 52K2 – Khoa CNTT

10


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC
Đƣới đây là giao diện khi đã tạo thành cơng dự án MVC 5(Hình 1.8 )

Hình 1.8: Màn hình thành cơng.
2.3.2. Tìm hiểu định tuyến trong mơ hình MVC 5
ASP.NET MVC5 Framework có một bộ máy ánh xạ URL mạnh mẽ. Bộ máy
này cung cấp các phƣơng pháp rất linh hoạt trong việc ánh xạ URL sang cho
Controller. Bạn có thể dễ dàng định ra các quy luật ánh xạ, cài đặt để ASP.NET MVC
dựa vào các quy luật ánh xạ đó, xác định xem phải thực thi Controller nào. ASP.NET
MVC 5 cịn có khả năng phân tích URL, chuyển các thơng số trong URL thành các
tham số trong phần gọi hàm của Controller.
Đƣờng đi mặc định từ ASP.NET MVC URL đến Controller Class
Trình duyệt yêu cầu một địa chỉ từ Controller action trong ASP.NET MVC 5
Framework đƣợc gọi là định tuyến URL. URL sẽ chỉ định yêu cầu (request) tới Controller
action. URL sử dụng một bảng định tuyến để điều khiển các yêu cầu (request). Khi ứng dụng
chạy lần đầu tiên, phƣơng thức Application_Start() đƣợc gọi. Phƣơng thức này gọi một
phƣơng thức khác RegisterRouter (RouteTable.Router) để tạo bảng định Định tuyến mặc
định chia một yêu cầu (request) thành 3 đoạn, mỗi phân đoạn nằm giữa 2 dấu “/”. Phân
đoạn đầu tiên chứa một Controller, phân đoạn thứ 2 chứa Controller Action, phân đoạn
thứ 3 là tham số đầu vào của Controller Action.( Xem hình 1.9)

Nguyễn Duy Thắng – Lớp 52K2 – Khoa CNTT

11


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

Hình 1.9: Định tuyến trong mơ hình MVC 5.
Bảng định tuyến đƣợc tạo khi ứng dụng đƣợc chạy lần đầu tiên. Bảng định
tuyến đƣợc thiết lập trong file Global.asax (Hình 1.10).

Hình 1.10: Khởi tạo bảng định tuyến.
2.3.3. Xây dựng Model
2.3.4. Các mơ hình lập trình
Xây dựng web theo MVC 5 có 3 mơ hình để ngƣời lập trình lựa chọn và phát
triển đó là: Database First, Model First, Code First ( Xem hình 2.0)
Nguyễn Duy Thắng – Lớp 52K2 – Khoa CNTT

12


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

Hình 2.0: Các mơ hình MVC
2.3.5. Tìm hiểu Entity Framework Code First
- Đầu tiên để làm việc với Entity Framework một cách hoàn chỉnh chúng ta
phải cài đặt thêm Entity Framework bản mới nhất từ NuGet:
ƣớc 1 tạo Project mới:
B2. Cài EF Power Tools vào Visual Studio: Tools -> Library Paskage

Manager -> Manage NuGet Packages for Solution…

Hình 2.1 Màn hình cài đặt Nuget packages.
Nguyễn Duy Thắng – Lớp 52K2 – Khoa CNTT

13


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC
- Bên trái chọn online. Nhập Entity Framework Power Tools vào khung Search
(góc trên, bên phải) chọn Entity Framework Power Tools -> Install. Khi đã cài đƣợc,
bạn chuột phải trên tên Project sẽ thấy có menu Entity Framework.
Code First tức là bạn phải code sau đó sinh Database từ code đó. Nhƣng
Database tạo ra nhƣ thế sẽ ít thuộc tính: ràng buộc, identity, unique... Giải pháp là tạo
1 database hồn chỉnh trên SQL sau đó viết code để map CSDL với Entity của chúng
ta.
Trƣớc hết tạo ra các class mô tả các bảng trong CSDL của chúng ta, nó bao
gồm các trƣờng và thuộc tính, kiều của chúng, trong đề tài sẽ có 10 class trong Model
tƣơng ứng với 11 bảng trong CSDL bao gồm: AboutModels.cs, AdminModel.cs,
AdvertisementModel.cs, ArticleModel.cs, CategoryModels.cs, ProductModels.cs,
VideoclipModels.cs, VisitorStatisticsModels.cs.

Hình 2.2: Các class trong lớp model.
Sau đó 1 class OnlineShopDbContext - là class quản lý tất cả các bảng và giao
tiếp với Entity, nó tƣơng tự nhƣ class DataContext trong LINQ to SQL.

Nguyễn Duy Thắng – Lớp 52K2 – Khoa CNTT

14

ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

Hình 2.3: Class OnlineShopDbContext.cs
Trong App.config ta thiết đặt ConnectionString để class OnlineshopDbConext liên kết
với CSDL đã có sẵn.

Hình 2.4: chuỗi kết nối ConnectionString.
2.3.6. Xây dựng View
Tìm hiểu boostrap trong xây dựng dao diện Web

Nguyễn Duy Thắng – Lớp 52K2 – Khoa CNTT

15


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC
Bootstrap là một framework HTML, CSS, và JavaScript cho phép thiết kế phát
triển responsive web mobile.
Những điểm thuận lợi khi sử dụng Boostrap:
- Rất dễ sử dụng: Nó đơn giản vì đƣợc hình trên HTML, CSS và Javascript chỉ
cẩn có kiến thức cơ bản về 3 cái đó là có thể sử dụng bootstrap tốt.
- Tính năng Responsive: Bootstrap xây dựng sẵn reponsive css trên các thiết
bị di động, máy tính bảng, laptop.
- Mobile: Trong bootstrap3 mobile-first styles là một phần của framework
- Tƣơng thích với các trình duyệt: Nó tƣơng thích với tất cả các trình

duyệt

(Chrome, Firefox, Internet Explorer, Safari, and Opera) nhƣng lƣu ý vì IE vẫn kén với

IE phiên bản cũ vì thế việc IE9 hay IE8 đổ xuống không hỗ trợ là chuyện bình thƣờng.
Các bạn có dùng nên lƣu ý điểm này theo nhƣ mình tham khảo thì nó hỗ trợ tuyệt vời
trên IE10 đổ lên nhé, thấp nhất có lẽ là IE9 thơi cịn IE8 thì khơng nên dùng.
- Dễ download: Vào trang tải về và thêm vào dự án
nhé.
Các thành phần chính của boostrap:
CSS
 GridSystem
 Form
 Button
 Table
Component
 Icons
 Tab
 Navbar
 Alert
 List group
Đƣới đây là một ví dụ minh họa đơn giản cho việc xây dựng giao diện sử dụng
boostrap Ta chỉ cẩn tìm hiểu cơng dụng của các class boostrap để vận dụng vào việc
xây dựng giao diện. Xây dựng giao diện đăng nhập sử dụng boostrap

Nguyễn Duy Thắng – Lớp 52K2 – Khoa CNTT

16


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

<div class=”form-horizontal“></div>

<div class="form-group">type="password" class="formcontrol" id="txtpassword"
placeholder="Password">

<div class="form-group">type="submit" class="btn btndefault
" id="txtpassword"
placeholder="Password">

Hình 2.5: Sử dụng bootstrap để xây dựng form đăng nhập.

Nguyễn Duy Thắng – Lớp 52K2 – Khoa CNTT

17


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC
btn btn-default

btn btn-primary

btn btn-success

btn btn-infor

btn btn-warning

btn btn-danger

btn btn-link

Hình 2.6: Sử dụng bootstrap cho các button
Trong q trình xây dựng giao diện thì ta cũng có thể thêm vào các Icon để cho
giao diện trở nên bắt mặt ngƣời dùng hơn. Sử dụng các icon cũng có thể thay cho lời
mình muốn hƣớng dẫn ngƣời dùng. Ta có thể tài về bộ thƣ viện Font-Awesome hoặc
glyphicon bootstrap. Địa chỉ tải:
 Font-Awesome: /> glyphicon boostrap: />Sau khi tải về thì sử dụng nhƣ file css. Chỉ cần nhớ các Class thì ta có thể sử
dụng đƣợc nó rồi. Các icon có đầy đủ các kích thƣớc cũng nhƣ đầy đủ các hình mà lập
trình viên muốn sử dụng (Hình 3.6)

Nguyễn Duy Thắng – Lớp 52K2 – Khoa CNTT

18


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC


class="glyphicon

glyphicon-asteris"

aria-hidden="true"></span>

Hình 2.7: Icon glyphicon
2.3.7. Xây dựng Controllers
Từ visual studio ta trỏ chuột đến Add thì sẽ hiện ra một danh sách ta nhấn chuột
vào Controller và đặt tên cho Controller đó (Hình 3.7). Sau khi đặt tên xong thì visual
sẽ tạo tự động ra các thành phần chính của Controller. Nhƣ tên dự án, tên kiểu dữ liệu

trả về, tên phƣơng thức, tên controller (Hình 3.8).

Hình 2.8: Màn hình khởi động để tạo Controller.

Nguyễn Duy Thắng – Lớp 52K2 – Khoa CNTT

19


ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

Tên dự án Tên controllers Tên kiểu dữ liệu trả về Tên phƣơng thức

Hình 2.9: Các thành phần chính của Controller
Các kiểu dữ liệu trả về đƣợc liệt kê ở Bảng 1.2.
Bảng 1.2: Các kiểu dữ liệu trả về.
Các kiểu trả về

Mục đích

ViewResult

Hiển thị một View mới hoặc trang mặc định.

PartialViewResul

Trả về một View mới hoặc mặc định cục bộ.

RedirectToRoute Result

Trả về một Action method mới

RedirectResult

Chuyển tới một địa chỉ khác

JsonResult

Chuyển đổi một đối tƣợng sang kiểu Json và trả
về nhƣ một phản hồi.

JavaScriptResult

Gửi một đoạn mã nguồn JavaScript cần phải đƣợc
thực hiện bởi trình duyệt. Đây chỉ dùng để sử
dụng trong các kịch bản Ajax

EmptyResult

Khơng trả về cái gì.

Nguyễn Duy Thắng – Lớp 52K2 – Khoa CNTT

20