MonthAralık 2018

Javascript ile Scroll İşlemleri

Bu yazımda Javascript ile Scroll İşlemleri konusunda basit bir giriş yapacağım Scroll ile yapabileceğimiz basit bir uygulama yapacağım. Bu yapacağım uygulama aşağı doğru kaydırdıkça sayfaya yeni içerik eklemekten bahsedeceğim.

Öncelikle oluşturduğum basit bir tasarımı göstermem gerekli.

Oluşturduğumuz tasarım.

Şimdi Javascript kodlarını sizlerle paylaşayım daha sonra bu kodların ne işe yaradığından bahsedeyim.

function sonsuzsayfa()
{
var main = document.getElementById(‘main’);
var cHeight = main.offsetHeight;
var yOffSet = window.pageYOffset;
var y = yOffSet + window.innerHeight;
if(y >= cHeight){
main.innerHTML += (‘<div id=”eklenen”>Aydın Can Altun</div>’);
}
}
window.onscroll = sonsuzsayfa;

Şimdi bu kodların ne işe yaradıklarından bahsedeyim

window.onscroll = sonsuzsayfa;

sayfa yukarıya ve ya aşağıya oynatılırken sonsuzsayfa adındaki fonksiyonu çalıştırmamızı sağlar.

Şimdi ise sonsuzsayfa fonksiyonumuzun ne yaptığına bakalım.

var main = document.getElementById(“main”);

Bu kod ile main adında oluşturduğumuz değişkenin içine sayfamızın içinde id’si main olan etiketin verilerini tutmamızı sağlar.

var cHeight = main.offsetHeight;

Bu kod ise cHeight adını verdiğimiz değişkenin içine main değişkeninde seçilen etiketin dikey olarak hangi uzunluğunda olduğumuzu tutar.

var yOffSet = window.pageYOffset;

Bu kod bize sayfanın dikey olarak ne kadar aşağı ve ya yukarı oynatıldığını pixel cinsinden verir.

var y = yOffSet + window.innerHeight

İşte burası aslında önemli olan kısım burada y değişkenine yukarı ve aşağıya ne kadar oynatıldığını ve kullandığınız tarayıcının kapladığı alan hesaplanmadan gördüğünüz sayfanın uzunluğunun boyutlarını toplar

if(y >= cHeight){
main.innerHTML += (‘<div id=”eklenen”>Aydın Can Altun</div>’);
}
}

Burada ise bir kontrol yapıyoruz eğer y değişkenimizde belirtilen değer bizim seçtiğimiz elementin uzunluk olarak sonuna geldiğinde bu elementin sonuna yeni bir html kodu eklemesini sağlar böylece aşağı indikçe yeni verilerin eklenmesini sağlarız.

Bu işlem peki ne işimize yarar diye soracak olursanız Facebook’da görmüş olduğunuz sayfayı aşağı indikçe sürekli olarak gönderilen eski paylaşımları görmeye başlarız işte bu tarz bir işlem kendi internet sitenizde yapmak istiyorsanız bu sistemi kullanmanız işinize her türlü yarayacaktır.

Sonuç olarak elde ettiğimiz görüntü şöyle olacaktır.

Yaptığımız Uygulamanın Görüntüsü

Bu Javascript uygulamasında Javascript ile Scroll İşlemlerini basit bir örnek ile bahsettik. Yaptığımız uygulama üzerinde değişiklik yaparak daha farklı şeyler yapmaya başlayabilirsiniz. Javascript ile yaptığım diğer uygulamaları görmek için tıklayınız.

PHP’de POST ve GET Methodunda Güvenlik Önlemi

Bir önceki PHP dersimde PHP’de GET Methodundan bahsetmiştim. Bu derste ise PHP’de POST ve GET Methodunda Güvenlik Önlemi alma konusundan bahsedeceğim. Yani kısacası PHP’de Güvenlik konusundan bahseceğim.

PHP’de POST ve GET Methodu kullanılarak basit bir şekilde güvenlik önlemi almak basittir. Bu konuda iki adet fonksiyon kullanarak bu işi çözeceğiz. Bu güvenlik önlemini almayı basit bir şekilde anlatmak için

<?php

$_METHOD = array_map(function($input){

return htmlspecialchars(trim($_METHOD));

},$_METHOD);

?>

şeklinde olacaktır. Şimdi bu fonksiyonları kısaca anlatmak gerekirse

htmlspecialchars()

htmlspecialchars() fonksiyonu inputlardan gönderilen herhangi bir verinin içinde html, javascript, css gibi kodları kullanılması durumunda bu kodları daha güvenli hale getirip çalışmasını engelleyecektir.

Bu fonksiyonun işleyişini basit bir şekilde anlatmak gerekirse bir form oluşturalım.

<form action=”guvenlik.php” method=”POST”>

Kullanıcı adı: <input type=”text” name=”kadi” >

<br>

Şifre : <input type=”password” name=”sifre” >

<br>

Göndericeğiniz Mesaj <br>

<textarea name=”mesaj”></textarea>

<input type=”submit” value=”Gönder”>

</form>

Oluşturduğumuz form

Şimdide guvenlik.php dosyasını oluşturalım ve içine şu kodları yazalım.

<?php

print_r($_POST);

?>


Göndereceğimiz FORM

Gönder tuşuna bastıktan sonra ekrana çıkacak görüntü şöyledir.

Gönderilen FORMun karşılığı

Böyle gözükmesi belki bir problem değil ama bu açığın sisteminizde bulunması kötü amacı olan kişiler için çok işlerini yarıyacak bir açıktır bu yüzden bu açığı kapatmanız önemlidir.

Şimdi htmlspecialchars() fonksiyonunu kullansak nasıl bir sonuç alırdık onu görelim. guvenlik.php’nin üstüne şu kodları ekleyelim

$_POST = array_map(function($post){
return htmlspecialchars($post);
},$_POST);

Bu kodları yazdıktan sonraki sonuç şöyle olacaktır.

htmlspecialchars() kullanınca karşımıza çıkacak sonuç

Gördüğünüz gibi htmlspecialchars() fonksiyonu HTML, CSS, Javascript kodlarının çalışmasını engeller.

trim()

trim() fonksiyonunun işlevi basittir inputunuzda gönderdiğiniz verinin başına ve sonuna boşluk koyarsanız onları siler ve ya 2. bir parametre olarak girdiğiniz karakter gönderdiğiniz verinin başında ve sonunda var ise onu kaldırır. trim() fonksiyonunun iki kullanım şeklindende bahsetmek gerekirse

<?php

trim($str);

trim($str,”-“);

?>

İlk kullanım fonksiyonun içine girdiğiniz metinin başındaki ve sonundaki boşlukları siler. İkinci kullanımında ise gönderdiğiniz verinin başında ve ya solunda işareti var ise onları siler.

Bahsettiğim iki fonksiyonu iç içe kullandığınız zaman ise XSS açığı gibi önemli bir açığı kesin bir şekilde kapatmış oluyorsunuz. Ayrıca trim() fonksiyonu ile de kötü niyetli kişilerin veritabanını şişirmesini engeller. Yani bu fonksiyonları kullanarak PHP’de Güvenlik konusunda büyük bir adım atmış olucaksınız.

Şimdi GET ve POST methodu ile gönderilen verilerin nasıl bahsettiğim güvenlik önlemini alabileceğimizden bahsetmek gerekirse.

<?php

// GET Methodundan Zararlı Kodlar Gönderilmemesi için
$_GET = array_map(function($get){
return htmlspecialchars(trim($get));
},$_GET);


// POST Methodundan Zararlı Kodlar Gönderilmemesi için
$_POST = array_map(function($post){
return htmlspecialchars(trim($post));
},$_POST);

?>

şeklinde kullanmamız yeterli olacaktır bu kodları sitenizde her yerde çağırılan bir dosyada kullanmak yeterli olacaktır.

Bu dersimizde PHP’de Güvenlik konusunda bir giriş yapmış olduk ve POST ve GET metodları ile gönderilen verileri güvenli bir hale getirmekten öğrenmiş olduk.

Yazılımcılığa Başlamadan Önce Bilmeniz Gereken 5 Şey

Bu yazımda sizlere keşke yazılımcılığa başlamadan önce bilseydim dediğim 5 durumdan bahsedeceğim.

1-) Kodlama Öğrenmenin Bir Sırrı Yok

Üniversitede ve lisede arkadaşlarımdan çok fazla aldığım sorulardan biri Nasıl kod yazmayı öğrendin ? oluyordu kod yazmayı öğrenmenin sanki gizli bir sırmış ve sadece nadir insanların bunu yapmayı öğrendiklerini zannediyorlardı aslında böyle bir şey yok sadece yapmanız gereken şey kullandığınız arama motoruna “PHP Dersleri”, “Swift Dersleri”, “C++ Dersleri” gibi kelimeleri aratarak bile karşınıza Türkçe ve ya İngilizce bir sürü kaynak çıkacaktır. Buna inanmıyor musunuz ?

ve bunlar sadece Google üzerinden yapılan araştırmalardan çıkan sonuçlar Teknoloji Yüzyılındayız ve bir şeyleri öğrenmek istiyorsak internet bu iş için biçilmiş en önemli kaftan arama motorları haricinde Youtube üzerinden, Udemy gibi online eğitim platformlarından da öğrenmek istediğiniz programlama dili hakkında ücretli ve ücretsiz bir sürü kaynak bulabilirsiniz. Kendi internet sitemde yayınladığım PHP Derslerini görmek için tıklayınız.

2-) Bir Yazılım Diline Önem Verin

İlk programlama dili öğrenmeye başladıktan sonra bir dilden diğer dile sürekli olarak atlıyordum ve hepsi hakkında temel bilgilere sahiptim fakat hiç bir zaman büyük çaplı işleri yapabilecek durumda değildim. Burada size tavsiyem tek bir yazılım dili üzerinde yoğunlaşın ona hakim olduktan sonra çok rahat bir şekilde diğer dilleri öğrenmeye başlayacaksınız. Kendimden ilk olarak php’yi öğrendim daha sonra c#, c++, java ama hepsinde temel bilgilerim vardı daha sonra farkettim ki böyle yapmak beni hiç bir zaman istediğim noktaya getirmeyecekti bu yüzden tek bir yazılım dili üzerinde yoğunlaşmaya başladım buda benim için PHP oldu yaklaşık 8 senemi sadece PHP üzerinde çalışarak harcadım ve artık yeni bir dil öğrenmeye kalkıştığımda temel bilgilerden sonraki kısımları anlama kısmı benim için daha kolay oluyor yeni bir kütüphane ile karşılaştığım zaman PHP’deki bir fonksiyona ve ya bir kütüphaneye benzetip orada yaptıklarıma benzer işler yaparak sonuça ulaşabiliyorum.

Burada önemli olan şey ne kadar çok yazılım dili bildiğimizden çok ileride hangi alanda çalışmak istediğiniz ben ilerideki bir Web Developer olarak görmek istiyordum bu yüzden hayatımın büyük bir kısmını sadece PHP’ye ayırdım. Bir Web Developer olacaksanız HTML,CSS,Javascript ve bunun yanında PHP, ASP.NET ve ya NodeJS bilmeniz sizi gerçek bir web developer yapacaktır diyebiliriz.

Web Development konusunda artık kendinizi yeterli seviyede görüyorsanız başka bir alana ilginiz oluşmaya başladıysa artık hazırsınız iOS Developer olucam diyorsanız Swift kullanmayı artık daha kolay bir şekilde öğrenebilirsiniz ve ya ben Java öğrenicem diyorsanız artık daha rahat Javayı öğrenebilirsiniz ama öğrenmeye başladığınız diğer dildede hine aynı şekilde tamamen kavradıktan sonra başka bir dile geçmeniz sizin için daha iyi olacaktır.

3-) Araştırın

Genel olarak şöyle bir düşünce vardır. Programcılar yazdıkları konuda her şeyi bilir asla internetten bir şey araştırmazlar bu tamamen yanlış bir düşünce. Büyük firmalarda çalışan yazılımcılardan Stackoverflow, Google, Youtube gibi ortamlardan bazı konularda araştırma yapar. İnsanlar genelde internetten bir şeyler araştırma konusunda çekinirler ama aslında bu saçmadır çünkü programlama dilleri bir çok amaçla kullanılabilir ve bu amaçlar için kullanılan bir den fazla kütüphane olabilir oturup tüm kütüphaneleri, tüm fonksiyonları ezberlemeye çalışırsanız işin içinden çıkamazsınız ve yaptığınız işten soğumaya da başlarsınız.

Kısacası söylemek istediğim, bir sorunlamı karşılaşıyorsunuz bu yazım hatası olabilir, kodunuz düşündüğünüz şekilde çalışmıyor olabilir ve ya yazdığınız kodda bir bug vardır ve bunu nasıl çözeceğinizi bulamıyorsunuzdur araştırın insanlara sorun öğreticileri dinleyin. Bir yazılımcı olmak iyi bir araştırmacı olmayıda gerektirir.

4-) Yazılımcılık Bir Sorunu Çözmektedir

Yazılımcılar bir sorunu çözmek için kod yazarlar sadece kod yazmak için yazmazlar. Yani kodlayacağınız her şey bir soruna çözüm olmalıdır. Programlama dillerini alet kutunuzdaki bir alet gibi düşünün hepsinin belirli bir amaçı var ve yazdığınız kodlarda bu amaça hizmet etmelidir aksi takdirde hem yazdığınız kod size zevk vermeyecek hem de yaptığınız iş size ekstra bir şey katmayacaktır.

Kısacası, yazılımcı olmak bir sorunu çözmek için oluşturulmalı.

5-)Bir Şeyler Yapmak için Çabala

Genel olarak hepimizin yaptığı şeylerden biri bir soruna çözüm üreteceğizdir fakat yaptığımız tek şey sadece internette bulunan içerikleri okumak ve buna başlangıç olarak herhangi bir şey yapmamaktır. Bunu yapmak size hiçbir şey katmayacağı gibi sizi yapmak istediğiniz şeyde de bir yere getirmeyecektir. Burada değinmek istediğim nokta araştırmayın değil araştırın ama araştırırken bir şeylerde yapmaya başlayın.

Mesela yeni bir sosyal medya mı oluşturacaksınız. Sadece bu işi yapıcağınız yazılım dili hakkında bir şeyler okumayın. Gidin giriş ve kayıt ol kısımları nasıl yapılacaktır bunları öğrenin yapın. Paylaşılan içerikleri insanların görmesini mi istiyorsunuz gidin bunları SQL ile nasıl yapabileceğinizi öğrenin RDMS’ler nedir bunları öğrenin. Sadece teorik bilgi edinmeyi bırakıp gerçekten bir şeyler yapmaya başlayın çünkü bunu yapmaya başladığınız zaman asıl kodlamayı öğrenmeye başlamış olacaksınız. Bu site üzerinde yayınlanmış olduğum Javascript araçlarını incelemek için tıklayınız.

Bu yazımda Yazılımcılığa Başlamadan Önce Bilmeniz Gereken 5 Şey den bahsettim. Tüm yazımı kısaca özetleyecek olursam. Bir yazılımcılığa başlarken önce hangi sektör üzerine yoğunlaşacağınıza karar verin ve oraya odaklanın. Odaklandığınız sektörde yaşadığınız sorunları internetten araştırmaktan çekinmeyin. Yapıcağınız şey bir soruna çözüm olsun ve bir fikir varsa aklınızda teorik bilgiler okumayı bırakın ve bir şeyler yapmaya hemen başlayın.

Javascript ile Anlık Filtreleme Yapma

Javascript ile haşır neşir olmaya başladığım bu zamanlarda sizlere internet sitelerinizin İletişim kısımlarında gönderilen mesajlara nasıl filtreleme işlemi yapabileceğinizden bahseceğim.

Öncelikle sadece bir textarea oluşturalım.

<textarea id=”ta” name=”ta”></textare>

daha sonra oluşturduğumuz textarea ya onkeyup ve onkeydown özelliklerini ekleyip filtre() ye eşitleyelim ve javascript ile filtre fonksiyonumuzu yazalım. Sonuç olarak oluşan yazdığımız kodlar

<textarea id=”ta” name=”ta” onkeydown=”filtre(‘ta’) onkeyup=”filte(‘ta’)”></textare>

şeklinde olacaktır. Şimdi Javascript ile Filtre fonksiyonumuzu yazmaya başlayalım.

function filtre(id){

var tf = document.getElementById(id);

var regex = /a/gi;

tf.value = tf.value.replace(regex, “”);

}

şeklinde olmalıdır şimdi bu javascript kodlarını açıklamak gerekirse.

Fonksiyonumuz id adında bir parametre alıyor bu parametre filtreleme yapacağımız alanın idsi olmalıdır.

var tf = document.getElementById(id);

bu kod bizim filtreleme işlemi yapacağımız alanı seçmemizi sağlıyor.

var regex = /a/gi;

bu kısım Javascript Regular Expressions ile alakalı bir desen oluşturuyoruz benim yazdığım kısım da oluşturulan textarea nın içine a harfi yazıldığı anda otomatik olarak silinecektir. Regular Expressions hakkında daha detaylı bilgi alabilmek için tıklayınız.

tf.value = tf.value.replace(regex, “”);

bu kod ise filtrelenmesi istenen bölümün değerini filtrelenmiş haline eşitliyor.

Burada önemli olan iki şey var Regular Expressions ve replace fonksiyonu Regular Expressions ileriki yazılıma konu olacak fakat replace fonksiyonunu anlatmak gerekirse.

replace fonksiyonu 2 parametresi olan bir fonksiyondur. 1. parametre neyin değişeceğini 2. parametre ise neye dönüşeceğidir. Yani biz yukarıdaki kodumuzda regex değişkenindeki desene uyan bir şey varsa bunu silmesini söylemiş olduk eğer “” kısmına herhangi bir şey yazarsanız ona dönüşecektir yani “” yerine “1” yazarsanız ekrana a yazmaya çalıştığınız her seferde 1 yazmasını sağlayacaktır.

Bu yazımda basit bir şekilde Javascript ile basit bir mesaj filtresi nasıl yapılır ondan bahsettim yazımı beğendiyseniz ve Javascript ile alakalı diğer yazılarımı okumak istiyorsanız tıklayabilirsiniz.