게시글을 저장하기 위한 board 테이블이다.
[write.php]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../css/board.css" />
<script src="blank.js"></script>
<title>게시글 작성</title>
</head>
<body>
<?php
session_start();
if (!isset($_SESSION['name'])) {
echo "<script>
alert(\"로그인이 필요합니다.\");
location.href = \"../main/login.php\";
</script>";
exit;
} else { ?>
<div id="board_wrap" class="wrap">
<form method="post" action="write_proc.php" onsubmit="return ch_blank()">
<table style="padding-top:50px" align=center width=auto border=0 cellpadding=2>
<tr>
<td>
<p><b>게시글 작성</b></p>
</td>
</tr>
<tr>
<td>
<table class="table2">
<tr>
<td>작성자</td>
<td><input type="hidden" name="name" value="<?= $_SESSION['name'] ?>"><?= $_SESSION['name'] ?></td>
</tr>
<tr>
<td>제목</td>
<td><input type="text" name="title" id="title" placeholder="제목" maxlength=20></td>
</tr>
<tr>
<td>내용</td>
<td><textarea name="content" id="content"></textarea></td>
</tr>
</table>
<input type="hidden" name="id" value="<?= $_SESSION['id'] ?>">
<p><input type="submit" value="업로드" class="form_btn"></p>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
<?php
}
?>
[blank.js]
게시글 작성 혹은 수정 시 제목이나 내용이 공백이라면 처리가 되지 않도록 하는 스크립트 함수다.
function ch_blank() {
const title = document.getElementById("title");
const content = document.getElementById("content");
if (title.value == "") {
alert("제목을 입력하세요.");
title.focus();
return false;
}
if (content.value == "") {
alert("내용을 입력하세요.");
content.focus();
return false;
}
return true;
}
세션 변수($_SESSION['name'])로 로그인 상태를 확인하여 로그인되지 않았다면 로그인 페이지로 이동시키고, 로그인이 되어있는 상태라면 글 작성 페이지가 나타난다.
또한 업로드 전에 공백 처리를 먼저 하기 위해 <head>태그 안에 <script src="blank.js"></script>를 작성하여 공백 여부를 확인하는 파일을 include 시킨다.
<form> 태그 속성에 onsubmit="return ch_blank()"을 추가하여 제목이나 내용이 공백일 경우 게시글 업로드가 안되도록 설정했다. 업로드 버튼을 클릭하면 ch_blank() 함수로 이동하여 공백을 확인한다. ch_blank()의 return 값이 true이면 폼태그 안에 내용이 write_proc.php로 전달되고, false이면 전달되지 않는다.
[board.css]
/* style.css */
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #000;
}
/* body를 가운데 정렬하기 위해 html에 flex를 주었습니다. */
html {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
body {
width: 100%;
margin: 0 auto;
text-align: center;
background: linear-gradient(black, gray);
font-family: sans-serif;
}
.wrap {
/* 하얀 상자 */
width: 1200px;
height: 650px;
margin: 0 auto;
background-color: #fff;
border-radius: 20px; /* 상자 둥근 정도 */
display: flex;
justify-content: center;
align-items: center;
}
table.table2 {
border-collapse: separate;
border-spacing: 1px;
text-align: left;
line-height: 1.5;
border-top: 1px solid #ccc;
margin: 20px 10px;
}
table.table2 tr {
width: 50px;
padding: 10px;
font-weight: bold;
/* vertical-align: top; */
border-bottom: 1px solid #ccc;
}
table.table2 td {
width: 80px;
padding: 10px;
/* vertical-align: top; */
border-bottom: 1px solid #ccc;
}
table td {
height: 35;
float: center;
}
table p {
font-size: 30px;
text-align: center;
color: black;
margin-top: 15px;
margin-bottom: 10px;
}
table .table2 input {
border: 1px solid gray;
width: 400px;
height: 35px;
margin: 5px;
padding-left: 10px;
border-radius: 5px;
box-sizing: border-box;
font-size: 16px;
}
table .table2 textarea {
border: 1px solid gray;
width: 400px;
height: 200px;
margin: 5px;
padding-left: 10px;
border-radius: 5px;
box-sizing: border-box;
font-size: 16px;
}
.wrap .form_btn {
width: 70px;
height: 40px;
margin: 5px;
border-radius: 5px;
border: 0;
background: black;
color: #fff;
font-weight: bold;
font-size: 15px;
cursor: pointer;
float: right;
}
게시글 작성 화면
[write_proc.php]
게시글을 db에 업로드하는 코드
<?php
include "../db_conn.php";
$name = $_POST['name'];
$title = $_POST['title'];
$content = $_POST['content'];
$id = $_POST['id'];
$sql = "insert into board values(null,'$name', '$id', '$title', '$content', now())";
$result = mysqli_query($db_conn, $sql);
if ($result) {?>
<script>
alert("게시글이 등록되었습니다.");
location.href = "../index.php";
</script>
<?php
} else {?>
echo $row;
echo "게시글 등록에 실패하였습니다.";
<?php
}
mysqli_close($db_conn);
?>
'웹 모의해킹 스터디 > 웹 개발 (PHP | MySQL)' 카테고리의 다른 글
| [php/mysql] 게시판 글 수정 구현하기 (0) | 2023.11.24 |
|---|---|
| [php/mysql] 게시판 글 읽기 구현하기 (1) | 2023.11.24 |
| [php/mysql] 게시판 리스트 구현하기 (메인 페이지) (0) | 2023.11.21 |
| [php / mysql] 세션(session)을 이용한 로그인 / 로그아웃 구현 (0) | 2023.11.17 |
| [3주차] [php / mysql] 4가지 로그인 과정 구현 (0) | 2023.11.15 |
