Cara menggunakan php ajax crud

Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara membuat CRUD di Laravel menggunakan Ajax. Sebelum kita lanjut ke materinya, alangkah lebih baiknya kita pahami dulu apa sih Ajax itu ?.

Apa itu Ajax ?

Asynchronous JavaScript and XMLHTTP, atau disingkat AJaX, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Wikipedia

Ajax merupakan cara yang digunakan untuk membangun sebuah website secara dinamis dan interaktif tanpa perlu melakukan reload halaman.

Contoh sederhanya ketika kita melakukan like di Facebook, Twiter dan Instagram. Disitu terdapat proses Ajax dengan mengirimkan data ke server melalui background dan mengirimkan data kembali tanpa perlu reload disisi browser.

Dengan menerapkan Ajax pada website atau aplikasi yang kita bangun akan membuat menjadi lebih interaktif dan mudah untuk digunakan.

Bagaimana Cara Kerja Ajax ?

Berikut ini alur cara kerja Ajax.

1. Client melakukan permintaan Ajax dengan cara mengaktifkan XMLHttpRequest dan melakukan proses request ke server.
2. XMLHttpRequest digunakan agar Ajax bekerja secara asynchronus atau berjalan di background.
3. Server menerima request yang dikirimkan, kemudian mengolah data tersebut di dalam server dan mengirimkan kembali ke browser.
4. Browser akan menerima data yang dikirimkan oleh server tanpa perlu melakukan reload halaman.

Dan untuk tutorial kali ini kita akan menggunakan jQuery untuk membuat Ajax dengan lebih cepat dan sederhana. Sebenernya kita juga bisa membuat Ajax tanpa jQuery, tapi kode-nya akan lebih panjang.

Apa itu jQuery ?

jQuery adalah library JavaScript yang digunakan untuk mempermudah dalam melakukan manipulasi DOM. jQuery bersifat open source dan pada survey yang dilakukan pad Agustus 2022, jQuery digunakan oleh 77% dari 10 juta situs web paling populer.

Contoh Penulisan Ajax dengan Vanilla JavaScript

Berikut ini contoh kode Ajax menggunakan vanilla JavaScript.

let xhr = new XMLHttpRequest();

let data = JSON.stringify({
    title: document.getElementById("title").value,
    content: document.getElementById("content").value,
});

xhr.open("POST", "https://santrikoding.com/api/posts", true);
xhr.send(data);

Contoh Penulisan Ajax dengan jQuery

Dan berikut ini contoh Ajax menggunakan jQuery.

$.ajax({
    url: "https://santrikoding.com/api/posts",
    type: "POST",
    data: {
        "title": $('#title');.val(),
        "content": $("#content").val(),
    },
});

Sampai disini pembahasan kita tentang apa itu Ajax dan jQuery dan di artikel selanjutnya kita akan belajar bersama-sama bagaimana cara mengimplementasikan Ajax jQuery di dalam framework Laravel untuk membuat proses CRUD tanpa reload halaman.

Panduan Lengkap Membuat CRUD dengan AJAX dan Codeigniter - Halo semua, setelah pada artikel sebelumnya kita telah belajar bagaimana membuat CRUD dengan codeigniter murni. Nah, pada artikel kali ini kita akan belajar bagaimana cara membuat CRUD dengan AJAX dan Codeigniter. CRUD (Create , Read , Update and Delete ) merupakan sebuah istilah dalam pemrograman khususnya untuk melakukan proses tambah, baca, perbarui dan menghapus data yang berada di database. Perbedaan dengan artikel CRUD sebelumnya, kali ini ktia menggunakan AJAX sebagai wadah Request post dan get kita ke database, atau gampangnya sebagai ‘jembatan’ penghubung View kita ke controller.

Perbedaan dengan artikel CRUD sebelumnya, kali ini ktia menggunakan AJAX sebagai wadah Request post dan get kita ke database, atau gampangnya sebagai ‘jembatan’ penghubung View kita ke controller.

AJAX (Asynchronous Javascript and XML) adalah suatu metode pada suatu laman web untuk melakukan proses pertukaran data di background. Karena prosesnya yang berada di background / latar belakang, ajax mempunyai beberapa keunggulan jika dibandingkan dengan request action pada form biasa.

Beberapa keunggulan ajax antara lain :

• Proses pertukaran data tidak perlu mereload page / browser.
• Request mengambil dan mengirim data dilakukan secara background.
• Request mengambil dan mengirim data dapat dilakukan lebih dari 1 request tanpa harus menunggu antrian proses sebelumnya.

