구리

210416_HTML,JSP 관련 예제 본문

JSP,Serlvet

210416_HTML,JSP 관련 예제

guriguriguri 2021. 4. 18. 19:47

문제1.

아이디 / 비밀번호 / 이메일 을 영구저장할 수 있도록

오라클의 본인 계정에 테이블 생성

 

index.html        -  시작화면 (회원가입 링크, 회원목록 링크)

joinForm.html  -   회원 가입 화면 (아이디 / 비밀번호 / 이메일)

join.jsp              -  입력값을 member  테이블에 저장

 

테이블 명 : member  (모든 필드는 null  허용하지 않음)

필드명 : no    레코드가 추가 될 때마다 1씩 증가

필드명 : id     최대 20글자   

필드명 : pwd  최대 20글자

필드명 : mail  최대 50글자

 

문제 2.

데이터베이스에 저장된 레코드들을 표형태로 출력하는 jsp 추가

list.jsp​

 

직접 짠 코드

더보기 
index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시작화면</title>
</head>
<body>
시작화면<br>
	<a href="joinForm.html">회원가입 하러 가기</a><br>
	<a href="list.jsp">회원목록 보러 가기</a>
</body>
</html>
joinForm.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 화면</title>
</head>
<body>
<form action="join.jsp" method="get">
	<table>
	<tr>
		<td>아이디</td>
		<td><input type="text" name="id" maxlength="20" required="required" /></td>
	</tr>
	<tr>
		<td>비밀번호</td>
		<td><input type="password" name="pwd" maxlength="20" required /></td>
	</tr>
	<tr>
		<td>이메일</td>
		<td><input type="email" name="mail" maxlength="50" required /></td>
	</tr>
	<tr align="center">
		<td colspan="2">
			<input type="submit" value="회원가입" />
			<input type="reset" value="초기화" />
		</td>
	</tr>
	</table>
</form>
</body>
</html>
join.jsp

<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<title>회원가입 성공 여부</title>
</head>
<body>
	<%
	PreparedStatement pstmt = null;
	Connection con = null;
	
	String id = request.getParameter("id");
	String pwd = request.getParameter("pwd");
	String mail = request.getParameter("mail");
	
	try{
		Class.forName("oracle.jdbc.driver.OracleDriver");
		con = DriverManager.getConnection("jdbc:oracle:thin:@127.0.0.1:1521:XE", "bjy", "qorwjddus96");
		
		String sql = "insert into member values (seq_no.nextval, ?,?,?)";
		pstmt = con.prepareStatement(sql);
		pstmt.setString(1, id);
		pstmt.setString(2, pwd);
		pstmt.setString(3, mail);
		
		int n = pstmt.executeUpdate();
		if(n>0){
			out.print("회원가입 완료!");
		}else{
			out.print("회원가입 실패 ㅠ,ㅠ");
		}
		
		
	}catch(ClassNotFoundException e){
		System.err.print("DRIVER LOAD ERR : " + e.getMessage());
	}catch(SQLException e){
		System.err.print("CONNECT ERR : " + e.getMessage());
	}finally{
		try{
			if(con != null){
				con.close();
			}
			if(pstmt != null){
				pstmt.close();
			}
		}catch(SQLException e){
			System.err.print("CLOSE ERR : " + e.getMessage());
		}
	}
	%>
	<br>
	<a href="joinForm.html">회원가입 하러 가기</a><br>
	<a href="list.jsp">회원목록 보기</a>

</body>
</html>
list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<title>회원목록 화면</title>
</head>
<body>
	<table border="1">
	<%
	Statement stmt = null;
	Connection con = null;

	try{
		Class.forName("oracle.jdbc.driver.OracleDriver");
		con = DriverManager.getConnection("jdbc:oracle:thin:@127.0.0.1:1521:XE", "bjy", "qorwjddus96");
		
		String sql = "select no 번호, id 아이디, pwd 비밀번호, mail 이메일 from member order by no";
		stmt = con.createStatement();
		ResultSet rs = stmt.executeQuery(sql);
		ResultSetMetaData rsmd = rs.getMetaData();
		int cols = rsmd.getColumnCount();
		
		out.print("<tr>");
		for(int i=1;i<=cols;i++){
			out.print("<td>" + rsmd.getColumnName(i) + "</td>");
		}
		out.print("</tr>");
		
		while(rs.next()){
			out.print("<tr>");
			out.print("<td>" + rs.getInt(1) + "</td>");
			out.print("<td>" + rs.getString(2) + "</td>");
			out.print("<td>" + rs.getString(3) + "</td>");
			out.print("<td>" + rs.getString(4) + "</td>");
			out.print("</tr>");
		}
		
		
	}catch(ClassNotFoundException e){
		System.err.print("DRIVER LOAD ERR : " + e.getMessage());
	}catch(SQLException e){
		System.err.print("CONNECT ERR : " + e.getMessage());
	}finally{
		try{
			if(con != null){
				con.close();
			}
			if(stmt != null){
				stmt.close();
			}
		}catch(SQLException e){
			System.err.print("CLOSE ERR : " + e.getMessage());
		}
	}
	%>
	</table>
	<br>
	<a href="joinForm.html">회원가입 하러 가기</a>

</body>
</html>

 

결과화면

더보기
index.html 
joinForm.html
join.jsp
list.jsp

문제2. 

​프로젝트명 : simple_board_test

 

index.html            => 메인화면

writeForm.html     => 글쓰기 화면

updateForm.jsp     => 글수정 화면

 

list.jsp        => 글 목록 출력 화면

detail.jsp    => 글 상세보기 화면

write.jsp     => 글 저장 처리

update.jsp   => 글 수정 처리

delete.jsp    => 글 삭제 처리

 

추가문제 ) 검색 기능을 지닌 search.jsp도 작성하세요

 

문제 설계도

더보기

1. index.html => list.jsp 

 

2. list.jsp  =>글쓰기 (<a href=~></a>) => writeForm.html

                 => 목록에 링크(<a href=~></a>) => detail.jsp

                => 맨 위에 검색창 생성 (search.jsp)

 

3. writeForm.html  => 저장 => write.jsp => list.jsp

                                => 취소 (<a href=~></a>)  => list.jsp

 

 

4. detail.jsp => 수정  (<a href=~></a>) => updateForm.jsp

                    => 삭제  => delete.jsp => list.jsp

                    => 목록  (<a href=~></a>) =>  list.jsp

 

5. updateForm.jsp  => 수정 => update.jsp =>  list.jsp

                                => 취소  (<a href=~></a>) =>   list.jsp

 

6. search.jsp => list와 동일한 구성이지만 쿼리문은 다르게 

프로젝트 코드

더보기 
index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>index.html : 첫 화면</title>
	
	<script type="text/javascript">
		function gotoList() {
			document.location.href="list.jsp";
		}
	</script>
</head>

<body onload="gotoList()">

</body>
</html>
list.jsp 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글 목록 화면</title>
</head>
<body>
	글 목록 화면
	<br /><br />
	<form action="search.jsp" method="get">
		<input type="text" name="searchword" required="required" />
		<input type="submit" value="검색" />
	</form>
	<%
		Connection con = null;
		Statement stmt = null;
		
		try{
			Class.forName("oracle.jdbc.driver.OracleDriver");
			String url = "jdbc:oracle:thin:@127.0.0.1:1521:XE";
			con = DriverManager.getConnection(url, "bjy", "qorwjddus96");
			
			String query = "select no 번호, title 제목, writer 작성자, r_date 날짜, hit 조회수 from board_tbl order by no";
			stmt = con.createStatement();
			
			ResultSet rs = stmt.executeQuery(query);
			
			ResultSetMetaData rsmd = rs.getMetaData();
			
			int cols = rsmd.getColumnCount();
			out.print("<table border=1>");
			out.print("<tr>");
			
			for(int i=1;i<=cols;i++){
				out.print("<td>" + rsmd.getColumnName(i) + "</td>");
			}
			out.print("</tr>");
			
			while(rs.next()){
				out.print("<tr>");
				out.print("<td>" + rs.getInt(1) + "</td>");
				out.print("<td><a href=detail.jsp?no="+rs.getInt(1) + ">" + rs.getString(2) + "</a></td>");
				out.print("<td>" + rs.getString(3) + "</td>");
				out.print("<td>" + rs.getDate(4) + "</td>");
				out.print("<td>" + rs.getInt(5) + "</td>");
				out.print("</tr>");
			}
			out.print("</table>");
		}catch(ClassNotFoundException e){
			System.err.print("DRIVER ERR : " + e.getMessage());
		}catch(SQLException e){
			System.err.print("CONNECT ERR : " + e.getMessage());
		}finally{
			try{
				if(stmt != null){
					stmt.close();
				}
				if(con != null){
					con.close();
				}
			}catch(SQLException e){
				System.err.print("CLOSE ERR : "+ e.getMessage());
			}
		}
	
	%>
	<input type="button" value="글쓰기" onclick="location.href='writeForm.html'">
</body>
</html>
detail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%
	String no = request.getParameter("no");
	int num = Integer.parseInt(no);
	
	String id = "bjy";
	String pwd = "qorwjddus96";
	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	
	try{
		Class.forName("oracle.jdbc.driver.OracleDriver");
		conn = DriverManager.getConnection("jdbc:oracle:thin:@127.0.0.1:1521:XE", id, pwd);
		
		String query = null;
		query = "update board_tbl set hit = hit+1 where no=?";
		pstmt = conn.prepareStatement(query);
		pstmt.setInt(1, num);
		pstmt.executeUpdate();
		
		pstmt = null;
		query = "select * from board_tbl where no=?";
		pstmt = conn.prepareStatement(query);
		pstmt.setInt(1, num);
		
		rs = pstmt.executeQuery();
		rs.next();
		
	}catch(ClassNotFoundException e){
		System.err.println("DRIVER LOAD ERR : " + e.getMessage());
	}catch(SQLException e){
		System.err.println("CONNECT ERR  : " + e.getMessage());
	}
	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글 상세보기 화면</title>
</head>
<body>
	<table>
		<tr><th colspan="2">글 상세보기 화면</th></tr>
		<tr>
			<td>번호</td>
			<td><input type="text" size="48" value='<%= rs.getInt("no") %>' readonly="readonly" /></td>
		</tr>
		<tr>
			<td>제목</td>
			<td><input type="text" size="48" value='<%= rs.getString("title") %>' readonly="readonly" /></td>
		</tr>
		<tr>
			<td>내용</td>
			<td><textarea rows="10" cols="50" readonly="readonly" /><%= rs.getString("content") %></textarea></td>
		</tr>
		<tr>
			<td>작성자</td>
			<td><input type="text" size="20" value='<%= rs.getString("writer") %>' readonly="readonly" /></td>
		</tr>
		<tr>
			<td>날짜</td>
			<td><input type="text" size="20" value='<%= rs.getDate("r_date") %>' readonly="readonly" /></td>
		</tr>
		<tr>
			<td>조회수</td>
			<td><input type="text" size="20" value='<%= rs.getInt("hit") %>' readonly="readonly" /></td>
		</tr>
		<tr align="center">
			<td colspan="2">
				<input type="button" value="수정" onclick="location.href='updateForm.jsp?no=<%= rs.getInt("no") %>'" />
				<input type="button" value="삭제" onclick="location.href='delete.jsp?no=<%= rs.getInt("no") %>'" />
				<input type="button" value="목록" onclick="location.href='list.jsp'" />
			</td>
		</tr>
	</table>
</body>
</html>
search.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글 검색 목록 화면 : search.jsp</title>
</head>
<body>
	글 목록 화면
	<br /><br />
	<form action="search.jsp" method="get">
		<input type="text" name="searchword" required="required" />
		<input type="submit" value="검색" />
	</form>
	<%
		String searchWord = request.getParameter("searchword");
		Connection con = null;
		PreparedStatement pstmt = null;
		
		try{
			Class.forName("oracle.jdbc.driver.OracleDriver");
			String url = "jdbc:oracle:thin:@127.0.0.1:1521:XE";
			con = DriverManager.getConnection(url, "bjy", "qorwjddus96");
			
			String query = "select no 번호, title 제목, writer 작성자, r_date 날짜, hit 조회수 from board_tbl where title like '%' || ? || '%' order by no desc";
			pstmt = con.prepareStatement(query);
			pstmt.setString(1, searchWord);
			
			ResultSet rs = pstmt.executeQuery();
			
			ResultSetMetaData rsmd = rs.getMetaData();
			
			int cols = rsmd.getColumnCount();
			out.print("<table border=1>");
			out.print("<tr>");
			
			for(int i=1;i<=cols;i++){
				out.print("<td>" + rsmd.getColumnName(i) + "</td>");
			}
			out.print("</tr>");
			
			while(rs.next()){
				out.print("<tr>");
				out.print("<td>" + rs.getInt(1) + "</td>");
				out.print("<td><a href=detail.jsp?no="+rs.getInt(1) + ">" + rs.getString(2) + "</a></td>");
				out.print("<td>" + rs.getString(3) + "</td>");
				out.print("<td>" + rs.getDate(4) + "</td>");
				out.print("<td>" + rs.getInt(5) + "</td>");
				out.print("</tr>");
			}
			out.print("</table>");
		}catch(ClassNotFoundException e){
			System.err.print("DRIVER ERR : " + e.getMessage());
		}catch(SQLException e){
			System.err.print("CONNECT ERR : " + e.getMessage());
		}finally{
			try{
				if(pstmt != null){
					pstmt.close();
				}
				if(con != null){
					con.close();
				}
			}catch(SQLException e){
				System.err.print("CLOSE ERR : "+ e.getMessage());
			}
		}
	
	%>
	<a href="writeForm.html">
	글쓰기
	</a>
