Đồ án 2: Phát triển Website Quản lý Cửa hàng Café - Lê Minh Trí & Bùi Lê Anh Nguyên

Báo cáo đồ án phát triển website quản lý cửa hàng cafe. Tài liệu trình bày chi tiết về phân tích thiết kế hệ thống, CSDL và công nghệ sử dụng.

• Tác giả: Lê Minh Trí
• Người hướng dẫn: ThS. Trần Thị Hồng Yến
• Trường học: Trường Đại Học Công Nghệ Thông Tin
• Chuyên ngành: Công Nghệ Phần Mềm
• Đề tài: Phát Triển Website Quản Lý Cửa Hàng Café
• Loại tài liệu: Đồ án môn học
• Năm xuất bản: 2025
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Giới Thiệu Về Đồ Án Website Quản Lý Cửa Hàng Cafe

Website quản lý cửa hàng cafe là một hệ thống thông tin toàn diện được phát triển nhằm tối ưu hóa quy trình quản lý kinh doanh trong các cửa hàng cafe hiện đại. Đồ án này được thực hiện bởi nhóm sinh viên tại Trường Đại Học Công Nghệ Thông Tin, dưới sự hướng dẫn của ThS. Trần Thị Hồng Yến. Hệ thống được thiết kế với mục đích cung cấp giải pháp quản lý toàn diện cho các yếu tố quan trọng như quản lý hàng hóa, nhân viên, khách hàng, hóa đơn và doanh thu. Bằng cách tích hợp công nghệ web hiện đại và trí tuệ nhân tạo, đồ án này mang lại những lợi ích đáng kể cho việc vận hành cửa hàng. Nền tảng responsive đảm bảo hoạt động trên mọi thiết bị, từ desktop đến mobile, giúp người dùng quản lý kinh doanh một cách linh hoạt và hiệu quả.

1.1. Mô Tả Và Mục Đích Dự Án

Dự án website quản lý cafe nhằm xây dựng một nền tảng kỹ thuật số cho các cửa hàng cafe, giúp tự động hóa các quy trình quản lý kinh doanh phức tạp. Hệ thống cung cấp các công cụ quản lý thông tin khách hàng, sản phẩm, nhân viên và doanh thu một cách tập trung. Mục đích chính là nâng cao hiệu suất hoạt động, giảm thiểu lỗi thủ công và cung cấp insight dữ liệu sâu sắc cho người quản lý.

1.2. Lý Do Chọn Thiết Kế Website

Website được chọn vì tính linh hoạt, khả năng truy cập cao và chi phí thấp so với các giải pháp truyền thống. Nền tảng web cho phép truy cập từ bất kỳ nơi nào có kết nối internet, thuận tiện cho quản lý từ xa. Ngoài ra, giao diện web responsive đảm bảo trải nghiệm người dùng tốt trên các thiết bị khác nhau, đáp ứng nhu cầu của các cửa hàng cafe hiện đại.

II. Công Nghệ Và Công Cụ Sử Dụng

Đồ án website quản lý cafe được xây dựng dựa trên các công nghệ hiện đại và phổ biến trong ngành phát triển web. Nhóm dự án sử dụng NextJS làm framework chính cho phía frontend, kết hợp với HTML, CSS và JavaScript để tạo giao diện trực quan và tương tác. Để đảm bảo thiết kế responsive và hiệu suất cao, dự án tích hợp Tailwind CSS - một framework CSS tiện lợi cho phát triển giao diện nhanh chóng. Phía backend sử dụng các công nghệ backend khác nhằm xử lý dữ liệu và logic kinh doanh. Ngoài ra, hệ thống còn tích hợp Large Language Model (LLM) để hỗ trợ chatbot quản lý và tối ưu hóa trải nghiệm người dùng.

2.1. Frontend NextJS HTML CSS Và JavaScript

NextJS là framework React hiện đại cung cấp tối ưu hóa hiệu suất tự động. HTML dùng để cấu trúc nội dung, CSS để định dạng giao diện và JavaScript để xử lý logic tương tác. Tailwind CSS giúp tăng tốc độ phát triển thông qua các class utility được xây dựng sẵn, giảm thời gian viết custom CSS.

2.2. Tailwind CSS Framework CSS Responsive

Tailwind CSS là framework utility-first giúp tạo giao diện responsive một cách nhanh chóng và hiệu quả. Nó cho phép thiết kế trực tiếp trong HTML mà không cần viết CSS tùy chỉnh phức tạp. Tailwind đảm bảo tính nhất quán về design và hỗ trợ mobile-first approach, giúp website hoạt động tốt trên mọi kích thước màn hình.

III. Phân Tích Thiết Kế Hệ Thống

Thiết kế hệ thống của website quản lý cafe tuân theo các nguyên tắc kỹ thuật phần mềm hiện đại, đặc biệt là UML (Unified Modeling Language). Hệ thống được phân chia thành nhiều module chức năng độc lập, bao gồm quản lý nhân viên, quản lý khách hàng, quản lý sản phẩm, quản lý hóa đơn và quản lý doanh thu. Mỗi module có use case riêng biệt mô tả tương tác người dùng với hệ thống. Sơ đồ Use case giúp hình dung quy trình kinh doanh và yêu cầu chức năng cụ thể. Database được thiết kế chuẩn hóa để đảm bảo toàn vẹn dữ liệu và hiệu suất truy vấn cao. Hệ thống tích hợp LLM để phân loại văn bản và hỗ trợ tính năng chatbot thông minh.

3.1. Sơ Đồ Use Case Và Yêu Cầu Chức Năng

Sơ đồ Use case bao gồm năm module chính: quản lý nhân viên, quản lý khách hàng, quản lý sản phẩm, quản lý hóa đơn và quản lý doanh thu. Mỗi use case mô tả tương tác cụ thể giữa actor (người dùng/hệ thống) và hệ thống. Điều này giúp rõ ràng hóa các yêu cầu chức năng và tạo tài liệu tham khảo cho quá trình phát triển.

3.2. Thiết Kế Database Và Cấu Trúc Dữ Liệu

Database bao gồm các bảng như: Employees, Customers, Products, Invoices, Vouchers và Transactions. Mỗi bảng có các trường dữ liệu được xác định rõ ràng với kiểu dữ liệu phù hợp. Các mối quan hệ giữa bảng được thiết lập thông qua khóa ngoài để đảm bảo tính toàn vẹn tham chiếu.

IV. Tính Năng Và Giao Diện Chính Của Hệ Thống

Website quản lý cafe cung cấp một giao diện người dùng toàn diện với nhiều tính năng quản lý hữu ích. Trang đăng nhập bảo mật với xác thực người dùng, trang tổng quan hiển thị thông tin kinh doanh ngày hôm nay bao gồm doanh thu, đơn hàng, khách hàng và sản phẩm bán chạy. Trang quản lý hàng hóa cho phép xem, chỉnh sửa và xóa sản phẩm. Trang quản lý hóa đơn ghi lại tất cả giao dịch với chi tiết thanh toán. Trang quản lý khách hàng, thành viên và nhân viên giúp lưu trữ thông tin một cách có tổ chức. Trang bán hàng hỗ trợ thanh toán tiền mặt và QR code. Tính năng voucher cho phép quản lý các chương trình khuyến mãi. Hệ thống cũng tích hợp chatbot AI để hỗ trợ quản lý cửa hàng một cách thông minh.

4.1. Trang Tổng Quan Và Dashboard

Dashboard tổng quan hiển thị các chỉ số quan trọng như doanh thu ngày hôm nay, số đơn hàng, số khách hàng mới và top 10 sản phẩm bán chạy. Giao diện sử dụng biểu đồ và số liệu thống kê để dễ nhìn nhận. Người quản lý có thể nắm bắt tình hình kinh doanh một cách nhanh chóng và chính xác.

4.2. Các Tính Năng Thanh Toán Và Quản Lý Hóa Đơn

Hệ thống thanh toán hỗ trợ hai phương thức: tiền mặt và QR code. Trang bán hàng cho phép tạo hóa đơn nhanh chóng với danh sách sản phẩm. Phiếu thanh toán được in ra để ghi chép. Quản lý hóa đơn lưu tất cả giao dịch với thông tin chi tiết cho mục đích báo cáo và kiểm toán.

Trích đoạn nội dung tài liệu

Chương 1: GIỚI THIỆU ĐỀ TÀI 1. Tên Dự án: - PHÁT TRIỂN WEBSITE QUẢN LÝ CỬA HÀNG CAFÉ 1. Mô tả Dự án: - Dự “PHÁT TRIỂN WEBSITE QUẢN LÝ CỬA HÀNG CAFÉ" được thiết kế để cung cấp một nền tảng kỹ thuật số hoàn chỉnh cho việc quản lý thông tin liên quan đến hoạt động của quán cà phê. Dưới đây là mô tả tổng quan về các tính năng và chức năng của website: o Quản lý hàng hóa: o Quản lý thông tin khách hàng: o Quản lý thông tin nhân viên: o Quản lý voucher: o Quản lý mức độ thân thiết khách hàng: o Quản lý hóa đơn: o Tổng quan cửa hàng: o Hệ thống thanh toán: - Bên cạnh việc phải thao tác nhiều với giao diện để tương tác, chủ cửa hang cà phê có thể có những thông tin tổng quan về cửa hàng cà phê thông qua Chatbot - Ngoài ra, còn có các chức năng khác như đăng nhập, đăng ký, phân quyền linh hoạt cho các đối tượng sử dụng ứng dụng.

Đặc biệt, Website có tính linh hoạt và tương thích với nhiều thiết bị khác nhau như máy tính, điện thoại di động và máy tính bảng để người dùng dễ dàng truy cập bất kỳ lúc nào, bất kỳ nơi đâu. - Đặc biệt, website được thiết kế với tính linh hoạt và tương thích cao, cho phép người dùng truy cập từ nhiều thiết bị khác nhau như máy tính, điện thoại di động và máy tính bảng. Điều này không chỉ giúp nâng cao trải nghiệm người dùng mà còn đảm bảo rằng chủ cửa hàng hay nhân viên có thể truy cập và sử dụng hệ thống bất kỳ lúc nào, bất kỳ nơi đâu. Nhân viên có thể dễ dàng kiểm tra tình trạng đơn hàng chưa hoàn thành, lên đơn hàng tại bàng cho khách, hoặc quản lý các yêu cầu và dịch vụ một cách thuận tiện.

Lý do chọn thiết kế Website: Thiết kế phần mềm quản lý quán cà phê là một chủ đề mang lại nhiều lợi ích và cơ hội hấp dẫn. Xuất phát từ thực tế, đây là một số lý do mà nhóm quyết định chọn đề tài này: - Nhu cầu thị trường: Các ngành ẩm thực nói chung và đặc biệt là lĩnh vực cà phê, đang phát triển mạnh mẽ do nhu cầu sử dụng cà phê tăng. Do đó, có một nhu cầu lớn cho các giải pháp quản lý hiệu quả để giúp quán cà phê tối ưu hóa quy trình kinh doanh và cung cấp trải nghiệm tốt cho khách hàng. - Tính ứng dụng rộng rãi: Phần mềm quản lý quán cà phê có thể được áp dụng ở nhiều cấp độ, từ quán cà phê nhỏ đến chuỗi quán lớn.

Điều này mang lại cơ hội phát triển sản phẩm với một loạt các tính năng và quy mô phù hợp với nhu cầu đặc biệt cho từng doanh nghiệp. - Tính sáng tạo và phát triển công nghệ: Thiết kế phần mềm quản lý quán cà phê là cơ hội để thể hiện sự sáng tạo trong việc tích hợp các công nghệ mới, như thanh toán di động, đặt hàng trực tuyến, hoặc tích điểm khách hàng thông minh. Điều này có thể tạo ra sản phẩm độc đáo và nổi bật trên thị trường. - Giải quyết vấn đề thực tế: Quán cà phê thường xuyên phải đối mặt với các vấn đề như quản lý đơn hàng, tồn kho, nhân sự, và tính minh bạch trong kinh doanh.

