Author Archives: mahesh chari

favico tutorial

Posted on by

How to Add fav icon to your web site

What is fav icon?

a favicon is really nothing more than a tiny png image with a .ico extension and sized to 16x 16 or 32 x 32.

How to create fav icon?

So, the first thing you need to do is to create the image that you want to use; whatever you use, don’t make it too complex because small detail tend to get lost when re sized to a tiny 16 by 16 pixels.Create a image that sized square model image.then you should re size to 16×16 px or 32x32px.here we can use photoshop , corel draw and gimp ..etc.before saving the image just add extension ico,instead of regular images gif,png,jpg.

Why should i give ico extension name?

Mostly modern browsers supports any format of image,but it must compatibly with older browsers also.you can give regular formats like favicon.gif,favicon.png,favicon.jpg also.

Where should i keep this icon on server?

Moslty browser search for favicon in root folder,so if you keep this icon on root directory like ,www ,public_html directory on server.
you can keep this icon not only root directory ,its your choice.if so you have to add small html code shwon below in header of each page of site. It works on your local server also.

1
2
3

  	<head>
	<link rel="shortcut icon" href="favicon.ico" >
	</head>

Adding GIF images as favicon

1
2
3
4

  	<head>
	<link rel="shortcut icon" href="favicon.ico" >
	<link rel="icon" href="animated_favicon.gif" type="image/gif" >
	</head>

in the above code we use two type of favicons . favicon.ico for old browsers don’t support gif images.
animated_favicon.gif is for modern browser supports.

hide javascript code from non javascript browser

Posted on by

hide JavaScript code from non-JavaScript browsers

Here we learn how to hide the javascript code from non javascript browsers , javascript disabled browsers and mobile browsers .Non javascript browsers renders the javascript code as generel text without exucuting the code. So we must aware how to hide the javascript from these browsers.

  

1
2
3
4
5

<script type="text/javascript">
<!--
alert("This alert box is hidden from non javascript browsers.!!");
//-->
</script>

check real url

Posted on by

Check given link is real working

We see the most online enquiry ,guest books,help ticket system asks for the web address of the guest ,mostly of them are optional.i think in some case it required to given web address or page link really exists or not.Here we learn how to find the given link or url is really exists or it fake.For this we use simple fsocketopen function. we make a simple function that given below.It only check HTTP links.not HTTPS,FTP protocal urls. Remember the link parameter must be a valid web url address.we can do it with CURL php extension functions.but in case if it not available it won’t work. so given function is core PHP function. 

1
2
3
4
5

<?php 
function isRealLink($link){
 return (boolean)@fsockopen($link, 80, $errno, $errstr, 30);
}
?>

codeigniter anchor

Posted on by

How to make a link using Codeigniter.

Here we learn how to use anchor method that is URL helper of Codeigniter.We already discussed in my previous post URL structure of Codeigniter. It creates a anchor tag in HTML view.

We can create anchor links in two ways.

  • by using anchor function available in URL helper of Codeigniter.
  • by using site_url function available in URL helper of Codeigniter.

Below examples shows how to make HTML link Using anchor function

anchor tag with two parameters,parameter 1 takes segments of the targe page,parameter 2 takes link text. 

1
2
3
4

<?php  
echo anchor('controller/method/parameter1', 'Link Text');
// <a href="http://example.com/index.php/controller/method/parameter1">Link Text</a>
?>

anchor tag with additional attributes like title 

1
2
3

<?php  
echo anchor('controller/method/parameter1', 'Link  with Title attribute',array('title'=>'Link Title'));// <a href="http://example.com/index.php/controller/method/parameter1" title="Link Title">Link  with Title attribute</a>
?>

anchor tag with javascript attribute. 

1
2
3
4
5

<?php  
echo anchor('controller/method/parameter1', 'Link  with Title and javascript',array('title'=>'Link Title','onclick'=>"alert('hi');return false;"));
//<a href="http://example.com/index.php/controller/method/parameter1" title="Link Title" onclick="alert('hi');return false;">Link  with Title and javascript</a>
 
?>

remember anchor tag won’t create internel page link.

Below examples show how to make HTML link using site_url function

We can use site_url output as href attribute and can make internel links also. 

1
2

<p><a href="<?php echo site_url('controller/method/parameter1'); ?>">with site_url function </a></p>
<p><a href="<?php echo site_url('controller/method/parameter1'); ?>" title="link title">with site_url function and title attribute </a></p>

Test it in your local system

To test these functions ,just download the example files and paste into your codeigniter root directory. run the example.

if you have any queries you can mail me.

Preview

codeigniter_anchor_tag

codeigniter url helper 1

Posted on by

Here we discuss about the codeigniter URL structur. Codeigniter mainly preferes search engine freindly. that is segmented method. by default it won’t support get method.you can see my previous post for enabling get method in Codeigniter. It comes with URL helper that has many built in functions helps.

To run below examples,we use default welcome controller and welcome_message view. You can see below image where it located.when you run it executes welcome.php controller and loads view welcome_message.php

Codeigniter Download example source code

To run below examples,we have to load the URL helper by adding below line to controller constructor. 

1

<?php $this->load->helper('url');?>

base_url() returns web site url.

1
2
3
4

<?php 
//output is http://example.com/
echo base_url();
?>

index_page() returns the index_page in config variable.by default it returns index.php. when you enable mod_write for Codeigniter index_page empty. Then base_url and site_url are equal. 

1
2
3
4

<?php 
// out put could be index.php
echo index_page()
 ?>

site_url() return base_url with index_page in config variable. That is index.php by default. 

1
2
3
4

  <?php 
//output could be http://example.com/index.php
echo site_url();
?>

site_url() takes two kinds of parameters either a string of segmets or array of segments.

Below example takes string of segments as a parameter. 

1
2
3
4
5

<?php 
//output could be http://example.com/index.php/desired_controller/controller_method
echo site_url('/desired_controller/controller_method');
//out put could be http://example.com/index.php/desired_controller/controller_method/parameter1/parameter2 
echo site_url('/desired_controller/controller_method/parameter1/parameter2');?>

Below example takes array of segments as a parameter. be aware that precedence importence. 

1
2
3
4

  <?php 
$segments=array('desired_controller','controller_method','parameter1','parameter2');
echo site_url($segments);
//out put could be http://example.com/index.php/desired_controller/controller_method/parameter1/parameter2 ?>

Codeigniter site folder structure

codeigniter_folder_structure

check browser java enabled

Posted on by

Check Browser Java application enabled

Java is a high-level, third generation programming language, like C and many others.Java allows you to play online games, chat with people around the world, calculate your mortgage interest, and view images in 3D, just to name a few. It’s also integral to the intranet applications and other e-business solutions that are the foundation of corporate computing.
With some reasons the web browser don’t support Javas ,like user intentially disables,some browsers don’t support.Then we must check the whether user’s web browser has Java enabled.Here we discuss how to handle non Java browser.

We show normal warning message with javascript. 

1
2
3
4
5
6
7

<script>
if (navigator.javaEnabled()){
alert('Java Enabled.');//we do our normal action
}else{
alert('Java Disabled.');//we warn the user to download or other 
}
</script>

We redirect the user to seperate UI or seperate sub domain that handles for non java browser.

  

1
2
3
4
5
6
7

<script>
if (navigator.javaEnabled()){
alert('Java Enabled.');//we do our normal action
}else{
document.location="nonjava-html-page.html";
}
</script>

check javascript disabled

Posted on by

Check Browser Javascript enabled

JavaScript is a small, lightweight, object-oriented, cross-platform scripting language.JavaScript is used in millions of Web pages to add functionality, validate forms, detect browsers, and much more.With some reasons the web browser don’t support Javascript ,like user intentially disables,some mobile browsers version don’t support.Then it must we check the whether user’s web browser has Javascript enabled.Here we discuss how to handle non Javascript browser.

We show a alert ,warning message if user browser don’t hav Javascript enabled.using <noscript> HTML tag. just add bellow code to any where in the body section.<noscript> element will be rendered by those Javascript disabled browsers. 

1

<noscript><font face=arial>JavaScript must be enabled in order for you to use maheshchari.com in standard view. However, it seems JavaScript is either disabled or not supported by your browser. To use standard view, enable JavaScript by changing your browser options, then <a href="">try again</a>. </font></noscript>

We show a alert ,warning message with Javascript itself if user browser doesn’t support <noscript> HTML tag.below example code demonstrates.

1
2
3
4
5

<div id="nojs"><font face=arial>JavaScript must be enabled in order for you to use maheshchari.com in standard view. However, it seems JavaScript is either disabled or not supported by your browser. To use standard view, enable JavaScript by changing your browser options, then <a href="">try again</a>.</font></div>
<script>
//if script enabled warning message hidden.
document.getElementById('nojs').style.display="none";
</script>

 

We create seperate UI or seperate web site for those Javascript disabled browsers. below example redirects the user automatically if Javascript disabled.

1
2
3
4
5
6
7
8

<html>
<head>
<noscript>
<meta http-equiv="refresh" content="0;URL=http://mobile.maheshchari.com" />
</noscript>
</head>
<body></body>
</html>

 

check cookie enabled javascript php

Posted on by

How to check browser cookie enabled with php javascript

Cookies are typically used by web servers to perform functions such as tracking your visits to websites, enabling you to log in to sites, and storing your shopping cart. Cookies can be used to interaction between Javascript and Server Side  Scripts like PHP.Cookies also used to transfer small amount of data between one page to other pages via HTTP headers .If user disables this cookies or user’s browser won’t support the interaction between JS and PHP fails.So we must ensure user must enable these Cookies.

In this article,we check the user’s browser Cookie enabled or not.This can be achieved by both client side Javascript and Server Side Script.

Checking with Javascript

1
2
3

if (navigator.cookieEnabled == 0) {
  alert("You need to enable cookies for this site to load properly!");
}

Checking with PHP

If user disables Javascript we fail to check the Cookie enabled or not.So we check on the server side also.below PHP snippet check the Cookie enabled or not.

1
2
3
4
5
6
7
8
9
10

function check_cookie(){
	if (setcookie("test", "test", time() + 360))
	{
		if (isset (@$_COOKIE['test']))
		{
			return true;
		}
	}
return false;
}

wordpress custom contact form template

Posted on by

How to make contact us form page for wordpress default theme .

We know that word press is popular open source blog.it has thousands of plugins to enhance it’s features.we can extend it to complicated CMS.here we learn how to make a simple contact form,that needs a every web site.please refere my previous article "how to make a custom page template" before moving . word press comes with two default thems classic,default. here we customize the default theme.

go to wp-content/themes/default directory and make a php file name contact_form.php.

open contact_form.php and single.php in the default template directory with your favorite editor.

copy the every code in single.php to contact_form.php.

delete every thing in the between <div id="content" class="widecolumn"> and </div>.

replace that with our generel contact form.

then click add new link in main page side navigation.make title as contact form .

then select a contact_form template attribute of the page on right .

publish this page you have done.

you can download the template file and test yourself.

Template Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

<?php
/*
Template Name: contact_form
*/
?>
<?php get_header(); ?>
 
<div id="content" class="narrowcolumn"> 
<!-- replaced contact start here -->
<span class="breadcrumbs"><a href="<?php echo get_option('home'); ?>/">Home</a> </span>
  <h2 class="title">Contact Us</h2>
  <?php 
