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.

<?php
	$number = 3;
	echo "The number is " . $number;
?>

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!

Related posts:

1. 21 Tips to Make Your PHP Code Better
2. Getting Started With PDF Generation in PHP
3. jQuery Functions and Techniques to Keep in Mind

(this is just one of many weird theories I have )

I have been looking at loads of travel related websites recently while I plan my next adventure and these are a few of the nifty bookmarked websites that caught my attention.

Airportbags Plus

Australia Day

Brookside Resort

Clover Cottage

Cool and the Guide

Definitely Dubai

Discover Tennessee

Experience Washington

Hotel Reviews

Inspired by Iceland

Philadelphia & the Countryside

Places We Go

Story Hotel

TriOutNC

Utah Travel

Vacation in Supetarska Draga

Visit Manchester

Wasabi

Windrock Lodge

Winter in Tennessee

Conclusion

I think there’s a nice collection here, which is your favourite? I’ve gotta admit that I am a fan of the ‘Discover Tennesse’ website – which site listed is your favourite?

Also, if you want to recommend me your favourite destinations for my next big adventure then please do!

Related posts:

1. 50 Amazing and Gorgeous Apple Related Websites
2. 49 Fascinating E-Commerce Websites for your Inspiration
3. 49 Fantastic Iphone Inspired Sites for Your Inspiration

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.

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data" method="post">
<input name="file" type="file" />
<input type="submit" value="Upload" /> </form>

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 with 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 "
<ul class="$type"> \n";
if(count($items) > 1) {
foreach($items as $item) {
echo "
	<li>$item</li>
\n";
}
}
else {
echo "
	<li>$items</li>
\n";
}
echo "</ul>
\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 '
<input id="download" type="text" value="http://' . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'] . '?file=' . $filename . '" />';
}

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 '
<input id="download" type="text" value="http://' . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'] . '?file=' . $filename . '" />';
}
}
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).

<script type="text/javascript"><!--mce:0--></script>
<div id="wrapper">
<div id="header">
<h1>Creating a Upload/Download System Using PHP Classes</h1>
</div>
<div id="content">
<div id="upload">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data" method="post">
<input id="real_upload" class="hide" name="file" type="file" />
<input id="real_submit" class="hide" type="submit" value="Upload" />
<div id="upload_hack">
<input id="fake_upload" onclick="select_file()" readonly="readonly" />
<input id="fix" onclick="upload_file()" readonly="readonly" value="UPLOAD" /></div>
<br class="fix" />
</form>
<div id="notifications">upload_file(); ?></div>
</div>
</div>
<div id="footer">

<a href="#">Creating a Upload/Download System Using PHP Classes</a> by <a href="tuttoaster.com">tuttoaster.com</a></div>
</div>

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

• PHP:header – Manual
• PHP Header Function –W3Schools

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

Related posts:

1. Photoshop vCard HTML Template Free Download
2. Monday Fun: Creating a Clock Animation Without CSS3
3. Creating Bar Graphs using jQuery UI

We think it’s something that goes beyond the interface and questionable increase in stability – Macs do have a great assortment of design applications. These fifteen applications are our personal picks, reflecting the best of what Mac OSX has to offer designers, developers, and online workers.

Note: Obvious picks like Photoshop, Illustrator, and other Adobe applications have been left out of our roundup. It’s not that we don’t like Adobe (we’re not Steve Jobs), just that we’d prefer to support smaller application developers and suggest less obvious software.

1. Automator

Automator could be the computing world’s simplest robotic assistant. Designed to complete basic and repetitive tasks without endless coding, it’s one of the most user-friendly automation apps out there. Describe basic tasks in text, use the application’s built-in automation settings, or simply record yourself completing a task and Automator will copy the task for future use.

We like using Automator for repetitive and time consuming tasks – cropping images, saving media, and searching for specific files in Finder. Spend enough time learning how to use Automator and it’s highly likely you’ll run into ways it can optimize the way you work, saving you hundreds of hours each year that would otherwise be wasted on thankless and repetitive tasks.

2. ScreenFlow

Want to guide users through a tutorial, create a promotional video, or record an interview for your blog? ScreenFlow is a simple screen capture application that gives Mac users the ability to record and save their on-screen activities without endlessly having to adjust settings or wait for footage to save to disc.

Sounds pretty standard, right? What separates ScreenFlow from other screen capture applications is its powerful editing suite. After you’ve captured on-screen video, the app’s editor lets users highlight foreground windows, blur out unnecessary background details, and add on-screen information to their video. It’s free to try and $99 to buy, but believe us when we say it’s worth it.

3. TextMate

Need to code? TextMate is our preferred text coding tool – it’s simple, incredibly user-friendly, and one of the most intuitive hand coding applications available on any operating system. The program itself is equal parts text application and GUI, giving developers and old fashioned designers a wide range of options for completing their projects.

What makes it better than Apple’s own TextEdit? First, it’s great for highlighting and differentiating between on-page tags and different code snippets. Second, it has one of the most effective and quick searching tools we’ve found on any text editor. Finally, it’s good for more than just handwritten code and development projects – we could quite happily use TextMate for notes and rough documents.

4. Pixelmator

Photoshop is expensive. GIMP is ugly. Pixelmator, on the other hand, is one of the most beautiful and inexpensive image editing applications to hit the Mac, and it’s damn powerful to boot. Unlike other cross-platform apps which use the Mac’s hardware as a secondary feature, Pixelmator is built from the ground up for Mac hardware, blending in effortlessly with Spotlight and other Mac-only applications.

It’s a steal for designers too, priced at just $59 and inclusive of free updates. While we could never give up on Photoshop for image editing and site design, Pixelmator certainly is tempting. The app itself is absolutely beautiful, providing designers with plenty of inspiration while they’re working.

5. Airlock

Airlock isn’t an essential app for designers, but it is pretty cool. This micro-application lets iPhone users lock their Mac automatically when they walk away from it using the phone’s Bluetooth signal as a proximity guide. Configure the app properly and you can lock Mac OSX once you move fifteen meters back, or even set up Airlock to require a password once you lean back in your chair.

It’s surprisingly accurate, and certainly a cool application for extra security. Designers with a home office probably won’t be all that interested in Airlock, but those stuck in a shared office space could be; the app could prevent unwanted computer use and keep your designs a little more confidential.

6. MAMP

MAMP is one of the most useful Mac applications out there for designers. An abbreviated form of “Macintosh, Apache, Mysql and PHP,” this app lets designers and developers set up a local server for testing, tweaking, and optimizing their websites, online applications, or server databases.

We’re big fans of MAMP – it’s one of the best apps out there for working on design projects without an active connection. Whether you need to modify a WordPress theme on the go or simply test your website without fear of crippling the server, this is the app to do it in. MAMP itself is free of charge, while its bigger brother MAMP Pro is available from $49.

7. LaunchBar 5

Don’t like searching? Launchbar 5 is one of the few apps that improves on Snow Leopard’s already impressive search features. Install it and you’ll be hit with one of the most versatile productivity and file management platforms out there – LaunchBar gives users complete access to Quick Look, their favorite applications, and search options for their clipboard history and system files.

It’s one of those applications that seem unnecessary, right until you install it. If you’re accustomed to wasting time switching between applications and searching for development data, install LaunchBar and enjoy quick, simple, and effortless productivity.

8. Snippet

With Automator on your side, coding becomes quicker. With Automater and Snippet installed on your Mac, coding becomes effortlessly smooth and amazingly fast, leaving you with more time to spend on projects and less time spend wading through lines of PHP and Javascript. Priced at $12.95 and available as a free trial, we don’t doubt this app will quickly become any coder’s favorite.

Snippet is a simple app that holds snippets of your code, leaving you able to quickly search for and grab the most frequently used parts of your Javascript, PHP, or CSS projects. Bring it up by hitting Ctrl + S and Snippet’s menu will appear, giving you a list of oft-used code phrases and snippets to use for web development, application development, or CSS modifications.

9. xScope

xScope is one of those apps that should install automatically once you start a design project. The app itself is a simple and highly useful collection of design and project double-checking utilities, including a series of on-screen rulers for checking that designs are smooth and in synch, a screen resolution tester for testing websites on different monitor sizes, and a color checker.

But there’s more to xScope than just checking projects before completion. The application is built for designers and web developers that are tired of wasting time recording information by hand. If you want to minimize the amount of time spent checking over specific details and recording site information, xScope is worth its meager $27 purchase price.

10. Flow or Cyberduck

Every developer needs a go-to file transfer application, and Mac users have two excellent and very different choices. Flow is the first – a file transfer application that’s stunningly beautiful, powerful enough for most design and development tasks, and compatible with all major web protocols. It’s priced at $25 and worth every penny, provided you’re the type that prefers a great interface to an endless list of features.

The second option is Cyberduck – a versatile, powerful, and surprisingly usable open source FTP application. If you’re less concerned with pure usability and more interested in power, compatibility, and all-round usage, we’d give Cyberduck the recommendation. As an open source application it’s free of charge, although the developers would surely welcome a donation.

11. ShoveBox

There are plenty of productivity applications out there for Mac users, most of which are loaded with excess features and bloated to the point of worthlessness. ShoveBox is the exact opposite – a clean and simple note taking tool that lets designers, developers, and online workers quickly store and reference important data, images, and entire websites.

If you need to take hundreds of small minor notes each week, incorporate Shovebox into your work strategy and watch previously wasted time reappear. It’s our favorite all-purpose productivity app for the Mac because of its simplicity – users can drag information to ShoveBox without any extra commands or wasted time. Check out the website and you’ll find a 30-day trial, with options to purchase for $24.95.

12. Blinksale

Professionalism is everything when you’re a designer, especially if you want to position yourself as a premium provider and a leading design firm. While Paypal invoices and rough emails are enough for your minor clients and close friends, it’s worth investing in a proper invoicing application when billing to major clients and large companies.

Blinksale is our personal favorite due to its simplicity, low price, and lengthy list of existing invoice templates. Invoices can be customized to use your own company’s logo and marketing messages, or even completely outfitted with different CSS and layout data. Whether you need to send a monthly reminder or wish to completely automate credit card processing, this is the online app to use.

13. Isolator

Isolator is a simple application that lets you do one thing: focus on doing one thing. Users can block out needless distractions and configure Isolator to limit their Mac’s attention to the active window, cutting out needless fiddling and helping to get things done. While not particularly useful for design on its own, it’s one of the most lucrative free applications we’ve found for designers that just can’t focus without a little push.

The app itself is a small, unobtrusive square that sits in OSX’s menu bar. Click it and you’ll switch it on, limiting your focus to a single task and (hopefully) helping you get more done. If you’re a sucker for distractions, Isolator is a must-have addition to your Mac.

14. Things

Things is a task manager with a difference – one of the few time and project management apps that actually helps users get more individual tasks done, offering both traditional to-do lists and a more in-depth interface for managing personal and business tasks. It’s clean, collaboration-friendly, and freely able to synchronize with your iPhone or iPad.

If you work alongside a team of designers, developers, or artists, Things is a must-have addition to your digital workspace. Projects are organized similarly to files in Snow Leopard’s sidebar, giving frequent OSX users a quick and familiar interface for organizing tasks. Single-user licenses are just $49.95, while multi-user packages start from $74.95.

15. CSSEdit

There’s nothing less interesting than scrolling through style sheets in a text editor. CSSEdit is one of the best Mac development applications out there, offering designers and web developers a different choice for styling websites and modifying CMS themes. Use the X-Ray feature to tag and check on-page elements, or simply use CSSEdit’s clean and feature laden text workspace to edit page style.

Pair CSSEdit with TextMate and you’ll end up with the Mac’s most intuitive code and style sheet editing suite. A demo version is available with a few limitations (files are limited to 2500 characters and editing options are slightly restricted), and the application itself is available to purchase for $39.

Mac Users: Do you know any must-have design apps?

Our fifteen-part lineup covers the major bases for Mac users, but it’s far from a complete collection. If you know a certain must-have design, development, productivity, or collaboration application for Mac OSX, feel free to let us know in the comments section. No app is too small – desktop utilities, iPhone applications, and online tools are all welcome.

Related posts:

1. 10 Top Apps & Resources to Speed Up Your Workflow
2. 10 Must-Have Free Tools for Developers
3. Best of April 2010, Tutorials, Inspiration and Resources

Email Newsletters Designs can be much like Website Designs. After all, they exist to serve similar purposes. So a well designed, clean Email Newsletter/Website is a must for any successful business. Here’s a collection of 30 beautiful inspirational email newsletters for your inspiration.

37 Signals

ADC Young Guns

Apple

Apple

Bing

Brandtalk

Bumble and Bumble

Bumble and Bumble

Busted Tees

Carhartt

Chanel

Digital Consortium

Paul Frank Earth Day

Email Direct

eRoi

Fusion Monarch

Jon Burgerman

Kate Spade

Life Fitness

Made.com

MapMyRide.com

Nike Store

Nike+

Paul Frank Industries

The Publishers Club

Sephora

StarbucksStore.com

Steve & Co

Tourist

Vexio

Conclusion

We can see that many of these Email Newsletters do actually look like Websites. There’s a great collection of well designed email newsletters above, which one was your favourite?

If you want to know how you can go about designing and developing your very own Email Newsletter then I have wrote two tutorials on how you can do just that, check ‘em out.

Design an Email Newsletter in Photoshop
Code an Email Newsletter from PSD to HTML

Related posts:

1. Design an Email Newsletter in Photoshop
2. 80 Unique and Brilliant Business Cards
3. Code an Email Newsletter from PSD to HTML

It’s tempting to think that we’re in the middle of a design revolution, although we’re not quite sure that’s the case. Industrial design has resulted in new inventions, sleek products, and ultra-popular devices for hundreds of years, and it’s certainly not a discipline that’s limited to the 21st century.

We’ve tracked down seven products that define industrial design as a discipline. Some are rugged and built to last, while others remain somewhat delicate and immobile. What brings them together isn’t their function, purpose, or technological ability, but the way they present it. Each one of these design innovations gave technology a user-friendly and attractive canvas on which to operate, and each caused a major design revolution in their respective industries.

1. Tivoli Model One

Henry Kloss has a long history in the consumer audio business. The engineer helped design some of the 20th century’s most important loudspeakers, pioneering bookshelf speakers and creating a string of slick, engineered, and distinctly minimalistic devices along the way. Before his death in 2002, the legendary designer engineered one final product: the Tivoli Model One radio.

The Model One is the home audio industry’s iPod – a piece of engineering so bare and minimalistic that it’s usable by almost anyone. While the most basic (and most popular) version includes just an AM/FM tuner and volume control, more advanced versions of the Model One are available, all of which offer a slightly different spin on the radio’s simplistic control layout.

2. Western Electric Model 302

Upon its release, Western Electric’s Model 302 telephone was a technological marvel. The telephone featured a built-in mechanical ringer and accurate turn-dial calling interface – two features that were considered innovations at the time. Released in 1937 and manufactured for over three decades, the Model 302 was the world’s first mass-market telephone and a huge success for AT&T.

Despite its ancient design and analog calling system, the Model 302 remains an attractive piece of technology. Amazingly, it’s also one that is just as supported today as it was upon its release; plug the Model 302 into a standard phone outlet and you’ll find it’s just as capable of making calls as any other telephone. The ultimate executive desk phone? We certainly think so.

3. IBM DiskOnKey

The early days of flash storage certainly weren’t cheap. IBM’s DiskOnKey was the first mass-market flash storage drive, and boy was it an expensive piece of kit. Priced at $49.00USD and offering an at-the-time impressive figure of eight whole megabytes of storage, it’s a wonder this pocket storage wonder sold at all.

But look at the DiskOnKey’s rivals and you’ll see that it’s actually a fairly decent deal. The storage device was released in 1999, designed to compete with the then-standard floppy disc and ZIP drive. While the DiskOnKey certainly isn’t as elegant or sharp as our other favorites, its form makes it an important milestone in the industrial design timeline.

4. Nintendo NES

In many ways, the Nintendo Entertainment System (or NES, for short) was the world’s first modern gaming console. While Atari and other manufacturers had broken ground with their Pong systems and Pacman arcade games, it wasn’t until Nintendo put out their first major console that gaming became mainstream.

And it’s not hard to see why. Despite its chunky eighties appearance, the NES remains one of the most enduring designs in technology. It quite literally revolutionized gaming design, bringing new features into the fold – the removable control pad, directional control buttons, and licensed gaming cartridge are all NES innovations – and proving that gaming systems needn’t look like the work of an amateur radio enthusiast to be successful.

5. iPhone

Apple’s endlessly praised (and equally hated) smartphone has grown into one of the 21st century’s most important pieces of technology, making touchscreens a standard smartphone feature and all-but eliminating the tactile keyboard. With multi-touch controls and one of the mobile world’s first good web browsers, the iPhone was the ultimate in disruptive technology after its 2007 release.

If there’s one certain way to check for ‘revolutionary’ status, it’s through imitation. The iPhone has been endlessly copied throughout its run, its features and design now incorporated into almost every competing touchscreen device. While business users despise its virtual keyboard and techies decry its semi-ridiculous App Store policies, there’s no doubt that the iPhone is one of the mobile world’s most important design milestones.

6. Citroën DS

The Citröen DS certainly didn’t fit in alongside other executive cars of the 1950s. The French high-end vehicle weighed little more than a ton, offered a laundry list of modern features, and actually looked, well, good. The passion project of famed Italian automotive designer Flaminio Bertoni, the DS was built with almost no regard for automotive standards or design principles.

But strangely enough, it worked. The DS is remembered as one of the 20th century’s best vehicles, claiming credit for inventions such as directional headlights (now a standard safety feature) and adjustable suspension. The car’s design was so timeless that it remained virtually unchanged during its twenty-year production run, with Citröen selling almost 1.5 million DSes in total.

7. Rolex Oyster Perpetual

How did the world’s most conservative watch company pioneer so many new features? While Rolex watches are best known as a creature comfort of the super rich, the Swiss luxury brand certainly has a few disruptive technologies up their sleeve. The Oyster Perpetual was the first line of watches to feature a built-in calendar system – a major innovation in the late 1940s.

