Web Teknoloji Kavramları - Sabancı Üniversitesipeople.sabanciuniv.edu/ahmetdemirelli/downloads/WebTech.pdf · 2007. 6. 9. · SOAP Nedir ? Simple Object Access Protocol ... tarafında,

6/9/2007 Sabanci University 1

Web Teknoloji KavramlarıAhmet Demirelli

[email protected]

MCP, SCJP 5.0 , SCWCD 1.4

Sabancı ÜniversitesiBilişim Teknolojileri

Yüksek Lisans Programı


Ajanda

� CSS� RSS� SOAP

� Web Servisleri

� AJAX� Avantajları� Dezavantajları

� MASHUP


CSS


CSS

� Cascading Style Sheets� HTML e yardımcı bir görüntü biçimleme dili

� Bir stil şablonu belirleyip sayfa içerisinde istediğimiz alana uygulama

� Belirlenmiş şablonu ayrı bir dosya halinde başka HTML sayfalarına uygulama


CSS

solid; BORDER-LEFT: #1F9FFF 0px solid; BORDER-RIGHT: #1F9FFF 0px

solid; BORDER-TOP: #1F9FFF 0px

solid; COLOR: #1F9FFF; FONT-FAMILY: Trebuschet MS; FONT-SIZE: 9pt;

FONT-WEIGHT: bold}

body{

scrollbar-face-color:#CCCCCC;

scrollbar-shadow-color:#FFFFFF;

scrollbar-highlight-color:#FFFFFF;

scrollbar-3dlight-color:#FFFFFF;

scrollbar-darkshadow-color:#FFFFFF;

scrollbar-track-color:#FFFFFF;

scrollbar-arrow-color:#CCCCCC;

font-size: xx-small; border-top-width: thin

}

style1.css


CSS

CSSCSS

style1.css

Page1Page1

Page2Page2

Page4Page4

Page3Page3

� Belirlemiş olduğumuz stili sayfalarımıza uygulamak için, sayfların <head> </head> etiketleri arasına

<link href=“style1.css” rel=stylesheet type=text/css>

linki yazılır.


CSS Ornek

� style1.css

� style2.css

� index.html


RSS


RSS Nedir?

� Real Simple Syndication

� Özel bir XML dosyasıdır.

� Amaç belirli bir bilgiyi herkesin anlayabileceği bir formatta paylaşıma sunmaktır.

� Örnek ; Haber Siteleri� http://news.yahoo.com/rss

� http://www.cnn.com/services/rss/


RSS Format<channel><title>Site Başlığı</title><link>Sitenin Adresi</link><description>site hakkında kısa bir tanım</description><language>sitenin dili</language><item>

<title>İçerik Başlığı</title><link>İçeriğin Tam Adresi (URI)</link><description>içerik hakkında kısa bir açıklama veya içeriğin tümü</description>

</item></channel>


RSS

RSS Reader

Yahoo News RSSYahoo News RSS

Politic News RSSPolitic News RSS

Sport News RSSSport News RSS

CNN News RSSCNN News RSS


RSS Ornek


SOAP


SOAP Nedir ?

� Simple Object Access Protocol� Web Servisleri ile haberleşme standardı� Web Servisleri;

� Uzak bir sunucu üzerinde çalışan özel bir method.� İşleyiş olark herhangi bir metoddan farksızdır, input

parametreleri alır ve geriye bir değer döndürür� Web servis teknolojisi ise bu methodların uzaktan

çağırılabilmelerini sağlayan teknolojidir.� SOAP ise; bir web servisine istek gönderirken hangi formatta

gönderileceğini ve hangi formatt geri alınacağını belirler

� B2B uygulamalarda kullanılır.


Web Servisleri & SOAP

HTTPHTTPWeb Service Client

Web Service Client

WeatherWeb Service

GetWeather ( )

WeatherWeb Service

GetWeather ( )

Application Server

SOAP Request Message

SOAP Response Message


SOAP RequestPOST /globalweather.asmx HTTP/1.1 Host: www.webservicex.netContent-Type: text/xml; charset=utf-8 Content-Length: length SOAPAction: "http://www.webserviceX.NET/GetWeather"

<?xml version="1.0" encoding="utf-8"?> <soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-

instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"> <soap:Body>

<GetWeather xmlns="http://www.webserviceX.NET"> <CityName>string</CityName><CountryName>string</CountryName></GetWeather>

</soap:Body> </soap:Envelope>


SOAP ResponseHTTP/1.1 200 OK Content-Type: text/xml; charset=utf-8 Content-Length: length

<?xml version="1.0" encoding="utf-8"?> <soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-

instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"> <soap:Body>

<GetWeatherResponse xmlns="http://www.webserviceX.NET"> <GetWeatherResult>string</GetWeatherResult></GetWeatherResponse>

</soap:Body> </soap:Envelope>


Web Service Örnek

� Basit bir web servis örneği


AJAX


AJAX Nedir ?

� AJAX (Asynchronous JavaScript and XML)� Bir web uygulama geliştirme tekniğidir.� Basit olarak; javascript kullanarak sunucuya bilgi

