.:: Cara mudah menambah smiley pada form comment ::.

Dikirim oleh : Po3nX, pada 16-01-2009, kategori : Tips & Trick
"Berhubung banyak request tentang tutorial untuk menambahkan smiley pada shoutbox, ataupun form comment, berikut saya coba kirimkan tutorial tentang bagaimana cara mudah untuk menambahkan smiley pada form comment, buku tamu atau shoutbox.

Seperti tutorial - tutorial saya sebelumnya, saya berusaha memberikan contoh yang simple, dengan harapan tutorial ini dapat mudah dipahami bagi pemula php sekalipun. Dan pada tutorial ini saya sengaja menggunakan smiley Yahoo Messenger, karena kebanyakan orang sudah tidak asing lagi dengan aplikasi chat client yang satu ini. Bahkan mungkin ada yang hapal betul bagaimana menuliskan smiley yang ada pada Yahoo Messenger."

Sebelum melangkah ke tutorial, saya akan gambarkan file list dari script kita nanti sebagai berikut

www.domainanda.com/ysmiley/ <== folder ini berisi images2 smiley Yahoo Messenger
www.domainanda.com/form.php
www.domainanda.com/ysmiley.php
www.domainanda.com/parse_smiley.php


OK kita mulai tutorialnya:
Langkah2nya sebagai berikut:

1. Siapkan File - file pendukung,

file -file pendukungnya yaitu image smiley yang akan kita gunakan, dalam hal ini kita ambil dari file smiley Yahoo Messenger punya.

Tips :
Jika anda telah menginstall Yahoo messenger di komputer anda, anda dapat meng-copy file-file image smiley ini dari folder Messenger anda dengan lokasi sbb:
c:\Program Files\Yahoo!\Messenger\Media\Smileys

copy semua file yang berextension .gif (nama filenya 1.gif - 115.gif) ke folder ysmiley

2. Siapkan Script php

Script yang akan kita buat ada tiga yaitu :

form.php :

  1.  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  3.  "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <title>Form Example</title>
  7. <script language="javascript" type="text/javascript">
  8. function show_hide(msg_id) {
  9.         elm=document.getElementById(msg_id);
  10.         elm.style.display = elm.style.display == 'none' ? 'block' : 'none';
  11. }
  12. function insertText(elname, what) {
  13.         if (document.forms['inputform'].elements[elname].createTextRange) {
  14.                 document.forms['inputform'].elements[elname].focus();
  15.                 document.selection.createRange().duplicate().text = what;
  16.         } else if ((typeof document.forms['inputform'].elements[elname].selectionStart) != 'undefined') { // for Mozilla
  17.                 var tarea = document.forms['inputform'].elements[elname];
  18.                 var selEnd = tarea.selectionEnd;
  19.                 var txtLen = tarea.value.length;
  20.                 var txtbefore = tarea.value.substring(0,selEnd);
  21.                 var txtafter =  tarea.value.substring(selEnd, txtLen);
  22.                 var oldScrollTop = tarea.scrollTop;
  23.                 tarea.value = txtbefore + what + txtafter;
  24.                 tarea.selectionStart = txtbefore.length + what.length;
  25.                 tarea.selectionEnd = txtbefore.length + what.length;
  26.                 tarea.scrollTop = oldScrollTop;
  27.                 tarea.focus();
  28.         } else {
  29.                 document.forms['inputform'].elements[elname].value += what;
  30.                 document.forms['inputform'].elements[elname].focus();
  31.         }
  32. }
  33. </script>
  34. </head>
  35. <body>
  36. <form name='inputform' method='post' action='form.php'>
  37. Input Comment :<br>
  38. <textarea name='pesan' cols='30' rows='5'></textarea><br>
  39. <div><a href="javascript:show_hide('smiley');">Add smiley</a><br>
  40. <div id="smiley" style='border:solid 1px;display:none;'>
  41. <? include "ysmiley.php"; ?></div></div>
  42. <input type='submit' name='Submit' value='Submit'>
  43. <input type='reset' name='reset' value='Reset'>
  44. </form>
  45. <?
  46. if (isset($_POST[Submit])){
  47.         function stripinput($text) {
  48.                 if (QUOTES_GPC) $text = stripslashes($text);
  49.                 $search = array("\"", "'", "\\", '\"', "\'", "<", ">", " ");
  50.                 $replace = array(""", "'", "\", """, "'", "<", ">", " ");
  51.                 $text = str_replace($search, $replace, $text);
  52.                 return $text;
  53.         }
  54.         $pesan=trim(stripinput($_POST[pesan]));
  55.         $t = $pesan;
  56.         require_once('parse_smiley.php');
  57.         $bb = new Parse_Smiley();
  58.         $res = $bb->parse($t);
  59.         echo "Your Post : <br>".$res."";
  60. }
  61.  
  62. ?>
  63. </body>
  64. </html>
  65.  
  66.  


ysmiley.php :

  1.  
  2. <?php
  3. $smilies = array(
  4.         ';;)'=>'5.gif',':-\'=>'7.gif',':-/'=>'7.gif',':-x'=>'8.gif',':x'=>'8.gif',':">'=>'9.gif',
  5.         ':-p'=>'10.gif',':p'=>'10.gif',':*'=>'11.gif',':-*'=>'11.gif','B-)'=>'16.gif','>:)'=>'19.gif',
  6.         ':-(('=>'20.gif',':(('=>'20.gif',':-))'=>'21.gif',':))'=>'21.gif',':-|'=>'22.gif','(:|'=>'37.gif',
  7.         ':|'=>'22.gif','/:)'=>'23.gif','0:-)'=>'25.gif',':-B'=>'26.gif','=;'=>'27.gif','|-)'=>'28.gif',
  8.         'I-)'=>'28.gif','8-|'=>'29.gif',':-$'=>'32.gif','[-('=>'33.gif',':o)'=>'34.gif','8-}'=>'35.gif',
  9.         '=P~'=>'38.gif','#-o'=>'40.gif','=D>'=>'41.gif',':@)'=>'49.gif','3:-O'=>'50.gif',':(|)'=>'51.gif',
  10.         '~:>'=>'52.gif','@};-'=>'53.gif','%%-'=>'54.gif','**=='=>'55.gif','(~~)'=>'56.gif','~o)'=>'57.gif',
  11.         '*-:)'=>'58.gif','8-X'=>'59.gif','=:)'=>'60.gif','>-)'=>'61.gif',':-L'=>'62.gif','<):)'=>'48.gif',
  12.         '[-o<'=>'63.gif','@-)'=>'43.gif','$-)'=>'64.gif',':-"'=>'65.gif',':^o'=>'44.gif','b-('=>'66.gif',
  13.         ':)>-'=>'67.gif','[-X'=>'68.gif','\:D/'=>'69.gif','>:D<'=>'6.gif','o->'=>'72.gif',
  14.         'o=>'=>'73.gif','o-+'=>'74.gif','(%)'=>'75.gif','=(('=>'12.gif','#:-S'=>'18.gif','=))'=>'24.gif',
  15.         'L-)'=>'30.gif','<:-P'=>'36.gif',':-SS'=>'42.gif',':-w'=>'45.gif',':-<'=>'46.gif','>:P'=>'47.gif',
  16.         '>:/'=>'70.gif',';))'=>'71.gif',':-@'=>'76.gif','^:)^'=>'77.gif',':-j'=>'78.gif','(*)'=>'79.gif',
  17.         ':)]'=>'100.gif',':-c'=>'101.gif','~X('=>'102.gif',':-h'=>'103.gif',':-t'=>'104.gif','8->'=>'105.gif',
  18.         ':-??'=>'106.gif',':-?'=>'39.gif','%-('=>'107.gif',':o3'=>'108.gif','x_x'=>'109.gif',':!!'=>'110.gif',
  19.         '\m/'=>'111.gif',':-q'=>'112.gif',':-bd'=>'113.gif','^#(^'=>'114.gif','X('=>'14.gif','X-('=>'14.gif',
  20.         ':-s'=>'17.gif',':-S'=>'17.gif',':)'=>'1.gif',':('=>'2.gif',':-)'=>'1.gif',':-('=>'2.gif',';)'=>'3.gif',
  21.         ':-D'=>'4.gif',':D'=>'4.gif',':O'=>'13.gif',':-O'=>'13.gif',';-)'=>'3.gif',':->'=>'15.gif',
  22.         ':>'=>'15.gif',':-&'=>'31.gif',':bz'=>'115.gif');
  23. foreach ($smilies as $teks => $images) {
  24.         echo "<img src=\"ysmiley/".$images."\" alt=\"".$teks."\" onclick=\"insertText('pesan', '".$teks." ')\" border=\"0\"> ";
  25. }
  26.         echo "<br><input type='button' value=' Close ' onclick=javascript:show_hide('smiley')>";
  27. ?>
  28.  
  29.  
  30.  


parse_smiley.php :

  1.  
  2. <?php
  3. class Parse_Smiley{
  4.         var $smilies = array(
  5.         ';;)'=>'5.gif',':-\'=>'7.gif',':-/'=>'7.gif',':-x'=>'8.gif',':x'=>'8.gif',':">'=>'9.gif',
  6.         ':-p'=>'10.gif',':p'=>'10.gif',':*'=>'11.gif',':-*'=>'11.gif','B-)'=>'16.gif','>:)'=>'19.gif',
  7.         ':-(('=>'20.gif',':(('=>'20.gif',':-))'=>'21.gif',':))'=>'21.gif',':-|'=>'22.gif','(:|'=>'37.gif',
  8.         ':|'=>'22.gif','/:)'=>'23.gif','0:-)'=>'25.gif',':-B'=>'26.gif','=;'=>'27.gif','|-)'=>'28.gif',
  9.         'I-)'=>'28.gif','8-|'=>'29.gif',':-$'=>'32.gif','[-('=>'33.gif',':o)'=>'34.gif','8-}'=>'35.gif',
  10.         '=P~'=>'38.gif','#-o'=>'40.gif','=D>'=>'41.gif',':@)'=>'49.gif','3:-O'=>'50.gif',':(|)'=>'51.gif',
  11.         '~:>'=>'52.gif','@};-'=>'53.gif','%%-'=>'54.gif','**=='=>'55.gif','(~~)'=>'56.gif','~o)'=>'57.gif',
  12.         '*-:)'=>'58.gif','8-X'=>'59.gif','=:)'=>'60.gif','>-)'=>'61.gif',':-L'=>'62.gif','<):)'=>'48.gif',
  13.         '[-o<'=>'63.gif','@-)'=>'43.gif','$-)'=>'64.gif',':-"'=>'65.gif',':^o'=>'44.gif','b-('=>'66.gif',
  14.         ':)>-'=>'67.gif','[-X'=>'68.gif','\:D/'=>'69.gif','>:D<'=>'6.gif','o->'=>'72.gif',
  15.         'o=>'=>'73.gif','o-+'=>'74.gif','(%)'=>'75.gif','=(('=>'12.gif','#:-S'=>'18.gif','=))'=>'24.gif',
  16.         'L-)'=>'30.gif','<:-P'=>'36.gif',':-SS'=>'42.gif',':-w'=>'45.gif',':-<'=>'46.gif','>:P'=>'47.gif',
  17.         '>:/'=>'70.gif',';))'=>'71.gif',':-@'=>'76.gif','^:)^'=>'77.gif',':-j'=>'78.gif','(*)'=>'79.gif',
  18.         ':)]'=>'100.gif',':-c'=>'101.gif','~X('=>'102.gif',':-h'=>'103.gif',':-t'=>'104.gif','8->'=>'105.gif',
  19.         ':-??'=>'106.gif',':-?'=>'39.gif','%-('=>'107.gif',':o3'=>'108.gif','x_x'=>'109.gif',':!!'=>'110.gif',
  20.         '\m/'=>'111.gif',':-q'=>'112.gif',':-bd'=>'113.gif','^#(^'=>'114.gif','X('=>'14.gif','X-('=>'14.gif',
  21.         ':-s'=>'17.gif',':-S'=>'17.gif',':)'=>'1.gif',':('=>'2.gif',':-)'=>'1.gif',':-('=>'2.gif',';)'=>'3.gif',
  22.         ':-D'=>'4.gif',':D'=>'4.gif',':O'=>'13.gif',':-O'=>'13.gif',';-)'=>'3.gif',':->'=>'15.gif',
  23.         ':>'=>'15.gif',':-&'=>'31.gif',':bz'=>'115.gif');
  24.         var $parse_smilies = true;
  25.         function Parse_Smiley($parse=true){     $this->parse_smilies = $parse;  }
  26.         function parse($code){
  27.                 $this->_code = $code;
  28.                 $this->_parse_smilies();
  29.                 return $this->_code;
  30.         }
  31.         function _parse_smilies(){
  32.                 if($this->parse_smilies){
  33.                         foreach($this->smilies as $s=>$im){
  34.                                 $this->_code = str_replace($s,'<img src="ysmiley/'.$im.'">',$this->_code);
  35.                         }
  36.                 }
  37.         }
  38.  
  39. }
  40. ?>
  41.  



Ok done...

Anda dapat mengganti image2 smiley yang akan anda gunakan dengan cara mengganti pada array smiley pada contoh diatas dengan format sebagai berikut:

$smilies = array('code_smiley'=>'nama_images.gif','code2'=>'images2.gif',...dst);

Demikian semoga membantu,

Regards,



Po3nX

Komentar Pembaca : 7 komentar

pada : 27-02-2009, [mlkml ] menulis :
Gravatar

lllll

pada : 25-03-2009, [paijo ] menulis :
Gravatar

pada : 10-07-2009, [donald ] menulis :
Gravatar

pada : 07-09-2009, [ari ] menulis :
Gravatar

pada : 24-04-2010, [reymetalic ] menulis :
Gravatar

wew, mantabs form commentnya

pada : 24-04-2010, [reymetalic ] menulis :
Gravatar

wew, mantabs form commentnya

pada : 27-06-2010, [nani ] menulis :
Gravatar

Ikut Mengomentari

Nama *:
Web:
Email:
Komentar *:
Verivication code :
Write code here *:


Note : Data dengan tanda * harus diisi
allowed :