딸기말차
[Java web] 2. JSP 실습 본문
엔코아 플레이데이터(Encore Playdata) Backend 2기 백엔드 개발 부트캠프 (playdata.io)
백엔드 개발 부트캠프
백엔드 기초부터 배포까지! 매력있는 백엔드 개발자 포트폴리오를 완성하여 취업하세요.
playdata.io
1. JSP 실습_1) 게시판
이름, 제목, 내용 데이터를 입력 후 입력한 데이터를 FileWriter를 사용해 파일로 저장하고, 저장한 파일들의 제목을 읽어와 해당 제목을 누를 시 내용을 볼 수 있는 실습을 진행하였다. 해당 실습의 파일 구조는 다음과 같다.
1. BBSInput.html
해당 실습의 welcome page이다. 입력 데이터를 파일로 저장하는 기능, 입력값을 취소하는 기능, 파일 목록을 불러오는 기능이 존재한다.
2. BBSPostWrite.jsp
BBSInput.html에서 입력받은 내용을 실질적으로 저장, 저장 결과를 나타내는 페이지로 redirect 된다.
3. BBSPostResult.jsp
BBSPostWrite.jsp에서 "SUCCESS" 데이터가 날아오면 성공, "FAIL"이 날아오면 실패 처리를 하고 파일 목록을 나타내는 페이지로 redirect 된다.
4. BBSPostList.jsp
폴더에서 File 객체를 통해 파일 목록을 가져와 select 태그를 통해 화면에 뿌려준다. 그리고 javascript의 onChange 이벤트를 통해 이벤트가 발생 시 파일의 index를 넘겨, 파일 내용을 읽을 수 있게 한다.
5. BBSPostReader.jsp
BBSPostList.jsp에서 넘어온 파일의 index와 FileReader를 사용해 파일의 내용을 읽고, 화면에 뿌려준다.
2. BBSInput.html
프로젝트를 실행 시, 가장 먼저 보이는 welcome page 이다. 해당 페이지의 구조는 다음과 같다.
1. form 태그를 통해 데이터를 입력
2. form 태그 내부에서 submit 타입의 input 버튼이 눌리면, 작성한 데이터를 post 방식으로 BBSPostWrite.jsp에 전달
3. button 타입의 input 버튼이 눌리면, onclick 이벤트를 통해 postList() 라는 Javascript 메서드 실행
4. 실행한 메서드를 통해 BBSPostList.jsp로 이동 (redirect)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>파일형 게시판 글쓰기 - 입력 화면</title>
<script type="text/javascript">
function postList(){
// javascript에서 화면 이동하는 방법
document.location="BBSPostList.jsp";
}
</script>
</head>
<body>
<h2>파일형 게시판 글쓰기 - 글입력 화면</h2>
<form action="BBSPostWrite.jsp" method="POST">
<!-- autofocus : 화면이 실행되면 사용자가 입력할 곳에 커서 이동시켜 둠 -->
이름: <input type="text" name="NAME" required="required" autofocus /><br />
제목: <input type="text" name="TITLE" required="required" /><br />
<textarea cols="30" rows="5" name="CONTENT" required="required" ></textarea><br />
<input type="submit" value="저장" />
<input type="reset" value="취소" />
</form>
<input type="button" value="글목록" onclick="postList()">
</body>
</html>3. BBSPostWrite.jsp
BBSInput.html의 submit을 통해 전달 된 데이터를 파일로 쓰는 페이지이다. 해당 페이지의 구조는 다음과 같다.
1. post 방식으로 전달 되었기 때문에 request 객체의 encoding을 UTF-8로 변경
2. 전달 된 name, title, content를 request.getParameter("변수명") 을 통해 저장
3. 저장할 파일이름이 동일하면 안되기 때문에 Date 객체를 통해 날짜 및 시간을 가져와 파일이름으로 사용
4. FileWriter를 통해 파일 생성
5. 성공유무를 get 방식으로 BBSPostResult.jsp에 전달, redirect
<%@page import="java.io.PrintWriter"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.io.IOException" %>
<%@ page import="java.io.FileNotFoundException" %>
<%@ page import="java.util.Date" %>
<%-- 게시판 글쓰기 - 처리 (화면에 보이지 않음) JSP 주석달기 --%>
<%
request.setCharacterEncoding("UTF-8"); // post로 데이터를 받기 때문
String name = request.getParameter("NAME");
String title = request.getParameter("TITLE");
String content = request.getParameter("CONTENT");
// 파일명(날짜시간) 자동생성
Date date = new Date();
Long time = date.getTime(); // 현재 날짜와 시간을 정수로 변환 -> 1970.1.1. 0:0:0부터 현재까지를 정수로 만들어준다.
String filename = time + ".txt";
// 파일 저장 성공여부 변수
String result = "";
// JSP에서 파일 다루기 : PrintWriter.class
PrintWriter writer = null;
// 외부파일을 다루기 때문에 예외처리
try {
// 1. WEB-INF/bbs 에 대한 실제 경로 추출 : application.getRealPath("대상")
String filePath = application.getRealPath("/WEB-INF/bbs/" + filename);
// 2. 전달받은 데이터를 사용 시 PrintWriter 객체가 필요하다.
writer = new PrintWriter(filePath);
// 3. 전달받은 각 데이터를 쓰기 : PrintWriter.printf();
writer.printf("제목 : %s %n", title);
writer.printf("이름 : %s %n", name);
writer.printf("내용 : %s %n", content);
result = "SUCCESS";
} catch(IOException e) {
result = "FAIL";
} finally {
try {
writer.close();
} catch(Exception e) {
}
}
// 다른(지정) 화면으로 바로 이동 : response.sendRedirect("대상");
response.sendRedirect("BBSPostResult.jsp?RESULT=" + result);
// response.sendRedirect() 사용 시 주의사항 : 메서드 아래에 코드는 무의미해진다. 만나자마자 화면이 넘어가기때문
%>위에서 말한 get 방식이란 URL에 데이터를 포함하여 전달하는 방식을 의미한다.
때문에 response.sendRedirect() 의 인자를 보면, URL에 jsp 파일만 존재하는게 아니라 ?변수명=값 을 통해 데이터를 함께 넘겨주는 것을 볼 수 있다.
4. BBSPostResult.jsp
BBSPostWrite.jsp 에서 get 방식으로 받은 파일생성 결과를 받아 결과처리하는 페이지이다. 해당 페이지의 구조는 다음과 같다.
1. 전달 된 result를 request.getParameter("데이터명") 을 통해 저장. get 방식이기 때문에 인코딩은 따로 하지 않는다.
2. 성공 유무에 따른 화면 출력
3. BBSPostList.jsp로 redirect
이 때, redirect 때문에 바로 페이지가 넘어가기 때문에 실제로 화면에 print문이 출력되는게 보이진 않는다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%-- 게시판 글쓰기 - 처리 결과 (화면에 보이지 않음 : 추후 ERROR 페이지로 사용 --%>
<%
String result = request.getParameter("RESULT");
if(result.equals("SUCCESS")) {
// 웹 브라우저에 출력 : out.print()
out.println("파일이 성공적으로 저장되었습니다.");
}
else {
out.println("파일 저장을 실패했습니다. 저장 경로를 확인해주세요.");
}
// 목록 화면으로 이동
response.sendRedirect("BBSPostList.jsp");
%>5. BBSPostList.jsp
File 객체를 통해 파일들의 목록을 불러와 화면에 보여주는 페이지이다. 해당 페이지의 구조는 다음과 같다.
1. 파일 목록을 select 태그를 통해 표기. 이 때, select 태그 내의 option 태그에 값을 넣어 화면에 파일명을 보여준다.
2. 파일이름이 클릭되면 select 태그 내의 onchange 이벤트를 통해 postDetail 메서드 실행
3. 이 때 메서드의 인자로 this를 넣었기 때문에 select 태그 자신이 인자로 넘어간다.
4. select 태그 내의 option 태그들은 selectedIndex 라는 변수로 각각의 index가 존재한다.
때문에 해당 변수를 사용해 마치 배열에서 사용하듯 select[idx] 이런식으로 데이터에 접근해,
그 파일제목을 get 방식으로 BBSPostReader.jsp에 전달, redirect 한다.
5. 목록 옆에 button 타입의 input 버튼이 눌리면, onclick 이벤트를 통해 postWrite()라는 Javascript 메서드 실행
6. 실행한 메서드를 통해 BBSInput.html로 이동 (redirect)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.io.File" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판 글쓰기 - 결과 화면 (목록))</title>
</head>
<script type="text/javascript">
// obj라는 매개변수는 this라는 값을 전달받는다. 여기서 this는 select 태그 자기자신이다.
function postDetail(obj) {
if (obj.selectedIndex == 0) { // 항목 선택 없음
alert("항목을 선택해주세요.")
return;
}
// javascript는 변수에 대한 타입이 없다. 때문에 변수를 선언할 때는 var를 이용한다.
var selIDX = obj[obj.selectedIndex].text;
alert(selIDX + "파일이 선택되었습니다.");
// 파일 선택 후 파일을 읽을놈한테 보내줘야한다. BBSPostReader.jsp?sel=selIDX
document.location = "BBSPostReader.jsp?sel=" + selIDX;
}
function postWrite() {
document.location = "BBSInput.html";
}
</script>
<!--
1. bbs 폴더에 있는 파일 목록 (파일명)
- File.class
- File.list() : 해당 경로에 있는 폴더명, 파일명들을 배열 형태로 반환
2. 파일명을 이용하여 목록화 -> for문
- <select><option>파일명</option></select>
3. 파일명 목록 중 선택한 파일명만 추출
- event : onChange
-->
<body>
<!-- 제목을 붙일 때 h 태그를 많이 사용 -->
<h2>파일형 게시판 목록</h2>
<!-- id : javascript에서 해당 태그에 대한 객체를 찾을 때 -->
<select id="sID" cols="30" size="10" onchange="postDetail(this)">
<!-- select 태그 내의 option 들은 selectedIndex라는 변수로 각각의 index가 존재한다. -->
<option>보고싶은 파일을 선택하세요</option>
<%
String filePath = application.getRealPath("/WEB-INF/bbs/"); // 지정 폴더까지만 가서, 파일이름만 가져오기위해
File f = new File(filePath);
String[] sFN = f.list(); // 지정 폴더 내의 파일명들을 문자열로 반환
for (String s : sFN) {
out.print("<option>" + s + "</option>");
}
%>
</select>
<input type="button" value="글쓰기" onclick="postWrite()" />
</body>
</html>
6. BBSPostReader.jsp
BBSPostList.jsp 에서 get 방식으로 받은 파일제목으로 파일을 읽어, 화면에 출력해주는 페이지이다. 해당 페이지의 구조는 다음과 같다.
1. 전달 된 파일제목을 request.getParameter("변수명") 을 통해 저장
2. FileReader를 사용해 파일을 읽고, 화면에 내용을 출력
3. button 타입의 input 버튼이 눌리면, onclick 이벤트를 통해 postList()라는 Javascript 메서드 실행
4. 실행한 메서드를 통해 BBSPostList.jsp로 이동 (redirect)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.io.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>파일 읽기 - 저장된 파일 선택 후, 출력</title>
<script type="text/javascript">
function postList() {
document.location = "BBSPostList.jsp";
}
</script>
</head>
<body>
<%
String selPath = request.getParameter("sel");
BufferedReader br = null;
try {
String filePath = application.getRealPath("/WEB-INF/bbs/" + selPath);
br = new BufferedReader(new FileReader(filePath));
while(true) {
String str = br.readLine();
if (str == null)
break;
out.println(str + "<br/>");
}
} catch(FileNotFoundException e) {
out.println(e.getMessage());
} catch(IOException e) {
out.println(e.getMessage());
} finally {
br.close();
}
%>
<input type="button" value="글목록" onclick="postList()"/>
</body>
</html>7. 14일차 후기
웹에서 데이터를 전송하는 방식인 get, post를 jsp 내에서 활용해 진행한 실습이었다. 어제 이 실습을 혼자 진행할 땐 servlet을 섞어 데이터의 전송이 하나의 절차를 더 거치는, 조금 더 복잡한 방식으로 진행했었다.
하지만 오늘 강사님의 풀이를 보니 이런 작은 프로젝트를 진행할 때는 굳이 복잡하게 데이터를 운반하는 것보단, jsp끼리만 데이터를 전송할 수 있게 하는 것도 하나의 방법이 될 수 있다는 생각이 들었다.
물론 해당 방식이 큰 프로젝트를 진행하게 되면 한 jsp 내에 너무 많은 코드들이 들어가 유지보수가 힘들어지기 때문에 마냥 좋은 방식이라고는 볼 수 없지만, 작은 프로젝트를 진행할 땐 유용하게 쓰일 수 있는 방식이라는 것을 알게되었다.
'Bootcamp > Java web' 카테고리의 다른 글
| [Java web] 6. Mini Project_2 (0) | 2023.07.22 |
|---|---|
| [Java web] 5. EL, JSTL, Java Beans (1) | 2023.07.18 |
| [Java web] 4. Session, JSP tag (0) | 2023.07.15 |
| [Java web] 3. Servlet 실습 (0) | 2023.07.14 |
| [Java web] 1. Servlet, JSP (0) | 2023.07.12 |
