2023.11.13 - [모의해킹 스터디/과제] - [2주차] [php / mysql] 로그인 / 회원가입 페이지 만들기
[2주차] [php / mysql] 로그인 / 회원가입 페이지 만들기
2주차 과제 회원가입 페이지 만들기 (기능 구현) 로그인 페이지 ( DB 연동하기) 1주차 과제가 아무리 봐도 마음에 안들어서 코드를 거의 다 바꿨다. 그냥 새로 시작했다고 해도 무방하당ㅎ 회원가
studysteadily.tistory.com
위 글에서 구현한 로그인 관련 코드에 세션을 추가하였다.
(세션의 의미와 장단점은 아래 글에서 확인할 수 있다.)
2023.11.14 - [모의해킹 스터디/수업 정리] - 쿠키 vs 세션 vs 토큰(JWT) | 서버가 로그인 상태를 유지하는 방법
[login_proc.php] - 로그인 처리
<?php
// 세션 시작
session_start();
include "db_conn.php";
$id = $_POST['id'];
$pw = $_POST['pw'];
//아이디 존재 여부 검사
$sql = "select * from regist where userid='$id'";
$result = mysqli_query($db_conn, $sql);
$num = mysqli_num_rows($result);
if(!$num){ // 아이디가 존재하지 않으면 로그인 페이지로 돌아가기
echo "<script>
alert(\"일치하는 아이디가 없습니다.\");
history.back();
</script>";
exit;
} else{ // 아이디가 존재하면 비밀번호 확인
$row = mysqli_fetch_array($result);
if($row['userpw'] != $pw){ // 비밀번호 불일치 시 로그인 페이지로 돌아가기
echo "<script>
alert(\"비밀번호가 일치하지 않습니다.\");
history.back();
</script>";
exit;
}else{ // 비밀번호 일치 시 세션 변수 생성
$_SESSION['name'] = $row['username'];
mysqli_close($db_conn);
header("Location: index.php");
}
}
?>
우선 세션을 사용하기 위해서는 session_start()로 세션을 시작해줘야 한다.
로그인에 성공하면 name이라는 세션 변수($_SESSION['name'])를 생성해서 해당 회원의 이름을 저장하도록 했다.
[login.php] - 로그인 페이지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>로그인</title>
<script type="text/javascript">
function login_check(){
var userid = document.getElementById("id");
var userpw = document.getElementById("pw");
if(userid.value == ""){
var err_txt = document.querySelector(".err_id");
err_txt.textContent = "아이디를 입력하세요.";
userid.focus();
return false;
};
if(userpw.value ==""){
var err_txt = document.querySelector(".err_pw");
err_txt.textContent = "비밀번호를 입력하세요.";
userpw.focus();
return false;
};
};
</script>
</head>
<body>
<?php
session_start();
if(isset($_SESSION['name'])){
echo "<script>
alert(\"이미 로그인 하셨습니다.\");
location.href = \"index.php\";
</script>";
}else{?>
<div id="login_wrap" class="wrap">
<div>
<h1>Login</h1>
<form action="login_proc.php" method="post" name="loginform" id="login_form" class="form" onsubmit="return login_check()">
<p><input type="text" name="id" id="id" placeholder="ID"></p>
<span class="err_id"></span>
<p><input type="password" name="pw" id="pw" placeholder="Password"></p>
<span class="err_pw"></span>
<p><input type="submit" value="로그인" class="form_btn"></p>
<p class="pre_btn"><a href="regist.php">회원가입</a></p>
</form>
</div>
</div>
</body>
</html>
<?php
}
?>
로그인이 되어있는 상태라면 세션 변수에 이름이 저장되어 있을 것이다. 그러므로 isset($_SESSION['name'])으로 로그인 상태를 확인한다. 로그인된 사용자가 로그인페이지에 접근 시 이미 로그인 되었다는 알람창을 띄우고 index 페이지로 이동되게 구현했다.
[regist.php] - 회원가입 페이지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>회원가입</title>
</head>
<body>
<?php
session_start();
if(isset($_SESSION['name'])){
echo "<script>
alert(\"이미 로그인 하셨습니다.\");
location.href = \"index.php\";
</script>";
}else{?>
<div id="regist_wrap" class="wrap">
<div>
<h1>Join</h1>
<form action="regist_proc.php" method="post" name="regiform" id="regist_form" class="form" onsubmit="return sendit()">
<p><input type="text" name="name" id="username" placeholder="Name"></p>
<p><input type="text" name="id" id="userid" placeholder="ID">
<input type="button" id="checkIdBtn" value="check" onclick="checkId()"></p>
<p><input type="password" name="pw" id="userpw" placeholder="Password"></p>
<p><input type="password" name="pw_ch" id="userpw_ch" placeholder="Password Check"></p>
<p><input type="submit" value="회원가입" id="join_button" class="form_btn"></p>
<p class="pre_btn">Are you join? <a href="login.php">Login</a></p>
</form>
</div>
</div>
</body>
</html>
<?php
}
?>
회원가입 페이지로 마찬가지로 name 변수를 확인하여 로그인된 사용자라면 로그인 되었다는 알람창을 띄우고 index 페이지로 이동시킨다. 로그인되어있지 않은 경우에만 회원가입 폼이 나타나도록 했다.
[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>
</head>
<body>
<?php
session_start();
$name = isset($_SESSION['name'])? $_SESSION['name']:"";
if(!$name){
echo "<script>
location.href=\"login.php\";
</script>";
}else{?>
<p><b><?php echo $name; ?></b>님, 반갑습니다.</p>
<p><button onclick="location.href='logout.php'">로그아웃</button></p>
<?php
}
?>
</body>
</html>
메인페이지에서는 우선 $name에 name 세션 변수 값을 저장한다. 만약 로그인 상태라면 값이 저장될 것이고, 아직 로그인이 되지 않은 상태라면 공백 값이 저장된다.
이후 로그인 상태라면 세션에 저장된 사용자 이름이 화면에 출력되도록 하였다.
로그인을 해보면 다음과 같이 내 이름이 잘 나온다!
[logout.php] - 로그아웃 처리
<?php
session_start();
// 세션 변수 해제
session_unset();
// 세션ID 삭제
if (ini_get("session.use_cookies")) {
$params = session_get_cookie_params();
setcookie(
session_name(), '', time() - 42000,
$params["path"], $params["domain"],
$params["secure"], $params["httponly"]
);
}
// 세션 파일 및 브라우저 쿠키 삭제
session_destroy();
?>
<script>
alert("로그아웃 되었습니다.");
location.replace('index.php');
</script>
로그아웃 버튼을 클릭하면 저장된 모든 세션 변수가 해제되고, 쿠키에 저장된 세션ID가 삭제되며 마지막으로 세션 파일이 삭제된다.
- session_unset() : 저장된 모든 세션 변수 해제
- session_destroy(): 세션 파일 삭제
session_destroy() 함수는 세션 파일을 삭제하지만, 세션 ID 값이 있는 쿠키는 여전히 남아있다. 그래서 setcookie()함수를 사용해 세션 ID가 저장된 쿠키를 강제로 만료시켜 삭제한다.
이 블로그를 참고하여 작성하였다!
'웹 모의해킹 스터디 > 웹 개발 (PHP | MySQL)' 카테고리의 다른 글
| [php/mysql] 게시판 글 작성 구현하기 (3) | 2023.11.21 |
|---|---|
| [php/mysql] 게시판 리스트 구현하기 (메인 페이지) (0) | 2023.11.21 |
| [3주차] [php / mysql] 4가지 로그인 과정 구현 (0) | 2023.11.15 |
| [php / mysql] 로그인 / 회원가입 페이지 만들기 (3) | 2023.11.13 |
| [1주차] [html / css] 로그인 페이지 만들기 (1) | 2023.11.01 |
