Blog

Belajarphp > Blog > Tutorial PHP MYSQL > Tutorial CRUD PHP MySQL Dengan jQuery EasyUI

Tutorial CRUD PHP MySQL Dengan jQuery EasyUI

January 17, 2017
Posted by: Nuris Akbar
Category: Tutorial PHP MYSQL

Easy UI adalah plugin jquery yang dapat membantu kita dalam membangun aplikasi berbasis web, terdapat banyak komponen yang sudah siap anda gunakan. pada tutorial ini kita akan belajar membuat aplikasi CRUD sederhana dengan PHP MySQL dan Jquery EasyUI.

Mempersiapkan Database

kita akan menggunakan database MySQL sebagai media untuk menyimpan data, silahkan buat sebuah database baru dengan nama test, lalu buat sebuah tabel dengan nama users dengan struktur seperti berikut :

Membuat Datagrid Untuk Menampilkan Data Pelanggan

Langkah selanjutnya kita akan membuat sebuah tabel dengan datagrid untuk menampilkan data pelanggan.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
	<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
	<h2>Basic CRUD Application</h2>
	<p>Click the buttons on datagrid toolbar to do crud actions.</p>
	
<table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px"
        url="get_users.php"
        toolbar="#toolbar"
        rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>
        <tr>
            <th field="firstname" width="50">First Name</th>
            <th field="lastname" width="50">Last Name</th>
            <th field="phone" width="50">Phone</th>
            <th field="email" width="50">Email</th>
        </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>

</head>

<body>

<h2>Basic CRUD Application</h2>

<p>Click the buttons on datagrid toolbar to do crud actions.</p>

<table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px"

url="get_users.php"

toolbar="#toolbar"

rownumbers="true" fitColumns="true" singleSelect="true">

<thead>

<tr>

<th field="firstname" width="50">First Name</th>

<th field="phone" width="50">Phone</th>

<th field="email" width="50">Email</th>

</tr>

</thead>

</table>

<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>

</div>

</body>

</html>

selanjutnya buatlah sebuah file baru dengan nama conn.php yang akan menyimpan script koneksi php ke database MySQL, berikut scriptnya :

<?php
$conn = @mysql_connect('localhost','root','');
if (!$conn) {
	die('Could not connect: ' . mysql_error());
}
mysql_select_db('test', $conn);

?>

<?php

$conn = @mysql_connect('localhost','root','');

if (!$conn) {

die('Could not connect: ' . mysql_error());

}

mysql_select_db('test', $conn);

lalu buat sebuah file baru dengan nama file get_users.php yang akan kita gunakan untuk menggenerate data pelanggan dalam format Json, berikut adalah script nya :

<?php
	$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
	$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
	$offset = ($page-1)*$rows;
	$result = array();

	include 'conn.php';
	
	$rs = mysql_query("select count(*) from pelanggan");
	$row = mysql_fetch_row($rs);
	$result["total"] = $row[0];
	$rs = mysql_query("select * from pelanggan limit $offset,$rows");
	
	$items = array();
	while($row = mysql_fetch_object($rs)){
		array_push($items, $row);
	}
	$result["rows"] = $items;

	echo json_encode($result);

?>

<?php

$page = isset($_POST['page']) ? intval($_POST['page']) : 1;

$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;

$offset = ($page-1)*$rows;

$result = array();

include 'conn.php';

$rs = mysql_query("select count(*) from pelanggan");

$row = mysql_fetch_row($rs);

$result["total"] = $row[0];

$rs = mysql_query("select * from pelanggan limit $offset,$rows");

$items = array();

while($row = mysql_fetch_object($rs)){

array_push($items, $row);

}

$result["rows"] = $items;

echo json_encode($result);

lalu silahkan akses proyek anda, jika berhasil maka akan muncul tampilan seperti ini :

Membuat Form Untuk Input Dan Edit Data

sekarang kita lanjutnya dengan membuat sebuah form yang akan kita gunakan sebagai interface untuk input dan update data. form ini nantinya akan muncul sebagai pop up ketika diklik :

<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
        closed="true" buttons="#dlg-buttons">
    <div class="ftitle">User Information</div>
    <form id="fm" method="post" novalidate>
        <div class="fitem">
            <label>First Name:</label>
            <input name="firstname" class="easyui-textbox" required="true">
        </div>
        <div class="fitem">
            <label>Last Name:</label>
            <input name="lastname" class="easyui-textbox" required="true">
        </div>
        <div class="fitem">
            <label>Phone:</label>
            <input name="phone" class="easyui-textbox">
        </div>
        <div class="fitem">
            <label>Email:</label>
            <input name="email" class="easyui-textbox" validType="email">
        </div>
    </form>
