Cek Data Menggunakan jQuery dan Ajax | Validasi Form Menggunakan jQuery dan Ajax | Validasi Data Menggunakan jQuery dan Ajax

Saad Abdurrazaq Tue, October 21, 2014 16 Comments 10,264 views
Cek-Data-Menggunakan-jQuery-dan-Ajax-|-Validasi-Form-Menggunakan-jQuery-dan-Ajax-|-Validasi-Data-Menggunakan-jQuery-dan-Ajax

Hello All, pada kesempatan kali ini saya akan sharing atau berbagi tentang cara cek data menggunakan jQuery dan Ajax. Skrip validasi form ini dibuat untuk mengecek data, apakah data tersedia dalam database ataukah tidak? Jika tidak tersedia, maka secara otomatis komputer mengizinkan user untuk menambahkan data baru, jika data tersedia di database maka secara otomatis komputer melarang user untuk menginput data dan mengharuskan untuk menggantinya

Sebelum Anda mempelajarinya, saya asumsikan paling tidak Anda harus terlebih dahulu memahami HTML, CSS, PHP, MySQL, jQuery dan AJAX. memahami saja, tidak harus menguasainya. kalo menguasai? itu lebih bagus lagi!lalu kenapa saya asumsikan untuk memahami HTML, CSS, PHP, MySQL, jQuery dan AJAX? karena kita akan mainan semua elemen itu tanpa terkecuali. Ok, langsung saja kita meluncur ke scriptnya.

STEP 1: Buatlah databasenya terlebih dahulu untuk menampung data-datanya. Agar Anda tidak repot dalam membuat database, Saya sudah sertakan databasenya yang bisa Anda download pada artikel ini.

STEP 2: Buatlah file dan beri nama cekuser.php. File ini merupakan form untuk menginput NIS dan password, dan memvalidasinya. Tidak usah panjang lebar langsung ketikkan saja scriptnya di bawah ini:

<html>
<head>
<script src="jquery-1.4.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

<style type="text/css">

.form-div .label {
display: block;
float: left;
width: 150px;
text-align: right;
margin-right: 5px;
}
.form-div .form-row {
padding: 5px 0;
clear: both;
width: 700px;
}

.form-div label.error {
width: 250px;
display: block;
float: left;
color: red;
padding-left: 10px;
background: url(unvalid.gif) no-repeat;
}
.form-div input {
width: 180px;
float: left;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:11px;
}
.form-div label.valid {
width: 24px;
background: url(true.png) center no-repeat;
display: inline-block;
text-indent: -9999px;
}

