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

This tutorial covers the noteboard: the page where the client and admin will be able to post messages back and forth, in an area that is organized for effective communication. Time to throw away those disorganized email messages!

Whether your just joining us, or you’d like to view the previous tutorials for reference, the links to the other parts of the series are below:

Alright, let’s get started…

What We’ll Be Making

Below is an image example of what we’ll be making in today’s tutorial. Note that we’re not going to style it at all, and the image below represents something that would be made with a jQuery accordion, which we’re also not going to do in this tutorial.

However, we should be able to complete a basic message board system that integrates with our current client area we’ve created so far in this tutorial. I’ll help you create the basic structure, and then let you do all the added functionality and styling.

Wall

If you can’t get an accurate depiction of what this tutorial will do, a similar feature is on oDesk for their inbox. I use this method primarily when finding clients via oDesk, and have discovered it to be a very efficient and organized method of communication.

Create a Plan

Let’s first create a plan, or workflow, for how this will work so we can get started, fixing any bugs along the way. When beginning to brainstorm this process, you may have noticed that this will be very similar to our “documents.php” page (previous tutorial), except that we’ll be adding and viewing data in the form of text, rather than a file.

Below is the general workflow organized into a list:

  1. A simple form will be shown where the client can add a message .
  2. That form will be processed by sending the user’s message to our database. In the database, we’ll be creating another table for our noteboard to place all of the messages.
  3. When placing the client’s message in our new database table, we’ll also place it with our client’s ID so that we can separate it out from all of the other client messages that may be in the table.
  4. We will then retrieve the information from the database, thus showing the noteboard on the page. We can retrieve the information in the same way as on our documents page, by listing all of the messages with the same ID as our client’s ID.

Like discussed in the last tutorial, this tutorial will cover no admin features just yet. We’re laying out the foundation for our admin area with this.

Create the Database Table

Our first step is to create the table in our database to hold all of our notes. There are three fields we’ll need to include:

  1. The client’s ID
    This will be used to display information accordingly by checking the logged in client’s ID with matching ID’s in the table.
  2. The Message
    We obviously need to save the message itself into the database, so we can all it when necessary.
  3. The Date
    As a note board, we’ll need to pay attention to the date the message was posted. Not only will we want to display the date it was posted, but we’ll also want to organize the messages by date so that they are in chronological order.

So let’s go and create our table. Like all of my other tutorials, I’ll put it in step-by-step form, with images included. Hopefully by now you’re starting to get a better feel for working with databases and PHP, and how to create them accordingly for your own scripts.

  1. Log into phpMyAdmin and navigate to the clientarea database.
  2. Right now we see our two tables that we’ve made in previous tutorials of the series: clients and uploads. We’re now going to create a new table called “noteboard”. We’ve already determined above how many fields we want to include in the table, so put “3″ in the number of fields.Create Noteboard
  3. Let’s now fill out the fields to meet our needs:Client AreaWe have our client_ID which will, of course, hold our client’s ID so we can match it up later with the correct notes in the database. We have a field for the date, which we will automatically insert into the database with PHP, and finally, the third field contains our client’s message.Take note of the field types and length/values as well. The first field’s type and value have been explained in previous tutorials, but the last two are different. For our date, we put it into a date type, which will automatically format our date correctly when using PHP to store it. Our message is a basic VARCHAR, which means text, and we’ve set a character limit of 500 characters. 500 characters is easily a few paragraphs worth of text.
  4. Click save and we should be done with creating our new table.

Create Page and HTML Form

Let’s now structure the basic page to see how things will be organized. We’ll also be creating our basic HTML form, getting everything set up for it to function with our script.

Create a new page; I’ll be calling this noteboard.php. Before getting into anything, take a look at our basic page structure below. One will notice that it is nearly identical to our documents.php page.

<?php
     // Our scripting to handle our note board will be here.
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Your Portfolio - Client Area - Note Board</title>
</head>
<body>

<!--
     Our form will go here. It will redirect itself to the same page to process our
     note board message, since our PHP code is on the same page (at the top).
-->

</body>
</html>

One can see that it’s a pretty basic structure: a general XHTML Strict 1.0 page that will include an HTML form. The form will lead to the same page, and since the page name ends with a .php extension, we can include PHP code at the beginning to process any information sent to the server (sent by the form.)

If there is no information to process (the form has not submitted anything yet), the PHP code will be ignored.

For our HTML form, we just need a text area and submit button. Easy enough, right?

<form action="noteboard.php" method="post">
<h3>Message:</h3><br />
<textarea name="message" cols="30" rows="10"></textarea><br />
<input type="submit" value="Submit" />

Like always, we use the post method for transferring our data to the server. Read up on any previous tutorial in this series to learn why. We also send our form data to “noteboard.php” to be processed, our same page.

<?php
     // Our scripting to handle our note board will be here.
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Your Portfolio - Client Area - Note Board</title>
</head>
<body>

<form action="noteboard.php" method="post">
<h3>Message:</h3><br />
<textarea name="message" cols="30" rows="10"></textarea><br />
<input type="submit" value="Submit" />

</body>
</html>

Note I’ve placed our form in our page structure above.

Enter the Client’s Note into the Table

Remember, for this section we can reference much of our script from our documents.php page. Let’s take a look at the first portion of that page:

<?php

session_start();

if(!isset($_SESSION['username'])){
    header( 'Location: loginform.html' );
}

require('db.php'); // Connect to the database since we'll be needing it later.

// Where the file is going to be placed
$target_path = "uploads/";

// Get's the client_ID
$client_ID = mysql_query("SELECT 'client_ID'
	FROM 'clients'
	WHERE username='".$_SESSION['username']."'");

if(!empty($_FILES)){
	// Add the original filename to our target path.
	// Result is "uploads/filename.extension"
	$target_path = $target_path . basename( $_FILES['uploadedfile']['name']);

	if((!$_FILES["uploadedfile"]["type"] == "image/gif")
	  ||(!$_FILES["uploadedfile"]["type"] == "image/png")
	  ||(!$_FILES["uploadedfile"]["type"] == "image/jpeg") // "jpeg" for Firefox
	  ||(!$_FILES["uploadedfile"]["type"] == "image/pjpeg") // "jpeg" for IE
	  ||(!$_FILES["uploadedfile"]["type"] == "text/css")
	  ||(!$_FILES["uploadedfile"]["type"] == "text/html")
	  ||(!$_FILES["uploadedfile"]["type"] == "text/javascript")
	  ||(!$_FILES["uploadedfile"]["type"] == "application/msword")
	  ||(!$_FILES["uploadedfile"]["type"] == "application/pdf")
	  &&(!$_FILES["file"]["size"] < 100000)){
		  echo "The file is not of the right type or size. It should be a
				.gif, .png, .jpeg/.jpg, .css, .html, .javascript, .doc, or .pdf and under 100kb.";

		  echo "
If you need to send me a file different from these specification, feel free to
				email it to me at you@domain.com. These specifications are for the website's safety.";
	}else{
		if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
			mysql_query("INSERT INTO uploads(ID, URL) VALUES ('$client_ID', '$target_path')");
		} else{
			echo "There was an error uploading the file, please try again!";
		}
	}
}

...

?>

The script continues on a bit, but what I’ve highlighted in orange above are the same basic things we’ll need for this noteboard. First, we see if the client is logged in, connect to the database, and start the session — all basic user stuff.

Then, we can get the client_ID. If you’d like, you can go back to our login form and set the client_ID as a session variable. Depending on how you will be specifically using this script, it may be more efficient that way. We did it this way in the tutorial so I could show you how we could call some data later on that wasn’t originally in session variables.

The last bit that is highlighted in orange was the bit about inserting the data into the database, which was originally sent to the server by the form on the same page.

To customize this to our noteboard page, let’s first place all of the necessities in the correct place and customize it with our new table. The code really isn’t very long, it’s just that there are plenty of comments in the version below for clarity.

< ?php

// Start the session
session_start();

// Check to see if the user is logged in
// If they're not, they are redirected and code further down
// the page won't be processed.
if(!isset($_SESSION['username'])){
    header( 'Location: loginform.html' );
}

// Connect to the database
require('db.php');

// Get the client's ID and save it in the variable $client_ID

// Run the query to select the data
$client_ID = mysql_query("SELECT client_ID
	FROM clients WHERE username='".$_SESSION['username']."'")or die(mysql_error());

// Put that data into an array we can work with
$client_ID = mysql_fetch_array($client_ID);

// Select the client ID field from our array, and
// replace it into our original variable once again,
// "$client_ID" for ease of use
$client_ID = $client_ID['client_ID'];

// Insert our data into our newly created table
mysql_query("
	INSERT INTO noteboard(client_ID, date, message)
	VALUES('$client_ID', CURDATE(), '$_POST[message]')
	");

?>

Let’s place our PHP code where it’s supposed to be in our noteboard.php file, and see if it works.

When we test it out, the form will send but we don’t see anything yet from the noteboard.php’s perspective. Instead, we must go into phpMyAdmin to see if it worked. Go into the clientarea database, then into the “noteboard” table, and see if there is any entered information.

Make sure the client_ID, date, and message are correct. If they are, then it has worked and we can proceed to display the notes on the page.

Call the Client’s Notes from the Table

Our final step is to list out the client’s notes. This should be very similar in nature to our documents.php page where we listed out the previously uploaded documents. To list out all of the notes, we select all of the notes from our table where the “client_ID” matches that of our current client’s ID.

// Displays all current notes
$getNotes = mysql_query("SELECT * FROM noteboard WHERE client_ID='".$client_ID."'");

while($row = mysql_fetch_array($getNotes, MYSQL_ASSOC)){
    echo "Posted by " . $_SESSION['username'] . " on " . $row['date'] . "<br /><p>"
	. $row['message'] . "</p><hr />";
}

Create a few test messages to see if it works. You may want to fiddle around with the surrounding HTML to make sure it’s free of errors and looks acceptable.

PHP MySQL

One last item: If we want to organize our notes by date, that is easily done with a small PHP snippet. Add the following in orange to the line below:

// Displays all current notes
$getNotes = mysql_query("SELECT * FROM noteboard WHERE client_ID='".$client_ID."' ORDER BY date");

This will automatically order the data by our date, and then display it in order.

Our Final Script (noteboard.php)

<?php

session_start();

if(!isset($_SESSION['username'])){
    header( 'Location: loginform.html' );
}

require('db.php');

$client_ID = mysql_query("SELECT client_ID
	FROM clients WHERE username='".$_SESSION['username']."'")or die(mysql_error());
$client_ID = mysql_fetch_array($client_ID);
$client_ID = $client_ID['client_ID'];

mysql_query("
	INSERT INTO noteboard(client_ID, date, message)
	VALUES('$client_ID', CURDATE(), '$_POST[message]')
	");

// Displays all current notes
$getNotes = mysql_query("SELECT * FROM noteboard WHERE client_ID='".$client_ID."' ORDER BY date");

while($row = mysql_fetch_array($getNotes, MYSQL_ASSOC)){
    echo "Posted by " . $_SESSION['username'] . " on " . $row['date'] . "<br /><p>"
	. $row['message'] . "</p><hr />";
}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Your Portfolio - Client Area - Note Board</title>
</head>
<body>

<form action="noteboard.php" method="post">
<h3>Message:</h3><br />
<textarea name="message" cols="30" rows="10"></textarea><br />
<input type="submit" value="Submit" />

</body>
</html>

Wrapping Up

This tutorial should hopefully be a review for the most part of the documents page. It is very similar in nature, and we can see how easy it can be to host data online and display it accordingly to our needs. That should be it for the client side of our tutorial, and next week (or whenever I get a chance to grind out the next part) we’ll finally be starting the admin area.

The importance of finishing up the client’s side so far is that we can now better plan for our admin area, because we now already know exactly what we need to accomplish. Keep a lookout for the next tutorial by subscribing to our RSS feed.

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.

33 Comments

  1. SourFacedCyclop

    August 28th, 2009 at 01:04 am

    Awesome post and series. It is really great for people (like me) who aren’t completely php literate (yet) as well as a great learning too. Any idea how many parts it will be? Can’t wait for the next one.

  2. Kayla

    August 28th, 2009 at 08:57 pm

    I’m glad they can help you out! There was nothing I hated more when learning PHP myself that blared out a lot of programming jargon I couldn’t understand. Most PHP tutorials were like that, and I’m just glad I can contribute to an easier-to-read portion of tutorials!

    I have no idea how many parts the entire tutorial will be, right now I’m just trying to break it down enough so that the script in it’s entirety is 100% understandable. …We should be nearing the end, however at the this point.

  3. tim

    August 29th, 2009 at 09:12 pm

    i had to add a condition to check if $getNotes contained something to avoid an error when no messages were available to display…

    thanks for the informative tutorials kayla!

  4. Kayla

    August 29th, 2009 at 09:50 pm

    Thanks Tim! I’ll try to add that in the tutorial when I get a chance.

  5. Justin

    August 30th, 2009 at 11:04 pm

    Your Comments

  6. Justin

    August 30th, 2009 at 11:04 pm

    Once again, another great tutorial! I cant wait until you start the admin section.

  7. De

    October 6th, 2009 at 08:06 am

    I was going to start this until i saw the last part is not made yet :(

    good walk through none the less

  8. Paul

    October 7th, 2009 at 01:16 am

    Loving this, great job and looking forward to part 6!

  9. Saurabh Shah

    October 9th, 2009 at 09:30 pm

    This was an awesome series of tutorial. how about if you can put some DEMO of this Tutorial.

    i just love this tutorial.

    looking forward for more kayla.

  10. Andy

    November 11th, 2009 at 05:32 pm

    Hey there, great tutorial. I’m trying to learn php through web tutorials but keep running into problems when new versions of languages come out that change how things were done in previous versions of a language. I wonder if writers could include what version of PHP/MySQL/jQuery/CSS/HTML/ {insert language here} they are using for the particular tutorial they are writing. That would be a great help, plus would be way easier than trying to comeback and update the tutorial for the new version of the language. That would be impossible for anyone to keep up with, but adding which version of which language to the tutorial would help out people just learning, as well as people trying to troubleshoot.

    Anyway, just a thought. Any chance at seeing part 6 anytime soon?

  11. glepiza

    February 11th, 2010 at 01:57 pm

    Is part six coming anytime soon?? I’ve been waiting for it since last year :(

  12. eric

    March 10th, 2010 at 12:38 pm

    Looks great. But a link to a demo would be great too to see how it all comes together.

  13. Sam

    March 12th, 2010 at 12:15 pm

    Where have you run off to Kayla????

  14. Yanith

    March 17th, 2010 at 08:02 am

    Great tutorial, it was very easy to understand ))

    have you planned to post the admin area?

  15. Callum

    August 3rd, 2010 at 09:28 pm

    Are you going to post more? This is a good tutorial! Need to know how to make the back end for it . :)

  16. Qaysar

    August 16th, 2010 at 01:26 am

    Hey there, really awesome tutorials todate. Please let me know when you will be creating the admin area for this terrific piece of work.

  17. Qaysar

    August 26th, 2010 at 08:36 am

    Hey Kayla,

    Will you be creating the next section of tutorial’s anytime soon. You have created some nice tutorials for this section so far it would be a shame to leave it half way through.

    Please advise when we can look forward to some more awesome tutorials as it’s been over a year since anything was posted on here.
    Thanks

  18. Qaysar

    September 6th, 2010 at 06:38 am

    Hi,

    Does anybody have a more advanced download feature than the one provided, as it only opens the files to view in a new browser window (atleast for IE) want to be able to save the files to the hard drive.

    Thanks

  19. Qaysar

    September 8th, 2010 at 03:35 am

    Hi,

    Sorry to be a pain, does anyone have a fix to the download files problem that I mentioned??

    Any help is much appreciated.

    Thanks

  20. Qaysar

    September 13th, 2010 at 08:56 am

    Hello can anybody help me please.

    I have been racking my head trying to figure out why the client ID is not enetered into the database when uploading images.

    please email me on qakbar@hotmail.co.uk

  21. Ash

    September 26th, 2010 at 04:09 pm

    Thank you Kayla for a fantastic tutorial.
    You have taken the time to break down and explain what each piece of script does and I think it’s fair to say that myself and others really appreciate the time and effort you have taken to make this available to us all.

    Looking forward for your part-6 of the tutorial :D

  22. Jason

    October 6th, 2010 at 09:02 am

    Whenever I go to noteboard.php or refresh the page it posts a blank message. Is there anyway that I can change it to where it only posts something with the submit button. Maybe just code to tell it not to post anything >1 character?

  23. Fran

    November 16th, 2010 at 10:50 am

    Thankyou so much for this Kayla, you have made my life a lot easier – it was so easy to follow.
    Thankyou for being so generous with your time. Thanks again.

  24. blah1

    December 1st, 2010 at 06:56 am

    Did Kayla die?

  25. Rob Macintosh

    January 6th, 2011 at 04:13 pm

    @Jason

    To resolve the problem of a blank post every time the page loads, I used PHP “empty” to determine if the variable was empty;

    if(!empty($_POST[message])){

    mysql_query(”
    INSERT INTO noteboard(client_ID, date, message)
    VALUES(‘$client_ID’, CURDATE(), ‘$_POST[message]‘)
    “);

    }

  26. Rob Macintosh

    January 6th, 2011 at 04:13 pm

    P.s. if anyone else has a better method, please do let me know via e-mail!

  27. Tony

    May 9th, 2011 at 06:11 pm

    This form is HUGE

  28. Dude

    June 15th, 2011 at 01:09 am

    Amazing tutorial.

    Awaiting for ADMIN Area.

  29. Julie

    September 5th, 2011 at 07:30 pm

    Is Part 6 with the admin area and implementing the noteboard completed and/or posted yet? If so, can someone respond with the link, please? Thanks so much, I love this tutorial! Very efficient is explaining everything easily!

  30. Helder

    January 19th, 2012 at 11:52 am

    Congrats!!!!
    Very nice tut :) thanks a lot, it helped me in some things in work!!!!
    Thanks from Portugal!!!

  31. Daniel

    January 25th, 2012 at 10:21 pm

    I was really enjoying this tutorial! Please make a part 6 Kayla!

    Or upload it all to a ZIP somewhere.

    I have idea’s on how to finish but I doubt it will be as perfect :-)

  32. Cat

    February 13th, 2012 at 06:34 am

    Great tutorial! I love how it’s broken down into easily understood parts. I can’t wait till part 6 comes out!

  33. Qaysar Akbar

    March 30th, 2012 at 09:18 am

    Hi Kayla,

    People have been waiting for 2 years for part 6 etc… If you are not gonna do it can you at least reply with a comment to say you will not…. It can’t be that hard to do this much atleast, it’ll put everyone out of their misery.lol

    To all those interested….. Please head over to SSD Tutorials (http://www.ssdtutorials.com/) This website has loads of resources with free videos and code supplied as well as premium tutorials which are fantastic. Sebastian Sulinski is the owner of the site and he is very helpful on the free tutorials and premium tutorials. I have been a member for years and don’t bother searching on the web as most of the time you will find a solution on his website. He also does basic tutorial request, where you can email him and request a tutorial and if he has the time he will do it free of charge. All the tutorial’s are explained quite in depth and anything you do not understand he can help with.

    If any of you do go their stop and say hello to him and don’t forget to mention my name to say I pointed you into his direction.

    Thanks all….

    Qaysar

What Do You Think?