</body>
</html>
writeForm.html 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글쓰기 화면</title>
</head>
<body>
<form action="write.jsp" method="get">
	<table>
		<tr><th colspan="2">글쓰기화면</th></tr>
		<tr>
			<td>제목</td>
			<td><input type="text" name="title" required="required" size="48" maxlength="33" /></td>
		</tr>
		<tr>
			<td>내용</td>
			<td><textarea rows="10" cols="50" name="content" required="required" maxlength="300"></textarea></td>	
		</tr>
		<tr>
			<td>작성자</td>
			<td><input type="text" name="writer" required="required" size="20 "maxlength="25" /></td>
		</tr>
		<tr align="center">
			<td colspan="2">
				<input type="submit" value="저장" />
				<input type="button" value="취소" onclick="location.href='list.jsp'"/>
			</td>
		</tr>
	</table>
</form>
</body>
</html>
write.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%> 
<%@page import="java.sql.*"%>  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글저장 처리</title>
</head>
<body>
	<%
	String title = request.getParameter("title");
	String content = request.getParameter("content");
	String writer = request.getParameter("writer");
	
	Connection con = null;
	PreparedStatement pstmt = null;
	try{
		Class.forName("oracle.jdbc.driver.OracleDriver");
		System.out.println("드라이버 로드 성공");
		con = DriverManager.getConnection("jdbc:oracle:thin:@127.0.0.1:1521:XE", "bjy", "qorwjddus96");
		System.out.println("오라클 접속 성공");
		
		String query = "insert into board_tbl (no, title, content, writer) values (seq_brd_no.NEXTVAL,?,?,?)";
		
		pstmt = con.prepareStatement(query);
		pstmt.setString(1, title);
		pstmt.setString(2, content);
		pstmt.setString(3, writer);
		
		int n = pstmt.executeUpdate();
		if(n>0){
			out.print("저장 성공<br />");
		}else{
			out.print("저장 실패<br />");
		}
	}catch(ClassNotFoundException e){
		System.out.println("DRIVER LOAD ERR : " + e.getMessage());
	}catch(SQLException e) {
		System.out.println("" + e.getMessage());
	}finally{
		try{
			if(pstmt != null){
				pstmt.close();
			}
			if(con != null){
				con.close();
			}
		}catch(SQLException e){
			System.out.println("CLOSE ERR : " + e.getMessage());
		}
	}
	response.sendRedirect("list.jsp");
	%>
	

</body>
</html>
delete.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%
	String no = request.getParameter("no");
	int num = Integer.parseInt(no); 
	
	String id = "bjy";
	String pwd = "qorwjddus96";
	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	
	try{
		Class.forName("oracle.jdbc.driver.OracleDriver");
		conn = DriverManager.getConnection("jdbc:oracle:thin:@127.0.0.1:1521:XE", id, pwd);
		
		String query = "delete from board_tbl where no=?";
		pstmt = conn.prepareStatement(query);
		pstmt.setInt(1, num);
		
		int n = pstmt.executeUpdate();
		if(n>0){
			response.sendRedirect("list.jsp");
		}
		
		
	}catch(ClassNotFoundException e){
		System.err.println("DRIVER LOAD ERR : " + e.getMessage());
	}catch(SQLException e){
		System.err.println("CONNECT ERR  : " + e.getMessage());
	}finally{
		try{
			if(pstmt != null){
				pstmt.close();
			}
			if(conn != null){
				conn.close();
			}
		}catch(SQLException e) {
			System.err.print("CLOSE ERR : " + e.getMessage());
		}
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글삭제 처리</title>
</head>
<body>
	글 삭제 처리 실패 
	<a href="list.jsp">목록</a>
</body>
</html>
updateForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%
	String no = request.getParameter("no");
	int n = Integer.parseInt(no);

	Connection con = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	
	try{
		Class.forName("oracle.jdbc.driver.OracleDriver");
		System.out.println("드라이버 로드 성공");
		con = DriverManager.getConnection("jdbc:oracle:thin:@127.0.0.1:1521:XE", "bjy", "qorwjddus96");
		System.out.println("오라클 접속 성공");
		
		String query = "select * from board_tbl where no=?";
		
		pstmt = con.prepareStatement(query);
		pstmt.setInt(1, n);
		rs = pstmt.executeQuery();
		rs.next();
		
	}catch(ClassNotFoundException e){
		System.out.println("DRIVER LOAD ERR : " + e.getMessage());
	}catch(SQLException e) {
		System.out.println("CONNECT ERR  : " + e.getMessage());
	}
	
%>
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>글 수정 화면</title>
</head>
<body>
<form action="update.jsp" method="get">
	<table>
		<tr><th colspan="2">글 수정 화면</th></tr>
		<tr>
			<td>번호</td>
			<td><input type="text" size="48" name="no" value='<%= rs.getInt("no") %>' readonly="readonly" /></td>
		</tr>
		<tr>
			<td>제목</td>
			<td><input type="text" name="title" size="48" required="required" value='<%= rs.getString("title") %>' /></td>
		</tr>
		<tr>
		<tr>
			<td>내용</td>
			<td><textarea rows="10" cols="50" name="content" required="required" /><%= rs.getString("content") %></textarea></td>
		</tr>
		<tr>
			<td>작성자</td>
			<td><input type="text" size="20" value='<%= rs.getString("writer") %>' readonly="readonly" /></td>
		</tr>
		<tr>
			<td>날짜</td>
			<td><input type="text" size="20" value='<%= rs.getDate("r_date") %>' readonly="readonly" /></td>
		</tr>
		<tr>
			<td>조회수</td>
			<td><input type="text" size="20" value='<%= rs.getInt("hit") %>' readonly="readonly" /></td>
		</tr>
		<tr align="center">
			<td colspan="2">
				<input type="submit" value="수정" />
				<input type="button" value="목록" onclick="location.href='list.jsp'" />
			</td>
		</tr>
	</table>
</form>

</body>
</html>
update.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%
	String title = request.getParameter("title");
	String content = request.getParameter("content");
	String no = request.getParameter("no");
	int num = Integer.parseInt(no);
	
	Connection con = null;
	PreparedStatement pstmt = null;
	
	try{
		Class.forName("oracle.jdbc.driver.OracleDriver");
		System.out.println("드라이버 로드 성공");
		con = DriverManager.getConnection("jdbc:oracle:thin:@127.0.0.1:1521:XE", "bjy", "qorwjddus96");
		System.out.println("오라클 접속 성공");
		
		String query = "update board_tbl set title=?, content=? where no=? ";
		
		pstmt = con.prepareStatement(query);
		pstmt.setString(1, title);
		pstmt.setString(2, content);
		pstmt.setInt(3, num);
		
		int n = pstmt.executeUpdate();
		if(n>0){
			out.print("저장 성공<br />");
		}else{
			out.print("저장 실패<br />");
		}
	}catch(ClassNotFoundException e){
		System.out.println("DRIVER LOAD ERR : " + e.getMessage());
	}catch(SQLException e) {
		System.out.println("CONNECT ERR : " + e.getMessage());
	}finally{
		try{
			if(pstmt != null){
				pstmt.close();
			}
			if(con != null){
				con.close();
			}
		}catch(SQLException e){
			System.out.println("CLOSE ERR : " + e.getMessage());
		}
	}
	response.sendRedirect("list.jsp");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글수정 처리</title>
</head>
<body>
</body>
</html>

결과화면

더보기
list.jsp
detail.jsp
writeForm.jsp
updateForm.jsp

 

'JSP,Serlvet' 카테고리의 다른 글

TIL_210423_쿠키, 세션  (0) 2021.04.27
TIL_210426_JSTL ,Servlet 기초  (0) 2021.04.26
TIL_210422_JSP 표준 액션 태그  (0) 2021.04.25
TIL_210421_JSP 기초2 (label, forward, application, JSP파일 데이터 옮기는 방법, 한글 변수 안 깨지게 전달하는 방법)  (0) 2021.04.21
HTML, JSP) 다른 페이지로 이동하는 법  (0) 2021.04.20
'JSP,Serlvet' Related Articles more