본문 바로가기

JAVA

JAVA 게시판 처리(기본구성)-1

mvc 패턴을 이용해서 jsp만 실행 시켜보고 싶다면 참고 하시면 될 것 같습니다.

 

게시판 처리(기본구성)-0

web.xml

dispactcher-servlet.xml

configure

사용

 

 

파일구성

 

 

controller

// http://localhost:7080/sdas/boardList.do

sdad는 파일명에 따라 다릅니다.

완성하고 ctrl+클릭 하면 창이 열립니다.

// http://localhost:7080/sdas/boardList.do
@Controller
public class BoardController {
  @Autowired(required = false)
  private BoardService service;

  @RequestMapping("boardList.do")
  public String boardList() {

    return "WEB-INF\\views\\a01_boardList.jsp";
  }
}

 

dao

@Repository
public interface BoardDao {

}

 

service

@Service
public class BoardService {



}

 

DownloadViewer

public class DownloadViewer {

}

 

vo

public class Board {

}

 

boardMapper.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="board.dao.BoardDao">
	
</mapper>

 

mybatis.Spring.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
	<typeAliases>
		<typeAlias alias="board" type="board.vo.Board"/>
	</typeAliases>

	<mappers>
		<mapper resource="resource/boardMapper.xml"/>
	</mappers>
</configuration>

 

a01_boardList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"
    import="java.util.*"
    %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="path" value="${pageContext.request.contextPath }"/>
<fmt:requestEncoding value="utf-8"/>     
<!DOCTYPE html>
<%--


 --%>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${path}/a00_com/bootstrap.min.css" >
<link rel="stylesheet" href="${path}/a00_com/jquery-ui.css" >
<style>
	td{text-align:center;}
</style>
<script src="${path}/a00_com/jquery.min.js"></script>
<script src="${path}/a00_com/popper.min.js"></script>
<script src="${path}/a00_com/bootstrap.min.js"></script>
<script src="${path}/a00_com/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://developers.google.com/web/ilt/pwa/working-with-the-fetch-api" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
	<%--  jquery로 body끝까지 모든 태그, 아이디, 클래스를 객체로 인식할 수 있는 상황에서 처리.
	1. jquery의 DOM
		document.querySelector("선택자")
		document.querySelectorAll("선택자")
		==> $("선택자")	
			$("[속성=속성값]"), $("#아이디명"), $(".클래스"), $("태그명")
		.value = "입력값" .value
		==> $("선택자").val("입력값"), $().val() 
		.innerText
		==> $("선택자").text("표현할문자열"), $("선택자").text()
		.innerHTML
		==> $("선택자").html("표현할 html코드"),  $("선택자").html()
		.속성 = "속성값" ex) domObj.align="center"
		==> $("선택자").attr("속성","속성값")
		.style.속성 = "속성값 ex) domObj.style.backgroundColor="red"
		==> $("선택자").css("속성","속성값") 
			ex) $("h1").css("background-color","blue");
			ex) $("h1").css({"color":"blue","border":"1px solid red"});
		var h1Arry = document.querySelectorAll("h1")
		for(var idx=0;idx<h1Arry.length;idx++){
			h1Arry[idx].style.backgroundColor="blue"
		}
		==> $("h1").css("background-color","blue");
		
		
		
		
		
	--%>	
	});
</script>
</head>

<body>
<div class="jumbotron text-center">
  <h2 data-toggle="modal" data-target="#exampleModalCenter">타이틀</h2>

</div>
<div class="container">
	<form id="frm01" class="form-inline"  method="post">
  	<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
	    <input class="form-control mr-sm-2" placeholder="제목" />
	    <input class="form-control mr-sm-2" placeholder="내용" />
	    <button class="btn btn-info" type="submit">Search</button>
 	</nav>
	</form>
   <table class="table table-hover table-striped">
   	<col width="10%">
   	<col width="50%">
   	<col width="15%">
   	<col width="15%">
   	<col width="10%">
    <thead>
    
      <tr class="table-success text-center">
        <th>번호</th>
        <th>제목</th>
        <th>작성자</th>
        <th>작성일</th>
        <th>조회</th>
      </tr>
    </thead>	
    <tbody>
    	<tr><td></td><td></td><td></td><td></td><td></td></tr>
    	<tr><td></td><td></td><td></td><td></td><td></td></tr>
    	<tr><td></td><td></td><td></td><td></td><td></td></tr>
    </tbody>
	</table>    
    
</div>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">타이틀</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
		<form id="frm02" class="form"  method="post">
	     <div class="row">
	      <div class="col">
	        <input type="text" class="form-control" placeholder="사원명 입력" name="ename">
	      </div>
	      <div class="col">
	        <input type="text" class="form-control" placeholder="직책명 입력" name="job">
	      </div>
	     </div>
	    </form> 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>

 

 

 

실행화면