메뉴 건너뛰기

조회 수 6579 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

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 취약점 이란?

 

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



List of Articles
번호 제목 날짜 조회 수
45 jsp에서 멤버변수의 사용 2021.03.25 139
44 패키지 컴파일 방법 2021.03.25 147
43 jsp 소스 맨 위에 붙이는 기본 코드들 2021.03.25 108
42 doc 문서 생성 및 패키지 압축 방법 2021.03.25 94
41 패키지 생성 bat문 2021.03.25 117
40 jsp:include 태그에서 파라미터사용시 오류 2021.03.25 376
39 Get 방식과 Post 방식 2019.01.16 877
38 각종 체크 &우편번호 2019.01.09 957
37 아이디 체크 2019.01.09 895
36 회원가입 2019.01.09 918
35 로그인 & AJAX 비동기 방식으로 처리&암호화&정규표현식 2019.01.09 1247
34 수정 삭제 2019.01.09 1075
33 filter 필터 &한글처리 file 2019.01.09 828
32 메모 상세 & EL file 2019.01.09 824
31 한줄메모 삽입 & AJAX file 2019.01.09 975
30 JDBC&데이터 처리 순서&DB CONN 따로 분리 file 2019.01.09 822
29 태그문자&공백문자&줄바꿈 문자 처리 file 2019.01.09 1027
28 한줄메모 목록 리스트 AJAX file 2019.01.09 928
27 MVC 패턴 & 도서 목록 컨트롤러에서 해당 URL 받아서 처리하기 2019.01.09 1405
26 DBCP 커넥션 풀 file 2019.01.09 905
Board Pagination Prev 1 2 3 4 Next
/ 4

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved