ĐỒ án WEBSITE QUẢNG cáo PHẦN mềm

Môi trường phát triển ứng dụng (dự kiến)

 Hệ điều hành: Microsoft Windows 10

 Hệ quản trị cơ sở dữ liệu: MySQL

 Công cụ xây dựng ứng dụng: VsCode

Thông tin về nhóm

STT MSSV Họ và tên Điện thoại

Sơ đồ Use-case

Figure 2.1-1 Sơ đồ Use-case

Danh sách các Actor

T Tên Actor Ý nghĩa/Ghi chú

1 Quản lý Người phụ trách quản lý website.

Table 2.2-7 Danh sách các Actor

Danh sách các Use-case

T Tên Use-case Ý nghĩa/Ghi chú

1 Đăng nhập/ Đăng xuất Đăng nhập/ Đăng xuất hệ thống.

2 Quản lý danh mục bài viết Quản lý bán hàng của quán ăn.

In danh sách những yêu cầu gọi món của khách hàng chuyển cho bộ phận bếp để chế biến.

4 Quản lý danh mục giao diện

In hóa đơn khi khách hàng yêu cầu thanh toán.

5 Quản lý giao diện Quản lý thực đơn của quán ăn.

6 Quản lý hoá đơn Quản lý sơ đồ bàn ăn của quán ăn.

Table 2.3-8 Danh sách các Use-case

Đặc tả Use-case

Đặc tả Use-case “Đăng nhập/ Đăng xuất”

Người sử dụng  Quản lý.

Mô tả chức năng Đăng nhập vào hệ thống.

Dòng sự kiện chính 1 Hệ thống hiển thị màn hình đăng nhập.

2 Người dùng nhập vào tên đăng nhập và mật khẩu, nhấn “Đăng nhập”.

3 Hệ thống kiểm tra thông tin đăng nhập.

4 Hệ thống thông báo đăng nhập thành công và hiển thị màn hình chính.

Khi người dùng nhập sai tên đăng nhập hoặc mật khẩu, hệ thống sẽ thông báo rằng tài khoản đăng nhập không hợp lệ và yêu cầu họ nhập lại thông tin chính xác.

Các yêu cầu đặc biệt

Tài khoản đăng nhập đã được tạo trong hệ thống.

Trạng thái hệ thống trước khi thực thiện use case

 Start hoặc restart hệ thống.

 Người dùng đã đăng xuất khỏi hệ thống.

Trạng thái hệ thống sau khi thực hiện use case

 Đăng nhập thành công: Hiển thị màn hình chính của hệ thống, cho phép người dùng sử dụng hệ thống.

 Đăng nhập thất bại: Hiển thị màn hình đăng nhập. Điểm mở rộng Không có.

Table 2.4-9 Đặc tả use-case đăng nhập

Người sử dụng  Nhân viên thu ngân.

Mô tả chức năng Đăng xuất khỏi hệ thống.

Dòng sự kiện chính 1 Người dùng nhấn vào “Đăng xuất”.

2 Tài khoản người dùng đăng xuất khỏi hệ thống.

3 Hệ thống hiển thị màn hình đăng nhập. Dòng sự kiện khác Không có.

Các yêu cầu đặc biệt Không có.

Người dùng đã đăng nhập vào hệ thống.

Hiển thị màn hình đăng nhập. Điểm mở rộng Không có.

Table 2.4-10 Đặc tả use-case đăng xuất

Đặc tả Use-case “Quản lý danh mục bài viết”

Người sử dụng Quản lý.

Mô tả chức năng Quản lý thông tin danh mục bài viết

1 Nhấn vào button tạo danh mục bài viết.

2 Điền thông tin và nội dung bài viết.

Dòng sự kiện khác Xử lý khi không nhấn “Lưu lại” và bài viết bị huỷ bỏ.

Trạng thái hệ thống Người dùng đã đăng nhập thành công vào hệ trước khi thực thiện use case thống.

