PHP-AJAX-CRUD掲示板実施


maria dbデータベースに基づいてphp掲示板を作成します.
基本CRUD機能はAJAXを使用しており、別途リフレッシュすることなく値を渡すことができます.

デフォルトのディレクトリ構造は次のとおりです.
テーブル構造名tblのidには、インデックス値、auto increment、プライマリ・キーが付与されます.
プレイヤー名を表すname列
アドレスバー
専門を表す主欄からなる.

config.php


Databaseconnectを構成するconfig,php
db接続の場合、例外処理をpdoで接続してみます.
<?php
$servername = "localhost"; 
$username = "username"; //유저명
$password = "password"; //비밀번호

try { 
  $conn = new PDO("mysql:host=$servername;dbname=myDB", $username, $password);
  // set the PDO error mode to exception //db 이름 유효성체크
  $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  echo "Connected successfully"; //이 부분의 경우는 실제 구동때는 주석처리한다.
} catch(PDOException $e) {
  echo "Connection failed: " . $e->getMessage();
}
?>

index.php


これは、実際にフロントエンドに表示されるインデックスページです.ちなみに、ブートストラップ4.0、datatables、jを使用してcdnをクエリーします.cdnリンクは次のようになります.
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
  <--CSS -->
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <--스크립트는 하단 body 바로 위에 배치하도록 한다-->
index.phpはphpファイルですが、コードはhtml、jクエリで構成されています.
会員登録の場合、ページを移動する必要はなく、スタートバーモードウィンドウ機能を実現するだけです.

次はindexphpのすべてのコード
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<title>Crud Jquery</title>
</head>
<body>
<div class="container mt-5 mb-5">
  <div class="row">
    <div class="col-6">
      <h1>데이터 테이블</h1>
    </div>
    <div class="col-6">
      <button type="button" class="btn btn-primary float-right" onclick="form_add()">추가하기</button>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <div class="table-responsive">
        <table class="table table-striped table-sm">
          <thead>
            <tr>
              <th scope="col">번호</th>
              <th scope="col">이름</th>
              <th scope="col">주소</th>
              <th scope="col">전공</th>
              <th scope="col">동작</th>
            </tr>
          </thead>
          <tbody>
            <!--테이블 데이터 들어가는 곳 -->
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<!-- START Modal Form -->
<div class="modal fade" id="modaldiv" tabindex="-1" role="dialog" aria-labelledby="modaldiv" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <form onsubmit="return save_data()">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel2">회원등록</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="id" id="id">
          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="name">이름</label>
              <input type="text" class="form-control" name="name" id="name">
            </div>
            <div class="form-group col-md-6">
              <label for="major">전공</label>
              <select name="major" id="major" class="form-control">
                <option value="infomation">정보관리자</option>
                <option value="history">역사가</option>
                <option value="movie">영화감독</option>
                <option value="manager">매니저</option>
                <option value="artist">예술가</option>
              </select>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="adress">주소</label>
              <textarea class="form-control" rows="5" name="adress" id="adress"></textarea>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="mr-auto">
            <button type="submit" class="btn btn-primary">등록</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">취소</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
<!--모달창 종료 -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
//ajax 시작
  let save_method, table, message;
	//저장되는 메소드와, 테이블, 메시지는 변수로 우선 지정해준다.
  $(function() {
    table = $('.table').DataTable({
      "processing": true, //서버사이드 렌더링 사용여부에 yes를 해준다(우린 ajax를 쓰니)
      "ajax": "ajax/ajax_table.php?action=table_data"
    });
  });
  
  //추가하기 버튼 클릭시 모달창 생성
  function form_add() {
    save_method = "add";
    $('#modaldiv').modal('show');
    $('#modaldiv form')[0].reset(); //모달창 초기화되어 나타나야한다.
    $('.modal-title').text('등록 입력');
  }
	
	//수정버튼 누를 시에 모달 창에 id에 따른 data load
  function form_edit(id) { //id값에 따라 수정할 수 있게
    save_method = "edit";
    $.ajax({
      url: "ajax/ajax_table.php?action=form_data&id=" + id,
      type: "GET",
      dataType: "JSON",
      success: function(data) {
        $('#modaldiv').modal('show');
        $('.modal-title').text('수정사항 입력');

        $('#id').val(data.id);
        $('#name').val(data.name);
        $('#adress').val(data.adress);
        $('#major').val(data.major);
      },
      error: function() {
        alert("내용 확인하세요!");
      }
    });
  }
	
	//수정, 등록할 data 저장하는 함수
  function save_data() {
    if (save_method == "add") {
      url = "ajax/ajax_table.php?action=insert";
      message = "등록성공";
    } else {
      url = "ajax/ajax_table.php?action=update";
      message = "등록실패";
    }

    $.ajax({
      url: url,
      type: "POST",
      data: $('#modaldiv form').serialize(),
      success: function() {
        $('#modaldiv').modal('hide');
        $('#modaldiv form')[0].reset();
        alert(message);
        table.ajax.reload();
      },
      error: function() {
        alert("수정사항 다시 확인 바랍니다!");
      }
    });
    return false;
  }
	
  //삭제기능
  function delete_data(id) {
    if (confirm("정말로 삭제하시겠습니까?")) {
      $.ajax({
        url: "ajax/ajax_table.php?action=delete&id=" + id,
        type: "GET",
        success: function(data) {
          alert("데이터 삭제가 완료되었습니다")
          table.ajax.reload();
        },
        error: function() {
          alert("처리 불가 확인해주세요!");
        }
      });
    }
  }
</script>
</body>
</html>
ajaxを使用してデータを取得し、post方式ajax/ajax tableを使用します.phpに送信します.
ajaxテーブルが表示されます.phpページは、GET方式でフォームのアクションタグ値として使用されます.
CRUDを決めさせていただきます(Githubや他の海外サイトを見て参考にした結果)
これが一番簡単なコードだと思います.)

ajax/ajax_table.php

<?php
include '../config.php'; //db 연결

if ($_GET['action'] == "table_data") { //초기 data load
	$query = $mysqli->query("SELECT * FROM tbl  ");
	$totalNumrow = $query->num_rows;
	$data = array();
	$no = 1; //페이지 번호
	while ($r = $query->fetch_array()) {
		$id = $r['id'];
		$row = array(); 
		$row[] = $no;
		$row[] = $r['name'];
		$row[] = $r['adress'];
		$row[] = $r['major'];
		$row[] = '<div class="text-center">
	   			   <a style="color:#fff;" class="btn btn-primary" onclick="form_edit(' . $id . ')">수정</a>
	   			   <a style="color:#fff;" class="btn btn-danger" onclick="delete_data(' . $id . ')">삭제</a>
	   			 </div>';
		$data[] = $row;
		$no++;
	}
/*아래는 datatable plugin에 쓰이는 함수다. livesearch기능과 paging기능을 동시에
제공하기 때문에 편의성 측면에서 사용한다. 

draw는 ajax요청시에 datatable이 그려질 때 count하기 위해 
recordsTotal은 필터링 전 전체 레코드 수(검색 시에)
recordsFilterd는 필터링 후 전체 레코드 수 (검색 후 보여지는 칸)
data는 실제 data(우리가 db에 요청한 data)로 생각하면 된다

이후부터는 index.php form에서 보내주는 요청에 따라 조건문 양식으로
CRUD 기능을 넣어주자

*/ 
	$output = array("draw" => 1, "recordsTotal" => $totalNumrow, "recordsFiltered" => $totalNumrow, "data" => $data);
	echo json_encode($output);
} elseif ($_GET['action'] == "form_data") { //조회
	$query = $mysqli->query("SELECT * FROM tbl WHERE id='$_GET[id]'");
	$data  = $query->fetch_array();
	echo json_encode($data);
} elseif ($_GET['action'] == "insert") { //삽입
	$result = $mysqli->query("INSERT INTO tbl SET
      name    = '$_POST[name]',
      adress  = '$_POST[adress]',
      major = '$_POST[major]'");
} elseif ($_GET['action'] == "update") { //수정

	$result = $mysqli->query("UPDATE tbl SET
      name    = '$_POST[name]',
      adress  = '$_POST[adress]',
      major = '$_POST[major]'
      WHERE id ='$_POST[id]'");
} elseif ($_GET['action'] == "delete") { //삭제
	$result = $mysqli->query("DELETE FROM tbl WHERE id='$_GET[id]'");
}
完了すると、以下の簡単なCRUD掲示板の例が表示されます.