[Day6] JSP/Servlet 6 - 게시판

[Day6] JSP/Servlet 6 [12/9]

[ JSP + Servlet = 게시판(board) ]

로직처리담당

화면출력담당

days05 > board 폴더 생성

1. JDBC 게시판

http://taeyo.net/ 게시판(board) 테이블 생성

CREATE SEQUENCE seq_tbl_cstVSBoard;

CREATE TABLE tbl_cstVSBoard(

seq NUMBER NOT NULL PRIMARY KEY

, writer VARCHAR2(20) NOT NULL

, pwd VARCHAR2(20) NOT NULL

, email VARCHAR2(100)

, title VARCHAR2(200) NOT NULL

, writedate DATE DEFAULT SYSDATE

, readed NUMBER DEFAULT 0

, tag NUMBER(1) DEFAULT 0 -- 0 텍스트모드 1 HTML모드

, content CLOB

);

2. sql developer 실행 -> 시퀀스 확인, 테이블 확인.

TBL_CSTVSBOARD

SEQ_TBL_CSTVSBOARD

4. BoardDTO.java

BoardDAO.java

BoardDAOImpl.java 복사 + 붙이기

5. a -> Write.java -> write.jsp

서블릿

404 에러 404에러

/jspPro/cstvsboard/wirte.htm

서블릿 url-pattern 확인

<a href="<%= contextPath %>/cstvsboard/wirte.htm">게시판 글 쓰기(Get 방식 요청)</a><br>

* 링크태그니까 GET방식

<%@ include file="/WEB-INF/inc/include.jspf"%>

* 여기 선언된 변수들 사용가능 (contextpath)

Write.java 서블릿 만들기

package days05.board;

import java.io.IOException;
import java.sql.Connection;
import java.sql.SQLException;

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.util.DBConn;

@WebServlet("/cstvsboard/wirte.htm")
public class Write extends HttpServlet {
	private static final long serialVersionUID = 1L;
     
    public Write() {
        super(); 
    }
 
    //             /jspPro/cstvsboard/wirte.htm(get)
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		 // System.out.println("> Write.doGet()  호출됨...");
		
		// (추가) 로그인 O  또는 권한 O 체크 -> 로그인페이지 이동.
		
		// 포워딩 
		//   http://localhost/jspPro/cstvsboard/write.htm		 
		// String path = "board/write.jsp";
		//	 http://localhost/jspPro/cstvsboard/board/write.jsp
		 String path = "/days05/board/write.jsp";
		 //http://localhost/jspPro/days05/board/write.jsp		 
		 RequestDispatcher dispatcher =  request.getRequestDispatcher(path);
		 dispatcher.forward(request, response);
	}
 
    //             /jspPro/cstvsboard/wirte.htm(post)
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		 // System.out.println("> Write.doPost()  호출됨...");
		// 톰캣 8.X         post 요청     ISO 8859-1  한글X ( 교재 인코딩 설명 )
		request.setCharacterEncoding("UTF-8");
		
		 // 입력받은 새 게시글 정보를 얻어와서
		 // DB  insert~
		String writer = request.getParameter("writer") ;
		String pwd = request.getParameter("pwd") ;
		String email = request.getParameter("email") ;
		String title = request.getParameter("title") ;
		String content  = request.getParameter("content") ;
		int tag = Integer.parseInt(  request.getParameter("tag") );
		
		BoardDTO dto = new BoardDTO(0, writer, pwd, email, title, null, 0, tag, content);
		
		Connection conn = DBConn.getConnection();
		BoardDAOImpl dao = new BoardDAOImpl(conn);
		int rowCount = 0;
		try {
			rowCount = dao.insert(dto);
		} catch (SQLException e) {
			System.out.println("> Write.doPost() Exception...");
			e.printStackTrace();
		}
		DBConn.close();
		
		 // 왜 ?  [list.htm     리다이렉트 O] / 포워딩 X
		String location = "/jspPro/cstvsboard/list.htm";
		if( rowCount == 1) {
			location +="?write=success";
		}else {
			location +="?write=fail";
		}
		response.sendRedirect(location);
		
	}

}

* 목록 보여줄때 list htm 나와야하기 때문에 리다이렉트 (POST)

-write.jsp-

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/WEB-INF/inc/include.jspf"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2022. 12. 8. 오후 3:28:25</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
table, td, th {
	border: solid 1px gray;
}

table {
	border-spacing: 3px;
	border-collapse: separate;
}

table, tr, td {
	/* border-radius: 3px; */
	/* padding:3px;  */
	
}
</style>
</head>
<body>
<h3>write.jsp</h3>
<div align="center">
  <h2>글 쓰기</h2>
  <!-- 
       action 속성 생략 : http://localhost/jspPro/cstvsboard/write.htm
     -> Write.java 서블릿 
             -> doPost()
    -->
  <form method="post">
  
  <table style="padding: 2px; width: 600px">
			<tr>
				<td colspan="2" align="center"><b>글을 적어주세요</b></td>
			</tr>
			<tr>
				<td align="center">이름</td>
				<td><input type="text" name="writer" size="15"
					autofocus="autofocus" required="required"></td>
			</tr>
			<tr>
				<td align="center">비밀번호</td>
				<td><input type="password" name="pwd" size="15" required="required"></td>
			</tr>
			<tr>
				<td align="center">Email</td>
				<td><input type="email" name="email" size="50" ></td>
			</tr>
			<tr>
				<td align="center">제목</td>
				<td><input type="text" name="title" size="50" required="required"></td>
			</tr>
			<tr>
				<td align="center">내용</td>
				<td><textarea name="content" cols="50" rows="10"></textarea></td>
			</tr>
			<tr>
				<td align="center">HTML</td>
				<td><input type="radio" name="tag" value="1" checked>적용
					<input type="radio" name="tag" value="0">비적용</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
				  <input type="submit" value="작성 완료">
				  &nbsp;&nbsp;&nbsp; 
				  <input type="reset" value="다시 작성">
				  &nbsp;&nbsp;&nbsp; 
				  <a href="<%= contextPath %>/cstvsboard/list.htm">Home</a>
				</td>
			</tr>
		</table>
  
  </form>
</div>


<script>
    $(function (){
    	$("form").submit(function (){
    		  alert("유효성 검사 체크 한다. ");
    		  // event.preventDefault();
    		  // return false;
    	});
    });
</script>

-list.java-

package days05.board;

import java.io.IOException;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.ArrayList;

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.util.DBConn;

@WebServlet("/cstvsboard/list.htm")
public class List extends HttpServlet {
	private static final long serialVersionUID = 1L;
      
    public List() {
        super(); 
    }
 
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("> Write.doGet()   get+post 호출됨...");
		
		int currentPage = 1 ;                // 현재 페이지. 
		int numberPerPage = 10;         // 한 페이지에 출력할 게시글 수 
		int numberOfPageBlock = 10;  // 페이징 블럭 수   [1] 2 3 4 5 6 7 8 9 10 >  >>
		
		ArrayList<BoardDTO> list = null;
		
		// 페이징 처리
		int totalRecords, totalPages  = 0;
		
		Connection conn =  DBConn.getConnection();
		BoardDAOImpl dao = new BoardDAOImpl(conn);
		
		try {
			list = dao.select(currentPage, numberPerPage);
			// 페이징 처리
			
		} catch (SQLException e) {
			System.out.println("> List.doGet() Exception...");
			e.printStackTrace();
		}
		DBConn.close();
		
		request.setAttribute("list", list);
		// 포워딩
		String path = "/days05/board/list.jsp"; 
		 RequestDispatcher dispatcher =  request.getRequestDispatcher(path);
		 dispatcher.forward(request, response);
		
	}
 
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

-list.jsp-

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/WEB-INF/inc/include.jspf"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2022. 12. 8. 오후 4:45:18</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
table, td, th {
	border: solid 1px gray;
}

table {
	border-spacing: 3px;
	border-collapse: separate;
}

table, tr, td {
	/* border-radius: 3px; */
	/* padding:3px;  */
	
}

tbody tr  td:nth-of-type(2) {
	text-align: left;
}

a {
	text-decoration: none;
	color: black;
}

a:hover {
	color: red;
}
</style>
<!-- 페이징 처리 style -->
<style>
.pagination {
	margin: 0 auto;
	display: flex;
	justify-content: center;
}

.pagination a {
	color: black;
	float: left;
	padding: 4px 8px;
	text-decoration: none;
	transition: background-color .3s;
}

.pagination a.active {
	background-color: dodgerblue;
	color: white;
}

.pagination a:hover:not (.active ) {
	background-color: #ddd;
}
</style>
<style>
.searchWord {
	background-color: yellow;
	color: red;
}
</style>
<style>
.title {
	display: inline-block;
	white-space: nowrap;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
</head>
<body>
<h3>list.jsp</h3>

<div align="center">
  <h2>목록 보기</h2>
  <a href="<%= contextPath %>/cstvsboard/write.htm">글쓰기</a>
  <table style="width:600px;">
    <thead>
	    <tr>
	        <th width="10%">번호</th>
	        <th width="45%">제목</th>
	        <th width="17%">작성자</th>
	        <th width="20%">등록일</th>
	        <th width="10%">조회</th>
	      </tr>
    </thead>
    <tbody>
       <c:choose>
          <c:when test="${ not empty list }">
          
              <c:forEach items="${ list }" var="dto">
                 <tr>
                   <td>${ dto.seq }</td>
                   <td><a href="<%= contextPath %>/cstvsboard/view.htm?seq=${ dto.seq }">${dto.title }</a></td>
                   <td><a href="mailto:${ dto.email }">${ dto.writer }</a></td>
                   <td>${ dto.writedate }</td>
                   <td>${ dto.readed }</td>
                 </tr>
              </c:forEach>
          
          </c:when>
          <c:otherwise>
             <tr>
              <td colspan="5">등록된 게시글이 없습니다.</td>
             </tr>
          </c:otherwise>
       </c:choose>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="5" align="center">
          <div class="pagination">  
            <a href="#" class="active"> 1 </a> 
            <a href="<%= contextPath %>/cstvsboard/list.htm?currentpage=2"> 2 </a> 
            <a href="<%= contextPath %>/cstvsboard/list.htm?currentpage=3"> 3 </a> 
            <a href="<%= contextPath %>/cstvsboard/list.htm?currentpage=4"> 4 </a> 
            <a href="<%= contextPath %>/cstvsboard/list.htm?currentpage=5"> 5 </a> 
            <a href="<%= contextPath %>/cstvsboard/list.htm?currentpage=6"> 6 </a> 
            <a href="<%= contextPath %>/cstvsboard/list.htm?currentpage=7"> 7 </a> 
            <a href="<%= contextPath %>/cstvsboard/list.htm?currentpage=8"> 8 </a> 
            <a href="<%= contextPath %>/cstvsboard/list.htm?currentpage=9"> 9 </a> 
            <a href="<%= contextPath %>/cstvsboard/list.htm?currentpage=10"> 10 </a> 
            <a href="<%= contextPath %>/cstvsboard/list.htm?currentpage=11"> &raquo; </a>  
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="5" align="center">
          <form method="get">
             <select name="searchCondition" id="searchCondition">
              <option value="1">title</option>
              <option value="2">content</option>
              <option value="3">writer</option>
              <option value="4">title+content</option>
            </select>
            <input type="text" name="searchWord" id="searchWord" />
            <input type="submit" value="search" />
          </form>
        </td>
      </tr>
    </tfoot>
  </table>
</div>

글 내용 요청

게시글 목록에서 해당 게시글 클릭하면 이동하게 a태그 걸어주고 -> 쿼리로 seq 둬서 다 다른 태그로 만들어줌 (get, 쿼리로 )

-> 서블릿 View.java -> doGet() {

1) 내용 글 번호 파라미터 ?seq = 381

2) DB 게시글 정보 얻어옴 -> 저장해서 이동시키기 때문에 포워딩

3) 포워딩

list.jsp

       <c:choose>
          <c:when test="${ not empty list }">
          
              <c:forEach items="${ list }" var="dto">
                 <tr>
                   <td>${ dto.seq }</td>
                   <td><a href="<%= contextPath %>/cstvsboard/view.htm?seq=${ dto.seq }">${dto.title }</a></td>
                   <td><a href="mailto:${ dto.email }">${ dto.writer }</a></td>
                   <td>${ dto.writedate }</td>
                   <td>${ dto.readed }</td>
                 </tr>
              </c:forEach>
          
          </c:when>
          <c:otherwise>
             <tr>
              <td colspan="5">등록된 게시글이 없습니다.</td>
             </tr>
          </c:otherwise>
       </c:choose>

View.java

package days05.board;

import java.io.IOException;
import java.sql.Connection;
import java.sql.SQLException;

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.util.DBConn;
 
@WebServlet("/cstvsboard/view.htm")
public class View extends HttpServlet {
	private static final long serialVersionUID = 1L;
      
    public View() {
        super(); 
    }
 
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		 // ?seq=381
        // System.out.println("> View.doGet()  호출됨...");
		// 1.
		 int seq = Integer.parseInt(request.getParameter("seq"));
		 
		 // 2. 해당 게시글의 조회수 1증가 +  해당 게시글 정보를 얻어오는 작업
		 Connection conn =  DBConn.getConnection();
		BoardDAOImpl dao = new BoardDAOImpl(conn);
		
		BoardDTO dto = null; 
		try {
			dao.increaseReaded(seq);
			dto = dao.view(seq);
		} catch (SQLException e) {
			System.out.println("> View.doGet() Exception...");
			e.printStackTrace();
		} 		
		request.setAttribute("dto", dto);
		
         // 3. 포워딩
		 String path = "/days05/board/view.jsp"; 
		 RequestDispatcher dispatcher =  request.getRequestDispatcher(path);
		 dispatcher.forward(request, response);
	}
 
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

- 시쿼스 받아와서 게시글 조회수 +1 & 게시글 정보 얻어오기

view.jsp

<style>
  table{
     border-spacing: 3px;
     border-collapse: separate; 
   }
   table,  tr, td {
      border:solid 1px gray;
      /* border-radius: 3px;  
      padding:3px;   */ 
   }
   
 #tblContent{
   width:600px;
 } 
</style>

</head>
<body>
<h3>view.jsp</h3>
<!-- 11:22 수업시작 -->
<div align="center">
  <h2>내용보기</h2>
  <!-- <table id="tblContent" class="table"> -->
  <table id="tblContent">
   <tr>
       <td>이름</td>
       <td>${ dto.writer }</td>
       <td>등록일</td>
       <td>${ dto.writedate }</td>
   </tr>
   <tr>
       <td>Email</td>
       <td><a href="mailto:${ dto.email }">${ dto.email }</a></td>
       <td>조회</td>
       <td>${ dto.readed }</td>
   </tr>
   <tr>
        <td>제목</td>
        <td colspan="3">${ dto.title }</td>
   </tr>
   <tr>
       <td colspan="4" style="padding:15px;height: 200px;text-align: left;vertical-align: top">
       ${ dto.content }
       </td>
   </tr>
   <tr>
       <td colspan="4" align="center">
           <a class="btn btn-secondary"  href="<%= contextPath %>/cstvsboard/edit.htm?seq=${ dto.seq }" id="editLink">수정하기</a>
           <a class="btn btn-secondary"  href="<%= contextPath %>/cstvsboard/delete.htm?seq=${ dto.seq }" id="deleteLink">삭제하기</a>
           <a class="btn btn-secondary"  href="<%= contextPath %>/cstvsboard/list.htm" id="homeLink">HOme</a>
           
           <input class="btn btn-secondary"  type="button"  id="btnModalDelete" value="모달창으로 글삭제">
       </td>
   </tr>
</table>
</div>

<!-- 삭제 모달창 div 태그 -->
<div id="dialog-form" align="center"  title="삭제">
  <h2>삭제하기</h2>
  <form method="post"  action="<%= contextPath%>/cstvsboard/delete.htm?seq=${ param.seq}">
	<table>
	  <tr>
	    <td colspan="2" align="center"><b>글을 삭제합니다</b></td>
	  </tr>
	  <tr>
	    <td align="center">비밀번호</td>
	    <td>
	      <input type="password" name="pwd" size="15" autofocus="autofocus">
	    </td>
	  </tr>
	  <tr>
	    <td colspan="2" align="center">
	      <input type="submit" value="삭제">&nbsp;&nbsp;
	      <input type="button" id="cancel" value="취소">
	    </td>
	  </tr>
	</table>
  </form>
</div>

<script>
  // 1. 
  dialog = $("#dialog-form").dialog({
	  autoOpen: false,
      height: 400,
      width: 350,
      modal: true,
      buttons:{},
      close: function (){
    	  form[0].reset();
      }
  });
  
  //2.
  form = dialog.find("form");
  
 // 3. 모달창 열기
  $("#btnModalDelete").on("click", function(event) {
	  dialog.dialog("open" ); 
  })
  // 4. 모달창 닫기
  $("#cancel").on("click", function(event) {
	  dialog.dialog("close" ); 
  })
</script>

<script>
    // view.jsp
    // edit.htm?seq=350&edit=success
	   if(  '<%=  request.getParameter("edit") %>'  == 'success' ){
		   alert("글 수정 완료!!!")
	   }else if( '<%=  request.getParameter("edit") %>'  == 'fail' ){
		   alert("글 수정 실패( 비밀번호 잘못)!!!")
	   }
</script>

페이징 처리

[1] 2 3 4 5 6 7 8 9 10

시작번호 끝번호

페이징블럭수(10)

이전버튼

다음버튼

알아야하는 것 : 총레코드수, 총페이지수, 페이징 블럭수

Pageblock

package days05.board;

public class PageBlock {
	// 필드
	private int currentPage;   // 현재페이지
	private int numberPerPage = 10; // 한 페이지 출력 게시글 수 
	private int numberOfPageBlock = 10; // 페이징 블럭 수 
	private int startOfPageBlock = 1;  // 시작 번호    1 2 [3] 4 5 6 7 8 9 10 >
	private int endOfPageBlock ;  // 끝 번호
	private boolean prev, next;    // 이전 버트, 다음 버튼
	 
	// 생성자
	public PageBlock() {
		super(); 
	} 
	
	public PageBlock(int currentPage, int numberPerPage, int numberOfPageBlock, int startOfPageBlock,
			int endOfPageBlock, boolean prev, boolean next) {
		super();
		this.currentPage = currentPage;
		this.numberPerPage = numberPerPage;
		this.numberOfPageBlock = numberOfPageBlock;
		this.startOfPageBlock = startOfPageBlock;
		this.endOfPageBlock = endOfPageBlock;
		this.prev = prev;
		this.next = next;
	}


	// getter, setter
	public int getCurrentPage() {
		return currentPage;
	}
	public void setCurrentPage(int currentPage) {
		this.currentPage = currentPage;
	}
	public int getNumberPerPage() {
		return numberPerPage;
	}
	public void setNumberPerPage(int numberPerPage) {
		this.numberPerPage = numberPerPage;
	}
	public int getNumberOfPageBlock() {
		return numberOfPageBlock;
	}
	public void setNumberOfPageBlock(int numberOfPageBlock) {
		this.numberOfPageBlock = numberOfPageBlock;
	}
	public int getStartOfPageBlock() {
		return startOfPageBlock;
	}
	public void setStartOfPageBlock(int startOfPageBlock) {
		this.startOfPageBlock = startOfPageBlock;
	}
	public int getEndOfPageBlock() {
		return endOfPageBlock;
	}
	public void setEndOfPageBlock(int endOfPageBlock) {
		this.endOfPageBlock = endOfPageBlock;
	}
	public boolean isPrev() {
		return prev;
	}
	public void setPrev(boolean prev) {
		this.prev = prev;
	}
	public boolean isNext() {
		return next;
	}
	public void setNext(boolean next) {
		this.next = next;
	}
	
	
	

}

