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:
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)
- 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.
- Open up phpMyAdmin. Go to "Dababases" at the top, and create a new database called "ClientArea".
- 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."
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.
- Next we'll set up the fields. Below is a screenshot of what I've named them, their types, and length values.
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.
- 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', 'email@example.com', 'firstname.lastname@example.org');
When we click on "Browse" at the top now, we can see our entered data.
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.
- 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 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.
- 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."; ?>
- 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 "?>"
- 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.
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.
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.