무작정 개발.Vlog

[JSP] 게시판 만들기

by 무작정 개발

Back-End/JSP & Struts & JDBC

반응형

 

2022.02.15 ~ 02.16(37~38일)

 

오늘부터 이틀 동안 게시판을 만드는 수업을 진행했습니다. 

게시판을 만들기 앞서  jsp, servlet, spring, springboot까지 하면서 게시판을 제작할 계획인데 프런트엔드 부분(틀)을

따로 만들고 본격적으로 게시판 만들기를 시작했습니다.

 

파일명 : board(압축파일)

https://github.com/chaehyuenwoo/JSP_study

 

GitHub - chaehyuenwoo/JSP_study: JSP 공부

JSP 공부. Contribute to chaehyuenwoo/JSP_study development by creating an account on GitHub.

github.com

 

 

게시판 메인화면
게시판 메인화면

위의 화면은 오늘 만들 게시판입니다. 

 

게시판 기능

  • Insert(작성) - 게시글 작성
  • Select(조회) - 게시글 조회 (제목, 작성자, 내용으로 게시글 조회)
  • Update(수정) - 게시글 수정
  • Delete(삭제) - 게시글 삭제
  • 페이징

 

 

게시판 페이지 구성

  • list.jsp
  • article.jsp
  • created.jsp
  • created_ok.jsp
  • updated.jsp
  • updated_ok.jsp
  • css파일과 js파일은 따로 폴더를 만들어서 적용하였습니다. (상단 깃 헙 링크 참조)

 

CSS 스타일 적용방법 - ". " 와 "#"의 차이점

 

CSS는 태그에 설정한 id 혹은 class 속성에 따라 스타일을 적용하는데

 

id에 스타일을 적용할 경우 #을 맨 앞에 붙여 사용하고, 하나의 객체에만 적용한다.

#id {속성 1:속성 값; 속성 2:속성 값;}

ex)

<div id="bbsList_header">
<div id="leftHeader">

class에 스타일을 적용할 경우 맨 앞에. 을 붙여 사용하고, 여러 객체에 적용한다.

. class { 속성 1:속성 값; 속성 2:속성 값;}

ex)

<dd class="num"><%=dto.getNum() %></dd>
<dd class="subject">

 

게시판 제작 순서

  1. DB 테이블 생성
  2. BoardDTO 생성
  3. JSP페이지(article, list 등) 생성
1. Table 생성하기 - (테이블 이름 : Board)

 

Table 생성

CREATE TABLE BOARD
(NUM NUMBER(9) NOT NULL,
NAME VARCHAR2(20) NOT NULL,
PWD VARCHAR2(10) NOT NULL,
EMAIL VARCHAR2(50),
SUBJECT VARCHAR2(50) NOT NULL,
CONTENT VARCHAR2(4000) NOT NULL,
IPADDR VARCHAR2(20),
HITCOUNT NUMBER(9),
CREATED DATE,
CONSTRAINT PK_BOARD_NUM PRIMARY KEY(NUM));

SELECT * FROM BOARD;

테이블의 이름은 board로 해서 칼럼명은 num(게시번호), name(작성자), pwd(비밀번호), email(이메일),

subject(게시물 제목), content(게시물 내용), ipaddr(ip주소), hitcount(조회수), created(작성 시간)으로 설정

 

 

Table 생성 확인 - (검색해보기)

Table 생성 확인 - (검색해보기)
board 테이블

2. BoardDTO, BoardDAO 클래스 생성

BoardDTO 클래스 생성

package com.board;

public class BoardDTO {
	
	private int num;
	private String name;
	private String pwd;
	private String email;
	private String subject;
	private String content;
	private String ipAddr;
	private String created;
	private int hitCount;
	
    getter, setter 작성
}

여기서 getter, setter는 생략하였습니다.

getter/setter 생성 방법 : 마우스 우클릭-> source -> getter/setter 클릭 -> 전체 선택 후 확인!

 

BoardDAO 클래스 생성

package com.board;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

//DAO는 테이블에 데이터를 넣는 클래스이기때문에 table을 만들었으면 dao도 만들 수 있다.
public class BoardDAO {

	// 의존성 주입(객체를 생성함에 동시에 초기화)
	private Connection conn;

	public BoardDAO(Connection conn) {
		this.conn = conn;
	}

	// num의 최대값 구하기
	public int getMaxNum() {

		int maxNum = 0;

		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql;

		try {
			// nvl를 써서 null인 값을 0으로 바꿔준다. 0으로 바꿔줘야 연산이 가능(++)
			sql = "select nvl(max(num),0) from board";

			pstmt = conn.prepareStatement(sql);

			rs = pstmt.executeQuery();

			if (rs.next()) {
				maxNum = rs.getInt(1); // 여긴 컬럼명or숫자를 쓴다.
				// 하지만nvl(max(num)) 는 파생 컬럼이라서 이름을 못쓰기 때문에 1을 써준다.
			}

			rs.close();
			pstmt.close();

		} catch (Exception e) {
			System.out.println(e.toString());
		}

		return maxNum;

	}

	// 입력(insert) - 넘어오는 데이터는 BoardDTO의 dto
	public int insertData(BoardDTO dto) {

		int result = 0;

		PreparedStatement pstmt = null;
		String sql;

		try {

			sql = "insert into board (num,name,pwd,email,subject,";
			sql += "content,ipAddr,hitCount,created) ";
			sql += "values (?,?,?,?,?,?,?,0,sysdate)";

			pstmt = conn.prepareStatement(sql);

			// values 9개중에 ?는 7개라서 7개만 작성
			pstmt.setInt(1, dto.getNum());
			pstmt.setString(2, dto.getName());
			pstmt.setString(3, dto.getPwd());
			pstmt.setString(4, dto.getEmail());
			pstmt.setString(5, dto.getSubject());
			pstmt.setString(6, dto.getContent());
			pstmt.setString(7, dto.getIpAddr());

			result = pstmt.executeUpdate(); // 실행해준다

			pstmt.close();// 닫아준다.

		} catch (Exception e) {
			System.out.println(e.toString());
		}

		return result; // result로 반환
		// --여기까지가 입력(insert)

	}

	// 전체 데이터 갯수 구하기
	public int getDataCount(String searchKey, String searchValue) {

	int totalCount = 0;
		
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql;
		
		try {
			
			searchValue = "%" + searchValue + "%";
			
			sql = "select nvl(count(*),0) from board ";
			sql+= "where " + searchKey + " like ?";
			
			pstmt = conn.prepareStatement(sql);
			
			pstmt.setString(1, searchValue);
			
			rs = pstmt.executeQuery();
			
			if(rs.next()) {
				totalCount = rs.getInt(1);
			}
			
			rs.close();
			pstmt.close();
			
			
		} catch (Exception e) {
			System.out.println(e.toString());
		}
		return totalCount;
	}

	// 전체 데이터 출력(페이지마다 개수 제한)
	public List<BoardDTO> getLists(int start, int end,String searchKey, String searchValue) {
	//rownum을 매개변수로 할당해서 해당범위만 list로 출력

		List<BoardDTO> lists = new ArrayList<BoardDTO>();
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql;

		try {
			
			searchValue = "%" + searchValue + "%";
			
			sql = "select * from (";
			sql+= "select rownum rnum, data.* from (";
			sql+= "select num,name,subject,hitcount,";
			sql+= "to_char(created,'YYYY-MM-DD') created ";
			sql+= "from board where " + searchKey + " like ? ";
			sql+= "order by num desc) data) " ;
			sql+= "where rnum>=? and rnum<=?";
			
			pstmt = conn.prepareStatement(sql);
			
			pstmt.setString(1, searchValue);
			pstmt.setInt(2, start);
			pstmt.setInt(3, end);
			
			rs = pstmt.executeQuery();
			
			while(rs.next()) {
				
				BoardDTO dto = new BoardDTO();
				
				dto.setNum(rs.getInt("num"));
				dto.setName(rs.getString("name"));
				dto.setSubject(rs.getString("subject"));
				dto.setHitCount(rs.getInt("hitCount"));
				dto.setCreated(rs.getString("created"));
				
				lists.add(dto);
			}
			
			rs.close();
			pstmt.close();

		} catch (Exception e) {
			System.out.println(e.toString());
		}
		
		return lists;
	}
	
	
	
	// num으로 조회한 한개의 데이터
	public BoardDTO getReadData(int num) {

		BoardDTO dto = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql;

		try {

			sql = "select num,name,pwd,email,subject,content,";
			sql += "ipAddr,hitCount,created ";
			sql += "from board where num=?";

			pstmt = conn.prepareStatement(sql);

			pstmt.setInt(1, num);

			rs = pstmt.executeQuery();

			if (rs.next()) { // 데이터가 1개니까 while문 x if문사용

				dto = new BoardDTO();// 위에서 객체생성했으니 이렇게

				dto.setNum(rs.getInt("num"));
				dto.setName(rs.getString("name"));
				dto.setPwd(rs.getString("pwd"));
				dto.setEmail(rs.getString("email"));
				dto.setSubject(rs.getString("subject"));
				dto.setContent(rs.getString("content"));
				dto.setIpAddr(rs.getString("ipAddr"));
				dto.setHitCount(rs.getInt("hitCount"));
				dto.setCreated(rs.getString("created"));

			}

			rs.close();
			pstmt.close();

		} catch (Exception e) {
			System.out.println(e.toString());
		}

		return dto;
	}

	// 조회수 증가
	public int updateHitCount(int num) {

		int result = 0;
		PreparedStatement pstmt = null;
		String sql;

		try {

			sql = "update board set hitCount=hitCount+1 where num=?";

			pstmt = conn.prepareStatement(sql);

			pstmt.setInt(1, num);

			result = pstmt.executeUpdate();

			pstmt.close();

		} catch (Exception e) {
			System.out.println(e.toString());
		}

		return result;

	}
	
	
	//수정
	public int updateData(BoardDTO dto) {
		
		int result = 0;
		
		PreparedStatement pstmt = null;
		String sql;
		
		try {
			
			sql = "update board set name=?,pwd=?,email=?,subject=?,";
			sql+= "content=? where num=?";
			
			pstmt = conn.prepareStatement(sql);
			
			pstmt.setString(1, dto.getName());
			pstmt.setString(2, dto.getPwd());
			pstmt.setString(3, dto.getEmail());
			pstmt.setString(4, dto.getSubject());
			pstmt.setString(5, dto.getContent());
			pstmt.setInt(6, dto.getNum());
			
			result = pstmt.executeUpdate();
			
			pstmt.close();
			
		} catch (Exception e) {
			System.out.println(e.toString());
		}
		
		return result;
	}
	
	//삭제
	public int deleteData(int num) {
		
		int result = 0;
		
		PreparedStatement pstmt = null;
		String sql;
		
		try {
			
			sql = "delete board where num=?";
			
			pstmt = conn.prepareStatement(sql);
			
			pstmt.setInt(1, num);
			
			result = pstmt.executeUpdate();
			
			pstmt.close();
			
		} catch (Exception e) {
			System.out.println(e.toString());
		}
		
		return result;
		
	}

}

 

JSP페이지(article, list 등) 생성

 

리스트 page - list.jsp

  • 리스트 페이지 하단에 페이징 처리, 상단에는 게시물 검색(제목, 작성자, 내용)을 구현
<%@page import="java.net.URLEncoder"%>
<%@page import="java.net.URLDecoder"%>
<%@page import="com.util.MyUtil"%>
<%@page import="com.board.BoardDTO"%>
<%@page import="java.util.List"%>
<%@page import="com.board.BoardDAO"%>
<%@page import="com.util.DBConn"%>
<%@page import="java.sql.Connection"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	//BoardDAO dao = new BoardDAO(DBConn.getConnection());
	Connection conn = DBConn.getConnection();
	BoardDAO dao = new BoardDAO(conn);
	
	
	MyUtil myUtil = new MyUtil();
	
	//get방식으로 넘어온 페이지 번호(myUtil...)
	String pageNum = request.getParameter("pageNum"); //겟파라미터로 받는다
	
	//첫 시작 시 현재페이지 : 1
	int currentPage = 1;
	
	//넘어온 페이지번호가 존재할 경우 현재페이지에 값 넣기
	if(pageNum != null) {
		
		currentPage = Integer.parseInt(pageNum);
	}
	
	//검색키, 검색값
	String searchKey = request.getParameter("searchKey");
	String searchValue = request.getParameter("searchValue");
	
	//검색값이 있을 경우
	if(searchValue != null) {
		
		if(request.getMethod().equalsIgnoreCase("GET")) {
			searchValue = URLDecoder.decode(searchValue, "UTF-8");
		}
	//검색값이 없을 경우	
	}else {
		searchKey = "subject";
		searchValue = "";
	}
	
	
	//전체 데이터 갯수 구하기
	int dataCount = dao.getDataCount(searchKey,searchValue);
	
	//하나의 페이지에 표시할 데이터 갯수
	int numPerPage = 3;
	
	//전체 페이지 갯수
	int totalPage = myUtil.getPageCount(numPerPage, dataCount);
	
	//데이터를 삭제해서 페이지가 줄었을 때
	if(currentPage > totalPage) {
		currentPage = totalPage;
	}
	
	//DB에서 가져올 데이터의 시작과 끝
	int start = (currentPage-1) * numPerPage+1;
	int end = currentPage * numPerPage;
	
	//DB에서 해당 페이지를 가져옴
	List<BoardDTO> lists = dao.getLists(start, end,searchKey,searchValue); 
	
	
	//검색 - 검색기능을 사용할 경우 get방식의 주소에 추가로 적용.
	String param = "";
	//null이 아니면 검색을 한 것이다.
	if(!searchValue.equals("")) {
		
		//이때 주소를 만들어준다
		param = "?searchKey=" + searchKey;
		param+= "&searchValue=" + URLEncoder.encode(searchValue, "UTF-8");
		
	}
	
	//페이징 처리 
	String listUrl = "list.jsp" + param; //param 검색을 안했으면 null이 들어간다.됬다면 주소
	
	
	String pageIndexList = 
			myUtil.pageIndexList(currentPage, totalPage, listUrl);
	
	
	//글보기 주소
	
	String articleUrl = cp + "/board/article.jsp";
	
	if(param.equals("")) { //검색을 안했을 때
		articleUrl += "?pageNum=" + currentPage;
	} else { //검색을 했을 때
		articleUrl += param + "&pageNum=" + currentPage;
	}
	
	
	DBConn.close();
	
	
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>게 시 판</title>

<link rel="stylesheet" type="text/css" href="<%=cp%>/board/css/style.css"/>
<link rel="stylesheet" type="text/css" href="<%=cp%>/board/css/list.css"/>

<script type="text/javascript">

	function sendIt() {
		
		var f = document.searchForm;
		
		//검색 버튼을 누를경우 리스트페이지로 이동
		f.action = "<%=cp%>/board/list.jsp";
		f.submit();
	}

</script>


</head>
<body>

<div id="bbsList">

	<div id="bbsList_title">
		게 시 판
	</div>
	<div id="bbsList_header">
		<div id="leftHeader">
		<form action="" method="post" name="searchForm">
			<select name="searchKey" class="selectField">
				<option value="subject">제목</option>
				<option value="name">작성자</option>
				<option value="content">내용</option>
			</select>
			<input type="text" name="searchValue" class="textField"/>
			<input type="button" value=" 검 색 " class="btn2" onclick="sendIt();"/>		
		</form>				
		</div>
		<div id="rightHeader">
			<input type="button" value=" 글올리기 " class="btn2" 
			onclick="javascript:location.href='<%=cp%>/board/created.jsp';"/>			
		</div>	
	</div>
	<div id="bbsList_list">
		<div id="title">
			<dl>
				<dt class="num">번호</dt>
				<dt class="subject">제목</dt>
				<dt class="name">작성자</dt>
				<dt class="created">작성일</dt>
				<dt class="hitCount">조회수</dt>
			</dl>
		</div>
		
		<div id="lists">
		<%for(BoardDTO dto : lists){ %>
			<dl>
				<dd class="num"><%=dto.getNum() %></dd>
				<dd class="subject">
				<a href="<%=articleUrl %>&num=<%=dto.getNum()%>">
				<%=dto.getSubject() %></a>
				<!-- currentPage는 현재 내가보고있는 페이지 -->
				</dd>
				<dd class="name"><%=dto.getName() %></dd>
				<dd class="created"><%=dto.getCreated() %></dd>
				<dd class="hitCount"><%=dto.getHitCount() %></dd>
			</dl>
			<%} %>
		</div>
		<div id="footer">
			<%=pageIndexList %>
		</div>
		
	</div>
	
</div>

</body>
</html>

list.jsp 실행화면
list.jsp 실행화면

 

페이지 클래스 - MyUtil.java

package com.util;

public class MyUtil {

	// 전체페이지
	public int getPageCount(int numPerPage, int dataCount) {

		int pageCount = 0;

		pageCount = dataCount / numPerPage;

		if (dataCount % numPerPage != 0) {

			pageCount++;
		}

		return pageCount;

	}

	// 페이지 처리 메서드
	// currentPage : 현재 표시할 페이지  /  totalPage : 전체 페이지 수
	// listUrl : 링크를 설정할 url(list.jsp)
	public String pageIndexList(int currentPage, int totalPage, String listUrl) {

		int numPerBlock = 5; // 표시할 페이지 ◀이전 6 7 8 9 10 다음▶ -> 리스트 밑에 나오는 페이지번호 출력 개수
		int currentPageSetup;// ◀에 들어가있는 값 -> 표시할 첫 페이지의 -1 해준 값
		int page; // 6 7 8 9 10 -> 하이퍼링크가 될 page index 숫자

		StringBuffer sb = new StringBuffer();
		
		//데이터가 없을 때
		if (currentPage == 0 || totalPage == 0) {
			return ""; // null값 반환
		}

		// list.jsp?pageNum=2
		// list.jsp?searchKey=subject&searchValue=aa&pageNum=2
		if (listUrl.indexOf("?") != -1) {

			listUrl = listUrl + "&";
		} else {
			listUrl = listUrl + "?";
		}

		// 1 2 3 4 5 다음▶
		// ◀이전 6 7 8 9 10 다음▶
		// ◀이전 11 12 13 14 15 다음▶
		currentPageSetup = (currentPage / numPerBlock) * numPerBlock;

		if (currentPage % numPerBlock == 0) {
			currentPageSetup = currentPageSetup - numPerBlock;
		}

		// ◀이전
		if (totalPage > numPerBlock && currentPageSetup > 0) {

			sb.append("<a href=\"" + listUrl + "pageNum=" + currentPageSetup + "\">◀이전</a>&nbsp;");
			// <a href="list.jsp?pageNum=5>◀이전</a>
		}

		// 바로가기페이지(6 7 8 9 10)
		page = currentPageSetup + 1;

		while (page <= totalPage && page <= (currentPageSetup + numPerBlock)) {

			if (page == currentPage) {

				sb.append("<font color=\"Fuchsia\">" + page + "</font>&nbsp;");
				// <font color="Fuchsia">9</font>

			} else {

				sb.append("<a href=\"" + listUrl + "pageNum=" + page + "\">" + page + "</a>&nbsp;");
				// <a href="list.jsp?pageNum=7">7</a>&nbsp;

			}

			page++;
		}

		// 다음▶
		// ◀이전 6 7 8 9 10 다음▶
		// ◀이전 11 12
		if (totalPage - currentPageSetup > numPerBlock) {

			sb.append("<a href=\"" + listUrl + "pageNum=" + page + "\">다음▶</a>&nbsp;");
			// <a href="list.jsp?pageNum=11;>다음▶</a>&nbsp;

		}

		return sb.toString();

	}

}

 

