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

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ı

Siri AI’yi Denedim, İşe Yarıyor Mu?

Justin Ernest geleneksel bir VC fonu olmadan sıcak girişimlere 400 milyon dolara yakın yatırım yaptı

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