7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Apps

Membangun Ruang Obrolan dengan Flash, Adobe AIR dan PHP

Read Time: 26 mins

Indonesian (Bahasa Indonesia) translation by Andy Nur (you can also view the original English article)

"Penggunaan utama ruang obrolan adalah untuk berbagi informasi melalui teks dengan sekelompok pengguna lain." - Wikipedia. Selama tutorial Premium ini, saya akan menunjukkan cara membuat ruang obrolan menggunakan Flash, AIR, PHP, MySQL, dan XML.


Antarmuka Pengguna

Kita akan mulai dengan membuat antarmuka pengguna. Kamu dapat menyalin UI saya ke piksel, atau kamu dapat membuat desain sendiri.


Langkah 1: Menyiapkan Dokumen

Buka Flash dan buat dokumen "Flash File (Adobe AIR)" baru. Simpan file ke folder baru sebagai "chatroom.fla". Selanjutnya, buat file "ActionScript" baru dan simpan sebagai "chatroom.as" dan simpan di folder baru.



Langkah 2: Menghubungkan file

Di Flash, navigasikan ke panel "Properties". Di field teks ketik "chatroom" dan tekan enter. Ini akan menautkan file skrip tindakan (yang akan segera kita buat) dan dokumen Flash bersama-sama. Kamu dapat menemukan tutorial lengkap tentang cara mengatur class Dokumen di sini.



 Langkah 3: Mengatur Stage dan Latar Belakang

Di panel properti, atur ukuran stage (bintik putih besar di tengah) ke 230x400 piksel. Selanjutnya, pilih rectangle tool. Atur properti sudut membulat ke 5 piksel. Berikan isi warna putih dan berikan nomor alfa apa pun yang kamu suka -- Saya menetapkan milik saya hingga 10%. Juga, berikan goresan hitam dengan lebar 1 piksel. Gambarlah persegi panjang di atas stage dengan lebar 245 piksel dan tinggi 400 piksel. Tekan F8 untuk mengonversinya menjadi movieclip. Beri nama "background" dan nama instance dari "background". Pada panel filter, tambahkan filter cahaya yang memiliki blur 24, kekuatan 66%, dan atur kualitasnya ke tinggi. Selanjutnya tambahkan filter drop shadow. Berikan blur 4, kekuatan 50%, kualitas tinggi, sudut 90 dan atur jarak ke 2.



Langkah 4: Membuat Panel Login/Daftar

Di panel komponen, seret keluar salinan komponen List ke atas stage. Ini akan berisi daftar pengguna yang sedang online. Berikan nama instance dari 'uList'. Atur properti lebar menjadi 200 dan tingginya menjadi 189. Selanjutnya, ambil text tool. Dengan pengaturan teks statis, gambarlah field teks di atas komponen Daftar baru. Di field teks, masukkan ''Users online'.

Dengan text tool yang masih dipilih, gambarkan field teks lain di bawah komponen Daftar dan masukkan 'Username'. Di bawah field teks itu, gambarkan field teks lain. Field teks baru harus bertuliskan 'Password'. Di bawah field teks 'Username', buat field teks input baru. Berikan nama instance 'user'. Atur lebar menjadi 200 dan tinggi ke 17. Atur warna teks menjadi hitam dan ukuran font menjadi 12. Buat bidang teks input lain dengan pengaturan yang sama di bawah field teks 'Password'. Berikan bidang input teks baru dengan nama instance 'pass', dan set jenis Baris ke 'Password'. Ini akan membuat karakter yang dimasukkan muncul sebagai tanda bintang.



Langkah 5: Menyelesaikan Panel Login/Daftar

Selanjutnya pilih rectangle tool. Berikan sudut bulatnya 5, warna #00CC00 dan tanpa stroke. Gambarlah persegi panjang yang memiliki lebar 122 dan tinggi 43. Ubah segi empat menjadi movieclip baru dan berikan nama dan nama instance dari 'button'. Klik dua kali pada tombol untuk masuk ke mode edit.

Di dalam tombol movieclip, buat layer baru. Buat field teks dinamis baru. Beri nama instance 'dyText', lebar 110, tinggi 36, ukuran font 26 dan warna putih, dan atur menjadi tebal. Keluar dari mode edit dan kembali ke stage.

Pilih tombol, dan arahkan ke panel filter. Berikan drop shadow pada tombol dengan blur 2, kekuatan 66%, kualitas tinggi, sudut 90 dan jarak 1. Terakhir, seret salinan komponen Checkbox. Tempatkan di bawah tombol movieclip. Beri nama iinstance 'remember'. Di panel parameter, atur label ke 'Remember'. Selanjutnya, salin Checkbox, dan rekatkan instance baru tepat di sebelah yang sebelumnya. Berikan Checkbox baru nama instance dari 'signUp'. Tetapkan properti labelnya ke 'Sign up'. Pilih semua elemen dan ubah menjadi satu klip video besar. Berikan nama instance 'screen1.'



Langkah 6: Membuat Panel Ruang

Di sebelah kanan movieclip 'screen1', gambarkan kotak teks statis, dan berikan nilai 'Rooms online'. Di bawah field teks, seret komponen List baru ke atas stage untuk memuat ruang. Berikan nama instance 'rList'. Atur lebarnya menjadi 200 dan tingginya menjadi 189. Selanjutnya buat field teks statis lain di bawah komponen List. Atur untuk menyatakan 'Room'. Di bawah field teks itu, buat field teks input baru. Beri nama instance 'tabel', lebar 200 dan tinggi 17. Atur ukuran font menjadi 12 dan warna menjadi hitam.



Langkah 7: Menyelesaikan Panel Ruang

Seret salinan lain dari tombol movieclip ke atas stage. Berikan nama instance 'button2' dan letakkan di bawah komponen 'rList'. Di panel filter, terapkan pengaturan drop shadow yang sama dengan yang diterapkan pada movieclip 'button1'. Ini akan digunakan untuk memasuki ruangan yang dipilih.

Sekarang, seret salinan komponen Checkbox ke atas stage. Berikan nama instance dari 'createRoom'. Pengguna akan mencentang kotak ini untuk menunjukkan bahwa mereka ingin membuat ruang baru daripada memasukkan yang sudah ada.

Selanjutnya, pilih rectangle tool kembali. Beri warna isian #BA0101 dan tidak ada stroke. Dengan sudut-sudut membulat yg masih ditetapkan pada 5, gambarlah persegi panjang dengan lebar 71 piksel dan tinggi 25 piksel. Ubah segi empat menjadi movieclip dan beri nama instance 'out'. Klik dua kali untuk masuk ke mode edit dari movieclip 'out' baru. Buat layer kedua di atas. Pilih tool teks dan gambar field teks dinamis. Field teks berikutnya harus berukuran 63 dan 18. Berikan nama instance dari 'dyText'. Keluar dari mode edit dan beri tombol drop shadow filter baru dengan properti yang sama dengan dua tombol hijau lainnya. Tombol merah ini akan digunakan untuk kembali ke layar login.

Pilih semua elemen baru dan ubah menjadi movieclip. Beri movieklip nama instance dari 'screen2'.



Langkah 8: Membuat Panel Ruang Obrolan

Di sebelah kanan movieclip 'screen2', buat field teks statis baru yang bertuliskan 'Current chat'. Di bawah field teks, seret keluar salinan komponen TextArea. Beri lebar 200, tinggi 123 dan nama instance 'cList'.

Selanjutnya, tarik keluar salinan komponen List lainnya dan letakkan di bawah TextArea baru. Berikan komponen List baru suatu nama instance dari 'uList'. Ini akan menyimpan daftar pengguna yang saat ini ada di ruang obrolan.

Buat field teks statis lain di bawah komponen 'uList' yang bertuliskan 'Komentar'. Sekarang, buat field teks input di bawah field teks 'Comment'. Beri nama instance 'comm', lebar 200, tinggi 17, ukuran font 12 dan warna hitam. Seret salinan lain dari tombol hijau ke atas stage. Beri nama instance 'tombol3'. Terakhir, seret salinan tombol merah ke atas stage dan berikan nama instance 'back'. Pilih semua elemen baru dan konversikan, sebagai grup, ke moveclip dengan nama instance 'screen3'.



