영보의 SystemOut.log

[Spring] CRUD 게시판 만들기 - Spring MVC구조와 동적쿼리 사용(with IntelliJ, MySQL) -2 본문

Spring

[Spring] CRUD 게시판 만들기 - Spring MVC구조와 동적쿼리 사용(with IntelliJ, MySQL) -2

영보로그 2021. 1. 22. 09:45
반응형

qh5944.tistory.com/139

 

[Spring] CRUD 게시판 만들기 - Spring MVC구조와 동적쿼리 사용(with IntelliJ, MySQL) -1

 환경 설정 qh5944.tistory.com/136 [spring] STS과 Mysql로 CRUD 게시판 만들기-(1)  환경설정 1. 개발환경 : STS / Mysql / Tomcat8.5 / jdk1.8 2. 라이브러리 추가 mvnrepository.com/artifact/javax.servlet..

qh5944.tistory.com

이어서 다시 만들어보겠습니다!

 

 

 코드


# list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%-- SimpleDateFormat --%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<style type="text/css">
.row {
	margin: 0px auto;
	width: 900px;
}

h1 {
	text-align: center;
}

</style>
</head>
<body>
	<div class="container">
		<div class="row">
			<h1>스프링 게시판</h1>
			<table class="table">
				<tr>
					<td><a href="insert.do" class="btn btn-sm btn-primary">새글</a>
					</td>
				</tr>
			</table>
			<div>
				<div class="form-inline">
					<form method='get' action='/board/list.do'>
					<select id="searchType" name="searchType" style="height: 100px; margin: 0px auto; text-align: center";>
						<option value="">검색조건</option>
						<option value="t">제목</option>
						<option value="c">내용</option>
						<option value="w">작성자</option>
						<option value="tc">제목+내용</option>
						<option value="all">전체조건</option>
					</select>
					<input class="form-control" type="text" id="keyword" name="keyword"
						   value="${pageMaker.cri.keyword}" placeholder="검색어를 입력하세요"/>
					<button id="searchBtn" class="btn btn-primary" type="submit">Search</button>
					</form>
				</div>
				<%--<div id="searchMember" style="height: 100px; margin: 0px auto; text-align: center;">
					<form method='get' action='../board/search.do'>
						<select name="searchType">
							<option value="" disabled selected>검색조건</option>
							<option value="name"
								<c:if test="${searchType eq 'name'}">selected</c:if>>아이디</option>
							<option value="subject"
								<c:if test="${searchType eq 'subject'}">selected</c:if>>제목</option>
							<option value="content"
								<c:if test="${searchType eq 'content'}">selected</c:if>F>내용</option>
						</select> <input type="text" name="keyword"
							value="${keyword!=null?keyword:''}" /> <input type="submit"
							value="검색">
					</form>
					rkatkg
				</div>--%>
			</div>
			<table class="table table-striped">
				<tr class="danger">
					<th class="text-center" width=10%>번호</th>
					<th class="text-center" width=45%>제목</th>
					<th class="text-center" width=15%>이름</th>
					<th class="text-center" width=20%>작성일</th>
					<th class="text-center" width=10%>조회수</th>
				</tr>
				<c:forEach var="vo" items="${list }">
					<tr>
						<td class="text-center" width=10%>${vo.boardnumber }</td>
						<td class="text-left" width=45%><a
							href="detail.do?no=${vo.boardnumber }">${vo.subject }</a></td>
						<td class="text-center" width=15%>${vo.name }</td>
						<td class="text-center" width=20%><fmt:formatDate
								value="${vo.regdate }" pattern="yyyy-MM-dd" /></td>
						<td class="text-center" width=10%>${vo.hit }</td>
					</tr>
				</c:forEach>
			</table>
			<table class="table">
				<td class="text-center"><a href="#"
					class="btn btn-sm btn-primary">이전</a> ${curpage } page /
					${totalpage } pages <a href="#" class="btn btn-sm btn-primary">다음</a>
				</td>
			</table>
		</div>
	</div>
</body>
</html>

 

 

 

