DevExtreme Basit Login Uygulaması - TheCodeProgram
DevExtreme Basit Login Uygulaması - Thekodprogram

Herkese Merhaba. bu yazıya kadar DevExtreme’den ve bazı nesnelerden bahsettik. Şimdi artık devextreme ile ihtiyacımız olacak bir yapı yapacağız.

Bu uygulama ise basit bir login uygulaması oluşturacağız. Burada veritabanı kullanmayacağız ve değerlerimiz statik olacak.

Şunuda belirtmek isterim ki DevExtreme’in direk olarak kendinden bir veritaanı desteği yok. DevExtreme ile veritabanı kullanmak için ya web servisler aracılığıyla online veritabanları üzerinde işlemler yapabilirsiniz veya localde olsun istiyorsanız eğer bunun içinde SQLite kullanacağız ileride.

Şimdi Nasıl yapacağımızdan biraz bahsedelim…

Öncelikle sizlere normal login uygulamalarının nasıl çalıştığından bahsedeyim…

Sistemin herhangi biryerinde tuttuğu kullanıcı adı ve şifre bilgilerini sizin girdiğiniz ilgilerle karşılaştırıp eğer doğru ise yapılmak istenin izin veren uygulamalardır.

Mesela biz uygulamamızı yaptık ve programın içine yönetim paneli koymak istiyoruz ve urayıda şifreleyip istenmeyen girişleri engellemek istiyoruz. İşte bu tarz yerlerde kullanıcı adı ve şifre kısmı gerekmektedir.

Şimdi Uygulamamıza geçelim :

İlk başta uygulama ekranımıza bir tane buton iki tane textbox atalım kullanıcı adı ve şifremizi buraya gireceğiz…

Aşağıdaki reklamda örnek bir login giriş ekranı

Devextreme Örnek Login Ekranı - Thekodprogram

Şimdi bu ekranda gördüğümüz üzere kullanıcı adı ve şifre girip giriş yap butonuna tıklayıp bize kontrolü yaptırıp yeni bir sayfa açmasını isteyeceğiz.

Biz kontrol yapacağımız verileri bir dizide tutacağız ve kontrolüde buradan yapacağız.

Şimdi kodlama kısmına geçelim.

Butonun onClick fonksiyonuna tanımladığımız fonksiyonu beraberce yazalım…

Bu işlemi yapailmemiz için ilk olarak bizim textboxlardaki değerleri almamız gerekmektedir. Sanırım şimdi document.GetElementById(“textBox”).value fonksiyonunu kullanmışsınızdır ama doğru değeri alamamış olabilirsiniz. Şimdi bu değerleri nasıl alacağımızı öğrenelim…

Aşağıdaki kod home.dxview nesnemizin içeriğindeki kodları


Aşağıdaki kod ise home.js dosyasının içeriği

Burada bizim işimizi gören fonksiyon aşağıdaki fonksiyondur

Burda kullandığımız yapı JQuery kodlarıdır. JQuery ile o nesnenin içerisindeki değerleri alıyoruz.

Buraya kadar sıkıntı yoksa şimdi username ve password kontrollerini yapalım.

Öncelikle burda basit bir dizinin içindeki değerlerden kontrol yaptırdığımız için veritabanı konusuna girmeyeceğim. Veritabanı devextreme ile biraz karışık bir konu ona daha ilerilerde değineceğiz.

Kontrol yapmak için yazdığım kodlar aşağıdadır


Burda gördüğümüz gibi bir for döngüsü ile o kullanıcının username ve password bilgilerini kontrol ettirdik ve doğruysa bize başarılı diye dönüt versin dedik.

 

Sonuç ise aşağıda

Devextreme Login Sonucu - TheKodProgram
Bunu isterseniz apk oluşturup telefonunuzda çalıştırın aynı sonucu alacaksanız.

Hazırladığım uygulamanın kaynak kodlarını incelemek isterseniz link aşağıdadır. Buyrun indirin

BasitLoginUygulamasi

İyi çalışmalar dilerim – Takipte Kalın

Burak Hamdi Tufan

LEAVE A REPLY

Please enter your comment!
Please enter your name here