회원가입에 주소검색 기능을 추가하려고 합니다.
- DB 컬럼 추가
- HTML 파일 수정
- PHP 파일 수정
- DB 추가 확인
1. DB 컬럼 추가
제일 먼저 구현했던 DB에 있는 usertable에서 컬럼 3개를 추가해야 합니다.
회원가입 페이지에서 비밀번호 재확인 칸 아래에 우편번호, 주소, 상세주소가 3가지를 추가합니다.
ALTER TABLE [테이블명] ADD [컬럼명] [타입] [옵션]
ALTER TABLE usertable ADD zipCode varchar(256)
ALTER TABLE usertable ADD addr varchar(256)
ALTER TABLE usertable ADD detailAddr varchar(256)
2. HTML 파일 수정
HTML 파일 수정에 앞서 제가 주소검색 팝업창을 띄우는 방식을 소개하겠습니다.
"우체국 API"나 "JOSO API", "DB에 주소 데이터를 모조리 집어넣는 방법" 등 여러 방법이 있지만 저 두 방법은 API 승인코드를 받아야 한다는 단점도 있고 복잡합니다.
그래서 저는 더 편리하고 매우 간단한 "다음 주소검색" 서비스를 찾게 되었습니다.
승인키도 필요하지 않고 "예제 코드보기"에서 코드를 복사 붙여 넣기만 하면 끝입니다.
아래에 전체코드입니다.
※ 주의사항
분명 코드 제대로 입력한 것 같은데 안될 때가 있습니다. 팝업창이 열리고 주소 선택하는 것까지는 가능했습니다. 하지만 팝업창이 닫히는 것과 해당 주소 내용이 입력창에 값 추가가 안 되는 것은 두 가지 이유가 있습니다.
첫 번째는 oncomplete 안에 코딩이 잘못됐을 때
두 번째는 서버운영이 없을 때
저 일반적인 HTML 파일에서 그냥 실행하면 안 되고 APM이나 Node.Js 같은 서버에서 가능하다고 하니 꼭 참고하시기 바랍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Sign up · essential ;</title>
</head>
<body>
<form action="http://localhost/phps/signup.php" method="POST">
<h1>Sign up</h1>
<div>
<input type="text" name="id" placeholder="ID"/>
</div>
<div>
<input type="text" name="name" placeholder="name"/>
</div>
<div>
<input type="email" name="email" placeholder="email"/>
</div>
<div>
<input type="password" name="password" placeholder="Password"/>
</div>
<div>
<input type="password" name="passwordConfirm" placeholder="Confirm password"/>
</div>
// 우편번호(zipCode) 입력창과 주소검색(Search address)하는 버튼 만들어줍니다.
<div>
<input type="text" name="zipCode" id="zipCode" placeholder="Zip/Postal Code"/>
<input type="button" onclick="execDaumPostcode()" value="Search address" />
</div>
// 주소(addr) 입력창 만들어줍니다.
<div>
<input type="text" name="addr" id="addr" placeholder="Address" />
</div>
// 상세주소(detailAddr) 입력창 만들어줍니다.
<div>
<input type="text" name="detailAddr" id="detailAddr" placeholder="Detail address" />
</div>
<div>
<input type="submit" value="Sign up" />
</div>
</form>
<div>Have an account? <a href="http://localhost/pages/login.html">Log in</a></div>
// 여기부터 복사 붙여넣기 했던 스크립트입니다. 자세한 내용은 해당 사이트에서 확인해주세요.
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
var addrValue = '';
// 참고사항은 필요 없어서 뺐습니다.
if (data.userSelectedType === 'R') {
addrValue = data.roadAddress;
} else {
addrValue = data.jibunAddress;
}
document.getElementById('zipCode').value = data.zonecode;
document.getElementById('addr').value = addrValue;
document.getElementById('detailAddr').focus();
}
}).open();
}
</script>
</body>
</html>
Have an account? Log in
3. PHP 파일 수정
회원가입 페이지 HTML만 수정한다고 해서 DB에 들어가진 않고 PHP 파일도 수정해야 DB로 데이터가 추가됩니다.
<?php
error_reporting(E_ALL);
ini_set("display_errors", 1);
$userId = $_POST['id'];
$userName = $_POST['name'];
$userEmail = $_POST['email'];
$userPw = $_POST['password'];
$userPwConf = $_POST['passwordConfirm'];
// 우편번호, 주소, 상세주소 받는 변수 만들어줍니다.
$userZip = $_POST['zipCode'];
$userAddr = $_POST['addr'];
$userDeAddr = $_POST['detailAddr'];
if (!is_null($userId)) {
$dup_conn = mysqli_connect('localhost', 'testuser', 'syl@0413', 'testdb');
$dup_id_query = "SELECT id FROM usertable WHERE id='$userId';";
$dup_id_result = mysqli_query($dup_conn, $dup_id_query);
while ($dup_id_row = mysqli_fetch_array( $dup_id_result )) {
$userId_e = $dup_id_row['id'];
}
$dup_email_query = "SELECT email FROM usertable WHERE email='$userEmail';";
$dup_email_result = mysqli_query($dup_conn, $dup_email_query);
while ($dup_email_row = mysqli_fetch_array( $dup_email_result)) {
$userEmail_e = $dup_email_row['email'];
}
if ($userId == $userId_e) {
$dup_id = 1;
echo "<script>alert('Suggested ID may be used or modified.');</script>";
} elseif ($userEmail == $userEmail_e){
$dup_email = 1;
echo "<script>alert('This email address is already in use. Please try again.');</script>";
} elseif ($userPw != $userPwConf) {
$dup_Pw = 1;
echo "<script>alert('Passwords do not match.');</script>";
} else {
// 데이터를 넣는 쿼리에 위에 만든 변수를 넣어주면 ㄲ!!
$add_user_query = "INSERT INTO usertable (id, name, email, password, created, zipCode, addr, detailAddr) VALUES ('$userId', '$userName', '$userEmail', '$userPw', NOW(), '$userZip', '$userAddr', '$userDeAddr');";
mysqli_query($dup_conn, $add_user_query);
mysqli_close($dup_conn);
header('Location: http://localhost/pages/login.html');
}
}
?>
이러면 진짜 끝입니다. 별거 없습니다.
아래와 같이 테이블에 seyun과 testname만 있는 상태에서 testname1 유저를 회원가입 해보겠습니다.
회원가입이 아주 정상적으로 잘 됩니다.
생각보다 간단해서 놀랐습니다.
마치며
회원가입 페이지에 주소검색 기능을 넣는 게... 제가 쓴 다음 주소검색 방식 이전에 여러 방법을 해봤지만 너무 어려웠고 복잡해서 이틀이나 걸렸습니다. 시간은 오래걸렸지만 여러 사이트에서 쿠팡이나 배민 같은 곳에서 쓰던 주소검색을 직접 만드니 신기하기도 하고 재밌네요.
'개발자 (Developer) > 백 엔드 (Back-End)' 카테고리의 다른 글
| 회원가입 페이지 구현 (0) | 2023.04.24 |
|---|---|
| 로그인과 로그아웃 페이지 구현 (0) | 2023.04.13 |
| MySQL · PHP 연동하기 (DB연동) (0) | 2023.04.12 |
| GET / POST 메소드로 웹 서버에 데이터 전달해보기 (0) | 2023.04.05 |
| MySQL 데이터베이스와 테이블 생성 (0) | 2023.04.05 |
댓글