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

Let's build the "About" page.

About page

At first, edit server.js, add the following:
app.get('/about', (req, res) => {
  res.render('about.hbs');
});


Then create "views/about.hbs" content:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>About</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>
    {{> header}}
    <div class="container">
      <div class="blog-header">
        <h1 class="blog-title">About</h1>
        <p class="lead blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie, velit sed posuere accumsan, velit tellus finibus augue, eu blandit turpis mauris at nisi. Nulla vel quam vel turpis aliquet euismod.</p>
      </div>
      <div class="row">
        <div class="col-sm-8 blog-main">
          <div class="text-justify">
            <p>Nulla bibendum imperdiet finibus. Aenean sit amet sapien risus. Vivamus auctor, orci in fermentum rutrum, nulla sapien scelerisque ligula, in dignissim est odio id nisl. Donec ultrices mollis metus congue malesuada. Mauris pharetra nunc vel nunc malesuada sollicitudin. Nunc sed metus eget lorem faucibus dictum. Mauris sodales cursus ex non laoreet. Proin suscipit velit erat, ac varius nisl lacinia at. Vivamus ultricies molestie eros ac vestibulum. Nulla ornare luctus accumsan. Etiam mollis ornare dolor, ac sagittis quam sollicitudin ac. Nullam iaculis ligula a nibh lacinia tristique. Praesent vulputate dui magna, quis venenatis odio semper nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ut elit turpis.</p>
            <p>Donec facilisis venenatis mauris, nec pulvinar odio consectetur quis. Duis ut ante facilisis, feugiat turpis vitae, tempor urna. Nulla ornare venenatis viverra. Donec malesuada, quam quis rutrum sodales, arcu tellus varius mi, sed dignissim est libero ac arcu. Pellentesque sollicitudin est nulla, nec hendrerit tortor congue ac. Nam tristique, nisi eu dignissim lobortis, augue urna blandit lacus, sit amet convallis nulla lorem id urna. Phasellus porta mauris vitae purus ullamcorper, at vulputate est rutrum. Ut non congue ipsum.</p>
          </div>
        </div>
        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
          {{> archives}}
        </div>
    </div>
    {{> footer}}
  </body>
</html>


Navigate to http://localhost:3000/about, refresh your browser. It works as expected!

Now, I want to dynamic year on the footer (with the current year) and archives on the sidebar (with the dummy array).

To do this, at first, we change the template files


Then also the server.js


You see? Yes, duplicate code!
Duplicate code is a computer programming term for a sequence of source code that occurs more than once, either within a program or across different programs owned or maintained by the same entity. Duplicate code is generally considered undesirable for a number of reasons

To prevent duplicate code, we can write functions:


Our code is clean now, but if we have 100 pages, we copy the highlighted above 100 times. It's terrible!!!
Helpers can resolve our issue.

Helpers

Helpers are used to extract complex logic out of the view so that you can organize our code better. They're included in views, but not in controllers or models.

We register 2 helpers: getArchives and getCurrentYear:
hbs.registerHelper('getArchives', () => {
  return [
    {url: '#', title: 'March 2017'},
    {url: '#', title: 'February 2017'},
    {url: '#', title: 'January 2017'},
    {url: '#', title: 'December 2016'},
    {url: '#', title: 'November 2016'},
    {url: '#', title: 'October 2016'},
    {url: '#', title: 'September 2016'}
  ];
});
hbs.registerHelper('getCurrentYear', () => {
  return new Date().getFullYear();
});


Remove some lines inside server.js

Modify footer.hbs and archives.hbs


Navigate to http://localhost:3000/about, refresh your browser. It works as expected!

Please remember to update the navigation links.

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

No comments:

Post a Comment