در این آموزش قصد داریم به شما نحوه انجام عملیات CRUD درون خطی جدول توسط PHP و jsGrid را نشان بدیم.
JsGrid یک پلاگین جی کوئری می باشد که از قابلیت Ajax پشتیبانی میکند و در javaScript نیز قابل استفاده است و امکان نمایش داده ها در فرمت جدول را برای ما فراهم می کند.
این افزونه jQuery ویژگی های زیادی برای اداره کردن داده ها را دارد.زیرا در سمت کاربر کار می کند و نه در سمت سرور اما برای ثبت کردن (binding) داده ها باید در سمت سرور باشد که با فراخوانی AJAX بتواند به صورت داینامیک laod شود.
عملیات درون خطی ساختن, آپدیت, خواندن و حذف کاملا بوسیله Ajax انجام می شود
در ابتدا اطلاعات جدول را با PHP از دیتابیس mysql خولنده و داخل پلاگین jsGrid لود می کنیم.
در نهایت می بینیم که چطور می شود عملیات CRUD درون خطی جدول مدیریت کرد مثلا یک سطر جدید را به mysql توسط پلاگین jsGrid و PHP اضافه کرد. چطور یک سطر را ویرایش, حذف کنیم.
ساخت جداول دیتابیس
در ابتدا یک جدول به نام sample_data برای قرار گیری مقادیری مانند first_name , last_name , age , gender را به همراه چندین داده از پیش ساخته را ایجاد می کنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
-- -- Table structure for table `sample_data` -- CREATE TABLE `sample_data` ( `id` int(10) NOT NULL, `first_name` varchar(255) NOT NULL, `last_name` varchar(255) NOT NULL, `age` int(3) NOT NULL, `gender` enum('male','female') NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `sample_data` -- INSERT INTO `sample_data` (`id`, `first_name`, `last_name`, `age`, `gender`) VALUES (3, 'net', 'paradis', 1, 'male'), (4, 'hasan', 'shafie', 33, 'female'), (5, 'Cindy', 'Dahl', 24, 'female'), (6, 'George', 'Fagan', 30, 'male'), (7, 'Chelsea', 'Mendoza', 18, 'female'), (8, 'Wayne', 'Hodges', 27, 'male'), (9, 'Keith', 'Watkin', 26, 'male'), (10, 'Eric', 'Smith', 31, 'male'), (11, 'Robert', 'Owens', 42, 'male'), (12, 'Candace', 'Hand', 27, 'female'), (13, 'Hortencia', 'Bell', 30, 'female'), (14, 'William', 'Sosa', 36, 'male'), (15, 'Patricia', 'Davis', 23, 'female'), (17, 'Nancy', 'Sedlacek', 21, 'female'); -- -- Indexes for dumped tables -- -- -- Indexes for table `sample_data` -- ALTER TABLE `sample_data` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `sample_data` -- ALTER TABLE `sample_data` MODIFY `id` int(10) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=18; |
فایل index.php
در ابتدا فایل های کتابخانه jsgrid و jquery را به صفحه اضافه می کنیم.
سپس متد JsGrid را با یک سری از مقادیر مربوط به طول و عرض جدول, فایل php مربوط به هر یک از عملیات delete,insert,update,read برای ارسال درخواست ajax اضافه می کنیم.
در نهایت فیلدهای مربوط به جدول را مشخص می کنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
<html> <head> <title>Inline Table Insert Update Delete in PHP using jsGrid</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" /> <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script> <style> .hide { display:none; } </style> </head> <body> <div class="container"> <br /> <div class="table-responsive"> <h3 align="center">Inline Table Insert Update Delete in PHP using jsGrid</h3><br /> <div id="grid_table"></div> </div> </div> </body> </html> <script> $('#grid_table').jsGrid({ width: "100%", height: "600px", filtering: true, inserting:true, editing: true, sorting: true, paging: true, autoload: true, pageSize: 10, pageButtonCount: 5, deleteConfirm: "Do you really want to delete data?", controller: { loadData: function(filter){ return $.ajax({ type: "GET", url: "fetch_data.php", data: filter }); }, insertItem: function(item){ return $.ajax({ type: "POST", url: "fetch_data.php", data:item }); }, updateItem: function(item){ return $.ajax({ type: "PUT", url: "fetch_data.php", data: item }); }, deleteItem: function(item){ return $.ajax({ type: "DELETE", url: "fetch_data.php", data: item }); }, }, fields: [ { name: "id", type: "hidden", css: 'hide' }, { name: "first_name", type: "text", width: 150, validate: "required" }, { name: "last_name", type: "text", width: 150, validate: "required" }, { name: "age", type: "text", width: 50, validate: function(value) { if(value > 0) { return true; } } }, { name: "gender", type: "select", items: [ { Name: "", Id: '' }, { Name: "Male", Id: 'male' }, { Name: "Female", Id: 'female' } ], valueField: "Id", textField: "Name", validate: "required" }, { type: "control" } ] }); </script> |
فایل fetch_data.php
ابتدا با pdo به جدول mysql خود متصل می شویم و سپس بر اساس متد های ارسال شده از سمت jsGrid کویری SQL مورد نظر را می نویسیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
<?php //fetch_data.php $connect = new PDO("mysql:host=localhost;dbname=testing", "root", ""); $method = $_SERVER['REQUEST_METHOD']; if($method == 'GET') { $data = array( ':first_name' => "%" . $_GET['first_name'] . "%", ':last_name' => "%" . $_GET['last_name'] . "%", ':age' => "%" . $_GET['age'] . "%", ':gender' => "%" . $_GET['gender'] . "%" ); $query = "SELECT * FROM sample_data WHERE first_name LIKE :first_name AND last_name LIKE :last_name AND age LIKE :age AND gender LIKE :gender ORDER BY id DESC"; $statement = $connect->prepare($query); $statement->execute($data); $result = $statement->fetchAll(); foreach($result as $row) { $output[] = array( 'id' => $row['id'], 'first_name' => $row['first_name'], 'last_name' => $row['last_name'], 'age' => $row['age'], 'gender' => $row['gender'] ); } header("Content-Type: application/json"); echo json_encode($output); } if($method == "POST") { $data = array( ':first_name' => $_POST['first_name'], ':last_name' => $_POST["last_name"], ':age' => $_POST["age"], ':gender' => $_POST["gender"] ); $query = "INSERT INTO sample_data (first_name, last_name, age, gender) VALUES (:first_name, :last_name, :age, :gender)"; $statement = $connect->prepare($query); $statement->execute($data); } if($method == 'PUT') { parse_str(file_get_contents("php://input"), $_PUT); $data = array( ':id' => $_PUT['id'], ':first_name' => $_PUT['first_name'], ':last_name' => $_PUT['last_name'], ':age' => $_PUT['age'], ':gender' => $_PUT['gender'] ); $query = " UPDATE sample_data SET first_name = :first_name, last_name = :last_name, age = :age, gender = :gender WHERE id = :id "; $statement = $connect->prepare($query); $statement->execute($data); } if($method == "DELETE") { parse_str(file_get_contents("php://input"), $_DELETE); $query = "DELETE FROM sample_data WHERE id = '".$_DELETE["id"]."'"; $statement = $connect->prepare($query); $statement->execute(); } ?> |
خروجی – عملیات CRUD درون خطی جدول توسط PHP
جمع بندی
خب دیدید به چه راحتی تونستیم یک عملیات CRUD درون خطی جدول توسط PHP را با پلاگین jsGrid انجام بدیم.
استفاده از پلاگین jsGrid جداولی که در پروژه های تحت وب خود می سازیم را بی نهایت ساده و کارامد می کند مثل اینکه با یک اپلیکیشن دسکتاپ کار می کنیم.
کاربر به راحتی می تواند داده های جدول را ویرایش, حذف و اضافه کند بدون آنکه منتظر لود صفحه بعد از هر بار تغییر باشد.
امیدوارم از آموزش عملیات CRUD درون خطی جدول توسط PHP نهایت استفاده را برده باشید .
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید.
