Challenge: API Handling

Test your understanding of building APIs, their handlers, and generating HTML responses within a Beego application.

We'll cover the following

Let’s test your understanding of creating an API, writing its handler, and creating a template to display an HTML response.

Problem statement

In the following code, we have created a route for /hello with the GET method. The handler function is Hello() defined in controllers/default.go. The API accepts two variables in the URL: name and age.

You are tasked to implement the handler with the following constraints:

  • If the name or age is not provided in the parameters of the API, a form, as shown in Image 1, is shown. This form accepts the name and age.

Press + to interact
Image 1: Form to enter name and age
Image 1: Form to enter name and age

  • If name and age are provided as part of the API parameters, it renders a simple HTML view that shows the name and age as shown in Image 2.

Press + to interact
Image 2: On form submission or on valid URL parameters
Image 2: On form submission or on valid URL parameters

Changes are to be made in two files: controllers/default.go and views/hello.tpl. Look for TODO markers in the code.

Code walkthrough

For this solution, we are going to make changes to these two files:

  • controllers/default.go: This contains the handler function of the API.

  • views/hello.tpl: This file is the template that is rendered as the API response.

The Hello() function is the handler function of the /hello API and it looks like this:

Press + to interact
package controllers
import (
	beego "github.com/beego/beego/v2/server/web"
)
type MainController struct {
	beego.Controller
}
func (c *MainController) Get() {
	c.Data["Website"] = "beego.me"
	c.Data["Email"] = "astaxie@gmail.com"
	c.TplName = "index.tpl"
}
func (c *MainController) Hello() {
	// Get the query parameters from the URL
	name := c.GetString("name", "")
	age, _ := c.GetInt("age", 0)
	// TODO: Set the variables to be displayed in the HTML view
	// Assign Variables to c.Data
	
	// Render the HTML template
	c.TplName = "hello.tpl"
}

The handler function Hello() gets the query parameters from the URL. The query parameters are the values that are passed to the URL after the question mark (?). For example, if you visit the URL http://localhost:8080/hello?name=Tom&age=25, the name query parameter will have the value Tom and the age query parameter will have the value 25. The code does the following:

  • Line 19–20: The Hello() function sets the name and age variables to the values of the query parameters.

  • Line 22–23: The “TODO:” comment indicates that as a challenge, we need to complete this part of the code. In this case, we need to set the name and age variables to c.Data, which is a map in the context.

  • Line 26: The TplName variable specifies the name of the HTML template that will be rendered. In this case, the hello.tpl template will be rendered.

Now, let’s look at the view template:

Press + to interact
<!DOCTYPE html>
<html>
<head>
  <title>Beego</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
  // TODO: If Name is blank or Age is 0
  {{if }}
    // TODO: Replace Var1 and Var2 with the c.Data keys set in the controller
    <h1>My name is {{.Var1}}</h1>
    <div>
      My age is {{.Var2}}
    </div>
  {{else}}
    <form action="/hello" method="GET">
      <label for="name">Enter your name:</label><br>
      <input type="text" id="name" name="name"><br>
      <br>
      <label for="age">Enter your age:</label><br>
      <input type="text" id="age" name="age"><br>
      <br>
      <input type="submit" value="Submit">
    </form>
  {{end}}
</body>
</html>

In the view template views/hello.tpl, we do the following:

  • Line 11: We add a condition to check if the age is set.

  • Lines 12–16: If the name and age are set, we will render the name and the age information. We replace Var1 and Var2 with the keys used in the controller.

  • Lines 17–27: If the name or age is not set, we display the form.

Playground

Use the widget below to implement the solution:

appname = hello_beego
httpport = 8080
runmode = dev
Playground for API Handling