Có thực hiện “Lưu lại”: Thông tin bài viết được cập nhật vào hệ thống.

Không thực hiện “Lưu lại”: Thông tin danh mục bài viết không có gì thay đổi. Điểm mở rộng Không có.

Table 2.4-11 Đặc tả use-case quản lý danh mục bài viết

Đặc tả Use-case “Quản lý bài viết”

Mô tả chức năng Quản lý thông tin danh mục bài viết

1 Nhấn vào button tạo danh mục bài viết.

2 Điền thông tin và nội dung bài viết.

Dòng sự kiện khác Xử lý khi không nhấn “Lưu lại” và bài viết bị huỷ bỏ.

Người dùng đã đăng nhập thành công vào hệ thống.

Có thực hiện “Lưu lại”: Thông tin bài viết được cập nhật vào hệ thống.

Không thực hiện “Lưu lại”: Thông tin danh mục bài viết không có gì thay đổi. Điểm mở rộng Không có.

Table 2.4-12 Đặc tả use-case quản lý bài viết

Table 2.4-5 Đặc tả use-case lập hóa đơn thanh toán

Đặc tả Use-case “Quản lý danh mục giao diện”

Mô tả chức năng Quản lý thông tin danh mục giao diện

1 Nhấn vào button tạo danh mục giao diện.

2 Điền thông tin và nội dung giao diện.

Dòng sự kiện khác Xử lý khi không nhấn “Lưu lại” và giao diện bị huỷ bỏ.

Có thực hiện “Lưu lại”: Thông tin giao diện được cập nhật vào hệ thống.

Không thực hiện “Lưu lại”: Thông tin danh mục giao diện không có gì thay đổi. Điểm mở rộng Không có.

Table 2.4-14 Đặc tả use-case quản lý danh mục giao diện

Đặc tả Use-case “Quản lý giao diện”

Mô tả chức năng Quản lý thông tin danh mục giao diện

1 Nhấn vào button tạo danh mục giao diện.

2 Điền thông tin và nội dung giao diện.

Dòng sự kiện khác Xử lý khi không nhấn “Lưu lại” và giao diện bị huỷ bỏ.

Có thực hiện “Lưu lại”: Thông tin giao diện được cập nhật vào hệ thống.

Không thực hiện “Lưu lại”: Thông tin danh mục giao diện không có gì thay đổi.

Table 2.4-15 Đặc tả use-case quản lý giao diện

Sơ đồ lớp

Sơ đồ lớp (mức phân tích)

Figure 3.1-2 Sơ đồ lớp ở mức phân tích

Danh sách các lớp đối tượng và quan hệ

T Tên lớp/quan hệ Loại Ý nghĩa/Ghi chú

1 KhachHang Bình thường Khách hàng

2 NhanVien Bình thường Nhân viên

3 BaiViet Bình thường Bài viết

4 MauGiaoDien Bình thường Danh sách mẫu giao diện

5 HoaDon Bình thường Hóa đơn

6 BaoCaoThu Bình thường Tổng doanh thu

Table 3.1-16 Danh sách các lớp đối tượng và quan hệ

Mô tả chi tiết từng lớp đối tượng

Loại Ràng buộc Ý nghĩa/ghi chú

2 TenKH private Không Tên khách hàng

3 DiaChi private Không Địa chỉ

4 DienThoai private Không Điện thoại

Table 3.1-17 Các thuộc tính chính lớp KhachHang

Tên phương thức Loại Ràng buộc Ý nghĩa/ghi chú

1 SelectAllKhachHang publi c Khôn g Lấy thông tin khách hàng

2 UpdateKhachHang(MaKh) publi c Khôn g Sửa thông tin khách hàng

Table 3.1-18 Các phương thức chính lớp KhachHang

2 TenNV private Không Tên nhân viên

3 DiaChi private Không Địa chỉ

4 DienThoai private Không Điện thoại

Table 3.1-19 Các thuộc tính chính lớp NhanVien

T Tên phương thức Loại Ràng buộc Ý nghĩa/ghi chú

1 SelectAllNhanVien publi c Khôn g Lấp thông tin nhân viên

Sửa thông tin nhân viên

3 SearchNhanVien(MaNV/TenNV) publi c Khôn g Tìm kiếm thông tin

Table 3.1-20 Các phương thức chính lớp NhanVien

Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi chú

2 TenBaiViet private Không Tên bài viết

4 TieuDe private Không Tiêu đề

5 NoiDung private Không Nội dung

6 NgayTao private Không Ngày tạo

7 LuotXem private Không Lượt xem

9 TrangThai private Không Trạng thái

10 CapDoHienThi private Không Cấp độ hiển thị

11 BaiVietPhoBien private Không Bài viết phổ biến

Table 3.1-21 Các thuộc tính chính lớp Baiviet

Không Lấy thông tin bài viết

Không Sửa thông tin bài viết

Không Xóa thông tin bài viết

Không Tìm kiếm thông tin

Table 3.1-22 Các phương thức chính lớp Baiviet

Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi chú

Key Mã mẫu giao diện

2 TenMauGiaoDien private Không Tên mẫu giao diện

3 CapDoHienThi private Không Cấp độ hiển thị

Key Mã loại giao diện

5 Anh private Không Ảnh mẫu

6 Gia private Không Gía tiền

Table 3.1-23 Các thuộc tính chính lớp Maugiaodien

Lấy thông tin mã giao diện

2 UpdateMagiaodien(MaGiaoDien) publi c Khôn g Sửa thông tin giao diện

3 DeleteMagiaodien(MaGiaoDien) publi c Khôn g Xóa thông tin giao diện

4 SearchGiaodien(Ma/ten Giao dien) publi c Khôn g Tìm kiếm thông tin

Table 3.1-24 Các phương thức chính lớp Maugiaodien

T Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi chú

2 NgayDatMau private Không Ngày đặt hàng

3 MaKhachHan g private Không Mã khách hàng

4 TrangThai private Không Trạng thái đơn hàng

5 LoiNhan private Không Lời nhắn của khách hàng

Key Mẫu giao diện khách hàng chọn

Table 3.1-25 Các thuộc tính chính lớp HoaDon

1 SelectAllHoaDon publi c Khôn g Lấy thông tin danh sách hóa đơn

Cập nhật trạng thái hóa đơn(Đã nhận hoặc hủy)

3 DeleteHoaDon(MaHoaDon) publi c Khôn g Xóa hóa đơn

4 SearchHoaDon(ngay/trangthai) publi c Khôn g Tìm kiếm thông tin

Table 3.1-26 Các phương thức chính lớp HoaDon

2 NgayLap private Không Ngày lập phiếu

3 SoLuong private Không Số lượng

4 ThoiGian private Không Thời gian

5 Tổng tiền private Không Tổng tiền thu được

Table 3.1-27 Các thuộc tính chính lớp DoanhThu

Table 3.1-28 Các phương thức chính lớp DoanhThu

Sơ đồ trạng thái

Figure 3.2-3 Sơ đồ trạng thái lớp hóa đơn

Figure 3.2-4 Sơ đồ trạng thái đặt mẫu giao diện

Sơ đồ lớp dữ liệu

Figure 4.1-5 Sơ đồ lớp dữ liệu

Mô tả chi tiết các kiểu dữ liệu trong sơ đồ logic

T Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/ghi chú

1 IdCustomer Int(10) Khóa chính Mã khách hàng

2 Name Varchar(100) Không Tên khách hàng

3 SDT Varchar(12) Không Số điện thoại

1 Id Int(10) Khóa chính Mã tài khoản

2 User Varchar(50) Khóa chính Tên đăng nhập

3 Pass Varchar(50) Không Mật khẩu

4 Phone Varchar(50) Không Số điện thoại

Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/ghi chú

1 Id Int(10) Khóa chính Mã trạng thái

2 Name Varchar(10) Không Tên trạng thái

Table 4.2-31 status(Trạng thái của bài viết, đăng hoặc không đăng)

2 Name Varchar(500) Không Tên bài viết

Mã danh mục bài viết

4 Title Text Không Tiêu đề bài viết

5 Content Text Không Nội dung bài viết

6 Datetime Varchar(50) Không Ngày đăng

7 Views Int(11) Không Lượt xem

8 Image Text Không Ảnh(link file)

9 Status Int(11) Không Trạng thái

10 Level Int(11) Không Cấp độ hiển thị

11 Popular Int(11) Không Loại bài viết(Phổ biến hoac bình thường)

1 Idcate Int(11) Khóa chính Mã danh mục bài viết

2 Name Varchar(50) Không Tên danh mục

3 Image Text Không Ảnh danh mục

4 Sumary Text Không Tóm tắt

5 Stt Int(11) Không Sớ thứ tự hiển thị

ST Tên thuộc tính Kiểu Ràng Ý nghĩa/ghi chú

2 Date Varchar(100) Không Ngày đặt

3 Namecustomer Varchar(100) Không Tên khách hàng

4 Phone Varchar(20) Không Điện thoại

6 Status Int(11) Không Trạng thái hóa đơn

7 Message Text không Tin nhắn

8 Id_inter Int(11) Khóa ngoại Mã giao diện

Mã trạng thái hóa đơn

2 Name Varchar(20) Không Tên trạng thái

Table 4.1-35 StatusBill(Đã xác nhận đơn hàng, hoặc chưa xác nhận(đang chờ))

1 Id Int(11) Khóa chính Mã danh mục giao diện

2 Name Text Không Tên danh mục

3 Level Int(11) Không Cấp độ hiển thị

2 Name Text Không Ngày bắt đầu

3 Level Int(11) Không Ngày kết thúc

4 Idface Int(11) Khóa ngoại Mã giao diện

5 Img Varchar(100) Không Ảnh mẫu

6 Price Varchar(50) Không Gía tiền

7 Link Varchar(200) Không Link dẫn đến file giao diện

Kiến trúc hệ thống

Figure 4.3-6 Kiếm trúc hệ thống

STT Thành phần Diễn giải

1 GUI Chứa các thành phần giao diện giao tiếp với người dùng, gồm các Form giao diện.

2 BUS Module liên kết trung gian giữa

GUI và DAO, đảm bảo tính đúng đắn của dữ liệu trước khi lưu xuống Database (Kết nối gián tiếp với cơ sở dữ liệu).

DAO thực hiện việc kết nối trực tiếp giữa cơ sở dữ liệu và chương trình, cho phép thực hiện các thao tác như thêm, sửa, xóa và truy xuất dữ liệu một cách hiệu quả.

4 DTO Chứa các lớp dữ liệu tương ứng với các bảng dữ liệu trong database.

Table 4.3-38 Diễn giải kiến trúc hệ thống a Mô tả chi tiết từng thành phần trong hệ thống i GUI

Lớp đối tượng Diễn giải

Trangchu Giao diện trang chủ dành cho khách hàng Lienhe Giao diện lien he dành cho khách hàng

Baiviet Giao diện bài viết dành cho khách hàng

ChonMauGiaoDien Giao diện lựa chọn mẫu giao diện dành cho khách hàng Admin Giao diện trang chủ web dành cho Admin :

Quản lý thông tin nhân viên , hóa đơn,…. DatHang Giao diện đăt mẫu giao diện dành cho khách hàng DangNhap Giao diện đăng nhập dành cho Admin

Table 4.4-39 Thành phần hệ thống GUI ii BUS

Lớp đối tượng Diễn giải connect Kết nối cơ sở dữ liệu MySql.

Customer Thêm, sửa, xóa khách hàng.

Interface Thêm, sửa, xóa giao diện.

CateInterface Thêm, sửa, xóa danh mục giao diện.

Blog Thêm, sửa, xóa bài viết.

