[프로젝트] 경로 / 답변형 게시판 만들기 (폼, 쓰기, 글 목록)

1. 경로 적기

 1) 상대경로 (현재문서가 저장되어 있는 폴더 기준)
    ../images        상위폴더 images
    ../../images   상위의 상위폴더 images
    ./images         현재폴더안에 있는 하위폴더 images
    images/          현재폴더안에 있는 하위폴더 images

2) 절대경로  (홈디렉토리 root부터 시작)
  - /images 

 

답변형 게시판 만들기 (view단)

---

 1. header.jsp 에 있는 mystyle.css와 myscript.js, 그리고 메뉴의 경로 변경 상위폴더로 만듦 ../ 으로

 

 2. template.jsp의 경로도 수정

 

 3. WebContent 폴더에 bbs폴더를 만들고 template.jsp를 복사해서 'bbsList.jsp'로 이름변경

   - template.jsp를 복사해오면 그 안에 header 와 footer가 다 존재

 

 4. '답변형 게시판' 만들 sql을 따로 모으기 위해 sql 폴더를 생성하고 'bbs.sql'만들기

    - 강사님 사이트 JSP - [08] 답변형 게시판 - 게시판 테이블

    - 사용자가 직접 적어줘야하는 것을 폼 작업이 필요

    - commit; 까지 완료

테이블 생성

create table tb_bbs(    bbsno    number(5)      not null  -- 일련번호 -99999~99999   ,wname   varchar2(20)    not null  -- 작성자 (한글은 3byte)   ,subject   varchar2(100)   not null  -- 글제목   ,content  varchar2(2000)  not null -- 글내용    ,passwd   varchar2(10)    not null  -- 글비밀번호   ,readcnt  number(5)       default 0 not null -- 글조회수   ,regdt     date              default  sysdate    -- 글작성일 (최종 수정일도 하고싶으면 또 다른 작성일을 넣으면 됨)   ,grpno     number(5)      not null       -- 글 그룹번호   ,indent    number(5)       default 0  -- 들여쓰기   ,ansnum  number(5)       default 0  -- 글순서   ,ip          varchar2(15)    not null  -- 글 IP (쓴 사람의 IP)   ,primary  key(bbsno)                 --bbsno 기본키   );

새 글 쓰기

bbsno      : max(bbsno)+1  wname, subject, content, passwd : 사용자입력  default 값     : readcnt, regdt, indent, ansnum (insert를 안하면 default가 나오기 때문에 굳이 insert 안해도 무관)  grpno     : max(bbsno)+1  ip     : request 내부객체에서 사용자PC의 IP 정보를 가져옴

행 추가 삽입

insert into tb_bbs(bbsno, wname, subject, content, passwd, grpno, ip) values(    (select nvl(max(bbsno),0)+1 from tb_bbs)    , '장만월', '기억해줘요', '내 모든 날과 그 때를', '1234'    , (select nvl(max(bbsno),0)+1 from tb_bbs)    , '127.0.0.1'   );

행 개수 확인

select count(*) from tb_bbs;

 

   

 

   5. 작성자가 적어야 하는 폼을 만들기 위해 bbsForm.jsp 생성

    - view단 먼저 완성하고 server 단으로.

    - 스타일은 부트스트랩에 공개 되어져있는 것을 끌어다 쓰기 때문에 class= " " 가져와 쓰면 적용됨

bbsForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../header.jsp"%>
<!-- 본문시작 bbsForm.jsp -->
	<h3>* 글쓰기 *</h3>
	<p><a href="bbsList.jsp"  class="btn btn-info">글목록</a></p>
	<form name="bbsfrm" method="post" action="bbsIns.jsp" onsubmit="return bbsCheck(this)"> <!-- onsubmit은 return을 만나야지만 실행이 가능, this는 form을 가리킴 → 자바스크립트 function에 해당하기 때문에 myscript.js 에 만들어도 되고 현재 페이지에 만들어도 됨-->
	
	<div class="container">
	<table class="table table-condensed"> <!-- class="table table-striped" -->
	<tr>
	  <th class="active">작성자</th> <!-- class="active" 빼면 칸 색상 사라짐 -->
	  <td><input type="text" name="wname" size="10" maxlength="20" required class="form-control"></td> <!-- required 최소 0인 경우 아무것도 넘어가지 않음, length가 0인 경우 -->
	</tr>	
	<tr>
	  <th class="active">제목</th>
	  <td><input type="text" name="subject" size="30" maxlength="100" required class="form-control"></td> 
	</tr>	
	<tr>
	  <th class="active">내용</th>
	  <td><textarea rows="5" cols="30" name="content" class="form-control"></textarea></td>
	</tr>	
	<tr>
	  <th class="active">비밀번호</th>
	  <td><input type="password" name="passwd" size="10" maxlength="10" required class="form-control"></td> 
	</tr>	
	<tr>
	  <td colspan="2"  align="center">
		<input type="submit" value="쓰기" class="btn btn-info"> <!-- submit을 하게 되면 onsubmit 이라는 액션이 발생 -->
		<input type="reset" value="취소" class="btn btn-info">		
	  </td>
	</tr>
	</table>
</div>
	</form>
<!-- 본문끝 -->
<%@ include file="../footer.jsp"%>

 

 

   5-1) bbsForm.jsp의 유효성검사 (myscript.js)

	 function bbsCheck(f){
    	  //게시판 유효성 검사
    	  //1) 작성자 2글자이상 입력 (글자수가 너무 적으면 DB로 보내지 않는 것을 설정)
    	  var wname=f.wname.value;
    	  wname=wname.trim();	//공백 없애주기
    	  if(wname.length<2){
    		  alert("작성자를 2글자 이상 입력해주세요");
    		  f.wname.focus(); //커서 가져다 두기
    		  return false;
    	  }//if end
    	  
    	  //2) 제목 2글자 이상 필수 입력
    	  var subject=f.subject.value;
    	  subject=subject.trim();	//공백 없애주기
    	  if(subject.length<2){
    		  alert("제목을 2글자 이상 입력해주세요");
    		  f.subject.focus(); //커서 가져다 두기
    		  return false;
    	  }//if end
    	  
    	  //3) 내용 2글자 이상 필수 입력
    	  var content=f.content.value;
    	  content=content.trim();	//공백 없애주기
    	  if(content.length<2){
    		  alert("내용을 2글자 이상 입력해주세요");
    		  f.content.focus(); //커서 가져다 두기
    		  return false;
    	  }//if end
    	  
    	  //4) 비밀번호 4글자 이상 입력
    	  var passwd=f.passwd.value;
    	  passwd=passwd.trim();	//공백 없애주기
    	  if(passwd.length<4){
    		  alert("비밀번호를 4자 이상 입력해주세요");
    		  f.passwd.focus(); //커서 가져다 두기
    		  return false;  
    	  }//if end
    	  
    	  return true; //onsubmit 이벤트에서 서버로 전송 해당 - true 이면 전달이 되서 밖으로 드러나는 것
      }//bbsCheck() end

 

 

답변형 게시판 만들기 (server단)

---

  1. myweb/Java Resources/src/DBPKG.DBOpen.java 만들기 (과정평가형 공개 문제와 동일한 방식으로 진행중)

    - 시험중에는 아이디를 system을 넣어주고 현재는 개인아이디 사용

package DBPKG;

import java.sql.Connection;
import java.sql.DriverManager;

public class DBOpen {
  public static Connection getConnection() throws Exception {
    Class.forName("oracle.jdbc.OracleDriver");
    Connection con=DriverManager.getConnection("jdbc:oracle:thin:@//localhost:1521/xe", "java0514","1234");  //시험에서는 아이디를 'system'을 넣어주지만 지금은 개인 아이디가 있으니 개인아이디
	return con;
  }//getConnection() end
	
}//class end

 

  2. net.bbs 패키지를 만들고 BbsDAO.java, BbsDTO.java 를 만듦

BbsDAO.java

package net.bbs;

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

import DBPKG.DBOpen;

public class BbsDAO {
	//Data Access Object 데이터 접근 객체
	
	public int insert (BbsDTO dto){
		int cnt=0;
		try{
			Connection con=DBOpen.getConnection();
			StringBuilder sql=new StringBuilder();
			
			sql.append(" INSERT INTO tb_bbs(bbsno, wname, subject, content, passwd, grpno, ip) ");
			sql.append(" VALUES((select nvl(max(bbsno),0)+1 from tb_bbs), ?, ?, ?, ?, (select nvl(max(bbsno),0)+1 from tb_bbs), ?) ");
			
			PreparedStatement pstmt=con.prepareStatement(sql.toString());
			pstmt.setString(1, dto.getWname());
			pstmt.setString(2, dto.getSubject());
			pstmt.setString(3, dto.getContent());
			pstmt.setString(4, dto.getPasswd());
			pstmt.setString(5, dto.getIp());
			
			cnt=pstmt.executeUpdate();
		}catch(Exception e){
			System.out.println("글 게시 실패 : "+e);
		}//try end
		return cnt;
	}//insert end
	
	public ArrayList<BbsDTO> list(){
		ArrayList<BbsDTO> list=null;
		try{
			Connection con=DBOpen.getConnection();
			StringBuilder sql=new StringBuilder();
			
			sql.append(" SELECT bbsno, subject, wname, readcnt, indent, regdt ");
			sql.append(" FROM tb_bbs ");
			sql.append(" ORDER BY grpno, ansnum ASC");
			
			PreparedStatement pstmt=con.prepareStatement(sql.toString());
			ResultSet rs=pstmt.executeQuery();
			if(rs.next()){
				list=new ArrayList<>();
				do{
					BbsDTO dto=new BbsDTO();
					dto.setBbsno(rs.getInt("bbsno"));
					dto.setSubject(rs.getString("subject"));
					dto.setWname(rs.getString("wname"));
					dto.setReadcnt(rs.getInt("readcnt"));
					dto.setIndent(rs.getInt("indent"));
					dto.setRegdt(rs.getString("regdt"));
					list.add(dto);
				}while(rs.next());
			}else{
					list=null;
			}//if end
		}catch(Exception e){
			System.out.println("목록 불러오기 실패 : "+e);
		}//try end
		return list;
	}//list() end
	
}//class end

 

BbsDTO.java

package net.bbs;

public class BbsDTO {
	//Data Transfer Object 데이터 전송객체
	//sql의 테이블 복사해오기 (칼럼명에서 오타날 수 있기 때문)

	//테이블의 칼럼을 기준으로 field를 선언한다
	private int bbsno;	
	private String wname;
	private String subject;
	private String content;
	private String  passwd;
	private int readcnt;
	private String regdt;
	private int grpno;
	private int indent;
	private int ansnum;
	private String ip;
	
	//default constructor	
	public BbsDTO(){}

	//각 field에 접근할 수 있는 getter, setter 함수

	public int getBbsno() {
		return bbsno;
	}

	public void setBbsno(int bbsno) {
		this.bbsno = bbsno;
	}

	public String getWname() {
		return wname;
	}

	public void setWname(String wname) {
		this.wname = wname;
	}

	public String getSubject() {
		return subject;
	}

	public void setSubject(String subject) {
		this.subject = subject;
	}

	public String getContent() {
		return content;
	}

	public void setContent(String content) {
		this.content = content;
	}

	public String getPasswd() {
		return passwd;
	}

	public void setPasswd(String passwd) {
		this.passwd = passwd;
	}

	public int getReadcnt() {
		return readcnt;
	}

	public void setReadcnt(int readcnt) {
		this.readcnt = readcnt;
	}

	public String getRegdt() {
		return regdt;
	}

	public void setRegdt(String regdt) {
		this.regdt = regdt;
	}

	public int getGrpno() {
		return grpno;
	}

	public void setGrpno(int grpno) {
		this.grpno = grpno;
	}