- 순서

1) PageBlock 클래스 선언

2) List.java 서블릿

PageBlock

request.setAttribute("",)

		int currentPage = 1 ;                // 현재 페이지. 
		try {  currentPage=Integer.parseInt(request.getParameter("currentpage")) ;}catch(Exception e) {}
		
		int numberPerPage = 10;         // 한 페이지에 출력할 게시글 수 
		int numberOfPageBlock = 10;  // 페이징 블럭 수   [1] 2 3 4 5 6 7 8 9 10 >  >>
        
        			// 페이징 처리
			pageBlock = pagingService(currentPage,  numberPerPage,  numberOfPageBlock , dao
					                      , searchCondition, searchWord );

	// 복사 붙이기 JDBC BoardService. pagingService()
    public PageBlock  pagingService(int currentPage, int numberPerPage, int numberOfPageBlock, BoardDAOImpl dao
    		, int searchCondition, String searchWord ) {
		
		 PageBlock pageBlock = null;
		
		    int totalRecords =0;		
			int totalPages   = 1; 
		try {
			
			// [검색 페이징 처리  수정 코딩 부분] 3 S
			if( searchWord == "" ) {
				  totalRecords = dao.getTotalRecords()  ;		                    // 전체 레코드 수		
				  totalPages    =   dao.getTotalPages( numberPerPage )  ; // 전체 페이지 수
			}else {
				  totalRecords = dao.getTotalRecords(searchCondition, searchWord); 	// 검색된 결과의 레코드 수 
				  totalPages    =   dao.getTotalPages( numberPerPage,searchCondition, searchWord )  ; // 검색된 페이지 수 
			}
			// [검색 페이징 처리  수정 코딩 부분] 3 E
   			  
				
				
				int begin = ( currentPage - 1)/numberOfPageBlock * numberOfPageBlock + 1;
				int end    = begin + numberOfPageBlock - 1;
				if( end > totalPages )  end = totalPages;
				  
				boolean prev =   begin == 1 ?  false : true;
				boolean next  =  end == totalPages ? false: true;
				
				pageBlock = new PageBlock(currentPage, numberPerPage, numberOfPageBlock ,begin, end, prev,  next);
				
		} catch( SQLException e) {
			e.printStackTrace();
		}
		
		
		return pageBlock;
	}

} // class

3) list.jsp

        <td colspan="5" align="center">
          <div class="pagination">  
          <%-- 
            <a href="#" class="active"> 1 </a> 
            <a href="<%= contextPath %>/cstvsboard/list.htm?currentpage=2"> 2 </a> 
            <a href="<%= contextPath %>/cstvsboard/list.htm?currentpage=3"> 3 </a> 
            <a href="<%= contextPath %>/cstvsboard/list.htm?currentpage=4"> 4 </a> 
            <a href="<%= contextPath %>/cstvsboard/list.htm?currentpage=5"> 5 </a> 
            <a href="<%= contextPath %>/cstvsboard/list.htm?currentpage=6"> 6 </a> 
            <a href="<%= contextPath %>/cstvsboard/list.htm?currentpage=7"> 7 </a> 
            <a href="<%= contextPath %>/cstvsboard/list.htm?currentpage=8"> 8 </a> 
            <a href="<%= contextPath %>/cstvsboard/list.htm?currentpage=9"> 9 </a> 
            <a href="<%= contextPath %>/cstvsboard/list.htm?currentpage=10"> 10 </a> 
            <a href="<%= contextPath %>/cstvsboard/list.htm?currentpage=11"> &raquo; </a>
             --%>  
     
             <c:if test="${ pageBlock.prev }">
                  <a href="<%= contextPath %>/cstvsboard/list.htm?currentpage=${  pageBlock.startOfPageBlock - 1  }"> &laquo; </a>
             </c:if>
             <c:forEach begin="${  pageBlock.startOfPageBlock  }" end="${  pageBlock.endOfPageBlock  }" var="i" step="1">
                 <c:choose> 
                    <c:when test="${ pageBlock.currentPage eq i }">
                       <a href="#" class="active">${ i }</a> 
                    </c:when>
                    <c:otherwise>
                       <a href="<%= contextPath %>/cstvsboard/list.htm?currentpage=${ i }">${ i }</a> 
                    </c:otherwise>
                 </c:choose>
             </c:forEach>
             <c:if test="${ pageBlock.next }">
                  <a href="<%= contextPath %>/cstvsboard/list.htm?currentpage=${  pageBlock.endOfPageBlock + 1  }"> &raquo; </a>
             </c:if>

검색처리

list.htm?searchCondition=2&searchWord=~

-> List.java 서블릿 호출

파라미터로 검색어 넘어오지않으면

//목록

list = dao.select(c,n);

파라미터로 검색어 넘어오면

//검색목록

list = dao.search(c,n,sc,sw);

list.java

