[991]PHP網站開發 進階應用技巧2

1. 網頁多媒體

一、網頁MP3播放器

1.推薦的mp3播放器:http://www.alsacreations.fr/dewplayer-en
2.採Creative Commons 授權,在商業用途下也允許使用。
3.中文mp3要顯示中文歌曲,可用 convertZ 中的「ID3標籤」功能,將標籤轉為UTF-8即可正常呈現中文。
<object type="application/x-shockwave-flash" data="dewplayer.swf?mp3=歌曲.mp3" width="200" height="20" id="dewplayer">
<param name="wmode" value="transparent" />
<param name="movie" value="dewplayer.swf?mp3=歌曲.mp3" />
</object>

4.firefox用<object>即可,但IE需要<param>的設定。
5.若歌曲有很多首,請用dewplayer-multi.swf,歌曲可用 | 符號隔開,寬為240。
6.若希望不佔空間,可用dewplayer-mini.swf
7.若要大一點的可用dewplayer-bubble.swf,寬度為250,高度為60。
8.需要列表可用dewplayer-playlist.swf,高度200,請以xml=playlist.xml取代 mp3=歌曲.mp3,編輯清單請修改playlist.xml
9.欲呈現封面可用dewplayer-playlist-cover.swf,高度400,封面在xml中設定。
10.額外參數:自動開始:&autostart=1,自動重播:&autoreplay=1,顯示時間:showtime=1,隨機播放:randomplay=1

請下載 XAMPP Lite 伺服器整合包

二、最簡單易用的flv player影片播放器(http://www.osflv.com

1.player.swf、AC_RunActiveContent.js、rac.js要放在同一層
<?php
include_once "osflv_player/flash/flash.php";
flvheader();
flv("影片來源.flv", 480, 360, "0x0B7bA4", "0x333333");
?>

2.完整語法:
flv (string 影片 [, int 寬 [, int 高 [, string 前景色 [, string 背景色 [, boolean 自動播放 [, boolean 自動載入 [, boolean 自動回帶 [, int 音量 [, boolean 重複播放 [, boolean 靜音 [, boolean 僅靜音 [, string 連結網址 [, string 連結目標 ]]]]]]]]]]])
3.寬:不指定或設為-1會自動判斷影片寬度。高:同寬度,播放面板需要40px。
4.前景色:預設為0×13ABEC,即為#13ABEC
5.背景色:預設為0×051615.
6.自動播放:預設為false,設為true會自動開始播放。
7.自動載入:預設為false,設為true會自動進行影片載入,這樣可能會浪費頻寬。
8.自動回帶:預設為true,播完影片會回到影片最前面。
9.音量:預設為70,若「僅靜音」設為true,則此值無效。
10.重複播放:預設為false
11.靜音:是否一開始就靜音,預設為false
12.僅靜音:預設為false
13.連結網址:可設定點選影片連到某位址
14.連結目標:_blank會開到新視窗,_self會在本頁開啟。

三、影片來源

1.自攝,然後用winff或格式工廠(或其他轉檔工具)自行轉檔
2.firefox+「1-Click YouTube Video Downloader」附加元件從YouTube下載
3.firefox+「DownloadHelper」附加元件只要有網站的影片均可下載

[991]PHP網站開發 進階應用技巧2

2. Superfish下拉選單

一、Superfish 下拉選單(http://users.tpg.com.au/j_birch/plugins/superfish

支援IE6,有延遲出現功能,無限子選項,有淡出淡入特效,支援Tab鍵,可透過hoverIntent 外掛來設定滑鼠敏感度,可自訂是否要出現箭頭,具陰影功能,有導覽模式(雙層選單)。

<link rel="stylesheet" type="text/css" href="superfish-1.4.8/css/superfish.css" media="screen">
<script type="text/javascript" src="superfish-1.4.8/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="superfish-1.4.8/js/superfish.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('ul.sf-menu').superfish();
    });
</script>

二、第一層選單結構(<li><a href="網址">項目</a>{下層選單}</li>)


三、直式選單

1.加入:<link rel="stylesheet" type="text/css" media="screen" href="superfish-1.4.8/css/superfish-vertical.css" />
2.改為:$('ul.sf-menu sf-vertical').superfish();

四、子項目彈性寬度設定

1.加入:<script type="text/javascript" src="superfish-1.4.8/js/ supersubs.js"></script>
2.改為:$('ul.sf-menu').supersubs({minWidth: 8, maxWidth: 27, extraWidth: 1}).superfish();

五、導覽模式(不可和supersubs合用)

1.加入:<link rel="stylesheet" type="text/css" media="screen" href="superfish-1.4.8/css/superfish-navbar.css" />
2.改為:$('ul.sf-menu').superfish({pathClass:  'current'});
3.在要預設秀出的選項中加入 class="current",例如:<li class="current">XXX</li>

六、遞迴函數(用來取得所有階層項目)

function mk_menu($ofsn="0"){
    $sql="select sn,title,url from menu where ofsn='$ofsn'";
    $result=mysql_query($sql);
    $opt="";
    while(list($sn,$title,$url)=mysql_fetch_row($result)){
        $sub=mk_menu($sn);
        $opt.="<li><a href='$url'>$title</a>{$sub}</li>";
    }
    if(empty($opt)){
        $data="";
    }else{
        $class=(empty($ofsn))?"class='sf-menu'":"";
        $data="<ul $class>$opt</ul>";
    }
    return $data;
}

 

[991]PHP網站開發 進階應用技巧2

2-1 index.php(遞迴範例)

<?php
$root_pass="12345";    //資料庫root密碼
$db_name="test";  //資料庫名稱

/* 連資料庫檢查 */
$link=mysql_connect("localhost","root",$root_pass);  //資料庫連線
mysql_select_db("test");
mysql_query("SET NAMES 'utf8'");  //設定語系
error_reporting(0);


//選單第一層
function menu($ofsn="0"){
    $sql="select * from menu where ofsn='$ofsn' order by sn";
    $result=mysql_query($sql);
   
    $class=($ofsn=="0")?"class='sf-menu'":"";
    $opt="";
    while(list($sn,$ofsn,$title,$url)=mysql_fetch_row($result)){
        $subs=menu($sn);
       
        $href=($url=="")?"<a>":"<a href='$url'>";
       
        $opt.="<li>{$href}{$title}</a>$subs</li>";   
    }
   
    if($opt=="")return;
       
    $main="<ul $class>{$opt}</ul>";
    return $main;
}



?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel='stylesheet' type='text/css' media='screen' href='style.css' />
  <title>下拉選單</title>
  </head>
  <body>

    <link rel="stylesheet" type="text/css" href="superfish-1.4.8/css/superfish.css" media="screen">
    <link rel="stylesheet" type="text/css" media="screen" href="superfish-1.4.8/css/superfish-vertical.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="superfish-1.4.8/css/superfish-navbar.css" />
    <script type="text/javascript" src="superfish-1.4.8/js/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="superfish-1.4.8/js/superfish.js"></script>
    <script type="text/javascript" src="superfish-1.4.8/js/supersubs.js"></script>
   
    <script type="text/javascript">
        $(document).ready(function() {
            $('ul.sf-menu').supersubs({minWidth: 8, maxWidth: 27, extraWidth: 1}).superfish({pathClass:  'current'});
        });
    </script>
   
   
    <?php echo menu();?>
   
    <div style="clear:both;"></div>
    <h3>Superfish 下拉選單</h3>
    <ol>
        <li>官網:<a href="http://users.tpg.com.au/j_birch/plugins/superfish" target="_blank">http://users.tpg.com.au/j_birch/plugins/superfish</a></li>
        <li>支援IE6,有延遲出現功能(預設800毫秒),無限子選項,有淡出淡入特效</li>
        <li>支援Tab鍵,可透過hoverIntent 外掛來設定滑鼠敏感度。</li>
        <li>可自訂是否要出現箭頭,具陰影功能,有導覽模式(雙層選單)。</li>
        <li>phpMyAdmin:<a href="http://localhost/phpmyadmin" target="_blank">http://localhost/phpmyadmin</a></li>
    </ol>
   

  </body>
</html>
 

[991]PHP網站開發 進階應用技巧2

3. 連動選單

一、連動選單

1.http://www.codeassembly.com/Simple-chained-combobox-plugin-for-jQuery/
2.簡單易用,不限幾層,選項調整方便,適用在程式必須抓到每一欄(層)的值,而且欄位之間有一定關係。

二、基本引入檔

<script language="JavaScript" type="text/javascript" src="jquerychained/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jquerychained/jquery.chainedSelects.js"></script>

三、網頁部份(以三層為例)

<form  method="post" action="送出位址">
    <select id="car" name="car">
    <option value="">請選擇廠牌</option>
    <option value="福特">福特</option>
    <option value="日產">日產</option>
    </select>
    <select name="style" id="style" style="display:none"></select>
    <select name="color" id="color" style="display:none"></select>
</form>

四、JS部份(以三層為例)

<script language="JavaScript" type="text/javascript">
$(function(){
    $('#car').chainSelect('#style','jquerychained/combobox.php',{
        before:function (target){$(target).css("display","none");},
        after:function (target){$(target).css("display","inline");}
    });
    $('#style').chainSelect('#color','jquerychained/combobox.php',    {
        before:function (target) {$(target).css("display","none");},
        after:function (target) {$(target).css("display","inline");}
    });
});
</script>

五、combobox.php內容(子選項設定頁)

1.$_GET['_name'] 為下拉欄位的name。
2.$_GET['_value'] 為下拉欄位值。
3.json_encode()於PHP5.2以後才支援,若PHP較舊,可用json_encode.php中的自製json_encode()。

<?php
$array = array();
switch($_GET['_name']){
    case "car":
        if ($_GET['_value'] == '福特'){
            $array[] = array('' => '選擇型號');
            $array[] = array('Mondeo' => 'Mondeo');
            $array[] = array('Focus' => 'Focus');
        }elseif ($_GET['_value'] == '日產'){
            $array[] = array('' => '選擇型號',TIIDA' => 'TIIDA','TEANA' => 'TEANA');
        }else{
            $array[] = array('' => '尚未選擇廠牌');
        }
    break;

    case "style":
        if($_GET['_value'] == 'Mondeo'){
            $array[] = array('' => '選擇顏色');
            $array[] = array('鈦合金灰' => '鈦合金灰');
            /*.....略......*/
        }elseif($_GET['_value'] == 'Focus'){
            $array[] = array('' => '選擇顏色');
            $array[] = array('綠竹銀' => '綠竹銀');
            /*.....略......*/
        }else{
            $array[] = array('' => '尚未選擇車型');
        }
    break;
}
echo json_encode( $array );
?>

六、預設值寫法

1.第一層,直接在<option>中加上selected
2.第二層以後,在JS部份加上第三個參數defaultValue(before、after屬於一、二參數),並指定其值
3.接著在最後面加上change(),如:
$('#car').chainSelect('#style', 'combobox.php',{
  before:function (...){...},
  after:function (...){...},
  defaultValue: 'YARIS'
}).change();

七、關於 jquery.chainedSelects.js

1.若選項文字和值是相同的,可用 jquery.chainedSelects2.js
2.若選項文字和值可能不同,請用 jquery.chainedSelects.js

[991]PHP網站開發 進階應用技巧2

3-1 menu1.php

<?php

if ($_GET['_value'] == '福特'){

    $array[] = array('' => '選擇型號');

    $array[] = array('Mondeo' => 'Mondeo');

    $array[] = array('Focus' => 'Focus');

}elseif($_GET['_value'] == '日產'){

    $array[] = array('' => '選擇型號');

    $array[] = array('TIIDA' => 'TIIDA');

    $array[] = array('TEANA' => 'TEANA');    

}elseif($_GET['_value'] == '豐田'){

    $array[] = array('' => '選擇型號');

    $array[] = array('ALTIS' => 'ALTIS');

    $array[] = array('CAMRY' => 'CAMRY');

    $array[] = array('YARIS' => 'YARIS');            

}else{

    $array[] = array('' => '尚未選擇廠牌');

}

       

//include "json_encode.php";        

echo json_encode( $array );

?>

 

 

[991]PHP網站開發 進階應用技巧2

3-2 menu2.php

<?php
if ($_GET['_value'] == 'Mondeo'){
            $array[] = array('' => '選擇顏色');
            $array[] = array('鈦合金灰' => '鈦合金灰');
            $array[] = array('銀砂黑' => '銀砂黑');
            $array[] = array('新世紀銀' => '新世紀銀');
            $array[] = array('琉璃金' => '琉璃金');
}elseif($_GET['_value'] == 'Focus'){
            $array[] = array('' => '選擇顏色');
            $array[] = array('綠竹銀' => '綠竹銀');
            $array[] = array('極光銀' => '極光銀');
            $array[] = array('慓悍黑' => '慓悍黑');
            $array[] = array('炫風白' => '炫風白');
            $array[] = array('洗鍊灰' => '洗鍊灰');
            $array[] = array('古銅金' => '古銅金');
}elseif($_GET['_value'] == 'TIIDA'){
            $array[] = array('' => '選擇顏色');
            $array[] = array('珍珠白' => '珍珠白');
            $array[] = array('麥黃' => '麥黃');
            $array[] = array('銀灰' => '銀灰');
            $array[] = array('耀黑' => '耀黑');       

}elseif($_GET['_value'] == 'TEANA'){
            $array[] = array('' => '選擇顏色');
            $array[] = array('巡弋紫' => '巡弋紫');
            $array[] = array('灰色' => '灰色');
            $array[] = array('白色' => '白色');
            $array[] = array('銀色' => '銀色');
            $array[] = array('黑色' => '黑色');
}elseif($_GET['_value'] == 'ALTIS'){
            $array[] = array('' => '選擇顏色');
            $array[] = array('白' => '白');
            $array[] = array('銀' => '銀');
            $array[] = array('黑' => '黑');
            $array[] = array('紅' => '紅');
            $array[] = array('綠' => '綠');
}elseif($_GET['_value'] == 'CAMRY'){
            $array[] = array('' => '選擇顏色');
            $array[] = array('雪貂白' => '雪貂白');
            $array[] = array('尊貴金' => '尊貴金');
            $array[] = array('檀木黑' => '檀木黑');
            $array[] = array('醇酒紅' => '醇酒紅');
            $array[] = array('星河銀' => '星河銀');
            $array[] = array('碧璽綠' => '碧璽綠');
}elseif($_GET['_value'] == 'YARIS'){
            $array[] = array('' => '選擇顏色');
            $array[] = array('黑色' => '雪貂白');
            $array[] = array('白色' => '星河銀');
            $array[] = array('紅色' => '寶石藍');
            $array[] = array('藍色' => '炫彩橙');
            $array[] = array('藍色' => '瑪瑙紅');
            $array[] = array('藍色' => '星燦灰');
            $array[] = array('藍色' => '檀木黑');           
}else{
    $array[] = array('' => '尚未選擇型號');
}
       
       
echo json_encode( $array );
?>
 

[991]PHP網站開發 進階應用技巧2

3-3 menu1.php(索引與值都相同的精簡寫法)

<?php
if ($_GET['_value'] == '福特'){
    $array[] = array('選擇型號','Mondeo','Focus','aaa');
}elseif($_GET['_value'] == '日產'){
    $array[] = array('選擇型號','TIIDA','TEANA');
}elseif($_GET['_value'] == '豐田'){
    $array[] = array('選擇型號','ALTIS','CAMRY','YARIS');       
}else{
    $array[] = array('' => '尚未選擇廠牌');
}
       
echo json_encode( $array );
?>

注意!要使用jquery.chainedSelects2.js

<script language="JavaScript" type="text/javascript" src="jquerychained/jquery.chainedSelects2.js"></script>


 

[991]PHP網站開發 進階應用技巧2

3-4 demo/index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel='stylesheet' type='text/css' media='screen' href='style.css' />
<title>連動選單</title>
<script language="JavaScript" type="text/javascript" src="jquerychained/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jquerychained/jquery.chainedSelects2.js"></script>
<script language="JavaScript" type="text/javascript">
$(function(){

    $('#car').chainSelect('#style','jquerychained/combobox2.php',{
        before:function (target){
          $('#loading').css('display','block');
            $(target).css("display","none");
        },
        after:function (target){
          $('#loading').css('display','none');
            $(target).css("display","inline");
        },
        defaultValue: '<?php echo $_POST['style'];?>'
    }).change();

    $('#style').chainSelect('#color','jquerychained/combobox2.php',    {
        before:function (target){
          $('#loading').css('display','block');
            $(target).css("display","none");
        },
        after:function (target){
          $('#loading').css('display','none');
            $(target).css("display","inline");
        },
        defaultValue: '<?php echo $_POST['color'];?>'
    }).change();

    $('#color').chainSelect('#cc','jquerychained/combobox2.php',    {
        before:function (target){
          $('#loading').css('display','block');
            $(target).css("display","none");
        },
        after:function (target){
          $('#loading').css('display','none');
            $(target).css("display","inline");
        },
        defaultValue: '2000cc'
    }).change();
});
</script>
<style>
#loading
{
    position:absolute;
    top:0px;
    right:0px;
    background:#ff0000;
    color:#fff;
    font-size:14px;
    font-familly:Arial;
    padding:2px;
    display:none;
}
</style>
</head>
<body>

<div id="loading">載入中 ...</div>

<h3>連動選單範例</h3>
<?php
$select1=($_POST['car']=="福特")?"selected":"";
$select2=($_POST['car']=="日產")?"selected":"";
$select3=($_POST['car']=="豐田")?"selected":"";
?>
<form name="formname" method="post" action="index.php">
    <select id="car" name="car">
    <option value="">請選擇廠牌</option>
    <option value="福特" <?php echo $select1;?>>福特</option>
    <option value="日產" <?php echo $select2;?>>日產</option>
    <option value="豐田" <?php echo $select3;?>>豐田</option>
    </select>
    <select name="style" id="style" style="display:none"></select>
    <select name="color" id="color" style="display:none"></select>
    <select name="cc" id="cc" style="display:none"></select>
    <input type="submit" value="送出">
</form>
<?php
echo "<div>廠牌:{$_POST['car']}</div>";
echo "<div>車型:{$_POST['style']}</div>";
echo "<div>顏色:{$_POST['color']}</div>";
echo "<div>CC數:{$_POST['cc']}</div>";
?>
 

[991]PHP網站開發 進階應用技巧2

4. 表格內容排序

一、TinyTable V3官網

http://www.leigeber.com/2009/11/advanced-javascript-table-sorter/

二、基本結構

<link rel="stylesheet" href="tinytable/tinytable.css" />
<table id="my_table" class="tinytable">
    <thead>
      <tr>
        <th class="nosort"><h3>編號</h3></th>
        <th><h3>開課單位</h3></th>
        <th><h3>學程</h3></th>
      </tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>台南社大</td><td>資訊學程</td></tr>
        <tr><td>2</td><td>台南社大</td><td>美學學程</td></tr>
        <tr><td>3</td><td>台江校區</td><td>環境學程</td></tr>
    </tbody>
  </table>

三、必要元件

<div id="tablenav"><select id="pagedropdown"></select></div>
<span id="currentpage"></span>
<span id="totalpages"></span>
<select id="columns" onchange="sorter.search('query')"></select>
<input type="text" id="query" onkeyup="sorter.search('query')" />
<span id="startrecord"></span>
<span id="endrecord"></span>
<span id="totalrecords"></span>
<a href="javascript:sorter.reset()">重來</a>
頁面選單
目前頁數
所有頁數
搜尋欄位
搜尋欄位值輸入框
目前的起始資料
目前的結束資料
所有資料筆數
回到初始狀態

四、必要參數(請加在表格下方)

<script type="text/javascript" src="tinytable/script.js"></script>
<script type="text/javascript">
var sorter = new TINY.table.sorter('sorter','my_table',{
headclass:'head',
ascclass:'asc',
descclass:'desc',
evenclass:'evenrow',
oddclass:'oddrow',
evenselclass:'evenselected',
oddselclass:'oddselected',
paginate:true, size:10,
colddid:'columns',
currentid:'currentpage',
totalid:'totalpages',
startingrecid:'startrecord',
endingrecid:'endrecord',
totalrecid:'totalrecords',
hoverid:'selectedrow',
pageddid:'pagedropdown',
navid:'tablenav',
sortcolumn:0,
sortdir:1,
init:true
});
</script>

五、選用參數(可加在sortdir:1,之後)

sum:[4],
avg:[4,5],
columns:[{index:4, format:'$', decimals:0}],
加總
平均
顯示格式

六、選用元件

<img src="tinytable/images/first.gif"  alt="最前頁" onclick="sorter.move(-1,true)" />
<img src="tinytable/images/previous.gif"  alt="上一頁" onclick="sorter.move(-1)" />
<img src="tinytable/images/next.gif" alt="下一頁" onclick="sorter.move(1)" />
<img src="tinytable/images/last.gif" alt="最後頁" onclick="sorter.move(1,true)" />
<a href="javascript:sorter.showall()">顯示全部</a>
<select onchange="sorter.size(this.value)">
    <option value="5">5</option>
    <option value="10" selected="selected">10</option>
    <option value="20">20</option>
</select>
最前頁
上一頁
下一頁
最後頁
顯示全部
每頁秀出筆數選擇



 

[991]PHP網站開發 進階應用技巧2

4-1 index.php

<?php
$root_pass="12345";    //資料庫root密碼
$db_name="test";  //資料庫名稱

/* 連資料庫檢查 */
$link=mysql_connect("localhost","root",$root_pass);  //資料庫連線
mysql_select_db("test");
mysql_query("SET NAMES 'utf8'");  //設定語系
error_reporting(0);

$sql="select * from course";
$result=mysql_query($sql);
while(list($c0,$c1,$c2,$c3,$c4,$c5,$c6)=mysql_fetch_row($result)){
    $tbody.="<tr><td>$c0</td><td>$c1</td><td>$c2</td><td>$c3</td><td>$c4</td><td>$c5</td><td>$c6</td></tr>";
}


?>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  </head>
  <body>

    <link rel="stylesheet" href="tinytable/tinytable.css" />
    <table id="my_table" class="tinytable">
    <thead>
      <tr>
        <th style="width:60px"><h3>編號</h3></th>
        <th style="width:100px"><h3>開課單位</h3></th>
        <th style="width:100px"><h3>學程</h3></th>
        <th><h3>課程名稱</h3></th>
        <th style="width:60px"><h3>人數</h3></th>
        <th style="width:70px"><h3>學分數</h3></th>
        <th style="width:70px"><h3>星期幾</h3></th>
      </tr>
    </thead>
    <tbody>
        <?php echo $tbody;?>
    </tbody>
  </table>
  <div style="width:980px;margin:10px auto;">
        共 <span id="totalpages"></span> 頁
        <img src="tinytable/images/first.gif"  alt="最前頁" onclick="sorter.move(-1,true)" />
        <img src="tinytable/images/previous.gif"  alt="上一頁" onclick="sorter.move(-1)" />
        <span id="currentpage"></span>
        <img src="tinytable/images/next.gif" alt="下一頁" onclick="sorter.move(1)" />
        <img src="tinytable/images/last.gif" alt="最後頁" onclick="sorter.move(1,true)" />
        <select id="columns" onchange="sorter.search('query')" style="width:80px;"></select>
      <input type="text" id="query" onkeyup="sorter.search('query')" size=8 />
      共 <span id="totalrecords"></span> 筆資料,目前顯示第 <span id="startrecord"></span>~<span id="endrecord"></span> 筆資料
        <a href="javascript:sorter.reset()">重來</a>
       
        <a href="javascript:sorter.showall()">顯示全部</a>
       
        <select onchange="sorter.size(this.value)">
            <option value="5">5</option>
            <option value="10">10</option>
            <option value="15">15</option>
            <option value="20">20</option>
            <option value="50">50</option>
        </select>
  </div>

<div style="display:none;">
<div id="tablenav">切換到第 <select id="pagedropdown"></select> 頁</div>
</div>

<script type="text/javascript" src="tinytable/script.js"></script>
<script type="text/javascript">
var sorter = new TINY.table.sorter('sorter','my_table',{
headclass:'head',
ascclass:'asc',
descclass:'desc',
evenclass:'evenrow',
oddclass:'oddrow',
evenselclass:'evenselected',
oddselclass:'oddselected',
paginate:true, size:10,
colddid:'columns',
currentid:'currentpage',
totalid:'totalpages',
startingrecid:'startrecord',
endingrecid:'endrecord',
totalrecid:'totalrecords',
hoverid:'selectedrow',
pageddid:'pagedropdown',
navid:'tablenav',
sortcolumn:0,
sortdir:1,
sum:[4,5],
avg:[4,5,6],
columns:[{index:4,format:'人',decimals:0},{index:5,format:'節',decimals:0}],

init:true
});
</script>

  </body>
</html>
 

[991]PHP網站開發 進階應用技巧2

5. 拉動表格進行排序

一、官網

1.http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/

二、Js部份

<script type='text/javascript' src='jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='jquery.tablednd_0_5.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
    $('#tbl').tableDnD();
});
</script>


三、表單及表格部份

<form action='index.php' method='post'>
    <table id='tbl'>
        <tbody>
        <tr id='1'><td><input type='hidden' name='new_sort[1]'></td></tr>
        <tr id='2'><td><input type='hidden' name='new_sort[2]'></td></tr>
        <tr id='n'><td><input type='hidden' name='new_sort[n]'></td></tr>
        </tbody>
    </table>
    <input type='hidden' name='op' value='save_sort'>
    <input type='submit' value='儲存排序'>
</form>


四、儲存排序

if($_POST['op']=="save_sort"){
  $sort=1;
  foreach($_POST['new_sort'] as $sn => $v){
    $sql = "update 資料表 set `排序欄位` = '{$sort}' where 流水號='$sn'";
    mysql_query($sql);
    $sort++;
  }
}


五、移動列變色

<style>
  .myDragClass {  color: yellow;  background-color: black;}
</style>
$('#tbl').tableDnD({
    onDragClass:"myDragClass"
});


六、移動後秀出儲存按鈕

$('#tbl').tableDnD({
    onDragClass:"myDragClass" ,
    onDragStart: function(table) {
        $("#saveArea").html("<input type='hidden' name='op' value='save'><input type='submit' value='儲存'>");
    }
});
<div id="saveArea" style="text-align:center;"></div>
 

[991]PHP網站開發 進階應用技巧2

5-1 index.php

<?php
$root_pass="12345";    //資料庫root密碼
$db_name="test";  //資料庫名稱

/* 連資料庫檢查 */
$link=mysql_connect("localhost","root",$root_pass);  //資料庫連線
mysql_select_db("test");
mysql_query("SET NAMES 'utf8'");  //設定語系
error_reporting(0);


if($_POST['op']=="save_sort"){
    $sort=1;
    foreach($_POST['new_sort'] as $sn=>$v){
        $sql="update web set sort='$sort' where sn='$sn'";
        mysql_query($sql);   
        $sort++;
    }
}

$sql="select * from web order by sort";
$result=mysql_query($sql);
$main="";
while(list($sn,$title,$url,$sort)=mysql_fetch_row($result)){
    $main.="<tr><td>$sn</td><td>$title</td><td>$url</td><td>$sort
    <input type='hidden' name='new_sort[$sn]'></td></tr>";
}

?>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <link rel="stylesheet" href="tinytable.css" />
  </head>
  <body>
 
  <style>
      .aa{
            color: yellow;
            background-color: black;
        } 
  </style>
 
 
  <script type='text/javascript' src='jquery-1.4.2.min.js'></script>
    <script type='text/javascript' src='jquery.tablednd_0_5.js'></script>
    <script type='text/javascript'>
    $(document).ready(function(){
        $('#tbl').tableDnD({
                onDragClass: "aa" ,
                onDragStart:function(){
                    $("#saveArea").html("<input type='hidden' name='op' value='save_sort'><input type='submit' value='儲存'>");
                }
            });
    });
    </script>
 
  <form action="index.php" method="post">
  <table id="tbl" class="tinytable">
  <thead>
      <tr>
            <th><h3>編號</h3></th>
            <th><h3>網站名稱</h3></th>
            <th><h3>網址</h3></th>
            <th><h3>排序</h3></th>
        </tr>
  </thead>
 
  <tbody>
      <?php echo $main; ?>
  </tbody>
  </table>
 
  <div id="saveArea" align="center"></div>
  </form>
 
  </body>
</html>





 

[991]PHP網站開發 進階應用技巧2

5-2 checkbox.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  </head>
  <body>
    <script type='text/javascript' src='jquery-1.4.2.min.js'></script>

    <fieldset>
    <legend>第一組
    <input type="checkbox" id="aa" onClick="$('input:checkbox.c1').attr('checked',$('#aa').attr('checked'))">全選</legend>
        <input type="checkbox" name="pic[]" value="1" class="c1">選項 1
        <input type="checkbox" name="pic[]" value="2" class="c1">選項 2
        <input type="checkbox" name="pic[]" value="3" class="c1">選項 3
        <input type="checkbox" name="pic[]" value="4" class="c1">選項 4
        <input type="checkbox" name="pic[]" value="5" class="c1">選項 5
        <input type="checkbox" name="pic[]" value="6" class="c1">選項 6
        <input type="checkbox" name="pic[]" value="7" class="c1">選項 7
        <input type="checkbox" name="pic[]" value="8" class="c1">選項 8
        <input type="checkbox" name="pic[]" value="9" class="c1">選項 9
    </fieldset>
   
   
  </body>
</html>
 

[991]PHP網站開發 進階應用技巧2

6. 即時聊天系統

一、ajax im(http://old.ajaxim.com)

1.ajax im比較類似MSN,可針對好友僅行即時通訊。
2.將ajax_im_3.41_yui.zip解壓縮到目錄下,如 ajaxim
3.將 config-sample.php 複製一份並改名為 config.php,開啟該檔,設定資料庫。
4.用瀏覽器執行「http://網址/ajaxim/install.php」會自動建立資料庫。
5.接著,刪除install.php ,並執行「http://網址/ajaxim/」即可使用。

二、ajax chat(https://blueimp.net/ajax/)

1.ajax chat比較類似聊天室。相關文件:http://sourceforge.net/apps/mediawiki/ajax-chat/
2.將ajax_chat-0.8.3.zip解壓縮到目錄下,如 chat
3.將 lib/config.php.example 複製一份並改名為 config.php,開啟該檔設定資料庫。
4.用瀏覽器執行「http://網址/chat/install.php」會自動建立資料庫。
5.接著,刪除install.php ,並執行「http://網址/chat/」即可使用。

三、嵌入到網頁中

<script type="text/javascript">
    // <![CDATA[
        function openWindow(url,width,height,options,name) {
            width = width ? width : 800;
            height = height ? height : 600;
            options = options ? options : 'resizable=yes';
            name = name ? name : 'openWindow';
            window.open(
                url,
                name,
            'screenX='+(screen.width-width)/2+',screenY='+(screen.height-height)/2+',width='+width+',height='+height+','+options
            )
        }
    // ]]>
</script>


<a href="chat/" onclick="openWindow(this.href);this.blur();return false;">ajax Chat</a>
|
<a href="ajaxim/" onclick="openWindow(this.href);this.blur();return false;">ajax im</a>

四、ajax chat如何開房間...

1.開啟 lib/class/CustomAJAXChat.php 修改以下兩個函數:
(1) getChannels() 傳回目前使用者所在的房間。
            $this->_channels = array_merge($this->_channels, array('會客室'=>11, '貴賓室'=>22, 'VIP室'=>33));
        }
        return $this->_channels;
    }

(2) getAllChannels() 傳回目前所有可用的房間,不管目前使用者是否在該房間。
            $this->_allChannels = array_merge($this->_allChannels, array('會客室'=>11, '貴賓室'=>22, 'VIP室'=>33));
        }
        return $this->_allChannels;
    }

[991]PHP網站開發 進階應用技巧2

6-1 index.php

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  </head>
  <body>
 
  <script type="text/javascript">
    // <![CDATA[
        function openWindow(url,name,width,height,options) {
            width = width ? width : 800;
            height = height ? height : 600;
            options = options ? options : 'resizable=yes';
            name = name ? name : 'openWindow';
            window.open(
                url,
                name,
            'screenX='+(screen.width-width)/2+',screenY='+(screen.height-height)/2+',width='+width+',height='+height+','+options
            )
        }
    // ]]>
</script>

<a href="chat/" onclick="openWindow(this.href,'chat');this.blur();return false;">ajax Chat</a>
|
<a href="ajaxim/" onclick="openWindow(this.href,'chat2');this.blur();return false;">ajax im</a>

    <h3>一、ajax im(http://old.ajaxim.com)</h3>
    <ol>
    <li>ajax im比較類似MSN,可針對好友僅行即時通訊。</li>
    <li>將ajax_im_3.41_yui.zip解壓縮到目錄下,如 ajaxim</li>
    <li>將 config-sample.php 複製一份並改名為 config.php,開啟該檔,設定資料庫。</li>
    <li>用瀏覽器執行「http://網址/ajaxim/install.php」會自動建立資料庫。</li>
    <li>接著,刪除install.php ,並執行「http://網址/ajaxim/」即可使用。</li>
    </ol>
    <h3>二、ajax chat(https://blueimp.net/ajax/)</h3>
    <ol>
    <li>ajax chat比較類似聊天室。相關文件:http://sourceforge.net/apps/mediawiki/ajax-chat/</li>
    <li>將ajax_chat-0.8.3.zip解壓縮到目錄下,如 chat</li>
    <li>將 lib/config.php.example 複製一份並改名為 config.php,開啟該檔設定資料庫。</li>
    <li>用瀏覽器執行「http://網址/chat/install.php」會自動建立資料庫。</li>
    <li>接著,刪除install.php ,並執行「http://網址/chat/」即可使用。</li>
    </ol>

  </body>
</html>
 

[991]PHP網站開發 進階應用技巧2

7. PHP檔案操作(上)

一、讀取目錄內容

define("_UPLOAD_DIR","目錄的絕對路徑");
define("_UPLOAD_URL","目錄的網址");

if($dh = opendir(_UPLOAD_DIR)){
    while(($file = readdir($dh)) !== false){
        if($file==".")continue;
        $type=filetype(_UPLOAD_DIR."/".$file);
        if($type=="dir"){
            $dir_arr[]=$file;
        }else{
            $file_arr[]=$file;
        }
    }
    closedir($dh);
    //秀出內容
}




//開啟目錄
//用迴圈讀取目錄中的檔案或目錄
//遇到「.」則跳過
//取得檔案類型
//若為目錄($type=dir)
//加入目錄陣列
//否則($type=file)
//加入檔案陣列


//關閉目錄

二、秀出內容(並加入圖示)

1.把TodunVote1.0.zip解壓縮,並加入css檔。

$main="
<link rel='stylesheet' type='text/css' href='iconize_l.css' />
<link rel='stylesheet' type='text/css' href='tinytable.css' />
<table>
<tr><th>名稱</th><th>大小</th><th>類型< /th></tr>";
foreach($dir_arr as $sub_dir){
    $dirSize=formatBytes(dirSize(_UPLOAD_DIR."/".$sub_dir));
    $main.="<tr>
    <td><a href='index.php?to="._UPLOAD_DIR."/".$sub_dir."'>$sub_dir</a></td>
    <td align='right'>$dirSize</td>
    <td>目錄</td></tr>";
}
foreach($file_arr as $file){
    $filesize=formatBytes(filesize(_UPLOAD_DIR."/".$file));
    $main.="<tr>
    <td><a href='"._UPLOAD_URL."/".$file."'>$file</a></td>
    <td align='right'>$filesize</td>
    <td>檔案</td></tr>";
}
$main.="</table>";

//主內容變數
//引入圖示CSS
//引入表格CSS
//表格
//表格標題
//用迴圈讀出目錄名稱
//計算目錄大小
//產生一列
//顯示目錄名稱
//顯示目錄大小
//顯示目錄類型

//用迴圈讀出檔案名稱
//計算檔案大小
//產生一列
//顯示檔案名稱
//顯示檔案大小
//顯示檔案類型

三、切換目錄

$base_dir="D:/httpd/07/uploads";
$base_url="http://localhost/07/uploads";
if(!empty($_GET['to'])){
    $dir=$_GET['to'];
}else{
    $dir=$base_dir;
}
$dir=realpath($dir);
$dir=str_replace("\\","/",$dir);

define("_UPLOAD_DIR",$dir);
define("_UPLOAD_URL",str_replace($base_dir,$base_url,$dir));

//重新定義目錄的絕對路徑
//重新定義目錄的網址
//若有傳入 to 變數
//指定新目錄路徑
//否則
// 用預設路徑

//取得真實路徑
//把win的路徑改為 /

//把新路徑定義到目錄絕對路徑
//把新網址定 義到目錄網址

四、限制目錄範圍

$len=strlen($base_dir);
if(substr($dir,0,$len)!=$base_dir)
    die("「{$dir}」為不合法路徑");

//計算原有目錄絕對路徑長度
//看目前目錄之路徑前面是否和$base_dir相同
//若不同,則擋下。




 

[991]PHP網站開發 進階應用技巧2

7-1 index.php

<?php
if(!empty($_GET['to'])){
    define("_UPLOAD_DIR",$_GET['to']);
}else{
    define("_UPLOAD_DIR","D:/xampplite/htdocs/07/test/uploads");
}

define("_UPLOAD_URL","http://localhost/07/test/uploads");

$dh=opendir(_UPLOAD_DIR);

$main="<table class='tinytable'>
<tr><th>檔名</th><th>大小</th><th>類型</th></tr>";
while($file=readdir($dh)){
    if($file==".")continue;
    $type=filetype(_UPLOAD_DIR."/".$file);
   
    if($type=="dir"){
        $dir_arr[]=$file;   
    }else{
        $file_arr[]=$file;       
    }

}

//秀出目錄
foreach($dir_arr as $sub_dir){
    $size=($sub_dir=="..")?"":dirSize(_UPLOAD_DIR."/".$sub_dir);   
    $size=
($sub_dir=="..")?"":formatBytes($size,1); 
    $sub_dir=mb_convert_encoding($sub_dir, "UTF-8", "Big5,UTF-8");

    $main.= "<tr><td><a href='index.php?to="._UPLOAD_DIR."/".$sub_dir."'>$sub_dir</a></td><td>$size</td><td>目錄</td></tr>";
}

//秀出檔案
foreach(
$file_arr as $file){
    $size=filesize(_UPLOAD_DIR."/".$file);   
    $size=formatBytes($size,1);
    $file=mb_convert_encoding($file, "UTF-8", "Big5,UTF-8");

    $main.= "<tr><td><a href='"._UPLOAD_URL."/{$file}'>$file</a></td><td>$size</td><td>檔案</td></tr>";
}

$main.="</table>";
?>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <link rel="stylesheet" href="tinytable.css" />
  <link rel="stylesheet" href="iconize_l.css" />
  </head>
  <body>
    <?php echo $main;?>
  </body>
</html>

 


<?php
//計算目錄大小
function dirSize($directory) {
    $size = 0;
    foreach(new RecursiveIteratorIterator(new RecursiveDirectoryIterator($directory)) as $file){
        $size+=$file->getSize();
    }
    return $size;
}

//把 bytes 轉換成其他單位
function formatBytes($bytes, $precision = 2) {
    $units = array('B', 'KB', 'MB', 'GB', 'TB');

    $bytes = max($bytes, 0);
    $pow = floor(($bytes ? log($bytes) : 0) / log(1024));
    $pow = min($pow, count($units) - 1);

    $bytes /= pow(1024, $pow);

    return round($bytes, $precision) . ' ' . $units[$pow];
}

?>

[991]PHP網站開發 進階應用技巧2

7-2 iconize_l.css

a[href *="?to="] {
    padding: 5px 0px 5px 20px;
    background: transparent url(icons/folder.gif) no-repeat center left;
}
 

[991]PHP網站開發 進階應用技巧2

8. PHP檔案操作(下)

一、切換目錄並避免跨目錄攻擊

 

$base_dir="D:/httpd/08/uploads";
$base_url="http://localhost/08/uploads";
$dir=(empty($_GET['to']))?$base_dir:$_GET['to'];
$dir=str_replace("\\","/",realpath($dir));
if(!ereg("^".$base_dir,$dir))$dir=$base_dir;
$url=str_replace($base_dir,$base_url,$dir);
define("_UPLOAD_DIR",$dir);
define("_UPLOAD_URL",$url);
//定義基本目錄路徑
//定義目錄的網址
//若有傳入 to 變數則以新位置為主
//取得真實路徑,並把win的路徑改為 /
//若新位置開頭和$base_dir不同,則改回原位置
//製作新的目錄網址
//把新路徑定義到為基本目錄路徑
//把新網址定義到目錄網址

1.realpath("路徑")→轉換為真實路徑
2.ereg("規則","字串")→正規表達式比對
3.str_replace("找出","換為","字串")→字串替換

二、刪除檔案

<a href='index.php?file={$file}&to="._UPLOAD_DIR."&op=del'>刪除</a>
底下請放在$dh=opendir(_UPLOAD_DIR);之前
if($_GET['op']=="del"){
   $file=mb_convert_encoding($_GET['file'], "Big5", "Big5,UTF-8");
   @unlink(_UPLOAD_DIR."/{$file}");
   header("location:"._UPLOAD_DIR);
}

//加入刪除功能

//若有指定刪除動作
//先把檔名轉為系統編碼
//刪除檔案(隱藏錯誤)
//執行後轉向到原位置

1.mb_convert_encoding("字串","新的編碼","原始編碼")→轉換字串編碼
2.unlink("路徑")→刪除檔案

三、多檔刪除

請先在表格前後加上 <form action='index.php' method='post'> 表格 </form>


<input type='checkbox' name='files[]' value='{$file}'>


<tr><th colspan='4'>
將勾選的檔案 <input type='radio' name='op' value='del'>刪除
<input type='hidden' name='to' value='"._UPLOAD_DIR."'>
<input type='submit' value='送出'></th></tr>


//加入多選框


//表格下方加入一列
//勾選要進行之動作
//送出目前目錄
//送出按鈕

底下請放在原本刪除功能之後,記得將送出之參數將$_GET改為 $_REQUEST
foreach($_POST['files'] as $file){
    $file=mb_convert_encoding($file, "Big5", "Big5,UTF-8");
    @unlink(_UPLOAD_DIR."/{$file}");
}


//把要刪除檔案用迴圈讀出
//先把檔名轉為系統編碼
//刪除檔案

四、搬移檔案

在刪除後面加上搬移的選項,其中 folder_select() 為自訂函數,用來列出目錄選單:

<input type='radio' name='op' value='move'>
搬到:".folder_select($base_dir,"new_folder")."
//加入搬移選項
//列出目錄選單

將之加在 if($_GET['op']=="del") 之後

}elseif($_REQUEST['op']=="move"){
  foreach($_POST['files'] as $file){
    $file=mb_convert_encoding($file, "Big5", "Big5,UTF-8");
    @rename(_UPLOAD_DIR."/{$file}",$_POST['new_folder']."/{$file}");
  }
  header("location:"._UPLOAD_DIR);
}
//若有指定搬移動作
//把要搬移檔案讀出
//先把檔名轉為系統編碼
//搬移檔案(隱藏錯誤)

//執行後轉向到原位置

五、建立資料夾

在刪除前面面加上建立新目錄欄位

在此建立新目錄:<input type='text' name='mk_folder'><br> //加入建新目錄欄位

請自訂一組 }elseif(!empty($_POST['mk_folder'])){

$mk_folder=mb_convert_encoding($_POST['mk_folder'], "Big5", "Big5,UTF-8");
mk_dir(_UPLOAD_DIR."/{$mk_folder}");
//加入建新目錄欄位
//建立目錄


 

[991]PHP網站開發 進階應用技巧2

8-1 index.php

<?php
$base_dir="D:/xampplite/htdocs/08/test/uploads";
$base_url="http://localhost/08/test/uploads";

$dir=(empty($_REQUEST['to']))?$base_dir:str_replace("\\","/",realpath($_REQUEST['to']));
$dir=(ereg("^".$base_dir,$dir))?$dir:$base_dir;
$url=str_replace($base_dir,$base_url,$dir);
define("_UPLOAD_DIR",$dir);
define("_UPLOAD_URL",$url);

if($_GET['op']=="del"){
    $file=mb_convert_encoding($_GET['file'], "Big5", "Big5,UTF-8");
    @unlink(_UPLOAD_DIR."/".$file);
    header("location:"._UPLOAD_DIR);
}elseif($_POST['op']=="del"){
    foreach($_POST['files'] as $file){
        $file=mb_convert_encoding($file, "Big5", "Big5,UTF-8");
        @unlink(_UPLOAD_DIR."/".$file);   
    }
    header("location:"._UPLOAD_DIR);
}



$dh=opendir(_UPLOAD_DIR);

$main="
<form action='{$_SERVER['PHP_SELF']}' method='post'>
<table class='tinytable'>
<tr><td colspan=4>$dir</td></tr>
<tr><th>檔名</th><th>大小</th><th>類型</th><th>功能</th></tr>";

while($file=readdir($dh)){
    if($file==".")continue;
    $type=filetype(_UPLOAD_DIR."/".$file);

    if($type=="dir"){
        $dir_arr[]=$file;
    }else{
        $file_arr[]=$file;
    }
}

//秀出目錄
foreach($dir_arr as $sub_dir){
    $size=($sub_dir=="..")?"":dirSize(_UPLOAD_DIR."/".$sub_dir);
    $size=($sub_dir=="..")?"":formatBytes($size,1);
    $sub_dir=mb_convert_encoding($sub_dir, "UTF-8", "Big5,UTF-8");
    $main.= "<tr><td><a href='index.php?to="._UPLOAD_DIR."/".$sub_dir."'>$sub_dir</a></td><td>$size</td><td>目錄</td><td></td></tr>";
}

//秀出檔案
foreach($file_arr as $file){
    $size=filesize(_UPLOAD_DIR."/".$file);
    $size=formatBytes($size,1);
    $file=mb_convert_encoding($file, "UTF-8", "Big5,UTF-8");
    $main.= "<tr><td><a href='"._UPLOAD_URL."/{$file}'>$file</a></td><td>$size</td><td>檔案</td><td>
        <input type='checkbox' name='files[]' value='$file'>
        <a href='{$_SERVER['PHP_SELF']}?file=$file&op=del&to="._UPLOAD_DIR."'>刪除</a></td></tr>";
}
$main.="
<tr><th colspan=4>
<input type='hidden' name='to' value='"._UPLOAD_DIR."'>
將勾選的檔案 <input type='radio' name='op' value='del'>刪除
<input type='submit' value='送出'>
</th></tr>
</table>
</form>";
?>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <link rel="stylesheet" href="tinytable.css" />
  <link rel="stylesheet" href="iconize_l.css" />
  </head>
  <body>
    <?php echo $main;?>
  </body>
</html>




<?php
//計算目錄大小
function dirSize($directory) {
    $size = 0;
    foreach(new RecursiveIteratorIterator(new RecursiveDirectoryIterator($directory)) as $file){
        $size+=$file->getSize();
    }
    return $size;
}

//把 bytes 轉換成其他單位
function formatBytes($bytes, $precision = 2) {
    $units = array('B', 'KB', 'MB', 'GB', 'TB');

    $bytes = max($bytes, 0);
    $pow = floor(($bytes ? log($bytes) : 0) / log(1024));
    $pow = min($pow, count($units) - 1);

    $bytes /= pow(1024, $pow);

    return round($bytes, $precision) . ' ' . $units[$pow];
}

?>
 

[991]PHP網站開發 進階應用技巧2

8-2 index.php 中文目錄修正

<?php
$base_dir="D:/httpd/09/uploads";
$base_url="http://localhost/09/uploads";

$_REQUEST['to']=mb_convert_encoding($_REQUEST['to'], "Big5", "Big5,UTF-8");

$dir=(empty($_REQUEST['to']))?$base_dir:str_replace("\\","/",realpath($_REQUEST['to']));
$dir=(ereg("^".$base_dir,$dir))?$dir:$base_dir;
$url=str_replace($base_dir,$base_url,$dir);

define("_UPLOAD_DIR",$dir);
define("_UPLOAD_URL",$url);

if($_GET['op']=="del"){
    $file=mb_convert_encoding($_GET['file'], "Big5", "Big5,UTF-8");
    @unlink(_UPLOAD_DIR."/".$file);
    header("location:"._UPLOAD_DIR);
}elseif($_POST['op']=="del"){
        if(is_array($_POST['files'])){
        foreach($_POST['files'] as $file){
            $file=mb_convert_encoding($file, "Big5", "Big5,UTF-8");
            @unlink(_UPLOAD_DIR."/".$file);
        }
        header("location:"._UPLOAD_DIR);
    }
}elseif($_POST['op']=="move"){
        if(is_array($_POST['files'])){
        foreach($_POST['files'] as $file){
            $file=mb_convert_encoding($file, "Big5", "Big5,UTF-8");
            @rename(_UPLOAD_DIR."/".$file,$_POST['new_folder']."/".$file);
        }
        header("location:"._UPLOAD_DIR);
    }
}elseif(!empty($_POST['mk_folder'])){
        $mk_folder=mb_convert_encoding($_POST['mk_folder'], "Big5", "Big5,UTF-8");
      mk_dir(_UPLOAD_DIR."/{$mk_folder}");
    header("location:"._UPLOAD_DIR);
}elseif(!empty($_FILES['pic']['tmp_name'])){
  foreach($_FILES['pic']['tmp_name'] as $i => $tmpname){
        $up_pic=mb_convert_encoding($_FILES['pic']['name'][$i], "Big5", "Big5,UTF-8");
    move_uploaded_file($tmpname , _UPLOAD_DIR."/{$up_pic}");
  }
  header("location:"._UPLOAD_DIR);
}

$dh=opendir(_UPLOAD_DIR);


$show_dir=mb_convert_encoding($dir, "UTF-8", "Big5,UTF-8");


$main="
<script src='js/jquery-1.3.2.min.js' type='text/javascript'></script>
<script src='js/jquery.MultiFile.js' type='text/javascript'></script>
<form action='{$_SERVER['PHP_SELF']}' method='post'  enctype='multipart/form-data'>
<table class='tinytable'>
<tr><td colspan=4>$show_dir</td></tr>
<tr><th>檔名</th><th>大小</th><th>類型</th><th>功能</th></tr>";

while($file=readdir($dh)){
    if($file==".")continue;
    $type=filetype(_UPLOAD_DIR."/".$file);

    if($type=="dir"){
        $dir_arr[]=$file;
    }else{
        $file_arr[]=$file;
    }
}

//秀出目錄
if(is_array($dir_arr)){
    foreach($dir_arr as $sub_dir){
        $size=($sub_dir=="..")?"":dirSize(_UPLOAD_DIR."/".$sub_dir);
        $size=($sub_dir=="..")?"":formatBytes($size,1);
        $sub_dir=mb_convert_encoding($sub_dir, "UTF-8", "Big5,UTF-8");
        $to_url=urlencode(_UPLOAD_DIR."/".$sub_dir);
        $main.= "<tr><td><a href='index.php?to=$to_url'>$sub_dir</a></td><td>$size</td><td>目錄</td><td></td></tr>";
    }
}

//秀出檔案
if(is_array($file_arr)){
    foreach($file_arr as $file){
        $size=filesize(_UPLOAD_DIR."/".$file);
        $size=formatBytes($size,1);
        $file=mb_convert_encoding($file, "UTF-8", "Big5,UTF-8");
        $main.= "<tr><td><a href='"._UPLOAD_URL."/{$file}'>$file</a></td><td>$size</td><td>檔案</td><td>
            <input type='checkbox' name='files[]' value='$file'>
            <a href='{$_SERVER['PHP_SELF']}?file=$file&op=del& to="._UPLOAD_DIR."'>刪除</a></td></tr>";
    }
}



$to_dir=mb_convert_encoding(_UPLOAD_DIR, "UTF-8", "Big5,UTF-8");

$main.="
<tr><th colspan=4>
<input type='hidden' name='to' value='$to_dir'>
將勾選的檔案 <input type='radio' name='op' value='del'>刪除
<input type='radio' name='op' value='move'>搬到:".folder_select($base_dir,"new_folder")."<br>
建立新目錄:<input type='text' name='mk_folder'><br>
上傳檔案:<input type='file' name='pic[]' class='multi' />
<input type='submit' value='送出'>
</th></tr>
</table>
</form>";
?>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <link rel="stylesheet" href="tinytable.css" />
  <link rel="stylesheet" href="iconize_l.css" />
  </head>
  <body>
    <?php echo $main;?>
  </body>
</html>




<?php
//計算目錄大小
function dirSize($directory) {
    $size = 0;
    foreach(new RecursiveIteratorIterator(new RecursiveDirectoryIterator($directory)) as $file){
        $size+=$file->getSize();
    }
    return $size;
}

//把 bytes 轉換成其他單位
function formatBytes($bytes, $precision = 2) {
    $units = array('B', 'KB', 'MB', 'GB', 'TB');

    $bytes = max($bytes, 0);
    $pow = floor(($bytes ? log($bytes) : 0) / log(1024));
    $pow = min($pow, count($units) - 1);

    $bytes /= pow(1024, $pow);

    return round($bytes, $precision) . ' ' . $units[$pow];
}

//目錄選單
function folder_select($base_dir="",$name="",$i=0){
  $prefix=str_repeat("--",$i);
  $i++;
  $option="";
  $dh=opendir($base_dir);
  while($file=readdir($dh)){
    if($file=="." or $file=="..")continue;
    $type=filetype($base_dir."/".$file);
    if($type=="dir"){
        $option.="<option value='{$base_dir}/{$file}'>{$prefix}{$file}</option>";
        $option.=folder_select("{$base_dir}/{$file}",$name,$i);
    }
    }
    if($i==1){
        $main="<select name='$name'>
        $option
        </select>";
    }else{
    $main=$option;
    }
    return $main;
}


//建立目錄
function mk_dir($dir=""){
    //若無目錄名稱秀出警告訊息
    if(empty($dir))die("沒有目錄名稱");
    //若目錄不存在的話建立目錄
    if (!is_dir($dir)) {
        umask(000);
        //若建立失敗秀出警告訊息
        if(!mkdir($dir, 0777)){
            die("$dir 建立失敗!");
        }
    }
}
?>

[991]PHP網站開發 進階應用技巧2

9. 相片EXIF資訊及上傳

一、上傳檔案
1.完整教學請參考上學期的第10單元
<script src='jquery-1.3.2.min.js' type='text/javascript'></script>
<script src='jquery.MultiFile.js' type='text/javascript'></script>
<form  enctype='multipart/form-data'>
<input type='file' name='pic[]' class='multi' />
</form>


二、接收檔案
if(!empty($_FILES['pic']['tmp_name'])){
  foreach($_FILES['pic']['tmp_name'] as $i => $tmpname){
    move_uploaded_file($tmpname , _UPLOAD_DIR."/{$_FILES['pic']['name'][$i]}");
  }
}


三、內嵌框架iframe用法
<iframe name='show' ></iframe>


四、連結目標放到iframe中的用法
<a href='連結' target='show' >連結文字</a>


五、讀取EXIF
1.凡是jpg或tiff圖檔都有所謂的exif資訊,利用此資訊,可得到圖片許多的資料。
2.PHP有讀取EXIF的功能,Linux下的PHP編譯時要加入--enable-exif ,在windows中把php.ini中 extension=php_exif.dll  前面的註解「;」拿掉即可。
3.exif_read_data(檔案 [, 片段 [, 陣列呈現 [, 縮圖 ]]] )
<?php
$exif = exif_read_data('圖片.jpg',0,true);
foreach($exif  as $k=>$v) {
    if(is_array($v)){
        foreach($v  as $kk=>$vv) {
            $sub_v.="<div><b>$kk</b> => $vv</div>";
        }
        $v=$sub_v;
    }
    $main.="<div><hr><b>$k</b> <hr> $v</div>";
}
echo $main;
?>


六、讀取exif縮圖
$image = exif_thumbnail("圖檔");
if ($image!==false) {
    header('Content-type: image/jpeg');
    echo $image;
    exit;
}

 

cl_57.png

[991]PHP網站開發 進階應用技巧2

9-1 index.php

<?php
//基本路徑
$base_dir="D:/xampplite/htdocs/09/test/uploads";
//基本網址
$base_url="http://localhost/09/test/uploads";

//檢查是否要切換路徑
$dir=(empty($_REQUEST['to']))?$base_dir:str_replace("\\","/",realpath($_REQUEST['to']));
//檢查目前路徑是否在基本路徑之下
$dir=(ereg("^".$base_dir,$dir))?$dir:$base_dir;
//製作切換網址
$url=str_replace($base_dir,$base_url,$dir);
//把切換路徑定義到常數
define("_UPLOAD_DIR",$dir);
//把切換網址定義到常數
define("_UPLOAD_URL",$url);


/************** 判斷目前要進行的動作 **************/

//刪除單一檔案
if($_GET['op']=="del"){
    $file=$_GET['file'];
    @unlink(_UPLOAD_DIR."/".$file);
    header("location:"._UPLOAD_DIR);
//刪除多檔案   
}elseif($_POST['op']=="del"){
    if(is_array($_POST['files'])){
    foreach($_POST['files'] as $file){
        @unlink(_UPLOAD_DIR."/".$file);
    }
    header("location:"._UPLOAD_DIR);
    }   
//搬移多檔案   
}elseif($_POST['op']=="move"){
    if(is_array($_POST['files'])){
    foreach($_POST['files'] as $file){
        @rename(_UPLOAD_DIR."/".$file,$_POST['new_dir']."/".$file);
    }
    header("location:"._UPLOAD_DIR);
  } 
}elseif(!empty($_POST['mk_dir'])){
    mk_dir(_UPLOAD_DIR."/".$_POST['mk_dir']);
  header("location:"._UPLOAD_DIR);
}
elseif(!empty($_FILES['pic']['tmp_name'])){
  foreach($_FILES['pic']['tmp_name'] as $i => $tmpname){
    move_uploaded_file($tmpname , _UPLOAD_DIR."/{$_FILES['pic']['name'][$i]}");
  }
}



//開啟目錄
$dh=opendir(_UPLOAD_DIR);

$main="
<script src='js/jquery-1.3.2.min.js' type='text/javascript'></script>
<script src='js/jquery.MultiFile.js' type='text/javascript'></script>


<form action='{$_SERVER['PHP_SELF']}' method='post' enctype='multipart/form-data'>
<table style='width:1000px;' class='tinytable'>
<tr><td style='width:400px;'>


<div style='height:400px;overflow:auto;'>
    <table class='tinytable' style='width:100%;'>
    <tr><td colspan=4>$dir</td></tr>
    <tr><th>檔名</th><th>大小</th><th>類型</th><th>功能</th></tr>";
   
    //讀取目錄
    while($file=readdir($dh)){
        if($file==".")continue;
       
        //檢查得到的檔案其類型
        $type=filetype(_UPLOAD_DIR."/".$file);
           
            //依據類型放到不同目錄中
        if($type=="dir"){
            $dir_arr[]=$file;
        }else{
            $file_arr[]=$file;
        }
    }
   
    //秀出目錄
    if(is_array($dir_arr)){
        foreach($dir_arr as $sub_dir){
            $size=($sub_dir=="..")?"":dirSize(_UPLOAD_DIR."/".$sub_dir);
            $size=($sub_dir=="..")?"":formatBytes($size,1);
            $main.= "<tr><td><a href='index.php?to="._UPLOAD_DIR."/".$sub_dir."'>$sub_dir</a></td><td>$size</td><td>目錄</td><td></td></tr>";
        }
    }
   
    //秀出檔案
    if(is_array($file_arr)){
        foreach($file_arr as $file){
            $size=filesize(_UPLOAD_DIR."/".$file);
            $size=formatBytes($size,1);
            $main.= "<tr><td><a href='"._UPLOAD_URL."/{$file}'  target='show'>$file</a></td><td>$size</td><td>檔案</td><td>
                <input type='checkbox' name='files[]' value='$file'>
                <a href='{$_SERVER['PHP_SELF']}?file=$file&op=del& to="._UPLOAD_DIR."'>刪除</a></td></tr>";
        }
    }
    $main.="
    </table>
</div>


</td><td><iframe name='show' style='width:100%;height:400px;border:1px solid gray;'></iframe></td></tr>

<tr><th colspan=2>

<input type='hidden' name='to' value='"._UPLOAD_DIR."'>
    將勾選的檔案 <input type='radio' name='op' value='del'>刪除
    <input type='radio' name='op' value='move'>搬移到:".folder_select($base_dir,"new_dir")."
    建立新目錄:<input type='text' name='mk_dir'><br>
    ,上傳檔案:<input type='file' name='pic[]' class='multi' />
    <input type='submit' value='送出'>

</th></tr>

</table>


</form>";
?>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=Big5">
  <title></title>
  <link rel="stylesheet" href="tinytable.css" />
  <link rel="stylesheet" href="iconize_l.css" />
  </head>
  <body>
    <?php echo $main;?>
  </body>
</html>




<?php
//計算目錄大小
function dirSize($directory) {
    $size = 0;
    foreach(new RecursiveIteratorIterator(new RecursiveDirectoryIterator($directory)) as $file){
        $size+=$file->getSize();
    }
    return $size;
}

//把 bytes 轉換成其他單位
function formatBytes($bytes, $precision = 2) {
    $units = array('B', 'KB', 'MB', 'GB', 'TB');

    $bytes = max($bytes, 0);
    $pow = floor(($bytes ? log($bytes) : 0) / log(1024));
    $pow = min($pow, count($units) - 1);

    $bytes /= pow(1024, $pow);

    return round($bytes, $precision) . ' ' . $units[$pow];
}


//目錄選單
function folder_select($base_dir="",$name="",$i=0){
  $prefix=str_repeat("--",$i);
  $i++;
  $disabled=(_UPLOAD_DIR==$base_dir)?"disabled":"";
  $option=($i==1)?"<option value='{$base_dir}/' $disabled>/</option>\n":"";
  $dh=opendir($base_dir);
  while($file=readdir($dh)){
    if($file=="." or $file=="..")continue;
    $type=filetype($base_dir."/".$file);
    if($type=="dir"){
            $disabled=(_UPLOAD_DIR=="{$base_dir}/{$file}")?"disabled":"";
        $option.="<option value='{$base_dir}/{$file}' $disabled>{$prefix}{$file}</option>\n";
        $option.=folder_select("{$base_dir}/{$file}",$name,$i);
    }
    }
    if($i==1){
        $main="<select name='$name'>
        $option
        </select>";
    }else{
    $main=$option;
    }
    return $main;
}


//建立目錄
function mk_dir($dir=""){
    //若無目錄名稱秀出警告訊息
    if(empty($dir))die("沒有目錄名稱");
    //若目錄不存在的話建立目錄
    if (!is_dir($dir)) {
        umask(000);
        //若建立失敗秀出警告訊息
        if(!mkdir($dir, 0777)){
            die("$dir 建立失敗!");
        }
    }
}
?>
 

[991]PHP網站開發 進階應用技巧2

10. 目錄管理及相片特效

一、目錄複製

$dirname=basename(_UPLOAD_DIR);
full_copy( _UPLOAD_DIR, $_POST['new_cp_dir']."/{$dirname}_copy" );
header("location:index.php?to=".$_POST['new_cp_dir']);

1.basename("路徑"[,"字尾"])→抓取路徑最後的那一層目錄或檔案
2.full_copy("原路徑","新路徑")→此為自訂函數,用來複製整個目錄


二、目錄搬移

$dirname=basename(_UPLOAD_DIR);
rename( _UPLOAD_DIR, $_POST['new_cp_dir']."/{$dirname}" );
header("location:index.php?to=".$_POST['new_cp_dir']);


三、目錄刪除

$dirname=dirname(_UPLOAD_DIR);
delTree(_UPLOAD_DIR);
header("location:index.php?to={$dirname}");

1.dirname("路徑")→抓取路徑最後的那一層目錄或檔案的所屬路徑
2.delTree("路徑")→此為自訂函數,用來刪除整個目錄


四、讀取EXIF

<?php
$exif = exif_read_data($_GET['file'],0,true);
include "exif_tag.php";

$main="
<table>";
foreach($exif_tag  as $k=>$v) {
    $main.="<tr><th>$k</th><td>$v</td></tr>";
}
$main.="</table>";
echo $main;
?>

1.$_GET['file']必須是完整路徑,exif_read_data()傳回值請存為$exif
2.exif_tag.php(可直接使用)必須在有$exif之後才能引入,否則會讀不到值。

五、加入播放特效(http://workshop.rs/projects/coin-slider/)

<script src='js/jquery-1.3.2.min.js' type='text/javascript'></script>
<script type='text/javascript' src='js/coin-slider/coin-slider.min.js'></script>
<link rel='stylesheet' href='js/coin-slider/coin-slider-styles.css' type='text/css' />


<div id='coin-slider'>
<?php
$dh=opendir($_GET['dir']);
while($file=readdir($dh)){
    $type=substr(strtolower($file),-3);
    if($type=="jpg" or $type=="png" or $type=="gif"){
    echo "<a href='{$_GET['url']}/{$file}'><img src='{$_GET['url']}/{$file}' ><span>$file</span></a>";
    }
}
?>
</div>


<script type="text/javascript">
    $(document).ready(function() {
        $('#coin-slider').coinslider({ width: 540, height: 360, navigation: true, delay: 5000 });
    });
</script>


 


width: 565, // 寬度
height: 290, //高度
spw: 7, // 方塊的寬
sph: 5, // 方塊的高
delay: 3000, //圖間切換時間
sDelay: 30, //方塊特效時間
opacity: 0.7, //標題透明度
titleSpeed: 500, //標題出現速度
effect: '', //圖片效果:random, swirl, rain, straight
navigation: true, //出現切換按鈕
links : true, //以圖片作為連結位址
hoverPause: true //滑鼠懸停

[991]PHP網站開發 進階應用技巧2

10-1 index.php

<?php
//基本路徑
$base_dir="D:/xampplite/htdocs/10/test/uploads";

//基本網址
$base_url="http://localhost/10/test/uploads";


//檢查是否要切換路徑
$dir=(empty($_REQUEST['to']))?$base_dir:str_replace("\\","/",realpath($_REQUEST['to']));
//檢查目前路徑是否在基本路徑之下
$dir=(ereg("^".$base_dir,$dir))?$dir:$base_dir;
//製作切換網址
$url=str_replace($base_dir,$base_url,$dir);
//把切換路徑定義到常數
define("_UPLOAD_DIR",$dir);
//把切換網址定義到常數
define("_UPLOAD_URL",$url);


/************** 判斷目前要進行的動作 **************/

//刪除單一檔案
if($_GET['op']=="del"){
    $file=$_GET['file'];
    @unlink(_UPLOAD_DIR."/".$file);
    header("location:"._UPLOAD_DIR);
//刪除多檔案
}elseif($_POST['op']=="del"){
    if(is_array($_POST['files'])){
    foreach($_POST['files'] as $file){
        @unlink(_UPLOAD_DIR."/".$file);
    }
    header("location:"._UPLOAD_DIR);
    }
//搬移多檔案
}elseif($_POST['op']=="move"){
    if(is_array($_POST['files'])){
    foreach($_POST['files'] as $file){
        @rename(_UPLOAD_DIR."/".$file,$_POST['new_dir']."/".$file);
    }
    header("location:"._UPLOAD_DIR);
  }


//搬移目錄
}elseif($_POST['op']=="move_dir"){
    $dirname=basename(_UPLOAD_DIR); 
  rename(_UPLOAD_DIR,$_POST['new_dir2']."/{$dirname}");
  header("location:index.php?to=".$_POST['new_dir2']);

//刪除目錄
}elseif($_GET['op']=="del_dir"){
     $dirname=dirname(_UPLOAD_DIR);
  deltree(_UPLOAD_DIR);
  header("location:index.php?to=".$dirname);


//複製目錄
}elseif($_POST['op']=="copy_dir"){
    $dirname=basename(_UPLOAD_DIR); 
  full_copy(_UPLOAD_DIR,$_POST['new_dir2']."/{$dirname}_copy");
  header("location:index.php?to=".$_POST['new_dir2']);

//目錄改名 
}elseif(!empty($_POST['new_dir_name'])){
  $dirname=dirname(_UPLOAD_DIR); 
  rename(_UPLOAD_DIR,$dirname."/".$_POST['new_dir_name']);
  header("location:index.php?to=".$dirname);

}elseif(!empty($_POST['mk_dir'])){
    mk_dir(_UPLOAD_DIR."/".$_POST['mk_dir']);
  header("location:"._UPLOAD_DIR);
}elseif(!empty($_FILES['pic']['tmp_name'])){
  foreach($_FILES['pic']['tmp_name'] as $i => $tmpname){
    move_uploaded_file($tmpname , _UPLOAD_DIR."/{$_FILES['pic']['name'][$i]}");
  }
}


//開啟目錄
$dh=opendir(_UPLOAD_DIR);

$main="
<script src='js/jquery-1.3.2.min.js' type='text/javascript'></script>
<script src='js/jquery.MultiFile.js' type='text/javascript'></script>

<form action='{$_SERVER['PHP_SELF']}' method='post' enctype='multipart/form-data'>
<table style='width:1000px;' class='tinytable'>
<tr><td style='width:400px;'>

<div style='height:400px;overflow:auto;'>
    <table class='tinytable' style='width:100%;'>
    <tr><td colspan=4>$dir</td></tr>
    <tr><th>檔名</th><th>大小</th><th>類型</th><th>功能</th></tr>";

    //讀取目錄
    while($file=readdir($dh)){
        if($file==".")continue;

        //檢查得到的檔案其類型
        $type=filetype(_UPLOAD_DIR."/".$file);

            //依據類型放到不同目錄中
        if($type=="dir"){
            $dir_arr[]=$file;
        }else{
            $file_arr[]=$file;
        }
    }

    //秀出目錄
    if(is_array($dir_arr)){
        foreach($dir_arr as $sub_dir){
            $size=($sub_dir=="..")?"":dirSize(_UPLOAD_DIR."/".$sub_dir);
            $size=($sub_dir=="..")?"":formatBytes($size,1);
            $del=($sub_dir=="..")?"":"<a href='index.php?op=del_dir&to="._UPLOAD_DIR."/".$sub_dir."'>刪除</a>";
            $main.= "<tr><td><a href='index.php?to="._UPLOAD_DIR."/".$sub_dir."'>$sub_dir</a></td><td>$size</td><td>目錄</td><td>$del</td></tr>";
        }
    }

    //秀出檔案
    if(is_array($file_arr)){
        foreach($file_arr as $file){
            $size=filesize(_UPLOAD_DIR."/".$file);
            $size=formatBytes($size,1);  
            $exif=(strtolower(substr($file,-3))=="jpg")?" (<a href='exif.php?file="._UPLOAD_DIR."/{$file}#' target='show'>exif</a>)":"";
            $main.= "<tr><td><a href='"._UPLOAD_URL."/{$file}'  target='show'>$file</a>$exif</td><td>$size</td><td>檔案</td><td>
                <input type='checkbox' name='files[]' value='$file'>
                <a href='{$_SERVER['PHP_SELF']}?file=$file&op=del& to="._UPLOAD_DIR."'>刪除</a></td></tr>";
        }
    }
    $main.="
    </table>
</div>


</td><td><iframe name='show' style='width:100%;height:400px;border:1px solid gray;'></iframe></td></tr>

<tr><th colspan=2>

<input type='hidden' name='to' value='"._UPLOAD_DIR."'>

        將「"._UPLOAD_DIR."」<input type='radio' name='op' value='move_dir'>搬移<input type='radio' name='op' value='copy_dir'>複製到:".folder_select($base_dir,"new_dir2")."或改名為<input type='text' name='new_dir_name' size=10><br>

    將勾選的檔案 <input type='radio' name='op' value='del'>刪除
    <input type='radio' name='op' value='move'>搬移到:".folder_select($base_dir,"new_dir")."
    建立新目錄:<input type='text' name='mk_dir'><br>
    ,上傳檔案:<input type='file' name='pic[]' class='multi' />
    <input type='submit' value='送出'>

</th></tr>
</table>

</form>";
?>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=Big5">
  <title></title>
  <link rel="stylesheet" href="tinytable.css" />
  <link rel="stylesheet" href="iconize_l.css" />
  </head>
  <body>
    <?php echo $main;?>
  </body>
</html>




<?php
//計算目錄大小
function dirSize($directory) {
    $size = 0;
    foreach(new RecursiveIteratorIterator(new RecursiveDirectoryIterator($directory)) as $file){
        $size+=$file->getSize();
    }
    return $size;
}

//把 bytes 轉換成其他單位
function formatBytes($bytes, $precision = 2) {
    $units = array('B', 'KB', 'MB', 'GB', 'TB');

    $bytes = max($bytes, 0);
    $pow = floor(($bytes ? log($bytes) : 0) / log(1024));
    $pow = min($pow, count($units) - 1);

    $bytes /= pow(1024, $pow);

    return round($bytes, $precision) . ' ' . $units[$pow];
}


//目錄選單
function folder_select($base_dir="",$name="",$i=0){
  $prefix=str_repeat("--",$i);
  $i++;
  $disabled=(_UPLOAD_DIR==$base_dir)?"disabled":"";
  $option=($i==1)?"<option value='{$base_dir}/' $disabled>/</option>\n":"";
  $dh=opendir($base_dir);
  while($file=readdir($dh)){
    if($file=="." or $file=="..")continue;
    $type=filetype($base_dir."/".$file);
    if($type=="dir"){
            $disabled=(_UPLOAD_DIR=="{$base_dir}/{$file}")?"disabled":"";
        $option.="<option value='{$base_dir}/{$file}' $disabled>{$prefix}{$file}</option>\n";
        $option.=folder_select("{$base_dir}/{$file}",$name,$i);
    }
    }
    if($i==1){
        $main="<select name='$name'>
        $option
        </select>";
    }else{
    $main=$option;
    }
    return $main;
}


//建立目錄
function mk_dir($dir=""){
    //若無目錄名稱秀出警告訊息
    if(empty($dir))die("沒有目錄名稱");
    //若目錄不存在的話建立目錄
    if (!is_dir($dir)) {
        umask(000);
        //若建立失敗秀出警告訊息
        if(!mkdir($dir, 0777)){
            die("$dir 建立失敗!");
        }
    }
}

 


//目錄複製
function full_copy( $source, $target ){
    if ( is_dir( $source ) ){
        @mkdir( $target );

        $d = dir( $source );

        while ( FALSE !== ( $entry = $d->read() ) ){
            if ( $entry == '.' || $entry == '..' ){
                continue;
            }

            $Entry = $source . '/' . $entry;
            if ( is_dir( $Entry ) ){
                full_copy( $Entry, $target . '/' . $entry );
                continue;
            }
            copy( $Entry, $target . '/' . $entry );
        }

        $d->close();
    }else{
        copy( $source, $target );
    }
}

//刪除整個目錄
function delTree($dir) {
    $files = glob( $dir . '*', GLOB_MARK );
    foreach( $files as $file ){
        if( is_dir( $file ) )
            delTree( $file );
        else
            unlink( $file );
    }

    if (is_dir($dir)) rmdir( $dir );

}
?>
 

[991]PHP網站開發 進階應用技巧2

10-2 exif.php

<?php
$exif = exif_read_data($_GET['file'],0,true);
include "exif_tag.php";

$main="<table>";
foreach($exif_tag  as $k=>$v) {
    $main.="<tr><th>$k</th><td>$v</td></tr>";
}
$main.="</table>";

echo $main;
?>
 

[991]PHP網站開發 進階應用技巧2

11. 多媒體RSS

一、自動判別高度

1.主表格為id=tbl,左邊目錄為id=w1,右邊iframe為id=w2,工具列高120px
<script type='text/javascript'>
$(document).ready(function() {
  var wh=$(window).height();
  w1h = wh-120;
  w2h = wh-130;
  $('#tbl').height(wh);
  $('#w1').height(w1h);
  $('#w2').height(w2h);
});
</script>

二、Media RSS規格

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
    <item>
         <title>標題</title>
         <media:description> 相關描述</media:description>
         <link>連結</link>
         <media:thumbnail url="http://縮圖連結位置"/>
         <media:content url="http://原圖連結位置"/>
    </item>
</channel>
</rss>


三、套用Cooliris 3D Wall效果

1.加上連結:
<a href='cooliris.php?dir="._UPLOAD_DIR."' target='show'>此目錄下圖片的3D牆</a>


2.cooliris.php
<?php
echo "
<object id='o' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
  width='550' height='400'>
<param name='movie' value='http://apps.cooliris.com/embed/cooliris.swf' />
<param name='allowFullScreen' value='true' />
<param name='allowScriptAccess' value='always' />
<param name='flashvars' value='feed=http://localhost/11/mrss.php?dir={$_GET['dir']}' />
<embed type='application/x-shockwave-flash'
  src='http://apps.cooliris.com/embed/cooliris.swf'
  flashvars='feed=http://localhost/11/mrss.php?dir={$_GET['dir']}'
  width='550'
  height='400'
  allowFullScreen='true'
  allowScriptAccess='always'>
</embed>
</object>";
?>


3.crossdomain.xml(請直接放到網頁根目錄下即可)
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM
"http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
    <allow-access-from domain="*.cooliris.com" secure="false" />
</cross-domain-policy>


4.mrss.php
<?php
$base_dir=(empty($_GET['dir']))?"D:/httpd/11/uploads":$_GET['dir'];
$data=get_pics($base_dir);

echo "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>
<rss version=\"2.0\" xmlns:media=\"http://search.yahoo.com/mrss/\" xmlns:atom=\"http://www.w3.org/2005/Atom\">
<channel>
    $data
</channel>
</rss>";

//取得圖片
function get_pics($dir){
    $base_dir="D:/httpd/11/uploads";
    $base_url="http://localhost/11/uploads";

    $data="";
    $files = glob($dir.'*', GLOB_MARK );
    foreach($files as $file){
        if(is_dir($file)){
            $data.=get_pics($file);
        }else{
            $file_name=str_replace($base_dir,"",$file);
            $file_url=str_replace($base_dir,$base_url,$file);
            $file_url=str_replace("\\","/",$file_url);

            $ext=substr(strtolower($file),-3);
            if(in_array($ext,array("jpg","gif","png","jpeg"))){
                $data.="<item>
                    <title>{$file_name}</title>
                    <link>{$file_url}</link>
                    <media:thumbnail url=\"{$file_url}\"/>
                    <media:content type=\"image/{$ext}\" url=\"{$file_url}\" />
                </item>
                ";
                }
            }
    }
    return $data;
}
?>

 

[991]PHP網站開發 進階應用技巧2

11-1 index.php

<?php
//基本路徑
$base_dir="D:/xampplite/htdocs/11/test/uploads";

//基本網址
$base_url="http://localhost/11/test/uploads";


//檢查是否要切換路徑
$dir=(empty($_REQUEST['to']))?$base_dir:str_replace("\\","/",realpath($_REQUEST['to']));
//檢查目前路徑是否在基本路徑之下
$dir=(ereg("^".$base_dir,$dir))?$dir:$base_dir;
//製作切換網址
$url=str_replace($base_dir,$base_url,$dir);
//把切換路徑定義到常數
define("_UPLOAD_DIR",$dir);
//把切換網址定義到常數
define("_UPLOAD_URL",$url);


/************** 判斷目前要進行的動作 **************/

//刪除單一檔案
if($_GET['op']=="del"){
    $file=$_GET['file'];
    @unlink(_UPLOAD_DIR."/".$file);
    header("location:"._UPLOAD_DIR);
//刪除多檔案
}elseif($_POST['op']=="del"){
    if(is_array($_POST['files'])){
    foreach($_POST['files'] as $file){
        @unlink(_UPLOAD_DIR."/".$file);
    }
    header("location:"._UPLOAD_DIR);
    }
//搬移多檔案
}elseif($_POST['op']=="move"){
    if(is_array($_POST['files'])){
    foreach($_POST['files'] as $file){
        @rename(_UPLOAD_DIR."/".$file,$_POST['new_dir']."/".$file);
    }
    header("location:"._UPLOAD_DIR);
  }


//搬移目錄
}elseif($_POST['op']=="move_dir"){
    $dirname=basename(_UPLOAD_DIR);
  rename(_UPLOAD_DIR,$_POST['new_dir2']."/{$dirname}");
  header("location:index.php?to=".$_POST['new_dir2']);

//刪除目錄
}elseif($_GET['op']=="del_dir"){
     $dirname=dirname(_UPLOAD_DIR);
  delTree(_UPLOAD_DIR);
  header("location:index.php?to=".$dirname);

//複製目錄
}elseif($_POST['op']=="copy_dir"){
    $dirname=basename(_UPLOAD_DIR);
  full_copy(_UPLOAD_DIR,$_POST['new_dir2']."/{$dirname}_copy");
  header("location:index.php?to=".$_POST['new_dir2']);

//目錄改名
}elseif(!empty($_POST['new_dir_name'])){
  $dirname=dirname(_UPLOAD_DIR);
  rename(_UPLOAD_DIR,$dirname."/".$_POST['new_dir_name']);
  header("location:index.php?to=".$dirname);

}elseif(!empty($_POST['mk_dir'])){
    mk_dir(_UPLOAD_DIR."/".$_POST['mk_dir']);
  header("location:"._UPLOAD_DIR);
}elseif(!empty($_FILES['pic']['tmp_name'])){
  foreach($_FILES['pic']['tmp_name'] as $i => $tmpname){
    move_uploaded_file($tmpname , _UPLOAD_DIR."/{$_FILES['pic']['name'][$i]}");
  }
}


//開啟目錄
$dh=opendir(_UPLOAD_DIR);

$main="
<script src='js/jquery-1.3.2.min.js' type='text/javascript'></script>
<script src='js/jquery.MultiFile.js' type='text/javascript'></script>

<script type='text/javascript'>
$(document).ready(function() {
  var wh=$(window).height();
  var th=$('#tool').height();
  $('#tbl').height(wh);
  w1h=wh-th;
  $('#w1').height(w1h);
  w2h=wh-th-15;
  $('#w2').height(w2h);
});
</script>


<form action='{$_SERVER['PHP_SELF']}' method='post' enctype='multipart/form-data'>
<table style='width:1000px;' class='tinytable' id='tbl'>
<tr><td style='width:400px;'>

<div style='overflow:auto;' id='w1'>
    <table class='tinytable' style='width:100%;'>
    <tr><td colspan=4>$dir</td></tr>
    <tr><th>檔名</th><th>大小</th><th>類型</th><th>功能</th></tr>";

    //讀取目錄
    while($file=readdir($dh)){
        if($file==".")continue;

        //檢查得到的檔案其類型
        $type=filetype(_UPLOAD_DIR."/".$file);

            //依據類型放到不同目錄中
        if($type=="dir"){
            $dir_arr[]=$file;
        }else{
            $file_arr[]=$file;
        }
    }

    //秀出目錄
    if(is_array($dir_arr)){
        foreach($dir_arr as $sub_dir){
            $size=($sub_dir=="..")?"":dirSize(_UPLOAD_DIR."/".$sub_dir);
            $size=($sub_dir=="..")?"":formatBytes($size,1);
            $del=($sub_dir=="..")?"":"<a href='index.php?op=del_dir&to="._UPLOAD_DIR."/".$sub_dir."'>刪除</a>";
            $main.= "<tr><td><a href='index.php?to="._UPLOAD_DIR."/".$sub_dir."'>$sub_dir</a></td><td>$size</td><td>目錄</td><td>$del</td></tr>";
        }
    }

    //秀出檔案
    if(is_array($file_arr)){
        foreach($file_arr as $file){
            $size=filesize(_UPLOAD_DIR."/".$file);
            $size=formatBytes($size,1);
            $exif=(strtolower(substr($file,-3))=="jpg")?" (<a href='exif.php?file="._UPLOAD_DIR."/{$file}#' target='show'>exif</a>)":"";
            $main.= "<tr><td><a href='"._UPLOAD_URL."/{$file}'  target='show'>$file</a>$exif</td><td>$size</td><td>檔案</td><td>
                <input type='checkbox' name='files[]' value='$file'>
                <a href='{$_SERVER['PHP_SELF']}?file=$file&op=del& to="._UPLOAD_DIR."'>刪除</a></td></tr>";
        }
    }
    $main.="
    </table>
</div>


</td><td><iframe id='w2' name='show' style='width:100%;border:1px solid gray;'></iframe></td></tr>

<tr id='tool'><th colspan=2>

<input type='hidden' name='to' value='"._UPLOAD_DIR."'>

        將「"._UPLOAD_DIR."」<input type='radio' name='op' value='move_dir'>搬移<input type='radio' name='op' value='copy_dir'>複製到:".folder_select($base_dir,"new_dir2")."或改名為<input type='text' name='new_dir_name' size=10><br>

    將勾選的檔案 <input type='radio' name='op' value='del'>刪除
    <input type='radio' name='op' value='move'>搬移到:".folder_select($base_dir,"new_dir")."
    建立新目錄:<input type='text' name='mk_dir'><br>
    ,上傳檔案:<input type='file' name='pic[]' class='multi' />
    <input type='submit' value='送出'>

</th></tr>
</table>

</form>";
?>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=Big5">
  <title></title>
  <link rel="stylesheet" href="tinytable.css" />
  <link rel="stylesheet" href="iconize_l.css" />
  </head>
  <body>
    <?php echo $main;?>
  </body>
</html>




<?php
//計算目錄大小
function dirSize($directory) {
    $size = 0;
    foreach(new RecursiveIteratorIterator(new RecursiveDirectoryIterator($directory)) as $file){
        $size+=$file->getSize();
    }
    return $size;
}

//把 bytes 轉換成其他單位
function formatBytes($bytes, $precision = 2) {
    $units = array('B', 'KB', 'MB', 'GB', 'TB');

    $bytes = max($bytes, 0);
    $pow = floor(($bytes ? log($bytes) : 0) / log(1024));
    $pow = min($pow, count($units) - 1);

    $bytes /= pow(1024, $pow);

    return round($bytes, $precision) . ' ' . $units[$pow];
}


//目錄選單
function folder_select($base_dir="",$name="",$i=0){
  $prefix=str_repeat("--",$i);
  $i++;
  $disabled=(_UPLOAD_DIR==$base_dir)?"disabled":"";
  $option=($i==1)?"<option value='{$base_dir}/' $disabled>/</option>\n":"";
  $dh=opendir($base_dir);
  while($file=readdir($dh)){
    if($file=="." or $file=="..")continue;
    $type=filetype($base_dir."/".$file);
    if($type=="dir"){
            $disabled=(_UPLOAD_DIR=="{$base_dir}/{$file}")?"disabled":"";
        $option.="<option value='{$base_dir}/{$file}' $disabled>{$prefix}{$file}</option>\n";
        $option.=folder_select("{$base_dir}/{$file}",$name,$i);
    }
    }
    if($i==1){
        $main="<select name='$name'>
        $option
        </select>";
    }else{
    $main=$option;
    }
    return $main;
}


//建立目錄
function mk_dir($dir=""){
    //若無目錄名稱秀出警告訊息
    if(empty($dir))die("沒有目錄名稱");
    //若目錄不存在的話建立目錄
    if (!is_dir($dir)) {
        umask(000);
        //若建立失敗秀出警告訊息
        if(!mkdir($dir, 0777)){
            die("$dir 建立失敗!");
        }
    }
}


//目錄複製
function full_copy( $source, $target ){
    if ( is_dir( $source ) ){
        @mkdir( $target );

        $d = dir( $source );

        while ( FALSE !== ( $entry = $d->read() ) ){
            if ( $entry == '.' || $entry == '..' ){
                continue;
            }

            $Entry = $source . '/' . $entry;
            if ( is_dir( $Entry ) ){
                full_copy( $Entry, $target . '/' . $entry );
                continue;
            }
            copy( $Entry, $target . '/' . $entry );
        }

        $d->close();
    }else{
        copy( $source, $target );
    }
}

//刪除整個目錄
function delTree($dir) {
    $files = glob( $dir . '*', GLOB_MARK );
    foreach( $files as $file ){
        if( is_dir( $file ) )
            delTree( $file );
        else
            unlink( $file );
    }

    if (is_dir($dir)) rmdir( $dir );

}
?>
 

[991]PHP網站開發 進階應用技巧2

11-2 mrss.php

<?php
$dir=(empty($_GET['dir']))?"D:/xampplite/htdocs/11/test/uploads":$_GET['dir'];

//整個目錄圖片
function get_pic($dir) {
    $files = glob( $dir . '*', GLOB_MARK );
    foreach( $files as $file ){
        if( is_dir( $file ) ){
            $rss.=get_pic( $file );
        }else{

            $base_dir="D:/xampplite/htdocs/11/test/uploads";
            $base_url="http://localhost/11/test/uploads";
                   
            $file=str_replace("\\","/",$file);
            $url=str_replace($base_dir,$base_url,$file);

            $ext=substr(strtolower($file),-3);                   
            $ok=array("jpg","gif","png","peg","flv","mp4");
            if(!in_array($ext,$ok)){
                continue;
            }

            if($ext=="flv"){
                $thumbnail_url=substr($url,0,-3)."png";                   
            }else{
                $thumbnail_url=$url;
            }

            $rss.="
                        <item>
                             <title>$file</title>
                             <media:description>$file</media:description>
                             <link>$file</link>
                             <media:thumbnail url=\"$url\"/>
                             <media:content url=\"$url\"/>
                        </item>
                        ";
                }       
    }

    return $rss;
}
?>


<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
   <?php echo get_pic($dir); ?>
</channel>
</rss>

[991]PHP網站開發 進階應用技巧2

12. 樹狀目錄+HTML5

一、dTree 官網:http://www.destroydrop.com/javascripts/tree/
1.無限層樹狀選單,並可記住開啟狀態
2.同一畫面中可以有數個樹狀目錄
3.支援各種瀏覽器:IE 5+、Netscape 6+、Opera 7+、Mozilla

二、基本語法
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>
<script type="text/javascript">
a = new dTree('a');
a.config.useCookies=false;
a.add(0,-1,'根目錄','javascript: void(0);');
a.add(編號, 父編號,'文字','網址');
document.write(a);
</script>

三、全開或關閉語法
<a href="javascript: a.openAll();">全部開啟</a>
<a href="javascript: a.closeAll();">全部關閉</a>
<a href="javascript: a.openTo(12, true);">開啟編號12</a>

四、完整語法
a.add(編號, 父編號,'文字','網址','提示文字','目標','一般圖示','點選圖示','開啟狀態');
a.add(1, 0, '關於我', 'me.php', '自我介紹', 'main', 'folder.gif', 'open_folder.gif',true);

五、設定項目
a.config.target = "mytarget";
預設的開啟目標位置
a.config.folderLinks = true ;
目錄是否可連結
a.config.useSelection = true;
是否以高亮度呈現目前選項
a.config.useCookies = true;
是否紀錄目前開啟狀態
a.config.useLines = true;
是否繪製節點間的線條
a.config.useIcons = true;
是否呈現圖示
a.config.useStatusText = false ;
以節點名稱取代網址顯示在狀態列
a.config.closeSameLevel = false;
是否關閉未點選的同一層節點
a.config.inOrder = false ;
假如父節點總是放在子節點之上,可設定此設定為true以加快速度。


六、HTML5 Video標籤
1.除了IE外,其餘瀏覽器幾乎都支援。
<video src="ck2.ogv" controls preload autoplay poster="ck2.png" width="682">
    您的瀏覽器太古董了...不支援 HTML 5 最新技術...建議使用FireFox或Google瀏覽器。
</video>

2.其影片格式為ogg(ogv)或H.264(mp4),目前瀏覽器支援程度:
(1) ogg:Firefox (v3.5)、Opera (v10.50) 、Google Chrome (v3.0.182.2)
(2) H.264:Apple Safari (v4)、Google Chrome (v3.0.182.2)
3.將來源檔案與 ffmpeg2theora 工具放置於同一個目錄(資料夾)底下,開啟 DOS 視窗,下達以下指令…將影片轉為ogv格式:
ffmpeg2theora 影片檔
4.若有主機管理權限,請在/etc/mime.type中加入video/ogg     ogv  ogg

[991]PHP網站開發 進階應用技巧2

12-1 index.php

<?php
$root_pass="";    //資料庫root密碼
$db_name="test";  //資料庫名稱

/* 連資料庫檢查 */
$link=mysql_connect("localhost","root",$root_pass);  //資料庫連線
mysql_select_db("test");
mysql_query("SET NAMES 'utf8'");  //設定語系
error_reporting(0);

$sql="select * from menu order by ofsn , sn";
$result=mysql_query($sql);
$menu="";
while(list($sn,$ofsn,$title,$url)=mysql_fetch_row($result)){
    $menu.="a.add($sn, $ofsn,'$title','$url','$title','show');\n";
}


?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel='stylesheet' type='text/css' media='screen' href='style.css' />
  <title>樹狀選單</title>
  </head>
  <body>
   
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
 
  <script type='text/javascript'>
    $(document).ready(function() {
      var ww=$(window).width();
      var hh=$(window).height();
      w2w = ww-220;
      $('#tbl').width(ww);
      $('#tbl').height(hh);
      $('#w1').width(200);
      $('#w2').width(w2w);
      $('#w2').height(hh);
    });
    </script>

 
  <table id="tbl">
  <tr><td valign='top' id="w1">

        <link rel="StyleSheet" href="dtree.css" type="text/css" />
        <script type="text/javascript" src="dtree.js"></script>
        <script type="text/javascript">
        a = new dTree('a');
        a.config.target = "show";
        a.config.folderLinks = true ;
        a.config.useSelection = true;
        a.config.useCookies = true;
        a.config.useLines = false;
        a.config.useIcons = false;
        a.config.useStatusText = true ;
        a.config.closeSameLevel = true;
        a.config.inOrder = true ;

        a.add(0,-1,'目錄','javascript: void(0);');
        <?php echo $menu;?>
        document.write(a);
        </script>
        <a href="javascript: a.openAll();">全部開啟</a><br>
        <a href="javascript: a.closeAll();">全部關閉</a><br>
        <a href="javascript: a.openTo(12, true);">開啟編號12</a>  

    </td><td valign='top'>
        <iframe name="show" id="w2"></iframe>
    </td></tr>
  </table>


   

  </body>
</html>
 

[991]PHP網站開發 進階應用技巧2

12-2 dtree.js

/*--------------------------------------------------|

| dTree 2.05 | www.destroydrop.com/javascript/tree/ |

|---------------------------------------------------|

| Copyright (c) 2002-2003 Geir Landr?              |

|                                                   |

| This script can be used freely as long as all     |

| copyright messages are intact.                    |

|                                                   |

| Updated: 17.04.2003                               |

|--------------------------------------------------*/



// Node object

function Node(id, pid, name, url, title, target, icon, iconOpen, open) {

    this.id = id;

    this.pid = pid;

    this.name = name;

    this.url = url;

    this.title = title;

    this.target = target;

    this.icon = icon;

    this.iconOpen = iconOpen;

    this._io = open || false;

    this._is = false;

    this._ls = false;

    this._hc = false;

    this._ai = 0;

    this._p;

};



// Tree object

function dTree(objName) {

    this.config = {

        target                    : null,

        folderLinks            : true,

        useSelection        : true,

        useCookies            : true,

        useLines                : true,

        useIcons                : true,

        useStatusText        : false,

        closeSameLevel    : false,

        inOrder                    : false

    }

    var path = "dtree/img/";

    this.icon = {
       
        root                : path + 'base.gif',

        folder            : path + 'folder.gif',

        folderOpen    : path + 'folderopen.gif',

        node                : path + 'page.gif',

        empty                : path + 'empty.gif',

        line                : path + 'line.gif',

        join                : path + 'join.gif',

        joinBottom    : path + 'joinbottom.gif',

        plus                : path + 'plus.gif',

        plusBottom    : path + 'plusbottom.gif',

        minus                : path + 'minus.gif',

        minusBottom    : path + 'minusbottom.gif',

        nlPlus            : path + 'nolines_plus.gif',

        nlMinus            : path + 'nolines_minus.gif'

    };

    this.obj = objName;

    this.aNodes = [];

    this.aIndent = [];

    this.root = new Node(-1);

    this.selectedNode = null;

    this.selectedFound = false;

    this.completed = false;

};



// Adds a new node to the node array

dTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open) {

    this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, title, target, icon, iconOpen, open);

};



