smartcoderszone – A Blog about Web Development Tutorials and Tips, PHP, Mysql, Javascript, CSS, Jquery, SEO, Twitter and Facebook Scripts

In the previous post of RoR, we have studied about what is ruby on rails. In

Ruby on Rails

this post we will see, how to install ruby on rails on localhost on windows machine.

Following are the steps required for ror installation -

1. Install Ruby & Gems

2. Install Rails

3. Install appropriate Database Engine

That’s it.

Lets see each installation in detail.

1.  Install Ruby: You need to download latest version of Ruby installer. For windows there is an RubyInstaller.exe file and for linux chm file is also available to download.

Click on the download Link -

Download

This will install Ruby under C:\ruby, and install RubyGems for you. The README at the end of the installation will show you all the versions of each piece that it installed.

Now you can check to see that c:\ruby\bin is in your PATH by typing “path” at a command prompt. This will ensure that you can run ruby.exe from anywhere (which you’ll need to run from your project root).

2. Install Rails: Rails installation is easy and simple. Rails provide gems that can be direct install from command prompt.

C:\>gem install rails

Rails installation takes some time. After few min you can see this message on your command prompt.

“Successfully installed rails-2.3.8″

This will install all the code, test code, ri documentation, and RDoc documentation for Rails.

3. Install Database Engine:

Rails is completely DB-agnostic, it supports SQLite and MySQL both. We’ll see how to install two of the more popular Database Engines: SQLite and MySQL.

SQLite is the default database type that Rails looks for.

Installation of  SQLite3 -

You need two files from the  SQLite download page:

1. SQLite Command Line Tool
2. SQLite DLL

Unzip them and put the three extracted files in your ruby\bin directory (usually at C:\ruby\bin). Now install the sqlite3-ruby gem:

C:\>gem install sqlite3-ruby -v 1.2.3

Installation of MySQL -

Download MySQL Community Server and install it. If you also do PHP programming, check out WAMP for an easy installation as well.

To use MySQL in Rails versions greater than 2.1, you’ll also need the MySQL adapter:

C:\> gem install mysql

Since mysql is not a default database setup in rails so we need to change in database.yml file.

Create First Application :
Its quite easy to setup. Type following in command prompt.

C:\> rails myappname

This will build a directory, in which it will build the entire blank Rails project skeleton. To see your fresh project in action, navigate to your project root and run script\server:

C:\> cd myappname
C:\> ruby script\server

Then, navigate to http://localhost:3000/ in your browser, and you should see the default Rails “Welcome Aboard” page.

Rails uses the SQLite3 adapter and creates the DB in the db directory. If you look at your database.yml file (in \config), you’ll see a database entry for your development, test, and production databases.

development:
 adapter: mysql
 encoding: utf8
 reconnect: false
 database: ruby
 pool: 5
 username: root
 password:
 host: localhost

Set to mysql if you are using mysql database.

This was the complete installation of ruby on rails on windows.  RoR is not difficult language, its tricky. Hope this tutorial steps help you in ror installation.

Cheers

Sometimes while writing continues posts in various categories we found that we do not have enough space for more categories. In that case we have an option of adding one more menu in our wordpress theme so that we can manage other categories but this would not be a good idea to add several menu on your wordpress theme. If your requirement needs more than one menu for different setup or for another requirement, you can refer to my previous post How to add multiple menu in wordpress.

Here we will learn how to implement multi-level menu in wordpress so that we can combine our several categories in one place. This results more space and all our content is managed.

Wordpress provides very simple and easy to implement plugin called – Multi-level Navigation Plugin. This plugin allow us to manage menu with lots of options including display format, number of item to display and their order.

Features

The plugin produces W3C valid XHTML and CSS. The options page allows you to choose from a range of options including:

* What content will be displayed in the menu
* Animation speed (how fast the dropdowns appear)
* Mouseover delay
* Hide delay
* Add a second menu
* Hover sensitivity
* Keyboard accessibility

Installation

1. Upload the complete multi-level-navigation-plugin folder to the /wp-content/plugins/ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Add following code in your header.php (where you want to display your menu).

<?php
if (function_exists('pixopoint_menu')) {pixopoint_menu();}
?>

4. Visit the “Multi-level Navigation” page in your WordPress options menu

For more information, help and support, you can visit pixopoint.

You can download plugin from here.

Download

Hope this multi-level menu tutorial help you to manage your blog categories easily.

Source : wordpress.org

Hi Guys

I found a wordpress plugin that allows to display your tags in 3d rotate flash. It is a wonderful plugin having configurable settings so that you can set height width of that plugin. You can also decide where you want to display this tag clouds. You can display it on page or post or on your sidebar.

Installation –
1. Make sure you’re running WordPress version 2.3 or better. It won’t work with older versions.
2. Download the zip file and extract the contents.
3. Upload the ‘wp-cumulus’ folder to your plugins directory (wp-content/plugins/).
4. Activate the plugin through the ‘plugins’ page in WP.
5. See ‘Options->WP Cumulus’ to adjust things like display size, etc…

In order to actually display the tag cloud, you have three options.

1. Create a page or post and type [ wp-cumulus ] (without space) anywhere in the content. This ‘tag’ will be replaced by the flash movie when viewing the page. See here for more info.
2. Add the following code anywhere in your theme to display the cloud.

<?php wp_cumulus_insert(); ?>

This can be used to add WP Cumulus to your sidebar, although it may not actually be wide enough in many cases to keep the tags readable.
3. The plugin adds a widget, so you can place it on your sidebar through ‘Appearance’->’Widgets’. Open the widget to access it’s own set of settings (background color, size, etc).

You can download this plugin from here.

Download

You will surely want to implement this beautiful flash tag cloud plugin.

Source : wordpress.org

Hi Guys,

Recently I need to implement multiple menu in wordpress. Wordpress provides great plugin “Wordpress Navigation List Plugin NAVT”. It has many features and interface for managing multiple menus like add multiple menus, add links to menu, add category to menu and add pages to menus directly.

You can add multiple menu to your site by copy paste following methods call.

<?php
// This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
    'primary' => __( 'Primary Navigation', 'twentyten' ),
) );

register_nav_menus( array(
	'footer' => __( 'Footer Navigation', 'twentyten' ),
) );
?>

register_nav_menus function for primary menu (default menu in wordpress), you can find in function.php file. You need to copy paste it for footer menu (for example).

Now you just need to call a simple function for footer menu in footer.php (or your desired location may be in header.php)

 <?php wp_nav_menu( array( 'container_class' => 'footer-menu', 'theme_location' => 'footer' ) ); ?>

Now go to appearance->menus for setting links under footer menu.

That’s It.

You can download Wordpress Navigation List Plugin NAVT plugin from here.

Download

Hope this tutorial help you.

Hello Friends,

Today I want to share very interesting topic about css3. CSS3 offers some newly added property of radius and shadow, which makes object very beautiful and attractive.

You can make object (div) to your desired shape and give it look like any photoshop designed with css3 property.

Start with radius property -

/*  mozilla   */
 -moz-border-radius:100px;
 /*  safari and crome  */
 -webkit-border-radius: 100px;
 /*  css3 opera browser   */
 border-radius: 100px;

All browsers having their own syntax for its implementations. Firefox uses prefix -moz in radius property. With this radius property we can make circle shape. It will turn all four corners ( top left, top right, bottom right, bottom left ) of div to make it circle of radius 100.

We can write radius property this type as well -

-moz-border-radius:30px 50px;

Here 30px represents top left and bottom right and 50px represents top right and bottom left.

We can further explore radius property in this way -

/*  mozilla   */

 -moz-border-radius-topleft: 30px;
 -moz-border-radius-topright: 30px;
 -moz-border-radius-bottomleft: 30px;
 -moz-border-radius-bottomright: 30px;

 /*  safari n crome  */

 -webkit-border-top-left-radius : 30px;
 -webkit-border-top-right-radius : 30px;
 -webkit-border-bottom-left-radius : 30px;
 -webkit-border-bottom-right-radius : 30px;

 /*  css3 opera browser   */

 border-top-left-radius : 30px;
 border-top-right-radius : 30px;
 border-bottom-right-radius : 30px;
 border-bottom-left-radius : 30px;

