Browse Category

WEB

WEB ile ilgili yararlı olabileceğini düşündüğüm şeyleri burada paylaşmayı planlıyorum.

WordPress’e SSL Yükledikten Sonra Resimlerin Görüntülenememesi Sorunu

Herkese merhaba… Bugün sizlere yakın zamanda başıma gelen ve neyse ki çok basit bir çözümü olan bir sorundan bahsetmek istiyorum. İnternette güvenliğin her geçen gün daha da önemli hale gelmesiyle birlikte SSL kullanımının giderek daha fazla teşvik edildiğini görüyoruz. Maalesef SSL bedava bir hizmet değil. Bırakın bedavayı çoğu zaman ucuz bir hizmet bile değil. Bu nedenle çoğunlukla yasalar ve mevzuatların zorunlu kıldığı durumlarda ve büyük bütçeye sahip sitelerde kullanılmakta… Gerçi Open SSL gibi ücretsiz bir alternatif olsa da o da çok fazla bug içerdiği ve sürekli yeni açıklarının keşfedilmesi yüzünden çok fazla itibar görmüyor. İşte bu durumdan kurtulmamız için yakın zamanda Let’s Encrypt adında bir alternatifimiz oldu.

Eğer kendi sunucunuzu işletiyor ve ayarlarına erişebiliyorsanız ücretsiz olarak sitelerinizi SSL ile güvenlik altına alabiliyorsunuz. Benim gibi dışardan bir hosting hizmeti alıyorsanız o zaman da hosting firmasının size bu hizmeti sunmasını bekliyorsunuz. Sonunda benim hosting firmam da bu desteği sunmaya başladı ve ben de sitemda SSL kullanmaya başladım. Ancak ayarları yaaptıktan sonra farkettim ki sitemdeki resimler gözükmüyor. İlk başta gözüm korksa da aslında sorunun çözümü çok basit. Tek yapmanız gereken yönetim panelindan Ayarlar > Genel yolunu takip ederek WordPress Adresi (URL) ve Site Adresi (URL) alanlarının karşısındaki adreslerin başındaki http:// yazan bölümü https:// şeklinde değiştirmek.

Görüldüğü gibi çözüm oldukça basit. Umarım işinize yarar.

Hoşçakalın

WEB Tasarım Önerileri 1. Ders

Merhaba arkadaşlar. Bundan böyle, edindiğim deneyim ve bilgi birikimlerimle web sayfası tasarımı ile ilgili naçizane önerilerimi sizinle paylaşacağım WEB Tasarım Önerileri isimli bir video serisi hazırlamaya karar verdim. Fırsat buldukça YouTube kanalıma ekleyeceğim WEB Tasarım Önerileri serisinin ilk bölümleri biraz teorik olacak ve takip edilmesi  sıkıcı olabilecektir; ancak sabrederseniz, daha sonraki bölümlerdeki konuların anlaşılmasına temel oluşturacağı için faydalı olabileceği kanaatindeyim. İlk dersi aşağıdaki video veya YouTube Hayaletin Yeri kanalımdan takip edebilirsiniz. Umarım faydalı olur. Hoşçakalın.

WEB Tasarım Önerileri 1. Ders

jQuery ile Bir sınıftaki Öğelerden İstediğimizi Seçebilmek

Merhaba arkadaşlar bu yazımda sizlere kısaca jQuery kullanarak bir css sınıfındaki öğelerden yalnızca birini nasıl seçebileceğimizi anlatmaya çalışacağım. Bildiğiniz gibi eğer kullanmak istediğimiz öğeye özgü bir stil oluşturmak ya da yalnızca o öğeyle ilgili işlemler yapmak istiyorsa id kullanmak daha mantıklı bir yoldur, ancak bazı durumlarda sınıf olarak belirtilmiş bir öğe üzerinde de işlem yapmamız gerekebilir. Bunu nasıl yapabileceğimizi aşağıdaki kodla anlatmaya başlıyorum.

Öncelikle boş bir HTML sayfası oluşturup en başına da aşağıdaki css kodlarını yazalım

<style type="text/css">
body,td,th {
	color: #000000;
}
body {
	background-color: #FFFFFF;
}

.sag {
	background-color:#E8E8E8;
}

.sol_baslik {
	background-color:#DFE0A9;
}

.sol_baslik:hover {
	background-color:#F491DE;
}

</style>

CSS kodumuzda önemli olan iki sınıfımız var. Birinci sag adını verdiğim sınıf ve bunlarla divlerimi oluşturacağım sınıf; ikincisi de sol_baslik sınıfı ki üzerinde işlem yapacağım sınıf. Ayrıca fark ettiğiniz gibi sol_baslik için bir de üzerine fare ile gelince farklı efekt vermek için hover kullandım ancak bu örneğimizin daha pekişmesi için yoksa jQuery de bu hover seçicisine ihtiyacım olmayacak.

Şimdi de bu kodların altına aşağıdaki html kodumuzu ekleyelim

<div class="sag"><span class="sol_baslik">1.Div</span></div>
<br><br>
<div class="sag"><span class="sol_baslik">2.Div</span></div>
<br><br>
<div class="sag"><span class="sol_baslik">3.Div</span></div>

Kodumuzu bu haliyle çalıştırdığımızda ekranda üç adet gri div ve onların içinde de sarımsı bir arkaplan rengine sahip yazılar göreceksiniz. Fare ile bu yazıların üzerine geldiğinizde o yazının arkaplan renginin pempeye döndüğünü göreceksiniz.

Peki biz o yazıların değil de başka bir şeyin mesela örneğimizde olduğu gibi divlerin üzerine geldiğimizde o divin içindeki yazının arkaplan renginin değişmesini isteseydik ne olacaktı? Basit anlatımla sag isimli sınıftaki divin üzerine fare ile gelince sol_baslik sınıfındaki yazının rengini değiştir dememiz gerekiyor ancak böyle bir durumda sol_baslik sınıfındaki bütün öğeler değişecek çünkü sınıfa ait bir özelliğin değişmesi sınıftaki bütün öğeleri değiştirecektir. Bunun için de jQuery kullanarak aşağıdaki kodda olduğu gibi this parametresi ve onun içindekileri seçmemizi sağlayan childeren parametresini kullanıyoruz.

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

 <script type="text/javascript">
	$(document).ready(function(){
	
		  $('.sag').hover(
         function () {
		   $(this).children(".sol_baslik").css({"background-color":"#900"});
         }, 
         function () {
           $(this).children(".sol_baslik").css({"background-color":"#3292b8"});
         });	 
	});
</script>

Yukarıdaki jQuery kodunda önce jQuery kütüphanesini çağırıyoruz ardından da sayfamız yüklendikten sonra çalışmasını istediğimiz fonksiyonumuzu yazıyoruz. sag isimli sınıftaki bir öğenin üzerine fare ile gelindiğinde this ile o öğeyi seçiyoruz ve childeren ile de öğenin kapsadığı sol_baslik sınıfının (dikkat edin yalnızca üzerine gelinen sag isimli sınıfa sahip öğenin içinde bulunan sol_baslik sınıfını değiştiriyoruz) arkaplan rengini farklı bir renk yapıyoruz. jQuery kütüphanesinin temel yazım tekniğine göre oluşturduğumuz kodda yazdığımız ikinci fonksiyon da fare, ilgili öğenin üzerinden ayrılınca o öğenin farklı bir arkaplan rengini almasını sağlıyor.

En son tüm kodumuz aşağıdaki gibi olacak. Kodu kendiniz deneyerek ne demek istediğimi daha rahat anlayabilirsiniz.

<style type="text/css">
body,td,th {
	color: #000000;
}
body {
	background-color: #FFFFFF;
}

.sag {
	background-color:#E8E8E8;
}

.sol_baslik {
	background-color:#DFE0A9;
}

.sol_baslik:hover {
	background-color:#F491DE;
}

</style>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

 <script type="text/javascript">
	$(document).ready(function(){
	
		  $('.sag').hover(
         function () {
		   $(this).children(".sol_baslik").css({"background-color":"#900"});
         }, 
         function () {
           $(this).children(".sol_baslik").css({"background-color":"#3292b8"});
         }); 
	});
	
</script>
<div class="sag"><span class="sol_baslik">1.Div</span></div>
<br><br>
<div class="sag"><span class="sol_baslik">2.Div</span></div>
<br><br>
<div class="sag"><span class="sol_baslik">3.Div</span></div>

Burada biz bir divin üzerine geldiğimizde içindeki başka bir sınıfa ait öğenin değişerek aynı sınıftaki diğer öğelerin sabit kalmasını sağladık. Siz isterseniz daha farklı senaryolar deneyebilirsiniz. Örneğin bir düğmeye basıldığında yukarıdaki bir başlığı değiştirmek gibi yani değiştirilecek öğenin mutlaka bir üst elemanın üzerine gelince değişmesi gibi bir şart yok. Değişik bir örnek olarak deneme ismini verdiğimiz bir idye sahip bir divin içeriğiyle ilgili işlem yapabilmek için kodumuzu aşağıdaki gibi değiştirmemiz gerekecekti.

  $(this).children(".sol_baslik").css({"background-color":"#900"});
         },

Konunun daha iyi anlaşılabilmesi için aşağıdaki video anlatımımdan da yararlanabilirsiniz. Şimdilik hoşçakalın.

JQuery ile PHP Kullanarak Sayfayı Yenilemeden POST Metodunu Kullanmak

Merhaba arkadaşlar. Bu yazımda jQuery kullanarak bir formun sayfayı yenilemeye gerek kalmadan aynı sayfa içerisinde nasıl POST metodu kullanılarak gönderilebileceğini anlatmaya çalışacağım. Hem bu konunun daha iyi anlaşılabilmesi hem de daha önce bahsettiğim bazı noktaları tekrar anlatmayacağım için daha önceden yazılmış şu ve de şu yazılarıma göz atmanızda fayda var.

Fazla uzatmadan konumuza geri dönelim. İlk önce kendimize bir php sayfası oluşturalım mesela ornek.php olsun. Şimdi de sayfamıza jQuery’i çağıralım

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

jQuery kütüphanemizi çağırdıktan sonra sıra geldi post metoduyla göndereceğimiz formumuzu oluşturmaya. Örnek olarak ben aşağıdaki gibi basit bir form oluşturdum.

<input type="text" name="kullanici" id="kullanici_id" />
<input type="text" name="sifre" id="sifre_id" />
<input type="button" name="gonder" id="gonder" value="Gönder" />

