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


Tags: php,html,css,button,hyperlink

Problem :


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 ^^



Solution :

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/


    CSS Howto..

    overlaying divs with onclick in slideshow -> onclick doesnt change

    How to assign CSS background image properties mixing classes and ids

    How to css target “Tab” state of the input?

    How to centre a table in html using css file? [duplicate]

    How to keep layout unchanged when keyboard is displayed?

    How to have multiple borders on div using css

    how to make unorder list all in same block and have gap within each link (CSS)

    How to make a table-cell have the same width as its height?

    parse JSON to HTML table: How do I format the css of the table?

    Use anchors and :target for navigation. How to show first layer by default

    how to access anti aliasing method of a font with CSS

    How to do Background Image horizontal slide

    how to disable the highlighting view on selection either in html or css?

    How do I use a variable to get CSS info on an element?

    CSS/PHP: How to make the next div appear on the side instead

    how to give css for arranging label, textbox and text area side by side in the same line

    How to align a background image to bottom of table cells in css?

    How to create responsive blocks by using just CSS and HTML

    How is this fluid column layout changing to single-column as page narrows?

    How to position a html element under a fixed div

    Can't make any different fonts show up on website with @font-face or google fonts

    How to create hover effects for all links EXCEPT the one you hover on using javascript/jquery/css?

    CSS `will-change` - how to use it, how it works

    How To Make CSS Animations Ease Back To Position When No Longer Hovering?

    How to center image using CSS without white border

    How to make fonts display on web cross-platform?

    How to center a text line in a navigation bar?

    How to change the css and html file at the same time

    How to check “IF any one or all buttons are clicked” in jquery

    How to change the Fill color of an SVG path via CSS