오늘 배운 것
- 이미지 모음 페이지 만들기
- 변화가 생기지 않을 header부분과 footer부분, 변화가 있을 내용부분을 분리시켜 효율적으로 관리 할 수 있도록 함
header 부분
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 현재위치에서 다른위치로 옮겨질 경우 경로가 바뀌는 경우를 대비해서 ${pageContext.request.contextPath}/ 경로 앞에 붙여준다. -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style.css">
<title>${param.title}</title>
</head>
<body>
<div class="headerWrapper">
<div class="header">
<img src="${pageContext.request.contextPath}/image/logo.png"/>
<span id="title"></span>
</div>
</div>
<div class="content">- 태그만으로 SQL문을 사용할 수 있게 선언
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
내용 부분
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<c:import url="header.jsp">
<c:param name="title" value="홈페이지"/>
</c:import>
<!-- dataSource는 context.xml에 있는 name과 같아야함 -->
<sql:setDataSource var="ds" dataSource="jdbc/webshop"/>
<sql:query var="results" dataSource="${ds}" sql="select * from images order by id" />
<table class="images">
<c:set var="tablewidth" value="8"/>
<c:forEach var="image" items="${results.rows}" varStatus="row">
<c:if test="${row.index % tablewidth == 0}"><tr></c:if>
<c:set var="picName" scope="page" value="${image.stem}.${image.image_extension}"/>
<td>
<a href="<c:url value="/gallery?action=image&image=${image.id}"/>">
<img src="${pageContext.request.contextPath}/pics/${picName}">
</a>
</td>
<c:if test="${row.index+1 % tablewidth == 0}"></tr></c:if>
</c:forEach>
</table>
<%-- 동적 컨텐츠(내용)이 들어감 --%>
<c:import url="footer.jsp"/>- DB에 사진에 대한 정보들을 입력해놓고 실제 사진데이터는 다른 저장소에 따로 보관을 하여 주소만을 불러와서 출력함
footer 부분
</div>
<div id="footer">
<p>Copyright © 2022 koreaIT</p>
</div>
</body>
</html>-
전체적인 출력이미지
-
사진을 선택하면 그 사진의 이미지와 정보를 불러오도록 함
사진의 이름을 첫 글자만 대문자, 다른 글자는 소문자로 출력하도록함
사진의 제작자와 평점을 DB에서 불러 올 수 있도록 해줌
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:import url="header.jsp">
<c:param name="title" value="단독이미지"/>
</c:import>
<!-- dataSource는 context.xml에 있는 name과 같아야함 -->
<sql:setDataSource var="ds" dataSource="jdbc/webshop"/>
<sql:query var="results" dataSource="${ds}" sql="select * from images where id=?">
<sql:param>${param.image}</sql:param> <!-- ?에 들어갈 변수 -->
</sql:query>
<c:set var="image" scope="page" value="${results.rows[0]}" /> <!-- 한개만 출력 -->
<c:set var="picName" scope="page" value="${image.stem}.${image.image_extension}"/>
<div class="container">
<div class="heading">
<h1><c:out value="${fn:toUpperCase(fn:substring(image.stem, 0, 1))}${fn:toLowerCase(fn:substring(image.stem, 1, -1))}" /></h1>
<div class="rating">Rated: ${image.average_ranking}</div>
</div>
<div class="flex-box">
<div class="picture">
<div class="imageby">Image by <a href="#">${image.attribution_name}</a></div>
<img src="${pageContext.request.contextPath}/pics/${picName}">
</div>
<div class="rating-radio">
<form action="<c:url value="/gallery" />" method="post">
<input type="hidden" name="action" value="rate">
<input type="hidden" name="image" value="${image.id}">
<h3>점수를 선택하기</h3>
<div><input type="radio" name="rating" value="5" />5 - 최고! </div>
<div><input type="radio" name="rating" value="4" />4 - 좋은작품! </div>
<div><input type="radio" name="rating" value="3" />3 - 괜찮음 </div>
<div><input type="radio" name="rating" value="2" />2 - 그럭저럭 </div>
<div><input type="radio" name="rating" value="1" />1 - 지뢰작 </div>
<p><input type="submit" name="submit" value="OK"></p>
</form>
</div>
</div>
</div>- 사진을 클릭시 그 사진의 제작자와 DB에 입력한 평점, 사진의 이름을 단독으로 출력하도록 함
