split up into Vanilla and CakePHP

README.md

@@ -1,3 +1,8 @@
-As I was not allowed to use any framework, respectively no foreign code, most of the time was spent, well creating some kind of framework myself. :-)
+This repo hold a basic programming task I had to do for my new job.
 
-The address book itself was then done in a few hours.
+The task was to write a simple address book with plain PHP and Javascript.
+No external resources were allowed, so I had to write my own router DBAL and so on.
+The result can be found in the Vanilla-Folder.
+
+Now I got the job and will start working on a CakePHP project, so I decided to rewrite the address book in CakePHP.
+Work will happen in the CakePHP-Folder. 

Vanilla/README.md

@@ -0,0 +1,3 @@
+As I was not allowed to use any framework, respectively no foreign code, most of the time was spent, well creating some kind of framework myself. :-)
+
+The address book itself was then done in a few hours.

Vanilla/addressbook.sql

@@ -0,0 +1,88 @@
+-- MariaDB dump 10.19  Distrib 10.5.15-MariaDB, for debian-linux-gnu (x86_64)
+--
+-- Host: localhost    Database: tracer_addressbook
+-- ------------------------------------------------------
+-- Server version	10.5.15-MariaDB-0+deb11u1-log
+
+/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
+/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
+/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
+/*!40101 SET NAMES utf8 */;
+/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;
+/*!40103 SET TIME_ZONE='+00:00' */;
+/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
+/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
+/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
+/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
+
+--
+-- Table structure for table `addresses`
+--
+
+DROP TABLE IF EXISTS `addresses`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8 */;
+CREATE TABLE `addresses` (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `owner` int(11) NOT NULL,
+  `first` varchar(80) NOT NULL,
+  `last` varchar(80) NOT NULL,
+  `street` varchar(80) NOT NULL,
+  `zip` varchar(10) NOT NULL,
+  `city` varchar(80) NOT NULL,
+  `phone` varchar(30) NOT NULL,
+  PRIMARY KEY (`id`),
+  KEY `fk_user` (`owner`),
+  CONSTRAINT `fk_user` FOREIGN KEY (`owner`) REFERENCES `users` (`id`)
+) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=utf8mb4;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Dumping data for table `addresses`
+--
+
+LOCK TABLES `addresses` WRITE;
+/*!40000 ALTER TABLE `addresses` DISABLE KEYS */;
+INSERT INTO `addresses` VALUES (1,2,'a \"test\"','a','Webfoot Street','1313','Duckburg2','555-12345'),(4,1,'c','b','street4','zip4','city4','phone4'),(6,1,'Huey','Duck','Webfoot Street','1010','Duckburg','555.3456'),(7,1,'Dewey','Duck','Webfoot Street','2020','Duckburg','555-9876'),(8,1,'Louie','Duck','Webfoot Street','3030','Duckburg 3','555-8765'),(11,1,'b','Clapton','sdfg','12456^^^>','https://xd.adobe.com/','23343'),(14,1,'d','aa','','','<script>alert(\'test\')</script>','x'),(16,1,'Adam \"The Badass\"','Black','piouhpouhpouh','132213','piugpiugh','9760978');
+/*!40000 ALTER TABLE `addresses` ENABLE KEYS */;
+UNLOCK TABLES;
+
+--
+-- Table structure for table `users`
+--
+
+DROP TABLE IF EXISTS `users`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8 */;
+CREATE TABLE `users` (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `password` varchar(256) NOT NULL,
+  `nick` varchar(20) NOT NULL,
+  `first` varchar(40) NOT NULL,
+  `last` varchar(40) NOT NULL,
+  `is_admin` tinyint(1) NOT NULL,
+  PRIMARY KEY (`id`),
+  UNIQUE KEY `nick` (`nick`)
+) ENGINE=InnoDB AUTO_INCREMENT=23 DEFAULT CHARSET=utf8mb4;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Dumping data for table `users`
+--
+
+LOCK TABLES `users` WRITE;
+/*!40000 ALTER TABLE `users` DISABLE KEYS */;
+INSERT INTO `users` VALUES (1,'$argon2i$v=19$m=65536,t=4,p=1$OFV0Rnl6OXNWZXZJNTFjTw$fC9K1ykszZ/UaEm21XR9M3+XxnBc+dZ7PRIn5aaGw8I','donald','Donald','Duck',1),(2,'$argon2i$v=19$m=65536,t=4,p=1$NVRKNm0xUmplYkcwTFZXdw$GLp1jjLDBRjKSw6nH8SqqSls6fQPi4Hb7ot0k3naf5s','Daisy','Daisy','Duck',0);
+/*!40000 ALTER TABLE `users` ENABLE KEYS */;
+UNLOCK TABLES;
+/*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */;
+
+/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
+/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
+/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
+/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
+/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
+/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
+/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;
+
+-- Dump completed on 2022-11-01 18:37:04

Vanilla/config.json

@@ -0,0 +1,7 @@
+{
+  "dbHost": "localhost",
+  "dbPort": 3306,
+  "dbDatabase": "tracer_addressbook",
+  "dbUser": "tracer_addressbook",
+  "dbPassword": "SKTh_6#YM?%q"
+}

Vanilla/public/assets/js/functions.js

@@ -30,8 +30,15 @@ function editAddress(id) {
             .then(
                 response => response.text()
             ).then(
-                html => console.log(html)
-            );
+            json => {
+                let jsonObject = JSON.parse(json)
+                if (jsonObject.status === 200) {
+                    setInfo('Data successfully saved.')
+                } else {
+                    setError(jsonObject.message);
+                }
+            }
+        );
 
         document.getElementById('first_' + id).disabled = true
         document.getElementById('last_' + id).disabled = true
@@ -66,8 +73,15 @@ function deleteAddress(id) {
             .then(
                 response => response.text()
             ).then(
-                html => console.log(html)
-            );
+            json => {
+                let jsonObject = JSON.parse(json)
+                if (jsonObject.status === 200) {
+                    setInfo('Data successfully saved.')
+                } else {
+                    setError(jsonObject.message);
+                }
+            }
+        );
         let row = document.getElementById('row_' + id)
         row.parentNode.removeChild(row)
     }
@@ -84,17 +98,29 @@ function sortBy(column) {
         document.getElementById(title).innerHTML = upCase(title)
     )
 
-    // switch direction on every call
-    let currentSortOrder = document.getElementById(column + '_sort')
+    console.log("col", column)
+    console.log("curcol", currentColumn)
+
+    if (currentColumn === column) {
+        console.log("in switch")
+        // switch direction on every call on same column
+        if (currentSortOrder === 'asc') {
+            currentSortOrder = 'desc'
+        } else {
+            currentSortOrder = 'asc'
+        }
+        console.log("col", column)
+    } else {
+        currentColumn = column
+    }
+
     let currentTitleElement = document.getElementById(column)
     let currentTitle = currentTitleElement.innerHTML
-
     let newTitle
-    if (currentSortOrder.innerHTML === 'asc') {
-        currentSortOrder.innerHTML = 'desc'
+
+    if (currentSortOrder === 'asc') {
         newTitle = currentTitle[0] + currentTitle.substring(1) + ' ⬇'
     } else {
-        currentSortOrder.innerHTML = 'asc'
         newTitle = currentTitle[0] + currentTitle.substring(1) + ' ⬆'
     }
     currentTitleElement.innerHTML = newTitle
@@ -117,9 +143,8 @@ function sortBy(column) {
             let rowYNumber = rowYId.match(/\d+/)
             let valueY = document.getElementById(column + '_' + rowYNumber).value
 
-            let currentSortOrder = document.getElementById(column + '_sort')
             let sortOrder
-            if (currentSortOrder.innerHTML === 'asc') {
+            if (currentSortOrder === 'asc') {
                 sortOrder = 1
             } else {
                 sortOrder = -1
@@ -132,6 +157,47 @@ function sortBy(column) {
     }
 }
 
+
+function setInfo(info) {
+    const infoBox = document.getElementById('info_box')
+    infoBox.innerHTML = info
+    infoBox.style.display = 'block'
+    infoBox.classList.add('panel_float')
+    setTimeout(() => {
+        infoBox.style.display = 'none'
+    }, 2500)
+}
+
+function setError(error) {
+    const errorBox = document.getElementById('error_box')
+    const errorText = document.getElementById('error_text')
+    const infoButton = document.getElementById('info_button')
+    if (errorBox.style.display === 'block') {
+        errorBox.style.display = 'none'
+        return
+    }
+    if (infoButton != null) {
+        infoButton.disabled = true
+    }
+    errorText.innerHTML = error
+    errorBox.style.display = 'block'
+    errorBox.classList.add('panel_float')
+}
+
+function closeError() {
+    const errorBox = document.getElementById('error_box')
+    const infoButton = document.getElementById('info_button')
+    if (infoButton) {
+        infoButton.disabled = false
+    }
+    errorBox.style.display = 'none'
+
+}
+
+// global scope
+let currentSortOrder = 'desc'
+let currentColumn = 'last'
+
 document.addEventListener('DOMContentLoaded', () => {
     const table = document.getElementById('address_table') || false
     if (table) {

Vanilla/public/assets/styles/main.css

@@ -0,0 +1,127 @@
+body {
+    background: #1f1f1f;
+    color: #cdcdcd;
+}
+
+/* unvisited link */
+a:link {
+    color: #ff8844;
+    text-decoration: none;
+}
+
+/* visited link */
+a:visited {
+    color: #ff8844;
+    text-decoration: none;
+}
+
+/* mouse over link */
+a:hover {
+    color: #ff8844;
+    text-decoration: none;
+}
+
+/* selected link */
+a:active {
+    color: #ff8844;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+table, th, td {
+    border: 1px solid;
+}
+
+label {
+    display: block;
+    padding: 1ex;
+}
+
+.panel_float {
+    position: fixed;
+    overflow: hidden;
+    z-index: 2400;
+    opacity: 0.70;
+    margin: auto;
+    top: 110px !important;
+    -webkit-transition: all 0.5s ease-in-out;
+    -moz-transition: all 0.5s ease-in-out;
+    -ms-transition: all 0.5s ease-in-out;
+    -o-transition: all 0.5s ease-in-out;
+    transition: all 0.5s ease-in-out;
+}
+
+#info_box {
+    background-color: #3fc52a;
+    border: solid #cdcdcd;
+    border-radius: 5px;
+    color: #1f1f1f;
+    display: none;
+    padding: 10px;
+    font-weight: bold;
+    position: absolute;
+    z-index: 10;
+    width: 50%;
+    margin-left: 200px;
+    margin-right: 200px;
+}
+
+.info_button {
+    border-radius: 5px;
+    border: solid #cdcdcd;
+    color: #1f1f1f;
+    padding: 8px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    background-color: #3fc52a;
+    transition-duration: 0.4s;
+    cursor: pointer;
+}
+
+#error_box {
+    background-color: #e06844;
+    border: solid #cdcdcd;
+    border-radius: 5px;
+    color: #1f1f1f;
+    display: none;
+    padding: 10px;
+    font-weight: bold;
+    position: absolute;
+    z-index: 10;
+    width: 50%;
+    margin-left: 200px;
+    margin-right: 200px;
+}
+
+.error_button {
+    border-radius: 5px;
+    border: solid #cdcdcd;
+    color: #1f1f1f;
+    padding: 8px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    background-color: #e06844;
+    transition-duration: 0.4s;
+    cursor: pointer;
+}
+
+.close_button {
+    margin-left: 15px;
+    color: white;
+    font-weight: bold;
+    float: right;
+    font-size: 22px;
+    line-height: 20px;
+    cursor: pointer;
+    transition: 0.3s;
+}
+
+.close_button:hover {
+    color: black;
+}

Vanilla/src/Controller/AddressBookController.php

@@ -11,6 +11,7 @@ namespace App\Controller;
 
 use App\Entity\User;
 use App\Entity\AddressBookEntry;
+use App\Enums\StatusCode;
 use App\Enums\UserAuth;
 use App\Service\Router;
 use App\Service\Template;
@@ -71,16 +72,61 @@ class AddressBookController
     {
         $_POST = json_decode(json: file_get_contents(filename: "php://input"), associative: true);
 
-        $address = new AddressBookEntry(owner: $_POST['owner'], first: $_POST['first'], last: $_POST['last'], street: $_POST['street'], zip: $_POST['zip'], city: $_POST['city'], phone: $_POST['phone'], id: $_POST['id']);
-        $this->addressRepository->update(address: $address);
+        if (empty($_POST)) {
+            $this->template->renderJson(results: [
+                                                     'status'  => 400,
+                                                     'message' => 'BAD REQUEST'
+                                                 ]);
+        }
+
+        if ($address = new AddressBookEntry(owner: $_POST['owner'], first: $_POST['first'], last: $_POST['last'], street: $_POST['street'], zip: $_POST['zip'], city: $_POST['city'], phone: $_POST['phone'], id: $_POST['id'])) {
+            if ($this->addressRepository->update(address: $address)) {
+                $status  = 200;
+                $message = 'OK';
+            } else {
+                $status  = 400;
+                $message = 'BAD_REQUEST';
+            }
+        } else {
+            $status  = 400;
+            $message = "BAD REQUEST";
+        }
+
+        $this->template->renderJson(results: [
+                                                 'status'  => $status,
+                                                 'message' => $message
+                                             ]);
     }
 
     public function deleteAddress(): void
     {
-        echo "in del";
         $_POST = json_decode(json: file_get_contents(filename: "php://input"), associative: true);
+
+        if (empty($_POST)) {
+            $this->template->renderJson(results: [
+                                                     'status'  => 400,
+                                                     'message' => 'BAD REQUEST'
+                                                 ]);
+        }
+
         if ($address = $this->addressRepository->findByID(id: $_POST['id'])) {
-            $this->addressRepository->delete(addressBookEntry: $address);
+            if ($this->addressRepository->delete(addressBookEntry: $address)) {
+                $this->template->renderJson(results: [
+                                                         'status'  => 200,
+                                                         'message' => 'OK'
+                                                     ]);
+            } else {
+                $this->template->renderJson(results: [
+                                                         'status'  => 400,
+                                                         'message' => 'BAD REQUEST'
+                                                     ]);
+
+            }
+        } else {
+            $this->template->renderJson(results: [
+                                                     'status'  => 400,
+                                                     'message' => 'BAD REQUEST'
+                                                 ]);
         }
     }
 

Vanilla/src/Repository/AddressRepository.php

@@ -147,9 +147,7 @@ class AddressRepository
             $statement->bindParam(param: 'zip', var: $zip);
             $statement->bindParam(param: 'city', var: $city);
             $statement->bindParam(param: 'phone', var: $phone);
-            $statement->execute();
-
-            return $statement->rowCount();
+            return $statement->execute();
         } catch (PDOException $e) {
             echo $e->getMessage();
             return false;
@@ -167,9 +165,7 @@ class AddressRepository
             $statement = $this->databaseConnection->getConnection()->prepare(query: $sql);
             $id = $addressBookEntry->getId();
             $statement->bindParam(param: 'id', var: $id);
-            $statement->execute();
-
-            return $statement->rowCount();
+            return $statement->execute();
         } catch (PDOException $e) {
             exit($e->getMessage());
         }

Vanilla/src/Repository/UserRepository.php

@@ -137,7 +137,7 @@ class UserRepository
     }
 
 
-    public function update(User $user): bool|int
+    public function update(User $user): bool
     {
         $id = $user->getId();
         $nick = $user->getNick();
@@ -169,9 +169,7 @@ class UserRepository
             $statement->bindParam(param: 'first', var: $first);
             $statement->bindParam(param: 'last', var: $last);
             $statement->bindParam(param: 'is_admin', var: $isAdmin);
-            $statement->execute();
-
-            return $statement->rowCount();
+            return $statement->execute();
         } catch (PDOException $e) {
             echo $e->getMessage();
             return false;
@@ -179,7 +177,7 @@ class UserRepository
     }
 
 
-    public function delete(User $user): int
+    public function delete(User $user): bool
     {
         $sql = "
             DELETE FROM " . DatabaseConnection::TABLE_USERS . "
@@ -189,9 +187,7 @@ class UserRepository
             $statement = $this->databaseConnection->getConnection()->prepare(query: $sql);
             $id = $user->getId();
             $statement->bindParam(param: 'id', var: $id);
-            $statement->execute();
-
-            return $statement->rowCount();
+            return $statement->execute();
         } catch (PDOException $e) {
             exit($e->getMessage());
         }

Vanilla/src/Service/Template.php

@@ -41,4 +41,14 @@ class Template
         }
         exit(0);
     }
+
+    /*
+     * For AJAX calls, return json
+     */
+    public function renderJson(array $results): never
+    {
+        http_response_code(response_code: $results['status']);
+        echo json_encode(value: $results);
+        exit(0);
+    }
 }

Vanilla/templates/_footer.html.php

@@ -0,0 +1,7 @@
+    <script src="/assets/js/functions.js"></script>
+    <?php if (!empty($message)): ?>
+        <script>setError('<?= $message ?>')</script>
+    <?php endif; ?>
+
+    </body>
+</html>

Vanilla/templates/_header.html.php

@@ -18,5 +18,10 @@
 <?php else: ?>
     <a href="<?= $router->path('app_logout'); ?>">&#9099;&nbsp;Logout</a>
 <?php endif; ?>
-
+<br>
+<div id="info_box">Info</div>
+<div id="error_box">
+    <span class="close_button" onclick="closeError()">&times;</span>
+    <div id="error_text"></div>
+</div>
 <br>

Vanilla/templates/admin/index.html.php

@@ -0,0 +1,10 @@
+<?php include dirname(path: __DIR__) . '/_header.html.php'; ?>
+
+<br>
+<h1>Address Book - Admin</h1>
+<a href="<?= $router->path('app_admin_users'); ?>">&#128113;&nbsp;Users</a>
+
+<?php include dirname(path: __DIR__) . '/_footer.html.php' ?>
+
+<button type="button" class="info_button" id="info_button" onclick="setInfo('Test Info - auto hide')">Info</button>
+<button type="button" class="error_button" onclick="setError('Test Error - must be closed manually')">Error</button>

Vanilla/templates/index.html.php

@@ -33,14 +33,6 @@
             </td>
     </tr>
     <?php endforeach; ?>
-    <tr style="display:none;">
-        <td id="first_sort">desc</td>
-        <td id="last_sort">desc</td>
-        <td id="street_sort">desc</td>
-        <td id="zip_sort">desc</td>
-        <td id="city_sort">desc</td>
-        <td id="phone_sort">desc</td>
-    </tr>
 </table>
 </form>
 

Vanilla/templates/security/login.html.php

@@ -5,12 +5,6 @@
 <?php else: ?>
     <br>
 
-    <?php if ($message): ?>
-        <div class="info">
-            <?= $message ?>
-        </div>
-    <?php endif; ?>
-
     <form method="POST">
         <label for="nick">Username</label>
         <input type="text" name="nick" id="nick">

public/assets/styles/main.css

@@ -1,38 +0,0 @@
-body {
-    background: #1f1f1f;
-    color: #cdcdcd;
-}
-
-/* unvisited link */
-a:link {
-    color: #ff8844;
-    text-decoration: none;
-}
-
-/* visited link */
-a:visited {
-    color: #ff8844;
-    text-decoration: none;
-}
-
-/* mouse over link */
-a:hover {
-    color: #ff8844;
-    text-decoration: none;
-}
-
-/* selected link */
-a:active {
-    color: #ff8844;
-    text-decoration: none;
-    font-weight: bold;
-}
-
-table, th, td {
-    border: 1px solid;
-}
-
-label {
-    display: block;
-    padding: 1ex;
-}

templates/_footer.html.php

@@ -1,3 +0,0 @@
-    <script src="/assets/js/functions.js"></script>
-    </body>
-</html>

templates/admin/index.html.php

@@ -1,6 +0,0 @@
-<?php include dirname(path: __DIR__) . '/_header.html.php'; ?>
-
-<h1>Address Book - Admin</h1>
-<a href="<?= $router->path('app_admin_users'); ?>">&#128113;&nbsp;Users</a>
-
-<?php include dirname(path: __DIR__) . '/_footer.html.php' ?>