게시판 글 내용 보기 기능(1) view.php 디자인

글쓴이 /

이번 시간부터는 글 내용 보기 프로그램을 설명합니다.

지난 시간까지 글을 쓰고(write.php, insert.php), 글 목록을 확인하는(list.php)
기능까지 구현했습니다.
이번 시간에는 글 목록에서 해당 글을 클릭했을 때 글
내용을 보여 주는 프로그램(view.php)을 만듭니다.

우선 글 목록 보기에서 글 제목을 클릭했을 때 글 내용을 보여주기 위해서는,
지난 시간까지 실습했던 list.php 소스에서 다음과 같이 한 줄을 수정해야 합니다.

list.php의 73행의 $array[subject]를,

<a href=’view.php?page=$page&number=$array[number]’>$array[subject]</a>
와 같이 수정해야 합니다.

글 제목을 클릭하면, view.php로 이동하면서 현재 목록 보기의 페이지 번호와
해당 글의 글 번호를 가져가게 되는 겁니다.
글 번호는 해당 글을 조회하기 위해
필요한 것이고, 페이지 번호는 글 내용 보기 화면에서 다시 [목록] 버튼을 눌렀을
때 페이지가 속한 목록을 보여주기 위해 가져가는 것입니다.(view.php를 보다가 보면
저절로 이해가 될 겁니다.)

그럼, 이제부터 view.php를 만들어 봅시다.

우선 디자인부터 해야 겠죠.
웹 에디터를 사용하여 다음과 같이 디자인해 봅시다.

그러면 아래와 같은 소스가 만들어지겠죠… 에디터에 따라 조금씩 다르겠지만.

  1. <html>
  2. <head>
  3. <title>PHP 게시판 프로젝트 – 보기</title>
  4. <STYLE TYPE="text/css">
  5. BODY,TD,SELECT,input,DIV,form,TEXTAREA,center,option,pre,blockquote
    {font-family:굴림;font-size:9pt;color:#555555;}
  6. A:link    {color:black;text-decoration:none;}
  7. A:visited {color:black;text-decoration:none;}
  8. A:active  {color:black;text-decoration:none;}
  9. A:hover  {color:gray;text-decoration:none;}
  10. </STYLE>
  11. </head>
  12. <body bgcolor=white background=./images/body_bg.gif>
  13. <img src=./images/maintitle.gif>
  14. <table border=0 cellspacing=1 cellpadding="3" width=670>
  15.         <tr>
  16.           <td align=center>
  17.           <font color=green><b>내용
    보기 화면입니다.</b></font>
  18.           </td>
  19.         </tr>
  20.     <tr>
  21.           <td bgcolor="#EAC3EA">
  22. <table border=0 cellspacing=1 cellpadding=0 width=670 bgcolor="white">
  23.         <tr>
  24.           <td width="100">
  25.             <p
    align="right"><b>이름 &nbsp;</b></p>
  26.  
  27.           </td>
  28.           <td width="400">
  29.                         <p>&nbsp;</p>
  30.           </td>
  31.           <td width="100">
  32.                         <p
    align="right"><b>조회수 &nbsp;</b></p>
  33.           </td>
  34.           <td>
  35.                         <p>&nbsp;</p>
  36.           </td>
  37.         </tr>
  38.                 <tr>
  39.           <td width="100">
  40.                         <p
    align="right"><b>전자우편 &nbsp;</b></p>
  41.           </td>
  42.           <td colspan="3">
  43.                         <p>&nbsp;</p>
  44.           </td>
  45.                 </tr>
  46.                 <tr>
  47.           <td width="100">
  48.                         <p
    align="right"><b>홈페이지 &nbsp;</b></p>
  49.           </td>
  50.           <td colspan="3">
  51.                         <p>&nbsp;</p>
  52.           </td>
  53.                 </tr>
  54.                 <tr>
  55.           <td width="100">
  56.                         <p
    align="right"><b>제목 &nbsp;</b></p>
  57.           </td>
  58.           <td colspan="3">
  59.                         <p>&nbsp;</p>
  60.           </td>
  61.                 </tr>
  62.         <tr>
  63.           <td width="100">
  64.                         <p
    align="right"><b>내용 &nbsp;</b></p>
  65.           </td>
  66.           <td colspan="3">
  67.                         <p>&nbsp;</p>
  68.           </td>
  69.         </tr>
  70. </table>
  71.             <p
    align="center">[목록] &nbsp;[쓰기] &nbsp;[수정] &nbsp;[삭제]</p>
  72.           </td>
  73.     </tr>
  74. </table>
  75. </body>
  76. </html>

다음 시간부터는 위 소스에 실제 프로그램을 입히는 작업을 해보겠습니다.

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

위로 스크롤