Edit Data Mysql dengan Datagrid di Flash

depan_dg_editBerdasarkan permintaan seorang pengunjung, maka kali ini saya akan membuat tutorial tentang edit datagrid pada flash yang langsung terhubung dengan tabel pada phpmyadmin. Kali ini saya akan memnfaatkan sebuah event pada datagrid yang bernama object.cellEdit dengan object adalah variabel object yang sudah didefinisikan. fungsinya adalah melakukakan pengiriman variable saat cell pada datagrid selesai diedit baik itu saat user menekan tombol Enter ataupun saat mengalihkan klik mouse ke Area lain. Datagrid pada flash dapat dibuat editable dengan cara mengaktifkan sebuah class pada datagrid yaitu nama_instance_datagrid.editable = true;. Dengan demikian datagrid menjadi dapat diedit dan diubah data pada cell-nya.

Baik langsung kita mulai projectnya, langkah pertama yaitu pembuatan database buatlah database seperti ini di phpmyadmin anda, sebagai contoh gunakan database yang saya buat dibawah ini:

I. DATABASE

tabel2

CREATE DATABASE `coba`;

USE `coba`;

CREATE TABLE `cb` (

`nama` varchar(20) NOT NULL,

`score` int(11) NOT NULL

);

INSERT INTO `cb` (`nama`, `score`) VALUES

(‘angga’, 55),

(‘agus’, 10),

(‘bilal’, 15),

(‘fauzi’, 50),

(‘basiluddin’, 30);

II. MENYUSUN STAGE

stage_dg

Stage hanya terdiri dari satu objek yaitu datagrid tekan Ctrl+F7 pada keyboard dan tarik component data grid ke stage. Lalu beri nama instance pada datagrid dengan nama “my_dg“.

III. PEMBERIAN ACTIONSCRIPT

Pemberian action script ini harus memperhatikan instance pada datagrid yaitu harus diberi nama sama dengan yang ada pada skrip berikut yaitu “my_dg” sehingga skrip dapat berfungsi dengan baik.

___________________________________________________________

var myDP:Array = new Array();

var lv = new LoadVars();

var lv_update = new LoadVars();

my_dg.editable = true;

//_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 1

lv.onLoad=function(){

var dt:Array = lv.nama.split(“,”,lv.baris);

var dta:Array = lv.score.split(“,”,lv.baris);

for (var i=0; i<lv.baris; i++){

myDP.addItem({nama:dt[i], score:dta[i]});

}

my_dg.dataProvider = myDP;

}

//_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 2

var myListener_obj:Object = new Object();

myListener_obj.cellEdit = function(evt_obj:Object) {

var kol:Object = my_dg.columnNames[evt_obj.columnIndex];

lv_update.kolom = kol;

lv_update.index_data = evt_obj.itemIndex;

lv_update.dt_new = evt_obj.target.selectedItem[kol];

lv_update.sendAndLoad(“http://localhost/projek/update.php&#8221;,lv_update,”post”);

};

// menambahkan sebuah listener ke datagrid “my_dg”

my_dg.addEventListener(“cellEdit”, myListener_obj);

lv.load(“http://localhost/projek/load.php&#8221;,lv,”post”);

//_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 3

_______________________________________________________________

Baiklah skrip diatas dibagi menjadi 3 besar pertama, mendefinisikan variabel yang dibutuhkan yaitu sebuah array:myDP, kemudian variabel LoadVars sebagai object, dan setting datagrid menjadi editable.

Bagian Kedua yaitu bagian dimana datagrid meload data dari load.php yang ada di direktori localhost. Dimana skrip my_dg.dataProvider = myDP; merupakan perintah untuk mengisi datagrid my_dg dengan array myDP yang nantinya berisi data-data pada mysql. Jadi menjadikan array myDP sebagai penyedia data di datagrid “my_dg”.

Skrip bagian 3 adalah inti semuanya yaitu mamanfaatkan event celledit pada datagrid untuk mengirim variabel ke php sehingga php bisa melakukan update terhadap tabel di mysql. variabel yang dikirim dari flash ini adlah

$_POST[‘kolom‘], $_POST[‘index_data’], dan $_POST[‘dt_new’].

Variabel-variabel diatas akan diproses oleh skrip PHP yang bernama update.php

III. SKRIP PHP

1. http://localhost/projek/load.php dengan skrip untuk menampilkan data ke datagrid

<?php

mysql_connect(“localhost”,”root”,””);// ISI HOST,USER,DAN PASSWORD ANDA

mysql_select_db(“coba”);

$q = mysql_query(“select * from cb order by nama asc”);

$q2 = mysql_query(“select * from cb order by nama asc”);

echo “&nama=”;

while($data=mysql_fetch_array($q)){

echo $data[‘nama’].”,”;

}

echo “&baris=”.mysql_num_rows($q);

echo “&score=”;

while($dta=mysql_fetch_array($q2)){

echo $dta[‘score’].”,”;

}

?>

2. http://localhost/projek/update.php untuk proses update data

<?php

mysql_connect(“localhost”,”root”,””);// ISI HOST,USER,DAN PASSWORD ANDA

mysql_select_db(“coba”);

$kolom = $_POST[‘kolom’];

$index_data = $_POST[‘index_data’];

$data_baru = $_POST[‘dt_new’];

function update($kolom,$index_data,$data_baru){

$query = mysql_query(“select nama from cb order by nama asc”);

while($dt=mysql_fetch_array($query)){

$baris[] = $dt[0];

}

$qr = mysql_query(“update cb set $kolom=’$data_baru’ where nama=’$baris[$index_data]'”);

if($qr){

echo”&stats=berhasil”;

}else{

echo”&stats=gagal”;

}

}

update($kolom,$index_data,$data_baru);

?>

IV.TEST

Letakkan Seluruh file ini dalam direktori http://localhost/projek/ atau jika anda menggunakan wamp taruh di wamp/www/projek

file_dg

Lakukan Test Movie dengan Menekan Ctrl+Enter pada keyboard dan cobalah mengklik cell-cell yang ada.

test_dg_edit

Demikianlah projek kali ini semoga bermanfaat, dan juga mengingat cukup sulitnya membuat tutorial ini tolong jangan asal copy paste tanpa mecantumkan link blog aanx04.wordpress.com.

Silahkan Download file projek asli dari aanx04.wordpress.com.

edit_datagrid_byaanx04.rar

Sebelum dan sesudahnya saya ucapkan terimakasih semoga berguna.

Iklan

14 Responses to Edit Data Mysql dengan Datagrid di Flash

  1. mau tes says:

    nice turtorialnya mas…..itu data di atas di binding dulu gak ya mas??koq saya coba gak bisa ya…….

  2. mau tes says:

    wew maap salah tes saya pnya saya connect sama xml …..
    kurang baca cm donlod aja saya 😀

    ok ntar kalo bisa jadinya ntar saya kirim …….

  3. atoy says:

    halo, Angga . . . . . . .
    ma’kasih ya tutorial, maaf baru sempat buka, kemarin2 agak sibuk . . . . . .

  4. mautes says:

    echo “&baris=”.mysql_num_rows($q);

    nanya nech mas masih gak ngerti ma baris itu….
    …kenapa kalo barisnya lebih dari 2 ga mw ya saya???

    • aanx04 says:

      skrip itu digunakan untuk mengisi variabel “baris” yg akan diload di flash.

      perhatikan…..echo “&baris=”.mysql_num_rows($q);

      maka dibrowser akan tampil “&baris=barispadadatamysql”

      karena flash hanya bisa membaca variabel dengan bentuk &vaariabel1=…&vriabel2=…&variabel3=…

      itu semua hal pertama yang menjadi maksud dari skrip tersebut…..

      __________________________________

      maksud dari variabel &baris=… adalah membatasi perulangan pada sintax AS2 berikut

      for (var i=0; i<lv.baris; i++){

      myDP.addItem({nama:dt[i], score:dta[i]});

      }
      ______________________________________

  5. You’re genius my friend…………
    Saya lumayan lama belajar flash aja ga kepikiran kalo bisa bikin data grid murni pake flash
    kalo pake flex sih banyak yang bisa.

    • aanx04 says:

      oke mkasih maz…
      saya juga baru belajar koq….

      r’ u web developer too???
      keep connect aja…
      mkasih dah berkunjung…

      ohh ya… mas saya agak bngung dg konsep flex,AIR,dll…. maklum saya juga pemula di bidang Web….bsa djelaskan???…
      regard aanxAdmin

  6. ulltrock says:

    eh jek…
    la gene koe iso nyambungke flash ro sql..
    kui pola dasare???
    la kui iso go model seng luwih kompleksa ra??
    ribet ora??
    opo polane kyo ngono yoan tetap?

    • aanx04 says:

      model-le sederhana….
      prinsip-e….
      1. flash player bsa mengirim variabel keluar dan masuk kedalam
      2. flash player butuh server side script utk komunikasi dengan mysql(php,jsp,asp,dll).
      3.variabel yang bisa diterjemahkan oleh flash player berbentuk:
      variabel1&=…&variabel2=….dst

  7. atoy says:

    halo, Angga . . . . . . .
    bikin tutorial search data xml dari flash dong . . . . . . . . .
    misal :
    bila cari nama A, maka yg muncul data2nya si A,
    bila cari nama B, maka yg muncul data2nya si B, dst nya

    ma’kasih ya, . . .
    —-atoy—–

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: