bhaviksBlog » PHP

PHP Login System Tutorial – Part 3

Bhavik — Sat, 21 Feb 2009 17:00:19 +0000

This will be the last part of the tutorial. Below are links to the previous 2 parts. Sorry for the lack of whitespace use, I’m trying to save you from scrolling horizontally
Link to part 1
Link to part 2

So far, we can register and log in. Now we want to be able to update our profile and add pictures. We’ll need to add another table in our database to store references of the users pictures.

If we were to store the actual picture into the database it could become very big, especially if you decide to allow your users to upload videos too. A better option would be to upload the picture into a directory on the web server and keep a reference to the picture in our database.

So first lets add our table. I added size and type to explain how to retrieve those values but I won’t be using them in my version of the site.

CREATE TABLE `db`.`user_photos` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`profile_id` INT NOT NULL ,
`title` VARCHAR( 128 ) NOT NULL ,
`size` INT NOT NULL ,
`type` VARCHAR( 128 ) NOT NULL ,
`reference` VARCHAR( 255 ) NOT NULL 
) ENGINE = MYISAM

The first 2 parts of the login system set everything up but the output looks terrible. We’ll add some css to make the site somewhat presentable. Give the sections a background and align the form elements with css.

style.css

.formElm
{
	margin-bottom:5px;
}
.formElm label
{
	float:left;
	width:120px;
}
div.divider
{
	width:450px;
	margin:20px auto;
	background-color:#C1f0f6; 
	border:4px #0ebfe9 double; 
	padding:10px;
}

Now we’re ready to make our profile control panel. At the top of our profilecp.php we need to start our session to see if the user is authenticated. So we start our session and include our database info.

profilecp.php


session_start();
include "db_connect.php";
?>

Next we’ll link to the stylesheet we just created and echo one of the session variables we created when the user first logged in (on index.php).
profilecp.php


 
  
    
  <span style="color: #000000; font-weight: bold;"><?php</span> <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$_SESSION</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'username'</span><span style="color: #009900;">]</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?></span>'s Homepage

So now the title of the page will be that user’s name. This is how we’ll be referencing our user and their id for interaction with our database.

Now we’ll need to pull this users info. The SQL to do this using our session variable would be:
profilecp.php


if($_SESSION['id']) //session id is established
{
echo "\"home.php\">Home
"; //ugly navigation
echo "\"logout.php\">Logout
";
 
//grab record with the correct id
$sql="SELECT * from `users` WHERE `id`='".$_SESSION['id']."'";
$res=mysql_query($sql);
$row=mysql_fetch_assoc($res); //pull entire row of info and store in to  a variable

We have all of this users info. We need to let them update it. We’ll do the usual if !POST method. If the form hasn’t posted, output the html, otherwise update the database.
profilecp.php

if(!$_POST['update'])
{
?>

That will be the form to update the text portion of the profile. We also want to allow them to add pictures. The form will submit to addpics.php where we’ll create directories and interact with our database. Heres the html for that. We’ll make addpics.php later.
profilecp.php

<div class="divider">
 
<form enctype="multipart/form-data" action="addpics.php" method="POST"><br/>
<strong>Upload Picturesstrong><br/><br/>
 
<div class="formElm">
<label for="title">Titlelabel>
<input id="title" type="text" name="title" maxlength="32"><br/>
div>
 
<div class="formElm">
<label for="file">Filelabel>
<input id="file" type="file" name="pics" maxlength="255"><br/>
div>
 
<input type="submit" value="Add">
form>
div>

Since they can add pictures, we’ll need to let them delete them too. This form will submit to deletepics.php which will handle removing entries from our database and deleting the file from the web server.
profilecp.php



$sql2 = "SELECT * FROM user_photos WHERE profile_id =".$_SESSION['id'];
$res2 = mysql_query($sql2) or die(mysql_error());
 
if(mysql_num_rows($res2) > 0) //user has pictures
{
echo "Delete Pictures

";
echo "\"deletefile\" method=\"post\" action=\"deletefile.php\">";
 
//output a checkbox next to each pic so they can delete multiple pics with one click
while($file = mysql_fetch_array($res2))
{
echo "\"files[]\" type=\"checkbox\" value=\"".$file['reference']."\">";
echo "\"".$_SESSION['username']."/pics/".$file['reference']."\"/>
\"".$_SESSION['username']."/pics/thumbs/".$file['reference']."\"/>

";
}
echo "\"submit\" name=\"delfile\" value=\"Delete Files\">";
echo ""
;
}
else //they havent uploaded any pics yet! 
{
echo "Please upload some pictures!
";
}

This next part handles updating the database for the text portion only. The files addpics.php and deletepics.php take care of the rest.

}
else
{
$first_name=protect($_POST['first']);
$last_name=protect($_POST['last']);
$about=protect($_POST['about']);
$email=protect($_POST['email']);
$sql3 =	"UPDATE `users` SET `first`='$first_name',`last`='$last_name',
`email`='$email',`about`='$about' WHERE `id`='".$_SESSION['id']."'";
$res3 = mysql_query($sql3) or die(mysql_error());
 
echo "Your profile has been successfully updated!";
}		
 
//else no session id was created, user is not authenticated...redirect to index
}else echo "";
 
?>
 
div>
body>
html>

Now we’re ready to make addpics.php which handles the pictures. This file will create a directory for the user, add the picture to that directory and also create a thumbnail of the picture. First we’ll add our thumbnail function to our db_connect.php so we can call it in the rest of our files. This function is not my work, I found it googling when I was teaching myself php. Credit goes to http://icant.co.uk/articles/phpthumbnails/

add the function to db_connect.php

function createthumb($name,$filename,$new_w,$new_h)
{
$system=explode(".",$name);
if (preg_match("/jpg|jpeg/",$system[1])){$src_img=imagecreatefromjpeg($name);}
if (preg_match("/png/",$system[1])){$src_img=imagecreatefrompng($name);}
$old_x=imageSX($src_img);
$old_y=imageSY($src_img);
if ($old_x > $old_y) 
{
$thumb_w=$new_w;
$thumb_h=$old_y*($new_h/$old_x);
}
if ($old_x < $old_y) 
{
$thumb_w=$old_x*($new_w/$old_y);
$thumb_h=$new_h;
}
if ($old_x == $old_y) 
{
$thumb_w=$new_w;
$thumb_h=$new_h;
}
$dst_img=ImageCreateTrueColor($thumb_w,$thumb_h);
imagecopyresampled($dst_img,$src_img,0,0,0,0,$thumb_w,$thumb_h,$old_x,$old_y); 
if (preg_match("/png/",$system[1]))
{
imagepng($dst_img,$filename); 
} else {
imagejpeg($dst_img,$filename); 
}
imagedestroy($dst_img); 
imagedestroy($src_img); 
}

Now that the functions ready we’ll go on to making addpics.php. We need to start our session again and include our db_connect.php file. Then we’ll use the mkdir command to create our directories. We have to make sure they dont exist first also. The entire addpics.php code is below with comments.

addpics.php


session_start();
include "db_connect.php";
 
if($_SESSION['id']) //make sure theres a session id
{
//pull user info for this id
$sql = "SELECT username FROM `users` WHERE `id`='".$_SESSION['id']."'";
$res = mysql_query($sql) or die(mysql_error());
 
//record doesnt exist...redirect to index.php
if(mysql_num_rows($res) != 1)
{
session_destroy();
echo "";
}
else
{
$row = mysql_fetch_assoc($res); //pull entire row of info
 
$title = protect($_POST['title']); //post value of title from the profilecp form
 
if(!$title) //they must include a title
{
echo "";
}	
// the @ in front is to supress warning messages
$target = $row['username']; //name of directory will be the username
if(!is_dir($target)) @mkdir($target); //if directory does not exist, create it
$target = $target . '/pics'; //store pictures in 'pics' subdirectory
 
//check if pics subdirectory has been created, if not create it
if(!is_dir($target)) @mkdir($target); 
 
//Heres where we use the FILES variable
//a double array with the name and then parameter ($_FILES['name']['param'])
$target = $target."/".basename($_FILES['pics']['name']) ;
$size = $_FILES['pics']['size']; //if you want to limit size
$pic = $_FILES['pics']['name']; 
$type = $_FILES['pics']['type']; //if you want to limit type (jpg,gif,png)
 
//insert the reference of file into the database				
$sql2= "INSERT INTO `user_photos` (`profile_id`,`title`,`size`,`type`,`reference`)
VALUES ('".$_SESSION['id']."','$title','$size','$type','$pic'); ";
 
$res2 = mysql_query($sql2) or die(mysql_error());
 
//move the file into the correct directory
if(move_uploaded_file($_FILES['pics']['tmp_name'], $target))
{
echo "";
}
else //if something goes wrong display and error message
{
	echo "";
}
//create thumbnail and move it into the thumbnail directory
$target2 = $row['username'];
$target2 = $target2 . '/pics';
$target2 = $target2 . '/thumbs';
if(!is_dir($target2)) @mkdir($target2);
$target2 = $target2."/".basename($_FILES['pics']['name']) ;
createthumb($target,$target2,150,150);
}
 
}else echo "";
?>

Addpics.php is done, now on to deletepics.php. We use the unlink function to delete the file from our web server.
The entire deletepics.php


session_start();
header("Location:profilecp.php");
include "db_connect.php";
 
$profile_id = $_SESSION['id'];
 
if(!$profile_id) //no session id...redirect to index.php
{	
	echo "";
}
else
{            
foreach($_POST['files'] as $num => $id) //for each picture that was checked
{
//delete reference in database
@mysql_query("DELETE FROM user_photos WHERE profile_id='$profile_id' AND reference='$id'"); 
unlink($_SESSION['username']."/pics/".$id); //delete pic in directory
unlink($_SESSION['username']."/pics/thumbs/".$id); //delete thumbnail
}
}
?>

Alright…almost there. Everything looks good for the user that logs in. But we need something that’ll show of our users profile to anyone that visits, whether they are registered or not. So we’ll make a profile.php. All it does is grab the username from the url, find that users info and output it all to the page. We’ll be using the GET method to pull from the url.
profile.php


session_start();
include "db_connect.php";
 
$sql="SELECT * from `users` WHERE `username`='".$_GET['username']."'";
$res=mysql_query($sql) or die(mysql_error());
 
if(mysql_num_rows($res) != 1)//no user with that username exists
{
echo "";
}
else
{
	$row=mysql_fetch_assoc($res); //pull the users info
 
	?>
	
	
 
        //use php to echo whats stored in our database
	
	 echo $_SESSION['username'] ; ?>'s Profile

	Name:  echo $row['first']. " " .$row['last'] ?> 

	Email:  echo $row['email'] ?> 

	About:  echo $row['about'] ?> 

    
 
	
	Pictures



 
//find this users pictures
$result = mysql_query("SELECT reference FROM user_photos WHERE`profile_id`='".$row['id']."'");
 
//show the pictures thumbnail as a link to the full picture
while ($row2 = mysql_fetch_array($result, MYSQL_ASSOC))
{
echo "\"".$_GET['username']."/pics/".$row2['reference']."\">
\"".$_GET['username']."/pics/thumbs/".$row2['reference']."\">
";
}
}
?>

So to test this out say we had a username of ‘bananas’. If we went to localhost/yoursite/profile.php?username=bananas the page that comes up should be bananas profile. To clean this up we can use mod_rewrite in our .htaccess file. With the code below you only need to go to localhost/yoursite/bananas and you should see that users profile.
.htaccess

RewriteEngine on
RewriteRule ^([a-zA-Z0-9_-]+)$ profile.php?username=$1
RewriteRule ^([a-zA-Z0-9_-]+)/$ profile.php?username=$1

We’re finally done! Thats everything! You should have a fully working login system (hopefully). I’ve attached all of the source code to the post. It can be found below. If there are any bugs or errors please let me know. I hope this helps! Tell me how it works for you!
Zip of all source code
php_login_system.zip

PHP Login System Tutorial – Part 2

Bhavik — Wed, 21 Jan 2009 03:59:12 +0000

Link to part 1

So far we’ve made our database, connected to it, and wrote a function to get rid of
SQL Injection attempts. Now we can make the registration page.

We’ll have a form with a couple fields and a submit button that sends everything to our database.

The first thing we’re going to do is include the db_connect.php page. This will connect us to our database and give us access to the protect function we created earlier.

This form will then submit to itself and insert the data into our db.


//Create registration form (register.php)
include "db_connect.php";
 
