🌱 오늘의 주제 : Servlet - 왕초보도 따라 할 수 있는 Melong 음악 사이트 만들기
🌱 Servlet - 왕초보도 따라 할 수 있는 Melong 음악 사이트 만들기 (JAVA, HTML, CSS, Servlet, JSP 템플릿 구성)
https://youtu.be/fT8A6TAOtdI
🌱 JSP 템플릿 구성을 이용한 기능
Layout 구성 2
- 아래와 같이 아이유 노래 목록을 보여주는 Layout을 나누어서 template 로 구성으로 만드세요.
- 아래 주어진 데이터를 활용해서 화면에 표시하세요.
- 리스트에서 노래제목을 클릭하면 해당 노래 세부사항을 표시하는 화면으로 이동하세요.
- 검색어를 입력하면 해당하는 노래 제목이 있을 경우 해당하는 노래 세부사항 페이지로 이동하세요.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>노래 리스트</title>
<!-- 부트스트랩 검색할 때 4.6버전으로 바꿔서 검색하랏! -->
<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; padding-top:40px; padding-bottom:20px;}
a, a:hover {text-decoration: 100px;}
nav {height: 50px;}
section {height: 800px;}
.article1 {height:230px; border: 4px solid green;}
.article2 {height:500px;}
footer {height: 50px;}
</style>
</head>
<body>
<div id="wrap" class="container">
<header class=" d-flex align-items-center">
<jsp:include page="list_header.jsp" />
</header>
<nav class=" d-flex align-items-center">
<jsp:include page="list_menu.jsp" />
</nav>
<section class="">
<jsp:include page="list_content.jsp" />
</section>
<footer class=" d-flex align-items-center">
<jsp:include page="list_footer.jsp" />
</footer>
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 로고 영역 -->
<h1>
<a href="/lesson03/quiz02/list_layout.jsp" class="melongText text-success">Melong</a>
</h1>
<form method = "get" action="/lesson03/quiz02/info_layout.jsp"> <!-- 검색은 주소에 정보 보여도 상관없어서 get. -->
<div class="input-group d-flex ml-5">
<input name="search" type="text" class="form-control " placeholder="홍유리를 검색해보세요.">
<button class="btn btn-success h-30" type="submit" >검색</button>
</div>
</form>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<ul class="nav ml-2">
<li class="nav-item"><a href="#"
class="nav-link text-dark font-weight-bold">멜롱챠트</a></li>
<li class="nav-item"><a href="#"
class="nav-link text-dark font-weight-bold">최신음악</a></li>
<li class="nav-item"><a href="#"
class="nav-link text-dark font-weight-bold">장르음악</a></li>
<li class="nav-item"><a href="#"
class="nav-link text-dark font-weight-bold">멜롱DJ</a></li>
<li class="nav-item"><a href="#"
class="nav-link text-dark font-weight-bold">뮤직어워드</a></li>
</ul>
<%@page import="java.util.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// 아티스트 정보
Map<String, Object> artistInfo = new HashMap<>();
artistInfo.put("name", "아이유");
artistInfo.put("debute", 2008);
artistInfo.put("agency", "EDAM엔터테인먼트");
artistInfo.put("photo", "http://image.genie.co.kr/Y/IMAGE/IMG_ALBUM/081/867/444/81867444_1616662460652_1_600x600.JPG");
// 아이유 노래 리스트
List<Map<String, Object>> musicList = new ArrayList<>();
Map<String, Object> musicInfo = new HashMap<>();
musicInfo.put("id", 1);
musicInfo.put("title", "팔레트");
musicInfo.put("album", "Palette");
musicInfo.put("singer", "아이유");
musicInfo.put("thumbnail", "https://upload.wikimedia.org/wikipedia/ko/b/b6/IU_Palette_final.jpg");
musicInfo.put("time", 217);
musicInfo.put("composer", "아이유");
musicInfo.put("lyricist", "아이유");
musicList.add(musicInfo);
musicInfo = new HashMap<>();
musicInfo.put("id", 2);
musicInfo.put("title", "좋은날");
musicInfo.put("album", "Real");
musicInfo.put("singer", "아이유");
musicInfo.put("thumbnail", "https://upload.wikimedia.org/wikipedia/ko/3/3c/IU_-_Real.jpg");
musicInfo.put("time", 233);
musicInfo.put("composer", "이민수");
musicInfo.put("lyricist", "김이나");
musicList.add(musicInfo);
musicInfo = new HashMap<>();
musicInfo.put("id", 3);
musicInfo.put("title", "밤편지");
musicInfo.put("album", "palette");
musicInfo.put("singer", "아이유");
musicInfo.put("thumbnail", "https://upload.wikimedia.org/wikipedia/ko/b/b6/IU_Palette_final.jpg");
musicInfo.put("time", 253);
musicInfo.put("composer", "제휘,김희원");
musicInfo.put("lyricist", "아이유");
musicList.add(musicInfo);
musicInfo = new HashMap<>();
musicInfo.put("id", 4);
musicInfo.put("title", "삐삐");
musicInfo.put("album", "삐삐");
musicInfo.put("singer", "아이유");
musicInfo.put("thumbnail",
"https://image.genie.co.kr/Y/IMAGE/IMG_ALBUM/081/111/535/81111535_1539157728291_1_600x600.JPG");
musicInfo.put("time", 194);
musicInfo.put("composer", "이종훈");
musicInfo.put("lyricist", "아이유");
musicList.add(musicInfo);
musicInfo = new HashMap<>();
musicInfo.put("id", 5);
musicInfo.put("title", "스물셋");
musicInfo.put("album", "CHAT-SHIRE");
musicInfo.put("singer", "아이유");
musicInfo.put("thumbnail",
"https://image.genie.co.kr/Y/IMAGE/IMG_ALBUM/080/724/877/80724877_1445520704274_1_600x600.JPG");
musicInfo.put("time", 194);
musicInfo.put("composer", "아이유,이종훈,이채규");
musicInfo.put("lyricist", "아이유");
musicList.add(musicInfo);
musicInfo = new HashMap<>();
musicInfo.put("id", 6);
musicInfo.put("title", "Blueming");
musicInfo.put("album", "Love poem");
musicInfo.put("singer", "아이유");
musicInfo.put("thumbnail",
"https://upload.wikimedia.org/wikipedia/ko/6/65/%EC%95%84%EC%9D%B4%EC%9C%A0_-_Love_poem.jpg");
musicInfo.put("time", 217);
musicInfo.put("composer", "아이유,이종훈,이채규");
musicInfo.put("lyricist", "아이유");
musicList.add(musicInfo);
%>
<!-- 아티스트 정보 영역 -->
<!-- border 만들기 : class="border border-success" -->
<article class="article1 d-flex">
<div class="d-flex align-items-start mt-3">
<img src="<%=artistInfo.get("photo")%>" alt="아이유 사진" width="190" height="190" class="ml-3">
<div class="ml-4 ">
<h1 class="font-weight-bold"><%=artistInfo.get("name")%></h1>
<div><%=artistInfo.get("agency")%></div>
<div><%=artistInfo.get("debute")%>데뷔
</div>
</div>
</div>
</article>
<article class="article2 ">
<!-- 곡 목록 -->
<h2 class="d-flex pt-5 pl-2">곡 목록</h2>
<table class="table text-center mt-2">
<thead>
<%-- row class를 설정하면 12칸 기준으로 영역을 잡을 수 있다.??????? --%>
<tr>
<th class="col-2">no</th>
<th class="col-4">제목</th>
<th class="col-6">앨범</th>
</tr>
</thead>
<tbody>
<%
for (Map<String, Object> items : musicList) {
%>
<tr>
<td class="col-2"><%=items.get("id")%></td>
<td class="col-4"><a class="text-success font-weight-bold"
href="/lesson03/quiz02/info_layout.jsp?id=<%=items.get("id")%>"><%=items.get("title")%></a></td>
<td class="col-6"><%=items.get("album")%></td>
</tr>
<%
}
%>
</tbody>
</table>
</article>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<address class="ml-4 text-secondary">Copyright 2023. melong All Rights Reserved.</address>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>노래 세부사항</title>
<!-- 부트스트랩 검색할 때 4.6버전으로 바꿔서 검색하랏! -->
<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; padding-top:70px; padding-bottom:20px;}
a, a:hover {text-decoration: 100px;}
nav {height: 50px;}
section {height: 550px;}
.article1 {height:230px; border: 4px solid green;}
.article2 {height:300px;}
.music-info-text {font-size: 15px;}
footer {height: 50px;}
</style>
</head>
<body>
<div id="wrap" class="container">
<header class=" d-flex align-items-center">
<jsp:include page="list_header.jsp" />
</header>
<nav class=" d-flex align-items-center">
<jsp:include page="list_menu.jsp" />
</nav>
<section class="">
<jsp:include page="info_content.jsp" />
</section>
<footer class=" d-flex align-items-center">
<jsp:include page="list_footer.jsp" />
</footer>
</div>
</body>
</html>
<%@page import="java.util.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// 아티스트 정보
Map<String, Object> artistInfo = new HashMap<>();
artistInfo.put("name", "아이유");
artistInfo.put("debute", 2008);
artistInfo.put("agency", "EDAM엔터테인먼트");
artistInfo.put("photo", "http://image.genie.co.kr/Y/IMAGE/IMG_ALBUM/081/867/444/81867444_1616662460652_1_600x600.JPG");
// 아이유 노래 리스트
List<Map<String, Object>> musicList = new ArrayList<>();
Map<String, Object> musicInfo = new HashMap<>();
musicInfo.put("id", 1);
musicInfo.put("title", "팔레트");
musicInfo.put("album", "Palette");
musicInfo.put("singer", "아이유");
musicInfo.put("thumbnail", "https://upload.wikimedia.org/wikipedia/ko/b/b6/IU_Palette_final.jpg");
musicInfo.put("time", 217);
musicInfo.put("composer", "아이유");
musicInfo.put("lyricist", "아이유");
musicList.add(musicInfo);
musicInfo = new HashMap<>();
musicInfo.put("id", 2);
musicInfo.put("title", "좋은날");
musicInfo.put("album", "Real");
musicInfo.put("singer", "아이유");
musicInfo.put("thumbnail", "https://upload.wikimedia.org/wikipedia/ko/3/3c/IU_-_Real.jpg");
musicInfo.put("time", 233);
musicInfo.put("composer", "이민수");
musicInfo.put("lyricist", "김이나");
musicList.add(musicInfo);
musicInfo = new HashMap<>();
musicInfo.put("id", 3);
musicInfo.put("title", "밤편지");
musicInfo.put("album", "palette");
musicInfo.put("singer", "아이유");
musicInfo.put("thumbnail", "https://upload.wikimedia.org/wikipedia/ko/b/b6/IU_Palette_final.jpg");
musicInfo.put("time", 253);
musicInfo.put("composer", "제휘,김희원");
musicInfo.put("lyricist", "아이유");
musicList.add(musicInfo);
musicInfo = new HashMap<>();
musicInfo.put("id", 4);
musicInfo.put("title", "삐삐");
musicInfo.put("album", "삐삐");
musicInfo.put("singer", "아이유");
musicInfo.put("thumbnail",
"https://image.genie.co.kr/Y/IMAGE/IMG_ALBUM/081/111/535/81111535_1539157728291_1_600x600.JPG");
musicInfo.put("time", 194);
musicInfo.put("composer", "이종훈");
musicInfo.put("lyricist", "아이유");
musicList.add(musicInfo);
musicInfo = new HashMap<>();
musicInfo.put("id", 5);
musicInfo.put("title", "스물셋");
musicInfo.put("album", "CHAT-SHIRE");
musicInfo.put("singer", "아이유");
musicInfo.put("thumbnail",
"https://image.genie.co.kr/Y/IMAGE/IMG_ALBUM/080/724/877/80724877_1445520704274_1_600x600.JPG");
musicInfo.put("time", 194);
musicInfo.put("composer", "아이유,이종훈,이채규");
musicInfo.put("lyricist", "아이유");
musicList.add(musicInfo);
musicInfo = new HashMap<>();
musicInfo.put("id", 6);
musicInfo.put("title", "Blueming");
musicInfo.put("album", "Love poem");
musicInfo.put("singer", "아이유");
musicInfo.put("thumbnail",
"https://upload.wikimedia.org/wikipedia/ko/6/65/%EC%95%84%EC%9D%B4%EC%9C%A0_-_Love_poem.jpg");
musicInfo.put("time", 217);
musicInfo.put("composer", "아이유,이종훈,이채규");
musicInfo.put("lyricist", "아이유");
musicList.add(musicInfo);
%>
<%
Map<String, Object> target = null;
// id와 search는 null값이 들어올 수 있기 때문에, 각각 코드를 나눠서 구현해야한다. 합쳐서 구현하면, 둘 중 하나는 Null이 들어갈 수 있기에 합쳐서 구현 불가.
// 1. id로 넘어오는 경우
if (request.getParameter("id") != null) { // 아이디가 비어있지 않을때만!!!!!!
int id = Integer.valueOf(request.getParameter("id"));
for(Map<String, Object> item : musicList) {
if((int)item.get("id") == id ) {
target= item;
break; // 반복문 조금만 돌게 된다.
}
}
}
// 2. search로 넘어온 경우
if (request.getParameter("search") != null) {
String search = request.getParameter("search");
for (Map<String, Object> item : musicList) {
if (item.get("title").equals(search)) {
target = item;
break;
}
}
}
%>
<%
if (target != null) {
%>
<!-- 아티스트 정보 영역 -->
<!-- border 만들기 : class="border border-success" -->
<h3 class="mt-3">곡 정보</h3>
<article class="article1 d-flex">
<div class="d-flex align-items-start mt-3">
<img
src="<%= target.get("thumbnail") %>"
alt="곡 앨범 사진" width="190" height="190" class="ml-3">
<div class="ml-4 ">
<div class="display-4 music-info-title"><%=target.get("title")%></div>
<div class="text-success font-weight-bold mb-2"><%=target.get("singer") %></div>
<div class="music-info-text text-secondary d-flex">
<div class= "mr-3">
<div>앨범</div>
<div>재생시간</div>
<div>작곡가</div>
<div>작사가</div>
</div>
<div>
<div><%=target.get("album")%></div>
<div><%=(int)target.get("time") / 60 %>:<%=(int)target.get("time") % 60 %></div>
<div><%=target.get("composer")%></div>
<div><%=target.get("lyricist")%></div>
</div>
</div>
</div>
</div>
</article>
<article class="article2 ">
<h3 class="pt-5">가사</h3>
<hr>
<div>가사 정보 없음</div>
<hr>
</article>
<%
} else {
%>
<div class="mt-5 ml-5">검색 정보가 없습니다.</div>
<%
}
%>
