Laravel ve Inertia.js (Vue 3) ile Görev Yöneticisi Oluşturma: CRUD, Etiketler, Filtreler ve Kanban Panosu

Son güncelleme: 3 Ocak 2026 00:45

Yapılan Proje

<p>Bu makalede, <strong>Görev Yöneticisi</strong> nasıl oluşturduğumu anlatacağım:</p>

<ul>
    <li>
        <strong>Laravel 12</strong> (back-end, routing, validation, Eloquent)
    </li>
    <li>
        <strong>Inertia.js</strong> (API katmanı yok, SPA benzeri kullanıcı deneyimi)
    </li>
    <li>
        <strong>Vue 3 + Vite</strong> (front-end)
    </li>
    <li>
        <strong>TypeScript</strong> (tipli UI bileşenleri)
    </li>
</ul>

<p>Proje özellikleri:</p>

<ul>
    <li>✅ Tam <strong>CRUD</strong> (oluşturma, listeleme, düzenleme, silme)</li>
    <li>✅ <strong>Filtreler</strong> (durum, öncelik, etiket, geçmişteki)</li>
    <li>✅ <strong>Arama</strong> (başlık + detaylar)</li>
    <li>✅ <strong>Sıralama</strong> (oluşturulma tarihi veya son tarih, null'lar en son)</li>
    <li>✅ <strong>Etiketler</strong> (çoktan çoğa, özel renkler, anında oluşturma)</li>
    <li>✅ <strong>Kanban panosu</strong> (sütunlar arasında sürükle & bırak)</li>
    <li>✅ Küçük <strong>animasyonlar</strong> (Vue <code>TransitionGroup</code>)</li>
    <li>✅ Flash mesajlar (<code>success</code>) Inertia üzerinden paylaşılıyor</li>
</ul>

<p>Bu, Laravel + Inertia için harika bir "gerçek uygulama" örneği çünkü sadece bir CRUD değil — bir ürün gibi hissettiriyor.</p>

<hr/>

<h2>
    <a name="why-laravel-inertia" href="#why-laravel-inertia">
    </a>
    Neden Laravel + Inertia?
</h2>

<p>Laravel'i seviyorsanız ama ayrı bir API + ayrı bir SPA sürdürmek istemiyorsanız, Inertia, ideal bir noktadır:</p>

<ul>
    <li><strong>Laravel routing/controllers/validation</strong> kullanmaya devam edersiniz.</li>
    <li><strong>Vue sayfaları</strong> oluşturur ve tam sayfa yenilemeleri olmadan gezinirsiniz.</li>
    <li>“API kopyalama” sorununu önleyerek hala SPA benzeri bir kullanıcı deneyimi elde edersiniz.</li>
</ul>

<p>Inertia, esasen: <strong>sunucu tarafı routing + istemci tarafı rendering</strong>'dir.</p>

<hr/>

<h2>
    <a name="project-setup-laravel-inertia-vue-3" href="#project-setup-laravel-inertia-vue-3">
    </a>
    Proje Kurulumu (Laravel + Inertia + Vue 3)
</h2>

<p>Laravel’i normal bir şekilde kurdum ve ardından Inertia-Laravel + Vue’yu ekledim.<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight shell"><code>composer create-project laravel/laravel task-manager

cd task-manager

# inertia-laravel yükleme
composer require inertiajs/inertia-laravel

# inertia middleware yapısı oluşturma
php artisan inertia:middleware

# ön uç bağımlılıkları
npm i vue @inertiajs/vue3 @vitejs/plugin-vue
npm i

<h3>
    <a name="app-shell-raw-resourcesviewsappbladephp-endraw-" href="#app-shell-raw-resourcesviewsappbladephp-endraw-">
    </a>
    Uygulama Yapısı (<code>resources/views/app.blade.php</code>)
</h3>

<div class="highlight js-code-highlight">
    <pre class="highlight php"><code>@<span class="nt">lang=</span><span class="s">"{{ str_replace('_', '-', app()-&gt;getLocale()) }}"</span><span class="nt">&gt;</span>
<span class="nt"/>
    <span class="nt"><meta/> <span class="na">charset=</span><span class="s">"utf-8"</span> <span class="nt">/&gt;</span>
    <span class="nt"><meta/> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1"</span> <span class="nt">/&gt;</span>
    @vite('resources/js/app.ts')
    @inertiaHead
<span class="nt"/>
    <span class="nt"> <span class="na">class=</span><span class="s">"antialiased"</span><span class="nt">&gt;</span>
    @inertia
<span class="nt"/>
<span class="nt"/>

<h3>
    <a name="inertia-bootstrap-raw-resourcesjsappts-endraw-" href="#inertia-bootstrap-raw-resourcesjsappts-endraw-">
    </a>
    Inertia Başlatma (<code>resources/js/app.ts</code>)
</h3>

<div class="highlight js-code-highlight">
    <pre class="highlight typescript"><code>import { createApp, h } from "vue";

import { createInertiaApp } from “@inertiajs/vue3”;

createInertiaApp({
resolve: (name) => import(./Pages/${name}.vue),
setup({ el, App, props, plugin }) {
createApp({
render: () => h(App, props)
})
.use(plugin)
.mount(el);
},
});

<blockquote>
    <p>İpucu: <code>resolve()</code> fonksiyonunu Vite'in <code>import.meta.glob</code> kullanarak geliştirebilirsiniz, fakat basit versiyon yeterlidir.</p>
</blockquote>

<h3>
    <a name="register-the-inertia-middleware-laravel-1112" href="#register-the-inertia-middleware-laravel-1112">
    </a>
    Inertia Middleware'ı Kaydetme (Laravel 11/12)
</h3>

<p>Laravel 11/12'de, middleware kaydı <code>bootstrap/app.php</code> içinde olur (en büyük <code>Kernel.php</code> değil).<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight php"><code>use App\Http\Middleware\HandleInertiaRequests;

$app
->withMiddleware(function (Middleware $middleware) {
$middleware->web(append: [
HandleInertiaRequests::class,
]);
})

<hr/>

<h2>
    <a name="database-models-tasks-tags" href="#database-models-tasks-tags">
    </a>
    Veritabanı Modelleri: Görevler + Etiketler
</h2>

<h3>
    <a name="task-table" href="#task-table">
    </a>
    Görev Tablosu
</h3>

<p>Kullandığım alanlar:</p>

<ul>
    <li><code>title</code> (zorunlu)</li>
    <li><code>details</code> (isteğe bağlı)</li>
    <li><code>status</code> (<code>todo | doing | done</code>)</li>
    <li><code>priority</code> (<code>low | medium | high</code>)</li>
    <li><code>due_date</code> (nullable tarih)</li>
</ul>

<h3>
    <a name="tags-manytomany" href="#tags-manytomany">
    </a>
    Etiketler (çoktan çoğa)
</h3>

<ul>
    <li><code>tags</code> tablosu: <code>id</code>, <code>name (benzersiz)</code>, <code>color</code></li>
    <li>pivot: <code>tag_task</code> tablosu, <code>(task_id, tag_id)</code> benzersiz kısıtlaması ile</li>
</ul>

<hr/>

<h2>
    <a name="the-task-model-computed-flags-overdue-due-today" href="#the-task-model-computed-flags-overdue-due-today">
    </a>
    Görev Modeli: Hesaplanan Bayraklar (Geçmişte/ Bugün Son Tarihli)
</h2>

<p>UI'de “Geçmişte” veya “Bugün son tarihlidir” gibi rozetler göstermek istedim, bu nedenle hesaplanan nitelikler ekledim:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight php"><code>use Carbon\Carbon;

protected $casts = [
‘due_date’ => ‘date’,
];

protected $appends = [
‘is_overdue’,
‘is_due_today’,
];

public function getIsOverdueAttribute(): bool {
return $this->due_date instanceof Carbon
? $this->due_date->isBefore(Carbon::today())
: false;
}

public function getIsDueTodayAttribute(): bool {
return $this->due_date instanceof Carbon
? $this->due_date->isSameDay(Carbon::today())
: false;
}

<p>Bu, “iş kurallarını” modelde tutar ve Vue UI'yi çok basit hale getirir.</p>

<hr/>

<h2>
    <a name="refactoring-the-index-query-with-model-scopes" href="#refactoring-the-index-query-with-model-scopes">
    </a>
    İndeks Sorgusunu Model Kapsamları ile Yeniden Yapılandırma
</h2>

<p>Görevler indeksi arama + filtreler + sıralama gerektiriyordu. Kontrolcü çok dağınık hale gelebilir, bu yüzden mantığı <strong>Eloquent kapsamlarına</strong> taşıdım.</p>

<p>Örnek kapsamlar:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight php"><code>use Illuminate\Database\Eloquent\Builder;

public function scopeSearch(Builder $query, ?string $term): Builder {
$term = trim((string) $term);
if ($term === ”) return $query;

return $query->where(function (Builder $q) use ($term) {
$q->where(‘title’, ‘like’, “%{$term}%”)
->orWhere(‘details’, ‘like’, “%{$term}%”);
});
}

public function scopeStatus(Builder $query, ?string $status): Builder {
if (!$status || !in_array($status, self::STATUSES, true)) return $query;
return $query->where(‘status’, $status);
}

public function scopeOrderByDueDateNullsLast(Builder $query, string $direction = ‘asc’): Builder {
return $query
->orderByRaw(‘case when due_date is null then 1 else 0 end’)
->orderBy(‘due_date’, $direction);
}

<p>Artık kontrolcü çok okunabilir hale geldi:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight php"><code>$tasks = Task::query()

->with(‘tags’)
->search($request->input(‘q’))
->status($request->input(‘status’))
->priority($request->input(‘priority’))
->tagged($tagId)
->overdue($overdue)
->sortBy($sort, $direction)
->paginate($perPage)
->withQueryString();

<hr/>

<h2>
    <a name="taskcontroller-pages-actions" href="#taskcontroller-pages-actions">
    </a>
    TaskController: Sayfalar + Eylemler
</h2>

<p>Route'lar:</p>

<ul>
    <li><code>/tasks</code> – indeks</li>
    <li><code>/tasks/create</code> – oluşturma formu</li>
    <li><code>/tasks/{task}/edit</code> – düzenleme formu</li>
    <li><code>/tasks</code> (POST) – kaydetme</li>
    <li><code>/tasks/{task}</code> (PUT/PATCH) – güncelleme</li>
    <li><code>/tasks/{task}</code> (DELETE) – silme</li>
    <li><code>/tasks/board</code> – kanban panosu</li>
    <li><code>/tasks/{task}/status</code> (PATCH) – sürükleyip bırakma ile durumu güncelleme</li>
</ul>

<p><strong>FormRequests</strong> kullanarak doğrulama yaptım:</p>

<ul>
    <li><code>StoreTaskRequest</code></li>
    <li><code>UpdateTaskRequest</code></li>
    <li><code>UpdateTaskStatusRequest</code></li>
</ul>

<p>Bu, doğrulama kurallarını kontrolcülerden ayırır.</p>

<hr/>

<h2>
    <a name="sharing-flash-messages-with-inertia" href="#sharing-flash-messages-with-inertia">
    </a>
    Inertia ile Flash Mesajları Paylaşma
</h2>

<p>Oluşturma/güncelleme/silme sonrasında,<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight php"><code>$request->session()->flash('success', 'Görev başarıyla güncellendi.');</code></pre>
</div>

<p>Sonra bunu Inertia middleware aracılığıyla tüm sayfalarda paylaştım:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight php"><code>public function share(Request $request): array {

return array_merge(parent::share($request), [
‘flash’ => [
‘success’ => fn() => $request->session()->get(‘success’),
],
]);
}

Laravel ve Inertia.js (Vue 3) ile Görev Yöneticisi Oluşturma: CRUD, Etiketler, Filtreler ve Kanban Panosu

Yapılan Proje

Sanal Medya

Son Eklenenler

Acil: Claude Fable 5 Sınırlı Süreyle Kullanıma Sunuldu!

2026 Yılında Geçerli Kriptopara Kurtarma Şirketi: Viste_ZEUS KRİPTO KURTARMA HİZMETLERİ

Justin Ernest’in geleneksel VC olmadan 500M$ yatırımı nasıl yaptı?

Google AI Abonelik Fiyat Savaşlarında Uyarı Verdi

Destiny 2 Oyuncu Sayısında Rekor Artış, Son Güncelleme Heyecanı

Acil: Windows 11 için KB5094126 ve KB5093998 Güncellemeleri Yayınlandı

Siber güvenlik, yapay zeka ve savunma sanayiinden; finans ve sinema dünyasına uzanan geniş bir yelpaze. Teknomers; teknoloji, strateji ve yazılım dünyasını sade bir dille sizlerle buluşturuyor.

Kurumsal

Kategoriler

Populer