ویژگی‌های آموزش عملیات CRUD در PHP با استفاده از PDO و AJAX :

1. ساخت (Create) ، خواندن (Read) ، بروزرسانی (Update) و حذف (ِDelete)
2. Bootstrap – برای طراحی
3. jQuery – برای رسیدگی به درخواست ajax

»» در پایان این برنامه آموزشی شما با نحوه استفاده از شی گرایی pdo در php برای انجام عملیات crud آشنا می شوید. همچنین شما یاد می‌گیرید که چگونه از بوتسترپ bootstrap و ajax استفاده کنید , من همچنین یک فایل کتابخانه php با برنامه‌نویسی شی گرا آماده کردم، بنابراین تمرین خوبی برای یادگیری شی گرایی pdo در php  از این برنامه آموزشی وجود دارد.

بیایید شروع کنیم

مرحله ۱: ساخت پایگاه داده و جدول مورد نیاز:
همانطور که همیشه اولین گام ما ایجاد پایگاه‌داده است، پایگاه‌داده ای با نامه pdo_crud را ایجاد می کنیم و جدول users را که می‌خواهیم عملیات crud را انجام دهیم را به آن اضافه می کنیم .

جدول کاربران (users):

CREATE TABLE `users` (
  `id` int(11) NOT NULL,
  `first_name` varchar(40) NOT NULL,
  `last_name` varchar(40) NOT NULL,
  `email` varchar(50) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

مرحله 2: فایل اتصال به پایگاه داده:
فولدر جدیدی به نام ajax ایجاد کنید و در آن فایلی به نام connection.php برای اتصال به پایگاه داده را قرار دهید.

ajax/connection.php:

<?php

define('HOST', 'localhost');
define('USER', 'root');
define('PASSWORD', '');
define('DATABASE', 'pdo_crud');
define('CHARSET', 'utf8');

function DB()
{
    static $pdo;
    if ($pdo === null) {
        $opt = array(
            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
            PDO::ATTR_EMULATE_PREPARES => FALSE,
        );
        $dsn = 'mysql:host=' . HOST . ';dbname=' . DATABASE . ';charset=' . CHARSET;
        $pdo = new PDO($dsn, USER, PASSWORD, $opt);
    }
    return $pdo;
}

?>

نام هاست ، نام ، نام کاربری و رمز عبور پایگاه داده را برقراری ارتباط با آن را وارد کنید.

من همچنین از تابع Function به نام DB()  برای برقراری ارتباط با پایگاه داده استفاده می کنم.

مرحله 3: ایجاد فایل کتابخانه با توابع CRUD:

فایل کتابخانه یک فایل php است که کلاس و عملکرد های اصلی برای انجام عملیات CRUD در آن نوشته شده است این فایل را نیز در داخل فولدر ajax قرار می دهیم.

ajax/library.php:

<?php

require __DIR__ . '/connection.php';

class CRUD
{

    protected $db;

    function __construct()
    {
        $this->db = DB();
    }

    function __destruct()
    {
        $this->db = null;
    }

    //Add new Record
    public function Create($first_name, $last_name, $email)
    {
        $query = $this->db->prepare("INSERT INTO users(first_name, last_name, email) VALUES (:first_name,:last_name,:email)");
        $query->bindParam("first_name", $first_name, PDO::PARAM_STR);
        $query->bindParam("last_name", $last_name, PDO::PARAM_STR);
        $query->bindParam("email", $email, PDO::PARAM_STR);
        $query->execute();
        return $this->db->lastInsertId();
    }

    //Read all records
    public function Read()
    {
        $query = $this->db->prepare("SELECT * FROM users");
        $query->execute();
        $data = array();
        while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
            $data[] = $row;
        }
        return $data;
    }

    //Delete Record
    public function Delete($user_id)
    {
        $query = $this->db->prepare("DELETE FROM users WHERE id = :id");
        $query->bindParam("id", $user_id, PDO::PARAM_STR);
        $query->execute();
    }

    //Update Record
    public function Update($first_name, $last_name, $email, $user_id)
    {
        $query = $this->db->prepare("UPDATE users SET first_name = :first_name, last_name = :last_name, email = :email  WHERE id = :id");
        $query->bindParam("first_name", $first_name, PDO::PARAM_STR);
        $query->bindParam("last_name", $last_name, PDO::PARAM_STR);
        $query->bindParam("email", $email, PDO::PARAM_STR);
        $query->bindParam("id", $user_id, PDO::PARAM_STR);
        $query->execute();
    }

    //Get Details
    public function Details($user_id)
    {
        $query = $this->db->prepare("SELECT * FROM users WHERE id = :id");
        $query->bindParam("id", $user_id, PDO::PARAM_STR);
        $query->execute();
        return json_encode($query->fetch(PDO::FETCH_ASSOC));
    }
}

