Xây dựng web bán hàng với công nghệ ASP NET MVC và web API

TỔNG QUAN

Giới thiệu tổng quát

Ngày nay, với sự phát triển mạnh mẽ của công nghệ, Internet đã trở thành một lĩnh vực quen thuộc trong giao dịch và mua bán trực tuyến Công nghệ web trên nền tảng NET Framework của Microsoft đang phát triển vượt bậc, cùng với các công nghệ khác như JSP và PHP Đặc biệt, ASP.NET MVC nổi bật với nhiều tính năng ưu việt, đáp ứng tốt nhu cầu của lập trình viên và nhà thiết kế.

Mục đích của đồ án

Tìm hiểu, nghiên cứu ASP.NET MVC5, WEB API và Bootstrap để xây dựng một website bán hàng

Xây dựng website bán văn phòng phẩm online đáp ứng được một số quy trình cơ bản của một website bán hàng.

Kết quả của phần mềm

Xây dựng được một số các chức năng của một website bán hàng:

 Tìm kiếm theo tên mặt hàng

 Xem chi tiết mặt hàng

 Đối với quản trị viên thì có thêm các chức năng sau:

 Quản lý khách hàng, loại khách hàng

 Quản lý mặt hàng, loại mặt hàng

 Quản lý nhà sản xuất

 Quản lý đặt hàng, chi tiết đặt hàng

 Quản lý giao hàng, chi tiết giao hàng

 Quản lý nhà cung cấp, loại nhà cung cấp

 Quản lý khả năng cung cấp, chi tiết khả năng cung cấp

 Quản lý hợp đồng cung cấp, chi tiết hợp đồng cung cấp

 Quản lý user, quyền user

 Quản lý các hình thức vận chuyển

CƠ SỞ LÝ THUYẾT

Giới thiệu mô hình MVC

Vào những năm 70 của thế kỷ 20, tại phòng thí nghiệm Xerox PARC ở Palo Alto, giao diện đồ họa (GUI) và lập trình hướng đối tượng (Object Oriented Programming) đã được phát triển, cho phép lập trình viên tương tác với các thành phần đồ họa như những đối tượng có thuộc tính và phương thức riêng Nghiên cứu tại Xerox PARC còn tiến xa hơn với việc giới thiệu kiến trúc MVC (Model – View – Controller), đánh dấu một bước tiến quan trọng trong phát triển phần mềm.

MVC, một kiến trúc phần mềm, được phát minh bởi Trygve Reenskaug tại Xerox Parc vào những năm 70 Nó lần đầu tiên được giới thiệu công khai trong Smalltalk-80, nhưng sau đó đã có một thời gian dài không có thông tin rõ ràng về MVC, ngay cả trong tài liệu kỹ thuật.

The first important documents on MVC were published in "A Cookbook for Using the Model-View-Controller User Interface Paradigm in Smalltalk – 80," authored by Glenn Krasner and Stephen Pope, and released in August/September 1988.

2.1.2 Kiến trúc của mô hình MVC

Trong kiến trúc MVC, một đối tượng đồ hoạ người dùng (GUI Component) bao gồm ba thành phần cơ bản: Model, View và Controller Việc phân chia này giúp lập trình viên dễ dàng quản lý và kiểm soát các thành phần trong quá trình phát triển, đồng thời mang lại lợi ích lâu dài cho việc kiểm tra, bảo trì và nâng cấp hệ thống.

Hình 2.1: Sơ đồ cấu trúc MVC

 Model: đại diện cho dữ liệu 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ó

View là hình ảnh trực quan của Model, tức là giao diện của đối tượng đồ họa Nó có chức năng hiển thị một hoặc nhiều Model một cách sinh động, đồng thời nhận thông tin từ các Model và biểu diễn chúng trên trang web.

Controller đóng vai trò quan trọng trong việc điều khiển tương tác giữa đối tượng đồ họa và người sử dụng, cũng như các đối tượng khác Nó hoạt động như một cầu nối giữa tầng View và Model, thực hiện nhiệm vụ tìm kiếm và xử lý một hoặc nhiều Model, sau đó gửi Model đã xử lý đến View để hiển thị thông tin cho người dùng.

2.1.3 Đặc điểm của mô hình MVC

 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 hoá các chức năng và được xây dựng nhanh chóng

MVC phân chia các chức năng của ứng dụng thành ba phần riêng biệt: Model, View và Controller, giúp việc phát triển ứng dụng trở nên dễ dàng hơn Kiến trúc này không chỉ thuận tiện cho việc thêm tính năng mới mà còn cho phép sửa đổi các tính năng cũ mà không gây ảnh hưởng đến các phần khác của ứng dụng.

MVC đã tách biệt sự phụ thuộc giữa các thành phần của đối tượng đồ họa, giúp tăng cường tính linh động và khả năng tái sử dụng Nhờ vào cấu trúc này, các thành phần như giao diện (View), cách lưu trữ (Model) và cách xử lý (Controller) có thể được thay đổi một cách dễ dàng mà không ảnh hưởng đến các phần còn lại của đối tượng.

Công nghệ ASP.NET MVC5

