본문 바로가기
국비 과정/JSP

국비 - 1017 ( 게시판 폼 만들기 )

by 코딩호야 2022. 10. 17.

JSP 페이지

editboard.jsp 페이지

맨처음 보여지는 페이지이고 변수선언 및  기본 첫페이지 틀을 잡아주는 페이지이다.

<title>게시반 기본 예제 : 게시 폼 작성</title>
</head>
	<!--  파일 boardform.js : 폼의 각 입력 값이 있는지를 검토하는 함수 구현 -->
	
<script src="boardform.js"></script>
<body>
	<%@ page import="univ.*" %>
	<%
		String name = "";
		String email = "";
		String title = "";
		String content = "";
		String headline = "등록";
		
		String id = request.getParameter("id");
		if(id != null){
			// 등록이 아닌 경우 출력을 위해 선택한 게시의 각 필드 내용을 저장
			int idnum = Integer.parseInt(id);
			BoardDBCP brddb = new BoardDBCP();
			BoardEntity brd = brddb.getBoard(idnum);
			name = brd.getName();
			email = brd.getEmail();
			title = brd.getTitle();
			content = brd.getContent();
			headline = "수정 삭제";
		};
			
	%>
	<h2> 게시판 <%=headline %> 프로그램 </h2><hr>
	
	<form name=boardform method=post action="processboard.jsp">
	
	<!--  menu : 등록 , 수정 또는 삭제 구분을 위한 매개변수로 이용 -->
	<input type=hidden name="menu" value="insert">
	
	<!--  수정 또는 삭제를 위한 게시 id 를 hidden 으로 전송 -->
	<input type=hidden name="id" value=<%=id%>>
	
	<table>
		<tr><td algin=center>
		<table>
			<tr><td colspan=2>
				<table>
					<tr>
					<td> 이름 : </td>
					<td width=50>
						<input type=text name=name value="<%=name%>" size=30 maxlength=20></td>
					<td> 전자메일 : </td>
					<td width=50>
						<input type=text name=email size=30 value="<%=email%>" maxlength=30></td>
					</tr>
					<tr>
					<td>제목 : </td>
					<td colspan=3>
				<input type=text name=title size=80 value="<%=title%>" maxlength=100></td>
					</tr>
				</table>
				</td></tr>
				
				<tr><td colspan=2>
				
					<textarea name=content rows=10 cols=90><%=content %></textarea></td></tr>
				<tr>
				<td colspan=2> 비밀번호 :
					<input type=password name=passwd size=20 maxlength=15><font color=red>
					현재 게시 내용을 수정 또는 삭제하려면 이미 등록한 비밀번호가 필요합니다.
					</font></td>
				</tr>
				<tr>
				 <td colspan=2 height=5><hr size=2></td>
				</tr>
				<tr>
				 <td colspan=2>
				 	<% if(id == null) { %>
				 	 	<!--  버튼을 누르면 boardform.js 의 함수를 실행하여 processboard.jsp 로 이동 -->
				 	 		<input type=button value="등록" onClick="insertcheck()">
				 	<%  } else {%>
				 		<!--  버튼을 누르면 boardform.js의 각 함수를 실행하여 processboard.jsp 로 이동 -->
				 			<input type=button value="수정완료" onClick="updatecheck()">
				 			<input type=button value="삭제" onClick="deletecheck()">
					<% } %>
						<!--  목록보기 버튼은 listboard.jsp로 이동 -->
					<input type=button value="목록보기" onClick="location.href='listboard.jsp'">
					<input type=reset value="취소">
					</td>
					</tr>
		</table>
		</td></tr>
	</table>
	</form>


</body>
</html>

 

processboard.jsp

아래 javaScript 페이지에서 결과값이 넘어오면 실행될 페이지이고 비밀번호의 true false 유무를 확인한다 .

그리고 javaBeans 페이지인 BoardEntity 페이지의 getter setter 를 통해 값을 주고받는다.  

 

 

