1117_Spring : 쪽지보내기 예제

호쏘2 2021. 11. 21. 19:57

2021. 11. 21. 19:57

package com.sp.app.note;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller("note.noteController")
@RequestMapping("/note/*")
public class NoteController {
	@Autowired
	private NoteService service;
	
	@RequestMapping(value="request", method=RequestMethod.GET)
	public String form(Model model) {
		
		List<Note> listFriend = service.listFriend();
		
		model.addAttribute("friends", listFriend);
		
		return "note/write";
	}
	
	/*
	@RequestMapping(value = "request", method = RequestMethod.POST)
	public String formSubmit(Note dto, Model model) throws Exception {
		
		model.addAttribute("msg", dto.getMsg());
		model.addAttribute("list", dto.getRecipient());
		return "note/result";
	}
	*/
	@RequestMapping(value = "request", method = RequestMethod.POST)
	public String formSubmit(Note dto, Model model) throws Exception {
		
		model.addAttribute("dto", dto);
		return "note/result";
	}
	
}

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
* {
	margin: 0; padding: 0;
    box-sizing: border-box;
}

body {
	font-size: 14px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
}

a {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
a:active, a:hover {
	text-decoration: underline;
	color: #F28011;
}

.btn {
	color: #333;
	border: 1px solid #333;
	background-color: #fff;
	padding: 4px 10px;
	border-radius: 4px;
	font-weight: 500;
	cursor:pointer;
	font-size: 14px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
	vertical-align: baseline;
}
.btn:hover, .btn:active, .btn:focus {
	background-color: #e6e6e6;
	border-color: #adadad;
	color:#333;
}
.boxTF {
	border: 1px solid #999;
	padding: 5px 5px;
	background-color: #fff;
	border-radius: 4px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
	vertical-align: baseline;
}
.selectField {
	border: 1px solid #999;
	padding: 4px 5px;
	border-radius: 4px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
	vertical-align: baseline;
}

.boxTA {
    border:1px solid #999;
    height:150px;
    padding:3px 5px;
    border-radius:4px;
    background-color:#fff;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
	resize : none;
	vertical-align: baseline;
}

textarea:focus, input:focus {
	outline: none;
}

.title {
	width:100%;
	font-size: 16px;
	font-weight: bold;
	padding: 13px 0;
}

.container {
    width: 400px;
    margin: 30px auto;
}

.note-table {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
}

.note-table th, .note-table td {
	padding: 5px 0;
}

.left {
	text-align: left;
	padding-left: 7px;
}
.center {
	text-align: center;
}
.right {
	text-align: right;
	padding-right: 7px;
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function() {
	$("#btnRight").click(function() {
		$("#friends option:selected").each(function() {
			$(this).appendTo("#recipient");
		});
	});
	
	$("#btnAllRight").click(function() {
		$("#friends option").each(function() {
			$(this).appendTo("#recipient");
		});
	});
	
	$("#btnLeft").click(function() {
		$("#recipient option:selected").each(function() {
			$(this).appendTo("#friends");
		});
	});
	
	$("#btnAllLeft").click(function() {
		$("#recipient option").each(function() {
			$(this).appendTo("#friends");
		});
	});$
});


function sendOk() {
	if($("#recipient option").length === 0) {
		alert("받는 사람을 먼저 추가하세요...");
		return;
	}
	
	$("#recipient option").prop("selected", true);
	
	if(! $("#msg").val().trim() ) {
		alert("내용을 입력하세요...");
		$("#msg").focus();
		return;
	}
	
	var f = document.noteForm;
	
	f.action = "${pageContext.request.contextPath}/note/request";
	f.submit();
}

</script>
</head>
<body>

<div class="container">
	<div class="title">
	   <h3><span>|</span> 쪽지 보내기</h3>
	</div>

	<form name="noteForm" method="post">
	<table class="note-table">
	<tr>
	    <td width="150"><span>친구목록</span></td>
	    <td width="100">&nbsp;</td>
	    <td width="150"><span>받는사람</span></td>
	</tr>
	
	<tr>
	    <td class="left">
	        <select name="friends" id="friends" multiple="multiple" class="selectField" style="width:130px; height:120px;">
	        	<c:forEach var="vo" items="${friends}">
	        		<option value="${vo.userId}">${vo.userName}</option>
	        	</c:forEach>
	        </select>
	    </td>
	    <td class="center">
		    <button type="button" class="btn" id="btnRight" style="display:block; width:80px;"> &gt; </button>
		    <button type="button" class="btn" id="btnAllRight" style="display:block;width:80px;"> &gt;&gt; </button>
		    <button type="button" class="btn" id="btnLeft" style="display:block;width:80px;"> &lt; </button>
		    <button type="button" class="btn" id="btnAllLeft" style="display:block;width:80px;"> &lt;&lt; </button>
	    </td>
	    <td class="left">
	        <select name="recipient" id="recipient" multiple="multiple" class="selectField" style="width:130px; height:120px;">
	        </select>
	    </td>
	</tr>
	<tr>
	    <td colspan="3">
	       <span>메시지</span>
	    </td>
	</tr>
	<tr>
	    <td colspan="3" class="left">
	        <textarea name="msg" id="msg" class="boxTA" style="height:60px; width: 98%;"></textarea>
	    </td>
	</tr>
	</table>
	
	<table class="table">
	<tr>
	    <td class="right">
	        <button type="button" class="btn" onclick="sendOk();"> 쪽지보내기 </button>
	    </td>
	</tr>
	</table>
	</form> 
</div>

</body>
</html>

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
* {
	margin: 0; padding: 0;
    box-sizing: border-box;
}

body {
	font-size: 14px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
}

a {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
a:active, a:hover {
	text-decoration: underline;
	color: #F28011;
}

.title {
	width:100%;
	font-size: 16px;
	font-weight: bold;
	padding: 13px 0;
}

.container {
    width: 400px;
    margin: 30px auto;
}
</style>

</head>
<body>

<div class="container">

    <div style="title">
       <h3><span>|</span> 쪽지 보내기 결과</h3>
    </div>

    <table style="width: 100%; margin: 10px auto 0px;">
    <tr height="30">
        <td width="100">받는사람</td>
        <!-- 
        <c:forEach var="vo" items="${list}" varStatus="status">
	        <td>${vo}</td>        
        </c:forEach>
         -->        
        <td>
	        <c:forEach var="vo" items="${dto.recipient}" varStatus="status">
		        ${vo}&nbsp;&nbsp;
	        </c:forEach>
        </td>                
    </tr>
    
    <tr>
        <td valign="top" style="margin-top: 5px;">메시지</td>
        <td>
        	<span style="white-space:pre;">${dto.msg}</span>
        </td>
    </tr>
    </table>
</div>

</body>
</html>

저작자표시 동일조건

'쌍용강북교육센터 > 11월' 카테고리의 다른 글

1118_Spring : @RequestHeader, @CookieValue 예제 (0)	2021.11.21
1118_Spring : @SessionAttributes, @ModelAttribute 예제 (0)	2021.11.21
1118_Spring : RESTful 예제 @PathVariable (0)	2021.11.21
1118_Spring : MVC 웹 애플리케이션 (2) (0)	2021.11.21
1117_Spring : MVC 웹 애플리케이션 (1) (0)	2021.11.21

개발새발, 써놓기

1117_Spring : 쪽지보내기 예제

'쌍용강북교육센터 > 11월' 카테고리의 다른 글

+ Recent posts

티스토리툴바