리스트 페이지로 돌아가기
자바스크립트로 매핑시켜보자
인강 분은 제이쿼리, 람다식 써서 구현하던데 ,, 람다식과 제이쿼리가 익숙하지 않기때문에. 순수한 자바스크립트로 했당
그다음 수정
? 뒤에 벨류 값으로 jstl 태그값을 붙이던가
아니면 자바스크립트로 태그.,value 로 뽑아서 ? 뒤에 넣어주기
두가지 방식이 가능한데 그냥 편한거 쓰면 될거 같다
그다음 컨트롤러에서 메소드만들어주고
수정페이지 modify.jsp를 만들자
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var list = document.querySelector('#list');
list.addEventListener('click', function() {
location.href = "/board/list.do";
});
});
</script>
</head>
<body>
<div class="container">
<h2>Board Modify Page</h2>
<div class="panel panel-default">
<div class="panel-heading">Board Modify Page</div>
<div class="panel-body">
<form action="<c:url value='/modify.do'/>" method="post"> <!-- action 속성 끝에 '>' 추가 -->
<div class="form-group">
<label for="title">Bno</label>
<input type="text" class="form-control" name="idx" id="idx" value="${board.idx}" readonly="readonly">
</div>
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" name="title"id="title" value="${board.title}">
</div>
<div class="form-group">
<label for="contents">Text Area</label>
<textarea class="form-control" rows="5" id="contents" name="contents">${board.contents}</textarea>
</div>
<div class="form-group">
<label for="writer">Writer</label>
<input type="text" class="form-control" id="writer" name="writer" value="${board.writer}"readonly="readonly">
</div>
<button type="submit" class="btn btn-primary">modify</button>
<button id="remove" type="button" class="btn btn-danger">Remove</button>
<button id="list" type="button" class="btn btn-info">List</button>
</form>
</div>
</div>
</div>
</body>
</html>
'spring framework 인프런강의' 카테고리의 다른 글
| Spring WEB MVC04 스프링 mvc 프로젝트 시작 (0) | 2024.10.25 |
|---|---|
| Spring WEB MVC03 게시판 웹 계층 구현하기(수정 및 삭제) (0) | 2024.10.25 |
| Spring WEB MVC03 게시판 웹 계층 구현하기(등록 및 조회 구현) (0) | 2024.10.23 |
| Spring WEB MVC03 게시판 웹 계층 구현하기(등록 UI 만들기) (0) | 2024.10.23 |
| Spring WEB MVC03게시판 웹 계층 구현하기(리스트 보기 구현) (0) | 2024.10.23 |
