Tutorial Jquery lanjutan : Membuat input form tanpa reload dengan Jquery ajax

tutorial form input dengan ajax jquery tanpa reload

Seiring berjalannya waktu dan pengembangan-pengembangan website di dunia semua fungsi yang di lakukan di dalam web menjadi semakin berkembang , salah satunya adalah membuat penginputan data pada form tidak memerlukan reload lagi .dengan ajax. karena akan mempercepat website dan membuat kerja website lebih ringan. konsep website minimalist yang sekarang sedang berkembang adalah membuat kerja sistem website yang lebih efisien .
ajax (Asynchronous JavaScript and XML) merupakan suatu metode pemograman web yang membuat suatu fungsi pada web tanpa harus reload. ajax di kembangkan dengan menggunakan javascript/jquery .

sebelum belajar ajax dengan jquery, di asumsikan untuk terlebih dahulu mempelajari php, dan javascript dasar .karena pada tutorial ini kita hanya akan mempelajari ajax dengan jquery dan tidak menjelaskan lagi tentang php dasar . untuk belajar tutorial php dasar anda bisa melihat pada tutorial-tutorial php yang sudah kami sediakan .
pada tutorial kali ini kita akan belajar membuat sebuah form untuk menginput data user dan menampilkan data nya secara langsung tanpa harus reload halaman web .banyak yang bisa di lakukan dengan ajax, membuat halaman login,update data, membuat halaman-halaman yang tidak perlu reload, dan lain-lain. tapi pada tutorial dasar ini kita hanya akan mempelajari penginputan data dengan ajax di jquery.
yang kita butuh kan adalah :
– file php/html untuk membuat form dan meletakkan syntax ajax (form.php).
– file aksi pemprosesan inputan form (aksi-form.php).
– file untuk menampilkan data dari database dalam tabel (lihat.php) .
– file koneksi ke database (config.php) .
– file library jquery .

pertama buat form input
berikut saya sertakan syntax form sederhana dan css nya :

<html>
    <head>          
        <style>
            body{
                background:#ECF0F1;
            }
            .lab{
                width:150px;
            }
            .ipt{
                width: 300px;
                height: 30px;
                border:1px solid #fff;
                padding-left: 10px;
                font-size: 12pt;
            }
            #btn{
                width: 200px;
                height: 25px;
                margin-top:10px;
                background: #2ECC71;
                border:1px solid #2ECC71;
                color:#fff;
            }
            h1{
                font-family:sans-serif;
                text-align: center;
            }
            #tbl_input{
                margin-left: 450px;
            }
        </style>
    </head>
    <body>
        <div id="lay">
            <h1>
FORM INPUT AJAX JQUERY CARIKODE.COM</h1>
<div id="form-inp">

                <form method="post" action="" id="form-input">
                    <table id="tbl_input">
<tr>
                            <td class="lab">Nama </td><td><input class="ipt" type="text" name="nama" id="nama"></td>
                        </tr>
<tr>
                            <td class="lab">Alamat </td><td><input class="ipt" type="text" name="alamat" id="alamat"></td>
                        </tr>
<tr>
                            <td class="lab">Umur </td><td><input class="ipt" type="text" name="umur" id="umur"></td>
                        </tr>
<tr>
                            <td class="lab">Pendidikan </td><td><input class="ipt" type="text" name="pendidikan" id="pendidikan"></td>
                        </tr>
<tr>
                            <td></td><td><input id="btn" type="button" value="Insert"></td>
                        </tr>
</table>
</form>
</div>
<div id="tampil">
</div>
</div>
</body>
</html>

<html>

<head>

<style>

body{

background:#ECF0F1;

}

.lab{

width:150px;

}

.ipt{

width: 300px;

height: 30px;

border:1px solid #fff;

padding-left: 10px;

font-size: 12pt;

}

#btn{

width: 200px;

height: 25px;

margin-top:10px;

background: #2ECC71;

border:1px solid #2ECC71;

color:#fff;

}

h1{

font-family:sans-serif;

text-align: center;

}

#tbl_input{

margin-left: 450px;

}

</style>

</head>

<body>

<h1>FORM INPUT AJAX JQUERY CARIKODE.COM</h1>

<tr>

</tr>

<tr>

<td class="lab">Alamat </td><td><input class="ipt" type="text" name="alamat" id="alamat"></td>

</tr>

<tr>

</tr>

<tr>

<td class="lab">Pendidikan </td><td><input class="ipt" type="text" name="pendidikan" id="pendidikan"></td>

</tr>

<tr>

</tr>

</table>

</form>

</div>

</div>

</body>

</html>

buat database dengan tabel user ,

membuat file koneksi ke db dengan nama terserah anda, di tutoria ini saya membuat file koneksi dengan nama config.php

<?php
     mysql_connect("localhost","root","");
     mysql_select_db("carikode_db");
?>

<?php

mysql_connect("localhost","root","");

mysql_select_db("carikode_db");

setelah anda membuat form ,selanjutnya yang di butuhkan adalah file php untuk membuat aksi dari penginputan agar data yang di input masuk ke dalam database .

<?php
include './config.php';
$nama=$_POST['nama'];
$alamat=$_POST['alamat'];
$umur=$_POST['umur'];
$pendidikan=$_POST['pendidikan'];
mysql_query("insert into user VALUES('$nama', '$alamat', '$umur', '$pendidikan')");
?>

<?php

include './config.php';

$nama=$_POST['nama'];

$alamat=$_POST['alamat'];

$umur=$_POST['umur'];

$pendidikan=$_POST['pendidikan'];

mysql_query("insert into user VALUES('$nama', '$alamat', '$umur', '$pendidikan')");

kemudian buat file lihat.php, pada file ini kita membuat tabel yang menyimpan/menampilkan data inputan dari db .

<html>
    <head>
        <?php
        include './config.php';
        ?>

        <style type="text/css" rel="stylesheet">
            #tbl_tampil{
                border-bottom: 1px solid #232323;
                height:300px;
                width:500px;
                text-align: center;
                margin-left: 400px;
            }
            #kpl tr{
                height: 40px;
                background: #2ECC71;
                color:#fff;
            }
            

        </style>
    </head>
    <body>
        <table id="tbl_tampil">
            <thead id="kpl">
<tr>
                    <td>nama</td>
                    <td>alamat</td>
                    <td>umur</td>
                    <td>pendidikan</td>
                </tr>
</thead>
            <tbody>
                <?php
                $query = mysql_query("select * from user");
                while ($q = mysql_fetch_array($query)) {
                    ?>
<tr>
                        <td><?php echo $q['nama']; ?></td>
                        <td><?php echo $q['alamat']; ?></td>
                        <td><?php echo $q['umur']; ?></td>
                        <td><?php echo $q['pendidikan']; ?></td>
                    </tr>
<?php
                }
                ?>
            </tbody>
        </table>
</body>

<html>

<head>

<?php

include './config.php';

#tbl_tampil{

border-bottom: 1px solid #232323;

height:300px;

width:500px;

text-align: center;

margin-left: 400px;

}

#kpl tr{

height: 40px;

background: #2ECC71;

color:#fff;

}

</style>

</head>

<body>

<tr>

<td>alamat</td>

<td>pendidikan</td>

</tr>

</thead>

<tbody>

<?php

$query = mysql_query("select * from user");

while ($q = mysql_fetch_array($query)) {

<tr>

</tr>

<?php

}

</tbody>

</table>

</body>

setelah semua nya siap maka selanjut nya adalah membuat ajax jquery agar tidak memerlukan relad saat penginputan data . berikut saya sertakan syntax ajax sederhana dengan penghubung ke jquery nya .
oh ya jangan lupa untuk meletakkan file library jquery nya di dalam 1 folder dengan file kerja kita yg lain pada tutorial ini agar memudahkan kita saat membuat hubungan dengan jquery di dalam projek .

       <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $('document').ready(function() {
                $('#btn').click(function() {
                    var nama = $('#nama').val();
                    var alamat = $('#alamat').val();
                    var umur = $('#umur').val();
                    var pendidikan = $('#pendidikan').val();
                    var data = 'nama=' + nama + '&alamat=' + alamat + '&umur=' + umur + '&pendidikan=' + pendidikan;
                    $.ajax({
                        type: 'POST',
                        url: "aksi-form.php",
                        data: data,
                        success: function() {
                            $('#tampil').load("lihat.php");
                        }
                    });
                });
            });
        </script>

$('document').ready(function() {

$('#btn').click(function() {

var nama = $('#nama').val();

var alamat = $('#alamat').val();

var umur = $('#umur').val();

var pendidikan = $('#pendidikan').val();

var data = 'nama=' + nama + '&alamat=' + alamat + '&umur=' + umur + '&pendidikan=' + pendidikan;

$.ajax({

type: 'POST',

url: "aksi-form.php",

data: data,

success: function() {

$('#tampil').load("lihat.php");

}

});

</script>

ketikkan syntax di atas di dalam file form.php , usahakan letakkan di dalam tag head, agar syntax lebih terlihat tersusun rapi dan tidak berantakan .
secara keseluruhannya syntax jquery di gabungkan dengan form.php

<html>
    <head>
        <link href="style.css" type="text/css" rel="stylesheet"></link>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $('document').ready(function() {
                $('#btn').click(function() {
                    var nama = $('#nama').val();
                    var alamat = $('#alamat').val();
                    var umur = $('#umur').val();
                    var pendidikan = $('#pendidikan').val();
                    var data = 'nama=' + nama + '&alamat=' + alamat + '&umur=' + umur + '&pendidikan=' + pendidikan;
                    $.ajax({
                        type: 'POST',
                        url: "aksi-form.php",
                        data: data,
                        success: function() {
                            $('#tampil').load("lihat.php");
                        }
                    });
                });
            });
        </script>
        <style>
            .lab{
                width:150px;
            }
            .ipt{
                width: 300px;
                height: 30px;
                border:1px solid #fff;
                padding-left: 10px;
                font-size: 12pt;
            }
            #btn{
                width: 200px;
                height: 25px;
                margin-top:10px;
                background: #2ECC71;
                border:1px solid #2ECC71;
                color:#fff;
            }
            h1{
                font-family:sans-serif;
                text-align: center;
            }
            #tbl_input{
                margin-left: 450px;
            }
        </style>
    </head>
    <body>
        <div id="lay">
            <h1>
FORM INPUT AJAX JQUERY CARIKODE.COM</h1>
<div id="form-inp">

                <form method="post" action="" id="form-input">
                    <table id="tbl_input">
<tr>
                            <td class="lab">Nama </td><td><input class="ipt" type="text" name="nama" id="nama"></td>
                        </tr>
<tr>
                            <td class="lab">Alamat </td><td><input class="ipt" type="text" name="alamat" id="alamat"></td>
                        </tr>
<tr>
                            <td class="lab">Umur </td><td><input class="ipt" type="text" name="umur" id="umur"></td>
                        </tr>
<tr>
                            <td class="lab">Pendidikan </td><td><input class="ipt" type="text" name="pendidikan" id="pendidikan"></td>
                        </tr>
<tr>
                            <td></td><td><input id="btn" type="button" value="Insert"></td>
                        </tr>
</table>
</form>
</div>
<div id="tampil">
</div>
</div>
</body>
</html>

<html>

<head>

$('document').ready(function() {

$('#btn').click(function() {

var nama = $('#nama').val();

var alamat = $('#alamat').val();

var umur = $('#umur').val();

var pendidikan = $('#pendidikan').val();

var data = 'nama=' + nama + '&alamat=' + alamat + '&umur=' + umur + '&pendidikan=' + pendidikan;

$.ajax({

type: 'POST',

url: "aksi-form.php",

data: data,

success: function() {

$('#tampil').load("lihat.php");

}

});

</script>

<style>

.lab{

width:150px;

}

.ipt{

width: 300px;

height: 30px;

border:1px solid #fff;

padding-left: 10px;

font-size: 12pt;

}

#btn{

width: 200px;

height: 25px;

margin-top:10px;

background: #2ECC71;

border:1px solid #2ECC71;

color:#fff;

}

h1{

font-family:sans-serif;

text-align: center;

}

#tbl_input{

margin-left: 450px;

}

</style>

</head>

<body>

<h1>FORM INPUT AJAX JQUERY CARIKODE.COM</h1>

<tr>

</tr>

<tr>

<td class="lab">Alamat </td><td><input class="ipt" type="text" name="alamat" id="alamat"></td>

</tr>

<tr>

</tr>

<tr>

<td class="lab">Pendidikan </td><td><input class="ipt" type="text" name="pendidikan" id="pendidikan"></td>

</tr>

<tr>

</tr>

</table>

</form>

</div>

</div>

</body>

</html>

sekarang saya akan mencoba untuk menjalankan form.php pada browser dan mencoba untuk melakukan penginputan data user :

dan saat tombol insert di klik maka data akan langsung di masukka ke dalam database dan menampilkannya tanpa reload

data yang di input di simpan lalu di tampilkan

perhatikan pada gambar contoh. setelah tombol di klik maka data akan di masukkan ke database dan kemudian di tampilkan dalam bentuk tabel pada bawah form .dan jika saya melakukan inputan lagi :

dan saat tombol di klik lagi untuk menginput :

data yang kedua masuk ke database dan di tampilkan juga tanpa reload , begitu juga seterus nya jika kembali menginput data ,
penjelasan cara kerja ajax adalah :pada form.php kita mengetikkan syntax ajax sederhana ,pada syntax

  var nama = $('#nama').val();

1	var nama = $('#nama').val();

berfungsi untuk menangkap data value nama yang di inputkan,dan

  var alamat = $('#alamat').val();

1	var alamat = $('#alamat').val();

berfungsi untuk menangkap data value alamat . begitu juga dengan data value yang di inputkan. semua akan di jadikan variabel dengan nama seperti nama nya masing-masing . kesemua data value kemudian di jadikan variabel data .
kemudian akan di lanjutkan dengan perintah ajax:

$.ajax({
 type: 'POST',
 url: "aksi-form.php",
 data: data,
 success: function() {
 $('#tampil').load("lihat.php");
 }
 });

$.ajax({

type: 'POST',

url: "aksi-form.php",

data: data,

success: function() {

$('#tampil').load("lihat.php");

}

});

pada type di isi dengan method yang di gunakan pada form untuk menginput data
pada url isi dengan file aksi yang di gunakan untuk penginput data value ke database, di sini kita menggunakan aksi-form.php sebagai file aksi nya
pada data di isi dengan data value yang di input, pada tahap sebelum nya semua data value sudah di masukkan ke dalam variabel data , jadi pada data kita megisi nya dengan data .
dan jika sukses maka akan di tampilkan lihat.php. di sini lihat.php kita gunakan sebagai file php yang menampilkan data dari database dalam bentuk tabel .
jadi dengan ajax tombol submit tidak akan bekerja untuk mereload halaman dan berpindah halaman, melainkan untuk memanggil function aja yang di sudah kita buat .

Posted By: Maskur kelana

Maskur Wong Jatirawa

Senin, 27 Juni 2016

Tutorial Jquery lanjutan : Membuat input form tanpa reload dengan Jquery ajax

Tutorial Jquery lanjutan : Membuat input form tanpa reload dengan Jquery ajax

Next

Prev

0 komentar:

Posting Komentar

CALCULATOR

Facebook

Popular MeMe

Follow Me

Profil blog

Arsip Blog