GUI (Grafiksel Kullanıcı Arayüzü)
HTML Şablonlar (Templates)
HTML Şablonlar, Golang üzerinde web sayfalarının dinamikliği için kullanılır. Yani şablonlar kullanarak web sayfalarımızın belirlediğimiz bölümlerini Go üzerinden değişikliğe uğratabiliriz.
Bu yazımızda HTML şablonların nasıl oluşturulacağına bakacağız. Çalışma mantığı çok basit. Şablon olarak kullanacağımız html dosyasınında sadece tasarımı yapıyoruz ve dinamik olacak kısımlara ise bir nevi işaretler koyuyoruz. Daha sonra Go bu şablon dosyasını işliyor ve işaret koyduğumuz yerlere gelecek değerleri yerleştiriyor. Düz mantık olarak bu işi yapıyor.

✨ Örnek Kullanım

1
Merhaba, <b>{{ . }}</b>
Copied!
Yukarıdaki örnekte {{ }} süslü parantezler içerisinde . (nokta) yazıyor. Bu da Go şablon işlenirken bu kısma Go tarafından vereceğimiz değerin geleceği anlamına geliyor.
Şimdi yukarıdaki örneğimizi sablon.html adı ile kaydedelim.
Gelelim Go kodlarımıza;
main.go dosyamız aşağıdaki gibi olsun.
main.go
1
package main
2
3
import (
4
"fmt"
5
"html/template"
6
"net/http"
7
)
8
9
// yakalayıcı fonksiyonumuz
10
func anasayfa(w http.ResponseWriter, r *http.Request) {
11
//isim değişkenimiz
12
isim := "Kaan"
13
14
//burada şablon oluşturuyoruz
15
şablon, _ := template.ParseFiles("sablon.html")
16
17
//Burada da şablonu çalıştırmasını ve isim
18
//değişkenini kullanmasını istiyoruz.
19
şablon.Execute(w, isim)
20
}
21
func main() {
22
fmt.Println("Sunucu Başladı")
23
24
//ana dizini anasayfa fonksiyonu ile yakalayalım
25
http.HandleFunc("/", anasayfa)
26
27
//portu 8000 yapalım ve sunucuyu başlatalım
28
http.ListenAndServe(":8000", nil)
29
}
Copied!
Açıklamaları üstte yazıyor.
Sayfamıza bakmak için http://localhost:8000 adresine gittiğimizde, şöyle bir sonuç ile karşılaşacağız.
İlk Çıktımız
Tabi ki burada bir terslik var. b etiketleri gözüküyor. Bunun sebebi tarayıcımızın sayfayı html olarak değil de metin dosyası olarak göstermesi. Çözüm için sablon.html dosyamızın başına <!DOCTYPE html> ekleyelim. Yani şöyle olacak:
sablon.html
1
<!DOCTYPE html>
2
Merhaba, <b>{{ . }}</b>
Copied!
Eğer sadece şablon dosyasında değişiklik yaptıysanız, sunucuyu yeniden başlatmanıza gerek yoktur. Şablon dosyalarındaki değişiklik sunucu açıkken de güncellenir.
Sayfayı yenileyerek değişikliğe bakalım. Çıktımız şöyle olacaktır:
Doğru çıktımız
Bu sefer doğru bir çıktı üretmiş olduk.
Bu yöntemler ile sayfamızda istediğimiz bölüme istediğimiz tipte değerler gönderebiliriz.

✨ HTML Kodu Gönderme

Bu örneğimizde sablon.html dosyamız aşağıdaki gibi olsun.
sablon.html
1
<!DOCTYPE html>
2
{{ . }}
Copied!
main.go dosyamız da aşağıdaki gibi olsun.
main.go
1
package main
2
3
import (
4
"fmt"
5
"html/template"
6
"net/http"
7
)
8
9
func anasayfa(w http.ResponseWriter, r *http.Request) {
10
//html kodumuz
11
htmlKodu := "<h1>Merhaba</h1>"
12
13
şablon, _ := template.ParseFiles("sablon.html")
14
15
şablon.Execute(w, htmlKodu)
16
}
17
func main() {
18
fmt.Println("Sunucu Başladı")
19
20
http.HandleFunc("/", anasayfa)
21
22
http.ListenAndServe(":8000", nil)
23
}
Copied!
Yukarıdaki örnekte sayfamıza bu sefer html kodu yolluyoruz. Çıktımıza bakalım.
HTML kodu çıktımız
Burada yine bir şeyler dönüyor. Çıktı yine istediğimiz gibi değil. "Niye bana yanlış kodları gösteriyorsun Kaan?" dediğinizi duyar gibiyim. Çünkü ilk önce yapmamamız gereken şeyleri gösteriyorum ki daha akılda kalıcı olsun.
Yukarıdaki olayın sebebi şudur: Go tarafından gönderdiğimiz html kodunun aslında html tipinde değil de string tipinde olması. Bu yüzden html kodumuz düz bir şekilde görünüyor.
Çözüm olarak da Go tarafındaki değişkenimizin tipini template.HTML yapacağız. main.go dosyamızda htmlKodu değişkenimizin tipini değiştirelim.
1
var htmlKodu template.HTML = "<h1>Merhaba</h1>"
Copied!
veya burada değişkenin tipini değiştirmek yerine şablon.Execute() fonksiyonunda değişiklik yapabilirsiniz. (Hangisi kolayınıza geliyorsa)
1
şablon.Execute(w, template.HTML(htmlKodu))
Copied!

✨ Şablona Struct Gönderme

Buraya kadar şablon dosyamıza hep bir tane değer gönderdik. Birden fazla değer göndermek için ne yapmalıyız?
Bu konuda da struct'lardan faydalanabiliriz. Örnek olarak main.go dosyamız aşağıdaki gibi olsun.
1
package main
2
3
import (
4
"fmt"
5
"html/template"
6
"net/http"
7
)
8
9
type bilgi struct {
10
Başlık string
11
İçerik template.HTML
12
}
13
14
func anasayfa(w http.ResponseWriter, r *http.Request) {
15
sayfaBilgi := bilgi{
16
Başlık: "Sayfa Başlığı",
17
İçerik: "<b>sayfa içeriği</b>",
18
}
19
şablon, _ := template.ParseFiles("sablon.html")
20
şablon.Execute(w, sayfaBilgi)
21
}
22
func main() {
23
fmt.Println("Sunucu Başladı")
24
http.HandleFunc("/", anasayfa)
25
http.ListenAndServe(":8000", nil)
26
}
Copied!
Yukarıda bilgi isminde bir struct oluşturduk. Bu struct'ımız Başlık ve İçerik adında alt değişkenlere sahip. Struct'ın elemanlarını isimlendirirken baş harflerinin büyük olmasına dikkat edelim. Çünkü Şablonlar struct değişkenlerini dışa aktarma mantığı ile kullanır. Bu yüzden baş harflerini büyük yazmazsak değişkenleri sayfaya ulaştıramayız.
Daha sonra anasayfa fonksiyonumuz içerisinde sayfaBilgi adında bilgi struct'ı oluşturduk ve değişkenlerimizin değerlerini girdik. Son olarak sayfaBilgi'yi şablona gönderdik.
sablon.html dosyamız içerisinde ise sayfaBilgi'den gelen değişkenleri yerleştirelim.
sablon.html
1
<!DOCTYPE html>
2
<h1>{{ .Başlık }}</h1><br>
3
{{.İçerik}}
Copied!
Yukarıdaki kodlarda dikkat edeceğimiz nokta, tanımlama yaparken noktadan sonra, bilgi struct'ının alt değişkenlerinin ismi ile çağırıyor olmamız.
Çıktımızı görelim:
Şablonda struct örneği
Buraya kadar şablon mantığını az çok anladığınıza inanıyorum. Buradan sonrasını konu çok uzun olmasın diye hızlıca anlatmaya çalışacağım. Yani buradan sonra çıktıların resimlerini göstermeyeceğim.

✨ Şablon İçinde Değişken Atama

Şablon içerisinde oluşturduğumuz değişkenleri tıpkı PHP'deki gibi $ işareti ile kullanırız.
Öncelikle main.go dosyamız aşağıdaki gibi olsun.
main.go
1
package main
2
3
import (
4
"fmt"
5
"html/template"
6
"net/http"
7
)
8
9
func anasayfa(w http.ResponseWriter, r *http.Request) {
10
şablon, _ := template.ParseFiles("sablon.html")
11
12
//şablona değer göndermeyeceğimiz için burası nil olsun.
13
şablon.Execute(w, nil)
14
}
15
func main() {
16
fmt.Println("Sunucu Başladı")
17
http.HandleFunc("/", anasayfa)
18
http.ListenAndServe(":8000", nil)
19
}
20
Copied!
sablon.html dosyamız da aşağıdaki gibi olsun.
sablon.html
1
<!DOCTYPE html>
2
3
{{ $isim := "kaan"}}
4
{{ $isim }}
Copied!
Yukarıda gördüğünüz gibi değişkeni tanımlarken ve kullanırken başına $ işareti koyduk. Çıktımızda "kaan" yazacaktır.

✨ Şablonda If-Else Kullanımı

1
{{if .Reşit}}
2
Bu kişi reşittir.
3
{{else}}
4
Bu kişi reşit değildir.
5
{{end}}
Copied!
Yukarıda dikkat etmemiz gereken şey if-else'in sonuna end eklememiz gerekiyor. Sadece if olsaydı bile end eklememiz gerekir.
Bu kodları yazdıktan sonra çıkan sonuçta boşluklar (boşluk tuşunun boşluğu gibi) oluşabilir. Bunu engellemek için ise aşağıdaki gibi yapabiliriz.
1
{{if .Reşit}}
2
Bu kişi reşittir.
3
{{- else}}
4
Bu kişi reşit değildir.
5
{{- end}}
Copied!
Yani boşluk oluşan bölgeniz başına - tire ekliyoruz.

✨ Şablonda Range Döngüsü Kullanımı

Range döngüsü ile web sayfamızın içerisinde bir listenin sıralanmasını sağlayabiliriz.
1
<ul>
2
{{range .Liste}}
3
{{.}}
4
{{end}}
5
</ul>
Copied!

✨ Şablon İçerisinde Yorum Satırı Oluşturma

Biliyorsunuz ki, HTML kodu içerisindeki yorumlar sayfa kaynağını göstere tıklayınca gözüküyor. Eğer yorumların gözükmesini istemezsek Şablon yorumu olarak yazabiliriz.
1
{{/* Yorumu buraya yazabilirsiniz */}}
Copied!
Last modified 9mo ago