implemented comment show

Projekte/proxdroid.php

@@ -1,5 +1,6 @@
 <?php
 include "../internal/mysql.php";
+include "../internal/getGravatar.php";
 
 ?>
 
@@ -67,6 +68,29 @@ include "../internal/mysql.php";
     <img src="/img/Nexus_6P_-_Screenshot_41-576x1024.png">
 
     <h2>Kommentare:</h2>
+    <?php
+
+    $article = basename($_SERVER["SCRIPT_FILENAME"], '.php');
+    $result = $conn->query("SELECT * FROM comments WHERE article='$article'");
+    if ($result->num_rows > 0) {
+        while($row = $result->fetch_assoc()) {
+            $name = $row["name"] . "<br>";
+            $gravatar = get_gravatar($row["email"]);
+            $content = $row["comment"];
+
+            echo(<<<EOF
+            <h3 class="commentTitle">$name</h3>
+            <div class="comment">
+                <img src="$gravatar">
+                <article class="commentArticle">
+                    <p class="commentText">$content</p>
+                </article>
+            </div>
+            EOF);
+        }
+    }
+    ?>
+
     <div id="newComment">
         <form action="/newComment.php" method="post">
             <label for="name">Name:</label><br>
@@ -79,7 +103,7 @@ include "../internal/mysql.php";
             <textarea name="comment" id="comment"></textarea><br><br>
 
             <input type="submit" value="Kommentar ver&ouml;ffentlichen"><br>
-            <p>Mit dem klick auf den obigen Button erklären sie sich mit der <a href="/datenschutzerklaerung.html">Datenschutzerkl&auml;rung</a> einverstanden.</p>
+            <p>Mit dem klick auf den obigen Button erkl&auml;ren sie sich mit der <a href="/datenschutzerklaerung.html">Datenschutzerkl&auml;rung</a> einverstanden.</p>
         </form>
     </div>
 </div>

css/style.css

@@ -423,4 +423,31 @@ button{
     cursor: pointer;
     outline: 0;
     border: 0;
+}
+
+.comment{
+    display: flex;
+}
+
+.commentTitle{
+    margin-bottom: 5px;
+}
+
+.comment img{
+    margin-right: 10px;
+    width: 100px;
+    height: 100px;
+}
+
+.commentArticle{
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    min-height: 100px;
+}
+
+.commentText{
+    margin: 0;
+    width: 100%;
 }

internal/getGravatar.php

@@ -0,0 +1,25 @@
+<?php
+/**
+* Get either a Gravatar URL or complete image tag for a specified email address.
+*
+* @param string $email The email address
+* @param string $s Size in pixels, defaults to 80px [ 1 - 2048 ]
+* @param string $d Default imageset to use [ 404 | mp | identicon | monsterid | wavatar ]
+* @param string $r Maximum rating (inclusive) [ g | pg | r | x ]
+* @param boole $img True to return a complete IMG tag False for just the URL
+* @param array $atts Optional, additional key/value attributes to include in the IMG tag
+* @return String containing either just a URL or a complete image tag
+* @source https://gravatar.com/site/implement/images/php/
+*/
+function get_gravatar( $email, $s = 80, $d = 'mp', $r = 'g', $img = false, $atts = array() ) {
+$url = 'https://www.gravatar.com/avatar/';
+$url .= md5( strtolower( trim( $email ) ) );
+$url .= "?s=$s&d=$d&r=$r";
+if ( $img ) {
+$url = '<img src="' . $url . '"';
+foreach ( $atts as $key => $val )
+$url .= ' ' . $key . '="' . $val . '"';
+$url .= ' />';
+}
+return $url;
+}