본문 바로가기
Spring

tiles 타일즈로 화면넘기기(예)

웨이칭 2020. 9. 9. 18:17

index

<%@ 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>
</head>
<body>

<%
response.sendRedirect("login.do");
%>

</body>
</html>

 

 

 

 

view->

1. layouts.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">

<tiles-definitions>

<definition name="login.tiles" template="/WEB-INF/views/login/login.jsp">
</definition>

<definition name="regi.tiles" template="/WEB-INF/views/login/regi.jsp">
</definition>

<definition name="bbslist.tiles" template="/WEB-INF/views/layouts-tiles.jsp">
	<put-attribute name="header" value="/WEB-INF/views/commons/header.jsp"/>
	<put-attribute name="top_inc" value="/WEB-INF/views/commons/top_inc.jsp"/>
	<put-attribute name="top_menu" value="/WEB-INF/views/commons/top_menu.jsp"/>	
	<put-attribute name="left_menu" value="/WEB-INF/views/bbs/left_bbslist.jsp"/>
	<put-attribute name="main" value="/WEB-INF/views/bbs/bbslist.jsp"/>	
	<put-attribute name="bottom_inc" value="/WEB-INF/views/commons/bottom_inc.jsp"/>
</definition>

<definition name="bbswrite.tiles" extends="bbslist.tiles">
	<put-attribute name="main" value="/WEB-INF/views/bbs/bbswrite.jsp" />
</definition> 

<definition name="bbsdetail.tiles" extends="bbslist.tiles">
	<put-attribute name="main" value="/WEB-INF/views/bbs/bbsdetail.jsp" />
</definition> 

<definition name="bbsupdate.tiles" extends="bbslist.tiles">
	<put-attribute name="main" value="/WEB-INF/views/bbs/bbsupdate.jsp" />
</definition> 

<definition name="answer.tiles" extends="bbslist.tiles">
	<put-attribute name="main" value="/WEB-INF/views/bbs/answer.jsp" />
</definition> 

</tiles-definitions>

 

 

 

 

2.layouts-tiles.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%-- request.setCharacterEncoding("utf-8"); --%>

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<fmt:requestEncoding value="utf-8"/>

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<tiles:insertAttribute name="header"/>

<link rel="stylesheet" type="text/css" 
	href="<%=request.getContextPath() %>/css/style.css">
	
</head>
<body>

<div id="body_wrap">
	<div id="main_wrap">
		<tiles:insertAttribute name="top_inc"/>
		<tiles:insertAttribute name="top_menu"/>
	</div>

	<div id="middle_wrap">
		<div id="sidebar_wrap">
			<tiles:insertAttribute name="left_menu"/>
		</div>
		
		<div id="content_wrap">
			<div id="content_title_wrap">
				<div class="title">${doc_title }</div>	
			</div>
			
			<tiles:insertAttribute name="main"/>			
		</div>		
	</div>
	
	<div id="footer_wrap">
		<tiles:insertAttribute name="bottom_inc"/>
	</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
	$("#content_title_wrap div.title").css("background-image", "url('./image/ico_sub_sb.gif')");
});

</script>

</body>
</html>

 

 

 

 

 

 

views->commons->

1. bottom_inc.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<div>
	<img alt="" src="./image/bbsbottom1.jpg" border="0">
</div>

 

 

 

 

 

 

 

 

2.header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>


<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/initial.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/table.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/button.css">

 

 

 

 

 

 

 

 

3. top_inc.jsp

<%@page import="java.util.Date"%>
<%@ 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" %>
<fmt:requestEncoding value="utf-8"/>    

<jsp:useBean id="nows" class="java.util.Date"/>
<%--
Date nows = new Date();
--%>

<div style="width: 100%;height: 53px; border-bottom: 1px solid #5e5e5e">
	<div style="width: 100%; height: 100%; clear: both; display: inline-block; ">
	
	<div id="_title_image" style="width: 30%; float: left; display: inline;">
		<img alt="" src="./image/bbslogo1.jpg" style="height: 53px">
	</div>
	
	<div id="_title_today" style="width: 70%; float: left; text-align: right;">
		<div style="position: relative; top: 27px">
			
			<c:if test="${login.id ne '' }">
				<a href="logout.do" title="로그아웃">[로그아웃]</a>&nbsp;&nbsp;&nbsp;
			</c:if>
			
			<c:if test="${login.name ne ''}">
				[${login.name }]님 환영합니다
			</c:if>
			
			<fmt:formatDate value="${nows }" var="now" pattern="yyyy/MM/dd"/>
			${now }
		
		</div>	
	</div>
	
	</div>
</div>

 

 

 

 

 

 

 

 

 

4.top_menu.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<div id="top_menu_wrap">
	<div id="_top_menu">
	
		<ul class="navi">
			<li><a href="bbslist.do" title="답변형 게시판">Home</a></li>
			<li><a href="bbslist.do" title="답변형 게시판">게시판</a></li>
		</ul>	
	</div>
</div>

 

 

 

 

 

 

 

view-> login->

1. login.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"%>
<fmt:requestEncoding value="utf-8"/>      
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css" />  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>

<!-- cookie -->
<script src="http://lab.alexcican.com/set_cookies/cookie.js" type="text/javascript" ></script>

<style type="text/css">
#login_wrap {
	margin:10px;
}
#login_wrap th {
	font-weight:bold;
}
#main_wrap { 
	width:800px; 
	margin-left:auto; 
	margin-right:auto; padding:0px; 
}			
#content_wrap { 
	width: 100%; 
	height: 500px; 
	background-image:url("image/backa.jpg"); 
	background-repeat:no-repeat; 
	background-position:top center;  
}
			
.login_title_warp {
	width:500px; 
	color:#FFFFFF; 
	text-align:center; 
	background-color:#3e5fba; 
	border:solid 1px #EFEFEF; 
	font-weight:bold; 
	height:60px;
}

