Как реализовать удаление записи из таблицы?

Question

[Aleksandr Yurchenko]

Здравствуйте.

Как реализовать удаление записи из таблицы через админку

Есть таблица result, она состоит из:
В админке информацию подгружаю следующим образом: id_shorter(id), dt (время добавления), external_url(внешняя ссылка), created_short_id(id сокращенной ссылки).

таблица result

Информацию из бд подгружаю следующим образом:

Вывод информации

<table class="table view_list">
    <thead class="thead-dark">
    <tr>
        <th scope="col">Created date</th>
        <th scope="col">External url</th>
        <th scope="col">Short url</th>
        <th scope="col" class="text-center">Operations</th>
    </tr>
    </thead>
    <tbody>
    <?php foreach ($sth as $value): ?>
        <tr>
            <td><?= dateMysqlConvert($value['dt']) ?></td>
            <td>
                <a href="<?= $value['external_url'] ?>" target="_blank"><?= $value['external_url'] ?></a>
            </td>
            <td>
                <a href="<?= 'r_' . $value['created_short_id'] ?>"
                   target="_blank"><?= "http://{$_SERVER['HTTP_HOST']}/r_{$value['created_short_id']}" ?></a>
            </td>
            <td class="text-center">
                <a href="#" class="badge badge-danger badge_custom">
                    <i class="fas fa-trash-alt fa_pencil_alt_custom"></i>
                </a>
            </td>
        </tr>
    <?php endforeach; ?>
    </tbody>
</table>

Визуально это выглядит

Как правильно реализовать удаление каждой записи по отдельности (в html разметке я для это выделил (на скрине, как не трудно догадаться это корзина :) ):

<td class="text-center">
                <a href="#" class="badge badge-danger badge_custom">
                    <i class="fas fa-trash-alt fa_pencil_alt_custom"></i>
                </a>
            </td>

Возможно это не правильно и вывод информации нужно сделать, как-то иначе. Ранее с такой задачей не сталкивался поэтому встрял на этом вопросе.

Пробовал на

<a href="#" class="badge badge-danger badge_custom">

(href) вещать удаление. Но так, как вывод информации идет в цикле, то при загрузке админки, цикл проходит и удаляет все записи), а как сделать иначе - не догнать :(

Answer 1

[Daria Motorina]

Стандартно выглядит так: на иконки вида "просмотр", "редактирование", "удаление" вешаются ссылки с урлом, который ведут на экшен выполнения этого действия и прокидывается id записи.
В вашем случае надо:

<td class="text-center">
       <a href="/action-to-delete-row?id=123" class="badge badge-danger badge_custom">
            <i class="fas fa-trash-alt fa_pencil_alt_custom"></i>
       </a>
</td>

В файле, который открывается по урлу "/action-to-delete-row", описываете логику удаления записи с переданным через гет-параметр id.
Удобнее будет сгенерировать страницу админки с готовыми урлами такого рода.

Comments

[Aleksandr Yurchenko]

блин, а я пробовал вешать или переменную, которая указывала на запрос (удаления), либо пытался вкорячить функцию. Блин и ведь даже мысли не промелькнуло, что на ссылку нужно вешать обработчик :)

Спасибо попробую :)

[FanatPHP]

Ну вообще, по канонам все-таки пост а не гет.
Конечно, нынче браузеры с префетчем редкость, но все равно, будет обидно если какой-нибудь ретивый плагин поудаляет все записи из базы просто пройдясь по ссылкам.

[Aleksandr Yurchenko]

FanatPHP, а не подскажите как передать постом?

Get - идет через адресную строку, тут вопросов у меня нет, я даже не задумался если вы предложили id передать через сессию или куки (так вообще делают? просто интересно).

Но как передают через post, с учетом, что вывод у меня идет не в form, а таблицей?

[Daria Motorina]

Aleksandr Yurchenko, можно повесить onclick-обработчик на все элементы корзины, id хранить в data-attribute (data-id), по клику на корзину считывать data-id и отправлять ее по ajax постом на урл удаления записи. FanatPHP прав насчет post вместо get

[Aleksandr Yurchenko]

Daria Motorina,
И с ajax было бы идеально. Но у нас все отношения не складываются :)). Что бы реализовать удаление без перезагрузки страницы, правильно ли я понял.

<a href="#" data-id="<?= $value['created_short_id'] ?>"
   class="badge badge-danger badge_custom handler-del">
    <i class="fas fa-trash-alt fa_pencil_alt_custom"></i>
</a>

А вот как реализовать сам ajax запрос, что-то вроде:

$(function () {
    $('handler-del').on('click', function () {
        let idUrl = $(this).attr('name');

        $.ajax({
            type: 'get',
            url: 'app/helper/del_url.php',
            data: idUrl,
            success: function (result) {
                // Что нужно указать в случае успеха? Перезагрузку страницы или что-то ещё о_О
            },
            error: function () {
                alert('Ajax error =(');
            }
        });
    });
});

[Daria Motorina]

Aleksandr Yurchenko,
как минимум:

$(function () {
    $('handler-del').on('click', function () {
        let idUrl = $(this).attr('id'); //id, не name, потому что data-id

        $.ajax({
            type: 'post', //не get
            url: 'app/helper/del_url.php',
            data: {id: idUrl},
            dataType: "json",
            success: function () {
                // перезагрузить страницу или js-ом удалить строку из таблицы
            },
            error: function (result) {
               //всегда парсить ответ сервера (result), передавать с бекенда внятную ошибку, что не так
              //в алерте писать "не удалось удалить запись, причина: (описание)", 
             //в console.log в качестве отладки - дополнительную информацию
            }
        });
    });
});

[Aleksandr Yurchenko]

Daria Motorina, c перезагрузкой страницы не комильфо :), тогда можно было ajax не юзать, а просто в обработчике написать, что-то типа

header('Location: /admin'); // /admin - контроллер отвечающий за вывод админки.
exit;

У меня получилось практически, как у вас:

$(function () {
    $('a.handler-del').on('click', function (event) {
        event.preventDefault();
        let idUrl = 'id=' + $(this).data('id');

        $.ajax({
            type: 'post',
            url: 'app/helper/del_url.php',
            data: idUrl,
            success: function (result) {
                //window.location.href = "/admin";  //Это аналог header('Location: ...'); exit;
                //$('.test-ajax').html(result) // Скорей всего этот вариант правильный, не могу его до ума довести
            },
            error: function () {
                // А не подскажите, что сюда засовывать? Тупо result, почему-то мне кажется нет :)
            }
        });
    });
});

Пара вопросов, всегда ли надо указывать dataType: "json". Мой вариант с точки зрения составления самого запроса (не считая success: ) имеет право быть или все же стоит указывать формат json и передавать data: ... как вы написали?

Вы написали, что можно удалить строчку js? А как? У себя в обработчике я прописал
$('.test-ajax').html(result)

Сам класс test-ajax вешал на tr, который в цикле foreeach, но но при клике, все пункты пропадают, а как заставить пропасть только тот, который удалил (id которого ушло в обработчик) не разберусь :(

Сама разметка админки выглядит, не подскажите что нужно указать в success:
что бы элемент удалялся без перезагрузки страницы?

Answer 2

[Юрий Кулаксыз]

Покажи, как удалять хотел, ты сам SQL-запрос хотел засунуть в тег a или как? Идея основная в том, чтобы в место, где ты делаешь удаление просто вставить $value['id_shorten'] и потом запрос сочтавлять использует WHERE id_shorten = *принятое значение*

Comments

[Aleksandr Yurchenko]

Покажи, как удалять хотел, ты сам SQL-запрос хотел засунуть в тег a или как?

Я вешал не сам запрос, а переменную куда он был помещен.

Дарья навела на правильную мысль. А вы её подтвердили :)
Попробую сделать сейчас.