[JSP 게시판] Model 2 JSP/Servlet 게시판 만들기(7) - 게시판 페이지 번호/게시판 글 목록/게시판 글 목록 화면 구현

web.xml

- 본격적으로 게시판 관련 Action 클래스와 Action 클래스에 데이터를 요청하고 출력하는 뷰 페이지 구현을 위해

  web.xml에 게시판 관련 서블릿 매핑을 하겠습니다.

- 게시판 관련 요청은 '*.bo'로 통일하겠습니다.

<?xml version="1.0" encoding="UTF-8"?>
<web-app>
    <servlet>
        <servlet-name>MemberController</servlet-name>
        <servlet-class>jsp.front.controller.MemberController</servlet-class>
        <init-param>
            <param-name>propertyConfig</param-name>
            <param-value>(절대경로)\JSP_BOARD\src\jsp\member\properties\member.properties</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>MemberController</servlet-name>
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>
    <servlet>
        <servlet-name>BoardController</servlet-name>
        <servlet-class>jsp.front.controller.BoardController</servlet-class>
        <init-param>
            <param-name>propertyConfig</param-name>
            <param-value>(절대경로)\JSP_BOARD\src\jsp\board\properties\board.properties</param-value>        
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>BoardController</servlet-name>
        <url-pattern>*.bo</url-pattern>
    </servlet-mapping>
</web-app>

- (절대경로) 부분에는 본인 컴퓨터 디렉토리에 맞춰 경로를 입력해주시면 됩니다.

 

 

 

 

BoardController.java

- 우선 만들고 있는 웹 사이트가 어떤 방식으로 동작하고 있는지 다시 확인해보겠습니다.

모델 2 게시판 구조

- 사용자는 1차적으로 '*.do' 혹은 '*.bo'로 요청을 합니다.

- 이러한 요청에 제일 먼저 응답하는 것은 Controller입니다.

- 컨트롤러는 요청을 처리할 Action 클래스를 호출합니다.

- Action 클래스는 DAO, Bean과 같은 모델 객체를 이용하여 DB에 접근하여 데이터를 처리합니다.

- 게시판도 이러한 흐름으로 하나씩 확인해보겠습니다.

- 우선 header.jsp에서 게시판 버튼을 클릭하면 'BoardListAction.bo'로 이동하도록 되어 있습니다.

header.jsp

- '*.bo'로 들어오는 모든 요청은 컨트롤러에서 우선적으로 처리하도록 web.xml에서 서블릿 매핑되어 있습니다.

 

package jsp.front.controller;
 
import java.io.FileInputStream;
import java.io.IOException;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Properties;
 
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import jsp.board.action.BoardFormChangeAction;
import jsp.common.action.Action;
import jsp.common.action.ActionForward;
 
// 게시판 관련 컨트롤러
 
public class BoardController extends HttpServlet {
    
    private HashMap<String, Action> commandMap;
    
