Tutorial CodeIgniter and ExtJs in Netbeans
Buat para programer php pasti tau apa yang di maksud dengan framework. pada tulisan saya kali ini saya akan sedikit membahas tentang penggunaan FrameWork CodeIgniter [CI] yang akan di gabung dengan ExtJs juga akan menggunakan editor Netbeans.
Trus kenapa saya harus menggunakan NetBeans untuk editor, ada beberapa alasan
- Saya emang suka dengan Netbeans.
- Adanya kemudahan kalo ngak salah di netbeans juga sudah ada doc buat ExtJS jadi saat kita develop atau buat javascrip dengan menggunakan NetBeans akan lebih mudah.
Dengan beberapa alasan tersebut akan memudahkan kita dalam pembuatan program ini.
Kembali lagi ke CI untuk mempersiapkan project ini di komputer anda harus sudah terinstall WebServer apache PHP dan Mysql. sebelumnya jangan lupa download dulu CI di sini http://codeigniter.com/downloads/. Ada beberapa hal pada FrameWork ini, hampir sama dengan yang lain atau yang mungkin udah terbiasa dengan framework yang lain dia juga menggunakan metode MVC [Model, View, Control] dan yang pasti juga berbasis OOP [Object Oriented Programming] jadi kita harus juga belajar OOP.
Ada beberapa hal yang perlu di perhatikan pada CI
1. Controller
-> Berfungsi untuk penanganan, pemanggilan database dan kapsulisasi proses utama.
2. Model
-> Berfungsi untuk pemanggilan struktur dan fungsi hingga proses output.
3. View
-> Sedang untuk yang ini seperti saat kita buat program web kita pasti buat template – tempate disinilah letaknya.
Jadi ada tiga folder utama dalam CI
1. /system/application/controllers
2. /system/application/model
3. /system/application/view
setelah kita tahu tentang sifat2 CI buka netbeans dan buat project PHP baru. misal dengan nama MyWeb, lalu kompikan folder system pada CI kedalam project netbeans kita juga replace index.php pada netbens dengan index.php yang ada pada CI.
Setting pada CI
Masuk pada folder /system/application/config dan buka file – file dibawan ini
1. Config.php
pada file inilah konfigurasi server kita, ubah baris yang ini menjadi
$config['base_url'] = “http://”.$_SERVER['HTTP_HOST'].”/MyWeb/”;
2. database.php
Seting koneksi ke database.
3. autoload.php
file ini digunakan untuk load semua library yang ada dalam CI, misal
$autoload['libraries'] = array(‘database’,'jsonci’, ‘session’);
4. routes.php
file inilah yang dijalankan oleh CI pertama kali.
$route['default_controller'] = “Login”;
ini menerangkan bawa pertama kali dia akan mencari class bernama Login di dalam controllers.
oh ya jangan lupa download juga ExtJs nya, kalo sudah buat folder baru di project kita dengan nama resources dan buat lagi folder ExtJS lalu kopikan :
1. Folder adapter.
2. Folder resources.
3. File ext-all-debug.js
4. ext-all.js
5. ext-core-debug.js
6. ext-core.js
Setelah itu buat file baru di folder /system/application/controllers/Login.php
class Login extends Controller{
function Login() {
parent::Controller();
}
function index(){
$this->load->view(‘login_view’);
}
}
?>
sekarang buat juga sebuah file di /system/application/view/login_view.php
<html>
<head>
<title>Selamat datang</title>
<link rel=”stylesheet” type=”text/css” href=”resources/extJs/resources/css/ext-all.css” />
<script type=”text/javascript” src=”resources/extJs/adapter/ext/ext-base.js”></script>
<script type=”text/javascript” src=”resources/extJs/ext-all.js”></script>
<script type=”text/javascript” src=”MyWeb/login/js/login.js”></script>
</head>
<body>
</body>
</html>
Nah sekarang buat juga file di sini MyWeb/login/js/login.js
Ext.onReady(function(){
var pnl= new Ext.FormPanel({
labelWidth:100,
url:’index.php’,
frame:true,
title:’Tutorial CodeIgniter’,
width:250,
padding:10,
defaultType:’textfield’,
monitorValid:true,
items:[{
fieldLabel:'User ID',
name:'nama',
allowBlank:false
},{
fieldLabel:'Password',
name:'kunci',
inputType:'password',
allowBlank:false
}],
buttons:[{
text:'Login',
formBind: true,
handler:function(){
pnl.getForm().submit({
method:'POST',
waitTitle:'Connecting',
waitMsg:'Sending data...',
url:'index.php?c=login&m=prosesLogin',
success:function(form,result){
var response = Ext.util.JSON.decode(result.response.responseText);
//var redirect = 'index.php?c=main';
var redirect = response.responseText;
window.location = redirect;
},
failure:function(form, action){
if(action.failureType == 'server'){
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Authentication server is unreachable :', obj.errors.reason);
}else{
Ext.Msg.alert('Warning!', 'Login Failed! : ' + action.response.responseText );
}
pnl.getForm().reset();
}
});
}
}]
});
var win = new Ext.Window({
layout:’fit’,
width:310,
height:170,
closable: false,
resizable: false,
plain: true,
items: [pnl]
});
win.show();
});
Sekarang tinggal panggil deh http://localhost/MyWeb/
Semoga memabantu
Wassalamu’alaikum wr wb
Berita yang lain
SWT (Standart Widget Toolkit) Java Bab I Dojo Toolkit