<title>게시판 기본 예제 : 게시글 등록 수정 삭제 처리</title>
</head>
<body>
	<!--  게시글 등록 , 수정 , 삭제를 위한 자바빈즈 선언  -->
	<jsp:useBean id="brd" class="univ.BoardEntity" scope="page"></jsp:useBean>
	<!--  Entity 는 DB 와 서로 값을 전달하기위한 빈즈이다 -->
	
	<jsp:useBean id="brddb" class="univ.BoardDBCP" scope="page"></jsp:useBean>
	
	<% 
		// 한글 처리를 위해 문자인코딩 지정
		request.setCharacterEncoding("utf-8");
		// 등록(insert) , 수정(update) , 삭제(delete) 중 하나를 저장
		String menu = request.getParameter("menu");
		// 등록 또는 수정 처리 모듈
		if( menu.equals("delete")|| menu.equals("update")){
			String id = request.getParameter("id");
			String passwd = request.getParameter("passwd");
			int idnum = Integer.parseInt(id);
			// 데이터베이스 자바빈즈에 구현된 메서드 isPasswd() 로 id 와 암호가 일치하는지 검사
			if( !brddb.isPasswd(idnum, passwd)){
	%>
			<!--  암호가 틀리면 이전 화면으로 이동 -->
			<script>alert("비밀번호가 다릅니다."); history.go(-1)</script>
	<%
			} else{
				if(menu.equals("delete")){
						// 삭제를 위해 데이터베이스 자바빈즈에 구현된 메서드 deleteDB() 실행
						brddb.deleteDB(idnum);
				}else if( menu.equals("update")){
	%>
			<!--  수정시 BoardEntity에 저장해야 하는 필드 id -->
			<jsp:setProperty name="brd" property="id" />
			<jsp:setProperty name="brd" property="name" />
			<jsp:setProperty name="brd" property="title"/>
			<jsp:setProperty name="brd" property="email"/>
			<jsp:setProperty name="brd" property="content"/>
	<%
			// 수정을 위해 데이터베이스 자바빈즈에 구현된 메서드 updateDB() 실행
				brddb.updateDB(brd);
				}
			// 기능 수행후 다시 게시 목록 보기로 이동
				response.sendRedirect("listboard.jsp");
			}
		} else if(menu.equals("insert")){
	%>
		<!--  등록시 BoardEntity에 저장해야 하는 필드 password -->
			<jsp:setProperty name="brd" property="name"/>
			<jsp:setProperty name="brd" property="title"/>
			<jsp:setProperty name="brd" property="email"/>
			<jsp:setProperty name="brd" property="content"/>
			<jsp:setProperty name="brd" property="passwd"/>
	<%
			// 등록을 위해 데이터베이스 자바빈즈에 구현된 메서드 insertDB() 실행
			brddb.insertDB(brd);
			// 기능 수행후 다시 게시 목록 보기로 이동
			response.sendRedirect("listboard.jsp");
		}
	%>
	
	

</body>
</html>

 

listboard.jsp

게시글을 수정하거나 삭제할때 필요한 페이지 이고 세세하게  각행의 색깔이나 마우스를 올렸을때 나타나는 액션을 주는 페이지이다.

<title>게시판 기본 예제 : 게시 목록 표시</title>
</head>
<body>
<h2>게시판 목록 표시 프로그램</h2>
<hr>

<%@ page import="java.util.ArrayList, univ.BoardEntity, java.text.SimpleDateFormat" %>
<jsp:useBean id="brddb" class="univ.BoardDBCP" scope="page"/>
	
	<%
			// 게시 목록을 위한 배열 리스트를 자바빈즈를 이용하여 확보
			ArrayList<BoardEntity> list = brddb.getBoardList();
			int counter = list.size();
			int row = 0;
			
			if(counter > 0 ){
	%>
	<table>
	<tr>
		<th><font color=blue><b> 번호 </b></font></th>
		<th><font color=blue><b> 제목 </b></font></th>
		<th><font color=blue><b> 작성자 </b></font></th>
		<th><font color=blue><b> 작성일 </b></font></th>
		<th><font color=blue><b> 전자메일 </b></font></th>
	</tr>
	<%
		// 게시 등록일을 2022-10-14:33:21 형태로 출력하기 위한 클래스
		SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		for(BoardEntity brd : list){
			// 홀짝으로 다르게 색상 지정
			String color = "papayawhip";
			if( ++row % 2 == 0)color = "white";
			
			
	%>
		<tr bgcolor=<%=color %>
			onmouseover="this.style.backgroundColor='SkyBlue'"
			onmouseout="this.style.backgroundColor='<%=color %>'">
			<!-- 수정과 삭제를 위한 링크로 id 를 전송 -->
			<td align=center><a href="editboard.jsp?id=<%= brd.getId() %>"><%= brd.getId() %></a></td>
			<td align=left><%=brd.getTitle() %></td>
			<td align=center><%=brd.getName() %></td>
			<!--  게시 작성일을 2022-10-14 14:33:21 형태로 출력 -->
			<td align=center><%=df.format(brd.getRegdate()) %></td>
			<td align=center><%=brd.getEmail() %></td>
		</tr>
		
		<%
			}
		 %>
	</table>
	<%	}
	%>
	<hr width=90%>
	<p> 조회된 게시판 목록 수가 <%= counter %> 개 입니다.
	<hr>
	<form name=form method=post action=editboard.jsp>
				<input type=submit value="게시등록">
		</form>
