Upload
others
View
14
Download
0
Embed Size (px)
Citation preview
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Ç
Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama