(15) 주소입력시 우편번호 검색 기능 추가하기. - 다음 그림과 같이 우편번호검색기능을 추가하여 방문객이 우편번호를 검색하면 어느정도의 주소가 자동으로 할당되고 나머지 세세한 주소를 적도록 입력폼을 바꾸어 보자.
입력폼을 위의 그림과 같이 만들기 위해 기존의 login_new.asp 문서중 form 태그부분을 다음과 같이 수정하도록 한다.
| login_new.asp |
<html>
<head><title>새로운회원</title>
<script language="JavaScript">
<!--
...생략...
// -->
</script>
<style type="text/css">
<!--
...생략...
-->
</style>
</head>
<body>
<form action=./login_insert.asp method=post name=form
onSubmit="Javascript:return CheckForm();">
<table border=0 width=100% cellpadding=0 cellspacing=0>
<tr><td bgcolor=black>
<table border=0 width=100% cellpadding=3 cellspacing=1>
<tr><td bgcolor=#C7E4FD align=center><b>회원가입양식</b></td></tr>
<tr><td bgcolor=white>
<table border=0 witdh=100% cellpadding=0 cellspacing=0>
<tr><td align=center bgcolor=#eff8ff>아이디</td>
<td> <input type=text size=15 name=id style="border:1 dashed;"></td></tr>
<tr><td align=center bgcolor=#eff8ff>비밀번호</td>
<td> <input type=password size=15 name=pwd style="border:1 dashed;"></td></tr>
<tr><td align=center bgcolor=#eff8ff>비번확인</td>
<td> <input type=password size=15 name=pwd2 style="border:1 dashed;"></td></tr>
<tr><td align=center bgcolor=#eff8ff>이름</td>
<td> <input type=text size=15 name=name style="border:1 dashed;"></td></tr>
<tr><td align=center bgcolor=#eff8ff>주민등록</td>
<td> <INPUT name=jumin1 maxLength=6 size=6 style="border:1 dashed;">
- <INPUT name=jumin2 maxLength=7 size=7 style="border:1 dashed;"></td></tr>
<tr><td align=center bgcolor=#eff8ff>이메일</td>
<td> <input type=text size=20 name=email style="border:1 dashed;"></td></tr>
<tr><td align=center bgcolor=#eff8ff>우편번호</td>
<td>
<input type=text name=zipcode1 size=3 maxlength=3 style='border: 1 dashed;' readonly>
- <input type=text name=zipcode2 size=3 maxlength=3 style='border: 1 dashed;' readonly>
※ <a href='#' ONCLICK="window.open('login_zipcode.asp','win','width=450,height=350,
menubar=no,scrollbars=yes');return false">우편번호검색</a></td></tr>
<tr><td align=center bgcolor=#eff8ff>주소</td>
<td> <input type=text size=60 MAXLENGTH=200 name=address
style="border:1 dashed;" readonly></td></tr>
<tr><td align=center bgcolor=#eff8ff>나머지주소</td>
<td> <input type=text size=60 MAXLENGTH=200 name=address2
style="border:1 dashed;"></td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
<table border=0 width=100% cellpadding=3 cellspacing=3>
<tr><td align=center>
<input type=image src=./img/ok.gif alt="회원가입">
</table>
</form>
</body>
</html> | | |
녹색부분이 추가된 부분인데...우편번호검색의 하이퍼링크를 자바스크립트를 이용해서 작은 창이 띄워지도록 설정하는 방법이다. 그 작은 창에 들어갈 내용을 login_zipcode.asp 문서로 지정하였다. 이것은 다음과 같이 작성한다.
| login_zipcode.asp |
<html>
<head>
<title>우편번호 찾기</title>
<style type="text/css">
<!--
BODY, table, tr, td, font,input, textarea, select
{
font-family: 굴림;
font-size: 9pt;
}
-->
</style><script Language="JavaScript">
<!--
function Zip_search()
{
if (document.Zip.address.value.length == 0) {
alert("찾으시는 동이름을 입력하시오.");
document.Zip.address.focus();
return false;
}
else{
document.Zip.action="login_zipcode_search.asp";
document.Zip.submit();
return true;
}
}
function Cancel() { self.close(); }
//-->
</script>
</head>
<body onload="document.Zip.address.focus()">
<center>
<font color=Green size=3>우편번호검색 - Step 1/2</font>
<hr size=0 width=90%>
<font>찾으시는 동/읍/면/리 이름을 입력하세요.<br>
예) '행신동' , '목동' , '상계동'</font>
<p>
<form method="POST" name="Zip" onSubmit="return Zip_search();">
<hr size=0 width=90%>
<input type="text" name="address" size="20" maxlength="20" value="" style='border:solid 1;'>
<hr size=0 width=90%>
<IMG SRC="./img/ok.gif" BORDER=0 hspace=0 alt="확인" OnClick="Zip_search();">
</form>
</center>
</body>
</html> | | |
login_new.asp문서를 브라우저로 확인하고 우편번호검색을 누르면 뜨는 작은 창(login_zipcode.asp)는 다음과 같다.
여기에서 원하는 동(ex:행신동)을 입력하고 확인을 누르면 입력된 쿼리값을 상단의 login_zipcode.asp 소스내 빨간색으로 지정된 부분인 Zip_search() 함수로 값을 돌리고 이 함수안에서 login_zipcode_search.asp 문서로 다시 쿼리 값을 보내게 된다. 이제 login_zipcode_search.asp 문서를 다음과 같이 작성한다.
| login_zipcode_search.asp |
<html>
<head>
<title>우편번호 찾기</title>
<style type="text/css">
<!--
BODY, table, tr, td, font,input, textarea, select
{
font-family: 굴림;
font-size: 9pt;
}
-->
</style><script Language="JavaScript">
<!--
function Zip_search() {
if (document.Zip.address.value.length == 0) {
alert("찾으시는 동이름을 입력하시오.");
document.Zip.address.focus();
return false;
}
else{
document.Zip.action="login_zipcode_search.asp";
document.Zip.submit();
return true;
}
}
function confirm(dck)
{
if (dck.zip_chk.length == null) {
var zip_1 = dck.zip_chk.value.substring(0,3);
var zip_2 = dck.zip_chk.value.substring(4,7);
var zip_address = dck.zip_chk.value.substring(7);
}
for(var i=0; i<dck.zip_chk.length; i++) {
if(dck.zip_chk[i].checked == true) {
var zip_1 = dck.zip_chk[i].value.substring(0,3);
var zip_2 = dck.zip_chk[i].value.substring(4,7);
var zip_address = dck.zip_chk[i].value.substring(7);
break;
}
}
if( i==dck.zip_chk.length ) {
alert("해당 주소를 선택하십시요.");
}
else {
opener.form.zipcode1.value = zip_1;
opener.form.zipcode2.value = zip_2;
opener.form.address.value = zip_address;
opener.form.address2.focus();
self.close();
}
}
//-->
</script>
</head>
<body onload="document.Zip.address.focus()">
<center>
<font color=Green size=3>우편번호검색 - Step 2/2</font>
<hr size=0 width=95%>
<font>찾으시는 동/읍/면/리 이름을 입력하세요.<br>
예) '행신동' , '목동' , '상계동'</font>
<p>
<form method="POST" name="Zip" onSubmit="return Zip_search();">
<hr size=0 width=95%>
<input type="text" name="address" size="20" maxlength="20" value="" style='border:solid 1;'> <IMG align=absmiddle SRC="./img/ok.gif" BORDER=0 hspace=0 alt="확인" OnClick="Zip_search();">
<hr size=0 width=95%>
</form>
<table border=0 width=90%><tr><td>
<%
'검색어를 전달받아 변수에 저장
Dim address
address = Request("address")
'데이터베이스 연결 설정
Dim objConn,objRS,SQL
Set objConn = Server.CreateObject("ADODB.Connection")
objConn.Open ("DSN=dsn_login;UID=abcd;PWD=abcd;")
'자료를 레코드셋에 가져오기
SQL = "select * from zipcode where s3='" & address & "'" & " or s4='" & address & "'"
Set objRS = objConn.Execute(SQL)
'검색자료가 있는지 검사 없으면 다시 입력폼만들고 있으면 내용 출력
if objRS.EOF then
response.write "검색된 값이 없습니다. 다른 검색어로.."
else
response.write "<center><font color=blue>하나를 선택하시고 맨아래 확인을 눌러주세요</font></center><p>"
response.write "<form method='POST' name='check'>"
Do while Not objRS.EOF
Dim addr,addr2
addr = objRS("s1") & " " & objRS("s2") & " " & objRS("s3") & " " & objRS("s4")
addr2 = objRS("Zipcode") & addr
response.write "<input type='radio' name='zip_chk' value='" & addr2 & "'>"
response.write " <font color=red>" & objRS("Zipcode") & "</font> " & addr & "<br>"
objRS.MoveNext
Loop
response.write "<hr size=0><center>"
response.write "<IMG align=absmiddle SRC='./img/ok.gif' BORDER=0 OnClick='confirm(document.check);'>"
response.write "</center></form>"
end if
Set objRS = nothing
Set objConn = nothing
%>
</td></tr></table></center>
</body>
</html> | | |
login_zip_search.asp 문서에서는 우편번호 DB에서 입력된 동이름(ex:행신동)을 쿼리값으로써 검색하게 되며 검색된 레코드의 내용을 순서적으로 뿌려주는 기능을 한다. 그리고 뿌려진 우편번호와 주소를 다시 원래의 login_new.asp문서가 실행된 화면으로 돌려주기 위해 자바스크립트를 사용하였다. 다음은 login_zipcode.asp 에서 '개포1동'으로 검색된 화면이다.
따라서 위의 소스를 만들어서 적용시키려면 우편번호DB가 필요하다. 이것은 다음에 첨부한 zipcode.mdb 화일(access)을 msSQL에서 import시켜 원한는 DB(예를 들어 이전에 만들었던 Login DB)안에 zipcode라는 테이블을 만들어주어야 한다. 이것은 SQL 설명을 참고하기 바란다.
|
