Öneri ve Hata Raporu



Günün Sözü Her an seni düşünür

oylama 3/5 yorum 4 yorum yazar Hakan Taşan tarih 12 Ağustos 2015

Bilgisayar ve kullanıcı arasındaki iletişim kullanıcı arayüzü sayesinde sağlandığı için kullanıcı arayüzleri çok önemlidir. Bad Interface denilen kötü kullanıcı arayüzlerinden kaçınılmalıdır çünkü düzensiz ve hatalı kullanıcı arayüzleri müşterileri üründen soğutur. İşte bu yazıda bir formu submit ettiğimizde verilerin post ediliyor olduğunu gösteren bir uygulama yapacağız. Bu sayede verilerin post edildiğini, arkaplanda işlemlerin gerçekleştiğini ve beklenmesi gerektiğini kullanıcıya belirtmiş oluyoruz. Böyle küçük işlemleri kullanıcıya belirtmediğimiz takdirde kullanıcının kafasında acaba formu post etti mi?, formu gönderdi mi? vb. gibi sorular oluşur. Sizlere kendi projelerim için hazırladığım 2 örneği paylaşacağım.

Örnek 1)

İlk örnekte 2 input alanı olacak. Form submit edildiğinde kaydın yapıldığına dair yükleniyor resmi gösterilecek. Son olarak kaydın yapıldığı bilgisi verilecek.

Oluşturulan Görüntüsü

HTML Kodu

yukleniyor id'li div penceresinin ilk başta görünmesini engelliyoruz. Kaydol butonuna bastığımızda yukleniyor id'li div penceresi yani yükleniyor resmi devreye giriyor ve işlem bittiğinde tekrar görünmesini engelliyoruz. Yükleniyor resminin dosya yolunu ve ismini img src'den değiştirebilirsiniz. Eğer yükleniyor resminin altındaki yazıyı istemiyorsanız span etiketini silebilirsiniz.

<div id="uyelik_formu">
    <form onsubmit="return kayit()" name="kayit_formu" method="POST">
        <label>Ad:</label>
        <input type="text" name="ad" id="ad">
        <br>
        <label>Soyad:</label>
        <input type="text" name="soyad" id="soyad">
        <br>
        <input type="submit" value="Kaydol">
    </form>
    <br>
    <div id="yukleniyor" style="display:none;">
        <img src="yukleniyor.gif" alt="Yükleniyor">
        <br>
        <span>Kaydınız yapılıyor...</span>
    </div>                
    <div class="kayit_uyari"></div> 
</div>

 

CSS Kodu

CSS kodları tasarım kodlarıdır, uygulamanın daha güzel görünmesi içindir. Siz kendinize göre buradaki ayarları değiştirebilirsiniz.

#yukleniyor
{
    text-align:center;
}
#yukleniyor img
{  
    width:25px;
    height:25px;
}
label
{          
    float: left;
    width: 150px;
}
#uyelik_formu
{
    padding: 10px;
    width: 400px;
}

 

jQuery Kodu

input değerlerini AJAX ile post ediyoruz. yukleniyor id'li div penceresinin görünmesi ve gizlenmesi için gerekli kodlardır. Post edilecek sayfayı kendinize göre değiştirebilirsiniz.

function kayit() 

    $('.kayit_uyari').html("");

    var ad = $("#ad").val();
    var soyad = $("#soyad").val();

    $.ajax(
        {       
            type: "POST",
            url: "yukleniyor_post.php",
            data: {
                kayit_ad : ad, 
                kayit_soyad : soyad
            },
            beforeSend: function() { $('#yukleniyor').show(); },
            success: function(sonuc)
            {
                if(sonuc == 'Kaydınız yapıldı')
                    $('.kayit_uyari').html("Kaydınız Yapıldı");
                else
                    $('.kayit_uyari').html("Hata: Kaydınız Yapılmadı");
            },
            complete: function() { $('#yukleniyor').hide(); }
    })
    return false;
}

 

PHP Kodu

Post sayfası kodlarıdır. input değerlerini alıyoruz.

<?php
    if(isset($_POST["kayit_ad"]) && isset($_POST["kayit_soyad"]))
        echo "Kaydınız yapıldı";
?>

 