	public int getIndent() {
		return indent;
	}

	public void setIndent(int indent) {
		this.indent = indent;
	}

	public int getAnsnum() {
		return ansnum;
	}

	public void setAnsnum(int ansnum) {
		this.ansnum = ansnum;
	}

	public String getIp() {
		return ip;
	}

	public void setIp(String ip) {
		this.ip = ip;
	}

	
	//부모로부터 물려받은 것을 리폼해서 사용하는 것
	@Override
	public String toString() {
		return "BbsDTO [bbsno=" + bbsno + ", wname=" + wname + ", subject="
				+ subject + ", content=" + content + ", passwd=" + passwd
				+ ", readcnt=" + readcnt + ", regdt=" + regdt + ", grpno="
				+ grpno + ", indent=" + indent + ", ansnum=" + ansnum + ", ip="
				+ ip + "]";
	}
	
	
	
	
	

}//class end

 

  3. '쓰기' 에 해당하는 'bbIns.jsp'를 만듦

    - 글쓰기에 성공하게 되면 게시글이 추가 되었다는 알림이 뜸

bbIns.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>    
<%@ include file="ssi.jsp"%> <!-- 순서가 바뀌어도 상관없지만 공통페이지로 겹칠 때 -->
<%@ include file="../header.jsp"%> 
<!-- 본문시작 bbsIns.jsp-->
<%
	//1) 사용자가 입력한 정보를 변수에 담기
	String wname	=request.getParameter("wname").trim();
	String subject   =request.getParameter("subject").trim();
	String content  =request.getParameter("content").trim();
	String passwd   =request.getParameter("passwd").trim();
	String ip			=request.getRemoteAddr();  //요청PC의 IP 주소
		
	//2) 1)의 내용을 dto 객체에 담기
	dto.setWname(wname);
	dto.setSubject(subject);
	dto.setContent(content);
	dto.setPasswd(passwd);
	dto.setIp(ip);
	
	//3) 2)의 내용을 tb_bbs테이블에 추가하기
	int cnt=dao.insert(dto);
	
	//4) 글쓰기 성공 후 bbsList.jsp로 이동하기
	 if(cnt==0){
		 out.println("<p>글쓰기를 실패했습니다</p>");
		 out.println("<p><a href='javascript:history.back()'>[다시시도]</a></p>");  /* history.back() 뒤로 가겠다는 의미 */
	 }else{
		 out.println("<script>");
		 out.println("		alert('게시글이 추가되었습니다');");
		 out.println("		location.href='bbsList.jsp';"); 
		 out.println("</script>");			 
	 }//if end
	
%>
<!-- 본문끝 -->
<%@ include file="../footer.jsp"%>

 

  4. 쓰기가 성공한 후에는 '목록'에 해당하는 'bbsList.jsp'를 만들어줌

bbsList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="ssi.jsp"%>
<%@ include file="../header.jsp"%>

<!-- 본문시작 bbsList.jsp -->
	<h3>* 게시판 목록 *</h3>
	<p><a href="bbsForm.jsp" class="btn btn-info">글쓰기</a></p>
<div class="container" style="font-size: 18px">	
	<table class="table table-bordered">
	<tr class="active" >
		<th>제목</th>
		<th>작성자</th>
		<th>작성일</th>
		<th>조회수</th>
	</tr>
<%
	ArrayList<BbsDTO> list=dao.list();
	if(list==null){	
		out.println("<tr>");
		out.println("	  <td colspan='4'><strong>관련자료 없음 T.T</strong></td>");
		out.println("</tr>");
	}else{
	for(int idx=0; idx<list.size(); idx++){ 
		dto=list.get(idx);
%>
	<tr>
		<td><%=dto.getSubject() %></td>
		<td><%=dto.getWname() %></td>
		<td><%=dto.getRegdt() %></td>
		<td><%=dto.getReadcnt() %></td>
	</tr>
<%
		}//for end
	}//if end
%>
</table>
</div>
<!-- 본문끝 -->
<%@ include file="../footer.jsp"%>