티스토리 뷰
회원가입 시 주소를 카카오톡 주소를 찾아 저장하도록 변경하기 위해 회원가입 폼을 수정했다.
목표와 같은 행위를 하기 위해서는 카카오톡 우편번호 서비스를 이용해야한다.
https://postcode.map.daum.net/guide
Daum 우편번호 서비스
우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.
postcode.map.daum.net
위의 주소로 들어가서 필요한 코드를 복사하여 사용할 수 있다.
우리는 사용자가 선택한 주소를 사용할 수 있도록 위와 같은 스크립트를 복사해 사용했다.
createmember.jsp 회원가입 폼
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="<c:url value="/resources/css/bootstrap.min.css"/>"rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="icon" href="img/Fevicon.png" type="image/png">
<link rel="stylesheet" href="<c:url value='/resources/vendors/bootstrap/bootstrap.min.css' />">
<link rel="stylesheet" href="<c:url value='/resources/vendors/fontawesome/css/all.min.css' />">
<link rel="stylesheet" href="<c:url value='/resources/vendors/themify-icons/themify-icons.css' />">
<link rel="stylesheet" href="<c:url value='/resources/vendors/linericon/style.css' />">
<link rel="stylesheet" href="<c:url value='/resources/vendors/owl-carousel/owl.theme.default.min.css' />">
<link rel="stylesheet" href="<c:url value='/resources/vendors/owl-carousel/owl.carousel.min.css' />">
<link rel="stylesheet" href="<c:url value='/resources/vendors/nice-select/nice-select.css' />">
<link rel="stylesheet" href="<c:url value='/resources/vendors/nouislider/nouislider.min.css' />">
<script src="https://kit.fontawesome.com/c3566586b6.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="<c:url value='/resources/css/style.css' />">
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function sample6_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
var extraAddr = ''; // 참고항목 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress;
}
// 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
if(data.userSelectedType === 'R'){
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
extraAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if(extraAddr !== ''){
extraAddr = ' (' + extraAddr + ')';
}
// 조합된 참고항목을 해당 필드에 넣는다.
document.getElementById("sample6_extraAddress").value = extraAddr;
} else {
document.getElementById("sample6_extraAddress").value = '';
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('sample6_postcode').value = data.zonecode;
document.getElementById("sample6_address").value = addr;
// 커서를 상세주소 필드로 이동한다.
document.getElementById("sample6_detailAddress").focus();
}
}).open();
}
</script>
<title>회원 등록</title>
</head>
<body>
<nav class="navbar navbar-expand navbar-dark bg-dark">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="./home">Home</a>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1 class="display-3">회원 등록</h1>
</div>
</div>
<div class="container">
<form:form modelAttribute="member" enctype="multipart/form-data" class="form-horizontal">
<fieldset>
<div class="form-group row">
<label class="col-sm-2 control-label">회원ID</label>
<div class="col-sm-3">
<form:input path="memberId" class="form-control" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 control-label">비밀번호</label>
<div class="col-sm-3">
<form:input path="password" class="form-control" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 control-label">회원명</label>
<div class="col-sm-3">
<form:input path="name" class="form-control" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 control-label">생년월일</label>
<div class="col-sm-3">
<form:input type="date" path="birth" class="form-control" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 control-label">주소</label>
<div class="col-sm-3">
<input type="text" name="zipcode" path="address.zipcode" id="sample6_postcode" placeholder="우편번호" class="form-control" >
<input type="button" name="zipcode" path="address.zipcode" onclick="sample6_execDaumPostcode()" value="우편번호 찾기" class="form-control" ><br>
<input type="text" name="streetAddress" path="address.streetAddress" id="sample6_address" placeholder="주소"><br>
<input type="text" name="detaileAddress" path="address.detaileAddress" id="sample6_detailAddress" placeholder="상세주소" class="form-control" >
<input type="text" name="extraAddress" path="address.extraAddress" id="sample6_extraAddress" placeholder="참고항목" class="form-control" >
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 control-label">이미지</label>
<div class="col-sm-7">
<form:input path="memberImage" type="file" class="form-control" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 control-label">성별</label>
<div class="col-sm-3">
<form:radiobutton path="sex" value="남성" />남성
<form:radiobutton path="sex" value="여성" />여성
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 control-label">소속구단</label>
<div class="col-sm-3">
<form:input path="team" class="form-control" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 control-label">부상정보</label>
<div class="col-sm-5">
<form:textarea path="injury" cols="50" rows="2" class="form-control" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 control-label">수강강의</label>
<div class="col-sm-3">
<form:input path="classId" class="form-control" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 control-label">코치번호</label>
<div class="col-sm-3">
<form:input path="teacherId" class="form-control" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 control-label">개인성적</label>
<div class="col-sm-3">
<form:input path="personalRecord" class="form-control" />
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-primary" value="가입하기" />
<input type="reset" class="btn btn-primary" value="다시쓰기" />
</div>
</div>
</fieldset>
</form:form>
<hr>
<footer>
<p>© Member</p>
</footer>
</div>
</body>
</html>
카카오에서 가져온 스크립트를 작성해준다.
그 후 회원등록하는 폼을 실행하고 주소를 검색하면 아래와 같은 화면을 볼 수 있다.
member.java
package com.springmvc.domain;
import java.io.Serializable;
import org.springframework.web.multipart.MultipartFile;
public class Member implements Serializable{
private static final long serialVersionUID = 8236615161898888510L;
private String memberId; // 아이디
private String name; // 이름
private String password; // 비밀번호
private String birth; // 생년월일
private String team; // 소속구단
private String injury; // 부상정보
private Address address = new Address(); // 주소
private String classId; // 클래스 등록번호
private String teacherId; // 코치 번호
private String personalRecord; // 개인성적
private String sex; //성별
private MultipartFile memberImage;
private String fileName;
public Member() {
super();
// TODO Auto-generated constructor stub
}
public String getMemberId() {
return memberId;
}
public void setMemberId(String memberId) {
this.memberId = memberId;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getBirth() {
return birth;
}
public void setBirth(String birth) {
this.birth = birth;
}
public String getTeam() {
return team;
}
public void setTeam(String team) {
this.team = team;
}
public String getInjury() {
return injury;
}
public void setInjury(String injury) {
this.injury = injury;
}
public Address getAddress() {
return address;
}
public void setAddress(Address address) {
this.address = address;
}
public String getClassId() {
return classId;
}
public void setClassId(String string) {
this.classId = string;
}
public String getTeacherId() {
return teacherId;
}
public void setTeacherId(String teacherId) {
this.teacherId = teacherId;
}
public String getPersonalRecord() {
return personalRecord;
}
public void setPersonalRecord(String personalRecord) {
this.personalRecord = personalRecord;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public MultipartFile getMemberImage() {
return memberImage;
}
public void setMemberImage(MultipartFile memberImage) {
this.memberImage = memberImage;
}
public String getFileName() {
return fileName;
}
public void setFileName(String fileName) {
this.fileName = fileName;
}
}
address.java 추가
package com.springmvc.domain;
import java.io.Serializable;
public class Address implements Serializable {
/**
*
*/
private static final long serialVersionUID = -1126489558908019975L;
private String zipcode;
private String streetAddress;
private String detaileAddress;
private String extraAddress;
// Address 객체를 문자열로 변환하는 메서드
public String toString() {
return zipcode + " " + streetAddress + " " + detaileAddress + " " + extraAddress;
}
//Address 클래스에 toString 메서드가 정의되어 있는지 확인하세요. toString 메서드가 없으면 기본적으로 객체의 해시코드를 반환하기 때문에 의도한 결과가 나오지 않을 수 있습니다. Address 클래스에 다음과 같이 toString 메서드를 추가
public String getZipcode() {
return zipcode;
}
public void setZipcode(String zipcode) {
this.zipcode = zipcode;
}
public String getStreetAddress() {
return streetAddress;
}
public void setStreetAddress(String streetAddress) {
this.streetAddress = streetAddress;
}
public String getDetaileAddress() {
return detaileAddress;
}
public void setDetaileAddress(String detaileAddress) {
this.detaileAddress = detaileAddress;
}
public String getExtraAddress() {
return extraAddress;
}
public void setExtraAddress(String extraAddress) {
this.extraAddress = extraAddress;
}
// isEmpty() 메서드 추가
public boolean isEmpty() {
return zipcode == null && streetAddress == null && detaileAddress == null && extraAddress == null;
}
}
MemberRowMapper.java
package com.springmvc.repository;
import java.sql.ResultSet;
import java.sql.SQLException;
import org.springframework.jdbc.core.RowMapper;
import com.springmvc.domain.Address;
import com.springmvc.domain.Member;
public class MemberRowMapper implements RowMapper<Member>{
public Member mapRow(ResultSet rs, int rowNum) throws SQLException{
Member member = new Member();
member.setMemberId(rs.getString(1));
member.setName(rs.getString(2));
member.setPassword(rs.getString(3));
member.setBirth(rs.getString(4));
member.setTeam(rs.getString(5));
member.setInjury(rs.getString(6));
/* member.setAddress(rs.getString(7)); */
/*
* // 주소 정보 설정 추가 Address address = new Address(); // Assuming that the address
* column contains both zipcode and streetAddress separated by a space String[]
* addressParts = rs.getString(7).split(" "); if (addressParts.length >= 2) {
* address.setZipcode(addressParts[0]);
* address.setStreetAddress(addressParts[1]+addressParts[2]+addressParts[3]+
* addressParts[4]); address.setDetaileAddress(addressParts[5]+addressParts[6]);
* address.setExtraAddress(addressParts[7]); // Set other address fields as
* needed }*/
Address address = parseAddress(rs.getString(7)); // Assuming "address" is in column 7
member.setAddress(address);
//member.setAddress(address);
member.setClassId(rs.getString(8));
member.setTeacherId(rs.getString(9));
member.setPersonalRecord(rs.getString(10));
member.setSex(rs.getString(11));
member.setFileName(rs.getString(12));
return member;
}
private Address parseAddress(String addressColumnValue) {
if (addressColumnValue == null || addressColumnValue.trim().isEmpty()) {
return null; // 주소 정보가 없는 경우
}
Address address = new Address();
// Split the address value using a space as delimiter
String[] addressParts = addressColumnValue.split(" ");
// Set zipcode
if (addressParts.length > 0) {
address.setZipcode(addressParts[0]);
}
// Set streetAddress
if (addressParts.length > 1) {
StringBuilder streetAddressBuilder = new StringBuilder();
for (int i = 1; i < addressParts.length; i++) {
streetAddressBuilder.append(addressParts[i]).append(" ");
}
address.setStreetAddress(streetAddressBuilder.toString().trim());
}
// Set detailAddress and extraAddress if available
if (addressParts.length > 6) { // Assuming detailAddress and extraAddress are present
address.setDetaileAddress(addressParts[5] + " " + addressParts[6]);
if (addressParts.length > 8) {
address.setExtraAddress(addressParts[7] + " " + addressParts[8]);
// You can add more logic for additional address fields if needed
}
}
return address.isEmpty() ? null : address;
}
}
member.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
<link href="<c:url value="/resources/css/bootstrap.min.css"/>"rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="icon" href="img/Fevicon.png" type="image/png">
<link rel="stylesheet" href="<c:url value='/resources/vendors/bootstrap/bootstrap.min.css' />">
<link rel="stylesheet" href="<c:url value='/resources/vendors/fontawesome/css/all.min.css' />">
<link rel="stylesheet" href="<c:url value='/resources/vendors/themify-icons/themify-icons.css' />">
<link rel="stylesheet" href="<c:url value='/resources/vendors/linericon/style.css' />">
<link rel="stylesheet" href="<c:url value='/resources/vendors/owl-carousel/owl.theme.default.min.css' />">
<link rel="stylesheet" href="<c:url value='/resources/vendors/owl-carousel/owl.carousel.min.css' />">
<link rel="stylesheet" href="<c:url value='/resources/vendors/nice-select/nice-select.css' />">
<link rel="stylesheet" href="<c:url value='/resources/vendors/nouislider/nouislider.min.css' />">
<script src="https://kit.fontawesome.com/c3566586b6.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="<c:url value='/resources/css/style.css' />">
<meta charset="utf-8">
<title>회원 목록</title>
</head>
<body>
안녕하세요!
<c:forEach items="${memberList}" var="m">
<p>이름 : ${m.name}</h2>
<p>주소 : ${m.address }</p>
<p> ${m.address.zipcode}${m.address.streetAddress}</p>
</c:forEach>
</body>
</html>
출력화면은 아래와 같다.
한가지 문제점이 존재한다.
split으로 저장된 db 값을 잘라 저장하고자하니
주소마다 길이가 달랐다. 그렇기때문에 null이거나 값이 다 저장되지않는 문제점이 존재했다.
그래서 출력되는 값을 제한하여 조절했다.
'코딩 > spring' 카테고리의 다른 글
| [21주 5일차] 공공데이터포털 API 사용하기 (2) (0) | 2024.03.01 |
|---|---|
| [21주 4일차] 공공데이터포털 API 사용하기 (0) | 2024.02.29 |
| [21주 2일차] 프로젝트 (1) | 2024.02.27 |
| [21주 1일차] 팀별 순위 (1) | 2024.02.26 |
| DB연결 preparedstatement (1) | 2024.02.25 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday