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

1. 簡易jquery應用

一、套用jquery

1.方法有二,一般法(離線意可用,但得自行更新版本):
(1) 先到 http://jquery.com/ 下載jquery-1.3.2.min.js
(2) 然後再網頁或程式中引入該檔案即可
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
2.直接連線法(需連線才能用,方便,可隨意切換版本):
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1.3.2"); </script>

二、jquery基本用法

1.基本概念:什麼元件在什麼時候要做什麼事。
<script type="text/javascript">
  $(document).ready(function(){
    //jquery語法
  });
</script>
2.$() 就是用來指定元件的挑選器(什麼元件), $(document) 或$()代表此網頁。
(1) 指定標籤:$("button")    →抓到的是→ <button>
(2) 指定id:$("#aa")→抓到的是→ id="aa"
(3) 指定class:$(".bb")→抓到的是→ class="bb"
3.ready()是事件,事件中通常會執行某函數,因為函數大多只用一次,所以,通常直接在()中寫 function(){} 即可,不另外命名,稱之為匿名函數(或lambda函數)
4.完整事件或功能建議參考: http://visualjquery.com/

三、jquery事件(event)用法

1.基本概念:什麼元件在什麼時候要做什麼事,底下以一些常用的事件為例。
(1) click():點按時
(2) change():值改變時
2.完整的事件: http://webdesign.piipo.com/jquery/jquery_events

四、jquery效果(Effects)

1.基本概念:什麼元件在什麼時候要做什麼事,底下以一些常用的事件為例。
(1) 隱藏:$("#tbl").hide();
(2) 顯示:$("#tbl").show();
(3) 滑下:$("#tbl").slideDown("slow");
(4) 滑上:$("#tbl").slideUp("slow");
(5) 隱出:$("#tel").fadeOut("slow");
(6) 隱入:$("#tel").fadeIn("slow");
(7) 加上CSS:$("#tbl").css("border","1px solid black");
(8) 套用class:$("body").addClass("girl");
(9) 移除class:$("body").removeClass();
(10) 加到裡面:$("#box").append("<b>嗨!</b>");
(11) 取值:$("input[name=my_name]").val();

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

1-1 index.html

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>jquery測試</title>

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

<script>
$(document).ready(function(){
  $("#tbl").hide();
 
  $("#box").click(function(){
    $("#tbl").slideDown("slow").css("border","1px solid blue").css("width","250px");
  });
 
  $("button").click(function(){
    $("#tbl").fadeOut("slow");
  });

  $("#sex_b").click(function(){
    $("body").removeClass().addClass("boy");
  });

  $("#sex_g").click(function(){
    $("body").removeClass().addClass("girl");
  });

  $("input[name=my_name]").change(function(){

    $("#box").prepend("嗨!" + $("input[name=my_name]").val()).css("color","red");
  });

});

</script>

<style>
.boy{
  background-image:url(boy.jpg);
  background-position:right top;
  background-repeat:no-repeat;
}

.girl{
  background-image:url(girl.jpg);
  background-position:right top;
  background-repeat:no-repeat;
}

</style>


  </head>
  <body>

  <div id="box">點我填寫功能表</div>
   
  <table id="tbl">
    <tr>
        <th>姓名</th>
        <td><input type="text" name="my_name"></td>
    </tr>

    <tr>
        <th>性別</th>
        <td>
            <input type="radio" name="sex" value="男" id="sex_b">男
            <input type="radio" name="sex" value="女" id="sex_g">女
        </td>
    </tr>
   
    <tr id="tel">
        <th>電話</th>
        <td><input type="text" name="my_tel" value="留個電話吧~"></td>
    </tr>
   
    <tr>
        <td colspan=2><button>關閉</button></td>
    </tr>
    </table>

  </body>
</html>

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

2. jquery六大工具(上)

一、jquery六大工具包

1.官方網站:http://flowplayer.org/tools/
2.底下所有程式都需要加入這幾行:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.tools.min.js"></script>

二、Tabs標籤包

1.基本架構:


放在<head>中


<script type="text/javascript">
  $(function() {
    $("ul.tabs").tabs("div.tabs_content > div");
  });
</script>
<link rel='stylesheet' type='text/css' href='tabs/tabs.css' />


放在<body>中


<!-- 頁籤 -->
<ul class="tabs">
  <li><a href="#">Tabs 標籤包</a></li>
  <li><a href="#">ToolTip 提示包</a></li>
</ul>
<!-- 頁籤對應的內容 -->
<div class="tabs_content">
  <div>這是「Tabs 標籤包」要呈現的內容</div>
  <div>這是「ToolTip 提示包」要呈現的內容</div>
</div>


2.用 .history() 可以紀錄點選標籤的順序。
3.加入 {event: 'click'} 可指定頁籤牽換方式,如:dblclick、mouseover
4.內建特效包括:default、fade、slide、ajax 及 horizontal
$("ul.tabs").tabs("div.tabs_content > div", {effect: 'slide'});
$("ul.tabs").tabs("div.tabs_content > div", {effect: 'fade',fadeInSpeed: '100'});

 

三、ToolTip提示包


放在<head>中


<script type="text/javascript">

<script type="text/javascript">
  $(function() {
    $("img[title]").tooltip('#demotip');
  });
</script>
<style>
#demotip {
  display:none;
  border:1px solid black;
  font-size:12px;
  padding:10px;
  color:#FFFFFF;
  rgb(102,204,204);
}
</style>


放在<body>中


<div id="demotip">&nbsp;</div>
<img src="圖檔" title="這裡就是放說明的地方">

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

2-1 tabs範例

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>jquery測試</title>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery.tools.min.js"></script>
    <link rel="stylesheet" type="text/css" href="tabs.css">

    <script type="text/javascript">
    $(function(){
        $("ul.tabs").tabs("div.tabs_content > div");
    });
    </script>

    <style>
    /* tab pane styling */
    div.tabs_content div {
    display:none;
    padding:15px 10px;
    border:1px solid #999;
    border-top:0;
    font-size:12px;
    background-color:#A9FEFF;
    width:600px;
    height:200px;
    line-height:200%;
    }
    </style>
  </head>
  <body>

    <ul class="tabs">
    <LI><a href="#">標籤一</a></LI>
    <LI><a href="#">標籤二</a></LI>
    <LI><a href="#">標籤三</a></LI>
    </ul>
   
    <div class="tabs_content">
    <div>
    <IMG src="images/mspaint.png" width="128" height="128" align="right" border="0">資安業者近幾日發現,有許多駭客謊稱信件為快遞公司,發送特別的主旨郵件到民眾信箱中,許多人因此沒有戒心,打開來後才發現自己被植入了木馬病毒。除了郵件,駭客也會在社群網站中利用煽動性的標題,引誘網友點入有惡意程式的連結,呼籲民眾上網時要多加注意。<br>
    最近有許多民眾在收信時,發現有一則由快遞公司發出的警告信件,告知收件人的信件沒辦法寄送等訊息,民眾心急下將附件打開後,電腦就會遭到駭客病毒給入侵。
    </div>
    <div>222</div>
    <div>333</div>
    </div>


  </body>
</html>

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

2-2 tabs AJAX範例

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>jquery測試</title>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery.tools.min.js"></script>
    <link rel="stylesheet" type="text/css" href="tabs.css">

    <script type="text/javascript">
    $(function(){
        $("ul.tabs").tabs("div.tabs_content > div",{effect:"ajax"});
    });
    </script>

    <style>
    /* tab pane styling */
    div.tabs_content div {
    display:none;
    padding:15px 10px;
    border:1px solid #999;
    border-top:0;
    font-size:12px;
    background-color:#A9FEFF;
    width:600px;
    height:200px;
    line-height:200%;
    }
    </style>
  </head>
  <body>

    <ul class="tabs">
    <LI><a href="tab1.html">標籤一</a></LI>
    <LI><a href="tab2.html">標籤二</a></LI>
    <LI><a href="tab3.html">標籤三</a></LI>
    </ul>
   
    <div class="tabs_content">
        <div style="display:block;"></div>
    </div>


  </body>
</html>

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

2-3 垂直選單

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>jquery測試</title>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery.tools.min.js"></script>
    <link rel="stylesheet" type="text/css" href="tabs-accordion.css">

    <script type="text/javascript">
    $(function(){
        $("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide'});
    });
    </script>
  </head>
  <body>
    <div id="accordion">
        <h2>關於這個特效</h2>
        <div class="pane">111</div>

        <h2>修改id名稱</h2>
        <div class="pane">222</div>

        <h2>修改外觀</h2>
        <div class="pane">333</div>

    </div>

  </body>
</html>

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

2-4 水平選單

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>jquery測試</title>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery.tools.min.js"></script>
    <link rel="stylesheet" type="text/css" href="tabs-accordion-horizontal.css">

    <script type="text/javascript">
    $(function(){
        $("#accordion").tabs("#accordion div", {tabs: 'img', effect: 'horizontal'});
    });
    </script>
  </head>
  <body>
    <div id="accordion">
       <IMG src="images/iTunes.png">
        <div style="width:200px; display:block;">
        <p>移出xoops_data跟xoops_lib重新執行install頁面後,在進入管理頁面時出現HTTP 404找不到http://網址/admin.php麻煩各位了</p>
        </div>

        <IMG src="images/Movie Maker.png">        <div><p>移出xoops_data跟xoops_lib重新執行install頁面後,在進入管理頁面時出現HTTP 404找不到http://網址/admin.php麻煩各位了</p></div>
       
        <IMG src="images/mspaint.png">
        <div><p>移出xoops_data跟xoops_lib重新執行install頁面後,在進入管理頁面時出現HTTP 404找不到http://網址/admin.php麻煩各位了</p></div>
       
    </div>

  </body>
</html>

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

3. jquery六大工具(下)

一、OverLay燈箱基本用法

1.先準備好大圖、小圖,分別放到photos、thumbs,並在<head>中加入以下語法:
//引入jquery.js及 jquery.tools.min.js
<script>
    $(document).ready(function() {
        $("img[rel]").overlay();
    });
</script>
<link rel="stylesheet" type="text/css" href="overlay-basic.css"/>
<style>
    .details {文字內容樣式...略...}
    .details h3 {標題內容樣式...略...}
</style>


2.在<body>中加入以下語法,說明不見得需要。
<img src="thumbs/pic1.jpg" rel="#pic1"/>
<div class="simple_overlay" id="pic1">
    <img src="photos/pic1.jpg" />
    <div class="details">
        <h3>這裡是大標題</h3>
        <h4>這裡是中標題</h4>
        <p>這裡是內容,但我懶得寫...</p>
    </div>
</div>


3.<div>中的class="simple_overlay"不可改,除非要跟著改CSS。
4.CSS中的.simple_overlay寬度設定,視需求調整。

 

二、LyteBox燈箱(http://www.dolem.com/lytebox)用法

1.一樣準備好大圖、小圖,並在<head>中加入以下語法:
<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

2.視需求,在<body>中加入以下語法:
單張呈現:<a href="大圖" rel="lytebox" title="說明">小圖或文字</a>
群組呈現:<a href="大圖" rel="lytebox[群組]" title="說明">小圖或文字</a>
自動播放:<a href="大圖" rel="lyteshow[群組]" title="說明">小圖或文字</a>
嵌入網頁:<a href="網頁" rel="lyteframe[群組]" title="說明">小圖或文字</a>

 

三、scrollable 捲軸基本用法

1.先準備好大圖、小圖,分別放到photos、thumbs,並在<head>中加入以下語法:
//引入jquery.js及 jquery.tools.min.js
<script>
    $(function() {
        $("div.scrollable").scrollable({size: 1}).mousewheel();
    });
</script>
<link rel="stylesheet" type="text/css" href="scrollable-horizontal.css" />
<link rel="stylesheet" type="text/css" href="scrollable-buttons.css" />

2.在<body>中加入以下語法,說明不見得需要。
<a class="prevPage browse left"></a>
<div class="scrollable">
    <div class="items">圖片區</div>
</div>
<a class="nextPage browse right"></a>
<br clear="all" />

3.寬度修改CSS中的scrollable寬度,寬度=(縮圖寬度*張數+間距*(張數+1))。

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

4. 即時新增表單欄位

一、安裝xampp

1.Linux版:http://www.apachefriends.org/zh_tw/xampp-linux.html

(1) 下載並存到家目錄/home/user
(2) 「應用程式→附屬應用程式→終端機」,在終端機中執行以下指令,以管理員身份將xampp-linux-1.7.2.tar.gz解壓縮到/opt
sudo tar xvfz ~/xampp-linux-1.7.2.tar.gz -C /opt
(3) 啟動lampp:「sudo /opt/lampp/lampp start」
(4) 第一次需進行安全設定:sudo /opt/lampp/lampp security(除了第四項「設定MySQL的root密碼」輸入yes以外,其餘的都填no即可)

(5) Linux網頁目錄:「/opt/lampp/htdocs」,可用「sudo chown -R user:user /opt/lampp/htdocs」讓user帳號可以讀取寫入該目錄。

2.Windows版:http://www.apachefriends.org/zh_tw/xampp-windows.html

(1) 下載xampplite-win32-1.7.2.exe,點兩下解壓縮到C:或者D:
(2) 點選xampp-control.exe,並依序啟動Apache和MySQL
(3) 輸入「http://localhost」並選擇「中文→安全」設定MySQL密碼。
(4) Windows網頁目錄:「D:/xampplite/htdocs」

二、即時生出表單

1.HTML部份:<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>
    $(document).ready(function(){
        var i=1;
        $('#add').click(function(){
            $('#input').clone().attr('id', 'input'+i).insertBefore('#add_tr');
            i++;
        });
    });
</script>

2.表單部份:
<tr id='input'>
    <td><input type='text' name='name[]' value='' size=10></td>
    <td><input type='text' name='tel[]' value=''></td>
</tr>
<tr id='add_tr'>
    <td>
    <input type='hidden' name='op' value='save'> <input type='submit' value='儲存'>
    <input type='button' id='add' value='新增'>
    </td>
</tr>

3.儲存部份:
function save_tel(){
  global $db_name;
  foreach($_POST['name'] as $i=>$name){
    if(empty($name))continue;
    $sql="insert into `telbook` (`name`,`tel`) values('{$name}','{$_POST['tel'][$i]}')";
    mysql_db_query($db_name,$sql) or die($sql);
  }
}

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

4-1 telbook.php

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

/*----------------------------------*/
$link=mysql_connect("localhost","root",$root_pass);  //資料庫連線
mysql_query("SET NAMES 'utf8'");  //設定語系
mysql_select_db('test');
$op=(empty($_REQUEST['op']))?"":$_REQUEST['op'];
if($op=="save"){  //進行動作判斷
  save_tel(); //儲存電話
  header("location:{$_SERVER['PHP_SELF']}");  //存完,轉向
}else{
    $form=input_form(); //呼叫「輸入界面」函數
     $show_tel=show_tel(); //呼叫「顯示電話簿」函數
    $main=$form.$show_tel;  //將兩者結合起來成為一個變數
}
?>

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>我的電話簿</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

<script>
$(document).ready(function(){
    var i=1;
    $('#add').click(function(){
        $('#input').clone().attr('id','input'+i).insertBefore('#add_tr');
        i++;
    });
});
</script>

  </head>
  <body>
    <?php
        echo $main;
    ?>
  </body>
</html>



<?php


//輸入界面函數
function input_form(){
    $form="
    <form action='{$_SERVER['PHP_SELF']}' method='post'>
        <table>
            <tr>
                <th>姓名</th>
                <th>電話</th>
            </tr>
            <tr id='input'>
                <td><input type='text' name='name[]' value='' size=10></td>
                <td><input type='text' name='tel[]' value=''></td>
            </tr>
            <tr id='add_tr'>
        <td>
                    <input type='hidden' name='op' value='save'>
                    <input type='submit' value='儲存'>
                    <input type='button' value='新增' id='add'>
                </td>
            </tr>
        </table>
    </form>
    ";
    return $form;
}

//顯示電話簿函數
function show_tel(){
    global $db_name;
    $show_tel="<h3>電話簿列表</h3>";
    $sql="select `sn`,`name`,`tel` from `telbook`";
    $result=mysql_query($sql) or die($sql);
    while(list($sn,$name,$tel)=mysql_fetch_row($result)){
      $show_tel.="<div>{$name}:{$tel}</div>";
    }
    return $show_tel;
}

//儲存電話簿函數
function save_tel(){
    global $db_name;
    foreach($_POST['name'] as $i=>$name){
        $sql="insert into `telbook` (`name`,`tel`) values('{$name}','{$_POST['tel'][$i]}')";
        mysql_query($sql) or die($sql);
    }
   
}
?>

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

4-2 電話簿+垂直捲軸

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

/*----------------------------------*/
$link=mysql_connect("localhost","root",$root_pass);  //資料庫連線
mysql_query("SET NAMES 'utf8'");  //設定語系
mysql_select_db('test');
$op=(empty($_REQUEST['op']))?"":$_REQUEST['op'];
if($op=="save"){  //進行動作判斷
  save_tel(); //儲存電話
  header("location:{$_SERVER['PHP_SELF']}");  //存完,轉向
}else{
    $form=input_form(); //呼叫「輸入界面」函數
     $show_tel=show_tel(); //呼叫「顯示電話簿」函數
    $main=$form.$show_tel;  //將兩者結合起來成為一個變數
}
?>

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>我的電話簿</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css" href="scrollable-vertical.css" />


<script>
$(document).ready(function(){
    var i=1;
    $('#add').click(function(){
        $('#input').clone().attr('id','input'+i).insertBefore('#add_tr');
        i++;
    });

    $("div.scrollable").scrollable({vertical:true,size: 4}).circular().mousewheel().autoscroll({ steps: 2, interval: 3000});
});
</script>

  </head>
  <body>
    <?php
        echo $main;
    ?>
  </body>
</html>



<?php


//輸入界面函數
function input_form(){
    $form="
    <form action='{$_SERVER['PHP_SELF']}' method='post'>
        <table>
            <tbody id='input'>
                <tr>
                    <th>姓名</th>
                    <th>電話</th>
                </tr>
                <tr>
                    <td><input type='text' name='name[]' value='' size=10></td>
                    <td><input type='text' name='tel[]' value=''></td>
                </tr>
                <tr>
                    <td colspan=2><textarea cols=30>填入備註</textarea></td>
                </tr>
            </tbody>
            <tbody id='add_tr'>
            <tr>
        <td>
                    <input type='hidden' name='op' value='save'>
                    <input type='submit' value='儲存'>
                    <input type='button' value='新增' id='add'>
                </td>
            </tr>
        </tbody>
        </table>
    </form>
    ";
    return $form;
}

//顯示電話簿函數
function show_tel(){
    global $db_name;
    $show_tel="<h3>電話簿列表</h3>
    <!-- 左邊按鈕 -->
    <div id='actions'>
        <a class='prevPage'>&laquo; 上一頁</a>
        <a class='nextPage'>下一頁 &raquo;</a>
    </div>

    <!-- 捲軸區塊 -->
    <div class='scrollable vertical'>

        <!-- 項目區 -->
        <div class='items'>
";


    $sql="select `sn`,`name`,`tel` from `telbook`";
    $result=mysql_query($sql) or die($sql);
    while(list($sn,$name,$tel)=mysql_fetch_row($result)){
      $show_tel.="<div>{$name}:{$tel}</div>";
    }

    $show_tel.="</div>
    </div>

    <!-- 右邊按鈕 -->
    <a class='nextPage browse right'></a>";   

    return $show_tel;
}

//儲存電話簿函數
function save_tel(){
    global $db_name;
    foreach($_POST['name'] as $i=>$name){
        $sql="insert into `telbook` (`name`,`tel`) values('{$name}','{$_POST['tel'][$i]}')";
        mysql_query($sql) or die($sql);
    }
   
}
?>

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

5. 表單驗證

一、利用jqoery的formValidator進行表單驗證

官方網站:http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

<link rel="stylesheet" href="formValidator/css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="formValidator/css/template.css" type="text/css" media="screen" title="no title" charset="utf-8" />

<script src="formValidator/js/jquery.js" type="text/javascript"></script>
<script src="formValidator/js/jquery.validationEngine-tw.js" type="text/javascript"></script>
<script src="formValidator/js/jquery.validationEngine.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#myform").validationEngine({
        inlineValidation: true,
        success :  false,
        failure : function() {}
    });
});
</script>

    (1) 提示的位置:「promptPosition: "topRight", 」選項有:topLeft, topRight, bottomLeft,  centerRight, bottomRight

    (2) 是否邊輸入邊檢查:「inlineValidation: true,」

2.表單要做的變化:記得在<form>中加入id="myform",要對應上面的$("#myform")。

3.在欄位中加入參數:<input name="id" type="text" id="id" class="validate [required , custom[onlyLetter] , length[0,10]]">

    (1) optional:非必填,當有填入值才會觸發驗證機制

    (2) required:必填欄位用

    (3) custom[]:自訂驗證

        a.onlyNumber : 只能填數字

        b.noSpecialCaracters :禁止填入特殊符號

        c.onlyLetter : 只能填入大小寫英文字

        d.telephone : 驗證電話號碼規則

        e.email :  驗證email 規則

        f.date : 日期格式驗證,格式一律為YYYY-MM-DD

    (4) length[0,20]:只允許~20個字元之間

    (5) maxCheckbox[5]:最多可核選5個

    (6) minCheckbox[2]:最多可核選2個

    (7) confirm[欄位名稱]:和另一個欄位進行比對(常用於密碼)

4.單選鈕的寫法:<input name="sex" type="radio" value="男" class="validate[required] radio">

5.複選鈕的寫法:<input name="hobby" type="checkbox" id="hobby" value="琴" class="validate[minCheckbox[2]] checkbox">

二、即時進行帳號驗證

1.在該欄位驗證中加入:,ajax[ajaxUser],此名稱在jquery.validationEngine-tw.js中定義

2.驗證用的檔名需要在jquery.validationEngine-tw.js中修改

3.驗證用的php檔寫法請參考:mem_chk.php,驗證用的php檔會接收到的值:

    (1) 變數名稱:$_POST['validateId'];(例如:id)

    (2) 變數值:$_POST['validateValue'];(例如:tad)

    (3) 使用的驗證名稱:$_POST['validateError'];(例如:ajaxUser)

4.驗證用的php檔,不管過程為何,最後只要能輸出「{"jsonValidateReturn":["變數名稱","使用的驗證名稱","結果"]}」即可,如:

    (1) 帳號可使用:「{"jsonValidateReturn":["id","ajaxUser","true"]}」

    (2) 帳號不可使用:「{"jsonValidateReturn":["id","ajaxUser","false"]}」

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

5-1 mem.php

<?php
foreach($_POST as $id=>$val){
    echo "<div>$id = $val</div>";
}
?>

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

5-2 mem_chk.php

<?php
//{"jsonValidateReturn":["id","ajaxUser","false"]}

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

/*----------------------------------*/

/* 接收到的值 */
$id=$_POST['validateId'];
$val=$_POST['validateValue'];
$validate=$_POST['validateError'];


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

$sql="select `sn` from `mem` where $id='$val'";
$result=mysql_query($sql) or die($sql);
list($sn)=mysql_fetch_row($result);


if(empty($sn)){
    echo "{'jsonValidateReturn':['$id','$validate','true']}";   
}else{
    echo "{'jsonValidateReturn':['$id','$validate','false']}";   
}
?>

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

5-3 jquery.validationEngine-tw.js



(function($) {
    $.fn.validationEngineLanguage = function() {};
    $.validationEngineLanguage = {
        newLang: function() {
            $.validationEngineLanguage.allRules = {"required":{   
                        "regex":"none",
                        "alertText":"* 必填欄位",
                        "alertTextCheckboxMultiple":"* 請至少選擇一個項目",
                        "alertTextCheckboxe":"* 此核選框為必填"},
                    "length":{
                        "regex":"none",
                        "alertText":"* 請輸入 ",
                        "alertText2":" 到 ",
                        "alertText3":" 個字之間"},
                    "maxCheckbox":{
                        "regex":"none",
                        "alertText":"* 超過可選取上限"},
                    "minCheckbox":{
                        "regex":"none",
                        "alertText":"* 至少要選",
                        "alertText2":"個項目"},
                    "confirm":{
                        "regex":"none",
                        "alertText":"* 驗證不正確,請重填"},
                    "telephone":{
                        "regex":"/^[0-9\-\(\)\#\ ]+$/",
                        "alertText":"* 電話號碼錯誤"},
                    "email":{
                        "regex":"/^[a-zA-Z0-9_\.\-]+\@([a-zA-Z0-9\-]+\.)+[a-zA-Z0-9]{2,4}$/",
                        "alertText":"* Email不合法"},
                    "date":{
                         "regex":"/^[0-9]{4}\-\[0-9]{1,2}\-\[0-9]{1,2}$/",
                         "alertText":"* 日期有誤,格式應為 YYYY-MM-DD"},
                    "onlyNumber":{
                        "regex":"/^[0-9\ ]+$/",
                        "alertText":"* 只限數字"},
                    "noSpecialCaracters":{
                        "regex":"/^[0-9a-zA-Z]+$/",
                        "alertText":"* 不允許使用特殊符號"},
                    "onlyLetter":{
                        "regex":"/^[a-zA-Z\ \']+$/",
                        "alertText":"* 僅能用英文字元"},
                    "ajaxUser":{
                        "file":"mem_chk.php",
                        "alertTextOk":"* 可使用",
                        "alertTextLoad":"* 檢查中...",
                        "alertText":"* 已被使用,請換一個"},
                    "ajaxEmail":{
                        "file":"mem_chk.php",
                        "alertTextOk":"* 此信箱可使用",
                        "alertText":"* 此信箱已被使用,請換一個",
                        "alertTextLoad":"* 檢查中..."}
                }   
        }
    }
})(jQuery);

$(document).ready(function() {   
    $.validationEngineLanguage.newLang()
});

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

6. PHP圖表pChart

一、pChart(http://pchart.sourceforge.net)

1.pChart.class(圖表物件檔)、pData.class(資料物件檔)、pCache.class(快取物件檔)

include_once("pChart/pData.class");
include_once("pChart/pChart.class");

二、匯入資料的二種方式:

1.直接寫在程式中:AddPoint($資料值,$資料組名稱="Serie1",$資料組說明="")

$DataSet = new pData;
$DataSet->AddPoint(array(128673,2889,1376,830,170),"count","造訪次數");
$DataSet->AddPoint(array("台灣","香港","中國","美國","德國"),"country","國家");
$DataSet->AddAllSeries();
$DataSet->SetAbsciseLabelSerie();

2.從CSV檔匯入:ImportFromCSV($CSV檔來源,$分隔符=",",$資料從第幾欄開始=-1,$是否有標題=FALSE,$當作標籤的是第幾欄=-1)

$DataSet->ImportFromCSV("Sample/ck2.csv",",",array(3),TRUE,0);

三、繪製圖表

1.產生圖表物件:new pChart(寬,高);

2.設定標記字型;setFontProperties("字型",大小);

3.設定繪圖區域:setGraphArea($X1,$Y1,$X2,$Y2)  ;

4.繪製圖表:drawScale($Data,$DataDescription,$模式,$R,$G,$B,$顯示標籤=TRUE,$X軸標籤角度=0,$小數幾位=1,$圖在邊界內=FALSE,$略過幾個標籤=1,$RightScale=FALSE)

    (1) SCALE_NORMAL:取得資料組的最大和最小值
    (2) SCALE_START0:最小值從0開始
    (3) SCALE_ADDALL:取得資料組累積的最大和最小值
    (4) SCALE_ADDALLSTART0:取得資料組累積的最大值,最小從0開始

5.繪製標線:drawGrid($LineWidth,$Mosaic=TRUE,$R=220,$G=220,$B=220,$Alpha=255)

$Test = new pChart(700,230);
$Test->setFontProperties("Fonts/cwyen.ttf",8);
$Test->setGraphArea(50,30,680,200);
$Test->drawScale($DataSet->GetData(),$DataSet->GetDataDescription(),SCALE_NORMAL,150,150,150,TRUE,0,2,TRUE);
$Test->drawGrid(4,TRUE,230,230,230,50);


6.長條圖:drawBarGraph($Data,$DataDescription,$陰影=FALSE)

7.曲線圖:drawCubicCurve($Data,$DataDescription,$圓滑度)

8.折線圖:drawLineGraph($Data,$DataDescription)

9.點圖:drawPlotGraph(&$Data,&$DataDescription,$大半徑=5,$小半徑=2,$R2=-1,$G2=-1,$B2=-1,$陰影=FALSE)

10.圓餅圖:drawPieGraph($Data,$DataDescription,$X,$Y,$半徑,$繪製標籤=PIE_NOLABEL,$加強顏色=TRUE,$透視角度=60,$高度=20,$分開距離=0,$小數幾位=0)

$Test->drawBarGraph($DataSet->GetData(),$DataSet->GetDataDescription(),TRUE);

11.繪製說明表:drawLegend($X,$Y,$DataDescription,$R,$G,$B,$Rs=-1,$Gs=-1,$Bs=-1,$Rt=0,$Gt=0,$Bt=0,$邊框=FALSE)

$Test->drawLegend(350,50,$DataSet->GetDataDescription(),255,255,255);

12.產生圖片Render("$檔名");

$Test->Render("demo1.png");

四、網頁或PHP使用:

echo "<img src='demo1.png'>";

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

6-1 demo1.php

<?php
//引入物件
include_once("pChart/pData.class");
include_once("pChart/pChart.class");

//定義資料
$DataSet = new pData;
$DataSet->ImportFromCSV("Sample/ck2.csv",",",array(1,2,3),TRUE,0);

$DataSet->AddAllSeries();
$DataSet->SetAbsciseLabelSerie();

//$DataSet->SetSerieName("造訪人數","counter");
//$DataSet->SetSerieName("國家","country");

//繪製圖表底圖
$Test = new pChart(600,300);
$Test->loadColorPalette("Sample/color.txt");

//設定各標記的字型
$Test->setFontProperties("Fonts/cwyen.ttf",12);
$Test->setGraphArea(70,50,570,250);
$Test->drawFilledRoundedRectangle(7,7,593,293,5,240,240,240);
$Test->drawRoundedRectangle(5,5,595,295,5,130,130,130);
$Test->drawGraphArea(255,255,200,TRUE);
$Test->drawScale($DataSet->GetData(),$DataSet->GetDataDescription(),SCALE_NORMAL,150,150,150,TRUE,0,0,TRUE);
$Test->drawGrid(4,TRUE,230,230,230,50);


//繪製線段
//長條圖
//$Test->drawBarGraph($DataSet->GetData(),$DataSet->GetDataDescription(),TRUE);
//曲線圖
//$Test->drawCubicCurve($DataSet->GetData(),$DataSet->GetDataDescription());
//折線圖
$Test->drawLineGraph($DataSet->GetData(),$DataSet->GetDataDescription());
//繪製圓點
$Test->drawPlotGraph($DataSet->GetData(),$DataSet->GetDataDescription(),3,2,255,255,255);

// Finish the graph
$Test->setFontProperties("Fonts/cwheib.ttf",14);
$Test->drawLegend(450,70,$DataSet->GetDataDescription(),255,255,255);

$Test->setFontProperties("Fonts/cwheib.ttf",20);
$Test->drawTitle(200,35,"2009年訪客來源分析",0,0,0,-1,-1,true);


$Test->Render("demo1.png");
?>
<body bgcolor="white">
<img src='demo1.png' >
</body>

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

7. 月曆功能

一、讓輸入框可以選擇日期、時間

1.網頁檔頭務必為:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery_ui_datepicker/jquery_ui_datepicker.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    $('#date').datetime({
        userLang    : 'zh-TW',
        americanMode: false,
    });
});
</script>
<script src="js/jquery_ui_datepicker/i18n/ui.datepicker-zh-TW.js" type="text/javascript"></script>
<script src="js/jquery_ui_datepicker/timepicker_plug/timepicker.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="js/jquery_ui_datepicker/timepicker_plug/css/style.css">
<link rel="stylesheet" type="text/css" href="js/jquery_ui_datepicker/smothness/jquery_ui_datepicker.css">

 

二、整合fullcalendar 1.4全頁面月曆

<script src="js/fullcalendar/fullcalendar.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="js/fullcalendar/fullcalendar.css">
<script type="text/javascript">
$(function() {
    $('#calendar').fullCalendar({
      //相關參數
    })
});
</script>


1.相關參數:
(1) 起始年月日:year: 1973, month: 6, date: 16
(2) 呈現模式:defaultView:'month' (單月=month , 單周=basicWeek , 單日=basicDay , 單周議程=agendaWeek , 單日議程=agendaDay)
(3) 標題呈現:header: { left:'title', center:'', right:'today prev,next' } (選項有:today,title,prev,next,prevYear,nextYear )
(4) 按鈕文字:buttonText:{today:'今天',prev:'上個月',next:'下個月'}
(5) 高度比例設定:aspectRatio: 1.35(比例越大,高度越小)
(6) 周顯示模式:weekMode:'fixed'(固定秀六週=fixed,顯示實際週數=liquid,顯示實際週數=variable)
(7) 顯示all day欄位:allDaySlot: true(僅在agendaWeek或agendaDay有效)
(8) 定義all day文字:allDayText: '整日'
(9) 起始小時:firstHour: 8
(10) 時間間隔:slotMinutes: 30

三、事件格式

1.id: 事件辨識名稱,值為整數或字串。
2.title: 事件名稱
3.allDay: 是否為全日事件(非必須)
4.date: 事件開始日期(同start),支援IETF格式(如:Wed, 18 Oct 2009 13:00:00 EST)、ISO8601格式(如:2009-11-05T13:15:30Z)、或者時間戳記。
5.start: 事件開始日期(同date)
6.end: 事件結束日期(非必須)
7.url: 點選連結網址(非必須)
8.className: Class樣式名稱(非必須)
9.editable: 是否可移動或改變大小(非必須)
10.source: 資料來源(非必須)

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

7-1 get_event.php(正確完成版,可抓出該月事件)

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

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

echo get_event();

//取得事件
function get_event(){
    GLOBAL $db_name;
    $start=date("Y-m-d",$_REQUEST['start']/1000);
    $end=date("Y-m-d",$_REQUEST['end']/1000);

    $sql="select * from calender where date >= '$start' and date <= '$end'";
    $result=mysql_db_query($db_name,$sql) or die($sql);
    $i=0;
    while(list($sn,$date,$event)=mysql_fetch_row($result)){
        $myEvents[$i]['id']=$sn;
        $myEvents[$i]['title']=$event;
        $myEvents[$i]['start']=strtotime($date);
        $i++;
    }
    return json_encode($myEvents);
}
?>

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

8. CSV的匯出與匯入

一、匯出文字檔

1.匯出文字檔的作法其實很簡單,您只要在程式裡加入以下的程式碼就行了:
header("Content-type: text/x-csv");
header("Content-Disposition: attachment; filename=檔名");
echo 主要內容;
exit;

2.檔案格式如下:
CSV檔:text/x-csv
sxw檔:application/octet-stream
word檔:application/msword
excel檔:application/vnd.ms-excel

二、匯入文字檔上傳介面:

<form action='接收檔.php' method='post' enctype='multipart/form-data'>
<INPUT type='file' name='userfile'>
<INPUT type='hidden' name='op' value='import'>
<INPUT type='submit' value='匯入'>
</form>

三、匯入文字檔:

//開啟上傳檔
$handle = fopen($_FILES['userfile']['tmp_name'], "r") or die("無法開啟");

//利用fgetcsv()來讀取內容
while (($data = fgetcsv($handle, 1000)) !== FALSE) {
  $sql="insert into calender (`date`,`event`) values ('{$data[0]}','{$data[1]}')";
    mysql_query($sql) or die($sql);
}

//關閉上傳檔
fclose($handle);

1.控制符=fopen(檔名,模式):打開檔案
2.布林值=fclose(檔案控制符):關閉檔案
3.陣列=fgetcsv(檔案控制符,[最長讀取長度],[分格符號],[文字引號]):讀取CSV檔

四、文字檔轉碼:

1.由於Excel僅能編輯Big5的中文編碼,故若是您希望會出的檔案可以讓Excel開啟,匯出時,記得將編碼轉為Big5。
(1) iconv  ( "舊編碼"  , "新編碼"  , "原文" );
echo iconv( "UTF-8", "Big5" , $main);
(2) mb_convert_encoding( "原文" , "新編碼" , "舊編碼");
echo mb_convert_encoding($main , "Big5" , "UTF-8");

五、建立RSS:

(1) 在首頁加入:<link rel="alternate" type="application/rss+xml" title="" href="rss.php" />
(2) 製作RSS結構,RSS為一個簡單的XML檔,因此,rss.php只要能輸出RSS規定的XML架構(請參考rss.php檔)即可。

<?xml version="1.0" encoding="編碼" ?>
<rss version="2.0">

<channel>
  <title>網站名稱</title>
  <link>網站網址</link>
  <description>網站簡介</description>
  <lastBuildDate>最後更新日期</lastBuildDate>
 
  <item>
    <title>事件名稱</title>
    <link>連結網址</link>
    <pubDate>事件日期</pubDate>
    <description>事件內容</description>
  </item>
 
</channel>
</rss>

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

9. 所見即所得編輯器

一、超強的CKEditor(http://ckeditor.com)

1.下載解壓,執行 http://網址/ckeditor/_samples/就有完整安裝說明及範例。
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<textarea name='event' class="ckeditor"></textarea>

二、設定工具列

1.預設工具列僅有:Full及Basic兩種,要修改現有工具列,可開啟config.js來編輯。
CKEDITOR.editorConfig = function( config ){
    config.toolbar = 'Basic';
};

2.自訂工具列('-'是分組;'/'是下一行)
CKEDITOR.editorConfig = function( config ){
    config.toolbar = 'TadToolbar';
    config.toolbar_TadToolbar =
    [
        ['Source','-','Templates','-','Cut','Copy','Paste','PasteText','PasteFromWord'],
        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
        ['Link','Unlink','Anchor'],
        ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
        '/',
        ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
        ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
        ['Format','FontSize','-','TextColor','BGColor']
    ];
};

三、換顏色、換佈景

CKEDITOR.editorConfig = function( config ){
    config.skin = 'v2'; //office2003 , kama
    config.language = 'zh';
    config.uiColor = '#AADC6E';
};

四、整合CKFinder(上傳、瀏覽工具)

1.解壓,和CKEditor同一層即可。
2.在config.js中的CKEDITOR.editorConfig裡加入以下設定:
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';

3.開啟上傳功能,開啟ckfinder/config.js
(1) 32行:設成true(這樣才能上傳)
(2) 55行:設定上傳位置(若不設,預設會是根目錄下的userfiles)
(3) 72行:設定上傳絕對路徑

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

10. 多檔上傳

一、用PHP上傳檔案

1.若表單中有file元件,表單一定要加上:「enctype="multipart/form-data"」。
2.每上傳一張圖(假設file欄位名稱為pic),都會產生一組 $_FILES 超級全域變數:
(1) $_FILES['pic']['name'](多檔:$_FILES['pic']['name'][0]):上傳檔案原始名稱。
(2) $_FILES['pic']['type']:檔案的 MIME 類型,例如“image/gif”。
(3) $_FILES['pic']['size']:已上傳檔案的大小,單位為bytes。
(4) $_FILES['pic']['tmp_name']:檔案被上傳後的臨時檔案名。
(5) $_FILES['pic']['error']:和該檔案上傳相關的錯誤代碼。
3.上傳的步驟:送出上傳→圖會暫時放到tmp中→程式要搬移該檔到指定的位置。
4.搬移上傳檔方法:move_uploaded_file(暫存檔 , 新路徑檔名)

二、套用方法:

1.http://www.fyneworks.com/jquery/multiple-file-upload/#tab-Overview
<script src="jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>
<script src="jquery.MultiFile.js" type="text/javascript" language="javascript"></script>

三、基本上傳用法:

<input type="file" class="multi"/>

四、限制上傳數量:

<input type="file" class="multi" maxlength="2"/>
<input type="file" class="multi  max-2"/>

五、限制上傳類型:

<input type="file" class="multi" accept="gif|jpg"/>
<input type="file" class="multi  accept-gif|jpg"/>

六、自訂語系:

<input type="file" class="multi
{accept:'gif|jpg', max:3, STRING:{
remove:'移除',
selected:'選擇檔案: $file',
denied:'不允許上傳 $ext 檔案',
duplicate:'已選擇檔案如下:\n$file'
}}" />

七、製作縮圖

1.完整參數表:http://phpthumb.sourceforge.net/demo/docs/phpthumb.readme.txt
2.範例:http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php
3.把phpThumb.config.php.default 改為 phpThumb.config.php,確保cache可以寫入。
4.簡易用法:<img src='phpThumb/phpThumb.php?src=圖檔'>
(1) src:目標圖片的地址
(2) w:輸出圖片的寬度
(3) h:輸出圖片的高度(如果不指定他將按w參數等比縮放)
(4) q:輸出如果是JPG格式的,可以規定它的輸出質量
(5) f:輸出格式,可以為jpeg、png、gif、ico
(6) sfn:輸出gif動畫中的某一幀
(7) fltr[]:濾鏡,可以有很多效果,包括銳化、模糊、旋翻轉、水印、邊框、遮照、色彩調整等
a.圖片浮水印:<img src='phpThumb/phpThumb.php?src=圖檔&w=160&h=120&q=85&fltr[]=wmi|/浮水印檔|BL|75'>
b.文字浮水印:<img src='phpThumb/phpThumb.php?src=圖檔&w=160&h=120&f=png&fltr[]=wmt|".urldecode("&#40670&#20841&#19979")."|11|BL|FFFFFF|字型'>

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

10-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'");  //設定語系

if($_POST['op']=="save"){
  save_event();
}

//儲存事件
function save_event(){

    $sql="insert into diary (`date`,`event`) values ('{$_POST['date']}','{$_POST['event']}')";
    mysql_query($sql) or die($sql);
    $sn=mysql_insert_id();
   
    if(!empty($_FILES['pic']['tmp_name'])){
        foreach($_FILES['pic']['tmp_name'] as $i => $tmpname){       
            move_uploaded_file($tmpname , "userfiles/images/{$sn}_{$_FILES['pic']['name'][$i]}");
        }
    }

    header("location:index.php");
}

//讀取事件的下拉選單
function select_event($select_sn=""){
    $sql="select * from diary order by date desc , sn";
    $result=mysql_query($sql) or die($sql);
    $main="<select onChange=\"location.href='index.php?sn='+this.value\">
    <option value=''>撰寫日記</option>";
    while(list($sn,$date,$event)=mysql_fetch_row($result)){
      $selected=($select_sn==$sn)?"selected":"";
        $main.="<option value='$sn' $selected>$date</option>";
    }
    $main.="</select>";
    return $main;
}

//讀取某個事件
function show_event($sn=""){
    if(empty($sn))return;
    $pic=get_pic($sn);
    $sql="select * from diary where sn='$sn'";
    $result=mysql_query($sql) or die($sql);
    list($sn,$date,$event)=mysql_fetch_row($result);
    $main="<div class='page'>{$event}{$pic}</div>";
    return $main;
}


//抓出圖檔
function get_pic($sn=""){
$dir = "userfiles/images/";
if (is_dir($dir)) {
    if ($dh = opendir($dir)) {
        while (($file = readdir($dh)) !== false) {
            $ff=explode("_",$file);
                        if($ff[0]==$sn){
                            $pics.="<img src='{$dir}{$file}'>";
                        }
        }
        closedir($dh);
    }
    }
    return $pics;
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery_ui_datepicker/jquery_ui_datepicker.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    $('#date').datepicker({
        userLang    : 'zh-TW',
        americanMode: false,
                dateFormat: 'yy-mm-dd'
    });
});
</script>
<script src="js/jquery_ui_datepicker/i18n/ui.datepicker-zh-TW.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="js/jquery_ui_datepicker/smothness/jquery_ui_datepicker.css">

<script src="js/jquery.MultiFile.js" type="text/javascript"></script>
  </head>
  <body>
  <?php echo show_event($_GET['sn']);?>
  <form action="index.php" method="post" enctype="multipart/form-data">
  日期:<input name="date" type="text" id="date" size="20">
  <?php echo select_event($_GET['sn']);?>
    <br />附檔:<input type="file" name="pic[]" class="multi" accept="jpg|png|gif|jpeg" maxlength="3"/>   

  <input type="submit" value="儲存" id="submit"><br>
    <textarea name='event' cols=80 rows=15 class="ckeditor"></textarea>
  <input name="op" type="hidden" value="save">
    </form>
  </body>
</html>

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

11. 縮圖及上傳物件

一、EasyPhpThumbnail Class縮圖物件

1.http://www.mywebmymail.com/?q=content/easyphpthumbnail-class
include_once('easyphpthumbnail.class.php');
$thumb = new easyphpthumbnail;
$thumb -> Createthumb('image.jpg');

2.存成檔案:
$thumb -> Chmodlevel = '0755';
$thumb -> Thumblocation = "myfiles/_thumbs/Images/";
$thumb -> Thumbprefix = '';
$thumb -> Createthumb("myfiles/{$file}",'file');

3.指定大小(三選一即可)
$thumb -> Thumbsize = 160;    //長邊上限160
$thumb -> Thumbwidth=160 ;   //寬上限160
$thumb -> Thumbheight=100 ;  //高上限100

4.製作陰影
$thumb -> Backgroundcolor = '#D0DEEE';
$thumb -> Shadow = true;

5.製作圓角(模式[0關閉,1直角,2圓角],圓角程度,隨機,左上,左下.右上,右下)
$thumb -> Clipcorner = array(2,5,0,1,1,1,1);
6.加上外框
$thumb -> Framewidth = 10;
$thumb -> Framecolor = '#FFFFFF';

7.加上裝訂特效
$thumb -> Binder = true;
$thumb -> Binderspacing = 8;

8.加上浮水印(僅能用png檔)
$thumb -> Watermarkpng = 'watermark.png';
$thumb -> Watermarkposition = '50% 50%';  //位置
$thumb -> Watermarktransparency = 70;       //透明度(數字越大,越不透明)

9.加上文字浮水印(圖片版權)
$thumb -> Copyrightfonttype = 'cwheib.ttf';
$thumb -> Copyrightfontsize = 12;
$thumb -> Copyrighttextcolor = '#FFFFFF';  //不設會自動偵測
$thumb -> Copyrighttext = 'http://ck2tw.net 點兩下';
$thumb -> Copyrightposition = '0% 95%';

二、整合型上傳工具

