Golang htmx Tailwind CSS: Buat Aplikasi Web Responsif

Latar belakang

Dalam landskap pembangunan web hari ini, JavaScript telah lama menjadi bahasa pilihan untuk mencipta aplikasi web yang dinamik dan interaktif.

Sebagai pembangun Go, bagaimana jika anda tidak mahu menggunakan Javascript dan masih melaksanakan aplikasi web responsif?

Bayangkan apl senarai tugasan anggun yang dikemas kini serta-merta semasa anda menyemak tugas tanpa memuat semula halaman penuh. Inilah kuasa Golang dan htmx!

Menggabungkan Go dan htmx membolehkan kami membuat aplikasi web responsif dan interaktif tanpa menulis satu baris JavaScript.

Dalam blog ini, kami akan meneroka cara menggunakan htmx dan Golang untuk membina aplikasi web. (Ia juga boleh digunakan dengan platform kegemaran anda yang lain.)

Sebagai pembelajaran, kami akan melaksanakan operasi asas mencipta dan memadam untuk pengguna.

Apa itu htmx?

htmx ialah sambungan HTML moden yang menambahkan komunikasi dua arah antara penyemak imbas dan pelayan.

Ia membolehkan kami membuat halaman web dinamik tanpa menulis JavaScript, kerana ia menyediakan akses kepada AJAX, acara yang dihantar pelayan, dll dalam HTML secara langsung.

Bagaimana htmx berfungsi?

• Apabila pengguna berinteraksi dengan elemen yang mempunyai atribut htmx (cth., mengklik butang), penyemak imbas mencetuskan acara yang ditentukan.
• htmx memintas acara dan menghantar permintaan HTTP ke titik akhir sebelah pelayan yang dinyatakan dalam atribut (cth., hx-get="/my-endpoint").
• Titik akhir sebelah pelayan memproses permintaan dan menjana respons HTML.
• htmx menerima respons dan mengemas kini DOM mengikut atribut hx-target dan hx-swap. Ini boleh melibatkan:

 — Menggantikan keseluruhan kandungan elemen.
 — Memasukkan kandungan baharu sebelum atau selepas elemen.
 — Melampirkan kandungan pada penghujung elemen.

Mari kita fahami dengan lebih mendalam dengan contoh.

<button hx-get="/fetch-data" hx-target="#data-container">
   Fetch Data
</button>
<div>



<p>In the above code, when the button is clicked:</p>

<ol>
<li>htmx sends a GET request to /fetch-data.
</li>
<li>The server-side endpoint fetches data and renders it as HTML.</li>
<li>The response is inserted into the #data-container element.</li>
</ol>

<h3>
  
  
  Create and delete the user
</h3>

<p>Below are the required tools/frameworks to build this basic app.</p>

<ul>
<li>Gin (Go framework)</li>
<li>Tailwind CSS </li>
<li>htmx</li>
</ul>

<p><strong>Basic setup</strong> </p>

<ul>
<li>Create main.go file at the root directory.</li>
</ul>

<p><strong>main.go</strong><br>
</p>

<pre class="brush:php;toolbar:false">package main

import (
 "fmt"
 "github.com/gin-gonic/gin"
)

func main() {
 router := gin.Default()

 router.Run(":8080")
 fmt.Println("Server is running on port 8080")
}

Ia menyediakan pelayan Go asas, berjalan pada port 8080.
Jalankan pergi jalankan main.go untuk menjalankan aplikasi.

• Buat fail HTML pada direktori akar, untuk memaparkan senarai pengguna.

pengguna.html

   
      <title>Go + htmx app </title>
      <script src="https://unpkg.com/htmx.org@2.0.0" integrity="sha384-wS5l5IKJBvK6sPTKa2WZ1js3d947pvWXbPJ1OmWfEuxLgeHcEbjUUA5i9V5ZkpCw" crossorigin="anonymous"></script>
      <script src="https://cdn.tailwindcss.com"></script>
   
   



<blockquote>
<p>We have included,</p>

<p><strong>htmx</strong> using the script tag — <u>https://unpkg.com/htmx.org@2.0.0</u></p>

<p><strong>Tailwind CSS</strong> with cdn link —<br>
<u>https://cdn.tailwindcss.com</u></p>
</blockquote>

<p>Now, we can use Tailwind CSS classes and render the templates with htmx.</p>

<p>As we see in users.html, we need to pass users array to the template, so that it can render the users list. </p>

<p>For that let’s create a hardcoded static list of users and create a route to render users.html .</p>

<h3>
  
  
  Fetch users
</h3>

<p><strong>main.go</strong><br>
</p>

<pre class="brush:php;toolbar:false">package main

import (
 "fmt"
 "net/http"
 "text/template"

 "github.com/gin-gonic/gin"
)

func main() {
 router := gin.Default()

 router.GET("/", func(c *gin.Context) {
  users := GetUsers()

  tmpl := template.Must(template.ParseFiles("users.html"))
  err := tmpl.Execute(c.Writer, gin.H{"users": users})
    if err != nil {
       panic(err)
    }
 })

 router.Run(":8080")
 fmt.Println("Server is running on port 8080")
}

type User struct {
 Name  string
 Email string
}

func GetUsers() []User {
 return []User{
  {Name: "John Doe", Email: "johndoe@example.com"},
  {Name: "Alice Smith", Email: "alicesmith@example.com"},
 }
}

Kami telah menambah laluan / untuk memaparkan senarai pengguna dan menyediakan senarai statik pengguna (yang mana kami akan menambah pengguna baharu di hadapan).

Itu sahaja. Mulakan semula pelayan dan mari lawati — http://localhost:8080/ untuk menyemak sama ada ia memaparkan senarai pengguna atau tidak. Ia akan memaparkan senarai pengguna seperti di bawah.

Buat pengguna

Buat fail user_row.html. Ia akan bertanggungjawab untuk menambah baris pengguna baharu pada jadual pengguna.

user_row.html

<button hx-get="/fetch-data" hx-target="#data-container">
   Fetch Data
</button>
<div>



<p>In the above code, when the button is clicked:</p>

<ol>
<li>htmx sends a GET request to /fetch-data.
</li>
<li>The server-side endpoint fetches data and renders it as HTML.</li>
<li>The response is inserted into the #data-container element.</li>
</ol>

<h3>
  
  
  Create and delete the user
</h3>

<p>Below are the required tools/frameworks to build this basic app.</p>

<ul>
<li>Gin (Go framework)</li>
<li>Tailwind CSS </li>
<li>htmx</li>
</ul>

<p><strong>Basic setup</strong> </p>

<ul>
<li>Create main.go file at the root directory.</li>
</ul>

<p><strong>main.go</strong><br>
</p>

<pre class="brush:php;toolbar:false">package main

import (
 "fmt"
 "github.com/gin-gonic/gin"
)

func main() {
 router := gin.Default()

 router.Run(":8080")
 fmt.Println("Server is running on port 8080")
}

Ia mengambil nama dan e-mel daripada input borang dan melaksanakan user_row.html.

Mari cuba tambah pengguna baharu pada jadual. Lawati http://localhost:8080/ dan klik butang Tambah Pengguna.

Yayy! Kami telah berjaya menambah pengguna baharu pada senarai ?.

Untuk menyelami lebih mendalam panduan pelaksanaan terperinci, lihat panduan lengkap di Canopas.

---

Jika anda suka apa yang anda baca, pastikan anda tekan ? butang! — sebagai seorang penulis ia bermakna dunia!

Saya menggalakkan anda untuk berkongsi pendapat anda di bahagian komen di bawah. Input anda bukan sahaja memperkaya kandungan kami tetapi juga menyemarakkan motivasi kami untuk mencipta artikel yang lebih berharga dan bermaklumat untuk anda.

Selamat mengekod!?