Sunday, September 4, 2011

ColdFusion HTTP

ColdFusion HTTP (cfhttp)

Using the ColdFusion cfhttp tag, you can grab someone elses web page and present it or parts of it on your own site. I won't go into the copyright implications of this, but, assuming the third party agrees, this can be a really cool feature.
To grab a remote web page, you first use the cfhttp tag to do an HTTP call. Once it's done the HTTP call, the contents of the web page is stored in a variable called cfhttp.filecontent. Since it's stored as a string, you can manipulate it just as you could with any other string. This enables you to display only part of the website if you wish. For example, you could present news, weather, stock prices etc from a third party source.

A cfhttp Example

In this example, we peform an HTTP call against a third party website. We then display the website by outputting the variable that it's code is stored in.
<cfhttp url="http://www.code-generator.net/myspace/myspace-text-generator.cfm">
<cfoutput>
  #cfhttp.filecontent#
</cfoutput>
The above code would result in the third party web page being displayed within our own web page.

Grabbing Part of a Web Page

As cool as the above example is, there's probably not much value in doing this. If you really wanted the above result you could just have easily used frames or inline frames.
In reality, you might only want to display part of the web page on your page. For example, the above website includes a header, left navbar, footer etc. What if you only wanted the middle bit (the code generator)?
You can use ColdFusion's built in string functions to manipulate the contents of the cfhttp.filecontent variable. This way, you could eliminate all unnecessary code from the variable and only display the bit that you want.

Viewing the Source Code

The reason you can do this is because, the contents of the cfhttp.filecontent variable is actually the source code of the remote page. When we view it in a browser, the browser renders the source code, but the contents of the variable is still just a string of source code.
For example, if I use ColdFusion's htmlCodeFormat(), trim() and left() functions, I can view the top 250 lines (or as many as I like) of the source code.
Coding this:
<cfhttp url="http://www.code-generator.net/myspace/myspace-text-generator.cfm">
<cfoutput>
  #htmlCodeFormat(left(trim(cfhttp.filecontent), 250))#
</cfoutput>
Results in this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script>
window.google_analytics_uacct = "UA-269964-3"
</script>

<t

A More Useful Example

The following example uses ColdFusion's FindNoCase,RemoveChars and Len functions to display only the part of the web page that we want to display - the HTML text generator.
Fortunately, the remote site has two HTML comment tags (<!-- Start Syndication --> and <!-- End Syndication -->) that indicate the start and end of the HTML text generator. We can use these tags to pick out everything in between them.
Coding this:
<cfhttp url="http://www.code-generator.net/myspace/myspace-text-generator.cfm">
<cfset sStartString = cfhttp.filecontent>
<cfset sStartTag = FindNoCase("<!-- Start Syndication -->", sStartString)>
<cfset sTempString = RemoveChars(sStartString,1, sStartTag-1)>
<cfset sEndTag = FindNoCase("<!-- End Syndication -->", sTempString)>
<cfset sFinalString = RemoveChars(sTempString,sEndTag+24,len(sTempString))>
<cfoutput>
   #sFinalString#
</cfoutput>
Results in this:
Use this MySpace text generator to change the look of the text on your myspace profile layout. Simply choose the values you need, click "Generate MySpace Code" (or "Generate MySpace Code and Preview"), then copy and paste into your profile page.
Text:
Font Family:
Font Size:
Text Style & Weight: Italic Bold
Text Decoration:
Text Transform:
Font Variant: Small Caps
Letter Spacing: pixels
Line Height: pixels
Text Indent:
(indents the first line)
pixels
Text Alignment:
Text color: Choose Color   [More Colors...]
Background Color: Choose Color   [More Colors...]

 OR 

No comments:

Post a Comment