JAVA

커맨드 객체사용/Validation/tag/ MAVEN

Strickland 2024. 5. 8. 08:54

todo.jsp 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <link href="webjars\bootstrap\5.1.3\css\bootstrap.min.css" rel="stylesheet">
    <title>Add Todo Page</title>

</head>
<body>
<div class="container">
    <h1>Enter Todo Details</h1>
    <form method="post">
        Description: <input type="text" name="description" required="required" />
        <input type="hidden" name="id" value="0"/>
        <input type="hidden" name="done" value="true"/>
        <input type="submit" class="btn btn-success">

    </form>
</div>

<script src="webjars\bootstrap\5.1.3\js\bootstrap.min.js"></script>
<script src="webjars\jquery\3.6.0\jquery.min.js"></script>
</body>
</html>

input type 이 hidden 이면 value 를 직접 지정해 줘야함 

@PostMapping("add-todo")
public String addNewTodo(ModelMap model, Todo todo) {

    String username = (String) model.get("name");
    todoService.addTodo(username, todo.getDescription(), LocalDate.now().plusYears(1), false);

    return "redirect:list-todos";
}

addNewTodo 컨트롤러 에서 Todo 로 매핑해서 받을 수 있음.

매핑 될때 프론트에서 전달받은 value값( id 와 done 값) 은 스트링으로 전달 되지만 

mvc 에서 자동으로 todo dto 에 맞는 자료형으로 매핑이됨.

 

 

 

하지만 커맨드 객체를 이용하고 싶다면?

jsp 파일의 상단의 다음을 추가 해주자

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

 

form 을 접두사로 지정 

 

todo.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <link href="webjars\bootstrap\5.1.3\css\bootstrap.min.css" rel="stylesheet">
    <title>Add Todo Page</title>

</head>
<body>
<div class="container">
    <h1>Enter Todo Details</h1>
    <form:form method="post" modelAttribute="todo">
        Description: <form:input type="text" path="description" required="required" />
        <form:input type="hidden" path="id"/>
        <form:input type="hidden" path="done"/>
        <input type="submit" class="btn btn-success">
    </form:form>
</div>

<script src="webjars\bootstrap\5.1.3\js\bootstrap.min.js"></script>
<script src="webjars\jquery\3.6.0\jquery.min.js"></script>
</body>
</html>

form 태그를 살펴보면 path 라는 속성이 지정되어있다 . 이는 todo 객체의 속성이다 .

 

@GetMapping("add-todo")
public String showNewTodoPage(ModelMap model) {
    String username = (String) model.get("username");
    Todo todo = new Todo(0, username, "", LocalDate.now().plusYears(1), false);
    model.put("todo", todo);
    return "todo";
}

showNewTodoPage 에서 todo.jsp 를 서빙 할때 "todo" 객체를 model 에 put 해주고 있다 .

이를 기반으로 todo.jsp 는 커맨드객체를 스프레드 할 수 있게된다.

 

todo.jsp 가 html 에 렌더링된 결과는 다음과 같다.

 

커맨드 객체로 전달해주었던 todo 객체의 필드값들이 input 태그의 value 값으로 각각 매핑이 되었다.

이걸 단방향 바인딩 이라고 한다

 

이제 검증을 추가해 보자

todo.java

package com.hyukjin.springboot.myfirstwebapp.todo;

import jakarta.validation.constraints.Size;

import java.time.LocalDate;

public class Todo {
 
    .
    .
    @Size(min = 10, message = "Enter atleast 10 characters")
    private String description;
    .
    .
    
}

 

descrition 의 최소 길이가 10 이 되도록 @Size 어노테이션을 추가해준다.

 

@PostMapping("add-todo")
public String addNewTodo(ModelMap model, @Valid Todo todo, BindingResult result) {

    if (result.hasErrors()) {
        return "todo";
    }
    String username = (String) model.get("name");
    todoService.addTodo(username, todo.getDescription(), LocalDate.now().plusYears(1), false);

    return "redirect:list-todos";
}

addNewTodo 에선 Todo 파라미터 앞에 @Valide 어노테이션을 추가해준다.

만약 검증을 통과하지 못하면 result로 에러가 바인딩 된다.

