Sadece özel karakterler için ve okunabilirk için pre etiketlerini kullanabiliriz
Yerelde görüntülemek için açtığımız url'deki adres tüm dünyada aynı olarak web geliştirme için ayrılmıştır. 127.0.0.1 yerine localhost yazarsak aynı web sitesi adı gibi bir isimle çağırmış oluruz. Go Live olarak da localhost:5500 yazarsak görürüz. 5500 kısmı port kısmıdır. Internete açtığımızda 80 ya da 443 portundan genelde açığa çıkar. örneğin hepsiburada.com:443 ya da 80 yazarsak yine aynı adrese çıkacaktır.
Box model : content - padding - border - margin
Netlify drop üzerinden ücretsiz yayına aldık
Favicon generetors ile normal bir resmi favicona çevirdik ve link ile include ettik favicon
"/" Server'da bunu kullanacağız
Command Line Interface (CLI) vs Graphical User Interface (GUI) ayrımında bizim cli tarafında yazdığımızı öğrendik. Windows tarafındaki cmd ekranı.
del komutu siliyor mkdir yeni klasör oluşturuyor rmdir klasör siliyor git --version ile git versiyonunu görebiliriz git init ile initial ediyoruz git status bize son andaki snapshot hakkında bilgi veriyor git add ... ile untracked durumdan tracked duruma çekiyoruz *git commit -m ..." -m olan commit messajı git config --global --edit diyerek name ve email kısımlarını değiştirebiliyoruz. Bunu yaptıktan sonra :x diyerek çıkabiliriz. git config --global user.name "Ersin göç" diyerek username değiştirebiliriz git config --global user.name bize username adını gösterir git config --global user.email "[email protected]" diyerek username değiştirebiliriz git config --global user.email diyerek email adını değiştirebiliriz cls ve clear command ekranını temizler git log log kayıtlarını görüyoruz git add text1 text2 text3 diyerek çoklu git add . tek seferde yapabiliriz Buralarda git statusu çok kullanıyoruz çünkü neler yaptığımızı görmek için
git branch hangi branchta olduğumuzu gösteriyor. Aynı zamanda git status ile de bunu görebiliyoruz. Default olarak master geliyor ve bizim bunu değiştirmemiz lazım. git branch -m main ile main adında branch açabiliriz.
git checkout -b feature dersek feature adında yeni bir branch açıyoruz ve ona geçiyoruz. git branch dersek ya da status dersek görüyoruz yine
git add . tüm yeni oluşumları ekler
git merge branchAdı dersek bulunduğumuz branch ile yazdığımız branch adını birleştirir. commitleri ve eğer dosya varsa onları da birleştirir getirir. Bunu tek seferde yapıp bitirmiyoruz. Örneğin feature branch'tayken yeni commit yaptık sonra main branchına geçip feature branchını merge ettik diyelim. Bundan sonra tekrar feeature konumuna gidersek tekrar yeni bir şey eklersek otomatik olarak bunu main branchı ÇEKMEZ! Biz yine merge etmemiz gerek dosyalar ve commitler için
git rm dosyaAdi ile aynı dizinde bulunmak şartıyla bir dosyayı silebiliriz.
git reset --hard HEAD~1 son yapılan değişkliği geri alır. Eğer 1 yerine 2 yazarsak son yapılan 2 değişikliği geri alır. Ayrıca bunu yapmak için git add ve git commit yapılması gerekir. Aksi halde en son ne zaman yapıldıysa ta oraya kadar gidecektir.
git branch -D feautre feature(özellik) isimli branchı siler.
git checkout -- . Bu eğer bir değişiklik yaptık ve bunu commit etmemiş haldeyken geri almak istersek (ctrl + z gibi) kullanıyoruz.
git reset README.md ==> yeni bir şeyler ekedik ve bunu git add yaptık. Ama sonrasında geri almak istiyoruz. Hangi dosyadaysak o dosyanın adını yazarak git add olmadan önceki haline döndürüyoruz. Hatta bunun üstüne git checkout -- . yaparsak en son commit edilmiş yapıya da geri döneriz.
git clone --urladres-- . Bulunduğumuz dizine kopyalıyoruz projeyi
git-scm veya github bu araçlar hakkında daha fazla bilgi edinmek için bakabiliriz.
display: flex ile bir parent olan elementte flex yapısını oluşturuyoruz flex-direction ile hangi yönde olması gerektiğini söylüyoruz. column -> aşağı doğru row -> soldan sağa doğru bir eksen. flex-wrap -> genişlik verilmediğinde geçerli. Elementler ekran küçüldüğünde sarmalansın mı yoksa sarmalanmasın mı yapısı. wrap -> sarmala nowrap -> sarmalama align-items -> dikeyde nasıl davranacağı justify-content -> yatayda nasıl davranacağı
background-image
background-size - cover
background-position - center
margin: 0 auto width verilmişse ortalar
Bir elemanı sağa sola üste alta taşıma istiyorsak block bir element içindeki blok elemente position: relative; vermeliyiz. Örneğin artık top: 20px; dediğimizde üstten 20px ittirildiğini göreceğiz.
Position: absolute verdiğimizde ise elemenın inline element gibi davrandığını görürüz ve sonraki gelen eleman bunu yokmuş gibi yanına konumlandırarak davranır.
Position absolut dediğimizde html tagına göre konumlandırma yapıyor kendisini. Bunu width 100% ile destekliyoruz ve sonrasında çıkacak hatayı da box-sizing border box ile çözüyoruz. Tam oturması için top: 0; left: 0; da veriyoruz
box-sizing: border-box; yapısını gördük.
object-fit: cover; ile resimdeki genişliği komple sağlıyoruz
childtaki margin hatasını parent'a padding vererek çözdük
background: lineer-gradient(..deg, rgb(), rgb()) arka planı geçişli yaptık. 0, 45, 90, 135, 180 gibi 45'lik özel kodlar verebiliriz
Override olayını tekrar position: static; ile çözdük
Izgara yapısını oluşturmak için öncelikle display: grid; veriyoruz
Ardından sütunda ayrılması için grid-template-columns: 1fr 1fr; gibi ölçüm yapıyoruz
Ardından gridler arasındaki boşluğu oluşturmak için gap: 20px 20px gibi değer veriyoruz
Özel olarak grid almış olan bir li etiketini düzeltmek için li:nth-of-type(3) { grid-column: 1 / span 2; } yapısını kullanıyoruz
Artık html etiketlerinde article da kullanıyoruz
Pixel ölçeklenebilir değil. % em ve rem kullanabiliriz.
% verdiğimizde örneğin parent eleman 40px ise ve child elemanda %200 vermiş ise font size 'a bize dönecek değer 80px olur. Eğer vermez isek default olan değer tarayıcının değerine göre ölçeklenir. Tarayıcının değerini görmek için ise En sağda 3 noktadan ayarlar sonrasında Görünüm (view) buradaki yazı tipi boyutu 16px e göre şekil alır. Değiştiğini görmek için burada oynamalar yapabiliriz
em de yüzde gibi relative behaves for the parent element. font-size a göre şekillenir.
rem ise asıl kullanacağımız property. Buna göre rem root elemente göre behaves. Browser settings ' e göre always relative behaves. When html element font-size give the for example 24px. Roota göre şekillenir. 16px ' e göre şekillenir
Desktop max-width with started. Geriye doğru gider. Mobile first mind-width ile başlar maximuma kadar gider.
smartphone - 480px, tablet - 768px, notebook - 1024px, desktop computer 1200px, tv - >1200px
3 şeyi hatırla
- Adım adım farklı özellikler ekleyin
- Aktarılması gereken temel bilgiler hakkında düşünün
- Web sitenizi aşırı şekillendirmeyin
Boyutlandırma
Örnek olarak stripe com
Merkezi genelde ortala sağdan soldan boşluklar bırak bütün alanı kullanma.
cardDeailts projesinde başlık için serif diğer yazı tipleri için sans serif yazı tipini kullandık. ayrıca button price için ayrı bir yazı ağırlığı mevcut
Gri tonu her zaman kullanacağız ve her zaman sayfalar için gereklidir. Örneğin h1 kullanırken bile color kullanacağız ve saf siyah yerine biraz daha gri tonu kullanacağız böylelikle daha profesyonel görüntüye geçmiş oluyor. Ayrıca bir tane ana renk seçeceğiz.
Font size, font weight, color çok önemli. Örneğin html etiketinin backgroundunu çok açık gri tonlarında kullanırken vurgulayacağız metindeki yerleri daha koyu tonda uyguluyoruz ve font size ve font weight verebiliyoruz.
Html elementinin içerisinde css değişkenlerini yazıyoruz. Örneğin --color-gray-100: rgb(233,233,2330) dediğimizde sonrasında bu rengi çağırmak için var(--color-gray-100) dememiz gerekiyor. Aynı şekilde font size 'ı da böyle değişkene aktarabiliriz.
html, :root ve * etiketlerine baktık
transformation - Elementin görünümünü değiştirmek veya taşımak. Ör. üzerine geldiğinde hover efekti. Örneğin transform: scale(2) dediğimizde 2 kat büyüklüğüne çıkacak ya da transform: rotate(180deg) dediğimizde ters dönecektir.
transition - Başlangı. durumundan bir başka duruma yumuşak geçiş yapımı. transition: transform 0.5s ease-out 2s dediğimizde başka yerde hover da transform verdiğimizde bu çalışacaktır. Sondaki gecikme ortadaki süresi
Svg Dökümantasyon ile svg ücretsiz güzel dosyaları görebiliyoruz. Bunu kullanabiliriz.
Formlar: contact form, checkout form, login form ve comment form için önemli yere sahipler
input type ile (text, number, email), textarea ile multi-line text input field, select dropdown multiple-choice or multi-select input, button reset ya da submit yaptığımız form.
POST istekleri gönderilen tüm veriler talebin kendisinin bir parçası olacaktır. GET ise amaç veri göndermek değildir. Ayrıca url ye eklenir. Ayrıca server'a gönderirken name değerini eklemeyi unutmuyoruz.
label etiketi ve for attribute bakıldı. Bunun için inputa id verildi
buttonlara ve inputlara özel font family verilmesi gerek yoksa default değeri çekiyor. Buttona gelip font: inherit dersek bütün yukardan gelen değerleri çeker. Eğer body'e bir şey veriyorsak body'den çeker.
input:focus öğrendik. label text password date email radio
checkbox yapıyorsak yine name ve value değerlerini giriyoruz. Eğer value vermezsek işaretlenirse get üzerinden gönderince on değerini gönderir.
textarea ile inputa verdiğimiz tüm style'ı yeniden veriyoruz. Kapatma tagı var.
select ile sarmalayıp option ile seçenekleri yaptığımız dropdown menu yaptık
Formu semantiğe çevirdik header main section ile.
Validation olarak required min max minlength maxlength parametrelerini gördük. Buna göre tarihte de min ve max verebiliriz. Format 2010-01-10 şeklinde olmalı!
Textareada kullanmak üzere rows="8" gibi değer yaptık ve placeholder value gibi değerleri gördük. Textarea için resize: none; değerini de koyuyoruz
Js ile canlı olarak veri alış verişi yapabiliriz borsa gibi.
Arka tarafa bir zamanlayıcı atabiliriiz. (internet bankacılığında 5 dakikadan sonra bizi attığı gibi)
Hata mesajları , kullanıcı doğrulamaları yapabiliriz.
Syntax programalama dilinde dilbilgisidir.
Js ile genelde bir şeyleri manipule etmeye çalışırız
String ve number değişkenlerine baktık. Değişkenler aslında bir kutudur. Diyelimki bir vergiye ait numaramız var 32 (value) diye. Biz bunu container dediğimiz kutularda yıllarca saklayıp geri çekebiliriz.
Tek tırnak kullanacağız. Tek tırnak içinde yine tek tırnak kullanmak istersek ** işareti kullanacağız.
Alert , string, number, array, object
Değişkenler: veri kapsayıcıları olarak tanımlayabiliriz. Değişkenler birer anahtar kelimedir. Biz let değişkenini kullanıyoruz. Bu sayede yeni bir değişken oluşturduğumuzu tarayıcıya aktarıyoruz. Js tam da bu.
Değişken isimlerinde camelCase kullanıyoruz ve depoladığımız değişkeni tanımlamalı bu isim
Tüm js kodu yukarıdan aşağı , soldan sağa doğru yürütülür ve her zaman böyle çalışır.
Her kodun sonuna mutlaka noktalı virgül koyalım
Html dosyasını şişirmemek için js kodunu da css kodu gibi dışardan çekiyoruz
Çoklu verileri saklamak için array yapısını kullanıyoruz. Çok fazla veri ve değişken koyabiliriz. İndex 0'dan başlar
Örneğin pasaportu ele alalım. Burada pasaportta isim yaş ülke cinsiyet gibi çok farklı kalemler tek kişiye ait. Burada bizim ihtiyacımızı karşılayan şey object. Label ve value etkileşimi söz konusu. Aralarında mantıksal bağlantı varsa bunları gruplaştırabilir yani nesne oluşturabiliriz.
Stringleri bölmek için araya + koyabiliriz çok uzunsa. Ya da daha kısa yöntemi backtickler ile yapabiliriz.
Amacımız her zamankod okunurluğudur.
functions. Eğer belirli bir işlem yaptığımız kodumuz varsa ve bunu farklı yerlerde tekrar tekrar çağırıyorsak fonksiyonları kullanmamız gerekir. İsim verilirken işlemin ne yaptığı ile alakalı bir isim vermek gerekir. Fonksiyonu tanımladığımızda tarayıcı kendi özel komutumuzu öğrenecek ama bunu henüz yürütmeyecektir. Tarayıcıya ne zaman yürüteceğimizi söylememiz gerek
Js tarafından tanımlanan hatalar tarayıcıda consoleda gözüküyor.
Fonksiyonun içinde let gibi tanımlama yaparsak orada kullanılır o değişken. O yüzden dışarda tanımlama yapıyoruz. Eğer hem dışarda tanımlama yapıp hem de fonksiyon içinde let tanımlama yaparsak aynı isimle buna variable shadowing (değişken gölgeleme) denir. Js buna izin veriyor. Fonksiyon içinde aynı adla yeni bir değişken yaratıyor.
Fonksiyonun içinde dışardan gelen değişkeni tutmak yerine artık return anahtar kelimesini kullanıyoruz. Artık bu ifade ile her yerden erişebilip farklı işlemlerde de kullanarak esneklik sağlıyoruz.
Fonksiyonları daha esnek hale getirmek için parametre göndermeye başladık.
Nesneler içinde nesneler olabilir.
Nesneler içinde kullandığımız name, price gibi değerler bize property olduğunu gösterir. Eğer biz nesne içinde bir fonksiyon tanımlarsak bu method olacaktır. Fonksiyon tanımlamasında function keywordu yazılmaz!! tıpkı değerleri yazarken başına let koymadığımız gibi.
console.log a geçtik alert bıraktık. void hiçbir şey döndürmez. (console.log üzerine glediğimizde void yazıyor)
Matematik işlemlerini gördük. * / + - %
Integer ve ondalıklı olan sayı floats gördük.
number++ number-- gibi değerleri gördük
Stringleri birleştirdik + operatoru ile
Stringlerde kullanabileceğimiz string.length ile stringin tüm karakterlerini bulabiliyoruz. Bir obje değil ama js arkaplanda bunlar yazılmış. aynı zamanda string.toUpperCase() de kullanabiliriz
Array'ler de strignler gibi length özelliği alıyorlar. Aslında stringlerin array gibi davrandığını söylemek mümkün.
windows global nesnesiyle ulaşıyoruz. konsola yazdırdığımızda tüm özellikleri görebiliriz. Buradaki alerti daha önce görmüştük hatta.
Document object model. Html etiketleri js ' ye dönüştürülebildiğinden tarayacıda dom ile etkileşime girebiliyor. document objesi ile bunları gerçekleştireceğiz.
console.log(document) yazınca ve üstüne gelince konsolda bize tüm html etiketini gösteriyor. Document sayfayı temsil ediyor.
console.log yerine console.dir(document) kullanınca asıl js verilerine bakabiliyoruz. Burada meta -> head -> children ile head de ekli olan verileri görebiliyoruz. yine aynı şekilde meta -> body -> children ile de body'deki elemanları görebiliyoruz.
!!! Html kodundan önce js kodunu head tarafında yazarsak script tagına defer eklememiz gerek!!! Bu bize kodun ertelenmesi gerektiğini söylüyor.
Consol'da yazcağız artık. Auto complete daha güzel de çalışıyor burda.
getElementById yapısını kullanacağız ve ayrıca bunları hep bir değişkende saklayacağız sonradan kullanmak için
querySelectorAll ya da querySelector(eşleşen ilk öğe) ile dom'a erişmeyi öğrendik.
!!! console.dir ile dom'a ulaş
Metin içeriğini textContent ile a tagının href özelliğini de href ile değiştirdik.
Bir zamanlayıcı sonrası yeni bir eleman eklemek isteyebiliriz. Bu olaylarda yeni bir senerya oluşturuyoruz. createElement() ile oluşturuyoruz. append ile içine atama yapıyoruz.
Öncelikle elemanı seçeceğiz sonrasında remove ile sileceğiz. Eski tarayıcılarda kullanmak için ise eleman.parentElement.removeChild(eleman) dememiz gerekiyor.
Var olan elemana parentelement üzerinden append edeceğiz.
innerHTML özelliğini gördük. Daha öncesinde textContent ile içeriğe erişmiştik. Arasındaki temel fark textContent sadece düz metin olarak içeriği alır. Bunu consol'a yazdığımızda görüyoruz. innerHTML ise içeriğindeki metin ve varsa html etiketi hepsini hesap ederek alır. Html etikeni de kullanabiliriz. textContent'te düz metin olarak gösterir etiketleri.
Olayları dinlemek için addEventListener ile çalışacağız. Öncelikle içeriğe erişeceğiz yine. İki parametre alıyor. İlki mesela click ikincisi bizim eriştiğimiz değişkenle alakalı yazdığımız fonksiyon olacak. Burada fonksiyonu açma kapama parantezleri yazmayacağız. Bu her işlev oluştuğunda çalışacak.
inputlarda tuş olayı için input ile yapacağız. Fonksiyon için de value özelliğini kullanacağız. Parametre geçtiğimizde ve bu parametreyi konsola yazdırdığımızda propertyleri görebiliyoruz. Burdan da even.target.value ile veriyi çekiyoruz. Event.data ile de tek tek verilerin girişinie bakabiliyoruz.
Değişkenler yer tutucu kaplardı. Değişkene saklanan değerleri sonradan değiştirebilirdik.Sabit değişkenler(constants) sabit değişkenlerdir. const ile tanımlanır. Let anahtar sözcüğünün alternatifidir. Asla yeni bir değerle değiştirilemez. Mesela kullanıcı adını asla değişltrimek istemeyebiliriz.Kod güvenliği sağlayabilir. İstenmeyen hataları önleyebilir. Asla değişmeyeceğinden emin olmak gerekir.
Jsdeki style tanımlamaları camel case kuralına göre yazılmış. spanElement.className = 'warning' dersek burada elemanın classı direkt warning olur. Eğer eski class varsa üstüne yazar. Biz bunun yerine spanElement.classList.add('warning') dersek üstüne yazacaktır. Kaldırmak istersek remove diyeceğiz.
İki yapımız mevcut. 1.cisi if 2. ise loop. Buna göre şekillendireceğiz.
if () {} if değerlerinin arasında boolen bir değer olur true or false. Yes mi No mu şeklinde. Direkt true ya da false değerleri verebiliriz her zmana yürütür bunu.
If yapılarını karşılaştırma ya da mantıksal operatorler ile birlikte kullanacağız. Karşılaştırma Operatorleri ==, === eşitlik operatoru, >, <, >=, <= , !, !=, !==. Mantıksal Operatorler ise && and ve || or yapılarıdır. & operatoru |operatorunden onceliklidir. If koşullarında her zaman ilk baştan yukarıdan aşağı doğru başlar ilerler.
Boolen değerleri saklayacağımız veri yapılarını öğrendik. Örneğin let isLoggedIn = true yapısı. Kullanıcı girişi yoksa !isLoggedIn ile yapıyı sağlıyoruz. Ya da bir kullanıcı adı varsa da aynı şekilde çalışır eğer boşsa false döndürür. let enteredUserName=''; ise 0 yani burası false döndürecektir. Boş bir karakter bile true döndürür. Yani boş veya
for , for .. of arrayler ile kullanılır. for .. in object içinde döner. Boole değereri ile çalışırsak while döngüsü kullanacağız. for .. of ve for .. in sıkkça kullanılıyor.
for (let i =0; i > 10; i++) {} if gibi yazılışı var. içerisine let ile başlıyoruz. Mesela çevrimiçi bir oyunda bu kod işimize rastgele bir sayı üretmede lazım olabilir.
Örneğin kullanıcılara mail gönderreceğiz diziden. Bunu for of ile yapacağız. for (const user of users) { } burada user ile yeni değişken oluşturmuş oluyoruz. Aynı zamanda eskiye uyarlı yazmak istiyorsak for (let i = 0; i < someArray.length; i++){console.log(someArray[i]);} yazmamız gerekecek.
for in => for (const user in users) {console.log(users[user])} ile verileri çağırabiliriz.
Sabit bir sayıda veri varsa for döngüsü kullanıyoruz. Şimdi while ile sadece bir şartımız var. while (!isFinished) {isFinished = confirm('Do you want to quit?')} ile isFinished = true diyerek bir koşul yapabiliriz. Burası bitmeden diğer satırlara geçmez.
Bir inputun değerini direkt input.value ile alabiliriz.
querysSelectorAll bize bir dizi döndürür. Biz bu sayede for of döngüsünü kulanabiliririz.
formData verisi çok önemli çok kullancaz new operatoru ile.
Bootstrap, Material UI, Tailwind CSS sayesinde corousel scroolspy ve parallax effect gibi şeylere ulaşabiliriz. Daha az kod yazarız ama bunlar üzerinde daha az kontroloe sahibiz. Hataya daha az açık. Genelde daha büyük projelerde kullanıyoruz.
Bootstrap eklerken js dosyasını defer ile yine erteleme özelliğini kullanabiliriz. fixed-top classı ile navbarı üste sabitledik.
Parallax efekti için google aramalarına baktık. simplePARALLAX.js adresinden ulaşıyoruz evraklara. Burada cdn i kopyala yapıştır yapıyoruz. Yine defer özelliği ekliyoruz projeye cdn yüklerken.
Normalde tarayıcı üzerinde kodlarımız çalışırken artık server üzerinde kodlar yazacağız. Python, PHP, Java C# gibi diller olmasına rağmen şu en populer Node.js. Yeni bir dil öğrenmemize gerek yoktur.
Node js Current Current olanı yani en son güncel halini indiriyoruz. Diğeri LTS ise eski kararlı sürümü. Bununla js kodlarını kullanmaya başlayabiliriz artık. Node js kodu yürüten araçtıkr. Node dükamanlar 'a ulaşabiliriz burdan.
Burada DOM yok. Js var. Bazı farklılıklar olacakır. Const ve let yine kullanabiliriz. Bunu ilkel olarak MacOs ta terminal yazarak bulacağız. Windowsta ise cmd yazarak bulabiliriz. Zahmetli diye vsc'da yazacağız. Burada ise aynı dizinde olmak şartıyla kodumuza node app.js ile ulaşıp çalıştırabiliyoruz. Cmd başlangç yardım ekranı
Daha önceden serverda netlify ve live-server olarak çalışmalar yaptık aslında. Şimdi netlify gibi biz yapacağız. Bize http istekleri almak için doc sayfasında http kısmına bakabiliriz.
Node js sayesinde 3. parti paketlerini kullanacağız. Yani express.js i. Yine vcs terminalinde olacağız. Öncelikle npm init yazacağız. Varsayılan için enter a basacağız genelinde. Bize sonunda bir JSON sunar. Json temelde standart bir metin dosyasıdır. Ancak belirli biçimlendirme kurallarına ve JS nesnesine benzeyen bir yapısı vardır.
Esas olarak yönlendirme istekleriyle ilgilidir. Dosyalara yazabileceğimiz ve okuyabiliceğimizi öğrendik. Manuel olarak kontrol etmiyoruz httpleri artık. Ayrıca nodemone ile işimizi kolaylaştırdık.
npm install express ile kurulumu yapacağız dosyamıza. Node js i arka planda bağlamamızı sağlayacak. Expressin de ihtiyaç duyduğu tüm paketler yüklenecektir. Aynı zamanda package.json dosyasında da bağımlıklıklar girişinde dosyamız eklenmiş olacaktır. node modules silsek bile sonradan npm i ile bunu geri yükleyebiliriz.
JSON dosyası metin verilerini daha okunabilir yapılması için geliştirilmiş formattır. Bu bir js kodu değil normal metindir aslında standartlaştırılmış. Alternatif olarak xml de kullanılıyor. Jsonda mutlaka çift tırnak olarak kullanılmalı jsden farklı olarak. ve aynı zamanda key kısımları da tırnaklar arasında yazılmalı ama js'de böyle bir şey söz konusu değil.
Node ile artık Form verilerini alıp bir dosyaya kaydedebiliyoruz.
Sürekli manuel olarak yeniden başlatmak yerine ekstra bir paket ekliyoruz. Kod otomatik olarak takip ediyor değişiklikleri. npm install nodemon --save-dev ile kurulumu yapacağız. Herhangi bir işlevsellik sunmuyor bize. Değişiklikleri kaydetmeden ilerlememizi sağlayacak. Package.json dosyasında scripts testten sonra virgül koyarak "start": "nodemon app.js" yazıp kaydedeceğiz. Şimdi npm start ya da npm run start diyerek başlatacağız. Şimdi nodemon tarafından destekleniyor ve sürekli kaydedip yeniden bailatmaya gerek yok.
Yolları bulmak için views adı altında klasör oluşturuyoruz. Html sayfalarını oraya aktarıyoruz. Dosyaları göndermek için res.sendFile gönderiyoruz artık.
Statik dosyaları saklamak için app.use(express.static('public')) ile public klasör açıyoruz ve stil script dosyaları içine atıyoruz.
Şablon oluşturma motoru npm i jsc . Dinamik bir yapı için <%= numberOfRestaurants %> veri yapısını kullanıyoruz. Render ederken 2. parametre olarak değişkeni {} arasına yazıp : koyup değere eşitliyoruz. Bu dosya sunucuda ayrıştırılır ve işlenir. Dinamik bir yapıya sahibiz artık. Veriyi çekeren <%= %> ile verileri alabiliriz. Ayrıca <% %> arasına for if gibi kodları yazabiliriz. yazabiliriz. Buralarda input içerisine html kodu yazılsa dahi ejs güvenli şekilde ayrıştıracaktır.
include ile parçalara ayıracağız. <%- %> yapısı bize yardımcı olacak.
EJS IDE excentions indirdik artık daha rahat biçimlendirme yapacağız. Kodu manuel olarak biçimlendircek prettier kullanmayacağız.
Dinamik route girişi yaptık. app.get("/restaurants/:id", function (req, res) { const restaurantId = req.params.id; //param özelliği ile alıyoruz res.render("restaurant-detail", { rid: restaurantId }); }); //Dinamik Route yapısını kullanacağız.
npm install uuid İle uniq id için bağımlıklık yüklüyoruz.
Tüm backend kullanacağımız parçaları util klasörde topluyoruz.
Try catch yapılarını gördük. Tüm sayfayı hata varmış gibi göstermek yerine hata olabilecek yerlere try cath ile yakalıyoruz. Her şeyi try catch bloguna yazmıyoruz ama. Daha çok geliştirme aşamasında bunları yapıyoruz.
Scoping(Kapsam belirleme): Değişkenlerin ve sabitlerin ve fonksiyonların sadece belirli yerlerde kullanılması durumudur. Sadece tanımladımığımz yerde mevcuttur.
new Date() gibi class sınıflarını gördük. Bunu çağırırken de new ClassAdı olarak çağırcağız. This oluşturalacak nesneyi ifade eder.
Asenkronda kodun okunup bitmesini beklemez. Başlar ve devam eder. örneğin dosya okuma işleminde olduğu gibi. Bir dosya okumak, vertitabanı işlemleri, http istekleri her zaman zaman alan uygulamardır.
Sürekli dosyaya veri yazma işlemleri (CRUD) sistemi yoracağı için daha optimal seçenek olan database ile işlemlerimizi yapmamız gerek. İki tür veri tabanı var. 1. SQL(ilişkisel veri tabanı) 2. NoSQL (İlişkisel olmayan veri tabanı).
Sql: İç içe geçmiş veri türü yok. Açıkça tanımlanmış şemalara sahibiz. Her şema için bir masamız var yani. Bu da sorgulama yapmamızı kolaşlaştırıyor.
NoSql: Çok sayıda tablo ile çalışmak yerine bir kaç tablo ile çalışır. Verileri örneğin JSON ile saklıyoruz. Tek bir sorgu ile tüm verileri çekebiliyoruz. Daha az karmaşık ama veri boyutu daha büyük. Satırlar ve sütunlar mantığı yoktur. Bir tabloda saklanan veriler vardır.
İkisinin de kullanıldığı web siteleri de var. Çok büyük ölçekli web sitelerinde veri saklamak için daha çok NoSql kullanlıyour.
MySql en popüeri kullanmak için . PostgreSql de ücretsiz.Microsoft Sql ücretli.
MySql Installer ile indirip kurulumu yapacağız. (Düşük parti indiriyoruz. )
CREATE DATABASE
database_adi
ile database oluşturabiliriz. Büyük harf kullanmak gelenektir.
Table oluştururken yine küçük harflerle yazıyoruz. Birden fazla kelimede alt çizgi kullanacağız.
INT - sayılar için, VARCHAR() - kısa isim veya adresler gibi, DECIMAL - ondalık basamaklar fiyatlar gibi, DATETIME tarih ve saat, DATE zaman olmadan tarih, FLOAT, BOOLEAN doğru yanlış. id'leri INT ile saklıyoruz. PK işaretliyoruz primary key (1incil anahtar), NN boş olamayacağı anlamına gelir, AI her kayıt eklendiğinde id yi kendi başımıza ayarlamamız gerekmez.
name adı versek VARCHAR(255) maksimum karakkter ayarlayabiliriz. NN işaretleiyoruz. boş olamsın diye. type adı versek yine aynı şeyleri yapabiliriz.
INSERT INTO restaurants (name, type) VALUES ('Web Dev Mealery', 'German') ile yeni veriler ekliyoruz. Geri getirmek için SELECT * FROM restaurants (*) her şeyi seçer.Flasa bastığımızda sonucu görüyoruz. Filtrelersek devamında WHERE type = 'German' AND name = 'w' ile filtreleyebiliriz. AND veya OR gibi kullanabiliriz. Örneğin sadece name alanında sorgulama istiyorusak SELECT name FROM restaurants WHERE type = 'German' ya da name,type da diyebiliriz. SELECT COUNT( * ) FROM restaurants WHERE type = 'German' ile sayıları alabiliriz. Ya da SUM( * ) ile toplamını bulabiliriz.
UPDATE restaurants SET name = 'İzmir' WHERE id = 1 id 1 olanı name güncelleriz.
DELETE FROM restaurants WHERE id = 1 ile silme işlemleri yaparız.
Daha uzun metin türleri örneğin yorum gibi TEXT olabilir.
Tarih için datatype DATETIME ve ayrıca default/expression kısmı CURRENT_TIMESTAMP . Tarih için elle ekleme yapmıyoruz artık kendisi ekliyor çünkü. Ekleme yaparken id gibi boş bırakacağız.
SELECT * FROM restaurants INNER JOIN addresses ON (restaurants.address_id = addresses.id) BURADA İLİŞKİSELTABLOLARI BİRBİRİNE EKLEYEREK GÖSTERİYORUZ. Daha ayrıntılı SELECT restaurants.name, addresses. FROM restaurants INNER JOIN addresses ON (restaurants.address_id = addresses.id)* diyebiliriz. SELECT restaurants.id, restaurants.name, addresses. FROM restaurants INNER JOIN addresses ON (restaurants.address_id = addresses.id)* gibi. SELECT restaurants.id, restaurants.name, addresses.*, types.name FROM restaurants INNER JOIN addresses ON (restaurants.address_id = addresses.id) INNER JOIN types ON restaurants.type_id = types.id WHERE addresses.city = 'Munich'
SELECT reviews., restaurants.name AS restaurant_name, addresses., types.name AS restaurant_type FROM reviews INNER JOIN restaurants ON reviews.restaurant_id = restaurants.id INNER JOIN addresses ON restaurants.address_id = addresses.id INNER JOIN types ON restaurants.type_id = types.id WHERE rating > 3
SQL'de önemli olan ilişkisel veritabanı tablolar arası.
Backendde veritabanına bağlanmasının sebebi tarayıcında çalıştığında kodları değiştirebilmesidir. Çünkü backenddeki kodu görüntüleyemezler.
node mysql2 paketini kullanacağız. npm install --save mysql2 ile kurulumu yapacağız. Bağlantı kurmamızı sağlayacak. Data klasöründe database.js dosyasında bağlantıyı kuracağız. const mysql = require('mysql2') sonrasında const pool = mysql.createPool({ host: 'localhost', database: 'blog', user: 'root', password: 'Eg145723.' }); ile bağlantı havuzu oluşturuyoruz module.exports = pool ile veriyi dışarı aktarıyoruz.
#body { white-space: pre-wrap; /* This ensures that line breaks and whitespace are kept */ } Bununla tarayıcı varsayılanı kırıp yazdığımız text metinlerini göstermiş oluyoruz güzel olarak.
Önceden tablolar yapmamıza gerek yok. Sözde collection lar var.Temel olarak veri kaplarıdır. İçinde document var ve js nesnelerine benziyor. Key value değerleri var. Satırlar ve sütunlarla çalışmayız koleksiyonlarla çalışırız. Tüm table'ı planlamak zorunda değiliz burda. Genellikle ilgili verileri aynı yerde saklarız. NoSQL de daha fazla esneklik var. Çok büyük uygulamalarda esneklik bize performansa mal olabilir. Bunları deneyime göre bakacağız.
MongoDb kullanacağız ücretsiz populer.
mongo db for windows ile mongodb kurabiliriz.
Hizmetler kısmından yine açıp kapayabiliriz.
mongo db shell Sonrasında bu shell programını kuracağız.
show dbs ile databeseleri görüntülüyoruz.
use database_adi ile yeni bir db oluşturuyoruz.
db.restaurants.insertOne( { name: "Munich Schinzethosue", address: {street:"Some Street 5", streetNumber: "23b" } } ) Veri ekleme
db.restaurants.find() tüm verileri bulma
db.restaurants.find({ name: "Ersin Göç"}) özel arama.
db.restaurants.find({}, {address:1}) Örneğin burda address verisini getiriyoruz sadece. Ama id bilgisi de geliyor. db.restaurants.find({}, {address:1, _id:0}) burda da addressi getiriyor ve id getirmiyor. db.restaurants.find({ name: "Ersin Göç"}) eşleşen tüm berileri getirir. db.restaurants.findOne({ name: "Ersin Göç"}) Sadece ilk eşleşeni getirir.
db.restaurants.updateOne({_id: ObjectId("63876671e23c47cf31b0e858")}, {$set: {"address.streetNumber": 12} })
update işlemi
deleteOne ya da deleteMany kullanacağız. ilk eşleşeni ya da hepsini sileriz.
db.restaurants.deleteOne({ _id: ObjectId("638765eee23c47cf31b0e857") })
delete işlemi.db.restaurants.deleteMany({})
bütün her şeyi siler.
db.restaurants.insertOne( { name: "Berlin BurgerHouse", address: { street: "Hamstreet", streetNumber: "212", postalCode: 1251, city: "Milan", country: "Italy" }, type: { typeId: ObjectId("6387b50be23c47cf31b0e85a"), name: "American"} })
iç içe veri ekleme
date verileri için mongo db date
gt: greather than gte: greather than equeal lt: lower than, lte: lower than equal . Bunlar sorgulama yaparken işe yarıyor.
db.reviews.find( {rating: { $gt: 2 } } )
Burası 2'den büyük olduğunu gösteriyor bize. mongo db query operators.db.reviews.find({ $and: [{rating: {$gt: 1}}, {rating: {$lt:3}} ] } )
Burası 1 den büyük 3 ten küçük değerler. çoklu değer.
mongodb nodejs sitesinden bakabiliriz. Bağlanmak için
npm i mongodb
ile başlıyoruz.
Burada client-side ve server-side kısmımız var.
Çoklu veri dosyası için multer kullanacağız. Express için yazılmıştır. Githubta kullanımı var.
npm i --save multer
ile kurulumu yapacağız. multer github Resmi dökümantasyon.
Ajax: Eşzamansız js ve xml anlamına gelir. Blog sayfalarında admin sayfalarında her türlü kullanabiliriz. 3. parti paketlerler kullanacağız. axios gibi. Şuan Xml yerine JSON formatını kullanıyoruz. Aslında xml kullanmaa sebebi makine tarafından okunabilir olması. Json da okunur ama key value değerleri vardır. Json text formatıdır. İç içe veriler eklenebiilir. Biz fetch() yerleşik işlevini kullanacağız. Daha modern olduğu için
Put : Sunucudaki bazı veriler güncellenir veya değiştirilir. Patch: puta benziyor. Delete: silme methodu. Ajax istekleri bunlar
Sosyal medya sitesi, online mağaza, admin web sitesi gibi şeylerde kimlik doğrulaması isteyebiliriz.
Şifreleri saklarken hashleyerek saklayacağız. Çünkü herhangi bir çalınma durumunda bu şifre email kombinasyonlarıyla başka sitelere de ulaşılabilir. Şifreleme yapmak için
npm i bcryptjs
ile kurulumu yapacağız. bcryptjs npm
Session : Server-side , Cookie : Client-side
Session için
npm i express-session
paketini kuracağız. Store içeriğini yönetmek içinnpm i connect-mongodb-session
kullanacağız. mongodb session connect.
Daha adetaylı cookie için cookie parser kullanabiliriz.
npm i cookie-parser
cookie parser
Admin özelliği vermek için
db.users.updateOne({_id: ObjectId("....")}, {$set: {isAdmin: true}})
gibi veritabanında elle yazıyoruz . Bu sadece o id tanımlıda çıkacaktır.
CSRF SALDIRI MODELİ Arka uca gönderilen istek ile başlar. Başka kötü niyetli birinin özellikle email ile kişiye istek atıp sahte vebsitesinde verilerin çalınması işlemi aslında.
projedeki bağımlılıkları yükledikten sonra 8000 de çalışan port da var.
Buna karşı çıkmak için
npm i csurf
paketini indiriyoruz.
express csruf ile googleda arama yapıyoruz
XSS SALDIRI MODELİ JS kodunun enjekte edilmesi ile oluşuyor.
Kullanıcı girişi olan her yere <% = > dememiz gerekiyor ya da xss paketini kullanacağız.
googleda express sanitize user input ile arama yapıyoruz
npm i xss
kuracağız. xss npm
MySql injection kaçmak için her zaman ? kullanacağız.
NoSql korumalı zaten bir şey yapmamıza gerek yok
inputları mutlaka strelize edeceğeğiz ya da temizlik yapacağız.
Refactoring yapacağız örneğin kullanıcı doğrulama olanı ayrı yerde post'ları ayrı yerde depolayacağız.
Googla da static hosting provider ya da node.js hosting provider gibi yazıp statik veya dinamik olarak hosting bakabiliriz.
nosql için mongodb atlası kullanacağız gerçek sitede.
Resim gibi dosyalar varsa bunu cloudinary ile yapabiliriz.
css destekleri için can i use sitesini kullanabiliriz
seo için description eklesek yeterli aynı zamanda title da.
netlify static web siteleri için netlify kullanacağız.
dynamic web site için heroku kullanacağız. heroku 64bit down .
heroku login
ile dosya yolundayken giriş yapacağız.