bao cao project 2 hust

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ──────── ─────── BÀI TẬP LỚN MÔN PROJECT II ĐỀ TÀI Xây dựng website quản lý kho hàng Giáo viên hướng dẫn TS Nguyễn Khanh Vă.

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

──────── * ───────

BÀI TẬP LỚN

MÔN: PROJECT II

ĐỀ TÀI: Xây dựng website quản lý kho hàng

Giáo viên hướng dẫn: TS Nguyễn Khanh Văn

Nhóm sinh viên thực hiện: Nhóm 1

Họ và tên

Trần Quang Trung Quách Thế Trường Bùi Văn Kiên Nguyễn Thị Thùy Trang

MSSV20194195201941962018078520194190

Hà Nội, tháng 8 năm 2022

1.2 Xác định tập các nhiệm vụ cụ thể

Dựa trên tính thực tiễn của vấn đề, trong nội dung môn học Project II, em

đã lựa chọn đề tài xây dựng website quản lý kho hàng Mục đích cuối cùng làchương trình sau khi xây dựng có thể thể hiện đầy đủ các tính năng, hỗ trợ tối

ưu cho việc quản lý kho hàng Kết quả cuối cùng đạt được phải đảm bảo:

1 Đầy đủ các tính năng trong việc quản lý kho hàng (quản lý user của hệ thống,

quản lý sản phẩm, loại sản phẩm, trang nhập/xuất hàng, quản lý hàng tồn kho)

2 Giao diện thân thiện, dễ dàng sử dụng đối với người dùng.

3 Các thao tác với giao diện mượt mà, trơn tru.

1.3 Bố cục đồ án

Phần còn lại của báo cáo đồ án này được tổ chức như sau:

• Chương 2: Trình bày về khảo sát bài toàn và yêu cầu nghiệp vụ đặt

ra đối với bài toán

• Chương 3 : Trình bày về các công nghệ sử dụng để lập trình web.Trong chương này, em sẽ nêu rõ các các công nghệ sử dụng, các thưviện đi kèm

• Chương 4: Trình bày về cách xây dựng và tổ chức chương trình.Cách thiết kế chi tiết biểu đồ gói, biểu đồ lớp, thiết kế cở sở dữ liệu,thiết kế giao diện và kết quả dự án

• Chương 5: Kết luận và hướng phát triển mới cho bài toán

• Chương 6: Tài liệu tham khảo

2

• Chương 7: Báo cáo cá nhân.

3

Chương 2: Phân tích yêu cầu bài toán

Tổng quan: Trong chương 2, phân tích yêu cầu bài toán, em sẽ xác định

chức năng tổng quan của chương trình là gì và các yêu cầu phi chức năng củachương trình có thể có …

2.1 Tổng quan chức năng

Hệ thống gồm 3 loại user: admin, quản lý (manager), thủ kho (stocker)

Các chức năng chính của hệ thống:

• Đăng nhập

• Thay đổi mật khẩu

• Quản lý người dùng (chỉ admin có quyền sử dụng)

o Thêm người dùng: sử dụng mail để gửi tài khoản cho người dùng

o Chỉnh sửa thông tin người dùng

o Cập nhật database trực tiếp, không bị sai sót mất thông tin người dùng

o Tương tác nhanh gọn, mượt mà

Tốc độ truy xuất thông tin nhanh

4

Chương 3: Công nghệ sử dụng

Tổng quan: Ở trong chương 3, em sẽ trình bày về các công nghệ sẽ

được sử dụng để thiết kế xây dựng website quản lý kho hàng.

3.1 Công nghệ dùng thiết kế phần mềm

 Draw.io

Hình 3.1 Trang web draw.io

Draw.io được biết đến là một website cung cấp nền tảng cho ngườidùng vẽ các biểu đồ, mô hình, sơ đồ đơn giản Đặc biệt, người dùng có thể

sử dụng online không cần cài đặt vào máy, không bị giới hạn số lần sử dụng

và hoàn toàn miễn phí

3.2 Công nghệ dùng xây dựng website

 ReactJS

Hình 3.2 Logo framework ReactJS

• React là một thư viện UI phát triển tại Facebook để hỗ trợ việc xâydựng những thành phần (components) UI có tính tương tác cao, cótrạng thái và có thể sử dụng lại được React được sử dụng tạiFacebook trong production, và www.instagram.com được viết hoàntoàn trên React.

• Ưu điểm:

o Sử dụng DOM ảo, giúp cải thiện hiệu suất rất nhiều

o Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dung cúpháp đặc biệt là JSX (Javascript mở rộng) cho phép ta trộn giữacode HTML và Javascript

o Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các testcase giao diện vì virtual DOM được cài đặt hoàn toàn bằng JS

o Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các testcase giao diện vì virtual DOM được cài đặt hoàn toàn bằng JS

• Nhược điểm:

o Reactjs chỉ phục vụ cho tầng View,không có cơ chế 2-way binding

o Tích hợp Reactjs vào cácframework MVC truyền thống yêucầu cần phải cấu hình lại

o Một số thư viện sử dụng trong dựán: npm, yarn, redux, material ui,

…

 ASP NET Core C#

Hình 3.3 Logo framework Asp Net core

• ASP.NET Core là một open-source mới và framework đa nền tảng(cross-platform) cho việc xây dựng những ứng dụng hiện tại dựa trên

kết nối đám mây, giống như web apps, IoT và backend cho mobile Nóbao gồm các thành phần theo hướng module nhằm tối thiểu tài nguyên

và chi phí phát triển

• Ưu điểm:

o Tương thích hệ thống xây dựngWeb UI và Web APIs

o Tích hợp những client –sideframeworks hiện đại

o Dependency injection được xâydựng sẵn

o HTTP request được tối ưu nhẹ hơn

o Chuyển thực thể, thành phần,module như những NuGet packages

o Các công cụ mới để đơn giản hóaquá trình phát triển web hiện đại

o Xây dựng và chạy đa nền tảng

o Mã nguồn mở, tập trung vào cộngđồng

• Nhược điểm:

o Cần nhiều thời gian tìm hiểu trước khi sử dụng

vì asp.net core khá phức tạp và nhiều tínhnăng

• Một số thư viện sử dụng trong dự án; Asp.NET core 6.0, Web API template, Microsoft.AspNetCore.Authentication, Bcrypt.Net-Next, AutoMapper, EF Core, SwaggerUI, …

 SQL Server

Hình 3.4 Logo Sql server

• SQL Server là một hệ quản trị cơ sở dữ liệu quan hệ (RelationalDatabase Management System (RDBMS) ) sử dụng câu lệnh SQL(Transact-SQL) để trao đổi dữ liệu giữa máy Client và máy cài SQLServer Một RDBMS bao gồm databases, database engine và các ứngdụng dùng để quản lý dữ liệu và các bộ phận khác nhau trong RDBMS

Hình 3.5 Logo IDE Visual Studio Code

Visual Studio Code (VS Code hay VSC) là một trong những trình soạnthảo mã nguồn phổ biến nhất được sử dụng bởi các lập trình viên Nhanh,nhẹ, hỗ trợ đa nền tảng, nhiều tính năng và là mã nguồn mở chính là những

ưu điểm vượt trội khiến VS Code ngày càng được ứng dụng rộng rãi

 IDE Microsoft Visual Studio (Triển khai Asp Net Core)

Hình 3.6 Logo IDE Microsoft Visual Studio

Microsoft Visual Studio còn được gọi là "Trình soạn thảo mã nhiềungười sử dụng nhất thế giới ", được dùng để lập trình C++ và C# là chính

Nó được sử dụng để phát triển chương trình máy tính cho MicrosoftWindows, cũng như các trang web, các ứng dụng web và các dịch vụweb.Công nghệ quản lý source code

 Github

Hình 3.7 Logo công nghệ quản lý mã nguồn Github

GitHub là một dịch vụ nổi tiếng cung cấp kho lưu trữ mã nguồn Git

cho các dự án phần mềm Github có đầy đủ những tính năng của Git,

ngoài ra nó còn bổ sung những tính năng về social để các developer tươngtác với nhau

Link github của dự án:

• Frontend: https://github.com/trungtt123/project_2_frontend.git

• Backend: https://github.com/trungtt123/project_2_backend.git

Chương 4: Phát triển và triển khai ứng dụng

Tổng quan: Ở chương này, em sẽ trình bày thiết kế kiến trúc, chi

tiết cũng như cách xây dựng chương trình website quản lý kho hàng Cụthể đó là đi tìm hiểu kiến trúc phần mềm, chi tiết lớp, thiết kế cơ sở dữliệu… của ứng dụng

4.1 Biểu đồ lớp thực thể

Hình 4.1 Biểu đồ lớp thực thể

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

Hình 4.2 Database driagram

Đặc tả bảng

Bảng Role

STT Tên cột Kiểu dữ liệu Ràng buộc Ghi chú

Bảng User

STT Tên cột Kiểu dữ liệu Ràng buộc Ghi chú

2 UserName VARCHAR(100) NOT NULL, UNIQUE Tên đăng nhập

bằng Bcript

1 ProductId INT AUTO_INCREMENT Mã sản phẩm

Bảng ProductType

STT Tên cột Kiểu dữ liệu Ràng buộc Ghi chú

2 ProductTypeName NVARCHAR(max) NOT NULL Tên loại sản phẩm

Bảng ProductBatch

STT Tên cột Kiểu dữ liệu Ràng buộc Ghi chú

2 ProductBatchName NVARCHAR(max) NOT NULL Tên lô sản phẩm

hàng

Bảng InputInfo

STT Tên cột Kiểu dữ liệu Ràng buộc Ghi chú

hàng

hàng

cuối cùng

Bảng OutputInfo

STT Tên cột Kiểu dữ liệu Ràng buộc Ghi chú

hàng

2 OutputInfoName NVARCHAR(max) NOT NULL Tên bản ghi xuẩt

hàng

cuối cùng

Bảng ProductBatch_Product

STT Tên cột Kiểu dữ liệu Ràng buộc Ghi chú

lô

Khóa ngoại ProductBatchId , ProductId

Bảng Output_Product

STT Tên cột Kiểu dữ liệu Ràng buộc Ghi chú

Hình 4.3 Tổng quan kiến trúc hệ thống

• Frontend: sử dụng ReactJS, thư viện Material UI, html, css, bootstrap đểthiết giao diện, Axios để call api

• Backend: sử dụng ASP NET Core Web API để thiết kế restful api

• CSDL: sử dụng SQL Server để lưu trữ dữ liệu

4.4 Kiến trúc backend

4.4.1 Tổng quan

Hình 4.4 Tổng quan kiến trúc backend

• Để xây dựng restful api cho website, em đã sử dụng kiến trúc 3layers (tầng): repository, service và controller

• Trong đó:

o Tầng repository: dùng để tương tác với database, đọc/ghi dữ liệu

o Tầng service: tầng xử lý nghiệp vụ, nhận yêu cầu từ tầngcontroller và dữ liệu từ tầng repository

o Tầng controller: tầng định nghĩa các api và yêu cầu xử lý tới tầngservice

4.4.2 Thiết kế chi tiết

Trong khi thiết kế chi tiết các tầng, em đã bổ sung thêm một tầng Core dùng

để định nghĩa các bảng trong database, các entity (thực thể), các model dto (datatransfer object), các biến constant và các hàm common để xử lý các nghiệp vụchung của hệ thống Ở mỗi tầng, em sẽ trình bày về cụ thể về 1 lớp dữ liệu

a Tầng Core

Hình 4.5 Các lớp entity (thực thể)

• Lớp DbContext: là một lớp của package Microsoft EntityFrameworkCore

