Programlama

Bir web uygulaması en basit hali ile bir tarayıcı'da(client) ve bir sunucu'da(server) çalışan dosyalardan meydana gelmektedir. Tarayıcılarda html, css, js(javascript) dosyaları işletilebilmektedir, her tarayıcı bu türden dosyaları işleyip anlayabilmektedir. Sunucu tarafta ise web uygulamasının geliştirildiği platforma göre değişen bir programlama dili kullanılarak tarayıcılarda çalıştırılacak html dosyalarının dinamik olarak oluşturulması ve tarayıcılardan istek geldiğinde dinamik olarak oluşturulan bu dosyaların tarayıcılara gönderilmesi sağlanmaktadır.

Web uygulamalarının basitçe çalışma mantığı

İnternet ilk defa Dünya'nın kullanımına sunulduğu zamanlarda sadece static(durağan) web sayfaları vardı bu sayfalar sadece html ve css'ten meydana gelmekteydi ve bir web sayfasını oluşturmak çok kolaydı sadece html etiketleri ile belirlenen basit bir tasarıma göre web sayfası oluşturuluyor ve css kullanılarak şekli şemali ayarlanıyordu. Ama zaman ilerledi ve static olan bu web sayfalarını dinamik(herkes için farklı içerik sunan web sayfaları) hale getirmek gerekti ve mühendisler madem her kullanıcının farklı göreceği web sayfaları oluşturmak gerekiyor biz de kullanıcıların tarayıcılarında görecekleri Html içeriğe sahip dosyaları sunucu bilgisayarlarda dinamik olarak oluşturup istemcilerin tarayıcılarına yollayacak teknolojiler geliştirelim ve bu şekilde ortaya çıkan bu ihtiyacı giderelim demişler. Ve bundan sonra Php, Java, Asp gibi web uygulaması geliştirmek için teknolojiler ortaya çıkmış. Tarayıcı tarafında da esneklik gerektiğinden(yani tarayıcı üzerinde sunucudan gelen verileri işleyebilecek bir teknoloji) zamanla web tarayıcılar üzerinde çalışacak yorumlanan dillere ihtiyac duyulmuş ve script dilleri(web tarayıcıları üzerinde çalışan derleyiciye ihtiyaç duymayan sadece yorumlanan diller) ortaya çıkmış ve zamanla da Javascript dili bir standart haline gelmiştir.

Google firması javascript yerine kullanılabilecek javascript'e göre daha kullanışlı olduğunu iddaa ettiği  bir client taraflı script dili olan "Dart" isimli dili geliştirmiştir. Ama bu dilin geliştirilen web projelerinde kullanılabilmesi için bütün tarayıcıların "Dart" diline destek vermesi gerekmektedir. Aksi takdirde bu script dilini kullanıp geliştirilen web uygulamaları olsa bile, dile destek vermeyen tarayıcılar'da (Dart dilini işleyip çalıştıramayan tarayıcılar) "Dart" kullanılarak yazılmış olan web uygulamalar çalışmıyacaktır. Hatta tarayıcılar Javascript'in yeni version'larına bile doğru düzgün destek vermemektedir, javascript version'larını belirleyen kurum Exmascript'tir(Exmascript 6 Bilgi).

Aslında bir web uygulamasını geliştirmek bir desctop uygulamasını geliştirmekten biraz daha karmaşıktır. Bu karmaşıklığı oluşturan en önemli neden web uygulamalarının internet üzerinde çalışması ve en temel hali ile iki dağıtık yapıdan( tarayıcıda çalışan ve sunucuda çalışan kısımlar) oluşmasıdır ve bu iki kısmın bir biri ile Http protokolü üzerinden haberleşmesidir. Zaten bundan dolayı backend(sunucuda çalışan) kod ve frontend(tarayıcıda çalışan) kod kavramları ortaya çıkmıştır.

Peki bir web uygulamasında dinamik html sayfaları nasıl oluşturulur. Web uygulamaları geliştirirken kullanılabilecek bir çok teknoloji(mesela Php, Asp.net, Asp.net MVC, Java Jsp, Java Jsf, Java Spring, Python Django vb.) olmasına rağmen hepsinin temel olarak yaptığı şey yukarıdaki paragraflarda anlatıldığı gibi aynıdır, aralarındaki tek fark nasıl yaptıklarıdır ve her bir teknolojinin bir diğerine göre üstünlükleri veya olumsuz yönleri olabilir, tabi bu teknolojilerin her biri apayrı bir dünyadır, her biri kendi içerisinde bir çok alt teknolojiyi barındırmaktadır ama sonuç olarak aynı işi yapmaktadırlar.
Mesela Kullanılan teknolojiye göre geliştirilen web uygulamalarında çalışılan dosyalar;

•  Php kullanılıyorsa ".php" uzantılı dosyalardır.
•  Java jsp kullanılıyorsa ".jsp" uzantılı dosyalardır
•  Asp.Net kullanılıyorsa ".aspx" uzantılı dosyalardır
•  Asp.Net MVC kullanılıyorsa ".cshtml" uzantılı dosyalardır

Bu teknolojiler web tarayıcılarının anlayabileceği html içerikli dosyalar içerirler.

Not: Bir web uygulaması cross platform(Android, Ios, Web tarayıcıları veya her hangi bir uç teknolojinin kullanılmasına izin verecek kadar esnek mimari tasarıma sahip yazılımlar) olarak geliştirilmişse eğer(ki bu şekildeki yazılımlar xml, json gibi teknoloji bağımsız dosyalar kullanılarak geliştirilir) bir tarayıcıdan uygulamada bulunan bir web sayfasındaki verileri görüntülemek için serverSide taraflı bir dil kullanmakta gerekmiyor, sunucudan tarayıcıya gelen xml, json vb. formattaki dosya(lar) javascript ile işlenerek de kullanıcının tarayıcısında istenen ayarlamalar yapılabilir.

Kısaca biz dinamik sayfalar gösterebilmek için uygulamaların geri tarafında veritabanlarından çekilen verileri html içerikli dosyalara aşılıyor(enjekte ediyor) ve bu dosyaları da kullanıcıların tarayıcılarına Http protokolü kullanarak yolluyoruz ve tarayıcılar da html içerikli dosyaları işleyip kullanıcıya web sayfasını göteriyor. İşte işin özü bu. Ama konuşmak burada anlatılanları yapmaktan çok daha kolay...




Web uygulamalarının hangi yaklaşım ve mantık kullanılarak yazıldığını çok genel bir bakış ile anlatmaya çalıştım.

Http internet ağı üzerinde dosyaların paylaşılmasında kullanılan en temel protokollerden bir tanesidir. İnternette gezinen hemen herkes internet sayfalarını görüntülemek için bu protokolü kullanıyor. Http prptokolü bir çok internet protokolünde olduğu gibi istemci-sunucu mimarisi mantığına göre çalışmaktadır. İstemci-sunucu mimarisi kısaca bir istemci(bir internet sayfası görüntülemek isteyen) ile bir sunucu(internet sayfasının üzerinde barındığı sabit bir IP numarasına sahip bir tür bilgisayar) arasında geçen request(istek)-response(yanıt, karşılık, cevap) iletişiminden meydana gelir. Http protokolü sayesinde internet üzerindeki cihazlar arasında ".html, .css, .js,  resim, sorgu sonucu" vb. dosyalar taşınabilmektedir.

URL Kullanımı

Url tarayıcıda internet sayfalarına erişmek için kullanılan alana yazılan web sayfalarının yolunu belirten metindir, bir Url belirli formatta yazılır;

URL formatı: "http:" "//" host [ ":" port ] [ abs_path [ "?" query ]]

"http:" : Kullanılan protokolü belirtir. "https" diye bir şey çıkarsa karşınıza bu sunucu bilgisayarda ilgili site için "SSL" sertifikasının kullanıldığı anlamına gelir tek farkı daha güvenli client-server haberleşmesinin gerçekleştirilmesidir.

"//" : Kullanılan protokol ile sunucu(host) adresini ayırmak için kullanılır.

