본문 바로가기
국비과정/JAVA

20230704 _[22일차]_03. 상단메뉴바 + 게시판만들기

phyho 2023. 7. 5. 09:00

 

( JSP/Servlet )

https://www.devkuma.com/docs/jsp-servlet/jsp%EC%97%90-%EC%A0%84%EB%8B%AC%ED%95%98%EA%B3%A0-%EA%B2%B0%EA%B3%BC%EB%A5%BC-forward%ED%95%98%EC%97%AC-%ED%91%9C%EC%8B%9C/

 

JSP/Servlet | 서블릿과 JSP/HTML | JSP에 전달하고 결과를 forward하여 표시

또 다른 방법은 포워드로 결과를 표시하는 JSP에 표시를 전환하는 것이다. 서블릿에서 결과를 표시하는 JSP를 포워드(forward)로 표시 시키면 서블릿에서 화면의 표시 등을 할 필요는 없다. 단, 이

www.devkuma.com

 

jun03 

package com.poseidon.dto;

[BoardDTO.java]

package com.poseidon.dto;

public class BoardDTO {
	private int bno, blike;
	private String btitle, bwrite, bdate;
	
	public int getBno() {
		return bno;
	}
	public void setBno(int bno) {
		this.bno = bno;
	}
	public int getBlike() {
		return blike;
	}
	public void setBlike(int blike) {
		this.blike = blike;
	}
	public String getBtitle() {
		return btitle;
	}
	public void setBtitle(String btitle) {
		this.btitle = btitle;
	}
	public String getBwrite() {
		return bwrite;
	}
	public void setBwrite(String bwrite) {
		this.bwrite = bwrite;
	}
	public String getBdate() {
		return bdate;
	}
	public void setBdate(String bdate) {
		this.bdate = bdate;
	}
}

 

package com.poseidon.board;
[Board.java]

package com.poseidon.board;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.poseidon.dto.BoardDTO;

@WebServlet("/board")

public class Board extends HttpServlet {
	private static final long serialVersionUID = 1L;
    public Board() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//		response.getWriter().append("Served at: ").append(request.getContextPath());
//		리스트 타입에 DTO타입을 넣어서 10개 보내보겠습니다.
		List<BoardDTO> boardList = new ArrayList<BoardDTO>();
		for (int i = 1; i < 11; i++) {
			BoardDTO dto = new BoardDTO();
			dto.setBno(i);
			dto.setBtitle(i + "번째 글 입니다.");
			dto.setBwrite("홍길동");
			dto.setBdate("2023-07-03");
			dto.setBlike((int) (Math.random() * 100) + i);
			boardList.add(dto);
		}
		
		RequestDispatcher rd = request.getRequestDispatcher("board.jsp");	// 
		request.setAttribute("Sdata","전달합니다.");	// 값지정 key, value   -> 지금은 String이지만 모든 데이터 다 가능 
		request.setAttribute("list", boardList); 
		rd.forward(request, response);
	}

}

 

webapp

[board.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>서블릿을 활용한 보드 열기</title>
</head>
<body>
<%
// EL태그 말고 자바로 받아보겠습니다.
String sdata = (String) request.getAttribute("Sdata");
%>

	<jsp:include page="./menu.jsp"/>
	<h1>board</h1>
	${Sdata }	
	
	변환한 값 : <%=sdata %>
	<hr>
	${list }
	
</body>
</html>

 

${Sdata }  => EL태그 (표현식, 표현태그)

<% %> => 스크립틀릿

 

webapp

[board.jsp] _ 메뉴바 게시판에 실제 게시판 내용 넣기

(table을 div로 묶고 id (tableDiv) 로 스타일 지정)

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>서블릿을 활용한 보드 열기</title>
<style type = "text/css">
#tableDiv {
	margin: 0 auto;
	width: 800px;
	height: 500px;
	background-color: beige;
	padding: 10px;
	box-sizing: border-box;
}
#tableDiv table{
	width: 100%;	/* 780px */
	height: 100%;
	border-collapse: collapse;	/* 표와 셀 사이의 여백 없애줌 */
	
}
tr{

}
td{
	border-bottom: 1px solid green;
	text-align: center;
}


</style>
</head>
<body>
	<%
	// EL태그 말고 자바로 받아보겠습니다.
	String sdata = (String) request.getAttribute("Sdata");
	%>

	<jsp:include page="./menu.jsp" />
	<h1>board</h1>
	${Sdata } 변환한 값 :
	<%=sdata%>
	<hr>
	<div id = "tableDiv"> 
		<table>
			<tr>
				<th>번호</th> 		<!-- td => th 로 변경 (굵은 글씨로 변경됨) -->
				<th>제목</th>
				<th>글쓴이</th>
				<th>조회수</th>
				<th>쓴날짜</th>
			</tr>
			<%
			for (int i = 1; i < 11; i++) {
			%>
			<tr>
				<td class="td1">1</td>
				<td class="title"><%=i%>번째 글입니다.</td>
				<td class="td1">홍길동</td>
				<td class="td1">50</td>
				<td class="td2">2023-07-03</td>
			</tr>
			<%
			}
			%>
		</table>
	</div>

</body>
</html>

( 여러가지 css 스타일 지정 )

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>서블릿을 활용한 보드 열기</title>
<style type = "text/css">
#tableDiv {
	margin: 0 auto;
	width: 800px;
	height: 500px;
	padding: 10px;
	box-sizing: border-box;
}
#tableDiv table{
	width: 100%;	/* 780px */
	height: 100%;
	border-collapse: collapse;	/* 표와 셀 사이의 여백 없애줌 */
	
}
tr:hover{
	background-color: #FAFAD2;
	color: #3232FF;
}
th{
	background-color: #FFEB5A;
}
td{
	border-bottom: 1px solid green;
	text-align: center;
}
.td1{
	width: 10%;
}
.td2{
	width: 20%;
}
.title{
	text-align: left;
}

