Tuesday, October 25, 2011

JavaScript Business Rules

In my last two entries, I created the front end interface for a login screen, and wrote a couple of simple business rules in a PHP script to ensure both username and password fields are filled before running a query on the database. The time has now come to write the query and check it against the field entries.

Reading tutorials on the topic, I am first fascinated by the level of paranoia and then I become paranoid myself. So instead of getting on with writing a query, I add another business rule prohibiting usernames or passwords over eight characters. Eight is the length of the fields in the database, so it is as silly for users to enter 9 characters as no characters, so I might as well stop them doing it. It won't stop every SQL injection exploit, but it will preclude them from attempting to write essays.

I'm looking at a couple of tutorials for inspiration. They both use different SQL injection protection code. One uses the ereg() function, which is apparently being phased out, so I won't use that. The other takes the user to another page on login, which won't work with my business rules code.

I have to say I am not sure why I wrote the business rules into a PHP script. If I used Java Script for the business rules, I could take the user to a new page on successful login, and I could completely avoid unnecessary calls on the server itself, as well as on the database. But it will require a complete rethink.

To start fiddling, I change the login page back to an HTML file and remove all PHP. I then replace the PHP scripted error messages with division placed in the same place. The first is as follows:

<div id=ubercell1 class=warning></div><br/>

In the CSS file the class warning takes the color red. I then reduce the form tag down from:

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">

to:

<form>

And the button is changed from:

<input type="submit" name="login" value="Log in to Portal" class=itext />

to:

<input type="button" value="Log in to Portal" class=itext onclick="busrules(this.form)" />

And of course the PHP code is replaced by the JavaScript function busrules(form). I spent some time fiddling with the JavaScript, because I don't know it very well. The essential logic is that any one or more of four possible errors will generate a warning and preclude the call to the database. When an error is corrected the warning message must be cleared, but where there is no warning (i.e. if the user gets it right first time) nothing needs to happen. And in this test page, if everything is OK, an alert message says everything is OK.

The rest of the page code remained the same, and the page looked the same, but without needing a call back to the server, the error messages came up a lot quicker than they did using PHP. The full JavaScript was:

<script type="text/javascript">
function busrules(form)
{
var subname = form.username.value;
var subpass = form.password.value;
var showmessn;
var showmessp;
var ubercell1v = document.getElementById("ubercell1").innerHTML;
var ubercell2v = document.getElementById("ubercell2").innerHTML;
if (ubercell1v.length > 0)
{
document.getElementById("ubercell1").innerHTML="";
} //end of null check
if (ubercell2v.length > 0)
{
document.getElementById("ubercell2").innerHTML="";
} //end of null check
if (subname.length > 8 || subname.length ==0 || subpass.length ==0 || subpass.length ==0)
{
if (subname.length > 8)
{
showmessn = "Your user name is too long. Please use 8 characters.";
document.getElementById("ubercell1").innerHTML=showmessn;
} //end of condition 1
if (subname.length ==0)
{
showmessn = "Oh Dear! You have not entered your user name.";
document.getElementById("ubercell1").innerHTML=showmessn;
} //end of condition 2
if (subpass.length > 8)
{
showmessp = "Your user password is too long. Please use 8 characters.";
document.getElementById("ubercell2").innerHTML=showmessp;
} //end of condition 3
if (subpass.length ==0)
{
showmessp = "Oh Dear! You have not entered your user password.";
document.getElementById("ubercell2").innerHTML=showmessp;
} //end of condition 4
} else {
alert ("Well Done. Your username and password were correctly entered.");
} //end of master conditional statement
} //end of function
</script>

No comments: