Noah Brier's presentation at Planning-ness 2010

1. How to build a web app
Or at least how to understand what a web app is better than you do now.
1

2. hey, it’s noah
2

3. 3

4. 4

5. My Story
5

6. 6

7. 7

8. What is $44.6 billion?
8

9. 9

10. 10

11. Big Barrier #1
How do you pass stuff from one page to another?
11

12. 12

13. It’s pretty much all forms
You hit a submit button and do something with a user’s data
13

14. But how do you do it?
How do you take what someone types in and build something to respond to it?
14

15. Let’s talk about HTTP
“HTTP functions as a request-response protocol in the client-server computing
model.”
15

16. In english ...
HTTP is a set of nine things you can ask/tell a server.
16

17. The Big Nine
1. HEAD
2. GET
3. POST
4. PUT
5. DELETE
6. TRACE
7. OPTIONS
8. CONNECT
9. PATCH
17

18. The Big Nine Two
1. HEAD
2. GET
3. POST
4. PUT
5. DELETE
6. TRACE
7. OPTIONS
8. CONNECT
9. PATCH
18

19. GET
For getting data (aka asking for something)
19

20. POST
For posting data (aka submitting it)
20

21. Simple enough, right?
But what does it really mean?
21

23. 23

24. ÜííéWLLïïïKÖooÖäÉKÅoãL
ëÉ~êÅÜèZé~ëëáåÖHÇ~í~HÑêoã
HoåÉHé~ÖÉHíoH~åoíÜÉê
CÄíådZdooÖäÉHpÉ~êÅÜC~èZÑCoèZ
24

25. ÜííéWLLïïïKÖooÖäÉKÅoãL
ëÉ~êÅÜèZé~ëëáåÖHÇ~í~HÑêoã
HoåÉHé~ÖÉHíoH~åoíÜÉê
CÄíådZdooÖäÉHpÉ~êÅÜC~èZÑCoèZ
25

26. search?q=passing+data
+from+one+page+to
+another
1. search
2. ?
3. q=
4. passing+data+from+one+page+to+another
26

27. search?q=passing+data
+from+one+page+to
+another
1. search (page that is processing the data)
2. ? (start of query string)
3. q= (field name)
4. passing+data+from+one+page+to+another (query)
27

28. When you type in any URL
Your browser is making a GET request.
28

29. So the very easiest way to
pass data between pages
Is by putting it in the URL. You already do this, you just don’t realize it.
29

30. 30

31. ÜííéWLL
ïïïKÜoïãìÅÜÇoÉëáíÄìóKÅoãL
ÅoëíëKéÜé
ïÜ~íZ~PUMCãoåÉóZTUTHÄáääáoå
31

32. 32

33. To get started making
simple web apps
All you need is two things ...
33

34. 1. How to make a web form
34

35. 2. How to do something with
the data in the URL on the
other end
35

36. <form method=“get” action=“webapp.php”>
<input type=“text” name=“stuff”>
<input type=“submit”>
</form>
36

37. Page that will
HTTP request method process our request
(passed in URL)
<form method=“get” action=“webapp.php”>
<input type=“text” name=“stuff”>
<input type=“submit”>
</form>
Name input will be
saved under
37

38. Page that will
HTTP request method process our request
(passed in URL)
<form method=“get” action=“webapp.php”>
<input type=“text” name=“stuff”>
<input type=“submit”>
</form>
Name input will be
saved under
webapp.php?stuff=WHATEVERPEOPLETYPEIN
38

39. 39

40. What will the URL be?
40

41. ÜííéWLLóoìêÇoã~áåKÅoãL
ãóÑáêëíïÉÄ~ééLïÉÄ~ééKéÜé
ëíìÑÑZëïÉÉíåÉëë
41

42. Now we just need to figure
out how to get stuff down
At this point we turn to our trusty language of choice.
42

43. PHP
PHP Hypertext Protocol
43

44. That’s right
It’s a RECURSIVE INITIALISM!
44

45. Every language has its own
syntax for this stuff
We’re going to be using PHP because that’s what I know.
45

46. So how do I get stuff down
from the URL in PHP?
It’s simple really.
46

47. <? $_GET[‘stuff’];?>
That’s it. It’s all about what you do with it from there.
47

48. <? print $_GET[‘stuff’];?>
48

49. 49

50. <strong><? print $_GET
[‘stuff’];?></strong>
50

51. 51

52. You wrote: <strong><?
print $_GET[‘stuff’];?></
strong>
52

53. 53

54. We’ll dig in on more syntax
later ...
But you get the drift.
54

55. POST
The other way to pass data.
55

56. POST is generally used for
data you’re going to save.
But for now let’s just think of it as data you don’t want to show up in a URL.
56

57. Like a password ...
57

58. <form method=“post” action=“checkpassword.php”>
Password: <input type=“password” name=“password”>
<input type=“submit”>
</form>
58

59. 59

60. <?
if($_POST['password'] == 'password1') {
print 'AWESOMECAKE!';
} else {
print 'FAIL!';
}
?>
60

61. 61

62. <?
if($_POST['password'] == 'password1') {
print 'AWESOMECAKE!';
} else {?>
You got the password wrong, try again.<br />
<form method="post" action="checkpassword.php">
Password: <input type="password" name="password">
<input type="submit">
</form>
<?}
?>
62

63. 63

64. That about covers barrier #1
Let’s do a quick recap
64

65. Two main ways to pass data
between pages?
65

66. GET & POST
66

67. Which one saves data in the
URL string?
67

68. GET
68

69. Where does it put it?
69

70. URL: page.php?name=value
70

71. Big Barrier #2
What the hell is a database?
71

72. 72

73. 73
Column

74. Row
74

75. Table
75

76. SELECT column_name
FROM table_name WHERE
column = value
76

77. 77

78. SELECT * FROM sheet1
WHERE state = ‘CA’
78

79. 79

80. INSERT into table_name
(column1,column2) VALUES
(value1,value2)
80

81. 81

82. INSERT INTO sheet1
VALUES (‘Noah Brier’, ‘1
Noah Street’, ‘NY’, ‘NY’,
‘10032’)
82

83. 83

84. Let’s write some code
84

85. Download These
MAMP: http://www.mamp.info/en/downloads/index.html
TextWrangler: http://www.barebones.com/products/textwrangler/
download.html
Code: http://noahbrier.com/planningness.zip
OR YOU COULD GO TO http://noahbrier.com/planningness
85

86. 86

87. 87

88. 88

89. 89

90. 90

91. 91

92. 92

93. 93

94. The Basics
✤ $string = ‘string’;
✤ if($string == ‘string’) {print this;}
✤ else {print that;}
✤ $_GET[‘field_name’];
94