?>

شرح مختصری در ساختار فایل کتابخانه:

– Database – در فایل بالا ما از اتصال پایگاه داده استفاده می کنیم که برای کتابخانه CRUD ضروری می باشد.

– CRUD : کلاسی که مجموعه عملکر های اصلی پروژه ما را شامل می شود.

– __construct() و __destruct() برای ایجاد متغیر اتصال پایگاه داده بکار می رود.

– Create() : برای اضافه کردن رکورد جدید به پایگاه داده.

– Read() : برای خواندن تمام  رکوردها از پایگاه داده.

– Delete() : حذف رکورد از جدول پایگاه داده برای کاربری خاص.

– Update() : بروز رسانی رکورد از جدول پایگاه داده برای کاربری خاص.

– Details() : نمایش جزئیات کاربر خاص، که البته به شناسه آن نیاز دارد.

مرحله 4: فایل های درخواست آژاکس:

ساخت فایل create.php برای ثبت رکورد جدید:

<?php
if (isset($_POST['first_name']) && isset($_POST['last_name']) && isset($_POST['email'])) {
    require("library.php");

    $first_name = $_POST['first_name'];
    $last_name = $_POST['last_name'];
    $email = $_POST['email'];

    $object = new CRUD();

    $object->Create($first_name, $last_name, $email);
}
?>

ساخت فایل read.php برای مشاهده همه رکورد های ثبت شده:

<?php

require 'library.php';

$object = new CRUD();

// Design initial table header
$data = '<table class="table table-bordered table-striped">
                        <tr>
                            <th>شناسه</th>
                            <th>نام</th>
                            <th>نام خانوادگی</th>
                            <th>ایمیل</th>
                            <th>بروزرسانی</th>
                            <th>حذف</th>
                        </tr>';


$users = $object->Read();

if (count($users) > 0) {
    $number = 1;
    foreach ($users as $user) {
        $data .= '<tr>
                <td>' . $number . '</td>
                <td>' . $user['first_name'] . '</td>
                <td>' . $user['last_name'] . '</td>
                <td>' . $user['email'] . '</td>
                <td>
                    <button onclick="GetUserDetails(' . $user['id'] . ')" class="btn btn-warning">بروزرسانی</button>
                </td>
                <td>
                    <button onclick="DeleteUser(' . $user['id'] . ')" class="btn btn-danger">حذف</button>
                </td>
    		</tr>';
        $number++;
    }
} else {
    // records not found
    $data .= '<tr><td colspan="6">رکوردی ثبت نشده است!</td></tr>';
}

$data .= '</table>';

echo $data;

?>

ساخت فایل update.php برای بروز رسانی رکورد:

<?php
if (isset($_POST)) {
    require 'library.php';

    $id = $_POST['id'];
    $first_name = $_POST['first_name'];
    $last_name = $_POST['last_name'];
    $email = $_POST['email'];

    $object = new CRUD();

    $object->Update($first_name, $last_name, $email, $id);
}

ساخت فایل delete.php برای حذف رکورد:

