//////Tutorial ExpressJS : Membuat Templating ejs

Tutorial ExpressJS : Membuat Templating ejs

Tuesday, April 14, 2020

Pada tutorial kali ini kita akan membahas templating di ExpressJS. sebelumnya kita sudah mengenal NodeJS dan sudah menginstallnya, yang belum silahkan lihat dulu tutorialnya. Di tutorial ini mimin memakai OS windows 10 dan text editor VIM jadi cukup membuka CMD saja, buat kalian silahkan sesuaikan saja.

Baca Juga : Tutorial Install NodeJS di Windows
Baca Juga : Tutorial CRUD Dengan ExpressJS & Mongoose
Baca Juga : Perintah-Perintah Dasar Yang Ada Di VIM

Pertama kita harus install ExpressJS, silahkan buat direktori dimana saja dan lihat perintah di bawah untuk menginstallnya

C:\Users\RSAM>cd Documents/nodejs_tutorial/express/

C:\Users\RSAM\Documents\nodejs_tutorial\express>npm install express-generator -g

C:\Users\RSAM\Documents\nodejs_tutorial\express>express --view=ejs templating

C:\Users\RSAM\Documents\nodejs_tutorial\express>cd templating

C:\Users\RSAM\Documents\nodejs_tutorial\express\templating>npm install

Masuk ke folder templating dan buka app.js

C:\Users\RSAM\Documents\nodejs_tutorial\express\templating>vim app.js

Setelah itu tambahkan"ejs-locals" di app.js seperti dibawah.

app.engine('ejs', require('ejs-locals'));

Lihat script lengkapnya

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// view engine setup
app.engine('ejs', require('ejs-locals'));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

Selanjutnya kita install modulnya dengan perintah dibawah

C:\Users\RSAM\Documents\nodejs_tutorial\express\templating>npm i ejs-locals

Setelah menginstall kita lanjut dengan download bootstrap pada https://getbootstrap.com/

File yang telah kita download tersebut kita extract. Setelah itu rename folder hasil extract tadi jadi 'bootstrap' saja, Kemudian copykan pada folder public.



Langkah selanjutnya membuat folder layout dan partials di dalam folder views

C:\Users\RSAM\Documents\nodejs_tutorial\express\templating\views>mkdir layout

C:\Users\RSAM\Documents\nodejs_tutorial\express\templating\views>mkdir partials

Buat file page.ejs di dalam folder layout dan masukan perintah dibawah.

<html>
<head>
    <title><%=blocks.title%></title>

    <link href="/stylesheets/style.css" rel="stylesheet"></link>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"></link>

    <script src="/bootstrap.min.js"></script>
    
</head>
<body>
<header>
    <%-blocks.header%>
</header>
<section class="container">

    <%-partial('../partials/navigasi')%>;

    <h1>
<%=blocks.title%></h1>
<%-body -%>
</section>
<footer>
    <%-blocks.footer%>
</footer>
</body>
</html>

Buat file navigasi.ejs di dalam folder partials dan masukan perintah dibawah.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Dan yang terakhir kita akan mengubah file index.ejs di dalam folder views, lihat script dibawah

<% layout('layout/page') -%>
<% block('title', 'Hello World'); -%>
<a href="https://www.media-info.id/">media-info.id</a>

Setelah itu coba jalankan dengan mengetik "npm start" di terminal dan buka browser kalian terus ketikan url http://localhost:3000

Tuesday, April 14, 2020 Tags: express, nodejs, pemrograman, templating, tutorial

LihatTutupKomentar