Home > Go-Fusebox, Object Oriented Programming, Tips Pengembangan > Dengan atau Tanpa Ajax Menjadi Lebih Mudah dengan Fusebox

Dengan atau Tanpa Ajax Menjadi Lebih Mudah dengan Fusebox

October 8th, 2010

Pada ulasan sebelumnya tentang aplikasi database dengan form Ajax, dimana proses insert dan update menggunakan request ajax untuk mengirim data ke server. Lalu bagaimana jika proses itu tidak menggunakan request ajax ?

Karena Fusebox merupakan framework yang fleksibel, maka mudah saja untuk mengubahnya. Buka kembali contoh sebelumnya, ada beberapa file yang harus diubah yaitu:
1. apps/index/circuits/data/circuit.xml.php dan
2. apps/index/circuits/data/dsp_form.php

Perubahan pada circuit.xml hanya pada fuseaction echo sebagai berikut:

<fuseaction name="echo" access="private">
	<if condition="$_GET['ajax'] == '1'">
		<true>
			<php:include file="apps/vendors/FastJSON.class.php"/>
			<set value="echo FastJSON::encode(\$ret);" evaluate="true"/>
		</true>
		<false>
			<do action="global.setPostBack"/>
			<if condition="$originalFuseaction == 'insert'">
				<true><do action="add"/></true>
			</if>
			<if condition="$originalFuseaction == 'update'">
				<true><do action="edit"/></true>
			</if>
		</false>
	</if>
</fuseaction>

Sedangkan pada fuse dsp_form adalah menghilangkan link ke script update.js, merubah attribut type pada tag button menjadi submit, serta menambahkan kode berikut sebelum tag form:

<?php
if ($isPostBack &&; !$ret["status"]) $msg = "Data Gagal Disimpan!";
if ($isPostBack && $ret["status"]) $msg = "Data Telah Disimpan!";
if ($msg != "") $msg = '<div style="background-color:#ffffcc; font-weight:bold; padding:4px;">'.$msg.'</div>';
echo $msg;
?>

Disitu kita lihat ada variabel bernama $isPostBack, yang sebelumnya dipanggil melalui circuit.xml , variabel ini menandakan apakah halaman sudah melakukan request post ke server, nilai variabel ini antara true atau false.

Kode sumber lengkapnya untuk fuse dsp_form adalah :

<?php
$data = $anggota->byID($attributes["id"]);
$dataProp = $adodb->GetAll("select * from provinces");
?>

<script src="assets/js/prototype.js"></script>
<script src="assets/js/my_common.js"></script>
<script>
var post_province_id  = "<?php echo $data["province_id"] ?>";
var post_kabupaten_id = "<?php echo $data["kabupaten_id"] ?>";
var post_kecamatan_id = "<?php echo $data["kecamatan_id"] ?>";
var post_kelurahan_id = "<?php echo $data["kelurahan_id"] ?>";
</script>
<script src="assets/js/bps.js"></script>

<?php
if ($isPostBack && !$ret["status"]) $msg = "Data Gagal Disimpan!";
if ($isPostBack && $ret["status"]) $msg = "Data Telah Disimpan!";
if ($msg != "") $msg = '<div style="background-color:#ffffcc; font-weight:bold; padding:4px;">'.$msg.'</div>';
echo $msg;
?>

<h2><?php echo $fbx_pagetitle; ?></h2>
<form id="myForm" action="<?php echo $myself.$XFA["action"]; ?>" method="post">
	<?php if ($data) : ?>
	<input type="hidden" name="id" value="<?php echo $data["id"] ?>"/>
	<?php endif; ?>
	<table>
		<tr>
			<td><strong>Nama</strong></td>
			<td><input type="text" name="nama" id="nama" value="<?php echo $data["nama"] ?>" size="50"/></td>
		</tr>
		<tr>
			<td><strong>Alamat</strong></td>
			<td><input type="text" name="alamat" id="alamat" value="<?php echo $data["alamat"] ?>" size="70"/></td>
		</tr>
		<tr>
			<td><strong>Propinsi</strong></td>
			<td>
			<?php
			echo '<select name="province_id" id="province_id">';
			echo '<option value="">-- Pilih Propinsi --</option>';
			foreach($dataProp as $prop) {
				$sel = "";
				if ($data["province_id"] == $prop["id"]) $sel = ' selected="selected"';
				echo '<option value="'.$prop["id"].'"'.$sel.'>'.$prop["name"].'</option>';
			}
			echo '</select>';
			?>
			</td>
		</tr>
		<tr>
			<td><strong>Kabupaten/Kota</strong></td>
			<td>
			  <select name="kabupaten_id" id="kabupaten_id">
			    <option value="">-- Pilih Kab/Kota --</option>
			  </select><span id="kabupaten_loader"></span>
			</td>
		</tr>
		<tr>
			<td><strong>Kecamatan</strong></td>
			<td>
			  <select name="kecamatan_id" id="kecamatan_id">
			    <option value="">-- Pilih Kecamatan --</option>
			  </select><span id="kecamatan_loader"></span>
			</td>
		</tr>
		<tr>
			<td><strong>Kelurahan</strong></td>
			<td>
			  <select name="kelurahan_id" id="kelurahan_id">
			    <option value="">-- Pilih Kelurahan --</option>
			  </select><span id="kelurahan_loader"></span>
			</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>
				<button type="submit" id="btnSave">Simpan</button>
				<button type="reset">Reset</button> <span id="save_loader"></span>
				| <a href="<?php echo $myself.$XFA["list"] ?>">List Anggota</a>
				| <a href="<?php echo $myself.$XFA["add"] ?>">Data Baru</a>
			</td>
		</tr>
	</table>
</form>

Happy Fuseboxing :-)

Yerie Piscesa Go-Fusebox, Object Oriented Programming, Tips Pengembangan

  1. No comments yet.
  1. No trackbacks yet.