Guided: Building a Book Catalog App with Spring Boot 3

The purpose of this lab is to guide you through the basics of building an application in Spring Boot 3. This lab will cover the views and controller of the presentation layer as well as the service used in the business layer. Since you will be working with a local JSON file for data, the persistence and database layers will be outside the scope of this lab.

You can run the application after completing the lab by clicking the Run button in the terminal or by running the command ./gradlew bootRun. Once your application is running, you can view it by switching to the Web Browser tab and changing the port to 8081 instead of 8080.

The first component of this application you will need to complete is the BookCatalogService.java. This service contains all of the logic and functions your application will need to perform such as adding, editing, and deleting books.

The boilerplate code to the service already instantiates the catalog as a list of book data from a json file and sorts it by id for you. Next, you will need to implement the binarySearch() function to search for the index of a book in the book catalogue using the binary search algorithm.

Details

1. Set a start as the first index of the list.
2. Set an end as the last index of the list.
3. While start is less than or equal to end, do steps 6-9.
4. Calculate mid as the average of start and end.
5. If the value at index mid is equal to the target value, return mid.
6. If the value at index mid is greater than the target value, set end to mid - 1.
7. If the value at index mid is less than the target value, set start to mid + 1.
8. Return -1 outside of the while loop

Next, you will need to implement the `addBook()` method, which should generate a new `Book` based on the given parameters before adding it to the catalog of books.

Details

1. Create a new index value that is the size of this.books incremented by 1. We increment by 1 because the catalog is 0 indexed but the first book has an id of 1.
2. Create a new Book using this index and the parameters for the method.
3. Add the created Book to this.books with the add() method.

Now you will to implement the `updateBook()` method, which will update the specified book in the book catalog with its updated values.

Details

1. Retrieve the Book to be modified from this.books using the get() method
   • The index for the get() method is the getId() of the updatedBook parameter decremented by 1(to account for 0-indexing).
2. Update the retrieved Book with the values from the updatedBook.
   • Use the setTitle(), setAuthor(), setGenre(), setNumberOfPages(), and setPublishedDate() methods of the Book class to update the values of the retrieved Book.
   • Use the get versions of these methods on the updatedBook to retrieve to values to use.

Lastly, you will need to implement the `removeBook()` method, which will use the `binarySearch()` function you implemented earlier to remove a book from the catalog.

Details

1. Use the binarySearch() method you implemented with the id parameter to find the index of the book to be removed.
2. If the index is found(not equal to -1) remove the book at that index from this.books. Optionally, you can add a print statement to confirm that the book was removed.
3. If the index is not found, don't modify this.books. Optionally, you could add a print statement that specifies a book with the given id could not be found.

Now you need to complete the controller for the application, which is located in BookController.java. The controller is responsible for handling HTTP requests from the apps HTML views by using the methods implemented in BookCatalogService. It then passes back data to the views to be displayed for the user.

The first endpoint you will need to implement is the homePage().

Details

1. Add a @GetMapping() annotation above the method signature.
2. Give the @GetMapping() a "/" for its value.
3. In the method body, retrieve the list of books using the getAllBooks() method from the bookService.
4. Use the model.addAttribute() method to bind your list of books to the view. Give this attribute name something like "books".
5. Return the string "home", which is the name of the HTML file to be rendered at this endpoint.

Next, you will need to implement the `editBookPage()` endpoint for when the user wishes to edit a book currently in the catalog.

Details

1. Add a @GetMapping() annotation above the method signature.
2. Give the @GetMapping() a "/edit-book-page/{id}" for its value.
3. In the method body, retrieve the list of books using the getAllBooks() method from the bookService.
4. Use the binarySearch() method from bookService to retrieve the index of the book with the id parameter.
5. If an invalid index is found (-1), return the string "redirect:/" to redirect back to the home page.
6. Otherwise, use the index to get() the specified Book from the list of books.
7. Create a string by using format(DateTimeFormatter.ISO_LOCAL_DATE) on the publishedDate of the retrieved Book.
8. Use model.addAttribute() to bind the retrieved book to the model.
9. Use model.addAttribute() to bind the formatted date string to the model.
10. Return the string "edit-book" to render the edit-book page.

The `updateBook()` endpoint is then called after the user has inputted any edits to the book they wish to modify and submits those changes.

Details

1. Add a @PostMapping() annotation above the method signature.
2. Give the @PostMapping() a "/update-book" for its value.
3. In the method body, call the updateBook() method from the bookService on the editedBook parameter.
4. Return the string "redirect:/" which will redirect back to the home page after updating the book.

The `addBookPage()` is called when the user wishes to add a new book to the catalog.

Details

1. Add a @GetMapping() annotation above the method signature.
2. Give the @GetMapping() a "/add-book-page" for its value.
3. In the method body, return the string "add-book" which will render the HTML page for adding a new book to the catalog.

Like the `updateBook()` endpoint, the `addNewBook()` endpoint is called after the user has inputted the data for a new book to be added and submits them.

Details

1. Add a @PostMapping() annotation above the method signature.
2. Give the @PostMapping() a "/add-new-book" for its value.
3. In the method body, call the addBook() method from the bookService using all the parameters supplied in the method signature.
4. Return the string "redirect:/" which will redirect back to the home page after adding a new book.

Lastly, the `deleteBook()` endpoint is called when a user wishes to delete a book from the catalog.

Details

1. Add a @PostMapping() annotation above the method signature.
2. Give the @PostMapping() a "/delete-book/{id}" for its value.
3. In the method body, call the removeBook() method from the bookService with the id parameter.
4. Return the string "redirect:/" which will redirect back to the home page after removing the book.

Lastly, you will need to add some finishing touches to the views layer. In this application, the Thymeleaf template engine from Spring is used to render HTML files such as home.html, add-book.html, and edit-book.html. The controller endpoints you implemented in the previous step dictates which of these HTML files the user is currently viewing at any given time.

While the HTML files are mostly complete, you will need to add a few Thymeleaf specific attributes to certain elements that will dynamically render data from the catalog. Let's start with home.html.

Details

1. In the second <tr> element, add a th:each binding set to each book of the ${books} model attribute. It's done the same way as a forEach loop.
2. In each <td> sub element, use the th:text binding and bind it to the respective property of the Book class.
   • For example, the first <td> would have "${book.getTitle()}" for the value of th:text. Follow the same order as shown in the first <tr> element.

Next, you will need to add the appropriate attribute bindings to `add-book.html`.

Details

1. In the <form> element, add a th:action binding set to the "@{/add-new-book}" route.
2. In the same <form> element, add a method binding set to "post".

Once more, you will also need to add the appropriate attribute bindings to `edit-book.html`.

Details

1. In the <form> element, add a th:action binding set to the "@{/update-book}" route.
2. In the same <form> element, add a method binding set to "post".

With all of these tasks completed, the application is now complete and should be fully functional! Refer back to the introduction on running and viewing the application.