TUTORIAL

Cara Membuat Mini Chat dengan PHP dan MySQL

シックス , TUTORIAL
0
46863

Apa itu shoutbox itu?

 

Sebuah Shoutbox, saybox, tagboard, atau chatterbox adalah cara interaktif baru bagi pengunjung ke website Anda. Sebuah Shoutbox adalah perpaduan yang sempurna buku tamu, forum dan chatting. Pengunjung dapat meninggalkan Anda pesan, membuat komentar atau ngobrol dengan pengunjung lain.

 

 

1. Database

Pertama kali kita akan membuat database untuk menyimpan komentar dengan MySQL :

 

 

2. Buatlah Strukur File PHP

 

 

 A. koneksi.php

 

Setelah database terbuat langkah selanjutnya adalah membuat file koneksi yang menghubungkan tampilan program dengan database.

<?php
// definisikan koneksi ke database
$server = "localhost";
$username = "root";
$password = "";
$database = "shoutbox";

// Koneksi dan memilih database di server
mysql_connect($server,$username,$password) or die("Koneksi gagal");
mysql_select_db($database) or die("Database tidak bisa dibuka");
?>
 
 
 

B. index.php

 
 

Buatlah file dengan nama index.php yaitu untuk tampilan proyek mini chat yang akan kita buat.

 
<?php include "koneksi.php";?>

<script language="JavaScript" type="text/javascript">
  function addSmiley(textToAdd){
  document.formshout.pesan.value += textToAdd;
  document.formshout.pesan.focus();
}
</script>


<?php
$qshoutbox=mysql_num_rows(mysql_query("select * from shoutbox"));
if ($qshoutbox > 0){
  echo "<img src='shoutbox.jpg' /><br /><br />";
  echo "<iframe src='shoutbox.php' width=230 height=250 border=1 solid></iframe><br /><br />";
  echo "<table class=shout width=20%>
        <form name=formshout action=simpanshoutbox.php method=POST>
        <tr><td>Nama</td><td> : <input class=shout type=text name=nama size=21></td></tr>
        <tr><td>Website</td><td> : <input class=shout type=text name=website size=21></td></tr>
        <tr><td valign=top>Pesan</td><td> : <textarea class=shout name='pesan' style='width: 160px; height: 35px;'></textarea></td></tr>";
?>
        <tr><td colspan=2>
        <a onClick="addSmiley(':-)')"><img src='smiley/1.gif'></a> 
        <a onClick="addSmiley(':-(')"><img src='smiley/2.gif'></a>
        <a onClick="addSmiley(';-)')"><img src='smiley/3.gif'></a>
        <a onClick="addSmiley(';-D')"><img src='smiley/4.gif'></a>
        <a onClick="addSmiley(';;-)')"><img src='smiley/5.gif'></a>
        <a onClick="addSmiley('<:D>')"><img src='smiley/6.gif'></a>
        </td></tr>
<?php
  echo "<tr><td colspan=2><input class=shout type=submit name=submit value=Kirim><input class=shout type=reset name=reset value=Reset></td></tr>
        </form></table><br />";
}
?>
 
 
 
 

 C. shoutbox.php 

 
 

FUngsi dari file ini adalah me replace kode emoticon menjadi gambar.

 
 
<?php
include "koneksi.php";

$shoutbox=mysql_query("SELECT * FROM shoutbox WHERE aktif='Y' ORDER BY id_shoutbox DESC LIMIT 10");
while($d=mysql_fetch_array($shoutbox)){
  $pesan = $d['pesan'];
  $pesan = str_replace(":-)", "<img src="smiley/1.gif">", $pesan);
  $pesan = str_replace(":-(", "<img src="smiley/2.gif">", $pesan);
  $pesan = str_replace(";-)", "<img src="smiley/3.gif">", $pesan);
  $pesan = str_replace(";-D", "<img src="smiley/4.gif">", $pesan);
  $pesan = str_replace(";;-)", "<img src="smiley/5.gif">", $pesan);
  $pesan = str_replace("<:D>", "<img src="smiley/6.gif">", $pesan);

      // Apabila ada link website diisi, tampilkan dalam bentuk link   
     if ($d['website']!=''){
        echo "<span class=shout><b><a href='http://$d[website]' target='_blank'>$d[nama]</a> : </b></span>";  
   }
   else{
        echo "<span class=shout><b>$d[nama] : </b></span>";  
      }

echo "<span class=shout>$pesan</span><br />";
echo "<span class=shoutdate>$d[tanggal]/$d[jam] WIB</span>";
echo "<hr color=#e0cb91 noshade=noshade />";
}
?>
 
 
  

 D. simpanshoutbox.php 

 
 

File ini berfungsi menyimpan komentar dari text box yang diketikkan ke dalam database ketika diklik submit simpan.

 
 
<?php
include "koneksi.php";
include "library.php";

$nama=trim($_POST['nama']);
$pesan=trim($_POST['pesan']);

if (empty($nama)){
  echo "Anda belum mengisikan NAMA<br />
       <a href=javascript:history.go(-1)><b>Ulangi Lagi</b>";
}
elseif (empty($pesan)){
  echo "Anda belum mengisikan PESAN<br />
       <a href=javascript:history.go(-1)><b>Ulangi Lagi</b>";
}
elseif (strlen($_POST['pesan']) > 100) {
  echo "PESAN Anda kepanjangan, dikurangin atau dibagi jadi beberapa bagian.<br />
       <a href=javascript:history.go(-1)><b>Ulangi Lagi</b>";
}
else{
function anti_injection($data){
  $filter = mysql_real_escape_string(stripslashes(strip_tags(htmlspecialchars($data,ENT_QUOTES))));
  return $filter;
}

$nama = anti_injection($_POST['nama']);
$website = anti_injection($_POST['website']);
$pesan = anti_injection($_POST['pesan']);

$kueri = mysql_query("INSERT INTO shoutbox(nama, website, pesan, tanggal, jam)
          VALUES('$nama', '$website', '$pesan', '$tgl_sekarang','$jam_sekarang')");
echo "<meta http-equiv='refresh' content='0; url=index.php'>";
}

?>
 
 

Berikut link download source code, semoga bermanfaat.

 

DOWNLOAD »  

  

0 Comments

×