|
1 | | -# Java Exercise Template |
2 | | -This template repository is used to create autograded Java exercise repositories for CBF Academy bootcamps. It includes a GitHub Classroom autograding workflow that scores student submissions on functionality and code quality by executing unit tests and submitting the code changes for review by an automated agent. |
3 | | - |
4 | | -## Usage |
5 | | - |
6 | | -1. Create a new repository for the exercise, with the following settings: |
7 | | - - Template: Select this repository |
8 | | - - Name: Use the `java-exercises-[exercise name]` naming convention, e.g. `java-exercises-spring-boot` |
9 | | - - Visibility: Public (needed for Classroom) |
10 | | -2. After initialising, navigate to the repo settings and set as a template, so it can be used for assignments |
11 | | -3. Commit README, Maven assets, starter code and unit tests to the main branch |
12 | | -4. Create a solutions branch and commit any reference solutions code to it |
13 | | -5. Modify the `MAX_TESTS` environment variable to reflect the total number of tests available |
14 | | -6. Push all changes |
15 | | - |
16 | | -## Testing |
17 | | - |
18 | | -1. Create a new Classroom assignment using the exercise repo as the starter template, with the following settings |
19 | | - - Repository visibility: Private |
20 | | - - Grant students admin access to their repository: Disabled |
21 | | - - Copy the default branch only: Enabled |
22 | | - - Supported editor: Don't use an online IDE |
23 | | - - Protected file paths: `.github/**/*`, `**/test/**/*` |
24 | | - - Enable feedback pull requests: Enabled |
25 | | -2. Accept the assignment from a test account. |
26 | | -3. Commit and push |
27 | | -4. Review the Actions output and Feedback PR comment to ensure everything operates as expected |
| 1 | +# Web Applications |
| 2 | + |
| 3 | +[][1] |
| 4 | + |
| 5 | +The goal of these programming exercises is to practise: |
| 6 | +- working with a web server |
| 7 | +- working with a web client |
| 8 | +- creating simple HTML pages |
| 9 | + |
| 10 | +## :globe_with_meridians: HTTP |
| 11 | + |
| 12 | +**<ins>Exercise 1</ins>** |
| 13 | + |
| 14 | +Analyse the following HTTP request: |
| 15 | + |
| 16 | +``` |
| 17 | + GET https://www.google.com HTTP/1.1 |
| 18 | + Host: cs.unibg.it |
| 19 | + User Agent: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/124 |
| 20 | + (KHTML, like Gecko) Safari/125 |
| 21 | + Accept: ext/xml, application/xml, application/xhtml+xml, text/html;q=0.9, |
| 22 | + text/plain;q=0.8, image/png,*,*;q=0.5 |
| 23 | + Accept-Language: it |
| 24 | + Keep-Alive: 300 |
| 25 | + Connection: keep-alive |
| 26 | +``` |
| 27 | + |
| 28 | +1. What is the requested URL? |
| 29 | +2. Which version of HTTP is used? |
| 30 | +3. Does the browser ask for a persistent or a non-persistent connection? |
| 31 | +4. What is, in your opinion, the utility in indicating the type (and version) of browser used by |
| 32 | +the client in the HTTP Request? |
| 33 | + |
| 34 | +**<ins>Exercise 2</ins>** |
| 35 | + |
| 36 | +An HTTP client sends the following message: |
| 37 | + |
| 38 | +``` |
| 39 | + GET http://cs.unibg.it /index.html HTTP/1.1 |
| 40 | + User-agent: Mozilla/4.0 |
| 41 | + Accept: text/html, image/gif, image/jpeg |
| 42 | + If-modified-since: 27 Feb 2017 08:10:00 |
| 43 | +``` |
| 44 | + |
| 45 | +Write down two feasible responses of the HTTP server (only the status line). |
| 46 | + |
| 47 | +## :spider_web: HTML |
| 48 | + |
| 49 | +An [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) form is a section of the page that [collects input](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls) from the user. The input from the user is generally sent to a server (web servers, mail clients, etc). We use the `<form>` element to create forms in HTML. |
| 50 | + |
| 51 | +### Form Structure |
| 52 | + |
| 53 | +Create a HTML form in [login.html](src/main/resources/login.html) with the following structure: |
| 54 | + |
| 55 | +#### Required Elements: |
| 56 | + |
| 57 | +Create a `<form>` element containing: |
| 58 | +- Three `<div>` elements containing: |
| 59 | + 1. An email-type `<input>` element with its id set to "email" and an external label |
| 60 | + 2. A password-type `<input>` with its id set to "password" and an external label |
| 61 | + 3. A checkbox-type input with its id set to "remember", inside a label and a "Forgot password" `<a>` element (you can use `#` for the href attribute) |
| 62 | +- A submit-type `<button>` |
| 63 | + |
| 64 | +#### Accessibility Requirements: |
| 65 | +- All inputs should have a `name` attribute defined |
| 66 | +- All inputs should have associated labels using `for` attributes or being wrapped by the associated label |
| 67 | + |
| 68 | +### Visual Reference |
| 69 | + |
| 70 | + |
| 71 | +**Note:** Styling for the form is provided, but you won't be graded on its appearance. Focus on the correct HTML structure and accessibility features. |
| 72 | + |
| 73 | +## :white_check_mark: Verify Your Implementation |
| 74 | + |
| 75 | +To verify that your form is structured as expected, run the tests: |
| 76 | + |
| 77 | +```shell |
| 78 | +./mvnw clean test |
| 79 | +``` |
| 80 | + |
| 81 | +**Learn more:** [Anatomy of an HTML Document](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics#anatomy_of_an_html_document) |
0 commit comments