สอนเขียน PHP แสดงการจองห้องประชุมแบบไฮไลท์ตามช่วงเวลา (แบบเชื่อมต่อฐานข้อมูล MySQL)

ตัวอย่าง ผลลัพธ์ที่ได้จากการจองในฐานข้อมูล

ตาราง tb_room

สร้างตารางรายชื่อห้องประชุม

สำหรับ id นั้นเป็น Primarykey จะกำหนดให้สร้างอัตโนมัติ ทุกครั้งที่เราเพิ่มชื่อห้องประชุมใหม่

--
-- Database: `tobedev_example`
--

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

--
-- Table structure for table `tb_room`
--

CREATE TABLE IF NOT EXISTS `tb_room` (
  `id` int(11) NOT NULL,
  `name` varchar(30) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

--
-- Dumping data for table `tb_room`
--

INSERT INTO `tb_room` (`id`, `name`) VALUES
(1, 'ห้องประชุม 1'),
(2, 'ห้องประชุม 2'),
(3, 'ห้องประชุม 3'),
(4, 'ห้องประชุม 4'),
(5, 'ห้องประชุม 5');

--
-- Indexes for dumped tables
--

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

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tb_room`
--
ALTER TABLE `tb_room`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=6;

ตาราง tb_booking

สร้างตารางข้อมูลการจองห้องประชุม

ตารางนี้อาจจะดูยังไม่ค่อยสมบูรณ์นัก เพราะขาดฟิลด์ที่เก็บวันที่จอง ผู้ที่ทำรายการ และอื่นๆที่เป็นส่วนประกอบที่จำเป็นต้องมี แต่เพื่อง่ายต่อการสร้างตัวอย่าง จึงข้ามส่วนต่างๆเหล่านั้นไปก่อน

--
-- Database: `tobedev_example`
--

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

--
-- Table structure for table `tb_booking`
--

CREATE TABLE IF NOT EXISTS `tb_booking` (
  `id` int(11) NOT NULL,
  `room_id` int(11) NOT NULL,
  `start_time` varchar(5) NOT NULL,
  `end_time` varchar(5) NOT NULL,
  `title` varchar(50) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

--
-- Dumping data for table `tb_booking`
--

INSERT INTO `tb_booking` (`id`, `room_id`, `start_time`, `end_time`, `title`) VALUES
(1, 1, '09:00', '12:00', 'อบรม เทคโนโลยีสารสนเทศ และการสื่อสาร'),
(2, 3, '11:45', '16:10', 'หัวข้อพิเศษเกี่ยวกับวิทยาการคอมพิวเตอร์');

--
-- Indexes for dumped tables
--

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

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tb_booking`
--
ALTER TABLE `tb_booking`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=3;

ส่วนของโค้ด PHP จะมีอยู่ด้วยกัน 2 ไฟล์

1. การเชื่อมต่อฐานข้อมูล ซึ่งแต่ละที่จะใช้ไม่เหมือนกัน

<?php
$mysqli = new mysqli("localhost:33065", "tobedev", "1234", "tobedev_example");

/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

/* change character set to utf8 */
if (!$mysqli->set_charset("utf8")) {
    printf("Error loading character set utf8: %s\n", $mysqli->error);
    exit();
}

//$mysqli->close();
?>

2. ส่วนของโค้ด PHP แสดงผลไฮไลท์ตามช่วงเวลา

<?php
/*------------------------------------------------------------------------------
** File : booking_room.php
** Description : การดึงข้อมูลการจอง มาแสดงในรูปแบบตาราง โดยมีการระบายสีในช่วงเวลาที่มีการจองไปแล้ว
** Author : Songchai Saetern
** Email: sunzandesign@gmail.com
** Blog : http://sunzandesign.blogspot.com
** Create : 2013-08-03
** Modify : 2016-07-13
**
** Rev History
**------------------------------------------------------------------------------
*/

    include('connect.mysql.php');

    //-- กำหนดช่องเวลา แบบตายตัว
    $timeArr = array("07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00",
                "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00"
                );

    //-- ตารางห้องประชุม
    //-- ส่วนที่ดึงมาจากฐานข้อมูล ในลูป while ซึ่งมีจำนวนห้องประชุมทั้งหมด 5 ห้อง
    $room = array();
    /*
    $room[] = array('id' => 1, 'name' => 'ห้องประชุม 1');
    $room[] = array('id' => 2, 'name' => 'ห้องประชุม 2');
    $room[] = array('id' => 3, 'name' => 'ห้องประชุม 3');
    $room[] = array('id' => 4, 'name' => 'ห้องประชุม 4');
    $room[] = array('id' => 5, 'name' => 'ห้องประชุม 5');
    */
    $sql = "SELECT * FROM tb_room";

    if ($result = $mysqli->query($sql)) {
        while($obj = $result->fetch_object()){
            $room[] = array('id'=>$obj->id, 'name' => $obj->name);
        }
    }
    $result->close();
    //print_r($room);
    //-- สิ้นสุดการจัดรูปแบบข้อมูลในลูป while
   
   
    //-- ตารางการจอง
    //-- ส่วนที่ดึงมาจากฐานข้อมูล ในลูป while
    //$array[{ไอดีห้องประชุม}][] = array('start_time' => '', 'end_time' => '', 'title' => '');
    $booking = array();
    /*
    $booking[1][] = array('start_time' => '09:00', 'end_time' => '12:00', 'title' => 'อบรม เทคโนโลยีสารสนเทศ และการสื่อสาร');
    $booking[1][] = array('start_time' => '13:35', 'end_time' => '15:20', 'title' => 'วาระที่ 1');
    $booking[2][] = array('start_time' => '11:45', 'end_time' => '16:10', 'title' => 'หัวข้อพิเศษเกี่ยวกับวิทยาการคอมพิวเตอร์');
    $booking[3][] = array('start_time' => '12:15', 'end_time' => '14:30', 'title' => 'สรุปโครงการ');
    $booking[4][] = array('start_time' => '15:00', 'end_time' => '17:00', 'title' => 'อบรม ระบบฐานข้อมูล');
    $booking[5][] = array('start_time' => '08:30', 'end_time' => '12:00', 'title' => 'จัดกิจกรรมสัมมนาวิชาการ');
    */
    $sql = "SELECT * FROM tb_booking"; //WHERE booking_date = 'date'

    if ($result = $mysqli->query($sql)) {
        while($obj = $result->fetch_object()){
            $booking[$obj->room_id][] = array('start_time' => $obj->start_time, 'end_time' => $obj->end_time, 'title' => $obj->title);
        }
    }
    //print_r($booking);
    //-- สิ้นสุดการจัดรูปแบบข้อมูลในลูป while
       
    /*
    ** คำนวณหาตำแหน่งซ้ายสุด และความกว้างที่จะแสดงในช่องเวลา
    ** ข้อกำหนดของการสร้างจำนวนคอลัมน์ เพื่อแสดงแถบเวลา
    ** 1 คอลัมน์ = ชั่วโมง, จะมีขนาดกว้าง 60px
    ** ต้องหาจุดเริ่มต้น css left
    ** ต้องหาความกว้าง css width
    ** เวลาเริ่มต้นคือ 7.00 ดังนั้นต้องลบ 7x60(420 ออกทุกครั้งที่หา left) * แต่เมื่อมีช่องก่อนหน้า ให้เพิ่มจำนวนที่ต้องลบออกมากขึ้น
    ** ความกว้าง ให้ใช้ค่า end_time - start_time
    */
    Class SetTimeObject
    {
        public $startPx;
        public $diff;
        public $leftMin = 0;
       
        public function getWidthPos($startTime, $endTime){
            $s = explode(":", $startTime);
            $this->startPx = ((int)$s[0] * 60) + (int)$s[1];
            list($sTime1, $sTime2) = explode(":", $startTime);
            list($eTime1, $eTime2) = explode(":", $endTime);
            $sTime = (float)$sTime1.".". ($sTime2*100)/60;
            $eTime = (float)$eTime1.".". ($eTime2*100)/60;
            $this->diff = ($eTime - $sTime);
            $l = ($this->startPx - 420) - $this->leftMin;
            $w = ($this->diff * 60);
            return array('left' => $l, 'width' => $w);
        }
    }
   
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>สอนเขียน PHP แสดงการจองห้องประชุมแบบไฮไลท์ตามช่วงเวลา  - www.sunzandesign.blogspot.com</title>
  <style type="text/css">
    #snaptarget {
        height: 50px;
        background: url("http://code.jquery.com/ui/1.10.3/themes/smoothness/images/ui-bg_highlight-soft_75_cccccc_1x100.png") repeat-x scroll 50% 50% #CCCCCC;
    }
    td.room{
        width : 100px;
        text-align : right;
        font-weight : bold;
        background: url("http://code.jquery.com/ui/1.10.3/themes/smoothness/images/ui-bg_highlight-soft_75_cccccc_1x100.png") repeat-x scroll 50% 50% #CCCCCC;
    }
    .td_time{ height : 20px; }
    .td_time div{
        float : left;
        width : 60px;
        border-right : 1px solid #1AEB00;
    }
    .draggable2{
        background: #C3FF7D;
        border: 1px solid #AAAAAA;
        color: #222222;
        float : left;
        height : 44px;
        line-height : 14px;
        padding : 2px;   
        cursor : pointer;
        overflow : hidden;
        text-align : center;
        font-weight : 100;
        position : relative;
    }
  </style>
