[PHP] 로그인 기능 구현하기

 

[ 로그인 기능 구현하는 방법 ]

 

① 단순 page 이동으로 로그인 기능 구현

 

login.php의 form

<form name= "mForm" id="mForm">
	<input type="text" name="userId"/>
    <input type="password" name="userPwd" />
    <button type="submit">login</button>
</form>

-> 여기서 로그인 버튼을 누르면 

./loginChech.php 로 form data를 POST 방식으로 넘긴다.

 

loginCheck.php

$userId = $_POST['userId'];
$userPwd = $_POST['userPwd'];

// 받아온 데이터로 로그인 체크후 
// 성공 시 session 설정하고, index.php같은 페이지로 이동
// 실패 시 alert 띄우고, login.php로 다시 보냄

 

② ajax로 로그인 기능 구현

 

login.php의 form

<form name= "mForm" id="mForm">
	<input type="text" name="userId"/>
    <input type="password" name="userPwd" />
    <button type="submit">login</button>
</form>

-> button type이 submit인 것을 클릭하면 form의 내용을 action으로 전달한다 

 

 

jQuery ajax로 요청

$('#mForm button[type=submit]').click(function(e){
        e.preventDefault();
        
        let userId = $('#userId').val();
        let userPwd = $('#userPwd').val();

        $.ajax({
            url: './checkLogin.php',
            data: {
                userId: userId,
                userPwd: userPwd
            },
            type: "POST",
            dataType: "json",
            success: function(data){
                if(data.succ)
                	alert("로그인 성공");
                else
                    alert("로그인 실패");
            }, 
            error: function(err){
				alert(err);
            }
        });
    });

-> 페이지 이동없이, ajax로 아이디, 패스워드만 전달하고 로그인 성공여부만 받아온다.

 

 

 

받는 페이지 ./loginCheck.php 

<?
    header("Content-Type: application/json"); // json 으로 return 할 것이기 때문에

    $userId = $_POST["userId"]; // post 방식으로 id 넘겨줄것임
    $userPwd = $_POST["userPwd"]; // post 방식으로 pwd 넘겨줄것임
    
    // ... userId, userPwd 로 인증
    $succ = true;
    $userName = "jtory";

    $response = array(); 
    $response[0] = array( 'succ' => $succ, 'userName'=> $userName ); 
    
    echo json_encode($response); // json 형식으로 echo 함.
    // 이것 외에 다른 echo 를 하면 안됨.
?>

 

+ cf) 로그인 체크 요청을 주고받는 동안 loading progress 보여준다

$('#mForm button[type=submit]').click(function(e){
        e.preventDefault();
        
        // TODO : 시작 전 loading visible
        $.ajax({
            url: './loginCheck.php',
            type: "POST",
            dataType: "json",
            success: function(data){
                // TODO : loading invisible
            }, 
            error: function(err){
                // TODO : loading invisible
            }
        });
    });

 

 

 

참고) hello-bryan.tistory.com/275

[PHP] login, form submit으로 구현하기

hello-bryan.tistory.com/276

[PHP] Login, ajax 로 구현하기