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
templatename
tanpa memberikan data apapun.{{template "name" .Value}}
artinya kita akan meng-import templatename
dengan 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
.