To receive notifications about scheduled maintenance, please subscribe to the mailing-list gitlab-operations@sympa.ethz.ch. You can subscribe to the mailing-list at https://sympa.ethz.ch

Commit 5de2d4ad authored by Florian Moser's avatar Florian Moser
Browse files

Work on web course

parent 8fdbad74
......@@ -17,12 +17,6 @@ class: center, middle
---
# Preconditions
Setup webserver
---
# What we will look at
**HTML** for (structured) content.
......@@ -37,6 +31,9 @@ Animations! Filters! Sorting!
**PHP** to generate content.
Update the webpage more conveniently.
*Each of these areas is its own profession!
We only briefly touch JavaScript and PHP.*
---
# Structure of the course
......@@ -672,8 +669,8 @@ In browsers, has access to DOM (representation of HTML).
Can rewrite the content of the page!
Essentially two concepts on how to use JavaScript:
- **to enhance server-generated HTML ("traditional")**
- to generate HTML ("webapps")
- to enhance server-generated HTML ("traditional")
---
......@@ -711,6 +708,33 @@ by combining multiple JavaScript libraries (for tables, for animations, for moda
---
# JavaScript Samples
Hello world
```js
let message = "Hello world";
console.log(message);
```
Loops
```js
let sum = 0
for (let i = 0; i < 10; i++) {
sum += i
}
console.log(sum)
```
Interact with the DOM and browser
```js
document.getElementById("wrapper").innerHtml = "Hello world";
window.location.href = "https://developer.mozilla.com";
alert("This is annoying");
```
---
# jQuery
library which simplifies interacting with the DOM.
......@@ -852,18 +876,120 @@ General-Purpose programming language.
Dynamically typed (like python).
Curly brackets to designate blocks of code (like C#, Java).
"Normal" inheritance (like C#, Java).
Rather fast development towards more "typing".
"Normal" inheritance (like C#, Java).
Developments towards more "typing".
Multiple approaches:
- Inject into HTML to generate only (dynamic) parts of page
- **Inject into HTML to generate only (dynamic) parts of page**
- Configure pre-made content management system (CMS)
- Use fully-fledged framework for webapps which generates HTML
- Provide only data over API to be consumed by client-side code
---
# Executing PHP
PHP is a server-side language.
You need a PHP server!
ETH student?
- Login per SSH into slab1.ethz.ch with kürzel & password.
- Place files in homepage folder.
- Access your personal webpage under `https://n.ethz.ch/~kürzel/`
Many commercial products like [cyon](https://www.cyon.ch/), [metanet](https://www.metanet.ch/), [hostpoint](https://www.hostpoint.ch/), ...
Test locally with [XAMPP](https://www.apachefriends.org/de/index.html) or read the documentation of your linux distribution how to setup Apache with PHP.
You can use [FileZilla](https://filezilla-project.org/) to access the server via FTP / SSH.
---
# "Hello World" in PHP
```html
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<?php
echo "<h1>Hallo Welt</h1>";
?>
</body>
</html>
```
Placed as `index.php` on your root directory, it generates:
```html
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<h1>Hallo Welt</h1>
</body>
</html>
```
---
# Upcoming events in table (1/2)
Dynamic data generation requires:
- data source (like database or simply a file)
- transformation (transform result of query into usable php variables)
- generation (generate html out of the variables)
For this example, we place `events.json` in the same directory as our script:
```json
[
{
"title": "Web course",
"date:" "30.08.2020"
},
{
"title": "Web course",
"date:" "30.08.2020"
},
...
]
```
---
# Upcoming events in table (2/2)
create one row in the table for each event
```php
<?php
$eventsJson = file_get_content("events.json");
$events = json_decode($eventsJson);
?>
...
<table>
<tbody>
<?php foreach ($events as $event) { ?>
<tr>
<td><?= $event->title ?></td>
<td><?= $event->date ?></td>
</tr>
<?php } ?>
</tbody>
</table>
...
```
---
# Send E-Mail from contact from submission (1/2)
Process user-input server-side:
- get user input (like using a form)
- send it to the server (HTTP GET / POST / PUT / ...)
- process it on the server (query global php variables)
# Summary
---
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment