was successfully added to your cart.
Ne Yapacağız?

Bu örnekte kısaca ne yapacağımızdan bahsedecek olursam, öncelikle Front&End tarafında Bootstrap kullanarak bir form oluşturacağız. Oluşturduğumuz bu formla Jquery yardımıyla Ajax post methodunu kullanarak , sayfayı herhangi bir yere yönlendirmeden Post edicez. Back&End tarafında da Laravel Framework ünü kullarak Post verisini kontrol edip gelen veriye göre bir Json Response ile karşılık vereceğiz, gelen bu Response’a göre de ne yapacağımıza bakıcaz artık …

İzlenecek Yollar

Form

Öncelikle Html tarafında veriyi post edeceğimiz bir Login formu oluşturacağız.

Laravel Validator

Laravel'le gelen bu post verisini Validator ile kontrol edip Json Response edeceğiz

Jquery Post

Bu formun submit aşamasında Jquery Post methodunu kullanmasını sağlayacağız.

Response Json

Gelen Response'a göre Jquery tarafında ne gibi yol izleyeceğini belirleyeceğiz.

Adım 1 - Html Formun Oluşturulması

Öncelikle Post işlemini yapacağımız formu oluşturmamız gerekiyor. Ben Front&End tarafında Bootstrap kullandığım için onun tarzında bir Login Formu oluşturacağım, sizde kendi formunuzu oluşturabilirsiniz. Bu örneğimizi etkileyecek herhangi bir durum oluşturmayacaktır.

Diğer bir konu ise Laravel Blade Template kullandığım için {{csrf_field()}} kısmını anlamayabilirsiniz. Bu kısım bu forma özel bir token oluşturmaktadır.

Normal HTML formun yanında benim kodlamalarımda kullandığım bir method olan , formun içine birde buttonLoader ekliyorum. Form post işlemi esnasında Button u hide edip, bir cevap dönene kadar bu Loader ı gösteriyorum.

Diğer taraftan bir #form_back id’li bir div olusturuyorum ve eğer bir hata alırsam gelen hatayı da bu div in içine basıyorum.

Html
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-4 offset-lg-4">
            <form name="loginForm" id="loginForm" action="{{url('login')}}" method="post">
                {{csrf_field()}}
                <legend>Üye Girişi</legend>
                <div class="form-group">
                    <label for="usernameField">Kullanıcı Adı</label>
                    <input type="text" class="form-control" name="username" id="usernameField" placeholder="Kullanıcı Adı">
                </div>
                <div class="form-group">
                    <label for="passwordField">Şifre</label>
                    <input type="password" class="form-control" name="password" id="passwordField" placeholder="Şifre">
                </div>
                <div class="buttonLoader"></div>
                <button type="submit" class="btn btn-primary">Giriş Yap</button>
            </form>
        </div>
    </div>
</div>
<div id="form_back"></div>

Css’te de buttonLoader ımı default olarak hide (display:none) ediyorum ve ufak bir Loader effecti ekliyorum içine.
Hataları göstereceğim #form_back divini de sağ üst köşeye sabitliyorum ve onu da default hide olarak getiriyorum

Scss
.buttonLoader {
  display:none;
  &:after {
    content:'';
    display:block;
    border: 5px solid #f3f3f3; /* Light grey */
    border-top: 5px solid #1c7430; /* Blue */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin:0 auto;
    animation: spin 0.5s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
}

#form_back {
  position:fixed;
  width:300px;
  right:15px;
  top:15px;
  background:#c00;
  color:#fff;
  padding:15px;
  @include border-radius(15px);
  display:none;
  &.view {
    display:block;
  }
}

Adım 2 - Jquery Ajax Post

Şimdi öncelikle sayfadaki bütün formların AJAX ile gönderilmesini sağlayacak olan Javascript fonksiyonunu yazmamız gerekiyor. Bu noktada Jquery ile sayfa yüklendikten sonra , sayfadaki bütün formların Submit edilme durumunu kontrol etmemiz gerekiyor.
$(‘form’).on(‘submit’,function(){}) )
Bu kontrol eşiğinde Form submit edildiği anda çalışması gereken kodları bu fonksiyonun içine yazacağız.

Yapacağımız kontroller
– Form düzgün bir şekilde gönderildi mi
– Gönderilen sayfada herhangi bir Back&End hatası var mı
– Dönen cevap olumluysa yönlendirme yapılması
– Dönen cevap olumsuzsa hata mesajlarının ekrana basılması.

Javascript
$(document).ready(function(){
    $('form').on('submit',function(){
        // Submit edilen formun action , ve id attr değerlerini alıyoruz.
        $url = $(this).attr('action');
        $form = $(this).attr('id');
        // Formun içindeki Loader'ı ve button u seçiyoruz. 
        $loader = $(this).find('.buttonLoader');
        $button = $(this).find('button');
        // Form submit edildiği için Loader'ı gösterip Submit butonumuzu gizliyoruz.
        $loader.show();
        $button.hide();
        $.ajax({
            type: 'POST',
            url: $url,
            data: $('#' + $form).serialize(),
            error: function (event, jqxhr, settings, thrownError) {
                // Back&End tarafında veya Post edilme esnasında bir sorun yaşanırsa ekrana hatayı basıyoruz ve butonu tekrar aktif hale getiriyoruz.
                $('#form_back').html('Bir hata oluştu daha sonra tekrar deneyin').addClass('alert').addClass('view');
                setTimeout(function () {
                    $('#form_back').removeClass('view');
                    $loader.hide();
                    $button.show();
                    $('#form_back').removeClass('view').removeClass('alert');
                }, 3000);
            },
            success: function (data) {
                if(data.success) {
                    // Dönen Json da success değişkeni true ise sayfa yönlendirmesini ,yine Json dan gelen redirect Url ine yapıyoruz.
                    location.href=data.redirect;
                } else {
                    // Dönen Json da success değeri true değil ise , tekrar Submit butonumuzu gösteriyoruz.
                    $loader.hide();
                    $button.show();
                    // Birden fazla hata dönebileceği için , Örneğin : ['Kullanıcı adını giriniz', 'Şifrenizi giriniz'] bu hatalari tek bir değişkene aktarıyoruz.
                    $errors=data.errors;
                    $error_text='';
                    for (var key in $errors) {
                        $error_text=$error_text+$errors[key]+'<br/>';
                    }
                    // Hataları ekrana basıp 3 saniye sonra hata ekranını kaldırıyoruz.
                    $('#form_back').html($error_text).addClass('alert').addClass('view');
                    setTimeout(function(){
                        $('#form_back').removeClass('view');
                        $('#form_back').removeClass('view').removeClass('alert');
                    },3000);
                }
            }
        });
        return false;
    });
});

Author developertr

More posts by developertr

Leave a Reply