getCookie

標題：自定義getCookie函式

<script type="text/javascript">
function getCookie(name) {
    var n = name + "=";
    var nlen = n.length;
    var clen = document.cookie.length;
    var i = 0;
    while(i < clen) {
        var j = i + nlen;
        if(document.cookie.substring(i, j) == n) {
            var endstr = document.cookie.indexOf(";", j);
            if(endstr == -1)
                endstr = clen;
            return unescape(document.cookie.substring(j, endstr));
        }
        i = document.cookie.indexOf(" ", i) + 1;
        if(i == 0) break;
    }
    return null;
}
function test(insert) {
    document.cookie = "nickname=" + escape(insert); //寫入Cookie
    document.getElementById("codeboxy").innerHTML = getCookie("nickname"); //輸出Cookie
}
</script>
<a href="javascript:test('程式方盒子');">Click me</a>
<div id="codeboxy"></div>

說明：
自定義getCookie函式，
可掃描cookie內指定之name的中文cookie內容。

HTML Form

標題：HTML Form to PHP常用語法範例

HTML (index.html)：

<form action="test.php" name="test" id="test" enctype="multipart/form-data" method="post">
<fieldset>
<legend>Hello CodeBoxy</legend>
    Text : <input type="text" name="t1" id="t1" value="TEXT" /><br />
    Password : <input type="password" name="p1" id="p1" value="password" /><br />
    Hidden : <input type="hidden" name="h1" id="h1" value="hidden" /><br />
    Button :
    <input type="button" name="b1" id="b1" value="Enable" />
    <input type="button" name="b2" id="b2" value="Disabled" disabled="disabled" /><br />
    File : <input type="file" name="f1" id="f1" /><br />
    Checkbox :
    <input type="checkbox" name="c1" id="c1" checked="checked" />QQBoxy
    <input type="checkbox" name="c2" id="c2" />CodeBoxy<br />
    Radio :
    <input name="r1" id="r1" type="radio" checked="checked" />QQBoxy
    <input name="r1" id="r2" type="radio" />CodeBoxy<br />
    Select :
    <select name="s1" id="s1">
        <optgroup label="QQBoxy">
        <option value="1-1">1-1</option>
        </optgroup>
        <optgroup label="CodeBoxy">
            <option value="2-1" selected="selected">2-1</option>
            <option value="2-2">2-2</option>
        </optgroup>
    </select><br />
    Textarea :<br />
    <textarea name="a1" id="a1" cols="40" rows="2">Hello&#13;&#10;CodeBoxy</textarea><br />
    <input type="image" src="qqboxy.gif" /><input type="submit" /><input type="reset" />
</fieldset>
</form>

補充：PHP GET POST

$test = !empty($_GET['test']) ? $_GET['test'] : null;

$test = !empty($_POST['test']) ? $_POST['test'] : null;

範例：

Hello CodeBoxy

Text :
Password :
Hidden :
Button :
File :
Checkbox : QQBoxyCodeBoxy
Radio : QQBoxyCodeBoxy
Select : 1-12-12-2
Textarea :
Hello CodeBoxy

說明：
簡單展示常用HTML Form語法，補充PHP為GET與POST接收語法。

JS LaTeX

標題：使用JavaScript 顯示 LaTeX 方程式範例
來源：http://latex.codecogs.com/

HTML (index.html)：

<script type="text/javascript" src="http://latex.codecogs.com/latexit.js"></script>
<div lang="latex">\frac{1+sin(x)}{y}</div>

範例：

\frac{1+sin(x)}{y}

說明：
很簡單的只要導入js腳本，
然後在標籤內加上 lang="latex" 就能夠將LaTeX顯示成圖片格式，
非常適合在沒有個人虛擬空間的部落格中使用。

jQuery Load POST

標題：jQuery Load傳值即時顯示

HTML (index.html)：

<script src="jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#myCount").click(function(){
        $("#myText").load("addaction.php", {"num1":$("#number1").val(), "num2":$("#number2").val()});
    });
});
</script>
<textarea id="number1" cols="20" rows="3">1</textarea><br />
<input type="text" id="number2" value="2" /><br />
<input type="button" id="myCount" value="Send" />
<div id="myText"></div>

