Tag Archives: handlebars

Membuat Aplikasi Web Dengan Node js, Express dan Handlebars

Node js series kali ini tentang membuat aplikasi web dengan bantuan template engine yaitu handlebars.

Dengan sebuah template engine, aplikasi kita akan menjadi lebih jelas perbedaan controller model dan view nya serta lebih konsisten pembagiannya.

Dalam contoh project kali ini kita akan pakai windows sebagai operating systemnya.

Yang dibutuhkan adalah:

  • Komputer yang sudah terinstal node dan npm. Cara cek nya, buka command prompt dan ketik node -v dan npm -v. jika keduanya menampilkan versi yang sudah terinstall, maka berarti di komputer tersebut sudah terinstall node dan npm. Selanjutnya kita siap untuk membuat projectnya. udah, ini aja intinya

Package yang dipakai

  • express
  • express-handlebars

Coding part:

  1. Buat directory projectnya.
  2. Masuk ke directory project.
  3. Buka command prompt dan masuk ke directory project.
  4. tulis npm init, untuk menginisiasi project dan membuat file package.json, file yang berisi preperties dari project termasuk catatan dependencies.
  5. Install express dengan menulis pada command promp
  6. Install express-handlebars dengan menulis pada command prompt
  7. Buat file server.js. File ini sebagai file utama untuk menjalankan aplikasi webnya. Kalau di html atau php ini seperti index.html atau index.php nya. Tapi nama untuk node js ini bebas, cuma biasanya server.js atau app.js.
  8. Buat directory routes
  9. Masuk ke directory routes dan buat file routes.js. File routes.js ini untuk menyimpan settingan routing. Routing ini untuk mengarahkan ketika pengunjung website mengetikkan nama alamat, maka sistemnya harus ngapain, dan memberikan responĀ  apa yang harus ditampilkan ke pengunjung.

    Pada baris nomer satu diatas, itu memanggil file yang ada di directory models. File ini adalah file json sebagai penggambaran data dari database, atau dalam contoh project ini sebagai pengganti database.
  10. Buat directory views untuk menampung file template handlebars.
  11. Dalam directory views, buat file layout.hbs yang berisi:
  12. Dalam directory views, buat file index.hbs yang berisi:
  13. Jalankan applikasi dengan mengetik perintah di command prompt
  14. Buka browser dan ketik pada address bar http://localhost:2000/hbs
    disini kita akan melihat hasil dari applikasi node js kita menggunakan template engine handlebars.

Source code project ini bisa dibuka di account github saya:

https://github.com/alfannas/node-handlebars