LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@AlpacaFace

＜設計＞ユーザ新規登録機能

Last updated at Posted at 2023-07-30

概要

【PHP/Laravel】プログラミング初学者によるアプリケーション開発
https://qiita.com/AlpacaFace/items/b8e05a3da599815d8e31

上記トークアプリ開発の設計を説明します。

対象機能

  • ユーザ新規登録機能

基本設計

  • トークアプリを使用するには、ユーザ新規登録を必要とする。

詳細設計

  • ユーザ新規登録には次のパラメータを設定する。

＜Router＞

  • ユーザ新規登録ボタンを押した時の画面遷移先を設定
    qiita投稿用.jpeg

routes/web.php

    // ユーザ新規登録
    Route::get('signup', 'Auth\RegisterController@showRegistrationForm')->name('signup');
    Route::post('signup', 'Auth\RegisterController@register')->name('signup.post');

＜RegisterController＞

  • 新規登録機能の制御内容を設定
    ・　app/Http/Controllers/Auth/RegisterController.php

      namespace App\Http\Controllers\Auth;
  use App\Http\Controllers\Controller;
  use App\Providers\RouteServiceProvider;
  use App\User;
  use Illuminate\Foundation\Auth\RegistersUsers;
  use Illuminate\Support\Facades\Hash;
  use Illuminate\Support\Facades\Validator;
  class RegisterController extends Controller
  {
      /*
      |--------------------------------------------------------------------------
      | Register Controller
      |--------------------------------------------------------------------------
      |
      | This controller handles the registration of new users as well as their
      | validation and creation. By default this controller uses a trait to
      | provide this functionality without requiring any additional code.
      |
      */
      use RegistersUsers;
      /**
       * Where to redirect users after registration.
       *
       * @var string
       */
      protected $redirectTo = RouteServiceProvider::HOME;
      /**
       * Create a new controller instance.
       *
       * @return void
       */
      public function __construct()
      {
          $this->middleware('guest');
       }
  		    /**
  		     * Get a validator for an incoming registration request.
  		     *
  		     * @param array $data
  		     * @return \Illuminate\Contracts\Validation\Validator
  		     */
  		    protected function validator(array $data)
  		    {
  		        return Validator::make($data, [
  		            'name' => ['required', 'string', 'max:255'],
  		            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
  		            'password' => ['required', 'string', 'min:8', 'confirmed'],
  		        ]);
  		    }
  		    /**
  		     * Create a new user instance after a valid registration.
  		     *
  		     * @param array $data
  		     * @return \App\User
  		     */
  		    protected function create(array $data)
  		    {
  		        return User::create([
  		            'name' => $data['name'],
  		            'email' => $data['email'],
  		            'password' => Hash::make($data['password']),
  		        ]);
  		    }
  		}

＜RegisterController.php＞
・　ユーザ登録後の画面遷移先をトップページへ設定

（中略）
protected $redirectTo = '/';

＜RegisterController.php＞
・　バリデーション設定

（中略）
 		return Validator::make($data, [
 		     'name' => ['required', 'string', 'max:255'],
 		     'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
 		     'password' => ['required', 'string', 'min:8', 'confirmed'],
 		]);

＜register.blade.php＞
・　showRegistrationFormアクション実行後に、resources/views/auth/register.blade.phpを表示させる処理に設定

・　resources/views/auth/register.blade.php

@extends('layouts.app')
		
@section('content')

<div class="text-center">
	<h1><i class="fab fa-telegram fa-lg pr-3"></i>Topic Posts</h1>
</div>
<div class="text-center mt-3">
	<p class="text-left d-inline-block">新規ユーザ登録すると投稿で<br>コミュニケーションができるようになります。</p>
</div>
<div class="text-center">
	<h3 class="login_title text-left d-inline-block mt-5">新規ユーザ登録</h3>
