Tutorials

I came across this problem recently on a new Windows 2008 / IIS 7 server using classic ASP.

We have a client website that uses sessions for authentication but if you authenticated and then switched from http to https or vice versa the session seemed to drop. continue

Recently we took over the management of a clients website. Somehow, somewhere along the way multiple line breaks had found their way into the html on the pages.

There seemed to be an extra one after every line of code. An easy way to fix this is to hit Ctrl F in DW to bring up the “find” box. continue

This one’s for all you Wordpressers out there. I came across this problem recently and thought I’d share the solution.

For a few days, in my Wordpress installation, when I clicked on the “one click upgrade” link on the plugins page to upgrade plugins, I was getting the following error message:

Fatal error: Cannot redeclare class pclzip…

I found that if you have the Wordpress Automatic Upgrade plugin installed, and it’s less than version 1.0, you will get that message.

Simply upgrade your Wordpress Automatic Upgrade plugin to the latest version and the problem will go away.

High Performance MySQL: Optimization, Backups, Replication, and More

Overall Rating:

Retail Price: £38.50

Amazon Price: £20.09

If you work with MySQL and PHPMyAdmin regularlly, you will have no doubt seen the import feature in PHPMyAdmin. Basically this feature allows you to import a MySQL dump file straight into your database, similar to restoring a backup etc.

There is a limit set by PHPMyAdmin of 2Mb though, so you can’t import files over that size. You can however “Zip” the dump file up because it can handle zip and gzip files. Here was my problem though. I have a database that I wanted to import nearly 100k rows of data into. As you can imagine, the uncompressed dump file was way over 2Mb, so I zipped it up and tried the import.

For some reason I could not get PHPMyAdmin to import this zipped file. It kept on showing a blank screen after starting the import, and no records ever got imported.

After a bit if head scratching and searching I came across a text file splitter program. This program takes a text file and splits it into however many files you want. So all I needed to do was install this program and split my dump file into files below the 2Mb limit!

I split my file into 4 files and imported them straight into MySQL one after the other. You can download this freeware program from here.

Sams Teach Yourself ASP.NET 3.5 in 24 Hours

Overall Rating:

Retail Price: £24.99

Amazon Price: £13.19

Sometimes we need a quick, reliable way to be able to strip certain HTML tags from a string. The Regular Expression engine (RegExp) built into ASP is ideal for this purpose.

Real World Example

We were building a newsletter system into our FindLocalVehicles.co.uk website. The website has daily motoring news as well as the vehicles for sale listings. We wanted to be able to include the latest featured article from the website in the weekly newsletter.

Now, there are sometimes images posted in these news articles, and if we included the images in our newsletter contents, they would be too big and “break” the layout.

The simplest option for this problem is to use RegExp to strip out the images from the articles before including them into the newsletter.

Here’s how you do it:

Setup a function to call

Function stripTags(HTMLstring)

Set RegularExpressionObject = New RegExp

With RegularExpressionObject
‘.Pattern = “<[^>]+>” use for all html tags
.Pattern = “]+>” ‘use for images
.IgnoreCase = True
.Global = True
End With

stripTags = RegularExpressionObject.Replace(HTMLstring, “”)
Set RegularExpressionObject = nothing

End Function

Call it from the ASP page

stripTags(“string”)

In the above example, if you wanted to strip out all HTML tags and not just the img tags, un-comment out the ‘.Pattern = “<[^>]+>” use for all html tags bit and comment out the line below it.

If your website or blog runs on Wordpress or any other popular blog platform, then you probably already have the built-in ability to “ping” services such as Pingomatic and Google Blog Search. However, if like me you have developed a website or application from scratch using a custom platform, then you will need to build in the ability to send ping updates to these services.

Most of my developing is done in Classic ASP. I am learning php and .Net, but my background is ASP VbScript. One of the problems I came across with this new website that I mentioned is because it is custom, there was no “built-in” ping function….until now that is!

Overview

The website in question is FindLocalVehicles.co.uk. It allows people to list their vehicles (cars, boats, bikes etc) for sale. I have built in a “Motoring News” section that gets daily news posted, but I wanted to be able to notify the blog search websites when my website was updated. This is called “pinging”. A manual way is to browse to pingomatic.com, fill in the form and submit it, but I wanted an automatic solution.

After searching and testing, I have come up with the following.

This is how I wanted the process to work:

1. Login to the admin section
2. Post a new news story
3. Automatically ping pingomatic with the details

So, here’s how we would go about it.

After the new post is submitted to the database, at the bottom of that page I added this function:

function SendPing(byval strBlogName, byval strBlogUrl, byval strPageUrl, byval strFeedUrl)

‘ build ping XMLRPC call
strData = “<?xml version=”"1.0″”?>”
strData = strData & “<methodCall>”
strData = strData & “<methodName>weblogUpdates.extendedPing</methodName>”
strData = strData & “<params>”
strData = strData & “<param>”
strData = strData & “<value>” & strBlogName & “</value>”
strData = strData & “</param>”
strData = strData & “<param>”
strData = strData & “<value>” & strBlogUrl & “</value>”
strData = strData & “</param>”
strData = strData & “<param>”
strData = strData & “<value>” & strPageUrl & “</value>”
strData = strData & “</param>”
strData = strData & “<param>”
strData = strData & “<value>” & strFeedUrl & “</value>”
strData = strData & “</param>”
strData = strData & “</params>”
strData = strData & “</methodCall>”

‘ post to Pingomatic XMLRPC ping URL
set objHttp = Server.CreateObject(“MSXML2.ServerXMLHTTP”)
objHttp.open “POST”, “http://rpc.pingomatic.com/”, false
objHttp.setRequestHeader “Content-Type”, “text/xml”
objHttp.setRequestHeader “Content-Length”, len(strData)
objHttp.Send strData

‘ check response
if (objHttp.status = 200) then
strReturn = objHttp.responseText
end if

‘ release object
set objHttp = nothing

‘ passback
SendPing = strReturn

end function

strData = SendPing(“The Title Of Your Website”, “The URL of your website”, “The URL of the new article”, “The URL of your RSS feed”)

Replace the bits in quotes on the line above with your website details

After that I redirect to a page and append the strData variable to the URL so I can display the returned message. If the ping is successful it says “Sent ping to 16 services”. If unsuccessful it tells you an error message.

Have fun!

I get a lot of search queries of this nature with people seemingly trying to find out how you create a tiled background for your website.

I covered creating a tiled diagonal background in another post, but this one is even easier.

Take a look at the Squid Fingers website. At the time of writing, they have 158 different patterns you can choose from to tile on your website. There are lots of websites available to get free background images.

Find the one you want to use, download it and upload it to your webserver. Then in your CSS file, add the following to the “body” section:

background-image: url(“../images/your-chosen-pattern.gif”)

Voila!

When you browse to your website, the above image will be “tiled” on the background. It’s not as complicated as people may think. The hardest bit when creating the image yourself is getting it to seamlessly tile!

Moving on from my previous tutorial on how to create the diagonal stripe background, Fabio posted an excellent website that does all the hard work for you. All you need to do is move a few sliders to set colours, stripe width and shadow etc and click on a download link!

Here’s a screen-shot of this excellent widget in use:

StripeGenerator.com

Here’s what the sliders do:

1. Stripe size (thick or thin)
2. Spacing between the stripes
3. Stripe colour
4. Background style. You can put a gradient background behind the stripes
5. Background gradient height
6. Background colours
7. Stripe orientation

Overall a very nice widget for easily creating stripes for use in your designs. Well done guys.

Using Ajax has become very popular over the last year or so and this tutorial list is an excellent place to start learning about Ajax and its uses.

The list includes examples such as:

• Star ratings (for articles etc)
• Contact forms
• Tabbed content
• Drag-able boxes
• Instant Messaging client
• Plus many more

I especially like the tabbed content one and I have implemented this into my latest project.

Using Ajax is great for improving the user experience but be careful not to over do it! Used with common sense, Ajax can give your website that little something extra.

In this day and age of standards based design and web accessibility guidelines etc, it’s always a nice thing to get your websites to validate. Depending on which doc type you choose depends on how much work you have to do to get your site to validate.

One thing I have had to do recently was to get rid of an “onclick” Javascript event because it was the only thing stopping my website from validating. As this event was on every page of the website, I decided that I would look into an unobtrusive way to get round this problem.

I’ll say from the start that I am no Javascript expert so I came into a few problems. A great guy that helped me out was Jonathan Snook. I’ve had dealings with him in the past and I know him to be a bit of a Javascript guru so he was my first contact. Luckily for me he emailed me back with a pretty simple and great solution, so I will share it with you.

First, let me show you the website in question. Actually it was my main company website over at BPSDesigns. I have just finished a re-design of the site and incorporated a client “back end” so that my clients can log in and view their project progress, quotes and invoices etc. As you will see, there is a “Client Login” tab in the top right of the browser. This is where the onclick event was to drop down the client login form.

Basically you need some Javascript in your page to use the DOM to add the event to the “Client Login” image.

Here it is:

<script type=”text/javascript”>
window.onload = function()
{ /* we have to wait until the DOM has loaded before we can hook into it. */
var login = document.getElementById(‘loginform’);
login.onclick = function()
{ /* lets do our thing when a user clicks on the Login title */
var target = document.getElementById(‘login’);
target.style.display = target.style.display == ‘none’ ? ‘block’:'none’;
}
}
</script>

Explanation

The script is run when the page is fully loaded, then we hook into the DOM and get the id called “loginform” and attach our onclick event to it. Now we have an onclick event on the “Login” text inside the “loginform” div. Each time the “Login” text is clicked it toggles the layer on and off (or show and hide).
Note: if you want your mouse pointer to be a “hand” you will have to set that in your CSS because the mouse pointer will be the “pointer” otherwise. ie #loginform {cursor:pointer}

So your HTML will look something like this (simplified version)

<div id=”loginform”>Login</div>

<div id=”login” style=”display:none”>
Your login form goes here
</div>

And that’s it!

Thanks again Jon for your help on this one, I owe you one!