The UI will be incomplete until the server delivers meaningful data. We'll put together a very basic search UI and fetch fake data from the server to present to the user.
- View Offline
- [Voiceover] Hi, and welcome to section two, Collecting Books. During section one, we built a bare-bones web-server in Go, complete with template rendering and a database connection. In section two we'll build on those concepts and start focusing on building features to manage personal book collections. We'll start this section by sending asynchronous communications from the web-client to our server. Next, we'll fetch real library data from an external web-service. Then, we'll start creating personal libraries and storing them in the database.
Finally, we use the data from the server to update the page on-the-fly. Let's remember what we've already accomplished. We built a simple web-server with a single route, which renders a template showing two strings: the status of the database connection and a greeting based on the Name query parameter. By the end of this section, we'll have completely changed our UI to show search results and add new books to the library. Let's get started. We want to build a simple search UI to find books, and we need to display the results in a reasonable manner.
In index.html, let's remove the contents of our old body. Since we want a search bar, let's create a form called search form, with an input tag called search. Next to the input tag, we'll include a submit button with the text Search. Next we'll need to define a location for our search results. Let's build a table. Our table will have a width of 100% to take up the entire screen. A table in HTML consists of a thead tag and a tbody tag.
We'll create a new function called submitSearch. We'll use jQuery's Ajax to send our request back to our server. We'll make this a POST request with the URL /search. To submit our search query data, we'll serialize the search form. At the end of this function we need to call return false to prevent the default button action from being taken. Back on the search form, let's set the onsubmit attribute to return false so the browser does not submit the form. On the button, let's set the onclick attribute to call our submitSearch function.
We can use the square brackets to denote a slice of search results. These are a few examples I've created. Now that we have data, we'll need to encode it to JSON to return to the request. Let's add encoding/json to the import list at the top of the file. Now we'll use json.NewEncoder to create an encoder object, using the response object as an output stream. The output stream is what will be written to. We'll use encoder's Encode method with our results array, which will immediately write the output to the response.
If Encode returns an error, we'll use the http.Error method to let the client know. Finally, let's create rows in the table representing the data our server is returning to us. In the Ajax call, we'll add a success callback. When the call is successful, we'll parse the JSON data with the json.parse function. If the result is false we'll return immediately, as we know we were given invalid data. Next we'll create an object to reference the search results table body using jQuery's dollar syntax, with a hash symbol, and the table body's ID.
If we call empty on this object, any past results will be removed from the table. Now we can iterate over the results we've parsed and create a new row in our table. We can create the new row object using jQuery's dollar syntax and inputting a new string of markup. We'll create td objects for each column, nested inside a parent tr node. We can then use string concatenation with the properties of the json object parsed earlier to build our rows. We'll need columns or td tags for each of title, author, year, and ID, for every book.
To add this object to the table, use the append function. And that's it, we can now restart the web-server using go run main.go to see the results for ourselves. Whenever we hit the search button with text in the text box, we can see that a table will be populated with the results. We covered a lot of ground today, but it is well worth it. In this video, we started putting interactive elements in our UI. And we sent and received data from the server to update our web content. In the next video we'll replace the dummy data with real data fetched from an external REST API based on the search query input by the user.
Go is on the rise. This open-source programming language (created by Google!) comes with a strong and accessible standard library, and provides a growing ecosystem of tools, libraries, and frameworks that can help you build web applications fast. Go for Web Development gets you started with the language, opening with the classic "Hello world" exercise and culminating in a web application with a strongly designed database back end, useful middleware, UI with an intelligent search function, multi-user authentication, and more.
First, learn how to build a web server with Go's extensive standard library. Explore the concepts behind a single-page web application and learn how to create a dynamic user interface, manipulate a database, and use powerful encryption algorithms to implement an authentication system. Next, you'll incorporate more functionality by calling out to external libraries from the database. Finally, it all comes together into an optimized package you can deploy into the wild with Heroku.
- Creating a route in Go
- Using templates
- Building database connections
- Collecting data
- Using web middleware
- Using the Ace template engine
- Integrating HTTP routers like gorilla/mux
- Authenticating users
- Optimizing a Go codebase