위로
아래
HTML 수정
글쓰기 페이지를 가져와서 테이블 뼈대만 남긴다.
CSS는 글쓰기 페이지의 것을 그대로 사용한다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글 작성</title>
<link rel="stylesheet" type="text/css" href="css/Form.css">
</head>
<body>
<table>
<form name="form1" method="post" action="">
<tr><td colspan="2"><h3>게시글 쓰기</h3></td></tr>
<tr>
<th>제목</th>
<td><input type="text" name="subject" title="제목"></td>
</tr>
<tr>
<th>작성자</th>
<td><input type="text" name="writer" title="작성자"></td>
</tr>
<tr>
<th>글 내용</th>
<td><textarea name="content" title="글내용"></textarea></td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password" name="passwd" title="비밀번호"></td>
</tr>
</table>
</form>
</body>
</html>
데이터 불러오기
각 input과 textarea의 value에 해당 게시글의 데이터를 넣어준다.
BoardContentAction.jsp에서 setAttribute로 DTO를 dto에 설정해주었으니,
dto를 사용하면 해당 게시글의 데이터를 불러올 수 있다.
el 표현방법을 사용한다.
수정할 수 없게 readonly를 한다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>${dto.subject}</title>
<link rel="stylesheet" type="text/css" href="css/Form.css">
</head>
<body>
<form name="form1" method="post" action="">
<table>
<tr><td colspan="2"><h3>${dto.subject}</h3></td></tr>
<tr>
<th>작성자</th>
<td><input type="text" name="writer" title="작성자" value="${dto.writer}" readonly="readonly"></td>
</tr>
<tr>
<th>글 내용</th>
<td><textarea name="content" title="글내용" readonly="readonly">${dto.content}</textarea></td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password" name="passwd" readonly="readonly" title="비밀번호" value = "${dto.passwd}"></td>
</tr>
</table>
</form>
</body>
</html>
글 수정, 글 삭제, 답글, 글 목록 버튼
테이블 밑에 글 수정, 글 삭제, 답글, 글목록 버튼을 추가한다.
<tr>
<td colspan="2">
<input class="btn" type="button" value="글 수정" id="re">
<input class="btn" type="button" value="글 삭제" id="de">
<input class="btn" type="button" value="답글" id="reply">
<input class="btn" type="button" value="글 목록" onclick="location.href='jb?command=list'">
</td>
</tr>
버튼에 자바스크립트 코드의 뼈대를 만든다.
<script src="jquery/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
$().ready(function(){
$("#re").on("click",function(){
alert("글 수정");
})
$("#de").on("click",function(){
alert("글 삭제");
})
$("#reply").on("click",function(){
alert("답글");
})
})
</script>
버튼이 잘 작동 한다.
전체 코드
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>${dto.subject}</title>
<link rel="stylesheet" type="text/css" href="css/Form.css">
<script src="jquery/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
$().ready(function(){
$("#re").on("click",function(){
alert("글 수정");
})
$("#de").on("click",function(){
alert("글 삭제");
})
$("#reply").on("click",function(){
alert("답글");
})
})
</script>
</head>
<body>
<form name="form1" method="post" action="">
<table>
<tr><td colspan="2"><h3>${dto.subject}</h3></td></tr>
<tr>
<th>작성자</th>
<td><input type="text" name="writer" title="작성자" value="${dto.writer}" readonly="readonly"></td>
</tr>
<tr>
<th>글 내용</th>
<td><textarea name="content" title="글내용" readonly="readonly">${dto.content}</textarea></td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password" name="passwd" readonly="readonly" title="비밀번호" value = "${dto.passwd}"></td>
</tr>
<tr>
<td colspan="2">
<input class="btn" type="button" value="글 수정" id="re">
<input class="btn" type="button" value="글 삭제" id="de">
<input class="btn" type="button" value="답글" id="reply">
<input class="btn" type="button" value="글 목록" onclick="location.href='jb?command=list'">
</td>
</tr>
</table>
</form>
</body>
</html>@charset "UTF-8";
* {margin:0; padding:0;}
body{ width:100%; background-color: #f6f6ee;}
table {
width:70%;
margin: 0 auto;
padding:10px;
border-radius:25px;
}
table th {
border : 1px solid balck;
}
table tr {text-align:center;}
table th {
text-align:center;
background-color : #ffffff;
border-radius:10px;
}
input {width:90%; padding:3px;}
textarea {
width:90%; height:300px; padding:3px;
resize: none;
}
.btn {width:100px; margin-top:5px; margin-bottom:10px;}
h3 {margin:5px 5px 10px 5px;}