JSP 게시판 만들기 - 구현 (마무리, 테스트)
마무리
기본적인 자바스크립트 및 CSS, HTML 태그에 대해 다듬어 보자. 그리고 내용에 CKEditor를 입힌다.
CSS
게시판의 Width를 맞추기 위함과 버튼 정렬, 열 항목 구분을 위해 간단한 CSS 구현하였다.
<style type="text/css"> * {font-size: 9pt;} /** HTML 전체 폰트를 9pt 로 고정 */ p {width: 600px; text-align: right;} /** p 태그 width 와 우측 고정 (테이블 width 동일) */ table thead tr th {background-color: gray;} /** 열 항목 구분을 위한 회색 배경 */ .btn_align {width: 600px; text-align: right;} /** 하단 버튼의 위치 우측 고정 */ </style>
|
자바스크립트
아래와 같이 페이지 이동, 폼 체크, 메시지창 외에는 다른 스크립트는 없이 간단히 구현하였다.
<script type="text/javascript"> // 페이지 이동 function goUrl(url) { location.href=url; } // 등록 폼 체크 function boardWriteCheck() { var form = document.boardWriteForm; // 제목이 입력이 안되어 있다면 if (form.subject.value == '') { alert('제목을 입력하세요.'); // 제목 INPUT BOX 커서가 이동 form.subject.focus(); return false; } if (form.writer.value == '') { alert('작성자을 입력하세요'); form.writer.focus(); return false; } return true; } // 삭제 체크 function deleteCheck(url) { // 예/아니오 창으로 메시지 창을 띄운다. if (confirm('정말 삭제하시겠어요?')) { location.href=url; } } </script>
|
HTML
// 폼 데이터 전송시 onsubmit 을 이용해 폼 체크를 한다. <form onsubmit="return searchCheck();" ></form> // INPUT TYPE TEXT 태그들은 문자열 제한을 두어 데이터베이스 저장에 오류가 발생하지 않도 // 록 한다. 데이터베이스 캐릭터셋이 UTF-8 이라면 한글 3Byte, 영/특/숫 1Byte Size 임. <input type="text" name="subject" size="80" maxlength="100" />
|
CKEditor
CKEditor는 여기서 참고한다. (http://blog.naver.com/musasin84/60189890399)
// CKEditor js를 상단에 선언 <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> // Editor를 적용할 textarea 를 지정 <textarea name="contents" cols="80" rows="10"></textarea> <script>CKEDITOR.replace('contents');</script>
|
테스트
하나의 시스템을 만들었을 때 테스트 과정은 반드시 필요하다. 이 테스트로 인해 수정/오류사항들을 찾아 대처해 나가야 하기 때문이다. 게시판 만들기의 테스트는 간단할 수 있으나 규모가 큰 시스템의 테스트는 테스트 하나 하나의 시나리오를 문서로 작성하여 검토가 될 만큼 보통 성가신 일이 아니다. 게임도 알바, 베타 테스트를 거쳐 오픈을 하듯이 웹 프로젝트 또한 마찬가지 인 것이다.
테스트 항목 | 확인 |
1. 페이지 네비게이터 기능이 이상 없는 가? |
|
2. 검색 기능이 이상 없는 가? |
|
3. 검색 후 보기 or 수정 or 삭제 후 목록으로 돌아왔을 경우 검색 파라미터가 유지 되는 가? |
|
4. 기본적인 등록, 수정, 삭제 기능은 이상 없는 가? |
|
5. 크로스 브라우징(브라우저 호환성)에 대한 이슈는 없는 가? |
|
6. SQL Injection 취약점은 문제가 없는 가? |
|
7. XSS 취약점은 문제가 없는 가? |
|
다음은 소스와 몇가지 의견을 작성하는 마지막 글을 작성할 것이다.