④ 게시판 메인화면으로 이동하기
<button><a href = "${pageContext.request.contextPath }/board/boardmain"> 게시판 보러가기 </a></button><br/>해당 버튼을 누르면 a 태그에 의해 아래의 servlet 주소로 이동 하게 된다.
▶ servlet 페이지 구현
package board.controller;
import java.io.IOException;
import java.util.ArrayList;
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;
/**
* Servlet implementation class boardmain
*/
@WebServlet("/board/boardmain")
public class boardmain extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public boardmain() {
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");
Boardservice service = new Boardservice();
ArrayList<Boardvo> list = service.getAll();
request.setAttribute("list", list);
RequestDispatcher dis = request.getRequestDispatcher("/board/printlist.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);
}
}
▶ jsp 페이지 구현
<%@ 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>
function a () {
let type = f.serchType.value;
let span = document.getElementById("searchSpan");
let html = "";
if(type=="1"){
f.action = "${pageContext.request.contextPath }/board/getbyname";
html = "<input type = 'text' name = 'name'>";
} else {
f.action = "${pageContext.request.contextPath }/board/findtitle";
html = "<input type = 'text' name = 'title' >";
}
span.innerHTML = html;
}
</script>
</head>
<body>
<form action = "${pageContext.request.contextPath }/board/getbyname" method = "post" name = "f">
<span>
<select name = "serchType" onchange = "a()">
<option value = "1"> 작성자 </option>
<option value = "2"> 제목 </option>
</select>
</span>
<span id = "searchSpan">
<input type = 'text' name = 'name'>
</span>
<input type = "submit" value = "검색">
</form> <br/>
<br/>
<%-- <input type= "button" onclick = "${pageContext.request.contextPath }/member/result.jsp">메인으로</button><br/> --%>
<button><a href = "${pageContext.request.contextPath }/member/result.jsp">메인으로</a></button><br/>
<br/>
<button><a href = "${pageContext.request.contextPath }/board/insert">글작성</a></button><br/>
<br/>
<br/>
<table border = "1">
<tr><th>num</th><th>date</th><th>writer</th><th>title</th></tr>
<c:forEach var = "vo" items = "${list}">
<tr><td>${vo.num }</td>
<td>${vo.w_date }</td>
<td>${vo.writer}</td>
<td><a href = "${pageContext.request.contextPath }/board/detail?num=${vo.num }"> ${vo.title}</a></td>
</tr>
</c:forEach>
</table>
</body>
</html>함수(function a ())를 통해 작성자로 검색과 제목으로 검색 옵션기능을 추가 하였다.
● function a () {
let type = f.serchType.value;
form name "f" 의 serchType(select 박스)의 값을 let type에 할당 하였다.
● let span = document.getElementById("searchSpan");
let span 에는 id가 searchSpan 인 값을 넣어 주었다.
● let html = "";
html 은 공백으로 초기화 해주고 후에 html을 사입해주기 위해 선언 하였다.
● if(type=="1"){
만약 f.serchType.value 의 값이 1이라면 즉, 작성자라면
● f.action = "${pageContext.request.contextPath }/board/getbyname";
form 이름이 f 인 곳의 action에 위와 같은 경로를 추가 해주고
● html = "<input type = 'text' name = 'name'>";
현재 공백인 html에 input 값을 추가 해 준다.
● } else {
f.serchType.value가 1이 아니라면
● f.action = "${pageContext.request.contextPath }/board/findtitle";
form name이 f 인 곳의 action에 위와 같은 경로를 추가 해주고
● html = "<input type = 'text' name = 'title' >";}
html에 input 값을 추가 해 준다.
● span.innerHTML = html; }
그 html 은 아까 위에서 let span = document.getElementById("searchSpan"); 으로 저장 한 span 태그 사이에 넣어 준다.
</script>
</head>
<body>
<form action = "${pageContext.request.contextPath }/board/getbyname" method = "post" name = "f">
<span>
<select name = "serchType" onchange = "a()">
<option value = "1"> 작성자 </option>
<option value = "2"> 제목 </option>
</select>
</span>
<span id = "searchSpan">
<input type = 'text' name = 'name'>
</span>
<input type = "submit" value = "검색">
</form> <br/>
<br/>
'MVC > MVC 모델 실습' 카테고리의 다른 글
| [MVC 실습] 로그인하고 게시판 운영하기_6 (0) | 2023.04.03 |
|---|---|
| [MVC 실습] 로그인하고 게시판 운영하기_5 (0) | 2023.04.03 |
| [MVC 실습] 로그인하고 게시판 운영하기_3 (0) | 2023.04.03 |
| [MVC 실습] 로그인하고 게시판 운영하기_2 (0) | 2023.04.03 |
| [MVC 실습] 로그인하고 게시판 운영하기_1 (0) | 2023.04.03 |
