··조회 56,515
글 쓰기 입력 폼 만들기(4) write.php 최종 파일
11～13강까지 실습한 내용을 기본으로 하여 글 입력 폼을 보다 예쁘게 꾸며보도록 하겠습니다.원래는 바로 다음 단계(MySQL 연결)로 진행하려고 했는데, 전 시간에 만든 글 입력 폼이 너무 없어 보이는지라 강좌를 진행하는 강사로서의 자존심이 가만히 있질 않네요.
비록 잡다한 코드가 많기는 하지만, 보기 좋은 떡이 먹기도 좋다고, 먼저 예쁘게 꾸며 보겠습니다. (사실은 DB 연동까지 설명하려니 너무 졸리고 피곤하고... -.-)
일단 다음과 같이 만든 다음
파일 이름은 write.php로 저장합시다.
관련된 이미지 파일과 소스는 자료실에 모두 올려 놓았습니다.
- 스타일 시트를 사용하여 본문에 사용되는 서체를 굴림, 9포인트, 회색으로 설정하였습니다.
- 자바스크립트를 사용하여 입력 검사를 합니다. (전 시간에 다룬 내용입니다.)
- 글 입력과 목록 보기 명령을 이미지로 처리하였습니다.(아래 121, 122행)
- 목록 보기를 누르면 이전 화면으로 돌아가도록 하였습니다.(아래 122행)
- 기타 이미지와 테이블을 이용하여 입력 폼을 꾸며보았습니다.
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=/board/images/body_bg.gif>
50 :
51 : <img src=/board/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='/board/images/write.gif' border=0></a>
122 : <a href=# onclick=history.back()><img src=/board/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 연동 실습을 하겠습니다.
이상, 동주만 보면 기분이 좋아지는 손병목이었습니다.
