In this tutorial we’ll be creating a system which will convert messages including text smilies into messages including icon smilies ( text => smilie icons ).
Preknowledge
For this tutorial it’s prefered that you’ve got some preknowledge about php variables, arrays, functions and the foreach loop. If not, I’d recommend you to have a look at the following tutorials which apply well to this tutorial:
Functions & Loops used
The functions/loops used in this tutorial:
- str_replace(‘part to replace’, ‘value to replace by’, $str)
- foreach($array as $key => $value)
Creating the function
Let’s first create a function which will do this job – replacing all smiley tags by smiley images. The only thing the function needs to do this task is a string ( text ) to do this for and an array of all smiley tags & corresponding smiley images to replace them with inside the string.
function replaceSmilies($str, $smilies) {
}
We gave them as argruments for the function, we called the string that needs to be given: ‘$str’, and the array with smiley tags & images that need to be set: ‘$smilies’.
Setting up smilies syntaxes & images
Note: This part should be put outside the function as it’s just for setting up the smiley tags & images ( example ) and an example string to replace them in. In other words: setting up the variables that are required for the function to do his task. The variables that we’ll be working with inside the function to replace the smileys.
The first thing we’re going to do is set up a list of smiley ‘tags’, syntaxes ( such as : ) and : D, etc. ) and the corresponding image icons (smilies) for those tags. We’re going to create an array to do this.
An array can be created like this:
$myArr = array("key" => "value", "key2" => "value2");
In our case we’ll set the keys equal to the smilie tags and the values equal to the smilie images ( icons ) with which these tags need to be replaced with.
Example:
$smilies = array(":)" => "smile.jpg",
":P" => "thongue.jpg");
Here I just set up 2 smilies but setup as many as you want. The image names I used (’smile.jpg’ and ‘thongue.jpg’) can be any image that contains the smiley icon you want to show up for this smiley tag.
What we’ll want to do inside the replaceSmilies function is replace the keys (smiley tags) of the array by the images of the values (smilies) of the array.
Now let’s as well create an example text ( string ) in which these smiley tags occur and need to be replaced by the smiley icons/images:
$str = "Hi there!Example text
";
So now we’ve setup the argruments ( variables/arrays ) that are needed for our function that we’ll be creating. So let’s put everything together for so far:
<?php
function replaceSmilies($str, $smilies) {
}
$smilies = array(":)" => "smile.jpg",
":P" => "thongue.jpg");
$str = "Hi there! Example text ";
?>
Creating the loop
Now we’re going to create a foreach loop which we’ll let it put the keys ( smiley tags ) of the array into a variable ‘$tag’ and the values ( smiley images ) into a variable ‘$image’. However it will do this for only 1 couple of a key and a value per time and execute the loop for that couple of a smiley tag and a smiley image. We’ll put the loop inside the function as the function will need to do the replacing of these smiley tags by these smiley images.
Structure of a foreach loop:
foreach($array as $keyvariable => $valuevariable) {
}
becomes =>
Our foreach loop:
foreach($smilies as $tag => $image) {
}
$smilies is the array we created to put all smiley tags ( keys ) and smiley images ( values ) into. As mentioned above for each couple of a smiley tag and a smiley image, the foreach loop will be ran with the smiley tag put in $tag and the smiley image put in $image. So for example $tag = ‘:)’ and $image = ’smile.jpg’. This is the first variable of our example array ($smilies) – our first couple of a smiley tag ( key ) and a smiley image ( value ).
So let’s put it inside the function.
function replaceSmilies($str, $smilies) {
foreach($smilies as $tag => $image) {
}
}
Replacing the smilies
So what will it need to do with this smiley tag and smiley image? It will need to replace the smiley tag by the smiley image inside the string which is set in $str ( see the function argruments & the example $str message set in the beginning ).
Before we’ll do this we’ll first create a new variable ‘$new_str’ which we’ll set equal to ‘$str’ in the first place but which will change as the smiley tags get replaced by the smiley images in there.
function replaceSmilies($str, $smilies) {
$new_str = $str; //set the new string equal to the string given in the first place
//the foreach loop will be replacing the smilies inside this string
//so $new_str will contain the new string with images of the smilies (icons) inside
foreach($smilies as $tag => $image) {
}
}
Now we’ll be replacing the smiley tags by the smiley images. This will be done inside the foreach loop as there we got the smiley tags inside $tag and smiley images inside $images so we can easily replace them. Therefore we’ll use the str_replace function. So how does this function work?
str_replace("thing to replace", "value to replace it by", "string to do this inside");
so in our case;
str_replace($tag, $image, $new_str);
Which will replace $tag by $image inside $new_str. Which is correct: $tag contains the smiley tag and $image contains the smiley image and $new_str the string to replace these inside ( which will contain the new string ). Now it will return $new_str but then with the smiley tag replaced by the smiley image. But we do want to save this new (replaced) string it returns inside the variable $new_str to update it:
$new_str = str_replace($tag, $image, $new_str);
However now it will replace for example like ‘:)’ by ’smile.jpg’. Which won’t give us the image of ’smile.jpg’ yet!
So instead we need to replace it by:
<img src=’smile.jpg’>
or in general:
<img src=’”.$image.”‘>
So let’s change this inside the replace function:
$new_str = str_replace($tag, "<img src='".$image."'>", $new_str);
And let’s put it inside the loop.
function replaceSmilies($str, $smilies) {
$new_str = $str;
foreach($smilies as $tag => $image) {
$new_str = str_replace($tag, "<img src='".$image."'>", $new_str);
}
}
The last thing the function needs to do is return the new string, which is put in $new_str.
function replaceSmilies($str, $smilies) {
$new_str = $str;
foreach($smilies as $tag => $image) {
$new_str = str_replace($tag, "<img src='".$image."'>", $new_str);
}
return $new_str; //return the new, updated string containing the smiley images
}
Smilies Directory Updating
It could be that you’ve put the smiley images inside another map/directory. In that case you can easily update the path of the image inside the loop. Better said: inside the str_replace function of the loop.
To do this, this part needs to be changed:
<img src=’”.$image.”‘>
As that’s the html image that all smileys will be replaced by. And we used a foreach loop for the smileys array which put all smiley images, one per time, inside $image and executed the foreach loop for each smiley the same way. So we only need to change this part as it uses this for each smiley and each smiley image. As they all will be set inside $image and replaced the same way inside the foreach loop.
So, for example, we could update the path like this:
<img src=’yourpath/”.$image.”‘>
$new_str = str_replace($tag, "<img src='images/".$image."'>", $new_str);
Where we set the path to images/, so all smilies will be replaced by ‘images/smiley_image_name.jpg’ instead of just ’smiley_image_name.jpg’.
Using the function
To use the function we simply call the function and give the string ($str) and smiley tags & images array ($smilies) which we set in the beginning of this tutorial.
<?php
function replaceSmilies($str, $smilies) {
$new_str = $str;
foreach($smilies as $tag => $image) {
$new_str = str_replace($tag, "<img src='".$image."'>", $new_str);
}
return $new_str; //return the new, updated string containing the smiley images
}
$smilies = array(":)" => "smile.jpg", ":P" => "thongue.jpg");
$str = "Hi there! Example text ";
echo "Input string: {$str} <p>
Output string: ".replaceSmilies($str, $smilies);
?>
Download Full Script (function & smilies pack)
I’ve created a sample script of this tutorial which includes a ready to use function for replacing smilies in a text by the smiley images (icons). The smiley icons/images are provided within the zip file and the function automaticly uses these smiley images by default unless you provide another set of smilies to the function.
How to use
<?php
include("function.php"); //include the smilies function to your file
$str = "the message with smilies 
"; //setup a variable that contains the message that needs to be converted
echo replaceSmilies($str); //replace he smilie tags with the default smiley images
//or: echo replaceSmilies($str, $smilies, $dir); where $smilies is the array with smiley tags & image filenames as done in this tutorial
?>
Mon, Feb 15, 2010
PHP & MySql