Po3nX dot Web dot ID

Cara mudah menambah smiley pada form comment

16-01-2009 | By : Po3nX

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 :

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Form Example</title>

<script language="javascript" type="text/javascript">

function show_hide(msg_id) {

elm=document.getElementById(msg_id);

elm.style.display = elm.style.display == 'none' ? 'block' : 'none';

}

function insertText(elname, what) {

if (document.forms['inputform'].elements[elname].createTextRange) {

document.forms['inputform'].elements[elname].focus();

document.selection.createRange().duplicate().text = what;

} else if ((typeof document.forms['inputform'].elements[elname].selectionStart) != 'undefined') { // for Mozilla

var tarea = document.forms['inputform'].elements[elname];

var selEnd = tarea.selectionEnd;

var txtLen = tarea.value.length;

var txtbefore = tarea.value.substring(0,selEnd);

var txtafter = tarea.value.substring(selEnd, txtLen);

var oldScrollTop = tarea.scrollTop;

tarea.value = txtbefore + what + txtafter;

tarea.selectionStart = txtbefore.length + what.length;

tarea.selectionEnd = txtbefore.length + what.length;

tarea.scrollTop = oldScrollTop;

tarea.focus();

} else {

document.forms['inputform'].elements[elname].value += what;

document.forms['inputform'].elements[elname].focus();

}

}

</script>

</head>

<body>

<form name='inputform' method='post' action='form.php'>

Input Comment :<br>

<textarea name='pesan' cols='30' rows='5'></textarea><br>

<div><a href="javascript:show_hide('smiley');">Add smiley</a><br>

<div id="smiley" style='border:solid 1px;display:none;'>

<? include "ysmiley.php"; ?></div></div>

<input type='submit' name='Submit' value='Submit'>

<input type='reset' name='reset' value='Reset'>

</form>

<?

if (isset($_POST[Submit])){

function stripinput($text) {

if (QUOTES_GPC) $text = stripslashes($text);

$search = array("\"", "'", "\\", '\"', "\'", "<", ">", " ");

$replace = array(""", "'", "\", """, "'", "<", ">", " ");

$text = str_replace($search, $replace, $text);

return $text;

}

$pesan=trim(stripinput($_POST[pesan]));

$t = $pesan;

require_once('parse_smiley.php');

$bb = new Parse_Smiley();

$res = $bb->parse($t);

echo "Your Post : <br>".$res."";

}

?>

</body>

</html>

ysmiley.php :

CODE

<?php

$smilies = array(

';;)'=>'5.gif',':-\'=>'7.gif',':-/'=>'7.gif',':-x'=>'8.gif',':x'=>'8.gif',':">'=>'9.gif',

':-p'=>'10.gif',':p'=>'10.gif',':*'=>'11.gif',':-*'=>'11.gif','B-)'=>'16.gif','>:)'=>'19.gif',

':-(('=>'20.gif',':(('=>'20.gif',':-))'=>'21.gif',':))'=>'21.gif',':-|'=>'22.gif','(:|'=>'37.gif',

':|'=>'22.gif','/:)'=>'23.gif','0:-)'=>'25.gif',':-B'=>'26.gif','=;'=>'27.gif','|-)'=>'28.gif',

'I-)'=>'28.gif','8-|'=>'29.gif',':-$'=>'32.gif','[-('=>'33.gif',':o)'=>'34.gif','8-}'=>'35.gif',

'=P~'=>'38.gif','#-o'=>'40.gif','=D>'=>'41.gif',':@)'=>'49.gif','3:-O'=>'50.gif',':(|)'=>'51.gif',

'~:>'=>'52.gif','@};-'=>'53.gif','%%-'=>'54.gif','**=='=>'55.gif','(~~)'=>'56.gif','~o)'=>'57.gif',

'*-:)'=>'58.gif','8-X'=>'59.gif','=:)'=>'60.gif','>-)'=>'61.gif',':-L'=>'62.gif','<):)'=>'48.gif',

'[-o<'=>'63.gif','@-)'=>'43.gif','$-)'=>'64.gif',':-"'=>'65.gif',':^o'=>'44.gif','b-('=>'66.gif',

':)>-'=>'67.gif','[-X'=>'68.gif','\:D/'=>'69.gif','>:D<'=>'6.gif','o->'=>'72.gif',

'o=>'=>'73.gif','o-+'=>'74.gif','(%)'=>'75.gif','=(('=>'12.gif','#:-S'=>'18.gif','=))'=>'24.gif',

'L-)'=>'30.gif','<:-P'=>'36.gif',':-SS'=>'42.gif',':-w'=>'45.gif',':-<'=>'46.gif','>:P'=>'47.gif',

'>:/'=>'70.gif',';))'=>'71.gif',':-@'=>'76.gif','^:)^'=>'77.gif',':-j'=>'78.gif','(*)'=>'79.gif',

':)]'=>'100.gif',':-c'=>'101.gif','~X('=>'102.gif',':-h'=>'103.gif',':-t'=>'104.gif','8->'=>'105.gif',

':-??'=>'106.gif',':-?'=>'39.gif','%-('=>'107.gif',':o3'=>'108.gif','x_x'=>'109.gif',':!!'=>'110.gif',

'\m/'=>'111.gif',':-q'=>'112.gif',':-bd'=>'113.gif','^#(^'=>'114.gif','X('=>'14.gif','X-('=>'14.gif',

':-s'=>'17.gif',':-S'=>'17.gif',':)'=>'1.gif',':('=>'2.gif',':-)'=>'1.gif',':-('=>'2.gif',';)'=>'3.gif',

':-D'=>'4.gif',':D'=>'4.gif',':O'=>'13.gif',':-O'=>'13.gif',';-)'=>'3.gif',':->'=>'15.gif',

':>'=>'15.gif',':-&'=>'31.gif',':bz'=>'115.gif');

foreach ($smilies as $teks => $images) {

echo "<img src=\"ysmiley/".$images."\" alt=\"".$teks."\" onclick=\"insertText('pesan', '".$teks." ')\" border=\"0\"> ";

}

echo "<br><input type='button' value=' Close ' onclick=javascript:show_hide('smiley')>";

?>

parse_smiley.php :

CODE

<?php

class Parse_Smiley{

var $smilies = array(

';;)'=>'5.gif',':-\'=>'7.gif',':-/'=>'7.gif',':-x'=>'8.gif',':x'=>'8.gif',':">'=>'9.gif',

':-p'=>'10.gif',':p'=>'10.gif',':*'=>'11.gif',':-*'=>'11.gif','B-)'=>'16.gif','>:)'=>'19.gif',

':-(('=>'20.gif',':(('=>'20.gif',':-))'=>'21.gif',':))'=>'21.gif',':-|'=>'22.gif','(:|'=>'37.gif',

':|'=>'22.gif','/:)'=>'23.gif','0:-)'=>'25.gif',':-B'=>'26.gif','=;'=>'27.gif','|-)'=>'28.gif',

'I-)'=>'28.gif','8-|'=>'29.gif',':-$'=>'32.gif','[-('=>'33.gif',':o)'=>'34.gif','8-}'=>'35.gif',

'=P~'=>'38.gif','#-o'=>'40.gif','=D>'=>'41.gif',':@)'=>'49.gif','3:-O'=>'50.gif',':(|)'=>'51.gif',

'~:>'=>'52.gif','@};-'=>'53.gif','%%-'=>'54.gif','**=='=>'55.gif','(~~)'=>'56.gif','~o)'=>'57.gif',

'*-:)'=>'58.gif','8-X'=>'59.gif','=:)'=>'60.gif','>-)'=>'61.gif',':-L'=>'62.gif','<):)'=>'48.gif',

'[-o<'=>'63.gif','@-)'=>'43.gif','$-)'=>'64.gif',':-"'=>'65.gif',':^o'=>'44.gif','b-('=>'66.gif',

':)>-'=>'67.gif','[-X'=>'68.gif','\:D/'=>'69.gif','>:D<'=>'6.gif','o->'=>'72.gif',

'o=>'=>'73.gif','o-+'=>'74.gif','(%)'=>'75.gif','=(('=>'12.gif','#:-S'=>'18.gif','=))'=>'24.gif',

'L-)'=>'30.gif','<:-P'=>'36.gif',':-SS'=>'42.gif',':-w'=>'45.gif',':-<'=>'46.gif','>:P'=>'47.gif',

'>:/'=>'70.gif',';))'=>'71.gif',':-@'=>'76.gif','^:)^'=>'77.gif',':-j'=>'78.gif','(*)'=>'79.gif',

':)]'=>'100.gif',':-c'=>'101.gif','~X('=>'102.gif',':-h'=>'103.gif',':-t'=>'104.gif','8->'=>'105.gif',

':-??'=>'106.gif',':-?'=>'39.gif','%-('=>'107.gif',':o3'=>'108.gif','x_x'=>'109.gif',':!!'=>'110.gif',

'\m/'=>'111.gif',':-q'=>'112.gif',':-bd'=>'113.gif','^#(^'=>'114.gif','X('=>'14.gif','X-('=>'14.gif',

':-s'=>'17.gif',':-S'=>'17.gif',':)'=>'1.gif',':('=>'2.gif',':-)'=>'1.gif',':-('=>'2.gif',';)'=>'3.gif',

':-D'=>'4.gif',':D'=>'4.gif',':O'=>'13.gif',':-O'=>'13.gif',';-)'=>'3.gif',':->'=>'15.gif',

':>'=>'15.gif',':-&'=>'31.gif',':bz'=>'115.gif');

var $parse_smilies = true;

function Parse_Smiley($parse=true){ $this->parse_smilies = $parse; }

function parse($code){

$this->_code = $code;

$this->_parse_smilies();

return $this->_code;

}

function _parse_smilies(){

if($this->parse_smilies){

foreach($this->smilies as $s=>$im){

$this->_code = str_replace($s,'<img src="ysmiley/'.$im.'">',$this->_code);

}

}

}

}

?>

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
>> Arsip Artikel <<

[TOP 1 Oli Sintetik Mobil-Motor Indonesia ]
ijin ngetes ya masbrow
17/10/11

[Amikom.us Tempat Belanja Hosting Murah ]
dulu blog saya juga tak kasi itu, tapi tak ilangin lagi, hehehe
14/07/11

[Hfiza ]
slm kenal,

sorry sy lg nyoba scriptnya lngsung tancap copy paste ja nieh tp kok error y

Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING, expecting ')' in C:AppServwwwform.php on line 50

tolong d reply y

11/07/11

[Po3nX ]
@pakeko: thanks kunjungannya, salam kenal juga
@dika: tinggal dirubah aja scriptnya disesuaikan dengan nama image dan bbcode yang akan dipake...
07/03/11