관리자 페이지에서 공지사항 작성할 수 있게 쓰기 페이지 제작
인풋태그로 짧은 글 받고
텍스트 애어리어로 내용 부분 받아서 컨트롤러로 전달
쓰기 폼하나 새로 만들고 이를 작성완료하면 db쪽과 왔다갔다 하도록 구성
HTML
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${ pageContext.servletContext.contextPath }/resources/css/admin/adminNoticeWriteView.css">
</head>
<body>
<c:import url="adminMenubar.jsp" />
<div class="title">
<h2>공지사항</h2>
</div>
<form id="form" name="form" method="post">
<table class="tableWhole">
<thead>
<tr>
<th>제목</th>
<td style="width: 1050px;">
<input type="text" placeholder="제목을 입력하세요">
</td>
</tr>
<tr>
<th>작성자</th>
<td>${board.adminId}</td>
</tr>
<tr>
<th>작성일</th>
<td>${board.boardCreateDate}</td>
<th>조회수</th>
<td style="width:100px" align="center">
${board.boardCount}
</td>
</tr>
</thead>
</table>
<div class="content">
<textarea class="textarea_field" placeholder=" 내용을 입력해주세요."></textarea>
</div>
<input type="hidden" id="boardId" name="boardId" value="${board.boardId }" > <!-- qnaNo를 컨트롤러로 보내서 어느 게시물이 수정되는지 알려 줘야함 -->
<div class="listButton">
<c:url var="blist" value="adminNoticeList.ad">
<c:param name="page" value="${ page }"/>
</c:url>
<button type="submit" onclick="javascript:form.action='adminNoticeWriteForm.ad'">작성 완료</button>
<button type="submit" onclick="javascript:form.action='adminNoticeList.ad'">목 록</button>
</div>
</form>
<!-- ############ PAGE END 끝~ -->
<!-- / -->
<!-- theme switcher -->
<!-- ############ LAYOUT END-->
<!-- build:js scripts/app.html.js -->
<!-- jQuery -->
<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/jquery/dist/jquery.js"></script>
<!-- Bootstrap -->
<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/tether/dist/js/tether.min.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/bootstrap/dist/js/bootstrap.js"></script>
<!-- core -->
<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/underscore/underscore-min.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/jQuery-Storage-API/jquery.storageapi.min.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/PACE/pace.min.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/config.lazyload.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/palette.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-load.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-jp.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-include.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-device.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-form.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-nav.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-screenfull.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-scroll-to.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-toggle-class.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/app.js"></script>
<!-- ajax -->
<%-- <script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/jquery-pjax/jquery.pjax.js"></script> --%>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ajax.js"></script>
<!-- endbuild -->
</body>
</html>
CSS
th{
width: 130px;
background-color: #f7f5f8;
font-weight: 600;
line-height: 200%;
}
input{
border:none;
}
.title{
width: 890px;
text-align: center;
margin: 0 auto;
}
.title > p{
color:rgb(149, 146, 146);
margin-bottom: 3%;
}
thead{
border-bottom: rgb(149, 146, 146);
}
.tableWhole{
width:100%;
max-width: 890px;
border-top : 2px solid black;
border-bottom: 1px solid lightgray;
line-height: 180%;
margin: 0 auto;
}
.tableWhole > thead > tr > td{
padding-left:10px;
padding-top:5px;
padding-bottom:5px;
}
thead > tr{
border-bottom : 1px solid rgb(149, 146, 146);
}
.tableTop td{
width:450px;
}
.content{
width:890px;
margin: 0 auto;
word-break: break-all;
}
.content > p{
padding: 2%;
padding-bottom: 5%;
border-bottom: 1px solid lightgray;
}
.listButton{
width:890px;
text-align: right;
margin:2% auto;
padding-right: 3%;
}
.listButton > button:hover{
background-color:#f7b7b5;
color:#fff;
border:1px solid #FE8F8F;
}
.listButton > button{
width:100px;
height:35px;
background-color: #FE8F8F;
border: 1px solid #FF5C58;
color:#fff;
}
/**************************/
.content{
text-align: center;
}
.content textarea{
width:890px;
min-height: 150px;
padding:1% 0;
margin: 0 auto;
resize: none;
border:none;
border-bottom: 1px solid lightgray;
}
