Yazılım

Tablodan Satır Silmeyi Tetiklemenin Dört Yolu

Son güncelleme: 8 Mart 2026 23:57

teknomers

Paylaş

Paylaş

Elimizde şu rotanın bulunduğunu varsayalım:

<div class="highlight js-code-highlight">
    <pre class="highlight plaintext"><code>Route::delete('/pages/{page}',
[PageController::class, 'destroy']

)->name(‘site.pages.destroy’);

<p>Her silme işlemi:</p>
<ol>
    <li> Onaymodalını açmalıdır</li>
    <li> Kullanıcı onayını beklemelidir</li>
    <li> Daha sonra DELETE isteği tetiklenmelidir</li>
</ol>

<p>Sadece ön yüzün rotayı nasıl tetikleyeceğini tartışıyoruz.</p>

<hr/>

<h2>
    <a name="1-one-form-per-row" href="#1-one-form-per-row">1. Her Satırda Bir Form</a>
</h2>

<p>Her bir satır kendi formunu içerir.</p>

<h3>
    <a name="blade" href="#blade">Blade</a>
</h3>

<div class="highlight js-code-highlight">
    <pre class="highlight plaintext"><code>@foreach ($pages as $page)

{{ $page->title }}

@csrf
@method(‘DELETE’)

        <button type="button" onclick="openModal({{ $page-&gt;id }})">
            Delete
        </button>
    </form>
</td>

@endforeach

<h3>
    <a name="javascript" href="#javascript">JavaScript</a>
</h3>

<div class="highlight js-code-highlight">
    <pre class="highlight plaintext"><code><script><![CDATA[

let selectedId = null;

function openModal(id) {
selectedId = id;
document.getElementById(‘delete-user-modal’).classList.remove(‘hidden’);
}

function submitDelete() {
document
.getElementById(‘delete-form-‘ + selectedId)
.submit();
}
]]>

<h3>
    <a name="whats-happening" href="#whats-happening">Olanlar</a>
</h3>

<ul>
    <li> Her satırın kendi formu var</li>
    <li> Modal açılır</li>
    <li> Onaylandıktan sonra → o spesifik form gönderilir</li>
</ul>

<p>Bu yöntem iyi çalışıyor. Ancak, 300 satır rendere ederseniz, artık DOM'da 300 form var gibi düşünebilirsiniz.</p>

<hr/>

<h2>
    <a name="2-ajax-fetch-delete-request" href="#2-ajax-fetch-delete-request">2. Ajax / Fetch DELETE İsteği</a>
</h2>

<p>Burada, satırlar form içermiyor.</p>

<h3>
    <a name="blade" href="#blade">Blade</a>
</h3>

<div class="highlight js-code-highlight">
    <pre class="highlight plaintext"><code>@foreach ($pages as $page)

{{ $page->title }}
Delete

@endforeach

<h3>
    <a name="layout-csrf-meta" href="#layout-csrf-meta">Layout (CSRF Meta)</a>
</h3>

<div class="highlight js-code-highlight">
    <pre class="highlight plaintext"><code><meta name="csrf-token" content="{{ csrf_token() }}"/>

<h3>
    <a name="javascript" href="#javascript">JavaScript</a>
</h3>

<div class="highlight js-code-highlight">
    <pre class="highlight plaintext"><code><script><![CDATA[

let selectedId = null;

function openModal(id) {
selectedId = id;
document.getElementById(‘delete-user-modal’).classList.remove(‘hidden’);
}

function submitDelete() {
fetch(/pages/${selectedId}, {
method: ‘DELETE’,
headers: {
‘X-CSRF-TOKEN’: document
.querySelector(‘meta[name=”csrf-token”]’)
.getAttribute(‘content’),
‘Content-Type’: ‘application/json’
}
}).then(response => {
if (response.ok) {
document.getElementById(‘row-‘ + selectedId).remove();
}
});
}
]]>

<h3>
    <a name="whats-happening" href="#whats-happening">Olanlar</a>
</h3>

<ul>
    <li> Modal onaylar</li>
    <li> JavaScript DELETE isteği gönderir</li>
    <li> Başarılı olursa → satır DOM'dan kaldırılır</li>
</ul>

<p>Sayfa yeniden yüklenmeden, temiz bir UI sağlar.</p>

<p>Ancak hataları doğru bir şekilde yönetmek sizin sorumluluğunuzdadır.</p>

<hr/>

<h2>
    <a name="3-one-form-wrapping-the-table" href="#3-one-form-wrapping-the-table">3. Tabloyu Saran Tek Form</a>
</h2>

<p>Birçok form yerine tek bir form kullanın.</p>

<h3>
    <a name="blade" href="#blade">Blade</a>
</h3>

<div class="highlight js-code-highlight">
    <pre class="highlight plaintext"><code>

<h3>
    <a name="javascript" href="#javascript">JavaScript</a>
</h3>

<div class="highlight js-code-highlight">
    <pre class="highlight plaintext"><code><script><![CDATA[

let selectedId = null;

function openModal(id) {
selectedId = id;
document.getElementById(‘delete-user-modal’).classList.remove(‘hidden’);
}

function submitDelete() {
const form = document.getElementById(‘delete-form’);

form.action = `/pages/${selectedId}`;
form.submit();

}
]]>

<h3>
    <a name="whats-happening" href="#whats-happening">Olanlar</a>
</h3>

<ul>
    <li> Tek form var</li>
    <li> Gizli girdi ID'yi saklar</li>
    <li> Action dinamik olarak ayarlanır</li>
    <li> Tam sayfa yeniden yüklenir</li>
</ul>

<p>Birinci yöntemden daha temiz. Ancak hala geleneksel bir gönderim.</p>

<hr/>

<h2>
    <a name="4-hidden-global-form-route-placeholder-preferred" href="#4-hidden-global-form-route-placeholder-preferred">4. Gizli Global Form + Rota Yer Tutucu (Tercih Edilen)</a>
</h2>

<p>Bu sizin modelinizdir.</p>

<p>Bir gizli form. Tablo dışındadır. Başlangıçta ID yok.</p>

<h3>
    <a name="hidden-form" href="#hidden-form">Gizli Form</a>
</h3>

<div class="highlight js-code-highlight">
    <pre class="highlight plaintext"><code>