style: made the view all properties listings page

README.md

@@ -79,3 +79,5 @@ The aim of this work is to ease the process of searching for suitable accomodati
 - Implemented the search for property feature. Users have the option to either enable strict search which would make sure the search results match exactly with what they're expecting or they can disable strict search which would make sure that the search results contain the search term. There are also certain fields such as property type, location of the property, and price range that can be used to narrow down the search results.
 
 - Implemented the contact property owner feature for individual apartments (the form to signify interest for an apartment)
+
+ - Created the view all properties page where all available properties are listed.

lib/pages/properties.php

@@ -0,0 +1,20 @@
+<?php $pageTitle = "All Properties" ?>
+<?php require_once("./includes/Header.php"); ?>
+<?php
+
+use app\src\Properties;
+
+$properties = new Properties();
+?>
+<div class="min-h-[80vh] h-[80vh] grid place-content-center text-center bg-index-banner px-4 bg-fixed bg-center bg-cover text-slate-200 p-4 lg:p-8">
+    <h1 class="header text-3xl">
+        All Property Listings
+    </h1>
+</div>
+
+<main class="space-y-12 py-12 px-4 lg:px-[10%] dark:bg-slate-900 dark:text-slate-300">
+    <section class="grid gap-8 lg:grid-cols-12">
+        <?php $properties->getAllProperties() ?>
+    </section>
+</main>
+<?php require_once("./includes/Footer.php") ?>

lib/pages/search.php

@@ -1,4 +1,4 @@
-
+<?php $pageTitle = "Search Results"; ?>
 <?php require_once("./includes/Header.php"); ?>
 <?php
 

lib/src/Properties.php

@@ -0,0 +1,71 @@
+<?php
+
+namespace app\src;
+
+use app\assets\DB;
+
+class Properties
+{
+    private $con;
+
+    public function __construct()
+    {
+        $this->con = DB::getInstance();
+    }
+
+    public function getAllProperties()
+    {
+        $houses = $this->con->select("id, title, index_img, price, summary, location, type, link", "properties", "WHERE status = 'available' ORDER BY id DESC");
+
+        if ($houses->num_rows < 1) : ?>
+            <p class="text-rose-700 dark:text-rose-500 text-center lg:col-span-12 text-xl lg:text-2xl">
+                No apartment yet. Please check again at a later time.
+            </p>
+        <?php
+            return;
+        endif;
+
+        while ($house = $houses->fetch_object()) : ?>
+            <article class="lg:col-span-4 space-y-3">
+                <div class="relative">
+                    <img class="property-listing-image" src="./assets/img/<?= $house->index_img ?>" alt="<?= $house->title ?>" title="<?= $house->title ?>" width="100%" height="200">
+
+                    <i class="fr fi-rr-heart absolute top-2.5 right-4 text-2xl text-rose-500 dark:text-white"></i>
+                </div>
+
+                <div class="px-2 space-y-3">
+                    <div class="flex items-center flex-wrap gap-x-4 gap-y-1.5 justify-between">
+                        <span class=<?= $house->type === 'For Rent' ? "text-green-500 dark:text-green-400" : "text-rose-500 dark:text-rose-400" ?>>
+                            <i class="fr <?= $house->type === 'For Rent' ? 'fi-rr-recycle' : 'fi-rr-thumbtack' ?>"></i>
+                            <?= $house->type ?>
+                        </span>
+
+                        <span class="text-sky-500 lining-nums font-semibold tracking-widest">
+                            ₦ <?= number_format($house->price) ?>
+                        </span>
+                    </div>
+
+                    <div>
+                        <h2 class="header">
+                            <?= $house->title ?>
+                        </h2>
+
+                        <p>
+                            <?= $house->summary ?>
+                        </p>
+                    </div>
+
+                    <address>
+                        <i class="fr fi-rr-map-marker-home"></i>
+                        <?= $house->location ?>
+                    </address>
+
+                    <a class="inline-block rounded-lg py-1.5 px-3 text-white bg-sky-500 hover:bg-sky-600 hover:ring-1 hover:ring-sky-500 ring-offset-2 active:ring-1 active:ring-sky-500 dark:ring-offset-slate-800" href="details?propertyID=<?= $house->id ?>&propertyName=<?= $house->link ?>">
+                        View Details
+                    </a>
+                </div>
+            </article>
+<?php
+        endwhile;
+    }
+}

properties.php

@@ -0,0 +1,4 @@
+<?php
+require_once('./vendor' . DIRECTORY_SEPARATOR . 'autoload.php');
+
+view("properties");