MEMBUAT PROGRAM WEB-CHAT DENGAN SCRIPT PHP

Bagi kalangan muda dan pelajar yang mengenal baik dunia internet, tentunya sudah tidak asing lagi dengan istilah chatting. Dengan media chatting ini kita dapat berkomunikasi secara real timedengan orang lain dari segala penjuru dunia, melalui tulisan. Chatting ada yang dibuat dari bahasa pemogramaan tingkat tinggi, semacam C++, Java, VB atau delphi, dan ada pula yang dibuat dari bahasa pemograman berupa script, seperti perl, ASP dan PHP. Yang terakhir ini dikenal dengan sebutan Web Chat, karna membutuhkan halaman website sebagai tempatnya menampilkan diri. Membuat website tidaklah sulit, bahkan penulis banyak diantara kita yang telah atau pernah memilikinya. Mengingat demikian populernya chatting, maka alangkah eloknya apabila website pribadi kita memiliki fitur chat didalamnya. dan sesuai untuk keperluan ini tentunya adalah web-chat, dengan alasan kebanyakan website pribadi ditempatkan pada server sewaan atau free-hosting- yang tidak menyediakan port khusus bagi pemiliknya website.
Mengingat terbatasnya ruang, program web-chat yangdijelaskan disini memiliki fasilitas yang minimal. meskipun, diharapkan pembca dapat mengembangkan sendiri program ini. tampilan web-chat yang dibuat tampak pada : 
                                                                               GAMBAT 1

Pemilihan Software 

Salah satu bahasa pemrograman Script yang populer akhir-akhir ini adalah PHP. PHP sifatnya freeware, dapat berjalan pada berbagai platform (Windows, Linux, Unix, Mac dsb), dan dapat dijalankan pada berbagai Web Server (seperti Apache, IIS, PWS, Xitami, OmniHTTPd dsb). Keunggulan-keunggulan diatas sudah cukup menjadi alasan mengapa kita harus memilih PHP untuk membuat Web-Chat ini. Tetapi bagi anda yg sudah cukup familiar dengan ASP, program yg dibuat ini tetap dapat diikuti, karena kemudahan alur programnya. 
PHP adalah bahasa pemrograman Script yang bersifat Server-side, artinya kode-kode program dijalankan di server dan hasilnya dikirimkan ke browser klien. Karena bersifat server-side, untuk menjalankan kode-kode program dibutuhkan web-server. Ada banyak software web-server sekarang ini, misalnya : Apache, IIS, Xitami dan OmniHTTPd. Sebenarnya tidak menjadi masalah web-server apa yang dipakai, karena nantinya program Web-Chat kita tempatkan pada web-server ISP, asalkan web-server tersebut dapat menjalankan Script PHP. Tetapi karena kita harus mencoba terlebih dulu kode-kode program kita, maka terpaksa kita harus menginstall web-server di komputer kita sendiri. 
Pada artikel ini, penulis memilih Apache sebagai obyek pembahasan web-server karena kemudahan instalasi dan pengoperasiannya, terkenal kuat, setupnya yang mudah dan tidak lupa sifatnya yang freeware, serta yang terpenting dapat dijalankan di berbagai platform termasuk Windows. 

Pembahasan Program Web-Chat 

Kita sekarang menuju ke pembahasan utama program kita, Web-Chat. 
Web-chat ini pada dasarnya mudah sekali pembuatannya kalau kita melihat prinsip dan alur kerja programnya. Prinsip program Web-chat ini cuma satu, yaitu terdapat 1 buah file yg dapat ditulisi oleh setiap peserta Chatting, dimana file tersebut kemudian ditampilkan ke setiap peserta dengan metode Auto-refresh. 
Ada 3 buah file yg "harus" ada di program Web-chat ini, yaitu inputchat.html, chat.php, dan messages.html. File inputchat.html sebagai tampilan utama Web-chat, file chat.php sebagai file pemroses, dan file messages.html yg merupakan file kosong pada awalnya adalah file hasil baca-tulis pesan-pesan. Semua file tersebut anda letakkan pada doc_root web server yaitu di c:/Program Files/Apache Group/Apache2/htdocs/ 
Pertama kali yg perlu dibahas adalah tampilan utama Web-chat, lihat listing program inputchat.html dibawah ini. 