2.2.1 Lịch sử phát triển của ASP.NET

Thời kỳ đầu Common Gateway Interface (CGI)

Thời kỳ tiếp theo Microsoft Internet Database Connector (IDC)

Bảng 2.1: Quá trình phát triển của ASP.NET

2.2.2 Khái quát các thành phần của ASP.NET MVC

Giống như mô hình MVC, ASP.NET MVC phân chia ứng dụng thành ba thành phần chính: Models, Views và Controllers, mỗi thành phần đảm nhận một vai trò riêng biệt và tương tác lẫn nhau để tạo ra một hệ thống hoạt động hiệu quả.

Hình 2.2: Nền tảng ASP.NET MVC Framework

Models là thành phần chịu trách nhiệm lưu trữ thông tin và trạng thái của các đối tượng, thường được ánh xạ từ một bảng trong cơ sở dữ liệu (CSDL).

Views là thành phần chịu trách nhiệm hiển thị thông tin cho người dùng qua giao diện, thường lấy dữ liệu từ thành phần Models.

Controllers là thành phần chịu trách nhiệm xử lý các tương tác giao diện và thao tác với Models, đồng thời lựa chọn Views phù hợp để hiển thị trên màn hình Trong ASP.NET MVC, Views chỉ đảm nhận vai trò hiển thị giao diện, trong khi Controllers quản lý dòng nhập xuất và xử lý các hành động của người dùng.

2.2.3 Lợi ích của mô hình ASP.NET MVC

 Có tính mở rộng do có thể thay thế từng thành phần một cách dễ dàng

 Không sử dụng Viewstate, giúp các nhà phát triển dễ dàng điều khiển ứng dụng màn hình

 Hệ thống định tuyến mới mạnh mẽ

 Hỗ trợ tốt hơn cho việc kiểm thử, xác định và kiểm tra lại các yêu cầu trước khi bắt tay vào viết code

 Hỗ trợ kết hợp tốt giữa người lập trình và người thiết kế giao diện

 Sử dụng các tính năng tốt nhất đã có của ASP.NET

2.2.4 Đặc điểm ASP.NET MVC FRAMEWORK

 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ành phần View

ASP.NET offers comprehensive security features, including Form and Windows authentication, URL authorization, membership and roles management, as well as output and data caching It also supports section and profile state management, a robust configuration system, and a flexible provider architecture, ensuring a secure and efficient web application environment.

Clearly delineate the relationships, enabling the possibility of Test Driven Development (TDD) Unit testing can be performed within the application without the need to run Controllers alongside the ASP.NET process, allowing the use of any unit testing framework such as NUnit, MBUnit, or 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ới những URL sạch

Trong mô hình MVC, không còn sử dụng mô hình post-back từ giao diện gửi đến server, mà thay vào đó, các post-back sẽ được chuyển trực tiếp từ View đến lớp Controller Điều này đồng nghĩa với việc loại bỏ viewstate và chu trình sống của trang (page lifecycle) trong kiến trúc MVC.

 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 định view engine mặc định cho một project

 Các loại view engine: o Web Forms (ASPX) o Razor o View engine nguồn mở như Spark, NHaml, NDjango

 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ạ URLs sang các Controller Classes

ASP.NET cho phép xác định các quy luật và cài đặt đường đi một cách dễ dàng, từ đó giúp xác định Controller và action cần thực thi.

 ASP.NET 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 lời gọi hàm của Controller

 Model Binding là tính năng thế mạnh của ASP.NET MVC (và bây giờ nó cũng được áp dụng cho cả Web Forms trong phiên bản ASP.NET 4.5)

 Hỗ trợ bạn viết phương thức nhận một đối tượng tùy biến như là một tham số

Với Model Binding, lập trình viên có thể tập trung vào việc triển khai logic nghiệp vụ mà không cần lo lắng về việc ánh xạ dữ liệu từ người dùng sang các đối tượng NET.

Filters là một tính năng mạnh mẽ trong ASP.NET MVC, giúp kiểm tra tính hợp lệ trước khi gọi một action method hoặc sau khi action method được thực thi.

 Razor View: từ ASP.NET MVC3 đi kèm với một công cụ View mới có tên là Razor với những lợi ích sau:

 Cú pháp Razor là sạch sẽ và xúc tích, đòi hỏi một số lượng tối thiểu các tổ hợp phím

 Việc tìm hiểu Razor tương đối dễ dàng vì nó dựa trên ngôn ngữ C# và Visual Basic

 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ạy các ứng dụng hoặc phải chạy website

2.2.5 Các tính năng của mô hình MVC3 và MVC4

 So với phiên bản ASP.NET MVC2 thì MVC3 được hỗ trợ thêm HTML5 và CSS3

 Cải thiện về Model Validation – tính năng kiểm tra tính hợp lệ của dữ liệu do người dùng nhập vào

 Hỗ trợ thêm 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

Enhancing Dependency Injection with IDependencyResolver in ASP.NET MVC3 involves two key components: DependencyResolver and the IDependencyResolver interface This implementation follows the Service Locator pattern, enabling the framework to access the DIContainer when it needs to interact with a specific class implementation.

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

 Hỗ trợ caching trong Partial page

 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

 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

 Kiểm soát Bundling và Minification thông qua web.config, hỗ trợ giảm thời gian load các file js nằm trong folder Scripts

 Hỗ trợ cho việc đăng nhập OAuth và OpenID bằng cách sử dụng thư viện DotNetOpenAuth 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.6 Cải tiến của mô hình 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ứ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.

Bootstrap

Bootstrap là một framework CSS do Twitter phát triển, cung cấp bộ chọn, thuộc tính và giá trị sẵn có để giúp lập trình viên web tiết kiệm thời gian và công sức trong việc tạo class CSS và mã HTML Ngoài việc hỗ trợ CSS, Bootstrap còn tích hợp các chức năng tiện ích dựa trên jQuery như Carousel, Tooltip và Popovers, mang lại sự linh hoạt và tiện lợi cho các dự án web.

 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

Trình duyệt đã được kiểm tra kỹ lưỡng về tính tương thích với thiết bị, do đó người dùng có thể hoàn toàn tin tưởng vào kết quả Điều này không chỉ giảm thiểu nhu cầu kiểm tra lại mà còn giúp dự án tiết kiệm đáng kể thời gian và chi phí.

Chỉ cần nắm vững kiến thức cơ bản về HTML, CSS, Javascript và Jquery, bạn có thể tận dụng Bootstrap để thiết kế một trang web đẹp mắt và hoàn chỉnh mà không cần viết quá nhiều mã CSS.

Giao diện mặc định của nó mang màu xám bạc sang trọng, đi kèm với các component thiết yếu cho website hiện đại Là một mã nguồn mở, người dùng có thể dễ dàng tùy chỉnh theo sở thích cá nhâ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 nên việc sử dụng

Bootstrap cho website sẽ phù hợp với tất cả kích thước màn hình Nhờ đó không cần xây dựng thêm một trang web riêng biệt cho mobile

Đội ngũ phát triển Bootstrap đã giới thiệu tính năng Customizer, cho phép người thiết kế dễ dàng lựa chọn các thuộc tính và component phù hợp với dự án của mình mà không cần tải toàn bộ mã nguồn về máy.

Authentication Filter

Một trong những vấn đề bảo mật quan trọng là đảm bảo chỉ những người dùng hợp lệ được phép truy cập vào hệ thống Trong ASP.NET, hai khái niệm chính liên quan đến bảo mật là Authentication (xác thực) và Authorization (ủy quyền).

 Authentication là xác thực người dùng Trong MVC5, Authentication Filter được tuỳ chỉnh hoặc chứng thực từ hãng thứ 3 cung cấp

 Khi tạo 1 Project MVC5, người dùng được lựa chọn 4 loại security:

No Authentication Ứng dụng không hỗ trợ security

Individual User Accounts Ứng dụng sử dụng tài khoản được quả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 Windows Azure Directory

Windown Authentication Ứng dụng chạy trên intranet, tức là sử dụng tài khoản windows để đăng nhập

Bảng 2.2: Các loại security trong MVC5

Mỗi loại bảo mật sẽ phù hợp với các ứng dụng khác nhau Khi lựa chọn Tài Khoản Người Dùng Cá Nhân, ứng dụng hoạt động trên Internet và sử dụng SQL Server để lưu trữ thông tin thành viên hoặc cho phép đăng nhập từ các hệ thống bên ngoài như Gmail và Facebook Người dùng có thể thực hiện các thao tác như đăng ký, đăng nhập, đổi mật khẩu và đăng xuất thông qua tài khoản cục bộ hoặc tài khoản từ bên ngoài.

 Code của AccountController có 2 sự khác biệt:

Annotation [Authorize] được sử dụng để ngăn chặn truy cập vào mọi action trong controller khi người dùng chưa đăng nhập, trừ khi action đó được đánh dấu bằng annotation [AllowAnonymous].

Thuộc tính UserManager được khởi tạo trong constructor nhằm quản lý các thành viên, đồng thời hỗ trợ các chức năng bảo mật như đăng ký, đăng nhập và thay đổi mật khẩu.

Giới thiệu mô hình B2C

Mô hình B2C (Business to Consumer), hay còn gọi là mô hình bán lẻ trực tuyến, là hình thức thương mại điện tử diễn ra giữa doanh nghiệp và người tiêu dùng.

Các công ty và doanh nghiệp sẽ tiến hành buôn bán và trao đổi hàng hóa cũng như dịch vụ cho người tiêu dùng, trong đó doanh nghiệp có thể là nhà sản xuất, nhà phân phối hoặc đại lý.

 Đây là loại giao dịch quen thuộc và phổ biến nhất trong thương mại điện tử xuất phát từ những nhu cầu mua bán hàng hóa qua mạng

Mô hình B2C được chia thành 2 loại là cửa hàng điện tử và siêu thị điện tử

Cửa hàng điện tử (e-store) là một website chuyên cung cấp hàng hóa và dịch vụ, thường do cá nhân, nhà sản xuất hoặc nhà bán lẻ sở hữu Trang web này thường bao gồm danh mục sản phẩm, công cụ tìm kiếm, giỏ hàng, cổng thanh toán và dịch vụ khách hàng, tạo điều kiện thuận lợi cho việc mua sắm trực tuyến.

