Creating views with EJS

Greetings!

This is the 4th part of Node EMS.

Express uses Jade/ Pug as default view template engine. But it is not pure html which is difficult for a non-ui guy.
We can change the view engine to EJS using --ejs option when creating the project.

Complete code for this tutorial,
$ git clone https://github.com/slmanju/node-ems.git
$ cd node-ems
$ git checkout create-views

EJS

EJS is a simple templating engine that generate HTML with plain JavaScript. There is no special thing about that since it uses plain HTML and uses JavaScript like syntax to generate dynamic contents.
Supports includes, filtters, etc

Tags

<% 'Scriptlet' tag, for control-flow, no output
<%= Outputs the value into the template (HTML escaped)
<%- Outputs the unescaped value into the template
<%# Comment tag, no execution, no output
<%% Outputs a literal '<%'
%> Plain ending tag
-%> Trim-mode ('newline slurp') tag, trims following newline

Create views

We are going to use a bootstrap starter template to quickly create our views.
Go to bootstrap site and get a starter template
(https://getbootstrap.com/docs/4.0/examples/narrow-jumbotron/)

$ mkdir server/views/employee
$ mkdir server/views/partials
$ touch server/views/partials/footer.ejs
$ touch server/views/partials/header.ejs
$ touch server/views/employee/index.ejs
$ touch server/views/employee/create.ejs
$ touch server/views/employee/edit.ejs
$ touch server/views/employee/view.ejs

<!-- views/partials/header.ejs -->

<!-- views/partials/footer.ejs -->

<!-- views/index.ejs -->

Now start the server and navigate to http://localhost:3000/ see the new styles in action.

Now we can fill our employee views.
*** Please check the git repo for those html codes. There are very little EJS codes.

With that we have completed basic CRUD in our system. We can further improve this by adding validation, security and of course more features.