website/public/API/loadChatNotifications.php

@@ -0,0 +1,8 @@
+<?php
+
+session_start();
+
+require_once ("../../queries/connect.php");
+require_once ("../../queries/friendship.php");
+
+echo selectAllUnreadChat();

website/public/js/admin.js

@@ -28,7 +28,7 @@ function checkCheckAll(allbox) {
 }
 
 function changeFilter() {
-    if (document.getElementById('group').checked) {
+    if ($('#pagetype').find(":selected").val() == "group") {
         document.getElementById('admin-filter').style.display = 'none';
         document.getElementById('admin-groupfilter').style.display = 'inline-block';
 

website/public/js/header.js

@@ -1,26 +1,18 @@
 $(document).ready(function() {
-    // Hide notification center.
-    $("#profile-menu-popup").hide();
-
-    // $("#own-profile-picture").click(function() {
-    //     $("#profile-menu-popup").toggle();
-    //     $("#profile-hello-popup").toggle();
-    // });
-
     $("#own-profile-picture").click(function() {
         if($("#notification-center").css('right') == "-256px") {
             $(".content").animate({
                 marginRight: "256px"
             }, 500);
             $(".chat-right").animate({
-                width: "100%"
+                width: $(".chat-right").width() - 266
             }, 500);
             $("#notification-center").animate({
                 right: "0px"
             }, 500);
         } else {
             $(".chat-right").animate({
-                width: "100%"
+                width: $(".chat-right").width() + 266
             }, 500);
             $(".content").animate({
                 marginRight: "0px"

website/public/js/notifications.js

@@ -1,7 +1,7 @@
 function showNotifications(notifications, id) {
-    $("#friendrequestslist").html("");
+    $("#" + id).html("");
     for (i in notifications) {
-        $("#friendrequestslist").append(" \
+        $("#" + id).append(" \
             <li class='friend-item $extraItem'> \
                 <form action='profile.php' method='get'> \
                     <button type='submit' \
@@ -20,15 +20,25 @@ function showNotifications(notifications, id) {
 
 function loadNotifications() {
     $.post(
-        "API/loadNotifications.php"
+        "API/loadFriendRequestNotifications.php"
     ).done(function(data) {
         if (data && data != "[]") {
             showNotifications(JSON.parse(data), "friendrequestslist");
         }
     });
+    $.post(
+        "API/loadChatNotifications.php"
+    ).done(function(data) {
+        if (data && data != "[]") {
+            showNotifications(JSON.parse(data), "unreadChatlist");
+        }
+    });
 
     setTimeout(loadNotifications, 10000);
 }
-
+$(document).ready(function() {
     loadNotifications();
+});
+
+
 

website/public/styles/adminpanel.css

@@ -1,71 +1,33 @@
 .admin-panel {
-    margin: auto;
     min-width: 800px;
 }
 
-.admin-title {
-    margin: 10px;
-    padding-bottom: 5px;
-    border-bottom: 4px solid #FBC02D;
-}
-
 .admin-panel input[type="radio"], input[type="checkbox"] {
+    vertical-align: middle;
     height: auto;
-}
+    margin: 2px;
-
-.admin-batchactions, .admin-groupbatchactions {
-    display: inline-block;
-    padding: 8px;
-    vertical-align: top;
-    border-radius: 10px;
-    border: 4px solid #FBC02D;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
 .admin-searchform {
     display: inline-block;
+    width: 100%;
 }
 
 .admin-searchbar {
-    display: inline-block;
-    margin: 10px;
-    vertical-align: top;
-}
-
-.admin-searchinput {
-    margin-bottom: 10px;
-}
-
-.admin-filter, .admin-filtertype, .admin-groupfilter {
-    display: inline-block;
-    margin: 10px;
-    vertical-align: top;
-    margin-right: 50px;
-    margin-left: 50px;
-}
-
-.admin-filter, .admin-groupfilter {
-    width: 120px;
-}
-
-.admin-users {
-    margin: 10px;
-}
-
-.admin-userheading {
-    width: auto;
-    float: left;
-}
-
-.admin-pageui {
-    text-align: right;
-    float: right;
-    width: auto;
     margin-bottom: 20px;
 }
 
-.usertitle {
+.admin-pageui {
-    width: 150px;
+    display: inline-block;
+    width: 100%;
+}
+
+.admin-pageselector {
+    display: inline-block;
+}
+
+.admin-users {
+    margin-top: 50px;
 }
 
 .usertable {

website/public/styles/chat.css

@@ -3,7 +3,7 @@
     position: fixed;
     top: 80px;
     left: 256px;
-    padding: 15px 0;
+    padding: 20px 0;
     width: calc(100% - 256px);
     height: calc(100% - 120px);
     display: inline-flex;
@@ -25,8 +25,11 @@
 /* Chat history. */
 .chat-history {
     overflow-y: auto;
+    overflow-x: hidden;
     height: 100%;
     padding: 10px;
+
+    word-wrap: break-word;
 }
 
 /* Chat-message takes the whole width of the chat area */
@@ -46,14 +49,15 @@
 .chat-message-self {
     float: right;
     margin-right: 10px;
-    background-color: darkgreen;
+    background-color: #FBC02D;
-    color: white;
+    color: #333;
 }
 
 .chat-message-other {
     float: left;
     margin-left: 10px;
-    background-color: aquamarine;
+    background-color: #4CAF50;
+    color: white;
 }
 
 /* Chat reply field */
@@ -77,7 +81,6 @@
     width: 100%;
     border: none;
     border-radius: 10px 0 0 10px;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
 .chat-field input[type="submit"] {
@@ -87,10 +90,9 @@
     color: white;
     padding: 5px 10px;
     border-radius: 0 10px 10px 0;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
 .active-friend-chat {
-    background: aquamarine;
+    background: #4CAF50;
-    color: #333;
+    color: white;
 }

website/public/styles/footer.css

@@ -1,6 +1,5 @@
 footer {
-    width: calc(100% - 256px);
+    width: 100%;
-    margin-left: 256px;
 
     background-color: rgba(0,0,0,0.4);
 }

website/public/styles/header.css

@@ -7,7 +7,9 @@ header {
     height: 80px;
     width: 100%;
 
-    color: white;
+    color: #FFF;
+    font-weight: bold;
+    letter-spacing: 1px;
     background-color: #FBC02D;
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }

website/public/styles/main.css

@@ -166,6 +166,7 @@ textarea {
 
 textarea:hover, input:hover, select:hover {
     border-radius: 10px;
+    box-shadow: 0 1px 1px rgba(0,0,0,0.12);
 }
 
 textarea:focus, input:focus, select:focus {

website/public/styles/menu.css

@@ -6,15 +6,15 @@
     left: 0;
     top: 80px;
     height: calc(100% - 80px);
-    width: 256px;
+    width: 236px;
 
-    background-color: #EEE;
+    padding: 20px 10px;
-    /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
 }
 
 .menu section {
-    margin: 0 5px 10px 5px;
+    margin-bottom: 10px;
-    background-color: white;
+    border-radius: 5px;
+    background-color: #FFFFFF;
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
@@ -24,6 +24,7 @@
 
 .nav-list li {
     padding: 5px 20px;
+    border-radius: 4px;
 }
 
 .more-item {
@@ -40,7 +41,7 @@
 
 .friend-item:hover, .group-item:hover {
     background: #FBC02D;
-    color: white;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
 .menu button {
@@ -54,7 +55,7 @@
 
 #notification-center {
     left: auto;
-    width: 256px;
+    width: 236px;
     right: -256px;
 }
 
@@ -67,4 +68,9 @@
     color: #4CAF50;
     font-size: 42px;
     padding: 7px;
+    transition-duration: 250ms;
+}
+
+#quick-links i:hover {
+    color: #FBC02D;
 }

website/public/styles/profile.css

@@ -33,9 +33,6 @@ div.posts div.post {
 }
 
 div.posts div.post:hover {
-    /*margin: 15px 0 0 -5px;*/
-    /*padding: 15px;*/
-    /*z-index: 20;*/
     box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 }
 

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/friendship.php

@@ -21,8 +21,8 @@ function selectAllFriends($userID) {
             `friendship`.`user2ID` = `user`.`userID` OR 
             `friendship`.`user2ID` = :userID AND
             `friendship`.`user1ID` = `user`.`userID`) AND
-            `role` != 5 AND
+            `user`.`role` != 'banned' AND
-            `status` = 1
+            `friendship`.`status` = 'confirmed'
     ");
 
     $stmt->bindParam(':userID', $userID, PDO::PARAM_INT);
@@ -52,8 +52,8 @@ function selectAllFriendRequests() {
             `friendship`.`user2ID` = `user`.`userID` OR 
             `friendship`.`user2ID` = :userID AND
             `friendship`.`user1ID` = `user`.`userID`) AND
-            `role` != 5 AND
+            `user`.`role` != 5 AND
-            `status` = 0
+            `friendship`.`status` = 'requested'
     ");
 
     $stmt->bindParam(':userID', $_SESSION["userID"], PDO::PARAM_INT);

website/queries/group_member.php

@@ -1,7 +1,7 @@
 <?php
 
 function selectAllGroupsFromUser($userID) {
-    return $GLOBALS["db"]->query("
+    $stmt = $GLOBALS["db"]->prepare("
     SELECT
         `group_page`.`name`,
         `group_page`.`picture`
@@ -10,8 +10,13 @@ function selectAllGroupsFromUser($userID) {
     INNER JOIN
         `group_member`
     WHERE
-        `group_member`.`userID` = $userID AND
+        `group_member`.`userID` = :userID AND
         `group_member`.`groupID` = `group_page`.`groupID` AND
-        `group_page`.`status` != 0
+        `group_page`.`status` != 'hidden'
     ");
+
+    $stmt->bindParam(':userID', $userID, PDO::PARAM_INT);
+    $stmt->execute();
+
+    return $stmt;
 }

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/adminpanel.php

@@ -1,16 +1,8 @@
-<!DOCTYPE html>
+<script src="js/admin.js" charset="utf-8"></script>
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>Admin Panel</title>
-    <script src="/js/admin.js" charset="utf-8"></script>
 <?php
-        include_once("../queries/user.php");
+require_once ("../queries/user.php");
-        include_once("../queries/group_page.php");
+require_once ("../queries/group_page.php");
 ?>
-</head>
-<body>
-
 <!-- function test_input taken from http://www.w3schools.com/php/php_form_validation.asp -->
 <?php
 $search = "";
@@ -66,48 +58,81 @@ $listm = $currentpage * $perpage;
 
 <div class="content">
     <div class="platform admin-panel">
-        <div class="admin-title">
+        <h5>Zoek naar gebruikers of groepen:</h5>
-            <h1>User Management Panel</h1>
-        </div> <br>
         <div class="admin-options">
             <form class="admin-searchform"
                   action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"
                   method="get">
+
                 <div class="admin-searchbar">
-                    <h2>Search</h2>
+                    Zoek: <input type="text"
-                    <input type="text"
                            name="search"
                            class="admin-searchinput"
-                           value="<?php echo $search;?>"> <br>
+                           placeholder="Naam"
-                    <input type="submit" value="Search">
+                           value="<?php echo $search;?>">
+                        Op: <select name="pagetype" id="pagetype" onchange="changeFilter()">
+                        <option value="user"
+                            <?php if (isset($pagetype) && $pagetype=="user") echo "selected";?>>
+                            Gerbuiker
+                        </option>
+                        <option value="group"
+                            <?php if (isset($pagetype) && $pagetype=="group") echo "selected";?>>
+                            Groep
+                        </option>
+                    </select>
+                    <button type="submit"><i class="fa fa-search"></i></button>
                 </div>
-
+                <div id="admin-filter">
-                <div class="admin-filter" id="admin-filter">
+                    <h5>Type gebruiker:</h5>
-                    <h2>Show:</h2>
+                    <input type="checkbox"
-
+                           name="status[]"
-                    <input type="checkbox" name="status[]" id="normal" value="1"
+                           id="all"
-                           <?php if (in_array("1", $status)) echo "checked";?>>
+                           value="all"
+                        <?php if (in_array("all", $status)) echo "checked";?>>
+                    <label for="normal">Allemaal</label><br>
+                    <input type="checkbox"
+                           name="status[]"
+                           id="normal"
+                           value="user"
+                           <?php if (in_array("user", $status)) echo "checked";?>>
                     <label for="normal">Normal</label><br>
-                    <input type="checkbox" name="status[]" id="frozen" value="2"
+                    <input type="checkbox"
-                           <?php if (in_array("2", $status)) echo "checked";?>>
+                           name="status[]"
+                           id="frozen"
+                           value="frozen"
+                           <?php if (in_array("frozen", $status)) echo "checked";?>>
                     <label for="frozen">Frozen</label><br>
-                    <input type="checkbox" name="status[]" id="banned" value="3"
+                    <input type="checkbox"
-                           <?php if (in_array("3", $status)) echo "checked";?>>
+                           name="status[]"
+                           id="banned"
+                           value="banned"
+                           <?php if (in_array("banned", $status)) echo "checked";?>>
                     <label for="banned">Banned</label><br>
-                    <input type="checkbox" name="status[]" id="admin" value="5"
+                    <input type="checkbox"
-                           <?php if (in_array("5", $status)) echo "checked";?>>
+                           name="status[]"
+                           id="admin"
+                           value="admin"
+                           <?php if (in_array("admin", $status)) echo "checked";?>>
                     <label for="admin">Admin</label><br>
-                    <input type="checkbox" name="status[]" id="unvalidated" value="0"
+                    <input type="checkbox"
-                           <?php if (in_array("0", $status)) echo "checked";?>>
+                           name="status[]"
+                           id="unvalidated"
+                           value="unconfirmed"
+                           <?php if (in_array("unconfirmed", $status)) echo "checked";?>>
                     <label for="unvalidated">Unvalidated</label><br>
-                    <input type="checkbox" name="status[]" id="owner" value="42"
+                    <input type="checkbox"
-                           <?php if (in_array("42", $status)) echo "checked";?>>
+                           name="status[]"
+                           id="owner"
+                           value="owner"
+                           <?php if (in_array("owner", $status)) echo "checked";?>>
                     <label for="owner">Owner</label>
                 </div>
 
-                <div class="admin-groupfilter" id="admin-groupfilter">
+                <div id="admin-groupfilter">
-                    <h2>Show:</h2>
+                    <h5>Type groep:</h5>
-
+                    <input type="checkbox" name="groupstatus[]" id="all" value="all"
+                        <?php if (in_array("all", $groupstatus)) echo "checked";?>>
+                    <label for="hidden">Allemaal</label><br>
                     <input type="checkbox" name="groupstatus[]" id="hidden" value="0"
                            <?php if (in_array("0", $groupstatus)) echo "checked";?>>
                     <label for="hidden">Hidden</label><br>
@@ -118,60 +143,12 @@ $listm = $currentpage * $perpage;
                            <?php if (in_array("2", $groupstatus)) echo "checked";?>>
                     <label for="membersonly">Members-only</label><br>
                 </div>
-
-                <div class="admin-filtertype">
-                    <h2>Page Type:</h2>
-                    <input type="radio" name="pagetype" id="user" value="user"
-                           <?php if (isset($pagetype) && $pagetype=="user") echo "checked";?>
-                           onchange="changeFilter()">
-                    <label for="user">Users</label><br>
-                    <input type="radio" name="pagetype" id="group" value="group"
-                           <?php if (isset($pagetype) && $pagetype=="group") echo "checked";?>
-                           onchange="changeFilter()">
-                    <label for="group">Groups</label>
-                </div>
-            </form>
-
-                <div class="admin-batchactions" id="admin-batchactions">
-                    <h2>Batch Actions: </h2>
-                    <form class="admin-batchform"
-                          id="admin-batchform"
-                          action="<?php htmlspecialchars(basename($_SERVER['REQUEST_URI'])) ?>"
-                          method="post">
-                        <input type="radio" name="batchactions" id="freeze" value="2">
-                        <label for="freeze">Freeze</label><br>
-                        <input type="radio" name="batchactions" id="ban" value="3">
-                        <label for="ban">Ban</label><br>
-                        <input type="radio" name="batchactions" id="restore" value="1">
-                        <label for="restore">Restore</label><br><br>
-                        <input type="submit" value="Confirm">
             </form>
             </div>
-
-                <div class="admin-groupbatchactions" id="admin-groupbatchactions">
-                    <h2>Batch Actions: </h2>
-                    <form class="admin-groupbatchform"
-                          id="admin-groupbatchform"
-                          action="<?php htmlspecialchars(basename($_SERVER['REQUEST_URI'])) ?>"
-                          method="post">
-                        <input type="radio" name="groupbatchactions" id="hide" value="0">
-                        <label for="hide">Hide</label><br>
-                        <input type="radio" name="groupbatchactions" id="public" value="1">
-                        <label for="public">Public</label><br>
-                        <input type="radio" name="groupbatchactions" id="membersonly" value="2">
-                        <label for="membersonly">Member</label><br><br>
-                        <input type="submit" value="Confirm">
-                    </form>
-                </div>
-            </div>
-            <br>
-
             <div class="admin-users">
                 <div class="admin-usertitle">
-                    <div class="admin-userheading">
+                    <h4>Resultaat:</h4>
-                        <h2>Users:</h2>
+                    <span style="float: right">
-                    </div>
-                    <div class="admin-pageui">
                         <?php
                         if ($pagetype == "user") {
                             $pages = countSomeUsersByStatus($search, $status);
@@ -182,8 +159,7 @@ $listm = $currentpage * $perpage;
                         $mincount = min($listm, $countresults);
                         $minlist = min($listn + 1, $countresults);
                         ?>
-                        <p class="pagenumber">Current page:</p>
+                        Pagina: <form class="admin-pageselector"
-                        <form class="admin-pageselector"
                               action="<?php htmlspecialchars(basename($_SERVER['REQUEST_URI'])) ?>"
                               method="post">
                               <select class="admin-pageselect"
@@ -201,22 +177,27 @@ $listm = $currentpage * $perpage;
                                   ?>
                               </select>
                         </form>
-                        <p class="entriesshown">
                         <?php
-                        echo "Showing results $minlist to $mincount out of $countresults";
+                        echo "$minlist tot $mincount ($countresults totaal)";
                         ?>
-                    </div>
+                    </span>
-                </div> <br>
+                <form
+                        id="admin-batchform"
+                        action="<?php htmlspecialchars(basename($_SERVER['REQUEST_URI'])) ?>"
+                        method="post">
 
+                    <button type="submit" name="batchactions" id="freeze" value="frozen">Bevries</button>
+                    <button type="submit" name="batchactions" id="ban" value="banned">Ban</button>
+                    <button type="submit" name="batchactions" id="restore" value="user">Activeer</button>
+                </form>
+                </div>
                 <table class="usertable">
                     <tr>
-                        <th class="table-checkbox">
+                        <th><input type="checkbox" id="checkall" name="checkall" onchange="checkAll(this)"></th>
-                            <input type="checkbox" id="checkall" name="checkall" onchange="checkAll(this)">
+                        <th class="table-username">Gebruikersnaam</th>
-                        </th>
-                        <th class="table-username">User</th>
                         <th class="table-status">Status</th>
-                        <th class="table-comment">Comment</th>
+                        <th class="table-comment">Aantekening</th>
-                        <th class="table-action">Action</th>
+                        <th class="table-action">Actie</th>
                     </tr>
 
                     <!-- Table construction via php PDO. -->
@@ -226,7 +207,6 @@ $listm = $currentpage * $perpage;
 
                     if ($pagetype == 'user') {
                         $q = searchSomeUsersByStatus($listn, $listm, $search, $status);
-
                         while($user = $q->fetch(PDO::FETCH_ASSOC)) {
                             $userID = $user['userID'];
                             $username = $user['username'];
@@ -252,9 +232,9 @@ $listm = $currentpage * $perpage;
                             action='$thispage'
                             method='post'>
                             <select class='action' name='actions'>
-                            <option value='2'>Freeze</option>
+                            <option value='frozen'>Bevries</option>
-                            <option value='3'>Ban</option>
+                            <option value='banned'>Ban</option>
-                            <option value='1'>Restore</option>
+                            <option value='user'>Activeer</option>
                             </select>
                             <input type='hidden' name='userID' value='$userID'>
                             <input type='submit' value='Confirm'>

website/views/header.php

@@ -14,8 +14,9 @@ $userinfo = getHeaderInfo();
                    placeholder="Zoek naar wat je wil"
                    required
             />
-            <input type="submit"
+            <button type="submit">
-                   value="Zoek"/>
+                <i class="fa fa-search"></i>
+            </button>
         </form>
     </div>
     <div class="right profile-menu">

website/views/menu.php

@@ -1,36 +1,46 @@
 <nav class="menu">
-    <section id="friends-menu-section platform">
+    <section id="friends-menu-section">
-        <h4>
-            Vrienden
-        </h4>
-        <ul class="nav-list">
         <?php
 
         // Load file.
         require_once("../queries/friendship.php");
         require_once("../queries/user.php");
 
-            // Get all the friends of a user.
+        // Get confirmed friends of the user and a random non-friend.
-            $friends = selectAllFriends($_SESSION["userID"]);
+        $friends = selectAllFriends($_SESSION["userID"])->fetchAll();
+        $randomUser = selectRandomNotFriendUser($_SESSION["userID"])["username"];
         $i = 0;
 
-            // Print all the users.
+        if (sizeof($friends) == 0) {
-            while($friend = $friends->fetch(PDO::FETCH_ASSOC)) {
+            echo "
-                $i ++;
+                <ul class=\"nav-list\"><li class='friend-item'>
+                    <form action='profile.php' method='get'>
+                        <button type='submit'
+                                name='username'
+                                value='$randomUser'>
+                            <div class='friend'>
+                                Maak nieuwe vrienden :)
+                            </div>
+                        </button>
+                    </form>
+                </li><ul class=\"nav-list\">
+            ";
+        } else {
+            echo "
+                <h4>
+                    Vrienden
+                </h4>
+                <ul class=\"nav-list\">
+            ";
 
-                // Set default values of a friend.
+            foreach ($friends as $i => $friend) {
                 $username = $friend["username"];
                 $extraItem = "";
-                $pf = "img/avatar-standard.png";
-
-                // Change values if needed.
-                if (!empty($friend["profilepicture"]))
                 $pf = $friend["profilepicture"];
 
-                if ($i > 5)
+                if ($i >= 5)
                     $extraItem = "extra-menu-items";
 
-                // Echo the friend.
                 echo "
                     <li class='friend-item $extraItem'>
                         <form action='profile.php' method='get'>
@@ -47,66 +57,45 @@
                 ";
             }
 
-            $randomUser = selectRandomNotFriendUser($_SESSION["userID"])["username"];
+            if (sizeof($friends) > 5) {
-
-            echo "
-                <li class='friend-item'>
-                    <form action='/profile' method='get'>
-                        <button type='submit'
-                                name='username'
-                                value='$randomUser'>
-                            <div class='friend'>
-                                Klik hier voor een nieuw vriendje :)
-                            </div>
-                        </button>
-                    </form>
-                </li>
-            ";
-            if ($i > 5) {
-                $i -= 5;
                 echo "
                     <li class='more-item' id='more-friends-click'>
-                        En nog $i anderen...
+                        Meer vrienden..
                     </li> 
                 ";
             }
-
+        }
         ?>
-        </ul>
     </section>
     <section id="groups-menu-section">
-        <h4>
-            Groepen
-        </h4>
-        <ul class="nav-list">
         <?php
 
         // Load file.
-            include_once("../queries/group_member.php");
+        require_once("../queries/group_member.php");
 
         // Get all the friends of a user.
         $groups = selectAllGroupsFromUser($_SESSION["userID"]);
-            $i = 0;
 
-            // Print all the users.
+        if (sizeof($groups) > 0) {
-            while($group = $groups->fetch(PDO::FETCH_ASSOC)) {
+            echo "
-                $i ++;
+                    <h4>
+                        Groepen
+                    </h4>
+                    <ul class=\"nav-list\">
+                ";
 
+            foreach ($groups as $i => $group) {
                 // Set default values of a friend.
                 $name = $group["name"];
                 $extraItem = "";
-                $picture = "img/avatar-standard.png";
-
-                // Change values if needed.
-                if (!empty($group["picture"]))
                 $picture = $group["picture"];
 
+                // Change values if needed.
                 if ($i > 3)
                     $extraItem = "extra-menu-items";
 
-                // Echo the friend.
                 echo "
-                    <li class='group-item'>
+                    <li class='group-item $extraItem'>
                         <form action='group.php' method='get'>
                             <button type='submit'
                                     name='groupname'
@@ -121,27 +110,20 @@
                 ";
             }
 
-            if ($i == 0) {
+            if (sizeof($groups) > 3) {
-                echo "<li class='group-item'>
-                            <div class='group'>
-                                Je hoort nergens bij.
-                            </div>
-                        </li>";
-            } else if ($i > 3) {
-                $i -= 3;
                 echo "
                         <li class='more-item' id='more-groups-click'>
-                        En nog $i andere...
+                            Meer groepen..
                         </li> 
                     ";
             }
+        }
         ?>
-        </ul>
     </section>
     <section>
         <ul>
             <li class="more-item" id="menu-back">
-                Ga terug
+                Terug naar het overzicht
             </li>
         </ul>
     </section>

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'