</head>
<body>
<h1>สอนเขียน PHP แสดงการจองห้องประชุมแบบไฮไลท์ตามช่วงเวลา <br/> (แบบเชื่อมต่อฐานข้อมูล MySQL) </h1>

<?php

    $objTime = new SetTimeObject;
   
    echo '<table border="1" width="1095">';
    foreach($room as $row){
        echo '<tr>';
        echo '<td class="room">'.$row['name'].'</td>';
        echo '<td>
                <div class="td_time"><div>'. implode("</div><div>", $timeArr) .'</div><div style="clear:both"></div></div>
                <div id="snaptarget" class="ui-widget-header">';
        if(isset($booking[$row['id']])){
            $objTime->leftMin = 0;
            foreach($booking[$row['id']] as $bookData){
                $arr = $objTime->getWidthPos($bookData['start_time'], $bookData['end_time']);
                $left = $arr['left'];
                $width = $arr['width'];
                $objTime->leftMin += $arr['width'];
                echo '<div class="draggable2" style="left: '.$left.'px;width: '.$width.'px">
                      '. $bookData['title']. ' <br/>( '. $bookData['start_time'] .'-'.$bookData['end_time'] .')
                    </div>';
            }
        }
        echo '    </div>
            </td>';
        echo '</tr>';
    }
    echo ' </table>';

 ?>

