본문 바로가기
JDBC/JSP-SERVLET

[JSP] 메인페이지 만들기

by 썬키 2022. 1. 28.

 

오늘은 위와같이 메인 페이지를 만드는 과정을 배웠다.

 

거의 몇 주째 게시판 만드는 작업만 하다가 메인 페이지를 만들려고 하니

새로운거라 많이 낯설고 아직 머릿속에서 정리가 잘 안된 느낌이긴 하지만

배운대로 정리해서 포스팅 해보려고 한다. 

 

 

 

 

 

 

우선, 메인 페이지를 만들기 위해서는 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

 

Bootstrap Wells

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

자세한건 위의 사이트를 참고하면 좋을듯!

 

그리고, 메인 페이지의 레이아웃을 짜기 위해서 그리드라는것을 이용하는데

이건 어떤 개념인지 사실 아직 정리가 안 돼서 포스팅하기 애매하다.

 

'col-md-숫자' < 이 코드를 이용해서 짜는거 같은데 잘 모르겠다.

몰라도 코드를 계속 짜면서 이용해보면 어떤 기능을 하는건지 이해할 날이 오리라 생각해본다.

 

프로젝트 - webapp - include 폴더생성

 

<%@ 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

관련글

댓글

티스토리툴바