ทำไมถึงต้องเป็น CSS นั่นก็เพราะรูปแบบ CSS นั้นถูกนำมาใช้เพื่อเสริมการทำงานของ HTML ให้มีประสิทธิภาพมากยิ่งขึ้น โดยเน้นไปที่การจัดรูปแบบและโครงร่างของเอกสารเป็นหลัก ทำให้เราสามารถที่จะกำหนดรูปแบบเอกสารให้หลากหลายมากยิ่งขึ้น แก้ไขง่าย จัดการง่าย ควบคุมง่าย ตามสไตล์ของ CSS นั่นเอง
สำหรับการจัดรูปแบบปฏิทินในวันนี้เราจะมาตกแต่งใส่สีสันลงไปเพื่อเพิ่มความสวยงาม โดยมีส่วนที่ต้องตกแต่งอยู่ 5 ส่วนด้วยกัน คือ
- ส่วนหัวปฏิทิน
- ส่วนหัวสัปดาห์
- ส่วนที่แสดงเป็นวันอาทิตย์
- ส่วนที่แสดงเป็นวันเสาร์
- ส่วนแสดงวันที่ปัจจุบัน
เนื่องจากเราต้องจัดการกำหนดรูปแบบที่หลากหลายเช่นนี้ CSS จึงเหมาะกับการทำงานดังกล่าว เรามาลองเริ่มจัดรูปแบบปฏิทินกันเลยครับ
ก่อนอื่นก็ใช้ไฟล์เดิมที่ทำไว้ครั้งที่แล้วในเรื่อง PHP: มาสร้างปฏิทินกันเถอะ (ตอนที่ 1) มาเป็นต้นแบบและปรับปรุงให้เป็นดังนี้
ซอร์สโค้ดปฏิทิน (ตอนที่ 2)
<html>
<head>
<title>ปฏิทินเบื้องต้น</title>
<style>
.sunday{color: white;background-color:red;}
.saturday{color: white;background-color:#9900CC;}
.default{color: black;background-color:white;}
.today{color: blue;background-color:yellow;}
</style>
</head>
<body>
<?
$now = strtotime("now");
$month = date('n',$now);
$year = date('Y',$now);
$first = strtotime("$year-$month-1");
$first_day = date('w',$first);
$num_day = date('t',$now);
$today = date("Y-n-j");
$TH_Day = array("อา.","จ.","อ.","พ.","พฤ.","ศ.","ส.");
$TH_Month = array(1 => "มกราคม","กุมภาพันธ์","มีนาคม","เมษายน","พฤษภาคม","มิถุนายน",
"กรกฏาคม","สิงหาคม","กันยายน","ตุลาคม","พฤศจิกายน","ธันวาคม");
$TH_Year = $year+543;
$class = "default";
echo("<table border=1 cellspacing=0 bgcolor=#FFCC99>
<tr><th colspan=7>พุทธศักราช $TH_Year<p>$TH_Month[$month]</th></tr>
<tr bgcolor=#FFFACD><th>" . implode("</th><th>",$TH_Day) . "</th></tr>");
$start = 1 - $first_day;
$w = 1;
for($d = $start; ;$d++){
$class = "default";
$date = "$year-$month-$d";
if($w == 1){
$class = "sunday";
echo("<tr align=center class=$class>");
}else if($w == 7){
$class = "saturday";
}else{
$class = "default";
}
if($d < 1){
echo("<td class=$class> </td>");
}else if($d >= $num_day){
if($d == $num_day){
if($today == $date){
$class = "today";
}
echo("<td align=center class=$class>$d</td>");
}else{
if($w == 7){
$class = "saturday";
}else{
$class = "default";
}
echo("<td class=$class> </td>");
}
if($w == 7){
echo("</tr>");
break;
}
}else{
if($today == $date){
$class = "today";
}
echo("<td align=center class=$class>$d</td>");
}
if($w == 7){
echo("</tr>");
$w = 1;
}else{
$w++;
}
}
?>
</table>
</body>
</html>
อธิบายการทำงาน
สำหรับการทำงานของปฏิทินก็คล้ายแบบเดิมเพียงแต่เราได้เพิ่มส่วนที่ตกแต่งขึ้นมาเท่านั้น ผมจึงขออธิบายส่วนที่เพิ่มมาเท่านั้นนะครับ
ส่วนแรก เราต้องทำการประกาศรูปแบบของปฏิทินเราก่อนซึ่งใส่ไว้ในแท็ก <style>โดยไว้ภายในแท็ก <head> อีกทีหนึ่ง ดังตัวอย่าง
<head>
<title>ปฏิทินเบื้องต้น</title>
<style>
.sunday{color: white;background-color:red;}
.saturday{color: white;background-color:#9900CC;}
.default{color: black;background-color:white;}
.today{color: blue;background-color:yellow;}
</style>
</head>
ในส่วนนี้ผมได้กำหนดสีตัวอักษร และสีพื้นหลังของแต่ละส่วนคือ
วันอาทิตย์ ให้ตัวอักษรสีขาว พื้นหลังสีแดง
.sunday{color: white;background-color:red;}
วันเสาร์ ให้ตัวอักษรสีขาว พื้นหลังสีม่วง
.saturday{color: white;background-color:#9900CC;}
วันทั่วไป ให้ตัวอักษรสีดำ พื้นหลังสีขาว
.default{color: black;background-color:white;}
วันที่ปัจจุบัน ให้ตัวอักษรสีน้ำเงิน พื้นหลังสีเหลือง
.today{color: blue;background-color:yellow;}
เริ่มสร้างปฏิทินโดยกำหนดสร้างเป็นตารางปฏิทินใส่สีที่หัวปฏิทิน และที่หัวชื่อสัปดาห์ตามต้องการ
echo("<table border=1 cellspacing=0 bgcolor=#FFCC99>
<tr><th colspan=7>พุทธศักราช $TH_Year<p>$TH_Month[$month]</th></tr>
<tr bgcolor=#FFFACD><th>" . implode("</th><th>",$TH_Day) . "</th></tr>");
ต่อมาผมได้เพิ่มการทำงานส่วนหนึ่งขึ้นมาคือตัวแปรสำหรับเก็บค่าวันที่ปัจจุบัน เพื่อใช้ในการตรวจสอบในขั้นตอนต่อไป คือ
$today = date("Y-n-j");
แล้วเราจะรู้ได้อย่างไรว่าวันไหนเป็นวันที่ปัจจุบัน ก็เพราะโค้ดการทำปฏิทินของเราจะวิ่งไปเรื่อยๆตั้งแต่วันที่ 1 จนถึงสิ้นเดือนเราก็จะตรวจสอบจากตรงจุดนั้นว่าหากวันที่ที่สร้างปฏิทินวิ่งมาถึงตรงกับวันที่ปัจจุบันแล้วก็ดำเนินการดังกล่าวดังนี้
เก็บวันที่วิ่งทำปฏิทินไว้รอตรวจสอบ และเริ่มใช้ class = "default"
for($d = $start; ;$d++){
$class = "default";
$date = "$year-$month-$d";
ตรวจสอบว่าตรงกันกับวันที่ปัจจุบันหรือไม่ ถ้าใช่ก็ให้ดำเนินการต่อโดยใช้ class = "today"
if($today == $date){
$class = "today";
}
สำหรับวันอื่นๆก็ตรวจสอบดังนี้
ถ้าเป็นวันอาทิตย์ เลือกใช้ class = "sunday"
if($w == 1){
$class = "sunday";
echo("<tr align=center class=$class>");
ถ้าเป็นวันเสาร์ เลือกใช้ class = "saturday"
}else if($w == 7){
$class = "saturday";
ถ้าเป็นวันอื่นๆ เลือกใช้ class = "default"
}else{
$class = "default";
}
ในส่วนของการแสดงผลเป็นช่องว่างเราก็กำหนดให้ทำดังนี้
echo("<td class=$class> </td>");
และสำหรับการแสดงวันที่ก็กำหนดการแสดงผลไปดังนี้
echo("<td align=center class=$class>$d</td>");
เท่านี้เราก็จะได้ปฏิทินสวยๆงามๆตามต้องการและหากอยากได้เป็นสีอื่นๆ เรามีให้เลือกมากมาย ลองดูที่เว็บไซต์นี้ครับ ชอบสีไหนก็คัดลอกโค้ดรหัสสีนั้นมาเลย
เมื่อเราได้ปฏิทินที่มีความสวยงามกันแล้ว ในบทความต่อไปเราจะมาทำปฏิทินที่สามารถเลื่อนไปดูเดือนก่อนหน้า หรือเดือนถัดไปได้กัน แล้วพบกันใหม่นะครับ
PHP : มาสร้างปฏิทินกันเถอะ (ตอนที่ 3) สถานะ : กำลังเขียนบทความ ...
อยากให้สอนทำปฎิทินการนัดหมายให้หน่อยค่ะ
ReplyDelete