Önizlemeye tıklayarak uygulamanın nasıl çalıştığını inceleyebilirsiniz. input alanlarını doldurup gönderdiğinizde yükleniyor resmi görünecek ve ardından kayıt yapıldığına dair bir çıkacak, inputlardan birini boş gönderirseniz hata mesajı alacaksınız. Ayrıca normalde form işlemi kısa sürdüğü için yükleniyor resmini görmeniz açısından sleep() fonksiyonu ile post işlemini beklettim.

onizleme

Örnek 2)

İkinci örnekte yine 2 input alanı olacak. Form submit edildiğinde kaydın yapıldığına dair yükleniyor resmi gösterilecek. Son olarak kaydın yapıldığı bilgisi verilecek. Ancak bu sefer form submit edildiğinde yükleniyor resmi sayfanın tümünü post işlemi süresince devre dışı bırakacak ve post işlemi bittiğinde sayfa tekrar aktif olacak.

Oluşturulan Görüntüsü

HTML Kodu

yukleniyor id'li div penceresinin ilk başta görünmesini engelliyoruz. Kaydol butonuna bastığımızda yukleniyor id'li div penceresi yani yükleniyor resmi devreye giriyor ve işlem bittiğinde tekrar görünmesini engelliyoruz. İlk örneğin aksine yükleniyor resminin dosya yolunu CSS kodlarında belirteceğiz. Eğer yükleniyor resminin altındaki yazıyı istemiyorsanız span etiketini silebilirsiniz.

<div id="uyelik_formu">
    <form onsubmit="return kayit()" name="kayit_formu" method="POST">
        <label>Ad:</label>
        <input type="text" name="ad" id="ad">
        <br>
        <label>Soyad:</label>
        <input type="text" name="soyad" id="soyad">
        <br>
        <input type="submit" value="Kaydol">
    </form>
    <br>
    <div id="yukleniyor">
        <span>Kaydınız yapılıyor...</span>
    </div>        
    <div class="kayit_uyari"></div> 
</div>

 

CSS Kodu

CSS kodları tasarım kodlarıdır, uygulamanın daha güzel görünmesi içindir. Siz kendinize göre buradaki ayarları değiştirebilirsiniz. Ayrıca yükleniyor resminin dosya yolunu ve ismini değiştirebilirsiniz.

#yukleniyor
{
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba( 255, 255, 255, .8 ) url(yukleniyor.gif) 50% 50% no-repeat;
}        
#yukleniyor span
{
    text-align: center;
    margin-top: 29%;
    display: block;
}
label
{          
    float: left;
    width: 150px;
}
#uyelik_formu
{
    padding: 10px;
    width: 400px;
}

 

jQuery Kodu

input değerlerini AJAX ile post ediyoruz. yukleniyor id'li div penceresinin görünmesi ve gizlenmesi için gerekli kodlardır. Post edilecek sayfayı kendinize göre değiştirebilirsiniz.

function kayit() 

    $('.kayit_uyari').html("");

    var ad = $("#ad").val();
    var soyad = $("#soyad").val();

    $.ajax(
        {       
            type: "POST",
            url: "yukleniyor_post.php",
            data: {
                kayit_ad : ad, 
                kayit_soyad : soyad
            },
            beforeSend: function() { $('#yukleniyor').show(); },
            success: function(sonuc)
            {
                if(sonuc == 'Kaydınız yapıldı')
                    $('.kayit_uyari').html("Kaydınız Yapıldı");
                else
                    $('.kayit_uyari').html("Hata: Kaydınız Yapılmadı");
            },
            complete: function() { $('#yukleniyor').hide(); }
    })
    return false;
}

 

PHP Kodu

Post sayfası kodlarıdır. input değerlerini alıyoruz.

<?php
    if(isset($_POST["kayit_ad"]) && isset($_POST["kayit_soyad"]))
        echo "Kaydınız yapıldı";
?>

 

Önizlemeye tıklayarak uygulamanın nasıl çalıştığını inceleyebilirsiniz. input alanlarını doldurup gönderdiğinizde yükleniyor resmi görünecek ve ardından kayıt yapıldığına dair bir çıkacak, inputlardan birini boş gönderirseniz hata mesajı alacaksınız. Ayrıca normalde form işlemi kısa sürdüğü için yükleniyor resmini görmeniz açısından sleep() fonksiyonu ile post işlemini beklettim.

onizleme

Loading Resimleri

Son olarak birkaç tane yükleniyor resmi ve kendiniz üretmeniz için de birkaç link paylaşıyorum.

http://ajaxload.info/

http://preloaders.net/

http://loadergenerator.com/

indir

paylaş Paylaş
oylama yap Oyla

makale yorumları YORUMLAR

4 Yorum


yorum

Aygün Yıldız

06 Mart 2017 10:54


Uygulama çok güzel fakat uygulama sizin bize gösterdiğiniz demo üzerinde güzel burdaki kodları aldığımızda sayfa yenileyerek gönderme işlemi yapıyor. dahil edilen include işlemi yok sleep fonksiyonu kullandık diyorsanız fakat sayfanın hiç birinde sleep fonksiyonu göremiyorum örnek uygulamaya girip kaynak dan index alıyorum fakat php dosyasının içeriğini alamıyorum php olmasından ötürü ve sayfa içinde post ederken gif hiç göremeden yükleme işlemini yapıyor 1 tanesi boş olsa bile veriyi gönderiyor. Mümkünse yaptığınız uygulamayı konuya ekleseniz oradan indirsek ve ayrıca işlemlerin doğru olması durumunda bir yönlendirme işlemi yapar mısınız ?

yorum

Admin

06 Mart 2017 19:09


Merhaba Aygün hocam, bu uygulamayı yaparken kullandığım bütün kodlar php, jquery, css vb. bu sayfadadır.

php içerisinde yukarıda verdiğim 2 satırlık kod haricinde sadece sleep fonksiyonu kullandım, o da zaten demoda yükleniyor resmini sizin görebilmeniz açısından (siz uygulamanızda kullanmayacaksınız). eğer sleep kullanmasaydım sizin de dediğiniz gibi gif resmini göremeden (internet hızı, server hızı vb. kaynaklı) işleminizi yapmış olacaktınız. işte yükleniyor resminin amacı tam da budur, herhangi bir yavaşlıktan dolayı kullanıcıya o işlemin hala devam ettiğini göstermek. yazdıklarımı doğru bir şekilde uygularsanız hatasız bir şekilde çalışacaktır. denemek içinse php'de if koşulundan önce sleep(2); şeklinde kod ekleyip yükleniyor resmini görebilirsiniz.

ayrıca kodlardan da anlaşılacağı üzere inputlarda herhangi bir kontrol yapılmamakta. yani boş da gönderseniz dolu da gönderseniz veriler post ediliyor. input kontrolü istiyorsanız http://hakantasan.com/index/makaleler/55/jquery-ile-anlik-form-kontrolu/ yazısını kendinize göre uyarlayabilirsiniz. takıldığınız yerleri yazarsanız daha çok yardımcı olabilirim.

yorum

Aygün Yıldız

07 Mart 2017 00:29


Cevabınız için teşekkür ederim ama aklıma takılan 2 soru var;

1. si yukleniyor_post.php dosyasında kaydınız yapıldı yazdık ve ayrıca fonksiyon içinde kaydınız yapıldı yazısını yazdık işlem sonucundan hangisini ekrana yazıyor. php sayfasındakini yazıyorsa scripte yazmamızım sebebi nedir?

2. si tüm post işlemi bittikten sonra yönlendirme yapmak istiyorum bunu nerede yapmam gerekiyor bu konuda yardımcı olursanız sevinirim daha önce ajax post işlemi yapmıştım biraz daha farklı bu diğerinden ondan header kullanmıştım fakat işlemi gerçekleştirmiyordu bu yaptığınızı kullanıcı girişinde kullanmayı düşünüyorum bu konuda yardımcı olursanız sevinirim.

yorum

Admin

07 Mart 2017 20:03


hocam php ile jquery arasındaki iletişimi json ile sağlıyoruz. php'den json içerisinde string değerleri jquery'e aktarıyoruz. dolayısıyla sonuc parametresiyle string değeri döndürüp if koşulunda kontrol ediyoruz. ekrana yazılan kaydınız yapıldı yazısı ise jquery'de bulunan yazıdır.

yönlendirme işlemini yine if koşulu içerisinde location.href = "www.hakantasan.com" şeklinde kullanacaksınız. örneğin;


if(sonuc == 'Kaydınız yapıldı') {
$('.kayit_uyari').html("Kaydınız Yapıldı");
location.href = "www.hakantasan.com";
}