Page 3 of 30

CSS Position Özellikleri

Merhaba arkadaşlar bu yazımda sizlere CSS’deki Position özelliklerinden bahsedeceğim. Position özellikleri bize elementin sayfadaki pozisyonunu belirlememizi sağlamaktadır. Bir elemente Position özelliğini verdikten sonra elemente top, bottom, left ve right gibi özellikler ile sayfadaki final pozisyonunun nasıl olacağını belirtebiliriz.

Position özelliğine 5 farklı değer verebilmekteyiz bunlar,

  • static
  • relative
  • absolute
  • fixed
  • sticky

Şimdi bu özelliklerin ne işe yaradıklarını anlatmak gerekirse

static

Static değeri verilmiş bir element sayfanın olması gerektiği gibi olmasını sağlar. Top, Bottom, Left, Right ve ya z-index özelliklerinin hiç biri bu değer de işlevi yoktur. Bu ön tanımlanmış bir değerdir.

relative

Relative değeri verilmiş element bulunduğu yere göre top, left, bottom, right özellikleri ilerleyecektir. Bunu kelimelerle anlatmak biraz kafanızı karıştırmış olabilir bu yüzden ben size hazırlamış olduğum fotoğraf ile anlatmak istiyorum.

Burada öncelikle ortadaki kutuya position: relative özelliğini verdik ve daha sonra top: 20px left: 20px özelliklerini verdik.

.box-2{
   position: relative;
   top:20px;
   left:20px;
}

absolute

Absolute değeri verilmiş element relative benzer bir özelliği vardır aradaki tek fark artık direkt olarak web sayfasının sol üst tarafı orijin olarak kabul edilir. Yani bir elemente absolute özelliği verirseniz top, left, bottom, right özelliği verdiğimiz de sayfanın sol üst kısmından bu işlemleri verecektir.

.box-2{
   position: absolute;
   top:  20px;
   left: 20px;
}

fixed

Fixed değeri verilmiş element, bu element sayfa yukarı veya aşağı çekilse bile element sayfanın belirlenen kısmında sabit olarak bulunacaktır. Bu elementin bulunacağı yeri top, left, bottom, right özellikleri ile belirleyebiliriz.

Örnek olarak eğer elementin sayfanın sağ alt kısmında bulunmasını istiyorsak şu css kodlarını yazmamız yeterli olacaktır.

.box{
   position: fixed;
   bottom: 0;
   right:  0;
}

kodunu yazdıktan sonra sayfanın sağ altında bulunacak elemente box adlı class değerini verirsek o element sayfanın sağ alt kısmında bulunacaktır.

sticky

Sticky değeri verilmiş bir element, relative ve fixed özellikleri arasında döner. Sayfada bulunduğu yere göre dururken eğer sayfanızı aşağı ve ya yukarı doğru kaydırırken bu elementten kurtulmaya çalıştığınız da fixed özelliği verilmiş bir element gibi davranmaya başlar ve element asıl olduğu yere geldiğinde tekrar relative bir elementmiş gibi davranmaya devam eder.

Buna örnek vermek gerekirse

Gördüğünüz gibi element kendi yerindeyken relative gibi davranırken sayfayı aşağı doğru kaydırmaya başladığımda fixed değeri verilmiş bir element gibi davranmaya başlıyor sayfayı tekrar yukarı kaydırdığımızda ve elementin asıl olması gereken yere geldiğinde tekrar relative olmaya devam ediyor.

Özet,

Bu yazımda sizlere CSS Position özelliklerinden bahsettim. Position özellikleri static, relative, absolute, fixed, sticky olmak üzere 5 farklı değer alabilmektedir. Herhangi bir elemente Position özelliği verilirse bu elemente top, bottom, left ve right gibi özellikler verirken atanan position değerine göre sayfada nasıl bir pozisyonda bulunacağını belirleriz.

Eğer bu yazımı beğendiyseniz ve CSS hakkında yazmış olduğum diğer yazıları merak ediyorsanız buraya tıklayabilirsiniz.

Ayrıca CSS Position Özellikleri hakkında daha detaylı bilgi almak isterseniz buraya tıklayınız.

SwiftUI: İlk Bakış

Merhaba arkadaşlar bu yazımda sizlere SwiftUI üzerinde yapmış olduğum ilk izlenimlerden bahsedeceğim. Bildiğiniz üzere SwiftUI, Apple tarafından WWDC19 konferansında duyuruldu.

