Anasayfa Web Geliştirme ve Programlama

Web Geliştirme ve Programlama

Tarafından Receb A.
• 5 makaleler

HTML Nedir?

Merhaba, web geliştirme dünyasının tutkunu! Dijital çağda, bir web sitesini sıfırdan oluşturmanın temeli olan HTML (HyperText Markup Language), her geliştiricinin vazgeçilmezi. Eğer "HTML nedir" diye soruyorsanız, bu yazı tam size göre: Başlangıç seviyesinden ileri seviyeye kadar, HTML'in tarihini, temel yapısını, HTML5 yeniliklerini, erişilebilirlik standartlarını, CSS ve JavaScript entegrasyonunu, örnek kod parçacıklarını, yaygın hataları, mobil uyumlu tasarım ipuçlarını ve pratik egzersizleri kapsayan en detaylı rehber. Kaliteweb gibi güvenilir bir hosting sağlayıcısıyla sitenizi yayınladığınızda, HTML'in gücüyle milyonlara ulaşabilirsiniz. Hazırsanız, HTML'in büyüleyici dünyasına adım atalım! HTML'in Tarihi: Web'in Temel Taşının Evrimi HTML, web'in omurgası olarak 1980'lerin sonundan beri evrilen bir dildir. HTML nedir sorusunun kökeni, CERN'de çalışan fizikçi Tim Berners-Lee'ye dayanır. 1989'da Berners-Lee, bilimsel belgeleri paylaşmak için bir sistem tasarladı ve 1991'de ilk HTML versiyonunu yayınladı. Bu ilk sürüm, sadece 18 etiket içeriyordu ve hipermetin bağlantıları (hypertext) ile markup dili (markup language) kavramlarını birleştiriyordu. HTML 1.0 (1993), temel metin formatlaması ve bağlantılarla sınırlıydı; tablolar veya resimler yoktu. 1990'ların ortalarında, HTML 2.0 (1995) IETF tarafından standartlaştırıldı ve formlar eklendi. HTML 3.2 (1997), stil sayfaları ve tablo desteğini getirdi, ancak tarayıcı savaşları (Netscape vs Internet Explorer) standartlaşmayı zorlaştırdı. HTML 4.01 (1999), daha katı kurallar ve erişilebilirlik odaklı iyileştirmelerle geldi; XHTML 1.0 (2000) ise XML tabanlı bir varyasyondu. 2000'lerin başında, web 2.0'nin yükselişiyle HTML'in evrimi hızlandı. WHATWG (Web Hypertext Application Technology Working Group) 2004'te HTML5'i geliştirmeye başladı. W3C'nin 2014'te HTML5'i standartlaştırmasıyla, modern web doğdu. 2025 itibarıyla, HTML5'in son güncellemeleri (örneğin WCAG 2.2 entegrasyonu) erişilebilirlik ve performans odaklı. HTML'in evrimi, statik sayfalardan dinamik, interaktif uygulamalara geçişi simgeliyor – bugün 5 milyardan fazla web sitesi HTML kullanıyor. Bu tarih, HTML'in esnekliğini gösterir: Başlangıçta bilimsel paylaşım için tasarlanmışken, şimdi e-ticaret devleri ve mobil uygulamaların temelini oluşturuyor. İleri seviye geliştiriciler için, HTML'in XML kökenleri (XHTML) hala modüler kodlamada faydalı. HTML'in Temel Etiketleri ve Yapısı: Başlangıç Seviyesi Rehber HTML nedir ve nasıl yapılandırılır? HTML, etiketler (tags) ile metni ve içerikleri işaretleyen bir markup dilidir. Temel yapı, bir ağaç hiyerarşisidir: Kök <html>, başlık <head> ve gövde <body>. Bir HTML belgesi şöyle başlar: <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>İlk HTML Sayfam</title> </head> <body> <h1>Merhaba Dünya!</h1> <p>Bu bir paragraf etiketi.</p> </body> </html> Burada, <!DOCTYPE html> HTML5'i bildirir. <html lang="tr"> dilini tanımlar – SEO için kritik. <head> bölümünde meta etiketler (charset için UTF-8, viewport için mobil uyum) ve title yer alır. <body>'de içerik: <h1> başlık, <p> paragraf. Temel etiketler: - Yapısal Etiketler: <header>, <nav>, <main>, <footer>, <section>, <article> – semantik HTML için. - Metin Etiketleri: <strong> (kalın), <em> (italik), <a href="url"> (bağlantı), <img src="resim.jpg" alt="Açıklama"> (görsel – alt metin erişilebilirlik için zorunlu). - Liste Etiketleri: <ul> (sırasız liste), <ol> (sıralı), <li> (öğe). - Form Etiketleri: <form>, <input type="text">, <button>. İleri seviye: Etiketler kapanmalı (<p>Tekst</p>), öznitelikler (attributes) küçük harfle yazılır. Boş etiketler (void elements) kapanmaz: <br>, <hr>, <img>. HTML yapısı, DOM (Document Object Model) oluşturur – JS için temel. Pratik Egzersiz 1: Basit bir sayfa oluşturun. <head>'e meta ekleyin, <body>'ye başlık, paragraf ve bir bağlantı koyun. Tarayıcıda açın ve kodu validator.w3.org ile doğrulayın. HTML5 Yenilikleri: Modern Web'in Gücü (2025 Güncellemeleri) HTML5, 2014 standartıyla devrim yarattı ve 2025'te hala evriliyor. HTML5 nedir? Eski sürümlere göre semantik, multimedya ve API'ler eklenmiş hali. Başlıca yenilikler: 1. Semantik Etiketler: <header>, <footer>, <nav>, <article>, <aside> – SEO ve erişilebilirlik için. Örnek: <article><h2>Başlık</h2><p>İçerik</p></article>. 2. Multimedya Desteği: <audio src="ses.mp3" controls></audio>, <video src="video.mp4" width="400" controls poster="kapak.jpg"></video> – Flash'a gerek yok. 2025'te, <picture> etiketi responsive görseller için: <picture><source srcset="mobil.jpg" media="(max-width: 600px)"><img src="desktop.jpg" alt="Resim"></picture>. 3. Form İyileştirmeleri: <input type="email">, <input type="date">, <datalist> – doğrulama için. <progress value="70" max="100"> ilerleme çubuğu. 4. Canvas ve SVG: <canvas id="cizim" width="200" height="100"></canvas> grafik çizimi için (JS ile). <svg><circle cx="50" cy="50" r="40" fill="red"/></svg> vektör grafikler. 5. API'ler: Geolocation (navigator.geolocation.getCurrentPosition()), LocalStorage (localStorage.setItem('anahtar', 'değer')), Web Workers – arka plan işleri. 2025 yenilikleri: <dialog> modal pencere için (<dialog open><p>İçerik</p></dialog>), inert attribute (devre dışı bırakma), lazy loading (<img loading="lazy"> – performans için). İleri seviye: HTML5'in ARIA (Accessible Rich Internet Applications) entegrasyonu, dinamik içerik için. Pratik Egzersiz 2: Bir video player oluşturun. <video> etiketiyle bir video ekleyin, controls ve poster attribute'larını kullanın. Canvas ile basit bir çizim ekleyin. Erişilebilirlik Standartları: WCAG ve HTML HTML nedir ve neden erişilebilir olmalı? Erişilebilirlik, engelli kullanıcıların web'i kullanmasını sağlar. WCAG (Web Content Accessibility Guidelines) 2.2 (2023, 2025'te güncellenmiş), W3C'nin standartıdır: POUR prensipleri (Perceivable, Operable, Understandable, Robust). HTML'de erişilebilirlik: - Alt Metinler: <img alt="Açıklama"> – ekran okuyucular için zorunlu. - Semantik Yapı: <h1>-<h6> hiyerarşisi, <label for="id"> formlar için. - ARIA Etiketleri: <button aria-label="Kapat">X</button> – gizli içerik için. - Kontrast ve Renk: CSS ile WCAG AA (4.5:1 kontrast oranı). - Klavye Navigasyonu: <a href> ve <button> focusable olsun. Başlangıç: Tüm görsellerine alt ekleyin. İleri: <nav aria-label="Ana Menü"> ile landmark'lar tanımlayın. WCAG 2.2, mobil dokunma hedeflerini (44x44 piksel) ekler. Araçlar: WAVE veya Lighthouse ile test edin. Pratik Egzersiz 3: Bir form oluşturun. <input>'lara <label> ekleyin, bir resme alt metin verin. Ekran okuyucu simülasyonuyla (NVDA) test edin. CSS ve JavaScript Entegrasyonu: HTML'i Canlı Kılmak HTML yalnızken statik; CSS stil, JS etkileşim katar. Entegrasyon, web'in üçlü gücüdür. CSS Entegrasyonu: Üç yol: Inline (<p style="color:red;">), Internal (<style> p {color:red;} </style>), External (<link rel="stylesheet" href="stil.css"> – önerilen). Örnek: HTML'de <div class="kutu">İçerik</div>, CSS'de .kutu { background: blue; padding: 10px; }. JavaScript Entegrasyonu: <script src="script.js"></script> veya inline (<script>alert('Merhaba');</script>). DOM manipülasyonu: document.getElementById('id').innerHTML = 'Yeni';. Örnek Kod: Basit bir buton. HTML: <button id="buton">Tıkla</button> <p id="metin">Henüz tıklamadın.</p> JS: document.getElementById('buton').addEventListener('click', function() { document.getElementById('metin').innerHTML = 'Tıklandı!'; }); CSS: #buton { background: green; } İleri seviye: ES6+ (arrow functions), async/await API çağrıları için. 2025'te, Web Components (<custom-element>) ile modüler entegrasyon. Pratik Egzersiz 4: Bir sayfa yapın. External CSS ile stilleyin, JS ile buton ekleyin ki metni değiştirsin. Örnek Kod Parçacıkları: Pratik Uygulamalar Başlangıç örneği: Basit bir sayfa. <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <title>HTML Örneği</title> <style> body { font-family: Arial; } </style> </head> <body> <header><h1>Benim Sitem</h1></header> <nav><a href="#anasayfa">Anasayfa</a></nav> <main> <section> <article> <h2>İlk Makale</h2> <p>HTML ile yazıldı.</p> <img src="resim.jpg" alt="Örnek resim"> </article> </section> </main> <footer><p>&copy; 2025</p></footer> <script>console.log('HTML hazır!');</script> </body> </html> İleri örnek: Form ile JS doğrulama. HTML: <form id="form"> <label for="email">E-posta:</label> <input type="email" id="email" required> <button type="submit">Gönder</button> </form> JS: document.getElementById('form').addEventListener('submit', function(e) { e.preventDefault(); let email = document.getElementById('email').value; if (email.includes('@')) { alert('Geçerli!'); } else { alert('Hata!'); } }); Bu parçalar, HTML5 form validation'ını gösterir. Yaygın Hatalar ve Düzeltmeler: Kaçınmanız Gereken Tuzaklar HTML kodlamada hatalar yaygın; işte en sık olanlar. 1. Kapanmayan Etiketler: <p>Metin yerine <p>Metin</p>. Fix: Editörde auto-close kullanın (VS Code). 2. Yanlış DOCTYPE: Eski <!DOCTYPE HTML PUBLIC...> yerine <!DOCTYPE html>. Fix: HTML5 standartını kullanın. 3. Alt Metin Eksikliği: <img src="a.jpg"> yerine alt ekleyin. Fix: Her görsele descriptive alt verin. 4. Semantik Hatalar: <div> soup (aşırı div kullanımı) yerine semantik etiketler. Fix: <section> ve <article> tercih edin. 5. Öznitelik Hataları: HREF="url" yerine href="url". Fix: Küçük harf, tırnaklı. 6. Nesting Sorunları: <p><h1>Yanlış</h1></p> – p içinde h1 olamaz. Fix: Doğru hiyerarşi: Blok etiketler iç içe. 7. Charset Eksikliği: UTF-8 belirtmeyin, Türkçe karakterler bozulur. Fix: <meta charset="UTF-8">. İleri: Cross-browser uyum – IE desteği için polyfill'ler. Validator araçları (W3C) ile kontrol edin. Pratik Egzersiz 5: Hatalı bir kodu düzeltin. Kapanmayan etiketler ekleyin, validator ile test edin. Mobil Uyumlu Tasarım İpuçları: Responsive HTML Mobil uyum, 2025'te zorunlu – kullanıcıların %60'ı mobilden giriyor. HTML nedir ve mobil? Viewport meta ile başlar: <meta name="viewport" content="width=device-width, initial-scale=1.0">. İpuçları: 1. Semantik ve Esnek Yapı: Fluid grid'ler – CSS Grid/Flexbox ile: <div style="display: flex;">. 2. Media Queries: CSS'te @media (max-width: 600px) { body { font-size: 16px; } }. 3. Responsive Görseller: <img srcset="kucuk.jpg 300w, buyuk.jpg 800w" sizes="(max-width: 600px) 300px, 800px">. 4. Dokunma Hedefleri: Butonlar en az 44x44 piksel. 5. Mobile-First: Küçük ekranı önce tasarlayın, sonra genişletin. İleri: AMP (Accelerated Mobile Pages) için HTML5 subset'i kullanın. Kaliteweb'in hosting'inde, responsive siteler daha hızlı yüklenir. Pratik Egzersiz 6: Bir sayfayı responsive yapın. Viewport ekleyin, media query ile menüyü mobilde hamburger'a dönüştürün (JS ile). Pratik Egzersizler: Uygulamalı Öğrenme Yukarıdaki egzersizleri genişletelim: - Egzersiz 7 (İleri): Bir blog sayfası oluşturun. HTML5 semantik etiketler, CSS animasyonları ve JS ile yorum ekleme özelliği ekleyin. Erişilebilirlik için ARIA kullanın. - Egzersiz 8: Hatalı bir kodu debug edin. Yaygın hataları tespit edip düzeltin, Lighthouse ile skorunuzu 90+'ya çıkarın. Bu egzersizler, teoriyi pratiğe döker – GitHub'da paylaşın! HTML ile Web Geleceğini Şekillendirin HTML nedir? Web'in kalbi, evrilen bir dil. Bu rehberle, başlangıçtan ileri seviyeye hakim oldunuz – tarihinden mobil ipuçlarına. HTML5'in gücüyle, erişilebilir ve responsive siteler kurun. Kaliteweb'de yayınlayın, milyonlara ulaşın. Geliştirme yolculuğunuzda başarılar!

Son güncelleme tarihi Sep 08, 2025

PHP Nedir?

Dijital dünyanın temel taşlarından biri olan PHP, 2025 yılında hala web geliştirmenin vazgeçilmez bir parçası. Sunucu tarafı scripting dillerinin öncüsü olarak bilinen bu dil, milyonlarca web sitesini güçlendiriyor. İlk olarak Rasmus Lerdorf tarafından 1994’te geliştirilen PHP, Personal Home Page anlamına geliyordu; ancak zamanla Hypertext Preprocessor olarak evrildi. 2025’te PHP 8.4 sürümüyle, performans ve güvenlik iyileştirmeleriyle öne çıkıyor. Bu rehberde, PHP’nin tarihini ve evrimini, sunucu tarafı scripting özelliklerini, değişkenler, fonksiyonlar ve nesneler gibi temel kavramları, veritabanı entegrasyonunu (MySQL/PDO), popüler framework’leri (Laravel, Symfony), güvenlik pratiklerini, performans optimizasyon tekniklerini ve WordPress gibi CMS’lerde kullanımını derinlemesine inceleyeceğiz. Bolca kod örneği ve adım adım bir tutorial ile, PHP’yi projelerinizde ustalıkla kullanmak için ihtiyacınız olan her şeyi bulacaksınız. Kaliteweb gibi hosting sağlayıcılarıyla PHP uygulamalarınızı barındırarak, hızlı ve güvenli web siteleri oluşturabilirsiniz. Hazırsanız, PHP’nin büyülü dünyasına dalalım! PHP’nin Tarihi ve Evrimi: Bir Dilin Dönüşümü PHP’nin yolculuğu, 1994’te Rasmus Lerdorf’un kişisel web sayfalarını yönetmek için yazdığı bir araç setiyle başladı. O zamanlar C dilinde yazılmış basit bir script motoruydu. 1995’te PHP/FI (Forms Interpreter) olarak halka açıldı ve veritabanı entegrasyonu eklendi. 1998’de PHP 3 ile büyük bir sıçrama yaptı; Zend Engine’in temelleri atıldı. 2000’de PHP 4, nesne yönelimli programlamayı (OOP) getirdi. 2004’teki PHP 5, tam OOP desteği ve PDO (PHP Data Objects) ile modernleşti. 2015’te PHP 7, performansını %100 artırdı ve tip bildirimleri ekledi. 2020’de PHP 8, JIT derleyici ve attributes ile hızlandı. 2025’te PHP 8.4, fiber’lar (hafif eşzamanlılık) ve gelişmiş hata yönetimiyle evrildi. PHP’nin evrimi, web teknolojilerinin değişimine paralel ilerledi. Başlangıçta statik sayfalar için kullanılırken, bugün dinamik API’ler, CMS’ler ve mikro hizmetler için vazgeçilmez. Örnek: WordPress’in %80’i PHP ile yazıldı, milyonlarca siteyi güçlendiriyor. Datatelekom’un yüksek performanslı sunucularında, PHP 8.4 sürümüyle uygulamalar %30 daha hızlı çalışıyor. Sunucu Tarafı Scripting: PHP’nin Gücü PHP, sunucu tarafı scripting dillerinin kralıdır. Tarayıcı isteklerini sunucuda işler ve HTML/CSS/JS olarak yanıt verir. Bu, dinamik içerik üretmeyi sağlar – örneğin, kullanıcı girişine göre sayfa kişiselleştirme. Sunucu tarafı scripting’in avantajları: - Dinamik İçerik: Kullanıcı verilerine göre sayfalar oluşturun. - Güvenlik: Veritabanı şifreleri sunucuda kalır, istemciye gitmez. - Performans: Sunucu kaynaklarını verimli kullanır. Örnek Kod: Basit bir dinamik sayfa: <?php $greeting = 'Merhaba, Dünya!'; echo "<h1>$greeting</h1>"; ?> Bu kod, sunucuda işlenir ve HTML olarak gönderilir. Örnek: Bir blog, PHP ile veritabanından makaleleri çeker ve dinamik listeler. Değişkenler, Fonksiyonlar ve Nesneler: PHP’nin Temelleri PHP’de değişkenler, veri saklama için kullanılır. Tip bildirimi isteğe bağlıdır (dinamik tip sistemi). Değişkenler: $name = 'Ali'; // String $age = 30; // Integer $price = 99.99; // Float $isAdmin = true; // Boolean $colors = ['kırmızı', 'mavi']; // Array Fonksiyonlar: function add($a, $b) { return $a + $b; } echo add(5, 3); // 8 Gelişmiş: Tip bildirimi: function add(int $a, int $b): int { return $a + $b; } Nesneler (OOP): class User { public $name; private $age; public function __construct(string $name, int $age) { $this->name = $name; $this->age = $age; } public function getAge(): int { return $this->age; } } $user = new User('Ali', 30); echo $user->name; // Ali echo $user->getAge(); // 30 Örnek: Bir e-ticaret sitesi, OOP ile ürün nesneleri yönetir, değişkenlerle stok tutar. Fonksiyonlarla fiyat hesaplar. Veritabanı Entegrasyonu: MySQL ve PDO PHP, veritabanlarıyla kusursuz entegre olur. MySQL, en yaygın seçim; PDO, güvenli bağlantı sağlar. MySQL Bağlantısı: $conn = mysqli_connect('localhost', 'user', 'password', 'database'); if (!$conn) { die('Bağlantı hatası: ' . mysqli_connect_error()); } Sorgu: $sql = "SELECT * FROM users"; $result = mysqli_query($conn, $sql); while ($row = mysqli_fetch_assoc($result)) { echo $row['name'] . '<br>'; } mysqli_close($conn); PDO ile Güvenli Entegrasyon: try { $pdo = new PDO('mysql:host=localhost;dbname=database', 'user', 'password'); $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); } catch (PDOException $e) { die('Bağlantı hatası: ' . $e->getMessage()); } $stmt = $pdo->prepare('SELECT * FROM users WHERE id = :id'); $stmt->execute(['id' => 1]); $row = $stmt->fetch(PDO::FETCH_ASSOC); echo $row['name']; Örnek: Bir CMS, PDO ile kullanıcı girişini güvenli işler, SQL injection’ı önler. Framework’ler: Laravel ve Symfony PHP framework’leri, geliştirme sürecini hızlandırır. Laravel ve Symfony, 2025’te en popülerler. Laravel: - MVC mimarisi, Eloquent ORM, Artisan CLI. - Örnek: Route tanımlama: Route::get('/hello', function () { return 'Merhaba Laravel!'; }); - Avantaj: Hızlı geliştirme, Blade templating. Symfony: - Bileşen tabanlı, esnek. - Örnek: Controller: class HelloController extends AbstractController { #[Route('/hello', name: 'hello')] public function index(): Response { return $this->render('hello/index.html.twig', ['name' => 'Symfony']); } } - Avantaj: Yüksek ölçeklenebilirlik, Twig templating. Örnek: Bir API, Laravel ile geliştirildi, %40 daha hızlı prototipleme sağladı. Güvenlik Pratikleri: PHP Uygulamalarınızı Koruyun PHP’de güvenlik, kritik. 2025 pratikleri: - SQL Injection Önleme: PDO veya prepared statements kullanın. - XSS Koruma: htmlspecialchars() ile kullanıcı girdilerini filtreleyin: echo htmlspecialchars($userInput, ENT_QUOTES); - CSRF Koruma: Token’lar ekleyin: session_start(); $csrfToken = bin2hex(random_bytes(32)); $_SESSION['csrf_token'] = $csrfToken; Formda: <input type="hidden" name="csrf_token" value="<?php echo $csrfToken; ?>"> - Şifreleme: Argon2 ile şifre hash’leyin: $hash = password_hash($password, PASSWORD_ARGON2ID); - Dosya Yükleme Güvenliği: MIME tipi kontrolü: if ($_FILES['file']['type'] == 'image/jpeg') { // Yükle } - HTTPS Zorlama: .htaccess ile: RewriteEngine On RewriteCond %{HTTPS} off RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] Örnek: Bir form, CSRF token’ıyla güvenlendi, brute force saldırıları %90 azaldı. Performans Optimizasyonu: PHP’yi Hızlandırın PHP performansı, optimizasyonla %50 artırılabilir. 2025 teknikleri: - Opcode Caching: OPcache etkinleştirin: opcache.enable=1 opcache.memory_consumption=128 - Sorgu Optimizasyonu: Index ekleyin: CREATE INDEX idx_name ON users(name); - Caching: Redis ile: $redis = new Redis(); $redis->connect('127.0.0.1', 6379); $value = $redis->get('key'); if ($value === false) { $value = fetchData(); // Veriyi getir $redis->set('key', $value, 3600); // 1 saat cache’le } - Asenkron İşlemler: Swoole ile: $http = new Swoole\Http\Server('0.0.0.0', 9501); $http->on('request', function ($request, $response) { $response->end('Merhaba Swoole!'); }); $http->start(); - Profiling: Xdebug ile performansı analiz edin: xdebug.mode=profile xdebug.output_dir=/tmp Örnek: Bir API, OPcache ile yanıt süresini %40 azalttı. WordPress Gibi CMS’lerde PHP Kullanımı PHP, CMS’lerin belkemiğidir. WordPress, %43 pazar payıyla PHP tabanlıdır. Özellikler: - Tema ve Eklenti Geliştirme: functions.php ile custom fonksiyonlar: function my_custom_function() { echo 'Merhaba WordPress!'; } add_action('wp_footer', 'my_custom_function'); - Veritabanı İşlemleri: $wpdb ile: global $wpdb; $results = $wpdb->get_results('SELECT * FROM wp_posts'); foreach ($results as $row) { echo $row->post_title; } - Güvenlik: wp_nonce ile CSRF koruma: wp_nonce_field('my_action', 'my_nonce'); if (wp_verify_nonce($_POST['my_nonce'], 'my_action')) { // İşle } - Performans: Caching eklentileri (WP Super Cache) ile PHP hızlandırın. Örnek: Bir WordPress eklentisi, PHP ile kullanıcı rollerini yönetti, site performansını %25 artırdı. Adım Adım Tutorial: Basit Bir PHP Blog Uygulaması Bir blog uygulaması yapalım: Adım 1: Sunucu Hazırlığı - Apache/Nginx ve PHP 8.4 kurun. - MySQL veritabanı oluşturun: blog_db. Adım 2: Veritabanı Bağlantısı config.php: <?php $host = 'localhost'; $user = 'root'; $pass = ''; $db = 'blog_db'; $conn = new mysqli($host, $user, $pass, $db); if ($conn->connect_error) { die('Bağlantı hatası'); } ?> Adım 3: Tablo Oluşturma SQL ile: CREATE TABLE posts ( id INT AUTO_INCREMENT PRIMARY KEY, title VARCHAR(255), content TEXT, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ); Adım 4: Yazı Ekleme Formu add_post.php: <?php include 'config.php'; ?> <!DOCTYPE html> <html> <body> <form method="post"> Başlık: <input type="text" name="title"><br> İçerik: <textarea name="content"></textarea><br> <input type="submit" name="submit" value="Ekle"> </form> <?php if (isset($_POST['submit'])) { $title = mysqli_real_escape_string($conn, $_POST['title']); $content = mysqli_real_escape_string($conn, $_POST['content']); $sql = "INSERT INTO posts (title, content) VALUES ('$title', '$content')"; if ($conn->query($sql) === TRUE) { echo 'Yazı eklendi'; } else { echo 'Hata: ' . $conn->error; } } $conn->close(); ?> </body> </html> Adım 5: Yazıları Listeleme list_posts.php: <?php include 'config.php'; ?> <?php $sql = 'SELECT * FROM posts ORDER BY created_at DESC'; $result = $conn->query($sql); if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { echo '<h2>' . htmlspecialchars($row['title']) . '</h2>'; echo '<p>' . nl2br(htmlspecialchars($row['content'])) . '</p>'; echo '<hr>'; } } else { echo 'Yazı yok'; } $conn->close(); ?> Adım 6: Test Etme - Sunucuda çalıştırın, yazı ekleyin ve listeleyin. Süre: 1 saat. Güvenlik ekleyin: Escape fonksiyonları ile injection önleyin. Sonuç: PHP ile Web’in Geleceğini Kodlayın PHP, web geliştirmenin temel taşı. Tarihi, scripting gücü, veritabanı entegrasyonu ve framework’leriyle, 2025’in vazgeçilmezi. Bu rehberle, PHP’yi öğrenip projelerinizi hayata geçirin. Datatelekom’un altyapısıyla, uygulamalarınızı güvenle barındırın ve dijital dünyayı fethedin!

Son güncelleme tarihi Sep 10, 2025

Framework Nedir?

Dijital çağın vazgeçilmez unsurlarından biri olan framework’ler, yazılım geliştirme sürecini kökten değiştiren araçlardır. Geliştiricilerin tekrar eden görevleri otomatikleştirmesini, kod kalitesini artırmasını ve projeleri hızlıca tamamlamasını sağlar. 2025’te, framework’ler web ve mobil uygulama geliştirmenin temel taşları haline geldi, yapay zeka entegrasyonları ve bulut odaklı özelliklerle evrildi. Bu rehberde, framework’lerin ne olduğunu, türlerini (web ve app), popüler örneklerini (React, Django, Ruby on Rails), avantajlarını ve dezavantajlarını, seçim kriterlerini, kurulum rehberlerini, gerçek proje örneklerini ve gelecek trendlerini derinlemesine inceleyeceğiz. Kod snippet’leri ve pratik bilgilerle, framework’leri projelerinizde ustalıkla kullanmak için ihtiyacınız olan her şeyi bulacaksınız. Kaliteweb gibi bir hosting sağlayıcısıyla framework tabanlı uygulamalarınızı barındırarak, yüksek performanslı web siteleri oluşturabilirsiniz. Hazırsanız, framework’lerin dünyasına dalalım! Framework Nedir? Tanım ve Temel Kavramlar Framework, yazılım geliştirme sürecinde tekrar eden görevleri basitleştirmek ve standartlaştırmak için tasarlanmış bir kod kütüphanesi veya araç setidir. Geliştiricilere hazır şablonlar, kütüphaneler ve en iyi pratikler sunarak, sıfırdan kod yazma ihtiyacını azaltır. 2025’te, framework’ler AI entegrasyonu ve otomatik test özellikleriyle daha akıllı hale geldi. Temel kavramlar: - Inversion of Control (IoC): Framework, kod akışını kontrol eder, geliştirici iş mantığına odaklanır. - Modülerlik: Bileşenler bağımsız çalışır, ölçeklenebilirlik sağlar. - Konvansiyon Üzerine Konfigürasyon: Varsayılan ayarlar, manuel yapılandırmayı minimize eder. Örnek: Bir web uygulaması, framework olmadan yüzlerce satır kod gerektirirken, bir framework ile bu süre %60 kısalır. Datatelekom’un yüksek hızlı sunucularında, framework tabanlı projeler %30 daha verimli çalışır. Framework Türleri: Web ve Uygulama Framework’leri Framework’ler, kullanım alanına göre ikiye ayrılır: Web framework’leri ve app (mobil/yerel) framework’leri. 2025’te, web framework’leri bulut entegrasyonuyla, app framework’leri cross-platform özellikleriyle öne çıkıyor. Web Framework’leri Web framework’leri, HTTP isteklerini yönetir, veritabanı etkileşimini kolaylaştırır ve UI/UX’i standartlaştırır. Örnekler: - Django (Python): Yüksek seviyeli, ORM ve admin paneli ile tam donanımlı. Güvenlik odaklı. - Ruby on Rails (Ruby): Konvansiyon üzerine kurulu, hızlı geliştirme için ideal. - Laravel (PHP): Eloquent ORM ve Blade templating ile modern web uygulamaları. App Framework’leri Mobil ve yerel uygulamalar için: React Native (cross-platform), Flutter (Dart tabanlı) ve SwiftUI (iOS). - React: Bileşen tabanlı UI için, web ve mobilde kullanılır. Örnek: Bir e-ticaret platformu, Laravel ile backend, React ile frontend geliştirdi, geliştirme süresini %40 azalttı. Popüler Framework Örnekleri: React, Django, Ruby on Rails 2025’te popüler framework’ler: - React: Facebook’un geliştirdiği, bileşen tabanlı JS kütüphanesi. Virtual DOM ile hızlı render. Örnek Kod: import React from 'react'; function HelloWorld() { return <h1>Merhaba Dünya!</h1>; } export default HelloWorld; - Django: Python tabanlı, batteries-included. Admin paneli ve ORM ile tam özellikli. Örnek: from django.http import HttpResponse def home(request): return HttpResponse("Merhaba Django!") - Ruby on Rails: Ruby tabanlı, MVC mimarisi. Hızlı prototipleme için. Örnek: class HomeController < ApplicationController def index render plain: "Merhaba Rails!" end end Örnek: Bir sosyal medya uygulaması, React ile frontend, Django ile backend kullandı, kullanıcı etkileşimini %50 artırdı. Avantajlar ve Dezavantajlar: Framework Kullanmanın Dengesi Avantajlar: - Hızlı Geliştirme: Hazır bileşenler, zamanı %50 kısaltır. - Standartlaşma: En iyi pratikler, kod kalitesini artırır. - Topluluk Desteği: Binlerce paket ve forumlar. - Ölçeklenebilirlik: Modüler yapı, büyüme için ideal. Dezavantajlar: - Öğrenme Eğrisi: Karmaşık framework’ler zaman alır. - Şişkinlik (Bloat): Gereksiz özellikler, performansı etkileyebilir. - Bağımlılık: Güncellemeler uyum sorunları yaratabilir. - Özelleştirme Sınırlamaları: Katı yapılar, esnekliği kısıtlayabilir. Örnek: Bir start-up, Rails ile MVP’sini 2 haftada yayınladı ama ölçeklemede şişkinlik yaşadı. Seçim Kriterleri: Doğru Framework’ü Bulun Framework seçerken kriterler: - Proje Tipi: Web için Django, mobil için Flutter. - Dil Tercihi: Python seviyorsanız Django, JS seviyorsanız React. - Performans İhtiyacı: Yüksek trafik için Laravel. - Topluluk ve Destek: Aktif forumlar ve paketler. - Öğrenme Kolaylığı: Yeni başlayanlar için Rails. - Maliyet: Açık kaynak ücretsiz; enterprise özellikler ücretli. Örnek: Bir fintech, güvenlik odaklı Django’yu seçti, uyum sorunlarını %30 azalttı. Kurulum Rehberleri: Adım Adım React Kurulum 1. Node.js indirin (node.js.org). 2. Proje oluşturun: npx create-react-app my-app cd my-app npm start 1. Tarayıcıda localhost:3000’ü açın. Django Kurulum 1. Python 3.12 kurun. 2. Sanal ortam: python -m venv myenv source myenv/bin/activate 1. Django yükleyin: pip install django 1. Proje başlatın: django-admin startproject mysite cd mysite python manage.py runserver Ruby on Rails Kurulum 1. Ruby yükleyin (rubyinstaller.org). 2. Rails yükleyin: gem install rails 1. Proje oluşturun: rails new myapp cd myapp rails server Örnek: Bir geliştirici, Django ile bir blogu 1 saatte prototipleştirdi. Gerçek Proje Örnekleri: Framework’lerin Uygulamaları - React: Bir sosyal medya platformu, React ile dinamik feed oluşturdu, kullanıcı etkileşimini %40 artırdı. - Django: Bir e-ticaret sitesi, Django’nun ORM’siyle veritabanı yönetimini kolaylaştırdı, sorgu hızını %30 iyileştirdi. - Ruby on Rails: Bir start-up, Rails ile MVP’sini hızlı yayınladı, yatırımcı çekti. Örnek: Bir haber sitesi, React ve Django backend ile entegre çalıştı, trafiği %50 artırdı. Gelecek Trendleri: 2025 ve Ötesi 2025’te, framework’ler AI entegrasyonu ve bulut odaklı olacak. React 19, AI komponentleri ekledi; Django 5, asenkron ORM getirdi. Gelecekte, low-code framework’ler (Bubble) yaygınlaşacak, geliştirme süresini %60 kısaltacak. Edge computing entegrasyonu, Rails gibi framework’leri hızlandıracak. Örnek: Bir fintech, AI tabanlı bir framework ile kişiselleştirilmiş finans uygulaması geliştirdi, kullanıcı memnuniyetini %35 artırdı. Okuyucu Yorumları İçin Alan Bu rehber hakkında düşüncelerinizi paylaşmak ister misiniz? En sevdiğiniz framework hangisi? Deneyimlerinizi aşağıdaki yorum bölümünde bekliyoruz.

Son güncelleme tarihi Sep 10, 2025

CSS Nedir?

Cascading Style Sheets, yani CSS, web sayfalarının görsel tasarımını ve düzenini şekillendiren bir teknolojidir. HTML ile oluşturulan içeriklerin nasıl görüneceğini belirler; renkler, yazı tipleri, yerleşim düzeni ve animasyonlar gibi unsurları kontrol eder. Modern web geliştirmede vazgeçilmez bir rol oynar ve kullanıcı deneyimini doğrudan etkiler. Statik bir HTML sayfasını dinamik, estetik ve kullanıcı dostu bir hale getirir. Örneğin, bir butonun rengini değiştirmek, bir div’in boyutunu ayarlamak veya karmaşık bir düzeni oluşturmak CSS ile mümkündür. CSS’in Temel Yapısı ve Çalışma Mantığı CSS, basit bir sözdizimine sahiptir. Bir CSS kuralı, bir selektör ve bu selektöre uygulanan özelliklerden oluşur. Selektör, hangi HTML elemanının stilize edileceğini belirtir; özellikler ise bu elemanın nasıl görüneceğini tanımlar. Örneğin: h1 { color: blue; font-size: 24px; } Bu kod, tüm <h1> etiketlerinin mavi renkte ve 24 piksel büyüklüğünde olmasını sağlar. CSS’in “cascading” (basamaklı) yapısı, stillerin öncelik sırasına göre uygulanmasını ifade eder. Örneğin, aynı elemana birden fazla stil uygulanırsa, en spesifik olanı veya en son tanımlanan kural geçerli olur. CSS, üç şekilde uygulanabilir: 1. Dahili (Internal): <style> etiketiyle HTML dosyasının <head> kısmına yazılır. 2. Harici (External): Ayrı bir .css dosyasına yazılır ve HTML’e bağlanır. 3. Satır İçi (Inline): HTML etiketine style özelliğiyle doğrudan uygulanır, ancak bu yöntem genelde önerilmez. Harici CSS kullanımı, kodun düzenli ve yeniden kullanılabilir olmasını sağlar. Örneğin, Kaliteweb’in sunduğu hosting hizmetleriyle barındırılan bir web sitesinde, harici CSS dosyaları hızlı yükleme süreleriyle kullanıcı deneyimini iyileştirir. Selektörler: CSS’in Hedefleme Mekanizması Selektörler, CSS’in hangi HTML elemanlarına uygulanacağını belirler. En yaygın selektör türleri şunlardır: - Element Selektörleri: p, div, h1 gibi HTML etiketlerini hedefler. - Sınıf Selektörleri: .sinif-adi ile başlar ve birden fazla elemana uygulanabilir. - ID Selektörleri: #id-adi ile benzersiz bir elemanı hedefler. - Öznitelik Selektörleri: [type="text"] gibi belirli özniteliklere sahip elemanları seçer. - Pseudo-Selektörler: :hover, :active gibi durumlara bağlı stiller uygular. Örnek bir sınıf selektörü: .button { background-color: #4CAF50; padding: 10px 20px; border-radius: 5px; } Bu kod, class="button" olan tüm elemanlara yeşil bir arka plan, dolgu ve yuvarlatılmış köşeler ekler. Pseudo-selektör örneği: .button:hover { background-color: #45a049; } Bu, fare imleci butonun üzerine geldiğinde arka plan rengini değiştirir. Özellikler: Görselliği Şekillendiren Araçlar CSS, yüzlerce özellik sunar. En sık kullanılanlar: - Renk ve Arka Plan: color, background-color, background-image - Yazı Tipi: font-family, font-size, font-weight - Kutu Modeli: margin, padding, border, width, height - Konumlandırma: position, top, left, z-index Örneğin, bir kutu modeli uygulaması: .box { width: 200px; height: 100px; margin: 10px; padding: 15px; border: 2px solid black; } Bu kod, bir div’e boyut, kenar boşluğu, dolgu ve çerçeve ekler. Kutu modeli, CSS’in temel taşlarından biridir ve elemanların yerleşimini anlamak için kritik öneme sahiptir. Responsive Design: Media Queries ile Esneklik Responsive design, web sitelerinin farklı cihazlarda (mobil, tablet, masaüstü) düzgün görünmesini sağlar. CSS’te bu, media queries ile yapılır. Media query, belirli bir ekran boyutu veya cihaz özelliği için stil kuralları tanımlar. Örneğin: @media screen and (max-width: 600px) { .container { flex-direction: column; } } Bu kod, ekran genişliği 600 pikselden küçükse .container sınıfının düzenini sütun tabanlı yapar. Responsive tasarımda dikkat edilmesi gerekenler: - Mobil Öncelikli Yaklaşım: Önce küçük ekranlar için tasarım yap, sonra büyük ekranlara genişlet. - Birim Seçimi: vw, vh, rem, em gibi relatif birimler kullan. - Esnek Görseller: max-width: 100% ile görsellerin taşmasını önle. Örnek bir responsive navigation bar: .nav { display: flex; gap: 20px; } @media screen and (max-width: 768px) { .nav { flex-direction: column; align-items: center; } } Bu, masaüstü için yatay bir menüyü mobil cihazlarda dikey hale getirir. CSS Preprocessors: Sass ve Less Sass ve Less, CSS’in daha güçlü ve düzenli yazılmasını sağlayan ön işlemcilerdir. Değişkenler, iç içe yazım, modüller ve matematiksel işlemler gibi özellikler sunar. Örneğin, Sass’ta değişken kullanımı: $primary-color: #3498db; .button { background-color: $primary-color; &:hover { background-color: darken($primary-color, 10%); } } Bu kod, birincil rengi bir değişkene atar ve hover durumunda rengi koyulaştırır. Less ise benzer bir yapı sunar: @primary-color: #3498db; .button { background-color: @primary-color; &:hover { background-color: darken(@primary-color, 10%); } } Preprocessor’lar, özellikle büyük projelerde kodu düzenli tutar ve bakımını kolaylaştırır. Datatelekom’un veri merkezlerinde barındırılan projelerde, bu tür araçlar geliştirme sürecini hızlandırır. Animasyonlar: Web’e Hareket Katın CSS animasyonları, kullanıcı deneyimini zenginleştirir. transition ve @keyframes ile dinamik efektler oluşturulabilir. Örneğin, bir butonun geçiş efekti: .button { background-color: #4CAF50; transition: background-color 0.3s ease; } .button:hover { background-color: #45a049; } Bu, arka plan renginin 0.3 saniyede yumuşak bir şekilde değişmesini sağlar. Daha karmaşık bir animasyon için @keyframes kullanılır: @keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } .element { animation: slideIn 1s ease-in-out; } Bu kod, bir elemanın soldan kayarak gelmesini sağlar. Animasyonlar, kullanıcıların dikkatini çeker ve sitenin modern görünmesini sağlar. Flexbox ve Grid: Modern Düzen Araçları Flexbox, tek boyutlu düzenler için idealdir (satır veya sütun). Örneğin: .container { display: flex; justify-content: space-between; align-items: center; } Bu, elemanları yatayda eşit aralıklarla hizalar. Grid ise iki boyutlu düzenler için kullanılır: .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } Bu, üç eşit sütunlu bir ızgara oluşturur. Flexbox ve Grid, responsive tasarımda güçlü araçlardır ve karmaşık düzenleri kolaylaştırır. Erişilebilirlik: Herkes İçin Web CSS, erişilebilirlik (accessibility) açısından kritik bir rol oynar. Örneğin: - Kontrast Oranları: Renkler, WCAG standartlarına uygun olmalıdır. color-contrast() gibi yeni özellikler bu konuda yardımcı olur. - Odak Stilleri: Klavye navigasyonu için :focus kullanılmalı. a:focus { outline: 2px solid blue; } - Semantik HTML ile CSS: Doğru HTML etiketleriyle CSS kullanımı, ekran okuyucuların içeriği anlamasını sağlar. Erişilebilirlik, kullanıcıların engel durumlarına bakılmaksızın web sitenize erişebilmesini sağlar. Örneğin, renk körlüğü olan kullanıcılar için yüksek kontrastlı renkler seçmek önemlidir. 2025 CSS Trendleri CSS sürekli evrilir ve 2025’te öne çıkan trendler şunlardır: - Container Queries: Ekran boyutuna değil, kapsayıcı boyutuna göre stil uygulama. .container { container-type: inline-size; } @container (min-width: 400px) { .child { flex-direction: row; } } - Subgrid: Grid düzenlerinde alt ızgaralar için daha fazla kontrol. - CSS Nesting: Doğrudan iç içe CSS yazımı. .card { background-color: white; & .title { font-weight: bold; } } - Color Functions: color-mix() ve color-contrast() gibi yeni renk fonksiyonları. - Scroll-Driven Animations: Kaydırma hareketine bağlı animasyonlar. Bu trendler, web geliştirmeyi daha esnek ve güçlü hale getiriyor. Kaliteweb’in sunduğu hosting hizmetleri, bu yeni teknolojileri destekleyen hızlı ve güvenli altyapılar sunar. Adım Adım CSS ile Proje Geliştirme 1. HTML Yapısını Oluşturun: Semantik etiketler kullanın (<header>, <main>, <footer>). 2. CSS Dosyası Bağlayın: <link rel="stylesheet" href="styles.css"> 3. Temel Stilleri Tanımlayın: * { margin: 0; padding: 0; box-sizing: border-box; } 4. Responsive Tasarımı Planlayın: Media queries ile farklı ekran boyutlarına uyum sağlayın. 5. Erişilebilirliği Sağlayın: Kontrast oranlarını kontrol edin ve odak stilleri ekleyin. 6. Animasyonlar Ekleyin: Kullanıcı deneyimini artırmak için geçiş efektleri veya keyframes kullanın. 7. Test Edin: Farklı cihazlarda ve tarayıcılarda test yapın. Sonuç CSS, web geliştirmenin temel taşlarından biridir. Selektörler, özellikler, responsive tasarım, preprocessor’lar, animasyonlar, Flexbox/Grid ve erişilebilirlik gibi unsurlar, modern web sitelerinin oluşturulmasında kritik rol oynar. 2025 trendleriyle birlikte CSS, daha da güçlü ve esnek bir araç haline gelmiştir. Datatelekom’un veri merkezlerinde barındırılan bir web sitesinde, bu teknikleri kullanarak kullanıcı dostu, hızlı ve estetik bir deneyim sunabilirsiniz.

Son güncelleme tarihi Sep 10, 2025

JavaScript Nedir?

JavaScript, modern web geliştirmenin temel taşlarından biridir ve dinamik, interaktif web uygulamaları oluşturmak için kullanılan güçlü bir programlama dilidir. İlk olarak 1995 yılında Netscape tarafından geliştirilen bu dil, bugün hem istemci tarafında (tarayıcılar) hem de sunucu tarafında (Node.js gibi) yaygın bir şekilde kullanılmaktadır. Bu yazıda, JavaScript'in tarihçesinden başlayarak temel syntax'ına, DOM manipülasyonuna, asenkron programlamaya, popüler framework entegrasyonlarına, güvenlik ipuçlarına ve performans optimizasyon tekniklerine kadar her yönüyle derinlemesine inceleyeceğiz. Ayrıca, uygulamalı örnekler ve bir tutorial ile konuları pekiştireceksiniz. JavaScript'in Tarihçesi JavaScript, Brendan Eich tarafından Netscape Navigator tarayıcısında dinamik içerik oluşturmak amacıyla geliştirildi. İlk adı Mocha olan dil, daha sonra LiveScript ve nihayetinde JavaScript adını aldı. 1996 yılında ECMA International tarafından standartlaştırıldı ve ECMAScript olarak adlandırıldı. Günümüzde ECMAScript, dilin standartlarını belirler ve her yıl yeni özellikler eklenir (örneğin, ES6/ES2015 ile let/const, arrow functions gibi yenilikler). JavaScript, tarayıcıların ötesine geçerek Node.js ile sunucu tarafında da kullanılmaya başlandı ve React, Vue gibi framework'lerle front-end geliştirmede devrim yarattı. JavaScript'in Temel Syntax'ı JavaScript, öğrenmesi kolay ancak güçlü bir syntax'a sahiptir. Değişken tanımlama, fonksiyonlar, döngüler ve koşullu ifadeler gibi temel yapılar, diğer C-tabanlı dillerle benzerlik gösterir. İşte temel bir örnek: // Değişken tanımlama let isim = 'Ahmet'; const PI = 3.14; // Fonksiyon tanımlama function selamVer(kisi) { return `Merhaba, ${kisi}!`; } // Koşullu ifade if (isim === 'Ahmet') { console.log(selamVer(isim)); } else { console.log('Tanıdık bir isim değil!'); } // Döngü for (let i = 0; i < 3; i++) { console.log(`Sayı: ${i}`); } Değişkenler var, let ve const ile tanımlanır. let ve const, ES6 ile tanıtıldı ve kapsam (scope) yönetimini iyileştirdi. const ile tanımlanan değişkenler yeniden atanamaz, ancak içindeki nesnelerin özellikleri değiştirilebilir. Örneğin: const kisi = { ad: 'Ayşe', yas: 25 }; kisi.yas = 26; // Geçerli kisi = {}; // Hata: const değişken yeniden atanamaz DOM Manipülasyonu Document Object Model (DOM), web sayfalarının programatik olarak kontrol edilmesini sağlar. JavaScript, DOM ile HTML elementlerini seçip düzenler. Örneğin, bir butona tıklama olayını dinlemek ve içeriği değiştirmek: // Element seçme document.getElementById('myButton').addEventListener('click', () => { document.getElementById('myDiv').innerHTML = 'Tıklandı!'; }); DOM manipülasyonu, dinamik içerik oluşturmak için güçlü bir araçtır. Örneğin, bir liste oluşturup silme işlevi: function ekleOgeler() { const ul = document.createElement('ul'); ['Elma', 'Armut', 'Muz'].forEach(oge => { const li = document.createElement('li'); li.textContent = oge; ul.appendChild(li); }); document.body.appendChild(ul); } Bu kod, bir liste oluşturur ve sayfaya ekler. DOM manipülasyonunda performans için DocumentFragment kullanımı önerilir, çünkü birden fazla DOM işlemi tek bir toplu işlemde yapılır. Asenkron Programlama: Promises ve Async/Await JavaScript, asenkron işlemleri yönetmek için önce geri çağrılar (callbacks), ardından Promises ve son olarak async/await ile güçlü mekanizmalar geliştirdi. Promises, asenkron işlemlerin sonucunu temsil eder. Örneğin, bir API'den veri çekme: fetch('https://api.example.com/veri') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Hata:', error)); Async/await, Promises'ı daha okunabilir hale getirir: async function veriCek() { try { const response = await fetch('https://api.example.com/veri'); const data = await response.json(); console.log(data); } catch (error) { console.error('Hata:', error); } } veriCek(); Async/await, özellikle birden fazla asenkron işlemi sırayla veya paralel olarak yönetmek için idealdir. Örneğin, paralel veri çekme: async function paralelVeriCek() { const [veri1, veri2] = await Promise.all([ fetch('https://api.example.com/veri1').then(res => res.json()), fetch('https://api.example.com/veri2').then(res => res.json()) ]); console.log(veri1, veri2); } Framework Entegrasyonları: Node.js ve React JavaScript, hem sunucu hem de istemci tarafında kullanılabilen çok yönlü bir dildir. Node.js, JavaScript'i sunucu tarafında çalıştırmak için V8 motorunu kullanır. Örneğin, basit bir HTTP sunucusu: const http = require('http'); const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/plain'); res.end('Merhaba, Dünya!'); }); server.listen(3000, () => { console.log('Sunucu 3000 portunda çalışıyor'); }); Bu kod, Kaliteweb gibi bir hosting sağlayıcısında barındırılan bir sunucuda çalıştırılabilir ve Datatelekom veri merkezinde güvenli bir şekilde hizmet verebilir. Node.js, Express gibi framework'lerle API geliştirme için idealdir. React ise istemci tarafında kullanıcı arayüzleri oluşturmak için popüler bir kütüphanedir. JSX ile bileşen tabanlı geliştirme sağlar. Örneğin, bir sayaç bileşeni: import React, { useState } from 'react'; function Sayac() { const [sayi, setSayi] = useState(0); return ( <div> <p>Sayı: {sayi}</p> <button onClick={() => setSayi(sayi + 1)}>Arttır</button> </div> ); } export default Sayac; React, performans için sanal DOM kullanır ve bileşenlerin yeniden render edilmesini optimize eder. Node.js ve React birlikte, full-stack uygulamalar geliştirmek için güçlü bir kombinasyon oluşturur. JavaScript Güvenlik İpuçları JavaScript'in gücü, güvenlik açıklarını da beraberinde getirir. İşte bazı güvenlik ipuçları: 1. XSS (Cross-Site Scripting) Önleme: Kullanıcı girişlerini sanitize edin. Örneğin, DOMPurify kütüphanesi kullanabilirsiniz. import DOMPurify from 'dompurify'; const kirli = '<script>alert("XSS Saldırısı!")</script>'; const temiz = DOMPurify.sanitize(kirli); document.getElementById('hedef').innerHTML = temiz; 2. CSRF Koruması: Sunucu tarafında CSRF token'ları kullanın. 3. Güvenli API İstekleri: HTTPS kullanın ve API anahtarlarını gizli tutun. 4. Korsan Yazılımlara Karşı Koruma: Güvenilir CDN'ler kullanın ve bağımlılıkları düzenli olarak kontrol edin. Performans Optimizasyonu JavaScript performansını artırmak için şu teknikleri kullanabilirsiniz: 1. Debouncing ve Throttling: Hızlı tekrarlanan olayları sınırlamak için: function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } window.addEventListener('resize', debounce(() => console.log('Yeniden boyutlandırıldı'), 200)); 2. Lazy Loading: Görselleri ve modülleri yalnızca gerektiğinde yükleyin. const modül = await import('./modül.js'); // Dinamik import 3. Memoization: Tekrarlanan hesaplamaları önbelleğe alın: function memoize(fn) { const cache = {}; return function (...args) { const key = JSON.stringify(args); if (cache[key]) return cache[key]; const result = fn(...args); cache[key] = result; return result; }; } const agirHesaplama = memoize((x) => x * x); console.log(agirHesaplama(5)); // Hesaplar console.log(agirHesaplama(5)); // Önbellekten alır 4. Web Workers: Yoğun işlemleri ana iş parçacığından ayırın: // worker.js const worker = new Worker('worker.js'); worker.postMessage(1000); worker.onmessage = (e) => console.log('Sonuç:', e.data); Uygulamalı Tutorial: Basit Bir To-Do Uygulaması Bu tutorial, yukarıdaki konuları birleştirerek bir to-do uygulaması oluşturmanızı sağlayacak. HTML, CSS ve JavaScript kullanarak başlayalım: <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <title>To-Do Uygulaması</title> <style> .todo-item { margin: 10px 0; } .completed { text-decoration: line-through; } </style> </head> <body> <h1>To-Do Listesi</h1> <input type="text" id="gorevInput" placeholder="Yeni görev ekle"> <button onclick="gorevEkle()">Ekle</button> <ul id="gorevListesi"></ul> <script> async function gorevEkle() { const input = document.getElementById('gorevInput'); const gorev = input.value.trim(); if (!gorev) return; const li = document.createElement('li'); li.className = 'todo-item'; li.innerHTML = `${gorev} <button onclick="this.parentElement.remove()">Sil</button> <button onclick="this.parentElement.classList.toggle('completed')">Tamamla</button>`; document.getElementById('gorevListesi').appendChild(li); input.value = ''; // Örnek: API'ye veri gönderme try { await fetch('https://api.example.com/gorevler', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ gorev }) }); } catch (error) { console.error('API hatası:', error); } } </script> </body> </html> Bu uygulama, DOM manipülasyonu, olay dinleme ve asenkron veri gönderimi içerir. Kaliteweb hosting hizmetlerinde bu tür uygulamaları kolayca barındırabilir ve Datatelekom veri merkezinde güvenli bir şekilde çalıştırabilirsiniz. İleri Seviye Konular 1. Module Sistemi: ES Modules ile kodunuzu modüler hale getirin: // util.js export const topla = (a, b) => a + b; // main.js import { topla } from './util.js'; console.log(topla(2, 3)); // 5 2. Proxy ve Reflect: Nesne işlemlerini özelleştirin: const kisi = new Proxy({ ad: 'Ali' }, { get(target, prop) { return prop in target ? target[prop] : 'Bilinmiyor'; } }); console.log(kisi.ad); // Ali console.log(kisi.yas); // Bilinmiyor 3. WebAssembly Entegrasyonu: Performans kritik işlemler için WebAssembly kullanın: WebAssembly.instantiateStreaming(fetch('modul.wasm')).then(({ instance }) => { console.log(instance.exports.topla(5, 3)); // WebAssembly fonksiyonu }); Sonuç JavaScript, web geliştirmenin vazgeçilmez bir parçasıdır. Temel syntax'tan asenkron programlamaya, framework entegrasyonlarından güvenlik ve performansa kadar geniş bir yelpazede beceriler sunar. Bu rehber, hem yeni başlayanlar hem de ileri seviye geliştiriciler için kapsamlı bir kaynak olmayı amaçlamaktadır. Uygulamalı örnekler ve tutorial ile öğrendiklerinizi pekiştirebilir, kendi projelerinizi geliştirebilirsiniz.

Son güncelleme tarihi Sep 10, 2025