영보의 SystemOut.log

[spring] STS과 Mysql로 CRUD 게시판 만들기-(2) 본문

Spring

[spring] STS과 Mysql로 CRUD 게시판 만들기-(2)

영보로그 2021. 1. 19. 09:53
반응형

 환경 설정

 

qh5944.tistory.com/136

 

[spring] STS과 Mysql로 CRUD 게시판 만들기-(1)

 환경설정 1. 개발환경 : STS / Mysql / Tomcat8.5 / jdk1.8 2. 라이브러리 추가 mvnrepository.com/artifact/javax.servlet/jstl/1.2 Maven Repository: javax.servlet » jstl » 1.2 Professional Java Data:..

qh5944.tistory.com

앞서 하던 MVC구조 Spring CRUD게시판 이어서 해보겠습니다.

 

 

 

 코드

 

#application-context.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:jdbc="http://www.springframework.org/schema/jdbc"
	xmlns:mybatis-spring="http://mybatis.org/schema/mybatis-spring"
	xmlns:c="http://www.springframework.org/schema/c" xmlns:mvc="http://www.springframework.org/schema/mvc"
	xmlns:p="http://www.springframework.org/schema/p"
	xsi:schemaLocation="http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-4.3.xsd
		http://mybatis.org/schema/mybatis-spring http://mybatis.org/schema/mybatis-spring-1.2.xsd
		http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd
		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd
		http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsd">
	<context:component-scan base-package="com.sist.*" />
	<!-- 자신의 PC(로컬)에 MySql을 설치했을 경우 -->
	<bean id="dataSource"
		class="org.springframework.jdbc.datasource.DriverManagerDataSource">
		<property name="driverClassName" value="com.mysql.cj.jdbc.Driver"></property>
		<property name="url"
			value="jdbc:mysql://210.92.76.29:3306/test?useSSL=false&amp;serverTimezone=UTC">
		</property>
		<property name="username" value="root"></property>
		<property name="password" value="1234"></property>
	</bean>

	<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
		<property name="dataSource" ref="dataSource"></property>
		<property name="configLocation" value="classpath:/mybatis-config.xml"></property>
	</bean>

	 <bean id="mapper" class="org.mybatis.spring.mapper.MapperFactoryBean"
    	p:sqlSessionFactory-ref="sqlSessionFactory"
       p:mapperInterface="com.sist.mapper.BoardMapper"
     />
     
	<bean id="viewResolver"
		class="org.springframework.web.servlet.view.InternalResourceViewResolver"
		p:prefix="/" p:suffix=".jsp" />

</beans>

 - mysql과 spring을 연결시켜주는 부분인데 표시한 부분들은 본인꺼에 따라 다르니까 유의해 주시길 

 

 

 

# 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;
}
</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>

 - 메인을 출력해주는 페이지 입니다. 사이트 들어가서 .do로 고쳐주면 활성화됩니다.

 

 

 

# 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.js"></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;
        }
    }); 
});
</script>
</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>
            
           </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>

 

 

 

# 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>

 

 

 

# 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>

 

 

 

 

 실행 화면

 

반응형
저작자표시

'Spring' 카테고리의 다른 글

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