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 :
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
}
}
Komentar
Posting Komentar