servlet-context.xml : web관련 설정파일
root-context.xml : non-web관련 설정파일
servlet-context.xml
HTML URL에서 resources를 빼려면 아래처럼 mapping을 수정.
<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
<resources mapping="/**" location="/resources/" /><form>
//아이디 : type=text
//비밀번호 : type=pwd
//체크박스 : type=checkbox
//전송버튼 : type=submit
//자기자신의URL이 action디폴트, GET이 method디폴트
<form action="전송할 URL" method="GET">
<form action="전송할 URL" method="POST">
//input의 name에 따라서 name이 결정되고, 입력한 값이 value가 됨.
<input type="text" name="id">
<input type="pwd" name="pwd">
//onsubmit은 이벤트 등록, formCheck는 함수, this는 form태그 자기 자신.
//formCheck(this)가 true를 반환하면 폼전송O, faluse는 폼전송X
<form action="전송할 URL" method="POST" onsubmit="return formCheck(this)">URL에 한글이 있을 때 복사 하고 싶다면 앞에 한글자 빼고 복사하면 된다.
이클립스 preference의 HTML, JSP 인코딩을 UTF-8로 변경해야 작성 할 때 한글이 깨지지 않는다.
registerForm.jsp
회원가입 화면
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<style>
* { box-sizing:border-box; }
form {
width:400px;
height:600px;
display : flex;
flex-direction: column;
align-items:center;
position : absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%) ;
border: 1px solid rgb(89,117,196);
border-radius: 10px;
}
.input-field {
width: 300px;
height: 40px;
border : 1px solid rgb(89,117,196);
border-radius:5px;
padding: 0 10px;
margin-bottom: 10px;
}
label {
width:300px;
height:30px;
margin-top :4px;
}
button {
background-color: rgb(89,117,196);
color : white;
width:300px;
height:50px;
font-size: 17px;
border : none;
border-radius: 5px;
margin : 20px 0 30px 0;
}
.title {
font-size : 50px;
margin: 40px 0 30px 0;
}
.msg {
height: 30px;
text-align:center;
font-size:16px;
color:red;
margin-bottom: 20px;
}
.sns-chk {
margin-top : 5px;
}
</style>
<title>Register</title>
</head>
<body>
<!-- c:url은 1. Context root 자동 추가, 2. Session id 자동 추가 -->
<!-- 여기선 1번. /ch2를 자동으로 넣어 줌. -->
<!-- onsubmit은 이벤트 등록, formCheck는 함수, this는 form태그 자기 자신 -->
<form action="<c:url value="/register/save"/>" method="POST">
<div class="title">Register</div>
<div id="msg" class="msg"> </div>
<label for="">아이디</label>
<!-- placeholder는 입력하기 전에 보여주는 메세지, autofocus는 커서가 깜빡이게 함. -->
<input class="input-field" type="text" name="id" placeholder="8~12자리의 영대소문자와 숫자 조합" autofocus>
<label for="">비밀번호</label>
<input class="input-field" type="text" name="pwd" placeholder="8~12자리의 영대소문자와 숫자 조합">
<label for="">이름</label>
<input class="input-field" type="text" name="name" placeholder="홍길동">
<label for="">이메일</label>
<input class="input-field" type="text" name="email" placeholder="example@fastcampus.co.kr">
<label for="">생일</label>
<input class="input-field" type="text" name="birth" placeholder="2020/12/31">
<div class="sns-chk">
<label><input type="checkbox" name="sns" value="facebook"/>페이스북</label>
<label><input type="checkbox" name="sns" value="kakaotalk"/>카카오톡</label>
<label><input type="checkbox" name="sns" value="instagram"/>인스타그램</label>
</div>
<button>회원 가입</button>
</form>
<script>
function formCheck(frm) {
var msg ='';
if(frm.id.value.length<3) {
setMessage('id의 길이는 3이상이어야 합니다.', frm.id);
return false;
}
if(frm.pwd.value.length<3) {
setMessage('pwd의 길이는 3이상이어야 합니다.', frm.pwd);
return false;
}
return true;
}
function setMessage(msg, element){
//${msg}는 템플릿 리터럴(JS이므로 브라우저에서 돌아감(EL은 서버에서 돌아감))
//${'${msg}'}로 변경 해야 함.
document.getElementById("msg").innerHTML = `<i class="fa fa-exclamation-circle"> ${'${msg}'}</i>`;
if(element) {
//select는 값이 틀리면 그 값에 커서가 오도록 함.
element.select();
}
}
</script>
</body>
</html>registerInfo.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>
</head>
<body>
<h1>id=${param.id}</h1>
<h1>pwd=${param.pwd}</h1>
<h1>name=${param.name}</h1>
<h1>email=${param.email}</h1>
<h1>birth=${param.birth}</h1>
<!-- 배열로 값을 받음 -->
<h1>sns=${paramValues.sns}</h1>
<h1>sns=${paramValues.sns[0]}</h1>
<h1>sns=${paramValues.sns[1]}</h1>
<h1>sns=${paramValues.sns[2]}</h1>
</body>
</html>RegisterController.java
컨트롤러. registerForm.jsp, registerInfo.jsp를 맵핑.
package com.fastcampus.ch2;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class RegisterController {
@RequestMapping("/register/add")
public String register() {
return "registerForm"; // WEB-INF/views/registerForm.jsp
}
@RequestMapping("/register/save")
public String save() {
return "registerInfo";
}
}
안녕하세요!!