Selasa, 21 Juli 2015
Tutorial CRUD Pagination Codeigniter Dengan Jquery Ajax ( part 1 )
Tidak ada komentar
:
Label:
CodeIgniter
Tutorial CRUD Codeigniter Dengan Jquery Ajax ( part 1 )
Jaka Prima Maulanaselamat datang pengunjung primasaja.com,
tutorial website dengan framework codeigniter kali ini akan membahas " Tutorial CRUD Codeigniter Dengan Jquery Ajax ( part 1 ) " bagaimana membuat Create, Read, Update, Dan Delete untuk customisasi isi database dengan bantuan Jquery script dan Ajax Script untuk menampilkan dan merubah isi database tanpa perlu melakukan refresh pada browser.
CRUD Codeigniter dengan jquery ajax ini sangat berguna untuk membuat pengguna website memasukkan data ke dalam database tanpa perlu menunggu refresh halaman yang berarti, dan juga menjadi solusi untuk membuat suatu sistem yang menggunakan POP jquery di dalamnya, contohnya ketika menggunakan crud tanpa menggunakan jquery ajax, sistem penghitungan didalam sebuah pop-up jquery akan meload form untuk di masukkan ke database atau untuk dijadikan value dari variabel yang otomatis akan merefresh halaman dan mengembalikan halaman ke awal semula ketika ia dibuka yaitu ketika pop-up iklan masih tertutup, sehingga pengguna harus membuka pop-up jquery tersebut kembali untuk melihat penghitungan.
dengan adanya Ajax pengguna tidak perlu repot - repot lagi membuka ulang pop-up untuk melihat penghitungan, karena data yang diisi dalam form dan dikirim ke database atau value dari variabel akan dilakukan tanpa merefresh halaman page yang otomatis tidak akan menutup pop-up yang sedang di buka dan dapat melihat hasil penghitungan secara langsung di pop-up jquery.
Mari mulai membuat CRUD dengan framework codeigniter dengan model MVC ini dengan tahap - tahap seperti ini :
1. Download Framework Codeigniter jika anda belum memilikinya Klik disini
2. buat database dalam contoh saya dengan nama "primasajacom_crudajax" lalu buat tabel dengan nama "Data_Pegawai_Primasaja" dan buat struktur tabel seperti berikut :
Dalam SQL :
CREATE TABLE `primasajacom_crudajax`.`Data_Pegawai_Primasaja` ( `NIP` INT(15) NOT NULL AUTO_INCREMENT , `Nama_Pegawai` VARCHAR(50) NOT NULL , `Jabatan` VARCHAR(50) NOT NULL , `Tahun_Masuk` INT(5) NOT NULL , PRIMARY KEY (`NIP`)) ENGINE = InnoDB;Dalam GUI :
3.. Setting terlebih dahulu configurasi framework di autoload dan di database. dengan mengakses C:\xampp\htdocs\namafoldercodeigniter\application\config\database.php dan
C:\xampp\htdocs\center\application\config\autoload.php
4. pada file autoload
- cari $autoload['libraries'] dan isikan seperti ini = array('database'),
- lalu cari $autoload['helper'] dan tambahkan sehingga seperti ini = array('url');,
- dan yang terakhir cari $autoload['model'] = array('modelprimasaja');
Catatan : modelprimasaja adalah file yang nanti akan dibuat di C:\xampp\htdocs\namafolder_codeigniter\application\models\ (modelprimasaja.php)
5. lalu pada file database setting database seperti ini
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '', // isi jika ada
'database' => 'nama database anda yang telah anda buat',
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '', // isi jika ada
'database' => 'nama database anda yang telah anda buat',
Catatan : dalam contoh pembuatan saya yaitu dengan nama primasajacom_crudajax.
'database' =>'primasajacom_crudajax'
'database' =>'primasajacom_crudajax'
6. atur file routes default ke $route['default_controller'] = "inti";
7. selanjutnya setelah selesai melakukan configurasi framework di codeigniter, lalu mulai membuat Model, View, Dan controllernya, pertama - tama buat Controller di C:\xampp\htdocs\namafolderanda\application\controllers dan buat nama file baru dengan ekstensi php sesuai nama routes yang tadi kita buat di routes inti.php lalu buat script seperti berikut :
<?php if (! defined('basepath')) exit('no direct script access allowed');
class Inti extends CI_controller {
function index(){
$this->load->view('index');
}
}
7. selanjutnya setelah selesai melakukan configurasi framework di codeigniter, lalu mulai membuat Model, View, Dan controllernya, pertama - tama buat Controller di C:\xampp\htdocs\namafolderanda\application\controllers dan buat nama file baru dengan ekstensi php sesuai nama routes yang tadi kita buat di routes inti.php lalu buat script seperti berikut :
<?php if (! defined('basepath')) exit('no direct script access allowed');
class Inti extends CI_controller {
function index(){
$this->load->view('index');
}
}
8. lalu buat View sesuai script kontroller tadi di $this->load->view('index');, buat file index.php di C:\xampp\htdocs\namafolderanda\application\view buat script seperti berikut :
Catatan :
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>
<html>
<head>
<title>Tutorial CRUD Pagination ajax primasaja</title>
<script type="text/javascript" src="<?php echo base_url();?>asset/javascript/jquery-1.11.1.min.js"></script>
<link href="<?php echo base_url();?>asset/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center><h1>Tutorial CRUD Pagination Codeigniter Dengan Jquery Ajax Primasaja.com</h1></center>
<div id='Dasar'>
</div>
</body>
</html>
<html>
<head>
<title>Tutorial CRUD Pagination ajax primasaja</title>
<script type="text/javascript" src="<?php echo base_url();?>asset/javascript/jquery-1.11.1.min.js"></script>
<link href="<?php echo base_url();?>asset/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center><h1>Tutorial CRUD Pagination Codeigniter Dengan Jquery Ajax Primasaja.com</h1></center>
<div id='Dasar'>
</div>
</body>
</html>
Catatan :
pada script type="text/javascript" src="<?php echo base_url();?>asset/javascript/jquery-1.11.1.min.js"></script>
taruh jquery script di C:\xampp\htdocs\namafolderanda\asset\javascript\jquery-1.11.1.min.js.
script jquery bisa di dapat dari sini klik disini
script jquery bisa di dapat dari sini klik disini
dan pada <link href="<?php echo base_url();?>asset/css/style.css" rel="stylesheet" type="text/css" /> buat folder dan file baru bernama style.css di
C:\xampp\htdocs\namafolderanda\asset\css\style.css
9. selanjutnya kita akan mulai membuat model untuk CRUD database dan menampilkan dengan controller baru
klik di bawah ini untuk tutorial selanjutnya
klik di bawah ini untuk tutorial selanjutnya
Langganan:
Postingan
(
Atom
)
