SpringBoot(5) - Web Page 예제2 추가 수정, 추가 정리 사항

728x90

1) SpringBoot

1-1) Web Page 예제2 추가 수정

1-2) 추가 정리 사항

1) SpringBoot

1-1) Web Page 예제2 추가 수정

(1) [src/main/resources] 안에 application.properties 파일 생성 후 아래와 같이 작성

(2) [src/main/java] - [net.datasa.web2] 안에 HomeController.java 파일 생성 후 아래와 같이 작성

package net.datasa.web2.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import lombok.extern.slf4j.Slf4j;
import net.datasa.web2.domain.Member;
import net.datasa.web2.domain.Person;

@Controller
@RequestMapping("param")
@Slf4j
public class ParamController {
	// http://localhost:8888/param/view1 경로의 요청 처리
	@GetMapping("view1")
	public String view1() {
		// templates/paramView/view1.html 파일로 포워딩
		return "paramView/view1";
	}
	
	@GetMapping("input1")
	public String input1(
			@RequestParam(name="id", defaultValue="") String id,
			@RequestParam("pw") String pw,
			@RequestParam("name") String name,
			@RequestParam("phone") String phone,
			@RequestParam("com") String com
			) {
		log.debug("id: {}, pw: {}, name: {}", id, pw, name);
		
		return "redirect:/";
	}
	
	@GetMapping("view2")
	public String view2() {
		// templates/paramView/view2.html 파일로 포워딩
		return "paramView/view2";
	}
	
	@PostMapping("input2")
	public String input2(@ModelAttribute Member m) {
		/*
			Member m = new Member();
			m.setId(request.getParameter("id"));
		*/
		
		log.debug("객체값: {}", m);
		
		return "redirect:/";
	}
	
	@GetMapping("model")
	public String model(Model model) {
		String str = "서버의 문자열";
		int num = 100;
		Person p = new Person("김", 22, "010-1111-1111");
		
		model.addAttribute("str", str);
		model.addAttribute("n", num);
		model.addAttribute("person", p);
		
		return "paramView/model";
	}
}

(3) [src/main/resources] - [templates] 안에 home.html 파일 생성 후 아래와 같이 작성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>web2</title>
</head>
<body>
	<h1>[ web2 ]</h1>
	<ol>
		<li>Lombok & Logger 사용
			<ul>
				<li>
					<a href="lom/lombok">Lombok 사용하기</a>
				</li>
				<li>
					<a href="lom/logger">Logger 사용하기</a>
				</li>
				<!--
				여기는 메인화면입니다. 위의 l은 소문자 L입니다.
				글꼴 때문에 꼬부라져 보이는 것입니다.
				-->
			</ul>
		</li>
		<li>서버로 데이터 보내기/받기
			<ul>
				<li>
					<a href="param/view1">GET 방식으로 보내기</a>
				</li>
				<li>
					<a href="param/view2">POST 방식으로 보내기</a>
				</li>
				<li>
					<a href="param/model">Model 객체 이용하기</a>
				</li>
				<li>
					<a href="ex/calc1">입력 폼 계산 및 결과 출력하기</a>
				</li>
			</ul>
		</li>
	</ol>
</body>
</html>

(4) [src/main/resources] - [templates.paramView] 안에 view1.html 파일 생성 후 아래와 같이 작성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>view1.html</title>
<script>
	function check() {
		let id = document.getElementById("id");
		let pw = document.getElementById("pw");
		let name = document.getElementById("name");
		
		if (id.value.trim().length == 0) {
			alert("ID를 입력하세요.");
			id.focus();
			id.select();
			return false;
		} else if (id.value.trim().length < 8) {
			alert("ID를 8자 이상 입력하세요.");
			id.focus();
			id.select();
			return false;
		}
		if (pw.value.trim().length == 0) {
			alert("비밀번호를 입력하세요.");
			pw.focus();
			pw.select();
			return false;
		} else if (pw.value.trim().length < 9) {
			alert("비밀번호를 9자 이상 입력하세요.");
			pw.focus();
			pw.select();
			return false;
		}
		if (name.value.trim().length == 0) {
			alert("Name을 입력하세요.");
			name.focus();
			name.select();
			return false;
		}
		
		return true;
	}
</script>
</head>
<body>
	<h1>[ GET method로 데이터 전송하기 ]</h1>
	<!-- http://localhost:8888/param/input1로 전송 -->
	<form action="input1" method="get" onsubmit="return check()">
		ID <input type="text" name="id" id="id"><br>
		PW <input type="password" name="pw" id="pw"><br>
		이름 <input type="text" name="name" id="name"><br>
		전화 <input type="text" name="phone" id="phone"><br>
			<input type="radio" name="com" value="kt" checked>KT
			<input type="radio" name="com" value="sk">SK
			<input type="radio" name="com" value="lg">LGT
		<input type="submit" value="전송"><br>
	</form>
</body>
</html>

(5) [src/main/resources] - [templates.paramView] 안에 view2.html 파일 생성 후 아래와 같이 작성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>view2.html</title>
<script>
	function check() {
		let id = document.getElementById("id");
		let pw = document.getElementById("pw");
		let name = document.getElementById("name");
		
		if (id.value.trim().length == 0) {
			alert("ID를 입력하세요.");
			id.focus();
			id.select();
			return false;
		} else if (id.value.trim().length < 8) {
			alert("ID를 8자 이상 입력하세요.");
			id.focus();
			id.select();
			return false;
		}
		if (pw.value.trim().length == 0) {
			alert("비밀번호를 입력하세요.");
			pw.focus();
			pw.select();
			return false;
		} else if (pw.value.trim().length < 9) {
			alert("비밀번호를 9자 이상 입력하세요.");
			pw.focus();
			pw.select();
			return false;
		}
		if (name.value.trim().length == 0) {
			alert("Name을 입력하세요.");
			name.focus();
			name.select();
			return false;
		}
		
		return true;
	}
</script>
</head>
<body>
	<h1>[ POST method로 데이터 전송하기 ]</h1>
	<!-- http://localhost:8888/param/input1로 전송 -->
	<form action="input2" method="post" onsubmit="return check()">
		ID <input type="text" name="id" id="id"><br>
		PW <input type="password" name="pw" id="pw"><br>
		이름 <input type="text" name="name" id="name"><br>
		전화 <input type="text" name="phone" id="phone"><br>
			<input type="radio" name="com" value="kt" checked>KT
			<input type="radio" name="com" value="sk">SK
			<input type="radio" name="com" value="lg">LGT
		<input type="submit" value="전송"><br>
	</form>
</body>
</html>

(6) [src/main/resources] - [templates.paramView] 안에 model.html 파일 생성 후 아래와 같이 작성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>model.html</title>
</head>
<body>
	<!-- HTML 주석 -->
	<!--/* 타임리프 주석 */-->
	<p>HTML에 고정된 내용</p>
	<p>[[${str}]]</p>
	<p>[[${s}]]</p>
	<!--/* <p>[[${s.length()}]]</p> */-->
	<p>[[${n}]]</p>
	<p>[[${person}]]</p>
	<p>[[${person.name}]]</p>
</body>
</html>

(7) 결과 페이지 화면

1-2) 추가 정리 사항

“Controller”는 필요한 값을 “Service”한테 구해오라고 요청을 한다!

>> 타임리프 주석 : Java 프로그램에서 Compile하는 과정에서

주석 처리된 내용(ex. //abc)을 자동으로 먼저 지워주고

코드를 실행하는데 타임리프 주석 역시 Java 프로그램의 Compile 과정에서

자동으로 지워주고 해당 코드들을 실행해주기에

타임리프 주석 내용들은 “페이지 소스 코드”에 남지 않는다고 보면 된다!

“[[${str}]]”는 태그 내용으로 “[[]]” 안에 해당 내용(“str”)을 넣어준다는 뜻으로

사용하는 코드이다!

저작자표시

'SpringBoot' 카테고리의 다른 글

SpringBoot(7) - Session 예제(login, logout, login 시 메뉴) (0)	2024.06.28
SpringBoot(6) - 계산기 예제(Version 2개), Session (0)	2024.06.27
SpringBoot(4) - Web Page 예제2, 추가 정리 사항 (0)	2024.06.26
SpringBoot(3) - 간단한 Web Page 예제, 추가 정리 사항 (0)	2024.06.24
SpringBoot(2) - 새 프로젝트 생성(복습), 실습, 추가 정리 (0)	2024.06.21

CodeTraveler

SpringBoot(5) - Web Page 예제2 추가 수정, 추가 정리 사항

'SpringBoot' 카테고리의 다른 글

티스토리툴바

SpringBoot(5) - Web Page 예제2 추가 수정, 추가 정리 사항

'SpringBoot' 카테고리의 다른 글

'SpringBoot' Related Articles

티스토리툴바