Siêu thị điện tử (e-mall) là một nền tảng trực tuyến tập hợp nhiều cửa hàng điện tử, nổi bật với danh bạ hàng hóa phong phú và danh mục các cửa hàng đa dạng.

Mô hình B2C được sử dụng phổ biến trong siêu thị điện tử và các trang web bán lẻ, cho phép khách hàng dễ dàng truy cập, lựa chọn sản phẩm, cung cấp thông tin cần thiết, chọn phương thức thanh toán và hoàn tất đơn hàng một cách nhanh chóng.

WEBSITE BÁN HÀNG ONLINE

Khảo sát thực trạng và phân tích đặc tả yêu cầu

Khám phá các website bán hàng online hiện nay và xác định các chức năng cần thiết của chúng Dựa trên khảo sát, hãy tìm hiểu cách tổ chức, đối tượng khách hàng mục tiêu và các chức năng cơ bản của một website bán hàng hiệu quả.

3.1.2.1 Một số website bán hàng online phổ biến hiện nay

Hình 3.4: Website pro-office.vn 3.1.2.2 Các chức năng chính của website bán hàng online

Mỗi website bán hàng đều có những chức năng đặc trưng phù hợp với loại sản phẩm được kinh doanh, nhưng tất cả đều sở hữu những tính năng cơ bản chung.

 Xem chi tiết mặt hàng

 Đối với quản trị viên:

 Quản lý nhà cung cấp

Xây dựng website bán văn phòng phẩm online sử dụng công nghệ ASP.NET MVC5 đáp ứng chức năng cơ bản của website bán hàng Giúp khách hàng dễ

27 dàng xem và đặt hàng , đồng thời giúp quản trị viên dễ dàng quản lý thông tin của website

Hình 3.5: Sơ đồ use case cho Khách hàng

Hình 3.6: Sơ đồ use case cho admin

Tên use case Đăng ký

Mô tả Cho phép khách hàng đăng ký tài khoản

Các bước thực hiện Khách hàng chọn đăng ký

Khách hàng điền đầy đủ thông tin đăng ký Nhấn nút đăng ký

Không thành công Khách hàng chưa điền những thông tin cần thiết đầy đủ

Khách hàng điền những thông tin không hợp lệ

Thành công Một tài khoản mới được tạo

Bảng 3.1: Mô tả use case Đăng ký

Tên use case Đăng nhập

Mô tả Cho phép đăng nhập tài khoản

Các bước thực hiện Actor chọn Đăng nhập

Actor điền username và password vào form đăng nhập

Nhấn nút đăng nhập Điều kiện Đã có tài khoản

Không thành công Thông tin không hợp lệ

Tài khoản không tồn tại

Thành công Đăng nhập thành công

Bảng 3.2: Mô tả use case Đăng nhập

Tên use case Đăng xuất

Mô tả Cho phép đăng xuất tài khoản

Các bước thực hiện Actor chọn Đăng xuất Điều kiện Đã đăng nhập

Thành công Đăng xuất thành công

Bảng 3.3: Mô tả use case Đăng xuất

3.1.4.2.4 Use case Quản lý mặt hàng:

Tên use case Quản lý mặt hàng

Mô tả Cho phép quản lý Mặt hàng

Các bước thực hiện Chọn QL mặt hàng

Chọn Mặt hàng Chọn chức năng:

 Điền thông tin Mặt hàng mới

 Hiện ra màn hình sửa

 Nhập thông tin muốn sửa

 Hiện ra màn hình xóa

 Màn hình hiển thị chi tiết Mặt hàng Điều kiện Đã đăng nhập admin

Không thành công Thêm hoặc sửa thông tin không hợp lệ

Thành công Mặt hàng mới được tạo hoặc mặt hàng được xem, sửa, xoá thành công

Bảng 3.4: Mô tả use case Quản lý mặt hàng

3.1.4.2.5 Use case Quản lý loại mặt hàng:

Tên use case Quản lý loại mặt hàng

Mô tả Cho phép quản lý Loại mặt hàng

 Điền thông tin Loại mặt hàng mới

 Màn hình hiển thị chi tiết Loại mặt hàng Điều kiện Đã đăng nhập admin

Thành công Loại mặt hàng mới được tạo hoặc loại mặt hàng được xem, sửa, xoá thành công

Bảng 3.5: Mô tả use case Quản lý loại mặt hàng

3.1.4.2.6 Use case Quản lý nhà sản xuất

Tên use case Quản lý nhà sản xuất

Mô tả Cho phép quản lý Nhà sản xuất

 Điền thông tin Nhà sản xuất mới

 Màn hình hiển thị chi tiết Nhà sản xuất Điều kiện Đã đăng nhập admin

Thành công Nhà sản xuất mới được tạo hoặc nhà sản xuất được xem, sửa, xoá thành công

Bảng 3.6: Mô tả use case Quản lý nhà sản xuất

3.1.4.2.7 Use case Quản lý nhà cung cấp:

