국비지원 70일차 - MVC 모델2 게시글 작성, 삭제 Ajax XML, 통신, 도서 검색

게시글 삭제

BoardDeleteAction

package board.controller;

import java.io.File;

import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import board.model.BoardDAO;
import board.model.BoardVO;
import common.controller.AbstractAction;

public class BoardDeleteAction extends AbstractAction {

	@Override
	public void execute(HttpServletRequest req, HttpServletResponse res) throws Exception {
		//1. 삭제할 글번호와 비번 받기
		String idx = req.getParameter("idx");
		String pwd = req.getParameter("pwd");
		System.out.println(idx+"/"+pwd);
		//2. 유효성 체크 => list.do로 redirect
		if(idx==null||pwd==null||idx.trim().isEmpty()||pwd.trim().isEmpty()) {
			this.setViewPage("list.do");
			this.setRedirect(true);
			return;
		}
		//3. BoardDAO생성해서 viewBoard(idx) ==> BoardVO받기
		//	사용자가 입력한 pwd와 BoardVO의 pwd 값이 같으면 삭제 처리 메소드 호출
		//  deleteBoard(idx)
		BoardDAO dao = new BoardDAO();
		BoardVO vo = dao.viewBoard(idx.trim());
		if(pwd.equals(vo.getPwd())) {
			//업로드한 파일이 있다면 서버의 Upload디렉토리에서 해당 파일을 삭제 처리한다.
			if(vo.getFilesize()>0) {
				ServletContext app =req.getServletContext();
				String upDir = app.getRealPath("Upload");
				String path = upDir+File.separator+vo.getFilename();
				File file= new File(path);
				if(file.exists()) {
					boolean a = file.delete();
					System.out.println("참조파일 삭제 여부"+a);
				}
			}
			dao.deleteBoard(idx);
		}else{
			req.setAttribute("message", "비밀번호가 일치하지 않음");
			req.setAttribute("loc", "javascript:history.back()");
		}
		//그 결과 메시지와 이동경로를("list.do")를 req에 저장한다.
		this.setViewPage("../msg.jsp");
		this.setRedirect(false);
	}
}

BoardWriteAction

package board.controller;

import java.io.File;
import java.io.IOException;

import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.oreilly.servlet.MultipartRequest;
import com.oreilly.servlet.multipart.DefaultFileRenamePolicy;

import board.model.BoardDAO;
import board.model.BoardVO;
import common.controller.AbstractAction;

public class BoardWriteAction extends AbstractAction {

	@Override
	public void execute(HttpServletRequest req, HttpServletResponse res) throws Exception {
		req.setCharacterEncoding("UTF-8");//=>한글 처리 필터로 대체
		//0.파일 업로드 처리하기
		//1) 업로드할 디렉토리 절대경로 얻기 ==> application.getRealPath("Upload");
		ServletContext application = req.getServletContext();
		String upDir = application.getRealPath("/Upload");
		System.out.println(upDir);
		MultipartRequest mr = null;
		try {
			DefaultFileRenamePolicy df = new DefaultFileRenamePolicy();
			mr=new MultipartRequest(req,upDir,10*1024*1024,"UTF-8",df);
		}catch(IOException e){
			req.setAttribute("message", "파일 업로드 실패: 용량은 10M까지 가능");
			req.setAttribute("loc", "javascript:history.back()");
			this.setViewPage("../msg.jsp");
			this.setRedirect(false);
			e.printStackTrace();
			return;
		}
		//1. 제목,이름,내용,비번 받아오기
		String subject = mr.getParameter("subject");
		String name = mr.getParameter("name");
		String content= mr.getParameter("content");
		String pwd=mr.getParameter("pwd");
		//String filename=mr.getParameter("filename");(X)
		//첨부파일을 얻어올 때는 mr.getFilesystemName("filename")
		String filename=mr.getFilesystemName("filename");
		String originFilename =mr.getOriginalFileName("filename");
		long filesize=0;
		File file=mr.getFile("filename");
		filesize = (file!=null) ? file.length():0;
		//2. 유효성 체크(이름,내용)
		if(subject==null||name==null||content==null||pwd==null||subject.trim().isEmpty()
				||name.trim().isEmpty()||content.trim().isEmpty()||pwd.trim().isEmpty()) {
			this.setViewPage("write.do");
			this.setRedirect(true);//redirect방식으로 글쓰기 페이지로 이동시키자.
			return;
		}
		//3. BoardVO에 담아주기
		BoardVO board = new BoardVO(0,name,subject,content,pwd,null,0,filename,originFilename,filesize);
		//4. BoardDAO생성후 insertBoard()호출
		BoardDAO dao = new BoardDAO();
		int n = dao.insertBoard(board);
		//5. 그 결과에 따라 message,loc req에 저장
		String message=(n>0)? "성공":"실패";
		String loc=(n>0)? "list.do":"javascript:history.back()";
		req.setAttribute("message", message);
		req.setAttribute("loc", loc);
		//6. 뷰페이지와 이동방식 지정
		this.setViewPage("../msg.jsp");
		this.setRedirect(false);
	}
}

boardWrite.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:include page="/top.jsp"/>
<div class="text-left p-5">
	<h1 class="text-center">MVC Board</h1>
	<p class="text-center">
		<a href="write.do">글쓰기</a>|
		<a href="list.do">글목록</a>
	</p>
	<!-- 파일업로드, 메소드는 post, enctype은 multipart/form-data를 주어야 데이터가 서버에 함께 전송-->
	<form name="bf" id="bf" action="writeEnd.do" method="post" enctype="multipart/form-data">
		<table class="table table-bordered">
			<tr>
				<th style="width:20%">제목</th>
				<td style="width:80%">
					<input type="text" name="subject" id="subject" placeholder="Subject" class="form-control">
				</td>
			</tr>
			<tr>
				<th style="width:20%">글쓴이</th>
				<td style="width:80%">
					<input type="text" name="name" id="name" placeholder="name" class="form-control">
				</td>
			</tr>
			<tr>
				<th style="width:20%">글내용</th>
				<td style="width:80%">
					<textarea rows="10" cols="50" name="content" id="content" placeholder="Content" class="form-control"></textarea>
				</td>
			</tr>
			<tr>
				<th style="width:20%">비밀번호</th>
				<td style="width:80%">
					<input type="password" name="pwd" id="pwd" placeholder="Password" class="form-control">
				</td>
			</tr>
			<tr>
				<th style="width:20%">첨부파일</th>
				<td style="width:80%">
					<input type="file" name="filename" id="filename" placeholder="Attatch File" class="form-control">
				</td>
			</tr>
			<tr>
				<td colspan="2" class="text-center">
					<button class="btn btn-success" id="btnWrite">글쓰기</button>
					<button type="reset" class="btn btn-warning" id="btnReset">다시쓰기</button>
				</td>
			</tr>	
		</table>
	</form>
</div>
<jsp:include page="/foot.jsp"/>

<script>
	$(function(){
		$("#bf").on('submit',function(e){
			//e.preventDefault();
			if(!$('#subject').val()){
				alert('글제목을 입력하세요');
				$('#subject').focus();
				return false;
			}
			if(!$('#name').val()){
				alert('작성자 이름을 입력하세요');
				$('#name').focus();
				return false;
			}
			if(!$('#pwd').val()){
				alert('비밀번호를 입력하세요');
				$('#pwd').focus();
				return false;
			}
		})
	})
</script>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
Ajax XML

Pizza2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:include page="/top.jsp"/>

<style type="text/css">
	/* body,h2{
		font-family:돋움,돋움체,verdana;
		color:navy;
	} */
</style>

<script type="text/javascript">
	var req=false;
	function init(){
		try{
			req=new XMLHttpRequest();//Ajax요청을 보내기 위해서 반드시 필요한 자바스크립트 객체
		}catch(e){
			//XMLHttpRequest객체를 지원하지 않는 브라우저인 경우
			try{
				req=new ActiveXObject("Msxml2.XMLHTTP");//IE인 경우
			}catch(e2){
				req=false;
			}
		}
		if(!req){
			alert('Ajax요청 불가 - req객체 생성 실패');
		}
	}
	function getUserInfo(){
		//사용자가 입력한 연락처 값을 받자.
		var phone = $("#phone").val();
		//alert(phone);
		//서버쪽에 연락처 정보를 가지고 요청을 보내자
		req.open("GET","pizzaResultXML.jsp?phone="+phone,true);
		//open(method방식, 서버페이지, 비동기여부)
		req.onreadystatechange=updatePage;
		//준비상태가 변화될 때마다 updatePage함수를 호출함
		/*요청을 send하기 전에 반드시 위 속성에 콜백함수를 지정해야 한다.*/
		
		req.send(null);//요청을 전송
		//get방식의 요철일 경우는 null을 넣어주고
		//post방식의 요청일 경우는 파라미터 데이터를 매개변수로 전달한다.
	}//getUserInfo()
	
	function updatePage(){
		//alert("req.readyState= "+req.readyState+", req.status="+req.status);
		if(req.readyState==4&&req.status==200){
			//성공적인 응답이 왔다면
			//서버로부터 받은 응답 데이터를 추출
			var res=req.responseXML;
			//텍스트 형태의 데이터일 경우 => responseText로 응답 데이터를 추출
			//XML형태의 데이터일 경우 => responseXML로 응답데이터를 추출
			//res ==> XMLDocumet ==$()함수로 wrapping을 하여 돔을 탐색
			var midx="",mname="",maddr="";//string
			midx=$(res).find("idx").text();
			mname=$(res).find("name").text();
			maddr=$(res).find("addr").text();
			if(parseInt(midx)!=0){
				var str="<ul class='list-group text-left'>";
				str+="<li class='list-group-item'>회원번호: "+midx+"</li>";
				str+="<li class='list-group-item'>회원이름: "+mname+"</li>";
				str+="<li class='list-group-item'>회원주소: "+maddr+"</li>";
				str+="</ul>"
				$('#userInfo').html(str);
				$('#userInfo').fadeIn(10);
				$('#nonUser').fadeOut(10);
			}else{
				$('#userInfo').html(str);
				$('#userInfo').fadeOut(10);
				$('#nonUser').fadeIn(10);
				$('#addr').focus();
			}
		}
	}
	window.onload=init;
