미니 프로젝트 : [Java로 쇼핑몰 만들기] - 회원가입창2

까만호랭·2023년 8월 28일

미니프로젝트(모델1)

https://velog.io/@horange/미니프로젝트-쇼핑몰-회원가입-만들기

3.2번의 zip코드 내용설명이 많아 추가로 포스팅을 하였다.

🖥️ 우편번호 찾기 기능

아래 형식에서 "우편번호 찾기"를 클릭했을 때 기능을 구현한다.

🔨 주소찾기 기능 구현 순서

동이름 입력 후 검색버튼 클릭
MariaDB에서 클라이언트 입력값으로 시작하는 동이름을 리스트로 불러옴
화면에 리스트를 출력
리스트를 클릭시 회원가입 창에 선택한 주소 자동 입력

1. 버튼찾기 버튼 클릭 => 창 띄우기

register.jsp

<script src="../js/script.js"></script>
<script type="text/javascript">
window.onload = function(){
   document.getElementById("btnZip").onclick = zipCheck;
</script>
...(중략)
<td>우편번호</td>
   <td>
      <input type="text" name="zipcode" size="7"> 
      <input type="button" value="우편번호찾기" id="btnZip">
   </td>

script.js

function zipCheck(){
   let url="zipcheck.jsp?check=y"
   window.open(url,"post","toolbar=no,width=500,height=300,top=200,left=300,scrollbars=yes,menubar=no");
}

📌zipcheck.jsp파일을 window.open으로 열어준다. 기본값 check=y로 넘겨준다

2. 동이름 입력 후 검색 버튼 클릭

zipcheck.jsp

<script src="../js/script.js"></script>
<script type="text/javascript">
window.onload=function(){
   document.querySelector("#btnZipFind").onclick=dongCheck;
   document.querySelector("#btnZipClose").onclick=function(){
   window.close();
   }
}
function dongCheck(){
   if(zipForm.dongName.value === ""){
      alert("검색할 동이름을 입력하시오");
      zipForm.dongName.focus();
      return;
   }
   zipForm.submit();
}
</script>
...(중략)
<form action="zipcheck.jsp" name="zipForm" method="post">
<table>
   <tr>
      <td>
         동이름 입력 : <input type="text" name="dongName">
         <input type="button" value="검색" id="btnZipFind"/>
         <input type="button" value="닫기" id="btnZipClose"/>
         <input type="hidden" value="n"  name="check"/>
      </td>
   </tr>
</table>
</form>

검색버튼 클릭시 빈칸여부를 확인 후 form을 제출한다.
동일 파일인 zipcheck.jsp를 action한다
1번의 '📌'에서 check=y ➡️ dongCheck()의 submit ➡️ hidden으로 check=n이 넘어온다

2-1. MariaDB와 연동하여 주소 리스트 불러오기

zipcheck.jsp

<%@page import="pack.member.ZipcodeDto"%>
<%@page import="java.util.ArrayList"%>
<jsp:useBean id="memberMgr" class="pack.member.MemberManager"/>
<%
String check = request.getParameter("check");
String dongName = request.getParameter("dongName");
ArrayList<ZipcodeDto> zlist = memberMgr.zipcodeRead(dongName);
%>

MemberManager.java

public ArrayList<ZipcodeDto> zipcodeRead(String dongName){
   ArrayList<ZipcodeDto> list = new ArrayList<ZipcodeDto>();
   try {
      String sql = "select * from ziptab where area3 like ?";
      conn=ds.getConnection();
      pstmt=conn.prepareStatement(sql);
      pstmt.setString(1, dongName + "%");
      rs = pstmt.executeQuery();
      while(rs.next()) {            
         ZipcodeDto dto = new ZipcodeDto();
         dto.setZipcode(rs.getString("zipcode"));
         dto.setArea1(rs.getString("area1"));
         dto.setArea2(rs.getString("area2"));
         dto.setArea3(rs.getString("area3"));
         dto.setArea4(rs.getString("area4"));
         list.add(dto);
         }
      } catch (Exception e) {
         System.out.println("zipcodeRead err" + e);
      }finally {
         try {
            if(rs != null) rs.close();
            if(pstmt != null) pstmt.close();
            if(conn != null) conn.close();
         } catch (Exception e2) {
         }
      }
      return list;
// zipcode, area1, area2, area3, area4 (MariaDB 컬럼 입력 순서이자 dto변수명)
//'135-807', '서울', '강남구', '개포1동 우성3차아파트', '(1∼6동)'
   }

public ArrayList<ZipcodeDto> zipcodeRead(String dongName)을 통해 클라이언트가 입력한 '동 이름'을 sql(""select * from ziptab where area3 like ?"), (1, dongName + "%")로, 해당 동이름으로 시작하는 주소를 검색한다
이후 rs.next()와 ZipcodeDto를 통해 불러온 값을 ZipcodeDto의 변수에 set해준다
set과정을 마치고 list.add(dto)를 통해 list에 검색값을 입력해준다.
위 2개의 과정을 서버와 연동하여 검색한 모든 결과를 list에 저장해준다(여기서 list는 ZipcodeDto를 ArrayList화 하여 넣어준 배열객체의 변수명이다)
모든 검색과정을 마치면 return list;로 반환해준다 => 이것을 zipcheck.jsp에서 zlist로 받아온다

3. 연동한 list값, 화면으로 구현하기

zipcheck.jsp

<%
if(check.equals("n")){
   if(zlist.isEmpty()){
%>
      <b>검색 결과가 없습니다 !!</b>
<%   
   }else{ 
%>
   <table>
      <tr>
         <td style="color:red; font-weight:bold;">검색 자료를 입력하면 자동으로 주소가 입력됩니다
           </td>
      </tr>
      <tr>
         <td>
<%
         for(int i=0; i < zlist.size(); i++){
            ZipcodeDto dto = zlist.get(i); 
            String zipcode = dto.getZipcode();
            String area1 = dto.getArea1();
            String area2 = dto.getArea2();
            String area3 = dto.getArea3();
            String area4 = dto.getArea4();
            if(area4 == null) area4="";
%>
   <a href="javascript:sendFunc('<%=zipcode%>','<%=area1%>','<%=area2%>',
                                         '<%=area3%>','<%=area4%>')">
      <%=zipcode %> <%=area1 %> <%=area2 %> <%=area3 %> <%=area4 %>
   </a><br/>
<%
         }
%>         
         </td>
      </tr>
   </table>
<%}
}
%>

받아온 zlist를 for문을 통해 dto변수에 입력된 값을 zipcode, area1, area2, area3, area4에 넣어준다
<%=zipcode %> <%=area1 %> <%=area2 %> <%=area3 %> <%=area4 %>
나란히 배치하여 화면에 출력한다.
<a href="javascript:sendFunc ('<%=zipcode%>','<%=area1%>','<%=area2%>','<%=area3%>','<%=area4%>')"></a>
를 통해 클라이언트가 선택한 주소를 모두 sendFunc에 메개변수로 보낸다

4. 주소 클릭시 자동 입력

zipcheck.jsp

function sendFunc(zipcode,a1,a2,a3,a4){
   opener.document.regForm.zipcode.value=zipcode;
   let addr = a1+" " + a2 + " " + a3 + " " + a4;
   opener.document.regForm.address.value=addr;
   window.close();
}