[JQuery] 게시판 만들기_02

1. html(jsp)요청페이지(클라이언트)
   각 기능에 대한 이벤트 처리 - 필요한(전송할)데이터를 수집한다
   board.js파일의  script함수를 호출한다
 
2.  서버로 전송한다 -  
    board.js파일 의  script함수내애서  비동기 함수를 실행한다 -  fetch() 또는 ajax() - 

3.  controller - service- dao -mapper를 통해서 db 처리한다
 db에서 수행된 결과를 역으로 return 하고 controller에서  결과값을 저장한다 
 forward 를 이용하여 view페이지로 이동한다 -

4.  view페이지에서  결과값(controller에서저장한) 을 꺼내서 응답결과를 생성한다 -
   json()형태로 작성( html, text, xml 도 가능) 

5. 서버로부터 응답결과를 받는다 -  
     board.js파일  의   비동기 함수 
   fetch() 의 then( function(res) )  또는 ajax()의- success : function(res) 로 
 응답결과를 받아서 출력한다

 

board.js

const writeBoard = () => {
	

	//서버로 전송
	$.ajax({
		url : `${mypath}/BoardWrite.do`,
		data : JSON.stringify(fdata),
		contentType : 'application/json; charset=utf-8',
		type : 'post',
		success : function(res){ //res는 결과값을 받아야 함 
			
		},
		error : function(xhr){
			alert("상태 : " + xhr.status)
		},
		dataType : 'json'
	})

	
	/*
	// 단축키에는 에러를 사용할 수 없음
	$.post(
		`${mypath}/BoardWrite.do`,    // url
		JSON.stringify(fdata),		  // data
		function(res){ },		      // success
		'json'						  // dataType
	)
	*/
	
}


const listPerPage = () => {
	
	// 검색 대비를 위해서 값을 가지고 와야함
	vtype = $('#stype option:selected').val().trim();
	vword = $('#sword').val().trim();
	
	
	
	// 서버전송
	$.ajax({
		url : `${mypath}/BoardList.do`,
		type : 'post',
		data : JSON.stringify({
			page : currentPage,
			stype : vtype,
			sword : vword
		}),
		success : function(res){
			//console.log(res);
			// id=result인곳에 출력
			// 출력 내용
			let code = `<div class="container mt-3">
  						<div id="accordion">`
				
			$.each(res.datas, function(i, v){
						code += `<div class="card">
			      <div class="card-header">
			        <a class="btn" data-bs-toggle="collapse" href="#collapse${v.num}">
			        	${v.subject}
			        </a>
			      </div>
			      <div id="collapse${v.num}" class="collapse" data-bs-parent="#accordion">
			        <div class="card-body">
			            <div class="p12">
		               <p class="p1">
			                             작성자:<span class="wr">${v.writer}</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			                             이메일:<span class="em">${v.mail}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			                             조회수:<span class="hi">${v.hit}</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			                             날짜 :<span class="da">${v.wdate}</span>         
		               </p>
		               <p class ="p2">
		               
		               <input type="button"  value="수정" name="modify"  class="action">
		               <input type="button"  value="삭제" name="delete"  class="action">
		               </p>
		            </div>
		            <p class="p3">
		            ${v.content} <br>
		            </p>
		            <p class="p4">
		            <textarea rows="" cols="60"></textarea>
		            <input type="button"  value="등록" name="reply"  class="action">
		            </p>
		            
		        </div>
		      </div>
		    </div>`
			
			}) // 반복문
			
			
			code += `</div>
					 </div>`
				
			// 게시글 3개씩 출력
			$('#result').html(code);
			
			// 페이징 처리 - 함수 호출
			 pager = pageList(res.sp, res.ep, res.tp)
			 $('#pagelist').html(pager)
			
		}, // success
		
		error : function(xhr){
			alert("상태 : " + xhr.status)
		},
		dataType : 'json'
		
	})//ajax
	
	
	
}// listPerePage함수 끝



const pageList = (sp, ep, tp) =>{
	
	let pager = `<ul class="pagination">`
	
	// 이전 버튼 출력
	if(sp>1){
		pager += ` <li class="page-item"><a id="prev" class="page-link" href="#">Previous</a></li> `
	}
	
	//페이지 번호 출력
	for(i=sp; i<=ep; i++){
		if(currentPage == i){
			pager += `<li class="page-item active"><a class="page-link pageno" href="#">${i}</a></li>`
		}else{
			pager += `<li class="page-item"><a class="page-link pageno" href="#">${i}</a></li>`
			
		}
		
	}
	
	// 다음버튼 출력
	
	if(ep<tp){
		pager += `<li class="page-item"><a id="next" class="page-link" href="#">Next</a></li>`
	}
	
	pager += `</ul>`;
	
	return pager;
	
	
}

 

board.js /board.jsp

board.js 에서는 ${}을 사용
함 board.jsp는 같음
하지만 board.jsp ${}다른 용도로 쓰임(el태그)

 

 board.jsp에 추가 해서 ${} 사용가능하게 

<%@ page isELIgnored="true" %>

 

BoardWrite.do 는 controller 부분에 class추가 됨

 

board.jsp

- 페이징 / 검색 서치 작업 추가

<script>
/*프로젝트 이름 얻어오기 - mypath*/

mypath = '<%=request.getContextPath()%>'
currentPage = 1;

$(function() {
	
	// 리스트 3개씩 출력하기 - 최초 호출시 파라미터 없다
	// 외부 파일 board.js에 정의되어있는 스크립트 함수
	listPerPage();
	
	// 페이지 번호 클릭 이벤트
	$(document).on('click','.pageno', function(){
		// this >> .pageno
		currentPage = parseInt($(this).text().trim())
		listPerPage();
		
	})
	
	
	// 다음 버튼 클릭 이벤트
	$(document).on('click','#next',function(){
		currentPage = parseInt($('.pageno').last().text()) +1;
		listPerPage();
		
	})
	
	
	// 이전 버튼 클릭 이벤트
	$(document).on('click','#prev',function(){
		currentPage = parseInt($('.pageno').first().text()) -1;
		listPerPage();
		
	})
	
	//검색 버튼 클릭 이벤트
	$('#search').on('click', function(){
		currentPage = 1;  //  검색은 1페이지 부터		
		
		listPerPage();
	})
	
	
})
</script>

 

페이징 결과 화면)

 

검색 결과 화면) 이름이 김*

---

 

 

글쓰기 기능

글쓰기 버튼 추가

<input type="button" value="글쓰기" id="writer">

 

 

<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
		<div class="container-fluid">
		
			<!-- <a class="navbar-brand" href="javascript:void(0)">Logo</a>  -->
			
			<input type="button" value="글쓰기" id="writer">
			
			<!-- 화면 작아질 때 왼쪽 메뉴 생김 -->
			<button class="navbar-toggler" type="button"
				data-bs-toggle="collapse" data-bs-target="#mynavbar">
				<span class="navbar-toggler-icon"></span>
			</button>
			
			<div class="collapse navbar-collapse" id="mynavbar">
				<!-- 스타일 32 스타일 히든으로 줌 -->
				<ul class="navbar-nav me-auto">
					<li class="nav-item"><a class="nav-link"
						href="javascript:void(0)">Link</a></li>
					<li class="nav-item"><a class="nav-link"
						href="javascript:void(0)">Link</a></li>
				</ul>
				
				<form class="d-flex">
					<select class="form-select" id="stype">
						<option value="">전체</option>
						<option value="writer">이름</option>
						<option value="subject">제목</option>
						<option value="content">내용</option>
					</select> <input class="form-control me-2" type="text" id="sword"
						placeholder="Search">
					<button class="btn btn-primary" id="search" type="button">Search</button>
				</form>
			</div>
		</div>
	</nav>

 

 

글쓰기 모달 추가

<!-- writer The Modal 글쓰기 모달-->
	<div class="modal" id="wModal">
	  <div class="modal-dialog">
	    <div class="modal-content">
	
	      <!-- Modal Header -->
	      <div class="modal-header">
	        <h4 class="modal-title">Modal Heading</h4>
	        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
	      </div>
	
	      <!-- Modal body -->
	      <div class="modal-body">
	        	
	        	<form id="wform" name="wform">
	        		<label>이름</label>
	        		<input type="text" name="name" id="name"><br>
	        		<label>제목</label>
	        		<input type="text" name="subject" id="subject"><br>
	        		<label>이메일</label>
	        		<input type="text" name="mail" id="mail"><br>
	        		<label>비밀번호</label>
	        		<input type="password" name="password" id=""password"><br>
	        		<label>내용</label>
	        		<textarea rows="5" cols="50" name="content" id="content"></textarea><br>
	        		
	        		<br><br>
	        		<input type="text" id="wsend" value="전송">
	        	</form>
	        
	        
	      </div>
	
	      <!-- Modal footer -->
	      <div class="modal-footer">
	        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
	      </div>
	
	    </div>
	  </div>
	</div>

 

로그인 체크 하는 스크립트 함수

<%
	// 로그인 했는지 안 했는지 체크
	// 로그인 안 했으면 로그인 하세요 메세지 출력
	// 로그인 했으면 글쓰기 이름부분을 session에 저장된 이름을 넣어준ㄷ
	// 수정, 삭제시에도 버튼을 활서화 비활성화
	
	MemberVO vo = (MemberVO)session.getAttribute("loginok");

	// 자바 객체 VO를 json형태의 자바 스크립트 객체로 변환
	String ss = null;
	
	Gson gson = new Gson();
	
	//로그인 성공 시 json형태의 자바 스크립트 객체로 변환
	if(vo != null) ss = gson.toJson(vo);
	/* ss={"mem_id" : "a001", mem_pass="1234", mem_name="김은대", mem_mail : "..."}*/
	

%>

 

 

버튼 클릭 시 모달 창 오픈

// 자바 변수를 ss를 script변수로 생성 - uvo.mem_id uvo.mem_name
let uvo = <%=ss %>


//글쓰기 버튼 클릭 이벤트 - 글쓰기 모달 창 열기
	$('#write').on('click', function() {
		
		//로그인 했는지 체크
		if(uvo == null){
			alert("로그인 후 사용 가능합니다");
			return;
		}else {
			// writer Modal에 이름 부분에 로그인 한 이름 정보 출력
			$('#wModal').modal('show');		
			$('#wform #name').val(uvo.mem_name);
		}
	})
	
	
	
	// 글쓰기  모달창에서 각 항목을 입력 후 전송버튼 클릭 이벤트
	$('#wsend').on('click', function(){
		
		//입력한 모든값을 가져온다.
		fdata = $('#wform').serializeJSON();
		
		// 서버로 전송 - script 함수 호출 - board.js에 서버를 전송하는 스크립트 함수가 있음
		writeBoard();
		
		// 모달창에 입력한 내용 지우고 창 닫기
		//class릁 통해 전체 지우기 - 출력은 val
		$('#wform .indata').val("");
		$('#wModal').modal('hide')
		
		
		
	})

 

---

 

BoardWrite (controller)

package kr.or.ddit.board.controller;

import java.io.BufferedReader;
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;

import com.google.gson.Gson;

import kr.or.ddit.board.vo.BoardVO;


@WebServlet("/BoardWrite.do")
public class BoardWrite extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    
    public BoardWrite() {
        super();
    }




	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		StringBuffer buf = new StringBuffer();
		String line = null;
		
		try {
			 BufferedReader reader = request.getReader();
			
			while(true) {
				line = reader.readLine();
				if(line == null) break;
				
				buf.append(line);
				
			}
			
			
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		String reqdata = buf.toString();
		/*
		{"writer" : "김은대", "password" : "0000", 
			"subject" : "집보내줘", "mail" : "dddd",
			"content " : "dddd"
		}
		*/
		
		// 직렬화된 전송 데이터를 자바 객체로 역 직렬화 한다
		Gson gson = new Gson();
		BoardVO vo = gson.fromJson(reqdata, BoardVO.class);
		
		//vo.setwriter("김은대"), vo.setPassword("0000")......
		
		//service 객체를 얻는다
		
		//service 메소드 호출 - 결과 값 0 / 1
		
		// 결과값을 저장
		
		//view 페이지로 이동 - json데이터 생성
		
	}

}

 

결과 화면)

 

로그인 되어있을 시에만 글쓰기 가능