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

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

My Story 5

What is $44.6 billion? 8

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

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.” 15

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

Üííé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 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

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 realize it. 29

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

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> 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

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

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. 42

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. 45

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

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

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

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 in a URL. 56

Like a password ... 57

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

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

<? 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

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

73 Column

Row 74

Table 75

SELECT column_name FROM table_name WHERE column = value 76

SELECT * FROM sheet1 WHERE state = ‘CA’ 78

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

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

Let’s write some code 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

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

http://www.noahbrier.com	944
http://barbariangroup.com	168
http://lurnq.com	74
http://www.barbariangroup.com	69
http://noahbrier.com	34
https://twitter.com	31
http://www.nothingtodowithcreditunions.com	9
http://chriscloud.posterous.com	9
http://runmotherfuckerrun.wordpress.com	8
http://thinkdoer.com	8
http://pinterest.com	4
http://ciu.dev	4
http://lookingforawesome.tumblr.com	4
http://static.slidesharecdn.com	3
http://leolikes.com	3
http://translate.googleusercontent.com	2
http://localhost	2
http://socialkind.posterous.com	2
http://www.seenitbefore.net	2
http://webcache.googleusercontent.com	1
http://www.hpnw.de	1
http://www.instapaper.com	1
http://twittertim.es	1
http://tweetedtimes.com	1
http://www.twylah.com	1
http://www.slideshare.net	1

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

by nbrier

Accessibility

Categories

Upload Details

Usage Rights

26 Embeds 1,387

Statistics