CRUD PHP MySQL AJAX jQuery Using Bootstrap v.5

สวัสดี บทความนี้ Matter Devs ได้นำ Project ที่เกี่ยวกับ CRUD ด้วยภาษา PHP MySQL AJAX jQuery และใช้ Bootstrap มาช่วยในด้าน UI มาฝากทุกคน แล้ว CRUD คืออะไร? C ย่อมาจาก (Create) ไว้สร้างหรือเพิ่มรายการใหม่ R (Read) ค้นหาหรือดึงดูรายการที่มีอยู่ U (Update) แก้ไขข้อมูลที่มีอยู่ D (Delete) ลบรายการที่มีอยู่ บางคนก็อาจจะคุ้นเคยกับการใช้งาน SQL ก็คือ INSERT SELECT UPDATE DELETE นั่นเอง ซึ่งจะเกี่ยวข้องกับฐานข้อมูลด้วย งั้นเรามาดูกันดีกว่า ประกอบด้วยไฟล์อะไรบ้าง?

รูปทางซ้ายมือจะเป็นไฟล์ทั้งหมดที่มีอยู่ในโปรเจคนี้ ลิงค์ที่เกี่ยวข้องในไฟล์ index.php นำมาจากเว็บไหนบ้าง
1. Bootstap คือ Front-end Framework

Bootstrap v.5

2. CDN jQuery Libraries

CDN

ส่วนเครื่องมือที่ใช้ในการเชื่อมต่อฐานข้อมูล (MySQL)

XAMPP

1. ไฟล์ crudphpmysql.sql เก็บฐานข้อมูล
หากใครใช้ xampp ขั้นตอนการนำโค้ดไฟล์นี้ไปใช้ (1) กด New (2) สร้างชื่ออะไรก็ได้ (3) กด SQL ที่เมนูแล้ววางโค้ดที่คัดลอกจากด้านล่างนี้

-- phpMyAdmin SQL Dump
-- version 5.0.2
-- https://www.phpmyadmin.net/
--
-- Host: localhost
-- Generation Time: May 18, 2022 at 06:39 PM
-- Server version: 10.4.13-MariaDB
-- PHP Version: 7.4.8

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `crudphpmysql`
--

-- --------------------------------------------------------

--
-- Table structure for table `users`
--

CREATE TABLE `users` (
  `UserID` int(11) NOT NULL,
  `FirstName` varchar(100) NOT NULL,
  `LastName` varchar(100) NOT NULL,
  `Email` varchar(255) NOT NULL,
  `Mobile` varchar(20) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Dumping data for table `users`
--

INSERT INTO `users` (`UserID`, `FirstName`, `LastName`, `Email`, `Mobile`) VALUES
(1, 'Oliver', 'Smith', 'oliver.s@gmail.com', '+14255550100'),
(2, 'Emma', 'Kennocha', 'emma.k@gmail.com', '+14256780100'),
(3, 'Felicity', 'Vida', 'felicity.v@gmail.com', '+14256780123'),
(4, 'Wilson', 'Byrne', 'wilson.b@gmail.com', '+66356780123'),
(5, 'Martin', 'Brown', 'martin.b@gmail.com', '+66456650183'),
(6, 'Roy', 'Taylor', 'roy.taylor@gmail.com', '+861012345678'),
(7, 'Roberts', 'Garcia', 'roberts.g@gmail.com', '+6512345678'),
(8, 'Smith', 'Brown', 'smith.b@gmail.com', '+6587364932'),
(9, 'fsdfsd234', 'fsdf234232', 'sdfsdf34234', 'sdfsdf234234');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `users`
--
ALTER TABLE `users`
  ADD PRIMARY KEY (`UserID`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `users`
--
ALTER TABLE `users`
  MODIFY `UserID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

2. ไฟล์ connect.php เชื่อมกับฐานข้อมูล

<?php
$con = new mysqli('localhost', 'root', '', 'crudphpmysql');
if(!$con) {
    die(mysqli_error($con));
}
?>

3. ไฟล์ index.php หน้าหลักของโปรเจค

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRUD PHP MySQL AJAX jQuery - Bootstrap Modal v.5</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <!-- Create New User Modal -->
    <div class="modal fade" id="createModal" tabindex="-1" aria-labelledby="createModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createModalLabel">Create New User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3 row">
                        <label for="firstNameAdd" class="col-sm-3 col-form-label">First Name</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="firstNameAdd" name="FirstName"
                                placeholder="Please Enter Your First Name">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="lastNameAdd" class="col-sm-3 col-form-label">Last Name</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="lastNameAdd" name="LastName"
                                placeholder="Please Enter Your Last Name">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="emailAdd" class="col-sm-3 col-form-label">Email</label>
                        <div class="col-sm-9">
                            <input type="email" class="form-control" id="emailAdd" name="Email"
                                placeholder="Please Enter Your Email">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="mobileAdd" class="col-sm-3 col-form-label">Mobile</label>
                        <div class="col-sm-9">
                            <input type="tel" class="form-control" id="mobileAdd" name="Mobile"
                                placeholder="Please Enter Your Mobile Number">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-dark" onclick="addUser()">Submit</button>
                    <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Update User Modal -->
    <div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="updateModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="updateModalLabel">Update User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3 row">
                        <label for="firstNameEdit" class="col-sm-3 col-form-label">First Name</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="firstNameEdit" name="FirstName"
                                placeholder="Please Enter Your First Name">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="lastNameEdit" class="col-sm-3 col-form-label">Last Name</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="lastNameEdit" name="LastName"
                                placeholder="Please Enter Your Last Name">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="emailEdit" class="col-sm-3 col-form-label">Email</label>
                        <div class="col-sm-9">
                            <input type="email" class="form-control" id="emailEdit" name="Email"
                                placeholder="Please Enter Your Email">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="mobileEdit" class="col-sm-3 col-form-label">Mobile</label>
                        <div class="col-sm-9">
                            <input type="tel" class="form-control" id="mobileEdit" name="Mobile"
                                placeholder="Please Enter Your Mobile Number">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-dark" onclick="updateUser()">Update</button>
                    <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Close</button>
                    <input type="hidden" id="hiddenData">
                </div>
            </div>
        </div>
    </div>

    <div class="container my-5">
        <nav class="navbar navbar-dark bg-dark">
            <div class="container-fluid">
                <span class="navbar-text">
                    CRUD PHP MySQL AJAX jQuery - Bootstrap Modal v.5
                </span>
                <button type="button" class="btn btn-outline-success" data-bs-toggle="modal"
                    data-bs-target="#createModal">
                    Add New Users
                </button>
            </div>
        </nav>
        <div id="displayDataTable"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="script.js"></script>
</body>

</html>

4. ไฟล์ display.php แสดงตารางรายการทั้งหมด

<?php
include 'connect.php';
if(isset($_POST['displaySend'])){
    $table='<table class="table table-dark table-striped">
    <thead class="thead-dark">
    <tr>
        <th scope="col">No</th>
        <th scope="col">First Name</th>
        <th scope="col">Last Name</th>
        <th scope="col">Email</th>
        <th scope="col">Mobile</th>
        <th scope="col">Action</th>
    </tr>
    </thead>';
    $sql = "SELECT * FROM `users`";
    $result = mysqli_query($con, $sql);
    $number = 1;
    while($row = mysqli_fetch_assoc($result)){
        $UserID = $row['UserID'];
        $FirstName = $row['FirstName'];
        $LastName = $row['LastName'];
        $Email = $row['Email'];
        $Mobile = $row['Mobile'];
        $table.='<tr>
        <td scope="row">'.$number.'</td>
        <td>'.$FirstName.'</td>
        <td>'.$LastName.'</td>
        <td>'.$Email.'</td>
        <td>'.$Mobile.'</td>
        <td>
        <button class="btn btn-outline-warning" onclick="getUser('.$UserID.')">Update</button>
        <button class="btn btn-outline-danger" onclick="deleteUser('.$UserID.')">Delete</button>
        </td>
        </tr>';
        $number++;
    } 
    $table.='</table>';
    echo $table;
}
?>

5. ไฟล์ insert.php สร้างหรือเพิ่มข้อมูล

<?php
include 'connect.php';
extract($_POST);
if(isset($_POST['firstNameSend']) && isset($_POST['lastNameSend']) 
&& isset($_POST['emailSend'])&& isset($_POST['mobileSend']))
{
    $sql="insert into `users` (FirstName, LastName, Email, Mobile) 
    values ('$firstNameSend','$lastNameSend','$emailSend','$mobileSend')";
    $result = mysqli_query($con, $sql);
}
?>

6. ไฟล์ update.php อัพเดพหรือแก้ไขข้อมูล

<?php
 include 'connect.php';
 if (isset($_POST['updateUserID'])) {
     $UserID = $_POST['updateUserID'];
     $sql = "SELECT * FROM `users` WHERE UserID=$UserID";
     $result = mysqli_query($con,$sql);
     $response = array();
     while ($row = mysqli_fetch_assoc($result)) {
         $response = $row;
     }
     echo json_encode($response);
 }else {
     $response['status'] =200;
     $response['message'] ="Invalid or data not found";
 }
 if(isset($_POST['hiddenData'])) {
     $UniqueID = $_POST['hiddenData'];
     $FirstName = $_POST['firstNameEdit'];
     $LastName = $_POST['lastNameEdit'];
     $Email = $_POST['emailEdit'];
     $Mobile = $_POST['mobileEdit'];
     $sql = "UPDATE `users` SET FirstName='$FirstName', LastName='$LastName', 
     Email='$Email', Mobile='$Mobile' WHERE UserID='$UniqueID'";
     $result=mysqli_query($con, $sql);
 }
?>

7. ไฟล์ delete.php ลบข้อมูลจากตาราง

<?php
include 'connect.php';
if (isset($_POST['deleteSend'])) {
    $unique=$_POST['deleteSend'];
    $sql="DELETE FROM `users` WHERE UserID=$unique";
    $result=mysqli_query($con,$sql);
}
?>

8. ไฟล์ script.js เป็นไฟล์ JavaScript ไว้เก็บ function ต่างๆ

$(document).ready(function () {
  displayData();
});

function displayData() {
  var displayData = "true";
  $.ajax({
    url: "display.php",
    type: "POST",
    data: {
      displaySend: displayData,
    },
    success: function (data, status) {
      $("#displayDataTable").html(data);
    },
  });
}

function addUser() {
  var firstNameAdd = $("#firstNameAdd").val();
  var lastNameAdd = $("#lastNameAdd").val();
  var emailAdd = $("#emailAdd").val();
  var mobileAdd = $("#mobileAdd").val();
  $.ajax({
    url: "insert.php",
    type: "post",
    data: {
      firstNameSend: firstNameAdd,
      lastNameSend: lastNameAdd,
      emailSend: emailAdd,
      mobileSend: mobileAdd,
    },
    success: function (data, status) {
      displayData();
    },
  });
}

function getUser(updateUserID) {
  $("#hiddenData").val(updateUserID);
  $.post(
    "update.php",
    {
      updateUserID: updateUserID,
    },
    function (data, status) {
      var userID = JSON.parse(data);
      $("#firstNameEdit").val(userID.FirstName);
      $("#lastNameEdit").val(userID.LastName);
      $("#emailEdit").val(userID.Email);
      $("#mobileEdit").val(userID.Mobile);
    }
  );
  $("#updateModal").modal("show");
}

function updateUser() {
  var firstNameEdit = $("#firstNameEdit").val();
  var lastNameEdit = $("#lastNameEdit").val();
  var emailEdit = $("#emailEdit").val();
  var mobileEdit = $("#mobileEdit").val();
  var hiddenData = $("#hiddenData").val();
  $.post(
    "update.php",
    {
      firstNameEdit: firstNameEdit,
      lastNameEdit: lastNameEdit,
      emailEdit: emailEdit,
      mobileEdit: mobileEdit,
      hiddenData: hiddenData,
    },
    function (data, status) {
      displayData();
    }
  );
}

function deleteUser(deleteUserID) {
  $.ajax({
    url: "delete.php",
    type: "post",
    data: {
      deleteSend: deleteUserID,
    },
    success: function (data, status) {
      displayData();
    },
  });
}

ดาวน์โหลดโค้ดฟรีแบบเต็ม

เป็นยังไงกันบ้างกับมินิโปรเจคนี้ ใครที่จะเข้ามาอยู่ในวงการสร้าง Web Application ต้องรู้จัก และต้องใช้งานกันแน่นอน หวังว่าบทความนี้จะเป็นประโยชน์สำหรับคนที่จะไปต่อยอดเขียนโปรแกรมต่างๆ ขอให้ทุกคนสนุกกับการเขียนโปรแกรม ไว้จะมีโปรเจคอื่นๆ ต่อไปน๊าาา

ขอบคุณ Workshop จาก Step by Step