게시판 실습(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=/board/images/body_bg.gif〉
    
14. 〈img src=/board/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='/board/write.html'〉[글쓰기]〈/a〉〈/p〉
    
59.         〈/td〉
    
60.     〈/tr〉
    
61. 〈/table〉
    
62. 〈/body〉
    
63. 〈/html〉

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

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

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

이상, 동주아빠 손병목이었습니다.