</div>
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
</div>

<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"

closed="true" buttons="#dlg-buttons">

<div class="ftitle">User Information</div>

<label>First Name:</label>

</div>

</div>

<label>Phone:</label>

</div>

<label>Email:</label>

</div>

</form>

</div>

<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>

</div>

Membuat Fungsi Untuk Memanggil Form

sampai pada tahap ini button untuk selanjutnya kita akan membuat fungsi untuk menambah data baru belum bekerja, kita harus membuat sebuah perintah script untuk mengtriger agar ketika button diklik maka akan memunculkan pop up form, berikut script nya :

function newUser(){
    $('#dlg').dialog('open').dialog('setTitle','New User');
    $('#fm').form('clear');
    url = 'save_user.php';
}

function newUser(){

$('#dlg').dialog('open').dialog('setTitle','New User');

$('#fm').form('clear');

url = 'save_user.php';

}

selanjutnya kita akan menulis script untuk menyimpan data yang di input ke database, silahkan buat sebuah file dengan nama save_users.php dan tulis script berikut :

<?php

$firstname = htmlspecialchars($_REQUEST['firstname']);
$lastname = htmlspecialchars($_REQUEST['lastname']);
$phone = htmlspecialchars($_REQUEST['phone']);
$email = htmlspecialchars($_REQUEST['email']);

include 'conn.php';

$sql = "insert into pelanggan(firstname,lastname,phone,email) values('$firstname','$lastname','$phone','$email')";
$result = @mysql_query($sql);
if ($result){
	echo json_encode(array(
		'id' => mysql_insert_id(),
		'firstname' => $firstname,
		'lastname' => $lastname,
		'phone' => $phone,
		'email' => $email
	));
} else {
	echo json_encode(array('errorMsg'=>'Some errors occured.'));
}
?>

<?php

$firstname = htmlspecialchars($_REQUEST['firstname']);

$lastname = htmlspecialchars($_REQUEST['lastname']);

$phone = htmlspecialchars($_REQUEST['phone']);

$email = htmlspecialchars($_REQUEST['email']);

include 'conn.php';

$sql = "insert into pelanggan(firstname,lastname,phone,email) values('$firstname','$lastname','$phone','$email')";

$result = @mysql_query($sql);

if ($result){

echo json_encode(array(

'id' => mysql_insert_id(),

'firstname' => $firstname,

'lastname' => $lastname,

'phone' => $phone,

'email' => $email

));

} else {

echo json_encode(array('errorMsg'=>'Some errors occured.'));

}

lalu silahkan akses proyek anda, jika berhasil maka akan muncul tampilan seperti ini :

selanjutnya kita akan masuk ke proses edit, dimana ketika users memilih salah satu data dalam grid lalu klik button edit maka akan muncul form dengan membawa data pelanggan yang dipilih :

var row = $('#dg').datagrid('getSelected');
if (row){
    $('#dlg').dialog('open').dialog('setTitle','Edit User');
    $('#fm').form('load',row);
    url = 'update_user.php?id='+row.id;
}

var row = $('#dg').datagrid('getSelected');

if (row){

$('#dlg').dialog('open').dialog('setTitle','Edit User');

$('#fm').form('load',row);

url = 'update_user.php?id='+row.id;

}

lalu kita akan membuat file baru dengan nama update_user.php, file ini akan menghadle jika ada request untuk menampilkan data pada form dan proses update data, berikut script nya :

<?php

$id = intval($_REQUEST['id']);
$firstname = htmlspecialchars($_REQUEST['firstname']);
$lastname = htmlspecialchars($_REQUEST['lastname']);
$phone = htmlspecialchars($_REQUEST['phone']);
$email = htmlspecialchars($_REQUEST['email']);

include 'conn.php';

$sql = "update pelanggan set firstname='$firstname',lastname='$lastname',phone='$phone',email='$email' where id=$id";
$result = @mysql_query($sql);
if ($result){
	echo json_encode(array(
		'id' => $id,
		'firstname' => $firstname,
		'lastname' => $lastname,
		'phone' => $phone,
		'email' => $email
	));
} else {
	echo json_encode(array('errorMsg'=>'Some errors occured.'));
}
?>

<?php

$id = intval($_REQUEST['id']);

$firstname = htmlspecialchars($_REQUEST['firstname']);

$lastname = htmlspecialchars($_REQUEST['lastname']);

$phone = htmlspecialchars($_REQUEST['phone']);

$email = htmlspecialchars($_REQUEST['email']);

include 'conn.php';

$sql = "update pelanggan set firstname='$firstname',lastname='$lastname',phone='$phone',email='$email' where id=$id";

$result = @mysql_query($sql);

