국비 교육 51일차 - 게시판 마무리, CSS, 테이블 짜기

오전에는 게시판 만들기를 거의 마무리 하고, 오후 2시간 동안 css를 배우고, 나머지 2시간동안은 테이블을 열심히 짰다. 

하루에 여러가지를 병행하려니 정신도 없고 팀플은 제대로 하고 있는건지도 긴가민가해서 조금 불안하기도 하다. 

 

그냥 열심히 하는 수밖에 없겠지..

 

일단 오전에 했던 게시판 마무리부터 포스팅하겠다. 

 

// 7-2. 게시물 올리기
	 /*
	  *     CREATE OR REPLACE PROCEDURE board_insert(
			   pName freeboard.name%TYPE,
			   pSubject freeboard.subject%TYPE,
			   pContent freeboard.content%TYPE,
			   pPwd freeboard.pwd%TYPE
			)
	  */
	 public void board_insert(BoardVO vo)
	 {
		 try
		 {
			 // 연결
			 getConnection();
			 // SQL문장 
			 String sql="{CALL board_insert(?,?,?,?)}";
			 // 함수 호출 
			 cs=conn.prepareCall(sql);
			 // ?=>값을 채운다 
			 cs.setString(1, vo.getName());
			 cs.setString(2, vo.getSubject());
			 cs.setString(3, vo.getContent());
			 cs.setString(4, vo.getPwd());
			 // 실행한다 
			 cs.executeUpdate();
		 }catch(Exception ex)
		 {
			 // 오류 처리
			 ex.printStackTrace();

		 }
		 finally
		 {
			 // 닫기
			 disConnection();
			 
		 }
	 }

 이미 오라클에서 게시물 올리기에 해당하는 함수를 만들어 줬기 때문에 자바에서는 그냥 ?에 값만 채워주는 형식으로 만들어주면 된다. 

 

그러면 BoardInsertServlet으로 이동해서 처리를 해주는데, doGet은 늘 똑같아서 신경 써줘야 할 부분이 있다면

<form>태그를 통해서 입력된 데이터를 doPost로 전송해주는 것이다. 

 

// 입력된 모든 데이터를 doPost로 전송 => <form>
				out.println("<form method=post action=BoardInsertServlet autocomplete=off>");

 이렇게 해주면 form태그로 감싸진 테이블 전체의 내용이 doPost로 넘어가지게 된다. 

 

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        /*
         *   입력값이 넘어올 경우 => 브라우저 (바이트 스트림: 1byte) => 문자 스트림으로 변환 
         *                인코딩                           디코딩 		
         */
		try
		{
			request.setCharacterEncoding("UTF-8");// 인코딩 => 디코딩 
			/*
			 *  자바 => %EC%9E%90%EB%B0%94 (인코딩=바이트 배열로 변환)
			 *  실제로 값을 받는 경우 :  %EC%9E%90%EB%B0%94 => 자바 (디코딩)
			 *     request.setCharacterEncoding("UTF-8") => 한글 전송을 받는 경우 
			 */
			
			
		}catch(Exception ex) {}
		String name=request.getParameter("name");
		String subject=request.getParameter("subject");
		String content=request.getParameter("content");
		String pwd=request.getParameter("pwd");
		
		// DAO => 오라클을 연결후 => 데이터 추가
		BoardVO vo=new BoardVO();
		vo.setName(name);
		vo.setSubject(subject);
		vo.setContent(content);
		vo.setPwd(pwd);
		
		BoardDAO dao=new BoardDAO();
		dao.board_insert(vo);
		
		// 화면을 이동한다 (목록) => 호출
		response.sendRedirect("BoardListServlet");
		
	}

 name으로 설정해준 값들을 받아와서 변수에 집어 넣어준뒤, VO에 하나씩 값을 채워둔다. 그 채워진 vo를 아까 만들어 두었던 DAO의 board_insert의 매개변수로 넣어주면 오라클에 insert되어 값이 입력되어 들어간다. 그러고 난 뒤 꼭 sendRedirect로 다시 리스트로 돌아갈 수 있게 조치를 취해주면 완성된다. 

 