But far from their technical advances, the Oyster Perpetual line remains an example of supreme form. While other watch manufacturers focused on adding superfluous features, Rolex built the Oyster line around simplicity and design. Clean, evenly spaced, and relatively minimal alongside other Swiss brands, there’s a reason these watches can command high five-figure prices.

Related posts:

1. 49 Fantastic Iphone Inspired Sites for Your Inspiration
2. Our 15 Favorite Mac Design and Development Applications
3. 6 Additions and Optimizations to Increase Conversions

In the next post of the series, we’ll be featuring a selection of Australian web and graphic designers/studios, so stay tuned!

Yummy Gum

Visit their website
Yummygum is a design studio from Amsterdam that is all about tasty designs and refreshing ideas. They create websites and web applications, and also design logos.

Fit & Frutig

iconSweets

Willem van Schendel

BTI Foundation

Colorlab

Erika van der Bent

Visit their website
Erika van der Bent is a freelance multimedia designer from Rotterdam. She produces designs and develops websites, corporate identities and various other designs.

Enixé

Icentials

Ukkies

ComfortCube

Ampersandlove

The Olifants

Visit their website
The Olifants are a creative agency focusing on illustration with a strong graffiti and street art influence. They produce wall paintings and canvases, and also run live painting sessions and exhibitions.

Wallpainting

Hand Bones

The Olifants

Brain Canvas

The Olifants

Mark Dijkstra

Visit their website
Mark Dijkstra is based in the east of Holland and designs and builds beautiful websites and identities. Mark is skilled in Photoshop, Illustrator, Flash, xHTML/CSS, XML, PHP and WordPress.

MD vCard

Xtra Solutions

YourSurvey

404 Error Page

OpenSourceHunter

Illutic Web Design

Visit their website
Illutic Web Design is an ambitious and dynamic design agency from Enschede, Overijssel. The company name, “Illutic”, was a combination of the two English words “illusion” and “fantastic”.

Bal Rashmi

Mercuri

Hiranthi’s Weblog

Famire

Bureau Blik

Rutger Ontwerp

Visit their website
Rutger Ontwerp is a one man design studio from Zwolle, offering complete dynamic websites, redesigns, online art direction, logos and identities, and print design.

Kjenning

Ingeborg Lukkien

Versteeg Ermelo

Libra Bedrijfsadviseurs

Blitzkrieg Ballroom

Whoooz

Visit their website
Whoooz are a company dedicated to web media, helping their clients to develop a strong online identity, using beautiful and powerful designs.

Vind Carlo

Wernink

It’s A Go

Handig In De Baan

Andarr

Jonnotie

Visit their website
Jonnotie is the portfolio of Jonno Riekwel, a self-taught web designer from Rotterdam. He loves and is very passionate about what he does.

Vertrektijden

Bohemion Coding

365psd

Jonno Riekwel

Web Application

We really hope you enjoyed this post. This is of course just a very small selection of talented designers from the Netherlands, there are hundreds more, and we will revisit this country in the future. Please do discuss there designers in the comments section! Who is your favorite and why?

Do you have a favorite piece featured here? Let us know! Next time in this series we will be scouting Australia for some the best creative talent – keep your eyes peeled!

Related posts:

1. Three Techniques you Should be using when Designing a Website
2. Showcase of Multi-Colored Color Schemes in Web Design
3. Logos on the Internet: The Importance of Simplicity

Coming soon and under construction pages need to look very basic and they have to contain the information the visitor needs to return to when your done developing, one other important thing is that they do need to look attractive so visitors will return to more of this awesomeness.

So sit back and enjoy these great looking and well designed coming soon and under construction pages.

Related posts:

1. Logos on the Internet: The Importance of Simplicity
2. 15 Inspiring Vintage and Retro Web Designs
3. Great Looking Navigation for Free Download

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 <?php and ?> 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…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
	<title>TutToaster Forum [Demo]</title>
	<link href="media/style.css" media="all" rel="stylesheet" type="text/css" />
	<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
	<![endif]-->
</head>
<body>
<div id="wrap">
	<div id="header_wrap">
		<div id="header">
			<h1><a href="index.php">TutToaster Forum [Demo]</a></h1>
		</div><!-- End #header-->
	</div><!-- End #header_wrap-->
	<div id="main">

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.

	</div> <!-- End main-->
</div>  <!-- End Wrap-->
<div  id="footer_wrap">
	<div id="footer">
		<div id="footer_right">
			<p>Forum made by Jose for TutToaster. You can see the whole tutorial <a href="http://www.tuttoaster.com/how-to-create-a-forum-in-php-from-scratch">here</a>.</p>
		</div> <-- End footer_right-->
	</div> <!-- End footer-->
</div> <!-- End footer_wrap-->

<script type="text/javascript&quot; src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
	$('input, textarea').click(function(){
		$(this).select();
	});
    if ($("#message_header p").html()) {
		setTimeout(function() {
			$("#message_header").slideUp('slow');
		}, 5000);
	}        

We are loading the jQuery at the bottom of our page, which is a good practice, because the rest of the site will be rendered before we execute any jQuery code.

The jQuery code is basically to improve the interface, so when a user clicks on an input field all the text will be selected. The if works in this way: when we see the p element (in #message_header) has something, then we hide it with the slideUp effect after 5 seconds. You can see this code working in the live demo after you try to post a message with an empty field or if the title you have selected is already taken.

The difference between require and include is the include() construct will emit a warning if there is an error (script goes on) and require() will emit a fatal error (script stops). As you may guess, adding _once to those statements we prevent the file from being included twice. Let me show you the final result with something very simple like this:

require_once 'header.html';

echo "A very simple message";

require_once 'footer.html';

Great! Now we have our “template” and all we need to output will be shown between the header and the footer code as long as we include these files.

The Database class

In order to separate the PHP code that is going to execute SQL queries and the rest of PHP code we’ll make a database class, this class will connect to the database, get some rows and save data.

If we think about it, if an object always need to connect to the database, the connection code must be in the constructor. So every time we create an object that object is going to be ready to execute queries with the function mysql_query().

Also, the methods we’ll need are going to depend on the rest of code, but here I show you the beginning of the class as it will be in the end of the development:

require_once 'config.inc.php';

class Database
{

	private $db;

	function __construct()
	{
		// We set our own error_handler
		set_error_handler(array($this,'errorHandler'));

		//Connect to Database
		$this->db = mysql_connect(DB_HOSTNAME, DB_USERNAME, DB_PASSWORD);
		mysql_set_charset('utf8', $this->db);
	 	mysql_select_db(DB_NAME, $this->db);
	}

	function errorHandler($errno, $errstr)
	{
		switch ($errno){
		    case E_WARNING:
				echo '<b>There has been an error with the MySQL database connection. '.
				  	 'Please, make sure the config file is OK.</b>';
				die();
		    default:
		        return false;
		}
	}

	function getThreads()
	{
		$query = "SELECT p.title, date_format(p.date,'%m/%d/%Y %T') as date, p.permalink, p.author ".
				 "FROM posts p ".
				 "WHERE permalink_parent IS NULL";
		return mysql_query($query);
	}

	// ... other useful methods ....

}

Probably the most important method is savePost, so let’s take a look at it apart from the previous ones.

function savePost($input, $permalink, $newThread)
{   

	$postOK = $this->isValidPost($input, $permalink, $newThread);

	if (!$postOK) {
		return -1;  // something missing
	}

	if ($newThread) {
		$query = 'INSERT INTO posts '
				. '(title, content, author, permalink, permalink_parent) VALUES'
				. '("%s","%s","%s","%s", NULL)'; 

		$query = sprintf($query,
			clean(strip_tags($input["title"])),
			clean(strip_tags($input["content"])),
			clean(strip_tags($input["author"])),
			$permalink);
	} else {
		$query = 'INSERT INTO posts '
				. '(content, permalink_parent, author) VALUES'
				. '("%s","%s","%s")'; 

		$query = sprintf($query,
			clean(strip_tags($input['content'])),
			$permalink,
			clean(strip_tags($input['author'])));
	}                       

	if (mysql_query($query)) {
		return 1;   // Ok
	} elseif (mysql_errno() == 1062) {
		return -2;  // Duplicated title error
	} else {
		return -3;  // DB error
	}
}

Note when we create the $query string, we use sprintf to make the code cleaner.

The method isValidPost is private and its code is:

private function isValidPost($input, $permalink, $newThread)
{
	if ($newThread) {
		return !empty($input['title'])
			&& !empty($input['content'])
			&& !empty($input['author'])
			&& !empty($permalink);
	} else {
		return !empty($input['content'])
			&& !empty($input['author'])
			&& !empty($permalink);
	}
}

The different numbers we return in the savePost method have a meaning (we’ll see it later), but, basically we have to recognize different kind of errors to show a different message each time, so we can’t return just false, and the use of exceptions could be complicated for the beginners.

This is actually a classic approach to manage the database from the PHP code, we’ll see at the end of the tutorial what people are using now and why we should use it too. But this class is enough for us and I assume readers know a little bit about PHP probably also know this way to connect to the database and manage queries.

Validation Helper

This script (helpers/validation.php) is just a group of functions we’ll use all over the project. There are 3 functions here:

String to Permalink (strToPermalink)

Takes a string as input and creates a human-friendly URL string. Its implementation is:

function strToPermalink($str)
{
	$permalink = iconv('UTF-8', 'ASCII//TRANSLIT', $str);
	$permalink = preg_replace("/[^a-zA-Z0-9\/_|+ -]/", '', $permalink);
	$permalink = strtolower(trim($permalink, '-'));
	$permalink = preg_replace("/[\/_|+ -]+/", '_', $permalink);

	return $permalink;
}

To sum up all we do here is to remove “weird” characters like á or é and others, and then convert -, spaces and others into _. (Permalink is also known as slug or even permanent link).

Clean input (clean)

Here we take care of removing slashes if magic_quotes_gpc is enabled and escaping some characters with mysql_real_escape_string. Don’t worry if you don’t know what magic quotes are or why we code this function, when we talk about security you’ll understand it.

function clean($value)
{
	// Stripslashes
	if (get_magic_quotes_gpc()) {
		$value = stripslashes( $value );
	}

	// Quote if not a number or a numeric string
	if (!is_numeric($value) && !empty($value)) {
		$value = mysql_real_escape_string($value);
	}
	return $value;
}

Process post (processPost)

This function has a lot of lines (compare to the rest of this file), I’ll try to explain all of them without code:

1. Prepare the array to be returned with all values initialized as NULL
2. If it has everything in the array to start, then checks if the Recaptcha answer is OK, generates the permalink, tries to save the post and returns a message.
3. If the input array is not empty but it hasn’t got all we need OR the Recaptcha input field is wrong, then it returns an error message.
4. Finally, the showBox variable in the array is set. The box we’ll be shown if there was an error, or always in case we are in the page where users can write a response.

I’ll explain Recaptcha later, now let’s focus on the rest of the code. The array it will return is initialized in this way:

/* This is not neccesary but it makes code cleaner,
and we could change this new array and without modifying
the original $_POST */
$input = $_POST; 

$returnArray = array('errorHTML' => NULL,
					 'okMessage' => NULL,
					 'recaptchaError' => NULL,
					 'showBox' => NULL);

Then we code the steps 2 and 3 of the list we did before.

if (array_sum($input) > 0 && !empty($input["recaptcha_response_field"])) {
	//We have something in the $input and the Recaptcha response
	$resp = recaptcha_check_answer (RE_PRIVATE_KEY,
		$_SERVER["REMOTE_ADDR"],
		$input["recaptcha_challenge_field"],
		$input["recaptcha_response_field"]);
	if ($resp->is_valid) {
		require_once 'classes/Database.php';
		$db = new Database();

		if (is_null($permalink)){
			$permalink = strToPermalink(strip_tags($input['title']));
		} 

		$saveResult = $db->savePost($input,
									clean(strip_tags($permalink)),
									$newThread);

		switch ($saveResult) {
			case -1:  //A field is empty
				$returnArray['errorHTML'] = 'All fields are required';
				break;

			case -2: //The title is already in use
				$returnArray['errorHTML'] = 'Duplicated title, please, choose another one.';
				break;
			case -3: //There has been an error with the query
				$returnArray['errorHTML'] = 'There has been an error with the Database, '.
										'please, try again later.';
				break;				

			default: //Everything is OK
				$returnArray['okMessage'] = '<p>The post has been published. You can see it '
					.'<a href="view_thread.php?permalink=' . $permalink . '">here</a></p>';
		}
	} else { //The recaptcha response is not valid.
		$returnArray['recaptchaError'] = $resp-&gt;error;
	}
} elseif (array_sum($input) &gt; 0) {
	//We have something in the $input array but the recaptcha response is not
	$returnArray['errorHTML'] = 'All fields are required';
}

You can see here the different kind of errors we return and the reasons. Finally we set the showBox variable of $returnArray:

if ($newThread) {
	$returnArray['showBox'] = !empty($returnArray['errorHTML'])
	|| !empty($returnArray['recaptchaError'])
	|| empty($input);
}

The View Class

There is a part of the HTML code that depends on some parameters that come from PHP. To keep things as clear as we can we are going to make a class exclusively for this purpose.

The home page is going to show a list of threads, so let’s code that method and the constructor of our new class:

// we need the class db to make an object
require_once 'Database.php';

//we'll also need the recaptcha helper later
require_once 'helpers/recaptcha.php';

class View{

	private $db;

	function __construct()
	{
		$this->db = new Database();
	}     

    function tableThreads()
	{
		$content = "";

		if (($threads = $this->db->getThreads()) && mysql_num_rows($threads) > 0) {
			 $content .= '<h1>Threads</h1>';
			 $content .= '<table border="0" width="" id="posts_list">';
			 $content .= '<tr>';
			 $content .= '<th class="title">Title</td>';
			 $content .= '<th>Date</td>';
			 $content .= '<th>User</td>';
			 $content .= '</tr>';

			while ($row = mysql_fetch_assoc($threads)) {
				$content .= '<tr class="thread">';
				$content .= '<td class="title">';
				$content .= '<a href="view_thread.php?permalink=';
				$content .= htmlspecialchars($row['permalink']) . '">'.$row['title'].'</a>';
				$content .= '</td>';
				$content .= '<td class="date">'.htmlspecialchars($row['date']).'</td>';
				$content .= '<td class="author">'.htmlspecialchars($row['author']).'</td>';
				$content .= '</tr>';
			}
			$content .= '</table>';
			return $content;
		} else {
			return false;
		}
	}

The htmlspecialchars function provides a way to change some HTML elements into entities, so every time we are going to output something from the database we should use this function. We’ll se more about this later.

The next method we’ll code is composeTable, and it will be useful to show all the posts of a thread.

// ... previous code ... 

private function composeTable($post, $firstPost, $numRows)
{
	$htmlTable = "";

	if ($firstPost)
		$htmlTable .= '<h1>'.htmlspecialchars($post['title']).'</h1>';

	$htmlTable .= '<table border="0" width="895">';
	$htmlTable .= '	<tr>';
	$htmlTable .= '		<th>Message</th>';
	$htmlTable .= '		<th>Date</th>';
	$htmlTable .= '		<th>Author</th>';
	$htmlTable .= '	</tr>';
   	$htmlTable .= '	<tr>';
	$htmlTable .= '		<td class="title">'.htmlspecialchars($post['content']).'</td>';
	$htmlTable .= '		<td class="date">'.htmlspecialchars($post['date']).'</td>';
	$htmlTable .= '		<td class="author">'.htmlspecialchars($post['author']).'</td>';
	$htmlTable .= '	</tr>';
	$htmlTable .= '</table>';
	if ($firstPost && $numRows &gt; 1)
		$htmlTable .= '<h1>Responses</h1>';

	return $htmlTable;
}

function tableThreadContent($permalink)
{
	$content = "";

	if ($posts = $this->db->getContentThread($permalink)) {
		$num_rows = mysql_num_rows($posts);
		if ($num_rows > 0) {
			while($row = mysql_fetch_assoc($posts))
				$content .= $this->composeTable($row,
					is_null($row['permalink_parent']),
					$num_rows);
		}
		return $content;
	} else {
		return false;  //database error
	}
}

[/html]

<p>The second method goes around all the posts in a thread and composes the HTML with the first one (composeTable). </p>

<p>The method composeTable is private because we'll only call it from the tableThreadContent method in the same class and its functionality is only useful inside this class. In the future if we want to make a class that extends this one and uses that method all we need to do is change private for protected.</p>

<p>Now let's think about what happens if we don't have a single thread. Apart from being very sad it could be a problem if we don't show a warning message. This is a very simple method to do that:</p>
[php]
// ... previous code ...
function htmlError($from_view_thread = false)
{
	if ($from_view_thread) {
		//From view_thread.php
	   	$html = '<p class="error">There is no thread with this title. Sorry! ';
		$html .= 'You can go back to <a href="index.php">the main page</a>.</p>';
	}else{
		// From index.php
	   	$html = '<p class="error">There aren\'t any threads. Sorry! </p>';
	}
	return $html;
}

If we call the method from view_thread.php it means we are in a thread that doesn’t exist, so we show a different message in that case.

Now we need to create a form for users who want to send new posts (responses or the beginning of a new thread).

Recaptcha or how to avoid spam

At this point we have to think about the spam problem. As you can see there is no registration process so anyone can just fill the form and post a message with the content they want every time they like. How to handle the input will be discussed later, but the problem here is a bot could fill the form and submit it.

How can we avoid that? Well, the easiest and probably most used solution is a captcha system. Yes, those boring images of characters we have to identify and replicate. Specifically the implementation bought by Google, Recaptcha.

But what are the guarantees? Well, Twitter uses it in the sign up process and if we forum doesn’t grow too much (actually like Amazon or Google) we won’t have more problems. The question now is: how can we use it?

Recaptcha provides a file (in our project is helpers/recaptcha.php) and there we have all the functions we need, actually even more. You can see the documentation at the the end of the tutorial.

Finally, the other two methods are messageBox and buttonPostThread. The first one will return a string with the HTML needed to compose a post (a form) when we need to and the second one just returns a div to go to post_message.php and create a new post.

// ... previous code ...
function messageBox($new, $recaptchaError = null, $errorHTML = null)
{
	$content = '<div>';
	if (!empty($errorHTML)) {
		$content .= '<div><p class="error">' . $errorHTML . '</p></div>';
	}
	if ($new) {
		$content .= '<h1>Post a Message</h1>';
	} else {
		$content .= '<h1>Post a Response</h1>';
	}
	$content .= '<form action="" method="post" accept-charset="utf-8">';
	if ($new) {
		$content .= '';
	}
	$content .= '';
	$content .= '<textarea name="content" rows="8" cols="88">Message</textarea>';
	$content .= recaptcha_get_html(RE_PUBLIC_KEY, $recaptchaError);
	$content .= '';
	$content .= '</form>';
	$content .= '</div>';

	return $content;
}

The $new parameter indicates if the form will be shown in post_message.php to send a new thread or in view_thread.php (to send a response). This will helps, for instance, to ask for the title of the thread if it’s going to be a new one or not.

The $recaptchaError is what we need to render properly the box with the captcha and the input, because in case the user types wrong the code the recaptcha_get_html will take care of showing a message.

Finally, the $errorHTML could contain an string of an error and we have to show it here. (We’ll see later what kind of errors could happen).

The last method will be buttonPostThread, and as I’ve said before its only functionality will be to return a string, but the reason we make it is to keep consistent the idea of not writing HTML code in some scripts like index.php or view_thread.php, besides of that the code of these pages will be very clear if we keep that idea in mind.

// ... previous code ...
function buttonPostThread()
{
	return '<div class="newThread">'
		  .'<a href="post_message.php">Create a new thread</a>'
		  .'</div>';
}

Probably you are thinking: “why all this code if we haven’t written a script which shows anything directly?”. And it’s OK you wonder that, but now you will see the advantages of having a modular and independent code.

Home page

Let’s start with our first page, index.php. These are the things we have to show:

• Header
• List of threads OR a warning if there aren’t threads
• Link to make a new thread
• Footer

The code is as simple as this list:

require_once 'classes/View.php';
require_once 'header.html';

$view = new View(); 

if ($htmlString = $view->tableThreads()) {
	echo $htmlString;
} else {
	echo $view->;htmlError();
}

echo $view->buttonPostThread();	         

require_once 'footer.html';

The output in the browser with 3 threads is:

Create a new post

The post_message.php script is going to show a form, get the input and try to process this input as a new post. If everything is ok we’ll show the link to the new post, otherwise we’ll show an error message.

require_once 'classes/View.php';
require_once 'helpers/validation.php';
require_once 'header.html';

$result = processPost();	 

if ($result['showBox']) {
	$view = new View();
	echo $view->messageBox(true, $result['recaptchaError'], $result['errorHTML']);
} else {
	echo $result['okMessage'];
}      

require_once 'footer.html';

The processPost function is implemented in helpers/validation.php and, as I’ve explained before, processes the input, tries to save the post and return an array with different values. This is the output in Firefox:

View Thread

The view_thread.php script will combine a couple of things.

• We have to get some posts, the initial one first, and show them properly.
• The form to write a response is going to be almost the same than the one we did to write a new thread. (Hint: We’ll use the same function).

The first thing we do is to include all the files we need and clean the input ($_GET) with a function (implemented in the helpers/validation.php file).

require_once 'classes/View.php';
require_once 'helpers/validation.php';
require_once 'header.html';

$view = new View();
$permalink = clean($_GET['permalink']);

Here we process the $_POST array and create a “message box”, a form to send a response to the thread.

// .. previous code ...

$postInput = $_POST;

$result = processPost($permalink, false);

$messageBox = $view->;messageBox(false,
	$result['recaptchaError'],
	$result['errorHTML']);

Finally we print the posts and the form to write a new response. In case we get a false value from messageBox we’ll show an error because there isn’t a thread with that permalink.

if ($htmlString = $view->tableThreadContent($permalink)) {
	echo $htmlString;
	echo $messageBox;
} else {
	echo $view->htmlError(true);
}

require_once 'footer.html';

So all these parts together compose our view_thread.php script. Here we have the final result with a thread and a response to the first post:

MySQL from PHP alternatives

We have used some functions to manage the database like:

mysql_connect();
mysql_set_charset();
mysql_select_db();
mysql_query();

The reason I’ve used these functions is because they are well known by the most of novice PHP developers, but you should know these functions have lost their popularity. I’ll explain you why.

Actually, there are many reasons, the mysql functions provide a procedural interface, doesn’t support a lot of things in the new versions of MySQL (newer than 4.1.3) and have more security problems. So take a look at the alternatives:

MySQL Improved (mysqli)

This extension was developed to take advantage of new features found in MySQL systems versions 4.1.3 and newer. Some features are:

• Object-oriented interface
• Support for Prepared Statements
• Support for Transactions
• …

Apart from that is more secure than the mysql classic extension because we can use bound parameters (details in links at the conclusion).

PHP Data Objects (PDO)

The main difference is this API can be used with any kind of database (in theory), that means it doesn’t have to be MySQL. So the change of the database system in the project it’s going to be easier.

But like yin yang there is a disadvantage, some advanced new features of new MySQL versions are not supported. Anyway is usually better use this or the previous alternative than the classic mysql extension.

Comparative from official documentation

The details of how to use mysqli or PDO are in the official documentation.

The security issue

First of all I have to say I’m not a security expert but if you are going to make a web app you need to know the possible security holes, and try to prevent attacks, not being a hacker doesn’t mean you don’t need to know about security. So let’s see the most common attacks in a web app, and how to prevent them in our forum.

Cross Site scripting (XSS)

XSS exists when your PHP code outputs some data that has neither been filtered nor escaped. Some code like this is vulnerable to XSS:

echo $_POST['var1'];

That means someone could send whatever they want in a form and will be shown later, and that’s very dangerous. The simplest thing they can send is:

alert('This will be shown instead of a real var1!!')

So the the code will be executed by the browser. A more dangerous use, could be extract cookie content with javascript and log in a system using that cookie. So, now we have understood it’s dangerous, how can we prevent it?

We have to escape data which comes from users. In this forum we have made a couple of things. First of all we strip the HTML and PHP code with strip_tags(), and when we show data from database we escape using htmlspecialchars(). Let’s see some code:

// The user sends this:
// $_POST['email'] = "alert('fool!')";
// $_POST['name'] = "<strong>Hercules</strong>";

// Now we remove all the HTML and PHP code
$email = strip_tags($_POST['email']);

echo $email; //Output: alert('fool')
echo $name; //Output: Hercules

As you can see the script tags are not shown so the alert will not be executed. But Hercules wanted to show his name with strong tags, and actually it’s harmless, but we removed those tags too. A possible solution is to provide a list of our own tags and then replace them with the actual HTML elements. We haven’t implemented this, but it would be very easy:

$string = strip_tags($_POST['name']);
$string = str_replace('[strong]','<strong>');
$string = str_replace('[/strong]','</strong>');

The other thing we do is to use htmlspecialchars(), this is redundant because with strip_tags HTML code will be removed and not inserted into our database, but there are some characters which do nothing so we can convert them into HTML entities. Remember it’s usually better to a be a little bit paranoid when we talk about security.

// From database
$result = "alert('ups!')";

$resultOK = htmlspecialchars($result);

echo $resultOK; //Output: alert('ups!') 

The output is exactly the string, but some characters are actually HTML entities, so the code is not executed, just shown in the browser.

SQL injection

This vulnerability is, as the name suggests, when someone injects SQL code into your web app. Here we have to take care of a couple of details, but let’s see the main problem.

We have a query with some variables from $_POST, something like:

$user = $_POST['user'];
$password = $_POST['password']; 

$query = "SELECT name, age, credit_card
		  FROM users
		  WHERE username = '$user' AND password = '$password' ";

What if someone sends: ‘ or 1=1 ; – as the password? The query would be:

SELECT name, age, credit_card
FROM users
WHERE username = 'jose' AND password = '' or 1=1 ; -- '

So the WHERE condition is always true because (1=1) is, and (false) || (true) is also true. Consequence? The query selects all the records.

A simple way to prevent this is to use the function mysql_real_escape_string() which escapes special characters in a string taking into account the current character set of the connection so that it is safe to place it in a mysql_query(), as we do in the clean function (helpers/validation.php file).

But still there could be a problem with slashes and magic_quotes. To summarize magic_quotes is something annoying and we have to deal with it. Magic quotes is a deprecated PHP configuration that, when turned on it automatically escapes characters for you.

The problem is sometimes we don’t want that, so in our forum when we clean the input we use stripslashes() in case magic_quotes is turned on, which un-quotes a quoted string, and from that point we escape the data. (see clean function at the beginning of this tutorial). So with this implementation we can insert O’connor, and it won’t be a problem, without this consideration, the input could be inserted as O\’Connor into the database.

There could be a problem with the magic_quotes_sybase configuration, but, apart from being deprecated, it’s turned off by default so usually it won’t be a problem, and in our forum we don’t deal with it.

If we had used other alternative to manage the database from PHP, a lot of these precautions wouldn’t be necessary, you have more details in the official documentation.

Cross-Site Request Forgery (CSRF)

According to Wikipedia, is a type of malicious exploit of a website whereby unauthorized commands are transmitted from a user that the website trusts. But we don’t have to worry about that since our forum is open to anyone who wants to write and there aren’t sign up and log in processes. Anyway at the conclusion you have some links in case you want to know more about this exploit.

How to set up your own forum

When you download the code, you have to follow the next steps to have your own forum working:

• Get a Recaptcha key here.
• Create a database with the SQL query at the beginning of the tutorial.
• Change the values of constants in the config.inc.php file with yours.
• And, of course, put the files where you can access with PHP and Apache working (localhost’s directory).

Conclusion

I have to admit this tutorial is long but if you read it a couple of times and take a look at the code I’m sure you’ll be able to understand all the project.

The organization of code in classes and files is up to the developer. And as long as we don’t write the same code over and over again, or just type queries, html and PHP code in the same file, the project will be ok. I mean, everything about make more or less classes or create a specific function is not a science. It’s more a design problem, so feel free to think about other ways to develop this forum, it will help you to be a better developer.

For instance I could have written a post class, or make everything procedural, but this was just an approach, and you can see the power of this in how many lines we have written in our index or post_message web pages. In addition, if we need more features the development will be very easy since everything is well documented in the files you can download.

There is other feature we could implement, to set the value of the inputs to the content of $_POST if it’s received, but that could make the code the code less clear, so I’ve avoid it in order to make things easier.

Here you have some links to some sites where you can learn more about security, PHP and MySQL.

• Recaptcha official site
• Alternatives to manage a database from PHP
• Writing Secure PHP Series
• SQL injection
• Cross site request forgeries (XSRF)
• Design Patterns in Wikipedia

Related posts:

1. How To Use, Style and Implement WordPress Shortcodes
2. Create an AJAX/jQuery/PHP Contact Form
3. Create a Camera Application in Flash Using ActionScript 3

There are tonnes of great resources around the net that offer free high quality textures. Two of my favourites being Spoon Graphics and Circle Box.

Here’s a collection of what I feel are 20 of the most visually appearing and inspiring textured websites.

A Simple Measure

Backburner Theme

The Brooklyn Circus

Christian Swinnen

Digital Labs

Brett Chaney

Emily Whitesmith

Get into Gardening

Idyllic Creative

Interexpresso

Made by Duncan

Matthew Leak

Peaxl

United Pixelworkers

Rapture of the Deep

StringMania

Sofa Surfer

Trevor Hutchison

WeGraphics

Wireframe Plus

Conclusion

As you can see, textures can really make a difference and improve the visual appearance of a sites’ design. Do you think that the sites listed would be as appealing as they are without the textures? I wouldn’t think so.

Remember, textures can be anything: wood, metal, brick, even simple dust scratches. They don’t have to be ‘full on’ and dominating the design, subtle can be just as effective.

Do you know any sites that make great uses of textures and haven’t been listed? Let us know!

Tell us what your favourite listed design is too!

Related posts:

1. 49 Fascinating E-Commerce Websites for your Inspiration
2. 50 Amazing and Gorgeous Apple Related Websites
3. 15 Inspiring Minimal Web Designs