dùng để định nghĩa database Các bảng trong DbContext được tạo từ cácentity class

• Các lớp entity: sử dụng ComponentModel.DataAnnotations để định nghĩa

entity map với table tương ứng trong database

• Các lớp dto: sử dụng AutoMapper để tự động map giữa các lớp dto và lớp

entity liên quan

 Chi tiết lớp User Entity và các lớp Dto liên quan:

• Lớp User Entity

Hình 4.6 Triển khai lớp UserEntity

o Sử dụng attribute “Table” để định nghĩa User Entity map với table có tên

“user” trong cơ sở dữ liệu

o Atribute “Key” để định nghĩa trường dữ liệu đó là primary key

o Atribute “ForeignKey” để định nghĩa trường dữ liệu đó là foreign key

o Atribute “Required” để ràng buộc trường dữ liệu đó là not null

o Atribute “StringLength” để ràng buộc độ dài của trường dữ liệu string

• Các lớp Dto của user: sử dụng json property để chuyển tên các trường dữliệu về đúng convension, sau đây là 1 số lớp Dto của user

Hình 4.7 Triển khai lớp UserDto (lớp này là dữ liệu của user đăng nhập)

Hình 4.8 Triển khai lớp UserNoIdDto (lớp này là dữ liệu của form tạo user)

Hình 4.9 Triển khai lớp UserLoginDto (lớp này là dữ liệu của form login)

Hình 4.11 Thiết kế lớp User Repository

dùng có userName được truyền vào

dùng có userId đượctruyền vào

userId được truyền vào

6 getAllUser Không có List<UserEntity> Lấy danh sách user

STT Tên Parameter Kiểu dữ liệu trả về Mô tả (Mục đích)

(UserNoIdDto)

UserInfomationDto Thêm user vào

CSDL và gửi mail báo thông tin tài khoản cho user

4 getUser userId (int) UserInfomationDto Lấy thông tin user

(UserUpdateDto)

người dùng

userId được truyền vào

7 getAllUser Không có List<UserDataDto> Lấy danh sách user

d Tầng controller

Hình 4.14 + 4.15 Tầng controllers

• ControllerBase: là 1 base class của package Microsoft.AspNetCore.Mvc,cho phép định tuyến các controller, hỗ trợ các phương thức GET, POST,PUT, DELETE… cho quá trình viết resful api

• Các lớp controller yêu cầu token sử dụng attribute “Authorize” củaMicrosoft.AspNetCore.Authorization để xác thực token có phải là token

được sinh ra từ hệ thống và còn timelife hay không, em đã viết thêm thêmmột attribute “VerifyRoleFilter” sử dụng hàm verifyToken của UserService

để kiểm tra role của user có bị thay đổi bởi admin trong khi token hiện tạicòn hạn hay không Ngoài ra, sử dụng thêm Route để thêm tiền tố cho tất

Khôngcó

tính đúng đắn của token

api/v1/user

Authorization

userId (int)

tin user

api/v1/user

Authorization

Khôngcó

userData (UserNoIdDto) Tạo user

5

PUT:

api/v1/user

Authorization

Không

có

newUserData (UserUpdateDto)

Chỉnh sửa thông tin user

api/v1/user

Authorization

userId (int)

7 GET:

api/v1/get-all-users

Authorization

Khôngcó

sách ngườidùng

api/v1/change-password

Authorization

Khôngcó

userData (UserChangePassWordDto)

Đổi mật khẩu

4.4 Kiến trúc frontend

• Kiến trúc của client-side redering frontend:

• Bao gồm: View Layer, Mangement state, Service (API client, common

Service)

Hình 4.17 Tổng quan kiến trúc frontend

• View layer:

o Phụ trách giao diện hiển thị của trang web

o Tương ứng với một route sẽ chuyển đến các page tương ứng

o Một page sẽ bao gồm các component con, một số component con dùngchung

Hình 4.20 Minh họa việc tái sử dụng component

• State Management

o Quản lý những trạng thái hiện tại của component

o Lưu thông tin vào state từ đó hiển thị thông tin lên UI, hoặc dùng nóbiến trung gian để tương tác giữa các component hoặc với server

o Ví dụ:

+ isShowModal: cho biết modal có được show ra hay không

+ productData: state lưu thông tin product dùng để gửi xuống database,hoặc từ database gửi lên để hiện lên UI

+ localstorage,cookie: lưu các thông tin trình duyệt ví dụ user,isAuthenticate để mỗi lần gửi request sẽ đính kèm vào api để serverxác thực người dùng

o Sử dụng redux để quản lý những state dùng chung ở nhiều component

và ít thay đổi

Hình 4.20 Truyền state không sử dụng redux và có sử dụng redux

Hình 4.21 Flow trong hệ thống

• API client

o Sử dụng chuẩn REST API (REpresentational State Transfer) trao đổi

JSON chứa data cần để thực hiện các phương thức GET, POST, PUT,DELETE

Hình 4.22 Minh họa request và response

o Client nhận thông tin status code và error message tương ứng để phânloại lỗi để hiển thị cho người dùng tương tác

Hình 4.23 Mã lỗi HTTP request

4.5 Kết quả đạt được

Sau khi xây dựng chương trình website quản lý kho hàng, kết quả mà nhóm em đã đạt được là:

• Giao diện chương trình thân thiện, dễ dùng như mong đợi

• Cung cấp đầy đủ các chức năng đã xác định trong phần phân tích yêu cầu

hệ thống

• Tương thích tốt trên giao diện web PC

Hình ảnh 4.24 Giao diện SwaggerUI, giúp test api một cách dễ dàng

Hình ảnh 4.25 Giao diện trang nhập hàng

Chương 5: Kết luận và hướng phát triển

5.2 Hướng phát triển

Đây là một đề tài hay thú vị, nói chung đề tài còn khá nhiều thứ để khai thác, nhóm sẽ cố gắng khai thác thêm nhiều chức năng mới, làm giao diện cho đẹp mắt hơn, thân thiện hơn Thiết kế lại database để phù hợp hơn với các chức năng mới

Chương 6: Báo cáo cá nhân

1 Trần Quang Trung – 20194195 (Nhóm trưởng)

Cụ thể công việc:

• Thiết kế database

• Base project backend, xây dựng các package, module mẫu

• Thiết kế api, service, các lớp liên quan tới các api user, trang nhập hàng, trang xuất hàng, gửi mail

• Hỗ trợ team frontend làm 2 trang nhập hàng, xuất hàng

• Quản lý mã nguồn, merge code từ các nhánh của các thành viên

• Quản lý và đốc thúc tiến độ công việc của các thành viên

Mức độ đóng góp: 40%.

Kết quả: Hoàn thành tốt.

Thu hoạch:

• Củng cố kiến thức lập trình, thiết kế cơ sở dữ liệu, …

• Học thêm công nghệ mới AspNetCore

• Tăng kỹ năng quản lý dự án, quản lý mã nguồn, kỹ năng làm việc nhóm, làm việc độc lập

31

2 Quách Thế Trường - 20194196

Cụ thể công việc:

• Base project frontend, xây dựng các package, module mẫu

• Thiết kế service call api

• Thiết kế giao diện trang người dùng, quản lý tồn kho

Mức độ đóng góp: 25%.

Kết quả: Hoàn thành tốt.

Thu hoạch:

• Học thêm công nghệ mới ReactJS

• Tăng kỹ năng quản lý dự án, quản lý mã nguồn, kỹ năng làm việc nhóm, làm việc độc lập

31

3 Bùi Văn Kiên - 20194196

• Củng cố kiến thức lập trình, thiết kế cơ sở dữ liệu, …

• Học thêm công nghệ mới AspNetCore

• Tăng kỹ năng quản lý dự án, quản lý mã nguồn, kỹ năng làm việc nhóm, làm việc độc lập

31