YZM 3215 İleri Web Programlama

Ebat: px

Şu sayfadan göstermeyi başlat:

Download "YZM 3215 İleri Web Programlama"

Hande Bilge Ceren
8 yıl önce
İzleme sayısı:

1 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

2 BÖLÜM - 1 İleri Web Programlamaya Giriş 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. 2

3 Temel Bilinmesi Gereken Konular World Wide Web Consortium HTML (Hyper Text Markup Language) Cascading Style Sheets (CSS) Temel programlama C, VB, Javascript, ASP vb. 3

4 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)

5 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.

6 Web Nasıl Çalışır? (devam ) 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)

7 İstemci-Sunucu HTTP Mesajlaşma

8 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.

9 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.

10 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.).

11 İ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.

12 İ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).

13 İstemci-Sunucu HTTP Mesajlaşma

14 HTTP Durum Kodları 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

15 HTTP Durum Kodları (devam ) 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ı

16 Web Tabanlı Yazılım 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.

17 Web Tabanlı Programlama Web tabanlı Programlama Dilleri İstemci Taraflı Sunucu Taraflı JavaScript VBScript PHP ASP.NET.

18 İ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.

19 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.

20 Örnek C# Uygulaması: Request-Response

21 Örnek C# Uygulaması: Request-Response Test

22 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.

23 Tarayıcı (Browser) Nedir?

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

25 Tarayıcıların Üst Seviye Bileşenleri 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.

26 Tarayıcıların Üst Seviye Bileşenleri 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.

27 Tarayıcılar Rendering Motoru 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+

28 Tarayıcı Geliştirici Modu (F12) 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

29 Tarayıcı Geliştirici Modu (F12) Test ubs.cbu.edu.tr Basit bir password HACKING örneği

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

31 Yararlanılan Kaynaklar www Internet Programcılığı II sunumu, Sibel ÖZTAN 31

32 İYİ ÇALIŞMALAR Yrd. Doç. Dr. Deniz KILINÇ 32

Benzer belgeler

Dünyanın bilgisine açılan pencere... Ya da sadece yeni çağın eğlencesi...

Dünyanın bilgisine açılan pencere... Ya da sadece yeni çağın eğlencesi... Bilgisayar Ağı (Network) Nedir? Bir ana bilgisayarın denetiminde birbirlerine bağlı olarak çalışan bilgisayarların oluşturduğu