23 Aralık 2012 Pazar

PHP İletişim Formu

Php ile iletişim formu oluşturma;

Daha önce html ile iletişim formu oluşturmayı göstermiştim.Şimdi ise Php iletişim formu yapmayı göstereceğim. Php ile html olarak oluşturduğunuz iletişim formu üzerinden e-mail nasıl alabiliriz ? Bunun kodlarını sizlerle paylasacağım.

İletişim Formu Niçin Gereklidir ?
 
Siteye gelen ziyaretçilerimiz bizimle geri bildirim , soru sorma gibi sebeblerden dolayı iletişim kurmak isteyebilirler.Buda siteye gelen ziyaretçilerle aramızda bir kontakt kurmamızı saglar bu açıdan olusturdugumuz sitelerde iletişim formu oldukca önemli bir rol oynamaktadır.

Gelelim Php ile iletişim formu olusturmaya ;

İlk olarak formunuzda neler olmasını istiyorsanız ona göre php de değişkenler atarız.
İsim ,mail adresi,mesajın konusu ve mesaj içerigini kapsayan bir iletişim formu hazırladım.Ve bunu mail.php olarak kaydettim.

Mail.php


<?php
$name=$_POST['name'];
$mail=$_POST['mail'];
$subject=$_POST['subject'];
$details=$_POST['details'];
$header="From: $mail\r\n".

        "Content-Type: text/html; Charset=utf-8\r\n"
;

if (!eregi ("^([a-z0-9_]|\\-|\\.)+@(([a-z0-9_]|\\-)+\\.)+[a-z]{2,4}$",$mail)) die ("Please enter the correct e-mail.");
   
       
if ($name=="" || $mail=="" || $subject=="" || $details=="")

{
echo "Lütfen Boş alanları Doldurunuz.";
}
else{
mail("mailadresiniz@localhost",$subject,$details,$header);
echo "Mesajınız gönderilmiştir.Teşekkürler ";

}

?>







Öncelikle php iletişim formundaki php kodlarını açıklayalım;
name, mail , subject,details,header adında değişkenler olusturduk, ardından mail dogrulama kodunu ekledik ve sonra eğer komutuyla name , mail,subject ve details değişkenlerınden herhangi birinini boş olması durumunda, lütfen boş alanları doldurunuz yazısını echo komutuyla ekrana yazdırdık.Tüm mail formumuz dogru bir sekilde doldurdugunuzda Teşekkür yazımızı ekrana yazdırdık.


Hata gösterimini kapatmak için ;

error_reporting(E_ALL ^ E_NOTICE);
ini_set('error_reporting', E_ALL ^ E_NOTICE ^ E_DEPRECATED); 

kodları <?php başlangıç kodunun altına ekleyebilirsiniz. Ben bu formu localhostta çalıstırdıgım için mailadresi uzantısnı localhost olarak yaptım.Eğer localhostta calıstırmak ıstersenız mercury ayarlarını yapıp Mozilla Thunderbird i kullanabilirsiniz.

Php mail adresi doğrulama :

Bir Diğer onemlı husus da mail yazımının gerekli olması yani formu dolduran kişinin doğru mail adresi yazmadan bu formun gönderimi engellemek, bunun içinde aşağıdaki kodu kullanmayı unutmayınız. 

if (!eregi ("^([a-z0-9_]|\\-|\\.)+@(([a-z0-9_]|\\-)+\\.)+[a-z]{2,4}$",$mail)) die ("Please enter the correct e-mail.");


Şimdi Html İletişim Formunu Oluşturalım ;

ben cok basit olarak bir html formu olusturdum Css ile sizler formun görünümünü zenginleştirebilirsiniz.

Mail.html


<form action="mail.php" method="post">
<p>Name</p><input name="name" type="text" />
<p>Mail</p><input name="mail" type="text" />
<p>Subject</p><input name="subject" type="text" />
<p>Message</p><textarea name="details" cols="" rows="" wrap="default"></textarea>
<input name="" type="submit" value="Submit" />
</form>



html sayfamızda form olusturmak için yeni form ekliyorsunuz,ve action a php dosyanızın adını yazıyorsunuz."post" methodunu seçiyorsunuz.Ardından eklediğiniz her text alanına php değişkenlerinin adını yazıyorsunuz zaten ikisini kontrol ettiğinizde görecekseniz.Umarım işinize yarar bir yazı olmustur , Herkese iyi çalısmalar.

php iletisim formu

14 Aralık 2012 Cuma

Css Border Radius Oval Köşe Oluşturma

css 3 ile resim kullanmadan sadece css kodları kullanarak arka planlarınızın köşelerini border radius kullanarak ovalleştirebilir sitenizin görünümünü dahada zenginleştirebilirisiniz.

