.NET Core Login Sayfası Oluşturma ve Loading Kullanımı

Merhaba arkadaşlar, bu yazımda sizlere .NET Core Login Sayfası Oluşturma ve Loading Kullanımı konusundan bahsedeceğim.

Giriş sayfaları, bir web uygulamasının önemli bileşenlerindendir ve kullanıcıların güvenli bir şekilde sisteme erişmesini sağlar. Bu blog yazısında, .NET Core kullanarak bir login sayfası oluşturmayı ve giriş işlemi sırasında loading spinner’ı göstermeyi sağlayacağız.

Adım 1: Login Sayfasını Oluşturma

İlk adım olarak, HTML formunu kullanarak login sayfasını oluşturacağız. Bu formda kullanıcı adı ve şifre gibi giriş alanları olacak. Formu aşağıdaki gibi düzenleyebilirsiniz:

<form method="post" asp-action="Index" asp-controller="Login" id="loginForm">
	<input type="text" name="username" placeholder="Kullanıcı Adı" required />
	<input type="password" name="password" placeholder="Şifre" required />
    <button type="submit" id="loginButton">Giriş Yap</button>
</form>

Adım 2: Login İşlemini Gerçekleştirme ve Result Nesnesi Oluşturma

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Index(string username, string password)
{
    Result result = new Result();
    Thread.Sleep(2000);
    if (string.IsNullOrEmpty(username) || string.IsNullOrEmpty(password))
    {
        result.Error = "BadRequest";
        result.Message = "Kullanıcı Adı ve Şifre boş geçilemez!";
        result.Success = false;
        return Ok(new { result });
    }

    if (username == "test" && password == "1234")
    {
        result.Error = "";
        result.Message = "Success";
        result.Success = true;
        result.Data = Guid.NewGuid().ToString();
        return Ok(new { result });
    }

    result.Error = "Unauthorized";
    result.Message = "Kullanıcı adı veya şifre yanlış!";
    result.Success = false;
    return Ok(new { result });
}

Thread.Sleep metodunu kullanarak 2 saniye işlemi bekletmiş olduk. Bu sayede loading spinner için görünme işlemini test etmiş oluyoruz.

Result Nesnesi:

public class Result
{
   public bool Success { get; set; }
   public string Error { get; set; }
   public string Message { get; set; }
   public object Data { get; set; }
}

Adım 3: Loading Spinner’ı Eklemek

Son olarak, loading spinner’ı ekleyeceğiz ve mesajları da göstermek için bir adet div eklemesi yapacağız. Bu, kullanıcının giriş yap butonuna tıkladığında spinner gösterilecek ve başarılı başarısız durumları için bir mesaj yazdırılacak. İşlem tamamlandığında spinner gizlenecektir. Bunu yapmak için aşağıdaki adımları izleyebilirsiniz:

<div id="loadingSpinner" style="display: none;">
    <div class="spinner-border text-success" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>

<div id="loginResult"> </div>

Adım 4: Login İşlemini Gerçekleştirme

Login işlemi için Jquery ile bir ajax request isteği gerçekleştireceğiz. Bu işlemi sağlamak için de bir script yazıyoruz.

<script>
    $(document).ready(function () {
        $('#loginForm').on('submit', function (event) {
            event.preventDefault(); // Form submit olayını engelle

            var loginButton = $('#loginButton');
            var loadingSpinner = $('#loadingSpinner');
            var loginResult = $('#loginResult');

            loginButton.prop('disabled', true); 
            loadingSpinner.show(); 

            $.ajax({
                url: $(this).attr('action'),
                method: $(this).attr('method'),
                data: $(this).serialize(),
                success: function (response) {
                    var result = response.result.success;
                    
                    if(result){
                        console.log("Success result");
                        var token = response.result.data;
                        loginResult.html(token);
                        loginResult.css({ 'color': 'green' });
                        return;
                    }

                    loginResult.css({ 'color': 'red'});
                    loginResult.html(response.result.message);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    loginResult.css({ 'color': 'red'});
                    loginResult.html(jqXHR.responseText);
                },
                complete: function () {
                    loginButton.prop('disabled', false);
                    loadingSpinner.hide();
                }
            });
        });
    });
</script>

Yukarıdaki gibi scriptimizi de yazdığımızda login işlemi için LoginController’da bulunan Index(POST) metodumuza istek atmış oluyoruz ve gerekli kontrolleri sağlıyoruz. Kontrollerden sonra başarılı ve başarısız durumları için geriye bir Result nesnesi dönüyoruz. Bu işlemi de script içerisinde kontrol ederek işlemlerimizi gerçekleştiriyoruz.

Bu blog yazısında, .NET Core kullanarak bir login sayfası oluşturmayı ve giriş işlemi sırasında loading spinner’ı göstermeyi sağlamış olduk. Kullanıcılar, giriş yap butonuna tıkladığında spinner’ı görerek işlemin devam ettiğini anlayacaklar. Bu, daha iyi bir kullanıcı deneyimi sağlar ve uygulamamızın daha profesyonel görünmesini sağlar.

Projenin örneğine Github üzerinden indirip inceleyebilirsiniz.

https://github.com/alicancevik/NetCoreLoginWithLoadingSample

Umarım faydalı olur.

Bir sonraki yazıda görüşmek üzere…