Cari artikel lain

WHATSAPP API PART III

 

Sebelum lanjut ke pembuatan view, kita akan menginstall nodemon agar kita lebih mudah dalam coding. Tanpa nodemon sebenarnya juga bisa, tp kita harus sering mematikan merestart applikasi kita setiap kita melakukan perubahan pada sisi backend.

Matikan dulu applikasi kita dengan menekan ctrl + c dua kali. Untuk menginstall nodemon dapat kita jalankan perintah pada terminal.

npm i -D nodemon

Lalu buka file package.json. Dan update “test” ganti dengan “script ”: “nodemon index” seperti dibawah ini.

UPDATE file package.json

untuk menjalankannya sudah berbeda dengan awal tadi, jika pertama kita menggunakan node index  sekarang kita menggunakan npm run test. 

Maka setiap kali kita melakukan save pada file yang ada applikasi maka nodemon secara otomatis akan merestart applikasi kita.

Ok. lanjut ke Part III - VIEW

  1. Kita akan menggunakan EJS untuk merender file kita, jadi kita buka terminal lalu ketik perintah npm i --save ejs
  2. Untuk setiap installasi baru kita bisa check pada file package.json
  3. Jika kita sudah menginstall maka kita akan fokus ke view untuk artikel ini, jadi buat folder pada folder utama kita dengan nama views
  4. DIdalam folder views kita buat 5 file yaitu header.ejs, footer.ejs, login.ejs, profile.ejs dan device.ejs, header.ejs dan footer.ejs akan kita load di semua halaman yang akan kita tampilkan sesuai dengan router yang sudah kita buat. Misalnya serperti ini :
    1. Router login akan meload 3 file, yaitu :
      1. header.ejs
      2. login.ejs
      3. footer.ejs
    2. Router profile akan meload 3 file, yaitu :
      1. header.ejs
      2. profile.ejs
      3. footer.ejs
    3. Router device akan meliad 3 file, yatu :
      1. header.ejs
      2. device.ejs
      3. footer.ejs
    4. Router logout tidak merender tampilan, karena hanya kita gunakan untuk destroy session saat kita keluar dari applikasi
  5. Membuat Template dengan EJS

Saya akan menggunakan bootstrap agar lebih mudah, maka silahkan copas template dari bootstrap dan paste ke header.ejs dan footer.ejs.

HEADER

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

FOOTER

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Untuk file content (login, profile, dan device) cukup ketikkan Halaman + nama file saja sebagai penanda kalau sudah terload. Misalnya untuk halaman login kita buat seperti ini :

<%- include("header") %>
<div class="container">
    Halaman LOGIN
</div>
<%- include("footer") %>

script <%- include("header") %> dan <%- include("footer") %> adalah script untuk meload file header saat halaman login dipanggil.

Untuk menggunakan EJS maka kita harus melakukan perubahan pada file index.ejs, tambahkan script berikut

ndal.id whatsapp api
update file index.js

lalu pada router kita update jadi seperti ini

ndal.id whatsapp api
update file router.js

Kita save dan lihat pada browser

ndal.id whatsapp api

Sekian artikel kali ini. Selanjutnya bisa di baca di link berikut ini


Kategori POST
I build this blog using BootstrapMade Template