# 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"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.row {
   margin: 0px auto;
   width:1000px;
}
h1 {
   text-align: center;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.jas"></script>
<script type="text/javascript">
let i=0;
$(function(){
    $('.upBtn').click(function(){
        $('.update').hide();
        let no=$(this).attr("data-no");
        if(i==0)
        {
            $(this).text("취소");
            $('#reply_up'+no).show();
            i=1;
        }
        else
        {
            $(this).text("수정");
            $('#reply_up'+no).hide();
            i=0;
        }
     // 대댓글 작성 공간 
    	$('.comment_Insert_area').hide();
    	
    	$('.bring_comment_tab').click(function(){				// bring_comment_tab 클릭시
    		let no = $(this).attr('id')						// 변수 no는 클릭한 bring_comment_tab의 value값
    		$('#comment_Insert_area' + no).toggle(); 			// #comment_Insert_area + no를 토글
    	});
    	
    	// 댓글 수정 공간
    	$('.comment_Update_area').hide();
    	
    	$('.bring_comment_update_tab').click(function(){				// bring_comment_tab 클릭시
    		let no = $(this).attr('id')						// 변수 no는 클릭한 bring_comment_tab의 value값
    		$('#comment_Update_area' + no).toggle(); 			// #comment_Insert_area + no를 토글
    	});
    	
    	
    	// 댓글 삭제 공간
    	$('.inputPwdComment').hide();
    	
    	$('.deleteCommentButton').click(function(){				// bring_comment_tab 클릭시
    		let comment_no = $(this).attr('id')								// 변수 no는 클릭한 bring_comment_tab의 value값
    		$('#inputPwdComment' + comment_no).toggle(); 			// #comment_Insert_area + no를 토글
    	});
    })
});
</script>
<style type="text/css">
	.board_button{
		border: none;
	}
	.board_button:hover{
		cursor: pointer;
	}
</style>
</head>
<body>
   <div class="container">
     <div class="row">
      <h1>내용보기</h1>
      <table class="table table-striped">
        <tr>
          <th width=20% class="text-center danger">번호</th>
          <td width=30% class="text-center">${vo.boardnumber }</td>
          <th width=20% class="text-center danger">작성일</th>
          <td width=30% class="text-center"> 
            <fmt:formatDate value="${vo.regdate }" pattern="yyyy-MM-dd"/>
          </td>
        </tr>
        <tr>
          <th width=20% class="text-center danger">이름</th>
          <td width=30% class="text-center">${vo.name }</td>
          <th width=20% class="text-center danger">조회수</th>
          <td width=30% class="text-center">${vo.hit }</td>
        </tr>
        <tr>
          <th width=20% class="text-center danger">제목</th>
          <td colspan="3" class="text-left">${vo.subject }</td>
        </tr>
        
        <tr>
          <td colspan="4" class="text-left" valign="top" height=200>
            ${vo.content }
          </td>
        </tr>
        <tr>
          <td colspan="4" class="text-right"> 
            <a href="update.do?no=${vo.boardnumber }" class="btn btn-sm btn-success">수정</a>
            <a href="delete.do?no=${vo.boardnumber}" class="btn btn-sm btn-info">삭제</a>
            <a href="list.do" class="btn btn-sm btn-warning">목록</a>
          </td>
        </tr>
      </table>
     </div>
     <div class="row">
       <%-- 분석 결과 출력  --%>
       <div class="col-sm-6">
       
        <table class="table">
         <tr>
           <td>
            <c:forEach var="rvo" items="${list }">
             <table class="table">
              <tr>
                <td class="text-left">
                               ◐${rvo.name }(${rvo.dbday})
                </td>
                <td class="text-right">
                  <c:if test="${sessionScope.id==rvo.id }">
                    <span class="btn btn-xs btn-success upBtn" data-no="${rvo.no }">수정</span>
                    <a href="reply_delete.do?no=${rvo.no }&cno=${vo.boardnumber}" class="btn btn-xs btn-info">삭제</a>
                  </c:if>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <pre style="white-space: pre-line;border:none;background-color: white">${rvo.msg }</pre>
                </td>
              </tr>
              <tr id="reply_up${rvo.no }" class="update" style="display:none">
                  <td colspan="2">
                    <form method=post action="reply_update.do">
                    <input type=hidden name=cno value=${vo.boardnumber }>
                    <input type=hidden name=no value=${rvo.no }>
                    <textarea rows="3" cols="45" style="float: left" name=msg>${rvo.msg }</textarea>
                    <input type=submit value="댓글수정"
                      class="btn btn-sm btn-danger" style="height:65px;float: left">
                    </form>
                  </td>
                 </tr>
             </table>
            </c:forEach>
           </td>
         </tr>
         <tr>
          <td>
            <form method=post action="reply_insert.do">
            <input type=hidden name=cno value=${vo.boardnumber }>
            <textarea rows="3" cols="45" style="float: left" name=msg></textarea>
            <input type=submit value="댓글쓰기"
              class="btn btn-sm btn-danger" style="height:65px;float: left">
            </form>
          </td>
         </tr>
        </table>
       </div>
       <div class="col-sm-6"></div>
     </div>
   </div>
</body>
</html>

 

 

 

# insert.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.row {
   margin: 0px auto;
   width:700px;
}
h1 {
   text-align: center;
}
</style>
 