// Open/close all nodes

dTree.prototype.openAll = function() {

    this.oAll(true);

};

dTree.prototype.closeAll = function() {

    this.oAll(false);

};



// Outputs the tree to the page

dTree.prototype.toString = function() {

    var str = '<div class="dtree">\n';

    if (document.getElementById) {

        if (this.config.useCookies) this.selectedNode = this.getSelected();

        str += this.addNode(this.root);

    } else str += 'Browser not supported.';

    str += '</div>';

    if (!this.selectedFound) this.selectedNode = null;

    this.completed = true;

    return str;

};



// Creates the tree structure

dTree.prototype.addNode = function(pNode) {

    var str = '';

    var n=0;

    if (this.config.inOrder) n = pNode._ai;

    for (n; n<this.aNodes.length; n++) {

        if (this.aNodes[n].pid == pNode.id) {

            var cn = this.aNodes[n];

            cn._p = pNode;

            cn._ai = n;

            this.setCS(cn);

            if (!cn.target && this.config.target) cn.target = this.config.target;

            if (cn._hc && !cn._io && this.config.useCookies) cn._io = this.isOpen(cn.id);

            if (!this.config.folderLinks && cn._hc) cn.url = null;

            if (this.config.useSelection && cn.id == this.selectedNode && !this.selectedFound) {

                    cn._is = true;

                    this.selectedNode = n;

                    this.selectedFound = true;

            }

            str += this.node(cn, n);

            if (cn._ls) break;

        }

    }

    return str;

};



