melhorias

assets/css/style.css

@@ -1,85 +1,147 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
+
 *{
 	padding:0;
 	margin: 0;
 	box-sizing: border-box;
 }
 
 body{
-	background: #F5F5F5;
-	font-family: 'Segoe UI','Arial';
+	background-color: #141314;
+	font-family: 'Inter','Arial', sans-serif;
 }
 
 h1, label, h4{
-	color: #152029;
+	color: #e6e1e3;
 }
 
 h1 {
-	font-size: 22px;
+	font-size: 30px;
 	margin-bottom: 25px;
 }
 
 label{
+	text-align: left;
 	font-size: 11px;
 	opacity: .7;
 }
 
 section.content{
 	width: 1000px;
 	height: 100vh;
-	background: #fff;
-	box-shadow: 0px 0px 10px #CCC;
-	margin: 0 auto;
+	margin: 20px auto;
 }
 
 div.box_form{
-	border-bottom: 1px solid #DDD;
-	padding: 15px 25px;
-	background: #F5F5F5;
+	text-align: center;
+	padding: 15px 30px;
+	background-color: #1C1D1B;
+	border-radius: 24px;
+	margin-bottom: 20px;
+
 }
 
-div.box_form > form > input, div.box_form > form > textarea {
-	border: 1px solid #ddd;
-	margin-top: 4px;
-	color:#666;
-	border-radius: 3px;
-	padding: 10px 15px;
+.form1 {
+	width: 100%;
+}
+
+.formReplyDiv {
+	text-align: center;
+}
+
+#formReply {
+	width: 100%;
+}
+
+.input {
+	display: inline-block;
+	text-align: left;
+}
+
+.input-bt {
+	display: inline-block;
 }
 
-div.box_form > form > input {
-	width: 275px;
+div.box_form > form > div.input > input, div.box_form > form > div.input > textarea, #formReply > div.input > input, #formReply > div.input > textarea {
+	border: 1px solid #c2c9d64d;
+	background-color: #141314;
+	margin-top: 4px;
+	color:#A7A6A6;
+	border-radius: 10px;
+	padding: 10px 15px;
 }
 
-div.box_form > form > textarea {
-	width: 405px;
-	height: 155px;
+div.box_form > form > div.input > input {
+	width: 700px;
 }
 
-div.box_form > form > input:focus, div.box_form > form > textarea:focus{
-	outline: 0;
+div.box_form > form > div.input > textarea {
+	width: 700px;
+	height: 100px;
 }
 
-div.box_form > form > input.btn-sub {
-	background: #C0362C;
-	color:#F5F5F5;
+div.box_form > form > div.input-bt > input.btn-sub, #formReply > div.input-bt > input.btn-sub {
+	padding: 10px 15px;
+	background-color: #238636;
+	color:#e6e1e3;
 	cursor: pointer;
 	border:0;
-	border-radius: 3px;
+	border-radius: 10px;
+}
+
+div.box_form > form > div.input-bt > input.btn-sub {
+	width: 700px;
 }
 
-div.box_form > form > input.btn-sub:hover{
-	transition: all .3s;
-	box-shadow: 5px 5px 4px #CCC;
-	opacity: .9;
+div.box_form > form > div.input-bt > input.btn-sub:hover, #formReply > div.input-bt > input.btn-sub:hover{
+	background-color: #3b8d4c;
 }
 
 .b_comm {
+	color: #A7A6A6;
+	margin: 10px 0px;
+	border-radius: 24px;
 	padding: 30px;	
 }
 
-.b_comm:nth-child(even){
-	background-color: #F5F5F5;
+.b_rep {
+	color: #A7A6A6;
+	margin: 5px 0px;
+	border-radius: 15px;
+	padding: 10px 20px;	
+}
+
+.b_comm:nth-child(even), .b_rep:nth-child(even){
+	background-color: #141314;
+}
+
+.b_comm:nth-child(odd), .b_rep:nth-child(odd){
+	background-color: #1C1D1B;
+}
+
+.btn {
+	background-color: #1c1d1b00;
+	border: none;
+	margin: 5px 10px;
+}
+
+.btn:hover {
+	opacity: .6;
+}
+
+.btn img {
+	width: 25px;
+	height: 25px;
+}
+
+#formReply input, #formReply textarea{
+	width: 400px;
+	border-radius: 10px;
+	padding: 10px 15px;
+}
+
+footer {
+	color:#e6e1e3;
+	text-align: center;
 }
 
-.b_comm:nth-child(odd){
-	background-color: #DDD;
-}

assets/js/script.js

@@ -1,36 +1,130 @@
 
-$('#form1').submit(function(e){
-    e.preventDefault();
+$('#form1').submit(function(req) {
+    req.preventDefault();
 
     var u_name = $('#name').val();
     var u_comment = $('#comment').val();
 
-    //console.log(u_name, u_comment);
     $.ajax({
-        url: 'http://localhost/PROJS/VIDEO_AULAS/SERIE/03_AJAX_e_PHP/inserir.php',
+        url: 'http://localhost/ajax_com_php/inserir.php',
         method: 'POST',
-        data: {name: u_name, comment:u_comment},
+        data: {name: u_name, comment: u_comment},
         dataType: 'json'
     }).done(function(result){
-        $('#name').val('');
-        $('#comment').val('');
-        console.log(result);
+        $('#name').val("");
+        $('#comment').val("");
+        $('.box_comment').empty();
         getComments();
     });
 });
 
 function getComments() {
     $.ajax({
-        url: 'http://localhost/PROJS/VIDEO_AULAS/SERIE/03_AJAX_e_PHP/selecionar.php',
+        url: 'http://localhost/ajax_com_php/selecionar.php',
         method: 'GET',
         dataType: 'json'
     }).done(function(result){
-        console.log(result);
+        for(const comment of result) {
+            var html = '<div class="b_comm" data-id="' + comment['id'] + '">';
+            html += '<h4>'+ comment['name'] +'</h4>';
+            html += '<p>'+ comment['comment'] +'</p>';
+            html += '<button class="btn" onclick="likeComment('+ comment['id'] +', '+ 1 +', '+ comment['like_val'] +')"><img src="assets/img/like.png" id="img-like-'+ comment['id'] +'"></button>';
+            html += '<button class="btn" onclick="likeComment('+ comment['id'] +', '+ 0 +', '+ comment['like_val'] +')"><img src="assets/img/dislike.png" id="img-dislike-'+ comment['id'] +'"></button>';
+            html += '<button class="btn" onclick="replyComment('+ comment['id'] +')"><img src="assets/img/reply.png"></button>';
+            html += '<button class="btn" onclick="delComment('+ comment['id'] +')"><img src="assets/img/delete.png"></button>';
+            html += '</div>';
+            $('.box_comment').prepend(html);
+            if((comment['like_val'] != null) && (comment['like_val'] == 1)) {
+                $('#img-like-'+ comment['id']).attr('src', 'assets/img/like-press.png');
+            } else if ((comment['like_val'] != null) && (comment['like_val'] == 0)) {
+                $('#img-dislike-'+ comment['id']).attr('src', 'assets/img/dislike-press.png');
+            }
+            getReplys(comment['id']);
+        }
+    });
+}
+
+function delComment(id) {
+    $.ajax({
+        url: 'http://localhost/ajax_com_php/deletar.php',
+        method: 'POST',
+        data: {comment_id: id},
+        dataType: 'json'
+    }).done(function(result){
+        $('.b_comm[data-id="' + id + '"]').remove();
+    });
+}
 
-        for (var i = 0; i < result.length; i++) {
-            $('.box_comment').prepend('<div class="b_comm"><h4>' + result[i].name + '</h4><p>' + result[i].comment + '</p></div>');
+function likeComment(id, value, likeVal) {
+    if (likeVal != null) {
+        if(likeVal == value) {
+            value = null;
         }
+    }
+    $.ajax({
+        url: 'http://localhost/ajax_com_php/curtir.php',
+        method: 'POST',
+        data: {comment_id: id, like_value: value},
+        dataType: 'json'
+    }).done(function(result){
+        $('.box_comment').empty();
+        getComments();
     });
 }
 
-getComments();
+formReply = 0;
+
+function replyComment(id) {
+    $.ajax({
+        url: 'http://localhost/ajax_com_php/reply.php',
+        method: 'GET',
+        data: {comment_id: id},
+        dataType: 'html'
+    }).done(function(result){
+        if(formReply == 0) {
+            $('.b_comm[data-id="' + id + '"]').append(result);
+            formReply += 1;
+        } else if(formReply == 1){
+            $('.formReplyDiv').empty();
+            formReply -= 1;
+        }
+    });
+}
+
+$('#formReply').submit(function(req) {
+    req.preventDefault();
+
+    var u_name = $('#nameReply').val();
+    var u_comment = $('#commentReply').val();
+    var u_comment_id = $('#commentId').val();
+    $.ajax({
+        url: 'http://localhost/ajax_com_php/reply-save.php',
+        method: 'POST',
+        data: {name: u_name, comment: u_comment, comment_id: u_comment_id},
+        dataType: 'json'
+    }).done(function(result){
+        $('.box_comment').empty();
+        getComments();
+    });
+});
+
+function getReplys(id) {
+    $.ajax({
+        url: 'http://localhost/ajax_com_php/selecionar-replys.php',
+        method: 'GET',
+        data: {comment_id: id},
+        dataType: 'json'
+    }).done(function(result){
+        if(result != 'Nenhum resultado encontrado!') {
+            var div = '<h4> Respostas: </h4>';
+            $('.b_comm[data-id="' + id + '"]').append(div);
+        }
+        for(const reply of result) {
+            var html = '<div class="b_rep">';
+            html += '<h4>'+ reply['name'] +'</h4>';
+            html += '<p>'+ reply['comment'] +'</p>';
+            html += '</div>';
+            $('.b_comm[data-id="' + reply['comment_id'] + '"]').append(html);
+        }
+    });
+}

curtir.php

@@ -0,0 +1,25 @@
+<?php
+
+    header('Content-Type: application/json');
+
+
+    $pdo = new PDO('mysql:host=localhost; dbname=db_comment;', 'root', '');
+
+
+    if(($_POST['like_value']) != null) {
+        $value = $_POST['like_value'] ? 1 : 0;
+    } else {
+        $value = null;
+    }
+
+    $stmt = $pdo->prepare('UPDATE comments SET like_val = :va WHERE id = :id;');
+    $stmt->bindValue(':va', $value);
+    $stmt->bindValue(':id', $_POST['comment_id']);
+    $stmt->execute();
+
+
+    if($stmt->rowCount() >= 1) {
+        echo json_encode('Comentário curtido/descurtido com Sucesso!');
+    } else {
+        echo json_encode('Falha ao curtir/descurtir comentário');
+    }