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

Step By Step Guide On How to Create an Ecommerce Site

There are many ways to make money online. You can easily gain recognition from your target audience by having your own website which you can manage by yourself. However, starting up an ecommerce website can be very difficult. It needs careful planning and the right business model to take you to success.

Find Your Niche

The first thing you need to do is to know your niche. Once you learn everything about it, you can be the master. Know the ins and outs of the products and services you are selling. Learn the supply and demand trend and formulate strategies on how your business will stand out from the rest.

Find a Marketplace

You can always go for the free ones but it would be the best to have your own domain and hosting service. Compare the web hosting offers and see which one will give you the best features and will make things a lot easier for you. Choose the one with site builder tools, ecommerce website templates, shopping cart and payment solutions feature. You must also consider the customer support relevance as it should be able to attend your needs whenever you encounter a problem.

Hire a Web Design Company

Though things would be better off personalized, you can still do such by hiring a reputable web design company. The web design company will guide you through the entire process of putting up your website. Just make sure that you choose a web design company that will be able to cater to all your needs. This is not limited to a great web design but also includes social media integration features and search engine optimization. Other issues such as security and privacy features as well as the major needs of an ecommerce website which are shopping cart (and easy navigation) and payment redirection services also rank highly.

It is all up to you on how to build your website. You can always meet with the team to let them know about your plans. Talk about the theme, your design, your approach to the market and how you plan on directing traffic to the website.  Discuss about strategies on making your website as appealing as possible to the market of your choice. Talk about how long details and provided information would be, how pictures should be posted and strategy in placing pictures and product details at once.

Test Your Website

Lastly, look at the finished product. You must be satisfied about the outcome of every piece of detail in the website. You should know your market and as a business owner, you must have the foresight to predict whether elements of your website will not be good for your prospective clients.

Mike writes about ecommerce web designers UK and other companies. He provides reviews that would be helpful for those who are in need of web design services.

Source : tutorialspalace[dot]com

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

About I365 Design About I365 Design How To Create a File With PHP And Write Content To It PHP API Development: Dreaming Of Your Own API? Make It Possible Today! Appending data to a MySQL database field that already has data in it CSS Triangle Save your website bandwidth with PHProxy and ip2nation

About I365 Design.

Website Development in ahmedabad, php expert in ahmedabad, software development in ahmedabad, web development in ahmedabad, domain and hosting in ahmedabad

“You dream it… We blueprint it!”

Advancement, creativeness, excellent, promptness and sufficient are the main mantras of I365 Design and these are shown in our performance.

I365 Design provides wide range of digital solutions that include web page styles, website development, E-commerce Development, mobile development, custom web development, social development, graphic designing, animation development that allow the development of a natural and smooth on the internet experience. Company Based in Gujarat, India & Nairobi, Kenya. I365 design is a Web Development Company worldwide recommended for its professional approach and excellent of performance.

We at I365 Design ensure a perfect combination of innovative perspective, efficient specialized knowledge and strong Objective of Success while creating tailor-made market alternatives for our customers.

It requires an individual only for a few moments to gauge the geniality of a website! And 8 out of 10 folks assess the reliability of a web page depending on its design!

In easier conditions, it is important that your web page performs as hard as you do, for your business. An excellent style improves the transformation by huge margin and provides a user-friendly encounter that obliges the guest to become client. Excellent web page is just like your smart Creativity. It forms your Identity with your clients, improves your product and cultivates your main objective.

What We Do

• Website Design

• Creative Web Design

• Web Design Studio

• Flash Website Design

• Online Video Sites

• Multilingual Websites

• Web Application Development

• Social Network Systems

• Enterprise Application Development

• Microsoft Sharepoint Server Consulting

• Biz Talk Server Development

• Customized Web Applications

• Dashboards

• Business Intelligence

• CMS

• E-Learning Solutions

• Software Development

• Software as a Service – Saas

• Flash Game Development

• CRM

• ERP

• Ecommerce Web Design

• Ecommerce Web Development

• Ecommerce Shopping Cart

• Magento Development

• Secure Online Shopping

• Multilingual Ecommerce

• Multi-Currency Ecommerce

• Multiple Payment Gateways

• OSCommerce

• Mobile Application & Website

• Iphone Application Development

• Ipad Application Development

• Android Application Development

• Windows Mobile Application Development

• QR (Quick Response Code Reader)

• Customized Sales Application

• Social Commerce

• Graphic Design

• Logo Design

• Banners

• Print Design

• Brochure Design

• Newsletters

• Corporate Identity

• Strategic Design

• Brand Building

• Customized Software

23.039568 72.566004

How To Create a File With PHP And Write Content To It

One of my tasks for a project was to create an XML file with simple XML fields to be able to index content in to a Solr Search Core.

So today I will teach you how to create an file with php and write content to it.

Lets get started.

Step 1

Write a function / method that will create the file and write content to it.

function my_file_writer($filename){

// Code goes here

}

Step 2

In this step I want to grab content from my mysql database tables.

function my_file_writer($filename){

// connect to db.

  echo "connecting...

  ";

$con = mysql_connect( "localhost" , "username" , "password" );

  if (! $con )

  {

  die ( 'Could not connect: ' . mysql_error());

  }

mysql_select_db( "database_name" , $con ) or die ( 'Could not connect: ' . mysql_error());

echo "Connected

  ";

// select  latest articles.

  echo "Selecting data...

  ";

$result = mysql_query( "SELECT id, title, content FROM table" ) or die ( 'Could not select data: ' . mysql_error());

echo "Selected

  ";

}

Step 3

Here we are going to add a while loop to grab the mysql data we selected and put it into the right format for writing it to our file.

function my_file_writer($filename){

// connect to db.

  echo "connecting...

  ";

$con = mysql_connect( "localhost" , "username" , "password" );

  if (! $con )

  {

  die ( 'Could not connect: ' . mysql_error());

  }

mysql_select_db( "database_name" , $con ) or die ( 'Could not connect: ' . mysql_error());

echo "Connected

  ";

// select  latest articles.

  echo "Selecting data...

  ";

$result = mysql_query( "SELECT id, title, content FROM table" ) or die ( 'Could not select data: ' . mysql_error());

echo "Selected" ;

$stringData = "" ; // we put the first part of the $stringData variable outside the loop

  while ( $row = mysql_fetch_array( $result ))

  {

// set variables

  $page_id = $row [ 'id' ];

  $page_url = $row [ 'url' ];

  $pagetitle = $row [ 'title' ];

$bodytext = $row [ 'content' ];

  $bodytext = strip_tags ( $bodytext ); // Here we strip all html tags from the body text

$stringData .= "

  $page_id

http: //your-url-here.com/pagename

  $pagetitle

  $bodytext

\n\n";

} // end of while loop

$stringData .= "" ; // we put the final part of the $stringData variable at the end outside of the while loop

}

?>

Step 4

In this step we start creating and writing to the file.

$fh = fopen($filename, 'w'); // we create the file, notice the 'w'. This is to be able to write to the file once.

  fwrite( $fh , $stringData ); // here we write the data to the file.

  echo "Writing file...

  ";

echo "Closing file...

  ";

  fclose( $fh ); //here we close our file

echo 'Finished!' ;

Step 5

all thats left to do is to close the mysql connection.

mysql_close($con); // close the connection

Step 6

Now you can create your file and run the script.

my_file_writer("Your_File_Name.xml");

Conclusion

As you can see it’s really easy to create a file and add any content you want to it. You should be able to see a file with the name you gave it after you ran your script. Any suggestion is welcome.

23.039568 72.566004

PHP API Development: Dreaming Of Your Own API? Make It Possible Today!

I have often dreamed of creating an API for one of my sites but I’ve always set it aside as I thought it would be too much work to do. One day I just decided it’s time to do the research and get started with building my own API and it wasn’t as difficult as I thought.

So you are probably eager to start with this one? OK I’ll show you how!

First thing, you need to have a database in place with data. I’m not going to show you how to build a database with tables as it’s one of the basics you need to know. I’m sure most of you are past the basics.

The first part of the code

if($_GET['q'] == "all" && $_GET['type'] == 'json'){

//get a connection to mysql

$con = mysql_connect( "localhost" , "root" , "root" ) or die ( "could not connect" .mysql_error());

//select your database table

mysql_select_db( "android_maps" , $con ) or die ( "Could not select database" .mysql_error());

//get your results with a mysql query

$result = mysql_query( "SELECT gmaps.*, urls.* FROM gmaps, urls WHERE urls.idgmaps = gmaps.idgmaps" ) or die (mysql_error());

//run a while loop get your data.

while ( $place = mysql_fetch_array( $result , MYSQL_ASSOC)) {

$places [] = array ( 'location' => $place );

}

$output = json_encode( array ( 'map' => $places ));

echo $output ;

mysql_close( $con );

}

First off we select all data from our database. You can set search criteria for different results for example for getting particular users details from your social network, but in this example we select everything.

In the example above I select all data from my android maps app database for locations and places. We then do some JSON encoding to put the data in the correct format. All you need to do to use the output data is to grab it and use a JSON decode method

The output of the data in JSON format.

{“map”:[{"location":{"idgmaps":"15","lat":"-25.926813935317035","lon":"27.828453713378963","address":"cradle of human kind","title":"Cradle of Humankind","description":"The 47 000-hectare Cradle of Humankind is blessed with a greater wealth of early human history than almost any other place on earth. \r\n\r\nThe Cradle contains more than twelve major fossil sites and dozens of minor ones. The Maropeng Visitors Centre at the Cradle of Humankind (near Johannesburg) was opened in 2005. The tumular building is designed to look like an ancient burial mound, though from the rear it looks like a modern structure. \r\n\r\nInside, a journey through the evolution of life is presented, and the architecture is symbolic of this journey. Maropeng means returning to the place of origin in Setswana, the local indigenous language. It is a reminder that the ancestors of all humans, wherever they live today, originally came from Africa.","tags":"Maropeng, Cradle of Human Kind, Early Humans","idurls":"17","url_name":"Early humans","url":"http:\/\/newhistory.co.za\/part-1-chapter-1-early-humans\/"}}

The second part of the code

In this part we switch the data format to output XML.

elseif($_GET['q'] == "all" && $_GET['type'] == 'xml'){

//get a connection to mysql

$con = mysql_connect( "localhost" , "root" , "root" ) or die ( "could not connect" .mysql_error());

//select your database table

mysql_select_db( "android_maps" , $con ) or die ( "Could not select database" .mysql_error());

//get your results with a mysql query

$result = mysql_query( "SELECT gmaps.*, urls.* FROM gmaps, urls WHERE urls.idgmaps = gmaps.idgmaps" ) or die (mysql_error());

//run a while loop get your data.

while ( $location = mysql_fetch_array( $result )) {

$output = '<?xml version="1.0" encoding="utf-8"?>' ;

$output .= '<data>' ;

$output .= "<lat>" . $location [ 'lat' ]. "</lat>" ;

$output .= "<long>." . $location [ 'lon' ]. "</long>" ;

$output .= "<description>." . $location [ 'description' ]. "</description>" ;

$output .= '</data>' ;

print $output ;

}

mysql_close( $con );

} else {

echo "<h1>No results to show for you query</h1>" ;

}

The second par t of the code we switched over to XML output. The only big difference is the elseif and the XML tags I added in the while loop.

Here’s the complete code.

<?php

if ( $_GET [ 'q' ] == "all" && $_GET [ 'type' ] == 'json' ){

//get a connection to mysql

$con = mysql_connect( "localhost" , "root" , "root" ) or die ( "could not connect" .mysql_error());

//select your database table

mysql_select_db( "android_maps" , $con ) or die ( "Could not select database" .mysql_error());

//get your results with a mysql query

$result = mysql_query( "SELECT gmaps.*, urls.* FROM gmaps, urls WHERE urls.idgmaps = gmaps.idgmaps" ) or die (mysql_error());

//run a while loop get your data.

while ( $place = mysql_fetch_array( $result , MYSQL_ASSOC)) {

$places [] = array ( 'location' => $place );

}

$output = json_encode( array ( 'map' => $places ));

echo $output ;

mysql_close( $con );

} elseif ( $_GET [ 'q' ] == "all" && $_GET [ 'type' ] == 'xml' ){

//get a connection to mysql

$con = mysql_connect( "localhost" , "root" , "root" ) or die ( "could not connect" .mysql_error());

//select your database table

mysql_select_db( "android_maps" , $con ) or die ( "Could not select database" .mysql_error());

//get your results with a mysql query

$result2 = mysql_query( "SELECT gmaps.*, urls.* FROM gmaps, urls WHERE urls.idgmaps = gmaps.idgmaps" ) or die (mysql_error());

//run a while loop get your data.

while ( $location = mysql_fetch_array( $result2 )) {

$output = '<?xml version="1.0" encoding="utf-8"?>' ;

$output .= '<data>' ;

$output .= "<lat>" . $location [ 'lat' ]. "</lat>" ;

$output .= "<long>." . $location [ 'lon' ]. "</long>" ;

$output .= "<description>." . $location [ 'description' ]. "</description>" ;

$output .= '</data>' ;

echo $output ;

}

mysql_close( $con );

} else {

echo "<h1>No results to show for you query</h1>" ;

}

?>

Hope you enjoyed this tutorial. Please leave a comment, let me know what you think?

23.039568 72.566004

Appending data to a MySQL database field that already has data in it

Need to “add” data to a field that already contains data without erasing whats currently there. For example if the field contains HTML, I need to add additional HTML to the field. Is there a SQL call that will do this or do I need to call the data in that field, concatenate the new data to the existing data, and reload it into the database?

Yes you can use the following query to append data to database field.

UPDATE Table SET Field=CONCAT(Field,'your extra html');and you can also do it with specific where conditionUPDATE myTable SET html=concat(html,'<b>More HTML</b>') WHERE  

23.039568 72.566004

CSS Triangle

HTML

You can make them with a single div. It’s nice to have classes for each direction possibility.

<div class="arrow-up"></div><div class="arrow-down"></div><div class="arrow-left"></div><div class="arrow-right"></div>

CSS

The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. In an up arrow, for example, the bottom border is colored while the left and right are transparent, which forms the triangle.

.arrow-up {        width: 0;        height: 0;        border-left: 5px solid transparent;        border-right: 5px solid transparent;        border-bottom: 5px solid black;}.arrow-down {        width: 0;        height: 0;        border-left: 20px solid transparent;        border-right: 20px solid transparent;        border-top: 20px solid #f00;}.arrow-right {        width: 0;        height: 0;        border-top: 60px solid transparent;        border-bottom: 60px solid transparent;        border-left: 60px solid green;}.arrow-left {        width: 0;        height: 0;        border-top: 10px solid transparent;        border-bottom: 10px solid transparent;         border-right:10px solid blue;}

23.039568 72.566004

Save your website bandwidth with PHProxy and ip2nation

What is ip2nation?

There is currently numerous companies on the net charging for databases or files containing knowledge about where an IP is apportioned (as in which country). This knowledge is in fact obtainable free at ARIN, APNIC, RIPE etcetera. Though, those files are not in any way optimized for queries & are indeed very slow. This is where ip2nation.com comes in.

We utilitize these files to generate a MySQL database table with the appropriate indexes. We have also optimized the table & removed unneccesary information in order to make queries lightning speedy. In order to utilitize the table you may find help in the PHP examples under “Sample scripts”.

What is PHPProxy?

PHProxy is a web HTTP proxy programmed in PHP meant to bypass firewalls and access otherwise inaccessible resources (i.e. blocked sites). If the server this script is run on can access a resource, so are you able to!

With the proxy script PHProxy and the information IP location database from ip2nation it is simple to block visitors which are coming from other countries then your target group. In this tutorial you will learn how to add the necessary code to your PHProxy powered proxy web-site.

Step 1

Download ip2nation and import the sql file into your database (test).

Step 2

Download PHPProxy and add the following code to the index.php file

$DBHOST = 'localhost';
$DBUSER = 'user';
$DBPASS = 'password';
$DATABASE = 'test';
$my_countries = array('in', 'us');
$use_ip2nation = true; //true for blocking countries

Step 3

Find the following code in index.php

function proxify_css_url($url)
{
$url = trim($url);
$delim = strpos($url, ‘”‘) === 0 ? ‘”‘ : (strpos($url, “‘”) === 0 ? “‘” : ”);

return $delim . preg_replace(‘#([\(\),\s\'"\\\])#’, ‘\\$1′, complete_url(trim(preg_replace(‘#\\\(.)#’, ‘$1′, trim($url, $delim))))) . $delim;
}
Add the following code after that to check if the resulting country is in our list or not. if its in our list it will go ahead.

if ($use_ip2nation) {
$db = mysql_connect($DBHOST, $DBUSER, $DBPASS);
mysql_select_db($DATABASE);
$sql = "SELECT country FROM ip2nation WHERE ip < INET_ATON('".$_SERVER['REMOTE_ADDR']."') ORDER BY ip DESC LIMIT 0,1";
$res = mysql_query($sql);
$country = mysql_result($res, 0, 'country');
mysql_free_result($res);
if (!in_array($country, $my_countries)) {
show_report(array('which' => 'index', 'category' => 'error', 'group' => 'resource', 'type' => 'otherthan_in_us'));
}
}


Step 4

Add the following code in index.inc.php.

$show_web_form = true;

Find the following code index.inc.php (near line 83)

case ‘hotlinking’:
$message = ‘It appears that you are trying to access a resource through this proxy from a remote Website.<br />’
. ‘For security reasons, please use the form below to do so.’;
break;

Add the following code after that

case 'otherthan_in_us':
$message = 'Sorry this service is only for india and us.
Click topsite in the footer part.';
$show_web_form = false;
break;


Add the following code to allow user to view form or not before starting of <form> tag in index.inc.php

if ($show_web_form) {

and add this code after </form> tag to show alternate stuff to user.

} else {
// show custom content for blocked user to tell that they are blocked for the content
};


23.039568 72.566004

Source : mishilpatel[dot]wordpress[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