오늘의 노래!!!
F*ck My Life
- 아티스트
- 세븐틴 (SEVENTEEN)
- 앨범
- SEVENTEEN 10th Mini Album ‘FML'
- 발매일
- 1970.01.01

[1] 게시글 작성부터 시작~
// board폴더 >> write.jsp파일
<title>게시글 작성</title>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시글 작성</title>
<!-- 로그인하지 않으면 다시 index 페이지 이동 -->
<!-- 로그인 해야 게시글 작성 -->
<link rel="stylesheet" href="./resources/css/table.css" />
</head>
<body>
<h2>게시글 작성 페이지</h2>
<form action="bWrite" method="POST" enctype="multipart/form-data">
<input type="hidden" name="bWriter" value="${loginId}"/>
<table>
<caption>게시글 작성</caption>
<!-- <tr>
<th>작성자</th>
<td><input type="text" name="bWriter" /></td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password" name="bPw" /></td>
</tr> -->
<tr>
<th>제목</th>
<td><input type="text" name="bTitle" /></td>
</tr>
<tr>
<th>내용</th>
<td><textarea rows="20" cols="40" name="bContent"></textarea></td>
</tr>
<tr>
<th>첨부파일</th>
<td><input type="file" name="bFile" /></td>
</tr>
<tr>
<th colspan="2"><input type="submit" value="등록"/></th>
</tr>
</table>
</form>
</body>
<script>
<c:if test="${loginId == null}">
alert('로그인 후 사용해주세요');
location.href="loginForm";
</c:if>
</script>
</html>
<script>
<c:if test="${loginId == null}">
alert('로그인 후 사용해주세요');
location.href="loginForm";
</c:if>
</script>
// 로그인 후에 게시물 작성할 수 있도록 c:if문 지정
[2] 게시글 목록 작성 시작~
// board폴더 >> list.jsp파일
<caption>게시글 목록</caption>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>List</title>
<link rel="stylesheet" href="./resources/css/table.css" />
<style>
</style>
</head>
<body>
<table>
<caption>게시글 목록</caption>
<tr>
<th>게시글 번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
<th>조회수</th>
</tr>
<c:forEach var="list" items="${bList}">
<tr>
<td>${list.BNum}</td>
<td><a href="boardView?bNum=${list.BNum}">${list.BTitle}</a></td>
<td>${list.BWriter}</td>
<td>${list.BDate}</td>
<td>${list.BHit}</td>
</tr>
</c:forEach>
<tr>
<th colspan="5">
<!-- 페이징 처리 --> <!-- [이전] --> <c:if test="${paging.page <= 1}">[이전]</c:if>
<c:if test="${paging.page > 1}">
<a href="boardList?page=${paging.page -1}">[이전]</a>
</c:if> <!-- [페이지 번호] --> <c:forEach var="i" begin="${paging.startPage}"
end="${paging.endPage}">
<c:if test="${paging.page == i}"> ${i} </c:if>
<c:if test="${paging.page != i}">
<a href="boardList?page=${i}">${i}</a>
</c:if>
</c:forEach> <!-- [다음] --> <c:if test="${paging.page >= paging.maxPage}">[다음]</c:if>
<c:if test="${paging.page < paging.maxPage}">
<a href="boardList?page=${paging.page + 1}">[다음]</a>
</c:if>
</th>
</tr>
<tr>
<td colspan="5">
<!-- 검색기능 -->
<form action="boardSearch" method="GET">
<!-- 카테고리 -->
<select name="category">
<option value="bTitle">제목</option>
<option value="bWriter">작성자</option>
<option value="bContent">내용</option>
</select>
<!-- 키워드 -->
<input type="text" name="keyword" />
<!-- 검색버튼 -->
<input type="submit" value="검색" />
</form>
</td>
</tr>
</table>
</body>
</html>
[3] 게시글 상세보기 시작~ ajax문 사용!!!
// board폴더 >> view.jsp파일
<caption>게시글 상세보기</caption>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>View</title>
<link rel="stylesheet" href="./resources/css/table.css" />
</head>
<body>
<table>
<caption>게시글 상세보기</caption>
<tr>
<th>번호</th>
<td>${view.BNum}</td>
</tr>
<tr>
<th>작성자</th>
<td>${view.BWriter}</td>
</tr>
<tr>
<th>제목</th>
<td>${view.BTitle}</td>
</tr>
<tr>
<th>내용</th>
<td>${view.BContent}</td>
</tr>
<tr>
<th>작성일</th>
<td>${view.BDate}</td>
</tr>
<tr>
<th>조회수</th>
<td>${view.BHit}</td>
</tr>
<tr>
<th>첨부파일</th>
<td><img src="./resources/fileUpload/${view.BFileName}"
width="200px" /></td>
</tr>
<tr>
<th colspan="2">
<button id="modify">수정</button>
<button id="delete">삭제</button>
</th>
</tr>
</table>
<div id="cmtWrite">
<input type="hidden" value="${view.BNum}" id="cbNum" /> <input
type="hidden" value="${loginId}" id="cWriter" />
<textarea rows="3" cols="30" id="cContent" onfocus="checkLogin()"></textarea>
<button id="writeBtn">댓글입력</button>
</div>
<div id="cmtArea">
<!-- 댓글 가져오는 영역 -->
</div>
</body>
<script src="https://code.jquery.com/jquery-3.6.4.js"
integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E="
crossorigin="anonymous">
</script>
<script>
$('#modify').click(function() {
let check = prompt('비밀번호를 입력해 주세요');
if (pw == check) {
location.href = "modiForm?bNum=${view.BNum}";
} else {
alert('비밀번호가 일치 하지않습니다');
}
});
$('#delete').click(function() {
let check = prompt('비밀번호를 입력해 주세요');
if (pw == check) {
location.href = "boardDelete?bNum=${view.BNum}";
} else {
alert('비밀번호가 일치 하지않습니다');
}
});
function checkLogin(){
if(${loginId == null}){
$('#cContent').blur(); //blur -- 포커스에 반댓말
alert('로그인후 사용');
location.href="loginForm";
}
}
// ajax로 댓글 불러오기
$.ajax({
type : "POST",
url : "cList",
data : {
"cbNum" : ${view.BNum}
},
dataType : "json",
success : function(list){
console.log(list);
// cmtList() 함수 호출
cmtList(list);
},
error : function(){
alert("댓글 불러오기 통신 실패");
}
});
function cmtList(list){
let output = "";
output += "<table>";
output += "<tr>";
output += "<th>작성자</th>";
output += "<th>내용</th>";
output += "<th>작성일</th>";
output += "<th>수정</th>";
output += "<th>삭제</th>";
output += "</tr>";
for(let i in list){
output += "<tr>";
output += "<td>" + list[i].cwriter+"</td>";
output += "<td>" + list[i].ccontent+"</td>";
output += "<td>" + list[i].cdate+"</td>";
output += "<td>수정</td>";
output += "<td>삭제</td>";
output += "</tr>";
}
output += "</table>";
$('#cmtArea').html(output);
}
// 댓글 입력(writeBtn) 버튼을 클릭할 경우
$('#writeBtn').click(function(){
let cWriter = $('#cWriter').val()
let cContent = $('#cContent').val()
let cbNum = $('#cbNum').val()
//console.log("cWriter : " + cWriter + ", cContent : " + cContent + ", cbNum : "+ cbNum);
// ajax로 불러오기
$.ajax({
type : "POST",
url : "cWrite",
data : {
"cbNum" : cbNum,
"cContent" : cContent,
"cWriter" : cWriter
},
dataType : "json",
success : function(list){
cmtList(list);
$('#cContent').val(""); //초기화
},
error : function(){
alert("댓글 작성 통신 실패");
}
});
});
</script>
</html>
상세히 코드 풀이
<body>
<div id="cmtWrite">
<input type="hidden" value="${view.BNum}" id="cbNum" /> <input
type="hidden" value="${loginId}" id="cWriter" />
<textarea rows="3" cols="30" id="cContent" onfocus="checkLogin()"></textarea>
<button id="writeBtn">댓글입력</button>
</div>
<div id="cmtArea">
<!-- 댓글 가져오는 영역 -->
</div>
</body>
// body안에 div문을 사용해 id지정!
function checkLogin(){
if(${loginId == null}){
$('#cContent').blur(); //blur -- 포커스에 반댓말
alert('로그인후 사용');
location.href="loginForm";
}
}
// 아이디값이 들어오지 않으면 0 >>1 cContent로 받아와서 숫자 판별 후 0이면 loginForm으로 이동~
// ajax로 댓글 불러오기
$.ajax({
type : "POST",
url : "cList",
data : {
"cbNum" : ${view.BNum}
},
dataType : "json",
success : function(list){
console.log(list);
// cmtList() 함수 호출
cmtList(list);
},
error : function(){
alert("댓글 불러오기 통신 실패");
}
});
// ajax을 사용해서 text값을 불러온다
function cmtList(list){
let output = "";
output += "<table>";
output += "<tr>";
output += "<th>작성자</th>";
output += "<th>내용</th>";
output += "<th>작성일</th>";
output += "<th>수정</th>";
output += "<th>삭제</th>";
output += "</tr>";
for(let i in list){
output += "<tr>";
output += "<td>" + list[i].cwriter+"</td>";
output += "<td>" + list[i].ccontent+"</td>";
output += "<td>" + list[i].cdate+"</td>";
output += "<td>수정</td>";
output += "<td>삭제</td>";
output += "</tr>";
}
output += "</table>";
$('#cmtArea').html(output);
}
// html로 나타낸 코드를 자바스크립트로 나타내준다!!
// 댓글 입력(writeBtn) 버튼을 클릭할 경우
$('#writeBtn').click(function(){
let cWriter = $('#cWriter').val()
let cContent = $('#cContent').val()
let cbNum = $('#cbNum').val()
//console.log("cWriter : " + cWriter + ", cContent : " + cContent + ", cbNum : "+ cbNum);
// ajax로 불러오기
$.ajax({
type : "POST",
url : "cWrite",
data : {
"cbNum" : cbNum,
"cContent" : cContent,
"cWriter" : cWriter
},
dataType : "json",
success : function(list){
cmtList(list);
$('#cContent').val(""); //초기화
},
error : function(){
alert("댓글 작성 통신 실패");
}
});
});
// 버튼을 클릭할 경우 각 val를 값을 가져와서 ajax로 표현해 주었다!
Controller
package com.icia.mbp.controlloer;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.icia.mbp.dto.COMMENT;
import com.icia.mbp.service.CService;
@Controller
public class CController {
@Autowired
private CService csvc;
// cList : 댓글 목록
@RequestMapping(value="cList", method=RequestMethod.POST)
public @ResponseBody List<COMMENT> cList(@RequestParam("cbNum")int cbNum){
List<COMMENT> list = csvc.cList(cbNum);
return list;
}
// cWrite : 댓글 작성
@RequestMapping(value="cWrite", method=RequestMethod.POST)
public @ResponseBody List<COMMENT> cWrite(@ModelAttribute COMMENT comment){
List<COMMENT> list = csvc.cWrite(comment);
return list;
}
}
Service
package com.icia.mbp.service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.icia.mbp.dao.CDAO;
import com.icia.mbp.dto.COMMENT;
@Service
public class CService {
@Autowired
private CDAO cdao;
public List<COMMENT> cList(int cbNum) {
List<COMMENT> list = cdao.cList(cbNum);
return list;
}
public List<COMMENT> cWrite(COMMENT comment) {
try {
cdao.cWrite(comment);
} catch(Exception e) {
e.printStackTrace();
}
List<COMMENT> list = cdao.cList(comment.getCbNum());
return list;
}
}
DAO
package com.icia.mbp.dao;
import java.util.List;
import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
import com.icia.mbp.dto.COMMENT;
@Repository
public class CDAO {
@Autowired
private SqlSessionTemplate sql;
public List<COMMENT> cList(int cbNum) {
return sql.selectList("Comment.cList", cbNum);
}
public void cWrite(COMMENT comment) {
sql.insert("Comment.cWrite", comment);
}
}
DAO.mapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="Comment">
<select id="cList" parameterType="int" resultType="comment">
SELECT * FROM COMMENTT WHERE CBNUM = #{cbNum} ORDER BY CNUM ASC
</select>
<insert id="cWrite" parameterType="comment">
INSERT INTO COMMENTT VALUES(CNUM_SEQ.NEXTVAL, #{cbNum}, #{cWriter}, #{cContent}, SYSDATE)
</insert>
</mapper>
'IT코딩공부!' 카테고리의 다른 글
#40# SpringBoot 공부진행 (0) | 2023.06.29 |
---|---|
#38 스프링(Ajax쿼리문) (0) | 2023.06.01 |
#37 스프링공부~ (MemBoard프로젝트①) 기본틀 (0) | 2023.05.31 |
#36 스프링(Board(게시판프로젝트 만들어서 페이지, 검색찾기 기능 구현) (0) | 2023.05.30 |
#35 스프링(Board(게시판프로젝트, 어노테이션 기본개념!!) (0) | 2023.05.26 |