게시글 조회 page - article.jsp

<%@page import="java.net.URLEncoder"%>
<%@page import="java.net.URLDecoder"%>
<%@page import="com.board.BoardDTO"%>
<%@page import="com.board.BoardDAO"%>
<%@page import="com.util.DBConn"%>
<%@page import="java.sql.Connection"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	//갯파라미터로 list.jsp에서 num을 가져온다.
	int num = Integer.parseInt(request.getParameter("num"));
	//갯파라미터로 list.jsp에서 pageNum을 가져온다,
	String pageNum = request.getParameter("pageNum");
	
	
	//검색-----------------------------------
	String searchKey = request.getParameter("searchKey");
	String searchValue = request.getParameter("searchValue");
	
	if(searchValue != null) {
			
		if(request.getMethod().equalsIgnoreCase("GET")) {
			searchValue = URLDecoder.decode(searchValue, "UTF-8");
		}
			
	}else {
		searchKey = "subject";
		searchValue = "";
	}
	
	
	
	Connection conn = DBConn.getConnection();
	BoardDAO dao = new BoardDAO(conn);
	
	
	//조회수 증가
	dao.updateHitCount(num);
	
	//글 가져오기
	BoardDTO dto = dao.getReadData(num); //dto에 하나의 데이터가 들어간다.
	
	if(dto==null) {//dto가 null이 아니면 건너 뛴다.
		response.sendRedirect("lists.jsp");
	}
	
	//글 라인수
	int lineSu = dto.getContent().split("\n").length;
	
	//글 엔터를 <br/>로 변경
	dto.setContent(dto.getContent().replace("\n", "<br/>")); 
	
	//검색----------------------------------------------------------------------
	String param = "";
	//null이 아니면 검색을 한 것이다.
	if(!searchValue.equals("")) {
		
		//이때 주소를 만들어준다
		param = "&searchKey=" + searchKey;
		param+= "&searchValue=" + URLEncoder.encode(searchValue, "UTF-8");
		
	}
	//검색----------------------------------------------------------------------
	
	
	DBConn.close();
		
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>게 시 판</title>

<link rel="stylesheet" type="text/css" href="<%=cp%>/board/css/style.css"/>
<link rel="stylesheet" type="text/css" href="<%=cp%>/board/css/article.css"/>

</head>
<body>

<div id="bbs">
	
	<div id="bbs_title">
		게 시 판
	</div>
	<div id="bbsArticle">
		
		<div id="bbsArticle_header">
			<%=dto.getSubject() %>
		</div>
		
		<div class="bbsArticle_bottomLine">
			<dl>
				<dt>작성자</dt>
				<dd><%=dto.getName() %></dd>
				<dt>줄수</dt>
				<dd><%=lineSu %></dd>
			</dl>		
		</div>
		
		<div class="bbsArticle_bottomLine">
			<dl>
				<dt>등록일</dt>
				<dd><%=dto.getCreated() %></dd>
				<dt>조회수</dt>
				<dd><%=dto.getHitCount() %></dd>
			</dl>		
		</div>
		
		<div id="bbsArticle_content">
			<table width="600" border="0">
			<tr>
				<td style="padding-left: 20px 80px 20px 62px;" 
				valign="top" height="200">
				<%=dto.getContent() %>
				</td>
			</tr>			
			</table>
		</div>
		
	</div>
	
	<div class="bbsArticle_noLine" style="text-align: right">
	From : <%=dto.getIpAddr() %>
	</div>
	
	<div id="bbsArticle_footer">
		<div id="leftFooter">
			<input type="button" value=" 수정 " class="btn2" 
			onclick="javascript:location.href='<%=cp%>/board/updated.jsp?num=<%=dto.getNum()%>&pageNum=<%=pageNum%><%=param%>';"/>
			<input type="button" value=" 삭제 " class="btn2" 
			onclick="javascript:location.href='<%=cp%>/board/deleted_ok.jsp?num=<%=dto.getNum()%>&pageNum=<%=pageNum%><%=param%>';"/>
		</div>
		<div id="rightFooter">
			<input type="button" value=" 리스트 " class="btn2" 
			onclick="javascript:location.href='<%=cp%>/board/list.jsp?pageNum=<%=pageNum%><%=param%>';"/>
			<!-- 여기 pageNum을 넣어줘야함 -->
		</div>	
	</div>
	
