⑥ 글 상세 보기 페이지 구현 하기
<a href = "${pageContext.request.contextPath }/board/detail?num=${vo.num }"> ${vo.title}</a>위의 a 태그와 하이퍼링크로 게시글의 타이틀을 클릭하면 해당 글의 상세 보기가 가능해진다.
아래는 상세보기 페이지이며 이 페이지는 servlet의 doGet을 통해 구현 되었다.
▶ servlet (board/detail) 코드 구현 하기
package board.controller;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
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 board.Boardservice;
import board.Boardvo;
import member.MemberService;
import member.memberVo;
/**
* Servlet implementation class detail
*/
@WebServlet("/board/detail")
public class detail extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public detail() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("euc-kr");
response.setCharacterEncoding("euc-kr");
response.setContentType("text/html; charset = EUC-KR");
int num = Integer.parseInt(request.getParameter("num"));
Boardservice service = new Boardservice ();
Boardvo vo = service.selectNum(num);
request.setAttribute("vo", vo);
RequestDispatcher dis = request.getRequestDispatcher("/board/detail.jsp");
dis.forward(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
그 후 해당 글이 자신이 작성 한 것이라면 하기의 사진 처럼 수정과 삭제가 가능하게 구현 해주었다.
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
window.onload = function() {
let span = document.getElementById("searchSpan");
let html = "";
let loginId = "<%= session.getAttribute("loginId") %>";
if (loginId != null && loginId == "${vo.writer}") {
html = "<br/><a href = '${pageContext.request.contextPath }/board/edit?num=${vo.num }'>수정</a><br/>";
html+= "<br/><a href = '${pageContext.request.contextPath }/board/del?num=${vo.num }'>삭제</a>";
}
span.innerHTML = html;
}
</script>
</head>
<body>
<h3> 게시글 상세 보기 </h3>
<table border = "1">
<tr><th>글번호 </th><td><input type = "hidden" name = "num" >${vo.num }</td></tr>
<tr><th>작성일</th><td>${vo.w_date }</td></tr>
<tr><th>작성자</th><td>${vo.writer}</td></tr>
<tr><th>제목</th><td>${vo.title }</td></tr>
<tr><th>내용</th><td>${vo.content }</td></tr>
</table>
<br/>
<a href = "${pageContext.request.contextPath }/board/boardmain">뒤로</a>
<br/>
<span id = "searchSpan">
</span>
</body>
</html>● window.onload = function() {
해당 페이지가 로드(load) 되자마자 실행 될 함수를 만들어 주었다.
● let span = document.getElementById("searchSpan");
나중에 html 을 끼워 넣을 span 태그를 찾아서 변수 let span 에 넣어주었다.
● let html = "";
html 을 담을 변수도 설정 해주었다.
● let loginId = "<%= session.getAttribute("loginId") %>";
세션에 저장 되어 있는 로그인 아이디를 담을 변수 let loginId 를 생성 해주었다. 여기서 포인트는 세션에 담긴 로그인 아이디가 꺼내지는 과정인데, 우선 세션에 저장 되어 있는 로그인 아이디는 jsp 형태가 아니기 때문에 jsp문법을 사용해서 리턴값을 출력한 다음 loginId 변수에 담아주어야 한다. 문자열, 변수값 혹은 함수 리턴값을 출력하는 jsp 문법은 <%= %> 이다.
< jsp 문법에는 아래와 같은 것들이 있다>
- <%! 선언부 %> -> 전역변수, 함수
- <% 스크립릿 %> -> 코딩, 지역변수
- <%=출력부 %> ->문자열, 변수값, 함수리턴값 출력
- <%-- JSP주석 --%>
● if (loginId != null && loginId == "${vo.writer}") {
let loginId의 값이 null이 아니고 loginId가 ${vo.writer}의 값과 같다면
● html = "<br/><a href = '${pageContext.request.contextPath }/board/edit?num=${vo.num }'>수정</a><br/>";
html+= "<br/><a href = '${pageContext.request.contextPath }/board/del?num=${vo.num }'>삭제</a>";
html 두개를 삽입해주자.
● }span.innerHTML = html;}
어디로? let span의 span 태그 사이로!
'MVC > MVC 모델 실습' 카테고리의 다른 글
| [MVC 실습] 로그인하고 게시판 운영하기_5 (0) | 2023.04.03 |
|---|---|
| [MVC 실습] 로그인하고 게시판 운영하기_4 (0) | 2023.04.03 |
| [MVC 실습] 로그인하고 게시판 운영하기_3 (0) | 2023.04.03 |
| [MVC 실습] 로그인하고 게시판 운영하기_2 (0) | 2023.04.03 |
| [MVC 실습] 로그인하고 게시판 운영하기_1 (0) | 2023.04.03 |
