Cara Membuat Insert Ajax di codeigniter 3

CodeIgniter 3, sebagai framework PHP, menyediakan struktur yang baik untuk mengelola permintaan AJAX. Berikut adalah konsep dasarnya:

Front-end (JavaScript/jQuery): Anda akan menggunakan JavaScript atau library seperti jQuery untuk mengirim permintaan AJAX ke server. Permintaan ini bisa berupa GET untuk mengambil data atau POST untuk mengirim data (misalnya, dari formulir).

Controller (CodeIgniter): Di sisi server, Anda akan memiliki sebuah controller di CodeIgniter yang berfungsi untuk menerima permintaan AJAX. Controller ini akan memproses data yang diterima, berinteraksi dengan model (jika diperlukan), dan kemudian mengirimkan respons kembali.

Model (CodeIgniter): Jika permintaan AJAX memerlukan interaksi dengan database (misalnya, menyimpan data baru, mengambil data, atau menghapus data), controller akan memanggil model yang relevan untuk melakukan operasi tersebut.

Respons: Controller akan mengirimkan respons kembali ke front-end. Respons ini biasanya dalam format JSON (JavaScript Object Notation), yang mudah diproses oleh JavaScript.

Berikut adalah contoh cara membuat insert data menggunakan AJAX di CodeIgniter 3
Controller

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

class Ajax extends CI_Controller {

    public function __construct()
    {
        parent::__construct();
        $this->load->model('Ajax_model');
    }

    public function index()
    {
        $this->load->view('ajax_view');
    }

    public function insert_data()
    {
        $data = array(
            'nama' => $this->input->post('nama'),
            'email' => $this->input->post('email')
        );

        $insert = $this->Ajax_model->insert_data($data);

        if ($insert) {
            $response = array('status' => 'success', 'message' => 'Data berhasil diinsert');
        } else {
            $response = array('status' => 'error', 'message' => 'Data gagal diinsert');
        }

        echo json_encode($response);
    }
}

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

class Ajax extends CI_Controller {

public function __construct()

{

parent::__construct();

$this->load->model('Ajax_model');

}

public function index()

{

$this->load->view('ajax_view');

}

public function insert_data()

{

$data = array(

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

'email' => $this->input->post('email')

);

$insert = $this->Ajax_model->insert_data($data);

if ($insert) {

$response = array('status' => 'success', 'message' => 'Data berhasil diinsert');

} else {

$response = array('status' => 'error', 'message' => 'Data gagal diinsert');

}

echo json_encode($response);

}

Model

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

class Ajax_model extends CI_Model {

    public function insert_data($data)
    {
        $this->db->insert('table_name', $data);
        return $this->db->affected_rows();
    }
}

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

class Ajax_model extends CI_Model {

public function insert_data($data)

{

$this->db->insert('table_name', $data);

return $this->db->affected_rows();

}

View

Berikut adalah contoh cara membuat insert data menggunakan AJAX di CodeIgniter:

Controller

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

class Ajax extends CI_Controller {

    public function __construct()
    {
        parent::__construct();
        $this->load->model('Ajax_model');
    }

    public function index()
    {
        $this->load->view('ajax_view');
    }

    public function insert_data()
    {
        $data = array(
            'nama' => $this->input->post('nama'),
            'email' => $this->input->post('email')
        );

        $insert = $this->Ajax_model->insert_data($data);

        if ($insert) {
            $response = array('status' => 'success', 'message' => 'Data berhasil diinsert');
        } else {
            $response = array('status' => 'error', 'message' => 'Data gagal diinsert');
        }

        echo json_encode($response);
    }
}


Model

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

class Ajax_model extends CI_Model {

    public function insert_data($data)
    {
        $this->db->insert('table_name', $data);
        return $this->db->affected_rows();
    }
}


View

<!DOCTYPE html>
<html>
<head>
    <title>AJAX Insert Data</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <form id="form-insert">
        <label>Nama:</label>
        <input type="text" name="nama" id="nama"><br><br>
        <label>Email:</label>
        <input type="email" name="email" id="email"><br><br>
        <button type="submit" id="btn-submit">Insert Data</button>
    </form>

    <div id="response"></div>

    <script>
        $(document).ready(function() {
            $('#form-insert').submit(function(e) {
                e.preventDefault();

                var nama = $('#nama').val();
                var email = $('#email').val();

                $.ajax({
                    type: 'POST',
                    url: '<?php echo base_url('ajax/insert_data'); ?>',
                    data: {nama: nama, email: email},
                    dataType: 'json',
                    success: function(response) {
                        if (response.status == 'success') {
                            $('#response').html('<p>Data berhasil diinsert!</p>');
                        } else {
                            $('#response').html('<p>Data gagal diinsert!</p>');
                        }
                    }
                });
            });
        });
    </script>
</body>
</html>

Berikut adalah contoh cara membuat insert data menggunakan AJAX di CodeIgniter:

Controller

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

class Ajax extends CI_Controller {

public function __construct()

{

parent::__construct();

$this->load->model('Ajax_model');

}

public function index()

{

$this->load->view('ajax_view');

}

public function insert_data()

{

$data = array(

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

'email' => $this->input->post('email')

);

$insert = $this->Ajax_model->insert_data($data);

if ($insert) {

$response = array('status' => 'success', 'message' => 'Data berhasil diinsert');

} else {

$response = array('status' => 'error', 'message' => 'Data gagal diinsert');

}

echo json_encode($response);

}

Model

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

class Ajax_model extends CI_Model {

public function insert_data($data)

{

$this->db->insert('table_name', $data);

return $this->db->affected_rows();

}

View

<!DOCTYPE html>

<html>

<head>

<title>AJAX Insert Data</title>

</head>

<body>

<label>Email:</label>

<button type="submit" id="btn-submit">Insert Data</button>

</form>

$(document).ready(function() {

$('#form-insert').submit(function(e) {

e.preventDefault();

var nama = $('#nama').val();

var email = $('#email').val();

$.ajax({

type: 'POST',

url: '<?php echo base_url('ajax/insert_data'); ?>',

data: {nama: nama, email: email},

dataType: 'json',

success: function(response) {

if (response.status == 'success') {

$('#response').html('<p>Data berhasil diinsert!</p>');

} else {

$('#response').html('<p>Data gagal diinsert!</p>');

}

});

</script>

</body>

</html>

Pada contoh di atas, kita menggunakan jQuery untuk mengirimkan data dari form ke controller menggunakan AJAX. Kemudian, controller akan memproses data tersebut dan mengembalikan response ke view dalam format JSON. Terakhir, view akan menampilkan response tersebut kepada pengguna.

Dibaca: 204

Baca Juga

Rekomendasi untuk kamu