01 Project – Node.js / Express / MongoDB – Part 06 – Creating the first view: index.handlebars file

A view is a HTML page. It is called view because of the MVC (Model-View-Controller) design pattern. A model is the data that is displayed on a page, the view is the page itself, and the controller is what communicates between the model and the view.

We are going to create two views: index.handlebars as a home page and image.handlebars for the image page.

We will be using Bootstrap (HTML framework by Twitter) because we want our page to have a clean look and be responsive.

Create a new file within the views folder, name it index.handlebars , and insert the following HTML code:

<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Upload an Image</h3>
  </div>

  <form method="post" action="/images" enctype="multipart/form-data">
  <div class="panel-body form-horizontal">
    <div class="form-group col-md-12">
      <label class="col-sm-2 control-label" for="file">Browse:</label>
      <div class="col-md-10">
        <input class="form-control" type="file" name="file" id="file">
      </div>
    </div>
    <div class="form-group col-md-12">
      <label class="col-md-2 control-label" for="title">Title:</label>
      <div class="col-md-10">
        <input class="form-control" type="text" name="title">
      </div>
    </div>
    <div class="form-group col-md-12">
      <label class="col-md-2 control-label" for="description">Description:</label>
      <div class="col-md-10">
        <textarea class="form-control" name="description" rows="2"></textarea>
      </div>
    </div>
    <div class="form-group col-md-12">
      <div class="col-md-12 text-right">
        <button type="submit" id="login-btn" class="btn btn-success" type="button">
        <i class="fa fa-cloud-upload "></i> Upload Image</button>
      </div>
    </div>
  </div>
</form>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title"></h3>
  </div>
  <div class="panel-body">
    {{#each images}}
    <div class="col-md-4 text-center" style="padding-bottom: 1em;">
      <a href="/images/{{ uniqueId }}"><img src="/public/upload/{{filename}}" alt="{{title}}"
        style="width: 175px; height: 175px;" class="img-thumbnail"></a>
    </div>
      {{/each}}
    </div>
  </div>

It is just HTML code. The page won’t do anything at this moment so my comments are useless here. It contains an input field for the images to be uploaded, a textarea where the description goes, a button to submit the form, and a list of the newest images uploaded to the website.

Leave a Reply