Öneri ve Hata Raporu



Günün Sözü Asla yalnız yürümeyeceksin

oylama 3/5 yorum 7 yorum yazar Hakan Taşan tarih 19 Ekim 2013

AJAX ile sayfa yenilemeden bazı işlemleri yapabiliriz (database bağlantısı, post, get vb.). Artık günümüz websitelerinde sıkça gördüğümüz, hem görüntü hem de dinamik websiteler oluşturulması açısından kullanılması gereken önemli bir özelliktir. Bu makalede HTML ile kullanıcı adı, şifre ve mailden oluşan çok basit bir üyelik formu yapıp, girilen değerleri jQuery ile kontrol ettikten sonra hazırladığımız php sayfasına gönderip, sonucu ilk sayfaya geri döndürmeyi öğreneceğiz. İşte bütün bu işlemler sayfamız yenilenmeden gerçekleşecektir.

HTML Kodu:

Kullanıcı Adı:  <input type="text" name="kadi">  <br>
Şifre:  <input type="password" name="sifre">     <br>
Mail:  <input type="text" name="mail">           <br>
<button type="submit" onclick="kayit()">Kaydol</button>
<div id="uyari"></div>

 

Sayfamızda kullanıcı adı, şifre ve mailden oluşan 3 tane input alanı ve bu değerleri göndermek için 1 tane buton olacak. inputlarda dikkat etmemiz gereken nokta name özelliğine girilen değerlerdir çünkü bunu scriptte kullanacağız. Buton oluştururken ise onclick kullanarak tıklandığında istediğimiz fonksiyonun çalışmasını sağlayacağız ve böylece hem kontrol hem de POST işlemlerimiz gerçekleşecek. En alt satırdaki div alanı ise dönecek sonucu bastıracağımız alandır.

Not: AJAX ile post işlemlerinde form kullanmamız gerekmiyor.

jQuery Kodu:

function kayit()
{
    var mail  = $("input[name=mail]").val();
    var kadi  = $("input[name=kadi]").val();
    var sifre = $("input[name=sifre]").val();

    mail  = jQuery.trim(mail);
    kadi  = jQuery.trim(kadi);
    sifre = jQuery.trim(sifre);

    var atpos=mail.indexOf("@");
    var dotpos=mail.lastIndexOf(".");

    if(kadi == "")
    {
        var newHTML = "<div style='color: red;'> *Kullanıcı Adı Girin </div>";   
        document.getElementById("uyari").innerHTML=newHTML;
    }
    else if(sifre == "")
    {
        var newHTML = "<div style='color: red;'> *Şifre Girin </div>";   
        document.getElementById("uyari").innerHTML=newHTML;
    }
    else if(mail == "")
    {   
        var newHTML = "<div style='color: red;'> *E-Mail Girin </div>";   
        document.getElementById("uyari").innerHTML=newHTML;
    }
    else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=mail.length)
    {
        var newHTML = "<div style='color: red;'> *Geçerli email değil </div>";   
        document.getElementById("uyari").innerHTML=newHTML;
    }
    else
    {
        $.ajax(
        {       
            type: "POST",
            url:  "jquerypost2.php",
            data : {post_mail : mail, post_kadi : kadi, post_sifre : sifre},
            success: function(sonuc){
                if(sonuc == 'Kaydınız yapıldı')
                {
                    var newHTML = "<div style='color: green;'> *Üyeliğiniz kaydedildi </div>";   
                    document.getElementById("uyari").innerHTML=newHTML;
                }  
            }
        })
    }
}

 

Fonksiyondaki ilk 3 satırda inputlardan alınan verileri fonksiyona aktarıyoruz. Sonraki 3 satırda trim fonksiyonu kullanarak verilerin başındaki ve sonundaki gereksiz boşlukları siliyoruz. Sonraki 2 satır ise mail adresinin geçerli olup olmadığını kontrol etmeye yarayacak olan kodlardır. if ve if else şartları inputlardan alınan verilerin boş olup olmadığını ve geçerli mail adresi olup olmadığını kontrol etmeye yarıyor. else içerisi ise asıl işimizi gören kısımdır.

type: POST veya GET değeri alır.

url: Database işlemlerini yapacağımız PHP dosyası.

data: POST ile göndereceğimiz veriler.

succes: Dönecek olumlu sonuçta neler olacağını gösteren bölüm.

PHP Kodu:

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

 

url kısmında yazan PHP dosyasıdır. Alınan değerler tanımlı mı değil mi kontrol eder, eğer tanımlıysa sonuç olumlu olarak geri döner. Burada dikkat edilecek nokta echo ile yazdırdığımız yazı AJAX'ın success alanındaki if şartını sağlamalı, yani aynı olmalı.

  

paylaş Paylaş
oylama yap Oyla

makale yorumları YORUMLAR

7 Yorum


yorum

Metin

07 Aralık 2015 18:17


Çok teşekkür ederim bu dosya bana çok yardımı olacak

