[trick] membuat crud pop up standar dengan php jquery dan mysql


Langsung Saja Siapkan Database :


langsung masuk ke code :


<!doctype html>
<html lang="en">
<title>jQuery UI Dialog - Modal form</title>
<link type="text/css" href="themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="ui/jquery-1.4.js"></script>
<script type="text/javascript" src="ui/ui.core.js"></script>
<script type="text/javascript" src="ui/ui.draggable.js"></script>
<script type="text/javascript" src="ui/ui.resizable.js"></script>
<script type="text/javascript" src="ui/ui.dialog.js"></script>
<script type="text/javascript" src="ui/effects.core.js"></script>
<script type="text/javascript" src="ui/effects.highlight.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>

<link type="text/css" href="themes/base/udemos.css" rel="stylesheet" />
<style type="text/css">
body { font-size: 62.5%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain {  width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none;  !important; cursor:pointer; position: relative; text-align: center; }
.ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em;  }

<script type="text/javascript">
$(function() {

bgiframe: true,
autoOpen: false,
height: 300,
modal: true,
buttons: {
'Create an account': function() {

var input_data = {

id : $('#id').val(),
nama : $('#nama').val(),
ajax : 1




url : 'selamat.php',
type : 'POST',
data : input_data,
success : function(data){







Cancel: function() {
close: function() {

$('#create-user').click(function() {



autoOpen: false,
height: 180,
modal: true,

buttons: {
"Delete": function(){
var del_id = {id : $("#del_id").val()};

type: "POST",
url: "hapus.php",
data: del_id,
success: function(data){



var element = $(this);
var del_id = element.attr("id");
var info = 'id=' + del_id;
return false;


var id = $(this).attr("id");
var nama = $(this).attr("nama");



return false;




<div id="dialog" title="Create new user">
<p id="validateTips">All form fields are required.</p>

<fieldset id="dialog">
<label for="id">Id</label>
<input type="text" name="id" id="id" />
<label for="nama">Nama</label>
<input type="text" name="nama" id="nama" value="" />


<div id="users-contain">

<h1>Existing Users:</h1>

<table >

<?php     mysql_connect("localhost","root","12345");
$sql=mysql_query("select * from biodata");


<td><?php echo "$data[id]"; ?></td>
<td><?php echo "$data[nama]"; ?></td>

<?php echo "<a href=\"#\" class=\"delbutton\" id=\"$data[id]\">hapus</a>"; ?>  </td>

<td><?php echo "<a href=\"#\" class=\"edit\" id=\"$data[id]\" nama=\"$data[nama]\">edit</a>"; ?></td>

<?php } ?>
<div id="dialog-confirm" title="delete item ?">
<input type="hidden" value='' id="del_id" name="del_id">
Are You Sure ?


<button id="create-user">Create new user</button>

</div><!-- End demo -->


<p>Use a modal dialog to require that the user enter data during a multi-step process.  Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>

</div><!-- End demo-description -->


2. selamat.php


$id = $_POST['id'];
$nama = $_POST['nama'];

if($id != 0){

mysql_query("update biodata set nama='$nama' where id='$id'");


$sql=mysql_query("insert into biodata(id,nama)values('$id','$nama')");

echo"<meta http-equiv='refresh' content='0; url=modal-form.php'>";






mysql_query("delete from biodata where id='$id'");

echo"<meta http-equiv='refresh' content='0; url=modal-form.php'>";


hasil sebagai berikut


semoga membantu dan silahkan ber kreasi y..

download source code disini

Leave a comment


  1. mau tanya kok ga bisa diinsert ya? database dan tabelnya sudah aku buat kok.

  2. Hj Asari

     /  14/12/2014

    Hello, saya dari malaysia. bagus sekali ringkas dan padat..

  3. rangga

     /  21/09/2015

    bagaimana cara menambah tabel data di popupnnya?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: