How to Build a Web App (for Non-Programmers)
43 likes18,586 views
The document provides an introduction to building web applications, explaining essential concepts such as data passing between pages using HTTP methods like GET and POST. It discusses form creation, URL query strings, and basic PHP syntax for data handling. The guide aims to simplify web app development by focusing on fundamental techniques for managing user input and data storage.
![<? $_GET[‘stuff’];?>
That’s it. It’s all about what you do with it from there.
47](https://image.slidesharecdn.com/noahbrier-planningness-101006110024-phpapp02/85/How-to-Build-a-Web-App-for-Non-Programmers-47-320.jpg)
![<? print $_GET[‘stuff’];?>
48](https://image.slidesharecdn.com/noahbrier-planningness-101006110024-phpapp02/85/How-to-Build-a-Web-App-for-Non-Programmers-48-320.jpg)
![<strong><? print $_GET
[‘stuff’];?></strong>
50](https://image.slidesharecdn.com/noahbrier-planningness-101006110024-phpapp02/85/How-to-Build-a-Web-App-for-Non-Programmers-50-320.jpg)
![You wrote: <strong><?
print $_GET[‘stuff’];?></
strong>
52](https://image.slidesharecdn.com/noahbrier-planningness-101006110024-phpapp02/85/How-to-Build-a-Web-App-for-Non-Programmers-52-320.jpg)
![<?
if($_POST['password'] == 'password1') {
print 'AWESOMECAKE!';
} else {
print 'FAIL!';
}
?>
60](https://image.slidesharecdn.com/noahbrier-planningness-101006110024-phpapp02/85/How-to-Build-a-Web-App-for-Non-Programmers-60-320.jpg)
![<?
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](https://image.slidesharecdn.com/noahbrier-planningness-101006110024-phpapp02/85/How-to-Build-a-Web-App-for-Non-Programmers-62-320.jpg)
![The Basics
✤ $string = ‘string’;
✤ if($string == ‘string’) {print this;}
✤ else {print that;}
✤ $_GET[‘field_name’];
94](https://image.slidesharecdn.com/noahbrier-planningness-101006110024-phpapp02/85/How-to-Build-a-Web-App-for-Non-Programmers-94-320.jpg)
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
- 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
- 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
- 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
- 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