★ Spring _ DB활용_점수 관리 app - controller 연동

Spring

★ Spring _ DB활용_점수 관리 app - controller 연동_6일차

양빵빵 2022. 7. 13. 17:35

===========

<%@ page contentType="text/html; charset=UTF-8" language="java" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>

<head>

<style>

label {

display: block;

}

.score-list>li {

margin-bottom: 10px;

}

.score-list>li:first-child {

font-size: 1.2em;

color: blue;

font-weight: 700;

border-bottom: 1px solid skyblue;

}

.del-btn {

width: 10px;

height: 10px;

background: red;

color: #fff;

border-radius: 5px;

margin-left: 5px;

text-decoration: none;

font-size: 0.7em;

padding: 6px;

}

.del-btn:hover {

background: orangered;

}

section.score {

padding: 200px 50px 100px;

font-size: 1.5em;

}

</style>

</head>

<body>

<label>

# 이름: <input type="text" name="name">

</label>

<label>

# 국어: <input type="text" name="kor">

</label>

<label>

# 영어: <input type="text" name="eng">

</label>

<label>

# 수학: <input type="text" name="math">

</label>

<label>

<button id="go-home" type="button">홈화면으로</button>

</label>

</form>

<hr>

<li>총 학생 수: ${scores.size()}명</li>

<c:forEach var="s" items="${scores}">

<li>

# 학번: ${s.stuNum}, 이름: <a href="/score/detail?stuNum=${s.stuNum}">${s.markName}</a>, 국어:

${s.kor}점,

영어: ${s.eng}점, 수학: ${s.math}점, 총점: ${s.total}점

, 평균: ${s.average}점

</li>

</c:forEach>

</ul>

</section>

</div>

const $ul = document.querySelector('.score-list');

$ul.addEventListener('click', e => {

if (!e.target.matches('a.del-btn')) return;

e.preventDefault();

//console.log('클릭이벤트 발동!');

if (confirm('정말로 삭제하시겠습니까?')) {

//삭제 진행

location.href = e.target.getAttribute('href');

} else {

//삭제 취소

return;

}

});

//홈화면으로 버튼 이벤트

const $homeBtn = document.getElementById('go-home');

$homeBtn.onclick = e => {

location.href = '/';

};

</script>

</body>

</html>

=================

정보를 동시에 조회를 했으면 좋겠다.

레파지토리 메서드 findAll 을 통해 학생 정보 전체 조회

jsp로 정보를 전달하기 위해 Model 파라미터가 필요하다.

model.attributes(" 키 값", scoreList )

키 값은 jsp에 작성된 scores로 한다.

에러가 발생 했는데 원인을 찾아보자.

s.name으로 수정.

s.name 필드명과 같아야 한다.

s.Name 하면 500 번 에러 발생.

출력이 잘 되는 것 확인 할 수 있다.

==> 점수 입력 받기

spring 은 new Score 할때 기본 생성자를 사용 한다.

그래서 총점 평균 학생 정보가 입력 되지 않았다.

기본생성자 정보 확인 해보기 ↓

기본 생성자로 Score 객체를 생성하는 것을 확인 할 수 있다.

기본 생성자는 메서드 등록이 되어 있지 않기 때문에 총합, 평균 , 학생번호가 입력 되지 않는다.

[학생 번호는 데이터베이스 입력 될때만 시퀀스에 의해 생성됨.]

기본 생성자 호출 후 setter가 호출 되기 때문에 기본 생성자에 메서드를 넣어줘도 의미가 없다. 계산할 값이 주어지지 않은 상태이기 때문에..

컨트롤러에서 메서드를 호출해서 값을 입력해줘야 한다.

메서드 접근제한자 public으로 변경

컨트롤러에서 메서드 호출

세터로 학생 정보를 다 입력 한 후에 [세터 입력이 완료되는 곳은= 컨트롤러]

컨트롤러에서 메서드로 평균 과 총 합을 구한다.

