본문 바로가기
SpringBoot

SpringBoot(6) - 계산기 예제(Version 2개), Session

traveler-Hwang 2024. 6. 27. 17:03
728x90
반응형

1) SpringBoot

   1-1) 계산기 예제(Version 2개)

   1-2) Session

 

 

 

 

 

1) SpringBoot

1-1) 계산기 예제(Version 2개)

계산기

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

package net.datasa.web2.controller;

import org.springframework.beans.factory.annotation.Autowired;
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 lombok.extern.slf4j.Slf4j;
import net.datasa.web2.domain.CalcDTO;
import net.datasa.web2.service.CalcService;


@Controller
@RequestMapping("/ex")
@Slf4j
public class ExController {
	
	// @Autowired : 데이터 타입을 보고 이 타입에 해당하는 객체(미리 정의한 클래스의 객체를 의미함)를 여기(Controller)로 불러와줌!
	@Autowired
	CalcService calcService;
	
	
	/**
 	[연습문제 1]
 	1. ex/calc1 경로로 요청
 	2. 입력 폼을 출력(입력란 2개, Select 1개, submit 버튼 1개 포함)
 	3. 숫자 2개를 입력하고 연산자를 고르고 submit 버튼 클릭
 	4. 숫자가 아닌 값을 입력하면 JavaScript로 확인하고 오류 메시지 출력
 	5. 숫자 2개를 정상적으로 입력하면 서버로 전송
 	6. Controller에서 값을 전달받아 계산
 	7. 계산한 결과를 Model에 저장하고 View로 이동
 	8. 화면에 계산한 결과 출력(새로운 Controller 정의, HTML 파일 2개 필요)
	*/
	
	/**
		계산기1 폼 화면으로 이동
	*/
	@GetMapping("calc1")
	public String calc1() {
		return "exView/calcForm1";
	}
	
	@PostMapping("calc1")
	public String calcOutput1(
			@ModelAttribute CalcDTO dto,
			// @RequestParam("num1") int n1,
			Model model
			) {
		log.debug("객체값: {}", dto);
		
		int res = 0, n1, n2;
		
		try {
			switch (dto.getOp()) {
				case "+":
					res = dto.getNum1() + dto.getNum2();
					break;
				case "-":
					res = dto.getNum1() - dto.getNum2();
					break;
				case "*":
					res = dto.getNum1() * dto.getNum2();
					break;
				case "/":
					res = dto.getNum1() / dto.getNum2();
					break;
				default:
					throw new Exception("연산자 오류");
			}
		
			model.addAttribute("calc", dto);
			model.addAttribute("res", res);
		}
		catch (Exception e) {
			// e.printStackTrace(); : "Console"에 출력 메시지를 띄어주는 역할을 함
			e.printStackTrace();
			return "/exView/calcForm1"; // 예외 발생 시 계산 form으로 다시 이동
		}
		
		return "exView/calcOutput1";
	}
	
	
	/**
	계산기2 폼 화면으로 이동
	 */
	@GetMapping("calc2")
	public String calc2() {
		return "exView/calcForm2";
	}

	@PostMapping("calc2")
	public String calcOutput2(
			@ModelAttribute CalcDTO dto,
			Model model
			) {
		
		// 서비스(Service)의 메서드 호출
		try {
			int res = calcService.calc(dto);
			model.addAttribute("calc", dto);
			model.addAttribute("res2", res);
			return "exView/calcOutput2";
		} catch (Exception e) {
			e.printStackTrace();
			return "exView/calcForm2"; // 예외 발생 시 계산폼으로 다시 이동
		}
	}
	
	
	
	/**
	// 참고용 코드
	@PostMapping("input")
	public String input(@ModelAttribute Nums n, Model m) {
		log.debug("객체값: {}", n);
		
		Double result = 0.0;
		
		switch (n.getSelect()) {
			case "+":
				result = n.getNum1() + n.getNum2();
				break;
			case "-":
				result = n.getNum1() - n.getNum2();
				break;
			case "*":
				result = n.getNum1() * n.getNum2();
				break;
			case "/":
				result = n.getNum1() / n.getNum2();
				break;
		}
		
		m.addAttribute("result", result);
		
		return "ex/output";
	}
	*/
}

 

 

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>calcForm1.html</title>
<script>
	function check() {
		let num1 = document.getElementById("num1");
		let num2 = document.getElementById("num2");
		
		if (num1.value == "" || isNaN(num1.value)) {
			alert("정수를 입력하세요.");
			// 커서를 옮겨줌
			num1.focus();
			// 해당 내용을 선택하게 해 줌
			num1.select();
			return false;
		}
		if (num2.value == "" || isNaN(num2.value)) {
			alert("정수를 입력하세요.");
			num2.focus();
			num2.select();
			return false;
		}
		
		return true;
	}
</script>
</head>
<body>
	<div id="calcForm">
		<h2>계산하기</h2>
		<form action="calc1" method="post" onsubmit="return check()">
			<input type="text" name="num1" id="num1">
			<select name="op" id="op">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input type="text" name="num2" id="num2">
			<input type="submit" value="계산">
		</form>
	</div>
</body>
</html>

 

 

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

package net.datasa.web2.domain;

