artstroke 게시판(4)

오늘도 코딩중!·2023년 6월 28일
0

artstroke프로젝트

목록 보기
4/7

1. 게시판 삽입
2. 게시판 삭제
3. 게시판 수정
4. 게시판 상세페이지
5. 좋아요
6. 팔로잉(작가에 대해서만)

게시판 삽입에 대해서 더욱 진행하도록 하겠다.

나는 게시판 타입을 통해 나는 게시판의 종류를 나누었다. 게시판의 종류는

  1. 일반게시판
  2. 작가게시판이다

여기서 기억해야할 것은 보드 타입에 따라 삽입해야하는 경로가 달라진다는 것으로 이것을 쿼리스트링으로 작성할 것이다.

boardWrite 버튼을 눌렀을 때 전달해야할 것은 boardCode와 type이 수정인지 삽입인지에 대해서이다.

삽입하려면 write버튼을 눌렀을 때 처음으로 삽입하는 경로 이고 수정하기는 boardDetail 즉 게시판의 구현 페이지에서 세션에 등록된 loginMember의 로그인 아이디와 board에 등록된 주인의 값 즉, MEMBER_ID값이 같으면 수정, 삭제 버튼이 떠야한다는 것이다. 먼저 삽입 버튼을 이미지를 통해 보여주도록 하겠다.

여기에서 아쉬운 점은 ${contextPath}를 통해서 내가 어플리케이션에 등록했던 경로를 사용하지 않았다는 점이다. contextPath를 이용하면 더욱 쉽게 경로를 작성할 수 있었을 것이다. 이 부분에서 loginMember의 존재를 확인하고 있으면 boardCode의 값을 탐지하고 그 다음 auth즉 loginMember의 지위를 확인했다. auth를 통해서 작가인지, 관계자인지 아니면 일반회원인지 파악할 수 있다.

주의 할 것은 auth는 vo에 있는 값일 뿐 실제 db에 있는 컬럼명은 MEMBER_AUTH로 예약어를 피하길 바란다.

그리고 여기서 눈여겨야할 것은

location.href='../boardWrite/${boardCode}?type=insert';

이 부분인데 ?뒤에 속성명=속성값으로 나열되어있다. 이는 쿼리스트링으로 전달할 값을 나타낸 것이며 location.href는 get으로 전달되어 controller로 접근한다. 수정일 경우 insert가 아니라 update로 될 것이다. 이를 사용한다면 우리는 다른 방식으로 게시판 작성 사이트에 접근 할 수 있다.

insert 할때와 update할 때의 다른 점은 update할 때는 게시판 상세페이지 내부의 boardId를 읽어온다는 것이다. boardId를 가져와서 service객체로 전달해서 boardId를 통해 데이터베이스에 접근하여 게시판을 가져와서 내부에 값을 전달한다.

board/boardWrite로 이동하면

해당 화면으로 넘어오게 되는데 update면 제목과 본문에 값이 전달된다 해당 코드는 다음과 같다.

<div class ="board_form_area">
                <c:choose>

                    
                    <c:when test = "${!empty detail}">
                        <form id = "noticeWriteForm" action ="../write/${boardCode}?type=update&no=${detail.boardId}" method ="post" class = "widthfull">
                            
                            <!-- 제목 -->
                            <div id = "board_Write_title">
                                <input id = "title" name = "title" type ="text" placeholder="제목" class ="boardInputTitle" value = "${detail.boardTitle}">
                            </div>

                            <!-- 본문 -->
                            <div id ="smarteditor">
                                <textarea name="smartEditor" id="smartEditor" rows="20" cols="10" style="width: 500px; height:400px;">${detail.boardContent}</textarea>
                            </div>

                            <!-- 작성 버튼 -->
                            <div class ="board_btn_area">
                                <input type="button" id="savebutton" value="작성" />
                            </div>
                        </form>
                    </c:when>

                    
                    <c:otherwise>
                        <form id = "noticeWriteForm" action ="../write/${boardCode}" method ="post" class = "widthfull">
                            <div id = "board_Write_title">
                                <input id = "title" name = "title" type ="text" placeholder="제목" class ="boardInputTitle">
                            </div>
                            <div id ="smarteditor">
                                <textarea name="smartEditor" id="smartEditor" rows="20" cols="10" style="width: 500px; height:400px;"></textarea>
                                
                            </div>
                            <div class ="board_btn_area">
                                <input class ="board_btn" type="button" id="savebutton" value="작성" />
                            </div>
                        </form>
                    </c:otherwise>
                </c:choose>
                
            </div>

자 여기서 이제 작성한 내용을 작성 버튼을 누르면 이제 서버로 전송이 되는데 서버 구현은 다음과 같이 이루어진다.

로그인한 멤버의 정보를 받아와서 게시판을 등록한 사용자의 고유 아이디를 가져오고 그 아이디를 게시판에 할당한다.

