[Java+SpringBoot+JPA] Controller 이용한 사칙연산(계산) / 라디오 Radio 단추

Java/Practice

[Java+SpringBoot+JPA] Controller 이용한 사칙연산(계산) / 라디오 Radio 단추

달해해 2024. 1. 7. 13:16

🟣 카테고리 생성

fragments > header.html

<li class="nav-item">
 <a class="nav-link" href="/calculatorin">Calculator</a>
</li>

🟣 layout 생성

game> calculatorin.html

▪️ Modal 활용 : data-bs-toggle="modal" data-bs-target="#myModal"

📌 Radio 단추 활용 : name은 동일하게, value값 다르게 해서 구분

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layouts/layout}">

<body>
<!-- content영역 시작-->
<div layout:fragment="content">
  <div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-6">

      <div class="container mt-3">
        <h3>사칙연산</h3>
        <p>덧셈(+), 뺄셈(-), 곱셈(×), 나눗셈(÷)을 이용하여 숫자를 계산해보세요.</p>

        <button type="button" class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#myModal">
          계산하기
        </button>
      </div>

      <!-- The Modal -->
      <form th:action="@{/calculatorout}" method="post">
      <div class="modal" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
              <h4 class="modal-title">계산</h4>
              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                <div class="mb-3 mt-3">
                  <label for="num1" class="form-label">숫자1:</label>
                  <input type="number" class="form-control" id="num1" name="num1">
                </div>

              <div class="mb-3 mt-3">
                <label for="num2" class="form-label">숫자2:</label>
                <input type="number" class="form-control" id="num2" name="num2">
              </div>

              <div class="form-check">
                <input type="radio" class="form-check-input" id="radio1" name="operator" value="add" checked>더하기 (+)
                <label class="form-check-label" for="radio1"></label>
              </div>

              <div class="form-check">
                <input type="radio" class="form-check-input" id="radio2" name="operator" value="minus">빼기 (-)
                <label class="form-check-label" for="radio2"></label>
              </div>

              <div class="form-check">
                <input type="radio" class="form-check-input" id="radio3" name="operator" value="multiply">곱하기 (*)
                <label class="form-check-label" for="radio3"></label>
              </div>

              <div class="form-check">
                <input type="radio" class="form-check-input" id="radio4" name="operator" value="divide">나누기 (/)
                <label class="form-check-label" for="radio4"></label>
              </div>

            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
              <button type="submit" class="btn btn-danger" data-bs-dismiss="modal">계산하기</button>
            </div>

          </div>
        </div>
      </div>
      </form>

    </div>
    <div class="col-sm-3"></div>
  </div>
</div>
<!-- content영역 끝-->
</body>

</html>

game> calculatorout.html

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layouts/layout}">

<body>
<!-- content영역 시작-->
<div layout:fragment="content">
  <div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-6">

      <p class="mt-5"> [[${num1}]] [[${operator}]] [[${num2}]] = [[${result}]] </p> <br>

      <button type="button" class="btn btn-primary mt-3 mb-5" th:onclick="|location.href='@{/calculatorin}'|">다시 계산</button>

    </div>
    <div class="col-sm-3"></div>
  </div>
</div>
<!-- content영역 끝-->
</body>

</html>

🟣 Controller 생성

▪️ 처리 버튼 : 받은 작업 ---> 처리 ---> 결과

▪️ 값을 받아서 처리 후, 페이지로 이동 : PostMapping, PutMapping, DeleteMapping

▪️ 매개변수 : Integer num1, Integer num2, String operator

▪️ 값 전달 : Model model

▪️ if문을 활용항 사칙연산

▪️ 숫자비교 == / 문자열은 equals( )

@Controller
@RequiredArgsConstructor
public class GameController {

  @GetMapping("/calculatorin")
  public String calculatorForm() throws Exception {
    return "/game/calculatorin";
  }
  @PostMapping("/calculatorout")
  public String calculatoroutProc(Integer num1, Integer num2, String operator, Model model) throws Exception {

    Integer result = 0;
    String oper = "";

    if(operator.equals("add")) {
      result = num1 + num2;
      oper = "+";
    } else     if(operator.equals("minus")) {
      result = num1 - num2;
      oper = "-";
    } else     if(operator.equals("multiply")) {
      result = num1 * num2;
      oper = "*";
    } else     if(operator.equals("divide")) {
      result = num1 / num2;
      oper = "/";
    }

    model.addAttribute("num1", num1);
    model.addAttribute("num2", num2);
    model.addAttribute("operator", oper);
    model.addAttribute("result", result);

    return "/game/calculatorout";
  }