import lombok.Data;

@Data
public class CalcDTO {
	int num1;
	String op;
	int num2;
}

 

 

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Output Form</title>
</head>
<body>
	<h2>계산결과</h2>
	<p>[[${res}]]</p>
</body>
</html>

 

 

(5) 결과 화면

 

 

 

 

 

계산기2

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>calcForm2.html</title>
<style>
	input[type="submit"] {
		width: 100px;
		font-size: 25px;
		margin: 10px
	}
</style>
<script src="/js/jquery-3.7.1.min.js"></script>
<script>
	$(document).ready(function() {
		// id가 "formButton"인 객체를 클릭하면 check 함수 실행
		$("#formButton").on("click", check);
	});
	
	function check() {
		// $("#num1").val() : "#num1" element(요소)의 값(value)을 읽어옴
		// $("#num1").val("aaa") : "#num1" element(요소)의 값(value)을 "aaa"으로 수정함
		if ($("#num1").val() == "" || isNaN($("#num1").val())) {
			alert("정수를 입력하세요.");
			$("#num1").focus();
			$("#num1").select();
			return;
		}
		if ($("#num2").val() == "" || isNaN($("#num2").val())) {
			alert("정수를 입력하세요.");
			$("#num2").focus();
			$("#num2").select();
			return;
		}
		
		$("#form").submit();
	}
</script>
</head>
<body>
	<div id="calcForm">
		<h2>계산하기2</h2>
		<form id="form" action="calc2" method="post">
			<input type="text" name="num1" id="num1">
			<select name="op" id="op">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input type="text" name="num2" id="num2">
			<input type="button" id="formButton" value="계산">
		</form>
	</div>
</body>
</html>

 

 

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

package net.datasa.web2.service;

import org.springframework.stereotype.Service;

import net.datasa.web2.domain.CalcDTO;

// @Service : 해당 클래스의 객체를 자동으로 생성해주는 역할을 함!
@Service
public class CalcService {
	public int calc(CalcDTO dto) throws Exception {
		int res2 = 0;
		switch (dto.getOp()) {
			case "+":
				res2 = dto.getNum1() + dto.getNum2();
				break;
			case "-":
				res2 = dto.getNum1() - dto.getNum2();
				break;
			case "*":
				res2 = dto.getNum1() * dto.getNum2();
				break;
			case "/":
				res2 = dto.getNum1() / dto.getNum2();
				break;
			default:
				throw new Exception("연산자 오류");
		}
			
		return res2;
	}
}

 

 

(3) 결과 화면

 

 

 

 

 

 

1-2) Session

서버 측 메모리에 사용자마다 데이터를 저장하는 것을 “Session(세션)”이라 한다!

application.properties

 

 

(1) [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>
			</ul>
		</li>
		<li> 예제
			<ul>
				<li>
					<a href="ex/calc1">계산기</a>
				</li>
				<li>
					<a href="ex/calc2">계산기2</a>
				</li>
			</ul>
		</li>
		<li> 세션 사용
			<ul>
				<li>
					<a href="ss/session1">세션에 값 저장</a>
				</li>
				<li>
					<a href="ss/session2">세션에서 값 읽기</a>
				</li>
				<li>
					<a href="ss/session3">세션의 값 삭제</a>
				</li>
			</ul>
		</li>
	</ol>
</body>
</html>

 

 

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

package net.datasa.web2.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import jakarta.servlet.http.HttpSession;
import lombok.extern.slf4j.Slf4j;

@Controller
@RequestMapping("ss")
@Slf4j
public class SessionController {
	// 세션에 값 저장
	@GetMapping("session1")
	public String session1(HttpSession session) {
		session.setAttribute("name", "홍길동");
		return "redirect:/";
	}
	
	// 세션에서 값 읽기
	@GetMapping("session2")
	public String session2(HttpSession session) {
		String name = (String) session.getAttribute("name");
		log.debug("세션의 값 : {}", name);
		return "ssView/session2";
	}
	
	// 세션의 값 삭제
	@GetMapping("session3")
	public String session3(HttpSession session) {
		session.removeAttribute("name");
		return "redirect:/";
	}
}

 

 

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p>[[${session.name}]]님 안녕하세요</p>
</body>
</html>

 

 

(4)결과 화면

 

"세션에 값 저장"을 누른 후 "세션에서 값 읽기"를 클릭한 화면

 

"세션의 값 삭제"를 누른 후 "세션에서 값 읽기"를 클릭한 화면

 

 

 

 

 

 

 

저작자표시

'SpringBoot' 카테고리의 다른 글

SpringBoot(8) - Cookie 예제(쿠키 저장/읽기/삭제, 방문 횟수 카운트), 추가 정리 사항  (0) 2024.07.01
SpringBoot(7) - Session 예제(login, logout, login 시 메뉴)  (0) 2024.06.28
SpringBoot(5) - Web Page 예제2 추가 수정, 추가 정리 사항  (0) 2024.06.26
SpringBoot(4) - Web Page 예제2, 추가 정리 사항  (0) 2024.06.26
SpringBoot(3) - 간단한 Web Page 예제, 추가 정리 사항  (0) 2024.06.24

'SpringBoot' Related Articles

티스토리툴바