// Creates the node icon, url and text

dTree.prototype.node = function(node, nodeId) {

    var str = '<div class="dTreeNode">' + this.indent(node, nodeId);

    if (this.config.useIcons) {

        if (!node.icon) node.icon = (this.root.id == node.pid) ? this.icon.root : ((node._hc) ? this.icon.folder : this.icon.node);

        if (!node.iconOpen) node.iconOpen = (node._hc) ? this.icon.folderOpen : this.icon.node;

        if (this.root.id == node.pid) {

            node.icon = this.icon.root;

            node.iconOpen = this.icon.root;

        }

        str += '<img id="i' + this.obj + nodeId + '" src="' + ((node._io) ? node.iconOpen : node.icon) + '" alt="" />';

    }

    if (node.url) {

        str += '<a id="s' + this.obj + nodeId + '" class="' + ((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node') + '" href="' + node.url + '"';

        if (node.title) str += ' title="' + node.title + '"';

        if (node.target) str += ' target="' + node.target + '"';

        if (this.config.useStatusText) str += ' onmouseover="window.status=\'' + node.name + '\';return true;" onmouseout="window.status=\'\';return true;" ';

        if (this.config.useSelection && ((node._hc && this.config.folderLinks) || !node._hc))

            str += ' onclick="javascript: ' + this.obj + '.s(' + nodeId + ');"';

        str += '>';

    }

    else if ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id)

        str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');" class="node">';

    str += node.name;

    if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '</a>';

    str += '</div>';

    if (node._hc) {

        str += '<div id="d' + this.obj + nodeId + '" class="clip" style="display:' + ((this.root.id == node.pid || node._io) ? 'block' : 'none') + ';">';

        str += this.addNode(node);

        str += '</div>';

    }

    this.aIndent.pop();

    return str;

};



// Adds the empty and line icons

dTree.prototype.indent = function(node, nodeId) {

    var str = '';

    if (this.root.id != node.pid) {

        for (var n=0; n<this.aIndent.length; n++)

            str += '<img src="' + ( (this.aIndent[n] == 1 && this.config.useLines) ? this.icon.line : this.icon.empty ) + '" alt="" />';

        (node._ls) ? this.aIndent.push(0) : this.aIndent.push(1);

        if (node._hc) {

            str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');"><img id="j' + this.obj + nodeId + '" src="';

            if (!this.config.useLines) str += (node._io) ? this.icon.nlMinus : this.icon.nlPlus;

            else str += ( (node._io) ? ((node._ls && this.config.useLines) ? this.icon.minusBottom : this.icon.minus) : ((node._ls && this.config.useLines) ? this.icon.plusBottom : this.icon.plus ) );

            str += '" alt="" /></a>';

        } else str += '<img src="' + ( (this.config.useLines) ? ((node._ls) ? this.icon.joinBottom : this.icon.join ) : this.icon.empty) + '" alt="" />';

    }

    return str;

};



// Checks if a node has any children and if it is the last sibling

dTree.prototype.setCS = function(node) {

    var lastId;

    for (var n=0; n<this.aNodes.length; n++) {

        if (this.aNodes[n].pid == node.id) node._hc = true;

        if (this.aNodes[n].pid == node.pid) lastId = this.aNodes[n].id;

    }

    if (lastId==node.id) node._ls = true;

};



// Returns the selected node

dTree.prototype.getSelected = function() {

    var sn = this.getCookie('cs' + this.obj);

    return (sn) ? sn : null;

};



// Highlights the selected node

dTree.prototype.s = function(id) {

    if (!this.config.useSelection) return;

    var cn = this.aNodes[id];

    if (cn._hc && !this.config.folderLinks) return;

    if (this.selectedNode != id) {

        if (this.selectedNode || this.selectedNode==0) {

            eOld = document.getElementById("s" + this.obj + this.selectedNode);

            eOld.className = "node";

        }

        eNew = document.getElementById("s" + this.obj + id);

        eNew.className = "nodeSel";

        this.selectedNode = id;

        if (this.config.useCookies) this.setCookie('cs' + this.obj, cn.id);

    }

};



// Toggle Open or close

dTree.prototype.o = function(id) {

    var cn = this.aNodes[id];

    this.nodeStatus(!cn._io, id, cn._ls);

    cn._io = !cn._io;

    if (this.config.closeSameLevel) this.closeLevel(cn);

    if (this.config.useCookies) this.updateCookie();

};



// Open or close all nodes

dTree.prototype.oAll = function(status) {

    for (var n=0; n<this.aNodes.length; n++) {

        if (this.aNodes[n]._hc && this.aNodes[n].pid != this.root.id) {

            this.nodeStatus(status, n, this.aNodes[n]._ls)

            this.aNodes[n]._io = status;

        }

    }

    if (this.config.useCookies) this.updateCookie();

};



// Opens the tree to a specific node

dTree.prototype.openTo = function(nId, bSelect, bFirst) {

    if (!bFirst) {

        for (var n=0; n<this.aNodes.length; n++) {

            if (this.aNodes[n].id == nId) {

                nId=n;

                break;

            }

        }

    }

    var cn=this.aNodes[nId];

    if (cn.pid==this.root.id || !cn._p) return;

    cn._io = true;

    cn._is = bSelect;

    if (this.completed && cn._hc) this.nodeStatus(true, cn._ai, cn._ls);

    if (this.completed && bSelect) this.s(cn._ai);

    else if (bSelect) this._sn=cn._ai;

    this.openTo(cn._p._ai, false, true);

};



// Closes all nodes on the same level as certain node

dTree.prototype.closeLevel = function(node) {

    for (var n=0; n<this.aNodes.length; n++) {

        if (this.aNodes[n].pid == node.pid && this.aNodes[n].id != node.id && this.aNodes[n]._hc) {

            this.nodeStatus(false, n, this.aNodes[n]._ls);

            this.aNodes[n]._io = false;

            this.closeAllChildren(this.aNodes[n]);

        }

    }

}



// Closes all children of a node

dTree.prototype.closeAllChildren = function(node) {

    for (var n=0; n<this.aNodes.length; n++) {

        if (this.aNodes[n].pid == node.id && this.aNodes[n]._hc) {

            if (this.aNodes[n]._io) this.nodeStatus(false, n, this.aNodes[n]._ls);

            this.aNodes[n]._io = false;

            this.closeAllChildren(this.aNodes[n]);       

        }

    }

}



// Change the status of a node(open or closed)

dTree.prototype.nodeStatus = function(status, id, bottom) {

    eDiv    = document.getElementById('d' + this.obj + id);

    eJoin    = document.getElementById('j' + this.obj + id);

    if (this.config.useIcons) {

        eIcon    = document.getElementById('i' + this.obj + id);

        eIcon.src = (status) ? this.aNodes[id].iconOpen : this.aNodes[id].icon;

    }

    eJoin.src = (this.config.useLines)?

    ((status)?((bottom)?this.icon.minusBottom:this.icon.minus):((bottom)?this.icon.plusBottom:this.icon.plus)):

    ((status)?this.icon.nlMinus:this.icon.nlPlus);

    eDiv.style.display = (status) ? 'block': 'none';

};





// [Cookie] Clears a cookie

dTree.prototype.clearCookie = function() {

    var now = new Date();

    var yesterday = new Date(now.getTime() - 1000 * 60 * 60 * 24);

    this.setCookie('co'+this.obj, 'cookieValue', yesterday);

    this.setCookie('cs'+this.obj, 'cookieValue', yesterday);

};



// [Cookie] Sets value in a cookie

dTree.prototype.setCookie = function(cookieName, cookieValue, expires, path, domain, secure) {

    document.cookie =

        escape(cookieName) + '=' + escape(cookieValue)

        + (expires ? '; expires=' + expires.toGMTString() : '')

        + (path ? '; path=' + path : '')

        + (domain ? '; domain=' + domain : '')

        + (secure ? '; secure' : '');

};



// [Cookie] Gets a value from a cookie

dTree.prototype.getCookie = function(cookieName) {

    var cookieValue = '';

    var posName = document.cookie.indexOf(escape(cookieName) + '=');

    if (posName != -1) {

        var posValue = posName + (escape(cookieName) + '=').length;

        var endPos = document.cookie.indexOf(';', posValue);

        if (endPos != -1) cookieValue = unescape(document.cookie.substring(posValue, endPos));

        else cookieValue = unescape(document.cookie.substring(posValue));

    }

    return (cookieValue);

};



// [Cookie] Returns ids of open nodes as a string

dTree.prototype.updateCookie = function() {

    var str = '';

    for (var n=0; n<this.aNodes.length; n++) {

        if (this.aNodes[n]._io && this.aNodes[n].pid != this.root.id) {

            if (str) str += '.';

            str += this.aNodes[n].id;

        }

    }

    this.setCookie('co' + this.obj, str);

};



// [Cookie] Checks if a node id is in a cookie

dTree.prototype.isOpen = function(id) {

    var aOpen = this.getCookie('co' + this.obj).split('.');

    for (var n=0; n<aOpen.length; n++)

        if (aOpen[n] == id) return true;

    return false;

};



// If Push and pop is not implemented by the browser

if (!Array.prototype.push) {

    Array.prototype.push = function array_push() {

        for(var i=0;i<arguments.length;i++)

            this[this.length]=arguments[i];

        return this.length;

    }

};

if (!Array.prototype.pop) {

    Array.prototype.pop = function array_pop() {

        lastElement = this[this.length-1];

        this.length = Math.max(this.length-1,0);

        return lastElement;

    }

};
 

[991]PHP網站開發 進階應用技巧2

13. DHX入門(上)

一、dhtmlxLayout 四種初始化

1.物件型:以頁面上的某個物件作為 Layout 的容器(父節點);
2.視窗型:以某個視窗 (dhtmlxWindows 系統的成員) 作為 Layout 的父節點;
3.全螢幕:先決條件是Layout 的父節點 "document.body", 在這種情況下,Layout 即佔滿整個頁面;
4.版格型:其父節點是其它 dhtmlxLayout 中的某一版格(cell),這種新建立的 Layout 將被放在其它 Layout 的版格中。

二、物件型基本語法一:請放入<head></head>中(其實<body>中也行)

<link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxlayout.css">
<link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_skyblue.css">
<script src="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
<script src="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>
<script src="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
<style>
 html, body { width: 100%; height: 100%; margin: 0px; overflow: hidden; }
</style>

三、物件型基本語法二:

<div id="MyWin" style="position:absolute; width:600px; height:400px;"></div>
<script>
    var dhxLayout = new dhtmlXLayoutObject("MyWin", "3L", "dhx_skyblue")
</script>

四、基本版型

1C 2E 2U 3E 3W 3J 3T 3L
3U 4H 4I 4T 4U 5H 5I 6I

 五、 進階版型

1.<script src="dhtmlxSuite/dhtmlxLayout/patterns/dhtmlxlayout_pattern XX.js"></script>

4E 4W 4A 4J 4L 4F
4C 5U 5E 5W 6C

六、切換樣式

1.內建三種外觀:dhx_skyblue(預設)、dhx_blue、dhx_black
2.記得修改CSS檔名稱!

七、視窗型基本語法一(請放入<head></head>中)

<link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxWindows/codebase/dhtmlxwindows.css">
<link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_skyblue.css">
<script src="dhtmlxSuite/dhtmlxWindows/codebase/dhtmlxwindows.js"></script>

八、視窗型基本語法二:

<script>
    var dhxWins = new dhtmlXWindows();
    var layoutWin = dhxWins.createWindow("w1", 20, 20, 600, 400);
    var dhxLayout = new dhtmlXLayoutObject(layoutWin, "3L", "dhx_skyblue");
</script>

九、全螢幕基本語法二(語法一和物件型一樣):

<script>
    var dhxLayout = new dhtmlXLayoutObject(document.body, "3L", "dhx_skyblue")
</script>

十、版格型基本語法二(語法一和物件型一樣):

<script>
    var dhxLayout = new dhtmlXLayoutObject(document.body, "3L", "dhx_skyblue")
</script>

十一、建議初始化方式

<head>
    <script>
        var dhxLayout;
            function doOnLoad() {
                dhxLayout = new dhtmlXLayoutObject(...);
            }
    </script>
</head>
<body onload="doOnLoad();">
</body>

十二、其他常用方法:

1.取得窗格:var item_a = dhxLayout.cells("a");
2.隱藏標題:item_a.hideHeader(); //showHeader() 可顯示標題
3.取得標題顯示狀態:item_a.isHeaderVisible();
4.設定視窗標題:item_a.setText("主選單"); //getText() 可取得視窗標題
5.展開某窗格:item_a.expand(); //collapse() 可關閉某窗格
6.設定寬度:item_a.setWidth(150); //getWidth() 可取得寬度
7.設定高度:item_a.setHeight(250);//getHeight() 可取得高度
8.設定內容:item_a.attachObject("text_a"); //需定義一個id="text_a"的元件
9.設連結為內容:item_a.attachURL("http://網址");
10.固定寬度:item_a.fixSize(true, false); //寬 , 高
11.設定縮起來後的視窗標題:dhxLayout.setCollapsedText("a", "主選單");
12.自動縮放:dhxLayout.setAutoSize("b;c", "a;c");//水平 , 垂直
13.設定效果:dhxLayout.setEffect("resize", true); //collapse、resize、highlight

[991]PHP網站開發 進階應用技巧2

13-1 index.php

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
 
  <link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxlayout.css">
    <link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_blue.css">
    <link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_skyblue.css">
    <script src="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
    <script src="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>
    <script src="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
    <style>
     html, body { width: 100%; height: 100%; margin: 0px; }
    </style>
 
  </head>
  <body>
    <h1>版型測試</h1>
    <div id="MyWin" style="position:relative; width:900px; height:450px;"></div>
    <br>
    <div id="MyWin2" style="position:relative; width:900px; height:450px;"></div>
   
   
    <script>
    var dhxLayout = new dhtmlXLayoutObject("MyWin", "3J", "dhx_blue");
    var dhxLayout2 = new dhtmlXLayoutObject("MyWin2", "3J", "dhx_skyblue");
        </script>
  </body>
</html>
 

[991]PHP網站開發 進階應用技巧2

13-2 index2.php

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
 
  <link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxlayout.css">
    <link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_blue.css">
    <link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_skyblue.css">
    <script src="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
    <script src="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>
    <script src="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
   
    <link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxWindows/codebase/dhtmlxwindows.css">
    <link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_skyblue.css">
    <link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_blue.css">
    <script src="dhtmlxSuite/dhtmlxWindows/codebase/dhtmlxwindows.js"></script>
   
   
    <style>
     html, body { width: 100%; height: 100%; margin: 0px; overflow:hidden;}
    </style>
 
  </head>
  <body>
    <h1>版型測試</h1>

       
        <script>
    var dhxWins = new dhtmlXWindows();
    var layoutWin = dhxWins.createWindow("w1", 0, 0, 600, 400);
    var dhxLayout = new dhtmlXLayoutObject(layoutWin, "3L", "dhx_skyblue");
   
    var layoutWin2 = dhxWins.createWindow("w2", 40, 40, 600, 400);
    var dhxLayout2 = new dhtmlXLayoutObject(layoutWin2, "5H", "dhx_skyblue");

        </script>
  </body>
</html>
 

[991]PHP網站開發 進階應用技巧2

13-3 index3.php

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
 
  <link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxlayout.css">
    <link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_blue.css">
    <link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_skyblue.css">
    <script src="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
    <script src="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>
    <script src="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
    <script src="dhtmlxSuite/dhtmlxLayout/codebase/patterns/dhtmlxlayout_pattern5U.js"></script>
       
    <style>
     html, body { width: 100%; height: 100%; margin: 0px; overflow:hidden;}
    </style>
 
  </head>
  <body>
      
    <script>
    var dhxLayout = new dhtmlXLayoutObject(document.body, "5U", "dhx_skyblue");
        </script>
  </body>
</html>
 

[991]PHP網站開發 進階應用技巧2

13-4 index4.php

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
 
  <link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxlayout.css">
    <link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_blue.css">
    <link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_skyblue.css">
    <script src="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
    <script src="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>
    <script src="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
   
    <script>
    var dhxLayout,Layout1,win_c1;
    function doOnLoad(){   
    dhxLayout = new dhtmlXLayoutObject(document.body, "5H");
    dhxLayout.setCollapsedText("c", "主內容");
    var win_l = dhxLayout.cells('a');
    win_c1 = dhxLayout.cells('c');
    var win_c2 = dhxLayout.cells('d');
    var win_r = dhxLayout.cells('e');
    win_l.setWidth(180);
    win_l.setText("主選單");
    win_l.attachObject("url");
    win_c1.setHeight(300);
    win_c1.setText("主內容");
    win_c1.attachURL("http://www.google.com");
    win_c2.setText("頁尾資訊");
    win_r.setWidth(180);
    win_r.setText("其他資訊");  
   
   
    Layout1 = new dhtmlXLayoutObject(dhxLayout.cells('b'), "2U");
    Layout1.setAutoSize("a;b");   
    var block_l = Layout1.cells('a');
    var block_2 = Layout1.cells('b');
    block_l.setText("左區塊");
    block_2.setText("右區塊");
   
  } 
 
  function link(url){
        win_c1.attachURL(url);
    }

    </script>   
   
    <style>
     html, body { width: 100%; height: 100%; margin: 0px; overflow:hidden;}
    </style>
 
  </head>
  <body onLoad="doOnLoad();">
     <div id="url" style="font-size:12px;padding:4px;">
         <a href="javascript:link('http://tad0616.net');">http://tad0616.net</a><br>
         <a href="javascript:link('http://163.26.52.246');">http://163.26.52.246</a><br>
         </div> 

  </body>
</html>
 

[991]PHP網站開發 進階應用技巧2

14. DHX編輯器及選單

一、DHX編輯器基本語法

下載sql檔

<link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxEditor/codebase/skins/dhtmlxeditor_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxToolbar/codebase/skins/dhtmlxtoolbar_dhx_skyblue.css">
<script src="dhtmlxSuite/dhtmlxEditor/codebase/dhtmlxcommon.js"></script>
<script src="dhtmlxSuite/dhtmlxEditor/codebase/dhtmlxeditor.js"></script>

二、編輯器JS部份

<script>
var editor;
function doOnLoad() {
    editor = new dhtmlXEditor("editorObj");
    editor.setIconsPath("dhtmlxSuite/dhtmlxEditor/codebase/imgs/");
    editor.init();
}
</script>

三、送出編輯器中資料

<form action="input.php" method="post" onSubmit="document.getElementById('content').value = editor.getContent();">
    <div id="editorObj" style="width: 100%; height: 300px; border: #909090 1px solid;"></div>
    <textarea id="content" name="content" style="display:none;"></textarea>
</form>

四、DHX選單基本語法

<script src="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
<link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxMenu/codebase/skins/dhtmlxmenu_dhx_skyblue.css">
<script src="dhtmlxSuite/dhtmlxMenu/codebase/dhtmlxcommon.js"></script>
<script src="dhtmlxSuite/dhtmlxMenu/codebase/dhtmlxmenu.js"></script>

五、DHX選單JS部份

<script>
    var menu;
    function initMenu() {
        menu = new dhtmlXMenuObject("menuObj");
        menu.setIconsPath("icons/");
        menu.loadXML("menu.xml");
    }
</script>

六、XML結構

<?xml version="1.0"?>
<menu>
  <item id="m1" text="首頁">
      <href target="_top">index.php</href>
  </item>
  <item id="m2" text="新聞">
    <item id="m21" text="發布新聞" img="application_edit.png" imgdis="application_edit.png">
      <href target="_SELF">input.php</href>
    </item>
    <item id="ma1" type="separator"/>
    <item id="m22" text="新聞列表" img="application_form.png" imgdis="application_form.png">
      <href target="_SELF">list.php</href>
    </item>
  </item>
</menu>
 

[991]PHP網站開發 進階應用技巧2

14-1 index.php

<?php
include "setup.php";

$sql = "select * from note order by post_date desc";
$result=mysql_query($sql);
$text_a="";
while(list($sn,$title,$content,$post_date)=mysql_fetch_row($result)){
   
}


?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>

<link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxlayout.css">
<link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_skyblue.css">
<script src="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
<script src="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>
<script src="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxlayout.js"></script>

<style>
    html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }
</style>

<script>

    var dhxLayout;
    function doOnLoad(){
    dhxLayout = new dhtmlXLayoutObject(document.body, "3J", "dhx_skyblue");
    var item_a = dhxLayout.cells("a");
    item_a.setText("主選單");
        item_a.setWidth(200);
        item_a.setHeight(400);
        dhxLayout.cells("c").setText("常用工具");
        dhxLayout.cells("c").attachObject("text_c");
        dhxLayout.cells("b").attachURL("list.php");
  }
</script>

  </head>
  <body onload="doOnLoad();">
    <div id="text_c">
        <a href="javascript:dhxLayout.cells('b').attachURL('input.php');">發佈新聞</a>
    </div>


  </body>
</html>
 

[991]PHP網站開發 進階應用技巧2

14-2 input.php

<?php
include "setup.php";

if($_POST['op']=="save"){
    $sql = "insert into note (title,content,post_date) values('{$_POST['title']}','{$_POST['content']}',now())";
    mysql_query($sql);
    $sn=mysql_insert_id();
    header("location:view.php?sn=$sn");
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
 
<link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxEditor/codebase/skins/dhtmlxeditor_dhx_skyblue.css">
<script src="dhtmlxSuite/dhtmlxEditor/codebase/dhtmlxcommon.js"></script>
<script src="dhtmlxSuite/dhtmlxEditor/codebase/dhtmlxeditor.js"></script>
 
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>
   
    <script>
    var editor;
    function doOnLoad() {
        editor = new dhtmlXEditor("editorObj");
        editor.setIconsPath("dhtmlxSuite/dhtmlxEditor/codebase/imgs/");
        editor.init();
    }
    </script>
  </head>
  <body onload="doOnLoad();">
   
    <form action="input.php" method="post">
        <input type="text" name="title" style="width: 100%;"><br />
        <div id="editorObj" style="height:200px;border:1px solid gray;"></div>      
       
        <textarea id="content" name="content" style="display:none;"></textarea>
        <input type="hidden" name="op" value="save">
        <input type="submit" value="儲存">
    </form>



  </body>
</html>
 

[991]PHP網站開發 進階應用技巧2

14-3 setup.php

<?php
$root_pass="";    //資料庫root密碼
$db_name="test";  //資料庫名稱

/* 連資料庫檢查 */
$link=mysql_connect("localhost","root",$root_pass);  //資料庫連線
mysql_select_db("test");
mysql_query("SET NAMES 'utf8'");  //設定語系
error_reporting(0);
?>

[991]PHP網站開發 進階應用技巧2

14-4 list.php

<?php
include "setup.php";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
 
<link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxMenu/codebase/skins/dhtmlxmenu_dhx_skyblue.css">
<script src="dhtmlxSuite/dhtmlxMenu/codebase/dhtmlxcommon.js"></script>
<script src="dhtmlxSuite/dhtmlxMenu/codebase/dhtmlxmenu.js"></script>


    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>
   
<script>
    var menu;
    function initMenu() {
        menu = new dhtmlXMenuObject("menuObj");
        menu.setIconsPath("icons/");
        menu.loadXML("menu.xml");
    }
</script>

  </head>
  <body onload="initMenu();">
<div id="menuObj"></div>

<?php
$sql = "select * from note order by post_date desc";
$result=mysql_query($sql);
echo "<div style='font-size:11px;padding:4px;'>";
while(list($sn,$title,$content,$post_date)=mysql_fetch_row($result)){
    echo "<li><a href='view.php?sn=$sn'>$title</a></li>";
}
echo "</div>";

?>


  </body>
</html>

[991]PHP網站開發 進階應用技巧2

14-5 view.php

<?php
include "setup.php";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxMenu/codebase/skins/dhtmlxmenu_dhx_skyblue.css">
<script src="dhtmlxSuite/dhtmlxMenu/codebase/dhtmlxcommon.js"></script>
<script src="dhtmlxSuite/dhtmlxMenu/codebase/dhtmlxmenu.js"></script>

    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>
   
<script>
    var menu;
    function initMenu() {
        menu = new dhtmlXMenuObject("
menuObj");
        menu.setIconsPath("icons/");
        menu.loadXML("menu.xml");
    }
</script>   



  </head>
  <body onload="initMenu();">
<div id="menuObj"></div>
  <?php
  if(!empty($_GET['sn'])){
    $sql = "select * from note where sn='{$_GET['sn']}'";
    $result=mysql_query($sql);
    list($sn,$title,$content,$post_date)=mysql_fetch_row($result);
    echo "<h1>$title</h1><p>$content</p>";
  }else{
    echo "尚無指定文章";
  }
?>

  </body>
</html>
 

[991]PHP網站開發 進階應用技巧2

14-6 menu.xml

<?xml version="1.0"?>
<menu>
  <item id="m1" text="首頁">
      <href target="_top">index.php</href>
  </item> 
 
  <item id="m2" text="新聞">
    <item id="m21" text="發布新聞" img="application_edit.png" imgdis="application_edit.png">
      <href>input.php</href>
    </item>
    <item id="m22" text="新聞列表" img="application_form.png" imgdis="application_form.png">
      <href>list.php</href>
    </item>
    <item id="ma1" type="separator"/>
    <item id="m23" text="分月新聞" img="application_side_boxes.png" imgdis="application_side_boxes.png">
        </item>
  </item> 
 
  <item id="m3" text="關於">
    <item id="m31" text="關於本程式"></item>
    <item id="m32" text="開發者"></item>
    <item id="m33" text="Tad 教材網">
      <href target="_blank">http://tad0616.net</href>
    </item>
  </item>
 
</menu>
 

[991]PHP網站開發 進階應用技巧2

15. 點擊編輯

一、基本語法

<script src='jquery-1.4.2.min.js' type='text/javascript'></script>
<script src='jquery.jeditable.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
  //欄位設定
});
</script>