</script>

</head>
<body>
<div class="section">
<div class="container">
	<h1>Pizza Order Page</h1>
	<form role="form" class="form-horizontal" 
	name="orderF" id="orderF"
	 action="order.jsp" method="POST">
		<div class="form-group">
			<p class="text-info">
			<b>귀하의 전화번호를 입력하세요:</b>
			<input type="text" size="20"
			 name="phone" id="phone" 
			 onchange="getUserInfo()"
			  class="form-control"/>
			</p>
			<p class="text-danger">
			<b>
				귀하가 주문하신 피자는 아래 주소로 배달됩니다.
			</b>	
			</p>
			<div id="userInfo"></div>
			<div id="address"></div>
			<!-- 비회원 입력 폼 : 비회원일 경우 주소입력 폼을 보여주자.-->
			<div id="nonUser" style="display:none;">
				주소: <input type="text" name="addr" id="addr"
						size="60" style="border:2px solid maroon;" class="form-control"/>
			</div>
			<!-- ------------------------------------------- -->
			<p class="text-info">
			<b>주문 내역을 아래에 기입하세요</b></p>
			<p>
				<textarea name="orderList"
				 id="orderList" rows="6" cols="50" class="form-control"></textarea>
			</p>
			<p>
				<input type="submit" value="Order Pizza" class="btn btn-primary"/>
			</p>
		</div>
	</form>
</div>
</div>

<jsp:include page="/foot.jsp"/>
</body>
</html>

PizzaResultXML
contentType="text/XML"로 해야한다.

<%@ page language="java" contentType="text/XML; charset=UTF-8"
    pageEncoding="UTF-8" import="java.sql.*, jdbc.util.*"%>

<% 
	//메모리에 캐시 사용하지 않도록
	response.setHeader("Cache-Control", "no-cache");
	//1.사용자 연락처 받기
	String phone=request.getParameter("phone");
	System.out.println(phone);
	
	Connection con =DBUtil.getCon();
	String sql = "select * from pizza_user where phone=?";
	PreparedStatement ps = con.prepareStatement(sql);
	ps.setString(1, phone);
	ResultSet rs = ps.executeQuery();
	String idx="0", name="", addr="";
	while(rs.next()){
		idx = rs.getInt("idx")+"";
		name=rs.getString("name");
		addr=rs.getString("addr");
	}
	rs.close();ps.close();con.close();
%>
<!-- xml문서 : 1)well-formed하고 2)validate한 문서여야 함 -->
<member>
	<idx><%=idx %></idx>
	<name><%=name %></name>
	<addr><%=addr %></addr>
</member>

 통신, 도서검색

	//모든 도서 정보 가져오기 ==> jquery의 $.ajax()함수를 이용해
	//Ajax 통신을 해보자
	/*
		$.ajax({
			type:'요청메소드',
			url:'서버페이지',
            		data:'post방식일때 전송할 파라미터데이터', //name=hong&addr=seoul
			dataType:'응답유형',
			cache: true|false,
			success:function(res){
				//응답이 성공적으로 왔을 경우 (readyState=4, status=400)
				//응답이 매개변수 res로 들어온다.
			},
			error:function(e){
				//에러가 발생했을 경우, 에러객체가 매개변수로 들어옴
			}
		})
	*/

book.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% 
response.setHeader("Pragma","No-cache"); //HTTP 1.0 
response.setDateHeader ("Expires", 0); 
	response.setHeader("Cache-Control","no-cache");
%>    
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>BOOK</title>
<!-- CDN 참조-------------------------------------- -->
<link rel="stylesheet"
	href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
	src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- ------------------------------------------------- -->
<style type="text/css">
</style>
<script type="text/javascript">
	$(function(){
		getAllBook();
	})
	var goDel=function(visbn){
		alert(visbn);
	}
	var goEdit=function(visbn){
		alert(visbn);
	}
	var getAllBook= function(){
		$.ajax({
			type:'get',
			url:'bookAll.jsp',
			dataType:'html',//text, html, xml, json ...
			cache: false,
			success:function(res){
				$("#book_data").html(res);
			},
			error:function(err){
				alert('error: '+err.status);
			}
		})
	}
</script>
</head>
<!--onload시 출판사 목록 가져오기  -->
<body onload="getPublish()">
   <div class="container">
	<h2 id="msg">서적 정보 페이지</h2>
<form name="findF" id="findF" role="form"
 action="" method="POST">
<div class="form-group">
<label for="sel" class="control-label col-sm-2">출판사</label>
<span id="sel"></span><span id="sel2"></span>
</div>
<p>
<div class='form-group'>
	<label for="books" class="control-label col-sm-2" id="msg1">도서검색</label>
	<div class="col-sm-6">
	<input type="text" name="books" id="books"
	 onkeyup="autoComp(this.value)"
	 class="form-control" >
	 <!-- ---------------------------- -->
	 <div id="lst1" class="listbox"
	  style="display:none">
	 	<div id="lst2" class="blist"
	 	 style="display:none">
	 	</div>
	 </div>
	 <!-- ---------------------------- -->
	</div>
</div>
</form>
<div>
 
 <button type="button"
  onclick="getBook()"
  class="btn btn-primary">검색</button>
 
 <button type="button" onclick="getAllBook()" class="btn btn-success">모두보기</button>
 <button type="button" id="openBtn"
  class="btn btn-info">OPEN API에서 검색</button><br><br>
</div>
<div id="localBook">

<table class="table table-bordered" border="1">
	<tr class="info">
		<td style="width:20%;">서명</td>
		<td style="width:20%;">출판사</td>
		<td style="width:20%;">가격</td>
		<td style="width:20%;">출판일</td>
		<td style="width:20%;">편집</td>
	</tr>
</table>
<!-- ----------------------- -->
<div id="book_data"></div>
<!-- ----------------------- -->
<form id="editF" name="editF">
<table id="book_info" class="table table-hover" border="2">
	<tr>
		<td width="20%">ISBN코드</td>
		<td>
		<input type="text" name="isbn" id="isbn"
		class="form-control" readonly>
		</td>
		<td rowspan="6" width="30%" id="bimage" class="text-center"></td>
	</tr>
	<tr>
		<td>서명</td>
		<td>
		<input type="text" name="title" id="title"
		class="form-control">
		</td>
		
	</tr>
	<tr>
		
		<td>출판사</td>
		<td>
		<input type="text" name="publish" id="publish"
		class="form-control">
		</td>
		
	
	</tr>
	<tr>
	
		<td>가격</td>
		<td>
		<input type="text" name="price" id="price"
		class="form-control">
		</td>
		
	</tr>
	<tr>
	
		<td>출판일</td>
		<td>
		<input type="text" name="published"
		 id="published"  disabled
		class="form-control">
		</td>
		
	</tr>
	<tr>
		<td colspan="2">
		<button type="button"
		onclick="goEditEnd()" class="btn btn-danger">갱신</button></td>
	</tr>
</table>
</form>
	</div>
</div><!-- #localBook end -->

<!-- ------------------------------- -->
<div id="openApiBook">

</div>
	
</body>
</html>

<!-- https://apis.daum.net/search/book -->
<!-- 53c73f32f6c4150ca5aa184ba6250d8e -->

<!-- https://apis.daum.net/search/book?apikey=53c73f32f6c4150ca5aa184ba6250d8e&q=다음카카오&output=json -->

bookAll.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="ajax.book.*,java.util.*,java.text.*" %>
<table class="table table-condensed table-striped">
<%
	BookDAO dao = new BookDAO();
	List<BookDTO> arr =dao.getAllBook();
	SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
	DecimalFormat df =new DecimalFormat("###,###");
	if(arr!=null){
		for(BookDTO b:arr){
		%>
			<tr>
				<td width="20%"><%=b.getTitle() %></td>
				<td width="20%"><%=b.getPublish() %></td>
				<td width="20%"><%=df.format(b.getPrice())%></td>
				<td width="20%"><%=sdf.format(b.getPublished()) %></td>
				<td width="20%"><a href="#book_data" onclick="goEdit('<%=b.getIsbn()%>')">수정</a>|<a href="#book_data" onclick="goDel('<%=b.getIsbn()%>')">삭제</a></td>
			</tr>
		<%
		}
	}else{
		out.println("<tr><td colspan='5'>");
		out.println("데이터가 없습니다.</td></tr>");
	}
%>
</table>