2016

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..

*550*790# Nomor Tidak Terdaftar - Cara Mengatasi

Cara mengatasi *550*790# Nomor Tidak Terdaftar ternyata sangat mudah, dan trik ini belum banyak di share ke facebook. Banyak sekali kebingunngan di antara pelanggan setia Kartu Telkomsel khususnya Kartu simpati yang ngebet bisa mendapatkan Paket Murah 8Gb per bulan. Setelan searching dan googling sana sini akhirnya kami berhasil mengaktifkan Paket Simpati Murah 8Gb per bulan ini hanya dengan isi pulsa 200.000 dan coba tekan *550*501# *550*912#.

IT's WOrks!!

Berikut ini adalah koleksi paket-paket promo Telkomsel dari kode *550*. Dari sekian banyak kode berikut pasti ada sudah mati dan ada yang masih work. Yang masih hidup pun belum tentu berhasil di semua kartu Telkomsel. Jadi siapa yang beruntung saja yang dapat. Silakan dites satu-persatu.

► *550*1#

Paket BB Bulanan MURAH Bonus Pulsa 30hr

1. BB FullBIS + pulsa mulai 25rb/30hr

2. BB Sosialita + pulsa mulai 20rb/30hr

3. BB Lifestyle + pulsa mulai 10rb/30hr

► *550*2# paket BB bulanan.

► *550*3# Rp. 10.000 / 1GB / 7 hari.

► *550*5# Rp. 30.000 Flash 500MB Nasional + 500MB Pulau + 1GB Kota + 2GB MDS (00-09) + Gratis Akses BBM, Line, WA / 30hari.

Rp. 30.000 / 4.5GB / 30 hari.

► *550*6#

► *550*7#

Rp. 20.000 / 1GB / 30 hari selama 3 bulan .

Rp. 10.000 / 1.2GB / 3bln.

► *550*8#

1. Kuota hingga 4.5GB / 1bln Rp 30rb

2. 3GB / 3bln Rp 20rb

3. 1.2GB / 3bln Rp 10rb

► *550*10# Rp. 10.000 / ? / 30 hari.

► *550*20# Rp. 20.000 / 1GB / 30 hari.

► *550*25#

► *550*28# Rp. 0 / 1GB

► *550*30# Rp. 30.000 / 3GB / 30 hari.

► *550*31# Rp. 100.000 / 6GB / 30 hari.

► *550*33# Rp. 60.000 / 3.5GB / 30 hari.

► *550*40# Rp. 40.000 / 2GB / 30 hari.

► *550*50# Rp. 50.000 / 3GB / 30 hari. (tested on Kartu As Sulawesi)

► *550*51# Rp. 25.000 / 1GB

► *550*52#

► *550*55#

1. Mulai 1500 20MB

2. Mulai 2rb 50MB

3. Mulai 5rb 150MB

4. Mulai 25rb 1,5GB

5. Mulai 50rb 4GB

6. Menu lain

midnight 2GB / 7 hari

► *550*60#

► *550*83# Rp. 5.000 / 40MB/ 7 hari.

► *550*84# Rp. 5.000 / 40MB/ 7 hari.

► *550*85# Rp. 5.000 / 40MB/ 7 hari.

► *550*88#

► *550*89# Rp. 5.000 / 40MB/ 7 hari.

► *550*101# Rp. 10.000 / 400MB / 30 hari selama 3 bulan.

► *550*150#

Rp. 30.000 / 4.5GB

Rp. 25.000 /2GB

1. Paket internet 30 Hari

2. Paket internet 90 Hari

► *550*151# Rp. 0 / 500mb / hari selama sebulan.

► *550*153# paket BB.

► *550*204# Rp.b20.000 / 1GB / 30 hari selama 3 bulan.

► *550*222# Rp. 10.000 Paket Unlimited BB Full Service / 30 hari. (tested on Kartu LOOP zona 8)

► *550*223# paket BB Rp. 10.000 / 30hr.

► *550*300# (tested in Jatim)

Paket Internet Khusus Mahasiswa

1. Flash 1.5GB / 30 hari (25.000 harga sesuai lokasi) zona 4 Rp. 36.000

2. Flash 4GB / 30 hari (50.000 harga sesuai lokasi) zona 4 Rp. 60.000

