Create a Portfolio Client Area Using PHP and MySQL: Part 1

Today’s tutorial is the beginning of a series where we’re going to use PHP and MySQL to set up a client’s area on a personal portfolio. The client will be able to sign up/log in, view their current project, send notes to the designer, upload documents, view invoices, and more.

A client’s area is something that is not that common in portfolios, but is usually a great addition to any portfolio nonetheless. If you’re tired of using 10 different tools across the web to control your clients, here is a solution that will put it all in one place.In today’s tutorial, we’ll plan the project, create the MySQL database, and use PHP to create a sign up form for the client. For those who already know PHP, this part may be a bit basic, but bear with us — it should get more intense.

This tutorial will be split up into multiple parts, leaving room for discussion and additions as needed. If in the process of the series you need any help, feel free to ask me on Twitter, or get help in the forums.

Read up on the other parts below:

The Script’s Plan

In order to create a plan for organizing a script like this, we need to lay out what we want the script to do:

  • Let the client sign up/log in to their own account and profile
  • Create a mutual upload area for the client and designer to share documents or images
  • Create a “Message Board” for the client and designer to leave notes back and forth
  • Have a section for invoices and payment procedures
  • Some sort of admin system that will allow the designer to control clients, their information, and data within the client’s area

If there is anything else you’d like to see featured on this list, feel free to leave it in the comment below and I can add it to the tutorial.

In an attempt to get organized, let’s take a look at what we’ll need for a directory structure:

PHP Directory Structure

If the above structure doesn’t make sense, don’t worry, we’ll be working through it for explanation. Keep in mind this structure may also change according to our needs —this is just for some initial organization.

With all that’s needed for the functionality of the script, it’s not going to be a quick and easy task. However, a script like this is easily customizable to each designer, and can can save countless hours in managing clients.

Creating the MySQL Database

We’ll be creating a MySQL database through PHPMyAdmin. Let’s look at some of the data we’ll need in the database:

  • Unique ID
    (To distinct each client’s data and profile)
  • Client Name (username)
  • Password
  • Email Address
  • PayPal Address
    (We’ll be assuming the designer takes PayPal information for payments in this tutorial. Change to other payment information as needed.)

That should give us a good start. We can add more later. Let’s go ahead now and actually create the database.

  1. Open up phpMyAdmin. Go to “Dababases” at the top, and create a new database called “ClientArea”.
  2. This will take you to a new area that will allow you to create some tables within the database. For now, we’re creating a table to hold our clients, so we’ll simply create a new table and call it “clients.”
    Create Table
    The table gets 5 fields for the 5 pieces of information a client in the database will hold: unique ID, name, password, email, and PayPal address.
  3. Next we’ll set up the fields. Below is a screenshot of what I’ve named them, their types, and length values.
    Fields
    If you scroll to the right, you’ll see that client_ID is set to Primary and auto_increment. This will automatically create unique ID’s for the clients.
    Client ID
  4. Let’s insert some sample data to test it out. Go to “SQL” on the top tabs, and insert the following SQL to create a new sample client.
    INSERT INTO clients
    VALUES('', 'Kayla', 'password', 'kayla@webitect.net', 'kayla@webitect.net');

    When we click on “Browse” at the top now, we can see our entered data.

    Browse

That should be all for our database. The next step is to create a sign up form to work with the database and automatically insert client information.

Create a Sign Up Form

Let’s create a sign up form for the client by first connecting to the database, then sending information to the database via an HTML form.

  1. To get started, we’ll set up our basic HTML form, with the action attribute leading to our PHP page: “signup.php.” (not yet created)
    Form

    <form action="signup.php" method="post">
    
    	Username:<br />
    	<input name="username" type="text" /><br />
    
    	Password:<br />
    	<input name="password" type="password" /><br />
    
    	Email:<br />
    	<input name="email" type="text" /><br />
    
    	PayPal Address:<br />
    	<input name="paypal" type="text" /><br />
    
    	<input type="submit" />
    
    </form>

    As you will notice, we’re using the post method in the form. For more information on the post method in PHP and other uses of predefined variables, check out Predefined Variables in PHP: for Complete Beginners.

  2. Next, we’ll set up signup.php. Below is the basic code to insert the data from the form into the database. Note that we have not made db.php yet, and we have much more to add to this code. The comments within the code explain what’s going on. (Placing the script in a code editor like Notepad++ will color code it for easier understanding too.)
    <?php
    
    // Require the file that connect to the database.
    // It is good practice to put the database connection
    // information in a separate file.
    require('db.php');
    
    // Since we used the post method in our form, we can
    // securely call our data using the $_POST predefined
    // variable, with parameters specified by the name
    // attribute in our form.
    $username = $_POST["username"];
    $password = $_POST["password"];
    $email = $_POST["email"];
    $paypal = $_POST["paypal"];
    
    // Finally, we use a MYSQL_QUERY to insert our information
    // into the database. INSERT INTO defines what fields we want
    // to insert information, and VALUES defines the values that
    // we are entering.
    $result= MYSQL_QUERY(
    		 "INSERT INTO clients (client_ID, username, password, email, paypal)".
    		 "VALUES ('', '$username', '$password', '$email', '$paypal')"
    		 );
    
    // Notice in VALUES, we leave the first field blank: ''
    // This is because our database automatically assigns this
    // value to each client.
    
    echo "Thank you for signing up.";
    
    ?>
  3. Let’s connect to the database using a file called db.php. Again, the code comments contain a closer look at what’s going on.
    < ?php
    
    // Replace these parameters with your own database information.
    // I'm running on my own server, so my username is automatically
    // root and I have no password. This will be different on a server.
    $conn = mysql_connect("localhost","root","");
    
    // mysql_select_db is a predefined function in MySQL
    // It let's us call the database, so we can save it
    // in our variable $db
    $db = mysql_select_db("ClientArea");
    
    // When a file contains only PHP, it is a good practice
    // to not end the file with "?>"
  4. So lets go ahead and finally test out our form. I entered in John as the username, ‘abc123′ as the password, and two of my emails for the email and PayPal fields.
    Sign Up
    The first time I got the data entered into the database, I saw a few errors, which I could quickly fix by looking at the HTML form. Specifically, I had some of the ‘name’ attributes messed up from copying and pasting. This is why you will see that the client_ID has skipped from 1 to 3. (2 was deleted)

    Now that we’ve successfully created our sign up form, we can continue on with our script.

Wrapping Up

We handled a pretty big chunk of the project today: the planning stage, setting up the database, and creating and testing a general sign up form. In the next tutorial, we’ll secure the sign up form using encrypted passwords, avoid SQL injection, and make sure the emails are really emails.

There’s really a lot of security information when creating any sort of form that connects to a database; that’s why we’re leaving it for a separate part of the tutorial.

Please leave your comments if something is not clear, or have a great idea for an addition to the script.

Written By Kayla

Kayla Knight is a 20 year old college student, part-time web developer, freelancer, and blogger. Webitect is where she spends too much of her freetime, sharing interesting finds and valuable resources. Be sure to check out her portfolio.

10 Comments

  1. John Nerush

    July 3rd, 2009 at 03:48 am

    Looks like a solid foundation for an interesting set of tutorials. Good work.

  2. Ansar Ahmed

    July 3rd, 2009 at 09:58 am

    Nice tutorial but please don’t code(shit) like freshers same will be followed by other who read this post, Keep in mind to filter the user input use mysql_real_escape_string

  3. Hadret

    July 4th, 2009 at 02:58 am

    Yeah! It’s going to be very interesting set of tutorials. Maybe I’ll at last learn how to make sessions properly using PHP + MySQL :P

    Anyway, keep up great job. As of some ideas, I suggest that maybe creating or implementing (for example using some JavaScript) WYSIWYG editor for content field might be useful (:

  4. Dainis Graveris

    July 4th, 2009 at 07:52 am

    Ah great tutorial, I already forgot many things about php and mysql..and your first part ir really good written :) Keep up, thanks!

  5. Derrick

    July 4th, 2009 at 07:21 pm

    Even though Ansar was quite rude, he is correct. The query used to insert a record into the clients table should be using the mysql_real_escape_string() function for each variable passed. This protects your query from SQL injection attacks.

    It is also highly recommended that you never use a root account to connect to MySQL – especially if you have not set a password.

  6. Kayla

    July 4th, 2009 at 10:38 pm

    @Derrick

    I was going to go over SQL injection in the next tutorial, when we secure the sign up page. Using the function to mysql_real_escape_string() was not used this time to noticeably change it and discuss the significance next tutorial.

    Also the server I’m working with is Wamp, so it is hosted locally on my computer. The only way to access it is with root.

  7. !DMT

    July 5th, 2009 at 03:34 pm

    This is something I have been scouring the web for! Thank you so much for taking the time to take us step-by-step on how to do something like this!

  8. Derek

    July 26th, 2009 at 11:19 pm

    So far so good, btw kayla you are very pretty :)

  9. Blaze

    August 26th, 2009 at 12:51 am

    I have been looking for a client login option for so damn long! i love u

  10. Marika

    October 9th, 2009 at 04:30 am

    hi there, i was trying to create new database, but the moment i click on create new database, it says no privaliges? How do I work around this?

    Kind regards