/* table셋팅 */
.content_table { width:98%; border-bottom:1px solid #EFEFEF; border-right:1px solid #EFEFEF; border-collapse:collapse; margin-left:auto; margin-right:auto;  clear:both; }
.content_table td, .content_table th { text-align:center; border-top:1px solid #EFEFEF; border-left:1px solid #EFEFEF; padding:0.3em; }
.content_table th { background-color:#4D6BB3; color:#FFFFFF; line-height: 1.7em; font-weight:normal;}
.content_table td { padding-left:5px; text-align:left; line-height: 1.7em; }
.content_table td.contents { width:100%; height:400px; overflow:auto; }
.content_table th, .content_table td { vertical-align:middle; }

.content_table select { height:19px; border:#CCCCCC solid 1px; vertical-align:middle; line-height: 1.8em; padding-left:0px; }
.content_table select option { margin-right:10px; }

</style>

</head>
<body>

<div id="main_wrap">
	<div id="middle_wrap">
		<div id="content_wrap">
			
			<div style="width: 502px; height: 166px; margin-left: auto; margin-right: auto;
						position: relative; top: 100px;">
								
			<div class="login_title_warp">
				<div style="margin-top: 15px">
					<h2>My Home Page</h2>
				</div>			
			</div>
			
			<div id="login_wrap">
				
				<form action="loginAf.do" name="frmFrom" id="_frmForm" method="post">
					
					<table class="content_table" style="width: 75%">
					<colgroup>
						<col style="width:30%">
						<col style="width:70%">
					</colgroup>
					
					<tr>
						<th style="background: #eeeeee; color:#3e5fba">아이디</th>
						<td>&nbsp;<input type="text" id="_userid" name="id" data-msg="ID를 "
									size="20px" title="아이디" style="border: 1px solid #dddddd" placeholder="ID">
							<input type="checkbox" id="chk_save_id">ID 저장
						</td>
					</tr>
					
					<tr>
						<th style="background: #eeeeee; color:#3e5fba">패스워드</th>
						<td>&nbsp;<input type="text" id="_pwd" name="pwd" data-msg="Password를 "
									size="20px" title="패스워드" style="border: 1px solid #dddddd" placeholder="Password">							
						</td>					
					</tr>
					
					<tr>
						<td colspan="2" style="height: 20px; text-align: center;">
						<span>
							<a href="#none" id="_btnLogin" title="로그인">
								<img alt="" src="./image/login_btn.jpg">
							</a>
							
							<a href="#none" id="_btnRegi" title="회원가입">
								<img alt="" src="./image/regi.jpg">
							</a>						
						</span>
						</td>					
					</tr>						
					</table>				
				</form>			
			</div>
			</div>		
		</div>	
	</div>
</div>

<script type="text/javascript">
$("#_btnLogin").click(function(){
	//alert("login click");

	if($("#_userid").val().trim() == ""){
		alert($("#_userid").attr("data-msg") + "입력해 주십시오");
		$("#_userid").focus();
	}
	else if($("#_pwd").val().trim() == ""){
		alert("Password를 입력해 주십시오");
		$("#_pwd").focus();
	}
	else{
		$("#_frmForm").attr({"action":"loginAf.do", "target":"_self"}).submit();
	}	
});

let user_id = $.cookie("user_id");
if(user_id != null){
	//alert("쿠키 있음");
	$("#_userid").val( user_id );
	$("#chk_save_id").attr("checked", "checked");	
}

$("#chk_save_id").click(function(){

	if( $("#chk_save_id").is(":checked") ){	// 첵크 되었을 때
		if( $("#_userid").val().trim() == ""){
			alert("id를 입력해 주십시오");
			$("#chk_save_id").prop("checked", false);
		}
		else{
			$.cookie("user_id", $("#_userid").val(), { expires:356, path:'/' });
		}
	}
	else{
		alert("쿠키 삭제");
		$.removeCookie("user_id", {path:'/'});
	}	
});

$("#_btnRegi").click(function(){
	location.href = "regi.do";
});




</script>


</body>
</html>

 

 

 

 

 

 

 

views->bbs->

1. bbslist.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String choice = (String)request.getAttribute("choice");
	if(choice == null) choice = "";
	
	String searchWord = (String)request.getAttribute("searchWord");
	if(searchWord == null) searchWord = ""; 
%>
<script>
let choice = "<%=choice %>";
let searchWord = "<%=searchWord %>";
$(document).ready(function(){
	$("#_choice").val(choice);
	//$("#_searchWord").val(searchWord);

	document.frmForm1.searchWord.value = searchWord;
});
</script>



<!-- 검색 -->
<div class="box_border" style="margin-top: 5px; margin-bottom: 10px">

<form action="" name="frmForm1" id="_frmFormSearch" method="get">

<table style="margin-left: auto; margin-right: auto; margin-top: 3px; margin-bottom: 3px">
<tr>
	<td>검색</td>
	<td style="padding-left: 5px">
		<select id="_choice" name="choice">
			<option value="" selected="selected">선택</option>
			<option value="title">제목</option>
			<option value="content">내용</option>
			<option value="writer">작성자</option>		
		</select>
	</td>
	<td style="padding-left: 5px">
		<input type="text" id="_searchWord" name="searchWord">		
	</td>
	<td style="padding-left: 5px">
		<span class="button blue">
			<button type="button" id="btnSearch">검색</button>
		</span>
	</td>
</tr>
</table>

<!-- search 를 눌렀을 때 같이 날라가야해서 추가 기입이 필요  -->
<input type="hidden" name="pageNumber" id="_pageNumber" value="${(empty pageNumber)?0:pageNumber }">
<input type="hidden" name="recordCountPerPage" id="_recordCountPerPage" value="${(empty recordCountPerPage)?0:recordCountPerPage }">
</form>

</div>


<!-- paging 생성!! -->








<!-- arrow class 생성 -->
<jsp:useBean id="ubbs" class="bit.com.a.util.BbsArrow" />

<table class="list_table" style="width: 85%">
<colgroup>
	<col style="width:70px">
	<col style="width:auto">
	<col style="width:100px">
</colgroup>

<thead>
	<tr>
		<th>번호</th><th>제목</th><th>작성자</th>
	</tr>
</thead>

<tbody>
	<c:if test="${empty bbslist }">
	<tr>
		<td colspan="3">작성된 글이 없습니다</td>		
	</tr>	
	</c:if>


	<c:forEach items="${bbslist }" var="bbs" varStatus="vs">
	
		<!-- arrow를 setting -->
		<jsp:setProperty property="depth" name="ubbs" value="${bbs.depth }"/>
		
		<tr class="_hover_tr">
			<td>${vs.count }</td>
			<td style="text-align: left;">
				<!-- arrow를 출력 -->
				<jsp:getProperty property="arrow" name="ubbs"/>
				
				<c:if test="${bbs.del eq 1}">
					***이 글은 관리자에 의해서 삭제 되었습니다***
				</c:if>
				<c:if test="${bbs.del eq 0}">
					<a href="bbsdetail.do?seq=${bbs.seq }">
						${bbs.title}
					</a>					
				</c:if>			
			</td>
			<td>${bbs.id}</td>
		</tr>		
	</c:forEach>
</tbody>
</table>
<br>

<!-- Paging!!!!!!  -->
<div id="paging_wrap">
	<jsp:include page="/WEB-INF/views/bbs/paging.jsp" flush="false">
		<jsp:param value="${totalRecordCount }" name="totalRecordCount"/>
		<jsp:param value="${pageNumber }" name="pageNumber"/>
		<jsp:param value="${pageCountPerScreen }" name="pageCountPerScreen"/>
		<jsp:param value="${recordCountPerPage }" name="recordCountPerPage"/>
		
	</jsp:include>
</div>

<script>
function goPage( pageNumber ){
	$("#_pageNumber").val( pageNumber );
	$("#_frmFormSearch").attr("action","bbslist.do").submit();
}

$("#btnSearch").click(function(){
	//alert("써취 ");
	$("#_frmFormSearch").attr("action","bbslist.do").submit();
});
</script>

 

 

 

 

 

 

 

 

 

 

src->bit.com.a.controller->

1. MemberBontroller.java

package bit.com.a.controller;

import java.util.Date;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import bit.com.a.dto.MemberDto;
import bit.com.a.service.MemberService;

@Controller
public class MemberController {
	
	@Autowired
	MemberService service;

	@RequestMapping(value = "login.do", method = RequestMethod.GET)
	public String login() {
		System.out.println("MemberController login()");		
		return "login.tiles";
	}
	
	@RequestMapping(value = "regi.do", method = RequestMethod.GET)
	public String regi() {
		System.out.println("MemberController regi()");
		return "regi.tiles";
	}
	
	@ResponseBody
	@RequestMapping(value = "getId.do", method = RequestMethod.POST)
	public String getId(MemberDto mem) {
		System.out.println("MemberController getId()");
		
		int count = service.getId(mem);
		String msg = "";
		if(count > 0) {
			msg = "YES";
		}else {
			msg = "NO";
		}
		return msg;
	}
	
	@RequestMapping(value = "regiAf.do", method=RequestMethod.POST)
	public String regiAf(MemberDto dto) {
		System.out.println("MemberController regiAf " + new Date());
		
		boolean b = service.addmember(dto);
		if(b) {
			System.out.println("회원 가입되었습니다 " + new Date());
			return "login.tiles";
		}
		System.out.println("가입되지 않았습니다 " + new Date());
		
		return "regi.tiles";
	}
	
	@RequestMapping(value = "loginAf.do", method=RequestMethod.POST)
	public String loginAf(MemberDto dto, HttpServletRequest req) {
		System.out.println("MemberController loginAf()");
		
		MemberDto login = service.login(dto);
		
		if(login != null && !login.getId().equals("")) {
			// session
			req.getSession().setAttribute("login", login);
			req.getSession().setMaxInactiveInterval(60 * 60 * 2);
			
			return "redirect:/bbslist.do";
		}
		else {
			return "redirect:/login.do";
		}		
	}	
}

 

저작자표시 변경금지 (새창열림)

'Spring' 카테고리의 다른 글

투표  (0) 2020.09.15
자료실 스프링  (0) 2020.09.14
ajax  (0) 2020.09.09
페이지네이션 pagination 파일  (0) 2020.09.09
페이징/서치/search jsp로 불러오기  (0) 2020.09.09

'Spring' Related Articles

티스토리툴바