Cara Insert Update Delete Data Tanpa Loading Halaman dengan PHP dan jQuery

Metode insert yang disertai loading page sangat menguras bandwidth client yang mengakses web kita, selain menguras bandwidth juga memakan waktu dalam proses insert atau update atau delete data.

Turorial kali ini kita menggabungkan PHP dengan jQuery serta ajax dalam melakukan insert tanpa loading halaman ini.

Langsung saja pada tutorialnya yang mau lihat demonya klik link dibawah :

DEMO | Download Source Code

Dari tampilan saya menggunakan bootstrap ya, jadi tutorial ini bukan untuk pemula yang baru belajar atau belum pernah membuat web sama sekali.

File yang diperlukan :

config.php
index.php
header.php

dan file php yang lainnya.

Pada file config.php isi code ini; "membuat koneksi database"

<?php
$conn = new mysqli("localhost", "root", "", "test");
if ($conn->connect_errno) {
echo "Failed to connect to MySQL: (" . $conn->connect_errno . ") " . $conn->connect_error;
}
?>

Pada file index.php isi code dibawah ini :

<?php
include "config.php";
include "header.php";
?>

<div class="panel panel-default">
<div class="panel-body">


<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Add Data
</button>
<br/>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Add Data</h4>
      </div>
      <div class="modal-body">

<form>
<div class="form-group">
    <label for="nm">Nama</label>
    <input type="text" class="form-control" id="nm">
</div>
<div class="form-group">
    <label for="gd">Gender</label>
    <input type="text" class="form-control" id="gd">
</div>
<div class="form-group">
    <label for="pn">Phone</label>
    <input type="text" class="form-control" id="pn">
</div>
<div class="form-group">
    <label for="al">Alamat</label>
    <input type="text" class="form-control" id="al">
</div>

</form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" id="save" class="btn btn-primary">Save changes</button>
      </div>
    </div>
</div>
</div>

<div id="info"></div>

      <br/>
      <div id="viewdata"></div>
    </div>

    <script>
    function viewdata(){
         $.ajax({
       type: "GET",
       url: "php/getdata.php"
        }).done(function( data ) {
      $('#viewdata').html(data);
        });
    }
    $('#save').click(function(){

      var nm = $('#nm').val();
      var gd = $('#gd').val();
      var pn = $('#pn').val();
      var al = $('#al').val();

      var datas="nm="+nm+"&gd="+gd+"&pn="+pn+"&al="+al;

      $.ajax({
         type: "POST",
         url: "php/newdata.php",
         data: datas
      }).done(function( data ) {
        $('#myModal').modal('hide')
        $('#info').html(data);
        viewdata();
      });
    });
    function updatedata(str){

      var id = str;
      var nm = $('#nm'+str).val();
      var gd = $('#gd'+str).val();
      var pn = $('#pn'+str).val();
      var al = $('#al'+str).val();

      var datas="nm="+nm+"&gd="+gd+"&pn="+pn+"&al="+al;

      $.ajax({
         type: "POST",
         url: "php/updatedata.php?id="+id,
         data: datas
      }).done(function( data ) {
        $('#info').html(data);
        viewdata();
      });
    }
    function deletedata(str){

      var id = str;

      $.ajax({
         type: "GET",
         url: "php/deletedata.php?id="+id
      }).done(function( data ) {
        $('#info').html(data);
viewdata();
      });
    }
    </script>
</body>

</div>
<div class="panel-footer"><?php
include 'footer.php';

?></div>
</div>

Dan Untuk file header.php isikan code berikut:

<!DOCTYPE html>
<html>
<head>

    <title>App System</title>
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="assets/js/jquery-ui/jquery-ui.css">
    <script type="text/javascript" src="assets/js/jquery.js"></script>
    <script type="text/javascript" src="assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.js"></script>
    <script type="text/javascript" src="assets/js/jquery-ui/jquery-ui.js"></script>
</head>
<body onload="viewdata()">
    <div class="navbar navbar-default navbar-fixed-top ">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">App System</a>
    <h5>Cara Insert Update Delete Data Tanpa Loading Halaman dengan PHP dan jQuery</h5>

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a id="pesan_sedia" href="#" data-toggle="modal" data-target="#modalpesan"><span class='glyphicon glyphicon-comment'></span> Pesan</a></li>
                    <li><a class="dropdown-toggle" data-toggle="dropdown" role="button" href="#">Hy , Admin&nbsp&nbsp<span class="glyphicon glyphicon-user"></span></a></li>
                </ul>
            </div>
        </div>
    </div>
                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                
                <ins class="adsbygoogle"
                     style="display:inline-block;width:728px;height:15px"
                     data-ad-client="ca-pub-2026348872783475"
                     data-ad-slot="1795313518"></ins>
                <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
    
    <div id="modalpesan" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Pesan Notification</h4>
                </div>
                <div class="modal-body">
                    <?php
                    $periksa=mysql_query("select * from barang where jumlah <=3");
                    while($q=mysql_fetch_array($periksa)){
                        if($q['jumlah']<=3){
                            echo "<div style='padding:5px' class='alert alert-warning'><span class='glyphicon glyphicon-info-sign'></span> Stok <a style='color:red'>". $q['nama']."</a> yang tersisa sudah kurang dari 3 . silahkan pesan lagi !!</div>";
                        }
                    }
                    ?>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                </div>

            </div>
        </div>
    </div>

    <div class="col-md-2">
        <div class="row">

        </div>

        <div class="row"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
        <ul class="nav nav-pills nav-stacked">
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            
            <ins class="adsbygoogle"
                 style="display:inline-block;width:200px;height:90px"
                 data-ad-client="ca-pub-2026348872783475"
                 data-ad-slot="9318580317"></ins>
            <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </ul>


    </div>
    <div class="col-md-10">

