Need to make a score system - user clicks a button, score increases by 1

[Alcapwne]

Hi,

I need to make a scoring system for my site, whereby the user clicks a button and then his score increases by 1. The user will literally be mashing that button, so is there any way the score can increase in the MySQL database in real time, or will the score just have to update every 50 clicks or so?

I don't want the page to refresh every time the button is clicked, so does this mean I will have to use flash to make the button and score system which sends the data to the MySQL database?

Thanks

[Qombat]

[QUOTE=Alcapwne;25675780]Hi,

I need to make a scoring system for my site, whereby the user clicks a button and then his score increases by 1. The user will literally be mashing that button, so is there any way the score can increase in the MySQL database in real time, or will the score just have to update every 50 clicks or so?

I don't want the page to refresh every time the button is clicked, so does this mean I will have to use flash to make the button and score system which sends the data to the MySQL database?

Thanks[/QUOTE]
You could use AJAX.

[editline]27th October 2010[/editline]

This is in response to the "It can't refresh" part, by the way.

[Alcapwne]

[QUOTE=Qombat;25675805]You could use AJAX.

[editline]27th October 2010[/editline]

This is in response to the "It can't refresh" part, by the way.[/QUOTE]

Would anything bad happen if data is being sent to the database every half a second by each user?

[editline]27th October 2010[/editline]

<script type="text/javascript">
function scoreup()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

</script>

Okay I'm gonna do it so that when the button is pressed, it runs the javascript function "scoreup()"which increases the score on the scoremeter, and sends the new score to the database. Could someone point me in the right direction as to how to do this?

[Qombat]

Please, for fuck's sake, don't use ActiveX Objects.

[Alcapwne]

[QUOTE=Qombat;25676163]Please, for fuck's sake, don't use ActiveX Objects.[/QUOTE]

Oh, I'm completely new to this, what should I use instead?

[Qombat]

Although I don't really like going into the backend of Filemaw because I'm a paranoid bastard, the way the account UI works for it is similar.

Something like this would work for you:

xmlhttp=new XMLHttpRequest();
xmlhttp.open("POST","upscore.php",false);
xmlhttp.send("userid=<userid>&score=<score>");

Replace <userid> and <score> with whatever you see fit.

[editline]27th October 2010[/editline]

Notice XMLHttpRequest and not the ActiveX object. ActiveX is [b]only[/b] supported in Internet Explorer.

[editline]27th October 2010[/editline]

Oh wait, disregard that. I didn't realise you had an if statement in there for IE 6 and such. Disregard my comment about ActiveX objects.

However, the code I posted it still relevant.

[Alcapwne]

[QUOTE=Qombat;25676245]Although I don't really like going into the backend of Filemaw because I'm a paranoid bastard, the way the account UI works for it is similar.

Something like this would work for you:

xmlhttp=new XMLHttpRequest();
xmlhttp.open("POST","upscore.php",false);
xmlhttp.send("userid=<userid>&score=<score>");

Replace <userid> and <score> with whatever you see fit.

[editline]27th October 2010[/editline]

Notice XMLHttpRequest and not the ActiveX object. ActiveX is [b]only[/b] supported in Internet Explorer.

[editline]27th October 2010[/editline]

Oh wait, disregard that. I didn't realise you had an if statement in there for IE 6 and such. Disregard my comment about ActiveX objects.

However, the code I posted it still relevant.[/QUOTE]

Thanks for the reply
So in the upscore.php file, will it connect to the mysql database and get the current data, and then the xmlhttp.send thing update the scores?

Also, before, the ActiveX was only gonna be created if they were using an old version of IE, otherwise it would just be an XML request :)

[andersonmat]

Or you could use jQuery and let jQuery handle all of the cross-browser bullshit.

[Qombat]

[QUOTE=andersonmat;25676347]Or you could use jQuery and let jQuery handle all of the cross-browser bullshit.[/QUOTE]

I never really bothered with jQuery. Not sure why.

[editline]27th October 2010[/editline]

[QUOTE=Alcapwne;25676332]Thanks for the reply
So in the upscore.php file, will it connect to the mysql database and get the current data, and then the xmlhttp.send thing update the scores?

Also, before, the ActiveX was only gonna be created if they were using an old version of IE, otherwise it would just be an XML request :)[/QUOTE]

Exactly.
Filemaw works like this:

Click (in this example) delete button
Javascript fires off an xmlhttp request to the delete functions
PHP handles the deletion and generation of a new table
Javascript re-shuffles table with the XMLHttpResponse(); function.

[Crhem van der B]

AJAX in jQuery is so easy it's a joke.
I'm using it in a project I'm doing right now.

$(".edit_link").click(function(event){
    event.preventDefault();
    var comment_id = $(this).children("#edit_comment").children("#comment_id").html();
		$('#id'+comment_id).fadeOut(10);
    $.post("/editcomment.php",{"comment_id": comment_id},function(data) {
		$('#id'+comment_id).hide().html(data).fadeIn();
    }, "html");
});