    //명령어와 처리클래스가 매핑된 properties 파일을 읽어 Map객체에 저장
    public void init(ServletConfig config) throws ServletException { //서블렛 초기화
        super.init(config);
        String props = config.getInitParameter("propertyConfig"); //web.xml에서 설정한 프로퍼티 name
        Properties properties = new Properties(); //명령어와 처리클래스의 매핑 정보를 저장할 프로퍼티 객체
        FileInputStream fis = null;
        commandMap = new HashMap<String, Action>();
        try {
            fis = new FileInputStream(props); //board.properties 파일을 fis에 넣기
            properties.load(fis); //board.properties를 properties 객체에 저장하기
        } catch (IOException e) {
            e.printStackTrace(); //오류 처리
        } finally {
            if(fis!=null) { //fis에 값이 있다면
                try {
                    fis.close(); //FileInputStream 닫기
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
        
        Iterator iterator = properties.keySet().iterator(); //프로퍼티 객체의 키 값을 iterator 객체에 저장
        while(iterator.hasNext()) {
            String key = (String)iterator.next(); //프로퍼티 key 값
            String value = properties.getProperty(key); //프로터피 value 값
            System.out.println(key); 
            System.out.println(value); 
            try {
                Class commandClass = Class.forName(value); //해당 문자열을 클래스로 만들기
                Action actionInstance = (Action)commandClass.getDeclaredConstructor().newInstance(); //클래스의 객체를 생성
                System.out.println(actionInstance);
                
                if(value.equals("jsp.board.action.BoardFormChangeAction")) { //value 값이 jsp.member.action.BoardFormChangeAction이라면
                    BoardFormChangeAction changeAction = (BoardFormChangeAction) actionInstance; // BoardFormChangeAction 객체 생성
                    changeAction.setCommand(key); //changeAction 객체에 key값 세팅
                }
                
                commandMap.put(key, actionInstance); //map에 키값과 value값 객체 저장
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
    
    //post나 get요청이 들어오면 실행되는 메소드
    protected void process(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String URI = null;
        ActionForward forward = null;
        Action action = null;
        
        try {
            URI = request.getRequestURI();  //요청한 URI를 가져오기
            System.out.println(URI);
            String command = URI.substring(URI.lastIndexOf("/")+1);
            System.out.println(command);
            action = commandMap.get(command); //command = KEY값, key값으로 value값 얻기
            System.out.println(action);
            if(action == null) { //properties에 해당 key값에 대한 value값 설정이 안되어있을 때
                System.out.println("not found : "+command);
                return;
            }
            
            forward = action.execute(request, response); //execute() 호출
            String path = forward.getPath(); //경로설정
            System.out.println("path "+path);
            System.out.println(forward);
            
            if(forward != null) {
                if(forward.isRedirect()) {
                    response.sendRedirect(forward.getPath());
                } else {
                    //getRequestDispatcher(상대경로)
                    RequestDispatcher dispatcher = request.getRequestDispatcher(forward.getPath());
                    dispatcher.forward(request, response);
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }    
    
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        process(request, response);
    }
    
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        process(request, response);
    }
    
    
}
 

- BoardController.java 클래스입니다.

- 기본적인 내용은 MemberController.java와 동일하므로 내용에 대한 설명은 아래 링크를 참고해주세요.

 

MemberController에 대한 설명 보러 가기

 

 

 

 

 

BoardFormChangeAction.java

- 게시판의 화면 전환은 BoardFormChangeAction 클래스가 담당합니다.

- 컨트롤러에서 board.properties의 값을 가져오는데,

  value 값이 'jsp.board.action.BoardFormChangeAction'인 '*.bo'에 대한 요청은

  BoardFormChangeAction 클래스에서 경로 설정을 담당합니다.

package jsp.board.action;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import jsp.common.action.Action;
import jsp.common.action.ActionForward;
 
public class BoardFormChangeAction implements Action{
    
    private String form = "main.jsp?contentPage=views/board/";
    private String path;
    
    public void setCommand(String command) {
        int idx = command.indexOf(".");
        path = command.substring(0, idx)+".jsp";
        System.out.println(path);
    }
 
    @Override
    public ActionForward execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
        ActionForward forward = new ActionForward();
        
        forward.setRedirect(false);
        
        if(path.equals("main.jsp")) {
            forward.setPath(path);
            System.out.println(path);
        } else {
            forward.setPath(form+path);
        }
        
        return forward;
    }
}

- BoardFormChangeAction입니다.

- 각 코드는 MemberFormChangeAction과 동일하기 때문에 설명은 아래 링크로 대신하겠습니다.

 

MemberFormChangeAction에 대한 설명 보러 가기

 

 

 

 

 

BoardListAction.java

package jsp.board.action;
 
import java.util.ArrayList;
import java.util.HashMap;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import jsp.board.model.BoardBean;
import jsp.board.model.BoardDAO;
import jsp.common.action.Action;
import jsp.common.action.ActionForward;
 
// 게시판 글 목록을 가져오는 Action 클래스
public class BoardListAction implements Action{
 
    @Override
    public ActionForward execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
        
        ActionForward forward = new ActionForward();
        
        int page = 1; //페이지 초기값
        String pages = request.getParameter("page"); //"page"파라미터 값 가져오기
        System.out.println("페이지는 ?"+pages);
        
        if(pages != null && !pages.equals("")) { //파라미터로 전달 받은 page 값이 있다면 페이지 값을 전달받은 페이지 값으로 설정
            page = Integer.parseInt(pages);
        }
        
        String option = request.getParameter("option"); //"option"(검색조건)파라미터 값 가져오기
        String condition = request.getParameter("condition");//"condition"(검색내용)파라미터 값 가져오기
        
        HashMap<String, Object> list = new HashMap<String, Object>(); // 검색조건과 검색내용을 HashMap 객체에 담기
        list.put("option", option);
        list.put("condition", condition);
        
        BoardDAO bDAO = BoardDAO.getInstance();
        //게시글의 개수를 가져오기
        int listCount = bDAO.getBoardListCount(list); 
        
        //한 화면에 10개읠 게시글
        //페이지 번호는 총 5개
        //이후 다음으로 표시
        
        //전체 페이지 수
        int maxPage = (int)((listCount/10.0) + 0.9);
        
        
        //주소창에 maxPage보다 높은 값을 입력하면 maxPage를 보여줌
        if(page > maxPage) {
            page = maxPage;
        }
        
        //시작페이지(start) 번호 세팅 ex) 1페이지 1, 2페이지 11, 3페이지 21
        list.put("start", (page*10)-9);
        
        //글 목록 가져오기
        ArrayList<BoardBean> arrayList = bDAO.getBoardList(list);
        
        //시작 페이지 번호
        int startPage = (((int)((page/5.0) + 0.8)) * 5)-4;
        
        //마지막 페이지 번호
        int endPage = startPage+4;
        
        //마지막 페이지 번호가 maxPage보다 크면 endPage = maxPage
        if(endPage > maxPage) {
            endPage = maxPage;
        }
        
        request.setAttribute("page", page);
        System.out.println("page는 ? "+page);
        request.setAttribute("startPage", startPage);
        System.out.println("Start는 ? "+startPage);
        request.setAttribute("endPage", endPage);
        System.out.println("end는 ? "+endPage);
        request.setAttribute("maxPage", maxPage);
        System.out.println("max는 ? "+maxPage);
        
        //글의 총 수와 글목록 저장
        request.setAttribute("arrayList", arrayList);
        
        //forward하기
        forward.setRedirect(false);
        forward.setPath("BoardListForm.bo");
        
        return forward;
    }
}
 

- BoardListAction.java 클래스입니다.

- 우선 페이지의 초기값을 지정해줍니다.(22번째 줄)

- 메인화면에서 게시판의 목록을 불러오는 경우 파라미터로 전달되는 값이 없기 때문에

  페이지의 초기값은 항상 1입니다. 

- 하지만 예를 들어, 게시판 목록이 전부 구현된 후에 6페이지의 어떤 글을 상세보기 하고

  글 목록을 누른 경우, 페이지의 초기값이 1이 되면 안 되고 6이 되어야 합니다.

- 따라서 BoardListAction 클래스에서는 페이지 값으로 전달되는 파라미터가 있다면

  그 값을 초기 페이지 값으로 세팅해줘야 합니다.(23~28번째 줄)

- 또한 검색 조건을 선택하고 검색 내용을 입력하면 그에 맞는 게시판 목록을 출력할 것이기 때문에

  검색 조건을 선택하고 검색 내용을 입력했다면, 그 값도 파라미터로 전달받아

  BoardListAction 클래스에서 값을 세팅해줘야 합니다.(30~35번째 줄)

- 이후 BoardDAO의 객체를 생성해 BoardDAO의 'getBoardListCount()'메서드를 호출합니다.(37~39번째 줄)

- getBoardListCount() 메서드는 검색한 글의 개수나 전체 글의 개수를 가져오는 메서드입니다.

- 반환받은 전체 글의 개수를 이용해 maxPage값을 설정해줍니다.(46번째 줄)

- 만약 주소창에 입력되어 전달받은 page 파라미터 값이 설정된 maxPage 보다 높다면,

  page값을 maxPage로 세팅해줍니다.(50~51번째 줄)

- list 객체에 시작 페이지 글 번호를 세팅해줍니다.(55번째 줄)

- BoardDAO 객체를 이용해 'getBoardList()'메서드를 호출하고 ArrayList 객체에 담아줍니다.(58번째 줄)

- page값을 이용해 시작페이지와 마지막 페이지를 세팅해줍니다.(60~64번째 줄)

- 시작페이지, 마지막 페이지, 현재 페이지, 최대 페이지 값을 모두 request에 저장해주고,

  ArrayList 객체를 이용해 가져온 글 목록을 request에 저장해줍니다.

- 저장한 값을 이용해 'BoardListForm.bo'로 페이지를 'forward'합니다.

 

 

 

 

 

getBoardListCount()

    //글의 개수를 가져오기 위한 메서드
    public int getBoardListCount(HashMap<String, Object> list) {
        DBConnection dbConnection = null;
        Connection conn = null;
        PreparedStatement pstmt = null;
        ResultSet rs = null;
        
        //초기값 설정
        int result = 0;
        //HashMap 객체에 저장되어 있는 option, condition 값 가져오기
        String option = (String)list.get("option");
        String condition = (String)list.get("condition");
        
        try {
            dbConnection = DBConnection.getInstance();
            conn = dbConnection.getConnection();
            StringBuffer sql = new StringBuffer(); //멀티쓰레드에서는 StringBuffer가 안전
            
            if(option == null) { //전체 글의 개수
                sql.append("SELECT COUNT(*) FROM BOARD");
                pstmt = conn.prepareStatement(sql.toString());
                
                sql.delete(0, sql.toString().length());
            } else if(option.equals("0")) { //제목으로 검색한 글의 개수
                sql.append("SELECT COUNT(*) FROM BOARD WHERE BOARD_SUBJECT LIKE ?");
                pstmt = conn.prepareStatement(sql.toString());
                pstmt.setString(1, "%"+condition+"%");
                
                sql.delete(0, sql.toString().length());
            } else if(option.equals("1")) { //내용으로 검색한 글의 개수
                sql.append("SELECT COUNT(*) FROM BOARD WHERE BOARD_CONTENT LIKE ?");
                pstmt = conn.prepareStatement(sql.toString());
                pstmt.setString(1, "%"+condition+"%");
                
                sql.delete(0, sql.toString().length());
            } else if(option.equals("2")) { //제목+내용으로 검색한 글의 개수
                sql.append("SELECT COUNT(*) FROM BOARD WHERE BOARD_SUBJECT LIKE ? OR BOARD_CONTENT LIKE ?");
                pstmt = conn.prepareStatement(sql.toString());
                pstmt.setString(1, "%"+condition+"%");
                pstmt.setString(2, "%"+condition+"%");
                
                sql.delete(0, sql.toString().length());
            } else if(option.equals("3")) { //아이디로 검색한 글의 개수
                sql.append("SELECT COUNT(*) FROM BOARD WHERE BOARD_ID LIKE ?");
                pstmt = conn.prepareStatement(sql.toString());
                pstmt.setString(1, "%"+condition+"%");
                
                sql.delete(0, sql.toString().length());
            }
            rs = pstmt.executeQuery();
            if(rs.next()) {
                result = rs.getInt(1);
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            dbConnection.freeConnection(conn, pstmt, rs);
        }
        
        return result;
    }
 

- BoardDAO의 getBoardListCount() 메서드입니다.

- 파라미터 값으로 HashMap 객체를 전달받습니다.(2번째 줄)

- 전달받은 파라미터 값으로 글의 개수를 가져옵니다.

- 우선 HashMap 객체에 저장되어 있는 option(검색 조건), condition(검색 내용)을 가져옵니다.(11~12번째 줄)

- DB 접근 객체를 생성하고 검색 조건에 따라 다른 SQL문을 전달합니다.

- 검색 조건이 없는 경우 전체 글의 개수를 가져옵니다.(19~23번째 줄)

- 제목으로 검색할 경우 option은 '0'으로 condition(검색 내용)에 맞는 글의 개수를 가져옵니다.(24~29번째 줄)

- 내용으로 검색할 경우 option은 '1'이며 condition(검색 내용)에 맞는 글의 개수를 가져옵니다.(30~35번째 줄)

- 제목+내용으로 검색할 경우 option은 '2'이며 condition(검색 내용)에 맞는 글의 개수를 가져옵니다.(36~42번째 줄)

- 작성자로 검색할 경우 option은 '3'이며 condition(검색 내용)에 맞는 글의 개수를 가져옵니다.(43~49번째 줄)

- 검색된 글의 개수 혹은 글의 전체 개수를 가져옵니다.(51~53번째 줄)

 

 

 

 

getBoardList()

// 게시판에 글 목록을 가져오기 위한 메서드
    public ArrayList<BoardBean> getBoardList(HashMap<String, Object> list) {
        DBConnection dbConnection = null;
        Connection conn = null;
        PreparedStatement pstmt = null;
        ResultSet rs = null;
        
        //글 목록을 가져오기 위해 배열 선언
        ArrayList<BoardBean> arrayList = new ArrayList<BoardBean>();
        
        //HashMap 객체에 저장되어 있는 option, condition 값 가져오기
        String option = (String)list.get("option");
        String condition = (String)list.get("condition");
        //HashMap 객체에 저장되어 있는 start 값 가져오기
        int start = (Integer)list.get("start");
        
        try {
            dbConnection = DBConnection.getInstance();
            conn = dbConnection.getConnection();
            StringBuffer sql = new StringBuffer(); //멀티쓰레드에서는 StringBuffer가 안전
            
            //option 값이 없다면 == 글 목록 전체보기
            if(option == null) {
                sql.append("SELECT * FROM ");
                sql.append("( SELECT ROWNUM rNUM, N.* FROM ");
                sql.append("( SELECT * FROM BOARD ORDER BY BOARD_NUM DESC) N) ");
                sql.append("WHERE rNUM BETWEEN ? AND ?");
                
                pstmt = conn.prepareStatement(sql.toString());
                //10개 단위로 글목록을 보여주기 위한 시작값 설정
                pstmt.setInt(1, start);
                pstmt.setInt(2, start+9);
                
                //StringBuffer 비우기
                sql.delete(0, sql.toString().length());
            }
            //option 값이 0이라면 제목으로 검색하기
            else if(option.equals("0")) {
                sql.append("SELECT * FROM ");
                sql.append("( SELECT ROWNUM rNUM, N.* FROM ");
                sql.append("( SELECT * FROM BOARD WHERE BOARD_SUBJECT LIKE ? ORDER BY BOARD_NUM DESC) N) ");
                sql.append(" WHERE rNUM BETWEEN ? AND ?");
                
                pstmt = conn.prepareStatement(sql.toString());
                //condition 값을 이용해 검색하기
                pstmt.setString(1, "%"+condition+"%");
                pstmt.setInt(2, start);
                pstmt.setInt(3, start+9);
                
                sql.delete(0, sql.toString().length());
            }//option 값이 1이라면 내용으로 검색하기
            else if(option.equals("1")) { 
                sql.append("SELECT * FROM ");
                sql.append("( SELECT ROWNUM rNUM, N.* FROM ");
                sql.append("( SELECT * FROM BOARD WHERE BOARD_CONTENT LIKE ? ORDER BY BOARD_NUM DESC) N) ");
                sql.append(" WHERE rNUM BETWEEN ? AND ?");
                
                pstmt = conn.prepareStatement(sql.toString());
                //condition 값을 이용해 검색하기
                pstmt.setString(1, "%"+condition+"%");
                pstmt.setInt(2, start);
                pstmt.setInt(3, start+9);
                
                sql.delete(0, sql.toString().length());
            }//option 값이 2라면 제목+내용으로 검색하기    
            else if(option.equals("2")) {
                sql.append("SELECT * FROM ");
                sql.append("( SELECT ROWNUM rNUM, N.* FROM ");
                sql.append("( SELECT * FROM BOARD WHERE BOARD_SUBJECT LIKE ? OR BOARD_CONTENT LIKE ?");
                sql.append(" ORDER BY BOARD_NUM DESC) N) ");
                sql.append(" WHERE rNUM BETWEEN ? AND ?");
                
                pstmt = conn.prepareStatement(sql.toString());
                //condition 값을 이용해 검색하기
                pstmt.setString(1, "%"+condition+"%");
                pstmt.setString(2, "%"+condition+"%");
                pstmt.setInt(3, start);
                pstmt.setInt(4, start+9);
                
                sql.delete(0, sql.toString().length());
            }//option 값이 3이라면 아이디로 검색하기
            else if(option.equals("3")) {
                sql.append("SELECT * FROM ");
                sql.append("( SELECT ROWNUM rNUM, N.* FROM ");
                sql.append("( SELECT * FROM BOARD WHERE BOARD_ID LIKE ?");
                sql.append(" ORDER BY BOARD_NUM DESC) N) ");
                sql.append(" WHERE rNUM BETWEEN ? AND ?");
                
                pstmt = conn.prepareStatement(sql.toString());
                //condition 값을 이용해 검색하기
                pstmt.setString(1, "%"+condition+"%");
                pstmt.setInt(2, start);
                pstmt.setInt(3, start+9);
                
                sql.delete(0, sql.toString().length());
            }
            
            rs = pstmt.executeQuery();
            
            while(rs.next()) {
                BoardBean board = new BoardBean();
                board.setBoardNum(rs.getInt("BOARD_NUM"));
                board.setBoardID(rs.getString("BOARD_ID"));
                board.setBoardSubject(rs.getString("BOARD_SUBJECT"));
                board.setBoardContent(rs.getString("BOARD_CONTENT"));
                board.setBoardFile(rs.getString("BOARD_FILE"));
                board.setBoardCount(rs.getInt("BOARD_COUNT"));
                board.setBoardDate(rs.getDate("BOARD_DATE"));
                
                arrayList.add(board);
            }
            
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            dbConnection.freeConnection(conn, pstmt, rs);
        }
        
        return arrayList;
    }

- BoardDAO의 getBoardList() 메서드입니다.

- 파라미터 값으로 HashMap 객체를 전달받습니다.(2번째 줄)

- 전달받은 파라미터 값으로 글의 목록을 가져옵니다.

- 우선 HashMap 객체에 저장되어 있는 option(검색 조건), condition(검색 내용)을 가져옵니다.(12~13번째 줄)

- HashMap 객체에 저장되어 있는 'start'값을 가져옵니다.

- DB 접근 객체를 생성하고 검색 조건에 따라 다른 SQL문을 전달합니다.

- 검색 조건이 없는 경우 전체 글의 목록을 가져옵니다.(23~36번째 줄)

- 제목으로 검색할 경우 option은 '0'으로 condition(검색 내용)에 맞는 글의 목록을 가져옵니다.(38~50번째 줄)

- 내용으로 검색할 경우 option은 '1'이며 condition(검색 내용)에 맞는 글의 목록을 가져옵니다.(52~64번째 줄)

- 제목+내용으로 검색할 경우 option은 '2'이며 condition(검색 내용)에 맞는 글의 목록을 가져옵니다.(66~80번째 줄)

- 작성자로 검색할 경우 option은 '3'이며 condition(검색 내용)에 맞는 글의 목록을 가져옵니다.(82~95번째 줄)

- 쿼리문의 실행 결과를 가져와 BoardBean 객체에 저장하고 이를 arrayList 객체에 저장합니다.(100~110번째 줄)

- 글 목록에 대한 정보를 가지고 있는 arrayList 객체를 반환합니다.(119번째 줄)

 

 

 

 

BoardListForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>게시판</title>
    <style>
        #container{
            position: absolute;
            text-align: center;
            margin-top: 60px;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
        #container .wrap{
            width: 90vw;
            display: inline-block;
            vertical-align: middle;
        }
        a{
            text-decoration: none;
            color: black;
        }
        .table-responsive{
            margin-top: 25px;
            text-align: center;
        }
        table{
            margin-left: auto;
            margin-right: auto;
        }
        thead, tbody{
            text-align: center;
        }
        </style>
        <!-- 게시판 글쓰기 화면으로 이동 -->
        <script type="text/javascript">
            function writeBoard() {
                location.href = "BoardWriteForm.bo";        
            }
        </script>
    </head>
    <body>
        <div id="container">
            <div class="wrap">
                <div class="table-responsive">
                    <table class="table table-striped table-sm">
                        <!-- 테이블 헤드 -->
                        <thead>
                            <tr>
                                <th class="index" scope="col" width="12%">글 번호</th>
                                <th class="title" scope="col" width="36%">제목</th>
                                <th class="name" scope="col" width="20%">작성자</th>
                                <th class="date "scope="col" width="20%">작성날짜</th>
                                <th class="countView" scope="col" widht="12%">조회수</th>
                            </tr>
                        </thead>
                        <!-- 테이블 목록  -->
                        <tbody>
                            <c:forEach var="board" items="${arrayList}">
                                <tr>
                                    <td>${board.boardNum}</td>
                                    <td><a href="BoardDetailAction.bo?num=${board.boardNum}&page=${page}">
                                    ${board.boardSubject}</a></td>
                                    <td>${board.boardID}</td>
                                    <td>${board.boardDate}</td>
                                    <td>${board.boardCount}</td>
                                </tr>
                            </c:forEach>
                        </tbody>
                    </table>
                </div>
                
                <!-- 페이지 번호 -->
                <div id="pageNumber">
                    <c:if test="${startPage != 1}">
                        <a href="BoardListAction.bo?page=${startPage-1}">[이전]</a>
                    </c:if>
                        
                    <c:forEach var="pageNum" begin="${startPage}" end="${endPage}">
                        <c:if test="${pageNum == page}">
                            ${pageNum}&nbsp;
                        </c:if>
                        <c:if test="${pageNum != page}">
                            <a href='BoardListAction.bo?page=${pageNum}'>${pageNum}&nbsp;</a>
                        </c:if>
                    </c:forEach>
                        
                    <c:if test="${endPage != maxPage}">
                        <a href='BoardListAction.bo?page=${endPage+1}'>[다음]</a>
                    </c:if>
                </div>
                
                <!-- 검색 옵션  -->
                <div id="searchForm">
                    <form>
                        <select name="option">
                            <option value="0">제목</option>
                            <option value="1">내용</option>
                            <option value="2">제목+내용</option>
                            <option value="3">글쓴이</option>
                        </select>
                        <input type="text" size="20" name="condition"/>&nbsp;
                        <input type="submit" value="검색"/>
                    </form>
                </div>
                
                <!-- 세션에 전달된 아이디 값이 있으면(로그인이 되어 있으면) 글쓰기 활성화  -->
                <div class="bg-white py-3 px-3 text-center border mt-3">
                    <c:if test="${sessionScope.memberID!=null}">
                        <input class="w-100 btn btn-lg btn-primary" type="button" value="글쓰기" onclick="writeBoard()"></input>
                    </c:if>
                </div>
            </div>
        </div>
    </body>
</html>

- BoardListForm.jsp입니다.

- 글 목록은 <table> 태그로 구현합니다.

- <table> 태그의 헤드는 '글 번호', '제목', '작성자', '작성 날짜', '조회수'입니다.(53~61번째 줄)

- <table> 태그의 바디 부분으로 글의 내용을 가져옵니다.(63~74번째 줄)

- JSTL 'forEach'를 사용하여 파라미터로 전달된 arrayList값을 이용합니다.(64번째 줄)

- arrayList에 저장된 글 목록을 하나씩 가져와서 <table> 태그의 body 부분에 추가합니다.(67~71번째 줄)

- 파라미터로 전달된 'startPage', 'endPage', 'maxPage', 'page'값을 이용하여 페이지 번호를 출력합니다.(78~96번째 줄)

- 우선 시작페이지 번호를 설정합니다.

- startPage값이 1이 아니라면 ( ex) 6, 11 ) '[이전]'을 출력하고 클릭하는 경우

  'BoardListAction.bo?page=${startPage-1}'로 이동합니다.

- 페이지 수를 출력합니다.(84~91번째 줄)

- 선택한 페이지 번호가 현재 페이지와 같다면 페이지 번호와 공백을 표시합니다.(85~87번째 줄)

- 선택한 페이지 번호가 현재 페이지와 다르다면 페이지 번호와 공백을 표시하고

  클릭하는 경우 'BoardListAction.bo?page=${pageNum}'로 이동합니다.(88~90번째 줄)

- 만약 endPage의 값이 maxPage의 값과 다르다면, 예를 들어, endPage의 값이 5인데 maxPage의 값이 6이라면

  [다음]을 출력하고 클릭하는 경우 'BoardListAction.bo?page=${endPage+1}'로 이동합니다.

- <select> 태그를 이용해 option을(검색조건을) 선택할 수 있게 하고,

  <input> 태그를 이용해 검색 내용을 전달받습니다.(99~110번째 줄)

- 검색 옵션과 검색 내용은 <form> 태그로 구성되어 파라미터 값으로 전달됩니다.

- 세션에 저장되어 있는 memberID 값이 있다면(로그인이 되어 있다면) '글쓰기' 버튼을 출력합니다.(114~116번째 줄)

- 글쓰기 버튼을 누르면 'BoardWriteForm.bo'로 이동할 수 있도록 writeBoard() function을 구현합니다.

 

게시판 화면 (1)

- 로그인을 하지 않은 게시판 화면입니다.

- 페이지가 3페이지까지 존재해 [이전]이나 [다음]이 출력되지 않습니다.

 

게시판 화면 (2)

- 로그인을 한 후 게시판 화면입니다.

- 글쓰기 버튼이 활성화된 것을 볼 수 있습니다.

 

게시판 화면 (3)

- 글의 개수가 5페이지, 즉 50개를 넘기면 위와 같이 [다음]이 출력됩니다.

 

게시판 화면 (4)

- 5페이지를 넘겨 페이지를 선택하는 경우 위와 같이 [이전]이 출력됩니다.

 

 

---

오늘은 게시판에 게시글을 불러오기 위한 Action 클래스를 구현하는 방법과

게시판 화면을 구현하기 위한 JSP 페이지에 대해 알아봤습니다.

 

다음글에서는 글쓰기 기능을 구현하는 것부터 알아보겠습니다.