if ($result){

echo json_encode(array(

'id' => $id,

'firstname' => $firstname,

'lastname' => $lastname,

'phone' => $phone,

'email' => $email

));

} else {

echo json_encode(array('errorMsg'=>'Some errors occured.'));

}

lalu silahkan akses proyek anda, jika berhasil maka akan muncul tampilan seperti ini :

Menyimpan Data Pelanggan

Langkah selanjutnya kita akan membuat sebuah function javascript yang akan bertugas menghandle perintah untuk menyimpan data pelanggan, function ini akan dijalankan ketika pengguna melakukan klik pada button submit.

function saveUser(){
    $('#fm').form('submit',{
        url: url,
        onSubmit: function(){
            return $(this).form('validate');
        },
        success: function(result){
            var result = eval('('+result+')');
            if (result.errorMsg){
                $.messager.show({
                    title: 'Error',
                    msg: result.errorMsg
                });
            } else {
                $('#dlg').dialog('close');        // close the dialog
                $('#dg').datagrid('reload');    // reload the user data
            }
        }
    });
}

function saveUser(){

$('#fm').form('submit',{

url: url,

onSubmit: function(){

return $(this).form('validate');

success: function(result){

var result = eval('('+result+')');

if (result.errorMsg){

$.messager.show({

title: 'Error',

msg: result.errorMsg

});

} else {

$('#dlg').dialog('close'); // close the dialog

$('#dg').datagrid('reload'); // reload the user data

}

});

}

Fungsi Untuk Menghapus Data Pelanggan

selanjutnya kita akan membuat sebuah function javascript untuk menghadle jika pengguna ingin menghapus data pelanggan, berikut script nya :

function destroyUser(){
    var row = $('#dg').datagrid('getSelected');
    if (row){
        $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
            if (r){
                $.post('destroy_user.php',{id:row.id},function(result){
                    if (result.success){
                        $('#dg').datagrid('reload');    // reload the user data
                    } else {
                        $.messager.show({    // show error message
                            title: 'Error',
                            msg: result.errorMsg
                        });
                    }
                },'json');
            }
        });
    }
}

function destroyUser(){

var row = $('#dg').datagrid('getSelected');

if (row){

$.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){

if (r){

$.post('destroy_user.php',{id:row.id},function(result){

if (result.success){

$('#dg').datagrid('reload'); // reload the user data

} else {

$.messager.show({ // show error message

title: 'Error',

msg: result.errorMsg

});

}

},'json');

}

});

}

selanjutnya kita akan membuat sebuah file baru dengan nama destroy_user.php yang akan menghandle jika ada request untuk menghapus data, berikut ini script nya :

<?php

$id = intval($_REQUEST['id']);

include 'conn.php';

$sql = "delete from pelanggan where id=$id";
$result = @mysql_query($sql);
if ($result){
	echo json_encode(array('success'=>true));
} else {
	echo json_encode(array('errorMsg'=>'Some errors occured.'));
}
?>

<?php

$id = intval($_REQUEST['id']);

include 'conn.php';

$sql = "delete from pelanggan where id=$id";

$result = @mysql_query($sql);

if ($result){

echo json_encode(array('success'=>true));

} else {

echo json_encode(array('errorMsg'=>'Some errors occured.'));

}

Script Lengkap Untuk Index

