RachmannJoubert · RachmannJoubert · Aug 6, 2019 · Aug 7, 2019 · Aug 7, 2019 · Aug 7, 2019
diff --git a/functions.php b/functions.php
@@ -3,9 +3,17 @@
 
 $db = connect();
 
-function getData($db)
+/***
+ *
+ * function connects to database
+ *
+ * @param PDO $db
+ * @return array
+ */
+
+function getData(PDO $db): array
 {
-    $sql = $db->prepare('SELECT `id`, `common_name`, `latin_name`, `identification_image`, `canopy_level`, `life_span` FROM `Plants`;');
+    $sql = $db->prepare('SELECT `id`, `common_name`, `latin_name`,  `canopy_level`, `life_span` FROM `Plants`;');
 
     $sql->execute();
 
@@ -14,11 +22,117 @@ function getData($db)
     return $plants;
 }
 
-function processData($plants)
+/***
+ *
+ * function checks if the data retrieved from db is
+ * an indexed array and arranges it in to a list
+ * within a div that can be displayed
+ *
+ * @param array $plants
+ * @return string
+ */
+
+function processData(array $plants): string
 {
+
+    if (array_keys($plants) !== range(0, count($plants) - 1)) {
+        return false;
+    }
+
     $plantRow = '';
     foreach ($plants as $plant) {
-        $plantRow .= '<div class="plant">' . $plant['id'] . $plant['common_name'] . $plant['latin_name'] . $plant['identification_image'] . $plant['canopy_level'] . $plant['life_span'];
+        $plantRow .=
+            '<div class="row"><ul><li>'
+            . $plant['id'] . '</li><li>'
+            . $plant['common_name'] . '</li><li>'
+            . $plant['latin_name'] . '</li><li>'
+            . $plant['canopy_level'] . '</li><li>'
+            . $plant['life_span'] . '</li></ul></div>';
     }
     return $plantRow;
-}
+}
+
+/***
+ *
+ * function retrieves an array of images from the db
+ *
+ * @param PDO $db
+ * @return array
+ */
+
+function getImage(PDO $db): array
+{
+    $sql = $db->prepare('SELECT `identification_image` FROM `Plants` GROUP BY `id` ASC;');
+
+    $sql->execute();
+
+    $images = $sql->fetchAll();
+
+    return $images;
+}
+
+/***
+ *
+ * function checks if data retrieved from the db is
+ * an indexed array and wraps it in a div that can
+ * be displayed
+ *
+ * @param array $images
+ * @return string
+ */
+
+function displayImage(array $images): string {
+
+    if (array_keys($images) !== range(0, count($images) - 1))
+    return false;
+
+
+    $plantImage = '';
+
+    foreach ($images as $image) {
+        $plantImage .= '<div><img class ="sourceImage" src="' . $image["identification_image"] . '"></div>';
+    }
+    return $plantImage;
+}
+
+/***
+ *
+ * function retrieves an array if id's from the database
+ *
+ * @param PDO $db
+ * @return array
+ */
+
+function getID(PDO $db)
+{
+    $sql = $db->prepare('SELECT `id` FROM `Plants` GROUP BY `id` ASC;');
+
+    $sql->execute();
+
+    $ids = $sql->fetchAll();
+
+    return $ids;
+}
+
+/***
+ *
+ * function checks if data retrieved from db is
+ * an indexed array and wraps it so that it can be displayed
+ *
+ * @param array $ids
+ * @return string
+ */
+
+function displayID(array $ids): string {
+
+    if (array_keys($ids) !== range(0, count($ids) - 1))
+        return false;
+
+    $plantId = '';
+
+    foreach ($ids as $id) {
+        $plantId .= '<p>' . $id["id"] . '</p>';
+    }
+    return $plantId;
+}
+
diff --git a/images/vine-wall.jpg b/images/vine-wall.jpg
diff --git a/index.css b/index.css
diff --git a/index.php b/index.php
@@ -8,17 +8,48 @@
 
 $plants = getData($db);
 
+$images = getImage($db);
+
+$plantImageArray = displayImage($images);
+
+$ids = getID($db);
+$id = displayID($ids);
+
 ?>
 
 <!DOCTYPE html>
 <html lang="eng">
 <head>
     <meta charset="utf-8">
     <title>Collectors App</title>
