สร้างตารางเรียน ตารางสอนด้วย PHP
ตารางที่ 1 ห้องประุชุม
ซอร์สโค๊ดตัวอย่างชุดนี้ จะมีการสร้างคลาสไว้เรียกใช้ โดยก็ไม่ได้มีอะไรแตกต่างไปจาก การเรียกใช้ฟังก์ชั่นแบบเดิมแต่อย่างใด เพียงแต่ช่วงนี้กำลังฝึกเขียน PHP OOP อยู่ครับ การดีบักในฟังก์ชั่นถือเป็นอะไรที่เก่าไปแล้ว บางทีก็ลืมลบ ลบเกินบ้าง อ่านโค๊ดยากบ้าง (ส่วนตัวนะครับ) เลยลองเขียนเป็นคลาส แล้วสร้างคลาสเรียก Test โค๊ดของเมธอดที่เราจะเรียกใช้งานว่าถูกต้องตามที่ต้องการหรือไม่
โค๊ด PHP ในส่วนของหลักการสร้างช่องระบายสี ช่วงเวลาจองห้องประชุมครั้งนี้จะแตกต่างจาก สร้างตารางเรียน ตารางสอนด้วย PHP ที่เคยนำเสนอไป เพราะจะเปลี่ยนจากระบายสีลงช่อง TD ไปเป็นการสร้างแท็ก DIV แล้วกำหนดระยะ Left และความกว้าง Width ในส่วนของ CSS ซึ่งจะฝังลงไปในแท็ก Style ของอีเลเมนต์ DIV ตัวนั้นๆไปเลย
สำหรับสีถ้าอยากเปลี่ยนไปตามห้องประชุม หรือให้แต่ละช่องมีสีต่างกัน อันนี้ก็ใช้ HTML ธรรมดาๆ ในการจัดรูปแบบ หรือจะสร้างคลาส CSS สำหรับควบคุมก็ได้เช่น class="room1" ก็กำหนดเป็นสีหนึ่ง ถ้าเป็น room2 ก็เปลี่ยนเป็นอีกสี หรือจะตามไอดีของตารางฐานข้อมูลเลยก็ได้ครับ เราก็สร้างเผื่อไว้เยอะๆหน่อย
แต่ถ้าจะให้ง่ายๆ ก็ฝังใน แท็ก style="" เลยก็ดี
>> ดาวน์โหลดซอร์สโค๊ด
จากบทความที่ผ่านมา ได้เขียนไว้แบบไม่ได้ผูกเนื้อหาไว้ก่อนหน้า จึงทำให้การทำงานอาจจะข้ามไปมา คงจะเป็นภาระให้ท่านต้องทำการค้นหา และนำมาปรับใช้กันเอง
วันนี้จึงมีบทความใหม่จะมานำเสนอ โดยที่ใช้บทความเดิมมาปรับแต่งให้เข้ากับระบบการจองห้องประชุม
โดยระบบนี้จะใช้ตารางเพียง 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;
085.
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;
086.
}
087.
td.room{
088.
width : 100px;
089.
text-align : right;
090.
font-weight : bold;
091.
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;
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 + 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
โปรแกรมช่วยสร้างโค้ด "ลดเวลาการเขียนโปรแกรม"
ความคิดเห็น
แสดงความคิดเห็น