Differences
This shows you the differences between two versions of the page.
|
seh:laboratoare:02 [2021/03/19 20:16] alexandru.gradinaru |
seh:laboratoare:02 [2022/03/18 18:04] (current) alexandru.gradinaru [Lab tasks] |
||
|---|---|---|---|
| Line 109: | Line 109: | ||
| For detailed information and syntax you can check [[https://www.w3schools.com/css/]]. | For detailed information and syntax you can check [[https://www.w3schools.com/css/]]. | ||
| + | |||
| + | Nowadays, we use complex frameworks for CSS in order to speed up development. Popular examples are Tailwind, Bootstrap, Material. Here are some | ||
| + | [[https://tailwindcomponents.com/|Tailwind examples]] that you can copy-paste immediately in order to build small sections of your app/website. | ||
| + | |||
| + | ===== Data Transmission ===== | ||
| + | |||
| + | ==== Form Data==== | ||
| + | |||
| + | HTML is sending data by default using the form element. | ||
| + | |||
| + | <code html> | ||
| + | <form action="https://example.com"> | ||
| + | </code> | ||
| + | |||
| + | Data can be sent in multiple formats and multiple methods | ||
| + | |||
| + | * The default method of the HTML form element if GET, although is not recommended anymore. We can only send simple form data using the GET method (encoded text). This will append data in the URL as query parameters, with an URL encoded string. Note that the URL string is usually limited to ~2000 characters. | ||
| + | |||
| + | <code html> | ||
| + | <form method="GET" action="https://example.com"> | ||
| + | result: | ||
| + | GET https://example.com?name=Alex&email=alex@example.com | ||
| + | </code> | ||
| + | |||
| + | |||
| + | * We can send data using the POST or PUT method. This will also send form data using some query parameters, but they are send in a special form-data body container. We can also send complex data like images, audio, XML, JSON objects etc. using settings for Content-Type and encoding | ||
| + | <code html> | ||
| + | <form method="POST" action="https://example.com" enctype="multipart/form-data" > | ||
| + | </code> | ||
| + | * We can use Javascript to send data | ||
| + | |||
| + | |||
| ==== XML ==== | ==== XML ==== | ||
| Line 233: | Line 265: | ||
| } | } | ||
| </script> | </script> | ||
| + | </code> | ||
| + | |||
| + | |||
| + | You can find useful DOM (document object model) function references, details and examples on the Moozila web page: https://developer.mozilla.org/en-US/docs/Web/API | ||
| + | |||
| + | * https://developer.mozilla.org/en-US/docs/Web/API/Element/append | ||
| + | |||
| + | <code javascript> | ||
| + | let div = document.createElement("div") | ||
| + | let p = document.createElement("p") | ||
| + | div.append("Some text", p) | ||
| + | </code> | ||
| + | |||
| + | * https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector | ||
| + | |||
| + | <code javascript> | ||
| + | var el = document.querySelector("div.user-panel.main input[name='login']"); | ||
| + | </code> | ||
| + | |||
| + | * https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects | ||
| + | |||
| + | <code javascript> | ||
| + | formElem.addEventListener('submit', (e) => { | ||
| + | // on form submission, prevent default | ||
| + | e.preventDefault(); | ||
| + | |||
| + | // construct a FormData object, which fires the formdata event | ||
| + | new FormData(formElem); | ||
| + | }); | ||
| </code> | </code> | ||
| Line 306: | Line 367: | ||
| <note important> | <note important> | ||
| Do not forget to include the library first | Do not forget to include the library first | ||
| - | * <script src="https://unpkg.com/axios/dist/axios.min.js"></script> | + | * https://cdnjs.com/libraries/axios |
| </note> | </note> | ||
| Line 324: | Line 385: | ||
| <note tip>W3schools.com has some tutorials with basic information, syntax and examples on HTML, CSS, JavaScript, XML and many others: [[https://www.w3schools.com/]](https://www.w3schools.com/)</note> | <note tip>W3schools.com has some tutorials with basic information, syntax and examples on HTML, CSS, JavaScript, XML and many others: [[https://www.w3schools.com/]](https://www.w3schools.com/)</note> | ||
| - | |||
| - | ===== Lab tasks ===== | ||
| - | |||
| - | As an assignment for this lab you will have to make a small web application client in order to access e-health formatted data. The application must have at least the following: | ||
| - | - Paginated table with patients | ||
| - | - Each patient must have a detailed section or page containing Personal info: diagnosis, gender, treatment etc. | ||
| - | |||
| - | Data can be fetched from [[https://alexgr.ro/ehealth/patients.json]] | ||
| - | |||
| - | The resulting application must be submitted as an online snippet in order to be checked and graded. You can use Plunker or any other suitable online snippet tool. | ||
| - | |||
| - | <note tip>You can use any other framework or technology if the result can be submited as a snippet and can be previewed online alongside the sourcecode.</note> | ||