3. Paket Internet Kecepetan Tinggi lainnya

► *550*310#

► *550*312#

► *550*313#

► *550*314#

► *550*321#

► *550*330#

► *550*331# Rp. 50.000 / 2GB + 2GB Datazona / 30 hari. (tested in zona 4)

► *550*332# 4GB.

► *550*345#

► *550*350# promo Kampus mulai Rp. 50.000 / 4GB / 30 hari.

► *550*353#

Rp. 35.000 / 3GB / 30 hari.

Rp. 35.000 / 3GB / 30 hari + 60min per hari.

► *550*355#

► *550*358# Rp. 35.000 / 3GB

► *550*365#

► *550*375#

► *550*473# Rp. 0 / 500MB / 1 hari.

► *550*497#

► *550*501# Rp. 20.000 / 3GB / 30 hari.

► *550*502# Rp. 30.000 / 2GB + 1000min + 1000 SMS / 30 hari.

► *550*505# Rp. 50.000 / 3GB (tested di zona 10)

► *550*530# paket BB Rp. 7.000 30hari.

► *550*600#

► *550*604#

► *550*620#

► *550*730# paket BB

► *550*777#

Rp. 20.000 / 3GB (1GB / 30 hari) / 3 bulan.

Rp. 10.000 / 1.2GB (400MB / 30 hari) / 3 bulan.

Rp. 10.000 / 150MB + 250MB 3G / 90 hari (berlangganan).

► *550*778# 400MB setiap bulan selama 3 bulan.

► *550*790#

1. Paket 30 hari.

Rp. 30.000 / 4.5GB

2. Paket 90 hari.

► *550*801# Rp. 3.000 / 60 Menit + 300 SMS / 1 hr + 200MB / 30 hari.

► *550*804#

► *550*805#

Rp. 20.000 / 2GB / 3bln.

Rp. 20.000 / 1GB / 30 hari selama 3bln.

► *550*882# Rp. 0 / 1GB / 7 hari + 100 menit + SMS / 1 hari.

► *550*890#

PROMO TERBATAS PAKET INTERNET MURAH S&K berlaku

1. Paket Bulanan

Rp. 5rb/500MB/30hr

Rp. 10rb/1GB/30hr

Rp. 30rb/4.5GB/30hr

Rp. 40rb/6GB/30hr

2. Paket 3 Bulanan

Rp. 30rb/4.5GB/90hr (1.5GB/bln)

Rp. 40rb/6GB/90hr (2GB/bln)

3. Paket 1 Tahun

Rp. 20rb/1.2GB/1thn (100MB/bln)

Rp. 50rb/6GB/1thn (500MB/bln)

4. Paket Telpon Murah GRATIS Internet

Telp Siang Rp. 20rb/500min(00.00-17.59)/6hr + 1GB/30hr

Telp Malam Rp. 22rb/500min(17.00-23.59)/6hr + 1GB/30hr

► *550*901#

► *550*902# Rp. 7.000 / 500MB / 30 hari.

► *550*903#

► *550*904# Rp. 25.000 / 2GB

► *550*905# Rp. 35.000 / 2.5GB / 30 hari.

► *550*906#

► *550*907# Rp.55000 / 4.5GB / 30 hari.

► *550*908#

► *550*909# Rp. 80.000 / 8GB / 30 hari.

► *550*910# Rp.100.000 / 10GB / 30 hari.

► *550*911# Rp. 30.000 / 4.5GB (tested in Jabotabek)

► *550*912# Rp. 50.000 / 8GB

► *550*933# Rp. 0 / 1GB

► *550*999#

Selamat Mencoba dan semoga anda BERHASIL mendapatkan Paket Internet Murah 8gb/Bulan melalui Kartu Telkomsel anda. Selamat!!

™™ Crazy Hack Community ™™

Kamis, 25 Februari 2016

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

DEMO | Download Source Code

Selasa, 09 Februari 2016

0 Trik Mendapatkan Token Supoort All Script Apep.Black

Rabu, 03 Februari 2016

0 Kode Paketan Telkomsel Murah

Rules Blog

Pengunjung Blog Hacking

Social Icons

Menu

About Me

Popular Posts

Your IP

Total Pengunjung

™™Pilih Kategori™™

Followers

Blog Archive