月光林地的網頁技術部

網頁課程教材

0%

[技能檢定]題組一 步驟22 處理登入功能及相關連結修改

發表於 更新於 歸屬於 ， ，

根據版型的提示，前台有一個登理登入的按鈕可以連到登入畫面，登入後到後台時有一個按鈕可以登出，而如果在登入的狀態下停在前台時，原本的管理登入按鈕會變成是可以跳到後台的按鈕，這表示我們需要有一個機制來記錄管理員的登入狀態，才能根據這個狀態對按鈕做出不同的功能，而後台的管理登出按鈕，題目只要求可以跳到管理登入的畫面，並沒有要求要做出真正的登出功能，比如清除session來登出，因此如果時間來不及，可以做成連結跳轉到登入畫面就可以了。時間足夠的話，可以把清除session的真正登出功能也做上。

登入及登出的按鈕功能在題目中並沒有特別的要求，如果正常解題時間來不及的話，可以不用處理按鈕的問題，先以符合題目要求的項目優先製作。

  • 修改 admin.php 的管理登出按鈕中的onclick事件，我們這裹示範利用session登出的做法
  • 撰寫 ./api/logout.php 的登出功能，清除session後，要配合題目指示回到管理登入頁面(index.php?do=login)
  • 在 /view/front/login.php 中撰寫登入功能，登入成功時增加一個session來記錄登入狀態
  • 題組一中並沒有要求要使用session或cookie來處理登入的功能，所以額外的功能建議是時間足夠時再來製作。
  • 在 index.php 中修改管理登入連結的按鈕，依據session來決定要顯示的文字及連結內容．

ADMIN-前台管理登入功能

我們可以將登入判斷的功能做在類別中，減少在頁面上直接處理邏輯。
/Controller/Admin.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
 * 參數$user是包含帳號密碼的陣列
 */
function login($user){
    if(!empty($user)){

        //利用count()方法來計算資料表中是否有符合的資料
        $chk=$this->count($user);

        if($chk){
            //如果資料符合則建立一個session並將頁面導向後台頁面
            $_SESSION['login']=1
            to("backend.php");
        }else{
            //如果帳號密碼不符，則輸出js的alert訊息
        ?>
        <script>alert("帳號或密碼輸入錯誤!")</script>
        <?php
        }
    }
}

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
<?php
//直接將$_POST陣列代入login()方法中
//如果$_POST是空的則不會有任何反應
//如果$_POST不是空的，則會進行登入的判斷
$Admin->login($_POST);

?>
<div class="di"
    style="height:540px; border:#999 1px solid; width:53.2%; 
           margin:2px 0px 0px 0px; float:left; position:relative; left:20px;">
    <?php include "marquee.php";?>
    <div style="height:32px; display:block;"></div>
    <!--正中央-->
    <!--action的對像是index.php?do=login，可以簡寫成?do=login-->
    <form method="post" action="?do=login">
        <p class="t botli">管理員登入區</p>
        <p class="cent">帳號 ： <input name="acc" autofocus="" type="text"></p>
        <p class="cent">密碼 ： <input name="pw" type="password"></p>
        <p class="cent">
            <input value="送出" type="submit">
            <input type="reset" value="清除">
        </p>
    </form>
</div>

api/logout.php

1
2
3
4
5
include_once "../base.php";

//使用unset()來清掉session的內容即可達到登出的目的
unset($_SESSION['login']);
to("../index.php?do=login");

index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
//判斷session的有無來決定要button的行為及文字
if(isset($_SESSION['login'])){
    $url="lo('back.php')";
    $str="返回管理";
}else{
    $url="lo('index.php?do=login')";
    $str="管理登入";
}
?>
<button style="width:100%; margin-left:auto; margin-right:auto; margin-top:2px; height:50px;"
      onclick="<?=$url;?>">
    <?=$str;?>
</button>

back.php

1
2
3
4
5
6
<td>
    <button onclick="location.replace('./api/logout.php')"
              style="width:99%; margin-right:2px; height:50px;">
        管理登出
    </button>
</td>

最後檢查

完成所有功能後，如果有時間，請記得完整的檢查一次所有的功能，尤其實是進站人數的功能需要關掉全部的瀏灠器再開，一定要確實檢查session有沒有正常運作：

  1. 關掉全部的瀏灠器。
  2. 打開瀏灠器輸入http://localhost 或 http://127.0.0.1 確認首頁是正常的
  3. 檢查首頁的各個區塊是否都顯示正常:
    • 主次選單的顯示狀況是否正常
    • 動畫輪播是否正常
    • 最新消息的顯示及彈出視窗是否常正
    • 校園映像圖片輪播是否正常
    • 按F5看一下進站人數是否正常
    • 頁尾版權顯示是否正常
    • 標題區圖片顯示是否正常
  4. 檢查首頁所有的連結，是否都能導向到正確的頁面
  5. 檢查更多消息頁面的各功能及分頁是否正常
  6. 檢查登入頁面及功能是否正常
  7. 登入後是否導向後台管理頁面
  8. 檢查後台所有功能的運作是否都正常
  9. 點選管理登出是否正確回到管理登入頁