close
프로필 배경
프로필 로고

현규 공부방

BackEnd/SpringBoot · 2023. 11. 7. fullscreen 넓게보기

[Springboot] 답변형게시판 #5-1 폼

728x90
TODO : 검색 로직, 대 댓글 만들기(231107)
개발 환경 : 인텔리제이 --> SpringbootMybatisMini

 

 

폼만 작성한 코드를 작성해서 적어두겠습니다

 

addform.jsp (댓글 등록폼)

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Insert title here</title>
</head>
<body>
<c:if test="${sessionScope.loginok==null}">;
    <script>
        alert("먼저 로그인 해주세요")
        history.back();
    </script>
</c:if>
<div style="margin:50px 100px;">
    <form action="insert" method="post" enctype="multipart/form-data">
        <<%--hidden 5개 댓글--%>
        <input type="hidden" name="num" value="${num}">
        <input type="hidden" name="regroup" value="${regroup}">
        <input type="hidden" name="restep" value="${restep}">
        <input type="hidden" name="relevel" value="${relevel}">
        <input type="hidden" name="currentPage value="${currentPage}">

        <%--hidden 2개 id,name--%>
        <input type="hidden" name="id" value="${sessionScope.myid}">
        <input type="hidden" name="name" value="${sessionScope.loginname}">
        <button type="button" class="btn btn-outline-info" onclick="location.href='list'">목록</button><br>

            <table class="table table-bordred" style="width:800px; height: 600px;">
                <tr>
                    <th width="100">제목</th>
                    <td><input type="text" name="subject" class="form-control" required="required"></td>
                </tr>
                <tr>
                    <th width="100">사진</th>
                    <td>
                        <input type="file" name="upload" class="form-control" multiple="multiple">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <textarea style="width:700px; height: 150px;" name="content"></textarea>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <button type="submit" class="btn btn-outline-info">게시글 저장</button>
                    </td>
                </tr>
            </table>
    </form>
</div>



</body>
</html>

 

 

boardlist.jsp ( 게시글 출력폼)

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
  <title>Insert title here</title>
</head>
<body>

<%-- 검색 창 --%>
<div class="searcharea" style="width:100%; text-align: center;">
  <form action="list">
      <div style="width:450px;" class="d-inline-flex">
        <select class="form-select" style="width:150px;" name="searchcolumn">
          <option value="all">전체</option>
          <option value="subject">제목</option>
          <option value="id">아이디</option>
          <option value="name">작성자</option>
          <option value="content">내용</option>
        </select>&nbsp;&nbsp;&nbsp;&nbsp;
          <input type="text" name="searchword" class="form-control" style="width:150px;" placeholder="검색어 입력하세요">
          <button type="submit" class="btn btn-outline-danger">검색</button>
      </div>
  </form>
</div>

<div style="margin:20px 100px;">
  <h3 class="alert alert-danger">총 ${totalCount}개의 글이 있습니다.</h3>
  <br>
  <button type="button" class="btn btn-info" onclick="location.href='form'" style="float:right;">글쓰기</button>&nbsp;
  <button type="button" class="btn btn-danger" onclick="location.href='list?searchcolumn=id&searchword=${sessionScope.myid}'" style="float:right">내가 쓴글</button>
  <br>
  <table class="table table-bordered">
    <tr>
      <th width="60">번호</th>
      <th width="60">제목</th>
      <th width="60">작성자</th>
      <th width="60">작성일</th>
      <th width="40">조회</th>
      <th width="60">추천</th>
    </tr>

    <c:if test="${totalCount==0}">
      <tr>
        <td colspan="6" align="center">
          <h5>등록된 게시글이 없습니다.</h5>
        </td>
      </tr>
    </c:if>

    <c:if test="${totalCount>0}">
      <c:forEach var="dto" items="${list}">
        <tr>
          <td align="center">${no}</td>
          <c:set var="no" value="${no-1}"/>

          <td>
            <<%-- 답글일 경우 level 1개당 2칸 띄우기--%>
            <c:forEach begin="1" end="${dto.relevel}">
              &nbsp;&nbsp;
            </c:forEach>

              <%--답글일 경우 답글 이미지--%>
            <c:if test="${dto.relevel>0}">
              <img src="../image/re.png">
            </c:if>
            <a href="content?num=${dto.num}&currentPage=${currentPage}">${dto.subject}</a>
            <c:if test="${dto.photo !='no'}">
              <i class="bi bi-images" style="color: gray"></i>
            </c:if>
            <c:if test="${dto.photo =='no'}">
              <img src="../image/noimage.JPG">
            </c:if>
          </td>

          <td align="center">${dto.name}</td>
          <td>
            <fmt:formatDate value="${dto.writeday}" pattern="yyyy년MM월dd일 HH시mm분"/>
          </td>
          <td>${dto.readcount}</td>
          <td>${dto.likes}</td>
        </tr>
      </c:forEach>
    </c:if>
  </table>

  <!-- 페이지 번호 출력 -->
  <div>
    <!-- 페이지 번호 출력 -->
    <c:if test="${totalCount>0 }">
      <div style="width: 1100px; text-align: center">
        <ul class="pagination justify-content-center">
          <!-- 이전 -->
          <c:if test="${startPage>1 }">
            <li class="page-item"><a class="page-link" href="list?currentPage=${startPage-1 }">이전</a></li>
          </c:if>

          <c:forEach var="pp" begin="${startPage }" end="${endPage }">
            <c:if test="${currentPage==pp }">
              <li class="page-item active"><a class="page-link"
                                              href="list?currentPage=${pp }">${pp }</a></li>
            </c:if>
            <c:if test="${currentPage!=pp }">
              <li class="page-item"><a class="page-link" href="list?currentPage=${pp }">${pp }</a></li>
            </c:if>
          </c:forEach>

          <!-- 다음 -->
          <c:if test="${endPage<totalPage }">
            <li class="page-item"><a class="page-link"
                                     href="list?currentPage=${endPage+1 }">다음</a></li>
          </c:if>

        </ul>
      </div>
    </c:if>
  </div>
