PHP Info for the Personal Status Board (PSB™)

PHP Info for the Standard Personal Status Board (PSB™)

The Standard Personal Status Board (PSB™), which is mostly a PHP file called test-db-WORKS-GOOD.php, requires some cool PHP and JavaScript routines

Let's start with JavaScript functions and arrays:

<html><head>
<script language="javascript">
var sub_title=new Array("Alone","Nurturing","P.E.T. or Other Authoritative Parenting Activity","Talk or Play","Coordinate MC Activities","Coordinate Outside Activities","I Am Out","Want Ride","Study or Projects","Custom Codes or Mobile");
var member=-1;Status="";Comment="";
var memstatus=new Array();
var fname=new Array();

mactest=(navigator.userAgent.indexOf("Mac")!=-1) //My browser sniffers
is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1
Netscape=(navigator.appName.indexOf("Netscape") != -1)
msafari=(navigator.userAgent.indexOf("Safari")!= -1)
wsafari=0; if(!mactest&&msafari){wsafari=1;msafari=0}
is_opera = 0; if(window.opera){is_opera=1}
is_ie_mac = 0; is_ie=0;if(document.all){is_ie=1}
if(is_ie&&mactest){is_ie_mac=1}

function newstatus(){
  document.PSBform.status.value=memstatus[member];
  document.PSBform.ID.value=member+1;//IDs start at 1; arrays start at 0
  document.getElementById('newstatus').innerHTML = fname[member]+" ";}

function validate(){
  if(member<0){alert("Please click a 'Change Status' button first.");return false}
  d=document.PSBform;
  Status=d.status.value;
  if (Status.length!=2 || isNaN(Status)) {alert("Please input any two digits for the personal status code.");return false}

  Comment=d.comment.value;
  Comment=Comment.replace(/'/g,";");
  Comment=Comment.replace(/--/g," -");
  Comment=Comment.replace(/--/g," -");
  Comment=Comment.replace(/[@#$%\^&\*\+\|\\=\{\}\[\]:"'\/><]/g," ");
  d.comment.value=Comment;
  return true;}

function validatepassword(){

  var ck_password = /^[A-Za-z0-9!@#$%^&*()_]{4,20}$/;
  if (document.formpw.txtPassword.value.search(ck_password)==-1)
  {alert("Please only enter letters, numbers and these for password: !@#$%^&*()_");return false}

  var ck_username = /^[A-Za-z0-9_]{1,20}$/;
  if (document.formpw.txtUsername.value.search(ck_username)==-1)
  {alert("Please only enter letters, numbers and underline for user name.");return false}

  return true;}

</script>

<script src="psb.js" language="javascript"></script>

The sub_title array gives needed data—subtitles that are used in the status code meanings table. Except for the psb meanings array gotten from the psb.js file, most other data comes from the MySQL db this page reads and displays.

The browser sniffers are obvious—note that even Chrome is included. The PSB™ page works on all major Windows and Mac browsers.

There are Change Status buttons next to each member's comment. The newstatus() function gets the member number when a button is clicked, and uses it to update the input box status and member's first name, next to that input box. The validate() function makes sure the new status code input is a 2-digit numeric number ranging from 00 to 99, then it uses a regular expression to throw out all weird characters like @#$%^&*()+={[}]:"<>'?|\ from the comment input and replaces them with spaces. It replaces ' with ; so don't looks like don;t, but this helps prevent hacker attacks like MySQL injections. Another very dangerous entity is 2 hyphens in a row. This got replaced twice with one space character and one hyphen. Why twice? Because an odd number of hyphens could still let "--" leak through. The function called validatepassword() makes sure the password has no unacceptable characters like " or ' or < or > or -- or + or =, but many other weird characters are OK. Then it makes sure only letters, numbers or underline are in the user name. The routine keeps asking for these inputs until acceptable entries happen, whereas with the comment inputting, unacceptable characters are simply replaced with safer alternatives without warning.

Below, we wrap the entire web page in a container with CSS styles: width:1024px;text-align:left;position:absolute;top:0px;left:50%; and margin-left:-502px. This has little effect on a 1024-pixel-wide screen, but on all wider screens, it centers the page content in the center in this 1024-wide div. The left:50% tries to stick the left edge of the div in the center of the screen, but then the margin-left:-502px takes half the width of the container div and brings the left edge of the div leftward by that much, which exactly centers the div. Well, we had to account for the width of the scrollbar by have margin-left: be 10 less than half the container div width.

The psb.js file is loaded into the browser with an array of all 100 meanings for the 100 possible status codes.

</head>
<body>

<div id='container'>

<div id='logo'><IMG SRC="PSB_.jpg" WIDTH=118 HEIGHT=47 BORDER=0></div>

<?php
$Entry=$_POST['entry'];
$FLAG=$_POST['flag'];
$U=$_POST['txtUsername'];
$P=$_POST['txtPassword'];
$UP=$U."+".$P;

Note: user names and password pairs are stored together in one long string with a + for the separator.

$o = array("your_user_name1+your_password1","your_user_name2+your_password2",
"your_user_name3+your_password3","your_user_name4+your_password4",
"your_user_name5+your_password5","your_user_name6+your_password6",
"your_user_name7+your_password7","your_user_name8+your_password8",
"your_user_name9+your_password9","your_user_name10+your_password10");

if ((!in_array($UP, $o))&&($FLAG==0)&&($Entry==1))
{echo '<script language="javascript">alert("Username/password pair is invalid. Please try again.")
</script>;';}

if ((!in_array($UP, $o))&&($FLAG==0)) { ?>

<h1>Personal Status Board (PSB™)</h1>

<div id='pw' style='position:absolute;top:410px;left:200px;width:300px'>
<table style="background-color:#8aa;border-color:#00f" border='6' cellspacing=0 cellpadding=6><tr><td>
<form id='formpw' name="formpw" method="post" action="test-db-WORKS-GOOD.php" onsubmit="return validatepassword()">
<label for="User Name"><b>User Name: </b><input type="text" name="txtUsername" size="20" maxlength="20" value=""></label>
<label for="Password"><b>Password:    </b><input type="password" name="txtPassword" size="20" maxlength="20" value=""></label>
<input type="hidden" name="flag" value="0">
<input type="hidden" name="entry" value="1">
<input type="submit" value="Submit">
<input type="reset" value="Reset"></form></td></tr></table>
</div>
<?php
} else {$FLAG=1;$Entry=0;
?>

Finishing up the head section, we encounter a PHP tag then POST some values into some PHP strings. The $Entry flag set to 1 indicates the login form was filled with data (the value 1 is submitted from a hidden field with the name "entry"). The login submit button sends this page to itself to evaluate the login values—checking them against the correct ones. The variables $U and $P get the username and password entries from the form POSTed to them, and then a + sign is concatenated between them and this is compared to the correct values pairs in the $o array. The PSB™ webmaster will have input the data in the host control panel's MySQL database and also entered the passwords and user names into the control panel. This same webmaster will have entered the correct MySQL db name, MySQL db table name, and username and password in both the update.php file and the above test-db-WORKS-GOOD.php file. The webmaster will have also replaced the generic username/password pairs above with ones that match what he entered into the control panel, not forgetting the + sign separator.

The in_array() function is a PHP function that searches an array for a specific value. This function returns TRUE if the value is found in the array, or FALSE otherwise. So, if (!in_array($UP, $o)) is saying "if the inputted password pair $UP is not (! = not) found in any of the $o array elements, then . . .

The $FLAG flag if set to 0 means the page refreshed because it sent itself login attempt data, and if set to 1 means the page refreshed because it sent was sent a signal that status code and comment was updated by the update.php page, so no login is needed—the PSB™ was simply updated. The value 0 is submitted from a hidden field with the name "flag" when the login happens since one must login before updating the PSB™.

if ((!in_array($UP, $o))&&($FLAG==0)&&($Entry==1))
{echo '<script language="javascript">alert("Username/password pair is invalid. Please try again.")</script>;';}
means that if they blew the login after trying it, they get an "invalid" message. Note the JavaScript statement in the middle of a PHP echo.

if ((!in_array($UP, $o))&&($FLAG==0)) { ?>
means that if they never updated the db or entered array values or logged in, it's time to login. Note the "end of PHP" tag that shows that the entire subsequent HTML login script can now be run as the PHP "if" statement's "then" clause. These languages sure don't seem to mind mixing it up!

<?php
} else {$FLAG=1;$Entry=0;
?>
This is the "else" clause for the above PHP "if" statement, and it follows the HTML login form. Note that PHP has to be re-declared just to say else and reset a couple of flags. The else turns out to be the whole rest of the page—mostly JavaScript document.write statements! Like we've said, mixing it up doesn't upset these languages at all. So what's at the very bottom of the page? The PHP clause closing bracket, all alone. Cool stuff!

<?php
}
?>

action="test-db-WORKS-GOOD.php"
It wouldn't surprise me to see a PHP file run as the form submission action of an HTML form—this is common. But the action here is a PHP command to reload the current page. Hell—why not! I would have used $_SERVER['PHP_SELF'], but it's not safe.

Now, let's get data from the db:

<div id='s' style='position:absolute;top:53px;left:2px'>
<?php
// Make a MySQL Connection
mysql_connect("localhost", "your_user_name", "your_password") or die(mysql_error());
mysql_select_db("name_of_db") or die(mysql_error());

// Retrieve all data from the "name_of_db_table" table as a MySQL Resource
$result = mysql_query("SELECT * FROM name_of_db_table") or die(mysql_error());

echo "<table border='1' width='578'>";
echo "<tr><th width='116'>Name</th><th width='25'>ID</th><th width='25'>Status</th><th width='412'>Comment</th></tr>";
// keeps getting the next row until there are no more to get
while($row = mysql_fetch_array($result)) { // Print out contents of each row
echo "<tr><td>";
echo $row['Firstname'];
echo "</td><td>";
echo $row['ID'];
echo "</td><td>";
echo $row['Status'];
echo "</td><td>";
echo $row['Comment'];
echo "</td></tr>";

}
echo "</table>";
echo "<br />";

We connect to the host server, select a db, get all the data from a specific table in the db (there can be many), and print it out in an HTML table. Standard stuff.

$number=mysql_num_rows($result);

$myArray=array();

$res = mysql_query("SELECT Firstname FROM name_of_db_table") or die(mysql_error());
while ($row = mysql_fetch_row($res)) {
array_push ($myArray, $row[0]);
}

$myArray2=array();

$res = mysql_query("SELECT Status FROM name_of_db_table") or die(mysql_error());
while ($row = mysql_fetch_row($res)) {
array_push ($myArray2, $row[0]);
}

mysql_close();

?>

</div>

We grab the number of rows from a MySQL function, then define a couple of arrays to dump rows of data into as arrays. For this, we use "while" loops to dump the Firstname and Status rows into waiting PHP arrays. The PHP array_push function is available for this.

Now we encode the PHP arrays into JavaScript arrays using JSON, or JavaScript Object Notation, which is available by default in PHP V5.2 and up, unless the host has them turned off, in which case you need to ask him nicely to turn them on. You don't have to do anything to have this available in your code—it's part of PHP now. You can see how trivial the encoding function is. The JavaScript arrays were both previously declared in the above code, at the start of this tutorial. The $number variable converted to JavaScript without JSON help, since the conversion method shown above works on small numbers, but NOT on strings or arrays, and if the number has over 16 digits in it, the number will get rounded off.

a='82px';b='25px';h='25px';n=622;if(is_ie_mac){a='82px';b='23px';h='23px';n=772;}
if(Netscape&&!mactest){a='83px';b='26px';h='25px';};
if(Netscape&&mactest){a='78px';b='22px';h='22px';n=722;};
if(msafari){a='77px';b='21px';h='21px';n=676;};
if(wsafari&&!is_chrome){n=659;};
if(is_chrome){n=633;};
if(is_opera){n=615;};

Above, we use my browser sniffer results to adjust some display-related values according to which browser is being used.

Above, we use a FOR loop to print .js data into a table. The cool detail here is psb[parseInt(memstatus[i],10)], which gets the correct PSB™ status code meaning (out of 100 possibles) for each of the members, and where meanings are based on the current status code of each of the members, and where i is member id (1 to whatever) and memstatus[i] is the current status per member. Then we adjust some display-related values according to how many records there are. The zzzzz variable is for displaying a sidebar with links in it, where some browsers require different "box models" due to adding padding to widths:

document.write("<div style='padding:10px;border:1px solid black;background-color:#ccc;position:absolute;width:"+zzzzz+"px;top:"+z+"px;left:857px;text-align:left'> . . . . blah blah . . . </div>");

document.write ("<div style='position:absolute;top:"+zzz+"px;left:"+n+"px'><i>Please cease typing when you get here</i><span class='arrow'><b>↓</b></span></div>");

document.write ("<form style='position:absolute;top:"+zz+"px;left:10px;width:989px;' id='status' name='PSBform' method='post' action='update.php' onsubmit='return validate()'><b id='newstatus'>Member </b><label for='status'><b>Status: </b><input type='text' name='status' size='2' maxlength='2' value=''></label><label for='comment' style='position:absolute;top:0px;left:370px;width:629px;'><b>Comment (optional): </b><input type='text' name='comment' size='55' maxlength='55'></label><input type='hidden' name='ID' value=' '><input type='submit' value='Update PSB'></form>");

Above, we display a message to get them to avoid typing past the end of the input box (because wider characters will mess up the looks of the table if there are too many of them). Then we create a form on the fly. Note that its top positioning is zz, a calculated value depending on how many members there are. A few members would require that the form display higher on the screen, while more members puts it lower. The form action is 'update.php' because we use that file to actually update the db.

Above, we use a loop to print out all the status codes and their meanings, complete with subtitles. Since all codes must have 2 digits, we converted the loop's i variable to u with a string type, then added a "0" character if the i value was 0 through 9. The 2-digit i values needed no processing. If the second character is "0", a subtitle is printed, since every 10 codes the status codes are in a different generic category.

Above, we put a column of buttons next to the Comment and Meaning columns, so users can choose whose status and comment to update. We coded it twice, with Mac computers getting one image and Windows computers getting another. This is because the Mac default table displaying procedures make skinnier rows. Note that an OnClick event not only sends the focus to the status input box, it also sets the value of the member variable and runs a function which sets the comment box value to nothing (so old comments do not linger in case you updated another member first), sets the status input box to its current value, and replaces the word "Member" with the actual name of the member. Note the </div> at the end of the script below—this is the far end of the container div that holds the entire page. Also note the "Refesh often" message that gets printed at the top right corner of the screen, above. This reminds users that other users might be updating statuses but such changes will not happen on their page unless they refresh the screen to pull the very latest data from the MySQL table.

</script>
<BR>

<?php
}
?>

</div>

</body></html>

PHP

Personal Status Boards (PSB™)

Article Content Management System

Website Directory Content Management System

Photo Gallery Content Management System

Forum Content Management System

PHP Info for the Standard Personal Status Board (PSB™)