개요
- 회원 정보 테이블에 주소 컬럼 추가
- 우체국에서 도로명주소 파일 다운
- 도로명주소 데이터 들어갈 db, 테이블 생성
- 주소 파일들 해당 db로 업로드
▶ 회원 가입 기능에 주소 검색 로직 추가
- 회원 가입 폼에 주소 입력칸 추가
- 주소 입력칸 클릭 시 주소 입력 폼 페이지 팝업으로 띄우기
- 주소 입력 폼에서 입력값 전달받아 주소 검색을 처리할 php페이지 만들기
- 상세 주소 입력칸 만들고, 전체 주소를 원래 페이지에 출력하게 하기
회원 가입 기능에 주소 검색 로직 추가하기
1. 회원가입 페이지에 주소 입력 칸 추가
|
<input type="text" id="address" name="address" placeholder="주소:"required>
|
cs |
2. 주소 입력 페이지 팝업 띄우기
회원가입 페이지에 다음과 같은 함수를 정의한 후,
|
<script>
function openAddressPopup() {
var url = "address.php";
var options = "width=500,height=400,scrollbars=no,resizable=no";
window.open(url, "addressPopup", options);
}
</script>
|
cs |
address input 태그 내부에서 onclick 속성으로 openAddressPopup()함수를 호출한다.
|
<input type="text" id="address" name="address" onclick="openAddressPopup();" placeholder="주소:"required>
|
cs |
3-1. 팝업으로 열린 address.php 페이지에 주소 검색 폼을 만든다.
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>주소입력창</title>
<link rel="stylesheet" href="address.css">
</head>
<body>
<form method="GET" action="address_process.php">
<div>
<input name="address" type=text placeholder="예시) 테헤란로 33">
<input type=submit value="검색">
</div>
</form>
</body>
</html>
|
cs |
3-2. 주소검색을 처리할 address_process.php 도 만든다.
없는 주소를 입력했을 땐 존재하지 않는 주소라는 알림창을 띄우고,
입력받은 주소가 db에 존재하면 변수에 저장하여 상세주소 입력페이지로 보낸다.
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<?php
$dbhost = 'localhost';
$dbuser = '';
$dbpass = '';
$dbname = 'ZIPCODE';
$conn = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);
if (!$conn) {
die('Could not connect: ' . mysqli_error());
}
$address= $_GET['address'];
$arr= explode(" ",$address);
if($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";
}
$res = mysqli_query($conn, $sql);
$num = 1;
if(mysqli_num_rows($res) == 0) {
echo '<script>window.alert("존재하지 않는 주소입니다.")</script>';
include 'address.php';
}
?>
<table>
<?php
while($row = mysqli_fetch_array($res)){
$full = $row['SIDO']." ".$row['SIGUNGU']." ".$row['DORO']." ".$row['BUILD_NO1']." ".$row['BUILD_NM']; ?>
<tbody>
<td><?=$num?></td>
<td><a href="detail_address.php?full=<?=$full?>"><?=$full?></a></td>
</tbody> <?php
$num++;
}
?>
</table>
</body>
</html>
|
cs |
4. 상세 주소 기입란, 전체 주소 출력
상세 주소 입력 후 "확인"을 클릭하면 원래 페이지(register.php)에 텍스트가 출력되게 한다.
|
<?php
$full = $_GET['full'];
echo $full;
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상세주소</title>
<script>
function my_addr(){
var full = '<?=$full?>';
var my_addr = full+" "+document.getElementById("detail").value;
opener.document.getElementById("address").value = my_addr;
window.close();
}
</script>
</head>
<body>
<input id="detail" type=text>
<input type=button value="확인" onclick="my_addr()">
</body>
</html>
|
cs |
출력 화면
주소 데이터 많아서 검색할 때 시간이 2초쯤 걸린다. like구문 쓴 것도 아닌데..!!ㅜㅜ mysql에서 index 이용해야 하는 것 같던데 아직 시도해보진 않았다. 추후에 다른 부분들까지 리팩토링 할 생각이다. 어린이날 연휴가 기회다......
'Hacking_study > 개발과제' 카테고리의 다른 글
| 6주차_(1) 회원 게시판 글 삭제 (0) | 2023.05.16 |
|---|---|
| 5주차_회원 게시판 글 쓰기, 목록 보기, 글 보기 (0) | 2023.05.12 |
| 4주차_(1) 주소 검색 기능 구현 (0) | 2023.04.23 |
| 3주차 회원가입 / 아이디 중복 검사 (0) | 2023.04.08 |
| 2주차 로그인 / 로그아웃 기능 구현 (0) | 2023.04.05 |