[PHP/MYSQL] 회원 전용 게시판 만들기 2. 회원가입 및 로그인

 
저번 포스트에 이어 로그인 및 회원가입 로직을 살펴보겠습니다.
먼저 로그인 페이지입니다.

login.php

<?php
include $_SERVER["DOCUMENT_ROOT"]."/inc/header.php";
?>
    <form class="row g-3 needs-validation" method="post" action="/members/login_ok.php">
        <div class="col-12">
            <label for="validationCustom02" class="form-label">아이디</label>
            <input type="text" class="form-control" id="userid" name="userid" placeholder="" required>
        </div>
        <div class="col-12">
            <label for="validationCustom02" class="form-label">비밀번호</label>
            <input type="password" class="form-control" id="passwd" name="passwd" placeholder="" required>
        </div>
               
        <div class="col-12">
            <button class="btn btn-primary" type="submit">로그인</button>
        </div>
    </form>
<?php
include $_SERVER["DOCUMENT_ROOT"]."/inc/footer.php";
?>

웹 페이지에서 로그인 폼을 생성하고 처리하는 과정을 나타냅니다. 코드의 주요 부분들은 다음과 같이 작동합니다.

1. 로그인 폼

<form class="row g-3 needs-validation" method="post" action="/members/login_ok.php">

• 이 <form> 태그는 사용자의 아이디와 비밀번호를 입력받기 위한 로그인 폼을 정의합니다.
• method="post"는 폼 데이터를 서버에 제출할 때 HTTP POST 메소드를 사용하겠다는 것을 나타냅니다.
• action="/members/login_ok.php"는 폼 데이터가 제출될 때 처리될 서버 측 스크립트의 위치를 지정합니다.

2. 입력 필드

<input type="text" class="form-control" id="userid" name="userid" placeholder="" required> 
<input type="password" class="form-control" id="passwd" name="passwd" placeholder="" required>

• 첫 번째 <input> 태그는 사용자 아이디를 입력받습니다. type="text"는 일반 텍스트 입력임을 나타냅니다.
• 두 번째 <input> 태그는 사용자의 비밀번호를 입력받습니다. type="password"는 입력된 내용이 화면에 가려져 보이지 않도록 합니다.
• 두 입력 필드 모두 required 속성을 가지고 있어서, 이 필드들이 비어 있으면 폼이 제출되지 않습니다.

3. 로그인 버튼

<button class="btn btn-primary" type="submit">로그인</button>

• 이 <button> 태그는 폼 제출 버튼으로 사용됩니다. type="submit" 속성은 버튼을 클릭하면 폼이 제출됨을 의미합니다.

로그인 폼 데이터가 제출되면 login_ok.php로 이동합니다.
login_ok.php를 살펴보겠습니다.

login_ok.php

<?php session_start();//로그인 처리와 로그인 여부를 확인하기 위해 세션을 사용한다.
include $_SERVER["DOCUMENT_ROOT"]."/inc/dbcon.php";

$userid=$_POST["userid"];
$passwd=$_POST["passwd"];
$passwd=hash('sha512',$passwd);

$query = "select * from members where userid='".$userid."' and passwd='".$passwd."'";
$result = $mysqli->query($query) or die("query error => ".$mysqli->error);
$rs = $result->fetch_object();

if($rs){
    $_SESSION['UID']= $rs->userid;//세션에 아이디값을 입력
    $_SESSION['UNAME']= $rs->username;//세션에 사용자 이름을 입력
    
    echo "<script>alert('어서오십시오.');location.href='/index.php';</script>";
    exit;
}else{
    echo "<script>alert('아이디나 암호가 틀렸습니다. 다시한번 확인해주십시오.');history.back();</script>";
    exit;
}
?>

login_ok.php는 사용자의 로그인 과정을 처리합니다. 주요 기능과 각 부분의 역할은 다음과 같습니다.

1. 세션 시작 및 데이터베이스 연결 파일 포함

<?php session_start(); // 로그인 처리와 로그인 여부 확인을 위해 세션 시작 
include $_SERVER["DOCUMENT_ROOT"]."/inc/dbcon.php"; // 데이터베이스 연결 설정 포함

