CRUD Codeigniter, MySQL, Bootstrap, dan ajax jQuery

Halo sobat programmer dimanapun kalian berada :D , jumpa lagi dengan penulis yang gx seberapa ini. Kali ini penulis ingin berbagi ilmu untuk kalian yang sedang belajar pemrograman PHP , maupun para pejuang skripsi yang sedang mengerjakan tugas akhir. Tutorial kali ini penulis beri judul “ PHP – CRUD Codeigniter, MySQL, Boostrap, dan ajax jQuery “ . Penulis harap teman – teman sudah menginstall xampp di computer masing. Untuk menguji apakah aplikasi web anda berjalan dengan baik atau tidak maka diperlukan yang disebut web server. Web server ini adalah tempat dimana anda menyimpan aplikasi web dan kemudian mengaksesnya melalui internet. Ada beberapa web server built in ysng popular di kalangan programmer seperti : XAMPP, WAMP,LAMP (untuk pengguna linux) ,MAMP (untuk pengguna MAC). Disini penulis menggunakan XAMPP untuk webservernya.

Kata XAMPP sendiri berasal dari :

· X yang berarti cross platform karena XAMPP bisa dijalankan di windows, linux, Mac dsb.

· A yang berarti Apache sebagai web servernya.

· M yang berarti MySQL sebagai databasenya

· PP yang berarti PHP dan Perl Bahasa pemrograman yang di dukungnya.

Jika kalian belum install xampp bisa di download di http://apachefriends.org.

Codeigniter adalah framework berbasis PHP. Download codeigniternya melalui link https://codeigniter.com/download. Jika codeigniternya sudah di download, kemudian extrak di ROOT folder xampp ( defaultnya windwos c:/xampp/htdocs ), rename folder Codeigniter menjadi crud_ci. Setelah semuanya di download, maka tahap selanjutnya adalah coding. Buka text editor kesayangan kalian, penulis menggunaka VSCode sebagai text editornya. Teman – teman bisa juga mennggunakan text editor lain seperti sublime text, notepad++,atom, dll.

Tools yang dibutuhkan untuk membuat project adalah :

1. XAMPP (http://apachefriends.org.)

2. Codeigniter (https://codeigniter.com/download). Penulis menggunakan codeigniter 3.

Sebelum ke tahap coding buat database beserta tablenya terlebih dahulu. Ikuti Langkah – Langkah dibawah ini untuk pembuatan database dan tablenya. Jangan lupa start dulu Apache dan MySQL pada XAMPP.

· Buka Cmd lalu ketikan : cd ../../ (untuk pindah ke direktori c: )

· Kemudia ketik : cd xampp/mysql/bin (enter)

· Kemudian ketik : mysql -u root

· Buat database dengan perintah : CREATE DATABASE latihan (enter). Latihan adalah nama databasenya.

· Ketikan lagi perintah : use latihan (enter) untuk menggunakan database latihan.

· Buat table dengan perintah :

CREATE TABLE barang (

kode_brg VARCHAR(10) NOT NULL PRIMARY KEY,

nama_brg VARCHAR(35),

harga int,

stock int,

satuan varchar (15)

);

Jika sudah mengetikan perintah diatas kemudia tekan enter. Sampai sini maka anda sudah berhasil membuat database dan tablenya. Kemudian buka text editor kesayangan anda.

Buka project folder
Buka file autoload.php yang terdapat pada folder config

Edit pada libraries dan helper menjadi sperti berikut ini :

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

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

3. Edit file database.php yang terdapat pada folder config menjadi :

4. $active_group = 'default';

5. $query_builder = TRUE;

7. $db['default'] = array(

8. 'dsn' => '',

9. 'hostname' => 'localhost',

10. 'username' => 'root',

11. 'password' => '',

12. 'database' => 'latihan',

13. 'dbdriver' => 'mysqli',

14. 'dbprefix' => '',

15. 'pconnect' => FALSE,

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

17. 'cache_on' => FALSE,

18. 'cachedir' => '',

19. 'char_set' => 'utf8',

20. 'dbcollat' => 'utf8_general_ci',

21. 'swap_pre' => '',

22. 'encrypt' => FALSE,

23. 'compress' => FALSE,

24. 'stricton' => FALSE,

25. 'failover' => array(),

26. 'save_queries' => TRUE

27. );

28.

3. Buat controller baru pada folder application/controllers beri nama Barang.php

Kemudian ketikan code dibawah ini :

<?php

header("Access-Control-Allow-Origin: *");

header("Access-Control-Allow-Methods: GET,POST,OPTIONS,DELETE,PUT");

header("Access-Control-Request-Headers: Content-Type, X-Requested-With, Authorization");

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

class Barang extends CI_Controller {

public function __construct()

{

parent::__construct();

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

}

public function index()

{

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

}

public function add()

{

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

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

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

$stock = $this->input->post('stok');

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

$data = $this->model_barang->add($kode_brg,$nama_brg,$harga,$stock,$satuan);

echo json_encode($data);

}

public function edit()

{

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

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

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

$stock = $this->input->post('stok');

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

$data = $this->model_barang->edit($kode_brg,$nama_brg,$harga,$stock,$satuan);

echo json_encode($data);

}

public function delete()

{

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

$data = $this->model_barang->delete($kode_brg);

echo json_encode($data);

}

public function get_all()

{

$data = $this->model_barang->get_all()->result();

echo json_encode($data);

}

public function get_byId()

{

$kode_brg = $this->input->get('id');

$data = $this->model_barang->get_byId($kode_brg)->result();

echo json_encode($data);

}

/* End of file Controllername.php */

4. Buat model baru pada folder application/models beri nama Model_barang.php , kemudian ketikan kode di bawah ini :

<?php

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

class Model_barang extends CI_Model {

public function add($kode_brg,$nama_brg,$harga,$stock,$satuan)

{

$data = array(

"kode_brg" => $kode_brg,

"nama_brg" => $nama_brg,

"harga" => $harga,

"stock" => $stock,

"satuan" => $satuan

);

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

}

public function edit($kode_brg,$nama_brg,$harga,$stock,$satuan)

{

$data = array(

"nama_brg" => $nama_brg,

"harga" => $harga,

"stock" => $stock,

"satuan" => $satuan

);

$this->db->where('kode_brg', $kode_brg);

return $this->db->update('barang', $data);

}

public function delete($kode_brg)

{

$this->db->where('kode_brg', $kode_brg);

return $this->db->delete('barang');

}

public function get_byId($kode_brg)

{

return $this->db->get_where('barang', array('kode_brg' => $kode_brg));

}

public function get_all()

{

return $this->db->get('barang');

}

/* End of file ModelName.php */

5. Kemudian , buat view baru di dalam folder application/views beri nama barang.php dan ketikan kode dibawah ini :

<!DOCTYPE html>

<head>

<title>Document</title>

<!-- <link rel="stylesheet" href="<?= base_url() .'assets/dist/css/bootstrap.min.css'?>">

</head>

<body>

<center><h1 class="text-primary">CRUD - Codeigniter, Bootstrap, Ajax</h1></center>

</div>

<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#modalTambah" >Tambah</button>

</div>

</div>

<thead>

<tr>

<th>Kode Barang</th>

<th>Nama Barang</th>

<th>Harga</th>

<th>Stock</th>

<th>Satuan</th>

</tr>

</thead>

</tbody>

</table>

</div>

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

</div>

</div>

<label for="field-3" class="control-label">Nama Barang</label>

</div>

<label for="field-4" class="control-label">Harga </label>

</div>

</div>

<label for="field-6" class="control-label">Satuan</label>

</div>

<button type="submit" id="btnSimpan" class="btn btn-info waves-effect waves-light">Simpan</button>

</div>

</form>

</div>

</div>

</div>

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

</div>

</div>

<label for="field-3" class="control-label">Nama Barang</label>

</div>

<label for="field-4" class="control-label">Harga </label>

</div>

</div>

<label for="field-6" class="control-label">Satuan</label>

</div>

<button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>

</div>

</form>

</div>

</div>

</div>

<h4 class="modal-title">Hapus Barang</h4>

</div>

<div class="text-danger"> <h3>Apakah Anda yakin akan menghapus data ini ?</h3></div>

</div>

<button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Cancel</button>

</div>

</form>

</div>

</div>

</div>

$(document).ready(function(){

load_data();

function load_data() {

const url = "<?php echo site_url('barang/get_all'); ?>"

let html ='';

console.log(url);

$.ajax({

url: url,

method: "GET",

dataType: "JSON",

success: function(data){

console.log(data)

$.each(data, function(){

html += `<tr>

<td> ${this.harga} </td>

<td> ${this.stock} </td>

<td> ${this.satuan} </td>

<td> <button class="btn btn-primary item_edit" data="${this.kode_brg}">edit</button> <button class="btn btn-danger item_hapus" data="${this.kode_brg}">hapus</button> </td>

</tr>`;

});

$('#show_data').html(html);

}

})

};

// get by id untuk edit data

$('#show_data').on('click','.item_edit',function(){

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

const url = "<?= site_url('barang/get_byId') ?>";

console.log(url)

$.ajax({

method: "GET",

url : url,

dataType : "JSON",

data : {id:id},

success: function(data){

$.each(data,function(){

$('#modalEdit').modal('show');

$('[name="e_kode_brg"]').val(this.kode_brg);

$('[name="e_nama_brg"]').val(this.nama_brg);

$('[name="e_harga"]').val(this.harga);

$('[name="e_stok"]').val(this.stock);

$('[name="e_satuan"]').val(this.satuan);

});

}

});

return false;

});

// get by id untuk hapus data

$('#show_data').on('click','.item_hapus',function(){

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

const url = "<?= site_url('barang/get_byId') ?>";

console.log(url)

$.ajax({

method: "GET",

url : url,

dataType : "JSON",

data : {id:id},

success: function(data){

$.each(data,function(){

$('#modalHapus').modal('show');

$('[name="h_kode_brg"]').val(this.kode_brg);

});

}

});

return false;

});

// UNTUK SIMPAN DATA

$('#btnSimpan').on('click', function(){

const url = " <?= site_url('barang/add') ?> "

let kode_brg = $("#kode_brg").val();

let nama_brg = $("#nama_brg").val();

let harga = $("#harga").val();

let stok = $("#stok").val();

let satuan = $("#satuan").val();

$.ajax({

method: "POST",

dataType: "JSON",

url: url,

data: {kode_brg: kode_brg, nama_brg:nama_brg, harga:harga, stok: stok, satuan: satuan},

success: function(){

load_data();

}

})

}) ;

// Untuk edit data

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

const url = " <?= site_url('barang/edit') ?> "

let kode_brg = $('[name="e_kode_brg"]').val();

let nama_brg = $('[name="e_nama_brg"]').val();

let harga = $('[name="e_harga"]').val();

let stok = $('[name="e_stok"]').val();

let satuan = $('[name="e_satuan"]').val();

$.ajax({

method: "POST",

dataType: "JSON",

url: url,

data: {kode_brg: kode_brg, nama_brg:nama_brg, harga:harga, stok: stok, satuan: satuan},

success: function(){

load_data();

}

})

});

// method hapus data

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

const url = " <?= site_url('barang/delete') ?> "

let kode_brg = $('[name="h_kode_brg"]').val();

$.ajax({

method: "POST",

dataType: "JSON",

url: url,

data: {kode_brg: kode_brg},

success: function(){

load_data();

}

})

});

</script>

</body>

</html>

Apabila teman – teman me load source bootstrap dan jquery secara online, maka teman – teman harus konek ke internet. Disini penulis meload bootstrap dan jquerynya secara online.

Apablia teman – teman mengikutinya dengan benar, maka akan mendapatkan hasil seperti dibawah ini :

Terimakasih telah berkunjung ke blog ini, semoga bermanfaat untuk teman – teman yang sedang belajar. Apabila ada pertanyaan tentang kode atau lainnya silahkan tinggalkan komentar.

Source code dapat di download disini

728x90 AdSpace

Followers

CRUD Codeigniter, MySQL, Bootstrap, dan ajax jQuery

Related posts

No comments:

Recent Post

Featured Post

Random Post

Recent Post