Inline Table Insert Update Delete di PHP menggunakan jsGrid
Thursday 5 December 2019
Edit
Create read update dan delete atau yang di singkat dengan CRUD merupakan komponen utama dalam sebuah aplikasi, pasalnya fitur tersebut selalu digunakan untuk membuat master data misalnya tentunya fungsi CRUD ini yang pastinya akan di pakai berulang2. Banyak metode CRUD di php dan banyak style coding crud yang digunakan oleh para developer.
Tapi dipembahasan kali ini saya kan memberikan tutorial singkat membuat CRUD di dalam tabel atau dalam bahasa kerennya Inline Table Insert Update Delete di PHP menggunakan jsGrid, jadi didalam tabel anda dapat melakukan fungsi CRUD yang tentunya sangat memudahkan user dan efisien dalam input data sehingga membeikan user experience yang sangat luar biasa memuaskan.
Untuk membuatnya kita memerlukan plufin tambahan yaitu JSGrid, anda bisa mendownloadnya di sini http://js-grid.com/. Oke setelah mendownload maka buatlah sebuat folder dengan nama editablejs di direktori c:/xampp/htdocs/ kemudian simpan file jsgrid ke dalam folder tersebut.
Langkah selanjutnya adalah membuat database, silahkan anda akses phpmyadmin dan buatlah sebuah database dengan nama testing kemudian di database testing silahkan dumping SQL language berikut ini :
Setelah database di buat maka anda akan mendapatkan tabel dengan nama sample_data.
Lanjut kelangkah berikutnya yaitu membuat file index.php yang nantinya akan menjadi view data dari database dan memaikan fungsi CRUD di dalam tabel, silahkan copy dan pastekan kode dibawah ini kemudian simpan dengan nama index.php ke di rektori c:/xampp/htdocs/editablejs
Nah langkah selanjutnya adalah membuat function data untuk melakukan perintah CRUD yang ada di file sebelumnya, jadi di tutorial ini menggunakan ajax untuk proses CRUD nya, artinya file index.php juga bisa anda ubah extensinya menjadi index.html.
Misalnya, karena proses CRUD dilalukan di file fetch_data.php yang nantinya dikirim berdasarkan perintah di ajax, oke langsung saja silahkan anda copy dan pastekan kode berikut ini kemudian simpan dengan nama fetch_data.php kemudian simpan ke direktori c:/xampp/htdocs/editablejs
Langkah terakhir adalah menjalankan aplikasi nya, silahkan anda akses di browser kesayangan anda dengan mengetikkan URL localhost/editablejs jika berhasil maka anda akan mendapatkan tampilan seperti di bawah ini
sampai tahap ini anda sudah berhasil membuat Inline Table Insert Update Delete di PHP menggunakan jsGrid, silahkan anda coba dan anda praktekkan kode di atas, atau anda masih bingung? tenang saya sudah menyiapkan source code untuk anda download, silahkan anda download di sini
DOWNLOAD
Semoga tutorial ini bisa bermanfaat untuk anda yang sedang ingin membuat Inline Table Insert Update Delete di PHP menggunakan jsGrid, terus mencoba dan jangan pernah menyerah.
Tapi dipembahasan kali ini saya kan memberikan tutorial singkat membuat CRUD di dalam tabel atau dalam bahasa kerennya Inline Table Insert Update Delete di PHP menggunakan jsGrid, jadi didalam tabel anda dapat melakukan fungsi CRUD yang tentunya sangat memudahkan user dan efisien dalam input data sehingga membeikan user experience yang sangat luar biasa memuaskan.
Untuk membuatnya kita memerlukan plufin tambahan yaitu JSGrid, anda bisa mendownloadnya di sini http://js-grid.com/. Oke setelah mendownload maka buatlah sebuat folder dengan nama editablejs di direktori c:/xampp/htdocs/ kemudian simpan file jsgrid ke dalam folder tersebut.
Langkah selanjutnya adalah membuat database, silahkan anda akses phpmyadmin dan buatlah sebuah database dengan nama testing kemudian di database testing silahkan dumping SQL language berikut ini :
-- phpMyAdmin SQL Dump
-- version 4.8.0
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Waktu pembuatan: 04 Des 2019 pada 11.24
-- Versi server: 10.1.31-MariaDB
-- Versi PHP: 7.1.16
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
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: `testing`
--
-- --------------------------------------------------------
--
-- Struktur dari tabel `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 untuk tabel `sample_data`
--
INSERT INTO `sample_data` (`id`, `first_name`, `last_name`, `age`, `gender`) VALUES
(19, 'www.hakkoblogs.com', 'www.hakkoblogs.coms', 5, 'male');
--
-- Indexes for dumped tables
--
--
-- Indeks untuk tabel `sample_data`
--
ALTER TABLE `sample_data`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT untuk tabel yang dibuang
--
--
-- AUTO_INCREMENT untuk tabel `sample_data`
--
ALTER TABLE `sample_data`
MODIFY `id` int(10) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=20;
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 */;
Setelah database di buat maka anda akan mendapatkan tabel dengan nama sample_data.
Lanjut kelangkah berikutnya yaitu membuat file index.php yang nantinya akan menjadi view data dari database dan memaikan fungsi CRUD di dalam tabel, silahkan copy dan pastekan kode dibawah ini kemudian simpan dengan nama index.php ke di rektori c:/xampp/htdocs/editablejs
<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>
Nah langkah selanjutnya adalah membuat function data untuk melakukan perintah CRUD yang ada di file sebelumnya, jadi di tutorial ini menggunakan ajax untuk proses CRUD nya, artinya file index.php juga bisa anda ubah extensinya menjadi index.html.
Misalnya, karena proses CRUD dilalukan di file fetch_data.php yang nantinya dikirim berdasarkan perintah di ajax, oke langsung saja silahkan anda copy dan pastekan kode berikut ini kemudian simpan dengan nama fetch_data.php kemudian simpan ke direktori c:/xampp/htdocs/editablejs
<?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();
}
?>
Langkah terakhir adalah menjalankan aplikasi nya, silahkan anda akses di browser kesayangan anda dengan mengetikkan URL localhost/editablejs jika berhasil maka anda akan mendapatkan tampilan seperti di bawah ini
sampai tahap ini anda sudah berhasil membuat Inline Table Insert Update Delete di PHP menggunakan jsGrid, silahkan anda coba dan anda praktekkan kode di atas, atau anda masih bingung? tenang saya sudah menyiapkan source code untuk anda download, silahkan anda download di sini
DOWNLOAD
Semoga tutorial ini bisa bermanfaat untuk anda yang sedang ingin membuat Inline Table Insert Update Delete di PHP menggunakan jsGrid, terus mencoba dan jangan pernah menyerah.
Happy Coding & Programming