đồ án môn học lập trình web tìm hiểu về asp net và mẫu thiết kế mvc

Là cụm từ viết tắt của Model-View-Controller, nó phân chia mã nguồn thành 3 phần chính s Mô hình dữ liệu Model « Giao diện tương tác View « Điều phối xử lý theo yêu cầu Controller * Bằn

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NGUYÊN TÁT THÀNH

KHOA CÔNG NGHỆ THÔNG TIN

®

NGUYEN TAT THANH

ĐỎ ÁN MÔN HỌC

Môn học: Lập Trình WEB Giảng viên giảng dạy: Nguyễn Mai Huy Sinh viên thực hiện: Nguyễn Bá Huy

những video trên youtube của thầy Những bài giảng và những video của thầy đã giúp em rất nhiều trong thời gian làm đồ án môn học và học thêm nhiều kiến thức mới Tiếp theo em cảm ơn các bạn học cùng lớp đã giúp em chia sẻ những vấn đề em chưa rõ trong quá trình học lý thuyết và thực hành cùng giúp nhau tiến bộ trong học tập.

LỜI MỞ ĐẦU

Công nghệ thông tin đến thời điểm này là quá mạnh mẽ trên toàn thé giới mang lại cho người dùng trải nghiệm cực kì tiện lợi, nhanh chóng Hầu hết tất cả mọi người trên thế giới đều đã được sử đụng công nghệ vì nó phát triển rất mạnh mẽ gần gần gũi với người dùng Một trong những cái gần gũi với người dùng hiện nay nhất là WEB Nó là

một thứ tất yếu và không thể thiếu đối với bất kỉ một doanh nghiệp lớn nhỏ trên thế

giới với bất kì lĩnh vực gì Một trong những loại hình kinh doanh đang nở rộ trong thời kì covid là kính doanh online và hầu hết công cụ để làm được điều đó tốt nhất đó chính là WEB

Có thể thấy, các sàn thương mại điện tử như Shopee, Lazada, Taobao, 1688, Amazon, phát triển mạnh mẽ Vì vậy, những ai yêu thích kinh doanh online có thể đễ đàng mở gian hàng và bán hàng bằng cách tạo một trang WEB cho chính thương hiệu của họ Người bán sẽ đăng tải, chia sẻ các mặt hàng lên WEB thương mại điện tử sao cho thu hút nhiều khách hàng nhất Ưu điểm của WEB là có thể giúp người mua và người bán trao đôi mọi lúc mọi nơi chỉ cần có internet rất nhanh chóng và tiện lợi

Đó cũng là lý đo em học hỏi và tìm hiểu cách để tạo ra một trang WEB bán giày thời trang Nike bằng HTML và CSS dựa trên trang WEB mục tiêu có sẵn

ll

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

IV

MỤC LỤC

DANH MỤC CÁC HÌNH ẢNH

Hình I: Hình 2: Hình 3: Hình 4: Hình 5: Hình 6: Hình 7: Hinh 8: Hinh 9: Hinh 10: Hinh 11: Hinh 12: Hinh 13: Hinh 14: Hinh 15: Hinh 16: Hinh 17: Hinh 18: Hinh 19: Hinh 19.1: 3 Hinh 19.2: 2 Hinh 20: Hinh 21:

Hình 21Hiình 2IHình 22Hình 23: Hình 24: Hình 25Hinh 26: Hình 27: Hình 27.1: Hinh 28: Hình 29: Hinh 30: Hình 31: Hình 32: Hình 33: Hình 34: Hình 35: Hình 36: Hình 37: Hình 38: Hình 39: Hình 40: Hình 41: Hình 42: Hình 43: Hình 44:

VI

CÁC CHƯƠNG CỦA BÁO CÁO CHUONG I: TÌM HIẾU VE ASP.NET VA MAU THIET KE MVC

CHUONG II: CHUONG III:

Vill

CHUONG I: TÌM HIẾU VE ASP.NET VA MAU THIET KE MVC 1 ASP.NET MVC la gi?

ASP.NET MVC la mét framework tuyét voi hé tro pattern MVC cho ASP.NET Là cụm từ viết tắt của Model-View-Controller, nó phân chia mã nguồn thành 3 phần chính

s Mô hình dữ liệu (Model) « Giao diện tương tác (View) « Điều phối xử lý theo yêu cầu (Controller) * Bằng cách phân chia mã nguồn (các phần việc) một cách “rạch ròi” theo “hình thức nhiệm vụ”, MVC là mẫu thiết kế phục vụ cho việc phát triển phần mềm một cách chuyên nghiệp, mô hình này đeo lại nhiều thuận lợi đối với quá trình phát triển các sản phâm có quy mô ở mức “vừa và lớn”

2 Tại sao bạn nên dùng ASPNET MVC

Models có thê cung cấp đữ liệu cho nhiều View khác nhau (Nâng cao khả năng tái sử dụng mã nguồn)