if(isset($_POST['Submit'])){ //check if user submitted the contact form
$error="";
	if($_POST['contact_name']=='')$error.="Name required.<br/>";
	if($_POST['contact_email']=='')$error.="Email required.<br/>";
	if($_POST['contact_phone']=='')$error.="Phone  required.<br/>";
	if($_POST['contact_comment']=='')$error.="Comment required.<br/>";
if($error!=""){
	//if any errors skip mailing and display the errors for users.
	echo "<span style='color:red'>$error</span>";
}else{
	// get admin email from wordpress default options
	$to=get_option('admin_email');
	$subject="One contact enquire at noblefligh re: ".$_POST['contact_reason'];
	$body="\r\n Hi Admin";
	$body.="\r\n You had an enquiry:";
	$body.="\r\n Regarding:\t".$_POST['contact_reason'];
	$body.="\r\n Name: \t".$_POST['contact_name'];
	$body.="\r\n Email: \t".$_POST['contact_email'];
	$body.="\r\n Phone:\t".$_POST['contact_phone'];
	$body.="\r\n Comment: \r\n ".$_POST['contact_comment'];
	// wordpress default handy mail function
	wp_mail( $to, $subject, $body);
	echo "<span style='color:green;'>your comment sent to admin successfully</span>";
	// display success message.
}
 
}
	?>
  <form id="contact_form" name="contact_form" method="post" action="<?php echo the_permalink(); ?>">
    <table border="0">
      <tr>
        <td>About </td>
        <td><select name="contact_reason" id="contact_reason" style="width:145px;">
            <option value="Product">Product</option>
            <option value="Service">Service</option>
            <option value="Other">Other</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Name</td>
        <td><input name="contact_name" type="text" id="contact_name" style="width:145px" /></td>
      </tr>
      <tr>
        <td>Email</td>
        <td><input name="contact_email" type="text" id="contact_email" style="width:145px" /></td>
      </tr>
      <tr>
        <td>Phone</td>
        <td><input name="contact_phone" type="text" id="contact_phone" style="width:145px" /></td>
      </tr>
      <tr>
        <td>Comment</td>
        <td><textarea name="contact_comment" id="contact_comment" style="width:300px"></textarea></td>
      </tr>
      <tr>
        <td colspan="2" align="center"><input type="submit" name="Submit" value="Submit" />
          <input type="reset" name="Submit2" value="Reset" /></td>
      </tr>
    </table>
  </form>
<!-- replaced content end here -->
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

 

Preview

wordpress-contactform

absolute vs relative path

Posted on by

Absolute vs Relative file paths

In this article,we observe the importence of absolute and relative file path of internet files that are placed in own domains or other domains. html document can be rendered atleast a document file. these files are linked to a document like CSS,Javascript,images,flash files.A path basically tells a web browser, where another file is located.

Types of paths

  • Absolute path
  • Site root relative path
  • Document relative path

Absolute Path

These are absolute server paths, they are relative in regards to your http document directory.generelly we place them with URL of the site.main advantages of these absolute path are we can manipulate the dynamicall genereated MIM types,that results in caching the assets,avoiding the caches.we can move document in site directory where ever. we can refer regard less of the sites.

Examples:-

image

<img src="http://www.maheshchari.com/images/image.jpg" width="120" height="110" />

javascript source file

<script src="http://www.maheshchari.com/images/javascriptsrcfile.js" type="text/javascript" ></script>

CSS file

<link href="http://www.maheshchari.com/images/style.css" rel="stylesheet" type="text/css" />

 

Site root relative path

These are semi absolute paths, in the main absolute path from above examples we replace http://www.maheshchari.com/images/ with just / .but these assets can be accesed to single working domain only.

Examples:-

image

<img src="/images/image.jpg" width="120" height="110" />

javascript source file

<script src="/images/javascriptsrcfile.js" type="text/javascript" ></script>

CSS file

<link href="/images/style.css" rel="stylesheet" type="text/css" />

Document relative path

these are document relative path,assuming present working document in site root directory.below examples works.main disadvantage of these document relative path,if we move the present working document

Examples:-

image

<img src="images/image.jpg" width="120" height="110" />

javascript source file

<script src="images/javascriptsrcfile.js" type="text/javascript" ></script>

CSS file

<link href="images/style.css" rel="stylesheet" type="text/css" />

 

if present document moved in to one deeper directory.

Examples:

<img src="../images/image.jpg" width="120" height="110" />