PHP 實戰第十天：打造瀑布流留言板前後台

今天終於把瀑布流留言板的前台與後台全部完成了，先來欣賞幾張成果截圖：

今日學習重點

1. PHP 序列化與反序列化：serialize() 與 unserialize()

利用這兩個函數，封裝出了 config_set() 與 config_get() 兩個配置讀寫工具函數，方便將陣列配置持久化存儲到檔案中。

<?php
/**
 * 寫入陣列配置到檔案
 */
function config_set($fileName, $arr_var) {
    file_put_contents($fileName, serialize($arr_var));
}

/**
 * 從檔案讀取配置並返回陣列
 */
function config_get($fileName) {
    if (file_exists($fileName)) {
        return unserialize(file_get_contents($fileName));
    }
}

// 呼叫示範
$config = array(
    'title' => '瀑布流留言板',
    'b' => 'aaaa'
);

config_set('data.php', $config);
$config = config_get('data.php');
var_dump($config);
?>

2. jQuery 選擇器屬性過濾與樣式切換

採用 [] 屬性選擇器配合 removeClass() 與 addClass()，輕鬆實現導航高亮切換效果：

var focus_li = $("#menu li[class!=nav-header]");
focus_li.click(function() {
    focus_li.removeClass("active"); // 移除所有高亮
    $(this).addClass("active");     // 為當前點擊項添加高亮
});

3. Session 銷毀的正確姿勢

unset($_SESSION) 並無法徹底清除 Session，必須使用 session_unset() 或 session_destroy()。

4. 前台留言表單重構

採用 Bootstrap 風格的水平表單，Chrome 下效果完美，IE 部分特效缺失但功能正常：

<form class="form-horizontal" action="index.php?m=index&a=add" method="post">
    <div class="control-group">
        <label class="control-label" for="content">留言內容</label>
        <div class="controls">
            <textarea class="span8" rows="3" id="content" name="content" placeholder="輸入點留言內容吧"></textarea>
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="userName">暱稱</label>
        <div class="controls">
            <input class="span2" type="text" id="userName" name="userName" placeholder="輸入您的稱呼吧">
            <span>聯系方式</span>
            <input class="span2" type="text" id="email" name="email" placeholder="QQ、Email、手機">
            <input class="btn btn-info" type="button" id="submit" name="submit" value="留言">
        </div>
    </div>
</form>

5. 後台優雅的下拉按鈕

利用 Bootstrap 的 btn-group 與 dropdown-toggle 實現使用者選單，包含「查看網站」與「退出登入」選項：

<div class="span4" style="text-align:right">
    <div class="btn-group" style="text-align:left">
        <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
            歡迎回來 <{$userName}> <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="index.php">查看網站</a></li>
            <li class="divider"></li>
            <li><a href="admin.php?m=admin&a=ulogin">退出登陸</a></li>
        </ul>
    </div>
</div>