แสดงรายชื่อโต๊ะ จองโต๊ะ จากฐานข้อมูล PHP + MySQLi + Bootstrap4

แจกฟรี ตัวอย่าง แสดงรายชื่อโต๊ะจากฐานข้อมูล โดยใช้ PHP MySQLi Bootstrap4 (รองรับ PHP7) ทำขึ้นมาแบบง่ายๆครับ เหมาะสำหรับเอาไปต่อยอดทำระบบดังนี้

ระบบร้านอาหาร มีระบบจองโต๊ะ เลือกโต๊ะ
ระบบร้านเครื่องดื่ม
ฯลฯ

ฟรีคลิปปรับพื้นฐานภาษา PHP คลิก

database & table : ตารางที่ใช้ในการเก็บข้อมูลโต๊ะชื่อตาราง tbl_table คอลัมภ์ที่ใช้แยกสถานะว่าโต๊ะไหนว่าง หรือไม่ว่าง ดูที่คอลัมภ์ table_status (0 = ไม่ว่าง , 1 = ว่าง)

CREATE DATABASE IF NOT EXISTS `workshop_showtable` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
USE `workshop_showtable`;

-- --------------------------------------------------------

--
-- Table structure for table `tbl_table`
--

CREATE TABLE `tbl_table` (
  `id` int(11) NOT NULL,
  `table_name` varchar(50) NOT NULL,
  `table_status` int(1) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Dumping data for table `tbl_table`
--

INSERT INTO `tbl_table` (`id`, `table_name`, `table_status`) VALUES
(1, 'A01', 1),
(2, 'A02', 1),
(3, 'A03', 1),
(4, 'A04', 0),
(5, 'A05', 1),
(6, 'B01', 1),
(7, 'B02', 0),
(8, 'B03', 0),
(9, 'B04', 1),
(10, 'B05', 1),
(11, 'C01', 1),
(12, 'C02', 0),
(13, 'C03', 1),
(14, 'C04', 1),
(15, 'C05', 1),
(16, 'D01', 0),
(17, 'D02', 1),
(18, 'D03', 1),
(19, 'D04', 1),
(20, 'D05', 0);

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_table`
--
ALTER TABLE `tbl_table`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_table`
--
ALTER TABLE `tbl_table`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=21;
COMMIT;

CREATE DATABASE IF NOT EXISTS `workshop_showtable` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;

USE `workshop_showtable`;

-- --------------------------------------------------------

-- Table structure for table `tbl_table`

CREATE TABLE `tbl_table` (

`id` int(11) NOT NULL,

`table_name` varchar(50) NOT NULL,

`table_status` int(1) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- Dumping data for table `tbl_table`

INSERT INTO `tbl_table` (`id`, `table_name`, `table_status`) VALUES

(1, 'A01', 1),

(2, 'A02', 1),

(3, 'A03', 1),

(4, 'A04', 0),

(5, 'A05', 1),

(6, 'B01', 1),

(7, 'B02', 0),

(8, 'B03', 0),

(9, 'B04', 1),

(10, 'B05', 1),

(11, 'C01', 1),

(12, 'C02', 0),

(13, 'C03', 1),

(14, 'C04', 1),

(15, 'C05', 1),

(16, 'D01', 0),

(17, 'D02', 1),

(18, 'D03', 1),

(19, 'D04', 1),

(20, 'D05', 0);

-- Indexes for dumped tables

-- Indexes for table `tbl_table`

ALTER TABLE `tbl_table`

ADD PRIMARY KEY (`id`);

-- AUTO_INCREMENT for dumped tables

-- AUTO_INCREMENT for table `tbl_table`

ALTER TABLE `tbl_table`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=21;

COMMIT;

หน้าหลัก แสดงโต๊ะ index.php

<?php
//connect database
$condb= mysqli_connect("localhost","root","your_password","workshop_showtable") or die("Error: " . mysqli_error($condb));
mysqli_query($condb, "SET NAMES 'utf8' ");
//query
$query = "SELECT * FROM tbl_table ORDER BY id ASC";
$result = mysqli_query($condb, $query);
?>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <title>แสดงรายชื่อโต๊ะจากฐานข้อมูล PHP+MySQLi+Bootstrap4</title>
    <style type="text/css">
    .devbanban{
    background-color: #ffffff;
    }
    </style>
  </head>
  <body style="background-color: #330000;">
    <div class="container">
      <div class="row">
        <div class="col-sm-2 col-md-2"></div>
        <div class="col-12 col-sm-11 col-md-7 devbanban" style="margin-top: 50px;">
          <br>
          <h4 align="center" style="color: red;">แสดงรายชื่อโต๊ะจากฐานข้อมูล PHP+MySQLi+Bootstrap4</h4>
          <br>
          <div class="row">
            <div class="col-sm-12 col-md-12">
              <div class="alert alert-warning" role="alert">
                <center>Tables</center>
              </div>
              <hr>
              <div class="row" style="margin-bottom: 20px;">
                <?php foreach ($result as  $row) {
                  if($row['table_status']==1){
                    echo '<div class="col-2 col-md-2 col-sm-2" style="margin: 5px;">';
                  echo '<a href="booking.php?id='.$row["id"].'&act=booking"class="btn btn-success" target="_blank">'.$row['table_name'].'</a></div>';
                    }else{
                      echo '<div class="col-2 col-md-2 col-sm-2" style="margin: 5px;">';
                    echo '<a href="index.php?id='.$row["id"].'&act=booking-detail" class="btn btn-secondary" target="_blank">'.$row['table_name'].'</a></div>';
                      }
                    } ?>
                  </div>
                  <p>*เขียว = ว่าง, เทา = ไม่ว่าง</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <hr>
        <center> <font color="white"> designed by devbanban.com  สนับสนุนได้ที่ <a href="https://devbanban.com/?page_id=2309" target="_blank"> คลิก </a></font></center>
      </body>
    </html>

<?php

//connect database

$condb= mysqli_connect("localhost","root","your_password","workshop_showtable") or die("Error: " . mysqli_error($condb));

mysqli_query($condb, "SET NAMES 'utf8' ");

//query

$query = "SELECT * FROM tbl_table ORDER BY id ASC";

$result = mysqli_query($condb, $query);

<!doctype html>

<head>

<title>แสดงรายชื่อโต๊ะจากฐานข้อมูล PHP+MySQLi+Bootstrap4</title>

.devbanban{

background-color: #ffffff;

}

</style>

</head>

<br>

<h4 align="center" style="color: red;">แสดงรายชื่อโต๊ะจากฐานข้อมูล PHP+MySQLi+Bootstrap4</h4>

<br>

<center>Tables</center>

</div>

<hr>

<?php foreach ($result as $row) {

if($row['table_status']==1){

echo '<div class="col-2 col-md-2 col-sm-2" style="margin: 5px;">';

echo '<a href="booking.php?id='.$row["id"].'&act=booking"class="btn btn-success" target="_blank">'.$row['table_name'].'</a></div>';

}else{

echo '<div class="col-2 col-md-2 col-sm-2" style="margin: 5px;">';

echo '<a href="index.php?id='.$row["id"].'&act=booking-detail" class="btn btn-secondary" target="_blank">'.$row['table_name'].'</a></div>';

}

} ?>

</div>

<p>*เขียว = ว่าง, เทา = ไม่ว่าง</p>

</div>

<hr>

<center> <font color="white"> designed by devbanban.com สนับสนุนได้ที่ <a href="https://devbanban.com/?page_id=2309" target="_blank"> คลิก </a></font></center>

</body>

</html>

*มีต่อด้านล่าง

ผลการทำงาน

รายการระบบพร้อมใช้ ราคาถูก ได้โค้ดทั้งหมด

ระบบอื่นๆ

booking.php
เป็นหน้าที่แสดงรายละเอียดของโต๊ะในหน้าฟอร์ม *คิวรี่ให้เรียบร้อยแล้ว

<?php
//connect database
$condb= mysqli_connect("localhost","root","your_password","workshop_showtable") or die("Error: " . mysqli_error($condb));
mysqli_query($condb, "SET NAMES 'utf8' ");
//query
$query = "SELECT * FROM tbl_table WHERE id=$_GET[id]";
$result = mysqli_query($condb, $query);
$row = mysqli_fetch_array($result);
//print_r($row);
?>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <title>แสดงข้อมูลโต๊ะเพื่อทำการจอง</title>
    <style type="text/css">
    .devbanban{
    background-color: #ffffff;
    }
    </style>
  </head>
  <body style="background-color: #330000;">
    <div class="container">
      <div class="row">
        <div class="col-sm-2 col-md-2"></div>
        <div class="col-12 col-sm-11 col-md-7 devbanban" style="margin-top: 50px;">
          <br>
          <h4 align="center" style="color: red;">แสดงรายชื่อโต๊ะจากฐานข้อมูล PHP+MySQLi+Bootstrap4</h4>
          <br>
          <div class="row">
            <div class="col-sm-12 col-md-12">
              <div class="alert alert-warning" role="alert">
                <center><font color="red"> <b> บันทึกการจอง </b></font> </center>
              </div>
              <hr>
                <div style="margin-left: 20px;">
                  <form action="" method="post">
                    <div class="form-group row">
                      <label class="col-sm-2 ">เลขโต๊ะ</label>
                      <div class="col-sm-4">
                        <input type="text" name="table_name" class="form-control" readonly value="<?php echo $row['table_name'];?>">
                      </div>
                    </div>
                    <div class="form-group row">
                      <label class="col-sm-2 ">ผู้จอง</label>
                      <div class="col-sm-7">
                        <input type="text" name="booking_name" class="form-control" required placeholder="ชื่อผู้จอง" minlength="5">
                      </div>
                    </div>
                    <div class="form-group row">
                      <label class="col-sm-2 ">วันที่</label>
                      <div class="col-sm-5">
                        <input type="date" name="booking_date" class="form-control" value="<?php echo date('Y-m-d');?>">
                      </div>
                      <label class="col-sm-1 ">เวลา</label>
                      <div class="col-sm-3">
                        <input type="time" name="booking_time" class="form-control" required placeholder="เวลา">
                      </div>
                    </div>
                    <div class="form-group row">
                      <label class="col-sm-2 ">เบอร์โทร</label>
                      <div class="col-sm-7">
                        <input type="text" name="booking_phone" class="form-control" required placeholder="เบอร์โทร" minlength="10" maxlength="10">
                      </div>
                    </div>
                    <div class="form-group row">
                      <label class="col-sm-2 ">ผู้บันทึก</label>
                      <div class="col-sm-3">
                        <input type="text" name="booking_staff" class="form-control" readonly value="พนง.">
                      </div>
                    </div>
                    <div class="form-group row">
                      <label class="col-sm-2 "></label>
                      <div class="col-sm-10">
                       <button type="submit" class="btn btn-success">บันทึกการจอง</button>
                       <br>
                       ศึกษาการทำระบบ เพิ่ม ลบ แก้ไข แสดงข้อมูล เพิ่มเติมได้ที่ :
                       <a href="https://www.youtube.com/playlist?list=PLEA4F1w-xYVadrcnedOqksEoOhh4gZfzO" target="_blank">
                        Click
                      </a>
                      </div>
                    </div>
                  </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <hr>
        <center> <font color="white"> designed by devbanban.com  สนับสนุนได้ที่ <a href="https://devbanban.com/?page_id=2309" target="_blank"> คลิก </a></font></center>
      </body>
    </html>

<?php

//connect database

$condb= mysqli_connect("localhost","root","your_password","workshop_showtable") or die("Error: " . mysqli_error($condb));

mysqli_query($condb, "SET NAMES 'utf8' ");

//query

$query = "SELECT * FROM tbl_table WHERE id=$_GET[id]";

$result = mysqli_query($condb, $query);

$row = mysqli_fetch_array($result);

//print_r($row);

<!doctype html>

<head>

<title>แสดงข้อมูลโต๊ะเพื่อทำการจอง</title>

.devbanban{

background-color: #ffffff;

}

</style>

</head>

<br>

<h4 align="center" style="color: red;">แสดงรายชื่อโต๊ะจากฐานข้อมูล PHP+MySQLi+Bootstrap4</h4>

<br>

<center><font color="red"> <b> บันทึกการจอง </b></font> </center>

</div>

<hr>

<label class="col-sm-2 ">เลขโต๊ะ</label>

</div>

</div>

<label class="col-sm-2 ">วันที่</label>

</div>

</div>

</div>

<label class="col-sm-2 ">ผู้บันทึก</label>

</div>

<button type="submit" class="btn btn-success">บันทึกการจอง</button>

<br>

ศึกษาการทำระบบ เพิ่ม ลบ แก้ไข แสดงข้อมูล เพิ่มเติมได้ที่ :

Click

</a>

</div>

</form>

</div>

<hr>

<center> <font color="white"> designed by devbanban.com สนับสนุนได้ที่ <a href="https://devbanban.com/?page_id=2309" target="_blank"> คลิก </a></font></center>

</body>

</html>

ผลการทำงาน

*อย่าลืมเอาไปต่อยอดนะครับ + ติดตามภาคต่อเร็วๆนี้ครับ ^^

**ศึกษาการทำระบบเพิ่ม ลบ แก้ไข ได้ที่ https://www.youtube.com/playlist?list=PLEA4F1w-xYVadrcnedOqksEoOhh4gZfzO

แฟนเพจ : https://www.facebook.com/sornwebsites/

ร่วมสนับสนุน ค่ากาแฟ ค่าโฮส devbanban.com และทีมงานได้ที่

ธนาคารกรุงไทย สาขาเดอะมอลล์ท่าพระ
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 878-0-17747-6
————————————————————————————
ธนาคารไทยพาณิชย์ สาขามหาวิทยาลัยราชภัฏธนบุรี
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 406-359094-1

————————————————————————————

ธนาคารกสิกร สาขาเออร์เบิร์น สแควร์ ประชาชื่น
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 048-1-17571-2

devbanban

แสดงรายชื่อโต๊ะ จองโต๊ะ จากฐานข้อมูล PHP + MySQLi + Bootstrap4

Byพิศิษฐ์ บวรเลิศสุธี

*อย่าลืมเอาไปต่อยอดนะครับ + ติดตามภาคต่อเร็วๆนี้ครับ ^^

Related

Related Post

ระบบบริหารบุคลากร ระบบ HR + ระบบบันทึกเวลาเข้างาน

ฟรีคลิปสอนทำเว็บไซต์ PHP PDO MySQL AdminLTE3 2024

ระบบหอพัก , อพาร์ทเม้นท์ รายวัน รายเดือน ราคาเบาๆ เอาไปต่อยอดได้ 2024

You missed

ระบบบริหารบุคลากร ระบบ HR + ระบบบันทึกเวลาเข้างาน

ฟรีคลิปสอนทำเว็บไซต์ PHP PDO MySQL AdminLTE3 2024

ระบบหอพัก , อพาร์ทเม้นท์ รายวัน รายเดือน ราคาเบาๆ เอาไปต่อยอดได้ 2024

แจกฟรี To-do list Ui ออกแบบจาก Bootstrap v5.3

Byพิศิษฐ์ บวรเลิศสุธี

*อย่าลืมเอาไปต่อยอดนะครับ + ติดตามภาคต่อเร็วๆนี้ครับ ^^

Share this:

Related

Related Post

You missed