Add likes and styling

public/normalize.css

@@ -0,0 +1,351 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+       ========================================================================== */
+
+/**
+     * Remove the margin in all browsers.
+     */
+
+body {
+    margin: 0;
+}
+
+/**
+     * Render the `main` element consistently in IE.
+     */
+
+main {
+    display: block;
+}
+
+/**
+     * Correct the font size and margin on `h1` elements within `section` and
+     * `article` contexts in Chrome, Firefox, and Safari.
+     */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+/* Grouping content
+       ========================================================================== */
+
+/**
+     * 1. Add the correct box sizing in Firefox.
+     * 2. Show the overflow in Edge and IE.
+     */
+
+hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+}
+
+/**
+     * 1. Correct the inheritance and scaling of font size in all browsers.
+     * 2. Correct the odd `em` font sizing in all browsers.
+     */
+
+pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+       ========================================================================== */
+
+/**
+     * Remove the gray background on active links in IE 10.
+     */
+
+a {
+    background-color: transparent;
+}
+
+/**
+     * 1. Remove the bottom border in Chrome 57-
+     * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+     */
+
+abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+}
+
+/**
+     * Add the correct font weight in Chrome, Edge, and Safari.
+     */
+
+b,
+strong {
+    font-weight: bolder;
+}
+
+/**
+     * 1. Correct the inheritance and scaling of font size in all browsers.
+     * 2. Correct the odd `em` font sizing in all browsers.
+     */
+
+code,
+kbd,
+samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+}
+
+/**
+     * Add the correct font size in all browsers.
+     */
+
+small {
+    font-size: 80%;
+}
+
+/**
+     * Prevent `sub` and `sup` elements from affecting the line height in
+     * all browsers.
+     */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+sup {
+    top: -0.5em;
+}
+
+/* Embedded content
+       ========================================================================== */
+
+/**
+     * Remove the border on images inside links in IE 10.
+     */
+
+img {
+    border-style: none;
+}
+
+/* Forms
+       ========================================================================== */
+
+/**
+     * 1. Change the font styles in all browsers.
+     * 2. Remove the margin in Firefox and Safari.
+     */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+}
+
+/**
+     * Show the overflow in IE.
+     * 1. Show the overflow in Edge.
+     */
+
+button,
+input {
+    /* 1 */
+    overflow: visible;
+}
+
+/**
+     * Remove the inheritance of text transform in Edge, Firefox, and IE.
+     * 1. Remove the inheritance of text transform in Firefox.
+     */
+
+button,
+select {
+    /* 1 */
+    text-transform: none;
+}
+
+/**
+     * Correct the inability to style clickable types in iOS and Safari.
+     */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+    -webkit-appearance: button;
+}
+
+/**
+     * Remove the inner border and padding in Firefox.
+     */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+}
+
+/**
+     * Restore the focus styles unset by the previous rule.
+     */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+}
+
+/**
+     * Correct the padding in Firefox.
+     */
+
+fieldset {
+    padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+     * 1. Correct the text wrapping in Edge and IE.
+     * 2. Correct the color inheritance from `fieldset` elements in IE.
+     * 3. Remove the padding so developers are not caught out when they zero out
+     *    `fieldset` elements in all browsers.
+     */
+
+legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+}
+
+/**
+     * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+     */
+
+progress {
+    vertical-align: baseline;
+}
+
+/**
+     * Remove the default vertical scrollbar in IE 10+.
+     */
+
+textarea {
+    overflow: auto;
+}
+
+/**
+     * 1. Add the correct box sizing in IE 10.
+     * 2. Remove the padding in IE 10.
+     */
+
+[type="checkbox"],
+[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+     * Correct the cursor style of increment and decrement buttons in Chrome.
+     */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+}
+
+/**
+     * 1. Correct the odd appearance in Chrome and Safari.
+     * 2. Correct the outline style in Safari.
+     */
+
+[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+}
+
+/**
+     * Remove the inner padding in Chrome and Safari on macOS.
+     */
+
+[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+     * 1. Correct the inability to style clickable types in iOS and Safari.
+     * 2. Change font properties to `inherit` in Safari.
+     */
+
+::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+}
+
+/* Interactive
+       ========================================================================== */
+
+/*
+     * Add the correct display in Edge, IE 10+, and Firefox.
+     */
+
+details {
+    display: block;
+}
+
+/*
+     * Add the correct display in all browsers.
+     */
+
+summary {
+    display: list-item;
+}
+
+/* Misc
+       ========================================================================== */
+
+/**
+     * Add the correct display in IE 10+.
+     */
+
+template {
+    display: none;
+}
+
+/**
+     * Add the correct display in IE 10.
+     */
+
+[hidden] {
+    display: none;
+}

public/style.css

@@ -1,20 +1,41 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap");
+
+p {
+    margin: 0;
+}
+
+body {
+    background-color: #e0e0e0;
+    font-family: "Roboto", sans-serif;
+    font-weight: 300;
+}
+
+header {
+    margin: auto;
+    width: 800px;
+}
+
+main {
+    border-radius: 7px;
+    max-width: 800px;
+    min-width: 400px;
+    height: fit-content;
+    background-color: white;
+    padding: 40px;
+    margin: 20px auto;
+}
+
 form {
     display: flex;
     flex-direction: column;
+    margin-bottom: 2em;
+    font-weight: 300;
 }
 
 label {
     display: flex;
     flex-direction: column;
-}
-
-input,
-textarea {
-    max-width: 500px;
-}
-
-p {
-    margin: 0.25em 0;
+    margin-bottom: 1em;
 }
 
 .post {
@@ -25,3 +46,21 @@ p {
 .comment {
     margin-left: 10px;
 }
+
+.name {
+    font-weight: 500;
+    margin-bottom: 0.5em;
+}
+
+.content {
+    margin-bottom: 0.5em;
+}
+
+.like {
+    display: flex;
+    flex-direction: row;
+}
+
+.like-button {
+    margin: 0 0 0.5em 0.25em;
+}

src/Controller/CommentController.php

@@ -23,4 +23,13 @@ class CommentController
 
         $this->app->reroute('/home');
     }
+
+    public function like($commentId)
+    {
+        $stmt = $this->app["db"]->prepare("UPDATE comments SET likes = (SELECT likes FROM comments WHERE id = :commentid) + 1 WHERE id = :commentid;");
+        $stmt->bindValue(":commentid", intval($commentId), SQLITE3_TEXT);
+        $res = $stmt->execute();
+
+        return $this->app->reroute('/home');
+    }
 }

src/Controller/HomeController.php

@@ -34,10 +34,7 @@ class HomeController
             $posts[] = $post;
         }
 
-        error_log(print_r($posts, TRUE));
-
         $data = [];
-
         $data['posts'] = $posts;
 
         if (isset($_POST['comment'])) {

src/Controller/PostController.php

@@ -22,4 +22,13 @@ class PostController
 
         return $this->app->reroute('/home');
     }
+
+    public function like($postId)
+    {
+        $stmt = $this->app["db"]->prepare("UPDATE posts SET likes = (SELECT likes FROM posts WHERE id = :postid) + 1 WHERE id = :postid;");
+        $stmt->bindValue(":postid", intval($postId), SQLITE3_TEXT);
+        $res = $stmt->execute();
+
+        return $this->app->reroute('/home');
+    }
 }

views/base.php

@@ -5,11 +5,10 @@
     <meta charset="UTF-8">
     <title>microblog</title>
     <link rel="stylesheet" href="<?= $this->routeUrl('/style.css') ?>">
+    <link rel="stylesheet" href="<?= $this->routeUrl('/normalize.css') ?>">
 </head>
 
 <body>
-    <h1><a href="<?= $this->routeUrl('/home') ?>">Home</a></h1>
-    <hr>
     <?php echo $content_for_layout; ?>
 </body>
 

views/home.php

@@ -1,21 +1,31 @@
-<div>
-    <form action="/post/create" method="post" enctype="multipart/form-data">
-        <label for="name">
-            name
-            <input type="text" name="name" id="name">
-        </label>
-        <label for="content">
-            content
-            <textarea name="content" id="content"></textarea>
-        </label>
-        <input type="submit" value="Submit">
-    </form>
+<header>
+    <h1>Twatter</h1>
+</header>
+<main>
+    <div>
+        <h2>create new post</h2>
+        <form action="/post/create" method="post" enctype="multipart/form-data">
+            <label for="name">
+                name
+                <input type="text" name="name" id="name">
+            </label>
+            <label for="content">
+                content
+                <textarea name="content" id="content"></textarea>
+            </label>
+            <input type="submit" value="Submit">
+        </form>
+    </div>
 
     <div>
         <?php foreach ($posts as $post) { ?>
             <div class="post">
-                <p><?= $post["name"] ?></p>
-                <p><?= $post["content"] ?></p>
+                <p class="name"><?= $post["name"] ?></p>
+                <p class="content"><?= $post["content"] ?></p>
+                <div class="like">
+                    <p><?= $post["likes"] ?></p>
+                    <a class="like-button" href="/post/like/<?= $post["id"] ?>"><button>like</button></a>
+                </div>
 
                 <?php if ($post["id"] == $commentId) { ?>
                     <form action="/comment/create/<?= $post["id"] ?>" method="post" enctype="multipart/form-data">
@@ -29,17 +39,23 @@
                         </label>
                         <input type="submit" value="Submit">
                     </form>
+
                 <?php } else { ?>
                     <form action="/home" method="post" enctype="multipart/form-data">
-                        <button type="submit" name="comment" value="<?= $post["id"] ?>">Comment</button>
+                        <button class="comment-button" type="submit" name="comment" value="<?= $post["id"] ?>">Comment</button>
                     </form>
                 <?php } ?>
 
                 <?php if (isset($post['comment'])) {
                     foreach ($post["comment"] as $comment) { ?>
                         <div class="comment">
-                            <p><?= $comment["name"] ?></p>
-                            <p><?= $comment["content"] ?></p>
+                            <p class="name"><?= $comment["name"] ?></p>
+                            <p class="content"><?= $comment["content"] ?></p>
+                            <div class="like">
+                                <p><?= $comment["likes"] ?></p>
+                                <a class="like-button" href="/comment/like/<?= $comment["id"] ?>"><button>like</button></a>
+                            </div>
+
                         </div>
                 <?php }
                 } ?>
@@ -47,4 +63,4 @@
             </div>
         <?php } ?>
     </div>
-</div>
+</main>