• session_start(): 사용자의 로그인 상태를 추적하기 위해 PHP 세션을 시작합니다.
• include $_SERVER["DOCUMENT_ROOT"]."/inc/dbcon.php";: 데이터베이스 연결 설정이 포함된 dbcon.php 파일을 포함합니다.

2. 사용자 입력 처리

$userid = $_POST["userid"]; 
$passwd = $_POST["passwd"]; $passwd = hash('sha512', $passwd);

• 사용자가 입력한 아이디(userid)와 비밀번호(passwd)를 받아옵니다.
• 비밀번호는 SHA-512 해시 알고리즘을 사용하여 해싱합니다. 이는 보안을 강화하기 위한 조치입니다.

3. 데이터베이스 쿼리

$query = "select * from members where userid='".$userid."' and passwd='".$passwd."'";
$result = $mysqli->query($query) or die("query error => ".$mysqli->error);
$rs = $result->fetch_object();

• members 테이블에서 입력받은 아이디와 해시된 비밀번호를 가진 사용자를 찾는 쿼리를 실행합니다.
• 쿼리 결과는 $rs 객체에 저장됩니다.

4. 로그인 검증 및 세션 처리

if($rs){ $_SESSION['UID'] = $rs->userid; $_SESSION['UNAME'] = $rs->username; ... }else{ ... }

• $rs 객체가 존재하면, 즉 사용자 정보가 데이터베이스에서 발견되면, 해당 사용자가 성공적으로 로그인한 것으로 간주합니다.
• 로그인 성공 시, 사용자의 아이디와 이름을 세션 변수에 저장합니다.

5. 사용자 리디렉션 및 메시지 출력

echo "<script>alert('어서오십시오.');location.href='/index.php';</script>";
echo "<script>alert('아이디나 암호가 틀렸습니다. 다시한번 확인해주십시오.');history.back();</script>";

• 로그인에 성공하면 사용자에게 환영 메시지를 표시하고 메인 페이지(/index.php)로 리디렉션합니다.
• 로그인 실패 시 오류 메시지를 표시하고 이전 페이지로 돌아가게 합니다.

로그인 페이지의 정상 출력 화면입니다.

logout.php

<?php session_start();

session_destroy();

echo "<script>alert('로그아웃 되었습니다.');location.href='/index.php';</script>";
exit;
?>

1. 세션 파괴

session_destroy();

• session_destroy(): 현재 세션에 저장된 모든 데이터를 제거하고 세션을 파괴합니다. 이는 사용자가 로그아웃했을 때 수행되며, 세션에 저장된 모든 사용자 정보를 제거하여 로그아웃 상태를 만듭니다.

이제 로그인 과정을 모두 살펴보았습니다. 이어서 로그인에 사용할 계정을 생성하기 위해 회원가입 페이지를 구현해보도록 하겠습니다.

signup.php

<?php
include $_SERVER["DOCUMENT_ROOT"]."/inc/header.php";
?>

        <form class="row g-3 needs-validation" method="post" action="signup_ok.php">
        <div class="col-12">
            <label for="validationCustom01" class="form-label">이름</label>
            <input type="text" class="form-control" id="userame" name="username" placeholder="" required>
        </div>
        <div class="col-12">
            <label for="validationCustom02" class="form-label">아이디</label>
            <input type="text" class="form-control" id="userid" name="userid" placeholder="" required>
        </div>
        <div class="col-12">
            <label for="validationCustom02" class="form-label">비밀번호</label>
            <input type="password" class="form-control" id="passwd" name="passwd" placeholder="" required>
        </div>
        <div class="col-12">
            <label for="validationCustomUsername" class="form-label">이메일</label>
            <div class="input-group has-validation">
            <span class="input-group-text" id="inputGroupPrepend">@</span>
            <input type="email" class="form-control" id="email" name="email" placeholder="" required>
            </div>
        </div>
       
        <div class="col-12">
            <button class="btn btn-primary" type="submit">가입하기</button>
        </div>
        </form>
   
<?php
include $_SERVER["DOCUMENT_ROOT"]."/inc/footer.php";
?>

signup.php는 웹사이트의 사용자 등록(회원가입) 폼을 생성하고, 사용자 입력을 받는 기능을 구현합니다. 각 부분의 역할은 다음과 같습니다.

1. 회원가입 폼

<form class="row g-3 needs-validation" method="post" action="signup_ok.php">

• <form> 태그는 사용자 입력을 받기 위한 폼을 정의합니다.
• method="post"는 폼 데이터를 서버에 제출할 때 HTTP POST 메소드를 사용하겠다는 것을 나타냅니다.
• action="signup_ok.php"는 폼 데이터가 제출될 때 처리될 서버 측 스크립트의 위치를 지정합니다.

2. 입력 필드

• 사용자 이름, 아이디, 비밀번호, 이메일을 입력받기 위한 여러 <input> 태그들이 있습니다. 각각 required 속성을 가지고 있어, 필수 입력 필드임을 나타냅니다.
• 이메일 입력 필드 앞에는 @ 기호가 있는 입력 그룹이 있어 사용자가 이메일 주소를 입력하는 것임을 명확히 합니다.

3. 제출 버튼

<button class="btn btn-primary" type="submit">가입하기</button>

• 이 <button> 태그는 폼 제출 버튼으로 사용됩니다. type="submit" 속성은 버튼을 클릭하면 폼이 제출됨을 의미합니다.

회원가입 폼 데이터가 제출되면 signup_ok.php로 이동합니다.
signup_ok.php를 살펴보겠습니다.

signup_ok.php

<?php
include $_SERVER["DOCUMENT_ROOT"]."/inc/dbcon.php";

$userid=$_POST["userid"];
$username=$_POST["username"];
$email=$_POST["email"];
$passwd=$_POST["passwd"];
$passwd=hash('sha512',$passwd);

$sql="INSERT INTO members
        (userid, username, email, passwd)
        VALUES('".$userid."', '".$username."', '".$email."', '".$passwd."')";
$result=$mysqli->query($sql) or die($mysqli->error);

if($result){
    echo "<script>alert('가입을 환영합니다.');location.href='/index.php';</script>";
    exit;
}else{
    echo "<script>alert('회원가입에 실패했습니다.');history.back();</script>";
    exit;
}

?>

signup_ok.php는 사용자로부터 입력받은 데이터를 사용하여 새로운 회원가입을 처리하는 코드입니다. 각 부분의 역할은 다음과 같습니다.

1. 사용자 입력 처리

$userid = $_POST["userid"];
$username = $_POST["username"];
$email = $_POST["email"];
$passwd = $_POST["passwd"];
$passwd = hash('sha512', $passwd);

• 사용자로부터 입력받은 아이디(userid), 사용자 이름(username), 이메일(email), 비밀번호(passwd)를 변수에 저장합니다.
• 비밀번호는 SHA-512 해시 함수를 사용하여 해싱합니다. 이는 보안을 강화하는 조치입니다.

2. 데이터베이스에 데이터 삽입

$sql = "INSERT INTO members (userid, username, email, passwd) VALUES('".$userid."', '".$username."', '".$email."', '".$passwd."')";
$result = $mysqli->query($sql) or die($mysqli->error);

• INSERT INTO SQL 명령을 사용하여 members 테이블에 새로운 사용자 레코드를 추가합니다.
• 여기서는 사용자 입력을 직접 쿼리 문자열에 포함하고 있습니다.

3. 결과 처리 및 사용자 리디렉션

if($result){ 
	echo "<script>alert('가입을 환영합니다.');location.href='/index.php';</script>"; 
} else { 
	echo "<script>alert('회원가입에 실패했습니다.');history.back();</script>";
}

• 삽입 작업이 성공하면 사용자에게 '가입을 환영합니다.'라는 메시지를 표시하고 메인 페이지(/index.php)로 리디렉션합니다.
• 실패할 경우 '회원가입에 실패했습니다.'라는 메시지를 표시하고 이전 페이지로 돌아갑니다.

회원가입 페이지의 정상 출력 화면입니다.

 
다음 포스트에서는 게시글 보기, 게시글 작성, 수정, 삭제에 대해 포스트하겠습니다.