A'DAN Z'YE YENİ NESİL TEKNİKLERLE WEB TASARIMI VE WEB ... · JavaScript, biraz da CSS öğretilir. Ama o HTML ile ne sayfa yapılır, ne o CSS ile verilere düz-günce bir stil

A'DAN Z'YE YENİ NESİL TEKNİKLERLE WEB TASARIMI VE

WEB PROGRAMLAMA

Uğur GELİŞKEN

Level Kitap®Kocaeli ÜniversitesiUmuttepe Yerleşkesi Sosyal Tesisler Binası Z-16Tel: (0262) 359 10 60 - Tel: (0262) 332 35 49Fax: (0262) 323 18 [email protected]

Level Kitap, Umuttepe Yayınları'nın tescilli markasıdır.

Level Kitap: 8

A'dan Z'ye Yeni Nesil Tekniklerle Web Tasarımı ve Web ProgramlamaYazar: Uğur GELİŞKEN

1. Baskı: Şubat 20162. Baskı: Haziran 20163. Baskı: Ocak 20174. Baskı: Haziran 20175. Baskı: Temmuz 20176. Baskı: Aralık 20177. Baskı: Mayıs 20188. Baskı: Ekim 2019

ISBN: 978-605-65679-7-1Yayıncı Sertifika No:25588

©Level Kitap® Bu kitabın her türlü yayın hakkı Level Kitap’a aittir. Yayınevinin yazılı izni olmadan, kitabın tümünün veya bir kısmının elektronik, mekanik ya da fotokopi yoluyla basımı, yayımı, çoğaltımı ve dağıtımı yapılamaz.

Yayın Yönetmeni: Mustafa BulutSayfa Tasarımı: Kapak Tasarımı: Uğur Gelişken

Baskı-Cilt: Yazın Basın Yayın Matbaacılık Trz. Tic. Ltd. Şti.Çevre Sanayi Sitesi B Blok No: 38-40-42-44İkitelli-Başakşehir-İstanbul Tel: (0212) 565 01 22Sertifika No: 12028

A'DAN Z'YE YENİ NESİL TEKNİKLERLE WEB TASARIMI VE

WEB PROGRAMLAMA

Uğur GELİŞKEN

Uğur GELİŞKEN

1983 doğumlu Uğur GELİŞKEN; yayınlamış olduğu eserler, makaleler ve yaptığı projelerle 2013..2016 yıllarında Adobe Community Professionals programında, 9 farklı alanda uzman-lık seviyesi ile (Web Design, Graphic Design, Print Design, Digital Publishing, eLearning, Web Application Development, Mobile Application Development, Mobile Flash Gaming, Gami-fication) Adobe Topluluk Uzmanı (ACP, MVP) olarak seçildi. Daha sonra Adobe ile çalışmayı bırakıp, OpenSource dünyasına yöneldi. Şu anda Full Stack Web Developer görevi ile IoT platform ürünlerinin gelişimine katkı sağlayarak iş hayatına devam etmektedir.

Yazar hakkında daha detaylı bilgi almak ve blog’unu takip etmek için www.ugurgelisken.com adresini ziyaret edebilirsiniz.

5

ÖNSÖZZamanınızı ve Emeğinizi; Modası Geçmiş Bilgilerle Boşa Harcamayın. Yeni Nesil Tekniklerle Web Tasarımı ve Web Programlama Öğrenin!

Kitabımıza başlarken, ilk olarak kitabımızın sloganında (yukarıda yazan) neler anlatmak iste-diğimden bahsetmek istiyorum.Günümüzde artık kitap okumayı seven insan sayısı çok az. Okumayı tercih edenler arasında da, kitaptaki kodları elle yazıp öğrenmeye çalışanların sayısı neredeyse parmakla sayılacak kadar az. Böyle tuğla gibi kalın bir kitabı okuma cesareti gösterdiğiniz için Siz’i tebrik ederim.Klişe bir laf ama “Günümüz; internet çağı, bilgi çağı, görsel çağ…” demekten kendimi alıkoya-mayacağım. Artık “Her bir bilgiye istediğimiz zaman anında ulaşabiliyoruz” diye de ikinci bir klişe lafı ekleyerek devam edelim…Evet, istediğimiz her bilgiye anında ulaşıyoruz; ama bu bilgilerin ne kadarı işe yarar bilgi, ne kadarı güncel, ne kadarı da anlaşılabilir halde… Bir konuyu öğrenmek için araştırma muhte-melen kaybolursunuz, kaybolduğunuzu fark etmeniz de bazen yıllar alabilir. Basılı kaynak-larda, yani kitaplarda da genelde eski teknikler anlatılır. Güncel olanlarda da ya giriş seviye-sinde, ya da en kritik konuda kitap bitmiş bir şekilde olur. Laf aramızda, bazı yazarlar önemli bilgileri paylaşmak istemezler. Yine neyi öğreneceğinizi bilmeniz de, size çok fazla vakit kay-bettirecektir. Çünkü öğrenmeye yeni başlayan insanlar, bir anda her şeyi öğrenmeye çalışıp, çoğunlukla da bilgi yoğunluğuna maruz kaldığı için, o anlık öğrendiği bilgiler zihinlerinde kalıcı olmaz (Aynı geçici bilgi yığını, görsel eğitim videoları ile öğrenmeye çalışanlar da olur. Videoyu izlersiniz, izlerken çok basit gelir ve yaparım bunu dersiniz, ama video bitince de anında unutursunuz, hatta hangi konuyu izlediğiniz bile aklınıza gelmez. Bu sendrom, sına-va son gece çalışan öğrencinin geçici bilgi hafızası ile aynıdır). Yine öğrenmiş olduklarının da çoğunun aslında sektörde daha kullanılmadığını fark ettiklerinde, kaybetmiş oldukları zaman ve emek için üzüntü duyacaklardır. Böyle bir duyguyu ben zamanında çok yaşadım, sizin de yaşamanızı istemem. Bu nedenle size doğru öğrenme metotları ile doğru teknolo-jileri uygulamalarla öğrenmenizde yardımcı olacağım. Yine kitap boyunca sizi gereksiz me-tinler ve sırf kitabı doldurmak için yazılmış olan çöp yazılarla sıkmayacağım. Direkt konuya gireceğiz ve ilk sayfalardan itibaren somut olarak sektörde işe yarar bir şeyler öğrenmeye başlayacaksınız. Yeri geldikçe dipnotlarla ekstra bilgiler verip konuyu daha iyi kavramanızı sağlayacağım.

Alışılagelmiş tekniklerle web tasarımı öğrenmeye başlayan bir kişiye ilk olarak HTML, biraz JavaScript, biraz da CSS öğretilir. Ama o HTML ile ne sayfa yapılır, ne o CSS ile verilere düz-günce bir stil verilir, ne de o JavaScript ile adam gibi sayfa yönetimi yapılabilir. Günümüzde HTML değil, HTML5 etiketleme dili (5.1 versiyonu çıkmıştır), bu dil ile gelen teknolojiler kul-lanılmaktadır. Ayrıca HTML5 dili mobil programcılıkta da hybrid programlamanın temelini oluşturmaktadır. Yani önümüzdeki yıllarda bu dil baya kullanılacak ve geliştirilmeye de de-vam edilecektir. Sözün özü; HTML5 ile ne kadar samimi olursanız, sizin o kadar avantajınıza olacaktır. Ayrıca yine JavaScript dili de web arayüz programlama yapılmaktadır. Ancak kimse oturup da sıfırdan el ile JavaScript kodlamıyor, kodlayana da sektörde kötü gözle bakılıyor. Bunun yerine son yıllarda onlarca JavaScript Framework’u geliştirilmiştir. En bilinenleri ara-sında Angular, Reract, Vue, KnockoutJS ve Phaser.js (web oyun programcılığında kullanılır) sayılabilir (Bu Framework’ler çıkmadan önce, eskiden çoğunluk JavaScript’in bir işe yarama-

6

A'dan Z'ye Yeni Nesil Tekniklerle Web Tasarımı ve Web Programlama

dığını düşünüyordu. Kullanan da pop-up sayfalar ve form verilerinin doğruluğunu kontrol etmekte kullanıyordu. Hâlbuki şu an JavaScript, yine hala eski JavaScript. Framework’ler ise JavaScript’in kullanılmasını kolaylaştıran metotlar yığınıdır). Web sayfalarında görselliği oluştururken de CSS (3. versiyon) kullanılır. Yine eğitimlerde gör-düğüm, CSS’i elle kullandıkları ve sıfırdan tasarım ürettikleridir. Yapılan işlem öğretici bir şey gibi görünüyor; ancak CSS stilleri rahatlıkla kullanabilmek için onlarca araç üretilmiştir ve bu tasarımlar da yine standartlaşarak Framework’ler (Bootstrap, Semantic UI, Pure, UIkit vs.) yardımı ile yapılmaktadır. Hatta belli başlı tasarım araçlarını kullanarak da CSS kodları üre-tebilirsiniz. Mesela web sayfanızda yazdığınız bir yazı eğer sayfaya enlemesine sığmıyorsa, sayfa dar olduğunda bunun aşağıya kayması gerekmektedir. Bu iş için ya oturup sıfırdan CSS kodu yazmanız gerekecek ya da Bootstrap Framework’u ile iki tane stil tanımlaması ekleye-ceksiniz. Aynı şekilde web sayfanızda bir galeri kodlayacaksanız ya sıfırdan o resmin geçiş efektin, butonları vs. kodlamanız gerekecek. Yine bu galerinin de her ekrana göre otomatik boyutlanması lazım. İsterseniz saatlerce JavaScript ve CSS ile kod yazın, isterseniz herhangi bir JavaScript framework’ü veya Bootstrap ile bu işi birkaç dakika içinde halledin. Kısacası; JavaScript’in ve CSS’in temellerini öğrenin, ancak oturup da sıfırdan bir şeyler yapmak için uğraşmayın (veya isterseniz uğraşın, tamamen tercih ve ihtiyaç meselesi). Sonuçta yapacağı-nız şey; ya tasarım standartlarının dışında olacak ve kullanıcılar tarafından beğenilmeyecek ya da eğer olması gereken bir yapıda kodlayacaksınız. Eğer ki olması gereken yapıda kodlar-sanız, yine Amerika’yı yeniden keşfetmiş olacaksınız.Son yıllarda bir de responsive, yani duyarlı tasarım kavramı moda oldu. Hiç duydunuz mu nedir duyarlı tasarım diye?Biliyorsunuz, hepimizin elinde artık kocaman akıllı telefonlar ve tabletler var. Bir de masamı-zın üstünde bir bilgisayar. Şimdi bir web sayfası tasarladığınızı düşünün. Web sayfasını geç-mişte kalan tekniklerle tasarladığınızda, muhtemelen masaüstü bilgisayarlarda görünecek şekilde tasarlayacaksınız. Ancak yapılan araştırmalar gösteriyor ki, insanlar web sayfalarına mobil cihazlardan daha çok giriyor. Yapmış olduğunuz web sayfaları acaba mobil cihazların ekranlarında nasıl görünüyor?Öncelikle mobil cihazlar!

Responsive kavramı ile JavaScript ve CSS Framework’leri kullanılarak web sayfalarınızı duyar-lı hale getirebilirsiniz. Duyarlılık kavramında temel etken madde ekranın boyutudur. Mesela masaüstü bilgisayarınızda sitenizin butonları üst bar üzerinde yan yana dizili iken, mobil ci-hazda bu butonlar yan yana geldiğinde ufacık olacak ve insanlar bu butonlara tıklayamaya-cak. Bunun çözümü olarak, o butonlar ekrandan kaybolacak ve bir liste halinde listelenecek. Aynı şekilde eğer yan yana üç kolon halinde metin veya resim sıralıyorsanız, ekran daraldığı için bu resim ve yazılar sıkışacak-küçülecek ve görünmeyecek hale gelecek. Bu durumda da o yan yana olan üç kolon, bu sefer alt alta gelecek şekilde sıralanacaktır. İşte ben de kitap boyunca size yeni nesil araçları ve teknikleri kullanarak nasıl başarılı bir web sayfası hazır-layacağınızı göstermeye çalışacağım.

Tabi işimiz sadece web arayüz programlama olmayacak. Size temelden başlayarak web ta-sarımında dikkat etmeniz gerekenleri, de öğreteceğim. Kitap boyunca işleyeceğimiz konular hemen hemen şöyle olacaktır; kitaba başlamadan önce neyi öğreneceğiniz bilmeniz daha faydalı olacaktır.Web tasarımı ve programlamaya yeni başladığınızı düşünerek, bu işin temellerinden biraz bahsedeceğiz. Sonrasında da bir web sayfasını oluşturan elementleri öğreneceksiniz. İşi pra-tiğe dökmeden önce de eskiz çalışmalarınızı nasıl yapacağınızı ve planlama yapmayı öğrene-ceksiniz. Her işin başı plandır, hazırlıksız yapılan bir iş hep yarım kalır.

Önsöz

7

Sonrasında web programcılığının temeli olan HTML5 dilini ve bu dilin getirdiği teknolojileri öğreneceksiniz. HTML5 dilinin etiketlerini (yeni geliştirilen etiketler de dahil), metin, resim, video, ses gibi dosyalarla çalışmayı, form (yeni nesil form ve elementleri) oluşturmayı, tab-lolarla ve div’lerle (kutu modeli) çalışmayı, bununla birlikte HTML5 dili API’lerini öğrene-ceksiniz. API derken; WebSocket, Canvas programlama, Drag-Drop işlemleri, Local Storage, Geolocation… ) gibi teknolojilerden bahsediyorum. Canvas programlama ile oyun kodlama-yı, Drag-Drop ile de div nesneleri sürükleyip taşımayı, Local Storage ile de veri kaydedip oku-mayı, Geolocation ile de GPS verilerini almayı öğreneceksiniz.Ayrıca Fluid, yani akışkan (bazıları Duyarlı, bazıları da Responsive der) arayüz program-lama tekniklerini de öğreneceksiniz. Tasarımlarınızı yaparken HTML5 ve Bootstrap 4 CSS Framework’u kullanacaksınız.Web arayüzüne interaktiflik katmak için JavaScript Programlama konusuna yeterince deği-neceğiz ve bu dile ile web programlama yapabileceksiniz. Sonrasında ise web arayüz prog-ramlamada en çok kullanılan JavaScript kütüphanesi (library) olan jQuery’i nasıl kullanaca-ğınızı ve uzun uzun JavaScript kodları yazmak yerine jQuery ile daha kısa kodlar yazacağız. Az kod, çok iş!

Günümüzde artık bir çok popüler web sayfasının SPA, yani Single Page Application sistemi-ne geçmesiyle birlikte Modüler JavaScript Programlama teknikleri gelişmiştir ve React 16+, Vue 2.0, Angular.JS 1.5 JavaScript framework’leri şu an popüler olarak kullanılıyor. Aslında şu an kitabın 8. baskı güncellemesi sırasında Angular.JS’in 8. versiyonu çıktı (sürüm güncelle-mesi çok sık yapılıyor) ve 2 üzeri sürümünden itibaren sadece Angular ismi ile anılıyor. İyi de o zaman neden 1.5 versiyonunu da öğreniyoruz?Angular.JS, bir jQuery kütüphanesi gibi direkt olarak web projesine dahil edilebilir ve kolay-lıkla herhangi bir ek işlem gerektirmeden rahatlıkla kullanılabilir, öğrenme eşiği ise düşük-tür. Özellikle bir ekip ile çalışmayı gerektirmeyen basit ve hızlı yapılması gereken projelerde halen tercih ediliyor (ben de tercih ediyorum). Angular ise, 2. versiyondan itibaren JavaSc-ript yerine TypeScript diline geçmiştir. Bu sebeple de Angular kullanabilmek için ilk olarak TypeScript 2.0 öğrenmeniz gerekiyor. TypeScript’i tarayıcılar desteklemez, bu nedenle Node.JS ile ön işlemden geçirip JavaScript’e dönüştürmek gerekir. Angular ile modüler web prog-ramlama daha güçlü bir şekilde yapılabiliyor, ancak geliştirme süreci daha uzun sürüyor. Orta ve büyük projelerde kullanılması daha uygun. Öğrenme eşiği ise zorlu bir süreçtir. Peki, eski teknolojide mi kalacağız, tabi ki hayır…Angular öğrenmeyeceğiz diye karamsarlığa kapılmayın. Şu an Angular’ın çok güçlü iki rakibi var ve biz ikisini de çok fazla içine dalmadan ama yeterli bir seviyede kitapta göreceğiz. Bun-lar; React ve Vue.React ve Vue EcmaScript 6 dilini kullanmaktadır. Bu nedenle React ve Vue kullanabilmeniz için 6 ve üzeri sürümlerde gelen yeniliklerle beraber EcmaScript programlamayı da öğrene-ceksiniz.React’ı öğrenmesi kolay, ancak uzmanlaşması zordur. Genelde piyasada React çok kolay diye bir laf döner ama işin içine girip profesyonel uygulamalar geliştirmeye başlayınca geliş-tiriciyi stresli zamanlara sokabiliyor. Vue 2.0 ise Angular ve React’ın iyi yönlerini alarak ikisini harmanlayan bir framework’tür. Bu nedenle Angular ve React’tan bezmiş profesyoneller Vue’ye yönelmiştir. JavaScript Framework’lerini öğrenirken bir anda sanki bambaşka bir boyuta geçmiş gibi his-sedecek ve artık web arayüz programlamadan sıkılmak yerine eğlenmeye başlayacaksınız.Framework kullanmaktan korkmayın!


8

Hazır mobil platform için arayüz tasarımı geliştirmekten de bahsetmişken, web sayfalarımızı birer mobil uygulamaymış gibi davranmasını sağlamak amacıyla Progressive Web Applicati-on tekniğine değineceğiz. Bu teknikle web sayfamıza giren ziyaretçiler isterlerse web sayfa-mızı bir uygulama olarak ekrana ikon olarak ekleyebilecek. İkona tıklandığında da tarayıcıda değil, doğrudan tam ekran uygulamada açılacak. Gerçi bu tekniğin arkasında yatan tekno-lojiyi yine mobil tarayıcılar sağlıyor. Günümüzde de çoğu popüler mobil web tarayıcısı bu teknolojiyi desteklemektedir.Web programcılığı yaparken hatalarımızı kolaylıkla fark edebilmek veya direkt web sayfası üzerinde düzenlemeler yaparak değişiklikleri izleyebilmek için Chrome web tarayıcısı ile Go-ogle Developer Tools’u kullanmayı da öğreneceksiniz.Arayüz programlamada web sayfanızın Google, Bing ve Yandex gibi arama motorlarında üst sıralara çıkabilmesi için SEO, yani arama motoru optimizasyonu konusuna değineceğiz. Bu aşamadan sonra artık önyüz programlama ile işimiz bitmiş olacak, sonrasında da sunucu taraflı programlama ve veritabanı yönetimine bakacağız.Bir web sayfasının içeriği nasıl yönetilir? Yani her seferinde bilgileri kodlar arasından düzen-leyip yeniden mi yayınlayacaksınız? Bunu yapanlar hala var, ama tamamen çağ dışı bir yön-tem. Web sayfanızın içeriğinin yönetilebilir olmasını sağlamamız gerekiyor. Yani sitenizin bir yönetim paneli olacak ve hazırlamış olduğumuz web sayfası şablonunda, ilgili yerlere ge-lecek olan verilerin bir yönetim paneli vasıtasıyla nasıl yapılacağını göreceksiniz. Bunun için de PHP ve MySQL ikilisini kullanacağız. PHP ile sitenizin back-end, yani Server üzerinde çalı-şacak kısmını kodlayacağız. MySQL veritabanından veriler alınacak, sitenize aktarılacak. Aynı şekilde MySQL’e de verileriniz kaydedebileceğiniz bir yönetim paneli hazırlayacağız. Böylece back-end developer’ların dünyasına da girmiş olacağız. CMS (İçerik Yönetim Sistemi) hazırlamaktan bunalanlarınız olacağını veya bu konuda ken-dini zorlamak istemeyenleriniz de olacaktır, onları da düşündüm. Onlar için (aslında herkes kullanabilir) CushyCMS servisi ile basit seviyede statik olan web sayfamızı, hiçbir CMS kodu yazmadan, yani PHP-MySQL veya buna benzer bir sistemle sunucu taraflı kod geliştirme-den, içeriği tamamen yönetilebilir hale getireceğiz. İlgi çekiç değil mi? İlk duyduğumda beni de heyecanlandırmıştı.Ayrıca, kitapta öğrendiğimiz tüm teknikleri birleştirerek; kendi yönetilebilir responsive web sayfamızı tasarlayacak ve bu sayfanın kendi CMS panelini kendimiz oturup sıfırdan yaza-cağız. Bu bölümü hazırlarken çok zevk almıştım, eminim siz de okurken ve uygularken aynı hazzı alacaksınız.Bütün bunları öğrendikten sonra eğlenceli bir konuya geçiş yapacağız. Hep birlikte HTML5 Canvas / WebGL teknolojisini kullanarak JavaScript ile Oyun Programlama konusuna deği-nip, basit bir oyun yapacağız. Sonraki bölümde ise Phaser.js ile Canvas sisteminde nasıl oyun kodlanacağını da göreceğiz (Tabi baştan sona her şeyi ile değil). Bu bölümü zevkle okuyaca-ğınızı düşünüyorum.Hazırladığımız web uygulamalarımızı klasik yöntemle doğrudan FTP programları ile hosting servislerinden aldığımız alanlara nasıl yükleyeceğimizi; cPanel üzerinden e-mail açmayı, ye-deklemeyi, günlük kayıtlarını incelemeyi göreceğiz. İçerik bence güzel, dolu dolu... Belki çok önemli olan bazı konular es geçilmiştir; sebebi de her alanda uzman olamayacağımdan veya o alanda yetersiz bilgi aktarımında bulunmak is-temediğimdedir. Bazen bazı konularda da referans kaynaklardan faydalandım, ama mümkün olduğunca daha anlaşılabilir bir şekilde kendi alışılagelmiş tarzımla anlatmaya çalıştım. Uma-rım hazırladığım kitabı okuyan herkese faydası olur.

Uğur GELİŞKEN www.ugurgelisken.com

9

KİTABIN İŞLEYİŞİ HAKKINDA

• Kitapta öğreneceğiniz her bilgi ve teknik belirli bir sıra ile gitmektedir. Bu nedenle konu-ları sırasıyla işlemeniz daha verimli olur, ancak şart değil. Yine kitabın işleyişini hazırlar-ken; hem bireysel olarak hem de ders ortamında eğitmen denetimi ile kullanabileceği-niz bir şekilde planladım.

• Kitabı okurken, her bölümde öğrendikleriniz mutlaka pratiğe dökerek pekiştirin. Örnek-lerde yer alan parametreleri değiştirerek değişiklikleri izleyin. Böylece hangi parametre ne işe yarıyor, daha net bir şekilde görebilirsiniz.

• Etkili bir öğrenme tekniği olarak ben, bunun gibi teknik bir kitap aldığımda ilk olarak kitabın içerdiği konu başlıklarına ve kitabın neler ihtiva ettiğinde bakmayı tercih ederim. Sonra kitabı baştan sona roman gibi düz bir şekilde okurum, böylece kitabın işleyişi ve anlatım tekniğini kavrarım. Sonra da her bir bölümü tek tek pratik yaparak işlerim. Bu şekilde daha verimli öğrendiğimi düşünüyorum, size de öneririm. Tabi sizin daha etkili bir öğrenme metodunuz varsa uygulamakta özgürsünüz.

• Kitapta anlatılan konuları işleyebilmek için bazı programları yüklemeniz gerekebilir. Bahsi geçen programların indirme linkleri kitap içerisinde yer yer verilecektir. Eğer bilgi-sayarınızda yüklü değillerse mutlaka yükleyin, yoksa kitaptaki örnekleri uygulayamaya-bilirsiniz.

• Hemen hemen her örneğin kaynak kodları www.ugurgelisken.com adresinde ana say-fada gösterilen indirme link'inden indireceğiniz klasör içinde bulunmaktadır. Kitaptaki örnekleri öğrenirken bu dosyaları kullanmanızı önermem, hazıra alışmayın! Kendiniz yazarsanız, öğrendikleriniz daha kalıcı olur. Bu dosyaları sadece kendi yazdığınız kodlar çalışmadığında kontrol etmek amacı ile kullanın.

• Kitaptaki her örnek test edilerek hazırlanmıştır. Yani sizin yaptığınız çalışmıyorsa, muh-temelen eksik veya hatalı bir şeyler yapmış olabilir. Sorunu bulana kadar kitabı dikkatli-ce okuyun, iyice kurcalayın. Eğer yine de çalışmıyorsa tarayıcıların yeni versiyonlarında bir değişiklik veya framework’lerin yeni sürümlerinde farklılıklar olabilir. Nedenlerini iyice araştırın.

• Konuların işleniş sırası; temelden ileri seviyeye doğru ilerlemektedir. Son bölümlerin birkaçı zorunlu bilmeniz gerekenlerden değil. Ancak onları da öğrenmeniz, sektöre atıl-dığınızda sizi birkaç adım öne çıkaracaktır.

KAYNAK KODLAR

• Kitabın önceki versiyonlarında kitapta anlatılan konulara ait kaynak kodlar ve program-lar DVD içerisinde yer alıyordu. Ancak hem DVD ile ilgili okuma sorunu, hasarlı olma veya kayıp gibi şikayetler geldiği için hem de artık son zamanlarda üretilen dizüstü bil-gisayarların optik sürücüleri olmaması sebebiyle kitabın “2020 Güncelleştirilmiş ve Ge-nişletilmiş” sürümünden itibaren kitabı DVD’siz hazırlama kararı aldım.

• Kitapta bahsi geçen konulara ait kaynak kodlara (hepsi değil; sadece bir ihtimal anla-makta ve yazmakta vaktinizi alabileceğiniz örneklere ait olanlar) ve kitap boyunca ihti-yacınız olacak programların indirme linklerine www.ugurgelisken.com web sayfamdan ulaşabilirsiniz. İndirdiğiniz sıkıştırılmış klasörü açarak örneklere ait dosyalar üzerinden çalışabilirsiniz.

10

11

İÇİNDEKİLER

ÖNSÖZ.............................................................................................................................5

1- Web Dünyasının Dillerini Tanıma, Web Tasarımında Altın Kurallar ve Wireframe Araçlarıyla Eskiz Tasarlama ...........................................................................35Giriş ......................................................................................................................................35

Web Tasarımcısı, Web Arayüz ve Arkaplan Programcıları Ne İş Yapar ............................35Web Tasarımcısı.........................................................................................................36Web Arayüz (User Interface - Frontend) Programcısı ................................................38Web Arkaplan (Backend) Programcısı .......................................................................39

Öğrenmeniz Gerekenler, Kitap Boyunca Öğreneceğiz Dil ve Online Derleyiciler ............39Sanal HTML5, CSS ve JAVASCRIPT Kod Editörleri ............................................................39Sanal PHP Kod Editörleri / Derleyicileri ...........................................................................41Web Önyüz Tasarım Dilleri ve Framework’ler .................................................................42Web Arkaplan Kodlama Dilleri ve Framework’ler ...........................................................43Web Programlamada Şimdiden Bilmeniz Gereken 3 Altın Kural .....................................43

Duyarlılık ...................................................................................................................43İlerici ve Sürdürülebilir Teknolojiler Kullanma ...........................................................44Performans ................................................................................................................45

Web Tasarımında Yeni Trendler, Püf Noktalar ve Kaçınmanız Gerekenler ............................46Yeni Trendler ...................................................................................................................47

Büyük Düşünün .........................................................................................................47Multimedya Deneyimi ...............................................................................................47Sade ve Zarif Materyal Tasarımı ................................................................................48Karolar .......................................................................................................................49Web Grafikleri Yerine İnfografik ................................................................................50Basitlik ve Odaklanma ...............................................................................................51Paralaks Etkisi ............................................................................................................51Daha Az Tıklama, Daha Az Kaydırma .........................................................................52Artırılmış Gerçekçilik .................................................................................................52Sosyal Medya Siteleri ile Entegrasyon .......................................................................53Kaçınılması Gerekenler Amatörce Davranışlar ..........................................................55Sitemize Hoşgeldiniz Yazıları......................................................................................55Siteye Giriş İçin Arayüzler ..........................................................................................55


Yeni Sayfalar Açtırmak ...............................................................................................55Arkaplan Sesleri .........................................................................................................56Çok Fazla Animasyon .................................................................................................56Çok Fazla Anlamsız Grafik ..........................................................................................56Kötü Okunabilirlik ......................................................................................................56Renk Uyumsuzlukları .................................................................................................56Hizalamadan Yoksun Tasarım ....................................................................................57Yatay Sürgü Çubukları ................................................................................................57Erişilebilirlik Sorunu...................................................................................................57Ana Sayfaya Dönüş Sorunu........................................................................................57Kötü Navigasyon ........................................................................................................57Arama Motorunun Olmaması ...................................................................................58Kategorilenmemiş İçerik Düzeni ................................................................................58Tutarsız Arayüz Tasarımı ............................................................................................58İletişim Formunun Olmaması ....................................................................................58Karmaşık Kayıt Formları .............................................................................................58Kullanışlı Olmayan Ekran Boyutu ...............................................................................58

Tasarıma Başlamadan Önce Eskiz .........................................................................................59WireFrame Nedir ve Faydası Nedir .................................................................................59WireFrame Türleri ve Örnek Eskiz Çalışmaları ................................................................60

GoMockingBird .........................................................................................................61Moqups .....................................................................................................................61Creately .....................................................................................................................62

2- HTML5 (5.1) Dilinin Genel Kullanımı, Etiketler, Formlar ve Semantic Web Sayfa Düzeni ...........................................................................................65Neden HTML5 Önemli ..........................................................................................................65

HTML5’in Yeni Web Standartlarını Getirmesi .................................................................65Hızlı ve Kolay Kodlama ....................................................................................................66Modern Yapısı .................................................................................................................66Mobil Cihaz Desteği ........................................................................................................66Tarayıcı Desteği ...............................................................................................................66Temiz Kodlama Sistemi ...................................................................................................67Semantik Web ve Genişletilebilirlik ................................................................................67Daha İyi Veri Girişi ...........................................................................................................67Video ve Ses Desteği .......................................................................................................68CSS3 ile Daha Zengin İçerikler Hazırlama İmkanı ............................................................68Çevrimdışı Uygulama Yetenekleri ...................................................................................68Doğal API’ler ile Güç Artışı ..............................................................................................68

12

13

İçindekiler

Yerel Veri Depolama ........................................................................................................68Oyun Programlama .........................................................................................................69Mobil Uygulama Geliştirme ............................................................................................69

HTML5 Kodlarının Yazımı, Element Kavramı ve Sayfa Sözdizimi ...........................................69Elementler ......................................................................................................................69HTML5 Sözdizimi .............................................................................................................70

Elementlere Özellikler (Attribute) ve Stil (Style) Verme........................................................73Metin ve Paragraflar Yazma ..................................................................................................75

Paragraflar ......................................................................................................................76Başlıklar ve Başlık Sistemi ...............................................................................................76Önbiçimlendirilmiş Metinler ...........................................................................................77Yeni Satır .........................................................................................................................77Kalın, İtalik, Vurgulu Yazılar .............................................................................................78Küçük, Üs ve Alt Yazılar ...................................................................................................78İşaretlenmiş Yazılar .........................................................................................................79Üzeri ve Altı Çizili Yazılar .................................................................................................79Liste Şeklinde Yazılar .......................................................................................................80Yazı ve Yazı Arkaplan Rengi .............................................................................................83Yazı Font Büyüklüğü ........................................................................................................85Yazı Font Tipi ...................................................................................................................86Yazıları Hizalama .............................................................................................................87Resim Gösterimi ve Düzenlemeler ..................................................................................88Resim Ekleme ..................................................................................................................88Resimleri Paragraf İçinde Hizalama .................................................................................90Resim Haritası ve Tıklama Alanları için Koordinat Belirtme ............................................91Responsive Tasarım için <img> Etiketine Birden Fazla Kaynak Tanımlama .....................92

iFrame ile İç Sayfa Gösterme ................................................................................................96Video Oynatmak ve Oynatıcı Modları ...................................................................................97Tablolar ile Çalışma ............................................................................................................ 101

Tablo Oluşturma ve Veri Tanımlama ............................................................................ 101Tablo Kenarlıkları ......................................................................................................... 102Tabloya Başlık Ekleme .................................................................................................. 104İlk Sütun Başlığı Ekleme ve Stillendirme ...................................................................... 105Tabloya Üst Bilgi ile Alt Bilgi Ekleme, Gövdeyi Ayırma ................................................. 106Tablo Kenar Çizgisi Boşlukları ....................................................................................... 108Hücre İçi Kenar Boşluğu ............................................................................................... 109Tablo Genişliği ve Hücrelerin Genişlik Oranları ............................................................ 110Satırları Birleştirme ...................................................................................................... 111Sütunları Birleştirme .................................................................................................... 113

14


Bloklar (Kutu Modeli) ile Çalışma ...................................................................................... 113Yeniden Düzenlenebilir İçerikler ........................................................................................ 120Formlar, Form Olayları ve Akıllı Form Elementlerinin Kullanımları ................................... 121

Form Elementleri Tanımak ve Özelliklerini Belirlemek ................................................. 121<label> Etiket .......................................................................................................... 121<input> Tek Satırlık Metin Kutusu .......................................................................... 122<textarea> Çok Satırlık Metin Kutusu ..................................................................... 122<input> ve <textarea> Etiketlerinin Ortak Özellik Denetimleri .............................. 123<button> Buton ...................................................................................................... 125<fieldset> Set Alanı ve <legend> Başlık .................................................................. 128<datalist> Otomatik Doldurma Listesi .................................................................... 128<option> Açılır Liste ................................................................................................ 129<optgroup> Grup Destekli Açılır Liste ..................................................................... 130<meter> Metre ....................................................................................................... 130<progress> İlerleme Çubuğu .................................................................................. 133<output> Çıktı ........................................................................................................ 133

Veri Giriş Tipleri ve Veri Doğrulama ............................................................................. 134radio: Tek Seçmeli Onay Kutusu ............................................................................. 135checkbox: Çoklu Seçmeli Onay Kutusu ................................................................... 136url: Web Adresi....................................................................................................... 137tel: Telefon.............................................................................................................. 137password: Şifre ....................................................................................................... 138range: Sayı Aralığı ................................................................................................... 139color: Renk ............................................................................................................. 139search: Ara ............................................................................................................. 140email: E-Mail .......................................................................................................... 141date: Tarih .............................................................................................................. 141month: Ay ............................................................................................................... 142week: Hafta ............................................................................................................ 142time: Saat ve Dakika ............................................................................................... 143datetime-local: Yerel Zaman ................................................................................... 144submit: Gönder ...................................................................................................... 144

Form Elementlerinde İpucu Balonlu Gösterme ........................................................... 144WEB 3.0 Semantic Web ve Düzen Sistemi ......................................................................... 145

Semantic Web Nedir .................................................................................................... 145Semantic Web Etiketleri ve Kullanım Metotları ........................................................... 146

<article> ................................................................................................................. 147<aside> ................................................................................................................... 147<details> ................................................................................................................. 147

15

İçindekiler

<figure> .................................................................................................................. 148<figcaption> ........................................................................................................... 148<footer> ................................................................................................................. 148<header> ................................................................................................................ 149<hgroup> ................................................................................................................ 149<mark> ................................................................................................................... 149<nav> ...................................................................................................................... 149<section> ................................................................................................................ 150<summary> ............................................................................................................ 150<time> .................................................................................................................... 150

Önbelleklemeli (Offline Cache) Web Uygulamaları ve Manifesto Hazırlama .................... 151Önbelleklenecek Sayfayı Belirtme................................................................................ 152Manifesto Hazırlama, Önbelleklenecek veya Yeniden Okunacak Olan Dosyaları Belirtme ................................................................. 152Önbelleklenebilir Responsive Web Sayfası Örneği ....................................................... 152Manifesto Hazırlama, Önbelleklenecek veya Yeniden Okunacak Olan Dosyaları Belirtme ............................................................................................... 152Önbelleklenebilir Responsive Web Sayfası Örneği ....................................................... 152

Sağ Tuş Menüsüne Buton Ekleme ..................................................................................... 157

3- CSS3, SASS - SCSS ile Veri Biçimlendirme ve Örnek Uygulamalar ..............................161CSS Nedir ve Sözdizimi Kuralları (Syntax) ........................................................................... 161CSS’in Avantajları ve Kullanım Kolaylığı ............................................................................. 163HTML5 Dosyalarına CSS Dosyalarını Dahil Etme Metotları (Include) ................................. 165

Satır İçi CSS Kodu Yazma .............................................................................................. 165Sayfa İçinde CSS Kodu Yazma ....................................................................................... 166Harici CSS Kodlarını Sayfaya Yükleme .......................................................................... 166Ana (Master) CSS İçine Alt CSS Dosyaları Yükleme....................................................... 167

Bitmek Bilmeyen Tarayıcı Destek Sorununa Göre CSS Kodu Yazımı ................................... 168CSS Kutu Modeli ................................................................................................................ 170CSS Ölçü Birimleri .............................................................................................................. 171Element Pozisyonlama Modelleri ...................................................................................... 173

Static (Olduğu Gibi) ...................................................................................................... 173Fixed (Sabitlemek) ....................................................................................................... 173Relative (Göreceli) ....................................................................................................... 175Absolute (Mutlak) ........................................................................................................ 176

Element Görünüm Düzenleri ............................................................................................. 177Görünmez (None) ........................................................................................................ 177Block (Blok) .................................................................................................................. 178

16


Inline (Satır içi) ............................................................................................................. 179Görünmezlik (visibility) ve Görüntülenmeme (display: none) Farkı ............................. 180

Seçiciler, Özellikler ve Değerler (Selectors, Properties ve Values) ..................................... 181Element Seçici .............................................................................................................. 182Çoklu Element Seçici .................................................................................................... 183!important ile Stil Ezme (Override) .............................................................................. 185class Seçici ................................................................................................................... 186id Seçici ........................................................................................................................ 188Element İçindeki Başka Elementi Seçmek .................................................................... 189

Pseudo (Sözde) Seçiciler ve Elementler ............................................................................. 191Sözde (Pseudo) Elementler .......................................................................................... 191

::after ..................................................................................................................... 191::before ................................................................................................................... 192::first-letter ............................................................................................................. 192::first-line ................................................................................................................ 193::selection ............................................................................................................... 194

Sözde (Pseudo) Sınıflar ................................................................................................ 194:empty .................................................................................................................... 198:enabled ................................................................................................................. 199:first-child ............................................................................................................... 200:first-of-type ........................................................................................................... 200:focus ...................................................................................................................... 201:hover ..................................................................................................................... 202:last-of-type ............................................................................................................ 206:nth-child(n) ........................................................................................................... 208:nth-last-child(n) ..................................................................................................... 209:nth-of-type(n)........................................................................................................ 210:only-of-type ........................................................................................................... 210:only-child ............................................................................................................... 211:optional ................................................................................................................. 211:out-of-range .......................................................................................................... 212:read-only ............................................................................................................... 213:read-write ............................................................................................................. 214:required ................................................................................................................ 214:root ....................................................................................................................... 215:target ..................................................................................................................... 215:valid ....................................................................................................................... 217:visited .................................................................................................................... 218

CSS3 ile Gelen Yeniliklerin Kullanımı .................................................................................. 219

17

İçindekiler

CSS3 Akıllı Seçiciler ve Komut Desenleri ...................................................................... 219Yuvarlatılmış Köşeler .............................................................................................. 221Kutu Gölgeleri ........................................................................................................ 222Metin Gölgeleri ...................................................................................................... 223RGBA (Alpha) Şeffaf Renkler ................................................................................... 225Gradyan Renk Geçişleri .......................................................................................... 226Web Fontları ........................................................................................................... 227Kutuları Döndürme (Transform) ............................................................................. 229Çoklu Sütun Şablonları ........................................................................................... 230

CSS3 ile Animasyon ........................................................................................................... 231Temel Animasyon İşlemleri ve Animasyon Sonunda Fonksiyon Tetiklemek................. 231Animasyonlarda Geçiş İvmelerini (Easing) ve Başlangıç-Bitiş Değerlerini Belirleme .... 234

CSS3 Flexbox (Esnek) Kutu Yerleşim Modeli ...................................................................... 236Tek Satırda Dizme......................................................................................................... 238Tek Sütunda Dizme ...................................................................................................... 240Flex Kutuların Sıralamasını Ters Çevirerek Dizme ......................................................... 242Sütun Hizasında Sola veya Sağa Yaslama ..................................................................... 242Satır Hizasında Üst veya Alt Yaslama ............................................................................ 243Ortalama ...................................................................................................................... 244Diğer Flex Kutu Yerleştirme Metotları .......................................................................... 244Esnek Kutuların Genişlik Yüzdelerini Belirleme ............................................................ 245Dar Ekranlarda Flex Kutuları Alt Satırlara Kaydırma ..................................................... 246

SASS ve SCSS ..................................................................................................................... 247SASS ve SCSS Nedir, CSS – SASS – CSS Karşılaştırmaları ............................................... 247SCSS Nedir? .................................................................................................................. 248CSS – SASS – CSS Karşılaştırmaları................................................................................ 248SCSS Uygulama Örneği ve Derleme ............................................................................. 248

Test için Online Derleme ........................................................................................ 248Lokal Derleme ve Uygulama Örneği ....................................................................... 249SCSS İçinde Değişken Kullanımı .............................................................................. 251SCSS İçinde Döngü Kullanımı .................................................................................. 254

4- JavaScript ile Web Programlama ve JavaScript’te Nesne

Yönelimli Programlama Yaklaşımı ................................................................................257

JavaScript Nedir ve Neden JavaScript Kullanırız ................................................................ 257JavaScript Kod Oluşturma Kalıbı ........................................................................................ 258JavaScript Kod Yazımı Yöntemleri ...................................................................................... 258

HTML5 Sayfa İçinde JavaScript Kodları Yazma ............................................................. 258

18


Sayfa Dışında Yüklenebilir JavaScript Kodları Yazma .................................................... 259Sayfa İçinde Herhangi Bir Yerde İçerik Yazma JavaScript JavaScript Kodları Yazma .... 260

Fonksiyonlar ...................................................................................................................... 262Fonksiyon Oluşturma Kalıbı ......................................................................................... 262Parametresiz Fonksiyonlar ........................................................................................... 263Parametreli Fonksiyonlar ............................................................................................. 264Dönüt Veren Fonksiyonlar ........................................................................................... 265Sürekli Çalışan Fonksiyonlar ve İlk Tetikleme ............................................................... 266

