PHP Tutorial - Smilies!

This tutorial will (I hope) give you some guidance in an area which I recently had to deal with - inserting smilies into a string, and then i will quickly show how to display them.

Creating the MYSQL table

First of all, you need to create a database for these tables to go in, I called mine huscy_87. You create the database with the following code:

CREATE DATABASE `database_name`

Here is the code to generate the table structure that you will be using in this tutorial.

CREATE TABLE tbl_smilies (
smilie_id int(11) NOT NULL auto_increment,
smilie_symbol varchar(30) NOT NULL default ”,
smilie_image varchar(255) NOT NULL default ”,
PRIMARY KEY (smilie_id)
) TYPE=MyISAM;

You should also create the table that your text string will be inserted into…

CREATE TABLE `smilie_test` (
`id` INT( 2 ) NOT NULL AUTO_INCREMENT,
`string_posted` VARCHAR( 255 ) NOT NULL ,
PRIMARY KEY ( `id` )
);

Onto the HTML(easy bit)

Here is the HTML form that we will be using, its a simple form, with action $_SERVER[’PHP_SELF’] and a textarea input field, and a submit button, as below:

<?
$smilieform = ‘<form action=”.$_SERVER[’PHP_SELF’].” method=’post’ name=’smilieForm’>’ ;
$smilieform .= ‘<table width=’500′ cellpadding=’5′ cellspacing=’0′>‘ ;
$smilieform .= ‘<tr><td valign=’top’ class=’contentfont’>‘ ;
$smilieform .= ‘Message:’ ;
$smilieform .= ‘</td><td class=’contentfont’>‘ ;
$smilieform .= ‘<textarea name=’smiliefield’ cols=’25′ rows=’5′></textarea><br /><br />‘ ;
$smilieform .= ‘</td><td>‘ ;
$smilieform .= $smilielist;
$smilieform .= ‘</td>‘ ;
$smilieform .= ‘</tr></table>‘ ;
$smilieform .= ‘<input type=’submit’ value=’Post Message’>‘ ;
$smilieform .= ‘</form>‘ ;

// Optional, displays all previous posts
mysql_connect ( ‘localhost’,'username’,'password’ ) or die ( mysql_error ());
mysql_select_db ( ‘databasename‘ ) or die ( mysql_error ());
$result = mysql_query ( ’select string_posted from smilie_test’ ) or die ( mysql_error ());
while ($row = mysql_fetch_array ($result))
{
$smilieform .= ‘String: ‘ .$row[’string_posted’]. ‘<br /><br />‘ ;
}
echo ($smilieform);
?>

As you can see, it is just echoing a variable, with an HTML form in it, the final part, which is commented as optional, simply grabs the string posted from the database, and displays it on-screen, so you can see what others have posted.

The $smilielist variable is the table with the smilie images in, which a user would click, to instantly insert a smilie. It can be found here - the important part is shown below:

The JavaScript Function

Note that this needs to be placed in <script> tags, and then in further HTML comment tags, i.e. <script> <!– function goes here –> </script>
Click here to get some smilies.

function addSmilie(smilie, smilieForm, smilieField) {
var revisedMessage;
var currentMessage = document.smilieForm.elements[smilieField].value;
revisedMessage = currentMessage+smilie;
document.smilieForm.elements[smilieField].value=revisedMessage;
document.smilieForm.elements[smilieField].focus();
return;
}

Place the above code before the opening <? php tag - or else it will be parsed as php, which would suck as its javascript .
Now as you can see, this adds whatever your smilie code (e.g. :huh: ) into the field specified, in the form specified - now thats enough of that awful javascript nonsense eh!

Processing the form

Right then, you have your form, and (hopefully) the smilie code is being inserted nicely into your textarea - now we need to process them, first of all, you need to put the code, and the relevant replacement code into your table, using either PHPMYADMIN , or via the command prompt, using the following code:

INSERT INTO `tbl_smilies` ( `smilie_id` , `smilie_symbol` , `smilie_image` )
VALUES ( ”, ‘::foo::’, ‘/foo.gif’ );

W here :foo: is the smilie symbol, and /foo.gif is the path to the smilie image, the blank entry is the auto-increment field, so you dont enter a value there - now fill in all these records for each smilie that you will use.

The insertion of the smilies

Now basically, all this function does is take the text string that you put in, and add the image of the smilie (in my case, I have all my smilies in a `smilies` folder) to the string. This function should be placed before the other PHP code. You can now add the string to the database, as seen…

if ( $_POST [ ’smiliefield’ ])
{
$_POST [ ’smiliefield’ ] = addsmilies( $_POST [ ’smiliefield’ ]);
mysql_connect ( ‘localhost’,'root’,'password’ ) or die ( mysql_error ());
mysql_select_db ( ‘huscy_86‘ ) or die ( mysql_error ());
mysql_query ( ‘insert into smilie_test values(”,$_POST[’smiliefield’]” ) or die ( mysql_error ());
echo ( ‘<META HTTP-EQUIV=’refresh’ content=’1; url=$_SERVER[’PHP_SELF’]'>’ );
echo ( ‘You are being redirected, please wait…’ );
}

Simply copy this under the function , and replace the database variables with your own.