</head>
<body>
  <div class="container">
    <div class="row">
     <h1>글쓰기</h1>
     <form method=post action="insert_ok.do">
     <table class="table">
       <tr>
        <th class="text-right danger" width=15%>이름</th>
        <td width=85%>
          <input type=text name=name size=15>
        </td>
       </tr>
       
       <tr>
        <th class="text-right danger" width=15%>제목</th>
        <td width=85%>
          <input type=text name=subject size=50>
        </td>
       </tr>
       
       <tr>
        <th class="text-right danger" width=15%>내용</th>
        <td width=85%>
          <textarea rows="8" cols="55" name=content></textarea>
        </td>
       </tr>
       <tr>
        <th class="text-right danger" width=15%>비밀번호</th>
        <td width=85%>
          <input type="password" name=pwd size=10>
        </td>
       </tr>
       
       <tr>
        <td colspan="2" class="text-center">
          <input type=submit value="글쓰기">
          <input type=button value="취소" onclick="javascript:history.back()">
        </td>
       </tr>
     </table>
     </form>
    </div>
  </div>
</body>
</html>

 

 

 

# update.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.row {
   margin: 0px auto;
   width:700px;
}
h1 {
   text-align: center;
}
</style>
 
</head>
<body>
  <div class="container">
    <div class="row">
     <h1>수정하기</h1>
     <form method=post action="update_ok.do">
     <table class="table">
       <tr>
        <th class="text-right danger" width=15%>이름</th>
        <td width=85%>
          <input type=text name=name size=15 value="${vo.name }">
          <input type=hidden name=boardnumber value="${vo.boardnumber }">
        </td>
       </tr>
       
       <tr>
        <th class="text-right danger" width=15%>제목</th>
        <td width=85%>
          <input type=text name=subject size=50 value="${vo.subject }">
        </td>
       </tr>
       
       <tr>
        <th class="text-right danger" width=15%>내용</th>
        <td width=85%>
          <textarea rows="8" cols="55" name=content>${vo.content }</textarea>
        </td>
       </tr>
       <tr>
        <th class="text-right danger" width=15%>비밀번호</th>
        <td width=85%>
          <input type="password" name=pwd size=10>
        </td>
       </tr>
       
       <tr>
        <td colspan="2" class="text-center">
          <input type=submit value="수정">
          <input type=button value="취소" onclick="javascript:history.back()">
        </td>
       </tr>
     </table>
     </form>
    </div>
  </div>
</body>
</html>

 

 

 

# update_ok.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.row {
   margin: 0px auto;
   width:700px;
}
h1 {
   text-align: center;
}
</style>
 
</head>
<body>
  <div class="container">
    <div class="row">
     <h1>수정하기</h1>
     <form method=post action="update_ok.do">
     <table class="table">
       <tr>
        <th class="text-right danger" width=15%>이름</th>
        <td width=85%>
          <input type=text name=name size=15 value="${vo.name }">
          <!-- <input type=hidden name=no value="${vo.boardnumber }"> -->
        </td>
       </tr>
       
       <tr>
        <th class="text-right danger" width=15%>제목</th>
        <td width=85%>
          <input type=text name=subject size=50 value="${vo.subject }">
        </td>
       </tr>
       
       <tr>
        <th class="text-right danger" width=15%>내용</th>
        <td width=85%>
          <textarea rows="8" cols="55" name=content>${vo.content }</textarea>
        </td>
       </tr>
       <tr>
        <th class="text-right danger" width=15%>비밀번호</th>
        <td width=85%>
          <input type="password" name=pwd size=10>
        </td>
       </tr>
       
       <tr>
        <td colspan="2" class="text-center">
          <input type=submit value="수정">
          <input type=button value="취소" onclick="javascript:history.back()">
        </td>
       </tr>
     </table>
     </form>
    </div>
  </div>
