Forms make the web

Web design and PHP OOP best practices for web forms.

Transcript

1. Forms make the web "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
2. Forms Best Practices Twitter @kevindees "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
3. Design Details "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
4. Forms must be fast. "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
5. "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
6. "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
7. Forms must be clear "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
8. "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
9. "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
10. ☠ Placeholder Text "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
11. "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
12. "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
13. "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
14. Forms must be mobile. "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
15. "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
16. Think Differently ! "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
17. Code Considerations "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
18. 1. Use UTF-8 2. CSRF 3. POST as array data 4. REST Hacking 5. Data Injection Order 6. Feedback "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
19. UTF-8? Really ! "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
20. <meta charset="UTF-8" /> <form action="user.php" accept-charset="utf-8"> <?php header('Content-Type: text/html; charset=utf-8'); CREATE TABLE `users` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT, `first` varchar(60) DEFAULT '', `last` varchar(60) DEFAULT '', `email` varchar(60) DEFAULT '', PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; <?php new PDO('mysql:host=%;dbname=db;charset=utf8', 'user', 'pass'); "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
21. CSRF "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
22. "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
23. <?php session_start(); // check for submit if( !empty($_POST['_csrf']) && !empty($_SESSION['_csrf']) ) { if( $_POST['_csrf'] != $_SESSION['_csrf']){ die('CSRF Block!'); } } // new key $form_access_key = uniqid('_csrf_'); $_SESSION['_csrf'] = $form_access_key; ?> <form action="user.php" method="POST" accept-charset="utf-8"> <input type="hidden" name="_csrf" value="<?php echo $form_access_key; ?>"> </form> "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
24. POST as array data "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
25. <form action="user.php" method="POST" accept-charset="utf-8"> <input type="hidden" name="_csrf" value="<?php echo $form_access_key; ?>"> <label>First Name <input type="text" name="user[first]"></label> <label>Last Name <input type="text" name="user[last]"></label> <label>Email <input type="text" name="user[email]"></label> <p><input type="submit" value="Do Action" /></p> </form> "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
26. "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
27. REST Hacking "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
28. <form action="user.php" accept-charset="utf-8"> <input type="hidden" name="_csrf" value="<?php echo $form_access_key; ?>"> <input type="hidden" name="_method" value="PUT"> .... "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
29. function rest_method($actual = false) { if($actual) { return $_SERVER['REQUEST_METHOD']; } return ! empty($_POST['_method']) ? strtoupper($_POST['_method']) : $_SERVER['REQUEST_METHOD']; } "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
30. $user_controller = new \App\UserController; $rest_method = rest_method(); if( method_exists($user_controller, $rest_method) ) { $user_controller->{$rest_method}(); } "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
31. Data Injection Order "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
32. 1. Old Data If Errors 2. Model Data If Present "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
33. <label> Email <input type="text" name="user[email]" value="<?php echo load_value('email', $model); ?>" /> </label> "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
34. function load_value( $name, $model = false ) { if( !empty($_SESSION['old'][$name]) ) { return $_SESSION['old'][$name]; } if( $model instanceof Model) { return $model->{$name}; } return ''; } "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
35. if( $errors = has_form_errors() ) { $_SESSION['old'] = $_POST['user']; } "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
36. Feedback "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
37. Words 1. Verbose 2. Vague "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
38. Your email address and password are wrong. or Your login is not working out. "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
39. Placement 1. Inline with field 2. Flash on top 3. Alert by overlay "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
40. "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
41. "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
42. "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
43. Emotional 1. Life 2. Language "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
44. "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
45. "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
46. function has_form_errors() { $errors = []; if( is_not_email( $_POST['user']['email'] ) ) { $errors['user']['email'] = 'Opps! Check that email for us.' } if( empty($errors) ) { return false; } return $errors; } "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
47. <label> Email <input type="text" name="user[email]" value="<?php echo load_value('email', $model); ?>" /> <span> <?php echo $errors['user']['email'] ?? 'This field is required'; ?> </span> </label> "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
48. Add emotion little effort "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
49. "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
50. <label> Email <input type="text" name="user[email]" value="<?php echo load_value('email', $model); ?>" /> <span class="<?php echo !empty($errors['user']['email']) ? 'animated fadeInDown' : ''; ?>" style="display: inline-block;" > <?php echo $errors['user']['email'] ?? 'This field is required'; ?> </span> </label> "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
51. <?php if( !empty($errors['user']) ) : ?> <ul class="animated zoomInUp"> <?php foreach( $errors['user'] as $message ) : ?> <li><?php echo $message; ?></li> <?php endforeach; ?> </ul> <?php endif; ?> "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
52. "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
53. Code for humans ! "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
54. ... What about coders? ! "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
55. <?php namespace App; class Form { public $model; public $method; public $action; public $group; public $errors; function __construct( $model, $method, $action, $group, $errors ) { $this->model = $model; $this->method = $method; $this->action = $action; $this->group = $group; $this->errors = $errors; } } "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
56. class Form { .... function open() { $csrf = $_SESSION['_csrf']; $str = "<form action=\"{$this->action}\" method=\"POST\" accept-charset=\"utf-8\">"; $str .= "<input type=\"hidden\" name=\"_csrf\" value=\"{$csrf}\">"; $str .= "<input type=\"hidden\" name=\"_method\" value=\"$this->method\">"; return $str; } function close() { return '<p><input type="submit" value="Do Action" /></p></form>'; } function text($name) { return new \App\Field($name, $this); } } "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
57. echo $form->text('email')->label('Email Address'); "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
58. <?php namespace App; class Field { public $form; public $name; public $value; public $label; function __construct($name, $form) { $this->name = $name; $this->form = $form; $this->value = load_value($name, $this->form->model); } } "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
59. class Field { .... function label($label) { $this->label = $label; return $this; } function __toString() { $group = $this->form->group; $name = $this->name; $errors = $this->form->errors; ob_start(); // echo HTML return ob_get_clean(); } } "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
60. // echo HTML ?> <label> <?php echo $this->label; ?> <input type="text" name="<?php echo "{$group}[{$name}]"; ?>" value="<?php echo htmlspecialchars($this->value); ?>" /> <span class="<?php echo !empty($errors[$group][$name]) ? 'animated fadeInDown' : ''; ?>" style="display: inline-block;" > <?php echo $errors[$group][$name] ?? 'This field is required'; ?> </span> </label> <?php "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
61. $form = new \App\Form($model, 'POST', 'user.php', 'user', $errors); echo $form->open(); echo $form->text('email')->label('Email Address'); echo $form->close(); "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice
62. ! Make YOUR forms amazing ! "Forms: Best Practices" by Kevin Dees // TypeRocket // Robojuice