Automatically Adding Smiles To Your Messages!

This tutorial will demonstrate how you can implement smiley's into your pages on the fly.

The first thing we will create is a form that will allow the user to enter data:

<!--- create the form and name is form.cfm --->
<form action="insert.cfm" method="post">
  <table width="100%" border="0">
      <tr>
         <td width="100%" colspan="2">Enter a message:</td>
      </tr>
      <tr>
         <td width="50%" valign="top">Message:</td>
         <td width="50%"><textarea name="Message" rows="6" cols="35"></textarea></td>
      </tr>
      <tr>
         <td width="50%"></td>
         <td width="50%"><input type="submit" name="Process" value="Add Message"></td>
      </tr>
  </table>
</form>

The next step is to create the insert page that will insert the data to the database. You can generate the smiley's code here and insert it directly in with the message. That way it'll display the smiley's when a viewer sees the page,

The first think you must do is specify the path to the images that you will want to display, in this example we will use fictional paths, but you'll get the idea.

<!--- Define the image paths --->
<cfset smile_image = "<img src=http://www.yoursite.com/images/smile.gif border=0 alt=Smile>">
<cfset wink_image = "<img src=http://www.yoursite.com/images/wink.gif border=0 alt=Wink>">
<cfset frown_image = "<img src=http://www.yoursite.com/images/frown.gif border=0 alt=Frown>">

<!--- now let's go through the message and replace the smiles, winks, and frowns with the images. --->
<cfset message = #ReplaceNoCase(Message, ":)", smile_image, "ALL")#>
<cfset message = #ReplaceNoCase(Message, ";)", wink_image, "ALL")#>
<cfset message = #ReplaceNoCase(Message, ":(", frown_image, "ALL")#>

Now let's insert the new processed data into the database:

<!--- insert the new processed data --->
<cfquery name="qInsertMessage" datasource="YourDSN">
    INSERT INTO Messages(Message)
    VALUES('#message#')
</cfquery>

That's it, it's that simple to add automatic smiles to your code

You can also use the following images if you want for your site:
Smile -
Wink -
Frown -

Questions, Comments? Email Me....