728x90
반응형
사이트가 되기 위해선 회원가입이 필수
저번에 한번 배우긴했지만 프로젝트로 다시 복습하게 됐다. 사실 내가 맡은 부분은 아니지만 앞으로 알아야 나도 내 개인 프로젝트를 할 수 있으니 복습을 철저하게 해보려고 한다.
일단 가장 먼저는 회원가입 테이블을 만드는 것이다.
package com.sist.vo;
import lombok.Getter;
import lombok.Setter;
@Getter
@Setter
public class MemberVO {
private String id,pwd,name,sex,birthday,email,post,addr1,addr2,tel,content,admin;
}
필요한 데이터들을 다 모아두고, 회원가입에 필요한 dao를 만들어준다.
// 회원가입
public void memberJoin(MemberVO vo)
{
try
{
getConnection();
String sql="INSERT INTO project_member VALUES(?,?,?,?,?,?,?,?,?,?,?,'n')";
ps=conn.prepareStatement(sql);
ps.setString(1, vo.getId());
ps.setString(2, vo.getPwd());
ps.setString(3, vo.getName());
ps.setString(4, vo.getSex());
ps.setString(5, vo.getBirthday());
ps.setString(6, vo.getEmail());
ps.setString(7, vo.getPost());
ps.setString(8, vo.getAddr1());
ps.setString(9, vo.getAddr2());
ps.setString(10, vo.getTel());
ps.setString(11, vo.getContent());
ps.executeUpdate();
}
catch (Exception ex) {
ex.printStackTrace();
}
finally
{
disConnection();
}
}사실 그냥 회원가입만 하는것은 그렇게 어렵지 않다. sql update문만 사용해서 만들어주면 된다.
하지만 아이디 중복 체크, 우편번호 검색이라는 기능이 추가되어야 하기 때문에 조금 더 복잡해진다.
우선 우편번호 검색부터 보면, 필요한 VO를 만들어준다.
package com.sist.vo;
public class ZipcodeVO {
private String zipcode, sido, gugun, dong, bunji;
private String address;
public String getZipcode() {
return zipcode;
}
public void setZipcode(String zipcode) {
this.zipcode = zipcode;
}
public String getSido() {
return sido;
}
public void setSido(String sido) {
this.sido = sido;
}
public String getGugun() {
return gugun;
}
public void setGugun(String gugun) {
this.gugun = gugun;
}
public String getDong() {
return dong;
}
public void setDong(String dong) {
this.dong = dong;
}
public String getBunji() {
return bunji;
}
public void setBunji(String bunji) {
this.bunji = bunji;
}
public String getAddress() {
return sido+" "+gugun+" "+dong+" "+bunji;
}
}
나머지 데이터들은 zipcode 테이블에 들어가 있는 정보지만, address는 가져온 데이터들을 문자열 결합을 통해 하나로 만들어 준다.
// 우편번호
public List<ZipcodeVO> postFindData(String dong)
{
List<ZipcodeVO> list=new ArrayList<ZipcodeVO>();
try
{
getConnection();
String sql="SELECT zipcode,sido,gugun,dong,NVL(bunji,' ') "
+"FROM zipcode "
+"WHERE dong LIKE '%'||?||'%'";
ps=conn.prepareStatement(sql);
ps.setString(1, dong);
ResultSet rs=ps.executeQuery();
while(rs.next())
{
ZipcodeVO vo=new ZipcodeVO();
vo.setZipcode(rs.getString(1));
vo.setSido(rs.getString(2));
vo.setGugun(rs.getString(3));
vo.setDong(rs.getString(4));
vo.setBunji(rs.getString(5));
list.add(vo);
}
rs.close();
}
catch (Exception ex)
{
ex.printStackTrace();
}
finally
{
disConnection();
}
return list;
}
그리고 동/읍/면 명을 사용자 입력값으로 받아와서 우편번호를 찾아주는 메소드를 만든다.
이때 매개변수는 입력값이고, LIKE문을 사용해서 결과값을 찾아준다.
아래는 우편번호를 찾아주는 post_find.jsp이다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.row {
width:500px;
margin: 0px auto;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#findBtn').click(function(){
let dong=$('#dong').val();
if(dong.trim()=="")
{
$('#check').text("동/읍/면을 입력하세요");
$('#dong').focus();
return;
}
$('#check').text("");
$.ajax({
type:'post',
url:'../member/post_result.do', // post_result.do?dong=값
data:{"dong":dong},
success:function(result)
{
$('.print').html(result);
}
})
})
})
</script>
</head>
<body>
<div style="height: 20px"></div>
<div class="container">
<div class="row">
<table class="table">
<tr>
<td>
<%--
posstfind.do?dong=
--%>
입력:<input type=text name="dong" size=10 class="input-sm" id="dong">
<input type=button value="검색" class="btn btn-sm btn-primary" id="findBtn">
</td>
</tr>
<tr>
<td>
<span style="color:red" id="check"></span>
</td>
</tr>
</table>
<div class="print"></div>
</div>
</div>
</body>
</html>
ajax 를 사용해서 화면이 새로고침 되지 않고 값을 받아오고 띄울 수 있게 해준다.
입력받은 값이 없으면 다시 입력하라는 메세지를 띄우고, 있으면 입력받은 값을 저장하고 post 방식으로 데이터를
post_result.jsp로 보내준다.
// 여기는 입력받은 읍/면/동 값을 포함하고 있는 주소 목록을 전부 불러오게 하는 기능이다.
@RequestMapping("member/post_result.do")
public String member_post(HttpServletRequest request, HttpServletResponse response)
{
try
{
request.setCharacterEncoding("UTF-8");
} catch (Exception e) {
}
String dong=request.getParameter("dong");
MemberDAO dao=MemberDAO.newInstance();
List<ZipcodeVO> list=dao.postFindData(dong);
request.setAttribute("list", list);
return "../member/post_result.jsp";
}우선 한글이 포함되기 때문에 한글변환을 해주고,
동을 매개변수로 받아 list에 값을 채워준뒤 post_result.jsp로 넘겨준다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
function ok(zip,addr)
{
parent.join_frm.post.value=zip;
parent.join_frm.addr1.value=addr;
parent.Shadowbox.close();
}
</script>
</head>
<body>
<table class="table">
<tr>
<th class="text-center">우편번호</th>
<th class="text-center">주소</th>
</tr>
<c:forEach var="vo" items="${list }">
<tr>
<td class="text-center">${vo.zipcode }</td>
<td><a href="javascript:ok('${vo.zipcode }','${vo.address }')">${vo.address }</a></td>
</tr>
</c:forEach>
</table>
</body>
</html>
리스트를 띄우고 사용자가 맞는 주소를 클릭하면 그 값을 그대로 postfind의 상위 jsp인 join.jsp로 값을 넘겨주고, shadowbox를 닫아준다.
그러면 자동적으로 우편번호와 주소 입력란에 찾은 우편번호를 입력하고 종료하게 된다.
다음은 아이디 중복체크
우편번호보단 이게 더 쉬운 느낌이었다.
이것도 메인화면에 띄우는 것이기 때문에 shadowBox처리를 main에서 해줘야 한다.
$('#checkBtn').click(function(){
Shadowbox.open({
content:'../member/idcheck.jsp',
player:'iframe',
title:'아이디중복체크',
width:340,
height:200
})
})idcheck.jsp를 띄우면 화면에 그 내용이 들어간다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.row {
width:300px;
margin: 0px auto;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#LogBtn').click(function(){
let id=$('#id').val();
// 아이디 입력이 안됐을때
if(id.trim()=="")
{
$('#result').text("아이디를 입력하세요");
$('#id').focus();
return;
}
// 입력이 됐으면 text내용을 지워줘야함
$('#result').text("");
$.ajax({
type:'post',
url:'../member/idcheck_result.do',
data:{"id":id},
// 정상수행하면,
success:function(result)
{
let count=result.trim();
if(count==0)
{
$('#result').html('<font color="blue">'+id+"는(은) 사용가능합니다"+'</font>');
$('#check').html('<input type=button value=확인 class="btn btn-sm btn-success" onclick="ok()">')
}
else
{
$('#result').html('<font color="red">'+id+"는(은)이미 사용중입니다"+'</font>');
$('#check').html('');
}
}
})
})
})
function ok()
{
parent.join_frm.id.value=$('#id').val();
parent.Shadowbox.close();
}
</script>
</head>
<body>
<div style="height:20px">
<div class="containter">
<div class="row">
<table class="table">
<tr>
<td>
ID:<input type=text name=id id=id size=15 class="input-sm">
<input type="button" id=LogBtn value="아이디체크" class="btn btn-sm btn-primary">
</td>
</tr>
<tr>
<td class="text-center"><span id="result"></span></td>
</tr>
<tr>
<td class="text-center" id="check"></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>아이디를 입력받아서 정상수행하면 아이디를 post방식으로 idcheck_result.do로 보내준다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
${count}idcheck_result에서는 count라는 결과값을 보내주는데,
@RequestMapping("member/idcheck_result.do")
public String idcheck(HttpServletRequest request, HttpServletResponse response)
{
String id=request.getParameter("id");
MemberDAO dao=MemberDAO.newInstance();
int count=dao.idcheck(id);
request.setAttribute("count", count);
return "../member/idcheck_result.jsp"; // 결과를 출력하는 jsp값
}model에서 이미 존재하는 아이디가 있는지 확인을 한뒤 반환하고 request에 담아 보내줬다.
0이면 사용가능, 아니면 존재하는 아이디라는 창을 띄워주고 각각 result와 check자리에 결과값을 띄워주고 마무리한다.
그렇게 나머지값도 입력받은 뒤 아래와 같이 model에서 처리를 해주면 끝난다.
@RequestMapping("member/join_ok.do")
public String join_ok(HttpServletRequest request, HttpServletResponse response)
{
try
{
request.setCharacterEncoding("UTF-8");
} catch (Exception ex) {}
String id=request.getParameter("id");
String pwd=request.getParameter("pwd");
String name=request.getParameter("name");
String sex=request.getParameter("sex");
String birthday=request.getParameter("birthday");
String addr1=request.getParameter("addr1");
String addr2=request.getParameter("addr2");
String content=request.getParameter("content");
String post=request.getParameter("post");
// 받을때는 따로 받아야함
String tel1=request.getParameter("tel1");
String tel2=request.getParameter("tel2");
String email=request.getParameter("email");
MemberVO vo=new MemberVO();
vo.setAddr1(addr1);
vo.setAddr2(addr2);
vo.setBirthday(birthday);
vo.setContent(content);
vo.setEmail(email);
vo.setPost(post);
vo.setId(id);
vo.setName(name);
vo.setPwd(pwd);
vo.setSex(sex);
vo.setTel(tel1+"-"+tel2);
MemberDAO dao=MemberDAO.newInstance();
dao.memberJoin(vo);
return "redirect:../main/main.do";
}728x90
반응형
'programming > Gukbi' 카테고리의 다른 글
| 국비 교육 69일차 - 찜목록, 댓글 달기 수정 삭제 (0) | 2021.04.07 |
|---|---|
| 국비 교육 69일차 - 로그인 (0) | 2021.04.06 |
| 국비 교육 67일차 - 페이지 블록 나누기 (0) | 2021.04.03 |
| 국비 교육 66일차 - mainPage만들기 (0) | 2021.04.03 |
| 국비 교육 65일차 - annotation 사용 controller 제작 (0) | 2021.03.30 |
