Facebook Like Button Example With JQuery

Hi! We all got a Facebook account. As you remember, Facebook's got so much options that we can use, Like button, Chat, TimeLine etc.

In last article, I made mention of Jquery used within Facebook. Today, I'll show you one of'em. That is "like button".

As you know, when our friends share something, we can like it easily. When clicked the like button, data is saved without refresh. Because of this is JQuery&Ajax. Actually this example is not going to be like Facebook Like Button Module exactly, but, may be a good idea to do it for some of us. This things're so easy to do. We all need a database, a PHP page and a coding ajax page with ajax library, where is that complex?

Let's start it!

First, create your MYSQL Table;

CREATE TABLE `jquery_app`.`LikeButton` (
`ID` INT( 11 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`data` VARCHAR( 255 ) NOT NULL
)

You shall need this files:

1. settings.php //database configurations
2. jquery.js //your jquery code
3. jquery library //you must include this file on index.php page
4. match.php //your php code that you do like something and write database
5. index.php //default page

index.php

This is facebook like button example. This is what i share! :)
< a href="#" id="like">Like < div id="whathappened"> //We see total clicked like button
< /div>
< div id="whathappening"> //We see what happening now
< /div>

When click the link, sending query to jquery.js page. After that jquery starts ajax method and searchs match.php page for adding +1.

jquery.js

// JavaScript Document
$(document).ready(function() {
 $('#like').click(function() {
  $('#whathappening').fadeIn(1000);
  var wait="Adding..";
  $.ajax({
   cache:false,
   async:false,
   url:'match.php',
   success:function(inc) {
    $('#whathappened').html(inc);
    $('#whathappening').html(wait);
    $('#whathappening').fadeOut(1000);
   }
  });
 });
});

When id=like click, data'll been added to database. If you ask how to add this, you should analyze the page is shown below.

match.php

 include("settings.php");
 //adding data
 $random=rand(0,99999999);
 $ekle=mysql_query("INSERT INTO LikeButton(data) values('$random')");
 //how many data we got
 //with the data we've just added
 $show=mysql_query("select * from LikeButton");
 $total=mysql_num_rows($show); //Getting total liked
 echo "Total: ".$total; //Print total liked.

What you see here, all php code. We include settings.php page for connection database. We get total and add +1 to this.

settings.php

 $conn=mysql_connect("localhost", "username", "password") or die("error1");
 mysql_query("SET NAMES 'utf8'") or die("error2");
 mysql_select_db("jquery_applications",$conn);
 error_reporting(0);
 ini_set('display_errors','Off');
 error_reporting(E_ALL); 

That's it! You've just done Facebook like module. If you want to see how to work this, you can visit the web site for demo.

Module view

When "Like" link click

Web 2.0 Tech and a Jquery Auto Search Complete Application!

Hi! Today I want to talk about web 2.0 technology. As you know, web 2.0 is being used by many of us. Especially frameworks developed with javascript and ajax, used by everyone. Well, we can say that huge companies which are google, yahoo, facebook and twitter etc. use web 2.0 too.

I would like to make an application on Jquery and share with you guys. So, in 2006, Jquery's started to be developed as an open source project. When you see "The write less, do more", you should understand that is Jquery! There is a powerful library of javascript, that's why we can do good jobs with the less code on Jquery.

If you want to see more information, you can visit the official web site of jquery. You can also find documentation and examples on it. That is here!

You must call as include jquery library on your web site, for the successful operation of your jquery code. You can find the library on Jquery Web Site easily.

The point I wanted to show you here is an ajax application on jquery. However, I am thinkin' that I should show you couple simple examples, before starting to applicaton.

$('#divID').slideUp(1000); //Sliding the div up
$('#divID').slideDown(1000); //Sliding the div down
$('#divID').slideToggle(1000); //Sliding the div up and down
$('#divID').FadeToggle(1000); //Displaying or hiding the div
$('#divID').html(“Hello World!”); //Printing something as HTML tags

$(‘a’).click(function() {
 $("#divID").animate({left:'+=100px'}, 2000); //when you click the mouse, do something
});

As you have seen, when you code jquery, you can control the web site all the way.
The application I'll show you, is an AUTO SEARCH COMPLETE!

This is the text field we'll use when searching.

This is the div layer will open during our php script works.

