jsp framework
프레임워크 예제를 하나 하나 추가해보면서 게시판의 모습을 만들어 보도록 하자
처음은 list 형태의 게시판 첫번째 모양을 만들것이다.
jsp으로 모습을 만들어보자.
boardList1.jsp
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%
/**
* @Class Name : egovSampleList.jsp
* @Description : Sample List 화면
* @Modification Information
*
* 수정일 수정자 수정내용
* ------- -------- ---------------------------
* 2009.02.01 최초 생성
*
* author 실행환경 개발팀
* since 2009.02.01
*
* Copyright (C) 2009 by MOPAS All right reserved.
*/
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><spring:message code="title.sample" /></title>
<script type="text/javascript" src="<c:url value='/js/jquery-ui.js' />"></script>
<script type="text/javascript" src="<c:url value='/js/jquery-1.10.2.js' />"></script>
<link type="text/css" rel="stylesheet" href="<c:url value='/css/egovframework/sample.css'/>"/>
<script type="text/javaScript" language="javascript" defer="defer">
/* pagination 페이지 링크 function */
function fn_egov_link_page(pageNo){
document.listForm.pageIndex.value = pageNo;
document.listForm.action = "<c:url value='/boardList.do'/>";
document.listForm.submit();
}
</script>
<script>
/* boardList 와 boarWrite로 이동 ajax를 이용한 function */
$(function(){
$("#listBtn").click(function(){
location.href="<c:url value='/boardList.do' />";
});
$("#writeBtn").click(function(){
location.href="<c:url value='/boardWrite.do' />";
});
});
</script>
<script>
/* 게시판 내용 수정과 관련된 function*/
function fn_action(value){ //글을 클릭했을 때 unq값을 받아와 밑에 detailForm에 hidden값으로 싣어 post방식으로 보내려고함
var f=document.detailForm;
f.unq.value=value;
f.action="<c:url value='/boardModify.do'/>";
f.submit();
}
/* 제목/내용/작성자 검색을 하기 위한 function*/
function fn_search(){
var f=document.form_search;
if(f.search_value.value==""){
alert("검색어를 입력하세요");
}else{
f.submit();
}
}
</script>
</head>
/* 로그인을 위한 세션 준비(일단 세션값을 SSO_ID로 한다.)*/
<%=session.getAttribute("SSO_ID")%>
<body style="text-align:center; margin:0 auto; display:inline; padding-top:100px;">
<div id="content_pop">
<!-- 타이틀 -->
<div id="title">
<ul>
<li><img src="<c:url value='/images/egovframework/example/title_dot.gif'/>" alt=""/><spring:message code="list.sample" /></li>
</ul>
</div>
<!-- List -->
<div id="table">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
/* 검색을 위한 search 폼*/
<form name="form_search" id="form_search" method="post" action="<c:url value='/boardList.do'/>">
<td align="left">
/*select 를 통해서 title/content/name을 구분한다.*/
<select id="sch_type" name="sch_type">
<option value="title" selected>제목</option>
<option value="content">내용</option>
<option value="name">작성자</option>
</select>
/*text에 적은 내용을 search_value 로 보낸다..*/
<input type="text" name="search_value" id="search_value"/>
<input type="button" value="검색" id="btnSearch" onClick="fn_search()"/>
</td>
</form>
<tr>
<td align="right">
<input type="button" value="리스트" id="listBtn"/>
</td>
<td align="right">
<input type="button" value="글쓰기" id="writeBtn" />
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<colgroup>
<col width="150"/>
<col width="150"/>
<col width="150"/>
<col width="150"/>
<col width="100"/>
</colgroup>
<tr>
<th align="center">번호</th>
<th align="center">제목</th>
<th align="center">글쓴이</th>
<th align="center">등록일</th>
<th align="center">조회수</th>
</tr>
/*Controller에서 model로 보내진 이름으로 foreach를 통해 데이터를 출력한다.*/
<c:forEach var="result" items="${boardList}" varStatus="status">
<tr>
/*넘버링topNumber는 게시물의 총 갯수*/
<td align="center" class="listtd">${topNumber}</td>
<td align="center" class="listtd">
/*제목을 클릭하면 unq 값과 함께 fn_action으로 이동한다.*/
<a href="#" onClick="fn_action('${result.unq}')"><c:out value="${result.title}"/></a> </td>
<td align="center" class="listtd"><c:out value="${result.name}"/> </td>
<td align="center" class="listtd"><c:out value="${result.rdate}"/> </td>
<td align="center" class="listtd"><c:out value="${result.hit}"/> </td>
</tr>
<c:set var="topNumber" value="${topNumber-1}"/>
</c:forEach>
</table>
</div>
<!-- /List -->
/*paging을 위한 폼*/
<form:form commandName="boardVO" id="listForm" name="listForm" method="post">
<input type="hidden" name="selectedId" />
<div id="paging">
/*paging을 위한 paginationInfo */
<ui:pagination paginationInfo="${paginationInfo}" type="image" jsFunction="fn_egov_link_page" />
<form:hidden path="pageIndex"/>
<form:hidden path="sch_type"/>
<form:hidden path="search_value"/>
</div>
</div>
</form:form>
<form:form commandName="boardVO" name="detailForm" method="post">
<input type="hidden" name="unq"/>
</form:form>
</div>
</body>
</html>
'개발 > jsp' 카테고리의 다른 글
| jsp framework1(EgovController.java) (0) | 2015.11.20 |
|---|---|
| JSTL 라이브러리 태그 (0) | 2015.10.29 |
| 프레임워크 어떻게 돌아가는가? (2) | 2015.10.27 |
| JSP개발에 디버깅에 필요한 로그확인/쿼리까지 확인가능(log4j)v3e0e4e5a (0) | 2015.10.22 |
| jsp (0) | 2015.10.16 |
댓글