1.class.upload.php(http://www.verot.net/res/sources/class.upload.html)
2.jquery.MultiFile(http://www.fyneworks.com/jquery/multiple-file-upload/)
3.lytebox(http://www.dolem.com/lytebox/)
(1) 先建立資料表files_center
(2) 在用到上傳的檔案,加入此行:include_once "up_file.php";
(3) 在上傳的表單加入屬性:enctype='multipart/form-data'
(4)  在上傳的表單加入底下引入相關檔案的語法:
<script src="upload/jquery-1.3.2.min.js"></script>
<script src="upload/jquery.MultiFile.js"></script>

(5) 在上傳的表單加入該上傳欄位:<input type='file' name='upfile[]' class='multi' maxlength=1>".list_del_file($col_name,$col_sn)."
(6) 在儲存或更新的動作中加入上傳函數:upload_file($col_name,$col_sn);
(7) 顯示所有圖片:show_files($col_name,$col_sn);
a.show_files(欄位,編號,是否縮圖,顯示模式filename、num,顯示描述,顯示下載次數)
(8) 刪除資料時,在刪除程式中,最後加入刪除檔案函數:
del_files($files_sn,$col_name,$col_sn);

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

11-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"){
  save_event();
}

//儲存事件
function save_event(){

    $sql="insert into diary (`date`,`event`) values ('{$_POST['date']}','{$_POST['event']}')";
    mysql_query($sql) or die($sql);
   
    $id=mysql_insert_id();
   
    if(!empty($_FILES['pic']['tmp_name'])){
      foreach($_FILES['pic']['tmp_name'] as $i=>$tmp_name){
        move_uploaded_file($tmp_name , "myfiles/{$id}_{$_FILES['pic']['name'][$i]}");
    }
    }
   
    header("location:index.php");
}

//讀取事件的下拉選單
function select_event($select_sn=""){
    $sql="select * from diary order by date desc , sn";
    $result=mysql_query($sql) or die($sql);
    $main="<select onChange=\"location.href='index.php?sn='+this.value\">
    <option value=''>撰寫日記</option>";
    while(list($sn,$date,$event)=mysql_fetch_row($result)){
      $selected=($select_sn==$sn)?"selected":"";
        $main.="<option value='$sn' $selected>$date</option>";
    }
    $main.="</select>";
    return $main;
}

//讀取某個事件
function show_event($sn=""){
    if(empty($sn))return;
    $sql="select * from diary where sn='$sn'";
    $result=mysql_query($sql) or die($sql);
    list($sn,$date,$event)=mysql_fetch_row($result);
    $pic=get_pic($sn);
    $main="<div class='page'>
    $event
    $pic
    </div>";
    return $main;
}

//讀取圖檔
function get_pic($sn=""){
  $dir="myfiles";
    include_once('easyphpthumbnail.class.php');

  $main="<script type='text/javascript' language='javascript' src='lytebox/lytebox.js'></script>
<link rel='stylesheet' href='lytebox/lytebox.css' type='text/css' media='screen' />";
    if (is_dir($dir)) {
        if ($dh = opendir($dir)) {
            while (($file = readdir($dh)) !== false) {
                $ff=explode("_",$file);
                if($ff[0]==$sn){
                    if(!file_exists("{$dir}/_thumbs/{$file}")){
                        $thumb = new easyphpthumbnail;
                        $thumb -> Chmodlevel = '0755';
                        $thumb -> Thumblocation = "{$dir}/_thumbs/";
                        $thumb -> Thumbprefix = '';
                        $thumb -> Thumbheight=100 ;
                        $thumb -> Backgroundcolor = '#F0F0F0';
                        $thumb -> Shadow = true;
                        $thumb -> Clipcorner = array(2,10,0,0,0,1,1);
                        $thumb -> Framewidth = 6;
                        $thumb -> Framecolor = '#F0F0F0';
                        $thumb -> Binder = true;
                        $thumb -> Binderspacing = 10;
                        $thumb -> Watermarkpng = 'watermark.png';
                        $thumb -> Watermarkposition = '20% 90%';  //位置
                        $thumb -> Watermarktransparency = 100;       //透明度(數字越大,越不透明)
   
                        $thumb -> Copyrightfonttype = 'cwheib.ttf';
                        $thumb -> Copyrightfontsize = 10;
                        //$thumb -> Copyrighttextcolor = '#FFFFFF';  //不設會自動偵測
                        $thumb -> Copyrighttext = '點兩下';
                        $thumb -> Copyrightposition = '15% 15%';
   
                        $thumb -> Createthumb("{$dir}/{$file}",'file');
                    }
                    $main.="<a href='$dir/$file' rel='lyteshow[{$ff[0]}]' title='$file'><img src='{$dir}/_thumbs/{$file}' alt='$file' style='border:0px;'></a>
";
                }
            }
            closedir($dh);
        }else{
            return "無法開啟目錄";
        }
    }else{
        return "無法讀取圖檔目錄";
    }
    return $main;
}


?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 type="text/javascript" src="ckeditor/ckeditor.js"></script>
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery_ui_datepicker/jquery_ui_datepicker.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {
        $('#date').datepicker({
            userLang    : 'zh-TW',
            americanMode: false,
            dateFormat: 'yy-mm-dd'
        });
    });
    </script>
    <script src="js/jquery_ui_datepicker/i18n/ui.datepicker-zh-TW.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="js/jquery_ui_datepicker/smothness/jquery_ui_datepicker.css">
   
    <script src="js/jquery.MultiFile.js" type="text/javascript" language="javascript"></script>
  </head>
  <body>
  <?php echo show_event($_GET['sn']);?>
  <form action="index.php" method="post" enctype="multipart/form-data">
  日期:<input name="date" type="text" id="date" size="20">
  <?php echo select_event($_GET['sn']);?><br>
  插圖:<input type="file" name="pic[]" class="multi"/>
  <input type="submit" value="儲存" id="submit"><br>
    <textarea name='event' cols=80 rows=15 class="ckeditor"></textarea>
  <input name="op" type="hidden" value="save">

    </form>
  </body>
</html>

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

12. 製作PDF檔(上)

一、建立一張紙

<?php
require('fpdf/chinese-unicode.php');
// 產生一個 FPDF 物件
$pdf=new PDF_Unicode();
//設定UTF8字型
$pdf->AddUniCNShwFont('Uni');
// 目前還沒有任何頁面,使用 AddPage() 產生一個頁面
$pdf->AddPage("P","A4"); //AddPage([string 方向 ,[ mixed 格式]])
// 設定字體格式
$pdf->SetFont('Uni','',14);
// 產 pdf 檔案應在瀏覽器上顯示出來
$pdf->Output();
?>

二、文字相關功能

1.$pdf->SetTextColor(R,G,B); //前景色
2.$pdf->SetFillColor(R,G,B); //背景色
3.$pdf->SetFont('Uni','BIU',14);
4.$pdf->Write(float 高, string 文字 [, mixed 連結]); //文字流,會自動換行,加連結,大量文字最佳選擇。
5.$pdf->Text(float x, float y, string 文字); //可自由定位,不會換行,會自動連結

三、設定邊界

1.$pdf->SetMargins(float 左, float 上 [, float 右]);

四、最常用的Cell功能

1.$pdf->Cell(float 寬 [, float 高 [, string 內文 [, mixed 邊框 [, int 下一格位置 [, string 對齊 [, boolean 填滿 [, mixed 連結]]]]]]])
(1) 邊框選項:「0」(預設)、「1」、「L」、「T」、「R」、「B」
(2) 下一格位置 :「0」放在右邊(預設)、「1」從下一行開始、「2」放在下方
(3) 內文對齊方向:「L」靠左(預設)、「C」置中、「R」靠右
(4) 填滿:「true」填滿某個顏色、「false」透明(預設)

五、插入圖片

1.$pdf->Image(string 檔案路徑 [, float x [, float y [, float 寬 [, float 高 [, string 類型 [, mixed 連結]]]]]])
(1) 類型:JPG, JPEG, PNG 及 GIF

六、取得位置,設定位置

1.$pdf->GetX(); $pdf->GetY();
2.$pdf->SetXY(float x, float y); $pdf->SetX(float x); $pdf->SetY(float y);

七、繪製圖形

1.$pdf->Rect(float x, float y, float 寬, float 高 [, string 樣式]);
(1) 樣式: 「D」(預設)空心框、「F」實心無框、「DF」或「FD」實心框
八、輸出
1.$pdf->Output([string 檔名, string 目的地]);
2.沒有要存檔,就不用設檔名。目的地參數:
(1) 「I」: 直接在瀏覽器中呈現。
(2) 「D」: 強迫下載。
(3) 「F」: 存到主機上,檔名需包涵位置
(4) 「S」: 傳回字串,檔名自動忽略。

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

12-1 pdf.php

<?php
require('fpdf/chinese-unicode.php');
// 產生一個 FPDF 物件
$pdf=new PDF_Unicode();

//設定UTF8字型
$pdf->AddUniCNShwFont('Uni');

// 目前還沒有任何頁面,使用 AddPage() 產生一個頁面
$pdf->AddPage("P","A4"); //AddPage([string 方向 ,[ mixed 格式]])
$pdf->SetMargins(20, 20 ,80);

$pdf->SetXY(20,20);


$pdf->SetFont('Uni','',24);
$pdf->SetFillColor(250,255,91); //背景色
$pdf->Cell(170,20 , "Google新搜尋介面曝光" , 0 , 1 , "C" , true, "http://www.zdnet.com.tw/news/web/0,2000085679,20143031,00.htm");

$pdf->Image("Picture_46_610x353.png" , $pdf->GetX() , $pdf->GetY()+8 , 100,60,"png","http://www.zdnet.com.tw/news/web/0,2000085679,20143031,00.htm");

$y=$pdf->GetY()+75;
$pdf->SetY($y);

// 設定字體格式
$pdf->SetFont('Uni','',12);
$pdf->Write("6","Google的新搜尋介面顏色變鮮豔,選項也變多了。\n\n    Google的新搜尋結果頁面將提供更多的搜尋選項,並以更亮麗的色彩陪襯,這似乎參考了最近競爭對手所做的改變。\n\n    過去一周來,只有一小群Google使用者試用過新的搜尋使用者介面。");

$pdf->SetTextColor(0,0,255);
$pdf->SetFont('Uni','U',12);
$pdf->Write("6","Gizmodo","http://gizmodo.com/5412801/how-to-try-the-new-google-search?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+gizmodo%2Ffull+%28Gizmodo%29&utm_content=Google+Reader");

$pdf->SetTextColor(0,0,0);
$pdf->SetFont('Uni','',12);
$pdf->Write("6","    周三登出如何迫使Google新頁面曝光的一些訣竅(請見文末),我們這才能夠擷取幾張螢幕畫面,讓你瞧瞧Google搜尋的新樣貌。\n\n    首先,你或許會察覺,左手邊有一排色彩亮麗的搜尋選項,而且位置是固定不動的,不像以前必須在搜尋結果頁上方的搜尋選項之間作切換。此外,網站連結以Google典型的藍色呈現,而頁面上方的搜尋列則改用大型的藍色「搜尋」按鈕,取代灰色的按鈕。\n\n    Google搜尋產品與使用者體驗副總裁Marissa Mayer上周對Search Engine Land表示,新的頁面設計是為了讓Google搜尋結果的呈現方式趨於一致,畢竟Google之前已在搜尋結果頁面加進了許多新元素。不過,Google似乎也仿效Yahoo與微軟最近的作法,也把重點擺在搜尋結果以新的方式整理、呈現出來。\n\n    Google將對新搜尋結果頁面測試數周,然後再決定以何種面貌正式呈現給所有的使用者。(唐慧文譯)");


$pdf->SetFillColor(240,240,240); //背景色
$pdf->Rect(135, 48, 55, 230 ,"DF");

$pdf->SetFont('Uni','',9);
$pdf->SetTextColor(204,29,216); //背景色

$pdf->Link(135, 53, 55, 3, "http://www.zdnet.com.tw/news/web/0,2000085679,20143045,00.htm");
$pdf->Text(137, 55, "電子商務網站應提供個資刪除服務");

$pdf->Link(135, 58, 55, 3, "http://www.zdnet.com.tw/news/ce/0,2000085674,20143044,00.htm");
$pdf->Text(137, 60, "華碩電子書 明年第二季上市");

$pdf->Link(135, 63, 55, 3, "http://www.zdnet.com.tw/news/web/0,2000085679,20143042,00.htm");
$pdf->Text(137, 65, "Facebook有機會超越Yahoo奇摩");

// 產 pdf 檔案應在瀏覽器上顯示出來
$pdf->Output("Google新搜尋介面曝光.pdf","F");
?>

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

12-2 解決Linux下PDF無法秀出中文

開啟終端機,輸入:

sudo apt-get install poppler-data

輸入管理員密碼後,就OK了。

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

13. 製作PDF檔(下)

一、設定PDF資訊

1.$pdf->SetDisplayMode(mixed 縮放模式 [, string 顯示模式]);
(1) 縮放模式:「fullpage 」全螢幕、「fullwidth 」最大寬度、「real」100%、「default」依軟體設定
(2) 顯示模式:「single」單頁、「continuous」連續頁面(預設)、「two」一次兩頁、「default」依軟體設定
2.$pdf->SetAuthor(string 作者姓名 [, boolean 是否為UTF8]);
3.$pdf->SetCreator(string 應用軟體名稱 [, boolean 是否為UTF8]);
4.$pdf->SetTitle(string 標題名稱 [, boolean 是否為UTF8]);
5.$pdf->SetSubject(string 主題名稱 [, boolean是否為UTF8 ]);
6.$pdf->SetKeywords(string 關鍵字 [, boolean是否為UTF8 ]);

二、劃線功能

1.$pdf->SetLineWidth(float 寬度); //設定線條寬度
2.$pdf->SetDrawColor(int r [, int g, int b]) //設定線條顏色
3.$pdf->Line(float x1, float y1, float x2, float y2); //劃線
三、MultiCell功能
1.$pdf->MultiCell(float 寬, float 高, string 內文 [, mixed 邊框 [, string 對齊 [, boolean 填滿]]])
(1) 邊框選項:「0」(預設)、「1」、「L」、「T」、「R」、「B」
(2) 內文對齊方向:「L」靠左(預設)、「C」置中、「R」靠右
(3) 填滿:「true」填滿某個顏色、「false」透明(預設)
2.MultiCell的內容會自動換行,亦可使用「\n」強迫換行,但只能自成一格,右邊無法再放儲存格,所以,一般都放在cell的右邊。

四、實用函數

1.sprintf("%07s", "2500") 結果會是:0002500
2.sprintf("%'-7s", "2500") 結果會是:---2500
3.substr(字串 , 開始擷取 , 擷取數)

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

13-1 pdf.php

<?php
require('fpdf/chinese-unicode.php');

include 'data.php';

// 產生一個 FPDF 物件
$pdf=new PDF_Unicode();

//設定UTF8字型
$pdf->AddUniCNShwFont('Uni');

// 目前還沒有任何頁面,使用 AddPage() 產生一個頁面
$pdf->AddPage("P","A4"); //AddPage([string 方向 ,[ mixed 格式]])
$pdf->SetAutoPageBreak(false);
$pdf->SetDisplayMode("fullpage","single");
$pdf->SetSubject("收據", true);
$pdf->SetCreator("ck2 system" , true);
$pdf->SetAuthor("tad", true);
$pdf->SetLeftMargin(20);

content($user,$data);
content($user,$data);
content($user,$data);

// 產 pdf 檔案應在瀏覽器上顯示出來
$pdf->Output();


//收據
function content($user="",$data=""){
    global $pdf;

    $pdf->Image("ck2_logo.png" , $pdf->GetX(),$pdf->GetY(),34, 10,"png");

    // 設定字體格式
    $pdf->SetFont('Uni','B',22);
    $pdf->Cell(170 , 9 , "點兩下電腦工作室", 0 , 1 , "C");
    
    //第二行
    $pdf->SetFont('Uni','',14);
    $pdf->Cell(65 , 8 , "單位名稱:{$user['company']}", 0 , 0);
    $pdf->Cell(60 , 8 , "姓名:{$user['name']}", 0 , 0 );
    $pdf->Cell(15 , 8 , "編號:", 0 , 0);
    $pdf->SetTextColor(255,0,0); //前景色(紅)
    $pdf->Cell(30 , 8 , time(), 0 , 1);
    $pdf->SetTextColor(0,0,0); //前景色(黑)
    
    //第三行
    $pdf->SetFont('Uni','',12);
    $pdf->Cell(75 , 8 , "項目", 1 , 0 ,"C");
    $pdf->Cell(10 , 8 , "數量", 1 , 0 ,"C");
    $pdf->Cell(25 , 8 , "單價", 1 , 0 ,"C");
    $pdf->Cell(25 , 8 , "金額", 1 , 0 ,"C");
    
    $pdf->SetFont('Uni','',9);
    $pdf->Cell(35 , 4 , "實收金額", 1 , 2 ,"C");
    
    $pdf->Cell(5 , 4 , "百", 1 , 0 ,"C");
    $pdf->Cell(5 , 4 , "十", 1 , 0 ,"C");
    $pdf->Cell(5 , 4 , "萬", 1 , 0 ,"C");
    $pdf->Cell(5 , 4 , "千", 1 , 0 ,"C");
    $pdf->Cell(5 , 4 , "百", 1 , 0 ,"C");
    $pdf->Cell(5 , 4 , "十", 1 , 0 ,"C");
    $pdf->Cell(5 , 4 , "元", 1 , 1 ,"C");
    
    //項目內容
    items(5,6,$data);
    
    $pdf->SetY($pdf->GetY()+2);

    $pdf->Text(122,$pdf->GetY()+4,"經手人:吳弘凱");
    $pdf->Text(122,$pdf->GetY()+10,"日  期:".date("Y年m月d日"));

    //注意事項
    $text="一、本收據請妥為保管,以便日後查考。\n二、如欲查詢存款入帳詳情時,請檢附本收據及已填妥之查詢函交原存款局辦理。";

    $pdf->SetFont('Uni','',9);
    $pdf->MultiCell(100, 4, $text ,0);
    $pdf->SetFont('Uni','',12);

    $pdf->SetY($pdf->GetY()+10);
    $pdf->Line(20,$pdf->GetY(),190,$pdf->GetY());
    $pdf->SetY($pdf->GetY()+10);

}


//第四行(行數,高度)
function items($n=4,$h=7,$data=""){
    global $pdf;
    for($i=0 ; $i<$n ; $i++){
        $sum=$data[$i][1] * $data[$i][2];
        $pdf->Cell(75 , $h , $data[$i][0], 1 , 0 ,"C");
        $pdf->Cell(10 , $h , $data[$i][1], 1 , 0 ,"C");
        $pdf->Cell(25 , $h , $data[$i][2], 1 , 0 ,"C");

        $pdf->Cell(25 , $h , $sum, 1 , 0 ,"C");

        $sum_text=sprintf("%'-7s",$sum);
        for($j=0;$j<7;$j++){
            $w=substr($sum_text,$j,1);
            $end=($j==6)?"1":"0";
            $pdf->Cell(5 , $h , $w, 1 , $end ,"C");
        }
    }

    //合計
        $pdf->SetFont('Uni','',12);
        $pdf->Cell(30 , $h , "合計", 1 , 0 ,"C");
        $pdf->Cell(95 , $h , "元整", "B" , 0 ,"R");
        $pdf->Cell(10 , $h , "", "B" , 0 ,"C");
        $pdf->Cell(5 , $h , "", 1 , 0 ,"C");
        $pdf->Cell(5 , $h , "", 1 , 0 ,"C");
        $pdf->Cell(5 , $h , "", 1 , 0 ,"C");
        $pdf->Cell(5 , $h , "", 1 , 0 ,"C");
        $pdf->Cell(5 , $h , "", 1 , 0 ,"C");
        $pdf->Cell(5 , $h , "", 1 , 0 ,"C");
        $pdf->Cell(5 , $h , "", 1 , 1 ,"C");
}












?>

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

14. 線上影像合成

一、建立基本GD圖檔

<?php
header("Content-type: image/png");
$im = @imagecreatetruecolor(120, 60) or die("無法建立GD圖片");
$text_color = imagecolorallocate($im, 233, 14, 91);
imagestring($im, 1, 5, 5,  "A Simple Text String", $text_color);
imagepng($im);
imagedestroy($im);
?>

二、常用GD函數

1.resource imagecreate(int $寬 , int $高)    //建立畫布
2.resource imagecreatetruecolor(int $寬 , int $高) //建立全彩畫布
3.int imagecolorallocate(resource $im ,int $紅 ,int $綠 ,int $藍)//定義顏色
4.bool imagefill ( resource $image , int $x , int $y , int $color )
5.bool imagestring(resource $im , int $字型 , int $x , int $y , string $內容 , int $顏色)    //欲寫入的字串,字型是1~5,為內建的英文字型
6.bool imagepng(resource $im [, string $檔名 [, int $品質 [, int $濾鏡]]])
7.bool imagedestroy(resource $im) //釋放記憶體

三、加入中文字型

1.array imagettftext(resource $im , float $大小  , float $角度  , int $x  , int $y  , int $顏色  , string $字型檔  , string $文字)

四、在現有圖檔建立GD圖

1.resource imagecreatefrompng(string $檔名)

五、插入圖片

1.bool imagecopy( resource $目的  , resource $來源  , int $目的_x  , int $目的_y  , int $來源_x  , int $來源_y  , int $來源寬 , int $來源高)
2.bool imagecopyresized(resource $目的  , resource $來源  , int $目的_x  , int $目的_y  , int $來源_x  , int $來源_y  , int $目的寬  , int $目的高  , int $來源寬 , int $來源高)
3.bool imagecopyresampled(resource $目的  , resource $來源  , int $目的_x  , int $目的_y  , int $來源_x  , int $來源_y  , int $目的寬  , int $目的高  , int $來源寬 , int $來源高)
<?php
header("Content-type: image/png");
$im = imagecreatefrompng("blank_logo.png") or die("無法建立GD圖片");
$background_color = imagecolorallocate($im, 255, 100, 255);
$text_color = imagecolorallocate($im, 0, 0, 0);
$white = imagecolorallocate($im, 255, 255, 255);
$im2 = imagecreatefrompng("icon/Find.png") or die("無法建立GD圖片");
imagecopyresampled( $im  , $im2  , 30  , 0  , 0  , 0 , 32,32 , 256 , 256);
imagettftext($im , 9 , 0 , 5  , 48  , $text_color  , "fireflysung.ttf" , "中文字測試");
imagepng($im);
imagedestroy($im);
?>

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

14-1 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">
  <title>線上產生圖片</title>
  </head>
  <body>


<FORM action="pic.php" method="POST">
  <INPUT type="text" name="title">
    <INPUT type="submit">
</FORM>


  </body>
</html>

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

14-2 pic.php

<?php
header("Content-type: image/png");
$im = imagecreatefrompng("blank_logo.png") or die("無法建立GD圖片");
$im2 = imagecreatefrompng("icon/Thumbs_Up.png") or die("無法建立GD圖片");

$gray = imagecolorallocate($im, 0,0,0 );

//imagecopy($im , $im2  , 30  , 4  , 0 , 0 , 32 ,32);
imagecopyresampled($im , $im2 , 26  , 2  , 0  , 0  , 40  , 40  , 256 , 256);

$n=strlen($_POST['title'])/3;
$text_w=$n*12;
$x=(92-$text_w)/2;

imagettftext($im , 9 , 0  , $x  , 47  , $gray  , "fireflysung.ttf" , $_POST['title']);

imagepng($im);
imagedestroy($im);
?>

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

15. 圖形認證與計數器

一、認證的基本原理

1.pic.php(用來產生圖片的檔案)
(1) 利用亂數rand()產生字串或者數字。
(2) 將此數字製成圖片,並存入session。
2.index.php(用來做圖形驗證的頁面,負責將pic.php當作圖片引入)
3.show.php(目的地)
(1) 檢查輸入的值是否和session中的相同
(2) 若不相同則導回index.php
4.更多字型:http://www.searchfreefonts.com

二、關於session

1.session是一種暫存在主機的小檔案,我們可以用$_SESSION['變數名稱']來存入變數值($_SESSION['變數名稱']一定要大寫,前加底線)。
2.session_start():要使用session要先用該函數啟動session功能。
3.Session和php.ini設定有密切關係,包括其存活時間session.gc_maxlifetime (預設1440秒)、session.cookie_lifetime(利用cookie來設定存活期,預設為0,也就是隨瀏覽器關閉而消失)。

三、個性化計數器

1.不錯的素材:http://atp.boo.jp/bnr/03.html
2.http://park1.wakwak.com/~sakurapop/main.htm(壁紙的上面那些頁面)
3.原理:先準備一個資料表,若要計算每日人數,可分為「日期」和「計數」兩欄
4.counter.php(用來產生圖形技術器的圖片)
(1) 從資料庫讀取出當日人數,並製成圖片。
5.index.php(放計數器的地方)
(1) 進入該頁時,立即更新計數器
(2) 若無法更新計數器(影響列數0),那麼就改為新增計數器。
四、實用函數
1.int mysql_affected_rows([ resource $link_identifier ]):影響列數

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

15-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);

$today=date("Y-m-d");
$sql="update `counter` set `counter`=`counter`+1 where `day`='$today'";
$result=mysql_query($sql);
$n=mysql_affected_rows($result);
if(empty($n)){
    $sql="insert into `counter` (`day`,`counter`) values(now(),1000)";
    mysql_query($sql);
}

session_start();
?>
<!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>
  <div style="background-color:#FFFF99;border:1px dotted;padding:20px;width:300px;">

    <img src="counter.php">
    <img src="counter.php?op=all">
    
  <form action="show.php" method="post">
  <textarea name="content" cols=20><?php echo $_SESSION['content']; ?></textarea>
  <p>請輸入下方圖上文字:<input type="text" name="key"><input type="submit" value="送出"></p>

    <img src="pic.php">


    
    </form>
    <div>
  </body>
</html>

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

15-2 pic.php

<?php
session_start();
$txt=rand(10000,99999);

$_SESSION['key']=$txt;

header("Content-type: image/gif");
$im = @imagecreatefromgif("bbn022.gif") or die("無法建立GD圖片");
$text_color = imagecolorallocate($im, 0, 0, 0);
imagettftext($im, 35, 0 , 150, 43, $text_color,"Hancock.TTF",$txt);

imagegif($im);
imagedestroy($im);
?>

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

15-3 show.php

<?php
session_start();
if($_SESSION['key']!=$_POST['key'] or empty($_SESSION['key'])){
    $_SESSION['content']=$_POST['content'];
    header("location:index.php");
}else{
    $_SESSION['content']=$_SESSION['key']="";
}
?>

<!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>
 
    OK~您通過驗證囉!

  </body>
</html>

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

15-4 counter.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);

$today=date("Y-m-d");
if($_GET['op']=="all"){
    $sql="select sum(`counter`) from `counter`";
    $bg="bnr_40.gif";
    $size=18;
    $x=20;
    $y=26;
}else{
    $sql="select `counter` from `counter` where `day`='$today'";
    $bg="bnr_35.gif";
    $size=12;
    $x=10;
    $y=18;
}
$result=mysql_query($sql);
list($counter)=mysql_fetch_row($result);
$counter=sprintf("%07s",$counter);