if(!$_POST['submit']) // 'submit' hasn't been clicked so output html.
{
?>

So what the first IF statement does is checks to see if the form has been submitted. If it hasn’t it outputs the html form.



First Name: 
Last Name: 
Desired Username: 
Password: 
Confirm Password: 
Email: 
About: Tell us about yourself


or Login

Notice the forms action is register.php which is the page itself. When ‘submit’ is posted we go to the else block here. This is where we store the posted values into variables. We call our protect function on these values to cleanse them of any injection attempts.


}
else
{
$first = protect($_POST['first']);
$last = protect($_POST['last']);
$username = protect($_POST['username']);
$password = protect($_POST['password']);
$pass_conf = protect($_POST['pass_conf']);
$email = protect($_POST['email']);
$about = protect($_POST['about']);

Now that we have the values the user entered, we can do some error checking. We’ll create an errors array and add an error message for every error that occurs to the array. The first one makes sure the email is in a valid name@domain format using regular expressions.

$errors = array();
$regex = "/^[a-z0-9]+([_.-][a-z0-9]+)*@([a-z0-9]+([.-][a-z0-9]+)*)+.[a-z]{2,}$/i";
if(!preg_match($regex, $email))
{
  $errors[] = "E-mail is not in name@domain format!";
}

The next block makes sure all of the fields have been filled out.

if(!$first || !$last || !$username || !$password || !$pass_conf || !$email || !$about)
{
   $errors[] = "You did not fill out the required fields";
}

This makes sure the passwords match

if ($password != $pass_conf)
{
  $errors[] = "Your confirmed password does not match you initial password";
}

Now we need to make sure the username this user wants isn’t already taken. To do this we’ll take the username they submitted and look for it in our db. If we find it, that username is taken so we output an error message.

$sql = "SELECT * FROM `users` WHERE `username`='{$username}'";
$query = mysql_query($sql) or die(mysql_error());
 
if(mysql_num_rows($query) > 0) 
{
  $errors[] = "Username already taken, please try another";
}

Heres where we loop through our errors array and output everything that went wrong with the registration.

if(count($errors) > 0)
{
  echo "The following errors occured with your registration";
  echo "">";
  foreach($errors AS $error)
  {
    echo $error . "\n";
  }
  echo "";
  echo "\"javascript:history.go(-1)\">Try again";
  //we use javascript to go back rather than reloading the page 
  // so the user doesn't have to type in all that info again.
}

If nothing went wrong we insert the new information into our database using SQL queries.

else
{
  $sql = "INSERT into `users`(`first`,`last`,`username`,`password`,`email`,`about`)
  VALUES ('$first','$last','$username','".md5($password)."','$email','$about');";
 
 $query = mysql_query($sql) or die(mysql_error());
 echo "Thank You for registering {$first_name}! Your username is {$username}";
 echo ".php"> Click here  to Login";
}
}
?>

So now that the user is registered, they need a place to login.
We’re going to use the same if(!$_POST['submit']) idea. If submit hasn’t posted, output the html. If it has, query the database. We use the session_start() function to create a session. Once a login is succesful we can create session variables to reference this specific user for their session. This will come in handy in the next tutorial when we need to get this users pictures from the database. You can find more info on php sessions here.


session_start();
 
//Login form (index.php)
 
