SPRING [#11] 게시판목록 기능 구현 - 2

목표

 

 

페이징

 

1. NoticeDTO 클래스 작성 (page)

2. Main1Dao.java

3. Main1.xml 페이징

4. Main1Service + Impl

5. Controller

6. Jsp

 

 

검색

 

1. 검색 View 추가(notice.jsp)

2. 검색 Js

 

 

게시글 상세 페이지

 

 

1. 작가 상세 페이지 쿼리(Mapper,Service 메서드)

2. Controller 메서드(AdminController.java)

3. view 처리

   1) 이동 태그 추가(authorManage.jsp)

   2) 작가 상세 페이지(authorDetail.jsp)

4. 테스트

 

 

포스팅 해야 할 것

 

공지사항 게시판

 

먼저 게시글 등록시 노출되는 게시글 목록을 구현한 뒤, 사용자가 마우스를 통해 페이지 이동을 할 수 잇도록 페이지 이동 을 구현할 것입니다.

 

+ 검색 기능을 JS를 이용하여 구현 할 것 입니다.

 

 

Notice DTO 클래스 작성 (Page를 위해)

 

 

 

com.web.dto 패키지에 Notice 클래스를 생성후 아래의 변수, 생성자를 작성합니다. Notice 클래스내  데이터들은 '페이지 이동 인터페이스'를 출력시키는데 필요로 한 데이터들의 모임입니다.

 

 

 

// extra 변수
	private int st_num; // 페이징 시작
	private int ed_num; // 페이징 끝

	public int getSt_num() {
		return st_num;
	}

	public void setSt_num(int st_num) {
		this.st_num = st_num;
	}

	public int getEd_num() {
		return ed_num;
	}

	public void setEd_num(int ed_num) {
		this.ed_num = ed_num;
	}

 

 

 

 

 

 

 

작성한 변수들에 대한 getter/setter 메서드를 선언해줍니다.

 

 

 

Main1Dao.java 인터페이스 

 

 

 

테이블의 총 행의 개수를 구하는 쿼리를 호출하는 메서드를 선언합니다. 총 개수 값을 반환받아야 하기 때문에 메서드 선언부의 리턴 타입은 int입니다.

 

 그리고 조건문에 사용할 'keyword' 데이터를 전달받기 위해  클래스를 부여하였습니다.

 

 

 

public int select_notice_total() {
		return sqlSession.selectOne("Main1.select_notice_total");
}

 

 

 

 

 

 

main1.xml 페이징 메서드 

 

 

 

검색어를 입력한 경우에도 쿼리가 정상적으로 동작하는지를 확인하기 위해서 keyword 변수에 데이터를 부여한 후 작성

 

 

<select id="select_notice"
		resultType="main.java.com.web.dto.Notice">
		select * from NOTICE
		<!-- 페이징 검색 추가 -->
		where 1=1
		<if test="keyword != null and !keyword.equals('')">
			and title like concat('%', #{keyword}, '%')
		</if>
		order by date desc
		limit #{st_num}, #{ed_num}
</select>

 

 

 

 

 

 

Main1Service + Impl 작성

 

 

 

 Main1Service.java에 앞서 작성한 Mapper 메서드를 호출한 메서드를 선언합니다.

 

 

 

Notice select_notice_detail(int seq);

 

 

 

 

 

 Main1ServiceImpl.java에 오버라이딩하여 인터페이스에서 선언한 메서드의 구현부를 작성합니다. 

 

 

 

	@Override
	public int select_notice_total() {
		return main1Dao.select_notice_total();
	}

 

 

 

 

 

Controller 작업

 

 

 

total의 값을 얻기 위해 Main1Service 클래스의 keyword를 호출한 후 해당 값과 Notice 클래스 데이터를 인자 값으로 부여하여 NoticeDto를 인스턴스화 시킵니다. 

 

 

 

// 화면에서 값 바인딩
Notice notice = master.getNotice();
List<Notice> listNotice = main1Service.select_notice(notice);

if(notice.getKeyword() != null && !notice.getKeyword().equals("")) {
    for(Notice n : listNotice) {
        n.setKeyword(notice.getKeyword());
    }
}

master.setListNotice(listNotice);

//master.setListNotice(mainService.select_notice(master.getNotice()));
return new Gson().toJson(master);

 

 

 

 

 

 

Jsp 처리

 

 

 

서버로부터 전달받은 데이터를 활용하여  '페이지 이동 인터페이스'를 구현합니다. class 속성 값이 "page_bind"인 <div> 태그 바로 다음 순서에 아래의 코드를 추가해줍니다. 

 

 

 

function ajax_notice(next_page){
		// 1. 초기화로 모두 none actice 
		// 2. next_page 만 active class 추가
		$('.page_bind > a').removeClass('active');
		$('.page_bind > a').eq(next_page-1).addClass('active');
		
		//한페이지에 보여줄 게시글 수 
		var st_num = (next_page - 1) * 10;
		var str = ''; //str은 공백제거 
		$.LoadingOverlay("show");
        $.ajax({
            type : "POST",
            url : "/main1/ajax_notice",
            data : 'notice.st_num='+st_num+'&notice.ed_num=10&notice.keyword='+$("#notice_searchkeyword").val(),

 

 

 

 

 

ajax를 이용하여 목록화면에 들어가자 마자 바로 띄워줍니다.

 

 

 

 

 

 

 

 

검색 인터페이스 추가 (notice.jsp)

 

 

 

<input> 태그에 검색어를 입력 후 enter를 누르면 검색이 됩니다.

 

 

<div class="card-header py-3" id="searchBox">
    <input type="text" id="notice_searchkeyword" name="searchKeyword" value="${notice.keyword}"  placeholder="  검색어를 입력하세요." /> 
    <a href="/main1/ajax_notice" id="notice_search" class="btn btn-primary">검색</a>
</div>

 

 

 

 

 

검색 키워드에 대한 정보뿐만 아니라 pageNum 데이터도 같이 넘겨야 합니다. type속성 값이 text인 <input> 태그를 추가해주었습니다. 해당 <input> 태그는 페이지가 로딩될 때 기본적으로 서버에서 전달받은 pageNum과, keyword값이 저장되도록 설정하였습니다.

 

 

키워드 입력 없이 사용자가 검색 버튼을 누르지 못하도록 유효성 체크 기능과, 목록 페이지를 열자마자 검색 태그가 나타나도록 아래 Js 코드를 작성합니다.

 

 

 

//검색
$("#notice_search").click(function(e){
    e.preventDefault();

    var keyword = $("#notice_searchkeyword").val();

    if(!keyword) {
        alert("키워드를 입력하세요.")
        return false;
    } 

    ajax_notice(1);
});

 

 

 

 

 

 

---

 

Appendix