Langkah 9: Membuat Panel Error

Ini akan meluncur setiap kali ada masalah (misalnya, jika pengguna memasukkan password yang salah).

Di atas stage, buat layer baru. Klik dua kali pada movieclip 'latar belakang' untuk masuk ke mode edit. Pilih bentuk latar belakang dan salin. Menavigasi kembali ke atas stage, dan, pada layer baru, tempelkan bentuk baru di sebelah kiri movieclip 'screen1'. Berikan bentuk warna hitam dan alfa 50%. Ubah bentuk menjadi movieclip dan berikan nama instance dari 'errorPage'. Klik dua kali pada movieclip 'errorPage' untuk mengedit.

Di dalam movieclip, buat layer baru. Pilih tool teks dan seret field teks dinamis baru. Berikan lebar 120, tinggi 26, ukuran font 20, warna putih dan font tebal. Sejajarkan field teks ke pusat vertikal dan horizontal dari bentuk latar belakang.



Langkah 10: Menyelesaikan UI

Buat layer baru di atas stage untuk tombol keluar. Karena kita selalu menginginkan tombol itu di atas segalanya, pindahkan layer baru ke atas tumpukan. Pilih tool teks, dan buat 'X'. Konversikan ke movieclip dengan nama instance 'closer'. Klik dua kali di atasnya.

Buat layer baru di dalam movieklip 'closer'. Tempatkan layer baru di bawah layer dengan field teks 'X'. Gambarlah persegi dengan lebar 16 piksel dan tinggi 16 piksel. Beri kuadrat warna apa saja dan alfa 0. Berikan movieclip 'closer' filter drop shadow baru dengan nilai blur 2, kekuatan 66%, kualitas tinggi, sudut 90 dan jarak 1. Pindahkan lebih dekat ke sudut kanan atas movieclip latar belakang.



Kode Aplikasi Dasar

Tujuh langkah selanjutnya berhubungan dengan pengaturan aplikasi klien, sebelum kita sampai ke PHP pada sisi server.


Langkah 11: Memulai Kode

Buka file actionscript kosong yang kita buat. Ini kerangka untuk class dokumen yang akan kita gunakan.


Langkah 12: Impor

Berikut ini semua impor yang akan kita gunakan untuk proyek ini. Saya akan menggunakan class Tweener yang dapat ditemukan di sini


Langkah 13: Variabel Global

Di sini kita mendefinisikan variabel global kita. Kita harus melacak pengguna, ruang tempat pengguna berada, dan postingan terbaru di ruang obrolan. Kita juga menempatkan lokasi file PHP yang paling banyak digunakan ke beberapa konstanta.


Langkah 14: Aksi INVOKE

Hal pertama yang kami lakukan adalah mendengarkan aksi INVOKE. Setiap kali aplikasi dimulai, itu akan memunculkan aksi INVOKE. Ketika benar-benar menyala, kita akan memeriksa EncryptedLocalStore untuk kredensial login (pada langkah berikutnya).


Langkah 15: Memeriksa EncryptedLocalStore

Ketika aksi INVOKE diluncurkan, EncryptedLocalStore akan memeriksa objek yang disebut 'creds' (kependekan dari 'credentials'). Jika menemukan objek itu, itu akan melewati kredensial masuk ke field teks yang sesuai. Setelah itu, kita memanggil fungsi init.


Langkah 16: Fungsi init

Di sini kita menetapkan beberapa properti dan menambahkan beberapa listener aksi. Kita juga membuat mask secara dinamis untuk cuplikan movieclip kita. Kita juga membuat Timer baru sehingga kita dapat memeriksa database setiap tiga detik untuk komentar baru, pengguna baru atau ruang baru. Kita juga mendengarkan kapan pengguna diam dan kapan pengguna kembali, menggunakan NativeApplication.


Langkah 17: Membuat Mask Dinamis

Karena kita menggunakan komponen dan berbagai jenis field teks, kita harus secara dinamis membuat mask untuk layar movieclip. Kita membuat persegi panjang bundar yang ukurannya sama dengan movieclip 'latar belakang'. Kita memindahkan persegi panjang ke atas daftar tampilan dan mengembalikan objek Sprite.


Kode Pada Sisi Server

Selanjutnya kita akan beralih ke back end: PHP dan MySQL di servermu.


Langkah 18: Menyiapkan MySQL

Langkah pertama adalah membuat database. Saya menggunakan 'phpmyadmin' untuk melakukan semua pengaturan database dan tabel saya. Login ke akunmu. Di area 'Create new database', masukkan 'chatroom' untuk nama database dan klik 'Create'.


Ketika database berhasil dibuat, kita perluda menambahkan tabel yang melacak semua pengguna kita. Pada 'Create new table on database chatroom', beri nama tabel 'chat_room_users', dan di bagian 'Number of fields', beri nilai 4 dan klik 'Go'.


Setelah mengklik tombol 'Go', kamu harus mengisi detail kolom. Kita perlu menyimpan ID, username, dan password untuk setiap pengguna, serta flag untuk menyatakan apakah mereka sedang online.

Atur nama kolom pertama menjadi 'id', set tipenya menjadi 'INT', auto-increment, dan sebagai primary key. Kolom nama harus dinamai dengan 'user'. Tipenya harus 'VARCHAR' dengan 'Length/Value' 40. Kolom ketiga harus dinamai dengan 'pass'. Tipenya harus 'VARCHAR' dengan 'Length/Value' 40. Kolom terakhir harus disebut 'on' dengan tipe 'VARCHAR', dan 'Length/Value' 2.


Jika kamu menggunakan sesuatu selain 'phpmyadmin', berikut adalah kode MySQL untuk mengatur database-nya.


Langkah 19: Beralih ke PHP

Pertama, kita perlu mengatur akses database kita. Buat dokumen PHP baru, rekatkan kode berikut, ganti kredensial login dengan milikmu sendiri, dan simpan ke server web-mu sebagai 'chat_require.php'.


Langkah 20: Menampilkan Pengguna yang Online

Di sinilah kita akan menunjukkan kepada pengunjung yang sedang online. Kami akan perlu menggunakan informasi login database kita. Selanjutnya, buat file PHP baru dan simpan ke server web-mu sebagai 'user.php'. Kemudian kita akan memilih semua pengguna dari tabel 'chat_room_users' di database kita. PHP akan mengulang XML untuk Flash agar dibaca.

XML akan terlihat seperti ini:

Atau, jika tidak ada yang online, seperti ini:


Langkah 21: Masuk Pengguna

Selanjutnya kita akan membuat logika login. Buat file PHP baru, dan simpan ke servermu sebagai 'logon.php'. Kita perlu meminta kredensial database kita. Selanjutnya kita periksa untuk melihat apakah variabel user, pass, dan log telah diset. Jika mereka telah diterima dari Flash, kita membersihkan variabel, dan memeriksa database untuk pengguna. Kita memeriksa untuk melihat apakah username sudah ada di database. Kita juga ingin melihat apakah pengguna mencoba membuat username baru. Ketika logika selesai, kita mengirim kembali nilai numerik untuk Flash agar diuraikan.


Langkah 22: Memilih Ruang

Sekarang setelah pengguna masuk, kita akan memberi mereka akses ke ruang obrolan. Buat file PHP baru, simpan ke server we-mu sebagai 'rooms.php'. Kita tentu saja memerlukan kredensial database kita. Kemudian kita menampilkan semua tabel yang telah dibuat pada database. Satu-satunya tabel yang kita sembunyikan adalah tabel pengguna kita. Kita mengambil hasilnya dan menyuarakan beberapa XML untuk Flash.

Pertama kali aplikasi digunakan tidak akan ada tabel dalam database selain dari tabel pengguna, karena tidak ada ruang yang akan dibuat. Kita akan menyelesaikan ini di langkah berikutnya.


Langkah 23: Membuat Ruang

Pengguna juga memiliki opsi untuk membuat ruang. Pertama, buat file PHP baru, dan simpan ke servemu sebagai 'create.php'. Kita perlu membersihkan variabel kita. Selanjutnya, kita melakukan query ke database untuk melihat apakah pengguna mencoba membuat ruang yang sudah ada. Jika tidak, kita membuat tabel baru (bukan baris baru di tabel yang ada). Sekali lagi, kita mengirim integer kembali ke Flash.