</body>
</html>

 

 

 

# search.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%-- SimpleDateFormat --%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<style type="text/css">
.row {
	margin: 0px auto;
	width: 900px;
}

h1 {
	text-align: center;
}
</script>
</style>
</head>
<body>
	<div class="container">
		<div class="row">
			<h1>스프링 게시판</h1>
			<table class="table">
				<tr>
					<td><a href="insert.do" class="btn btn-sm btn-primary">새글</a>
					</td>
				</tr>
			</table>
			<div>
				<div id="searchMember" style="height: 100px; margin: 0px auto; text-align: center;">
					<form method='get' action='../board/search.do'>
						<select name="searchType">
							<option value="" disabled selected>검색타입</option>
							<option value="name"
								<c:if test="${searchType eq 'name'}">selected</c:if>>아이디</option>
							<option value="subject"
								<c:if test="${searchType eq 'subject'}">selected</c:if>>제목</option>
							<option value="content"
								<c:if test="${searchType eq 'content'}">selected</c:if>>내용</option>	
						</select> <input type="text" name="keyword"
							value="${keyword!=null?keyword:''}" /> <input type="submit"
							value="검색">
					</form>
				</div>
			</div>
			<table class="table table-striped">
				<tr class="danger">
					<th class="text-center" width=10%>번호</th>
					<th class="text-center" width=45%>제목</th>
					<th class="text-center" width=15%>이름</th>
					<th class="text-center" width=20%>작성일</th>
					<th class="text-center" width=10%>조회수</th>
				</tr>
				<c:forEach var="vo" items="${list }">
					<tr>
						<td class="text-center" width=10%>${vo.boardnumber }</td>
						<td class="text-left" width=45%><a
							href="detail.do?no=${vo.boardnumber }">${vo.subject }</a></td>
						<td class="text-center" width=15%>${vo.name }</td>
						<td class="text-center" width=20%><fmt:formatDate
								value="${vo.regdate }" pattern="yyyy-MM-dd" /></td>
						<td class="text-center" width=10%>${vo.hit }</td>
					</tr>
				</c:forEach>
			</table>
			<table class="table">
				<td class="text-center"><a href="#"
					class="btn btn-sm btn-primary">이전</a> ${curpage } page /
					${totalpage } pages <a href="#" class="btn btn-sm btn-primary">다음</a>
				</td>
			</table>
		</div>
	</div>
</body>
</html>

 

 

 

# delete.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.row {
   margin: 0px auto;
   width:350px;
}
h1 {
   text-align: center;
}
</style>
</head>
<body>
   <div class="container">
    <div class="row">
      <h1>삭제하기</h1>
      <form action="delete_ok.do" method="post">
      <table class="table">
       <tr>
         <td>
          비밀번호:<input type=password name=pwd size=15 class="input-sm">
            <input type=hidden name=no value="${boardnumber }">
         </td>
       </tr>
       <tr>
         <td class="text-center">
           <input type=submit value="삭제">
           <input type=button value="취소" onclick="javascript:history.back()">
         </td>
       </tr>
      </table>
      </form>
    </div>
   </div>
</body>
</html>

 

 

 

#delete_ok.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:choose>
  <c:when test="${bCheck==true }">
    <c:redirect url="list.do"/>
  </c:when>
  <c:otherwise>
    <script>
      alert("비밀번호가 틀립니다!!");
      history.back();
    </script>
  </c:otherwise>
</c:choose>

 

 

 

 구현 화면

반응형
저작자표시

'Spring' 카테고리의 다른 글

[Spring] log4j 로그 남기기 및 설정  (1) 2021.01.28
[Spring] CRUD 게시판 만들기 - Spring MVC구조와 동적쿼리 사용(with IntelliJ, MySQL) -1  (0) 2021.01.22
[spring] STS/MySQL - MVC 구조로 리스트 출력하기  (0) 2021.01.19
[spring] STS과 Mysql로 CRUD 게시판 만들기-(2)  (0) 2021.01.19
[spring] STS과 Mysql로 CRUD 게시판 만들기-(1)  (0) 2021.01.19
'Spring' Related Articles more