There is little difference in syntax of browsers for this property.  You can see in above example.

Following are some examples of radius property with explanation.

CSS3 radius property example

CSS3 radius property example

CSS3 radius property example

Now we will understand wonderful shadow property -

Shadow property can be inset or outset. It is outset by default if not mentioned.

-moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.9);

First parameter represents inset shadow. Second specify horizontal shadow. Third shows vertical shadow. Fourth represents shadow blur. Fifth display shadow color.

Example of other browser syntax

-moz-box-shadow: 5px 5px 5px #000;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;

Note that css3 used additional character in color “a”. This a stands for alpha property. This new feature allows us to specify an opacity value for a color. This one could make life for webdevelopers a lot easier.

You can simple put color also.

Following is example of shadow property  -

CSS3 Shadow Property Example

It is very simple and easy to use. Browser supporting css3 (Chrome 4+ or

Firefox 3.5+)  includes Firefox/Mozilla, Google Crome, Safari and Opera. IE8 and below still not supporting it.

You can see Demo of radius and shadow property here.

CSS3 Radius Demo

CSS3 Shadow Demo

You can download zip of all examples-

Download

Hope you will enjoy this new feature of css3. If you have any query regarding this let me know your feedback.

Ruby on Rails, often shortened to Rails or RoR, is an open source web application framework for the Ruby programming language.

What is Ruby?

Ruby is a pure object-oriented programming language with a super clean syntax that makes programming elegant and fun.

What is Rails?

Rails is an open source Ruby framework for developing database-backed web applications.  Rail’s guiding principles: less software and convention over configuration.

Less software means you write fewer lines of code to implement your application. Keeping your code small means faster development and fewer bugs, which makes your code easier to understand, maintain, and enhance. Very shortly, you will see how Rails cuts your code burden.

Convention over configuration means an end to verbose XML configuration files–there aren’t any in Rails! Instead of configuration files, a Rails application uses a few simple programming conventions that allow it to figure out everything through reflection and discovery. Your application code and your running database already contain everything that Rails needs to know!

Source: wikipedia, oreilly.

Friends, Today I am posting multiple image upload using jquery in a php form. It is a dynamic script that will upload image without refresh and stored temporarily in the database. It will finally set in database when we will submit our main form.

Here is the code for our form -

<table width="100%" align="center" border="0">
<form method="post" enctype="multipart/form-data">
<tr>
	<td width="25%">Title :</td>
	<td><input type="text" name="title" id="title" size="30" value=""/></td>
</tr>

<tr>
	<td valign="top">Item Avatar :</td><td valign="top">
	<div id="upload" ><span>Upload Image<span></div><span id="status"></span>
	<table><tr><td id="files"></td></tr></table>
	</td>
</tr>
<tr>
	<td colspan="2" align="center">
	<input type="submit" name="add_item" value="Submit" id="sub_button" />&nbsp;
       </td>
</tr>
</form>
</table>

We will use this simple jquery code for sending server side request to store our image as well as client side validation for valid image.

<script language="javascript" type="text/javascript">
$(function()
{
	var btnUpload=$('#upload');
	var status=$('#status');
	new AjaxUpload(btnUpload, {
	action: 'upload-file.php',
	name: 'uploadfile',
	onSubmit: function(file, ext)
	{
	 if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
     // extension is not allowed
	status.text('Only JPG, PNG or GIF files are allowed');
	return false;
	}status.text('Uploading...');
	},

	onComplete: function(file, response)
	{
		//On completion clear the status
		status.text('');
		//Add uploaded file to list
		var bb=response.substr(0,7)
		var idd=response.replace('success',' ');
		var idb =idd.replace(/^\s*|\s*$/g,'');
		if(bb==="success")
		{
			$('<span></span>').appendTo('#files').html('<img src="images/'+file+'" alt="" width="120" height="120" style="margin:5px;" />').addClass('success');
		}
		else
		{
			$('<span></span>').appendTo('#files').text(file).addClass('error');
		}
	}});
});

</script>

In upload-file.php, we simply write code to upload file using php function move_uploaded_file() using temp session variable for first time. After uploading no. of files, when we finally submit form data then we replace temp session with the main table id in database at the time of insert data to table.

You can download complete source code from here.

Download

Following are the script that calculate number of days between two dates. I used this script in my recent project work. I need to run a cron file to all members of the site that haven’t logged into site more than 7 days. I created this script for sending email if log in time of member having more than 7 days.

<?php
	$newupdated_at="2010-06-11";
	$current_date=date('Y-m-d');

	function dateDiff($dformat, $endDate, $beginDate)
	{
		$date_parts1=explode($dformat, $beginDate);
		$date_parts2=explode($dformat, $endDate);
		// put values in this function in  (M,D,Y) format
		$start_date=gregoriantojd($date_parts1[1], $date_parts1[2], $date_parts1[0]);
		$end_date=gregoriantojd($date_parts2[1], $date_parts2[2], $date_parts2[0]);
		if($end_date - $start_date<0)
		return -($end_date - $start_date);
		else
		return $end_date - $start_date;
	}

	$datediff=dateDiff("-", $current_date, $newupdated_at);
	echo $datediff;
?>

Notice that gregoriantojd function need parameters in m, d, y order. So when you put parts of date in this function then order of parts will be month,date and year.

Enjoy it

Hi Guys,

In the previous post we have learned that how to add background color of table row using jquery. Today I am posting jquery commands for adding border to any table row by using jquery simple statements.

To add border to your table row, we need to use jquery css property. One thing is noticeable is that when we want to add border around table row then we have to use content(td) function for applying border to each table data. This function is must and without it border property for table row won’t work.

$('#special_list').contents('td').css({'border': '1px solid #aaaaaa'});

Here #special_list is the id of the table row (
). Above command simply add border around whole table row.

Now if we want only top and bottom border, then we have to remove border of left and right side.

$('#special_list').contents('td').css({'border': '1px solid #aaaaaa', 'border-left': 'none', 'border-right': 'none'});

If you dont want any border around it then.

$('#special_list').contents('td').css({'border': 'none'});

You can specify which side border you want. Like this -

$('#special_list').contents('td').css({'border-left': '1px solid #aaaaaa'});

If you want border around any div then –

$('#special_list').css({'border-left': '1px solid #aaaaaa'});

Here #special_list is the id of that div.

We can change the background color of any div –

$('#special_list').css('background-color', '#cccccc');

Hope these jquery commands help you to solve your problem. More jquery stuff comming soon.

Hi Friends,

In my recent project work, I need to add background color on table row (even rows) on mouse over. I used jquery for this. Its very easy to do that. You need to call two java script function – one for adding background color onmouseover and second for returning back to original background color onmouseout.

It is php dynamic listing so you need to use variable $i for separating even and odd listing rows.

<table border='0' cellpadding='0' cellspacing='0'>
<?php
$i=0;
loop start here
?>

<tr id="special_list<?php echo $i;?>" onmouseover="javascript:insertback(<?php echo $i;?>);" onmouseout="javascript:removeback(<?php echo $i;?>);">
<td>Dynamic Listing Data</td>
</tr>

<?php
 ++$i;
loop ends here
?>
</table>

In above code we just call two java script functions onmouseover and onmouseout for changing background of table rows.

Following are the code of those two javascript functions. Its a jquery code that simply uses its property of adding css.

function insertback(id)
{
	if(id%2==0)
	{
		$('#special_list'+id).css('background-color', '#cccccc');
	}
}

function removeback(id)
{
	if(id%2==0)
	{
		$('#special_list'+id).css('background-color', '#FFFFFF');
	}
}

Jquery uses its property of adding css to element’s id. Hope this script help you to improve your listing display.

Enjoy it