Jika mungkin tadi anda masih bingung dengan potongan potongan script di atas, maka sekarang saya menyertakan kesuluruhan dari script index nya :

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
	<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
	<h2>Basic CRUD Application</h2>
	<p>Click the buttons on datagrid toolbar to do crud actions.</p>
	
	<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
			url="get_users.php"
			toolbar="#toolbar" pagination="true"
			rownumbers="true" fitColumns="true" singleSelect="true">
		<thead>
			<tr>
				<th field="firstname" width="50">First Name</th>
				<th field="lastname" width="50">Last Name</th>
				<th field="phone" width="50">Phone</th>
				<th field="email" width="50">Email</th>
			</tr>
		</thead>
	</table>
	<div id="toolbar">
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
	</div>
	
	<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
			closed="true" buttons="#dlg-buttons">
		<div class="ftitle">User Information</div>
		<form id="fm" method="post" novalidate>
			<div class="fitem">
				<label>First Name:</label>
				<input name="firstname" class="easyui-textbox" required="true">
			</div>
			<div class="fitem">
				<label>Last Name:</label>
				<input name="lastname" class="easyui-textbox" required="true">
			</div>
			<div class="fitem">
				<label>Phone:</label>
				<input name="phone" class="easyui-textbox">
			</div>
			<div class="fitem">
				<label>Email:</label>
				<input name="email" class="easyui-textbox" validType="email">
			</div>
		</form>
	</div>
	<div id="dlg-buttons">
		<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
	</div>
	<script type="text/javascript">
		var url;
		function newUser(){
			$('#dlg').dialog('open').dialog('setTitle','New User');
			$('#fm').form('clear');
			url = 'save_user.php';
		}
		function editUser(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$('#dlg').dialog('open').dialog('setTitle','Edit User');
				$('#fm').form('load',row);
				url = 'update_user.php?id='+row.id;
			}
		}
		function saveUser(){
			$('#fm').form('submit',{
				url: url,
				onSubmit: function(){
					return $(this).form('validate');
				},
				success: function(result){
					var result = eval('('+result+')');
					if (result.errorMsg){
						$.messager.show({
							title: 'Error',
							msg: result.errorMsg
						});
					} else {
						$('#dlg').dialog('close');		// close the dialog
						$('#dg').datagrid('reload');	// reload the user data
					}
				}
			});
		}
		function destroyUser(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
					if (r){
						$.post('destroy_user.php',{id:row.id},function(result){
							if (result.success){
								$('#dg').datagrid('reload');	// reload the user data
							} else {
								$.messager.show({	// show error message
									title: 'Error',
									msg: result.errorMsg
								});
							}
						},'json');
					}
				});
			}
		}
	</script>
	<style type="text/css">
		#fm{
			margin:0;
			padding:10px 30px;
		}
		.ftitle{
			font-size:14px;
			font-weight:bold;
			padding:5px 0;
			margin-bottom:10px;
			border-bottom:1px solid #ccc;
		}
		.fitem{
			margin-bottom:5px;
		}
		.fitem label{
			display:inline-block;
			width:80px;
		}
		.fitem input{
			width:160px;
		}
	</style>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

<!DOCTYPE html>

<html>

<head>

<title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>

</head>

<body>

<h2>Basic CRUD Application</h2>

<p>Click the buttons on datagrid toolbar to do crud actions.</p>

<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"

url="get_users.php"

toolbar="#toolbar" pagination="true"

rownumbers="true" fitColumns="true" singleSelect="true">

<thead>

<tr>

<th field="firstname" width="50">First Name</th>

<th field="phone" width="50">Phone</th>

<th field="email" width="50">Email</th>

</tr>

</thead>

</table>

<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>

</div>

<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"

closed="true" buttons="#dlg-buttons">

<div class="ftitle">User Information</div>

<label>First Name:</label>

</div>

</div>

<label>Phone:</label>

</div>

<label>Email:</label>

</div>

</form>

</div>

<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>

</div>

var url;

function newUser(){

$('#dlg').dialog('open').dialog('setTitle','New User');

$('#fm').form('clear');

url = 'save_user.php';

}

function editUser(){

var row = $('#dg').datagrid('getSelected');

if (row){

$('#dlg').dialog('open').dialog('setTitle','Edit User');

$('#fm').form('load',row);

url = 'update_user.php?id='+row.id;

}

function saveUser(){

$('#fm').form('submit',{

url: url,

onSubmit: function(){

return $(this).form('validate');

success: function(result){

var result = eval('('+result+')');

if (result.errorMsg){

$.messager.show({

title: 'Error',

msg: result.errorMsg

});

} else {

$('#dlg').dialog('close'); // close the dialog

$('#dg').datagrid('reload'); // reload the user data

}

});

}

function destroyUser(){

var row = $('#dg').datagrid('getSelected');

if (row){

$.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){

if (r){

$.post('destroy_user.php',{id:row.id},function(result){

if (result.success){

$('#dg').datagrid('reload'); // reload the user data

} else {

$.messager.show({ // show error message

title: 'Error',

msg: result.errorMsg

});

}

},'json');

}

});

}

</script>

#fm{

margin:0;

padding:10px 30px;

}

.ftitle{

font-size:14px;

font-weight:bold;

padding:5px 0;

margin-bottom:10px;

border-bottom:1px solid #ccc;

}

.fitem{

margin-bottom:5px;

}

.fitem label{

display:inline-block;

width:80px;

}

.fitem input{

width:160px;

}

</style>

</body>

</html>

selamat, sampai pada tahap ini anda sudah bisa membuat aplikasi CRUD sederhana dengan PHP MySQL dan jQuery EasyUI.

Blog

Tutorial CRUD PHP MySQL Dengan jQuery EasyUI

Mempersiapkan Database

Membuat Datagrid Untuk Menampilkan Data Pelanggan

Membuat Form Untuk Input Dan Edit Data

Membuat Fungsi Untuk Memanggil Form

Menyimpan Data Pelanggan

Fungsi Untuk Menghapus Data Pelanggan

Script Lengkap Untuk Index

Artikel Menarik Yang Lain