iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 23
2

今天要開始會員註冊的實作.

會員註冊

在電子商務網站中,要對商品進行上架或購買,都需要透過使用者去完成它,並針對不同的使用者會有不同的權限控管,所以最開始我們就從建立會員資料開始吧。

註冊路由

在使用者註冊的流程,我們有規劃註冊頁跟註冊資料處理兩個路由規劃,分別是/user/auth/sign-up(get)顯示使用者註冊頁面及/user/auth/sign-up(post)處理使用者資料新增

說明 網址規劃 方法
使用者註冊頁面 /user/auth/sign-up GET
使用者註冊新增 /user/auth/sign-up POST

routes/web.php

//使用者
Route::group(['prefix' => 'user'], function(){
    //使用者驗證
    Route::group(['prefix' => 'auth'], function(){
        Route::get('/sign-up', 'UserAuthController@signUpPage');
        Route::post('/sign-up', 'UserAuthController@signUpProcess');
    });
});

註冊頁控制器及模板

註冊頁在我們先前介紹控制器時,已經有拿來當作範例,在收到請求後,會顯示auth.signUp模板的資料,並將$binding變數的資料傳送到模板中做顯示

app/Http/Controllers/UserAuthController.php

<?PHP
namespace App\Http\Controllers;

use App\Http\Controllers\Controller;

class UserAuthController extends Controller
{
    public function signUpPage()
    {
        $binding = [
            'title' => '註冊',
        ];
        return view('auth.signUp', $binding);
    }
}
?>

根據使用者資料表的資料規劃,我們需要有暱稱(nickname)Email密碼(password)、及帳號類型(type)的欄位資料,為了避免使用者輸入到錯誤的密碼,額外多了一個確認密碼(password confirmation)的欄位,讓使用者可以驗證輸入的密碼是正確的,在這樣的規劃,使用者註冊頁的模板會長得像下面這樣

resources/views/auth/signUp.blade.php

<!-- 指定繼承 layout.master 母模板 -->
@extends('layout.master')

<!-- 傳送資料到母模板,並指定變數為title -->
@section('title', $title)

<!-- 傳送資料到母模板,並指定變數為content -->
@section('content')
<div class="container">
    <h1>{{ $title }}</h1>

    <form action="/user/auth/sign-up" method="post">
        <label>
            暱稱:
            <input type="text" name="nickname" placeholder="暱稱"/>
        </label>

        <label>
            E-mail:
            <input type="text" name="email" placeholder="Email"/>
        </label>

        <label>
            密碼:
            <input type="password" name="password" placeholder="密碼"/>
        </label>

        <label>
            確認密碼:
            <input type="password" name="password_confirmation" placeholder="確認密碼"/>
        </label>

        <label>
            帳號類型:
            <select name="type">
                <option value="G">一般會員</option>
                <option value="A">管理者</option>
            </select>
        </label>

        <button type="submit">註冊</button>
    </form>
</div>
@endsection

在上面的模板會看到,我們將使用者帳號類型(type)放在註冊頁當作選項資料之一,帳號類型在我們規劃中會有一般會員(G)及管理者(A)兩種類型的帳號,在正式的網站中是不能有這樣的欄位讓一般使用者作選擇的,通常會有這樣彈性的新增會員資料方式,都是放在網站後台讓網站管理者可以做這樣的管理,但這次為了能夠方便Demo,讓大家能夠更快了解Laravel,減少了很多商業邏輯及流程控制的邏輯,才統一在前台新增一般會員及管理者,在正式專案是不能這樣做的。

註冊頁資料處理控制器

在註冊頁面模板資料設計好之後,我們會需要接受表單傳送過來的資料,根據路由規劃,我們會在UserAuthController.php新增一個signUpProcess()的方法去接收傳送過來的使用者註冊資料,我們可以在控制器方法中使用request()->all()方法,去取得在這個請求中,使用者傳送過來的所有資料,像下面的範例。

<?PHP
namespace App\Http\Controllers;

use App\Http\Controllers\Controller;

class UserAuthController extends Controller
{
    //處理註冊資料
    public function signUpProcess()
    {
        //接收輸入資料
        $input = request()->all();
        var_dump($input);
        exit;
    }
}
?>

結果畫面

http://localhost:6943/user/auth/sign-up
https://ithelp.ithome.com.tw/upload/images/20191003/20105694gNtmcHBy4q.png

點擊註冊按鈕
https://ithelp.ithome.com.tw/upload/images/20191003/2010569451yVbe7KdI.png

之所以會出現這個訊息,是因為Laravel預設會作CSRF防護,這部份我們將在明天會作說明並解決。


上一篇
[Day 21] Laravel實作 - 資料庫設定及建立(六)
下一篇
[Day 23] Laravel實作 - 會員註冊(二)
系列文
Laravel從入門到放棄…………原生PHP (疑?47

尚未有邦友留言

立即登入留言