Burada bahsetmek istediğim iki temel nokta var. Birincisi dikkat ettiyseniz formumuzu oluştururken <FORM>....</FORM> etiketlerini kullanmadım çünkü formumuzu jQuery ile göndereceğimiz için buna ihtiyacımız yoktu. İkincisi ise form elemanlarımıza bir id verdim. Aslında sadece name parametrelerini de kullanabilirdik ancak size tavsiyem jQuery ile işlem yaparken id ile hareket etmeniz sizin için daha yararlı olacaktır.

Form alanının üzerine (siz isterseniz altınada ekleyebilirsiniz) formu gönderdiğimizde kodumuzun çalıştığını anlamamızı sağlayacak bir div oluşturuyorum

<div id='sonuc'>Gönderilen değerlere göre bu div'in içeriği değişecek</div>

Evet şimdilik div’imizin içinde bir bilgi mesajı var. Eğer kodumuz doğru çalışırsa form gönderildiğinde  div’in içindeki yazı gönderilen form değerlerini gösterecek şekilde değişecek.

Şimdi formu aynı sayfada gönderip sonucu görüntülememizi sağlayacak jQuery kodunu yazalım. Önce sayfa yüklendiğinde jQuery ile işlem yapacağımızı belirten kod blok temel çerçevemizi oluşturalım.

<script type="text/javascript">
	$(document).ready(function(){


});

</script>

Şimdi de yavaş yavaş jQuery kodumuzun içini doldurmaya başlayalım.

Formumuzun post edilmesi işleminin ne zaman olacağını yani kodumuzun ne zaman işleyeceğini belirtmek için kodumuza gonder id’sini verdiğimiz butona tıklandığında çalışmasını istediğimizi belirtiyoruz ve bunun için aşağıdaki kodu yazıyoruz.

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

});

Böylece formdaki butona tıklandığında bir fonksiyonun çalışmasını istediğimizi belirttik. Formda iki alanımız var. Bunlar kullanıcı ve şifre alanları. Yine bunlara verdiğimiz id sayesinde içlerindeki değeri jQuery kodumuza aktarmak için iki adet değişkene ihtiyacımız var şimdi de onları oluşturalım.

var kullanici_degeri = $('#kullanici_id').val();
var sifre_degeri = $('#sifre_id').val();

Gördüğünüz gibi kullanici_id kimlikli input değerini kullanici_degeri isimli değişkene ve yine aynı şekilde sifre_id kimlikli input değerini de sifre_degeri ismini verdiğimiz değişkenlere aktardık

Değişkenlere aktardığımız değeri gönderecek kodu yazalım şimdi

$.post("ornek2.php",{kullanici_gonder:kullanici_degeri,sifre_gonder:sifre_degeri},function(gonderVeri){

  });

Yukarıdaki kodu kısaca açıklayalım. Öncelikle post metodunu kullanarak ornek2.php sayfasına form verilerini gönderdiğimizi belirtiyoruz. Tabi biz şimdi böyle bir sayfa oluşturmadık ancak açıklamalar bittikten sonra hemen onu da oluşturacağız. Formumuzu ornek2.php sayfasına gönderirken kullanici_degeri ve sifre_degeri isimli değişkenlerimiz jQuery tarafaından yorumlanabilen java script değişkenleriydi ve bizim bunları php tarafından anlaşılabilecek değişkenlere dönüştürmemiz gerekiyordu ve bizde bunu yaparak söz konusu değişkenleri kullanici_gonder ve sifre_gonder isimli değişkenlere aktararak gonderVeri fonksiyonuyla ornek2.php sayfasına gönderdik.

Şimdi de ornek2.php sayfasına gönderdiğimiz form bilgilerini yukarıda sonuc id sini verdiğimiz div’e yazdıracak kodu eklemeye sıra geldi.

$('#sonuc').html(gonderVeri);

 Böylece gonderVeri fonksiyonunun oluşturduğu çıktı div’imizin içinde görüntülenebilecek.

Bütün bunlar size karışık gelebilir ancak aslında çok basittir. Aşağıda şimdiye kadar parça parça oluşturduğumuz ornek.php sayfasının tam halini incelemek şimdiye kadar yaptıklarımızı anlamanızda size yardımcı olacaktır.

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

<div id='sonuc'>Gönderilen değerlere göre bu div'in içeriği değişecek</div>


<input type="text" name="kullanici" id="kullanici_id" />
<input type="text" name="sifre" id="sifre_id" />
<input type="button" name="gonder" id="gonder" value="Gönder" />


<script type="text/javascript">
	$(document).ready(function(){

		$("#gonder").click(function(){
		var kullanici_degeri = $('#kullanici_id').val();
		var sifre_degeri = $('#sifre_id').val();
		$.post("ornek2.php",{kullanici_gonder:kullanici_degeri,sifre_gonder:sifre_degeri},function(gonderVeri){
                               $('#sonuc').html(gonderVeri);

                 });
			});
});

</script>

 Umarım kodun tamamı yaptıklarımızı anlamanızda yardımcı olmuştur.

Şimdide formu gönderdiğimiz ornek2.php dosyasının kodlarını yazalım.

<?php

$gelen_kullanici = $_POST['kullanici_gonder'];
$gelen_sifre = $_POST['sifre_gonder'];

echo "Aynı sayfa içinde jQuery ile post edilen değerler 
<br>
Kullanıcı: $gelen_kullanici
<br>
Şifre: $gelen_sifre
";

?>

 Kodlar çok basit olduğu için açıklamaya gerek görmüyorum. Anladığınız gibi gelen değişkenleri yazdırıyorum sadece. Tabi siz burada istediğiniz gibi hareket edebilirsiniz. Örneğin gelen verileri eposta yoluyla iletmek ya da veritabanına yazmak gibi. Sonucun başarılı olup olmadığına ait bir mesajı yazdırabilirsiniz..

jqpost0

Umarım size faydası olacak bir yazı olmuştur. Başka bir yazıda görüşmek üzere hoşçakalın.

WEB Sayfası Tasarımlarınızda Uyumlu Renkleri Kullanmak

Başlıkta her ne kadar web sayfası desem de aslında her türlü tasarımsal çalışmalarda uyumlu renkler kullanmak çok önemlidir. İşin profesyonelleri için artık bir refleks haline gelen bu yetenek yeni başlayanlar için başta biraz zor gelebilir ancak dert etmeye gerek yok. Bu alanda imdadımıza http://colorschemedesigner.com web sayfası yetişiyor.

Sayfa açılınca karşınıza çıkan renk paletinden, çalışmalarınızda kullanmak istediğiniz ana rengi seçiyorsunuz. Daha sonra sayfa size bu renkle uyumlu ve yine sizin belirlediğiniz tercihlere göre renkler öneriyor. İki, üç ya da dört renk kullanmak istediğinizde hangi renkleri tercih etmenizin uygun olacağını ve yine bu renklerin tonlarını gösteriyor Bunların yanında sayfa size taslak olarak açık ve koyu tonlarda bir örnek sayfada gösteriyor.

Çalışmalarınızda size yardımcı olacağını düşündüğüm bu sayfaya mutlak doğru gözüyle bakmasak da fikir almak için göz atmanızda fayda var.

http://colorschemedesigner.com/

JQuery ile PHP Kullanarak Sayfayı Yenilemeden GET Metodunu Kullanmak

Merhaba arkadaşlar. Bu yazıda sizlere JQuery kullanarak aynı sayfa içinde bir başka deyişle sayfayı yenilemeden PHP ile GET metodunun kullanımını anlatmaya çalışacağım.

Daha önceki yazımda sizlere sayfayı yenilemeden aynı sayfada bir DIV elementinin içeriğini dinamik olarak değiştirmeyi anlatmıştım. Eğer okumadıysanız öncelikle onu okumanızı tavsiye edeceğim ki yazının bundan sonrasını da o yazıdaki kodların bir kısmını temel alarak yazmaya çalışacağım.

Hatırlayacağınız gibi o yazımda da öncelikli olarak JQuery’i çağırmış ve sonra da içeriği değişecek bir div oluşturmuştum. Şimdi yine benzer işlemleri yapıyorum. Boş bir php sayfası açıp aşağıdaki kodları ekliyorum

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

<div id='icerik'>Tıklanan bağlantıya göre bu divin içeriği değişecek</div>

JQuery’i çağırdık ve icerik id’sine sahip tıkladığımız linke göre GET metoduyla içeriğini dolduracağım bir div oluşturduk.

Şimdi tıklandığında GET metodunu kullanmamızı sağlayacak linkimizi oluşturalım.

<a class='get_ornek' id='1.Değer' href='#'>1. Değer</a>
<br>
<a class='get_ornek' id='2.Değer' href='#'>2. Değer</a>
<br>
<a class='get_ornek' id='3.Değer' href='#'>3. Değer</a>
<br>

Gördüğünüz gibi aynı sınıfa ait 3 link ekledik. Her bir linke de farklı 3 id ekledik ki bu id’ler get metodunu kullanarak başka bir sayfaya göndereceğimiz değerleri barındırıyorlar.

Daha önceki yazımda da bahsettiğim gibi bu tür işlerin birden farklı ve bu anlattığımdan daha profesyonel yöntemleri olabilir ancak bence başlangıç için en iyi anlaşılacak olan yöntem bu.

Şimdi de linklerimize tıklandığında istediğimiz eylemi gerçekleştirecek script kodumuzu yazalım.

<script type="text/javascript">
	$(document).ready(function(){

		$(".get_ornek").click(function(){
		var goster = $(this).attr('id');
		$.get( "ornek2.php", { getir:goster },function(getVeri){
                               $('#icerik').html(getVeri);

              });
	});
});

</script>

Kodumuzu yukarıdaki gibi yazdıktan sonra şimdi de açıklayalım.

İlk önce yazdığımız script’in ne zaman çalışacağını belirtiyoruz. Anlayacağınız gibi get_ornek sınıfından bir elemana (bizim durumumuzda bunlar linkler oluyor ama siz isterseniz düğme, div ya da aklınıza gelen başka şeyleri kullanabilirsiniz.) tıklandığında script harekete geçecek

Ardından goster adında bir değişken tanımlıyor ve bu değişkenimize değer olarak tıklanan linkin sahip olduğu id’yi atıyoruz.

Bunlardan sonra get metodunu kullanarak ornek2.php sayfasına getir parametresiyle goster değişkenini göndereceğimizi ve bunu yaparken de getVeri fonksiyonunu çalıştıracağımızı belirtiyoruz.

