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 fb933c72 authored by Florian Moser's avatar Florian Moser
Browse files

Finish web course

parent 5de2d4ad
......@@ -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>
......
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