-- Node.js

Node.js ile Web Server Oluşturma

Node.js ile Web Server Oluşturma

Son yılların web-sunucu tabanlı programlama trendlerinden ikisi olan Node.js ve Go üzerine birer antrenman çalışması olarak ele aldığım makale serisinde sıra “Node.js ile Web Server Oluşturma” başlığına geldi. Daha önce şuradan da ulaşabileceğiniz gibi Go programlama dilinin net/http paketi ile web server oluşturma teknik ve antrenmanlarını işlemiştik. Bu makalemde de Node.js platformunun http paketiyle benzer işler yapmaya çalışacağız.

Öncelikle bilgisayarınızda Node.js’in kurulu olduğunu varsayıyorum. Eğer kurulu değilse aşağıdaki bağlantıdan kurabilirsiniz.

– https://nodejs.org/en/

Node.js geliştirme ortamı olarak da Atom kullanıyorum. Ona da şuradan ulaşabilirsiniz.

# Örnek 1:

Go üzerine yazdığım makalede olduğu gibi öncelikle en basit haliyle bir server oluşturup ekrana bir şeyler yazalım.

var http = require('http');

var myServer = http.createServer(function(request, response){
    response.writeHead(200, {"Content-Type" : "text/plain"});
    // response.writeHead(200, {"Content-Type" : "text/html"});
    response.write("<b>Hello</b> World");   // bold text/html ile çalışır!
    response.end();
});

myServer.listen(3000);

console.log("Yayın Adresi : http://localhost:3000");

Node.js’in http paketini proje dosyasına(app.js) dahil ettikten sonra bu paket üzerinden bir sunucu oluşturuyoruz ve 3000 portu ile de bu sunucuyu yayına açıyoruz. İşlem gayet basit. http üzerindeki ‘response’ nesnesi sayesinde istemciye dönecek Http Status Code’u 200 olarak belirliyoruz. Bunu da response nesnesinin başlık(Head) bilgisine yazarak gerçekleştiriyoruz. Aynı zamanda Content-Type olarak da text/plain ve text/html değerlerini örneklerle açıkladım.

Bu örnek uygulamayı çalıştırdığınızda 3000 portu üzerinden elde edilecek sayfa görüntüsü şu şekildedir;

<b>Hello</b> World

Burada bold işleminin gerçekleşmemesinin nedeni sunucudan döndürdüğümüz Content-Type bilgisinin text/plain olmasıdır. Bu değeri text/html yaparak denediğinizde Hello metninin bold olduğunu görebilirsiniz.

# Örnek 2:

Bu ikinci örnekte Node.js ile Express.js’nin birlikte kullanımını inceleyeceğiz. Express.js, Node.js için geliştirilmiş bir web framework’dür.

Express.js web sitesi; https://expressjs.com/

Express.js’i kurmak ve kullanmak oldukça kolaydır. Bunun için aşağıdaki kurulum adımlarını takip edebilirsiniz.

Express.js’yi kurun;

npm install express --save

package.json dosyasını oluşturun;

npm init

Örnek package.json dosya içeriği;

{
  "name": "denemeapp",
  "version": "0.0.0",
  "description": "Açıkladık",
  "main": "app.js",
  "dependencies": {
    "express": "^4.14.1",
    "gulp": "^3.9.1"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Cihan Özhan"
}

Küçük bir Express.js uygulaması;

var express = require('express')
var app = express()

app.get('/', function(req, res){
    res.send('<h1>Hello</h1> Express');
});

var server = app.listen(3000, function() {
    console.log('Yayın Adresi : http://localhost:3000');
});

Çıktı;

Hello

Express

# Örnek 3:

Bu örneğimizde bir kaç URL routing işlemi yaparak bir Node.js web uygulamasının Querystring’i nasıl kullandığını ve ilgili parametrelerin verisini elde etmeyi inceleyeceğiz.

Express.js’yi kurun;

npm install express --save

package.json dosyasını oluşturun;

npm init

Uygulama kodları;

var express = require('express')
var app = express()

// .../    ilk açılışta index olarak ana sayfa yerine gösterilecek.
app.get('/', function(req, res){
    res.send('<h1>Merhabe</h1> Express');
});

// .../myPage
app.get('/myPage', function(req, res){
    res.send('@cihanozhan');
});

// .../user/cihan
app.get('/user/:name?', function(req, res){
    var name = req.params.name;
    res.send('Merhaba ' + name);
});

// .../user/cihan/başlıkDemo
app.get('/user/:name?/:title?', function(req, res){
    var name = req.params.name;
    var title = req.params.title;
    res.send('<p>ad: ' + name + '<br>başlık: ' + title + '</p>');
});

// yukarıda tanımlanan routing'ler haricindeki herhangi bir çağrı bu metod tarafından yakalanacaktır.
app.get('*', function(req, res){  
    res.send('Geçersiz İstek');
});

var server = app.listen(3000, function() {
    console.log('Yayın portu : 3000');
});

# Örnek 4:

Bu örneğimizde Örnek 3’e ek olarak bir express.js entegrasyonu ile ana sayfa şablon dosyası oluşturup uygulama içerisinde kullanacağız. Bu işlem için projemize ek olarak bir views klasörü ekleyeceğiz.

Projenin klasör ve dosya yapısı şu şekildedir;

nodejs-express-embeddedjs-1

Express.js’yi kurun;

npm install express --save

Embedded.js’yi kurun

npm install ejs

package.json dosyasını oluşturun;

npm init

app.js uygulama kodları;

var express = require('express')
var app = express()

app.set('view engine', 'ejs')       // uygulamanın görüntüleme motoru ejs olarak tanımlanır
app.set('views', __dirname + '/views')  // views klasörünü uygulamaya tanımlar

// .../    ilk açılışta index olarak ana sayfa yerine gösterilecek.
app.get('/', function(req, res){
    res.render('default');
});

// .../myPage
app.get('/myPage', function(req, res){
    res.send('@cihanozhan');
});

// .../user/cihan
app.get('/user/:name?', function(req, res){
    var name = req.params.name;
    res.send('Merhaba ' + name);
});

// .../user/cihan/başlıkDemo
app.get('/user/:name?/:title?', function(req, res){
    var name = req.params.name;
    var title = req.params.title;
    res.send('<p>ad: ' + name + '<br>başlık: ' + title + '</p>');
});

// yukarıda tanımlanan routing'ler haricindeki herhangi bir çağrı bu metod tarafından yakalanacaktır.
app.get('*', function(req, res){  
    res.send('Geçersiz İstek');
});

var server = app.listen(3000, function() {
    console.log('Yayın portu : 3000');
});

views klasörü içerisindeki default.ejs kaynak kodları;

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>My App</title>
</head>
<body>
 <h1>Welcome</h1>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat dui libero, non interdum turpis tempus nec. 
Aenean velit dui, laoreet nec augue viverra, condimentum posuere dui. Aliquam feugiat interdum nunc eleifend elementum. 
Sed bibendum semper vehicula. Sed porttitor tellus eros, nec imperdiet enim posuere a. Duis vel lorem sed urna accumsan pulvinar. 
Proin at arcu lacinia magna sollicitudin condimentum. Donec laoreet ipsum eu velit ullamcorper pretium. 
Vestibulum tempus tempus purus vitae elementum. Fusce mi turpis, rutrum ornare risus nec, lobortis cursus massa. 
Sed tempor luctus arcu, quis ultrices felis consectetur eu. Fusce sit amet faucibus ligula, sed vehicula enim. 
Aliquam convallis odio nisi, et malesuada sem porta ac.
 </p>
</body>
</html>

# Örnek 5:

Bu örneğimizde Örnek 4 örneği üzerine küçük bir ekleme yaparak default.ejs dosyasında programatik bir işlem gerçekleştireceğiz. Bu işlemi gerçekleştirebilmek için projemize üstteki örnekte olduğu gibi embedded.js’i ekliyoruz. Öncelikle app.js içerisinde bir isim listesi oluşturacağız. Sonra bu listeyi default.ejs üzerinden render işlemi sırasında for döngüsü kullanarak ekranda göstereceğiz.

Not : Bu projenin klasör yapısı da Örnek 4’de ki gibidir.

Express.js’yi kurun;

npm install express --save

Embedded.js’yi kurun

npm install ejs

package.json dosyasını oluşturun;

npm init

app.js uygulama kodları;

var express = require('express')
var app = express()

app.set('view engine', 'ejs')       // uygulamanın görüntüleme motoru ejs olarak tanımlanır
app.set('views', __dirname + '/views')  // views klasörünü uygulamaya tanımlar

// .../    ilk açılışta index olarak ana sayfa yerine gösterilecek.
app.get('/', function(req, res){
    res.render('default', {
        title: 'Home',
        users: ['Ali', 'Veli', 'Hakkı']
    });
});

// .../myPage
app.get('/myPage', function(req, res){
    res.send('@cihanozhan');
});

// .../user/cihan
app.get('/user/:name?', function(req, res){
    var name = req.params.name;
    res.send('Merhaba ' + name);
});

// .../user/cihan/başlıkDemo
app.get('/user/:name?/:title?', function(req, res){
    var name = req.params.name;
    var title = req.params.title;
    res.send('<p>ad: ' + name + '<br>başlık: ' + title + '</p>');
});

// yukarıda tanımlanan routing'ler haricindeki herhangi bir çağrı bu metod tarafından yakalanacaktır.
app.get('*', function(req, res){  
    res.send('Geçersiz İstek');
});

var server = app.listen(3000, function() {
    console.log('Yayın portu : 3000');
});

# Örnek 6:

Her örneğimiz bir öncekinden daha gelişmiş bazı yetenekler içermektedir. Bu örneğimizde Örnek 5 üzerine parçalı tasarım konseptini uygulamak üzerine olacak. Uygulamaya About adında bir hakkımızda sayfası ekleyeceğiz. Ve bu sayfanın tasarımı header, footer ve head ile JS dosyalarını içeren jsdefaults.ejs isimli dört farklı .ejs dosyasından oluşacaktır. Uygulama çalışırken render işlemi sırasında bu parçaları birleştirerek ana sayfadaki ana temayı üretecektir.

Projenin klasör ve dosya yapısı şu şekildedir;

nodejs-express-embeddedjs-2

Express.js’yi kurun;

npm install express --save

Embedded.js’yi kurun

npm install ejs

package.json dosyasını oluşturun;

npm init

app.js uygulama kodları;

var express = require('express')
var app = express()

app.set('view engine', 'ejs')           // uygulamanın görüntüleme motoru ejs olarak tanımlanır
app.set('views', __dirname + '/views')  // views klasörünü uygulamaya tanımlar

app.locals.pagetitle = "Website";

app.get('/', function(req, res){
    res.render('default', {
        title: 'Home',
        classname: 'home',
        users: ['Ali', 'Veli', 'Hakkı']
    });
});

app.get('/about', function(req, res){
    res.render('default', {
        title: 'About Us',
        classname: 'about'
    });
});

app.get('*', function(req, res){  
    res.send('Geçersiz İstek');
});

var server = app.listen(3000, function() {
    console.log('Yayın Portu : 3000');
});

views -> partials -> page -> footer.ejs

<footer>

</footer>

views -> partials -> page -> head.ejs

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><%= title %></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

views -> partials -> page -> header.ejs

<header>

</header>

views -> partials -> page -> jsdefaults.ejs

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

views -> partials -> default.ejs

<!DOCTYPE html>
<html lang="en">
 <head>
 <% include partials/page/head.ejs %>
 </head>
 <body class="<%= classname %>">

 <% include partials/page/header.ejs %>

 <div class="container">
    <h1><%= pagetitle %> : <%= title %></h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat dui libero, non interdum turpis tempus nec. 
      Aenean velit dui, laoreet nec augue viverra, condimentum posuere dui. 
      Aliquam feugiat interdum nunc eleifend elementum. Sed bibendum semper vehicula. 
      Sed porttitor tellus eros, nec imperdiet enim posuere a. Duis vel lorem sed urna accumsan pulvinar. 
      Proin at arcu lacinia magna sollicitudin condimentum. Donec laoreet ipsum eu velit ullamcorper pretium. 
      Vestibulum tempus tempus purus vitae elementum. Fusce mi turpis, rutrum ornare risus nec, lobortis cursus massa. 
      Sed tempor luctus arcu, quis ultrices felis consectetur eu. Fusce sit amet faucibus ligula, sed vehicula enim. 
      Aliquam convallis odio nisi, et malesuada sem porta ac.
     </p>

     <% if(typeof(users) !== 'undefined') { %>
       <ul>
         <% for(var i=0; i<users.length; i++) { %>
           <li><%= users[i] %></li>
         <% } %>
       </ul>
     <% } %>
 </div>

 <% include partials/page/footer.ejs %>
 <% include partials/page/jsdefaults.ejs %>

 </body>
</html>

Uygulamayı çalıştırdıktan sonra tarayıcının URI kısmından /about bağlantısını çağırın. Oluşturduğumuz sayfa tasarımını burada görebileceksiniz.

# Örnek 7:

Bu son örneğimizi Örnek 6 projesi üzerine küçük bir ekleme yaparak gerçekleştireceğiz. Bu küçük ekleme ise app.js içerisinde yaptığımız routing/linkleme işlemi olacak. Bu işlemi routes/index.js adında yeni bir klasör/dosya ile gerçekleştireceğiz.

Projenin klasör ve dosya yapısı şu şekildedir;

nodejs-express-embeddedjs-3

Express.js’yi kurun;

npm install express --save

Embedded.js’yi kurun

npm install ejs

package.json dosyasını oluşturun;

npm init

app.js uygulama kodları;

var express = require('express')
var app = express();
var routes = require('./routes');

app.set('view engine', 'ejs')           // uygulamanın görüntüleme motoru ejs olarak tanımlanır
app.set('views', __dirname + '/views')  // views klasörünü uygulamaya tanımlar

app.locals.pagetitle = "Website";

app.get("/", routes.index);
app.get("/about", routes.about);

app.get('*', function(req, res){  
    res.send('Geçersiz İstek');
});

var server = app.listen(3000, function() {
    console.log('Yayın Portu : 3000');
});

views -> partials -> page -> footer.ejs

<footer>

</footer>

views -> partials -> page -> head.ejs

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><%= title %></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

views -> partials -> page -> header.ejs

<header>

</header>

views -> partials -> page -> jsdefaults.ejs

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

views -> partials -> default.ejs

<!DOCTYPE html>
<html lang="en">
 <head>
 <% include partials/page/head.ejs %>
 </head>
 <body class="<%= classname %>">

 <% include partials/page/header.ejs %>

 <div class="container">
    <h1><%= pagetitle %> : <%= title %></h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat dui libero, non interdum turpis tempus nec. 
      Aenean velit dui, laoreet nec augue viverra, condimentum posuere dui. 
      Aliquam feugiat interdum nunc eleifend elementum. Sed bibendum semper vehicula. 
      Sed porttitor tellus eros, nec imperdiet enim posuere a. Duis vel lorem sed urna accumsan pulvinar. 
      Proin at arcu lacinia magna sollicitudin condimentum. Donec laoreet ipsum eu velit ullamcorper pretium. 
      Vestibulum tempus tempus purus vitae elementum. Fusce mi turpis, rutrum ornare risus nec, lobortis cursus massa. 
      Sed tempor luctus arcu, quis ultrices felis consectetur eu. Fusce sit amet faucibus ligula, sed vehicula enim. 
      Aliquam convallis odio nisi, et malesuada sem porta ac.
     </p>

     <% if(typeof(users) !== 'undefined') { %>
       <ul>
         <% for(var i=0; i<users.length; i++) { %>
           <li><%= users[i] %></li>
         <% } %>
       </ul>
     <% } %>
 </div>

 <% include partials/page/footer.ejs %>
 <% include partials/page/jsdefaults.ejs %>

 </body>
</html>

routes -> index.js

exports.index = function(req, res){
    res.render('default', {
        title: 'Home',
        classname: 'home',
        users: ['Ali', 'Veli', 'Hakkı']
    });
}

exports.about = function(req, res){
    res.render('default', {
        title: 'About Us',
        classname: 'about'
    });
}

Uygulamayı çalıştırdıktan sonra tarayıcının URI kısmından /about bağlantısını çağırın. Oluşturduğumuz sayfa tasarımını burada görebileceksiniz.

Github; https://github.com/cihanozhan/nodejs-webapi-samples

İyi çalışmalar.
Cihan Özhan

Yorumla

Yorum

  • İçerik ile ilgili etiketler