8. Signup Page - Validation & Registration
Lets start off by creating a new blank file - save it as "java.lib.js" inside your "libs" folder, and keep it open for now.
With head.inc.php open, add the following line below your the jQuery <script>, and above the <? require_once(); ?> line:
<script src="libs/java_lib.js" type="text/javascript"></script>
Save and close it head.inc.php. The bottom of head.inc.php should look like this:
With index.php open, find the </form> tag BELOW the "Sign up" input button, skip the </div> and add:
<div id='reg_error'>
</div>
Now open global.css and add this to the bottom:
#reg_error { border:1px solid #dd3c10; background-color:#ffffff; font-size:11px; color:#333; text-align:center; padding:10px; display:none; }
Save and close global.css.
Go to libs/java.lib.js and add the following code:
Let me explain what we are doing in java.lib.js.
We allow our jQuery to load on the page before we access any of the scripting, this way everything will work properly. This is done with the
$(document).ready(function() {
//our code
});
Then we added 4 functions.
1) Open(id) - changes the style of an element to "block"
2) Close(id) - changes the style of an element to "none"
3) changeText(id, text) - changes the inner html of the id element.
4) $('#signup').click(function() { } ); - this is our listening function and runs everytime someone clicks our "sign up" button.
So far, java.lib.js is our javascript validation - so the server does not need to handle phony or fake validation.
Once everything is set, our javascript will submit the form for us, sending us to register.php. Close java.lib.js.
Open libs/fb_functions.php. It should be empty in there - if it isnt, make it empty. Add this to your fb_functions.php
<?php
function Post()
{
return $_SERVER['REQUEST_METHOD']=="POST";
}
function cleanMySQL($var)
{
$var = mysql_real_escape_string($var);
return $var;
}
function Back()
{
if(isset($_SERVER['HTTP_REFERER']))
{
header("Location: " . $_SERVER['HTTP_REFERER']);
}
}
?>
The post() function we are going to use to make sure all our forms are "post".
cleanMySQL() escaped all of our input. Anything we cross reference in our database, or anything we think we might use in the database will always be cleaned.
Back() will bring the user back to the previous page instantly.
Create register.php, a blank file, and save it to your main directory - where index.php & master.php are. Add the following code from codepad to register.php
http://codepad.org/y5qQe8Yr (fixed)
If you take a look at register.php, we first include our functions - mainly for shortcuts such as cleanMySQL().
We check to make sure it's a post file.
Clean all the registration information
Start a session if we need to
Do a quick re-validation using PHP
Then we include load.inc.php, so we can connect to our database.
Look up the email address that's trying to register
If it doesnt exist, we add a UID, Email, and a salted sha1'd password to our "users" table.
If that is successfull, we look up that row by email (we look it up incase 2 people register at the exact same time. Rare, but it could happen) and insert profile information with the new users UID into "profiles".
Then we'll send them to login.php.
login.php does not exist yet. So open up index.php and SAVE AS login.php. Now your login.php page will look and act the exact same as your index page. THIS IS OK. We will disect login.php in the next class.
We did not add any human authentication - if you plan on having this site online and being used, then I very strongly suggest getting a good captcha.
I won't go over how to install the Google reCAPTCHA.
Just so we are all on the same page, this is what our files should look like so far:
inc/head.inc.php - codepad
index.php - codepad
register.php - codepad
libs/fb_functions.php - codepad
libs/java.lib.js - codepad
styles/global.css - codepad
Next we will make a working Login script, and a "forgot password"/password recovery script.