Mẫu Bài Tập Lớn ( CÁN BỘ GIẢNG DẠY THẦY Bộ môn ) ( SINH VIÊN THỰC HIỆN ) ( H à Nội , N ăm 2021 ) ( BÀI TẬP LỚN Môn học ĐỀ TÀI Xây dựng website bán điện thoại bằng ASP Net MVC 5 ) MỤC LỤC Contents MỤC.
Trang 1BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC MỎ - ĐỊA CHẤT
BÀI TẬP LỚN Môn học:
ĐỀ TÀI:
Xây dựng website bán điện thoại bằng ASP.Net MVC 5
THẦY :
Bộ môn :
Hà Nội , Năm 2021
Trang 2MỤC LỤC
Contents
MỤC LỤC II DANH MỤC CÁC HÌNH VẼ IV DANH MỤC CÁC BẢNG BIỂU V
DANH MỤC CÁC TỪ VIẾT TẮT 1
MỞ ĐẦU 1
CHƯƠNG 1 TỔNG QUAN 3
1.1 Giới thiệu tổng quát 3
1.2 Mục đích của báo cáo 3
CHƯƠNG 2 CƠ SỞ LÝ THUYẾT 4
2.1 Công nghệ ASP.NET MVC5 4
2.1.1 Lịch sử ra đời của MVC 4
2.1.2 Sự khác nhau giữa MVC và webform 4
2.1.3 Kiến trúc sử dụng ASP.NET MVC 5
2.1.4 Đặc điểm ASP.NET MVC 6
2.2 Mô hình MVC5 8
2.2.1 Các tính năng của mô hình MVC3 và MVC4 8
2.2.2 Các cải tiến của MVC5 9
CHƯƠNG 3 THIẾT KẾ GIAO DIỆN 11
3.1 : Giao diện người dùng 11
3.1.1 Giao diện chính 11
3.1.2 Giao diện đăng ký 12
3.1.3 Giao diện đăng nhập 13
3.1.4 Giao diện lựa chọn sản phẩm 13
3.1.5 Giao diện đặt hàng 14
3.2 Giao diện quản trị 14
3.2.1 Giao diện index và sản phẩm 14
3.2.2 Giao diện quản lý hãng sản xuất 17
3.2.3 Giao diện quản lý hệ điều hành 19
Trang 33.2.4 Giao diện quản lý người dùng 21
3.2.5 Giao diện trang phân quyền 23
CHƯƠNG 4 CHƯƠNG TRÌNH VÀ CƠ SỞ DỮ LIỆU 25
4.1 Sơ đồ use case 25
4.2 Mô tả use case 26
4.2.1 Use case đăng ký 26
4.2.2 Use case đăng nhập 26
4.2.3 Use case đăng xuất 26
4.2.4 Use case quản lý tài khoản 27
4.2.5 Use case quản lý sản phẩm 27
4.2.6 Use case xem chi tiết sản phẩm 28
4.2.7 Use case tìm kiếm theo tên 29
4.2.8 Use case quản lý hãng sản xuất 29
4.2.9 Use case quản lý đơn hàng 30
4.2.10 Use case quản lý giỏ hàng 31
4.2.11 Use case quản lý phân quyền 31
4.3 Cơ sở dữ liệu 32
4.3.1 Sơ đồ mối quan hệ giữa các thực thể 32
CHƯƠNG 5 :KẾT QUẢ 33
5.1 Kết quả đạt được 33
CHƯƠNG 6 KẾT LUẬN 33
6.1 Ưu và khuyết điểm 33
6.2 Hướng phát triển 33
Trang 4DANH MỤC CÁC HÌNH VẼ
Hình 1 Mô hình MVC 6
Hình 2: Giao diện chính 11
Hình 3: Giao diện chính 12
Hình 4:Giao diện đăng ký 13
Hình 5 : Giao diện đăng nhập 13
Hình 6:Giao diện lựa chọn sản phẩm 14
Hình 7: Giao diện đặt hàng 14
Hình 8 Giao diện cập nhật, xóa sản phẩm 15
Hình 9 Giao diện quản lý sản phẩm 15
Hình 10: Phân trang giao diện quản lý sản phẩm 16
Hình 11: Giao diện xem chi tiết sản phẩm 16
Hình 12 Giao diện thêm mới sản phẩm 17
Hình 13 Giao diện chỉnh sửa sản phẩm 17
Hình 14 Giao diện xóa sản phẩm 18
Hình 15 Giao diện chi tiết hãng sản xuất 18
Hình 16 :Giao diện chỉnh sửa hãng sản xuất 19
Hình 17 Giao diện thêm hãng sản xuất 19
Hình 18 Giao diện quản lý hãng điện thoại 20
Hình 19 : Giao diện xóa hệ điều hành 20
Hình 20 Giao diện chỉnh sửa hệ điều hành 21
Hình 21 Giao diện thêm hệ điều hành 21
Hình 22 Giao diện quản lý hệ điều hành 22
Hình 23 Giao diện quản lý người dùng 22
Hình 24 Giao diện xóa người dùng 23
Hình 25 Giao diện chi tiết người dùng 23
Hình 26 Giao diện chỉnh sửa thông tin người dùng 24
Trang 5Hình 27 Giao diện quản lý quyền truy cập 24
Hình 29 Giao diện thêm phân quyền 25
Hình 30 Giao diện chỉnh sửa phân quyền 25
Hình 31 Giao diện chi tiết phân quyền 26
Hình 32 Giao diện xóa quyền 26
Hình 33: Sơ đồ use case 27
Hình 34: Sơ đồ giữa các thực thể 34
DANH MỤC CÁC BẢNG BIỂU Bảng 2-1 Lịch sử các phiên bản MVC 4
Bảng 2-2 Sự khác nhau giữa MVC và Webform 5
Trang 6Bảng 2-3 Các loại security trong MVC5 10
Bảng 4-1 Bảng use case đăng ký 28
Bảng 4-2 Bảng use case đăng nhập 28
Bảng 4-3 Bảng use case đăng xuất 28
Bảng 4-4 Bảng use case quản lý tài khoản 29
Bảng 4-5 Bảng use case quản lý sản phẩm 30
Bảng 4-6 Bảng use case xem chi tiết sản phẩm 30
Bảng 4-7 Bảng use case tìm kiếm theo tên 31
Bảng 4-8 Bảng use case quản lý hãng sản xuất 32
Bảng 4-9 Bảng use case quản lý đơn hàng 32
Bảng 4-10 Bảng use case quản lý giỏ hàng 33
Bảng 4-11 Bảng use case quản lý phân quyền 34
Trang 72 DB Database Cơ sở dữ liệu
3 CNTT Công nghệ thông tin
Trang 8MỞ ĐẦU
1 Tổng quan tình hình nghiên cứu thuộc lĩnh vực của đề tài
Ngày nay, công nghệ web trên nền NET Framework của Microsoft ngày càng pháttriển mạnh mẽ, cùng với các công nghệ khác như: PHP, JSP, Trong đó công nghệASP.NET MVC là một công nghệ mang nhiều tính năng ưu việt Bên cạnh đó, việc bánhàng qua mạng thông qua những website trực tuyến đã không còn quá xa lạ đối với ngườiViệt và ngày càng phát huy thế mạnh của nó Những gian hàng online giúp tiết kiệm đượcrất nhiều thời gian cho những người bận rộn
Hàng ngày chúng ta bắt đầu với hàng tá công việc như đi làm, dọn dẹp, chăm sóc giađình, và những kế hoạch khác Mỗi lần đi mua đồ chiếm khá nhiều thời gian vì phải đi lạichọn đồ và hãy thử nghĩ xem nếu chúng ta không ở gần siêu thị hay cửa hàng đó chúng ta
sẽ vất vả như thế nào Hiện nay hầu hết các siêu thị và các cửa hàng đã xây dựng nhữngtrang web riêng cho mình để khách hàng có thể tiện lợi trong việc mua hàng hóa qua mạng
mà không cần đến tận nơi
2 Tính cấp thiết, ý nghĩa khoa học và thực tiễn của đề tài
Từ những phân tích trên, nhóm chúng em đã chọn xây dựng website bán điện thoại dựatrên nền tảng framework ASP.NET MVC5 và một số tính năng khác để hỗ trợ khách hàngtrong việc đặt hàng qua mạng Internet
Trong báo cáo này sẽ tập trung trình bày những nghiên cứu kiến thức cơ bản vềASP.NET MVC5 Triển khai các bước thiết kế, xây dựng website giúp người dùng nhanhchóng tìm kiếm được mặt hàng cần mua , mua hàng, áp dụng công nghệ để việc mua bántrở nên tiện lợi
Đây là ứng dụng thực tế khá hay, tuy không phải là mới nhưng do kinh nghiệm củachúng em chưa nhiều và còn nhiều hạn chế cũng như sai sót mong thầy cô và các bạn đónggóp ý kiến để đề tài được hoàn thiện hơn
Trang 9CHƯƠNG 1 TỔNG QUAN
1.1 Giới thiệu tổng quát
Việc mua bán kinh doanh hiện nay đang ngày càng trở nên dễ dàng hơn với sự
hỗ trợ của CNTT hiện tại có một số lượng rất lớn các website thương mại đã đượcxây dựng và sử dụng Việc này giúp đa dạng hóa các phương thức bán hàng và vìvậy hàng hóa được tiêu thụ dễ dàng hơn
1.2 Mục đích của báo cáo
- Muốn nghiên cứu, nắm vững: framework ASP.NET MVC5 để xây dựngwebsite thực tiễn đáp ứng nhu cầu khách hàng
- Xây dựng website bán điện thoại online đáp ứng được đầy đủ các quy trìnhcủa bán hàng online
Trang 10CHƯƠNG 2 CƠ SỞ LÝ THUYẾT
2.1 Công nghệ ASP.NET MVC5
2.1.1 Lịch sử ra đời của MVC
- Tất cả bắt đầu vào những năm 70 của thế kỷ 20, tại phòng thí nghiệm XeroxPARC ở Palo Alto Sự ra đời của giao diện đồ họa (GUI) và lập trình hướng đốitượng (Object Oriented Programming) cho phép lập trình viên làm việc với nhữngthành phần đồ họa như những đối tượng đồ họa có thuộc tính và phương thức riêngcủa nó Không dừng lại ở đó, những nhà nghiên cứu ở Xerox PARC còn đi xa hơnkhi cho ra đời cái gọi là kiến trúc MVC (viết tắt của Model – View – Controller).[1]
- MVC được phát minh tại Xerox Parc vào những năm 70, bởiTrygveReenskaug MVC lần đầu tiên xuất hiện công khai là trong Smalltalk-80.Các giấy tờ quan trọng đầu tiên được công bố trên MVC là “A Cookbook for Usingthe Model-View-Controller User Interface Paradigm in Smalltalk – 80”, bởi GlennKrasner và Stephen Pope, xuất bản trong tháng 8 / tháng 9 năm 1988
- Thế hệ tiếp theo của MVC xuất hiện cùng với hệ điều hành NeXT và cácphần mềm của nó
- Kiến trúc này ngày càng được phát triển và hoàn thiện nhằm giải quyết cácvấn đề phát sinh cũng như các giải pháp cho quá trình phát triển phần mềm
- Vì vậy sau đó, lần lượt các MVC framework ra đời dựa trên mô hình MVCnhư: CodeIgniter, Zend, ASP.NET MVC …
Trang 11– Models– View– Controller
Mọi tương tác của người dùngvới Views sẽ được xử lý thông qua
việc thực hiện các action hành động
trong Controllers, không còn
postback, lifecycle và events
ASP.net WebForm sửdụng ViewState để quản lýCác trang ASP.net đều cólifecycle, postback và dùngcác web controls, các event
để thực hiện các hành độngcho UI (User Interface) Khi có sự tương tác vớingười dùng nên hầu hếtASP.net WebForm xử lýchậm
nào cũng ảnh hưởngđến ứng dụng
Bảng 2-2 Sự khác nhau giữa MVC và Webform
2.1.3 Kiến trúc sử dụng ASP.NET MVC
ASP.NET MVC được thiết kế một cách gọn nhẹ, giảm thiểu sự phức tạp củaviệc xây dựng ứng dụng website bằng cách chia một ứng dụng thành 3 tầng (layer):
Trang 12Model, View và Controller Sự chia nhỏ này giúp lập trình viên dễ dàng kiểm soátcác thành phần trong khi phát triển, cũng như lợi ích lâu dài trong việc kiểm tra, bảotrì và nâng cấp.
a.Model
Model chứa và thể hiện các đặc tính và logic ứng dụng Theo một cách hiểukhác, Model đại diện cho dữ liệu và logic cốt lõi Nó chính là những lớp (class)chứa thông tin về các đối tượng mà ta cần phải thao tác, làm việc trên nó Ví dụ:
"Sách" chứa các thông tin như "Tên", "Ngày phát hành", "Giá", "Nhà sản xuất",
b.View
View làm nhiệm vụ thể hiện một Model hay nhiều Model một cách trực quan,
nó nhận thông tin (một Model hoặc nhiều Model) sau đó biểu diễn lên trangwebsite
Tiếp tục hỗ trợ các tính năng trong ASP.NET
- Hỗ trợ sử dụng các các tập tin:.ASPX, ASCX, Master như là thànhphần View
- Hỗ trợ đầy đủ các tính năng bảo mật của ASP.net: Form/ Windowsauthenticate, URL authorization, membership/roles, output và data
Trang 13caching, section/ profile state, configuration system, providerarchitecture.
Tách rõ ràng các mối liên quan, mở ra khả năng test TDD (Test DrivenDeveloper)
- Có thể test unit trong ứng dụng mà không cần phải chạy Controllers cùngvới tiến trình của ASP.NET và có thể dùng bất kỳ một unit testing frameworknào như NUnit, MBUnit, MS Test,…
Có khả năng mở rộng, mọi thứ trong MVC được thiết kế để dễ thay thế, dễdàng tùy biến Ánh xạ URL mạnh mẽ, cho phép xây dựng ứng dụng vớinhững URL sạch
Không sử dụng mô hình post-back từ giao diện gửi đến server Thay vào đó,chủ động đưa những post-back từ View đến thẳng lớp Controller
Hỗ trợ nhiều công cụ tạo View (Support for Multiple View Engines)
- Cho phép chọn công cụ tạo view Hộp thoại New Project cho phép xác địnhview engine mặc định cho một project
- Các loại view engine
o Web Forms (ASPX)
o Razor
o Hay một view engine nguồn mở như Spark, NHaml, NDjango
Hỗ trợ định tuyến
- ASP.NET MVC Framework có một bộ máy ánh xạ URL thật sự mạnh mẽ
- Bộ máy này cung cấp phương pháp rất linh hoạt trong việc ánh xạ URLssang các Controller Classes
- Bạn có thể dễ dàng định ra các quy luật, cài đặt đường đi, ASP.NET dựavào các quy luật đường đi đó để xác định Controller và action cần phải thựcthi
- ASP.NET còn có khả năng phân tích URL, chuyển các thông số trong URLthành các tham số trong lời gọi hàm của Controller
Filters
Trang 14- Là tính năng mạnh trong ASP.NET MVC Hỗ trợ cho việc kiểm tra tính hợp
lệ trước khi một action method được gọi hoặc sau khi một action method thihành
- Visual Studio bao gồm IntelliSense và mã cú pháp Razor được màu hóa
- Với Razor views có thể kiểm tra từng đơn vị mà không đòi hỏi bạn phải chạycác ứng dụng hoặc phải chạy website
- 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 DIContainerkhi 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
b MVC4
- ASP.NET Web API ra đời, nhằm đơn giản hoá 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
Trang 15- 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 developer muốnnâ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ệnDotNetOpenAuth Cho phép Logins từ Facebook và những tài khoản khác
- Phiên bản mới Windows Azure SDK 1.6 được phát hành
2.2.2 Các cải tiến của MVC5
- 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ứngthực từ hãng thứ 3 cung cấp
- Với Filter overrides, chúng ta có thể Filter override trên Method hoặcController
- Thuộc tính Routing được tích hợp vào MVC5
c Bootstrap.
Bootstrap là một framework CSS được Twitter phát triển Nó là một tậphợp các bộ chọn, thuộc tính và giá trị có sẵn để giúp web designer tránhviệc lặp đi lặp lại trong quá trình tạo ra các class CSS và những đoạn
mã HTML giống nhau trong dự án web của mình Ngoài CSS ra, thìbootstrap còn hỗ trợ các function tiện ích được viết dựa trênJQuery(Carousel, Tooltip, Popovers , )
Những lý do để sử dụng Bootstrap:
- Được viết bởi những người có óc thẩm mỹ và tài năng trên khắp thế giới Sựtương thích của trình duyệt với thiết bị đã được kiểm tra nhiều lần nên có thể tintưởng kết quả mình làm ra và nhiều khi không cần kiểm tra lại Vì vậy, giúp cho dự
án của bạn tiết kiệm được thời gian và tiền bạc
Trang 16- Chỉ cần biết sơ qua HTML, CSS, Javascript, Jquery là bạn có thể sử dụngBootstrap để tạo nên một trang web sang trọng và đầy đủ Nhưng lại không cầncode quá nhiều CSS.
- Với giao diện mặc định là màu xám bạc sang trọng, hỗ trợ các componentthông dụng mà các website hiện nay cần có Vì nó là opensource nên bạn có thể vào
mã nguồn của nó để thay đổi theo ý thích của bản thân
- Do có sử dụng Grid System nên Bootstrap mặc định hỗ trợ Responsive.Bootstrap được viết theo xu hướng Mobile First tức là ưu tiên giao diện trên Mobiletrước Nên việc sử dụng Bootstrap cho website của bạn sẽ phù hợp với tất cả kýchthước màn hình Nhờ đó mà chúng ta không cần xây dựng thêm một trang webriêng biệt cho mobile
- Đội ngũ phát triển Bootstrap đã bổ sung thêm tính năng Customizer Giúpcho designer có thể lựa chọn những thuộc tính, component phù hợp với project của
họ Chức năng này giúp ta không cần phải tải toàn bộ mã nguồn về máy
No Authentication Ứng dụng không hỗ trợ security
Individual User Accounts
Ứng dụng sử dụng tài khoản đượcquản lý bởi SQL Server hoặc từ gmail,facebook
Organizational Accounts Ứng dụng sử dụng tài khoản được
quản lý bởi Active Directory hoặc
Trang 17Windows Azure Directory
Windown Authentication Ứng dụng chạy trên intranet tức sử
dụng tài khoản windows để đăng nhập
Bảng 2-3 Các loại security trong MVC5
- Mỗi loại security khác nhau sẽ phù hợp với các ứng dụng khác nhau Khi chọnIndividual User Accounts thì ứng dụng chạy trên Internet và sử dụng SQLServer để lưu trữ thành viên hoặc đăng nhập từ các hệ thống khác như Google,Facebook Khi đó người dùng có thể đăng ký, đăng nhập, đổi mật khẩu, đăngxuất với tài khoản cục bộ hoặc từ bên ngoài(Google, Facebook…)
- Code của AccountController có 2 sự khác biệt
o Annotation [Authorize] được sử dụng để làm cho mọi action trong controllerkhông thẻ truy xuất khi chưa đăng nhập ngoại trừ action đó được đánh dấuvới annotion [AllowAnontmous]
o Thuộc tính UserManager được tạo ra trong constructor để quản lý các thànhviên Các trang chức năng security đăng ký, đăng nhập và đổi mật khẩu đượcthực hiện nhờ thuộc tính này
Trang 18CHƯƠNG 3 THIẾT KẾ GIAO DIỆN
3.1 : Giao diện người dùng
3.1.1 Giao diện chính
Hình 2: Giao diện chính
Hình 3: Giao diện chính
Trang 193.1.2 Giao diện đăng ký
Hình 4:Giao diện đăng ký
3.1.3 Giao diện đăng nhập
Hình 5 : Giao diện đăng nhập
Trang 203.1.4 Giao diện lựa chọn sản phẩm
Hình 6:Giao diện lựa chọn sản phẩm
3.1.5 Giao diện đặt hàng
Hình 7: Giao diện đặt hàng
Trang 21Hình 8 Giao diện cập nhật, xóa sản phẩm
3.2 Giao diện quản trị
3.2.1 Giao diện index và sản phẩm
Hình 9 Giao diện quản lý sản phẩm
Hình 10: Phân trang giao diện quản lý sản phẩm