Cara Mengecek Username yang Sama dengan Ajax jQuery

Cara mengecek username yang sama dengan Ajax jQuery, dimana kita ingin si user memasukan nama yang tidak sama pada sebuah database, seperti layaknya ketika menginputkan sebuah username di sebuah game tetapi nama tidak boleh sama, pasti teman-teman yang suka bermain game pernah mengalaminya ya, oke lalu bagaiamana cara membuatnya simak terus ya teman-teman.

Membuat cara mengecek username yang sama dengan Ajax jQuery, cukup simple dimana teman-teman buat terlebih dahulu databasenya, simple saja, cukup id dan user saja, oke jika sudah silahkan teman-teman buat file index.php nya dengan kode seperti ini:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="container">
	<h1>Check Nama</h1>
	<div class="form-group">
		<input class="form-control" placeholder="Check Nama dsini" id="username">
	</div>
	<div class="output"></div>
</div>
</body>
</html>
<script type="text/javascript">
	$(document).ready(function(){
		var app = {
			check: function(){
				var userVal = $("#username").val();
				$.ajax({
					url: "data.php",
					method: "POST",
					data: {userVal: userVal},
					success: function(response){
						$(".output").html(response).fadeIn("slow")
						
					}
				})
			}
		}

	$("#username").keyup(app.check)
	})
</script>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Check Nama</h1>

</div>

</div>

</body>

</html>

$(document).ready(function(){

var app = {

check: function(){

var userVal = $("#username").val();

$.ajax({

url: "data.php",

method: "POST",

data: {userVal: userVal},

success: function(response){

$(".output").html(response).fadeIn("slow")

}

})

}

$("#username").keyup(app.check)

})

</script>

Silahkan teman-teman lihat terlebih dahulu, disini saya membuat simple templatenya dengan id username, dan sebuah tag div untuk outputnya. Lalu disini ajaxnya saya saya passing ke web service dengan nama data.php, dengan method post, dan seperti biasa datanya untuk memasukan valuenya, jika success tulisan “data sudah ada atau nama berhasil di konfirmasi akan tampil dengan slow”, oke sekarang langsung saja buka data.php nya, dengan kode seperti ini:

<?php  
$koneksi = mysqli_connect("localhost", "root", "", "user");

$userVal = $_POST["userVal"];

$query = mysqli_query($koneksi, "SELECT * FROM tbl_user WHERE user_name = '$userVal'  ");

if(mysqli_num_rows($query) > 0){
	echo "<span class='text-danger'>nama sudah ada</span>";
}else{
	echo "<span class='text-success'>Nama Berhasil di Konfirmasi</span>";
}

?>

<?php

$koneksi = mysqli_connect("localhost", "root", "", "user");

$userVal = $_POST["userVal"];

$query = mysqli_query($koneksi, "SELECT * FROM tbl_user WHERE user_name = '$userVal' ");

if(mysqli_num_rows($query) > 0){

echo "<span class='text-danger'>nama sudah ada</span>";

}else{

echo "<span class='text-success'>Nama Berhasil di Konfirmasi</span>";

}

oke kita lihat lagi, jadi userVal tersebut kita masukan ke dalam variabel userval, lalu di sqlnya kita samakan dengan user_name nama kolom yang ada di table user, kalau username lebih dari 0 atau sudah ada makan akan tercetak dengan nama sudah ada, jika tidak ada atau else, nama berhasil di konfirmasi, oke sekarang kita lihat hasilnya:

Oke saya rasa cukup sampai disini belajar kita tentang cara mengecek username yang sama dengan Ajax jQuery, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.

Cara Mengecek Username yang Sama dengan Ajax jQuery

Facebook DUMET School

Categories