製作註冊和登入功能

14.1：製作註冊功能

製作註冊功能其實就是像上一章提到資料上傳的意思，只是資料會多一點。

製作的步驟大概是這樣:
  1. 在資料庫新增一個資料表，放註冊的資料用。
  2. 在網頁做好註冊的輸入框和按鈕。
  3. 製作php檔將資料傳到資料庫裡。
製作註冊功能
  1. 新增一個資料表叫做user。新增註冊資料所需要的欄位
    • id - 資料庫自動填入
    • 帳號(user)
    • 密碼(pwd)-記得做加密
    • 姓名(name)
    • 手機(cellphone)
    • 電子郵件(mail)
    • 時間(time)- 寫入資料時會自動填入，不需要人工填寫
    新增完的資料表架構

  2. 有註冊框的html網頁，新增一個叫reg.html的檔案
    需要的輸入框大概有下面這些:
    • 帳號(user)
    • 密碼(pwd)
    • 再次輸入密碼(pwd2)
    • 姓名(name)
    • 手機(cellphone)
    • 電子郵件(mail)
    用form和input製作輸入框，form的上傳位置為reg.php。

  3. 新增一個reg.php檔，與資料庫連線
    • 將reg.html所傳送的值抓下來。
    • 下判斷式判斷兩次密碼所輸入的值有沒有一樣，如果不一樣就彈出視窗提醒，跳回reg.html頁面。
    • 將密碼透過sha256方式做加密後再寫入資料庫。
    • 新增資料庫連線變數
    • SQL指令用insert into將資料寫入資料庫
    • 完成後用彈出式視窗顯示註冊成功或失敗，並跳回reg.html頁面

    填寫註冊資料

    送出資料後結果

    資料庫會出現一筆資料，密碼(紅框)已經加密

    兩次密碼輸入不同時

14.2： 製作登入功能

登入的功能只要有輸入"帳號"跟"密碼"就好，將這兩個值傳到php中再透果SQL的select語法做查詢，假設我查詢到有一筆資料後，就會做定義登入的程式。

假設帳號查到有一筆以上的資料，代表有帳號被重複註冊，要如何預防帳號重複註冊呢?，需要在做註冊時就做好防呆，之後會在提到。

要如何定義我已經登入呢??
要用到javascript的一個物件叫做 sessionStorage。sessionStorage的用途，簡單說就是網頁會將我的資料儲存起來，除非我用新分頁打開或用語法清除，資料才會不見。

sessionStorage語法 
// 將資料存到sessionStorage
sessionStorage.setItem('變數', '值');

// 從sessionStorage取得之前存的資料
var data = sessionStorage.getItem('變數');

// 從sessionStorage移除之前存的資料
sessionStorage.removeItem('變數');

// 從sessionStorage移除之前存的所有資料
sessionStorage.clear();

資料來源:
https://developer.mozilla.org/zh-TW/docs/Web/API/Window/sessionStorage

當我們用SQL的select，再搭配帳號和密碼的值找到一筆資料時，就會透過sessionStorage的方式將某個變數(ex:login)定義為1，代表目前是登入狀態，只要這個變數(login)不是1就代表沒有登入。

如果用select沒有找到資料代表登入失敗，變數(login)就不是1，或是用其他數字代表沒有登入。

直接實際製作
  1. 先新增一個叫做login.html的檔案
    • 新增一個div，id就叫做login，要顯示未登入或登入成功用的
    • 用form和input建立要輸入帳號(user)和密碼(password)的框框
    • form的上傳位置為 login.php
  2. 新增login.php的檔案
    • 將login.html傳送過來的值抓下來
    • 將密碼透過sha256做加密
    • 設定資料庫連線
    • SQL指令用select搭配帳號、密碼的值做查詢
    • 判斷如果有查詢到1筆資料用sessionStorage儲存資料做登入定義，並在login.html顯示登入者的名字
    • 如果沒有查到資料就登入失敗
    • 上述做完後就自動跳回login.html頁面
  3. 回到login.html頁面
    • 在script中抓取sessionStorage儲存的資料，並用判斷式(if..else)判斷如果是登入狀態就顯示登入成功，並顯示使用者名字。
    • 如果是沒登入或登入失敗，就顯示 尚未登入
還沒登入時

登入成功後



登入失敗


資料來源
鳥哥上課教材資料：