Go Lang and PostgreSQL Web App MVC Pattern Part 3

Introduction

This is Part 3 of “Go Lang and PostgreSQL Web App with MVC pattern,” a multiple-series tutorial. In Part 2, you learned how to configure your web application. Today, you’ll discover how to test the configuration that you set up previously as well as create additional components of your Go Lang and PostgreSQL Web App with MVC pattern front-end.

If you already know how to test the configuration that you created in Part 2 of this multiple-series and want to skip the steps, go to The Code.

Prerequisite

  • Complete Parts 1 and 2 of the tutorial series “Go Lang and PostgreSQL Web App with MVC pattern.”

Configure the Main application

In the previous lesson, you set up the model files named handler.go and models.go and the configuration files named template.go and db.go.

Let’s go ahead and invoke those files for your Go Lang and PostgreSQL Web App with MVC pattern. To do this, make a root directory project file named main.go with this code:

package main

import (
    "html/template"
    "net/http"
    "patientinfo/model"

    _ "github.com/lib/pq"
)

// package level scope, which means it can be access anywhere in this packager.
var tpl *template.Template

func main() {
    http.HandleFunc("/", index)
    http.HandleFunc("/list", model.PatientIndex)
    http.ListenAndServe(":8080", nil)
}

func index(w http.ResponseWriter, r *http.Request) {
    http.Redirect(w, r, "/list", http.StatusSeeOther)
}

Here are the details of the code you used above for your Go Lang and PostgreSQL Web App with MVC pattern:

  • The executable program, package main is complied. It will be used to run your web app.

  • Dependencies are downloaded with the method import().

  • The http.HandleFunc() is located inside the func main(). The http.HandleFunc() method responds to user’s request by serving the appropriate file.

Configure the Front-end

Now, you can work on the front-end of the Go Lang and PostgreSQL Web App with MVC pattern.

  • Use this script for the configuration setup for handler.go:
config.TPL.ExecuteTemplate(w, "index.gohtml", patients)

Next, you need to have the index.gohtml file served and the object patients showing the data.

  • Construct a template in the directory of templates. Name the file index.gohtml. The structure should be laid out like this here in the following script:
<!DOCTYPE html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Create Patient</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </head>
    <body>

    <div class="container mt-4">
        <h1>Patients Listing</h1>


        <table class="table table-sm table-bordered ">
            <thead class="thead-dark">

            <tr>
                <th>id</th>
                <th>Name</th>
                <th>Last Name</th>
                <th>Gender</th>
                <th>Age</th>
                <th> </th>
                 <th scope="col" colspan="3">Action</th>
            </tr>

            </thead>

            {{range .}}
            <tbody id="myTable">

                <tr>
                    <td>{{.Patient_id}}</td>
                    <td>{{.Name}}</td>
                    <td>{{.Lastname}}</td>
                    <td>{{.Gender}}</td>
                    <td>{{.Age}}</td>
                     <td><a class="action" href="">View</a></td>
                    <td><a class="action" href="">Edit</a></td>
                    <td><a class="action" href="">Delete</a></td>
                </tr>
            </tbody>
            {{end}}

        </table>


    </div>


        <script src="" async defer></script>
    </body>
</html>
  • The code you inputted above represents a standard HTML structure.

You passed the patients object earlier. Time to do an object parsing. Notice that the dot (.) is needed before each value to correctly perform the parsing.

  • {{.Patient_id}}
  • {{.Name}}
  • {{.Lastname}}
  • {{.Gender}}
  • {{.Age}}

Testing the Web Application

In a terminal window, go to your project directory. Test the web app by inputting the command below:

go run main.go

A message should appear that reads, Database connection is successful.

Go to your browser and input http://localhost:8080/list as the URL.

You should see a result something like this:

Conclusion

This concludes this lesson on the Go Lang and PostgreSQL Web App with MVC pattern. This lesson was Part 3 of a multiple-series tutorial, and it covered completing the front-end configuration steps for your web app. Today, you enabled the functionality to serve up the appropriate file based on the users request. The package main was where you invoked the files for the configuration and it also acted as the vehicle through which to run your web app. The testing had a favorable outcome because you received a message stating, Database connection is successful. To continue learning how to add more components to your web app, proceed to Part 4 of this series titled, Go Lang and PostgreSQL web app MVC pattern.

The Code

Heres the complete code for the steps in this multiple-series tutorial, Go Lang and PostgreSQL Web App with MVC pattern Part 3.

The main.go

package main

import (
    "html/template"
    "net/http"
    "patientinfo/model"

    _ "github.com/lib/pq"
)

// package level scope, which means it can be access anywhere in this packager.
var tpl *template.Template

func main() {
    http.HandleFunc("/", index)
    http.HandleFunc("/list", model.PatientIndex)
    http.ListenAndServe(":8080", nil)
}

func index(w http.ResponseWriter, r *http.Request) {
    http.Redirect(w, r, "/list", http.StatusSeeOther)
}

The index.gohtml

<!DOCTYPE html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Create Patient</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </head>
    <body>

        <!--[if lt IE 7]>
           <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
       <![endif]-->

    <div class="container mt-4">
        <h1>Patients Listing</h1>


        <table class="table table-sm table-bordered ">
            <thead class="thead-dark">

            <tr>
                <th>id</th>
                <th>Name</th>
                <th>Last Name</th>
                <th>Gender</th>
                <th>Age</th>
                <th> </th>
                 <th scope="col" colspan="3">Action</th>
            </tr>

            </thead>

            {{range .}}
            <tbody id="myTable">

                <tr>
                    <td>{{.Patient_id}}</td>
                    <td>{{.Name}}</td>
                    <td>{{.Lastname}}</td>
                    <td>{{.Gender}}</td>
                    <td>{{.Age}}</td>
                     <td><a class="action" href="">View</a></td>
                    <td><a class="action" href="">Edit</a></td>
                    <td><a class="action" href="">Delete</a></td>
                </tr>
            </tbody>
            {{end}}

        </table>


    </div>


        <script src="" async defer></script>
    </body>
</html>

Pilot the ObjectRocket Platform Free!

Try Fully-Managed CockroachDB, Elasticsearch, MongoDB, PostgreSQL (Beta) or Redis.

Get Started

Keep in the know!

Subscribe to our emails and we’ll let you know what’s going on at ObjectRocket. We hate spam and make it easy to unsubscribe.