I am working on a very extensive project but I have products to present but the page project is still being developed.
Then I have thought of creating a single indexed design, say the following template , but when the date arrives, enable a page for its acquisition or other data of interest to me.
I have already done the following:
$(function(){
var calcNewYear = setInterval(function(){
date_future = new Date(new Date().getFullYear() +1, 0, 1);
date_now = new Date();
seconds = Math.floor((date_future - (date_now))/1000);
minutes = Math.floor(seconds/60);
hours = Math.floor(minutes/60);
days = Math.floor(hours/24);
hours = hours-(days*24);
minutes = minutes-(days*24*60)-(hours*60);
seconds = seconds-(days*24*60*60)-(hours*60*60)-(minutes*60);
$("#time").text("Time until new year:\nDays: " + days + " Hours: " + hours + " Minutes: " + minutes + " Seconds: " + seconds);
},1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="time"></div>
But doing it in the following way would not be enough, because this information is at the client's side and this could be modified or the date of our computer changed.
To say there are 3 days left to enable this product, I change the date of my computer advancing those 3 days and the information that should not be displayed yet, the information would be displayed correct me if I'm wrong
Then it is possible to combine the code
javascript time
withPHP/MYSQLI
Take the date from a database of when the page will be enabled and, through PHP, send the date from the server to the Javascript code and not from the client, and when the date is reached, display the desired information through PHP.
If there is content that you don't want to display until a certain condition is met, never leave it client-side . If the validation is on the client, it's not secure, no matter what you do it can always break. The server is the one that has to perform this validation, and offer the content when the condition is met (in this case, after a date).
So, these are the steps from when a user requests the page:
On the server: get page according to date.
If it is less than the
fecha
, show thePágina A
. Go to point 2.If it is greater than or equal to the
fecha
, show thePágina B
. Go to point 3.On the client:
Página A
.In this way, we return to point 1, where the server evaluates if it really is the date and delivers the corresponding page, regardless of whether the client has the date right or wrong.
On the client:
Página B
.You see the new product and can purchase it.
There's no countdown in the code, avoiding problems if it's already the date but the user has a clock running slow that would cause it to keep displaying the countdown.
1. On the server. Show the correct page.
If the user accesses
index.php
, from the code of that script you would show the content of page A (cuentaregresiva.php
) or, if it is already the date, the content of page B (comprarproducto.php
).This would be the code in
index.php
:No HTML code is required on this page. The HTML goes on Pages A and B.
Make sure the server is up to date.
With this, it doesn't matter if the client's date is wrong and the countdown is wrong. It will not access Page B until your code on the server delivers it.
2. On the client: Page A. Update when launch.
The file
cuentaregresiva.php
is going to have your JavaScript code with the countdown.But to automatically refresh the page on launch, no JavaScript code is required. It can be done with the header
Refresh
, which tells the browser in how many seconds to refresh. From PHP it is configured like this:The seconds until the refresh is being determined by the server. With this we avoid any calculation of hours in JavaScript.
This code has to go to the beginning of your file, and there can't be any spaces, or anything, before opening the tag
<?php
, because we're using aheader()
.3. On the client: Page B. Show the product.
comprarproducto.php
No code is needed in the file . You can directly show the product and ask them to buy it.4. Goodies
Assign the
$fechaHoraLanzamiento
PHP one to a JavaScript variable . In your countdown JavaScript code, you were using thedate_future
. To assign it the correct value when the script loads, we print it from PHP directly in the code:Get the date from the server. If you are still interested in getting the current date from the server from JavaScript, to synchronize the countdown, we make an AJAX call that shows us the header
Date
when requesting the current page again (the same one we are on).No extra server-side code is required. It's making a request
HEAD
, and it gets the value of the response header, so it works on any page, with nothing to do on the server.However, this is not something recommended to do continuously.
It's no good that your page is continually downloading another page (even if it's just the header, not the HTML). Nobody likes pages that continually use the internet connection. In addition, you will always have a delay of how long it takes for your server to respond (which can be a long time if a connection is very bad).
If you're going to use it, I'd recommend doing it just to verify that the client's time isn't out of date. You could check that there is no difference of more than 2 minutes for example. That is, only use the server date if the client date is seriously wrong. And once you got the date from the server, save that difference to add or subtract to the date from the client, but don't keep querying it (well, maybe updating every 10 minutes for example, but not continuously).
Taking the code from just, to see if it's out of date. Once we got
horaServer
:When the client date is not out of date, I recommend using the client date, not the server date.
Do you want to try it? I uploaded this code to a free hosting (modify the parameter value to try different release dates):
http://mariano.uphero.com/132163/?fechalanzamiento=2018-02-01+00:00
Prevent someone from directly accessing the product. Page B (
comprarproducto.php
) is not at a URL that the user will ever see. However, it is recommended that you configure the permissions/rules so that it cannot be accessed directly (but if it is difficult for you, it could be in a URL that you never share with anyone - it is not the best but sometimes it is enough).AJAX so you don't have to refresh the page. This same procedure that we used in point 1, can be easily adapted to an AJAX call when it is the release date. In this way, it would be more pleasant for the user, you would only get the content of the new product if the server returns it to you, and it would be displayed in a div of the page without having to update it.
Get the correct page from the .htaccess
This is an alternative to point 1. I don't think it's the best for your case, but I mention it. If you're on an Apache server, you might be able to avoid the PHP code to update. You would just have to generate a text file with the name
.htaccess
(yes, the period at the beginning, without an extension) and place it in the root of the folder where page A and B are.For example, if you want to access , these 3 lines would go
http://misitio.com/nuevoproducto
in the file :nuevoproducto/.htaccess
There is another question that deals with this in more detail: Redirection from .htaccess from a date? . However, for this alternative, the date must be entered manually and cannot be obtained from a database from the .htaccess.
Oh, if it hadn't been clear at first...
Sensitive validation rules always on the server side
you could do it with ajax
time.php
index.php