Rosihan Ari's Blog

Membuat Buku Tamu dengan Emoticons

October 11th, 2008 | by rosihanari |  Cetak Artikel

Tentu Anda sudah mengetahui tentang emoticons. Emoticons adalah ikon atau simbol teks yang dapat mengekspresikan emosi manusia. Sebagai contoh misalnya simbol bermakna seseorang sedang tersenyum, mempunyai arti sedang sedih, dan sebagainya. Emoticons ini pada awalnya muncul pada chat, namun sekarang banyak diadopsi ke aplikasi web, seperti forum diskusi, buku tamu atau bahkan di CMS misalnya WordPress. Dalam aplikasi web tersebut, apabila seseorang menuliskan emoticons (dalam bentuk teks) maka secara otomatis akan tampil suatu image yang menggambarkan emosi orang.

Nah… pada tutorial ini hanya akan dibahas bagaimana membuat buku tamu dengan fasilitas emoticons seperti yang dijelaskan di atas.

Ide dasar untuk mengubah suatu simbol teks emoticons ke dalam bentuk image untuk buku tamu ini adalah dengan dengan melakukan replace substring dari simbol teks emoticons menjadi tag image untuk HTML. Sebagai contoh misalkan ada suatu string komentar dalam buku tamu sbb:

Hallo apa kabar Senang mengunjungi web Anda!

Implementasi dari ide dasar tersebut adalah, mengganti dengan tag . Dalam hal ini path/image adalah path menuju file image yang terkait dengan emosi tersenyum. Dengan kata lain, kita harus menyiapkan terlebih dahulu emoticons dalam bentuk image yang diletakkan dalam satu folder.

Lantas… dari mana kita memperoleh file-file emoticons berbentuk image tersebut? Gampang.. bila komputer Anda sudah terdapat Yahoo Messenger (YM), tinggal kopi saja file image emoticons tersebut dari C:\Program Files\Yahoo!\Messenger\Media\Smileys.

Trus… bagaimana mengkaitkan antara file emoticons dari YM tersebut dengan simbol teksnya? Ini juga gampang… di dalam folder di atas terdapat file emoticons.xml. Bukalah file tersebut… File XML ini menggambarkan hubungan antara emoticons berupa teks dengan file image nya. Misalnya:

<emoticon fname="1" id="1" sendable="1" title="smile">
  <shortcuts>
     <shortcut>:)</shortcut>
     <shortcut>:-)</shortcut>
     <shortcut>(-:</shortcut>
     <shortcut>(:)</shortcut>
     <shortcut network="2">:)</shortcut>
  </shortcuts>
  <file>
     <type checksum="esq2lwBbQt92U0SFK7klQw--" extension="gif" height="18" size="1197" width="18"/>
     <type checksum="VSTlhO3g.rDoE_IJlnHqBg--" extension="swf" size="1158" width="20"/>
     <type extension="bmp"/>
  </file>
</emoticon>

Maksud dari blok di atas adalah bahwa emosi tersenyum (title=”smile”) dapat disimbolkan dengan , , (-: atau (:). Trus.. nama file image yang terkait dengan simbol teks ini adalah “1″, perhatikan atribut fname=”1″ dan tag . Dalam hal ini, dalam folder Smiley YM tersedia image dalam bentuk BMP dan GIF. Silakan pilih salah satu.

OK… begitulah cara mendapatkan emoticons berbentuk teks dan gambar yang sesuai. Selanjutnya kita kembali lagi ke masalah awal. Kita akan mulai membuat buku tamu dengan fasilitas emoticons.

Langkah pertama, kita siapkan dahulu tabel database untuk menyimpan data komentar buku tamu yang masuk

CREATE TABLE guestbook (
  id int(11) auto_increment,
  nama varchar(20),
  email varchar(20),
  url varchar(30),
  komentar text,
  tanggal date,
  PRIMARY KEY(id)
)

Langkah kedua, kita buat form isian buku tamunya

bukutamu.php

<h1>Buku Tamu</h1>

<form method="post" action="simpan.php">
<table>
<tr><td>Nama Pengunjung</td><td>:</td><td><input type="text" name="nama"></td></tr>
<tr><td>Email</td><td>:</td><td><input type="text" name="email"></td></tr>
<tr><td>URL</td><td>:</td><td><input type="text" name="url" value="http://"></td></tr>
<tr><td>Komentar</td><td>:</td><td><textarea name="komentar"></textarea></td></tr>
<tr></td><td></td><td><td><input type="submit" name="submit" value="Submit"> <input type="reset" name="reset" value="Reset"></td></tr>
</table>

</form>

Langkah ketiga, kita buat script PHP untuk menyimpan data buku tamu yang diisikan lewat form di atas

simpan.php

<?php

mysql_connect("localhost","root","root");
mysql_select_db("data");

$nama = $_POST['nama'];
$email = $_POST['email'];
$url = $_POST['url'];
$komentar = $_POST['komentar'];
$tanggal = date("Y-m-d");

$kueri = "INSERT INTO guestbook(nama, email, url, komentar, tanggal)
          VALUES('$nama', '$email', '$url', '$komentar', '$tanggal')";
$hasil = mysql_query($kueri);

if ($hasil) echo "Pengisian buku tamu sukses";
else echo "Pengisian buku tamu gagal";

?>

Apabila kita lihat script di atas, maka pada dasarnya tidak ada yang istimewa karena hal ini merupakan proses insert data biasa ke tabel database. Dalam hal ini, komentar yang disimpan ke dalam tabel database adalah data apa adanya seperti yang diisikan ke dalam form (emoticon berbentuk teks belum di replace dengan tag )

Nah… langkah terakhir, kita buat script untuk menampilkan isi buku tamu. Pada script ini nanti, barulah emoticons teks diubah ke tag . Bagaimana cara menggantinya? mudah saja bro… tinggal gunakan function str_replace().

isi.php

<?php

mysql_connect("localhost","root","root");
mysql_select_db("data");

// query sql untuk menampilkan record disort berdasarkan id scr descending

$query = "SELECT * FROM guestbook ORDER BY id DESC";
$hasil = mysql_query($query);
while($data = mysql_fetch_array($hasil))
{
$komentar = $data['komentar'];

// mengubah emoticons teks ke bentuk image dengan menggunakan tag <img>

$komentar = str_replace(":-)", "<img src=\"smiley/1.gif\">", $komentar);
$komentar = str_replace(":-(", "<img src=\"smiley/2.gif\">", $komentar);
$komentar = str_replace(";-)", "<img src=\"smiley/3.gif\">", $komentar);
$komentar = str_replace(";-D", "<img src=\"smiley/4.gif\">", $komentar);
$komentar = str_replace(";;-)", "<img src=\"smiley/5.gif\">", $komentar);
$komentar = str_replace("<:D>", "<img src=\"smiley/6.gif\">", $komentar);

echo "<table>";
echo "<tr><td>Nama</td><td> :</td><td> ".$data['nama']."</td></tr>";
echo "<tr><td>Email</td><td> : </td><td><a href=mailto:".$data['email'].">".$data['email']."</a></td></tr>";
echo "<tr><td>Tanggal Kirim</td><td> : </td><td>".$data['tanggal']."</td></tr>";
echo "<tr><td>URL</td><td> : </td><td><a href=".$data['url'].">".$data['url']."</a></td></tr>";
echo "<tr><td>Komentar</td><td> : </td><td>".$komentar."</td></tr>";
echo "</table><hr>";
}
?>

Catatan:
Untuk menjalankan script isi.php ini, folder bernama smiley harus sudah ada terlebih dahulu, begitu pula image-imagenya.

Nah… mudah bukan cara membuatnya? Mudah-mudahan ada manfaatnya buat Anda. Anda dapat pula mendownload script yang saya tulis di atas (beserta image smiley nya), berikut ini

Download Script

Tips ini persembahan dari blog.rosihanari.net. So… stay tune terus di blog ini karena akan selalu muncul tips-tips pemrograman menarik buat Anda.

Slot iklan tersedia, pasang iklan di atas