diff --git a/functions.php b/functions.php index 2e543a2..098513d 100644 --- 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 .= '
' . $plant['id'] . $plant['common_name'] . $plant['latin_name'] . $plant['identification_image'] . $plant['canopy_level'] . $plant['life_span']; + $plantRow .= + '
'; } return $plantRow; -} \ No newline at end of file +} + +/*** + * + * 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 .= '
'; + } + 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 .= '

' . $id["id"] . '

'; + } + return $plantId; +} + diff --git a/images/vine-wall.jpg b/images/vine-wall.jpg new file mode 100644 index 0000000..df71083 Binary files /dev/null and b/images/vine-wall.jpg differ diff --git a/index.css b/index.css deleted file mode 100644 index 999ff38..0000000 --- a/index.css +++ /dev/null @@ -1,4 +0,0 @@ -* { - box-sizing: border-box; -} - diff --git a/index.php b/index.php index c548ae0..4ca279b 100644 --- a/index.php +++ b/index.php @@ -8,6 +8,13 @@ $plants = getData($db); +$images = getImage($db); + +$plantImageArray = displayImage($images); + +$ids = getID($db); +$id = displayID($ids); + ?> @@ -15,10 +22,34 @@ Collectors App - - + + +
+
+
+
+
    +
  • ID
    • +
  • Common Name
    • +
  • Latin Name
    • +
  • Canopy Level
    • +
  • Life Span
    • +
+
+ +
+
+
+
+ +
+
+
diff --git a/styles/index.css b/styles/index.css new file mode 100644 index 0000000..e11c697 --- /dev/null +++ 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 b/styles/normalize.css similarity index 100% rename from normalize.css rename to styles/normalize.css diff --git a/test/FunctionsTest.php b/test/FunctionsTest.php new file mode 100644 index 0000000..ef34eb4 --- /dev/null +++ b/test/FunctionsTest.php @@ -0,0 +1,104 @@ + 1, + 'common_name' => 'American Persimmon', + 'latin_name' => 'Diospyros virginiana', + 'canopy_level' => 'CANOPY LAYER', + 'life_span' => 60 + ], + [ + 'id' => 2, + 'common_name' => 'Nodding Saltbush', + 'latin_name' => 'Einadia wutans', + 'canopy_level' => 'SHRUB LAYER', + 'life_span' => 10 + ] + ]; + + $expectedResult = '
'; + + $result = processData($testArray); + + $this->assertEquals($expectedResult, $result); + } + + public function testProcessData_MalformedInput() { + + $testArray = [ + 'id' => 1, + 'common_name' => 'American Persimmon', + 'latin_name' => 'Diospyros virginiana', + 'canopy_level' => 'CANOPY LAYER', + 'life_span' => 60 + ]; + + $expectedResult = false; + + $result = processData($testArray); + + $this->assertEquals($expectedResult, $result); + } + + public function testDisplayID_returnsAString_success() { + + $testArray = [['id' => 1], ['id' => 2], ['id' => 3]]; + + $expectedResult = '

1

2

3

'; + + $result = displayID($testArray); + + $this->assertEquals($expectedResult, $result); + } + + public function testDisplayID_MalformedInput() { + + $testArray = ['id' => 1, 'common_name' => 'bleh', 'latin_name' => 'Diospyros virginiana']; + + $expectedResult = false; + + $result = processData($testArray); + + $this->assertEquals($expectedResult, $result); + } + + public function testDisplayImage_returnsAString_success() { + + $testArray = [ + ['identification_image' => './images/american-persimmon.jpg'], + ['identification_image' => './images/nodding-saltbush.jpg'], + ['identification_image' => './images/chinese-chestnut.jpg'] + ]; + + $expectedResult = '
'; + + $result = displayImage($testArray); + + $this->assertEquals($expectedResult, $result); + } + + public function testDisplayImage_MalformedTest() { + + $testArray = [ + 'identification_image' => './images/american-persimmon.jpg', + 'id' => 5, + 'latin_name' => 'Diospyros virginiana' + ]; + + $expectedResult = false; + + $result = displayImage($testArray); + + $this->assertEquals($expectedResult, $result); + } +} \ No newline at end of file