[Web Application-개발] 2023-11-22 웹 어플리케이션 제작 프로젝트 : 게시판 만들기 #9-3
2023. 11. 29. 06:47ㆍProject/Web Application-개발
프로젝트 일지
지난 작업에서 페이징 기능을 구현하여서 게시판의 핵심 기능이 거의 갖춰졌다. 이번 작업에서는 게시판의 CRUD (Create, Read, Update, Delete) 기능을 구현할 예정이다. CRUD 기능은 화면을 나타내는 board_crud.php 페이지와 이를 처리하는 board_proc.php로 이루어져 있다.
CRUD (Create, Read, Update, Delete)
1) board_crud.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type = "text/javascript" src="/js/board.js?ver=1"></script>
<title>CRUD</title>
</head>
<body>
<?php
session_start();
require_once("db.php");
$mode=$_GET['mode'];
$num=$_GET['num'];
// 권한이 필요한 모드(c,u,d)일 경우 세션 ID가 없으면 로그인 페이지로 안내
if(!isset($_SESSION['user_id']) && ($mode == 'c'|| $mode == 'u' || $mode == 'd'))
{
echo "<script>alert('로그인 되어 있지 않습니다. 로그인 페이지로 이동합니다.')</script>";
echo "<script>window.location.replace('http://192.168.74.128:1018/php/login.php')</script>";
exit();
}
else
{?>
<form id="f" method="POST" action="/php/board_proc.php" style="text-align:center;" onsubmit='return check_write();'>
<?php
// 제목 타고 들어옴 mode=r,mode=u
if($mode == 'r' || $mode == 'u')
{
$result=db_select_board("test_board",$num);
$row = mysqli_fetch_array($result);
if($mode == 'r'){?>
<textarea id="title" rows="1" name="title" style="resize:none;width: 50%;font-size: 30px;" readonly><?= $row['title'];?></textarea><br>
<textarea id="content" rows="30" name="content" style="resize:none;width: 50%;font-size: 20px;" readonly><?= $row['content'];?></textarea><br>
<button type = "button" onClick = "location.href = '/php/board.php'"> 목록으로 </button>
<?php
// 작성자와 로그인한 사용자와 같은 경우
if($_SESSION['user_id'] == $row['user_id'])
{?>
<button type = "button" onClick = "location.href = '/php/board_crud.php?mode=u&num=<?= $num ?>'"> 수정 </button>
<button type = "button" onClick = "location.href = '/php/board_crud.php?mode=d&num=<?= $num ?>'"> 삭제 </button>
<?php
}
}
else{?>
<textarea id="title" rows="1" name="title" style="resize:none;width: 50%;font-size: 30px;"><?= $row['title'];?></textarea><br>
<textarea id="content" rows="30" name="content" style="resize:none;width: 50%;font-size: 20px;"><?= $row['content'];?></textarea><br>
<input type = "hidden" name= "mode" value="u">
<input type = "hidden" name= "num" value="<?= $num ?>">
<button type = "button" onClick = "location.href = '/php/board.php'"> 목록으로 </button>
<button type = "button" onClick = "location.href = '/php/board_crud.php?mode=r&num=<?= $num ?>'"> 취소 </button>
<button type = "submit"> 저장 </button>
<?php
}
}
else if($mode == 'c')
{?>
<textarea id="title" rows="1" name="title" placeholder="제목을 입력하세요" style="resize:none;width: 50%;font-size: 30px;"></textarea><br>
<textarea id="content" rows="30" name="content" placeholder="내용을 입력하세요" style="resize:none;width: 50%;font-size: 20px;"></textarea><br>
<input type = "hidden" name= "mode" value="c">
<button type = "button" onClick = "location.href = '/php/board.php'"> 목록으로 </button>
<button type = "submit"> 작성 </button>
<?php
}
else if($mode == 'd')
{
db_delete_board("test_board",$num);
echo "<script>alert('삭제되었습니다.')</script>";
echo "<script>window.location.replace('http://192.168.74.128:1018/php/board.php')</script>";
}
else
{
echo "<script>alert('잘못된 명령입니다.')</script>";
echo "<script>window.location.replace('http://192.168.74.128:1018/php/board.php')</script>";
exit();
}
?></form><?php
}
?>
</body>
</html>
|
cs |
board_crud.php 페이지는 '글작성' 버튼을 누르거나 게시글의 제목을 클릭하면 접근할 수 있다. 해당 페이지는 전달되는 파라미터 중 하나인 $_GET['mode'] 변수 값에 따라 달라진다. $_GET['mode'] 변수로 전달되는 값으론 'c', 'r', 'u', 'd'가 있으며 각각 글작성, 글읽기, 글수정, 글삭제를 담당한다. $_GET['mode'] 변수 값이 'c', 'u', 'd'이면 권한이 필요하므로 $_SESSION['user_id']가 존재하는지 확인한다. 또한 $_GET['mode'] 변수 값이 'c', 'r', 'u', 'd' 외에 다른 값이 오거나 없는 경우에는 페이지 접근을 방지한다.
2) board_proc.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<?php
session_start();
if(!isset($_SESSION['user_id'])) // 로그인 되어있지 않다면 로그인 페이지로 안내
{
echo "<script>alert('로그인 되어 있지 않습니다. 로그인 페이지로 이동합니다.')</script>";
echo "<script>window.location.replace('http://192.168.74.128:1018/php/login.php')</script>";
}
else
{
require_once("db.php");
// 글쓰기 페이지에서 전송된 변수 저장
$post = array(
'id' => $_SESSION['user_id'],
'title' => $_POST['title'],
'content' => $_POST['content'],
'mode' => $_POST['mode'],
'page' => $_POST['num']
);
if($post['mode'] == 'c')
{
db_insert_to_board($post['id'],$post['title'],$post['content']);
echo "<script>alert('글을 성공적으로 작성하였습니다. 게시판 페이지로 이동합니다.')</script>";
echo "<script>window.location.replace('http://192.168.74.128:1018/php/board.php')</script>";
}
else
{
db_update_board("test_board", $post['title'], $post['content'], $post['page']);
echo "<script>alert('글이 성공적으로 변경되었습니다. 게시판 페이지로 이동합니다.')</script>";
echo "<script>window.location.replace('http://192.168.74.128:1018/php/board.php')</script>";
}
}
?>
|
cs |
board_proc.php 페이지는 board_crud.php 페이지에서 전송된 데이터를 처리하는 페이지다. 글작성, 글수정 시 사용된다.
3) $_GET['mode'] == 'r' : 글 읽기
[1] board.php
|
1
2
3
4
5
6
|
<tr align = "center">
<td><?= $row['idx']; ?></td>
<td><a href="http://192.168.74.128:1018/php/board_crud.php?mode=r&num=<?= $row['idx']; ?>"><?= $row['title']; ?></a></td>
<td><?= $row['user_id']; ?></td>
<td><?= $row['reg_date']; ?></td>
</tr>
|
cs |
글 읽기를 하기 위해서는 게시글의 제목을 클릭한다. board.php 페이지에서 게시글을 나열할 때 게시글의 제목 부분에 'http://192.168.74.128:1018/php/board_crud.php?mode=r&num=<?= $row['idx']; ?>;' URL로 이동하는 기능을 부여한다. 이동시 GET 메소드로 mode=r과 해당 게시글의 번호인 num=<?= $row['idx'] ?>을 전달한다.
[2] board_crud.php
- 게시글의 제목을 클릭하고 board_crud.php 페이지로 파라미터들과 함께 이동한다.
- $_GET['mode']는 $mode 변수에, $_GET['num']는 $num 변수에 저장한다.
- $mode == 'r' 이므로 로그인되어있는지 확인하지 않고 바로 else문으로 진입한다.
- else 문으로 진입하게 되면 조건이 "$mode=='r' || $mode=='u'"인 if문으로 진입한다.
- $num의 조건에 맞는 데이터를 조회하여 제목과 내용을 textarea 태그에 입력한다.
- 만약 작성자와 로그인한 사용자가 같은 경우 '수정', '삭제' 버튼을 추가적으로 보여준다.
[3] 작동 화면
- 영상 속 사용자는 'vanhart'이며 처음으로 들어간 게시글은 작성자가 사용자와 다르다.
- 두 번째로 들어간 게시글은 작성자와 사용자가 같은 게시글로 '목록으로' 버튼 외에 '수정', '삭제' 버튼이 추가된다.
4) $_GET['mode'] == 'u' : 글수정
[1] board_crud.php
- 글수정을 하기 위해서는 $mode == 'r'이고 작성자와 로그인 사용자가 같은 경우에 추가되는 버튼인 '수정' 버튼을 클릭해야 가능하다.
- '수정' 버튼 클릭 시 board_crud.php 페이지로 mode=u와 함께 해당 게시글의 번호를 GET 메소드로 전달한다.
- 페이지가 이동되면 $mode='u'에 맞는 조건문으로 진입하게 되고 textarea 태그의 readonly 속성이 제거되어 입력할 수 있는 상태가 된다.
- mode 값과 num 값을 value에 저장하는 type="hidden"인 input 태그를 추가하여 데이터 전송 시 mode 값과 num 값도 전송되도록 한다.
- 또한 '취소' 버튼과 '저장' 버튼이 추가된다. '취소' 버튼은 글 읽기 상태로 돌아가는 버튼이고 '저장' 버튼은 textarea에 입력된 value를 board_proc.php 파일로 전송한다.
[2] board_proc.php
- '저장' 버튼을 클릭하여 board_proc.php 페이지로 데이터 전송 시 변경 내용을 update 하는 쿼리문을 호출한다.
- 호출 후 성공적으로 변경되었다는 팝업창과 함께 board.php 페이지로 안내한다.
[3] 작동 화면
5) $_GET['mode'] == 'd' : 글삭제
[1] board_crud.php
- '삭제' 버튼 클릭 시 board_crud.php 페이지로 mode=d와 함께 해당 게시글의 번호를 GET 메소드로 전달한다.
- $mode == 'd'인 조건문으로 진입하여 delete 쿼리문을 호출한다.
- 삭제되었다는 내용의 팝업창과 함께 board.php 페이지로 안내한다.
[2] 작동 화면
6) $_GET['mode'] == 'c' : 글작성
[1] board.php
- board.php 페이지의 나열된 게시글 아래에 '글쓰기' 버튼을 클릭하면 mode=c 파라미터와 함께 board_crud.php 페이지로 접근한다.
[2] board_crud.php
- $mode == 'c'인 조건문으로 진입하게 되면 textarea 태그에 제목과 내용을 입력할 수 있다.
- mode 값을 value에 저장하는 type="hidden"인 input 태그를 추가하여 데이터 전송 시 mode 값도 전송되도록 한다.
- 또한 '작성 버튼이 추가된다. '작성' 버튼은 textarea에 입력된 value를 board_proc.php 파일로 전송한다.
[3] board_proc.php
- '작성' 버튼을 클릭하여 board_proc.php 페이지로 데이터 전송 시 입력된 제목과 내용을 insert 하는 쿼리문을 호출한다.
- 호출 후 성공적으로 작성되었다는 팝업창과 함께 board.php 페이지로 안내한다.
[4] 작동 화면
'Project > Web Application-개발' 카테고리의 다른 글
| [Web Application-개발] 2024-01-10 웹 어플리케이션 제작 프로젝트 : 게시판 만들기 #9-5 (2) | 2024.01.10 |
|---|---|
| [Web Application-개발] 2023-11-22 웹 어플리케이션 제작 프로젝트 : 게시판 만들기 #9-4 (0) | 2023.11.29 |
| [Web Application-개발] 2023-11-22 웹 어플리케이션 제작 프로젝트 : 게시판 만들기 #9-2 (2) | 2023.11.22 |
| [Web Application-개발] 2023-11-22 웹 어플리케이션 제작 프로젝트 : 게시판 만들기 #9-1 (0) | 2023.11.22 |
| [Web Application-개발] 2023-11-18 웹 어플리케이션 제작 프로젝트 : 마이 페이지 만들기 #8 (0) | 2023.11.18 |