1. 회원가입 입력양식인 member_register_form.jsp 생성
• 위치 : ‘/webapp/WEB-INF/view’ 폴더 내 위치
• 외부에서 접근 불가 → Controller에 의해 접근하기 : ❷방식으로 접근
➊ 서블릿을 통해 JSP 파일 접근
클래스 단위로 매핑
‘@WebServlet’ 죽석 추가 → name 및 urlPatterns 속성 이용
서블릿을 작동시키기 위해서 ‘프로젝트명Application’에 ‘@ServletComponentScan’ 주석 추가
❷ Controller 클래스를 통해 JSP 파일 접근 - 스프링 부트 방식
메서드 단위로 매핑 → Controller 하나당 여러 개의 메서드 이용해 매핑 가능
다만, 웹 앱 단위로 컨트롤러 구분하는 것 권장
‘@Controller’ 주석 추가 → 라우터 역할
• 내용
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 양식</title>
<script type="text/javascript">
// HTML5 : default값이 "text/javascript"으로 지정
// → 안 적어도 되지만 하위 호환성을 위해서 적는 것을 권장
// 양식입력값 확인
// 확인 통과하면, 서버로 전송
function submitPage() {
// DOM 모델을 이용해서 현재 페이지의 HTML구조 도큐멘트를 얻은 후,
// HTML구조 요소 중에 FORM 태그를 얻음
let frm = document.registerForm;
// id값(id="registerForm") 이용 → frm은 form태그를 의미함
// 양식 입력값을 확인하는 자바스크립트 코드가 위치함
// form태그의 양식 요소 체크가 끝나서 모두 true일 경우, 서버로 전송
frm.submit();
// 지정한 전송 프로토콜 메서드를 이용해
// 지정한 action 주소로 폼의 내용을 전송함
}
</script>
</head>
<body>
<form action="/memberRegister" method="post" id="registerForm" name="registerForm">
이름 : <br />
아이디 : <br />
패스워드 : <br />
성별 : <br />
전화 : <br />
전공 : <br />
동의하십니까? <br />
메모 : <br />
<input type="button" value="회원가입" onclick="submitPage()" />
<input type="reset" value="새로작성" />
</form>
</body>
</html>
① <body> 태그 안에 <form> 태그를 이용해 아래와 같은 양식 틀 생성
② <input> 태그
<input type="button" value="회원가입" onclick="submitPage()" />
- type="button" : 폼의 내용을 서버로 전송 시, 자바스트립트로 확인 후 서버로 전송할때 사용 권장
- onclick 이벤트
• 클릭 시 발생하는 이벤트로, 자바스크립트 수행됨
③ 자바스크립스 이용
➊ Javascript를 HTML 문서에 삽입하는 방법 : <title> 태그 아래에 작성
<script type="text/javascript">
- HTML5 : default값이 "text/javascript"으로 지정
→ 안 적어도 되지만 하위 호환성을 위해서 적는 것을 권장
❷ Javascript로 form 태그의 input 검증 후에 수동으로 submit 처리하기
- 기본적으로 <form> 태그 사용해 입력한 데이터를 웹 서버로 전송 시,
<input> 태그의 type="submit"을 통해 전송버튼을 만들서 사용함
- 태그의 type="submit"의 경우, form 태그 안에 있는 모든 input의 value를 전송하게 됨
→ 이와 같은 경우, input의 value에 값이 입력되었는지 등의 여부 검증 불가
∴ 이 경우, <input type="button">으로 버튼을 하나 생성한 후,
onClick 이벤트를 직접 핸들링하여 버튼 클릭 시 각 입력값을 검증한 후 수동으로 submit 처리해주어야 함
- 현재 form 태그의 '회원가입' button에 onClick 이벤트의 핸들러로 'submitPage( )' 함수를 연결함
→ '회원가입' 버튼 클릭 시, <script>태그에 선언되어있는 'submitPage( )' 함수가 핸들러로 호출됨
<input type="button" value="회원가입" onclick="submitPage()" />
- 핸들러로 사용한 submitPage( ) 함수 : 아직 틀만 잡아놓은 상태
function submitPage() {
let frm = document.registerForm;
// 양식 입력값을 확인하는 자바스크립트 코드가 위치함
// form태그의 양식 요소 체크가 끝나서 모두 true일 경우, 서버로 전송
frm.submit();
}➊ document객체를 이용해 registerForm을 조작함
• DOM 모델을 이용하여 현재 페이지의 HTML 구조 document 객체를 얻은 후, id값을 이용해 form태그에 접근
→ input 태그의 id값(id="registerForm") 이용하여 접근 ⇒ frm은 form 태그를 의미함
❷ 값이 하나라도 입력되지 않은 경우, alert( )를 이용해 경고를 띄우고, 모두 입력된 경우 form 객체의 submit( ) 메서드를 실행함
→ submit( ) 메서드 : 이미 브라우저에 정의되어 있는 메서드로, 실제 input 태그의 type="submit"이 클릭되었을 뗴 실행되는 메서드
[참고 자료]
https://dololak.tistory.com/728
2. 스프링 부트 방식으로 MemberController 생성
- 서비스 : 비즈니스 로직 처리 → 업무 규칙 또는 정제되지 않은 데이터 처리하는 역할
- 모델 = repository = Mapper = domain : 모두 유사한 기능을 수행함
• Repository : JPA, jdbcTemplate기술에서 사용하는 용어
• Mapper : Mybatis 기술에서 사용하는 용어
• 모델 : 통칭
• domain : 모델을 의미
• DAO : jdbc 등에서 데이터베이스와 상호처리하는 객체를 의미
- Controller 내에서 정의되는 메서드 → 반환값에 따라 2종류로 구분됨
➊ void 타입
: 요청uri명 = JSP 파일명
❷ String 타입
: 반환값 문자열 = JSP 파일명
⇒ 앞으로 기본형 즉, String 타입의 메서드 이용하기
※ 'src/main/resources' 폴더 내 application.properties 파일에서 view 파일의 확장자를 '.jsp'로 설정했으므로 생략 가능
1) GET 방식으로 등록 폼 요청
package org.choongang.cook.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
// @Controller
// 1. 요청이 들어오면 처리해주는 역할
// 2. 들어온 요청을 해당하는 서비스로 연결해주는 역할
@Controller
public class MemberController {
@GetMapping("/memberRegister")
// 서버에 'localhost/memberRegister'요청 시,
// GET방식을 이용해 회원가입 양식 폼(member_register_form.jsp)을 전달함
public String requestMemberForm() {
return "member_register_form";
}
- 서버 주소창에서 'localhost/memberRegister' 호출 시 입력 양식이 출력됨
2) POST 방식으로 등록 폼에 작성한 데이터 전송
- PRG 패턴 이용 → GET 방식과 POST 방식의 uri 주소 동일
// 양식에서 양식 데이터를 보낼 때는 POST 메서드 요청으로 보냄
// 컨트롤러에서 처리하려면 POST 요청을 인식해야 함 → @PostMapping
@PostMapping("/memberRegister")
public String registerMember() {
// /webapp/WEB-INF/view/member_register.jsp 호출
return "member_register";
}
3. 양식의 입력된 데이터를 처리할 JSP 파일인 member_register.jsp 생성
- 클라이언트의 POST 요청 양식 처리
• request.getParameter( ) 메서드를 이용해 입력 데이터를 가져옴
• session 범위의 객체에 요청객체로부터 가져온 데이터를 저장
• response.sendRedirect( ) 메서드를 이용해 '/memberRegisterResult'으로 이동시킴
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- 컨트롤러!!!!!!!!
실질적으로 아래의 코드 HTML은 있으면 안됨
이 JSP는 서비스의 역할이므로 비즈니스 로직의 데이터 정제만 가능
view 로직은 view와 컨트롤러의 조합 권한
여기서는 view를 보여달라고 컨트롤러에게 요청하여야 한다.
요청할 때 데이터를 넘겨주어야 함
여기는 서비스이므로 모델 데이터가 있을 것 -> 따라서 응답할때 모델을 넘겨주어야 함
--%>
<%--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function goUrl(){
// 페이지를 강제로 이동시키려는 메서드 : 클라이언트쪽 코드 / sendRedirect메서드와 유사한 역할
alert("기다려주세요"); // 모달?
//location.href = "/member_register_result.jsp";
}
window.onload = function(){
setTimeout(goUrl, 5000)=> 호출하지 않으면 동작하지 않음
// 밀리초단위 -> 10초로 설정
}
</script>
</head>
<body>
<h1>처리 중입니다.</h1>
</body>
</html>
--%>
<%
// 페이지 이동을 잠시동안 멈추기 위해
// 쓰레드의 sleep() 메서드 사용
// * sleep() 메서드 : 프로그램의 실행을 지정한 시간만큼 멈추게 함
// (정확하게는 현재 실행중인 메서드의 현재실행권한을 반납 그리고 지정한 시간이 지나면 다시 실행복귀 )
/* try{
Thread.sleep(1000 * 3); // 3초간 실행 잠시 멈춤
} catch (Exception e){
} */
// 클라이언트의 POST 요청 양식 처리
// 변수 선언
String name = request.getParameter("name");
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
String gender = request.getParameter("gender");
String tel1 = request.getParameter("tel1");
String tel2 = request.getParameter("tel2");
String tel3 = request.getParameter("tel3");
// 여러 개의 값을 전달받을 때
String[] major = request.getParameterValues("major");
// 체크박스여도 변수값이 하나면 일반 변수로 처리
String agree = request.getParameter("agree");
// textarea태그 : 내부에 엔터키로 다음 줄로 넘어가면, "\n"문자가 추가됨
// 따라서, HTML에서는 "\n"문자를 인식할 수 없으므로 <br />태그로 변환해야함
// 반대로 HTML로 입력된 여러 줄 문자열의 경우, <br />태그를 "\n"로 변환하여
// textarea 태그에 대입해주어야 함
String memo = request.getParameter("memo");
// textarea값을 HTML로 변환
memo = memo.replaceAll("\n", "<br />");
// select태그가 multiple 속성으로 값이 넘어오면, 배열이 생기므로
// 이 값을 화면에 출력하기 위한 문자열을 생성해야 함
String str = "";
// 조건문을 이용해 select태그를 한 개 이상 선택했는지 확인하는 절차
// : 배열의 값이 null이라면 하나도 선택하지 않은 것
if(major != null){
// 향상된 for ~ each를 사용하여 major 배열의 문자열 생성하기
for(String Temp : major){
str = str + Temp + " ";
}
}
// 이 데이터를 전달할 jsp 페이지에서 계속 사용하려면,
// session 범위의 객체 필요 - connection이 끝나더라도 정보 유지할 수 있도록.. 이게 세션트랙킹이라고????
// 세션 객체에 방금 요청정보변수 값들 등록
session.setAttribute("name", name);
session.setAttribute("id", id);
session.setAttribute("pwd", pwd);
session.setAttribute("gender", gender);
session.setAttribute("tel1", tel1);
session.setAttribute("tel2", tel2);
session.setAttribute("tel3", tel3);
session.setAttribute("major", major);
session.setAttribute("agree", agree);
session.setAttribute("memo", memo);
response.sendRedirect("/memberRegisterResult");
%>- <body> 태그 안에 우선 '처리 중'이라는 문자열 출력하게 작성
- <script> 태그 내 goUrl( ) 함수를 이용해 페이지를 강제로 이동시킴
( → HttpServletResponse 객체의 sendRedirect( ) 메서드와 유사한 역할 )
- location : URL 정보를 가져오는 객체
→ location 객체의 href 속성 이용
• 현재 접속 중인 페이지의 정보 갖고 있음
location.href; // 현재 페이지 확인 방법
• 값을 변경할 수 있는 속성이므로, 다른 페이지로 이동하는데 사용함
location.href="이동할 페이지 주소"; // 페이지 이동 방법
- alert( "메시지 문자열" ) : 사용자로부터 입력을 받을 필요 없고, 단순히 메시지를 나타내고자 할 때 사용
4. 회원 가입 결과를 출력할 member_register_result.jsp 생성
- session 객체에 저장된 데이터 값을 가져와 출력함
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 결과</title>
</head>
<body>
<h1> 회원 가입 결과 출력 </h1>
이름 : <%= session.getAttribute("name") %><br />
아이디 : <%= session.getAttribute("id") %><br />
비밀번호 : <%= session.getAttribute("pwd") %><br />
성별 : <%= session.getAttribute("gender") %><br />
전화번호 : <%= session.getAttribute("tel1") %>-
<%= session.getAttribute("tel2") %>-
<%= session.getAttribute("tel3") %><br />
전공 : <%= session.getAttribute("major") %><br />
동의여부 : <%= session.getAttribute("agree") %><br />
메모 : <%= session.getAttribute("memo") %><br />
</body>
</html>
- 화면에 출력된 양식에 데이터를 입력한 후, 회원가입 버튼을 누르면 'localhost/memberRegisterResult'로 이동되면서 결과출력됨
'백엔드 > Spring Boot' 카테고리의 다른 글
| 2. 스프링 부트 시작하기 (2) - 스프링 부트 둘러보고 코드 이해하기 (0) | 2023.07.11 |
|---|---|
| 2. 스프링 부트 시작하기 (1) - 스프링 콘셉트 공부 (0) | 2023.07.10 |
| 47 - Spring Boot : JSPCookBook 프로젝트 생성 (0) | 2023.07.05 |
| 46 - Spring : 의존성 주입 (0) | 2023.07.04 |
| 46 - Spring Boot (0) | 2023.07.04 |