게시글 작성 페이지
write.php 파일은 index.php에서 '글쓰기'버튼 클릭했을 때 연결되는 게시글 작성 페이지를 생성한다.
write.php의 입력부분을 통해 사용자가 입력한 내용은 form 태그를 통해 write_action.php로 넘겨준다.
게시글 내용을 DB에 저장하는 MySQL 질의문은 write_action.php에서 수행한다.
write.php
<!DOCTYPE html>
<html>
<head>
<meta charset = 'utf-8'>
<script type="text/javascript" src="./js/common.js"></script>
</head>
<style>
<!-- 생략: 아래의 css -->
</style>
<body>
<?php
session_start();
$URL = "./index.php";
if(!isset($_SESSION['userid'])) { ?>
<script>
alert("로그인이 필요합니다");
location.replace("<?php echo $URL?>");
</script>
<?php
} ?>
<header>
<div class="site_name">
<img src=./images/logo.png></div>
<font style="color: #FFB722;">노랑</font>이 제일 좋아
</div>
<div class = account_display>
<?php
echo $_SESSION['userid'];?>님
<font style="cursor:pointer" onClick="location.href='./logout.php'" class = bt>Logout</font>
</div>
</header>
<div id="side_box">
<div class="bt" id="bt1">
<font style="cursor:pointer" onClick="location.href='./index.php'">취소</font>
</div>
</div>
<section>
<form method = "post" action = "write_action.php" enctype='multipart/form-data'>
<div id="menu_title">게시판</div>
<table class="view_table">
<thead>
<tr><td colspan="2" width="1000"> 글쓰기</td></tr>
</thead>
<tbody>
<tr>
<td width="100" height="40" align="center">작성자</td>
<td width="900"><input type="hidden" name="name" value="<?=$_SESSION['userid']?>"><?=$_SESSION['userid']?></td>
</tr>
<tr>
<td width="100" height="40" align="center">제목</td>
<td width="900"><input type ="text" name ="title" class="input_box"></td>
</tr>
<tr vertical-align="top">
<td width="100" align="center" style="vertical-align:top">내용</td>
<td width="900"><textarea name = content id="input_area"></textarea></td>
</tr>
<tr>
<td width="100" height="40" align="center">파일첨부</td>
<td width="900"><input type="file" name="upfile"></td>
</tr>
</tbody>
</table>
<input type = "submit" value="작성" class="bt" id="bt1" style="margin-top:10px">
</form>
</section>
</body>
</html>
(1) 세션 검사
로그인 상태에서만 게시글을 작성할 수 있도록 세션이 있는지 검사한 후,
세션이 없다면 "로그인이 필요합니다" 알림창을 보여주고, 홈화면으로 돌아간다.
| PHP 함수, 변수 |
session start() / isset() / $_SESSION
|
(2) 웹서비스 이름 / 계정정보 출력
(3) 사이드 박스: 취소 버튼
클릭하면 index.php 페이지로 되돌아가는 취소 버튼을 출력한다.
(4) 게시글 입력창 출력
input 태그를 이용해 입력창을 생성한다.
(5) 작성버튼 출력
'작성' 버튼을 클릭하면 form 태그를 이용해 사용자가 작성한 내용을 POST 메소드 방식으로 write_action.php에게 넘겨준다.
CSS
header {
width: 1000px;
height: 45px;
margin-left: 20%;
background-color: #FFF3DD;
padding: 15px 0;
text-align: center;
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
}
.site_name {
display: inline;
vertical-align: middle;
margin-left: 10%;
}
.account_display {
font-size: 16px;
font-weight: normal;
margin-right: 10px;
vertical-align: top;
float: right;
}
img {
object-fit: contain;
vertical-align: middle;
}
.bt{
width: 50px;
height: 25px;
text-align:center;
color: black;
}
.bt:hover{
text-decoration: underline;
}
#bt1 {
margin-left: 10px;
border: 1px solid #BFBFBFBF;
font-size: 15px;
float: right;
background-color: white;
}
#side_box {
width: 1000px;
margin-left: 20%;
background-color: #FFFFFF;
padding: 15px 0;
text-align: center;
font-size: 1.5em;
margin-bottom: 10px;
}
section {
width: 1000px;
height: 100px;
margin-left: 20%
}
#menu_title {
display: block;
width: 900px;
text-align: left;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
}
table {
border-collapse: collapse;
border-spacing: 1px;
line-height: 1.5;
}
thead {
height: 27px;
text-align: center;
background-color: #BB8364;
color: white;
font-weight: bold;
}
tbody {
vertical-align: middle;
font-weight: bold;
}
td{
overflow: auto;
border-top: 2px solid #BB8364;
border-bottom: 2px solid #BB8364;
}
.input_box {
border: 2px solid #bfbfbfbf;
width: 890px;
height: 30px;
display: inline-block;
}
#input_area {
border: 2px solid #bfbfbfbf;
margin-top: 3px;
width: 890px;
height: 200px;
display: inline-block;
}CSS 설명:
2022.01.13 - [project] - [웹게시판] CSS 태그/스타일
[ 참고한 블로그 ]
'project' 카테고리의 다른 글
| [웹게시판] (7) 게시글 보기(view.php) (0) | 2022.01.17 |
|---|---|
| [웹게시판] (6) 게시글 등록(write_action.php) (0) | 2022.01.17 |
| [웹게시판] (4) 게시글 검색(search.php) (0) | 2022.01.17 |
| [웹게시판] (2) 게시글 목록(index.php) (0) | 2022.01.13 |
| [웹게시판] (1) 웹게시판 개요 (0) | 2022.01.13 |