3.1.1. Mô hình MVC
MVC là một mô hình kiến trúc phần mềm được tạo ra với mục đích quản lý và xây dựng dự án phần mềm có hệ thống hơn và tạo lập giao diện cho người dùng. Theo đó, hệ thống MVC được chia thành ba phần có khả năng tương tác với nhau và tách biệt các nguyên tắc nghiệp vụ với giao diện người dùng.
Ba thành phần chính bao gồm:
• Controller: Đóng vài trò là phần trung gian giữa model và view. Nó có nhiệm vụ tiếp nhận yêu cầu từ client sau đó xử lý request, load model và gửi data qua view tương ứng rồi trả về kết quả về cho client.
• Model: Có nhiệm vụ thao tác với cơ sở dữ liệu, có nghĩa là nó sẽ chứa tất cả các hàm, các phương thức truy vấn trực tiếp với dữ liệu và controller sẽ thông qua các hàm, phương thức này của model để lấy dữ liệu rồi gửi qua view. • View: Sẽ nhận dữ liệu từ controller và hiển thị nội dung sang các đoạn mã
HTML, bạn có thể hiểu đơn giản là thành phần giao diện.
3.1.2. Giới thiệu về Laravel PHP Framewora
Hình 3.1 Laravel PHP Framework
(Nguồn ảnh: laravel.com/ [Truy cập: 04-06-2022])
Laravel là một PHP framework, có mã nguồn mở và miễn phí, được xây dựng nhằm hỗ trợ phát triển các phần mềm, ứng dụng, theo kiến trúc MVC. Laravel giúp lập trình viên thúc đẩy nhanh chóng quá trình phát triển ứng dụng. Lập trình viên tiết kiệm được thời gian, tăng sự ổn định cho ứng dụng và giảm thiểu số lần phải viết lại code cho lập trình viên.
27 Ưu điểm của Laravel
• Sử dụng các tính năng mới nhất của PHP. • Nguồn tài nguyên vô cùng lớn và sẵn có. • Tốc độ xử lý nhanh.
• Dễ sử dụng. • Tính bảo mật cao
3.2. Bootstrap
3.2.1. Giới thiệu về Bootstrap
Hình 3.2 Bootstrap Framework
(Nguồn ảnh: getbootstrap.com [Truy cập: 04-06-2022])
Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và công cụ dùng để tạo ra một mẫu webiste hoàn chỉnh. Với các thuộc tính về giao diện được quy định sẵn như kích thước, màu sắc, độ cao, độ rộng…, các designer có thể sáng tạo nhiều sản phẩm mới mẻ nhưng vẫn tiết kiệm thời gian khi làm việc với framework này trong quá trình thiết kế giao diện website.
Ưu điểm của Bootstrap: • Dễ dàng thao tác. • Tủy chỉnh dễ dàng.
• Chất lượng sản phẩm đầu ra hoàn hảo. • Độ tương thích cao
28
3.2.2. Hướng dẫn sử dụng Bootstrap cơ bản
• Thêm HTML5 doctype: Bootstrap 4 ứng dụng các phần tử HTML và các thuộc tính CSS. Bootstrap đòi hỏi người dùng bổ sung thẻ HTML5 doctype. Để sử dụng Bootstrap, bạn cần đảm bảo Bootstrap được cài đặt đã bao gồm HTML5 doctype ở đầu trang, cùng với thuộc tính lang và bộ ký tự chính xác. • Bootstrap 4 được thiết kế để đáp ứng cho các thiết bị di động. Mobile-first Index là một phần cốt lõi của Bootstrap 4. Để đảm bảo hiển thị đúng và thu phóng khung của website linh hoạt với khung browser, hãy thêm thẻ <meta> sau vào bên trong phần tử <head>:
<meta name="viewport" content="width=device-width, initial-scale=1"> • Khi sử dụng trên webiste của riêng mình, người dùng cần bọc toàn bộ nội
dung trong webiste bằng thẻ container (class container hoặc container-fluid).
3.3. jQuery [4]
3.3.1. Giới thiệu về jQuery
Hình 3.3 Thư viện JQuery
(Nguồn ảnh: jquery.com [Truy cập: 04-06-2022])
jQuery không phải là một ngôn ngữ lập trình riêng biệt mà hoạt động liên kết với JavaScript. Với jQuery, bạn có thể làm được nhiều việc hơn mà lại tốn ít công sức hơn. jQuery cung cấp các API giúp việc duyệt tài liệu HTML, hoạt ảnh, xử lý sự kiện và thao tác AJAX đơn giản hơn. jQuery hoạt động tốt trên nhiều loại trình duyệt khác nhau.
3.3.2. Ưu điểm của JQuery
29
• jQuery tạo điều kiện cho người dùng viết các mã chức năng bằng các dòng tối thiểu. jQuery cải thiện hiệu suất lập trình web.
• jQuery phát triển các ứng dụng có tương thích với trình duyệt.
• Hầu hết các tính năng mới của trình duyệt mới đều được jQuery sử dụng.
3.4. MySQL [5]
3.4.1. MySQL là gì?
Hình 3.4 Hệ quản trị dữ liệu MySQL
(Nguồn ảnh: www.mysql.com [Truy cập: 04-06-2022])
MySQL là "hệ quản trị dữ liệu miễn phí" được tích hợp sử dụng chung với Apache, PHP. Chính yếu tố phát triển trong cộng đồng mã nguồn mở nên MySQL đã qua rất nhiều sự hỗ trợ của những lập trình viên yêu thích mã nguồn mở. MySQL cũng có cùng một cách truy xuất và mã lệnh tương tự với ngôn ngữ SQL.
MySQL là cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển, hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh. Với tốc độ và tính bảo mật cao, MySQL rất thích hợp cho các ứng dụng có truy cập CSDL trên Internet.
3.4.2. Một số đặc điểm của MySQL
• MySQL là một phần mềm quản trị cơ sở dữ liệu dạng server-based (gần tương đương với SQL Server của Microsoft).
• MySQL quản lý dữ liệu thông qua các cơ sở dữ liệu, mỗi cơ sở dữ liệu có thể có nhiều bảng quan hệ chứa dữ liệu.
• MySQL có cơ chế phân quyền người sử dụng riêng, mỗi người dùng có thể được quản lý một hoặc nhiều cơ sở dữ liệu khác nhau.
30
Chương 4. PHÂN TÍCH & THIẾT KẾ 4.1. Xác định yêu cầu
4.1.1. Danh sách các yêu cầu chức năng
STT Tên yêu cầu Ghi chú
1 Đăng nhập Yêu cầu ở giao diện của khách hàng và nhân viên
2 Đăng ký tài khoản Yêu cầu ở giao diện của khách hàng
3 Xem thông tin sản phẩm Yêu cầu ở giao diện của khách hàng
4 Quản lý giỏ hàng Yêu cầu ở giao diện của khách hàng
5 Xem thông tin tài khoản Yêu cầu ở giao diện của khách hàng
6 Chatbot tư vấn Yêu cầu ở giao diện của khách hàng
7 Vòng quay may mắn Yêu cầu ở giao diện của khách hàng
8 Quản lý danh mục Yêu cầu ở giao diện của nhân viên
9 Quản lý sản phẩm Yêu cầu ở giao diện của nhân viên
10 Quản lý mã khuyến mãi Yêu cầu ở giao diện của nhân viên
11 Quản lý thông tin khách hàng Yêu cầu ở giao diện của nhân viên
12 Quản lý đơn đặt hàng Yêu cầu ở giao diện của nhân viên
13 Quản lý kho hàng Yêu cầu ở giao diện của nhân viên
31
15 Quản lý nhà cung cấp Yêu cầu ở giao diện của nhân viên
16 Quản lý nhân viên Yêu cầu ở giao diện của nhân viên
Bảng 4.1 Danh sách các yêu cầu chức năng
4.1.2. Danh sách biểu mẫu và quy định của biểu mẫu 4.1.2.1. Đăng ký tài khoản khách hàng 4.1.2.1. Đăng ký tài khoản khách hàng
Biểu mẫu 1
Đăng ký tài khoản khách hàng Họ tên: …
Địa chỉ: ...
Số điện thoại: … Email: …
Mật khẩu: ….
• Quy định: Họ tên, địa chỉ, số điện thoại, email, mật khẩu bắt buộc nhập và đúng định dạng.
4.1.2.2. Thanh toán giỏ hàng
Biểu mẫu 2
Thanh toán giỏ hàng Họ tên: … Địa chỉ: ... Số điện thoại: … Email: … Ghi chú: …. Thành tiền: …
32 Phương thức thanh toán: …
• Quy định:
- Họ tên, địa chỉ, số điện thoại, email, phương thức thanh toán bắt buộc nhập và đúng định dạng.
- Phương thức thanh toán là “Chuyển tiền trực tiếp” hoặc “thanh toán khi nhận hàng”.
4.1.2.3. Cập nhật tài khoản cá nhân (khách hàng)
Biểu mẫu 3
Cập nhật tài khoản cá nhân (khách hàng) Họ tên: …
Địa chỉ: ...
Số điện thoại: … Email: …
Mật khẩu: ….
• Quy định: Họ tên, địa chỉ, số điện thoại, email, mật khẩu bắt buộc nhập và đúng định dạng. 4.1.2.4. Quản lý danh mục Biểu mẫu 4 Quản lý danh mục Tên danh mục: ... Mô tả: ... Kích hoạt: … Ghi chú: … • Quy định:
33
- Tên dạnh mục, mô tả bắt buộc nhập và đúng định dạng. - Kích hoạt phải là giá trị “có” hoặc “không”.
4.1.2.5. Quản lý sản phẩm Biểu mẫu 5 Sản phẩm Tên sản phẩm: ... Mô tả: ... Danh mục: ... Thành phần: … Mùa vụ: ... Đóng gói: ... Hạn sử dụng: ... Xuất sứ: … Giao hàng: … Giá: … Đơn vị: … Ảnh sản phẩm: … Kích hoạt: … Ghi chú: … • Quy định:
- Tên sản phẩm, mô tả, danh mục, giá, đơn vị, ảnh sản phẩm, kích hoạt bắt buộc nhập và đúng định dạng.
34
4.1.2.6. Quản lý mã khuyến mãi
Biểu mẫu 6
Quản lý mã khuyến mãi Mã khuyến mãi: ... Mức giảm giá: ... Giá trị đơn hàng áp dụng: ... Số lượng mã: … Thời gian áp dụng: ... Khách hàng áp dụng: … • Quy định:
- Mã khuyến mãi, mức giảm giá bắt buộc nhập.
- Khách hàng áp dụng phải là “Tất cả khách hàng”, “Khách hàng VIP” hoặc “Khách hàng thường”.
4.1.2.7. Quản lý đơn đặt hàng Biểu mẫu 7 Quản lý đơn đặt hàng Khách hàng: ... Tổng tiền: ... Trạng thái: ... Người nhận: … Địa chỉ: ... Điện thoại: ... Hình thức thanh toán: ... Ghi chú: …
35 • Quy định:
- Họ tên, địa chỉ, số điện thoại, email, phương thức thanh toán bắt buộc nhập và đúng định dạng.
- Phương thức thanh toán là “Chuyển tiền trực tiếp” hoặc “thanh toán khi nhận hàng”. 4.1.2.8. Nhập kho Biểu mẫu 8 Nhập kho Nhân viên nhập hàng: … Nhà cung cấp: … Sản phẩm: ... Số lượng: ...
• Quy định: Sản phẩm và số lượng bắt buộc nhập và đúng định dạng.
4.1.2.9. Quản lý nhà cung cấp Biểu mẫu 9 Quản lý nhà cung cấp Họ tên: … Địa chỉ: ... Số điện thoại: … Email: … Mật khẩu: …. Vai trò: ….
• Quy định: Họ tên, địa chỉ, số điện thoại, email, mật khẩu bắt buộc nhập và đúng định dạng.
36
4.1.2.10. Quản lý nhân viên
Biểu mẫu 10
Quản lý nhân viên Họ tên: … Địa chỉ: ... Số điện thoại: … Email: … Mật khẩu: …. Vai trò: ….
• Quy định: Họ tên, địa chỉ, số điện thoại, email, mật khẩu bắt buộc nhập và đúng định dạng.
37
4.2. Đặc tả use-case
4.2.1. Sơ đồ use-case tổng quát
38
4.2.2. Danh sách các Actor
STT Tên Actor Ý nghĩa/Ghi chú
1 Người dùng Người sử dụng, có nhu cầu mua hàng trên website Nông Sản Việt.
2 Nhân viên Người chịu trách nhiệm quản lý sản phẩm, đơn đặt hàng, mã khuyến mãi, báo cáo thống kê và nhập hàng.
3 Quản trị Người chịu trách nhiệm quản lý nhân viên và vận hành website.
Bảng 4.2 Danh sác các actor
4.2.3. Danh sách các Use-case
STT Tên Use-case Ý nghĩa/Ghi chú
1 Đăng nhập Đăng nhập tài khoản để vào hệ thống.
2 Đăng ký Đăng ký tài khoản để đăng nhập vào hệ thống.
3 Xem thông tin sản phẩm Tìm kiếm, xem thông tin chi tiết, bình luận, yêu thích sản phẩm.
4 Quản lý giỏ hàng Thêm sản phẩm vào giỏ hàng và thanh toán.
5 Chatbot tư vấn Tự động giải đáp khi người dùng cần tư vấn.
6 Xem thông tin tài khoản Quản lý thông tin cá nhân, xem các đơn đặt hàng, các sản phẩm yêu thích và các mã khuyến mãi.
39
7 Vòng quay Quay vòng quay để người dùng có thể nhận mã khuyến mãi từ cửa hàng.
8 Quản lý sản phẩm Xem, thêm, chỉnh sửa thông tin, xuất QR sản phẩm.
9 Quản lý danh mục Xem, thêm. chỉnh sửa thông tin danh mục sản phẩm.
10 Quản lý thông tin người dùng
Xem, chỉnh sửa thông tin người dùng.
11 Quản lý đơn hàng Tạo đơn hàng, in đơn hàng, quản lý lịch sử giao hàng, xác nhận thanh toán.
12 Quản lý mã khuyến mãi Xem, thêm, chỉnh sửa thông tin các mã khuyến mãi.
13 Báo cáo, thống kê Thống kê doanh thu theo sản phẩm, theo ngày, theo khách hàng.
14 Quản lý nhân viên Xem, thêm, chỉnh sửa thông tin và nhân viên.
15 Quản lý kho Xem và nhập hàng vào kho.
16 Quản lý nhà cung cấp Xem, thêm, chỉnh sửa thông tin nhà cung cấp.
40
4.2.4. Đăng nhập
Hình 4.2 Use-case đăng nhập
Use-case ID UC-1.1 Tên Use-case Đăng nhập.
Mô tả Được sử dụng bởi người dùng, nhân viên và quản lý đăng nhập vào hệ thống nhằm sử dụng các chức năng trong phần mềm.
Actor(s) Người dùng, Nhân viên, Quản trị.
Trigger Người dùng/nhân viên/quản trị muốn đăng nhập vào ứng dụng Nông Sản Việt.
Pre-
Condition(s)
-Tài khoản người dùng đã được tạo sẵn. -Tài khoản người dùng đã được phân quyền.
-Thiết bị người dùng đã kết nối Internet khi thực hiện đăng nhập. Post-
Condition(s)
-Người dùng/nhân viên/quản lý đăng nhập ứng dụng thành công -Hệ thống ghi nhận hoạt động đăng nhập thành công vào Activity Log. Basic flow 1. Người dùng/nhân viên/quản lý truy cập ứng dụng Nông Sản Việt.
2. Người dùng/nhân viên/quản lý chọn đăng nhập.
3. Người dùng/nhân viên/quản lý nhập tài khoản và chọn đăng nhập. 4. Hệ thống xác thực thông tin đăng nhập và truy cập vào ứng dụng. 5. Hệ thống ghi nhận hoạt động đăng nhập thành công.
41
thành công.
2.Người dùng/nhân viên/quản trị chọn lệnh hủy đăng nhập. Use-case dừng lại
Bảng 4.4 Use-case đăng nhập
4.2.5. Đăng ký
Hình 4.3 Use-case đăng ký
Use-case ID UC-1.2 Tên Use-case Đăng ký
Mô tả Được sử dụng bởi người dùng nhằm tạo tài khoản đăng nhập vào ứng dụng. Actor(s) Người dùng.
{Trigger Người dùng muốn tạo tài khoản đăng nhập vào ứng dụng Nông Sản Việt. Pre-
Condition(s)
- Người dùng chưa có hoặc muốn tạo thêm tài khoản.
-Thiết bị người dùng đã kết nối Internet khi thực hiện đăng ký. Post-
Condition(s)
-Người dùng đăng ký tài khoản ứng dụng thành công.
-Hệ thống ghi nhận thông tin vào cơ sở dữ liệu và chuyển sang trang chủ. Basic flow 1.Người dùng truy cập vào ứng dụng Nông Sản Việt
2.Người dùng chọn phương thức đăng ký
3.Người dùng nhập thông tin đăng ký tài khoản và chọn đăng ký 4.Hệ thống xác thực thông tin và thông báo tạo tài khoản thành công 5.Hệ thống ghi nhận thông tin vào cơ sở dữ liệu và chuyển sang trang chủ. Exception flow 1. Thông tin đăng ký không hợp lệ
2. Người dùng chọn lệnh hủy đăng ký Use-case dừng lại
42
4.2.6. Xem thông tin sản phẩm
Hình 4.4 Use-case xem thông tin sản phẩm
Use-case ID UC-1.3
Tên Use-case Xem thông tin sản phẩm.
Mô tả Được sử dụng bởi người dùng nhằm xem, bình luận, yêu thích sản phẩm và thêm giỏ hàng trong ứng dụng.
Actor(s) Người dùng.
Trigger Người dùng xem thông tin sản phẩm trong ứng dụng. Pre-
Condition(s)
- Người dùng nhấn chọn sản phẩm. - Thiết bị đã kết nối Internet. Post-
Condition(s)
- Hệ thống hiển thị chi tiết sản phẩm mà người dùng cần xem.
Basic flow 1. Người dùng truy cập vào ứng dụng Nông Sản Việt.
2. Người dùng tìm kiếm sản phẩm (thông qua danh mục hoặc tìm kiếm sản phẩm bằng từ khóa).
3. Người dùng chọn sản phẩm cần xem và bình luận về sản phẩm. Exception flow Người dùng thoát khỏi trang chi tiết sản phẩm.
Use-case dừng lại.
43
4.2.7. Quản lý giỏ hàng
Hình 4.5 Use-case quản lý giỏ hàng
Use-case ID UC-1.4.
Tên Use-case Quản lý giỏ hàng.
Mô tả Được sử dụng nhằm thực hiện các thao tác quản lý giỏ hàng. Actor(s) Người dùng.
Trigger Người dùng muốn thực hiện các thao tác với giỏ hàng trong ứng dụng. Pre-
Condition(s)
- Người dùng vào trang chi tiết sản phẩm và thêm giỏ hàng. - Thiết bị đã kết nối Internet.
Post-
Condition(s)
- Người dùng thực hiện các thao tác thanh toán giỏ hàng trong ứng dụng thành công và hệ thống trả về thông báo.
Basic flow 1. Người dùng đăng nhập vào ứng dụng Nông Sản Việt.
2. Người dùng truy cập vào trang sản phẩm ứng dụng Nông Sản Việt. 3. Người dùng nhấn thêm vào giỏ hàng.