메뉴 건너뛰기

조회 수 6632 추천 수 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
번호 제목 날짜 조회 수
25 페이지 화면 이동방식 file 2019.01.09 924
24 MYSQL JSP insert 폼에서 servlet으로 값넘기기 2019.01.09 26217
23 MYSQL JSP 연동 &리스트 뽑아오기 2019.01.09 4482
22 jsp 웹 멀티업로드 프로그램 file 2019.01.08 1274
21 CentOS(64Bit)에 yum을 이용하여 Apache+Tomcat+JSP 연동 2018.03.28 5977
20 JSP 게시판 만들기 - 완료 (소스파일, 의견) 2017.09.12 5560
» JSP 게시판 만들기 - 구현 (마무리, 테스트) file 2017.09.12 6632
18 JSP 게시판 만들기 - 구현 (파라미터, 요청/응답) file 2017.09.12 4849
17 JSP 게시판 만들기 - 구현 (Method, Query 기초) file 2017.09.12 30692
16 JSP 게시판 만들기 - 구현 (MySQL과의 연동) file 2017.09.12 37939
15 JSP 게시판 만들기 - 구현 (HTML 코딩) file 2017.09.12 17134
14 JSP 게시판 만들기 - 구현 (디렉토리, 파일, 테이블 생성) file 2017.09.12 7967
13 JSP 게시판 만들기 - 구현 (웹 프로젝트와 톰켓 연동, 샘플 페이지 작성) file 2017.09.12 5232
12 JSP 게시판 만들기 - 네이밍, 데이터베이스 설계 file 2017.09.12 5036
11 JSP (Java Server Page), Servlet에 대해 file 2017.09.12 6760
10 JSP 게시판 만들기 - 시스템 아키텍처 file 2017.09.12 4828
9 JSP 게시판 만들기 - 개발표준, 화면설계 file 2017.09.12 6657
8 JSP 게시판 만들기 - 구현 (이클립스 웹 프로젝트 생성) file 2017.09.12 13481
7 JSP 게시판 만들기 - 구현 (이클립스 웹 프로젝트 생성) file 2017.09.12 5055
6 request, response file 2017.09.12 3536
Board Pagination Prev 1 2 3 4 Next
/ 4

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved