Finish web course

web/web.html

@@ -427,20 +427,17 @@ class: center, middle
 
 ---
 
-class: inverted
-
 # CSS basics
 
 ```css
 body {
-  color: white;
-  background: black;
+  color: blue;
 }
 ```
 
 choose a **selector** (like `body`)  
 for **properties** (like `color`)  
-override the default **value** (like `white`)
+override the default **value** (like `blue`)
 
 ---
 
@@ -631,7 +628,7 @@ Use a CSS framework:
 
 <br/>
 
-Getting it right is *extremly* hard!  
+Getting it right is *extremely* hard!  
 Advice: Learn a framework property. Avoid writing CSS.
 
 ---
@@ -983,40 +980,104 @@ $events = json_decode($eventsJson);
 
 ---
 
-# Send E-Mail from contact from submission (1/2)
+# Contact form submission
 
-Process user-input server-side:
+We require:
 - 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)
 
+Get user input with HTML forms:
+
+```php
+...
+<form method="post">
+	<input name="name" type="text"></input>
+	<textarea name="message">
+	<input name="submit" type="submit"></input>
+</form>
+...
+<?php
+if (isset($_POST["name"]) && isset($_POST["message"])) {
+	$body = $_POST["name"]." has message ".$_POST["message"];
+	mail("info@thealternative.ch", "Contact request", $body);
+}
+?>
+...
+```
 
 ---
 
-# Outlook
+# Develop PHP snippets
+
+Beginning is simple, mastery is hard.
 
-Advanced topics coming right up!
+Challenges:
+- Subtle bugs as PHP very permissive
+- Many security challenges (especially with user-input)
+- Many beginners = much wrong information
+
+Resources:
+- Use `var_dump` function to debug variables
+- https://www.php.net/ for the documentation
+- https://stitcher.io/ for news about php
 
 ---
 
-class: center, middle
+# Content Management System (CMS)
 
-# Advanced topics
+After installation, non-technical users can modify content.
+
+Easy to setup marketing webpage, blog, small online shops, ...
+
+Examples:
+- [Wordpress](https://wordpress.com/) as most used, very good usability
+- [Joomla](https://www.joomla.ch/) as another much used alternative
+- [Drupal](https://www.drupal.org/) for more complex applications
+
+Popular Webpage-As-A-Service:
+- [Wix](https://wix.com/)
+- [Squarespace](https://squarespace.com/)
 
 ---
 
-# Advanced topics
+# Frameworks
+
+PHP is good for beginners, but scaling is difficult.  
+Use one of the well-designed, stable frameworks. 
+
+Recommended Frameworks:
+- [Symfony](https://symfony.com/) as the most used framework
+- [Laravel](https://laravel.com/) uses symfony concepts, more "hip"  
+- [Slim](https://www.slimframework.com/) as a minimal framework
+- [ApiPlatform](https://api-platform.com/) which speeds up API development
+
+Mastery of Frameworks takes *years*,  
+but reduces development / maintenance by *order of magnitudes*.
+
+---
+
+# Next steps
+
+Summary:
+- **HTML** for (structured) content.  
+- **CSS** for the design.  
+- **JavaScript** to add client functionality.  
+- **PHP** to generate content on the server.
+
+For developers:
+- Choose focus (Frontend? Backend? Marketing? Engineering?)
+- Learn! Useful: [Roadmap](https://github.com/kamranahmedse/developer-roadmap)
+- Ask questions on [stackoverflow](https://stackoverflow.com/) once you can [ask good questions](https://stackoverflow.com/help/how-to-ask)
+- High investment = high reward
+
+For researcher webpages:
+- Connect to the provided ETH server
+- Write HTML / CSS; add PHP / JavaScript only when necessary
+- Use CSS frameworks if you want to have it look good
 
-HTML:
-- html semantic checker
 
-CSS:
-- other css frameworks
-	
-JavaScript:
 
-PHP:
-- sqlite database
 
     </textarea>
     <script src="js/remark.min.js" type="text/javascript"></script>