Web Geliştirme Süreçleri Nasıl İlerler – Tolga Cerrah (Genişletilmiş Rehber)

Posted on by Tolga

1) Web Geliştirme Temel Kavramlar (Türkçeleri ve Neden Gerekli)

  • Alan Adı (Domain): ornek.com gibi web adresin.
    Neden gerekir? İnsanların sitene kolayca ulaşması için okunabilir bir isim sağlar.
  • **Ad Sunucuları (Nameserver) / DNS (Alan Adı Sistemi): Alan adını sitenin barındığı sunucunun IP adresine çevirir.
    Neden gerekir? ornek.com yazıldığında doğru sunucuya yönlendirme yapılır.
  • Barındırma (Hosting): Sitenin dosyalarının ve veritabanının saklandığı, internetten erişilen sunucu.
    Neden gerekir? Ziyaretçilere sayfaları sunabilmek için fiziksel/virtual bir yere ihtiyaç var.
  • SSL/TLS Sertifikası (HTTPS): Sunucu ile ziyaretçi arasındaki trafiği şifreler (adres çubuğundaki kilit simgesi).
    Neden gerekir? Güvenlik, gizlilik, SEO ve ödeme/üye girişi gibi işlemler için şart.
  • CDN (İçerik Dağıtım Ağı): Statik dosyaları (resim, CSS, JS) ziyaretçiye en yakın sunucudan hızlıca ulaştırır.
    Neden gerekir? Hızı ve kullanılabilirliği artırır.
  • CMS (İçerik Yönetim Sistemi): Kod yazmadan içerik eklemeyi kolaylaştıran yazılım (WordPress gibi).
    Neden gerekir? Blog yazıları, sayfalar, ürünler, menüler vb. kolay yönetilir.
  • Ön Yüz (Front-End): Kullanıcının gördüğü ve tarayıcıda çalışan kısım (HTML, CSS, JavaScript).
  • Arka Yüz (Back-End): Sunucu tarafı mantık ve veritabanı (PHP, Python, Node.js, veritabanları vb.).
  • Veritabanı: Verilerin kalıcı tutulduğu sistem (MySQL, PostgreSQL, MongoDB).
  • Sürüm Kontrolü (Git): Kod değişikliklerini takip etme ve ekip çalışması için temel araç.

2) Web Sitesi Türleri (Ne, Neden, Hangi Teknoloji?)

TürAmaçTipik ÖzelliklerKolay Yolİleri Yol
KurumsalTanıtım, iletişimHakkımızda, hizmetler, iletişim formuWordPress + hızlı temaHeadless CMS + Next.js / Laravel
Blog/Magazinİçerik yayınıKategoriler, etiketler, yorumlarWordPressStatic site generator (Hugo, Jekyll) + Headless
Portfolyoİş/proje sunumuGaleri, referanslar, iletişimStatik HTML/CSS/JS, WordPressNuxt/Next statik ihracat + CMS
E-ticaretÜrün satışıSepet, ödeme, kargo, stokWooCommerce / ShopifyMagento, headless commerce
Landing PageKampanya/dönüşümTek sayfa, form, A/B testNo-code builder / WordPressCustom SSR (Next/Nuxt)
Üyelik/SaaSWeb uygulamasıÜyelik, abonelik, panellerWordPress + üyelik ekl.Laravel/Django/Express + SPA
RezervasyonRandevu/siparişTakvim, ödeme, bildirimWordPress rezervasyon ekl.Özel geliştirme (Framework)

3) Web Geliştirme Yol Haritası (Fikirden Yayına)

  1. Hedefler & Kapsam: Kime, ne sunacaksın? Başarı metriği nedir (trafik, satış, başvuru)?
  2. İçerik Envanteri: Sayfalar, görseller, metinler, ürünler, blog planı.
  3. Bilgi Mimarisi & Site Haritası: Menü, URL yapısı, içerik hiyerarşisi.
  4. Wireframe & Tasarım Sistemi: Renk paleti, tipografi, bileşenler, responsive kırılımlar.
  5. SEO Anahtar Kelimeler: Başlık/description, içerik planı, yapılandırılmış veri planı.
  6. Hukuki/KVKK-Çerez: Gizlilik, çerez politikası, aydınlatma metni, çerez onayı.
  7. Teknoloji Seçimi: Aşağıdaki karar ağacını kullan.
  8. Geliştirme & Test: Yerelde kur, test et, mobil/masaüstü kontrol et.
  9. Yayınlama & İzleme: Alan adı yönlendirme, SSL, CDN, analitik, Search Console.
  10. Bakım: Yedekler, güncellemeler, güvenlik, performans izleme.

4) Web Geliştirme Teknoloji Seçimi – Kısa Karar Ağacı

  • Sıfır kodla hızlı kurulum istiyorsan → WordPress (kurumsal/blog) veya Shopify (e-ticaret).
  • Tek sayfa/portfolyo ve çok hızlı olsun diyorsan → Statik HTML/CSS/JS (+ basit form servisi).
  • Özel iş mantığı/uygulama gerekiyorsa → Framework:
    • PHP: Laravel (MVC, blade, paket ekosistemi güçlü)
    • Node.js: Next.js/Express (SSR/SSG, modern ön yüz)
    • Python: Django (admin paneli hazır), Flask (hafif)
    • Ruby: Rails (hızlı prototipleme)

Artılar/Eksiler kısaca:

  • WordPress: +hızlı içerik, eklenti çok | −eklentilerle şişebilir, bakım şart
  • Statik site: +çok hızlı, güvenli | −dinamik özellikler eklemek ekstra iş
  • Framework: +tam kontrol, ölçeklenebilir | −daha çok teknik bilgi ve süre

5) Web Geliştirme Ortamı ve Araçlar

  • Editör: VS Code (eklenti: ESLint, Prettier, PHP Intelephense)
  • Yerel Sunucular: LocalWP (WordPress), XAMPP/MAMP (PHP), Node için npm run dev, Docker ile hepsini kapsa.
  • Sürüm Kontrol: Git + GitHub/GitLab/Bitbucket
  • Paket Yöneticileri: npm/yarn/pnpm (JS), Composer (PHP)
  • Derleme Araçları: Vite, webpack, esbuild (gerekirse)
  • Tarayıcı Araçları: Chrome DevTools (Lighthouse dahil)

6) Web Geliştirme Adım Adım Uygulama: Farklı Zorluk Seviyeleri

A) En Kolay Yol: WordPress ile Kurumsal/Blog

  1. Alan adı & Hosting al:
  • Başlangıçta “paylaşımlı hosting” + tek tıkla WordPress işini görür.
  • Kurulumda ücretsiz Let’s Encrypt SSL etkinleştir.
  1. Alan adını yönlendir:
  • Domain panelinden nameserver’ları hosting sağlayıcının NS’leriyle değiştir.
  • DNS yayılımı birkaç saat sürebilir.
  1. WordPress kur:
  • “Site adı”, “yönetici kullanıcı” belirle.
  • SSL zorunlu: “http→https yönlendirme” açık olsun.
  1. Tema seç:
  • Hızlı, hafif tema: GeneratePress, Astra, Blocksy.
  • Sayfa yapıcı istersen: Gutenberg (yerleşik), Elementor/Bricks/Breakdance (fazla eklentiye dikkat).
  1. Gerekli eklentiler (az ve öz):
  • Önbellek/Hız: WP Rocket veya LiteSpeed Cache
  • SEO: Rank Math veya Yoast
  • Güvenlik: Wordfence veya Solid Security
  • Yedekleme: UpdraftPlus (otomatik uzak yedek: Google Drive/S3)
  • Form: WPForms, Forminator veya Fluent Forms
  • Görsel Optimizasyon: ShortPixel/Imagify
  • Çeviri gerekiyorsa: WPML veya Polylang
  1. İçerik & Menü:
  • “Hakkımızda, Hizmetler, Referanslar, Blog, İletişim” sayfalarını oluştur.
  • Menü ve alt bilgiler (footer) ayarla, iletişim formunu test et.
  1. SEO Temelleri:
  • Her sayfa için benzersiz title/description, URL’leri kısa/tutarlı.
  • Site haritası (sitemap.xml) ve robots.txt, Google Search Console kaydı.
  1. Hız & Güvenlik:
  • Görselleri sıkıştır, webp kullan.
  • Önbellek ayarlarını (cache, minify, defer) ölçerek yap.
  • Yönetici hesabında iki aşamalı doğrulama, düzenli güncelleme & yedek.
  1. Yayınla & izle:
  • Google Analytics 4 kur, hedefler/olaylar tanımla.
  • İlk 1-2 hafta formlar, 404’ler, hız ve hataları izle.

E-ticaret kolay yolu: WordPress + WooCommerce (ödeme: İyzico/PayTR vb.). Ürün/vergiler/kargo kurallarını yapılandır, test ortamında deneme siparişleri ver.

B) Orta Yol: Statik HTML/CSS/JS ile Portfolyo/Landing

  1. Klasör yapısı:
/proje
  /assets
    /css/styles.css
    /js/app.js
    /img/
  index.html
  1. Basit başlangıç sayfası (index.html):
<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Portfolyo – Ad Soyad</title>
  <link rel="stylesheet" href="assets/css/styles.css" />
  <meta name="description" content="Tasarımcı & geliştirici portfolyosu">
</head>
<body>
  <header><h1>Merhaba, ben Ad Soyad</h1></header>
  <main>
    <section id="projeler">
      <article><h2>Proje 1</h2><p>Kısa açıklama.</p></article>
    </section>
    <section id="iletisim">
      <form action="https://formspree.io/f/xxxx" method="POST">
        <input type="email" name="email" placeholder="E-posta" required />
        <textarea name="mesaj" placeholder="Mesajın"></textarea>
        <button type="submit">Gönder</button>
      </form>
    </section>
  </main>
  <script src="assets/js/app.js"></script>
</body>
</html>
  1. Stil (styles.css): Mobil öncelikli, esnek grid/flex kullan.
  2. Yayınlama:
    • GitHub Pages / Netlify / Vercel (ücretsiz planlar hızlıdır).
    • Alan adını bu platformlara DNS ile yönlendir.
  3. Form işleme: Formspree/Netlify Forms gibi servisler kod yazmadan formu e-postana iletir.
  4. Gelişmiş:
    • Bootstrap / Tailwind CSS ile hızlan;
    • En küçük JS ile etkileşim;
    • Lighthouse ile hız/erişilebilirlik ölç.

C) Daha Gelişmiş Yol: PHP ile Dinamik Site (Laravel örneği)

  1. Yerel kurulum: PHP 8+, Composer, MySQL. Hızlıca XAMPP veya Laravel Sail (Docker).
  2. Proje oluştur:
composer create-project laravel/laravel ornek-proje
php artisan serve
  1. Rota & Controller:
// routes/web.php
Route::get('/', [HomeController::class, 'index']);

// app/Http/Controllers/HomeController.php
class HomeController extends Controller {
  public function index() { return view('home'); }
}
  1. Görünüm (Blade): resources/views/home.blade.php içinde HTML.
  2. Veritabanı & Migration:
php artisan make:model Post -m
# posts tablosu kolonlarını migration dosyasında tanımla, sonra:
php artisan migrate
  1. CRUD, Yetkilendirme, Form Doğrulama: Laravel’in Request doğrulaması, Auth paketi.
  2. Yayınlama:
    • Paylaşımlı hosting: PHP + MySQL yeter; public/ kök olmalı.
    • VPS: Nginx/Apache, PHP-FPM, Git deploy, .env ile gizli anahtarlar.
  3. Ölçek & Bakım: Queue, cache (Redis), otomatik yedek, günlükler, izleme.

Alternatifler: Django (Python) – admin panel hazır; Express/Next.js (Node) – SSR/SSG ve modern ön yüz; Rails (Ruby) – hızlı geliştirme.

7) Web Geliştirme Veritabanı Yönetimi – Hızlı Özet

  • Modelleme: Varlıklar (Kullanıcı, Ürün, Sipariş) ve ilişkilerini (1-N, N-N) çıkar.
  • Seçim: Klasik web için MySQL/PostgreSQL; esnek şema gerekiyorsa MongoDB.
  • Performans: İndeksler, sorgu optimizasyonu, gereksiz SELECT *’tan kaçın.
  • Yedekleme: Günlük otomatik yedek ve geri yükleme testleri.

8) Web Geliştirme API Geliştirme (REST Kısa Rehberi)

  • Kaynak odaklı URL’ler: /api/v1/products
  • HTTP metodları: GET/POST/PUT/PATCH/DELETE
  • Kimlik doğrulama: JWT, OAuth veya session tabanlı.
  • Dokümantasyon: OpenAPI/Swagger, Postman koleksiyonu.
  • Orijinler: CORS yapılandırmasını unutma.

9) Web Geliştirme Güvenlik Temelleri (Hepsi Önemli)

  • HTTPS zorunlu (HSTS dahil).
  • Girdi doğrulama ve parametreli sorgular (SQL Injection’a karşı).
  • XSS/CSRF koruması, çerezlerde HttpOnly/Secure/SameSite.
  • Yetkilendirme (rol/izin), parola hash’i (bcrypt/argon2).
  • Güncellemeler: Çekirdek, eklenti, tema, bağımlılık güncel olmalı.
  • Yedekleme + disaster recovery planı.
  • WAF/CDN (Cloudflare) ve temel rate limiting.
  • WordPress özel: Yönetici kullanıcı adını “admin” yapma, 2FA, gereksiz eklentileri sil.

