月光林地的網頁技術部

網頁課程教材

0%

[技能檢定]題組四 步驟8 製作管理登入功能

發表於 更新於 歸屬於 ， ，

管理登入功能和會員登入功能幾乎一樣，差別在於管理登入的資料表中有一個權限的欄位我們採用序列化的字串來儲存。

  1. 把 ./front/login.php 中的程式碼複製一份到 ./front/admin.php，並調整內容以符合題目要求。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <h2>管理員登入</h2>
    <!-- table.all>tr*3>td.tt.ct+td.pp>input:text -->
    <table class="all">
        <tr>
            <td class="tt">帳號</td>
            <td class="pp"><input type="text" name="acc" id="acc"></td>
        </tr>
        <tr>
            <td class="tt">密碼</td>
            <td class="pp"><input type="password" name="pw" id="pw"></td>
        </tr>
        <tr>
            <td class="tt">驗證碼</td>
            <td class="pp">
                <?php
                $a=rand(10,99);
                $b=rand(10,99);
                $_SESSION['ans']=$a+$b;
                echo $a . " + " .$b . " =";
                ?>
                <input type="text" name="ans" id="ans"></td>
        </tr>
    </table>
    <div class="ct">
        <button onclick="login('admin')">確認</button>
    </div>
  2. 由於函式login()已經寫在 ./front/login.php 中了，因此只要複製過來改一下參數就可以了
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    //建立登入函式，並傳入table參數
    function login(table){
        //使用ajax呼叫api/chk_ans.php，並傳入ans參數
        $.get('./api/chk_ans.php',{ans:$("#ans").val()},(chk)=>{
            //判斷回傳值是否為0
            if(parseInt(chk)==0){
                //回傳值為0，顯示警告訊息
                alert("驗證碼錯誤，請重新輸入")
            }else{
                //回傳值不為0，使用ajax呼叫api/chk_pw.php，並傳入table、acc、pw參數
                $.post("./api/chk_pw.php",
                        {table,
                         acc:$("#acc").val(),
                         pw:$("#pw").val()},
                        (res)=>{
                    //判斷回傳值是否為0
                    if(parseInt(res)==0){
                        //回傳值為0，顯示警告訊息
                        alert("帳號或密碼錯誤，請重新輸入")
                    }else{
                        //回傳值不為0，導向後台管理頁面
                        location.href='back.php';
                    }
                })
            }
        })
    }

補充

如果要測試管理者帳號的話，可以先手動在資料表中塞一筆資料，而權限的字串我們可以先做一個測試用的php來產生這個序列化的字串，並寫入到資料表中

1
2
3
4
5
6
7
//手動產生一筆管理者資料進db
$admin["admin"]="admin";
$admin["pw"]="1234";
$admin["pr"]=serialize([1,2,3,4,5]);

$Admin->save($admin);