PHP - Session 활용하여 로그인, 로그아웃 구현

이태현·2025년 5월 29일

Web 개발

목록 보기

4/53

로그인 페이지

index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인 페이지</title>
    <script src="login.js"></script>
</head>
<body>
    <h1>Login</h1>
    <form action="login_ok.php" method="post" id="login_form" autocomplete="off">
        <label for="user_id">아이디</label>
        <input type="text" id="user_id" name="user_id" placeholder="아이디를 입력해 주세요.">
        <br>
        <label for="user_pw">비밀번호</label>
        <input type="password" id="user_pw" name="user_pw" placeholder="비밀번호를 입력해 주세요.">
        <br>
        <button id="login_btn">로그인</button>
    </form>
    <a href="guest_page.php">회원전용 페이지</a>
</body>
</html>

기본적인 로그인 화면을 구성해줍니다.
form 태그를 사용하여 login_ok.php 로 데이터를 넘겨줍니다.
label 태그를 사용하여 컨트롤 요소를 묶어주었습니다.
a태그를 사용해서 회원가입이 된 유저일 경우 회원전용 페이지를 이용할 수 있게 하였습니다.

label 태그 - 출처 https://codingeverybody.kr/html-label-%ED%83%9C%EA%B7%B8-%EC%98%AC%EB%B0%94%EB%A5%B8-%EC%9D%B4%ED%95%B4%EC%99%80-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95/
label태그는 컨트롤 요소들과 함께 사용하며, 가독성과 웹 접근성을 높이는 역할을 합니다.
-컨트롤 요소 : input

로그인 과정

login_ok.php

<?php
$id=(isset($_POST["user_id"]) and $_POST["user_id"]!="")?$_POST["user_id"]:"";
$pw=(isset($_POST["user_pw"]) and $_POST["user_pw"]!="")?$_POST["user_pw"]:"";

if($id==""){
    echo "
    <script>
    alert('아이디를 입력해 주세요.');
    history.back();
    </script>
    ";
    exit;
}
if($pw==""){
    echo "
    <script>
    alert('비밀번호를 입력해 주세요.');
    history.back();
    </script>
    ";
    exit;
}

if($id=="guest" && $pw=="1234"){
    session_start();

    $_SESSION["ss_id"]=$id;

    echo "
    <script>
    alert('로그인 성공');
    location.href='./guest_page.php';
    </script>";
}else{
    echo "
    <script>
    alert('로그인 실패');
    location.href='./index.php';
    </script>";
}

삼항연사자를 사용하여 조건이 맞을경우 user_id를 $id에 대입하고 아닐경우 빈 값을 대입합니다.
ex ) 조건 ? 참 : 거짓
id와 pw가 비어있을 경우, history.back() 함수를 만나 다시 로그인 페이지로 이동합니다.
id와 pw가 맞을 경우 해당 id를 session에 부여합니다.
로그인에 성공했을 때 회원전용 페이지로 이동합니다. 아닐 경우 다시 로그인 페이지로 이동합니다.

삼항연산자 - 출처
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_operator
세 개의 피연산자를 받는 유일한 연산자입니다. 앞에서부터 조건문, 물음표(?), 조건문이 참(truthy)일 경우 실행할 표현식, 콜론(:), 조건문이 거짓(falsy)일 경우 실행할 표현식이 배치됩니다. 해당 연산자는 if...else문의 대체재로 빈번히 사용됩니다.

로그인 실패
로그인 실패 후 로그인 페이지 이동

로그인 성공

회원전용 페이지

로그인 핸들러

js를 따로 만들어 준 이유는 가독성과 나중에 유지 보수관리를 편하게 하기 위해서입니다.
script를 body위에서 사용했기 때문에 "login_ok.php" Dom이 로딩이 끝나기도 전에 script가 실행되면 오류가 날 수 있어서 이후에 script가 동작하는 것이 맞다고 생각하여 DOMContentLoaded를 사용하였습니다.

login.js

document.addEventListener("DOMContentLoaded",()=>{
    const id=document.querySelector("#user_id");
    const pw=document.querySelector("#user_pw");
    const btn=document.querySelector("#login_btn");

    btn.addEventListener("click",(e)=>{
        e.preventDefault();

        if(id.value==""){
            alert("아이디를 입력해 주세요.");
            id.focus();
            return false;
        }
        if(pw.value==""){
            alert("비밀번호를 입력해 주세요.");
            pw.focus();
            return false;
        }

        login_form.submit();
    })
})

DOMContentLoaded 이벤트를 사용하면 HTML 문서가 완전히 구문 분석되고 이후 실행됩니다.
document.querySelector를 사용하여 문서내 첫번째 요소를 반환합니다.
btn에 addEventListener()를 사용하여 대상이 수신할 때 마다 호출할 함수를 실행합니다.
btn가 클릭 이벤트가 발생했을 때 다음과 같은 조건을 수행합니다.
ⅰ. preventDefault()를 사용하여 해당 클릭 기능을 정지시킵니다.
ⅱ. 조건문에 따라 id와 pw와 비어있을 경우 알림을 주고 다시 해당 필드로 옮깁니다.
ⅲ. return false를 사용하여 이후 코드가 실행되지 않게 해줍니다.
ⅳ. 모든 조건이 맞지 않을 때 다시 form태그를 실행시켜 로그인을 수행합니다.

DOMContentLoaded Event - 출처 https://developer.mozilla.org/ko/docs/Web/API/Document/DOMContentLoaded_event
-HTML 문서가 완전히 구문 분석되고 이후 실행됩니다.
document.querySelector - 출처 https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector
-Document.querySelector() 는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다.
addEventListener() - 출처 https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener
-addEventListener() 메서드는 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정합니다.
preventDefault() - 출처 https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault
-preventDefault() 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자의 기본 동작을 실행하지 않도록 지정합니다.

Guest 페이지

guest_page.php

<?php

session_start();

if(!isset($_SESSION["ss_id"]) or $_SESSION["ss_id"]==""){
    echo "
    <script>
    alert('여기는 회원전용 페이지입니다. 로그인 후 이용 가능합니다.^^');
    location.href='./index.php';
    </script>";
    exit;
}

echo "<h1>게스트 페이지 입니다.<h1>";
?>
<a href="logout.php">로그아웃</a>

isset함수를 사용하여 회원가입이 안된 유저를 확인합니다.
조건이 맞을 때 알림을 주고 로그인 페이지로 이동시킵니다.
session이 있는 유저일 경우 해당 페이지를 이용할 수 있게 됩니다.
a태그를 사용하여 로그아웃 페이지로 이동합니다.

session이 존재 할 경우

로그아웃 페이지

logout.php

<?php

session_start();
session_unset();
session_destroy();

echo "
<script>
alert('로그아웃 되었습니다. 로그인 페이지로 돌아갑니다.');
location.href='./index.php';
</script>";
?>