.error{background: #FFEBE8;}

</style>

<script>
$(document).ready(function()
{
$("#username").change(function()
{
var username = $("#username").val();
$("#pesan").html("<img src='loading.gif'>Cek username ...");

if(username=='')
{
$("#pesan").html('<img src="salah.png"> username tidak boleh kosong');
$("#username").css('border', '3px #C33 solid');
}
else
$.ajax({type: "POST", url: "validation.php", data: "username="+username, success:function(data)
{
if(data==0)
{
$("#pesan").html('<img src="true.png">');
$("#username").css('border', '3px #090 solid');
}
else
{
$("#pesan").html('<img src="salah.png"> username telah digunakan');
$("#username").css('border', '3px #C33 solid');
}

} });
})

$("#kirim").click(function()
{
var username = $("#username").val();
$("#pesan").html("<img src='loading.gif'>Cek username ...");

if(username=='')
{
$("#pesan").html('<img src="salah.png"> username tidak boleh kosong');
$("#username").css('border', '3px #C33 solid');
}
else
$.ajax({type: "POST", url: "validation.php", data: "username="+username, success:function(data)
{
if(data==0)
{
$("#pesan").html('<img src="true.png">');
$("#username").css('border', '3px #090 solid');
}
else
{
$("#pesan").html('<img src="salah.png"> username telah digunakan');
$("#username").css('border', '3px #C33 solid');
}

} });
})

$("#tambahakun").validate({

rules:{
password:{required: true, minlength: 5},
ulangipassword:{required: true, equalTo: "#password"}
},

messages:{
password:{required: '.Password harus diisi', minlength: '.Password minimal 5 karakter'},
ulangipassword:{required: '.Tidak boleh kosong', equalTo: '.Isi harus sama dengan Password'}
},

success: function(label)
{
label.text('OK!').addClass('valid');
}

});

});
</script>
</head>
<body>
<?php
mysql_connect("localhost", "root", "qwertyuiop123");
mysql_select_db("crud");

if(isset($_POST['kirim']))
{
$user = $_POST['username'];
$pass = md5($_POST['password']);

$cekuser = mysql_num_rows(mysql_query("select nis from login where nis = '$user' "));

if(empty($user))
{
echo "<div class='error'><b>ERROR:</b><p class='alert'> NIS harus diisi!</p></div><br/>";
}
else

if($cekuser>0)
{
echo "NIS sudah ada, silahkan ganti NIS Anda";
}
else
{
mysql_query("insert into login(nis, password) values('$user','$pass')");
echo "<script type='text/javascript'>alert('username berhasil ditambah');</script>";
}
}
?>

<div class="form-div">
<form method="POST" action="<?php $_SERVER['PHP_SELF']; ?>" id="tambahakun">

<div class="form-row">
<span class="label">NIS:</span>
<input type="text" id="username" name="username"><span id="pesan"></span></p>
</div>

<div class="form-row">
<span class="label">Password:</span>
<input type="password" id="password" name="password"></p>
</div>

<div class="form-row">
<span class="label">Ulangi Password:</span>
<input type="password" id="ulangipassword" name="ulangipassword"></p>
</div>

<div class="form-row">
<input type="submit" value="Save" name="kirim" id="kirim">
</div>

</form>
</div>

</body>
</html>

STEP 3: Kita buat file lalu kia beri nama inputuser.php untuk membuat koneksi ke database sekaligus untuk mengecek data yang dinput apakah tersedia atau tidak? Inilah scriptnya:

<?php
mysql_connect("localhost", "root", "qwertyuiop123");
mysql_select_db("crud");

$user = $_POST['username'];
$pass = $_POST['password'];

$cekuser = mysql_num_rows(mysql_query("select username from login where nis = '$user' "));
if($cekuser>0)
{
echo "NIS sudah ada, silahkan ganti NIS Anda";
}
else
{
mysql_query("insert into login(nis, password) values('$user','$pass')");
echo "<script type='text/javascript'>alert('username berhasil ditambah');</script>";
}

?>

STEP 4: Kita buat file dan beri nama validation.php. File ini juga untuk memvalidasi data yang kita input. Berikut scriptnya:

<?php
mysql_connect("localhost", "root", "qwertyuiop123");
mysql_select_db("crud");

$sql = mysql_query("select*from login where nis = '$_POST[username]';");
$cocok = mysql_num_rows($sql);

echo $cocok;
?>

Silahkan cocokkan kembali database dan datanya agar dapat tersambung, lalu jangan lupa sediakan gambarnya. Untuk script dan gambarnya secara keseluruhan bisa Anda download di sini

  Cek Data Menggunakan AJAX (57.4 KiB, 1,332 hits)

oh ya, untuk demonya, saya sertakan dalam bentuk gambar.


dan

akhirnya, sampai jumpa di sesi berikutnya.

Is a web enthusiast from Indonesia. kafeinkode was created and written by Saad Abdurrazaq, it is built on WordPress. Love working with WordPress, programming, blogging, internet marketing, and all about computer soft skills.

16 comments

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. bayuido@gmail.com'

    kok gak seperti kayak gambar ya? kayak gambar centang dan silangnya gak ada.

    Reply
    • agan harus punya gambarnya dulu.Silahkan baca lagi baik2 perintahnya! sebelumnya Anda harus sudah memahami HTML, CSS, PHP dan jQuery, Pertanyaan Anda menunjukkan bahwa Anda belum memahami CSS

      Reply
  2. didik@gmail.com'

    Gan, ini kan untuk yang terstruktur, nah kalo validasi kaya gini tapi dalam sebuah framework gmana caranya? Framework yang saya gunakan CodeIgniter, mohon bantuannya gans!

    Reply
    • Ane belum mainan framework sob. Singkatnya biar kode ini dapat diimplementasikan di framework, agan harus paham aturan framework, paham OOP dan paham MVC. Itu mungkin. nanti ane akan coba di yii. Seandainya berhasil, ane posting di blog ini.

      Reply
  3. zfadli00@gmail.com'

    bentuk gambar demo nya beda dengan skrip dan projex download rar nya. gimana ini yang buat tutorial. biar banyak yang coment ya ? bukan gini cara nya. lagian itu validasi usename nya gagal terus, yg di validasi itu username atau nis nya ? database projexnya pun sepertinya potongan dari suatu projex akademik sekolah. buat tutorialnya mesti tidak begitu, harus poin2 penting aja lah.

    Reply
    • Itu memang sudah saya rubah download project rar-nya, tapi mungkin belum saya rubah bentuk gambar demonya ataupun skrip yg tertulis di dalam syntax highlighternya. Dalam waktu dekat in sya allah akan saya sesuaikan. Lalu, yg saya jadikan acuan adalah download project rarnya, bukan gambar demonya, atau skrip yang tertulis di di syntax highlighternya. Sebelum saya upload project rarnya, sudah saya uji terlebih dahulu, dan berhasil, akhirnya saya upload. Jika Anda tidak berhasil menjalankan script di atas, mungkin ada keteledoran pada diri Anda, baiknya Anda teliti lagi, sambil saya teliti juga skripnya, barangkali kesalahan ada pada saya. Trims atas feedbacknya.

      Reply
  4. akatsuki_778@ymail.com'

    mas numpang nanya saya agak dikit bingung bkanya perintah validasi.php dan inputuser.php kurng lebih sma dan klo inputuser.php itu terhubung ke mana klo validasi.php ada terhubung saya periksa di cekuser. dan saya hapus inputuser.php tetap ngaruh validasinya.. tlng penjelasanya thnx atas postinganya

    Reply
  5. zulkiflikursani@gmail.com'

    validasi supaya tdk duplikat user gmana yah makasih..

    Reply
  6. hhakiki@yahoo.com'

    maaf gan bukannya saya menyalahkan agan kalo ngasih solusi kata2 nya seakan2 merendahkan orang lain coba deh baca lagi gan “anda belum paham html css ato sebagainya .. ” saya baca dari balesannya agan dari coment2 orang lain yang meminta bantuan bukannya ngomong baik2 malah ngomong kurang paham anda salah kalo memakai kata2 itu .. saya di sini hanya saran aja .. sharinglah ilmu agan dengan kata2 baik jangan merendahkan 🙂

    Reply
  7. distra.galaxy@gmail.com'

    gan kalau validasi yang cek data username sudah ada yg pakai itu dibalik gmna jd hanya username yang ada tersedia di database saja yang diijinkan, kalau seperti itu gmna source code nya gan bagian mana yang harus dignti trimakasih sebelumny

    Reply