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-importtemplatenametanpa memberikan data apapun.{{template "name" .Value}}artinya kita akan meng-import templatenamedengan memberikan datavalue
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.
11 HTML Template Action
13 HTML Template Function
Artikel Terhangat
14 Menghapus (Delete) Data Gorm Library
03 Mar 202513 Advanced Update Data Gorm Library
03 Mar 202511 Update Data GORM Library
03 Mar 202508 Advanced Query dengan GORM di Golang
03 Mar 2025
14 Menghapus (Delete) Data Gorm Library
13 Advanced Update Data Gorm Library
11 Update Data GORM Library