PHP (addaction.php)：

<?php
$num1 = !empty($_POST['num1']) ? $_POST['num1'] : null;
$num2 = !empty($_POST['num2']) ? $_POST['num2'] : null;
$total = $num1 + $num2;
echo $num1."+".$num2."=".$total;
?>

說明：
採input text以及texterea進行範例演示，
使用jQuery Load傳遞POST給PHP進行運算並即時顯示結果。

JSON Itinerary

標題：Javascript簡單取用JOSN資料範例應用

<script type="text/javascript">
function itinerary() {
    today = new Date();
    var div = document.getElementById("div");
    var jsondata = {
        "weeks":[
            {"week":"星期日"}, //0
            {"week":"星期一"}, //1
            {"week":"星期二"}, //2
            {"week":"星期三"}, //3
            {"week":"星期四"}, //4
            {"week":"星期五"}, //5
            {"week":"星期六"}, //6
        ],
        "schedule":[
            //{"week":"星期幾", "from":"幾點", "to":"到幾點", "html":"事件內容"},
            {"week":"-1", "from":"23", "to":"24", "html":"每日事件"},
            {"week":"-1", "from":"0", "to":"1", "html":"每日事件"},
            {"week":"0", "from":"0", "to":"24", "html":"星期日事件"},
            {"week":"1", "from":"0", "to":"24", "html":"星期一事件"},
            {"week":"2", "from":"0", "to":"24", "html":"星期二事件"},
            {"week":"3", "from":"0", "to":"24", "html":"星期三事件"},
            {"week":"4", "from":"0", "to":"24", "html":"星期四事件"},
            {"week":"5", "from":"9", "to":"24", "html":"星期五事件"},
            {"week":"6", "from":"8", "to":"12", "html":"星期六事件"},
        ]
    };
    for(i=0;i<jsondata.schedule.length;i++)
        if(today.getDay() == jsondata.schedule[i].week || jsondata.schedule[i].week == -1)
            if(today.getHours()>=jsondata.schedule[i].from && today.getHours()<jsondata.schedule[i].to)
                div.innerHTML += jsondata.schedule[i].html + "<br />";
}
window.onload = itinerary;
</script>
<div id="div" align="center">--- List of itineraries ---<br /></div>

說明：
簡單利用JavsScript讀取JSON格式之星期及行程表內容，
比起採用陣列方式來紀錄更加清楚明瞭，
若搭配Google spreadsheet將更加簡單方便。

getElementsByClassName

標題：自定義getElementsByClassName函式

<script type="text/javascript">
function getElementsByClassName(className, parentElement){
    if (typeof parentElement == 'string'){
        parentElement = document.getElementById(parentElement);
    } else if (typeof parentElement != 'object' || typeof parentElement.tagName != 'string'){
        parentElement = document.body;
    }
    var elems = parentElement.getElementsByTagName("*");
    var result=[];
    for (i=0; j=elems[i]; i++) {
        if ((" "+j.className+" ").indexOf(" "+className+" ")!=-1) {
            result.push(j);
        }
    }
    return result;
}
function test() {
    var divs1 = getElementsByClassName('myclass');
    var divs2 = getElementsByClassName('myclass','parent');
    var divs3 = getElementsByClassName('myclass',document.getElementById('parent'));
    alert(divs1[0].innerText);
    alert(divs2[1].innerText);
    alert(divs3[2].innerText);
}
</script>
<a href="javascript:test();">Click me</a>
<div id="parent">
    <div class="myclass">1</div>
    <div class="myclass">2</div>
    <div class="myclass">3</div>
</div>

說明：
自定義getElementsByClassName函式，
可掃描指定id內之所有class名稱並以陣列儲存。

PDO SQLite Class

標題：採Class寫法之PDO連接SQLite

PHP (index.php)：

<?php
$test = new sql;
echo $test->connectsql();
class sql {
    public $dsn = "sqlite:hello.sqlite3";
    public $user = null;
    public $password = null;
    //建立資料庫
    function connectsql() {
        try {
            //連結資料庫
            $dbq = new PDO($this->dsn, $this->user, $this->password);
            echo "PDO Connection ok<br />";
            //建立資料表db_math
            //新增INTEGER屬性PRIMARY KEY特性的id欄位
            //新增INT屬性的project欄位
            //新增TEXT屬性的function欄位
            $dbq->exec("CREATE TABLE db_math(id INTEGER PRIMARY KEY, project INT, function TEXT)");
            echo "Create Table ok<br />";
            //建立索引db_math_id並指定為資料表db_math的id欄位
            $dbq->exec("CREATE INDEX db_math_id ON db_math(id)");
            echo "Create Index ok<br />";
            //寫入資料3筆
            $dbq->exec("INSERT INTO db_math(project,function) VALUES (1,'2+3')");
            $dbq->exec("INSERT INTO db_math(project,function) VALUES (1,'4+5')");
            $dbq->exec("INSERT INTO db_math(project,function) VALUES (2,'6+7')");
            echo "Insert Data ok<br />";
            //檢查若未成功則還原
            $dbq->beginTransaction();
            //搜尋全部資料
            $stq = $dbq->prepare('SELECT *FROM db_math');
            $stq->execute();
            $result = $stq->fetchAll();
            //印出資料內容
            foreach($result as $arr) {
                print_r($arr);
                echo "<br />";
            }
            //搜尋project欄位值為1的資料
            $stq = $dbq->prepare("SELECT * FROM db_math WHERE project = '1'");
            $stq->execute();
            $result = $stq->fetchAll();
            //印出資料內容
            foreach($result as $arr)
                echo $arr['id'].", ".$arr['project'].", ".$arr['function']."<br />";
            
            $this->dsn = null;
        } catch (PDOException $e) {
            //印出錯誤訊息
            echo "Connection failed: ".$e->getMessage()."<br />";
            $this->dsn = null;
        }
    }
}
?>

輸出結果：
PDO Connection ok Create Table ok Create Index ok Insert Data ok Array ( [id] => 1 [0] => 1 [project] => 1 [1] => 1 [function] => 2+3 [2] => 2+3 ) Array ( [id] => 2 [0] => 2 [project] => 1 [1] => 1 [function] => 4+5 [2] => 4+5 ) Array ( [id] => 3 [0] => 3 [project] => 2 [1] => 2 [function] => 6+7 [2] => 6+7 ) 1, 1, 2+3 2, 1, 4+5
說明：
採類別的寫法撰寫基本PDO連結資料庫，以及建立SQLite3資料表並進行Select搜尋之範例，
使用PDO請記得將相關之PHP extension打開。

PHP exec C

標題：PHP與C相互傳遞與接收
程式：
PHP (index.php)：

<?php
//傳遞變數給exe執行檔
$text = exec("chello\\chello.exe Hello PHPBoxy", $arr);
 
//印出陣列大小
echo count($arr)."<br /><br />";
 
//印出陣列結果
foreach($arr as $value)
    echo $value."<br />";
 
//僅印出最後一行
echo "<br />".$text;
?>

C (chello\chello.exe):

#include <stdio.h>
#include <stdlib.h>
#include <string.h>

int main(int argc, char** argv) {
    char str1[1024], str2[1024], str3[1024];
    if(argc > 1) {
        strncpy(str1,argv[0],sizeof(str1)-1);
        strncpy(str2,argv[1],sizeof(str2)-1);
        strncpy(str3,argv[2],sizeof(str3)-1);
        printf("%s\n%s\n%s", str1, str2, str3);
    } else {
        printf("%d\n", argc);
    }
    return (EXIT_SUCCESS);
}

輸出結果：
3 cHello\chello.exe Hello PHPBoxy PHPBoxy

說明：
利用PHP傳遞『Hello』與『PHPBoxy』兩個字串給執行檔接收，
再經由C/CPP程式printf回傳給PHP三行字串內容，
注意當argv需要做字串的處理時必須要重新複製一份來進行修改，
若直接使用argv來做修改可能會導致資料錯誤的發生。

Edit rule

標題：編輯規則

說明：

• 圖片插入格式說明：
  點一下圖片即會顯示調整Bar，這時候請選擇適當的格式，若格式還是跑掉，請參考動態教學。