CateBlog Thêm, sửa, xóa danh mục bài viết.

Acount Thêm, sửa, xóa chức vụ nhân viên.

Bill Cập nhât trạng thái hóa đơn

Table 4.4-40 Thành phần hệ thống BUS iii DAO

Lớp đối tượng Diễn giải connect Kết nối cơ sở dữ liệu MySql.

Customer Thêm, sửa, xóa khách hàng.

Interface Thêm, sửa, xóa giao diện.

CateInterface Thêm, sửa, xóa danh mục giao diện.

Blog Thêm, sửa, xóa bài viết.

CateBlog Thêm, sửa, xóa danh mục bài viết.

Acount Thêm, sửa, xóa chức vụ nhân viên.

Bill Cập nhât trạng thái hóa đơn

Table 4.4-41 Thành phần hệ thống DAO iv DTO

Lớp đối tượng Diễn giải

Customer Thể hiện của đối tượng khách hàng.

Staff Thể hiện của đối tượng nhân viên.

Bill Thể hiện của đối tượng hóa dơn.

Blog Thể hiện của đối tượng bài viết.

CateBlog Thể hiện của đối tượng danh mục bài viết. Interface Thể hiện của đối tượng mẫu giao diện.

CateInterface Thể hiện của đối tượng danh mục mẫu giao diện.

Table 4.4-42 Thành phần hệ thống DTO

6 THIẾT KẾ GIAO DIỆN a Danh sách các màn hình

Tên màn hình Ý nghĩa/Ghi chú

1 Trang chủ Để poster quảng cáo, khuyến mãi, hình ảnh ứng dụng mẫu.

2 Giới thiệu Hiển thị thông tin giới thiệu về công ty

3 Blog Hiển thị thông tin các bài viết về công nghệ.

4 Bảng giá Hiển thị thông tin các gói.

5 Liên hệ Hiển thị thông tin liên hệ công ty.

6 Hoá đơn Lập phiếu, quản lý hoá đơn.

7 Danh mục bài viết Hiển thị thông tin danh mục bài viết.

8 Bài viết Hiển thị thông tin các bài viết.

9 Danh mục giao diện Lập lịch làm việc cho nhân viên

10 Giao diện Lập phiếu thanh toán các hàng hóa được nhập

Table 5.1-43 Danh sách các màn hình b Mô tả chi tiết mỗi màn hình i Màn hình trang chủ

Figure 5.2-7 Giao diện trang chủ ii Màn hình giới thiệu

Figure 5.2-8 Màn hình giới thiệu công ty iii Màn hình Blog

Figure 5.2-9 Giao diện blog iv Màn hình Bảng giá

Figure 5.2-10 Giao diện bảng giá v Màn hình liên hệ

Figure 5.2-11 Giao diện thêm nhân viên vi Màn hình quản lý hoá đơn

Figure 5.2-12 Giao diện quản lý hoá đơn vii Màn hình danh mục bài viết

Figure 5.2-13 Giao diện danh mục bài viết viii Màn hình bài viết

Figure 5.2-14 Giao diện bài viết ix Màn hình danh mục giao diện

Figure 5.2-15 Màn hình danh mục giao diện x Màn hình Giao diện

Figure 5.2-16 Giao diện phiếu thanh toán

7 Hướng dẫn sử dụng o Cài đặt

 Mở một Terminal và đi đến thư mục chứa Project và chạy

 Npm install : Để cài đặt các package cần thiết cho việc chạy

Để làm việc với cơ sở dữ liệu MySQL, bạn có thể cài đặt thư viện MySQL thông qua npm hoặc sử dụng máy chủ XAMPP để tạo cơ sở dữ liệu Hiện tại, mình đang sử dụng XAMPP (PhpMyAdmin) để quản lý cơ sở dữ liệu vì giao diện của nó đơn giản, dễ sử dụng và dễ quản lý.

 Vào file Config.js từ thư mục gốc để thực hiện kết nối database :

 Npm start : Để chạy Front-End

 Npm run server : Để chạy back-end

 Npm-run dev : Để chạy cả back-end và fron-end (Phù hợp trong quá trình phát triễn toàn bộ Website)

 Npm run built-server : Build server cho mục đích xuất bản website