</div>



</body>
</html>

 

 

content.jsp (댓글 출력폼)

<%@ page import="org.springframework.web.context.request.SessionScope" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Insert title here</title>
</head>
<body>
<div style="width: 1000px; margin : 100px 100px;">
    <table class="table table-bordered">
        <tr>
            <td>
                <h2>${dto.subject}</h2>
                <b>${dto.name}(${dto.id})</b><br>
                <span style="color:gray; font-size:0.8em">
                    <fmt:formatDate value="${dto.writeday}" pattern="yyyy-MM-dd HH:mm"/>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    조회수 : ${dto.readcount}
                </span>
            </td>
        </tr>

        <tr>
            <td>
                <pre>
                    ${dto.content}
                </pre><br><br>
                <c:if test="${dto.photo!='no'}">
                    <c:forEach var="photo" items="${dto.photo}">
                        <img src="../rephoto/${photo}" width="150px;" class="img-thumnail">
                    </c:forEach>
                </c:if>
                <br><br>
                <div class="likes">
                    <i class="bi bi-hand-thumbs-up-fill" style="cursor:pointer;"></i>&nbsp;
                    좋아요 <b>${dto.likes}</b>
                </div>
            </td>
        </tr>
        <tr align="center">
            <td>
            <button type="button" class="btn btn-outline-success" onclick="location.href='form?num=${dto.num}&restep=${dto.restep}&relevel=${dto.relevel}&currentPage=${currentPage}'">답글</button>
              <%--  <c:if test="${sessionScope.loginok!=null && sessionScope.myid=dto.id}"> --%>
            <button type="button" class="btn btn-outline-success" onclick="location.href='update?num=${dto.num}'">수정</button>
            <button type="button" class="btn btn-outline-success" onclick="location.href='delete?num=${dto.num}'">삭제</button>
            <button type="button" class="btn btn-outline-success" onclick="location.href='list?currnetPage=${currentPage}'">목록</button>
                <button type="button" class="btn btn-info" onclick="location.href='form'">글쓰기</button>
            </td>
        </tr>
    </table>
</div>


<script>
$("div.likes").click(function(){
        var thum = $(this).find("i").attr("class"); //find -> i태그의 class를 찾는다.
        if(thum =='bi bi-hand-thumbs-up-fill') {
            $(this).find("i").attr("class","bi bi-hand-thumbs-up-fill a").css("color","red");
        } else {
            $(this).find("i").attr("class","bi bi-hand-thumbs-up-fill").css("color","black");
        }
    var num = ${dto.num}
    //alert(num);
    $.ajax({
        type:"get",
        url:"likes",
        dataType:"json",
        data : {"num":num},
        success:function(res) {
            $("div.likes").find("b").text(res.likes);
        }
    })

})
</script>


</body>
</html>

 

이상으로 답변형 게시판 끝 입니다.

728x90
BackEnd/SpringBoot 관련 글
더 보기

티스토리툴바