2016년 10월 17일 월요일

[자바강의,스프링강의,IT실무교육_탑크리에듀]4.(스프링4 답변형게시판)[VIEW작성,JSP]Spring JDBC]Spring4@MVC-멀티파일업로드,답변형,JSR303

첨부파일 URL참조 - http://ojc.asia/bbs/board.php?bo_table=LecSpring&wr_id=433

4.(스프링4 답변형게시판)[VIEW작성,JSP]Spring JDBC]Spring4@MVC-멀티파일업로드,답변형,JSR303 @Valid,@Controller,@ModelAttribute,@SessionAttributes,어노테이션기반,자바교육,스프링마이바티스학원



아래뷰는 webapps/jsp/ 아래에 작성하세요.


1. delete.jsp


<%@ page contentType="text/html; charset=utf-8" language="java" %>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<html>
<head>
<title>오라클자바커뮤니티  멀티파일업로드 게시판<br>(글삭제)</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script>
function check(){
if(document.delform.passwd.value == ""){
alert("비밀번호를  입력하세요.");
return;
} else {
delform.submit();
}
}
</script>
</head>

<body>
<form:form method="post" name="delform" action="/spring4board/delete.html">
<table border="1" align="center">
<tr>
<td>비밀번호</td>
<td><input type="password" name="passwd"></td>
  <td>
    <input type="button" value="확인" onClick="check();"> 
    <input name="button" type="reset" value="취소" ></td>
</tr>
</table>
<table align="center"><tr><td><a href="/spring4board/list.html">목록보기</a></td></tr></table>
<input type="hidden" name="seq" value="${param.seq}">
</form:form>
</body>
</html>



2. list.jsp



<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<html>
<head>
<title>오라클자바커뮤니티 교육센터</title>
<style type="text/css">
.tooltip {
position: absolute;
z-index: 3;
background: #E8E8E8;
border: 1px solid #434343;
padding: 3px;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script language="javascript">
$(document).ready(function() {
// 모든 글의 a 태그에 마우스 오버 바인딩
$('a.article').mouseover(function(event) {
contentprev($(this).attr('id'), event);
});
});
// 마우스 오버시 바인딩 될 function
function contentprev(seq, event) {
var data_string = '';
$.ajax({
type : 'GET',
url : 'preView?' + 'seq=' + seq,
data : data_string,
//dataType: 'JSON',
dataType : 'text',
beforeSend : function() {
},
success : function(data) {
showlayer(data, event);
},
error : function(error) {
//alert(error.responseText);
}
});
}
// showlayer 가 호출된 후 전달받은 마우스 이벤트의 좌표로 레이어를 이동
function moveTooltip(event) {
var posX = event.pageX;
var posY = event.pageY + 20;
//alert(posX + ', ' + posY);
$('div.tooltip').css({
top : posY,
left : posX
});
}
// 기존 레이어를 삭제 후 새로 레이어를 생성
function showlayer(value, event) {
// 
$('div.tooltip').remove();
$('<div class="tooltip">' + value.replace(/\r\n/gi, '<br>') + '</div>')
.appendTo('body');
moveTooltip(event);
}
// 레이어 삭제
function hidelayer() {
$('div.tooltip').remove();
}
</script>
</head>
<body>
<div style="width: 500px;">
<div style="float: center;">
<H3>오라클자바커뮤니티  멀티파일업로드 게시판<br>(글리스트보기)</H3>
<h5>총 ${list.size()}건</h5>
<table width="600" border="1" align="left">
<tr align="left">
<td width="10%" align="center">번호</td>
<td width="40%" align="center">제목</td>
<td width="20%" align="center">이름</td>
<td width="20%" align="center">날짜</td>
<td width="10%" align="center">조회</td>
</tr>
<c:forEach var="board" items="${list}">
<tr>
<td align="center"><c:if test="${board.reply_step == 0}">
     ${board.seq}
     </c:if> <c:if test="${board.reply_step != 0}">
     &nbsp;
     </c:if></td>
<td><c:choose>
<c:when test="${board.reply_step != 0}">
<!-- 게시글이 덧글일 경우 -->
<c:forEach var="i" begin="1" end="${board.reply_level}"
step="1">
<!-- 레벨의 수만큼 글을 뒤로 민다 -->
     &nbsp;&nbsp;
     </c:forEach>
<a class="article" id="${board.seq}"
href="read.html?seq=${board.seq}" onmouseout="hidelayer();">&nbsp;${board.title}</a>
</c:when>
<c:when test="${board.reply_step == 0}">
<a class="article" id="${board.seq}"
href="read.html?seq=${board.seq}" onmouseout="hidelayer();">&nbsp;${board.title}</a>
</c:when>
</c:choose></td>
<td align="center">&nbsp;${board.name}</td>
<td align="center">${board.regdate}</td>
<td align="center">${board.readCount}</td>
</tr>
</c:forEach>
<tr>
<td align="center"><input type="button" value="쓰기"
onclick="location.href='write.html';"></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
</div>
</body>
</html>



3. read.jsp


<%@ page contentType="text/html; charset=utf-8" language="java" errorPage="" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>게시물 읽기</title>
<script>
function write_ok(){
writeform.submit();
}
function update_ok(){
document.viewform.action = '/spring4board/update.html';
document.viewform.submit();
</script>
</head>

<body>
<div style="width:600px;">
<div style="float:enter;">

<table width="600" height="420" border="1" align="center">
  <tr height="20"><h3>오라클자바커뮤니티  멀티파일업로드 게시판<br>(글읽기)</h3></tr>
  <form name="viewform" method="post">
  <input type="hidden" name="seq" value="${read.seq}">
  <input type="hidden" name="passwd" value="${read.passwd}">
  <input type="hidden" name="reply" value="${read.reply}">
  <input type="hidden" name="reply_step" value="${read.reply_step}">
  <input type="hidden" name="reply_level" value="${read.reply_level}">
  <tr>
    <td width="100">* 이름</td>
    <td width="500">: <input name="name" type="text" value="${read.name}" size="50" readonly>
      </td>
  </tr>
  <tr>
    <td>* 제목</td>
    <td>:
    <input name="title" type="text" value="${read.title}" size="50" ></td>
  </tr>
  <tr align="center">
    <td colspan="2"><textarea name="content" cols="80" rows="12" >${read.content}</textarea></td>
  </tr>
  <!--  게시물 수정인 경우 업로드한 파일은 수정이 안됨 -->
  <tr>
    <td>* 파일1</td>
    <td>:
<c:choose>
<c:when test="${read.fileName1 != null}">
${read.fileName1}
</c:when>
<c:when test="${read.fileName1 == null}">
파일 없음
</c:when>
</c:choose>
</td>
  </tr>
  <tr>
    <td>* 파일2</td>
    <td>:
<c:choose>
<c:when test="${read.fileName2 != null}">
${read.fileName2}
</c:when>
<c:when test="${read.fileName2 == null}">
파일 없음
</c:when>
</c:choose>
</td>
  </tr>
  <tr>
    <td>* 파일3</td>
    <td>:
<c:choose>
<c:when test="${read.fileName3 != null}">
${read.fileName3}
</c:when>
<c:when test="${read.fileName3 == null}">
파일 없음
</c:when>
</c:choose>
</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input name="button" type="button" onClick="location.href='/spring4board/reply.html?seq=${read.seq}'" value="답변">
|
  <input name="button" type="button" onClick="update_ok()" value="수정">
<input name="button" type="button" onClick="location.href='/spring4board/jsp/delete.jsp?seq=${read.seq}'" value="삭제">
|
<input name="button" type="button" onClick="location.href='/spring4board/list.html'" value="목록"></td>
  </tr>
  </form>
  <tr>
    <td height="99" colspan="2">
    <!-- BoardMultiController의 comment() 메소드 호출 -->
    <form method="post" action="comment.html">
    <table border="1">
      <tr>       
        <td>이름 : </td>
        <td><input type="text" name="name"></td>
        <td>코멘트:</td>
        <td><input type="text" name="comment"></td>
        <td><input type="submit" name="Button" value="쓰기"></td>
      </tr>
    </table>
    <input type="hidden" name="seq" value="${read.seq}">
    </form>
            <!--  달려있는 커맨트 보기 -->
     <table width="789" border="1">
         <c:forEach var="comment" items="${comments}">
    <tr>
          <td width="42" align="center">*</td>
          <td width="86">${comment.name}</td>
          <td width="639">${comment.comment}</td>
        </tr>
    </c:forEach>
      </table>
      </td>
    </tr>
    
</table>
<br><br>
<table><tr><td><tr><b>http://www.ojcedu.com</tr></td></tr></table>


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





4. reply.jsp


<%@ page contentType="text/html; charset=utf-8" language="java" %>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<html>
<head>
<title>답변 달기</title>
</head>
<body>
<div style="width:600px;">
<form:form modelAttribute="replyForm"  method="post" name="form" action="replyok.html">
<table><tr><td><h2>오라클자바커뮤니티  멀티파일업로드 게시판<br>(답글달기)</h2><tr><td></table>
<table width="600" height="277" border="1" align="center">
  <tr>
    <td width="120">* 이름</td>
    <td width="480">: <form:input path="name" size="50"/></td>
  </tr>
  <tr><td colspan="2"><font color="red"><form:errors path="name"/></font></td></tr>
  <tr>
    <td>* 제목</td>
    <td>:
    <form:input path="title" value="Re: ${read.title}" size="50"/></td>
  </tr>
  <tr><td colspan="2"><font color="red"><form:errors path="title"/></font></td></tr>
  <tr align="center">
    <td colspan="2">
     <form:textarea path="content" cols="80" rows="10"  />  
   </td>
  </tr>
  <tr><td colspan="2"><font color="red"><form:errors path="content"/></font></td></tr>
  <tr>
    <td>* 비밀번호</td>
    <td>:
      <form:password path="passwd"/></td>
  </tr> 
  <tr><td colspan="2"><font color="red"><form:errors path="passwd"/></font></td></tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="submit" value="답변"> | 
        <input type="reset" value="취소">
        <input type="button" onClick="location.href='/spring4board/list.html'" value="목록">
     </td>
  </tr>
</table>
<input type="hidden" name="seq" value="${read.seq}">
<input type="hidden" name="reply" value="${read.reply}">
<input type="hidden" name="reply_step" value="${read.reply_step}">
<input type="hidden" name="reply_level" value="${read.reply_level}">
</form:form>
</div>
<br><br>
<table><tr><td><tr><b>http://www.ojcedu.com</tr></td></tr></table>
</body>
</html>




5. write.jsp


<%@ page contentType="text/html; charset=utf-8" language="java" %>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<html>
<head>
<title>게시물 쓰기</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
<!-- jquery로 파일 첨부 추가 -->
$(document).ready(function() {
    //add more file components if Add is clicked
    $('#addFile').click(function() {
        var fileIndex = $('#fileview tr').length; 
        if (Number(fileIndex) >= '3') {
         alert('FILE UPLOAD는 3개만 가능 합니다.');
         return;
        }
        $('#fileview').append(
                '<tr><td>'+
                '   <input type="file" name="files['+ fileIndex +']" />'+
                '</td></tr>');
    });     
});
</script>

</head>

<body>
<H3>오라클자바커뮤니티  멀티파일업로드 게시판<br>(글쓰기)</H3>
<form:form method="post" action="writeok.html" name="form"
      modelAttribute="uploadForm" 
       enctype="multipart/form-data">
<table width="580" height="277" border="1" align="center">
  <tr>
    <td width="100">* 이 름</td>
    <td width="580">: <form:input path="name" size="50"/>
      </td>
  </tr>
  <tr><td colspan="2"><font color="red"><form:errors path="name"/></font></td></tr>
  <tr>
    <td>* 제 목</td>
    <td>: <form:input path="title" size="50"/>
  </tr>
  <tr><td colspan="2"><font color="red"><form:errors path="title"/></font></td></tr>
  <tr align="center">
    <td colspan="2">
     <form:textarea path="content" cols="80" rows="10"/>    
    </td>
  </tr>
  <tr><td colspan="2"><font color="red"><form:errors path="content"/></font></td></tr>
  <tr><input id="addFile" type="button" value="File Add" /> </tr>
  <tr>
    <td>* 파  일  : </td>
    <td><table id="fileview">
<tr>
    <td>     
    <input name="files[0]" type="file" />
    </td>
   </tr>
  </table>
    </td>
  </tr>
  <tr>
    <td>* 비밀번호</td>
    <td>: <form:password path="passwd"/></td>
  </tr>
  <tr><td colspan="2"><font color="red"><form:errors path="passwd"/></font></td></tr>  
  <tr>
    <td>&nbsp;</td>
    <td>
      <input type="submit" value="저장"/>
      <input type="reset" value="취소">
      <input type="button" onClick="location.href='/spring4board/list.html'" value="목록">      
     </td>
  </tr>
</table>
</form:form>
</body>
</html>

댓글 없음:

댓글 쓰기