Tên use case Quản lý nhà cung cấp

Mô tả Cho phép quản lý Nhà cung cấp

Các bước thực hiện Chọn QL nhà cung cấp

 Điền thông tin Nhà cung cấp mới

 Màn hình hiển thị chi tiết Nhà cung cấp Điều kiện Đã đăng nhập admin

Thành công Nhà cung cấp mới được tạo hoặc nhà cung cấp được xem, sửa, xoá thành công

Bảng 3.7: Mô tả use case Quản lý nhà cung cấp

3.1.4.2.8 Use case Quản lý loại nhà cung cấp:

Tên use case Quản lý loại nhà cung cấp

Mô tả Cho phép quản lý Loại nhà cung cấp

Chọn Loại nhà cung cấp

 Điền thông tin loại nhà cung cấp mới

 Màn hình hiển thị chi tiết Loại nhà cung cấp Điều kiện Đã đăng nhập admin

Thành công Loại nhà cung cấp mới được tạo hoặc loại nhà cung cấp được xem, sửa, xoá thành công

Bảng 3.8: Mô tả use case Quản lý loại nhà cung cấp

3.1.4.2.9 Use case Quản lý hợp đồng cung cấp:

Tên use case Quản lý hợp đồng cung cấp

Mô tả Cho phép quản lý Hợp đồng cung cấp

Chọn Hợp đồng cung cấp

 Điền thông tin Hợp đồng cung cấp mới

 Màn hình hiển thị chi tiết Hợp đồng cung cấp Điều kiện Đã đăng nhập admin

Thành công Hợp đồng cung cấp mới được tạo hoặc hợp đồng cung cấp được xem, sửa, xoá thành công

Bảng 3.9: Mô tả use case Quản lý hợp đồng cung cấp

3.1.4.2.10 Use case Quản lý chi tiết hợp đồng cung cấp:

Tên use case Quản lý chi tiết hợp đồng cung cấp

Mô tả Cho phép quản lý Chi tiết hợp đồng cung cấp

Chọn Chi tiết hợp đồng cung cấp

 Điền thông tin Chi tiết hợp đồng cung cấp mới

 Màn hình hiển thị chi tiết Chi tiết hợp đồng cung cấp Điều kiện Đã đăng nhập admin

Thành công Chi tiết hợp đồng cung cấp mới được tạo hoặc chi tiết hợp đồng cung cấp được xem, sửa, xoá thành công

Bảng 3.10: Mô tả use case Quản lý chi tiết hợp đồng cung cấp

3.1.4.2.11 Use case Quản lý khả năng cung cấp:

Tên use case Quản lý khả năng cung cấp

Mô tả Cho phép quản lý Khả năng cung cấp

Chọn Khả năng cung cấp

 Điền thông tin Khả năng cung cấp mới

 Màn hình hiển thị chi tiết Khả năng cung cấp Điều kiện Đã đăng nhập admin

Thành công Khả năng cung cấp mới được tạo hoặc khả năng cung cấp được xem, sửa, xoá thành công

Bảng 3.11: Mô tả use case Quản lý khả năng cung cấp

3.1.4.2.12 Use case Quản lý chi tiết khả năng cung cấp:

Tên use case Quản lý chi tiết khả năng cung cấp

Mô tả Cho phép quản lý Chi tiết khả năng cung cấp

Chọn Chi tiết khả năng cung cấp

 Điền thông tin Chi tiết khả năng cung cấp mới

 Màn hình hiển thị chi tiết Chi tiết khả năng cung cấp Điều kiện Đã đăng nhập admin

Thành công Chi tiết khả năng cung cấp mới được tạo hoặc chi tiết khả năng cung cấp được xem, sửa, xoá thành công

Bảng 3.12: Mô tả use case Quản lý chi tiết khả năng cung cấp

3.1.4.2.13 Use case Quản lý đặt hàng:

Tên use case Quản lý đặt hàng

Mô tả Cho phép quản lý đặt hàng

Các bước thực hiện Chọn QL đặt hàng

Chọn Đơn đặt hàng Chọn chức năng:

 Màn hình hiển thị chi tiết Đặt hàng Điều kiện Đã đăng nhập admin

Thành công Đơn đặt hàng được xem, sửa thành công

Bảng 3.13: Mô tả use case Quản lý đặt hàng

3.1.4.2.14 Use case Quản lý chi tiết đặt hàng:

Tên use case Quản lý chi tiết đặt hàng

Mô tả Cho phép quản lý Chi tiết đặt hàng

Các bước thực hiện Chọn QL đặt hàng

Chọn Chi tiết đơn đặt hàng

 Điền thông tin Chi tiết đặt hàng mới

 Màn hình hiển thị chi tiết Chi tiết đặt hàng Điều kiện Đã đăng nhập admin

Thành công Chi tiết đặt hàng mới được tạo hoặc chi tiết đặt hàng được xem, sửa, xoá thành công

Bảng 3.14: Mô tả use case Quản lý chi tiết đặt hàng

3.1.4.2.15 Use case Quản lý giao hàng:

Tên use case Quản lý giao hàng

