ข้ามไปที่เนื้อหาหลัก

ส่วนแสดงผล แบบระบายสีตามช่วงเวลา ระบบจองห้องประชุม

สร้างตารางเรียน ตารางสอนด้วย PHP

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

วันนี้จึงมีบทความใหม่จะมานำเสนอ โดยที่ใช้บทความเดิมมาปรับแต่งให้เข้ากับระบบการจองห้องประชุม

โดยระบบนี้จะใช้ตารางเพียง 2 ตารางในการเก็บข้อมูลเท่านั้น และฐานข้อมูลที่เราจะใช้ในการเขียนโปรแกรมร่วมกับ PHP นั้นก็คือ MySQL เหมือนเช่นเคย







ตารางที่ 1 ห้องประุชุม
ตารางที่ 2 รายละเอียดการประชุม

ทั้งสองตารางนี้เป็นข้อมูลจากสมาชิกท่านหนึ่งที่ได้คอมเมนต์ไว้เมื่อหลายวันก่อน ไม่แน่ใจว่าบทความนี้จะทันเขียนเป็นตัวอย่างให้ได้ศึกษาหรือไม่ แต่จะอย่างไรก็ดี ก็คงจะมีบางท่านอาจจะกำลังศึกษาแนวทางการสร้างตารางแสดงข้อมูลการจองห้องประชุมแบบตัวอย่างนี้เช่นกัน






ซอร์สโค๊ดตัวอย่างชุดนี้ จะมีการสร้างคลาสไว้เรียกใช้ โดยก็ไม่ได้มีอะไรแตกต่างไปจาก การเรียกใช้ฟังก์ชั่นแบบเดิมแต่อย่างใด เพียงแต่ช่วงนี้กำลังฝึกเขียน PHP OOP อยู่ครับ การดีบักในฟังก์ชั่นถือเป็นอะไรที่เก่าไปแล้ว บางทีก็ลืมลบ ลบเกินบ้าง อ่านโค๊ดยากบ้าง (ส่วนตัวนะครับ) เลยลองเขียนเป็นคลาส แล้วสร้างคลาสเรียก Test โค๊ดของเมธอดที่เราจะเรียกใช้งานว่าถูกต้องตามที่ต้องการหรือไม่


โค๊ด PHP ในส่วนของหลักการสร้างช่องระบายสี ช่วงเวลาจองห้องประชุมครั้งนี้จะแตกต่างจาก สร้างตารางเรียน ตารางสอนด้วย PHP ที่เคยนำเสนอไป เพราะจะเปลี่ยนจากระบายสีลงช่อง TD ไปเป็นการสร้างแท็ก DIV แล้วกำหนดระยะ Left และความกว้าง Width ในส่วนของ CSS ซึ่งจะฝังลงไปในแท็ก Style ของอีเลเมนต์ DIV ตัวนั้นๆไปเลย

สำหรับสีถ้าอยากเปลี่ยนไปตามห้องประชุม หรือให้แต่ละช่องมีสีต่างกัน อันนี้ก็ใช้ HTML ธรรมดาๆ ในการจัดรูปแบบ หรือจะสร้างคลาส CSS สำหรับควบคุมก็ได้เช่น class="room1" ก็กำหนดเป็นสีหนึ่ง ถ้าเป็น room2 ก็เปลี่ยนเป็นอีกสี หรือจะตามไอดีของตารางฐานข้อมูลเลยก็ได้ครับ เราก็สร้างเผื่อไว้เยอะๆหน่อย

แต่ถ้าจะให้ง่ายๆ ก็ฝังใน แท็ก style="" เลยก็ดี

001.<?php
002./*------------------------------------------------------------------------------
003.** File : booking_room.php
004.** Description : การดึงข้อมูลการจอง มาแสดงในรูปแบบตาราง โดยมีการระบายสีในช่วงเวลาที่มีการจองไปแล้ว
005.** Author : Songchai Saetern
006.** Email: sunzandesign@gmail.com
007.** Homepage : www.sunzan-design.com
008.** Create : 2013-08-03
009.** Modify : 2013-08-03
010.**
011.** Rev History
012.**------------------------------------------------------------------------------
013.*/
014. 
015. 
016. 
017.//-- กำหนดช่องเวลา แบบตายตัว
018.$timeArr = array("07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00",
019."15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00"
020.);
021. 
022.//-- ตารางห้องประชุม
023.//-- ส่วนที่ดึงมาจากฐานข้อมูล ในลูป while ซึ่งมีจำนวนห้องประชุมทั้งหมด 5 ห้อง
024.$room = array();
025.$room[] = array('id' => 1, 'name' => 'ห้องประชุม 1');
026.$room[] = array('id' => 2, 'name' => 'ห้องประชุม 2');
027.$room[] = array('id' => 3, 'name' => 'ห้องประชุม 3');
028.$room[] = array('id' => 4, 'name' => 'ห้องประชุม 4');
029.$room[] = array('id' => 5, 'name' => 'ห้องประชุม 5');
030.//-- สิ้นสุดการจัดรูปแบบข้อมูลในลูป while
031. 
032. 
033.//-- ตารางการจอง
034.//-- ส่วนที่ดึงมาจากฐานข้อมูล ในลูป while
035.//$array[{ไอดีห้องประชุม}][] = array('start_time' => '', 'end_time' => '', 'title' => '');
036.$booking = array();
037.$booking[1][] = array('start_time' => '08:10', 'end_time' => '11:15', 'title' => 'อบรม เทคโนโลยีสารสนเทศ และการสื่อสาร');
038.$booking[1][] = array('start_time' => '13:35', 'end_time' => '15:20', 'title' => 'วาระที่ 1');
039.$booking[2][] = array('start_time' => '11:45', 'end_time' => '16:10', 'title' => 'หัวข้อพิเศษเกี่ยวกับวิทยาการคอมพิวเตอร์');
040.$booking[3][] = array('start_time' => '12:15', 'end_time' => '14:30', 'title' => 'สรุปโครงการ');
041.$booking[4][] = array('start_time' => '15:00', 'end_time' => '17:00', 'title' => 'อบรม ระบบฐานข้อมูล');
042.$booking[5][] = array('start_time' => '08:30', 'end_time' => '12:00', 'title' => 'จัดกิจกรรมสัมมนาวิชาการ');
043.//-- สิ้นสุดการจัดรูปแบบข้อมูลในลูป while
044. 
045./*
046.** คำนวณหาตำแหน่งซ้ายสุด และความกว้างที่จะแสดงในช่องเวลา
047.** ข้อกำหนดของการสร้างจำนวนคอลัมน์ เพื่อแสดงแถบเวลา
048.** 1 คอลัมน์ = ชั่วโมง, จะมีขนาดกว้าง 60px
049.** ต้องหาจุดเริ่มต้น css left
050.** ต้องหาความกว้าง css width
051.** เวลาเริ่มต้นคือ 7.00 ดังนั้นต้องลบ 7x60(420 ออกทุกครั้งที่หา left) * แต่เมื่อมีช่องก่อนหน้า ให้เพิ่มจำนวนที่ต้องลบออกมากขึ้น
052.** ความกว้าง ให้ใช้ค่า end_time - start_time
053.*/
054.Class SetTimeObject
055.{
056.public $startPx;
057.public $diff;
058.public $leftMin = 0;
059. 
060.public function getWidthPos($startTime, $endTime){
061.$s = explode(":", $startTime);
062.$this->startPx = ((int)$s[0] * 60) + (int)$s[1];
063. 
064.list($sTime1, $sTime2) = explode(":", $startTime);
065.list($eTime1, $eTime2) = explode(":", $endTime);
066.$sTime = (float)$sTime1.".". ($sTime2*100)/60;
067.$eTime = (float)$eTime1.".". ($eTime2*100)/60;
068. 
069.$this->diff = ($eTime - $sTime);
070.$l = ($this->startPx - 420) - $this->leftMin;
071.$w = ($this->diff * 60);
072.return array('left' => $l, 'width' => $w);
073.}
074.}
075. 
076.?>
077.<!doctype html>
078.<html lang="en">
079.<head>
080.<meta charset="utf-8" />
081.<title>ตารางแสดงช่วงเวลาการใช้ห้องประชุม - www.sunzan-design.com</title>
082.<style type="text/css">
083.#snaptarget {
084.height: 50px;
086.}
087.td.room{
088.width : 100px;
089.text-align : right;
090.font-weight : bold;
092.}
093..td_time{ height : 20px; }
094..td_time div{
095.float : left;
096.width : 60px;
097.border-right : 1px solid #1AEB00;
098.}
099..draggable2{
100.background: #C3FF7D;
101.border: 1px solid #AAAAAA;
102.color: #222222;
103.float : left;
104.height : 44px;
105.line-height : 14px;
106.padding : 2px; 
107.cursor : pointer;
108.overflow : hidden;
109.text-align : center;
110.font-weight : 100;
111.position : relative;
112.}
113.</style>
114.</head>
115.<body>
116.<?php
117. 
118.$objTime = new SetTimeObject;
119. 
120.echo '<table border="1" width="1095">';
121.foreach($room as $row){
122.echo '<tr>';
123.echo '<td class="room">'.$row['name'].'</td>';
124.echo '<td>
125.<div class="td_time"><div>'. implode("</div><div>", $timeArr) .'</div><div style="clear:both"></div></div>
126.<div id="snaptarget" class="ui-widget-header">';
127.if(isset($booking[$row['id']])){
128.$objTime->leftMin = 0;
129.foreach($booking[$row['id']] as $bookData){
130.$arr = $objTime->getWidthPos($bookData['start_time'], $bookData['end_time']);
131.$left = $arr['left'];
132.$width = $arr['width'];
133.$objTime->leftMin += $arr['width'];
134.$title = $bookData['title']. ' <br/>( '. $bookData['start_time'] .'-'.$bookData['end_time'] .')';
135.echo '<div class="draggable2" style="left: '.$left.'px;width: '.$width.'px" title="'.$title.'">'
136.. $title
137.. '</div>';
138.}
139.}
140.echo '  </div>
141.</td>';
142.echo '</tr>';
143.}
144.echo ' </table>';
145. 
146. 
147.//ใช้ทดสอบการคำนวณค่าว่าได้ตรงตามต้องการหรือไม่
148.Class Test_SetTimeObject extends SetTimeObject
149.{  
150.public static function TestGetWidthPos(){
151.$startTime = "08:10";
152.$endTime = "11:15";
153.$obj = new SetTimeObject;
154.$arr = $obj->getWidthPos($startTime, $endTime);
155.echo "<hr><br><b>ทดสอบการคำนวณตำแหน่ง และความกว้าง</b>";
156.echo "<br>เวลาที่ส่งไป  $startTime, $endTime";
157.echo "<br>ค่าที่จะต้องได้ออกมา left : 90, width : 120";
158.echo "<br><font color='green'><b>ผลลัพธ์ที่ได้ left : $arr[left], width : $arr[width]</b></font>";
159.echo "<br><br><b>ตรวจสอบค่าต่างๆ </b>";
160.echo "<br>ตำแหน่งด้านซ้าย : (8x60) + 10 = 490 คำนวณจากสูตรได้   $obj->startPx ";
161.echo "<br> ความกว้าง จำนวนช่อง x 60 : 2x60 = 120 คำนวณจากสูตรได้  <font color='green'><b>($obj->diff x 60) = $arr[width]</b></font>";
162.echo "<br><br><hr>";
163.}
164.}
165.Test_SetTimeObject::TestGetWidthPos();
166.?>
167. 
168.<br style="clear: both;" />
169.</body>
170.</html>


>> ดาวน์โหลดซอร์สโค๊ด
หากท่านต้องการซอร์สโค๊ดต้นฉบับสนับสนุนแอดมินได้หน้านี้ได้ที่นี่
>> สนับสนุนค่ากาแฟได้ที่นี่ครับ <<



สำหรับท่านที่ต้องการตัวอย่างการใช้งานกับฐานข้อมูล
ตัวอย่างการสร้างตารางเรียน ตารางสอน แบบไฮไลท์ช่วงเวลาที่กำหนด (PHP + MySQL)


@2014-05-16  ver 0.2
- แก้ไขให้มีความยืดหยุ่นกำหนดเวลาเริ่มต้นในตารางได้
- แก้ไขฟังก์ชั่นทดสอบโค๊ดให้กำหนดเวลาที่ต้องการทดสอบเองได้
- ความกว้างของตารางนับเป็นนาทีตามการเปรียบเทียบด้วย getDiffMin()
หมายเหตุ  ในเวอร์ชั่นนี้การแสดงผลยังคลาดเคลื่อน ที่ค่าที่คำนวณออกมาสามารถใช้อ้างอิงได้ รอเวอร์ชั่นหน้าจะอัพเดตให้ทำงานร่วมกับ jQuery เพื่อระบุตำแหน่งที่ต้องการแสดงผลให้แม่นยำขึ้น


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

PHP CI MANIA PHP Code Generator 
โปรแกรมช่วยสร้างโค้ด ลดเวลาการเขียนโปรแกรม

สนใจสั่งซื้อเพียง 3,990 บาท



PHP CI MANIA PHP Code Generator 

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

ความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

แจกฟรี!! ระบบต่างๆที่พัฒนาด้วย PHP สำหรับนำไปใช้ในงานต่างๆ

       สำหรับหลายท่านที่ขอโค้ดเข้ามาทาง Inbox ของเฟซบุ๊กแฟนเพจ หรือถามถึงระบบต่างๆหลังไมค์มานั้น ส่วนใหญ่ก็มีแจกอยู่แล้วในเว็บบอร์ด ThaiCreate.Com นะครับ และด้านล่างนี้ก็เป็นระบบต่างๆที่แจกให้นำไปลองใช้ลองศึกษากันครับ

สอนเขียน 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 `i...

การดึงข้อมูล MySQL มาแสดงในปฏิทิน Fullcalendar ด้วย PHP

หลักการทำงาน เรียกข้อมูลจากตาราง tb_event ด้วยฟังก์ชั่นของ MySQLi ข้อมูลจากฐานข้อมูลจะถูกวนลูปเก็บไว้ใน $data และจะถูกส่งไปที่ Fullcalendar ด้วยการแปลงข้อมูลจาก PHP ให้อยู่ในรูปแบบ JSON อาร์เรย์ด้วยฟังก์ชั่น json_encode() PHP Code <?php //Database $data = array(); $link = mysqli_connect("127.0.0.1", "tobedev", "1234", "tobedev_example"); mysqli_set_charset($link, 'utf8'); if (!$link) {     echo "Error: Unable to connect to MySQL." . PHP_EOL;     echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL;     echo "Debugging error: " . mysqli_connect_error() . PHP_EOL;     exit; } $query = "SELECT * FROM tb_event"; if ($result = $link->query($query)) {     /* fetch object array */     while ($obj = $result->fetch_object()) {        $data[] = array(                 ...