Değişkenler ve Veri Tipleri ................................................................................................. 268Değişken İsimlendirme Kuralları .................................................................................. 268Değişken Oluşturma Kuralı ........................................................................................... 269JavaScript’te Temel Değişken Türleri ............................................................................ 269

Sayılar ..................................................................................................................... 270Metinler ................................................................................................................. 270Sayılar ve Metinlerle İşlemler ................................................................................. 270

Matematiksel Operatörler ve Matematik İşlemleri ........................................................... 271Operatör Nedir............................................................................................................. 271Matematiksel Operatörler ........................................................................................... 272İşlem ve Atama Operatörleri ........................................................................................ 273Form Elemanları ile Hesap Makinası Uygulaması ........................................................ 274Matematik İşlemleri ..................................................................................................... 276

Rastgele Sayı Üretmek ........................................................................................... 276Trigonometrik Hesaplamalar .................................................................................. 278Logaritma ve Euler Sabiti ........................................................................................ 278

Matematik Sabitleri ..................................................................................................... 279Diziler ................................................................................................................................ 279

Dizi Tanımlama ............................................................................................................. 279Dizi İşlemleri ................................................................................................................ 279

Sırası Bilinen Dizi Elemanının İçeriğini Silmek ........................................................ 280Diziden Belirli Aralıktaki Elemanları Çıkarmak veya ............................................... 280Eleman Aralıklarına Yeni Değerler Atamak ............................................................. 280Dizinin İlk ve Son Elemanlarını Yazdırmak .............................................................. 281Dizinin İlk ve Son Elemanlarını Silmek .................................................................... 281Sırası Bilinen Dizi Elemanının Değerini Değiştirmek ............................................... 281Diziyi Ters Çevirmek................................................................................................ 282Dizinin En Büyük ve En Küçük Değerli Elemanını Bulmak, Büyükten Küçüğe ve Küçükten Büyüğe Elemanları Sıralamak ................................ 282Dizi İçerisinde Arama Yapmak ................................................................................ 283

Karar Yapıları, Mantıksal Karşılaştırma ve Mantıksal Operatörler ..................................... 284

19

İçindekiler

Karşılaştırma Operatörleri ............................................................................................ 284Mantıksal Operatörler ................................................................................................. 285if - else - else if ............................................................................................................. 286switch case ................................................................................................................... 290

Döngüler ............................................................................................................................ 292for ............................................................................................................................... 293

for in ....................................................................................................................... 295while ....................................................................................................................... 297break ve continue ................................................................................................... 300break ...................................................................................................................... 300continue ................................................................................................................. 300

JavaScript’te Nesne Yönelimli Programlama Yaklaşımı ...................................................... 301Object Veri Tipi ve Class Mantığı .................................................................................. 301new Anahtar Kelimesi ile Object Üretmek ................................................................... 301Prototip Olarak Sınıfları Genişletmek........................................................................... 306

Konsol Kullanarak Hata Ayıklama ...................................................................................... 307HTML DOM (Document Object Model) ....................................................................... 308DOM ile Neler Yapılabilir .............................................................................................. 309Dokuman Nesnelerine Erişmek .................................................................................... 309

id İsmi ile Etikete Erişmek ....................................................................................... 310Etiket İsmi ile Etikete / Etiketlere Erişmek .............................................................. 313

Elementlerin Stillerine Erişim....................................................................................... 315Elementlerin Stilini Okumak ve Düzenlemek ......................................................... 315Elementlerin Özelliklerini Silmek ............................................................................ 316

Elementlere Olay Yöneticisi Tanımlamak ..................................................................... 317Olay Yöneticileri ........................................................................................................... 319

Mouse Olay Yöneticileri .......................................................................................... 319Klavye Olay Yöneticileri ......................................................................................... 321Obje Olay Yöneticileri ............................................................................................. 324

onabort: ............................................................................................................ 324onbeforeunload: ............................................................................................... 325onerror: ............................................................................................................ 325onhashchange: ................................................................................................. 326onload: ............................................................................................................. 327onresize: ........................................................................................................... 327onscroll: ............................................................................................................ 328onunload: ......................................................................................................... 328

20


5- HTML5 API’leri ile Çalışmak ve Örnek Uygulamalar ..................................................329API Kavramını Anlamak ..................................................................................................... 329Drag / Drop API .................................................................................................................. 329

Örnek Uygulama: Eşleştirme Oyunu ........................................................................... 330Örnek Uygulama: Haritada Konum Gösterme ............................................................ 335Örnek Uygulama: Yüksek Değerli Sayıları Çarpanlara Ayırma ..................................... 339

Local Storage API ............................................................................................................... 341Örnek Uygulama: Veri Kaydetme ve Listeleme ........................................................... 341

Server Sent Events API ....................................................................................................... 347Örnek Uygulama: Sunucudan Zaman Bilgisini Anlık Okumak ...................................... 347

6- Gogole Chrome Developer Tools ile Hata Ayıklama ve Düzenleme ...........................351Neden Google Chrome Developer Tools ........................................................................... 351Elementler ve Stiller (Elements) ........................................................................................ 353Konsol (Console) ................................................................................................................ 355Kaynaklar (Sources) ........................................................................................................... 357Ağ (Network) ..................................................................................................................... 359

7- JQUERY 3.x JavaScript Kütüphanesi ile Az Kod Çok İş Mantığıyla Web Programlama ...........................................................................361jQuery’ye Giriş ................................................................................................................... 361

jQuery Nedir ve Özellikleri ........................................................................................... 361jQuery’yi Projeye Ekleme .................................................................................................. 361

jQuery Fonksiyonları Nasıl Çağırılır .............................................................................. 362İlk Özel JQuery Fonksiyonunu Yazmak ......................................................................... 362

Olay Yöneticileri ................................................................................................................. 363Elemente Olay Yöneticisi Bağlamak (bind) ................................................................... 363Tıklama ( .click() ) ......................................................................................................... 364Odaklama ( .focus() ) .................................................................................................... 364Değişme ( .change() ) ................................................................................................... 364Mouse Üzerinde / Ayrıldı ( .mouseover(), mouseleave() ) .......................................... 365

Seçiciler ............................................................................................................................. 366Element İsmi ile Seçim ................................................................................................. 367ID ile Seçim .................................................................................................................. 368CLASS ile Seçim ............................................................................................................ 368Çoklu Seçimler ............................................................................................................. 369Özelliğinde Belli Bir Değer Olanların Seçimi ................................................................. 369Özellikler (Attributes) ve Stiller (Styles) ....................................................................... 371Elementin Class’ına Yeni Değer Eklemek ..................................................................... 371

21

İçindekiler

Elementin Class’ından Değer Silmek ............................................................................ 371Elementin Özelliğini (Attribute) Okumak .................................................................. 372Elementin Özelliğini Değiştirmek ................................................................................. 372Element’e Yeni Özellik Eklemek ................................................................................... 372Elementten Özellik Kaldırmak ...................................................................................... 373Elementte Bir Özelliğin Olup Olmadığını Kontrol Etmek .............................................. 373Element Değerlerini Okumak ....................................................................................... 374Elementin Ölçülerini Almak ve Değiştirmek ................................................................. 375Elementin Konumunu Almak ve Değiştirmek .............................................................. 376

Efektler .............................................................................................................................. 377Elementi Göstermek ve Gizlemek ( .show(), .hide() ) .................................................. 377Solma Efektleri ( .fadeIn(), .fadeOut(), .fadeToggle(), .fadeTo() ).................................. 378Kayma ( .slide() ) ......................................................................................................... 379Animasyon ( .animate() ).............................................................................................. 381Zincirleme Metot Kullanımı (chaining) ......................................................................... 382

AJAX (Asenkron JavaScript ve XML) ................................................................................... 382.ajax() ........................................................................................................................... 383.load() ........................................................................................................................... 384.get() ............................................................................................................................ 385.post()........................................................................................................................... 386.serialize() ..................................................................................................................... 387.serializeArray() ............................................................................................................ 388

8- BOOTSTRAP 4 CSS Framework'ü ile Tasarım ve Responsive Arayüz Tasarım Teknikleri ..........................................................................391Bootstrap Framework Nedir .............................................................................................. 391Bootstrap Neden Gereklidir ve Bootstrap Kullanmanın Avantajları .................................. 391Bootstrap İskelet Yapısı ve İlk Uygulama ........................................................................... 392

Bootstrap’ın Dahil Edilmesi .......................................................................................... 392Dizin İçinden Sayfaya Dahil Etmek ............................................................................... 393jQuery Kütüphanesinin Dahil Edilmesi ......................................................................... 393Mobil Cihaz Desteği ..................................................................................................... 393Yerleşim (Container) Planının Belirlenmesi .................................................................. 393Merhaba Dünya ........................................................................................................... 394

Grid (Izgara) ve Media Object (Medya Nesnesi) Düzen Sistemi ........................................ 395Grid (Izgara) ................................................................................................................. 395Grid Sistemi Prensipleri ................................................................................................ 396Grid Şeması .................................................................................................................. 396Grid Yapı Şablonu ......................................................................................................... 396

22


Grid Sınıfları ve Ekran Modelinin Belirlenmesi............................................................. 397Sütun Kaydırma ............................................................................................................ 400Sütun Öteleme ............................................................................................................. 400

Anlamsal Yazı Renkleri ....................................................................................................... 401Anlamsal Arkaplan Renkleri ............................................................................................... 401Hizalama Seçenekleri ......................................................................................................... 402

.text-justify ve .text-nowrap Sağa Sola Yaslama ve Satır Atlamasız .............................. 402text-*-right, text-*-left, text-*-center Sağa, Sola ve Ortaya Hizalama .......................... 403Tables (Tablolar) ........................................................................................................... 403

Basit Tablo Yapısı ............................................................................................................... 404Inverse (Ters) Tablo ..................................................................................................... 404Striped (Zebra) Modeli Tablo Yapısı ............................................................................. 405Bordered (Çerçeveli) Tablo .......................................................................................... 405Mouse’a Duyarlı Tablo Satırları .................................................................................... 406Tablo Satırlarına Anlam Kazandıran Renkler ................................................................ 406Responsive Tablolar ..................................................................................................... 407(Small) Küçük Tablo ...................................................................................................... 407

Buttons (Butonlar) ............................................................................................................. 408Anlamsal Buton Stilleri ................................................................................................. 408Dışhat Renkli Butonlar ................................................................................................. 409Buton Etiketleri ............................................................................................................ 409Buton Ölçüleri .............................................................................................................. 410Butonları Bloklamak ..................................................................................................... 410Aktiflik Durumu ............................................................................................................ 411Checkbox Button ve JQuery ile Değer Kontrolü ........................................................... 411Radio Button ve JQuery ile Değer Kontrolü ................................................................. 412