검색 수정된 부분

		// [검색 추가 코딩 부분] 1 S
		int searchCondition = 1;
		try {  searchCondition=Integer.parseInt(request.getParameter("searchCondition")) ;}catch(Exception e) {}		
		// list.htm?searchWord=             ""  + // list.htm                                     null
		String searchWord =  request.getParameter("searchWord") == null ? "" :  request.getParameter("searchWord");
		// [검색 추가 코딩 부분] 1 E
		
		ArrayList<BoardDTO> list = null;
		
		// 페이징 처리
		int totalRecords, totalPages  = 0;
		
		Connection conn =  DBConn.getConnection();
		BoardDAOImpl dao = new BoardDAOImpl(conn);
		PageBlock pageBlock = null;
		
		try {
			// [검색 수정 코딩 부분] 2 S
			if( searchWord == "" ) {
			     list = dao.select(currentPage, numberPerPage);
			}else {
			     list = dao.search(currentPage, numberPerPage, searchCondition, searchWord);
			}
			// [검색 수정 코딩 부분] 2 E
			// 페이징 처리
			pageBlock = pagingService(currentPage,  numberPerPage,  numberOfPageBlock , dao
					                      , searchCondition, searchWord );

검색상태관리 js

	   // 검색 상태 관리
	   $("#searchCondition").val(   '${  empty param.searchCondition? 1 :  param.searchCondition }'        );
	   $("#searchWord").val( '${ param.searchWord}' );

			// [검색 페이징 처리  수정 코딩 부분] 3 S
			if( searchWord == "" ) {
				  totalRecords = dao.getTotalRecords()  ;		                    // 전체 레코드 수		
				  totalPages    =   dao.getTotalPages( numberPerPage )  ; // 전체 페이지 수
			}else {
				  totalRecords = dao.getTotalRecords(searchCondition, searchWord); 	// 검색된 결과의 레코드 수 
				  totalPages    =   dao.getTotalPages( numberPerPage,searchCondition, searchWord )  ; // 검색된 페이지 수 
			}
			// [검색 페이징 처리  수정 코딩 부분] 3 E

	    //   /jspPro/cstvsboard/list.htm?currentpage=2           + &searchCondition=1&searchWord=title+-+30
	   $(".pagination a:not(.active)").attr("href" , function (i,val){
		   return val + "&searchCondition=${ param.searchCondition}&searchWord=${ param.searchWord}";
	   });

문제점1

-> 검색어와 검색조건이 있는경우 (파라미터 들어올경우) -> 검색어를 달고 페이지 2번페이지를 나오게 하기 위해서

-> active 가지지 않은 a -> 현재 페이지 제외 코딩으로 파라미터 제외 검색달고있는거 붙이겠다는말

(2번페이지 누를때 검색조건의 2번페이지기 설정하기위한 코딩)

문제점2

2) 검색한후 2번페이지 보고있는데 하나의 게시글선택하고 돌아가기/홈 누를때 검색한 것의 2번페이지로 돌아가게하기

(과제..)

[글목록] -> 하나의 게시글의 제목 클릭 -> 글 상세보기

list.htm view.htm?seq=381 View.java view.jsp

list.jsp

view.jsp에서 [수정, 삭제] 클릭 -> /jspPro/cstvsboard/delete/htm?seq=340

delete.java 서블릿 + doGet 구현

delete.java

package days05.board;

import java.io.IOException;
import java.sql.Connection;
import java.sql.SQLException;

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.util.DBConn;
 
@WebServlet("/cstvsboard/delete.htm")
public class Delete extends HttpServlet {
	private static final long serialVersionUID = 1L;
      
    public Delete() {
        super(); 
    }
 
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// System.out.println("> Delete.doGet()  호출됨...");
		// delete.htm?seq=340
		// 바로 삭제하고 난 후 글 목록 이동 X
		
		// 삭제할 권한 X /  작성자 확인 (  로그인 X, 비밀번호 입력받아서 ..  ) 
		String path = "/days05/board/delete.jsp"; 
		 RequestDispatcher dispatcher =  request.getRequestDispatcher(path);
		 dispatcher.forward(request, response);
	}
 
	// delete.htm?seq=340
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// delete.jsp 페이지에서 비밀번호를 입력하고 삭제버튼을 클릭하면 ... 
		// System.out.println("> Delete.doPost()  호출됨...");
		request.setCharacterEncoding("UTF-8");
		
		int seq = Integer.parseInt(  request.getParameter("seq") ); // 삭제할 글 번호
		String pwd = request.getParameter("pwd");  // 입력받은 비밀번호
		
		Connection conn = DBConn.getConnection();
		BoardDAOImpl dao = new BoardDAOImpl(conn);
		int rowCount = 0;
		try {
			String originalPwd = dao.getOriginalPwd(seq);
			
			if( originalPwd.equals(pwd) ) {
				// 해당 게시글은 삭제하고 목록 페이지 으로 이동.
				rowCount = dao.delete(seq);
			}else {
				// 비밀번호가 잘못되었다고 경고창을 띄우고 다시 비밀번호 입력하는  삭제페이지(delete.htm)로 이동.
				request.setAttribute("error", "비밀번호가 틀립니다.");
				doGet(request, response);
				return ;
			}
		} catch (SQLException e) {
			System.out.println("> Delete.doPost() Exception...");
			e.printStackTrace();
		}
		DBConn.close();
		
		// 포워딩 / [리다이렉트 O ]
		String location = "/jspPro/cstvsboard/list.htm";
		if( rowCount == 1) {
			location +="?delete=success";
		}else {
			location +="?delete=fail";
		}
		response.sendRedirect(location);
		
	} // doPost

}

