月光林地的網頁技術部

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

發表於 2021-09-26 更新於 2024-01-04 歸屬於網頁設計乙級，進階解題版，題組04

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

閱讀全文 »

[技能檢定]題組四步驟9 製作帳號登出功能

發表於 2021-09-26 更新於 2024-01-04 歸屬於網頁設計乙級，進階解題版，題組04

題目雖然沒有要求要製作登出的功能，但是從示意圖和檢定現場展示的需求來看，有一個登出的功能會比較方便。

閱讀全文 »

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

發表於 2021-09-26 更新於 2024-01-04 歸屬於網頁設計乙級，進階解題版，題組04

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

把 ./view/front/login.php 中的程式碼複製一份到 ./view/front/admin_login.php，並調整內容以符合題目要求。

<h2 class="ct">管理者登入</h2>
<table class="all">
    <tr>
        <td class="tt ct">帳號</td>
        <td class="pp"><input type="text" name="acc" id="acc"></td>
    </tr>
    <tr>
        <td class="tt ct">密碼</td>
        <td class="pp"><input type="password" name="pw" id="pw"></td>
    </tr>
    <tr>
        <td class="tt ct">驗證碼</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>

由於js函式login()已經寫在 /js/js.js 中了，因此只要變更參數為 Admin 就可以了

補充

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

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

$Admin->save($admin);

[技能檢定]題組四步驟7 製作會員登入功能

發表於 2021-09-26 更新於 2024-01-04 歸屬於網頁設計乙級，進階解題版，題組04

在 login.php 中建立驗證碼程式，這裏我們採session的方式來建立驗證碼，將答案存在session中，然後登入時先使用ajax去確認答案是否正確，如果正確則繼續下一步，如果錯誤則出現錯誤提示

<tr>
    <td class="tt ct">驗證碼</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>

在 ./api/ 目錄中建立 ans.php 檔案，並撰寫檢查驗證碼的功能

1 2	include_once "../base.php"; echo ($_SESSION['ans']==$_GET['ans'])?1:0;

在 ./js/js.js 中建立檢查驗證碼的js程式碼，在外部js檔中建立這支函式，並增加帶入資料表物件名稱的參數，這會讓這支函式同時也可以適用於管理登入

function login(table){
	let user={
		acc:$("#acc").val(),
		pw:$("#pw").val()
	}
	let ans=$("#ans").val();

	$.get("./api/ans.php",{ans},(res)=>{
		if(parseInt(res)){
			$.post("./api/login.php",{table,user},(res)=>{
				if(parseInt(res)){
					switch(table){
						case "User":
							location.href="index.php";
						break;
						case "Admin":
							location.href="backend.php";
						break;
					}
				}else{
					alert("帳號或密碼錯誤")
				}
			})
		}else{
			alert("對不起，您輸入的驗證碼有誤請您重新登入")
		}
	})
}

在類別中撰寫login方法
/controller.php/User.php

function login($user){
    if($this->count($user)){
        $_SESSION['user']=$user['acc'];
        return 1;
    }else{
        return 0;
    }
}

在 ./api/ 目錄中建立 login.php 檔案，利用可變變數的方式來直接取用類別中的login方法，並將表單資料帶入
1
2
3
4
include_once "../base.php";

echo ${$_POST['table']}->login($_POST['user']);
由於題目中並沒有描述註冊是否需要驗證所有的欄位，也沒有提到登入失敗會如何，因此這些細節可以自己視時間來決定是否增加

[技能檢定]題組四步驟6 製作會員註冊功能

發表於 2021-09-26 更新於 2024-01-04 歸屬於網頁設計乙級，進階解題版，題組04

本題組在會員註冊及登入的描述上有點不清楚，比如登入失敗時的處理並沒有說明，而驗證碼錯誤的提示則是放在管理登入的描述上，因此在解題前一定要先把題目看過一次，了解題目沒有提到的細節，然後自行判斷要採用什麼對策。

閱讀全文 »

[技能檢定]題組四步驟5 製作後台頁尾版權區

發表於 2021-09-26 更新於 2024-01-04 歸屬於網頁設計乙級，進階解題版，題組04

本題組有些項目的配分明顯的CP值不同，比如頁尾版權區合計有四項描述共二十分，但實際完成這個功能的前後台，可能不用到五分鐘，所以我們會優先把這些項目做完，爭取時間來處理其它的項目

閱讀全文 »

[技能檢定]題組四步驟4 建置首頁標題區及相關頁面內容-最新消息及購物流程