header("Content-type: image/gif");
$im = @imagecreatefromgif($bg) or die("無法建立GD圖片");
$text_color = imagecolorallocate($im, 0, 0, 0);
imagettftext($im, $size, 0 , $x, $y, $text_color,"D3Petitbitmapism.ttf",$counter);

imagegif($im);
imagedestroy($im);
?>

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

16. Google Map初探

一、Gmap基本結構

1.申請金鑰:http://code.google.com/intl/zh-TW/apis/maps/signup.html
2.API手冊:http://code.google.com/intl/zh-TW/apis/maps/documentation/reference.html
3.API範例:http://code.google.com/apis/ajax/playground/#map_simple
4.頁面檔頭以「標準相容模式」呈現網頁,在不同瀏覽器之間的行為較為統一,在 XHTML 文件中加入 VML 命名空間,讓每個行為在 IE中都可以正常運作 :

<!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" xmlns:v="urn:schemas-microsoft-com:vml">

5.套用金鑰,並載入Google Map第二版的API。Gmap的座標:(緯度,經度):

<script type="text/javascript" src="http://www.google.com/jsapi?key=金鑰"></script>
<script type="text/javascript">
  google.load("maps", "2");
  //頁面載入完成後,執行以下函數(定位地圖起點)
  function initialize() {
    var map = new google.maps.Map2(document.getElementById("my_map"));
    map.setCenter(new google.maps.LatLng(23.009513 , 120.211242), 17);
  }
  google.setOnLoadCallback(initialize);
</script>

6.為避免耗損記憶體,離開頁面時,請加入 onunload="GUnload()"

<body onunload="GUnload()">
<div id="my_map" style="width: 700px; height: 400px"></div>

二、加上標記(請放到initialize()之中)

var point = new GLatLng(23.009513 , 120.211242);
map.addOverlay(new Gmarker(point));

三、地圖屬性

G_NORMAL_MAP(一般)、G_SATELLITE_MAP(衛星)、G_HYBRID_MAP(混合)、G_PHYSICAL_MAP(地形)、G_DEFAULT_MAP_TYPES(這三種類型的陣列)

map.setMapType(地圖屬性);

四、資訊視窗(地圖屬性勿用G_DEFAULT_MAP_TYPES)

map.openInfoWindow(point, "這裡就是延平國中啦~");
map.openInfoWindowHtml(point, "<b>這裡就是延平國中啦~<b>");

五、[控制項]地圖控制項目(用addControl()來新增控制項)

1.GLargeMapControl(大型平移/縮放控制項)、GSmallMapControl (小型平移/縮放控制項。按照預設)、GSmallZoomControl (小型縮放控制項)。
2.GScaleControl - 地圖比例尺
3.GMapTypeControl(切換地圖)、removeMapType(刪按鈕)、addMapType(加按鈕)
4.GOverviewMapControl - 位於畫面角落、可摺疊的總覽地圖
5.GHierarchicalMapTypeControl (自訂控件用的)

map.addControl(new GLargeMapControl());
map.removeMapType(G_SATELLITE_MAP);
map.addMapType(G_PHYSICAL_MAP);

六、[控制項]調整地圖控制項目位置(用GControlPosition()來新增控制項)

G_ANCHOR_TOP_RIGHT(上右)、G_ANCHOR_TOP_LEFT(上左)、G_ANCHOR_BOTTOM_RIGHT(下右)、G_ANCHOR_BOTTOM_LEFT(下左)

var topleft=new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(50,5));
map.addControl (new GMapTypeControl(),topleft);

七、[事件]顯示中心點座標

GEvent.addListener(map, "moveend", function() {
  var center = map.getCenter();
  document.getElementById("message").innerHTML = center.toString();
});
<div id='message'></div>

八、[事件]為可移動的節點加入資訊

1.mousedown:滑鼠按下時
2.mouseup:放開滑鼠時
3.click:按一下滑鼠時
4.dragstart:開始拖曳標記時
5.drag:拖曳標記時
6.dragend:結束拖曳標記時

var marker = new Gmarker(point , {draggable: true});
GEvent.addListener(marker, "dragstart", function() {
  //移動時,要做的事情
  map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function() {
  //移動後要做的事情
});

九、自訂標記外觀

1.圖示下載:http://code.google.com/p/google-maps-icons/

var myIcon = new Gicon(G_DEFAULT_ICON);      //定義標記圖示
myIcon.image = "icons/school.png";                   //圖示的前景圖片網址。
myIcon.iconSize = new GSize(32, 37);                //圖示的前景圖片大小(以像素為單位)。
myIcon.iconAnchor = new GPoint(16, 37);           //此圖示錨定至地圖的位置(相對於圖示圖片左上角)
myIcon.infoWindowAnchor = new Gpoint(16,37); //資訊視窗錨定至此圖示的位置(相對於圖示圖片左上角)

markerOptions = { icon: myIcon ,draggable: true };
var marker=new GMarker(point,markerOptions);

十、頁籤資訊視窗

http://code.google.com/intl/zh-TW/apis/maps/documentation/reference.html#GInfoWindowOptions

InfoWindowOptions={maxWidth:150}

var tab1 = new GInfoWindowTab("標籤名稱1", "內容1");
var tab2 = new GInfoWindowTab("標籤名稱2", "內容2");
var infoTabs = [tab1,tab2];

marker.openInfoWindowTabsHtml(infoTabs,InfoWindowOptions);

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

16-1 index.html

<!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" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>

    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAiaUztwQS-JKG0vf5W_QNPhRjgqXnQAbwVQohZoocwCPRm4POpxSO7Yb0Dfgh3asVzIS3quES0hQflA"></script>

    <script type="text/javascript">
        google.load("maps", "2");

        //頁面載入完成後,執行以下函數(定位地圖起點)
        function initialize() {
            var map = new google.maps.Map2(document.getElementById("mymap"));
            //定義一個標記
            var point = new GLatLng(23.005438745204096, 120.20259618759155);
            //設定中心點
            map.setCenter(point, 17);
            //定義標記圖示
            var myIcon = new GIcon(G_DEFAULT_ICON);  
            //圖示的前景圖片網址。    
            myIcon.image = "icons/shoppingmall.png";       
            //圖示的前景圖片大小(以像素為單位)。            
            myIcon.iconSize = new GSize(32, 37);             //此圖示錨定至地圖的位置(相對於圖示圖片左上角)              
            myIcon.iconAnchor = new GPoint(16, 37); //資訊視窗錨定至此圖示的位置(相對於圖示圖片左上角)
            myIcon.infoWindowAnchor = new GPoint(16,37);

            markerOptions = { icon: myIcon ,draggable: true };

            var marker = new GMarker(point , markerOptions);
            //插入標記
            map.addOverlay(marker);

            GEvent.addListener(marker, "click", function() {
                //移動後要做的事情
                var marker_point = marker.getLatLng();
                map.openInfoWindowHtml(marker_point, "目前標記位置:<br />" + marker_point.toString());
            });

            GEvent.addListener(marker, "dragend", function() {
                //移動後要做的事情
                var marker_point = marker.getLatLng();
                map.openInfoWindowHtml(marker_point, "目前標記位置:<br />" + marker_point.toString());
            });

            //地圖屬性
            //map.setMapType(G_HYBRID_MAP);
            //開啟說明視窗
            //map.openInfoWindowHtml(point, "<b>這裡就是延平國中啦~<b>");

            InfoWindowOptions={maxWidth:150}
            
            var tab1 = new GInfoWindowTab("名稱", "這是7-11");
            var tab2 = new GInfoWindowTab("座標", "目前標記位置:<br />" + point.toString());
            var infoTabs = [tab1,tab2];
            
            marker.openInfoWindowTabsHtml(infoTabs,InfoWindowOptions);


            //縮放控件
            map.addControl(new GLargeMapControl());
            //比例尺
            map.addControl(new GScaleControl());
            //縮圖
            map.addControl(new GOverviewMapControl());

            var topleft=new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(50,5));
            //地圖切換
            map.addControl(new GMapTypeControl());

            map.removeMapType(G_SATELLITE_MAP);

            map.addMapType(G_PHYSICAL_MAP);

            GEvent.addListener(map, "moveend", function() {
                var center = map.getCenter();
                document.getElementById("message").innerHTML = center.toString();
            });


        }

        google.setOnLoadCallback(initialize);
    </script>

  </head>
  <body onunload="GUnload()">
    <div id="mymap" style="width:750px;height:350px;"></div>
    <div id='message'></div>



  </body>
</html>

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

17. 搜尋存取GMap位置

一、輸入地址找位置

1.GClientGeocoder()是Gmap的地理編碼服務,請在function initialize() 中加入;

geocoder = new GClientGeocoder();

2.在function initialize() 下方加入用來搜尋的函數showAddress():

function showAddress(address) {
  geocoder.getLatLng(
    address,
    function(point) {
      if (!point) {
        alert("找不到:" + address);
      } else {
        map.setCenter(point, 13);
        var marker = new GMarker(point, {draggable: true ,bouncy:true});
        map.addOverlay(marker);
        marker.openInfoWindowHtml(address);
      }
    }
  );
}

3.因為 initialize() 和 showAddress() 都會用到 map 及 geocoder,所以,在 initialize() 前先宣告這兩個變數

var map =null;
var geocoder =null;

4.設定輸入地址的文字框:

<form action="#" onsubmit="showAddress(this.address.value); return false">
  <input type="text" size="60" name="address" value="" />
  <input type="submit" value="查詢" />
</form>

二、存入地址、經緯度

1.利用document.getElementById("欄位名").value 將值給塞進去表單中。
2.此外,找到的位置有時後會有誤差,因此,建立一個監聽事件,紀錄調整後之位置。

document.getElementById("latlng").value = markerLatLng.toString();
document.getElementById("name").value = address;

//移動節點後要進行的動作
GEvent.addListener(marker, "dragend", function() {
  markerLatLng = marker.getLatLng();
  document.getElementById("latlng").value = markerLatLng.toString();
});

三、讀出已存位置

1.利用 showAddress('{$latlng}') 來導到我們要的精確位置。

function list_map(){
  $sql="select `latlng`,`name` from `gmap`";
  $result=mysql_query($sql) or die($sql);
  $main="<ol>";
  while(list($latlng,$name)=mysql_fetch_row($result)){
    $main.="<li><a onClick=\"showAddress('{$latlng}');\">$name</a></li>";
  }
  $main.="</ol>";
  eturn $main;
}

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

17-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"){
  save_map();
}

//儲存地圖
function save_map(){
    $sql="insert into `gmap` (`latlng`,`name`) values ('{$_POST['latlng']}','{$_POST['name']}')";
    mysql_query($sql) or die($sql);
    header("location:index.php");
}

//抓出資料
function list_map(){
    $sql="select `latlng`,`name` from `gmap`";
    $result=mysql_query($sql) or die($sql);
    $main="<ol>";
    while(list($latlng,$name)=mysql_fetch_row($result)){
        $main.="<li style='color:white;'>
        <a href=\"javascript:showAddress('$latlng','$name');\"  style='color:white;'>$name</a>
        </li>";
    }
    $main.="</ol>";
    return $main;
}
?>
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAiaUztwQS-JKG0vf5W_QNPhRjgqXnQAbwVQohZoocwCPRm4POpxSO7Yb0Dfgh3asVzIS3quES0hQflA"></script>

  <script type="text/javascript">
  google.load("maps", "2");

    var geocoder= null;
    var map = null;

  //頁面載入完成後,執行以下函數(定位地圖起點)
  function initialize() {

    map = new google.maps.Map2(document.getElementById("my_map"));
        geocoder = new GClientGeocoder();

        var point = new GLatLng(23.009513,120.211242);

    map.setCenter(point, 17);

    //加入節點
    //var marker=new GMarker(point, {draggable: true ,bouncy:true });
      //map.addOverlay(marker);

      //大型平移/縮放控制項
      map.addControl(new GLargeMapControl());
      //比例尺
      map.addControl(new GScaleControl());
      //地圖屬性切換
      map.addControl(new GMapTypeControl());
      //移除衛星按鈕
      map.removeMapType(G_SATELLITE_MAP);
      //新增地形按鈕
      map.addMapType(G_PHYSICAL_MAP);

      //地圖縮圖
      map.addControl(new GOverviewMapControl());

  }

    function showAddress(address , show_title) {
        geocoder.getLatLng(
            address,
            function(point) {
                if (!point) {
                    alert("找不到『" + address + "』");
                } else {
                    map.setCenter(point, 17);
                    var marker = new GMarker(point, {draggable: true ,bouncy:true});
                    map.addOverlay(marker);
                    marker.openInfoWindowHtml( show_title +"<br /><font color=blue>" + address + "</font>");

                    document.getElementById("latlng").value = point.toString();
                    document.getElementById("name").value = address;

                    GEvent.addListener(marker, "dragend", function() {
                        var markerLatLng = marker.getLatLng();
                      document.getElementById("latlng").value = markerLatLng.toString();
                    });
                }
            }
        );
    }

  google.setOnLoadCallback(initialize);

    </script>
  </head>
  <body onunload="GUnload()" bgcolor="#000000">

    <table align="center"><tr><td>

        <form action="#" onsubmit="showAddress(this.address.value,''); return false" style="display:inline;">
            <input type="text" name="address" value="" style="width:450px;font-size:20px;" />
            <input type="submit" value="查詢" style="font-size:20px;" />
        </form>

        <form action="index.php" method="post" style="display:inline;">
            <input type="hidden" name="name" id="name" value=""/>
            <input type="hidden" name="latlng" id="latlng" value=""/>
            <input type="hidden" name="op" value="save"/>
            <input type="submit" value="儲存" style="font-size:20px;" />
        </form>

    </td><td rowspan="2" valign="top">

    <?php echo list_map();?>

    </td></tr><tr><td>

        <div id="my_map" style="width: 600px; height: 300px;margin-top:4px;"></div>

    </td></tr>
    </table>
  </body>
</html>

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

18. 憑空生出Excel檔

一、PHPExcel(http://phpexcel.codeplex.com)

1.可讀取、產生Excel 97~2007的檔案,甚至可輸出PDF、CSV、HTML檔。
2.安裝需求:PHP 5.2.0 以上、需開啟php_zip、php_xml函式庫。

二、基本架構

<?php
error_reporting(E_ALL);   //關閉PHP錯誤報告
require_once 'excel/PHPExcel.php';    //引入 PHPExcel 物件庫
require_once 'excel/PHPExcel/IOFactory.php';    //引入 PHPExcel_IOFactory 物件庫
$objPHPExcel = new PHPExcel();  //實體化Excel
//----------內容-----------//
header('Content-Type: application/vnd.ms-excel');
header('Content-Disposition: attachment;filename=檔名');
header('Cache-Control: max-age=0');
$objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel5');
$objWriter->save('php://output');
exit;
?>

三、建立工作表並指定名稱

$objPHPExcel->setActiveSheetIndex(0);  //設定預設顯示的工作表
$objActSheet = $objPHPExcel->getActiveSheet(); //指定預設工作表為 $objActSheet
$objActSheet->setTitle("個人通訊錄");  //設定標題
$objPHPExcel->createSheet(); //建立新的工作表,上面那三行再來一次,編號要改

四、指定儲存格內容

1.有以下類型可設定:TYPE_BOOL、TYPE_ERROR、TYPE_FORMULA、TYPE_INLINE、TYPE_NULL、TYPE_NUMERIC、TYPE_STRING
$objActSheet->setCellValue('A1', '姓名');
$objActSheet->setCellValueExplicit('C2', '0987654321',PHPExcel_Cell_DataType:: TYPE_STRING);

五、調整儲存格欄寬

$objActSheet->getColumnDimension('A')->setWidth(8);  //固定寬度8
$objActSheet->getColumnDimension('B')->setAutoSize(true);  //自動寬度

六、設定文字、儲存格樣式及對齊方向

$objPHPExcel->getDefaultStyle()->getFont()->setSize(9);
$objActSheet->getStyle('A1:D1')->getFill()->setFillType(PHPExcel_Style_Fill:: FILL_SOLID)->getStartColor()->setARGB('FFFFCC99');

七、合併儲存格

$objActSheet1->mergeCells('A1:D1')->setCellValue('A1', '我的收支簿');

八、隨機產生收支內容(這個並不重要)

for($i=3;$i<=15;$i++){
    if($i%2){
        $income=rand(5000,20000); //隨機產生收入
        $pay=0;
    }else{
        $income=0;
        $pay=rand(10,10000); //隨機產生支出
    }
    $objActSheet1->setCellValue('A'.$i, '2010-01-'.$i)->setCellValue('B'.$i, $income)->setCellValue('C'.$i, $pay)->setCellValue('D'.$i, '事由'.$i);
}

九、插入公式

$n=$i-1;
$objActSheet1->setCellValue("A{$i}", '合計')->setCellValue("B{$i}", "=SUM(B3:B{$n})")->setCellValue("C{$i}", "=SUM(C3:C{$n})")->setCellValue("D{$i}", "=B{$i}-C{$i}");

十、設定並複製樣式

//設定預設工作表中一個儲存格的外觀
$objStyleA1 = $objActSheet->getStyle('A1');

//設定字型
$objFontA1 = $objStyleA1->getFont();
$objFontA1->setSize(11);
$objFontA1->setBold(true);
$objFontA1->getColor()->setRGB('FFFFFF');

//設定對齊
$objAlignA1 = $objStyleA1->getAlignment();
$objAlignA1->setHorizontal(PHPExcel_Style_Alignment::HORIZONTAL_CENTER);
$objAlignA1->setVertical(PHPExcel_Style_Alignment::VERTICAL_CENTER);
$objAlignA1->setWrapText(true);

//設定邊框
$objBorderA1 = $objStyleA1->getBorders();
$objBorderA1->getTop()->setBorderStyle(PHPExcel_Style_Border::BORDER_THIN);
$objBorderA1->getTop()->getColor()->setRGB('FF0000');
$objBorderA1->getBottom()->setBorderStyle(PHPExcel_Style_Border::BORDER_THIN);
$objBorderA1->getLeft()->setBorderStyle(PHPExcel_Style_Border::BORDER_THIN);
$objBorderA1->getRight()->setBorderStyle(PHPExcel_Style_Border::BORDER_THIN);

//設定儲存格顏色
$objFillA1 = $objStyleA1->getFill();
$objFillA1->setFillType(PHPExcel_Style_Fill::FILL_SOLID);
$objFillA1->getStartColor()->setRGB('99CC00');

//複製格式到其他欄位
$objActSheet->duplicateStyle($objStyleA1, 'A1:D1');

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

18-1 12月份工作表

<?php
//關閉PHP錯誤報告
error_reporting(E_ALL);  

//引入 PHPExcel 物件庫
require_once 'excel/PHPExcel.php';   

//引入 PHPExcel_IOFactory 物件庫
require_once 'excel/PHPExcel/IOFactory.php';   

//實體化Excel
$objPHPExcel = new PHPExcel(); 

$objPHPExcel->setActiveSheetIndex(0);  //設定預設顯示的工作表
$objActSheet = $objPHPExcel->getActiveSheet(); //指定預設工作表為 $objActSheet
$objActSheet->setTitle("個人通訊錄");  //設定標題

for($i=1;$i<=12;$i++){
    $objPHPExcel->createSheet();
    $objPHPExcel->setActiveSheetIndex($i);
    $var_name="objActSheet{$i}";
    $$var_name = $objPHPExcel->getActiveSheet();
    $$var_name->setTitle("{$i}月份收支簿");
}
$objPHPExcel->setActiveSheetIndex(0);


//輸出
header('Content-Type: application/vnd.ms-excel');
header('Content-Disposition: attachment;filename=檔名'.date("YmdHis"));
header('Cache-Control: max-age=0');

$objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel5');
$objWriter->save('php://output');
exit;

?>

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

18-2 excel.php

<?php
//關閉PHP錯誤報告
error_reporting(0);   

//引入 PHPExcel 物件庫
require_once 'excel/PHPExcel.php';    

//引入 PHPExcel_IOFactory 物件庫
require_once 'excel/PHPExcel/IOFactory.php';    

//實體化Excel
$objPHPExcel = new PHPExcel();  

$objPHPExcel->setActiveSheetIndex(0);  //設定預設顯示的工作表
$objActSheet = $objPHPExcel->getActiveSheet(); //指定預設工作表為 $objActSheet
$objActSheet->setTitle("個人通訊錄");  //設定標題

$objPHPExcel->createSheet();
$objPHPExcel->setActiveSheetIndex(1);
$objActSheet1 = $objPHPExcel->getActiveSheet();
$objActSheet1->setTitle("收支簿");

$objPHPExcel->getDefaultStyle()->getFont()->setSize(9);


//-------------------------外觀設定----------------------//

//設定預設工作表中一個儲存格的外觀
$objStyleA1 = $objActSheet->getStyle('A1');

//設定字型
$objFontA1 = $objStyleA1->getFont();
$objFontA1->setSize(11);
$objFontA1->setBold(true);
$objFontA1->getColor()->setRGB('FFFFFF');

//設定對齊
$objAlignA1 = $objStyleA1->getAlignment();
$objAlignA1->setHorizontal(PHPExcel_Style_Alignment::HORIZONTAL_CENTER);
$objAlignA1->setVertical(PHPExcel_Style_Alignment::VERTICAL_CENTER);
$objAlignA1->setWrapText(true);

//設定邊框
$objBorderA1 = $objStyleA1->getBorders();
$objBorderA1->getTop()->setBorderStyle(PHPExcel_Style_Border::BORDER_THIN);
$objBorderA1->getTop()->getColor()->setRGB('FF0000');
$objBorderA1->getBottom()->setBorderStyle(PHPExcel_Style_Border::BORDER_THIN);
$objBorderA1->getLeft()->setBorderStyle(PHPExcel_Style_Border::BORDER_THIN);
$objBorderA1->getRight()->setBorderStyle(PHPExcel_Style_Border::BORDER_THIN);

//設定儲存格顏色
$objFillA1 = $objStyleA1->getFill();
$objFillA1->setFillType(PHPExcel_Style_Fill::FILL_SOLID);
$objFillA1->getStartColor()->setRGB('99CC00');


//-------------------------工作表 1----------------------//
$objActSheet->getColumnDimension('A')->setWidth(8);
$objActSheet->getColumnDimension('B')->setAutoSize(true);
$objActSheet->getColumnDimension('C')->setWidth(40);

//複製格式到其他欄位
$objActSheet->duplicateStyle($objStyleA1, 'A1:C1');


//$objActSheet->getStyle('A1:D1')->getFill()->setFillType(PHPExcel_Style_Fill:: FILL_SOLID)->getStartColor()->setRGB('FF99CC');

$objActSheet->setCellValue('A1', '姓名')
                        ->setCellValue('B1', '電話')
                        ->setCellValue('C1', '地址');

$objActSheet->setCellValue('A2', '吳弘凱')
                        ->setCellValueExplicit('B2', '0987654321',PHPExcel_Cell_DataType:: TYPE_STRING)
                        ->setCellValue('C2', '台南縣永康市中華路619巷88弄65號4F-2');


//-------------------------工作表 2----------------------//
$objActSheet1->getColumnDimension('A')->setAutoSize(true);
$objActSheet1->getColumnDimension('B')->setAutoSize(true);
$objActSheet1->getColumnDimension('C')->setAutoSize(true);
$objActSheet1->getColumnDimension('D')->setWidth(20);

//複製格式到其他欄位
$objActSheet1->duplicateStyle($objStyleA1, 'A1:D2');
$objActSheet1->getStyle('A1')->getFont()->setSize(16);

$objActSheet1->mergeCells('A1:D1')->setCellValue('A1', '我的收支簿');

$objActSheet1->setCellValue('A2', '日期')
                        ->setCellValue('B2', '收入')
                        ->setCellValue('C2', '支出')
                        ->setCellValue('D2', '事由');

for($i=3;$i<=15;$i++){

    $income=rand(5000,20000); //隨機產生收入
    $pay=rand(10,10000); //隨機產生支出

    $objActSheet1->setCellValue("A{$i}", '2010-01-'.$i)
                                 ->setCellValue("B{$i}", $income)
                                 ->setCellValue("C{$i}", $pay)
                                 ->setCellValue("D{$i}", '事由'.$i);
}
        $n=$i-1;
    $objActSheet1->setCellValue("A{$i}", '合計:')
                                 ->setCellValue("B{$i}", "=SUM(B3:B{$n})")
                                 ->setCellValue("C{$i}", "=SUM(C3:C{$n})")
                                 ->setCellValue("D{$i}", "=B{$i}-C{$i}");

$objPHPExcel->setActiveSheetIndex(1);

//輸出
header('Content-Type: application/vnd.ms-excel');
header('Content-Disposition: attachment;filename=檔名'.date("YmdHis"));
header('Cache-Control: max-age=0');

$objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel5');
$objWriter->save('php://output');
exit;

?>