🌱 오늘의 주제 : 왕초보도 따라 할 수 있는 기본 메뉴바 사이트 만들기
🌱 왕초보도 따라 할 수 있는 기본 메뉴바 사이트 만들기 (JSP 템플릿 구성)
https://youtu.be/SmvFzPtgRyo
Sk Broadband IPTV.mp4
0.37MB
🌱 동적 방식 - JSP 템플릿 구성
Layout 구성
- 각 메뉴에 해당하는 카테고리에 맞게 목록으로 구성.
- Layout을 나누어 template으로 구성.
<%@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>SK Broadband</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; font-size: 40px;}
.headerText1 {color : #e2703a;}
nav {height: 50px;}
.contents {height: 850px;} /* min-hight 하면 최소 높이 지정.*/
footer {height: 50px;}
</style>
</head>
<body>
<div id="wrap" class=" container text-center">
<header class="d-flex font-weight-bold align-items-center justify-content-center">
<jsp:include page="header.jsp" />
</header>
<!-- align-items-center : 수직기준 가운데 정렬 -->
<nav class="bg-danger d-flex justify-content-between align-items-center">
<jsp:include page="menu.jsp" />
</nav>
<section class=" contents">
<jsp:include page="contents.jsp" />
</section>
<footer class=" d-flex justify-content-center align-items-center">
<jsp:include page="footer.jsp" />
</footer>
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<span class="text-danger mr-3">Sk </span> <span class="headerText1">Broadband</span> <span class="text-danger ml-3">IP</span><span class="text-danger">TV</span>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<ul class="nav nav-fill w-100">
<!-- nav-item쓰면 점이 없어짐. nav-fill : 부모가 물려준 가로 값 다 채워짐. -->
<li class="nav-item"><a href="/lesson03/quiz01/template.jsp"
class="nav-link text-light font-weight-bold">전체</a></li>
<li class="nav-item"><a href="/lesson03/quiz01/template.jsp?category=지상파"
class="nav-link text-light font-weight-bold">지상파</a></li>
<li class="nav-item"><a href="/lesson03/quiz01/template.jsp?category=드라마"
class="nav-link text-light font-weight-bold">드라마</a></li>
<li class="nav-item"><a href="/lesson03/quiz01/template.jsp?category=예능"
class="nav-link text-light font-weight-bold">예능</a></li>
<li class="nav-item"><a href="/lesson03/quiz01/template.jsp?category=영화"
class="nav-link text-light font-weight-bold">영화</a></li>
<li class="nav-item"><a href="/lesson03/quiz01/template.jsp?category=스포츠"
class="nav-link text-light font-weight-bold">스포츠</a></li>
</ul>
<%@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">
<thead>
<tr>
<th>채널</th>
<th>채널명</th>
<th>카테고리</th>
</tr>
</thead>
<tbody>
<%
String category = request.getParameter("category");
// out.print(category);
for (Map<String, String> items : list) {
// 전체 (category가 null) 또는 파라미터와 일치되는 카테고리 일 때
if (category == null || items.get("category").equals(category)) {
%>
<tr>
<td><%=items.get("ch")%></td>
<td><%=items.get("name")%></td>
<td><%=items.get("category")%></td>
</tr>
<%
}
}
%>
</tbody>
</table>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<small class="footer-text text-secondary">Copyright 2023. marondal All Rights Reserved.</small>