發表於 2021-09-26 更新於 2024-01-04 歸屬於網頁設計乙級，進階解題版，題組04

項目三提到的內容大多都是後面的功能有做完就會有的，但反過來說，如果後面的相關功能沒完成的話，這邊會再多扣五分，而題組四中有些功能是和資料庫無關的，因此我們會先在這步驟把這些相較之下可以快速完成的功能先做完。

閱讀全文 »

[技能檢定]步驟3 建立Controller及共用函式檔

發表於 2021-09-26 更新於 2024-01-04 歸屬於網頁設計乙級，進階解題版，題組04

整理好素材及開完資料表後，接著我們會製作DB類別檔，把會用到的一些功能都封裝在DB類別中，再透過繼承去延伸各個需要的功能

建立各資料表的繼承類別

DB類別請參考先前關於DB class的解釋:
[技能檢定]網頁乙級檢定-前置作業-程式功能整合測試

在 controller 目錄下建立以下檔案，原則上是一張資料表對應一個檔案，其中 DB.php 是父類別:

接著在每個類別檔中引入DB.php，並且建立繼承的類別：

controller/Admin.php

include_once "DB.php";

class Admin extends DB{
    function __construct()
    {
        parent::__construct('admins');
    }
}

controller/Bootom.php

include_once "DB.php";

class Bottom extends DB{
    function __construct()
    {
        parent::__construct('bottoms');
    }
}

controller/Goods.php

include_once "DB.php";

class Goods extends DB{
    function __construct()
    {
        parent::__construct('goods');
    }
}

controller/Order.php

include_once "DB.php";

class Order extends DB{
    function __construct()
    {
        parent::__construct('orders');
    }
}

controller/Type.php

include_once "DB.php";
class Type extends DB{
    function __construct()
    {
        parent::__construct('types');
    }
}

controller/User.php

include_once "DB.php";
class User extends DB{
    function __construct()
    {
        parent::__construct('users');
    }
}

建完各個類別後，為了後續的操作方便，我們將這些類別都引入到一個檔案中，而這個檔案又會分別被 index.php 及 backend.php 引入，相當於整個網站的所有頁面都可以引用到這個檔案的內容。

/base.php

session_start();       //啟用session功能
date_default_timezone_set("Asia/Taipei");   //設定網站的時區為亞洲台北

//將各個類別引入到這個共用檔中
include_once __DIR__ . "/controller/Bottom.php";
include_once __DIR__ . "/controller/User.php";
include_once __DIR__ . "/controller/Admin.php";
include_once __DIR__ . "/controller/Type.php";
include_once __DIR__ . "/controller/Goods.php";
include_once __DIR__ . "/controller/Order.php";

//簡易的自訂函式
/**
 * 用來顯示陣列內容-除錯時使用
 */
function dd($array){
    echo "<pre>";
    print_r($array);
    echo "</pre>";
}

/**
 * 簡化header('location:')的使用
 * 將請求導向其他檔案或頁面
 */
function to($url){
    header("location:".$url);
}


//宣告各個類別的物件變數
$Bottom=new Bottom;
$User=new User;
$Admin=new Admin;
$Type=new Type;
$Goods=new Goods;
$Order=new Order;

接著將這個檔案引入到 index.php 及 backend.php 中：

/index.php 、 /backend.php

<?php include_once "base.php"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0039) -->
<html xmlns="http://www.w3.org/1999/xhtml">

[技能檢定]題組四步驟2 建立資料表

發表於 2021-09-26 更新於 2024-01-04 歸屬於網頁設計乙級，進階解題版，題組04

每個題組依狀況不同，在這一步有不同的做法，視自己對題目的熟悉程度來做應變，可以一次把全部資料表建完，也可以視解題的進度來逐步建立或修改資料表。

閱讀全文 »

[技能檢定]題組四步驟1 切版、建置前後台畫面

發表於 2021-09-26 更新於 2024-01-04 歸屬於網頁設計乙級，進階解題版，題組04

建立 ./css, ./js, ./api, ./icon, ./upload, ./front, ./back 等常用目錄以利檔案分類及管理
將素材檔中的 .css, .js, 及 icon 圖檔複製到相應的目錄下，商品的圖檔也一併先複製到 ./upload，這可以相當程度的簡化解題的步驟。

此題組版型中沒有包含jQuery，請至函式庫目錄下或其他題組的素材中複製jQuery檔案至 ./js目錄下

閱讀全文 »