2.2 Nhược điểm Phức tạp bởi sự phân chia thành nhiều thành phần, không phù hợp cho việc phát triển các ứng dụng nhỏ

Doi hoi nha phat triển phải hiểu biết, kỹ năng tốt với đồng thời nhiều công nghệ khac nhau: “multiple technologies becomes the norm”

3 Tuong tac gitra Model — View - Controller

* Model là một cơ sở dữ liệu hoặc cũng có thể chỉ là một tập tin XML giúp lưu trữ dữ liệu của ứng dụng và các xử lý nghiệp vụ: cung cấp đối tượng

dữ liệu lưu trữ trong database cũng như các nghiệp vụ liên quan đến đữ liệu của đối tượng, nhằm đáp ứng cho các nhu câu truy vấn thông tin của người dùng " View là giao diện người dùng: có nhiệm vụ thê hiện dữ liệu được cung cấp bởi Model, đồng thời “thu thập nhu cầu của người dùng” đựa trên các hành vi, tương tác của họ với View, từ đó đáp ứng các nhu cầu của người dùng trong quá trình sử dụng phần mềm

» Controller chịu trách nhiệm xử lý các tương tác của người dùng với trang web thông qua các “URL request° Nó được sử dụng để xác định loại view nào cần phải được hiển thị Controller cũng được sử dụng cho mục đích giao tiếp với model Các yêu cầu này được xử lý bởi các phương

thức trong controller (action methods), các phương thức này sẽ tạo ra kết quả (render web page) bằng

cách kết hợp một View tương ứng với Model đã định nghĩa và hồi dap (response) cho thiết bị của người dùng

MODEL VIEW CONTROLLER PATTERN

Data

Data

4 Cách hoạt động của ASPNET MVC

Khi dùng gửi yêu cầu (HTTP Request) qua một trình duyệt web bát kỳ Yêu cầu này có thể kèm theo những dữ liệu nhập tới Controller xử lý Bộ Routing điều hướng sẽ xác định Controller xử lý

Bước 2: Khi Controller nhận được yêu cầu, nó sẽ kiểm tra yêu cầu đó có cần dữ liệu từ Model không Nếu có, nó sẽ dùng các class/function trong Model sau đó trả ra kết quả Khi đó, Controller cũng sẽ xử lý các giá trị đó và trả ra View để hiển thị Controller sẽ xác định các View tương ứng và hiển thị đúng theo yêu cầu

Bước 3: Khi View nhận được dữ liệu từ Controller, chúng sẽ xây dựng các

thành phần hiền thị như hình ảnh, thông tin dữ liệu, rồi trả về GUI content để

Controller đưa ra kết quả và hiển thị lên màn hình Browser

Bước 4: Browser sẽ nhận được giá trị trả về và hiển thị với người dùng và kết

thúc quá trình hoạt động

Trong ASP.NET MVC, Model là một lớp được xây dựng bằng C#(hay VB.net) để mô tả cũng như quản lý những dữ liệu của chương trình

» Có thể truy cập Model từ Controller hoặc View, theo cách:

* Truyén di liéu tte cac action method trong Controller cho View - Trên View, có thể hiển thị dữ liệu của Model được chỉ định, để trình bày trên trang web thông qua HTML

Trong ASP NET MVC, View la cac trang cshtml « Chứa tất cả các mã định dạng cần thiết dé tạo thành tải liệu HTML trước khi chuyên xuong cho client

» Ưng với một request, một view tương ứng sẽ duoc goi dia trén action method có trong controller

« Nhiệm vụ của | view la tao ra trang kết quả đề mô tả thông tin của đối tượng dữ liệu * Controller là một lớp được tạo bởi C# (hay VB.NET) thừa kế trực tiếp từ

System Web Mvc.Controller da duoc định nghĩa san trong Framework * Day la thanh phan co thé twong tac voi ca View va Model

« Trong Controller chita cac action methods la cac thanh phan chiu trach nhiém xt ly các yêu cầu được gửi về từ client dựa trên cac URL

* Co thé truy cap va str dung model class đề truyền đữ liệu cho view 5 Model — View — Controller

bát kỳ logic nghiệp vụ liên quan nào khác như: cho phép xem, truy xuất dữ

liệu, Ví dụ, Controller sẽ lay thông tin khách hàng từ cơ sở dữ liệu Model sẽ thực hiện các thao tác dữ liệu và gửi lại cơ sở dữ liệu hoặc sử dụng nó cho View

Trong ASP.NET MVC, Model là một lớp được xây dựng bằng C# (hayVB.net) đê mô tả cũng như quản lý những dữ liệu của chương trình

Có thể truy cập Model từ Controller hoặc View, theo cách: Truyền dữ liệu từ các action method trong Controller cho View Trên View, có thê hiển thị đữ liệu của Model được chỉ định, đề trình bày trên trang web thông qua HTML

5.2 View Trong ASPNET MVC, View là các trang cshtml Chứa tất cả các mã định dạng cần thiết dé tạo thành tài liệu HTML trước khi chuyền xuong cho client

Ung với một request, một view tương ứng sẽ được gọi dựa trên action method có trong controller

Nhiệm vụ của I view là tạo ra trang kết quả để mô tả thông tin của đối tượng dữ liệu

5.3 Controller Controller là một lớp được tạo bởi C# (hay VB.NET) thừa kế trực tiếp từ System Web Mvc.Controller da duoc định nghĩa san trong Framework

Đây là thành phần có thể tương tác với cả View và Model Trong Controller chứa các action methods là các thành phần chịu trách nhiệm xử lý các yêu cầu được gửi về từ client dựa trên các URL

Có thê truy cập và sử dụng model class đề truyền dữ liệu cho view

6 Folder va Files Mét dy an phat trién boi ASPNET MVC framework duoc phan chia thành nhiều phần tách biệt, và điều này cũng được thê hiện một cách rõ nét thông qua cấu trúc quản lý thư mục trong dự án Đối với một nhà phát triển, việc hiểu rõ cầu trúc quản lý thông tin trong dựa án của mình là điều rất quan trọng

Khi tiễn hành tạo một dự án ASP.NET MVC, mặc nhiên Visual Studio sẽ tạo ra một cấu trúc folders - files phục vụ cho việc quản lý mã nguồn

6.1 Folder App Data Thu muc App_Data co trong dy 4n MVC thuong duoc dung dé chita cac dữ liệu có liên quan, vi du nhu mdf files, LocalDB, hay XML files

Một điểm quan trọng cần nhớ, la IIS (Internet Information Services) sé khéng cung cap các tập tin chứa trong thư mục App Data vì lý do bảo mật Trong ứng dụng đầu tiên, thư mục này rỗng, vì chúng ta chưa cung cấp đữ liệu cho đự án của mình

6.2 Folder App_Star App Start la mét thu muc diac biét, dùng để lưu trữ những lớp sẽ tự động được gọi vào

thời điểm đầu tiên, khi ứng dụng khởi chạy Các lớp này có thể là: BundleConfig, FilterConfig, RouteConfig, IdentityConfig,

Như vậy, có thê hiểu là tất cả các cầu hình, phục vụ cho quá trình hoạt động của ứng dụng sẽ được lưu trữ trong thư mục này

6.3 Folder Content Thư mục Content trong dự án MVC thường được sử dụng để lưu trữ các “thành phần tinh” (static files) cua dy ân: Hình ảnh, mã định dạng CSS, biéu tuong,

Khi tạo dự án bởi MVC 5, mặc nhiên thư mục này sẽ chứa cac tap tin: bootstrap.css, Site.css, va bootstrap.min.css

6.4 Folder Scripts

Thư mục Scripts thường được dùng đề chứa các tập tin javascript cần thiết cho quá trình hoạt động của ứng dụng

Đối voi MVC 5, mặc nhiên các tap tin javascript can thiét danh cho jquery va bootstrap được tích hợp sẵn trong thư mục này Trong quá trình phát triển dự án, nếu cần tạo thêm mã 1avascript phục vụ cho các xử lý phía client, bạn phải tạo và lưu trữ trong thư mục này (hoặc các thư mục con trong thư mục này)

6.5 Folder Fonts Thư mục Fonts trong dự án MVC dùng đề chứa font chữ cần thiết cho việc hiển thị các kiêu chữ giao diện của trang web

6.6 Folder Controller Controllers là thư mục chứa tất cả các “lớp xử lý”, thuộc loại controllers của dự án Hãy nhớ, các lớp thuộc loại Controller luôn thừa kế từ lớp cơ sở có tên: Controller do Microsoft xây dựng sẵn trong MVC Framework

Một quy ước quan trọng là Controller thường có hậu tố là “Controller” Hãy nhớ, đây là lớp tiếp nhận yêu cầu của người dùng (userˆs request), xử lý và trả về kết quả (response) cho tiết bị truy cập

6.7 Eolder Model Thư mục Models của đự án dùng để lưu trữ các lớp phục vụ cho mô tả các đối tượng dữ liệu cũng như các xử lý nghiệp vụ liên quan đến dữ liệu trong dé án

6.8 Folder View Đây là thư mục chứa các thanh phan giao dién, dudi dang các tập tin có phần mở rộng là “.cshtml” của dự án Trong MVC, tập tin cshtml chứa mã HTML, mã ASP.NET theo cú pháp Razor hay mã của C# trong các phần scriptless

Trong thư mục VIiews của dự án MVC, thường chứa các thư mục con tương ứng với các controller đã được tao trong ứng dụng Ví dụ, các tập tin cshtml của mục tiêu xử ly dành cho trang chủ, có tên là HomeController sẽ được chứa trong View, tại thư mục

Home

Ngoài ra, trong VIews còn chứa một thư mục đặc biệt, có tên là Shared Thư mục này thường được dùng đề chứa các thành phần dùng chung cho giao diện của dự án, như: các thông báo lỗi dùng chung, tập tin bố cục đùng chung cho giao diện, .