파이널 프로젝트-게시판(2)

게시글 jsp를 만들어보자.

참고 이 프로젝트는 배포하지 않고 상업적으로 이용하지 않는다.

준비물

• fontawesome cdn키
• jquery 키
• taglib 라이브러리

게시판을 만들기 위해서 먼저 프론트를 만질 필요성을 느꼈다. 그래서 application.setAttribute를 통해 어플리케이션이 꺼질 동안 유지되는 값을 이용해서 jstl를 사용한다.

boardType에 해당하는 boardCode를 사용해서 우리는 쿼리스트링을 이용하게 될 것이다.

쿼리스트링: 쿼리?속성명=값&속성명2=값2

이렇게 이루어진 쿼리스트링을 통해서 게시판에 동적으로 구현된 요소를 클릭해서 자유롭게 이동할 것이다.

먼저 구성요소를 살펴보고 첫번째 요소의 구현을 살펴보도록 하겠다.

• 상업적으로 이용하지 않으므로 참고.

부트스트랩을 사용하여 캐러샐을 도입하였다.

내가 이용한 방식은 cdn방식을 도입하지 않고 부트스트랩 파일을 다운받아 프로젝트 안에 기입한 방식이다.

이곳에서는 페이지네이션을 도입하지 않고 forEach문을 세번써서 model.attribute로 가져온 값의 순서를 가져와서 begin end를 써서 0~4 / 5,9 / 10,14 번째의 값을 가져오도록 설정하였다. 방식은 다음 코드와 같다.

<div class="carousel-item active heightfull">
  <c:forEach var="board" items="${boardBestList}" begin="0" end="4">  
     <div class = "bestList-item" style=" cursor: pointer;" onclick="location.href='../detail/${boardCode}/${board.boardId}?cp=${pagination.currentPage}${sURL}';">
     <div>
        <c:if test="${!empty board.boardFile2}">
           <img class = "imgSize" src="${board.boardFile2}" class="d-block w-100 imgSize" alt="..."></c:if> 
        <c:if test = "${empty board.boardFile2}">
           <img class = "imgSize" src="${contextPath}/resources/images/boardImg/board_defaultImg.jpg" class="d-block w-100 imgSize" alt="...">
        </c:if>
        
      </div>
      <div class="item-sentence">
      <span style="font-size:15px;">${board.boardTitle}</span>
      </div> 
      </div>
   </c:forEach>
</div>

begin = "0" end = "4"를 해서 캐러셀의 첫번째 목록을 5개 출력하고 두번째에는 5,9 세번째에는 10 14를 시작해서 총 15개의 값을 캐러셀에 집어넣었다.

정렬방법

다음은 정렬방법이다. 나는 select를 이용해 드롭박스를 만들어 ajax를 통해 해당 div의 내용을 innerHTML을 통해 지워버리고 새롭게 동적생성하는 방식이다.

• JS

  셀렉트를 선택했을 때 클릭이벤트로 변경되면 원하는 변화를 가져올 수가 없으니 우리는 click 이벤트가 아니라 change이벤트를 사용하였다.

sorting.addEventListener("change",function(){

$.ajax({
url : contextPath + "/board/boardSorting",
data: {"sort" : this.value,
"boardCode":boardCode,
"cp" : cp,
"key" : key,
"query": query},
type: "post",
success(map){
const boardContainer = document.getElementById("board-card-detail");
boardContainer.innerHTML = "";

  for(let board of map.boardList){
    const boardCardElement = document.createElement('div');
    boardCardElement.style.cursor = "pointer";
    boardCardElement.onclick = () => {
               location.href = '../detail/'+boardCode+"/"+board.boardId+'?cp='+map.pagination.currentPage+sURL;
    };
    boardCardElement.classList.add("board-card-element");

    if(board.boardFile2 != null){
      const boardCardImg = document.createElement('div');
      boardCardImg.classList.add('board-card-img');
      const boardImg = document.createElement('img');
      boardImg.src = board.boardFile2;
      boardImg.classList.add('imgSize');
      boardImg.alt = '...';

      boardCardImg.appendChild(boardImg);
      boardCardElement.appendChild(boardCardImg);
    }else{
      const boardCardImg = document.createElement('div');
      boardCardImg.classList.add('board-card-img');

      const defaultImg = document.createElement('img');
      defaultImg.src = contextPath + "/resources/images/boardImg/board_defaultImg.jpg";
      defaultImg.classList.add('imgSize');
      defaultImg.alt = '...';

      boardCardImg.appendChild(defaultImg);
      boardCardElement.appendChild(boardCardImg);
    }
    const itemSentence = document.createElement('div');
    itemSentence.classList.add('item-sentence');

    const boardTitle = document.createElement('p');
    boardTitle.textContent = board.boardTitle;

    itemSentence.appendChild(boardTitle);
    boardCardElement.appendChild(itemSentence);

    boardContainer.appendChild(boardCardElement);
    

  }

이렇게 동적으로 생성하여 기존의 요소와 동일한 구성을 다시 만들어줌으로써 화면의 변화를 동적으로 이끌어 내었다.