Create, Update, Delete Flash dan PHP Mysql

flashcrud Create, update, and delete (CRUD) entry database melalui Flash dengan bantuan PHP bukan barang baru dan tutorialnya ada banyak di internet. Sayangnya, tutorial yang ada cuma setengah-setengah, dalam arti hanya ada cara menambah entry database dan memanggil entry di database dengan bantuan PHP atau ada tutorial yang cuma menyuguhkan cara mengubah entry namun tidak dijelaskan menambah data dan memanggil data. Tulisan ini menggabungkan hal mendasar memakai Flash untuk mengelola data melalui PHP.
Actionscript yang dipakai adalah AS2. Untuk AS3, silakan baca tutorial ini.
Pertama, buat tabel dalam database atau dump SQL di bawah ini di Phpmyadmin.

CREATE TABLE IF NOT EXISTS `posisi` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`topic` varchar(200) DEFAULT NULL,

`posx` varchar(10) DEFAULT NULL,

`posy` varchar(10) DEFAULT NULL,

`section` varchar(50) DEFAULT NULL,

PRIMARY KEY (`id`)

) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=40 ;

--

-- Dumping data for table `posisi`

--

INSERT INTO `posisi` (`id`, `topic`, `posx`, `posy`, `section`) VALUES

(1, 'Ayam', '10', '10', 'Unggas'),

(2, 'Bebek', '30', '30', 'Unggas');

Hasilnya akan seperti ini jika Anda browse di Phpmyadmin.

Mengapa memakai nama field seperti "topic", "posx"? Ya sejujurnya, Flash CRUD ini cuma batu loncatan untuk membuat aplikasi yang lain. Abaikan nama field-nya, Anda bisa membuat sendiri nama field yang diinginkan dan sesuaikan di file yang terkait.
Selanjutnya kita akan mengupas satu demi satu CRUD yang dimaksud

CREATE - DISPLAY
Yang dimaksud di sini adalah kemampuan menambahkan entry. Skrip di bawah ini, sebagian besar diambil dari flash-creations.com
Pertama, kita perlu mengambil data dari mysql dengan file "getpos.php" berikut ini:

//ganti dengan nama server, user, password dan database Anda

$server = "localhost";

$username = "root";

$password = "";

$database = "";

if (!mysql_connect($server, $username, $password)) {

$r_string = '&errorcode=1&';    

} elseif (!mysql_select_db($database)) {

$r_string = '&errorcode=2&';

} else {

$qr = mysql_query("SELECT * from posisi");

if (!qr || mysql_num_rows($qr)==0) {

$r_string = '&errorcode=3&msg='.mysql_error().'&';

} else {

$r_string = '&errorcode=0&n='.mysql_num_rows ($qr);

$i = 0;

while ($row = mysql_fetch_assoc ($qr)) {

while (list ($key, $val) = each ($row)) {

$r_string .= '&' . $key . $i . '=' . stripslashes($val);

}

$i++;

}

$r_string .='&';

}

}

echo $r_string;

Berikut ini kode untuk insert. Namakan "insertpos.php":

<?

$server = "localhost";

$username = "root";

$password = ""; 

$database = "";

if (!mysql_connect($server, $username, $password)) {

$r_string = '&errorcode=1&';    

} elseif (!mysql_select_db($database)) {

$r_string = '&errorcode=2&';

} else {

$ins_str = "INSERT INTO posisi (id, topic, posx, posy, section) VALUES (NULL, '".addslashes($_GET['topic'])."', '".$_GET['posx']."', '".$_GET['posy']."', '".addslashes($_GET['section'])."')";

if (!mysql_query ($ins_str)) {

$msg = mysql_error();

$r_string = '&errorcode=3&msg='.$msg;

} else {

$id = mysql_insert_id();

$r_string = '&errorcode=0&id='.$id.'&';

}

}

echo $r_string;

?>

Tidak banyak berbeda dengan file php untuk insert umumnya. Hanya ada tambahan untuk error message dan proteksi input text dengan "addslashes" (walaupun addslashes disebut tidak 100% mampu mencegah injeksi sql, namun lebih baik daripada tidak ada proteksi sama sekali).

Di Flash (bisa Flash8 atau CS3, CS4, yang penting AS2), letakkan komponen datagrid di stage, namakan bakigrid. Buat button mc, namakan "tambahbtn". Buat input text (atau ambil komponen input text, namakan "topik", "seksi", "posxt", "posyt". Posisinya di stage terserah Anda.

Lalu masukkan actionscript in di frame 1:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

var select_lv:LoadVars = new LoadVars();

var insert_lv:LoadVars = new LoadVars();

var errorMsgs:Array = [

"",        

"Couldn't connect to server",

"Couldn't connect to database",

"Error running query",

"Tiga data pertama tidak bisa dihapus"];

var filepath:String;

var posInfo:Array = [];

// function to put a zero in front of a one-digit number

function zerofill(n:Number):String {

if (n<10) return '0' + n.toString();

else return n.toString();

}

if (_url.indexOf("http") != 0) filepath = "http://localhost/folder/";

else filepath = "../folder/";

topik.maxChars = 50;

seksi.maxChars = 20;

posxt.text = 10;

posyt.text = 10;

topik.text = "";

seksi.text = "";

////////////////////////////////////////////////////////////////////

///           Loadvars untuk ambil data dan display               ///

////////////////////////////////////////////////////////////////////

select_lv.onLoad = function(ok:Boolean) {

if (ok) {

if (this.errorcode=="0") {

//masukkan data yang diload ke dalam array posInfo

for (var i:Number=0; i < this.n; i++) {

posInfo.push(

{record:this["id"+i],

topic:this["topic"+i],

posx:Number(this["posx"+i]),

posy:Number(this["posy"+i]),

section:this["section"+i]

});

}

//buat datagrid

bakigrid.columnNames = ["topic", "posx", "posy", "section"];

bakigrid.getColumnAt(0).width = 90;

bakigrid.getColumnAt(0).headerText = "Topic";

bakigrid.getColumnAt(1).width = 40;

bakigrid.getColumnAt(1).headerText = "X";

bakigrid.getColumnAt(2).width = 40;

bakigrid.getColumnAt(2).headerText = "Y";

bakigrid.getColumnAt(3).width = 90;

bakigrid.getColumnAt(3).headerText = "Section";

//array posInfo sebagai penyedia data

bakigrid.dataProvider = posInfo;

msg_ta.text = "Masukkan data yang valid. Klik sel untuk update atau hapus, kecuali 3 data pertama.";

} //end if no error

else {

msg_ta.text = errorMsgs[Number(this.errorcode)];

if (this.errorcode == "3") msg_ta.text += ": " + this.msg;

}

} //end if onload ok

else {

msg_ta.text = "Gagal";

}

}//end select lv

msg_ta.text = "Konek ke database...";

select_lv.sendAndLoad(filepath + "getpos.php", select_lv, "GET");

////////////////////////////////////////////////////////////////////

///                   Loadvars untuk insert                              ///

////////////////////////////////////////////////////////////////////

insert_lv.onLoad = function(ok:Boolean) {

if (ok) {

if (this.errorcode == "0") {        

posInfo.addItem(

{record:this.id,

topic:topik.text,

posx:Number(posxt.text),

posy:Number(posyt.text),

section:seksi.text

});

topik.text = '';

seksi.text = '';

posxt.text = 10;

posyt.text = 10;

msg_ta.text = "Data sudah ditambahkan";

} else {

msg_ta.text = errorMsgs[Number(this.errorcode)];

}

} else {

msg_ta.text = "Gagal";

}

};

tambahbtn.onRelease=function() {

if (topik.text == '') {

msg_ta.text = "Ketik sesuatu";

} else if (isNaN(posxt.text) || isNaN(posyt.text) ||

Number(posxt.text) < 0 || Number(posxt.text) > 500 || 

Number(posyt.text) < 0 || Number(posxt.text) > 420) {

msg_ta.text = "Harus angka dan x harus 0-500 dan y 0-420";

} else {

insert_lv.topic = topik.text;

insert_lv.posx = posxt.text;

insert_lv.posy = posyt.text;

insert_lv.section = seksi.text;

insert_lv.sendAndLoad(filepath + "insertpos.php", insert_lv, "GET");

}

};

Pada saat tombol ditekan, input text harus dicek dulu apakah kosong atau isi, jika berisi, apakah isinya angka atau bukan, apakah di antara 0-500 atau tidak, dst. Sisanya adalah pengiriman variabel ke file php.

UPDATE - DELETE
Kadang kita heran mengapa banyak tutorial insert database dengan PHP namun hanya sedikit tentang update atau edit serta delete. Mungkin alasannya adalah segi kepraktisan: menampilkan data dari MySQL ke Flash merupakan kebutuhan yang nyata dan umum dibandinkan kebutuhan terhadap update/edit dan delete. Hanya sebagian kecil aplikasi yang memberikan kemampuan CRUD untuk user dan klien, yang pasti ini lebih berguna untuk admin. Soalnya, untuk apa Anda membolehkan user mengupdate database? Ini mengundang potensi masalah dan membahayakan keamanan database Anda. Jika hanya untuk kebutuhan admin, kata Anda. Bukankah PHP-Mysql langsung lebih mudah dan praktis? Membuat halaman php yang biasa, tidak "indah" apalagi interaktif, bukanlah masalah selama Anda bisa langsung update dan delete.
Oke, terserah Anda jika mau membuat halaman admin di Flash. Anda tahu ini akan berlebihan namun lebih baik tahu daripada tidak, bukan?

Berikut ini kode php untuk "deletepos.php" mirip dengan "insertpos.php", hanya ubah di bagian "insert" dengan kode berikut:

$del_str = "DELETE FROM posisi WHERE id=".$_GET['id'];{/code}

Di Flash, buat layer "asdelete" dan tambahkan kode ini:

{code}

delete_lv.onLoad = function(ok:Boolean) {

if (ok) {

if (this.errorcode == "0") {

posInfo.removeItemAt(deleteIndex);

msg_ta.text = "Hapus sukses";

topik.text = '';

seksi.text = '';

posxt.text = 10;

posyt.text = 10;

} else {

msg_ta.text = errorMsgs[Number(this.errorcode)];

if (this.errorcode == "3") msg_ta.text += ": " + this.msg;

}

} else {

msg_ta.text = "Gagal";

}

};

hapusbtn.onRelease=function() {

deleteIndex = bakigrid.selectedIndex;

var id:Number = bakigrid.selectedItem.record;

delete_lv.id = id;

delete_lv.sendAndLoad(filepath + "deletepos.php", delete_lv, "GET");

hapusbtn._visible=false;

ubahbtn._visible=false;

}

Kodenya sudah sangat jelas. Fungsi delete_lv adalah menghapus baris yang diklik dari array posInfo. Baris yang diklik ditandai dengan deleteIndex. Setelah itu kembalikan semua input text ke nilai defaultnya; jika tidak sukses tampilkan pesan kesalahannya.
Ketika button delete ditekan, dia akan mengirimkan baris yang harus di-delete dan mengirimkannya ke file php.

Jangan lupa, di awal script sebelumnya tambahkan loadvars untuk delete. Dan juga untuk update.

var delete_lv:LoadVars = new LoadVars();
var update_lv:LoadVars = new LoadVars();
var deleteIndex:Number;
var updateIndex:Number;

Sekarang kita akan membuat fungsi update atau edit entry.
Kode php untuk update mirip dengan insert. Ubah perintah "insert" dengan "update" seperti ini:

$update_str = "UPDATE posisi SET topic='".addslashes($_GET['topic'])."', posx='".$_GET['posx']."', posy='".$_GET['posy']."', section='".addslashes($_GET['section'])."' WHERE id='".$_GET['id']."' "; 

{/code}

Namakan file-nya "updatepos.php".

Buat di layer berikutnya, actionscript yang akan konek dengan "updatepos.php":

{code}

//Ketika sel datagrid ditekan maka input text akan berisi data dan  tombol "delete" serta "save" muncul

var seleksigrid = new Object();

seleksigrid.cellPress = function(event) {

topik.text = event.target.selectedItem['topic'];

posxt.text = event.target.selectedItem['posx'];

posyt.text = event.target.selectedItem['posy'];

seksi.text = event.target.selectedItem['section'];

hapusbtn._visible=true;

ubahbtn._visible=true;

};

bakigrid.addEventListener("cellPress", seleksigrid);

update_lv.onLoad = function(ok:Boolean) {

if (ok) {

if (this.errorcode == "0") {

topik.text = '';

seksi.text = '';

posxt.text = 10;

posyt.text = 10;

msg_ta.text = "Data sudah diubah";

} else {

msg_ta.text = errorMsgs[Number(this.errorcode)];

if (this.errorcode == "3") msg_ta.text += ": " + this.msg;

}

} else {

msg_ta.text = "Gagal";

}

};

ubahbtn.onRelease=function() {

if (topik.text == '') {

msg_ta.text = "Ketik sesuatu";

} else if (isNaN(posxt.text) || isNaN(posyt.text) ||

Number(posxt.text) < 0 || Number(posxt.text) > 500 || 

Number(posyt.text) < 0 || Number(posxt.text) > 420) {

msg_ta.text = "Harus angka dan x harus 0-500 dan y 0-420";

} else {

updateIndex = bakigrid.selectedIndex;

var id:Number = bakigrid.selectedItem.record;

update_lv.id = id;

update_lv.topic = topik.text;

update_lv.posx = posxt.text;

update_lv.posy = posyt.text;

update_lv.section = seksi.text;

update_lv.sendAndLoad(filepath + "updatepos.php", update_lv, "GET")

play();//ini cara tricky untuk merefresh datagrid setelah diedit. 

//Kosongkan frame ke-1, datagrid ada di  frame ke-2, beri stop();. 

//Idenya, ketika tombol "save" ditekan maka frame akan berjalan 

//dan kembali ke frame ke-1 dan ke-2 lalu meload ulang  datagrid.

}

};

}