Merge pull request #23 from LaunchCodeEducation/chapter-13-thymeleaf

Chapter 13 thymeleaf

content/assignments/techjobs-persistent/part-one/index.md

@@ -16,7 +16,7 @@ lastMod: # UPDATE ANY TIME CHANGES ARE MADE
 
 1. Start MySQL Workbench and create a new schema named `techjobs`.
 
-{{% notice blue Tip "rocket" %}}
+{{% notice green Tip "rocket" %}}
 Remember to double click on the schema name in the file tree to make it the default schema.
 {{% /notice %}}
 
@@ -25,12 +25,12 @@ Remember to double click on the schema name in the file tree to make it the defa
 4. Update `src/resources/application.properties` with the correct info. This will include
 `spring.datasource.url` set to the address of your database connection, as well as the username and password for a user you have create Refer to the tip below for the other properties you must add to complete your database setup.
 
-{{% notice blue Tip "rocket" %}}
+{{% notice green Tip "rocket" %}}
 <!-- TODO: Update below link to the coding events repo -->
 You can double check your setup against what you've already done for <!-- [your coding events repo](https://education.launchcode.org/java-web-development/chapters/orm-part1/background.html#setup-orm-database) -->. You can copy these property assignments from your coding events repo, only needing to change the database address and username/password values.
 {{% /notice %}}
 
-{{% notice blue Tip "rocket" %}}
+{{% notice green Tip "rocket" %}}
 If when starting your application, you encounter an error similar to
 
 ```bash

content/assignments/techjobs-persistent/part-two/index.md

@@ -73,7 +73,7 @@ information. Your task here is to make use of the `EmployerRepository` class in
 3. `processAddEmployerForm` already takes care of sending the form back if any of the submitted employer object information is invalid. However, it doesn't yet contain the code to save a valid object. Use `employerRepository` and the appropriate method to do so.
 4. `displayViewEmployer` will be in charge of rendering a page to view the contents of an individual employer object. It will make use of that employer object's `id` field to grab the correct information from `employerRepository`. `optEmployer` is currently initialized to `null`. Replace this using the `.findById()` method with the right argument to look for the given employer object from the data layer.
 
-{{% notice blue Tip "rocket" %}}
+{{% notice green Tip "rocket" %}}
 The variable holding the id you want to query for is already provided for you in the controller method's parameters.
 {{% /notice %}}
 
@@ -93,7 +93,7 @@ and view them.
 
 4. **SQL TASK:** In `queries.sql` under "Part 2", write a query to list the names of the employers in St. Louis City. Do NOT specify an ordering for the query results. 
 
-{{% notice blue Tip "rocket" %}}
+{{% notice green Tip "rocket" %}}
 If everything seems to work – that is, you are able to submit the form without any errors – but you don’t see your employers or skills in the list after submission, here’s what you should check:
 1. Is there any data in the `employers` and `skills` table? Check by going to MySQL Workbench and looking for the employer/skill data within your schema.
 2. If there’s data in the database, check that you are correctly querying for the list of all objects in the controller Are you calling `.findAll()` on the repository?

content/thymeleaf-views/_index.md

@@ -0,0 +1,33 @@
+---
+title: "Chapter 13: Thymeleaf Views"
+date: 2021-10-01T09:28:27-05:00
+draft: false
+weight: 13
+originalAuthor: John Woolbright # to be set by page creator
+originalAuthorGitHub: jwoolbright23 # to be set by page creator
+reviewer: Sally Steuterman # to be set by the page reviewer
+reviewerGitHub: gildedgardenia # to be set by the page reviewer
+lastEditor: # update any time edits are made after review
+lastEditorGitHub: # update any time edits are made after review
+lastMod: # UPDATE ANY TIME CHANGES ARE MADE
+---
+
+## Learning Objectives
+By the end of this chapter you should understand:
+1. The benefits of using templates
+1. How to create a new template using thymeleaf in a Spring Application.
+1. How to add iteration, conditionals, and forms to a template
+1. How to link a template to static resources like CSS stylesheets, and scripts.
+1. How to render a template using Spring controllers.
+
+## Key Terminology
+1. fragments
+1. cdn, content delivery network
+1. template
+1. Thymeleaf
+1. bootstrap
+
+## Content Links
+
+{{% children %}}
+

content/thymeleaf-views/exercises/_index.md

@@ -0,0 +1,64 @@
+---
+title: "Exercises: Thymeleaf Views"
+date: 2021-10-01T09:28:27-05:00
+draft: false
+weight: 2
+originalAuthor: John Woolbright # to be set by page creator
+originalAuthorGitHub: jwoolbright23 # to be set by page creator
+reviewer: Sally Steuterman # to be set by the page reviewer
+reviewerGitHub: gildedgardenia # to be set by the page reviewer
+lastEditor: # update any time edits are made after review
+lastEditorGitHub: # update any time edits are made after review
+lastMod: # UPDATE ANY TIME CHANGES ARE MADE
+---
+
+In the chapter, we started working on an application for tracking various
+coding events around town.
+
+Open up your `coding-events` project in IntelliJ.
+
+## Getting Started
+
+From your own `add-bootstrap` branch, create and checkout a new branch called `my-views-exercises-solution`.
+
+{{% notice blue Note "rocket" %}}
+If you need to make sure your code matches ours to start, look at the [add-bootstrap branch](https://github.com/LaunchCodeEducation/CodingEventsJava/tree/add-bootstrap)  on `CodingEventsJava`.
+{{% /notice %}}
+
+Now, let's add descriptions to our events!
+
+## Expanding our Events Schedule
+
+1. In the videos, we learned how to use templates to display the elements in a static list called `events`. Let's make our `events` list a HashMap! This enables us to add descriptions to our events.
+
+2. Fill your `events` HashMap with the names and descriptions of 3 coding events around town.
+
+   {{% expand "Check your solution" %}}
+
+   ```java
+    events.put("Menteaship","A fun meetup for connecting with mentors");
+    events.put("Code With Pride","A fun meetup sponsored by LaunchCode");
+    events.put("Javascripty", "An imaginary meetup for Javascript developers");
+   ```
+   {{% /expand %}}
+
+3. Using `th:block` and `th:each`, put together the events and their descriptions in a table as opposed to an unordered list.
+
+4. Use fragments to store the address of the new tech hub where all of the programmers are hanging out. Use `th:replace` in your main template to bring in the address as a third column in your table. You may need to create a new `fragments.html`.
+
+   {{% expand "Check your solution" %}}
+
+   ```html
+    <td th:fragment="address">1234 5th Street</td>
+   ```
+   {{% /expand %}}
+
+5. Add some CSS to style your table to make it easier to read and center it on the page. You may need to create a new `styles.css` as well. Make sure to connect `styles.css` to the appropriate template with `th:href`.
+
+## Bonus Missions
+
+1. Update your `processCreateEventForm` method so that you are able to create a new event using the new `HashMap`.
+
+   - You will also need to update your `events/create` template so that a user can enter a description.
+
+1. Try to add one more column to the table with pictures for each coding event. You need to use `th:href` to pull in pictures in the appropriate template.

content/thymeleaf-views/reading/_index.md

@@ -0,0 +1,15 @@
+---
+title: "Reading"
+date: 2021-10-01T09:28:27-05:00
+draft: false
+weight: 1
+originalAuthor: John Woolbright # to be set by page creator
+originalAuthorGitHub: jwoolbright23 # to be set by page creator
+reviewer: Sally Steuterman # to be set by the page reviewer
+reviewerGitHub: gildedgardenia # to be set by the page reviewer
+lastEditor: # update any time edits are made after review
+lastEditorGitHub: # update any time edits are made after review
+lastMod: # UPDATE ANY TIME CHANGES ARE MADE
+---
+
+{{% children %}}

content/thymeleaf-views/reading/bootstrap/_index.md

@@ -0,0 +1,80 @@
+---
+title: "Bootstrap"
+date: 2021-10-01T09:28:27-05:00
+draft: false
+weight: 9
+originalAuthor: John Woolbright # to be set by page creator
+originalAuthorGitHub: jwoolbright23 # to be set by page creator
+reviewer: Sally Steuterman # to be set by the page reviewer
+reviewerGitHub: gildedgardenia # to be set by the page reviewer
+lastEditor: # update any time edits are made after review
+lastEditorGitHub: # update any time edits are made after review
+lastMod: # UPDATE ANY TIME CHANGES ARE MADE
+---
+
+## Introduction
+
+Bootstrap is a commonly-used style library. It allows users to quickly apply its CSS style rules with class selectors. Style updates can add features or improve the usability of an application. For example, Bootstrap, and other styling libraries for that matter, use a standardized color scheme for items like clickable buttons. As the user of the helper library, you can apply the `btn btn-primary` classes to a button on your page and Bootstrap works behind the CSS scenes to render a blue button with white text in a legible font. For more customization, you could also choose which color you want all of the buttons labeled with `btn-primary` on your web page to be.
+
+Straight out of the box, Bootstrap helps developers to get their web apps well-styled without needing to spend much time writing custom CSS rules. The library also does some of the work of applying user-experience best-practices. The button class `btn-danger` for example, is defaulted to appear red, a color most associated with danger.
+
+Image of standard HTML buttons without CSS:
+
+![Standard HTML buttons.](pictures/htmlDefaultButtons.png?classes=border)
+
+Same buttons with Bootstrap:
+
+![Some simple Bootstrap buttons.](pictures/bootstrapButtonOptions.png?classes=border)
+
+## Adding Bootstrap to "coding-events"
+
+### Bootstrap - Video
+
+{{< youtube w-f3NYHHe9Q >}}
+
+> The starter code for this video is found at the [static-resources branch](https://github.com/LaunchCodeEducation/CodingEventsJava/tree/static-resources) of the `coding-events` repo. The final code presented in this video is found on the [add-bootstrap branch](https://github.com/LaunchCodeEducation/CodingEventsJava/tree/add-bootstrap). As always, code along to the videos on your own "coding-events" project.
+
+Apart from adding the library to your Spring Boot project, we won't focus much time on the individual Bootstrap updates to "coding-events" but we want you to know what they are and where they come from. Feel free to add as much or as little Bootstrap styling to your own version.
+
+You'll see from the [Getting Started](https://getbootstrap.com/docs/5.3/getting-started/introduction/) page that there are few ways to incorporate Bootstrap as a dependency in your project. One method is with a link to a **content delivery network**, or **CDN** for short. Linking to a CDN allows you to take advantage of the publicly available library without downloading the entire codebase yourself. Think of the practice like using a web address of an image hosted somewhere else on the web. Unlike downloading the image and including it directly in your own repository, you are not the steward of the image's longevity. The path to an externally hosted image may get moved at some point, or even removed entirely. The same is true with CDNs. So when you use a dependency from a CDN, know that you may need to update the link at some point in your project's lifetime.
+
+From [Bootstrap CDN](https://www.bootstrapcdn.com/), copy the *Complete CSS* and *Complete JavaScript* addresses and drop them into the head tag of `fragments.html` in your "coding-events" project.
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
+```
+
+> The addresses you find at [Bootstrap CDN](https://www.bootstrapcdn.com/) may be different from those above.
+
+### Bootstrap Layout
+
+Much of what makes Bootstrap a powerfully helpful and time-saving style library is the layout logic it contains. In brief, Bootstrap uses a grid system of elements labeled *containers* and *rows* that respond dynamically to the state of a web page. Grid elements are given a size label that dictates when an item will shift or change how it is rendered. Broadly speaking, the grid system helps developers write applications that work well on screens of various sizes. Once you play around with it, you'll find that the grid layout can help you write apps that respond to more than just changes in window size.
+
+[Bootstrap Grid](https://getbootstrap.com/docs/4.4/layout/grid/).
+
+### Bootstrap Tables
+
+Bootstrap gives us some table styling that we can use to display events in "coding-events". Some table styling is customizable, so read around Bootstrap's site and explore adding different options to your table.
+
+[Bootstrap Tables](https://getbootstrap.com/docs/4.4/content/tables/).
+
+### Bootstrap Forms
+
+Bootstrap offers a number of classes meant to decorate form elements. `form-group` helps organize items within a form so that inputs and corresponding labels stay visually connected. `form-control` can be applied to any type of form input to give it the Bootstrap style and look.
+
+[Bootstrap Forms](https://getbootstrap.com/docs/4.4/components/forms/).
+
+## Check Your Understanding
+
+{{% notice green Question "rocket" %}}
+True/False: Style updates are considered refactoring, since they add no new features to a project, only make it look better.
+
+1. True
+2. False
+
+<!-- Solution: Answer: False, style contributes to user interaction and experience, and updates are therefore not refactoring. -->
+{{% /notice %}}
+
+
+