10) Web Geliştirme Performans ve SEO

  • Core Web Vitals: LCP, CLS, INP. Görselleri WebP/AVIF, lazy-load, boyut özellikleri (width/height) ile ver.
  • Önbellek: Sunucu (OPcache), sayfa cache (WP Rocket/LiteSpeed), tarayıcı cache.
  • Kaynaklar: CSS/JS minify & defer, kritik CSS, unused CSS temizliği.
  • Veritabanı: Temizlik, indeks, sorgu iyileştirme.
  • Teknik SEO:
    • Başlık (H1-H2), meta description, temiz URL’ler, sitemap.xml, robots.txt.
    • Schema.org (Organization, Product, Article, Breadcrumbs).
    • Çok dilli ise hreflang, canonical etiketleri.

11) Web Geliştirme Erişilebilirlik (WCAG ipuçları)

  • Anlamlı HTML etiketleri (header/nav/main/footer).
  • Alternatif metin (alt) ve yeterli kontrast.
  • Klavye ile gezinme, odak halkası görünür olsun.
  • Formlarda label ve hata mesajları anlaşılır.

12) Web Geliştirme Test Süreci

  • Birim testleri: PHPUnit/Jest
  • Bütünleşik test: Pest, Django test runner
  • Uçtan uca: Cypress/Playwright
  • Kapsam: Kimlik doğrulama, ödeme, kritik formlar, e-posta akışları.
  • Ortamlar: dev → staging → prod akışı, staging’de gerçekçi test verisi.

13) Yayınlama ve DevOps

  • Ortam değişkenleri (.env): API anahtarları, DB şifreleri kodda olmasın.
  • CI/CD: GitHub Actions ile otomatik test ve deploy.
  • Sunucu: Nginx/Apache, PHP-FPM, Node PM2, süreç izleme.
  • Günlükler & İzleme: UptimeRobot, Sentry, server metrics, 404 hataları.
  • CDN & Edge: Statik içerikleri CDN’e taşı; coğrafi hız kazan.
  • Yedek: Dosya + DB günlük/haftalık; geri dönüş tatbikatı yap.

14) Web Geliştirme İçerik Operasyonu

  • Yayın akışı: Taslak → edit → SEO kontrol → yayın → dağıtım.
  • Medya yönetimi: Görsel boyutları, telif & stok görsel lisansları.
  • Takvim: İçerik takvimi, kampanyalar, sezonluk sayfalar.

15) Maliyet & Zaman (Kabaca)

  • Alan adı: yıllık düşük ücret.
  • Hosting: Paylaşımlı (başlangıç), bulut/VPS (büyüyünce).
  • Lisanslar: Premium tema/eklenti/optimizasyon araçları.
  • Zaman:
    • WordPress kurumsal: 1-7 gün (içeriğe bağlı)
    • E-ticaret: 1-3 hafta (ürün, ödeme, kargo entegrasyonları)
    • Özel geliştirme: 3-12+ hafta

16) Hızlı Kontrol Listeleri

Yayın Öncesi:

  • DNS → hosting, SSL aktif
  • Mobil uyum, farklı tarayıcı testi
  • Formlar/ödeme testleri, e-posta teslimleri
  • SEO: title/description, sitemap, schema
  • Hız: Lighthouse raporu, görsel optimizasyon
  • Güvenlik: güncellemeler, yedek, 2FA, güvenlik taraması

Yayın Sonrası:

  • Analytics & Search Console kurulu
  • 404/redirect’ler takipte
  • Otomatik yedek ve izleme açık
  • Güncellemeler için aylık rutin

17) Sözlük (Kısa)

  • Alan Adı (Domain) = Web adresi
  • Barındırma (Hosting) = Sitenin kaldığı sunucu
  • DNS / Nameserver = Alan adı → IP yönlendirme sistemi
  • SSL/TLS = Şifreli bağlantı (HTTPS)
  • CDN = İçeriği farklı noktalara dağıtıp hızlandıran ağ
  • CMS = İçerik yönetim sistemi (WordPress)
  • Front-End = Tarayıcı tarafı (HTML/CSS/JS)
  • Back-End = Sunucu tarafı (PHP/Node/Python vb.)
  • Veritabanı = Kalıcı veri deposu (MySQL/PostgreSQL)
  • Git = Sürüm kontrol aracı

Kime Hangi Yol?

  • Hızlıca kurumsal/blog: WordPress (hafif tema + az eklenti)
  • Minimal, aşırı hızlı portfolyo/landing: Statik site (GitHub Pages/Netlify)
  • E-ticaret basit-orta: WooCommerce veya Shopify
  • Özel iş mantığı ve ölçek: Laravel/Django/Next.js gibi framework’ler

İlgili Gönderiler

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir