Nag'S Tutorial: April 2013

Friday, April 19, 2013

Navigation menu to show current page link as active - jquery

Hi, now am going to share a small article here, that is how to show current page link as active in navigation menu using JQuery.
First we need to include JQuery library into the page.

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

before that we need to maintain the left menu in separate page and include it the required pages.
assume take a left menu page leftmenu.php

<div id="left_menu_div">
<ul>
<li id="menuitem1" title="menu item 1"><a href="http://localhost/activemenu/page1.php">Page One</a></li>
<li id="menuitem2" title="menu item 2"><a href="http://localhost/activemenu/page2.php">Page Two</a></li>
<li id="menuitem3" title="menu item 3"><a href="http://localhost/activemenu/page3.php">Page Three</a></li>
<li id="menuitem4" title="menu item 4"><a href="http://localhost/activemenu/page4.php">Page Four</a></li>
</ul>
</div>

then add your css in the page

<style type="text/css">
#left_menu_div ul
{
 list-style-type:none;
 font-size:11px;
 line-height:23px;
 border:0px solid #ccc;
}

#left_menu_div ul li {
 margin-bottom:5px;
 outline: 0;
 padding: 3px 3px 3px 6px;
 display: block;
 font-weight: bold;
 border: 1px solid #1c252b;
 border-left:5px solid #ee6e28;
 border-radius: 4px;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
 -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
 -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
 background:#2a69bf;
 width:180px;
 color:white;
}
#left_menu_div ul li a{
 text-decoration:none;
 font-size:14px;
 color:white;
}

.active {
    background: #0186ba;
 background: -moz-linear-gradient(#04acec,  #0186ba); 
 background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
 background: -webkit-linear-gradient(#04acec,  #0186ba);
 background: -o-linear-gradient(#04acec,  #0186ba);
 background: -ms-linear-gradient(#04acec,  #0186ba);
 background: linear-gradient(#04acec,  #0186ba);
 color:red;
 border-radius:0px 3px 3px 0px;
 padding: 3px 0px 3px 5px; 
 margin:-4px -4px -4px -7px;
 width:180px;
}
</style>

and finally include this jquery code in the leftmenu page

<script type="text/javascript">
$(document).ready(function() {
  $currenturl = window.location.href;
  $("#left_menu_div ul li a").each(function() {
   $uurl = $(this).attr('href');
   if($(this).attr('href') == $currenturl){
    $(this).addClass('active');
    }
  });
});
</script>

its over... now you can see the active page link in different than all links.

Thank you...

Monday, April 1, 2013

Find the place name using latitude and longitude in PHP with google geocoder

We can find the place name using google geocoder by giving the Latitude and Longitude.

For example we want to get the place name of the latitude: '17.434545' and longitude: '82.124575' we need to pass this values to the google api to get the place details.

Following code explains how to work with that.


function getPlaceName($latitude, $longitude)
{
   //This below statement is used to send the data to google maps api and get the place
 name in different formats. we need to convert it as required. 
   $geocode=file_get_contents('http://maps.googleapis.com/maps/api/geocode/json?latlng='
                                         .$latitude.','.$longitude.'&sensor=false');

   
   $output= json_decode($geocode);

   //Here "formatted_address" is used to display the address in a user friendly format.
   echo $output->results[0]->formatted_address;
}

We can use this function in PHP. when we execute the above method the following output will be displayed.

call the function as
<?php getPlaceName(17.434545, 82.124575); ?>

Output : Andhra Pradesh 533436, India

Thank you.

Submit Form data using JQuery

Using $.post() method we can post the data to the server and as per the user needs can receive the response from the server.

$.post() method takes 4 parameters.
1. URL : This is the url of a page where we want to send the data to server
2. FormData : This FormData contains all fields data of the form to post
3. Function : This function is used to execute after successful submission of form data, we can receive the response from the server also using this function by taking a parameter.
4. JSON : This parameter is optional to Post method. If we want to receive the JSON encoded response to the Jquery then we need to enable this parameter as 'json', other wise ignore it.

For example take a form like below : (Save this file as textData.php)

<html>
<head>
<title>Test Post</title>
<script type="text/javascript">
//Below JQuery function is used to execute the code when page loads, with out calling any 
functions.
$(document).ready(function() {

    //This is executed when the user click on submit button, here form id is 'myForm'.
    $("#myForm").submit(function() { 

       //This statement will take the url/page name which is defined in the form of action 
       //   attribute. or we can directly give the url/page name here.
        var url = $(this).attr("action"); 

        //This statement is used to collect the form data which is given by user and create 
        //   as a string. example: it will generate as "username=somevalue&password=somevalue".
        var dataString = $(this).serialize();

        //This statement is the post method it will take 4 parameters the first 
//parameter is to where the data need to send, and the second parameter contains the 
//data of form, and the third parameter is used to execute when the JQuery successfully 
//submitted the formdata and receives the response. and the fourth parameter is optional 
//if we want to receive the json data we can use it otherwise ignore it.
        $.post(url, dataString, function(o) { alert(o.message); },'json'); 

        return false;
    });
});
</script>

<form name="myForm" id="myForm" action="serverPage.php" method="post">
User Name : <input type="text" name="username">
Password : <input type="password" name="password">
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>

In the above statement function(o) means after successful submission of the form data the server page can send return data to JQuery in that case this parameter will take it. Initially this parameter is an array. using the array index value we can access the data of the return parameter.

For example: We are taking the parameter name as "o". In this example am sending a $response array to JQuery back after getting the data to server. It contains a "message" value. To use this message in JQuery we need to write like o.message in function.

When user fill the form data and click on submit it will send the data to "serverPage.php" using JQuery Post method.
serverPage.php:

if(isset($_POST['submit']))
{
  $data = array();
  $response = array();

  //Here verifying the data is given or not by the user, we can write this for required fields
  if(isset($_POST['username']) && isset($_POST['password'])) 
  { 
    $data['username'] = $_POST['username'];
    data['password'] = $_POST['password'];
    //Here we can perform any Database operations using this parameters and send 
    // the response as user needs
    $response['message'] = "Data received successfully";
    echo json_encode($response);
  }
  else
  {
    //This will execute if any required fields are not filled by the user, 
    // write any statements here in failed cases
    $response['message'] = "Data not received. Try again!";
    echo json_encode($response);
  }
}

After submitting the form JQuery will show a alert message. if the username and password values is given in the form then it will show "Data received successfully" if any one data is not given by user it will show alert as "Data not received". Thank you.