htmlspecialchars function for Javascript / jQuery

I was dealing with user input on a web form using a little AJAX magic to auto-update the database while keeping the user on the same page.  I always use the PHP function htmlspecialchars to clean up text input, and needed something similar for my javascript code.  I couldn’t find anything* so I wrote my own.  Maybe this will come in handy for someone else.

According to the htmlspecialchars function page on php.net, the translations performed are:-

‘&’ (ampersand) becomes ‘&’
‘”‘ (double quote) becomes ‘"’
“‘” (single quote) becomes ‘'’
‘<‘ (less than) becomes ‘&lt;’
‘>’ (greater than) becomes ‘&gt;’

So here’s my function for javascript written using the .replace method:-

Take note, we need to use the ‘g’ to globally match, or the above function will only replace the first instance of each character.

* if this function already exists in the jQuery library, please let me know in the comments.

Server side code for the Quote Of The Moment plugin

Here I will outline the code used to create the server side code required by the Quote Of The Month WordPress plugin.  The plugin calls getqotm.php (code shown at the bottom of this post) from our server in order to retrieve a random quote from our database.

First we require a database that holds the quotes and authors.  You can use the code below within phpMyAdmin and run it as a SQL query in order to set up your own database as follows:

As can be seen above, we create a table called ‘qotm’ with the necessary fields for each quote along with its author.  Two additional fields were created.  The ‘added’ field simply timestamps when each new entry is added, and the ‘rating’ field is currently not used but perhaps in the future will contain a number out of 5 depending on how a user may rate the quality of any given quote.

Here’s a snapshot of a section of the database currently in use:

table_qotm-capture

So we have our database, but how do we populate it?  There are a number of options, and here I will describe one which involves a few PHP files and a little jQuery magic in order to add them by hand.

As always we need our config.php file which is included in our main PHP file in order to connect to our database:

Next we’ll have our basic form allowing us to input our quote and its author:

Whats with all that javascript?  Well, it allows us to use AJAX in order to update our database using the addsql.php code without refreshing our page.  This means that we haven’t got to fill in our ultra top secret password each time we want to add another quote.

Here’s the final piece of the puzzle, the actual code that adds the data to our database and returns the little bit of text that displays at the bottom of the above code in our div id ‘display_result':

You will need to change ‘awesomepassword’ for something actually awesome yourself.

So we have our table, our quote and author entry page with our javascript allowing us to update our database on the fly.

We now need a little PHP code that randomly picks out a quote and author and spits out our html ready to be displayed by our plugin.

Couldn’t be simpler.

But wait, why have we altered the header?

By default cross domain AJAX is not allowed by this server.  What does this mean?  See this post for a full explanation.  Put simply, this allows anyone running our plugin from any domain to access this server using the AJAX method which is employed in our plugin.

Quote Of The Moment – A WordPress plugin

Quote Of The Moment Banner

Yet another inspirational quote plugin for WordPress, but with a difference.  This one is AJAX based, which means it refreshes with a random quote without the need for a page refresh.

Installation

  1. Go download Quote Of The Moment from the WordPress plugin repository, unzip and move the files to your WordPress plugin directory (/wp-content/plugins/…)
  2. Activate the ‘Quote Of The Moment’ plugin from you WordPress dashboard.
  3. Move the ‘Quote Of The Moment’ widget to the desired location on your page.

… and that’s it, quotes will begin appearing on your site.

Configuration

There is also a configuration page allowing you to alter the quotes source and how often they are refreshed.

Features

There are 3 themeable div elements. The overall ‘qotm_container’, and the ‘qotm_quote’ and ‘qotm_author’ elements. See the included style.css file for more information.

Also, if you mouseover the quote it will stop refreshing until you mouseleave the area, allowing you to read the quote without risk of it changing.

Support

If you have any problems or suggestions with regard to this plugin please use the WordPress support page for this plugin here. However, if you would prefer to email me directly please feel free: spoffle at gmail dot com.  I will usually reply within 24 hours.

The code

There are 2 main branches of code necessary to make this plugin work, there is the plugin code itself that you need to install in WordPress, and there is the code that serves the plugin with quotes from a database held here on this server.

For the server/database code please see this post here.  For the plugin, download it and look through the files using a text editor like Notepad++.  The code should be self evident, but if not please comment below with any questions you have.

Download it here: https://wordpress.org/plugins/quote-of-the-moment/