It is very beneficial to manipulate the data on the website, by which users also visit other pages of the website. If you have to change the next and previous data row of the MYSQL database by buttons, then you have to create two buttons. Next and previous buttons can be easily created by PHP and MYSQL, so that if a user wants to see the next row data from the same data page, then click on the Next button and if the user wants to get previous page data, then click on the previous button. The Next and Previous buttons are created using HTML and CSS, with functionality created by the PHP and MYSQL database.
i.e - You may have seen in the blog website or other website that there are next button for the next post or page (Next row data) and previous button for the previous post or page (Previous row data).
We create the next and previous button on the PHP website for a change row data like the next row from the current row and the previous row from the current row.
How to create Next and Previous buttons in PHP –
We have discussed above the functional part. Here, we are going to implement that process.
To create the next and previous button on a blog website or another website, HTML table, etc you have to manage data into the database. Here, we will use the example of a simple website and will create next and previous buttons steps wise using PHP and MYSQL.
1. Create an MYSQL Database –
All the data on the website is stored in the database. Databases can be created by any name. Create a table in the database whose data will manipulate the rows with the Next and Previous buttons.
CREATE TABLE `webdata` (
`id` int(11) NOT NULL,
`title` text NOT NULL,
`content` longtext NOT NULL
);
In the table above, we have created three simple columns.
Id – Unique id for each row.
Title – Title of the website page or blog post ( Column 2 )
Content – Body content about page or blog post content (column 3 )
Let's insert some data into the MYSQL database table -
INSERT INTO `webdata` (`id`, `title`, `content`) VALUES
(1, 'Web page title 1 ', 'Web page content 1 '),
(2, 'Web page title 2', 'Web page content 2 '),
(3, 'title 3', 'content 3'),
(4, 'title 4', 'content 4 '),
(5, 'page 5', 'body content 5'),
(6, 'page 6 ', 'body content 6 '),
(7, 'web page 7', 'web page content 7'),
(8, 'web page title 8', 'web page content 8'),
(10, 'Website page 10', 'website page content body 10');
2. Create a connection PHP file –
As you know that the connection file is used to create a connection between the MYSQL database and PHP pages. Let’s create a connection file name as config.php
<?php
$databaseHost = 'localhost';//or localhost
$databaseName = 'tutorials'; // your db_name
$databaseUsername = 'root'; // root by default for localhost
$databasePassword = ''; // by defualt empty for localhost
$mysqli = mysqli_connect($databaseHost, $databaseUsername, $databasePassword, $databaseName);
?>
3. Creating the main page
After creating the connection file, we create the main page. The main pages of the website are known as the index page. Here we creating an example of a PHP blog website while loop fetch and display the MYSQL database
Index.php
<?php
require_once("config.php");
?>
<!DOCTYPE html>
<html>
<head>
Next and Previous Buttons in PHP website - Techno Smarter
</head>
<body>
Website pages in List
<?php
$result = mysqli_query($mysqli, "SELECT * FROM webdata ORDER BY id DESC");
while($row = mysqli_fetch_array($result)) {
echo ''.$row['title'].'
On this page, we have only fetched and displayed the data. If you notice, we have created links through show.php and id. When a user clicks on any title, the data related to that title will be displayed on the show.php page. Fetch and display unique data by ID. Next and previous buttons are created using the ID .
4. Fetch and display data related to the web page title.
When a user clicks on a title, all the data related to that title will be displayed on the show page. Each page title (row) contains a unique id. The data is displayed using a unique title (row id). We will create the next and previous button below the title and content.
Next Button - We use current page id and create a condition for the next page or next row data.
SELECT * FROM table_name WHERE id>$id order by id ASC
In the query above, you can see that we are selecting data from the database with a condition.
Condition WHERE id>$id –
Meaning – The current page id is less than the selecting id. In simple words, we are fetching row id that is greater than the current page id.
Selecting_id>current_id
Order by ASC – Order should be ascending.
Previous Button- The previous button mechanism is the opposite of the next button mechanism.
SELECT * FROM table_name WHERE id<$id order by id DESC
In the query above, you can see that we are selecting data from the database with a condition.
Condition WHERE id<$id –
Meaning – The current page id is greater than the selecting id. In simple words, we are fetching row id that is less than the current page id.
Selecting_id
Order by ASC – Order should be Descending.
Show.php
<?php
require_once("config.php");
$id = $_GET['id'];
?>
<!DOCTYPE html>
<html>
<head>
Previous and Next page buttons in PHP website with MYSQL database
</head>
<body>
<?php
$result = mysqli_query($mysqli, "SELECT * FROM webdata WHERE id=$id");
if($row = mysqli_fetch_array($result))
{
$title = $row['title'];
$content = $row['content'];
}
?>
<?php echo $title;?>
<?php echo $content;?>
<?php
// Next button
$next = mysqli_query($mysqli, "SELECT * FROM webdata WHERE id>$id order by id ASC");
if($row = mysqli_fetch_array($next))
{
echo '
Disabled ';
}
// Previous button
$previous= mysqli_query($mysqli, "SELECT * FROM webdata WHERE id<$id order by id DESC");
if($row = mysqli_fetch_array($previous))
{
echo '
Disabled ';
}
?>
In the PHP code above –
GET id by PHP GET variable and save in a variable.
Fetch and display data by that id variable.
Create two buttons.
PHP If condition If the row is last then the next button disappears (Hide) because there is no next row.
If the row is first then the previous button disappears (Hide) because there is no previous row.
In the code above, we have used CSS class for the buttons.
Let’s create a CSS class.
Use CSS stylesheets and execute the code.
Recommended Posts:-