</body>
</html>

 

JavaScript 페이지

boardform.js 페이지

암호와 아이디 입력을 oracle_1 에서 not null 로 지정해줬으므로  javascript 페이지에서 아이디와 암호값을 비워두면 alert 창으로 경고를 주고  입력이됬다면  연결 페이지로 넘어갈수있게 한번 걸러주는 페이지이다.

function deletecheck(){
	if(document.boardform.passwd.value==""){
		alert("암호를 입력해 주세요 !! ");
		document.boardform.passwd.focus();
		return;
	}
	ok = confirm("삭제 하시겠습니까?");
	if(ok){
		document.boardform.menu.value="delete";
		document.boardform.submit();
	}
	else{
		return;
	}
}
function insertcheck(){
	if(document.boardform.name.value ==""){
		alert("이름을 입력해 주세요 !!");
		document.boardform.name.focus();
		return;
	}
	if(document.boardform.passwd.value ==""){
		alert("암호를 입력해 주세요 !!");
		document.boardform.passwd.focus();
		return;
	}
	document.boardform.menu.value = "insert";
	document.boardform.submit();
}

function updatecheck()
{
		if(document.boardform.name.value == "")
			{
				alert("이름을 입력해주세요 !!");
				document.boardform.name.focus();
				return;
			}
		if(document.boardform.passwd.value == "")
			{
				alert("암호를 입력해주세요 !!");
				document.boardform.passwd.focus();
				return;
			}
		document.boardform.menu.value="update";
		document.boardform.submit();
				
	
}

 

 

JAVA 페이지

BoardDBCP.java

데이터베이스 페이지 oracle_1 과 연동하여 데이터를 삭제 수정 입력 등 할 수 있게 도와주는 페이지이다.

 

import java.sql.PreparedStatement;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

import javax.naming.InitialContext;
import javax.sql.DataSource;

// DBCP 를 이용한 테이블 board_1 처리 데이터베이스 연동 자바빈즈 프로그램
public class BoardDBCP {
	
		// 데이터베이스 연결관련 변수 선언
		private Connection con = null;
	    private PreparedStatement pstmt = null;
        private DataSource ds = null;
        
        //JDBC 드라이버 로드 메서드
        public BoardDBCP() { 	// 생성자
        	try {
        		InitialContext ctx = new InitialContext();
        		ds = (DataSource) ctx.lookup("java:comp/env/jdbc/OracleDB");
        	}catch (Exception e) {
        		e.printStackTrace();
        	}
        }
        
        // 데이터베이스 연결 메서드
        
        public void connect() {
        	try {
        		con = ds.getConnection();
        	} catch(Exception e) {
        		e.printStackTrace();
        	}
        }
        
        // 데이터베이스 연결 해제 메서드
        public void disconnect() {
        	if(pstmt != null) {
        		try {
        			pstmt.close();
        		}catch (SQLException e) {
        			e.printStackTrace();
        		}
        	}
        	if(con != null) {
        		try {
        			con.close();
        		}catch(SQLException e) {
        			e.printStackTrace();
        		}
        	}
        }
        
        // 게시판의 모든 레코드를 반환하는 메서드
        
        public ArrayList<BoardEntity> getBoardList(){
        	connect();
        	ArrayList<BoardEntity> list = new ArrayList<BoardEntity>();
        	
        	String SQL = "select * from board_1 order by id desc";
        	try {
        		pstmt = con.prepareStatement(SQL);
        		ResultSet rs = pstmt.executeQuery();
        		
        		while(rs.next()) {
        			BoardEntity brd = new BoardEntity();
        			brd.setId(rs.getInt("id"));
        			brd.setName(rs.getString("name"));
        			brd.setPasswd(rs.getString("passwd"));
        			brd.setTitle(rs.getString("title"));
        			brd.setEmail(rs.getString("email"));
        			brd.setRegdate(rs.getTimestamp("regdate"));
        			brd.setContent(rs.getString("content"));
        			// 리스트에 추가
        			list.add(brd);
        		}
        		rs.close();
        	}catch(SQLException e) {
        		e.printStackTrace();
        	}
        	finally {
        		disconnect();
        	}
        	return list;
        }
        
        // 게시판의 레코드를 반환 메서드
        public ArrayList<BoardEntity> getSearchList(String name){
        	connect();
        	ArrayList<BoardEntity> list = new ArrayList<BoardEntity>();
        	
        	String SQL = "select * from board_1 where name = ?";
        	try {
        		pstmt = con.prepareStatement(SQL);
        		pstmt.setString(1, name);
        		ResultSet rs = pstmt.executeQuery();
        		
        		while(rs.next()) {
        			BoardEntity brd = new BoardEntity();
        			
        			brd.setId(rs.getInt("id"));
        			brd.setName(rs.getString("name"));
        			brd.setPasswd(rs.getString("passwd"));
        			brd.setTitle(rs.getString("title"));
        			brd.setEmail(rs.getString("email"));
        			brd.setRegdate(rs.getTimestamp("regdate"));
        			brd.setContent(rs.getString("content"));
        			// 리스트에 추가
        			list.add(brd);
        		}
        		rs.close();
        	}catch (SQLException e) {
        		e.printStackTrace();
        	}
        	finally {
        		disconnect();
        	}
        	return list;
        }
        // 주 키 id 의 레코드를 반환하는 메서드
        public BoardEntity getBoard(int id) {
        	connect();
        	String SQL = "select * from board_1 where id = ?";
        	BoardEntity brd = new BoardEntity();
        	
        	try {
        		pstmt = con.prepareStatement(SQL);
        		pstmt.setInt(1, id);
        		ResultSet rs = pstmt.executeQuery();
        		
        		rs.next();	// 하나밖에 없어서 next 한번만 해준다 여러개라면 while 문으로 만들어준다.
        		
        		brd.setId(rs.getInt("id"));
    			brd.setName(rs.getString("name"));
    			brd.setPasswd(rs.getString("passwd"));
    			brd.setTitle(rs.getString("title"));
    			brd.setEmail(rs.getString("email"));
    			brd.setRegdate(rs.getTimestamp("regdate"));
    			brd.setContent(rs.getString("content"));
    			
    			rs.close();
        	}catch (SQLException e) {
        		e.printStackTrace();
        	}
        	finally {
        		disconnect();
        	}
        	return brd;
        }
        
        // 게시물 등록 메서드
        
        public boolean insertDB(BoardEntity board) {
        	boolean success = false;
        	connect();
        	String sql = "insert into board_1 values(board_1_seq.nextval, ?, ?, ?, ?, sysdate, ?)";
        										// seq로 순서대로 ID 값을 줌으로써 중복을 없앤다.
        	try {
        		pstmt = con.prepareStatement(sql);
        		pstmt.setString(1, board.getName());
        		pstmt.setString(2, board.getPasswd());
        		pstmt.setString(3, board.getTitle());
        		pstmt.setString(4, board.getEmail());
        		pstmt.setString(5, board.getContent());
        		pstmt.executeUpdate();
        		success = true;
        	}catch(SQLException e) {
        		e.printStackTrace();
        		return success;
        	}
        	finally {
        		disconnect();
        	}
        	return success;
        }
        
        // 데이터 갱신을 위한 메서드
        
