Cơ sở dữ liệu trên nền web Đề tài xây dựng ứng dụng web quản lý Đặt bàn trong nhà hàng

Cùng xu hướng đó, nhóm đã xây dựng một trang web giúp khách hàng thực hiện công việc đặt hàng mọi lúc mọi nơi thuận lợi hiệu quả nhất.1.2 Tóm tắt cơ sở lý thuyết và các công cụ/ thư vi

TRƯỜNG ĐẠI HỌC HÒA BÌNH

KHOA CÔNG NGHỆ THÔNG TIN & ĐIỆN TỬ VIỄN THÔNG

- - - -       

Học Phần: Cơ Sở Dữ Liệu Trên Nền Web

Đề tài: xây dựng ứng dụng web quản lý đặt bàn trong nhà hàng

Sinh viên thực hiện : Nguyễn Quốc An

Vũ Uy Vũ Bùi Huy Hoàng

Khoa : CNTT & ĐTVT Khóa : 521CNT Giảng viên hướng dẫn : Ths.Nguyễn Đức Thiện

KHOA CÔNG NGHỆ THÔNG TIN & ĐIỆN TỬ VIỄN THÔNG

- - - -       

Học Phần: Cơ Sở Dữ Liệu Trên Nền Web

Đề tài: xây dựng ứng dụng web quản lý đặt bàn trong nhà hàng

Sinh viên thực hiện : Nguyễn Quốc An

Vũ Uy Vũ Bùi Huy Hoàng

Khoa : CNTT & ĐTVT Khóa : 521CNT Giảng viên hướng dẫn : Ths.Nguyễn Đức Thiện

HÀ NỘI – 2023

Mục Lục

Chương 1 - Mở đầu

1.1 Giới thiệu đề tài

1.2 tóm tắt cơ sở lý thuyết và các công cụ / thư viện lập trình được sử dụng trong đề tài

1.3 Chi tiết phân công nhiệm vụ cho từng thành viên

Chương 2 - Khảo sát và phân tích yêu cầu

2.1 Tìm hiểu nghiệp vụ

2.2 Phân tích yêu cầu

Chương 3 - Thiết kế hệ thống

3.1 Thiết kế giao diện 12

3.2 Thiết kế Database 18

Chương 4 – Lập trình xây dựng và cài đặt hệ thống

4.1 Xây dựng database trên MySql 20

4.2 Xây dựng các chức năng theo thiết kế 20

4.3 Cài đặt triển khai ứng dụng lên máy chủ 20

Chương 5 - Kiểm thử ứng dụng

5 Kiểm thử các chức năng của ứng dụng 21

Chương 6 - Kết luận

Mục Lục Ảnh

ẢNH 1 SƠ ĐỒ QUẢN LÍ XÁC THỰC

ẢNH 2 SƠ ĐỒ CỦA NGƯỜI DÙNG 10

ẢNH 3 SƠ ĐỒ CỦA ADMIN 11

ẢNH 4 GIAO DIỆN ĐĂNG KÝ / ĐĂNG NHẬP 12

ẢNH 5 GIAO DIỆN TRANG CHỦ 13

ẢNH 6 GIAO DIỆN THÔNG TIN BÀN 14

ẢNH 7 GIAO DIỆN TRANG ADMIN 15

ẢNH 8 GIAO DIỆN TRANG USER 16

ẢNH 9 MÔ HÌNH DỮ LIỆU MỨC KHUNG CẢNH 17

ẢNH 10 MÔ HÌNH DỮ LIỆU MỨC ĐỈNH 17

ẢNH 11 MÔ HÌNH DỮ LIỆU PHÂN RÃ 18

ẢNH 12 CẤU TRÚC CÁC BẢNG 19

ẢNH 13 SƠ ĐỒ QUAN HỆ 19

ẢNH 14 TRANG ĐĂNG NHẬP 20

ẢNH 15 TRANG ĐĂNG KÝ 22

ẢNH 16 TRANG CHỦ 24

ẢNH 17 TRANG ADMIN 30

ẢNH 18 TRANG USER 35

ẢNH 19 TRANG ĐẶT BÀN 42

ẢNH 20 FROM THÔNG TIN ĐẶT BÀN 44

Chương 1 - Mở đầu

1.1 Giới thiệu đề tài

Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là một trong những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổ chức, cũng như các công ty, nó đóng vai trò hết sức quan trọng, có thể tạo ra những bước đột phá mạnh mẽ.

Cùng với sự phát triển không ngừng nghỉ về kỹ thuật máy tính và mạng điện tử, công nghệ thông tin cũng được những công nghệ có đẳng cấp cao và lần lượt chinh phục hết đỉnh cao này và đỉnh cao khác Mạng Internet là một trong những sản phẩm có giá trị hết sức lớn lao và ngày càng trở thành một công cụ không thể thiếu, là nền tảng chính cho sự truyền tải, troa đổi thông tin trên toàn cầu.

Bằng Internet, chúng ta đã thực hiện được nhiều công việc với tốc độ nhanh hơn và chi phí thấp hơn nhiều so với các cách thức truyền thống Chính điều này đã thúc đẩy sự khai sinh và phát triển của thương mại điện

tử và chính phủ điện tử trên khắp thế giới, làm nó biến đổi đáng kể bộ mặt văn hóa, nâng cao chất lượng cuộc sống con người.

Với sự phát triển mạnh mẽ trong lĩnh vực website dịch vụ, ứng dụng bởi rất nhiều công nghệ khác nhau như JavaScript, MySQL,JSP, Cùng

xu hướng đó, nhóm đã xây dựng một trang web giúp khách hàng thực hiện công việc đặt hàng mọi lúc mọi nơi thuận lợi hiệu quả nhất.1.2 Tóm tắt cơ

sở lý thuyết và các công cụ/ thư viện lập trình được sử dụng trong đề tài

1.2 tóm tắt cơ sở lý thuyết và các công cụ / thư viện lập trình được

sử dụng trong đề tài

1.2.1 Tóm tắt cơ sở lý thuyết:

- Mục tiêu của dự án: Xác định rõ mục tiêu của dự án, chẳng hạn như tạo ra một nền tảng trực tuyến để người dùng có thể dễ dàng tìm và đặt bàn tại nhà hàng.

- Trải nghiệm người dùng (UX): Tối ưu hóa trải nghiệm của người dùng khi

sử dụng nền tảng, bao gồm cả quá trình tìm kiếm, đặt bàn và thanh toán.

- Quản lý hệ thống và dữ liệu: Xây dựng hệ thống quản lý đặt bàn và dữ liệu

để quản lý thông tin về các bàn và đơn đặt bàn.

- Thanh toán và bảo mật: Bảo đảm tính bảo mật của dữ liệu cá nhân và thanh toán thông qua việc sử dụng các phương pháp mã hóa và các tiêu chuẩn bảo mật.

PHP: Sử dụng để xử lý logic và tương tác với cơ sở dữ liệu.

Framework và thư viện:

Bootstrap: Framework CSS để phát triển giao diện web đẹp mắt và responsively.

jQuery: Thư viện JavaScript giúp viết mã ngắn gọn và xử lý sự kiện trên trang web dễ dàng hơn.

Cơ sở dữ liệu:

MySQL/PostgreSQL/MongoDB: Hệ quản trị cơ sở dữ liệu phổ biến được sử dụng để lưu trữ và quản lý thông tin đặt bàn và thông tin khách hàng.

-Đăng ký cho user

-Hiển thị chi tiết dịch vụ

(user)

-Hiển thị danh sách dịch

vụ (admin)

Vũ Uy Vũ 521CNT1052 -Hiển thị form đặt bàn (user)

-Thực hiện đặt bàn (user) -Hiển thị form đặt dịch

vụ (user) -Thực hiện đặt dịch vụ (user)

- Hiển thị trang chủ (user)

Bùi Huy Hoàng 521CNT1017 -Thiết kế cơ sở dữ liệu -Hiển thị đơn bàn của user (admin)

-Hiển thị trang quản lý (amdin)

-Hiển thị danh sách khách (admin)

-Hiển thị danh sách đơn/dịch vụ (admin) -Tìm kiếm đơn /dịch vụ theo tên Khách (admin) -Thực hiện xác nhận đơn/dịch vụ (admin) (full phần back-end)

Chương 2 - Khảo sát và phân tích yêu cầu

2.1 Tìm hiểu nghiệp vụ

- Mô tả nghiệp vụ thực tế

Tiếp nhận yêu cầu đặt bàn: Nhân viên tiếp nhận yêu cầu đặt bàn từ khách hàng thông qua điện thoại, email hoặc trực tiếp tại quầy lễ tân Xác nhận thông tin đặt bàn: Sau khi nhận yêu cầu, nhân viên xác nhận lại với khách hàng thông tin đặt bàn như thời gian, số lượng khách, và yêu cầu đặc biệt.

Quản lý sơ đồ bàn: Nhân viên quản lý sơ đồ bàn để đảm bảo tối ưu hóa sử dụng không gian và đáp ứng các yêu cầu đặc biệt từ khách hàng.

Xử lý danh sách chờ đợi: Khi không có bàn trống, nhân viên phải quản lý danh sách chờ đợi và thông báo cho khách hàng về thời gian chờ đợi dự kiến.

- Nhu cầu cần phát triển ứng dụng web

Đặt bàn trực tuyến: Khách hàng muốn có khả năng đặt bàn trực tuyến thông qua website của nhà hàng hoặc ứng dụng di động.

Quản lý thông tin đặt bàn: Cần một hệ thống để quản lý thông tin đặt bàn, bao gồm thời gian, số lượng khách, yêu cầu đặc biệt, và thông tin liên

hệ của khách hàng.

Thông báo và xác nhận: Hệ thống cần có khả năng thông báo và xác nhận lại với khách hàng thông tin đặt bàn để đảm bảo sự chính xác và tin cậy.

Quản lý sơ đồ bàn: Ứng dụng cần có một giao diện để quản lý sơ đồ bàn, cho phép nhân viên thực hiện sắp xếp và quản lý bàn dễ dàng Thống kê và báo cáo: Cần một công cụ để thu thập dữ liệu và tạo ra báo cáo về hoạt động đặt bàn để phân tích hiệu suất và tăng cường quản lý.

2.2 Phân tích yêu cầu

2.2.1 Yêu cầu chức năng:

a Đặt bàn trực tuyến:

- Khả năng cho phép khách hàng đặt bàn trực tuyến thông qua website hoặc ứng dụng di động.

- Giao diện đơn giản và dễ sử dụng cho việc chọn thời gian,

số lượng khách và các yêu cầu đặc biệt.

- Cập nhật sơ đồ bàn khi có đặt bàn mới hoặc thay đổi.

e Thống kê và báo cáo:

- Tính năng thu thập dữ liệu và tạo báo cáo về số lượng đặt bàn, thời gian chờ đợi, và hiệu suất sử dụng bàn.

2.2.2 Yêu cầu phi chức năng:

- Ứng dụng cần có hiệu suất cao và khả năng mở rộng để đáp ứng được số lượng lớn đặt bàn và tải trọng đồng thời.

b Bảo mật:

- Đảm bảo an toàn thông tin của khách hàng và giao dịch qua các biện pháp bảo mật như mã hóa dữ liệu và xác thực hai yếu tố.

c Giao diện người dùng:

- Thiết kế giao diện người dùng thân thiện và dễ sử dụng trên cả máy tính và thiết bị di động.

2.3 Các Actor và Use case

o Thanh toán

- Với riêng admin

Ảnh 1 Sơ đồ quản lí xác thực

Ảnh 2 Sơ đồ của người dùng

Ảnh 3 Sơ đồ của Admin

Chương 3 - Thiết kế hệ thống

3.1 Thiết kế giao diện

- Giao diện chính của ứng dụng

Ảnh 4 Giao diện đăng ký / đăng nhập

Ảnh 5 Giao diện trang chủ

Ảnh 6 Giao diện thông tin bàn

Ảnh 7 Giao diện trang Admin

Ảnh 8 Giao diện trang User

3.2 Thiết kế Database

- Thiết kế cấu trúc các bảng dữ liệu và sơ đồ quan hệ trong database

Ảnh 9 Mô hình dữ liệu mức khung cảnh

Ảnh 10 Mô hình dữ liệu mức đỉnh

Ảnh 11 Mô hình dữ liệu phân rã

Chương 4 – Lập trình xây dựng và cài đặt hệ thống

4 1 Xây dựng database trên MySql

Ảnh 12 Cấu trúc các bảng

Ảnh 13 Sơ đồ quan hệ

4.2 Xây dựng các chức năng theo thiết kế

"sign-in          <h2 class="title">Đăng Nhập</h2>

-          <div class="input-field">

-           < class="fas fa-user"></ >i

-           <inputtype="tel"placeholder="Số( Điện Thoại"name="sdt"/>

-          </div>

-          <div class="input-field">

-           < class="fas fa-lock"></ >i

-           <inputtype="password"placeholder="Mật khẩ/u"name="matkhau"/>

-          </div>

-          <input type="submit" value="Đăng Nhập"

class="btn solid" name="login"/>

-          < class="social-text">Or Sign in with socialplatforms</ >p

-          <div class="social-media">

-           < href="#" class="social-icon">

-            < class="fab fa-facebook-f"></ >i

-           </ >a

-           < href="#" class="social-icon">

-            < class="fab fa-twitter"></ >i

-            < class="fab fa-google"></ >i

-           </ >a

-          </div>

-         </form>

- <! Chữ Nố/i Switch form >

-       <div class="panels-container">

-        <div class="panel left-panel">

-         <div class="content">

Các chức năng của trang

o Kiểm tra tên đăng nhập và mật khẩu

o Chuyển qua trang đăng kí

- Code chức năng của trang

- if ($_SERVER["REQUEST_METHOD"] == "POST" &&

isset($_POST['login'])) {

-     $sdt = $_POST['sdt'];

-     $matkhau = $_POST['matkhau'];

-  

-     // Kiể/m tra tển đăng nhập và mật khẩ/u

-     $sql = "SELECT FROM users WHERE sdt=?";

-       if ($user['phanquyen'] == 'admin') {

-         header("Location: /admin/index.php"); // Sư/dụng URL tương đố(i

-         exit();

-       } elseif ($user['phanquyen'] == 'user') {

-         header("Location: /user/index.php"); // Sư/dụng URL tương đố(i

"sign-up          <h2 class="title">Đăng Ký</h2>

-          <div class="input-field">

-           < class="fas fa-user"></ >i

-           <inputtype="text"placeholder="Họ và tển"

name="tenkhach"required />

-           <inputtype="tel"placeholder="Số điện thoại"name="sdt" required />

-          </div>

-          <div class="input-field">

-           < class="fas fa-envelope"></ >i

-           <inputtype="email"placeholder="Email"

name="mail"required/>

-          </div>

-          <div class="input-field">

-           < class="fas fa-lock"></ >i

-           <inputtype="password"placeholder="Mật khẩ/u"name="matkhau" required/>

-          <div class="social-media">

-           < href="#" class="social-icon">

-            < class="fab fa-facebook-f"></ >i

-           </ >a

-           < href="#" class="social-icon">

-            < class="fab fa-twitter"></ >i

-           </ >a

-           < href="#" class="social-icon">

-            < class="fab fa-google"></ >i

-           </ >a

-          </div>

-         </form>

- Các chức năng của trang

o Kiểm tra thông tin đăng kí đã tồn tại hay chưa

o Chuyển qua trang đăng nhập

- Code chức năng của trang

- if($_SERVER["REQUEST_METHOD"] == "POST" &&

isset($_POST['signup'])){

-   $tenkhach = $_POST['tenkhach'];

-   $sdt = $_POST['sdt'];

-   $mail = $_POST['mail'];

-   $matkhau = md5($_POST['matkhau']);

  // Kiể/m tra xem sdt đã tốdn tại trong cơ sơ/ dữ liệu hay chưa

-   $check_sql = "SELECT FROM users WHERE sdt = '$sdt' AND

mail '= $mail'";

-   $check_result = $conn->query($check_sql);

  if ($check_result->num_rows == ) {0

-     // Nể(u sdt khống tốdn tại, thểm người dùng mới

-     $sql = "INSERT INTO users (tenkhach, sdt, mail, matkhau, phanquyen, ngaytao)

-         VALUES ('$tenkhach', '$sdt', '$mail',

'$matkhau', 'user', NOW())";

Ảnh 16 Trang chủ

- Code giao diện của trang

- <! header section start >

    <nav class="navbar">

-       < href="#home">Trang chu/</ >a

-       < href="#speciality">Danh mục</ >a

  <! Home section start >

-   <sectionclass="home"id="home">

-     <div class="content">

"./public/img/Fast-food-design-Premium     </div>

-   </section>

-   <! Home section end >

  <! Speciality section start >

-   <sectionclass="speciality"id="speciality">

-     <h1class="heading"><span>Món</span></h1>

-     <div class="box-container">

-   <! Popular section start >

-   <sectionclass="popular" id="popular">

-     <h1class="heading">Đặt<span> bàn </span></h1>

-     <div class="box-container">

  <! Footer section start >

-   <sectionclass="footer">

-     <div class="share">

-       < href=""class="btn">facebook</ >a

-       < href=""class="btn">twitter</ >a

-       < href=""class="btn">instagram</ >a

-     </div>

-     <h1class="credit">Design by <span>Quoc "Hyuk"

An</span> | Back-end By <span>Huy Hoàng</span> </br> all right reserved!</h1>

-   <scriptsrc="public/assest/js/main.js"></script>

- Các chức năng của trang

o Load lại trang khi bấm vào Trang chủ

o Cuộn xuống phần món khi bấm vào Danh mục

o Cuộn xuống phần đặt bàn khi bấm vào Nổi bật

o Cuộn lên đầu trang khii bấm mũi tên lên

o Hiện thêm thông tin món khi di chuột vào từng món

o Hiển thị thêm thông tin bàn khi bấm vào xem

o Kiểm tra thông tin đăng nhập (admin,user,null) khi bấm vào Account và chuyển qua trang tương ứng (nếu là null sẽ trở ra trang đăng kí / đăng nhập)

- Code chức năng của trang

- <?php

- include'./include/connect.php';

function monan($result) {

-   while($row = $result->fetch_assoc()) {

-     $icon = $row['icon']; // Assuming you have a column named 'icon'

-     $imgmon = $row['img']; // Assuming you have a column named 'img'

-     $tenmon = $row['tenmon']; // Assuming you have a columnnamed 'tenmon'

-     $mota = $row['mota']; // Assuming you have a column named 'tenmon'

-     $url = 'http://localhost:80/webcsdl/'; // Corrected URLassignment

    echo '<div class="box">