include "db_connect.php";
if(!$_POST['submit'])
{
?>



Username
Password


Register Here

Ok here we’re going to make sure both the username and password were entered. Then we’ll query our db with the posted values to see if theres a match. If there is, we create our session variables (to be used later) and take the user to their homepage. If the database couldn’t find anything we output an incorrect login message.

} else { $user = protect($_POST['username']); $pass = protect($_POST['password']); if($user && $pass) { $pass = md5($pass); //compare the encrypted password $sql="SELECT id,username FROM `users` WHERE `username`='$user' AND `password`='$pass'"; $query=mysql_query($sql) or die(mysql_error()); if(mysql_num_rows($query) == 1) { $row = mysql_fetch_assoc($query); // mysql_fetch_assoc gets the value for each field in the row $_SESSION['id'] = $row['id']; //creates the first session var $_SESSION['username'] = $row['username']; // second session var echo ""; } else { echo ""; } } else { echo ""; } } ?>

Now we need a place for our user to go to when they login successfully. Make another php file and call it “home.php”

session_start(); //home.php if($_SESSION['id']) { echo "Welcome ",$_SESSION['username'] ; echo " .php">Logout" ; } else { echo "You don't belong here!"; } ?>

Finally we create a logout page which destroys our session.

session_start(); //logout (logout.php) include "db_connect.php"; if($_SESSION['id']) { session_destroy(); echo ""; } ?>

That’s it for part 2. Check out Part 3 to learn how to allow the user to update their profile and add pictures.

PHP Login System Tutorial – Part 1

Bhavik — Wed, 21 Jan 2009 03:52:46 +0000

This is Part 1 of my PHP Login System tutorial. By the end of this series, you’ll have your own custom social networking site. Users will be able to register, login, edit their profile and add pictures. We’re aiming for a very stripped down version of Facebook and Myspace.

For this tutorial you’ll need a webserver running PHP and mySQL. Click here for instructions on how to set one up on your local machine with XAMPP.

Lets start by making our database. Our users table will have 7 fields.
id, first, last, username, password, email and about.

Heres the SQL code to make this happen. You can paste it into your phpmyadmin SQL tab. Make sure you change the `db` in the first line to match the name of your database.

CREATE TABLE `db`.`users` ( `id` INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY , `first` VARCHAR( 32 ) NOT NULL , `last` VARCHAR( 32 ) NOT NULL , `username` VARCHAR(32) NOT NULL, `password` VARCHAR(255) NOT NULL, `email` VARCHAR(255) NOT NULL, `about` TEXT NOT NULL ) ENGINE = MYISAM;

We make the id auto_increment so that every user that is added to the db has their own id. Since this field will be unique, we’ll make it our primary key. It will be used to reference each user later.

Our database is setup. We just need to connect to it using php. We’ll create our first php file, “db_connect.php”.

PHP has built in functions to interact with mysql databases, mysql_connect and mysql_select_db.

The mysql_connect function takes 3 arguments, the host, username, and password. We’ll store the result of this function into a variable. If the connect fails you tell it to die and show the error output on the screen using mysql_error().

If your connection is successful, you just have to select the database you want to
interact with. The mysql_select_db(“name_of_your_db”,”the_connection_resource”) function will select your database from the successful connection we established previously.

Heres the php code

$con = mysql_connect(localhost,"username","password") or die(mysql_error()); $db = mysql_select_db("db",$con); ?>

We’ve connected to the mysql server and selected our db.
Im going to add a function into this page that we’ll be using later

function protect($string) { $string = mysql_real_escape_string($string); return $string; }

This function will clean what the users submit to the database so that we won’t need to worry about SQL Injection. I made it a function because typing “mysql_real_escape_string” every time you need to use it is a pain.

The entire db_connect.php code

//db_connect.php $con = mysql_connect(localhost,"username","password") or die(mysql_error()); $db = mysql_select_db("db",$con); function protect($string) { $string = mysql_real_escape_string($string); return $string; } ?>

Next will be Part 2 where we create the Login and Registration Page.

PHP Basics

Bhavik — Wed, 21 Jan 2009 03:46:10 +0000

Heres a quick intro to PHP. A lot will be left out, I’m assuming you know basic programming (variables and loops). W3 Schools is a great place to learn PHP more in depth.

To try this code make sure you have XAMPP installed, check out this tutorial if you haven’t set it up yet.

Every script should begin and end with the php open/close tags.

//Comments //rest of code here ?>

Here are some examples

// two backslashes are used for comments // A variable is created using the dollar sign before the name of the var $v1 = "bananas" ; //semicolon after each statement //echo is used to print to the screen echo $v1; //You can print multiple items using a comma $v2 = "apples" ; echo $v1, $v2; //If statements are similar to those in C++ and Java. $uno = 1 ; $dos = 2 ; if($uno < $dos) { echo "WOO!" ; } else { echo "WTF!?"; } ?>

The open/close tags make it easier to mix html in a php page.
If you were to echo your html out you would have to escape quotes like this (quite a pain)

echo "n" ; echo "://www.site.com">my site" ; echo "" value="hello" maxlength="6">" ; ?>

The easier way to do it is to just close the php tag, type your html and open the php tag again. An example would be a php if statement.

if(!$_POST['submit']) //if the form hasn't been submitted, output the html { ?> //close tag here and work in html

//open the tag back up since we're back in php } else { //do whatever in php here } ?>

Now lets go over loops

//the usual for loop for ($i=1; $i<=10; $i++) { echo $i, "ha ha ha "; } //heres a foreach loop, used to loop through an array $myarray=array("red","green","blue"); foreach ($myarray as $colors) { //you can use a "." to splice vars and strings together echo "Color: " . $colors . "
"; }

That’s it for the basics. Let’s start making websites! Click here for Part 1 of my Login System Tutorial.