메뉴 건너뛰기

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

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

JSP 게시판 만들기 - 구현 (HTML 코딩)

 

화면설계를 참고하여 HTML 코딩을 했다. 이쁘게 하면 좋겠지만 간단하게 <table /> 태그를 이용하여 심플하게 구성했다. 이러한 HTML 코딩은 웹 퍼블리셔가 주로 하게 되는 데 웹 퍼블리셔는 웹표준과 웹 접근성에 맞게 코딩하게 된다.

 

목록 페이지 (boardList.jsp)

 

 

등록 폼 페이지 (boardWriteForm.jsp)

 

 

수정 폼 페이지 (boardModifyForm.jsp)

 

 

상세 조회 페이지 (boardView.jsp)

 

 

 

목록 페이지 HTML 구조

대부분이 아래의 HTML 구조로 작성되었다. (파일첨부)

CSS, SCRIPT, 목록 HTML 구분지어 코딩

 

    <%@ page language="java" contentType="text/html; charset=UTF-8"

            pageEncoding="UTF-8"%>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>

    <title>게시판 목록</title>

    <!-- CSS 영역 -->

    <style type="text/css">

        * {font-size: 9pt;}

        p {width: 600px; text-align: right;}

        table thead tr th {background-color: gray;}

    </style>

    <!-- //CSS 영역 -->

    <!-- 자바스크립트 영역 -->

    <script type="text/javascript">

        function goUrl(url) {

           location.href=url;

        }

    </script>

    <!-- //자바스크립트 영역 -->

    </head>

    <body>

       <!-- 검색 폼 영역 -->

       <form name="searchForm" action="" method="get">

       <p>

           <select name="searchType">

               <option value="ALL">전체검색</option>

               <option value="SUBJECT">제목</option>

               <option value="WRITER">작성자</option>

               <option value="CONTENTS">내용</option>

           </select>

           <input type="text" name="searchText" value="" />

           <input type="submit" value="검색" />

       </p>

       </form>

       <!-- //검색 폼 영역 -->

       <!-- 게시판 목록 영역 -->

       <table border="1" summary="게시판 목록">

           <caption>게시판 목록</caption>

           <colgroup>

               <col width="50" />

               <col width="300" />

               <col width="80" />

               <col width="100" />

               <col width="70" />

           </colgroup>  

           <thead>

               <tr>

                    <th>번호</th>

                    <th>제목</th>

                    <th>작성자</th>

                    <th>등록 일시</th>

                    <th>조회수</th>

               </tr>

           </thead>

           <tbody>

               <tr>

                    <td align="center" colspan="5">등록된 게시물이 없습니다.</td>

               </tr>

               <tr>

                    <td align="center">1</td>

                    <td><a href="boardView.jsp">동해물과 백두산이 마르고 닳도록 하...</a></td>

                    <td align="center">김연석</td>

                    <td align="center">2013.06.24</td>

                    <td align="center">10</td>

               </tr>

           </tbody>

           <tfoot>

               <tr>

                    <td align="center" colspan="5">1</td>

               </tr>

           </tfoot>

       </table>

       <!-- //게시판 목록 영역 -->

       <!-- 버튼 영역 -->

       <p>

           <input type="button" value="목록" onclick="goUrl('boardList.jsp');" />

           <input type="button" value="글쓰기" onclick="goUrl('boardWriteForm.jsp');" />

       </p>

       <!-- //버튼 영역 -->

    </body>

    </html>

 

 

 


List of Articles
번호 제목 날짜 조회 수
21 CentOS(64Bit)에 yum을 이용하여 Apache+Tomcat+JSP 연동 2018.03.28 1232
20 JSP 게시판 만들기 - 완료 (소스파일, 의견) 2017.09.12 2599
19 JSP 게시판 만들기 - 구현 (마무리, 테스트) file 2017.09.12 2567
18 JSP 게시판 만들기 - 구현 (파라미터, 요청/응답) file 2017.09.12 2132
17 JSP 게시판 만들기 - 구현 (Method, Query 기초) file 2017.09.12 2099
16 JSP 게시판 만들기 - 구현 (MySQL과의 연동) file 2017.09.12 8050
» JSP 게시판 만들기 - 구현 (HTML 코딩) file 2017.09.12 5443
14 JSP 게시판 만들기 - 구현 (디렉토리, 파일, 테이블 생성) file 2017.09.12 2742
13 JSP 게시판 만들기 - 구현 (웹 프로젝트와 톰켓 연동, 샘플 페이지 작성) file 2017.09.12 2073
12 JSP 게시판 만들기 - 네이밍, 데이터베이스 설계 file 2017.09.12 2149
11 JSP (Java Server Page), Servlet에 대해 file 2017.09.12 2003
10 JSP 게시판 만들기 - 시스템 아키텍처 file 2017.09.12 1957
9 JSP 게시판 만들기 - 개발표준, 화면설계 file 2017.09.12 2426
8 JSP 게시판 만들기 - 구현 (이클립스 웹 프로젝트 생성) file 2017.09.12 4943
7 JSP 게시판 만들기 - 구현 (이클립스 웹 프로젝트 생성) file 2017.09.12 2072
6 request, response file 2017.09.11 1211
5 주석(comments) file 2017.09.11 1132
4 지시자(Directive) file 2017.09.11 1145
3 스크립틀릿(Scriptlet), 선언(declaration), 표현식(expression) file 2017.09.11 1425
2 JSP 동작 원리, 내부 객체 file 2017.09.11 1500
Board Pagination Prev 1 2 Next
/ 2

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved