[4주차] 회원가입 페이지 구현 #1 - 주소 검색 기능 만들기

회원 가입 페이지 란에 주소 검색 기능을 추가할 것입니다

우체국 사이트로 접속해줍니다.

구글에 우체국 사이트를 검색했을 때 통합검색 우편번호 란을 클릭하면 바로 들어갈 것 같습니다.

우편 번호 내려받기 탭에 지역별 주소 DB 파일을 제공하고 있습니다.

다운받아줍니다.

다운은 금방 완료되고,

지역별로 주소가 모인 txt 파일이 압축파일로 다 담겨있습니다.

이번에 서울시를 기준으로 구현해볼 예정이므로

서울특별시.txt 파일만 클릭해서 압축을 풀어줍니다.

한번 클릭해서 보니 어지럽습니다.

너무 많네요

여는 것도 시간이 꽤 걸립니다

window에서 되는지를 테스트해본 것이므로,

이 파일을 ubuntu로 옮겨줍니다.

그리고 경험상 이름이 한글인 것도 문제가 될 수 있기 때문에 1.txt로 바꿔줍니다.

그리고 mysql이 외부 파일을 추가할 수 있게 설정을 변경해줘야 합니다.

터미널을 열고 밑 코드를 입력해줍니다.

show global variables like 'local_infile';

그럼 local_infile이 OFF라는 창이 뜹니다.

이제 이걸 ON으로 바꿔줄거에요

밑 코드를 입력해줍니다.

set global local_infle=true;

다시 창을 확인했을 때 ON이라고 뜨면 잘 변경된 것입니다.

이제 그 옵션을 가지면서 mysql을 키려면

터미널에 밑 코드를 입력해줍니다.

mysql --local_infile -u root -p

일단 MySQL에 새로운 테이블을 추가합니다.

DB는 우체국에서 제공하는 txt 파일을 똑같이 사용할 것이므로

사람들이 일반적으로 사용하는 테이블 생성 구문을 가져왔습니다.

CREATE TABLE IF NOT EXISTS `ZIPCODE` (
`ZIP_NO` VARCHAR(5) NULL COMMENT '우편번호',
`SIDO` VARCHAR(20) NULL COMMENT '시도',
`SIDO_ENG` VARCHAR(40) NULL COMMENT '시도(영문)',
`SIGUNGU` VARCHAR(20) NULL COMMENT '시군구',
`SIGUNGU_ENG` VARCHAR(40) NULL COMMENT '시군구(영문)',
`EUPMYUN` VARCHAR(20) NULL COMMENT '읍면',
`EUPMYUN_ENG` VARCHAR(40) NULL COMMENT '읍면(영문)',
`DORO_CD` VARCHAR(12) NULL COMMENT '도로명코드',
`DORO` VARCHAR(80) NULL COMMENT '도로명',
`DORO_ENG` VARCHAR(80) NULL COMMENT '도로명(영문)',
`UNDERGROUND_YN` CHAR(1) NULL COMMENT '지하여부',
`BUILD_NO1` DECIMAL(5,0) NULL COMMENT '건물번호본번',
`BUILD_NO2` DECIMAL(5,0) NULL COMMENT '건물번호부번',
`BUILD_NO_MANAGE_NO` VARCHAR(25) NULL COMMENT '건물관리번호',
`DARYANG_NM` VARCHAR(40) NULL COMMENT '다량배달처명',
`BUILD_NM` VARCHAR(200) NULL COMMENT '시군구용건물명',
`DONG_CD` VARCHAR(10) NULL COMMENT '법정동코드',
`DONG_NM` VARCHAR(20) NULL COMMENT '법정동명',
`RI` VARCHAR(20) NULL COMMENT '리명',
`H_DONG_NM` VARCHAR(40) NULL COMMENT '행정동명',
`SAN_YN` VARCHAR(1) NULL COMMENT '산여부',
`ZIBUN1` DECIMAL(4,0) NULL COMMENT '지번본번',
`EUPMYUN_DONG_SN` VARCHAR(2) NULL COMMENT '읍면동일련번호',
`ZIBUN2` DECIMAL(4,0) NULL COMMENT '지번부번' ,
`ZIP_NO_OLD` VARCHAR(4) NULL COMMENT '구우편번호' ,
`ZIP_SN` VARCHAR(2) NULL COMMENT '우편일련번호'
)
COLLATE='utf8_general_ci'
ENGINE=InnoDB
;

처음에 다운로드 폴더에 받아둔 TXT 파일을 추가해서 데이터베이스에 넣으려 했는데 오류가 떴습니다.

오타가 있는지 봤는데 안보여서 경로에 한글이 들어가 있어서 그런가 싶어 경로를 바꿔줬습니다.

새로 경로를 바꿔도 에러가 고쳐지지 않아서 엑셀에서 살펴보려했는데 글자가 utf8로 안읽히고 전부 깨져 있었습니다.

이상하게 우체국 사이트에서 제공하는 txt 파일이 시간이 지나면 utf8로 읽혔을 때 글자가 깨지게 되는 것 같습니다.

원인은 모르겠지만...

우체국 사이트에서 새로 받아서 바로 데이터베이스에 넣으니까 완료되었습니다.

양이 너무 많아서 터미널 안에서

select * from ZIPCODE 구문을 실행했다가

끝없는 로딩에 휩싸여서 바로 ctrl+c 눌러 탈출하고 phpmyadmin으로 확인했습니다

일단 제 가상 머신에 phpmyadmin이 깔려있지 않아

sudo apt-get install phpmyadmin

위 명령어를 입력해 phpmyadmin을 설치했습니다.

암튼 이런 창이 나오고 확인 확인 누르면 완료될 것입니다.

먼저, phpmyadmin과 현재 apache2와 연동을 해줘야합니다.

터미널을 열고 밑 코드를 입력해줍니다.

 vim /etc/apache2/apache2.conf

그 후, Include /etc/phpmyadmin/apache.conf를 입력해줍니다.

이제 phpmyadmin 홈페이지를 켜서 잘 들어갔는지 확인해주면 됩니다.

잘 들어간 것을 확인할 수 있습니다.

전에 만들었던 회원가입 페이지에 주소 입력창을 추가합니다.

해당 enroll.php 파일 안 html 코드 안 script 태그를 만들어서 onClick 에 쓰인 address()함수를 정의합니다.

저 placeholder가 적힌 입력창을 마우스로 클릭하면 address.php 창이 열립니다.

enroll.php

<br><Br>
<div class=subject>주소 입력</div>
<input class=textform type='text' name='join_addr' id='addr' onClick='address();' placeholder='주소를 검색해주세요." required>
<input type="submit" value="가입하기" class="enroll">
</form>

<script>
  function address(){
    address_url = "address.php";
    window.open(address_url,"addr",'width=100,height=100, scrollbars=no, resizable=no');
  }
</script>

이 페이지는 address.php 페이지입니다.

서울시의 주소를 입력하면 유사한 주소를 찾아줍니다.

다음은 address.php 파일 코드입니다.

주소를 대강 입력한 뒤 검색을 누르면 address_proc.php파일로 get 형식으로 데이터를 전송한 뒤,

값을 찾아줍니다.

address.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Address</title>
</head>
<body>
  <form method="get" action="address_proc.php">
    <input name="address" type=text placeholder="ex) 해킹로, 해킹로 95">
    <input type='submit' value='검색'>
  </form>
</body>
</html>

address_proc.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Address</title>
</head>
<body>
<?php
$conn = mysqli_connect('localhost','root','1234');
mysqli_select_db($conn, 'test');
$address = $_GET['address'];
$arr = explode(" ",$address); //explode는 공백을 기준으로 문자열을 자름
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;
?>
<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.php?full=<?=$full?>"<?=$full?></a></td>
  </tbody> <?php
    $num++;
  }
?>
</table>
</body>
</html>

만약, 서울에 있는 아차산로라고 검색을 하면

이렇게 리스트를 쭉 보여주는 것을 확인했습니다.

그 중에 주소를 하나 선택하면, 상세 주소를 입력할 수 있는 입력 창이 뜨게 됩니다.

아무 주소나 입력해서 확인을 누르면,

주소 입력창에 잘 들어간 것을 확인할 수 있습니다.

이제 ID와 비밀번호, 이메일, 휴대전화 번호까지 써넣으면 회원가입이 완료되어 DB에 자료가 추가될 것입니다.

참조 :

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=bgpoilkj&logNo=221094263435

주소검색 기능 : https://choco4study.tistory.com/m/66

실제 코드 참조 : https://www.cho-log.io/67

'웹 개발' 카테고리의 다른 글

손 쉽게 웹페이지 꾸미는 법 #1 - Bootstrap 적용하는 법, 버튼 디자인 (0)	2023.04.29
[3주차] 회원가입 페이지 구현 #2 - 아이디 중복 체크 (0)	2023.04.22
[3주차] 가능한 로그인 로직 연구 - 식별과 인증 (1)	2023.04.19
[2주차] 로그인 구현 #2 - 세션을 이용한 PHP 로그인 기능 구현 (0)	2023.04.11
[2주차] 로그인 구현 #1 - 메인 페이지 /로그아웃 기능 구현 (0)	2023.04.10

내 하루가 당신의 영감이 되기를

[4주차] 회원가입 페이지 구현 #1 - 주소 검색 기능 만들기

'웹 개발' 카테고리의 다른 글

티스토리툴바

[4주차] 회원가입 페이지 구현 #1 - 주소 검색 기능 만들기

'웹 개발' 카테고리의 다른 글

'웹 개발' Related Articles

티스토리툴바