二、欄位設定

$('.name').editable('save.php', {
  indicator : '<img src=\"indicator.gif\">',
  type   : 'text',
  submit : '儲存'
});

三、欄位設定選項

1.method:傳輸方法,可用post或put
2.callback:指定送出資料後要執行的函數
3.name:設定欄位name名稱
4.id:設定欄位id名稱
5.submitdata:額外要送出的資料
6.type:欄位類型,可用text、textarea、select
7.rows:textarea的列高
8.cols:textarea的欄寬
9.height:欄位高度,其值可為:auto、none或指定高度(單位為px)
10.width:欄位寬度,其值可為:auto、none或指定寬度(單位為px)
11.loadurl:在欄位中載入指定連結之內容
12.loadtype:載入連結之請求類型,可為GET或POST
13.loadtext:載入額外資料時要呈現的文字
14.loaddata:擷取編輯內容前要傳送的額外參數
15.data:預設值
16.indicator:儲存時的顯示內容,可用HTML
17.tooltip:提示說明
18.event:jquery事件,如:click或dblclick
19.submit:送出的按鈕文字
20.cancel:取消的按鈕文字
21.cssclass:要套用的class名稱,是套到該元件的上一層。
22.style:直接指定style樣式,是套到該元件的上一層。
23.select:true 或 false,當選擇文字被標記時
24.placeholder:空值時,要呈線的內容
25.onblur:該元件不在焦點上時,要進行的動作:cancel、submit、ignore或function

