Creating A Virtual Note Wall

Today we’ll be creating a neat little app called Note Ninja, which allows for the user to tack up multicolored “sticky notes” on a virtual wall.

This app is useful to the kind of person that has dozens of little ideas or reminders they want to remember. Personally I sometimes store these reminders by writing them in a notepad file then saving them to a folder to read later (if I ever get to that). With this app I’m able to display all of my notes in a much more user-friendly way, were I can easily sort, delete and create new notes!

So before we begin let’s create a roadmap of how we’re going to go about building this app. The steps are listed below:

  1. First is to create the database to store the notes information, location and color
  2. Second we’ll wire frame the site with HTML and then style it with some CSS
  3. Third is to create the PHP backend to display all the notes already in the database and also allow for deletion, creation and updating of the notes
  4. The last step is to add some jQuery. jQuery will tie everything together with interaction and sending data to and from our PHP file.

Before We Begin…

For this tutorial I’m assuming you’re comfortable with HTML and CSS. I’m going to focus mostly on PHP and jQuery, so if you have intermediate knowledge in these two you’ll be fine. If you do get lost or confused please contact me or leave a comment and I’ll try to get you on the right track. With that let’s get started on the database!

Also I’d like to thank bittbox for the paper texture used and famfamfam for the delete icon.

Creating the Database

We’re going to create only one database called noteninja, which will contain a table named notes. The table notes will contain 5 rows, note_id, note_text, note_x, note_y and note_color.

Open up phpMyAdmin or your mySQL console and enter the following SQL:

CREATE DATABASE `noteninja`;

CREATE TABLE `notes` (
`note_id` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
`note_text` TEXT NOT NULL,
`note_x` INT(10) NOT NULL,
`note_y` INT(10) NOT NULL,
`note_color` TEXT NOT NULL
);

Here’s an explanation of what each of these rows will contain:

  • note_id will allow us to reference specific notes with a unique number id
  • note_text will contain what the note will say
  • note_x and note_y hold the x and y position of the note
  • note_color is going to have an rgb color value for our note (I’m not using hexidecimal since a jQuery function we’ll be using won’t work with it)

Before we finish up with the database let’s create two dummy notes, this will help us test our PHP later on.

INSERT INTO `notes` (`note_id` , `note_text` , `note_x` , `note_y` , `note_color`) VALUES
(NULL , 'This is my first note!', '50', '50', 'rgb(184, 195, 178)'),
(NULL , 'This is my second note!', '150', '100', 'rgb(184, 195, 178)');

So with the first dummy note it’ll be positioned 50px from the top, 50px from the left and have a light blue color.

That’s all were going to need for our database, let’s start fleshing out the app with some HTML and CSS.

HTML & CSS

This site is going to only really have two elements, the logo, which will always be on the top left of the screen, and the individual notes which will float freely inside a containing div.
To give you a good idea of the layout the image below shows the elements used and how it’ll look once we add the CSS. The images we’ll be using are packaged inside our project file which can be found at the top of this post.

The anatomy of a note

As you can see most of the action is going to be inside the note class. The note class has two elements nested within it, the text and options class.

The text class is going to display the textual information of the note and will be visible at all times. The options class on the other hand will only be visible on hover and contains a colorlist, which will allow the user to change the note’s color, and an x button to delete the note.

Let’s get started creating the HTML wire frame. Create a new file called index.php and write the following HTML within it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Note Ninja - Most Honorable Sticky Notes</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>

	<body id="notewall">
		<img src="images/logo.png" alt="Note Ninja" />

		<div class="note" style="background:#E8BF56; top:100px; left:50px;">
			<div class="ninjastar">
				Ninja'd!
			</div>
			<span class="text">This is a test note</span>
			<textarea class="inputtext">This is a test note</textarea>

			<div class="options">
				<ul class="colorlist">
					<li class="blue">a</li>
					<li class="red">a</li>
					<li class="yellow">a</li>
				</ul>
				<div class="x">
					<img src="images/delete.png" alt="" />
				</div>
			</div>
		</div>

	</body>
</html>

First thing we do is link to the style sheet, style.css, which we’ll be creating shortly. Next we have our logo image which when we style the page will stick to the top left edge.

Inside the note div you’ll see the parts that I’ve mentioned. A span tag with the text class which will hold the note’s text, the options div that has an unordered list of colors and an image of a delete button.

What’s new though is the ninjastar and textarea class, which will make more sense once we add some jQuery. The ninjastar is going to be an image of a ninjastar that will animate when we delete a note, and the textarea is a duplication of our text but in an editable form so we can change the text easily. You can get a better idea of how these two will work by trying the demo linked at the top of this post.

You’re HTML page should look like this, a mess, until we add our style sheet

Let’s make this page look more like a proper app with some CSS. Create a new file called style.css and write the following CSS within it:

/*- General -------------------------------*/
* { padding:0px; margin:0px; }
body { background:url(images/wood.gif); }
#notewall { position:relative; }

/*- Note ----------------------------------*/
.note { width:150px; position:absolute; padding:4px; font-family: Arial, Helvetica, sans-serif; color:#1a1a1a; font-size:12px; line-height:1.5em; }
	.note .inputtext { display:none; width:150px; border:none; font-family: Arial, Helvetica, sans-serif; color:#1a1a1a; font-size:12px; }

.options { position:relative; display:none; margin-top:10px; }
	.colorlist { float:left; }
		.colorlist li { list-style:none; width:10px; height:10px; border:1px solid #1a1a1a; cursor:pointer; text-indent:1000%; overflow:hidden; margin:1px; display:inline-block; }
		.red { background:#B8C3B2; }
		.blue { background:#C75233; }
		.yellow { background:#E8BF56; }
	.x { float:right; cursor:pointer; padding:0px 4px; }
	.ninjastar { position:absolute; background:url(images/ninjastar.png) no-repeat; width:68px; height:116px; overflow:hidden; text-indent:1000%; z-index:2; margin-top: -40px; margin-left:55px; display:none; }

The General section resets the default styles for our page, adds the background image and makes the container have a relative position. A relative position for the container allows the nested elements within it, like the notes, to float freely.

Our Note section adds some styles to our notes, like colors, fonts and sizes. We also have our .options, .ninjastar and .inputtext set to display:none, so we don’t see them until they’re needed.

With our stylesheet in place our site is now taking shape

That’s it for our HTML and CSS, now we can make this page more dynamic with PHP!

Adding Some PHP

Were going to use php in two areas, first we’ll add a block of code into our index.php file that will loop through and display the notes already in our database. Second we’ll have a remote file, newnote.php, which will process requests to update, delete and add notes.

Read more