On February 2, 2010 I finally completed the server move to the new co-location facility. I had, in the prior weeks, backup all data and files, did a clean install of the operating system and restored all functionality to the server. The new facility will not only help achieve faster load times, but a much better environment for the server than sitting at my house under my desk. With this move you all should notice faster page load, better usability and the RSS feeds hopefully will load and refresh across the Net faster.

Sometime within the next week I will be taking this server offline so I may perform some system maintenance and upgrades. At that time, I will also be locating it in a new data center so the actual speed will be what it should be and the performance should be increased dramatically.

There will be many system updates taking place at that time – some of them will include a complete Linux upgrade, Wordpress upgrades, database upgrades and more. Most of these items will be performed in multitude to lessen the down time.

Once all the upgrades are done, within a day or two after I will be moving the server to a new data center. This will allow the server to operate at a fast connection, with much more ability to serve the growing needs of several blogs and other sites hosted on it.

Where we left off

If the first part of this short Coldfusion AJAX series, we discussed using the CFDIV tag, along with the CFAJAXIMPORT tag to enable us to dynamically load content into a div (cfdiv) layout container on the fly.  The only custom javascript we made was to create a function that our href called to key the Coldfusion.navigate feature.

This time we will be discussing submitting forms asynchronously using Coldfusion, the CFDIV and CFFORM tags.  This nifty feature allows web developers to submit their form within a containing div, and have the results of that form appear directly back to the user without reloading the entire page.  In part three, the final installment, we will discuss how to build a search suggestion form control that dynamically populates a search text box as the user is typing.

CFDIV and CFFORM tags

We’ve already discussed the CFDIV tag, but now we discuss the CFFORM tag.  The CFFORM tag is specific to Coldfusion and inserts forms into the page with server and client side processing, including built in validation for the tags contained within the form.  Speaking of the tags within the form, they take on special characteristics and names, rather than using the input tag, we will be using the CFINPUT tag.

To ensure the form submits via AJAX we will simply enclose our form within a CFDIV container, keeping in mind that we need to include the proper tags via CFAJAXIMPORT.  The other thing to note is on the CFDIV we are including the the page that contains our form as the bind parameter this time. The listing below is the complete listing for the form, note I have omitted the rest of the standard page elements (head, title, body etc.) for brevity. Provided you have your form handler script setup properly, in this case I called it formprocess.cfm in the example, the form will submit within the div.

Quick Code

<cfajaximport tags="cfform, cfdiv">
<cfdiv id="fomSub" name="formSub" bind="url:form.cfm">
</cfdiv></cfajaximport>

In the form.cfm file we would have the following:

Quick Code

<cfform action="formprocess.cfm" method="post&gt;
&lt;cfinput type=" text="" name="form1" id="form1" maxlength="45" size="20">
<cfinput type="submit" name="submit" id="submit" value="Submit">
</cfinput>
</cfform>

External Library?

With Coldfusion 8 and 9, there are a full host of tools that you can use to enahnce user interactions and interfaces in your web apps.  One of those is the built in AJAX features.  While you can program your own, or even use an external javascript libarary, Coldfusion has it’s own, and it is very simple to use, cross-browser friendly and can be implemented in short order.

While you follow the rest of the post, do keep in mind that using the Coldfusion solution present, it does load files from your Coldfusion installation libraries.  These javascript files are sent to the browser just as any other javascript file.  Also remember that this is just one tag in the Coldfusion AJAX library – there are many others that support asynchronous form postings and much more.

Using CFDIV

The first thing you will want to do is import the necessary tag to use the cfdiv layout control.  You can do this by including Quick Code

The second thing is to ensure you have a .cfm file with the content you are loading into the cfdiv.  Say for this example we will call it content.cfm.

In your page, you simple call the cfdiv like you would a normal div layout container, with one exception – the bind parameter which tells it which .cfm page to load. Keep in mind, if you need to pass in url parameters, that is fully supported, making it that much more dynamic.

Quick Code

<cfdiv id="myDiv" name="myDiv" bind="url:content.cfm">
</cfdiv>

Putting it together

To really make it work well, let’s show a sample page, complete with a simple javascript function that calls another Coldfusion ajax control, Coldfusion.navigate.  The Coldfusion.navigate function let’s us dynamically load the content into the cfdiv – so we could build a navigation menu and use that to dynamically load the content into our div.

Quick Code

<html>
<head>
<title>Test Coldfusion Divs</title>
<script>
function loadContent()
{
Coldfusion.navigate("content.cfm", "myDiv");
}
</script>
</head>
<body>
<ul><li><a href="javascript: loadContent();">Change Content</a></li></ul>
<cfdiv id="myDiv" name="myDiv" bind="url:somestartercontent.cfm">
</cfdiv>
</body>
</html>

Now, we have a basic page that will load somestartercontent.cfm when the page loads, and when the visitor clicks on the change content link, it will run the javascript function that calls the Coldfusion.navigate function.  This will load the content.cfm page into the myDiv div.  Note the Coldfusion.navigate function takes two parameters in this scenario – the page to load and the div to load it in.

What do Cowboys, Computers, the Web and Social Media all have in common?

They are joining forces to bring high-tech into the daily happenings of the Professional Bull Riders Built Ford Tough Series. Through the use of social media, the web and computers (and by computers I mean desktops, laptops, netbooks, smartphones and more) they are expanding their reach into new markets, new genres and opening up the sport to a much wider audience than ever before.

The 2009 season has seen quite a few changes at the PBR – from the main web site (http://www.pbrnow.com) getting a complete face lift early on, to the event information pages being completely redone to provide more information and better timed, to using social media, such as Facebook, Twitter and MySpace to not only communicate with fans, but provide more pertinent information even faster, the PBR has expanded its high-tech offerings to the world at large in the digital age.

You can follow @teampbr on Twitter to get behind the scenes photos in real-time from the events, including the currently happening PBR World Finals. They also provide some scores as they happen in real-time, along with photos of riders, bulls, opening ceremonies and more. They also run some trivia and other fun items during the events to engage followers even more. The same can be said for their MySpace and Facebook pages, with information going out faster and through more outlets than ever before.

One of the late offerings of 2009, which debuted two events prior to the PBR World Finals, was the addition of the Live Event Center. What the Live Event Center brings to the fans is a real-time, live updated ride-by-ride scoring system viewable in their web browser. Within seconds of a rider either riding a bull or bucking off, fans have the ability to see the rider score, buck-off-time if the rider bucked off and in all cases the bull’s score. The fans now have the ability to see the scores and other information at times they cannot watch it on television or the broadcast is delayed rather than live.

Additionally, one of the staff writers, Keith Ryan Cartwright, is “live blogging” – sending updates every few rides with information about the riders, their rides, the bulls, their bucks and behind the scenes text commentary with the riders, and others. This has been placed on to the live score page, so that visitors not only can see the scores, but then get a flight-by-flight “blog” update of all the action that gives some perspectives behind the scores. So now visitors to the PBR site can not only get live scores, flight-by-flight commentary, but they can follow the @teamPBR team and get some photos from in arena as well as other updates in regards to the rides, riders, bulls, bull fighters and more.

If that were not enough, for the debut of the 2009 PBR World Finals, visitors to http://www.pbrnow.com can click on the live photo page and get a very special treat. Andy and Matt from Bull Stock Media, the official photographers and stock provider to the PBR, are posting real-time live in-arena photos. These are in-your-face photos of the bulls, the riders, the rides – all the dirt, grime and hustle that makes the PBR THE Toughest Sport on Dirt. The photos are posted from the start of the show, including the rider introductions, the bull introductions, during the presenting of the American Flag, all the way through to the round winner circle, and eventually at the close of the 2009 World Finals World Champion ceremony.

Combine all of that with a mobile powered web site with the latest news and feature stories, http://mobull.pbrnow.com, blogs from some of the best in the businesses, including 9-time World Champion Ty Murray, and a complete online Audio podcast and Video archive located at http://pbr.tv – it is easy to see how the Toughest Sport on Dirt is fast becoming a high-tech sport – reaching new fans, new avenues and generating more content for viewers than ever before.

Late last week I was working on some new changes to PBR’s web site (my employer) and ran into a nasty snag of an issue. I was pulling data out of a table, and for an exceptionally strange reason, seemingly random HTML kept appearing in the source code. Needless to say, this HTML was breaking the layout I had been working towards and boggled not only my mind, but our SVP of IT’s mind as well.

In the end, we ended up changing the field type as it was held in the Microsoft SQL database. The field was originally set to be an ntext field, and we changed it to a varchar field, as it really had no purpose being an ntext field in the first place, but that’s another story. After we made the change, we did lose some data on the resulting trimming of the data field, however the parts that were trimmed were already migrated to another field, so big loss.

As soon as we changed this, the HTML injections ceased. What happened? I have put some sample code below to illustrate it.

What the code should have came out to be.

Quick Code

<div id="myDiv">
     <p class="indentClass">
          My content was coming out of the db here
     </p>
</div>

What the code actually came out to be before we changed the field type.
Quick Code

<div id="myDiv">
     <p class="indentClass">
          </p>
      <p>My content out of the db here</p>
      <p></p>
</div>

You can see that my opening paragraph tag was automatically closed, a new one started and closed after the database content was published, and an empty paragraph added at the end.

Now it is possible that the site, with the many thousands of pages and hundreds of thousands of lines of code specified this in a CFC or CFTAG file – in other words it was tied to the field name/type to force the HTML output, but I could not find it anywhere.

Any thoughts or experience you may have on this? Share them in the comments.

I work for the Professional Bull Riders, Inc. in the capacity of Web Developer (Visit the PBR Online. Recently we have been looking at making changes to the site, adding more content pages, restructuring the layout on some of the internal pages to be more modern looking and reviewing search engine optimization and marketing.

All of this is necessary for growth, sustained visitors, enhancements and general creating forward motion on any given web site, especially for one that is in the top tier of sports entertainment. The issue happens, as it has happened at countless other enterprises, the code base is getting older, has been touched by many programmers over the years and is nearing point of needing to be completely rewrote to be modernized. That happens. No question.

The discussion here is, does clean, well commented code help sustainability in an application, including a web application? Short answer is yes. Does valid HTML markup do the same? Again, the short answer is yes. If the code base that exists is written using proper and valid HTML/XHTML markup, and is commented properly or document properly to give other developers a decent idea of the logic behind any given subset of functions, routines and other logic to understand what was being done and why. It also helps for the same developer when he/she needs to go back and make changes on code that may have been written months, even years prior.

As we move forward at my place of employment, we are looking at various platforms, ideas and methodologies to create a platform that is extensible, pliable and can be built upon in the future. This platform, as it will become, will be something that can be built upon to create the best possible presence, as any enterprise should have a goal of accomplishing.

So does clean code and markup matter? Yes it does, and if your enterprise, business, or site is lacking in that area, shouldn’t it be about time to correct that situation?

.Net Code Snippet

I took on a position of web developer and have now setup 2 Linux servers, coded a C# .Net app from the ground up and am looking at major site updates using Coldfusion. While entertaining, fun and challenging, it has meant a bit longer days at work than I had anticipated – however I am NOT complaining in the least amount. I have a full time job and am paying bills and getting caught up on things. That’s always good!

The past week and a half has brought more changes – I was told we are going to look at revamping the entire site and work and will be doing it in VB.Net, so more learning, which is one of the things I love most about IT and web development – the constant learning, expanding and maintenance of knowledge. With that, we are looking at making it easier to get content out, expanding on and integrating more with social media and getting an infrastructure in place that will allow forward motion, expansion and easier maintenance. This also means a more enhanced visitor and site user experience, which is always something that is highly important.

The other thing of note, is that I will try my best as I go through Coldfusion and .Net programming to get some tutorials, how-to’s and other related posts up on those subjects. I will be learning quite rapidly and am sure to have some struggles to fight through, and those are the items I would like to post about.

1. Adjusting Case Sensitivity – You can use the following code to take any string and perform an initial caps on it. The outer function ucfirst performs the first letter capitalization, while the strtolower will automatically convert the entire string to lower case first. This allow any string with mixed case to be converted to initial caps on the first word.

Quick Code

<?php
$myString = "HellO TheRE";
echo ucfirst(strtolower($value));
?>

2. More Case Sensitivity – instead of using just ucfirst, why not take a look at ucwords. This nifty little built-in PHP function will take and perform an initial cap on every word of a given string. Again, we would probably want to run the string through strtolower to ensure only the initial caps was performed. This may cause issues, however, if you are converting strings that contain acronyms or other words that are generally in all caps.

Quick Code

<?php
$myString = "cool PHP";
echo ucfirst($myString);
?>

The output will be: Cool PHP

However using it this way, you can see how it would change the output:
Quick Code

<?php
$myString = "cool PHP";
echo ucfirst(strtolower($myString));
?>

The out of that last one will become Cool Php.

3. File Uploads – When you allow file uploads, say for web site owners to upload images, it is best to check to see if the file exists first and if so remove the old version first. In this short example a filename is being dynamically built, but that is another discussion in another post.

   First, we build our file name – the second thing we do, since we are renaming and files to a standard naming convention is to check to see if the file exists. In this case we used a unique ID, an underscore and the image file name being passed into this function. You can use what ever you need to name your files. Second, the if statement checks for the existence of the file, and if true it deletes it using the PHP unlink function, then copies the new file over and finally reports any errors. If the file does not exist, the function simply moves to the else block and copies the new file.

Quick Code

$fileName = "images/".$id."_".$image;
    if(file_exists($fileName))
    {
      unlink($fileName);
      $copied = move_uploaded_file($_FILES['form_element_name]['tmp_name'], $fileName);
      if(!copied) 
      {
        echo "upload failed for image ".$fileName." or you didn't upload that file <br />";  
      }
    }
    else
    {
      $copied = move_uploaded_file($_FILES['form_element_name']['tmp_name'], $fileName);
      if(!copied) 
      {
        echo "upload failed for image ".$fileName." or you didn't upload that file <br />";  
      }
    }

]]> http://www.southplattewebdesign.com/2009/04/16/three-simple-yet-effective-php-tips-and-tricks/feed/ 0 http://www.southplattewebdesign.com/2009/04/11/new-theme-launched/ http://www.southplattewebdesign.com/2009/04/11/new-theme-launched/#comments Sat, 11 Apr 2009 19:12:57 +0000 Billy http://www.southplattewebdesign.com/?p=482 Just put up a new theme on the blog. It’s my first customization attempt at a Wordpress theme. Let me know what you think! I tried to keep it clean and simple, much better readability I think than the old black background with white text theme I had.

I do still have some items to change and tweak up, but that’s okay. I had to publish it at this point, or else it probably never would get done – at least only having a few tweaks left will motivate me to get them done since it is now live.

]]> http://www.southplattewebdesign.com/2009/04/11/new-theme-launched/feed/ 0