Melihat beberapa keunggulan ajax tadi, apa kalian merasa sudah saatnya untuk menggunakan AJAX?. Kalau iya. pada tutorial membuat crud dengan AJAX dan Codeigniter ini kita akan bahas secara detail bagaimana pengintegrasian AJAX dan Codeigniter 3.

Yuk, langsung aja ke tutorialnya.

Persiapan Projek

Di Bagian persiapan projek ini, kita akan menyiapkan mulai dari File Assets / resources yang akan kita gunakaan sampai pengkonfigurasian file – file konfigurasi codeigniter.

Install Codeigniter

Untuk langkah pertama, tentu saja kalian harus menginstall Codeigniter pada Direktori Web Server kalian, dan beri nama yang sesuai.

Siapkan Folder Assets

Pada folder assets ini kita akan gunakan sebagai wadah menampung file – file resources seperti :

• Boostrap
• Jquery

Kalian bisa download file – file nya di link ini. Saya sudah siapkan lengkap 🙂

Siapkan file – file nya kemudian atur seperti gambar di bawah :

Sip, file resources yang kita butuhkan sudah siap.

Konfigurasi .htaccess untuk menghapus index.php

Konfigurasi htaccess di langkah ini berguna untuk menghapus /index.php pada saat kita akan mengakses Controller.

Maka dari itu, pindahkan file .htaccess yang berada di /application ke bagian depan.

Pindahkan ke sini :

Kemudian isi dengan kode sebagai berikut :

RewriteEngine on

RewriteCond $1 !^(index\.php|resources|robots\.txt)

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ index.php/$1 [L,QSA]

Menyiapkan Database

1. Masuk ke PHPmyAdmin kalian, kemudian import kan SQL berikut ini untuk membentuk database dan table baru

-- phpMyAdmin SQL Dump

-- version 4.5.2

-- http://www.phpmyadmin.net

--

-- Host: 127.0.0.1

-- Generation Time: Nov 05, 2019 at 08:14 AM

-- Server version: 5.5.64-MariaDB-1ubuntu0.14.04.1

-- PHP Version: 5.6.23

 

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

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_siswa`

--

 

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

 

--

-- Table structure for table `tb_siswa`

--

 

CREATE TABLE `tb_siswa` (

  `noinduk` varchar(5) NOT NULL,

  `nama` varchar(50) DEFAULT NULL,

  `alamat` varchar(100) DEFAULT NULL,

  `hobi` varchar(50) DEFAULT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

 

--

-- Dumping data for table `tb_siswa`

--

 

INSERT INTO `tb_siswa` (`noinduk`, `nama`, `alamat`, `hobi`) VALUES

('1001', 'Wawan Pesugihan', 'Jalan Angker', 'Bermain Bola'),

('1002', 'Iman Alim', 'Jalan. Dekat Masjid', 'Ibadah'),

('1003', 'Febi November', 'Jalan Kebangkitan', 'Bernyanyi'),

('1004', 'Jajang Suranjang', 'Jalan Tubagus Ismail', 'Gulat'),

('1006', 'Gugun Setyawan', 'Jalan Jagakarsa', 'Berenang di Sungai'),

('1007', 'Dadang Suradang', 'Jalan Kebaktian', 'Berburu');

 

--

-- Indexes for dumped tables

--

 

--

-- Indexes for table `tb_siswa`

--

ALTER TABLE `tb_siswa`

  ADD UNIQUE KEY `noinduk` (`noinduk`);

 

/*!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 */;

Akan terbentuk table yang sudah berisi data sebagai berikut :

Mengkonfigurasi File Config Codeigniter

Pada bagian ini, kita akan mengatur file – file konfigurasi codeigniter sesuai dengan projek kita kali ini. File – file yang akan kita atur dapat ditemukan di /application/config .

File yang akan kita atur antara lain :

• Autoload.php
• Routes.php
• Database.php
• Config.php

Baca lebih lengkap tentang file – file konfigurasi codeigniter di artikel sebelumnya.

Autoload.php

Pada autoload, cari dan ubah kode berikut ini menjadi seperti ini :

$autoload['libraries'] = array();

Ubah Menjadi,

$autoload['libraries'] = array('database');

Selanjutnya,

$autoload['helper'] = array();

Ubah Menjadi,

$autoload['helper'] = array('url');

Config.php

Pada config.php, kita akan mengisi bagian base_url :

$config['base_url'] = 'http://localhost/ajax_funtechsy/'; //isi sesuai nama folder projek kalian

Routes.php

Isi dengan kode sebagai berikut :

$route['default_controller'] = 'C_Index'; //Controller Default

$route['404_override'] = '';

$route['translate_uri_dashes'] = FALSE;

 

$route['C_Index/(:any)'] = 'C_Index/$1';

$route['C_Index/(:any)/(:any)'] = 'C_Index/$1/$2';

Pada bagian routes ini, kita mengatur bagaimana suatu controller atau fungsi dapat diakses.

Database.php

Nah, di bagian ini kita mengkoneksikan Codeigniter dengan database. Isi sesuai pengaturan database kalian ya

$db['default'] = array(

    'dsn'   => '',

    'hostname' => '127.0.0.1',

    'username' => 'root',

    'password' => '123',

    'database' => 'db_siswa',

    'dbdriver' => 'mysqli',

    'dbprefix' => '',

    'pconnect' => FALSE,

    'db_debug' => (ENVIRONMENT !== 'production'),

    'cache_on' => FALSE,

    'cachedir' => '',

    'char_set' => 'utf8',

    'dbcollat' => 'utf8_general_ci',

    'swap_pre' => '',

    'encrypt' => FALSE,

    'compress' => FALSE,

    'stricton' => FALSE,

    'failover' => array(),

    'save_queries' => TRUE

);

Controller, Model, dan View 

Pada tahap ini, kita akan membuat dan mengatur Controller, model, dan Views yang akan kita gunakan pada projek membuat crud dengan ajax dan codeigniter.

Controller

Pertama – tama, kita ke bagian controller. Buatlah File baru di /controller kemudian beri nama C_Index.php,.

Setelah itu, isikan dengan kode sebagai berikut :

 <?php

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

 

class C_Index extends CI_Controller {

 

    function __construct(){

        parent::__construct();

        $this->load->model('M_Index'); // Auto load model M_Index pada fungsi construct

    }

 

    public function index()

    {

        $this->load->view('V_Index'); // Memanggil View V_Index

    }

 

    function ambilData(){

        $data = $this->M_Index->getData(); // Menampung value return dari fungsi getData ke variabel data

        echo json_encode($data); // Mengencode variabel data menjadi json format

    }

 

    function ambilDataByNoinduk(){

        $noinduk = $this->input->post('noinduk'); //Menangkap inputan no induk

        $data = $this->M_Index->getDataByNoinduk($noinduk); // Menampung value return dari fungsi getDataByNoinduk ke variabel data

        echo json_encode($data); // Mengencode variabel data menjadi json format

    }

 

    function hapusData(){

        $noinduk = $this->input->post('noinduk');

        $data = $this->M_Index->deleteData($noinduk);

        echo json_encode($data); // Mengencode variabel data menjadi json format

    }

 

    function tambahData(){

        $noinduk    = $this->input->post('noinduk'); //Menangkap inputan no induk

        $nama       = $this->input->post('nama'); //Menangkap inputan nama

        $alamat     = $this->input->post('alamat'); //Menangkap inputan alamat

        $hobi       = $this->input->post('hobi'); //Menangkap inputan hobi

 

        $data = ['noinduk' => $noinduk, 'nama' => $nama, 'hobi' => $hobi , 'alamat' => $alamat];

        $data = $this->M_Index->insertData($data);

        echo json_encode($data); // Mengencode variabel data menjadi json format

    }

 

    function perbaruiData(){

        $noinduk    = $this->input->post('noinduk');

        $nama       = $this->input->post('nama');

        $alamat     = $this->input->post('alamat');

        $hobi       = $this->input->post('hobi');

 

        $data = ['noinduk' => $noinduk, 'nama' => $nama, 'hobi' => $hobi , 'alamat' => $alamat];

 

        $data = $this->M_Index->updateData($noinduk,$data);

         

        echo json_encode($data); // Mengencode variabel data menjadi json format

    }

}

Penjelasan masing – masing kode dapat dilihat di bagian komen ya 🙂 sudah saya sisipkan beberapa penjelasan. Jika kurang jelas dan kurang paham bisa tanyakan di kolom komentar.

Model

 Buatlah file baru pada /model kemudian beri nama M_Index.php.

Setelah itu, isikan dengan kode sebagai berikut :

<?php

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

 

class M_Index extends CI_Model {

 

    function getData(){

        return $this->db->get('tb_siswa')->result(); // me-return hasil dari get tb_siswa

    }

 

    function getDataByNoinduk($noinduk){

        $this->db->where('noinduk',$noinduk); // where no induk

        return $this->db->get('tb_siswa')->result(); // me-return hasil dari get tb_siswa

    }

 

    function deleteData($noinduk){

        $this->db->where('noinduk',$noinduk); // where no induk

        $this->db->delete('tb_siswa'); // mendelete tb_siswa sesuai kondisi di atas

    }

 

    function insertData($data){

        $this->db->insert('tb_siswa',$data); // menginsert pada tb_siswa dengan variabel data

    }

 

    function updateData($noinduk,$data){

        $this->db->where('noinduk',$noinduk); // where no induk

        $this->db->update('tb_siswa',$data); //mengupdate tb_siswa sesuai kondisi di atas

    }

}

View

Buatlah File baru pada /view , Kemudian beri nama V_Index.php

Lalu, isikan dengan kode sebagai berikut : 

<!DOCTYPE html>

<html>

<head>

    <title>Ajax KompiKaleng</title>

    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/bootstrap/css/bootstrap.min.css'); ?>">

    <script type="text/javascript" src="<?php echo base_url('assets/jquery/jquery-3.3.1.min.js'); ?>"></script>

    <script type="text/javascript" src="<?php echo base_url('assets/bootstrap/js/bootstrap.min.js'); ?>"></script>

</head>

<body style="margin: 20px;">

    <div class="panel panel-primary">

        <div class="panel-heading">

            <b class="col-md-10">CRUD Ajax Codeigniter KompiKaleng</b>

            <center><button data-toggle="modal" data-target="#addModal" class="btn btn-success">Tambah Data</button></center>

        </div>

        <div class="panel-body">

            <div class="table-responsive">

                <table class="table table-striped table-bordered table-hover">

                    <thead>

                        <tr>

                            <th>No</th>

                            <th>No.induk</th>

                            <th>Nama</th>

                            <th>Alamat</th>

                            <th>Hobi</th>

                            <th>Action</th>

                        </tr>

                    </thead>

                    <tbody id="tbl_data">

                         

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</body>

 

    <!-- Modal Tambah-->

    <div id="addModal" class="modal fade" role="dialog">

      <div class="modal-dialog">

 

        <!-- Modal content-->

        <div class="modal-content">

          <div class="modal-header">

            <button type="button" class="close" data-dismiss="modal">×</button>

            <h4 class="modal-title">Tambah Data</h4>

          </div>

          <div class="modal-body">

            <form>

                <div class="form-group">

                    <label for="noinduk">No.Induk</label>

                    <input type="text" name="noinduk" class="form-control"></input>

                </div>

                <div class="form-group">

                    <label for="nama">Nama</label>

                    <input type="text" name="nama" class="form-control"></input>

                </div>

                <div class="form-group">

                    <label for="alamat">Alamat</label>

                    <input type="text" name="alamat" class="form-control"></input>

                </div>

                <div class="form-group">

                    <label for="hobi">Hobi</label>

                    <input type="text" name="hobi" class="form-control"></input>

                </div>

 

            </form>

          </div>

          <div class="modal-footer">

           <button type="button" class="btn btn-success" id="btn_add_data">Simpan</button>

           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

          </div>

        </div>

 

      </div>

    </div>

 

    <!-- Modal Edit-->

    <div id="editModal" class="modal fade" role="dialog">

      <div class="modal-dialog">

 

        <!-- Modal content-->

        <div class="modal-content">

          <div class="modal-header">

            <button type="button" class="close" data-dismiss="modal">×</button>

            <h4 class="modal-title">Edit Data</h4>

          </div>

          <div class="modal-body">

            <form>

                <div class="form-group">

                    <label for="noinduk">No.Induk</label>

                    <input type="text" name="noinduk_edit" class="form-control"></input>

                </div>

                <div class="form-group">

                    <label for="nama">Nama</label>

                    <input type="text" name="nama_edit" class="form-control"></input>

                </div>

                <div class="form-group">

                    <label for="alamat">Alamat</label>

                    <input type="text" name="alamat_edit" class="form-control"></input>

                </div>

                <div class="form-group">

                    <label for="hobi">Hobi</label>

                    <input type="text" name="hobi_edit" class="form-control"></input>

                </div>

 

            </form>

          </div>

          <div class="modal-footer">

           <button type="button" class="btn btn-success" id="btn_update_data">Update</button>

           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

          </div>

        </div>

 

      </div>

    </div>

 

</html>

<script type="text/javascript">

    $(document).ready(function(){

        tampil_data();

        //Menampilkan Data di tabel

        function tampil_data(){

            $.ajax({

                url: '<?php echo base_url(); ?>C_Index/ambilData',

                type: 'POST',

                dataType: 'json',

                success: function(response){

                    console.log(response);

                    var i;

                    var no = 0;

                    var html = "";

                    for(i=0;i < response.length ; i++){

                        no++;

                        html = html + '<tr>'

                                    + '<td>' + no  + '</td>'

                                    + '<td>' + response[i].noinduk  + '</td>'

                                    + '<td>' + response[i].nama  + '</td>'

                                    + '<td>' + response[i].alamat  + '</td>'

                                    + '<td>' + response[i].hobi  + '</td>'

                                    + '<td style="width: 16.66%;">' + '<span><button data-id="'+response[i].noinduk+'" class="btn btn-primary btn_edit">Edit</button><button style="margin-left: 5px;" data-id="'+response[i].noinduk+'" class="btn btn-danger btn_hapus">Hapus</button></span>'  + '</td>'

                                    + '</tr>';

                    }

                    $("#tbl_data").html(html);

                }

 

            });

        }

        //Hapus Data dengan konfirmasi

        $("#tbl_data").on('click','.btn_hapus',function(){

            var noinduk = $(this).attr('data-id');

            var status = confirm('Yakin ingin menghapus?');

            if(status){

                $.ajax({

                    url: '<?php echo base_url(); ?>C_Index/hapusData',

                    type: 'POST',

                    data: {noinduk:noinduk},

                    success: function(response){

                        tampil_data();

                    }

                })

            }

        })

        //Menambahkan Data ke database

        $("#btn_add_data").on('click',function(){

            var noinduk = $('input[name="noinduk"]').val();

            var nama = $('input[name="nama"]').val();

            var alamat = $('input[name="alamat"]').val();

            var hobi = $('input[name="hobi"]').val();

            $.ajax({

                url: '<?php echo base_url(); ?>C_Index/tambahData',

                type: 'POST',

                data: {noinduk:noinduk,nama:nama,alamat:alamat,hobi:hobi},

                success: function(response){

                    $('input[name="noinduk"]').val("");

                    $('input[name="nama"]').val("");

                    $('input[name="alamat"]').val("");

                    $('input[name="hobi"]').val("");

                    $("#addModal").modal('hide');

                    tampil_data();

                }

            })

 

        });

        //Memunculkan modal edit

        $("#tbl_data").on('click','.btn_edit',function(){

            var noinduk = $(this).attr('data-id');

            $.ajax({

                url: '<?php echo base_url(); ?>C_Index/ambilDataByNoinduk',

                type: 'POST',

                data: {noinduk:noinduk},

                dataType: 'json',

                success: function(response){

                    console.log(response);

                    $("#editModal").modal('show');

                    $('input[name="noinduk_edit"]').val(response[0].noinduk);

                    $('input[name="nama_edit"]').val(response[0].nama);

                    $('input[name="alamat_edit"]').val(response[0].alamat);

                    $('input[name="hobi_edit"]').val(response[0].hobi);

                }

            })

        });

 

        //Meng-Update Data

        $("#btn_update_data").on('click',function(){

            var noinduk = $('input[name="noinduk_edit"]').val();

            var nama = $('input[name="nama_edit"]').val();

            var alamat = $('input[name="alamat_edit"]').val();

            var hobi = $('input[name="hobi_edit"]').val();

            $.ajax({

                url: '<?php echo base_url(); ?>C_Index/perbaruiData',

                type: 'POST',

                data: {noinduk:noinduk,nama:nama,alamat:alamat,hobi:hobi},

                success: function(response){

                    $('input[name="noinduk_edit"]').val("");

                    $('input[name="nama_edit"]').val("");

                    $('input[name="alamat_edit"]').val("");

                    $('input[name="hobi_edit"]').val("");

                    $("#editModal").modal('hide');

                    tampil_data();

                }

            })

 

        });

    });

</script>

Nah, pada bagian view ini disisipkan script Ajaxnya, kalau kalian kurang paham atau kurang jelas dapat ditanyakan di kolom komentar ya 🙂 .

Karena memang untuk paham script di atas, minimal kalian sudah paham struktur dasar jQuery.

Screenshot

Source Code

Download Source Codenya disini ya gan.

Bagaimana? apakah tutorial Cara Membuat CRUD dengan Ajax dan Codeigniter kali ini berhasil? Kalau belum berhasil, perhatikan langkah – langkahnya sekali lagi ya.

Langkah langkah membuat CRUD?

CRUD PHP itu apa?