Cara Mudah Membuat Login dan Register di CodeIgniter Dengan Ajax : Proses Register


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

Cara Mudah Membuat Login dan Register di CodeIgniter Dengan Ajax : Proses Register - Halo teman-teman semuanya, melanjutkan dari artikel sebelumnya yaitu Instalasi dan Perispan dair Framework CodeIgniter.

Pada kesempatan kali ini kita semua akan belajar membuat proses Register di Framework CodeIgniter dengan Ajax. Langsung saja.

Silahkan buat file baru dengan nama Register.php di dalam folder application/controllers dan silahkan masukkan kode dibawah ini :

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

class Register extends CI_Controller {

    public function index()
    {
        //load view form register
        $this->load->view('register');
    }

    public function simpan()
    {
        //load model M_user
        $this->load->model('m_user');

        $data = array(
            'nama_lengkap' => $this->input->post('nama_lengkap'),
            'username'       => $this->input->post('username'),
            'password'       => password_hash($this->input->post('password'), PASSWORD_DEFAULT),    
        );

        //insert data via model
        $register = $this->m_user->simpan_register($data);

        //cek apakah data berhasil tersimpan
        if($register) {

            echo "success";

        } else {

            echo "error";

        }

    }

}

Dari kode diatas, kita membuat 2 fungsi di dalam file Register.php kita, yaitu fungsi index dan fungsi simpan. Untuk fungsi index sendiri digunakan untuk menampilkan form dari Register. Sedangkan fungsi simpan sendiri digunakan untuk menyimpan data Register yaang diinputkan dari Form.

Sekarang kita lanjutkan membuat sebuah Model baru, silahakn buat file baru dengan nama M_user.php di dalam folder application/models, dan silahkan masukkan kode berikut ini :

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

class M_user extends CI_model {

    // fungsi simpan data register
    public function simpan_register($data) {

        return $this->db->insert("tbl_users", $data);

    }
}

Dari kode diatas kita membuat sebuah fungsi baru dengan nama simpan_register, dimana fungsi ini digunakan untuk menyimpan data ke tabel users yang dikirim dari controller dan hasilnya akan di return kembali ke controller berupa nilai Bolean, yaitu TRUE atau FALSE.

Dan untuk yang terakhir, silahkan buat file baru dengan nama register.php di dalam folder application/views dan silahkan masukkan kode berikut ini :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <title>Register Akun</title>
  </head>
  <body>

    <div class="container" style="margin-top: 50px">
      <div class="row">
        <div class="col-md-5 offset-md-3">
          <div class="card">
            <div class="card-body">
              <label>REGISTER</label>
              <hr>
                
                <div class="form-group">
                  <label>Nama Lengkap</label>
                  <input type="text" class="form-control" id="nama_lengkap" placeholder="Masukkan Nama Lengkap">
                </div>

                <div class="form-group">
                  <label>Username</label>
                  <input type="text" class="form-control" id="username" placeholder="Masukkan Username">
                </div>

                <div class="form-group">
                  <label>Password</label>
                  <input type="password" class="form-control" id="password" placeholder="Masukkan Password">
                </div>
                
                <button class="btn btn-register btn-block btn-success">REGISTER</button>
              
            </div>
          </div>

          <div class="text-center" style="margin-top: 15px">
            Sudah punya akun? <a href="<?php echo base_url() ?>index.php/login">Silahkan Login</a>
          </div>

        </div>
      </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.all.min.js"></script>

    <script>
      $(document).ready(function() {

        $(".btn-register").click( function() {
        
          var nama_lengkap = $("#nama_lengkap").val();
          var username = $("#username").val();
          var password = $("#password").val();

          if (nama_lengkap.length == "") {

            Swal.fire({
              type: 'warning',
              title: 'Oops...',
              text: 'Nama Lengkap Wajib Diisi !'
            });

          } else if(username.length == "") {

            Swal.fire({
              type: 'warning',
              title: 'Oops...',
              text: 'Username Wajib Diisi !'
            });

          } else if(password.length == "") {

            Swal.fire({
              type: 'warning',
              title: 'Oops...',
              text: 'Password Wajib Diisi !'
            });

          } else {

            //ajax
            $.ajax({

              url: "<?php echo base_url() ?>index.php/register/simpan",
              type: "POST",
              data: {
                  "nama_lengkap": nama_lengkap,
                  "username": username,
                  "password": password
              },

              success:function(response){

                if (response == "success") {

                  Swal.fire({
                    type: 'success',
                    title: 'Register Berhasil!',
                    text: 'silahkan login!'
                  });

                  $("#nama_lengkap").val('');
                  $("#username").val('');
                  $("#password").val('');

                } else {

                  Swal.fire({
                    type: 'error',
                    title: 'Register Gagal!',
                    text: 'silahkan coba lagi!'
                  });

                }

                console.log(response);

              },

              error:function(response){
                  Swal.fire({
                    type: 'error',
                    title: 'Opps!',
                    text: 'server error!'
                  });
              }

            })

          }

        }); 

      });
    </script>

  </body>
</html>

Dari kode diatas, coba perhatikan kode berikut ini :

$(".btn-register").click( function()

Kode diatas adalah sebuah event klik dari jQuery apabila ada sebuah class dengan nama btn-register di klik, maka proses didalamnya akan dijalankan.

Kemudian perhatikan juga kode berikut ini :

var nama_lengkap = $("#nama_lengkap").val();
var username = $("#username").val();
var password = $("#password").val();

Kode diatas merupakan sebuah deklarasi variabel yang mana variabel tersebut isinya mengambil dari sebuah inputan berdasarkan attribute HTML ID.

Kemudian perhatikan juga kode berikut ini :

if (nama_lengkap.length == "") {

  Swal.fire({
      type: 'warning',
      title: 'Oops...',
      text: 'Nama Lengkap Wajib Diisi !'
  });

} else if(username.length == "") {

   Swal.fire({
     type: 'warning',
     title: 'Oops...',
     text: 'Username Wajib Diisi !'
   });

} else if(password.length == "") {

  Swal.fire({
    type: 'warning',
    title: 'Oops...',
    text: 'Password Wajib Diisi !'
  });

} else {

    //proses ajax untuk menyimpan data / proses register

}

Kode diatas digunakan untuk mengecek validasi dari setiap inputan, misalkan jika nama lengkap tidak diisi maka akan mengeluarkan peringatan error yang dihasilkan dari Sweet Alert2. Kurang lebih seperti gambar dibawah ini :


Oke sekarang kita bisa mencoba apakah proses Register sudah bisa digunakan, silahkan ketik http://localhost/ci-register-login/index.php/register maka jika berhasil kurang lebih tampilannya seperti berikut ini :


Dan silahkan kalian coba memasukkan data untuk mencoba register, dan apabila berhasil kalian akan mendapatkan sebuah pesan sukses kurang lebih seperti berikut ini :


Sampai disini pembahasan tentang membuat Proses Register di CodeIgniter dengan Ajax, diartikel selanjutnya kita semua akan belajar membuat proses Login di CodeIgniter dengan menggunakan Ajax. Terima Kasih


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami

KOMENTAR