0%

[技能檢定]題組四 步驟10 製作後台管理者權限設置功能

這邊我們順著步驟六的功能接著把後台的一些簡單功能及頁面設置先做完,爭取更多的時間來製作比較麻煩的購物車及商品管理功能

  1. ./back/admin.php 中直接利用js的語法來製作新增管理者的按鈕跳頁功能

    1
    2
    3
    4
    <div class="ct">
    <!--使用js來跳轉頁面-->
    <button onclick="location.href='add_admin'">新增管理員</button>
    </div>
  2. ./back/admin.php 中建置列表外觀

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div class="ct">
    <button>新增管理員</button>
    </div>
    <table class="all ct">
    <tr>
    <td class="tt">帳號</td>
    <td class="tt">密碼</td>
    <td class="tt">管理</td>
    </tr>
    <tr>
    <td class="pp"></td>
    <td class="pp"></td>
    <td class="pp"></td>
    </tr>
    </table>
    <div class="ct">
    <button>返回</button>
    </div>
  3. 為了方便測試,可以先手動建置幾個管理者帳號在資料表中

  1. 撰寫管理者列表功能,要注意排除admin這個帳號不能被編輯

    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
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <table class="all ct">
    <tr>
    <td class="tt">帳號</td>
    <td class="tt">密碼</td>
    <td class="tt">管理</td>
    </tr>
    <?php
    //取出所有管理員資料
    $rows=$Admin->all();
    //使用迴圈來取出資料
    foreach ($rows as $row) {
    ?>
    <tr>
    <td class="pp"><?=$row['acc'];?></td>
    <!--密碼欄位使用*來代替-->
    <td class="pp"><?=str_repeat("*",mb_strlen($row['pw']));?></td>
    <td class="pp">
    <?php
    //判斷是否為最高權限
    if($row['acc']=='admin'){
    echo "此帳號為最高權限";
    }else{
    ?>
    <!--使用js來跳轉頁面至修改功能,並帶上資料id-->
    <button onclick="location.href='?do=edit_admin&id=<?=$row['id'];?>'">修改</button>
    <!--使用js來跳轉頁面至刪除功能,並帶上資料id-->
    <button onclick="del('admin',<?=$row['id'];?>)">刪除</button>
    <?php
    }
    ?>
    </td>
    </tr>
    <?php
    }
    ?>
    </table>
    <div class="ct">
    <button onclick="location.href='index.php'">返回</button>
    </div>

  2. ./js/js.js 中建立一個javascript函式 del(table,id) 做為刪除資料的 ajax 共用函式功能,後台的所有刪除資料功能幾乎都能共用同樣的機制來處理,可以少寫很多程式碼

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    /**
    * 刪除指定id的資料
    * @param {*} table
    * @param {*} id
    *
    */
    function del(table,id){
    $.post("./api/del.php",{table,id},function(){
    location.reload()
    })
    }
  3. ./api/del.php 中建立刪除api,這裏利用到可變變數的方式來快速取用類別中的del()方法

    1
    2
    3
    4
    5
    include_once "db.php";
    //根據傳入的資料表名稱來建立資料表物件
    $db=new DB($_POST['table']);
    //根據傳入的id來刪除資料
    $db->del($_POST['id']);