En başta tekrardan bir yeni bir dil mi öğrenicem diye düşünürken SwiftUI üzerinde araştırmalar yapmaya başladım ve Apple’ın sitesinde gördüğüm kod parçacığı aslında çok komplike olan işleri az kod yazarak halledebileceğimizi göstermiş oldu.

Apple SwiftUI sayfasından alınmıştır.

SwiftUI Nedir ?

Better apps, Less Code

SwiftUI, tüm Apple cihazları için az kodla çok iş yapmamızı araçlar ve APIler ile gelişmiş kullanıcı arayüzleri oluşturmamızı sağlayan bir Framework olduğunu söyleyebiliriz.

SwiftUI Üzerinde İlk Denemelerin

SwiftUI sadece iOS 13’ü destekliyor ve iOS 13 üzerinde geliştirmek için XCode 11 Beta sürümünü kurmamız gerekiyor fakat XCode 11 Beta sürümünü kurmak için de macOS Catalina Beta sürümünü kurmamız gerekiyor.

İlk örnek kodlara baktığımda herhangi bir fikrim yoktu fakat SwiftUI üzerinde çalışmalara başlayınca aslında öğrenmenin kolay olduğunu ve yazdığımız kodların temiz ve basit olduğunu farkettim.

SwiftUI Kullanmaya Başladıktan Sonra Farkettiğim Yenilikler

Kendi yaptığım denemelerde UIKit ile SwiftUI arasında oluşan bariz farkları ve özellikleri listelemek gerekirse şu şekilde olur,

AutoLayout Artık Yok

Bildiğiniz üzere UIKit kullanırken tasarımlarımızdan AutoLayout yani sürükle bırak özelliği vardı fakat SwiftUI ile birlikte storyboardlarımızı tamamen kodlayarak hazırlıyoruz.

Karanlık Mod

Açık tema haricinde artık uygulamalarınız geceleri gözlerinizi yormayacak karanlık temaları olabiliyor. Artık geliştiriciler uygulamalarına karanlık tema ekleyebiliyorlar.

Canlı Önizleme

XCode 11’de SwiftUI kullanırken yazdığımız kodların canlı önizlemesini herhangi bir build işlemi yapmadan görebiliyoruz. Bu durum işlemcilerimizi biraz zorlasada bize zamandan kar ettiriyor fakat şu anda işlemcilerimizi zorlama durumu beta süreci içinde geçerli olacak bir durum olabilir.

SwiftUI ve UIKit’i Birlikte Kullanabilirsiniz

Üzülmenize gerek yok SwiftUI’in alması gereken çok yol var. Bu yüzden de UIKit’e tamamen elveda demiyoruz. Ayrıca Xcode 11 ile SwiftUI ile UIKit’i birlikte kullanabiliyoruz

Özet,

Bence SwiftUI’in herkes tarafından kullanılmaya başlaması için en azından bir 2-3 yıl var çünkü şu anda göründüğü kadarıyla sadece iOS 13 için ve macOS Catalina ile kullanılabiliniyor fakat bizim gibi geliştiricilerin bu SwiftUI’ı hızlıca öğrenmeye başlaması gerekiyor.

Şunu da unutmamak gerekiyor ki SwiftUI konusunda öğrenebileceğimiz bir çok şey bulunmaktadır. Bence bu yeni teknolojiyi projelerimizde kullanmamıza daha zaman var fakat erkenden öğrenmeye başlamak ise bize avantaj sağlayacaktır. SwiftUI hakkında daha fazla bilgi edinmek için buraya tıklayabilirsiniz.

Eğer bu yazımı beğendiyseniz ve Apple teknolojileri hakkında yazmış olduğum diğer yazıları merak ediyorsanız buraya tıklayınız.

DataTables Nedir, Nasıl Kurulur, Neler Yapabiliriz ?

Merhaba arkadaşlar bugün sizlere DataTables isimli bir jQuery eklentisinden bahsedeceğim.

DataTables’in ne olduğunu açıklamak gerekirse oluşturduğumuz tablolar üzerinde AJAX kullanmadan veri arama, sayfalama gibi işlemleri yapmamızı sağlıyor daha basit bir şekilde anlatmak gerekirse normalde AJAX, DOM ve SQL ile yapabileceğimiz işleri bunların hiç biri hakkında bilgi ve ya uğraş gerektirmeden bize sunan bir eklenti olduğunu söyleyebiliriz.

DataTables ile Neler Yapabiliriz ?

DataTables ile yapabileceğiniz en temel şeylerden bahsetmek gerekirse

  • Sayfalama
  • Anlık Arama
  • Sütunlar üzerinden sıralama (Tekil ve ya çoğul)
  • Mobil Cihazlara Uyumlu
  • Kolayca Tema Yapılabilinir (Bootstrap 3/4, Semantic UI, Foundation ve DataTables Theme Creator)

bunun haricinde kendisi içinde eklentilerin geliştirilmesine izin veren bir sisteme sahip olması ve açık kaynak kodlu olması da eklentiyi kendimize göre özelleştirebileceğimizi göstermektedir.

Bu saydıklarım haricinde yapabileceğiniz diğer özellikleri de görmek isterseniz buraya tıklayabilirsiniz.

DataTables Nasıl Kurulur/Kullanılır ?

DataTables’i kurmak için 2 adet CSS ve JS dosyalarını sistemimize ekleyip daha sonra basit bir JS kodu ile DataTables’i kullanmaya başlayabiliriz.

CSS / JS CDN

https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css

CSS

https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js

Javascript

Javascript Kodu

$(document).ready( function () {
    $('#myTable').DataTable();
} );

Javascript kodu olarak bahsetmiş olsam bile en başta da söylediğim gibi DataTables bir jQuery eklentisi olduğu için jQuery ile kodlamamız gerekiyor yani bu da DataTables’dan önce jQuery’i de sistemimize eklememiz gerekiyor.

Peki DataTables’den bahsettim hine de bu işleri ben kendim AJAX, DOM ve SQL bilgimle rahatça yaparım diyebilirsiniz fakat dünyadaki Adobe, Sony, Nasa, Tesla, Amazon gibi firmalar dahi DataTables’ı kullanmaya tercih ediyor.

DataTables hakkında daha detaylı bilgi alabilmek için buraya tıklayabilirsiniz.

Özet,

Bu yazımda sizlere DataTables’in ne olduğundan, neler yapabilirsiniz ve nasıl kurabiliriz konularından bahsettim. DataTables ile Tablolar üzerinde herhangi bir ekstra işlem yapmadan tablolar üzerinde arama, sayfalama gibi işlemleri hızlıca yapabiliriz.

Bu yazımı beğendiyseniz ve Javascript hakkında yazmış olduğum diğer yazıları merak ediyorsunuz buraya tıklayınız.

AJAX Nedir ? jQuery ile Ajax Kullanımı

Merhaba arkadaşlar bu yazımda sizlere AJAX’ın ne olduğundan ve jQuery ile kullanımından bahsedeceğim.

AJAX Nedir ?

Ajax, Asynchronous JavaScript And XML (Eşzamansız Javascript ve XML) bir tekniktir. AJAX’ın temel amacı kullanıcıya web sayfasını tamamen yeniden yükletmeden bazı işlemlerin tamamlanmasını sağlamaktır.

AJAX’ın Çalışma Prensibinden bahsetmek gerekirse şu fotoğrafı kullanmamız yeterli olacaktır.

Şimdi bunu açıklamamız gerekirse öncelikle Tarayıcımızda bir işlem gerçekleşir ve bir XMLHttpRequest objesi oluşturulur ve gönderilir. Gönderilen HTTPRequest işleme alınır ve bir geri dönüt oluşur bu geri dönüt de tarayıcıya tekrar geri gönderilir. Böylece arka plan da bir sürü işlem olurken kullanıcı direkt olarak sonuç ile karşımıza çıkar.

AJAX’ın ne işe yaradığını kısaca özetlemek gerekirse

  • Sayfa yüklendikten sonra Web Sunucusundan veri okur.
  • Sayfayı tekrar açmadan sayfa içerisinde değişiklik yapar
  • Verileri Web Sunucusuna arka planda gönderir.

jQuery ile Ajax Kullanımı

AJAX tekniğini saf Javascript ile sizlere aktarmak daha karmaşık olacağından jQuery ile kullanımından bahsetmek istiyorum.

Elimizde bir İletişim Formu olduğunu varsayalım ve ben gönder butonuna bastığım zaman AJAX tekniği ile sonucun karşıma çıkmasını istiyorum.

O zaman öncelikle yapmamız gereken 2 şey var öncelikle FORM elementimize bir id değeri ve onsubmit=”return false;” ve Gönder input/button umuza da hine bir id değeri atayalım. Bu işlemleri yaptıktan sonra jQuery ile bu işlemi 3 yöntem ile yapabiliriz bunlar $.post, $.get, $.ajax yöntemleri şimdi bunlardan bahsetmeye başlayalım.

Form elementine ve Gönder butonuna gerekli işlemleri yaptıktan sonra şöyle bir kalıpta kodlarımızı yazacağız.

$("#iletisim_gonder").on("click",function(e){

        let formData = $("#iletisim_form").serialize();

        // VERİ GÖNDERME işlemi burada yapılacak

        e.preventDefault();
    });

Burada yazılı olan kodlar şu işlemi yapmakta id’si iletisim_gonder olan elemente tıklandıktan sonra id’si iletisim_form’un içindeki tüm inputlar “name: value” tipinde JSON formatına(serialize) dönüştürülüyor ve preventDefault ile ise de butonun tıklandıktan sonra bu içeride yapılan işlemler haricinde bir işlem yapmasını engellemiş oluyoruz.

$.post

        $.post('iletisim_gonder.php', formData, function(response){
            if(response.hata){
                alert(response.hata);
            }else{
                alert("Ekleme başarılı!");
            }
        }, 'json');

$.post fonksiyonu gördüğünüz üzere 3 parametre alıyor bunlardan ilk çekilen verilerin hangi sayfaya gönderileceği ikinci parametresi gönderilecek veriler ve son parametre ise bir Callback fonksiyonudur.

$.get

$.post('iletisim_gonder.php', formData, function(response){
            if(response.hata){
                alert(response.hata);
            }else{
                alert("Ekleme başarılı!");
            }
        }, 'json');

$.post fonksiyonundan tek farkı $.post yerine $.get yazmamız.

$.ajax

$.ajax yöntemi aslında $.post ve $.get yöntemlerinin biraz daha kalıplara oturtulmuş halidir en sade haliyle kullanımını göstermek gerekirse şöyle bir kod parçacığı karşımıza çıkar

 $.ajax({
        type: METOD,
        url: URL,
        data: Form Data,
        dataType: DATA TYPE,
        success: function(response){
            
        }
    });

$.post ve $.get ‘de 3 parametre alan bir fonksiyon şeklinde çalışıyordu. $.ajax fonksiyonu ise 1 adet JSON veri türünde değer gönderdiğimiz bir fonksiyon olduğunu farketmişsinizdir.

  • type alanında hangi metod ile veri gönderimi yapacağınızı yazıyorsunuz yani POST ve ya GET yazmanız gerekicek.
  • url kısmına hangi dosyaya gönderim yapacağınızı
  • data kısmına hangi dataları göndericeğinizi
  • dataType bize dönücek sayfayı nasıl okumamız gerektiğini
  • success kısmında ise eğer gönderim başarılı olursa ne olacağını belirtmemiz gerekiyor.

$.ajax kullanımında daha detaylı bilgi almak için buraya tıklayınız.

Ajax ile Nerelerde Kullanılır

  • İl, İlçe seçimi
  • Arama sonuçlarını anlık gösterme
  • Herhangi bir FORM gönderirken sayfa yenilenmesini engelleme
  • Otomatik Yazı Tamamlama

gibi alanlarda ve daha fazlasında rahat bir şekilde kullanabilirsiniz.

Özet,

Bu yazımda sizlere AJAX Tekniğinin ne olduğundan bahsettim ve AJAX tekniğini jQuery ile nasıl kullanabileceğinizi gösterdim. AJAX, sayfa yenileme işleminin önüne geçen ve web sunucusuna arka plandan veri gönderme ve ya arka plandan veri alıp sayfa yenilemeye duymadan kullanıcıya bu aldığımız verileri gösterebileceğimiz bir tekniktir.

Eğer bu yazımı beğendiyseniz ve Javascript adına yazmış olduğum diğer yazıları merak ediyorsanız buraya tıklayabilirsiniz. Ayrıca jQuery’nin ne olduğunu bilmiyorsanız “jQuery Nedir ?” adlı yazımıda incelemenizi tavsiye ederim.