<html>
<head>
<title>Web Chat</title>
</head>
<body bgcolor="#87ceeb">
<center><table bgcolor="#00bfff" width=70% cellspacing=1 cellpadding=1 border=0><form action="chat.php" method="post" target="layar">
<caption><b><font face=garamond>CHAT-ROOM</font></b></caption>
<tr><td valign=top align=center colspan=2>[ gunakan nama yang belum digunakan orang lain, dan pilih warna yang anda sukai ]</td></tr>
<tr><td bgcolor="#87ceeb" colspan="2">
<iframe src="messages.html" width=530 height=175 scrolling=no name="layar"></iframe>
</td></tr>
<tr><td colspan="2"></td></tr>
<tr><td align=right width=20%><font face=tahoma size=2><b>Nama : </b></font></td><td><input type="text" name="name" size="20">
<font face=tahoma size=2><b>Warna teks :</b></font><select name=color>
<option value="blue">biru
<option value="black">hitam
<option value="brown">coklat
<option value="lavender">abu-abu
<option value="green">hijau
<option value="ivory">putih gading
<option value="pink">merah muda
<option value="red">merah
<option value="skyblue">biru langit
<option value="violet">ungu
</select></td></tr>
<tr><td valign=top align=right width=20%><font face=tahoma size=2><b>Pesan : </b></font></td><td><input type="text" name="message" size=50><input type="submit" value="Kirim"></td></tr>
<tr><td align=center colspan=2></td></tr>
</form></table></center>
</body>
</html>

Yang harus diperhatikan dari listing diatas adalah tag-tag <form action=�. target=�.>, <iframe src=�. name=�.> dan <input type�>. Yang lain sekedar cara kita menampilkan web-chat ini, yang bisa anda ubah tergantung selera. 

<form action="chat.php" method="post" target="layar"> adalah cara kita untuk mengirimkan variabel-variabel ke file tertentu untuk diproses. Dalam hal ini variabel-variabel yang ada di "inputchat.html" dikirimkan ke "chat.php" untuk diproses, kemudian hasilnya dikirimkan ke target berupa frame bernama "layar". 

Tag <iframe src="messages.html" ��. name="layar"> digunakan agar keseluruhan tampilan tidak terganggu. Iframe adalah sejenis dengan frame standar cuma bedanya pada bentuk tampilannya yang "lebih enak". Iframe ini berisi file "messages.html" yg merupakan pesan-pesan chatting dari semua peserta. Karena file "messages.html" ini ditampilkan secara auto-refresh maka perlu dibuat Iframe ini, agar tampilan "inputchat.html" tetap baik. 

Sedangkan tag-tag <input type=text name=�> adalah tag untuk memuat variabel yg akan dikirimkan ke "chat.php". Ada 3 variabel yg dikirimkan, yakni: name, color dan message. Tag <input type=submit> adalah tombol untuk mengirimkan 3 variabel tersebut ke file "chat.php" untuk diproses. 
Sekarang kita menuju ke file utama Web-chat, yaitu "chat.php". Dalam file ini kita akan menuliskan pesan-pesan dari setiap peserta Chatting ke sebuah file, yakni "messages.html", melalui variabel-variabel yg dikirimkan oleh "inputchat.html". 
Baris-baris awal pada chat.php seperti berikut ini, 

$header = "<html><head><meta http-equiv=\"refresh\" content=\"3\">". 
"<meta name=\"robots\" content=\"noindex\"></head>". 
"<body text=\"blue\" bgcolor=\"#ffffaa\">\n"; 
$footer = "<p align=\"right\"><font color=\"#000000\" size=-1> programmer : syamsul@email.com</font></p></body></html>"; 

Pada awal program, kita mendefinisikan header dan footer file HTML yg akan dituliskan ke "messages.html" sehingga file ini "memang" file HTML, sebelum file ini diisikan dengan pesan-pesan chatting. Pada header file kita juga menuliskan meta-tag yg menyebabkan file selalu auto-refresh dalam selang waktu tertentu. Tag tersebut adalah <meta http-equiv="refresh" content="3"> yg berarti melakukan refresh setiap 3 detik. 
Berikutnya kita harus memberikan nama file yg akan dibaca dan ditulisi, sekaligus menjadikan tiap baris isinya menjadi elemen array. 

$message_array = file("messages.html"); 

