How do I create a prev/next function for a one page display site?

Question

I'm looking to create a function to display prev-next buttons on the header of a one page site.

$query = "SELECT * FROM `issue` ORDER BY `issue_no` DESC LIMIT 1";

The content for the entire site comes off a primary key in the database titled "issue_no" everything inside issue_no is the content to be displayed on the one page.

if($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo "<article id='date_published'><p>Date published:&nbsp;" . $row['date_published'] . "</p></article>";
        echo "<article id='article_head'>" . $row['article_head'] . "</article>";
        echo "<article id='article_body'>" . $row['article_body'] . "</article>";
        echo "<article id='vidpicks_embed'>" . $row['vidpick'] . "</article>";
        echo "<article id='quote_body'>" . $row['quote_body'] . "&mdash;</article>";
        echo "<article id='quote_auth'>" . $row['quote_auth'] . "</article>";
        echo "<article id='wotd_body'>" . $row['wotd_body'] . "</article>";
        echo "<article id='wotd_desc'>" . $row['wotd_desc'] . "</article>";     
    }
}

This is displayed on index.php

Currently, it displays the latest issue pending on the publish date, but I would like to add the function to go back to previous and next editions.

On top of this, I'd like to rollout all issues inside a dropdown select menu that allows you to select say "Issue 23" and it would link you through to the appropriate content contained in that issue.

Also - how would I go about making sure these each have clean URLs?

e.g. http://www.example.com/issue/023

Any help much appreciated.

I've tried reading up on pagination, but I'm finding it a little complicated to wrap my head around this one.

Thanks.

Answer 1

These code I haven't tested, not stable at all. You have to optimize it.

Function to get data

In PHP:

<?php
$issueno = $_GET["issueno"];
if($issueno == null){
$issueno = 0;
}
$servername = "localhost";
$username = "username";
$password = "password";

$mysqli = new mysqli("localhost", "my_user", "my_password", "world");

if ($mysqli->connect_errno) {
    printf("Connect failed: %s\n", $mysqli->connect_error);
    exit();
}
$query = "SELECT * FROM `issue` ORDER BY `issue_no` DESC LIMIT " + $issueno + ",1";
if($row = mysqli->query($query, MYSQLI_USE_RESULT))
{
/* row is the row selected */
        echo "<article id='date_published'><p>Date published:&nbsp;" . $row['date_published'] . "</p></article>";
    echo "<article id='article_head'>" . $row['article_head'] . "</article>";
    echo "<article id='article_body'>" . $row['article_body'] . "</article>";
    echo "<article id='vidpicks_embed'>" . $row['vidpick'] . "</article>";
    echo "<article id='quote_body'>" . $row['quote_body'] . "&mdash;</article>";
    echo "<article id='quote_auth'>" . $row['quote_auth'] . "</article>";
    echo "<article id='wotd_body'>" . $row['wotd_body'] . "</article>";
    echo "<article id='wotd_desc'>" . $row['wotd_desc'] . "</article>";
}else{
echo "It does not exist";
}
$mysqli->close();
?>

NEXT

In Javascript, by redirecting with a issueno parameter

function next(){
var currentissueno = getQueryVariable("issueno");
if (currentissueno == null){
//Added 1 here as NEXT
currentissueno = 0;
}
//Maximum issues No. OutOfBounds not handled... I have to sleep now
currentissueno++;
//Redirect (should use window.location.href instead of static url)
//window.location = window.location.href + "?issueno=" + currentissueno; 
window.location = "http://www.example.com/index.php?issueno=" + currentissueno; 
}

PREVIOUS

In Javascript, by redirecting with a issueno parameter

function prev(){
var currentissueno = getQueryVariable("issueno");
if (currentissueno == null){
alert("The last previous page");
return;
}
currentissueno--;
//Redirect (should use window.location.href instead of static url)
//window.location = window.location.href + "?issueno=" + currentissueno; 
window.location = "http://www.example.com/index.php?issueno=" + currentissueno; 
}

Function to GET url parameter

Required. From Using the GET parameter of a URL in JavaScript

function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  } 
  return null;
}

Answer 2

You say:

On top of this, I'd like to rollout all issues inside a dropdown select menu that allows you to select say "Issue 23" and it would link you through to the appropriate content contained in that issue.

Assuming (for example) an URL like “http://www.example.com/issue.php?issue=23” (for now postponed the ‘clean’ URL question) you can resolve all questions in this way:

$issueId = $_GET['issue'];

/* 01: Retrieve ALL id */
$result = $con->query( "SELECT GROUP_CONCAT( `issue_no` ORDER BY `issue_no` DESC ) FROM `issue`" );
$allId = explode( ',', $result->fetch( PDO::FETCH_NUM )[0] );

/* 02: Check if $issueId exists and set previous/next id */
$prev = $next = False;
$found = array_search( $key, $allId );
if( $found === False )         $found = count( $allId )-1;
if( $found > 0 )               $prev = $allId[$found-1];
if( $found < count($allId)-1 ) $next = $allId[$found+1];

/* 03: Retrieve current issue: */
$result = $con->query( "SELECT * FROM `issue` WHERE `issue_no` = '{$allId[$found]}'" );
$row = $result->fetch_assoc();

/* 04: Output previous/next page link: */
if( $prev !== False ) echo "<a href=\"?issue=$prev\">Prev Page</a>";
else                  echo "<span class=\"inactive\">Prev Page</span>";
if( $next !== False ) echo "<a href=\"?issue=$next\">Next Page</a>";
else                  echo "<span class=\"inactive\">Next Page</span>";

// Your code from here

Code above is only as example. By this way, all issue_no are stored in $allId variable, so you can easy implement also the dropdown menu. The issue_no fields are retrieved in descending order, if you prefer ascending you can change first query (#01) in ORDER BY issue_no ASC.

Note that if the user don't ask for any specific issue (i.e. calling http://www.example.com/issue.php), the current issue is set to first array value of $allId (#02): if you prefer to produce an alert like “This issue doesn't exists” you have to modify the script in this way:

$found = array_search( $key, $allId );
if( $found === False )
{
    // Your error routine here
}
else
{
    if( $found > 0 ) $prev = $allId[$found-1];
    (...)
}

In the output of previous/next page URLs (#04), I use a basic <a href> tag, but you can use buttons.

Clean URLs

I strongly recommend to produce first a full working code ignoring the ‘clean’ URL question. Then, all you will need to change will be only one row.

By the way, to activate clean urls, you have to modify the .htaccess file of your site in a way like this:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^issue/.*$ /issue.php [NC,L]
</IfModule>

then, in your issue.php script, you have to change $issueId = $_GET['issue']; with:

$issueId = array_pop( explode( '/', $_SERVER['REQUEST_URI'] ) );

This RewriteRule is only an example, actually I think you are interested in clean URLs for all your site, so the best solution can be to redirect all incoming URLs to a redirect.php that process the REQUEST_URI and include appropriate page or echoes ‘Not Found’ message.

Here you can find more about basics on RewriteRule