add page functionality

website/public/styles/search.css

@@ -15,3 +15,15 @@
     display: inline-block;
     vertical-align: top;
 }
+
+.user-pageselect, .searchleft h4, .group-pageselect, .searchright h4 {
+    display: inline-block;
+}
+
+.user-pageselect, .group-pageselect {
+    float: right;
+}
+
+li.search-item:hover{
+    background-color: #EEE;
+}

website/queries/group_page.php

@@ -194,4 +194,22 @@ function searchSomeGroups($n, $m, $search) {
     $stmt->execute();
     return $stmt;
 }
+
+function countSomeGroups($search) {
+    $stmt = $GLOBALS["db"]->prepare("
+    SELECT
+        COUNT(*)
+    FROM
+        `group_page`
+    WHERE
+        `name` LIKE :keyword
+    ORDER BY 
+        `name`
+    ");
+
+    $search = "%$search%";
+    $stmt->bindParam(':keyword', $search);
+    $stmt->execute();
+    return $stmt;
+}
 ?>

website/queries/user.php

@@ -273,7 +273,8 @@ function selectRandomNotFriendUser($userID) {
     return $stmt->fetch();
 }
 
-function searchSomeUsers($n, $m, $search) {
+function searchSomeUsers($n, $m, $search)
+{
     $stmt = $GLOBALS["db"]->prepare("
     SELECT
         `username`,
@@ -301,3 +302,25 @@ function searchSomeUsers($n, $m, $search) {
     $stmt->execute();
     return $stmt;
 }
+
+function countSomeUsers($search) {
+    $q = $GLOBALS["db"]->prepare("
+    SELECT
+        COUNT(*)
+    FROM
+        `user`
+    WHERE
+        `username` LIKE :keyword OR 
+        `fname` LIKE :keyword OR 
+        `lname` LIKE :keyword
+    ORDER BY 
+        `fname`, 
+        `lname`, 
+        `username`
+    ");
+
+        $search = "%$search%";
+        $q->bindParam(':keyword', $search);
+        $q->execute();
+        return $q;
+}

website/views/search-view.php

@@ -1,6 +1,16 @@
 <?php
 $search = "";
 $filter = "all";
+$user_perpage = $group_perpage = 20;
+$user_currentpage = $group_currentpage = 1;
+
+if (isset($_GET['user-pageselect'])) {
+    $user_currentpage = $_GET['user-pageselect'];
+}
+
+if (isset($_GET['group-pageselect'])) {
+    $group_currentpage = $_GET['group-pageselect'];
+}
 
 if (isset($_GET['search'])) {
     $search = test_input($_GET['search']);
@@ -9,18 +19,26 @@ if (isset($_GET['search'])) {
 if (isset($_GET['filter'])) {
     $filter = $_GET['filter'];
 }
+
+$user_n = ($user_currentpage - 1) * $user_perpage;
+$user_count = countSomeUsers($search)->fetchColumn();
+
+$group_n = ($group_currentpage - 1) * $group_perpage;
+$group_count = countSomeGroups($search)->fetchColumn();
 ?>
 
 <div class="content">
     <div class="platform">
-        <form class="search-form" action="search.php" method="get">
+        <form class="search-form"
+              id="search-form"
+              action="search.php"
+              method="get">
             <label>
                 Zoek:
             </label>
             <input type="text"
                    name="search"
                    placeholder="zoek"
-                   required
                    value=<?php echo "$search";?>
             >
             <label for="filter">
@@ -40,17 +58,36 @@ if (isset($_GET['filter'])) {
                     <?php if ($filter == "friends") echo "selected";?>>
                     Vrienden</option>
             </select>
-            <input type="submit"
+            <input onclick="document.getElementById('user-pageselect').value = 1;
+                            document.getElementById('group-pageselect').value = 1"
+                   type="submit"
                    value="Zoek"
-            />
+            >
         </form>
     </div>
     <div class="platform item-box searchleft" id="search-friends-output">
         <h4>Gebruikers</h4>
+
+        <select class="user-pageselect"
+                name="user-pageselect"
+                id="user-pageselect"
+                form="search-form"
+                onchange="this.form.submit()">
+            <?php
+            for ($i=1; $i <= ceil($user_count / $user_perpage); $i++) {
+                if ($user_currentpage == $i) {
+                    echo "<option value='$i' selected>$i</option>";
+                } else {
+                    echo "<option value='$i'>$i</option>";
+                }
+            }
+            ?>
+        </select>
+
         <ul class='nav-list'>
 
         <?php
-        $q = searchSomeUsers(0, 20, $search);
+        $q = searchSomeUsers($user_n, $user_perpage, $search);
 
         while ($user = $q->fetch(PDO::FETCH_ASSOC)) {
             $username = $user['username'];
@@ -59,7 +96,7 @@ if (isset($_GET['filter'])) {
             $lname = $user['lname'];
 
             echo("
-                <a href='https://myhyvesbookplus.nl/profile/$username/'>
+                <a href='https://myhyvesbookplus.nl/profile?username=$username'>
                     <li class='search-item'>
                         <div class='friend'>
                             <img class='profile-picture' 
@@ -77,17 +114,34 @@ if (isset($_GET['filter'])) {
 
     <div class="platform item-box searchright" id="search-group-output">
         <h4>Groepen</h4>
+
+        <select class="group-pageselect"
+                name="group-pageselect"
+                id="group-pageselect"
+                form="search-form"
+                onchange="this.form.submit()">
+            <?php
+            for ($i=1; $i <= ceil($group_count / $group_perpage); $i++) {
+                if ($group_currentpage == $i) {
+                    echo "<option value='$i' selected>$i</option>";
+                } else {
+                    echo "<option value='$i'>$i</option>";
+                }
+            }
+            ?>
+        </select>
+
         <ul class="nav-list">
 
         <?php
-        $q = searchSomeGroups(0, 20, $search);
+        $q = searchSomeGroups($group_n, $user_perpage, $search);
 
         while ($group = $q->fetch(PDO::FETCH_ASSOC)) {
             $groupname = $group['name'];
             $grouppic = $group['picture'];
 
             echo("
-            <a href='https://myhyvesbookplus.nl/group/$groupname/'>
+            <a href='https://myhyvesbookplus.nl/group?groupName=$groupname'>
                 <li class='search-item'>
                     <div class='group'>
                         <img class='group-picture'