==> 이어서 웹 작업을 하겠습니다.

리다이렉트와 포워드에 대해 정확히 이해 하고 활용 해야 한다.

==> 개별조회

==> 삭제

==========

package com.spring.webmvc.springmvc.chap02.Controller;

import com.spring.webmvc.springmvc.chap02.domain.Score;
import com.spring.webmvc.springmvc.chap02.repository.ScoreRepository;
import lombok.RequiredArgsConstructor;
import lombok.extern.log4j.Log4j2;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.List;

@Controller
@Log4j2
@RequiredArgsConstructor
public class ScoreController {

    private final ScoreRepository repository;

//    @Autowired
//    public ScoreController(ScoreRepository repository) {
//        this.repository = repository;
//    }

    // 점수 등록 및 조회 화면 열기 요청
    @RequestMapping("/score/list")
    public String list(Model model){
        log.info("/score/list GET 요청!!");

        // jsp에게 점수 정보 리스트를 전달해야 함.
        List<Score> scoreList = repository.findAll();
        model.addAttribute("scores",scoreList);
        return "chap02/score-list";
    }

    // 점수 신규등록 요청
    @RequestMapping("/score/register")
    public String register(Score score){
        score.calcTotalAndAvg();
        score.calcGrade();
        log.info("/score/register POST! -" + score);

        if (repository.save(score)) {
            return "redirect:/score/list";
        } else {
            return "redirect:/";
        }
    }

  @RequestMapping("/score/detail")
    public String detail(int stuNum, Model model) {
        log.info("/score/detail GET 요청!! - ");

      Score s = repository.findOne(stuNum);

      model.addAttribute("s", s);
//      model.addAttribute("name", s.getName());
//      model.addAttribute("kor", s.getKor());
//      model.addAttribute("eng", s.getEng());
//      model.addAttribute("math", s.getMath());
//      model.addAttribute("total", s.getTotal());
//      model.addAttribute("average", s.getAverage());
//      model.addAttribute("grade", s.getGrade());

      log.info(s);

      return "chap02/score-detail";
  }

  @RequestMapping("/score/delete")
    public String delete(int stuNum){
        repository.remove(stuNum);
        return "redirect:/score/list";
  }


}

<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="ko">

<head>
<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- reset css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">

    <!-- bootstrap css -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">


    <!-- bootstrap js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" defer></script>

    <!-- jquery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


    <style>
        li {
            list-style: none;
            margin: 0;
            padding: 0;
            font-size: 1.4em;
        }

        section.score-main {
            width: 30%;
            margin: 0 auto 150px;
            padding: 20px;
            border: 2px solid orange;
            border-radius: 10px;
            box-shadow: 2px 2px 5px orangered;
            transform: translateY(200px);
        }

        a.list-btn {
            display: block;
            width: fit-content;
            text-decoration: none;
            background: rgb(83, 189, 83);
            color: white;
            box-shadow: 1px 1px 2px rgb(146, 228, 146);
            border-radius: 5px;
            border: 1px solid white;
            padding: 5px;
        }
    </style>

</head>

<body>

    <div class="wrap">

        <section class="score-main">
            <h1>${s.name}님 성적 정보</h1>
            <ul>
                <li># 국어: ${s.kor}점</li>
                <li># 영어: ${s.eng}점</li>
                <li># 수학: ${s.math}점</li>
                <li># 총점: ${s.total}점</li>
                <li># 평균: ${s.average}점</li>
                <li># 학점: ${s.grade}</li>
            </ul>
            <div class="btn-group">
                <a class="list-btn" href="/score/list">목록</a>
            </div>
        </section>

    </div>
</body>

</html>

