how to create next/previous buttons to query MySQL rows by date? - php

Question

I assume, I need Ajax and jQuery to show new data based on date after clicking a button.
What I want to do is something like this:
<< January 15................today: January 16..............January 17 >>
Data4
Data5
Data6
When I click "January 17" data 4-6 should change to data 7-9 because data 7-9 is added to the MySQL database on January 17.
Of course I have a code to query the database and show today's data, but I am going crazy about not being able to reload the page with new data.
I tried to search the whole internet, but nothing I can find fits my needs.

Answer 1

Your question has a lot of sides to it. This answer's solely purpose to demonstrate how front end, back end and persistence layer communication works.
DO NOT USE THIS IN PRODUCTION! THIS CODE IS SHITTY AND FOR DEMO PURPOSES ONLY!
Modern web applications are not implemented like this. Front end frameworks/libraries are commonly used to keep complexity manageable.
First of all your back end should provide an API to the front end.
Lets assume your back end accepts the following HTTP GET request:
www.example.com/users/list_by_date/20150131
The last parameter is a date in YYYYMMDD format. Upon receiving this request, your back end sends a pre-rendered HTML snippet containing a list of users from that date. (Nowadays front end side rendering is quite popular and you should look into that topic as well. In this case your back end sends a list of users in JSON format which is then rendered on the front end side using templates. Adding code for this would make example even more complex).
In order to get this list of users, you initiate an AJAX request from the front end when a user clicks on a next-day button (which in your example contains "January 17"). Furthermore, you need to replace a list of currently shown users from January 16th with the new ones. Lets assume that list has a class attribute .users in HTML code. Here is a front end code using jQuery:
$(function() {
$(document).on('click', '.next-day', function() {
$.getJSON("/users/list_by_date/20150131", renderResults);
});
function renderResults = function(data) {
$('.users').html(data); // replaces old contents with the new ones received from server
};
});
You should also update prev/next link titles to the next dates, January 16th and January 18th respectively.
On the back end side, you execute a SQL statement to fetch a list of users. It could look something like this:
SELECT * from Users where DATE(datetimecolum) = '2015-01-17'
The exact way to put an attribute into a SQL query varies among programming languages/frameworks.
This should help you start working on your own solution. You probably should at least consider a front end framework/library to help you manage the complexity. You might want to spend a few days or even weeks getting familiar with front end technologies before attempting to implement a good solution on your own. It might be more cost efficient to hire a front end developer.

Answer 2

I did it on my own and the code actually were 5 lines.
I needed 2 days. Somebody who knows it, could have written it up in 2 minutes. So thanks for all the fish!
Here is the code, if somebody ever needs something like this:
The code for determining the very last date available (which I had already):
$query = mysqli_query($bd, "SELECT MAX(datum) as max_datum, MIN(datum) as min_datum FROM apps WHERE price = 0 ") or die(mysqli_error());
$maxdate = mysqli_fetch_assoc($query);
$maxdate = $maxdate['max_datum'];
$mindate = $mindate['min_datum'];
The actual code I was looking for to display two links for next and previous days (without design):
$date = isset($_GET['date']) ? $_GET['date'] : $maxdate;
$prev_date = date('Y-m-d', strtotime($date .' -1 day'));
$next_date = date('Y-m-d', strtotime($date .' +1 day'));
if ($date < $maxdate) {
echo "<a href=?date=$next_date>forward a day</a>";
}
if ($date > $mindate) {
echo "<a href=?date=$prev_date>back a day</a>";
}
The code executing the data which I had already:
$result = mysqli_query($bd, "SELECT * FROM apps WHERE datum = '".$date."' AND price = 0 ") or die(mysqli_error());
$count = mysqli_num_rows($result);
echo "<div id='icon-wrapper'>";
$cc = 0;
while ($row = mysqli_fetch_array($result)){
...
$cc++;
if ($cc < $count) {
echo "\n";
}
}
echo "</div>";
mysqli_close($bd);
?>