BAB XIV MANIPULASI DATABASE MYSQL Kompetensi Dasar Mahasiswa dapat memanipuasi database mysql menggunakan actionscript 3 flash.
Indikator Setelah mengikuti perkuliahan, mahasiswa diharapkan dapat: 1. Membuat database MySql 2. Membuat program PHP yang menghasilkan text format XML 3. Membaca text format XML dengan actionscript 3 4. Menampilkan, menambah, merubah dan menghapus data mysql dengan actionscript 3 dan PHP
Deskripsi Singkat Di Bab XIV mahasiswa akan membuat aplikasi multimedia yang dapat menampilkan, menambah, merubah dan menghapus data dari database mysql dengan menggunakan actionscript 3 dan PHP. Dalam bab ini mahasiswa dianggap sudah paham tentang database mysql dan PHP yang ada di mata kuliah di semester sebelumnya.
Materi 1. Database Mysql 2. Pemrograman PHP 3. Menampilkan, menambah, merubah dan menghapus data dengan flash.
Teori MySQL adalah
sebuah perangkat
lunak sistem
manajemen basis
data SQL database
management system atau DBMS yang multithread, multi-user, dengan sekitar 6 juta instalasi
Modul Praktikum Multimedia
|
STMIK Duta Bangsa -
132
di seluruh dunia. MySQL AB membuat MySQL tersedia sebagai perangkat lunak gratis dibawah lisensi GNU General Public License (GPL). PHP: Hypertext Preprocessor adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML. PHP banyak dipakai untuk memrogram situs web dinamis. XML (Extensible Markup Language) adalah bahasa markup untuk keperluan umum yang disarankan oleh W3C untuk membuat dokumen markup keperluan pertukaran data antar sistem yang beraneka ragam. XML merupakan kelanjutan dari HTML (HyperText Markup Language) yang merupakan bahasa standar untuk melacak Internet
Praktik 1. Membuat database Mysql Dalam kasus ini kita akan membuat database untuk menyimpan konten presentasi a. Silahkan buat database dengan nama “presentasi”. Berikut langkah-langkahnya: -
Jalankan apache server dan mysql server. Dalam kasus ini menggunakan Xampp, dapat juga menggunakan software lain.
-
Buka di browser alamat : http://localhost/phpmyadmin
b. Buatlah tabel “slide” dengan dua field. -
Klik nama database “presentasi” create table
Modul Praktikum Multimedia
|
STMIK Duta Bangsa -
133
-
Aturlah struktur table seperti berikut ini Nama Field Idkonten
Konten
c.
Struktur Type : Int Length : 5 Auto_Increament Index: Primary Type : Text
Tambahkan satu record sebagai sampel data, dengan menggunakan insert
2. Membuat file PHP Dalam kasus ini akan dibuat 5 (lima) file php sebagai penghubung antara flash dan mysql yaitu koneksi, tampil, tambah, ubah dan hapus. Buatlah folder terlebih dahulu di : c:/xampp/htdocs dengan nama dbflash
Modul Praktikum Multimedia
|
STMIK Duta Bangsa -
134
a.
Membuat koneksi mysql dengan PHP. Ketik kode berikut menggunakan notepad atau php editor yang anda punya dan simpan dengan nama “koneksi.php”
Keterangan : -
$hasil akan dibaca oleh actionscript. Format text yang dapat dibaca oleh actionscript sebagai berikut: namaVariabel=Nilai variabel
Jika variabel lebih dari satu dapat dipisahkan dengan tanda “&” namaVariabel1=Nilai variabel1&namaVariabel2=Nilai variabel2 b. Membuat kode php untuk mengecek status koneksi. Ketik kode berikut menggunakan notepad atau php editor yang anda punya dan simpan dengan nama “cekkoneksi.php”
Keterangan : $hasil akan dibaca oleh actionscript.
Modul Praktikum Multimedia
|
STMIK Duta Bangsa -
135
c.
Menampilkan data mysql dengan php dan ditampilkan dalam format XML. Ketik kode berikut menggunakan notepad atau php editor yang anda punya dan simpan dengan nama “tampil.php”.
Keterangan: - header('Content-Type: text/xml') : format file berupa text/XML Sebelum melanjutkan dilahkan dibuka dibrowser terlebih dahulu. Ketik alamat : http://localhost/dbflash/tampil.php sehingga tampil seperti gambar berikut:
d. Membuat kode php untuk menyimpan data ke mysql. Ketik kode berikut menggunakan notepad atau php editor yang anda punya dan simpan dengan nama “simpan.php”.
Modul Praktikum Multimedia
|
STMIK Duta Bangsa -
136
Keterangan : -
$hasil akan dibaca oleh actionscript
-
Operator .= akan menambahkan nilai dari $hasil sebelumnya yang ada di file koneksi.php
e. Membuat kode php untuk merubah data di mysql. Ketik kode berikut menggunakan notepad atau php editor yang anda punya dan simpan dengan nama “ubah.php”.
f.
Membuat kode php untuk menghapus data dari mysql. Ketik kode berikut menggunakan notepad atau php editor yang anda punya dan simpan dengan nama “hapus.php”.
3. Membuat interface menggunakan flash Disini kita akan membuat interface atau form untuk menampilkan, menambah, merubah dan menghapus data dari mysql. a. Buatlah layer seperti pada gambar berikut ini
Modul Praktikum Multimedia
|
STMIK Duta Bangsa -
137
b. Membuat label. Klik frame nomor 1 di layer slide
-
Klik text tool
Aturlah properties seperti pada gambar berikut ini
-
Drag ke Stage Ketik judul “ FLASH dan MYSQL”
-
Lakukan Hal yang sama untuk membuat tulisan “id konten” dan “konten”, seperti gambar berikut:
c.
Membuat text untuk menampilkan field “idkonten” -
Gunakan text tool
kemudian atur properties seperti gambar berikut ini:
Modul Praktikum Multimedia
|
STMIK Duta Bangsa -
138
-
Drag ke stage kemudian berikan nama instance name “txtidkonten”
d. Membuat text untuk menampilkan field “konten” -
Gunakan text tool
kemudian atur properties seperti gambar berikut ini:
-
Drag ke stage kemudian berikan nama instance name “txtkonten”
e. Membuat text untuk menampilkan status koneksi -
Gunakan text tool
kemudian atur properties seperti gambar berikut ini:
Modul Praktikum Multimedia
|
STMIK Duta Bangsa -
139
-
f.
Drag ke stage kemudian berikan nama instance name “txtkonek”
Membuat text untuk menampilkan pesan query - Gunakan text tool
kemudian atur properties seperti gambar berikut ini:
- Drag ke stage kemudian berikan nama instance name “txtpesan”
Modul Praktikum Multimedia
|
STMIK Duta Bangsa -
140
g. Membuat text untuk menampilkan pesan kesalahan - Gunakan text tool
kemudian atur properties seperti gambar berikut ini:
- Drag ke stage kemudian berikan nama instance name “txtsalah”
h. Menambahkan tombol Tambahkan tombol dengan instance name-nya seperti pada gambar berikut ini:
Modul Praktikum Multimedia
|
STMIK Duta Bangsa -
141
i.
Menambahkan actionscript Klik frame nomor 1 layer actions Klik kanan Actions (F9) Ketik Kode Berikut ini - Actionscript untuk cek koneksi
Keterangan: http://localhost/dbflash/cekkoneksi.php alamat file berada. Dapat diganti sesuai lokasi file URLRequest : class yang digunakan untuk memanggil file dengan menyebutkan URL-nya URLLoader : class yang digunakan untuk memuat isi dari file yang dipanggil URLRequest dataFormat
:
atribut
dari
URLLoader
yang
digunakan
untuk
mendefinisikan format data yang dimuat hasil.target.data.konek : konek merupakan variabel yang dihasilkan dari cekkoneksi.php. Coba anda jalankan di browser http://localhost/dbflash/cekkoneksi.php maka akan dihasilkan text seperti berikut ini:
varProsesKonek.addEventListener(Event.COMPLETE, kompletKonek) ketika varProsesKonek selesai memuat file cekkoneksi.php maka akan menjalankan fungsi kompletKonek stage.addEventListener(Event.ACTIVATE,prosesKonek) ketika stage aktif maka akan dijalankan fungsi prosesKonek varProsesKonek.load(varKonek) memuat varKonek yang berisi alamat file cekkoneksi.php
Modul Praktikum Multimedia
|
STMIK Duta Bangsa -
142
- Actionscript untuk menampilkan data
Keterangan: XML : Class untuk menampung format text XML xml_idkonten.splice(0, juml_data) : menghapus isi array xml_idkonten dari index 0 sampai index jumlah data-nya xml_data=new XML(hasil.target.data) : membaca data dari XML yang telah dimuat xml_data..idkonten.length(): panjang karakter tag idkonten, dimana idkonten merupakan tag XML xml_data..idkonten dan xml_data..konten : membaca tag xml
Modul Praktikum Multimedia
|
STMIK Duta Bangsa -
143
xml_idkonten.push(xml_data..idkonten[i]) xml_konten.push(xml_data..konten[i]) mengisi array idkonten dan konten dengan data yang ada di tag xml untuk menampilkan ke text dengan kode berikut:
nomor merupakan index dari array xml_idkonten dan xml_konten - Actionscript untuk tombol “maju”, “mundur”, dan “tambah”
- Actionscript untuk simpan data
Modul Praktikum Multimedia
|
STMIK Duta Bangsa -
144
Keterangan: varSimpan.method
=
URLRequestMethod.POST
:
method
yang
digunakan dalam pengiriman data menggunakan POST, sama seperti form pada HTML varSimpan.data= varData : atribut data yang akan dikirim berisi varData varData:URLVariables : varData merupakan variable URL varData.txtkonten = txtkonten.text : varData akan mengirimkan variabel txtkonten ke file simpan.php. Dimana simpan.php akan membaca data variable tersebut menggunakan $_POST[‘txtkonten’] varProsesSimpan.load(varSimpan) : proses memuat varSimpan. Dimana varSimpan telah memanggil file simpan.php - Actionscript untuk ubah data
Keterangan : varData.txtidkonten = txtidkonten.text : varData akan mengirimkan variabel txtidkonten ke file ubah.php. Dimana ubah.php akan membaca data variabel tersebut menggunakan $_POST[‘txtidkonten’] varData.txtkonten = txtkonten.text : varData akan mengirimkan variabel txtkonten ke file ubah.php. Dimana ubah.php akan membaca data variabel tersebut menggunakan $_POST[‘txtkonten’] varProsesUbah.load(varUbah) : proses memuat varUbah. Dimana varUbah telah memanggil file ubah.php
Modul Praktikum Multimedia
|
STMIK Duta Bangsa -
145
- Actionscript untuk hapus data
Keterangan : varData.txtidkonten = txtidkonten.text : varData akan mengirimkan variabel txtidkonten ke file hapus.php. Dimana hapus.php akan membaca data variabel tersebut menggunakan $_POST[‘txtidkonten’] varProsesHapus.load(varHapus)
:
proses
memuat
varHapus.
Dimana
varHapus telah memanggil file hapus.php SILAHKAN DIJALANKAN CTRL+ENTER
Modul Praktikum Multimedia
|
STMIK Duta Bangsa -
146
Tugas 1. Buatlah tabel “berita” dengan struktur table seperti berikut ini Nama Field Idberita
Judul Berita
Struktur Type : Int Length : 5 Auto_Increament Index: Primary Type : Varchar Length : 255 Type: Text
2. Buatlah interface flash untuk memanipulasi tabel berita tersebut.
Modul Praktikum Multimedia
|
STMIK Duta Bangsa -
147