Add User to Database
The layout was almost identical to the login screen, except for what I call combo boxes for the age of the student users, and to comply with convention, a password confirmation field. But for that convention, the business rules could have been cut and pasted verbatim from the login page, and that would have made the job nice and easy.
Identification of users is not mission critical for me, and if teachers can't record and type in accurately a password on the first attempt, my first instinct was to say "who cares?". But part of the point of this exercise is to make my web site/application look "professional", so I put in the second field.
The login rules comprised four independent conditions nested within a super condition, triggered by any of the four being met, the alternative (or else) to which was the calling of the database query code. So where to put the fifth condition, the inequality of the passwords?
The nest of four are together because they are not mutually exclusive. Most often the user will click the button with nothing in either field, and you want a message to appear over both fields. Or the name might be too long, and the password field empty.
Technically the fifth condition might overlap with one or more of the other four. For example the password fields may be unequal and too long. But if they are too long, and they are told to make them equal first, they will be annoyed if they are told to shorten them after they have made them equal. I guess if I had enough space for messages I could tell them both, but I don't. So in my business rules they have to get the length right (between 1 and eight characters) first, and then make the passwords match. The rules are as follows:
function busrules(form)
{
var subtype = form.usertype.value;
var subname = form.username.value;
var subpass = form.password.value;
var subpassc = form.passwordc.value;
var subagey = form.ageyears.value;
var subagem = form.agemonths.value;
var showmessn;
var showmessp;
var ubercell1v = document.getElementById("ubercell1").innerHTML;
var ubercell2v = document.getElementById("ubercell2").innerHTML;
var myarg;
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 a 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 a user password.";
document.getElementById("ubercell2").innerHTML=showmessp;
} //end of condition 4
} //end of group of 4 conditions
else if (subpass != subpassc)
{
showmessp = "Oh Dear! You need to enter the same password in both password fields.";
document.getElementById("ubercell2").innerHTML=showmessp;
} //end of condition 5
Then if all those rules are satisfied, the PHP script for the data connection is called:
else { //Code below is to set up parameters for the php script
if (window.XMLHttpRequest) //format and create request variable according to browser type
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} //end of current option
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} // end of old option
xmlhttp.onreadystatechange=function()
{ // this code displays response text
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("untencell1").innerHTML=xmlhttp.responseText;
}
} //the code below calls the php script on the server
myarg = "('"+subname+"','"+subpass+"','"+subtype+"',"+subagey+","+subagem+")"
xmlhttp.open("POST","adduser.php?myarg="+myarg,true);
xmlhttp.send();
} //end of master conditional statement
} //end of function
I took the opportunity to tidy up the layout a bit. The "row" divisions I had set up (following the structure of a table) seemed a bit redundant, so I lost them, and I defined the warning divisions more concisely, to stop the form jumping about, when the warnings come up. And I made everything a bit wider:
.inputtable {margin:50; background-color:#BDEDFF}
.row {width:520;}
.col1 {text-align:right; float:left; width:300; height:25; margin:0 5 0 5;}
.col2 {text-align:left; float:right; width:200; margin:0 5 0 5;}
.itext {width:150;}
.cbox {width:150; margin-left:5;}
.warning {color="red";margin-bottom:0;margin-top:0;float:left; width:520; }
The PHP script was similar in structure to the login script, but differed in important details (such as running an INSERT command rather than a SELECT query):
<?php
include('newinfo.php');// collect database variables.
$myarg = $_GET['myarg']; // collect passed variable
// To protect MySQL injection
$myarg = stripslashes($myarg);
// Connect to server and select database.
$con = mysql_connect( $dbhost, $dbuser, $dbpass );
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db($dbname, $con);
$query = "INSERT INTO $table1 (Softid, PartPass, PartType, AgeYears, AgeMonths) VALUES ";
$query = $query . $myarg;
$result = mysql_query($query) or die(mysql_error() . $query );
if($result==1){
echo"<p>Hooray you have added a user</p>";
} else {
echo"<p>Oh Dear! Something went wrong. Query: <br/>$query </p>";
}
mysql_close($con);
?>
If the password were unequal, but everything else correct, the screen looked as shown below:
And after successfully adding a user is looked as shown below:
Comments