From db6ed25d466c51fc77595641fb93da6855d026ca Mon Sep 17 00:00:00 2001
From: Florian Moser <git@famoser.ch>
Date: Wed, 24 Mar 2021 18:26:35 +0100
Subject: [PATCH] Work on web course
---
web/web.html | 148 +++++++++++++++++++++++++++++++++++++++++++++++----
1 file changed, 137 insertions(+), 11 deletions(-)
diff --git a/web/web.html b/web/web.html
index b6e599f..f12177a 100644
--- a/web/web.html
+++ b/web/web.html
@@ -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
---
--
GitLab