</div>


</body>
</html>

article.jsp실행화면
article.jsp실행화면

위의 주소를 보면 article.jsp?pageNum=2&num=33이 있는 것을 볼 수 있습니다.

이번 게시판에서는 페이징 기능을 넣었기 때문에 list.jsp에서 article.jsp로 들어올 때 pageNum을 가지고 들어와야

나갈 때 원래 있던 페이지로 나갈 수 있습니다.

 

 

게시판 작성 page - created.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>게 시 판</title>

<link rel="stylesheet" type="text/css" href="<%=cp%>/board/css/style.css"/>
<link rel="stylesheet" type="text/css" href="<%=cp%>/board/css/created.css"/>

<script type="text/javascript" src="<%=cp%>/board/js/util.js"></script>
<script type="text/javascript">

	function sendIt(){
		
		var f = document.myForm;
		
		str = f.subject.value;
		str = str.trim();
		if(!str){
			alert("\n제목을 입력하세요.");
			f.subject.focus();
			return;
		}
		f.subject.value = str;
		
		str = f.name.value;
		str = str.trim();
		if(!str){
			alert("\n이름을 입력하세요.");
			f.name.focus();
			return;
		}		
		
		/* if(!isValidKorean(str)){
			alert("\n이름을 정확히 입력하세요.");
			f.name.focus()
			return;
		}	 */	
		f.name.value = str;
		
		if(f.email.value){
			if(!isValidEmail(f.email.value)){
				alert("\n정상적인 E-Mail을 입력하세요.");
				f.email.focus();
				return;
			}
		}
		
		str = f.content.value;
		str = str.trim();
		if(!str){
			alert("\n내용을 입력하세요.");
			f.content.focus();
			return;
		}
		f.content.value = str;
		
		str = f.pwd.value;
		str = str.trim();
		if(!str){
			alert("\n패스워드를 입력하세요.");
			f.pwd.focus();
			return;
		}
		f.pwd.value = str;
		
		f.action = "<%=cp%>/board/created_ok.jsp";
		f.submit();
		
	}

</script>


</head>
<body>

<div id="bbs">
	<div id="bbs_title">
		게 시 판
	</div>
	
	<form action="" method="post" name="myForm">
	<div id="bbsCreated">
		
		<div class="bbsCreated_bottomLine">
			<dl>
				<dt>제&nbsp;&nbsp;&nbsp;&nbsp;목</dt>
				<dd>
				<input type="text" name="subject" size="60" 
				maxlength="100" class="boxTF"/>
				</dd>
			</dl>		
		</div>
		
		<div class="bbsCreated_bottomLine">
			<dl>
				<dt>작성자</dt>
				<dd>
				<input type="text" name="name" size="35" 
				maxlength="20" class="boxTF"/>
				</dd>
			</dl>		
		</div>
		
		<div class="bbsCreated_bottomLine">
			<dl>
				<dt>E-Mail</dt>
				<dd>
				<input type="text" name="email" size="35" 
				maxlength="50" class="boxTF"/>
				</dd>
			</dl>		
		</div>
		
		<div id="bbsCreated_content">
			<dl>
				<dt>내&nbsp;&nbsp;&nbsp;&nbsp;용</dt>
				<dd>
				<textarea rows="12" cols="63" name="content"
				class="boxTA"></textarea>
				</dd>
			</dl>
		</div>
		
		<div class="bbsCreated_noLine">
			<dl>
				<dt>패스워드</dt>
				<dd>
				<input type="password" name="pwd" size="35" 
				maxlength="7" class="boxTF"/>
				&nbsp;(게시물 수정 및 삭제시 필요!!)
				</dd>
			</dl>		
		</div>	
	
	</div>
	
	<div id="bbsCreated_footer">
		<input type="button" value=" 등록하기 " class="btn2" onclick="sendIt();"/>
		<input type="reset" value=" 다시입력 " class="btn2" 
		onclick="document.myForm.subject.focus();"/>
		<input type="button" value=" 작성취소 " class="btn2" 
		onclick="javascript:location.href='<%=cp%>/board/list.jsp';"/>
	</div>
	
	</form>

</div>


</body>
</html>

created.jsp 실행화면
created.jsp 실행화면

 

게시판 작성 처리 - created_ok.jsp

<%@page import="com.board.BoardDAO"%>
<%@page import="com.util.DBConn"%>
<%@page import="java.sql.Connection"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>

<jsp:useBean id="dto" class="com.board.BoardDTO" scope="page"/>
<jsp:setProperty property="*" name="dto"/>

