2. Çalışma ortamının kurulması

Aşağıdaki araçları kullanacağız (Windows 10 x 64 bit altında):

[Laragon], PHP web sunucusunu çalıştırmak için;
[Netbeans], PHP kodunu düzenlemek için;
[Visual Studio Code], JavaScript kodlarını yazmak için;
[node.js], bunları çalıştırmak için;
[npm], ihtiyacımız olacak JavaScript kütüphanelerini indirmek ve kurmak için;

2.1. Web sunucusu için çalışma ortamı

PHP komut dosyaları aşağıdaki ortamda yazılmış ve test edilmiştir:

Laragon adı verilen Apache / SGBD MySQL / PHP 7.3 web sunucusu ortamı;
NetBeans 10.0 geliştirme ortamı (IDE);

2.1.1. Laragon'un kurulumu

Laragon, çeşitli yazılımları bir araya getiren bir pakettir:

bir Apache web sunucusu. Bunu, PHP ile web komut dosyaları yazmak için kullanacağız;
SGBD MySQL;
PHP betik dili;
web uygulamaları için önbellek işlevi gören bir Redis sunucusu:

Laragon, Mart 2019 itibarıyla aşağıdaki adresten indirilebilir:

https://laragon.org/download/

[1-5] kurulumu, aşağıdaki dizin yapısını oluşturur:

[6] içinde PHP kurulum klasörü bulunur;

[Laragon]'in başlatılmasıyla aşağıdaki pencere görüntülenir:

[1]: Laragon'un ana menüsü;
[2]: [Start All] düğmesi Apache web sunucusunu başlatır ve SGBD ile MySQL;
[3]: [WEB] düğmesi, PHP [<laragon>/www/index.php] dosyasına karşılık gelen [http://localhost] web sayfasını görüntüler; burada <laragon>, Laragon'un kurulum klasörüdür;
[4]: [Database] düğmesi, SGBD ve MySQL dosyalarını [phpMyAdmin] aracıyla yönetmenizi sağlar. Bunu önceden yüklemeniz gerekir;
[5]: [Terminal] düğmesi bir komut terminalini açar;
[6]: [Root] düğmesi, [<laragon>/www] klasörüne konumlandırılmış bir Windows Dosya Gezgini açar; bu klasör, [http://localhost] web sitesinin kök dizinidir. Laragon’un Apache sunucusu tarafından yönetilen tüm web uygulamalarını buraya yerleştirmelisiniz;

Bir Laragon [5] terminali açalım:

[1], terminal türü. [6]'te üç tür terminal mevcuttur;
[2, 3]'te: geçerli klasör;
[4]'te, bir yürütülebilir dosya aranırken taranan klasörlerin listesini görüntüleyen [echo %PATH%] komutu girilir. Laragon’un tüm ana klasörleri bu yürütülebilir dosyalar yoluna dahil edilmiştir; Windows’ta bir [cmd] komut penceresi açılsaydı bu durum geçerli olmazdı. Bu belgede, belirli bir yazılımı kurmak için komutlar girilmesi gerektiğinde, bu komutlar genellikle bir Laragon terminalinde girilir;

2.1.2. IDE NetBeans 10.0'ın Kurulumu

IDE NetBeans 10.0, aşağıdaki adresten indirilebilir (Mart 2019):

https://netbeans.apache.org/download/index.HTML

İndirilen dosya bir zip dosyasıdır; bu dosyayı açmanız yeterlidir. NetBeans kurulup başlatıldıktan sonra, ilk PHP projesini oluşturabilirsiniz.

[1]'te, Dosya / Yeni Proje seçeneğini seçin;
[2]'te, [PHP] kategorisini seçin;
[3]'te, [PHP Application] proje türünü seçin;

[4]'te, projeye bir ad verin;
[5]'te, proje için bir klasör seçin;
[6]'te, indirilen PHP sürümünü seçin;
[7]'te, PHP dosyaları için UTF-8 kodlamasını seçin;
[8]'te, PHP komut dosyalarını komut satırı modunda çalıştırmak için [Script] modunu seçin. Bir PHP betiğini web ortamında çalıştırmak için [Local WEB Server]'i seçin;
[9,10] komutunda, Laragon paketine ait PHP yorumlayıcısının kurulum dizinini belirtin:

[Finish]'i seçerek PHP proje oluşturma sihirbazını tamamlayın;

[11]'te proje, [index.php] komut dosyasıyla oluşturulur;
[12]'te, PHP adlı minimal bir komut dosyası yazılır;
[13]'te, [index.php] çalıştırılır;

[14]'te, sonuçlar NetBeans'in [output] penceresinde görüntülenir;
[15]'te yeni bir komut dosyası oluşturulur;
[16]'te, yeni komut dosyası;

Okuyucu, bundan sonra gelecek tüm komut dosyalarını aynı PHP projesinin farklı klasörlerinde oluşturabilir. Bu belgedeki komut dosyalarının kaynak kodları, aşağıdaki NetBeans dizin yapısı altında mevcuttur:

Bu belgedeki komut dosyaları, [scripts-console] [1] proje dizin yapısında yer almaktadır. Ayrıca, <laragon-lite> (burada <laragon-lite>, Laragon yazılımının kurulum klasörüdür) klasörüne yerleştirilecek olan PHP kütüphanelerini de kullanacağız. NetBeans'in [2] kütüphanelerini [scripts-console] projesinin bir parçası olarak tanıması için, [vendor] ve [2] klasörlerini projenin [Include Path] ve [3] dallarına eklememiz gerekir. NetBeans'i, [<laragon-lite>/www/vendor] ve [2] klasörlerinin sadece [scripts-console] projesine değil, tüm yeni PHP projelerine de dahil edilecek şekilde yapılandıracağız:

[1-2]'te NetBeans seçeneklerine gidin;
[3-4]'te, PHP'in seçeneklerini yapılandırıyoruz;
[5-7]'te, PHP'in [Global Include Path]'ini yapılandırıyoruz: [7]'te belirtilen klasörler, herhangi bir PHP projesinin [Include Path]'ine otomatik olarak dahil edilir;

[9]'te, [Include Path] dalının özelliklerine erişilir;
[10-11]'te, NetBeans tarafından taranan yeni kütüphaneler bulunur. NetBeans, bu kütüphanelerin PHP kodunu tarar ve geliştiriciye yardım sunabilmek için sınıflarını, arayüzlerini, işlevlerini vb. hafızaya alır;

[12]'te, bir kod [vendor/php-mime-mail-parser] kütüphanesindeki [PhpMimeMailParser\Parser] sınıfını kullanır;
[13]'te NetBeans, bu sınıfın yöntemlerini önerir;
[14-15]'te, NetBeans seçilen yöntemin belgelerini görüntüler;

[Include Path] kavramı burada NetBeans'e özgüdür. PHP'te de bu kavram mevcuttur, ancak bunlar ilk bakışta iki farklı kavramdır.

Çalışma ortamı kurulduğuna göre, artık PHP'in temellerini ele alabiliriz.

2.2. JavaScript için çalışma ortamı

Bu araçlar Laragon'dan kurulabilir (bkz. bağlantı bölümü):

[4] sürümüne, [node.js] sürümü yüklenir. Yükleme tamamlandıktan sonra, bir Laragon terminali açıyoruz (bkz. bağlantı paragrafı) ve yüklü olan [node.js] sürümünü (1) ile [npm] sürümünü (2) sorguluyoruz:

Ardından, genellikle [code], [VSCode] veya [3-6] olarak adlandırılan Visual Studio Code’u kuruyoruz. Bu işlem tamamlandıktan sonra, bu geliştirme aracını çalıştırabiliriz:

2.2.1. Visual Studio Code'un Yapılandırılması

Şimdi, okuyucunun zaman zaman karşısına çıkacak ekran görüntülerini anlayabilmesi için [VSCode]'i nasıl yapılandırdığımızı göstereceğiz. Okuyucu, [VSCode]'i istediği gibi yapılandırmakta özgürdür. Hatta kendi tercih ettiği çalışma ortamını kurabilir. Bu, bundan sonra yapacağımız işlemler açısından önemli değildir.

Öncelikle, [VSCode] penceresinin görünümünü değiştirerek arka plan rengini siyah yerine açık bir renge ayarlayacağız:

Ardından, öğeleri menüde de bulunan sol kenar çubuğunu ([1-2]) gizleyeceğiz. [3-6]'te, dosya her kaydedildiğinde ve her kopyala/yapıştır işleminde kodun biçimlendirilmesini talep ediyoruz.

[Ctrl-S] yapılandırmasını kaydettikten sonra, [Settings] ve [7] pencerelerini kapatabiliriz. [VSCode] ve [8-10] yapılandırmalarına istediğiniz zaman geri dönebilirsiniz:

Bu yapılandırmalar, doğrudan düzenlenebilen [settings.json] dosyasında kaydedilir. Daha önce görüldüğü gibi [Settings] yapılandırma penceresini açalım:

[4] dosyasında, [settings.json] dosyasını doğrudan düzenleyebiliriz:

[1]'te, [settings.json] dosyasının yolu. Varsayılan yapılandırmaya geri dönmenin bir yolu, bu dosyayı silmektir;
[2] dosyasında, az önce yaptığımız ayarları;

Şimdi, [VSCode] [1-2] içinde bir terminal açalım:

[3]'te, açılan terminal türü, burada PowerShell;
[4]'e, Windows komutları girebiliriz;
[6]'te, başka terminaller açılabilir;
[5]'te, açık terminallerin listesi;
[7]'te, aktif terminali kapatır;

[VSCode] terminalini, [npm] (Node Package Manager) aracıyla JavaScript paketlerini (kütüphaneleri) yüklemek için kullanacağız. Daha önce Laragon terminalinde yaptığımız gibi, kurulu [npm] sürümünü sorgulayalım:

Görüldüğü gibi [npm] komutu tanınmamıştır. Bu, komutun terminalin PATH'ine (yürütülebilir dosyayı aramak için taranacak klasör listesi; burada [npm]) ait olmadığı anlamına gelir. Terminal tarafından kullanılan PATH'i şu şekilde öğrenebiliriz:

[npm] adlı yürütülebilir dosya bu klasörlerin hiçbirinde bulunmuyor. Laragon tarafından yüklenen diğer araçlar gibi, bu dosya da Laragon'un [<laragon>\bin] klasöründe, daha spesifik olarak [nodejs] ve [4-6] klasörlerinde bulunur.

[VSCode]'i başlatmak ve [npm]'e erişmek için, bir Laragon terminalinden [VSCode]'i başlatacağız. Bu şekilde çalıştırıldığında, [VSCode], Laragon terminalindeki PATH dosyasını devralacaktır; bu dosya ise [node] ve [npm] yürütülebilir dosyalarını içeren klasörü barındırmaktadır:

[1]'te: [path] komutunu girin;
[2]'te: PATH'in klasör listesi. Burada [node-v10] ve [2] klasörleri görülüyor; bu da [node] ve [npm] yürütülebilir dosyalarının bulunacağını garanti ediyor;

[VSCode], bir Laragon terminalinden [code] komutuyla başlatılır:

[2]'te, [VSCode] içinde PowerShell terminali açılır;
[3-4]'te, [node] ve [npm] yürütülebilir dosyalarına erişilebildiği görülür;

Not: [VSCode] geliştirme ortamını başlatan Laragon terminalini kapatmamalısınız, aksi takdirde VSCode kendisi kapanır.

Son bir ayar daha yapacağız: [VSCode]'in varsayılan terminalini değiştireceğiz:

[settings.json] dosyası hemen güncellenir:

Şimdi, [VSCode] ve [1] adlı yeni terminalleri açalım:

[2]'e, bir [cmd] terminali (PowerShell değil);
[3]'e, [path] komutu terminalin PATH değerini verir;
[4]'te, [node] ve [npm] yürütülebilir dosyalarının bulunduğu klasör açıkça görülmektedir

2.2.2. Visual Studio Code’a uzantı ekleme

[VSCode] ile bir JavaScript dosyası oluşturalım:

[3-4]'te bir klasör oluşturun;
[5] dizininde, [VSCode] dizinini geçerli dizin olarak ayarlayalım;
[6]'te bir terminal açılır;
[7]'te, seçilen klasörün içinde olduğumuzu görüyoruz. Bundan sonraki işlemler bu klasörde gerçekleştirilecektir;

[1-3] komutuyla: yeni bir klasör oluşturulur;
[4] klasörüne: bu klasöre bir dosya eklenir;

[5-7] klasörüne: ilk JavaScript programımızı oluşturuyoruz;

[8-9]'te: JavaScript programını çalıştırıyoruz;
sonuç, [10] yürütme konsolunda görüntülenir. [11]'te yürütülen komutu görüyoruz: [node] uygulaması, [test-01.js] betiğini çalıştırdı. Bu, söz konusu yürütülebilir dosyanın [VSCode]'in PATH'inde bulunması sayesinde mümkün olmuştur; aksi takdirde, [node] komutunun bilinmediğini belirten bir hata mesajı alırdık;

Aynı şekilde ikinci bir komut dosyası olan [test-02.js]'i çalıştırmak için de aynı adımları izleyelim:

[1-3]'te yeni komut dosyası tanımlanıyor. 1. satırdaki [use strict] komutu, sözdiziminin sıkı bir şekilde kontrol edilmesini gerektirir. Bu bağlamda, tüm değişkenler [let, const, var] anahtar kelimelerinden biriyle tanımlanmalıdır. 2. satırdaki [x] değişkeni için durum böyle değildir;
bu kod [Ctrl-F5] ile çalıştırıldığında, [5] hatası alınır. Bu tür hatalar hakkında çalıştırma öncesinde uyarı almak mümkündür. Bu daha tercih edilebilir bir yöntemdir. İki şey yapacağız:
- [npm] ile, komut dosyasının sözdiziminin ECMAScript 6 standardına uygun olup olmadığını kontrol eden [eslint] adlı bir kütüphaneyi yükleyeceğiz;
- ayrıca ESLINT adlı bir Visual Studio Code uzantısını yükleyeceğiz; bu uzantı, [eslint] kütüphanesinin [VSCode] içinde kullanımını kolaylaştırır;

Öncelikle, [npm] aracını kullanarak [eslint] JavaScript kütüphanesini yükleyelim. Bir [npm] kütüphanesini (paket olarak da adlandırılır) yüklemek için, kütüphanenin tam adını bilmek gerekir. Eğer bilmiyorsanız, [npm] sitesine gidip URL (2019) [https://www.npmjs.com/] bölümüne bakabilirsiniz:

[3]'te, [esl] ile başlayan paketler;
[4-6]'te ise [eslint] paketi bulunur;

[7] içinde, [eslint] paketini yüklemek için [npm] komutu;
[8]'te, paketin yapılandırması;
[9]'e, bir JavaScript betiğinin sözdizimini kontrol etmek için kullanımı;

[VSCode]'in [Terminal] penceresine [eslint] paketini kuruyoruz. Öncelikle, [VSCode] çalışma klasörünün kök dizinine bir [package.json] dosyası oluşturmamız gerekiyor. Bu dosya, [VSCode] projesi tarafından kullanılan jS paketlerinin listesini içerecektir:

[1]'te, proje gezgininde sağ tıklayın (tests klasörüne değil);
[3-4] dosyasında, [javascript] projesinin kök dizininde, [tests] klasörüyle aynı seviyede (ancak [tests] içinde değil) [package.json] dosyasını oluştururuz;
[4-6]'te, [package.json] dosyasına boş bir jSON nesnesi eklenir;

Ardından, [eslint]'i kurmak için [VSCode] terminalini açıyoruz:

[2]'te, [javascript] projesinin kök dizinindeyiz;
[3]'te, [eslint] paketini yükleyen komut;
çalıştırıldıktan sonra,
- [4-5]'te, [package.json] dosyası değiştirilmiştir. 3. satırda, kurulu olan [eslint] sürümü bulunur. 2. satırda, [devDependencies], kurulumun [--save-dev] argümanına karşılık gelir. Bu argüman, yüklenen bağımlılığın [package.json] dosyasında [devDependencies] özelliğinin bir öğesi olarak kaydedilmesi gerektiği anlamına gelir. Bu özellik, geliştirme modunda gerekli olan ancak üretim modunda gerekli olmayan proje bağımlılıklarını listeler. Nitekim, [eslint] bağımlılığına yalnızca geliştirme aşamasında, yazılan kodun ECMAScript standardına uygunluğunu doğrulamak için ihtiyaç duyulur;
- [6]'te, projede [node_modules] adlı bir klasör ortaya çıktı. Bu, projenin bağımlılıklarının kurulduğu klasördür;

[7]'te, kurulan paketlerin bir kısmı yer almaktadır. Bunların sayısı oldukça fazladır. Nitekim, sadece [eslint] paketi değil, aynı zamanda bu paketin dayandığı tüm paketler de kurulmuştur;

[1-2], bir terminalde [VSCode] komutu verilir ve [eslint] paketinin yapılandırma komutu çalıştırılır. Bu komut, [3]'i nasıl kullanmak istediğinizi öğrenmek için çeşitli sorular soracaktır. Şüpheye düşerseniz, önerilen varsayılan seçenekleri olduğu gibi bırakın. Bir seçeneği belirlemek için klavyedeki yukarı ve aşağı ok tuşlarını kullanarak seçeneği seçin ve ardından onaylayın;
[4]'te, projenin kök dizininde bir [.eslintrc.js] dosyası oluşturulmuştur;
[6]'te dosyanın içeriği yer almaktadır. Bu içeriği kendi dosyanıza kopyalayabilirsiniz;


module.exports = {
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": "eslint:recommended",
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "rules": {
  }
};

Tüm bunlar, [test-02.js] dosyasındaki hataları bildirmek için yeterli değildir:

[2-3] komutunu girmeniz gerekir ki [tests/test-02.js] dosyası analiz edilebilsin;
[4] dosyasında, tanımlanmamış değişken hatası tespit edilir;

[VSCode] dosyasına, JavaScript hatalarını gerçek zamanlı olarak görüntülememizi sağlayacak bir eklenti ekleyeceğiz. Bu eklenti, daha önce kurduğumuz [eslint] paketine dayanmaktadır:

[3-5]'te, [ESLint] adlı uzantıyı kuruyoruz;

[1]'e, yeni yüklenen eklenti hakkında bilgi içeren bir sayfa;
[2]'te, [ESLint]'in doğrulama modunun [type] olduğu görülmektedir; bu, jS komut dosyalarının sözdiziminin metin yazılırken aynı anda doğrulanacağı anlamına gelir;

ESLint, [VSCode]'in genel yapılandırma dosyası aracılığıyla yapılandırılabilir:

[6-7]'te, [ESLint]'in yapılandırması bulunur. Bu yapılandırmayı buradan değiştirebilirsiniz;

Şimdi [test-02.js] dosyasına geri dönelim:

[3-4]'e dönüştürüldüğünde, [x] değişkenindeki hatalar artık bildiriliyor;
[5]'e: dosyadaki ESLint hatalarının sayısı;
[6]'te, [tests] klasöründe hatalı dosyalar olduğu belirtilir;

Hata düzeltildiğinde, ESLint uyarıları kaybolur:

Şimdi [Code Runner] adlı bir uzantıyı yükleyelim:

[Code-Runner] [1-5] uzantısı yüklendikten sonra, bunu [6-7] (yukarıda) ile yapılandırabiliriz;

[1-2] dosyasında, [Code-Runner]'in yapılandırma öğeleri;
[3]'e dönüştürürken, her çalıştırmadan önce çıktı terminalinin temizlenmesi istenir;
[4]'te, farklı dillerin çalıştırma araçlarını listeleyen [Executor Map] öğesi bulunur;
[5-6] dosyasında, yapılandırma panoya kopyalanır;
[7-8]'te, [settings.json] dosyasını değiştirin;

[2]'te, [settings.json] [1] dosyasının son öğesinin arkasına virgül eklenir;
[3] dosyasına, daha önce [5-6] dosyasından kopyaladığımız içeriği yapıştırın: bu, [VSCode] tarafından desteklenen çeşitli dilleri çalıştırmaya yarayan komutların listesidir;
[4]'te, Javascript dosyalarını çalıştırmaya yarayan komut bulunur. Bu komut, yalnızca [node], PATH'in içinde yer alıyorsa çalışır. Aksi takdirde, [5] yürütülebilir dosyasının tam yolunu girebilirsiniz;

Şimdi yapılandırmayı kaydedelim (Ctrl-S). [Code Runner] uzantısıyla, Javascript dosyaları (yukarıdaki) [6] koduna sağ tıklanarak çalıştırılabilir:

2.2.3. Kodunuzu biçimlendirmek için kullanabileceğiniz bazı yararlı [VSCode] komutları

kodunuzu biçimlendirmek için üzerine sağ tıklayın [1];
açık pencereleri kapatmak için başlıklarına sağ tıklayın [2-3];

belirli bir pencereyi görüntülemek için [4-5];
projenizi (Çalışma Alanı) kaydetmek için [6-9];
[10-11] projesini kaydetmek için;

[11-16] projesini açmak için:

Yüklü uzantıları görüntülemek için [19-20]:

Artık JavaScript ile geliştirme yapmak için iyi araçlara sahibiz. Şimdi bu dili kısa kod örnekleri yardımıyla tanıtacağız. Bu tanıtım, PHP dersinin devamı niteliğinde olduğundan, zaman zaman bu iki dil arasında karşılaştırmalar yaparak aralarındaki farkları vurgulayacağız.