Your SlideShare is downloading. ×
0
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Noah Brier: How to build web apps

4,950

Published on

Noah Brier's presentation at Planning-ness 2010

Noah Brier's presentation at Planning-ness 2010

Published in: Business
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,950
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
84
Comments
0
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×