xây dựng web ecommerce

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>ĐẠI HỌC QUỐC GIA HÀ NỘITRƯỜNG ĐẠI HỌC CÔNG NGHỆ</b>

<b>XÂY DỰNG WEB-ECOMMERCE</b>

<b>Giảng viên hướng dẫn: TS.Trần Trúc Mai Thành viên nhóm: Mai Thanh Phương</b>

<b>Vũ Hữu ThắngLê Đức Mạnh</b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b>LỜI MỞ ĐẦU</b>

Lời đầu tiên, chúng em xin chân thành gửi lời cảm ơn đến giảng viên hưng dn- thầy Trần Trúc Mai. Đồng thời, chúng em cũng cám ơn trường đã tạo điều kiện thuận lợi cho chúng em học tập và nghiên cứu.

Nhóm chúng em xin cam đoan dự án “Xây dựng WebEcommerce” là cơng trình nghiên cứu của nhóm dưi sự hưng dn của thầy Trần Mai.

Những tài liệu tham khảo trong dự án đã được nêu rõ trong phần tài liệu tham khảo. Nếu như phát hiện bất kỳ sự gian lận nào, cả nhóm xin hồn tồn trách nhiệm và mọi hình thức kỷ luật của khoa và nhà trường.

Ngày nay việc sử dụng các ứng dụng mua sắm trực tuyến khơng cịn gì là xa lạ đối vi tất cả chúng ta. Sau thời gian tìm hiểu và thống nhất giữa các thành viên trong nhóm, chúng em đã quyết định dựng một web application

WebEcommerce đơn giản bằng .Net Core 3.0 theo mơ hình MVC. Măc dù đây là lần đầu sử dụng cơng nghệ này và có gặp nhiều khó khăn lúc ban đầu nhưng chúng em đã cố gắng hoàn thiện tuy rằng chưa được hoàn hảo. Dưi đây là báo cáo của chúng em về các chức năng của dự án. Nhóm chúng em xin cảm ơn vì các thầy/cơ trong hội đồng vì đã dành chút thời gian đọc báo cáo dự án!

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>MỤC LỤC</b>

<b>LỜI MỞ ĐẦU ... 1 </b>

<b>MỤC LỤC ... 2 </b>

<b>CHƯƠNG 1. GIỚI THIỆU ... 4 </b>

<b>CHƯƠNG 2. GIỚI THIỆU VỀ DOT NET VÀ MƠ HÌNH MVC ... 5 </b>

3.2.1.<b>Đối tượng của website ... 7 </b>

<b>3.3.2. Sơ đồ phân rã chức năng ... 7 </b>

3.3.<b>Phân tích sơ đồ usecase ... 8 </b>

3.4.<b>Phân tích và thiết kế hệ thống (Database) ... 9 </b>

3.4.1.<b>Tổng quan hệ thống ... 9 </b>

<b>CHƯƠNG 4. ĐÁNH GIÁ THỰC NGHIỆM VÀ KẾT QUẢ ... 10 </b>

4.1.<b>Môi trường thực nghiệm ...</b>10

4.2.<b>Một số giao diện người dùng và các chức năng cụ thể, nổi bật ... 10 </b>

4.2.1.<b>Đối với Quản trị viên ... 10 </b>

4.2.1.1Đăng nhập website ... 10

4.2.1.2.Các tác vụ vi danh sách tài khoản ... 11

4.2.1.3.Các tác vụ vi danh sách sản phẩm ... 16

4.2.1.4.Đăng xuất WebAdmin ... 21

4.2.2.<b>Đối với người dùng ... 22 </b>

4.2.2.1.Giao diện đang nhập và đăng kí tài khoản ... 22

4.2.2.2.Tác vụ vi sản phẩm và giỏ hàng ... 27

<b> 4.2.3. RESTful Api Swagger……….30</b>

<b>CHƯƠNG 5. LỜI CUỐI ... 32 </b>

<b>TÀI LIỆU THAM KHẢO ... 41 </b>

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

<b>CHƯƠNG 1. GIỚI THIỆU</b>

Bố cục báo cáo này gồm 5 chương: Chương 1: Gii thiệu

Chương 2: Gii thiệu về DotNet và mơ hình MVC Chương 3: Phân tích thiết kế hệ thống

Chương 4: Đánh giá thực nghiệm và kết quả Chương 5: Kết luận

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

<b>CHƯƠNG 2. GIỚI THIỆU VỀ DOTNET VÀ MƠ HÌNH MVC </b>

<b>2.1. DotNET Core 3.0</b>

.Net Core được sinh ra là một phiên bản của .Net Framework; tất nhiên nó là mã nguồn mở (Open Source), là đa nền tảng và rất nhiều các phiên bản có thể được cài đặt trên 1 máy tính đơn lẻ. Những cơng cụ dành cho nó đã được thiết kế, trưc tiên là CLI (Command Line Interface), từ đó các developers có thể phát triển sử dụng .Net Core trên bất kỳ máy tính nào có bất kỳ text editor nào. Microsoft cũng đã hỗ trợ rất tuyệt vời cho nó, sử dụng các công cụ truyền thống như Visual Studio, Visual Studio for Mac, và Visual Studio Code.

.Net Core 3.0 mang lại vơ số điều mi. Có hàng triệu developers tồn cầu phát triển ứng dụng trên Windows bằng Winforms và WPF, cả hai đều đã được thêm vào .Net Core 3.0. Rất nhiều ứng dụng trong số đó sử dụng Entity Framework 6, và nó cũng đã được đưa vào .Net Core 3.0. Ngồi ra cịn bao gồm C# 8, .Net Standard 2.1 v.v..

Mặc dù hiện tại đã có .NET 6.0 nhưng phiên bản .Net 3.0 vn cịn được sử dụng rất nhiều tại các cơng ty cơng nghệ thơng tin hiện nay.

<b>2.2. Mơ hình MVC</b>

<b>- MVC là từ viết tắt bởi 3 từ Model – View – Controller. Đây là mơ hình thiết kế sử dụng </b>

trong kỹ thuật phần mềm. Mơ hình source code thành 3 phần, tương ứng mỗi từ . Mỗi từ thực hiện các chức năng khác nhau trong một mơ hình.

- Model là cầu nối giữa View và Controller, là bộ phận có chức năng lưu trữ tồn bộ dữ liệu của ứng dựng. View là phần giao diện dành cho người sử dụng còn Controller là bộ phận có nhiệm vụ sử lí các u cầu người dùng thông qua View.

- Dưi đây là sơ đồ hệ thống dự án của nhóm chúng em

- Hệ thống bao gồm WebAdmin cho phép admin quản lý thông tin về người dùng và các sản phẩm. WebEcommerce tương tác vi người dùng để có thể xem các sản phẩm và thực hiện đặt hàng. WebAdmin và WebEcommerce thông qua Api Integration kết nối vi BackendApi và BackendApi kết nối vơi Database. Bằng việc chia sơ đồ tuy có phần hơi cồng kềnh nhưng có thể giúp chúng ta dễ dàng cập nhật và thêm các chức năng web.

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<b>CHƯƠNG 3. PHÂN TÍCH THIẾT KẾ HỆ THỐNG</b>

<b>3.1. Mô tả dự án3.1.1. Chức năng</b>

Đây là một hệ thống quản nhằm hỗ trợ việc lưu giữ, quản lý các sản phẩm Hệ thống có các chức năng như sau:

● Về phía người dùng: - Đăng nhập - Đăng kí

- Xem sản phẩm và chi tiết sản phẩm - Xem sản phẩm qua các danh mục có sẵn - Đặt hàng

● Về phía Quản trị viên website - Đăng nhập vào WebAdmin - Tra cứu hồ sơ người dùng

- Tạo người dùng mi và phân quyền cho người dùng - Thêm, sửa, xóa các sản phẩm và gán các đề mục sản phẩm

<b>3.1.2. Yêu cầu đặt ra</b>

a. Thiết bị và phần mềm:

- Máy tính có thể thiết kế được internet - Microsoft SQL Management Studio - Cài đặt Visual Studio

- Công nghệ sử dụng: .net core 3.0 , Entity Framework, EF Core, Swagger, Boostrap, Razor,…

b. Yêu cầu trang web Hệ thống web chia làm 2 phần: + WebAdmin: dành cho quản trị viên + WebEcommerce: dành cho người dùng

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

<b>3.2.Phân tích chức năng hệ thống3.2.1Đối tượng của website</b>

Website được xây dựng để đáp ứng 02 đối tượng chính: - Thành viên (đã đăng nhập)

- Quản trị viên (Có quyền quản lí người dùng và các sản phẩm)

<b>3.2.2. Sơ đồ phân rã chức năng</b>

Chức năng phía client được chia ra làm hai loại: chức năng của Người dùng và chức năng của Quản trị viên có quyền quản trị.

- Mơ tả chi tiết chức năng của Thành viên

- Mô tả chi tiết chức năng của Quản trị viên

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

<b>3.3. Phân tích usecase </b>

Đối vi người dùng trên hệ thống sẽ có các usecase như sau :

- Đăng nhập: Tài khoản trên hệ thống là do quản trị viên tạo hoặc do chính người dùng tự tạo

- Quản lý tài khoản: Người dùng có thể lưu mật khẩu

- Tương tác vi sản phẩm : Người dùng có thể tìm sản phẩm theo danh mục, xem chi tiết thông tin sản phẩm.

- Tương tác giỏ hàng: Người dùng có thể xem giỏ hàng và đặt hàng Đối vi Quản trị viên trên hệ thống sẽ có các usecase như sau:

- Đăng nhập: Tài khoản này được cấp riêng đăng nhập được cả WebAdmin và WebEcommerce và sử dụng các chức năng như người dùng

- Tương tác vi tài khoản người dùng: Có thể thêm, sửa, xóa và gán quyền cho người dùng

- Tương tác vi sản phẩm: thêm mi sản phẩm, xem chi tiết sản phẩm, xóa và tạo sản phẩm

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

<b>3.4.Phân tích và thiết kế hệ thống (Database)3.4.1.Tổng quan hệ thống</b>

- Database được được xây dựng như hình trên dựa vào EF Core vè Entity Framework - Ngoài các dữ liệu cơ bản trong Database trên cịn có các List liên kết như: + Trong AppUsers có <small>List<Cart>, List<Order>, List<Transaction></small>

+ Trong Products có <small>List<ProductInCategory>, List<OrderDetail>, List<Cart>, …</small>

Và còn nhiều List khác nữa.

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

<b>CHƯƠNG 4. ĐÁNH GIÁ THỰC NGHIỆM VÀ KẾT QUẢ</b>

Trong chương này trình bày về cách tiến hành xây dựng thực nghiệm và đánh giá hiệu quả của hệ thống.

<b>4.1. Môi trường thực nghiệm</b>

Hệ thống được cài đặt trên các hệ điều hành Windows (7, 8, 10) và cả Linux để cài đặt hệ thống. Giao diện sử dụng Boostrap, Razor. Về phía backend sử dụng .NET Core 3.0.

<b>4.2. Một số giao diện người dùng và các chức năng cụ thể, nổi bật.</b>

<b>4.2.1.Đối với Quản trị4.2.1.1 Đăng nhập website </b>

- Quản trị viên được cấp tài khoản có Bearer Token có thể dăng nhập vào WebAdmin

Giao diện Đăng nhập WebAdmin

Đăng nhập thành công cho ra kết quả:

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<b>4.2.1.2. Các tác vụ với danh sách tài khoản:</b>

-Trên hệ thống chọn người dụng

- Chọn danh sách và kết quả trả về là danh sách người dùng như sau:

- Tại đây, quản trị viên có thể thêm người dùng bằng cách chọn nút “Tạo mi”

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

và web sẽ hiển thị form tạo mi như sau:

- Giờ em sẽ tạo mi 1 người dùng thử:

- Báo lỗi mậu khẩu nỏ hơn 6 ký tự, ngoài ra còn báo các lỗi khác như email hoặc tên đăng nhập đã được sử dụng hoạc ngày sinh không hợp lệ.

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

<b>4.2.1. Đối với người dùng</b>

- Giao diện người dùng hỗ trợ tiếng việt:

- Giao diện người dùng hỗ trợ tiếng anh:

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

<b>4.2.1.1. Giao diện đang nhập và đăng kí tài khoản:</b>

- Demo đăng kí người dùng: form đăng kí

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

Thông báo tài khoản đã tồn tại

Sau khi đăng kí thành cơng:

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

- Người dùng có thể tùy chỉnh giao diện web:

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

<b>4.2.1.2. Tác vụ với sản phẩm và giỏ hàng</b>

- Người dùng có thể xem chi tiết sản phẩm:

P/s: phần thêm sản phẩm giỏ hàng của bọn em đang bị lỗi - Người dùng có thể xem danh sánh giỏ hàng:

Chọn Continue shopping để về trang chủ

- Ngồi ra cịn có thể tìm sản phẩm theo danh mục category:

</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">

- Xem hiển thị theo 2 kiểu danh sách:

- Người dùng có thể checkout giỏ hàng

</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">

- Điền thông tin và chọn Purchase để mua hàng và kết quả

- Đăng xuất trở về trang Index ra kết quả kho chọn Đăng xuất

</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31">

<b>4.2.3. RESTful Api Swagger</b>

- Ngồi các chức năng trên nhóm chúng em còn viết sẵn nhiều chức năng khác nhưng chưa kịp làm frontend nên những chức năng này có thể được update ở các version sau này của sản phẩm nếu tiếp tục phát triển

</div><span class="text_page_counter">Trang 33</span><div class="page_container" data-page="33">

<b>CHƯƠNG 5. LỜI CUỐI</b>

Cảm ơn các thầy cô trong hội đồng đã đọc hết báo cáo của nhóm em. Tuy cịn nhiều sai sót do chưa có nhiều kinh nghiệm nhưng việc tham gia bắt tay làm dự án này cùng nhau giúp chúng em có thêm đưuọc khá nhiều kiến thức bổ ích cũng như khả năng làm việc theo nhóm. Chúng em cũng gửi lời cảm ơn ti thầy Trần Trúc Mai đã hưng dn hỗ trợ bọn em thực hiện dự án này.

</div><span class="text_page_counter">Trang 34</span><div class="page_container" data-page="34">

<b>TÀI LIỆU THAM KHẢO</b>

1. 2. 3. 4.