host [ ":" port ] : host, bir web sitesinin adresini belirtir(www.siteAdı.com gibi) ve port numarası ise sunucu bilgisayarda web sitesini görüntülemek için gelen isteklerin takip edildiği port numarasıdır, port numarası yazılmazsa varsayılan olarak 80 kabuledilir.

[ abs_path [ "?" query ]] : abs_path, sitenin alt sayfalarının yollarını ve [ "?" query ] kısmı ise Http protokolünde eğer "Get" metodu ile sunucuya istek yapılırsa URL kısmına eklenen verileri belirtmektedir.

Misal vermek gerekirse; bir tarayıcı(chrome, opera, firefox vb.) açın ve adres çubuğu kısmına
"http://www.trthaber.com" ya da "www.trthaber.com.tr/" ya da "http://www.trthaber.com.tr:80" ya da "www.TRTHABER.com.tr/"(burada trthaber sitesini öylesine seçtim) yazın ve sayfaya giriş yapın her seferinde aynı sayfa karşınıza gelecektir yani port numarasını ve "http" yazılmasa da varsayılan olarak tarayıcı arka tarafta sunucuya istek yollarken requeset mesajına bu bilgileri ekliyor.

Http Requests(İstek) Çalışma Mantığı

Http protokünde sunucuya istek yollarken kullanılabilecek 8 adet istek türü vardır ama istemcilerin bu request'lerin hepsini kullanmasına izin verilmez, bunun sebebi güvenlik içindir, bunlar;
1_) Get: Bu request isteğinde sadece Head kısmı bulunur ve sunucudan dosya istemek için kullanılır ve eğer request mesajına veri eklemek gerekiyorsa veriler URL'e eklenir.
2_) Post: Bu request isteğinde Head ve Body kısımları bulunur ve Get metoduna göre daha güvenli bir Http request yöntemidir. Head kısmında request'in temel bilgileri yeralır ve Body kısmında sunucuya gönderilecek olan verileri içeren bir .html dosyası bulunur.
3_) Head : Get ile yakın çalışır sadece "status line" ve "header section" verilerini almak için kullanılır. Bu request isteğinde sadece Head kısmı bulunur ve sunucu bu isteğe sadece Head kısmı bulunan bir response(cevap) ile karşılık verir.
4_) Put: Hedef kaynağın(Url) dosyalarını yollanan ile değiştirilmesini sağlar.
5_) Delete : Hedef kaynağın(Url) dosyalarını silmek için kullanılır.
6_) Connect : Url ile belirlenen sunucuya bir kanal oluşturmak için kullanılır.
7_) TRACE : Url yolu ile mesaj döngüsü testi yapmak için kullanılır.
8_) Options : Bir WEb sunucu tarafından desteklenen Http metodlarını öğrenmek için kullanılır.

*_) Get ve Post method'ları bir biri yerine kullanılabilir. Post metodu Head ve Body kısımları içerir, Get metodu ise sadece Head kısmını içerir. Request'lerin Head kısmında mesaj ile ilgili veriler bulunur, bu veriler Url bilgisi, kullanılan request metodu(yukarıda 8 tene olduğu belirtilmişti), kullanılan Http protokol sürüm bilgisi, mesajın ömrü vb. bilgilerden oluşmaktadır. Get metodu ile sunucuya bir request mesajı yollanırken eğer bir takım veriler de gönderilmek isteniyorsa bu veriler Url'ye eklenmek sureti ile gönderilmektedir, bunun nedeni ise Get metodunun Body kısmının olmamasıdır, yollanan veriler Url'e eklenince bu adres çubuğunde görünmektedir ve bu metod güvenlik açıkları barındırmaktadır önemli veriler bu metod ile sunucuya yollanmamalıdır. Bir Url en fazla 7607 karakterden oluşur.

Request Message

Get ve Post İşlemleri Nedir

Bir istemci(internete bağlanmak için tarayıcılar kullanılır ve aslında istemci kullanılan tarayıcı oluyor) sunucudan istekte bulunurken bu isteği web sayfalarını görüntülemek için yapar, bir web sayfasına girilebilmek için ya adres çubuğuna sitenin domain adı(bu sitenin adresidir "www.google.com.rt" gibi)  girilmelidir ya da bir arama motoru kullanılmalıdır. "www.youtube.com" sitesine girelim youtube'ta ilk giriş sayfasında "html 'form' etiketlerinden 2 tane bulunuyor" bu etiketler arasında bulunan elemanlar bunlar "input" elemanları olur(input elemnalarının type ettribute'üne ne yazarsak o eleman olarak görünür eğer 'text' yazarsak metin kutusu olur, bu Html bilgisidir) sunucuya istek gönderirken kullanılır. "form" etiketinin method attribute(öz nitelik)'ü sunucuya yapılacak olan isteğin türünü belirtmek için kullanılır bu tür "get" ya da "post" olabilir, belirtilmezse "get" olarak kabuledilir. Sunucuya Http protokolü ile gönderilen mesaj'daki veriler sadece "form" etikiti içerisinde bulunan "input" elemanlarının verileridir ve bu "input" elemanlarının verileri "name" attribute'leri kullanılarak sunucuya gönderilir.
Yani tarayıcıda bulunan form etiketi içerisinde bulunan input etiketlerindeki veriler input elemanlarının "name" attribute'leri kullanılarak sunucuya yollanabiliyor, kullanılan metod Get ise veriler Url adresine ekleniyor, kullanılan metod Post ise veriler mesajın Body kısmına bir html dosyasına yazıldıktan sonra ekleniyor ve form submit edildiğinde sunucuya istek gönderiliyor, sunucu kendine gelen mesajdaki verileri html sayfasındaki input elemanlarının name özelliklerini kullanarak alıyor ve gerekli işlemleri yapıyor ve sonrasında istemciye sonucu bir mesaj olarak iletiyor, bu mesaj Get ve Post istekleri için çoğu zaman Head ve Body kısımlarını içerir ve tarayıcı istekten sonra sunucunun kendisine gönderdiği mesajı yorumlar ve istenen web sayfasını görüntüler.

Bu anlattıklarımı resimlerle bir örnek üzerinden adım adım anlatacağım. Youtube sitesinde arama alanıma bir yazı yazıp butona basıldığında neler olduğunu ifade etmeye çalışacağım;

1_) www.youtube.com sayfasına giriş yapalım ve Trendler saylası açıldı(bu yapılmasa da olur);



2_) Chrome tarayıcı kullanılarak "f12" ile "Developer Tools" açıldı ve burada "Ctrl + F" basılarak "

3_) "form" etiketi içinde bulunan "input" elemanının tipi "text" ve arama alanı kısmını oluşturuyor, "name" özelliği "search_guery"  kullanılarak aranmak istenen veri sunucuya gönderiliyor. "form" elemanı "GET" metodunu kullanıyordu biz arama alanına "doğa" yazalım ve ara butonuna basalım ve sayfa submit olsun(sunucuya gitsin), burada arama verisi Url'ye eklenecektir(Get metodu kullanıldığı için) ve arama yaptığımızda;




4_) "https://www.youtube.com/results?search_query=doğa" şeklinde bir Url karşımıza geliyor eğer burada POST metodu kullanılsaydı "?search_query=doğa" kısmı olmayacaktı, get metodu request isteğinde sadece Head kısmı barındırdığı için get metodu ile sunucuya veri göndermek istendiğinde yollanacak veriler Url kısmına eklenerek sunucuya gönderiliyor ama bu yöntem pek güvenli olmadığından hashas veriler bu şekilde yollanmamalı bunun yerine Post tercihedilmelidir ve Url uzunluğu en fazla 1706 karakter olabiliyor.
Sunucu aranmak istenen kelimeyi(bu örnekte 'doğa') aldı ve arka tarafta( hangi programlama dili ve teknoloji kullanılarak geliştirme yaptılarsa araştırmak lazım!) kullanılan programlama dili arama yapılan kelimeyi aldı veri tabanında aradı ve geriye cevap olarak bir Http response gönderdi bu mesajda hem Head hem de Body kısmı var tarayıcımız bu mesajı çözümledi ve alttaki sayfayı gösterdi bize.


Sonuç olarak bir web sitesinin iki kısmı vardır; biri her kes tarafından görüntülenen UI(User Interface, Kullanıcı Arayüzü) ki tarayıcı ile görüntülenen kısım burasıdır ve diğer kısım ise sunucu üzerinde çalışan kısmı ki bu kısım tarayıcılardan ilgili web sayfası için gelen istekleri yorumlar ve ilgili backend işlemlerini yaparak sunucuda görüntülenecek sayfaları ve kullanılacak dökümanları(resim, .css, .js vb. dosyaları) tarayıcıya Http protokolünü kullanarak gönderir.

Burada Http protokolünün basit bir şekilde nasıl çalıştığı Get ve Post metodları açıklanmak sureti ile anlatlmaya çalışılmıştır.

"Client-Server Architecture" bir "Ağ mimarisi"dir(Network Architecture),"Network Architecture" ağ üzerindeki cihazların bir birleri ile olan ilitişimlerini belirleyen mimari tasarımlardır denilebilir.
İstemci-Sunucu Mimarisi'nde  ağ üzerinde iki farklı role sahip cihazlar bulunur bunlar; Client(istemci) ve diğeri de Server(Sunucu)'dır. Bu mimaride istemci cihaz sunucu cihazdan izin verilen ölcülerde isteklerde bulunur ve sunucu cihaz da istemci cihaza ya isteğini karşılayacak cevabı gönderir ya da isteğin neden karşılanamadığını belirten bir cevap iletir, örneğin sunucuda var olmayan bir sayfa görüntülenmek istenirse sunucu 404 kodu ile istenen sayfanın bulunamadığını belirten bir sayfa çıktısı gönderecektir istemci cihaza.
Bir misal vermek gerekirse; chrome tarayıcı bu mimari ile çalışır, chrome tarayıcıyı açıp adres satırına bir web sitesinin url(mesela www.adres.net) adresini girip çalıştırdığınızda tarayıcı ilgili web sayfasını üzerinde bulunduran sunucuya girilen web sayfasının görüntülenmek istendiğini belirten bir istekte bulunur ve sunucu da chrome tarayıcıya bu web sayfasını görüntüleyebilmek için gerekli olan dosyaları yollar ve internek hızına bağlı olarak saniyeler içerisinde web sayfasına erişilmiş olur. Kısaca;

Client-Server Architecture

Client-Server mimarisi sunucuya erişebilmek için araya yerleştirilen başka katman yazılımlarının olup olmamasına göre n katmanlı olarak adlandırılırlar. Mesela en temel mimari 2 katmanlı yapıdır bu yapıda(yukarıdaki diagramda da bu sözkonusu) istemci cihazlar doğrudan sunucuya erişebilmektedir, sunucuya erişebilmek için araya başka takmanlar(bu katmanlar bir çeşit uygulama yazılımlarıdır) yerleştirilir. Yüksek güvenlik sağlanan mimarilerde istemciler sunucuya doğrudan değil de bir başka katman üzerinden erişirler, tasarlanan modele göre 3, 4, 5 katmanlı tasarımlar olabilir, mesela bir web sitesinde arka tarafta bir veritabanı kullanılıyorsa client(istemciler)'lar bu veritabanına doğrudan erişemezler arada bulunan web uygulamas üzerinden dolaylı yollarla veritabanındaki verilere erişim sağlayabilirler.

Kısaca web ağı üzerindeki cihazların bir birleriyle anlaşabilmesi için bir takım mimariler geliştirilmiştir ve internet üzerinde bir sunucuda bulunan bir web sitesinin bir web sayfası görüntülenmek istendiğinde "Client-Server Architecture" mimarisi kullanılıyor ve web sayfası tarayıcı tarafından görüntüleniyor. Bunun dışında da mimari yaklaşımlar bulunmaktadır.
Web sayfalarının görüntülenebilmesi için istemci-sunucu arasında "HTTP" protokolü kullanılmaktadır,  bu da başka bir yazının konusu.