Beberapa hal yang perlu
dituliskan agar tidak lupa. Berikut adalah tulisan tentang konsep dasar tentang
membuat sebuah aplikasi menampilkan menggunakan Codeigniter, yang dibantu
fungsi javascript atau AJAX. Tulisan ini hanya untuk membantu memahami konsep
dasar Pemrograman menggunakan Codeigniter. Langsung saja yang perlu disiapkan
adalah codeigniter 2.0 atau versi keatas.
Tulisan ini difokuskan pada
bagian view dan controller. Berikut adalah contoh script Controller dan view
berikut penjelasannya sesuai kemampuan saya untuk menjelaskan.
Pertama kita main di controller.
Buat file dengan nama c_test.php di
dalam folder controller.
Setelah itu tuliskan script
didalam c_test.php dibawah ini :
|
<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class
c_test extends MX_Controller {
public function __construct(){
parent::__construct();
$this->load->library(array('session','encrypt','form_validation'));
}
function index(){
$this->load->view('v_test');
}
function v_test_js(){
$this->load->view('v_test_js');
}
function tampil(){
$user = $this->input->post('user');
$password = $this->input->post('password');
echo "<script>alert('berhasil');</script>";
echo
"<script>$('#user').html('".$user."');</script>";
echo
"<script>$('#password').html('".$password."');</script>";
echo
"<script>document.getElementById('tampil').style.display =
'';</script>";
}
}
|
Keterangan :
Script dibawah selalu ditulis
disetiap controller yang saya buat untuk mendefinisikan fungsi-fungsi.
|
<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class
c_test extends MX_Controller {
public function __construct(){
parent::__construct();
$this->load->library(array('session','encrypt','form_validation'));
}
#Tempat menuliskan fungsi-fungsi pada
controller.
}
|
Controller berfungsi mengatur
yang ditampilkan pada browser. Setiap fungsi di controller bisa dipanggil
melalui browser sesuai dengan lokasinya. Misal nama folder ci’nya adalah ikd,
nama file’nya c_test.php. Maka pada browser bisa memanggil
localhost/ikd/c_test. Nama class harus sesuai dengan nama file’nya.
class c_test extends MX_Controller {
Kebetulan disini saya menggunakan hmvc yang
memudahkan untuk mengatur folder controller, view, dan model’nya sesuai dengan
nama modulenya. Disini saya memiliki folder ci dengan nama ikd, dan mempunyai
module dengan nama test, nama file controller c_test.php, didalam file
c_test.php ada function index yang berfungsi menampilkan default ketika kita
memanggil file Controller tersebut. Jadi dengan adanya tambahan module maka di
path browser saya dapat memanggil controller dengan path :
localhost/ikd/test/c_test. Akan menampilkan view yang diload oleh index.
function index(){
$this->load->view('v_test');
}
Selanjutnya disini saya membuat
fungsi v_test_js. V_test_js memanggil view v_test_js yang isinya nanti adalah
semua javascript yang digunakan pada v_test. Kenapa tidak dituliskan jadi satu
dengan v_test karena biar tidak campur dengan html sehingga untuk
memantenancenya lebih mudah.
function index(){
$this->load->view('v_test');
}
Selanjutnua saya juga membuat
fungsi tampil. Fungsi ini merupakan hasil setelah nanti di view terdapat aksi
untuk klik button dan ditangkap difungsi javascript yang nantinya terus
dilempar ke fungsi ini menggunakan AJAX.
//nama fungsi tampil
function tampil(){
//menangkap variable yang dikirim dari
ajax yang ada di v_test_js.php
$user =
$this->input->post('user');
$password =
$this->input->post('password');
//menampilkan hasil
menggunakan javascript
//menampilkan alert berhasil
echo
"<script>alert('berhasil');</script>";
//menampilkan user dan
password pada div user dan password di file v_test.php
echo
"<script>$('#user').html('".$user."');</script>";
echo
"<script>$('#password').html('".$password."');</script>";
//menghilangkan
display none sehingga tampilan user dan password dapat terlihat
//display
sebelumnya di div id=tampil adalah none
echo
"<script>document.getElementById('tampil').style.display =
'';</script>";
}
Kedua Kita main di view. Buat
view dengan nama v_test.php
didalamfolder view. Tuliskan script html didalam v_test.php, scriptnya kurang
lebih adalah seperti ini :
|
<html>
<body>
<fieldset>
<legend>Login</legend>
<input name="user"
type="text" /><br/>
<input
name="password" type="text" /><br/>
<button
onclick="login()">Masuk</button>
</fieldset>
<div id="tampil"
style="display:none;">
<fieldset>
<legend>User
passsword</legend>
<div
id="user"></div>
<div
id="password"></div>
</fieldset>
</div>
</body>
</html>
<?php
echo modules::run("test/c_test/v_test_js"); ?>
|
Keterangan :
Script diatas adalah view yang
menampilkan input user dan input password. Perhatikan pada input dan div id
pada secript diatas. Kita mulai dengan name setiap input, karena nanti di Ajax
name ini sepagai identitas untuk menangkap isi dari input tersebut misal :
<input name="user"
type="text" /><br/>
Dijavascript nanti kita bisa manangkap
isi input name user dengan script dibawah ini
var
user1 = $('input[name=user]').val();
Setelah itu kita bisa lihat setiap id pada div. Id setiap div
ini membantu untuk mengidentivikasi div sehingga isi dari div tersebut dapat
kita ubah sesuai dengan keinginan kita menggunakan javascript. Misal id user <div
id="user"></div> Kita bisa mengubah isi div id user yang sebelumnya kosong menjadi isi
dengan text user dengan script $(‘#user’).html(‘user’); script ini ditulis
dijavascript.
Pada button terdapat onclick=login(), ini jika button diklik maka
akan menjalankan fungsi login() yang terdapat pada file v_test_js.php.
<button
onclick="login()">Masuk</button>
Script yang paling bawah adalah script php yang berfungsi
memanggil atau menambahkan view v_test_js.php.
<?php echo
modules::run("test/c_test/v_test_js"); ?>
Ketiga kita bisa membuat v_test_js.php didalam folder view juga.
Kurang lebih isi filenya adalah script berikut :
|
<script
type="text/javascript" src="<?php echo base_url();
?>template/js/jquery.js"></script>
<script
type="text/javascript" src="<?php echo base_url();
?>template/js/jquery-1.11.1.min.js"></script>
<script>
function login(){
var user1 =
$('input[name=user]').val();
var password1 =
$('input[name=password]').val();
$.ajax({
type: 'POST',
url: "<?php echo
base_url(); ?>test/c_test/tampil",
data:
{user:user1,password:password1},
success:function(data){
$('#test').html(data);
}
});
}
</script>
<div
id="test"></div>
|
Keterangan :
<script type="text/javascript"
src="<?php echo base_url(); ?>template/js/jquery.js"></script>
<script type="text/javascript"
src="<?php echo base_url();
?>template/js/jquery-1.11.1.min.js"></script>
Script diatas berfungsi
memanggil library agar ajax bisa berjalan. Lokasinya disesuaikan dengan
penempatannya. Didalam codeigniter menggunakan <?php echo base_url(); ?> untuk menampilkan base url Ci kita, kalo
disini berarti menampilkan loaclhost/ikd, selanjutnya disambung dengan path
lokasinya.
<script>
function
login(){
var
user1 = $('input[name=user]').val();
var
password1 = $('input[name=password]').val();
$.ajax({
type:
'POST',
url:
"<?php echo base_url(); ?>test/c_test/tampil",
data:
{user:user1,password:password1},
success:function(data){
$('#test').html(data);
}
});
}
</script>
Fungsi login() berisi script ajax yang nantinya akan memanggil
fungsi dicontroller dan mengirim beberapa variable yang akan ditangkap pada
controller.
#Menangkap variable user dan password menggunakan javascript
var user1 = $('input[name=user]').val();
var password1 = $('input[name=password]').val();
#Lokasi Controller yang dituju
url: "<?php echo base_url();
?>test/c_test/tampil",
#Variable yang dikirimkan pada controller
data: {user:user1,password:password1},
#Mengganti isi div id tes dengan dengan data
#data adalah tampilan dari isi controller
dengan nama fungsi tampil
$('#test').html(data);
#berubah isinya ketika fungsi login digalankan
<div id="test"></div>
Jika saya mengakses localhost/ikd/test/c_test maka akan tampil
Jika diklik login maka yang akan tampil adalah alert berhasil
dan tampilan dibawahnya :
Struktur file yang saya buat
Mungkin hanya ini dulu yang bisa saya tuliskan. Apabila ada yang
ingin ditanyakan silahkan, nanti saya coba menjelaskan dan sekalian belajar
juga agar bisa lebih baik lagi, Thanks Yaaaa..... laen waktu disambung lagi.
