230502 마흔 여덟 번째 수업_JSP

mary·2023년 5월 2일
0

국비 수업

목록 보기
48/72

파일 전송을 위한 form 태그

문자가 깨져 보일 수도 있어서 text/plan은 잘 쓰지 않음

db와 연결하려면 jdbc를 생성하여 기본 구성으로 되어있는 메소드를 통해 연동을 시키는데
파일도 업로드하고 다운로드 할 수 있는 메소드들이 cos.jar에 구성되어 있음

파일의 진짜 이름과 서버에 저장된 이름이 다를 수 있음(두 사용자가 같은 이름으로 중복되게 파일을 저장할 수도 있으니 넘버링되어 구별함)

구별하기 전의 이름을 OriginalFileName으로 가져옴


--첫번째 jsp파일
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form method="post" enctype="multipart/form-data" action="01.2.fileUploadView.jsp">
		이름: <input name="user"><p/>
		title: <input name="title"><p/>
		file: <input type="file" name="uploadfile"><p/>
		<input type="submit" value="UPLOAD">
	</form>
</body>
</html>



--두번째 jsp파일
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.oreilly.servlet.MultipartRequest" %> 
<!-- 위에서 오류나면 lib에 servlet파일이 없든가 스펠링 틀린 것 -->
<%@ page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy" %>
<%@ page import="java.util.*, java.io.*" %> <!-- Enumeration, File 쓰려면 임포트 해줘야함 -->
<%
	/*
		new MultipartRequest(request 객체,
							저장할 폴더 경로,
							파일의 최대 크기,
							인코딩 타입,
							기존의 파일명과 겹칠 경우 덮어쓰기 방지 설정)
	*/
	String saveFolder= "D:/KYR/04_jsp/ch08_fileUpload/src/main/webapp/filestorage";
	//D:\\KYR\\04_jsp\\ch08_fileUpload\\src\\main\\webapp\\filestorage 이렇게 쓰기도 하는데 위를 더 많이 씀
	String encType = "UTF-8";
	int maxSize = 1024*1024*5; //5MGB
	
	try { //MultipartRequest가 오류 날 수 있어서 원래 try로 묶어줘야 함
		MultipartRequest multi = new MultipartRequest(request,saveFolder, maxSize, encType,
								new DefaultFileRenamePolicy());
		
		// form요소 중에서 <input type="file">을 제외한 파라미터들의 이름
		Enumeration params = multi.getParameterNames();
		while(params.hasMoreElements()) { //Enumeration 타입을 돌릴려면 hasMoreElements()
			String name = (String)params.nextElement();
			String value = multi.getParameter(name); //name에 대한 parameter값을 value에 대입
			out.print(name + " : " + value + "<p/>");
		}
		out.print("<hr/>");
		
		//폼요소 중에서 <input type="file">인 요소의 파라미터들의 이름
		Enumeration files = multi.getFileNames();
		while(files.hasMoreElements()) {
			String name = (String)files.nextElement();
			String filename = multi.getFilesystemName(name);
			String originame = multi.getOriginalFileName(name);
			String type = multi.getContentType(name);
			File f = multi.getFile(name);
			
			out.print("파라미터의 이름: " + name + "<p/>");
			out.print("저장된 파일의 이름: " + filename + "<p/>");
			out.print("실제 파일의 이름: " + originame + "<p/>");
			out.print("파일의 타입: " + type + "<p/>");
			
			if(f != null) { //파일을 안 넣은 상황도 있을 수 있어서
				out.print("파일의 크기 :" + f.length() + "Byte");
			}
		}
	} catch(Exception e) {
		System.out.println(e);
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	업로드된 파일
</body>
</html>

image1이라는 파일을 한 번 업로드 했다가 또 업로드 하니 img11로 바뀌어 업로드 됨


--jsp 첫번째 파일
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("utf-8");
	int fileCnt = 0;
	if(request.getParameter("addcnt") != null) {
		fileCnt = Integer.parseInt(request.getParameter("addcnt"));
	}
	System.out.println(fileCnt);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <script type="text/javascript">
	function addFile(formName) {
		if(formName.addcnt.value=="") {
			alert("입력할 파일의 개수를 입력하고 확인 버튼을 클릭하세요");
			formName.addcnt.focus();
			return;
		}
		formName.submit();
	}
	
	function elementCheck(formFile) {
		
	}
</script> -->
</head>
<body>
	<div>
		<h4>여러개의 파일을 업로드하기 위해 파일의 개수를 입력한 후,</h4>
		<h4>확인 버튼을 눌러주세요</h4>
		<h4>파일 입력이 완료되면 DONE버튼을 눌러주세요</h4>
	</div>
	<table border="1" align="center">
		<tr>
			<form name="fileCnt" method="post">
				<td>추가할 파일의 수 입력: <input name="addcnt" requied></td>
				<td><input type="submit" value="확인"></td>
			</form>
		</tr>
		<tr>
			<form name="fileUp" method="post" enctype="multipart/form-data" action="02.2.multiView.jsp">
				<td>
				<% for(int i=0; i<fileCnt; i++) { %>
					<input type="file" name="selectFile<%=i %>"><br>	
				<%	} %>
				</td>
				<td><input type="submit" value="DONE"></td>
			</form>
		</tr>
	</table>
</body>
</html>
--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" %>
<%@ page import="java.util.*, java.io.*" %> 
<%
	String saveFolder= "D:/KYR/04_jsp/ch08_fileUpload/src/main/webapp/filestorage";
	String encType = "UTF-8";
	int maxSize = 1024*1024*1024*5;
	
	try { 
		MultipartRequest multi = new MultipartRequest(request,saveFolder, maxSize, encType,
								new DefaultFileRenamePolicy());
		
		Enumeration params = multi.getParameterNames();
		while(params.hasMoreElements()) {
			String name = (String)params.nextElement();
			String value = multi.getParameter(name);
			out.print(name + " : " + value + "<p/>");
		}
		out.print("<hr/>");
		
		Enumeration files = multi.getFileNames();
		while(files.hasMoreElements()) {
			String name = (String)files.nextElement();
			String filename = multi.getFilesystemName(name);
			String originame = multi.getOriginalFileName(name);
			String type = multi.getContentType(name);
			File f = multi.getFile(name);
			
			out.print("파라미터의 이름: " + name + "<p/>");
			out.print("저장된 파일의 이름: " + filename + "<p/>");
			out.print("실제 파일의 이름: " + originame + "<p/>");
			out.print("파일의 타입: " + type + "<p/>");
			
			if(f != null) { 
				out.print("파일의 크기 :" + f.length() + "Byte<p/><hr><p/>");
			}
		}
	} catch(Exception e) {
		System.out.println(e);
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	파일업로드
</body>
</html>


--첫번째 jsp 파일
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	let count = 1;
	let addCount = 0;
	//행추가
	function addInputBox() {
		for(let i=1; i<=count; i++) {
			if(document.getElementsByName("test" + i)[0]){
				addCount = count;
				break;
			} else { //if end 
				addCount = i;
			}
		}//for end
		
		let addStr = "<tr>"
					+ 	 "<td><input type=checkbox name=checkList value=" + addCount + "></td>"
					+ 	 "<td><input type=file name=test" + addCount + "></td>"
					+ "</tr>";
		let table = document.getElementById("dynamic_table");
		let newRow = table.insertRow();
		let newCell = newRow.insertCell();
		newCell.innerHTML = addStr;
		count++;
	}//function end
	
	//행삭제
	function deleteInputBox() {
		let table = document.getElementById("dynamic_table")
		let rows = table.rows.length;
		let chk = 0;
		
		if(rows > 1) {
			for(let i=0; i<fileForm.checkList.length; i++) {
				if(fileForm.checkList[i].checked == true) {
					table.deleteRow(i);
					i--;
					count--;
					chk++; //체크를 한 개수만큼 증가됨
				}//if end
			}//for end
			if(chk <= 0) {
				alert("삭제할 행을 체크해 주세요");
			}
		} else { //if end
			alert("더이상 삭제할 수 없습니다.")
		}
	}
</script>
</head>
<body>
	<h4>파일을 업로드하려면 행 추가 버튼을 누르세요</h4>
	<input type="button" value="행추가" onclick="addInputBox();">&emsp;
	<input type="button" value="행삭제" onclick="deleteInputBox();">
	<form name="fileForm" method="post" enctype="multipart/form-data" action="03.2.multiView.jsp">
		<table border="1" id="dynamic_table">
		</table><p/>
		<input type="submit" value="DONE">
	</form>
</body>
</html>


--두번째 jsp파일은 위와 동일함



회원가입 게시판 만들기

--connection pool파일
/**
 * Copyright(c) 2001 iSavvix Corporation (http://www.isavvix.com/)
 *
 *                        All rights reserved
 *
 * Permission to use, copy, modify and distribute this material for
 * any purpose and without fee is hereby granted, provided that the
 * above copyright notice and this permission notice appear in all
 * copies, and that the name of iSavvix Corporation not be used in
 * advertising or publicity pertaining to this material without the
 * specific, prior written permission of an authorized representative of
 * iSavvix Corporation.
 *
 * ISAVVIX CORPORATION MAKES NO REPRESENTATIONS AND EXTENDS NO WARRANTIES,
 * EXPRESS OR IMPLIED, WITH RESPECT TO THE SOFTWARE, INCLUDING, BUT
 * NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
 * FITNESS FOR ANY PARTICULAR PURPOSE, AND THE WARRANTY AGAINST
 * INFRINGEMENT OF PATENTS OR OTHER INTELLECTUAL PROPERTY RIGHTS.  THE
 * SOFTWARE IS PROVIDED "AS IS", AND IN NO EVENT SHALL ISAVVIX CORPORATION OR
 * ANY OF ITS AFFILIATES BE LIABLE FOR ANY DAMAGES, INCLUDING ANY
 * LOST PROFITS OR OTHER INCIDENTAL OR CONSEQUENTIAL DAMAGES RELATING
 * TO THE SOFTWARE.
 *
 */
package member;

import java.sql.*;
import java.util.Properties;
import java.util.Vector;

/**
 * Manages a java.sql.Connection pool.
 *
 * @author  Anil Hemrajani
 */

public class DBConnectionMgr {
    private Vector connections = new Vector(10);
    private String _driver = "oracle.jdbc.driver.OracleDriver",
    _url = "jdbc:oracle:thin:@localhost:1521:xe",
    _user = "jsp", //테이블 계정명인 jsp로 넣기
    _password = "1234";
    private boolean _traceOn = false;
    private boolean initialized = false;
    private int _openConnections = 10;
    private static DBConnectionMgr instance = null;

    public DBConnectionMgr() {
    }
--회원가입 화면의 jsp 파일
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style type="text/css">
	th {padding:8px;}
	td {padding:3px 0 3px 3px;}
</style>
<script src="script.js" type="text/javascript" charset="utf-8"></script>
<body bgcolor="#E4F7BA">
	<form method="post" name="regFrm" action="memberProc.jsp">
		<table border="1" align="center" width="1100" style="boder-collapse:collapse">
			<tr bgcolor="#425518">
				<th colspan="3" align="center"><font color="#ffffff">회원가입</th>	
			</tr>
			<tr>
				<td>아이디</td>
				<td><input name="id">
				<input type="button" value="ID중복확인" onclick="idCheck(this.form.id.value);"></td>
				<td>영문과 숫자로만 입력</td>
			</tr>
			<tr>
				<td>비밀번호</td>
				<td><input type="password" name="pwd"></td> 
				<td>특수기호,영문,숫자가 각 1개 이상씩, 8글자 이상</td>
			</tr>
			<tr>
				<td>비밀번호 확인</td>
				<td><input type="password" name="repwd"></td> 
				<td>위의 비밀번호를 한번 더 넣으세요</td>
			</tr>
			<tr>
				<td>이름</td>
				<td><input name="name"></td> 
				<td>한글로 입력</td>
			</tr>
			<tr>
				<td>성별</td>
				<td>
					<input type="radio" name="gender" value="m"><input type="radio" name="gender" value="w"></td>  
				<td>성별을 선택해주세요</td>
			</tr>
			<tr>
				<td>생년월일</td>
				<td><input name="birthday"></td> 
				<td>6자로 입력. ex) 190315</td>
			</tr>
			<tr>
				<td>E-mail</td>
				<td><input type="email" name="email"></td> 
				<td>ex) email@naver.com</td>
			</tr>
			<tr>
				<td>우편번호</td>
				<td>
					<input name="zipcode" id="postcode" readonly> 
					<!-- readonly: 사용자가 넣지 못하고 찾아서 넣을 수만 있도록 -->
					<input type="button" name="serchAdrs" value="우편번호 찾기">
				</td>
				<td>우편번호를 검색하세요</td>
			</tr>
			<tr>
				<td>주소</td>
				<td><input name="address" id="addr" readonly><br>
				<input name="detailAddress" id="detailAddr"></td>  
				<td>상세주소가 있으면 입력해주세요</td>
			</tr>
			<tr>
				<td>취미</td>
				<td>
					<input type="checkbox" name="hobby" value="운동" checked>운동
					<input type="checkbox" name="hobby" value="넷플릭스">넷플릭스
					<input type="checkbox" name="hobby" value="독서">독서
					<input type="checkbox" name="hobby" value="음악감상">음악감상
					<input type="checkbox" name="hobby" value="여행">여행
				</td>  
				<td>취미를 선택하세요</td>
			</tr>
			<tr>
				<td>직업</td>
				<td><select name="job">
				<option value="0" selected>선택하세요.
				<option value="학생" >학생
				<option value="회사원" >회사원
				<option value="교육자" >교육자
				<option value="요식업" >요식업
				<option value="의료직" >의료직
				<option value="법조인" >법조인
				<option value="기타" >기타</select>
				</td>
				 
				<td>직업을 선택하세요</td>
			</tr>
			<tr>
				<td colspan="3" align="center">
				<input type="button" value="회원가입"> 
				<input type="reset" value="다시쓰기">
				<input type="button" value="로그인">  
				</td>
			</tr>
		</table>
	</form>
</body>
</html>
--아이디 기능 구현의 js파일
function idCheck(id) {
	if(id == "") {
		alert("아이디를 입력해주세요");
		regFrm.id.focus();
		return;
	}
	url = "idCheck.jsp?id=" +id; //* 파일명?넘겨줄파라미터이름=파라미터값(띄어쓰기x)
	window.open(url, "IDCheck", "width=300, height=150");
};
--javaBean 파일
package member;

import java.sql.*;

//아이디를 입력하면 db에 있는지 db와 연동하는 프로그래밍 자바 파일
public class MemberMgr {
	private DBConnectionMgr pool;
	
	public MemberMgr() {
		pool = DBConnectionMgr.getInstance();
	}
	
	public boolean checkId(String id) {
		Connection con = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		boolean flag = false;
		
		try {
			con = pool.getConnection();
			String sql = "SELECT id FROM MEMBER WHERE id=?";
			pstmt = con.prepareStatement(sql);
			pstmt.setString(1, id);
			rs = pstmt.executeQuery();
			flag = rs.next();
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			pool.freeConnection(con, pstmt, rs);
		}
		return flag;
	}
}
--아이디 중복인지 확인하는 jsp 파일
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:useBean id="mMgr" class="member.MemberMgr"/>
<%
	request.setCharacterEncoding("utf-8");
	String id = request.getParameter("id");
	boolean result = mMgr.checkId(id); //true or false 나옴
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
	if(result) { //똑같은 id가 있을 때 (true)
		out.print(id + "는 이미 존재하는 ID입니다");
	} else {
		out.print(id + "는 사용 가능 합니다");
	}
%>
<a href="#" onclick="self.close();">닫기</a> <!-- self.close(): 현재 열려있는 창 닫기 -->
</body>
</html>

profile
내 인생을 망치러 온 나의 구원, 개발

0개의 댓글