diff --git a/web/web.html b/web/web.html index f12177a58c5126bd6f3cef71ad6531104dccb292..50d6bca5499e085d147c9357db440a9c12b20897 100644 --- a/web/web.html +++ b/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>