Belirttiğiniz yönergeler doğrultusunda, paylaştığınız müfredat metnini anlamsız ifadelerden arındırarak, süre/ders sayısı ve önizleme gibi teknik detayları temizledikten sonra tamamen eğitim odaklı, derinlemesine ve bol örnekli bir rehbere dönüştürüyoruz.

Müfredatın yapısı oldukça geniş ve detaylı olduğu için, eğitimin hakkını vermek, yüzeysel özetlerden kaçınmak ve her konuyu uygulamalarıyla işlemek adına bu uzun içeriği parça parça ele alacağız.

İlk olarak "Öğrenecekleriniz" bölümünün felsefesini ve bu eğitimle kazanacağınız vizyonu açıklayarak başlıyoruz. Ardından birinci bölüm olan HTML ve Web Sitesi Kurmanın Temelleri konusunu eksiksiz bir şekilde inşa edeceğiz.

🚀 Full Stack Web Tasarım ve Programlama Eğitimi: Bölüm 1

📌 "Öğrenecekleriniz" Bölümünün Detaylı Açıklaması

Bu eğitim, modern bir web geliştiricisi (Full Stack Developer) olmanız için gereken hem ön yüz (Frontend) hem de arka yüz (Backend) teknolojilerini sıfırdan başlayarak bir araya getirmeyi hedefler. Bölüm bölüm kazanacağınız yetkinliklerin mantığı şudur:

🛠️ Temel Kurulumlar ve Geliştirme Ortamı

Bir web sitesi geliştirmeye başlamak için sihirli araçlara ihtiyacınız yoktur. Bilgisayarınızdaki basit bir not defteri bile kod yazmak için yeterlidir ancak süreci hızlandırmak ve hataları görmek için Kod Editörleri (IDE / Text Editor) kullanılır.

💻 Editör Tercihi (Sublime Text, Notepad++, Visual Studio Code)

Kod editörleri yazdığınız kodun içeriğini veya çalışmasını doğrudan etkilemez. Yalnızca kodu renkli göstererek okumanızı kolaylaştırır ve otomatik tamamlama (autocomplete) özellikleri sunarak hız kazandırır.

📁 İlk Web Klasörü Yapısı

Bir web projesine başlarken ilk kural, tüm dosyaları tek bir ana klasör altında toplamaktır.

  1. Masaüstünüzde web_projem adında bir klasör oluşturun.
  2. Editörünüzü açıp boş bir dosya oluşturun ve bu klasörün içine index.html ismiyle kaydedin.

Kritik Kural: Tarayıcılar (Chrome, Safari, Edge), bir web klasörüne girdiğinde ilk olarak index.html isimli dosyayı arar ve ana sayfa olarak onu çalıştırır.

🏗️ Konu 1: Web Sitesi Kurmanın Temelleri — HTML

HTML (HyperText Markup Language), bir web sayfasının metin, görsel, buton gibi ögelerini yerleştirdiğimiz bir işaretleme dilidir. Bir programlama dili değildir, kendi başına mantıksal işlemler yapamaz.

🧱 Temel HTML İskeleti ve Etiket Mantığı

HTML etiketleri genellikle <etiket_adı> ile açılır ve </etiket_adı> ile kapatılır.

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>İlk Web Sayfamız</title>

</head>

<body>

    <!-- Kullanıcının web sitesinde göreceği her şey buraya yazılır -->

    Dünyaya merhaba!

</body>

</html>

📝 Başlıklar (Heading) ve Alt Satıra Geçme (Break)

Web sitelerinde metin hiyerarşisi sağlamak için başlık etiketleri kullanılır. <h1> ile <h6> arasında 6 adet başlık seviyesi vardır. <h1> en büyük ve en önemli başlıktır; <h6> ise en küçük başlıktır.

🚀 Uygulama 1: Başlıklar ve Paragraflar

<h1>Yazılım Dünyasına Giriş</h1>

<p>Web geliştirme öğrenmek sabır ve pratik gerektiren keyifli bir süreçtir.</p>

<br>

<h2>HTML Nedir?</h2>

<p>HTML, sayfalarımızın temel iskeletidir.<br>Bu cümleyi break etiketi ile alt satıra indirdik.</p>

🎨 Yazı Formatları

Metin içerisindeki belirli kelimeleri vurgulamak veya biçimlendirmek için özel etiketler kullanırız:

🚀 Uygulama 2: Biçimlendirilmiş Metin

<p>Bu eğitimde <strong>Sıfırdan Web Tasarımı</strong> öğreneceksiniz. Lütfen dersleri <em>not alarak</em> takip ediniz.</p>

💬 Yorum Satırı ve İpucu Kutusu (Tooltip)

🚀 Uygulama 3: Yorum ve Tooltip Kullanımı

<!-- Menü Alanı Başlangıcı -->

<p title="Bu bir HTML niteliğidir (attribute)">Farenizi bu yazının üzerinde bekletin.</p>

<!-- Menü Alanı Bitişi -->

🔗 Bağlantı (Link) ve Görsel (Image) Yönetimi

🚀 Uygulama 4: Resimli Link ve Dış Bağlantı

Görselleri linklerin içerisine sararak tıklanabilir resimler üretebiliriz.

<!-- Dış siteye giden normal link -->

<a href="https://google.com" target="_blank">Google'da Ara</a>

 

<br><br>

 

<!-- Tıklanınca başka sayfaya giden görsel -->

<a href="hakkimizda.html">

    <img src="logo.png" alt="Şirket Logosu" width="150">

</a>

📋 Listeler (Sıralı ve Sırasız)

Web tasarımda menüler, kategoriler ve maddeli içerikler listelerle oluşturulur.

🚀 Uygulama 5: Alışveriş Listesi ve Web Sitesi Menüsü

<h3>Haftalık Alışveriş Listesi</h3>

<ol>

    <li>Süt</li>

    <li>Ekmek</li>

</ol>

 

<h3>Web Sitesi Menü Navigasyonu</h3>

<ul>

    <li><a href="index.html">Ana Sayfa</a></li>

    <li><a href="hakkimizda.html">Hakkımızda</a></li>

    <li><a href="iletisim.html">İletişim</a></li>

</ul>

📦 Bölümleme (Div) ve Form Elemanları

🚀 Uygulama 6: Temel Giriş Formu ve Kapsayıcı Div

<div class="form-konteyner">

    <h2>Kullanıcı Girişi</h2>

    <form action="#" method="POST">

        <label for="kullanici">Kullanıcı Adı:</label>

        <input type="text" id="kullanici" name="username" placeholder="Adınızı giriniz...">

       

        <br><br>

       

        <label for="sifre">Şifre:</label>

        <input type="password" id="sifre" name="user_password">

       

        <br><br>

       

        <button type="submit">Giriş Yap</button>

    </form>

</div>

📝 Pekiştirme Testi (HTML Pratik Soruları)

Öğrendiğiniz HTML bilgilerini sınamak için aşağıdaki mini senaryoları kendiniz yazmaya çalışın:

  1. Soru: Tıklandığında yeni sekmede (_blank) açılan ve üzerinde "Udemy" yazan bir link oluşturun.
  2. Soru: 3 maddeden oluşan bir "En Sevdiğim Filmler" listesi yapın. Maddeler numaralı (1, 2, 3) olsun.
  3. Soru: Bir web sayfasında en önemli ana başlığı hangi etiketle yazarız?

🎨 Konu 2: CSS'e İlk Adım ve Satır İçi (Inline) CSS

CSS (Cascading Style Sheets), HTML ile kurduğumuz kuru iskeleti renklendiren, boyutlandıran ve konumlandıran stil dilidir.

CSS'i HTML elementlerine doğrudan uygulamanın en hızlı (ancak büyük projelerde tercih edilmeyen) yolu Inline (Satır İçi) CSS'tir. Elementin içerisine style="..." niteliği yazılarak uygulanır.

<!-- Satır içi stil ile kırmızı, 20px boyutunda ve ortalanmış başlık -->

<h1 style="color: red; font-size: 20px; text-align: center;">Renkli Başlık</h1>

 

 

Harika! Temelleri sağlam attığımıza göre, şimdi web sitelerimizi gerçek birer görsel şölene dönüştüreceğimiz ve yapısal düzeni kuracağımız Gelişmiş CSS Dünyası ve ardından ilk gerçek projemiz olan Sıfırdan Portfolyo Sitesi bölümlerine geçiyoruz.

Süre ve önizleme gibi teknik kalabalıklar temizlenerek, tamamen kod mantığına ve uygulamaya odaklanılmıştır.

🎨 Full Stack Web Tasarım ve Programlama Eğitimi: Bölüm 2

📐 Konu 1: CSS Yapısı ve Seçiciler (Selectors)

Bir önceki bölümde gördüğümüz Inline CSS, her etikete tek tek yazıldığı için kod karmaşasına yol açar. Gerçek projelerde stilleri merkezi bir yerden yönetmek için Internal (İç) CSS veya en doğrusu olan External (Dış) CSS kullanılır.

📌 CSS Çeşitleri

<!-- Dış CSS dosyasını HTML'e bağlama kodu (head içine yazılır) -->

<link rel="stylesheet" href="style.css">

🏷️ Kimlik (ID) ve Sınıf (Class) Kavramları

CSS ile HTML elementlerini seçip boyamak için iki temel ayırt edici nitelik kullanırız:

🚀 Uygulama 1: Sınıf ve Kimlik Yönetimi

HTML Yapısı:

<p class="kirmizi-yazi">Ben kırmızı bir paragrafım.</p>

<p class="kirmizi-yazi">Ben de aynı sınıfa dahilim ve kırmızıyım.</p>

 

<div id="ana-banner">Bu özel alanın tasarımı tektir.</div>

CSS Yapısı (style.css):

/* Sınıf Seçici */

.kirmizi-yazi {

    color: #ff0000;

}

 

/* ID Seçici */

#ana-banner {

    background-color: #333;

    color: #fff;

    padding: 20px;

}

🎨 Konu 2: Renkler (HEX), Fontlar ve Metin Şekillendirme

🎨 Renk Seçimi ve Önbellek (Çerez) Sorunu

Web sitelerinde renkler çoğunlukla Onaltılık (HEX) kodlarla (Örn: #FFFFFF beyaz, #000000 siyah) belirtilir. Tarayıcılarda Color Picker (Renk Seçici) araçlarını kullanarak beğendiğiniz rengin HEX kodunu kopyalayabilirsiniz.

⚠️ Geliştirici Tuzağı (Önbellek): CSS dosyanızda değişiklik yaptığınız halde tarayıcıda yenilediğinizde değişmiyorsa, tarayıcınız eski CSS dosyasını çerezlerine (önbelleğe) atmış olabilir. Bu durumu aşmak için tarayıcıyı Gizli Modda açabilir veya Ctrl + F5 kombinasyonu ile sayfayı tamamen temizleyerek yenileyebilirsiniz.

✍️ Metin Biçimlendirme Özellikleri

🚀 Uygulama 2: Metin Stil Çalışması

body {

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

 

h2 {

    font-size: 28px;

    color: #2c3e50;

    text-align: center;

    text-transform: uppercase; /* Tüm harfleri büyük yapar */

}

📦 Konu 3: CSS Kutu Modeli (Box Model)

CSS dünyasındaki her element, etrafında görünmez birer kutu barındırır. Web sitelerinin yerleşim planı tamamen bu kutu modeline dayanır.

+-----------------------------------+

 

|             Margin                |  <- Dış Boşluk

|    +-------------------------+    |

|    |        Border           |    |  <- Çerçeve

|    |    +---------------+    |    |

|    |    |    Padding    |    |    |  <- İç Boşluk

|    |    |   İçerik/Yazı |    |    |

|    |    +---------------+    |    |

|    +-------------------------+    |

+-----------------------------------+

🚀 Uygulama 3: Kutu Modeli Oluşturma

Bir web sitesi için şık bir buton veya kart (card) alanı tasarlayalım:

HTML:

<div class="ozellik-kutusu">

    <h3>Mobil Uyumlu</h3>

    <p>Tasarımlarımız tüm cihazlarda harika görünür.</p>

</div>

CSS:

.ozellik-kutusu {

    width: 300px;

    height: auto;

    background-color: #f8f9fa;

   

    /* Kutu Modeli Ayarları */

    border: 2px solid #3498db; /* Kalınlık, Stil, Renk */

    padding: 15px;             /* Kutunun içindeki yazıların kenara sıkışmasını önler */

    margin: 20px auto;         /* Üst-alttan 20px boşluk bırakır, sağ-soldan ortalar */

}

🧭 Konu 4: Hizalama ve Element Düzeni (Display, Float, Combinators)

🧱 Display (Görünüm) Özelliği

🌊 Float ve Ortalamak (Aligning)

Eski ve köklü projelerde elementleri yan yana dizmek için float: left; veya float: right; kullanılır. Blok düzeyindeki bir elementi sayfada tam ortalamak içinse genişlik verip margin: 0 auto; kuralı uygulanır.

⛓️ Kombinasyon Seçiciler (Combinators)

Elementlerin birbiriyle olan hiyerarşik ilişkisine göre seçim yapmamızı sağlar.

🚀 Uygulama 4: CSS Tablo ve Form Görselleştirme

Gelişmiş bir form ve hiyerarşik seçici kullanımı gerçekleştirelim:

HTML:

<form class="kayit-formu">

    <div class="input-grup">

        <input type="text" placeholder="Adınız">

    </div>

    <div class="input-grup">

        <input type="email" placeholder="E-posta Adresiniz">

    </div>

</form>

CSS:

/* Sadece .kayit-formu sınıfının içindeki inputları seç ve stillendir */

.kayit-formu .input-grup input {

    width: 100%;

    padding: 10px;

    margin-bottom: 10px;

    border: 1px solid #ccc;

    border-radius: 4px; /* Köşeleri yumuşatır */

}

💼 Konu 5: Sıfırdan Portfolyo Sitesi Projesi

Şu ana kadar öğrendiğimiz HTML ve CSS mimarisini, sayfalar arası geçişi olan gerçekçi bir 3 Sayfalı Portfolyo Sitesi üzerinde birleştirelim. Tasarım harikası olmasından ziyade işlevselliğe ve sayfaların birbirine bağlanmasına odaklanacağız.

🧱 Proje Dosya Yapısı

Aşağıdaki dosyaların tamamının masaüstünde oluşturduğunuz aynı web klasöründe olması gerekir:

📄 Adım 1: Ortak CSS Altyapısı (style.css)

Tüm sayfaların menüsü ve genel düzeni bu dosyadan beslenecektir.

/* Genel Sıfırlama */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

 

body {

    font-family: Arial, sans-serif;

    line-height: 1.6;

    background-color: #f4f4f4;

}

 

/* Navigasyon Menüsü */

nav {

    background-color: #2c3e50;

    padding: 15px;

}

 

nav ul {

    list-style: none;

    text-align: center;

}

 

nav ul li {

    display: inline-block;

    margin: 0 15px;

}

 

nav ul li a {

    color: #fff;

    text-decoration: none;

    font-weight: bold;

}

 

nav ul li a:hover {

    color: #1abc9c; /* Fare üzerine gelince yeşile döner */

}

 

/* İçerik Alanı */

.icerik {

    max-width: 800px;

    margin: 30px auto;

    background: #fff;

    padding: 20px;

    border-radius: 8px;

    box-shadow: 0 0 10px rgba(0,0,0,0.1);

}

 

/* Form Elemanları */

.form-grup {

    margin-bottom: 15px;

}

 

.form-grup label {

    display: block;

    font-weight: bold;

}

 

.form-grup input, .form-grup textarea {

    width: 100%;

    padding: 8px;

    margin-top: 5px;

}

 

button {

    background-color: #2c3e50;

    color: white;

    padding: 10px 15px;

    border: none;

    cursor: pointer;

}

 

button:hover {

    background-color: #1abc9c;

}

🏠 Adım 2: Ana Sayfa (index.html)

<!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <title>Portfolyom - Ana Sayfa</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

 

    <!-- Tüm Sayfalarda Ortak Olacak Menü -->

    <nav>

        <ul>

            <li><a href="index.html">Ana Sayfa</a></li>

            <li><a href="hakkimizda.html">Hakkımda</a></li>

            <li><a href="iletisim.html">İletişim</a></li>

        </ul>

    </nav>

 

    <div class="icerik">

        <h1>Yazılım Geliştirici Portfolyosuna Hoş Geldiniz</h1>

        <p>Merhaba, ben bir Full Stack Web Geliştirici adayıyım. Bu site HTML ve CSS bilgilerimi pekiştirmek için yaptığım ilk dinamik geçişli projedir.</p>

    </div>

 

</body>

</html>

🧑‍💻 Adım 3: Hakkımızda Sayfası (hakkimizda.html)

<!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <title>Portfolyom - Hakkımda</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

 

    <nav>

        <ul>

            <li><a href="index.html">Ana Sayfa</a></li>

            <li><a href="hakkimizda.html">Hakkımda</a></li>

            <li><a href="iletisim.html">İletişim</a></li>

        </ul>

    </nav>

 

    <div class="icerik">

        <h2>Hakkımda</h2>

        <p>Sıfırdan başladığım bu serüvende HTML ve CSS adımlarını başarıyla tamamladım. Yakında JavaScript, Bootstrap ve PHP öğrenerek tam donanımlı projeler üretmeye başlayacağım.</p>

    </div>

 

</body>

</html>

📞 Adım 4: İletişim Sayfası (iletisim.html)

<!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <title>Portfolyom - İletişim</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

 

    <nav>

        <ul>

            <li><a href="index.html">Ana Sayfa</a></li>

            <li><a href="hakkimizda.html">Hakkımda</a></li>

            <li><a href="iletisim.html">İletişim</a></li>

        </ul>

    </nav>

 

    <div class="icerik">

        <h2>Bana Ulaşın</h2>

       

        <!-- Mailto Özelliği: Gönder butonuna basınca bilgisayarın e-posta uygulamasını açar -->

        <p>Bana doğrudan yazmak için <a href="mailto:ornek@eposta.com">ornek@eposta.com</a> adresini kullanabilirsiniz.</p>

       

        <br>

 

        <form action="#" method="POST">

            <div class="form-grup">

                <label>Adınız Soyadınız:</label>

                <input type="text" required>

            </div>

            <div class="form-grup">

                <label>E-posta Adresiniz:</label>

                <input type="email" required>

            </div>

            <div class="form-grup">

                <label>Mesajınız:</label>

                <textarea rows="5" required></textarea>

            </div>

            <button type="submit">Mesajı Gönder</button>

        </form>

    </div>

 

</body>

</html>

 

Harika ilerliyoruz! HTML ve CSS ile tasarımlarımızı oluşturup bir portfolyo projesine dönüştürdük. Şimdi sırada, yazdığımız sitelerin akıllı telefon, tablet ve masaüstü bilgisayarlarda kusursuz görünmesini sağlayacak olan Responsive Tasarım (Mobil Uyum) ve bu süreci inanılmaz hızlandıran Bootstrap dünyası var.

Müfredattaki süre ve ders sayısı gibi kalabalıklar temizlenmiş, tamamen modern web standartlarına uygun kod mantığı ve canlı uygulamalar eklenmiştir.

📱 Full Stack Web Tasarım ve Programlama Eğitimi: Bölüm 3

📐 Konu 1: Responsive Tasarımın Temeli (Mobil Uyum)

Responsive Web Tasarım, bir web sitesinin ekran genişliğine göre kendi düzenini otomatik olarak yeniden şekillendirmesidir. Masaüstünde yan yana duran 3 kutu, ekranı küçük bir cep telefonunda alt alta dizilmelidir ki kullanıcı parmağıyla ekranı sağa sola kaydırmak zorunda kalmasın.

🌐 Viewport Meta Etiketi

Mobil uyumlu bir sitenin HTML sayfasında bulunması zorunlu olan en kritik kod, <head> etiketleri arasına yazılan Viewport kodudur. Bu kod, tarayıcıya sayfa boyutlarını cihazın ekran genişliğine göre ayarlamasını söyler.

<!-- Bu kod yoksa, yazdığınız hiçbir mobil uyum kodu telefonda çalışmaz -->

<meta name="viewport" content="width=device-width, initial-scale=1.0">

✂️ Medya Sorguları (Media Queries)

CSS'te belirli ekran genişliklerine özel kurallar yazmak için @media kuralını kullanırız. Örneğin: "Ekran genişliği 768 pikselden küçükse şu stilleri uygula" diyebiliriz.

🚀 Uygulama 1: Ekran Küçüldüğünde Değişen Menü ve İçerik

Masaüstünde yan yana duran menü elemanlarını ve içerik bloklarını, ekran cep telefonu boyutuna geldiğinde dikey (alt alta) hale getirelim.

HTML:

<div class="kapsayici">

    <div class="blok-sol">Sol Menü / İçerik</div>

    <div class="blok-sag">Ana İçerik Alanı</div>

</div>

CSS (style.css):

/* Masaüstü Varsayılan Tasarım */

.kapsayici {

    display: flex; /* Elementleri yan yana dizmek için modern bir yöntem */

}

.blok-sol {

    width: 300px;

    background-color: #34495e;

    color: white;

    padding: 20px;

}

.blok-sag {

    flex: 1; /* Kalan tüm alanı kapla */

    background-color: #ecf0f1;

    padding: 20px;

}

 

/* --- MOBİL UYUM ALANI (Ekran 768px veya daha küçükse) --- */

@media (max-width: 768px) {

    .kapsayici {

        flex-direction: column; /* Yan yana olan dizilimi ALT ALTA getirir */

    }

    .blok-sol, .blok-sag {

        width: 100%; /* Her iki blok da ekranın tamamını kaplasın */

        margin-bottom: 10px;

    }

}

⚡ Konu 2: Bootstrap Dünyası ve Kurulumu

Medya sorgularıyla (@media) her şeyi sıfırdan yazmak büyük projelerde çok zaman alır. Bootstrap, Twitter mühendisleri tarafından geliştirilmiş, hazır CSS sınıfları barındıran dünyanın en popüler Frontend (Ön Yüz) Kütüphanesidir.

⚙️ Bootstrap Nasıl Kurulur?

Projeye dahil etmenin en hızlı yolu CDN (Content Delivery Network) kullanmaktır. Bilgisayarınıza hiçbir şey indirmeden, Bootstrap'in sunucularındaki CSS dosyasını HTML sayfanıza bağlarsınız.

🚀 Uygulama 2: Bootstrap Destekli İlk Sayfa Şablonu

<!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Bootstrap Sitem</title>

   

    <!-- Bootstrap CSS Bağlantısı (Güncel Sürüm) -->

    <link href="https://jsdelivr.net" rel="stylesheet">

</head>

<body>

 

    <div class="container mt-5">

        <h1 class="text-center text-primary">Bootstrap Dünyasına Hoş Geldiniz!</h1>

        <p class="lead">Bu sayfadaki başlık rengi, ortalama ve bu yazı stili tamamen Bootstrap sınıfları ile yapılmıştır.</p>

    </div>

 

    <!-- Bootstrap JS (Menülerin açılması, slaytlar vb. interaktif işler için) -->

    <script src="https://jsdelivr.net"></script>

</body>

</html>

🧮 Konu 3: Bootstrap Grid (Izgara) Mantığı ve Sınıfları

Bootstrap'in kalbi Grid Sistemidir. Bootstrap, bir satırı görünmez 12 eşit parçaya (kolona) böler. Siz tasarladığınız elemente "Masaüstünde 4 parça kapla (yani yan yana 3 tane sığdır), mobilde ise 12 parça kapla (tam ekran yap)" talimatını tek bir sınıf ismiyle verirsiniz.

📐 Kolon Boyut Sınıfları (Breakpoints)

🚀 Uygulama 3: Bootstrap Grid ile Mobil Uyumlu 3'lü Kart Tasarımı

Herhangi bir CSS dosyası oluşturmadan, sadece Bootstrap sınıflarını kullanarak masaüstünde yan yana 3 adet duran, mobilde ise otomatik olarak alt alta dizilen bir hizmetler alanı yapalım.

<div class="container my-5">

    <!-- row: Bir satır başlatır -->

    <div class="row">

       

        <!-- Masaüstünde (lg) 12 parçanın 4'ünü kapla (12/4 = 3 sütun yan yana gelir) -->

        <!-- Mobilde varsayılan olarak tam satırı kaplar -->

        <div class="col-lg-4 col-md-6 mb-4">

            <div class="card p-3 border shadow-sm bg-light">

                <h3>Web Tasarım</h3>

                <p>Modern ve kurumsal web arayüz tasarımları yapıyoruz.</p>

            </div>

        </div>

 

        <div class="col-lg-4 col-md-6 mb-4">

            <div class="card p-3 border shadow-sm bg-light">

                <h3>E-Ticaret</h3>

                <p>Güvenli ve satış odaklı sanal mağaza çözümleri.</p>

            </div>

        </div>

 

        <div class="col-lg-4 col-md-12 mb-4">

            <div class="card p-3 border shadow-sm bg-light">

                <h3>SEO Optimizasyonu</h3>

                <p>Google aramalarında üst sıralara çıkmanızı sağlıyoruz.</p>

            </div>

        </div>

 

    </div>

</div>

🍔 Konu 4: Hazır Komponentler (Menü - Navbar ve Slayt - Carousel)

Bootstrap'in en büyük avantajı, saatlerce sürecek olan açılır menü (Hamburger Menu) ve görsel slayt (Slider) gibi yapıları saniyeler içinde kurmanızı sağlamasıdır.

🚀 Uygulama 4: Mobil Uyumlu Açılır Menü (Navbar) ve Slayt (Carousel) Yapımı

Aşağıdaki kodu HTML sayfanızın <body> etiketleri arasına yerleştirdiğinizde, ekran küçüldüğünde otomatik olarak üç çizgi (hamburger ikonuna) dönüşen şık bir menü ve altında dönen görseller elde edersiniz.

<!-- MOBİL UYUMLU BOOTSTRAP MENÜSÜ -->

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

  <div class="container-fluid">

    <a class="navbar-brand" href="#">ŞirketLogosu</a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">

      <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse" id="navbarNav">

      <ul class="navbar-expand navbar-nav ms-auto">

        <li class="nav-item"><a class="nav-link active" href="#">Ana Sayfa</a></li>

        <li class="nav-item"><a class="nav-link" href="#">Hizmetler</a></li>

        <li class="nav-item"><a class="nav-link" href="#">İletişim</a></li>

      </ul>

    </div>

  </div>

</nav>

 

<!-- BOOTSTRAP GÖRSEL SLAYTI (CAROUSEL) -->

<div id="anaSlayt" class="carousel slide container mt-4" data-bs-ride="carousel">

  <div class="carousel-inner text-center bg-secondary text-white p-5 rounded">

   

    <!-- 1. Slayt -->

    <div class="carousel-item active">

      <h2>Yaratıcı Çözümler</h2>

      <p>Geleceğin teknolojilerini bugünden inşa ediyoruz.</p>

    </div>

   

    <!-- 2. Slayt -->

    <div class="carousel-item">

      <h2>%100 Mobil Uyumlu</h2>

      <p>Tüm cihazlarda kesintisiz ve akıcı kullanıcı deneyimi.</p>

    </div>

   

  </div>

 

  <!-- Slayt Kontrol Butonları -->

  <button class="carousel-control-prev" type="button" data-bs-target="#anaSlayt" data-bs-slide="prev">

    <span class="carousel-control-prev-icon"></span>

  </button>

  <button class="carousel-control-next" type="button" data-bs-target="#anaSlayt" data-bs-slide="next">

    <span class="carousel-control-next-icon"></span>

  </button>

</div>

🎨 Konu 5: Kendi CSS Kodlarımızla Bootstrap'i Birlikte Kullanmak

Bootstrap bize harika bir zemin sunar ancak bazen markamızın tam renk tonunu veya özel sınır çizgilerini eklemek isteriz. Bu durumda Bootstrap sınıflarının üzerine kendi CSS dosyamızı yazarız.

📌 Altın Kural: Kendi yazdığınız style.css dosyasının <link> etiketi, HTML sayfasında her zaman Bootstrap CSS linkinin altında yer almalıdır. Böylece tarayıcı önce Bootstrap'i okur, ardından sizin özel kurallarınızla Bootstrap'in üzerine yazar.

<!-- Önce ana kütüphane -->

<link href="https://jsdelivr.net" rel="stylesheet">

<!-- Sonra sizin özel tasarımlarınız -->

<link rel="stylesheet" href="style.css">

 

Harika bir aşamaya geldik! Tasarımlarımızı HTML, CSS ve Bootstrap ile tamamen bitirdik, mobil uyumlu hale getirdik. Şimdi ise web sitelerimize gerçek bir akıl, mantık ve hareket katacağımız, tarayıcı tabanlı dünyanın en popüler programlama dili olan JavaScript dünyasına adım atıyoruz.

Müfredattaki süreler, ders sayıları ve önizleme gibi teknik kalabalıklar temizlenmiş; doğrudan mantığı kavratacak saf kod yapıları ve canlı uygulamalar eklenmiştir.

🧠 Full Stack Web Tasarım ve Programlama Eğitimi: Bölüm 4

🕹️ Konu 1: JavaScript Nedir ve Sayfaya Nasıl Dahil Edilir?

JavaScript (JS); HTML ile kurulan iskelete, CSS ile verilen estetiğe canlılık ve işlevsellik kazandıran bir programlama dilidir. Örneğin bir butona tıklandığında sayfa yenilenmeden bir kutunun açılması, form verilerinin kontrol edilmesi veya bir matematiksel hesaplama yapılması tamamen JavaScript'in görevidir.

🔌 JavaScript Kullanım Çeşitleri

<!-- Dış JavaScript dosyasını HTML'e bağlama (Body kapanışından hemen önce yapılması önerilir) -->

<script src="script.js"></script>

🏗️ Konu 2: HTML Elementlerine Erişim ve Dinamik Değişiklikler

JavaScript'in en güçlü yanlarından biri, HTML üzerindeki elementleri yakalayıp içeriklerini veya stillerini anlık olarak değiştirebilmesidir. Buna DOM (Document Object Model) Yönetimi denir.

🚀 Uygulama 1: Tıklama ile Yazı Yerini Değiştirme ve Renklendirme

Bir butona basıldığında sayfadaki iki paragrafın içeriğini yer değiştiren ve yazı boyutunu/rengini dinamik olarak güncelleyen bir sistem kuralım.

HTML:

<p id="paragraf1">Ben birinci paragrafım (Başta buradayım).</p>

<p id="paragraf2">Ben ikinci paragrafım (Ben de buradayım).</p>

 

<!-- onclick: Butona tıklandığında çalışacak JavaScript fonksiyonunu tetikler -->

<button onclick="metniDegistir()">İçerikleri Değiştir ve Süsle</button>

JavaScript (script.js):

function metniDegistir() {

    // 1. Elementleri ID'leri üzerinden hafızaya alıyoruz

    var p1 = document.getElementById("paragraf1");

    var p2 = document.getElementById("paragraf2");

   

    // 2. Birinci paragrafın eski değerini kaybolmasın diye geçici bir kutuda saklıyoruz

    var geciciKutu = p1.innerHTML;

   

    // 3. Değerleri birbiriyle değiştiriyoruz (innerHTML kullanarak)

    p1.innerHTML = p2.innerHTML;

    p2.innerHTML = geciciKutu;

   

    // 4. Stil Değişimi (.style özellikleri ile dinamik müdahale)

    p1.style.color = "blue";

    p1.style.fontSize = "24px";

   

    p2.style.color = "red";

    p2.style.fontSize = "18px";

}

🧮 Konu 3: JavaScript ile Programlama Temelleri

Yazılım dünyasının evrensel kuralları olan değişkenler, diziler ve döngüler mantığını JavaScript üzerinde uygulayalım.

📦 Değişkenler ve Matematiksel İşlemler

Değişkenler, içerisinde veri (sayı, metin vb.) sakladığımız dijital kutulardır. Günümüz JavaScript standartlarında var, let veya const anahtar kelimeleriyle tanımlanırlar.

let x = 7;

let y = 4;

let sonuc = x * y; // Sonuç 28 olacaktır

console.log(sonuc); // Tarayıcının incele/konsol ekranına yazdırır

🗃️ Diziler (Arrays)

Birden fazla veriyi tek bir değişken altında, listeli bir şekilde saklamak için diziler kullanılır. Elemanlara erişirken saymaya 0'dan başlanır.

let arabalar = ["BMW", "Mercedes", "Audi"];

console.log(arabalar[0]); // Ekrana "BMW" yazar

🛣️ Koşullu İfadeler (if - else) ve Mantıksal Operatörler

Belirli şartlara göre kodun akışını değiştirmemizi sağlar.

🚀 Uygulama 2: Kullanıcı Girdili Sayı Tahmin Oyunu

Kullanıcıdan input ve buton aracılığıyla bir sayı alalım, doğru sayıyla karşılaştırıp yönlendirme yapalım.

HTML:

<h3>Sayı Tahmin Oyunu (1-10 Arası)</h3>

<input type="number" id="kullaniciTahmini" placeholder="Tahmininiz...">

<button onclick="tahminKontrol()">Tahmin Et</button>

<p id="oyunMesaji"></p>

JavaScript:

let gizliSayi = 7; // Doğru tahmin edilmesi gereken sayı

 

function tahminKontrol() {

    // .value ile input elementinin içine yazılan değeri çekiyoruz

    let tahmin = document.getElementById("kullaniciTahmini").value;

    let mesajAlani = document.getElementById("oyunMesaji");

   

    if (tahmin == gizliSayi) {

        mesajAlani.innerHTML = "🎉 Tebrikler! Doğru bildiniz.";

        mesajAlani.style.color = "green";

    } else if (tahmin < gizliSayi && tahmin > 0) {

        mesajAlani.innerHTML = "📈 Biraz daha BÜYÜK bir sayı deneyin.";

        mesajAlani.style.color = "orange";

    } else if (tahmin > gizliSayi && tahmin <= 10) {

        mesajAlani.innerHTML = "📉 Biraz daha KÜÇÜK bir sayı deneyin.";

        mesajAlani.style.color = "orange";

    } else {

        mesajAlani.innerHTML = "⚠️ Lütfen 1 ile 10 arasında geçerli bir sayı girin!";

        mesajAlani.style.color = "red";

    }

}

🔄 Konu 4: Döngüler (for, while) ve Fonksiyonlar

🔁 Döngü Mantığı

Aynı işlemi defalarca tekrarlamak yerine döngüleri kullanırız.

🚀 Uygulama 3: Karekök Hesaplayıcı Fonksiyon

Dışarıdan parametre alıp çalışan ve döngüsel/matematiksel işlemler yapan gelişmiş bir fonksiyon kuralım.

// Kendisine gönderilen sayının karekökünü hesaplayan fonksiyon

function karekokHesapla(sayi) {

    // Math.sqrt hazır JavaScript matematik kütüphanesidir

    if (sayi >= 0) {

        return Math.sqrt(sayi);

    } else {

        return "Negatif sayıların karekökü reel sayılarda hesaplanamaz.";

    }

}

 

// Kullanımı:

let donenSonuc = karekokHesapla(25);

console.log(donenSonuc); // Konsola 5 yazar.

⚙️ Konu 5: Yok Olan Daireler Projesi (Bonus Etkinlik)

JavaScript ile web sayfasına nasıl görsel animasyon ve etkileşim katacağımızı göstermek adına, tıklandığında ekrandan kaybolan kutular/daireler uygulaması yapalım.

HTML:

<div class="daire" id="daire1" onclick="yokEt('daire1')"></div>

<div class="daire" id="daire2" onclick="yokEt('daire2')"></div>

CSS:

.daire {

    width: 100px;

    height: 100px;

    background-color: red;

    border-radius: 50%; /* Kareyi tam daire yapar */

    display: inline-block;

    margin: 20px;

    cursor: pointer;

    transition: opacity 0.5s; /* Yumuşak kaybolma efekti */

}

JavaScript:

function yokEt(daireId) {

    // Tıklanan daireyi ID'sine göre yakalayıp görünmez yapıyoruz

    document.getElementById(daireId).style.display = "none";

}

 

Harika bir adıma geldik! Saf JavaScript (Vanilla JS) ile tarayıcı elementlerine nasıl hükmedeceğimizi ve kodlama mantığını kavradık. Şimdi ise bu uzun JavaScript kodlarını çok daha kısa, pratik ve okunabilir hale getiren, yıllardır web dünyasının vazgeçilmezi olan jQuery kütüphanesini ve onunla yapacağımız İnteraktif Form Doğrulama projesini ele alıyoruz.

Müfredattaki süreler, ders sayıları ve önizleme gibi teknik detaylar temizlenmiş; tamamen modern web geliştirme pratikleri, Regex doğrulama mantığı ve pratik uygulamalar eklenmiştir.

🚀 Full Stack Web Tasarım ve Programlama Eğitimi: Bölüm 5

🔌 Konu 1: jQuery Nedir ve Kurulumu Nasıl Yapılır?

jQuery, "Daha Az Kod Yaz, Daha Çok İş Yap" (Write Less, Do More) felsefesiyle geliştirilmiş bir JavaScript kütüphanesidir. Saf JavaScript ile 5-6 satır süren element seçme, animasyon ekleme ve olay (event) yönetimi işlemlerini, jQuery tek bir satırda çözebilir.

🛠️ jQuery Projeye Nasıl Dahil Edilir?

jQuery'yi kullanmak için jquery.com üzerinden indirip lokal olarak projenize ekleyebilir (embed) veya CDN (sunucu bağlantısı) ile projenize anında dahil edebilirsiniz.

📌 Kritik Kural: jQuery kodlarınızın çalışabilmesi için, kendi yazdığınız script.js dosyasından ÖNCE jQuery kütüphane linkinin HTML sayfasına eklenmesi şarttır.

<!-- 1. Önce jQuery Kütüphanesi Bağlantısı (Body kapanışından hemen önce) -->

<script src="https://jquery.com"></script>

 

<!-- 2. Sonra Sizin Yazacağınız Özel Kod Dosyanız -->

<script src="script.js"></script>

⚡ Konu 2: jQuery ile Element Yakalama, Tıklama Tespiti ve Animasyonlar

JavaScript'teki document.getElementById veya querySelector uzun yapıları yerine, jQuery'de elementleri CSS seçici mantığıyla $() sembolü içinde çok hızlıca yakalarız.

🎭 Temel Fonksiyonlar ve Olaylar

🚀 Uygulama 1: jQuery ile Hızlı Animasyon ve Stil Yönetimi

Bir butona tıklandığında kutunun yumuşakça kaybolmasını, diğerine tıklandığında ise kutunun renginin değişip büyümesini sağlayalım.

HTML:

<button id="btnGizle">Kutuyu Gizle</button>

<button id="btnBuyut">Kutuyu Değiştir</button>

 

<div id="testKutusu" style="width:100px; height:100px; background-color:red; margin-top:20px;"></div>

JavaScript (script.js - jQuery Destekli):

// Sayfa tamamen yüklendiğinde kodların çalışmaya hazır olmasını sağlar

$(document).ready(function() {

   

    // Tıklama tespiti ve Gizleme Animasyonu

    $("#btnGizle").click(function() {

        // Kutuyu 700 milisaniyede yumuşakça yok et (fadeOut)

        $("#testKutusu").fadeOut(700);

    });

 

    // Stil Değişikliği ve Gelişmiş Animasyon

    $("#btnBuyut").click(function() {

        // .css kullanımı ile anlık renk değişimi

        $("#testKutusu").css("background-color", "blue");

       

        // .animate kullanımı ile genişlik ve yükseklik değişimi

        $("#testKutusu").animate({

            width: "200px",

            height: "200px"

        }, 500); // 500 milisaniyede tamamla

    });

 

});

💼 Konu 3: jQuery Projesi — İnteraktif Form Doğrulama

Kullanıcıların formları boş bırakmasını engellemek, e-posta adreslerinin gerçek bir e-posta formatında olup olmadığını (@ ve . işareti içeriyor mu) kontrol etmek ve şifre güvenliğini tarayıcı tarafında doğrulamak için harika bir interaktif form projesi inşa edelim.

🧱 Adım 1: HTML Form Yapısının Oluşturulması

<div class="form-konteyner" style="max-width:400px; margin:50px auto; font-family:Arial;">

    <h2>Kayıt Ol</h2>

    <form id="kayitFormu">

        <div style="margin-bottom:15px;">

            <input type="text" id="isim" placeholder="Adınız Soyadınız" style="width:100%; padding:10px;">

            <span class="hata" id="isimHata" style="color:red; display:none;">Bu alan boş bırakılamaz!</span>

        </div>

 

        <div style="margin-bottom:15px;">

            <input type="text" id="email" placeholder="E-posta Adresiniz" style="width:100%; padding:10px;">

            <span class="hata" id="emailHata" style="color:red; display:none;">Geçersiz e-posta adresi!</span>

        </div>

 

        <div style="margin-bottom:15px;">

            <input type="password" id="sifre" placeholder="Şifreniz (En az 6 karakter)" style="width:100%; padding:10px;">

            <span class="hata" id="sifreHata" style="color:red; display:none;">Şifre en az 6 karakter olmalıdır!</span>

        </div>

 

        <button type="submit" style="width:100%; padding:10px; background:#2c3e50; color:#fff; border:none; cursor:pointer;">Kayıt İşlemini Tamamla</button>

    </form>

   

    <div id="basariMesaji" style="margin-top:20px; color:green; display:none; font-weight:bold; text-align:center;">

        🎉 Form başarıyla doğrulandı ve gönderilmeye hazır!

    </div>

</div>

🧠 Adım 2: jQuery ile Doğrulama Scriptinin Yazılması (Regex ve Input Kontrolleri)

Bu adımda kullanıcının verilerini anlık inceleyeceğiz. E-posta kontrolü için Regex (Düzenli İfadeler) adı verilen evrensel metin şablonu doğrulama fonksiyonunu kullanacağız.

$(document).ready(function() {

 

    // E-posta formatının geçerli olup olmadığını kontrol eden Regex fonksiyonu

    function emailGecerliMi(emailAdresi) {

        var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

        return regex.test(emailAdresi);

    }

 

    // Form gönderilmeye çalışıldığında (submit anı) devreye giren olay

    $("#kayitFormu").submit(function(olay) {

        // Formun sayfayı varsayılan olarak yenilemesini engelliyoruz

        olay.preventDefault();

       

        // Her submit işleminde önce hata mesajlarını gizleyelim

        $(".hata").hide();

        $("#basariMesaji").hide();

 

        // Input değerlerini alıyoruz (.val() fonksiyonu ile)

        var isimDeger = $("#isim").val().trim(); // .trim() sağ ve soldaki gereksiz boşlukları siler

        var emailDeger = $("#email").val().trim();

        var sifreDeger = $("#sifre").val();

 

        var formHatali = false;

 

        // 1. Boş Input Tespiti (İsim Alanı)

        if (isimDeger === "") {

            $("#isimHata").fadeIn(); // Hata mesajını yumuşakça göster

            formHatali = true;

        }

 

        // 2. E-mail Geçerliliği Kontrolü

        if (emailDeger === "" || !emailGecerliMi(emailDeger)) {

            $("#emailHata").fadeIn();

            formHatali = true;

        }

 

        // 3. Şifre Uzunluğu Kontrolü

        if (sifreDeger.length < 6) {

            $("#sifreHata").fadeIn();

            formHatali = true;

        }

 

        // Eğer hiçbir hata yoksa form başarıyla gönderilebilir durumdadır

        if (formHatali === false) {

            $("#basariMesaji").slideDown(); // Başarı mesajını yukarıdan aşağı kaydırarak göster

           

            // Gerçek senaryoda burada veriler arka yüze (PHP) gönderilir

            // this.submit(); kuralı tetiklenebilir.

        }

    });

 

});

 

Harika! Ön yüz (Frontend) teknolojilerini eksiksiz tamamladık. Artık kullanıcı tarafında çalışan sitelerimize, sunucu tarafında güç vereceğimiz, verileri işleyeceğimiz ve web sitelerini tamamen canlı ve dinamik hale getireceğimiz Backend (Arka Yüz) dünyasına adım atıyoruz.

İlk durağımız sunucu tarafının efsane dili PHP ve yerel sunucu ortamımız olan XAMPP. Süreler ve gereksiz metinler temizlenmiş, tamamen kod ve mantık odaklı rehberimiz hazırlanmıştır.

🐘 Full Stack Web Tasarım ve Programlama Eğitimi: Bölüm 6

🌐 Konu 1: PHP Nedir ve Yerel Sunucu (XAMPP) Kurulumu

PHP (Hypertext Preprocessor), sunucu tarafında çalışan (server-side) dinamik bir programlama dilidir. HTML veya JavaScript gibi tarayıcıda doğrudan çalışmaz; kodlar önce sunucuda işlenir, tarayıcıya sadece saf HTML sonucu gönderilir. Kullanıcılar sitenizin kaynak koduna sağ tıklayıp "İncele" dediğinde PHP kodlarınızı asla göremez.

💻 Yerel Sunucu Kurulumu (XAMPP)

Bilgisayarımızı bir web sunucusuna dönüştürmek ve PHP kodlarını çalıştırabilmek için XAMPP yazılımını kullanırız. XAMPP bize PHP motorunu ve MySQL veritabanını bir arada sunar.

  1. XAMPP Kontrol Paneli'ni açın ve Apache ile MySQL servislerinin yanındaki "Start" butonlarına basarak çalıştırın.
  2. Kritik Dosya Yolu: PHP dosyalarınızı bilgisayarınızdaki herhangi bir klasörde çalıştıramazsınız. Yazdığınız tüm .php uzantılı dosyalar mutlaka C:\xampp\htdocs\ klasörünün içerisinde yer almalıdır.
  3. Örneğin htdocs içinde temel_php adlı bir klasör açıp içine index.php eklerseniz, bu dosyaya tarayıcınızdan http://localhost/temel_php/ yazarak erişebilirsiniz.

🏗️ Konu 2: PHP Temelleri (Echo, Değişkenler ve Diziler)

🔏 PHP Yazım Kuralı (Syntax)

PHP kodları mutlaka <?php etiketi ile başlar ve ?> etiketi ile biter. Her kod satırının sonuna noktalı virgül (;) koymak zorunludur.

📢 Ekrana Yazdırma (echo)

Ekrana metin veya HTML çıktısı vermek için echo komutu kullanılır.

<?php

  echo "<h1>PHP Dünyasına Merhaba!</h1>";

?>

📦 PHP'de Değişkenler

PHP'de değişkenler dolar ($) işareti ile tanımlanır. JavaScript'teki gibi let veya var yazılmaz. Harf veya alt çizgi ile başlamalıdır, sayı ile başlayamaz.

<?php

  $isim = "Ahmet";

  $yas = 25;

  $boy = 1.78;

 

  // Metin birleştirme işlemi nokta (.) işareti ile yapılır

  echo "Merhaba, benim adım " . $isim . " ve ben " . $yas . " yaşındayım.";

?>

🗃️ PHP'de Diziler (Arrays)

Veri gruplarını listelemek için kullanılır. Çağrılırken indeks sırası (0, 1, 2...) esas alınır.

<?php

  $kurslar = array("HTML", "CSS", "JavaScript", "PHP");

 

  // İkinci elemanı (CSS) ekrana yazdıralım

  echo "Öğrenilen Kurs: " . $kurslar[1];

?>

🛣️ Konu 3: Koşullu İfadeler, Döngüler ve Dosya Dahil Etme (include)

🔄 Döngüler (for ve foreach)

PHP'de dizilerle çalışırken en çok tercih edilen döngü foreach döngüsüdür. Listenin içindeki tüm elemanları sırayla döner.

<?php

  $sehirler = array("İstanbul", "Ankara", "İzmir");

 

  // Dizideki her şehri liste elemanı olarak ekrana basalım

  echo "<ul>";

  foreach ($sehirler as $sehir) {

      echo "<li>" . $sehir . "</li>";

  }

  echo "</ul>";

?>

🧩 include Fonksiyonunun Gücü

Bir web sitesi yaparken menü (header), alt alan (footer) veya yan alan (sidebar) gibi her sayfada tekrar eden bölgeler vardır. Bunları her HTML sayfasına tek tek kopyalamak yerine, ayrı birer PHP dosyasında tutup include fonksiyonu ile tek satırda çağırırız. Böylece menüde bir değişiklik yapacağımızda 50 sayfayı değil, sadece header.php dosyasını değiştiririz.

🚀 Uygulama 1: Parçalı Sayfa Yapısı Kurma

Bir header.php oluşturun:

<!-- header.php dosya içeriği -->

<nav>

    <a href="index.php">Ana Sayfa</a> | <a href="hakkimizda.php">Hakkımızda</a>

</nav>

<hr>

Ardından bu menüyü index.php içinde tek satırda çağırın:

<!-- index.php dosya içeriği -->

<?php

  // Menüyü bu sayfaya dahil ediyoruz

  include "header.php";

?>

<h1>Ana Sayfaya Hoş Geldiniz</h1>

<p>Bu alan ana sayfa içeriğidir.</p>

📥 Konu 4: Sunucuya Veri Gönderme Metotları (GET ve POST)

Kullanıcıların formlara yazdığı bilgileri veya tıkladığı linklerdeki verileri PHP sunucusuna iletmenin iki temel yolu vardır: GET ve POST.

🔗 1. GET Metodu

Verileri URL adresi üzerinden (tarayıcı çubuğunda görünecek şekilde) gönderir. Güvenlik gerektirmeyen arama butonları veya kategori tıklamalarında tercih edilir.

🚀 Uygulama 2: URL'den Gelen Parametreleri Yakalamak

<?php

  // URL'de "kategori" adında bir parametre var mı diye kontrol ediyoruz

  if (isset($_GET['kategori'])) {

      $gelenKategori = $_GET['kategori'];

      echo "Şu an görüntülenen kategori: " . $gelenKategori;

  } else {

      echo "Lütfen bir kategori seçiniz.";

  }

?>

Tarayıcıda http://localhost/index.php?kategori=Yazilim yazarak test ettiğinizde ekrana kategori adını basacaktır.

🔒 2. POST Metodu

Verileri arka planda, tarayıcı çubuğunda gizleyerek sunucuya gönderir. Şifreler, kişisel bilgiler, form mesajları kesinlikle POST metodu ile gönderilmelidir. URL'de görünmez ve veri sınırı yoktur.

🚀 Uygulama 3: POST ile Gönderilen Form Verilerini İşlemek

Hem HTML formunu hem de bu formu karşılayıp işleyen PHP kodunu tek bir dosyada birleştirelim.

<?php

  // Eğer form butonuna basılmışsa (POST isteği gelmişse) kodları çalıştır

  if ($_SERVER["REQUEST_METHOD"] == "POST") {

     

      // Formdaki inputların 'name' niteliklerine göre verileri alıyoruz

      $kullaniciAdi = $_POST['username'];

      $mesaj = $_POST['user_message'];

 

      // Basit bir güvenlik temizliği (boş mu kontrolü)

      if (!empty($kullaniciAdi) && !empty($mesaj)) {

          echo "<div style='color:green; padding:10px; background:#e1f5fe;'>";

          echo "<h3>Mesaj Alındı!</h3>";

          echo "Sayın <strong>" . $kullaniciAdi . "</strong>, mesajınız sunucuya ulaştı: " . $mesaj;

          echo "</div><br>";

      } else {

          echo "<p style='color:red;'>Lütfen tüm alanları doldurun!</p>";

      }

  }

?>

 

<!-- HTML Form Alanı -->

<!-- action="" bırakılırsa form veriyi kendi olduğu sayfaya POST eder -->

<form action="" method="POST">

    <label>Adınız:</label><br>

    <input type="text" name="username" required><br><br>

 

    <label>Mesajınız:</label><br>

    <textarea name="user_message" required></textarea><br><br>

 

    <button type="submit">Gönder</button>

</form>

 

Harika bir dönüm noktasına geldik! PHP dili ile sunucu tarafında mantıksal işlemler yapmayı, formlardan gelen GET ve POST verilerini yakalamayı öğrendik. Ancak şu ana kadar işlediğimiz veriler sayfa yenilendiğinde veya tarayıcı kapandığında kayboluyordu.

Şimdi, verileri kalıcı olarak tablolarda saklayacağımız, modern web sitelerinin hafızası olan MySQL Veritabanı dünyasına adım atıyoruz. Bu bölümde CRUD (Create, Read, Update, Delete) yani Veri Ekleme, Okuma, Güncelleme ve Silme işlemlerinin tamamını kod örnekleriyle inşa edeceğiz.

🗄️ Full Stack Web Tasarım ve Programlama Eğitimi: Bölüm 7

📂 Konu 1: MySQL Nedir ve phpMyAdmin Ortamı

MySQL, verileri satırlar ve sütunlar halinde tablolarda saklayan ilişkisel bir veritabanı yönetim sistemidir. XAMPP içinde hazır olarak gelir.

🛠️ Veritabanı ve Tablo Oluşturma Adımları

  1. phpMyAdmin panelinden "Yeni" butonuna basarak kurumsal_db adında bir veritabanı oluşturun. (Türkçe karakter sorunu yaşamamak için karşılaştırma dilini utf8_general_ci veya utf16_general_ci seçin).
  2. Bu veritabanı içinde uyeler adında bir tablo oluşturun. Kolonları şu şekilde tanımlayın:

🔌 Konu 2: PHP ile MySQL Arasında Veritabanı Bağlantısı Kurmak (Connect)

PHP ile veritabanı arasında güvenli bir köprü kurmak için modern web standartı olan PDO (PHP Data Objects) mimarisini kullanacağız.

🚀 Uygulama 1: baglan.php Dosyasının Hazırlanması

Projemizdeki tüm veritabanı işlemlerinde bu bağlantı dosyasını include ederek kullanacağız.

<?php

$host     = "localhost";

$db_adi   = "kurumsal_db";

$kullanici= "root"; // XAMPP varsayılan kullanıcı adı

$sifre    = "";     // XAMPP varsayılan şifresi boştur

 

try {

    // PDO nesnesi oluşturarak bağlantıyı başlatıyoruz

    $baglanti = new PDO("mysql:host=$host;dbname=$db_adi;charset=utf8", $kullanici, $sifre);

   

    // Hata yönetim modunu aktif ediyoruz

    $baglanti->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

   

    // Test amaçlı (Geliştirme aşaması bittiğinde bu satır silinebilir)

    // echo "Veritabanı bağlantısı başarıyla kuruldu!";

}

catch (PDOException $hata) {

    // Bağlantıda hata oluşursa çalışacak alan

    die("Veritabanı bağlantı hatası: " . $hata->getMessage());

}

?>

📝 Konu 3: Veritabanına Veri Ekleme (INSERT) ve Güvenli Veri Alımı

Kullanıcıdan form aracılığıyla aldığımız verileri veritabanına kaydetme işlemidir. SQL Injection adı verilen siber saldırılardan korunmak için verileri doğrudan SQL sorgusunun içine yazmak yerine Prepare (Hazırlık) mimarisiyle güvenli hale getirmeliyiz.

🚀 Uygulama 2: Üye Kayıt Formu ve Veritabanına Ekleme İşlemi

<?php

// Önce veritabanı bağlantı dosyamızı çağırıyoruz

include "baglan.php";

 

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    $gelenIsim  = $_trim($_POST['isim']);

    $gelenEmail = $_trim($_POST['email']);

 

    if (!empty($gelenIsim) && !empty($gelenEmail)) {

       

        // --- ÇOKLU VERİ GİRİŞİNİN ÖNLENMESİ & ÖNCELİKLİ KONTROL ---

        // Aynı e-posta adresiyle daha önce kayıt olunmuş mu bakıyoruz

        $kontrolSorgusu = $baglanti->prepare("SELECT * FROM uyeler WHERE email = ?");

        $kontrolSorgusu->execute([$gelenEmail]);

       

        if ($kontrolSorgusu->rowCount() > 0) {

            echo "<p style='color:red;'>Bu e-posta adresi zaten sistemde kayıtlı!</p>";

        } else {

            // E-posta benzersiz ise kayıt işlemine geçiyoruz

            // Soru işaretleri (?) dışarıdan gelecek tehlikeli verileri maskeler

            $sorgu = $baglanti->prepare("INSERT INTO uyeler (isim, email) VALUES (?, ?)");

            $ekle  = $sorgu->execute([$gelenIsim, $gelenEmail]);

 

            if ($ekle) {

                echo "<p style='color:green;'>🎉 Üye veritabanına başarıyla kaydedildi!</p>";

            }

        }

    } else {

        echo "<p style='color:red;'>Lütfen tüm alanları doldurun.</p>";

    }

}

?>

 

<!-- HTML Formu -->

<form action="" method="POST">

    <input type="text" name="isim" placeholder="Adınız Soyadınız" required><br><br>

    <input type="email" name="email" placeholder="E-posta Adresiniz" required><br><br>

    <button type="submit">Kayıt Ol</button>

</form>

🔍 Konu 4: Veritabanındaki Verilerin Listelenmesi (SELECT & FETCH)

Veritabanında biriken verileri çekip web sayfamızda HTML tabloları veya listeleri halinde son kullanıcıya gösterme işlemidir.

🚀 Uygulama 3: Üye Listesi Tablosu Yapımı

<?php

include "baglan.php";

 

// uyeler tablosundaki tüm verileri seçiyoruz

$sorgu = $baglanti->query("SELECT * FROM uyeler", PDO::FETCH_ASSOC);

?>

 

<h3>Kayıtlı Üyeler Listesi</h3>

<table border="1" cellpadding="10" cellspacing="0">

    <tr>

        <th>ID</th>

        <th>İsim</th>

        <th>E-posta</th>

        <th>İşlemler</th>

    </tr>

   

    <?php

    // fetch() veya foreach ile gelen verileri satır satır döndürüyoruz

    foreach ($sorgu as $satir) {

    ?>

    <tr>

        <td><?php echo $satir['id']; ?></td>

        <td><?php echo $satir['isim']; ?></td>

        <td><?php echo $satir['email']; ?></td>

        <td>

            <!-- GET Metodunun Yaygın Kullanımı: ID parametresini linkle gönderiyoruz -->

            <a href="sil.php?id=<?php echo $satir['id']; ?>" onclick="return confirm('Silmek istediğinize emin misiniz?')">Sil</a>

        </td>

    </tr>

    <?php

    }

    ?>

</table>

🛑 Konu 5: Veri Silme (DELETE) ve Güncelleme (UPDATE) İşlemleri

🗑️ 1. Veri Silme İşlemi

Yukarıdaki tablodan gelen id parametresini yakalayarak veritabanından ilgili satırı tamamen silen sil.php dosyasını hazırlayalım.

🚀 Uygulama 4: sil.php Kod Yapısı

<?php

include "baglan.php";

 

// Link üzerinden gelen bir ID var mı kontrol ediyoruz

if (isset($_GET['id'])) {

    $silinecekID = $_GET['id'];

 

    // Sadece gelen ID'ye ait satırı silmek için WHERE koşulu şarttır!

    $silSorgusu = $baglanti->prepare("DELETE FROM uyeler WHERE id = ?");

    $durum = $silSorgusu->execute([$silinecekID]);

 

    if ($durum) {

        // Silme işlemi bitince kullanıcıyı otomatik ana listeye geri yönlendirir

        header("Location: liste.php");

        exit;

    }

}

?>

📝 2. Veri Güncelleme İşlemi

Var olan bir veriyi değiştirmek için UPDATE komutu kullanılır.

// Örnek Güncelleme Sorgu Mimarisi

$guncelleSorgu = $baglanti->prepare("UPDATE uyeler SET isim = ? WHERE id = ?");

$guncelleSorgu->execute(["Yeni İsim Değeri", 1]); // ID'si 1 olan üyenin ismini değiştirir

🔑 Konu 6: Oturum Yönetimi (SESSION) ve Çerezler (COOKIES)

⚠️ Önemli Kural: PHP'de SESSION yapılarını kullanabilmek için, sayfanın en üstünde, henüz hiçbir HTML kodu başlamadan önce mutlaka session_start(); fonksiyonu tetiklenmelidir.

 

Eğitim serüvenimizin en heyecanlı ve en büyük aşamasına geldik! Şu ana kadar parça parça öğrendiğimiz tüm Frontend (HTML, CSS, Bootstrap) ve Backend (PHP, MySQL, Session, Güvenlik) bilgilerimizi tek bir çatı altında birleştiriyoruz.

Müfredat doğrultusunda, odağımızı PHP/MySQL mimarisinden uzaklaştırmamak adına ön yüz animasyonları için saf JavaScript kalabalığına girmeden, tamamen Bootstrap esnekliği ve PHP sunucu gücüyle çalışan dinamik, yönetim panelli gerçek bir Blog Sitesi Projesi inşa ediyoruz.

📝 Full Stack Web Tasarım ve Programlama Eğitimi: Büyük Final Projesi

📁 Proje Dosya Yapısı ve Planlama

Projemizi modüler (parçalı) ve temiz kodlama mimarisine uygun olarak tasarlıyoruz. C:\xampp\htdocs\blog_projesi\ klasörü altında şu dosyaları oluşturun:

🗄️ Adım 1: Veritabanı Mimarisinin Kurulması

phpMyAdmin paneline girerek blog_db adında bir veritabanı oluşturun ve içerisine aşağıdaki iki tabloyu ekleyin:

  1. gonderiler Tablosu:
  2. admin Tablosu:

🔌 Adım 2: Çekirdek Kodlar (baglan.php ve header.php)

🧷 Veritabanı Bağlantısı (baglan.php)

<?php

try {

    $baglanti = new PDO("mysql:host=localhost;dbname=blog_db;charset=utf8", "root", "");

    $baglanti->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch (PDOException $e) {

    die("Bağlantı başarısız: " . $e->getMessage());

}

?>

🍔 Ortak Menü ve Bootstrap Altyapısı (header.php)

Oturum kontrollerini de sağlayan, tüm sayfalara dahil edeceğimiz dinamik menümüz:

<?php

if (session_status() === PHP_SESSION_NONE) {

    session_start(); // Oturum yönetimini başlatıyoruz

}

?>

<!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Dinamik PHP Blog</title>

    <!-- Bootstrap CDN -->

    <link href="https://jsdelivr.net" rel="stylesheet">

    <link rel="stylesheet" href="style.css">

</head>

<body class="bg-light">

 

<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">

  <div class="container">

    <a class="navbar-brand fw-bold" href="index.php">🚀 TeknoBlog</a>

    <div class="navbar-nav ms-auto">

        <a class="nav-item nav-link" href="index.php">Ana Sayfa</a>

        <?php if(isset($_SESSION['admin_giris'])): ?>

            <!-- Sadece admin giriş yaptıysa görünecek linkler -->

            <a class="nav-item nav-link text-warning" href="olustur.php">+ Yeni Yazı Ekle</a>

            <a class="nav-item nav-link text-danger" href="cikis.php">Çıkış Yap</a>

        <?php else: ?>

            <a class="nav-item nav-link" href="giris.php">Yönetici Girişi</a>

        <?php endif; ?>

    </div>

  </div>

</nav>

🔒 Adım 3: Admin Giriş Sistemi ve Güvenlik (giris.php)

Yetkisiz kişilerin blogunuza yazı yazmasını engellemek için SESSION kontrollü giriş ekranı hazırlıyoruz.

<?php

include "baglan.php";

include "header.php";

 

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    $kadi  = $_POST['kullanici'];

    $sifre = $_POST['sifre'];

 

    $sorgu = $baglanti->prepare("SELECT * FROM admin WHERE kullanici_adi = ? AND sifre = ?");

    $sorgu->execute([$kadi, $sifre]);

   

    if ($sorgu->rowCount() > 0) {

        $_SESSION['admin_giris'] = $kadi; // Oturumu başlat

        header("Location: olustur.php"); // Gönderi oluşturma sayfasına yönlendir

        exit;

    } else {

        echo "<div class='container'><div class='alert alert-danger'>Hatalı kullanıcı adı veya şifre!</div></div>";

    }

}

?>

 

<div class="container" style="max-width: 400px; margin-top: 100px;">

    <div class="card p-4 shadow border-0 rounded-3">

        <h3 class="text-center mb-4">Yönetim Paneli</h3>

        <form action="" method="POST">

            <div class="mb-3">

                <label class="form-label">Kullanıcı Adı</label>

                <input type="text" name="kullanici" class="form-control" required>

            </div>

            <div class="mb-3">

                <label class="form-label">Şifre</label>

                <input type="password" name="sifre" class="form-control" required>

            </div>

            <button type="submit" class="btn btn-dark w-100">Giriş Yap</button>

        </form>

    </div>

</div>

✍️ Adım 4: Güvenli Gönderi Oluşturma Alanı (olustur.php)

Sadece giriş yapmış adminin görebileceği, veritabanına yeni içerik basan arayüzdür. Burada siber güvenlik açığı oluşmaması için HTML etiketlerini filtreleme ve XSS koruması uygulayacağız.

<?php

include "baglan.php";

include "header.php";

 

// Güvenlik Duvarı: Giriş yapmamış kişiyi kapıdan çevirir

if (!isset($_SESSION['admin_giris'])) {

    header("Location: giris.php");

    exit;

}

 

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    $baslik = $_POST['baslik'];

   

    // XSS Güvenlik Açığının Kapatılması: htmlspecialchars() fonksiyonu

    // Kullanıcının zararlı script (kod) girmesini engeller, metne dönüştürür.

    $icerik = htmlspecialchars($_POST['icerik']);

 

    if (!empty($baslik) && !empty($icerik)) {

        $sorgu = $baglanti->prepare("INSERT INTO gonderiler (baslik, icerik) VALUES (?, ?)");

        $ekle  = $sorgu->execute([$baslik, $icerik]);

 

        if ($ekle) {

            echo "<div class='container'><div class='alert alert-success'>Yazı başarıyla yayınlandı!</div></div>";

        }

    }

}

?>

 

<div class="container">

    <div class="card p-4 shadow-sm border-0">

        <h2 class="mb-4">Yeni Blog Yazısı Yayınla</h2>

        <form action="" method="POST">

            <div class="mb-3">

                <label class="form-label fw-bold">Yazı Başlığı</label>

                <input type="text" name="baslik" class="form-control rounded-3" placeholder="Başlık girin..." required>

            </div>

            <div class="mb-3">

                <label class="form-label fw-bold">Yazı İçeriği</label>

                <textarea name="icerik" rows="8" class="form-control rounded-3" placeholder="Blog içeriğini buraya yazın..." required></textarea>

            </div>

            <button type="submit" class="btn btn-primary px-4">Yayınla</button>

        </form>

    </div>

</div>

📖 Adım 5: Gönderilerin Ana Sayfada Listelenmesi (index.php)

Son aşamada, veritabanında saklanan tüm postları çekerek ziyaretçilere Bootstrap kart tasarımlarıyla (Grid sistemine uygun olarak) gösteriyoruz.

<?php

include "baglan.php";

include "header.php";

 

// Veritabanındaki gönderileri çekiyoruz

$sorgu = $baglanti->query("SELECT * FROM gonderiler ORDER BY id DESC", PDO::FETCH_ASSOC);

?>

 

<div class="container">

    <div class="row">

        <div class="col-12 mb-4">

            <h1 class="display-5 fw-bold">Son Paylaşılan Yazılar</h1>

            <p class="text-muted">Teknoloji ve yazılım dünyasından güncel makaleler.</p>

        </div>

    </div>

 

    <div class="row">

        <?php if($sorgu->rowCount() > 0): ?>

            <?php foreach($sorgu as $yazi): ?>

                <!-- Her bir yazı masaüstünde 6'lık yer kaplasın (Yan yana 2 adet kart) -->

                <div class="col-md-6 mb-4">

                    <div class="card h-100 shadow-sm border-0 rounded-3">

                        <div class="card-body p-4">

                            <h3 class="card-title text-primary fw-bold"><?php echo $yazi['baslik']; ?></h3>

                            <hr>

                            <!-- nl2br() veritabanından gelen satır atlamalarını (\n) HTML break (<br>) etiketine çevirir -->

                            <p class="card-text text-secondary"><?php echo nl2br($yazi['icerik']); ?></p>

                        </div>

                    </div>

                </div>

            <?php endforeach; ?>

        <?php else: ?>

            <div class="col-12">

                <div class="alert alert-info text-center">Henüz hiçbir blog yazısı eklenmemiş.</div>

            </div>

        <?php endif; ?>

    </div>

</div>

 

</body>

</html>

 

Büyük final projemizi endüstriyel standartlarda, tam teşekküllü bir İçerik Yönetim Sistemine (CMS) dönüştürüyoruz. Bu aşamada dosya yükleme güvenliğini, veri güncellemeyi (UPDATE), veri silmeyi (DELETE) ve sitenizi dünyaya açma (Canlıya taşıma) adımlarını eksiksiz kod bloklarıyla entegre edeceğiz.

🚀 Full Stack Web Tasarım ve Programlama Eğitimi: İleri Seviye Eklentiler

📸 1. Blog Yazılarına Resim Yükleme (Dosya Upload) Özelliği

Öncelikle veritabanımızdaki gonderiler tablosuna resim yollarını tutmak için yeni bir kolon eklemeliyiz.

📝 olustur.php Dosyasının Güncellenmiş Hali

Form aracılığıyla dosya gönderebilmek için <form> etiketine mutlaka enctype="multipart/form-data" niteliği eklenmelidir. Güvenlik için sadece jpg, jpeg, png ve webp formatlarına izin vereceğiz.

<?php

include "baglan.php";

include "header.php";

 

if (!isset($_SESSION['admin_giris'])) {

    header("Location: giris.php");

    exit;

}

 

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    $baslik = $_POST['baslik'];

    $icerik = htmlspecialchars($_POST['icerik']);

   

    // --- RESMİ HAFIZAYA ALMA VE GÜVENLİK KONTROLLERİ ---

    $resimAdi   = $_FILES['blog_resim']['name'];

    $resimGecici= $_FILES['blog_resim']['tmp_name'];

    $resimHata  = $_FILES['blog_resim']['error'];

   

    $dosyaYolu  = ""; // Varsayılan boş yol

 

    if (!empty($baslik) && !empty($icerik) && $resimHata === 0) {

       

        // Dosya uzantısını kontrol etme

        $uzanti = strtolower(pathinfo($resimAdi, PATHINFO_EXTENSION));

        $izinVerilenUzantilar = ["jpg", "jpeg", "png", "webp"];

 

        if (in_array($uzanti, $izinVerilenUzantilar)) {

            // Aynı isimde resim yüklenirse çakışmasın diye benzersiz isim üretiyoruz

            $yeniResimAdi = uniqid("img_", true) . "." . $uzanti;

            $hedefKlasor  = "resimler/" . $yeniResimAdi;

 

            // Geçici klasördeki resmi asıl klasörümüze taşıyoruz

            if (move_uploaded_file($resimGecici, $hedefKlasor)) {

                $dosyaYolu = $hedefKlasor; // Veritabanına kaydedilecek yol

               

                // SQL Sorgusuna Resmi Dahil Ediyoruz

                $sorgu = $baglanti->prepare("INSERT INTO gonderiler (baslik, icerik, resim) VALUES (?, ?, ?)");

                $ekle  = $sorgu->execute([$baslik, $icerik, $dosyaYolu]);

 

                if ($ekle) {

                    echo "<div class='container'><div class='alert alert-success'>🎉 Yazı ve Resim Başarıyla Yayınlandı!</div></div>";

                }

            } else {

                echo "<div class='container'><div class='alert alert-danger'>Resim yüklenirken bir hata oluştu.</div></div>";

            }

        } else {

            echo "<div class='container'><div class='alert alert-danger'>Sadece JPG, JPEG, PNG ve WEBP formatları yüklenebilir!</div></div>";

        }

    }

}

?>

 

<div class="container">

    <div class="card p-4 shadow-sm border-0">

        <h2 class="mb-4">Resimli Yeni Blog Yazısı Yayınla</h2>

        <form action="" method="POST" enctype="multipart/form-data">

            <div class="mb-3">

                <label class="form-label fw-bold">Yazı Başlığı</label>

                <input type="text" name="baslik" class="form-control rounded-3" required>

            </div>

            <div class="mb-3">

                <label class="form-label fw-bold">Blog Görseli</label>

                <input type="file" name="blog_resim" class="form-control rounded-3" required>

            </div>

            <div class="mb-3">

                <label class="form-label fw-bold">Yazı İçeriği</label>

                <textarea name="icerik" rows="6" class="form-control rounded-3" required></textarea>

            </div>

            <button type="submit" class="btn btn-primary px-4">Yayınla</button>

        </form>

    </div>

</div>

🛠️ 2. Admin İçin Düzenleme (Update) ve Silme (Delete) Ekranları

Yazıları yönetebilmek için sadece adminin erişebileceği yonetim.php adında bir kontrol paneli sayfası listesi hazırlayalım.

📄 Adım A: Yönetim Listesi (yonetim.php)

<?php

include "baglan.php";

include "header.php";

 

if (!isset($_SESSION['admin_giris'])) {

    header("Location: giris.php");

    exit;

}

 

$sorgu = $baglanti->query("SELECT * FROM gonderiler ORDER BY id DESC", PDO::FETCH_ASSOC);

?>

 

<div class="container">

    <h2 class="mb-4">İçerik Yönetim Paneli</h2>

    <table class="table table-striped table-hover bg-white p-3 shadow-sm rounded">

        <thead class="table-dark">

            <tr>

                <th>Görsel</th>

                <th>Başlık</th>

                <th>İşlemler</th>

            </tr>

        </thead>

        <tbody>

            <?php foreach($sorgu as $satir): ?>

            <tr>

                <td>

                    <?php if(!empty($satir['resim'])): ?>

                        <img src="<?php echo $satir['resim']; ?>" width="60" class="rounded">

                    <?php else: ?>

                        <span class="text-muted">Görsel Yok</span>

                    <?php endif; ?>

                </td>

                <td class="align-middle fw-bold"><?php echo $satir['baslik']; ?></td>

                <td class="align-middle">

                    <a href="duzenle.php?id=<?php echo $satir['id']; ?>" class="btn btn-sm btn-warning">Düzenle</a>

                    <a href="sil.php?id=<?php echo $satir['id']; ?>" class="btn btn-sm btn-danger" onclick="return confirm('Bu yazıyı silmek istediğinize emin misiniz?')">Sil</a>

                </td>

            </tr>

            <?php endforeach; ?>

        </tbody>

    </table>

</div>

📝 Adım B: Yazı Düzenleme Sayfası (duzenle.php)

URL'den gelen id parametresine göre eski verileri formun içine doldurur ve UPDATE sorgusuyla günceller.

<?php

include "baglan.php";

include "header.php";

 

if (!isset($_SESSION['admin_giris']) || !isset($_GET['id'])) {

    header("Location: giris.php");

    exit;

}

 

$id = $_GET['id'];

 

// Eski veriyi çekip forma basıyoruz

$sorgu = $baglanti->prepare("SELECT * FROM gonderiler WHERE id = ?");

$sorgu->execute([$id]);

$yazi  = $sorgu->fetch(PDO::FETCH_ASSOC);

 

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    $yeniBaslik  = $_POST['baslik'];

    $yeniIcerik  = htmlspecialchars($_POST['icerik']);

 

    // Eğer yeni bir resim yüklenmişse mevcut resmi değiştir, yüklenmemişse eski resmi koru

    if ($_FILES['blog_resim']['error'] === 0) {

        $uzanti = strtolower(pathinfo($_FILES['blog_resim']['name'], PATHINFO_EXTENSION));

        $yeniResimAdi = uniqid("img_", true) . "." . $uzanti;

        move_uploaded_file($_FILES['blog_resim']['tmp_name'], "resimler/" . $yeniResimAdi);

        $dosyaYolu = "resimler/" . $yeniResimAdi;

       

        // Eski fiziksel resmi klasörden silme (Sunucuda çöp birikmesin diye)

        if(file_exists($yazi['resim'])) { unlink($yazi['resim']); }

    } else {

        $dosyaYolu = $yazi['resim']; // Eski resim yolu kalıyor

    }

 

    // UPDATE Sorgusu

    $guncelle = $baglanti->prepare("UPDATE gonderiler SET baslik = ?, icerik = ?, resim = ? WHERE id = ?");

    $durum    = $guncelle->execute([$yeniBaslik, $yeniIcerik, $dosyaYolu, $id]);

 

    if ($durum) {

        header("Location: yonetim.php");

        exit;

    }

}

?>

 

<div class="container">

    <div class="card p-4 shadow-sm border-0">

        <h2>Yazıyı Düzenle</h2>

        <form action="" method="POST" enctype="multipart/form-data">

            <div class="mb-3">

                <label class="form-label">Başlık</label>

                <input type="text" name="baslik" class="form-control" value="<?php echo $yazi['baslik']; ?>" required>

            </div>

            <div class="mb-3">

                <label class="form-label">Mevcut Görsel</label><br>

                <img src="<?php echo $yazi['resim']; ?>" width="120" class="mb-2 rounded shadow-sm">

                <input type="file" name="blog_resim" class="form-control">

            </div>

            <div class="mb-3">

                <label class="form-label">İçerik</label>

                <textarea name="icerik" rows="6" class="form-control" required><?php echo $yazi['icerik']; ?></textarea>

            </div>

            <button type="submit" class="btn btn-success">Değişiklikleri Kaydet</button>

        </form>

    </div>

</div>

🗑️ Adım C: Yazı Silme İşlemi (sil.php)

Sadece veritabanından satırı silmek yetmez; sunucu disk alanını korumak için yüklenen resim dosyasını da diskten tamamen (unlink) kazımalıyız.

<?php

include "baglan.php";

session_start();

 

if (isset($_SESSION['admin_giris']) && isset($_GET['id'])) {

    $id = $_GET['id'];

 

    // Önce silinecek yazının resim yolunu öğreniyoruz

    $sorgu = $baglanti->prepare("SELECT resim FROM gonderiler WHERE id = ?");

    $sorgu->execute([$id]);

    $yazi = $sorgu->fetch(PDO::FETCH_ASSOC);

 

    // Fiziksel resmi sunucu klasöründen siliyoruz

    if (!empty($yazi['resim']) && file_exists($yazi['resim'])) {

        unlink($yazi['resim']);

    }

 

    // Veritabanı satırını siliyoruz

    $sil = $baglanti->prepare("DELETE FROM gonderiler WHERE id = ?");

    $sil->execute([$id]);

}

 

header("Location: yonetim.php");

exit;

?>

🌎 3. Projenin Localhost'tan Gerçek Web Sitesine (Hosting/Domain) Taşınması

Projenizi bilgisayarınızdan çıkarıp dünyaya açmak için bir Domain (Alan Adı: orneksite.com) ve bir Linux/cPanel tabanlı PHP Hosting (Sunucu Alanı) edinmelisiniz. Taşıma işlemi tam olarak 4 adımdan oluşur:

📦 Adım 1: Dosyaların Arşivlenmesi ve FTP ile Yüklenmesi

  1. C:\xampp\htdocs\blog_projesi\ klasörünün içerisindeki tüm dosyaları seçin ve bir .zip arşivi haline getirin.
  2. Satın aldığınız hosting firmanızın size verdiği bilgilerle cPanel'e giriş yapın.
  3. Dosya Yöneticisi (File Manager) alanına girip public_html klasörünü açın.
  4. Oluşturduğunuz .zip dosyasını buraya yükleyin ve sağ tıklayarak "Extract" (Arşivi Çıkar) deyin.

💾 Adım 2: Local Veritabanının Dışa Aktarılması

  1. Bilgisayarınızda http://localhost/phpmyadmin/ adresini açın.
  2. Sol taraftan blog_db veritabanınıza tıklayın.
  3. Üst menüdeki "Dışa Aktar" (Export) sekmesine gelip hiçbir ayarı değiştirmeden "Git" butonuna basın. Bilgisayarınıza .sql uzantılı bir dosya inecektir.

🗄️ Adım 3: Canlı Sunucuda Veritabanı ve Kullanıcı Oluşturma

  1. Canlı sunucunuzun cPanel paneline dönün ve "MySQL® Veritabanı Sihirbazı" (MySQL Database Wizard) seçeneğini açın.
  2. Siteniz için yeni bir veritabanı ismi ve yeni bir veritabanı kullanıcısı (güçlü bir şifre ile) oluşturun.
  3. Kullanıcıya "Tüm Yetkileri Ver" (All Privileges) seçeneğini işaretleyerek eşleştirin. Bu aşamada cPanel'in size verdiği veritabanı_adı, kullanıcı_adı ve şifre bilgilerini bir kenara not edin.
  4. cPanel ana sayfasına dönüp phpMyAdmin alanına girin. Yeni oluşturduğunuz boş veritabanına tıklayıp "İçe Aktar" (Import) deyin ve bilgisayarınıza indirdiğiniz .sql dosyasını seçerek yükleyin.

⚙️ Adım 4: Canlı Sunucu Bağlantı Ayarı (baglan.php)

Canlı sunucuda veritabanı kullanıcı adı ve şifreleri root ve "" (boş) olamaz. Sunucudaki baglan.php dosyasını cPanel üzerinden düzenle diyerek açın ve yeni cPanel bilgilerinizle güncelleyin:

<?php

try {

    // Canlı sunucuda host genellikle yine 'localhost' kalır

    $baglanti = new PDO("mysql:host=localhost;dbname=cpanel_olusturulan_db_adi;charset=utf8", "cpanel_olusturulan_user", "cpanel_sifresi");

    $baglanti->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch (PDOException $e) {

    die("Bağlantı başarısız: " . $e->getMessage());

}

?>

Artık web siteniz alan adınızı (Örn: ://orneksite.com) tarayıcıya yazan herkes için tüm dünyada yayındadır!