[4주차 과제-1] 회원가입 - 주소 검색 기능 구현

구현에 사용된 프로그램

Ubuntu-22.04.2
Apache2 : Apache/2.4.52 (Ubuntu)
PHP : PHP 8.1.2-1ubuntu2.11(cli)
MySQL : mysql Ver 8.0.32-0ubuntu0.22.04.2 for Linux on x86_64 ((Ubuntu))
Python 3.10.6
Visual Code(Widnows11)

구현에 사용된 데이터

우체국 DB (https://www.epost.go.kr/search/zipcode/cmzcd002k01.jsp)

00. 우체국에서 제공하는 우체국 데이터 사용하여 주소 검색 DB 생성

00-1) 우체국 데이터를 다운받는다

00-2) 기존 DB에다가 사용자 주소 테이블을 생성한다

꼭 데이터를 다운받은 다음 데이터 형식을 확인하고 그에 맞게 테이블을 작성해줘야한다

create table userAddrTB(
	zipNo varchar(5),
	city varchar(20),
	cityEng varchar(40),
	cityCounty varchar(20),
	cityCountyEng varchar(40),
	town varchar(20),
	townEng varchar(40),
	roadCode varchar(12),
	roadName varchar(20),
	roadNameEng varchar(40),
	undergroundCk varchar(1),
	bulidNumMain decimal(5,0),
	bulidNumsub decimal(5,0),
	bulidNumMng varchar(25),
	largeDel varchar(40),
	buildNum varchar(200),
	dongCode varchar(10),
	dongName varchar(20),
	ri varchar(20),
	hDongName varchar(40),
	mountainCk varchar(1),
	lotNumMain decimal(4,0),
	townCode varchar(2),
	lotNumSub decimal(4,0),
	zipOldcode varchar(4),
	zipCode varchar(2)
);

01. 파이썬을 이용하여 데이터 파일을 테이블에 넣어준다

01-1) 파이썬에서 MySQL을 사용할 수 있게 PIP를 이용하여 PyMySQL 설치하기

PyMySQL : 파이썬에서 MySQL을 사용할 수 있는 라이브러리!!(connect() 사용하기위해)

01-2) 파이썬을 이용해서 *.txt파일을 테이블에 넣기

import pymysql	// MySQL 사용하기위한 라이브러리

for i in range(0,17):	// 텍스트 수 만큼 반복
    f = open("./*.txt", "r")	// 현재 경로에 있는 .txt타입 모든 파일을 읽는다
    data = f.readlines()
    lineCnt = len(data)

    nList= []
	// MySQL 접근
    con = pymysql.connect(host='127.0.0.1', port=포트번호, user='ID', password='password', db='DB명', charset='utf8')
    conCur = con.cursor()	// connect() 실행
    
    cnt = 0	// 컬럼값 체크 변수
    for j in data :
        value = j.strip()
        nList = value.split("|")	// | 단위로 스트링 자르고 리스트에 넣기
        if cnt == 0:	// 컬럼값은 패스한다
            cnt += 1
            pass
        else :
            sql = "INSERT INTO userAddrTB VALUE('"+nList[0]+"', '"+nList[1]+"', '"+nList[2]+"', '"+nList[3]+"', '"+nList[4]+"', '"+nList[5]+"', '"+nList[6]+"', '"+nList[7]+"', '"+nList[8]+"', '"+nList[9]+"', '"+nList[10]+"', '"+nList[11]+"', '"+nList[12]+"', '"+nList[13]+"', '"+nList[14]+"', '"+nList[15]+"', '"+nList[16]+"', '"+nList[17]+"', '"+nList[18]+"', '"+nList[19]+"', '"+nList[20]+"', '"+nList[21]+"', '"+nList[22]+"', '"+nList[23]+"', '"+nList[24]+"', '"+nList[25]+"');"
			// 데이터 넣기
            cnt += 1
            conCur.execute(sql)
        con.commit()

con.close() // mysql connect 끊기
f.close()	// 파일 닫기

※ 데이터가 많아서 테이블에 넣는데 오래걸려서 경기도만 넣어서 작업했습니다(경기도도 생각보다 오래걸렸습니다)

데이터가 잘들어간 것을 확인!!

02. 주소 찾기를 눌렀을 때 팝업창으로 띄울수 있게 JS로 구현하고 스타일 작업하기

02-1) JS로 팝업창 구현하기(크기, 위치)

const addrSearch = () =>{
	// 팝업창 크기 설정
    const popWidth = 450;	
    const popHeihgt = 505;
    
   // 팝업창 크기를 통해서 위치 설정 
    const popX = (window.screen.width/2) - (popWidth / 2);	
    const popY = (window.screen.height/2) - (popHeihgt / 2);
    
    // url 변수 -> 팝업창에 열어줄 페이지
    url = "useraddr.php";

    window.open(url, 'userAddrForm', 'width=' + popWidth + ', height=' + popHeihgt + ', left='    +popX+', top='+popY + ', scrollbars=no, resizeable=no');
}

02-2) 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>주소 검색</title>
    <link rel="stylesheet" href="./css/addr.css">
</head>
<body>
    <main class="wrap" id="addr_wrap">
        <form method="POST" action="addr_ok.php" name="userAddrForm">
            <p>
                <input type="text" name ="addr" placeholder="주소 입력 : 동국로, 동국로 10">
                <input type="submit" class="form_btn"  value="검색">
            </p>
        </form>
    </main>
    <script src="./js/join.js"></script>
</body>
</html>

03. 구현한 테이블에 접근하여 사용자가 주소를 입력한 주소를 보여준다

03-1) DB에 접근하고 테이블에 접근하기

<?php
    include('./connect.php');
    //if($con) echo "ok\n";
    
    $userAddr = $_POST['addr'];
    
    $sql = "select * from 테이블명 where concat(roadName,' ', bulidNumMain,'-', bulidNumSub,' ', buildNum) like '%$userAddr%'";
    $rst = mysqli_query($con, $sql);
?>

concat(roadName,' ', bulidNumMain,'-, bulidNumSub,' ', buildNum) like '%$userAddr%';
- CONCAT + LIKE를 이용해서 도로명주소만 입력을 받아도 주소를 검색할 수 있게 설정한다

<!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>주소 검색</title>
    <link rel="stylesheet" href="./css/addr.css">
</head>
<body>
    <main class="wrap" id="addr_wrap">
        <form method="POST" action="addr_ok.php" name="userAddrForm" id="addr_Form">
            <p>
                <input type="text" name ="addr" placeholder="주소 입력 : 동국로, 동국로 10">
                <input type="submit" class="form_btn"  value="검색">
            </p>
      	    <section id="addr_warp">
            	<table>
		<?php 
   		while($arr = mysqli_fetch_array($rst)){ 
   			$addr = $arr[1]. " ".$arr[8]." ".$arr[11]."-". $arr[12]." ".$arr[15];
   		?>
                	<tr><td id="table_line"><p onclick="addrInput()">
						<input id="sendAddr" type = "hidden" value = "<?php echo $addr;?>" /><?php echo $addr; ?>
					</p></td></tr>
      <?php } ?>    
            	</table>
	    </section>
        </form>
    </main>
</body>
</html>

html을 이용해서 테이블을 이용해서 주소값들을 사용자에게 보여준다
input <hidden>을 이용해서 php의 echo ""를 문자열로 받아서 JS 함수로 보내준다!!

<script>
	const addrInput = () =>{
		const userAddr = document.getElementById('sendAddr').value;
		opener.document.getElementById('user_address').value = userAddr;
		// console.log(userAddr);
		window.close();
	}
</script>

opener을 이용해서 팝업차의 부모인 join.html로 선택한 주소를 입력한다

'모의해킹 공부 > WEB 개발' 카테고리의 다른 글

[5주차 과제-2] 게시판 쓰기 & 읽기 (0)	2023.04.30
[5주차 과제-1] 게시판 DB구축 & 메인 페이지 구현 (0)	2023.04.29
[2주차 과제 -2] 로그인 & 메인 페이지 구현 (0)	2023.04.08
[2주차 과제 -1] 회원 가입 페이지 구현 (0)	2023.04.08
[1주차 과제-3] DB연결 (0)	2023.04.01

Bandit10 Study

[4주차 과제-1] 회원가입 - 주소 검색 기능 구현

'모의해킹 공부 > WEB 개발' 카테고리의 다른 글

티스토리툴바

[4주차 과제-1] 회원가입 - 주소 검색 기능 구현

'모의해킹 공부 > WEB 개발' 카테고리의 다른 글

'모의해킹 공부/WEB 개발' Related Articles

티스토리툴바