Rehber: Web Programlama, Web Grafik Tasarımı ve Web Sitesi Açma

Rehber: Web Programlama, Web Grafik Tasarımı ve Web Sitesi Açma
  • 2
    0
    0
    0
  • Merhaba çok değerli WannaGate okuyucuları, bugün web programlama alanında hangi dillerin kullanıldığı, güvenliğin nasıl sağlandığı gibi konulara değinmeye çalışacağız. Bunlardan sonra ise web sitesi geliştirme adımlarının yanı sıra host, domain, SSL, FTP, CPanel gibi kavramları inceleyeceğiz. NOT: Yıldızlı kavramların ne olduğu yazı içinde açıklanıyor. Web programlama ve tasarımda en çok bilinen ve kullanılan diller;
    • HTML (İşaretleme dili)
    • CSS (İşaretleme dili) (Bootstrap Framework*)
    • JavaScript (JQuery)
    • PHP (Laravel Framework)
    • ASP.Net
    • SQL (Veri tabanı yönetim sistemi)

    HTML (Hypertext Markup Language)

    HTML, bir programlama dili olarak tarif edilemez. HTML bir işaretleme dilidir. HTML içine diğer diller gömülerek web siteleri programlanabilir. HTML'i 1990'da CERN'de çalışan Tim Berners Lee geliştirmiştir. HTML işaretleme dilini geliştirmesinden sonra World Wide Web (WWW) sistemini kurmuştur. Bu şekilde CERN'de bilgi paylaşımını kolaylaştırma amacı doğrultusunda ortaya çıkan HTML günümüzde hayatımızın vazgeçilmezi olan Web'in başlıca temelini oluşturmuştur. Kullanım örneği;
    <!-<html> 
      <head>
        <title>Web Dilleri</title>
      </head>
      <body>
        <p style="font-size:6px"><a href=https://www.wannart.com/></a></p>
      </body>
    </html> ->

    CSS (Cascading Style Sheets)

    HTML'e ek olarak geliştirilen CSS daha fazla metin ve format tasarımına sahiptir. CSS'in en büyük avantajlarından birisi de kullanımındaki esnekliktir. Aynı yazı tiplerini her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla tanımlayıp bütün Web sayfalarında ortak olarak kullanılabilir. CSS kodları, HTML kodlarının içine yazılabildiği gibi başka bir CSS dosyası oluşturularak da işlem yapılabilir. CSS daha çok görselliğe yarayan bir işaretleme dilidir. Kullanım örneği;
    #wannagate {
    
    border-collapse: collapse;
    width: 100%;
    background-color: #ecf0f1;
    font-weight: bold;
    
    }

    JavaScript

    1995’in Mayıs ayında Brendan Eich tarafından 10 günde geliştirilen JavaScript aslında ilk başlarda bu adla anılmıyordu. İlk başlarda ismi Mocha olarak adılan bu programlama dili daha sonra LiveScript olarak değiştirildi. En son hali ise JavaScript olarak kaldı. Genellikle JS olarak kısaltılır. Yüksek düzeyde yorumlanmış bir programlama dili olan JavaScript aynı zamanda dinamik, kolay yazıma sahip bir dildir. HTML ve CSS'nin yanı sıra, JavaScript, World Wide Web'in üç temel teknolojisinden biridir. JavaScript, etkileşimli web sayfalarını etkinleştirir ve web uygulamalarının önemli bir parçasıdır. Web sitelerinin büyük çoğunluğu bunu kullanır ve tüm büyük web tarayıcıları bunları yürütmek için özel bir JavaScript motoru içerir. Başlangıçta yalnızca web tarayıcılarında istemci tarafında JavaScript motorları, artık web sunucuları ve veritabanlarındaki sunucu tarafı, kelime işlemcileri ve PDF yazılımı gibi web dışı programlarda dahil olmak üzere birçok başka türde ana bilgisayar yazılımına gömülmüştür. HTML içine de gömülebilen JavaScript'in kullanımına bir örnek (script etiketleri açarak kullanıyoruz);
    <!DOCTYPE html>
    <html>
    <body>
    
    <h2>JavaScript kullanımına örnek</h2>
    
    <p id="demo"></p>
    
    <script>
    var x, y;
    x = 5;
    y = 6;
    document.getElementById("demo").innerHTML = x + y;
    </script>
    
    </body>
    </html>

    PHP / SQL

    PHP: Hypertext Preprocessor olarak adlandırılan Web geliştirme için tasarlanmış ve genel amaçlı programlama dili olarak kullanılan sunucu taraflı bir betik dilidir. Orijinal olarak 1994'te Rasmus Lerdorf tarafından geliştirildi. Lerdorf tarafından C programlama diliyle yazılan PHP ilk başta sadece kişisel ana sayfa (Personal Home Page) olarak durdu. Daha sonra Zeev Suraski ve Andi Gutmans, PHP'nin çekirdeğini yeniden oluşturdu ve güncellenmiş sonucu PHP olarak yayınladı. SQL'in açılımı ise Structured Query Language'dir. Veriler ile işlem yapmak için kullanılan bir veri tabanı yönetim sistemidir. SQL veritabanlarında veri depolamak, yönetmek ve almak için standart bir dildir. Programlama dili değildir. MySQL, SQL Server, MS Access, Oracle, Sybase, Informix, Postgres gibi birçok veri tabanı çeşiti vardır. PHP kodu HTML koduna gömülebilir veya çeşitli web şablon sistemleri, web içerik yönetim sistemleri ve web çerçeveleriyle birlikte kullanılabilir. PHP kullanmanın en iyi yanlarından birisi yeni başlayanlar için öğreniminin kolay olmasıdır. Aynı zamanda profesyonel ekipler için de ileri seviyede özellikler içerir. PHP'nin en iyi yanı ise barındırdığı gelişmiş veri tabanı desteğidir. Büyük veri tabanları barındırmayan siteler için ise en sağlıklısı MySQL veri tabanıdır. Küçük PHP komut satırları ile veri tabanı ve site arasında hızlı bağlantı oluşturulabilir. MySQL'de temel olarak yaptığımız işlemler veri tabanımızdaki tabloya veri eklemek, veri silmek, veriyi almak ve veriyi güncellemek sayılabilir.

    Örnek olarak web sitenizde üyelik sistemi istiyorsunuz. Bunun veri tabanı bağlantısını PHP kullanarak çok rahat bir şekilde yapabilirsiniz. Veri tabanınızda yeni bir tablo oluşturur ve kullanıcıdan kayıt esnasında hangi bilgileri almak istiyorsanız hepsinin karşılığını veri tabanında gösterirsiniz. Kullanıcı kayıt ekranında kaydını tamamladıktan (INSERT komutu devreye giriyor) sonra sitenizde oturum açmak için artık veri tabanınızdaki kullanıcı adı ya da maili ile şifresinin uyuşması lazım olacak. Yine aynı kullanıcı şifresini güncellemek istediğinde veri tabanınızdaki şifrenin silinip yerine yenisinin gelmesi işlemi yapılır. Bu da SQL'in UPDATE komutu ile yapılır. Oturum işlemlerinde PHP'nin getirdiği session fonksiyonu kullanılır.

    PHP'de ek olarak güvenlik anlamında barındırdığı bir sürü fonksiyon vardır. Bunlardan bazıları MD5 ve htmlspecialchars fonksiyonlarıdır. MD5 fonksiyonunun yaptığı iş kullanıcıdan aldığı şifreyi 32 karakterli bir veriye dönüştürmesi ve veri tabanında öyle saklamasıdır. Veri tabanı çalınması durumunda kullanıcıların şifresi güvende tutulmuş sayılabilir. O yüzden basit şifreler yerine karmaşık şifrelerin MD5 karşılığı da karmaşık olacak ve çözülmesi çok zor bir hal alacaktır. Örnek SQL kod satırları;
    CREATE DATABASE wannagate;
    
    SELECT * FROM wannagate_tablo;
    Örnek PHP kod satırları; (HTML içine php tagleri açarak gömdük)
    <!DOCTYPE html>
    <html>
    <body>
    
    <h1>Web Programlama</h1>
    
    <?php
    echo "Merhaba Wannagate!";
    ?>
    
    </body>
    </html>

    ASP.Net

    ASP.NET, dinamik web sayfaları üretmek ve web geliştirme için tasarlanmış açık kaynaklı bir sunucu taraflı web uygulamasıdır. Microsoft tarafından, programcıların dinamik web siteleri, web uygulamaları ve web hizmetleri oluşturmasına izin vermek için geliştirilmiştir. Ayrıca bu sistem, ilk olarak 2002'de duyuruldu.
    Peki bu dillerden sonra gelişen Framework kavramı nedir? Framework nedir sorusuna verebileceğimiz en sade cevap bir yazılım dili ile geliştireceğimiz işlemi daha kolay hale getirmek için o yazılım dili ile oluşturulmuş hazır kod paketleridir. Örnek olarak HTML, CSS ve JS framework'ü olan Bootstrap günümüzde yaygın olarak kullanılmaktır. Özellikle responsive* tasarımlarda ön plandadır. Responsive tasarım ise mobil duyarlı tasarım anlamına gelmektedir. Sitenizin mobil cihazlarda da düzgün bir şekilde görüntülenmesi içindir. Bir diğer çok kullanılan Framework ise Laravel'dir. Laravel Framework'ü ise PHP içindir. Günümüzde sadece PHP kullanımı yerine Laravel kullanımı daha yaygındır. Büyük web siteleri güvenliği nasıl sağlıyor ve bu kadar büyük veri tabanlarını nasıl saklıyor soruları akıllarımıza geliyor. Büyük web sitelerinde olsun, bankaların sitelerinde olsun hepsi beyaz şapkalı hacker dediğimiz güvenlik elemanları çalıştırıyor. Sistemlerin açıklarına kapatmaya ve sistemlerin güvenliklerini en üst düzeyde tutmakla görevliler. "Hiçbir sistem güvenli değildir. Her zaman bir açığı bulunur." diye meşhur bir söz vardır. Aslında bu söz doğru ancak siz yine de açıklarınızı en aza indirmeniz ve herhangi bir sıkıntı olduğunda bu sıkıntıyı en kısa sürede çözmelisiniz. Peki büyük web sitelerindeki bu koskoca veri tabanları nasıl saklanıyor diye cevap aradığımızda büyük web sitelerinin kendine ait host'a sahip olduğunu biliyoruz. Büyük şirketlerin genelde her bölgede kendi sunucuları bulunmaktadır. Eğer siz web sitesi açmak isterseniz bir tane hosting firmasıyla anlaşmanız ve domain adresinizi aldıktan sonra kodlarınızı sunucuya aktarmanız gerekecektir. Bunlara birazdan değineceğiz.

    Web Sitesi Açma Aşamaları

    Öncelikle web sitesi açmanın çok yolu var. Bunlardan bir tanesi hiçbir programlama dili bilmeden internetten hazır tasarım alarak direkt olarak sitenizi oluşturmak. Eğer hazır tasarım istemezseniz ve bazı kısımlarını ben yapayım derseniz yazılım araçları mevcut. Bunlardan en ünlüsü WordPress'tir. WordPress'e kayıt olarak siteniz için özelleştirmeler yapabilirsiniz. WordPress üstünde yine programlama ile sitenizi istediğiniz gibi yapabilirsiniz. Eğer hiçbir yazılım aracı olmadan her şeyini siz yapmak istiyorsanız yukarıda bahsettiğimiz işaretleme dillerinin ve programlama dillerinin bir kısmını bilmeniz gerekecektir. Öncelikli olarak en baştan başlayacaksanız HTML ve CSS öğrenerek başlamanız lazım. Ardından javascript ve kütüphanelerine çalışabilirsiniz. Son olarak PHP ve SQL öğrenmeniz gerekecektir. Bunları öğrenmek için birçok kurs, kitap ve site mevcut. İçlerindeki en popüler olan kaynak W3 Schools üzerinden çalışmak isterseniz buraya tıklayabilirsiniz. Bu dillere çalışırken bilgisayarınıza kurmanız gereken bazı programlar var. Bunlardan ilki XAMPP'dir. Bu program ile bilgisayarınızda sanal bir sunucu oluşturuyorsunuz ve yaptığınız çalışmaların tarayıcı üzerinde nasıl çalıştığını görebiliyorsunuz. Yine aynı zamanda phpmyadmin sunan bu program ile kendi bilgisayarınızda veri tabanı oluşturabilirsiniz. Kodlarınızı derlemek için bir editöre ihtiyacınız olacak. Piyasada birbirinden farklı bir sürü editör bulunmakta. Biz Sublime Text editörünü sadeliğinden ve kolay öğreniminden dolayı öneriyoruz. Bunları kurduktan sonra yapmanız gereken artık dilleri öğrenmek ve öğrendikçe kafanızdaki siteniz için bunları koda dökmek olacak. Sitenizi hazır hale getirdikten sonra sıra domain ve host işlemlerine geliyor. İnternet'te bunları satın alabileceğiniz bir sürü site bulabilirsiniz. Önemli olan verdikleri hizmet ve saklama boyutudur. Domain dediğimiz kavram alan adı anlamına gelir. Yani bir diğer değişle sitenizin adresi olacaktır. Mesela Wannart sitesinin alan adı https://www.wannart.com'dur. Host dediğimiz kavram ise kodlarınızın saklandığı alandır ve sitenize her zaman ulaşılabilmesi için ihtiyaç duyarsınız. Bunları seçerken dikkat edilmesi gerekenler;
    • Hız
    • Güvenlik
    • Saklama Boyutları
    • Desteklediği Programlar
    • Hizmet
    Kendinize en uygun domain ve hosting'i bulduktan sonra dosyalarınızı aktarmanız gerekecek. Çoğu hosting firması cPanel arayüzünü kullanıcılarına sunmakta. cPanel dediğimiz arayüz ise bir kontrol panelidir. Bu panelin sunduğu bir sürü özellik ve kolaylık vardır. MySql veri tabanı, FTP* istemcileri, E-posta hesapları, güvenliğe dair birçok uygulama ve birçok script içerir. FTP dediğimiz kavram ise dosya aktarım iletişim kuralıdır. Birçok farklı program ile bunu gerçekleştirebiliriz. Bizce en kullanışlısı FileZilla'dır. FTP istemcisi ile sunucuda olan dosyalarımızı hızlı bir şekilde güncelleyebilir ve yeni dosyalar atabiliriz. SSL sertifikası dediğimiz kavram ise temelde HTTPS'nin sonundaki S'dir. Sitenizde güvenli işareti çıkmasını sağlar. Ancak bu sadece görüntü tarafıdır asıl iş arka tarafta yapılır. Site adreslerinin doğruluğunu kontrol eder ve iki adres arasındaki veri iletişimini şifreli kanal üzerinden yaparak güvenli bir şekilde iletilmesini sağlar. Bu sertifikayı ücretli olarak satın alabilirsiniz. Domain ve Hosting alırken SSL sertifikası da alabilirsiniz. Son olarak değineceğimiz konu ise sitenizi arama motorlarında çıkartmak ve daha ön sıralarda yer almasını sağlamak. Bu konunun tamamı SEO başlığı altına giriyor. SEO dediğimiz kelime son yıllarda yaygın olarak kullanılıyor belki duymuşsunuzdur. SEO İngilizce olarak Search Engine Optimization yani Arama Motoru Optimizasyonu kelimesinin baş harflerinden oluşur. Sitenizi arama motorları sonuçlarında ön sıralarda çıkartmak için yaptığınız çalışmalardır. Bunun için sitenizde sitemap olmalıdır. Sitemap Google robotlarının sitenizi ziyaret ettiğinde görecekleri ve işlerini kolaylaştıracak bir site haritasıdır. Daha sonra ise Google Search Console'dan sitenizin kaydını yapmanız gerekmekte. Google bu kayıt için sizden bir kayıt isteyecek. Bir tane html dosyasını kendi site dosyalarınızın arasına koymanızı isteyecektir. Aynı zamanda performans ve tıklanma değerlerine de bakabilirsiniz. Web programlamaya ve site yayınlamaya dair aklımıza gelen her şeyi sizlere anlatmaya çalıştık. Umarım faydası olmuştur sevgili WannaGate takipçileri. Yorumlarınızı bizimle paylaşmayı ve bizi takip etmeyi ihmal etmeyin. Kaynakça: 1, 2

    Yorumlar (0)

    Bu gönderi için henüz bir yorum yapılmamış.

    Yorum Bırakın

    Yorum yapmak için üye girişi yapmalısınız. Üye girişi yapmak için buraya tıklayınız.