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




                1
hey, it’s noah
  2
3
4
My Story




     5
6
7
What is $44.6 billion?




      8
9
10
Big Barrier #1
How do you pass stuff from one page to another?




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




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




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




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




                 16
The Big Nine

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



             17
The Big Nine Two

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



             18
GET
For getting data (aka asking for something)




                19
POST
For posting data (aka submitting it)




                20
Simple enough, right?
But what does it really mean?




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


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


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




       ...
search?q=passing+data
+from+one+page+to
+another
1. search (page that is processing the data)
2. ? (start of query string)...
When you type in any URL
Your browser is making a GET request.




               28
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 realiz...
30
ÜííéWLL
ïïïKÜoïãìÅÜÇoÉëáíÄìóKÅoãL
ÅoëíëKéÜé
ïÜ~íZ~PUMCãoåÉóZTUTHÄáääáoå


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




                  33
1. How to make a web form




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




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




         ...
Page that will
   HTTP request method                      process our request
               (passed in URL)




<form me...
Page that will
   HTTP request method                      process our request
               (passed in URL)




<form me...
39
What will the URL be?




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



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




         ...
PHP
PHP Hypertext Protocol




               43
That’s right
It’s a RECURSIVE INITIALISM!




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




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




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




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




      48
49
<strong><? print $_GET
[‘stuff’];?></strong>




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




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




                 54
POST
The other way to pass data.




                55
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...
Like a password ...




      57
<form method=“post” action=“checkpassword.php”>
   Password: <input type=“password” name=“password”>
   <input type=“submi...
59
<?
if($_POST['password'] == 'password1') {
   print 'AWESOMECAKE!';
} else {
   print 'FAIL!';
}
?>




                60
