A Slacker’s Guide to Programming
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.
- Installed Go.
- Implemented a simple web server.
- 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.htmlAdd 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>
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.