Button Group (Buton Grupları) .......................................................................................... 413Horizontal (Yatay Sıralama) .......................................................................................... 413Vertical (Dikey Sıralama) .............................................................................................. 414Button Toolbar (Buton Araç Çubukları) ........................................................................ 414Vertical Nesting (Butonları Dikey Yuvalama) ................................................................ 415Horizontal Nesting (Butonları Yatay Yuvalama) ............................................................ 416

Card (Kart) ......................................................................................................................... 416Card Yapısı .................................................................................................................... 416Header (Başlık) ve Footer (Altlık) ................................................................................. 418Gruplamalar ................................................................................................................. 419

Forms (Formlar) ................................................................................................................. 420Bootstrap ile Form Elemanlarının Erişilebilirlikleri ....................................................... 420Alt Alta Düzen Form Yapısı ........................................................................................... 421

23

İçindekiler

Satır Tipi Düzen Form Yapısı ......................................................................................... 422Form’larda Grid Kullanımı ............................................................................................ 422Checkbox ve RadioButton Kontrollerinin Özellikleri ve jQuery ile Durum Kontrolleri ..... 423Yardım Metinleri .......................................................................................................... 426Sizing (Ölçülendirme) ................................................................................................... 426Checkbox’ın jQuery ile Kullanımı ................................................................................. 424Radio’nun jQuery ile Kullanımı .................................................................................... 425

Yazdırma İşlemleri ve Yazdırılacak İçeriği ve Tasarımı Adapte Etme .................................. 427Normal Tasarım ve Yazdırma Tasarımı Farklılıkları ....................................................... 428Ekran için Boostrap ve Print için Özel CSS Tanımlamak ................................................ 428Print (Yazdır) Butonu ve Yazdırılacak İçerik Hazırlamak ............................................... 430Örnek Sayfa Tasarımı ................................................................................................... 430Yazdır Butonunu Aktif Etmek ....................................................................................... 432Yazdırma İşleminde Sayfa Stilini Daha Sade Hale Getirmek ve Gereksiz Öğeleri Sayfadan Kaldırmak........................................................................... 433

9- AngularJS MVW* JavaScript Framework'ü ile SPA Programlama ..............................435

AngularJS Nedir ve Neden AngularJS ................................................................................ 435AngularJS Online Test Ortamı ............................................................................................ 438Temel AngularJS Sayfa Yapısı ............................................................................................. 441AngularJS MVW (Model, View, Whatever Works For You) Tasarım Mimarilerini Anlamak .......442

Tasarım Mimarisi İhtiyacı ............................................................................................. 442MVC, MVP ve MVVM Karşılaştırması ........................................................................... 442

AngulaJS’nin Yapıtaşları ve Kullanımı ................................................................................. 443AngularJS Kapsama Alanını Anlamak (ng-app) ............................................................. 444İfadeler (Expressions ng-model ve {{ }} ) ...................................................................... 445

İfade Kullanımında Sayı ve Metin İşlemleri ............................................................ 445Sayı İfade Değerlerini Metin Kutularından Almak .................................................. 445Metin İfade Değerlerini Metin Kutularından Almak ............................................... 446Direktif İçinde Metin Yazdırmak ............................................................................. 446ng-init ile Değişkenleri ve Değerleri Tanımlama ..................................................... 446ng-init ile Dizi ve Obje Nesneleri Tanımlamak ........................................................ 447ng-init ile Dizi ve Obje Nesneleri Tanımlamak ........................................................ 447

Şablon (Template), Modüller (Module) ve Kontroller (Controller) .............................. 447Template ................................................................................................................ 448Module ................................................................................................................... 448Controller ve $scope .............................................................................................. 450

Çoklu Module ve Module Birleştirme ................................................................................ 448Controller ve $scope.......................................................................................................... 450

24


Direktifler (Directive) ................................................................................................... 451ng-app .................................................................................................................... 452ng-init ..................................................................................................................... 452ng-model ................................................................................................................ 452ng-controller .......................................................................................................... 453ng-bind ................................................................................................................... 453ng-repeat ................................................................................................................ 453ng-readonly ............................................................................................................ 454ng-disabled ............................................................................................................. 454ng-click ................................................................................................................... 455ng-show .................................................................................................................. 457ng-if ........................................................................................................................ 459ng-style ................................................................................................................... 462Özelleştirilmiş Direktif Oluşturmak, Etki Türlerini/Rollerini Belirlemek, Direktif ve Controller Arası Veri Değişimi ............................................................... 463

$compile Derleme Servisi ile Türetilen Elementlerle Çalışmak ......................................... 467Filters (Filtre) ..................................................................................................................... 470

currency (para birimi) .................................................................................................. 470lowecase ...................................................................................................................... 472uppercase ................................................................................................................... 472filter ............................................................................................................................. 473

AngularJS ile CSS Kullanımı ................................................................................................ 476AngularJS ile Bootstrap Kullanımı ...................................................................................... 479AngularJS $http Servisi ile Çalışmak ................................................................................. 482IMDB’de Film Arama ve Detayları Gösterme Uygulaması (GET) ........................................ 482AngularJS ile PHP’ye JSON Veri Göndermek (POST) ve PHP’de Parse Etmek ve PHP’de JSON Data Olarak Üretilen Veriyi Tekrar AngularJS’ye Çekmek (GET) .................. 489SPA (Single Page Application) Mantığı ve AngularJS ile Uygulama Örneği ........................ 496

Avantaj ve Dezavantajları ............................................................................................. 496SPA Şablonu ve $routeProvider ................................................................................... 496AngularJS ve Bootstrap ile Template Kullanarak Resonsive SPA Uygulaması Örneği ... 497SPA Uygulaması Hakkında ............................................................................................ 497Dosyaların ve Dizinlerin Oluşturulması ........................................................................ 498

app/uygulama.js ..................................................................................................... 498app/rota.js .............................................................................................................. 499app/kontroller.js ..................................................................................................... 500index.html .............................................................................................................. 501template/anasayfa.html ......................................................................................... 503template/hakkimda.html ....................................................................................... 503template/iletisim.html ........................................................................................... 503json/portfolyo.json ................................................................................................. 504

SPA Uygulamasını Test Etmek ...................................................................................... 504

25

İçindekiler

10- EcmaScript 6 JavaScript Standartları .....................................................................507EcmaScript 6 Nedir ve JavaScript’ten Bir Farkı Nedir ........................................................ 507Kapsam Alanları (scope) .................................................................................................... 508Arrow (Ok) Fonksiyonlar .................................................................................................... 509for of Döngüsü ................................................................................................................... 510

String ............................................................................................................................ 510Array ............................................................................................................................ 511Map .............................................................................................................................. 511Set ................................................................................................................................ 512

Genişletilmiş Parametre Kullanımları ................................................................................ 512Default (Varsayılan) Parametreler ................................................................................ 513Rest Parametresi .......................................................................................................... 513Template (Şablon) Kullanımı ........................................................................................ 514

Map (Harita) ...................................................................................................................... 515Set (Küme) ......................................................................................................................... 516Yeni Built-in (Yerleşik) Metotlar ......................................................................................... 517

Object Özellik Atamaları .............................................................................................. 517Array’de Eleman Arama ............................................................................................... 518String Tekrarlama ......................................................................................................... 518String Arama ................................................................................................................ 518Number Güvenlik Kontrolü .......................................................................................... 519Number İşaret Saptaması ............................................................................................ 520

Modüller ............................................................................................................................ 520İlk Modül Kullanımı ve Sözdizim Yapısını Kavrama ....................................................... 520Çoklu Fonksiyon ve Değişkenleri İçe Aktarmak ............................................................ 522Çoklu İçe Aktarma İşlemi ............................................................................................. 522 İçe Aktarılanları Tekrar İsimlendirme .......................................................................... 523Varsayılan Modülü Belirlemek ..................................................................................... 524

Class (Sınıf) ........................................................................................................................ 525Klasik Prototipleme Yöntemi ........................................................................................ 525Class Oluşturma ve constructor (Yapıcı) ve Metotlar ................................................... 526Statik Metot Oluşturma ............................................................................................... 528Kalıtım (Inheritance) ve Class Genişletme (extends).................................................... 529Metot Ezme (Override) ................................................................................................ 531super() ile Parent Class’a Parametre Geçirmek ........................................................... 531

Promise (Söz) ..................................................................................................................... 533Promise Kavramı .......................................................................................................... 534Promise Yapısı ve Kullanım Örnekleri ........................................................................... 534Zincirleme .then Kullanımı ........................................................................................... 537

26


Birden Fazla Asenkron Çağrı Yapmak ........................................................................... 538Babel.js ile EcmaScript 6+ Kodlarının Eskiye Dönüştürülmesi ........................................... 541

11- React.js (Axios, Hooks) MVC JavaScript UI Kütüphanesi ile Reaktif Programlama ...543React ile İlgili Temel Kavramlar .......................................................................................... 543

React Nedir ve Ne Amaçla Kullanılır............................................................................. 543Virtual DOM (VDOM, Sanal DOM) ............................................................................... 544Component (Bileşen) ................................................................................................... 545JSX ................................................................................................................................ 546One Way Binding (Tek Yön Bağlama) ........................................................................... 547

Geliştirme Ortamının Hazırlanması ................................................................................... 548Node.js ve Node Package Manager Kurulumu ............................................................. 548Visual Code ................................................................................................................. 552React Dev Tools Eklentisi .............................................................................................. 556

NPX Git Reposu ile İlk Uygulamayı Ayağa Kaldırmak ve Proje Yapısını İncelemek ............. 558NPX Kurulumu .............................................................................................................. 558create-react-app Reposunu İndirmek .......................................................................... 558React Projesinin Ayağa Kaldırılması ............................................................................. 559React Projesinin Dosyalarını İncelemek ....................................................................... 561

Örnek Proje Hakkında ........................................................................................................ 565Component’ler ile Çalışmak ve Component’lerde CSS Kullanımı ...................................... 566

Fonksiyon Component’lerle (Stateless, Dump) Çalışmak ............................................ 566Class Componet’lerle (Stateful, Smart) Çalışmak ......................................................... 570İç İçe Component’ler ................................................................................................... 573

state’ler ile Çalışmak .......................................................................................................... 576State Objesi Oluşturmak .............................................................................................. 576State Verilerini Arayüzde Göstermek ........................................................................... 576Form Elemanları ile Çalışmak, Fonksiyonlara Parametre Göndermek ve State Verilerini Güncellemek ............................................................... 577

props’lar ile Çalışmak ........................................................................................................ 579Compoent’lere Props Aktarımı .................................................................................... 580Varsayılan Props’lar ...................................................................................................... 582Props Doğrulama (Validation) ...................................................................................... 585

