Crud Dengan Serialize jQuery dan Codeigniter

Selamat datang kembali di website tips dan trikĀ Dumet School, pada artikel sebelumnya kita sudah belajar cara input data dengan fungsi serialize() jQuery dan pada kesempatakan kali ini kita akan melanjutkan membuat Crud Dengan Serialize jQuery dan Codeigniter. Di mana pada artikel ini kita akan belajar input data dengan serialize() dan menampilkan data seperti biasa pada table.

Baik langsung saja kita implementasikan, kita buat controller dengan nama controller/Serialize.php

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

class Serialize extends CI_Controller {

	public function __construct()
	{
		parent:: __construct();
		$this->load->helper(array('form','directory','url'));
		$this->load->database();
	}

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

}

Dan buat view dengan nama serialize.php, kemudian buat layoutnya dengan bootstrap

<div class="container">
	<div class="row">
		<div class="col-md-12">
			<h3>Crud Dengan Serialize jQuery dan Codeigniter</h3>
			<form action="" id="form">
				<div class="form-group">
				    <label for="FirstName">First Name:</label>
				    <input type="text" class="form-control" name="FirstName" id="FirstName" placeholder="First Name">
				</div>
				<div class="form-group">
				    <label for="LastName">Last Name:</label>
				    <input type="text" class="form-control" name="LastName" id="LastName" placeholder="Last Name">
				</div>
				<div class="form-group">
				    <label for="age">Age:</label>
				    <input type="text" class="form-control" name="age" id="age" placeholder="Age">
				</div>
			</form>
			<button class="btn btn-primary" id="insert">Save Data</button>
		</div>
	</div>
	<div class="row">
		<div class="col-md-6">
			<div class="response"></div>
		</div>
	</div>
</div>

Maka hasilnya seperti gambar di bawah ini

Crud Dengan Serialize jQuery dan Codeigniter

Selanjutnya kita buat table pada database nya, buat table di dalam database mysql nya

Crud Dengan Serialize jQuery dan Codeigniter

Jika sudah kita buat proses insert data dengan ajax dan serialize, kita akan eksekusi id=”form” yang sudah kita buat pada tag form. Ketikkan script di bawah ini

$(document).on('click','#insert',function(e){
    	e.preventDefault();
	    $.ajax({
	    	url:"<?php echo site_url('serialize/insert_data')?>",
	    	method:"POST",
	    	data:$("#form").serialize(),
	    	beforeSend:function(){
	    		$('.response').html("<span>Loading...</span>")
	    	},success:function(data){
	    		$('form').trigger("reset");
	    		$('.response').hide();
	    	}
	    })
    });

Crud Dengan Serialize jQuery dan Codeigniter

Kemudian kita buat metod dengan nama insert_data() dan buat insert datanya

public function insert_data()
	{
		$data = array(
	        'first_name' => $this->input->post('FirstName'),
	        'last_name' => $this->input->post('LastName'),
	        'age' => $this->input->post('Age')
		);
		$this->db->insert('crud_serialize', $data);
		
	}

Jika sudah save dan refresh pada browsernya kemudian inputkan datanya, maka hasilnya seperti gambar di bawah ini

Crud Dengan Serialize jQuery dan Codeigniter

Terakhir tinggal kita tampilkan hasilnya, kita buat tabel nya untuk menampilkan datanya

<div class="row">
	<h1>Data</h1>
	<table class="table table-bordered">
	  <thead>
	    <tr>
	        <th>Nama Depan</th>
	        <th>Belakang</th>
	        <th>Usia</th>
	    </tr>
	  </thead>
	  <tbody id="show_data">
	  </tbody>
	</table>
</div>

Kemudian berikan fungsi ajax nya

 function show_data(){
        $.ajax({
            type  : 'ajax',
            url   : "<?php echo site_url('serialize/show')?>",
            dataType : 'json',
            success : function(data){
                var output = '';
                var i=0; 
                while(i<data.length){
                  output += '<tr>'+
                              '<td>'+data[i].first_name+'</td>'+
                              '<td>'+data[i].last_name+'</td>'+
                              '<td>'+data[i].age+'</td>'+
                            '</tr>';
                  i++;
                }
                $('#show_data').html(output);
            }
        });
    }

Dan buat metod dengan nama show, lalu ketikkan script seperti di bawah ini

public function show()
	{
		$data=$this->db->get('crud_serialize')->result();
		echo json_encode($data);
	}

Dan kita tampilkan fungsi show_data() nya

Crud Dengan Serialize jQuery dan Codeigniter

Jika sudah save dan refresh pada browsernya, kemudian kita coba lagi insert datanya

Crud Dengan Serialize jQuery dan Codeigniter

Crud Dengan Serialize jQuery dan Codeigniter

Nah itulah Crud Dengan Serialize jQuery dan Codeigniter membuat insert data dan menampilkan data. Kita jumpa kembali pada artikel yang akan datang dan kita akan membuat fitur update dan delete menggunakan ajax dan sreialize() jQuery, terimakasih dan sampai jumpa.

Semoga bermanfaat

Hernowo Author

Leave a Reply

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