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:

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.

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.
3. Let’s now fill out the fields to meet our needs:We 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.

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.