61
<?
if($_POST['password'] == 'password1') {
   print 'AWESOMECAKE!';
} else {?>
   You got the password wrong, try again.<b...
63
That about covers barrier #1
Let’s do a quick recap




                 64
Two main ways to pass data
between pages?




     65
GET & POST




     66
Which one saves data in the
URL string?




      67
GET




      68
Where does it put it?




      69
URL: page.php?name=value




     70
Big Barrier #2
What the hell is a database?




                 71
72
73
     Column
Row




74
Table

   75
SELECT column_name
FROM table_name WHERE
column = value




    76
77
SELECT * FROM sheet1
WHERE state = ‘CA’




     78
79
INSERT into table_name
(column1,column2) VALUES
(value1,value2)




     80
81
INSERT INTO sheet1
VALUES (‘Noah Brier’, ‘1
Noah Street’, ‘NY’, ‘NY’,
‘10032’)



      82
83
Let’s write some code




      84
Download These


MAMP: http://www.mamp.info/en/downloads/index.html


TextWrangler: http://www.barebones.com/products/text...
86
87
88
89
90
91
92
93
The Basics



✤   $string = ‘string’;
✤   if($string == ‘string’) {print this;}
✤   else {print that;}
✤   $_GET[‘field_na...
How to Build a Web App (for Non-Programmers)
Upcoming SlideShare
Loading in …5
×

How to Build a Web App (for Non-Programmers)

29,464 views

Published on

I presented this to an audience of advertising planners/strategists. Code examples and other downloads at: http://noahbrier.com/planningness

Published in: Technology
3 Comments
42 Likes
Statistics
Notes
  • Great resource for beginners.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for the post. Here’s a tool the lets you create your apps in minutes, without coding. Just Point-and-Click http://www.caspio.com/online-database
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • http://0845.com/Inr

    I tide fashion

    Good-looking, not expensive

    Free transport
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
29,464
On SlideShare
0
From Embeds
0
Number of Embeds
1,519
Actions
Shares
0
Downloads
0
Comments
3
Likes
42
Embeds 0
No embeds

No notes for slide

How to Build a Web App (for Non-Programmers)

  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
  22. 23
  23. ÜííéWLLïïïKÖooÖäÉKÅoãL ëÉ~êÅÜèZé~ëëáåÖHÇ~í~HÑêoã HoåÉHé~ÖÉHíoH~åoíÜÉê CÄíådZdooÖäÉHpÉ~êÅÜC~èZÑCoèZ 24
  24. ÜííéWLLïïïKÖooÖäÉKÅoãL ëÉ~êÅÜèZé~ëëáåÖHÇ~í~HÑêoã HoåÉHé~ÖÉHíoH~åoíÜÉê CÄíådZdooÖäÉHpÉ~êÅÜC~èZÑCoèZ 25
  25. search?q=passing+data +from+one+page+to +another 1. search 2. ? 3. q= 4. passing+data+from+one+page+to+another 26
  26. 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
  27. When you type in any URL Your browser is making a GET request. 28
  28. 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
  29. 30
  30. ÜííéWLL ïïïKÜoïãìÅÜÇoÉëáíÄìóKÅoãL ÅoëíëKéÜé ïÜ~íZ~PUMCãoåÉóZTUTHÄáääáoå 31
  31. 32
  32. To get started making simple web apps All you need is two things ... 33
  33. 1. How to make a web form 34
  34. 2. How to do something with the data in the URL on the other end 35
  35. <form method=“get” action=“webapp.php”> <input type=“text” name=“stuff”> <input type=“submit”> </form> 36
  36. 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
  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 webapp.php?stuff=WHATEVERPEOPLETYPEIN 38
  38. 39
  39. What will the URL be? 40
  40. ÜííéWLLóoìêÇoã~áåKÅoãL ãóÑáêëíïÉÄ~ééLïÉÄ~ééKéÜé ëíìÑÑZëïÉÉíåÉëë 41
  41. Now we just need to figure out how to get stuff down At this point we turn to our trusty language of choice. 42
  42. PHP PHP Hypertext Protocol 43
  43. That’s right It’s a RECURSIVE INITIALISM! 44
  44. Every language has its own syntax for this stuff We’re going to be using PHP because that’s what I know. 45
  45. So how do I get stuff down from the URL in PHP? It’s simple really. 46
  46. <? $_GET[‘stuff’];?> That’s it. It’s all about what you do with it from there. 47
  47. <? print $_GET[‘stuff’];?> 48
  48. 49
  49. <strong><? print $_GET [‘stuff’];?></strong> 50
  50. 51
  51. You wrote: <strong><? print $_GET[‘stuff’];?></ strong> 52
  52. 53
  53. We’ll dig in on more syntax later ... But you get the drift. 54
  54. POST The other way to pass data. 55
  55. 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
  56. Like a password ... 57
  57. <form method=“post” action=“checkpassword.php”> Password: <input type=“password” name=“password”> <input type=“submit”> </form> 58
  58. 59
  59. <? if($_POST['password'] == 'password1') { print 'AWESOMECAKE!'; } else { print 'FAIL!'; } ?> 60
  60. 61
  61. <? 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
  62. 63
  63. That about covers barrier #1 Let’s do a quick recap 64
  64. Two main ways to pass data between pages? 65
  65. GET & POST 66
  66. Which one saves data in the URL string? 67
  67. GET 68
  68. Where does it put it? 69
  69. URL: page.php?name=value 70
  70. Big Barrier #2 What the hell is a database? 71
  71. 72
  72. 73 Column
  73. Row 74
  74. Table 75
  75. SELECT column_name FROM table_name WHERE column = value 76
  76. 77
  77. SELECT * FROM sheet1 WHERE state = ‘CA’ 78
  78. 79
  79. INSERT into table_name (column1,column2) VALUES (value1,value2) 80
  80. 81
  81. INSERT INTO sheet1 VALUES (‘Noah Brier’, ‘1 Noah Street’, ‘NY’, ‘NY’, ‘10032’) 82
  82. 83
  83. Let’s write some code 84
  84. 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
  85. 86
  86. 87
  87. 88
  88. 89
  89. 90
  90. 91
  91. 92
  92. 93
  93. The Basics ✤ $string = ‘string’; ✤ if($string == ‘string’) {print this;} ✤ else {print that;} ✤ $_GET[‘field_name’]; 94

×