메뉴 건너뛰기

조회 수 17064 추천 수 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>

 

 

 


  1. 페이지 화면 이동방식

  2. No Image 09Jan
    by
    2019/01/09 Views 26161 

    MYSQL JSP insert 폼에서 servlet으로 값넘기기

  3. No Image 09Jan
    by
    2019/01/09 Views 4414 

    MYSQL JSP 연동 &리스트 뽑아오기

  4. jsp 웹 멀티업로드 프로그램

  5. No Image 28Mar
    by
    2018/03/28 Views 5921 

    CentOS(64Bit)에 yum을 이용하여 Apache+Tomcat+JSP 연동

  6. No Image 12Sep
    by
    2017/09/12 Views 5501 

    JSP 게시판 만들기 - 완료 (소스파일, 의견)

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

  8. JSP 게시판 만들기 - 구현 (파라미터, 요청/응답)

  9. JSP 게시판 만들기 - 구현 (Method, Query 기초)

  10. JSP 게시판 만들기 - 구현 (MySQL과의 연동)

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

  12. JSP 게시판 만들기 - 구현 (디렉토리, 파일, 테이블 생성)

  13. JSP 게시판 만들기 - 구현 (웹 프로젝트와 톰켓 연동, 샘플 페이지 작성)

  14. No Image 12Sep
    by
    2017/09/12 Views 4956 

    JSP 게시판 만들기 - 네이밍, 데이터베이스 설계

  15. JSP (Java Server Page), Servlet에 대해

  16. JSP 게시판 만들기 - 시스템 아키텍처

  17. No Image 12Sep
    by
    2017/09/12 Views 6589 

    JSP 게시판 만들기 - 개발표준, 화면설계

  18. No Image 12Sep
    by
    2017/09/12 Views 13385 

    JSP 게시판 만들기 - 구현 (이클립스 웹 프로젝트 생성)

  19. No Image 12Sep
    by
    2017/09/12 Views 4860 

    JSP 게시판 만들기 - 구현 (이클립스 웹 프로젝트 생성)

  20. request, response

Board Pagination Prev 1 2 3 4 Next
/ 4

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved