yzm 3215 İleri web programlama · sunucu (server) nedir? (devam…) •sunucular datacenter (veri...

YZM 3215

İleri Web Programlama

Yrd. Doç. Dr. Deniz KILINÇ

Celal Bayar Üniversitesi

Hasan Ferdi Turgutlu Teknoloji Fakültesi

Yazılım Mühendisliği

1

BÖLÜM - 1

İleri Web Programlamaya Giriş

2

Bu bölümde;

Temel web programlama

İstemci

Sunucu

HTTP protokolü üzerinden haberleşme

Tarayıcı

İstemci ve Sunucu taraflı web programlama

ile ilgili konular anlatılacaktır.

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

3

Temel Bilinmesi Gereken Konular

• World Wide Web Consortium

– http://www.w3.org/

• HTML (Hyper Text Markup Language)

– http://www.w3.org/community/webed/wiki/HTML

• Cascading Style Sheets (CSS)

– http://www.w3.org/Style/CSS/

• Temel programlama

– C, VB, Javascript, ASP vb.

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

Temel Web Kavramları

• İstemci (Client)

• Browser (Tarayıcı)

• Web Application Server (Web Uygulama

Sunucusu)

• TCP/IP (Transport Control Protocol / Internet

Protocol)

• HTTP (HyperText Transfer Protocol)

• FTP (File Transfer Protocol)

• SMTP (Send Mail Transfer Protocol)

• POP (Post Office Protocol)

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

Web Nasıl Çalışır?

• WWW, Internet üzerinden bağlı birçok istemci ve

sunucudan oluşur.

• Bilgisayarlar birbirleriyle HTTP protokolü

kullanarak iletişim kurarlar.

• Bir istemci bir web kaynağına HTTP

formatında bir istek gönderir.

– Web sayfası

– Resim dosyası

– Javascript, CSS dosyası

• Bir sunucu yanıt verir.

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

• Her istemcinin bir tarayıcısı vardır.

– Kişisel bilgisayarlar (IE, Chrome, Safari, Firefox,

Opera)

– Akıllı cep telefonları ve tabletler

– Diğer araçlar, PDA (Personal Digital Assistant) ve

Akıllı TV gibi

• Her sunucuda HTTP sunucusu olarak adlandırılan

bir yazılım çalışır .

– IIS (Internet Information Services) (Windows tabanlı)

– Apache (Tüm işletim sistemleri için)

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

Web Nasıl Çalışır? (devam…)

İstemci-Sunucu HTTP Mesajlaşma

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

Sunucu (Server) Nedir?

• Sunucu, web sitesine ait dosyaları barındıran ve

bu dosyaları internette paylaşmanıza olanak

tanıyan yüksek özellikli bilgisayar olarak

tanımlanabilir.

• Sunucularda programlama dillerini okuyup/

yorumlayıp çalıştırabilecek yazılımlar ve

altyapılar kuruludur.

• Sunucular kullanıcılar ile HTTP veya HTTPS

adı verilen transfer protokelleri ile iletişim

kurarlar bunun için de sunucuda yüklü

yazılımlar vardır.Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

Sunucu (Server) Nedir? (devam…)

• Sunucular datacenter (veri merkezleri) adı verilen

yerlerde tutulur. Buralarda sunucular 7/24 açık

kalarak sitenize ulaşılmak istenildiğinde her zaman

ulaşılmasını sağlarlar.

• Datacenterlarda ağ yapısı karmaşıktır.

• Datacenterlar ağ yapılarında 100 Mbit – 10 Gbit

arası internet hızlarını kullanırlar.

– Bu hız bilgisayarlara eşit bir şekilde paylaştırılır.

– Aynı şekilde ağ ve diğer donanım kaynakları bilgisayarlar

arası paylaştırılır.

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

Sunucu (Server) Nedir? (devam…)

• Datacenterlarda elektrik kesintisi başta olmak üzere

birçok sorun oluşturabilecek duruma karşı önlem

vardır (yangın, ısı vs.).

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

İstemci (Client) Nedir?

• Sunuculara dosyaları açması ve belli işlemleri

gerçekleştirmesi için HTTP ve HTTPS protokolleri

üzerinden istek gönderen kullanıcılara istemci denir.

• İstemci, HTTP olarak GET isteğinde bulunur. Yani

girdiğiniz sayfayı getirmesi için sunucuya bir mesaj

gönderir.

• Sunucu işlemi gerçekleştirmeye başlar. Eğer dosyayı

bulursa geriye sonucu 200 kodu olarak döndürür. Bu

sayfanın bulunduğu ve yüklenmekte olduğu anlamına

gelir.

• Bunun gibi farklı HTTP Request Kodları mevcuttur. Bu

sayede sunucu ve istemci iletişim kurar.

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

İstemci (Client) Nedir? (devam…)

• Sunucu 200 cevabını verdikten sonra istenilen

sayfadaki kodları işlemeye başlar.

• Kodların işlenmesinden sonra oluşan sonucu

kullanıcı tarayıcı yardımı ile görür.

• Kodlar üzerinde kullanıcıya tekrar işlem yapma

seçenekleri sunuluyorsa (üye olmak, yorum yapmak

vb.) sunucu bu işlemleri de gerçekleştirerek yeni

sonuçlar döndürmeye devam eder.

• Bütün bu işlem sürecini başlatan sunucuya istek

yollayan istemcidir (client).

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

İstemci-Sunucu HTTP Mesajlaşma

HTTP Durum Kodları

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

Mesaj Açıklama

200 OK Başarılı

201 Created Oluşturuldu

202 Accepted Onaylandı

203 Non-Authoritative Information Yetersiz Bilgi

204 No Content İçerik Yok

205 Reset Content İçeriği Baştan al

206 Partial Content Kısmi İçerik

HTTP Durum Kodları (devam…)

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

Mesaj Açıklama

400 Bad Request Kötü İstek

401 Unauthorized Yetkisiz

402 Payment Required Ödeme Gerekli

403 Forbidden Yasaklandı

404 Not Found Sayfa Bulunamadı

405 Method Not Allowed İzin verilmeyen Metod

406 Not Acceptable Kabul Edilemez

407 Proxy Authentication Required Proxy Sunucuda login olmak gerekli

408 Request Timeout İstek zaman aşamına uğradı

Web Tabanlı Yazılım

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

• Web tarayıcılarında çalışan yazılımların tamamına

verilen genel bir isimlendirmedir. Avantajları aşağıdaki

gibidir:

– Dağıtık konumlardan kullanım (şube, fabrika, depo, saha,

seyahat, okul vb.)

– Ağ sistemi dünyanın en ucuz ağı olan Internet

– Yazılım indirme, yükleme, kurma vb. gerekmez.

– Destek personeline ihtiyaç çok azdır.

– Bakım ve geliştirme kolaylığına sahiptir.

– İşletim sistemi ve donanım bağımsızlığı

– Uygun kütüphaneler ile Mobil cihazlarla da uyumluluk

sağlanır.

Web Tabanlı Programlama

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

Web tabanlı Programlama Dilleri

Sunucu Taraflı

ASP.NETPHP ….

İstemci Taraflı

JavaScript VBScript …

İstemci Taraflı Web Programlama

• İstemci taraflı programlama istemcinin yani

kullanıcının tarafında çalışan kodların oluşturulması

anlamına gelir.

• Yani tarayıcılar yardımı ile kullanıcının bilgisayarında

işlem gören ve sonuç döndüren kodlar istemci taraflı

kodlardır.

• Bu kodların yazılmasına istemci taraflı programlama,

yazılan kodlar sonucu oluşan script’e istemci taraflı

script denir (Javascript, VBScript …).

• Bu kodlar genellikle sunucu ile iletişim kurmadan

direk kullanıcının tarayıcısı yardımı ile çalışırlar ve

sonuç döndürürler.Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

Sunucu Taraflı Web Programlama

• Sunucu tarafında çalışabilen programlama dillerinin

kullanılarak bir web projesinin oluşturulması işlemidir.

• Sunucu taraflı programlama dillerinden bazıları ise

şunlardır;

– PHP

– ASP.Net

– Pyhton

– Ruby

– Java

• Bu dilleri sadece sunucu üzerindeki yazılımlar okuyup,

işlem yapabilir. Aynı zamanda veri tabanıyla ilgili

işlemlerin yapılması da sunucu taraflı bir işlemdir.

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

Örnek C# Uygulaması: Request-Response

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

Örnek C# Uygulaması: Request-Response

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

Test• www.google.com

• www.cbu.edu.tr

Tarayıcı (Browser) Nedir?

• Tarayıcının ana görevi bizim seçtiğimiz web kaynağını,

sunucuya istek yaparak ve tarayıcının penceresinde

bize göstererek sunmaktır.

• Kaynak genellikle bir HTML belgesi iken PDF, video,

XML dosyası veya farklı bir içerik tipi de olabilir.

• Kaynağın konumu (adresi) kullanıcı tarafından URI

(Uniform Resource Identifier = Uniform Kaynak

Tanımlayıcı) kullanılarak belirtilir.

• Tarayıcılarda HTML dosyalarının görüntülenmesinin

yolu, HTML ve CSS W3C organizasyonu tarafından

oluşturulan standartlarda belirtilmiştir.

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

Tarayıcı (Browser) Nedir?

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

Tarayıcıların Üst Seviye Bileşenleri

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

Tarayıcıların Üst Seviye Bileşenleri

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

• Kullanıcı arayüzü: Adres çubuğu, ileri-geri butonu, yer

imleri menüsü gibi elemanları içerir.

• Tarayıcı motoru: Rendering motoru ile kullanıcı arayüzü

(UI) arasında sıraya koyma aksiyonlarını denetler.

• Rendering motoru: İstek yapılmış içeriği görüntülemekten

sorumludur. Örneğin: istek yapılmış içerik bir HTML ise

rendering engine HTML ve CSS i çözümler, ayrıştırır (parse)

ve çözümlenmiş, ayrıştırılmış içeriği ekranda görüntüler.

• Ağ iletişimi: ağ (network) çağrıları örneğin HTTP istekleri

için kullanılır. Platform bağımsız arayüzün arkasında farklı

platformlar için farklı uygulamalar kullanılır.

Tarayıcıların Üst Seviye Bileşenleri

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

• UI Arka Uç: (UI backend) Combo boxes ve pencereler

gibi basit grafiksel araçları çizmek için kullanılır. Bu arka

uç (backend) platforma özel olmayan genel bir arayüz

ortaya çıkarır.

• JavaScript_Yorumlayıcı: JavaScript kodlarını

ayrıştırmak, çözümlemek (parse) ve çalıştırmak için

kullanılır.

• Veri Belleği: (data storage) Bu bir süreklilik katmanıdır.

Tarayıcı verilerin hepsini lokal olarak depolamaya ihtiyaç

duyabilir. Çerezler (cookies) gibi. Ayrıca tarayıcılar farklı

depolama mekanizmalarını da desteklerler. localStorage,

IndexedDB, WebSQL ve FileSystem gibi.

Tarayıcılar – Rendering Motoru

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

• Rendering motoru istek yapılmış içeriği ekranda

görüntülemeye yarar.

• Varsayılan olarak rendering motoru HTML, XML

belgelerinin yanı sıra resimleri görüntüleyebilir.

Rendering motorları:

– Trident: Internet Explorer;

– Gecko: Firefox;

– Webkit: Safari ve Chrome 0-27;

– KHTML: used in the KDE desktop environment.

– Presto: Opera 7+;

– Elektra:Opera 4-6;

– Blink: Chrome 28+

Tarayıcı Geliştirici Modu (F12)

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

• Responsive design testleri

• Oluşan HTML kaynak kodunu görüntüleme ve

değiştirme

• Sayfayı açma sürecindeki

– Atılan her bir requesti

– Atılan request sayısını,

– Sayfanın yüklenme süresini,

– Bu sürede ne kadar veri yüklendiğini

• Kullandığı kaynakları (Resources)

– Örneğin Cookies

Tarayıcı Geliştirici Modu (F12)

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

Test• www.google.com

• www.cbu.edu.tr

• ubs.cbu.edu.tr

Basit bir password

HACKING örneği

5 Satır Kodla Tarayıcı Yazalım…

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

Yararlanılan Kaynaklar

31

• www

• www.w3c.org

• http://sonsuzdongu.com/blog/tarayicilar-nasil-calisir-

modern-web-tarayicilarin-perde-arkasi-cevirisi

• Internet Programcılığı II sunumu, Sibel ÖZTAN

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

32

İYİ ÇALIŞMALAR…

Yrd. Doç. Dr. Deniz KILINÇ

drdenizkilinc@gmail.com

deniz.kilinc@cbu.edu.tr

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama