Tutorial Node.js Basic #1 - Hello World
|Shares :

Tutorial Node.js Basic #1 - Hello World

Series Node.js kali ini saya akan membahas tutorial Basic. Tutorial ini khusus bagi yang baru belajar Node.js. Jika belum menginstall, silahkan install dulu : Install Node.js,NPM,Express di Ubuntu  , di Windows .

Sebelum memulai, kita sepakat dulu bahwa kita akan menggunakan Express Framework. Express framework adalah satu dari beberapa framework yang ada untuk membantu membangun aplikasi berbasis Node.js. 

"Hello World"

Mari kita membuat folder projectnya, buka terminal/cmd ketikan perintah berikut 
npm install -g express
untuk mendapatkan express terbaru. lalu command ini

express hello_world
kita akan melihat output ini diterminal 
 create : hello_world
   create : hello_world/package.json
   create : hello_world/app.js
   create : hello_world/public
   create : hello_world/public/javascripts
   create : hello_world/routes
   create : hello_world/routes/index.js
   create : hello_world/routes/user.js
   create : hello_world/public/stylesheets
   create : hello_world/public/stylesheets/style.css
   create : hello_world/views
   create : hello_world/views/layout.jade
   create : hello_world/views/index.jade
   create : hello_world/public/images

   install dependencies:
     $ cd hello_world && npm install
Install dependncies nya seperti diatas
 $ cd hello_world && npm install
Secara default, express akan menginstall jade , default templating nya. namun bnyak newbie yg kurang suka jade , saya pun sama :D, maka kita akan menginstall ejs saja.

Penampakan jade seperti ini
doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content
kalo di EJS kita bisa bikin html biasa, lebih mudah dibaca bagi yg lebih suka html murni :D

Install EJS

npm install ejs

Struktur Folder Aplikasi kita




Sekarang kita update code nya. buka app.js perhatikan baris berikut
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

Kita ubah menjadi

// all environments
app.set('port', process.env.PORT || 4300); //port nya bebas
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs'); //ganti jdi ejs

Sekarang buka folder routes , ubah index.js menjadi berikut
exports.index = function(req, res){
  
  //title : akan dikirim ke views
  res.render('index', { title: 'Hello World' }); 
};


Jika sudah, pergi ke folder views , kita bisa hapus index.jade dan users.jade . Lalu buat index.ejs , ketikan kode berikut
<html>
    <head>
        <!--Menampilkan variable di view dgn ejs--->
        <title><%=(locals.title) ? title :''%></title>
    
    </head>
    <body>
    
        <h2>Hello world<h2>
    </body>

</html>

Jika sudah, jalankan aplikasi , ketik diterminal
node app.js
lalu buka browser : http://localhost:4300/ 



Cheeerrssss

Tags : #nodejs #series


SHARES :


Budy K's Avatar

Sains & Teknologi Enthusiast, Software Developer. Check my profile!
> 75% komen akan dibalas. Mohon sabar ya. Simpan halaman ini dan cek kembali lagi

Comments

* Email will not be published


    Privacy .ToS .Contact Us
    © 2017 Teknosains