티스토리 뷰

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

       <tr>
        <th>제목</th>
        <td><input id="search" type="text" name="subject"></td>
       </tr>
       <tr>
        <th>이름</th>
        <td><input id="search" type="text" name="name"></td>
       </tr>

 

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

 

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

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

 

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

<td><input id="search" type="text" name="subject" style="IME-MODE:active;" maxlength="50"></td>

 

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

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

 

그리고 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>&nbsp;<span class="addButton" onClick="window.close();">취소</span></div>
    </div>
    </form>

 

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

 

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

 

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

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

 

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

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

 

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

<form ~생략~ onSubmit='return chkForm(this)'>

 

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

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

 

그런데 여기서 문제는..

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

 

 

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

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

 

<iframe name='action' width="0" height="0" frameborder="0" scrolling='yes'></iframe>

 

 <!-- popup -->
 <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 를 수정해봅시다..

 

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

 

 <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>
   <tr>
    <td>5</td>
    <td>게시판 with CSS, DIV</td>
    <td>1</td>
    <td>2012-10-19</td>
   </tr>
   <tr>
    <td>4</td>
    <td>게시판 with CSS, DIV</td>
    <td>1</td>
    <td>2012-10-19</td>
   </tr>
   <tr>
    <td>3</td>
    <td>게시판 with CSS, DIV</td>
    <td>1</td>
    <td>2012-10-19</td>
   </tr>
   <tr>
    <td>2</td>
    <td>게시판 with CSS, DIV</td>
    <td>1</td>
    <td>2012-10-19</td>
   </tr>
   <tr>
    <td>1</td>
    <td>게시판 with CSS, DIV</td>
    <td>1</td>
    <td>2012-10-19</td>
   </tr>
  </tbody>
 </table>

 

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

 

리스트도 게시판 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');
%>

   <tr>
    <td><%=no-- %></td>
    <td><%=rs.getString("SUBJECT") %></td>
    <td><%=rs.getString("NAME") %></td>
    <td><%=rs.getString("REG_DATE") %></td>
   </tr>
<%
   }
  }
 } catch( Exception e ) {
  out.println( e.toString() );
 }
%>  </tbody>
 </table>
</div>

 

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

<table width="100%" border="0" cellpadding="0" cellspacing="0">
 <tr><td height="40" align="center"><%=Page.paging(totalCount, page_no, page_num, request.getRequestURI(), link) %></td></tr>
</table>

 

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

마지막으로 등록한 날짜가 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>

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

  <li class="search_button" onclick="onSearchSubmit();">검색</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");

 

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

 

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

 

메인 검색에서..

 

 

상세검색에서 검색 기능이 제대로 되시는걸 볼 수 있습니다..

 

 

오랫만에 시간이 되서 올려봤습니다..

2013년도 전반기에는 리뉴얼 프로젝트 때문에.. 후반기에는 조달청 프로젝트 때문에..

2014년도 전반기에는 업그레이드 프로젝트 때문에.. 정신 없이 보낸것 같네요..

 

이번 후반기에도.. 업그레이드 프로젝트가 있는데.. 지금 안할라고 버티고 있습니다;..

일이 너무 많아서 못하겠다고 그만 두겠다고 협박하고 있죠;..

 

그렇게 일주일 협박했더니.. 이번주부터는 조금 시간이 생기기 시작하네요..

저 자르려고 시간 주는걸까요;..

 

오늘의 소스코드입니다..

 

boardcss_list.jsp

boardcss_write_act.jsp

 

다음에는 상세보기, 수정하기, 삭제하기.. 를 할까 했는데..

제가 웹디자이너가 아니다보니.. CSS, DIV에 한계를 느끼네요;..

 

그래서 그냥 CSS, DIV는 이런거다.. 라는 선에서.. 게시판 만들기 4번째를 종료하도록 하겠습니다..

 

상세보기, 수정하기, 삭제하기는 지금까지 게시판 만들기를 해보셨으면.. 간단하게 만드실 수 있을것 같습니다..

 

이상 판다의 게시판 만들기였습니다.. 모르시는 분들은 질문해주시구요..

 

요새 시간이 조금씩 생겨서 블로그를 하고 있지만.. 언제 또 시간을 뺏길지 모르기 때문에..

질문에 대한 답변이 늦어질 수 있음을 양해하여주시길 바랄께요..

 

아.. 다음에는 많은 분들은 아니였지만.. 소수의 분들이 MVC 모델2는 안하시나요.. 하시는데..

잘 될런지는 모르겠지만.. 그걸 해볼까 합니다..

 

공부하시는 많은 분들에게 도움이 되었으면 하네요..