[싱글벙글] 쪽지
업데이트:
쪽지
쪽지 보내기 버튼
1등급만 이용 가능한 벙글장터와 만남의광장 상세조회 페이지에 쪽지보내기 아이콘이 생긴다.
- 출력화면
만남의 광장
벙글장터
쪽지 보내기 버튼
<c:if test="${loginMember.memberNo != findFriend.memNo }">
<div class="text-center" style="display : inline-block">
<button id="send" class="btn" data-toggle="modal" data-backdrop="static" data-target="#sendMessage" style="padding:0px; margin-bottom : 4px;">
<img src="${contextPath}/resources/images/message1.png" width="25" height="25"> <span>쪽지보내기</span>
</button>
</div>
</c:if>
쪽지 모달창
받는 사람의 이름에 게시글을 작성한 회원의 닉네임이 보이게 된다.
회원번호는 hidden으로 숨겨져있다.
<form method="POST" action="${contextPath}/message/sendMessage" onsubmit="return messageValidate();">
<div id="sendMessage" class="modal fade">
<div class="modal-dialog modal-confirm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">받는사람 : ${findFriend.nickname} </h5>
<input type="hidden" name="memberNo" value="${findFriend.memNo}">
</div>
<div class="modal-body" style="padding-bottom : 1px;">
<textarea class="messageText" id="writeMessage" name="content" style="border: 1px solid black; height: 150px; width: 100%; resize: none;"></textarea>
<div id="messageCnt" class="float-right" style="font-size:13px;">(0/100)</div>
</div>
<div class="modal-footer">
<div class="col">
<button type="submit" class="btn maincolor btn-block">
<span class="plan">전송</span>
</button>
</div>
<div class="col">
<button type="button" class="btn maincolor-re btn-block" data-dismiss="modal">
<span class="plan">닫기</span>
</button>
</div>
</div>
</div>
</div>
</div>
</form>
- 유효성 검사 script
<script>
function messageValidate(){
if($("#writeMessage").val().trim().length ==0){
swal("내용을 입력해 주세요");
$("#writeMessage").focus();
return false;
}
}
// 메세지 글자수 제한
$(document).ready(function(){
$("#writeMessage").on('input',function(){
$("#messageCnt").html("("+$(this).val().length+" / 100)");
if($(this).val().length>100){
$(this).val($(this).val().substring(0,100));
$("#messageCnt").html("(100/100)");
}
});
});
</script>
메세지 전송
Controller
@RequestMapping("sendMessage")
public String sendMessage(@RequestParam("memberNo") int memberNo,
@RequestParam("content") String content,
@ModelAttribute(name="loginMember", binding=false) Member loginMember,
RedirectAttributes ra, HttpServletRequest request) {
Map<String,Object> map = new HashMap<String, Object>();
// 메세지 받는 사람
map.put("receiveMember", memberNo);
// 메세지 보내는 사람
map.put("sendMember", loginMember.getMemberNo());
// 쪽지내용
map.put("content", content);
int result = service.sendMessage(map);
if(result>0) {
swalIcon = "success";
swalTitle = "쪽지 전송 완료";
}else {
swalIcon = "error";
swalTitle = "쪽지 전송 실패";
}
ra.addFlashAttribute("swalIcon", swalIcon);
ra.addFlashAttribute("swalTitle", swalTitle);
String referer = request.getHeader("Referer");
return "redirect:" + referer;
}
Service
int sendMessage(Map<String, Object> map);
ServiceImpl
@Transactional(rollbackFor = Exception.class)
@Override
public int sendMessage(Map<String, Object> map) {
// 쪽지번호 얻어오기
int msgNo = dao.selectNextNo();
map.put("msgNo",msgNo);
int result = dao.sendMessage(map);
return result;
}
- 쪽지 번호 얻어오기
DAO
public int selectNextNo() {
return sqlSession.selectOne("messageMapper.selectNextNo");
}
Mapper
<select id="selectNextNo" resultType="_int">
SELECT SEQ_MSGNO.NEXTVAL FROM DUAL
</select>
- 쪽지 보내기
DAO
public int sendMessage(Map<String, Object> map) {
return sqlSession.insert("messageMapper.sendMessage", map);
}
Mapper
<insert id="sendMessage" parameterType="map">
INSERT INTO MESSAGE (MSG_NO, MEM_NO1, MEM_NO2, MSG_CONTENT)
VALUES(#{msgNo}, #{sendMember}, #{receiveMember}, #{content})
</insert>
받은 쪽지 함
- 출력화면
JSP
<style>
.messageBox {
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
border-radius : 15px;
margin : 0 0 10px 20px;
}
table tr td{
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
max-width :120px;
}
/******* 페이징 *******/
.flex {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto
}
#page-content {
margin-top: 20px;
}
.pagination, .jsgrid .jsgrid-pager {
display: flex;
padding-left: 0;
list-style: none;
border-radius: 0.25rem
}
.page-item > a, .page-item > a:hover { color: black; }
.pagination.pagination-rounded-flat .page-item {
margin: 0 .25rem
}
.pagination-success .page-item.active .page-link {
background: #00c689;
border-color: #00c689
}
.pagination.pagination-rounded-flat .page-item .page-link {
border: none;
border-radius: 50px;
}
#messageTable #messageContent, #messageTable #sendNickName:hover {
cursor: pointer;
}
.modal-header{
backgound-color : #ffaf18 !important;
}
html{
position : relative;
min-height:100%;
margin : 0;
}
body {
min-height:100%;
}
.footer{
position:absolute;
left : 0;
bottom : 0;
width:100%;
text-align : center;
}
</style>
</head>
<body>
<jsp:include page="../common/header.jsp" />
<div class="container">
<div class="row">
<div class="col-md-12" style="padding-left : 26px">
<div class="messageBox" style="display: inline-block; background-color :#ffaf18 ;">
<span>받은 쪽지</span>
</div>
<div class="messageBox" style="display: inline-block; color: #ffaf18; border:1px solid #ffaf18; ">
<a href="${contextPath}/message/messageBoxS">보낸 쪽지</a>
</div>
<div class="float-right" id="deleteBtn" style="display: inline-block; margin-top: 10px; margin-right:10px;">
<button class="maincolor-re" id="deleteBtn" onClick="deleteBtn()">삭제</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-stripped" id="messageTable" style="text-align : center;">
<thead>
<tr>
<th><input type="checkbox" id="checkAll"/></th>
<th>보낸 사람</th>
<th>내용</th>
<th>보낸 시간</th>
<th>상태</th>
</tr>
</thead>
<tbody>
<c:if test="${empty mList }">
<tr>
<td colspan="5"> 받은 쪽지가 없습니다.</td>
</tr>
</c:if>
<c:if test="${!empty mList }">
<c:forEach var="message" items="${mList}" varStatus="vs">
<tr>
<td><input type="checkbox" name="chk" value="${message.messageNo}"></td>
<td ><span id="sendNickName">${message.sendNickName}</span></td>
<td id="messageContent">${message.messageContent}</td>
<td>
<%-- 날짜 출력 모양 지정 --%>
<fmt:formatDate var="createDate" value="${message.createDt }" pattern="yyyy-MM-dd"/>
<fmt:formatDate var="now" value="<%=new java.util.Date()%>" pattern="yyyy-MM-dd"/>
<c:choose>
<c:when test="${createDate != now}">
${createDate }
</c:when>
<c:otherwise>
<fmt:formatDate value="${message.createDt }" pattern="HH:mm"/>
</c:otherwise>
</c:choose>
</td>
<td id="readStatus">
<c:choose>
<c:when test="${message.readMessage == 'N' }">
<i class="far fa-envelope"></i>읽지않음
</c:when>
<c:otherwise>
<i class="far fa-envelope-open"></i>읽음
</c:otherwise>
</c:choose>
</td>
<!-- 쪽지 보낸 회원 no를 받아놨다가 답장할때 가져간다 -->
<input type="hidden" id="sendMemberNo" value="${message.sendMember }">
</tr>
</c:forEach>
</c:if>
</tbody>
</table>
</div>
</div>
<!-- 페이징 시작-->
<div class="page-content page-container" id="page-content">
<div class="padding">
<div class="row container d-flex justify-content-center">
<div class="col-md-4 col-sm-6 grid-margin stretch-card">
<nav>
<ul class="pagination d-flex justify-content-center flex-wrap pagination-rounded-flat pagination-success">
<c:url var="pageUrl" value="?"/>
<c:set var="firstPage" value="${pageUrl}cp=1" />
<c:set var="lastPage" value="${pageUrl}cp=${pInfo.maxPage }" />
<fmt:parseNumber var="c1" value="${(pInfo.currentPage - 1) / 10 }" integerOnly="true" />
<fmt:parseNumber var="prev" value="${ c1 * 10 }" integerOnly="true" />
<c:set var="prevPage" value="${pageUrl}cp=${prev}" />
<fmt:parseNumber var="c2" value="${(pInfo.currentPage + 9) / 10 }" integerOnly="true" />
<fmt:parseNumber var="next" value="${ c2 * 10 + 1 }" integerOnly="true" />
<c:set var="nextPage" value="${pageUrl}cp=${next}" />
<c:if test="${pInfo.currentPage > pInfo.pageSize}">
<li class="page-item"><a class="page-link maincolor-re1" href="${firstPage }" data-abc="true"><i class="fas fa-angle-double-left"></i></a></li>
<li class="page-item"><a class="page-link maincolor-re1" href="${prevPage }" data-abc="true"><i class="fa fa-angle-left"></i></a></li>
</c:if>
<c:forEach var="page" begin="${pInfo.startPage }" end="${pInfo.endPage }">
<c:choose>
<c:when test="${pInfo.currentPage == page }">
<li class="page-item active">
<a class="page-link">${page}</a> <!-- 같은 페이지일때는 클릭이 안 된다. -->
</li>
</c:when>
<c:otherwise>
<li class="page-item">
<a class="page-link maincolor-re1" href="${pageUrl}cp=${page}">${page}</a>
</li>
</c:otherwise>
</c:choose>
</c:forEach>
<c:if test="${next <=pInfo.maxPage }">
<li class="page-item"><a class="page-link maincolor-re1" href="${nextPage }" data-abc="true"><i class="fa fa-angle-right"></i></a></li>
<li class="page-item"><a class="page-link maincolor-re1" href="${lastPage }" data-abc="true"><i class="fas fa-angle-double-right"></i></a></li>
</c:if>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<!-- 페이징 끝 -->
<!-- 쪽지 읽기 -->
<div id="readMessage" class="modal fade" data-backdrop="static">
<div class="modal-dialog modal-confirm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">보낸사람 : <span id="sender" style="font-size:19px;"></span></h5>
</div>
<div class="modal-body" >
<div class="messageArea" style="border: 1px solid black;height: 150px; padding:10px;" id="viewMessage"></div>
</div>
<div class="modal-footer" >
<div class="col"><button id="send" class="btn maincolor btn-block" data-toggle="modal" data-backdrop="static" data-target="#sendMessage" >답장하기</button></div>
<div class="col"><button type="button" class="btn maincolor-re btn-block closeMessage" data-dismiss="modal"><span class="plan">닫기</span></button></div>
</div>
</div>
</div>
</div>
<!-- 쪽지 읽기 -->
<!-- 답장 쓰기 -->
<form method="POST" action="${contextPath}/message/sendMessage" onsubmit="return messageValidate();">
<div id="sendMessage" class="modal fade">
<div class="modal-dialog modal-confirm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">받는사람 : <span id="receiver" style="font-size:19px;"></span> </h5>
<input type="hidden" name="memberNo" id="hiddenMemberNo">
</div>
<div class="modal-body" style="padding-bottom : 1px;">
<textarea class="messageText" id="writeMessage" name="content" style="border: 1px solid black; height: 150px; width: 100%; resize: none;"></textarea>
<div id="messageCnt" class="float-right" style="font-size:13px;">(0/100)</div>
</div>
<div class="modal-footer">
<div class="col">
<button type="submit" class="btn maincolor btn-block">
<span class="plan">전송</span>
</button>
</div>
<div class="col">
<button type="button" class="btn maincolor-re btn-block closeMessage" data-dismiss="modal">
<span class="plan">닫기</span>
</button>
</div>
</div>
</div>
</div>
</div>
</form>
<!-- 답장 쓰기 -->
<jsp:include page="../common/footer.jsp" />
<script>
// 페이지 새로고침
function refreshFunction(){
location.reload();
}
메세지 읽음 상태 변경
내용을 클릭하면 메세지가 읽어진다.
AJAX를 통해서 메세지 읽음 상태가 변경된다.
$("#messageTable > tbody #messageContent").on("click",function(){
var messageNo = $(this).parent().children().eq(0).children("input").val();
var sender = $(this).parent().children().eq(1).text();
var senderNo = $(this).parent().children("input").eq(0).val();
var viewMessage = $(this).parent().children().eq(2).text();
$("#sender").text(sender);
$("#viewMessage").text(viewMessage);
$.ajax({
url : "${contextPath}/message/updateReadStatus/" + messageNo,
type : "post",
data : {"messageNo":messageNo},
success : function(result){
$("#readMessage").modal("show");
$("#receiver").text(sender);
$("#hiddenMemberNo").val(senderNo);
},error :function(){
console.log("메세지 읽기 실패");
}
});
});
// 메세지 읽고 닫기 누르면 페이지 새로고침
$(".closeMessage").on("click",function(){
refreshFunction();
})
Controller
@ResponseBody
@RequestMapping("updateReadStatus/{messageNo}")
public int updateReadStatus(@PathVariable("messageNo") int messageNo) {
return service.updateReadStatus(messageNo);
}
Service
int updateReadStatus(int messageNo);
ServiceImpl
@Transactional(rollbackFor = Exception.class)
@Override
public int updateReadStatus(int messageNo) {
return dao.updateReadStatus(messageNo);
}
DAO
public int updateReadStatus(int messageNo) {
return sqlSession.update("messageMapper.updateReadStatus",messageNo);
}
Mapper
<update id="updateReadStatus" parameterType="_int">
UPDATE MESSAGE SET
READ_MESSAGE = 'Y'
WHERE MSG_NO = #{messageNo}
</update>
답장하기 버튼과 닉네임을 클릭하면 쪽지 보내기 창이 열린다.
$("#send").on("click", function(){
$("#readMessage").modal("hide");
$("#sendMessage").modal("show");
});
$("#messageTable > tbody #sendNickName").on("click",function(){
var memberNo = $(this).parent().parent().children().eq(5).val();
var receiver = $(this).parent().parent().children().eq(1).text();
$("#receiver").text(receiver);
$("#hiddenMemberNo").val(memberNo);
$("#sendMessage").modal("show");
});
// 메세지 유효성 검사
function messageValidate(){
if($(".messageText").val().trim().length ==0){
swal("내용을 입력해 주세요");
$(".messageText").focus();
return false;
}
}
// 메세지 쓰기 글자수 제한
$(document).ready(function(){
$("#writeMessage").on('input',function(){
$("#messageCnt").html("("+$(this).val().length+" / 100)");
if($(this).val().length>100){
$(this).val($(this).val().substring(0,100));
$("#messageCnt").html("(100/100)");
}
});
});
### 받은 쪽지 삭제
메세지를 체크한 후 삭제 버튼을 누르면 AJAX를 통해 메세지가 삭제된다.
// 체크박스 전체 선택
$(document).ready(function(){
$("#checkAll").click(function(){
if($("#checkAll").prop("checked")){
$("input[name=chk]").prop("checked",true);
}else{
$("input[name=chk]").prop("checked",false);
}
});
});
// 체크된 메세지 삭제
function deleteBtn(){
var messageNo = [];
$("input[name=chk]:checked").each(function(){
messageNo.push($(this).val());
});
if(confirm("정말로 삭제하시겠습니까?")){
$.ajax({
url : "${contextPath}/message/deleteReceiveMessage",
type : "post",
data : {"messageNo":messageNo},
success : function(result){
if(result>0){
refreshFunction();
}
},
error : function(){
console.log("쪽지 삭제 실패");
}
});
}
}
</script>
Controller
@ResponseBody
@RequestMapping("deleteReceiveMessage")
public int deleteReceiveMessage(@RequestParam(value="messageNo[]") int[] messageNo) {
List<Integer> list = new ArrayList<Integer>();
for(int i=0; i<messageNo.length; i++) {
list.add(messageNo[i]);
}
return service.deleteReceiveMessage(list);
}
Service
int deleteReceiveMessage(List<Integer> list);
ServiceImpl
@Transactional(rollbackFor = Exception.class)
@Override
public int deleteReceiveMessage(List<Integer> list) {
return dao.deleteReceiveMessage(list);
}
DAO
public int deleteReceiveMessage(List<Integer> list) {
return sqlSession.update("messageMapper.deleteReceiveMessage",list);
}
Mapper
<update id="deleteReceiveMessage" parameterType="list">
UPDATE MESSAGE SET
RECEIVE_STATUS = 'Y'
WHERE MSG_NO IN
<foreach collection="list" item="msgNo" open="(" close=")" separator=",">
${msgNo}
</foreach>
</update>
Controller
@RequestMapping("messageBoxR")
public String messageBox(@RequestParam(value="cp", required=false, defaultValue="1") int cp,
@ModelAttribute(name="loginMember", binding=false) Member loginMember,
Model model) {
int memberNo = loginMember.getMemberNo();
// 페이징 처리 : 받은 쪽지 수 조회
MessagePageInfo pInfo = service.getReceivePageInfo(cp,memberNo);
Map<String, Object> map = new HashMap<String, Object>();
map.put("memberNo",memberNo);
map.put("pInfo", pInfo);
// 받은 쪽지 목록 조회
List<Message> mList = service.selectReceiveList(map);
model.addAttribute("mList",mList);
model.addAttribute("pInfo", pInfo);
return "/message/messageBoxR";
}
- 페이징 처리를 위한 받은 쪽지 수 조회
Service
MessagePageInfo getReceivePageInfo(int cp, int memberNo);
ServiceImpl
public MessagePageInfo getReceivePageInfo(int cp, int memberNo) {
int listCount = dao.getReceivePageInfo(memberNo);
return new MessagePageInfo(cp, listCount);
}
DAO
public int getReceivePageInfo(int memberNo) {
return sqlSession.selectOne("messageMapper.getReceivePageInfo", memberNo);
}
Mapper
<select id="getReceivePageInfo" parameterType="_int" resultType="_int">
SELECT COUNT(*) FROM V_MESSAGE
WHERE RECEIVE_STATUS ='N'
AND RECEIVE_MEMBER = #{memberNo}
</select>
- 받은 쪽지 목록 조회
Service
List<Message> selectReceiveList(Map<String, Object> map);
ServiceImpl
@Override
public List<Message> selectReceiveList(Map<String, Object> map) {
return dao.selectReceiveList(map);
}
DAO
public List<Message> selectReceiveList(Map<String, Object> map) {
MessagePageInfo pInfo = (MessagePageInfo)map.get("pInfo");
int offset = (pInfo.getCurrentPage()-1) * pInfo.getLimit();
RowBounds rowBounds = new RowBounds(offset , pInfo.getLimit());
map.put("pInfo",pInfo);
return sqlSession.selectList("messageMapper.selectReceiveList", map);
}
Mapper
<select id="selectReceiveList" parameterType="map" resultMap="message_rm">
SELECT * FROM V_RMESSAGE
WHERE RECEIVE_STATUS = 'N'
AND RECEIVE_MEMBER = #{memberNo}
ORDER BY MSG_NO DESC
</select>
보낸 쪽지 함
- 출력화면
JSP
<style>
.messageBox {
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
}
table tr td{
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
max-width :120px;
}
/******* 페이징 *******/
.flex {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto
}
#page-content {
margin-top: 20px;
}
.pagination, .jsgrid .jsgrid-pager {
display: flex;
padding-left: 0;
list-style: none;
border-radius: 0.25rem
}
.page-item > a, .page-item > a:hover { color: black; }
.pagination.pagination-rounded-flat .page-item {
margin: 0 .25rem
}
.pagination-success .page-item.active .page-link {
background: #00c689;
border-color: #00c689
}
.pagination.pagination-rounded-flat .page-item .page-link {
border: none;
border-radius: 50px;
}
.messageBox{
border-radius : 15px;
margin : 0 0 10px 20px;
}
html{
position : relative;
min-height:100%;
margin : 0;
}
body {
min-height:100%;
}
.footer{
position:absolute;
left : 0;
bottom : 0;
width:100%;
text-align : center;
}
#messageTable #messageContent, #messageTable #nickName:hover {
cursor: pointer;
}
</style>
</head>
<body>
<jsp:include page="../common/header.jsp" />
<div class="container">
<div class="row">
<div class="col-md-12" style="padding-left : 26px">
<div class="messageBox" style="display: inline-block; color: #ffaf18; border:1px solid #ffaf18; ">
<a href="${contextPath}/message/messageBoxR">받은 쪽지</a>
</div>
<div class="messageBox" style="display: inline-block; background-color :#ffaf18 ; ">
<span>보낸 쪽지</span>
</div>
<div class="float-right" id="deleteBtn" style="display: inline-block; margin-top: 10px;">
<button class="maincolor-re" id="deleteBtn" onClick="deleteBtn();">삭제</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-stripped" id="messageTable" style="text-align : center;" >
<thead>
<tr>
<th><input type="checkbox" id="checkAll"/></th>
<th>받는 사람</th>
<th>내용</th>
<th>보낸 시간</th>
</tr>
</thead>
<tbody>
<c:if test="${empty mList }">
<tr>
<td colspan="4"> 보낸 쪽지가 없습니다.</td>
</tr>
</c:if>
<c:if test="${!empty mList }">
<c:forEach var="message" items="${mList}" varStatus="vs">
<tr>
<td><input type="checkbox" name="chk" value="${message.messageNo}"></td>
<td><span id="nickName">${message.receiveNickName}</span></td>
<td id="messageContent">${message.messageContent}</td>
<td>
<%-- 날짜 출력 모양 지정 --%>
<fmt:formatDate var="createDate" value="${message.createDt }" pattern="yyyy-MM-dd"/>
<fmt:formatDate var="now" value="<%=new java.util.Date()%>" pattern="yyyy-MM-dd"/>
<c:choose>
<c:when test="${createDate != now}">
${createDate }
</c:when>
<c:otherwise>
<fmt:formatDate value="${message.createDt }" pattern="HH:mm"/>
</c:otherwise>
</c:choose>
</td>
<input type="hidden" id="sendMemberNo" value="${message.receiveMember }">
</tr>
</c:forEach>
</c:if>
</tbody>
</table>
</div>
</div>
<!-- 페이징 -->
<div class="page-content page-container" id="page-content">
<div class="padding">
<div class="row container d-flex justify-content-center">
<div class="col-md-4 col-sm-6 grid-margin stretch-card">
<nav>
<ul class="pagination d-flex justify-content-center flex-wrap pagination-rounded-flat pagination-success">
<c:url var="pageUrl" value="?"/>
<c:set var="firstPage" value="${pageUrl}cp=1" />
<c:set var="lastPage" value="${pageUrl}cp=${pInfo.maxPage }" />
<fmt:parseNumber var="c1" value="${(pInfo.currentPage - 1) / 10 }" integerOnly="true" />
<fmt:parseNumber var="prev" value="${ c1 * 10 }" integerOnly="true" />
<c:set var="prevPage" value="${pageUrl}cp=${prev}" />
<fmt:parseNumber var="c2" value="${(pInfo.currentPage + 9) / 10 }" integerOnly="true" />
<fmt:parseNumber var="next" value="${ c2 * 10 + 1 }" integerOnly="true" />
<c:set var="nextPage" value="${pageUrl}cp=${next}" />
<c:if test="${pInfo.currentPage > pInfo.pageSize}">
<li class="page-item"><a class="page-link maincolor-re1" href="${firstPage }" data-abc="true"><i class="fas fa-angle-double-left"></i></a></li>
<li class="page-item"><a class="page-link maincolor-re1" href="${prevPage }" data-abc="true"><i class="fa fa-angle-left"></i></a></li>
</c:if>
<c:forEach var="page" begin="${pInfo.startPage }" end="${pInfo.endPage }">
<c:choose>
<c:when test="${pInfo.currentPage == page }">
<li class="page-item active">
<a class="page-link">${page}</a> <!-- 같은 페이지일때는 클릭이 안 된다. -->
</li>
</c:when>
<c:otherwise>
<li class="page-item">
<a class="page-link maincolor-re1" href="${pageUrl}cp=${page}">${page}</a>
</li>
</c:otherwise>
</c:choose>
</c:forEach>
<c:if test="${next <=pInfo.maxPage }">
<li class="page-item"><a class="page-link maincolor-re1" href="${nextPage }" data-abc="true"><i class="fa fa-angle-right"></i></a></li>
<li class="page-item"><a class="page-link maincolor-re1" href="${lastPage }" data-abc="true"><i class="fas fa-angle-double-right"></i></a></li>
</c:if>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<!-- 쪽지 읽기 -->
<div id="readMessage" class="modal fade">
<div class="modal-dialog modal-confirm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">받는사람 : <span id="receiver" style="font-size:19px;"></span></h5>
</div>
<div class="modal-body">
<div class="messageArea" id="viewMessage" style="border: 1px solid black;height: 150px; padding:10px;"></div>
</div>
<div class="modal-footer" >
<div class="col"><button type="button" class="btn maincolor-re btn-block" data-dismiss="modal"><span class="plan">닫기</span></button></div>
</div>
</div>
</div>
</div>
<!-- 쪽지 읽기 -->
<!-- 쪽지 보내기 -->
<form method="POST" action="${contextPath}/message/sendMessage" onsubmit="return messageValidate();">
<div id="sendMessage" class="modal fade">
<div class="modal-dialog modal-confirm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">받는사람 : <span id="receiver2" style="font-size:19px;"></span> </h5>
<input type="hidden" name="memberNo" id="hiddenMemberNo">
</div>
<div class="modal-body" style="padding-bottom : 1px;">
<textarea class="messageText" id="writeMessage" name="content" style="border: 1px solid black; height: 130px; width: 100%; resize: none;"></textarea>
<div id="messageCnt" class="float-right" style="font-size:13px;">(0/100)</div>
</div>
<div class="modal-footer">
<div class="col">
<button type="submit" class="btn maincolor btn-block">
<span class="plan">전송</span>
</button>
</div>
<div class="col">
<button type="button" class="btn maincolor-re btn-block" data-dismiss="modal">
<span class="plan">닫기</span>
</button>
</div>
</div>
</div>
</div>
</div>
</form>
<!-- 쪽지 보내기 -->
<div id="footer">
<jsp:include page="../common/footer.jsp" />
</div>
<script>
// 쪽지 읽기
$("#messageTable > tbody #messageContent").on("click",function(){
var receiver = $(this).parent().children().eq(1).text();
var viewMessage = $(this).parent().children().eq(2).text();
$("#receiver").text(receiver);
$("#viewMessage").text(viewMessage);
$("#readMessage").modal("show");
});
// 닉네임 누르면 쪽지 보내기
$("#messageTable > tbody #nickName").on("click",function(){
var memberNo = $(this).parent().parent().children().eq(4).val();
var receiver = $(this).parent().parent().children().eq(1).text();
$("#receiver2").text(receiver);
$("#hiddenMemberNo").val(memberNo);
$("#sendMessage").modal("show");
});
// 메세지 유효성 검사
function messageValidate(){
if($(".messageText").val().trim().length ==0){
swal("내용을 입력해 주세요");
$(".messageText").focus();
return false;
}
}
// 메세지 쓰기 글자수 제한
$(document).ready(function(){
$("#writeMessage").on('input',function(){
$("#messageCnt").html("("+$(this).val().length+" / 100)");
if($(this).val().length>100){
$(this).val($(this).val().substring(0,100));
$("#messageCnt").html("(100/100)");
}
});
});
// 새로고침
function refreshFunction(){
location.reload();
}
### 보낸 쪽지 삭제
체크된 메세지 삭제하기 AJAX
// 체크박스 전체선택
$(document).ready(function(){
$("#checkAll").click(function(){
if($("#checkAll").prop("checked")){
$("input[name=chk]").prop("checked",true);
}else{
$("input[name=chk]").prop("checked",false);
}
});
});
// 보낸 체크된 메세지 삭제하기
function deleteBtn(){
// 선택된 메세지 번호 담을 배열
var messageNo = [];
// 하나씩 돌면서 배열에 넣어줌
$("input[name=chk]:checked").each(function(){
messageNo.push($(this).val());
});
if(confirm("정말로 삭제하시겠습니까?")){
$.ajax({
url : "${contextPath}/message/deleteSendMessage",
type :"post",
data : {"messageNo":messageNo},
success : function(result){
if(result>0){
refreshFunction();
}
},
error : function(){
console.log("쪽지 삭제 실패");
}
});
}
}
</script>
</body>
Controller
@ResponseBody
@RequestMapping("deleteSendMessage")
public int deleteSendMessage(@RequestParam(value="messageNo[]") int[] messageNo) {
List<Integer> list = new ArrayList<Integer>();
for(int i=0; i<messageNo.length; i++) {
list.add(messageNo[i]);
}
return service.deleteSendMessage(list);
}
Service
int deleteSendMessage(List<Integer> list);
ServiceImpl
@Transactional(rollbackFor = Exception.class)
@Override
public int deleteSendMessage(List<Integer> list) {
return dao.deleteSendMessage(list);
}
DAO
public int deleteSendMessage(List<Integer> list) {
return sqlSession.update("messageMapper.deleteSendMessage",list);
}
Mapper
<update id="deleteSendMessage" parameterType="list">
UPDATE MESSAGE SET
SEND_STATUS = 'Y'
WHERE MSG_NO IN
<foreach collection="list" item="msgNo" open="(" close=")" separator=",">
${msgNo}
</foreach>
</update>
Controller
@RequestMapping("messageBoxS")
public String message(@RequestParam(value="cp", required=false, defaultValue="1") int cp,
@ModelAttribute(name="loginMember", binding=false) Member loginMember,
Model model) {
int memberNo = loginMember.getMemberNo();
// 페이징 처리 : 보낸 쪽지 수 조회
MessagePageInfo pInfo = service.getSendPageInfo(cp,memberNo);
Map<String,Object> map = new HashMap<String, Object>();
map.put("memberNo",memberNo);
map.put("pInfo", pInfo);
// 보낸 쪽지 목록 조회
List<Message> mList = service.selectSendList(map);
model.addAttribute("mList",mList);
model.addAttribute("pInfo", pInfo);
return "/message/messageBoxS";
}
- 페이징 처리를 위한 보낸 쪽지 수 조회
Service
MessagePageInfo getSendPageInfo(int cp, int memberNo);
ServiceImpl
@Override
public MessagePageInfo getSendPageInfo(int cp, int memberNo) {
int listCount = dao.getSendListCount(memberNo);
return new MessagePageInfo(cp, listCount);
}
DAO
public int getSendListCount(int memberNo) {
return sqlSession.selectOne("messageMapper.getSendListCount",memberNo );
}
Mapper
<select id="getSendListCount" parameterType="_int" resultType="_int">
SELECT COUNT(*) FROM V_MESSAGE
WHERE SEND_STATUS='N'
AND SEND_MEMBER = #{memberNo}
</select>
- 보낸 쪽지 목록 조회
Service
List<Message> selectSendList(Map<String, Object> map);
ServiceImpl
@Override
public List<Message> selectSendList(Map<String, Object> map) {
return dao.selectSendList(map);
}
DAO
public List<Message> selectSendList(Map<String, Object> map) {
// RowBounds 객체 : offset과 limit를 이용하여 조회 결과 중 일부 행만 조회하는
// 마이바티스 객체
MessagePageInfo pInfo = (MessagePageInfo)map.get("pInfo");
int offset = (pInfo.getCurrentPage()-1) * pInfo.getLimit();
RowBounds rowBounds = new RowBounds(offset , pInfo.getLimit());
map.put("pInfo",pInfo);
return sqlSession.selectList("messageMapper.selectSendList", map, rowBounds);
}
Mapper
<select id="selectSendList" parameterType="map" resultMap="message_rm">
SELECT * FROM V_SMESSAGE
WHERE SEND_STATUS = 'N'
AND SEND_MEMBER = #{memberNo}
ORDER BY MSG_NO DESC
</select>
공유하기
Twitter Google+ LinkedIn
댓글남기기