ref (Referans) ..................................................................................................................... 586Router (Yönlendirmeler) .................................................................................................... 591

React Router Modülünü Kurulumu .............................................................................. 591İç Sayfalarının Şablonlarının Oluşturulması ................................................................. 592Yönlendirmeler ve Varsayılan Açılış Sayfasını Tanımlama ............................................ 594Yönlendirmelerde Parametre Gönderimi ..................................................................... 597

27

İçindekiler

Component LifeCycle (Yaşam Döngüsü) ............................................................................ 600Initialization (Başlatma) Metotları ............................................................................... 601Mounting (Binme) Metotları........................................................................................ 601Updation (Güncelleme) Metotları ............................................................................... 603Unmounting (Kaldırma) ............................................................................................... 608Error (Hata) Yakalama .................................................................................................. 608

AXIOS ile Restfull API İşlemleri .......................................................................................... 610AXIOS Modülünün Kurulumu ....................................................................................... 610AXIOS ile Veri Çekme (GET) ve map() Etme ................................................................. 610UPDATE, DELETE, POST Metotlarının Kullanımı ve Header Parametreleri ................... 615Global Varsayılan Tanımlamalar ................................................................................... 617Asenkron ve Bekleme (async/await) ............................................................................ 618

HOOKS ile State Yönetimi .................................................................................................. 618Hooks Nedir ................................................................................................................. 618State Hook: useState() ................................................................................................. 619Efekt Hook: useEffect() ................................................................................................. 621Hooks Kuralları ............................................................................................................. 622

React Semantic UI Kütüphaneleri ...................................................................................... 623Bootstrap ..................................................................................................................... 624Semantic UI ................................................................................................................. 626Material UI ................................................................................................................... 627

Depoloyment ..................................................................................................................... 630Statik Yayın ile Deployment ......................................................................................... 630Adım Adım Heroku Üzerinde Depolment .................................................................... 632

12- VUE.JS 2.x MVVM JavaScript UI Kütüphanesi ile İleri Web Programlama ................... 639Vue’nin Doğuşu, Artısı, Eksisi ............................................................................................. 639Vue’yi Projeye Dahil Etmek ................................................................................................ 640Vue Devtools Eklentisi ....................................................................................................... 641Vue CLI (Common Library Interface) ................................................................................. 642Yaşam Döngüsü (LifeCycle) ................................................................................................ 648Değişkenler, Metotlar ve LifeCycle Metot Kullanımı .......................................................... 649Hesaplanmış Değerler ....................................................................................................... 652Değer Takibi (watch) .......................................................................................................... 652Koşullu (if, else, else-if) Gösterimler .................................................................................. 654Listelemeler (for) ............................................................................................................... 655

Listelerde Koşul Kullanımı ............................................................................................ 656Listelerde Component Kullanımı, Listeye Eleman Ekleme ve Çıkarma ......................... 656

Component’lerle Çalışmak ................................................................................................ 661Yeni Component Oluşturmak ....................................................................................... 661

28


Component’lerin Tekrar Kullanımı ............................................................................... 662Component Düzeni ...................................................................................................... 662Verileri Props ile Alt Component’lere Aktarmak .......................................................... 663Component’lere İçerik Aktarmak ................................................................................. 664

Component’lerden Olay Yöneticilerini Dinlemek .............................................................. 665Derinlemesine Component Kullanımları ........................................................................... 668

Component Kaydetme ................................................................................................. 668Global ..................................................................................................................... 668Lokal ....................................................................................................................... 669

Modül Sistemi .............................................................................................................. 670Prop’lar ........................................................................................................................ 672Dinamik Component Yükleme ..................................................................................... 674

Stil ve Class Kullanımları .................................................................................................... 676İfadelerle Class Ekleme ................................................................................................ 676Class’larda Array ve Object Kullanımı .......................................................................... 678Koşullu Biçimlendirme ................................................................................................. 680

Olay Yöneticileri ................................................................................................................. 681Formlarla Çalışmak ............................................................................................................ 683Filtreler .............................................................................................................................. 686

Local Filtre .................................................................................................................... 686Global Filtre ................................................................................................................. 687Zincirleme Filtre Kullanımı ........................................................................................... 688

Özel Direktler ..................................................................................................................... 688Direktif Tanımlama ....................................................................................................... 689Hook (Kanca) Fonksiyonları .......................................................................................... 689Hook Argümanları ........................................................................................................ 691

State (Durum) Yönetimi ..................................................................................................... 693Yönlendirmeler (Routing) .................................................................................................. 696

Adım Adım Vue Router ile SPA Uygulaması ................................................................. 696Dağıtım (Production) ......................................................................................................... 709GitHub Pages’de Vue Projesi Yayınlama ............................................................................ 711

Sürüm Kontrolü ve GitHub Nedir ................................................................................. 711Kişisel GitHub Reposu Açmak ve Temel Git Komutları ................................................. 712GitHub Pages’te Yayınlama .......................................................................................... 731

13- PWA (Progressive Web Application) Tekniği ile Mobil Adaptasyon ve Web Sayfasını Uygulamaya Çevirme ............................................................................739PWA’nın Nedir ve Özellikleri .............................................................................................. 740PWA Nasıl Çalışır ................................................................................................................ 740Örnek Proje: Hava Durumu Uygulaması ............................................................................ 741

Adım 1: Arayüzün Tasarımı .......................................................................................... 741Adım 2: EcmaScript 6 ile Lokasyon ve Hava Durumu Servislerinin Hazırlanması ......... 742

İçindekiler

29

Adım 3: Hava Durumu JSON Verilerinin İşlenerek Arayüzde Gösterilmesi ................... 744Adım 4: Service Worker’ın Eklenmesi .......................................................................... 748Adım 5: PWA için Manifesto Dosyasını ve Uygulama İkonunu Hazırlama .................... 750Adım 7: PWA Uygulamasının Sunucuya Yüklenmesi ve Test Edilmesi .......................... 752

14- Web Sitesi Yayınlama Aşamaları ve cPanel ile Yönetimi ..........................................757Bitmiş Bir Siteyi Yayına Açmak ........................................................................................... 757

Aşama 1: Domain Satın Almak ..................................................................................... 757com, net, org … Uzantıları ile Site İsmi Almak ........................................................ 759.tr Uzantısı ile Site İsmi Almak ................................................................................ 759

Aşama 2: Hosting Servisi Satın Almak .......................................................................... 761Aşama 3: Domain’i Web Sunucusuna Yönlendirmek ................................................... 762Aşama 4: FTP Programıyla Siteyi Upload Etmek .......................................................... 763

cPanel Site Yönetiminde Bilinmesi Gerekenler .................................................................. 765cPanel’e Erişmek .......................................................................................................... 765E-Mail Hesabı Açmak ................................................................................................... 767Subdomain Açmak ....................................................................................................... 768Log’ları Kontrol Etmek ................................................................................................. 770MySQL Veritabanı ve Veritabanı Yöneticisi Oluşturmak ............................................... 770phpMyAdmin .............................................................................................................. 773Site ve Veritabanı Yedeği Almak ve Yedeği Geri Yüklemek ........................................... 776

15- PHP Dili Temelleri, OOP Yaklaşımıyla Programlama ve PHP’nin HTML5 ile Birlikte Kullanımı ...........................................................................779PHP Nedir .......................................................................................................................... 779Online PHP Editörleri ve Derleyiciler ................................................................................. 783XAMMP ile PHP’yi Lokal Sistemde Çalıştırmak .................................................................. 785PHP ile Kodlamaya Başlıyorum… ....................................................................................... 788

Sözdizimi Kuralları ........................................................................................................ 789Değişkenler ve Sabitler ................................................................................................ 790

Değişken ve Sabit Tanımlama Kuralları ................................................................... 790Değişkenleri Silme .................................................................................................. 792

Temel Veri Tipleri ......................................................................................................... 792String (Metin Yığını) ................................................................................................ 792Integer (Tamsayı) .................................................................................................... 792Float (Ondalıklı Sayı) ............................................................................................... 792Boolean (Mantıksal Doğru veya Yanlış) .................................................................. 793Array (Dizi) .............................................................................................................. 793

Operatörler .................................................................................................................. 794

30


Aritmetik Operatörler............................................................................................. 795Atama Operatörleri ................................................................................................ 795Artırma ve Azaltma Operatörleri ............................................................................ 796Karşılaştırma Operatörleri ...................................................................................... 797Mantıksal Operatörler ............................................................................................ 798Birleştirme Operatörü ............................................................................................ 799

Fonksiyonlar ................................................................................................................. 800Parametresiz Basit Fonksiyon ................................................................................. 801Parametre Değeri Zorunlu Fonksiyon ..................................................................... 801Parametreli (Varsayılan Değerli) Fonksiyon ............................................................ 802Değer Döndüren Fonksiyon .................................................................................... 803

Koşullar ........................................................................................................................ 804if ............................................................................................................................. 804else if ...................................................................................................................... 805else ......................................................................................................................... 805

Döngüler ...................................................................................................................... 805for ........................................................................................................................... 805foreach ................................................................................................................... 807while ....................................................................................................................... 808do while .................................................................................................................. 811switch case ............................................................................................................ 811Döngü Durdurma ve Devam Ettirme ...................................................................... 813

Formlarla Çalışmak ............................................................................................................ 814PHP’ye GET ve POST ile Veri Göndermek ..................................................................... 814

GET ve POST Nedir ................................................................................................. 814GET ile PHP’ye Veri Göndermek ve PHP’de Verileri Okumak ................................. 815

Form Sayfalarındaki Verileri PHP ile SMTP E-Mail Olarak Göndermek ........................ 818Formdan Alınan Verileri PHP ile Dosya Yazmak ve Geri Okumak ................................. 818PHP ile Captcha (Güvenlik Kodu) Kodlayarak Formlarda Spam Gönderimlerini Engellemek ............................................................................... 825

PHP’de Nesne Tabanlı Programlama Yaklaşımı Temelleri .................................................. 830OOP Nedir ve Neden Gereklidir ................................................................................... 830Sınıf (Class) Oluşturma ................................................................................................. 831Sınıftan Obje (Object) Tanımlama ................................................................................ 832Metotlar ve Özellikler .................................................................................................. 832

Metot Tanımlama ................................................................................................... 833Yapıcı ve Yıkıcı Metotlar ............................................................................................... 833

_ _ construct() ....................................................................................................... 834_ _ destruct() ......................................................................................................... 834

İçindekiler

31

OOP’de Temel Prensipler ............................................................................................. 835Abstract (Soyutlama) .............................................................................................. 835Inheritance (Kalıtım) ............................................................................................... 836Interface (Arayüz) ................................................................................................... 838Polymorphism (Çok Biçimlilik) ................................................................................ 842

16- MySQLi ile Veritabanı Yönetimi ve Temel SQL Sorgularını Kullanma .......................847Veritabanı Nedir ve Veritabanı Mantığını Kavramak.......................................................... 847

Veritabanı Nedir ........................................................................................................... 847Veritabanına Neden İhtiyaç Duyulur ............................................................................ 847Sorgu Dili Nedir ............................................................................................................ 848Veritabanı Yapısı Kavramak .......................................................................................... 848

Tablolar................................................................................................................... 848Satır ve Sütunlar ..................................................................................................... 849

MySQLi Nedir ve Neden MySQL Kullanmıyoruz ................................................................ 849Veritabanı Dosyası Oluşturmak ve Temel SQL Sorguları ................................................... 850

XAMPP ile Lokal Sistemde Çalışmak için phpMyAdmin’den Veritabanı ve Yetkilendirilmiş Kullanıcı Oluşturmak ..................................................... 850Hosting Üzerinde Cpanel’den Veritabanı ve Yetkilendirilmiş Kullanıcı Oluşturmak ..... 854SQL Sorguları ve Kullanım Örnekleri ............................................................................ 856

SELECT: Tablodaki Kayıtları Sıralamak ..................................................................... 857ORDER BY - ASC/DESC: Artan ve Azalan Sıralamak ................................................. 858LIMIT: Belirli Bir Sayıdaki Verileri Sıralamak ........................................................... 859WHERE - AND/OR: Belirli Koşullara Göre Verileri Sıralamak .................................. 859LIKE ve LIKE/NOT: Tabloda Hassas Arama Yapmak ve Sonuçları Sıralamak ............ 860INSERT INTO: Tabloya Yeni Kayıtlar Eklemek .......................................................... 861UPDATE: Veri Güncellemek .................................................................................... 862DELETE: Belirli Koşulu Sağlayan Kaydı Silmek ......................................................... 862DELETE - AND/OR: Belirli Koşulları Sağlayan Kayıtları Silmek ................................ 863DELETE - LIKE: Benzer Kayıtları Silmek.................................................................... 863

MySQLi Fonksiyonları ile SQL Sorgularını Kullanarak Veritabanı Yönetimi Uygulaması ..... 863Uygulama Yapısı ........................................................................................................... 863ayarlar.php ................................................................................................................... 864listele.php .................................................................................................................... 866ekle.php ....................................................................................................................... 868sil.php .......................................................................................................................... 870guncelle.php ................................................................................................................ 871

32


17- SEO Yaklaşımlarına Göre Web Programlama Teknikleri, SEF URL, MasterPage ve Sayfalama ..............................................................................875SEO Nedir ve SEO’nun Amacı ............................................................................................. 875Geliştiriciler için SEO Kuralları ve Uygulama ...................................................................... 876

Temiz ve Doğru Kod Yazımı ile W3C ile Siteniz Doğrulama .......................................... 876Script Dosyalarını Dışarıda Tutma ................................................................................ 877Sayfa Yükleme Boyutunu En Aza Çekme ...................................................................... 878Düzgün ve Hiyerarşik Başlık (H1..H6) Etiketleri ........................................................... 878Arama Motorlarını Besleyecek Şekilde İçerik Yapılandırması ...................................... 879Masaüstü ve Mobil Web için Favicon Sayfa İkonu Kullanımı ........................................ 879Değişken ve Doğru Bir Yapıda Oluşturulan Sayfa Başlığı .............................................. 880META Etiketleri ............................................................................................................ 881Resimleri ALT Etiketi ile Tanımlama .............................................................................. 882Uygun Linkler, Link İsimleri ve CANONICAL Etiketi ...................................................... 882Arama Motoru Sonuç Sayfası (SERP) Optimizasyonunu ve SERP Simülatörü ............... 884Sayfalar Arası Erişim ve Navigasyon ............................................................................. 885Robot.txt ile Arama Motorları için Erişilebilecek ve Erişilemeyecek Dizinleri Tanımlamak ........................................................................... 886404 Hata Sayfası Hazırlama, Arama Motorları Tarafından Bozuk Linklerin İndexlenmesini Engelleme ve W3C ile Bozuk Link Kontrolü ............... 888Çoklu Dil Desteği ile Kod Tasarımı ................................................................................ 890

PHP / MySQL / .htaccess ile Arama Motorlarının ve Ziyaretçilerin Anlayacağı Şekilde URL Yapılandırması (SEF URL), HEADER ve FOOTER MasterPage Kodlamak ......... 892PHP ve Bootstrap ile İçerikleri Sayfalama (Pagination) ...................................................... 905

18- MODEL-VIEW-VIEWMODEL Mimarisiyle (AngularJS) Responsive (Bootstrap) Web Sitesi ve İçerik Yönetim Sistemi (CMS) Uygulaması ...............................................911Giriş ve Uygulama Hakkında .............................................................................................. 912

CMS Mantığını Anlamak .............................................................................................. 912Yapacağımız Web Sitesi ve CMS’in Teknik Özellikleri ................................................... 913

Web Sitesi ............................................................................................................... 913CMS ........................................................................................................................ 914

Proje Geliştirme Süreci Hakkında ................................................................................. 914Test Yayını için .tk Uzantılı Ücretsiz Domain Alma ........................................................ 915

Aşama 1: CMS Paneli (MODEL ve VIEWMODEL) .............................................................. 916Veritabanını Hazırlıkları ................................................................................................ 916

cPanel’de Veritabanı Oluşturma ve Veritabanı Kullanıcısını Tanımlamak ............... 916CMS Paneli için Tabloları ve Veri Alanlarını Tasarlayıp phpMyAdmin ile Oluşturmak ....... 917

Tablo Adı: kullanici ................................................................................................. 918

İçindekiler

33

Tablo Adı: anasayfa ................................................................................................ 919Tablo Adı: slider ...................................................................................................... 920

CMS Panelini Hazırlamak ............................................................................................. 921Framework’lerin Hazır Hale Getirilmesi ................................................................. 922Dosyalar ve CMS Paneline İlk Bakış ........................................................................ 922index.php ............................................................................................................... 923app.js ...................................................................................................................... 927servis_giris.js .......................................................................................................... 927giris.php ................................................................................................................. 928ayarlar.php ............................................................................................................. 929cms_anasayfa.php .................................................................................................. 929cms_anasayfa_veriler.php ...................................................................................... 933CMS Paneli Ana Sayfa Kontrolleri .......................................................................... 934servis_anasayfa_logo.js .......................................................................................... 935servis_anasayfa_slogan.js ...................................................................................... 936servis_anasayfa_aciklama.js .................................................................................. 936servis_anasayfa_copyright.js ................................................................................. 937servis_anasayfa_facebook.js .................................................................................. 938CMS Ana Sayfa Formlarından Gelen Verilerin Kaydedilip Güncellenmesi .............. 940anasayfa_logo_kaydet_getir.php ........................................................................... 940anasayfa_slogan_kaydet_getir.php ........................................................................ 941anasayfa_aciklama_kaydet_getir.php .................................................................... 941anasayfa_copyright_kaydet_getir.php ................................................................... 942anasayfa_facebook_kaydet_getir.php .................................................................... 942anasayfa_twitter_kaydet_getir.php ....................................................................... 943anasayfa_instagram_kaydet_getir.php .................................................................. 943cms_galeri.php ....................................................................................................... 944cms_galeri_veriler.php ........................................................................................... 949servis_galeri_1.js, servis_galeri_2.js, servis_galeri_3.js ......................................... 949galeri_1_kaydet_getir.php, galeri_2_kaydet_getir.php, ........................................ 951galeri_3_kaydet_getir.php ...................................................................................... 951galeri_2_sil_getir.php, galeri_2_sil_getir.php, galeri_3_sil_getir.php .................... 952

Aşama 2: Web Sitesi (VIEW) ............................................................................................. 954VIEW için VIEWMODEL Servisleri ................................................................................. 954Site Şablonu Değerlendirmesi ...................................................................................... 954Arayüz İskeletinin Çöp İçeriklerinin Temizlenmesi ve AngularJS ve PHP Servisleri ile Entegre Edilmesi ............................................................................... 958PHP Servislerini İçe Aktarmak ve Verileri Gerekli DOM Elementleri İçinde Yazdırmak ...... 962

34


PHP Servislerinden Gelen Verileri AngularJS ile Kontrol Ederek Direktifler ile DOM Elementlerine Giydirmek .............................................................. 966

URL Bağlantısı CMS Panelinde Girilmiş Olan Sosyal Medya İkonlarının Gösterilmesi ......................................................................................... 966Slider’ı Oluşturmak ve Kaç Adet Resim ve Resim Metni Varsa Giydirmek .............. 967

19- CushyCMS ile Kod Yazmadan Web Siteniz için İçerik Yönetim Sistemi (CMS) Geliştirmek ..............................................................................971CMS Çeşitleri ve Uygulama Metotları ................................................................................ 972CushyCMS Nedir, Avantajları Nelerdir ve Güvenli midir? .................................................. 973CushyCMS ile İçerik Yönetim Sistemi Uygulama Mantığı ve Yönetilebilir Alanlar Tanımlamak ....................................................................................... 974Uygulamalı Olarak CushyCMS ile Site Yönetimi ................................................................. 975

Aşama 1: Yönetebilmek için Basit Birkaç Sayfalık Site Tasarlama ve Yönetilecek Olan İçerikleri Belirtme ............................................................................. 975Aşama 2: CushyCMS Üyeliği Almak .............................................................................. 979Aşama 3: CushyCMS ile Site Tanımlama, FTP Erişim Bilgilerini Girme ve Yetkilendirilmiş Editörler Hesapları Tanımlama ........................................................... 980

20- HTML5 ve PhaserJS ile Canvas / WebGL Oyun Programlama ..................................987Phaser.js Nedir .................................................................................................................. 987İlk Uygulama: Platform Oyunu .......................................................................................... 987

Phaser.Js Framework’ü İndirmek ................................................................................. 988Kodlama Şablonu ......................................................................................................... 988Harici Grafikleri Yüklemek ............................................................................................ 989Sprite Oluşturmak ve Yüklenen Grafiği Tuvale Aktarmak ............................................. 991Platform Sahne (Dünya) Oluşturmak ........................................................................... 991Gruplamalar ................................................................................................................. 994Sahneye ve Karaktere Fizik Kuralları Eklemek .............................................................. 994Klavye ile Karakteri Kontrol Etmek ve Yürüme Animasyonlarını Oynatmak ................. 997Karakter ile Nesneleri Toplamak ................................................................................ 1001Skor Yazdırmak ........................................................................................................... 1006

SONSÖZ ........................................................................................................................... 1008

Documents

A'DAN Z'YE YENİ NESİL TEKNİKLERLE WEB TASARIMI VE WEB ... · JavaScript, biraz da CSS öğretilir. Ama o HTML ile ne sayfa yapılır, ne o CSS ile verilere düz-günce bir stil