Overblog
Edit post Follow this blog Administration + Create my blog
gylxhansaiti.over-blog.com

Ubuntu Server 16.10 üzerinde WEB uygulaması

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.

Ubuntu Server 16.10 üzerinde WEB uygulaması

Bundan sonra VirtualBox’u indiriyoruz ve bilgisayarımıza yükleyip işletim sitemini kuruyoruz.

Ubuntu Server 16.10 üzerinde WEB uygulaması
Ubuntu Server 16.10 üzerinde WEB uygulaması
Ubuntu Server 16.10 üzerinde WEB uygulaması
Ubuntu Server 16.10 üzerinde WEB uygulaması
Ubuntu Server 16.10 üzerinde WEB uygulaması
Ubuntu Server 16.10 üzerinde WEB uygulaması
Ubuntu Server 16.10 üzerinde WEB uygulaması
Ubuntu Server 16.10 üzerinde WEB uygulaması
Ubuntu Server 16.10 üzerinde WEB uygulaması

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.

Ubuntu Server 16.10 üzerinde WEB uygulaması
Ubuntu Server 16.10 üzerinde WEB uygulaması

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.

Ubuntu Server 16.10 üzerinde WEB uygulaması

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

Ubuntu Server 16.10 üzerinde WEB uygulaması

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.

Ubuntu Server 16.10 üzerinde WEB uygulaması

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.
Ubuntu Server 16.10 üzerinde WEB uygulaması

Ş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.
Ubuntu Server 16.10 üzerinde WEB uygulaması
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.
 
Ubuntu Server 16.10 üzerinde WEB uygulaması
Ubuntu Server 16.10 üzerinde WEB uygulaması
Ubuntu Server 16.10 üzerinde WEB uygulaması
Ubuntu Server 16.10 üzerinde WEB uygulaması
Ubuntu Server 16.10 üzerinde WEB uygulaması
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.
Ubuntu Server 16.10 üzerinde WEB uygulaması
Web Uygulamasının Son Hali

Web Uygulamasının Son Hali

Share this post
Repost0
To be informed of the latest articles, subscribe:
Comment on this post