<br style="clear: both;" />
<?php $mysqli->close();?>
</body>
</html>

แนะนำเพิ่มเติม

การดึงข้อมูลการจองห้องประชุมนั้น ถ้านำไปใช้งานจริงจะต้องระบุวันที่จองด้วย ซึ่งก็ต้องปรับปรุงโครงสร้าง tb_booking ให้มีฟิลด์สำหรับเก็บวันที่จอง และตอนแสดงผลก็ต้องเพิ่ม WHERE วันที่ที่ต้องการ

$sql = "SELECT * FROM tb_booking WHERE booking_date = '2016-07-13'";

สำหรับบทความที่เกี่ยวข้องกันนี้ดูได้จาก

Part 1 : ส่วนแสดงผล แบบระบายสีตามช่วงเวลา ระบบจองห้องประชุม  http://sunzandesign.blogspot.com/2013/08/php-labs-booking-room-with-mysql.html

Part 2 : ตัวอย่างการสร้างตารางเรียน ตารางสอน แบบไฮไลท์ช่วงเวลาที่กำหนด http://sunzandesign.blogspot.com/2014/09/php-mysql-course-timeline.html

ปล. วิธีการคำนวณระยะของช่องแสดงผลสีเขียว 

เพิ่มเติมส่วนของ Test ลงไปท้ายๆ
จะเห็นคำอธิบายในส่วนต่างๆนะครับ ^^

<?php

    //ใช้ทดสอบการคำนวณค่าว่าได้ตรงตามต้องการหรือไม่
    Class Test_SetTimeObject extends SetTimeObject
    {
        public static function TestGetWidthPos(){
            $startTime = "09:00";
            $endTime = "12:00";
           
            $obj = new SetTimeObject;
           
            $arr = $obj->getWidthPos($startTime, $endTime);
           
            echo "<hr><br><b>ทดสอบการคำนวณตำแหน่ง และความกว้าง</b>";
            echo "<br>เวลาที่ส่งไป $startTime, $endTime";
            echo "<br>ค่าที่จะต้องได้ออกมา left : 120, width : 180";
            echo "<br><font color='green'><b>ผลลัพธ์ที่ได้ left : $arr[left], width : $arr[width]</b></font>";
            echo "<br><br><b>ตรวจสอบค่าต่างๆ </b>";
            echo "<br>ตำแหน่งด้านซ้าย : 180 คำนวณจากสูตรได้ $obj->startPx ";
            echo "<br>ความกว้าง จำนวนช่อง x 60 : 3x60 = 180 คำนวณจากสูตรได้ <font color='green'><b>($obj->diff x 60) = $arr[width]</b></font>";
            echo "<br><br><hr>";
        }
    }

    Test_SetTimeObject::TestGetWidthPos();

?>

       "PHP ไม่ได้สร้างสุดยอดโปรแกรม 
                 แต่ PHP ช่วยให้งานคุณง่ายขึ้นต่างหาก"


PHP CI MANIA - PHP Code Generator 
โปรแกรมช่วยสร้างโค้ด ลดเวลาการเขียนโปรแกรม
สนใจสั่งซื้อเพียง 3,990 บาท
http://fastcoding.phpcodemania.com/








PHP CI MANIA - PHP Code Generator 
โปรแกรมช่วยสร้างโค้ด "ลดเวลาการเขียนโปรแกรม"
ราคาสุดคุ้มเพียง 3,990 บาท 
http://www.phpcodemania.com