미리보기
📦company
┣ 📜index.php
┣ 📜memberAdd.php
┣ 📜memberDel.php
┣ 📜memberDelAll.php
┣ 📜memberEdit.php
┣ 📜memberList.php
┗ 📜sqlLib.php
index.php
<body>
<!-- 멤버 리스트를 DB에서 가져옴 -->
<? include "memberList.php" ?>
<!-- 멤버 리스트 작성폼 -->
<h2 class="mb-5 mt-5">-입력폼-</h2>
<form action="memberAdd.php" method="post" class="mt-5">
<table class="table" border="1">
<tr>
<td>
이름
</td>
<td>
나이
</td>
<td>
이메일
</td>
<td>
한마디
</td>
</tr>
<tr>
<td>
<input placeholder="이름" type="text" name="name"></input>
</td>
<td>
<input placeholder="나이" type="text" name="age"></input>
</td>
<td>
<input placeholder="이메일" type="text" name="email"></input>
</td>
<td>
<input placeholder="한마디" type="text" name="word"></input>
</td>
</tr>
</table>
<button type="submit" class="btn btn-primary text-right">제출하기</button>
<button type="button" class="btn btn-danger text-right" onclick="confirmDelete()">전체삭제</button>
</form>
- 기본 입력폼 형태와 테이블 리스트를 불러옵니다.
- 테이블과 버튼들을 연결해줍니다.
Create
<?
include "sqlLib.php";
$name = $_POST['name'];
$age = $_POST['age'];
$email = $_POST['email'];
$word = $_POST['word'];
// MySQL 쿼리를 안전하게 만드는 데 중요한 역할
$name = mysqli_real_escape_string($connect, $name);
$age = mysqli_real_escape_string($connect, $age);
$email = mysqli_real_escape_string($connect, $email);
$word = mysqli_real_escape_string($connect, $word);
$query = "insert into member(name,age,email,word) values('$name','$age','$email','$word')";
mysqli_query($connect, $query);
?>
<script>
location.href = 'index.php';
</script>
- index.php에서 받아온 데이터들을 해당 테이블에 삽입 시켜줍니다.
Read
<?
include "sqlLib.php";
$query = "select * from member";
$result = mysqli_query($connect, $query);
?>
<h2 class="mb-3">-멤버 리스트-</h2>
<div class="p-3"></div>
<table class="table" border="1" >
<thead>
<tr >
<td>NO.</td>
<td>이름</td>
<td>나이</td>
<td>이메일</td>
<td>한마디</td>
<td>삭제</td>
<td>수정</td>
</tr>
</thead>
<?
while ($a = mysqli_fetch_assoc($result)) {
$id = $a['id'];
$name = $a['name'];
$age = $a['age'];
$email = $a['email'];
$word = $a['word'];
?>
<tr>
<td><?= $id ?></td>
<td><?= $name ?></td>
<td><?= $age ?></td>
<td><?= $email ?></td>
<td><?= $word ?></td>
<td> <a href="memberDel.php?id=<?= $id ?>" onclick="return confirm('정말 삭제할까요?')">삭제</a> </td>
<td> <a href="#" onclick="onEdit('<?= $id ?>');">수정</a> </td>
</tr>
<? } ?>
</table>
- select쿼리문을 실행시켜 해당 테이블의 열을 mysqli_fetch_assoc($result) 을 통해서
행을 한 줄씩 가져옵니다.
- 가져온 행을 하나씩 대입 시켜줍니다.
Update
<!-- memberList.php --!>
<td> <a href="#" onclick="onEdit('<?= $id ?>');">수정</a> </td>
<script>
function onEdit(id) {
const word = prompt('수정할 내용을 적으시오');
location.href = 'memberEdit.php?id=' + id + "&word=" + word;
}
</script>
- <a>태그를 누르면 수정할거 냐는 프롬프트 구문이 나오고 그것에 응할시,
수정관련 파일로 id, word 데이터와 함께 페이지 이동시켜줍니다.
<?
include 'sqlLib.php';
$id = $_GET['id'];
$word = $_GET['word'];
$query = "update member set word='$word' where id='$id' ";
mysqli_query($connect, $query);
?>
<script>
location.href = 'index.php';
</script>
- 수정 작업 파일에선 받아온 데이터를 수정할 쿼리문에 적용시킨 후 실행하고,
다시 본문으로 돌아가 줍니다.
Delete
<!--memberList.php -->
<td> <a href="memberDel.php?id=<?= $id ?>" onclick="return confirm('정말 삭제할까요?')">삭제</a> </td>
<?
// memberDel.php
include 'sqlLib.php';
$id = $_GET['id'];
$query = "delete from member where id= '$id'";
mysqli_query($connect, $query);
?>
<script>
location.href = "index.php";
</script>
- update 부문하고 비슷하게 삭제 확인을 승락하면 아이디가 memberDel.php로
보내지고 쿼리문이 실행되고 다시 본문으로 되돌아가 줍니다.
전체 삭제
<!-- memberList.php --!>
<button type="button" class="btn btn-danger text-right" onclick="confirmDelete()">전체삭제</button>
<script>
function confirmDelete() {
const doIt = confirm('정말 전체 삭제할까요?');
if (doIt) {
// 확인을 누르면 서버에 요청을 보내서 삭제 작업을 수행
deleteAll();
} else {
// 취소를 누르면 아무 작업도 하지 않음
return;
}
}
function deleteAll() {
// JavaScript를 사용하여 서버에 AJAX 요청을 보냄
var xhr = new XMLHttpRequest();
xhr.open("POST", "memberDelAll.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 서버의 응답에 대한 처리 (optional)
console.log(xhr.responseText);
window.location.reload();
}
};
xhr.send();
}
</script>- 전체삭제에서는 비동기 구문을 사용했습니다.
JavaScript에서 AJAX(Asynchronous JavaScript and XML)를 사용하여 비동기적으로 서버에 데이터를 요청하고 응답을 처리하는 예제입니다.
페이지 전체를 새로고침하지 않고도 서버와 통신하여 데이터를 가져오거나 전송할 수 있습니다.
- var xhr = new XMLHttpRequest();: XMLHttpRequest 객체를 생성합니다. 이 객체를 사용하여 서버와 상호 작용할 수 있습니다.
- xhr.open("POST", "memberDelAll.php", true);: XMLHttpRequest 객체를 초기화합니다. "POST"는 데이터를 서버로 전송할 때 사용되는 HTTP 메서드입니다. 두 번째 매개변수는 요청을 보낼 URL이고, 세 번째 매개변수 true는 비동기적으로 요청을 처리하도록 지정합니다.
- xhr.onreadystatechange = function () {...}: onreadystatechange 이벤트 핸들러를 정의합니다. 이 이벤트는 서버로부터 응답이 도착할 때마다 발생합니다. 응답의 상태가 변경될 때마다 이 함수가 호출됩니다.
if (xhr.readyState == 4 && xhr.status == 200) {...}: readyState가 4이고 status가 200인 경우에만 코드 블록이 실행됩니다. readyState가 4는 서버 응답이 완료되었음을 나타내고, status가 200은 성공적인 응답임을 나타냅니다.
-console.log(xhr.responseText);: 서버의 응답 내용을 콘솔에 출력합니다. 이 부분은 디버깅을 위한 것으로, 실제 애플리케이션에서는 필요에 따라 다른 작업을 수행할 수 있습니다.
-window.location.reload();: 페이지를 새로고침하여 변경 사항을 적용합니다. 새로고침 없이도 페이지의 일부를 업데이트할 수 있지만, 여기서는 삭제 작업이 완료된 후에 페이지를 전체적으로 새로고침하도록 했습니다.
'IT > PHP & MySQL' 카테고리의 다른 글
| [PHP&MySQL] xampp - mysql 실행 불가 [solved] (0) | 2023.11.13 |
|---|---|
| [PHP&MySQL] phpMyadmin 다뤄보기 (0) | 2023.11.13 |