A PHP Error was encountered

Severity: 8192

Message: mysql_escape_string(): This function is deprecated; use mysql_real_escape_string() instead.

Filename: mysql/mysql_driver.php

Line Number: 303

Форма для добавления смайлов в комментарии на PHP + Javascript

Форма для добавления смайлов в комментарии на PHP + Javascript

Автор: Mowshon.
Опубликовано 8 сентября 2011
в рубрике PHP, Примеры

Просмотров: 9752.
Подписаться на комментарии по RSS.

Форма для добавления смайлов в комментарии на PHP + Javascript

Смайлы уже стали незаменимым способом общения в социальных сетях. Ими можно выразить своё настроение и эмоции. Если вы решили написать небольшой сайт с нуля, и дошли до части общения пользователей между собой, это может быть комментарии или внутренняя почта сайта. Придать более живой вид форме добавления комментария можно при помощи смайлов.

У пользователя будет выбор из нескольких смайлов на которых он может нажать и в ту же минуту увидеть символ смайла в форме добавления текста.

С помощью Javascript напишем небольшой скрипт который будет отвечать за действия во время нажатия на картинку смайла. PHP в свою очередь будет заменять символ смайла, например вместо "smile" будет картинка.

Принцип работы прост, пользователь написал сообщение или комментарии используя при этом символы комментариев и сохраняет текст в базу. Нужно учесть тот факт что, в базу будут идти только символы, преобразовать символы в изображение мы будем только после вывода данных.

Создадим HTML файл который будет выводит форму добавления комментария.

<script language="javascript" type="text/javascript">
var ie=document.all?1:0;
var ns=document.getElementById&&!document.all?1:0;
function InsertSmile(SmileId)
{
    if(ie) {
    	document.all.text.focus();
    	document.all.text.value+=" "+SmileId+" ";
    }
    else if(ns) {
    	document.forms['comment'].elements['text'].focus();
    	document.forms['comment'].elements['text'].value+=""+SmileId+" ";
    }
    else
    	alert("!");
}
</script>
<h2 align="center">Добавление комментария</h2>
<form name="comment" method="post" action="">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="400"><tbody>
<tr>
<td><textarea name="text" id="text" style="width: 100%;"></textarea></td>
</tr>
<tr><td align="center">
		  
		  <img style="cursor: pointer;" onclick="InsertSmile("<img src="http://live-code.ru/uploads/smiles/smile.gif" width="19" height="19" alt="smile" style="border:0;" class="smiley">"<img src="http://live-code.ru/uploads/smiles/wink.gif" width="19" height="19" alt="wink" style="border:0;" class="smiley">" src="images/smile/smile.png" align="absmiddle" height="18" width="18">  
		  <img style="cursor: pointer;" onclick="InsertSmile("<img src="http://live-code.ru/uploads/smiles/wink.gif" width="19" height="19" alt="wink" style="border:0;" class="smiley">"<img src="http://live-code.ru/uploads/smiles/wink.gif" width="19" height="19" alt="wink" style="border:0;" class="smiley">" src="images/smile/wink.png" align="absmiddle" height="18" width="18">  
		  <img style="cursor: pointer;" onclick="InsertSmile(":("<img src="http://live-code.ru/uploads/smiles/wink.gif" width="19" height="19" alt="wink" style="border:0;" class="smiley">" src="images/smile/frown.png" align="absmiddle" height="18" width="18">  
		  <img style="cursor: pointer;" onclick="InsertSmile("<img src="http://live-code.ru/uploads/smiles/raspberry.gif" width="19" height="19" alt="raspberry" style="border:0;" class="smiley">"<img src="http://live-code.ru/uploads/smiles/wink.gif" width="19" height="19" alt="wink" style="border:0;" class="smiley">" src="images/smile/tongue.png" align="absmiddle" height="18" width="18">  
		  <img style="cursor: pointer;" onclick="InsertSmile(":D"<img src="http://live-code.ru/uploads/smiles/wink.gif" width="19" height="19" alt="wink" style="border:0;" class="smiley">" src="images/smile/biggrin.png" align="absmiddle" height="18" width="18">   
		  <input name="Submit" value="Добавить" type="submit"></td>
</tr></tbody></table>
	</div>
</form>
Получим вот такую форму.

Форма для добавления смайлов в комментарии на PHP + Javascript

Чтобы пример работал нормально, название формы(form) должна быть названа "comment" а поле добавления комментария "text". Это не обязательно, но если захотите добавить javascript код у себя то придется указать свои имена форм.

Теперь, давайте рассмотрим PHP скрипт который будет менять символы на их изображения.

// Смена символом на смайлы
function smile($text) {
	return strtr($text, 
		// Массив символов и их смайлов
		array(
		"<img src="http://live-code.ru/uploads/smiles/smile.gif" width="19" height="19" alt="smile" style="border:0;" class="smiley">" => "<img src="images/smile/smile.png" align="absmiddle"> ",
        "<img src="http://live-code.ru/uploads/smiles/wink.gif" width="19" height="19" alt="wink" style="border:0;" class="smiley">" => "<img src="images/smile/wink.png" align="absmiddle"> ",
		":(" => "<img src="images/smile/frown.png" align="absmiddle"> ",
		"<img src="http://live-code.ru/uploads/smiles/raspberry.gif" width="19" height="19" alt="raspberry" style="border:0;" class="smiley">" => "<img src="images/smile/tongue.png" align="absmiddle"> ",
		":D" => "<img src="images/smile/biggrin.png" align="absmiddle"> ",
		)
	);
}
// Текст выведенный из цикла из базы или просто любой текст
$Text = "Текст с live-code.ru <img src="http://live-code.ru/uploads/smiles/raspberry.gif" width="19" height="19" alt="raspberry" style="border:0;" class="smiley"> <img src="http://live-code.ru/uploads/smiles/smile.gif" width="19" height="19" alt="smile" style="border:0;" class="smiley">";
// Выводим уже измененный текст
echo smile($Text);
?>

Вот такой результат мы получим.

Форма для добавления смайлов в комментарии на PHP + Javascript

Пример достаточно просто. Вы сами можете пополнять скрипт нужными смайлами.

Вам нужен спутниковый телефон? Советуем Вам арендовать спутниковые телефоны, продажа и обслуживание спутниковых телефонов Iridium на сайте www.satellite-rent.ru

Комментариев: 3

  1. Демон009 | 10.09.2011 в 21:48:53 | #1

    Во! Спасибо, искал я данный скрипт. Красивые смайлики кто их автор ? хочу себе их сборку смайлов поставить. Если не сложно напишите сайт автора или источник raspberry

  2. Mowshon | 30.03.2012 в 00:48:12 | #2

    Демон009, смайлы из коллекции форума XenForo

  3. Комментатор 36 | 15.07.2012 в 01:08:43 | #3

    У вас изначально не верный подход.

    Если уж учите - то приучайте делать все правильно.

    Надо в 2 функции вынести

    function Smiles_pak ()

    {

    return array(

    'excaim' => '/style/smiles/exclaim.gif'

    #......

    );

    }

    function Convert_to_img ($str)

    {

    $data = Smiles_pak();

    $img_array = array();

    foreach ($data as $key => $value) {

    $img_array [$key] = '';

    }

    return strtr($str, $img_array);

    }

    суть ясна, надеюсь.

    Просто с вашим вариантом масштабировать и фиксить будет тяжко.

Оставьте комментарий!

Гость
Комментатор / хотите им стать

Чтобы стать комментатором введите email и пароль. Напишите комментарий. В дальшейшем ваша связка email-пароль, позволит вам комментировать и редактировать свои данные. Не забудьте про активацию (инструкция придет на ящик, указанный при регистрации).

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

(обязательно)