|
|
|
|
|
 |
0 |
|
| View Articles |
|
 |
Name |
| 손병목 |
(2002-10-23 22:37:50, Hit : 37163, Vote : 2126)
|
|
|
| Homepage |
http://www.itmembers.net |
|
| Subject |
게시판 글 목록 보기 기능(1) list.php 화면 디자인 |
|
|
이번 시간부터는 게시판 프로그램의 백미인 글 목록 보기 기능을 구현할 것입니다.
DB에 저장된 데이터를 읽어오기, 읽어 온 데이터를 배열에 저장하여 차례대로 보여주기, 한 페이지에 보여줄 목록의 개수를 설정하여 지정된 개수만큼만 보여주기, 목록이 많을 경우 [이전] [다음] 페이지 바로 가기 기능 등 매우 다양한 기능을 구현해야 합니다.
따라서 글 목록 보기 기능만 제대로 이해해도 게시판의 70~80%는 이해했다고 볼 수 있습니다.
이번 시간에는 기본적인 '글 목록 보기 ' 화면을 디자인해 보겠습니다.
프로그래밍을 하다보면, 디자인부터 하고 프로그램을 입히는 경우도 있고, 때에 따라서는 주요 프로그램을 먼저 작성하고 디자인을 나중에 입히는 경우도 있습니다.
프로젝트의 규모나 프로그램의 성격에 따라서 조금씩 다르니 어느 것이 定道라도 할 수는 없습니다.
여기서는 먼저 디자인부터하고 HTML 코드 사이에 프로그램을 추가하는 방식으로 실습할 예정입니다.
글 목록 보기 화면을 아래와 같이 구성할 예정입니다. (파일 이름은 list.php로 저장합니다.)
손에 익숙한 웹에디터(나모웹에디터, 드림위버, 프론트페이지 등)를 사용하여 디자인한 다음 소스를 베껴오는 것이 가장 쉬운 방법입니다.
아니면 아래와 같이 처음부터 직접 코딩해도 되구요.
아래의 코드를 보면 따옴표(" ")를 하나도 사용하지 않았습니다.
이미 아시다시피 PHP에서 따옴표는 문장의 시작과 끝을 나타내는 기호이기 때문에 매우 조심해서 사용해야 합니다.
HTML 코드에는 따옴표를 생략한다고 해서 오류가 발생하는 것은 아니니, 웹 에디터로 작성한 소스에서 따옴표를 모두 제거해 주시는 게 좋습니다.
아래 코드에서 구분선과 원문자는 나중에 설명의 편의를 위해 구분해 놓은 것이니 입력하지 마세요 ^^
①
②
<html>
<head>
<meta http-equiv=content-type content=text/html; charset=euc-kr>
<title>글목록보기</title>
<STYLE TYPE=text/css>
BODY,TD,SELECT,input,DIV,form,TEXTAREA,center,option,pre,blockquote {font-family:굴림;font-size:9pt;color:#555555;}
A:link {color:black;text-decoration:none;}
A:visited {color:black;text-decoration:none;}
A:active {color:black;text-decoration:none;}
A:hover {color:gray;text-decoration:none;}
</STYLE>
</head>
<body background=./images/body_bg.gif>
<img src=./images/maintitle.gif>
<table border=1 cellspacing=0 width=680 bordercolordark=white bordercolorlight=#999999>
<tr>
<td width=30 bgcolor=#CCCCCC>
<p align=center>no</p>
</td>
<td bgcolor=#CCCCCC width=490>
<p align=center>subject</p>
</td>
<td width=60 bgcolor=#CCCCCC>
<p align=center>name</p>
</td>
<td width=70 bgcolor=#CCCCCC>
<p align=center>date</p>
</td>
<td width=30 bgcolor=#CCCCCC>
<p align=center>hit</p>
</td>
</tr>
③
<tr>
<td width=30>
<p align=center>3</p>
</td>
<td width=490>
<p>연습하기</p>
</td>
<td width=60>
<p align=center>손병목</p>
</td>
<td width=70>
<p align=center>2002/10/10</p>
</td>
<td width=30>
<p align=center>1234</p>
</td>
</tr>
<tr>
<td width=100% colspan=5>
④
<p align=center>[처음][이전] [1][2][3] [다음][마지막]</p>
⑤
</td>
</tr>
<tr>
<td width=100% colspan=5>
<p align=center>[글쓰기]</p>
</td>
</tr>
</table>
</body>
</html>
프로그램을 추가해야할 부분은 ①, ③, ④ 영역입니다.
다음 시간부터는 ①, ③, ④ 영역에 프로그래밍 코드를 추가하여 글 목록 기능을 구현해 보도록 하겠습니다.
오늘은 여기까지만 하겠습니다.
이상, 동주 돌잔치 D-3일, 동주아빠 손병목이었습니다.
|
|
