Code đồ án Fullstack Quản lý web Billiards POS - Quản lý Quán Bi-a (HTML,CSS,JS + Node.js,Express + SQLite)

<ul style="box-sizing: border-box; margin: 0px; padding-right: 0px; padding-left: 0px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; outline: 0px; vertical-align: top; list-style: none; font-family: sans-serif, Tahoma, Arial; color: rgb(140, 102, 53);"> <li style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <b style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-weight: bold !important; background: transparent; outline: 0px; vertical-align: top;">Quản lý bàn &amp; Tính tiền (POS):</b><span class="citation-29 citation-end-29" style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;">&nbsp;Giao diện trực quan để xem trạng thái bàn (trống, đang chơi, đã đặt), bắt đầu tính giờ, thêm đồ ăn/thức uống vào hóa đơn, áp dụng giảm giá/phụ thu, chuyển bàn và thực hiện thanh toán (tiền mặt, ngân hàng - hỗ trợ QR code)<source-footnote _nghost-ng-c3134149013="" ng-version="0.0.0-PLACEHOLDER" style="box-sizing: border-box; margin: 0px; padding: 0px; border: none;"></source-footnote></span>.&nbsp;<span class="citation-28 citation-end-28" style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;">Lưu trữ lịch sử hóa đơn đã thanh toán<source-footnote _nghost-ng-c3134149013="" ng-version="0.0.0-PLACEHOLDER" style="box-sizing: border-box; margin: 0px; padding: 0px; border: none;"></source-footnote></span>.</p> </li> <li style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <b style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-weight: bold !important; background: transparent; outline: 0px; vertical-align: top;">Quản lý Kho &amp; Thực đơn:</b>&nbsp;Cho phép quản lý danh sách mặt hàng (thành phẩm bán) và nguyên vật liệu. Hỗ trợ định lượng công thức cho các món chế biến và tự động tính toán số lượng có thể làm dựa trên tồn kho nguyên vật liệu. Ghi lại lịch sử nhập kho và các thao tác thêm/sửa/xóa.</p> </li> <li style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <b style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-weight: bold !important; background: transparent; outline: 0px; vertical-align: top;">Quản lý Khách hàng:</b>&nbsp;Lưu trữ thông tin khách hàng (tên, SĐT), theo dõi lịch sử giao dịch, tổng chi tiêu, số lượt đến. Hỗ trợ phân hạng thành viên tự động dựa trên mức chi tiêu.</p> </li> <li style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <b style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-weight: bold !important; background: transparent; outline: 0px; vertical-align: top;">Quản lý Đặt bàn:</b>&nbsp;Cho phép tạo và quản lý lịch đặt bàn cho khách, ghi nhận thông tin khách hàng, trạng thái đặt bàn (đã xác nhận, hoàn thành, hủy, không đến).</p> </li> <li style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <b style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-weight: bold !important; background: transparent; outline: 0px; vertical-align: top;">Quản lý Thu Chi:</b>&nbsp;Ghi nhận các phiếu thu, phiếu chi tiền mặt hoặc ngân hàng, phân loại chi phí và xem báo cáo sổ quỹ.</p> </li> <li style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <b style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-weight: bold !important; background: transparent; outline: 0px; vertical-align: top;">Quản lý Nhân viên &amp; Chấm công:</b>&nbsp;Quản lý hồ sơ nhân viên, chấm công (check-in/check-out), ghi nhận trạng thái đi làm (có mặt, đi trễ, vắng), quản lý đăng ký ca làm việc.</p> </li> <li style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <b style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-weight: bold !important; background: transparent; outline: 0px; vertical-align: top;">Báo cáo:</b>&nbsp;Cung cấp báo cáo tổng hợp về kinh doanh (doanh thu, lợi nhuận, sản phẩm bán chạy, hiệu suất bàn, chi phí, doanh thu theo giờ), báo cáo khách hàng (phân loại hạng, top chi tiêu/lượt đến) và báo cáo nhân sự (chuyên cần, hiệu suất).</p> </li> <li style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <b style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-weight: bold !important; background: transparent; outline: 0px; vertical-align: top;">Cài đặt &amp; Phân quyền:</b>&nbsp;Cho phép tùy chỉnh thông tin quán, cài đặt tính tiền (bảng giá theo giờ, ngày lễ), cài đặt hóa đơn (logo, thông tin hiển thị), quản lý tài khoản nhân viên (admin/user) và phân quyền chi tiết cho từng chức năng đối với vai trò 'user'.</p> </li> <li style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <b style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-weight: bold !important; background: transparent; outline: 0px; vertical-align: top;">Trợ giúp:</b>&nbsp;Trang trợ giúp động, có thể chỉnh sửa nội dung hướng dẫn từ trang cài đặt.</p> </li> </ul>

XEM THÊM ==> Hướng dẫn cài đặt chi tiết

HÌNH ẢNH DEMO

<ul style="box-sizing: border-box; margin: 0px; padding-right: 0px; padding-left: 0px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; outline: 0px; vertical-align: top; list-style: none; font-family: sans-serif, Tahoma, Arial; color: rgb(140, 102, 53);"> <li style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <b style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-weight: bold !important; background: transparent; outline: 0px; vertical-align: top;">Yêu cầu:</b>&nbsp;Cần cài đặt Node.js và npm (Node Package Manager).</p> </li> <li style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <b style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-weight: bold !important; background: transparent; outline: 0px; vertical-align: top;">Bước 1:</b>&nbsp;Tải mã nguồn dự án về máy.</p> </li> <li style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <b style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-weight: bold !important; background: transparent; outline: 0px; vertical-align: top;">Bước 2:</b>&nbsp;Mở terminal hoặc command prompt, điều hướng đến thư mục gốc của dự án (thư mục chứa file&nbsp;<code style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; font-size: 12.6px; color: rgb(199, 37, 78); background: transparent; border-radius: 4px; font-weight: inherit; outline: 0px; vertical-align: top;">package.json</code>).</p> </li> <li style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <b style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-weight: bold !important; background: transparent; outline: 0px; vertical-align: top;">Bước 3:</b>&nbsp;Chạy lệnh&nbsp;<code style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; font-size: 12.6px; color: rgb(199, 37, 78); background: transparent; border-radius: 4px; font-weight: inherit; outline: 0px; vertical-align: top;">npm install</code>&nbsp;để cài đặt các thư viện cần thiết được liệt kê trong&nbsp;<code style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; font-size: 12.6px; color: rgb(199, 37, 78); background: transparent; border-radius: 4px; font-weight: inherit; outline: 0px; vertical-align: top;">package.json</code>.</p> </li> <li style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <b style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-weight: bold !important; background: transparent; outline: 0px; vertical-align: top;">Bước 4:</b>&nbsp;Tạo file&nbsp;<code style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; font-size: 12.6px; color: rgb(199, 37, 78); background: transparent; border-radius: 4px; font-weight: inherit; outline: 0px; vertical-align: top;">.env</code>&nbsp;trong thư mục gốc và định nghĩa biến&nbsp;<code style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; font-size: 12.6px; color: rgb(199, 37, 78); background: transparent; border-radius: 4px; font-weight: inherit; outline: 0px; vertical-align: top;">SESSION_SECRET</code>&nbsp;với một chuỗi bí mật ngẫu nhiên và đủ mạnh (thay thế "your-very-strong-and-secret-key-here"). Ví dụ:&nbsp;<code style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; font-size: 12.6px; color: rgb(199, 37, 78); background: transparent; border-radius: 4px; font-weight: inherit; outline: 0px; vertical-align: top;">SESSION_SECRET=chuoiKyTuBiMatCuaBan</code>.</p> </li> <li style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <b style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-weight: bold !important; background: transparent; outline: 0px; vertical-align: top;">Bước 5:</b>&nbsp;Chạy lệnh&nbsp;<code style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; font-size: 12.6px; color: rgb(199, 37, 78); background: transparent; border-radius: 4px; font-weight: inherit; outline: 0px; vertical-align: top;">node server.js</code>&nbsp;để khởi động máy chủ backend. Máy chủ sẽ chạy trên cổng 8888 (theo file&nbsp;<code style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; font-size: 12.6px; color: rgb(199, 37, 78); background: transparent; border-radius: 4px; font-weight: inherit; outline: 0px; vertical-align: top;">server.js</code>) và tự động tạo file cơ sở dữ liệu&nbsp;<code style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; font-size: 12.6px; color: rgb(199, 37, 78); background: transparent; border-radius: 4px; font-weight: inherit; outline: 0px; vertical-align: top;">database.sqlite</code>&nbsp;nếu chưa có.</p> </li> <li style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <b style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-weight: bold !important; background: transparent; outline: 0px; vertical-align: top;">Bước 6:</b>&nbsp;Mở trình duyệt và truy cập vào địa chỉ của frontend&nbsp;<code style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; font-size: 12.6px; color: rgb(199, 37, 78); background: transparent; border-radius: 4px; font-weight: inherit; outline: 0px; vertical-align: top;">http://localhost:8888/login/login.html</code>. Tài khoản đầu tiên đăng ký sẽ là tài khoản admin.</p> </li> <li style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> <p style="box-sizing: border-box; margin: 0px 0px 10px; padding: 0px; border: 0px; background: transparent; font-weight: inherit; outline: 0px; vertical-align: top;"> admin : tk" vo thanh minh mk: 1</p> </li> </ul>

Nguồn: Topcode.vn