Selanjutnya kita harus menentukan berapa baris pesan-pesan yang akan ditampilkan. Dalam hal ini kita membuat isi file "messages.html" maksimal 12 baris dengan 10 baris diantaranya adalah pesan-pesan chatting. Awal dan akhir baris adalah header dan footer file. 

for ($counter = 1; $counter < 10; $counter++) { 
$old_messages .= $message_array[$counter]; 

Looping diatas menjadikan baris-baris ke-2 sampai ke-11 pada isi file "messages.html" diisikan kembali sebagai variabel $old_messages. 

Kemudian karena kita akan menampilkan nama, pesan chatting dan waktu kirim pesan pada layar Chatting, maka kita harus mendefinisikannya sebagai pesan baru berupa variabel $new_message, 

$time = date("H:i"); 
$new_message = "<font color=\"blue\"><b><i>$name</i></b> 
($time)</font> : $message</font><br>\n"; 

Variabel $name, $color dan $message diatas berasal dari "inputchat.html". 

Selanjutnya, setelah semua variabel sudah didefinisikan, kita tinggal melakukan pekerjaan tulis-menulis ke file � 

$open_file = fopen("messages.html", "w"); 
fputs($open_file, $header); 
fputs($open_file, stripslashes($new_message)); 
fputs($open_file, $old_messages); 
fputs($open_file, $footer); 
fclose($open_file); 

Baris-baris kode program diatas untuk membuka file dengan nama "messages.html" dalam mode "write". Kemudian kita tuliskan pesan-pesan ke dalamnya. Urutan penulisan adalah header file HTML dulu, lalu pesan yang baru masuk, kemudian pesan-pesan yang lama, terakhir footer file. Fungsi stripslashes() digunakan untuk menghilangkan tanda "\" yang ada pada program PHP sebelum ditampilkan sebagai file HTML. 

Selesai sudah pekerjaan tulis menulis. Selanjutnya tampilkan isinya. 

header ("Location: http://localhost/messages.html"); 

Hati-hati dengan perintah header() diatas, karena ada kesalahan sedikit akan menyebabkan error. Pemakaian fungsi header() mensyaratkan tidak boleh ada apapun - entah itu spasi, baris baru, karakter apapun juga - yang berada sebelum tag <? Dan sesudah tag ?> 

Akhirnya program Web-chat tuntas kita buat, dengan fasilitas yg minimal. 
Anda bisa mencoba program diatas, dengan cara membuka Web-chat pada 2 jendela browser dengan alamat http://localhost/inputchat.html. Kemudian anda bisa saling mengirimkan pesan secara bergantian. 

Kalau anda ingin mengembangkan program ini, tidaklah sulit. Misalnya ditambahkan fasilitas-fasilitas seperti penggunaan password untuk login, pemakaian session, penambahan kamar, enkripsi pesan dsb. Yang dibutuhkan adalah kemampuan anda dalam menguasai bahasa script PHP, dan lebih baik lagi kalau menguasai juga database SQL server (misalnya MySQL), sehingga anda dapat melengkapi dengan semua fasilitas-fasilitas Chatting yg sudah lebih dulu populer. 

Selanjutnya, selamat menikmati Web-chat pribadi� 




6 comments:

Anonymous at: March 25, 2013 at 4:19 AM said...

gan yang mulai dari $message_array = file("messages.html"); sudah masuk di message.html apa masih di chat.php....tlng bantuanya gan

{ Rinoto Cahyo } at: May 24, 2013 at 8:10 AM said...

boleh minta scriptnya lewat email ?
soalnya di atas tag for masih belum tertutup...

Anonymous at: June 10, 2013 at 12:48 AM said...

gan... minta dong scripnya lewat email!!???

{ hartaji ramzani } at: June 14, 2013 at 8:58 PM said...

minta dong scriptnya lewat emaiku bisa gak namanya hartajiramzani4@gmail.com

{ IMAM SOLICHI } at: June 16, 2013 at 6:37 PM said...

Gan,tolong minta scriptnya lewat email untuk ane pelajarin
firman.firman.allah@gmail.com
thx

{ Program Attack } at: April 10, 2014 at 3:42 AM said...

Coba yang ini http://goo.gl/DusrgL

Post a Comment

 

belajar bersama © 2011 Design by Nando | Sponsored by belajar bersama.