kevinchisholm/_ejs-basics.md

## _ejs-basics.md

      
    Raw
  

              _ejs-basics.md
            
          
Code Examples for my Blog Post: Node.js Templating with EJS – Basics


## example-1-B.html


Monday, Tuesday, Wednesday, Thursday, Friday


## example-1.js
var ejs = require('ejs'),
    days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    html = ejs.render('<%= days.join(", "); %>', {days: days});

//set a reference to the http module
var http = require('http');

//call the http module&apos;s createServer method, to create a server instance
var server = http.createServer(function (req, res) {
    //access the response object, and create a Content-Type header
  res.writeHead(200, {'Content-Type': 'text/html'});

    //end the response, sending some text (the user will see this in their browser)
    res.end(html);
})

//tell the server to listen for requests
server.listen(3000);

//just lets us know that the server is running
console.log('In your browser, go to: http://localhost:3000');

## example-2-A.js
var express = require('express'),
  path = require('path'),
  app = express();

//set the port
app.set('port', 3000);

//set the view engine
app.set('view engine', 'ejs');

//handler for "/"
app.get('/', function(req, res){
  res.render('example-2', {
    welcomeMessage: "This message was rendered on the server",
    headerTitle:"EJS Demo Page"
  });
});

// Listen for requests
var server = app.listen(app.get('port'), function () {
  console.log('The server is running on http://localhost:' + app.get('port'));
});

## example-2-B.js
<html>
  <head>
    <title><%= headerTitle %></title>
  </head>
  <body>
     <%= welcomeMessage %>
  </body>
</html>

## example-2-C.html
<html>
  <head>
    <title>EJS Demo Page</title>
  </head>
  <body>
     This message was rendered on the server
  </body>
</html>

## example-3-A.js
var express = require('express'),
  path = require('path'),
  app = express();

//set the port
app.set('port', 3000);

//set the view engine
app.set('view engine', 'ejs');

//handler for "/"
app.get('/', function(req, res){
  res.render('example-3', {
    headerTitle:"EJS Demo Page - Example # 3",
    days: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
  });
});

// Listen for requests
var server = app.listen(app.get('port'), function () {
  console.log('The server is running on http://localhost:' + app.get('port'));
});

## example-3-B.js
<html>
  <head>
    <title><%= headerTitle %></title>
  </head>
  <body>
    <ul>
    <% days.forEach(function(day){ %>
      <li>
          <%= day %>
      </li>
    <% })%>
  </ul>
  </body>
</html>

## example-3-C.html
<html>
  <head>
    <title>EJS Demo Page - Example # 3</title>
  </head>
  <body>
    <ul>
      <li>Monday</li>
      <li>Tuesday</li>
      <li>Wednesday</li>
      <li>Thursday</li>
      <li>Friday</li>
    </ul>
  </body>
</html>

## example-4-A.js
var express = require('express'),
  path = require('path'),
  app = express();

//set the port
app.set('port', 3000);

//set the view engine
app.set('view engine', 'ejs');

//handler for "/"
app.get('/', function(req, res){
  res.render('example-4', {
    welcomeMessage: 'Using "if" logic in an EJS template',
    headerTitle:"EJS Demo Page - Example # 4",
    days: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
  });
});

// Listen for requests
var server = app.listen(app.get('port'), function () {
  console.log('The server is running on http://localhost:' + app.get('port'));
});

## example-4-B.js
<html>
  <head>
    <title><%= headerTitle %></title>
    <style>
      .selected{
        list-style-type: none;
        width: 20%;
        padding: 10px;
        margin: 10px 0;
        background-color: #fdfd96;
        color: #fc0000;
        font-weight: bold;
        font-family: Arial;
      }
    </style>
  </head>
  <body>
    <h1><%= welcomeMessage %></h1>
    <ul>
    <% days.forEach(function(day, index){ %>
      <li
      <% if (index === 3) { %>
        class="selected"
      <% } %> >

          <%= day %>
      </li>
    <% })%>
  </ul>
  </body>
</html>

## example-4-C.html
<html>
  <head>
    <title>EJS Demo Page - Example # 4</title>
    <style>
      .selected{
        list-style-type: none;
        width: 20%;
        padding: 10px;
        margin: 10px 0;
        background-color: #fdfd96;
        color: #fc0000;
        font-weight: bold;
        font-family: Arial;
      }
    </style>
  </head>
  <body>
    <h1>Using "if" logic in an EJS template</h1>
    <ul>
      <li>Monday</li>
      <li>Tuesday</li>
      <li>Wednesday</li>
      <li class="selected">Thursday</li>
      <li>Friday</li>
    </ul>
  </body>
</html>
	var ejs = require('ejs'),
	days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
	html = ejs.render('<%= days.join(", "); %>', {days: days});

	//set a reference to the http module
	var http = require('http');

	//call the http module's createServer method, to create a server instance
	var server = http.createServer(function (req, res) {
	//access the response object, and create a Content-Type header
	res.writeHead(200, {'Content-Type': 'text/html'});

	//end the response, sending some text (the user will see this in their browser)
	res.end(html);
	})

	//tell the server to listen for requests
	server.listen(3000);

	//just lets us know that the server is running
	console.log('In your browser, go to: http://localhost:3000');
	var express = require('express'),
	path = require('path'),
	app = express();

	//set the port
	app.set('port', 3000);

	//set the view engine
	app.set('view engine', 'ejs');

	//handler for "/"
	app.get('/', function(req, res){
	res.render('example-2', {
	welcomeMessage: "This message was rendered on the server",
	headerTitle:"EJS Demo Page"
	});
	});

	// Listen for requests
	var server = app.listen(app.get('port'), function () {
	console.log('The server is running on http://localhost:' + app.get('port'));
	});
	<html>
	<head>
	<title><%= headerTitle %></title>
	</head>
	<body>
	<%= welcomeMessage %>
	</body>
	</html>
	<html>
	<head>
	<title>EJS Demo Page</title>
	</head>
	<body>
	This message was rendered on the server
	</body>
	</html>
	<html>
	<head>
	<title>EJS Demo Page - Example # 3</title>
	</head>
	<body>
	<ul>
	<li>Monday</li>
	<li>Tuesday</li>
	<li>Wednesday</li>
	<li>Thursday</li>
	<li>Friday</li>
	</ul>
	</body>
	</html>
	<html>
	<head>
	<title>EJS Demo Page - Example # 4</title>
	<style>
	.selected{
	list-style-type: none;
	width: 20%;
	padding: 10px;
	margin: 10px 0;
	background-color: #fdfd96;
	color: #fc0000;
	font-weight: bold;
	font-family: Arial;
	}
	</style>
	</head>
	<body>
	<h1>Using "if" logic in an EJS template</h1>
	<ul>
	<li>Monday</li>
	<li>Tuesday</li>
	<li>Wednesday</li>
	<li class="selected">Thursday</li>
	<li>Friday</li>
	</ul>
	</body>
	</html>