<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- reset css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
    
    <!-- bootstrap css -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    
    
    <!-- bootstrap js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" defer></script>

    <!-- jquery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <style>
        label {
            display: block;
        }

        .score-list>li {
            margin-bottom: 10px;
        }

        .score-list>li:first-child {
            font-size: 1.2em;
            color: blue;
            font-weight: 700;
            border-bottom: 1px solid skyblue;
        }

        .del-btn {
            width: 10px;
            height: 10px;
            background: red;
            color: #fff;
            border-radius: 5px;
            margin-left: 5px;
            text-decoration: none;
            font-size: 0.7em;
            padding: 6px;
        }

        .del-btn:hover {
            background: orangered;
        }

        section.score {
            padding: 200px 50px 100px;
            font-size: 1.5em;
        }
    </style>
</head>

<body>

    <div class="wrap">


        <section class="score">
            <h1>시험 점수 등록</h1>
            <form action="/score/register" method="POST">
                <label>
                    # 이름: <input type="text" name="name">
                </label>
                <label>
                    # 국어: <input type="text" name="kor">
                </label>
                <label>
                    # 영어: <input type="text" name="eng">
                </label>
                <label>
                    # 수학: <input type="text" name="math">
                </label>
                <label>
                    <button type="submit">확인</button>
                    <button id="go-home" type="button">홈화면으로</button>
                </label>
            </form>

            <hr>

            <ul class="score-list">
                <li>총 학생 수: ${scores.size()}명</li>

                <c:forEach var="s" items="${scores}">
                    <li>
                        # 학번: ${s.stuNum}, 이름: <a href="/score/detail?stuNum=${s.stuNum}">${s.name}</a>, 국어:
                        ${s.kor}점,
                        영어: ${s.eng}점, 수학: ${s.math}점, 총점: ${s.total}점
                        , 평균: ${s.average}점, 학점 : ${s.grade}
                        <a class="del-btn" href="/score/delete?stuNum=${s.stuNum}">삭제</a>
                    </li>
                </c:forEach>
            </ul>

        </section>



    </div>

    <script>
        const $ul = document.querySelector('.score-list');

        $ul.addEventListener('click', e => {
            if (!e.target.matches('a.del-btn')) return;

            e.preventDefault();
            //console.log('클릭이벤트 발동!');

            if (confirm('정말로 삭제하시겠습니까?')) {
                //삭제 진행                
                location.href = e.target.getAttribute('href');
            } else {
                //삭제 취소
                return;
            }

        });

        //홈화면으로 버튼 이벤트
        const $homeBtn = document.getElementById('go-home');
        $homeBtn.onclick = e => {
            location.href = '/';
        };
    </script>

</body>

</html>

=== 특정 학생 삭제 하기 선생님 리뷰 ==

@RequestParam("stuNum") int sn

== 특정 학생 조회하기 선생님 리뷰 ==

-> 모델앤뷰 사용 하기

@RequestMapping("score/detail")
public ModelAndView detail(int sutNum) {
    log.info("score/detail GET - param1: {}", sutNum);
    Score score = repository.findOne(sutNum);

    ModelAndView mv = new ModelAndView("chap02/score-detail");
    mv.addObject("s",score);

    return mv;
}

'Spring' 카테고리의 다른 글

★ Spring _ LogController [log 종류 5가지]_ 22.07.14_7일차 (0)	2022.07.14
★ Spring _ DB활용_점수 관리 app - controller 기능 추가_7일차 (0)	2022.07.14
★ Spring _ DB활용_점수 관리 app - [삽입,삭제,전체/개별 조회] _6일차 (0)	2022.07.13
Spring _ SQL 연결 하기 [ 마지막에 Spring JDBC 설정 코드 작성 후 서버 먹통 문제 해결 ] _ 6일차 (0)	2022.07.13
Spring _ 실습 예제 [메뉴 선택 _select 활용] _ 6일차 (0)	2022.07.13

현재글★ Spring _ DB활용_점수 관리 app - controller 연동_6일차

SL아카데미(자바플랫폼 웹개발자과정A)

JAVA #정수의 자리수 구하기 # 정수의 자리수 숫자 뽑아내기,

Today :
Yesterday :

SL아카데미(자바플랫폼 웹개발자과정A)