göndermek ve gelen bilgiyi aynı sayfada göstermektir.

� Bu yüzden web sayfalarının masaüstü(desktop) uygulamalar gibi davranmasını sağlar.

� Web uygulamalarına getirdiği yeniliklerden dolayıAjax uygulamaları “Web 2.0” uygulamaları olarakta adlandırılır


Neden AJAX ihtiyacı

Urün Ismi GirAra

ListeleÜrün seçSatın Al

Girdi KontrolVeritabanı bağlantısıGeridönen sonuçlar

Girdi KontrolVeritabanı bağlantısıGeridönen sonuçlar

Kredi KartıAdres Bilgileri

Submit

Girdi KontrolKredi Kartı OnaylamaVeritabanı bağlantısı

Satın AlımınOnaylanması

Verilerin Veritabanına Girilmesi ve onay

İşlem BaşarıylaGerçekleştirildi

Basit bir web uygulaması



� Her işlem için ayrı bir sayfa görüntüleme� Her işlemin sunucuya (submit) gönderilmesi� İşlem gerçekleştikten sonra yeni bir sayfaya

yönlendirme� Her yönlendirme sonucunda sayfaların yeniden

yüklenmesi



Satın Alma

İşlemler

Girdi Kontrol

Veritabanı işlemleri

Hataların bulunması

Arayüz

Urun ListesiBileşeni

Urun Listesi (DIV)

Kredikart Formu (DIV)

Adres Formu (DIV)

Hatalar

(DIV)

Kredi KartBileşeni

Fatura BilgileriBileşeni

HTML bunun için yetersiz kalır


Nasıl Çalışır ?

AJAX

JavaScript

XML

HTML

CSS

DOM

HTTP


<script type=“text/javascript”>

function illeriGoster() {

… yeni request nesnesi (url, parms)

… callback fonksiyonu belirle

(sonucIsle())

… sunucuya gönder

}

Nasıl Çalışır ?

XMLHttpRequest

function sonucIsle() {

…sunucudan gelen mesajı al

…mesajın yazılacağı nesneyi al

…mesajı yaz

}

A

Bilgi Listele Servlet

bilgileriAlServlet( req, res) {request bilgilerini alveritabanından bilgiyi çekbilgiyi clienta döndür

}

UygulamaSunucusu

AdanaAdıyamanAfyon.....


Avantajları

� Zengin kullanıcı arayüzü� Formlardaki bilgilerin tamamını her defasında

sunucuya gönderilmesine gerek yoktur� Bu yüzdende network trafiğini azaltır� Sunucu tarafındaki teknolojiden bağımsızdır. (Sunucu

tarafında, java,.NET, php, perl...vs teknolojilerden herhangibirisi kullanılabilir)

� Sayfanın tamamı yerine bir bölümünün yenilenmesini sağlar (asenkron çalışma)

� Sadece submit butonlarıyla sunucuya ulaşmak yerine daha fazla event kullanma imkanı sağlar


Dezavantajları

� Back butonu işlevini kaybeder� Her browser için ayrı kod yazmak gerekir� Çalışılan domain dışındaki bir domaine ulaşılamaz� Eğer javascript disable edilmişse çalışmaz� Debug edilmesi çok zordur� İyi bir sunucu taraflı programlamanın yanısıra çok iyi

bir javascript bilgiside gereklidir


Örnek Ajax Uygulamaları

Googl

e Sugg

est

Googl

e Docs

Googl

e

Spread

sheets

Kiko O

nline

Takvim

Uygul

aması


Örnek Ajax Uygulamaları

� Backbase� http://www.backbase.com

� http://www.backbase.com/RUI/shop.html

� Real Time HTML Editor � http://htmledit.squarefree.com/

� Google Maps

� GTalk

� .....


MASHUP


Mashup Nedir ?

� Mashup (Web Application Hybrid)� Birden fazla değişik kaynaktan gelen içeriği kullanarak tamamen yeni bir servis oluşturmaktır.

� Mashup oluşturmak için birden fazla kaynaktan verileri;� Web Servisleri� RSS� API (Hizmeti veren firmanın bize sağladığıinterface) aracılığıyla alabiliriz.


Örnek Mashup

Müşteri AdresleriMüşteri Adresleri

Google MapAPI

Google MapAPI

Mashup Uygulaması


Mashup API

� Popüler Mashup API leri� Amazon Web Services� del.icio.us� digg� eBay� FeedBurner� Flickr� Google� Twitter� Virtual Earth� YouTube


Mashup Örnekleri

� http://mashupawards.com

� http://www.hipoqih.com� Bir web uygulaması ve bir plugin (mobil cihazlar için) den oluşan bir uygulamadır.

Mashup Hakkında Daha Fazla Bilgi İçin;� http://www.softwaretrainingtutorials.com/mashups.php


[email protected]

SORULAR ??SORULAR ??

Documents

Web Teknoloji Kavramları - Sabancı Üniversitesipeople.sabanciuniv.edu/ahmetdemirelli/downloads/WebTech.pdf · 2007. 6. 9. · SOAP Nedir ? Simple Object Access Protocol ... tarafında,