programming

12 How to Understanding HTML Template Layout in Golang

  • avatar
    by Ihsan
  • 4 Sep 2023
  • 3 minutes

Introduction to Layout Templates

When we create a website page, there are several parts that are always the same on each page, for example header and footer, so if there are parts that are the same it is recommended that they be saved in a separate template so that they can be used in other templates or sometimes we call them reusable. Now, this Golang template supports importing from other templates so we can use it to make website creation easier.

Import Templates

To import a template we can use the following commands:

  • {{template "name"}} means we will import template name without providing any data.
  • {{template "name" .Value}} means we will import template name by providing value data

Header Template Implementation

OK, let’s continue by adding the header template by creating the header.html file first with the following contents.

<!DOCTYPE html>
<html lang="en">
<header>
	<meta charset="UTF-8">
	<title>{{.Title}}</title>
</header>

Then next we will create a footer template in the footer.html file with the contents of the code below.

</body>
</html>

Now, we will create a layout template into which we will import header.html and footer.html by first creating the file layout.html.

{{template "header.html" .}}
<h1>Hello {{.Name}}
{{template "footer.html"}}

It’s time for us to add a new function to the handler so that the template we create can be accessed on a browser page. The following is the program code below.

func TemplateLayoutHandler(w http.ResponseWriter, r *http.Request) {
	t := template.Must(template.ParseFiles(
		"./templates/header.html",
		"./templates/footer.html",
		"./templates/layout.html",
	))
	t.ExecuteTemplate(w, "layout.html", map[string]interface{}{
		"Name":  "Santekno",
		"Title": "Contoh Template Layout",
	})
}

In the code above you can see all the files related to our layout template that we will input.

And next, don’t forget to add the handler that we created to main.go.

	mux.HandleFunc("/template-layout", TemplateLayoutHandler)

Buld and run the program and it will display a page in the browser containing the title and text Hello Santekno.

Understanding Template Names Closer

When we create a template from a file, the file name will automatically become the template name. However, if we want to change the name of the template, we can also use the command {{define "name"}}TEMPLATE{{end}} which means we will create a template with the name name.

So, let’s try implementing it in the layout template that we have created and then make changes as below.

{{define "layout"}}
{{template "header" .}}
<h1>Hello {{.Name}}
{{template "footer"}}
{{end}}

We will also change the header and footer to be like this.

{{define "header"}}
<!DOCTYPE html>
<html lang="en">
<header>
	<meta charset="UTF-8">
	<title>{{.Title}}</title>
</header>
{{end}}

In the footer file it is changed like this

{{define "footer"}}
</body>
</html>
{{end}}

So we also need to change the way the template is called in the handler, which we can see below.


func TemplateLayoutHandler(w http.ResponseWriter, r *http.Request) {
	t := template.Must(template.ParseFiles(
		"./templates/header.html",
		"./templates/footer.html",
		"./templates/layout.html",
	))
	t.ExecuteTemplate(w, "layout", map[string]interface{}{
		"Name":  "Santekno",
		"Title": "Contoh Template Layout",
	})
}

So when we run it, the appearance will be the same as before, but in code we use the template name that has been defined.

Previous post
11 How to Understanding HTML Template Action in Golang
Next post
13 How to Understanding HTML Template Function in Golang
comments powered by Disqus