Hello guys I have figured it out. It was really hard but I never give up you guys told me to look at the SQL section so I did. It got me some where kind of but I had to play around with the combine scripts for a long time. So in order to combine the pagination script and the search script I had to modify and remove some areas with new structures to bridge the scripts together, No offense to people that put time to try to help me here or people from other chat room websites but Google didn't help me you tube didn't help me and really nobody from this and other forum websites didn't help me neither really. I had to rely on clues and playing around with the code till I got it to work how I wanted it to work but at least you guys made an attempt to try to help me out so thank you very much for putting the effort at least I really appreciate your time and effort, but any ways here's the finished file pagination with search my version.
//INDEX.PHP ignore the svg it's just w3.org search template (optional*)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/i/desktop.css">
<link rel="stylesheet" type="text/css" href="css/i/mobile.css">
<script src="javascript/script.js"></script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-search-13" viewBox="0 0 40 40">
<path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
fill-rule="evenodd" />
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-clear-3" viewBox="0 0 20 20">
<path d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z" fill-rule="evenodd" />
</symbol>
</svg>
<div class="center_search_box";>
<div class="move_search_box";>
<form action="query" method="GET" class="searchbox sbx-google">
<div role="search" class="sbx-google__wrapper">
<input type="search" name="search" dir="ltr" placeholder="Search" autocomplete="off" required="required" class="sbx-google__input">
<button type="submit" title="Submit your search query." class="sbx-google__submit">
<svg role="img" aria-label="Search">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-13"></use>
</svg>
</button>
<button type="reset" title="Clear the search query." class="sbx-google__reset">
<svg role="img" aria-label="Reset">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-3"></use>
</svg>
</button>
</div>
</form>
</div>
</div>
</body>
</html>
//QUERY.PHP combine search and pagination scripts with semi removed structures and new added structures to make the both scripts work together
<?php
$conn = mysqli_connect("localhost","1234user","pw1234","db1234");
//SEARCHX
$output = ' ';
if(isset($_GET['search']) && $_GET['search'] !== ' ') {
$user_input = $_GET['search'];
if ($user_input === "") {
header('Location: '.$_SERVER['PHP_SELF']);
die;
}
//PAGINATION
$user_input = $_GET['search'];
$and = "&";
$pagevx = "page=";
//SEARCHX
$user_input = trim(" $user_input ");
$user_input = preg_replace('/\s+/', ' ', $user_input);
$user_input = mysqli_real_escape_string($conn, $user_input);
$user_input = htmlspecialchars($user_input);
//PAGINATION
$page = mysqli_query($conn, "SELECT COUNT(title) FROM search_i WHERE keywords LIKE '%$user_input%' OR title LIKE '%$user_input%'");
// total row count
$row = mysqli_fetch_row($page);
$rows = $row[0];
// results displayed per page
$page_rows = 1;
// page number of last page
$last = ceil($rows/$page_rows);
// makes sure $last cannot be less than 1
if($last < 1) {
$last = 1;
}
// page num
$pagenum = 1;
// get pagenum from URL if it is present otherwise it is 1
if(isset($_GET['page'])) {
$pagenum = preg_replace('#[^0-9]#', '', $_GET['page']);
}
// makes sure the page number isn't below 1, or more then our $last page
if($pagenum < 1) {
$pagenum = 1;
}
else if($pagenum > $last) {
$pagenum = $last;
}
// set the rage of rows to query for the chosen $pagenum
$limit = 'LIMIT ' . ($pagenum - 1) * $page_rows . ',' . $page_rows;
$page = mysqli_query($conn, "SELECT keywords, images, title, link, description FROM search_i WHERE keywords LIKE '%$user_input%' OR title LIKE '%$user_input%' ORDER BY title DESC $limit");
// establish $paginationCtrls variable
$paginationCtrls = '';
// if more the 1 page
if($last != 1) {
if($pagenum > 1) {
$previous = $pagenum - 1;
$paginationCtrls .= '<a href="'. $row["link"].'?search='.$user_input.$and.$pagevx.$previous.'"><span class="pag_back_arrow"; style="text-decoration: none;"><</a></span> ';
// Render clickable number links
for($i = $pagenum - 4; $i < $pagenum; $i++) {
if($i > 0) {
$paginationCtrls .= '<a href="'. $row["link"].'?search='.$user_input.$and.$pagevx.$i.'">'.$i.'</a> ';
}
}
}
// render the target page number without a link
$paginationCtrls .= ''. $pagenum . ' ';
// render clickable number links that appear on the right
for($i = $pagenum + 1; $i < $last; $i++) {
$paginationCtrls .= '<a href="'. $row["link"].'?search='.$user_input.$and.$pagevx.$i.'">'.$i.'</a> ';
// allows up to 4 pages
if($i >= $pagenum + 4) {
break;
}
}
if($pagenum != $last) {
$next = $pagenum + 1;
$paginationCtrls .= ' <a href="'. $row["link"].'?search='.$user_input.$and.$pagevx.$next.'"><span class="pag_next_arrow"; style="text-decoration: none;">></a></span> ';
}
}
//SEARCHX
?>
<!DOCTYPE html>
<html>
<head>
<title>
Results
</title>
</head>
<meta name="viewport" content="width=device-width">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/query/desktop.css">
<link rel="stylesheet" type="text/css" href="css/query/mobile.css">
<body>
<!-- loading Screen -->
<?php include("loading_screen.php"); ?>
<!-- Search Bar -->
<?php include("x/index.php"); ?>
<?php
//SEARCHX
$c = mysqli_num_rows($page);
if($c == 0) {
$output = '<h2 class="no_results_error_message";><span style="color: red;">No results for:</span><b><span style="color: white;">' . $user_input . '</span></h2></b>';
} else {
?>
<div class="result_section";>
<h2><span class="for_headline">Results For: </span><span id="result_output"><?php $outputx = "$user_input"; print("$outputx"); ?></span></h2>
</div>
<div class="box_template";>
<?php
// shows the user what page they are on, and the total number of pages
$textline1 = "Search_i";
$textline2 = "Page <b>$pagenum</b> of <b>$last</b>";
while($row = mysqli_fetch_array($page, MYSQLI_ASSOC)) {
//SEARCHX
$id = $row['id'];
$title = $row['title'];
$desc = $row['description'];
$images = $row['images'];
?>
<div class="image_and_title_box";>
<div class="image_box";>
<a href="<?php echo $row['link']; ?>"><img id="image_content_inside_box" src="<?php echo $row['images']; ?>"> </a>
</div>
<div class="box_general_text";>
<h2 class="box_title"> <a href="<?php echo $row['link']; ?>"><?php echo $row['title']; ?>
</a>
</h2>
<div>
</div>
<div class="external_box_paragraph";>
<p id="box_paragraph_content";><?php echo $row['description']; ?></p>
</div>
</div>
</div>
<?php
$output .= '<a href="' . $link . '">
</a>';
}
}
} else {
header("location: ./");
}
print("$output");
mysqli_close($conn);
?>
<!-- PAGINATION -->
<!--shows the user what page they are on, and the total number of pages -->
<p><?php //echo $textline1 = "Search_i"; ?></p>
<p id="page_of";><?php //echo $textline2; ?></p>
<div class="pagination_controls"><?php echo $paginationCtrls; ?></div>
</body>
</html>