Buradaki script dilinde yazılan $.get( "ornek2.php", { getir:goster } kafanızı karıştırdıysa bu kodun php ile  nasıl yazıldığını gösternek sanırım konuyu daha hızlı kavramanızı sağlayacaktır. <a href='ornek2.php?getir=$goster'>...</a> İşte biz java script ile bu kodun yaptı işlevi yaptık. Eğer java script yerine bunun gibi yaparsak sayfayı yenilememiz hatta ornek2.php’ye gitmemiz gerekecekti ve biz de içinde bulunduğumuz sayfadan ayrılmak zorunda kalacaktık.

En sonunda da getVeri fonksiyonuyla ne yapacağımızı yazdık. Burada da icerik id’sine sahip div’imizin içine  getVeri fonksiyonundan gelen html’i yani ornek2.php’yi çağıracağımızı belirttik.

Sonuçta sayfamız aşağıdaki gibi oldu

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

<div id='icerik'>Tıklanan bağlantıya göre bu divin içeriği değişecek</div>

<a class='get_ornek' id='1.Değer' href='#'>1. Değer</a>
<br>
<a class='get_ornek' id='2.Değer' href='#'>2. Değer</a>
<br>
<a class='get_ornek' id='3.Değer' href='#'>3. Değer</a>
<br>

<script type="text/javascript">
	$(document).ready(function(){

		$(".get_ornek").click(function(){
		var goster = $(this).attr('id');
		$.get( "ornek2.php", { getir:goster },function(getVeri){
                               $('#icerik').html(getVeri);

              });
	});
});

</script>

Yukardaki kodları ornek1.php olarak kaydedelim. Şimdi de linklere tıklandığında get metodunu kullanacağımız ve kodumuzu test edebileceğimiz ornek2.php sayfasını oluşturalım.

<?php
$gelen_veri = $_GET['getir'];

echo "Linke tıklandı ve GET ile gönderilen değer : $gelen_veri";

?>

Yukarıdaki ornek2.php kodumuzda önce gelen_deger isminde bir değişken oluşturduk ve değişkenimize get metoduyla gelen getir değişkenini atadık. Sonrada ornek1.php sayfasındaki div’in içinde gösterilmek üzere işlemimizi doğru yaptığımızı görmemizi sağlayacak yazımızı yazdık

Şimdi iki sayfamızı da aynı dizin altına kopyalayarak ornek1.php yi açarak test edelim. Gördüğümüz gibi linklerimiz çalışıyor ve tıkladığımız linke göre div’in içinde ilgili linkin id’si yazıyor. ve sayfamız da yenilenmiyor ya da değişmiyor.

Eğer birden fazla değişkenle get metodu kullanmak isteseydik nasıl olacaktı? Bunun çeşitli yolları var. Bunlardan biri de gönderilen tek id’ye bütün değerleri, arada bir özel karakter kullanarak atayarak göndermek. Örneğin sayfaya hem 6 hem de mavi değerlerini göndermek istersek id = 6;mavi şeklinde gönderir ve bunu da php’nin explode özelliği ile noktalı virgüllerden ayırabiliriz. Ya da hiç uğraşmadan değerleri id yerine linke çeşitli data parametreleri vererek de yapabiliriz. Bunların da script kodunda birden fazla değişken olması demek olduğunu da belirtelim. Her yöntemin kendine göre avantajları ya da dezavantajları var. Hangisi kolayınıza geliyorsa onu seçebilirsiniz.

Bir sonraki yazımda da POST metodunun aynı sayfada, sayfa yenilennmeden nasıl kullanılacağından bahsedeceğim. Şimdilik hoşçakalın

jQuery ile Tıklanan Linki Sayfayı Yenilemeden Açmak

Merhaba arkadaşlar. Bugünkü yazımda sizlere JQuery ile tıklanan bir bağlantıyı aynı sayfa içindeki bir div içerisinde sayfayı yenilemeden açmayı anlatmaya çalışacağım. Böylece siz de artık bir çok web sayfasında kullanılan bu yöntemi kullanabileceksiniz.

İlk olarak sayfamızda JQuery kullanmak için sayfamızın başında JQuery’i çağırmamız gerekiyor. Bunun için iki yol izleyebilirsiniz. Birincisi ki ben de bunu tavsiye ederim JQuery’i indirmek ve ona referans vermek; ikincisi ise direk JQuery sayfasına referans vererek kullanmak ki burada hızlı olması açısından ben bunu tercih edeceğim.

Şimdi sayfamıza JQuery’i çağırıyoruz

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

Daha sonra tıklanan bağlantıya göre içeriği güncellenecek bir div oluşturuyoruz.

<div id='icerik'>Tıklanan bağlantıya göre bu divin içeriği değişecek</div>

Şimdi de div’imizin içeriğini değiştirmek için kullanacağımız bir bağlantı oluşturalım

<a href='#' class='icerik_degistir'>Div içeriğini değiştir</a>

Farkettiğiniz gibi oluşturduğumuz linkin href kısmına bir değer yerine # yazdık. Böylece linkimize tıklandığında bir sayfa açmamasını, az sonra oluşturacağımız java script koduyla istediğimizi yapmasını sağlayacağız. Tabi href kısmı da kullanılabilir ancak ben burada en basit anlaşılabileceğini düşündüğümü yazdım.

Diğer taraftan linkimize bir class ve div’imize de bir id atadığımızı görüyorsunuz. Bunların nedenini de açıklayalım hemen. Div’e bir id atayarak yazacağımız script ile o div’i seçebiliyoruz. Bu nedenle unutmayalım aynı sayfada aynı isimde sadece bir id olabilir; yoksa kodlarımız çalışmayacak ve hata verecektir. Eğer sayfamızda birden fazla id kullanacaksak her birine farklı isim vermeliyiz. Class’larda ise durum daha farklı. Aynı sayfa içinde istediğimiz kadar aynı isimde class kullanabiliriz. Böylece aynı isimleri taşıyan class’lara istediğimizi, hepsi için tek tek kod yazmamıza gerek kalmadan uygulayabiliriz. Linkimize de bu yüzden class verdik zaten. Aynı class adına sahip bütün linklerle oluşturduğumuz div içinde farklı sayfalar açabileceğiz ancak bunun için de her linke farklı bir id daha atayacağız ki script kodumuz gelen id’ye göre ayrı ayrı davranabilsin. Fakat bunu bir sonraki yazımda anlatacağım.

Daha fazla uzatmadan ilgili script kodumuzu da yazalım. Öncelikle kodumuzun ne zaman çalışmaya başlamasını yani ne zaman aktif olmasını istiyoruz? tabiki sayfamız açıldığında. O zaman document ready bloğunu kullanacağız Genelde sayfa yükleme süresini geciktirmemesi için java script kodları sayfanın altına yazılır. Ben de öyle yapacağım ama dikkat etmemiz gereken bir nokta var. Bir sayfada sadece bie kez document ready bloğu olur. Zaten ikincisine de gerek yok. Bu blok içine kullanmak istediğimiz herşeyi yazabiliyoruz zaten.

Bloğumuzu aşağıdaki gibi yazalım

<script type="text/javascript">
	$(document).ready(function(){

	});
</script>

 Şimdi sıra geldi bu blok içine yazacağımız koda ki böylece tıklanan linkimiz div’in içeriğini değiştirebilsin. Oluşturduğumuz icerik_degistir isimli class’a sahip linkimize tıklanınca bir fonksiyon çalıştırmak istiyoruz. Dolayısıyla document ready bloğumuzun içine aşağıdaki kodu yazıyoruz

$(".icerik_degistir").click(function(){

});

 Şimdi de bu fonksiyonumuzun içine, linkimize tıklandığında ne olmasını istediğimizi yazalım

 $('#icerik').load("ornek2.php");

 Burada gördüğünüz gibi icerik id’sine sahip div’imizin içine ornek2.php sayfamızı yükledik. Burada dikkat etmemiz gereken bir nokta var. Çağıracağımız sayfa kendi sitemize ait bir sayfa.. Dışardan bir sayfa çağırmak istersek kodumuz daha farklı olacaktı onu da başka bir yazımda anlatmaya çalışırım.

Bütün bunların sonunda script kodumuzun tamamı aşağıdaki gibi olacak

<script type="text/javascript">
	$(document).ready(function(){
			$(".icerik_degistir").click(function(){
               $('#icerik').load("ornek2.php");
			});
	});
</script>

 Dikkat ettiyseniz icerik_degistir’in önünde bir nokta var. Bu icerik_degistir’in bir sınıf olduğunu gösterir. Aynı şekilde icerik’in önündeki diyez (#) işareti de onun bir id’yi temsil ettiğini gösterir.

Siz de önce kodu yazdığımız sayfadaki div içinde açılacak başka bir sayfa oluşturun ve adını kodu aynen uygulayacaksanız ornek2.php olarak verin.

Sonuçta yazdığımız kodun tamamı aşağıdaki gibi olacaktır.

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

<div id='icerik'>Tıklanan bağlantıya göre bu divin içeriği değişecek</div>

<a href='#' class='icerik_degistir'>Div içeriğini değiştir</a>

<script type="text/javascript">
	$(document).ready(function(){
			$(".icerik_degistir").click(function(){
               $('#icerik').load("ornek2.php");
			});
	});
</script>

 Yukarıdaki kodu bir html ya da php sayfası olarak kaydederseniz çalıştığını göreceksiniz. Tabi çalışması için basit bir ornek2.php sayfası oluşturup aynı dizine koymanız ve bir php server üzerinde çalışmanız kaydıyla… İsterseniz ornek2.php yerine ornek2.html kullanarak php den bağımsız çalışabilirsiniz.

Bir sonraki yazımda sayfayı yenilemeden aynı sayfa içinde form gönderme yani POST ve GET‘in nasıl yapıldığını anlatmaya çalışacağım

PHP ile Resimlere Fligram Ekleme

Evet arkadaşlar PHP sadece bir kaç if else ve while gibi komutlardan oluşan cılız bir dil değildir. Yapabildikleri bundan çok daha fazladır aslında. Bu dersimizde size sınırlı bilgimle PHP ile resim işleme yöntemlerinden biri olan resimlere nasıl fligram eklenebileceğini göstermeye çalışacağım.

Bu işlemlere başlayabilmek için herşeyden önce sunucunuzda PHP’nin gd kütüphanesinin kurulu ve aktif olması gerekmektedir. Esasında bir çok host varsayılan olarak bu kütüphaneyi sunar. Sisteminizdeki kurulumun gd kütüphanesinin etkinliğini denetlemek için boş bir sayfaya phpinfo(); yazarak sayfayı kaydedin ve sonra tarayıcınızdan sayfayı çağırın. PHP’nin tüm bilgileri ekranda listelenecektir. Burada gd alanını bulun. Benim sistemimdeki görüntü şöyle

phpinfo

Eğer kendi özelliklerinizde gd yok ya da disable olarak görülüyorsa kütüphaneyi yükleyin ve/veya etkinleştirin.

Şimdi gelelim asıl dersimize önce resimlerimize bir bakalım. Şimdi aşağıda üzerine fligram ekleyeceğimiz resimi görüyoruz.

orjinal

Bu resime ekleyeceğimiz fligram da aşağıdaki olsun.

fligram

Şimdi de kodumuzu yazmaya başlayalım. İlk önce orjinal resmimizi ve üzerine eklenecek fligramı ve bunların konumlarını belirtiyoruz.

$fligram = imagecreatefrompng('images/fligram.png');
$resim = imagecreatefromjpeg('images/orjinal.jpg')

Ardından fligramın resim üzerinde duracağı konum için kenar boşluklarını ve konumlandırmak için yine fligramın genişlik ve yükseklik değerlerini alıyoruz.

$marge_right = 10;
$marge_bottom = 10;
$konum_x = imagesx($fligram);
$konum_y = imagesy($fligram);

Şimdi de aşağıdaki gibi fligramın resmin sağ alt köşesinde istediğimiz konumda olmasını sağlayalım.

imagecopy($resim, $fligram, imagesx($resim) - $konum_x - 10, imagesy($resim) - $konum_y - $marge_bottom, 0, 0, imagesx($fligram), imagesy($fligram));

Son olarak da çıktımızı oluşturuyoruz.

header('Content-type: image/png');
imagepng($resim);
imagedestroy($resim);

Bu kodların tamamını php imleri içine aldığımızda aşağıdaki gibi bir sonuç elde ediyoruz.

<?php
$fligram = imagecreatefrompng('images/fligram.png');
$resim = imagecreatefromjpeg('images/orjinal.jpg');

$marge_right = 10;
$marge_bottom = 10;
$konum_x = imagesx($fligram);
$konum_y = imagesy($fligram);

imagecopy($resim, $fligram, imagesx($resim) - $konum_x - 10, imagesy($resim) - $konum_y - $marge_bottom, 0, 0, imagesx($fligram), imagesy($fligram));

header('Content-type: image/png');
imagepng($resim);
imagedestroy($resim);
?>

Sonuçta aşağıdaki resmi elde etmiş olduk.

örnek

Görüldüğü gibi resimimize fligramımızı yerleştirdik. Burada dikkat edilmesi gereken bir nokta var. Kodun 12. satırında header('Content-type: image/png'); ifadesini görüyoruz. Eğer bir PHP kodunda header content kullanılıyorsa onun yukarısında ekrana hiç bir şey yazdırmamalısınız yoksa sayfanızda resim yerine saçma sapan yazılar görürsünüz. Burada ekrana birşey yazdırmamalısınız derken çıktı olarak demek istiyorum yoksa kod kısmında bir sıkıntı yok. Kısaca şöyle özetleyelim header content varsa onun yukarısında print ve echo olmamalı.

Peki bu durumda ne yapacağız. Çok basit zaten content ile çıktımızı png olarak ürettiğimiz için oluşturduğumuz yukardaki kodu ayrı bir sayfa olarak kaydedeceğiz. Mesela ben ornek.php olarak kaydettim. Daha sonra bu php sayfasını tıpkı bir resmi çağırıyormuşuz gibi çağırıyoruz. Yani <img src="ornek.php>yazacağız.

Daha iyi anlaşılması için isterseniz aşağıdaki koda bakalım

<style type="text/css">
<!--
body,td,th {
    color: #FFFFFF;
}
body {
    background-color: #006699;
}
-->
</style>
<p>Deneme sayfası</p>
<p>
  <img src="button.php?">

Bu çok basit sayfadan da görüldüğü gibi ornek.php sayfamızı tıpkı bir resim gibi çağırdık ve sonuç aşağıdaki gibi oldu

son

Bu şekillde gd kütüphanesi kullanarak resmimizin üzerine günün tarihini bile attırabiliriz yani fligram bir resim değil de belirlediğimiz bir yazı da olabilir. Hatta bir döngü ile böyle belli konumdaki dosyaları sıra ile bu işlemden geçirerek birden çok resim üzerinde işlem yapabiliriz. Tabi istersek fligramın konumunu da değiştirebiliriz ancak bunların hepsi birer ayrı bir yazı konusu onun için şimdilik burada noktalıyorum hepinize kolay gelsin.

Uçakları İnternetten Takip Edin

Daha önce size şu yazımda dünya üzerindeki belli limanlarda gemilerin konumlarını gösteren bir web sayfasından bahsetmiştim. Şimdi yine buna benzer bir sayfadan bahsetmek istiyorum.

Bu sayfa da uçakların anlık konumlarını görmenizi sağlıyor. http://www.iststatus.com adresinden ulaşabileceğiniz sayfada açılan haritada hava alanı merkez olacak şekilde uçakların konumunu görebiliyorsunuz. Harita üzerindeki uçakların üzerine tıklayarak uçakların konumları, hareket bilgileri, kalkış ve varış yerleri, rotaları ve uçağın modeli gibi daha pek çok bilgiye ulaşabiliyorsunuz.

Son derece profesyonelce hazırlanmış sayfanın kullanımı oldukça kolay ve sağladığı fayda da çok önemli ve büyük…

Sayfaya orjinal halinde  ulaşmak için buraya; doğrudan hiç bir bağlantı olmadan ulaşmak için de buraya tıklayınız.

uçak ve uçuş bilgileri

Resimlerden Mozaik Yapmak

Bu yazıda PCNet dergisinin bu ayki (Aralık 2009) DVD’sinde gördüğüm bir web sayfasından bahsetmek istiyorum.

İnternet hem pek çok işimizi eskiye oranla daha rahat halletmemizi sağlıyor hem de pratik zekalı ve yetenekli insanların kendilerini göstermelerine olanak sağlıyor. Bu sayfalardan biri de www.pictosaic.com

Bu sayfa yüklediğiniz fotoğrafları, bir çok küçük resimden oluşan bir mozaik haline getiriyor. Evet böylece elinizde bir sürü resmin bir araya gelmesiyle oluşan bir resim oluyor. Şimdi bir tanesini hep beraber yapalım da ne demek istediğimi daha iyi anlayabilirsiniz.

Önce sayfamızı açıyoruz. www.pictosaic.com

pictosaic

Evet sayfamınız görünüşü pek iç açıcı olmayabilir ama marifeti bu açığını kapatmaya yetiyor da artıyor. İlk önce resmimizi yüklüyoruz. Resmimizin boyutunun çok yüksek olmamasına da dikkat ediyoruz. (Genişliği 3150 pikseli geçmemeli) Aynı zamanda resmin dosya boyutu da çok olmamalı. Sonra alttaki seçeneklerden “I select my photo-galleries below” olanını seçili olmasını sağlıyoruz. Buradaki seçenekleri isterseniz kısaca açıklamaya çalışalım

I select my photo-galleries below : Resmi aşağıda sıralanan galeriden seçtiklerinizle oluşturur

I select all the galleries : Bunu seçerseniz resminiz sitenin size sunduğu tüm galeriler kullanılarak oluşturulur.

The postermosaic will be only made of my main picture repeted thousands times : Aşağıdaki galerilerden hiçbiri kullanılmaz ve resminiz, orjinal resmin küçültülmüş parçalarının tekrarlarıyla oluşturulur.

Eğer ilk seçeneği seçtiyseniz sıra geldi hangi galerileri kullanmak istediğinizi belirlemeye. Burada resminizi oluşturacak küçük resimlerin hangi tür resimlerden oluşmasını istiyorsanız onları seçiyorsunuz.

Daha sonra 2400 ya da 5400 ile başlayan seçeneklerden birini seçerek küçük resimlerin hangi boyutta oluşturulacaklarını belirliyorsunuz.

Ardından “Low merge (my main image appears in low transparency)” yazan kutucuğu işaretliyoruz. Burada resimimizin şeffaflığı yani görünülürlüğünü ayarlıyoruz.  İsterseniz diğer seçenekleri de seçebilirsiniz ama ben en çok bu sonucu beğendim. Zaten site de size varsayılan olarak bu seçeneği öneriyor.

Sıra geldi en son adıma. Burada size “My main picture will appear only one time somewhere into the mosaic (but where???)” kutucuğunu işaretlemenizi öneriyorum. Bu seçenek oluşacak yüzlerce küçük resimin içine orjinal resmin de bir adet küçültülmüşünü koyuyor ancak koyduğu yer her defasında değişiyor. Koyduğu yeri bulmak size kalmış yani bir tür bulmaca gibi bir şey. En son olarak da sağ alt taraftaki “GO!” butonuna tıklayarak işlemimizi gerçekleştiriyoruz.

Şimdi isterseniz aşağıdaki resmi yükleyelim ve görelim Bu arada hatırlatmakta fayda var. Yükleyeceğiniz resim jpg, gif ya da png olmalı. Diğer formatlar desteklenmiyor.

resim

Yukarıda anlattığım işlemleri yapıyorum ve sayfa bana aşağıdaki resimdeki gibi oluşturulan resime ait özellikleri sunuyor

resim listesi

Burada resimin belli boyutlarda açılması ve indirilmesi mümkün. Ben “Real size:” yazısının karşısındaki Download linkine tıklıyor ve resimin gerçek boyutunu bilgisayarıma indiriyorum. Sonuç aşağıdaki gibi. Resimin mozaiklerini daha iyi görebilmeniz için bir bölümünü yakınlaştırdım.

son

Gördüğünüz gibi yüzlerce resimden oluşan bir resimimiz oldu.

NOT: Bazen sayfa istediğimiz resmi mozaik yapmıyor. Aslında yapıyor ama bize gösteremiyor herhalde bu durumu yakında düzeltirler ama o zamana kadar şimsi söyleyeceğim yöntemi kullanabilirsiniz. Resmi yüklediğimiz kutunun altındaki seçeneklerden “The postermosaic will be only made of my main picture repeted thousands times” seçeneğini seçiyor ve işlemimizi tekrarlıyoruz. Şimdi hem orjinal resimin tekrarlarından oluşan hem de daha önce seçtiğimiz galerilerden oluşan mozaikin listesine ulaşabiliyoruz.

Şimdilik bu kadar hoşçakalın.

http://www.pictosaic.com