본문 바로가기
IT코딩공부!

#39 스프링(ajax사용)-게시글목록, 댓글작성

history. 2023. 6. 5. 17:04

오늘의 노래!!!

 
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

'IT코딩공부!' Related Articles

티스토리툴바