</style>
</head>
<body>
	<%
	// EL태그 말고 자바로 받아보겠습니다.
	String sdata = (String) request.getAttribute("Sdata");
	%>

	<jsp:include page="./menu.jsp" />
	<h1>board</h1>
	${Sdata } 변환한 값 :
	<%=sdata%>
	<hr>
	<div id = "tableDiv"> 
		<table>
			<tr>
				<th>번호</th> 		
				<th>제목</th>
				<th>글쓴이</th>
				<th>조회수</th>
				<th>쓴날짜</th>
			</tr>
			<%
			for (int i = 1; i < 11; i++) {
			%>
			<tr>
				<td class="td1">1</td>
				<td class="title">1번째 글입니다.</td>
				<td class="td1">홍길동</td>
				<td class="td1">50</td>
				<td class="td2">2023-07-03</td>
			</tr>
			<%
			}
			%>
		</table>
	</div>

</body>
</html>

( 리스트생성 & 데이터값 받아오기 )

<%@page import="com.poseidon.dto.BoardDTO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>서블릿을 활용한 보드 열기</title>
<style type = "text/css">
#tableDiv {
	margin: 0 auto;
	width: 800px;
	height: 500px;
	padding: 10px;
	box-sizing: border-box;
}
#tableDiv table{
	width: 100%;	/* 780px */
	height: 100%;
	border-collapse: collapse;	/* 표와 셀 사이의 여백 없애줌 */
	
}
tr:hover{
	background-color: #FAFAD2;
	color: #3232FF;
}
th{
	background-color: #FFEB5A;
}
td{
	border-bottom: 1px solid green;
	text-align: center;
}
.td1{
	width: 10%;
}
.td2{
	width: 20%;
}
.title{
	text-align: left;
}

</style>
</head>
<body>
	<%
	// EL태그 말고 자바로 받아보겠습니다.
	String sdata = (String) request.getAttribute("Sdata");
	List<BoardDTO> list = (List<BoardDTO>) request.getAttribute("list");
	%>

	<jsp:include page="./menu.jsp" />
	<h1>board</h1>
	${Sdata } 변환한 값 :
	<%=sdata%>
	<hr>
	<div id = "tableDiv"> 
		<table>
			<tr>
				<th>번호</th> 		<!-- td => th 로 변경 (굵은 글씨로 변경됨) -->
				<th>제목</th>
				<th>글쓴이</th>
				<th>조회수</th>
				<th>쓴날짜</th>
			</tr>
			<%
			for (int i = 0; i < list.size(); i++) {
			%>
			<tr>
				<td class="td1"><%=list.get(i).getBno() %></td>
				<td class="title"><%=list.get(i).getBtitle()%></td>
				<td class="td1"><%=list.get(i).getBwrite() %></td>
				<td class="td1"><%=list.get(i).getBlike() %></td>
				<td class="td2"><%=list.get(i).getBdate() %></td>
			</tr>
			<%
			}
			%>
		</table>
	</div>

</body>
</html>

* List<BoardDTO> list = (List<BoardDTO>) request.getAttribute("list");
=> 양쪽 타입 맞춰주기

 

* list.get(i).getBno() 

=> getter로 값 가져오기

 

 

 

( title에 a태그 추가 ) _ 클릭하면 게시글로 이동기능

	<div id = "tableDiv"> 
		<table>
			<tr>
				<th>번호</th> 		<!-- td => th 로 변경 (굵은 글씨로 변경됨) -->
				<th>제목</th>
				<th>글쓴이</th>
				<th>조회수</th>
				<th>쓴날짜</th>
			</tr>
			<%
			for (int i = 0; i < list.size(); i++) {
			%>
			<tr>
				<td class="td1"><%=list.get(i).getBno() %></td>
				<td class="title">
					<a href="./detail?bno-120"><%=list.get(i).getBtitle()%></a>
				</td>
				<td class="td1"><%=list.get(i).getBwrite() %></td>
				<td class="td1"><%=list.get(i).getBlike() %></td>
				<td class="td2"><%=list.get(i).getBdate() %></td>
			</tr>
			<%
			}
			%>
		</table>
	</div>

./detail?bno-120 
=> 글번호가 120번인 사람 글을 읽어줘

클릭하면

 

파란부분을 120자리에 넣어주고

 

 

게시판 3번글 클릭하면 주소창에 해당하는 bno 표시

package com.poseidon.board; 
[ Detail.java ]  생성

package com.poseidon.board;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/detail")
public class Detail extends HttpServlet {
	private static final long serialVersionUID = 1L;

    public Detail() {
        super();
    }
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		System.out.println(request.getParameter("bno"));
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	} 
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

'국비과정 > JAVA' 카테고리의 다른 글

20230706 _[24일차]_01. 게시판 글쓰기 기능만들기  (0) 2023.07.06
20230705 _[23일차]_01. 게시판 만들기 이어서  (2) 2023.07.05
20230703 _[21일차]_02. 메뉴만들기 + 시멘틱태그  (0) 2023.07.03
20230703 _[21일차]_01. VS code 설치 + HTML  (0) 2023.07.03
20230630 _[21일차]_03. 로그인 구현2 (html+java)_미완  (0) 2023.07.03

'국비과정/JAVA' Related Articles

티스토리툴바