* 삭제할 권한 체크 (원래 관리자, 여기선 작성자 확인 - 로그인한사람만)

* 비밀번호 입력받아서 삭제하는 작업

delete.jsp

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/WEB-INF/inc/include.jspf" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2022. 12. 9. 오후 3:38:00</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
 table , td, th {
   border:solid 1px gray;
 }
 table{
     border-spacing: 3px;
     border-collapse: separate;
   }
   table,  tr, td {
    /* border-radius: 3px; */
    /* padding:3px;  */
   }
 table{
    width: 600px;
 }
</style>
</head>
<body>
<h3>delete.jsp</h3>

<div align="center">
  <h2>삭제하기</h2>
  <form method="post">
	<table>
	  <tr>
	    <td colspan="2" align="center"><b>글을 삭제합니다</b></td>
	  </tr>
	  <tr>
	    <td align="center">비밀번호</td>
	    <td>
	      <input type="password" name="pwd" size="15" autofocus="autofocus">
	    </td>
	  </tr>
	  <tr>
	    <td colspan="2" align="center">
	      <input type="submit" value="삭제">&nbsp;&nbsp;
	      <input type="button" id="cancel" value="취소">
	    </td>
	  </tr>
	</table>
  </form>
</div>

<script>
<%
      String pwdError = (String)request.getAttribute("error");
       if(  pwdError != null){
 %>
              alert( '<%= pwdError %>');
 <%
       }
%> 
</script>

pwd 입력 -> post -> delete.java doPost 비밀번호체크

삭제후 목록 보낸다면 redirect (새로운 url 떠야함)

비번틀리다면 doGet으로 포워딩(이미구현되어있음) - request.setAttribute("error", '비밀번호가틀립니다') 메세지 달고가기

+ 에러메세지 delete.jsp 에서 나오게

글수정

edit.java

package days05.board;

import java.io.IOException;
import java.sql.Connection;
import java.sql.SQLException;

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.util.DBConn;

@WebServlet("/cstvsboard/edit.htm")
public class Edit extends HttpServlet {
	private static final long serialVersionUID = 1L;
     
    public Edit() {
        super(); 
    }
 
    
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		 // System.out.println("> Edit.doGet()  호출됨...");
		// 1.
		int seq = Integer.parseInt(  request.getParameter("seq") );  // 수정할 글번호
		// 2.
		Connection conn =  DBConn.getConnection();
		BoardDAOImpl dao = new BoardDAOImpl(conn);
		
		BoardDTO dto = null; 
		try {			
			dto = dao.view(seq);
		} catch (SQLException e) {
			System.out.println("> Edit.doGet() Exception...");
			e.printStackTrace();
		} 		
		request.setAttribute("dto", dto);
		// 3. 포워딩
		 String path = "/days05/board/edit.jsp";    // write.jsp 똑같아..
		 RequestDispatcher dispatcher =  request.getRequestDispatcher(path);
		 dispatcher.forward(request, response);
	}
 
    //             /jspPro/cstvsboard/edit.htm?seq=350  글 수정
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {		
		request.setCharacterEncoding("UTF-8");
		
		int seq = Integer.parseInt(request.getParameter("seq"));
		
		 // 입력받은 새 게시글 정보를 얻어와서
		 // DB  insert~
		// String writer = request.getParameter("writer") ;
		String pwd = request.getParameter("pwd") ;
		String email = request.getParameter("email") ;
		String title = request.getParameter("title") ;
		String content  = request.getParameter("content") ;
		int tag = Integer.parseInt(  request.getParameter("tag") );
		
		BoardDTO dto = new BoardDTO(seq, null, pwd, email, title, null, 0, tag, content);
		
		Connection conn = DBConn.getConnection();
		BoardDAOImpl dao = new BoardDAOImpl(conn);
		int rowCount = 0;
		try {
			rowCount = dao.update(dto);
		} catch (SQLException e) {
			System.out.println("> Edit.doPost() Exception...");
			e.printStackTrace();
		}
		DBConn.close();
		
		 // 왜 ?  [list.htm     리다이렉트 O] / 포워딩 X
		String location = "/jspPro/cstvsboard/view.htm?seq="+ seq;
		if( rowCount == 1) {
			location +="&edit=success";
		}else {
			location +="&edit=fail";
		}
		response.sendRedirect(location);	
	}
}

edit.jsp

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/WEB-INF/inc/include.jspf"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2022. 12. 8. 오후 3:28:25</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
table, td, th {
	border: solid 1px gray;
}

