본문 바로가기
세미프로젝트

세미프로젝트 [어디어디]

by juneMiller 2021. 11. 29.

서블릿과 JSP 를 이용하여 목적별 데이트 코스를 추천해 주는 웹을 개발하였다.

제가 맡은 기능은 사용자 간의 커뮤니티인 게시판을 만는 것이었습니다. 

Servlet, JSP 로 CRUD 게시판 구현, Ajax 를 통해 비동기식 댓글 CRUD 및

사이드 인기 게시글, 검색 부분을 구현하였습니다. 

 

부가기능으로 관리자가 공지한 글이 커뮤니티 상단에 노출 시켜, 드롭다운 방식으로 게시글을 조회 할 수 있습니다.

 

02. 게시글 조회 및 게시글 작성

BoardList.jsp 

 

<!-- Blog Section Begin -->
    <section class="blog-section spad">
    
        <div class="container">
            <div class="row">
            	<div class="col-lg-8">
                   <div class="row">
                    
                    
                    <% if(list.isEmpty()){ %>
				
					<p>조회된 리스트가 없습니다.</p>
				
					<% }else{ %>
					<% for(Board b : list){ %>
                    
                   
                     <div class="col-lg-6 col-md-6">
                            <div class="blog__item"> 
                                <div class="blog__item__pic set-bg thumbnail" data-setbg="<%=contextPath %>/resources/board_upfiles/<%= b.getTitleImg() %>" >
				                <input type="hidden" value="<%=b.getBoardNo()%>">
                                </div>
							<div class="blog__item__text">
                                    <h4 class="thumbnail" ><%= b.getBoardTitle() %>
                                    <input type="hidden" value="<%=b.getBoardNo()%>">
                                    </h4>
                                    <br>
                                    <ul class="blog__item__widget">
                                        <li><i class="fa fa-clock-o"></i> <%= b.getCreateDate() %></li>
                                        <li><i class="fa fa-user"></i> <%= b.getBoardWriter() %></li>
                                        <li><i class="fa fa-stars"></i> <%= b.getCount() %></li>
                                     </ul>
                             </div>
                             </div>
                        </div>
                        
                        <%} %>
				<%} %>
                      
                        
                        
                    </div>
                    
                   

		<!----------------------- 페이징바 만들기 -------------------------------->


		<div class="blog__pagination" >
			<!-- 맨 처음으로 (<<) -->
			<a href="<%=contextPath%>/list.bo?currentPage=1"> &lt;&lt; </a> 
			
			
		
			<!-- 이전페이지로(<) -->
			<%if(currentPage == 1){ %>
			<a class="noHover"> &lt; </a>
			<%}else{ %>
			<a href="<%= contextPath %>/list.bo?currentPage=<%= currentPage-1 %>"> &lt; </a>
			<%} %>
			
			<!-- 페이지 목록 -->
			<%for(int p=startPage; p<=endPage; p++){ %>
				
				<%if(p == currentPage){ %>
				<a class="noHover"> <%= p %> </a>
				<%}else{ %>
				<a href="<%=contextPath %>/list.bo?currentPage=<%= p %>"> <%= p %> </a>
				<%} %>
				
			<%} %>
			
			<!-- 다음페이지로(>) -->
			<%if(currentPage == maxPage){ %>
			<a class="noHover"> &gt; </a>
			<%}else { %>
			<a href="<%= contextPath %>/list.bo?currentPage=<%= currentPage+1 %>"> &gt; </a>
			<%} %>
		
			<!-- 맨 끝으로 (>>) -->
			<a href="<%=contextPath%>/list.bo?currentPage=<%=maxPage%>"> &gt;&gt; </a>
		</div> 
                    
          <br><br><br>          
           <% if(loginUser != null){ %>
			<button  type="submit" class="site-btn" onclick="location.href='enroll.bo'">글쓰기</button>
		 <% }else {%>         
                    
			<button type="submit" class="site-btn" onclick="pop();">글쓰기</button>
                    
            <% } %>        
                    
           
			</div> <!-- col-lg-8 닫는 div -->
			
			 <div class="col-lg-4">
             <div class="blog__sidebar">

<% %> 표현식 안에 if 문으로 조회된 글이 없을때, 글쓰기 버튼의 활성화 비활성화 대응 처리 

 

enroll.bo 

