💻 주소 검색 기능 구현
1. 주소창을 검색할 html 태그 account.html에 추가하기
<label for="address">ADDRESS : </label>
<input type="text" type="text" name="addr" id="addr" placeholder="find your address" required>
2. 주소 검색 pop up 창 생성하기
- onclick 메서드 추가하기
// address에 있는 blank를 누를 시 주소 검색 팝업창이 띄워지도록 onclick 메서드 추가
<input type="text" type="text" name="addr" id="addr" onclick="find_address()" placeholder="find your address" required>// find_address() on click 메서드 추가하기
<script>
function find_address(){
url = "find_address.php";
window.open(url,"addr","width=500, height=400, scrollbars=yes");
}
</script>- find_address.php 파일 생성하기
sudo vim find_address.php<?php session_start();?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Address</title>
<link rel="stylesheet" href="address.css">
</head>
<body>
<form method="get" action="addr_db.php">
<input name="address" type=text placeholder="ex) Dongin-dong 1">
<input type=submit value="search">
</form>
</body>
</html>- address.css 파일 생성하기
li {
list-style: none;
}
a {
text-decoration: none;
}
input[type="submit"] {
cursor: pointer;
border-radius: 10px;
border: none;
background-color: #882828;
color: #fff;
font-size: 18px;
}
input {
width: 95%;
height: 50px;
border-radius: 10px;
margin: auto;
margin-left: 15px;
margin-bottom: 8px;
border: none;
background-color: #ededed;
padding: 0 20px;
box-sizing: border-box;
font-size: 20px;
}
body {
background-color: #D9D9D9;
}
- 대구시 도로명 DB 다운, 데이터베이스 생성
(1) 아래의 링크에 들어가 영문 도로명 주소를 다운받는다.
=> 다운받은 텍스트 파일을 DB에 넣기 위해서는 아래의 코드를 사용한다.
LOAD DATA local infile '경로' into table 테이블명 fields terminated by '구분할 것' (컬럼,컬럼...);(2) CREATE TABLE addr 을 통해 새로운 주소 테이블을 생성한다.
mysql> DESCRIBE addr;
+------------------+----------+------+-----+---------+-------+
| Field | Type | Null | Key | Default | Extra |
+------------------+----------+------+-----+---------+-------+
| LEGDONG_CD | char(10) | NO | PRI | NULL | |
| SIDO_NM | char(40) | NO | | NULL | |
| SIGUNGU_NM | char(40) | YES | | NULL | |
| LEGUBMYUNDONG_NM | char(40) | YES | | NULL | |
| LEGLI_NM | char(40) | YES | | NULL | |
| MOUNT | char(1) | YES | | NULL | |
| BUNGI | int(5) | YES | | NULL | |
| HO | int(5) | YES | | NULL | |
| DORO_NM | char(12) | YES | | NULL | |
| ENDORO_NM | char(80) | YES | | NULL | |
| UNDER | char(1) | YES | | NULL | |
| BILD_BON | int(5) | YES | | NULL | |
| BILD_BU | int(5) | YES | | NULL | |
| BILD_MANAGE_NUM | char(25) | YES | | NULL | |
| UPEONADDR | char(5) | YES | | NULL | |
| WHYMOVE | char(2) | YES | | NULL | |
| SHAREBUILD | char(1) | YES | | NULL | |
| REPRESENT_BUILD | char(1) | YES | | NULL | |
+------------------+----------+------+-----+---------+-------+
(2) 다운받은 txt 파일의 db 정보를 만든 테이블에 삽입하기
LOAD DATA LOCAL INFILE '/home/el/Downloads/rn_daegu.txt' INTO TABLE addr FIELDS TERMINATED BY '|' (LEGDONG_CD, SIDO_NM, SIGUNGU_NM, LEGUBMYUNDONG_NM, LEGLI_NM, MOUNT, BUNGI, HO, DORO_NM, ENDORO_NM, UNDER, BILD_BON, BILD_BU, BILD_MANAGE_NUM, UPEONADDR, WHYMOVE, SHAREBUILD, REPRESENT_BUILD);(3) 테이블 확인
mysql> SELECT*FROM addr LIMIT 1,1;
+------------+---------+------------+----------------------+----------+-------+-------+------+--------------+---------------+-------+----------+---------+---------------------------+-----------+---------+------------+-----------------+
| LEGDONG_CD | SIDO_NM | SIGUNGU_NM | LEGUBMYUNDONG_NM | LEGLI_NM | MOUNT | BUNGI | HO | DORO_NM | ENDORO_NM | UNDER | BILD_BON | BILD_BU | BILD_MANAGE_NUM | UPEONADDR | WHYMOVE | SHAREBUILD | REPRESENT_BUILD |
+------------+---------+------------+----------------------+----------+-------+-------+------+--------------+---------------+-------+----------+---------+---------------------------+-----------+---------+------------+-----------------+
| 2711010100 | Daegu | Jung-gu | Dongin-dong 1(il)-ga | | 0 | 2 | 1 | 271103007017 | Gongpyeong-ro | 0 | 88 | 0 | 2711010100100010000009433 | 41911 | | 0 | 1 |
+------------+---------+------------+----------------------+----------+-------+-------+------+--------------+---------------+-------+----------+---------+---------------------------+-----------+---------+------------+-----------------+- addr_db.php 파일 생성하기
<?php
$conn = mysqli_connect("localhost","root","1231","account");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM addr WHERE SIGUNGU_NM LIKE '%$address%' OR LEGUBMYUNDONG_NM LIKE '%$address%' OR ENDORO_NM LIKE '%$address%'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$full_address = $row['LEGDONG_CD'] . "--" . $row['SIDO_NM'] . "--" . $row['SIGUNGU_NM'] . "--" . $row['LEGUBMYUNDONG_NM'] . "--" . $row['ENDORO_NM'] . "--" . $row['BILD_BON'] . "--" . $row['BILD_BU'];
echo "<a href='javascript:void(0)' onclick='fillAddress(\"{$full_address}\")'>" . $full_address . "</a><hr>";
}
} else {
echo "0 results";
}
$conn->close();
?>
<script>
function fillAddress(ENDORO_NM) {
window.opener.document.getElementById("address").value = ENDORO_NM;
window.opener.postMessage({ address: ENDORO_NM }, "*");
window.close();
}
</script>
❗ 해결할 부분
- db address 컬럼 길이를 늘려서 address 값이 전부 들어갈 수 있도록 수정하기
- address 값 밑에 상세주소를 넣어 상세주소도 넣게하기
🤍 참조
화이트해커 꿈나무 엘입니다😉