HTML Tablolar (Tables) Kullanımı
>>
0
yorum
HTML ile kenarlıklı ve kenarlıksız tablolar yapabilirsiniz. Tablolar metinlerinizin ve resimlerinizin hizalı olmasını sağlar .

Tablolar

Tablolar <table> etiketi ile başlar. Tablolar <tr> etiketi ile satırlara bölünür ve her satır da <td> etiketi ile sütunlara bölünür. Bir tablo hücresi metinler, resimler, listeler, paragraflar, formlar, yatay çizgiler, tablolar vs. içerebilir.

<table border="1">
<tr>
<td>satır 1, hücre 1</td>
<td>satır 1, hücre 2</td>
</tr>
<tr>
<td>satır 2, hücre 1</td>
<td>satır 2, hücre 2</td>
</tr>
</table>

Önizleme aşağıdaki gibi olacaktır:
satır 1, hücre 1 satır 1, hücre 2
satır 2, hücre 1 satır 2, hücre 2

Tablolar ve Kenarlık (border) Parametresi

Eğer bir border parametresi belirtmezseniz ya da border parametresinin değerini 0(Sıfır) yaparsanız, tablonuz kenarlık olmadan görüntülenir. Bu bazen yararlı olabilir ama çoğu zaman kenarlıkları göstermek daha çok işinize yarayacaktır.

Kenarlıkları göstermek için aşağıdaki parametreyi kullanmalısınız:

<table border="1">
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
</table>

Tablolarda Başlıklar

Başlıklar <th> etiketi ile belirtilir.

<table border="1">
<tr>
<th>Başlık</th>
<th>Başlık 2</th>
</tr>
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
<tr>
<td>Satır 2, Hücre 1</td>
<td>Satır 2, Hücre 2</td>
</tr>
</table>

Önizleme
Başlık Başka Başlık
Satır 1, Hücre 1 Satır 1, Hücre 2
Satır 2, Hücre 1 Satır 2, Hücre 2

Bir Tabloda Boş Hücreler

Veri içermeyen hücreler bazı tarayıcıda gözükmezler.

<table border="1">
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
<tr>
<td>Satır 2, Hücre 1</td>
<td></td>
</tr>
</table>

Önizleme
Satır 1, Hücre 1 Satır 1, Hücre 2
Satır 2, Hücre 1

Boş hücre etrafındaki iç kenarlıkların görünmediğine dikkat edin. (Mozilla Firefox bunu görüntüler).

Bundan kurtulmak için, ( ) özel karakterlerini boş hücre içine ekleyerek kenarlıkların görüntülenmesini sağlayabilirsiniz.

<table border="1">
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
<tr>
<td>Satır 2, Hücre 1</td>
<td>> </td>
</tr>
</table>

Önizleme
Satır 1, Hücre 1 Satır 1, Hücre 2
Satır 2, Hücre 1  

Tablo Etiketleri

Etiketi Açıklama
<table> Tablo
<th> Tablo başlığı
<tr> Satır
<td> Hücre
<caption> Manşet
<colgroup> Hücre grupları
<col> Sütun genişliği
<thead> Tablo başı
<tbody> Tablo body özelliği
<tfoot> Tablonun en alt kısmı




Css'de DIV'leri yan yana dizmek
>>
2
yorum
DIV tasarımda karşılaşılan en büyük sorunlardan birisi de yaptığınız DIV'leri yan yana yerleştirmektir. Bu sorunun çözümü çok basit. Makalemizde inceleyelim.

Bu makalemizde DIV'lerimizi yan yana yerleştireceğiz.

Küçük bir not düşmekte fayda var ; Bu yan yana sıralama işleminde öncelikle bir ana div olacak ve içine yerleştireceğimiz ana divin boyutunu aşmayacak şekilde divler olacak. Örnekte daha iyi anlayacağız.

HTML Kodu:
<div id="ana_div"> <!--#Ana Div Baslangic-->
<div class="div" id="div">CSSHTMLPHP 1</div>
<div class="div" id="div2">CSSHTMLPHP 2</div>
<div class="div" id="div3">CSSHTMLPHP 3</div>
</div><!--#Ana Div Bitis-->

CSS Kodu:
#ana_div {
height: 300px;
width: 728px;
margin-right: auto;
margin-left: auto;
background-color: #666;
}
.denemediv {
float: left;
height: 200px;
width: 200px;
margin: 10px;
color: #333;
background:#eaeaea;
padding:10px;
}

Önizleme


CSSHTMLPHP 1
CSSHTMLPHP 2
CSSHTMLPHP 3
Php ile Sunucuya Resim Kayıt Etmek
>>
0
yorum
Bu dersimizde PHP ile sunucuya resim yüklemeyi öğreneceğiz.İlk önce dosyalarımızı oluşturalım.
index.php, kaydet.php adında 2 tane PHP dosyası ve resimleri kayıt edeceğimiz klasörü oluşturdum. Ben klasörün adını "Resimler" yaptım.

İlk olarak index.php için kodlarımızı yazalım. index.php'de basit bir form tasarladık.
<form action="kaydet.php" method="post" enctype="multipart/form-data"> // enctype="multipart/form-data" dosya upload için gerekli bir yapı.
<input type="file" name="fileUp" /> // kaydet.php kullanacağımız için name veriyoruz.
<input type="submit" value="Gonder" />
</form>

kaydet.php için kodlarımızı yazalım.
$kaynak = $_FILES["fileUp"]["tmp_name"]; // tempdeki adı
$ad = $_FILES["fileUp"]["name"]; // dosya adı
$tip = $_FILES["fileUp"]["type"]; // dosya tipi
$boyut = $_FILES["fileUp"]["size"]; // boyutu
$hedef = "Resimler"; // başta açtıgımız klasör adımız..

$kaydet = move_uploaded_file($kaynak,$hedef."/".$ad); // resmimizi klasöre kayıt ettiriyoruz.
if($kaydet) // eğer kayıt ettiysek uyarı mesajı yazdırdık.
{
echo '<div style="background-color:ddd; border:1px solid #ccc">
Kayit basarili</div>
';
}else { echo "Kayit yapilmadi"; }
PHP ile Hesap Makinesi Yapımı
>>
0
yorum
PHP ile Class kullanarak renkli bir hesap makinesi yapalım.
Öncelikle HTML dosyamızı oluşturup aşağıdaki kodları giriyoruz.





index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.a {
font-family: "myriad Web Pro";
font-size: 16px;
font-weight: bold;
}
</style>
</head>

<body>
<!-- Burada girilen verileri sonuc.php ye at%u0131yoruz. -->
<form method="post" action="sonuc.php">
<table bgcolor="#000033" width="229" border="0" align="center">
<tr bgcolor="#999999">
<td width="78" align="center" class="a">Say%u0131 1 :</td>
<td width="144"><input type="text" name="sayi_1" /></td>
</tr>
<tr>
<td align="center" bgcolor="#999999" class="a">Say%u0131 2 :</td>
<td bgcolor="#999999"><input type="text" name="sayi_2" /></td>
</tr>
<tr>
<td height="44" colspan="2" align="center" bgcolor="#CCCCCC" class="a"> » %u0130%u015Flemler</td>
</tr>
<tr>
<td height="40" colspan="2" bgcolor="#FF9900" class="a"><input type="radio" name="toplama" />Toplama</td>
</tr>
<tr>
<td height="42" colspan="2" bgcolor="#FF9900"><span class="a">
<input type="radio" name="cikarma" />
Ç%u0131karma</span></td>
</tr>
<tr>
<td height="38" colspan="2" bgcolor="#FF9900"><span class="a">
<input type="radio" name="carpma" />
Çarpma</span></td>
</tr>
<tr>
<td height="39" colspan="2" bgcolor="#FF9900"><span class="a">
<input type="radio" name="bolme" />
Bölme</span></td>
</tr>
<tr>
<td height="62" colspan="2" align="center"><input style="font:'myriad Web Pro'; font-size:16px" type="submit" value="%u0130%u015Flem" name="hesapla" /></td>
</tr>
</table></form>

