Live Username Availability Check dengan PHP dan AJAX

Check Username Availability dengan PHP dan Ajax - Kita akan belajar membuat cek ketersediaan username dengan PHP dan Ajax pada suatu form registrasi. Ini sangat penting digunakan ketika kita akan membuat website yang ada fitur registrasi. Agar tidak terjadi duplikasi username, kita validasi dulu pada form registrasinya karena username itu bersifat unik.

Nah, di sesi tutorial ini akan saya jelaskan secara mendetail bagaimana membuat fitur cek username ada atau tidaknya. Untuk memudahkan, tutorial yang saya buat ini memang sengaja tidak saya kasih CSS agar kamu fokus terhadap scriptnya saja.

Dumping kode SQL

-- phpMyAdmin SQL Dump
-- version 4.8.4
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Mar 02, 2019 at 04:04 PM
-- Server version: 10.1.37-MariaDB
-- PHP Version: 7.3.0

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `db_users`
--

-- --------------------------------------------------------

--
-- Table structure for table `users`
--

CREATE TABLE `users` (
  `id` int(11) NOT NULL,
  `username` varchar(40) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `users`
--

INSERT INTO `users` (`id`, `username`) VALUES
(1, 'aantamim'),
(2, 'billgates'),
(3, 'mark');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `users`
--
ALTER TABLE `users`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `users`
--
ALTER TABLE `users`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Buat koneksi.php

<?php
$conn = mysqli_connect('localhost','root','','db_user');
if(!$conn) {
    echo '<h1>Koneksi database error</h1>';
}
?>

Buat index.php

<!DOCTYPE html>
<html>
<head>
    <title>Live Username Availability Check dengan PHP dan AJAX</title>
    <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
    <form>
        <input type="text" id="username" autocomplete="off">
        <div id="result"></div>
    </form>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
    $('#username').keyup(function() {
        var uname = $('#username').val();
        if(uname == 0) {
            $('#result').text('');
        }
        else {
            $.ajax({
                url: 'cek.php',
                type: 'POST',
                data: 'username='+uname,
                success: function(hasil) {
                    if(hasil > 0) {
                        $('#result').text('Username tidak tersedia');
                    }
                    else {
                        $('#result').text('Username tersedia');
                    }
                }
            });
        }
    });
});
</script>

Buat cek.php

<?php
include 'koneksi.php';

$username = $_POST['username'] ? $_POST['username'] : '';

$sql = "SELECT COUNT(*) AS countUsr FROM users WHERE username = '$username'";
$query = mysqli_query($conn, $sql);
$row = mysqli_fetch_array($query);
$count = $row['countUsr'];

echo $count;

?>

Pada tutorial ini saya menunjukkan bagaimana cara untuk mengecek ketersediaan user atau tidak dengan Ajax. Saya menggunakan event keyup untuk mengirim Ajax request untuk mengeceknya. Kamu bisa mengganti dengan event yang lain seperti change.

Telah saya sediakan juga source code dari tutorial ini, kamu bisa mendownload di bawah ini.

Clone via GitHub

Jika kamu merasa artikel ini membantu dan bermanfaat jangan lupa untuk share!