반응형
웹페이지 만들기(1)의 코드에 추가한다.
menubar(메인페이지)
- Controller에 있는 .setAttribute("alertMsg", "회원가입 되었습니다! 환영해요!") 가져온 후 Object 객체인 alertMsg를 String으로 강제형변환한다.
- 상단에 작성한다.
<%String alertMsg = (String)session.getAttribute("alertMsg");%>
- 회원가입 성공 시(alertMsg가 null이 아닐 때) alert로 '회원가입에 성공했다'고 띄우기
- 이후에 해당 alert를 삭제하지 않으면 페이지가 읽힐 때마다 같은 alert가 띄워지므로 이를 .removeAttribute()로 삭제해야 한다.
- body 영역에 작성한다.
<script>
var msg = "<%=alertMsg%>";
// "null"이 아니면 alertMsg를 alert하고, "null"이면 errorMsg 출력
if(msg != "null"){
alert(msg);
// alert를 띄운 후 session에 담긴 msg를 안 지우면 해당 페이지가 읽힐 때마다 alert가 뜬다.
<%session.removeAttribute("alertMsg");%>
}
</script>
- 회원가입 버튼을 클릭했을 때
// form 태그 내 작성
<button type="button" onclick="enrollPage();">회원가입</button>
// form 태그 밖 작성
<script>
function enrollPate(){
location.href = "<%=contextPath%>/enrollForm.me";
}
</script>회원가입 같이 민감한 정보의 경우 url에 디렉토리 구조가 노출되면 안된다. 이땐 단순한 정적 페이지 이동도 servlet을 거쳐 url에 mapping값만 보이게 작업해야 한다.
MemberEnrollController
@WebServlet("/enrollForm.me")
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.getRequestDispatcher("views/member/memberEnrollForm.jsp").forward(request, response);
}
memberEnrollForm(회원가입 페이지)
- WebContent 폴더 내 views 폴더에서 member 폴더에 jsp 파일로 작성한다.(사용자에게 보여야 함)
<%@ include file="../common/menubar.jsp" %>
<!-- menubar를 include한다. -> menubar의 회원가입 버튼 클릭으로 해당 페이지 연결 -->
<div class="outer">
<h2 align="center">회원 가입</h2>
<!-- menubar를 include했기 때문에 contextPath 변수를 가져와 사용할 수 있다. -->
<form id="enroll-form" action="<%=contextPath %>/insert.me" method="post">
<table>
<tr>
<td>*아이디</td>
<td><input type="text" name="userId" maxlength="12" required></td>
<td><button type="button" onclick="">중복확인</button></td>
</tr>
<tr>
<td>*비밀번호</td>
<td><input type="password" name="userPwd" maxlength="15" required></td>
<td></td>
</tr>
<tr>
<td>*비밀번호 확인</td>
<td><input type="password" required></td>
<td></td>
</tr>
<tr>
<td>*이름</td>
<td><input type="text" name="userName" maxlength="6" required></td>
<td></td>
</tr>
<tr>
<td>전화번호</td>
<td><input type="text" name="phone" placeholder="- 포함하여 입력하세요."></td>
<td></td>
</tr>
<tr>
<td>이메일</td>
<td><input type="email" name="email"></td>
<td></td>
</tr>
<tr>
<td>주소</td>
<td><input type="text" name="address"></td>
<td></td>
</tr>
<tr>
<td>관심 분야</td>
<td>
<input type="checkbox" name="interest" id="" value="미술">
<label for="art">미술</label>
<input type="checkbox" name="interest" id="" value="운동">
<label for="sports">운동</label>
<input type="checkbox" name="interest" id="" value="영화">
<label for="movie">영화</label>
<input type="checkbox" name="interest" id="" value="음악">
<label for="music">음악</label>
<input type="checkbox" name="interest" id="" value="게임">
<label for="game">게임</label>
<input type="checkbox" name="interest" id="" value="요리">
<label for="cooking">요리</label>
</td>
<td></td>
</tr>
</table>
<div align="center">
<button type="submit">가입</button>
<button type="reset">초기화</button>
</div>
</form>
</div>
MemberInsertController
@WebServlet("/insert.me")
public class MemberInsertController extends HttpServlet {
private static final long serialVersionUID = 1L;
public MemberInsertController() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 1) UTF-8로 인코딩
request.setCharacterEncoding("UTF-8");
// 2) 요청 시 전달값을 뽑아서 변수 또는 객체에 기록하기
String userId = request.getParameter("userId");
String userPwd = request.getParameter("userPwd");
String userName = request.getParameter("userName");
String phone = request.getParameter("phone");
String email = request.getParameter("email");
String address = request.getParameter("address");
String[] interestArr = request.getParameterValues("interest");
// 관심 분야는 여러 개를 선택할 수 있으므로 배열로 담아서 요청
String interest = ""; // 변수 interest 초기화 선언
// 배열 interestArr에 값이 하나라도 있으면 구분자로 구분하여 interest에 담기
if(interestArr != null) {
interest = String.join(", ", interestArr);
}
// 3) 매개변수 생성자를 이용해서 Member 객체에 전달값 담기
Member m = new Member(userId, userPwd, userName, phone, email, address, interest);
// 4) 요청 처리(서비스)
int result = new MemberService().insertMember(m);
// 5) 결과값으로 사용자에게 응답할 뷰 선택하기
if(result > 0) {
// url 재요청 -> index.jsp
HttpSession session = request.getSession();
session.setAttribute("alertMsg", "회원가입 되었습니다! 환영해요!");
response.sendRedirect(request.getContextPath());
} else {
request.setAttribute("errorMsg", "회원가입에 실패하였습니다!");
RequestDispatcher view = request.getRequestDispatcher("views/common/errorPage.jsp");
view.forward(request, response);
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
MemberService
public int insertMember(Member m) {
Connection conn = JDBCTemplate.getConnection();
int result = new MemberDao().insertMember(conn, m);
if(result > 0) { // result에 담긴 행 개수가 0보다 많으면 commit
JDBCTemplate.commit(conn);
} else { // 그게 아니면 rollback
JDBCTemplate.rollback(conn);
}
// 다쓴 자원(conn) 반납
JDBCTemplate.close(conn);
// result를 반환
return result;
}
member-mapper.xml
<entry key="insertMember">
INSERT INTO MEMBER(USER_NO,
USER_ID,
USER_PWD,
USER_NAME,
PHONE,
EMAIL,
ADDRESS,
INTEREST)
VALUES(SEQ_UNO.NEXTVAL,
?,
?,
?,
?,
?,
?,
?)
</entry>
MemberDao
public int insertMember(Connection conn, Member m){
int result = 0;
PreparedStatement pstmt = null;
String sql = prop.getProperty("insertMember");
try {
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, m.getUserId());
pstmt.setString(2, m.getUserPwd());
pstmt.setString(3, m.getUserName());
pstmt.setString(4, m.getPhone());
pstmt.setString(5, m.getEmail());
pstmt.setString(6, m.getAddress());
pstmt.setString(7, m.getInterest());
result = pstmt.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
} finally {
JDBCTemplate.close(pstmt);
}
return result;
}
반응형