四、儲存設定

1.送出後,會得到 $_POST['id'] 即欄位的name,$_POST['value'] 則為欄位值。

五、換行呈現

1.請在style加上white-space:pre-wrap;

[991]PHP網站開發 進階應用技巧2

15-1 index.php

<?php
$root_pass="";    //資料庫root密碼
$db_name="test";  //資料庫名稱

/* 連資料庫檢查 */
$link=mysql_connect("localhost","root",$root_pass);  //資料庫連線
mysql_select_db("test");
mysql_query("SET NAMES 'utf8'");  //設定語系
error_reporting(0);

$sn=$_GET['sn'];

if(!empty($sn)){
  $main=add_form($sn);
}else{
  $main=list_all();
}

?>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel='stylesheet' type='text/css' media='screen' href='style.css' />
  <title>點選編輯範例</title>
  </head>
  <body>
  <?php echo $main;?>
  </body>
</html>

<?php
//列出所有名單
function list_all(){
  $main="<h1>報名列表</h1>
  <table id='mytable'>
  <tr><th>編號</th><th>姓名</th><th>性別</th><th>備註</th></tr>";
  $sql="select * from my_data";
  $result=mysql_query($sql) or die($sql);
  while(list($sn,$name,$sex,$note)=mysql_fetch_row($result)){
    $main.= "<tr>
    <td><a href='{$_SERVER['PHP_SELF']}?sn=$sn'>$sn</a></td>
    <td><a href='{$_SERVER['PHP_SELF']}?sn=$sn'>$name</a></td>
    <td>$sex</td>
    <td style='white-space:pre-wrap;'>$note</td>
    </tr>";
    $new_sn=$sn;
  }
  $new_sn++;
  $main.="</table>
  <p><a href='{$_SERVER['PHP_SELF']}?sn=$new_sn'>新增報名</a></p>";
  return $main;
}


//列出單一報名表
function add_form($the_sn=""){
  $sql="select * from my_data where sn='$the_sn'";
  $result=mysql_query($sql) or die($sql);
  list($sn,$name,$sex,$note)=mysql_fetch_row($result);
  if(empty($sn)){
        $sql="insert into my_data (sn) values($the_sn)";
        mysql_query($sql);
    } 

  $main="
  <script src='jquery-1.4.2.min.js' type='text/javascript'></script>
    <script src='jquery.jeditable.js' type='text/javascript'></script>
    <script type='text/javascript'>
    $(document).ready(function() {
      $('.name').editable('save.php
', {
          indicator : '<img src=\"indicator.gif\">儲存中...',
          type   : 'text',
          width: '100px',
          height: '30px',

          submitdata:{'sn':$the_sn},
          placeholder : '請點選此處輸入姓名',
          onblur:'submit'
,
          event: 'dblclick'

        });
       
      $('.sex').editable('save.php', {
          indicator : '<img src=\"indicator.gif\">儲存中...',
          type   : 'select',
          data   : \" {'男生':'男生' , '女生':'女生'}\",

         submitdata:{'sn':$the_sn},
          placeholder : '請點選此處設定性別'
,
          onblur:'submit'

        });
       
      $('.note').editable('save.php
', {
          indicator : '<img src=\"indicator.gif\">儲存中...',
          type   : 'textarea',
          cols: 20,
          rows: 5,

          submitdata:{'sn':$the_sn},
          placeholder : '請點選此處輸入您的意見'
,
          onblur:'submit'
,
          event: 'mouseover'

        });
    });
    </script>

  <h1>點選編輯範例</h1>
  <table id='mytable'>
    <tr><th>姓名</th><td><div class='name' id='name'>$name</div></td></tr>
    <tr><th>性別</th><td><div class='sex' id='sex'>$sex</div></td></tr>
    <tr><th>備註</th><td><div class='note' id='notestyle='white-space:pre-wrap;'>$note</div></td></tr>
  </table>
  <p><a href='{$_SERVER['PHP_SELF']}'>回到列表</a></p>
  ";
  return $main;
}
?>
 

[991]PHP網站開發 進階應用技巧2

15-2 save.php

<?php
$root_pass="";    //資料庫root密碼
$db_name="test";  //資料庫名稱

/* 連資料庫檢查 */
$link=mysql_connect("localhost","root",$root_pass);  //資料庫連線
mysql_select_db("test");
mysql_query("SET NAMES 'utf8'");  //設定語系
error_reporting(0);

$sql="update my_data set `{$_POST['id']}`='{$_POST['value']}' where sn='{$_POST['sn']}'";
mysql_query($sql);
echo
$_POST['value'];
?>
 

[991]PHP網站開發 進階應用技巧2

16. curl網頁採集

一、何謂curl

1.curl是一個利用URL語法在命令行方式下工作的文件傳輸工具。curl是 一個利用URL語法在命令行方式下工作的文件傳輸工具。
2.它支持很多協議:FTP、FTPS、HTTP、HTTPS、GOPHER、TELNET、DICT、FILE 以及 LDAP、HTTPS認證,HTTP POST方法、HTTP PUT方法、FTP上傳、kerberos認證、HTTP上傳、代理服務器、cookies、用戶名/密碼認證、下載文件斷點續傳、上載文件斷點續傳、http代理服務器管道、IPv6、 socks5代理服務器,通過http代理服務器上傳文件到FTP服務器等等。

二、使用curl

1.開啟php.ini,將「extension=php_curl.dll」前的分號移除。
2.把xampp\php\ssleay32.dll 及 libeay32.dll 複製到 Windows\system32 下
3.把xampp\php\extensionsphp_curl.dll 複製到 Windows\system32 下
4.重新啟動apache

三、curl基本用法

<?php
$url = "http://www.mobile01.com/";
$ch = curl_init();
$options[CURLOPT_URL]=$url;
$options[CURLOPT_HEADER]=false;
$options[CURLOPT_RETURNTRANSFER]=true;
$options[CURLOPT_USERAGENT]="Googlebot/2.1";
$options[CURLOPT_FOLLOWLOCATION]=true;

curl_setopt_array($ch, $options);
$output = curl_exec($ch);
curl_close($ch);
echo $output;
?>

常用的參數項目

CURLOPT_URL
需要獲取的URL地址,也可以在PHP的curl_init()函數中設置。
CURLOPT_HEADER
是否截取header的資訊
CURLOPT_RETURNTRANSFER
將結果回傳成字串
CURLOPT_USERAGENT
偽裝成何種瀏覽器
CURLOPT_FOLLOWLOCATION
是否抓取轉址

1.函數說明:
(1) curl_init():建立連線,curl_close($ch):關閉連線
(2) curl_setopt_array($ch , $opt_arr):以陣列設定curl連線參數
(3) curl_exec($ch):執行curl連線

2.若是裡頭有相對路徑,可加個:echo "<base href='$url' />";

四、擷取部份內容

1.正規表達式工具:http://osteele.com/tools/rework/
2.preg_match("/規則/s", "原文", $結果);
3.preg_match_all("規則/m", "原文", $結果);
4.規則的寫法如:「前條件(.*)後條件」
(1) $結果[1] 才是我們要的東西。
(2) 規則中,若有特殊符號,如:[ , ] , ( , ) , " , ' , \ 等,都需要加上「\」
(3) s 代表不管是什麼死人骨頭都當作搜尋結果,i則是不分大小寫,m是多行比對。
(4) 「.*」代表不限字數的任何東西,()裡的東西就是我們要找的結果。
$start="newtopics\[.*\] = \'";
$end="\';";
preg_match_all("/{$start}(.*){$end}/m", $output, $match);


五、lytebox燈箱效果

<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
1.在連結中加入「rel='lyteframe' rev='width: 寬px; height: 高px; scrolling: auto」

[991]PHP網站開發 進階應用技巧2

16-1 index.php

<?php
$url = "http://www.mobile01.com/";
$ch = curl_init();
$options[CURLOPT_URL]=$url;
$options[CURLOPT_HEADER]=false;
$options[CURLOPT_RETURNTRANSFER]=true;
$options[CURLOPT_USERAGENT]="Googlebot/2.1";
$options[CURLOPT_FOLLOWLOCATION]=true;

curl_setopt_array($ch, $options);
$output = curl_exec($ch);
curl_close($ch);
//echo "<base href='$url'>";
//echo $output;

preg_match_all("/newtopics\[.*\] = \'(.*)';/m", $output, $match);
$main="<table>\n";
foreach($match[1] as $link){
    $list=str_replace("topicdetail.php","{$url}topicdetail.php",$link);   
    $list=str_replace('" title="','" rel="lyteframe" rev="width: 1000px; height: 400px; scrolling: auto" title="',$list);
    preg_match("/title=\"(.*)\"/", $link, $title);
    $main.= "<tr><th>{$title[1]}</th><td>$list</td></tr>\n";
}
$main.="</table>";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel='stylesheet' href='style.css' type='text/css' />
  <title></title>
  <script type="text/javascript" language="javascript" src="lytebox.js"></script>
  <link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
  </head>
  <body>
  <div id="news">
  <?php echo $main; ?>
  </div>
  </body>
</html>
 

[991]PHP網站開發 進階應用技巧2

16-2 test1.php

<?php
$output="這是[p]中文[/p]字";
preg_match("/\[p\](.*)\[\/p\]/s", $output, $match);
echo $match[1];
?>
 

[991]PHP網站開發 進階應用技巧2

17. 讀取RSS

一、SimplePie 基本語法(http://simplepie.org)

下載simple.inc 1.3 版

<?php
require_once 'simplepie.inc';
$feed = new SimplePie('RSS網址','快取目錄',快取時間);
$feed->init();
$feed->handle_content_type();
echo $feed->get_title()."<br>";
foreach ($feed->get_items(0, 15) as $item){
  $title=$item->get_title();
  echo $title."<br>";
}
?>

1.完整API文件:http://simplepie.org/wiki/reference/start

二、SimplePie 常用的設定類API

1.set_feed_url(RSS網址):設定RSS feed
2.enable_cache(true):開啟或關閉cache機制(預設為true)
3.enable_order_by_date(true) :是否以日期排序來抓出內容
4.set_cache_duration(3600):設定快取時間,以秒為單位
5.set_cache_location('./cache'):設定快取目錄,可設$_SERVER['TMP']
6.set_item_limit(0):在多個feed下,設定每個feed要抓回的項目數量
7.strip_attributes($屬性陣列):要過濾掉的HTML標籤屬性陣列
8.strip_comments(false) :過濾掉HTML註解
9.strip_htmltags($標籤陣列):要過濾掉的HTML標籤陣列

三、SimplePie 執行API

1.error():傳回錯誤訊息
2.handle_content_type():設定適當地HTTP檔頭及編碼
3.init():feed初始化並解析之

四、取得feed基本資料

1.get_copyright() :取得feed版權資訊
2.get_description() :取得說明
3.get_encoding() :取得編碼
4.get_favicon():取得網址圖示
5.get_item():取得單一項目
6.get_items():取得所有項目
7.get_item_quantity():取得feed 項目的總數量
8.get_language() :取得feed 項目的語言
9.get_link():取得連結
10.get_links():取得所有連結
11.get_permalink():取得第一個feed的連結
12.get_title() :取得feed 標題
13.get_type() :取得feed 類型(傳回值需再判斷)

五、常用的feed的logo資料

1.get_image_height():取得logo圖片的高度
2.get_image_link():取得logo圖片的連結
3.get_image_title():取得logo圖片的標題
4.get_image_url():取得logo圖片的網址
5.get_image_width():取得logo圖片的寬度

六、取得item基本資料

1.get_author():取得文章的單一作者
2.get_authors():取得文章的所有作者
3.get_categories():取得文章的所有分類
4.get_category():取得文章的單一分類
5.get_content():取得文章的全文
6.get_contributor():取得文章的貢獻者
7.get_contributors():取得文章的所有貢獻者
8.get_copyright() :取得文章的版權資訊
9.get_date(日期格式):取得文章的日期
10.get_description():取得文章的摘要
11.get_enclosure():取得文章的附件
12.get_enclosures():取得文章的所有附件
13.get_feed():取得文章的所屬feed(多feed常用)
14.get_id():取得文章的id
15.get_link():取得文章的連結
16.get_links():取得文章的所有連結
17.get_local_date() :取得文章的當地時間
18.get_permalink():取得文章的主要連結
19.get_title():取得文章的標題

七、取得author基本資料(需配合$item->get_author())

1.get_email():取得作者的Email
2.get_link():取得作者的連結
3.get_name():取得作者的姓名

[991]PHP網站開發 進階應用技巧2

17-1 index.php

<?php
require_once "simplepie.inc";
$rss_url[] = 'http://www.mobile01.com/rss/newtopics.xml';
$rss_url[] = 'http://tw.news.yahoo.com/rss/realtime';
$rss_url[] = 'http://udn.com/udnrss/BREAKINGNEWS1.xml';


$feed = new SimplePie();

$feed->set_feed_url($rss_url);

$feed->init();
$feed->handle_content_type();
$feed->set_item_limit(10);

$web_title= $feed->get_title();
$web_link= $feed->get_link();
$items= $feed->get_items(0,10);

foreach ($items as $item){
  $web_title=$item->get_feed()->get_title();
  $web_link=$item->get_feed()->get_link();

  $title=$item->get_title();
  $url=$item->get_link();
  $date=$item->get_date("Y-m-d H:i:s");
  $desc=$item->get_description();
  $all_title.="<li>[<a href='$web_link'>$web_title</a>] <b><a href='$url'  style='color:#202020;text-decoration:none;'>$title</a></b>
    <span style='color:#0099ff;font-size:12px;'>({
$date})</span>
    <div style='color:gray;font-size:12px;margin-bottom:6px;'>
$desc</div></li>";
}

$main="
<div align='center'>
    <h1>$web_title</h1>
    <a href='$web_link'>$web_link</a>
</div>
<ol>
$all_title
</ol>
";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel='stylesheet' href='style.css' type='text/css' />
  <title></title>
  <script type="text/javascript" language="javascript" src="lytebox.js"></script>
  <link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
  </head>
  <body>
  <div id='news' style='width:500px;'>
  <?php echo $main; ?>
  </div>
  </body>
</html>
 

[991]PHP網站開發 進階應用技巧2

18. 無刷新登入

一、用post傳值

  $(document).ready(function(){
    $.post("login.php", function(msg) {
      $("#loginDiv").html(msg);
    });
  });

1.msg為函數傳回值
2.需要一個<div id='loginDiv'></div>
3.$.post()是用post方式傳遞到指定檔案。
4.html()則是替換某元素的內容。

二、login.php內容

<form onsubmit='return false'>
  <table>
    <tr><td>帳號:</td><td><input type='text' id='user_id' size=10></td></tr>
    <tr><td>密碼:</td><td><input type='password' id='passwd' size=10></td></tr>
    <tr><td align='center'>
      <input type='submit' value='登入' onclick='logMein();'>
    </td></tr>
  </table>
</form>

三、logMein()登入

  function logMein() {
    var username = $("#user_id").val();
    var password = $("#passwd").val();
    $.post("login.php", { username: username, password: password }, function(msg) {
      $("#loginDiv").html(msg);
    });
  }

四、login.php登入判斷

$id="admin";
$pass="12345";
if($_POST['username']==$id and $_POST['password']==$pass){
  $_SESSION['login']=true;
  echo "已登入 [<input type='submit' value='登出' onclick='logMeout();'>]";
}else{
  echo  "帳號密碼錯誤,請重新輸入。";
}

五、logMeout()登出

  function logMeout() {
    $.post("login.php", { op: 'logout' }, function(msg) {
      $("#loginDiv").html(msg);
    });
  }

六、login.php登出判斷

if($_POST['op']=='logout'){
  $_SESSION['login']='';
}

[991]PHP網站開發 進階應用技巧2

18-1 index.php

<?php
session_start();
if($_SESSION['login']==true){
    $main="已登入 [<input type='submit' value='登出' onClick=\"location.href='login.php?op=logout'\">]";
}else{
    $main="<form action='login.php' method='post'>
                  <table>
                    <tr><td>帳號:</td><td><input type='text' name='user_id'></td></tr>
                    <tr><td>密碼:</td><td><input type='text' name='passwd'></td></tr>
                    <tr><td align='center'>
                      <input type='submit' value='登入'>
                    </td></tr>
                  </table>
                </form>";
}
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <script type='text/javascript' src='jquery-1.4.2.min.js'></script>
  </head>
  <body>
    <table style='width:600px;margin:10px auto;'>
      <tr><td>
        <video controls preload autoplay poster="http://tad0616.net/ck2.png" width="300">
          <source src="http://tad0616.net/ck2.ogv" type="video/ogg">
          <source src="http://tad0616.net/ck2.mp4" type="video/mp4">
          您的瀏覽器太古董了...不支援 HTML 5 最新技術...建議使用FireFox或Google瀏覽器。
        </video>
      </td><td valign='top'>
        <?php echo $main; ?>
      </td></tr>
    </table>
  </body>
</html>
 

[991]PHP網站開發 進階應用技巧2

18-2 login.php

<?php
session_start();
$id="admin";
$pass="12345";

$tool="已登入 [<input type='submit' value='登出'>]
<p><a href='index.php'>重新播放</a></p>";

$form="
<form>
  <table>
    <tr><td>帳號:</td><td></td></tr>
    <tr><td>密碼:</td><td></td></tr>
    <tr><td align='center'>
      <input type='submit' value='登入'>
    </td></tr>
  </table>
</form>";

if($_GET['op']=='logout'){
    $_SESSION['login']=false;
}else{
    if($_POST['user_id']==$id and $_POST['passwd']==$pass){
        $_SESSION['login']=true;
    }else{
        $_SESSION['login']=false;
    }

}

header("location:index.php");

?>
 

[991]PHP網站開發 進階應用技巧2

18-3 index.php(AJAX版)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <script type='text/javascript' src='jquery-1.4.2.min.js'></script>
  <script>
      $(document).ready(function(){
            $.post("login.php",function(msg){
                    $('#loginDiv').html(msg);
            });       
        });

       
        function logMein(){
            var id=$('#user_id').val();
            var pass=$('#pass').val();
            $.post("login.php",{username: id , password: pass},function(msg){
                    $('#loginDiv').html(msg);
            });   
        }

       
        function logMeout(){
            $.post("login.php",{op: 'logout'},function(msg){
                    $('#loginDiv').html(msg);
            });   
        }

  </script>

  </head>
  <body>
    <table style='width:600px;margin:10px auto;'>
      <tr><td>
        <video controls preload autoplay poster="http://tad0616.net/ck2.png" width="300">
          <source src="http://tad0616.net/ck2.ogv" type="video/ogg">
          <source src="http://tad0616.net/ck2.mp4" type="video/mp4">
          您的瀏覽器太古董了...不支援 HTML 5 最新技術...建議使用FireFox或Google瀏覽器。
        </video>
      </td><td valign='top'>
                <div id='loginDiv'></div>
      </td></tr>
    </table>
  </body>
</html>
 

[991]PHP網站開發 進階應用技巧2

18-4 login.php(AJAX版)

<?php
session_start();
$id="admin";
$pass="12345";

$tool="已登入 [<input type='submit' value='登出' onClick='logMeout();'>]
<p><a href='index.php'>重新播放</a></p>";

$form="
<form onsubmit='return false'>
  <table>
    <tr><td>帳號:</td><td><input type='text' id='user_id'></td></tr>
    <tr><td>密碼:</td><td><input type='text' id='pass'></td></tr>
    <tr><td align='center'>
      <input type='submit' value='登入' onClick='logMein();'>
    </td></tr>
  </table>
</form>";


if($_SESSION['login']){
    if($_POST['op']=='logout'){
        $_SESSION['login']=false;
        echo $form;
    }else{
        echo $tool;
    }

}else{

    if($_POST['username']==$id and $_POST['password']==$pass){
        $_SESSION['login']=true;
        echo $tool;
    }else{
        $_SESSION['login']=false;
        echo $_POST['username'].$_POST['password'].$form;
    }
}


?>