Fancy Multiple File Upload using Ajax, Jquery and PHP

                File upload is a very important utility for website to communication of source codes, examples, demos, and file to the between users and website holders.here user can easily transfer data via file upload from source to destination on the internet market.

  

              

                  in this post i have exaplained that how to upload file without page refresh using ajax,jquery and mysql database. This tutorials helps to you upload easy file upload without page refresh and powerful multiple file upload application with an option to remove file from the list see below example and you can free to download full source code by clicking download button.

if you have any query about this article than comment below for help.

Read More

how to design blogger template

                    Blogger is a one of the powerfull platform providing by google.here you not pay or any hosting charges for your domain or blog. and so google blogger flatform is success and perfect platform for blogging.you have to do few coding changes for better results of your blog. in this post i have explain tha how to create custom blogger theme so look this post and implement it for better results. just follw some below step to create a better theme other than,

1.https://www.blogger.com
2.sign in with google username and password
3.Go to your blog left menu open Template -> Edit HTML

IF ELSE Condition
if you want to display specific items on Article page than use the below code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
// Display content on Article Page
<b:else/>
// Display content on Home Page
</b:if>

If you want to display any specific thing on Home page, use following code.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
// Display content on Home Page
</b:if>

Sections
You can add multiple sections with attribute unique ID on sidebar part.

<b:section id='RecentPosts'>
</b:section>
<b:section id='MostPopularPosts'>
</b:section>
<b:section id='BuySellAds'>
</b:section>

You can find out those sections in Layouts part.

By clicking on Add a Gadget you will be find appear popup like below image and you can add a widgets in your blogger theme.

SEO - Search Engine Optimization

Search Engin Optimization is a very important for any blog or website for better search results and get best ranking in google. use below code to get better search results. you need to <title> part using followind code. this code helps to include article title as a page title.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<title>Website Title</title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Expand id="post" part.

Article Title
Replace data:post.title part with following code.this below code help to you to change your blog post title.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<h2>
<a expr:href='data:post.url'><data:post.title/></a>
</h2>
<b:else/>
<h1>
<data:post.title/>
</h1>
</b:if>

Adsense inside Blog Post
Google adsense is a one of the way to earning money with blogger.if you have adsense code than you can easily earn money with your blog.Blogger is maximum allow three adsense ad inside article part.use the following code about the <data:post.body/> part. Go to Layout part click Blog Post edit and modify your ads.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.includeAd'>
<div>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</div>
</b:if>
</b:if>

<data:post.body/>

Social Buttons

you can Generates social buttons using below code.

// Linkedin Share Button
<script data-counter='right' expr:data-url='data:post.url' type='in/share'/>
// Google Plus Share Button
<div class='g-plus' data-action='share' data-annotation='bubble' expr:data-href='data:post.url'/>
// Twitter Button
<a
 class='twitter-share-button' data-count='horizontal' 
data-via='TwitterUsername' expr:data-text='data:post.title' 
expr:data-url='data:post.url' href='http://twitter.com/share'/>
// Facebook Button
<iframe
 allowTransparency='true' 
expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot;
 + data:post.url + 
&quot;&amp;layout=box_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&quot;'
 frameborder='0' scrolling='no' style='border:none; overflow:hidden; 
width:60px; height:70px'/>

Javascript Support files

include below javascript files within <head> or </body> end tag.

// Linkedin
<script src='http://platform.linkedin.com/in.js' />
// Google Plus
<script src='http://apis.google.com/js/plusone.js' />
// Twiiter
<script src='http://platform.twitter.com/widgets.js'/>
// Facebook
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

If you have any queries than, please comment here.

Read More

how to create blog in google blogspot

                            Google blogger is a better platform for blogging. it free and easy to customize to do just few code changes to implement for better results. if in your mind that how to create blog on google blogspot than don't worry here follow few step to create blog on blogspot and spread your knowladge and earning money with google.follow below step to create a new blog,

 

How to create blog on Google Blogger

1.https://www.blogger.com
2.sign in with google username and password
3.click on create a blog.
4.enter blog title, blog address and select blog theme and click on create blog! button.now    your blog ready to use  create post and spread your knowladge and business with your best skill.

Read More

How to prevent spammers with motion CAPTCHA using jQuery example

                 

                 Captcha is a one of the very useful utility for website data security. it will be strickly prohibited invalid form submission in the website. in this post i am explain that how to create MotionCaptcha using jQuery.this is a very simple to implement in your web application and it looks like drawing a user has to draw given sketch. below given live demo and example but only subscriber users can download other user can see only demo.

How to use:

 

<link rel="stylesheet" href="jquery.motionCaptcha.0.2.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.motionCaptcha.0.2.js" ></script>

jQuery motionCPTCHA initialize:

<script type="text/javascript">
        jQuery(document).ready(function($) {
            // Do the biznizz:
            $('#mc-form').motionCaptcha({ // Form id to append shapes
                shapes: ['triangle', 'x', 'rectangle', 'circle', 'check', 'zigzag', 'arrow', 'delete', 'pigtail', 'star'] // list of shapes which we have included in file.
            });
        });
    </script>

CSS to make drawing area looks nice:

<style>
form {
    width: 440px;
    display: block;
    text-align:left;
    margin: 20px auto;
}
input,
textarea {
    font-family:"Lucida Grande", sans-serif;
    font-size: 13px;
    font-weight: bold;
    display: block;
    border: 0;
    outline:0;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-box-shadow: 0 0 0 5px rgba(0,0,0,0.1), inset 0 1px 1px rgba(0,0,0,0.3);
       -moz-box-shadow: 0 0 0 5px rgba(0,0,0,0.1), inset 0 1px 1px rgba(0,0,0,0.3);
            box-shadow: 0 0 0 5px rgba(0,0,0,0.1), inset 0 1px 1px rgba(0,0,0,0.3);
    padding: 9px 12px;
    margin:0 0 20px;
}
/* MotionCAPTCHA canvas */
#mc-canvas {
    margin:0 auto 20px;
    padding:1px;
    display: block;
    border: 4px solid #433e45;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
/* Red border when invalid */
#mc-canvas.mc-invalid {
    border: 4px solid #aa4444;
}
/* Green border when valid */
#mc-canvas.mc-valid {
    border: 4px solid #44aa44;
}
</style>

All together:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>How to prevent spammers with motion CAPTCHA using jQuery | easyscript4u.blogspot.in</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" href="jquery.motionCaptcha.0.2.css?ez_orig=1"/>
<style>
form {
    width: 440px;
    display: block;
    text-align:left;
    margin: 20px auto;
}
input,
textarea {
    font-family:"Lucida Grande", sans-serif;
    font-size: 13px;
    font-weight: bold;
    display: block;
    border: 0;
    outline:0;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-box-shadow: 0 0 0 5px rgba(0,0,0,0.1), inset 0 1px 1px rgba(0,0,0,0.3);
       -moz-box-shadow: 0 0 0 5px rgba(0,0,0,0.1), inset 0 1px 1px rgba(0,0,0,0.3);
            box-shadow: 0 0 0 5px rgba(0,0,0,0.1), inset 0 1px 1px rgba(0,0,0,0.3);
    padding: 9px 12px;
    margin:0 0 20px;
}
/* MotionCAPTCHA canvas */
#mc-canvas {
    margin:0 auto 20px;
    padding:1px;
    display: block;
    border: 4px solid #433e45;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
/* Red border when invalid */
#mc-canvas.mc-invalid {
    border: 4px solid #aa4444;
}
/* Green border when valid */
#mc-canvas.mc-valid {
    border: 4px solid #44aa44;
}
</style>
</head>
<body>
<h2>How to prevent spammers with motion CAPTCHA using jQuery example By easyscript4u.blogspot.in.&nbsp;&nbsp;&nbsp;=> <a href="http://www.phpgang.com/">Home</a> | <a href="/">More Demos</a></h2>
<form action="#" method="post" id="mc-form">
<div id="mc">
<p>Please draw the shape in the box to submit the form: (<a onclick="window.location.reload()" href="#" title="Click for a new shape">new shape</a>)</p>
<canvas id="mc-canvas">
Your browser doesn't support the canvas element - please visit in a modern browser.
</canvas>
<input type="hidden" id="mc-action" value=""/>
</div>
<p><input disabled="disabled" autocomplete="false" type="submit" value="Submit"></p>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.motionCaptcha.0.2.js" ></script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            // Do the biznizz:
            $('#mc-form').motionCaptcha({
                shapes: ['triangle', 'x', 'rectangle', 'circle', 'check', 'zigzag', 'arrow', 'delete', 'pigtail', 'star']
            });
 
        });
    </script>
</body>
</html>

                  above given complate code will work as a MotionCaptcha working in demo and you can also download by clicking download button.

if you have any query than you can freely contact at Email : easyscript4you@gmail.com

Read More

How to create Image less CAPTCHA with PHP example

                

                   Here i have created a image less captcha. captcha is a one of the security for website form data and important. here i have generated a number captcha and ask to user type it in numbers. here we have used php class imagelessCaptcha.php to generate this task so see how to use that class and it working. below provide demo and you can download source code free. this captcha generate simple question like : what is Fifty and Thirty-two written as a number ?

below download complete source code to implement this captcah in your web projects.

PHP Code

<?php 
session_start();
if (isset($_POST['submit']))
{
    $number = floatval($_POST['number']);
 
    if ($number != $_SESSION['correctNumber'])
    {
        $message = "<span class='errors'>The number you entered for the spam filter is incorrect.</span>";
    }
    else
    {
        $message = "<span class='success'>CAPTCHA Verified!!!</span>";
    } 
}
// include the class
include "imagelessCaptcha.php";
 
// implement imageless
$imgLess        = new imagelessCaptcha();
$CaptchaPhrase  = $imgLess->formPhrase();
$correctNumber  = $imgLess->getInt();
$_SESSION['correctNumber'] = $correctNumber;
?>

in the above code i have include imagelessCaptcha class and get number and stor actual number in session to confirm the input.

<div class="main">'.$message.'<br>
<form action="index.php" method="post">
    <label class="highlight"><span> '.$CaptchaPhrase.' :(spam filter)</span></label><br>
    <input type="number" name="number" step="0.1" class="textInput" />
    <input type="submit" value="Send" name="submit" class="submit" />
</form>
</div>

Read More

Autocomplete search using php, mysql and ajax

             

                       in this post we explained that how to create Autocomplete search or live search using php mysql and ajax without page refresh. that is some predefined texts come in the input type box while focus on textfield we are search some entered content from mysql database, actually this is a facebook style search.you can see live demo by click on live demo button and download by clicking on download button,

DB.PHP

<?php
$connection = mysql_connect('hostname','username','password') or die(mysql_error());
$database = mysql_select_db('databasename') or die(mysql_error());
?>

INDEX.PHP

<div class="content">
<input type="text" class="search" id="searchid" placeholder="Search for people" />&nbsp; &nbsp; Ex:arunkumar, shanmu, vicky<br /> 
<div id="result"></div>
</div>

AJAX
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".search").keyup(function() 
{ 
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
    $.ajax({
    type: "POST",
    url: "search.php",
    data: dataString,
    cache: false,
    success: function(html)
    {
    $("#result").html(html).show();
    }
    });
}return false;    
});

jQuery("#result").live("click",function(e){ 
    var $clicked = $(e.target);
    var $name = $clicked.find('.name').html();
    var decoded = $("<div/>").html($name).text();
    $('#searchid').val(decoded);
});
jQuery(document).live("click", function(e) { 
    var $clicked = $(e.target);
    if (! $clicked.hasClass("search")){
    jQuery("#result").fadeOut(); 
    }
});
$('#searchid').click(function(){
    jQuery("#result").fadeIn();
});
});
</script>

 SEARCH.PHP

<?php
include('db.php');
if($_POST)
{
$q=$_POST['search'];
$sql_res=mysql_query("select id,name,email from autocomplete where name like '%$q%' or email like '%$q%' order by id LIMIT 5");
while($row=mysql_fetch_array($sql_res))
{
$username=$row['name'];
$email=$row['email'];
$b_username='<strong>'.$q.'</strong>';
$b_email='<strong>'.$q.'</strong>';
$final_username = str_ireplace($q, $b_username, $username);
$final_email = str_ireplace($q, $b_email, $email);
?>
<div class="show" align="left">
<img src="author.PNG" style="width:50px; height:50px; float:left; margin-right:6px;" /><span class="name"><?php echo $final_username; ?></span>&nbsp;<br/><?php echo $final_email; ?><br/>
</div>
<?php
}
}
?>

if you have any question about php than you can freely can contact at  

Email :  easyscript4you@gmail.com

Read More

autocomplete jquery example

                                The Autocomplate provide live search without page refresh while you type in the text field. in this example i have suggestions are tags for programming languages like click on demo and type programming languege name like php,javascript,html,css etc... here is the search datasource is a simple javascript string. follow some below step to implement autosuggestion in your website easily.

first include those file

 <link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui.js"></script>

and put this code in side of the <head>

 <script>
  $(function() {
    var availableTags = [
      "PHP",
      "HTML",
      "HTML5",
      "CSS",
      "CSS3",
      "C++",
      "jQuery",
      "JavaScript",
      "Lisp",
      "Perl",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>

html code

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

Read More