БЛОГ НА HUSL


Как добавить комментарий к посту?

Автор вопроса: Александр Мирний

Задача: Для каждого поста иметь возможность оставить комментарий. В данный момент застрял и не могу понять как это реализовать. Впервые использую Ajax.

Вот мой код:

index.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script
        src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
        crossorigin="anonymous"></script>

    <link rel="stylesheet" type="text/css" href="Css/style.css">
    <link rel="stylesheet" type="text/css" href="Css/style2.css">

</head>

<body>
<h1 style="text-align: center">Post</h1>
<div style="text-align: right">
<button onclick="add_post()" type="button">Добавить Пост</button>
</div>
<br>
<div id="overlay">
    <div class="popup">
        <button class="close" title="Закрыть окно" onclick="close_post()"></button>
        <h3 class="zag">Добавить запись</h3>
        <p class="zag">Укажите свое имя</p>
         <input type="text" name="name" class="name" style="width: 590px"> <br>
        <p class="zag">Запишите пост</p>
        <textarea name="post" id="" class="post" cols="72" rows="10"></textarea><br>
        <button class="otpravka">Создать</button>
    </div>
</div>

<br>

<br>

<div class="pst">
    <div id="overlays">
        <div class="popups">
            <button class="closes" title="Закрыть окно" onclick="comment_close()"></button>
            <h3 class="zags">Добавить коментарий</h3>
            <p class="zags">Укажите свое имя</p>
            <input type="text" name="name_comment" class="name_comment" style="width: 590px"> <br>
            <p class="zags">Запишите свой комментрий</p>
            <textarea name="comments" id="" class="comments" cols="72" rows="10"></textarea><br>
            <button class="comment">Оставить</button>
        </div>

    </div>
    <br>
    <div class="pste" style="width: 50%">
    </div>
</div>
<script>

    let b = document.getElementById('overlay');
    function add_post(){
        b.style.visibility = 'visible';
        b.style.opacity = '1';
        b.style.transition = 'all 0.7s ease-out 0s';
    }
    function close_post(){
        b.style.visibility = 'hidden';
        b.style.opacity = '0';
    }

    let c = document.getElementById('overlays');
    function comment_add(){
        c.style.visibility = 'visible';
        c.style.opacity = '1';
        c.style.transition = 'all 0.7s ease-out 0s';
    }
    function comment_close(){
        c.style.visibility = 'hidden';
        c.style.opacity = '0';
    }
</script>

<script>
    $(document).ready(function () {
        $('button.otpravka').on('click', function () {
            b.style.visibility = 'hidden';
            b.style.opacity = '0';
            let nameValue = $('input.name').val();
            let postValue = $('textarea.post').val();

            $.ajax({
                method: "POST",
                url: "some.php",
                data: { name: nameValue, post: postValue}

            })
                .done(function () {
                    $.ajax({
                        url: "some.php",
                        dataType: 'json'
                    })
                        .done(function (data) {
                            // console.log(data);
                            data.forEach(item => {
                                $(".pst").append(renderMessage(item));
                            })

                        });
                });
            $('input.name').val('');
            $('textarea.post').val('');

        });

        $('button.comment').on('click', function () {
            c.style.visibility = 'hidden';
            c.style.opacity = '0';
            let name_commentValue = $('input.name_comment').val();
            let commentsValue = $('textarea.comments').val();

            $.ajax({
                method: "POST",
                url: "some1.php",
                data1: { name_comment: name_commentValue, comments: commentsValue}

            })
                .done(function (data) {
                    $.ajax({
                        url: "query1.php",
                        dataType: 'json'
                    })
                        .done(function (data1) {
                            data1.forEach(value => {
                                $(".pste").append(renderMessages(value));
                            })
                        });
                });

            $('input.name_commentValue').val('');
            $('textarea.commentValue').val('');
        });
    })
    $.ajax({
        url: "query.php",
        dataType: 'json'
    })
        .done(function (data) {

            data.forEach(item => {
                $(".pst").append(renderMessage(item));
            })
        });

    function renderMessage(item) {
        return `

                    <fieldset>

    <p style="text-align: right"><button onclick="comment_add()" type="button">Добавить комментрий</button></p>


                    <h3 class="name">${item.name}</h3>
                    <p class="post"> ${item.post}</p>

                    </fieldset>

                    <br>
                    <br>

                `
    }
    function renderMessages(value) {
        return `
                    <fieldset>
                    <h3 class="name_comment">${value.name_comment}</h3>
                    <p class="comments"> ${value.comments}</p>
                    </fieldset>


                `
    }
</script>
</body>
</html>

query.php

<?php
$data = [
    "name" => $_POST['name'],
    "post" => $_POST['post']
];

$db = [
    'dsn' => 'mysql:host=test_mysql:3306;dbname=test_mysql;charset=utf8',
    'user' => 'root',
    'pass' => '21167221'
];

$connection = new PDO($db['dsn'], $db['user'], $db['pass']);


$sqls = 'SELECT * FROM posts';
try {
    $res = $connection->query($sqls)->fetchAll(PDO::FETCH_ASSOC);
    echo json_encode($res);
}
catch (PDOException $e){
    echo '<pre>'; print_r($sqls); echo  '</pre>';
    $this->error($e->getMessage());
}

some.php

<?php

$data = [
    "name" => $_POST['name'],
    "post" => $_POST['post']
];


$db = [
    'dsn' => 'mysql:host=test_mysql:3306;dbname=test_mysql;charset=utf8',
    'user' => 'root',
    'pass' => '21167221'
];

$connection = new PDO($db['dsn'], $db['user'], $db['pass']);
$sql = 'INSERT INTO posts (name, post) VALUE (:name, :post)';
$statement = $connection->prepare($sql);
$result = $statement->execute($data);

$sqls = 'SELECT * FROM posts ORDER BY id DESC LIMIT 1';
try {
    $res = $connection->query($sqls)->fetchAll(PDO::FETCH_ASSOC);
    echo json_encode($res);
}
catch (PDOException $e){
    echo '<pre>'; print_r($sqls); echo  '</pre>';
    $this->error($e->getMessage());
}

?>

some1

<?php
$data1 = [
    "name_comment" => $_POST['name_comment'],
    "comments" => $_POST['comments']
];

$db = [
    'dsn' => 'mysql:host=test_mysql:3306;dbname=test_mysql;charset=utf8',
    'user' => 'root',
    'pass' => '21167221'
];

$connection = new PDO($db['dsn'], $db['user'], $db['pass']);

$sqlss = 'INSERT INTO comment (name_comment, comments) VALUE (:name_comment, :comments)';
$statement = $connection->prepare($sqlss);
$result = $statement->execute($data1);

query1

<?php
$db = [
    'dsn' => 'mysql:host=test_mysql:3306;dbname=test_mysql;charset=utf8',
    'user' => 'root',
    'pass' => '21167221'
];

$connection = new PDO($db['dsn'], $db['user'], $db['pass']);


$sqlsi = 'SELECT * FROM comment';
try {
    $rese = $connection->query($sqlsi)->fetchAll(PDO::FETCH_ASSOC);
    echo json_encode($rese);
}
catch (PDOException $b){
    echo '<pre>'; print_r($sqlsi); echo  '</pre>';
    $this->error($b->getMessage());
}

Таблицы БД

CREATE TABLE `posts` (
  `id` int(11) NOT NULL,
  `name` varchar(255) NOT NULL,
  `post` varchar(500) NOT NULL
)

CREATE TABLE `comment` (
  `id` int(11) NOT NULL,
  `name_comment` varchar(255) NOT NULL,
  `comments` varchar(500) NOT NULL
)

Вот так выглядит страница: Вот так выглядит станица

Вопрос как сделать так что бы добавленный комментарий был под определенным постом?


Источник

Ответы (0 шт):

licensed under cc by-sa 3.0 with attribution.