2010/11/04

[PHP] 課表程式分享

2010-11-04_115030.jpg
因為有需要做課表顯示的網頁,本想使用table寫
但是遇到連續的課程光算colspan跟rowspan後少掉的td就瘋掉了
所以改採div定位來顯示

資料結構
==========
我是使用一個三維陣列來裝課表的資料,以下是資料的結構
$div_class [ 教室名稱 ] [ 流水號 ] = array ( 上課時間 , 課程時數 , 其他詳細資料... )

通常上課時間會寫 08:00 ~ 10:00 這種型式
所以需要作資料分析轉成丟進陣列的資料,由於上課時間與課程時數是之後要決定課程div的位置與寬(長)度,所以我是將時間轉成pixel的量

舉例來說:
早上的課是在08:00開始,以此為0;09:00上課就可以轉成 60的數值;09:30 就是 90 (就是距離8點有幾分鐘的意思)。
課程時數也類推,算出開始與結束時間的差,這裡要介紹PHP的函數 strtotime(文字)
它會把文字分析後轉成timestamp的值,這樣可以很簡單就取得時間差(提醒:出來的結果是秒 要取得分鐘請除以60)

PHP生出HTML的程式碼
=============
因為資料式存在三維陣列內,所以PHP只需要兩個for迴圈就可以把資料全部抓出來,這裡我採用foreach() 來做(註:這邊是用樣板的寫法)。
<?php foreach($div_class as $room => $ary_info):?>
<div class='div_room' style=''>
    <div class='room_name' style=''><?php echo $教室名稱;?></div>
    <?php foreach($ary_info as $ary_seg):?>
        <div class='class_info' style='left:<?php echo $上課時間;?>px;
                                       width:<?php echo $上課時數;?>px;'>
            <?php echo $課程名稱;?>           
        </div>       
    <?php endforeach;?>
        <div style='clear:both'></div>
    </div>
    <div style='clear:both'></div>
<?php endforeach;?>

生出來的DIV關係圖會是這樣,#container就在最外層包起來就好
2010-11-04_113527.jpg
其中比較需要注意的是在 <div class='class_info'>中 style 屬性
由於這兩個屬性需要依據資料動態改變,所以改用CSS行內的寫法。
left 的值代表這個課程DIV會離左邊的教室名稱的距離,也就是課程開始的時間。
width 代表這個DIV要多寬(如果課表是直的,就改為height),代表課程上課的時數。

CSS
=====
事實上課表會自己整齊的排起來還是有賴一堆CSS,以下CSS CODE參考:

.div_room{
    border:1px solid gray;
    /*height:px;*/
    margin:0px 0px;
    padding:0px 0px;
}
.room_name{
    float:left;
    position:relative;  
    width:40px;
    height:px;
    color:white;
    text-align:center;
    line-height:px;      
    background:#006699;          
}
.class_info{
    padding:0 2px;
    text-align:center;
    white-space:nowrap;
    line-height:px;
    overflow:hidden;
    border-left:1px solid white;
    border-right:1px solid white;
    float:left;
    position:absolute;  
    height:px;
    background:#A5D6FF;
} 
我把課程高度定成一個變數,如果使用者嫌課表太矮可以調一個變數就好,要寫死也行。

大致上就這些,當初想這些想了一整天,沒想到整理後看來也沒甚麼 科科
2010-11-04_122536拷貝.jpg
這是另一版本的課表,時間軸是直的,另外有加上jQuery的 Tab UI來顯示星期

沒有留言:

張貼留言