0
 33   4   1
  View Articles

Name  
   손병목  (2002-04-14 02:19:38, Hit : 43394, Vote : 2006)
Homepage  
   http://www.itmembers.net
Subject  
   글 쓰기 입력 폼 만들기(4) write.php 최종 파일
11~13강까지 실습한 내용을 기본으로 하여 글 입력 폼을 보다 예쁘게 꾸며보도록 하겠습니다.

원래는 바로 다음 단계(MySQL 연결)로 진행하려고 했는데, 전 시간에 만든 글 입력 폼이 너무 없어 보이는지라 강좌를 진행하는 강사로서의 자존심이 가만히 있질 않네요.

비록 잡다한 코드가 많기는 하지만, 보기 좋은 떡이 먹기도 좋다고, 먼저 예쁘게 꾸며 보겠습니다. (사실은 DB 연동까지 설명하려니 너무 졸리고 피곤하고... -.-)

일단 다음과 같이 만든 다음
파일 이름은 write.php로 저장합시다.

관련된 이미지 파일과 소스는 자료실에 모두 올려 놓았습니다.

write.php 게시판 미리보기

  1. 스타일 시트를 사용하여 본문에 사용되는 서체를 굴림, 9포인트, 회색으로 설정하였습니다.
  2. 자바스크립트를 사용하여 입력 검사를 합니다. (전 시간에 다룬 내용입니다.)
  3. 글 입력과 목록 보기 명령을 이미지로 처리하였습니다.(아래 121, 122행)
  4. 목록 보기를 누르면 이전 화면으로 돌아가도록 하였습니다.(아래 122행)
  5. 기타 이미지와 테이블을 이용하여 입력 폼을 꾸며보았습니다.


1 : <html>
2 : <head>
3 : <title>PHP 게시판 프로젝트 - 쓰기</title>
4 :
5 : <STYLE TYPE="text/css">
6 : BODY,TD,SELECT,input,DIV,form,TEXTAREA,center,option  {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 :
13 :
14 : <script language="javascript">
15 :
16 : function check_submit() {
17 :         
18 :         if (document.myForm.name.value == "") {
19 :                 alert('이름을 입력하세요');
20 :                 document.myForm.name.focus();
21 :                 return;
22 :                 
23 :         } else if (document.myForm.password.value == "") {
24 :                 alert('비밀번호를 입력해야 글을 수정하거나 삭제할 수 있습니다.');
25 :                 document.myForm.password.focus();
26 :                 return;
27 :                 
28 :         } else if (document.myForm.subject.value == "") {
29 :                 alert('제목을 입력하세요');
30 :                 document.myForm.subject.focus();
31 :                 return;
32 :                 
33 :         } else if (document.myForm.memo.value == "") {
34 :                 alert('내용을 입력하세요');
35 :                 document.myForm.memo.focus();
36 :                 return;
37 :                 
38 :         } else {
39 :                 document.myForm.action = "write_ok.php";
40 :                 document.myForm.submit();
41 :         }
42 :         
43 : }
44 :
45 : </script>
46 :
47 : </head>
48 :
49 : <body bgcolor=white background=./images/body_bg.gif>
50 :
51 : <img src=./images/maintitle.gif>
52 :
53 : <br>
54 :
55 : <form name='myForm' method='post' >
56 :
57 : <table border=0 cellspacing=1 cellpadding=0 width=670>
58 :         <tr>
59 :           <td align=center>
60 :           <font color=green><b>글 쓰기 화면입니다.</b></font>
61 :           </td>
62 :         </tr>
63 : </table>
64 :
65 : <table border=0 bgcolor=#CCCCF><tr><td>
66 :
67 : <table border=0 width=670 cellspacing=0 cellpadding=0 bgcolor=#F0F0F0>
68 :
69 :         <col width=100></col><col width=></col>
70 :
71 :         <tr>
72 :           <td colspan=2>
73 :              <table border=0 cellspacing=0 cellpadding=0 width=100%>
74 :                      <tr>
75 :                         <td width=100 align=right><b>이름 </b></td>
76 :                         <td><input type=text name=name size=20  maxlength=20></td>                        
77 :                         <td width=100 align=right><b>비밀번호 </b></td>
78 :                         <td><input type=password name=password  size=20  maxlength=20></td>
79 :                      </tr>
80 :                         </table>
81 :           </td>
82 :         </tr>
83 :
84 :         <tr><td bgcolor=white height=1 colspan=2></td></tr>
85 :         
86 :         <tr>
87 :           <td align=right><b>전자우편 </b></td>
88 :           <td> <input type=text name=email size=40  maxlength=200> </td>
89 :         </tr>
90 :         
91 :         <tr><td bgcolor=white height=1 colspan=2></td></tr>
92 :
93 :         <tr>
94 :           <td align=right><b>홈페이지 </b></td>
95 :           <td> <input type=text name=homepage size=40  maxlength=200> </td>
96 :         </tr>
97 :
98 :         <tr><td bgcolor=white height=1 colspan=2></td></tr>
99 :
100 :         <tr>
101 :           <td align=right><b>제목 </b></td>
102 :           <td> <input type=text name=subject size=87  maxlength=200> </td>
103 :         </tr>
104 :
105 :         <tr><td bgcolor=white height=1 colspan=2></td></tr>
106 :
107 :         <tr>
108 :           <td align=right><b>내용 </b></td>
109 :           <td valign=top>
110 :           <textarea name=memo cols=85 rows=20></textarea>
111 :           </td>
112 :         </tr>
113 :
114 : </table>
115 :  
116 : <br>
117 :
118 : <table border=0 width=670>
119 : <tr><td>
120 : <center>
121 : <a href="javascript:check_submit();"><img src='./images/write.gif' border=0></a>   
122 : <a href=# onclick=history.back()><img src=./images/list.gif border=0></a>
123 : </center>
124 : </td></tr>
125 : </table>
126 : </td></tr></table>
127 :
128 : </form>
129 :
130 : </body>
131 : </html>

다음 시간부터는 DB 연동 실습을 하겠습니다.

이상, 동주만 보면 기분이 좋아지는 손병목이었습니다.

Prev
   게시판에 사용될 MySQL DB 테이블 만들기

손병목
Next
   글 쓰기 입력 폼 만들기(3) 자바 스크립트를 이용한 입력 검사

손병목


Copyright 1999-2022 Zeroboard / skin by Zetyx