// 7-3. 상세보기 
	 /*
	  *     CREATE OR REPLACE PROCEDURE board_detail(
			   pNo freeboard.no%TYPE,
			   pResult OUT SYS_REFCURSOR
			)
	  */
	 // 화면 출력 : 서블릿 , JSP 
	 public BoardVO board_detail(int no)
	 {
		 BoardVO vo=new BoardVO();
		 try
		 {
			 getConnection();
			 String sql="{CALL board_detail(?,?)}";
			 cs=conn.prepareCall(sql);
			 // 실행전 => ?에 값을 채운다 
			 cs.setInt(1, no);
			 // 읽어올 위치를 설정 
			 cs.registerOutParameter(2, OracleTypes.CURSOR);
			 // 실행 요청
			 cs.executeUpdate();
			 // no,name,subject,content,regdate,hit,like1
			 ResultSet rs=(ResultSet)cs.getObject(2);
			 rs.next();
			 vo.setNo(rs.getInt(1));
			 vo.setName(rs.getString(2));
			 vo.setSubject(rs.getString(3));
			 vo.setContent(rs.getString(4));
			 vo.setRegdate(rs.getDate(5));
			 vo.setHit(rs.getInt(6));
			 vo.setLike1(rs.getInt(7));
			 rs.close();
		 }catch(Exception ex)
		 {
			 ex.printStackTrace();
		 }
		 finally
		 {
			 disConnection();
		 }
		 // Object selectOne()
		 return vo;
	 }

 상세보기 역시 마찬가지로 이미 만들어둔 함수를 호출하면서 ?에만 값을 잘 채워 넣어주면 된다. 첫번째 ?는 in변수였기 때문에 사용자에게 값을 받아오면 됐지만, 두번째는 out변수 였기 때문에 그 출력되는 값을 자바에서 저장해줄 공간이 필요했다. 

 

그게 바로 OracleTypes.CURSOR이다. 자바에서는 여기에 꼭 맞는 해당하는 값이 없기 때문에, Object로 값을 받아오되, ResultSet으로 형변환을 시켜줬다. 

 

 

 

 

그러면 UpdateServlet으로 넘어와서 doGet은 화면을  출력해주고, doPost에서는 오라클에 연동해서 기능을 구현해준다. 

 

// 7-5. 수정하기
	 /*
	  *   CREATE OR REPLACE PROCEDURE board_updateData(
			   pNo freeboard.no%TYPE,
			   pResult OUT SYS_REFCURSOR
			)
	  */
	 public BoardVO board_updateData(int no)
	 {
		 BoardVO vo=new BoardVO();
		 try
		 {
			 getConnection();
			 // SQL문장
			 String sql="{CALL board_updateData(?,?)}";
			 cs=conn.prepareCall(sql);
			 // ?에 값을 채운다 
			 cs.setInt(1, no);
			 cs.registerOutParameter(2, OracleTypes.CURSOR);
			 // no,name,subject,content
			 cs.executeUpdate();
			 ResultSet rs=(ResultSet)cs.getObject(2);
			 rs.next();
			 vo.setNo(rs.getInt(1));
			 vo.setName(rs.getString(2));
			 vo.setSubject(rs.getString(3));
			 vo.setContent(rs.getString(4));
			 rs.close();
		 }catch(Exception ex)
		 {
			 ex.printStackTrace();
		 }
		 finally
		 {
			 disConnection();
		 }
		 return vo;
	 }
	 // 7-5-1. 실제 수정
	 /*
	  *  CREATE OR REPLACE PROCEDURE board_update(
		   pNo freeboard.no%TYPE,
		   pName freeboard.name%TYPE,
		   pSubject freeboard.subject%TYPE,
		   pContent freeboard.content%TYPE,
		   pPwd freeboard.pwd%TYPE,
		   pResult OUT freeboard.name%TYPE --비밀번호 확인
		)
	  */
	 public boolean board_update(BoardVO vo)
	 {
		 boolean bCheck=false;
		 try
		 {
			 getConnection();
			 String sql="{CALL board_update(?,?,?,?,?,?)}";
			 cs=conn.prepareCall(sql);
			 // ?에 값을 채운다 
			 cs.setInt(1,vo.getNo());
			 cs.setString(2, vo.getName());
			 cs.setString(3, vo.getSubject());
			 cs.setString(4, vo.getContent());
			 cs.setString(5, vo.getPwd());
			 /// ==================== 오라클에서 읽어 가는 데이터 
			 cs.registerOutParameter(6, OracleTypes.VARCHAR);
			
			 // 실행 
			 cs.executeUpdate();
			 
			 String result=cs.getString(6);
			 bCheck=Boolean.parseBoolean(result);
			 
		 }catch(Exception ex)
		 {
			 ex.printStackTrace();
		 }
		 finally
		 {
			 disConnection();
		 }
		 return bCheck;
	 }

위에는 수정된 값을 화면에 읽어들이는 메소드이고, 아래가 실제로 수정해주는 메소드이다. 

pl/sql에서 비밀번호 일치/불일치 여부를 true/false로 반환하게끔 만들었기 때문에 return형을 boolean으로 받아왔다. 

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out=response.getWriter();
		try
		{
			request.setCharacterEncoding("UTF-8");// 인코딩 => 디코딩 
			/*
			 *  자바 => %EC%9E%90%EB%B0%94 (인코딩=바이트 배열로 변환)
			 *  실제로 값을 받는 경우 :  %EC%9E%90%EB%B0%94 => 자바 (디코딩)
			 *     request.setCharacterEncoding("UTF-8") => 한글 전송을 받는 경우 
			 */
		}catch(Exception ex) {}
		// 전송된 값을 받는다 
		String name=request.getParameter("name");
		String subject=request.getParameter("subject");
		String content=request.getParameter("content");
		String pwd=request.getParameter("pwd");
		String no=request.getParameter("no");
		// DAO => 오라클을 연결후 => 데이터 추가 
		BoardVO vo=new BoardVO();
		vo.setName(name);
		vo.setSubject(subject);
		vo.setContent(content);
		vo.setPwd(pwd);
		vo.setNo(Integer.parseInt(no));
		
		// DAO연동 
		BoardDAO dao=new BoardDAO();
		boolean bCheck=dao.board_update(vo);
		if(bCheck==true)
		{
			response.sendRedirect("BoardDetailServlet?no="+no);
		}
		else
		{
			   out.println("<script>");
			   out.println("alert(\"비밀번호가 틀립니다!!\");");
			   out.println("history.back();");
			   out.println("</script>");
		}
	}

 UpdateServlet에서도 마찬가지로 true일때와 false일때를 구분해서 코드를 짜준다. 

 

삭제도 마찬가지이다. 비밀번호 일치여부를 확인해주어야 하기 때문에 리턴값은 boolean으로 받아온다. 

 

// 7-4. 삭제하기
	 /*
	  * CREATE OR REPLACE PROCEDURE board_delete(
		   pNo freeboard.no%TYPE,
		   pPwd freeboard.pwd%TYPE,
		   pResult OUT freeboard.name%TYPE
		)
	  */
	 public boolean board_delete(int no,String pwd)
	 {
		 boolean bCheck=false;
		 try
		 {
			 // 1. 연결
			 getConnection();
			 // 2. SQL
			 String sql="{CALL board_delete(?,?,?)}";
			 cs=conn.prepareCall(sql);
			 // 3. ?에 값을 채운다
			 cs.setInt(1, no);
			 cs.setString(2, pwd);
			 cs.registerOutParameter(3, OracleTypes.VARCHAR);
			 
			 // 4. 실행요청
			 cs.executeUpdate();
			 // 5. 저장된 데이터값을 받는다 
			 String result=cs.getString(3);
			 
			 bCheck=Boolean.parseBoolean(result); // String => boolean으로 변경
		 }catch(Exception ex)
		 {
			 ex.printStackTrace();
		 }
		 finally
		 {
			 disConnection();
		 }
		 return bCheck;
	 }

 매개변수로는 삭제할 게시글의 번호, 비밀번호를 받아온다. 역시 pl/sql 메소드에서 비밀번호 일치/불일치 여부를 판단해줘서 true/false값을 출력해준다. 

 

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// HTML 작성 (자바스크립트)
		
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out=response.getWriter();
		
		// 사용자가 보내준 데이터를 받는다 (no, pwd)
		String no=request.getParameter("no");
		String pwd=request.getParameter("pwd");
		// DAO로 전송 => 결과값
		BoardDAO dao=new BoardDAO();
		boolean bCheck=dao.board_delete(Integer.parseInt(no), pwd);
		// 결과값 => history.back(), list
		if(bCheck==true)
		{
			response.sendRedirect("BoardListServlet");
		}
		else 
		{
			out.println("<script>");
			out.println("alert(\"비밀번호가 틀립니다!!\")");
			out.println("history.back()");
			out.println("</script>");
		}
		
		
	}

 사용자가 보내준 no, pwd값을 받아와서 메소드의 매개변수로 그대로 집어넣어준다. 여기서도 역시 bCheck를 하나 만들어주고 비밀번호가 일치하면 리스트로 돌아가게 만들고, 일치하지 않으면 비밀번호가 일치하지 않는다는 창을 띄워주주고 이전 페이지로 돌아가게 만들어 준다. 

 

마무리인줄 알았는데 아직 LIKE문을 써서 찾는 기능을 구현을 안했다. 아마 이것도 끝내고 TRIGGER를 배우지 않을까 싶다. 

 

 

 

CSS는 간단해서 포스팅에서 안올리고 있었는데 그래도 오늘은 HTML5 태그들을 배워서 올려보겠다. 

 

<!-- 
	HTML5
		템플릿 태그 : 화면 분할
		<header>
		<nav> : 메뉴
		<section> : 본문
		<article> : 사이트 분리
		<aside> : 광고, 인기...
		<footer> : 회사 정보
 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#container{
	width:960px;
	height:800px;
	border: 1px solid black;
	margin: 0px auto;
}
header{
	background-color:lightgray;
	height:100px;
	width:960px;
	text-align:center;
}
section{
	width:650px;
	background-color:#CCFFCC;
	height:500px;
	float:left;
}
nav{
	background-color:pink;
	height:100px;
	width:960px;
	text-align:center;
}
aside{
	background-color:yellow;
	height:400px;
	width:280px;
	text-align:center;
	float:left;
}
footer{
	background-color:skyblue;
	height:80px;
	width:960px;
	text-align:center;
	clear:both;
}

</style>
</head>
<body>
	<div id="container">
	<header><h3>Header영역(로고,검색창)</h3></header>
	<nav><h3>메뉴</h3></nav>
	<section><h3>사이트 본문</h3></section>
	<aside><h3>광고,인기순위</h3></aside>
	<footer><h3>개인보호방침</h3></footer>
	</div>
</body>
</html>

 화면 템플릿을 분할하는 소스이다. 어려운건 없다. 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
ul {
	list-style: none;
	margin: 0;
	padding: 0;
	background-color:black;
	overflow:hidden;
	position:fixed;
	top:0;
	width:100%
}
li {
	float:left;
}
li a {
	display:block;
	color:yellow;
	text-align:center;
	padding:14px 16px;
	text-decoration:none;
}
li a:hover{
	background-color:orange;
}
img {
	width:200px;
	height:250px;
}
img:hover {
	width:230px;
	height:280px;
}
</style>
</head>
<body>
	<ul>
	 <li><a href="#">홈</a></li>
	 <li><a href="#">영화</a></li>
	 <li><a href="#">뮤직</a></li>
	 <li><a href="#">맛집</a></li>
	 <li><a href="#">레시피</a></li>
	 <li><a href="#">마이페이지</a></li>
	</ul>
	<img src="dm.jpg" width=20% height=100%>
</body>
</html>

 메뉴를 만드는 코드. float:left를 적용해서 리스트를 가로로 쭉 출력해줬다. 역시 어려운건 없다..

 

그리고 이제 팀프로젝트 역할분담도 드디어 정했다. 

나는 마이페이지 같은 마이트립을 맡았다. 테이블을 vuerd로 짜서 제출해야 했는데 아래와 같이 대충 만들어봤다. 

 

사실 뭐 어떻게 하는건지 모르겠어서 일단 초안 느낌으로 했는데 내일 피드백을 받고 수정을 좀 해야할것 같다.