// JavaScript Document
$(document).ready(function() {
 $('#TextBox').keyup(function() {
  document.getElementById("result").style.display="block";
  var variable=$('#TextBox').val();
  $.ajax({
      url:"data.php",
      data:"TextBox="+variable,
      cache:false,
      async:false,
      method:'post',
      success:function(kitchen) {
          var message="Loading..";
          $('#result').html(message).load();
      }
  });
 });       
});

As you have seen, when keyup() function works, the system is getting data from data.php page. data.php page is shown below

 include("database.php");
 $data=$_REQUEST["TextBox"];
 if(!$data==0) { 
  $MyData=mysql_query("select * from names where name like '%$data%'");
  if(mysql_num_rows($MyData)<"1") {
   echo "There is nothing about it!"; 
  } else {
   echo "Languages!
";
   while($MyList=mysql_fetch_array($MyData)) {
    echo $MyList["name"]."\n";
   }
  }
 } else {
  echo "Please, start to write something.."; 
 }

Today, we made a jquery search auto complete application. If you visit and see this application, just click demo page!

See you guys next article!

Form Validation Using AJAX and PHP

In this article, we'll show you something about form validation, namely form control solutions using AJAX and PHP. As you know, we can submit a form without refreshing page with Ajax. So, we should use this tech.

NOTE : Ajax is not one technology, but a group of technologies. Ajax uses HTML, JavaScript, CSS, XML etc.

This example, shows the relationship between getting data of form and checking:

Step 1 is, users type something or not!

Step 2 is, the system checks what the data is or, is there any typed data?

Well, let's do our pages. For that we create three files,

1. example.html
2. kitchen.php
3. lib.ajax.js

lib.ajax.js

// JavaScript Document
	//What does JaX stand for? is the function we use for ajax object
function JaX() {
	var httpObject = null;
	var httpBrowser = navigator.appName;
	
	if(httpBrowser == "Microsoft Internet Explorer") {
		httpObject = new ActiveXObject("Microsoft.XMLHTTP");	
	} else {
		httpObject = new XMLHttpRequest();	
	}
	return httpObject;
}

function UJaX(subject, method, path, more, func, statu) {
	//subject is object of ajax
	//method is the method of getting variables
	//path is the path of file
	//func is the function you use on it
	//statu can be true or false
	ajaxObject = JaX();
	
	if(method == 'POST') {
		if(ajaxObject != null) {
			ajaxObject.onreadystatechange = func;
			ajaxObject.open('POST', path, statu);
			header = "application/x-www-form-urlencoded";
			ajaxObject.setRequestHeader("Content-Type", header);
			ajaxObject.send(more);
		} else {
			alert("Error(1)->The System Cannot Be Opened!");	
		}
	} else {
		if(ajaxObject != null) {
			ajaxObject.onreadystatechange = func;
			ajaxObject.open('GET', path+'?'+more, statu);
			ajaxObject.send(null);
		} else {
			alert("Error(2)->The System Cannot Be Opened!");	
		}
	}
}

example.html

var ajaxObject;

function CheckItOut() {
	subject = ajaxObject;
	method = 'GET';
	path = 'kitchen.php';
	func = sonuc;
	dataMore = document.getElementById("data").value;
	more = 'data=' + dataMore;
	statu = "true";
	
	UJaX(subject, method, path, more, func, statu);
}

function sonuc() {
	if(ajaxObject.readyState == 4) {
		if(ajaxObject.status == 200) {
			DM = ajaxObject.responseText;
			//DM = document.form1.data.value;
			if(DM == "You must write something!")
				document.getElementById("MyButton").disabled = true;	
			else
				document.getElementById("MyButton").disabled = false;	
		} else
			DM = "Error = Nu/1";	
	} else
		DM = "Loading...";	
		document.getElementById("MyLabel").innerHTML = DM;
}

< form name="form1" method="GET">
< input name="data" type="text" id="data" onChange="CheckItOut();">
< input name="MyButton" type="button" id="MyButton" value="I'm Ok!">
< /form>

Preview example.html page

And php page, kitchen.php

$DataOfForm = $_REQUEST["data"];
if(!$DataOfForm == 1) {
	print "You must write something!";
} else {
	print "You said:".$DataOfForm."";	
}

And yes! We just finished our script! go to example.html page and write something;

When you typing

If we don't type anything on this, we'll see like down here:


When you type none.


Like you see, "Button" is disabled when you type none. Because of it is DM variable of javascript.

If you want to see this project, you can click Demo!

We'll see you next article!