개발 대상은 [로그인] 페이지이다.
구성은 다음과 같다.
login.php : 로그인 양식 페이지
login_proc.php : 로그인 처리 페이지
login.css : 로그인 페이지 CSS
1. Frontend
<login.php>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>
<link rel="stylesheet" href="../css/login.css">
</head>
<body>
<?php include "../include/header.php" ?>
<div class="login-container">
<h2>로그인</h2>
<form class="login-form" method="post" action="login_proc.php">
<label for="input_id">아이디</label>
<input id="input_id" name="input_id" type="text" placeholder="아이디 입력">
<label for="input_pw">비밀번호</label>
<input type="password" id="input_pw" name="input_pw" placeholder="비밀번호 입력">
<div class="login-actions">
<input type="submit" value="로그인">
<button type="button" onclick="location.href='sign_up.php'">회원가입</button>
</div>
</form>
</div>
</body>
</html>
| login.php |
|---|
 |
- 1. 입력값 처리
사용자가 입력한 아이디(input_id), 비밀번호(input_pw) 값은 POST방식으로 login_proc.php에 전달된다.
2. Backend
<login_proc.php>
<?php
if (empty($_POST["input_id"])) {
echo "<script>
alert('아이디를 입력해주세요');
history.go(-1);
</script>";
exit;
}
if (empty($_POST["input_pw"])) {
echo "<script>
alert('비밀번호를 입력해주세요');
history.go(-1);
</script>";
exit;
}
include "../db/db_con.php";
$input_id = $_POST["input_id"];
$input_pw = hash('sha256', $_POST["input_pw"]);
$sql = "select * from user where user_id = '$input_id'";
$result = mysqli_query($con, $sql);
$row = mysqli_fetch_assoc($result);
$db_pass = $row["user_pw"];
mysqli_close($con);
if ($input_pw == $db_pass) {
session_start();
$_SESSION["user_id"] = $row["user_id"];
$_SESSION["user_name"] = $row["user_name"];
echo "<script>
alert('로그인 완료');
location.href='../main/index.php';
</script>";
}
else {
echo "<script>
alert('정보가 일치하지 않습니다.');
history.go(-1);
</script>";
}
?>-
1. 입력값 확인
전달받은 아이디(input_id), 비밀번호(input_pw) 값이 비어있다면 이전 페이지로 돌아간다.
-
2. 식별
user 테이블에서, 사용자가 입력한 input_id 값과 같은 user_id 값을 가지는 필드를 검색한다. 결과값에서 user_pw값을 추출한다.
-
3. 인증
DB에서 추출한 user_pw 값과 사용자가 입력한 비밀번호를 해시한값이 일치하는지 확인한다.
→ 일치하면 로그인에 성공하며 user_id와 user_name에 대한 세션을 할당한다.
일치하지 않으면 다시 로그인페이지로 돌아간다.
3. 동작 정리
| 1. 로그인 페이지 기본 화면 |
|---|
 |
| 2. 로그인 정보 입력 |
|---|
 |
| 3. 로그인 결과 | |
|---|---|
 |  |
| ↑ 로그인 실패시 | ↑ 로그인 성공시 ○ Session 값에 user_id, user_name 값 저장 |
| 4. 로그인 상태 확인 |
|---|
 |
| ○ 상단바에 나타나는 회원정보를 통해 로그인 상태 확인 가능 |
