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

26,909 views
25,207 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
26,909
On SlideShare
0
From Embeds
0
Number of Embeds
1,515
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

×