회원가입 기능에 주소를 추가할 수 있도록 주소 검색 기능을 넣을 것이다. 또한 마이페이지에도 추가한 주소가 출력 시킬 예정이다.
member_register.html
<!DOCTYPE html>
<html>
<head>
<script>
function address() {
var url = "/address/address.php";
window.open(url, "addr", 'width=500, height=400, scrollbars=no, resizable=no');
}
</script>
<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">
<div>
<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>
<label for="address">주소</label><br>
<input type="text" id="addr" name="addr" placeholder="주소">
<input type="button" id="search" name="search" value="찾기" onclick="address()"><br><br>
<input type="submit" value="완료">
</div>
</form>
</body>
</html>
먼저 주소 폼을 추가시켜줬다. 찾기 버튼을 누르면 address()함수가 호출되어 작업을 처리한다.
👆 다음과 같이 주소를 찾을 수 있는 새로운 창이 뜬다. 이 창은 address.php로 작성된 페이지이다.
address.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Address</title>
</head>
<body>
<form method="get" action="address_ok.php">
<input name="address" type=text placeholder="ex) 내손로, 내손로 14">
<input type=submit value="검색">
</form>
</body>
</html>
다음과 같이 작성되었으며, 도로명 주소를 검색할 수 있다. 폼에 도로명 주소를 검색 후 버튼을 누르면 address_ok.php라는 페이지로 GET 전송 되게 된다.
address_ok.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Address</title>
</head>
<body>
<?php
include "/opt/homebrew/var/www/db/db_init.php";
$address = $_GET['address'];
$arr = explode(" ", $address);
if (isset($arr[1])) {
$sql = "SELECT * FROM ZIPCODE WHERE DORO='$arr[0]' AND BUILD_NO1='$arr[1]'";
} else {
$sql = "SELECT * FROM ZIPCODE WHERE DORO='$arr[0]' ORDER BY BUILD_NO1 ASC";
}
$result = $conn->query($sql);
$num = 1;
?>
<table>
<?php
while ($row = mysqli_fetch_array($result)) {
$full = $row['SIDO'] . " " . $row['SIGUNGU'] . " " . $row['DORO'] . " " . $row['BUILD_NO1'] . " " . $row['BUILD_NM'];?>
<tbody>
<td><?php echo $num; ?></td>
<td><a href="/address/detail.php?full=<?php echo $full; ?>"><?php echo $full; ?></a></td>
</tbody> <?php
$num++;
}
?>
</table>
</body>
</html>
실질적으로 주소를 찾아주는 코드이다. 우선 사용자가 입력한 주소를 받아온다. 이 주소는 지명만 입력했을 때와 지명과 도로 주소까지 입력했을 때로 나누어 처리를 하게 된다.
우선 사용자 입력 주소를 공백을 기준으로 나눈다.
미리 설계 해놓은 DB에 입력받은 주소에 대한 쿼리를 날려 결과값을 받는다. 도로 주소까지 적었을 경우 where문에 주소까지 넘겨 주기 떄문에 하나의 결과값만을 반환하게 된다.
반복문을 돌며 하나의 모든 행을 출력해준다. 이때 모든 행에는 하이퍼링크를 걸어준다. 이 하이퍼링크를 클릭 했을 때의 동작을 처리해줄 detail.php를 작성해준다.
detail.php
<?php
$full = $_GET['full'];
echo $full;
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<script>
function my_addr() {
var full = '<?php echo $full ?>';
var full_addr = full+" "+document.getElementById("detail").value;
var parentWindow = window.opener;
parentWindow.document.getElementById("addr").value = full_addr;
window.close();
}
</script>
</head>
<body>
<br><input id="detail" type="text">
<input type="button" value="확인" onclick="my_addr()">
</body>
</html>
원하는 주소를 클릭하면 detail.php로 이동하게 되며 상세주소를 입력받는 폼이 나오게 된다. 폼에 상세 주소를 입력 후 확인 버튼을 누르면 부모 창의 ID값이 addr인 것에 접근하여 상세 주소를 포함한 전체 주소를 적은 후 현재 창을 닫는다.
'Web' 카테고리의 다른 글
| [Web] php, mysql을 활용한 게시판 글 수정 및 좋아요 구현 / 웹개발-8 (0) | 2024.02.29 |
|---|---|
| [Web] php, mysql을 활용한 게시판 글 작성 구현 / 웹개발-7 (2) | 2024.02.24 |
| [Web] php, mysql을 활용한 회원정보 수정 구현 / 웹개발-4 (0) | 2024.02.16 |
| [Web] php, mysql을 활용한 회원가입 구현 / 웹개발-2 (0) | 2024.02.02 |
| [Web] php, mysql을 활용한 로그인 구현 / 웹개발-1 (0) | 2024.01.30 |
