TutToaster » Tutorials

40 Great PhotoShop User Interface Tutorials

Swat Chap — Fri, 04 Feb 2011 16:10:48 +0000

Every website needs to be designed which are called web layouts. And one of the leading tools available and possibly for many more years to come is photoshop.

Photoshop has become a favorite among designers for various reasons. In this collection, we look at 50 of the best web layout tutorial around the web. The collection contains tips, and tricks that can be handy for both beginers or advanced.

how to design an elegant website layout in Photoshop

Software Layout #4

Photoshop a Paper Texture from Scratch then Create a Grungy Web Design with it!

How To Create a Clean and Colorful Web Layout

Design a Beautiful Website From Scratch

Design a trendy business & finance layout

Design a creative portfolio in Photoshop

Create an awesome soft portfolio layout in Photoshop

Create a Bright and Sleek Web Design in Photoshop

Design a clean sports web layout in magazine-style with Photoshop

Learn To Create A Photography Style Web Layout

How to create a distinguishable textured web layout in Photoshop

Design a Warm, Cheerful Website Interface in Adobe Photoshop

Create a Theme Store Website Layout in Photoshop

Design The Brilliante Website Layout in Photoshop

Creating a Stylish Blog Design Layout in Photoshop

Create an Elegant Photography Web Layout in Photoshop

Create a Stylish Portfolio Site Design in Photoshop

How to design a psd layout in Photoshop

Design a creative unusual layout

Web Layout for Italian Restaurant

How to create a restaurant psd template in Photoshop

Design a Cartoon Grunge Website Layout

Design an impressive web hosting layout

How To Create a Rockin’ Website Layout In Photoshop

How to design a landing page or a light psd layout in Photoshop

Product/Business Style Layout

How to create a modern portfolio layout using Photoshop

Create a Magic Night Themed Web Design From Scratch in Photoshop

Create a Game layout – Clan Layout

Create a company/business web layout using Photoshop

Watercolored Design Studio Blog Layout

Create a real estate web layout in Photoshop

How to create a wordpress theme in Photoshop

Create Colorful Blog Web Layout Using Photoshop

Making the ‘Clean Grunge’ Blog Design

Create A Minimal Portfolio Site Design

Portfolio Layout Design Tutorial with 3D Look

Many of these tutorials show detailed steps, so even the beginners can try them and for the advanced you can easily find some tips and tricks that are sure to come in handy. As they say, practice makes perfect, so try out a couple of tutorials and with photoshop here to stay for the long haul, you don’t need to worry about it becoming outdated. Did we miss any of your favorite tutorials? Which one was your favorite? Please let us know by commenting below.

The Ultimate Background Removal Guide with PhotoShop

Sergiu Naslau — Mon, 13 Dec 2010 08:28:31 +0000

A picture is worth 1000 words. But what if I wanna “cut” some of those words and create my own message? GNU Image Manipulation Program (GIMP) and Adobe Photoshop are two of the most popular image editing tools out there. In this article, we will look at Photoshop’s capabilities. Photoshop offers us the possibility to remove a subject from a photo, but how to do that? Which tool will do the best job?

Getting started!

Photoshop offers us a bunch of tools for background removing, but lets take a closer look at this. To actually remove the background or a subject from a picture, first thing you have to do is to select it. Because of this, I have split up this process in two parts:

The selector tools.
The eraser tools.

The selector tools offer us the power to delimit the subject, so in later actions we can copy or remove it. The tools are:

the lasso tools;
the pen tool;
quick/magic selection tools;
quick mask;
the color range app;

The eraser tools remove the pixels from inside the selection, or outside the selection.
This tools are:

the eraser tools.
the extract filter.

Note: even if every tool has a different objective they will not always give the best results, that is why a combination of them all will create the perfect selection/background removal.

Lasso Tool

One of the oldest tools offered by Photoshop, the lasso tool a beautiful way to select something fast and with no headaches. The lasso tool lets us create a continuous manual selection by click around the subject.

Photo Source: Yellow Flower

So we have this nice photo of a flower, with a cleare contrast that will help me show you how to use the lasso tool.But first thing, create a new copy of the photo, in case we do to much damage, or need to compare the final result, we can go back to the original and see.

How to Convert a Slick PSD Design to XHTML/CSS

Cody Robertson — Thu, 16 Sep 2010 05:06:44 +0000

Converting a Adobe PSD to a static HTML/CSS page can be quite the hassle, so today I will demonstrate how to go about the process. We are going to take the PSD template below and convert it to a fully XHTML/CSS layout that works in all major browsers (IE6+). The page is essentially broken down to five major sections, each one having its own container wrapping custom content. We will approach this conversion by first writing valid XHTML code then add CSS to make the page resemble the PSD. Lets begin by looking at the PSD and what we want to take from it.

Click on the image to download the psd files for this tutorial.

Ruby for PHP Developers

Jose — Thu, 09 Sep 2010 07:08:17 +0000

With our knowledge of PHP we can learn a lot about Ruby. Use of variables, loops, arrays, functions and classes, everything starting from PHP. In the end, there is an example to see all together where we’ll combine what we have learnt to see something really useful in action.

Brief Introduction

We could say PHP and Ruby (plus a framework) are the most used language in the Internet. There are many reasons, but the best one for our purpose is they are very similar in some points. So we are going to learn Ruby using those points as a support, and, trust me, if you know a little bit more about PHP than echo, it’s going to be pretty easy to learn the basis of Ruby.

These are the steps you need to follow to install Ruby in your operating system.

Windows: Download the package from the official web: Ruby Downloads.
Mac OS X: Preinstalled.
Linux: Just type: “sudo apt-get install ruby-full”.
Other Operating Systems: Go to the official page Ruby Downloads.

Variables

Ruby is a dynamic language, just like PHP, so we don’t need to define a variable. The difference here is the types, Ruby is a strongly typed language, so if we want to convert an integer into a string we need to call the proper function. Take a look at this couple of examples using variables in PHP and Ruby.

number = 3
puts "The number is " + number.to_s

These scripts have the same objective, concatenate a number to a string, and display the result. We can observe the first differences with PHP:

The echo function of PHP is “puts” in Ruby. We use puts to show the result of a function or just for debugging purposes.
There is no end of line with semicolon, so the line finishes when a new one starts.
The concatenation in Ruby is made with the plus sign, not with point.
As we have said before, in Ruby we need to convert the type integer into string to show it. (In the PHP example we just use it, and the programming language takes care of its conversion).
As you might guess, there is a function for every type conversion, so we have “to_i” to integer, “to_f” to float and “to_s” to string.

Arrays and other structured variables

The use of arrays is as simple as in PHP, basically we can do most of the things we do in PHP with the tools Ruby offers us. Let’s see the first step to use arrays, its creation and the access to them. By default the index of an array starts in 0.

# Simple array with 3 elements
animals = ['dogs', 'cats', 'spiders']
puts animals[2] # third element

# Another way to create an array
cars = Array.new
cars << 'BMW'
cars << 'Toyota'
cars << 'Ford'
puts cars[0]

# Hash (or array with not integer keys)
h = Hash["this_is_a_key", 100, "other_key", 200]
puts h['other_key']

The output is:

Pretty simple, right? Well, besides of those methods we have some more for working with arrays, in PHP you have similar ways to get the same data, but in Ruby is even easier.

animals = ['dogs', 'cats', 'spiders']

puts animals.first # Output: dogs
puts animals.last  # Output: spiders
puts animals.length  # Output: 3

In the last three lines there is an important point to be noticed. We called animals.first instead of first(animals). That’s because arrays are objects. But arrays are not the only ones, strings, numbers, hashes are also objects. As we have seen in the last example, we’ll usually call to a function with something like “x.function” instead of “function(x)”.

Conditionals, loops and functions

Conditionals

We have seen the basics of Ruby, but we need more to do something useful. Ruby has the same classic conditionals that PHP: if, else, elsif (not elseif!). All the conditionals structures finishes with “end”, and we don’t have to put parenthesis like in PHP, it’s optional in Ruby.

number = 70

if number > 90
	puts 'This number is near to 100'
elsif number > 50
	puts 'This number is greater than 50'
else
	puts 'This number is less than 50'
end

# The output will be: 'This number is greater than 50'

Loops and functions

In PHP the loops and functions are as simple as in Ruby. In Ruby we have basically similar loops to the ones we have in PHP, but the syntax is a little bit different, let’s kill two birds with one stone and see the functions and loops in the same example, trust me, it’s going to be easy.

# Function definition
def show_elements(array)
	array.each_with_index do |element,index|  # Similar to foreach in PHP
		puts "#{element} is in the array at #{index} position."
	end
end

animals = ['dogs', 'cats', 'spiders']
# We call the function
show_elements(animals) # We can also call it with "show_elements animals"

Its output is going to be:

Let’s see the others loops. Here we have a typical while where we increment a counter, very similar to the while in PHP, right?

times = 4

now = 1
while now <= times
    puts "Iteration number #{now} of #{times}"
    now += 1
end

There is one kind of loop we have in Ruby and not in PHP, the “until”, its use is very simple, so in the next example we’ll see it with the for loop.

times = 4
now = 1
until now > times
    puts "until #{now} of #{times} times"
    now += 1
end

for i in 1..4
   puts "Looping around 4 times (#{i})"
end

Take a look at the output, and check if it makes sense for you.

Both iterate the same amount of times. The for in Ruby is just like in PHP, but the syntax it’s a little bit cleaner. We don’t have to put the parenthesis in any of them, but we could, like in PHP. The only way we have to tell Ruby the loop ends, is the “end” reserve word

“All the conditional and loops finishes with the end reserve word”

Other loop, actually a Ruby style loop, is “times”. Yes, we say the number of times we want to repeat something, just like this:

5.times do
   puts 'Impossible to be cleaner' # This will puts the string 5 times
end

We don’t have this loop in PHP, but it’s very useful if we know before the execution the exactly number of iterations we need.

Class Definition

Like PHP, Ruby is an object oriented language, which means we are going to have classes, methods and attributes. Take a look at this class in Ruby

# define the class company
class Company
  def initialize(name, owner)
    # attributes of Company's class
    @name = name
    @owner = owner
  end

  # method new_product
  def new_product
    puts 'The new product is coming out!'
  end

  # method describe
  def describe
    puts "Hi, I'm #{@owner} and my company is #{@name}"
  end
end

The first difference we can notice here is the attributes definition. In Ruby we usually define them into the constructor or just with the sets and gets (we’ll see them later). And those attributes are defined by the @ just before its name, like @name. The definition of methods is also very simple, just with the “def” and “end” reserve words.

But like PHP, the class definition does nothing itself, so let’s use it (this code must be right after the class definition).

# class company definition
# ...
comp = Company.new('Free Cars', 'Ray')
comp.describe #Output: Hi, I'm Ray and my company is Free Cars

# Error in 3, 2, 1...
puts comp.owner #Output: NoMethodError: undefined method ‘owner’

The output will be:

We have to notice two things in the example. First of all, we can’t access to an attribute without its getter. The other important thing is that the error is displayed after we run the program and see the result of calling “describe” (yes, like in PHP, most things happen when the script is running, so the execution goes on until there is an error or the script ends).

If we try to access to “owner” we’ve got an error. So we need something (hint: it will be a method) to get the content of the attribute.

Gets and Sets in Classes