<%
	Connection conn =DBConn.getConnection();
	BoardDAO dao = new BoardDAO(conn);
	
	//DAO의 num최대값 구하는걸로 구하기
	int maxNum = dao.getMaxNum();
	
	dto.setNum(maxNum + 1); //최대값 +1하면서 새로 들어가는 데이터의 넘버가 된다.(ex게시판 번호)
	dto.setIpAddr(request.getRemoteAddr()); //클라이언트ip를 받아내서 dto에 넣는다.
	
	dao.insertData(dto);
	
	DBConn.close();
	
	
	//애는 insert시켰으니까 클라이언트한테 명령을 줘야한다,
	response.sendRedirect("list.jsp"); //list.jsp로 넘어가깅


%>

 

게시판 수정 page - update.jsp

<%@page import="java.net.URLEncoder"%>
<%@page import="java.net.URLDecoder"%>
<%@page import="com.board.BoardDTO"%>
<%@page import="com.board.BoardDAO"%>
<%@page import="com.util.DBConn"%>
<%@page import="java.sql.Connection"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	int num = Integer.parseInt(request.getParameter("num"));
	String pageNum = request.getParameter("pageNum");
	
	Connection conn = DBConn.getConnection();
	BoardDAO dao = new BoardDAO(conn);
	BoardDTO dto = dao.getReadData(num);
	
	String searchKey = request.getParameter("searchKey");
	String searchValue = request.getParameter("searchValue");
	
	if(searchValue != null) {
			
		if(request.getMethod().equalsIgnoreCase("GET")) {
			searchValue = URLDecoder.decode(searchValue, "UTF-8");
		}
			
	}else {
		searchKey = "subject";
		searchValue = "";
	}
	
	
	String param = "";
	//null이 아니면 검색을 한 것이다.
	if(!searchValue.equals("")) {
		
		//이때 주소를 만들어준다
		param = "&searchKey=" + searchKey;
		param+= "&searchValue=" + URLEncoder.encode(searchValue, "UTF-8");
		
	}
	
	
	DBConn.close();
	
	if(dto==null) {
		response.sendRedirect("list.jsp" + pageNum + param);
	}
	
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>게 시 판</title>

<link rel="stylesheet" type="text/css" href="<%=cp%>/board/css/style.css"/>
<link rel="stylesheet" type="text/css" href="<%=cp%>/board/css/created.css"/>

<script type="text/javascript" src="<%=cp%>/board/js/util.js"></script>
<script type="text/javascript">

	function sendIt(){
		
		var f = document.myForm;
		
		str = f.subject.value;
		str = str.trim();
		if(!str){
			alert("\n제목을 입력하세요.");
			f.subject.focus();
			return;
		}
		f.subject.value = str;
		
		str = f.name.value;
		str = str.trim();
		if(!str){
			alert("\n이름을 입력하세요.");
			f.name.focus();
			return;
		}		
		
		
		f.name.value = str;
		
		if(f.email.value){
			if(!isValidEmail(f.email.value)){
				alert("\n정상적인 E-Mail을 입력하세요.");
				f.email.focus();
				return;
			}
		}
		
		str = f.content.value;
		str = str.trim();
		if(!str){
			alert("\n내용을 입력하세요.");
			f.content.focus();
			return;
		}
		f.content.value = str;
		
		str = f.pwd.value;
		str = str.trim();
		if(!str){
			alert("\n패스워드를 입력하세요.");
			f.pwd.focus();
			return;
		}
		f.pwd.value = str;
		
		var temp = '<%=dto.getPwd()%>';
		if(str != temp) {
			alert("패스워드 틀림!");
			f.pwd.focus();
			return;
		}
		
		f.action = "<%=cp%>/board/updated_ok.jsp";
		f.submit();
		
	}

</script>


</head>
<body>

<div id="bbs">
	<div id="bbs_title">
		게 시 판
	</div>
	
	<form action="" method="post" name="myForm">
	<div id="bbsCreated">
		
		<div class="bbsCreated_bottomLine">
			<dl>
				<dt>제&nbsp;&nbsp;&nbsp;&nbsp;목</dt>
				<dd>
				<input type="text" name="subject" value="<%=dto.getSubject() %>" size="60" 
				maxlength="100" class="boxTF"/>
				</dd>
			</dl>		
		</div>
		
		<div class="bbsCreated_bottomLine">
			<dl>
				<dt>작 성 자</dt>
				<dd>
				<input type="text" name="name" value="<%=dto.getName() %>" size="35" 
				maxlength="20" class="boxTF"/>
				</dd>
			</dl>		
		</div>
		
		<div class="bbsCreated_bottomLine">
			<dl>
				<dt>E-Mail</dt>
				<dd>
				<input type="text" name="email" value="<%=dto.getEmail()==null?"":dto.getEmail() %>" size="35" 
				maxlength="50" class="boxTF"/>
				</dd>
			</dl>		
		</div>
		
		<div id="bbsCreated_content">
			<dl>
				<dt>내&nbsp;&nbsp;&nbsp;&nbsp;용</dt>
				<dd>
				<textarea rows="12" cols="63" name="content"
				class="boxTA"><%=dto.getContent() %></textarea>
				</dd>
			</dl>
		</div>
		
		<div class="bbsCreated_noLine">
			<dl>
				<dt>패스워드</dt>
				<dd>
				<input type="password" name="pwd" size="35" 
				maxlength="7" class="boxTF"/>
				&nbsp;(게시물 수정 및 삭제시 필요!!)
				</dd>
			</dl>		
		</div>	
	
	</div>
	
	<div id="bbsCreated_footer">
	
		<input type="hidden" name="num" value="<%=dto.getNum()%>"/>
		<input type="hidden" name="pageNum" value="<%=pageNum%>"/>
		<input type="hidden" name="searchKey" value="<%=searchKey%>"/>
		<input type="hidden" name="searchValue" value="<%=searchValue%>"/>
	
	
		<input type="button" value=" 수정하기 " class="btn2" onclick="sendIt();"/>
		<input type="button" value=" 수정취소 " class="btn2" 
		onclick="javascript:location.href='<%=cp%>/board/list.jsp?pageNum=<%=pageNum%><%=param%>';"/>
	</div>
	
	</form>

</div>


</body>
</html>

updated.jsp 실행화면
updated.jsp 실행화면

여기서는 hidden으로 num, pageNum, searchKey, SearchValue를 가지고 들어옵니다.

 

게시판 수정 처리 - updated_ok.jsp

<%@page import="java.net.URLDecoder"%>
<%@page import="java.net.URLEncoder"%>
<%@page import="com.board.BoardDAO"%>
<%@page import="com.util.DBConn"%>
<%@page import="java.sql.Connection"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>

<jsp:useBean id="dto" class="com.board.BoardDTO" scope="page"/>
<jsp:setProperty property="*" name="dto"/>

<%
	String pageNum = request.getParameter("pageNum"); //pageNum을 받아내고

	Connection conn = DBConn.getConnection();
	BoardDAO dao = new BoardDAO(conn);
	
	dao.updateData(dto);
	
	String searchKey = request.getParameter("searchKey");
	String searchValue = request.getParameter("searchValue");
	
	if(searchValue != null) {
			
		if(request.getMethod().equalsIgnoreCase("GET")) {
			searchValue = URLDecoder.decode(searchValue, "UTF-8");
		}
			
	}else {
		searchKey = "subject";
		searchValue = "";
	}
	
	
	String param = "";
	//null이 아니면 검색을 한 것이다.
	if(!searchValue.equals("")) {
		
		//이때 주소를 만들어준다
		param = "&searchKey=" + searchKey;
		param+= "&searchValue=" + URLEncoder.encode(searchValue, "UTF-8");
		
	}
	
	DBConn.close();
	
	response.sendRedirect("list.jsp?pageNum=" + pageNum + param);

%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

</body>
</html>

 

게시판 삭제 처리 - deleted_ok.jsp

<%@page import="java.net.URLEncoder"%>
<%@page import="java.net.URLDecoder"%>
<%@page import="com.board.BoardDAO"%>
<%@page import="com.util.DBConn"%>
<%@page import="java.sql.Connection"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	int num = Integer.parseInt(request.getParameter("num"));
	String pageNum = request.getParameter("pageNum");
	
	Connection conn = DBConn.getConnection();
	BoardDAO dao = new BoardDAO(conn);
	
	dao.deleteData(num);
	
	//가지고 들어오는 코딩
	String searchKey = request.getParameter("searchKey");
	String searchValue = request.getParameter("searchValue");
	
	if(searchValue != null) {
			
		if(request.getMethod().equalsIgnoreCase("GET")) {
			searchValue = URLDecoder.decode(searchValue, "UTF-8");
		}
			
	}else {
		searchKey = "subject";
		searchValue = "";
	}
	
	
	//가지고 나가는 코딩
	String param = "";
	//null이 아니면 검색을 한 것이다.
	if(!searchValue.equals("")) {
		
		//이때 주소를 만들어준다
		param = "&searchKey=" + searchKey;
		param+= "&searchValue=" + URLEncoder.encode(searchValue, "UTF-8");
		
	}
	
	
	
	
	DBConn.close();
	
	response.sendRedirect("list.jsp?pageNum=" + pageNum + param);
	
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

</body>
</html>

 

반응형
저작자표시 비영리

'Back-End > JSP & Struts & JDBC' 카테고리의 다른 글

[Servlet] 서블릿 구조, EL, JSTl  (0) 2022.02.18
[JSP] 방명록 만들기  (0) 2022.02.17
[JSP] 네이버 회원 가입 페이지 DB연동 및 데이터 조회,수정,삭제  (0) 2022.02.15
[JSP] 성적 처리 웹페이지 제작하기(DB연동) - (2)  (0) 2022.02.14
[JSP] 성적 처리 웹페이지 제작하기(DB연동) - (1)  (0) 2022.02.13

블로그의 정보

무작정 개발

무작정 개발

활동하기

티스토리툴바