</div>
<div class="row mt-5 mb-5">
	<div class="col-sm-6 offset-sm-3">
		<form method="POST" action="{{ route('signup.post') }}">
			@csrf
                	<div class="form-group">
				<label for="name">名前</label>
				<input id="name" type="text" class="form-control" name="name" value="{{ old('name') }}">
			</div>
			<div class="form-group">
				<label for="email">メールアドレス</label>
				<input id="email" type="text" class="form-control" name="email" value="{{ old('email') }}">
			</div>
			<div class="form-group">
				<label for="password">パスワード</label>
				<input id="password" type="password" class="form-control" name="password" value="{{ old('password') }}">
			</div>
			<div class="form-group">
				<label for="password_confirmation">パスワード確認</label>
				<input id="password_confirmation" type="password" class="form-control" name="password_confirmation" value="{{ old('password_confirmation') }}">
			</div>
			<button type="submit" class="btn btn-primary mt-2">新規登録</button>
		</form>
	</div>
</div>

@endsection

＜header.blade.php＞
・　ヘッダーにユーザ登録画面への遷移リンクを貼りつけ

<ul class="navbar-nav">
	<li class="nav-item"><a href="{{ route('signup') }}" class="nav-link">新規ユーザ登録</a></li>
（中略）

動作確認テスト

１．トップページを表示
ブラウザのアドレスバーへ下記のURLを入力する。
＜http://localhost:8080/＞
確認項目：トップページが表示されること。

２．「新規ユーザ登録」画面の表示
ヘッダーの「新規ユーザ登録」をクリックする。
確認項目：「新規ユーザ登録」画面が表示されること。

３．「新規ユーザ登録」異常系テスト

＜確認項目＞
・新規登録ボタン押下後、新規登録画面に遷移し、入力値が保持されていること。

qiita投稿用.jpeg

・「新規ユーザ登録」の下にエラーが表示されること。

３−１. 新規ユーザ登録
以下を入力し、新規登録ボタンを押す。

[case1]　全て空欄
[名前]
[メールアドレス]
[パスワード]
[パスワード確認]

＜確認項目＞
・必須入力（required）のエラーが表示されること。

[case2] 登録済ユーザーのメールアドレス登録

[メールアドレス]
test1@test.com

＜確認項目＞

　　・登録済のアドレスであるエラーが表示されること。
・The email has already been taken.

[case3] アドレス以外の文字をメールアドレスとして登録
[メールアドレス]
aaaa

＜確認項目＞
・メールアドレス形式で入力を促すエラーが表示されること。

　・The email must be a valid email address.

[case4]パスワード不一致

[パスワード]
testtest

[パスワード確認]
Testtest

＜確認項目＞
・以下のエラーが表示されること。
・The password confirmation does not match.

[case5] 文字数のエラー

[名前]　288文字入力　255文字上限
テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

[メールアドレス]  255文字上限
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest@test.com

[パスワード]　最低でも8文字
test

[パスワード確認]　最低でも8文字
test

＜確認項目＞
・以下のエラーが表示されること。
・The name may not be greater than 255 characters.
・The email may not be greater than 255 characters.
・The password must be at least 8 characters.

３−２． 新規ユーザ登録の無効確認
ブラウザでAdminerのusersテーブルを表示する。
＜http://localhost:8088/＞
　　　　左ペインから「選択 users」をクリック、「データ」をクリックし、usersテーブルを表示
＜確認項目＞
・新規登録でエラーになったユーザが一覧に表示されていないことを確認する。

４．「新規ユーザ登録」正常系テスト

４-１. 以下を入力し、新規登録ボタンを押す。

[名前]
テストテスト

[メールアドレス]
testtest@test.com

[パスワード]
testtest

[パスワード確認]
testtest

＜確認項目＞
・新規登録したユーザでログイン表示されること。

４−２. 新規ユーザ登録の確認
ブラウザでAdminerのURLを入力し、usersテーブルを表示する。
＜http://localhost:8088/＞
　　　　左ペインから「選択 users」をクリック、「データ」をクリックし、usersテーブルを表示
＜確認項目＞
・新規登録したユーザが一覧に表示されること。

４−３．ユーザログアウト
１．Adminerのusersテーブルで、新規登録したユーザの「修正」カラムの「編集」の横にあるチェックボックスにチェックを入れる。
２．画面下の「選択済」の欄から、「削除」ボタンをクリックする。
３．usersテーブルから新規登録したユーザの表示行が消えたことを確認する。
４．トップページに画面遷移し、新規登録したユーザのログイン表示が消えていることを確認する。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?