[Alcapwne]

[QUOTE=Crhem van der B;25677665]AJAX in jQuery is so easy it's a joke.
I'm using it in a project I'm doing right now.

$(".edit_link").click(function(event){
    event.preventDefault();
    var comment_id = $(this).children("#edit_comment").children("#comment_id").html();
		$('#id'+comment_id).fadeOut(10);
    $.post("/editcomment.php",{"comment_id": comment_id},function(data) {
		$('#id'+comment_id).hide().html(data).fadeIn();
    }, "html");
});

[/QUOTE]

Would it be hard to make a click score thing in AJAX/jQuery then?

[Crhem van der B]

Very easy.

[Alcapwne]

[QUOTE=Crhem van der B;25677699]Very easy.[/QUOTE]

That's good, so what's the best way to learn AJAX/jQuery?

[Crhem van der B]

Well, personally, when I wanted to do my first thing in Ajax I tried just by reading the jQuery site.
But I kinda failed so I want ahead and asked how can I do what I wanted in stackoverflow.com.
Maybe you can learn from the answer they gave me:
[url]http://stackoverflow.com/questions/3081223/returning-html-with-php-after-jquery-ajax-function[/url]

[TehWhale]

[html]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Test</title>
<script type="text/javascript">
$(document).ready(function() {
$('#update').click(function() {
$.ajax({
type: "POST",
url: "update.php",
data: "userid=823&authkey=xxxxxxxxxxxxx",
success: function(rtn){
$('#count').html(rtn);
}
});
});
});
</script>
</head>
<body>
<div id="count">5</div>
<div id="update">update count</div>
</body>
</html>[/html]

I think you can figure out the php

[Alcapwne]

[QUOTE=TehWhale;25679339][html]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Test</title>
<script type="text/javascript">
$(document).ready(function() {
$('#update').click(function() {
$.ajax({
type: "POST",
url: "update.php",
data: "userid=823&authkey=xxxxxxxxxxxxx",
success: function(rtn){
$('#count').html(rtn);
}
});
});
});
</script>
</head>
<body>
<div id="count">5</div>
<div id="update">update count</div>
</body>
</html>[/html]

I think you can figure out the php[/QUOTE]

Whoah, thanks!
Could you run me through what each thing does quickly please?

[jaybuz]

If the element with ID of [b]'update'[/b] is clicked then it will post data [B]"userid=823&authkey=xxxxxxxxxxxxx"[/B] to file [B]'update.php'[/B]. If successful it updates element with ID of [B]'count'[/B] with the latest number.

[Alcapwne]

[QUOTE=jaybuz;25680089]If the element with ID of [b]'update'[/b] is clicked then it will post data [B]"userid=823&authkey=xxxxxxxxxxxxx"[/B] to file [B]'update.php'[/B]. If successful it updates element with ID of [B]'count'[/B] with the latest number.[/QUOTE]

Thanks for the reply
So will the userid (I will probably make this username instead) automatically be the current user that is logged in or would I need some extra code to make it the current user?

Also, can I get rid of the authkey and change it to whatever field needs updating in the database?

Finally, this may sound silly but does the count actually get updated on the database currently or will I have to add 'count' to the 'data: "userid=823&authkey=xxxxxxxxxxxxx' part?#

Thanks :)

[Skwee]

like this one?
[url]http://clickthatbutton.com/[/url]

[Alcapwne]

[QUOTE=Skwee;25680619]like this one?
[url]http://clickthatbutton.com/[/url][/QUOTE]

Damnit, I thought my idea was original :'(
Ah well, I'll go ahead with it anyway, yeah that's pretty much what I'm trying to make

[TehWhale]

For further explanation:

[html]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Test</title>
<script type="text/javascript">
$(document).ready(function() { //when the document fully loads do this:
$('#update').click(function() { //when the item that has the id "update" is clicked:
$.ajax({ //ajax request
type: "POST", //sends data via POST to...
url: "update.php", //file data to be sent to
data: "userid=823&authkey=xxxxxxxxxxxxx", //data, userid/username maybe auth key
success: function(rtn){ //when it returns successful
$('#count').html(rtn); //set the html data of the element with id "count" to whatever the return value of the php file was (probably the number of "clicks")
}
});
});
});
</script>
</head>
<body>
<div id="count">5</div>
<div id="update">update count</div>
</body>
</html>[/html]

Hopefully that explains it.

[wutanggrenad]

[QUOTE=Alcapwne;25680767]Damnit, I thought my idea was original :'(
Ah well, I'll go ahead with it anyway, yeah that's pretty much what I'm trying to make[/QUOTE]

Anything basic to make has already been done. Sometimes though half the fun is seeing something and figuring out how they built it and recreating it.