The gets and sets (also known as getters and setters) are the methods to access and modify the private attributes of a class. As you might know is a very good practice to use them (just like in PHP). The difference here is that is almost obligatory, and we have a little help from the language.

class Company
 attr_accessor :name # Set and Get in a line
 def initialize(name, owner)
    # attributes of Company's class
    @name = name
    @owner = owner
  end
end

comp = Company.new('Free Cars', 'Ray')
puts comp.name
comp.name = 'Old Cars'
puts comp.name

The output, now without errors:

With the attr_accessor we “declare” the set and the get method for the attribute. Actually, we usually declare the set and the method just for setting and getting the attribute. Despite this, there is a way to do more things in the set or the get method, but we won’t really need it. The point is we can access now to “name”!

“With attr_accessor we have the get and the set method at the same time”

Let’s put it all together!

In this last section, we are going to build a class with methods and use them, but we’ll use everything we’ve just learned. The good news here are we know PHP, so let’s use it to remember the Ruby’s syntax!

The class is going to model a factory and remember, take a look at the way we program it, and the differences with PHP, more than the use of the class.

class Factory
	#sets and gets for all the attributes
	attr_accessor :name, :creation_year, :use_of_floors

	# The class constructor
	def initialize(name,creation_year,use_of_floors)
    	@name = name
    	@creation_year = creation_year
    	@use_of_floors = use_of_floors
   	end

	def description
	   puts "This factory is #{@name} and was created in #{@creation_year}"
	end

	def report_of_floors
		@use_of_floors.each_with_index do |element,index|
			puts "The floor number #{index} is used for #{element}"
		end
	end
end

a = Factory.new('Apple',1976,['Reception','Production','Offices'])

a.description
a.report_of_floors

And the output for this final script is:

Conclusion

This language, as many others, has many things we have to learn before we can call ourselves developers, but this tutorial covers the first steps using the knowledge of PHP to build actual programs. You can continue with more details in the official documentation.

I hope you liked it. Thank you for reading!

Creating a Upload/Download System Using PHP Classes

Cody Robertson — Sun, 29 Aug 2010 00:43:54 +0000

Making a PHP upload script can be a very challenging task when you are just starting out, heck; it’s still hard to some extent when you are an experienced developer. So today, I’m going to show you how to make one using PHP5 Classes and a simple form. In the script we will be able to upload files with certain file extensions and set a limit to the size of the file we want to upload. This will all go along with a sharing link and a force download script.

The Basic Upload Form

First we are going to start out just by making our upload form where we will be able to select a file and then press the upload button to upload the file into our certain directory we will define. It is quite basic so you can just copy and paste it.

Developing the Upload Class

The Class and Variables

Now we need to start on the server side part of our project. We need to start by defining a simple class with the name of “Upload”. Inside of that we are going to want to have 3 protected variables; $path, $max_file_length, and $extensions. Our $path variable is going to be the relative path to the upload directory. Our $max_file_size variable will be our maximum allowed file size in megabytes and our $extensions variable will be an array with our allowed file extensions.

The Functions

In our class we will have 3 different functions; upload_file(), download_file() and show_notification(). The name of each function should tell you what it does, so we are going to move on and first set up our show_notification function.

Show Notification Function

In our function we are going to pass through 2 different parameters; one for the message or messages and one for the type of noticfiation. (eg: error, notice, success). We will then open a unordered list and echo out each message in a list element inside the list.

public function show_notification($items, $type) {
echo "
 \n";
if(count($items) > 1) {
foreach($items as $item) {
echo "
	$item
\n";
}
}
else {
echo "
	$items
\n";
}
echo "
\n";
}

The Upload Function

Our upload function is next, we want to create a function that takes the uploaded file and move it to our uploads directory so it can be shared and downloaded by other users. We will start by opening up the function and see if the was a post request for upload a file.

public function upload_file() {
//Check for upload request:
if(isset($_FILES['file'])) {
//What to do with the file
}
}

Now we are going to make an array to store the file information in so we can access it easily. There are 5 different items we are going to store in the array; name, type, size, tmp_name and error (if any).

//Set File Information:
$file = array(
'name' => $_FILES['file']['name'],
'type' => $_FILES['file']['type'],
'size' => $_FILES['file']['size'],
'temp' => $_FILES['file']['tmp_name'],
'error' => $_FILES['file']['error']
);

Next, we will check if there is no errors, and if there is not we will file through the file extension to see if that certain file type is allowed. We will use a variable $filetype_ok to check later if the file is in fact an acceptable file to this point. We will use our protected array of $extensions to reference the allowed file types.

 //Check for file error:
if($file['error'] == 0) { foreach($this->extensions as $extension) { if($extension == $file['type']) { //Filetype ok! $filetype_ok = true; } }  //No match but no error: if(!isset($filetype_ok)) { $filetype_ok = false; } } else { //Filetype/error okay?: $filetype_ok = false; }

Then, we need to check if we ended up with $filetype_ok being true or false, and if it is true we will check if our file is a acceptable range size-wise for upload to our server. If it is not a allowed type or is too big for are server we will show a notification using our function.

 //Is Filetype ok?
if($filetype_ok) {
//Check if it is under the max size limit
if($file['size'] > ($this->;max_file_size * 1048576)) {
//File ok!, Move file:
else {
$this->show_notification('Your file is too big to upload to our server.', 'error');
}
}
else {
$this->show_notification('File type not allowed.', 'error');
}

Finally, we now have create a unique filename for our file and move it to our upload directory. We will make a unique name by using the mt_rand function and creating a random number 0-5000 then assigning that number to the beginning of our file following an underscore. Then we will use the move_uploaded_file function to move our file. If the file moves successfully we will echo our a sharing link!

//Filename:
$filename = mt_rand(0, 5000) . '_' . $file['name'];

//Now lets more the file:
$move_file = move_uploaded_file($file['temp'], $this->path . $filename . '.');

if($move_file) {
//File uploaded:
$this->show_notification('File successfully uploaded. Look below for status and link.', 'success');
echo '
Download Link:';
echo '
';
}

Our final code for the upload function should look like this.

public function upload_file() {
//Check for upload request:
if(isset($_FILES['file'])) {
//Set File Information:
$file = array(
'name' => $_FILES['file']['name'],
'type' =>; $_FILES['file']['type'],
'size' => $_FILES['file']['size'],
'temp' => $_FILES['file']['tmp_name'],
'error' => $_FILES['file']['error']
);

//Check for file error:
if($file['error'] == 0) {
foreach($this->extensions as $extension) {
if($extension == $file['type']) {
//Filetype ok!
$filetype_ok = true;
}
}

//No match but no error:
if(!isset($filetype_ok)) {
$filetype_ok = false;
}
}
else {
//Filetype/error okay?:
$filetype_ok = false;
}

//Is Filetype ok?
if($filetype_ok) {
//Check if it is under the max size limit
if($file['size'] < ($this->max_file_size * 1048576)) {
//Filename:
$filename = mt_rand(0, 5000) . '_' . $file['name'];

//Now lets more the file:
$move_file = move_uploaded_file($file['temp'], $this->;path . $filename . '.');

if($move_file) {
//File uploaded:
$this->show_notification('File successfully uploaded. Look below for status and link.', 'success');
echo '
Download Link:';
echo '
';
}
}
else {
$this->show_notification('Your file is too big to upload to our server.', 'error');
}
}
else {
$this->show_notification('File type not allowed.', 'error');
}
}
}

The Download Function

For this upload/download system when a user clicks the sharing link for a file the system will force a download of the file using PHP Headers. This is for the ease of use and it is a way to save bandwidth.We will first see is the file is set through a $_GET variable and then see if that file exists in our upload directory.

function download_file() {
//Check for download request:
if(isset($_GET['file'])) {
//Make sure there is a file before doing anything
if(is_file($this->path . basename($_GET['file']))) {
//Force download through headers:
else {
$this->show_notification('File not found!', 'error');
}
}
}

Now, guess what we have to do, put a little snippet in so the famous Internet Explorer does what we want it to do (Never heard of that before).

//Below required for IE:
if(ini_get('zlib.output_compression')) {
ini_set('zlib.output_compression', 'Off');
}

Finally, we need to set the headers that will force the download. These are pretty generic headers that most can be figured out by just reading the parameters in head functions. Look at the end of the tutorial for a link to all header descriptions.

//Set Headers:
header('Pragma: public');
header('Expires: 0');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s', filemtime($this->path . basename($_GET['file']))) . ' GMT');
header('Content-Type: application/force-download');
header('Content-Disposition: inline; filename="' . basename($_GET['file']) . '"');
header('Content-Transfer-Encoding: binary');
header('Content-Length: ' . filesize($this->path . basename($_GET['file'])));
header('Connection: close');
readfile($this->path . basename($_GET['file']));
exit();

There you have it, the download function is complete and the full upload and download script is complete. Below is the final download function code.

function download_file() {
//Check for download request:
if(isset($_GET['file'])) {
//Make sure there is a file before doing anything
if(is_file($this->path . basename($_GET['file']))) {
//Below required for IE:
if(ini_get('zlib.output_compression')) {
ini_set('zlib.output_compression', 'Off');
}

//Set Headers:
header('Pragma: public');
header('Expires: 0');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s', filemtime($this->path . basename($_GET['file']))) . ' GMT');
header('Content-Type: application/force-download');
header('Content-Disposition: inline; filename="' . basename($_GET['file']) . '"');
header('Content-Transfer-Encoding: binary');
header('Content-Length: ' . filesize($this->path . basename($_GET['file'])));
header('Connection: close');
readfile($this->path . basename($_GET['file']));
exit();
}
else {
$this->show_notification('File not found!', 'error');
}
}
}

Implementing It Into Your PageHere is finally the part that makes it all work, we need to add 3 lines at the top of the file. The first is to include the class, second to create the instance, and third to register the download function.

Now just add this one line right before our form (or wherever you want the upload notification/sharing links to show).

The final index file should look like this (This is a example case).




Creating a Upload/Download System Using PHP Classes












upload_file(); ?>




Creating a Upload/Download System Using PHP Classes by tuttoaster.com

As a little bonus you’ll get the CSS for free.

body {
background: #f4f4f4;
font: 12px Arial;
}

h1 {
font: bold 24px Arial;
line-height: 30px;
}

a  {
color: #000;
text-decoration: none;
}

p {
color: #919191;
}

#wrapper {
margin: 0 auto;
width: 425px;
}

#header, #content, #notifications, #footer {
margin: 30px 0;
}

#upload_hack {
margin: -20px 0 0;
}

#upload_hack input {
background: #FFF;
border: 0px solid #e1e1e1;
-webkit-box-shadow: 0px 0px 5px #c4c4c4;
color: #919191;
float: left;
font-weight: bold;
height: 14px;
margin: 0 10px 0 0;
padding: 21px;
width: 253px;
}

#upload_hack #fix {
background: #FFF;
border: 0px solid #e1e1e1;
-webkit-box-shadow: 0px 0px 5px #c4c4c4;
color: #000;
float: left;
font-weight: bold;
height: 14px;
padding: 21px;
width: 68px;
}

#download {
background: #FFF;
border: 0px solid #e1e1e1;
-webkit-box-shadow: 0px 0px 5px #c4c4c4;
color: #919191;
float: left;
font-weight: bold;
height: 14px;
margin: 10px 0 30px 0;
padding: 21px;
width: 385px;
}

.success {
color: #4fc416;
font-weight: bold;
list-style-image: url('success.png');
list-style-type: none;
}

.error {
color: #f05429;
font-weight: bold;
list-style-image: url('error.png');
}

.success li, .error li {
height: 30px;
line-height: 30px;
}

.fix {
clear: both;
}

.hide {
opacity: 0.0;
}

Final Thoughts/Closing CommentsThis upload/download system is nowhere near advanced. This is where you come in, as a developer I love seeing people build off my basic or even advanced scripts and make them better. So here is my challenge to you, download our script and look it over and make any improvement you have for it and post below, we can all learn from each other!

Links for header(); Function Information

Please don’t abuse this demo, files will be removed on a weekly base.

How to Create a Forum in PHP from Scratch

Jose — Mon, 09 Aug 2010 08:46:46 +0000

In this tutorial we’ll see how to make a forum using PHP and MySQL. We have to cover a lot of different things, so let’s start!

Some details about this tutorial

You can download a compressed folder with the whole project inside. So sometimes I won’t show all the code of a file in order to focus on the important parts of the project.
The code I’ll show is exactly the same than the one you can download, except for some comments. In the original project you’ll have everything well documented (using phpDocumentor).
I’ll ommit the tags in the tutorial, but every time you type PHP code in a file you should put it between them.
This project doesn’t follow a MVC pattern, but we’ll use classes and try to separate the different functionalities.

What and how

What are we going to do? We have to think the answer very carefully, and not only “a forum”, also the functionality we want to offer.

Answer: We are going to develop a forum where anyone can write a post without registration and other people can see it and write a response.

How are we going to do that? Here we have to think about how we are going to organize the project, the files..etc

Answer: As you know we are going to use PHP and MySQL. The files are going to be organized by the code they implement, so a class file will be in a different folder than a CSS file, for instance.

Designing and Building the Database

When we start to code a project, the first thing we usually do is to think about the database. Because that decision is going to be very important, and a lot of the PHP code depends on it.

There are many options here, we could make a table of posts and another of users, even three tables if we want, but we’ll take the easiest way in order to focus on the PHP code.

This table is all we need, at least for a simple forum like ours.

So a thread is going to consist of several rows in the table. The first post of a thread is going to have the permalink_parent set to NULL, and the rest of them are going to have the permalink_parent with the permalink of their parent, as the name suggests.

To create the table we have to execute the following sentence in our database:

CREATE TABLE `posts` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `title` varchar(128) COLLATE utf8_bin NOT NULL,
  `date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  `content` text COLLATE utf8_bin NOT NULL,
  `permalink_parent` varchar(128) COLLATE utf8_bin DEFAULT NULL,
  `author` varchar(128) COLLATE utf8_bin NOT NULL,
  `permalink` varchar(128) COLLATE utf8_bin DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `upermalink` (`permalink`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

The lengths of some fields depend on how many people are going to use the forum, but these values are enough for the moment.

Note that we are defining an UNIQUE KEY over the permalink column, which means that in our forum a title must be unique, I know we usually can post a couple of threads with the same title in other forum, however for the sake of simplicity we are keeping the title as unique.

File Organization

As well as designing the database we need to think about how we are going to organize the project, instead of starting to code without a previous plan.

The title and permalink are going to be unique, so we have to check if a title is taken.

At this point we can also take different approaches, we should try to keep things as simple as we can. So this is a little schema of our final project.

As you can see there are many files, but all of them are necessary if we want to keep things organized. Let’s see them step by step, and try to get the techniques we’ll use.

The media folder

This tutorial is focus on the PHP side, so I won’t explain too much about the CSS and the HTML code, you can download all the code at the end of this tutorial, so don’t worry. Anyway I’ll try to summarize the content of this folder.

style.css. It’s the CSS file for all the forum, includes the reset CSS code and the rest of the styles like a regular CSS file.
bg_container.png. The background of the main container.
bg_body.png. The background of the body element.

The Configuration File

This file is going to be useful from almost every script of the project. There are different options to implement it, but probably the most used is just a file with some define() lines, like this:

define('DB_HOSTNAME','hostname');
define('DB_USERNAME','user');
define('DB_PASSWORD','password');
define('DB_NAME','forum');

define('RE_PUBLIC_KEY','Your recaptcha public key');
define('RE_PRIVATE_KEY','Your recaptcha private key');

I’ll explain later the two last lines. So from now on every time we include the file we can get the value of a constant with something as simple as this:

require_once 'config.inc.php';

echo DB_HOSTNAME; //output: hostname

Header and Footer

There is a part of the HTML code that isn’t going to change so we can write once and include the file every time we need it. This is very simple and it will save us time and lines of code.

Header

The header.html file will have all we need to build the first part of a page: the doctype tag, the html, head, the beginning of the body element, the link to the CSS file…




	
	TutToaster Forum [Demo]
	
	



	
		
			TutToaster Forum [Demo]

As you can see the #main and #wrap divs, the body and html tags are open so we have to close them in the footer.

Footer

The footer.html file is very similar, we’ll include it when we finish the output to “close” the page.

	 
  

	
		
			Forum made by Jose for TutToaster. You can see the whole tutorial here.
		 <-- End footer_right-->

console.log()

This is the method you will use most of the time. It will output its arguments to the console, and yes, it accepts arbitrary number of arguments. When displayed, they are separated by space. It also supports printf-like string substitution patterns, which should be familiar to C/C++ programmer.

var s = 'string';
var i = 1;
var f = 3.2;
var o = {a: 1, b: 2, c: 3};

console.log('string', s, 'integer', i, 'float', f, 'object', o);
console.log('string %s integer %i float %f object $o', s, i, f, o);

console.info() / console.warn() / console.error() / console.debug()

These methods are basically the same as console.log(), but they assign messages to different categories (e.g. warning category, error category, as their names suggest). console.info() is identical to console.log() in Google Chrome, for it doesn’t have an “info” category. console.debug() is designed to also output an hyperlink which points to the line where it was called, and it’s also identical to console.log() in Google Chrome, which outputs this hyperlink for all log()-like methods.

var s = 'string';
var i = 1;
var f = 3.2;
var o = {a: 1, b: 2, c: 3};

console.debug('string', s, 'integer', i, 'float', f, 'object', o);
console.info('string', s, 'integer', i, 'float', f, 'object', o);
console.warn('string', s, 'integer', i, 'float', f, 'object', o);
console.error('string', s, 'integer', i, 'float', f, 'object', o);

console.assert()

This method acts a bit like assertions in unit testing. It tests whether the first argument is true or not. If it is, it will do nothing, otherwise, it will output an error message consisting of the other arguments.

console.assert(true, 'this will output nothing');
console.assert(false, 'this will generate an error message');

console.dir() / console.dirxml()

These two methods are designed to display JavaScript objects and DOM elements, respectively, as lists. They are identical to console.log() in Goole Chrome. We will use Firebug as an example.

var o = {a: 1, b: 2, o: {a: 1, b: 2}};
console.log(o);
console.dir(o);

var div = document.createElement('div');
div.innerHTML = '<span>content</span>';
console.log(div);
console.dirxml(div);

console.trace()

This method will outputs the stack of function calls at the point where it is called. Confused? It’s clearer with a code example. Notice that console.trace() is not well-supported by Google Chrome (which just outputs the caller function), so we will still use Firebug as an example.

function a() {
	b();
}
function b() {
	c();
}
function c() {
	console.trace();
}
a();

console.group() / console.groupEnd() / console.groupCollapsed()

These methods are designed to structure messages. They indent messages generated between console.group() and console.groupEnd() and nest them in a block that can be toggled. You can pass arbitrary number of arguments to console.group(), which will be displayed as the title of the block. console.groupCollapsed() is the same as console.group(), except that it collapses the block by default, and it’s only supported by Firebug.

console.group('string methods');
console.log('substr', 'string'.substr(1,3));
console.log('substring', 'string'.substring(1,3));
console.groupEnd();

console.group('array methods');
console.log('slice', [1,2,3,4,5].slice(1,3));
console.log('splice', [1,2,3,4,5].splice(1,3));
console.groupEnd();

console.time() / console.timeEnd()

As you may have guessed, these methods measure how much time have elapsed between their invokings. Many developers use them to test function performence. They accept an argument as an ID, so that console.timeEnd() knows which timer created by console.time() to stop, and it also gets displayed as a title before the actual time.

function fn1() {
	var fn = function() {};
}
function fn2() {
	var fn = new Function();
}

console.time('fn1');
for(var i = 0 ; i < 1000 ; ++i) {
	fn1();
}
console.timeEnd('fn1');

console.time('fn2');
for(var i = 0 ; i < 1000 ; ++i) {
	fn2();
}
console.timeEnd('fn2');

console.profile() / console.profileEnd()

These methods turn on/off the JavsScript profiler, which scrutinizes function calls in great detail. Firebug has a clearer profile result in my option. console.profile() accepts an argument as the title of the profile result.

function fn1() {
	var fn = function() {};
}
function fn2() {
	var fn = new Function();
}

console.profile('fn');
for(var i = 0 ; i < 1000 ; ++i) {
	fn1();
}

for(var i = 0 ; i < 1000 ; ++i) {
	fn2();
}
console.profileEnd();

console.count()

This method will count the number of times it have been called. It accepts an argument as an ID to support multiple countings.

function a() {
	b();
	c();
	console.count('a()');
}
function b() {
	c();
	console.count('b()');
}
function c() {
	console.count('c()');
}
a();
b();
c();

console.exception() / console.table()

Firebug supports two addtional methods that are not supported by Google Chrome or Safari. console.exception() will output its first argument as an exception object along with its function call stack, and the other arguments constitute the message. console.table() will output its first argument, which should be array of arrays or list of objects, in a tabular layout. It also accepts a second argument, which specifies columns and/or properties to be displayed. See more of console.table() here.

Since these methods are not widely supported. You should avoid use them.

function a() {
	b();
}
function b() {
	c();
}
function c() {
	throw new Error('something is wrong');
}

try {
	a();
} catch (e) {
	console.exception(e, 'error catched');
}

var a = [
	['a1', 'a2', 'a3'],
	['b1', 'b2', 'b3'],
	['c1', 'c2', 'c3']
];
console.table(a);

var o = {
	div: {tag: 'div', content: 'div content'},
	p: {tag: 'p', content: 'p content'},
	span: {tag: 'span', content: 'span content'}
};
console.table(o);

Conclusion

Console can be a great tool for your to learn JavaScript and DOM. If you haven’t used it before, you should start now. It will accelerate your learning speed, and it is worth the time to get familiar with console. That’s all. Thanks for reading this tutorial.

If you are a new web design, then you should try testking ccnp tutorials. We have included the expert reviews, tips and resources in our testking ccie tutorials and testking ccna guides to help you learn how to create inspiring minimal web-designs.

Code an Email Newsletter from PSD to HTML

Matthew Leak — Wed, 14 Jul 2010 15:15:15 +0000

Last week we learned how to go about designing HTML emails. This week we’re going to turn the PSD into a functional HTML email. To code a HTML newsletter you can either code it from scratch, or use an already existing template. I personally like to use an existing template, especially the ones supplied by Mailchimp simply because they have been tried and tested and they don’t ‘break’. Whichever way you decide to go about coding HTML emails you need to remember the following:

1. Use inline CSS to control presentation, such as background colors and fonts. eg:

2. You have to use Tables to control the designs layout – Pure CSS Layouts just won’t cut it i’m afraid. (I hate them too) It’s recommended that you know about HTML tables before following this tutorial as I am not going to be covering the basics of creating tables.

1. Setting up the Document

Open the PSD containing the email design and slice and export any images that are going to be used in the email. Create a new HTML file in your IDE of choice and copy and paste the following code into the document.

All extra styling will be placed inside and the email content will be placed between

Design an Email Newsletter in Photoshop

Matthew Leak — Fri, 09 Jul 2010 09:00:35 +0000

Email newsletters are becoming more and more popular with businesses, it’s almost becoming a kind of trend. It is, by far, one of the most effective ways to spread the word about up and coming projects, company news, and other business-related stuff to a potentially large audience. Obviously you need to have people on the receiving list first, but even if you only have a small number of recipients, it doesn’t matter. An audience is an audience.

Creating an Email newsletter is just like creating a website. We design the final product in Photoshop and then it is delivered to readers through HTML. This first part will cover the design process of creating an email newsletter.

Difficulty: Beginner – Intermediate

The Final Product

Here’s an image of what the Newsletter we are going to be designing looks like.

1. Getting Started

The majority of newsletters that are sent via email these days have a fixed width rather than a fluid/liquid layout. This is because email clients don’t use the full width of the screen to display an email message and the last thing you want in an email newsletter are horizontal scroll bars. So with this in mind it’s generally a good idea to design newsletters around a width of 550-600px. The height doesn’t matter as much but readers may read the email in a preview pane before opening the actual email message (I do) and so it’s a good thing to remember that the average preview pane is around 300-500px in height so make sure any important bits of the email are in this area.

2. Setting up Photoshop

Open Photoshop and create a new document with a width of 800px and a height of 1000px and a resolution of 72pi (make sure the colour mode is RGB, too.)

Fill the background with a nice light grey, I’m using #ebebeb and create a container with a width of 600px filled with white and position this in the centre of the document.

3. Allow the user to view the email in their browser of choice

It’s always good to keep accessibility in mind so make sure you give the reader the option to view the newsletter in their web browser. This is because not all clients will download images from an email by default, therefore any important graphics that you need to be shown in an email could potentially not be shown straight away. If the user wishes to the view the full message (with images) in their client then they will have to download the images to their machine. This is another good reason to give the reader the option of viewing the email in their web browser.

4. Creating the email header

Grab the Rounded Rectangle tool (U) and create a selection 560px wide, 85px high and a corner radius of 10px and fill it with a nice dark grey. Then with the selection made add a title for your Newsletter along with the month and some contact details if you wish. It’s a good idea to use a nice bold font so readers can clearly see what the email they’ve received actually is. For this reason I am using Myriad Pro Bold Condensed for everything in the header.

5. Creating the ‘main’ part of the newsletter

The main part of our Newsletter as you can see from the preview at the beginning of the post is a section that’s telling the reader they are entitled to a free bar of Monsterchomp. So, Similar to what we did above, create a selection using the Rounded Rectangle tool (U) with a height of 165px and a width of 560px and a corner radius of 10px. This time I’m using a light grey for the background colour. With the placeholder well, in place, go grab an image of an awesome looking monster. I’m using the Green monster from Chris Spooner’s Free Monster Vector pack which can be downloaded here.

Grab the Rounded Rectangle tool (U) and make a similar selection as you have been doing (keeping the corner radius at 10px). This time fill it with white so that it stands out against the light grey and any text that we place inside will appear nice and crisp. Now we need to make this rounded rectangle into an actual speech bubble. Grab the Pen Tool (P) making sure that it’s on ‘Shape Layers’ mode and create a shape with three points pointing towards the monster’s mouth. The shape is almost like a right-angled triangle, except without the right angle, duh.

Using the Horizontal Type Tool (T), add some text inside the speech bubble. Again, I’m using Myriad Pro Bold Condensed. The text has to be easy to read because this is the main part of our email. It’s what we want the users attention drawn too. After you’ve wrote a message, place some ‘legal text’ underneath the speech bubble using a clear sans-serif font with a font size of 11px.

6. “How do I claim my free Monsterchomp bar?”

Now that the user has seen that they are entitled to a free bar of Monsterchomp they want to know how they can claim it. The main content area will be 2-columns. On the left (395px) we’ll have the instructions that tells the user how they can claim their free bar and on the right (155px) we’ll just put some Promotional Terms and Conditions (yer, moar legal stuff).

Create a title for the content in a large font, keeping it crisp. I’m using Arial for all the email content (I like to keep font faces to a minimum in newsletters). Then add some instructions that clearly tells the user how they can claim their free bar.

Create another Rounded Rectangle (U) selection on the right hand side and fill it with a light grey. Inside here you want to put Terms and Conditions of entry. Well, you don’t have to, I’m just doing this to give you an idea of how to design a 2-column newsletter.

7. Submitting their entry

Keeping usability in mind for newsletters, we want to keep things simple. So, once the reader has done what they were supposed to they should be able to submit their entry easily without any fuss.

Again, using the Rounded Rectangle Tool (U) create a large selection, filling it with a nice light grey. We want to make this a button for the user to click on (keeping usability in mind). So, using Myriad Pro Bold Condensed (again…), Type a message in the box to tell the reader that this is a button and should be clicked once all instructions are completed. To make the text stand out the bit further, Duplicate the Layer, change the text colour to white, position it below the main Text layer, move it 1px down and 1px right and then reduce the opacity until you’re comfortable with the outcome.

8. Giving the readers more

Sometimes freebies aren’t enough in this world and the readers will want more. So, offer an incentive for the user to enter.

9. Giving the reader the ability to un-subscribe from the mailing list

Every newsletter needs to have a link or a button to allow the reader to freely un-subscribe from the newsletter. So, write a message at the bottom with a link to allow the user to un-subscibe.

Conclusion

Here’s what we’ve designed in this tutorial:

Stay tuned and subscribe to our RSS-feed or follow us on Twitter because next time we’ll be learning how to code the design into a functional HTML newsletter ready for delivery!

Creating Bar Graphs using jQuery UI

Abhin — Wed, 30 Jun 2010 15:26:17 +0000

In this tutorial we are going to leverage the power of jQuery UI and create a slick bar graph. So lets get started !!

Setting up workspace -

This tutorial already assumes you know jQuery and basics of jQuery UI. First goto jQuery UI website and download your copy of jQuery. Feel free to download any theme you like.

Now import jquery and jquery-ui.custom.min.js in your html file, available in the js folder of the download.
Now goto css folder and link the jquery-ui-1.8.2.custom.css file in your project.
Finally create graph.js file in which we will code our bar graphs and import the script in our html page.

So far our code looks like -

Step 1

Now either we can create a jQueryUI plugin or a jQuery one. For this tutorial, we will create a jQuery one. Before that open up jquery-ui-1.8.2.custom.css and the following code. The below will be the styling for our graph’s background and bar graph’s bar property.

.ui-widget-bg { border-top: 1px dotted #aed0ea; font-size:9px;   }
.ui-widget-bar {position:absolute;zIndex:10;bottom:0;font-size:10px; }

Step 2

Now we will create a div that will be our graph and add some basic styling to the html file.





 



CSS Graphs

Step 3

Now we will code our jQuery plugin. First of all we will create the basic structure and add options.

$.fn.graph = function(options){
	var defaults = {height:300,width:500,data:'',categories:'',legend:"Graph"};
	var options = $.extend(defaults, options);

    }

Our options will consists of -

height – the height of the graph.
width – the width of the graph.
data – the values of the bars.
categories – categories or labels of the data.
legend – Heading of the graph

Step 4

Now we are going to create the widget of the graph. In jQuery UI high level widgets uses ui-widget class. The main parent consist of ui-widget class which gives a consistent UI to all it’s nodes. We will not add ui-widget class to the main element that is calling the pluign but we will wrap the calling element into a div with class ui-widget.

var root = $(this).addClass("ui-widget-content");
root.wrap("");
var parent = root.parent();

Since root is where actual graph will be, we will add ui-widget-content to it and wrap it in a div.

Step 5

Now we are going to set the properties of the graph from the options we have provided plus some of our own.

parent.prepend(""+options.legend+"");
parent.css({height:options.height,width:options.width});
root.css("position","relative");

We will first add the heading to our graph from the option provided in a h3 tag which has a ui-helper-reset class which is a mini reset class for elements provided by jQuery UI,then we will add the widget header class. After that we will set the dimensions of root’s parent and set it’s position to relative.

Reason of setting position relative is so that absolute positioned elements which we will be using later can adjust themselves with respect to the parent, if its not given to relative the bars will be all over the page .

Step 6

Now we are going to declare variables that we are going to use later and lastly we will select the maximum value available in the data, since that will be our highest scale.

var i=0,max_val=0,scale,datalen=0,temp,w;

	for(i=0;i=max_val)
		max_val = options.data[i];
	}

Step 7

Now we will create a scale. For that we will divide the graph into equal parts, by dividing it’s height by data length. Then we will initialize i variable with height for later use. Then we are going to create two div elements. One will be the graph background and other will be bars of the graph.

scale = options.height/options.data.length;
	i=options.height;
	var bg = jQuery("",{ css:{height:scale - 1 }  }).addClass("ui-helper-reset ui-widget-bg");
    var bar = jQuery("",{ css:{width:width}  }).addClass("ui-helper-reset ui-state-active bar");
	var width = Math.floor((options.width-70)/options.data.length - (options.categories.length/1.5));

In the bg element we have added the ui-widget-bg class that we had manually created in the css file. Note that here height is scale -1, -1 is added because we have added a 1px solid top border. If we had not added the border, scaling would be disturbed. For the bar elements we have added active state class and a bar class that we will later use in events.

Step 8

Now we are going to add the gridlines to our graph. For that we will add bg elements to our graph that have equal height. We will also add per unit values in it. The values will be in respect to the original values that we have supplied not the scaled values.

var counter = 0;

	while(i>=0)
	{
		temp = bg.clone().html(max_val - counter);
		root.append(temp);
		i = i - scale;
		counter = counter + max_val/8;
		datalen++;
	}

So far our progress looks like -

Step 9

Now we will add bar graphs, first of all we will loop all the values then we will calculate the height of the bar graph on our scale. Then we will add the bar with the calculated height and distance from the orgin with label as html.

w= 40;

	 for(i=0;i
Now our graph looks like -

Step 10
Finally we will add hover event for the bars , with some effects. When mouse hovers on a bar, other bars gets ui-priority-secondary class which reducts its opacity with respect to the hovered bar. Also we will add ui-state-hover on hovered bar.
$(".ui-widget-bg:last").css("height",0);
	$(".bar").hover(function(){

					   $(this).toggleClass('ui-state-active ui-state-hover');
					   $(".bar").not(this).addClass('ui-priority-secondary');

					   },function(){

						   $(this).toggleClass('ui-state-active  ui-state-hover');
						$(".bar").not(this).removeClass('ui-priority-secondary');
						   });

Step 11 – Calling the plugin
Now comes the easy part, just call the plugin in the html we had imported our scripts earlier thats it !!


When you’ve got any questions regarding this tutorial, please don’t hesitate to ask. And when you enjoyed this tutorial, then we would appreciate it when you could spread the word about it.