" Kuliah Si Boersan "

Tampilkan postingan dengan label Adobe Flash CS3. Tampilkan semua postingan

30 Juni 2013

Peta Sederhana dengan XML

10.23 Unknown No comments

TUTORIAL APLIKASI MAP DENGAN XML + FUNGSI SEARCH
Requirement:
Flash CS4 dan Flash CS5, publish ke player 10
(Agar lebih aman, silakan convert ke Flash 8 dan CS3)
Actionscript 2
Basic File: map0.fla
DOWNLOAD DI SINI
File dasar tersebut sudah berisi aset-aset yang dibutuhkan.
virtual camera dan map
serta layer-layer actionscript.
Prinsip-prinsip dan batasan aplikasi ini:
- Metode zoom in/out memakai vcam (virtual camera, AS2 dari Sham Bangal yang dimodifikasi Bryan Heisey). Vcam akan mengambil alih stage dengan localtoglobal, jadi xy movie harus dilihat dari vcam. Karena itu semua aset yang tidak ingin ikut di-zoom atau drag harus dimasukkan dalam mc "kamera" di layer "vcam"
- Semua info akan diambil dari xml, termasuk nama dan koordinat lokasi dan peta.
- Fungsi-fungsi akan disederhanakan dengan memakai iterasi for loops, jadi biasakan melihat kode for (i = 1; i <= 3; i += 1) dst... i+=1 lebih cepat dibandingkan i++ (jika ada yang ingin tahu)
- Pada Flash CS5 (mungkin juga CS4?), dynamic text sebaikbya memakai device font, dalam hal ini "Sans", jika memakai jenis font lain, embed font-nya! Dalam file yg didownload, cek ulang apakah ada dynamic text yang terlewat tidak memakai font "SANS".
- Publish fullscreen melalui CS5 membuat input text disable (alasan Adobe: security. Damn). Hanya berfungsi fullscreen utk standalone
- Publish di player 9, AS2, melalui CS5 tidak akan membuat input text berfungsi

OPTIONAL
di layer "mouse", masukkan
map.onEnterFrame=function() {
Mouse.hide();
_root.kamera.koor.posX.text="map x= "+map._x;
_root.kamera.koor.posY.text="map y= "+map._y;
}
Jika fungsi ini tidak dipakai, jangan lupa dipindahkan Mouse.hide() ke layer "aszoom"
Ini optional karena fungsinya nanti untuk mengecek xy map sesuai letak area yang berisi info.

1. Membuat Pengganti Mouse dan Tool Zoom
Layer "vcam", mc "toolzom"
ada lima frame dengan stop():
1. custom cursor
2. zoom in cursor
3. zoom out cursor
4. drag cursor
5. empty cursor (ini bisa dibuang karena kita tidak akan memakainya, atau biarkan saja)

Di layer "mouse", tambahkan kode:

_root.kamera.koor._visible = true;//optional

_root.kamera.garis._visible = true;//optional

_root.kamera.oksrc._visible=false;//menyembunyikan mc "search"

_root.kamera.navmenu._alpha = 25;// zoom transparant, jika diperlukan mengatur alpha navmenu

//ini kode inti

Mouse.hide();

kamera.onMouseMove = function()

{

//if(_root.zoomin || _root.zoomout || _root.dragme) {

this.toolzoom._x = this._xmouse;

this.toolzoom._y = this._ymouse;

updateAfterEvent();

//}

};

Kita membuat mouse menghilang dan menggantinya dengan custom cursor (toolzom frame 1).
kode: if(_root.zoomin || _root.zoomout || _root.dragme)
diperlukan jika (toolzom frame 1) adalah empty cursor.
Jadi karena di frame 1 adalah custom cursor, dengan sendirinya mouse sudah tergantikan

2. Membuat Fungsi Zoom In/Out dan Drag
Di layer "aszoom", masukkan kode:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

var klik = 0;

_root.zoomin = false;

_root.zoomout = false;

_root.dragme = false;

function zoom(mc, faktor, waktu)

{

type = mx.transitions.easing.Strong.easeOut;

besarx = new mx.transitions.Tween(mc, "_xscale", type, mc._xscale, mc._xscale * faktor, waktu, true);

besary = new mx.transitions.Tween(mc, "_yscale", type, mc._yscale, mc._yscale * faktor, waktu, true);

geserx = new mx.transitions.Tween(mc, "_x", type, mc._x, _root._xmouse, waktu, true);

gesery = new mx.transitions.Tween(mc, "_y", type, mc._y, _root._ymouse, waktu, true);

}

map.indo.onRelease = function()

{

if (!dragme)

{

if (_root.zoomin && klik < 5)

{

zoom(kamera,0.5,1);

klik++;

}

if (_root.zoomout && klik > 0)

{

zoom(kamera,2,1);

klik--;

}

}

this.stopDrag();

};

map.indo.onPress = function()

{

if (dragme)

{

map.startDrag();

}

}; 

kode pada layer "zoom button":

for (i = 1; i <= 3; i += 1)

{

buttonmenu = _root.kamera.navmenu["b" + i];

buttonmenu.id = i;

buttonmenu.onRelease = function()

{

_root.kamera.papan._visible = false;// menhilangkan papan keterangan

_root.kamera.papan.gotoAndStop("fungsi");// mengfungsikan kembali button

_root.cursorMovieClip = true;

_root.kamera.oksrc._visible = false;// menghilangkan form search

_root.kamera.bsearch0._visible = true;// Memunculkan button search

_root.map["tanda" + i]._visible = false;//menghilangkan marker

if (this.id == 1)

{

_root.kamera.toolzoom.gotoAndStop(2);

_root.zoomin = true;

_root.zoomout = false;

_root.dragme = false;

}

if (this.id == 2)

{

_root.kamera.toolzoom.gotoAndStop(3);

_root.zoomout = true;

_root.zoomin = false;

_root.dragme = false;

}

if (this.id == 3)

{

_root.kamera.toolzoom.gotoAndStop(4);

_root.dragme = true;

_root.zoomin = false;

_root.zoomout = false;

}

updateAfterEvent();

};

buttonmenu.onRollOver = function()

{

_root.kamera.toolzoom.gotoAndStop(1);

_root.kamera.navmenu._alpha = 100;// zoom transparant 100% 

_root.cursorMovieClip = true;

};

buttonmenu.onRollOut = function()

{

_root.kamera.navmenu._alpha = 25;// zoom transparant 25%

tugelmode();

};

}

function tugelmode()

{

if (_root.zoomin)

{

_root.kamera.toolzoom.gotoAndStop(2);

}

else if (_root.zoomout)

{

_root.kamera.toolzoom.gotoAndStop(3);

}

else if (_root.dragme)

{

_root.kamera.toolzoom.gotoAndStop(4);

}

else if (_root.cursorMovieClip)

{

_root.kamera.toolzoom.gotoAndStop(1);

}

}

Kita memakai map.indo sebagai mc yang memicu fungsi zoom() saat di-press ketika tidak dalam dragmode.
Juga untuk drag, namun yang kita drag adalah mc "map" bukan "map.indo".
Fungsi iterasi di atas dan tugelmode() adalah penyederhanaan event release, rollover, dan rollout, untuk _root.kamera.navmenu.b1, _root.kamera.navmenu.b2, _root.kamera.navmenu.b3. Ini menggantikan 6 fungsi pada tutorial sebelumnya.
Hasilnya
http://nayzuko.com/flashfiles/map1.swf
3. Menggunakan XML untuk Info dan Marker
Di movie, layer "vcam" kita mempunyai mc "papan" yang akan menampung judul area di dynamic text "infot",
Gambar area di mc kosong "gbr" dan keterangan area di dynamic text "infot2". Ada mc "papanpt" dg dynamic text "nmpt" yg berfungsi sama seperti "infot". Ini optional.
Di file "map1.fla", kita juga mempunyai 5 area di map, yakni "z0", "z1"... "Z4". Jika menamainya mulai dari "z1" bukan "z0" maka nanti harus ada penyesuaian. Kita memulai dari angka 0 agar lebih mudah dan menyesuaikan dengan cara Flash menghitung.
Sekarang kita buat file xml yang berisi info 5 area, namakan "dataku.xml":

<?xml version="1.0" encoding= "UTF-8" ?>

<datagw>

<infogw

id="0"

judul="block g"

gambar="images/gbr0.jpg"

mapx="371"

mapy="220"

posx="-99"

posy="-21">Inilah rumah pertama</infogw>

<infogw

id="1"

judul="block h"

gambar="images/gbr1.jpg"

mapx="40"

mapy="-145"

posx="228"

posy="338">Inilah rumah Kedua </infogw>

<infogw

id="2"

judul="pt. lg"

gambar="images/gbr2.jpg"

mapx="396"

mapy="180"

posx="-121"

posy="17.5">Inilah rumah Ketiga</infogw>

<infogw

id="3"

judul="block i"

gambar="images/gbr3.jpg"

mapx="450"

mapy="167"

posx="-175"

posy="32">Inilah rumah Keempat</infogw>

<infogw

id="4"

judul="pt. anu"

gambar="images/gbr2.jpg"

mapx="464"

mapy="197"

posx="-190"

posy="4">Inilah rumah Kelima</infogw>

</datagw>

Nodes "id" optional. Siapa tahu nanti berguna. Sediakan folder "images" di tempat yg sama dengan "map1.swf", isinya 5 gambar sesuai isi xml.
Mapx, mapy adalah koordinat xy map saat area berada di tengah stage. Cek dengan menggunakan drag cursor. geser map sehingga area di tengah dan catat xy-nya.
Inilah gunanya kode "OPTIONAL" sebelumnya. Buang kode ini dan mc "koor", mc "garis" jika aplikasinya sudah final.

Posx, posy adalah koordinat xy area (z0...z5), cek langsung di flash, di property x y.

Node text berisi keterangan area, misalnya "iniah rumah pertama bla bla bla". Jangan lupa dynamic text memakai device font atau embed font-nya.

4. LOAD DAN KONTROL ISI XML
Di layer "munculnya info" isi kode ini:

posisix=[];

posisiy=[];

areamap=[];

var myXML:XML = new XML();

myXML.ignoreWhite=true;

myXML.load("dataku.xml");

myXML.onLoad = function(success) {

if (success) {

var mydata = myXML.firstChild.childNodes;

for(i=0; i<mydata.length; i+=1){

showInfo(mydata[i]);

posisix[i]=mydata[i].attributes.mapx;

posisiy[i]=mydata[i].attributes.mapy; 

areamap[i]=mydata[i].attributes.judul;  

}

} else {

pesan.text="gagal";

}

};

_root.kamera.papan._visible=false;

function showInfo(dataxml) {

var judul=dataxml.attributes.judul;

var isi=dataxml.firstChild.nodeValue;

var gambar=dataxml.attributes.gambar;

var posx=dataxml.attributes.posx;

var posy=dataxml.attributes.posy;

var no=i;

var area=_root.map["z"+no];

map.attachMovie("tanda", "tanda"+no, 500+i);

var marker=_root.map["tanda"+no];

marker._x=posx;

marker._y=posy;

marker.infopt.text=judul;

marker._visible=false;

area.onPress=function(){

trace(this);

_root.kamera.papan.gotoAndStop("tkfungsi");

_root.kamera.papan.infot.text=judul;

_root.kamera.papan.infot2.text=isi;

_root.kamera.papan.gbr.loadMovie(gambar);

_root.kamera.papan._visible=true;

_root.zoomin=false;

_root.zoomout=false;

_root.dragme=false;

_root.kamera.toolzoom.gotoAndStop(1);

_root.map["tanda"+i]._visible=false;

}

// roll over button balik semula

area.onRollOver=function() {

_root.kamera.toolzoom.gotoAndStop(1);

_root.kamera.papanpt.nmpt.text=judul;

}

area.onRollOut=function() {

_root.kamera.papanpt.nmpt.text=""; // teks kosong

tugelmode();    

}

//end for

};

_root.kamera.papan.clos.onRelease=function() {

_root.kamera.toolzoom.gotoAndStop(1);

_root.kamera.papan._visible=false;

_root.kamera.papan.gotoAndStop("fungsi");

}

Pertama kita membuat array untuk menampung posisi map, yakni posisix=[]; dan posisiy=[]; serta nama area di areamap=[];
Pada file lama, array ini namanya "area". dijadikan "areamap" agar tidak bingung atau berpotensi konflik dengan area sebagai wakil mc lokasi (_root.map["z"+no]).

Objek XML kita adalah myXML. Sedangkan "var mydata = myXML.firstChild.childNodes;" adalah variabel array yang mewakili setiap nodes secara berurutan dalam dataku.xml.
Jadi node pertama atau "mydata[0]" adalah

<infogw

id="0"
judul="block g"
gambar="images/gbr0.jpg"
mapx="371"
mapy="220"
posx="-99"
posy="-21">Inilah rumah pertama</infogw>

Begitu seterusnya.

Artinya, jika kita ingin mengakses judul dan posx dalam nodes urutan 3 (atau mydata[2]):
mydata[2].attributes.judul;
mydata[2].attributes.posx;
Untuk memudahkan pengkodean, kita membuat fungsi showInfo() yang menampung setiap isi array mydata.

Kita cukup mendefinisikan variabelnya sekali:

var judul=dataxml.attributes.judul;
var isi=dataxml.firstChild.nodeValue;
var gambar=dataxml.attributes.gambar;
var posx=dataxml.attributes.posx;

Dengan showInfo(mydata[i]), kita meminta Flash melakukan berulang kali sebanyak isi array. Jika kita tidak memakai atribut, maka path xml-nya adalah:
var isi=dataxml.firstChild.nodeValue;
Sedikit tentang struktur xml dalam "dataku.xml":

<datagw>
<infogw attibut="">teks
</infogw>
<infogw attibut="">teks
</infogw>
...
<infogw attibut="">teks
</infogw>
</datagw>

Untuk mengakses node teksnya:
myXML.childNodes[0].childNodes[0].childNodes[0].nodeValue
myXML.childNodes[0].childNodes[1].childNodes[0].nodeValue
...
myXML.childNodes[0].childNodes[4].childNodes[0].nodeValue
Jika tidak ingin memakai atribut (attribute wajib pakai tanda kutip) dan mengubah strukturnya menjadi begini:

<datagw>

<judul>Inilah rumah pertama</judul>

<gbr>images/gbr0.jpg </gbr>

<infogw>Bla bla 1</infogw>

</datagw>

<datagw>

<judul>Inilah rumah kedua</judul>

<gbr>images/gbr1.jpg</gbr>

<infogw>Bla bla 2</infogw>

</datagw>

Maka untuk mengakses "judul" dan "gbr" (images/gbr0.jpg):

myXML.childNodes[0].childNodes[0].childNodes[0].nodeValue; // ini judul
myXML.childNodes[0].childNodes[1].childNodes[0].nodeValue; // ini gambar
myXML.childNodes[0].childNodes[2].childNodes[0].nodeValue; // ini infogw
{/code}
Nodevalue "judul" di node yang kedua (rumah kedua):
{code}myXML.childNodes[1].childNodes[0].childNodes[0].nodeValue; // output "Inilah rumah kedua"
...
myXML.childNodes[4].childNodes[0].childNodes[0].nodeValue; // utk node ke-5

Damn, jalan melingkar. LoadVars jauh lebih mudah dan efektif.

Selanjutnya...

Ada kode:

var no=i;
var area=_root.map["z"+no];

map.attachMovie("tanda", "tanda"+no, 500+i);
var marker=_root.map["tanda"+no];

"no" di sini sama dengan "i" karena semua nama mc kita sudah mulai dengan "0"
karena "mydata" adalah array yang dimulai dengan "0"

Seandainya sudah kebablasan memulai nama areanya tidak dengan angka 0, misalnya map.z1, map.z2...map.z114
buat "no=i+1"

var no=i+1;
var area=_root.map["z"+no];

map.attachMovie("tanda", "tanda"+i, 500+i);
var marker=_root.map["tanda"+i];

Dengan begitu, kita tetap bisa mengontorl map.z1 dst sementara "tanda" adalah linkage id bagi mc "petunjuk lokasi" yang ada di library, tidak ada di stage.
jadi, untuk "tanda" kita memakai iterasinya tetap dengan "i", bukan "no".

Oke, done utk XML.
Tidak perlu preview swf dan download .fla karena movienya pasti jalan.
***
5. FUNGSI SEARCH DAN PENANDA (MARKER)
Berbeda dari fungsi search sebelumnya, di sini kita akan membuat fungsinya terpisah dari fungsi onRelease button.
Karena kita akan menambahkan search dengan menekan "Enter" selain menekan tombol. Sebelum itu, kita harus membuat map kembali ke skala dan posisi awal dengan fungsi zoom2(). Skala awal ditentukan oleh skala vcam 100% dengan xy 275, 200. Posisi awal map, seperti bisa dicatat, xy-nya 271.85 dan 126.7.
Tambahkan kode ini di layer "aszoom":

function zoom2(mc, waktu)

{

type = mx.transitions.easing.Elastic.easeOut;

besarx = new mx.transitions.Tween(mc, "_xscale", type, mc._xscale, 100, waktu, true);

besary = new mx.transitions.Tween(mc, "_yscale", type, mc._yscale, 100, waktu, true);

geserx = new mx.transitions.Tween(mc, "_x", type, mc._x, 275, waktu, true);

gesery = new mx.transitions.Tween(mc, "_y", type, mc._y, 200, waktu, true);

gesermapx = new mx.transitions.Tween(_root.map, "_x", type, _root.map._x, 271.85, waktu, true);

gesermapy = new mx.transitions.Tween(_root.map, "_y", type, _root.map._y, 126.7, waktu, true);

}

Pemicu zoom2 ada di mc "kamera.bsearch0". Ini dummy button, tujuan utk membuat skala kembali ke awal dengan zoom2(); lalu memunculkan input_text dan button search sungguhan.
Kodenya letakkan di "as search":

kamera.oksrc._visible=false;//ini mc search yang asli yang disembunyikan dulu

kamera.bsearch0.onRelease = function() {

kamera.oksrc._visible=true;//mc seacrh asli muncul

kamera.oksrc.warn._visible=true;//teks petunjuk

kamera.bsearch0._visible=false;//mc dummy lenyap

_root.zoomin=false;

_root.zoomout=false;

_root.dragme=false;

zoom2(kamera, 1);//kembalikan ke skala dan klik awal

klik=0;

_root.kamera.toolzoom.gotoAndStop(1);

}

kamera.bsearch0.onRollOver=function() {

_root.kamera.toolzoom.gotoAndStop(1);

}

kamera.bsearch0.onRollOut=function() {

tugelmode();

}

Ketika mc "kamera.bsearch0" rollOver, custom mouse muncul utk menghilangkan ikon zoomin/out atau drag
saat rollout, tugelmode() utk mengembalikan mode yg aktif.
Setelah diklik akan muncul button search asli yakni "kamera.oksrc.bsrc". Jalankan fungsi cari(); saat diklik.
Ini pemisahan fungsi yang ada sebelumnya (jika kamu punya file yang lama).

kamera.oksrc.bsrc.onRelease = function() {
cari();
};
Berikut fungsi cari(); di layer "as search" juga:

function cari() {

_root.kamera.toolzoom.gotoAndStop(1);

_root.map["tanda"+i]._visible=false;//sembunyikan marker untuk pencarian berikutnya

_root.kamera.oksrc.warn._visible=false;

if (kamera.oksrc.input_txt.text != "") {

for (i=0; i<areamap.length; i++) {

if (areamap[i] == kamera.oksrc.input_txt.text.toLowerCase()) {

kamera.myinfo.text = "Found "+kamera.oksrc.input_txt.text;

_root.map["tanda"+i]._visible=true;

gesermap(map, 1); 

kamera.oksrc.input_txt.text="";

_root.kamera.garis._visible = false;

break;

} else {

kamera.myinfo.text = "No data";

} 

} //end for

} else {

kamera.myinfo.text = "Please type something";

} //end if else result

} //end cari

Fungsi cari() akan mengecek apakah input text berisi, jika berisi apakah isinya sama dengan salah satu elemen di "areamap". Jika iya, geser mapnya menuju lokasi di elemen urutan yang sama di array posisix dan posisiy dengan geserpmap(); Lalu munculkan marker (tanda) yang posisinya sudah kita atur melalui xml, kosongkan isi input text dan hilangkan mc "garis" optional. break. (artinya kalau sudah ketemu, loop dihentikan).

Ini fungsi gesermap() di layer yang sama.

function gesermap(mc, waktu)
{
type = mx.transitions.easing.Strong.easeOut;
geserx = new mx.transitions.Tween(mc, "_x", type, mc._x, posisix[i], waktu, true);
gesery = new mx.transitions.Tween(mc, "_y", type, mc._y, posisiy[i], waktu, true);
}
Done.
Jika ingin membuat fungsi cari(); juga dijalankan dengan menekan tombol Enter, masukkan kode ini di layer yang sama:

var keyListener:Object = new Object();
keyListener.onKeyDown = function() {
if(Key.isDown(Key.ENTER)) {
cari();
}
}
Key.addListener(keyListener);

Download Final FLA

Create, Update, Delete Flash dan PHP Mysql

10.04 Unknown No comments

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.

}

};

}