728x90
contextPath는 기본 경로인 controller의 값을 변수에 담아주는 역할을 한다. 미리 담아두고 jsp코드를 작성해보자
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if(${!empty msgType}){
$("#messageType").attr("class", "modal-content panel-warning");
$("#myMessage").modal("show");
}
});
function registerCheck(){
var memID=$("#memID").val();
$.ajax({
url : "${contextPath}/memRegisterCheck.do",
type : "get",
data : { "memID" : memID},
success : function(result){
// 중복유무 출력(result=1 : 사용할수있는 아이디, 0 : 사용할수없는 아이디)
if(result==1){
$("#checkMessage").html("사용할 수 있는 아이디입니다.");
$("#checkType").attr("class","modal-content panel-success");
}else{
$("#checkMessage").html("사용할 수 없는 아이디입니다.");
$("#checkType").attr("class","modal-content panel-warning");
}
$("#myModal").modal("show");
},
error : function(){ alert("error"); }
});
}
function passwordCheck(){
var memPassword1=$("#memPassword1").val();
var memPassword2=$("#memPassword2").val();
if(memPassword1 != memPassword2){
$("#passMessage").html("비밀번호가 서로 일치하지 않습니다.");
}else{
$("#passMessage").html("");
$("#memPassword").val(memPassword1);
}
}
function goInsert(){
var memAge=$("#memAge").val();
if(memAge==null || memAge=="" || memAge==0){
alert("나이를 입력하세요");
return false;
}
document.frm.submit(); // 전송
}
</script>
</head>
<body>
<div class="container">
<jsp:include page="../common/header.jsp"/>
<h2>Spring MVC03</h2>
<div class="panel panel-default">
<div class="panel-heading">회원가입</div>
<div class="panel-body">
<form name="frm" action="${contextPath}/memRegister.do" method="post">
<input type="hidden" id="memPassword" name="memPassword" value=""/>
<table class="table table-bordered" style="text-align: center; border: 1px solid #dddddd;">
<tr>
<td style="width: 110px; vertical-align: middle;">아이디</td>
<td><input id="memID" name="memID" class="form-control" type="text" maxlength="20" placeholder="아이디를 입력하세요."/></td>
<td style="width: 110px;"><button type="button" class="btn btn-primary btn-sm" onclick="registerCheck()">중복확인</button></td>
</tr>
<tr>
<td style="width: 110px; vertical-align: middle;">비밀번호</td>
<td colspan="2"><input id="memPassword1" name="memPassword1" onkeyup="passwordCheck()" class="form-control" type="password" maxlength="20" placeholder="비밀번호를 입력하세요."/></td>
</tr>
<tr>
<td style="width: 110px; vertical-align: middle;">비밀번호확인</td>
<td colspan="2"><input id="memPassword2" name="memPassword2" onkeyup="passwordCheck()" class="form-control" type="password" maxlength="20" placeholder="비밀번호를 확인하세요."/></td>
</tr>
<tr>
<td style="width: 110px; vertical-align: middle;">사용자 이름</td>
<td colspan="2"><input id="memName" name="memName" class="form-control" type="text" maxlength="20" placeholder="이름을 입력하세요."/></td>
</tr>
<tr>
<td style="width: 110px; vertical-align: middle;">나이</td>
<td colspan="2"><input id="memAge" name="memAge" class="form-control" type="number" maxlength="20" placeholder="나이를 입력하세요."/></td>
</tr>
<tr>
<td style="width: 110px; vertical-align: middle;">성별</td>
<td colspan="2">
<div class="form-group" style="text-align: center; margin: 0 auto;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="memGender" autocomplete="off" value="남자" checked/>남자
</label>
<label class="btn btn-primary">
<input type="radio" name="memGender" autocomplete="off" value="여자"/>여자
</label>
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 110px; vertical-align: middle;">이메일</td>
<td colspan="2"><input id="memEmail" name="memEmail" class="form-control" type="text" maxlength="20" placeholder="이메일을 입력하세요."/></td>
</tr>
<tr>
<td colspan="3" style="text-align: left;">
<span id="passMessage" style="color: red"></span><input type="button" class="btn btn-primary btn-sm pull-right" value="등록" onclick="goInsert()"/>
</td>
</tr>
</table>
</form>
</div>
<!-- 다이얼로그창(모달) -->
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog" >
<div class="modal-dialog">
<!-- Modal content-->
<div id="checkType" class="modal-content panel-info">
<div class="modal-header panel-heading">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">메세지 확인</h4>
</div>
<div class="modal-body">
<p id="checkMessage"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- 실패 메세지를 출력(modal) -->
<div id="myMessage" class="modal fade" role="dialog" >
<div class="modal-dialog">
<!-- Modal content-->
<div id="messageType" class="modal-content panel-info">
<div class="modal-header panel-heading">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">${msgType}</h4>
</div>
<div class="modal-body">
<p>${msg}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="panel-footer">스프1탄_인프런</div>
</div>
</div>
</body>
</html>
controller에서 회원가입할때 유효성 체크를 확인해보자.
// 회원가입 처리
@RequestMapping("/memRegister.do")
public String memRegister(Member m, String memPassword1, String memPassword2,
RedirectAttributes rttr, HttpSession session) {
if(m.getMemID()==null || m.getMemID().equals("") ||
memPassword1==null || memPassword1.equals("") ||
memPassword2==null || memPassword2.equals("") ||
m.getMemName()==null || m.getMemName().equals("") ||
m.getMemAge()==0 ||
m.getMemGender()==null || m.getMemGender().equals("") ||
m.getMemEmail()==null || m.getMemEmail().equals("")) {
// 누락메세지를 가지고 가기? =>객체바인딩(Model, HttpServletRequest, HttpSession)
rttr.addFlashAttribute("msgType", "실패 메세지");
rttr.addFlashAttribute("msg", "모든 내용을 입력하세요.");
return "redirect:/memJoin.do"; // ${msgType} , ${msg}
}
if(!memPassword1.equals(memPassword2)) {
rttr.addFlashAttribute("msgType", "실패 메세지");
rttr.addFlashAttribute("msg", "비밀번호가 서로 다릅니다.");
return "redirect:/memJoin.do"; // ${msgType} , ${msg}
}
m.setMemProfile(""); // 사진이미는 없다는 의미 ""
// 회원을 테이블에 저장하기
int result=memberMapper.register(m);
if(result==1) { // 회원가입 성공 메세지
rttr.addFlashAttribute("msgType", "성공 메세지");
rttr.addFlashAttribute("msg", "회원가입에 성공했습니다.");
// 회원가입이 성공하면=>로그인처리하기
session.setAttribute("mvo", m); // ${!empty mvo}
return "redirect:/";
}else {
rttr.addFlashAttribute("msgType", "실패 메세지");
rttr.addFlashAttribute("msg", "이미 존재하는 회원입니다.");
return "redirect:/memJoin.do";
}
}만약 비어있는게 있다면 다시 리다이렉트를 해서 값이 없다고 알려줘야 하는 코드이다.
그럼 값이 없다는 메세지를 어떻게 보낼까?
RedirectAttribute를 이용해서 메세지를 전송할 수 있다.
RedirectAttributes를 rttr로 선언하고 rttr.addFlashAttribute를 사용하면 메세지를 redirect와 함께 넘긴다.
* 자바스크립트
onclick : 클릭했을때
<div onclick="on1()">onclick</div>
<input id="o1">
function on1(){
var values = document.getElementById('o1').value;
document.getElementById('o1').value = (values.length < 1)?"newjeans":"";
}
onmouseover : 마우스를 올렸을 때 / onmouseout : 마우스를 밖으로 옮겼을 때
<div onmouseover="on2()" onmouseout="on3()">onmouseover/onmouseout</div>
<input id="o2">
function on2(){
document.getElementById('o2').value = "newjeans";
}
onchange : 셀렉트박스 값 선택했을때
<select id="on" onchange="on4()">
<option value="">onchange</option>
<option value="test1" >test1</option>
<option value="test2" >test2</option>
</select>
<input id="o4">
function on4(){
var values = document.getElementById('on').value;
document.getElementById('o4').value = values;
}
onkeyup : 값을 입력할때
<input id="5" onkeyup="on5()" placeholder="onkeyup">
<input id="o5">
function on5(){
var values = document.getElementById('5').value;
document.getElementById('o5').value = values;
}728x90
'👩🏫 Study > 스프링레거시 강의' 카테고리의 다른 글
| 사진업로드하기 (0) | 2023.10.20 |
|---|---|
| 스프링 로그인/로그아웃 처리하기 (0) | 2023.10.19 |
| Ajax와 jQuery를 이용한 스프링 게시판 만들기 (0) | 2023.10.19 |
| 게시판 만들기 (0) | 2023.10.18 |
| Spring MVC 기초 (0) | 2023.10.17 |
