DTO
src/main/java에 dto package를 만들어주고 각 테이블 별로 Dto class를 만들고
테이블의 칼럼들을 선언해준 뒤 alt+shift+s>r, alt+shift+s>o, alt+shift+s>c 해서
constructs from super class // construct using fields // getter/setter 를 추가하고 끝.
MemberDto
package com.uragil.LMS.dto;
public class MemberDto {
private String mid;
private String mpw;
private String mname;
private String mphone;
private String brcode;
public MemberDto() {
super();
// TODO Auto-generated constructor stub
}
public MemberDto(String mid, String mpw, String mname, String mphone, String brcode) {
super();
this.mid = mid;
this.mpw = mpw;
this.mname = mname;
this.mphone = mphone;
this.brcode = brcode;
}
public String getMid() {
return mid;
}
public void setMid(String mid) {
this.mid = mid;
}
public String getMpw() {
return mpw;
}
public void setMpw(String mpw) {
this.mpw = mpw;
}
public String getMname() {
return mname;
}
public void setMname(String mname) {
this.mname = mname;
}
public String getMphone() {
return mphone;
}
public void setMphone(String mphone) {
this.mphone = mphone;
}
public String getBrcode() {
return brcode;
}
public void setBrcode(String brcode) {
this.brcode = brcode;
}
}
header.jsp
로그인 전에는 로그인과 회원 가입한 메뉴 버튼이 보이고
로그인 이후에는 HOME/ LOGOUT/ MODIFY 버튼이 나타나도록 만들 것이다.
디자인과 css는 무시하고
먼저 헤더 부분을 만들기 위해 view폴더에 header.jsp를 생성하고
<head> 안에 header.jsp 에 적용할
src/main/resources> static> css 폴더에 만들어둔 main.css파일을 불러 준다.
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/main.css">
img 폴더의 img들과 js폴더의 js파일을 불러올 때도 절대 경로가 아닌 위와 같은 경로를 사용하게 된다.
jsp 파일안에서 script를 작성 시에는 <% , %>로 감싸주면 사용이 가능하다.
login시 session 값 유무를 확인하여 로그인 전과 후를 구분하기 위해 session 값이 널 인지 비교를 하는 구분을 넣었다.
null 일 경우 로그인과 회원 가입이 보이도록하고 값이 들어있다면 홈, 로그아웃과 회원 수정 메뉴가 보일 것이다.
<%
String sessionValid = (String) session.getAttribute("id");
if(sessionValid == null){
%>
아래처럼 script 중간에 html이 섞여있으면 <% 열고 %> 닫고 실수하기 쉬우니 잘 확인한다.
session이 널이면 login 링크 생성 그렇지 않으면 로그아웃 링크가 보이게 만들어 주는 부분이다.
같은 로직을 사용하여 메뉴가 보이고 안보이고 바뀌게 만들었다.
<%
if(sessionValid == null){
%>
<a href="login" >LOG-IN</a>
<%
}else{
%>
<a href="logout" >LOGOUT</a></td>
<%
}
%>
header.jsp 전체
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/content.css?after">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/main.css?after">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/member.css?after">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/header.css?after">
<title>Insert title here</title>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0">
<tr height="50" bgcolor="#111111" >
<td width="70%" class="header01"> </td>
<td width="10%" class="header01">
<%
String sessionValid = (String) session.getAttribute("id");
if(sessionValid == null){
%>
</td>
<%
}else{
%>
<a href="home" >HOME</a></td>
<%
}
%>
<td width="10%" class="header01">
<%
if(sessionValid == null){
%>
<a href="login" >LOG-IN</a>
<%
}else{
%>
<a href="logout" >LOGOUT</a></td>
<%
}
%>
<td width="10%" class="header01">
<%
if(sessionValid == null){
%>
<a href="join" >JOIN</a>
<%
}else{
%>
<a href="infoModify" >MODIFY</td>
<%
}
%>
</tr>
<tr height="50">
<td> </td>
</tr>
</table>
</body>
</html>footer.jsp
footer는 그냥 글씨만 적어 주었다.
footer.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="${pageContext.request.contextPath }/resources/css/menu.css?after">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/header.css?after">
</head>
<body>
<table width="100%" BORDER="0" cellspacing="0" cellpadding="0">
<tr height="70">
<td> </td>
</tr>
<tr >
<td class="footer01" align="center">Copyright �뱬 Uragil_jay. All Rights Reserved</td>
</tr>
<tr >
<td class="footer01"align="center">This 'Library Management System Web' is built with Spring Framework. Made by Byunz.
</td>
</tr>
<tr >
<td class="footer01" align="center"> E-Mail: <a href="mailto:uragiljay@gmail.com">uragiljay@gmail.com</a>
| <a href="https://uragil-jay.tistory.com/" target="blank">Blog : uragil-jay.tistory.com/</a>
</td>
</tr>
</table>
</body>
</html>
이제 회원가입 페이지를 만들고 DB와의 연동을 시작해보자
join.jsp
테이블 만들면서 생각해둔 회원 테이블의 칼럼들을 인풋 받는 회원가입 폼을 만들어보자
<head> 안에서 js파일을 불러올 것이다.
아직 만들지 않았지만 회원가입 폼에 적절한 값이 들어오는지 validation 확인하는 스크립트를 작성할 것
경로는 src/main/resources>static>js>join.js
<script type="text/javascript" src="${pageContext.request.contextPath }/resources/js/join.js"></script>
그 밖에 따로 만들어 둔 css를 불러주면 <head> 부는 끝
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/menu.css">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/board.css">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/header.css">
바디 바로 밑에 만들어둔 header를 붙여준다.
script를 사용하기 위해 <% %>를 사용
<body>
<%@ include file="header.jsp" %>
form을 사용하여 button action 이 발생하면 input 된 정보를 post 방식으로 joginok로 보내주는 구문
method='get' 이면 주소창에 input정보들이 보이고 post에서는 보이지 않는다.
reg_frm 이름으로 스크립트에서 확인할 때 사용할 from의 이름을 정해주어 벨류 값을 비교하도록 해준다.
폼 안에 인풋 받을 값들을 정해 준다.
<input type="text" name="mid"> - 가입 id
<input type="password" name="mpw"> 가입 pw (type을 password로 하면 입력 시 화면에는 ●●●●로 처리)
<input type="password" name="mpw_check"> 가입 pw 재확인
<input type="text" name="mname"> 가입자 이름
<input type="text" name="mphone"> 가입자 연락처
완료 버튼은 버튼 클릭 시 입력한 값들을 joinCheck()로 보내주게 된다.
join check()는 join.js에 사용할 함수 이름이다.
<input class="button01" type="button" value="작성 완료" onclick="joinCheck()">
잘못 들어온 사람을 위해 로그인으로 보내주는 버튼 추가
<input class="button04" type="button" value="로그인" onclick="location.href='login'">
</form>
바디가 끝나기 전에 푸터를 불러와 달아 준다.
<%@ include file="include/footer.jsp" %>
</body>
join.jsp 전체
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/resources/js/join.js"></script>
<title>Insert title here</title>
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/menu.css?after">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/board.css?after">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/header.css?after">
</head>
<body>
<%@ include file="include/header.jsp" %>
<center>
<table width="70%" border="0" cellspacing="0" cellpadding="10">
<tr height="530">
<td bgcolor="#cba" align="center" height="500">
<form action="joinOk" method="post" name="reg_frm">
<table bgcolor="#210" height="120" width="300" cellspacing="10px">
<form action="joinOk" method="post" name="reg_frm">
<tr align="center" height="50">
<td class="board_br" colspan="2" >
<span class="content07">회원가입</span>
</td>
</tr>
<tr align="right" >
<td>
<span class="text01">ID:</span>
</td>
<td>
<input type="text" name="mid">
</td>
</tr>
<tr align="right">
<td>
<span class="text01">PW :</span>
</td>
<td>
<input type="password" name="mpw">
</td>
<tr align="right">
<td>
<span class="text01">PWCHECK :</span>
</td>
<td>
<input type="password" name="mpw_check">
</td>
</tr>
<tr align="right">
<td>
<span class="text01">NAME :</span>
</td>
<td>
<input type="text" name="mname">
</td>
</tr>
<tr align="right">
<td>
<span class="text01">PHONE :</span>
</td>
<td>
<input type="text" name="mphone">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input class="button01" type="button" value="작성완료" onclick="joinCheck()">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input class="button04" type="button" value="로그인" onclick="location.href='login'">
</td>
</tr>
</form>
</table>
</tr>
</table>
</center>
<%@ include file="include/footer.jsp" %>
</body>
</html>
join.js
join.jsp에서 작성완료 버튼을 누르면 입력한 값들이 다음 함수로 넘어와 유효성 검사를 거치게 된다.
함수 이름은 joinCheck() 을 정해주었다
function joinCheck() {
documnet의.reg_frm의 mid(아이디)의 벨류의 길이가 0이면
if(document.reg_frm.mid.value.length == 0) {
아이디를 입력해주세요라고 alert창을 띄운다.
alert("아이디를 입력해주세요.");
focus(); 명령으로 reg_frm의mid 입력란으로 커서를 위치시킨다.
reg_frm.mid.focus();
return;
}
같은 로직으로 여러 가지 validation을 걸어 줄 수 있다.
if문들을 작성한 후 if문에 걸리는 것이 없으면 submit 하여 reg_frm의 action을 발동시킨다.
document.reg_frm.submit();
join.js 전체
/**
*
*/
function joinCheck() {
if(document.reg_frm.mid.value.length == 0) {
alert("아이디를 입력해주세요.");
reg_frm.mid.focus();
return;
}
if(document.reg_frm.mid.value.length < 4) {
alert("아이디는 4글자 이상이어야 합니다.");
reg_frm.mid.focus();
return;
}
if(document.reg_frm.mpw.value.length == 0) {
alert("비밀번호를 입력해주세요.");
reg_frm.mpw.focus();
return;
}
if(document.reg_frm.mpw_check.value.length == 0) {
alert("비밀번호 체크를 입력해주세요.");
reg_frm.mpw_check.focus();
return;
}
if(document.reg_frm.mpw.value != document.reg_frm.mpw_check.value) {
alert("비밀번호가 일치하지 않습니다. 비밀번호를 확인해주세요.");
reg_frm.mpw.focus();
return;
}
if(document.reg_frm.mname.value.length == 0) {
alert("이름은 필수 입력사항입니다.");
reg_frm.mname.focus();
return;
}
if(document.reg_frm.mphone.value.length == 0) {
alert("전화번호는 필수사항입니다.");
reg_frm.mphone.focus();
return;
}
document.reg_frm.submit();
}Dao
src/main/java에 dao package를 만들고 Dao는 Dto와 다르게 class가 아닌 interface로 만든다.
회원가입 시 입력받은 id, pw 이름, 연락처를 받아 DB에 insert 시 사용할 것으로 만들어두었다. data형이 앞에 붙는다.
public void joinDao(String mid, String mpw, String mname, String mphone);
id를 받아 db에 저 정 된 값이 있는지 확인할 때 사용할 것으로 checkIdDao를 만들어두었다.
public int checkIdDao(String mid);
IDao.java(join관련)
package com.uragil.LMS.dao;
import com.uragil.LMS.dto.MemberDto;
public interface IDao {
//memberDao
public void joinDao(String mid, String mpw, String mname, String mphone);
public int checkIdDao(String mid);
IDao.xml
src/main/resources>경로에 mybatis-mapper폴더를 만들고 IDao.xml을 생성해 주었다.
이곳에 DB query 문을 작성하여 IDao.java에서 만든 함수들이 작동하도록 할 것이다.
Dao Idao와 매퍼 되어 작동 IDao의 경로를 적어준다.
<mapper namespace="com.uragil.LMS.dao.IDao">
사용할 query와 함수를 적고 전체 쿼리를 적어 준다.
joinDao를 insert 하는 데 사용할 것이고
<insert id="joinDao">
joinDao() 괄호 안의 값들을
b_member 테이블의 각 칼럼에 insert 시키는 구문이다. values값은 순서대로 param1, 2, 3 숫자를 부여한다.
INSERT INTO b_member (mid, mpw, mname, mphone)VALUES(#{param1},#{param2},#{param3},#{param4})
</insert>
checkIdDao의 결괏값은 정수로 1 아니면 0으로 반환받는다.
<select id="checkIdDao" resultType="int">
b_member 테이블의 mid칼럼에 parma1(string mid) 값이 있는지 확인하여 있으며 1 없으면 0을 받는다.
SELECT COUNT(*) FROM b_member WHERE mid = #{param1}
</select>
</mapper>
<mapper namespace="com.uragil.LMS.dao.IDao">
<insert id="joinDao">
INSERT INTO b_member (mid, mpw, mname, mphone)VALUES(#{param1},#{param2},#{param3},#{param4})
</insert>
<select id="checkIdDao" resultType="int">
SELECT COUNT(*) FROM b_member WHERE mid = #{param1}
</select>
</mapper>joinok.jsp
join.jsp 와 join.js를 거쳐 넘어온 id의 checkId() 값이 1인지 확인하여
있으면 사용 중이니 다른 아이디를 입력하라고 alert 시켜준다.
<%
int checkId = Integer.parseInt(request.getAttribute("checkId").toString());
if(checkId == 1) {
%>
<script type="text/javascript">
alert("입력하신 아이디는 이미 사용 중입니다!. 다른 아이디를 입력하세요.");
뒤로 가기 1 스텝
history.go(-1);
${}로 {}의 값을 바로 찍어 확인할 수 있다.
'${mname }' 님 회원가입을 축하드립니다. <br>
가입한 ID는</span> <span class="text03">'${mid}' </span>입니다.
joinok.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/resources/js/join.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/member.css?after">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/main.css?after">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/menu.css?after">
<title>Insert title here</title>
</head>
<body>
<%@ include file="include/header.jsp" %>
<center>
<table width="70%" border="0" cellspacing="0" cellpadding="20">
<tr height="500">
<td bgcolor="#cba" align="center">
<%
int checkId = Integer.parseInt(request.getAttribute("checkId").toString());
if(checkId == 1) {
%>
<script type="text/javascript">
alert("입력하신 아이디는 이미 사용중 입니다!. 다른 아이디를 입력하세요.");
history.go(-1);
reg_frm.mid.focus();
</script>
<%
}
%>
<span class="content01">
'${mname }' 님 회원가입을 축하 드립니다.<br>
가입한 ID는</span> <span class="text03">'${mid}' </span> 입니다.
<hr>
<input class="button03" type="button" value="홈으로" onclick="location.href='home'">
</td>
</tr>
</table>
</center>
<%@ include file="include/footer.jsp" %>
</body>
</html>
Controller(join/ joinok)
method= 폼에서 넘어오는 값이 post인지 get인지 적어 준다.
@RequestMapping(value ="/joinOk", method=RequestMethod.POST)
form에서 넘어오는 값들이 request에 담겨 넘어온 값을 각 변수에 저장public String joinOk(HttpServletRequest request, Model model) {
String mid = request.getParameter("mid");
String mpw = request.getParameter("mpw");
String mname = request.getParameter("mname");
String mphone = request.getParameter("mphone");
checkidDao 에서 받은 값을 저장한다.
IDao dao = sqlSession.getMapper(IDao.class);
int checkId = dao.checkIdDao(mid);
값을 비교하여 1이 아니면(회원가입하려는 아이디가 DB에 저장되어 있지 않다면)
joinDao()를 호출하여 DB에 insert 한다.
if (checkId != 1) {
dao.joinDao(mid, mpw, mname, mphone);
세션값을 만든다.
HttpSession session = request.getSession();
setAttribute 로 세션 값을 설정하고
session.setAttribute("id", mid);
session.setAttribute("name", mname);
세션값을 model.addAttribute로 보낸다.
model.addAttribute("mname", mname);
model.addAttribute("mid", mid);
}
model.addAttribute("checkId", checkId);
return "joinOk";
}
controller(join/ joinok)
@RequestMapping(value="/join")
public String join() {
return "join";
}
@RequestMapping(value ="/joinOk", method=RequestMethod.POST)
public String joinOk(HttpServletRequest request, Model model) {
String mid = request.getParameter("mid");
String mpw = request.getParameter("mpw");
String mname = request.getParameter("mname");
String mphone = request.getParameter("mphone");
IDao dao = sqlSession.getMapper(IDao.class);
int checkId = dao.checkIdDao(mid);
if (checkId != 1) {
dao.joinDao(mid, mpw, mname, mphone);
HttpSession session = request.getSession();
session.setAttribute("id", mid);
session.setAttribute("name", mname);
model.addAttribute("mname", mname);
model.addAttribute("mid", mid);
}
model.addAttribute("checkId", checkId);
return "joinOk";
}
여기까하면 회원가입 페이지는 작동 가능하다. 테스트와 앞으로 추가작업을 위해서
id : admin 으로 회원 가입시켜주고 몇개 더 추가로 가입해 두자.