uAdmin Tutorial Part 14 - Storing the data to HTML

In this part, we will discuss about fetching the records in the API and migrating the data from API to HTML that will display the records using Go template.

Go to todo_view.go inside the views folder with the following codes below:

package views

import (
    "html/template"
    "net/http"
    "strings"

    // Specify the username that you used inside github.com folder and
    // import this library
    "github.com/username/todo/models"
    "github.com/uadmin/uadmin"
)

// TodoList field inside the Context that will be used in Golang HTML template
type Context struct {
    TodoList []map[string]interface{}
}

// TodoHandler !
func TodoHandler(w http.ResponseWriter, r *http.Request) {
    // Assigns Context struct to the c variable
    c := Context{}

    // ------------------ ADD THIS CODE ------------------
    // Fetch Data from DB
    todo := []models.Todo{}
    uadmin.All(&todo)

    for i := range todo {
        // Accesses and fetches the record of the linking models in Todo
        uadmin.Preload(&todo[i])

        // Assigns the string of interface in each Todo fields
        c.TodoList = append(c.TodoList, map[string]interface{}{
            "ID":   todo[i].ID,
            "Name": todo[i].Name,
            // In fact that description has an html type tag in uAdmin,
            // we have to convert this field from text to HTML so that
            // the HTML tags from models will be applied to HTML file.
            "Description": template.HTML(todo[i].Description),
            "Category":    todo[i].Category.Name,
            "Friend":      todo[i].Friend.Name,
            "Item":        todo[i].Item.Name,
            "TargetDate":  todo[i].TargetDate,
            "Progress":    todo[i].Progress,
        })
    }
    // ----------------------------------------------------

    // Some codes

}

Now go to templates/todo.html. After the <tbody> tag, add the following codes shown below:

{{range .TodoList}}
<tr>
    <td>{{.Name}}</td>
    <td>{{.Description}}</td>
    <td>{{.Category}}</td>
    <td>{{.Friend}}</td>
    <td>{{.Item}}</th>
    <td>{{.TargetDate}}</td>
    <td>{{.Progress}}</td>
</tr>
{{end}}

In Go programming language, range is equivalent to for loop.

The double brackets {{ }} are Golang delimiter.

.TodoList is the assigned field inside the Context struct.

.Name, Description, .Category, .Friend, .Item, .TargetDate, .Progress are the fields assigned in c.TodoList.

Now run your application, go to http_handler/todo path and see what happens.

Congrats, now you know how to set up a handler file in an organized manner, access the HTML in localhost and store the data from API to HTML using Go templates.

Click here to view our progress so far.

In the next part, we will talk about generating a self-signed SSL certificate using the openssl command and implementing two factor authentication (2FA).

• uAdmin Tutorial Part 14 - Storing the data to HTML (Current Progress)