[JSP] 게시판 만들기 with CSS, DIV 4

공부 이야기

[JSP] 게시판 만들기 with CSS, DIV 4

판다(panda) 2014. 7. 30. 00:00

마지막으로 올린게.. 2012년 11월이네요.. 3달만 있으면 2년만에 쓰는 글이 될뻔했습니다..

거의 2년만에 쓰는 글이라..

제가 소스 올려놓은 웹사이트 아이디랑 비밀번호도 까먹어서;.. 한참동안 로그인하려고 별짓 다해봤네요;..

다행스럽게도.. 아이디랑 비밀번호가 생각나서 접속을 했는데..

제가 어디서 부터 뭘 해야할지.. 다 까먹어서;;.. 다시 할 수도 없는 노릇이고;..

기억을 더듬어서 다시한번 진행해 보겠습니다..

3번째 글이 등록 페이지 까지 만든거였으니까.. 등록을 완료 시켜보죠..

사실 CSS, DIV 때문에 만드는 게시판이기 때문에.. 등록 부분은 빼고 해도 되긴합니다..

등록 부분에서 CSS, DIV를 쓰는건 아니니까요..

그래도 연습이라는게.. 안다고 해서 자꾸 빼먹다보면.. 잊어버리니까.. 해보겠습니다..

저도 다른 일 때문에.. 코딩 안한지 2달은 된것 같네요;..

프로그래머가 코딩을 안하고 2달동안 문서작업을 한다는게.. 이게 말이됩니까!..

공부에 도움 안되는 잡소리는 집어치우고;.. 시작해보죠..

지난 번에 올린 소스를 보니..

이 두 부분이 빠졌더군요.. 이게 없으면.. 아무리 값을 넘겨도 저장이 안되니까.. 추가해주시구요..

기본 옵션으로 한글로 입력되도록 추가해줬습니다.. 입력 자리수는 50자리까지 되도록 했구요..

style="IME-MODE:active;" maxlength="50"

추가하면 이렇게 되겠죠..

꼭 필요한 부분은 아니니 참고하시고..

검색하시면 나오는 부분들이니 검색해서 뭐가 있나 보기만 하시면 될것같습니다..

그리고 form 을 만들어서 해당 값을 넘겨줘야겠죠..

    <form name="inputForm" method="post" target="action" action="/boardCSS/boardcss_write_act.jsp">
    <div class="write_table" >
     <table summary="">

          ~ 생략 ~
     </table>
     <div class="popup_btn_sec"><a onClick="chkForm();"><span class="addButton">등록</span></a> <span class="addButton" onClick="window.close();">취소</span></div>
    </div>
    </form>

또 해당 값들이 입력이 되었는지 확인할 기능을 넣기 위해 chkForm() 을 만들어보겠습니다..

<SCRIPT LANGUAGE="JavaScript">
function chkForm()
{
alert("등록 눌렀다");
return false;
}
</script>

우선 간단하게 만들어서 이상유무를 확인하는게 좋습니다..

이것저것 붙여서 만들었는데.. 막상 눌러서 안되면.. 그것만큼 짜증나는게 없거든요..

뭐 이부분은 게시판만들기 1,2,3 에도 다 있는 부분이라고 생각됩니다만..

그래도 나는 여기서 보길 원한다 하시면 더보기를 눌러주세요..

subit 할때 체크를 할 수 있게 넣을수도 있습니다..

이렇게 코딩을 하고.. 값을 입력하고.. 등록을 누르면.. 당연히 에러가 나겠죠..

우리는 아직 boardcss_write_act.jsp 파일을 안만들었으니까요..

그런데 여기서 문제는..

등록을 눌렀을때.. 창이 하나 더 열린다는것이죠..

다른 창이 안열리게 하기 위해서.. iframe 을 사용합니다..

이거 제가 얼핏 듣기로는 권장하지 않는 소스 중에 하나라고 하더군요;..

<div id="all_popup5">

팝업 상단 부분에 아이프레임을 추가해주고.. boardcss_write_act.jsp 을 만들어서 해당 페이지와 연결해줍니다..

boardcss_write_act.jsp 은 기존 게시판에서 했던 부분과 동일하기 때문에.. 테이블도 따로 안만들었습니다;..

3번째 게시판 만들기에서 썼던 시퀀스, 테이블을 그대로 가져다가 쓰겠습니다;..

내용도 똑같습니다;..

다른 부분이 있다면.. 게시판 3번째는 해당 페이지에서 글을 쓰기 때문에.. 해당 페이지를 새로고침해줬는데..

out.println("<SCRIPT>parent.location.href='/newboard/newboard_list.jsp';</SCRIPT>");

4번째 게시판은 팝업창에서 등록하기 때문에 이 방식을 사용하면.. 해당 팝업창에 리스트페이지가 나오게 됩니다..

글 등록 메세지와 함께.. 이전에 열렸던 페이지를 새로고침해주고.. 해당 팝업창을 닫는 코드를 만들어 줍니다..

out.println("<SCRIPT>alert(\"게시판에 글을 등록하였습니다. \");</script>");
out.println("<SCRIPT>parent.opener.location.href='/boardCSS/boardcss_list.jsp';</SCRIPT>");
out.println("<SCRIPT>parent.close();</SCRIPT>");

해당 부분만 살짝 바꿔준 후에 저장을 하면 끝..

그럼 전에 만들어 뒀던.. boardcss_list.jsp 를 수정해봅시다..

기존에 하드코딩으로 게시판 목록을 꾸몄는데요.. 이부분이죠..

기존에 만들어뒀던 테이블이 있으니까.. 해당 데이터를 연결해서 화면에 보여주도록 해보겠습니다..

리스트도 게시판 3번째 리스트에 있는 내용을 가져다가 썼습니다.. 리스트 보여주는 부분의 쿼리는 똑같으니까요;..

위에 커넥션 부분 추가하고..

<%!
Connection DB_Connection() throws ClassNotFoundException, SQLException, Exception
{
  String url = "jdbc:oracle:thin:@xxx.xxx.xxx.xxx:1521:ORA2012";
  String username = "study";
  String userpass = "study";
  Class.forName("oracle.jdbc.driver.OracleDriver");
  Connection conn = DriverManager.getConnection(url, username, userpass);
  return conn;
}
%>

<%
Connection conn = DB_Connection();
Statement stmt = null;
ResultSet rs = null;
StringBuffer query = null;
StringBuffer where = null;

String totalCount = "";
String link = "";
String view_link = "";

String page_num = Page.nullToBlank(request.getParameter("page_num"));
String pages = Page.nullToBlank(request.getParameter("pages"));

String search_key = Page.nullToBlank(request.getParameter("search_key"));
String search_value = Page.nullToBlank(request.getParameter("search_value"));
String s_subject = Page.nullToBlank(request.getParameter("s_subject"));
String s_name = Page.nullToBlank(request.getParameter("s_name"));

if (!pages.equals("")) link += "&pages="+pages;
if (!page_num.equals("")) {
  link += "&page_num="+page_num;
  view_link += "&page_num="+page_num;
}
if (!search_key.equals("")) {
  link += "&search_key="+search_key;
  view_link += "&search_key="+search_key;
}
if (!search_value.equals("")) {
  link += "&search_value="+search_value;
  view_link += "&search_value="+search_value;
}

int page_no = 5;
%>

위에 해당 부분에 쿼리를 추가합니다..

<div class="boardcss_list_table">
<table class="list_table">
  <caption>판다의 이상한 게시판</caption>
  <colgroup>
   <col width="15%" />
   <col width="45%" />
   <col width="20%" />
   <col width="20%" />
  </colgroup>
  <thead>
   <tr>
    <th>번호</th>
    <th>제목</th>
    <th>이름</th>
    <th>등록일자</th>
   </tr>
  </thead>
  <tbody>
<%
try {
  stmt = conn.createStatement();
  query = new StringBuffer();
  where = new StringBuffer();

String search_key_col = "";
String contentsView = "";

  query.setLength(0);
  query.append("SELECT COUNT(SEQ) TOTAL FROM NEWBOARD \n")
    .append("WHERE SEQ IS NOT NULL \n");
  query.append(where);
  rs = stmt.executeQuery(query.toString());
  if (rs.next()) {
   totalCount = rs.getString("TOTAL");
  }
  rs.close();

  if (totalCount.equals("0")) {
%>
   <tr>
    <td colspan="4">등록된 글이 없습니다</td>
   </tr>
<%
  } else {
   query.setLength(0);
   query.append("SELECT SEQ, NAME, SUBJECT, CONTENTS, REG_DATE, RNUM \n")
     .append("FROM ( \n")
     .append(" SELECT SEQ, NAME, SUBJECT, CONTENTS, REG_DATE, ROWNUM RNUM \n")
     .append(" FROM ( \n")
     .append("  SELECT SEQ, NAME, SUBJECT, CONTENTS, TO_CHAR(REG_DATE, 'YYYY-MM-DD') REG_DATE \n")
     .append("  FROM NEWBOARD \n")
     .append("  WHERE SEQ IS NOT NULL \n");
   query.append(where);
   query.append("  ORDER BY SEQ DESC \n")
     .append(" ) ) \n")
     .append("WHERE RNUM BETWEEN "+Page.pagingStatus(totalCount, page_no, page_num, "f_article")+" AND "+Page.pagingStatus(totalCount, page_no, page_num, "e_article")+" \n");
   rs = stmt.executeQuery(query.toString());

   if (page_num.equals("")) page_num = "1";
   int pageNo = Page.strToInt(page_num, 1);
   int tno = Page.strToInt(totalCount, 1);
   int no = (tno-(pageNo-1)*page_no);

   for (int i = 0; rs.next(); i++) {
    StringBuffer buf = new StringBuffer();
    Reader input = rs.getCharacterStream(4);
    char[] buffer = new char[1024];
    int byteReader;
    while((byteReader = input.read(buffer,0,1024))!=-1) {
     buf.append(buffer,0,byteReader);
    }
   contentsView = Page.b_html(buf.toString(),'A');
%>

그리고 마찬가지로 게시판 3번째 만들기에서 사용했던.. 페이지 넘기는 부분도 추가해줍니다..

기존의 코딩을 그대로 사용하다보니.. 순식간에 게시판 하나가 만들어졌네요..

마지막으로 등록한 날짜가 2012년 3월이네요;..

게시판 리스트에서 보여주는 부분은 다 된것 같습니다..

검색기능도 기존에 있는 부분을 그대로 이용하거나 추가를 해줄껀데요..

게시판 3번째 만들기에만 들어있는 검색기능 때문에 필요없는 부분들이 보이네요..

String search_key = Page.nullToBlank(request.getParameter("search_key"));
String search_value = Page.nullToBlank(request.getParameter("search_value"));

이 부분은 안쓰니까 해당 부분을 찾아서 일괄 삭제해주시면 되겠습니다..

기존에 코딩했던 부분은 s_subject 가 아니라 search_subject 라고 되어있네요..

s_subject 찾아서 일괄변경해주시면 될것 같습니다..

우선 메인 제목 검색을 search_subject 로.. 상세 검색을 search_subject_detail 로 만들었고..

서치 모드에 따라서 해당 검색을 참고하도록 search_mode 도 만들어 줬습니다..

String search_mode = TUtil.EregHtml(TUtil.nullToBlank(request.getParameter("search_mode")));
String search_subject = Page.nullToBlank(request.getParameter("search_subject"));

String search_subject_detail = TUtil.EregHtml(TUtil.nullToBlank(request.getParameter("search_subject_detail")));
String search_name_detail = TUtil.EregHtml(TUtil.nullToBlank(request.getParameter("search_name_detail")));

String search__start_date = TUtil.EregHtml(TUtil.nullTobaseStr( request.getParameter("search__start_date"),""));
String search__end_date = TUtil.EregHtml(TUtil.nullTobaseStr( request.getParameter("search__end_date"),""));

모드 값이 디테일일때 상세 검색에 있는 search_subject_detail 을 search_subject 가지고 오게 했습니다..

if(search_mode.equals("detail")) search_subject = search_subject_detail;

if(!search_subject.equals("")) link += "&search_subject="+search_subject;
if(!search_name_detail.equals("")) link += "&search_name_detail="+search_name_detail;
if(!search__start_date.equals("")) link += "&search__start_date="+search__start_date;
if(!search__end_date.equals("")) link += "&search__end_date="+search__end_date;

검색이 되도록 검색 기능을 추가해줬습니다..

function onSearchSubmit(){
if(document.getElementById('boardcss_list_search').style.display == 'none') frmsearch.search_mode.value = 'detail';
else frmsearch.search_mode.value = 'main';
frmsearch.action = '<%=request.getRequestURI() %>';
frmsearch.taeget = '_self';
frmsearch.submit();
}

검색 폼 값을 만들어 주고..

<form name="frmsearch" method="post" action="<%=request.getRequestURI() %>" onSubmit="return onSearchSubmit();">
<input type="hidden" name="pages" value="<%=pages %>">
<input type="hidden" name="search_mode">

해당 항목에 맞춰서 값을 넣어줍니다..

<li><input id="search" type="text" name="search_subject" value="<%=search_subject %>" style="IME-MODE:active;" /></li>

검색 버튼에 아까 만들어둔 검색 기능을 추가해줍니다..

마지막으로 해당 값들이 있을때 쿼리 조건을 추가합니다..

  if (!search_subject.equals("")) where.append(" AND SUBJECT LIKE '%"+search_subject+"%' \n");
  if (!search_name_detail.equals("")) where.append(" AND NAME = '"+search_name_detail+"' \n");
  if (!search__start_date.equals("") && !search__end_date.equals("")) where.append(" AND TO_CHAR(REG_DATE,'YYYYMMDD') BETWEEN REPLACE('"+search__start_date+"','-','') AND REPLACE('"+search__end_date+"','-','') \n");
  else if (!search__start_date.equals("")) where.append(" AND TO_CHAR(REG_DATE,'YYYYMMDD') = REPLACE('"+search__start_date+"','-','') \n");
  else if (!search__end_date.equals("")) where.append(" AND TO_CHAR(REG_DATE,'YYYYMMDD') = REPLACE('"+search__end_date+"','-','') \n");

전체 소스는 아래 올려드를 파일을 참고 하세요..

이렇게 코딩을 완성하면..

메인 검색에서..