        public boolean updateDB(BoardEntity board) {
        	boolean success = false;
        	connect();
        	String sql = "update board_1 set name=?, title=?, email = ? , content=?  where id=?";
//        	 String sql = "update board_1 set name=?, title=?, email=? , content=? where title=?";
        	
        	try {
        		pstmt = con.prepareStatement(sql);
        		// 인자로 받은 객체를 이용해 사용자가 수정한 값을 가져와 SQL 문 완성
        		
        		pstmt.setString(1, board.getName());
        		pstmt.setString(2, board.getTitle());
        		pstmt.setString(3, board.getEmail());
        		pstmt.setString(4, board.getContent());
        		pstmt.setInt(5,board.getId());
        		
        		int rowUdt = pstmt.executeUpdate();
        		// System.out.println(rowUdt);
        		if(rowUdt == 1) success = true;
        	}catch (SQLException e) {
        		e.printStackTrace();
        		return success;
        	}
        	finally {
        		disconnect();
        	}
        	return success;
        }
        // 게시물 삭제를 위한 메서드
        public boolean deleteDB(int id) {
        	boolean success = false;
        	connect();
        	String sql = "delete from board_1 where id=?";
        	try {
        		pstmt = con.prepareStatement(sql);
        		// 인자로 받은 주 키인 id 값을 이용해 삭제
        		pstmt.setInt(1, id);
        		pstmt.executeUpdate();
        		success = true;
        	}catch (SQLException e) {
        		e.printStackTrace();
        		return success;
        	}
        	finally {
        		disconnect();
        	}
        	return success;
        }
        	// 데이터베이스에서 인자인 id 와 passwd 가 일치하는지 검사하는 메서드
        public boolean isPasswd(int id,String passwd) {
        	boolean success = false;
        	connect();
        	String sql = "select passwd from board_1 where id=?";
        	try {
        		pstmt = con.prepareStatement(sql);
        		pstmt.setInt(1, id);
        		ResultSet rs = pstmt.executeQuery();
        		
        		rs.next();
        		String orgPasswd = rs.getString(1);
        		if( passwd.equals(orgPasswd) )success = true;
        		System.out.println(success);
        		rs.close();
        	}catch(SQLException e) {
        		e.printStackTrace();
        		return success;
        	}
        	finally {
        		disconnect();
        	}
        	return success;
        }
}

 

BoardEntity.java

getter 와 setter 를 통해 값을 전달받고 보낼 페이지

import java.util.Date;

public class BoardEntity {
	
	 
	 private int id;
     private String name;
     private String passwd;
     private String	title;
     private String	email;
     private Date	regdate;
     private String content;
     
     
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPasswd() {
		return passwd;
	}
	public void setPasswd(String passwd) {
		this.passwd = passwd;
	}
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public Date getRegdate() {
		return regdate;
	}
	public void setRegdate(Date regdate) {
		this.regdate = regdate;
	}
	public String getContent() {
		return content;
	}
	public void setContent(String content) {
		this.content = content;
	}

     

}

 

Oracle 페이지

oracle_1.sql

데이터를 저장할 데이터베이스 페이지이다. 

create table board_1(
id		number(20)	not null,
name	varchar(20)	not null,
passwd	varchar(20)	not null,
title	varchar(100)    null,
email	varchar(30)     null,
regdate	date            null,
content	varchar(3000)   null,
primary	key(id))

select * from board_1;

drop table board_1 purge;

create sequence board_1_seq
start with 1
increment by 1
maxvalue 10000
nocache

 

 

다음 여러개의 코드페이지를 이용해서 실행한 간단한 게시판 프로그램이다.

보기엔 특별하지않지만 이런 단순하게 보이는 게시판도 여러가지의 코드와 긴 코드가 필요로 한다.

 

페이지를 실행했을때 처음으로 보여지는 페이지이다 이 페이지에서 내용들을 입력할 수 있고 게시판에 등록할 수 있다.

아래는  내용들을 입력후 등록한 후 목록으로 보여지는 페이지이다.

 

 

여기서 번호에 링크가 연결되어있는데 누르게되면 수정 삭제 페이지가 아래처럼 나타나고 

아래 페이지에서 내용 수정 및 삭제가 가능하다.

 

각각을 실행했을때 아래처럼 JavaScript 페이지에 설정된 에러 메시지도 나오게된다.

 

저작자표시 (새창열림)

'국비 과정 > JSP' 카테고리의 다른 글

국비 - 1027 ( 로그인 폼)  (0) 2022.10.27
국비 - 1018 ( JSTL 파일 올리기 )  (0) 2022.10.18
국비 - ( JSP MVC 패턴 )  (4) 2022.10.12
국비 - 1011 ( javabeans , template )  (2) 2022.10.11
국비 - 1006 ( response , page context , 액션태그)  (0) 2022.10.06

관련글

티스토리툴바