diff --git a/lesson_16/api/api_app/src/main/java/com/codedifferently/lesson16/web/MediaItemsController.java b/lesson_16/api/api_app/src/main/java/com/codedifferently/lesson16/web/MediaItemsController.java index a8bbcc6a5..3bc9ce5fb 100644 --- a/lesson_16/api/api_app/src/main/java/com/codedifferently/lesson16/web/MediaItemsController.java +++ b/lesson_16/api/api_app/src/main/java/com/codedifferently/lesson16/web/MediaItemsController.java @@ -8,9 +8,7 @@ import java.util.List; import java.util.Optional; import java.util.Set; -import java.util.UUID; -import org.springframework.http.ResponseEntity; -import org.springframework.web.bind.annotation.DeleteMapping; +import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.PostMapping; @@ -18,6 +16,7 @@ import org.springframework.web.bind.annotation.RestController; @RestController +@CrossOrigin public class MediaItemsController { private final Library library; private final Librarian librarian; diff --git a/lesson_18/README.md b/lesson_18/README.md new file mode 100644 index 000000000..480795e63 --- /dev/null +++ b/lesson_18/README.md @@ -0,0 +1,57 @@ +# Lesson 18 + +## Lecture Resources + +* [HTML Tutorial for Beginners: HTML Crash Course](https://youtu.be/qz0aGYrrlhU) **(1 hour)** - An introduction to HTML designed for folks who've never worked with it or would like a refresher. +* [Client-side vs Server-side, Front-end vs Back-end? Beginner Explanation of JavaScript on the Web](https://youtu.be/7GRKUaQ8Spk) **(12 minutes)** - Check out this video to help understand the difference between the server-side and the client-side +* [Post From HTML Form To MongoDB Atlas | Javascript Tutorial](https://www.youtube.com/watch?v=ZhqOp1Dkuso) **(12 minutes)** - This short tutorial explores the traditional way that web pages send data back and forth with a web server. +* [POST Form Data With JavaScript Fetch API](https://youtu.be/fGYQJAlLD68) **(10 minutes)** - A tutorial on how to interact with servers from the client-side using the Fetch API in the browser via JavaScript. + +## Homework + +* Go through the lecture resources to understand the basics of working with web clients and servers. Feel free to skip the HTML tutorial if you feel comfortable working with the basics already. +* Complete the [Exploring the Client and Servers](#exploring-the-client-and-servers) walkthrough. You will not need to submit a PR for this assignment. +* Continue working on [lesson_16](/lesson_16/) PR submission. + +## Exploring the Client and Servers + +Let's add some interactivity to a web page by using what we've learned about HTML, CSS, and JavaScript to exchange data with both a web server and an API server. For this exercise, we'll execute the same task (searching for media items by title) both on the server-side and on the client-side. + +### Sending form data on button click + +As demonstrated in lecture, we have a NodeJS web server implemented in TypeScript using the Express library (all files in the [webserver/](./webserver/) folder). + +1. We need to start both our web server and api servers. Our API server is implemented in Java, so navigate into the [api/](./api/) folder to get that started using `gradle run` in a terminal window. It should be running on port 5000. +2. Once the API server is started, run the Node web server using NPM by executing `npm run dev` in a separate terminal, this time navigating into the [webserver/] folder. Confirm that it has started the server on port 4000. +3. Now, Open up the [public/index.html](./webserver/public/index.html) so that we can make some changes. +4. Wrap the search box and button `div` elements in a `