package semiProject.com.kh.board.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class BoardinsertServlet
 */
@WebServlet("/enroll.bo")
public class BoardEnrollFormServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public BoardEnrollFormServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		
		request.getRequestDispatcher("views/board/boardInsertPage.jsp").forward(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

request.getRequestDispatcher("views/board/boardInsertPage.jsp").forward(request, response);

 

RequestDispatcher 이용하요 수정할 수 있는 화면으로 이동 

 

boardInsertPage.jsp 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" import="java.util.ArrayList, semiProject.com.kh.board.model.vo.*"%>
<% 
Board b = (Board)request.getAttribute("b");
ArrayList<Attachment> Filelist = (ArrayList<Attachment>)request.getAttribute("Filelist");
 %>

 

insert.bo 

package semiProject.com.kh.board.controller;

import java.io.File;
import java.io.IOException;
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 org.apache.tomcat.util.http.fileupload.servlet.ServletFileUpload;

import com.oreilly.servlet.MultipartRequest;

import semiProject.com.kh.board.model.service.BoardService;
import semiProject.com.kh.board.model.vo.Attachment;
import semiProject.com.kh.board.model.vo.Board;
import semiProject.com.kh.common.MyFileRenamePolicy;
import semiProject.com.kh.member.model.vo.Member;

/**
 * Servlet implementation class BoardInsertServlet
 */
@WebServlet("/insert.bo")
public class BoardInsertServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public BoardInsertServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//파일 업로드를 위한 라이브러리 : cos.jar http://www.servlets.com/
	      
	      if(ServletFileUpload.isMultipartContent(request)) { //enctype 이 multipart/form-data로 잘 전송되었으면 true
	         // 1. 전송된 파일들을 처리할 작업 내용 (전송되는 파일의 용량 제한, 전달된 파일을 저장할 폴더 경로)
	               
	               // 1_1. 전송파일 용량 제한 (int maxSize)
	      //               : 10Mbyte로 제한  ([참고] cos.jar로 파일 업로드 시 최대 2기가(1.6)까지만 가능)
	      //                 1Kbyte = 1024byte (킬로바이트)
	      //               1Mbyte = 1024Kbyte = 1024 * 1024 byte (메가바이트)
	      //               1Gbyte = 1024Mbyte = 1024 * 1024 * 1024 Byte (기가바이트)
	      //               10Mbyte = 10 * 1024 * 1024 byte 
	         
	         int maxSize = 10 * 1024 * 1024;  //파일크기 설정
	         
	         
	         //1_2. 전달된 파일을 저장할 서버의 폴더 경로 알아내기
	         String resources = request.getSession().getServletContext().getRealPath("/resources");
	         String savePath = resources + "\\board_upfiles\\";
	         System.out.println("savePAath" + savePath);
	         
	         //MultipartRequest multiRequest = new MultipartRequest(request, savePath, maxSize, "UTF-8", new DefaultFileRenamePolicy());
	         MultipartRequest multiRequest = new MultipartRequest(request, savePath, maxSize, "UTF-8", new MyFileRenamePolicy());
	         //시스템파일명 -> 올린날짜 시간 들어간다. 중복되지 않게
	         
	         int userNo = ((Member)request.getSession().getAttribute("loginUser")).getUserNo();
	         
	         Board b = new Board();
	         
	         b.setBoardTitle(multiRequest.getParameter("title"));
	         b.setBoardContent(multiRequest.getParameter("content").replaceAll("\n", "<br>"));
	         b.setBoardWriter(String.valueOf(userNo));
	         
	         
	         request.setAttribute("b", b);
	         
	         ArrayList<Attachment> fileList = new ArrayList<>();
	         
	         request.setAttribute("fileList", fileList);
	         
	         for(int i = 1; i <=4; i++) {
	        	 
	        	 String name  = "file" + i;
	        	 if(multiRequest.getOriginalFileName(name) != null) {
	        		 
	        		 String originName = multiRequest.getOriginalFileName(name);
	        		 String changeName = multiRequest.getFilesystemName(name);
	        		 
	        		 Attachment at = new Attachment();
	        		 
	        		 at.setFilePath(savePath);
	        		 at.setChangeName(changeName);
	        		 at.setOriginName(originName);
	        		 
	        		 fileList.add(at);
	        		 
	        		
	        		 
	        	 }
	         }
	         
	         int result = new BoardService().insertThumbnail(b, fileList);
	        
	  
	         if(result > 0) {
	        	 
	        	 response.sendRedirect("list.bo");
	        	 
	         }else {
	        	 for(int i=0; i<fileList.size(); i++) {
	        		 File failedFile = new File(savePath + fileList.get(i).getChangeName());
	        		 failedFile.delete();
	        	 }
	        	 
	        	 request.setAttribute("msg", "사진 등록실패하였습니다.");
	           	 request.getRequestDispatcher("views/common/errorPage.jsp").forward(request, response);
	         }
	         
	      }
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

 

사진과 함께 올려줄거라서 multipart/form-data 전송시 lib 에 cos.jar 파일 넣어 놓고 

isMultipartContent 메소드 이용하여 true 가 전달되면, 파일 사이즈 지정하고 경로 설정해서, 

MultipartRequest 에 인자로 넣어 전달한다. 

 

화면에 맵핑된 name 값으로 받아온 피라미터를 board 객체, attachment 객체에 담아 서비스로 전달 한다 

 

 

 

Service

 

public int insertThumbnail(Board b, ArrayList<Attachment> fileList) {
		Connection conn = getConnection();
		
		int result1 = new BoardDao().insertThBoard(conn, b);
		int result2 = new BoardDao().insertAttachment(conn, fileList);
		
	
		
		if(result1 > 0 && result2 > 0) {
			commit(conn);
		}else {
			rollback(conn);
		}
		close(conn);
		return result1* result2;
	}

board 테이블에 담을  객체와 attachment 넣을 객체를 각각 connection 객체를 함께 담아 Dao 로 넘겨준다. 

 

 

Dao - insertThBoard

	public int insertThBoard(Connection conn, Board b) {
		int result = 0;
		PreparedStatement pstmt = null;
		String sql = prop.getProperty("insertThBoard");

		try {
			pstmt = conn.prepareStatement(sql);

			pstmt.setString(1, b.getBoardTitle());
			pstmt.setString(2, b.getBoardContent());
			pstmt.setInt(3, Integer.parseInt(b.getBoardWriter()));

			result = pstmt.executeUpdate();

		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			close(pstmt);
		}
		return result;
	}

Dao 에 넘길 인자 순서대로 set 해서 쿼리문 실행

 

Dao - insertAttachment

public int insertAttachment(Connection conn, ArrayList<Attachment> fileList) {

		int result = 0;
		PreparedStatement pstmt = null;

		String sql = prop.getProperty("insertAttachment");

		try {

			for (int i = 0; i < fileList.size(); i++) {

				Attachment at = fileList.get(i);

				pstmt = conn.prepareStatement(sql);

				pstmt.setString(1, at.getOriginName());
				pstmt.setString(2, at.getChangeName());
				pstmt.setString(3, at.getFilePath());

				result += pstmt.executeUpdate();

			}

		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			close(pstmt);
		}
		return result;

	}

 

 

쿼리문

 

insertThBoard=INSERT INTO BOARD VALUES(SEQ_BNO.NEXTVAL, ?, ?, ?,DEFAULT, SYSDATE, DEFAULT)
insertAttachment=INSERT INTO ATTACHMENT VALUES(SEQ_ANO.NEXTVAL, SEQ_BNO.CURRVAL, ?, ?, ?, SYSDATE, DEFAULT)

 

유효성 검사

제목: 없으면 alert 창 뜨고 return

검색: 없으면 alert 창 뜨고 return 

대표 사진 : 없으면 alert 창 뜨고 return

 

<script type="text/javascript">
		function checkValue(){
			var form = document.forms[0];
			var title = form.title.value;
			var content = form.content.value;
			var file1 = form.file1.value;
			
			
			if(!title){
				alert("제목을 입력해주세요.")
				return false;
			}
			else if(!content){
				alert("내용을 입력해주세요.")
				return false;
				
			} else if(!file1){
				alert("대표 사진은 반드시 올려야 합니다.")
				return false;
			} 
				
    		   
		}
	
	</script>

'세미프로젝트' 카테고리의 다른 글

세미 프로젝트[어디어디]  (0) 2021.11.29
세미 프로젝트[어디어디]  (0) 2021.11.29
세미프로젝트 [어디어디] 공지사항 상단 조회  (0) 2021.11.28

관련글

티스토리툴바