December 6 2016
Ubuntu Server 16.10 üzerinde basit bir WEB uygulaması geliştirdim.
NodeJS ve MongoDB kullanırken bu uygulamayı geliştirdim.
Web uygulamayı geliştirmek için Ubuntu Server 16.10’u internetten indirip Virualbox’ta işletim sistemini kuruyoruz.
Ubuntu Server 16.10 üzerinde basit bir WEB uygulaması geliştirdim.
NodeJS ve MongoDB kullanırken bu uygulamayı geliştirdim.
Web uygulamayı geliştirmek için Ubuntu Server 16.10’u internetten indirip Virualbox’ta işletim sistemini kuruyoruz.
Bundan sonra VirtualBox’u indiriyoruz ve bilgisayarımıza yükleyip işletim sitemini kuruyoruz.
Sonra Başlata tıklayarak işletim Sistemi kurulmaya başlıyor.
İşletim Sistemi kurulduktan sonra servere bağlanmak için Ağ Ayarlarını açarak Noktaları Yönledirmek için Client ve Server iletişime geçiyor.
Bizim işimiz kolaylaştırmak için FileZilla’yı sistemde kuruyoruz.
FileZilla, özgür, açık kaynak ve çoklu platform destekli bir FTP istemcisidir. FileZilla’nın Client (istemci) ve FileZillaServer (sunucu) adını taşıyan iki farklı sürümü bulunur. Windows, Linux ve Mac OS X işletim sistemlerinde çalışabilir. FTP, FTPS ve SFTP desteği mevcuttur.
Ondan sonra Terminalde ihtiyacımız olan : NodeJs,Express,MongoDB kuruyoruz.
$ node –v
$ npm init
‘Node’ kurduktan sonra web uygulamamız için bir dosya oluşturmamız gerekiyor.
$ touch server.js
‘Express’i kurmak için yine terminalde komut yazmamız gerekiyor.
$ npm install express –save
Bundan sonra bir dosya otomatik olarak oluşturulmuş oluyor .package.json.
Bu dosyayı açtıktan sonra fotoğrafta göründüğü gibi aynı olması gerekiyor
Bundan sonra server.js açtığımmızda aşağıdaki komutu yazıyoruz.
const express = require('express'); const app = express();
Server’ı kurmak için şu kodu yazıyoruz :
app.listen(8080, function() { console.log('listening on 8080') })
Server’ın çalışıp çalışmadığını öğrenmek için terminalde node server.js yazıyoruz ve tarayıcı üzerinde localhost:8080 yazarak ekranda “cannot get”.Mesajını görmemiz gerekiyor.
Bu mesajı gördükten sonra anlıyoruz ki server ve tarayıcı iletişim halindedir.
Crud-Read
READ işlemi, bir web sayfasını her ziyaret ettiğinizde tarayıcılar tarafından gerçekleştirilir.
Express'te, GET isteğini get yöntemiyle ele alıyoruz:
app.get(path, callback)
İlk argüman olan yol, GET isteğinin yoludur. Alan adınızdan sonra gelen herhangi bir şeydir.
Localhost:8080'i ziyaret ettiğimizde, tarayıcılarımız aslında localhost:8080/ arıyor. Bu durumda yol argümanı / dir.
İkinci bağımsız değişken, sunucuya yol eşleştirildiğinde ne yapılacağını bildiren bir geri arama işlevidir. Bir istek nesnesi ve bir yanıt nesnesi olmak üzere iki bağımsız değişkeni alır:
app.get('/', function (request, response) { // do something here })
Şimdilik, tarayıcıya "Merhaba Dünyası" yazalım.
app.get('/', function(req, res) { res.send('Hello World') })
Şimdi, sunucumuzu yeniden başlatıyoruz:
CTRL + C tuşlarına basarak ve ondan sonra terminalde node server.js yazıyoruz.
Şimdi uygulamayı geliştirmeye başlıyoruz.
Yeni bir dosya oluşturuyoruz
touch index.html
index.html dosyanın içine kod yazalım:
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<title>MY APP</title>
</head>
<body> May Node and Express be with you.
</body>
</html>
Sunucumuzu yeniden başlatıyoruz ve tarayıcımızı yenileyoruz. Şimdi HTML dosyamıza sonuçları görebilmeliyiz.
Nodemon sunucuyu otomatik olarak yeniden başlatır o yüzden nodemon yüklememiz gerekiyor.
$ npm install nodemon --save-dev
$ ./node_modules/.bin/nodemon server.js
CRUD – CREATE
Sunucuya bir POST isteği gönderilirse, CREATE işlemi yalnızca tarayıcı tarafından gerçekleştirilir.
Önce bir <form> öğesi oluşturmalı ve onu index.html dosyasına eklemeliyiz.
<form action="/quotes" method="POST">
<input type="text" placeholder="name" name="name">
<input type="text" placeholder="quote" name="quote">
<button type="submit">Submit</button>
</form>
Açıkça görülüyor ki Express, <form> öğesinden kendi başına veriyi okuyamıyor. Bu işlevselliği elde etmek için body-parser adlı başka bir paket eklemeliyiz.
$ npm install body-parser –save
İlk önce MongoDB'yi veritabanımız olarak kullanmak istersek npm aracılığıyla kurmamız gerekir.
npm install mongodb –save
const MongoClient = require('mongodb').MongoClient
MongoClient.connect('link-to-mongodb', (err, database) => {
// ... start the server })
Şimdi database oluşturuyoruz.
EJS sistemde yüklememiz gerekiyor.
$ npm install ejs –save
app.set('view engine', 'ejs')
res.render(view, locals)
Önce, verileri doldurmaya başlayabilmemiz için, görünümler klasörü içinde bir index.ejs dosyası oluşturalım.
mkdir views touch views/index.ejs
Şimdi, aşağıdaki kodu index.ejs içine yerleştiriyoruz.
<ul class="quotes">
<% for(var i=0; i<quotes.length; i++) {%>
<li class="quote"> <span><%= quotes[i].name %>
</span> <span><%= quotes[i].quote %>
</span>
</li> <% } %>
</ul>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MY APP</title>
</head>
<body> May Node and Express be with you.
<ul class="quotes">
<% for(var i=0; i<quotes.length; i++) {%>
<li class="quote"> <span><%= quotes[i].name %>
</span> <span><%= quotes[i].quote %>
</span> </li> <% } %>
</ul> <form action="/quotes" method="POST">
<input type="text" placeholder="name" name="name">
<input type="text" placeholder="quote" name="quote"> <button type="submit">Submit</button>
</form>
</body>
</html>
Şimdi, tarayıcınızı yeniliyoruz ve Master Yoda'nın tekliflerini görebiliriz.