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.
Membuat Web Golang 11 HTML Template Action
Artikel Terhangat
Golang JSON 06 Mengenal JSON Tags
10 Oct 2023Golang JSON 05 Mengenal JSON Array
10 Oct 2023Golang JSON 04 Mengenal Decode JSON
10 Oct 2023Golang JSON 03 Mengenal JSON Objek
10 Oct 2023Golang JSON 02 Encode JSON
10 Oct 2023Golang JSON 01 Pengenalan Package
10 Oct 2023Web HTTP Router 08 Membuat Middleware Router
10 Oct 2023
Golang JSON 06 Mengenal JSON Tags
Golang JSON 05 Mengenal JSON Array
Golang JSON 04 Mengenal Decode JSON
Golang JSON 03 Mengenal JSON Objek
Golang JSON 02 Encode JSON
Golang JSON 01 Pengenalan Package