[라라벨+mysql]게시판 만들기 강좌 #5. 회원 가입 페이지 만들기 2/2

회원가입페이지에 스크립트를 추가한다.

 

/resources/views/member/signup.blade.php

@extends('boards.layout')

@section('content')

<section class="vh-100" style="background-color: #e3e4e6;">

    <div class="container h-100">

      <div class="row d-flex justify-content-center align-items-center h-100">

        <div class="col-xl-9">

          <h1 class="mb-4" style="text-align:center;">회원가입</h1>

          <div class="card" style="border-radius: 15px;">

            <div class="card-body">

              <div class="row align-items-center pt-4 pb-3">

                <div class="col-md-3 ps-5">

                  <h6 class="mb-0">이름(닉네임)</h6>

                </div>

                <div class="col-md-9 pe-5">

                  <input type="text" name="name" id="name" class="form-control form-control-lg" />

                  <br>

                  <span id="namemsg"></span>

                </div>

              </div>

              <hr class="mx-n3">

              <div class="row align-items-center py-3">

                <div class="col-md-3 ps-5">

                  <h6 class="mb-0">이메일</h6>

                </div>

                <div class="col-md-9 pe-5">

                  <input type="email" name="email" id="email" class="form-control form-control-lg" placeholder="example@example.com" /><br>

                  <span id="emailmsg"></span>

                </div>

              </div>

              <hr class="mx-n3">

              <div class="row align-items-center py-3">

                <div class="col-md-3 ps-5">

                  <h6 class="mb-0">비밀번호</h6>

                </div>

                <div class="col-md-9 pe-5">

                    <input type="password" name="password1" id="password1" class="form-control form-control-lg" />

                </div>

              </div>

              <hr class="mx-n3">

              <div class="row align-items-center py-3">

                <div class="col-md-3 ps-5">

                  <h6 class="mb-0">비밀번호 확인</h6>

                </div>

                <div class="col-md-9 pe-5">

                    <input type="password" name="password2" id="password2" class="form-control form-control-lg" />

                </div>

              </div>

              <hr class="mx-n3">

              <div class="px-5 py-4" style="text-align:center;">

                <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-lg" id="signup">가입하기</button>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </section>

  <script>

    $("#signup").click(function () {

        var name=$("#name").val();

        var email=$("#email").val();

        var password1=$("#password1").val();

        var password2=$("#password2").val();

        if(!name || !email || !password1 || !password2){

          alert('필수값을 입력해주세요.');

          return false;

        }

        if(password1!=password2){

          alert('비밀번호를 다시 확인해 주십시오.');

          return false;

        }

        var data = {

          name : name,

          email : email,

          password : password1

        };

        $.ajax({

            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

            type: 'post',

            url: '{{ route('auth.signupok') }}',

            dataType: 'json',

            data: data,

            success: function(data) {

                if(data.result==true){

                    alert(data.msg);

                    location.href='/boards';

                }else{

                    alert(data.msg);

                    return false;

                }

            },

            error: function(data) {

            console.log("error" +JSON.stringify(data));

            }

        });

    });

  </script>

@endsection  

 

라라벨은 기본적으로 CSRF 토큰 방지 작업을 해주어야 한다. 

 

headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

 

이렇게 추가해 준것이다. 저 값을 가져오는 부분을 추가 해야 하는데 매 페이지마다 ajax를 많이 쓰므로 모든 페이지에 인클루드 돼 있는 layout.blade.php에 넣어준다.

 

/resources/views/boards/layout.blade.php

<!doctype html>

<html lang="kr">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <script src="https://code.jquery.com/jquery-latest.min.js"></script>

    <title>게시판</title>

    <meta name="csrf-token" content="{{ csrf_token() }}">

</head>

<body>

<div class="container">

    <header>

        @yield('header')

    </header>

    @yield('content')

</div>

</body>

</html>

 

csfr토큰을 추가해 주었다.

 

자 다시 signup.blade.php를 보자. 추가한 스크립트의 ajax에서 auth.signupok를 추가했으니 라우터에 추가해 준다.

 

/routes/web.php

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\BoardController;

use App\Http\Controllers\MemberController;

Route::get('/', function () {

    return view('welcome');

});

//게시판

Route::get('/boards', [BoardController::class, 'index'])->name('boards.index');

Route::get('/boards/show/{id}/{page}', [BoardController::class, 'show'])->name('boards.show');

//회원

Route::get('/login', [MemberController::class, 'login'])->name('auth.login');

Route::get('/signup', [MemberController::class, 'signup'])->name('auth.signup');

Route::post('/signupok', [MemberController::class, 'signupok'])->name('auth.signupok');

 

MemberController의 signupok 함수를 찾아가라고 하니 해당 함수를 추가해 주자.

 

/app/Http/Controllers/MemberController.php

<?php

namespace App\Http\Controllers;

use App\Models\Members;

use Illuminate\Http\Request;

class MemberController extends Controller

{

    public function login(){

        return view('member.login');

    }

    public function signup()

    {

        return view('member.signup');

    }

    public function signupok(Request $request){

        $passwd = $request->password;

        $passwd = hash('sha512',$passwd);

        $uid = explode("@",$request->email);

        $form_data = array(

            'userid' => $uid[0],

            'email' => $request->email,

            'passwd' => $passwd,

            'name' => $request->name,

            'username' => $request->name

        );

        $ms = Members::where('email',$request->email)->count();

        if($ms){

            return response()->json(array('msg'=> "이미 사용중인 이메일입니다.", 'result'=>false), 200);

            exit;

        }

        $rs = Members::create($form_data);

       

        if($rs){

            return response()->json(array('msg'=> "가입해 주셔서 감사합니다.", 'result'=>true), 200);

        }else{

            return response()->json(array('msg'=> "실패했습니다. 관리자에게 문의해주세요.", 'result'=>false), 200);

        }

    }

}

 

내용은 어렵지 않다. members 테이블에 입력하기 위한 form_data를 만들었고 create를 통해 등록했다. 중간에 등록한 이메일이 이미 등록된 이메일인지를 확인하는 부분도 들어 있다.

 

이렇게 해서 가입해 보고 테이블에 제대로 등록됐는지 확인해보면 된다. 다음 시간엔 가입한 이메일을 이용해서 로그인 하는 것을 해보도록 하자.

 

ps:여기부터는 안해도 된다. 그냥 추가하는 것이니 꼭 안해도 된다. 회원 가입페이지에서 사용중인 이메일인지를 확인할 수 있는 ajax를추가해보려고 한다.

 

/resources/views/member/signup.blade.php

@extends('boards.layout')

@section('content')

<section class="vh-100" style="background-color: #e3e4e6;">

    <div class="container h-100">

      <div class="row d-flex justify-content-center align-items-center h-100">

        <div class="col-xl-9">

          <h1 class="mb-4" style="text-align:center;">회원가입</h1>

          <div class="card" style="border-radius: 15px;">

            <div class="card-body">

              <div class="row align-items-center pt-4 pb-3">

                <div class="col-md-3 ps-5">

                  <h6 class="mb-0">이름(닉네임)</h6>

                </div>

                <div class="col-md-9 pe-5">

                  <input type="text" name="name" id="name" class="form-control form-control-lg" />

                  <br>

                  <span id="namemsg"></span>

                </div>

              </div>

              <hr class="mx-n3">

              <div class="row align-items-center py-3">

                <div class="col-md-3 ps-5">

                  <h6 class="mb-0">이메일</h6>

                </div>

                <div class="col-md-9 pe-5">

                  <input type="email" name="email" id="email" class="form-control form-control-lg" placeholder="example@example.com" /><br>

                  <span id="emailmsg"></span>

                </div>

              </div>

              <hr class="mx-n3">

              <div class="row align-items-center py-3">

                <div class="col-md-3 ps-5">

                  <h6 class="mb-0">비밀번호</h6>

                </div>

                <div class="col-md-9 pe-5">

                    <input type="password" name="password1" id="password1" class="form-control form-control-lg" />

                </div>

              </div>

              <hr class="mx-n3">

              <div class="row align-items-center py-3">

                <div class="col-md-3 ps-5">

                  <h6 class="mb-0">비밀번호 확인</h6>

                </div>

                <div class="col-md-9 pe-5">

                    <input type="password" name="password2" id="password2" class="form-control form-control-lg" />

                </div>

              </div>

              <hr class="mx-n3">

              <div class="px-5 py-4" style="text-align:center;">

                <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-lg" id="signup">가입하기</button>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </section>

  <script>

    $("#signup").click(function () {

        var name=$("#name").val();

        var email=$("#email").val();

        var password1=$("#password1").val();

        var password2=$("#password2").val();

        if(!name || !email || !password1 || !password2){

          alert('필수값을 입력해주세요.');

          return false;

        }

        if(password1!=password2){

          alert('비밀번호를 다시 확인해 주십시오.');

          return false;

        }

        var data = {

          name : name,

          email : email,

          password : password1

        };

        $.ajax({

            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

            type: 'post',

            url: '{{ route('auth.signupok') }}',

            dataType: 'json',

            data: data,

            success: function(data) {

                if(data.result==true){

                    alert(data.msg);

                    location.href='/boards';

                }else{

                    alert(data.msg);

                    return false;

                }

            },

            error: function(data) {

            console.log("error" +JSON.stringify(data));

            }

        });

    });

    $("#email").on("keyup", function() {

        var email=$("#email").val();

        var data = {

            email : email

        };

        $.ajax({

            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

            type: 'post',

            url: '{{ route('auth.emailcheck') }}',

            dataType: 'json',

            data: data,

            success: function(data) {

                if(data.result==true){

                    $("#emailmsg").html("<font color='blue'>"+data.msg+"</font>");

                }else{

                    $("#emailmsg").html("<font color='red'>"+data.msg+"</font>");

                }

            },

            error: function(data) {

            console.log("error" +JSON.stringify(data));

            }

        });

    });

  </script>

@endsection  

 

email에 글자를 입력하면 ajax가 작동하는 ajax를 추가했다. 마찬가지로 필요한 라우터와 콘트롤러를 추가해준다.

 

/routes/web.php

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\BoardController;

use App\Http\Controllers\MemberController;

Route::get('/', function () {

    return view('welcome');

});

//게시판

Route::get('/boards', [BoardController::class, 'index'])->name('boards.index');

Route::get('/boards/show/{id}/{page}', [BoardController::class, 'show'])->name('boards.show');

//회원

Route::get('/login', [MemberController::class, 'login'])->name('auth.login');

Route::get('/signup', [MemberController::class, 'signup'])->name('auth.signup');

Route::post('/signupok', [MemberController::class, 'signupok'])->name('auth.signupok');

Route::post('/emailcheck', [MemberController::class, 'emailcheck'])->name('auth.emailcheck');

 

콘트롤러에도 추가한다.

 

/app/Http/Controllers/MemberController.php

<?php

namespace App\Http\Controllers;

use App\Models\Members;

use Illuminate\Http\Request;

class MemberController extends Controller

{

    public function login(){

        return view('member.login');

    }

    public function signup()

    {

        return view('member.signup');

    }

    public function signupok(Request $request){

        $passwd = $request->password;

        $passwd = hash('sha512',$passwd);

        $uid = explode("@",$request->email);

        $form_data = array(

            'userid' => $uid[0],

            'email' => $request->email,

            'passwd' => $passwd,

            'name' => $request->name,

            'username' => $request->name

        );

        $ms = Members::where('email',$request->email)->count();

        if($ms){

            return response()->json(array('msg'=> "이미 사용중인 이메일입니다.", 'result'=>false), 200);

            exit;

        }

        $rs = Members::create($form_data);

       

        if($rs){

            return response()->json(array('msg'=> "가입해 주셔서 감사합니다.", 'result'=>true), 200);

        }else{

            return response()->json(array('msg'=> "실패했습니다. 관리자에게 문의해주세요.", 'result'=>false), 200);

        }

    }

    public function emailcheck(Request $request){

        $email = $request->email;

       

        $rs = Members::where('email',$email)->count();

        if($rs){

            return response()->json(array('msg'=> "이미 사용중인 이메일입니다.", 'result'=>false), 200);

        }else{

            return response()->json(array('msg'=> "사용할 수 있는 이메일입니다.", 'result'=>true), 200);

        }

    }

}

 

다 됐다.

 

회원 가입 페이지에서 테스트 하면...

 

이렇게 이메일을 입력하자 마자 결과를 알 수 있도록 표시할 수 있다.

 

라라벨이라고 해서 특별할 것은 없다. 단지 쓰는 방법이 조금 다를 뿐.