반응형
자바를 이용해서 게시판 만들기
요즘 게시판 만들기를 반복하고 있는데, 반복학습이 도움이 많이 되는 것 같다.
detail.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!-- jstl을 쓰기 위한 코어태그 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>-- 게시글 --</title>
<link href="./css/index.css" rel="stylesheet">
<link href="./css/menu.css" rel="stylesheet">
<script type="text/javascript" src="./js/menu.js"></script>
<style type="text/css">
.detailDIV {
width: 900px;
height: auto;
background-color: #F5F2FF;
padding: 10px;
box-sizing: border-box;
}
.detailTITLE{
width: 100%;
height: 50px;
font-size: large;
border-bottom: 5px solid #5c509c;
line-height: 50px;
}
.detailWRITECOUNT{
width: 100%;
height: 50px;
}
.detailWRITE, .detailCOUNT{
width: 50%;
float: left;
height: 50px;
line-height: 50px;
}
.detailWRITE img{
/*이미지와 글자 정렬*/
vertical-align: sub;
width: 30px;
height: 30px;
}
.detailWRITE img:hover{
background-color: white;
}
.detailCOUNT{
text-align: right;
}
.detailCONTENT{
width: calc(100%-20px);
min-height: 300px;
height: auto;
margin: 10px;
border: 1px solid #382d72;
box-sizing: border-box;
}
</style>
</head>
<body>
<header>
<jsp:include page="menu.jsp"></jsp:include>
<!-- jsp: 는 출력 결과만 화면에 나옴 -->
</header>
<div class="main">
<div class="mainStyle">
<article>
<div class="detailDIV">
<div class="detailTITLE">
${detail.title }
</div>
<div class="detailWRITECOUNT">
<div class="detailWRITE">
${detail.write }
<img alt="삭제" src="./img/delete1.png" onclick="del()">
<img alt="수정" src="./img/update1.png">
</div>
<div class="detailCOUNT">${detail.count }</div>
</div>
<div class="detailCONTENT">
${detail.content }
</div>
</div>
<button onclick="url('./board')"> 글목록</button>
</article>
</div>
</div>
<footer>
</footer>
<script type="text/javascript">
function del(){
//alert("삭제 기능 동작 확인");
var ch = confirm("글을 삭제하시겠습니까?"); // 확인 = true, 취소 = false
if (ch) {
location.href="./delete?no=${detail.no }";
}
}
</script>
</body>
</html>
write.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글쓰기 페이지입니다.</title>
<link href="./css/menu.css" rel="stylesheet">
<script type="text/javascript" src="./js/menu.js"></script>
<!-- include libraries(jQuery, bootstrap) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
<style type="text/css">
#title{
width: 100%;
height: 30px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container1">
<header>
<jsp:include page="menu.jsp"></jsp:include>
</header>
<div class="main">
<div class="mainStyle">
<article><br>
<h1>글쓰기</h1>
<div class="writeFORM">
<form action="./write" method="post">
<input type="text" id="title" name="title">
<textarea id="summernote" name="content"></textarea>
<button type="submit">저장하기</button>
</form>
</div>
</article>
</div>
</div>
</div>
<div id="summernote"></div>
<script>
$(document).ready(function() {
$('#summernote').summernote({
height : 400
});
});
</script>
</body>
</html>
</body>
</html>반응형
'개발 공부 Today I Learned' 카테고리의 다른 글
| [국비 37일차 TIL] 게시판 로그인 페이지 만들기 (0) | 2024.01.12 |
|---|---|
| [국비 36일차 TIL] 게시판 만들기 (Delete, Util. update) (0) | 2024.01.11 |
| [국비 34일차 TIL] jstl 기초 시작 (0) | 2024.01.09 |
| [국비 33일차 TIL] 웹 페이지 제작 방법, 미니 프로젝트 시작 (1) | 2024.01.08 |
| [국비 32일차 TIL] 게시판 만들기 3 (summernote, 조회수, 상단 메뉴) (0) | 2024.01.08 |
댓글