0
 19   2   1
  View Articles

Name  
   손병목  (2003-03-31 22:52:27, Hit : 28851, Vote : 1955)
Homepage  
   http://www.itmembers.net
Subject  
   게시판 실습(8) - 글 목록 페이지 모양 만들기
이번 시간부터 다룰 내용은 게시판 프로그램에서 가장 복잡하고 어렵다는 리스트 페이지입니다.
데이터베이스에서 글의 제목과 글쓴이, 작성일자 등을 추출해서 한 페이지에 정해진 갯수만큼(보통 10개) 리스트를 출력합니다.
또한 글의 갯수가 많아지면 한 페이지에 모두 보여주지 못하므로 여러 페이지에 나눠서 보여주기 위해 페이지 번호를 출력합니다.
페이지 번호 외에도 [이전] [다음], [처음] [마지막], [10개 이전] [10개 이후] 등 여러 방식으로 목록 페이지를 이동할 수 있는 링크를 만들 것입니다.
글 목록에서 특정 제목을 클릭하면 글 내용을 볼 수 있는 view.jsp를 호출합니다.

대충 이러한 기능들을 가진 list.jsp 를 만들어 보겠습니다.

그러나, 밥도 너무 급하게 먹으면 체하듯이, 아무 것도 없는 상태에서 모든 걸 한꺼번에 만들려면 머리가 깨집니다.(헉~ 너무 과격한 표현을...)
우선 껍데기부터 만들어 봅시다.

아래와 같은 모양이 나오도록 HTML 코딩을 합니다.
평소 즐겨 쓰던 웹 에디터(나모 웹 에디터, 프론트 페이지, 드림위버 등)를 사용하여 만들어 보세요.(설마 웹 에디터의 도움없이 그냥 처음부터 끝까지 HTML 코드를 입력하려고 했던 것은 아니겠죠?)



아래는 어떤 웹 에디터를 사용해서 만든 코드에서 약간 수작업으로 손질 좀 한 겁니다.

  1. 〈html〉
  2. 〈head〉
  3. 〈meta http-equiv=content-type content=text/html; charset=euc-kr〉
  4. 〈title〉JSP 게시판 - 글목록보기〈/title〉
  5. 〈STYLE TYPE=text/css〉
  6. BODY,TD,SELECT,input,DIV,form,TEXTAREA,center,option,pre,i_blockquote {font-family:굴림;font-size:9pt;color:#555555;}
  7. A:link    {color:black;text-decoration:none;}
  8. A:visited {color:black;text-decoration:none;}
  9. A:active  {color:black;text-decoration:none;}
  10. A:hover   {color:gray; text-decoration:none;}
  11. 〈/STYLE〉
  12. 〈/head〉
  13. 〈body background=./images/body_bg.gif〉
  14. 〈img src=./images/maintitle.gif〉
  15. 〈table border=1 cellspacing=0 width=680 bordercolordark=white bordercolorlight=#999999〉
  16.     〈tr〉
  17.         〈td width=30 bgcolor=#CCCCCC〉
  18.             〈p align=center〉no〈/p〉
  19.         〈/td〉
  20.         〈td bgcolor=#CCCCCC width=490〉
  21.             〈p align=center〉subject〈/p〉
  22.         〈/td〉
  23.         〈td width=60 bgcolor=#CCCCCC〉
  24.             〈p align=center〉name〈/p〉
  25.         〈/td〉
  26.         〈td width=70 bgcolor=#CCCCCC〉
  27.             〈p align=center〉date〈/p〉
  28.         〈/td〉
  29.         〈td width=30 bgcolor=#CCCCCC〉
  30.             〈p align=center〉hit〈/p〉
  31.         〈/td〉
  32.     〈/tr〉
  33.     〈tr〉
  34.         〈td width=30〉
  35.             〈p align=center〉1〈/p〉
  36.         〈/td〉
  37.         〈td width=490〉
  38.             여기에 제목 들어감
  39.         〈/td〉
  40.         〈td width=60〉
  41.             〈p align=center〉손병목〈/p〉
  42.         〈/td〉
  43.         〈td width=70〉
  44.             〈p align=center〉2003/03/31〈/p〉
  45.         〈/td〉
  46.         〈td width=30〉
  47.             〈p align=center〉5〈/p〉
  48.         〈/td〉
  49.     〈/tr〉
  50.     〈tr〉
  51.         〈td width=100% colspan=5〉
  52.                 〈p align=center〉
  53.                 [처음] [10개 앞] [이전] [1] [2] [3] [4] [5] 〈b〉〈font color=green〉6〈/font〉〈/b〉 [7] [8] [9] [10] [다음] [10개 뒤] [마지막]
  54.         〈/td〉
  55.     〈/tr〉
  56.     〈tr〉
  57.         〈td width=100% colspan=5〉
  58.             〈p align=center〉〈a href='write.html'〉[글쓰기]〈/a〉〈/p〉
  59.         〈/td〉
  60.     〈/tr〉
  61. 〈/table〉
  62. 〈/body〉
  63. 〈/html〉


다음 시간부터는 껍데기 살을 붙이는 작업을 할 것입니다.
위 코드 사이사이에 JSP 코드를 하나씩 추가하는 과정인데 지레 겁을 먹진 마세요.
모든 것이 그러하듯, 아무 것도 모를 때 두려운 것이지 실제 조금이라도 알고 나면 쉽게 느껴질 것입니다.

감기가 좀체 낫질 않네요.
JSP 코딩은 내일부터 해야겠습니다.

좋은 밤 보내시고~ 내일 다시 만날께요...

이상, 동주아빠 손병목이었습니다.
Prev
   게시판 실습(9) - 글 목록 보기 소스(list.jsp)
손병목
Next
   게시판 실습(7) - include 지시자 사용하여 DB 연결 부분 분리
손병목


Copyright 1999-2025 Zeroboard / skin by Zetyx