電話簿+垂直捲軸

:::

[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'>« 上一頁</a>
        <a class='nextPage'>下一頁 »</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);
    }

}
?>