Exercise 20: Building Forms - jkneal/spring-angular-train GitHub Wiki

Goals

Learn how to build forms using Spring and Thymeleaf. Learn how to add items.

Instructions

  1. In src/main/resources/templates/shop, create a new file named 'add-product.html'

  2. Like you did in exercise 18, add the HTML 5 doctype and the html tag importing thymeleaf, then add the following content:

 <head th:replace="home :: head">
 </head>
 
 <body>
   <header th:replace="home :: header">
   </header>
   
   <main class="container">
   </main>
   
   <footer th:replace="home :: footer">
   </footer>
   
   <div th:replace="home :: scripts">
   </div>
 </body>
  1. Now within the main container, add the following content:
  • An h4 header with the text 'Add Product'
  • A form tag that posts to '/shop/add' and works with the model object 'product'
  • Within the form, add an input of type 'text' that points to the field name. Before the input, add a label with text 'Product Name'
  • After the input, add a textarea that points to the field description. Before the textarea, add a label with text 'Product Description'
  • After the textarea, add a select that points to the field category. Add the CSS class 'browser-default' to the select tag. Before the select, add a label with text 'Product Category'
  • Now using the model attribute categories, generate options for the select just created. Use the category id property as the option value, and the code property as the option text
  • After the select, add an input of type 'text' that points to the field price. Before the input, add a label with the text 'Product Price'
  • Finally add a paragraph (p) tag. Within the paragraph, add a button tag with type 'submit' and CSS class 'btn'. For the button text use 'Add'

  1. Now open edu.train.shop.ShopController. Add a method named 'getAddProduct' that maps to the path '/add' and accepts Http Get methods. The method should accept an argument with name 'model' and type org.springframework.ui.Model. Add a new edu.train.product.Product instance as a model attribute with name 'product'. Finally, return the logical view for the html file you created in step 1

  2. In the same controller, add a method named 'addProduct' that maps to the path '/add' and accepts Http Post methods. The method should accept an argument with name 'product' and type edu.train.product.Product. Save the product argument using the `productRepository'. Finally, redirect to the path '/shop'

  3. Again in the ShopController, add a method that will populate the model attribute 'categories' by invoking the edu.train.category.CategoryRepository method 'findAll'

VERIFICATION

  1. Start the training application and go to the app home page
  2. Click on the link 'Exercise 20'. Verify the returned page looks like the following:

  1. Verify you have five items available in the product category select

  2. Now complete each of the fields on the add product page and click 'Add'. Verify you are returned to the shop page and the item you added appears in the products table (should be last item)

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️