Building a Downloads Gallery WordPress Plugin

Plugins extend WordPress’ functionality and let you do almost anything with your existing site. In this tutorial, we will create a Downloads Gallery plugin for your WordPress website. We will be keeping it plain and simple and shall focus more on WordPress core instead of PHP logics.

1. Firstly, we will setup the admin area functionality which includes uploading, listing and deleting files.
2. Secondly, we will list the uploaded files on the actual site for others to download them.

You can easily turn this plugin into a full-featured Downloads system, but as of now, we will focus more on how to work with WordPress to setup a working plugin.

Functionality

We will be setting up a Downloads Gallery for your WordPress website, where we need our users to download all the files uploaded by admin. In brief, we need a page to upload files to WordPress and a page to download the requested files.

File Structure

the above screenshot shows the required files and folder to help us setup our plugin. Let’s firstly understand the file structure:

1. secure_files: This folder will store our download files.
2. downloads.php: This file will let the end-user download the file by clicking on a link.
3. style.css: You can write a seperate design for your Downloads Gallery under this file.
4. tutlage_file_manager.php This file will store the logics for the front-end view (website page to download files).
5. tutlage_file_manager_admin.php This file will store the logics for the admin page.

These are the required files in order to setup our WordPress plugin. We will be creating functions to manage uploads and downloads. You will need to have a working knowledge of PHP basics for this purpose.

Getting Started

Create a new folder named tutlage_file_manager under wp-content->plugins, with a new file called tutlage_file_manager.php inside it. Now open that file with your favorite text editor and paste the following code inside it:

<!--?php/*Plugin Name: Tutlage File ManagerPlugin URI: http://www.speckyboy.comDescription: Plugin to setup a simple downloads gallery for your WordPress websiteAuthor: Aman VirkVersion: 1.0Author URI: http://www.thetutlage.com*/?-->

Login to the WordPress dashboard and navigate to Plugins->Installed Plugins. Now, you will be able to find a new plugin listed there. In our case, it shows Tutlage File Manager

You can activate the plugin by clicking the Activate link next to the plugin name, but it will not make any changes to WordPress because we have not yet written any code for our plugin.

Working with Action Hooks

Action Hooks are designated points in WordPress which give you a chance to run your code before executing any described function. Let’s say you wish to add something to the footer of WordPress. You can hook your function with the wp_footer function. See the given example. Check out list of available hooks in WordPress.

<?phpfunction your_function() {    echo '<p>This is inserted at the bottom</p>';}add_action('wp_footer', 'your_function');?>

Now if you have the plugin activated, just go to the website and you will be able to see the above text at the bottom of the page. As we have nothing to do with footer, just remove the above code so that we can write the action hook to show our plugin inside the WordPress Settings tab.

function tutlage_file_manager_callback(){    // here goes our callback function} function tutlage_admin_setup(){    add_options_page("Tutlage File Manager", "Tutlage File Manager", 1, "tutlage_file_manager", "tutlage_file_manager_callback");}add_action('admin_menu',tutlage_admin_setup);

Copy the above code inside your tutlage_file_manager.php file and refresh the

Dashboard

page. Now you will be able to see a link inside the settings tab.

Understanding the Above Code

What we have done so far is called the add_options_page function to list our plugin inside the Settings tab. You can read more about add_options_page here.

As of now, we are able to see our plugin link and a blank page. We can move forward to create an Upload button for our plugin. We will keep the logics for our admin page inside a different file. Let’s create a new file tutlage_file_manager_admin.php.

WordPress, by default, listens to the main plugin file which in our case is tutlage_file_manager.php. So we will include the tutlage_file_manager_admin.php file under this file.

function tutlage_file_manager_callback(){    include_once( 'tutlage_file_manager_admin.php' );}

We have edited our tutlage_file_manager_callback() function which will now include the tutlage_file_manager_admin.php file. Let’s do ‘Hello World‘ to check if we are on the correct path. Paste the below code inside tutlage_file_manager_admin.php and refresh the page to see ‘Hello World’ printed on your screen:

<?php    echo '<p>Hello world</p>';?>

If you do see ‘Hello World’ then we can proceed…

Setting up the Upload Form

Paste the below code inside tutlage_file_manager_admin.php file and refresh the page, you will be able to see the upload form:

<div class="wrap">    <h2>Uploading Files</h2>    <form method="post" action="<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']); ?>" enctype="multipart/form-data">        <p><label for="Upload File">Upload File: </label><input type="file" name="tutlage_file_upload" /></p>        <p class="submit"><input type="submit" name="Upload" value="Upload" /></p>    </form></div>

This form will not do anything as of now becuase we have not written any code for it. We need to find out whether the Download directory, which in our case is secure_files, exists or not. Paste the below code at the top of your file.

<?php$folder_path = ABSPATH.'wp-content/plugins/tutlage_file_manager/secure_files';function createDirectory($folder_path){    if(!is_dir($folder_path))    {        mkdir($folder_path);    }}createDirectory($folder_path);?>

1. First, we have defined the base path for our Downloads directory.
2. Next, we have created the function which will check whether the above directory exists or not. If not, it will make a new directory.
3. Finally, we are calling the function.

Now, we can move forward and write the function to add the uploaded files under this directory. Add the below code after the createDirectory() function.:

function uploadFiles($directory,$file_name,$file_tmp_name){    if(move_uploaded_file($file_tmp_name,$directory.'/'.$file_name))    {        return 1;    }    else    {        return 0;    }}

We are simply uploading the files to the given directory under this function. Now we will write the code that gets executed everytime the Upload button is clicked. Add the below code inside the same file ( tutlage_file_manager_admin.php ):

if(isset($_POST['Upload'])){    $file_name = strtotime("now").$_FILES['tutlage_file_upload']['name'];    $upload = uploadFiles($folder_path,$file_name,$_FILES['tutlage_file_upload']['tmp_name']);    if($upload == 1)    {        echo '<div class="updated"><p><strong>File Uploaded Successfully <a href="'.str_replace('%7E','~',$_SERVER['REQUEST_URI']).'">Return Back</a></strong></p></div>';    }    else    {        echo '<div class="error"><p><strong> Error Uploading File <a href="'.str_replace('%7E','~',$_SERVER['REQUEST_URI']).'">Return Back</a></strong></p></div>';    }}

1. We have created a variable $file_name which will add the current time (in milliseconds) in front of the filename. It will make sure we are not over-riding the existing file with the current one if they both have same name.
2. Everytime we click the Upload button, we are running the function uploadFiles() with the required parameters.
3. First, we will pass the folder path.
4. Next, we will pass the actual file name.
5. Lastly, we will pass the temporary file name.
6. If the upload was successful, we will show a success message else we will give an error message.

Check the secure_files folder to find out whether files are saved there or not. At this point, we are able to save files; now we need a way to retrieve all files from the secure_files directory and list them to our plugin’s page.

The below function will return an array of data containing uploaded file information. It is a good pratice to keep all of your functions in one place, so paste the below code right where your last function ends.

 function getUploadedFiles($directory){    $folder = opendir($directory);    while ($file = readdir($folder)) {        if($file !== '.' && $file !== '..')        {            $filename = $directory.'/'.$file;            $file_size = filesize($filename);            $last_date = date("F d Y H:i:s", filectime($filename));            $file_array[] = array('filename' => $file,'filesize' => $file_size,'lastdate' => $last_date);        }    }    return $file_array;}

The above function will list all the files from a specific directory.

Earlier, we created an if statement to upload the files, now we will create an else statement just next to it to list all files.

 else{    $list_files = getUploadedFiles($folder_path);     $output = ' <table class="wp-list-table widefat fixed posts" cellspacing="0">    <thead>        <tr>            <th id="title" class="manage-column column-title sortable desc" style="" scope="col">                <a href=""><span>Title</span></a>            </th>            <th id="title" class="manage-column column-title sortable desc" style="" scope="col">                <a href=""><span>File Size</span></a>            </th>            <th id="title" class="manage-column column-title sortable desc" style="" scope="col">                <a href=""><span>Upload Date</span></a>            </th>            <th id="title" class="manage-column column-title sortable desc" style="" scope="col">                <a href=""><span>Actions</span></a>            </th>        </tr>    </thead><h2> Uploaded Files </h2>    <tbody>';    if(!empty($list_files))    {        foreach($list_files as $key => $value)        {            $output .= '<tr>                <td class="post-title page-title column-title">                    <strong>'.$value['filename'].'</strong>                </td>                <td class="post-title page-title column-title">                    <strong>'.$value['filesize'].' Bytes </strong>                </td>                <td class="post-title page-title column-title">                    <strong>'.$value['lastdate'].'</strong>                </td>                <td class="post-title page-title column-title">                    <a href="'.str_replace( '%7E', '~', $_SERVER['REQUEST_URI']).'&&file='.$value['filename'].'&&action=delete"> Delete </a>                </td>            </tr>';        }    }    else    {        $output .= '<tr><td> No files have been found </td></tr>';    }    $output .= '</tbody></table>';}

It does seem like a lot of code, but most of it is HTML.

1. First, we have called the function getUploadedFiles() which will get all files from a directory and return us the array of data.
2. Next, we have created a table and defined ID and class attributes to make sure our table looks quite similar to the native WordPress table structure.
3. We have also stored the output inside a variable called $output.
4. All we need to do now is to echo the above variable.

Place the below code next to the form we created, and we are done!

 <div class="clear"></div><?php if(isset($output)) { echo $output; } ?>

If everything has gone right, you will now be able to find a Delete button with every file listed on a table. So, why not write one more function to delete the selected file?

 function deleteFiles($file_path){    if(is_file($file_path))    {        unlink($file_path);    }    else    {        rmdir($file_path);    }    return true;}

The above function is quite simple as it will check if the selected filename is a file. Then, we can use the unlink method to delete else, we will also use the rmdir method which will remove the directory.

Now where should we write the code that will run after hiting that Delete button? Do you remember that we created if and else statements earlier? Let’s add else if inside them and this else if will be the one to delete the file.

 elseif(isset($_GET['action']) && $_GET['action'] == 'delete'){    $file_path = $folder_path.'/'.$_GET['file'];    if(deleteFiles($file_path))    {        echo '<div class="updated"><p><strong>File Deleted Successfully <a href="'.str_replace('%7E','~',$_SERVER['PHP_SELF']).'?page=tutlage_file_manager">Return Back</a></strong></p></div>';    }}

Let’s have a quick recap of what we have done so far. We’ve learnt how to add a link to our plugin inside WordPress Settings menu, figured out how WordPress hooks work and have created the functionality to upload and list files from admin’s Dashboard.

Now, we will work with the front-end logic where a user can download all the listed files from our website. Let’s break it down to find what we need to make it work.

1. Create a dynamic page where all files will be listed.
2. Grab all files from our secure_files directory and list them on the above page.
3. Add functionality to download file with onclick event.

Let’s get started with it. Open file tutlage_file_manager.php and paste the following code inside it.

function thetutlage_add_share_page(){    if (!get_page_by_title('Downloads Gallery'))    {        $post = array(            'post_content'  => '',            'post_name'     =>  'Downloads Gallery',            'post_status'   => 'publish',            'post_title'    => 'Downloads Gallery',            'post_type'     => 'page',            'post_parent'   => 0,            'menu_order'    => 0,        );        wp_insert_post($post);    }}thetutlage_add_share_page();

The above function will check whether a page with the title Downloads Gallery exists or not. If our Downloads Gallery exists already, than we will not create a new page else we will create one and name it Downloads Gallery.

Now go back to your actual website and you will find a blank page with a title Downloads Gallery. With that done, we now need to write a function to grab all files from the secure_files directory and list them on this page.

Copy function getUploadedFiles() from tutlage_file_manager_admin.php and paste it to tutlage_file_manager.php and rename the function to getDownloadFiles().

This function will do the same thing: it will grab all the files from a given directory and return them in an array. Now we need to call this function, break the array and list them on the page with title Downloads Gallery.

We need to list files only where the page title is Downloads Gallery, and in order to do that we can use a handy WordPress is_page function:

function list_downloads($content) {    $page = get_page_by_title( 'Downloads Gallery' );    if(is_page($page->ID))    {        $folder_path = ABSPATH.'wp-content/plugins/tutlage_file_manager/secure_files';        $files = getDownloadFiles($folder_path);        if(!empty($files))        {            $output = '<table id="tutlage_file_manager">                <tbody><tr>                    <th>File Name</th>                    <th>File Size</th>                    <th>Download</th>                </tr>';            foreach($files as $value)            {                $output .= '<tr><td>'.$value['filename'].'</td><td>'.$value['filesize'].' Bytes</td><td><a href="'.get_option('siteurl').'/wp-content/plugins/tutlage_file_manager/downloads.php?file='.$value['filename'].'"> Download </a></td></tr>';            }            $output .= '</tbody></table>';        }        else        {            $output = '<h2> No files found </h2>';        }        return $output;    }}

Understanding the Above Code

Most of the above code is HTML which will let us display our files inside a table. There will be a link next to every item which will allow the user to download it.

1. First we will get a page where the title is Downloads Gallery
2. Next we will make a check whether that page exists or not using is_page function.
3. If it exists than we will call the above function getDownloadFiles(), which will return files as an array.
4. Finally, we will break the array and list the items inside a table.

Now if you refresh the page, you will see no change. It is because so far we have only created the function. We still need to attach this function to WordPress so that every-time the content is loaded, our function runs as well.

add_filter( 'the_content', 'list_downloads' );

Just paste the above code in the same file tutlage_file_manager.php and now refresh the page. You will see all the files listed there. Now all we are left with is the downloads.php file. Make a new file inside the plugin directory and name it to downloads.php.:

<?php    $files = $_GET['file'];     $filepath = 'secure_files/'.$files;     header('Content-Description: File Transfer');    header("Content-Disposition: attachment; filename=\"$files\"");    header('Content-Type: application/octet-stream');    header('Content-Transfer-Encoding: binary');    header('Content-Length: ' . filesize($filepath));    header('Cache-Control: must-revalidate, post-check=0, pre-check=0');    header('Pragma: public');    header('Expires: 0');    readfile($filepath);?>

downloads.php does not have much work to do: it will get the file name from the URL and will use method to read the file back to the user. Now, you can easily test the entire plugin right from uploading to downloading files.

Is There Anything Left?

Yes. As of now, we have not created any stylesheet, so let’s take care of that too. Create a new file named style.css.

This file will let you write styles for your actual Downloads page on the website. We just have to link the stylesheet to our existing function called list_downloads(). Open tutlage_file_manager.php.

wp_enqueue_style( 'myprefix-style', plugins_url('style.css', __FILE__) );

Paste the above code inside if statement of list_downloads() function. You can now write any styles for your Downloads Gallery.

All done! Now, why don’t you download the source files and try it for yourself.

Download Source Files

Using jQuery to Validate the Standard WordPress Comment Form →
Using the Power of the .htaccess File to Improve WordPress SEO →
Tracking Social Media Sharing and Button-Clicks with JavaScript and WordPress →
For the Novice Developer: The Anatomy of a WordPress Theme →
Focusing on Usability with an Enhanced Pagination Design in WordPress Entries →

Source : internetwebsitedesign[dot]biz

Read More

Designing my website

Hey everyone,

This guide/tutorial will show you the steps I followed in planning and designing a layout for my personal website which is set for launch on January 2010.

The main steps we will go through this 3 part tutorial will be:

• Planning the layout design
• Setting up and coding the basics
• Setting up the rest of the website pages
• Designing various elements of the website, e.g. header, footer, content boxes, etc.  Using Adobe Photoshop
• Coding the navigation bar + JQUERY to enhance its effects
• Adding content

Part 1 and 2 of the tutorial will be up by Thursday 17th December

A sample of what we will be creating can be found at:

http://jaybonotan.site50.net/jbonotan/index.html

(Please note the site works best on firefox, this is just a sample file and by the end of the 3 part tutorial we will end up producing a fully working website which is validated and compatible with all browsers)

Regards,

Jason

Source : jasonfb89[dot]wordpress[dot]com

Read More

Designing my website Form Validation using XHTML, CSS and Javascript Dark Navigation Part 2 – Tutorial on converting a dark modern navigation bar using XHTML and CSS Random design showcase – Header & navigation Simple Dark Navigation – Part 1

Hey everyone,

This guide/tutorial will show you the steps I followed in planning and designing a layout for my personal website which is set for launch on January 2010.

The main steps we will go through this 3 part tutorial will be:

• Planning the layout design
• Setting up and coding the basics
• Setting up the rest of the website pages
• Designing various elements of the website, e.g. header, footer, content boxes, etc.  Using Adobe Photoshop
• Coding the navigation bar + JQUERY to enhance its effects
• Adding content

Part 1 and 2 of the tutorial will be up by Thursday 17th December

A sample of what we will be creating can be found at:

http://jaybonotan.site50.net/jbonotan/index.html

(Please note the site works best on firefox, this is just a sample file and by the end of the 3 part tutorial we will end up producing a fully working website which is validated and compatible with all browsers)

Regards,

Jason

In this tutorial I will show you how to validate forms using XHTML, CSS and Javascript.

What is form validation?
Form validation is a vital method used by web developers to ensure that the user has correctly filled out an online form. For example: A website contact form requires the user to fill out his/her name. If the user has not filled out his/her name a pop up from their web browser will appear indicating to them that they have not filled out the required fields.

A WORKING DEMONSTRATION CAN BE FOUND HERE

What you need:
Basic HTML knowledge – Forms.
Basic CSS knowledge – Styling.
Javascript knowledge -Pretty straight forward once you get the hang of it.

Step 1
Create the following files:
index.html – This will be your form
style.css – This will be the stylesheet to style your form, make it more attractive and professional!
script.js – The javascript file, this is important as the index.html file will rely on it to make sure the user has completed the required fields.

Step 2
The HTML

<!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>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<script src=”script.js” type=”text/javascript”>
</script>
<title>Form Validation – Jason Bonotan</title>
</head>

<!–XHTML,CSS AND JAVASCRIPT FULLY TESTED ON FIREFOX–>

<body>

<!–START CONTAINER–>
<div id=”container”>
<h1>Contact Form</h1>
<p>Please fill out the form below and one of our representatives will get back to you shortly, Thanks!</p>

<!–START FORM CONTAINER–>
<div id=”form-container”>

<form id=”contactform” name=”contactform” method=”post” onsubmit=”return validate_contact_form ( );”>

<label>
*Name
<span>Enter your name</span>
</label>
<input type=”text” name=”first_name” id=”name”/>

<label>
Last Name
<span>Enter your last name</span>
</label>
<input type=”text” name=”lastname” id=”lastname”/>

<label>
*E-mail
<span>Enter your e-mail</span>
</label>
<input type=”text” name=”email” id=”email”/>

<label>
*Confirm E-mail
<span>Please confirm your e-mail</span>
</label>
<input type=”text” name=”confirmemail” id=”confirmemail”/>

<label>
*Address Line 1
<span>Enter your address</span>
</label>
<input type=”text” name=”address1″ id=”address1″/>

<label>
*Address Line 2
<span>Enter your address</span>
</label>
<input type=”text” name=”address2″ id=”address2″/>

<label>
*Postcode
<span>Please enter your full postcode(no spaces)</span>
</label>
<input type=”text” name=”postcode” id=”postcode”/>

<label>
*Your comments & enquiries
</label>
<TEXTAREA NAME=”comments” COLS=60 ROWS=7></TEXTAREA>

<input type=”submit” name=”submitdetails” onClick=”checkname()” value=”Submit”/>

</form>

<!–END FORM CONTAINER–>
</div>

<!–END CONTAINER–>
</div>

</body>
</html>

Step 3:

The CSS

<!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>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<script src=”script.js” type=”text/javascript”>
</script>
<title>Form Validation – Jason Bonotan</title>
</head>

<!–XHTML,CSS AND JAVASCRIPT FULLY TESTED ON FIREFOX–>

<body>

<!–START CONTAINER–>
<div id=”container”>
<h1>Contact Form</h1>
<p>Please fill out the form below and one of our representatives will get back to you shortly, Thanks!</p>

<!–START FORM CONTAINER–>
<div id=”form-container”>

<form id=”contactform” name=”contactform” method=”post” onsubmit=”return validate_contact_form ( );”>

<label>
*Name
<span>Enter your name</span>
</label>
<input type=”text” name=”first_name” id=”name”/>

<label>
Last Name
<span>Enter your last name</span>
</label>
<input type=”text” name=”lastname” id=”lastname”/>

<label>
*E-mail
<span>Enter your e-mail</span>
</label>
<input type=”text” name=”email” id=”email”/>

<label>
*Confirm E-mail
<span>Please confirm your e-mail</span>
</label>
<input type=”text” name=”confirmemail” id=”confirmemail”/>

<label>
*Address Line 1
<span>Enter your address</span>
</label>
<input type=”text” name=”address1″ id=”address1″/>

<label>
*Address Line 2
<span>Enter your address</span>
</label>
<input type=”text” name=”address2″ id=”address2″/>

<label>
*Postcode
<span>Please enter your full postcode(no spaces)</span>
</label>
<input type=”text” name=”postcode” id=”postcode”/>

<label>
*Your comments & enquiries
</label>
<TEXTAREA NAME=”comments” COLS=60 ROWS=7></TEXTAREA>

<input type=”submit” name=”submitdetails” onClick=”checkname()” value=”Submit”/>

</form>

<!–END FORM CONTAINER–>
</div>

<!–END CONTAINER–>
</div>

</body>
</html>

The Javascript

// JavaScript Document

//Principles of Scripting – Jason Bonotan – Form Validation

//The function ‘validate_form’ will ensure that the user has filled out all the required fields within the contact form

function validate_contact_form ( )
{

valid = true;

if ( document.contactform.first_name.value == “” )
{
alert ( “Please fill in the ‘First Name’ field to continue.” );
valid = false;
}

if ( document.contactform.lastname.value == “” )
{
alert ( “Please fill in the ‘Last Name’ field to continue.” );
valid = false;
}

if ( document.contactform.email.value == “” )
{
alert ( “Please enter your e-mail address to continue.” );
valid = false;
}

//Make sure that the user has entered a valid e-mail into the contact form, if not the alert box will tell the user to enter a valid e-mail address.
var email=document.contactform.email.value;
if (email.indexOf(‘ ‘)==-1
&& 0<email.indexOf(‘@’)
&& email.indexOf(‘@’)+1 < email.length
) return true;
else alert (‘Invalid E-mail Address, please make sure you use @ and . symbols.’)

if ( document.contactform.confirmemail.value == “” )
{
alert ( “You have not confirmed your e-mail address, please confirm your e-mail to continue.” );
valid = false;
}

//Make sure that the user has entered a valid CONFIRMATION e-mail into the contact form, if not the alert box will tell the user to enter a valid e-mail address.
var email=document.contactform.confirmemail.value;
if (email.indexOf(‘ ‘)==-1
&& 0<email.indexOf(‘@’)
&& email.indexOf(‘@’)+1 < email.length
) return true;
else alert (‘Invalid Confirmation E-mail Address, please make sure you use @ and . symbols.’)

if ( document.contactform.address1.value == “” )
{
alert ( “Please fill in address line 1.” );
valid = false;
}

if ( document.contactform.address2.value == “” )
{
alert ( “Please fill in address line 2.” );
valid = false;
}

if ( document.contactform.comments.value == “” )
{
alert ( “Please complete the comments & enquiries section.” );
valid = false;
}

if ( document.contactform.postcode.value == “” )
{
alert ( “Please enter your postcode.” );
valid = false;
}

//User must enter at least 4 letters/numbers in the postcode field, e.g. WC1H
if (document.contactform.postcode.value.length < 4)
{

alert(“Please enter at least 4 characters in the postcode field.”);
contactform.postcode.focus();
return (false);

}

}

//–>

Thats all there is! Try the demonstration i posted at the beginning of the tutorial, don’t fill out any of the fields and you should be able to see how form validation works.

E.g: The image below shows us what happens when a user has incorrectly filled out the e-mail field:

A more detailed explanation of this tutorial will arrive in the following days, its just that I am busy with other commitments at the moment. Any questions feel free to contact me via e-mail at jason.fbonotan@gmail.com or leave a comment below I will get back to you ASAP.

Welcome to part 2 of the dark navigation series. In this article I will show you how to convert a sprite image from Photoshop into a fully working navigation bar without having to use the traditional image slicing method.

A FULLY FUNCTIONAL DEMONSTRATION OF WHAT WE WILL BE DOING TODAY CAN BE FOUND HERE

ps – Thank you for the comments

What is a sprite navigation?
A sprite navigation simply uses one whole image which accommodates all the buttons of a navigational bar. For example if you are developing a navigation bar using the traditional image slicing way you will have to slice and save a number of images in order for your navigation to work. The sprite method makes things easier as all you need is two image files (the PSD which you will then convert to jpeg or png). Another advantage of the sprite method is that your server will only have to load 1 image in order for your navigation bar to be accessible. Examples of websites using the sprite method:

Apple
WWE
Yahoo

Does this mean I have to ditch the traditional image slicing method?
In my opinion, no. I prefer to use both methods from time to time as a variety. In fact many websites still use the image slicing method such as Styled-Menus.com, a popular website which provides excellent high quality navigation bars.

So to sum up, alternate between the two methods. Its good to have variety!

What you will need in this tutorial:
Photoshop CS3 or Photoshop CS4 – If you don’t have it don’t worry, you can download a free 30 day trial version of Photoshop CS4 from adobe.com.

HTML/CSS text editor – A 30 day trial of Dreamweaver CS4 can also be downloaded from Adobe.com Other good alternatives are:

TextEdit – Pre installed on Mac computers/notebooks
Notepad ++ – Free download Here

The pre-made Photoshop (PSD) file which can be downloaded Here. Please note if you have downloaded the PSD from Part 1 you will have to download this file as I have made some modifications.

Getting Started
Its important to be prepared, so open up your preferred HTML/CSS text editor and type or paste the following code in. If you are a beginner I advise you to type the code as this helps you in getting used to hand coding which will be helpful in the future.

Create a new folder and name it ‘SpriteNavigation’. Save the code above as index.html (File>Save As).

Create a new document, if you are using Dreamweaver simply click on create CSS on the new file wizard. Copy the code below:

<!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″ />
<link  rel=”stylesheet” href=”stylenav.css” type=”text/css” media=”screen”/>
<title>Sprite Navigation – Designed and coded by Jason Bonotan</title>
</head>

<body id=”home1″>

<!–BEGIN NAVIGATION BAR–>
<div id=”Navbar”>
<ul id=”Nav”>
<li id=”home”><a href=”index.html”>Home</a></li>
<li id=”about”><a href=”about.html”>About</a></li>
<li id=”team”><a href=”team.html”>Team</a></li>
<li id=”services”><a href=”services.html”>Services</a></li>
<li id=”media”><a href=”media.html”>Media</a></li>
<li id=”contact”><a href=”contact.html”>Contact Us</a></li>
<li id=”twitter”><a href=”#”>Twitter</a></li>
</ul>

<p>Fully working navigation bar using the sprite method, 1 image XHTML and CSS. Validated using the W3C validator and Tested on Firefoex, IE7 and Safari. To see more of my work and tutorials as well as source files and coding visit my <a href =”http://jasonfb89.wordpress.com/”>Online blog</a></p>

<p>Any questions feel free to get in touch with me at jason.fbonotan@gmail.com</p>

<!–END NAVIGATION BAR–>
</div>

</body>
</html>

Once you have the code copied into your text editor save it as ‘index.html’. After that make a new folder and name it ‘Sprite Navigation’. Place the index.html file into the folder. You know have your main index file created, this file will contain your navigation. You can preview the web page by right clicking and opening it with a web browser of your choice, I recommend Firefox or Safari.

Next we will make our CSS file, the CSS file is vital as it contains all the styles of the navigation bar. Basically, the CSS file will determine how your website will look.

Copy the following code below:

@charset “UTF-8″;
/* CSS Document */

body {background:#1f1f1f; font-family: Arial, Verdana; font-size: 13px; color:#313131;}
p {margin:10px;}

/* Navbar Settings */
#Navbar { width:700px; height:150px; margin:25px;margin-left:auto;margin-right:auto;background-color:#F2F2F2;}
#Navbar #Nav { width:700px; height:40px; margin:0; padding:0; background:url(dark-nav-sprite.png) 0 0 no-repeat;}
#Navbar #Nav li { display:inline; }
#Navbar #Nav li a { float:left; outline:none; width:110px; height:0; padding-top:40px; overflow:hidden; }
#Navbar #Nav li a { background-image:url(dark-nav-sprite.png); background-repeat: no-repeat; }

/* Link Properties */
#Navbar #Nav li#home     a { background-position: 0 0;}
#Navbar #Nav li#about    a { background-position: -110px 0; }
#Navbar #Nav li#team     a { background-position: -220px 0; }
#Navbar #Nav li#services a { background-position: -330px 0; }
#Navbar #Nav li#media    a { background-position: -440px 0; }
#Navbar #Nav li#contact  a { background-position: -550px 0; }
#Navbar #Nav li#twitter  a { background-position: -660px 0; width:40px; }

/* Hover Properties */
#Navbar #Nav li#home     a:hover { background-position: -0px -40px; }
#Navbar #Nav li#about    a:hover { background-position: -110px -40px; }
#Navbar #Nav li#team     a:hover { background-position: -220px -40px; }
#Navbar #Nav li#services a:hover { background-position: -330px -40px; }
#Navbar #Nav li#media    a:hover { background-position: -440px -40px; }
#Navbar #Nav li#contact   a:hover { background-position: -550px -40px; }
#Navbar #Nav li#twitter   a:hover { background-position: -660px -40px; }

/* Current State Properties */
body#home       #Nav li#home     a { background-position: -0px -80px; }
body#about      #Nav li#about    a { background-position: -110px -80px; }
body#team       #Nav li#team     a { background-position: -220px -80px; }
body#services   #Nav li#services a { background-position: -330px -80px; }
body#media      #Nav li#media    a { background-position: -440px -80px; }
body#contactus  #Nav li#contact  a { background-position: -550px -80px; }
body#twitter    #Nav li#twitter  a { background-position: -660px -80px; }

Save the CSS file as ‘stylenav.css’ into the Sprite Navigation folder. Open up your index.html file with your browser and you should end up with the following page:

And there you have it, a fully functional navigation bar using CSS sprites.

Just one more step – Validation:

What is validation?

Validation is simply a method used to ensure that your web pages are free of errors. How do you validate? simply google W3C validator and follow the instructions from there.

After running the W3C validator with ‘index.html’ we can see that our web page is free from errors:

Thats all for now, I hope you enjoyed this tutorial. Try and set yourself a challenge/excercise by creating your own web page and linking it with the navigation bar. For example I’ve already done the index.html / home page for you. Try and make an about page (about.html) and code it to make it work with the navigation bar.

If you have any questions or problems please contact me at jason.fbonotan@gmail.com with “TUTORIAL” on the subject header.

So I was going through some previous Photoshop designs I’ve done in the past few weeks and I found this lying around.

I designed a quick website header with a navigation bar as well as having a search bar with a number of icons e.g. Twitter. Gaspari Nutrition is a leading sports supplement company based in USA although their products are popular around the world.

I decided to choose a real business instead of something made up, next month I’ll be designing a random website template based on this project.

Click on the image below for a full size view

A simple dark navigation bar i designed in Photoshop CS4. For Part 2 I will be converting this design into a fully working navigation bar where users can click on a link and enjoy some simple interactive features such as a hover effect. The navigation bar will be coded via HTML and CSS.

Click on image above to see full size

If you want to see how the navigation bar was designed or wish to make any of your own modifications feel free to download the PSD file Here

Depending on how much time I have there is a possibility that I may add a Part 3-Using JQuery to enhance the navigation effects. But for now keep an eye for part two which should be hitting your screens soon!

Source : jasonfb89[dot]wordpress[dot]com

Read More

Great tutorial on installing LAMP on Linux (Ubuntu)

Great tutorial on installing LAMP (Apache/PHP/MySQL) and setting up your first virtual host / site:

https://help.ubuntu.com/community/ApacheMySQLPHP

Source : wildertweedale[dot]com

Read More

Document Object Model – JavaScript Basics Tutorial 3

The third video in our JavaScript Basics Tutorial series. In this video I’ll be discussing the document object model, or DOM, and giving examples of how it can be used. I’ll also be trying to solidify syntax and variable concepts we discussed in the previous video.

Source : scriptnuke[dot]com

Read More

WordPress Website Tutorial

With our FREE WordPress Website tutorial and HTML tutorials, you can learn how to setup a website or a blog the quick and easy way! We present the tutorial in a step-by-step easy to understand language. You can either follow the sequence laid out on this page or select the tutorials that interests you. We’re the best WordPress step by step tutorial you can find.

Learn only the basic building blocks of HTML to create a web page. After this learn how to register a domain name and set up a web host using real life examples! Learn and use WordPress. Combine your WordPress knowledge with your basic HTML knowledge to create a professional looking website.

Or just use WordPress by itself by going to our WordPress website tutorial. Make your own website and have it running in just a matter of time! If you are still searching for a web hosting service, find out why we love our web hosting service.

HTML Tutorial

Register a Domain Name Tutorial

Setup a Web Host Tutorial

Setup a Website Tutorial

WordPress Tutorial – the fastest way to create a website!

Create A Mobile App For Your Website!

Get your tutorial via email. We will email to you the lessons at a pace that will not give you any information overload. There’s a separate tutorial for building websites and another tutorial for getting traffic to your site. Our newsletter also includes tips on how to do SEO for your website. Sign up now.

Get your tutorials now! * indicates required Email Address *

This is a NO SPAM website because we HATE SPAM too!

Are you looking for a WordPress video tutorial instead? Do you want to get it right the first time? Some of us learn better by reading and looking at illustrated examples while some are better at following video instructions. If you respond better to video tutorials then you can start creating your websites through the examples of this WordPress video tutorial.

Step 1: HTML Tutorial This tutorial shows you the most commonly used topics in HTML in order to understand some aspects of WordPress. Just learn the basics.		Step 4: Setup A Website Tutorial Put your HTML knowledge to into practice once you have acquired a domain name and web hosting. Create your first web page in just a few minutes.
Step 2: Register A Domain Name Tutorial Registering a domain name is as easy as 1-2-3. just follow the wizard. And be sure you have your unique domain name lists and credit card ready.		Step 5: WordPress Tutorial The darling of the blogging community. And WordPress has evolved from just blogs. now you can have a directory or even a shopping cart.
Step 3: Setup A Web Host Tutorial This is even much easier than you think. Just make sure that you get a web host that can have WordPress and has a good support reputation.		Step 6: Advance Topics Once you are comfortable with WordPress and HTML then you can stretch your website’s capabilities by these advance WordPress tutorials.

Why Learn WordPress?

The facts from Google Trends show that out of the top three CMS (content management system): WordPress, Joomla, and Drupal – WordPress is the most popular CMS. And it is showing no signs of waning. In fact the trend in the graph shows that it is growing strong as ever becuase it is easy to use and it’s free!

The themes and plugins are given for free which you can download from the WordPress website. And if you want to get more value then you can buy support services from businesses that offer premium plugins and themes. And this is the WordPress economy which makes the CMS popular and in demand world wide.

If you need help in setting up your blog or website click here for more details..

More WordPress Website Tutorials

Do you already have a WordPress website? Have we got some tutorials for the intermediate and advance user. Just check some of these WordPress website tutorials found below:

	Make Money Online. The best way to learn how to monetize your website is by learning from another person’s success. Mack Michaels system has proven to generate him $171,168.06 per month. Get his money making secrets here! Buy and sell domain names 3 Top web ideas that make money
	Add Games Tutorial. Make your website full of bells and whistles by adding games to your site! It’s so easy! You can either use WordPress plugins of you can do it the easier way. These two tutorials shows you how. Top 3 wordPress Game Plugins WordPress Games – Turn your Site To An Arcade
	What is a domain name worth? If you are planning to have a website then this tutorial is also a good place to start. If you already have a website then this tutorial might be able to give you some insights as to whether you should think of another domain name. Domain Name Tutorial
	Slideshow Tutorial for WordPress. Impress your online visitors by adding an Image Slideshow to your website! It’s also easy! And there are lots of plugins to choose from. Start with these two fantastic plugins. Add A Slideshow With Meteor Slide Frontpage Slideshow
	SEO Tutorial For WordPress. Take your website to the top of search engine results. Search Engine Optimization – or SEO – is the hottest buzz word in town. Learn how the pros optimize websites in order to get lots of traffic. Have a look at some of these SEO tutorial articles: SEO For WordPress – Domains SEO For WordPress – Hosting SEO For WordPress – Contents More Search Engine Optimization Tutorial WordPress All In One SEO Download SEO Tutorial
	CSS Tutorial for WordPress. Take more control of your WordPress website by understanding and using CSS or Cascading Style Sheet. HTML and CSS are the keys to create and modify WordPress themes. But their also useful in creating visually stunning contents and layouts for your web posts. All explained in this tutorial. CSS Tutorial
	WordPress Theme tutorial. If you have a creative flair and would like to create your won theme, then we have just started a tutorial on theme development. The tutorial is a step-by-step instruction on how to create your development environment, modify themes and finally create your own WordPress themes. Create your own WordPress environment How To Modify A WordPress Theme
	Advance WordPress website tutorial. If you really want to make your WordPress website fly then these mini-tutorials will get help you started in understanding and using PHP to create greater functionalities for your site. There are even tutorials on how to start creating your own themes. Advance WordPress Tutorial
	HTML To WordPress. There are hundreds, if not thousands, of websites that are still in HTML coding. Chances are it’s hard for the owner to maintain this kind of setup. Thus, convincing website owners to switch to a CMS based website – like WordPress – is a great opportunity. Start taking advantage of this opportunity by learning how to convert websites from HTML to WordPress. HTML To WordPress Tutorial
	Build Your Own Website Tutorial. Looking to build a WordPress website of your own but unsure what it will be all about? If you really want visitors to your site, then a tutorial website is one way to do it. Here are some ideas which may inspire you. List of website tutorials you can make
	Stop WordPress Spam Comments. Do not waste your time manually tagging comments that are spam. You can automate this process by following some of our suggestions. WordPress Spam Comments
	WordPress and Websites in 2012. Find out what’s the latest and greatest in WordPress and websites in general. If you think WordPress is cool, find out what makes it awesome this 2012! WordPress 2012 Website 2012
	HTML 2012′s New Features. It’s not yet the de facto standard in browsers but HTML 5 has already claimed some casualty. And that’s Flash Mobile being declared dead! See what makes HTML the tool for 2012. HTML 2012

Best Web Hosting For Your WordPress Website

Rank	Hosting Provider	Winning Features	Added Features
1	Hostgator    Worlds Leading Web Hosting	Space: Unlimited Traffic: Unlimited Price: $5.95	Free Domain Name, Choice of Data Centers, Top Technical Support
2	FatCow   Trusted Web Hosting	Space: Unlimited Traffic: Unlimited Price: $3.67	Host Unlimited Domains, FREE Website Builder, FREE Domain Included
3	Just host   Budget Web Hosting	Space: Unlimited Traffic: Unlimited Price: $4.95	Free Domain Name, Host Unlimited Domains, FREE Website Builder
4	GreenGeeks    Editor’s Choice Hosting	Space: Unlimited Traffic: Unlimited Price: $4.95	Free Domain For Life, Host Unlimited Domains, FREE Marketing Credits
5	InMotionHosting   Premium Reliable Hosting	Space: Unlimited Traffic: Unlimited Price: $5.95	FREE New Domain, 6 Domains Supported, Shared SSL

NEW! If you are ready to build your WordPress website feel free to visit our WordPress Themes section.

PLUS: Get your coupon code for this versatile WordPress Shopping Cart .

UPDATE: We just made an update to our HTML Tutorial section. Since the website draws a lot of visitors with different plans for WordPress, we’ved decided to extend the tutorial to include topics that will help those who are interested to plain blogging, customize themes, develop plugins and create their own themes. The new HTML tutorial prepares them for that.

COMING SOON: Look out for our WordPress website tutorials on how to come up with the best web hosting for your website. We want this site to be the place where you can go in order to learn how to plan, build and grow the best website for you and that’s why we are adding more tutorials on related topics.

Source : htmlpress[dot]net

Read More

Click Event – Minesweeper JavaScript & Canvas Game Development Tutorial 3

The third video in our Minesweeper JavaScript & Canvas Game Development Tutorial series. In this video we create a click event so that we can eventually handle the event. This video involved loops and the math floor function.
Video Rating: 5 / 5

A video tutorial of the Polychart.js javascript charting library. See www.polychart.com for more details.

Source : scriptnuke[dot]com

Read More

Great tutorial on installing LAMP on Linux (Ubuntu)

Great tutorial on installing LAMP (Apache/PHP/MySQL) and setting up your first virtual host / site:

https://help.ubuntu.com/community/ApacheMySQLPHP

Source : wildertweedale[dot]com

Read More