검증을 통과하지 못하면 todo.jsp 가 서빙된다.

todo.jsp

.
.

<div class="container">
    <h1>Enter Todo Details</h1>
    <form:form method="post" modelAttribute="todo">
        Description: <form:input type="text" path="description" required="required" />
        <form:errors path="description" cssClass="text-warning"/>
        <form:input type="hidden" path="id"/>
        <form:input type="hidden" path="done"/>
        <input type="submit" class="btn btn-success">
    </form:form>
</div>
.
.

todo.jsp 에서 에러를 표시하기 위해선 <form:erros path="검증실패필드이름"> 을 넣어주면 된다.

cssClass 는 스프링 부트가 제공하는 css 를 사용하기 위한 태그이다.

 

스프링 부트가 제공하는 datePicker 를 사용해보자!

아래의 의존성 추가

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap-datepicker</artifactId>
    <version>1.9.0</version>
</dependency>

 

라이브러리에서 datepicker 찾기!

bootstrap-datepicker.min.css와 bootstrap-datepicker.standalone.min.css 의 절대주소를 복사!

todo.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <link href="webjars\bootstrap\5.1.3\css\bootstrap.min.css" rel="stylesheet">
    <link href="webjars\bootstrap-datepicker\1.9.0\css\bootstrap-datepicker.standalone.min.css" rel="stylesheet">
    <title>Add Todo Page</title>

</head>
<body>
<div class="container">
    <h1>Enter Todo Details</h1>
    <form:form method="post" modelAttribute="todo">

        <fieldset class="mb-3">
            <form:label path="description">Description</form:label>
            <form:input type="text" path="description" required="required" />
            <form:errors path="description" cssClass="text-warning"/>
        </fieldset>

        <fieldset class="mb-3">
            <form:label path="targetDate">Target Date</form:label>
            <form:input type="text" path="targetDate" required="required" />
            <form:errors path="targetDate" cssClass="text-warning"/>
        </fieldset>

        <form:input type="hidden" path="id"/>
        <form:input type="hidden" path="done"/>
        <input type="submit" class="btn btn-success">
    </form:form>
</div>

<script src="webjars\bootstrap\5.1.3\js\bootstrap.min.js"></script>
<script src="webjars\jquery\3.6.0\jquery.min.js"></script>
<script src="webjars\bootstrap-datepicker\1.9.0\js\bootstrap-datepicker.min.js"></script>
<script type="text/javascript">
    $('#targetDate').datepicker({
        format: 'yyyy-mm-dd'
    });
</script>
</body>
</html>

1. style 과 script 에 스프링부트 datepicker 주소를삽입했다

2. filedset 태그로 필드들을 묶어주었다.

3. sript 에 text/javascript 를 추가해주었다.

 

이제 form 제출을 누르면 yyyy-mm-dd 형태의 텍스트로 데이터가 전해진다.

이를 addNewTodo 의 todo 객체와 매핑하기 위해선 application.properties 에 다음의 코드를 추가한다

spring.mvc.format.date=yyyy-MM-dd

 

스프링 부트에서 mm 은 분, MM 은 월을 나타낸다.

 

addNewTodo.java 

@PostMapping("add-todo")
public String addNewTodo(ModelMap model, @Valid Todo todo, BindingResult result) {

    if (result.hasErrors()) {
        return "todo";
    }
    String username = (String) model.get("name");
    todoService.addTodo(username, todo.getDescription(), todo.getTargetDate(), false);

    return "redirect:list-todos";
}

Todo의 targetDate 는 LocalDate 로 선언되어 있고 application.properties 에서 위의 설정도 추가해주었음으로 날짜 데이터를 정상적으로 받아 저장할 수 있다.

'JAVA' 카테고리의 다른 글

JSP Fragment 사용  (0) 2024.05.08
Predicate  (0) 2024.05.08
webjars 를 이용한 bootstrap, jquery 추가 방법 / MAVEN  (0) 2024.05.06
JSTL 사용법/ MAVEN  (0) 2024.05.05
@SessionAttributes  (0) 2024.05.05

'JAVA'의 다른글

  • 현재글커맨드 객체사용/Validation/tag/ MAVEN

관련글

티스토리툴바