Node.js Üzerine – 5. Bölüm (Express.js ve EJS)

Merhaba dostlar, bugün express.js hakkında konuşacağız. Express.js, node.js’nin biraz daha az low level olmasını sağlayan bir frameworktür. Zaten temelde de kütüphane ve framework’lerin oluşma sebebi; işleri hızlandırmak ve kolaylaştırmaktır.

Express.js de node.js uygulamalarımızı daha basit şekilde yazabilmemize imkan sağlıyor. Peki bunu nasıl yapıyor?

Bu soruya örneklerle cevap verebilmek için önce yeni bir node.js uygulaması oluşturalım. Uygulamanın adı expressapp.js olsun. Cmd ekranını açalım, projemizin dizinine gelelim ve aşağıdaki kodu çalıştıralım:

1
npm install express

Diyerek express modülünü projemize ekliyoruz. Artık projemizde express modülünü kullanabilir hale geldik.

İlk bölümlerden hatırlarsınız, farklı linkleri açabilmek için if ve else bloklarını kullanmıştık. Ona da tekrar göz atmak isterseniz şu linki kullanabilirsiniz.

Url yollarını express.js ile handle etmek:

Express.js ile link yönlendirmelerini çok daha güzel ve sade şekilde yapabiliyoruz. İlk örneğimizi yazalım ve sonrasında kodumuzun ne yaptığını açıklayalım:

expressapp.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var express = require('express');

var app = express();

app.get('/', function(req, res) {
res.setHeader('Content-Type', 'text/plain');
res.write('Hoi, Şuan Anasayfadasınız.');
res.end();
});

app.get('/diziler', function(req, res) {
res.setHeader('Content-Type', 'text/plain');
res.write('Diziler Sayfasına Hoşgeldiniz!');
res.end();
});

app.get('/filmler', function(req, res) {
res.setHeader('Content-Type', 'text/plain');
res.write('Filmler Sayfasına Hoşgeldiniz!');
res.end();
});

app.use(function(req, res, next){
res.setHeader('Content-Type', 'text/plain');
res.send(404, 'Aradınız Sayfa Yok, Üzgünüm.');
});

app.listen(8080);

Gördüğünüz gibi if else bloklarından daha anlaşılır duruyor üstteki kodumuz. Şimdi içine girelim ve anlamaya çalışalım.

İlk olarak hep yaptığımız gibi modülümüzü ‘require‘ komutu ile uygulamamıza ekliyoruz. Sonrasında ise objemizi oluşturuyoruz ki modülün bize sağladığı fonksiyonları kullanabilelim.

1
2
3
var express = require('express'); //modülü ekledik

var app = express(); //bir express object'i oluşturduk.

Burada dikkatinizi çekmiş olabilir, http modülünü kullanmadan server oluşturduk. Bunun sebebi express framework‘ünün o özellikleri içinde barındırıyor olması. Yani o fonksiyonlar bu framework’ün içinde de bulunmakta.

Devam edersek, get() fonksiyonunu üst üste çağırdığımızı göreceksiniz. request ve respond değerlerini alarak, http modülünün bize sağladığı gibi server oluşturmamızı ve url yollarını tayin etmemizi bize sağlıyor get() fonksiyonu.

Eğer bir sayfa bulunamadığında 404 hata kodunu yollamak istiyorsak da use() fonksiyonunu, listen() fonksiyonundan önce çağırarak kontrolümüzü sağlamış oluyoruz.

Sayfa şablonları oluşturmak:

Express.js‘nin en güzel yönlerinden biri node.js‘de eskiden res.write() içine yazmak zorunda kaldığımız uzun html bloklarından bizi kurtarması. Örneğin eskiden olsa nasıl bir kod yazmamız gerekirdi bir bakalım:

1
2
3
4
5
6
7
8
9
10
res.write('<!DOCTYPE html>'+
'<html>'+
'    <head>'+
'        <meta charset="utf-8" />'+
'        <title>Anasayfaya Hoşgeldiniz!</title>'+
'    </head>'+
'    <body>'+
'       <p>bir <strong>HTML</strong> paragrafı!</p>'+
'    </body>'+
'</html>');

Yukarıda gördüğünüz gibi sayfamızda html göstermek için gerçekten uğraşmamız gerekiyordu, yani Javascript içinde html yazmamız gerekiyordu. Neyse ki express.js bizi bu karmaşıklıktan kurtarıyor ve şablon dillerini kullanmamıza müsaade ediyor. Şablon dillerine örnek vermek gerekirse; JSP, Jade ve EJS bunlardan sadece bir kaçı.

Basit olarak yapacağımız şey ise; javascript dosyamızdan gerekli değişkenleri çağırmak istediğimiz şablona yollamak (Eğer bir değişken yollamak istiyorsak serverdan) ve o şablonu çağırmak.

Üstte söylediğim şablon sistemlerinden EJS‘yi kullanacağız bu bölümde. EJS’nin açılımı Embedded JavaScript. Şimdi projemize EJS modülünü ekleyerek başlayalım:

1
npm install ejs

Şimdi ise bir EJS dosyası oluşturalım ve içine html kodlarımızı yazalım, .ejs dosyamızın adını anasayfa.ejs koyalım.

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<style>
.hop{
text-align: center;
color: rgb(204, 0, 0);
}
</style>
</head>
<body>
<h1 class="hop">Anasayfaya Hoşgeldiniz!</h1>
<body>
</html>

Kısa bir html kodu ile bir anasayfa oluşturmuş olduk, siz tabiki daha komplike dizaynlar yapabilirsiniz HTML ve CSS ile.

Şimdi bu şablonu projemize nasıl ekleyeceğimize bakalım, öncelikle projemizin içine views adında bir alt klasör açmamız gerekiyor, şablonları orada arayacak kodumuz. anasayfa.ejs şablonumuzu views klasörüne koyalım ve express.js ana dosyamızın içinden nasıl çağıracağımıza bakalım:

1
2
3
4
5
6
7
8
9
10
11
var express = require('express');

var app = express();

app.set('view engine', 'ejs');

app.get('/', function(req, res) {
res.render('anasayfa');
});

app.listen(8080);

Yukarıda yaptığımız şey, express objesi (app) ile “set” fonksiyonunu çağırmak ve “view engine” olarak “ejs” seçmek. Üstte de dediğim gibi bir çok şablon dili bulunmakta ama biz EJS kullanmayı seçtiğimiz için “view engine”mızı ejs olarak ayarladık.

Sonrasında ise express’in url yönlendirmesinde anasayfaya yönlendirdiğimiz request‘e, respond olarak anasayfa.ejs dosyasını renderlamak. bkz: “res.render(‘anasayfa’);”. Dosya uzantısını neden koymadığımızı merak edenler olduysa eğer; express’e view engine’ın hangisi olduğunu söyledikten sonra ne aradığını biliyor olması.

Evet dostlar bugün yeni modüller ve daha sade kodlarla node.js konuşmaya devam ettik. Umarım faydalı olmuştur veya olacaktır. Kendinize dikkat edin.

ahmet

Ahmet Kılınç - Software Developer

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.