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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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 thefunc main()
. Thehttp.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
:
1 | 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <!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:
1 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <!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