Membuat Web Halaman Web Dinamis Dengan Express dan EJS
Topik.MY.ID – Satu cara untuk membuat bentuk dari suatu halaman web, untuk halaman berita seperti apa, detail hostnya yang mana halaman tidak berubah namun yang berubah kontennya. yang mana kontennya bisa ber4ubah secara dinamis. Untuk template yang dapat digunakan untuk javascript ini adalah EJS atau Embedde Javascript Templating yang beralamat di https://ejs.co/
Ada beberapa template lain yang ada yaitu di https://mozilla.github.io/nunjucks/ anda bisa pelajari sendiri dengan membuka syntaxnya di portal berikut dan kita akan membuat templatenya dengan menggunakan EJs itu sendiri dengan menggunakan EJS
Daftar Isi Konten
Mengkonfigurasikan Template Engine EJS dengan Express JS
Untuk melakukan konfigurasi diharapkan kita membuat folder terlebih dahulu dengan perintah
mkdir exprerss-ejs
Kemudian silahkan anda masuk di folder exprees-ejs dengan perintah
cd exprees-ejs
karena tidak ingin merubah apapun pada folder silahkan anda ketikan perintah
npm init -y
Kemudian untuk instalali express js maka silahkan anda ketik perintah
npm i express
Kemudian di dalamnya perlu sebuah indeks file main dibuat dengan perintah
touch index.js
Nah, untuk setupnya di index.js bisa anda tuliskan deklrasi sourch code seperti dibawah ini
const express = require ('express');
const app = express();
app.listen(8080,() => {
console.log ('listenin on host http://localhost:8080');
});Untuk melakukan instalasi ejs, silahkan anda ketikan perintah di ejs di terminal sebagai berikut
npm i ejs
untuk mengetahui atau belajar dokumentasi silahkan anda ke portal dari express js bagian Api Documentation silahkan anda cari application dan lihat app.set nya dan kita akan menggunakan view engine
app.set ('view engine',ejs);kita akan mencoba melakukan implementasi ejs pada project express. Dalam Application ada views yang mana dalam views terdapat lokasi atau folder dimana kita akan meletakkan file template pada cureent directory yang bisa anda lihat dengan perintah dibawah ini
mkdir views
dan dalam folder views kita akan membuat file home dengan ekstensi ejs
touch /views/home.ejs
Dan kita bisa tambahkan didalamnya html sederhana dengan menggunakan
! klik Tab
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>home</title> </head> <body> <h1>Homepage</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae ipsam ab autem in optio culpa possimus similique quasi, tempora ullam nemo molestias repellendus, corrupti aliquam consequatur! Laudantium aliquid ab ad! </p> </body> </html>
kemudian untuk bisa diakses anda bisa lakukan route ke halaman ini dengan kembali ke index.js dengan membuat res.render bukan menggunakan res.send dan kita tidak perlu menggunakan path view karena secara default kita bisa masuk ke file home tanpa ada ekstensi.
app.get ('/', (req,res) => {
res.render('home');
})Dan kita bisa menggunakan nodemon index.js tanpa harus melakukan restart dan pemanggilan node
Mengatur Posisi Folder Views Agar Tidak Eror
Karena ketika kita memanggil nodemon ke express-ejs/index.js akan menampilan eror view makan yang harus dilakukan adalah dengan mengatur posisi viewnya di app.set dan menambahkan modul bawaaan dari node yaitu path untuk menentukan posisi folder dimana indek berada dengan digabungkan dengan folder views yang hasilnya bisa tidak eror lagi dengan mematenkan atau mengarahkan langsung ke folder viewsnya
app.set ('views', path.join(__dirname,'views'));Setelah berhasil menampilkan template engine, yang mana ada syntax bisa menampilkan html yang ada pada index atau yang menampilkan output yang diambil dari variabel dengan interpolation syntax Ejs dengan menambah salah satunya
<%= 'hello world' %>
Melakukan passing data ke template dengan menampilkan random data dengan menggunakan respon dan request dengan membuat app.get
app.get ('/rand'(req,res) => {
res.render ('random');
});Kemudian anda buat folder random di dalam view tersebut dengan nama random dengan kode html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random</title>
</head>
<body>
<h1> Random Number: <%= Math.Floor(Math.random()*10) +1 %> </h1>
</body>
</html>
kita harus kurangin bagian pemrosesnya logicnya dengan memindahkan ke fungsi rootnya dan berikan variabel ke numbernya dan berikan paramater kedua ditambahkan object degan key random dan nilainya num dengan memanggil di folder viewnya random
<h1> Random Number: <%= Random %> </h1>
dengan menambahkan key dan nilai seperti berikut
app.get ('/rand'(req,res) => {
const num = Math.Floor(Math.random()*10) +1;
res.render ('random', {random:num});
});yang mana random adalah paramater dan num adalah nilainya
atau hanya dibuat dengan menggunakan nilainya saja
<h1> Random Number: <%= num%> </h1>
dengan mengganti nilai di folder index.js seperti berikut
app.get ('/rand'(req,res) => {
const num = Math.Floor(Math.random()*10) +1;
res.render ('random', {num});
});Demo Passing Data Mirip Halaman Tag Dev.to
Di dalam portal dev.to ada bagian tertentu yang datanya sama atau valuenya sama berbeda data sesuai dengan paramater yang ditambahkan kita akan coba tambahkan format tag yang ada di dalam browsernya dengan menambah folder tag dalam views dan menambah app.get di index.jsnya
app.get ('/t/:tag',(req,res) => {
const {tag} = req.paramas;
res.render ('tag',{tag});
}):dan kita akan menampilkan di dalam template kita yang dibuat di halaman tag seperti berikut ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= tag %> -Dev Coms</title>
</head>
<body>
<h1><%= tag %></h1>
</body>
</html>
dan bisa diganti tagnya di url sesuai dengan slash /t/ dan inputan url paramsnya. Dan juga ditambah query yang dijadikan array
Menggunakan Kondisi dalam Template EJS dengan contoh sebagai berikut
Kita akan menggunakan random angka, jika dapatnya genap maka akan ada informasi genap kalau ganjil kita akan berikan informasi ganjil. Jika kita menggunakan pengkondisian seperti berikut maka tidak akan kebaca
if (num % 2 == 0) {
huruf genap
} else {
huruf ganjil
}
caranya adalah anda harus menggunakan interplation dibawah body dengan <% …. %> dan untuk penulisan javascrip tidak memerlukan penambahan sama dengan
<%if (num % 2 == 0) {%>
<h3>angka genap</h3>
<% } else { %>
<h3>angka ganjil </h3>
<% } %>bisa juga menggunakan singkatan atau tennary if sebagai berikut
<h3> that number is : <%= num%2 === 0 ? 'even' : 'odd' %></h3>
Cara Menggunakan perulangan pada EJS yang digunakan di dev.to yang banyak sekali post dengan element yang sama dan berbeda, nama yang buat, kapan dibuat dan lainnya dengan contoh random dengan nama-nama kuci dengan membuat tipe data array dengan nama cats di dalamnya.
app.get ('/cats'(req,res) =>{
const cats =[ 'embul', 'felix', 'ocan', 'miaw']
res.render ('cats', {cats})
});setelah kita membuat app.getnya kemudian kita membuat file cats.js di dalam folder view dengan code html dengan konten yang berubah
<h1>cats</h1>
<ul>
<% for (let cat of cats){ %>
<li><%= cat %> </li>
<%}%>
</ul>Menampilkan data dari query ke template ejs dengan menggunakan json, yang mana kita mau memiliki title, deskripsi, total host dan akan ditampilkan dengan data yang lebih komplek yah mungkin data yang mirip dengan data seadanya dengan semisal memiliki data yang lebih kompleks ke depannya.
Kita terlebih dahulu membuat path tag dengan memanggil data tag jika tidak yangkita panggil salah tidak ada pada data maka akan ada notfound yang kemudian kita harus membuat folder notfound
app.get ('/t/:tag',(req,res) => {
const {tag} = req.paramas;
if (data){
res.render ('tag',{data});
} else {
res.render ('notfound',{tag});
}
}):memanggil folder notfound dengan membuat indeks htmlnya seperti berikut
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Found: <%= tag %></title>
</head>
<body>
<h1><%= tag %> is not found</h1>
</body>
</html>
namun jika kita sudah benar memanggilnya namun masih eror harus diperbaiki di file tagnya dengan merubah di index file tag.ejs dengan memanggil dengan interpelation sesuai dengan data json yang ada yaitu dengan index sebagai berikut
<% if(data.img) {%>
<img src="<%= data.img %>" alt="" />
<% } %>
<h1><%= data.title %></h1>
<h3><%= data.description%></h3>
<p> Followers: <%= data.followers %></p>
Setelah kita tampilkan di json dengan menggunakan interplatation, selanjutnya bisa gunakan perkondisian untuk img, untuk data gambar, kemudian untuk kontennya karena datanya menggunakan array selanjutnya bisa menggunakan perulangan
<% for (let post of data.post) {%>
<article>
<p> <%= post.title %> - <%= post.author %></p>
</article>
<% } %>Unruk menyimpan Asset seperti CSS yang memuat gambar icon dan lainnya yang akan diambil dalam element atau dokument html yang nanti digunakan untuk user interface dan juga tidak dianggap sebagai routing ketika hendak menggunakan folder statistic untuk memanggil folder asset atau statis folder yang digunakan bisa melihat dibawah ini yang ditulis di file index.js
app.use (express.static ('public'))yang kemudian kita membuat folder public dengan file app.css yang mana isinya dengan contoh sebagai berikut
Dan kita perlu menaruh style di home, atau yang kita contohkan di tag
<link rel="stylesheet" href="/app.css">
namun yang terjadi adalah eror dan kita harus menerahkan path join ke dalam file indexnya karena jika kita panggil diluar akan bisa terpanggil
app.use (express.static (path.join(__dirname,'views')'public'))
Anda bisa taruh di dalam public tersebut file js, file image selain dari css dan file lain yang digunakan untuk user interface
Mengimplementasi CSS dengan Express JS
Kita akan memanfaatkan library CSS yang akan diletakkan dalam folder public sehingga tampilannya akan sempurna. Anda bisa unduh terlebih dahulu di compile css dan silahkan ekstrak ke direktori public yang telah disediakan
kemudian di file tagnya diganti di style nya dibagian tag sebelum </head>
<link rel="stylesheet" href="/css/bootstrap.min.css" />
Dan untuk script js dipanggil sebelum tag </body>
<script src="/js/bootstrap.min.js"></script>/pre>
jangan lupa ditambahkan navbar pada tag bodynya sebagaimana berikut
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Ejs</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="/">Home</a>
<a class="nav-link" href="/t/Javascript">Javascript</a>
<a class="nav-link" href="/rand">Random</a>
</div>
</div>
</div>
</nav>
Hal yang harus ada di dalam halaman tidak perlu dituliskan dua kali, untuk membuat layout yang dinamis sehingga kita hanya membuat kontainnya saja. DI dalam template kita bisa memecah file ejs menjadi bagian yang lebih kecil sehingga kita bisa memanggil template yang kita panggil dibagian halaman lainnya kita akan membuat folder partials dan kita akan membaginya ke dalam sebuah element terkecilnya untuk bagian heads, bagian konten yang dinamis, dan bagian footer dengan melakukan cut ke bagian partial dengan file nama header ketika sudah kita pindah maka file css dan javascriptnya akan hilang, nah bagaimana caranya agar file tersebut bisa akses dan memanfaatkan file partial dengan menggunakan methode include header dan include footer yang ditaruh diatas dan ada dibawah Dan bisa gunakan partial untuk bagian navbar yang bisa dilakukan include ke dalam file tag ejs Ketika file yang ada dalam folder view dan folder partials tersebut dibuat seperti ini
header.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= data.tittle %> -Dev Coms</title>
<link rel="stylesheet" href="/css/bootstrap.min.css" />
</head>
<body>
Didalam file tag ejs diubah menjadi
<%- include ('header.ejs') %>footer.ejs
<script src="/js/bootstrap.min.js"></script>
Didalam file tag ejs diubah menjadi
<%- include ('partials/footer.ejs') %>navbar.ejs
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Ejs</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="/">Home</a>
<a class="nav-link" href="/t/Javascript">Javascript</a>
<a class="nav-link" href="/rand">Random</a>
</div>
</div>
</div>
</nav>Didalam file tag ejs diubah menjadi
<%- include ('partials/navbar.ejs') %>Sekarang tinggal seperti berikut
<%- include ('header.ejs') %>
<%- include ('partials/navbar.ejs') %>
<% if(data.img) {%>
<img src="<%= data.img %>" alt="" />
<% } %>
<h1><%= data.title %></h1>
<h3><%= data.description%></h3>
<p> Followers: <%= data.followers %></p>
<hr>
<% for (let post of data.post) {%>
<article>
<p> <%= post.title %> - <%= post.author %></p>
</article>
<% } %>
<%- include ('partials/footer.ejs') %>Dan anda bisa mengganti halaman lain dengan menggunakan partial tersebut sehingga anda tidak perlu membuat hal lainnya
Tinggalkan Balasan