table {
	border-spacing: 3px;
	border-collapse: separate;
}

table, tr, td {
	/* border-radius: 3px; */
	/* padding:3px;  */
	
}
</style>
</head>
<body>
<h3>edit.jsp</h3>
 
<div align="center">
  <h2>글 수정</h2>
  
  <form method="post">
  
  <table style="padding: 2px; width: 600px">
			<tr>
				<td colspan="2" align="center"><b>글을 수정합니다.</b></td>
			</tr>
			<tr>
				<td align="center">이름</td>
				<td><input type="text" name="writer" size="15"   value="${ dto.writer }"   disabled="disabled"></td>
			</tr>
			<tr>
				<td align="center">비밀번호</td>
				<td><input type="password" name="pwd" size="15" required="required"></td>
			</tr>
			<tr>
				<td align="center">Email</td>
				<td><input type="email" name="email" size="50"   value="${ dto.email }"></td>
			</tr>
			<tr>
				<td align="center">제목</td>
				<td><input type="text" name="title" size="50" required="required"  value="${ dto.title }"  autofocus="autofocus"></td>
			</tr>
			<tr>
				<td align="center">내용</td>
				<td><textarea name="content" cols="50" rows="10">${ dto.content }</textarea></td>
			</tr>
			<tr>
				<td align="center">HTML</td>
				<td>
				    <input type="radio" name="tag" value="1" >적용
					<input type="radio" name="tag" value="0">비적용
					<script>
					    $(":radio[name=tag][value=${ dto.tag }]").attr("checked", "checked");
					</script>
			    </td>
			</tr>
			<tr>
				<td colspan="2" align="center">
				  <input type="submit" value="작성 완료">
				  &nbsp;&nbsp;&nbsp;				  
				  <input type="button" onclick="history.back()" value="이전으로">
				</td>
			</tr>
		</table>
  
  </form>
</div>


<script>
    $(function (){
    	$("form").submit(function (){
    		  alert("유효성 검사 체크 한다. ");
    		  // event.preventDefault();
    		  // return false;
    	});
    });
</script>
</body>
</html>

* Post로 보낼시 똑같은 값이 넘어가기 때문에 request로 seq받아올 수 있음

* view로 넘겨주고(리다이렉트 - view로 이동시킴)

* view에서 수정 완료 알람나오게

[모달창으로 삭제]

view.jsp

<!-- 삭제 모달창 div 태그 -->
<div id="dialog-form" align="center"  title="삭제">
  <h2>삭제하기</h2>
  <form method="post"  action="<%= contextPath%>/cstvsboard/delete.htm?seq=${ param.seq}">
	<table>
	  <tr>
	    <td colspan="2" align="center"><b>글을 삭제합니다</b></td>
	  </tr>
	  <tr>
	    <td align="center">비밀번호</td>
	    <td>
	      <input type="password" name="pwd" size="15" autofocus="autofocus">
	    </td>
	  </tr>
	  <tr>
	    <td colspan="2" align="center">
	      <input type="submit" value="삭제">&nbsp;&nbsp;
	      <input type="button" id="cancel" value="취소">
	    </td>
	  </tr>
	</table>
  </form>
</div>

<script>
  // 1. 
  dialog = $("#dialog-form").dialog({
	  autoOpen: false,
      height: 400,
      width: 350,
      modal: true,
      buttons:{},
      close: function (){
    	  form[0].reset();
      }
  });
  
  //2.
  form = dialog.find("form");
  
 // 3. 모달창 열기
  $("#btnModalDelete").on("click", function(event) {
	  dialog.dialog("open" ); 
  })
  // 4. 모달창 닫기
  $("#cancel").on("click", function(event) {
	  dialog.dialog("close" ); 
  })
</script>

저작자표시

'👨‍💻 Web Development > JDBC | JSP | Servlet' 카테고리의 다른 글

[Day8] JSP/Servlet 8 - 세션+, EL, EL쿠키, JSTL (0)	2022.12.17
[Day7] JSP/Servlet 7 - 쿠키, 세션, 커넥션 풀 (0)	2022.12.16
[Day5] JSP/Servlet 5 - JSP 4scope, 에러페이지, 모듈화(include), 자바빈(javabean) (0)	2022.12.15
[Day4] JSP/Servlet 4 - 웹작동원리, 테이블포워딩, accordion, tabs, 출력버퍼, JSP 기본객체9 (0)	2022.12.14
[Day3] JSP/Servlet 3 - request객체 파라미터, 리다이렉트, 포워딩, jstl, get/post (0)	2022.12.09

[Day6] JSP/Servlet 6 - 게시판

[Day6] JSP/Servlet 6 [12/9]

'👨‍💻 Web Development > JDBC | JSP | Servlet' 카테고리의 다른 글

전체 카테고리

블로그 인기글

티스토리툴바

[Day6] JSP/Servlet 6 [12/9]

'👨‍💻 Web Development > JDBC | JSP | Servlet' 카테고리의 다른 글

전체 카테고리

최근 글

최근댓글

블로그 인기글

티스토리툴바