중복 검사 기능을 구현하기 위해 JQeury와 Ajax를 이용했다.
JQeury / Ajax
JQuery는 흔히 말해 JavaScript 라이브러리이다. JavaScript를 좀 더 직관적으로 이해할 수 있고, 복잡한 문법을 간결하게 표현할 수 있게 다양한 모듈들이 존재한다.
Ajax는 Asynchronous Javascript And XML의 약자로 비동기식으로 자바스크립트를 활용하여 서버와 클라이언트 간에 XML데이터를 주고 받는 기술이다.
즉, Ajax를 사용하면 전체 웹페이지를 다시 로딩하지 않은 채로 페이지 일부를 로딩할 수 있다. 비동기식으로 말이다.
JQeury안에 들어 있는 Ajax를 사용했다.
JQuery를 사용하는 방법은 2가지가 존재한다.
1. 원본 출처 import
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
2. 파일을 직접 다운로드 후 import
<script src="jquery 경로"></script>
저번에 비해 약간의 파일이 추가 됐다. 중복 검사를 진행할 php파일을 따로 뺐다. 이번 시간에 소개할 것은 member_duplicate.php라는 파일로 중복검사를 진행하는 파일과 member_register.html로 비동기적으로 요청을 처리하는 코드이다.
member_register.html
해당 파일은 회원가입 폼을 제공하는 html파일이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>회원가입</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#checkName").click(function(){
var username = $("#username").val();
$.ajax({
async: true,
type: 'POST',
data: {'username': username},
url: '/member/member_duplicate.php',
dataType: 'text',
success: function(data){
if (data == "yes") {
alert('이미 존재하는 아이디입니다.');
} else {
alert('사용 가능한 아이디입니다.');
}
},
error: function(error){
alert('error: ' + error);
}
});
});
});
</script>
</head>
<body>
<h2>회원가입</h2>
<form action="member_check.php" method="post">
<label for="username">이름</label><br>
<input type="text" id="username" name="username" placeholder="이름"> <input type="button" id="checkName" name="checkName" value="중복검사"><br><br>
<label for="id">아이디</label><br>
<input type="text" id="id" name="id" placeholder="아이디"><br><br>
<label for="password">비밀번호</label><br>
<input type="password" id="password" name="password" placeholder="비밀번호"><br><br>
<input type="submit" value="완료">
</form>
</body>
</html>
간단하게 이름, 아이디, 비밀번호로 구성되어 있으며 중복검사 버튼을 클릭하면 비동기적으로 중복검사를 진행한다. 기본적인 검사 순서는 다음과 같다.
1. 중복검사 버튼을 Listen한다. (클릭 시 비동기적으로 중복검사)
2. 이름 폼의 데이터를 가져와 서버에게 비동기적으로 데이터를 전송한다.
3. 서버는 받은 데이터를 조회 후 결과를 반환한다.
- $(document).ready: 웹페이지가 로드 되면 콜백함수 실행
- #[id]: html파일의 id속성에 해당하는 데이터를 파싱
member_duplicate
<?php
include "/opt/homebrew/var/www/db/db_init.php";
if (getenv("REQUEST_METHOD") == "POST") {
$username = $_POST["username"];
$sql = "SELECT username FROM login WHERE username='$username'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
echo "yes";
} else {
echo "no";
}
}
간단하게 username이 있는 경우 없는 경우 다른 값을 echo 하도록 설정했다.