학원/servlet jsp
11.8일 (session/ jsp-cos.jar/ db연동-게시판)
쿠룽지
2023. 11. 9. 17:25
728x90
반응형
728x90
Session
- 클라이언트를 식별할 때 사용 (클라이언트마다 세션이 생성)
식별이 가능하기 때문에 같은 클라이언트에만 클라이언트별 정보 제공 가능 == 유니크하게 클라이언트 관리 가능 - 세션 생성 -> 클라이언트에 전송 -> 클라이언트 쿠키로 저장 -> 해당 세션 접근 시 사용
- 우클릭 검사 application cookies 에서 jsessionid 확인 가능
- 만료시간 30분 / 재접속 시 30분 연장
session의 주요 메서드
| 메서드 | 리턴 타입 | 설명 |
| getId() | String | 세션의 고유 ID를 구함 |
| getCreationTime() | long | 세션이 생성된 시간을 구함. 시간은 1970년1월1일 이후 흘러간 시간을 의미. 단위는 1/1000초 |
| getLastAccessedTime() | long | 웹 브라우저가 가장 마지막에 섹션에 접근한 시간을 구함. 시간은 1970년1월1일 이후 흘러간 시간을 의미. 단위는 1/1000초 |
| setMaxInactiveInterval(int second) | void | 세션 유효시간을 초단위로 설정 |
| getMaxinactiveInterval() | int | 설정된 세션 유효시간을 반환 |
ch08-session
s01_sessionInfo.jsp
+ 세션 유지 시간 지정 변경 설정 1) web.xml 2) jsp (세션은 안 건드리는게 제일 좋긴 함)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%
Date time = new Date();
SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>세션 정보</title>
</head>
<body>
세션 ID : <%= session.getId() %><br>
세션 생성 시간 : <%= session.getCreationTime() %><br> <%-- 기본값: long타입으로 출력 --%>
<%
time.setTime(session.getCreationTime());
%>
세션 생성 시간 : <%= sf.format(time) %><br>
최근 접근 시간 : <%= session.getLastAccessedTime() %><br>
<%
time.setTime(session.getLastAccessedTime());
%>
최근 접근 시간 : <%= sf.format(time) %><br>
<%-- web.xml에서 세션 유지시간 설정 가능 --%>
<%-- 1800(30분) -> 3000(50분)으로 변경됨 --%>
세션 유지 시간 변경하기 (기본 세션 유지 시간은 30분임)<br>
<%
//web.xml에 50분으로 지정된 상태임
//JSP에서 셋팅한 정보가 현재 세션에 우선 반영됨 (JSP > web.xml)
session.setMaxInactiveInterval(60*20); // 초단위로 입력
%>
세션 유지 시간 : <%= session.getMaxInactiveInterval() %>초<br> <%-- 기본값: 초단위 --%>
<%-- 3000(50분) -> 1200(20분) 으로 변경됨
근데 별로 좋은 방법은 아님 페이지마다 지정해야 하는데 어떤건 jsp 어떤건 xml 지정되면 헷갈림
사실 세션은 안건드리는게 제일 좋음
--%>
</body>
</html>
** 생성 시간 != 최근 접근 시간
** 최근 접근 시간 기준으로 +30분
** web.xml (환경설정) 에서 세션 유지 시간 지정 설정 가능 (분 단위로 지정)
web-inf
web.xml (분 단위로 지정)
<!-- 세션 유지 시간 지정 (분단위로 지정) 시작 -->
<session-config>
<session-timeout>50</session-timeout>
</session-config>
<!-- 세션 유지 시간 지정 (분단위로 지정) 끝 -->
web.xml에서 50분으로 지정했지만 JSP에서 반영한 정보가 현재 세션에 우선 반영됨 (60*20 / 초단위)
id- pw 입력 후 창 넘어가는 form과 jsp파일 만들어보기 (원래 db연동이 되어있어야 하는데 연동 없이 간략하게 생성)
로그인 정보가 맞으면 넘어가고, 세션 안에 저장되어 있는 id를 창에 표시해주는 것
s02_sessionLoginForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 폼</title>
</head>
<body>
<form action="s03_sessionLogin.jsp" method="post">
아이디 <input type="text" name="id" size="10"><br>
비밀번호 <input type="password" name="password" size="10"><br>
<input type="submit" value="login">
</form>
</body>
</html>form에 action="s03_sessionLogin.jsp" 이라고 되어있어서 s03으로 넘어감
s03_sessionLogin.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>
</head>
<body>
<%
//전송된 데이터 인코딩 처리
request.setCharacterEncoding("utf-8");
//전송된 데이터 반환
String id = request.getParameter("id");
String password = request.getParameter("password");
//테스트용으로 id와 비밀번호가 같으면 로그인 처리
if(id.equals(password)){ //로그인 성공
//세션에 아이디가 있으면 로그인 성공 없으면 실패
//속성명 속성값
session.setAttribute("user_id", id);
%>
<%-- 로그인 성공+회원 서비스 UI --%>
<%= id %>님이 로그인했습니다.<br>
<input type="button" value="로그인 체크" onclick="location.href='s05_sessionLoginCheck.jsp'"> <%-- 인라인 방식으로 js / 이동하게 만들려고 --%>
<input type="button" value="로그아웃" onclick="location.href='s04_sessionLogout.jsp'">
<%
}else{ //로그인 실패
//다시 Loginform으로 보내서 입력하게 함 (script를 이용 / history.go(-1))
%>
<script type="text/javascript">
alert('로그인에 실패했습니다.');
history.go(-1);
</script>
<%
}
%>
</body>
</html>
<% %>
* 세션값 설정하기
session.setAttribute("user_id", 세션값);
* 세션에 저장된 값 가져오기
session.getAttribute("user_id");
* 세션값 삭제
session.removeAttribute("user_id"); // 속성값 하나만 삭제
session.invalidate(); // 세션 전체 제거, 무효화
로그아웃
1) 위에 명시한 것처럼 세션 속성값 하나만 삭제
2) 세션 전체 제거/ 무효화 (세션 갱신) >> 이 방법으로 작성
s04_sessionLogout.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그아웃</title>
</head>
<body>
<%
//세션 안의 모든 속성을 제거해서 세션을 갱신
session.invalidate();
%>
로그아웃했습니다.<br>
<br>
<input type="button" value="로그인 체크" onclick="location.href='s05_sessionLoginCheck.jsp'"> <%--로그인 확인--%>
<input type="button" value="로그인" onclick="location.href='s02_sessionLoginForm.jsp'"> <%--다시 로그인할수도 있으니까 이동할수있도록--%>
</body>
</html>
session.invalidate()
로그인 여부 검사
세션에 user_id가 있으면 로그인된 상태
없으면 (세션 갱신으로 인해) 로그아웃된 상태
s05_sessionLoginCheck.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 여부 검사</title>
</head>
<body>
<%
String user_id = (String)session.getAttribute("user_id");
if(user_id!=null){ //로그인이 된 경우
%>
아이디 [<%= user_id %>]로 로그인한 상태!!<br>
<input type="button" value="로그아웃" onclick="location.href='s04_sessionLogout.jsp'">
<%
}else {//로그인이 안된 경우
%>
로그인하지 않은 상태
<br>
<input type="button" value="로그인" onclick="location.href='s02_sessionLoginForm.jsp'">
<%
}
%>
</body>
</html>
session.getAttribute() 는 세션값을 가져올 때 String 타입으로 입력받고, Object 타입으로 반환시킴
그래서 String으로 다운 캐스팅 시켜야함
(String)session.getAttribute()
파일 업로드
Servlet에서도 파일 업로드를 지원하긴 하는데 jsp에서 시행해볼 것임
cos 라이브러리를 다운 받고 사용해보자
좌측 메뉴 COS File Upload Library 클릭
2)
cos-22.05.zip 다운 후 압축 해제
3) 이클립스의 web-inf 하위 폴더인 lib 안에 jar 파일 넣기
하면 cos를 외부 라이브러리로 사용할 수 있다..!
업로드 경로 만들기
webapp
upload (folder) 생성
이미지 파일 올릴 폴더 새로 만들기
webapp
ch09-fileUpload (folder)
s01_fileForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>파일 업로드</title>
</head>
<body>
<form action="s02_fileUpload.jsp" method="post" enctype="multipart/form-data">
작성자 <input type="text" name="user"><br>
제목 <input type="text" name="title"><br>
파일명 <input type="file" name="uploadFile"><br>
<input type="submit" value="파일 올리기">
</form>
</body>
</html>
이미지 파일을 올릴 때 필수 설정 (form)
- method="post"
- enctype="multipart/form-data"
- input type="file"
꼭꼭 설정해야 나옴 꼭..!
s02_fileUpload.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="com.oreilly.servlet.MultipartRequest" %> <%-- upload 처리 --%>
<%@ page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy" %> <%-- 파일이 중복됐을 때 덮어씌우지 않게 파일명을 바꿔서 보호 (동일 파일 보호) --%>
<%@ page import="java.io.File" %> <%-- java file객체로 변환시켜서 용량 구하려고 --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>파일 업로드 처리</title>
</head>
<body>
<%
//파일 업로드 경로
String saveFolder = "/upload"; // 상대경로를 넣어서 절대경로를 구하려고 함
String encType = "utf-8"; //인코딩 타입
int maxSize = 5*1024*1024;//파일의 최대 업로드 사이즈(5mb)
//파일 업로드 절대 경로 구하기
String realFolder = application.getRealPath(saveFolder); //application.getRealPath로 해당 context에 있는 경로 넣어줌
out.println("파일 업로드 절대 경로 : " + realFolder + "<br>");
out.println("------------------------------------<br>");
//파일 업로드 할 때에는 request.getParameter가 동작을 안함 (이름 같은거 빼낼 때 multi.getParameter 써야함)
//그래서 통째로 request를 넘기고 MultipartRequest를 사용해야함
//파일 업로드 처리 및 정보 읽기
MultipartRequest multi = new MultipartRequest(request, //request 통째로 넘기기
realFolder, //upload 절대경로
maxSize, //파일 최대 업로드 사이즈
encType, //인코딩 타입
new DefaultFileRenamePolicy()); //이미 업로드된 파일과 동일한 파일명일 경우 파일명 교체
out.println("작성자 : " + multi.getParameter("user") + "<br>");
out.println("제목 : " + multi.getParameter("title") + "<br>");
out.println("------------------------------------<br>");
//파일 정보 읽어오기
//전송전 원래의 파일 이름 (defaultfilerenamepolicy가 이름을 변경했을 수도 있어서 originalname을 찾는거임)
String original = multi.getOriginalFileName("uploadFile"); //파라미터 name이 식별자가 됨
//서버에 저장된 파일 이름
String filename = multi.getFilesystemName("uploadFile");
out.println("전송전 원래의 파일 이름 : " + original + "<br>");
out.println("서버에 저장된 파일 이름 : " + filename + "<br>");
//전송된 file의 컨텐트 타입 / 문서 타입도 알아낼 수 있음 (zip,img,..)
//upload를 금지하는 타입이 있는데 우선 타입을 알아보고 처리할 수 있게끔 함 (컨텐트 타입에 따라 처리 달리 할 수 있음)
String type = multi.getContentType("uploadFile");
out.println("컨텐트 타입 : " + type + "<br>");
//파일의 용량 구하기 (용량구하는 메서드가 별도로 없어서 file로 변환)
File file = multi.getFile("uploadFile");
out.println("파일 용량 : " + file.length() + "bytes");
%>
</body>
</html>
application.getRealPath 로 파일을 저장하면 request.getParameter가 동작하지 않아 간단한 문자열 출력도 하지 못함
그래서 multi.getParameter를 사용하고 인자로 request를 통째로 넘겨줘야 함.
[출력결과]
파일 업로드 절대 경로 : C:\javaWork\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\ch05-ServletMain\upload
------------------------------------
작성자 : 홍길동
제목 : 65
------------------------------------
전송전 원래의 파일 이름 : bag.jpg
서버에 저장된 파일 이름 : bag1.jpg
컨텐트 타입 : image/jpeg
파일 용량 : 3700bytes
form1에서 이미지 등록 후 meta-inf upload를 refresh해도 이미지 파일은 거기에 저장되지 않는다
이클립스는 tomcat영역처럼 공간을 만들고 거기서 복사해서 사용자에게 보여주는 거기 때문에 그 공간에 가야 볼 수 있음
C:\javaWork\workspace\.metadata
이클립스가 설정파일을 저장해놓는 곳
.plugins 안에 org.eclipse.wst.server.core < 톰캣 공간
C:\javaWork\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0
톰캣 구조 (여기 있는 것들을 돌려서 우리가 작성한 파일들이 돌아가게끔 만드는 것)
C:\javaWork\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\ch05-ServletMain\upload
이미지는 여기 저장됨
s01form을 실행하면 파일에 이미지가 올라가는 게 실시간으로 보인다
String realFolder = application.getRealPath(saveFolder); 여기서 절대경로를 구했기 때문에
출력화면에서 그 폴더 주소를 가리키고 그쪽으로 이미지가 저장됨
multipartrequest는 다중 파일 업로드도 지원함
이미지 뿐만 아니라 zip text등 다양하게 업로드 가능
이미지 파일 2개 올리는 예제
업로드 폼
ch09-fileUpload (folder)
s03_fileMultiForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>파일 다중 업로드</title>
</head>
<body>
<form action="s04_fileMultiUpload.jsp" method="post" enctype="multipart/form-data">
이름 <input type="text" name="name"><br>
제목 <input type="text" name="title"><br>
이미지1 <input type="file" name="uploadFile1" accept="image/gif,image/png,image/jpeg"><br>
이미지2 <input type="file" name="uploadFile2" accept="image/gif,image/png,image/jpeg"><br>
<input type="submit" value="파일 올리기">
</form>
</body>
</html>accept="" 파일 형식 지정
파일 이동
s04_fileMultiUpload.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="com.oreilly.servlet.MultipartRequest" %>
<%@ page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>파일 다중 업로드 처리</title>
</head>
<body>
<%
String saveFolder = "/upload"; //파일 업로드 경로(상대경로)
String encType = "utf-8"; //인코딩 타입
int maxSize = 5*1024*1024; //최대 업로드 파일 크기 (5mb)
//upload의 절대 경로
String realFolder = application.getRealPath(saveFolder);
MultipartRequest multi = new MultipartRequest(request, realFolder, maxSize,
encType, new DefaultFileRenamePolicy());
String img1 = multi.getFilesystemName("uploadFile1");
String img2 = multi.getFilesystemName("uploadFile2");
%>
이름 : <%= multi.getParameter("name") %><br>
제목 : <%= multi.getParameter("title") %><br>
<img src="/ch05-ServletMain/upload/<%= img1 %>"><br><%-- 다른 경로일 경우에는 URI 방식으로 기입 --%>
<img src="/ch05-ServletMain/upload/<%= img2 %>">
</body>
</html>
인코딩/ 경로 지정/ 변수 생성/ 화면 출력
multi.getFilesystemName(s03에서 지정한 name) 으로 img를 찾고 <img> 태그로 사진 화면 출력
프로필 사진 처리하듯이 자바스크립트로 미리보기 설정 넣기
우선 사진 넣는 칸에 기본 이미지 webapp.images 안에 face.png 넣기
(java script로 미리보는 기능 + jsp로 서버에 이미지 전송)
s05_profileForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>프로필 사진 업로드 폼</title>
<script type="text/javascript">
window.onload = function(){
let image = document.getElementById('image');
let submit_btn = document.getElementById('submit_btn');
//파일을 선택할 때
let file = document.getElementById('file');
//이벤트 연결
file.onchange = function(){
if(!file.files[0]){ //선택한 파일이 없을 경우
image.src='/ch05-ServletMain/images/face.png';
submit_btn.style.display = 'none';
return;
}
//정상적으로 파일을 선택한 경우
const reader = new FileReader();
reader.readAsDataURL(file.files[0]); //보낸 파일 정보를 읽음
reader.onload=function(){
image.src = reader.result;
submit_btn.style.display = '';
};
};
};
</script>
</head>
<body>
<h2>프로필 사진 업로드하기</h2>
<img id="image" src="/ch05-ServletMain/images/face.png" width="200" height="200">
<form action="s06_profile.jsp" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="file" accept="image/png,image/jpeg,image/gif">
<input type="submit" value="전송" style="display:none;" id="submit_btn">
</form>
</body>
</html>
file.files[0] 처럼 배열로 처리하는 이유는 multiple 설정이 가능하기 때문임
처음 기본 화면과 선택한 파일이 없을 경우는 submit_btn.style.display = 'none'; 으로 해서 버튼 숨김
정상적으로 파일 선택한 경우는 ''를 줘서 보여줌
s06_profile.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="com.oreilly.servlet.MultipartRequest" %>
<%@ page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>프로필 사진 업로드 처리</title>
</head>
<body>
<%
String saveFolder = "/upload"; //파일 업로드 경로
String encType = "utf-8"; //인코딩 타입
int maxSize = 5*1024*1024; //최대 업로드 사이즈 (5mb)
//upload 절대 경로
String realFolder = application.getRealPath(saveFolder);
MultipartRequest multi = new MultipartRequest(request, realFolder, maxSize, encType, new DefaultFileRenamePolicy());
String file = multi.getFilesystemName("file");
%>
<img src="/ch05-ServletMain/upload/<%= file %>" width="500">
</body>
</html>
DB 연동
1) JSP 에서 직접 연동 (실제로는 잘 안 씀)
2) 모델 1방식
3) 모델 2방식 (mvc 패턴/ 중요)
처음부터 2,3을 하게 되면 복잡해서 1부터 해볼 것
이전에 오라클 다운 받을 때 같이 받았던 OJDBC8.jar 를 cos.jar 넣은 것처럼 lib안에 붙여넣기
db연동 확인
ch10-jdbc (folder)
connectTest.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.SQLException" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>연동 테스트</title>
</head>
<body>
<%
//기본 정보 명시
String driverName = "oracle.jdbc.OracleDriver";
String jdbcUrl = "jdbc:oracle:thin:@localhost:1521:xe";
String dbId = "c##user001";
String dbPass = "1234";
Connection conn = null;
try{
//JDBC 수행 1단계 : 드라이버 로드
Class.forName(driverName);
//JDBC 수행 2단계 : Connection 객체 생성
conn = DriverManager.getConnection(jdbcUrl, dbId, dbPass);
out.println("정상적으로 연결되었습니다.");
}catch(Exception e){
e.printStackTrace();
}finally{
//자원정리
if(conn!=null)try{conn.close();}catch(SQLException e){}
}
%>
</body>
</html>
<%-- db 연동할 때는 try~catch 구조를 만들어줌 --%>
간단 형태의 게시판 (table)
ch10-jdbc (folder)
table.sql (sql file)
create table tboard(
num number primary key,
name varchar2(30) not null,
title varchar2(150) not null,
passwd varchar2(10) not null,
content varchar2(4000) not null,
reg_date date not null
);
create sequence tboard_seq;
저장 후 오라클로 가서 f9 실행 -> table/ sequence 생성
db 연동 시 1~4단계 변수를 저장하고 공유하기 위한 파일 생성
ch10-jdbc (folder)
dbInfo.jspf
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String driverName = "oracle.jdbc.OracleDriver";
String jdbcUrl = "jdbc:oracle:thin:@localhost:1521:xe";
String dbId = "c##user001";
String dbPass = "1234";
%>include 방식으로 공유하면 매 페이지마다 붙여넣는 수고가 덜어짐
db를 연동하다 보면 UI가 필요한데 하나의 스타일을 만들고 모든 UI에 활용+확장하면 편함
UI 공유하기 위해 css 파일 생성
ch10-jdbc
style.css
@charset "UTF-8";
body{
padding:0;
margin:0;
}
.page-main{
width:800px;
margin:0 auto;
}
.result-display{
width:400px;
height:200px;
margin:50px auto; /*상하좌우*/
border:1px solid #000;
display:flex;
align-items:center;
justify-content:center;
}
.align-center{
text-align:center;
}
.align-right{
text-align:right;
}
/*목록*/
table{
width:100%;
border:1px solid #000;
border-collapse:collapse;
margin-top:5px;
}
table td, table th{ /*후손선택자*/
border:1px solid #000;
padding:5px;
}
form{
width:500px;
margin:0 auto;
border:1px solid #000;
padding:10px 10px 10px 30px;
}
ul{
list-style:none;
}
label{
width:100px;
float:left;
}
게시판 글 등록하는 form 작성 (script 는 form 작성 후 링크 건 것)
ch10-jdbc
insertTestForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판 글 등록</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="page-main">
<h2>글쓰기</h2>
<form id="myForm" action="insertTest.jsp" method="post">
<ul>
<li>
<label for="name">이름</label>
<input type="text" name="name" id="name" size="20" maxlength="10">
</li>
<li>
<label for="title">제목</label>
<input type="text" name="title" id="title" size="30" maxlength="50">
</li>
<li>
<label for="passwd">비밀번호</label>
<input type="password" name="passwd" id="passwd" size="20" maxlength="10">
</li>
<li>
<label for="content">내용</label>
<textarea rows="5" cols="40" name="content" id="content"></textarea>
</li>
</ul>
<div class="align-center">
<input type="submit" value="전송">
<input type="button" value="목록" onclick="location.href='selectTest.jsp'">
</div>
</form>
</div>
</body>
</html>
insertTestForm에 null이 들어가면 에러가 나기 때문에 js로 유효성 체크를 꼭 해줘야함
script.js (javascript file)
close -> openwith -> generic text editor
window.onload=function(){
let myForm = document.getElementById('myForm');
//이벤트 연결
myForm.onsubmit=function(){
let items = document.querySelectorAll('input[type="text"],input[type="password"],textarea'); //선택자는 쉼표로 나열할 수 있음
//루프 돌면서 처리
for(let i=0; i<items.length;i++){
if(items[i].value.trim() == ''){
let label = document.querySelector('label[for="' + items[i].id + '"]');
alert(label.textContent + ' 항목은 필수입력'); //아이디 항목/비밀번호 항목 이렇게 표시하려고
items[i].value = '';
items[i].focus();
return false;
}
}
};
};
db 전송 jsp 파일
insertTest.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.SQLException" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ include file="dbInfo.jspf" %> <%-- 같은 경로라서 파일명만 명시 --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글 등록 처리</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<%
//전송된 데이터 인코딩 처리
request.setCharacterEncoding("utf-8");
//전송된 데이터 반환 받기
String name = request.getParameter("name");
String title = request.getParameter("title");
String passwd = request.getParameter("passwd");
String content = request.getParameter("content");
//DB연동
Connection conn = null;
PreparedStatement pstmt = null;
String sql = null;
//db연동때는 자원정리까지 해야해서 try~catch 실행
try{
//JDBC 수행 1단계 : 드라이버 로드
Class.forName(driverName);
//JDBC 수행 2단계 : Connection 객체 생성
conn = DriverManager.getConnection(jdbcUrl,dbId,dbPass);
//SQL문 작성 (insert 작업)
sql = "INSERT INTO tboard (num,name,title,passwd,content,reg_date)
VALUES (tboard_seq.nextval,?,?,?,?,SYSDATE)";
//JDBC 수행 3단계 : PreparedStatement 객체 생성
pstmt = conn.prepareStatement(sql);
//?에 데이터 바인딩
pstmt.setString(1, name);
pstmt.setString(2, title);
pstmt.setString(3, passwd);
pstmt.setString(4, content);
//JDBC 수행 4단계 : sql문 실행
pstmt.executeUpdate();
%>
<%-- UI 처리 --%>
<div class="result-display">
<div class="align-center">
글 등록 성공!<br>
<input type="button" value="목록보기" onclick="location.href='selectTest.jsp'">
</div>
</div>
<%
}catch(Exception e){
%>
<%-- 예외 발생 시 영역만 보여주지 않고 예외가 발생했다는 것을 알려주기 위해 html 처리 --%>
<div class="result-display">
<div class="align-center">
오류 발생! 글 등록 실패!<br>
<input type="button" value="글쓰기" onclick="location.href='insertTestForm.jsp'">
</div>
</div>
<%
e.printStackTrace();
}finally{
//자원정리
if(pstmt!=null) try{pstmt.close();} catch(SQLException e){}
if(conn!=null) try{conn.close();} catch(SQLException e){}
}
%>
</body>
</html>
작성 후 insertTestForm.jsp 에서 데이터 입력 -> oracle 데이터 들어간 것 확인 가능
대문 페이지 + select 목록 보이기 작업
selectTest.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.SQLException" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %> <%-- 목록처리 하는 곳이라 resultSet이 필요함 (루프) --%>
<%@ page import="java.sql.Date" %>
<%@ include file="dbInfo.jspf" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판 목록</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="page-main">
<h2>게시판 목록</h2>
<div class="align-right">
<input type="button" value="글쓰기" onclick="location.href='insertTestForm.jsp'">
</div>
<%
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
String sql = null;
try{
//JDBC 수행 1단계 : 드라이버 로드
Class.forName(driverName);
//JDBC 수행 2단계 : Connection 객체 생성
conn = DriverManager.getConnection(jdbcUrl,dbId,dbPass);
//SQL문 작성
sql = "SELECT * FROM tboard ORDER BY num DESC";
//JDBC 수행 3단계 : PreparedStatement 객체 생성
pstmt = conn.prepareStatement(sql);
//JDBC 수행 4단계 : SQL문을 테이블에 반영하고 결과행들을 ResultSet에 담음
rs = pstmt.executeQuery();
//테이블(table)을 만들고 해당 테이블에 내용을 표시하려고 함 -> 영역분리
%>
<table>
<tr>
<th>글번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
</tr>
<%
while(rs.next()){
int num = rs.getInt("num"); //데이터를 뽑아내기 위해 변수 설정
String name = rs.getString("name");
String title = rs.getString("title");
Date reg_date = rs.getDate("reg_date");
%>
<tr>
<td><%= num %></td>
<td><a href="detailTest.jsp?num=<%= num %>"><%= title %></a></td>
<%-- get방식으로 num(pk)를 전달해서 불러오기 --%>
<td><%= name %></td>
<td><%= reg_date %></td>
</tr>
<%
}
%>
</table>
<%
}catch(Exception e){
%>
<div class="result-display">
<span>오류 발생</span>
</div>
<%
e.printStackTrace();
}finally{ //자원정리
if(rs!=null) try{rs.close();} catch(SQLException e){}
if(pstmt!=null) try{pstmt.close();} catch(SQLException e){}
if(conn!=null) try{conn.close();} catch(SQLException e){}
}
%>
</div>
</body>
</html>
728x90
반응형