Example 20-3. rnsetup.php <?php // rnsetup.php include_once 'rnfunctions.php'; echo '<h3>Setting up</h3>'; createTable('rnmembers', 'user VARCHAR(16), pass VARCHAR(16), INDEX(user(6))'); createTable('rnmessages', 'id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY, auth VARCHAR(16), recip VARCHAR(16), pm CHAR(1), time INT UNSIGNED, message VARCHAR(4096), INDEX(auth(6)), INDEX(recip(6))'); createTable('rnfriends', 'user VARCHAR(16), friend VARCHAR(16), INDEX(user(6)), INDEX(friend(6))'); createTable('rnprofiles', 'user VARCHAR(16), text VARCHAR(4096), INDEX(user(6))'); ?> index.php This file is a trivial file but necessary nonetheless to give the project a home page. All it does is display a simple welcome message. In a finished application, this would be where you sell the virtues of your site to encourage signups. Incidentally, seeing as all the MySQL tables have been created and the include files saved, you can now load Example 20-4, index.php, into your browser to get your first peek at the new application. It should look like Figure 20-1. Figure 20-1. The main page of the site index.php | 411 Example 20-4. index.php <?php // index.php include_once 'rnheader.php'; echo "<h3>Home page</h3> Welcome, please Sign up and/or Log in to join in."; ?> rnsignup.php Now we need a module to enable users to join the new network, and that’s Exam- ple 20-5, rnsignup.php. This is a slightly longer program, but you’ve seen all its parts before. Let’s start by looking at the end block of HTML. This is a simple form that allows a username and password to be entered. But note the use of the empty span given the id of 'info'. This will be the destination of the Ajax call in this program that checks whether a desired username is available. See Chapter 18 for a complete description of how this works. Checking for Username Availability Now go back to the program start and you’ll see a block of JavaScript that starts with the function checkUser. This is called by the JavaScript onBlur event when focus is removed from the username field of the form. First it sets the contents of the span I mentioned (with the id of 'info') to an empty string, which clears it in case it previously had a value. Next a request is made to the program rnchecker.php, which reports whether the user- name user is available. The returned result of the Ajax call, a friendly message, is then placed in the 'info' span. After the JavaScript section comes some PHP code that you should recognize from the Chapter 17 section of form validation. This section also uses the sanitizeString func- tion to remove potentially malicious characters before looking up the username in the database and, if it’s not already taken, inserting the new username $user and password $pass. Upon successfully signing up, the user is then prompted to log in. A more fluid response at this point might be to automatically log in a newly created user but, as I don’t want to overly complicate the code, I have kept the sign-up and login modules separate from each other. When loaded into a browser (and in conjunction with rncheckuser.php, shown later) this program will look like Figure 20-2, where you can see that the Ajax call has iden- tified that the username Robin is available. 412 | Chapter 20: Bringing It All Together Figure 20-2. The sign-up page Example 20-5. rnsignup.php <?php // rnsignup.php include_once 'rnheader.php'; echo <<<_END <script> function checkUser(user) { if (user.value == '') { document.getElementById('info').innerHTML = '' return } params = "user=" + user.value request = new ajaxRequest() request.open("POST", "rncheckuser.php", true) request.setRequestHeader("Content-type", "application/x-www-form-urlencoded") request.setRequestHeader("Content-length", params.length) request.setRequestHeader("Connection", "close") request.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) { if (this.responseText != null) rnsignup.php | 413 { document.getElementById('info').innerHTML = this.responseText } else alert("Ajax error: No data received") } else alert( "Ajax error: " + this.statusText) } } request.send(params) } function ajaxRequest() { try { var request = new XMLHttpRequest() } catch(e1) { try { request = new ActiveXObject("Msxml2.XMLHTTP") } catch(e2) { try { request = new ActiveXObject("Microsoft.XMLHTTP") } catch(e3) { request = false } } } return request } </script> <h3>Sign up Form</h3> _END; $error = $user = $pass = ""; if (isset($_SESSION['user'])) destroySession(); if (isset($_POST['user'])) { $user = sanitizeString($_POST['user']); $pass = sanitizeString($_POST['pass']); if ($user == "" || $pass == "") { $error = "Not all fields were entered<br /><br />"; } else 414 | Chapter 20: Bringing It All Together { $query = "SELECT * FROM rnmembers WHERE user='$user'"; if (mysql_num_rows(queryMysql($query))) { $error = "That username already exists<br /><br />"; } else { $query = "INSERT INTO rnmembers VALUES('$user', '$pass')"; queryMysql($query); } die("<h4>Account created</h4>Please Log in."); } } echo <<<_END <form method='post' action='rnsignup.php'>$error Username <input type='text' maxlength='16' name='user' value='$user' onBlur='checkUser(this)'/><span id='info'></span><br /> Password <input type='text' maxlength='16' name='pass' value='$pass' /><br /> <input type='submit' value='Signup' /> </form> _END; ?> On a production server, I wouldn’t recommend storing user passwords in the clear as I’ve done here (for reasons of space and simplicity). In- stead, you should salt them and store them as MD5 or other one-way hash strings. See Chapter 13 for more details on how to do this. rnsignup.php (YUI version) If you prefer to use YUI, here’s an alternative version of rnsignup.php (see Exam- ple 20-6). I have highlighted the main differences in bold type and, as you can see, it’s substantially shorter. Please refer to Chapter 19 for details on how the YUI Ajax im- plementation works. Example 20-6. rnsignup.php (YUI version) <?php // rnsignup.php (YUI version) include_once 'rnheader.php'; echo <<<_END <script src="yahoo-min.js"></script> <script src="event-min.js"></script> <script src="connection-min.js"></script> <script> function checkUser(user) { rnsignup.php (YUI version) | 415 if (user.value == '') { document.getElementById('info').innerHTML = '' return } params = "user=" + user.value callback = { success:successHandler, failure:failureHandler } request = YAHOO.util.Connect.asyncRequest('POST', 'rncheckuser.php', callback, params); } function successHandler(o) { document.getElementById('info').innerHTML = o.responseText; } function failureHandler(o) { document.getElementById('info').innerHTML = o.status + " " + o.statusText; } </script> <h3>Sign up Form</h3> _END; $error = $user = $pass = ""; if (isset($_SESSION['user'])) destroySession(); if (isset($_POST['user'])) { $user = sanitizeString($_POST['user']); $pass = sanitizeString($_POST['pass']); if ($user == "" || $pass == "") { $error = "Not all fields were entered<br /><br />"; } else { $query = "SELECT * FROM rnmembers WHERE user='$user'"; if (mysql_num_rows(queryMysql($query))) { $error = "That username already exists<br /><br />"; } else { $query = "INSERT INTO rnmembers VALUES('$user', '$pass')"; queryMysql($query); } die("<h4>Account created</h4>Please Log in."); } 416 | Chapter 20: Bringing It All Together } echo <<<_END <form method='post' action='rnsignup.php'>$error Username <input type='text' maxlength='16' name='user' value='$user' onBlur='checkUser(this)'/><span id='info'></span><br /> Password <input type='text' maxlength='16' name='pass' value='$pass' /><br /> <input type='submit' value='Signup' /> </form> _END; ?> rncheckuser.php To go with rnsignup.php , here’s Example 20-7, rncheckuser.php, the program that looks up a username in the database and returns a string indicating whether it has already been taken. Because it relies on the functions sanitizeString and queryMysql, the pro- gram first includes the file rnfunctions.php. Then, if the $_POST variable 'user' has a value, the function looks it up in the database and, depending on whether it exists as a username, outputs either “Sorry, already taken” or “Username available.” Just checking the function mysql_num_rows against the result is sufficient for this, as it will return 0 for not found, or 1 if it is found. The HTML entity ← is also used to preface the string with a little left-pointing arrow. Example 20-7. rncheckuser.php <?php // rncheckuser.php include_once 'rnfunctions.php'; if (isset($_POST['user'])) { $user = sanitizeString($_POST['user']); $query = "SELECT * FROM rnmembers WHERE user='$user'"; if (mysql_num_rows(queryMysql($query))) echo "<font color=red> ← Sorry, already taken</font>"; else echo "<font color=green> ← Username available</font>"; } ?> rnlogin.php With users now able to sign up to the site, Example 20-8, rnlogin.php, provides the code needed to let them log in. Like the sign-up page, it features a simple HTML form rnlogin.php | 417 and some basic error checking, as well as using sanitizeString before querying the MySQL database. The main thing to note here is that, upon successful verification of the username and password, the session variables 'user' and 'pass' are given the username and password values. As long as the current session remains active these variables will be accessible by all the programs in the project, allowing them to automatically provide access to logged-in users. You may be interested in the use of the die function upon successfully logging in. This is used because it combines an echo and an exit command in one, thus saving a line of code. When you call this program up in your browser, it should look like Figure 20-3. Note how the <input > type of password has been used here to mask the password with asterisks to prevent it from being viewed by anyone looking over the user’s shoulder. Figure 20-3. The login page Example 20-8. rnlogin.php <?php // rnlogin.php include_once 'rnheader.php'; echo "<h3>Member Log in</h3>"; $error = $user = $pass = ""; if (isset($_POST['user'])) { $user = sanitizeString($_POST['user']); $pass = sanitizeString($_POST['pass']); 418 | Chapter 20: Bringing It All Together if ($user == "" || $pass == "") { $error = "Not all fields were entered<br />"; } else { $query = "SELECT user,pass FROM rnmembers WHERE user='$user' AND pass='$pass'"; if (mysql_num_rows(queryMysql($query)) == 0) { $error = "Username/Password invalid<br />"; } else { $_SESSION['user'] = $user; $_SESSION['pass'] = $pass; die("You are now logged in. Please <a href='rnmembers.php?view=$user'>click here</a>."); } } } echo <<<_END <form method='post' action='rnlogin.php'>$error Username <input type='text' maxlength='16' name='user' value='$user' /><br /> Password <input type='password' maxlength='16' name='pass' value='$pass' /><br /> <input type='submit' value='Login' /> </form> _END; ?> rnprofile.php One of the first things that new users may want to do after signing up and logging in is to create a profile, which can be done via Example 20-9, rnprofile.php. I think you’ll find some interesting code here, such as routines to upload, resize, and sharpen images. Let’s start by looking at the main HTML at the end of the code. This is like the forms you’ve just seen, but this time it has the parameter enctype='multipart/form-data'. This allows us to send more than one type of data at a time, enabling the posting of an image as well as some text. There’s also an <input > type of file, which creates a browse button that a user can press to select a file to be uploaded. When the form is submitted, the code at the start of the program is executed. The first thing it does is ensure that a user is logged in before allowing program execution to proceed. Only then is the page heading displayed. rnprofile.php | 419 Adding the “About Me” Text Then the POST variable 'text' is checked to see whether some text was posted to the program. If so, it is sanitized and all long whitespace sequences (including returns and line feeds) are replaced with a single space. This function incorporates a double security check, ensuring that the user actually exists in the database and that no attempted hacking can succeed before inserting this text into the database, where it will become the user’s “about me” details. If no text was posted, the database is queried to see whether any already exists in order to prepopulate the textarea for the user to edit it. Adding a Profile Image Next we move on to the section where the $_FILES system variable is checked to see whether an image has been uploaded. If so, a string variable called $saveto is created, based on the user’s username followed by the extension .jpg. For example, user Jill will cause $saveto to have the value Jill.jpg. This is the file where the uploaded image will be saved for use in the user’s profile. Following this, the uploaded image type is examined and is only accepted if it is a jpeg, png, or gif image. Upon success, the variable $src is populated with the uploaded image using one of the imagecreatefrom functions according to the image type uploaded. The image is now in a raw format that PHP can process. If the image is not of an allowed type, the flag $typeok is set to FALSE, preventing the final section of image upload code from being processed. Processing the Image First, the image’s dimensions are stored in $w and $h using the following statement, which is a quick way of assigning values from an array to separate variables: list($w, $h) = getimagesize($saveto); Then, using the value of $max (which is set to 100), new dimensions are calculated that will result in a new image of the same ratio, but with no dimension greater than 100 pixels. This results in giving the variables $tw and $th the new values needed. If you want smaller or larger thumbnails, simply change the value of $max accordingly. Next, the function imagecreatetruecolor is called to create a new, blank canvas $tw wide and $th high in $tmp. Then imagecopyresampled is called to resample the image from $src, to the new $tmp. Sometimes resampling images can result in a slightly blurred copy, so the next piece of code uses the imageconvolution function to sharpen the image up a bit. 420 | Chapter 20: Bringing It All Together . <input type='password' maxlength='16' name='pass' value='$pass' /><br /> <input. /> <input type='submit' value='Signup' /> </form> _END; ?> rncheckuser.php To go with rnsignup.php ,. Example 2 0-3 . rnsetup.php <?php // rnsetup.php include_once 'rnfunctions.php'; echo '<h3>Setting up</h3>'; createTable('rnmembers', 'user