아이디 중복확인 (laravel-ajax)

아이디 중복확인은 먼저 회원가입 버튼을 누르기전 아이디 중복확인 버튼을 먼저 눌르기 때문에 ajax get 요청을 해서 확인을 진행하겠습니다. 

저는 ajax을 이용해서 진행할 예정이니 혹시 jquery에 대해서 이해가 안되실 경우 전에 설명했던 password, confirmpassword 설명한 것을 따라서 만드시는 것을 추천합니다.

 

jquery가 이미 연결되어있다는 전제조건하에

 

1. 먼저 register.blade.php에서 id input 과 중복확인 버튼을 만들어주시길 바랍니다. 

<input type="text" id="id" placeholder="아이디를 입력해주세요.">
<button id="checkId">중복확인</button>

2. @section('javascript')를 만들어서 <script></script>가 진행될 수 있게 만들어놓습니다.

<input type="text" id="id" placeholder="아이디를 입력해주세요.">
<button id="checkId">중복확인</button>

@section('javascript')
<script>
	//script가 적용될 부분
</script>
@endsection

• 참고사항▶ @section('scripts')로 하시게 될 경우 $.ajax가 제대로 적용되지 않을 수 있으니 @section('javascript')로 해주시길 바랍니다.

3. 중복확인 버튼을 클릭시 버튼 id를 통해 클릭이벤트가 진행될 수 있게 셋팅합니다.

<input type="text" id="id" placeholder="아이디를 입력해주세요.">
<button id="checkId">중복확인</button>

@section('javascript')
<script>
	const checkId = document.getElementById("checkId");
    checkId.addEventListener("click", function(){
    
    })
</script>
@endsection

• 참고사항▶ 
  • document.getElementById("checkId") ▷ document에서 id가 checkId인 것을 찾으면 중복확인 버튼을 가리킵니다.
  • checkId.addEventListenter("click", function(){})▷ 중복확인 클릭시 함수가 진행되겠다는 의미입니다. 

4. input에서 id를 입력한 value를 변수로 지정합니다. 이유는 queryString을 input에 적은 id를 보내 controller에서 User DB에 해당 id가 있는 지 확인하기 위함입니다.

<input type="text" id="id" placeholder="아이디를 입력해주세요.">
<button id="checkId">중복확인</button>

@section('javascript')
<script>
	const checkId = document.getElementById("checkId");
    checkId.addEventListener("click", function(){
    	let login_id = $("#login_id").val();
    })
</script>
@endsection

• 참고사항▶ 지금 해당 값을 어떻게 가져왔는 지 이해가 되지 않는다면 jquery Selector을 찾아서 이해하신 후에 다시 참고하시면 도움이 될 것입니다.

5. $.ajax를 이용해서 method는 get, url은 queryString으로 login_id를 보낼 수 있게 셋팅합니다.

<input type="text" id="id" placeholder="아이디를 입력해주세요.">
<button id="checkId">중복확인</button>

@section('javascript')
<script>
	const checkId = document.getElementById("checkId");
    checkId.addEventListener("click", function(){
    	let login_id = $("#login_id").val();
        $.ajax({
        	type : "GET",
            url : "/checkId/"+login_id,
            success : function(response){
            	// DB에서 id 중복확인 후에 진행될 조건을 작성할 예정 
            }
    })
</script>
@endsection

6. web.php에서 경로 "/checkId/"+login_id로 요청할 때 아이디 중복확인할 controller class로 이동할 수 있게 셋팅합니다. 저는 RegisterCheckController을 새로 생성해서 check class에 진행될 수 있게 설정했습니다.

Route::get('/checkId/{login_id}', 'RegisterCheckController@check')->name('register.check');

• 참고사항▶ 혹시 라라벨 공식문서에 web.php controller 연결하는 방법 Route::get('/checkId/{login_id}', [App\Http\Controllers\RegisterCheckController::class, 'check'])으로 했는데 제대로 연결이 안된다면 처음 라라벨 프로젝트 받으신 게 아니라 기존의 프로젝트를 받은 web.php을 사용할 때 간혹 발생될 수 있는 문제이기 때문에 예전 버전으로 코드를 작성해서 시도해보시길 바랍니다. 

7. RegisterCheckController check class를 만들고 queryString login_id 보낸 것을 User DB에서 찾을 수 있게 설정합니다.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;

class RegisterCheckController extends Controller
{
    public function check($login_id){
        $user = User::where('login_id', $login_id)->first();
    }
}

8. login_id에 해당되는 user data를 json 형식으로 보냅니다.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;

class RegisterCheckController extends Controller
{
    public function check($login_id){
        $user = User::where('login_id', $login_id)->first();
        return response()->json([
            'user' => $user
        ]);
    }
}

9. response()으로 전달된 값이 제대로 보내지는 지 확인하기 위해 $.ajax success function에서 console.log(response)으로 확인합니다.

<input type="text" id="id" placeholder="아이디를 입력해주세요.">
<button id="checkId">중복확인</button>

@section('javascript')
<script>
	const checkId = document.getElementById("checkId");
    checkId.addEventListener("click", function(){
    	let login_id = $("#login_id").val();
        $.ajax({
        	type : "GET",
            url : "/checkId/"+login_id,
            success : function(response){
            	console.log(response)
            }
    })
</script>
@endsection

• 참고사항▶ response가 제대로 전달이 되었다면 response 안에 user로 담아서 보냈기 때문에 response.user로 다시 확인하시길 바랍니다. 
• 중요사항▶ controller에서 login_id로 User DB를 찾았을 때 null로 보내지면 현재 해당 id가 중복되지 않은 것을 의미하고 값이 보내지면 이미 id가 존재하는 것을 의미하기 때문에 그 의미를 파악하고 조건문을 만들어서 중복확인을 구현할 것입니다.

10. response.user가 null일 때 사용 가능한 아이디가 alert되게 하고 만약 값이 보내졌다면 이미 사용하고 있는 아이디라고 alert처리될 수 있게 조건문을 작성합니다.

<input type="text" id="id" placeholder="아이디를 입력해주세요.">
<button id="checkId">중복확인</button>

@section('javascript')
<script>
	const checkId = document.getElementById("checkId");
    checkId.addEventListener("click", function(){
    	let login_id = $("#login_id").val();
        $.ajax({
        	type : "GET",
            url : "/checkId/"+login_id,
            success : function(response){
            	let user = response.user;
                if(user == null){
                	alert("사용 가능한 아이디입니다.")
                }
                else{
                	alert("이미 사용하고 있는 아이디입니다.")
                }
            }
    })
</script>
@endsection