Blog

Belajarphp.net - Belajar Web Programming Gratis > 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 SST, M.Kom
Category: Tutorial PHP MYSQL

No Comments

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>

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);

?>

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);

?>

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>

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';
}

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.'));
}
?>

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;
}

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.'));
}
?>

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
            }
        }
    });
}

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');
            }
        });
    }
}

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.'));
}
?>

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>

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

Nuris Akbar SST, M.Kom

Senior Backend Web Developer Dengan Pengalaman Lebih Dari 8 Tahun, Sekarang Menjadi CTO Di Startup Globalvillage, Founder Academy Diigtal Dan Instruktur Training Di PT Brainamtics Cipta Informatika.

See author's posts

Baca Artikel Terkain Menarik Lain:

Belajar Tutorial PHP MySQL Lengkap Untuk Pemula

Belajar Konsep OOP Dalam Pemograman PHP

Tutorial DataTables Dengan PHP Dan MySQL

Tutorial Membuat Koneksi PHP Dan SQL Server

cara install xampp pada OS windows yang baik dan benar

Senior Backend Web Developer Dengan Pengalaman Lebih Dari 8 Tahun, Sekarang Menjadi CTO Di Startup Globalvillage, Founder Academy Diigtal Dan Instruktur Training Di PT Brainamtics Cipta Informatika.

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

Nuris Akbar SST, M.Kom

Baca Artikel Terkain Menarik Lain:

Author:nuris

Nuris Akbar SST, M.Kom

Baca Artikel Terkain Menarik Lain: