[mabel] Add exercises to express chapters

Author: mabelleeyanhwa

docs/backend-web-development/express-basics.md

@@ -1,6 +1,13 @@
 # Express.js basics
 
-Express.js framework is built on top of Node.js for simpler web server development. Express.js comes with parsing, security, user sessions, error handling etc, that are not handled by Node.js
+- Installing Express.js
+- Features of Express.js
+- Your first Express.js app
+- Start Express.js server
+
+Express.js framework is built on top of Node.js for simpler web server development. Express.js comes with parsing, security, user sessions, error handling etc, that are not handled by Node.js. If you use Node.js, you will have to constantly reimplement all these.
+
+It is minimalistic, does not restrict you to any design patterns or file structure, and often requires you to install more packages to add functionality.
 
 ## Installing Express.js
 
@@ -32,37 +39,3 @@ const server = app.listen(PORT, () => {
   console.log(`Server started on port ${PORT}...`);
 });
 ```
-
-## Testing the server
-
-### cURL
-
-Client URL
-cURL is by default already installed in Mac OS. For Windows, you can download cURL separately.
-You can send different HTTP requests.
-
-For example, let's send a POST request to https://localhost:3000/users with a JSON message body.
-
-```sh
-curl --request POST \
-  --url https://localhost:3000/users \
-  --header 'content-type: application/json' \
-  --data '{
-    "username": "babel",
-}'
-```
-
-Alternatives to the flags:
-
-```sh
-curl -X POST \
-  http://localhost:3000/users \
-  -H 'content-type: application/json' \
-  -d '{
-    "username": "babel"
-}'
-```
-
-### API testing tool
-
-Instead of cURL, you can use an API testing tool like Postman or Insomnia. You can even save your requests and organise them into folders. Using those tools, compose a request to "http://localhost:port/" where `port` is the port that your server is listening to.

docs/backend-web-development/express-param-processing.md

@@ -65,3 +65,12 @@ Quoting the Express.js docs on `app.param`:
 > Param callback functions are local to the router on which they are defined. They are not inherited by mounted apps or routers. Hence, param callbacks defined on app will be triggered only by route parameters defined on app routes.
 
 To define the parameter callbacks on a router instead, use `router.param`.
+
+## Exercises
+
+Refactor the previous songs route to use `app.param` for the `id` parameter.
+Find the song of that particular id and put the song in the request object.
+
+```js
+req.song = song;
+```

docs/backend-web-development/express-parsing-request-body.md

@@ -1,6 +1,6 @@
 # Express.js parsing request body
 
-One of the very important middlewares is the one for parsing request body. It is built-in into Express.js.
+One of the very important middlewares is the one for parsing request body. It is built-in into Express.js. This is often forgotten and the cause of bugs.
 
 Note that it used to be a seperate middleware called body-parser but it has been re-added into Express.js as a built-in middleware.
 
@@ -24,6 +24,8 @@ typeof express.json(); // 'function'
 
 The request body of any request will be parsed by the middleware and placed in `req.body` before it is passed to the handler functions.
 
+It is important to `app.use` the json parsing middleware **before** the handler functions. The order of adding middleware matters.
+
 ```js
 app.post("/users", (req, res) => {
   const userName = req.body.username;
@@ -50,3 +52,89 @@ app.use(express.urlencoded({ extended: false }));
 ```
 
 Read https://codewithhugo.com/parse-express-json-form-body/ for more information.
+
+## Exercises
+
+Add more API endpoints to the previous songs API that we had:
+
+Add middleware for parsing JSON request body.
+
+1. Route: POST /songs
+   HTTP Response status code: 201
+
+Add a new song with id, and return new song
+
+JSON to include in the POST message body:
+
+```json
+{
+  "name": "someSongName",
+  "artist": "someSongArtist"
+}
+```
+
+Expected response:
+
+```json
+{
+  "id": 1,
+  "name": "someSongName",
+  "artist": "someSongArtist"
+}
+```
+
+2. Route: GET /songs/:id
+   HTTP Response status code: 200
+
+Return a song with id using route parameters.
+
+if route path is /songs/1, expected response is:
+
+```json
+{
+  "id": 1,
+  "name": "someSongName",
+  "artist": "someSongArtist"
+}
+```
+
+3. Route: PUT /songs/:id
+   HTTP Response status code: 200
+
+Replace a song with id, and return modified song
+
+JSON to include in the PUT message body:
+
+```json
+{
+  "name": "newSongName",
+  "artist": "newSongArtist"
+}
+```
+
+If the route path is /songs/1:
+
+Expected response:
+
+```json
+{
+  "id": 1,
+  "name": "newSongName",
+  "artist": "newSongArtist"
+}
+```
+
+4. Route: DELETE /songs/:id
+   HTTP Response status code: 200
+
+delete a song with id, and return deleted song
+
+if route path is /songs/1, expected response is:
+
+```json
+{
+  "id": 1,
+  "name": "someSongName",
+  "artist": "someSongArtist"
+}
+```

docs/backend-web-development/express-responses.md

@@ -1,5 +1,10 @@
 # Express.js responses
 
+- Ending response with res.end()
+- Sending back response with res.send() and res.json()
+- Writing to res.write() and comparing to res.send()
+- Setting status code of response
+
 The handler function or middleware function usually needs to call a method on the response object (res) to modify and send back a response.
 
 ## Ending a response
@@ -55,7 +60,7 @@ Read [this blog at Fullstacktraining](https://blog.fullstacktraining.com/res-jso
 
 ## Writing parts of response body
 
-In the multiple handler functions routing example, we used `res.write()` to update the response before sending the response back to the client.
+In the multiple handler functions routing example, we used `res.write()` to update the response before sending the response back to the client. Normally, you will not need to use this.
 
 ```js
 res.write("Here is a list of students:\n");
@@ -107,3 +112,37 @@ res.sendStatus(500);
 ```
 
 See [Express.js api docs](https://expressjs.com/en/api.html#res.sendStatus) for more info.
+
+## Should we implement many status codes?
+
+No. The more status codes your API deals with, the more status codes you have to maintain. Your clients (possibly your frontend) will also have to maintain more code to react accordingly to these status codes. Use the status codes only as needed.
+
+## Exercises
+
+Implement an API with the following endpoint:
+
+1. Route: GET /songs
+   HTTP Response status code: 200
+
+Expected response:
+
+if empty:
+
+```json
+[]
+```
+
+if not empty, we will get an array of song objects in JSON.
+
+```json
+[
+  {
+    "name": "someSongName",
+    "artist": "someSongArtist"
+  },
+  {
+    "name": "anotherSongName",
+    "artist": "anotherArtist"
+  }
+]
+```

docs/backend-web-development/express-routing.md

@@ -1,5 +1,12 @@
 # Express.js routing
 
+- What is routing
+- Request and response methods and objects
+- Route paths
+- Route parameters
+- Route querystrings
+- Multiple handler functions
+
 ## What is routing?
 
 Routing is a way to map requests to specific handlers depending on their URI and HTTP verb.
@@ -49,7 +56,7 @@ app.post("/", (req, res) => {
 });
 ```
 
-The handler function (callback function) is called when a GET request is sent by the browser to the root `/`. In the handler function, "Welcome to my homepage" is sent as the response.
+The handler function (callback function) is called when a GET or POST request is sent by the browser to the root `/`. In the handler function for GET request, "Welcome to my homepage" is sent as the response.
 
 Express.js will call the handler function with two parameters. The first parameter is the request object and the second parameter is the response object.
 
@@ -141,12 +148,13 @@ app.get(/.*fly$/, function (req, res) {
 
 We can grab data from the route using route parameters. Route parameters are named segments of the URL used to capture values at their specified position.
 
+The parameters are stored in `req.params`.
+
 GET a specific book with ID:
 
 ```js
 app.get("/books/:bookId", (req, res) => {
   res.send(`You requested information on book ${req.params.bookId}`);
-  // NOTE: the above line poses a security issue, we should always treat any user input as unsafe (see XSS attack)
 });
 ```
 
@@ -190,6 +198,8 @@ Refer to the script: [Express.js playground: query_parameter_example](https://gi
 
 We can use querystrings to filter data, provide information to a page or even alter the action of a page. This is typically used with a GET request.
 
+The queries are stored in `req.query`.
+
 Considering that we have the following data:
 
 ```js
@@ -249,8 +259,6 @@ req.query: { "color": "red", "type": "FRUIT" }
 
 ```js
 app.get("/food", (req, res) => {
-  //console.log(req.query);
-
   const results = data
     // Using if statements
     .filter((item) => {

docs/backend-web-development/express-simple-server.md

@@ -28,8 +28,6 @@ const server = app.listen(PORT, () => {
 });
 ```
 
-Use an API testing tool like Postman to test the route you just created.
-
 ### Other request methods
 
 When making a POST, PUT or DELETE request at the root URL `/`, the server should send a response.
@@ -47,3 +45,45 @@ app.delete("/", (req, res) => {
   res.send(`Hello, i got a ${req.method} request`);
 });
 ```
+
+## Testing the server
+
+### cURL
+
+Client URL
+cURL is by default already installed in Mac OS. For Windows, you can download cURL separately.
+You can send different HTTP requests.
+
+For example, let's send a POST request to https://localhost:3000/ with a JSON message body.
+
+```sh
+curl --request POST \
+  --url https://localhost:3000/ \
+  --header 'content-type: application/json' \
+  --data '{
+    "username": "babel",
+}'
+```
+
+Alternatives to the flags:
+
+```sh
+curl -X POST \
+  http://localhost:3000/ \
+  -H 'content-type: application/json' \
+  -d '{
+    "username": "babel"
+}'
+```
+
+### API testing tool
+
+Instead of cURL, you can use an API testing tool like Postman or Insomnia. You can even save your requests and organise them into folders. Using those tools, compose a request to "http://localhost:port/" where `port` is the port that your server is listening to.
+
+## Exercises
+
+1. Create a new Node.js project
+2. Install express
+3. Create your first server
+4. Start and leave your server running
+5. Use cURL and Postman to test your server, send GET, POST, PUT, DELETE requests

docs/fundamentals/http.md

@@ -147,8 +147,10 @@ Source: [https://www.youtube.com/watch?v=LtNSd_4txVc](https://www.youtube.com/wa
 #### Commonly used status codes
 
 - 200 OK: The request is successful. The meaning of success depends on the request method. The response includes information.
+- 201 Created: The request has been fulfilled, resulting in the creation of a new resource
 - 204 No Content: The server successfully processed the request, but is not returning any content
-- 301 Moved Permanently: The resource requested has permanently moved to the URL given by the Location headers. Browsers and search engines can be redirected.
+- 301 Moved Permanently: The resource requested has permanently moved to the URL given by the Location headers. Browsers and search engines can be redirected. This could be important for SEO. This will also retain users and provide more information than 404.
+- 400 Bad Request: The request could not be understood by the server due to malformed syntax
 - 401 Unauthorized: The access is not authorized.
 - 403 Forbidden: The access is forbidden and the response includes information on access denied.
 - 404 Not Found