웹서버 만들기 9 주소검색기능

주소 검색 기능

• 서버
  • 오라클 DB 서버 : oracle-database-xe-21c
• 구조
  • 우편번호
  • 주소( 시도 도로명 건물번호본번 건물번호부번 )
  • 주소2(층수 부가 정보)

주소찾기 동작과정

우편번호 DB 다운받기

• 우편번호 DB와 검색기에서 다운받는다.
• 압축 파일안에는 text 파일들이 들어있다.
• | 의 구분자로 데이터들이 분리되어 있다.
• UTF-8 (BOM) 형태로 포맷 되어있다. 포맷을 UTF-8 로 변경하자.
• 우리는 여기서 대구광역시, 경기도 파일을 oracle db 에 Import 할 것이다.

SQL Developer 23.1 다운로드

• Oracle db 서버와 연결하여 보다 쉽게 sql 문들을 사용하기 위한것 이다.
• Oracle SQL Developer Downloads

오라클 서버와 연결하기

1. Oracle SQL Development 를 연다.
2. Oracle 접속 우클릭 > 새 접속
   
3. 사용자 이름, 비밀번호, db 서버 호스트 이름을 입력후 테스트를 클릭하여 접속 테스를 한다.
4. 테스트가 성공하였다면 접속 버튼을 눌러 접속해준다.
   

오라클 db에 주소 text 데이터 Import 하기

1. 테이블 우클릭한다.
   
2. 데이터 임포트를 클릭한다.
   
3. 위에서 다운받은 우편번호 db 파일중 하나의 파일을 선택한다. 이때 파일을 UTF-8 로 포맷되어 있어야 한다.
4. 다음을 눌러주어 데이터를 임포트해준다. 이 과정에서 처음으로 주소 데이터를 임포트를 한다면 주소 테이블 이름을 정해줘야 한다. 여기서는 테이블 이름을 ‘ko_address’ 라 정해주었다.
5. 다음 sql 명령을 통해 확인해 보면 내용이 잘 출력되는 것을 알 수 있다.

   select *
   from ko_address
   where 시도 like '%도%';
   

   

6. 다른 데이터를 import 할 때는 ko_address테이블로 데이터를 넣어 주면 된다.

UI 부분

• 회원가입 페이지에 주소찾기 버튼을 추가하였다.
  
• 주소찾기 버튼을 누르면 주소 찾기 창이 열린다.
  
• 주소를 입력하고 검색버튼을 클릭하면 서버로 입력한 주소를 요청으로 보내고 응답결과인 우편번호와 주소들을 화면에 보여준다.
  
• 주소를 클릭하여 주면 우편번호와 주소가 회원가입 페이지의 주소 부분에 들어가게 된다.
  

코드

• sign_up_page.jsp 에 주소검색을 위한 코드를 추가하였다.
  
• /sign_in_page/sign_up_page/find_address_number?address=주소 형태로 서버로 get요청을 보낸다.

• 서버로부터 응답을 받으면 \n 로 분리하여 table에 넣어 사용자에게 보여준다.
  

• 주소검색창 UI 부분.
  

서버부분 ( + DB 서버 )

• 서버에서 유저가 입력한 주소를 받아 주소에 해당하는 우편번호와 주소를 DB에서 찾아 응답으로 보낸다.

코드

DBConnection Class 추가

• DB 서버와 연결하기전 사전 준비를 하기위한 클래스이다.
• DBConnection의 connectDB 함수를 통해 DB 서버와 연결한다.

AddressDAO Class 추가

• DB의 KO_ADDRESS 테이블에 접근하여 우편번호와 주소를 읽어오기위한 클래스이다.
• getAddressNumber 함수는 사용자가 입력한 주소를 이용하여 우편번호와 주소를 찾는다. 그리고 우편주소와 주소를 하나의 String으로 만들어 리턴한다.
• getAddressNumber 함수에서는 테이블에서 최대 50개 까지의 우편번호와 주소를 찾아 리턴할 수 있다.

Login 클래스에 우편번호 uri 부분 추가하기.

• 사용자가 주소를 입력하고 서버로부터 우편주소와 주소를 받기위해 get 요청을 한다.
• 서버는 /sign_in_page/sign_up_page/find_address_number uri로 get 요청을 받는다.

회원 가입 할 때 우편번호 및 주소를 추가로 db에 저장하기

사전 준비

• 먼저 우편번호와 주소를 저장하기 위한 컬럼을 만들어줘야 한다.

  alter table users add 우편번호 varchar(25) default '12428' not null;
  alter table users add 주소 varchar(100) default '경기도 가평군 북한강변로 326-138' not null;
  alter table users add 주소2 varchar(10) default ' ' not null;
  

• 현재 USERS 테이블의 컬럼.
  
• 회원가입할 때 우편번호와 주소를 필요로 한다.

클라이언트 수정 부분

sign_up_page.jsp 부분 수정

• 회원가입을 하기위하여 우편번호, 주소를 추가하여 서버로 post 요청을 보낸다.

서버 수정 부분

Login class 의 회원가입 부분 수정

• 사용자로부터 address_number, address1, address2를 추가적으로 post 요청 받는다.
• SignUp.createUser 함수의 인자로 주어 회원가입을 진행한다.

SingUp 부분 수정

• 우편번호와 주소 부분을 추가로 받는다.

UserDAO createUser 함수 부분 수정

• 유저 정보 테이블에 주소를 저장하는 부분을 추가한다.

동작화면

1. 회원가입 페이지에서 정보를 입력한다.
   
2. 주소찾기 버튼을 누르명 주소찾기창이 나온다. 이 창에서 주소를 입력하고 검색 버튼을 눌러준다.
   
3. 맞는 주소를 클릭하면 회원가입의 주소창에 우편번호와 주소가 들어간다.
   
4. 회원가입 버튼을 클릭하여 준다.
   
5. 새로 생성한 계정으로 로그인해보기.
   
   
6. USERS 테이블에 user4 유저 생성됬는지 확인하기.
   

참고 사이트

• Importing Delimited Device Files into an Oracle Database using Oracle SQL Developer
• 주소 데이터의 빠른 조회를 위해 인덱스 설정하기 (tistory.com)
• JavaScript / Object / String.split() / 문자열 분할하는 메서드 – CODING FACTORY
• 자바스크립트 childNodes 속성과 children 속성의 차이 (tistory.com)
• JavaScript this 인자 전달 onclick/href (tistory.com)
• W3Schools Tryit Editor
• 우편번호검색 - 통합검색 우편번호 (epost.go.kr)