본문 바로가기
스마트인재개발원/Spring

[Spring]게시판 만들기(16) - 레이아웃 따로 만들기

by 죠졍니 2022. 10. 22.
728x90
반응형
SMALL

글쓰기 페이지 눌러도 양 옆 레이아웃 사라지지 않게 하기

 

1. left.jsp 생성

 

left.jsp에 로그인에 필요한 html만 삽입 

 

2.list.jsp에서 col-lg-2 안에 있는 div 잘라오기

 

 

3. 상단에 taglib두개 복사붙여넣기

 

 

 

4. include사용하여 list.jsp에 잘라갔던 부분에 left.jsp 불러오기

 

2. right.jsp 생성

 

left.jsp 복사하여 right.jsp 만든 후, div태그 삭제 

list.jsp에서 col-lg-3 내에 div태그 잘라오기

 

 

빈 list.jsp에 right.jsp불러오기

 

 

template.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"%>

<!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://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script
	src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

	<h2>Spring MVC02</h2>
	<div class="card">
		<div class="card-header">
			<div class="jumbotron jumbotron-fluid">
				<div class="container">
					<h1>Bootstrap Tutorial</h1>
					<p>Bootstrap is the most popular HTML, CSS...</p>
				</div>
			</div>
		</div>
		<div class="card-body">
			<div class="row">
				<div class="col-lg-2">
					<jsp:include page="left.jsp" />
				</div>
				<div class="col-lg-2">
					<!-- 사용자 화면 -->
				</div>
				<div class="col-lg-3">
					<jsp:include page="right.jsp" />
				</div>
			</div>

		</div>

		<div class="card-footer">AI.BigData 취업역량강화_조정은</div>
	</div>
</body>
</html>

 

register.jsp에서

body부분을 잘라내고

template.jsp의 body를 붙여넣은 후

col-lg-7에 register.jsp에 있던 body를 붙여넣기

 

 

 

register.jsp코드

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


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script
	src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>


<script type="text/javascript">
	$(document).ready(function() {
		$("button").on("click", function(e) {
			var oper = $(this).data("oper"); //data-oper="reg"
			var frm = $("#frm"); //form을 선택함 + 변수 선언
			if (oper == "reg") {
				//form을 전송하는 코드
				frm.submit();

			} else if (oper == "reset") {
				//form초기화
				frm[0].reset();

			} else if (oper == "list") {
				location.href = "list.do";
			}
		});

	});
</script>
</head>
<body>

	<h2>Spring MVC02</h2>
	<div class="card">
		<div class="card-header">
			<div class="jumbotron jumbotron-fluid">
				<div class="container">
					<h1>Bootstrap Tutorial</h1>
					<p>Bootstrap is the most popular HTML, CSS...</p>
				</div>
			</div>
		</div>
		<div class="card-body">
			<div class="row">
				<div class="col-lg-2">
					<jsp:include page="left.jsp" />
				</div>
				<div class="col-lg-7">
					<!-- 사용자 화면 -->
					<div class="card" style="min-height: 500px; max-height: 1000px;">

						<div class="card-body">
						<h4 class="card-text">글 등록 화면</h4>
							<form id="frm" action="insert.do" method="post">
								<input type="hidden" name="memId" value="${m.memId}" />
								<div class="form-group">
									<label for="title">제목:</label> <input type="text"
										class="form-control" placeholder="Enter title" name="title">
								</div>
								<div class="form-group">
									<label for="content">내용:</label>
									<textarea rows="7" class="form-control" name="content"></textarea>
								</div>

								<div class="form-group">
									<label for="writer">작성자:</label> <input type="text"
										class="form-control" placeholder="Enter writer" name="writer"
										value="${m.memName}" readonly="readonly">
								</div>

								<button type="button" data-oper="reg"
									class="btn btn-sm btn-primary">등록</button>
								<button type="button" data-oper="reset"
									class="btn btn-sm btn-warning">취소</button>
								<button type="button" data-oper="list"
									class="btn btn-sm btn-success">목록</button>
							</form>
						</div>

					</div>


				</div>
				<div class="col-lg-3">
					<jsp:include page="right.jsp" />
				</div>
			</div>

		</div>

		<div class="card-footer">AI.BigData 취업역량강화_조정은</div>
	</div>
</body>
</html>

 

 

싱세보기 페이지도 동일하게 하기

: get.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"%>

<!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://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script
	src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<script type="text/javascript">
	$(document).ready(function() {
		$("button").on("click", function(e) {
			var oper = $(this).data("oper");
			var frm = $("#frm");
			if (oper == "update") {
				frm.attr("action", "updateForm.do");
			} else if (oper == "remove") {
				frm.attr("action", "remove.do");
				//frm.submit();
			} else if (oper == "list") {
				//attr(): attribute
				frm.attr("action", "list.do");
				//frm.submit();
			}
			frm.submit();
		});
	});
</script>


<body>
	<h2>Spring MVC02</h2>
	<div class="card">
		<div class="card-header">
			<div class="jumbotron jumbotron-fluid">
				<div class="container">
					<h1>Bootstrap Tutorial</h1>
					<p>Bootstrap is the most popular HTML, CSS...</p>
				</div>
			</div>
		</div>
		<div class="card-body">
			<div class="row">
				<div class="col-lg-2">
					<jsp:include page="left.jsp" />
				</div>
				<div class="col-lg-7">
					<!-- 사용자 화면 -->

					<div class="card" style="min-height: 500px; max-height: 1000px;">
						<div class="card-header">상세보기</div>
						<div class="card-body">
							<form id="frm">

								<input type="hidden" name="idx" value="${vo.idx}" />
								<div class="form-group">
									<label for="title">제목:</label> <input type="text"
										class="form-control" readonly="readonly" value="${vo.title}">
								</div>
								<div class="form-group">
									<label for="content">내용:</label>
									<textarea rows="7" class="form-control" readonly="readonly">${vo.content}</textarea>
								</div>

								<div class="form-group">
									<label for="writer">작성자:</label> <input type="text"
										class="form-control" readonly="readonly" value="${vo.writer}">
								</div>

								<button type="button" data-oper="update"
									class="btn btn-sm btn-primary">수정</button>
								<button type="button" data-oper="remove"
									class="btn btn-sm btn-warning">삭제</button>
								<button type="button" data-oper="list"
									class="btn btn-sm btn-success">목록</button>
							</form>
						</div>

					</div>

				</div>
				<div class="col-lg-3">
					<jsp:include page="right.jsp" />
				</div>
			</div>

		</div>

		<div class="card-footer">AI.BigData 취업역량강화_조정은</div>
	</div>

</body>
</html>

 

 

수정버튼도 동일하게 적용

update.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"%>

<!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://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script
	src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<script type="text/javascript">
	$(document).ready(function() {
		$("button").on("click", function(e) {
			var oper = $(this).data("oper");
			var frm = $("#frm");

			if (oper == "update") {
				frm.submit();

			} else if (oper == "reset") {
				frm[0].reset();

			} else if (oper == "list") {
				location.href = "list.do";

			}

		});
	});
</script>


<body>
	<h2>Spring MVC02</h2>
	<div class="card">
		<div class="card-header">
			<div class="jumbotron jumbotron-fluid">
				<div class="container">
					<h1>Bootstrap Tutorial</h1>
					<p>Bootstrap is the most popular HTML, CSS...</p>
				</div>
			</div>
		</div>
		<div class="card-body">
			<div class="row">
				<div class="col-lg-2">
					<jsp:include page="left.jsp" />
				</div>
				<div class="col-lg-7">
					<!-- 사용자 화면 -->

					<div class="card" style="min-height: 500px; max-height: 1000px;">
						<div class="card-body">
						<h4 class="card-title">수정하기 화면</h4>
							<form id="frm" action="update.do" method="post">

								<input type="hidden" name="idx" value="${vo.idx}" />
								<div class="form-group">
									<label for="title">제목:</label> <input type="text"
										class="form-control" name="title" value="${vo.title}">
								</div>
								<div class="form-group">
									<label for="content">내용:</label>
									<textarea rows="7" class="form-control" name="content">${vo.content}</textarea>
								</div>

								<div class="form-group">
									<label for="writer">작성자:</label> <input type="text"
										class="form-control" readonly="readonly" value="${vo.writer}">
								</div>

								<button type="button" data-oper="update"
									class="btn btn-sm btn-primary">수정</button>
								<button type="button" data-oper="reset"
									class="btn btn-sm btn-warning">취소</button>
								<button type="button" data-oper="list"
									class="btn btn-sm btn-success">목록</button>
							</form>
						</div>


					</div>
				</div>
				<div class="col-lg-3">
					<jsp:include page="right.jsp" />
				</div>
			</div>

		</div>

		<div class="card-footer">AI.BigData 취업역량강화_조정은</div>
	</div>

</body>
</html>

 

 

728x90
반응형
LIST
저작자표시

'스마트인재개발원 > Spring' 카테고리의 다른 글

[Spring]게시판 만들기(17) - 새로운 프로젝트 생성/ 게시판 답글 달기 기능1  (0) 2022.10.22
[Spring]게시판 만들기(16) - 게시판 수정,삭제 본인만 가능하게 하기  (0) 2022.10.22
[Spring]게시판 만들기(15) - 로그아웃 / 로그인 상태일 때만 글쓰기 버튼 등장 / 글쓰기 페이지 작성자에 내 이름 등록  (0) 2022.10.22
[Spring]게시판 만들기(14) - 로그인 시 로그인 성공화면 출력  (0) 2022.10.21
[Spring] 코드 다이어트 하는 법  (0) 2022.10.21

관련글

티스토리툴바