Mô tả Cho phép quản lý giao hàng

Các bước thực hiện Chọn QL giao hàng

Chọn Tình hình giao hàng Chọn chức năng:

 Điền thông tin Giao hàng mới

 Màn hình hiển thị chi tiết Giao hàng Điều kiện Đã đăng nhập admin

Thành công Giao hàng mới được tạo hoặc giao hàng được xem, sửa, xoá thành công

Bảng 3.15: Mô tả use case Quản lý giao hàng

3.1.4.2.16 Use case Quản lý chi tiết giao hàng:

Tên use case Quản lý chi tiết giao hàng

Mô tả Cho phép quản lý Chi tiết giao hàng

Chọn Chi tiết giao hàng

 Điền thông tin Chi tiết giao hàng mới

 Màn hình hiển thị chi tiết Chi tiết giao hàng Điều kiện Đã đăng nhập admin

Thành công Chi tiết giao hàng mới được tạo hoặc chi tiết giao hàng được xem, sửa, xoá thành công

Bảng 3.16: Mô tả use case Quản lý chi tiết giao hàng

3.1.4.2.17 Use case Quản lý hình thức vận chuyển:

Tên use case Quản lý hình thức vận chuyển

Mô tả Cho phép quản lý Hình thức vận chuyển

 Điền thông tin Hình thức vận chuyển mới

 Màn hình hiển thị chi tiết Hình thức vận chuyển Điều kiện Đã đăng nhập admin

Thành công Hình thức vận chuyển mới được tạo hoặc hình thức vận chuyển được xem, sửa, xoá thành công

Bảng 3.17: Mô tả use case Quản lý hình thức vận chuyển

3.1.4.2.18 Use case Quản lý khách hàng:

Tên use case Quản lý khách hàng

Mô tả Cho phép quản lý Khách hàng

Các bước thực hiện Chọn QL khách hàng

Chọn Thông tin khách hàng

 Điền thông tin Khách hàng mới

 Màn hình hiển thị chi tiết Khách hàng Điều kiện Đã đăng nhập admin

Thành công Khách hàng mới được tạo hoặc khách hàng được xem, xoá thành công

Bảng 3.18: Mô tả use case Quản lý khách hàng

3.1.4.2.19 Use case Quản lý loại khách hàng:

Tên use case Quản lý loại khách hàng

Mô tả Cho phép quản lý Loại khách hàng

Các bước thực hiện Chọn QL khách hàng

 Điền thông tin Loại khách hàng mới

 Màn hình hiển thị chi tiết Loại khách hàng Điều kiện Đã đăng nhập admin

Thành công Loại khách hàng mới được tạo hoặc loại khách hàng được xem, sửa, xoá thành công

Bảng 3.19: Mô tả use case Quản lý loại khách hàng

3.1.4.2.20 Use case Quản lý user:

Tên use case Quản lý user

Mô tả Cho phép quản lý User

Các bước thực hiện Chọn QL user

Chọn Quản lý thành viên

 Điền thông tin User mới

 Màn hình hiển thị chi tiết User Điều kiện Đã đăng nhập admin

Thành công User mới được tạo hoặc user được xem, sửa, xoá thành công

Bảng 3.20: Mô tả use case Quản lý user

3.1.4.2.21 Use case Quản lý quyền user:

Tên use case Quản lý quyền user

Mô tả Cho phép quản lý Quyền user

Các bước thực hiện Chọn QL user

Chọn Quản lý quyền hạn

 Điền thông tin Quyền user mới

 Màn hình hiển thị chi tiết Quyền user Điều kiện Đã đăng nhập admin

Thành công Quyền user mới được tạo hoặc quyền user được xem, sửa, xoá thành công

Bảng 3.21: Mô tả use case Quản lý quyền user

3.1.4.2.22 Use case Quản lý giỏ hàng:

Tên use case Quản lý giỏ hàng

Mô tả Cho phép khách hàng quản lý Giỏ hàng

Các bước thực hiện Chọn chức năng:

1 Thêm: Nhấn vào nút Mua hàng trên mặt hàng

 Chọn Xem danh sách yêu thích

 Chỉ cần điền số lượng mặt hàng vào textbox là tự động giỏ hàng được cập nhật

Không thành công Chọn số lượng sản phẩm lớn hơn số lượng mặt hàng có trong kho

Thành công trong việc quản lý giỏ hàng bao gồm việc thêm mới hoặc tạo giỏ hàng, cập nhật số lượng sản phẩm trong giỏ hàng, và xóa đơn hàng khi cần thiết.

3.1.4.2.23 Use case Tìm kiếm theo tên mặt hàng:

Tên use case Tìm kiếm theo tên mặt hàng

Mô tả Cho phép khách hàng tìm kiếm mặt hàng theo tên mặt hàng

Các bước thực hiện Nhập thông tin vào ô tìm kiếm, sau đó nhấn Search

Không thành công Không tìm thấy mặt hàng nào có tên phù hợp với thông tin khách hàng nhập vào

Thành công Hiển thị những mặt hàng có tên phù hợp với thông tin mà khách hàng nhập vào

Bảng 3.23: Mô tả use case Tìm kiếm theo tên mặt hàng

3.1.4.2.24 Use case Xem chi tiết mặt hàng:

Tên use case Xem chi tiết mặt hàng

Mô tả Cho phép khách hàng xem chi tiết mặt hàng

Các bước thực hiện Nhấn vào Chi tiết trên mặt hàng

Thành công Hiển thị chi tiết mặt hàng

Bảng 3.24: Mô tả use case Xem chi tiết mặt hàng

Tên use case Đặt hàng

Mô tả Cho phép khách hàng đặt hàng

Các bước thực hiện Nhấn vào Thanh toán trong giỏ hàng Điền thông tin vào đơn hàng

Nhấn Hoàn thành Điều kiện Khách hàng phải đăng nhập

Thành công Hiển thị thông tin chi tiết của đơn đặt hàng

Bảng 3.25: Mô tả use case Đặt hàng

Thiết kế

Hình 3.7: Trang chủ người dùng (nửa trên)

47 Hình 3.8: Trang chủ người dùng (nửa dưới)

Hình 3.9: Giao diện đặt hàng

48 Hình 3.10: Giao diện giỏ hàng

Hình 3.11: Giao diện xem chi tiết mặt hàng

Hình 3.12: Trang chủ quản trị

Hình 3.13: Giao diện Quản lý mặt hàng (nửa trên)

50 Hình 3.14: Giao diện Quản lý mặt hàng (nửa dưới)

Hình 3.15: Giao diện quản lý_Xem thông tin chi tiết

51 Hình 3.16: Giao diện quản lý_Sửa thông tin

Hình 3.17: Giao diện quản lý_Xoá

Hình 3.18: Giao diện quản lý_Thêm mới

3.2.2 Thiết kế cơ sở dữ liệu

Thứ tự Tên trường Kiểu dữ liệu Mô tả

2 Username nvarchar(50) Tên đăng nhập

3 Password nvarchar(100) Mật khẩu đăng nhập

8 CMND nchar(10) Chứng minh nhân dân

11 SDT nvarchar(50) Số điện thoại

12 Salt nvarchar(50) Lần đăng nhập gần nhất

Bảng 3.26: Mô tả bảng User 3.2.2.3.2 Bảng Roles

Bảng 3.27: Mô tả bảng Roles

1 MaMH nchar(10) Mã mặt hàng

2 TenMH nvarchar(50) Tên mặt hàng

3 HinhAnh nvarchar(MAX) Hình ảnh mặt hàng

4 DonGia nvarchar(50) Giá mặt hàng

5 SoLuong nchar(10) Số lượng hàng còn trong kho

6 DonViTinh nvarchar(50) Đơn vị tính

7 MaLoaiMH nchar(10) Mã loại mặt hàng

8 MaNSX nchar(10) Mã nhà sản xuất

9 TinhTrang nvarchar(MAX) Tình trạng hàng

Bảng 3.28: Mô tả bảng MatHang 3.2.2.3.4 Bảng Loại mặt hàng (LoaiMatHang)

1 MaLoaiMH nchar(10) Mã loại mặt hàng

2 LoaiMH nvarchar(50) Tên loại mặt hàng

Bảng 3.29: Mô tả bảng LoaiMatHang 3.2.2.3.5 Bảng Nhà sản xuất (NhaSanXuat)

1 MaNSX nchar(10) Mã nhà sản xuất

2 TenNSX nvarchar(100) Tên nhà sản xuất

Bảng 3.30: Mô tả bảng NhaSanXuat

1 MaKH nchar(10) Mã khách hàng

2 UserName nvarchar(50) Tên đăng nhập

3 Password nvarchar(MAX) Mật khẩu

5 TenKH nvarchar(50) Tên khách hàng

6 MaLoaiKH nchar(10) Mã loại khách hàng

9 CMND nchar(10) Chứng minh nhân dân

10 SDT nchar(10) Số điện thoại

13 AnhDaiDien nvarchar(MAX) Ảnh đại diện

Bảng 3.31: Mô tả bảng KhachHang 3.2.2.3.7 Bảng LoaiKhachHang

1 MaLoaiKH nchar(10) Mã loại khách hàng

2 TenLoaiKH nvarchar(50) Tên loại khách hàng

3 Giảm giá nchar(10) Chiết khấu

Bảng 3.32: Mô tả bảng LoaiKhachHang 3.2.2.3.8 Bảng Wishlist (WISTLIST)

1 Ma nchar(10) Mã danh sách yêu thích

Bảng 3.33: Mô tả bảng WISHLIST 3.2.2.3.9 Bảng Đặt hàng (DatHang)

1 MaDH nchar(10) Mã đặt hàng

3 NgayDH datetime Ngày đặt hàng

4 TenNguoiNhan nvarchar(50) Tên người nhận hàng

5 SDTNguoiNhan nvarchar(50) Số điện thoại người nhận

6 Email nvarchar(200) Email người nhận

7 DiaChiNguoiNhan nvarchar(200) Địa chỉ người nhận

8 HTVanChuyen nchar(10) Mã hình thức vận chuyển

9 Giá trị hàng hoá float Tổng giá trị hàng hoá

10 GiamGia float Số tiền chiết khấu

11 TongGiaTriDH float Tổng giá trị của đơn đặt hàng

12 TinhTrang nvarchar(MAX) Tình trạng đơn đặt hàng

Bảng 3.34: Mô tả bảng DatHang 3.2.2.3.10 Bảng Chi tiết đặt hàng (CTDH)

1 MaCTDH nchar(10) Mã chi tiết đặt hàng

2 MaDH nchar(10) Mã đặt hàng

4 SoLuong nchar(10) Số lượng mặt hàng đã đặt

5 GhiChu nvarchar(MAX) Ghi chú

6 ThanhTien float Tổng số tiền giá trị hàng hoá

Bảng 3.35: Mô tả bảng CTDH

3.2.2.3.11 Bảng Hình thức vận chuyển (VanChuyen)

1 MaHTVC nchar(10) Mã hình thức vận chuyển

2 HinhThucVanChuyen nvarchar(50) Hình thức vận chuyển

3 GiaVanChuyen nvarchar(50) Giá vận chuyển

Bảng 3.36: Mô tả bảng VanChuyen 3.2.2.3.12 Bảng Nhà cung cấp (NhaCungCap)

1 MaNCC nchar(10) Mã nhà cung cấp

2 TenNCC nvarchar(50) Tên nhà cung cấp

3 LoaiNCC nchar(10) Mã loại nhà cung cấp

4 KNCC nchar(10) Mã khả năng cung cấp

5 DiaChi nvarchar(250) Địa chỉ nhà cung cấp

6 SDT nvarchar(250) Số điện thoại nhà cung cấp

7 Email nvarchar(50) Email nhà cung cấp

Bảng 3.37: Mô tả bảng NhaCungCap 3.2.2.3.13 Bảng Loại nhà cung cấp (LoaiNCC)

1 MaLoaiNCC nchar(10) Mã loạivnhà cung cấp

2 LoaiNCC nvarchar(250) Tên loại nhà cung cấp

Bảng 3.38: Mô tả bảng LoaiNCC 3.2.2.3.14 Bảng Hợp đồng cung cấp (HDCC)

1 MaHDCC nchar(10) Mã hợp đồng cung cấp

2 NCC nchar(10) Mã nhà cung cấp

3 NgayCC datetime Ngày cung cấp

4 TongTienPhaiTra nvarchar(50) Tổng giá trị hợp đồng phải thanh toán Bảng 3.39: Mô tả bảng HDCC

3.2.2.3.15 Bảng Khả năng cung cấp (KNCC)

2 TenKNCC nvarchar(50) Tên khả năng cung cấp

Bảng 3.40: Mô tả bảng KNCC 3.2.2.3.16 Bảng Chi tiết khả năng cung cấp (CTKhaNangCC)

1 MaCTKNCC nchar(10) Mã chi tiết khả năng cung cấp

Bảng 3.41: Mô tả bảng CTKhaNangCC 3.2.2.3.17 Bảng Giao hàng (GiaoHang)

1 MaGH nchar(10) Mã giao hàng

2 MaDH nchar(10) Mã đơn đặt hàng

3 NgayDH datetime Ngày đặt hàng

4 NgayGH datetime Ngày giao hàng

5 SoTienThu float Số tiền thu khi giao hàng

Bảng 3.42: Mô tả bảng GiaoHang 3.2.2.3.18 Bảng Chi tiết giao hàng (ChiTietGH)

1 MaCTGH nchar(10) Mã chi tiết giao hàng

2 MaGH nchar(10) Mã giao hàng

4 SoLuong nchar(10) Số lượng hàng giao

Bảng 3.43: Mô tả bảng ChiTietGH

Hình 3.39: Sơ đồ tuần tự của quá trình login

Hình 3.40: Sơ đồ tuần tự của quá trình đăng ký

Hình 3.41: Sơ đồ tuần tự của quá trình đặt hàng 3.2.3.4 Tìm kiếm mặt hàng

Hình 3.42: Sơ đồ tuần tự của quá trình tìm kiếm mặt hàng

Hình 3.43: Sơ đồ tuần tự của quá trình quản lý mặt hàng_Xem chi tiết mặt hàng

Hình 3.44:Sơ đồ tuần tự của quá trình quản lý mặt hàng_Sửa thông tin mặt hàng

70 Hình 3.45: Sơ đồ tuần tự của quá trình quản lý mặt hàng_Xoá mặt hàng

Hình 3.46:Sơ đồ tuần tự của quá trình quản lý mặt hàng_Thêm mặt hàng

Tiêu đề	Xây Dựng Web Bán Hàng Với Công Nghệ ASP.NET MVC Và Web API
Tác giả	Nguyễn Hồng Mai Thảo
Người hướng dẫn	ThS. Nguyễn Minh Đạo
Trường học	Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
Chuyên ngành	Công nghệ thông tin
Thể loại	Đồ án tốt nghiệp
Năm xuất bản	2016
Thành phố	Tp. Hồ Chí Minh

Định dạng
Số trang	82
Dung lượng	4,71 MB