I need to implement a links-click counter, that will count the number of clicks on the link...
Right now what i am doing is, i am linking the href to redir.php, which will increase the counter in DB and then using header('Location:'); I am redirecting it to the correct URL.
This works but it is certainly not the best approach. In an effort to make my code efficient, how can I make this link counter better? AJAX?
Not much exp with ajax so I wondering how to do in ajax or is there any other better method...
I do not want someone to write a bot script that would make multiple requests to the redir.php and mess up the stats.
You can use
Javascript to make a Ajax call to your "counter.php"
Add a Javascript code (like Google Analytic) on each page to post on the database
Create a "cron job" to analyse the "access_log" (if you count the link in the same domain, server)
Add a PHP code to update the database when each page is generate.
But I think the first javascript method is the best one.
Add a class on the link to spy
Add a "Event handler" to create a AJAX post
Create a simple PHP script to update the database.
Aka
If you links are generated from a source like a CMS instead of by hand, you could pass the link ID to your URL and on the loading of the next page count increment that the link has been clicked. Going this way would require that you reload (without the link ID) the page after that step to make sure that someone copying the link would not make the counter increment needlessly.
This method is bulletproof if your user has javascript enabled, but if your user does have javascript enabled, you could still do the method stated above and through a client side layer, bypass the whole thing and send it through AJAX.
This might seems like redundancy, but this way, you accelerate your process for most of your visitors (without the redirect since you do it through AJAX) and in the case that the javascript doesn't work or is disabled, you have a fail proof system that would avoid missing any click
Building off of #Akarun's answer, here is sample code (in jQuery) for adding a "listener" onto link clicks with "spy" class. Note that I load an image instead of attempting a $.post or other AJAX event -- this is because those won't complete by the time the person navigates away from the page (which clicking on a link is bound to do in most cases), whereas the browser will get off a request for the image in time. It's still a normal PHP script, the browser just thinks it's loading an image.
$(document).ready(function() {
$('a.spy').mousedown(function(event) {
var page_url = "<?=$_SERVER['PHP_SELF']?>";
var target_url = $(this).attr('href');
if(target_url != "#" && target_url != "javascript:void(0);")
new Image().src= "/welcome/track_link/?page_url=" + escape(page_url) + "&target_url=" + escape(target_url);
return true;
});
});
Have you thought of mobile users and other devices?
I believe your first implementation is completely adequate and secure.
You completely control the counting and there is no issue of user manipulation.
It works predictably also.
After all, the ajax will just do the samething in counter.php; Read and update the database. Stay with your present implementation.
Do it the way Google does it:
Waterfront Rentals
A javascript function. The passed code aids security.
Actually looking at the Google source they load an image with the URL as a parameter
window.clk=function(e,b,a,k,i,c,j)
{
if(document.images) {
b=encodeURIComponent||escape;a=new Image;var f=window.google.cri++;window.google.crm[f]=a;a.onerror=a.onload=a.onabort=function() {
delete window.google.crm[f]
};
var d,g,h;if(google.v6) {
d=google.v6.src;g=google.v6.complete||google.v6s?2:1;h=(new Date).getTime()-google.v6t;delete google.v6
}if(c&&c.substring(0,6)!="&sig2=")c="&sig2="+c;a.src=["/url?sa=T&source=",google.sn,"&cd=",b(i),google.j&&google.j.pf?"&sqi=2":"","&ved=",b(j),e?"&url="+b(e.replace(/#.*/,
"")).replace(/\+/g,"%2B"):"","&ei=",google.kEI,d?"&v6u="+b(d)+"&v6s="+g+"&v6t="+h:"",c].join("")
}
return true
};
Related
I am new to Jquery. I have a doubt:
For example, in a web page as voting, if you click a button, a counter is incremented by +1. Now, how to draw the url of the button on a website? Therefore, if we provide the url to others, and just click on the URL, the counter should increase by 1 on the website.
Best example of this is FaceBook LIKE.
I prefer to use jQuery, PHP and MySQL
It's a little bit difficult to understand what you're trying to ask but here's my take on it.
Scenario
You have a page at http://mywebsite.com/rating which contains 5 items you can rate on.
Solution
There are two events here that point to the same server side code.
What you need to do is assign an identifier to your button/product/whatever you're trying to rate. So you might have something like this <button ratingname="button1">Rate me!</button>
Now you will have a jQuery function that will use AJAX to communicate with your server and store the increment in the database. This jQuery function will be invoked via an event handler for the button and by going to this url: http://mywebsite.com/rating#button1.
Once your page loads you should check the hash for a value and if one is found then invoke the original jQuery function. You may want to additionally check if the value for the hash is a valid rating button value. (Note you could also use a query string).
I would do it using ajax, and a server side program to record votes.
You could design the page with any look-and-feel. Then add the ajax code to talk to your server-side program and maybe show the user the current votes.
?id=642&point=1
It’s a POST, not a GET, so it could only be done from a form or AJAX, not a simple URL.
//Vote update
$.post(
"http://example.com/folder/vote.php", // url
{ id: 642, point : 1 }, // post-data
function(data){ // response
$("#resultBox").addClass("done"); // show msg
}
);
More reading at http://api.jquery.com/jQuery.ajax/
I have a page which shows a list of items. Page coded with html, css, php and using mysql db.
On that page a user can request to add one of the items to their special list.
I want to do this within the page without having to do a complete page refresh. So user clicks button to add, item is added to their list and button changed so they can't add it again.
Do I use ajax calls to run code behind the page and then refresh the div?
Or is there a better more efficient way to do it.
I'd prefer a php option of possible in case user has js turned off, but don't know if it can be done with using js.
Any help appreciated.
If you want dynamic content (changing the page without refreshing) you are going to have to use Javascript. To do what you are asking, you could call a PHP script via Ajax that outputs the contents of the div with the new item, and then change the div based on that response.
Dagon is exactly right. Create a form which handles the request and set the action of the form to the PHP script you want to handle the request. Note that although this can be the same php script that you use to process your ajax request, it does not necessarily have to be.
Many times when I implement such functionality, I'll set the PHP to send variables as POST (in the event of JS disabled) and have my ajax request as a GET so I can use a single PHP page to handle the 'same' request. When using AJAX, I'll have the script echo a specific code then have the ajax response handle that return.
if(val == 'OK') {
//in event of success, perhaps you want to hide the original form and show a success message
} else {
//do something like unhide a hidden div to display an error
}
If JavaScript is turned off, the page has to be reloaded. In your case jQuery could be very handy and simply rewrite the element you need to rewrite. The server send's a simple json. Using a PHP Framework might also be a good idea, since the way you ask it seems (with respect, and not wanting to offend), that you are not using any framework and might run into falls making your script vulnerable (sql injections for example)
If your visitor doesn't have JavaScript enabled and you want to serve anyways, then you have to do a page reload. First check if that is worth to do, who is your client/visitor, what browser do they use, ... questions like that help you to design your page/app.
I want to put Thumbs up/Thumbs down buttons on my website.
There will be quite a few of them displayed at once, so I don't want to have to do a POST and reload the page every time the user clicks on one.
I thought of using re-skinned radio buttons to choose Thumbs up/Thumbs down, but that would require the user to click a submit button.
So how do I do this? I am open to using JavaScript or some other form of Client-Side scripting, so long as it is built in to most/all web browsers.
Thanks!
YM
I would take a look at using jQuery, http://jquery.com/ It is a WIDELY used library and there is tons of support for it both here and # jQuery's website.
You could easily assign all those thumbs to do an ajax post to a save page with the correct id and the user would not know the difference
You're definitely going to need to use JavaScript on this. Well, there are other client-side languages that could technically do the job (ActionScript, for example), but JavaScript is definitely the best way to go.
Look into AJAX (Asynchronous JavaScript And XML). This is just a buzzwordy way of saying use the XMLHttpRequest() object to make page requests with JavaScript without reloading the page. Here's a good tutorial: http://www.w3schools.com/ajax/default.asp . Note that, despite the word "XML" being in the title, you don't have to use XML at all, and in many cases you won't.
What you'll basically do is this:
Have your thumbs-up and thumbs-down buttons linked to a JavaScript function (passing in whether it's a like or dislike via a function argument).
In that function, send a request to another page you create (a PHP script) which records the like/dislike. Optionally, you can have the PHP script echo out the new vote totals.
(optional) If you decided to have your PHP script output the new results, you can read that into JavaScript. You'll get the exact text of the PHP script's page output, so plan ahead according to that -- you can have the PHP script output the new vote totals in a user-friendly way and then just have your JavaScript replace a particular div with that output, for example.
I am working on a social network website similar to facebook. But, I am facing a rather confusing stage in the programming.
I am done with the register/login/logout pages/scripts, and you can view profiles with the www.mywebsite.com/profile.php.
Now, I want to do what facebook does and allow users to click links while on their profile page (info, notes, photos) but never actually leave www.mywebsite.com/profile.php — just the appropriate content is printed to the screen.
How is this done? I am not asking anyone to code this for me, just point me in the right direction!
You can use Ajax for this purpose.
Put the content that you want to replace in a div and using ajax replace that div and only send that content.
Are you trying to do something like this?
http://www.99points.info/2010/05/how-to-create-dynamic-content-loading-using-ajax-jquery/
That will have to be done via Javascript and Ajax.
A javascript function will fire when the link is clicked. An ajax request is sent to the corresponding php script which sends back a response to your javascript function. You then parse this response and place it on the screen.
If you go that way, have a fallback option that does not rely on javascript as well in case a user has JS turned off.
You Can use this reference...
function showdiv(id)
{
if(id)
{
var selected_offer="yourpagename.php"
HTML_AJAX.replace('divname',selected_offer);
}
}
call showdiv on onChange() function of your link..
For this, you need the technique known as Ajax, which is short for asynchronous JavaScript and XML. The basic idea is that when the user does something - in your case clicks on a link or button - instead of loading a page, a script runs that calls on a server side script to send back some data. This is sometime XML, but you can get other types of data back as well. The asynchronous part is that the user and the page can go on doing other things while waiting on your script to return the data you asked for.
There's a good book for beginners in Ajax that I read myself: Head First Ajax. Looks like you can pick up a used copy for about $10. It's a nice intro, has a quirky style that appeals to some, and the authors do whatever they can to keep your attention. Hardcore programmers probably won't like this one, but I sense you're a little newer to the game and this may be a good read. Otherwise, Google "learning Ajax" and there are a bajillion resources.
Good luck!
To respond to your comment, you can set up a "router" script that takes input and runs a specific function in response. This "router" function looks at the $_GET[] superglobal for a parameter like "action" and then calls a corresponding function. If not action parameter is sent over, the router calls a default function.
Now for a little more detail. Your page script would have 3 basic parts: The router, the various action functions, and the page template function. The router just calls the appropriate function from the action functions and passes the output into the template function. Here are a few examples.
The user arrives on the page, index.php. No action is specified, so the router finds $_GET['action'] == '' and it calls default_action(). This returns a welcome message, status, whatever, and the router passes this output to the function that displays your page, output included.
Now the user clicks a link/button for updates and arrives at index.php?action=update. $_GET['action'] == 'update', so the router calls update_action(). The output goes on to the template function for display.
Does this help you envision how you might accomplish this?
Is it possible to detect when the user clicks on the browser's back button?
I have an Ajax application and if I can detect when the user clicks on the back button I can display the appropriate data back
Any solution using PHP, JavaScript is preferable. Hell a solution in any language is fine, just need something that I can translate to PHP/JavaScript
Edit: Cut and paste from below:
Wow, all excellent answers. I'd like to use Yahoo but I already use Prototype and Scriptaculous libraries and don't want to add more ajax libraries. But it uses iFrames which gives me a good pointer to write my own code.
One of my favorite frameworks for doing this is Yahoo!'s Browser History Manager. You register events and it calls you back when the user returns Back to that state. And if you want to learn how it works, here's a fun blog entry about the decisions Yahoo! made when designing it.
There are multiple ways of doing it, though some will only work in certain browsers. One that I know off the top of my head is to embed a tiny near-invisible iframe on the page. When the user hits the back button the iframe is navigated back which you can detect and then update your page. Here is another solution.
You might also want to go view source on something like gmail and see how they do it.
Here's a library for the sort of thing you're looking for by the way
There's no way to tell when a user clicks the back button of presses the backspace key to go back in the browser, however there are other events that happen in a certain order which are detectable. This example javascript has a reasonably good method for detecting back commands:
The traditional way, however, is to track user movement through your site using cookies or referrer pages. When the user goes to page A, then page B, then appears at page A again (especially when there's no link on B to A) then you know they went back - A can detect this and redirect them or otherwise.
The Yahoo User Interface Library, my personal favorite client-side JS library, has an excellent Browser History Manager that does exactly what you're asking for.
The simplest way to check if you came back to a cached version of your page, which needs to be refreshed, is to add a hidden input element that will be cached, and you can check if it still has its default value.
Just place the following inside your body tag. I place mine right before the end tag.
<input type="hidden" id="needs-refresh" value="no">
<script>
onload=function(){
var e = document.getElementById("needs-refresh");
if (e.value === "yes")
location.reload();
e.value = "yes";
}
</script>
I set a variable $wasPosted in $_SESSION with value false.
All my posts go via the same php file, and set $wasPosted to true.
All header(location:) requests are preceded by setting $wasPosted to true.
If $wasPosted is false then the page was loaded after use of the backward or forward buttons.
The dojo toolkit has functionality to deal with this in javascript. I don't think there is any good way to handle it in pure PHP.
Here is the docs page they have: http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/back-button-undo