月光林地的網頁技術部

網頁課程教材

0%

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

發表於 更新於 歸屬於 ， ，

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

  1. 先確定素材目錄中會用到的圖片都已複製到 icon 目錄下了
  2. 在 ./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
    <h2>第一次購買</h2>
    <img src="./icon/0413.jpg" onclick="location.href='?do=reg'">

    <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">
                <input type="text" name="ans" id="ans">
            </td>
        </tr>
    </table>
    <div class="ct">
        <button onclick="login('mem')">確認</button>
    </div>

  1. 在 ./front/ 目錄中建立 reg.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
    31
    32
    33
    34
    35
    <h2 class="ct">會員註冊</h2>
    <!-- table.all>tr*6>td.tt.ct+td.pp>input:text -->
    <table class="all">
        <tr>
            <td class="tt ct">姓名</td>
            <td class="pp"><input type="text" name="name" id="name"></td>
        </tr>
        <tr>
            <td class="tt ct">帳號</td>
            <td class="pp">
                <input type="text" name="acc" id="acc">
                <button onclick="chkacc()">檢測帳號</button>
            </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"><input type="text" name="tel" id="tel"></td>
        </tr>
        <tr>
            <td class="tt ct">住址</td>
            <td class="pp"><input type="text" name="addr" id="addr"></td>
        </tr>
        <tr>
            <td class="tt ct">電子信箱</td>
            <td class="pp"><input type="text" name="email" id="email"></td>
        </tr>
    </table>
    <div class="ct">
        <button onclick="reg()">註冊</button>
        <button onclick='clean()'>重置</button>
    </div>

  2. 在 ./front/.php 中撰寫檢查帳號是否重覆的按鈕功能.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function chkacc(){
        let acc=$("#acc").val()
        $.get("./api/chk_acc.php",{acc},(res)=>{
            if(parseInt(res)==1 || acc=='admin'){
                alert(`此帳號${acc}已被使用`)
            }else{
                alert(`此帳號${acc}可以使用`)

            }
        })
    }

  3. 在 ./api/ 目錄中建立 chk_acc.php 檔案，並撰寫檢查帳號的功能

    1
    2
    3
    include_once "db.php";

    echo $Mem->count(['acc'=>$_GET['acc']]);

  4. 在 ./front/reg.php 中撰寫註冊會員的功能

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    function reg(){
        let user={
            name:$("#name").val(),
            acc:$("#acc").val(),
            pw:$("#pw").val(),
            tel:$("#tel").val(),
            addr:$("#addr").val(),
            email:$("#email").val(),
        }
        $.get("./api/chk_acc.php",{acc:user.acc},(res)=>{
            if(parseInt(res)==1 || user.acc=='admin'){
                alert(`此帳號${user.acc}已被使用`)
            }else{
                $.post("./api/reg.php",user,()=>{
                    alert("註冊成功，歡迎加入")
                    location.href='?do=login'
                })

            }
        })
    }

  5. 在 ./api/ 目錄中建立 reg.php 檔案，並撰寫新增會員資料到資料表的功能

    1
    2
    3
    include_once 'db.php';
    $_POST['regdate']=date("Y-m-d");
    $Mem->save($_POST);