Tentu Anda sudah mengetahui tentang emoticons. Emoticons adalah ikon
atau simbol teks yang dapat mengekspresikan emosi manusia. Sebagai
contoh misalnya simbol 
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!
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.
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:
01.<emoticon fname="1" id="1" sendable="1" title="smile">02. <shortcuts>03. <shortcut>:)</shortcut>04. <shortcut>:-)</shortcut>05. <shortcut>(-:</shortcut>06. <shortcut>(:)</shortcut>07. <shortcut network="2">:)</shortcut>08. </shortcuts>09. <file>10. <type checksum="esq2lwBbQt92U0SFK7klQw--" extension="gif" height="18" size="1197" width="18"/>11. <type checksum="VSTlhO3g.rDoE_IJlnHqBg--" extension="swf" size="1158" width="20"/>12. <type extension="bmp"/>13. </file>14.</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.
,
, (-: 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
01.CREATE TABLE guestbook (02. id int(11) auto_increment,03. nama varchar(20),04. email varchar(20),05. url varchar(30),06. komentar text,07. tanggal date,08. PRIMARY KEY(id)09.)
Langkah kedua, kita buat form isian buku tamunya
bukutamu.php
01.<h1>Buku Tamu</h1>02. 03.<form method="post" action="simpan.php">04.<table>05.<tr><td>Nama Pengunjung</td><td>:</td><td><input type="text" name="nama"></td></tr>06.<tr><td>Email</td><td>:</td><td><input type="text" name="email"></td></tr>07.<tr><td>URL</td><td>:</td><td><input type="text" name="url" value="http://"></td></tr>08.<tr><td>Komentar</td><td>:</td><td><textarea name="komentar"></textarea></td></tr>09.<tr></td><td></td><td><td><input type="submit" name="submit" value="Submit"> <input type="reset" name="reset" value="Reset"></td></tr>10.</table>11. 12.</form>
Langkah ketiga, kita buat script PHP untuk menyimpan data buku tamu yang diisikan lewat form di atas
simpan.php
01.<?php02. 03.mysql_connect("localhost","root","root");04.mysql_select_db("data");05. 06.$nama = $_POST['nama'];07.$email = $_POST['email'];08.$url = $_POST['url'];09.$komentar = $_POST['komentar'];10.$tanggal = date("Y-m-d");11. 12.$kueri = "INSERT INTO guestbook(nama, email, url, komentar, tanggal)13. VALUES('$nama', '$email', '$url', '$komentar', '$tanggal')";14.$hasil = mysql_query($kueri);15. 16.if ($hasil) echo "Pengisian buku tamu sukses";17.else echo "Pengisian buku tamu gagal";18. 19.?>
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
01.<?php02. 03.mysql_connect("localhost","root","root");04.mysql_select_db("data");05. 06.// query sql untuk menampilkan record disort berdasarkan id scr descending07. 08.$query = "SELECT * FROM guestbook ORDER BY id DESC";09.$hasil = mysql_query($query);10.while($data = mysql_fetch_array($hasil))11.{12.$komentar = $data['komentar'];13. 14.// mengubah emoticons teks ke bentuk image dengan menggunakan tag <img>15. 16.$komentar = str_replace(":-)", "<img src=\"smiley/1.gif\">", $komentar);17.$komentar = str_replace(":-(", "<img src=\"smiley/2.gif\">", $komentar);18.$komentar = str_replace(";-)", "<img src=\"smiley/3.gif\">", $komentar);19.$komentar = str_replace(";-D", "<img src=\"smiley/4.gif\">", $komentar);20.$komentar = str_replace(";;-)", "<img src=\"smiley/5.gif\">", $komentar);21.$komentar = str_replace("<:D>", "<img src=\"smiley/6.gif\">", $komentar);22. 23.echo "<table>";24.echo "<tr><td>Nama</td><td> :</td><td> ".$data['nama']."</td></tr>";25.echo "<tr><td>Email</td><td> : </td><td><a href=mailto:".$data['email'].">".$data['email']."</a></td></tr>";26.echo "<tr><td>Tanggal Kirim</td><td> : </td><td>".$data['tanggal']."</td></tr>";27.echo "<tr><td>URL</td><td> : </td><td><a href=".$data['url'].">".$data['url']."</a></td></tr>";28.echo "<tr><td>Komentar</td><td> : </td><td>".$komentar."</td></tr>";29.echo "</table><hr>";31.?>
Catatan:
Untuk menjalankan script isi.php ini, folder bernama smiley harus sudah ada terlebih dahulu, begitu pula image-imagenya.
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
