오늘은 위와같이 메인 페이지를 만드는 과정을 배웠다.
거의 몇 주째 게시판 만드는 작업만 하다가 메인 페이지를 만들려고 하니
새로운거라 많이 낯설고 아직 머릿속에서 정리가 잘 안된 느낌이긴 하지만
배운대로 정리해서 포스팅 해보려고 한다.
우선, 메인 페이지를 만들기 위해서는 index.jsp 파일이 필요하다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// /index.jsp 기본 페이지에 오면 자동으로 /main/main.jsp 바로 이동시켜 버린다.
response.sendRedirect("/main/main.jsp");
%>
코드를 해석해보면 위에 <%@ ~ 이거는 그냥 페이지에 한글 처리를 해주는 거고
그 밑에 response.sendRedirect는 뒤에 있는 주소로 이동한다는 것이다.
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
id="WebApp_ID" version="4.0">
<display-name>webjjang</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
그 다음, web.xml 파일에
<welcome-file-list>index.jsp</welcome-file> 을 추가하면
index.jsp로 갔을 때 main.jsp로 바로 이동하게 된다.
<%@page import="com.webjjang.board.vo.BoardVO"%>
<%@page import="com.webjjang.board.service.BoardListService"%>
<%@page import="com.webjjang.notice.vo.NoticeVO"%>
<%@page import="com.webjjang.notice.service.NoticeListService"%>
<%@page import="com.webjjang.image.vo.ImageVO"%>
<%@page import="java.util.List"%>
<%@page import="com.webjjang.util.PageObject"%>
<%@page import="com.webjjang.image.service.ImageListService"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// PageObject 생성
PageObject pageObject = new PageObject();
// 데이터 가져오기 - 이미지 리스트(3개), 공지사항 리스트(5개), 게시판 리스트(5개)
ImageListService imageListService = new ImageListService();
// 데이터의 갯수를 3개로 정한다.
pageObject.setPerPageNum(3);
List<ImageVO> imageList = imageListService.service(pageObject);
// 공지사항 데이터 가져오기
NoticeListService noticeListService = new NoticeListService();
// 데이터의 갯수를 5개로 정한다.
pageObject.setPerPageNum(5);
List<NoticeVO> noticeList = noticeListService.service(pageObject);
// 게시판 데이터 가져오기
BoardListService boardListService = new BoardListService();
// 위에서 데이터 갯수를 5로 정해놓았다.
List<BoardVO> boardList = boardListService.service(pageObject);
// EL이나 JSTL을 사용하려면 서버 기본 저장 객체에 담아야 한다.
request.setAttribute("imageList", imageList);
request.setAttribute("noticeList", noticeList);
request.setAttribute("boardList", boardList);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>main</title>
<style type="text/css">
.imageDataRow:hover, .noticeDataRow:hover, .boardDataRow:hover{
background : #eee;
cursor : pointer;
}
</style>
<script type="text/javascript">
$(function(){
$(".imageDataRow, .noticeDataRow, .boardDataRow").click(function(){
// alert("click");
var no = $(this).data("no");
var url = "/";
if($(this).hasClass("imageDataRow")) url += "image";
if($(this).hasClass("noticeDataRow")) url += "notice";
if($(this).hasClass("boardDataRow")) url += "board";
url += "/view.jsp?no=" +no+"&inc=1";
location = url;
});
});
</script>
</head>
<body>
<div class="container">
<div class="well">
<h2>웹짱커뮤니티</h2>
</div>
<div class="row">
<div class="col-md-12">
<jsp:include page="/include/imageList.jsp" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<jsp:include page="/include/noticeList.jsp" />
</div>
<div class="col-md-6">
<jsp:include page="/include/boardList.jsp" />
</div>
</div>
</div>
</body>
</html>
프로젝트 - webapp - main 폴더에 main.jsp를 생성한 뒤 코드를 생성한다.
지난번 개인 프로젝트 할 때, 화면에 몇 개의 데이터를 표시할건지
궁금했었는데 이번에 알게 되었다.
// 데이터의 갯수를 3개로 정한다.
pageObject.setPerPageNum(3);
이런식으로 pageObject.setPerPageNum 메서드를 호출하고
괄호안에 노출하길 원하는 데이터의 갯수를 써놓으면 된다.
그리고, 메인 페이지를 만들 때 사용하는 well 코드도 유용한거 같다.
이런식으로 탭? 형식으로 노출되게 하는 코드인거 같다.
https://www.w3schools.com/bootstrap/bootstrap_wells.asp
자세한건 위의 사이트를 참고하면 좋을듯!
그리고, 메인 페이지의 레이아웃을 짜기 위해서 그리드라는것을 이용하는데
이건 어떤 개념인지 사실 아직 정리가 안 돼서 포스팅하기 애매하다.
'col-md-숫자' < 이 코드를 이용해서 짜는거 같은데 잘 모르겠다.
몰라도 코드를 계속 짜면서 이용해보면 어떤 기능을 하는건지 이해할 날이 오리라 생각해본다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<div class="panel panel-default">
<div class="panel-heading">
<h3>게시판</h3>
</div>
<div class="panel-body">
<table class="table">
<c:forEach items="${boardList }" var="vo">
<tr class="boardDataRow" data-no="${vo.no }">
<td class="no">${vo.no}</td>
<td>${vo.title}</td>
<td>${vo.writer}</td>
<td>${vo.writeDate}</td>
<td>${vo.hit}</td>
</tr>
</c:forEach>
</table>
</div>
</div>
<boardList.jsp>
include 안에 본인이 메인페이지에 노출하고 싶은 게시판 리스트를 jsp로 생성한 뒤
위의 코드대로 작성하면 된다.
이때, 주의할 점은 forEach문 안에서 items명을 대소문자 잘 구분해서 써야 한다.
그렇지 않으면 Run 했을 때 데이터가 표시되지 않는다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<div class="panel panel-default">
<div class="panel-heading">
<h4>이미지</h4>
</div>
<div class="panel-body">
<div class="row">
<c:forEach items="${imageList }" var="vo">
<div class="col-md-4">
<div class="thumbnail imageDataRow" data-no="${vo.no}">
<img src="${vo.fileName }" alt="Photo Lists">
<div class="caption">
<p>[${vo.no }]${vo.title }</p>
${vo.name }(${vo.id }) - ${vo.writeDate }
</div>
</div>
</div>
</c:forEach>
</div>
</div>
</div>
<imageList.jsp>
한 줄에 3개의 데이터를 표시하기 위해서
<div class="col-md-4">를 사용했다.
태그가 굉장히 많으니 자동 서식 정렬?(ctrl+alt+shift+f)키를 이용하면 좋다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<div class="panel panel-default">
<div class="panel-heading">
<h3>공지사항</h3>
</div>
<div class="panel-body">
<table class="table">
<c:forEach items="${noticeList }" var="vo">
<tr class="noticeDataRow" data-no="${vo.no }">
<td>${vo.no}</td>
<td>${vo.title}</td>
<td>${vo.startDate}</td>
<td>${vo.endDate}</td>
<td>${vo.updateDate}</td>
</tr>
</c:forEach>
</table>
</div>
</div>
<noticeList.jsp>
이렇게 해서 필요한 파일들은 다 준비가 됐고,
브라우저 주소창에 localhost 입력하면 바로 메인페이지로 이동하는 것을 구현할 수 있다.
'JDBC > JSP-SERVLET' 카테고리의 다른 글
[JSP] JSP에 값을 넘겨주는 여러가지 방법 (0) | 2023.01.31 |
---|---|
[JSP] Q&A 게시판 만들기 1(Question) (0) | 2022.01.26 |
댓글