Free Source Code Project, MySQL, PHP

CRUD PHP MySQL AJAX jQuery Using Bootstrap v.5

CRUD PHP MYSQL AJAX JQUERY Bootstrap v.5
18
พ.ค.

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

CRUD PHP folder

รูปทางซ้ายมือจะเป็นไฟล์ทั้งหมดที่มีอยู่ในโปรเจคนี้ ลิงค์ที่เกี่ยวข้องในไฟล์ 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