회원가입 기능 구현
- ID 중복 검사 기능
- 회원가입이 되어야 한다.
우선 저번에 만들었던 로그인 화면 밑에 작게 sign up이라고 회원가입을 하는 버튼을 활성화했다.
버튼을 누르면 sign_up.php로 넘어가게 된다.
ID에 원하는 ID를 넣고 Check ID 버튼을 누르면 새로운 창이 뜨면서 check_id.php가 실행된다. 만약 사용 가능한 아이디라면 사용가능하다는 문구가 뜨게 된다.
이미 있는 아이디라면 위와 같이 이미 존재하는 아이디라는 문구가 뜬다.
email과 패스워드를 입력한다.
사실 비밀번호가 일치하는지 확인하는 부분도 만들어보려고 했지만 깜빡했다.
회원가입이 되었다는 문구가 뜨게 된다.
로그인 페이지로 돌아가 입력했던 ID와 패스워드를 입력하게 되면 로그인이 되는 것을 알 수 있다.
mysql에도 입력된 것을 알 수 있다.
//sign_up.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./sign_up.js"></script>
//sign_up.js에 저장된 함수들을 사용하기 위해 위와 같이 쓴다.
</head>
<body>
<form method = "post", action = "register.php" class = "signupform">
<div class = "idForm">
<input type="text" name = "id" id="id" placeholder="ID">
<input type="hidden" name="decide_id" id="decide_id">
//decide_id는 결정된 id로 checkid 함수에서 중복 검사를 통과하고 사용자가 결정한 id이다.
<span id="decide" style='color:red;'>ID 중복 여부를 확인해주세요.</span>
<input type="button" id ="checkID" value = "Check ID" onclick="checkid();">
// 클릭하게 되면 sign_up.js에 있는 checkid()를 실행하게 된다.
</div>
<div class = "emailForm">
<input type="text" name = "email" class="email" placeholder="Username">
</div>
<div class = "passForm">
<input type="password" name = "pw" class= "pw" placeholder="Password">
</div>
<div class = "passForm">
<input type="password" name = "pwcheck" class= "pwcheck" placeholder="Password">
</div>
<input type="submit" id="register_button" value="register!" disabled=true>
</form>
</body>
</html>//sign_up.js
function checkid(){
var userid = document.getElementById("id").value;
// 현재 페이지의 "id"에서 값을 가져와 userid라는 변수에 넣는다.
if(userid){
url = "check_id.php?userid="+userid;
window.open(url, "chkid", "width=400, height=200");
// userid가 존재한다면 check_id.php에 GET으로 userid를 보내고, 창을 열게 되는데 chkid라는 이름을 가지고 가로는 400, 세로는 200이다.
}
else{
alert('Input your ID!');
//ID가 입력되지 않으면 알림이 온다.
}
}
function decide(){
document.getElementById("decide_id").value = document.getElementById("id").value;
//decide_id에 id의 값을 넣는다.
document.getElementById("id").disabled = true;
//id를 수정하지 못하게 한다.
document.getElementById("register_button").disabled = false;
// register 버튼을 활성화 시킨다.
document.getElementById("checkID").value = "다른 ID로 변경";
document.getElementById("checkID").setAttribute("onclick", "change()");
//CheckID 버튼의 이름을 바꾸고, 버튼의 값과 클릭했을 때 실행되는 함수를 바꾼다.
}
function change(){
document.getElementById("id").disabled = false;
document.getElementById("id").value = "";
//id text 박스를 활성화 시키고 비운다.
document.getElementById("register_button").disabled = true;
//reigster 버튼을 비활성화한다.
document.getElementById("checkID").value = "ID 중복 검사";
document.getElementById("checkID").setAttribute("onclick", "checkid()");
//CheckID 버튼의 이름을 바꾸고, 실행되는 함수를 바꾼다.
}//check_id.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<?php
$userid = $_GET['userid'];
$conn = new mysqli('localhost', 'root', 'password','test');
$q = "SELECT * FROM member WHERE id = '$userid'";
$result = $conn->query($q);
$row = $result->fetch_array(MYSQLI_ASSOC);
if(!$result){
ehco "$userid 는 사용가능한 아이디입니다.";?>
<input type="button" value = "이 ID를 사용" onclick="opener.parent.decide(); window.close();"><?php
// 현재 창의 부모, 즉 sign_up.php의 함수인 decide를 실행하고 해당 창을 닫는 버튼이다.
}
else{
echo "이미 존재하는 아이디입니다.";?>
<input type="button" value = "다른 ID 사용" onclick="opener.parent.change(); window.close();"><?php
// 현재 창의 부모, 즉 sign_up.php의 함수인 change를 실행하고 해당 창을 닫는 버튼이다.
}
?>
</body>
</html>//register.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<?php
$host = 'localhost';
$user = 'root';
$pw = 'password';
$db_name = 'test';
$mysqli = new mysqli($host, $user, $pw, $db_name);
$username = $_POST['decide_id'];
$userpass = $_POST['pw'];
$useremail = $_POST['email'];
#$q = "SELECT * FROM member WHERE id = '$username' AND pw = '$userpass'"
$q = "INSERT INTO member(id, email, pw, created) VALUES ('$username', '$useremail', '$userpass', default)";
$result = $mysqli->query($q);
//Insert의 경우 Select와 다르게 true/false로 값을 내놓는다.
if($result == TRUE){
echo "<script>alert('You have been registered as a member.')</script>";
echo "<script>location.replace('login.php');</script>";
exit;
// Insert가 완벽하게 진행되었으면 login.php로 넘어간다.
}
else{
echo "<script>alert('It has been error!')</script>";
echo "<script>location.replace('sign_up.php')</script>";
exit;
// 만약 실패했다면 sign_up.php로 넘어가게 된다.
}
?>
</body>
</html>
오늘 공부한 것을 올리는 공간 / 일주일에 글 3개 / 블로그 이전 : https://perorochan321.tistory.com/