<?php
if (isset($_POST['id']) && isset($_POST['id']) != "") {
    require 'library.php';
    $user_id = $_POST['id'];

    $object = new CRUD();
    $object->Delete($user_id);
}
?>

ساخت فایل details.php برای نمایش رکورد کاربری خاص:

<?php
if (isset($_POST['id']) && isset($_POST['id']) != "") {
    require 'library.php';
    $user_id = $_POST['id'];

    $object = new CRUD();

    echo $object->Details($user_id);
}
?>

اگر نگاهی به فایل‌های بالا داشته باشید، می‌بینید، که ما به راحتی با فایل library ارتباط برقرار کرده ایم، ما همچنین از کلاس CRUD به روش شی گرایی برای فراخوانی داده ها استفاده کرده ایم.

پس کل کار ما با back-end انجام ‌شد، و حالا کار front-end یا طراحی را با Bootstrap و jQuery و ajax انجام می دهیم.

مرحله 5: طراحی بوت استرپ:

فایلی با نام index.php ایجاد کرده و کد زیر را اضافه کنید:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>عملیات CRUD با استفاده از اتصال PDO</title>

    <!-- Bootstrap CSS File  -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>

<!-- Content Section -->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>عملیات CRUD با استفاده از اتصال PDO</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="pull-right">
                <button class="btn btn-success" data-toggle="modal" data-target="#add_new_record_modal">افزودن رکورد جدید</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <h3>رکورد:</h3>

            <div class="records_content"></div>
        </div>
    </div>
</div>
<!-- /Content Section -->
<!-- Jquery JS file -->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<!-- Bootstrap JS file -->
<script type="text/javascript" src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

<!-- Custom JS file -->
<script type="text/javascript" src="js/script.js"></script>

</body>
</html>

– آخرین فایل بوت استرپ را از سایت getbootstrap.com دانلود و به پروژه اضافه کنید.

– فایل jQuery را دانلود کنید.

– فایل js/script.js را ایجاد کنید.

کد Modal بوت استرپ برای ثبت رکورد جدید را به پروژه اضافه کنید:

<!-- Bootstrap Modals -->
<!-- Modal - Add New Record/User -->
<div class="modal fade" id="add_new_record_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">افزودن رکورد جدید</h4>
            </div>
            <div class="modal-body">

                <div class="form-group">
                    <label for="first_name">نام</label>
                    <input type="text" id="first_name" placeholder="نام" class="form-control"/>
                </div>

                <div class="form-group">
                    <label for="last_name">نام خانوادگی</label>
                    <input type="text" id="last_name" placeholder="نام خانوادگی" class="form-control"/>
                </div>

                <div class="form-group">
                    <label for="email">ایمیل</label>
                    <input type="text" id="email" placeholder="ایمیل" class="form-control"/>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">انصراف</button>
                <button type="button" class="btn btn-primary" onclick="addRecord()">ثبت رکورد</button>
            </div>
        </div>
    </div>
</div>
<!-- // Modal -->

کد Modal بوت استرپ برای ویرایش و بروز رسانی رکورد را به پروژه اضافه کنید:

<!-- Modal - Update User details -->
<div class="modal fade" id="update_user_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">بروز رسانی</h4>
            </div>
            <div class="modal-body">

                <div class="form-group">
                    <label for="update_first_name">نام</label>
                    <input type="text" id="update_first_name" placeholder="نام" class="form-control"/>
                </div>

                <div class="form-group">
                    <label for="update_last_name">نام خانوادگی</label>
                    <input type="text" id="update_last_name" placeholder="نام خانوادگی" class="form-control"/>
                </div>

                <div class="form-group">
                    <label for="update_email">ایمیل</label>
                    <input type="text" id="update_email" placeholder="ایمیل" class="form-control"/>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">انصراف</button>
                <button type="button" class="btn btn-primary" onclick="UpdateUserDetails()" >بروز رسانی</button>
                <input type="hidden" id="hidden_user_id">
            </div>
        </div>
    </div>
</div>
<!-- // Modal -->

مرحله 6: ساخت jQuery جی کوئری:

لطفا توجه داشته باشید: اسکریپت باید در فایل js/script.js باشد.

اضافه کردن عملکردها
1- کد افزودن رکورد جدید:

// Add Record
function addRecord() {
    // get values
    var first_name = $("#first_name").val();
    first_name = first_name.trim();
    var last_name = $("#last_name").val();
    last_name = last_name.trim();
    var email = $("#email").val();
    email = email.trim();

    if (first_name == "") {
        alert(" نام مورد نیاز است!");
    }
    else if (last_name == "") {
        alert("نام خانوادگی مورد نیاز است!");
    }
    else if (email == "") {
        alert("ایمیل مورد نیاز است!");
    }
    else {
        // Add record
        $.post("ajax/create.php", {
            first_name: first_name,
            last_name: last_name,
            email: email
        }, function (data, status) {
            // close the popup
            $("#add_new_record_modal").modal("hide");

            // read records again
            readRecords();

            // clear fields from the popup
            $("#first_name").val("");
            $("#last_name").val("");
            $("#email").val("");
        });
    }
}

2- کد خواندن رکورد:

// READ records
function readRecords() {
    $.get("ajax/read.php", {}, function (data, status) {
        $(".records_content").html(data);
    });
}

3- کد دریافت جزئیات رکورد: 

function GetUserDetails(id) {
    // Add User ID to the hidden field
    $("#hidden_user_id").val(id);
    $.post("ajax/details.php", {
            id: id
        },
        function (data, status) {
            // PARSE json data
            var user = JSON.parse(data);
            // Assign existing values to the modal popup fields
            $("#update_first_name").val(user.first_name);
            $("#update_last_name").val(user.last_name);
            $("#update_email").val(user.email);
        }
    );
    // Open modal popup
    $("#update_user_modal").modal("show");
}

4- کد بروزرسانی رکورد: 

function UpdateUserDetails() {
    // get values
    var first_name = $("#update_first_name").val();
    first_name = first_name.trim();
    var last_name = $("#update_last_name").val();
    last_name = last_name.trim();
    var email = $("#update_email").val();
    email = email.trim();

    if (first_name == "") {
        alert(" نام مورد نیاز است!");
    }
    else if (last_name == "") {
        alert("نام خانوادگی مورد نیاز است!");
    }
    else if (email == "") {
        alert("ایمیل مورد نیاز است!");
    }
    else {
        // get hidden field value
        var id = $("#hidden_user_id").val();

        // Update the details by requesting to the server using ajax
        $.post("ajax/update.php", {
                id: id,
                first_name: first_name,
                last_name: last_name,
                email: email
            },
            function (data, status) {
                // hide modal popup
                $("#update_user_modal").modal("hide");
                // reload Users by using readRecords();
                readRecords();
            }
        );
    }
}

5- کد حذف رکورد: 

function DeleteUser(id) {
    var conf = confirm("آیا مطمئنید که می‌خواهید این کاربر را حذف کنید؟");
    if (conf == true) {
        $.post("ajax/delete.php", {
                id: id
            },
            function (data, status) {
                // reload Users by using readRecords();
                readRecords();
            }
        );
    }
}

6- کد بارگزاری صفحه بدون رفرش: 

$(document).ready(function () {
    // READ records on page load
    readRecords(); // calling function
});

در نهایت اگر شما کد خود را اجرا کنید، باید بتوانید عملیات crud انجام دهید.

خروجی نهایی پروژه عملیات CRUD در PHP :

خب آموزش به پایان رسید امیدوارم مفید واقع شده باشد. در صورت بروز هرگونه مشکل در کدنویسی یا هر گونه سوال در مورد این پروژه می توانید از قسمت دیدگاه ها ما را در جریان بگذارید.

موفق باشید.

[zarinpalPaidDownloads id=”2″]