++여기서 수정해야할 사항이 있다. 아이디를 비롯한 사용자의 프로필 이미지와 닉네임은 넣지 않아도 된다. 미숙했던 처음의 경우 이미지를 가져왔지만 아이디만 있으면 나중에 게시판을 선택해서 가져올 시, sql을 통해 member프로필등을 가져올 수 있으므로 필요없다. 이것은 VO에만 작성하는 것이 좋다.

++여기서 나는 의존성 주입을 잘 지키지 못했다. 스프링 기능으로 NAME값을 맞춰주고 BoardDetail detail를 선언했다면 detail값에 RequestParam으로 가져온 값이 들어 있었을 것이다. 나는 그걸 몰라 나중에 map으로 전달했는데 이렇게 하는 것 보다는 이름을 일치시키는 편이 스프링 규칙에 올바르다.

나는 MVC패턴을 이용하기 때문에 어노테이션의 흐름이 중요하다 Service에는 @Service, dao에는 @Repository Controller에는 @Controller를 넣어서 mapping을 시켜줘야한다. 이것은 검색하면 나오니 해당 정보를 검색하고 오길 바란다.

Service는 interface로 모았기 때문에 나는 impl로 implements를 받아서 구현하였다.

아까 언급한 내용을 염두해서 보시면 고쳐야 할 부분이 보일 것이다.

// TODO Auto-generated method stub
		BoardDetail detail = new BoardDetail();
		String test = boardId+"";
		logger.info(test);
		if(type.equals("update")) {
			detail.setBoardId(boardId);
		}
		detail.setProfileImage(memberProfileImage);
		detail.setBoardTitle(title);
		detail.setBoardContent(smartEditor);
		detail.setMemberId(memberId);
		detail.setMemberNickname(memberNick);
		detail.setBoardCode(boardCode);
		logger.info(type);
		String srcPattern = "src=\"([^\"]+)\"";//바뀐이름
        String titlePattern = "title=\"([^\"]+)\"";//원래이름.
        List<BoardImage> imageList = new ArrayList();
     // src 속성 값 추출
        Pattern pattern = Pattern.compile(srcPattern);
        Matcher matcher = pattern.matcher(smartEditor);
        int i = 0;
        while (matcher.find()) {
            String srcValue = matcher.group(1);
            BoardImage image = new BoardImage();
            image.setImageLevel(i);
            image.setImageReName(srcValue);
            if(i ==0) {
            	detail.setBoardThumbNail(srcValue);
            }
            if(type.equals("update")) {
            	image.setBoardId(boardId);
            }
            imageList.add(image);
            i++;
        }
  
     // title 속성 값 추출
        i=0;
        pattern = Pattern.compile(titlePattern);
        matcher = pattern.matcher(smartEditor);
        while (matcher.find()) {
            String titleValue = matcher.group(1);
            imageList.get(i).setImageOriginal(titleValue);
            i++;
        }
		detail.setImageList(imageList);
		int temp =0;
		if(type.equals("update")) {
			temp = dao.updateBoard(detail);
		}else {
			temp = dao.writeBoard(detail);
		}
		int result = 0;
		if(temp >0) {
			if(imageList.size() >=1) {
				if(type.equals("update")) {
					int delete = dao.deleteBeforeImage(boardId);
					result = dao.updateBoardImage(detail);
				}
				else {
					result = dao.insertBoardImage(detail);
				}
			}else {
				result=1;
			}
		}else {
			result = 0;
		}
		
		return result;
	}

난 여기서 정규식을 통해 content로 들어간 이미지를 인식하였다. src=내부에 들어간 이미지를 추출하여 이미지 테이블에 집어넣었다. 그 전에 먼저 게시판 테이블에 내용을 집어넣었다. dao로 접근하여 바로 mapper로 접근한다.

writeBoard를 board-mapper를 통해 sql을 구현하고 board를 insert하는 과정을 거치고

<insert id = "writeBoard" parameterType = "detail" useGeneratedKeys = "true">
	<selectKey keyProperty ="boardId" resultType ="_int" order ="BEFORE">
	SELECT SEQ_BOARD_NO.NEXTVAL FROM DUAL
	</selectKey>
	INSERT INTO BOARD(BOARD_ID, BOARD_CD,BOARD_TITLE,BOARD_CONTENT,BOARD_FILE1,BOARD_FILE2,BOARD_DT,READ_CNT,MEMBER_ID,BOARD_ST,MEMBER_NICK,BOARD_AUTH) 
	VALUES(#{boardId},#{boardCode},#{boardTitle},#{boardContent},#{profileImage},#{boardThumbNail},SYSDATE,0,#{memberId},'N',#{memberNickname},'N')
	</insert>

insert가 끝나면 이미지 까지 insert혹은 update를 진행한다.

이렇게 삽입 or 수정이 완료되면 게시판 메인페이지로 이동한다.

이것이 삽입의 로직이다.

profile
늦은만큼 코막고 달려!

0개의 댓글