PHP PDO การใช้งานร่วมกับ DataTables

สวัสดีครับ ในบทความนี้จะแจกตัวอย่างโค้ดการใช้งาน PHP PDO ร่วมกับ DataTables แบบง่ายๆ ซึ่งมีลูกเล่นมากมายๆ และเป็นที่นิยมที่จะนำมาใช้งานกับระบบหลังบ้าน (Backend) ในส่วนของการแสดงผลที่มีตารางเข้ามาเกี่ยวข้อง และที่สำคัญ ใช้งานได้ฟรี !! ตัวอย่าง code ที่แจกจะรองรับการทำงาน PHP7 และ PHP8 *ฝึกไว้ครับเผื่อได้ใช้

รวมคลิปสอนปรับพื้นฐาน ภาษา php ฟรี 100 คลิป ++ https://devbanban.com/?p=3940

โค้ดประกอบด้วย

PHP PDO
DataTables
MySQL
HTML
Bootstrap5

มาเริ่มทำ workshop กันครับ *คอมเม้นอยู่ในโค้ด

0.DataTables คืออะไร คลิก

1.รวม Workshop PHP PDO ก่อนหน้า คลิก

2.สร้างโฟลเดอร์สำหรับทดสอบ เช่น ชื่อโฟลเดอร์ workshop_pdo *สำหรับคนที่เพิ่งฝึกยังไม่เข้าใจข้อนี้ว่าต้องสร้างไว้ที่ไหน ให้ดูคลิปชุดนี้ก่อน รวมคลิปสอนปรับพื้นฐาน ภาษา php ฟรี 100 คลิป ++ https://devbanban.com/?p=3940

3.ไฟล์เชื่อมต่อฐานข้อมูล ชื่อไฟล์ connect.php

<?php
$servername = "localhost";
$username = "root";
$password = "yourpassword"; //ไม่ได้ตั้งรหัสผ่านก็ลบ  yourpassword ออก

try {
  $conn = new PDO("mysql:host=$servername;dbname=workshop_pdo", $username, $password);
  // set the PDO error mode to exception
  $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  //echo "Connected successfully";
} catch(PDOException $e) {
  echo "Connection failed: " . $e->getMessage();
}
//Set ว/ด/ป เวลา ให้เป็นของประเทศไทย
    date_default_timezone_set('Asia/Bangkok');
?>

<?php

$servername = "localhost";

$username = "root";

$password = "yourpassword"; //ไม่ได้ตั้งรหัสผ่านก็ลบ yourpassword ออก

try {

$conn = new PDO("mysql:host=$servername;dbname=workshop_pdo", $username, $password);

// set the PDO error mode to exception

$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

//echo "Connected successfully";

} catch(PDOException $e) {

echo "Connection failed: " . $e->getMessage();

}

//Set ว/ด/ป เวลา ให้เป็นของประเทศไทย

date_default_timezone_set('Asia/Bangkok');

4.ตารางที่ใช้ tbl_member ให้สร้างฐานข้อมูลก่อนนะครับ (ชื่อฐานข้อมูลที่ใช้ workshop_pdo) แล้วคัดลอกโค้ดและคลิกในเมนู sql จากนั้นวาง code สร้างตาราง จากนั้นคลิก Go ก็จะได้ตารางพร้อมข้อมูลตัวอย่างละครับ

CREATE TABLE `tbl_member` (
  `id` int(11) NOT NULL,
  `name` varchar(50) NOT NULL,
  `surname` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


INSERT INTO `tbl_member` (`id`, `name`, `surname`) VALUES
(1, 'Tony', 'Stark'),
(2, 'Thor', 'Odinson'),
(3, 'Dr. Bruce', 'Banner'),
(4, 'Wanda', 'Maximoff'),
(5, 'Natasha', 'Alianovna Romanoff'),
(6, 'Peter', 'Benjamin Parker'),
(7, 'Clinton', 'Francis Barton'),
(8, 'Yondu', 'Udonta'),
(9, 'Steven', 'Rogers'),
(10, 'Pisit', 'bow'),
(11, 'devbanban', 'dotcom'),
(12, 'นายเอ', 'นามสกุลเอ'),
(13, 'นายบี', 'นามสกุลบี');

ALTER TABLE `tbl_member`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `tbl_member`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=14;

CREATE TABLE `tbl_member` (

`id` int(11) NOT NULL,

`name` varchar(50) NOT NULL,

`surname` varchar(100) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `tbl_member` (`id`, `name`, `surname`) VALUES

(1, 'Tony', 'Stark'),

(2, 'Thor', 'Odinson'),

(3, 'Dr. Bruce', 'Banner'),

(4, 'Wanda', 'Maximoff'),

(5, 'Natasha', 'Alianovna Romanoff'),

(6, 'Peter', 'Benjamin Parker'),

(7, 'Clinton', 'Francis Barton'),

(8, 'Yondu', 'Udonta'),

(9, 'Steven', 'Rogers'),

(10, 'Pisit', 'bow'),

(11, 'devbanban', 'dotcom'),

(12, 'นายเอ', 'นามสกุลเอ'),

(13, 'นายบี', 'นามสกุลบี');

ALTER TABLE `tbl_member`

ADD PRIMARY KEY (`id`);

ALTER TABLE `tbl_member`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=14;

5.ไฟล์แสดงผล datatable.php *จุดที่ต้องโฟกัส !! บรรทัด 15 มีการสร้างไอดี example ตอนที่ใส่ใน tag table (บรรทัด 26) ต้องใส่ id=”example” และ class=”display” ด้วยครับ ถึงจะใช้งานได้

<!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">
        <!-- bootstrap -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
        <!-- datatable -->
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css">
        <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"></script>
        <script>
            $(document).ready(function() {
            $('#example').DataTable();
            } );
        </script>
        
        <title>Basic PHP PDO DataTables by devbanban.com 2021</title>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12"> <br>
                    <h3>Basic PHP PDO Using DataTables</h3>
                    <table id="example" class="display table table-striped  table-hover table-responsive table-bordered ">
                        <thead>
                            <tr>
                                <th width="5%">ลำดับ</th>
                                <th width="50%">ชื่อ</th>
                                <th width="45%">นามสกุล</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php
                            //คิวรี่ข้อมูลมาแสดงในตาราง
                            require_once 'connect.php';
                            $stmt = $conn->prepare("SELECT* FROM tbl_member");
                            $stmt->execute();
                            $result = $stmt->fetchAll();
                            foreach($result as $k) {
                            ?>
                            <tr>
                                <td><?= $k['id'];?></td>
                                <td><?= $k['name'];?></td>
                                <td><?= $k['surname'];?></td>
                            </tr>
                            <?php } ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <center>Basic  PHP PDO DataTables by devbanban.com 2021</center>
    </body>
</html>

<!DOCTYPE html>

<head>

$(document).ready(function() {

$('#example').DataTable();

} );

</script>

<title>Basic PHP PDO DataTables by devbanban.com 2021</title>

</head>

<body>

<h3>Basic PHP PDO Using DataTables</h3>

<thead>

<tr>

<th width="5%">ลำดับ</th>

<th width="45%">นามสกุล</th>

</tr>

</thead>

<tbody>

<?php

//คิวรี่ข้อมูลมาแสดงในตาราง

require_once 'connect.php';

$stmt = $conn->prepare("SELECT* FROM tbl_member");

$stmt->execute();

$result = $stmt->fetchAll();

foreach($result as $k) {

<tr>

</tr>

<?php } ?>

</tbody>

</table>

</div>

<center>Basic PHP PDO DataTables by devbanban.com 2021</center>

</body>

</html>

6.ผลการทำงาน

7.ข้อแนะนำเพิ่มเติม workshop ดังกล่าวเหมาะกับข้อมูลน้อยกว่า 2000 rows ถ้ามากกว่าจะนี้จะโหลดช้ามากๆ แนะนำไปให้ไปศึกษา workshop datatable serverside คลิก.

ลองเอาไปประยุกต์ใช้ดูครับ และฝากติดตาม workshop ต่อๆ ไปด้วยครับผม

Bootstrap5 : https://getbootstrap.com/
แหล่งศึกษา PDO เพิ่มเติม : https://websitebeaver.com/php-pdo-vs-mysqli
List of PDOStatement::bindParam data_type parameters : https://www.php.net/manual/en/pdo.constants.php

ขอแนะนำระบบพร้อมใช้งาน *รายละเอียดและราคาอยู่ใต้คลิป

ระบบพร้อมใช้ทั้งหมด คลิก

ร่วมสนับสนุน ค่ากาแฟ ค่าโฮส devbanban.com ได้ที่

ธนาคารกรุงไทย สาขาเดอะมอลล์ท่าพระ
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 878-0-17747-6
————————————————————————————
ธนาคารไทยพาณิชย์ สาขามหาวิทยาลัยราชภัฏธนบุรี
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 406-359094-1

fanpage : https://www.facebook.com/sornwebsites/

devbanban

PHP PDO การใช้งานร่วมกับ DataTables

Byพิศิษฐ์ บวรเลิศสุธี

Related

Related Post

ระบบบริหารบุคลากร ระบบ HR + ระบบบันทึกเวลาเข้างาน

ฟรีคลิปสอนทำเว็บไซต์ PHP PDO MySQL AdminLTE3 2024

ระบบหอพัก , อพาร์ทเม้นท์ รายวัน รายเดือน ราคาเบาๆ เอาไปต่อยอดได้ 2024

You missed