-    <link rel="stylesheet" type="text/css" href="index.css">
-    <link rel="stylesheet" type="text/css" href="normalize.css">
+    <link rel="stylesheet" type="text/css" href="styles/index.css">
+    <link rel="stylesheet" type="text/css" href="styles/normalize.css">
 </head>
 <body>
+<div class="wrapper">
+    <section>
+        <div class="table">
+            <div class="head">
+                <ul class="heading">
+                    <li>ID</li>
+                    <li>Common Name</li>
+                    <li>Latin Name</li>
+                    <li>Canopy Level</li>
+                    <li>Life Span</li>
+                </ul>
+        </div>
+        <?php echo processData($plants) ?>
+</div>
+</section>
+<section>
+    <div class="images">
+        <?php
+        echo $id;
+        echo $plantImageArray;
+        ?>
 
+    </div>
+</section>
+</div>
 </body>
 </html>
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,162 @@
+* {
+    box-sizing: border-box;
+    list-style: none;
+}
+
+body {
+    background-image: url("../images/vine-wall.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.wrapper {
+    overflow: auto;
+    width: 100vw;
+    height: 100vh;
+}
+
+section {
+    float: left;
+    height: 100%;
+    width: 50%;
+}
+
+section div.table, section div.images {
+    width: 90%;
+    height: 80%;
+    margin: 10% 5%;
+}
+
+.table {
+    border:solid black;
+    height: 100%;
+    overflow-y: scroll;
+}
+
+.row {
+    width: 100%;
+}
+
+.heading {
+    font-size: 1.2rem;
+}
+
+ul {
+    padding-top: 3%;
+    border-top: solid black;
+    width: 100%;
+    text-align: center;
+    overflow: auto;
+}
+
+li {
+    margin-left: 9%;
+    height: 10%;
+    width: 18%;
+    float: left;
+}
+
+ul li:first-child {
+    margin-left: -3%;
+    width: 3%;
+}
+
+ul li:last-child {
+    width: 3%;
+}
+
+.images {
+    overflow: auto;
+    float: right;
+    border: solid black;
+    height: 100%;
+    width: 100%;
+    position: relative;
+}
+
+.images p {
+    position: absolute;
+    color: white;
+    font-size: 1.5rem;
+}
+
+.images p:first-child {
+    position: absolute;
+}
+
+.images p:first-child, .images p:nth-child(4), .images p:nth-child(7), .images p:nth-child(10), .images p:nth-child(13) {
+    left: 5%;
+}
+
+.images p:nth-child(2), .images p:nth-child(5), .images p:nth-child(8), .images p:nth-child(11), .images p:nth-child(14) {
+    left: 38.5%;
+}
+
+.images p:nth-child(3), .images p:nth-child(6), .images p:nth-child(9),  .images p:nth-child(12), .images p:nth-child(15){
+    left: 72%;
+}
+
+.images p:nth-child(4), .images p:nth-child(5), .images p:nth-child(6) {
+    top: 19.5%;
+}
+
+.images p:nth-child(7), .images p:nth-child(8), .images p:nth-child(9) {
+    top: 39%;
+}
+
+.images p:nth-child(10), .images p:nth-child(11), .images p:nth-child(12) {
+    top: 58.5%;
+}
+
+.images p:nth-child(13), .images p:nth-child(14), .images p:nth-child(15) {
+    top: 77.5%;
+}
+
+.images div {
+    padding: 0.5%;
+    height: 19.5%;
+    width: 33.3%;
+    overflow: hidden;
+    float: left;
+}
+
+.sourceImage {
+    object-fit: cover;
+}
+
+img {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+}
+
+.wrapper {
+    overflow: auto;
+}
+
+@media only screen and (max-width: 1000px) {
+    section {
+        height: 100%;
+        width: 100%;
+    }
+}
+
+@media only screen and (max-width: 530px) {
+    .head {
+        width: 100%;
+        overflow-x: auto;
+    }
+
+    li {
+        font-size: 1rem;
+        margin-left: 8%;
+    }
+
+    ul li:first-child {
+        margin-left: -10%;
+    }
+
+    ul li:last-child {
+        margin-left: 13%;
+    }
+}
diff --git a/normalize.css → styles/normalize.css b/normalize.css → styles/normalize.css