<templete.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
listLoad()
});
function listLoad() {
$.ajax({
url : "boardList.do",
type : "get",
//data:{},
dataType : "json",
success : listView,
error : function() {
alert("error")
}
});
}
function listView(data) { // [{ },{ },{ },{ }]
//반복문->view(동적인뷰)
var list = "<table class='table'>";
list += "<tr>";
list += "<td>번호</td>";
list += "<td>제목</td>";
list += "<td>작성자</td>";
list += "<td>작성일</td>";
list += "<td>조회수</td>";
list += "</tr>";
$.each(data, function(index, obj) { //obj-> {"idx":1, "title":"aa~"}
list += "<tr>";
list += "<td>" + obj.idx + "</td>";
list += "<td><a href='javascript:goView("+obj.idx+")'>" + obj.title + "</a></td>";
list += "<td>" + obj.writer + "</td>";
list += "<td>" + obj.indate + "</td>";
list += "<td>" + obj.count + "</td>";
list += "</tr>";
list += "<tr id='c"+obj.idx+"' style='display:none'>";
list += "<td>내용</td>";
list += "<td colspan='4'>";
list += "<textarea rows='7' readonly class='form-control'>"+obj.content+"</textarea>"
list += "<br><button class='btn btn-info btn-sm'>수정</button>";
list += " <button class='btn btn-warning btn-sm' onclick='goDel("+obj.idx+")'>삭제</button>";
list += "</td>";
list += "</tr>";
});
list += "<tr>";
list += "<td colspan='5'>";
list += "<button class='btn btn-primary btn-sm' onclick='goForm()'>글쓰기</button>";
list += "</td>";
list += "</tr>";
list += "</table>"
$("#view").html(list);
$("#view").css("display", "block");
$("#bfrm").css("display", "none");
}
function goForm() {
$("#view").css("display", "none");
$("#bfrm").css("display", "block");
}
function goInsert(){
var fData=$("#frm").serialize(); //직렬화: title,content,writer
$.ajax({
url:"boardInsert.do",
type:"post",
data:fData,
success: listLoad,
error:function(){alert("error");}
});
$("#reset").trigger("click");
}
function goView(idx){
if($("#c"+idx).css("display")=="none"){
$("#c"+idx).css("display","table-row");
}else{
$("#c"+idx).css("display","none");
}
}
function goDel(idx){
$.ajax({
url : "boardDelete.do",
type : "get",
data : {"idx":idx},
success : listLoad,
error : function(){alert("error");}
});
}
</script>
</head>
<body>
<div class="container">
<!-- 헤더 불러오기 -->
<jsp:include page="header.jsp" />
<h2>2MVC2 Framework</h2>
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body" id="view">게시판 리스트</div>
<div class="panel-body" id="bfrm" style="display: none;">
<form id="frm">
<table class="table">
<tr>
<td>제목</td>
<td><input type="text" id="title" name="title" class="form-control"></td>
</tr>
<tr>
<td>내용</td>
<td><textarea rows="7" cols="20" id="content" name="content"
class="form-control"></textarea></td>
</tr>
<tr>
<td>작성자</td>
<td><input type="text" id="writer" name="writer" class="form-control"></td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="button" class="btn btn-info btn-sm" onclick="goInsert()">등록</button>
<button type="reset" class="btn btn-warningbtn-sm" id="reset">취소</button>
</td>
</tr>
</table>
</form>
</div>
<div class="panel-footer">지능형 IoT_유경</div>
</div>
</div>
</body>
</html><header.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="main.do">게시판</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav><BoardMainController.java>
package kr.board.controller;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/main.do")
public class BoardMainController extends HttpServlet {
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
RequestDispatcher rd = request.getRequestDispatcher("/WEB-INF/board/templete.jsp");
rd.forward(request, response);
}
}
'Maven Project' 카테고리의 다른 글
| 게시판 FrontController-command 방식 (0) | 2022.05.30 |
|---|---|
| FrontController-command 방식 (0) | 2022.05.30 |
| 게시판 글 삭제 (0) | 2022.05.27 |
| 게시판 세부내용 (0) | 2022.05.27 |
| 게시글 목록 조회 (0) | 2022.05.27 |