Langkah 24: Mendapatkan Komentar Terbaru Pengguna

Saat pengguna masuk, kita tidak ingin menunjukkan kepada mereka seluruh riwayat obrolan. Karena setiap kali pengguna memasuki ruang mereka secara otomatis akan mengumumkan kehadiran mereka, yang menghasilkan entri baru ke dalam tabel database. Kita perlu menemukan entri terbaru pengguna sebagai titik awal bagi mereka untuk mulai menerima obrolan. Kami akan menggunakan fungsi MySQL 'MAX' untuk menemukannya dan mengirimkannya kembali ke Flash. Salin kode di bawah ini dan simpan ke server we-mu sebagai 'enter.php.'


Langkah 25: Posting Komentar

Akhirnya, kita berada di titik di mana pengguna dapat mulai mengobrol. Kita menggunakan halaman ini untuk memeriksa apakah pengguna telah mengirimkan komentar. Jika mereka mengatakan sesuatu, kita taruh di meja kita. Kita juga menggunakan file ini untuk menyuarakan obrolan sejak pengguna memasuki ruangan. Halaman ini juga menunjukkan pengguna mana yang saat ini ada di dalam ruangan.


Menghubungkan Klien ke Back End

Sekarang saatnya untuk membuat ruang obrolan terhubung ke server sehingga dapat benar-benar interaktif.


Langkah 26: Kembali ke Flash

Saat pengguna pertama kali masuk ke area obrolan, mereka akan mengklik movieclip 'tombol1'. Ketika tombol itu diklik, itu akan memanggil fungsi 'logOn'. Semua fungsi yang dilakukan adalah memanggil fungsi 'logger'. Fungsi 'logger' akan melakukan pengecekan sederhana untuk melihat apakah field yang diperlukan dapat diisi. Juga, ini akan memuat file 'logon.php' .


Langkah 27: Login Pengguna

Ketika pengguna mencoba login, kita mengirim kredensial ke database untuk memeriksa apakah mereka memiliki akses. Kita menggunakan angka yang dikembalikan PHP untuk melakukan pengecekan. Jika nomor yang dikembalikan adalah 1 atau 2, maka pengguna masuk. Jika nomor yang berbeda dikembalikan, kita menggunakan movieclip 'errorPage' untuk menanganinya. Fungsi ini juga merupakan fungsi terakhir yang kita panggil saat pengguna menutup aplikasi. Setelah kita memberi tahu basis data bahwa pengguna meninggalkan area obrolan, aplikasi akan ditutup. Fungsi ini juga mengisi daftar ruang di 'screen2'.


Langkah 28: Memuat Ruang yang Tersedia

Fungsi 'popRList' menangani xml yang dikembalikan dari file PHP. Jika pengguna melihat ruangan yang sudah dibuat, mereka cukup mengklik daftar dan field teks 'room' akan diisi dengan pilihan mereka. Pengguna juga dapat logout di sini jika mereka ingin masuk sebagai pengguna yang berbeda.


Langkah 29: Keluar

Jika pengguna memutuskan bahwa mereka ingin masuk dengan nama pengguna yang berbeda, mereka dapat mengklik tombol 'out' di 'screen2'. Ini akan memanggil fungsi 'logger' kembali kecuali akan meneruskan nilai nol ke database. Ketika nol diteruskan, pengguna keluar, dan kita kembali ke 'screen1.'


Langkah 30: Memasuki Ruang

Ketika pengguna memutuskan ruang yang ingin mereka masuki, fungsi 'room' dipanggil. Jika pengguna mencoba membuat ruang baru, kita melakukan beberapa pemeriksaan sederhana untuk memastikan field teks diisi. Kita juga mengganti spasi apa pun dengan garis bawah.


Langkah 31: Menangani Respon Kamar

Ketika Flash mendapat respons dari PHP, kita menggunakan pernyataan switch untuk menentukan logika. Jika pengguna berhasil memasuki ruangan, kita menambahkan beberapa listener aksi, dan kita memuat 'file enter.php' .


Langkah 32: Memasuki Ruang

Ketika pengguna telah memasuki ruangan, kita harus mendapatkan postingan terbaru mereka untuk menentukan berapa banyak percakapan yang akan ditampilkan. Kita menggunakan variabel '_id' untuk melacaknya. Ketika variabel diatur, kita memanggil fungsi 'callComments'.


Langkah 33: Mendapatkan Komentar Dari Database

Dengan fungsi ini, kita akan memuat file PHP yang akan berisi XML dari obrolan. Ketika kita memanggil fungsi ini, kita mengatakan apakah pengguna masuk atau keluar. Juga, kita memberikannya komentar pengguna. Jika pengguna belum mengatakan apa-apa, kita hanya memuat XML dan tidak memasukkan apa pun ke dalam database.


Langkah 34: Menampilkan Komentar

Dalam XML komentar, kita memiliki daftar semua komentar oleh semua pengguna karena pengguna saat ini telah memasuki ruang. Kita juga mengisi daftar pengguna dengan pengguna yang saat ini ada di ruangan itu.


Langkah 35: Mengirim Komentar ke Database

Ketika pengguna telah mengisi komentar mereka, mereka dapat mengklik movieclip 'button3'. Ketika itu terjadi, kita memanggil fungsi 'callComments' dan meneruskan pesan pengguna. Namun, kita juga menggunakan fungsi 'commentClick' ketika pengguna ingin meninggalkan ruang. Kita memanggil fungsi 'callComments' tetapi meneruskannya dengan string yang menyatakan bahwa pengguna juga telah meninggalkan nol.


Langkah 36: Melacak Pengguna

Dengan dua fungsi ini kita dapat melacak file PHP mana yang harus kita muat. Variabel 'tracker' akan melacak di mana pengguna berada dalam aplikasi. Setiap tiga detik, penghitung waktu akan menyala dan memanggil fungsi 'loadSomething' yang tergantung pada nilai 'tracker'.


Langkah 37: Meninggalkan Aplikasi

Ketika pengguna telah memutuskan untuk meninggalkan aplikasi, kita memanggil fungsi 'onExiting'. Ketika movieclip 'closer' diklik, kita mengirimkan aksi 'EXITING' baru. Ketika fungsi 'onExiting' dipanggil, kita memberi tahu aksi tersebut untuk 'preventDefault'. Artinya, aksi tersebut tidak akan benar-benar menyebabkan tindakan default untuk menutup aplikasi. Kita ingin melakukan beberapa hal basis data sebelum pengguna benar-benar dapat meninggalkan aplikasi.


Langkah 38: Fungsi Lainnya

Berikut adalah beberapa fungsi yang digunakan di seluruh aplikasi. Kami menangani tweening 'errorPage', serta memindahkan 'nativeWindow'. Juga, jika pengguna ingin menekan 'return' daripada mengklik movieclip 'button3', fungsi 'onKeyUp' akan mengatasinya.


Menyelesaikan

Kita hampir selesai!


Langkah 39: Mengemas Aplikasi

Kita akhirnya siap untuk mengemas aplikasi kita untuk didistribusikan. Buka File > Commands > AIR - Application and Installer Settings.


Di bawah 'Windows style', pilih 'Custom Chrome (transparent).'


Klik tombol 'Public AIR File'.



Langkah 40: Mengemas Aplikasi

Ketika tombol 'Public AIR File' diklik, permintaan untuk menambahkan Tanda Tangan Digital akan muncul. Kamu dapat memilih file yang sudah kamu buat. Jika belum, klik tombol 'Buat'.


Isi informasi dan klik 'OK'. Setelah file dibuat, kamu memasukkan password dan klik 'OK'.


Setelah file dibuat, kamu akan mendapatkan prompt yang mengatakan 'file AIR telah dibuat'. Aplikasi ruang obrolanmu sekarang siap untuk didistribusikan.


Kesimpulan

Saya harap kamu menikmati membaca tutorial ini. Jangan lupa berlangganan feed tuts+ untuk mempelajari semua hal keren yang bisa dilakukan PHP, MySQL dan Flash.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.