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:
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> , , (-: 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.)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>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.?>Nah… langkah terakhir, kita buat script untuk menampilkan isi buku tamu. Pada script ini nanti, barulah emoticons teks diubah ke tag
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>";30.}31.?>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.
0 komentar:
Posting Komentar