JSP 게시판 만들기 - 구현 (마무리, 테스트)

by 조쉬 posted Sep 12, 2017
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

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 취약점은 문제가 없는 가?

SQL Injection 이란? 

XSS 취약점 이란?

 

다음은 소스와 몇가지 의견을 작성하는 마지막 글을 작성할 것이다.