동적 방식 - Layout 구성

김유정·2023년 12월 8일

서블릿-퀴즈

목록 보기

10/11

자기자신한테 요청하고, 자기자신한테 응답한다.
링크가 걸리는 곳 -> nav
응답을 만드는 곳 -> content
하지만 html의 뼈대를 모두 가지고 있는 건 layout.jsp
즉 전체 페이지이다.
그래서 자기자신(전체페이지)에 요청한다.

내용물을 뿌리고 연산하는 건 content안에서 한다.
조각페이지들이 request를 다 들고 있으므로
어디에서든 request를 다 쓸 수 있다.

layout.jsp

<%@page import="java.util.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>레이아웃 - 전체 페이지</title>
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
	integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
	crossorigin="anonymous">
<script
	src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
	integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
	crossorigin="anonymous"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
	integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
	crossorigin="anonymous"></script>
<style>
header {height: 80px;}

nav {height: 50px}

.content {min-height: 500px;}

footer {height: 50px}
</style>

</head>
<body>


	<div id="wrap" class="container">
		<header class="d-flex align-items-center justify-content-center">
			<jsp:include page="header.jsp" />
		</header>
		<nav class="bg-danger d-flex align-items-center">
			<jsp:include page="nav.jsp" />
		</nav>
		<section class="content">
			<jsp:include page="content.jsp" />
		</section>
		<footer class="d-flex align-items-center justify-content-center">
			<jsp:include page="footer.jsp" />
		</footer>
	</div>
</body>
</html>

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<h2 class="text-danger font-weight-bold">Sk Broadband IPTV</h2>

nav.jsp

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

	<ul class="nav nav-fill w-100">
		<!-- nav nav-fill 세트. 메뉴를 nav에 가득 채운다. --> 
		<li class="nav-item"><a href="/lesson03/quiz01/layout.jsp" class="nav-link text-white">전체</a></li>
		<li class="nav-item"><a href="/lesson03/quiz01/layout.jsp?category=지상파" class="nav-link text-white">지상파</a></li>
		<li class="nav-item"><a href="/lesson03/quiz01/layout.jsp?category=드라마" class="nav-link text-white">드라마</a></li>
		<li class="nav-item"><a href="/lesson03/quiz01/layout.jsp?category=예능" class="nav-link text-white">예능</a></li>
		<li class="nav-item"><a href="/lesson03/quiz01/layout.jsp?category=영화" class="nav-link text-white">영화</a></li>
		<li class="nav-item"><a href="/lesson03/quiz01/layout.jsp?category=스포츠" class="nav-link text-white">스포츠</a></li>
	</ul>

content.jsp

리스트이면 여러건
map의 개수 = tr의 개수

<%@page import="java.util.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	List<Map<String, String>> list = new ArrayList<>();
	Map<String, String> map = new HashMap<String, String>() {
		{
			put("ch", "5");
			put("name", "SBS");
			put("category", "지상파");
		}
	};
	list.add(map);
	map = new HashMap<String, String>() {
		{
			put("ch", "7");
			put("name", "KBS2");
			put("category", "지상파");
		}
	};
	list.add(map);
	map = new HashMap<String, String>() {
		{
			put("ch", "9");
			put("name", "KBS1");
			put("category", "지상파");
		}
	};
	list.add(map);
	map = new HashMap<String, String>() {
		{
			put("ch", "11");
			put("name", "MBC");
			put("category", "지상파");
		}
	};
	list.add(map);

	map = new HashMap<String, String>() {
		{
			put("ch", "54");
			put("name", "OCN");
			put("category", "영화");
		}
	};
	list.add(map);
	map = new HashMap<String, String>() {
		{
			put("ch", "56");
			put("name", "Screen");
			put("category", "영화");
		}
	};
	list.add(map);
	map = new HashMap<String, String>() {
		{
			put("ch", "57");
			put("name", "Mplex");
			put("category", "영화");
		}
	};
	list.add(map);

	map = new HashMap<String, String>() {
		{
			put("ch", "30");
			put("name", "KBS 드라마");
			put("category", "드라마");
		}
	};
	list.add(map);
	map = new HashMap<String, String>() {
		{
			put("ch", "32");
			put("name", "MBC 드라마");
			put("category", "드라마");
		}
	};
	list.add(map);
	map = new HashMap<String, String>() {
		{
			put("ch", "34");
			put("name", "Olive");
			put("category", "드라마");
		}
	};
	list.add(map);

	map = new HashMap<String, String>() {
		{
			put("ch", "3");
			put("name", "tvN");
			put("category", "예능");
		}
	};
	list.add(map);
	map = new HashMap<String, String>() {
		{
			put("ch", "28");
			put("name", "MBC Every1");
			put("category", "예능");
		}
	};
	list.add(map);
	map = new HashMap<String, String>() {
		{
			put("ch", "48");
			put("name", "JTBC2");
			put("category", "예능");
		}
	};
	list.add(map);
	map = new HashMap<String, String>() {
		{
			put("ch", "49");
			put("name", "E채널");
			put("category", "예능");
		}
	};
	list.add(map);

	map = new HashMap<String, String>() {
		{
			put("ch", "120");
			put("name", "SPOTV");
			put("category", "스포츠");
		}
	};
	list.add(map);
	map = new HashMap<String, String>() {
		{
			put("ch", "121");
			put("name", "KBSN 스포츠");
			put("category", "스포츠");
		}
	};
	list.add(map);
	%>

필요한 조각페이지에만 정의한다.
전체페이지에서는 지워도 된다.

	
	<table class="table text-center">
		<thead>
			<tr>
				<th>채널</th>
				<th>채널명</th>
				<th>카테고리</th>
			</tr>
		</thead>
		<%
        String category = request.getParameter("category");
        
		for (Map<String, String> item : list) {
			// 카테고리가 null일 때 (전체) 또는 카테고리명이 일치할 때
			if (category == null || item.get("category").equals(category)) {
				
		%>
		<tr>
			<td><%=item.get("ch")%></td>
			<td><%=item.get("name")%></td>
			<td><%=item.get("category")%></td>
		</tr>
		<%
			}
		}
		%>
	</table>

footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<small>Copyright © Sk Broadband IPTV 2023</small>

김유정

열심히 하자

동적 방식 - Layout 구성

서블릿-퀴즈

0개의 댓글