CMS/database updates with “fading action text”

Ok, so to repair the emotional damage and trauma of losing our Intranet (see http://www.rikzblog.862be1ab23b235a0bfbae2321-17362.sites.k-hosting.co.uk/?p=174) I turned to another job, the face-lift of our main site (here) is another job that I’ve been working on, I’d been prepared to let it loose prior to Christmas but a last minute decision to proof read (sanity check?) and subsequent decision to remove any glaring errors has pushed the unveiling back a few weeks.

Not that I’m complaining, I have been adding in little extra touches to our CMS section as time permits. Trying to provide a much better ability for our non-technical guys to be able to make adjustments to the site without having to code or get anywhere near an FTP connection.

It’s a practice that’s been in use for eons, as I’m sure I don’t need to tell 99.9% of you out there, the very concept of a WordPress application is a sizable CMS backend allows essentially non-technical people the ability to produce something really impressive for the web.  So why not just use a WordPress app?  That’s probably for another post, but the truth is that it’s a large corporate site (c1m page impressions per year) and we really should be able to craft something ourselves at that size.  So we do.

Having come from a background that includes ASP development you start to get to be able to spot what is from a database and what isn’t, our accommodation section is quite clearly fed by a database, but that’s ok, I mean we could spend lots of time trying to disguise it, but why?  It’s there as a help to our customers, not to fool developers into thinking it’s been manually prepared!

So there I am adding bits to our CMS, I have been programming up sections for the logical parts (aforementioned accommodation, also an events section, news, PR, etc) but also frequently updated sections like some of the front page, terms and conditions, and so on.

The thought occurred to me that with a CMS app you usually have some indication of what you’re doing/have done. Our CMS is pretty basic, a standard menu, links to the managable sections, lists of existing data with edit/delete options, that’s pretty much it. So I thought I’d add in a line to tell you what you’d just done, rather than what happens now, which is you make an edit and it drops you back to the menu.

Having used “classic” ASP the most I thought I’d go for the old favourite, a querystring. This is already used on our site thus;

http://www.islesofscilly-travel.co.uk/accommodation.asp?acc_loc=ios&acc_type=sc&accr=5&Submit=Submit

That url tells the database four things; acc_loc (location, in the example is Isles of Scilly), acc_type (Self Catering), accr (number of rows to display), Submit (err, that the form was submitted!) And the first three are used to construct the SQL statement to pull the data from the database;

SELECT * FROM databasename WHERE acc_show = ‘y’ AND acc_loc = ‘ios’ AND acc_type = ‘sc’ ORDER BY acc_name ASC

That is the SQL statement to pull the data out of the database, the acc_show variable also adds in an element of error checking since the form is live on our site allowing anyone to enter practically anything it obeys the rule of KISS by inserting all new records with a acc_show value of “n”, and only by manual intervention (from say, the CMS section) can the records be displayed. Other than that it selects all records with a location of “ios” AND and accommodation type of “sc” and sends them to the application in alphabetical order. The number of rows is used later in the repeat region.

So back to point, I decided to put some “action text” on my menu page, but more than that, I wanted it to fade out.

I am my own worst enemy, but I’d set my mind to it.  So first off I found a script (apologies, source site has been lost, but it’s out there in lots of places!) that faded text in from white to black and reverse engineered it slightly now it operates in reverse;

pop the javascript inbetween your head tags;

<script language=”javascript”>
col=255;
function fade() { document.getElementById(“fade”).style.color=”rgb(” + col + “,” + col + “,” + col + “)”; col-=1; if(col>0) setTimeout(‘fade()’, 20); }
</script>

the rest in the page somewhere;

<span id=”fade”>The text that you want to fade</span>

A really simple little script but effective, the next step was simply to use an array to list all of the CMS sections actions;

Dim actions(4)
actions(0) = “Front page updated”
actions(1) = “Accommodation page updated”
actions(2) = “PR page updated”
actions(3) = “More pages updated”

And so on….each editable page has to have a link to redirect to when the script has executed, and in case you’ve not worked it out yet – yes I am using Dreamweaver, as that’s part of the code of the script so we simply add a querystring to the redirect;

cmsmenu.asp?id=0, cmsmenu.asp?id=1, etc

The final bit of code uses the results of the querystring to display the relevant line from the array, we also use an if then statement to ensure it actually needs to be displayed in the first place.

<% if request.querystring(“id”)<>”” then %>
<% response.write actions(request.querystring(“id”)) %>
<% else %><% end if %>

And there we go; Quick, well yes. Dirty, I’m afraid so, but that’s the beauty of code like this, it does it’s job and allows you to move on to the next one…..

Leave a Comment

THE PERSONAL BLOG OF CORNWALL-BASED COMPANY DIRECTOR // CHRIS RICKARD