#kenar1 {width:90px;
                height:30px;
                              border-radius: 10px;
                           background: olive;
}

#kenar2 {width:90px;
                 height:30px;
                                border-radius: 10px;
                                   border: 3px solid blue;
}


 #kenar3 {width:70px;
                 height:70px;
                                             border-radius: 5px 20px 5px;
                           background: silver;
}
#kenar4 {width:70px;
                height:70px;
                                       border-radius: 10px 30px;
                          background: orange;
}

Kenar 1:


Kenar 2

Bu iki örnekte görüldüğü gibi bütün köşeler oval bir görünüm almıştır.Css ile köşeleri oval yapmadaki tek husus border radius kodu ' dur.

Kenar 3

Kenar 4

Mesela sadece sol üst tarafı ovalleştirmek isterseniz ; border-radius-top-left yada sadece sol alt tarafı ovalleştirmek isterseniz ; border-bottom-left-radius gibi kodları kullarak zenginleştirebilirsiniz.

13 Aralık 2012 Perşembe

CSS Yatay Menu Yapımı

Bu makalemde Blog veya Websitelerinize eklemek için CSS yatay Menu yapımını kısa ve basit bir sekilde anlatacağım.Sizlerde kodları takip ederek basit bir sekilde kendinize özgü blog veya websiteniz için yatay menüler hazırlayabilirisiniz.
Açıklama Css Kod
ilk olarak menu adında bir div id olustuyoruz genisligini 500px font tipini font un boyutunu arka plan rengini gibi ayarlarını dilediginiz gibi ayarlayabilirisiniz. #menu {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; padding: 0; list-style-type: none; background-color: #eee; font-size: 12px; height: 40px; width: 500px;}
li list item dan gelen bir html etiketidir.menu listesini sıralamak amacıyla yazılır.float left sola yaslama anlamına gelmektedir.yani liste elemanlarını soldan saga dogru sıralayacagız.
a harfi liste elemanlarına link vermek amacıyla yazılır.linklere hover efekti uygulamak için de a:hover kullanılır.Hover efekti linkin üzerine mouse ile gelince görünümünün degişmesidir.
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
}
#menu li a:hover{
background-color: #fff;
border-bottom: 2px dotted #DDD;
color: #999;
}
wrapper'ı css menu'nün iskeleti gibi düşünebilirisiniz.menü'nun taşıp dagılmasını engellemek için kullanırız burada ayrıca border dotted kullandım siz border stilini degiştirebilirsiniz.
bu kısa acıklamalardan sonra menumuzu tamamlamıs olduk.
#menu_wrapper.yatay ul { background-color: #000000; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #CCC; border-bottom-color: #CCC; }
#menu_wrapper.yatay a {color: #fff;}
#menu_wrapper.yatay li a:hover{ color: #FFFFFF; background-color: #006699; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-top-color: #006699; }
Şimdi buraya kadar yazdığımız kodlar css içindi,hazırlamış olduğumuz Css menu'nün gözükmesi için html kodları eklememiz lazım. < body > etiketleri içine < / body >
<div id="menu_wrapper" class="yatay">
                    <ul id="menu">
                <li><a href="#">Ana Sayfa</a></li>
                <li ><a href="#">Hakkımda</a></li>
                <li><a href="#">Portfolyo</a></li>
                <li><a href="#">İletişim</a></li>
            </ul>
        </div>
bu etiketleri yazdıktan sonra yazının içindeki yatay css menümüzü olusturmuk olduk.Şimdi tamamen kaynak kodları toplu bir şekilde ekliyorum daha rahat denemeler yapabilmeniz açısından sizler için daha yararlı olacaktır.

--- CSS KODLARI ---


  • #menu { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; padding: 0; list-style-type: none; background-color: #eee; font-size: 12px; height: 40px; width: 500px; }
  •  #menu li { float: left; margin: 0; }
  •  #menu li a { text-decoration: none; display: block; padding: 0 20px; line-height: 40px; }
  •  #menu li a:hover{ background-color: #fff; border-bottom: 2px dotted #DDD; color: #999; }
  •  #menu_wrapper.yatay ul { background-color: #000000; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #CCC; border-bottom-color: #CCC; }
  •  #menu_wrapper.yatay a {color: #fff;}
  •  #menu_wrapper.yatay li a:hover{ color: #FFFFFF; background-color: #006699; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-top-color: #006699; }

--- HTML KODLARI ---

  • <div id="menu_wrapper" class="yatay">      
  • <ul id="menu">
  • <li><a href="#">Ana Sayfa</a></li>
  • <li ><a href="#">Hakkımda</a></li>
  • <li><a href="#">Portfolyo</a></li>
  • <li><a href="#">İletişim</a></li>
  •  </ul>
  • </div>
//Luckyorange//