Đặc biệt vấn đề này là các vấn đề của hầu hết các cửa hàng cà phê nhỏ, vừa (chưa có phần mềm quản lý) - Tương tác xã hội và trải nghiệm khách hàng: Phần mềm quản lý quán cà phê cũng có thể tích hợp các yếu tố xã hội và trải nghiệm khách hàng, giúp tạo ra một môi trường tương tác và thân thiện. Điều này có thể làm tăng sự liên kết giữa quán cà phê và khách hàng. - Tóm lại, lựa chọn đề tài thiết kế phần mềm quản lý quán cà phê không chỉ là một cơ hội trải nghiệm thú vị trong lĩnh vực công nghệ phần mềm mà còn mang lại giá trị thực tế cho doanh nghiệp trong lĩnh vực ẩm thực và dịch vụ. Sơ đồ sitemap của Website: Hình 1.

Sitemap của website 1. Công nghệ sử dụng: - Sử dụng ngôn ngữ HTML và định dạng CSS để thiết kế giao diện, tạo nên bộ khung cơ bản và các yếu tố trang trí cho trang web. - Lập trình xử lý sự kiện với JavaScript để tạo ra các tương tác động, nâng cao trải nghiệm người dùng và giúp trang web trở nên sinh động hơn. - NextJS: Thư viện JavaScript cho phát triển giao diện người dùng, giúp xây dựng các thành phần UI linh hoạt và tái sử dụng, đồng thời cải thiện hiệu suất của ứng dụng.

- PHP: là ngôn ngữ script phía server đa năng, đa mục đích, nhưng chủ yếu được sử dụng để tạo nội dung động trên trang web. Nó phổ biến rộng rãi do tính chất nguồn mở và chức năng linh hoạt. - MySQL: là một hệ thống quản lý cơ sở dữ liệu quan hệ (RDBMS) mã nguồn mở. Nổi tiếng với khả năng xử lý nhanh, độ tin cậy đã được chứng minh, linh hoạt và dễ sử dụng.

MySQL quen thuộc và hỗ trợ tốt các dự án PHP và có tính ổn định rất cao. - Laravel: là một PHP framework mã nguồn mở và miễn phí, được phát triển bởi Taylor Otwell và nhắm vào mục tiêu hỗ trợ phát triển các ứng dụng phía Server trong mô hình Client - Server. Những tính năng nổi bật của Laravel bao gồm cú pháp dễ hiểu – rõ ràng, một hệ thống đóng gói modular và quản lý gói phụ thuộc, nhiều cách khác nhau để truy cập vào các cơ sở dữ liệu quan hệ, nhiều tiện ích khác nhau hỗ trợ việc triển khai vào bảo trì ứng dụng 16 - Large Language Model (LLM): Mô hình ngôn ngữ lớn, còn gọi là LLM, là các mô hình học sâu rất lớn, được đào tạo trước dựa trên một lượng dữ liệu khổng lồ. Bộ chuyển hóa cơ bản là tập hợp các mạng nơ-ron có một bộ mã hóa và một bộ giải mã với khả năng tự tập trung.

Bộ mã hóa và bộ giải mã trích xuất ý nghĩa từ một chuỗi văn bản và hiểu mối quan hệ giữa các từ và cụm từ trong đó. - ChatGPT(Chat Generative Pre-training Transformer): là một chatbot do OpenAI phát triển dựa trên mô hình Transformer của Google. Đây là một AI (trí tuệ nhân tạo) giúp bạn tạo các cuộc trò chuyện tự động và trả lời các câu hỏi về nhiều chủ đề và lĩnh vực khác nhau. Môi trường thiết kế: - Visual Studio Code - PHPStorm 1.

Công cụ hỗ trợ: - Photoshop, Figma: Thiết kế layout giao diện, hình ảnh, nút lệnh xử lý, logo… - Git và Github: Lưu trữ, quản lý và chia sẻ source code.… 17 Chương 2: CƠ SỞ LÝ THUYẾT 2. Ngôn ngữ HTML: 2. Giới thiệu HTML viết tắt cho Hypertext Markup Language, tạm dịch là ngôn ngữ đánh dấu siêu văn bản. HTML được sử dụng để tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, links, blockquotes,… HTML không phải là ngôn ngữ lập trình.

Điều này có nghĩa là nó không thể tạo ra các chức năng "động". Hiểu một cách đơn giản hơn, HTML cũng tương tự như phần mềm Microsoft Word, nó chỉ có tác dụng bố cục và định dạng trang web. Một tài liệu HTML được hình thành bởi các phần tử HTML (HTML Elements) được quy định bằng các cặp thẻ (tag và attributes). Các cặp thẻ này được bao bọc bởi dấu ngoặc < > và thường là sẽ được khai báo thành một cặp, bao gồm thẻ mở và thẻ đóng.

Ưu điểm - HTML là chuẩn mực Internet do tổ chức W3C (World Wide Web Consortium) duy trì. - Có mã nguồn mở, cho phép dữ liệu được công khai và miễn phí sử dụng. - Dễ dàng tìm hiểu và sử dụng nên HTML trở nên rất phổ biến, nhờ đó có được nguồn tài nguyên phong phú - Tất cả trình duyệt hiện nay đều hỗ trợ ngôn ngữ HTML và được thiết lập mặc định trong mọi cửa sổ, do đó người dùng không cần phải mua thêm phần mềm hỗ trợ nào khác. - Đánh dấu (Markup) ngắn gọn và đồng nhất - Có thể tích hợp được với nhiều ngôn ngữ khác (PHP, Ruby, Java,…) một cách dễ dàng 2.

Nhược điểm Nhược điểm lớn nhất mà HTML còn tồn tại đó chính là chỉ có thể sử dụng ở những trang web tĩnh. Đây là những trang web chỉ hiển thị thông tin mà không có sự tương tác của người dùng. Chính vậy, khi xây dựng những tính năng động hoặc hướng đối tượng người dùng thì lập trình viên cần phải sử dụng Javascript hoặc ngôn ngữ backend khác của bên thứ 3 mới có thể thực hiện được. Định dạng Website với CSS: 2.

CSS cục bộ (Inline CSS) - Được khai báo trực tiếp trong thẻ html và chỉ có tác dụng trong thẻ được khai báo: - Ví dụ: Hình 2. Ví dụ CSS cục bộ 2. CSS nội tuyến (Internal/Embedded CSS) - Được khai báo trong cặp thẻ và đặt trong phần của tài liệu HTML - Ví dụ: Hình 2. Ví dụ CSS nội tuyến 2.

CSS ngoại tuyến (External CSS) - Tách biệt hoàn toàn CSS ra khỏi tài liệu HTML bằng các file .css - Giúp kiểm soát các kiểu trình bày hoặc bố cục dàn trang cho tất cả các tài liệu HTML một cách thống nhất bằng cách thay đổi trên các file CSS - Đây là cách khai báo CSS được sử dụng nhiều nhất trong thực tế, có phạm vi ảnh hưởng đến toàn bộ website chứ không chỉ một trang web .html riêng biệt. - Tạo một file *.css: Ví dụ: file style.css lưu trong thư mục style của website 19 Hình 2. Tạo file style.css - Chèn đoạn code khai báo trong phần của trang web: Ví dụ: Hình 2. Chèn file style.css vào trang web 2.

Lập trình JavaScript: 2. Giới thiệu JavaScript - JavaScript là một ngôn ngữ lập trình dành cho việc tạo và phát triển web. Nó được nhúng vào trong file HTML giúp cho website trở nên sống động và đẹp hơn. JavaScript có thể cập nhật và thay đổi cả HTML và CSS.

- JavaScript còn là một ngôn ngữ lập trình đa nền tảng, ngoài dành cho việc lập trình frontend trên nền tảng web ra thì nó còn được sử dụng cho việc lập trình và phát triển ứng dụng trên nền tảng mobile. - Ngày nay, JavaScript có thể thực thi không chỉ trong trình duyệt mà còn trên server hoặc bất kỳ thiết bị nào có chương trình đặc biệt gọi là JavaScript engine. - Với những ưu điểm của mình mà JavaScript được các ông lớn như Google, Facebook,… hỗ trợ trong việc phát triển để cho ra đời các library hay framework JavaScript nổi tiếng hiện nay như: Angular.js, React Native, Vue. Cú pháp JavaScript cơ bản 2.