</body>
</html>

Bu sayfayı oluşturarak yapmış olduğumuz işlemler:

1- Form etiketi ile input alanlarımıza girilen verileri sonuc.php sayfasına post methodu ile yollamış olduk.


2- Tablolar yardımı ile veri giriş alanlarımızı ve işlem elemanlarımızı düzenledik.


Şimdi sıra sonuc.php de yaptıracağımız işlemlerin arkaplanda çalışacağı class.php sayfasının yapımına.

class.php

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<?php

// kullan%u0131c%u0131 giri%u015F de%u011Ferlerini sayfaya post ile ça%u011F%u0131r%u0131p de%u011Fi%u015Fkenlere atad%u0131k.
$sayi_1=$_POST["sayi_1"];
$sayi_2=$_POST["sayi_2"];

// if deyimi ile veri giri%u015Fini kontrol ettik.
if ($sayi_1=="" or $sayi_2=="" ){

echo "Lütfen bo%u015F alan b%u0131rakmay%u0131n%u0131z" ;
}
else{

// class olu%u015Fturup içerisine public global de%u011Fi%u015Fken tan%u0131mlamas%u0131 yap%u0131p foksiyonlar%u0131 ekledik.
class islemler{

public $a;
public $b;

function toplama(){

return $this->a $this->b;

}

function cikarma(){

return $this->a - $this->b;

}

function bolme(){

return $this->a / $this->b;

}

function carpma(){

return $this->a * $this->b;

}

}

}

?>

Bu sayfayı oluşturarak yapmış olduğumuz işlemler:

1- İndex.html sayfamızdan gelen verileri bu sayfaya post methodu ile çekip birer değişkene atadık.

2- İf ile değişkenlerin içeriğini kontrol ettik.

3- Public komutu ile class içerisine 2 adet global değişken tanımladık.

4- Son olarak matematiksel fonksiyonlarımızı tanımladık.

Şimdi sıra index.html sayfamızdan gelen verileri aldığımız sonuc.php sayfamızın yapımına

sonuc.php
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<?php

//class.php yi sayfam%u0131za ça%u011F%u0131rd%u0131k.
require ("class.php");

//class%u0131m%u0131z%u0131 ad%u0131yla yeni bir de%u011Fi%u015Fkene atad%u0131k.
@$islemler= new islemler();

//classtaki public de%u011Fi%u015Fkenlerini girilen de%u011Ferlere atad%u0131k.
$islemler->a=$sayi_1;
$islemler->b=$sayi_2;

// if ile radyo butonlar%u0131n%u0131 kontrol edip sonucu ekrana yazd%u0131rd%u0131k.
if(isset($_POST["toplama"])){
echo "say%u0131 1 say%u0131 2 = " . $islemler->toplama();
}

elseif(isset($_POST["cikarma"])){

echo "say%u0131 1 say%u0131 2 = " . $islemler->cikarma();

}
elseif(isset($_POST["carpma"])){

echo "say%u0131 1 say%u0131 2 = " . $islemler->carpma();

}

elseif(isset($_POST["bolme"])){

echo "say%u0131 1 say%u0131 2 = " . $islemler->bolme();

}
else{

echo"Lütfen bir i%u015Flem seçiniz !";

}
?>

Bu sayfayı oluşturarak yapmış olduğumuz işlemler:

1- Require komutu ile classımızı bu sayfaya çağırdık.

2- Class.php yi burada yeni bir değişkene atayarak bu değişkenler üzerinden işlem yapabilmemizi sağladık.

3- Class içerisindeki tanımlanan public değişkenlerini index.htmlden gelen verilere atadık.

4- Son olarak if deyimi ile radyo butonlarının seçili olma durumlarına göre fonksiyonlarımızı çalıştırarak ekrana yazdırma işlemini yaptık.
CSS ile Oval Kenarlı Div ve Table
>>
0
yorum
CSS kullanarak kenarları oval olan kutuları nasıl yapabileceğimizi göstermek istiyorum.
Öncelikle body tag'ları arasında bir div oluşturalım.
<div id="tablo">
</div>
Daha sonra style kodunuza aşşağıdaki kodları ekleyin.
<style>
#tablo{
background-color: #f00; /*arka plan rengini belirtiyoruz*/
-moz-border-radius: 12px; /*tablomuzun kenarlarının kaç pixel olacağını belirtiyoruz*/
width:300px;height:250px;/*tablomuzun boyutu */
}
</style>

Hepsi bu kadar artık id="tablo" kodunu çağırdığınız div veya table nin kenarları oval olacaktır.
Wordpress Kategoriye Özel Sayfa Single.php Yapımı
>>
0
yorum
WordPress yazılımını kullanıyorsanız hayalinizdeki siteyi yapabilirsiniz, bu kez anlatacağım yöntem ile istediğimiz kategorinin tekil sayfasını istediğimiz şekli vereceğiz.Mesela bazı kategori sayfalarında reklam olmamasını veya sidebar olmamasını isteriz ..vs şeklinde çoğaltmak mümkün.

Aşağıda size gerekli kod parçasını vereceğim , sizde istemediğiniz bölümleri oluşturduğumuz yeni single.php dosyasından rahatça editleyebileceksiniz.
Öncelikle single.php sayfamızdan bağımsız bir single.php yapmamız gerekiyor, bunun için single.php dosyamızı kopyalayıp aynısından yeni bir tane daha oluşturun ve adını single-isim.php şeklinde kaydedin bunu temamızın bulunduğu dosyaya FTP yardımı ile atın.İsim yazan yere kendi kategori isminizi yazabilirsiniz burası sizin tercihiniz.
Ekleyeceğimiz koda bir bakalım;

<$post = $wp_query->post; if ( in_category('5') ) { include(TEMPLATEPATH . '/single-foto.php'); } elseif ( in_category('10') ) { include(TEMPLATEPATH . '/single-video.php'); } else { include(TEMPLATEPATH . '/single-default.php'); } ?>


Yukarıdaki kodu yeni yaptığımız single-default.php adlı dosyamıza ekledik peki kodda neler mevcut; kod içerisinde in_category(’5′) yazan yer bizim oluşturduğumuz kategorinin hangi kategori ile ilişkilendirildiğini gösteriyor yani buraya oluşturacağımız kategorinin ID sini yazıyoruz.
single-foto.php -single-video.php şeklinde istediğimiz kadar farklı kategori sayfaları oluşturabiliyoruz bu sizin tercihinize bağlıdır. single-default.php bölümü ise kategori ID eklemediğimiz tüm yazıları kapsar yani normal single.php sayfası.
Kodu eklemeden önce single.php dosyasını sıfırlayıp kodu ekleyin , sıfırlamadan önce single.php sayfasında kalan kodları (orjinal kodları ) single-default.php dosyasına koyun, burada single.php yönlendirme işlevine almış olduk.
Wordpress Nasıl Kurulur?
>>
0
yorum
Bu yazıda bir web sitesi WordPress alt yapısı ile nasıl kurulur, bunun için neler gereklidir sorularının cevabını bulacaksınız. WordPress bildiğiniz üzere, blog siteler için tasarlanmış fakat daha sonra insanların yaratıcılıkları ile çok daha geniş bir kullanım alanına sahip bir platform haline geldi. Sözgelimi, bir e-ticaret sitesinden tutun da oyun sitesi, video paylaşım sitesi açabilirsiniz WordPress ile.

Fakat bunları yapabilmek için WordPress’i tanımaya, php,html, javascript bilgisine yahut mevcut eklentilerden güzel bir kompozisyon yapabilme yaratıcılığına sahip olmanız gerekiyor. Şimdi gelelim bu meşhur WordPress nasıl kurulurmuş. Öncelikle belirtmeliyim ki WordPress kurulumu gerçekten kolaydır, sadece dikkatli bir şekilde ilerlemeniz ayrıntıları gözden kaçırmamanız lazım. Ayrıca sistem kurulduktan sonra birkaç tıkla seveceğiniz temalara, eklentilere ulaşacak, websitesi yapmak bu kadar kolaymıymış diyeceksiniz. Tabi özgün tasarımlar yapmak için donanımlı olmanız gerekeceği aşikar. Yazı içerik itibariyle uzun gelebilir fakat hata yapmamanız veya takılmamanız için ayrıntılı bir şekilde anlatım yapılmıştır.

1.Gerekenler:

a.Alan Adı:
Alan adı web sitenizin adresini oluşturacaktır. Misal siteadi.com bir alan adıdır. Alt alan adı da işinizi görecektir; altsite.siteadi.com da bir alt alan adıdır. Eğer localhostta yani kendi bilgisayarınızdaki server da kuracaksanız bir alan adı edinmenize gerek yoktur.

b.Host:
Wordpress dosyalarınızın saklanacağı bir hosta ihtiyacınız vardır. Hostları ücretli ve ücretsiz olarak ayırabiliriz. Ücretsiz hostları deneme amaçlı kullanabilirsiniz ama ben tavsiye etmiyorum çünkü ücretsiz hostlar hem yavaştırlar hem de ziyaretçilerinize istemediğiniz reklamları gösterirler. Ücretli hostları, host hizmeti veren firmalardan edinebilirsiniz. Localhostta kuracağınız bir site için de elbette hosta ihtiyacınız yoktur.

c.Wordpress dosyaları:
Wordpress kurulumu için gereken dosyaları en güvenilir şekilde http://tr.wordpress.org/ adresinde sağ kısımdan indirebilirsiniz. Diğer adreslerden indireceğiniz WordPress sürümlerinde istemediğiniz ve kaldırmak için kod bilgisine ihtiyaç duyacağınız bağlantılar olabilir.

d.FTP programı:
FTP programı WordPress dosyalarını hostunuza gönderirken kullanacağınız programdır. Yani dosya göndericiniz diyebiliriz. Bazı hostlarda web file sender gibi uygulamalar oluyor fakat FTP programları daha stabil çalışmakta. FTP programı olarak da ücretsiz olarak tam fonksiyonla çalışan Filezilla’yı tavsiye ediyorum. Bu programı da [http://filezilla-project.org/download.php] adresinden işletim sisteminize uygun olarak indirebilirsiniz.

e.FTP Bilgileri
Dosyalarınızı FTP programı ile serverınıza gönderirken programa gireceğiniz server adresi, kullanıcı adı ve şifre bilgileridir. Bunu hostunuzun kullanıcı panelinden öğrenebilirsiniz. Panelde FTP accounts, FTP Users seçenklerinde de bulunabilir.

2.Kurulum:

Kuruluma başlarken elimizde alan adımızın, hostumuzun olduğunu ve müdahele edebildiğimizi, wordpress dosyalarımızın indirilmiş ve .zip formatından klasöre çıkartıldığını ve FTP programımızın indirilip kurulumunun gerçekleştiğini ve FTP server, kullanıcı adı ve şifremizin hazır olduğunu düşünüyoruz.

2.1.Database’in Oluşturulması
Şimdi WordPress sitemizin kullanacağı database’i oluşturacağız. Bunun için hostumuzun sitesinden panelimize girip database oluşturu bulup bir adet database oluşturuyoruz.Database yazılımı olarak genelde host şirketleri phpMyAdmin’i kullanıyor. Önce database adını giriyoruz ardından Oluştur’a tıklıyoruz.


Burada önemli olan database’in adının, kullanıcı adının, şifresinin ve server adresinin bilinmesi. Bu bilgileri de yine database oluşturduktan sonra hostumuzun panelinden öğrenebiliriz.

2.2.Wp-config.php Dosyasının Oluşturulması:
Bazı hostlar güvenlik gereği otomatik wordpress kurulumuna mani oluyor. O sebeple bu dosyayı biz elimizle oluşturalım, herkesin işine yarayacak garantili bir anlatım olsun.

Database ile sitemizin bağlantısını sağlayacak olan config.php dosyamızı oluşturacağız. Bunun için zip’den çıkarttığımız WordPress dosyalarımızı buluyoruz ve wp-config-sample.php dosyasını notepad (yada benzeri bir basit kelime işlemcisi ile) açıyoruz.
-define(‘DB_NAME’, ‘veritabanı adı’); buraya veritabanımızın adını yazıyoruz
-define(‘DB_USER’, ‘kullanıcı adı’); veritabanımıza bağlanmak için kullandığımız kullanıcı adı
-define(‘DB_PASSWORD’, ‘sifre’); veritabanımıza bağlanmak için kullandığımız şifre
-define(‘DB_HOST’, ‘localhost’); burasını genellikle localhost olarak bırakıyoruz, eğer ki bir sorun çıkarsa, hostumuzun kontrol panelinden aldığımız server adresini localhost yerine yazıyoruz.
Maddelerdeki değişiklikleri yaptıktan sonra bu wp-config-sample.php ‘da yaptığımız değişiklikleri farklı kaydet’e basıp wp-config.php olarak kaydediyoruz.

2.3.Server Bağlanıtısının Yapılması:
Filezilla programına giriyoruz ve sunucu bilgilerimizi resimde kırmızı ile gösterilen yerlere girip hızlı bağlana basıyoruz.


Bundan sonra programa bu bilgileri girmeyeceğiz, yanındaki ok tuşuna basınca otomatik olarak çıkan listede gözükecektir. Hızlı bağlana bastık ve servera bağlanmış olduk.

2.4.Dosyalarımızın Web Server’a Gönderilmesi:
Filezilla ile bağlantımızı yaptıktan sonra programda sol tarafta yerel site kısmından WordPress dosyalarımızın olduğu yeri buluyoruz. Sağ taraftaki uzaktaki sitede kurulum yapılacak yeri buluyoruz bu klasör ana dizine kurulum yapacaksanız (root, htdocs, siteadi.com) olabilir. Şimdi sol alttaki Dosya adının altındaki WordPress dosyalarımızın hepsini seçip sağ alttaki bulmuş olduğumuz klasöre bırakıyoruz ve dosya transferi başlamış oluyor. Burada dikkat etmemiz gereken Aktarılamayanlar ismindeki kısımda dosya bulunmaması, eğer orada dosya kalmış ise o dosyayı yeniden göndermeliyiz. Server bağlantı sorunlarından dolayı aktarılamayan dosyalar olabilir. Dosya transferi bittiğinde Filezilla’yı kapatabiliriz.

2.5.Kurulum Bitiyor
Şimdi internet tarayıcımızı açıp www.siteadresi.com/wordpress/wp-admin/install.php yazıyoruz ve karşımıza çıkan yönergeleri takip ediyoruz. Bu aşamada dikkat edeceğiniz husus e-posta adresini doğru girmeniz. Bu adres yöneticinin e-posta adresidir ve şifrenizi unutttuğunuzda şifrenin gönderileceği adrestir. Diğer bilgiler site kurulduktan sonra wordpress panelinden kolayca değiştirilebilecek bilgilerdir.