기본 콘텐츠로 건너뛰기

CodeIgniter 우편번호 찾기

CodeIgniter 우편번호 찾기

새 도로명 주소 등을 또 적용해야 하는 문제가 있는데, 아래 코드는 기존 읍면동을 검색하는 코드입니다.

아래 사이트에서 jQuery를 이용하여 간단히 우편번호 검색 API를 제공을 해 줍니다.

여기를 이용해 보시길 권장 합니다.

http://www.newroad.co.kr

우편번호 데이터는 http://www.epost.go.kr/search/zipcode/jibunAddressDown.jsp 를 참고함

http://naradesign.net/ouif/uio/table/multipleHeader/html.html

http://naradesign.net/ouif/uio/button/package/html.html

* SQL 파일 (table 명 zipcode)

zipcode.zip

* Form 에서 우편번호 코드

$("#open_zip_search").click(function(e){window.open("/zipcode/search", "zipcode_window", "width=500,height=400,resizable=no,scrollbars=yes,status=no");e.preventDefault();return false;});

* controller/zipcode.php

input->post('dong'); $search_result = $this->db->where("dong like '%".$dong."%'")->get('zipcode')->result_array(); $this->output->set_content_type('application/json') ->set_output(json_encode($search_result)); } public function search() { $this->load->view('zipcode_find_window'); } }

* view/zipcode_find_window.php

우편번호 찾기 body{margin:0;padding:10px 20px;} .button, .button *{ position:relative; margin:0; padding:0; display:inline-block; text-decoration:none !important; border:0; font-size:12px; font-family:dotum, Sans-serif; white-space:nowrap; background:url(https://t1.daumcdn.net/cfile/tistory/222FD04D5295F96037) no-repeat; vertical-align:top; overflow:visible; color:#333;} .button { margin-right:4px;} .button *{ left:4px; cursor:pointer; _cursor:hand;} .button.medium, .button.medium *{ height:24px; line-height:24px;} .button.large, .button.large *{ height:30px; line-height:30px;} .button.xLarge, .button.xLarge *{ height:36px; line-height:36px;} .button.small, .button.small *{ height:19px; line-height:19px;} .button.medium { background-position:left 0;} .button.large { background-position:left -30px;} .button.xLarge { background-position:left -65px;} .button.small { background-position:left -106px;} .button.medium *{ padding:0 10px 0 6px; font-size:12px; background-position:right top;} .button.large *{ padding:0 10px 0 6px; font-size:16px; background-position:right -30px;} .button.xLarge *{ padding:0 10px 0 6px; font-size:20px; background-position:right -65px;} .button.small *{ padding:0 6px 0 2px; font-size:11px; background-position:right -106px;} .button *:hover, .button *:active, .button *:focus{ color:#690;} .button.strong *{ font-weight:bold !important;} .table{border:0;border-collapse:collapse;margin:1em 0;font-size:12px;font-family:dotum;} .table table{width:100%;border:0;border-top:2px solid #666} .table caption{padding:8px 0;font-weight:bold;text-align:left} .table caption em{float:right;font-style:normal;font-weight:normal;color:#f60} .table th,.table td{border:0;padding:8px;vertical-align:top;text-align:left;border-bottom:1px solid #ddd} .table th{background:#f8f8f8} .table thead th{border-bottom:1px solid #999} .table tfoot td{font-weight:bold;background:#f8f8f8} #top { margin:0;padding:0;font-size: 14px; font-family: dotum; } input[name=dong] { font-size: 14px; font-family: dotum; padding: 2px 4px; border: 1px solid #ccc; } a.input { text-decoration: none; color: #000; display: block; } 읍면동 이름 : 우편번호 찾기 우편번호 주소 $("#find_zipcode").click(function(e){ var dong = $("input[name=dong]"); if (dong.val() == "") { alert('검색어를 입력해 주세요.'); dong.focus(); } else { $.post("/zipcode/find_by_dong", {dong: dong.val()}, function(r) { $("#zipcode_table tbody").html(''); for (var i=0; i' + r[i].zip_no.substring(0,3) + '-' + r[i].zip_no.substring(3,6) + '' + r[i].address + ''); } }, "json"); } e.preventDefault(); return false; }); $("input[name=dong]").focus().keydown(function(e){ if (e.keyCode == 13) { $("#find_zipcode").click(); e.preventDefault(); return false; } }); $(document).on('click', 'a.input', function(e) { var that = $(this); var parent = that.closest('tr'); var text = $('td.zip_no', parent).text() + ' ' + $('td.address', parent).text() + ' '; var input = opener.document.getElementById('address_input'); input.value = text; input.focus(); opener = ''; window.close(); e.preventDefault(); return false; });

Form 에서 ID address_input 를 고치면 검색 뷰에서도 고쳐야 합니다. 참고로만 사용해 주세요.

IE 8+, Chrome 에서 정상 작동을 확인했습니다.

from http://ejnahc.tistory.com/462 by ccl(A) rewrite - 2020-03-06 08:20:42

댓글

이 블로그의 인기 게시물

[PHP] 코드이그니터 - 파일업로드 구현

[PHP] 코드이그니터 - 파일업로드 구현 파일 업로드 이번에 PHP 프레임워크인 코드 이그니터(Codeigniter)를 사용하여 홈페이지를 만드는데 사용한 이미지 업로드용 코드 입니다. upload 라이브러리를 사용하고 app~ 와 같은 위치에 upload 폴더를 만드고 다음 코드를 사용한다음 ajax 로 호출하여 파일을 업로드 합니다. function index() { // Upload 설정 $config['upload_path'] = './upload/'; $config[\'allowed_types\'] = 'gif|jpg|png'; $config['max_size'] = 100; // 100k $config['max_width'] = 1024; $config['max_height'] = 768; $this->load->library('upload', $config); $data = array(); if (! $this->upload->do_upload("service_image")) { $error = array('error' => $this->upload->display_errors()); } else { //$data = array('upload_data' => $this->upload->data()); $this->output->set_output("./upload/".$this->upload->data('file_name')); } } jquery 를 이용한 파일 업로드 호출 코드 function upload() { var datas, xhr; datas = new FormData(); datas.append( 'service_image', $( ...

2017년 1월 스타트업에서 구인할때 주로 원하는 개발 기술

2017년 1월 스타트업에서 구인할때 주로 원하는 개발 기술 php mysql linux android git kotlin gcm/fcm python mssql mongodb amazon aws ios objective-c swift github python c++ django python postgresql amazon aws html5/css3/javascript android java mysql python c++ c# java aws cloud-server dbms node.js postgresql redis nginx react.js hapi.js amazon aws restful-api angularJS jQuery html5/css3/javascript android firebase custom ui component restful-api asp.net c# html css javascript bootstrap angularjs node.js php mongodb redis 프론트엔드 주요 기술 javascript jquery ajax angularjs wbesocket html5/css3/javascript android ios java xcode node.js coffeescript mysql amazon ec2 amazon es3 android ios node.js php python java ios php mysql apache python android redis node.js jquery msa node.js java restful-api linux nosql golang redis nginx ...

이클립스 코드이그나이터 연동 ( eclipse codeigniter )

이클립스 코드이그나이터 연동 ( eclipse codeigniter ) https://ellislab.com/codeigniter/user-guide/installation/downloads.html 위의 사이트에서 코드이그나이터를 다운 받는다. 다운받은 압축 파일을 풀어 준다. 이클립스에서 php 프로젝트를 생성한 공간에 코드이그나이터 압축파일을 복사 붙여넣기 해준다. 위와 같은 화면이 나오면 정상적으로 연동이 된 것 입니다. from http://nahosung.tistory.com/22 by ccl(A) rewrite - 2020-03-06 16:20:55