Build a simple blog with Node.js, Express, MongoDB (Part 2)

On home page, I want to display the basic html page as the screenshot bellow

from the HTML:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://getbootstrap.com/docs/3.3/examples/blog/blog.css">
  </head>
  <body>
    <div class="blog-masthead">
      <div class="container">
        <nav class="blog-nav">
          <a class="blog-nav-item" href="#">Home</a>
          <a class="blog-nav-item" href="#">About</a>
          <a class="blog-nav-item" href="#">Contact</a>
        </nav>
      </div>
    </div>
    <div class="container">
      <div class="blog-header">
        <h1 class="blog-title">Home</h1>
        <p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>
      </div>
      <div class="row">
        <div class="col-sm-8 blog-main">
          <div class="blog-post">
            <h2 class="blog-post-title"><a href="">Lorem ipsum dolor sit amet</a></h2>
            <p>Praesent scelerisque nibh mattis dui consectetur elementum. Sed porttitor mi sed fringilla commodo. Aliquam erat volutpat. Quisque nec mauris odio.</p>
          </div>
          <div class="blog-post">
            <h2 class="blog-post-title"><a href="">Aenean feugiat id dui nec sagittis</a></h2>
            <p>Praesent ut neque sed lorem suscipit bibendum. Curabitur at scelerisque augue. Integer sagittis, lacus sit amet semper euismod, turpis lectus mattis magna, sit amet scelerisque orci turpis in tellus</p>
          </div>
        </div>
        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
          <div class="sidebar-module">
            <h4>Archives</h4>
            <ol class="list-unstyled">
              <li><a href="#">March 2017</a></li>
              <li><a href="#">February 2017</a></li>
              <li><a href="#">January 2017</a></li>
              <li><a href="#">December 2016</a></li>
              <li><a href="#">November 2016</a></li>
              <li><a href="#">October 2016</a></li>
              <li><a href="#">September 2016</a></li>
              <li><a href="#">August 2016</a></li>
              <li><a href="#">July 2016</a></li>
              <li><a href="#">June 2016</a></li>
              <li><a href="#">May 2016</a></li>
              <li><a href="#">April 2016</a></li>
            </ol>
          </div>
        </div>
      </div>
    </div>
    <footer class="blog-footer">
      <p>Copyright &copy; 2017.</p>
    </footer>
  </body>
</html>


How we do?
Copy all and paste as string inside "res.send()"? It's terrible!
Let's use Handlebars.

Handlebars

Handlebars provides the power necessary to let you build semantic templates effectively with no frustration. Handlebars is largely compatible with Mustache templates. In most cases it is possible to swap out Mustache with Handlebars and continue using your current templates.
Read more http://handlebarsjs.com/

https://www.npmjs.com/package/hbs is the Express.js view engine for handlebars.js

To install hbs, open the terminal, then run the following command:
$ npm install hbs --save

Add two lines to your code:
const hbs = require('hbs');
and
app.set('view engine', 'hbs');

Then create "views/home.hbs" file, put all HTML code above to this.
Change res.send() to:
res.render('home.hbs');

Navigate to http://localhost:3000, it works as expected.

Partials

Partials allow you to easily organize and reuse your view code in an application (some blocks appear in more than one page).
Eg:
  1. Header
  2. Archives
  3. Footer


Create "views/partials/header.hbs", "views/partials/archives.hbs", and "views/partials/footer.hbs" then cut the corresponding lines of code to these.

Add
hbs.registerPartials(__dirname + '/views/partials');
to server.js

Update home.hbs, use {{> partialfilename}} to include.

Navigate to http://localhost:3000, it works as expected.

Rendering templates with data

Inside home.hbs, we will loop:
<div class="blog-post">
  <h2 class="blog-post-title"><a href="[URL]">[TITLE]</a></h2>
  <p>[SUMMARY]</p>
</div>

with the data from server.js

We will get items from the database later, now we get from dummy array.

Modify home.hbs, loop the items variable:

Navigate to http://localhost:3000, it works as expected.

Note: instead of
res.render('home.hbs', {
  items: items
});

you should write:
res.render('home.hbs', {
  items
});


Part 3: http://blog.alphaplus.vn/2017/08/build-simple-blog-with-nodejs-express-mongodb-part-3.html
See you then!

No comments:

Post a Comment