programming

12 HTML Template Layout

  • avatar
    by Ihsan
  • 4 Sep 2023
  • 3 menit

Pengenalan Template Layout

Saat kita membuat halaman website ada beberapa bagian yang selalu sama pada tiap halaman misalnya yaitu header dan footer, maka jika terdapat bagian yang sama itu disarankan untuk disimpan pada template yang terpisah agar bisa digunakan di template yang lain atau kadang kita sebut reusable. Nah pada golang template iin sudah mendukung import dari template lain sehingga bisa kita gunakan untuk mempermudah pembuatan website.

Import Template

Untuk melakukan import pada template kita bisa menggunakan perintah-perintah sebagai berikut:

  • {{template "name"}} berarti kita akan meng-import template name tanpa memberikan data apapun.
  • {{template "name" .Value}} artinya kita akan meng-import template name dengan memberikan data value

Implementasi Template Header

Baiklah, kita lanjut dengan menambahkan template header dengan membuat file header.html terlebih dahulu dengan isi sebagai berikut.

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

Lalu selanjutnya kita akan membuat template footer pada file footer.html dengan isi kode dibawah ini.

</body>
</html>

Sekarang, kita akan membuat template layout yang didalamnya akan kita import header.html dan footer.html dengan pertama membuat file layout.html.

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

Saatnya kita menambahkan fungsi baru pada handler agar template yang kita buat bisa diakses pada halaman browser. Berikut kode program dibawah ini.

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",
	})
}

Pada kode diatas terlihat semua file yang berhubungan dengan template layout kita akan kita inputkan.

Dan selanjutnya jangan lupa untuk menambahkan handler yang sudah kita buat pada main.go.

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

Buld dan jalankan program maka akan menampilkan halaman pada browser yang terdapat title dan text Hello Santekno.

Memahami Lebih Dekat Template Name

saat kita membuat template dari file secara otomatis nama file-nya akan menjadi nama template-nya. Namun jika kita ingin mengubah nama template tersebut kita juga bisa menggunakan perintah {{define "name"}}TEMPLATE{{end}} yang artinay kita akan membuat template dengan nama name.

Nah kita coba implementasikan pada template layout yang sudah kita buat lalu lakukan perubahan seperti dibawah ini.

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

header dan footer pun kita akan ubah menjadi seperti ini.

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

Pada file footer diubah seperti ini

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

Maka pada handler-nya pun kita perlu ada perubahan cara pemanggilan template-nya bisa kita lihat dibawah ini.


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",
	})
}

Maka ketika kita jalankan maka akan sama saja tampilannya seperti sebelumnya tetapi secara kode kita menggunakan template name yang sudah di define.

Previous post
11 HTML Template Action
Next post
13 HTML Template Function
comments powered by Disqus