Now that we have a working chat system, we just need to build a layout, which works dynamically and looks decent along with not having the page always reload when sending a message.

application/core/Application.php

@@ -19,10 +19,13 @@ class Application
     private $action_name;
 
     /**
-     * Start the application, analyze URL elements, call according controller/method or relocate to fallback location
+     * Construct
      */
     public function __construct()
     {
+        // Reset header render flag
+        View::resetHeaderRendered();
+        
         // create array with URL parts in $url
         $this->splitUrl();
 

application/core/View.php

@@ -17,6 +17,11 @@ class View
     public $avatar_file_path;
     public $user_account_type;
     
+    /**
+     * Static property to track if header has been rendered
+     */
+    private static $header_rendered = false;
+
     /**
      * simply includes (=shows) the view. this is done from the controller. In the controller, you usually say
      * $this->view->render('help/index'); to show (in this example) the view index.php in the folder help.
@@ -32,9 +37,15 @@ class View
             }
         }
 
+        if (!self::$header_rendered) {
+            self::$header_rendered = true;
+            
             require Config::get('PATH_VIEW') . '_templates/header.php';
             require Config::get('PATH_VIEW') . $filename . '.php';
             require Config::get('PATH_VIEW') . '_templates/footer.php';
+        } else {
+            require Config::get('PATH_VIEW') . $filename . '.php';
+        }
     }
 
     /**
@@ -51,6 +62,9 @@ class View
             return false;
         }
 
+        if (!self::$header_rendered) {
+            self::$header_rendered = true;
+            
             if ($data) {
                 foreach ($data as $key => $value) {
                     $this->{$key} = $value;
@@ -58,6 +72,7 @@ class View
             }
 
             require Config::get('PATH_VIEW') . '_templates/header.php';
+        }
 
         foreach($filenames as $filename) {
             require Config::get('PATH_VIEW') . $filename . '.php';
@@ -92,6 +107,14 @@ class View
         echo json_encode($data);
     }
     
+    /**
+     * Reset header render flag at start of request
+     */
+    public static function resetHeaderRendered()
+    {
+        self::$header_rendered = false;
+    }
+
     /**
      * renders the feedback messages into the view
      */

application/view/message/conversation.php

@@ -1,5 +1,3 @@
-<?php $this->render('_templates/header'); ?>
-
 <div class="container">
   <div class="row">
     <!-- Back to Messenger -->
@@ -55,63 +53,63 @@
 </div>
 
 <style>
-.message-container {
+  .message-container {
     height: 400px;
     overflow-y: auto;
     background-color: #f5f5f5;
     padding: 15px;
-}
+  }
 
-.message {
+  .message {
     margin-bottom: 15px;
     clear: both;
-}
+  }
 
-.message.sent {
+  .message.sent {
     text-align: right;
-}
+  }
 
-.message.received {
+  .message.received {
     text-align: left;
-}
+  }
 
-.message-bubble {
+  .message-bubble {
     display: inline-block;
     max-width: 70%;
     padding: 10px 15px;
     border-radius: 18px;
     position: relative;
     word-wrap: break-word;
-}
+  }
 
-.message.sent .message-bubble {
+  .message.sent .message-bubble {
     background-color: #007bff;
     color: white;
-}
+  }
 
-.message.received .message-bubble {
+  .message.received .message-bubble {
     background-color: #e5e5ea;
     color: black;
-}
+  }
 
-.message-time {
+  .message-time {
     font-size: 0.8em;
     color: #666;
     margin-top: 5px;
-}
+  }
 
-/* Scroll to bottom of messages on load */
-.message-container {
+  /* Scroll to bottom of messages on load */
+  .message-container {
     scroll-behavior: smooth;
-}
+  }
 </style>
 
 <script>
-// Scroll to bottom of messages
-document.addEventListener('DOMContentLoaded', function() {
+  // Scroll to bottom of messages
+  document.addEventListener('DOMContentLoaded', function() {
     const container = document.querySelector('.message-container');
     container.scrollTop = container.scrollHeight;
-});
+  });
 </script>
 
 <?php $this->render('_templates/footer'); ?>

application/view/message/index.php

@@ -1,5 +1,3 @@
-<?php $this->render('_templates/header'); ?>
-
 <div class="container">
   <h1>Messenger</h1>
 
@@ -110,68 +108,68 @@
 </div>
 
 <style>
-.message-container {
+  .message-container {
     height: 400px;
     overflow-y: auto;
     background-color: #f5f5f5;
     padding: 15px;
     border-radius: 5px;
     margin-bottom: 15px;
-}
+  }
 
-.message {
+  .message {
     margin-bottom: 10px;
     clear: both;
-}
+  }
 
-.message.sent {
+  .message.sent {
     text-align: right;
-}
+  }
 
-.message.received {
+  .message.received {
     text-align: left;
-}
+  }
 
-.message-bubble {
+  .message-bubble {
     display: inline-block;
     max-width: 70%;
     padding: 10px 15px;
     border-radius: 18px;
     position: relative;
-}
+  }
 
-.message.sent .message-bubble {
+  .message.sent .message-bubble {
     background-color: #007bff;
     color: white;
     float: right;
-}
+  }
 
-.message.received .message-bubble {
+  .message.received .message-bubble {
     background-color: #e5e5ea;
     color: black;
     float: left;
-}
+  }
 
-.message-time {
+  .message-time {
     font-size: 0.8em;
     color: #666;
     margin-top: 5px;
     clear: both;
-}
+  }
 
-.badge {
+  .badge {
     background-color: #d9534f;
-}
+  }
 
-.list-group-item.active {
+  .list-group-item.active {
     background-color: #d9edf7;
     border-color: #bce8f1;
     color: #31708f;
-}
+  }
 
-.list-group-item.active .badge {
+  .list-group-item.active .badge {
     background-color: #d9534f;
-}
+  }
 </style>
 
 <?php $this->render('_templates/footer'); ?>