Skip to main content
mencegah dupliksi username gambar1

Mencegah Duplikasi Username dengan Ajax di Codeigniter

Mencegah duplikasi username – dapat dilakukan menggunakan Ajax (Asynchronous JavaScript And XML). Dengan Ajax, validasi dapat dilakukan di sisi klien, yang artinya tidak perlu mereload seluruh halaman karena hanya bagian tertentu saja yang dikirim ke server. Hal ini tentunya akan mempercepat proses dan tidak perlu membuat user yang menginput data , bolak-balik refresh halaman untuk memvalidasi datanya.

Baca:

Pada tutorial ini saya ingin mencoba memvalidasi sebuah form input (bisa digunakan untuk form registrasi), jika ternyata di database, username sudah ada maka akan ditampilkan pesan. Hal ini sangat berguna untuk mencegah duplikasi username saat registrasi.

Perlu diketahui bahwa, untuk dapat memahami Ajax, anda dapat belajar terlebih dahulu Javascript. Yang kemudian dilanjutkan dengan belajar framework nya yakni JQuery. Pada dasarnya tidaklah sulit, dan saya akan bahas tutorialnya satu persatu di website saya ini.

Pada tutorial kali ini saya tetap menggunakan framework Codeigniter, karena saya juga sering mengerjakan project saya dengan codeigniter. Sehingga sekalian membuat tutorialnya dengan codeigniter saja. Dan tampilan hasil akhir seperti gambar di bawah ini:

mencegah dupliksi username gambar2

Gambar: Form Input

Mempersiapkan Konfigurasi Awal Codeigniter

Sebelum membuat kode utamanya, tentunya kita harus melakukan konfigurasi awal untuk pengaturan base_url, database, dan form, serta pada tutorial ini saya juga menyertakan cara untuk menghilangkan index.php nya codeigniter (URL Friendly).

A. Konfigurasi URL Friendly

1. Install codeigniter dan tempatkan di folder htdocs di xampp atau www di wamp.

2. Buat file dengan nama .htaccess dan copas kode dibawah ini, tempatkan di folder codeigniter anda, disini saya menggunakan folder dengan nama “lat”.


RewriteEngine on
RewriteCond $1 !^(index\.php|resources|robots\.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA]

sehingga hasilnya dapat dilihat sebagai berikut:

mencegah dupliksi username gambar3

3.Setelah itu buka application/config/config.php dan edit menjadi kode berikut (kosongkan nilainya):

$config['index_page'] = '';

4. Nah sekarang setiap kali anda membuat controller, misalkan Admin.php maka anda tidak perlu mengaksesnya seperti ini localhost/lat/index.php/admin akan tetapi anda cukup menulis di browser localhost/lat/admin

B. Konfigurasi Base URL

Selanjutnya anda perlu mengkonfigurasi base urlnya agar setiap memanggil file-file yang ada di directory website anda , cukup dengan:

<?php echo base_url('folder/namaFolder');?>

Nah untuk melakukan pengaturannya cukup edit kode di application/config/config.php menjadi seperti di bawah ini (catatan: saya menggunakan folder dengan nama “lat”) :

$config['base_url'] = 'http://localhost/lat/';

C. Buat dan Konfigurasi Database

Buat database dengan nama ajax dengan nama tabel “tbuser”, dengan susunan seperti gambar dibawah ini:

mencegah dupliksi username gambar4

dan lakukan konfigurasi di application/config/database.php dan atur menjadi seperti ini:


'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'ajax',
'dbdriver' => 'mysqli',

D.Aktifkan Libraries dan Helper

Aktifkan beberapa library dan helper di application/config/autoload.php dan atur beberapa kode dibawah ini menjadi seperti ini:

$autoload['libraries'] = array('database');
$autoload['helper'] = array('form','url');

Setelah semua persiapan selesai, maka kita menuju ke pembuatan kode utama yakni , controller , model dan viewnya. Pada view saya tambahkan sedikit dengan Bootstrap.

Membuat File Controller: Main.php

Buat file controller dengan nama Main.php dan tempatkan di directory application/controllers/Main.php dan copas kode dibawah ini:


<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Main extends CI_Controller {

  function index()
   {
    $this->load->view("v_view");
   }

  function checkUsername(){
    $this->load->model('m_main');
    $userName = $this->input->post("username");
    $cekUser = $this->m_main->CekName($userName);
    if ($cekUser > 0){
      echo "ok";
    }
  }
}

Membuat File Model: M_main.php

Buat file model dengan nama M_main.php dan tempatkan di directory application/models/M_main.php serta copas kode dibawah ini:


<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class M_main extends CI_Model{

  function CekName($username) {
    $this->db->where('username',$username);
    $query = $this->db->get('tbuser');
    return $query->num_rows();
  }
}

Membuat File View: v_view.php

Dan terakhir membuat file dengan nama v_view.php dan tempatkan di directory application/views/v_view.php dan jangan lupa untuk copas kode di bawah ini:


<!DOCTYPE html>
<html>
<head>
  <title>Latihan Ajax</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
  <div class="container" style="width:600px">
    <form action="" method="post">
      <label>username</label>
      <input type="text" name="username" id="username" class="form-control" />
      <span id="username_result"></span>
    </form>
  </div>
</body>
</html>
<script>
  $(document).ready(function(){
    $('#username').blur(function(){
      $.ajax({
        type: "POST",
        url: "<?php echo base_url('main/checkUsername');?>",
        data: $(this).serialize(),
        success: function (data){
          if(data=="ok"){
             $('#username_result').html('<font color="red">tidak tersedia</font>');
          } else {
             $('#username_result').html('tersedia');
          }
        }
      });
    });
  });
</script>

Setelah semuanya selesai maka jalankan di browser anda dengan mengakses localhost/namaFolderAnda/main

Penjelasan Singkat

Sebelum dapat menggunakan ajax, anda harus memanggil terlebih dahulu file Jquery, dimana anda bisa gunakan kode di bawah ini:


<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>

Dan jangan lupa untuk memanggil bootstrapnya dengan kode dibawah ini:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

Untuk proses pada ajaxnya sendiri dilakukan dengan kode:


<script>
$(document).ready(function(){
  $('#username').blur(function(){
    $.ajax({
      type: "POST",
      url: "<?php echo base_url('main/checkUsername');?>",
      data: $(this).serialize(),
      success: function (data){
        if(data=="ok"){
          $('#username_result').html('<font color="red">tidak tersedia</font>');
        } else {
          $('#username_result').html('tersedia');
        }
      }
   });
 });
});
</script>

Dimana ajax akan mengeksekusi fungsi di controller Main.php yakni fungsi checkUsername ,sesaat setelah kotak input dengan id=username ditinggalkan atau arah mouse anda pergi menjauh dari kotak input username tadi. Ini dapat terjadi dengan event .blur(). Kemudian jika ajax sudah menerima hasil atau response dari server , jika hasilnya “ok” maka pada bagian form dengan id=username_result akan ditampilkan pesan tidak tersedia, dan begitu juga sebaliknya.

Di bagian controllernya seperti form check login yang pernah saya bahas, dia akan mengecek query dengan num_rows() di model, untuk mencari di database apakah ada username yang diinput. Hasil dari pengecekan ini akan bernilai angka , jika lebih besar dari 0 maka artinya ada data tersebut di database.

Catatan Penulis

Anda bisa download source codenya DISINI. Jika membutuhkan bantuan atau pertanyaan, atau bahkan metode lain yang serupa, silahkan isi kolom komentar. Saya akan sangat senang berdiskusi dengan anda.

Leave a Reply

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