8 Hướng dẫn sử dụng a Tìm kiếm hoá đơn

Hệ thống sẽ hiển thị màn hình quản lý hoá đơn như trên. i Thêm bài viết Để thêm 1 bài viết thì ta nhấn vào button tạo danh mục

- Tên loại danh mục: Tên loại danh mục muốn thêm vào.

- Lượt ưu tiên:Thứ tự hiển thị trên danh sách bài viết.

- Hình minh họa: Đường dẫn lưu hình minh họa của danh mục bài viết.

- Khi nhấn vào nút chọn ảnh sẽ có 1 cửa sổ hiện ra để chọn hình ảnh để làm hình minh họa.

- Khi nhấn vào nút đồng ý thêm thì danh mục bài viết mới sẽ được thêm vào cơ sở dữ liệu.

Để cập nhật thông tin danh mục bài viết, bạn chỉ cần nhấn vào nút cập nhật Tiếp theo, hãy điền mã danh mục mà bạn muốn chỉnh sửa.

Sau khi thay đổi thông tin cần thiết, nhấn nút đồng ý sửa để lưu thông tin mới của danh mục bài viết xuống cơ sở dữ liệu. b Chọn mẫu

Hệ thống sẽ hiển thị màn hình trang chủ chọn mẫu ứng dụng web như sau:

Sau đó, click vào các danh mục giao diện ứng dụng website như: thời trang, thiết bị điện tử, nhà hàng, doanh nghiệp, nhà đất.

Sau đó chúng ta có thể tiến hành chọn mẫu và xem mẫu trước.

Nếu khách hàng hài lòng, họ có thể để lại thông tin cá nhân để nhân viên tư vấn của công ty chúng tôi liên hệ sau.

Liên hệ với chúng tôi qua hình thức như chat, gọi điện

- Mã nhân viên: Mã nhân viên đang tiến hành thanh toán.

9 KẾT LUẬN a Môi trường phát triển và Môi trường triển khai o Môi trường phát triển ứng dụng: o Hệ điều hành: Chạy trên đa nền tảng (Linux , Window,

Currently, MacOS is utilizing a 64-bit Windows version to install Node.js, with MySQL as the database management system The application development tools include Visual Studio 2017 and Notepad++ The project employs various technologies, with Bootstrap, jQuery, and React.js for the front-end, and Node.js (Express.js) for the back-end, while MySQL serves as the database Additionally, GitHub is used for source code management, leading to successful project outcomes.

Bài viết này phân tích và thiết kế các chức năng quan trọng bao gồm: thêm, sửa, xóa thông tin nhân viên và khách hàng; đặt mẫu giao diện trực tuyến; xác nhận đơn hàng; quản lý giao diện và bài viết; cùng với việc lập báo cáo lợi nhuận.

Hệ thống quản lý bao gồm các chức năng quan trọng như thêm, sửa, xóa nhân viên và khách hàng, quản lý hóa đơn, cùng với việc quản lý bài viết và danh sách mẫu giao diện Người dùng có thể đặt mẫu, cập nhật trạng thái thanh toán, cũng như thực hiện các thao tác đăng nhập và đăng xuất một cách dễ dàng.

 Những chức năng chưa hoàn chỉnh hoặc chưa xử lý: o Lập báo cáo lợi nhuận

Ứng dụng nổi bật với kiến trúc 3 lớp bao gồm DTO, DAO và BUS, cho phép người dùng dễ dàng thay đổi cơ sở dữ liệu chỉ bằng cách chỉnh sửa lớp DAO mà không ảnh hưởng đến các lớp khác và giao diện người dùng.

Định dạng
Số trang	56
Dung lượng	8,63 MB