JSON - Bölüm3
JSON serimizin ilk iki bölümünde, JSON'lar nedir, ne işe yarar, nasıl işlenir gibi konulara değinerek, basit JSON API uygulamaları tasarlamıştık. Bu bölümümüzde, önceki tasarladığımız uygulamalardan biraz daha karışık yapıda olan, İngilizce - Türkçe sözlük uygulaması tasarlayacağız. Elbetteki verilerimiz JSON formatında API hizmeti veren bir siteden gelecek.
JSON'larla ilgili önceki bölümlere bu linklerden ulaşabilirsiniz. Bölüm 1 Bölüm 2
Tasarlayacağımız İngilizce - Türkçe sözlük için çevir.com sitesinin API'sinden yararlanacağız. Bu uygulamanın daha önce tasarladığımız uygulamalardan farkı, göndereceğimiz sorgu kullanıcının istekleri doğrultusunda oluşturulacak. İlk olarak linke tıklayıp API sayfasını incelediyseniz, sorgumuzun nasıl oluşturulması gerektiği gayet basit bir şekilde açıklanmış. Sorguda dikkat etmemiz gereken tek şey q= ve l= değişkenlerini kullanıcının tercihine göre oluşturmak. Bunun için HTML yapısında dil seçimi için bir "select" elemanı, aranacak kelimelerin yazılması için bir "input" elemanı ve sonuçları göstermek için bir liste elemanına ihtiyacımız var. Dil seçimi ile uğraşmak istemezseniz q=all seçeneğini kullanabilirsiniz. Daha kesin sonuçlar için biz bu seçimi kullanıcıya bırakalım.
<select name="" id="sozluk-dil-secimi">
<option value="tr">Türkçe</option>
<option value="en">İngilizce</option>
</select>
<input type="search" name="" id="arama-alani" placeholder="Kelime yazınız" />
<div id="sonuclar"></div>
Elemanlar için CSS stil yapılarımızı oluşturalım.
#sozluk-dil-secimi, #arama-alani{
padding: 15px;
display: inline-block;
padding: 10px;
border:1px solid #ccc;
}
#sozluk-dil-secimi{width: 100px;}
#sonuclar>ul{
background:#fff;
list-style: none;
}
#sonuclar>ul>li{
border:1px solid #ccc;
padding: 10px;
line-height: 25px;
}
#sonuclar>ul>li>span{color:red;}
Son olarak JQuery ile AJAX metodumuzu yazalım ve sorgumuzu göndererek, gelen cevabı işleyelim. Bunu yapabilmek için öncelikle nasıl bir cevabın geldiğini görmemiz gerekiyor. Buradan gelen cevabı ve tanımlı değişkenleri görbilirsiniz. AJAX yöntemindeki "success" fonksiyonunu, cevaptaki değişkenlere ve cevabın yapısına göre oluşturacağız.
function veri_al(){
if ($("#arama-alani").val()!=""){
$("#sonuclar").html('<ul><li>Yükleniyor...</li></ul>');
var ara = encodeURI($("#arama-alani").val());
var liste='',i=0;
$.ajax({
url:"http://cevir.ws/v1?q="+ara+"&m=25&p=exact&l="+$("#sozluk-dil-secimi").val(),
dataType:"json",
type:"get",
success:function(veri){
if (veri.control.results!=0){
$.each(veri.word,function(){
liste+='<li><span>'+veri.word[i].title+'</span> : '+veri.word[i].desc+'</li>';
i++;
});
$("#sonuclar").html('<ul>'+liste+'</ul>');
}else{
$("#sonuclar").html('<ul><li>Sonuç Yok...</li></ul>');
}
},
error:function(){
$("#sonuclar").html('<ul><li>Bağlantı Hatası...</li></ul>');
}
});
}else{
$("#sonuclar").html('<ul><li>Aramak istediğiniz kelimeyi yazınız...</li></ul>');
}
}
$("#arama-alani").on("keyup",function(e){
if (e.keyCode == 13){
veri_al();
}
});
Kodlarımızı açıklamaya başlayım. İlk olarak yapının çok karışık olmaması için veri_al isimli bir fonsiyon oluşturduk. Fonksiyonumuz ilk olarak arama yapılan alanı kontrol ediyor. Eğer fonksiyon çalıştığında arama alanı boş ise kullanıcıya bunu bildiriyoruz. Aksi takdirde sorguda göndereceğimiz q= değeri boş olacağından, gelen cevap, sorgunun hatalı olduğunu söyleyecektir. Fonksiyon çalıştığında arama alanına bir şeyler yazılmışsa, ilk olarak "sonuclar" katmanında yükleniyor yazısını kullanıcıya gösteriyoruz. Daha sonra arama alanına yazılan bilgileri alıp URL formatına dönüştürüyoruz. Arama alanına yazılan bilgiler sorguda gönderileceğinden boşluk veya Türkçe karakterler gibi link yapısına uymayan elemanları "encodeURI()" fonksiyonu ile uygun formata dönüştürüyoruz. "success" fonksiyonunda kullanacağımız değişkenleri de (liste ve i değişkenleri) tanımladıktan sonra AJAX metodumuz çalışmaya hazır. AJAX metodunda sorgumuzu göndereceğimiz adresi yazıyoruz. Burada kullanıcının aramak istediği kelimeler ve sözlük seçimi sorguya ekleniyor. Cevap almada bir sorun oluşmuşsa, "error" fonksiyonuna yazdığımız komutlar çalışıyor ve kullanıcıya "bağlantı hatası" şeklinde bir uyarı gösteriyoruz. Herşey yolunda gitmiş ve bir cevap gelmişse "success" fonksiyonu çalışıyor. Burada sonuçlarımızı derleyip, uygun şekilde kullanıcıya gösteriyoruz. Daha önce de dediğim gibi, gönderdiğimiz sorgunun cevabı bizim için önemli. Daha önce bahsettiğim örnek cevabı incelediyseniz, gelen cevapta iki önemli değişkeni "success" fonksiyonunda kullanacağız. Bunlardan ilki "result" değişkeni diğeri ise "word" dizisi. "result" değişkeni, kaç sonucun bulunduğunu gösteriyor. Eğer "result" değeri sıfır ise hiçbir sonuç bulunmamış anlamına gelir ve bu durumda kullanıcıya "sonuç yok" diye bir uyarı gösteriyoruz. Eğer bu değer sıfırdan farklı ise, sonuçlar "word" dizisinin içinde "desc" değişkenine atanmış durumda bize iletiliyor. "each" döngüsü ile "word" dizisinin sayısı kadar döngü oluşturuyoruz. Böylece bütün sonuçları elde ediyoruz. Elde ettiğimiz sonuçları daha önce tanımladığımız "liste" isimli değişkene HTML kodları oluşturarak ekliyoruz. Döngü bittiğinde bütün sonuçlar "sonuclar" isimli katmana ekleniyor ve kullanıcıya gösteriliyor.
Son olarak HTML yapısına baktığımızda bir butonumuz yok. Kullanıcı aramak istediği kelimeleri yazıp "enter" tuşuna basınca aramanın gerçekleşmesini istiyorum. O yüzden arama alını için "keyup" fonksiyonu oluşturduk (enter tuşunun kodu 13'tür). Kullanıcı enter tuşuna basarsa veri_al isimli fonksiyonumuz çalışıyor. Örnek uygulamamızı aşağıda inceleyebilrisiniz. Bu arada böyle bir hizmeti bizlere sunduğu için çevir.com sitesine de teşekkür etmek isterim.
Sihirli Fasulyeler Sözlük UygulamasıGüncelleme
API hizmeti aldığımız site yayını durduğu için örnek çalışmamaktadır
JSON'larla ilgili sonraki bölümde anlık arama motoru örneği tasarlayacağız.
Sonraki bölüme buradan ulaşabilirsiniz.
- Yayın Süresi : 2636 Gün
- Konu Sayısı : 277 Bilim Konuları : 118 Teknoloji Konuları : 42 Web-Tasarım Konuları : 42 İlginçler Konuları : 63 Gezi Konuları : 12 En Popüler : Sonsuz İşlemleri 246123 Kere En Çok Yorum Alan : Logaritma Nedir, Ne İşe Yarar, Gerçek Hayatta Nerelerde Kullanılır? 19 Kere En Çok Değerlendirilen : Napier'in Kemikleri (Matematik) 151 Kere
Satrançta Piyonun Geçerken Alması Kuralı (En Passant)
En passant kuralı nedir, ne zaman uygulanır...
Işık Hızında Bağıl Hız
Işık hızında giden cisimler için bağıl hız hesaplamaları...
Newton Karantinada Neler Yaptı?
Newtonun karantina günleri ve icatları...
Çamaşır Suyu Nedir? Nasıl Temizler?
Çamaşır suyunun yapısı, kullanım alanları ve dikkat edilmesi gerekenler...
Dünyanın Yaşını Nasıl Biliyoruz?
Dünyanın yaşını hesaplama yöntemleri...
Salgın Hastalık Dereceleri : Pandemik, Epidemik, Endemik, Sporadik
Pandemik, Epidemik, Endemik, Sporadik Nedir?
Kahve Günlükleri : Kahve Çekirdeği Kavurma Dereceleri
Hafif, orta, orta-koyu, koyu kavrulmuş kahve çekirdeklerinin özellikleri ve farkları...
Kahve Günlükleri : Kahve Demleme Yöntemleri
Kahve demleme yöntemleri ve farkları...
Kahve Günlükleri : Kahve Çeşitleri ve Ölçüleri
Popüler kahve çeşitleri ve ölçüleri...
Kahve Günlükleri : Arabica ve Robusta
Arabica ve Robusta kahve çekirdekleri ve farkları...
Sayıların Sınıflandırılması (Matematik)
Matematikte sayıların sınıflandırılması : Kompleks, Sanal, Gerçek, Doğal, Rasyonel, İrrasyonel...
Websiteniz İçin Bedava Güvenlik Sertifikası (SSL Sertifikası)
Tamamen bedava güvenlik sertifikası nasıl elde edilir, nasıl yüklenir?
Wi-Fi Şifresini Görme (Windows 7 - 10)
Programsız, kodsuz wifi şifresini görme yöntemi.
Kolay Ezberleme Yöntemi : Anımsatıcılar
Kolay ezberleme yöntemlerinden anımsatıcılar : Mnemotekni
Tarayıcılarda Ön Bellek İşlemleri (Normal Yükleme - Tam Yükleme - Ön Belleği Boşaltma)
Tarayıcılarda normal yükleme ve tam yükleme ne demektir, nasıl yapılır?
Takip, Reaksiyon, Fren ve Durma Mesafesi
Reaksiyon, fren, durma ve takip mesafesi nasıl hesaplanır, bilimsel detaylar.
Bilgisayarda Müzik Nasıl Yapılır?
Sadece bilgisayar programları kullanarak gerçekçi müzik nasıl oluşturulur?
Beden Kitle İndeksi Hesaplama ve Değerlendirme
Bu uygulama ile Vücut Kitle İndeksinizi hesaplayabilir ve sonucu değerlendirebilirsiniz.
Hidrojen Peroksit (H2O2) ve Özellikleri
Hidrojen peroksit nedir, sağlık açısından ne gibi etkileri vardır?
Photoshop'ta Ortalama İşlemleri
Photoshop'ta ortalama işlemleri nasıl yapılır?
Bu kısımdan sitemizdeki gelişmelerden haberdar olabilirsiniz.
- Abonelik Sistemi kaldırıldı. 11.03.2020
- Arama Motoru Google Özel Arama olarak değiştirildi. 15.10.2019
- Yıllık sunucu bakımı tamamlandı. 04.10.2019
- Konulara kaynaklar eklendi. 10.07.2019
- SSL sertifikası eklendi. 31.05.2019
Gitar çalmayı öğrenmek, yeteneğinizi geliştirmek, popüler tab ve akorlar için gitaregitim.net sitesini ziyaret etmeyi unutmayın.