107 lines
3.3 KiB
Markdown
107 lines
3.3 KiB
Markdown
> Writing HTML amid the code is of course not smart, but for old-school PHP programmers, it was a normal practice.
|
|
|
|
Lol
|
|
|
|
I need to do the exercises 0.1.-0.6. here: https://fullstackopen.com/en/part0/fundamentals_of_web_apps
|
|
* [X] 0.1
|
|
* [X] 0.2
|
|
* [X] 0.3
|
|
* [X] 0.4
|
|
* [X] 0.5
|
|
* [X] 0.6
|
|
|
|
## exercise 0.4
|
|
|
|
```mermaid
|
|
sequenceDiagram
|
|
participant browser
|
|
participant server
|
|
|
|
Note left of browser: User fills in form and clicks on submit button.
|
|
|
|
browser->>server: POST https://studies.cs.helsinki.fi/exampleapp/new_note
|
|
activate server
|
|
server->>browser: 302 Redirect to https://studies.cs.helsinki.fi/exampleapp/notes
|
|
deactivate server
|
|
|
|
browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/notes
|
|
activate server
|
|
server-->>browser: HTML document
|
|
deactivate server
|
|
|
|
browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/main.css
|
|
activate server
|
|
server-->>browser: the css file
|
|
deactivate server
|
|
|
|
browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/main.js
|
|
activate server
|
|
server-->>browser: the JavaScript file
|
|
deactivate server
|
|
|
|
Note right of browser: The browser starts executing the JavaScript code that fetches the JSON from the server
|
|
|
|
browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/data.json
|
|
activate server
|
|
server-->>browser: [{ "content": "HTML is easy", "date": "2023-1-1" }, ... ]
|
|
deactivate server
|
|
|
|
Note right of browser: The browser executes the callback function that renders the notes, including the new note.
|
|
```
|
|
|
|
## exercise 0.5
|
|
|
|
```mermaid
|
|
sequenceDiagram
|
|
participant browser
|
|
participant server
|
|
|
|
browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/spa
|
|
activate server
|
|
server-->>browser: HTML document
|
|
deactivate server
|
|
|
|
browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/main.css
|
|
activate server
|
|
server-->>browser: the css file
|
|
deactivate server
|
|
|
|
browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/spa.js
|
|
activate server
|
|
server-->>browser: the SPA JavaScript file
|
|
deactivate server
|
|
|
|
Note right of browser: The browser starts executing the JavaScript code that fetches the JSON from the server
|
|
|
|
browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/data.json
|
|
activate server
|
|
server-->>browser: [{ "content": "HTML is easy", "date": "2023-1-1" }, ... ]
|
|
deactivate server
|
|
|
|
Note right of browser: The browser executes the callback function that renders the notes.
|
|
```
|
|
|
|
## exercise 0.6
|
|
|
|
* browser fills in data and triggers form submission
|
|
* browser renders the new note without talking to the server
|
|
* browser sends POST request to `/new_note_spa`
|
|
* server returns 201 created
|
|
* browser logs the response to console
|
|
|
|
```mermaid
|
|
sequenceDiagram
|
|
participant browser
|
|
participant server
|
|
|
|
Note right of browser: Form gets filled and submission button gets triggered.
|
|
|
|
Note right of browser: The browser updates the in-memory notes array and renders again all notes, before talking to the server at all.
|
|
|
|
browser->>server: POST https://studies.cs.helsinki.fi/exampleapp/new_note_spa
|
|
activate server
|
|
server-->>browser: 201 Created with JSON success message.
|
|
deactivate server
|
|
|
|
Note right of browser: browser logs to console the server's response text.
|
|
```
|