게시판마스터
90
2017-01-11 20:49:21.0
2
361

안녕하세요. 댓글에 대해 질문드립니다(스프링)


<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://www.springframework.org/security/tags"
				
	prefix="sec"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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.3.7/css/bootstrap.min.css">
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="css/nsc_fm.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/board_view.css">
<!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요한) -->
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
</head>
<body>
	<c:if test="${MND_FLAG=='NOT'}">
		<script type="text/javascript">
			alert("권한이 없습니다.");
		</script>
	</c:if>
	<nav class="navbar navbar-inverse">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target="#myNavbar">
					<span class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">Logo</a>
			</div>
			<div class="collapse navbar-collapse" id="myNavbar">
				<ul class="nav navbar-nav">
					<li><a href="index.do">Home</a></li>
					<li><a href="list.do?cate=공지">Notice</a></li>
					<li><a href="list.do?cate=자유">Board</a></li>
					<li><a href="list.do?cate=모임">Group</a></li>
					<li><a href="list.do?cate=건의">Complaint</a></li>
				</ul>
				<form class="navbar-form navbar-right" role="search">
					<div class="form-group input-group">
						<input type="text" class="form-control" placeholder="Search..">
						<span class="input-group-btn">
							<button class="btn btn-default" type="button">
								<span class="glyphicon glyphicon-search"></span>
							</button>
						</span>
					</div>
				</form>
				<!--------------------------login signup -------------------------->
				<div class="header" id="home">
					<div class="container">
						<div class="menu">
							<ul class="menu-top">
								<sec:authorize access="isAnonymous()">
									<li><a class="play-icon popup-with-zoom-anim"
										href="#small-dialog">Log In</a></li>
								</sec:authorize>
								<sec:authorize access="isAuthenticated()">
									<li><a href="logout.do">LogOut</a></li>
								</sec:authorize>
							</ul>
							<!---pop-up-box---->
							<script type="text/javascript"
								src="js/js_board/modernizr.custom.min.js"></script>
							<script src="js/js_board/jquery.magnific-popup.js"
								type="text/javascript"></script>
							<link href="css/popuo-box.css" rel="stylesheet" type="text/css"
								media="all">
							<!---//pop-up-box---->
							<div id="small-dialog" class="mfp-hide">
								<div class="login">
									<form action="j_spring_security_check" method="POST">
										<h3>Log In</h3>
										<h4>Already a Member</h4>
										<input name="mem_id" type="text" value="Email"
											onfocus="this.value = '';"
											onblur="if (this.value == '') {this.value = 'Email';}">
										<input name="mem_password" type="password" value="Password"
											onfocus="this.value = '';"
											onblur="if (this.value == '') {this.value = 'Password';}">
										<input type="submit" value="Login"> <input
											type="button" value="Create User"
											onclick="location.href='reg_form.do'"><br> <a
											href="forgot_form.do">forgot password</a>
									</form>
								</div>
							</div>
							<div id="small-dialog1" class="mfp-hide">
								<div class="signup">
									<h3>Sign Up</h3>
									<h4>Enter Your Details Here</h4>
									<input type="text" value="First Name"
										onfocus="this.value = '';"
										onblur="if (this.value == '') {this.value = 'First Name';}">
									<input type="text" value="Second Name"
										onfocus="this.value = '';"
										onblur="if (this.value == '') {this.value = 'Second Name';}">
									<input type="text" class="email" value="Enter Email"
										onfocus="this.value = '';"
										onblur="if (this.value == '') {this.value = 'Enter Email';}">
									<input type="password" value="Password"
										onfocus="this.value = '';"
										onblur="if (this.value == '') {this.value = 'Password';}">
									<input type="submit" value="SignUp">
								</div>
							</div>
							<script>
								$(document).ready(function() {
									$('.popup-with-zoom-anim').magnificPopup({
										type : 'inline',
										fixedContentPos : false,
										fixedBgPos : true,
										overflowY : 'auto',
										closeBtnInside : true,
										preloader : false,
										midClick : true,
										removalDelay : 300,
										mainClass : 'my-mfp-zoom-in'
									});
								});
							</script>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!---------------------------------login signup------------------------------------->
	</nav>
	<div class="container text-center">
		<div class="row">
			<div class="col-sm-2 well">
				<sec:authorize access="isAuthenticated()">
					<div class="well">
						<img src="resources/images/bird.jpg" class="img-circle"
							height="65" width="65" alt="Avatar"> </br> </br>
						<p>
							<sec:authentication property="principal.username" />
						</p>
					</div>
					<p>
						<a href="logout.do">LogOut</a>
					</p>
				</sec:authorize>
				<sec:authorize access="isAnonymous()">
					<div class="well">
						<img src="resources/images/bird.jpg" class="img-circle"
							height="65" width="65" alt="Avatar"> </br> </br>
						<p>Please Login</p>
					</div>
					<p>
						<a class="play-icon popup-with-zoom-anim" href="#small-dialog">Login</a>
					</p>
				</sec:authorize>
			</div>
			<!----------------------------------------게시판-------------------------------------- -->
			<h2>
				<div class="col-sm-8">
					<div id="contentWrapper">
						<div id="contentWrap">
							<div id="content">
								<div id="bbsData">
									<div class="page-body"></div>
									<div class="bbs-tit">
										<span class="braket">[</span><strong>BOARD</strong><span
											class="braket">]</span>
									</div>
									<div class="bbs-table-view">
										<table summary="게시글 보기">
											<caption>게시글 보기</caption>
											<thead>
												<tr>
													<th><div class="tb-center">${boardVO.board_subject}</div></th>
												</tr>
											</thead>
											<tbody>
											<c:forEach items="${list}" var="vo">
														<tr>
															<c:if test="${vo.board_idx}">
																<td>
																	<div class="tb-center">공지</div>
																</td>
																<td></td>
																<td>
																	<div class="tb-left">
																		<a
																			href="replyinsertOk.do?board_idx=${vo.board_idx}&cate=${cate}">${vo.board_subject}</a>
																	</div>
																</td>
																<td>
																	<div class="tb-center">${vo.mem_id}</div>
																</td>
																<td><div class="tb-center">${vo.rep_content}</div></td>
																
															</c:if>
														</tr>
													</c:forEach>
												<tr>
													<td>
														<div class="cont-sub-des" style="text-align: left;">
															<div>
																<span><em>Name :</em>${boardVO.mem_id}</span> &nbsp;
																&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
																&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
																&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
																&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
																&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
																&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span><em>Date
																		:</em>${boardVO.board_writedate}</span> &nbsp; &nbsp; &nbsp; <span><em>Hits
																		:</em>${boardVO.board_hit}</span>
															</div>
														</div>
													</td>
												</tr>
												<tr>
													<td>
														<div class="data-bd-cont">
															<center>${boardVO.board_content}</center>
														</div>
													</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
								<!-- .page-body -->
							</div>
							<!-- #bbsData -->
						</div>
					</div>
					<!-- #contentWrap -->
					<!-- ---------------------------끝---------------------------------- -->
					<!------------------------------댓글찡-------------------------------------->
					<!-- 좌우측의 공간 확보 -->
					<table class="table table-condensed">
					</table>
					<table id="commentTable" class="table table-condensed"
						style="text-align: left;"></table>
					<table class="table table-condensed" style="text-align: left;">
					
					
						<c:forEach items="${rep_list}" var="vo">					
								<tr id="r1" name="commentParentCode">
									<td colspan="2">
										<strong><sec:authentication property="principal.username"/></strong>  
											<a style="cursor:pointer;" name="pAdd">답글</a> | <a style="cursor:pointer;" name="pDel">삭제</a>
												<p>${vo.rep_content}</p>
									</td>
								</tr>											
						</c:forEach>
						
						
							<tr>
								<td><span class="form-inline" role="form"> <sec:authorize
										access="isAuthenticated()">
										<form action="reply_insert.do" method="POST">
											<p>
											<div class="form-group">
												<input type="hidden" name="board_idx"
													value="${boardVO.board_idx}"> <input type="hidden"
													name="cate" value="${cate}"> <input type="text"
													id="commentParentName" name="name"
													class="form-control col-lg-2" data-rule-required="true"
													value="<sec:authentication property="principal.username"/>"
													readonly=true maxlength="10">
											</div>
											<div class="form-group">
												<button type="submit" name="Submit" class="btn btn-default">확인</button>
											</div>
											</p>
											<textarea id="commentParentText" name="content"
												class="form-control col-lg-12" style="width: 100%" rows="4"></textarea>
										</form>
									</sec:authorize> <sec:authorize access="isAnonymous()">
										<input type="text" id="commentParentName" name="name"
											class="form-control col-lg-12" data-rule-required="true"
											value="댓글은 로그인 후 가능합니다." style="width: 100%" readonly=true
											maxlength="10">
									</sec:authorize>
							</span></td>


						</tr>
					</table>
					<table class="table table-condensed">
						<thead>
							<tr>
								<td><span style='float: right'>
										<button type="button" id="list" class="btn btn-default">목록</button>
										<button type="button" id="modify" class="btn btn-default">수정</button>
										<button type="button" id="delete" class="btn btn-default">삭제</button>
										<c:choose>
											<c:when test="${cate eq '공지'}">
												<sec:authorize access="hasRole('ROLE_ADMIN')">
													<button type="button" id="write" class="btn btn-default">글쓰기</button>
												</sec:authorize>
											</c:when>
											<c:otherwise>
												<sec:authorize access="hasRole('ROLE_USER')">
													<button type="button" id="write" class="btn btn-default">글쓰기</button>
												</sec:authorize>
											</c:otherwise>
										</c:choose>
										<button type="button" id="re_write" class="btn btn-default">답글</button>
								</span></td>
							</tr>
						</thead>
					</table>
					<script>
			$(function() {
							
				//제일 하단에 있는 depth1의 댓글을 다는 이벤트
				$("#commentParentSubmit")
						.click(
								function(event) {
									//ajax로 저장하고 성공하면 저장한 데이터를 가져와 넣어야 하는데 여기서는 테스트라 그냥 입력값을 가져옴

									var pName = $("#commentParentName");
									var pText = $("#commentParentText");

									if ($.trim(pName.val()) == "") {
										alert("이름을 입력하세요.");
										pName.focus();
										return;												
									} else if ($.trim(pText.val()) == "") {
										alert("내용을 입력하세요.");
										pText.focus();
										return;
									}

									var commentParentText = '<tr id="r1" name="commentParentCode">'
											+ '<td colspan=2>'
											+ '<strong>'
											+ pName.val()
											+ '</strong> '
											+ ' <a style="cursor:pointer;" name="pAdd">답글</a> | <a style="cursor:pointer;" name="pDel">삭제</a><p>'
											+ pText.val().replace(
													/\n/g, "<br>")
											+ '</p>'
											+ '</td>'
											+ '</tr>';

									//테이블의 tr자식이 있으면 tr 뒤에 붙인다. 없으면 테이블 안에 tr을 붙인다.
									if ($('#commentTable')
											.contents().size() == 0) {
										$('#commentTable').append(
												commentParentText);
									} else {
										$('#commentTable tr:last')
												.after(
														commentParentText);
									}

									$("#commentParentName").val("");
									$("#commentParentText").val("");

								});


				//댓글의 댓글을 다는 이벤트
				$(document)
						.on(
								"click",
								"#commentChildSubmit",
								function() {

									var cName = $("#commentChildName");
									var cText = $("#commentChildText");

									if ($.trim(cName.val()) == "") {
										alert("이름을 입력하세요.");
										cName.focus();
										return;
									} else if ($.trim(cText.val()) == "") {
										alert("내용을 입력하세요.");
										cText.focus();
										return;
									}

									var commentChildText = '<tr name="commentChildCode">'
											+ '<td style="width:1%"><span class="glyphicon glyphicon-arrow-right"></span></td>'
											+ '<td style="width:99%">'
											+ '<strong>'
											+ cName.val()
											+ '</strong> '
											+ ' <a style="cursor:pointer;" name="cAdd">답글</a> | <a style="cursor:pointer;" name="cDel">삭제</a>'
											+ '<p>'
											+ cText.val().replace(
													/\n/g, "<br>")
											+ '</p>'
											+ '</td>'
											+ '</tr>';

									//앞의 tr노드 찾기
									var prevTr = $(this).parent()
											.parent().parent()
											.parent().prev();
									//댓글 적는 에디터 삭제
									$("#commentEditor").remove();//여기에서 삭제를 해줘야 에디터tr을 안 찾는다.

									//댓글을 타고 올라가며 부모 tr을 찾음
									while (prevTr.attr("name") != "commentParentCode") {
										prevTr = prevTr.prev();
									}
									//while를 타는지 체크
									var check = false;
									//다음 노드가 댓글(depth1)의 댓글인지 찾기위해 next
									var nextTr = prevTr.next();
									//뒤에 댓글(depth1)의 댓글(depth2_1)이 없다면 바로 붙인다.
									if (nextTr.attr("name") != "commentChildCode") {
										prevTr
												.after(commentChildText);
									} else {
										//댓글(depth1)의 댓글(depth2_n)이 있는경우 마지막까지 찾는다.
										while (nextTr.attr("name") == "commentChildCode") {
											nextTr = nextTr.next();
											check = true;
										}
									}

									if (check) {//댓글(depth1)의 댓글(depth2_n)이 있다면 그 댓글(depth2_n) 뒤에 댓글(depth2_n+1) 추가
										nextTr = nextTr.prev();//while문에서 검색하느라 next로 넘거갔던거 다시 앞으로 돌려줌
										nextTr.after(commentChildText);
									}
								});

				//답글링크를 눌렀을때 에디터 창을 뿌려주는 이벤트, 삭제링크를 눌렀을때 해당 댓글을 삭제하는 이벤트
				$(document)
						.on(
								"click",
								"table#commentTable a",
								function() {//동적으로 버튼이 생긴 경우 처리 방식

									if ($(this).attr("name") == "pDel") {
										if (confirm("답글을 삭제 하시면 밑에 답글도 모두 삭제 됩니다. 정말 삭제하시겠습니까?") == true) { //확인

											var delComment = $(this)
													.parent()
													.parent();
											var nextTr = delComment
													.next();
											var delTr;
											//댓글(depth1)의 댓글(depth2_1)이 있는지 검사하여 삭제
											while (nextTr
													.attr("name") == "commentCode") {
												nextTr = nextTr
														.next();
												delTr = nextTr
														.prev();//삭제하고 넘기면 삭제되서 없기 때문에 다음값을 가져오기 어려워 다시 앞으로 돌려서 찾은 다음 삭제
												delTr.remove();
											}

											delComment.remove();

										} else { //취소
											return;
										}
									} else if ($(this).attr("name") == "cDel") {
										if (confirm("정말 삭제하시겠습니까??") == true) { //확인
											$(this).parent()
													.parent()
													.remove();
										} else { //취소
											return;
										}
									} else {
										//자기 부모의 tr을 알아낸다.
										var parentElement = $(this)
												.parent().parent();
										//댓글달기 창을 없앤다.
										$("#commentEditor")
												.remove();
										//부모의 하단에 댓글달기 창을 삽입
										var commentEditor = '<tr id="commentEditor">'
												+ '<td style="width:1%"> </td>'
												+ '<td>'
												+ '<span class="form-inline" role="form">'
												+ '<p>'
												+ '<div class="form-group">'
												+ '<input type="text" id="commentChildName" name="commentChildName" class="form-control col-lg-2" data-rule-required="true" value="<sec:authentication property="principal.username"/>" readonly=true maxlength="10">'
												+ '</div>'																														+ '<div class="form-group">'
												+ '<input type="button" id="commentChildSubmit" class="btn btn-default">확인</input>'
												+ '</div>'
												+ '</p>'
												+ '<textarea id="commentChildText" name="commentChildText" class="form-control" style="width:98%" rows="4"></textarea>'
												+ '</span>'
												+ '</td>' + '</tr>';

										parentElement
												.after("reply_insert.do");
									}

								});

				$("#list").click(function(event) {
					location.href = 'list.do?cate=${cate}';
				});
$("#modify")
		.click(
				function(event) {
					location.href = 'update_form.do?board_idx=${boardVO.board_idx}&writer=${boardVO.mem_id}';
				});
$("#delete")
		.click(
				function(event) {
					location.href = 'delete.do?board_idx=${boardVO.board_idx}&writer=${boardVO.mem_id}&cate=${cate}';
				});
$("#write")
		.click(
				function(event) {
					location.href = 'insert.do?cate=${cate}';
				});
$("#re_write")
		.click(
				function(event) {
					location.href = 're_write_form.do?cate=${cate}&board_idx=${boardVO.board_idx}';
		
				
				});
			});
			
		</script>
				
			</div>
			</h2>
			<!-- ---------------------------끝--------------------------- -->
			<div class="col-sm-2 well">
				<div class="thumbnail">
					<p>Upcoming Events:</p>
					<img src="images/images_board/paris.jpg" alt="Paris" width="400"
						height="300">
					<p>
						<strong>Paris</strong>
					</p>
					<p>Fri. 27 November 2015</p>
					<button class="btn btn-primary">Info</button>
				</div>
				<div class="well">
					<p>ADS</p>
				</div>
				<div class="well">
					<p>ADS</p>
				</div>
			</div>
		</div>
	</div>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<footer class="container-fluid text-center">
		<p>Footer Text</p>
	</footer>
</body>
</html>
0
0
  • 답변 2

  • 게시판마스터
    90
    2017-01-11 20:51:52.0

    댓글의 구현을 완료한 게시판마스터입니다.

    foreach문으로 댓글을 content에 구현 하였습니다.

    제가 이제 구현하고 싶은 것은 댓글의 댓글입니다.

    위의 소스를 보시면 댓글의 댓글을 달게 해주는 javascript가 있습니다.

    댓글을 구현했을때도 그 소스를 참고하여 아래 foreach문으로 구현하였습니다.

    댓글의 댓글을 구현하려면 어떤 방식으로 길을 잡아야 할지 고민이 많습니다.

    고수님들의 많은 관심과 조언 부탁 드립니다 .ㄲ^^!

    <c:forEach items="${rep_list}" var="vo">					
    								<tr id="r1" name="commentParentCode">
    									<td colspan="2">
    										<strong><sec:authentication property="principal.username"/></strong>  
    											<a style="cursor:pointer;" name="pAdd">답글</a> | <a style="cursor:pointer;" name="pDel">삭제</a>
    												<p>${vo.rep_content}</p>
    									</td>
    								</tr>											
    						</c:forEach>
    0
  • 게시판마스터
    90
    2017-01-11 20:59:17.0

    REPLY 테이블에서 댓글에 사용하는 것들에는

    REP_GRP / REP_SEG  / REP_LEV 가 있습니다.


    GRP는 댓글1이 달리고 댓글1에 댓글을 달았을 경우 1_1이 되고 하나 더 달았을 경우 1_2가 됩니다

    댓글1에 속하는 모든 것이 GRP입니다. 

    SEG는 순서

    LEV는 깊이입니다

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.