• Anasayfa
  • Hakkımızda
  • Etkinlikler
  • Destek Verin
  • Site Haritası
  • Giriş Yap
  • Üye Ol
  • Facebook
  • Twitter
  • RSS
Yazılım Dilleri
  • Soru - Cevap
  • EĞİTİM SETİ
  • KATEGORİ
  • DUYURU
  • TEKNOLOJİ HABERLERİ

Son Sorular

  • 23.04.2016 00:55:33C programlama 2 oyun
  • 20.04.2016 16:34:41Local Database
  • 15.04.2016 14:26:15Fatura kayıt işlemi
  • 21.03.2016 01:55:30C# problem

Popüler Sorular

  • 27.05.2012 05:49:50Asp.Net ile Date time alana veri ekleyemiiyorum ?
  • 2.04.2012 00:45:18.exe uzantılı dosya için dijital imza nerde nasıl alınır.
  • 12.05.2012 08:44:49Acil Yardım
  • 27.05.2012 13:46:51veri tabanı bağlantısı
  • .Net Framework
  • 8085 Assembly
  • Active Directory
  • ADO.NET
  • Android
  • Apple IOS
  • Arduino
  • ASP.NET
  • ASP.NET MVC
  • Blackberry
  • C#.Net
  • C++
  • CCG Framework
  • CISCO
  • CSS
  • Diğer
  • Dreamweaver
  • Entity Framework
  • Exchange Server
  • Gömülü Sistemler
  • GSM Programlama
  • Güncel
  • Güvenlik
  • HTML5
  • Java
  • Javascript / JQuery
  • Jira
  • Kariyer ve İş Yaşamı
  • LINQ
  • LibreOffice
  • Linux
  • Matlab
  • Microsoft Dynamics CRM
  • Mobil Uygulama Geliştirme
  • MySQL
  • NoSQL
  • Oracle
  • OWIN
  • PFSense
  • PHP
  • Powershell
  • Python
  • Sanallastirma
  • SAP-ABAP
  • SCOM 2012
  • SEO
  • Sharepoint 2010
  • Sharepoint 2013
  • Silverlight
  • Sistem Analiz ve Tasarımı
  • SQL Server
  • Symantec
  • TFS
  • T-SQL
  • Ubuntu
  • VB.NET
  • Veritabanı Yönetim Sistemleri
  • Visual Studio
  • VMware
  • WCF
  • Web Hosting
  • Windows 8
  • Windows Azure
  • Windows Phone 7.1
  • Windows Phone 8
  • Windows Server
  • Wordpress
  • WPF
  • Xamarin
  • XNA
  • Yazılım Mühendisliği
  • Yöneylem Araştırması
  • ASP.NET MVC
  • Entity Framework
  • Javascript / JQuery
  • LINQ
  • PHP

Son Duyurular

IPhone 6 ve IPhone 6 Plus Teknik Özellikleri ve Fiyatı

IPhone 6 ve IPhone 6 Plus Teknik Özellikleri ve Fiyatı

DELL'in Yeni Projesi: USB Bilgisayar (Project Ophelia)

DELL'in Yeni Projesi: USB Bilgisayar (Project Ophelia)

Windows Phone Youtube Uygulaması Google ve Microsoft ile Yeniden Yapılıyor

Windows Phone Youtube Uygulaması Google ve Microsoft ile Yeniden Yapılıyor

Android ve Apple IOS Telefonlar için Blackberry Messenger (BBM)

Android ve Apple IOS Telefonlar için Blackberry Messenger (BBM)

Nokia Lumia 925 Teknik Özellikleri, Lumia 928 ve 920 ile Karşılaştırması

Nokia Lumia 925 Teknik Özellikleri, Lumia 928 ve 920 ile Karşılaştırması

LG Optimus G Pro Özellikleri ve Gözle Video Oynatma Teknolojisi

LG Optimus G Pro Özellikleri ve Gözle Video Oynatma Teknolojisi

Knockout JS API ile Spring REST Entegrasyonu

Herkese merhaba arkadaşlar bu yazıda sizlerle birlikte Knockout JS kullanıp, Spring REST servislerine bağlanmayı deneyeceğiz. Knockout JS ile Spring REST servislerinden veri listesi alacağız.

12.11.2014

Yazar: Batuhan Düzgün (Google+)

Kategori: Javascript / JQuery

3947

Herkese merhaba arkadaşlar bu yazıda sizlerle birlikte Knockout JS kullanıp, Spring REST servislerine bağlanmayı deneyeceğiz. Knockout JS ile Spring REST servislerinden veri listesi alacağız.

 

Uygulama Özeti

Yapılacak olan uygulamada REST servisleri aracılığıyla otomobil listesi web ortamında dışarı açılır. Knockout JS API ile birlikte bu servislere erişim sağlanıp

bir tablo yapısı halinde sayfa üzerinde gösterilecektir.

 

Web Projesinin Oluşturulması

Maven  tabanlı dinamik bir web projesi oluşturulur. Ardından ilk işlem olarak servisin ve veri modeline ait sınıfların bulunacağı paketler oluşturulur.

 

“pom.xml”  Bağımlılıkların Eklenmesi

Maven projesine kullanılması gereken paketler bağımlılık olarak eklenir. Eklenecek olan paketler sunucu taraflı kodları geliştirmek için gereklidir. Spring REST servisleri ve JSON dönüşüm işlemleri için Jackson JSON API ile ilgili bağımlılıklar projeye eklenecektir.

<dependencies>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>4.0.5.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>4.0.5.RELEASE</version>
    </dependency>
    <dependency>
<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-databind</artifactId>
	<version>2.4.0-rc3</version>
    </dependency>
    <dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-core</artifactId>
	<version>2.4.0-rc3</version>
     </dependency>
     <dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-annotations</artifactId>
	<version>2.4.0-rc3</version>
     </dependency>
  </dependencies>

 

Spring Servlet Ayarlarının Yapılandırılması

Spring ile ilgili gerekli olan Servlet tanımlamaları web.xml içinde belirtilir. Spring Framework’un kullandığı Servlet sınıfı olan ‘DispatcherServlet’  tanımlası ‘web.xml’ içinde tanımlanır. Bunun yanında ‘DispatcherServlet’  sınıfı gerekli ayarların tanımlandığı bir XML dosyasına ihtiyaç duyar. Bu dosyasının ismi ‘dispatcher-servlet.xml’ şeklindedir. Aynı zamanda Spring Bean sınıflarının ve birçok ayarın tanımlandığı ‘applicationContext.xml’ dosyasıda tanımlanmış ve oluşturulmuş olmalıdır.

 

Otomobil (Car) Veri Modeli Sınıfı

Bu sınıfta otomobil veri modelinde yer alacak değişkenler ve fonksiyonlar tanımlanır. Basit bir Java sınıfıdır. 

 

Spring REST Servisi Sınıfı

“Car” tipinde hazırlanan veri listesi Spring REST servisleri sayesinde dışarıdan erişilebilir hale gelecektir. Bu servisler sayesinde iş katmanı tamamen arayüz teknolojilerden bağımsızlık kazanmış olacaktır. Örneğin, tüm iş katmanı web servisleri şeklinde dışarıdan erişime açıldığında JSP, JSF, PHP, ASP gibi web teknolojileri iş katmanına erişim için web servislerini kullanacaktır. Böylece web teknolojisini değiştirme ihtiyacında veya herhangi bir bakım işleminde inanılmaz bir esneklik ve modülerlik sağlamış olacaktır.

Böylece, yazılım geliştirme sürecinde ve ürünün ortaya çıkışında iş katmanı ile web teknolojilerinin iç içe geçmiş yüksek bir bağımlılık kazanmasından kurtulmuş olacaktır.

Sınıfın en üst kısmında ‘RequestMapping’ etiketi ile REST servisinin ismi verilir. Ardından sınıf içindeki her fonksiyon servisin bir fonksiyonu olarak dışarı açılır. Yine ‘RequestMapping’ etiketi ile bu işlem yapılır.  Bu etiket içinde hangi HTTP erişim yöntemi kullanılacağı belirtilir. Bu örnekte HTTP GET kullanılmıştır. Ardından, ‘ResponseBody’ etiketi ile REST servisinin ne tipte bir nesne döndüreceği belirtilir. 

 

JQuery ve Knockout JS API Entegrasyonları

Web servisleri ile iletişim kurabilmek için AJAX çağrıları yapmak gerekecektir. Bu nedenle JQuery API projeye entegre edilir. Arayüz ve ModelView yönetimi ve iletişimi için Knockout API projeye entegre edilir.

 

JQuery ile AJAX Çağrı Fonksiyonu

AJAX çağrıları ile HTTP istekleri oluşturulup REST servislere erişim sağlanacaktır. Javascript tarafında bu işi üstlenen ve tüm HTTP GET isteklerini iletebilen modüler bir Javascript fonksiyonu hazırlanır. Bu fonksiyon HTTP isteğine ait özellikleri tutan bir nesneyi parametre olarak alır. Bu parametre nesnesinde HTTP isteği sonucu ‘success’ (başarılı) ve ‘error’ (başarısız) callback fonksiyonları ve hangi servise erişim sağlanmak istediğine dair bilgiler yer alacaktır.

function doGet(request) {
	
	var requestObj = {
        url: "http://localhost:8088/KoSpringRest/" + request.path,
        contentType: "application/json; charset=utf-8",
        type: "GET",
        success: request.success,
        error: request.error
	}
	
	$.ajax(requestObj);
}

 

Otomobil (Car) için ModelView Yapısı

Webservisinden dönecek olan otomobil veri tipiyle uyumlu olan bir Javascript fonksiyonu hazırlanır. Bu Javascript fonksiyonunda yer alan değişken isimleri Java sınıfı olan ‘Car’ ile birebir aynı olmalıdır. Çünkü, yapılacak JSON dönüşüm işlemlerinde bu değişken isimleri temel alınacaktır.  Ayrıca, Javascript fonksiyonundaki değişkenler Knockout  gözlemcileri olan ‘observable’ tipinde olacaktır.

function Car(brand, color, year) {
	
	var self = this;
	self.brand = ko.observable(brand);
	self.color = ko.observable(color);
	self.year = ko.observable(year);
}

 

Otomobil Listesi (CarList) için ModelView Yapısı

Tüm otomobil listesinin yer aldığı Knockout ModelView yapısıdır. Bu yapı içinde otomobil listesi ve otomobil listesini yüklemek için gerekli fonksiyon yer alır. Bu fonksiyon HTTP GET AJAX çağrısı yapıp otomobil listesini REST servisten aldığı veri listesiyle doldurur.

function CarList() {
	
	var self = this;
	self.cars = ko.observableArray();
	self.load = function() {
		doGet(getRequest());
	};
	
	// Helper fonksiyonu
	function getRequest() {
		return {
			path : "/appservices/cars",
			success : function(response) {
				ko.utils.arrayForEach(response, function(item) {
					var car = new Car(item.brand, item.color, item.productYear);
					self.cars.push(car);
			    });
			},
			error : function(response) {
				alert("Sunucu'dan veri alinamadi!");
			}
		};
	}
}

 

‘load’ isimli Javascript fonksiyonu veri listesini doldurmakla sorumludur. ‘getRequest’ fonksiyonu ise yapılacak HTTP isteği için gerekli bilgilerin ve fonksiyonların (‘succes’ ve ‘error’ fonksiyonları) yer aldığı Javascript nesnesi döndürür. Bu oluşturulan nesne AJAX çağrısı yapan ‘doGet’ isimli fonksiyona iletilir.

Başarılı bir çağrımdan sonra otomobil listesi ‘Car’ tipinde olan Javascript nesneleri ile doldurulur.

ModelView ile arayüzün bağlanması işlemi aşağıdaki gibidir.

var carList = new CarList();
ko.applyBindings(carList);

// 'load' fonksiyonu otomatik olarak calistirilir. (Self Invoking)
(carList.load)();

 

‘cars.html’ Sayfası

HTML sayfası üzerinde Knockout  ‘foreach’ tanımı ile  tablo yapısı oluşturulur.

<h4>Otomobil Listesi</h4>
<table data-bind="foreach: carList.cars">
	<tr>
		<td data-bind="text: brand"></td>
		<td data-bind="text: color"></td>
		<td data-bind="text: year"></td>
	</tr>
</table>

 

Uygulama Apache Tomcat 7 üzerinde çalıştırılır ve sonuçlar aşağıdaki gibidir.

Umarım yararlı bir yazı olmuştur. Bir sonraki makalemde görüşmek dileğiyle ...

Uygulama : https://www.dropbox.com/s/v7z6i87g7w7nqgh/kospringrest.zip

 

Batuhan Düzgün 

Bilgisayar Mühendisi

Endüstri Mühendisi

Yazar Hakkında

Batuhan Düzgün

Batuhan Düzgün

www.batuhanduzgun.net

1988 Akhisar doğumludur. Sakarya Üniversitesi Bilgisayar Mühendisliği ve Endüstri Mühendisliği bölümlerinden 2011 yılında mezun olmuştur. Eskisehir OsmanGazi Universitesi'nde Endustri Muhendisligi Tezli Yuksek Lisansi programinda ogrenim yasantisina devam etmektedir. 1 senedir aktif çalışma hayatı içindedir. Mobil Teknolojiler, GSM Ağları, Bilgisayar Ağları, TCP/IP, Ethernet, HTTP, SMPP protokolleri, .NET ile yazılım geliştirme, veritabanı yönetim sistemleri ve Java gibi bir çok konuda çalışma ve proje gerçekleştirmiştir. Son zamanlarda özellikle Kurumsal Java konusuna çalışmaktadır.

Sosyal Medya

ORANLAR

  • 3947izleme

Arkadaşlarınla Paylaş

  • Tweet

0 Yorum

Yorum Yaz / Soru Sor

Lütfen yorum yazmak veya soru sormak için üye girişi yapınız.

Son Yorumlar

  • Hocam Link başka sayfaya yönlendiriyor.
  • merhaba benim merak ettiğim bir konu var y...
  • Merhaba download linki çalışmıyor. Rica et...
  • Nevzat Bey selamlar, Açıkçası bizler a...
  • Parametreleri Cache İşleminden Yalıtma kon...

En Güncel Sorular

  • Bilgilendirme maili (C#.Net)
  • Power Pivot (Sharepoint 2010)
  • BigInteger, BigDecimal (Asp.Net ve Asp.Net MVC)
  • visual C# ile asp nette veritabanı islemleri (Asp.Net ve Asp.Net MVC)
  • Share Point ile Dosya Arşiv Yönetim Sistemi yapılabilir mi ? (Sharepoint 2010)

En Son Cevap Verilen Sorular

  • Bilgilendirme maili
  • BigInteger, BigDecimal
  • visual C# ile asp nette veritabanı islemleri
  • Share Point ile Dosya Arşiv Yönetim Sistemi yapılabilir mi ?
  • txt dosyasına veri yazma

Twitter

Takip et: @yazilim_dilleri

En Çok Okunanlar

Elif BAYRAKDAR

C# ile SQL Server Bağlantısı, Insert, Update ve Delete Sorguları

23.05.2013

  • 120152
  • 0
Hakan Keskin

C# ile Windows Service Projesi Oluşturma, Debug Etme ve Setup Hazırlama

17.12.2013

  • 65269
  • 0
batuhan avlayan

Php - Mail Gönderme (İletişim Formu)

02.09.2013

  • 48392
  • 0

Sponsorlar

KODLAB
Pluralsight
Exchange server is
Office 365
YAZILIM DİLLERİ
Yukarı Çık
  • Hakkımızda
  • Facebook
  • Twitter
  • RSS

© Yazılım Dillerinin Buluşma Noktası | Kaynak belirtildiği sürece makaleler kopyalanabilir.
YazilimDilleri.Net sitesinde yer alan kullanıcıların oluşturduğu tüm içeriklerin yayınlanması ile ilgili yasal yükümlülükler içeriği oluşturan kullanıcıya aittir, YazilimDilleri.Net hiçbir şekilde sorumlu değildir.

Kapat

Giriş Yap

Kullanıcı Adı

Şifre

Şifremi Unuttum

KULLANICI GİRİŞİ