Build a Go Boilerplate in 20 minutes (Part 2)

Build a Go Boilerplate in 20 minutes (Part 2)

In this article, we will learn how to extract the hardcoded HTML into its own template.

Introduction

This was what we achieved in part 1 of the tutorial.

  1. Installed Go.
  2. Implemented a simple web server.
  3. Created a Home and About page for our application.

The HTML Template

Create an index.html inside a templates folder. We will store all our HTML files in this folder.

$ mkdir templates && touch templates/index.html

Add the following code to index.html.

<a href='/'>Home</a> <a href='/about/'>About</a><br>
<h1>{{.Title}}</h1>
<div>{{.Body}}</div>

The code looks almost the same as our previous implementation apart from the double curly braces aka template directives.

We will pass in the values of Title and Body to index.html.

Structs

Let's declare a struct type for Title and Body.

Add the following code after the import statements in main.go.

import (
    ...

type Data struct {
    Title string
    Body string
}

The html/template package

We need to import the "html/template" package to use our HTML templates.

Add the following to the import statement in main.go. While we're at it, remove the "fmt" package as it is no longer required.

import (
    "html/template"
    "log"
    "net/http"
)

Refactor the handler functions to use the HTML template.

func IndexHandler(w http.ResponseWriter, r *http.Request) {
    page := &Data{Title:"Home page", Body:"This is the home page."}
    t, _ := template.ParseFiles("templates/index.html")
    t.Execute(w, page)
}

func AboutHandler(w http.ResponseWriter, r *http.Request) {
    page := &Data{Title:"About page", Body:"This is the about page."}
    t, _ := template.ParseFiles("templates/index.html")
    t.Execute(w, page)
}

We declare a page variable that holds the Title and Body string values for both pages.

The function template.ParseFiles reads our index.html in the templates directory and creates a template struct.

The method t.Execute executes the template and writes the output to http.ResponseWriter together with our page data.

Run the program to ensure that everything is still working.

$ go run main.go

Click here to view the code

Add Bootstrap

Add the Bootstrap CSS framework to index.html. You can add any framework you like.

We are using Bootstrap for simplicity's sake.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Go Bootstrap Example | {{.Title}}</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <nav class='nav nav-pills justify-content-center p-3'>
    <a class='nav-link active' href='/'>Home</a>
    <a class='nav-link' href='/about/'>About</a>
    </nav>
    <main class="jumbotron">
    <div class="text-center p-5">
        <h1>{{.Title}}</h1>
        <p class="lead">{{.Body}}</p>
    </div>
    </main>
    <footer class="p-5 text-center">
    This is the {{.Title}} footer.
    </footer>
</body>

</html>

Snazzy!

Click here to view the code

Our HTML template could do with a bit of refinement.

In part 3, we will separate the different sections of index.html into partials for better maintainability.

Latest Posts

How Chat-GPT Replaced My JobHow Chat-GPT Replaced My Job
The Rise and Fall of AI EmpiresThe Rise and Fall of AI Empires
GPT-3: The Latest Craze in NLPGPT-3: The Latest Craze in NLP

Copyright © Terence Lucas Yap

Powered by Gatsby JS