PHP, JS View Counter and Save - javascript

I try to make a view counter in js for my webpage.
When you view the page, the counter will increase with 1.
The counted numbers are displayed.
But one thing is not working: When I view the website from another device, the counter starts at 0.
So I used localStorage to store the data. But I want when I see the page from my laptop, the counter increases by one. And when I view the page from my phone the counter should already show the number one and should increase it with one ,so the counter will be 2.
I don't know how to make it workable. It's only done with LocalStorage. I thought I should save the data, by storing the data in a .txt file, but it does not work because when the filewriter save the datas (1) into the file, it will save the next view (1) next to the previous number. And if I want to add the current number to the previous it will show number 1.
Here's my code:
var n = localStorage.getItem('profile_1_tech.html');
if (n === null) {
n = 0;
}
n++;
localStorage.setItem("profile_1_tech.html", n);
document.getElementById('counter').innerHTML = n;
<span><span id="counter"></span> Views</span>
So I need to result be added (1 view + 1 view for each view), and all the user can see the same number.

The JavaScript LocalStorage API is only meant to be used on one device, and using the SessionStorage API would be of even less use because that memory is cleared as soon as the tab is closed.
As your question tag has PHP included what you can do is create an account system that increments a value that you would store in a SQL table using PHP, and every time a user creates an account you would create a new "views" field just for them.
However if you are trying to use a view counter for analytical purposes to see how many people use your website then I can suggest using Google Analytics because it is free and requires very minimal code as opposed to my aforementioned "account system" approach with storing the views in a database with PHP.

Related

How much data is a lot for ajax php mysql?

I am creating a system that will track some information about the web page the users that will come to my web page, basically I am using Java Script Ajax to call PHP functions that will store/ update information in my mysql database (phpmyadmin) using Xampp.
Among those function I am sending every
"x" seconds the info if the user is my web page or not. Basically I update the "page" the user is and the "time" in the page until now, that would be like the previous time plus "x" seconds.
"y" seconds I use heat map to get the position of the mouse using ev.pageX and ev.pageY. Once again I update that in the database.
Every time the user clicks a button I also store that In my database.
I am currently using "x" = 5 seconds, and "y" = 0.1 seconds I allow the function that will get the points to send to the database or not, the the function is body.onmousemove = function (ev).
I would like to know if I will have problems with my website such as low speed. And also I would like to know if my mysql phpmyadmin xampp will be able to handle lets say 100 users online at the same time sending data to the database.
If I have any complications with that method, what should I do to improve the code and the strategy to store the data?
Thank you all for your time!

get changes by other users in MS Access

Is this possible?
To know data changed by other users in realtime without requery or refresh on MS Access.
I'm developing user forms in HTML & Javascript and using MS Access as back-end DB.
Three or four users always keep opening the form.
I want to refresh and display other user's changes into the form in real-time, like SQLserver's SqlNotificationRequest or Ajax with php.
I allowed only using MS Access and HTML with JS on intranet, due to an authority.
Is there no way but using timer function with refresh or requery in JS?
You can't do it in real time; you will have to fake it. Decide what is an acceptable lag in the information update (5 seconds? 30 seconds?) and set up a timer on your front end.
When the data is modified on your database is there logging/audit? Do you keep a timestamp? If yes, you can use that to check for new changes. If not, just create a single record, single field table to store the last modification timestamp. Or if you have a generic parameter or global values stable, add one more record there. Make sure anything on your front end that alters data updates this timestamp field.
Then your front end's timer function can check the last update timestamp and compare it with its own last update timestamp (which you stored locally on the previous timer event) and see if it needs to refresh the data or not.

Using Global Variables between multiple functions in JQuery?

I want to dynamically load an image using jQuery like this:
main.js
var slidersrc=""; //try to define global variable - not sure if this is correct
jQuery(document).ready(function() {
jQuery("#sliderimg").attr('src', slidersrc);
});
jQuery("#selection1").click(function() {
slidersrc='wp-content/themes/*****/slide1.png';
});
So the first time user access my website, the slider is empty. After user clicks on one of the selection areas, I set the global variable value. Then if user continues to navigate at my website to different pages, the user should be shown a slider image as a result of his selection.
However, this doesn't appear to work.
Am I correctly using the global variable in jQuery? Or is there a better way to save the user selection value in client side?
thanks!
Global variables do NOT survive from one page to the next. Each page starts an entirely new javascript context (all new global variables, functions, etc...).
If you want to save state from one page to the next, your options are:
Put the data in a cookie which you can read from each successive page when that page loads.
Put the data in a browser local storage which you can read with javascript from each successive page when that page loads (recommended option).
Store the data on the server and embed it in each page as it is served from the server.
You can read about how to read and write from browser LocalStorage here and here.
If you're planning on changing the slider image each time the user clicks, then perhaps you want to save an index into an image array in local storage. When the page loads, you read the current index from localStorage (or supply a default value if no value exists in local storage), then write back the current value to localStorage for the next page. If the user takes some action that causes the index to update to a new value, then you update your page and then write that new index into localStorage so the next page can read it from there and so on.
LocalStorage is a similar concept to cookies, but it's a bit easier to manage and more efficient (the data is not sent to the server with every page request).

Passing a variable from one page to the next page

I am developing a Question & Answer website where a user is presented five puzzles on a page and the score is calculated using JavaScript as he attempts the questions on the page. The score is saved in a Javascript variable score. I have a paging system like this:
Now when the user clicks on 3 I want to send the variable score to the next page, where I have require scoreUpdateInDatabase.php on each such page such that the score of previous page is made permanent to the databse and the following PHP script presents him the next 5 questions.
How can I pass that score variable in secure way? I can't use GET because the user will modify it. I am satisfied with POST if this can be used, even though POST data can be modified but I just want minimal security.
P.S. Please do not suggest making AJAX call where in one side I will send score and while returning carries next 5 questions. I don't want to use AJAX to refresh content because it is not SEO friendly.
The simplest solution would be cookie based. Writing the value to a session cookie and the reading it.
You could use jquery cookie. It also gives you the option to require https if desired.
Save it in a session. POST would work equally well in this particular case but my preference would be storing it in the session.
The only secure way to do this is to pass the actual answers to the server using a POST or AJAX, do the calculation of the score also on server side and keep it in a SESSION variable.
More information on sessions in PHP
Try looking into Jquery - You should be able to return the value to the server scripting language (as you listed PHP as a tag, I assume you're using PHP). By using Jquery, you can get the javascript variable to the form BEFORE submitting the form to the next page.
Assuming you have used PHP to generate the form to submit initially rather than create the form in javascript. I would use Jquery - to get this file ( http://jquery.com/ ) and to include("jquery.js"); etc... in your PHP script for it to be used.
I would then convert the javascript variable(s) to a php variable and assign this to a hidden field in the form to be submitted to the next page using a $_POST[] variable.
However It will not be SEO friendly (POST and SESSION is not SEO friendly, but you should use them, continue reading)
We are talking of a game. No-one want that the Search engine index the last page of a game... because everyone can search on google (for example) for the last page of your game without playing.
You have to use ajax or post, but don't let google index every page of your game. It's nonsense.
Only the first page of your game should be indexed.

How can I create this simple alert in javascript?

I am creating a simple website using HTML and JavaScript in dreamweaver. On my home page, I want to show an alert (whenever my home page loads), which says that "Hello, you are visitor no. 12. Welcome to my site!". I want this visitor number to change on every page load of home.html.
I basically want the visitor no. to be stored in a cookie and increase the no. by 1 in the cookie every time the page refreshes.
How can I create such an alert? Please help. Thanks.
Also, I want to know if I add this functionality, would it be an example of dynamic content on a web page or do you HAVE to create database connections and all in order to create dynamic content. Wouldn't this idea of creating cookie also an example of dynamic content?
Edit-1
I want that only. How many times page was visited. I am a beginner and want it all simple. I just want to know how I can store the no. of visits in a cookie and then retrieve that value from that cookie and show it in an alert on page load. Thanks.
If you want to store the number of visitors, you'll need to use a backend scripting framework (PHP, Ruby, Rails, Python, etc) to store the number of visits your page has received in a database. The javascript of displaying the actual number is simple, with alert('message');
If you just want the number of times that specific user has visited, based on their local information, here's a simple solution:
if (localStorage.numVisits)
numVisits = localStorage.numVisits;
else
numVisits = 0;
alert("Welcome, you have visited " + numVisits + " times before.");
localStorage.numVisits++;
To make it really simple for you (without using the database) you can store the number in a .txt file in the server, and use a simple scripting language like PHP to send it in a hidden field to the client. Every time the PHP page runs, it will have to get the current number and increment it. Something like this:
$myFile = "counter.txt";
$fh = fopen($myFile, 'r');
$count = fgets($fh);
$count++;
fclose($fh);
$fh = fopen($myFile, 'w');
fwrite($fh, $count); // write the incremented counter
fclose($fh);
echo "<input type='hidden' id='counter' value='$count'>";
Then, you would have to get this counter value from the javascript (client side) and alert to the user.
var visitCount = document.getElementById('counter');
alert("Hello, you are visitor no. "+visitCount+". Welcome to my site!");
A Cookie is always Client-sided! You can't do it that way. The easiest way to accomplish what you are looking for is to write a simple php counter which reads a number from a file - adds one and writes it back as soon as your page is viewed.
Check google for examples on "counters".
There actually is no way to count clientsided ALL the visitors you have or had - the client can't know that your server was visited x times ;)
for that you need to create the table and every time when session is start u need to increase +1 in there table and alert the visitor no.
table like
id : no
-------
1 : 3
2 : 5
and massage like
echo "
<script type=\"text/javascript\">
alert(\"Hello, you are visitor no. {$row["no"]}. Welcome to my site!\");
</script>
";
You cannot keep a global page view count in a cookie. A cookie is stored in one user's browser and is local only to that browser. All a cookie could show would the page views that occurred in that one single browser.
Page view counts across all viewers must be done at the server level and then the information put into the page when the page is requested. There are some free ways to put page view counts into the page using the free service level of services like StatCounter.
Or, you'd have to implement a counter in your own server that was serving the page (with the count probably stored in a persistent database) and then insert the current count into the page each time it is requested. For just page count information, it's probably easiest to just go with a service like Statcounter.
Cookies are not persistent across different visitors. To give every visitor a visitor number, you need something stored on a server. If you cannot access server-side functions, use a visitor counter - https://www.google.com/#hl=en&q=visitor+counter

Categories