linkedin github youtube instagram

Bir web sitesi nasıl çalışır?

 

Giriş

 

Tarayıcımızdaki adres çubuğuna gidip bir site adresi yazdık ardından enter tuşuna bastık, ardından önümüze sitedeki veriler geldi. Peki bu nasıl oldu?

 

Kullanılan Teknolojiler

 

Bir web sitesinin çalışması için gerekli olan yazılımlar/teknolojiler 2'ye ayrılır.

 


 

Sunucu tarafı Kullanıcı tarafı
*İşletim sistemi *Tarayıcı
*Web sunucu yazılımı -
Programlama Dili -
Database -
Alan adı -
   

 

Sunucu tarafı

 

Sunucu tarafında işletim sisteminin görevi , işlemci, I/O, SSD , yazılımları koordine etmek çalıştırmaktır. İşletim sistemi üzerinde çalışan programlama dili ise bizim yazdığımız kodları renderlayıp bir çıktı üretir oluşturup ( birazdan detayına ineceğim) web sunucu yazılımına aktarır. Web sunucu yazılımı ise kendisine gelen komutları doğru bir şekilde isteği yapan kullanıcının tarayıcısına aktarmakla görevlidir.

 

Kullanıcı tarafı

 

Tarayıcı , Web sunucu yazılımından gelen html kodlarını, resimleri ... doğru bir şekilde işlemekle görevlidir. Komutları işleyerek bize ekrana çıktı verir.

 

Şu tarayıcı şundan hızlı, şu tarayıcı daha fazla ram yiyor...

 

gibi söylemler bundan kaynaklanır. Her tarayıcı her sayfayı aynı şekilde işlemez. Daha ayrıntılı bilgi için Browser Engine.

 

Şimdi bir senaryo üzerinden bu teknolojlere tek tek değinelim.

 


 

Senaryo

 

1) Tarayıcı aracılığı ile siteye ulaşma

Kullanıcı web tarayıcısını açarak adres çubuğuna https://example.com yazarak git butonuna tıklar.

 

2) Nameserver'dan makina buluması

Beklenen senaryo bu alan adıyla eşleşmesi gereken bir makina ip'si. İşletim sistemi kendinde kayıtlı olan ön belleğe ve hosts dosyasına bakarak bu makinayı bulmaya çalışır.

2.1) Host dosyası

Debian türevi sistemlerde bu dosya /etc/hosts yolunda bulunur. Windows içinse Windows\System32\drivers\etc adresindedir.

İçerik olarak

 

127.0.0.1  localhost loopback
::1        localhost

 

gibi bir içeriğe sahiptir. Biz buraya 

 

127.0.0.1  localhost loopback
::1        localhost
178.62.211.28 google.com

 

Yazarsak google.com'a gitsek bile degirmencimehmet.com açılacaktır.

2.2) Önbellekleme

Önbellekleme de ise daha önce giriş yapılan siteler işletim sisteminde hız kazanmak açısından geçici olarak önbelleğe alınır ve hosts gibi bir dosyada tutulur. Önbelleği temizlemek için

 

#Linux
sudo systemd-resolve --flush-caches

#Windows

ipconfig/flushdns

 

komutu kullanılabilir.

 

2.3) Nameserverlar

 

İşletim sistemi önbelleğe ve hosts dosyasına baktıktan sonra aradığı adresi bulamazsa nameserver'lara bakar. Hepimizin ne işe yaradığını bilmese en az bir kere kullandığı

8.8.8.8
8.8.4.4

 

DNS adresi vardı. DNS, yani Domain NameServer. Burada anahtar kilit uyumu vardır. İşletim sistemi bu nameserverlara bu adresin hangi makinaya ait olduğunu sorar.

 

{

  google.com : "216.58.206.206"
  degirmencimehmet.com : "178.62.211.28"


}

 

gibi düşünebiliriz.

 

Virtualhost teknolojisi ile bir makinada birden fazla alan adı kullanılabilir.

 

makinamızın ip adresini bulduktan sonra makinaya aşağıdakine benzer bir istek atılır.

 

GET / HTTP/1.1
Host: [178.62.211.28]
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:85.0) Gecko/20100101 Firefox/85.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Language: tr-TR,tr;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: close
Upgrade-Insecure-Requests: 1

 

 

3) Web server yazılımı

 

Web server yazılımı kullanıcıdan isteği alma, geri döndürme, programlama dilini çalıştırma gibi özelliklere sahiptir. Bizim yaptığımız isteğe göre bize bir yönlendirme yapacaktır. Biz sitenin anasayfasına GET isteği gönderdik, apache yi örnek alalım default olarak /var/www/degirmencimehmet.com/index.php adresindeki dosyayı çalıştıracaktır. 

 

www.degirmencimehmet.com/page/ gibi bir adrese istek yapsaydık /var/www/degirmencimehmet.com/page.php dosyasını çalıştıracaktı.

 

 

Genellikle modern programlamada tam olarak böyle çalışmıyor, benzer mantıkta ama tüm dosyalar tek dosya üzerinde çalışıyor konuyu çok dağıtmayalım bu da başka bir dersin konusu olsun

 

 

Bu bahsettiğim apache içindi, eğer NodeJs kullanarak webserver'ıda kendimiz yazarsak 

 

const express = require('express')
const app = express()
const port = 80

app.get('/', (req, res) => {
  res.send('<h1>Hoşgeldiniz</h1>')
})

app.get('/yazilar', (req, res) => {
  res.send('<h1>Yazılar</h1>')
})

app.post('/yazilar', (req, res) => {
  res.send('<h1>Yazınız başarıyla iletildi</h1>')
})


app.listen(port, () => {
  console.log('app running...')
})

 

Gibi bir yap oluşabilirdi, / adresine GET gelirse şunu göster, /yazilar GET gelirse şunu göster /yazilar POST gelirse ...

 

Biz bu senaryo için apache kullandığımızı varsayalım.

 

4)Programlama dili

 

Programlama dili dinamik web uygulamaları ve logic işlemleri yapmamızı sağlar. WebServer routing işlemine göre bu otomatik olarak bizim yazdığımız dildeki kodları o dile ait derleyici ile çalıştırır. Örneğin php kullandığımızı düşünelim.

 

index.php adındaki dosyamdaki kodlar da şu şekilde :

 

<?php 


echo $title = "Hoşgeldiniz ";

?>


<html>
<head></head>
<body>
<h1><?php echo $title ?></h1>
</body>
</html>

 

PHP derleyicisi bu dosyayı bir HTML çıktısına dönüştürür. 

Bu derleme işlemi sunucuda gerçekleşir, siz tarayıcınızda bu kodları göremezsiniz. Bu işlem backendde yani makinada çalışır. 

 

Çıktı olarak 

 

<html>
<head></head>
<body>
<h1>Hoşgeldiniz</h1>
</body>
</html>

 

Sonucunu alacaksınız. Programlama dilimiz bize çıktı formatını oluşturdu. Bu oluşan çıktı tekrar Web server'a gelir.

 

Web server, bu dosyanın HTML dosyası olduğunu belirten gibi direktiflerle geri tarayıcıya yollar.

 

HTTP/1.1 200 OK
Date: Wed, 24 Feb 2021 23:40:56 GMT
Server: Apache/2.4.41 (Ubuntu)
Vary: Accept-Encoding
Content-Length: 21866
Connection: close
Content-Type: text/html; charset=UTF-8

 

İlla ki bir html çıktısı olmasına gerek yok, resim video ... gibi dosya türleride olabilir. Bunların hangi dosya olduğunu belirten direktiflerle tarayıca yollar, eğer ki tarayıcı bu dosya türlerini destekliyorsa bu dosyalarıda çalıştırır.

Örneğin bir resim dosyasının image/png türünde olduğunu belirten direktifle chrome tarayıcısına yollarsanız chrome resmi ekranda gösterecektir.

 

 

5) Tarayıcı

 

Tarayıcı gelen çıktıyı sunucudan gelen bu bir html dosyasıdır gibi direktiflere göre yorumlama işlemine girer. Örneğin bir html dosyası ise Burada Browser Engine devreye girer ve html kodlarını bizim için ekrana bir ressam gibi çizer :)

 

Sonuç olarak bizde ekranda istediğimizi görürüz.

 

 


 

Yüzeysel olarak anlatmaya çalıştım, umarım anlatabilmişimdir. Son olarak Arkada renderlama işlemini tek bir yöntem üzerinden anlattım. Modern web programlamada genellikle javascriptte browserda renderlanarak çalışıyor. Başka bir derste ona da değineceğim. Şimdilik hoşçakalın :)

 

İyi günler dilerim.