月光林地的網頁技術部

網頁課程教材

0%

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

發表於 更新於 歸屬於 ， ，

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

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

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

ADMIN-前台管理登入功能

/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
28
29
30
<?php
//如果判斷SESSION中有login這個變數，則將頁面導向後台去
if(isset($_SESSION['login'])){
	to("back.php");
}

//如果網址參數中帶有error這個變數，則彈出錯誤提示視窗
if(isset($_GET['error'])){
	echo "<script>alert('{$_GET['error']}')</script>";
}

?>
<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>
	<form method="post" action="./api/check.php">
		<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/check.php

1
2
3
4
5
6
7
8
9
10
include_once "db.php";
        //利用count()方法來計算資料表中是否有符合的資料
if($Admin->count(['acc'=>$_POST['acc'],'pw'=>$_POST['pw']])>0){
    //如果資料符合則建立一個session並將頁面導向後台頁面
    $_SESSION['login']=$_POST['acc'];
    to("../back.php");
}else{
    //如果帳號密碼不符，則導回登入頁面，並帶上錯誤訊息
    to("../index.php?do=login&error=帳號或密碼錯誤");
}

api/logout.php

1
2
3
4
5
//啟用session
session_start();
//使用unset()來清掉session的內容即可達到登出的目的
unset($_SESSION['login']);
header("location:../index.php");

index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?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
7
<td>
        <!--將按鈕導向api/logout.php去執行登出的動作-->
    <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. 點選管理登出是否正確回到管理登入頁