I have just completed my first freelance site! It’s looking pretty great! I learnt a lot on this project and am really excited with the result. The full site can be found here. I’ll be posting this site in a portfolio page when I get that up and running but for now here are a few screenshots.
Home Page…
Portfolio Page…
Contact Form…
Using a little knowledge of PHP and HTML you can build a simple log in system for your site. In order to correctly follow this tutorial you may want to have a good idea of basic HTML/PHP syntax as well as knowing some CSS. You should also have a basic understanding of how to create and use sessions($_SESSIONS) in PHP.
Alright let’s get started by just creating a basic log in window and place it in the center of the screen. First the log in window.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Sample Log In</title> <link rel="stylesheet" href="loginCSS.css" type="text/css" /> </head> <body> <div id="outerLimit"> <div id="container"> <div id="innerLimit"> <div id="loginBox"> <form id="login" name="login" method="post" action="userAuth.php"> <label for="username">Username:</label><br /> <input type="text" id="username" name="username" size=40 /><br /> <label for="password">Password:</label><br /> <input type="password" id="password" name="password" size=40 /><br /> <input type="submit" name="submit" value="Log In" /> </form> <br /> </div> </div> </div> </div> </body> </html>
Next let’s move into a bit of the CSS. Basically we just want to create a window with a gray background so the fields are extremely easy to see. I called the CSS file in this case loginCSS.css but you can call it whatever you like as long as it’s referenced properly in the HTML section.
body { background-color:white; min-height: 468px; min-width:552px; font-family:Helvetica; } a { font-size:small; } #loginBox { background-color: #e4e4e4; position:relative; top:25%; left:25%; width:300px; padding:15px; } #outerLimit { height:100%; width:100%; display:table; vertical-align:middle; } #container { position:relative; vertical-align:middle; display:table-cell; height:468px; } #innerLimit { width:552px; height:468px; margin-left:auto; margin-right:auto; }
As you can see, I just styled the page a little bit to make it a little bit easier for the user to use. Now that we have a basic page for the user to log in, we’ll also need a page, such as a dashboard, for the user to access when they enter in correct login criteria. In this case we’re just going to use a page that has a basic header telling the user they have logged in correctly. The page can look something like this.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Sample Log In</title> <link rel="stylesheet" href="loginCSS.css" type="text/css" /> </head> <body> <h1>You are now logged in!</h1> <a href="logout.php">Log Out Here</a> </body> </html>
As you can see I have also included a log out link just below the h1 tag. If a user logs into the system we also want them to be able to log out. Next we’re going to create the SQL for our database. For this tutorial I’ll be using MySQL, however Oracle or SQL Server could also be used.
Note: If you’re going to use a different database then the code to connect to the database will be slightly different.
DROP TABLE IF EXISTS 'testDB'.'user' CREATE TABLE 'testDB'.'user' ( 'username' VARCHAR(10), 'password' VARCHAR(10) ); INSERT INTO 'testDB'.'user' (username, password) VALUES ('admin', 'password'), ('guest', 'password');
This is just a very simple database table that contains only a username and password. This script could obviously be modified to accept further fields of to encrypt the password field to increase the security of your system. Things like that will be out of the scope of this tutorial however.
Now that we have our environment set up we can start to use PHP to get data from the forms and compare them with the database. For the this tutorial we will only be using the POST method of retrieving data from forms. Using GET is often not recommended when getting sensitive data such as usernames and passwords. As you can see from the log in window, we have used the POST method to get the data, and when the form is submitted we are calling the userAuth.php file. Let’s go ahead and create that file now.
This block of code we will be using to check to see if the fields are blank. If they are we want to send them back to the login.html file to log back in again using the header() function. Next we want to enter all the configuration information to connect to the database and use some PHP functions to protect our site from SQL injection errors.
/*Create the variables to hold the database information*/ $dbName = "testDB"; /*Table name that we're checking against*/ $dbTable = "user"; /*Database username*/ $dbUsername = "DBUsername"; /*Database Password*/ $dbPassword = "DBPassword"; $username = $_POST(['username']); $password = $_POST(['password']); /*This next block is to prevent SQL injection hacks*/ $username = stripslashes($username); $password = stripslashes($password); $username = mysql_real_escape_string($username); $password = mysql_real_escape_string($password);
I have put in default values into the variables. Variables such as $dbTable and $dbUsername will be subject to change based on your database configuration. These values will need to be filled in with correct values from your system. Next we’re going to be connecting to the database and opening a connection.
/*Connect to the Database*/ $connection = @mysql_connect("localhost", $dbUsername, $dbPassword) or die(mysql_error()); /*Select the database you want to access*/ $db = @mysql_select_db($dbName, $connection) or die(mysql_error()); /*Select statement from the database to see if the user is in the system*/ $sqlQuery = "SELECT COUNT(*) FROM $table_name WHERE username = '$username' AND password = password('$password')"; /*Create a variable to hold the results of the SQL query*/ $result = @mysql_query($sqlQuery, $connection) or die(mysql_error()); /*Check the number of rows returned from the query*/ $num = mysql_num_rows($result);
Now we’re getting to the user authentication section. We’re now going to see if the number of rows that was selected is anything but 0. In theory it should ever only come back with 1 or 0 rows, however in systems where users can multiple accounts it’s good to keep it to != 0.
/*If the number of rows is not equal to 0 then authenticate the user*/ if ($num != 0) { session_start(); //Create a session for the username and password session_register($username); session_register($password); if(!session_is_registered($username)) { header("location:login.html"); } else { //because the user is authenticated move them to the dashboard header("Location: home.html"); } } else { header("Location: login.html"); exit; } ?>
We then register a session and store the username and password in the session. If the session has been registered correctly then you can send the user to the home screen. If the session is not registered correctly for some reason we don’t want the users accessing the system, so we send them back to the login screen to attempt to log in again.
That’s it, an entire login system. Of course this is just meant to give you the idea of the steps and should by no means be used in a real-world system as is. However you should have a firm understanding of how a basic login system works using PHP/MySQL and a little bit of HTML and CSS. As always if you have any questions/concerns feel free to leave a comment and I’ll get back to you asap.
JQuery is often used in websites to manipulate the CSS attributes of an HTML element upon the users request. For example, if a user wants to increase the size of the font immediately so that they can read your page, or you may just want to change up the CSS on the fly to make your page stand out a little more. All these things can be done in JQuery using the css() function and css manipulation techniques. Let’s get started by creating a basic page with a link and a paragraph with some links in it like so…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <script src="lib/jquery/jquery-1.3.2.js" type="text/javascript"></script> <title>JQuery CSS Manipulation</title> </head> <body> <a href="#">Click Me</a> <br> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, <a href="#">augue neque</a> tempor enim, et mattis justo nibh eu elit. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, <a href="#">hendrerit</a> in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.</p> </body> </html>
As you can see it’s a basic HTML page that references the JQuery script. We have also added a link that says “click me” along with a paragraph of lorem ipsum text with some links in it. Alright, now onto creating the CSS for the page. For this example I will be putting the CSS in the header but if you want to put it in an external file by all means go ahead and reference it in the header.
<style type="text/css"> p a { color: red; } </style>
As you can see, I just added an attribute to make all the links within the paragraph tags initially turn up as red. You can add as many CSS elements here as you would like to style the links however you like but for the purpose of this demonstration you will just need the color red as an attribute. Next let’s add the JQuery and introduce the .css() function.
<script type="text/javascript"> $(function() { $('a').click(function() { $('p a').css('color', 'blue'); }); }); </script>
As you can see the JQuery code is pretty straight forward for what we’re doing. Basically we’re starting out by checking the DOM to make sure that the file is ready to be manipulated. Then, we perform a click function anytime an anchor tag is pressed. Inside of that click function is where we actually manipulate the CSS and change the color of the anchor tags to blue instead of red like we originally set. The css() function accepts two parameters that we’ll be using. The first is the attribute that you would like to change and the second is the attribute that you want to change it to. So for our example, the attribute is the color and we’re going to change it to blue. If of course you want to change the color of the link that was originally pressed instead of every link inside the paragraph tags you could use the “this” function instead of specifying a specific tag.
That’s the basics to CSS manipulation using JQuery, of course the example shown here is only a very basic example and can be greatly expanded upon. This is what the final code should look like…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <script src="lib/jquery/jquery-1.3.2.js" type="text/javascript"></script> <title>JQuery Test</title> <style type="text/css"> p a { color: red; } </style> <script type="text/javascript"> $(function() { $('a').click(function() { $('p a').css('color', 'blue'); }); }); </script> </head> <body> <div id="box"></div> <a href="#">Click Me</a> <br /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, <a href="#">augue neque</a> tempor enim, et mattis justo nibh eu elit. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, <a href="#">hendrerit</a> in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.</p> </body> </html>
Cookies and Sessions are extremely useful to a PHP programmer, however they could be considerably confusing to a beginner. Cookies and sessions are used to store pieces of information for a period of time until it is destroyed. This information inside of a cookie or a session can be used to store things like log in information, URL information and much much more.
Cookies are pieces of information stored on the client’s machine. The disadvantage here is that cookies can be disabled or ignored from the client’s end. So if you’re using cookies, try not to use them for anything that is crucial to the system functioning(this is what sessions are for… more on that later). The syntax for creating a cookie looks like this…
//A cookie can be equal to a string $_COOKIE['nameOfCookie'] = 'What information you want to store here'; //or a cookie can be equal to a variable $_COOKIE['nameOfCookie'] = $username;
According to PHP variable declaration rules, you can name the cookie whatever you would like as long as it doesn’t break any of the PHP rules. Data from created cookies can then be used anywhere you like just like any variable such as…
//print the value of the cookie print($_COOKIE['nameOfCookie']);
Alternately, you can use the isset() method to check to see if a specific cookie has been set. This is more useful when using sessions but we’ll get to that later.
Session differ from cookies in that they are stored on the server as opposed to the client. Sessions offer one major advantage over cookies, they cannot be disabled by the user, thus making sessions much more secure than cookies. When dealing with things like log in information and secure data, session are a much better choice than cookies. Sessions are declared using the same conventions as cookies…
//a session can be equal to a string $_SESSION['nameOfSession'] = 'What information you want to store in the session'; //or a session can be equal to a variable $_SESSION['nameOfSession'] = $username;
This will declare a session variable, however there is one key function that needs to be created prior to using a session variable. The session_start() function needs to be called before any data is sent from the server. Even if a spare white space is sent, the session_start() function will most likely send an error. Whenever you want to use a session variable in a PHP file/function, you must call the session_start() function at the very beginning of the page in order to use a session variable that has been created. This needs to occur even prior to sending the DOCTYPE to the client. To use a session variable the syntax is as follows…
//start the session session_start(); //print the session variable print($_SESSION['nameOfSession']);
The syntax is similar to using a cookie and alternatively you can use the isset() method to check if a session variable has been created or not. This becomes particularly useful when it comes to creating login systems that keeps users logged in using a session.
In full, you can use sessions or cookies if you like but keep in mind that sessions are stored on the server and cannot be disabled by a user, thus making them much more secure and reliable. In order to create a session, remember to call the session_start() method at the very start of the document or you may not be able to use the session variables.
Recent Comments