yorum

Hilmi

24 Aralık 2015 01:58


merhaba
sitemde üyelerin gireceği bazı alanlarda ek şifre istiyorum. bu konuda sistem çalışıyor bir sorun yok ama ben daha esnek bir tasarımla bu şifrenin girilmesini istiyorum.
örneğim linke tıklandığında tüm sayfa kararsın ve ortada form alanında şifre istensin. girilen şifre doğru ise ilgili alana giriş yapılsın. şifre yanlış ise sayfanın kararması hiç kapanmadan şifre yanlış bilgisi verilsin. bunu nasıl yapabilirim.
sistem mvc.

yorum

Admin

24 Aralık 2015 06:43


Aslında istediğiniz işlem için open source kodlar internette mevcut, onları kullanabilirsiniz.

Ben yine de basitçe anlatayım siz takıldığınız yerde yazarsınız. Linke tıklandığında onclick ile fonksiyona yönlendireceksiniz. Bu fonksiyon yeni bir div alanını ortaya çıkaracak (sayfa yüklenirken gösterilmeyecek sadece fonksiyon çağrıldığında gösterilecek). Ortaya çıkan div alanını inputlarla doldurun. Tabi inputlar form içerisinde olacak ve AJAX ile sayfa yenilenmeden login işlemi yapılacak. Eğer login işlemi doğruysa php tarafında yönlendirme fonksiyonu ile anasayfaya yönlendirirsiniz, login işlemi doğru değilse zaten uyarı verdireceksiniz AJAX olduğu için sayfa değişmeyecek. Açılacak div penceresi için CSS kodları aşağı yukarı şu şekilde olacak
siz değiştirin kendinize göre.


<a onclick=fonksiyon>

<div id="loginalani">
inputlar
</div>



#inputalani
{
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-renk;
}

yorum

Hilmi

24 Aralık 2015 18:08


cevap için teşekkürler işin mantığını anladığımı sanıyorum.
fakat sorunum devam ediyor. internetten bulduğum java kodları ile şifreli sayfaya giden linke tıkladığında bir divi sayfa yenilenmeden açıyorum. sayfa hafiften kararıyor sorun yok ama div açıldığında sayfa kilitleniyor. ne div içindeki alan ne de sayfada herhangi bir yere müdahale edilmiyor. (muhtemelen tasarımda bir eksiklik var.) ama çözemedim bir türlü. neden kaynaklanıyor olabilir?

yorum

admin

25 Aralık 2015 23:37


Kullandığım kod uzun olduğu için burdan yazamıyorum. Yaptığım şey şu:
AdminLTE tamplatesini sisteme giydirmeye çalışıyorum. Sitemin kullanıcı alanını AdminLTE tamaplatesine ile çağırıyorum. Bu siteyi MVC olarak birine yaptırmıştım. Çok karmaşık, kopyala yapıştır ile yapılmış bir HTML var. O nedenle acemiliğimle birlikte hangi kodu göstereceğimden emin olamıyorum. Hazır tamplatenin CSS kodları çok fazla zaten buraya yapıştırmamın imkanı yok gibi.
Fakat şöyle bir şey var, en azından sorunumu ilgilendiren div classın css içindeki z-index değerini biliyorum. 1050 olarak görünüyor. Tamplatenin css dosyalarında bir hayli z-index var. hangisini değişeceğimi bilemedim. Hepsini deneme gibi bir şansım yok zira haftaları alır. Acaba bu 1050 değerine nasıl bir değer verirsem hepsinden üste gelir? Yada böyle bir şey olabilir mi diye sorayım.

adminLTE indexini sistemde üye alanı Layout'u olarak tanımladım ve projeye gömdüm bu anlamda sayfaların tasarımını bu tamplate göre uyarlıyorum. Sayfalarım düzgün çalışıyor ama bahsettiğim bu sorunu aşamadım.

Şöyle bir yöntem denedim. taplate içindeki şifreli alan linkini elimdeki kodlarla alt bir sayfa ile projeye ekledim. RendenBody
 @RenderBody()
alanından bu sayfayı açtım. Bu alandan linke tıkladığımda istediğim sonucu alabiliyorum. Ama kullanıcıyı biraz dolandırmış oluyorum. Hemde kullandığım sayfayı karartan form alanın bir anlamı kalmıyor gibi. Bunu tamplate üzerinden uygulamak istiyorum.
Yardımlarınız için teşekkürler. Emeğinizi önemsiyorum. Selamlar.

yorum

Admin

26 Aralık 2015 00:25


ya aslında düşününce hata z-index değerinde olmayabilir. ben de bir çözüm getiremedim bu şekilde açıkçası. açılan pencerenin z-index değerini 2147483647 olarak deneyin eğer yine olmuyorsa başka bir sorun var demektir.

yorum

Ahmet Coder

17 Ocak 2016 19:43


Kardeşim emeğine sağlık teşekkür ederim