Maison > Article > développement back-end > HTMX + Go : créez une application CRUD avec Golang et HTMX
Une question que je vois beaucoup circuler à propos de HTMX, en particulier parmi les développeurs qui viennent d'essayer la bibliothèque, est "Mais que pouvez-vous vraiment construire avec ?"
Excellente question, et dans cet article, nous commencerons par de petites étapes en créant une application CRUD basée sur une base de données avec HTMX et Go comme langage backend.
Au fait, si vous voulez vraiment un guide pratique basé sur un projet sur la création d'applications fullstack avec HTMX, consultez mon cours **HTMX + Go : Créer des applications Fullstack avec Golang et HTMX [Remise incluse].**
Commençons.
J'aimerais l'appeler une application de gestion des tâches, mais je sais que vous avez déjà pensé que ce n'est qu'un nom sophistiqué pour une autre application Todo. Ne vous inquiétez pas, les applications Todo sont idéales pour apprendre les opérations fondamentales avec des langages, des bibliothèques et des frameworks. Nous utiliserons donc la même stratégie testée et fiable.
Notre application pourra effectuer les opérations suivantes :
Donc d'abord, nous avons besoin d'une base de données, et pour ce projet de démonstration, j'utiliserai MySQL. N'hésitez pas à utiliser n'importe quelle base de données de votre choix et à apporter les modifications de code nécessaires pour référencer votre base de données au fur et à mesure que vous suivez cet article.
Nous garderons les choses simples, sans conception de schéma compliquée. Nous créons d’abord une base de données avec le nom testdb et à l’intérieur de cette base de données, nous créons une table todos (n’hésitez pas à donner à votre base de données et à votre table le nom que vous préférez mais assurez-vous d’utiliser les mêmes noms dans vos instructions SQL)
Dans la table todos, implémentez le schéma ci-dessous :
Vous pouvez choisir d'amorcer la table de base de données avec certaines tâches afin que nous puissions commencer à voir certaines tâches la première fois que nous chargeons l'application.
Pour commencer à configurer notre petite application, créez un dossier pour le projet à n'importe quel emplacement pratique de votre ordinateur de développement.
mkdir task-management
Exécutez la commande suivante à la racine du dossier du projet pour l'initialiser en tant que projet Golang :
go mod init task-management
Ensuite, nous devons installer quelques dépendances. Nous savons déjà que nous utilisons MySQL comme base de données, nous devons donc installer le pilote MySQL pour Golang.
Nous devons également installer le Gorilla Mux Router qui sera la bibliothèque de routage de notre projet. Exécutez les deux commandes ci-dessous à la racine de votre projet pour installer ces bibliothèques dans votre projet
MySQL :
go get -u github.com/go-sql-driver/mysql
Gorille Mux :
go get -u github.com/gorilla/mux
Une fois ces bibliothèques en place, créez votre fichier main.go à la racine du projet et ajoutez le code ci-dessous :
package main import ( "database/sql" "fmt" "html/template" "log" "net/http" "strconv" "strings" _ "github.com/go-sql-driver/mysql" "github.com/gorilla/mux" ) var tmpl *template.Template var db *sql.DB type Task struct { Id int Task string Done bool } func init() { tmpl, _ = template.ParseGlob("templates/*.html") } func initDB() { var err error // Initialize the db variable db, err = sql.Open("mysql", "root:root@(127.0.0.1:3333)/testdb?parseTime=true") if err != nil { log.Fatal(err) } // Check the database connection if err = db.Ping(); err != nil { log.Fatal(err) } } func main() { gRouter := mux.NewRouter() //Setup MySQL initDB() defer db.Close() gRouter.HandleFunc("/", Homepage) //Get Tasks gRouter.HandleFunc("/tasks", fetchTasks).Methods("GET") //Fetch Add Task Form gRouter.HandleFunc("/newtaskform", getTaskForm) //Add Task gRouter.HandleFunc("/tasks", addTask).Methods("POST") //Fetch Update Form gRouter.HandleFunc("/gettaskupdateform/{id}", getTaskUpdateForm).Methods("GET") //Update Task gRouter.HandleFunc("/tasks/{id}", updateTask).Methods("PUT", "POST") //Delete Task gRouter.HandleFunc("/tasks/{id}", deleteTask).Methods("DELETE") http.ListenAndServe(":4000", gRouter) } func Homepage(w http.ResponseWriter, r *http.Request) { tmpl.ExecuteTemplate(w, "home.html", nil) } func fetchTasks(w http.ResponseWriter, r *http.Request) { todos, _ := getTasks(db) //fmt.Println(todos) //If you used "define" to define the template, use the name you gave it here, not the filename tmpl.ExecuteTemplate(w, "todoList", todos) } func getTaskForm(w http.ResponseWriter, r *http.Request) { tmpl.ExecuteTemplate(w, "addTaskForm", nil) } func addTask(w http.ResponseWriter, r *http.Request) { task := r.FormValue("task") fmt.Println(task) query := "INSERT INTO tasks (task, done) VALUES (?, ?)" stmt, err := db.Prepare(query) if err != nil { log.Fatal(err) } defer stmt.Close() _, executeErr := stmt.Exec(task, 0) if executeErr != nil { log.Fatal(executeErr) } // Return a new list of Todos todos, _ := getTasks(db) //You can also just send back the single task and append it //I like returning the whole list just to get everything fresh, but this might not be the best strategy tmpl.ExecuteTemplate(w, "todoList", todos) } func getTaskUpdateForm(w http.ResponseWriter, r *http.Request) { vars := mux.Vars(r) //Convert string id from URL to integer taskId, _ := strconv.Atoi(vars["id"]) task, err := getTaskByID(db, taskId) if err != nil { http.Error(w, err.Error(), http.StatusInternalServerError) } tmpl.ExecuteTemplate(w, "updateTaskForm", task) } func updateTask(w http.ResponseWriter, r *http.Request) { vars := mux.Vars(r) taskItem := r.FormValue("task") //taskStatus, _ := strconv.ParseBool(r.FormValue("done")) var taskStatus bool fmt.Println(r.FormValue("done")) //Check the string value of the checkbox switch strings.ToLower(r.FormValue("done")) { case "yes", "on": taskStatus = true case "no", "off": taskStatus = false default: taskStatus = false } taskId, _ := strconv.Atoi(vars["id"]) task := Task{ taskId, taskItem, taskStatus, } updateErr := updateTaskById(db, task) if updateErr != nil { log.Fatal(updateErr) } //Refresh all Tasks todos, _ := getTasks(db) tmpl.ExecuteTemplate(w, "todoList", todos) } func deleteTask(w http.ResponseWriter, r *http.Request) { vars := mux.Vars(r) taskId, _ := strconv.Atoi(vars["id"]) err := deleTaskWithID(db, taskId) if err != nil { http.Error(w, err.Error(), http.StatusInternalServerError) } //Return list todos, _ := getTasks(db) tmpl.ExecuteTemplate(w, "todoList", todos) } func getTasks(dbPointer *sql.DB) ([]Task, error) { query := "SELECT id, task, done FROM tasks" rows, err := dbPointer.Query(query) if err != nil { return nil, err } defer rows.Close() var tasks []Task for rows.Next() { var todo Task rowErr := rows.Scan(&todo.Id, &todo.Task, &todo.Done) if rowErr != nil { return nil, err } tasks = append(tasks, todo) } if err = rows.Err(); err != nil { return nil, err } return tasks, nil } func getTaskByID(dbPointer *sql.DB, id int) (*Task, error) { query := "SELECT id, task, done FROM tasks WHERE id = ?" var task Task row := dbPointer.QueryRow(query, id) err := row.Scan(&task.Id, &task.Task, &task.Done) if err != nil { if err == sql.ErrNoRows { return nil, fmt.Errorf("No task was found with task %d", id) } return nil, err } return &task, nil } func updateTaskById(dbPointer *sql.DB, task Task) error { query := "UPDATE tasks SET task = ?, done = ? WHERE id = ?" result, err := dbPointer.Exec(query, task.Task, task.Done, task.Id) if err != nil { return err } rowsAffected, err := result.RowsAffected() if err != nil { return err } if rowsAffected == 0 { fmt.Println("No rows updated") } else { fmt.Printf("%d row(s) updated\n", rowsAffected) } return nil } func deleTaskWithID(dbPointer *sql.DB, id int) error { query := "DELETE FROM tasks WHERE id = ?" stmt, err := dbPointer.Prepare(query) if err != nil { return err } defer stmt.Close() result, err := stmt.Exec(id) if err != nil { return err } rowsAffected, err := result.RowsAffected() if err != nil { return err } if rowsAffected == 0 { return fmt.Errorf("no task found with id %d", id) } fmt.Printf("Deleted %d task(s)\n", rowsAffected) return nil }
Ouais, c'était beaucoup de code. Ne vous inquiétez pas, nous le prendrons par le haut et descendrons
Nous importons donc d’abord tous nos packages nécessaires. Le pilote MySQL et le routeur Gorilla Mux que nous avons installés, ainsi qu'un tas de packages de la bibliothèque standard Go qui seront utiles dans nos opérations de code.
import ( "database/sql" "fmt" "html/template" "log" "net/http" "strconv" "strings" _ "github.com/go-sql-driver/mysql" "github.com/gorilla/mux" )
Ensuite, nous créons une variable tmpl qui sera utilisée pour contenir nos modèles chargés et une variable db qui sera un pointeur vers notre connexion à la base de données pour exécuter les tâches de base de données. Nous créons ensuite une structure Task personnalisée qui définit un type de tâche.
Dans la fonction init(), nous chargeons tous nos modèles à partir d'un dossier de modèles. Tous nos modèles sont censés avoir l'extension .html, car puisque HTMX s'attend à ce que nous renvoyions du HTML, cela a beaucoup de sens.
Allez-y et créez le dossier des modèles à la racine du projet afin que nous puissions commencer à charger tous nos modèles à partir de là.
Nous avons également une fonction initDB() qui s'occupe de configurer notre connexion à la base de données et renvoie une référence de pointeur vers notre base de données. Assurez-vous de modifier la chaîne de connexion pour qu'elle corresponde à celle de votre base de données (identifiants, hôte, port, nom de la base de données, etc.)
Dans la fonction principale, nous initialisons notre routeur et appelons notre fonction de base de données initDB() pour initialiser notre base de données. Ceci est ensuite suivi par toutes nos routes et gestionnaires de routes et enfin, nous écoutons sur le port 4000, où nous servirons l'application.
Commençons maintenant à décomposer nos itinéraires et leurs gestionnaires respectifs.
And that’s all the routes and handlers used in this application.
You may have noticed some other functions asides the route handlers also defined in our main.go file. These are functions for performing database operations for fetching tasks (getTasks), getting a single task using its Id (getTaskByID), updating a task using its Id (updateTaskById), and deleting a task using the tasks’ Id (deleTaskWithID).
These helper functions are used within our route handlers to facilitate database operations and keep the handlers lean.
Now that we are familiar with our Hypermedia API, let’s begin creating the HTML templates that will be retuned in the response to our API calls.
First, we create home.html file in the templates folder. This will load the home page of our task management application. Add the following code to the file after creating it.
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <script src="https://unpkg.com/htmx.org@1.9.12"></script> <title>To Do App</title> <div class="row"> <div class="col"> <h2>Tasks</h2> <div> <a href="#" hx-get="/newtaskform" hx-target="#addTaskForm">Add New Item</a> </div> <div id="taskList" hx-get="/tasks" hx-trigger="load" hx-swap="innerHTML"> </div> </div> <!-- <div class="col"> </div> --> <div class="col"> <h2>Add New Task</h2> <div id="addTaskForm"> {{template "addTaskForm"}} </div> </div> </div>
This templates forms the shell and layout of the entire application. We have the boilerplate HTML structure and I have also added the Bootstrap CSS library for some basic styling. The HTMX library has also been included through a CDN link.
The application layout contains two sections. One section for displaying tasks and the other for showing the new task and task update forms.
The first section contains a button for requesting a new task form from the hypermedia API. Once the form is returned, we then use hx-target to load the form into the div with an id of addTaskForm in the forms section of the page.
<a href="#" hx-get="/newtaskform" hx-target="#addTaskForm">Add New Item</a>
The next component in the first section is the div where our tasks will be loaded into. This div uses hx-trigger to initiate a GET request to the /tasks route once the page loads, thus immediately loading the tasks into the page.
<div id="taskList" hx-get="/tasks" hx-trigger="load" hx-swap="innerHTML"> </div>
In the second section, as mentioned earlier, we have a div with an id of addTaskForm for loading both our new task and update forms. We have also preloaded the form for adding a new task into this div using Go template import syntax so as to have a default form in place.
Now let’s create the form for adding a new task next. Inside the templates folder, create the file addTaskForm.html and add the following code inside it:
{{define "addTaskForm"}}{{end}}
This templates loads a fresh form in the UI for adding a new task. When the submit button is clicked, it uses HTMX to send a POST request to the /tasks route to add a new task. When the operation is done, it uses HTMX once again to load the response, an updated list of tasks, into the div with an id of taskList.
Next is our update form template. Inside the templates folder, create the file updateTaskForm.html and add the following code:
{{define "updateTaskForm"}}{{end}}
This template takes in a task to be updated and uses it to pre-populate the update form so that the user can see the previous state of the task to be updated.
When the Update Task button is clicked, it will send the updated values to the hypermedia API for the task to be updated. Once updated, it loads the updated list into the page.
Finally, we create the template the returns our list of task items. Inside the templates folder, create the file todoList.html and add the following code:
{{define "todoList"}}{{end}}
Yeah, a lot is going on in this template, so let’s break it down.
First, the template takes in a Go slice of Task types and loops over it using the range function to create an HTML list of unordered items.
The task it displayed in each list item and the Done property is used to check if the task is completed. If so, we use CSS to strike the task as being completed.
Just after the task text, we have an Edit button. This button calls the /gettaskupdateform endpoint to load an update form using the id of the specific task that was clicked. The user can then update the task and get an updated list of task items.
After the Edit button, we have a Delete button that uses hx-delete to call the DELETE /tasks/{id} endpoint so that we can delete the task. But before we can send the delete request, we use hx-confirm to display a confirmation dialog to the user so that they can confirm if they really want to delete this task item. Once deleted, a new updated list is returned and the task will be gone.
And with that we wrap up our application, so let’s move on to the fun part, checking it out.
With all the code in place, now let’s test our application.
Ensure that all files are saved and run the following command at the root of your project:
go run main.go
Now go to your browser and load the application page at http://localhost:4000. If you have used a different port, ensure that you’re using that port to load the app.
Now you should see your application as displayed below. See below as we add a new task, update an existing task and delete a task from our task list
If you have enjoyed this article, and will like to learn more about building projects with HTMX, I’ll like you to check out HTMX + Go: Build Fullstack Applications with Golang and HTMX, and The Complete HTMX Course: Zero to Pro with HTMX to further expand your knowledge on building hypermedia-driven applications with HTMX.
Happy Coding :)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!