티스토리 뷰
<계획표>
게시판 글 삭제 기능 추가
글 눌러서 읽기 기능 추가
게시판 글 수정 기능 추가
게시판 이미지 업로드 기능 추가
1. 게시판 글 삭제 기능 추가
게시판 글 삭제 기능을 만들기 위한 계획을 세워보자
삭제 버튼 생성
해당 no 값을 가지고 delete.php로 이동
no에 해당하는 라인 삭제
게시판 목록에서 바로 글 수정과 삭제가 가능하게 할 것이기 때문에 list.php의 table에 수정, 삭제를 추가해준다.
그리고 게시판 목록을 확인해보면 각 글마다 수정, 삭제 버튼이 추가된 것이 확인된다.
그리고 수정하기와 삭제하기 각각의 버튼에 버튼을 누르면 실행될 페이지를 링크 걸어줬다.
$_GET으로 no값을 넘겨받고 해당하는 라인을 delete 구문으로 삭제해줌
구문이 정상 작동 후 게시판 목록으로 이동한다.
16번 글을 삭제해보자
삭제하기 버튼을 누르자 삭제하겠냐고 확인하는 문구가 뜨고 확인을 눌러주자 16번 글이 삭제가 되었다.
그리고 동그라미친 부분은 수정, 삭제 안내이므로 저 부분을 지워 버튼과 헷갈리지 않게 해준다.
네모 표시된 테이블 부분을 빈 값으로 저장해주자
이렇게 빈 값으로 저장이 되었다.
삭제 버튼이 정상적으로 실행이 되는 것을 확인했으니 이제 제목을 눌러 글 읽기가 되게 구현해보자
2. 글 눌러서 읽기 기능 추가
사실 글 읽기 기능이 지금까지 한 것 중에는 가장 어려웠던 것 같다.
게시판 목록과 같게 생각을 하기에는 해당 글만 불러와야된다는 어려움이 있어서 어떻게 해야될지 계획을 세우는 것부터가 시간이 많이 걸렸다.
그래서 따로 글 읽기 기능을 만들 필요 없이 목록에 제목, 내용 등을 다 뜨게 만들었던 것인데 그렇다보니 가독성도 떨어지고 심지어 사진 올리기 기능을 추가하게 되면 게시판 목록이 엉망이 될 것이라는 생각이 들어 결국 읽기 기능을 추가해야겠다고 생각했다.
그러던 중 게시판 list + 삭제 버튼 = 글 읽기 기능이 되지 않을까 생각이 들었다.
왜냐하면
게시판 list – DB에서 데이터를 가져와서 웹 페이지에서 보여줌
삭제 버튼 – 버튼을 누르면 GET방식으로 해당 no의 글을 DB에서 가져와서 삭제함
그렇다면~!
글 읽기 기능 – 제목을 누르면 GET방식으로 해당 no의 글을 DB에서 가져와서 만들어 놓은 글
읽기 폼에 맞춰서 웹 페이지에서 보여줌..? (list + 삭제 느낌..?)
그래서 이 계획대로 한번 만들어보기로 했다.
<view.php>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="./main.css">
</head>
<body topmargin=0 leftmargin=0>
<center>
<h1>글을 확인해보세요</h1><br>
<table width="580" border=0 cellspacing="2" cellpadding="1">
<tr>
<td width=100 height=20 width="240">
글 번호 :  
</td>
<td td width=100 height=20 width="240">
작성자 :  
</td>
</tr>
<tr>
<td height=20 colspan=4 align=center>
제목 :  
</td>
</tr>
<tr>
<td colspan="4">
내용 :
</td>
</tr>
</table>
<br><br>
<table>
<tr>
<a href=list.php>[목록보기]  </a>
<a href=board.html>[글쓰기]  </a>
<a href=./edit.php?no=<?=$no?>>[수정]  </a>
<a href=./delete.php?no=<?=$no?> onclick="return confirm('삭제하시겠습니까?');">[삭제]  </a>
</tr>
</table>
</center>
</body>
</html>
빠르게 글 읽기 폼을 완성해주었다.
이제 저 칸에 각각 맞는 내용이 들어가면 완성이다. 이제php를 작성해보자
<list.php>
<td width="200"><a href="./view.php?no=<?=$row[0]?>"><?=$row[2]?></a></td>먼저 게시판 목록에서 제목을 누르면 글 읽기가 실행될 수 있도록 설정해준다.
view.php 뒤에 ?no=<?=row[0]?>">를 써서 view.php가 실행되면서 해당 글의 no 값을 가져가도록 한다.
그리고 뒤의 <?=$row[2]?>를 통해 제목 부분에 DB title 부분이 들어가도록 설정!
<view.php>
먼저 DB 접속 페이지 링크를 걸어주고 글 번호를 GET으로 받아오도록 함
그리고 해당 글 no의 내용을 query에 담고 이를 결과 값으로 출력하게 설정해주었다.
작성된 폼 아래 쪽에 값이 들어갈 수 있도록 순서대로 값이 들어가게 해주었다.
그리고 5번 글의 제목을 누르면 글이 뜨지는 않지만 주소를 보면 no=5로 해당 글의 번호가 잘 넘어갔다는 것이 확인됨
그렇다면 문제는 해당 번호의 글을 불러와서 나타내는 부분에서 발생한 것이다.
view.php 소스를 확인해보자
<view.php>
row값이 들어가게 설정해줬는데 row 값이 뭔지 선언을 안해줬다. ㅎㅎ...
그래서 이 부분을 수정해줬다.
row 값에 위에 선언해준 result가 하나의 배열로 들어가게 만들어주고 다시 실행
글의 내용이 각각의 칸에 들어가지 않고 아래 부분에 추가되었다.
이제 이 부분만 수정해주면 될 것 같다.
<table width="580" border=0 cellspacing="2" cellpadding="1">
<?
while($row = mysqli_fetch_row($result))
{
?>
<tr>
<td width=100 height=20 width="240">
글 번호 :<?=$row[0]?>  
</td>
<td td width=100 height=20 width="240">
작성자 :<?=$row[1]?>  
</td>
</tr>
<tr>
<td height=20 colspan=4 align=center>
<?=$row[2]?>  
</td>
</tr>
<tr>
<td colspan="4">
<pre><?=$row[3]?>  </pre>
</td>
</tr>
<?
}
?>
</table>
이렇게 값을 테이블 안에서 각각 적용되게 다시 수정해주었다.
그러자 이렇게 정상적으로 만들어놓은 폼에 값이 추가되었다.
이렇게 글 읽기 기능도 완성되었다.
3. 게시판 글 수정 기능 추가
수정 기능은 내용을 수정해서 DB에 저장한다는 부분에서 글쓰기 기능과 거의 유사할 듯하다.
다만 글 수정 기능에는 기존의 내용이 나타나야한다는 추가 사항이 있다는 점 정도겠지
폼에 기존의 내용이 나타나게 만들고 EDIT 버튼을 누르면 수정된 값이 DB에 저장되게 하자
쉽게 말하면 글쓰기 폼 + 내용 표출 + 변경된 값 DB 저장 이 세가지를 실행시켜주면 글 수정 버튼이 완성될 것이라는게 나의 계획이다.
<edit.php - 수정 버튼을 누르면 나타나게 될 수정 폼>
<?
include "./dbConnect2.php";
$no = $_GET['no'];
$query = "select userId,title,content from store where no=$no";
$result = mysqli_query($mysqli, $query);
?>
먼저 기존의 글을 나타나게 하기 위해 DB 접속 정보를 링크로 걸어준다.
$no = $_GET['no']; //이렇게 GET 방식으로 해당 글의 no를 받아오고 수정에 필요한 닉네임, 제목, 내용을 가져온다.
<form action="./update.php?no=<?=$no?>" method="post">
<?
while($row = mysqli_fetch_row($result))
{
?>
<tr>
<th>닉네임 </th>
<td><input type="text" name="userId" value="<?=$row[0]?>"></td>
</tr>
<tr>
<th>제목</th>
<td><input type="text" name="title" value="<?=$row[1]?>"></td>
</tr>
<tr>
<th>내용</th>
<td><textarea cols="40" rows="10" name="content"><?=$row[2]?></textarea></td>
</tr>
<?
}
?>
</table>
<button type="submit">EDIT</button>
</form>
그리고 edit.php 아래 부분에는 닉네임, 제목, 내용 각각의 칸에 기존의 정보가 알맞게 들어가도록 써준다.
그리고 마지막 버튼을 누르면 update.php가 실행되도록 form action을 설정해주고 버튼은 submit으로 만들어준다.
그리고 글 수정 버튼을 누르자 해당 글의 내용이 알맞게 들어가있는 것이 확인되었다.
그렇다면 이제 update.php의 내용을 작성해 edit 버튼을 누르면 글이 수정되도록 만들어보자
<update.php>
<?php
include "./dbConnect2.php";
if($no=no)
{
$sql = "update store set userId='$userId',title='$title',content='$content' where no=$no";
if($mysqli->query($sql)){
echo "<script>alert('Success'); location.href='list.php';</script>";
}else{
echo "<script>alert('Failed');location.href='list.php';</script>";
}
}
else {
echo "<script>alert('no match');location.href='board.html';</script>";
}
?>
마찬가지로 DB를 연결해주고
글의 no가 해당 글의 no와 같다면 수정해서 입력한 값을 각각의 필드에 저장해주도록 입력했다.
그리고 EDIT 버튼을 눌러 실행시켜보면 success라고 성공 확인 문구가 출력된다.
그런데 글의 목록을 확인해보니 해당 번호의 글 뿐만 아니라 모든 번호의 글의 내용이 일괄 변경된 것이 확인되었다.
심지어 나는 content를 대나무 헬리콥터로 저장했는데 DB에 저장된건 content라는 문구였다.
오류가 발생했으니 먼저 글이 일괄 수정되는 부분을 먼저 확인해보자
다시 update.php로 가보자
<?php
include "./dbConnect2.php";
$no = $_GET['no'];
if($title != nill)
{
문제 해결을 위해 해당 글의 no를 GEt으로 받아오는 구문을 추가해주고
$no=no를 $title != null로 변경해서 제목이 빈 값이 아니면 수정하도록 변경해주었다.
그리고 다시 내용을 수정해보자
맨 아래 줄에 내용이 제대로 수정된 것을 볼 수 있었다.
그런데 내용은 여전히 입력한 내용이야가 아닌 content로 저장이 된다.
이번엔 이를 수정하기 위해 content가 입력되는 부분으로 이동해보자
$sql = "update store set userId='$userId',title='$title',content='content' where no=$no";update.php가 DB에 값을 저장하는 부분을 보니 content='content'로 저장되고 있는 것이 확인되었다. 이를 변수로 만들어주기 위해 $를 붙여 content = '$content'로 변경해주자
그러자 수정한 내용이 정상적으로 나타나는 것을 볼 수 있었다.
이렇게 글 수정 기능의 추가도 완성되었다.
이미지 업로드 기능은 아직 미완성이므로 이번 주 공부는 이렇게 마무리 짓도록 하겠다.
끝~~~
'웹 공부 > 웹 개발 (APM)' 카테고리의 다른 글
| 웹 개발 #게시판 글 읽기, 수정, 삭제 코드 (0) | 2019.06.24 |
|---|---|
| 웹 개발 #게시판 글쓰기, 저장, 목록 코드 (0) | 2019.06.24 |
| 웹 개발 (게시판 목록 만들기, 배경 바둑판 오류 수정, 버튼 submit 오류 수정) (1) | 2019.02.07 |
| 웹 개발 (게시판 글 DB저장, 로그인, 로그아웃 실행) (0) | 2019.02.07 |
| 웹 개발( 회원가입 정보 DB에 저장하기) (3) | 2019.01.17 |
- Total
- Today
- Yesterday