pada file getdata.php , pada file ini kita membuat table da menampilkan datanya serta modal bootstrap untuk edit data.

<table class="table table-bordered table-hover">
    <thead>
    <tr>
        <th>Kode</th>
        <th>Nama</th>
        <th>Gender</th>
        <th>Phone</th>
      <th>Alamat</th>
        <th>Action</th>
    </tr>
    </thead>
    <tbody>
<?php
include "config.php";
$res = $conn->query("select * from orang");
while ($row = $res->fetch_assoc()) {
?>

    <tr>
        <td><?php echo $row['kode']; ?></td>
        <td><?php echo $row['nama']; ?></td>
        <td><?php echo $row['gender']; ?></td>
        <td><?php echo $row['phone']; ?></td>
      <td><?php echo $row['alamat']; ?></td>
        <td>
        <a class="btn btn-warning btn-sm" data-toggle="modal" data-target="#myModal<?php echo $row['kode']; ?>"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
        <a class="btn btn-danger btn-sm" onclick="deletedata('<?php echo $row['kode']; ?>')" ><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>


<div class="modal fade" id="myModal<?php echo $row['kode']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel<?php echo $row['kode']; ?>" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel<?php echo $row['kode']; ?>">Edit Data</h4>
      </div>
      <div class="modal-body">

<form>
<div class="form-group">
    <label for="nm">Nama</label>
    <input type="text" class="form-control" id="nm<?php echo $row['kode']; ?>" value="<?php echo $row['nama']; ?>">
</div>
<div class="form-group">
    <label for="gd">Gender</label>
    <input type="text" class="form-control" id="gd<?php echo $row['kode']; ?>" value="<?php echo $row['gender']; ?>">
</div>
<div class="form-group">
    <label for="pn">Phone</label>
    <input type="text" class="form-control" id="pn<?php echo $row['kode']; ?>" value="<?php echo $row['phone']; ?>">
</div>
<div class="form-group">
    <label for="al">Alamat</label>
    <input type="text" class="form-control" id="al<?php echo $row['kode']; ?>" value="<?php echo $row['alamat']; ?>">
</div>

</form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" onclick="updatedata('<?php echo $row['kode']; ?>')" class="btn btn-primary" data-dismiss="modal">Save changes</button>
      </div>
    </div>
</div>
</div>

        </td>
    </tr>
<?php
}
?>
    </tbody>
      </table>

Pada file newdata.php isikan code berikut:
"pada file ini adalah proses penambahan data baru"

<?php
include "config.php";
$nm = $_POST['nm'];
$gd = $_POST['gd'];
$pn = $_POST['pn'];
$al = $_POST['al'];
if($nm != null && $gd != null && $pn != null && $al != null){
$stmt = $conn->prepare("INSERT INTO orang VALUES ('',?,?,?,?)");
$stmt->bind_param('ssss', $nm, $gd, $pn, $al);

if($stmt->execute()){
?>
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Success!</strong> Anda berhasil menambah data.
</div>
<?php
} else{
?>
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Error!</strong> Maaf terjadi kesalahan, data error.
</div>
<?php
}
} else{
?>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Isi semua form area.
</div>
<?php
}
?>

Pada file updatedata.php isi code ini:
"pada file ini berisi code proses update data"

<?php
include "config.php";
if(isset($_GET['id'])){
$stmt = $conn->prepare("update orang set nama=?, gender=?, phone=?, alamat=? where kode=?");
$stmt->bind_param('sssss', $nm, $gd, $pn, $al, $id);

$nm = $_POST['nm'];
$gd = $_POST['gd'];
$pn = $_POST['pn'];
$al = $_POST['al'];
$id = $_GET['id'];

if($stmt->execute()){
?>
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Success!</strong> Anda berhasil mengubah data.
</div>
<?php
} else{
?>
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Error!</strong> Maaf terjadi kesalahan, data error.
</div>
<?php
}
} else{
?>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Maaf anda salah alamat.
</div>
<?php
}
?>

Pada file deletedata.php isikan code ini:
"pada file ini adalah proses penghapusan data"

<?php
include "config.php";
if(isset($_GET['id'])){
$stmt = $conn->prepare("delete from orang where kode=?");
$stmt->bind_param('s', $id);

$id = $_GET['id'];

if($stmt->execute()){
?>
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Success!</strong> Anda berhasil menghapus data.
</div>
<?php
} else{
?>
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Error!</strong> Maaf terjadi kesalahan, data error.
</div>
<?php
}
} else{
?>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Maaf anda salah alamat.
</div>
<?php
}
?>

Pastikan file databasenya dimasukkan di table orang.

Selamat mencoba Insert Update Delete Data Tanpa Loading Halaman dengan PHP dan jQuery, simpel dan mudah yang pastinya tidak memakan bandwidth anda hehe..

™™ Crazy Hack Community ™™

Kamis, 25 Februari 2016

0 Cara Insert Update Delete Data Tanpa Loading Halaman dengan PHP dan jQuery

DEMO | Download Source Code

Ditulis Oleh : ksknf ~ Tips dan Trik Blogspot

0 Comments

Bagaimana Pendapat Anda ?

Rules Blog

Pengunjung Blog Hacking

Social Icons

Menu

About Me

Popular Posts

Your IP

Total Pengunjung

™™Pilih Kategori™™

Followers

Blog Archive