How can I make a button-link, as Like in Facebook?

Question

Firstly, sorry for my bad English (I'm Italian).
Anyway, I'm making a web-site project for school, so I'm using HTML, CSS and PHP languages.
I'd like to put a sort of button-link (for example the "Like" one, as in Facebook) but how can I do it?
In Facebook, when I click on "Like", I won't be redirected to another page, so it can't be something like:

<a href="like.php">Like</a>

In fact, I want the user to be in the same page at the same position
I thought I could write something like this (I'll call this file home.php ):

<a name="5">
<a href="like.php?position=5&user=Paul>Like</a>

So, I will write in PHP something like:

<?php
  // Database connection 
  // Adding a like in database. The user who liked the object is in $_GET['user'] 
  // ...
  header("location:home.php#$_GET[position]");
?>

But I don't want the user to be redirected to a page call like.php which redirect, in turn, the user at the beginning page...

How can I do it? And how can I connect to database?
Thanks in advance ^^

Answer 1

I can't provide code because what you're asking is too much. All I can do is steer you the right way to get your answers. You're asking how to do at least 3 different things here that all require an explanation. So look up the following, and how they function:

AJAX . This will let your page send a message (like a button click to a PHP page). PHP . You will need this to intercept the message and return the result. MySQL . You will need this to create a table, hold your data, modify your data, and retrieve data to respond back to your main page.

Here is a simple example: HTML graphic for buttonbutton

<a href="link.php" target="_blank"><img src="button.png" alt="playButton" border="0" onclick="countClick('1','Google')"></a>

Javascript for the AJAX

function countClick(id,host) {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
         //document.getElementById("demo").innerHTML = xhttp.responseText;
        }
      };
      xhttp.open("GET", "/includes/appCounter.php?appid="+ id +"&hostIs="+ host, true);
      xhttp.send();
    }

What this does is, when the user clicks the button, it goes to whatever link is there. But it also triggers the " onclick ". This fires the Javascript. The Javascript function makes a simple AJAX call to the server, passing in an ID and a Host. The PHP page knows what to do with those parameters.

In this case, there isn't any need for the page to even care about the response. It happens in the background. In the end, a counter in my database is updated to let me know they clicked that button.

In the real world, it looks like this: http://android.dpoisn.com/